/**
 * 이 파일은 비교과모듈의 일부입니다. (http://www.coursemos.kr)
 *
 * 비교과 프로그램 리스트 공통 프로그램박스 박스형 디자인 템플릿 스타일시트
 *
 * @file /modules/eco/styles/program.box.css.php
 * @author Arzz (arzz@arzz.com)
 * @license MIT License
 * @version 3.4.0
 * @modified 2019. 1. 28.
 */

 div[data-module=eco][data-role=item] > a > label > span{ display: none; }
 div[data-module=eco][data-role=item] > a > label > span{ display: none; }
 
 div[data-module=eco][data-context=program] ul[data-role=list]:not([data-display=list]) div[data-module=eco][data-role=item] > a:hover > label > span { display: inline-block; }

div[data-module=eco][data-role=item] {width:100%; position:relative; z-index:0;}
div[data-module=eco][data-role=item].empty > div {border:1px solid #e6e6e6; background:#f4f4f4; color:#999; text-align:center; font-size:0.86rem; box-sizing:border-box; width:100%;}
div[data-module=eco][data-role=item].empty > div > div.cover {width:100%; padding-bottom:60%; height:0; background-image:url(../images/noimage.png); background-size:cover; background-position:absolute; position:relative; box-shadow:0px 1px 3px rgba(0,0,0,0.1);}
div[data-module=eco][data-role=item].empty > div > div.text {width:100%; height:222px; line-height:222px;}
div[data-module=eco][data-role=item] > a {display:block; position:relative; width:100%; font-size:0; text-decoration:none; color:#222; box-sizing:border-box; border:1px solid #e6e6e6;}
div[data-module=eco][data-role=item] > a > span.addition_score {position:absolute; top:0; left:58px; display:block; padding:8.5px 4px; min-width:57px; width:auto; background:#b3b3b3; line-height:20px; text-align:center; color:#fff; font-size:0.93rem; z-index:1;}
div[data-module=eco][data-role=item] > a > span.not_certified {position:absolute; right:2px; top:2px; display:none; width:48px; height:58px; background-size:contain; z-index:1;}
div[data-module=eco][data-role=item] > a > span.certified {position:absolute; right:2px; top:2px; display:block; width:48px; height:58px; background:url(../images/certify.png) no-repeat; background-size:contain; z-index:1;}
div[data-module=eco][data-role=item] > a > span.certified i.excellent{display:inline-block; width:100%; padding:7px 9px 0 11px; line-height:15px; text-align:center; color:#554025; font-size:0.86rem; font-style:normal; font-weight:bold; box-sizing:border-box;}
div[data-module=eco][data-role=item] > a > label {display:table; width:59px; height:57px; background:#2f88d5; position:absolute; top:0px; left:0px; text-align:center; color:#fff; z-index:10; font-size:0.86rem; text-align:center; line-height:20px; padding:7px 0px; box-sizing:border-box; transition:0.5s;}
div[data-module=eco][data-context=program] ul[data-role=list]:not([data-display=list]) div[data-module=eco][data-role=item] > a:hover > label {width:100%; transition:0.2s ease-in-out;}
div[data-module=eco][data-role=item] > a > label span.score {position: absolute; display: inline-block; max-width: 0; opacity: 0; font-size:0.86rem; white-space: nowrap;}
div[data-module=eco][data-context=program] ul[data-role=list]:not([data-display=list]) div[data-module=eco][data-role=item] > a:hover > label span.score {position: static; max-width:100%; margin-right: 5px; padding: 0px 5px; opacity: 1; transition: 0.3s linear;}

div[data-module=eco][data-role=item] > a > label > b {display:table-row; vertical-align:middle; font-size:0.93rem;}
div[data-module=eco][data-role=item] > a > label > b.lh_38 {line-height:39px;}
div[data-module=eco][data-context=program] ul[data-role=list]:not([data-display=list]) div[data-module=eco][data-role=item] > a:hover > label > b[data-type=lh_1] {line-height:20px;}
div[data-module=eco][data-role=item] > a > label > span {font-size:0.93rem;}

div[data-module=eco][data-role=item] > a > label > span.mileage_txt {display:inline-block; max-width:0; opacity:0; visibility 0s 0.3s; white-space: nowrap;}
div[data-module=eco][data-context=program] ul[data-role=list]:not([data-display=list]) div[data-module=eco][data-role=item] > a:hover > label > span.mileage_txt {opacity:1; max-width:100px; margin-right:6px; transition:1s ease;}
div[data-module=eco][data-role=item] > a > label > i.point {border:1px solid rgba(255,255,255,0.6); width:16px; height:16px; line-height:16px; display:inline-block; margin:0px 3px 0px 3px; vertical-align:middle; font-style:normal; border-radius:50%; font-size:0.79rem;}
div[data-module=eco][data-role=item] > a > label > span.great {position:absolute; display:inline-block; max-width:0; opacity:0; font-size:0.86rem; white-space: nowrap;}
div[data-module=eco][data-context=program] ul[data-role=list]:not([data-display=list]) div[data-module=eco][data-role=item] > a:hover > label > span.great {position:static; max-width:100px; margin-right:5px; padding:0px 5px; opacity:1; transition:0.4s linear; border-radius:5px; background:#FFC107;}

div[data-module=eco][data-role=item] > a > label.SCHEDULED {background:#FFC107;}
div[data-module=eco][data-role=item] > a > label.OPEN {background:#4CAF50;}
div[data-module=eco][data-role=item] > a > label.APPROACH_CLOSING {background:#2196F3;}
div[data-module=eco][data-role=item] > a > label.APPROACHING {background:#9C27B0;}
div[data-module=eco][data-role=item] > a > label.CLOSED {background:#9E9E9E;}

div[data-module=eco][data-role=item] > a > div.cover {width:100%; padding-bottom:60%; height:0; background-image:url(../images/noimage.png); background-size:100%; background-position:absolute; position:relative; box-shadow:0px 1px 3px rgba(0,0,0,0.1);background-repeat: no-repeat;background-size: cover;}
div[data-module=eco][data-role=item] > a > div.content {padding:12px 15px;}
div[data-module=eco][data-role=item] > a > div.content > div.hit {margin-bottom:10px; text-align:right;}
div[data-module=eco][data-role=item] > a > div.content > div.hit > span.hit {box-sizing:border-box; display:inline-block; padding:0px 5px; margin-top:5px; height:22px; line-height:22px; border:1px solid #ccc; color:#666; font-size:0.86rem; text-align:center; vertical-align: middle;}
div[data-module=eco][data-role=item] > a > div.content > div.department {color:#2A2C7F; font-size:1rem; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; height:24px; line-height:24px; font-weight:bold;}
div[data-module=eco][data-role=item] > a > div.content > div.department span.department {margin-left:5px;}
div[data-module=eco][data-role=item] > a > div.content > div.department > div.info_signin {display:none;}
div[data-module=eco][data-role=item] > a > div.content > div.department > small {display:none;}
div[data-module=eco][data-role=item] > a > div.content > div.department > i.fa-star {float:right; margin-left:10px; color:#999; font-size:1.14rem;}
div[data-module=eco][data-role=item] > a > div.content > div.department > i.fa-star.selected {color:#ffc240;}
div[data-module=eco][data-role=item] > a > div.content > div.title_wrap > b {display:block; display:-webkit-box; font-size:1.14rem; line-height:24px; width:100%; height:48px; overflow:hidden; text-overflow:ellipsis; -webkit-line-clamp:2; -webkit-box-orient:vertical; word-wrap:break-word; margin:5px 0px 0px 0px;}
div[data-module=eco][data-role=item] > a > div.content > small {display:block; font-size:0.86rem; color:#666; width:100%; height:24px; line-height:24px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2;  -webkit-box-orient: vertical;}
div[data-module=eco][data-role=item] > a > div.content > small.topic  { margin-top:5px; margin-bottom:5px; height:30px; line-height:14px; white-space:normal;}
div[data-module=eco][data-role=item] > a > div.content > small.showing_topic > i {display:inline-block; vertical-align:top;}
div[data-module=eco][data-role=item] > a > div.content > small.showing_topic > span {display:inline-block; width:calc(100% - 15px);}
div[data-module=eco][data-role=item] > a > div.content > small > b {font-weight:500;}
div[data-module=eco][data-role=item] > a > div.content > div.expected_score {margin-bottom:15px; display:flex; align-items:center; width:100%;}
div[data-module=eco][data-role=item] > a > div.content > div.expected_score > p {margin-right:5px; font-size:0.93rem; color:#666;}
div[data-module=eco][data-role=item] > a > div.content > div.expected_score > ul {display:flex; align-items:center;}
div[data-module=eco][data-role=item] > a > div.content > div.expected_score > ul > li {margin-right:3px;}
div[data-module=eco][data-role=item] > a > div.content > div.expected_score > ul > li:last-child {margin-right:0px;}
div[data-module=eco][data-role=item] > a > div.content > div.expected_score > ul > li > i {color:red; font-size:0.71rem ;}
div[data-module=eco][data-role=item] > a > div.content > div.expected_score > ul > li > i.mi-heart-empty {color:#666;}
div[data-module=eco][data-role=item] > a > div.content > div.expected_score > ul > li.count span {font-size:0.71rem ; color:#666;}

div[data-module=eco][data-role=item] > a > div.content > small.essential_icons {padding:1px 0; font-size:0;}
div[data-module=eco][data-role=item] > a > div.content > small.essential_icons > span {display:inline-block; width:22px; height:22px; margin-right:5px; vertical-align:middle; box-sizing:border-box;}
div[data-module=eco][data-role=item] > a > div.content > small.essential_icons > span > i.icon {width:22px; height:22px; position:relative; display:block;}
div[data-module=eco][data-role=item] > a > div.content > small.essential_icons > span > i.icon > i {position:absolute; width:100%; height:100%; top:0; left:0;}

div[data-module=eco][data-role=item] > a > div.content > small.essential_icons > span > i.icon > i > i {display:block; margin-top:3px; width:22px; height:16px; position:relative;}
div[data-module=eco][data-role=item] > a > div.content > small.essential_icons > span > i.icon > i > i:before {content:""; position:absolute; top:-4px; left:0; width:0; height:0; border-left:11px solid transparent; border-right:11px solid transparent; border-bottom:4px solid transparent;}
div[data-module=eco][data-role=item] > a > div.content > small.essential_icons > span > i.icon > i > i:after {content:""; position:absolute; bottom:-4px; left:0; width:0; height:0; border-left:11px solid transparent; border-right:11px solid transparent; border-top:4px solid transparent;}
div[data-module=eco][data-role=item] > a > div.content > small.essential_icons > span > i.icon > i > i > i {position:absolute; top:-5px; left:0; width:100%; height:28px; line-height:28px; font-size:0.86rem; color:#fff; text-align:center;}

div[data-module=eco][data-role=item] > a > div.content > small.essential_icons > span > i.icon > i.on {z-index:0;}
div[data-module=eco][data-role=item] > a > div.content > small.essential_icons > span > i.icon > i.off {z-index:1; overflow:hidden;}
div[data-module=eco][data-role=item] > a > div.content > small.essential_icons > span > i.icon > i.off > i {background:#999;}
div[data-module=eco][data-role=item] > a > div.content > small.essential_icons > span > i.icon > i.off > i:before {border-bottom-color:#999;}
div[data-module=eco][data-role=item] > a > div.content > small.essential_icons > span > i.icon > i.off > i:after {border-top-color:#999;}

div[data-module=eco][data-role=item] > a > div.bottom {border-top:1px solid #e6e6e6; border-bottom:1px solid #e6e6e6; background:#f8f8f8; height:32px; padding:0px 15px; font-size:0; position:relative;}
div[data-module=eco][data-role=item] > a > div.bottom > div.progress {display:inline-block; margin:14px 0px; width:calc(100% - 50px); height:4px; background:#dbdbdb; vertical-align:middle;}
div[data-module=eco][data-role=item] > a > div.bottom > div.progress > div {height:4px; background:#2A2C7F;}
div[data-module=eco][data-role=item] > a > div.bottom > div.progress.CONFIRMED > div {background:#E91E63;}
div[data-module=eco][data-role=item] > a > div.bottom > label {display:inline-block; min-width:50px; height:32px; line-height:32px; font-size:0.79rem; vertical-align:middle; position:absolute; top:0; right:0; text-align:right; padding:0px 15px 0px 5px; background:#f8f8f8;}
div[data-module=eco][data-role=item] > a > div.bottom > label > b {color:#2A2C7F;}
div[data-module=eco][data-context=program] ul[data-role=grid][data-display=list] div[data-module=eco][data-role=item] > a > div.select {display:none;}


div[data-module=eco][data-role=item] > a > div.detail {position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.8); z-index:1; box-sizing:border-box; transition:0.5s ease-in-out; border-radius:0; opacity:0;;}
div[data-module=eco][data-context=program] ul[data-role=list]:not([data-display=list]) div[data-module=eco][data-role=item] > a:hover > div.detail {opacity:1;}
div[data-module=eco][data-role=item] > a > div.detail > div {position:relative; width:100%; height:100%;}

div[data-module=eco][data-role=item] > a > div.detail > div[data-role=default] button {position:absolute; top:70px; right:10px; padding:5px; font-size:1.43rem; color:#999; z-index:11; background-color:transparent; border:0 none; cursor:pointer;}
div[data-module=eco][data-role=item] > a > div.detail > div[data-role=default] button i.fa-star {font-size:1.43rem; color:#999;}
div[data-module=eco][data-role=item] > a > div.detail > div[data-role=default] button i.fa-star.selected {color:#ffc240;}
div[data-module=eco][data-role=item] > a > div.detail > div[data-role=default] button.selected i.fa-star {color:#ffc240;}
div[data-module=eco][data-role=item] > a > div.detail > div[data-role=default] > div.content {width:calc(100% - 30px); height:250px; position:absolute; top:calc(50% - 100px); left:15px; overflow:hidden; text-align:center;}
div[data-module=eco][data-role=item] > a > div.detail > div[data-role=default] > div.content > label {display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:0.86rem; color:#ffc240;}
div[data-module=eco][data-role=item] > a > div.detail > div[data-role=default] > div.content > b {display:block; display:-webkit-box; font-size:1.57rem  ; line-height:30px; height:60px; overflow:hidden; text-overflow:ellipsis; -webkit-line-clamp:2; -webkit-box-orient:vertical; word-wrap:break-word; margin:15px 0px 15px 0px; color:#fff; padding:0px 10px;}
div[data-module=eco][data-role=item] > a > div.detail > div[data-role=default] > div.content > small {color:rgba(255,255,255,0.5); font-size:0.86rem; display:block;}

div[data-module=eco][data-role=item] > a > div.detail > div[data-role=default] > div.content > div.type {font-size:0.86rem; color:#fff; margin-top:20px;}

div[data-module=eco][data-role=item] > a > div.detail > div[data-role=default] > div.content > div.progress {display:inline-block; height:32px; line-height:32px; border:1px solid rgba(255,255,255,0.4); font-size:1rem; border-radius:17px; margin-top:10px; background:rgba(255,255,255,0.2); padding:0px 15px; color:rgba(255,255,255,0.5);}
div[data-module=eco][data-role=item] > a > div.detail > div[data-role=default] > div.content > div.progress > b {color:#fff;}

div[data-module=eco][data-role=item] > a > div.detail > div[data-role=default] > div.content > div.mileage p {display:inline-block; height:25px; line-height:25px; border-radius:17px; margin-top:10px; background:#FFE766; padding:0px 15px;}
div[data-module=eco][data-role=item] > a > div.detail > div[data-role=default] > div.content > div.mileage i.is_greate {display:none;}
div[data-module=eco][data-role=item] > a > div.detail > div[data-role=default] > div.content > div.mileage.is_greate p {background-color:#FF843A;}
div[data-module=eco][data-role=item] > a > div.detail > div[data-role=default] > div.content > div.mileage.is_greate i.is_greate {display:inline; padding-right:3px;}
div[data-module=eco][data-role=item] > a > div.detail > div[data-role=default] > div.content > div.mileage p b {color:#333; font-size:0.86rem;}
div[data-module=eco][data-role=item] > a > div.detail > div[data-role=default] > div.content > div.mileage p b i {font-style:normal;}

div[data-module=eco][data-role=item] > a > div.detail > div[data-role=default] > div.bottom {background:#2A2C7F; color:#fff; width:100%; height:50px; line-height:50px; font-size:1rem; text-align:center; position:absolute; left:0; bottom:0;}