@charset "utf-8"; 

/* 엑싯 인텐트 팝업 */
.exit_popup{display: none; position: fixed; top: 0; right: 0; box-shadow: 0 0 42px rgba(0, 0, 0, 0.35); z-index: 999; animation: slide-in-top .5s cubic-bezier(.25,.46,.45,.94) both}
.exit_popup .close{background: #000; padding: 10px; display: flex; align-items: center;}
.exit_popup .close a{color: #fff; font-size: 14px; cursor: pointer;}
.exit_popup .close label a:after{content:'\007C'; opacity: 0.5; padding: 0 10px;}
.exit_popup input[type=checkbox]{width: 16px;height: 16px;}
@keyframes slide-in-top{0%{transform: translateY(-1000px); opacity:0} 100% {transform: translateY(0); opacity: 1;}}

/* 한전 바 배너 */
.barbnr{position: fixed; bottom: 0; width: 100%; background: rgba(11,39,71,0.97); z-index: 99; font-size: 30px; font-weight: 900;}
.barbnr a{display: flex; justify-content: center; align-items: center; height: 70px; color: #fff;}
.barbnr strong{color: #fff000; display: inline-block; margin-right: 15px;}
.barbnr span{background: #fff; border-radius: 50%; width: 30px; height: 30px; color: #000; display: inline-flex; font-size: 15px; margin-left: 10px; justify-content: center; align-items: center;}

/* sub tab */
.content .tabs_sub {overflow: hidden; display: flex; justify-content: left; padding-bottom: 50px;}
.content .tabs_sub li{background: #efefef; font-size: 17px; color: #fff; font-weight: 500; margin: 0 2px; color: #555; flex: 1; padding: 15px 0; justify-content: center; display: inline-flex; border-radius: 3px;
}

.content .tabs_sub > li:nth-last-child(2),
.content .tabs_sub > li:nth-last-child(1){width: 168px !important;}

.tabs_sub li{cursor: pointer;}
.tabs_sub .s-tab:hover {background: #0066ff ; color : #fff ; font-weight: 800 ;}
.tabs_sub li.active, 
.tabs_sub .sub_tab:hover {background: #0066ff; color : #fff; font-weight: 800;}

.content.service .tabs_sub {overflow: hidden;  display: block; justify-content: left; padding-bottom: 50px;}
.content.service .tabs_sub li{background: #efefef; min-width: 110px; margin: 0; color: #555; flex: 1; padding: 15px; justify-content: center; display: inline-grid; font-size: 17px; font-weight: 500; border-radius: 3px;}
.content.service .tabs_sub li.active, 
.content.service .tabs_sub .sub_tab:hover {background: #0066ff; color : #fff; font-weight: 800;}

/* sub */
.grant_lecture,
.grant_lecture .lec{overflow: hidden;}
.grant_lecture li,
.grant_lecture .lec li{float: left; width: 49%; margin-left: 2%;}
.grant_lecture li:first-child,
.grant_lecture .lec li:first-child{margin-left: 0;}

.grant_lecture .lec img{width: 100%; height: 186px; object-fit: cover; object-position: top;}

.visit_bnr{position: absolute; top: 51px; right: 0;}
.visit_bnr_pop{position: absolute; top: 25px; right: 110px; z-index: 2;}
.dungdung{animation: updown 1s both infinite alternate;}
@keyframes updown{ 0%{transform: translateY(-5px);} 100%{transform: translateY(5px);}}

/* 서브 텍스트 영역 */
.comment{line-height: 1.6;}
.comment span{color: #555;}
.comment span::before{content: '\007C'; margin: 0 8px 0 3px; color: #ccc; font-weight: 100;}
.comment span:first-child::before{content: unset;}


/* apply form */
.apply .tit{padding: 20px 0 !important; text-align: center; border-bottom: 1px solid;}
.apply .tit strong{font-size: 30px; font-weight: 800; display: block; padding-bottom: 10px;}
.apply .req{vertical-align: text-top; color: #ff4151f8; padding-left: 5px; font-weight: 200;}
.apply table.form tbody th{text-align: left; padding: 0 0 20px 0;}
.apply table.form tbody td{padding: 0 20px 20px 0; position: relative;}

.apply.counsel.grant.wrap{padding: 30px 0 100px; border-top: 2px solid #000;}
.apply.counsel table.form{width: 100%; margin: 20px 0;}

.apply.counsel.grant table.form tr:nth-child(2) td:nth-child(3){padding-right: 50px;}

.apply.counsel table.form input[type='text'],
.apply.counsel table.form select,
.apply.counsel table.form textarea{width: 100%; border-radius: 3px; padding: 7px; font-size: 14px;}

.apply.counsel label{margin-left: 25px;}
.apply.counsel .agree label{margin-left: 0;}
.apply.counsel.grant label:last-child{margin-left: 0; border: 1px solid #eee; width: 230px; display: block; padding: 5px 10px 7px; border-radius: 3px;}

.agree{background: #eaf1f1; padding: 20px 30px; line-height: 1.7; border-radius: 5px; font-size: 13px;}
.agree label{font-size: 16px;}
.agree table{width: 100%; margin: 10px 0;}
.agree table th,
.agree table td{border-right: 1px solid #ccc; font-size: 15px;}
.agree table th{background: #333; color: #fff; padding: 7px 0;}
.agree table td{position: relative; background: #fff; border-bottom: 1px solid #555; padding: 15px 0; text-align: center;}
.agree table td:last-child{border-right: 0;}

.apply.counsel .small{font-size: 12px; position: absolute; top: 36px; left: -5px; color: #777;}

/* vod */
#popupVideo .div_layer{background: #000; width: 45%; height: 50%; border-radius: 5px; position: relative;}
#popupVideo .pop_vod{border: 1px solid #000; border-radius: 5px;}
.popLayer .closeX{position: absolute; right: -35px; top: -25px; font-size: 3.5rem; color:#fff; cursor: pointer;}

/* 예약 결과 테이블 */
.result table{width: 100%; margin-bottom: 30px; border: 1px solid #333; border-left: 0; border-right: 0;}
.result table th,
.result table td{padding: 10px; border-bottom: 1px solid #eee;}
.result table th{border-bottom: 1px solid #ccc; background: #f9f9f9;}
.result table td{text-align: center;}
.result table tr:last-child td{border-bottom: 0;}

.result .btn{margin-top: 20px; cursor: pointer;}

/* 개강일정 */
.month{width: 100%; margin-bottom: 70px;}
.month:last-child{ margin-bottom: 0;}
.month thead th{border-top: 1px solid; border-bottom: 2px solid; padding: 10px 0;}
.month tbody td{position: relative; border: 1px solid #eee; border-top: 0; border-left: 0; height: 130px; text-align: right; padding: 15px; font-size: 14px; vertical-align: top;}
.month tbody td:first-child i{color: rgba(242,9,69,0.7);}
.month tbody td:last-child{border-right: 0;}
.month tbody td i{position: absolute; top: 10px; left: 10px; color: rgba(0,0,0,0.5); font-weight: 300; font-size: 13px;}
.month tbody td div{padding-top: 7px;}
.month tbody td span{display: inline-block; border-radius: 30px; width: fit-content; color: #fff; padding: 2px 10px; font-size: 12px; letter-spacing: 0; height: 17px;}
.month tbody td em{display: block; padding: 2px 0; height: auto;}
.month tbody td span.start{background: #6dc7d3;}
.month tbody td span.special{background: #f07c8a;}
.month tbody td span.end{background: #555;}
.month tbody td span.etc{background: #8b9acb;}
.month tbody td .small{font-size: 12px; color: #888;}

/* map */
.map{font-size: 18px; font-weight: 500; color: #333;}
.map .adress{font-size: 24px; font-weight: 800; padding: 30px 0 10px; border-bottom: 1px solid #ccc; text-align: center;}
.map .info{padding: 20px 30px;}
.map .info div{padding-top: 10px;}
.map .info p{padding-left: 85px; line-height: 1.5;}
.map .info p strong{color: #000;}
.map .info p em{display: inline-block; width: 50px; margin-left: -90px; padding: 2px 15px; color: #fff !important; border-radius: 50px; text-align: center; font-size: 14px; margin-right: 6px;}
.map .info .black{background: #000;}
.map .info .line{border: 1px solid; color: #000 !important;}
.map .info .blue{background: #0066ff;}
.map .info .green{background: #1aad1a;}
.map .info .red{background: #c72422;}

/* 시설 안내 */
.facility{position: relative;}
.facility .btn{position: absolute; top: 0; right: 0; font-size: 16px; border-radius: 5px; padding: 5px 15px;}
.facility div{width: 980px; height: 500px;}
.facility img{width: 100%; height: 100%;}
.facility_thumbnail{overflow: hidden; margin-top: 20px;}
.facility_thumbnail li{float: left; margin-left: 1%; width: 19.2%; text-align: center; cursor: pointer;}
.facility_thumbnail li:first-child{margin: 0;}
.facility_thumbnail li img{width: 100%; height: 96px;}
.facility_thumbnail li .txt{padding-top: 5px;}

/* 사이트맵 */
.sitemap{width: 100%; height: 100%; background: #fff;}
.popLayerTop .tit{font-weight: 900; font-size: 40px; text-align: center; padding: 50px 0 20px; border-bottom: 1px solid #eee; position: relative; width: 1200px; margin: 0 auto;}
.sitemap .closeX{right: 20px; position: absolute; top: 40px; font-weight: 300; font-size: 50px; cursor: pointer;}
.sitemap .all{display: flex; width: 1200px; margin: 0 auto; padding-top: 30px;}
.sitemap .all > div{padding: 20px; width: 16%; font-size: 17px;}
.sitemap .all > div strong,
.sitemap .all > div a{display: block;}
.sitemap .all > div a{width: fit-content;}
.sitemap .all > div strong{border-bottom: 1px solid; padding: 10px 0; font-size: 20px; margin-bottom: 12px; font-weight: 800; color: #000;}
.sitemap .all > div > p,
.sitemap .all > div > a{padding: 5px; font-weight: 600;}
.sitemap .all .depth{font-size: 15px; padding: 2px 10px 15px;}
.sitemap .all .depth a{color: #777; padding: 2px 0;}
.sitemap .all .depth p{padding-bottom: 10px;}
.sitemap .all .depth p:first-child{padding-top: 3px;}

/* 학원 소개 */
.introduce{position: relative;}
.introduce .con1 .tit{padding-top: 20px !important}
.introduce .tit{padding: 80px 0 20px !important;}
.introduce .step{overflow: hidden;}
.introduce .step li{display: inline-block; margin-left: 2px; border: 1px solid #dbdbdb;}
.introduce .step li:first-child{margin-left: 0;}
.introduce .sig{padding: 0 0 1em; overflow: hidden;}
.introduce .sig li{margin-left: 6px; float: left;}
.introduce .sig li:first-child{margin-left: 0;}
.introduce .sig li img{border: 1px solid #dbdbdb;}

.introduce .point{position: relative;}
.introduce .point p{margin: 15px 0 0; border: 1px solid #dbdbdb; padding: 20px 80px;}
.introduce .point p img{margin-top: 0 !important; width: unset !important;}

.introduce .acad{padding-bottom: 0.7em;}
.introduce .acad li{width: 33%; display: inline-block;}
.introduce .graph{border: 1px solid #dbdbdb; padding: 30px 110px; margin-bottom: 30px;}

.introduce .sec_sub{position: relative; font-size: 1.2rem; color: #000; padding: 1rem 0 0.5rem; font-weight: 700; letter-spacing: -1px; display: block;}
.introduce .sec_txt{position: relative; font-size: 1rem; color: #56595d; letter-spacing: -0.5px;}
.introduce .align_side{overflow: hidden; padding: 1rem 0;}
.introduce .align_side li{display: inline-block; width: 49%;}
.round img {border-radius: 0.625rem;}

.btmbnr{background: linear-gradient(140deg, #01b9be 10%, #0b53f8, #002488); text-align: center; padding: 60px 0;}
.btmbnr img{width: 60%;}