/**
 * 이 파일은 비교과모듈의 일부입니다. (http://www.coursemos.kr)
 *
 * 비교과 기본 템플릿 - 사이트 레이아웃 스타일시트
 * 코스모스 모듈의 설정값을 받아오기 위해 PHP로 작성되었으나, header 를 통해 스타일시트로 인식된다.
 *
 * @file /modules/eco/templets/styles/style.css.php
 * @author Arzz (arzz@arzz.com)
 * @license MIT License
 * @version 3.4.0
 * @modified 2019. 4. 18.
 */
.container {box-sizing:border-box;}
header {position:relative; width:100%; top:0; left:0; background:#fff; z-index:10; border-bottom:1px solid #e0e0e0}
header.index {position:fixed;}
header.banner {background:#2A2C7F;}
header > div.container {font-size:0;}
header > div.container > h1 {float:left; width:200px; height:100px; vertical-align:middle;}
header.banner{border-bottom:0}
header.banner > div.container {width:100%; padding:0 20px; box-sizing:border-box}
header.banner > div.container > h1{width:310px}
header.banner > div.container > nav {width:calc(100% - 320px)}
header > div.container > h1 > a {display:block; width:100%; height:100%; background-size:contain; background-position:0 center; background-repeat:no-repeat; font-size:0; color:transparent; vertical-align:middle;}
header > div.container > nav {display:inline-block; width:calc(100% - 210px); height:60px; margin-left:10px; vertical-align:middle;}
header > div.container > nav > ul {list-style:none; height:60px; vertical-align:middle;}
header > div.container > nav > ul > li {display:inline-block;  padding:0px 5px;}
header > div.container > nav > ul > li > a {position:relative; display:inline-block; height:30px; line-height:30px; padding:15px 10px; text-decoration:none; color:#222; font-size:1.29rem; font-weight:bold;}
header > div.container > nav > ul > li > a::before {width:0; height:0; border:0; border-bottom:8px solid #2A2C7F; border-left:10px solid transparent; border-right:10px solid transparent; left:50%; background:transparent; }
header > div.container > nav > ul > li > a.selected::before {content:""; display: inline-block; position:absolute; bottom:0; left:50%; transform:translateX(-50%);  width:0; height:0; border:0; border-bottom:8px solid #2A2C7F; border-left:10px solid transparent; border-right:10px solid transparent; left:50%; background:transparent; }

header nav div.submenu {height:54px;background:#2A2C7F;}
div[data-role=wrapper] header nav > ul li div.submenu > ul li a:hover {color:#2A2C7F; font-weight:bold;}

header > div.container > ul.submain {float:right; width:calc(100% - 240px); margin-left:10px; height:30px; padding-top:10px; list-style:none; text-align:right}
header > div.container > ul.submain > li {display:inline-block; position:relative; font-size:0.86rem; padding:0px 5px; vertical-align:middle;}
header > div.container > ul.submain > li > a {display:block; color:#808080; line-height:30px; padding:0px 10px; text-decoration:none}
header > div.container > ul.submain > li + li:after{content:''; display:block; position:absolute; top:50%;transform:translateY(-50%); left:0; height:11px; width:1px; background-color:#e6e6e6}
header > div.container > ul.submain > li.login {margin-right:12px;}
header > div.container > ul.submain > li.clock {padding:unset;}
header > div.container > ul.submain > li.clock:after{content:unset;}
header > div.container > ul.submain > li.login {padding:0 10px;}
header > div.container > ul.submain > li.login div[data-widget] > ul > li[data-action*=push] > div[data-role=popup] {top:30px;}
header > div.container > ul.submain > li.login div[data-widget] > ul{height:30px; padding-left:15px}
header > div.container > ul.submain > li.login div[data-widget] > ul > li.name{font-size:0.86rem; color:#808080; vertical-align:bottom;}
header > div.container > ul.submain > li.login div[data-widget] > button{height:30px; line-height:18px; padding:0 13px; color:#808080; font-size:0.86rem}
header > div.container > ul.submain > li.login div[data-widget] div[data-widget] > ul > li{height:30px;}
header > div.container > ul.submain > li.login div[data-widget][data-thema=light] > ul > li > button{margin:0}
header > div.container > nav > ul.main {float:right; vertical-align:middle;}
header > div.container > nav > ul.main > li > a:hover {color:#2A2C7F}

header[data-module=eco] li.clock {width: auto;margin-right: 5px;}
header[data-module=eco] li.clock button.btn_clock {width: auto;height: auto;font-size: 14px;color: #3e94e9;line-height: 1;opacity: 1;box-sizing: border-box;background-color: transparent;border: 0;}
header[data-module=eco] li.clock button.btn_clock > i {display: inline-block;color: #666;vertical-align: middle;}
header[data-module=eco] li.clock button.btn_clock > span {display: inline-block;vertical-align: middle;color: #3e94e9;}
header[data-module=eco] li.extend {width: auto;border: 1px solid #e6e6e6;}
header[data-module=eco] li.extend button.btn_extend {width: 100%;height: auto;margin: 0;padding: 5px;font-size: 14px;color: #666;line-height: 1;transition: all 0.3s;opacity: 1;background-color: transparent;border: 0;cursor: pointer;}
header[data-module=eco] li.extend:hover {cursor: pointer;background-color: rgba(0,0,0,.1);}

header > div.container > nav > ul.main > li > a.selected:before {content:''; bottom:-1px; position:absolute; width:0; height:0; border:0; border-bottom:8px solid #2A2C7F; border-left:10px solid transparent; border-right:10px solid transparent; left:50%; background:transparent; margin-left:-10px;}
header.cardType > div.container > nav > ul.main > li > a.selected:before {bottom:2px;}
header.card_subpage > div.container > nav > ul.main > li > a.selected:before {display:none;}

header > div.container > nav > ul.main > li.search {margin-right:-10px;}
header.banner > div.container > ul.submain > li.login{max-width:250px;}
header.banner > div.container > ul.submain > li.login li.name {color:rgba(255,255,255,.6)}
header.banner > div.container > nav > ul.main > li.search{display:none}
header > div.container > nav > ul.main > li.search > button {width:35px; height:35px; border:0; font-size:1.29rem; cursor:pointer; color:#fff; line-height:35px; border-radius:50%; background-color:#2A2C7F}
header > div.container > nav > ul.main > li.allMenu > button {width:35px; height:35px; border:0; font-size:1.29rem; cursor:pointer; color:#fff; line-height:35px; border-radius:50%; background-color:transparent;}
header > div.container > nav > ul.main > li.allMenu > button > i.mi-bars {display:inline; font-size:1.71rem; vertical-align:middle;}
header > div.container > nav > ul.main > li.allMenu > button > i.mi-bars:before {color:#000;}

header > div.container > button[data-role=sidebar] {width:60px; height:60px; font-size:2.29rem; float:right; border:0; cursor:pointer; background:transparent; display:none; line-height:60px; color:#222; position:relative;}
header > div.container > button[data-role=sidebar] > label {display:none; position:absolute; z-index:1; max-width:80%; top:4px; right:3px; height:18px; min-width:18px; border-radius:9px; box-sizing:border-box; padding:0px 5px; font-size:0.79rem; font-family:Roboto; background:transparent; color:#fff; line-height:18px; text-align:center; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; background:#2A2C7F; color:#fff;}
header > div.container > button[data-role=sidebar] > label:empty {display:none;}

header > form[data-role=search] {position:absolute; top:155px; left:0; width:100%; background:#fff; padding:0; margin:0; display:block; z-index:10; box-shadow:0px 1px 3px rgba(0,0,0,0.1); display:none;}
header.NONE > form[data-role=search] {top:101px;}
header > form[data-role=search] > div.input {width:100%; height:50px; border-bottom:1px solid #ebebeb}
header > form[data-role=search] > div.input > div.container {font-size:0;}
header > form[data-role=search] > div.input > div.container > input {margin-right:10px; width:calc(100% - 368px); height:24px; padding:5px 0px; font-size:1.29rem; vertical-align:middle; border:0; background:transparent;}
header > form[data-role=search] > div.input > div.container > button {width:34px; height:34px; margin-right:10px; font-size:2.29rem; line-height:34px; border:0; background:transparent; cursor:pointer; display:inline-block; vertical-align:middle; color:#222;}
header > form[data-role=search] > div.input > div.container > button.keyword {position:relative; width:180px; height:100%; min-height:50px; background:#40464d; border:0; cursor:pointer; color:#eee; font-size:1rem; text-align:left;}
header > form[data-role=search] > div.input > div.container > button.keyword > b {display:block; width:100%; height:50px; line-height:50px; font-size:1rem; text-align:left; padding:0px 15px 0px 25px; position:absolute; top:0; left:0; box-sizing:border-box;}
header > form[data-role=search] > div.input > div.container > button.keyword > b > i {float:right; width:30px; height:48px; line-height:48px; text-align:center; font-weight:normal;}
header > form[data-role=search] > div.input > div.container > button[type=submit] {font-size:2rem;}
header > form[data-role=search] > div.input > div.container > button[type=button].detail {width:80px; height:50px; font-size:1.07rem; color:#222; font-weight:bold; background-color:#fafafa;}
header > form[data-role=search] > div.input > div.container > button:last-child {margin-right:0;}
header > form[data-role=search].index {top:101px;}
header > form[data-role=search] .container div.tag {display:none;}
header > form[data-role=search] > div[data-module=eco] div.input.search_area > input {width: calc(100% - 362px);}
header > form[data-role=search] > div[data-module=eco] div.input.search_area > button[data-action=close] {width:45px; height:45px; margin:0 1px; font-size:1.43rem; background-color:#b5b7c0; color:#fff;}

header.banner > div.container > button[data-role=sidebar] {color:#fff}
header.banner + div.banner{margin-bottom:30px;}

/* ------------ 그룹추가일때 헤더 스타일 추가 05-25 ------------ */

header[data-group=group].index {position:relative;}
header[data-group=group] > form[data-role=search] {top:100px;}
div[data-role=wrapper] header[data-group=group] nav div.submenu {visibility:hidden;}
header[data-group=group] > div.container > nav > ul.main > li > a.selected:before {display:none;}

div[data-role=wrapper] header[data-group=group] {position:relative;z-index:51;}
div[data-role=wrapper] header[data-group=group] nav > ul > li {position:static;}
div[data-role=wrapper] header[data-group=group] nav > ul > li div.submenu { display:block; position:absolute; top:100px; left:0px; right:0px; width:100%; height:0px; border-top:1px solid #ddd; background-color:#fff; z-index:30; /*-webkit-box-shadow:0px 0px 30px 2px rgba(0,0,0,0.2); -moz-box-shadow:0px 0px 30px 2px rgba(0,0,0,0.2); box-shadow:0px 10px 10px rgba(0,0,0,0.1);*/ text-align:left; overflow:hidden; transition:all 0.4s;}
div[data-role=wrapper] header[data-group=group] nav > ul > li div.submenu div.container::before {content:''; position:absolute; top:0; left:0; display:block; width:450px; height:100%; background-color:#F7F7F7; z-index:-1;}
div[data-role=wrapper] header[data-group=group] nav > ul > li div.submenu div.container ul li {line-height:1; margin:0;}
div[data-role=wrapper] header[data-group=group] nav > ul > li div.submenu div.container div.wrap {}
div[data-role=wrapper] header[data-group=group] nav > ul > li div.submenu div.container div.wrap { font-size:0; background-color:#F7F7F7;}
div[data-role=wrapper] header[data-group=group] nav > ul > li div.submenu div.container div.wrap div.title {display:inline-block; width:270px; height:260px; vertical-align:top;}
div[data-role=wrapper] header[data-group=group] nav > ul > li div.submenu div.container div.wrap div.title h2 {font-size:2.43rem; line-height:42px; color:#111; padding:40px 10px 30px; background:url(../images/bg_gnb_tit.png) no-repeat right top;}

div[data-role=wrapper] header[data-group=group] nav > ul > li div.submenu div.container div.wrap div.menus {display:inline-block; box-sizing:border-box; width:calc(100% - 270px); padding-bottom:50px; border-left:1px solid #ddd; min-height:350px; background-color:#fff;}
div[data-role=wrapper] header[data-group=group] nav > ul > li div.submenu div.container div.wrap div.menus > ul {display:block; width:100%; box-sizing:border-box; padding:20px 0px 15px 0; text-align:left;}
div[data-role=wrapper] header[data-group=group] nav > ul > li div.submenu div.container div.wrap div.menus > ul + ul {border-top:1px solid #e5e5e5;}
div[data-role=wrapper] header[data-group=group] nav > ul > li div.submenu div.container div.wrap div.menus > ul > li {display:flex; align-items:flex-start; color:#333; padding:0 10px 0 20px; line-height:1; gap:20px;}
div[data-role=wrapper] header[data-group=group] nav > ul > li div.submenu div.container div.wrap div.menus > ul > li > a {display:inline-block; position:relative; flex-shrink:0; line-height:26px; overflow:hidden; cursor:pointer; padding:0 20px; color:#000; font-size:1.14rem; text-decoration:none; font-weight:bold; }
div[data-role=wrapper] header[data-group=group] nav > ul > li div.submenu div.container div.wrap div.menus > ul > li > a::before {content:"\e60d"; position:absolute; left:0; top:0; color:#2A2C7F; font-family:'XEIcon'; font-size:0.79rem;}
div[data-role=wrapper] header[data-group=group] nav > ul > li div.submenu div.container div.wrap div.menus > ul > li > a:hover {color:#fff; color:#0b4da2;}
div[data-role=wrapper] header[data-group=group] nav > ul > li div.submenu div.container div.wrap div.menus > ul > li > a  i {}
div[data-role=wrapper] header[data-group=group] nav > ul > li div.submenu div.container div.wrap div.menus > ul > li > ul {display:inline-block; text-align:left; white-space:normal; font-size:0; vertical-align:top;}
div[data-role=wrapper] header[data-group=group] nav > ul > li div.submenu div.container div.wrap div.menus > ul > li > ul > li {display:inline-block; min-width:20%; color:#333;}
div[data-role=wrapper] header[data-group=group] nav > ul > li div.submenu div.container div.wrap div.menus > ul > li > ul > li > a {position:relative; display:block; height:26px; line-height:26px; overflow:hidden; cursor:pointer; padding-left:15px; padding-right:15px; color:#333; font-size:1rem; text-decoration:none; transition:all 0.3s;}
div[data-role=wrapper] header[data-group=group] nav > ul > li div.submenu div.container div.wrap div.menus > ul > li > ul > li > a:after {content:''; font-family:'XEIcon'; font-size:0.79rem;}
div[data-role=wrapper] header[data-group=group] nav > ul > li div.submenu div.container div.wrap div.menus > ul > li > ul > li + li > a::after{content:''; display:block; position:absolute; top:5px; left:0; width:1px; height:15px; background:#cccccc}
div[data-role=wrapper] header[data-group=group] nav > ul > li div.submenu div.container div.wrap div.menus > ul > li > ul > li > a:hover {color:#0b4da2;}
div[data-role=wrapper] header[data-group=group] nav > ul > li div.submenu div.container div.wrap div.menus > ul > li > ul > li > a:hover:after{color:#0b4da2;}

div[data-role=wrapper] header[data-group=group] nav > ul > li div.submenu div.container div.wrap  div.leftbox { position:absolute; top:0px; left:0; z-index:0; width:50%; height: 260px; background-color:#0b4da2; }

main[data-group=group].index {padding-top:0;}
main[data-group=group] nav:not(.essential) {display:none;}
main[data-group=group] > div.intro > div.container > div.breadcrumb {display:none;}
main[data-group=group] div.nbreadcrumb {position:sticky; top:0; left:0; right:0; z-index:30;}
/* ------------ 그룹추가일때 헤더 스타일 추가끝 05-25 ------------ */

main > nav {height:54px; background:#2A2C7F; font-size:0; overflow:hidden; position:relative;}
main > nav > div.container {position:relative;}
main > nav > div.container > ul {display:block; text-align:center; padding:12px 0px 32px 0px; height:30px; overflow-x:scroll; overflow-y:hidden; white-space:nowrap;}
main > nav > div.container > ul > li {display:inline-block; padding:0px 10px; height:30px; vertical-align:middle;}
main > nav > div.container > ul > li > a {display:inline-block; height:26px; line-height:26px; border-top:2px solid transparent; border-bottom:2px solid transparent; color:rgba(255,255,255,0.8); padding:0px; font-size:1.14rem; text-decoration:none;}
main > nav > div.container > ul > li > a:hover {color:#fff;}
main > nav > div.container > ul > li.selected > a {border-bottom-color:#fff; color:#fff;}
main > nav > div.container > div.gradient {position:absolute; top:0; right:0; width:30px; height:54px; background:linear-gradient(to right,rgba(42,44,127,0) 0%,rgb(42,44,127) 60%,rgb(42,44,127) 100%);}
main > nav + div.container {margin-top:50px;}

main div[data-role=button] > button[type=submit], div[data-role=button] > .submit {background:#2A2C7F;}
main div[data-module=board] div[data-role=toolbar] > a {background:#2A2C7F;}

main.index {padding:70px 0; box-sizing:border-box;}
main.index > nav.essential {background:#fff; border-bottom:1px solid #e5e5e5; height:152px; overflow:hidden;}
main.index > nav.essential > div.container > ul {margin-left:-10px; margin-right:-10px; width:calc(100% + 20px); height:172px; overflow-x:scroll; display:block; padding:0; text-align:center; white-space:nowrap;}
main.index > nav.essential > div.container > ul > li {display:inline-block; width:105px; height:120px; vertical-align:top; padding:10px;}
main.index > nav.essential > div.container > ul > li:first-child {width:10px;}
main.index > nav.essential > div.container > ul > li:last-child {width:10px;}
main.index > nav.essential > div.container > ul > li > a {display:block; text-decoration:none; color:#666; width:85px; height:auto; margin:0 auto; text-align:center; font-size:0.86rem;  border:0; line-height:1; transition:.2s ease-in-out;}
main.index > nav.essential > div.container > ul > li:hover > a {color:#2A2C7F;}
main.index > nav.essential > div.container > ul > li > a > i.icon {display:block; width:64px; height:64px; border:1px solid #dbdbdb; line-height:62px; text-align:center; font-style:normal; margin:22px auto 15px auto; border-radius:50%; box-sizing:border-box; background:#fafafa; font-size:2.29rem; color:#666; transition:.2s ease-in-out;}
main.index > nav.essential > div.container > ul > li:hover > a > i.icon {background:#2A2C7F; border-color:#2A2C7F; color:#fff;}

main.index > form[data-role=search] {margin-top:-346px; padding-top:385px; padding-bottom:1px; background-image:url(../images/bg_banner.png); background-size:auto; background-repeat:no-repeat; background-position:top center; background-color:#f2f8ff;}
main.index > form[data-role=search] > div.container > div.search_wrap {height:80px; margin-bottom:80px; padding:20px 0 20px 32px; border-radius:5px; background:#4c4863; box-sizing:border-box;}
main.index > form[data-role=search] > div.container > div.search_wrap > div {display:inline-block; width:calc(100% - 352px); vertical-align:top;}
main.index > form[data-role=search] > div.container > div.search_wrap > div > i.mi {display:inline-block; margin-right:24px; color:#fff; font-size:1.57rem; vertical-align:top; line-height:40px;}
main.index > form[data-role=search] > div.container > div.search_wrap > div > input[type=keyword] {width:calc(100% - 50px); border:0 none; background:transparent; font-size:1.5rem; color:#fff; line-height:40px;}
main.index > form[data-role=search] > div.container > div.search_wrap > div > input[type=keyword]::placeholder {color:rgba(255,255,255,.6);}
main.index > form[data-role=search] > div.container > div.search_wrap > div > input[type=keyword]:focus::placeholder {color:transparent;}
main.index > form[data-role=search] > div.container > div.search_wrap > button {width:100px; padding:7px 18px; border-radius:30px; line-height:24px; color:#fff; vertical-align:top; box-sizing:border-box; cursor:pointer;}
main.index > form[data-role=search] > div.container > div.search_wrap > button[type=button].detail {border:1px solid #fff; background:transparent; font-size:1.14rem;}
main.index > form[data-role=search] > div.container > div.search_wrap > button[type=submit] {margin-left:2px; border:0 none; background:#ffa741; font-weight:600; font-size:1.29rem;}
main.index > form[data-role=search] > div.container > div.search_wrap > button[type=submit] > i {font-style:normal;}
main.index > form[data-role=search] > div.container > div.search_wrap > span.icon_search {display:inline-block; width:139px; height:144px; margin-top:-40px; background-image:url(../images/ico_lion.png);}
main div[data-module=board] div[data-role=searchbar] > a {background:#2A2C7F}
main div[data-module=calendar] .fc-write-button {background:#2A2C7F}
main div[data-module=calendar] .fc-write-button:hover {background:#2A2C7F}

main.subpage > div.intro {background:#f3f4f8;}
main.subpage > div.intro > div.container {max-width:820px; height:120px; position:relative;}
main.subpage > div.intro > div.container > h2 {font-size:2.29rem; height:40px; line-height:40px; position:absolute; top:calc(50% - 20px); left:10px; color:#222;}
main.subpage > div.intro > div.container > div.breadcrumb {height:20px; position:absolute; top:calc(50% - 10px); right:10px; color:#666; font-size:0;}
main.subpage > div.intro > div.container > div.breadcrumb > i {display:inline-block; vertical-align:middle; height:20px; line-height:20px; font-size:1rem;}
main.subpage > div.intro > div.container > div.breadcrumb > span {display:inline-block; vertical-align:middle; height:20px; line-height:20px; margin-left:10px; font-size:1rem;}
main.subpage > div.intro > div.container > div.breadcrumb > span > a {color:#666; text-decoration:none;}
main.subpage > div.intro > div.container > div.breadcrumb > span > a:hover {color:#2A2C7F;}
main.subpage > div.intro > div.container > div.breadcrumb > i.fa {margin-left:10px; font-size:1rem;}
main.subpage > div.container {max-width:820px; min-height:350px; padding-top:20px;}

main.widepage > div.intro {background:#f3f4f8;}
main.widepage > div.intro > div.container {height:120px; position:relative;}
main.widepage > div.intro > div.container > h2 {font-size:2.29rem; height:40px; line-height:40px; position:absolute; top:calc(50% - 20px); left:10px; color:#222;}
main.widepage > div.intro > div.container > div.breadcrumb {height:20px; position:absolute; top:calc(50% - 10px); right:10px; color:#666; font-size:0;}
main.widepage > div.intro > div.container > div.breadcrumb > i {display:inline-block; vertical-align:middle; height:20px; line-height:20px; font-size:1rem;}
main.widepage > div.intro > div.container > div.breadcrumb > span {display:inline-block; vertical-align:middle; height:20px; line-height:20px; margin-left:10px; font-size:1rem;}
main.widepage > div.intro > div.container > div.breadcrumb > span > a {color:#666; text-decoration:none;}
main.widepage > div.intro > div.container > div.breadcrumb > span > a:hover {color:#2A2C7F;}
main.widepage > div.intro > div.container > div.breadcrumb > i.fa {margin-left:10px; font-size:1rem;}
main.widepage > div.container {min-height:350px; padding-top:20px;}

/* 메뉴 그룹사용시 네비게이션 추가 05-26 */
div.nbreadcrumb {height:60px; background:#2A2C7F; font-size:0; text-align:left;}
div.nbreadcrumb div.container a {display:inline-block; width: 240px;}
div.nbreadcrumb div.container a.home {width:60px; border-left:1px solid rgba(255,255,255,0.2);}
div.nbreadcrumb div.container a > span {display:block; height:60px; padding:0 20px; line-height:60px; border-right:1px solid rgba(255,255,255,0.2); font-size:1.07rem; color:#fff; text-align:center; }
div.nbreadcrumb div[data-role=input] {display:inline-block; width:240px; height:60px; margin:0; vertical-align:top;}
div.nbreadcrumb div[data-role=input] > span {display:block; height:60px; padding:0 20px; line-height:60px; border-right:1px solid rgba(255,255,255,0.2); font-size:1.07rem; color:#fff;}
div.nbreadcrumb div[data-role=input] > button {height:60px; border:0 none; border-right:1px solid rgba(255,255,255,0.2); background:none; font-size:1.07rem; color:#fff;}
div.nbreadcrumb div[data-role=input] > button > span {width:calc(100% - 40px); padding-left:20px;}
div.nbreadcrumb div[data-role=input] > button > i {width:40px;}
div.nbreadcrumb div[data-role=input][data-type=select] > ul {top:59px; font-size:1.07rem; border-color:#2A2C7F; z-index:4;}
div.nbreadcrumb div[data-role=input][data-type=select] > ul > li:focus {background:#2A2C7F;}
div.nbreadcrumb div[data-role=input][data-type=select].extend > button {border-color:rgba(255,255,255,0.2);}
/* 메뉴 그룹사용시 네비게이션 추가 끝 05-26 */

main.program > nav.category > div.container > ul {display:inline-block; vertical-align:top; width:calc(100% - 125px);}
main.program > nav.category > div.container > ul > li:first-child {padding-left:0;}
main.program > nav.category > div.container > ul > li:last-child {width:15px; padding:0;}
main.program > nav.category > div.container > ul > li > a {padding:0;}
main.program > nav.category > div.container > div.gradient {right:135px;}
main.program > nav.category > div.container > div.quick {display:inline-block; width:125px; height:20px; background:rgba(0,0,0,0.2); border-radius:3px; vertical-align:top; margin:12px 0px; padding:5px 0px; text-align:center; font-size:0;position: relative;z-index: 20;}
main.program > nav.category > div.container > div.quick > a {display:inline-block; font-size:0.86rem; height:20px; line-height:20px; color:rgba(255,255,255,0.8); text-decoration:none; margin:0px 8px;}
main.program > nav.category > div.container > div.quick > a:hover {color:#fff;}
main.program > nav.category > div.container > div.quick > a > i.selected {color:#ffeb00;}

main.program > nav.essential {background:#fafafa; border-bottom:1px solid #e8e8e8; height:152px; overflow:hidden;}
main.program > nav.essential > div.container > ul {margin-left:-10px; margin-right:-10px; width:calc(100% + 20px); height:172px; overflow-x:scroll; display:block; padding:0; text-align:center; white-space:nowrap;}
main.program > nav.essential > div.container > ul > li {display:inline-block; width:105px; height:120px; vertical-align:top; padding:10px;}
main.program > nav.essential > div.container > ul > li:first-child {width:10px;}
main.program > nav.essential > div.container > ul > li:last-child {width:10px;}
main.program > nav.essential > div.container > ul > li > a {display:block; text-decoration:none; color:#666; width:85px; height:auto; margin:0 auto; text-align:center; font-size:0.86rem;  border:0; line-height:1; transition:.2s ease-in-out;}
main.program > nav.essential > div.container > ul > li > a:hover {color:#2A2C7F;}
main.program > nav.essential > div.container > ul > li > a > i.icon {display:block; width:64px; height:64px; border:1px solid #dbdbdb; line-height:62px; text-align:center; font-style:normal; margin:22px auto 15px auto; border-radius:50%; box-sizing:border-box; background:#fff; font-size:2.29rem; color:#666; transition:.2s ease-in-out;}
main.program > nav.essential > div.container > ul > li > a > i.icon:hover {border-color:#2A2C7F; color:#2A2C7F;}
main.program > nav.essential > div.container > ul > li.selected > a {color:#2A2C7F; font-weight:bold;}
main.program > nav.essential > div.container > ul > li.selected > a > i.icon {border-color:#2A2C7F; background:#2A2C7F; color:#fff;}

main div[data-module=eco] div[data-role=toolbar] > a {background:#2A2C7F}
main div[data-module=eco] div[data-component=board] div[data-role=searchbar] > a {background:#2A2C7F}
main div[data-module=eco] div.input.search_area > button[type=button].detail {background-color:#2A2C7F;}
main div[data-module=eco] div[data-role=sortbar] > label > b {color:#2A2C7F;}
main div[data-module=eco] div[data-role=sortbar] > ul > li.selected > a > i {background:#2A2C7F;}
main div[data-module=eco] ul[data-role=displaybar] > li.selected > button {border-color:#2A2C7F; background:#2A2C7F;}
main div[data-module=eco] div.tagbox > a.search_tag {background:#2A2C7F;}
main div[data-module=eco][data-context=program] ul[data-role=list][data-display=list] div[data-module=eco][data-role=item] > a > div.bottom > label > b {color:#2A2C7F;}

main.essential > nav.category > div.container > ul {text-align:left; display:inline-block; vertical-align:top; width:calc(100% - 125px);}
main.essential > nav.category > div.container > ul > li:first-child {padding-left:0;}
main.essential > nav.category > div.container > ul > li:last-child {width:15px; padding:0;}
main.essential > nav.category > div.container > ul > li > a {padding:0; font-size:1rem;}
main.essential > nav.category > div.container > div.gradient {right:135px;}
main.essential > nav.category > div.container > div.quick {display:inline-block; width:125px; height:20px; background:rgba(0,0,0,0.2); border-radius:3px; vertical-align:top; margin:12px 0px; padding:5px 0px; text-align:center; font-size:0;}
main.essential > nav.category > div.container > div.quick > a {display:inline-block; font-size:0.86rem; height:20px; line-height:20px; color:rgba(255,255,255,0.8); text-decoration:none; margin:0px 8px;}
main.essential > nav.category > div.container > div.quick > a:hover {color:#fff;}

/* 2023.1.19 하위핵심역량 노출 옵션 스타일 추가 */
main.index > nav.essential.child,
main.essential > nav.essential {background:#fafafa; border-bottom:1px solid #e8e8e8; height:152px; padding:15px 0 0; overflow:hidden;}
main.index > nav.essential.child > div.container > ul,
main.essential > nav.essential > div.container > ul {margin-left:-10px; margin-right:-10px; width:calc(100% + 20px); height:152px; overflow-x:scroll; display:block; padding:0; text-align:center; white-space:nowrap; overflow-x:auto}
main.index > nav.essential.child > div.container > ul > li,
main.essential > nav.essential > div.container > ul > li {display:inline-block; width:105px; height:140px; vertical-align:top; padding:21px 10px;}
main.index > nav.essential.child > div.container > ul > li.parent,
main.essential > nav.essential > div.container > ul > li.parent {position:relative; width:auto; padding:0 25px}
main.index > nav.essential.child > div.container > ul > li:first-child,
main.essential > nav.essential > div.container > ul > li:first-child {width:10px;}
main.index > nav.essential.child > div.container > ul > li:last-child,
main.essential > nav.essential > div.container > ul > li:last-child {width:10px;}
main.index > nav.essential.child > div.container > ul > li > a,
main.essential > nav.essential > div.container > ul > li > a {display:block; text-decoration:none; color:#666; width:85px; height:auto; margin:0 auto; text-align:center; font-size:0.86rem;  border:0; line-height:1; transition:.2s ease-in-out;}
main.index > nav.essential.child > div.container > ul > li.parent > a,
main.essential > nav.essential > div.container > ul > li.parent > a {position:absolute; top:7px; left:50%; transform:translateX(-50%); width:auto; padding:0 3px 3px; font-size:1rem; text-align:center; }
main.index > nav.essential.child > div.container > ul > li.parent > a:not(.all),
main.essential > nav.essential > div.container > ul > li.parent > a:not(.all) {color:#2A2C7F; font-weight:bold; transition:border 0s}
main.index > nav.essential.child > div.container > ul > li > a:hover,
main.essential > nav.essential > div.container > ul > li > a:hover {color:#2A2C7F;}
main.index > nav.essential.child > div.container > ul > li > a > i.icon,
main.essential > nav.essential > div.container > ul > li > a > i.icon {display:block; width:64px; height:64px; border:1px solid #dbdbdb; line-height:62px; text-align:center; font-style:normal; margin:22px auto 15px auto; border-radius:50%; box-sizing:border-box; background:#fff; font-size:2.29rem; color:#666; transition:.2s ease-in-out;}
main.index > nav.essential.child > div.container > ul > li > a > i.icon:hover,
main.essential > nav.essential > div.container > ul > li > a > i.icon:hover {border-color:#2A2C7F; color:#2A2C7F;}
main.index > nav.essential.child > div.container > ul > li > ul,
main.essential > nav.essential > div.container > ul > li > ul {margin-left:-10px; margin-right:-10px; width:calc(100% + 20px); height:172px; overflow-x:scroll; display:block; padding:0; text-align:center; white-space:nowrap; }
main.index > nav.essential.child > div.container > ul > li > ul > li,
main.essential > nav.essential > div.container > ul > li > ul > li {display:inline-block; width:84px; height:auto; vertical-align:top; padding:10px 0px; margin-top:22px; font-size:0.86rem; }
main.index > nav.essential.child > div.container > ul > li > ul > li > a,
main.essential > nav.essential > div.container > ul > li > ul > li > a {display:block; text-decoration:none; color:#666; margin:0 auto; text-align:center; font-size:0.86rem; border:0; line-height:1; transition:.2s ease-in-out; padding:10px 5px}
main.index > nav.essential.child > div.container > ul > li > ul > li > a > p,
main.essential > nav.essential > div.container > ul > li > ul > li > a > p {overflow:hidden; text-overflow:ellipsis;}
main.index > nav.essential.child > div.container > ul > li > ul > li:not(.all) > a:hover,
main.essential > nav.essential > div.container > ul > li > ul > li:not(.all) > a:hover {color:#2A2C7F;}
main.index > nav.essential.child > div.container > ul > li > ul > li > a > i.icon,
main.essential > nav.essential > div.container > ul > li > ul > li > a > i.icon {display:block; width:64px; height:64px; border:1px solid #dbdbdb; line-height:62px; text-align:center; font-style:normal; margin:0px auto 15px auto; border-radius:50%; box-sizing:border-box; background:#fff; font-size:2.29rem; color:#666; transition:.2s ease-in-out;}
main.index > nav.essential.child > div.container > ul > li > ul > li > a:hover > i.icon,
main.essential > nav.essential > div.container > ul > li > ul > li > a:hover > i.icon {border-color:#2A2C7F; color:#2A2C7F;}
main.index > nav.essential.child > div.container > ul > li:not(.all) > a:hover,
main.essential > nav.essential > div.container > ul > li:not(.all) > a:hover {border-bottom:1px solid #2A2C7F; }
main.index > nav.essential.child > div.container > ul > li.selected:not(.all) > a,
main.essential > nav.essential > div.container > ul > li.selected:not(.all) > a {border-bottom:2px solid #2A2C7F;}
main.index > nav.essential.child > div.container > ul > li.selected > a > i.icon,
main.essential > nav.essential > div.container > ul > li.selected > a > i.icon {border-color:#2A2C7F; background:#2A2C7F; color:#fff;}
main.index > nav.essential.child > div.container > ul > li > ul > li.selected > a,
main.essential > nav.essential > div.container > ul > li > ul > li.selected > a {color:#2A2C7F; font-weight:bold;}
main.index > nav.essential.child > div.container > ul > li > ul > li.selected > a > i.icon,
main.essential > nav.essential > div.container > ul > li > ul > li.selected > a > i.icon {border-color:#2A2C7F; background:#2A2C7F; color:#fff;}

div.daejabo{width:1100px; margin:0 auto;}
div.daejabo > div[data-module=board] div[data-role=toolbar] > div.view-style{display:none}
div.daejabo > div[data-module=board] div.list{border-top:none}
div.daejabo > div[data-module=board] div[data-role=toolbar] > a{background:#2A2C7F; border-radius:3px}

footer {margin-top:20px; border-top:1px solid #dbdbdb;}
footer > nav {border-top:1px solid #dbdbdb; border-bottom:1px solid #dbdbdb; background:#f7f6f6; padding:40px 0px;}
footer > nav > div.container > ul {display:table; width:100%; table-layout:fixed;}
footer > nav > div.container > ul > li {display:table-cell; width:100%; vertical-align:top; border-left:1px solid #e6e6e6; padding-left:20px; font-size:0;}
footer > nav > div.container > ul.normal > li{padding-left:40px;}
footer > nav > div.container > ul > li:first-child {border-left:0; padding-left:0;}
footer > nav > div.container > ul > li > b {display:inline-block; vertical-align:top; max-width:100%; font-size:1rem; line-height:26px;}
footer > nav > div.container > ul > li > ul{list-style:none; }
footer > nav > div.container > ul > li > ul.normal {display:inline-block; width:calc(100% - 140px);}
footer > nav > div.container > ul > li > ul > li {display:block; height:26px;}
footer > nav > div.container > ul > li > ul > li > a {display:block; height:26px; line-height:26px; font-size:0.86rem; color:#666; text-decoration:none; white-space:nowrap; text-overflow:ellipsis; overflow:hidden;}
footer > nav > div.container > ul > li > ul > li > a > i {width:2px; height:2px; background:#666; display:block; float:left; margin:12px 10px 12px 0px;}

footer > div.copyright {padding:40px 0px;}
footer > div.copyright > div.container > ul {list-style:none; font-size:0; display:inline-block; width:calc(100% - 240px); height:14px;}
footer > div.copyright > div.container > ul > li {display:inline-block; border-left:1px solid #dbdbdb; padding:0px 5px; vertical-align:middle;}
footer > div.copyright > div.container > ul > li > a {height:14px; padding:0px 5px; text-decoration:none; color:#666; font-size:0.86rem;}
footer > div.copyright > div.container > ul > li:first-child {padding-left:0; border-left:0;}
footer > div.copyright > div.container > ul > li:first-child > a {padding-left:0;}
footer > div.copyright > div.container > ul > li.copyright {border:0; padding:15px 0px; line-height:1.6; display:block; color:#999; font-size:0.86rem;}

div[data-role=intabbar] > ul > li.selected > a {background:#005596;}

div[data-module=eco] div.tag > button {border:1px solid #2A2C7F; color:#2A2C7F}
div[data-module=eco] div.tag > button:hover {background:#2A2C7F; color:#fff;}
div[data-module=eco] div.tag > button.selected {background:#2A2C7F; color:#fff;}
div[data-module=eco] div[data-role=searchbox] > ul > li > div.tags > div > div.box > button:hover {color:#2A2C7F}

/**
* 카드형스타일 전용
*/
div[data-role=wrapper] div.popup_banner {background:#fff3dc; overflow:hidden;}
div[data-role=wrapper] div.popup_banner > div.container {width:100%; height:120px;}
div[data-role=wrapper] div.popup_banner > div.container > a {display:block; margin-bottom:-4px; text-align:center; background:#fff3dc; overflow:hidden;}
div[data-role=wrapper] div.popup_banner > div.container > a > img {display:inline-block;}
header.cardType {position:relative; border-top:1px solid #ddd;}
header.cardType:after {content:''; display:block; position:absolute; left:0; top:46px; width:100%; border-bottom:1px solid #ddd;}
header.cardType > div.container > ul.submain {height:26px;}
header.cardType > div.container > div.popup_button {display:block; float:left; width:110px; height:46px;}
header.cardType > div.container > div.popup_button:after {content:''; display:inline-block; clear:both;}
header.cardType > div.container > div.popup_button > div.container > a.popup {display:inline-block; width:100px; height:46px; padding:0 12px; background-color:#70798f; box-sizing:border-box; color:#fff; font-size:1.07rem; vertical-align:middle; line-height:45px; text-decoration:none;}
header.cardType > div.container > div.popup_button > div.container > a.popup > i {font-size:1rem; margin-left:6px;}
header.cardType > div.container > div.popup_button > input[type=checkbox] {display:inline-block; margin-left:10px; vertical-align:middle;}
header.cardType > div.container > div.popup_button > label[for=popup_check] {display:inline-block; color:#fff; vertical-align:middle; cursor:pointer;}
header.cardType > div.container > ul {padding-bottom:10px;}
header.cardType > div.container > ul > li > a {font-size:1rem; color:#666; line-height:26px;}
header.cardType > div.container > ul > li.login div[data-widget=coursemos-loginbar] > button {margin-top:-4px; border:1px solid #ddd; font-size:1rem; color:#999;}
header.cardType > div.container > ul > li.login div[data-widget=coursemos-loginbar] > ul > li.name{font-size:1rem; line-height:22px; vertical-align:middle;}
header.cardType > div.container > ul > li.login div[data-widget=coursemos-loginbar] > ul > li {margin-top:-1px;}
header.cardType > div.container > h1 {width:142px; height:48px; padding-top:12px; clear:both; box-sizing:border-box;}
header.cardType > div.container > h1 > a {height:inherit; background-size:100%; background-position:center;}
header.cardType > div.container > nav {width:calc(100% - 152px); height:69px;}
header.cardType > div.container > nav > ul > li > a {height:inherit; line-height:2.5; font-size:1.21rem;}
header.cardType + main div[data-module=eco] div[data-role=sortbar] > ul > li.selected_top > button > i {background:#2A2C7F;}
header.cardType + main div[data-module=eco] div.tagbox {background:#fff;}
header.cardType + main div[data-module=eco] div.tagbox > ul.tags > li > i.xi-close {margin-left:5px; color:#ccc; vertical-align:middle; cursor:pointer;}

footer.cardType > nav {padding:40px 0 60px; background:#393939; border-bottom:0 none;}
footer.cardType > nav > div.container > ul {display:block; position:relative; font-size:0;}
footer.cardType > nav > div.container > ul > li {display:inline-block; width:33.33%; padding-left:15px; margin:10px 0; box-sizing:border-box; border-left:1px solid rgba(255,255,255,.2);}
footer.cardType > nav > div.container > ul > li:nth-child(1),
footer.cardType > nav > div.container > ul > li:nth-child(4),
footer.cardType > nav > div.container > ul > li:nth-child(7) {border-left:0 none;}

footer.cardType > nav > div.container > ul > li > b {width:100%; margin-top:5px; color:#fff; font-size:1rem; word-break:keep-all;}
footer.cardType > nav > div.container > ul > li > ul {display:inline-block; width:calc(100% - 99px); margin-top:10px; vertical-align:middle;}
footer.cardType > nav > div.container > ul > li > ul > li {display:inline-block; position:relative; width:50%; height:26px; padding-left:12px; margin-bottom:5px; box-sizing:border-box; vertical-align:top;}
footer.cardType > nav > div.container > ul > li > ul > li:before {content:''; position:absolute; left:0; top:5px; display:inline-block; width:2px; height:2px; background:rgba(255,255,255,.2);}
footer.cardType > nav > div.container > ul > li > ul > li > a {display:block; height:auto; color:rgba(255,255,255,.6); font-size:0.93rem; line-height:15px; white-space:normal; overflow:inherit; letter-spacing:-1px; word-break:keep-all;}
footer.cardType > nav > div.container > ul > li > ul > li > a > i {display:none;}
footer.cardType > div.copyright {background:#262626;}

div.done_programs h4.done_title {margin:24px 0; font-size:1.43rem; line-height:24px;}
div.done_programs div.done {width:100%; height:120px; margin-bottom:-21px; border-bottom:1px solid #dbdbdb; overflow:hidden;}
div.done_programs div.done > div.list_wrap {position:relative; width:100%; min-height:120px;}
div.done_programs div.done > div.list_wrap button.slick-arrow {width:40px; height:40px; border:1px solid #ccc; border-radius:50%; background:#fff; box-shadow:1px 1px 2px rgba(0,0,0,.2); cursor:pointer;}
div.done_programs div.done > div.list_wrap button.slick-prev.slick-arrow {position:absolute; top:45px; left:10px; font-size:0; z-index:1;}
div.done_programs div.done > div.list_wrap button.slick-prev.slick-arrow:before {font-family:FontAwesome; content:"\f104"; font-size:1rem;}
div.done_programs div.done > div.list_wrap button.slick-next.slick-arrow {position:absolute; top:45px; right:10px; font-size:0; z-index:1;}
div.done_programs div.done > div.list_wrap button.slick-next.slick-arrow:before {font-family:FontAwesome; content:"\f105"; font-size:1.29rem; line-height:6px;}
div.done_programs div.done > div.list_wrap div.box.slick-slide {max-width:160px; min-width:140px; min-height:120px; position:relative; background-image:url(../images/noimg.png?); background-size:cover; background-position:center; cursor:pointer;}
div.done_programs div.done > div.list_wrap div.box.slick-slide a {display:block; position:absolute; width:100%; height:100%; z-index:10;}
div.done_programs div.done > div.list_wrap div.box.slick-slide:before {content:''; display:block; position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.2); z-index:10;}
div.done_programs div.done > div.list_wrap div.box.slick-slide:hover::before {display:none;}
div.done_programs div.done > div.list_wrap div.box:after {content:''; display:block; clear:both;}

main.card_subpage {padding-top:60px;}
main.card_subpage > nav > nav {display:none;}
main.card_subpage > nav > div.intro {display:none;}
main.card_subpage > nav > div.container {max-width:1100px;}

@media (max-width:1483px) {
	main.index > form[data-role=search] {background-size:inherit;}
}
@media (max-width:1445px) {
	div[data-role=wrapper] div.popup_banner > div.container {height:auto;}
	div[data-role=wrapper] div.popup_banner > div.container > a {height:auto;}
	div[data-role=wrapper] div.popup_banner > div.container > a > img {max-width:100%;}
}
@media (max-width:1199px) {
	header.cardType > div.container > nav > ul.main > li > a.selected:before {bottom:0;}

	main.index > nav.essential.child {height:160px !important}
	main.index > nav.essential.child {padding:10px 0 0;}
	main.index > nav.essential.child > div.container > ul {padding-bottom:10px;}
	main.index > nav.essential.child > div.container > ul > li.all {padding:21px 10px !important}
	main.index > nav.essential.child > div.container > ul > li.parent {padding:0px 25px !important}

	/* 헤더 그룹사용시 스타일 */
	div[data-role=wrapper] header div[data-role=group_header].sitemap div.wrap > ul.list > li h4 {font-size:1.29rem;}

}
@media (max-width:1057px) {
	footer.cardType > div.copyright > div.container > div.f_logo {display:block; width:100%; height:auto;}
	footer.cardType > div.copyright > div.container > ul {display:block; width:100%; height:auto;}
	footer.cardType > div.copyright > div.container > div.call {display:block; width:100%; padding-bottom:20px;}
}

@media (max-width:991px) {
	main.index > nav.essential.child {height:160px !important}
	main.index > nav.essential.child > div.container > ul {height:160px; box-sizing:border-box;}
	main.index > nav.essential.child > div.container > ul > li.all {padding:13px 10px !important}
	main.index > nav.essential.child > div.container > ul > li.parent {padding:0px 25px !important}
	main.index > nav.essential.child > div.container > ul > li > ul > li {margin-top:15px;}
}

@media (max-width:780px) {
	main.index > form[data-role=search] {background-size:cover;}
}
@media (max-width:767px) {
	header {border-bottom:1px solid #e5e5e5; position:fixed; box-shadow:0px 1px 3px rgba(0,0,0,0.2);}
	header.banner > div.container > h1{width:210px}
	header > div.container > nav {display:none;}
	header > div.container > button[data-role=sidebar] {display:block; width:50px; height:60px;}
	header > div.container > button[data-role=sidebar] > i.mi.mi-bars {line-height:70px;}
	div[data-role=wrapper] div.popup_banner {display:none;}
	header.cardType > div.container > div.popup_button {display:none;}
	header.cardType > div.container > ul {width:100%; padding-bottom:0;}
	header.cardType > div.container > h1 {margin-top:0;}
	header.cardType > div.container > div.popup_button > div.container > a.popup {display:none;}
	header.cardType:after {bottom:58px;}

	header.cardType + main.index > nav.essential > div.container > ul > li {width:105px;}

	main > nav {display:none;}
	main > nav + div.container {margin-top:20px;}

	main {padding-top:101px;}
	main.index {padding-top:70px;}
	main.index > form[data-role=search] {margin-top:-444px; padding-top:462px;}

	header.cardType + main {padding-top:20px;}

	footer > div.notice {border-bottom:1px solid #dbdbdb; background:#f7f6f6;}
	footer > nav {display:none;}

	footer > div.copyright {text-align:center;}
	footer > div.copyright > div.container > ul {width:100%; display:block; height:auto;}
	header > form[data-role=search] {top:101px}
}

@media (max-width:658px){
	main.index > form[data-role=search] > div.container > div.search_wrap {height:120px; margin-bottom:50px;}
	main.index > form[data-role=search] > div.container > div.search_wrap > div > i.mi {margin-right:5px;}
	main.index > form[data-role=search] > div.container > div.search_wrap > div {display:block; width:100%; margin-bottom:5px;}
	main.index > form[data-role=search] > div.container > div.search_wrap > div > input[type=keyword] {font-size:1.07rem;}
	main.index > form[data-role=search] > div.container > div.search_wrap > button {padding:5px 18px;}
	main.index > form[data-role=search] > div.container > div.search_wrap > button[type=button].detail {font-size:1rem;}
	main.index > form[data-role=search] > div.container > div.search_wrap > button[type=submit] {font-size:1rem;}
	main.index > form[data-role=search] > div.container > div.search_wrap > span.icon_search {display:inline-block; width:calc(100% - 210px); height:144px; margin-top:-50px; background-image:url(../images/ico_lion.png); background-repeat:no-repeat; background-position:right center;}
}
@media (max-width:581px){
	main.widepage > div.intro > div.container {height:100px;}
	main.widepage > div.intro > div.container > h2 {top:calc(50% - 28px);}
	main.widepage > div.intro > div.container > div.breadcrumb {top:calc(50% + 16px); left:10px; right:auto;}
}
@media (max-width:500px){
	header > div.container > h1 {height:70px}
	header > div.container > ul.submain{display:none}
	header > div.container > button[data-role=sidebar] {margin:5px 0;}
	header > div.container > button[data-role=sidebar] > label{display:block}
	header.cardType:after {display:none;}
	header > form[data-role=search] {top:71px}
	main {padding-top:71px;}
}
@media (max-width:440px){
	main.index > form[data-role=search] > div.container > div.search_wrap > span.icon_search {background-size:contain;}
}
@media (max-width:400px){
	header.cardType > div.container > h1 {margin-top:0;}
	main.subpage > div.intro > div.container {height:60px; padding-top:30px; padding-bottom:30px;}
	main.subpage > div.intro > div.container > h2 {position:static; font-size:1.86rem; text-align:center;}
	main.subpage > div.intro > div.container > div.breadcrumb {position:static; text-align:center;}
}
@media (min-width:768px) and (max-width:991px) {
	header > div.container > nav {display:none;}
	header > form[data-role=search] {top:101px}
	header > div.container > button[data-role=sidebar] {display:block;}
	header.cardType:after {bottom:58px;}
	header.cardType > div.container > h1 {margin-top:0; padding-top:7px;}
	main > nav.essential {height:142px !important;}
	main > nav.essential > div.container > ul > li {height:110px !important; vertical-align:top; padding:5px !important;}
	main > nav.essential > div.container > ul > li:first-child {width:10px;}
	main > nav.essential > div.container > ul > li:last-child {width:10px;}
	main.essential > nav.essential > div.container > ul > li{height:140px !important;}
	main.essential > nav.essential > div.container > ul > li > ul > li > a > i.icon{margin:13px auto;}
	main.essential > nav.essential > div.container > ul > li.all > a > i.icon{margin-top:33px}
	main.essential > nav.essential{height:160px !important; padding-top:0;}
	main.essential > nav.essential > div.container > ul{height:160px;}
	main.essential > nav.essential > div.container > ul > li{padding:10px 0 0 !important;  margin-top:0px;}
	main.essential > nav.essential > div.container > ul > li.parent{padding:0 20px !important;}
	main.essential > nav.essential > div.container > ul > li.parent > a{top:13px;}
	main.essential > nav.essential > div.container > ul > li > ul > li{margin-top:10px}
	main > nav + div.container {margin-top:20px;}
	main > nav > div.container > ul > li {padding:0 7px;}

	main.index {padding-top:60px;}

	footer > nav > div.container > ul > li > b {display:block; width:100%; margin-bottom:10px;}
	footer > nav > div.container > ul > li > ul {display:block; width:100%;}
	footer > nav > div.container > ul > li > ul > li {padding-left:5px;}
	footer.cardType > nav > div.container > ul:before {display:none;}
	footer.cardType > nav > div.container > ul:after {left:50%;}
	footer.cardType > nav > div.container > ul > li {width:50%;}
}

@media (min-width:768px) and (max-width:875px) {
	header.cardType:after {bottom:}
	div.daejabo > div[data-module=board] div[data-role=toolbar] > a{margin-top:5px}
}

@media (min-width:992px) and (max-width:1189px) {
	header > div.container > nav > ul > li {padding:0px 5px;}
	header > div.container > nav > ul.main > li > a {padding:15px 5px; font-size:1.14rem;}
	header > div.container > ul.submain > li {font-size:0.93rem;}
	header > div.container > ul.submain > li.login li.name {font-size:0.93rem; max-width:70px;}

	main > nav.essential > div.container > ul > li {padding:5px !important;}

	main.essential > nav.essential > div.container > ul > li{padding:20px 0px 0 !important; }
	main.essential > nav.essential > div.container > ul > li.parent{padding:0 20px !important;}


}

@media screen and (max-width:1189px) {
	div.daejabo{width:100%; padding:0 10px; box-sizing:border-box}
	div[data-role=wrapper] div.popup_banner > a > img {width:100%;}
}
@media screen and (max-width:1399px) {
	div[data-role=wrapper] div.popup_banner > a > img {width:100%;}
}

@media screen and (min-width:991px) {
	footer.cardType > nav > div.container > ul > li:nth-child(1),
	footer.cardType > nav > div.container > ul > li:nth-child(2),
	footer.cardType > nav > div.container > ul > li:nth-child(3) {padding-top:0; padding-bottom:20px;}
	footer.cardType > nav > div.container > ul > li:nth-child(3n-2) {padding-left:0;}
}