@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');
}


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: #110705; 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;}
.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;}

/*  레이어 */
.wrap_layer_popup {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;}
.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:#dededd;text-decoration:none;margin:0 2px;}


/* contents */
.contents{position: relative; /*background-color:#000; min-width:830px;*/ }
#sec01 {background-color: #ff3b16;}
#sec02 {background: #FFC0B5;
background: linear-gradient(0deg,rgba(255, 192, 181, 1) 0%, rgba(255, 217, 210, 1) 50%, rgba(255, 253, 252, 1) 100%);}
#sec03 {background-color:#ff;}
#sec04-gray {background-color:#eaedf0 }
#sec04-white {background-color:#fff }
#sec05{text-align: center; background: #FFEFA5;
background: linear-gradient(338deg,rgba(255, 239, 165, 1) 0%, rgba(255, 211, 203, 1) 57%);}
#sec06{background: #363535;
background: linear-gradient(90deg,rgba(54, 53, 53, 1) 0%, rgba(179, 80, 60, 1) 100%);}

.mb90{margin-bottom: 90px;}
.eventimg{position:relative; max-width:900px; 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: 1050px; background: #941205;
background: linear-gradient(0deg,rgba(148, 18, 5, 1) 0%, rgba(17, 7, 5, 1) 30%);}

/*상단 타이틀*/
.pro-title{display: flex; flex-flow: column; max-width:900px;  margin-top:30px;}
.pro-title img{opacity:0;  z-index: 2}
.tit01{max-width: 900px; animation:titlePop .6s cubic-bezier(.18,1.4,.45,1) forwards;}
.tit02{max-width: 900px; animation:titlePop .6s cubic-bezier(.18,1.4,.45,1) .3s forwards;}
.tit03{max-width: 900px; animation:titlePop .6s cubic-bezier(.18,1.4,.45,1) .6s 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);
    }
}
.warning-wrap {position: relative;}
.warning-box {display: flex; justify-content: center; gap: 15px; margin: 0;  padding: 0;}
.warning-box li { flex: 1;  opacity: 0;  transform: scale(0.7);}
.warning-box li img {display: block;  width: 100%;}
.warning-wrap.is-active .warning-box li {animation: warningPop 1.2s ease-out forwards;}
.warning-wrap.is-active .warning-box li:nth-child(1) {animation-delay: 0s;}
.warning-wrap.is-active .warning-box li:nth-child(2) {animation-delay: 0.2s;}
.warning-wrap.is-active .warning-box li:nth-child(3) {animation-delay: 0.4s;}

@keyframes warningPop {
    0% {
        opacity: 0;
        transform: scale(0.7);
    }
    15% {
        opacity: 1;
        transform: scale(1.08);
    }
    25% {
        transform: scale(1) rotate(0);
    }
    /* 덜덜덜 흔들림 */
    32% { transform: rotate(-4deg); }
    39% { transform: rotate(4deg); }
    46% { transform: rotate(-4deg); }
    53% { transform: rotate(4deg); }
    60% { transform: rotate(-3deg); }
    67% { transform: rotate(3deg); }
    74% { transform: rotate(-2deg); }
    81% { transform: rotate(2deg); }
    90% { transform: rotate(-1deg); }
    100% {
        opacity: 1;
        transform: rotate(0);
    }
}

/* 솔루션 카드 기본 상태 */
.solution-box {display: flex;  justify-content: center;  gap: 20px;  margin: 0;  padding: 0;}
.solution-box li {flex: 1;  list-style: none; opacity: 0; transform: translateY(70px);}
.solution-box li img {display: block;  width: 100%;}
/* 순차적으로 위로 등장 */
.solution-wrap.is-active .solution-box li {animation: solutionUp 0.7s ease-out forwards;}
.solution-wrap.is-active .solution-box li:nth-child(1) {animation-delay: 0s;}
.solution-wrap.is-active .solution-box li:nth-child(2) {animation-delay: 0.2s;}
.solution-wrap.is-active .solution-box li:nth-child(3) {animation-delay: 0.4s;}
@keyframes solutionUp {
    from {
        opacity: 0;
        transform: translateY(60px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===== sec01 ===== */
.sec01{ display: flex; flex-flow: nowrap;align-items: center; justify-content:space-evenly;}
.sec01 img{margin: 0!important}

/* ===== SEC02 ===== */
.sec02 {}

#sec02 .box-wrap {display: grid;  grid-template-columns: minmax(0, 1fr); position: relative; width: 100%; margin-top: 40px;}
#sec02 .box-wrap img { display: block;width: 100%; max-width: 100%; height: auto;}
#sec02 .motion-up {opacity: 0; transform: translateY(25px);  animation: none;}
#sec02.is-visible .motion-up {
    opacity: 1;
    transform: translateY(0);
}
#sec02 .box01,
#sec02 .box02 {grid-area: 1 / 1;}
#sec02 .box01 {position: relative;    z-index: 2;}
#sec02 .box02 {position: relative;  z-index: 1; top: 60%; opacity: 0; transform: translate(0%, calc(5% + 25px)); animation: none;}
#sec02 .dot {grid-column: 1; grid-row: 2; justify-self: center; display: flex; flex-direction: column; align-items: center; z-index: 3; gap: 20px; margin-top: 10%;}
#sec02 .dot span {display: block; flex: 0 0 12px; width: 12px; height: 12px; border-radius: 50%; background: #f04b32; opacity: 0; transform: translateY(12px); animation: none;}
#sec02.is-active .motion-up {animation: sec02MotionUp 0.6s ease-out forwards;}
#sec02.is-active .motiontit01 {animation-delay: 0.1s;}
#sec02.is-active .motiontit02 {animation-delay: 1.1s;}
#sec02.is-active .motion03 {animation-delay: 1.15s;}
#sec02.is-active .motion04 {animation-delay: 1.25s;}
#sec02.is-active .box01 {animation-delay: 0.4s;}
#sec02.is-active .box02 {animation: box02MotionUp 0.6s ease-out 0.6s forwards;}
#sec02.is-active .dot span:nth-child(1) {animation: dotUp1 0.5s ease-out 0.8s both;}
#sec02.is-active .dot span:nth-child(2) {animation: dotUp2 0.5s ease-out 1s both;}
#sec02.is-active .dot span:nth-child(3) {animation: dotUp3 0.5s ease-out 1.2s both;}
@keyframes sec02MotionUp {
    from {
        opacity: 0;
        transform: translateY(25px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes box02MotionUp {
    from {
        opacity: 0;
        transform: translate(0%, calc(5% + 25px));
    }
    to {
        opacity: 0.5;
        transform: translate(0%, 0%);
    }
}

@keyframes dotUp1 {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes dotUp2 {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 0.6;
        transform: translateY(0);
    }
}

@keyframes dotUp3 {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 0.3;
        transform: translateY(0);
    }
}

ul.present-wrap{width: 90%; margin:0 auto; display: flex; flex-flow: column; justify-content: center;letter-spacing: -0.05rem;}
ul.present-wrap li:first-child{padding-bottom: 12px;}
ul.present-wrap li:last-child{ padding:0 0 clamp(42px, 12vw, 100px) 0;}
.agree-ck {display: flex; justify-content: center; align-items: center;  gap: clamp(4px, 0.6vw, 8px);  font-size: clamp(12px, 2.0vw, 18px); font-weight: 400; line-height: 1.4;}
.agree-ck input[type="checkbox"] {appearance: none; -webkit-appearance: none; width: 20px; height: 20px; margin: 0; border: 1px solid #aaa;   border-radius: 3px;  background: #fff;  cursor: pointer;  position: relative;  flex-shrink: 0;}
.agree-ck input[type="checkbox"]:checked {background: #222;  border-color: #222;}
.agree-ck input[type="checkbox"]:checked::after {content: "";  position: absolute;  left: 5px;  top: 2px;  width: 5px;  height: 9px;  border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);}
.agree-ck label {cursor: pointer; color: #000}
/* 버튼 */
.btn-down a {display: flex; align-items: center; justify-content: center; width:75%; max-width:580px; min-height:82px;  margin: 0 auto; padding: 0 clamp(10px, 3vw, 25px); box-sizing: border-box;  background:#000;  border-radius:12px;  color: #fff; font-size:32px; font-weight: 700;  line-height: 1;  text-decoration: none; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.18);}
.btn-down a span {margin-left: clamp(5px, 1vw, 15px);}
.btn-down a span img{ width:clamp(9px, 1.8vw, 18px); vertical-align:middle;}


/* 콘텐츠 박스 */
.leveltabbox-wrap{position: relative;width: 97%;margin:0 auto; max-width:900px; background-color: #FFF;letter-spacing: -0.03rem; overflow:hidden}
.level-tab {display: flex;  gap: 8px; width: 90%; margin:0 auto}
.level-tab a {flex: 1; padding: 14px 8px; text-align: center; text-decoration: none;  color: #fff; background: #96969a;  font-size:36px;font-weight: 700; opacity: 0.5; }
.level3.active { background: #f3bd19;  opacity:1; font-weight: 800;}
.level4.active { background: #00a6d2;  opacity:1; font-weight: 800;}
.level5.active { background: #e34d8c;  opacity:1; font-weight: 800;}
.level6.active { background: #01a96c;  opacity:1; font-weight: 800;}
.level-content {position: relative; border-radius:18px; overflow: hidden}
.level-content.teacher img{width: 100%!important}
.level-content.hsk3{border: 3px solid #f3bd19; }
.level-content.hsk4{border: 3px solid #00a6d2; }
.level-content.hsk5{border: 3px solid #e34d8c; }
.level-content.hsk6{border: 3px solid #01a96c; }
.level-content .play-btn{position: absolute; width: 57.7%; top: 45.5%; left: 7.5%;}
.level-content ul.paybox{width:100%; margin:0 auto;}


/* =====   sec03 ===== */
.sec03{display: flex; flex-flow: column; justify-content: center; align-items: center; padding-bottom: 100px;}

/* 광고 수신 동의 혜택 쿠폰받기 */
.coupon-info {width: 94%; margin:25px auto; box-sizing: border-box; text-align: center;}
a.coupon-btn-wrap {display: block; width: 100%; text-decoration: none; box-sizing: border-box;}
.coupon-btn-wrap .coupon-content-box {display: flex; align-items: center; justify-content: space-between; width: 100%; min-height:110px; padding:25px 50px; box-sizing: border-box;  background: linear-gradient(90deg, #f34c3c, #e63724);  border-radius:13px;  color: #fff; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.18); margin-bottom:10px; }
.coupon-btn-wrap .coupon-action-btn {width: 30%; display: flex; align-items: center; justify-content: center; background:#bf2c10;  padding:12px 25px;  border-radius:8px; font-size:26px; font-weight: 700;  white-space: nowrap;}
.coupon-btn-wrap span.coupon-arrow {margin-left:10px; display: inline-flex; align-items: center;}
.coupon-btn-wrap span.coupon-arrow img{ width:14px; vertical-align:middle;}
.coupon-btn-wrap .coupon-text-group {display: flex; flex-direction: column; text-align: left;}
.coupon-btn-wrap .coupon-text-group .coupon-main-text-group{display: flex; justify-content: flex-start; align-items: center}
.coupon-btn-wrap .coupon-text-group .coupon-sub-text {font-size:16px; font-weight: 400; opacity: 0.9; letter-spacing: -0.05em;line-height: 0.8; }
.coupon-main-text-group .coupon-main-text {font-size:26px; font-weight: 700; letter-spacing: -0.03em;}
.coupon-main-text-group .coupon-main-text.yellow{color: #fff06f}
.coupon-main-text-group .coupon-main-text > strong{font-size: 35px; line-height: 1.2; color: #fff06f}
.coupon-info .coupon-notice {font-size: 14px; color: #888; margin-bottom:30px;letter-spacing: -0.05em;text-align: right;padding-right: 2%;}
.total-wrap{position: relative}
.total-wrap .total-box {position: relative;  width: 100%;  box-sizing: border-box;  padding-top:40px;}
.total-wrap .price-note {position: absolute; top: 10px; right: 10%; width: 40%;  height: 70px;  color: #adadad; font-size:32px; white-space: nowrap;}
.total-wrap .original-price {position: absolute;  top:-0; right: 8%; z-index: 2;}
.total-wrap .arrow-line {position: absolute; top:33%; left:28%; width:82%; height: 2px; background: #999;}
.total-wrap .arrow-diagonal {position: absolute; top: 33%; right: -10%;  width: 80px;  height: 2px;  background: #999;  transform: rotate(-40deg);  transform-origin: right center;}
.total-wrap .arrow-diagonal::after {content: ""; position: absolute; left: -1px; top: -5px; width: 10px; height: 10px; border-left: 2px solid #999; border-bottom: 2px solid #999;    transform: rotate(45deg);}
.total-wrap .total {display: flex; justify-content: center; align-items: center; gap: 24px; width: 100%; color: #ff3b16; white-space: nowrap;}
.total-wrap .discount {flex-shrink: 0; padding: 12px 28px; border-radius: 999px; background: #ff3b16; color: #fff; font-size:38px; font-weight: 800; line-height: 1.2;}
.total-wrap .price {display: inline-flex; align-items: baseline; gap: 2px; color: #ff3b16;}
.total-wrap .price strong {font-size:80px; font-weight: 900; letter-spacing: -0.05em;}
.total-wrap .price em {font-size:48px; font-style: normal; font-weight: 900;}

/* 교재 추가 구매 영역 */
.book-add {position: relative; margin: 40px auto 0; width: 94%; box-sizing: border-box; padding: 28px 27px; border-radius: 14px; background: #f3f4f6;}
.book-add-tit {position: relative; padding-bottom: 18px; border-bottom: 1px solid #d7d9dc; text-align: center;  font-size: 26px; color: #000; font-weight: 700;}
.book-add-tit::before {content: "+"; position: absolute; top: -50px; left: 50%; display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; border: 5px solid #fff; border-radius: 50%; background: #d9dde2; color: #555b63; font-size: 32px; font-weight: 700; line-height: 1; transform: translateX(-50%);  box-sizing: border-box;}
.book-add-list {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0;  padding: 0;  list-style: none;}
.book-add-list li {min-width: 0;  border-bottom: 1px solid #dbdcde;}
.book-item { position: relative;  display: flex;    align-items: center;  padding: 18px 16px 0;  cursor: pointer; box-sizing: border-box;}

/* 체크박스 */
.book-item input[type="checkbox"] {flex: 0 0 28px;  width: 28px;  height: 28px;  margin: 0 8px 0 0;  accent-color: #000;  cursor: pointer;}
.book-name {font-size: 25px; font-weight: 600;  white-space: nowrap; color: #000;}
.book-note {position: absolute; left: 55px; bottom: 12px;  font-size: 13px;  color: #333;  white-space: nowrap;}
.book-add-list .book-item img {width: 88px!important; height: 88px; object-fit: contain; margin-left: auto;    flex-shrink: 0;}

/* 수강신청 버튼 */
.leveltabbox-wrap .pkgbuy a{box-sizing: border-box; background-color: #000; color: #FFF; display: block; width: 94%; margin:30px auto; border-radius: 13px; padding: 20px 0; text-align: center; font-size:38px;  font-weight: 900; letter-spacing: 0.1rem;box-shadow:6px 6px 10px rgba(0,0,0,0.2); position: relative}
.leveltabbox-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;}

/*sec04*/
.sec04tit-bg{background:#ff5c3d; height:300px;
    clip-path:polygon(
        0 0,
        100% 0,
        100% 40%,
        50% 100%,
        0 40%
    );
}
.inner{max-width:900px; margin:0 auto; text-align:center;}
.bubble01{position: absolute; width: 27.4%; top: 57.4%; left: 12.6%; animation: floating 3s ease-in-out infinite;}
.bubble02{position: absolute; width: 27.4%; top: 48.4%; right: 8%; animation: floating 3.5s ease-in-out infinite; animation-delay: .5s;}
@keyframes floating {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-15px);
    }
}
.txtbox-wrap{position: absolute; width: 100%; top: 73%;  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.txtbox-wrap p{grid-column: 1 / -1;  text-align: right; width: 92.5%;    margin: 0 auto;}
.feature-list {display: flex; flex-direction: column;  gap: 12px;  margin: 0;  padding: 0; width: 85%; margin:0 auto 20px;}
.feature-list li {display: flex;align-items: center; justify-content: center; min-height: 50px; padding: 10px;  border-radius: 12px; font-size: clamp(16px, 2.5vw, 24px); font-weight: 500; text-align: center; color: #000; letter-spacing: -0.05rem;  box-shadow: 0 3px 8px rgba(0,0,0,0.05);  opacity: 0;  transform: translateY(25px);}

.feature-list.blue li {background: #b3e2f5; }
.feature-list.mint li {background: #a3dad8;}
/* 스크롤 진입 시 */
.txtbox-wrap.is-active .feature-list li {animation: featureUp 0.6s ease-out forwards;}
.txtbox-wrap.is-active .feature-list li:nth-child(1) {animation-delay: 0.2s;}
.txtbox-wrap.is-active .feature-list li:nth-child(2) {animation-delay: 0.4s;}
.txtbox-wrap.is-active .feature-list li:nth-child(3) {animation-delay: 0.6s;}
@keyframes featureUp {
    from {
        opacity: 0;
        transform: translateY(25px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}






/* 유의사항 */
.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:#666;}
.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;margin-bottom: 5px; border-bottom:2px solid #ebebeb}
.evt_foot .footertext .tit2{ font-size:1.2rem;font-weight: 700; 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;}
#footer{padding-bottom: 90px;}