/**
 * 이 파일은 비교과모듈의 일부입니다. (http://www.coursemos.kr)
 *
 * 비교과 프로그램 리스트 공통 프로그램박스 박스형 디자인 템플릿 스타일시트
 *
 * @version 3.4.0
 * @modified 2019. 1. 28.
 */
div[data-module=hybridedu] div[data-role=pagination] li a {cursor:pointer;}
div[data-module=hybridedu][data-role=item] {width:100%; position:relative; z-index:0; border-radius:20px; border:1px solid #e6e6e6; box-sizing:border-box;}
div[data-module=hybridedu][data-role=item].empty > div {border:1px solid #e6e6e6; background:#f4f4f4; color:#999; text-align:center; font-size:12px; box-sizing:border-box; width:100%;}
div[data-module=hybridedu][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=hybridedu][data-role=item].empty > div > div.text {width:100%; height:197px; line-height:197px;}
div[data-module=hybridedu][data-role=item] > a {display:block; position:relative; width:100%; font-size:0; text-decoration:none; color:#222; box-sizing:border-box; }

div[data-module=hybridedu][data-role=item] > a > div.box_label {position:absolute; top:10px; left:10px; z-index:20;}
div[data-module=hybridedu][data-role=item] > a > div.box_label label {box-sizing:border-box; display:inline-block ; min-width:54px; height:26px; margin-right:3px; padding:0 12px; background:#222; text-align:center; color:#fff; z-index:10; font-size:14px; font-weight:500 ;line-height:26px; border-radius:999px; vertical-align:top;}
div[data-module=hybridedu][data-role=item] > a > div.box_label label + label {}
div[data-module=hybridedu][data-role=item] > a > div.box_label label.active_point {background-color:#ED8230;}
div[data-module=hybridedu][data-role=item] > a > div.box_label label > span {font-size:13px;}
div[data-module=hybridedu][data-role=item] > a > div.box_label label > i { display:inline-block; padding-right:3px; font-style:normal; font-size:14px;}
div[data-module=hybridedu][data-role=item] > a > div.box_label > i.dday {box-sizing:border-box; display:inline-block; min-width:40px; height:26px; padding:0 12px; background-color:#F7D1D5; border-radius:999px; font-size:14px; line-height:26px; font-weight:500; font-style:normal;}
div[data-module=hybridedu][data-role=item] > a > div.box_label > i.dday.near {background-color:#F7D1D5;}
div[data-module=hybridedu][data-role=item] > a > div.box_label > i.dday.middle {background-color:#A9D2EA;}
/* div[data-module=hybridedu][data-role=item] > a > div.box_label > i.dday.near {background-color:#FEE65A;} */
div[data-module=hybridedu][data-role=item] > a > div.box_label > i.dday.CLOSED {background-color:#D0D0D0;}
div[data-module=hybridedu][data-role=item] > a > div.box_label > i.dday.APPROACHING {background-color:#DC3535; color:#fff;}
div[data-module=hybridedu][data-role=item] > a > div.box_label > i.dday.APPROACH_CLOSING {background-color:#A9D2EA; }

div[data-module=hybridedu][data-role=item] > a > div.cover {width:100%; padding-bottom:60.33%; /*padding-bottom:73.26%;*/ height:0; background-image:url(../images/noimage.png); background-size:cover; background-position:center; position:relative; border-top-left-radius:20px; border-top-right-radius:20px; box-shadow:0px 1px 3px rgba(0,0,0,0.1); background-repeat:no-repeat;}
div[data-module=hybridedu][data-role=item] > a > div.cover div.class_wrap {position:absolute; bottom:10px; right:10px; z-index:20;}
div[data-module=hybridedu][data-role=item] > a > div.cover div.class_wrap label { box-sizing:border-box; display:inline-block; min-width:54px; height:26px; padding:0 12px; background:#222; text-align:center; color:#fff; z-index:10; font-size:14px; font-weight:500; line-height:26px; border-radius:999px; vertical-align:top;}
div[data-module=hybridedu][data-role=item] > a > div.cover div.class_wrap label + label {margin-left:6px;}
div[data-module=hybridedu][data-role=item] > a > div.cover div.class_wrap label.leaderClass {background-color:#CF9298;}
div[data-module=hybridedu][data-role=item] > a > div.cover div.class_wrap label.myClass {background-color:#DCA42B;}
div[data-module=hybridedu][data-role=item] > a > div.content {box-sizing:border-box;  padding:12px 16px;}
div[data-module=hybridedu][data-role=item] > a > div.content > div.department {color:#17469e; font-size:0px; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; height:18px; line-height:18px; font-weight:bold;}
div[data-module=hybridedu][data-role=item] > a > div.content > div.department span.department {position:relative; display:inline-block; padding:0 4px; font-weight:400; font-size:12px; line-height:18px;}
div[data-module=hybridedu][data-role=item] > a > div.content > div.department span.small_department {position:relative; display:inline-block; padding-right:5px; font-weight:400; font-size:14px; line-height:18px; color:#7F7F7F;}
div[data-module=hybridedu][data-role=item] > a > div.content > div.department span.small_department[data-depth="0"] {color:#393840;}
div[data-module=hybridedu][data-role=item] > a > div.content > div.department span.small_department[data-depth="1"] {color:#7f7f7f;}
div[data-module=hybridedu][data-role=item] > a > div.content > div.department span.small_department[data-depth="2"] {color:#bdbdbd;}
div[data-module=hybridedu][data-role=item] > a > div.content > div.department span.small_department[data-depth="3"] {color:#d0d0d0;}

div[data-module=hybridedu][data-role=item] > a > div.content > div.department span.small_department+span.small_department::before{content:''; display:inline-block; margin:0 5px; width:1px; height:16px; background-color:#E6E6E6; vertical-align:middle;}
div[data-module=hybridedu][data-role=item] > a > div.content > div.department > div.info_signin {display:none;}
div[data-module=hybridedu][data-role=item] > a > div.content > div.department > small {display:none;}
div[data-module=hybridedu][data-role=item] > a > div.content > div.department > i.fa-star {float:right; margin-left:10px; color:#999; font-size:16px;}
div[data-module=hybridedu][data-role=item] > a > div.content > div.department > i.fa-star.selected {color:#ffc240;}
div[data-module=hybridedu][data-role=item] > a > div.content > p.title {display:block; margin-bottom:8px; font-weight:400; font-size:17px; line-height:24px; letter-spacing:-0.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
div[data-module=hybridedu][data-role=item] > a > div.content > span.topic {display:block; height:14px; line-height:14px; font-size:12px; width:100%; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}
div[data-module=hybridedu][data-role=item] > a > div.content > small {position:relative; display:block; width:100%; padding-left:7px; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; font-weight:350; font-size:14px; line-height:18px; color:#7F7F7F; }
div[data-module=hybridedu][data-role=item] > a > div.content > small + small {margin-top:6px;}
div[data-module=hybridedu][data-role=item] > a > div.content > small:before {content:''; position:absolute; top:50%; transform:translateY(-50%); left:0; width:3px; height:3px; background-color:#7F7F7F; border-radius:50%;}
div[data-module=hybridedu][data-role=item] > a > div.content > small.showing_topic {height:32px; margin-top:-10px; line-height:14px; white-space:normal;}
div[data-module=hybridedu][data-role=item] > a > div.content > small.showing_topic > i {display:inline-block; vertical-align:top;}
div[data-module=hybridedu][data-role=item] > a > div.content > small.showing_topic > span {display:inline-block; width:calc(100% - 15px);}
div[data-module=hybridedu][data-role=item] > a > div.content > small > b {font-weight:500;}

div[data-module=hybridedu][data-role=item] > a > div.content > small.essential_icons {padding:1px 0; font-size:0;}
div[data-module=hybridedu][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=hybridedu][data-role=item] > a > div.content > small.essential_icons > span > i.icon {width:22px; height:22px; position:relative; display:block;}
div[data-module=hybridedu][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=hybridedu][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=hybridedu][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=hybridedu][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=hybridedu][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:12px; color:#fff; text-align:center;}

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

div[data-module=hybridedu][data-role=item] > a > div.content div.tags {display:flex; flex-wrap:wrap; overflow:hidden; height:24px ; margin:6px -2px 16px; font-size:0px;}
div[data-module=hybridedu][data-role=item] > a > div.content div.tags > button {display:inline-block; margin:2px; padding:2px 10px; font-weight:400; line-height:14px; font-size:12px; border-radius:15px; border:1px solid #E6E6E6 ; box-sizing:border-box; cursor:pointer; background:#F5F5F5;}

div[data-module=hybridedu][data-role=item] > a > div.content div.bottom {box-sizing:border-box; position:relative; margin-top:12px; font-size:0; }
div[data-module=hybridedu][data-role=item] > a > div.content div.bottom > div.progress { width:100%; height:4px; margin-bottom:10px; background:#E6E6E6; border-radius: 999px;}
div[data-module=hybridedu][data-role=item] > a > div.content div.bottom > div.progress > div {height:4px; background:#4C84FF; border-radius: 999px;}
div[data-module=hybridedu][data-role=item] > a > div.content div.bottom > div.info_signin span.type {font-weight:350; font-size:14px; line-height:24px; color:#7F7F7F;}
div[data-module=hybridedu][data-role=item] > a > div.content div.bottom > div.info_signin span.type > i {display:inline-block; width:24px; height:24px; vertical-align: bottom; background-position:center; background-repeat:no-repeat;}
div[data-module=hybridedu][data-role=item] > a > div.content div.bottom > div.info_signin span.type > i.INDIVIDUAL {background-image:url(../images/ico_individual.png);}
div[data-module=hybridedu][data-role=item] > a > div.content div.bottom > div.info_signin span.type > i.PRIVATE_TEAM {background-image:url(../images/ico_team.png);}
div[data-module=hybridedu][data-role=item] > a > div.content div.bottom > div.info_signin label {display:inline-block; float:right; font-weight:500; line-height:20px; font-size:16px; font-weight:400; color:#4C84FF;}


div[data-module=hybridedu][data-role=item] > a > div.content div.bottom > label {display:block; font-size: 10px; vertical-align:middle; }
div[data-module=hybridedu][data-role=item] > a > div.content div.bottom > label > b {color:#17469e;}
div[data-module=hybridedu][data-context=program] ul[data-role=grid][data-display=list] div[data-module=hybridedu][data-role=item] > a > div.select {display:none;}


div[data-module=hybridedu][data-role=item] > a > div.detail {position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.9); z-index:1; box-sizing:border-box; transition:.3s ease-in-out; opacity:0; border-radius:0;}
div[data-module=hybridedu][data-role=item] > a:hover > div.detail {opacity:1;}


div[data-module=hybridedu][data-role=item] > a > div.detail > div {position:relative; width:100%; height:100%;}

div[data-module=hybridedu][data-role=item] > a > div.detail > div[data-role=default] > i.fa-star {position:absolute; top:15px; right:15px; font-size:20px; color:#999;}
div[data-module=hybridedu][data-role=item] > a > div.detail > div[data-role=default] > i.fa-star.selected {color:#ffc240;}
div[data-module=hybridedu][data-role=item] > a > div.detail > div[data-role=default] > div.content {width:calc(100% - 30px); height:220px; position:absolute; top:calc(50% - 100px); left:15px; overflow:hidden; text-align:center;}
div[data-module=hybridedu][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:12px; color:#ffc240;}
div[data-module=hybridedu][data-role=item] > a > div.detail > div[data-role=default] > div.content > b {display:block; display:-webkit-box; font-size:22px; 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=hybridedu][data-role=item] > a > div.detail > div[data-role=default] > div.content > small {color:rgba(255,255,255,0.5); font-size:12px; display:block;}

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

div[data-module=hybridedu][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:14px; 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=hybridedu][data-role=item] > a > div.detail > div[data-role=default] > div.content > div.progress > b {color:#fff;}

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

/* pagination */