@charset "utf-8";
/* CSS Document */
body {font-family:'Noto Sans KR', 'sans-serif';}

@font-face {font-family: 'Noto Sans Korean', 'Noto Sans KR', 'sans-serif', "나눔고딕";
	src:url(https://cdn.rawgit.com/theeluwin/NotoSansKR-Hestia/master/stylesheets/NotoSansKR-Hestia.css);
	src:local(※), url(http://www.darakwon.co.kr/css/fonts/NanumGothic.ttf) format('truetype'), url(http://www.darakwon.co.kr/css/fonts/NanumGothic.otf) format('opentype');
}

*, *:before, *:after {box-sizing: inherit;}
img{ border:none; padding:0; margin:0;}
input.radio {width:13px;height:13px; vertical-align:top; padding:0px; margin:0px;}
ul,li, dd, dt, dl{list-style:none; padding:0; margin:0;}
* {font-family:'Noto Sans Korean', 나눔고딕, ng, arial; padding:0; margin:0;}
body {color:#666;font-size:12px;line-height: 1.5;font-family:'Noto Sans Korean',NanumGothic, 나눔고딕, ng, arial;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,textarea,p,blockquote,th,td,input,select,textarea,button{margin:0;padding:0} 
img,fieldset,iframe{border:0 none}
dl,ul,ol,menu,li{list-style:none}
img, input, button, select, textarea {vertical-align:middle;}
button {overflow:visible;margin:0;padding:0;border:none;background:0;vertical-align:middle;cursor:pointer;}
button::-moz-focus-inner,  
input::-moz-focus-inner{border:0;padding:0;}
.blind{display:block;overflow:hidden;*position:absolute;top:0;left:0;width:0;height:0;border:0;background:none;font-size:0;line-height:0;}

.Bar_container {z-index:999; position: fixed; left: 0;  bottom: 0; width: 100%; height:86px; background: #232325; border-top:1px solid #FFF}
.Bar_inner{ display: flex; justify-content: center; width: 798px; height: 100%; margin: 0 auto; padding: 0; box-sizing: border-box;}
.Item_wrapper {position: relative;    padding: 10px 12px 15px;    letter-spacing: -.5px;    background: #fff;    cursor: pointer;}
.Item_wrapper {margin: 0;   padding: 15px 10px 10px;   border-top: 1px solid #000;}
/*.top_btn a {width: 50px;height: 50px;color: #ffffff;position: fixed;z-index: 99999;bottom: 12px;right: 20px;}*/
.top_btn a {width: 50px;height: 50px;color: #ffffff;position: fixed;z-index: 99999;bottom: 99px;right: 41px;}
div.Control {width: 79px;left: 10px;top: 0;position: absolute;}
.top_join1124 {display: inline;height: 25px;line-height: 25px;padding: 0 7px;font-size: 13px;color: #1e75d6;border-radius: 2px;border: 1px solid #1e75d6;float:right;}
.top_lgfind {display: inline;height: 25px;line-height: 25px;padding: 0 7px;font-size: 13px;color: #1e75d6;border-radius: 2px;border: 1px solid #1e75d6;float:right;margin-right:5px;}
.loginform button {background: #1e75d6;padding: 18px 20px;font-size: 16px;border: 0;letter-spacing: 1px;color: #ffffff;cursor: pointer;width: 100%;box-sizing: border-box;font-family: 'Nanum Gothic Bold';margin-top: 22px;text-align:center}
.loginform p {margin: 10px 0 15px 0;}
.loginform table{}
.loginform table th{text-align:center; padding-bottom:10px;}
.loginform table td input {padding: 7px;background: #ffffff;border: 1px solid #e1e1e1;color: #999999;font-family: Arial, Helvetica, sans-serif;margin-top: 8px;width: 100%;height: 43px;box-sizing: border-box;}
.loginform p input {padding: 0 10px;background: #ffffff;border: 1px solid #e1e1e1;color: #999999;font-family: Arial, Helvetica, sans-serif;margin-top: 8px;width: 100%;height: 49px;box-sizing: border-box;}
.loginform .keep_area label {color: #999999;margin-left: 5px;font-size: 14px;}
.loginform .keep_area .ckbox {height: 22px;width: 23px;vertical-align: middle;}
.ban_btm {position: fixed;left: 0;bottom: 0;z-index: 1000;width: 100%;height: 140px;text-align: center;background:url(images/ban_bg.jpg) repeat-y;border-top: 2px solid #fff;}


/*  레이어 */
.wrap_layer_popup {display: none;position: absolute;left: 50%;z-index: 999;padding: 0;background: #fff;padding:30px;}
.wrap_layer_popup .bt_close {position: absolute;top: -42px;right: 0;}
.layer_popup_bg {opacity:0.3; -moz-opacity:0.3;   z-index: 997;}

/* 레이어팝업 */
.layer_popup_bg {position: fixed;top: 0; left: 0; width: 100%; height: 100%; background: url(../images/bg_black_opacity.png); overflow: hidden; z-index: 9999;}
.wrap_layer_popup, .wrap_layer_popup-teacher{position: fixed;top: 50% !important;left: 50% !important;transform: translate(-50%, -50%) !important;z-index: 9999;height: auto;  margin: 0 !important; max-height: 90%; background: #FFF;}
.wrap_layer_popup-teacher{width: 90%; max-width: 330px;}
.wrap_layer_popup{width: 700px; max-width: 90%;}
.wrap_layer_popup .layer_cont, .wrap_layer_popup-teacher .layer_cont{display: flex;}
.wrap_layer_popup .layer_cont .white, .wrap_layer_popup-teacher .layer_cont .white{width: 100%;height: 100%;background-color: #fff;}
.video-container { position: relative; width: 100%;padding-top: 56.25%; height: 0;overflow: hidden;}
.video-container iframe { position: absolute; top: 0;left: 0;width: 100%; height: 100%;}
.teacher-container{position: relative;width: 100%; max-width: 330px; overflow: hidden;}
.w330{max-width: 330px;}
.wrap_layer_popup .bt_layer_close, .wrap_layer_popup-teacher .bt_layer_close{position: absolute; top: -42px; right: 0; width: 42px; height: 42px; z-index: 10000;}
.wrap_layer_popup a, .wrap_layer_popup-teacher a{display: inline-block;}
.wrap_layer_popup .wrap_close, .wrap_layer_popup-teacher .wrap_close{position: absolute;bottom: 45px;right: 0;height: 30px; padding: 0 30px;background: url(../images/black_70.png) repeat;}
.wrap_layer_popup .wrap_close a, .wrap_layer_popup-teacher .wrap_close a{ color: #fff; line-height: 26px; text-decoration: none;}
.wrap_layer_popup .wrap_close img, .wrap_layer_popup-teacher .wrap_close img{vertical-align: middle;}
/* PC-가로폭 강제 고정*/
html, body{min-width:1140px;    overflow-x: auto;}
/* top_header */
.top-navi{display: flex; flex-flow: nowrap; justify-content: space-between; align-items: center; margin:0 auto; width:1100; padding-top: 32px;}
.top-navi h1{width:137px;height:30px;}
.top-navi .util{color:#bfb9b6;}
.top-navi .util a{color:#918a87;text-decoration:none;margin:0 2px;}


/* contents */
.contents{position: relative; /*background-color:#000; min-width:830px;*/ }
#sec01 {background-color: #fe6a4e;}
#sec02 {background-color: #353535;}
#sec03 {background-color:#ffe2de;}
#sec04 {background-color:#fff;}
#sec05-gray {background-color:#eff0f4 }
#sec05-white {background-color:#fff }
#sec06{text-align: center; background: #3A3A42;
background: linear-gradient(0deg,rgba(58, 58, 66, 1) 0%, rgba(88, 88, 101, 1) 100%);}
#sec07{background-color: #fffcf2}
#sec08{background: #FCF2CB;
background: linear-gradient(0deg, rgba(252, 242, 203, 1) 0%, rgba(249, 228, 147, 1) 100%);}
#sec09{background: #FFFF;
background: linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, rgba(252, 242, 203, 1) 100%);}
#sec10{text-align: center;  background: #353535;
background: linear-gradient(90deg,rgba(53, 53, 53, 1) 0%, rgba(188, 81, 61, 1) 100%);}
#sec11{text-align: center; background: #FFA16D;
background: linear-gradient(0deg, rgba(255, 161, 109, 1) 0%, rgba(255, 106, 43, 1) 100%);}
#sec12{text-align: center; background: #FFE1DC;
background: linear-gradient(160deg, rgba(255, 225, 220, 1) 45%, rgba(255, 239, 170, 1) 100%);}

.eventimg{position:relative; max-width:1140px; height:auto; margin:0 auto;}
.eventimg img{height:auto;/*width:100%;*/ margin:0 auto; -webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;}
.eventimg.w850{ max-width:850px!important;}
/*상단 배경*/
.eventtopbg{position: relative; height: 850px; background: #FFD0C8;
background: linear-gradient(0deg, rgba(255, 208, 200, 1) 0%, rgba(255, 254, 252, 1) 100%);}

/*상단 타이틀*/
.pro-title{display: flex; flex-flow: column; max-width: 1140px; gap:25px; margin-top:30px;}
.pro-title img{opacity:0;  z-index: 2}
.tit01{max-width: 489px; animation:titlePop .6s cubic-bezier(.18,1.4,.45,1) forwards;}
.tit02{max-width: 816px; animation:titlePop .6s cubic-bezier(.18,1.4,.45,1) .45s forwards;}
@keyframes titlePop{
    0%{
        opacity:0;
        transform:scale(.6);
    }
    60%{
        opacity:1;
        transform:scale(1.08);
    }
    80%{
        transform:scale(.97);
    }
    100%{
        opacity:1;
        transform:scale(1);
    }
}
/*상단 동전*/
.pro-coin{width:100%; position: absolute; top: 0px; }
.pro-coin img{animation:float 3s ease-in-out infinite; position: absolute;  z-index: 3}
.pro-coin img:nth-child(1){left: 120px; top: 0px; max-width: 144px; animation-delay:0s;}
.pro-coin img:nth-child(2){right: 81px; top:32px; max-width: 97px; animation-delay:.4s; animation-duration:3.8s;}
.pro-coin img:nth-child(3){right: 220px; top:320px;max-width: 71px; animation-delay:.8s; animation-duration:3.3s;}
.pro-coin img:nth-child(4){left:63px; top:380px;max-width: 96px; animation-delay:.2s; animation-duration:4.2s;}
.pro-coin img:nth-child(5){right: 61px; top:460px;max-width: 89px; animation-delay:1s; animation-duration:3.5s;}

@keyframes float{
    0%{
        transform:translateY(0px) rotate(0deg);
    }
    50%{
        transform:translateY(-12px) rotate(4deg);
    }
    100%{
        transform:translateY(0px) rotate(0deg);
    }
}
/*상단 화살표이미지*/
.bg_arrow{position: absolute; top:95px;z-index: 1; left: 50%; transform: translate(-50%, 0);}
.bg_arrow img{ animation: rotate 5s linear infinite;}
@keyframes rotate{
    from{
        transform:rotate(0deg);
    }
    to{
        transform:rotate(360deg);
    }
}
.bg_price{position: absolute; top:15px; z-index: 1; left: 50%; transform: translate(-50%, 0);}

/*sec01*/
.sec01{ display: flex; flex-flow: nowrap;align-items: center; justify-content:space-evenly;}
.sec01 img{margin: 0!important}
.sec01 img:nth-child(1){width: 350px; height:93px}
.sec01 img:nth-child(2){width: 72px;}
.sec01 img:nth-child(3){width: 350px; height:93px}

/*sec02*/
.sec02{display: flex; flex-flow: column; justify-content: center; padding-top: 100px;}
.sec02 img:nth-child(1){width: 818px; }
.paper-wrap{position: relative; height: 650px; width: 100%;}
.paper-wrap img{opacity:0; position: absolute;}
.paper-wrap img:nth-child(1){max-width: 512px; left: 80px; top: 20px; animation:paperPop 5s infinite; z-index:1;}
.paper-wrap img:nth-child(2){max-width: 549px; right: 98px; top: 54px;animation:paperPop 5s .15s infinite;z-index:2;}
.paper-wrap img:nth-child(3){max-width: 539px;left:233px; top:270px;  animation:paperPop 5s .3s infinite;  z-index:3;}
@keyframes paperPop{
	 0%{
        opacity:0;
        transform:translateY(80px) scale(.85);
    }
	8%{
        opacity:1;
        transform:translateY(-12px) scale(1.06);
    }
	12%{
        transform:translateY(5px) scale(.98);
    }
	16%{
        transform:translateY(0) scale(1);
        opacity:1;
    }
	85%{
        opacity:1;
        transform:translateY(0) scale(1);
    }
	100%{
        opacity:0;
        transform:translateY(-20px) scale(.96);
    }
}
.youtube_sample { position: absolute; top:0%;width: 62%;margin:0 19%; padding:35% 0 0 0;}

/*sec03*/
.sec03{display: flex; flex-flow: column; justify-content: center; align-items: center; padding-top: 100px; padding-bottom: 120px;}
.benefit01{ /*max-width: 1079px;*/ position: relative}
.benefit01 span{width:139px; height:138px; position: absolute; top:2px; left:125px; transform-origin:center center; animation:badgeWiggle 2.2s ease-in-out infinite;}
.benefit03 {text-align: center;}
.benefit03tit{/*max-width:442px;*/ }
.benefit03 > ul{display: flex; flex-flow: nowrap;  gap:13px; width: 1140px;}
.benefit03 > ul > li{border: 3px solid #ff9460; border-radius:20px; background-color: #FFF; overflow: hidden; padding:40px 0 0;  flex:1; box-shadow:0 8px 20px rgba(255,209,190,1);} 
.benefit03 > ul > li > strong{color: #000; font-size: clamp(15px, 3.8vw, 33px); letter-spacing: -0.07rem; font-weight: 800;}
.benefit03 > ul > li > p{color: #6d6e71; font-size: clamp(15px, 3.8vw, 28px); letter-spacing: -0.07rem; font-weight: 500;}
.benefit03 > ul > li > p span.line{text-decoration: line-through;  font-weight: 400;}
.benefit03 > ul > li > p span.red{color:#ff5c3d;  font-weight: 600;}
@keyframes badgeWiggle{
    0%,100%{
        transform:rotate(0deg);
    }
    15%{
        transform:rotate(-6deg);
    }
    30%{
        transform:rotate(5deg);
    }
    45%{
        transform:rotate(-4deg);
    }
    60%{
        transform:rotate(3deg);
    }
    75%{
        transform:rotate(-2deg);
    }
    90%{
        transform:rotate(1deg);
    }
}

/*sec04*/
.sec04{text-align: center}
.paybox-tit{/*max-width: 546px;*/}
.paybox-wrap{position: relative;width: 97%;max-width: 830px; background-color: #FFF; margin: 0 auto 120px;border: 3px solid #ff5600;border-radius:15px; letter-spacing: -0.03rem; overflow:hidden}
.paybox-top{background-color: #ff5c3d; color: #FFF;  font-size: clamp(23px, 5vw, 35px);  text-align: center; letter-spacing: -0.07rem; padding: 20px 0px; font-weight: 400;}
.paybox-top strong{font-weight: 800;}
.paybox-top span{border-radius: 30px; font-size:30px; background-color: #7f2e1e; padding: 10px 15px;}
.paybox-wrap ul{width: 92%; margin:0 auto;}
.paybox-wrap ul li.line{border-bottom: 1px dashed #b2b2b4; text-align: center; padding:30px 0 15px;  background-color: #f7f7f8; border-top-left-radius: 15px;  border-top-right-radius: 15px; }
.paybox-wrap ul li.line h3{font-size: 23px; font-weight: 400;}
.total-wrap .total-box{display: flex; flex-flow: nowrap; justify-content:center; align-items:center}
.total-wrap .total-box .num{color: #adadad; font-size: 32px; text-align: right; position: relative}
.total-wrap .total-box .num .arrow-line{ position:absolute;  top:22px; right:-70px; height:2px; width:115%; background:#999;}
.total-wrap .total-box .num .arrow{position:absolute; right:-150px; top:22px;width:80px; height:2px; background:#999; transform:rotate(130deg);  transform-origin:left center;}
/* 화살표 머리 */
.total-wrap .total-box .num .arrow::after{content:""; position:absolute; right:-1px; top:-5px; width:10px; height:10px; border-right:2px solid #999; border-bottom:2px solid #999;
	transform:rotate(-45deg);}

.total-wrap .total-box .num > p{color: #000; font-size: 48px; font-weight: 600;}
.total-wrap .total-box .num > p strong{font-size: 55px; font-weight:600;}
.total-wrap .total-box .total{color:#ff5c3d;   font-size: clamp(45px, 8vw, 50px); font-weight: 900; margin-left: 90px;}
.total-wrap .total-box .total strong{font-size: 100px;}
.paybox-wrap .book-wrap{  background-color: #f7f7f8; border-bottom-left-radius: 15px;  border-bottom-right-radius: 15px; }
.paybox-wrap .book-wrap .select_book{display: flex; flex-flow: row; width: 100%; padding:20px 0; column-gap:5px; justify-content:space-evenly; }
.paybox-wrap .book-wrap .select_book .bookimg img{width: 100%; max-width: 86px;}
.paybox-wrap .book-wrap .select_book label{text-align: center!important; font-size: clamp(13px, 3.5vw, 22px); font-weight:600; color: #000; line-height: 1.2}
.paybox-wrap .book-wrap .select_book input[type=checkbox]{width: 24px; height: 24px; margin: 5px;}
.bkselect{display: flex; flex-flow: column;  align-items: center;}
.paybox-wrap ul li p.info{text-align: right; font-size: clamp(9px, 2.2vw, 13px); color: #a3a3a3; padding: 5px 0;}
.paybox-wrap .pkgbuy a{box-sizing: border-box; background-color: #000; color: #FFF; display: block; width: 92%; margin:30px auto; border-radius: 13px; padding: 20px 0; text-align: center; font-size: clamp(18px, 5vw, 38px);  font-weight: 900; letter-spacing: 0.1rem;box-shadow:6px 6px 10px rgba(0,0,0,0.2); position: relative}
.paybox-wrap .pkgbuy a::after{content: ' '; position: absolute; padding-left:20px; width: 28px; height: 28px; top:50%; transform: translate(0, -50%); background: url("../images/arrow.png") no-repeat 10px 0px; background-size: 18px; 28px;}

/*sec05*/
.sec05{padding-bottom:5%;}
.sec05tit-bg{background:#ff5c3d; height:300px;
    clip-path:polygon(
        0 0,
        100% 0,
        100% 40%,
        50% 100%,
        0 40%
    );
}

.inner{max-width:1100px; margin:0 auto; text-align:center; padding-top:100px;  color:#fff;}
/*탭*/
.lec_tab.top1{top: 18.6%;}
.lec_tab.top2{top: 21%;}
.lec_tab {position: absolute;width:90%; left: 50%;max-width: 850px;margin: 0 auto;box-sizing: border-box;transform: translate(-50%, 0);}
.lec_tab .tab_type1{width: 100%; height: 100%; display: flex; align-items: center;justify-content: space-around; flex-flow: nowrap; column-gap:8px; }
.lec_tab .tab_type1 li{ width: 100%;  height: 100%; display: flex; align-items: center; justify-content: center; font-size: clamp(14px, 4vw, 34px); color: #FFF; font-weight: 900;cursor: pointer; padding: 1.1%; background: #CACACC;
background: linear-gradient(300deg,rgba(202, 202, 204, 1) 0%, rgba(213, 213, 214, 1) 100%);}
.tab_type1 li.on{box-shadow:5px 5px 7px rgba(0,0,0,0.1); background: #FF5C3D;
background: linear-gradient(300deg,rgba(255, 92, 61, 1) 0%, rgba(255, 134, 111, 1) 100%);color: #fff;font-weight:900;}
/*급수별 강사 + 샘플링크*/
.box1{position: absolute; width:100%; height: auto; top:26%; left: 50%; transform: translate(-50%, 0); }
.box1 .box-inner{position: relative;    width:100%;    height:auto; line-height: 0;}
.box1 .box-inner .teacher-wrap{position: absolute; width: 13%; top:8.2%; left: 53%;}
.box1 .sample-wrap{position: absolute; width: 66.3%;  top: 13.7%; left:31.6%; }
.box1 a.sample_list{width:100%;   display: block} 

.box1 .sample-btn{position: absolute; width: 5%; max-width: 50px;}
.box1 .sample-btn.hsk3-sample1{top:60.5%; left: 37.8%;}
.box1 .sample-btn.hsk3-sample2{top:60.5%; left: 79.5%;}
.box1 .sample-btn.hsk3-sample3{top:70.9%; left: 26.4%;}
.box1 .sample-btn.hsk3-sample4{top:70.9%; left: 83.1%;}
.box1 .sample-btn.hsk3-sample5{top:74.8%; left: 39%;}
.box1 .sample-btn.hsk3-sample6{top:74.8%; left: 83.9%;}
.box1 .sample-btn.hsk3-sample7{top:84.4%; left: 35.9%;}

.box1 .sample-btn.hsk4-sample1{top:60.5%; left: 37.8%;}
.box1 .sample-btn.hsk4-sample2{top:60.5%; left: 79.5%;}
.box1 .sample-btn.hsk4-sample3{top:70.9%; left: 26.4%;}
.box1 .sample-btn.hsk4-sample4{top:70.9%; left: 83.1%;}
.box1 .sample-btn.hsk4-sample5{top:74.8%; left: 39%;}
.box1 .sample-btn.hsk4-sample6{top:74.8%; left: 83.9%;}
.box1 .sample-btn.hsk4-sample7{top:84.4%; left: 37.3%;}

.box1 .sample-btn.hsk5-sample1{top:60.5%; left: 38.5%;}
.box1 .sample-btn.hsk5-sample2{top:60.5%; left: 89.8%;}
.box1 .sample-btn.hsk5-sample3{top:70.9%; left: 26.4%;}
.box1 .sample-btn.hsk5-sample4{top:70.9%; left: 79.3%;}
.box1 .sample-btn.hsk5-sample5{top:74.8%; left: 39.2%;}
.box1 .sample-btn.hsk5-sample7{top:84.4%; left: 37.3%;}

.box1 .sample-btn.hsk6-sample1{top:60.5%; left: 37.8%;}
.box1 .sample-btn.hsk6-sample2{top:60.5%; left: 91.5%;}
.box1 .sample-btn.hsk6-sample3{top:70.9%; left: 26.4%;}
.box1 .sample-btn.hsk6-sample4{top:70.9%; left: 83.1%;}
.box1 .sample-btn.hsk6-sample5{top:74.8%; left: 39%;}
.box1 .sample-btn.hsk6-sample6{top:74.8%; left: 83.9%;}
.box1 .sample-btn.hsk6-sample7{top:84.4%; left: 37.3%;}



/*sec07*/
.sec07{text-align: center; }
#sec07 .down{display: flex; flex-flow: nowrap; align-items: center; justify-content: center; padding-bottom: 10%; }
#sec07 .down .downbtn-wrap{border: 2px solid #ff5c3d; background: #FFF; border-radius: 15px; position: relative; width: 100%; max-width: 550px;}
#sec07 .down .downbtn-wrap .downtit{position: absolute; top:-25px; left:50%; transform: translate(-50%, 0); background: #ff5c3d; border-radius:35px; font-size: 28px; letter-spacing: -0.08rem; font-weight: 600; color: #FFF; padding: 5px 30px; width:60%; text-align: center}
#sec07 .down .downbtn-wrap .info-pdf{font-size: 16px; position: absolute; right: 0; padding-top: 10px}
.downbtn-box .hsk-tabs{display: flex; flex-flow: nowrap;  gap:1.5%; width:94%; margin:70px auto 30px;}
.downbtn-box .hsk-tabs li.tab {position: relative; width: 100%;  padding: 1.5% 0%; text-align: center;  border-radius: 10px;  font-size: clamp(18px, 4.2vw, 30px); background: #F4F2F1;
background: linear-gradient(160deg, rgba(244, 242, 241, 1) 45%, rgba(222, 222, 233, 1) 100%); box-shadow:3px 3px 7px rgba(0,0,0,0.05);  color: #000;  font-weight:900; cursor: pointer}
.downbtn-box .hsk-tabs li.tab.active {background: #230b53;}
/* 체크 아이콘(기본 숨김) */
.downbtn-box .hsk-tabs li.tab::before{
    content:"";
    position:absolute;
    top:-28px;
    left:50%;
    transform:translateX(-50%) scale(0);
    width:38px;
    height:38px;
    background:url("../images/check.png") no-repeat center/contain;
    opacity:0;
    transition:.25s ease;
}

/* 마우스 올렸을 때 */
.downbtn-box .hsk-tabs li.tab:hover::before{
    transform:translateX(-50%) scale(1);
    opacity:1;
}

/* 선택되었을 때 */
.downbtn-box .hsk-tabs li.tab.active{
    background:#e1e1ea;
}

.downbtn-box .hsk-tabs li.tab.active::before{
    transform:translateX(-50%) scale(1);
    opacity:1;
}

/*sec08*/
.sec08{text-align: center; position: relative}
.sec08 .trophy{position: absolute; width:129px; height:139px; left: 73%; top: 38%;   animation: trophyFloat 3s ease-in-out infinite; }
@keyframes trophyFloat {
    0%{
        transform: translateY(0);
    }
    50%{
        transform: translateY(-12px);
    }
    100%{
        transform: translateY(0);
    }
}
/* ----- 리뷰 슬라이드----- */
.record_item {display: inline-block; max-width:330px; width: 33%; max-height:414px;}
.record_item > img{width: 100%;}
.swiper-slide {flex-shrink: 0;  width: 100%;/*height: 100%;*/   transition-property: transform}
.rolling_card_swiper .swiper-wrapper:hover .swiper-slide {animation-play-state: paused;}
.rolling_card_swiper .swiper-slide {width: auto;}
.rolling_card_swiper .swiper-slide:first-child {
		-webkit-animation: rolling_card_ltr 25s linear 1s infinite;
		animation: rolling_card_ltr 25s linear 1s infinite;
	}
.rolling_card_swiper .swiper-slide:first-child {
		animation-duration: 30s;
	}
 .rolling_card_swiper .swiper-slide:first-child {
		will-change: transform;
	}

        /* ----- animation ----- */
        @-webkit-keyframes rolling_card_ltr {
            100% {
                margin-left: calc(var(--rolling-card-width) * -1);
            }
        }

        @keyframes rolling_card_ltr {
            100% {
                margin-left: calc(var(--rolling-card-width) * -1);
            }
        }

        @-webkit-keyframes rolling_card_ltr {
            100% {
                transform: translateX(calc(var(--rolling-card-width) * -1));
            }
        }

        @keyframes rolling_card_ltr {
            100% {
                transform: translateX(calc(var(--rolling-card-width) * -1));
            }
        }

        :root {
            --rolling-card-width: 1195px;
        }

        /* ----- swiper-wrapper ----- */
        .swiper-wrapper {width: 100%; /*height: 100%;*/ padding-bottom: 10%;  display: flex; transition-property: transform;  box-sizing: content-box}
        .swiper-wrapper {
			transform: translate3d(0px, 0, 0)
        }
        .swiper-container {overflow: hidden;  list-style: none; padding: 0;}



/*sec11*/
.sec11{padding-bottom:8%;}
.offer-list-wrap{max-width:1140px; margin:0 auto; display:grid;  grid-template-columns:repeat(6,1fr);  gap:12px;}

.offer-list-wrap .offer-list{background:#f2573b; border-radius:25px; padding:22px 40px;  color:#fff;  box-sizing:border-box;}
.offer-list-wrap .offer-list{grid-column:span 2; text-align: left; letter-spacing: -0.05rem;}
.offer-list-wrap .offer-list span{display:inline; color:#fffb8a; font-size:19px; line-height:1.2;}
.offer-list-wrap .offer-list strong{display:block; font-size:29px; font-weight:700; line-height:1.2;}
.offer-list-wrap .offer-list em{display:inline-block; padding:3px 10px; margin-right:3px; border-radius:30px; background:#fffb8a;  color:#f2573b; font-style:normal;
    font-size:16px;font-weight:500; margin-bottom:8px;}
/* 마지막 두 개 가운데 정렬 */
.offer-list-wrap .offer-list:nth-child(7){grid-column:2 / span 2;}
.offer-list-wrap .offer-list:nth-child(8){grid-column:4 / span 2;}



/* 유의사항 */
.evt_foot{position:relative; width:100%; margin:0 auto; text-align:left; background-color:#fff; padding-top:60px; }
.evt_foot .f_tab{width:90%; max-width: 940px;  margin:0 auto; display: flex; column-gap: .3rem; justify-content:flex-start; align-items: center;  position:relative;}
.evt_foot .f_tab .tab1, .evt_foot .f_tab .tab2{width:40%; max-width:10rem; min-width:8.5rem}
.evt_foot .f_tab .tab1 a, .evt_foot .f_tab .tab2 a{background-color: #a8a8a8; color: #fff; text-align: center; display: block; width: 100%; box-sizing: border-box; padding:.5rem; font-size: 1.25rem; cursor: pointer; border-radius: 25px;font-weight: 700; }
.evt_foot .f_tab a:hover, .evt_foot .f_tab a.selected{background-color: #e15840; color:#fff; }
.evt_foot .f_tab .event_btn{position:relative; margin:10px 0; float:right;}

.evt_foot .footertext {position:relative;box-sizing: border-box; font-size:0.9rem; letter-spacing: -0.03rem; margin:0 auto; max-width:940px; width:90%; padding: 1rem 0 5rem; color:#868686;}
.evt_foot .footertext a{ color:#0000ff;}
.evt_foot .footertext a.link1{ color:#000;}
.evt_foot .footertext .tit{ font-size:1.0rem;font-weight: 700; display:block; color:#e15840; padding-bottom:5px; border-bottom:2px solid #f0e6e5}
.evt_foot .footertext .tit2{ font-size:1rem;font-weight:600; display:block;color:#e15840; padding-bottom:5px; }
.evt_foot .footertext strong{ font-size:.95rem; color: #2f2f2f;}
.evt_foot .q_list{position:relative; margin:0 auto; width:960px;}
.evt_foot .q_list div.q_txt{ padding-bottom:5px; cursor:pointer;}
.evt_foot .q_list div.a_txt{ font-size:0.9rem; color:#FFF; box-sizing: border-box; padding:5px 30px 15px 30px;}
.evt_foot .q_list div.a_txt a{font-size:0.9rem; color:#57c1e9; text-decoration:underline; }
.evt_foot .f_tab .event_btn{position:relative; margin:10px 0; float:right;}

.evt_foot .footertext table{width:70%;  margin-top: 10px; color: #585757;background-color: #fff;}
.evt_foot .footertext table th{text-align: center; padding:8px 3px; background-color: #909090;border-bottom: 1px solid #d0d0d0; border-left: 1px solid #d0d0d0; border-top:1px solid #d0d0d0;color: #fff;}
.evt_foot .footertext table th.last{ border-right: 1px solid #d0d0d0;}
.evt_foot .footertext table td{text-align: center; padding:8px 3px;  border-bottom: 1px solid #d0d0d0; border-left: 1px solid #d0d0d0;}
.evt_foot .footertext table td.last{ border-right: 1px solid #d0d0d0;}

/*혜택 열고 닫기*/
.present_wrap{border-top: 1px solid #d8d8da; border-bottom: 1px solid #d8d8da; margin: 0 auto; padding: 12px 0px; margin-top: 5px; margin-bottom: 18px;}
.present_wrap .guide_txt{padding-top: 30px;}
.present_wrap .guide_txt p{color: #b9b9b9; font-size: 14px; padding: 3px 0px;}
.present_wrap .guide_txt p strong{color: #9a9a9a;}
.present_wrap .guide a img{max-width: 185px; width: 33%;}
.present_wrap .guide.lec a img{max-width:315px!important; width:80%!important;}
.lectureguide_btn {display: inline-block; font-size:clamp(11.5px, 2.4vw, 14px); letter-spacing: -0.07rem;  font-weight:500; color: #ababab!important;  cursor: pointer;  position: relative;}
.lectureguide_btn::after {content: "▼"; margin-left: 8px;}
.lectureguide_btn.open::after {content: "▲";}
.alert_icon {display: inline-flex; width:16px; height:16px; border-radius: 50%; background: #d0d0d0; color: #fff; font-size:10px; font-weight: bold; align-items: center;   justify-content: center; margin-right: 6px;  vertical-align: middle;}


.login_tit_sns.agree_tit {margin-bottom:13px;  margin-top:30px;}
.login_tit_sns {display: block;width: 300px;margin:0 auto;color: #999;text-align: center;position: relative;font-size: 15px;}
.login_tit_sns::before, .login_tit_sns::after {position: absolute;  content: "";  display: inline-block;  width: 36%;  height: 1px;  background-color: #ccc;  top: 50%;}
.login_tit_sns::before {left: 0;}
.login_tit_sns::after {right: 0;}
.join_sns{width: 300px;margin:0 auto;padding-bottom: 15px}
span.Error{font-size: 12px; display: block;  padding-left:0px; letter-spacing: -0.3px;  color: red;  margin-top: 2px;  margin-left: 0px; text-align: left;}

#footer{padding-bottom: 90px;}