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

.applicant_count {font-size:1.14rem;}
div[data-module=eco][data-role=item] {width:100%; position:relative; z-index:0;}
div[data-module=eco][data-role=item].empty > div {display:flex; flex-direction:column; align-items:center; justify-content:center; height:384px; border-radius:8px; 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.empty_img {width:63px; height:61px; background:url(../images/empty.svg) no-repeat center center;}
div[data-module=eco][data-role=item].empty > div > div.text {width:100%; line-height:36px; color:#797979; font-weight:600; font-size:1rem ;}
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;}
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.certified {position:absolute; right:0; bottom:177px; display:block; width:150px; height:150px; background:url(../images/certify2.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:57px; 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-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-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-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-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:1px 3px 1px 0px; 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-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; border-radius:8px; background-image:url(../images/noimage.png); background-size:cover; background-repeat:no-repeat; background-position:absolute; position:relative;}
div[data-module=eco][data-role=item] > a > div.content {padding:10px 0px;}
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 {display:flex; align-items:center; gap:6px; color:#fff; font-size:1rem ; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; font-weight:bold;justify-content: space-between;}
html[lang=en] div[data-module=eco][data-role=item] > a > div.content > div.department {display:flex; align-items:center; gap:6px; color:#fff; font-size:1rem ; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; 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 span {padding:5px; border-radius:5px; font-size:0.86rem; font-weight:700;}
div[data-module=eco][data-role=item] > a > div.content > div.department label {padding:5px; border-radius:5px; font-size:0.86rem; font-weight:700;}
div[data-module=eco][data-role=item] > a > div.content > div.department span.institution {background:var(--thema_color);}

div[data-module=eco][data-role=item] > a > div.content > div.department label.status {background:#E37F22 ;}
div[data-module=eco][data-role=item] > a > div.content > div.department label.status.CLOSED {background:#9CA3AF;}
div[data-module=eco][data-role=item] > a > div.content > div.department label.status.APPROACH_CLOSING {background:#4EC7BB;}

div[data-module=eco][data-role=item] > a > div.content > div.department label.status.SCHEDULED {background:#4878C8;}
div[data-module=eco][data-role=item] > a > div.content > div.department label.point {position:relative; padding-left:23px; background:#FFC100;}
div[data-module=eco][data-role=item] > a > div.content > div.department label.point::before {content:""; position:absolute; left:5px; display:inline-block; width:14px; height:14px; background:url(../images/coins.svg) no-repeat center center;}
div[data-module=eco][data-role=item] > a > div.content > div.department label.target {background-color:#0046FF; color:#fff;}

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 {display: flex; margin-top:10px; margin-bottom:5px; height:48px;}

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; font-weight:500; color:#333; width:100%; overflow:hidden; text-overflow:ellipsis; -webkit-line-clamp:2; -webkit-box-orient:vertical; word-wrap:break-word;}
div[data-module=eco][data-role=item] > a > div.content > div.period > small {display:block; font-size:1rem ; color:#333; width:100%; 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 span.date_title {font-weight:700;}
div[data-module=eco][data-role=item] > a > div.content > small time {font-weight:400; color:#888;}
div[data-module=eco][data-role=item] > a > div.content > small.topic  {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 label.applicant_count {font-weight:500; font-size:1rem ; color:var(--thema_color); line-height:24px;}
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:var(--thema_color);}
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:var(--thema_color);}
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%; border-radius:8px; background:#000; z-index:1; box-sizing:border-box; transition:0.5s ease-in-out; opacity:0;;}
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 {padding:24px 16px; width:calc(100% - 30px); height:100%; overflow:hidden; text-align:center;}
div[data-module=eco][data-role=item] > a > div.detail > div[data-role=default] > div.content div.point {display:flex; justify-content:end; max-height:46px; height:100%;}

div[data-module=eco][data-role=item] > a > div.detail > div[data-role=default] > div.content div.point p {position:relative; padding:12px 12px 12px 35px; text-align:center; height:22px; background-color:#313131; border-radius:74px; line-height:24px; font-size:1rem ; font-weight:500; color:#fff;}
div[data-module=eco][data-role=item] > a > div.detail > div[data-role=default] > div.content div.point p i {position:absolute; top:50%; left:1px; transform:translateY(-50%); display:block; width:38px; height:38px; background:url(../images/detail_coin.gif) repeat center center; background-size:cover;}
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; width:100%; height:calc(100% - 140px);}
div[data-module=eco][data-role=item] > a > div.detail > div[data-role=default] > div.content > div.progress ul {height: 100%; overflow-x: hidden;overflow-y: auto;}
div[data-module=eco][data-role=item] > a > div.detail > div[data-role=default] > div.content > div.progress ul li {font-size:1rem ; font-weight:400; color:#fff;}
div[data-module=eco][data-role=item] > a > div.detail > div[data-role=default] > div.content > div.progress ul li {margin-bottom:10px;}
div[data-module=eco][data-role=item] > a > div.detail > div[data-role=default] > div.content > div.progress ul li p {padding-bottom:6px; text-align:left;}
div[data-module=eco][data-role=item] > a > div.detail > div[data-role=default] > div.content > div.progress ul li span.bar {position:relative; display:inline-block; width:100%; height:8px; background:#313131; border-radius:7px;}

div[data-module=eco][data-role=item] > a > div.detail > div[data-role=default] > div.content > div.progress ul li span.bar span.percent {position:absolute; display:inline-block; left:0; width:0; transition:width 1s; height:8px; border-radius:7px;}


div[data-module=eco][data-role=item] > a > div.detail > div[data-role=default] > div.content > div.bottom {margin-top:4px; background:var(--thema_color); color:#fff; width:100%; height:42px; border-radius:7px; line-height:42px; font-size:1.29rem; text-align:center; }
div[data-module=eco][data-role=item] > a > div.buttons {display: none;}

/* 프로그램 마강 */
div[data-module=eco][data-role=item] > a > div.detail > div[data-role=default] > div.content > div.content__close {display: flex; flex-direction: column; align-items: center; justify-content:center; margin:0 auto; max-width:219px; height: calc(100% - 94px);}
div[data-module=eco][data-role=item] > a > div.detail > div[data-role=default] > div.content > div.content__close h4 {margin-bottom:0; height:auto; font-size:1.71rem; color:#fff; font-weight: bold; line-height:30px; word-break:keep-all;text-align: center;}
div[data-module=eco][data-role=item] > a > div.detail > div[data-role=default] > div.content > div.content__close p {font-size:1rem; line-height:30px; color:#969696;}

@media (max-width:1199px) {
    div[data-module=eco][data-role=item] > a > span.certified {width:100px; height:100px; bottom:225px;}
}

@media (max-width:991px) {
    div[data-module=eco][data-role=item] > a > span.certified {bottom:177px; width:150px; height:150px;}
}

@media (max-width:551px) {
	div[data-module=eco][data-role=item] > a > div.detail > div[data-role=default] > div.content {height:calc(100% - 48px);}
    div[data-module=eco][data-role=item] > a > div.detail > div[data-role=default] > div.content > div.progress {height:calc(100% - 90px);}
}

div.container {box-sizing: border-box;} 
div[data-view=list] {display: flex; flex-direction: column;} 
div[data-view=list] nav.essential {background: #fcfcfc; padding: 40px 0px; order: -1;} 
div[data-view=list] nav.essential ul {display: flex; justify-content: center; gap: 30px; align-items: center; padding: 9px; opacity: 1; margin: 0; width: auto; height: auto; overflow-x: auto; text-align: start; white-space: inherit;} 
div[data-view=list] nav.essential ul li {display: flex; align-items: center; width: auto; height: auto; vertical-align: inherit; padding: 0;} 
div[data-view=list] nav.essential ul li:first-child {width: auto;}
div[data-view=list] nav.essential ul li a {height: auto; width: auto; text-align: inherit; font-size: inherit; margin: 0;} 
div[data-view=list] nav.essential ul > li > a > i.icon {display: block; margin: 0px 10px 18px 10px; width: 80px; height: 80px; border-radius: 8px; background: #FFF; box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.10); text-align: center; font-size:2.29rem; color: #101828; line-height: 80px; border: none;} 
div[data-view=list] nav.essential ul > li > a.selected > i.icon {display: block; margin: 0px 10px 18px 10px; width: 80px; height: 80px; border-radius: 8px; background: var(--thema_color); box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.10); text-align: center; color: #fff;} 
div[data-view=list] nav.essential ul li p {margin-top: 18px; min-height: 40px; max-width: 100px; word-break: keep-all; color: #333; font-weight: 500; font-size:1.21rem; text-align: center;} 
div[data-view=list] nav.essential ul.slick-initialized .slick-slide {display: flex; justify-content: center; align-items: center;} 
div[data-view=list] nav.essential ul.slick-slider button.slick-next {position: absolute; right: -50px; width: 52px; height: 52px; z-index: 1; border: 0; border-radius: 50%; padding: 0; margin: 0; font-size: 0; cursor: pointer; top: calc(50% - 26px); font-family: FontAwesome; color: #fff; line-height: 50px; background: transparent;} 
div[data-view=list] nav.essential ul.slick-slider button.slick-next::before {content: "\f105"; color: #101828; padding-left: 4px; font-size:2.21rem;} 

/* 하위역량 노출시 */
div[data-view=list] nav.essential ul:has(li.parent) {flex-wrap: wrap;}
div[data-view=list] nav.essential ul:has(li.parent) > li:not(.parent) {margin-top: 56px;}
div[data-view=list] nav.essential ul > li.parent {flex-direction: column;}
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:has(li.parent) {padding-bottom: 80px; height: auto;}


div[data-module=eco] div.search_box {position: relative; margin: 0 auto; margin-top: 60px; width: 720px;} 
div[data-module=eco] form#ModuleEcoProgamListForm {position: relative; margin: 0 auto; margin-top: 60px; width: 720px;}
div[data-module=eco] div.input.search_area {position: relative; width: 720px; height: 60px; border: 2px solid var(--thema_color); font-size: 0; border-radius: 100px; left: 50%; transform: translateX(-50%);} 
/* div[data-module=eco] div[data-role=input] {display: block; width: 100%; min-height: inherit; position: relative;}  */
div[data-module=eco] div.input.search_area > div[data-role=input][data-type=select] {display: inline-block; width: 200px; height: 60px; vertical-align: middle; font-size:1rem;} 
div[data-module=eco] div.input.search_area > div[data-role=input][data-type=select] button {background: var(--thema_color); border-radius: 50px 0px 0px 50px; font-size:1.07rem; font-weight: bold; height: 60px; border: 0 none;} 
div[data-module=eco] div.input.search_area > div[data-role=input][data-type=select] button span {padding: 0; padding-left: 11px; width: calc(100% - 70px); height: auto; line-height: 60px; color: #fff; font-weight: 400;} 
div[data-module=eco] div.input.search_area > div[data-role=input][data-type=select] button i {font-size:1.14rem; color: #fff; font-weight: 400;} 
div[data-module=eco] div.input.search_area > div[data-role=input][data-type=select] > ul {top: 61px; left: 22px; width: calc(100% - 22px); border: 1px solid var(--thema_color);} 
div[data-module=eco] div.input.search_area > div[data-role=input][data-type=select] > ul li:focus {background-color: var(--thema_color);} 
div[data-module=eco] div.input.search_area > input {margin-right: 10px; width: calc(100% - 270px); height: 24px; padding: 0px 15px; font-size:1.14rem; vertical-align: middle; border: 0; background: transparent; box-sizing: border-box;} 
div[data-module=eco] div.input.search_area > div[data-role=input] {display: inline-block; width: 180px;} 
div[data-module=eco] div.input.search_area > div[data-role=input] > select {border: 1px solid #d1d1d1; background: #fff; box-sizing: border-box; width: 100%; height: 40px; line-height: 1; cursor: pointer; color: #666;} 
div[data-module=eco] div.input.search_area > div[data-role=input] > select {height: 60px; border: 0 none;}
div[data-module=eco] div.input.search_area > button {font-size:2.29rem; line-height: 60px; border: 0; background: transparent; cursor: pointer; display: inline-block; vertical-align: middle; color: #222;} 
div[data-module=eco] div.input.search_area > button.keyword {position: relative; width: 180px; height: 100%; min-height: 60px; background: #40464d; border: 0; cursor: pointer; color: #eee; font-size:1rem; text-align: left;} 
div[data-module=eco] div.input.search_area > button.keyword > b {display: block; width: 100%; height: 60px; line-height: 60px; font-size:1rem; text-align: left; padding: 0px 15px 0px 25px; position: absolute; top: 0; left: 0; box-sizing: border-box;} 
div[data-module=eco] div.input.search_area > button.keyword > b > i {float: right; width: 30px; height: 60px; line-height: 60px; text-align: center; font-weight: normal;} 
div[data-module=eco] div.input.search_area > button[type=button].btn_search {width: 61px; height: 61px; border-radius: 50%; background: var(--thema_color); font-size:1.43rem; color: #fff; position: absolute; right: -1px; top: -1px;} 
div[data-module=eco] div.input.search_area > button[type=submit] {width: 45px; height: 60px; font-size:1.43rem; background-color: #b5b7c0; color: #fff;} 
div[data-module=eco] div.input.search_area > button[type=button].detail {position: absolute; right: -100px; top: 50%; transform: translateY(-50%); border: none; color: #555 !important; font-size:1.14rem; font-weight: 400; background-color: transparent !important; cursor: pointer;} 
div[data-module=eco] div.input.search_area > button[type=button].detail i {margin-left: 8px;} 
div[data-module=eco] div.input.search_area > button[type=button].detail::after {content: ""; display: inline-block; margin-left: 4px; width: 16px; height: 10px; background: url(../images/down_icon.svg) no-repeat center center;} 
div[data-module=eco] div.input.search_area > button[type=button].detail.up::after {content: ""; display: inline-block; margin-left: 4px; width: 16px; height: 10px; background: url(../images/up_icon.svg) no-repeat center center;}
div[data-module=eco] div[data-role=searchbox] { display: none; }
div[data-module=eco] div[data-role=searchbox].on { display: block; }
div[data-module=eco] div.tag.on { display: flex; margin-bottom: 24px; }
div[data-module=eco] div.tag { display: flex; gap: 15px; justify-content: center; margin-top: 24px; font-size:1rem; }
div[data-module=eco] div.tag > button:hover { background: none; color: #1e476c; font-weight: bold; }
div[data-module=eco] div.tag > button {background:transparent;border:none;font-size:1.14rem;font-weight:400;color:#989898;box-sizing:border-box;cursor:pointer;margin:0;padding:0;border-radius:0;}
div[data-module=eco] div[data-role=searchbox] > ul {list-style:none;border-top:none;border-collapse:collapse;}
div[data-module=eco] div[data-role=searchbox] > ul > li {min-height:40px;border-bottom:none;}
/* div[data-module=eco] div[data-role=searchbox] > ul > li > label {width:100%;padding:0;font-size:1.14rem;font-weight:500;line-height:64px;text-align:center;background:#F9F9F9;color:#000;} */
div[data-module=eco] div[data-role=searchbox] > ul > li > label + div {padding:0 0 0 32px;border-bottom:1px solid #f4f4f4; font-size: 1rem;}
div[data-module=eco] div.check[data-role=input][data-type=checkbox] {display:inline-block;width:auto;margin-top:0;margin-right:24px;}
div[data-module=eco] div[data-role=input][data-type=checkbox] > label {padding:0px 0px 0px 32px;height:auto;display:flex;align-items:center;color:#999;font-weight:500; line-height: 60px; }
div[data-module=eco] div.check[data-role=input][data-type=checkbox] > label > button.checkbox {width:24px;height:24px;border-radius:5px; margin: 0 8px 0 -33px;}
div[data-module=eco] div.check[data-role=input][data-type=checkbox] > label > button.checkbox.on {background-color:var(--thema_color);border:none;border-radius:6px;}
div[data-module=eco] div.check[data-role=input][data-type=checkbox] > label > button.checkbox.on::before {content:"";display:inline-block;width:100%;height:100%;background:url(../images/check_icon.svg) no-repeat center center;}
div[data-module=eco] div.radio[data-role=input][data-type=radio] {display:inline-block;width:auto;margin-right:24px;}
div[data-module=eco] div.radio[data-role=input][data-type=radio] > label {padding:0px 0px 0px 32px;line-height:60px;}
div[data-module=eco] div.radio[data-role=input][data-type=radio] > label > button.radio {width:24px;height:24px;margin:17px 8px -2px -33px;border-radius:5px;}
div[data-module=eco] div.radio[data-role=input][data-type=radio] > label > button.radio.on {line-height:10px;background-color:var(--thema_color);border:none;}
div[data-module=eco] div.radio[data-role=input][data-type=radio] > label > button.radio.on::before {content:"";display:inline-block;width:100%;height:100%;background:url(../images/check_icon.svg) no-repeat center center;}
/* ul[data-role=form].inner > li {display:grid;grid-template-columns:160px 1fr;align-content:center;} */
/* div[data-module=eco] div[data-role=searchbox] > ul > li > div {border:1px solid #f4f4f4;box-sizing:border-box;display:flex;align-items:center;gap:4px; flex-wrap: wrap;} */
/* div[data-module=eco] div[data-role=searchbox] > ul > li > div.category > div {gap:0;} */
/* div[data-module=eco] div[data-role=searchbox] div[data-role=input][data-type=select] > button {height:65px;border-color:#f4f4f4;border-bottom:none;border-right:none;} */
div[data-module=eco] div[data-role=searchbox] div[data-role=input][data-type=select].extend > ul {top:64px;}
div[data-module=eco] div[data-role=input][data-type=select].extend.up > ul {bottom:auto;}
div[data-module=eco] div[data-role=searchbox] > ul > li.flex_box {display:flex;min-height:80px;}
/* div[data-module=eco] div[data-role=searchbox] > ul > li > div.category {display:flex;flex-direction:column;padding:0;border:none;gap:0;} */
/* div[data-module=eco] div[data-role=searchbox] > ul > li > div.category > div {display:table;width:100%;height:100%;table-layout:fixed;box-sizing:border-box;} */
/* div[data-module=eco] div[data-role=searchbox] > ul > li > div.category > div > div {display:table-cell;padding:10px 10px 10px 0px;line-height:1;vertical-align:top;} */
div[data-module=eco] div[data-role=searchbox] > ul > li > div.category > div > label {line-height: 66px;}
/* div[data-module=eco] div[data-role=searchbox] > ul > li > div.category > div:first-child > label {border-bottom:none;} */
div[data-module=eco] div[data-role=searchbox] > ul > li .dateField {display:none;}
div[data-module=eco] div[data-role=searchbox] > ul > li .dateField.on {display:inline-block;}
/* div[data-module=eco] div[data-role=searchbox] > ul > li > div.tags {padding:0;} */
/* div[data-module=eco] div[data-role=searchbox] > ul > li > div.tags > div {display:table-cell;padding:15px;line-height:1;vertical-align:top;box-sizing:border-box;} */
/* div[data-module=eco] div[data-role=searchbox] > ul > li > div.tags > div > div.box {overflow:auto;height:100px;overflow-x:hidden;} */
div[data-module=eco] div[data-role=searchbox] > ul > li > div.tags > div > div.box::-webkit-scrollbar {width:8px;}
div[data-module=eco] div[data-role=searchbox] > ul > li > div.tags > div > div.box::-webkit-scrollbar-thumb {background-color:var(--thema_color);border-radius:10px;}
div[data-module=eco] div[data-role=searchbox] > ul > li > div.tags > div > div.box::-webkit-scrollbar {background-color:#F4F4F4;border-radius:10px;}
div[data-module=eco] div[data-role=searchbox] > ul > li > div.tags > div > div.box > div {display:inline-block;width:32%;text-align:center;}
div[data-module=eco] div[data-role=searchbox] > ul > li > div.tags > div > div.box > button {padding:3px 2px;font-size:1rem ;background:transparent;border:none;border-radius:19px;line-height:20px;color:#A1A1A1;font-weight:400;cursor:pointer;box-sizing:border-box;}
div[data-module=eco] div[data-role=searchbox] > ul > li > div.tags > div > div.box > button:hover {font-weight:800;}
div[data-module=eco] div[data-role=searchbox] > ul > li > div.tags{border-bottom: none;}
div[data-module=eco] div[data-role=searchbox] > ul > li > div.tags > label {line-height:130px;}
div[data-module=eco] div[data-role=searchbox] div[data-role=input][data-type=select] > button { height: 66px;}
/* div[data-module=eco] div.category div[data-role=input][data-type=select] > button > span {padding:22px 32px;line-height:1;height:65px;color:#333;font-weight:500;} */
div[data-module=eco] div[data-role=input][data-type=input] > input {border-radius:28px;color:#999;font-size:1rem ;font-weight:400;padding-left:18px;}
div[data-module=eco] div[data-role=input][data-type=input] > button {margin-right:5px;background-color:transparent;}
div[data-module=eco] div[data-role=input][data-type=input] > button:hover {background-color:transparent;}
div[data-module=eco] div[data-role=input][data-type=input] > button i::before {content:"";display:inline-block;width:24px;height:38px;background:url(../images/calendar.png) no-repeat center center;}

/* 프로그램 분류, 운영기관 클릭했을때 모집대상에 있는 체크박스 복사되는거 none 처리 2770240524896035595 */
div[data-module=eco] form#ModuleEcoProgramListForm > [data-role=searchbox] > [data-role=form] div.check[data-role=input][data-type=checkbox] > label > button.checkbox + button.checkbox {display: none;}

@media (max-width: 1200px) {
    div[data-module=eco] div.radio[data-role=input][data-type=radio]{margin-right: 12px;}
}

@media (max-width: 991.98px) {
    ul[data-role=form] > li > div {display: block;width: auto;}
    div[data-module=eco] div.input.search_area > button[type=button].detail {right: -60px;font-size:0;}
    div[data-module=eco] div.search_box button.detail > i {font-size:0.86rem;}
    div[data-module=eco] div[data-role=searchbox] div.border__right div[data-role=input][data-type=select] > button {border-right: 1px solid #f4f4f4;}
    div[data-module=eco] div.tag {flex-wrap: wrap;}
    div[data-module=eco] div[data-role=searchbox] > ul > li.flex_box { display: grid; grid-template-columns: repeat(1, 1fr);}
    div[data-module=eco] div[data-role=searchbox] > ul > li > label + div { padding: 8px 16px;}
    div[data-module=eco] div[data-role=searchbox] > ul > :not(li.flex_box) > div { flex-wrap: wrap;}
    div[data-module=eco] div.radio[data-role=input][data-type=radio] > label { padding: 0 0 0 16px;line-height: 24px;}
    div[data-module=eco] div.radio[data-role=input][data-type=radio] > label > button.radio { margin: 0px; margin-right: 5px;}
}

@media (max-width: 845px) {
    div[data-module=eco] div.search_box { width: 90%;}
    div[data-module=eco] div.input.search_area {width: 100%;}
    div[data-module=eco] div.search_box button.detail {right: -28px;}
}

@media (max-width: 814px) {
    div[data-view=list] nav.essential ul.slick-initialized .slick-slide {flex-wrap:wrap;}
}

@media (max-width: 768px){
    div[data-view=list] nav.essential ul { width: 300px; display: grid;grid-template-columns: repeat(2, 1fr);margin: 0 auto;gap: 10px;}
    div[data-view=list] nav.essential ul > li:first-child{display: none;}
    div[data-view=list] nav.essential ul li { justify-content: center;}
    div[data-view=list] nav.essential {height: auto;}
    div[data-role=tabbar] > div > ul {display: table;width: 100%;table-layout: fixed;list-style: none;padding: 0px; margin: 0px;}
}

@media (max-width: 557px) {
    div[data-module=eco] div.input.search_area > div[data-role=input][data-type=select] { width:115px; }
    div[data-module=eco] div.input.search_area > input {width: calc(100% - 190px);}
    div[data-module=eco] div.input.search_area > div[data-role=input][data-type=select] button span {width: calc(100% - 49px);font-size:0.93rem;}
    div[data-module=eco] div.search_box button.detail {display: none;}
    div[data-module=eco] div.tag > button {font-size:0.93rem;}
    div[data-module=eco] div.input.search_area > input {font-size:0.93rem;}
}

@media (max-width: 465px) {
    div[data-module=eco] div[data-role=sortbar] {flex-direction:column;align-items: flex-start;padding-top: 15px;height: auto;}
    div[data-view=list] nav.essential ul {width: 200px;overflow-x: hidden;}
    div.container {padding: 0;}
}

@media (max-width: 375px) {
    div[data-module=eco] div[data-role=sortbar] {flex-direction: row;}
    div[data-module=eco] div[data-role=sortbar] div.sortbar_list > ul.sortbar_select {display: none;}
}