@charset "utf-8";
*{font-family: 'Pretendard'; font-weight:500;}
.sc01{overflow:hidden;  border-radius:0 24px 24px 0; position:relative; max-width:1720px; margin:0 auto}
.sc01 .main-sl-list{width:100%; height:390px;  max-width:1720px;}
.sc01 .main-sl-itm{width:100%; height:100%;}
.sc01 .main-sl-itm img{width:100%; height:100%; object-fit:cover;}
.sc01 .main-sl-tt{position:absolute; top:50%; left:50%; transform:translate(-50% , -50%); max-width:755px; text-align:center; z-index:3;}
.sc01 .main-sl-tt p{font-size:45px; color:#fff; line-height:1.3;}
.sc01 .main-sl-tt span{font-size:20px; color:#fff; display:block; margin:30px 0; font-weight:400;}
.sc01 .main-sl-pager{display:flex; align-items:center; gap:40px;     justify-content: center;}
.sc01 .main-sl-pager > ul{display:flex; gap:24px;}
.sc01 .main-sl-pager .play-button { position: relative;width: 40px;height: 40px;cursor: pointer;}
.sc01 .main-sl-pager .play-button svg {overflow:visible;}
.sc01 .main-sl-pager .progress-ring circle {fill: none;stroke: rgba(255, 255, 255, 0.5);stroke-width: 2;}
.sc01 .main-sl-pager .progress-ring .progress {stroke: #fff;stroke-width: 2;stroke-linecap: round;stroke-dasharray: 188; stroke-dashoffset: 188; transition: stroke-dashoffset linear;}
.sc01 .main-sl-pager .play-icon {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%); width: 11px;height: 13px;background: white;clip-path: polygon(0% 0%, 100% 50%, 0% 100%);}
.sc01 .main-sl-pager .paused .progress {transition: none;}
.sc01 .pagination_bullet{display:flex; gap:10px;}
.sc01 .swiper-pagination-bullet{background:#fff; opacity:.5; width:10px; height:10px;}
.sc01 .swiper-pagination-bullet-active{background:#fff; opacity:1;}

.colBox{display:flex; margin-top: -312px; z-index:2; position:relative; margin-bottom:50px;}
.sc02{max-width:430px;}
.lf-info-box{padding:30px 20px 20px 20px; background:#163298; border-radius:50px 24px 24px 24px; margin-bottom:13px;}
.lf-info-box .go-to-box01 h3{font-size:24px; font-family:'Gmarket'; color:#fff; margin-bottom:16px;}
.lf-info-box .go-to-box01 > div{display:flex; gap:14px; margin-bottom:30px;}
.lf-info-box .go-to-box01 a{width:calc((100% - 28px) / 3); display:flex; height:95px; flex-direction:column; gap:10px; align-items:center; justify-content:center; border:1px solid rgba(255,255,255,.4); border-radius:12px;}
.lf-info-box .go-to-box01 a:hover{background:#00145f;}
.lf-info-box .go-to-box01 a span{color:#fff; font-size:18px; font-weight:600; word-break: keep-all; text-align:center;}
.lf-info-box .go-to-box02{display:flex; gap:0; flex-wrap:wrap; gap:0 5px;}
.lf-info-box .go-to-box02 a{display:block; padding-right:35px; position:relative; width:calc((100% - 5px) / 2); padding-left:15px; padding-top:16px; padding-bottom:16px; border-top:1px solid rgba(255,255,255,.4);}
.lf-info-box .go-to-box02 span{ font-size:20px;
font-weight:600; color:#fff; z-index:2; position:relative;}
.lf-info-box .go-to-box02 a:hover{border-top:none}
.lf-info-box .go-to-box02 a:before{content:""; display:none; width:105%; height:100%; background:#00145f; position:absolute; left:0; top:0; border-radius:0 30px 30px 0; z-index:0;}
.lf-info-box .go-to-box02 a:after{transition:all .3s; content:""; display:block; width:10px; height:16px; background:url(/resources/custom/images/edu/main/ico-arrow.png); position:absolute; top:18px; right:18px; }
.lf-info-box .go-to-box02 a:hover:before{display:block;}
.lf-info-box .go-to-box02 a:hover:after{transform:translateX(10px);}
.lf-info-box .account-box{padding:30px 12px 20px 20px; background:#fff; border-radius:30px;}
.lf-info-box .account-box h3{font-family:'Gmarket'; color:#001973; font-size:20px; margin-bottom:10px; position:relative;}
.lf-info-box .account-box h3:after{content:""; display:block; width:40%; max-width:90px; height:1px; background:#060606; position:absolute; right:0; top:50%; transform:translateY(-50%);}
.lf-info-box .account-box h5 .t1{font-size:22px; font-weight:600; color:#000000; padding:0 4px;}
.lf-info-box .account-box h5 .t2{font-size:16px; font-weight:600; color:#777777;}
.lf-info-box .account-box p{color:#000000; font-size:30px; font-weight:bold; margin-top:10px; text-align:center;}

.qk-list-box{border:1px solid #c6c6c6; padding:0 20px; background:#fff;}
.qk-list-box h3{width:100%; max-width:305px; margin:0 auto; padding:12px; border-radius:0 0 24px 24px; background:#163298; color:#fff; font-family:'Gmarket'; font-size:20px; font-weight:300; text-align:center;}
.qk-list-box h3 span{color:#fff; font-family:'Gmarket';}
.qk-list{display:flex; flex-wrap:wrap; justify-content: center;}
.qk-list a{display:flex; align-items:center; padding:30px 15px; gap:0 10px;  position:relative; border-top:1px solid #c6c6c6;}
.qk-list a:nth-child(1), .qk-list a:nth-child(2), .qk-list a:nth-child(3){border-top:none;}
.qk-list a:nth-child(2):after, .qk-list a:nth-child(3):after, .qk-list a:nth-child(5):after, .qk-list a:nth-child(7):after{content:""; display:block; width:1px; height:37px; left:0; background:#c6c6c6; position:absolute; top:50%; transform:translateY(-50%);}
.qk-list a span{color:#464646; font-weight:500; position:relative;}
.qk-list a span:after{content:""; display:block; width:30px; height:30px; background:#e8fff7; position:absolute; top:-15px;; left:15px; transition: all .3s; transform:scale(0);
border-radius:30px; z-index:-1;}
.qk-list a img{ transition: transform 0.1s ease-in-out;}
.qk-list a:hover img{transform:scale(1.1);}

.col02{width:calc(100% - 430px); padding-left:35px;}
.sc03{max-width:490px; margin-left:auto;}
.popup-sl-area {width:100%; border-radius:24px; overflow:hidden; box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); background:#fff;}
.pop-sl-hd{padding:20px 20px 40px 20px; background:#fff; display:flex; justify-content:space-between;}
.pop-sl-hd h3{font-family:'Gmarket'; font-size:20px; color:#222;}
.pop-sl-pager-box{display:flex; gap:14px;}
.pop-sl-info{display:flex; gap:2px;}
.pop-sl-info span{font-weight:bold; font-size:18px; color:#222222;}
.pop-sl-pager{display:flex; gap:10px; align-items:center;}
.pop-sl-wrap{width:100%; height:300px; border-radius:24px 24px 0 0; margin-top:-20px; overflow:hidden;}
.pop-sl-list{width:100%; height:100%;}
.pop-sl-list .pop-sl-itm{width:100%; height:100%;}
.pop-sl-list .pop-sl-itm a{display:block; width:100%; height:100%;}
.pop-sl-list .pop-sl-itm a img{width:100%; height:100%; object-fit:cover;}

.sc04 h3{font-size:35px; display:inline-block; vertical-align:middle; position:relative; margin-right:50px;}
.sc04 h3 strong{font-weight:bold;}
.sc04 h3:after{content:""; display:block; width:16px; height:16px; background:#6889ff; position:absolute; right:-5px; top:-3px; border-radius:30px; z-index:-1;}
.noti-more{position:relative; padding-right:26px; padding-bottom:6px; display:inline-block; vertical-align:middle;}
.noti-more:before{display:block; content:""; width:100%; height:1px; background:#090909; position:absolute; left:0; bottom:0;}
.noti-more:after{transition:all .3s; display:block; content:""; width:13px; height:13px; background:url(/resources/custom/images/edu/main/ico-more.png); right:0; top:0;   position: absolute;}
.noti-more:hover:after{transform:rotate(180deg);}
.noti-list{margin-top:30px; display:flex; flex-wrap:wrap; gap:30px 35px; }
.noti-itm{width:calc((100% - 70px) / 3); border-radius:24px;}
.noti-itm:hover{border:2px solid #003876;}
.noti-itm a{display:block; padding:30px 35px;  background:#f8fbfd;box-shadow: 0 3px 12px rgba(0,0,0,0.16), 0 3px 12px rgba(0,0,0,0.16); border-radius:24px;     overflow: hidden; }
.noti-itm .noti-tit{color:#0d0a0a; font-size:20px; font-weight:bold; white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
.noti-itm .noti-desc{color:#454545; font-weight:600; display: -webkit-box;-webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; 
line-height:1.3; min-height:2.6; margin-top:20px; margin-bottom:30px;}
.noti-itm .noti-date{color:#939393; font-weight:400;}

/*반응형*/
@media all and (max-width:1920px){
		.sc01{margin-left:0;}
}
@media all and (max-width:1480px){
		.sc01 .main-sl-tt{max-width:unset; width:100%;}
		.colBox{margin-top:-50px; flex-wrap:wrap;}
		.sc02{display:flex; gap:30px; width:100%; max-width:unset;}
		.lf-info-box{margin-bottom:0; width:80%}
		.lf-info-box .account-box p{text-align:left;}
		.qk-list-box{width:40%}
		.qk-list a:nth-child(2), .qk-list a:nth-child(3){border-top:1px solid #c6c6c6;}
		.qk-list a:nth-child(2):after, .qk-list a:nth-child(3):after, .qk-list a:nth-child(5):after, .qk-list a:nth-child(7):after{display:none;}
		.qk-list a{width:100%; padding:20px 12px;}
		.qk-list a span br{display:none;}
		.col02{max-width:unset; padding-left:0; display:flex; width:100%; gap:30px; margin-top:50px;}
		.sc03{max-width:unset; margin-left:unset; width:40%;}
		.sc04{width:60%;}
		.noti-list{gap:10px;}
		.noti-itm{width: calc((100% - 20px) / 3);}
		.noti-itm a{padding:30px 20px;}
}
@media all and (max-width:1000px){
		.col02{flex-direction:column;}
		.sc03 , .sc04{width:100%;}
}
@media all and (max-width:800px){
		.sc01 .main-sl-tt p{font-size:36px;}
		.sc01 .main-sl-tt span{margin:10px 0;}
}
@media all and (max-width:767px){
		.lf-info-box .go-to-box01 a span{font-size:16px;}
		.sc02{flex-direction:column;}
		.qk-list-box, .lf-info-box{width:100%;}
		.lf-info-box .account-box h3:after{display:none}
		.lf-info-box .go-to-box02 span{font-size:16px;}
		.noti-itm{width: calc((100% - 10px) / 2);}
		.noti-itm .noti-desc{margin:16px 0;}
}
@media all and (max-width:500px){
		.lf-info-box .go-to-box02 a{padding-left:0;}
		.noti-more{display:block; margin:20px auto 0 auto; max-width:200px;}
		.noti-list{gap:20px 0;}
		.noti-itm{width:100%;}
}

/*애니메이션*/
.animation{transform:translateY(100px); opacity:0; transition:all .5s;}
.animation.active{transform:translateY(0); opacity:1;}
.sc03.animation{transition-delay:.2s;}
.sc04.animation{transition-delay:.4s;}