/**
 * 이 파일은 비교과모듈의 일부입니다. (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 2020. 9. 9.
 */

div[data-view=list] nav.essential {background:#fff; height:152px; overflow:hidden;}
div[data-view=list] nav.essential 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;}
div[data-view=list] nav.essential ul > li {display:inline-block; width:100px; height:120px; vertical-align:top; padding:10px;}
div[data-view=list] nav.essential ul > li:first-child {padding:0; width:10px;}
div[data-view=list] nav.essential ul > li:last-child {width:10px;}
div[data-view=list] nav.essential 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;}
div[data-view=list] nav.essential ul > li:hover > a {color:#2A2C7F;}
div[data-view=list] nav.essential 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;}
div[data-view=list] nav.essential ul > li:hover > a > i.icon {background:#2A2C7F; border-color:#2A2C7F; color:#fff;}

/* 하위역량 노출시 */
div[data-view=list] nav.essential > div.container:has(li.parent) {box-sizing: border-box;}
div[data-view=list] nav.essential ul:has(li.parent) {flex-wrap: wrap; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; height: auto; overflow: unset;}
div[data-view=list] nav.essential ul:has(li.parent) > li {margin-top: 13px;}
div[data-view=list] nav.essential ul:has(li.parent) > li.parent {flex-direction: column; margin-top: 0; width:auto; width: auto; height: auto; display: flex;}
div[data-view=list] nav.essential ul > li.parent > ul {display: flex; align-items: center; overflow: unset;}
div[data-view=list] nav.essential ul > li.parent > ul > li:last-child {width: auto;}
div[data-view=list] nav.essential ul > li.parent > ul > li > p {line-height: normal;}
div[data-view=list] nav.essential ul > li.parent > ul > li:first-child {width: auto;}
div[data-view=list] nav.essential:has(li.parent) {padding-bottom: 0; height: auto; overflow: unset;}

div[data-module=eco] div[data-role=sortbar] > ul > li.selected > a > i {background:#2A2C7F;}
div[data-module=eco] ul[data-role=displaybar] > li.selected > button {border-color:#2A2C7F; background:#2A2C7F;}
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-module=eco] div[data-role=searchbox] > ul > li > div.tags > div > div.box > button.on {border:1px solid #2A2C7F; color:#2A2C7F;}