@charset "utf-8";

/* 공통 */
.sub-title{font-weight:700;font-size:24px;line-height:1;font-family:'SpoqaHanSansNeo',sans-serif;color:var(--color-dark-gray,#333)}
/* 로그인 */
.login-wrap{width:100%;min-height:100vh;background:url(/html/images/login/login_bg.webp) no-repeat left bottom;background-size:auto 100%;background-attachment:fixed}
.login-wrap .login-inner{margin:0 auto;padding:70px 110px 20px;width:640px}
.login-wrap .login-btn.mb{margin-bottom:50px}
.login-wrap .login-title{font-weight:700;font-size:28px;line-height:1;color:var(--color-dark-gray,#333)}
.login-wrap .logo{margin-bottom:70px;line-height:0}
.login-wrap .logo img{max-width:250px}
.login-wrap .login-form{margin-top:50px}
.login-wrap .login-btn{margin:30px 0 10px}
.login-btn button{width:100%}
.login-wrap .login-utils{display:flex;align-items:center}
.login-wrap .login-utils > *{display:inline-block;vertical-align:middle}
.login-wrap .login-utils .checkbox-wrap{width:120px}
.login-wrap .find-wrap{margin-left:auto}
.login-wrap .find-wrap li{position:relative;display:inline-block;padding:0 13px;vertical-align:middle}
.login-wrap .find-wrap li:last-child{padding-right:0}
.login-wrap .find-wrap li:before{content:'';position:absolute;top:50%;left:0;margin-top:-8px;width:1px;height:16px;background:var(--color-dark-gray,#333)}
.login-wrap .find-wrap li:first-child:before{display:none}
.login-wrap .find-wrap li a{display:block;font-size:16px;color:var(--color-dark-gray,#333)}
.login-wrap .sns-login-wrap{margin-top:60px;padding-top:60px;border-top:1px solid #eee}
.login-wrap .sns-login-wrap h1{font-weight:400;font-size:16px;line-height:1;color:var(--color-dark-gray,#333);text-align:center}
.login-wrap .sns-login{margin:0 0 30px;text-align:center;display:flex;justify-content:center; flex-direction:column;}
.login-wrap .sns-login li{display:inline-block;vertical-align:top}
/* .login-wrap .sns-login li a{display:block;width:60px;height:60px;border-radius:50%;font-size:0} */
.login-wrap .sns-login li a{display:block;width:100%;height:50px; line-height:50px; font-weight:bold; font-size:16px; font-family:-apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", sans-serif; border-radius:4px;}
.login-wrap .sns-login li.naver a{background:#03c75a url(/html/images/login/sns_naver.png) no-repeat center center}
/* .login-wrap .sns-login li.kakao a{background:#fee500 url(/html/images/login/sns_kakao.png) no-repeat center center} */
.login-wrap .sns-login li.kakao a{background:#fee500; color:rgba(0,0,0,0.85);}
.login-wrap .sns-login .icon-kakao {display:inline-block; width:21px; height:20px; margin-right:5px; background:#fee500 url(/html/images/login/sns_kakao.png) no-repeat center/contain; vertical-align:text-top;}
.login-wrap .sns-login li.facebook a{background:#166fe5 url(/html/images/login/sns_facebook.png) no-repeat center center}
.login-wrap .sns-login li.google a{background:var(--color-light-gray2,#f5f5f7) url(/html/images/login/sns_google.png) no-repeat center center}
.login-wrap .sns-login li.twitter a{background:#1da1f2 url(/html/images/login/sns_twitter.png) no-repeat center center}
.login-wrap .join-info{width:100%;border-radius:4px;background:var(--color-light-gray2,#f5f5f7);font-size:18px;line-height:60px;color:var(--color-dark-gray,#333);text-align:center}
.login-wrap .join-info a{display:inline-block;font-weight:bold;text-decoration:underline;}
/* 아이디찾기 */
.login-wrap .login-form.find-id li{margin-top:20px}
.login-wrap .login-form.find-id li:first-child{margin-top:0}

/* 결과 */
.login-wrap .find-result{margin:13px 0 0}
.login-wrap .find-result .find-info{font-size:18px;color:var(--color-dark-gray,#333);word-break:keep-all}
.login-wrap .find-result .find-result-txt{margin:37px 0 40px;padding:61px 10px;border-radius:4px;background:var(--color-light-gray2,#f5f5f7);text-align:center}
.login-wrap .find-result .find-result-txt p{font-weight:500;font-size:20px;color:var(--color-dark-gray,#333)}
.login-wrap .find-result .find-txt{margin-top:-20px}
.login-wrap .find-result .find-txt li{margin:3px 0;font-size:15px;color:var(--color-gray,#aaa);letter-spacing:-.5px;word-break:keep-all}

/* 회원가입 */
.login-wrap .sub-tit{margin-top:75px;margin-bottom:-35px;font-weight:700;font-size:18px;color:var(--color-gray,#aaa)}
.login-wrap .sub-tit + .login-form > li > label{margin-top:20px}
.login-form .input-button{display:flex}
.login-form .input-button input{flex-grow:1}
.login-form .input-button input + button{flex-shrink:0;margin-left:10px}
.login-form .input-button button {margin-left:auto;}
.login-form li{position:relative;margin-top:20px}
.login-form li:first-child{margin-top:0}
.login-form li > label, .login-form .form-title{display:block;font-size:15px;line-height:30px;color:var(--color-primary,#0148d4)}
.login-form .form-title {display:flex; align-items:center; justify-content:space-between;}
.login-form .form-title a {text-decoration:underline; text-underline-offset:3px;}
.login-form li input{width:100%;height:40px;border:0 none;border-bottom:1px solid var(--color-light-gray,#ccc);font-size:18px;color:var(--color-dark-gray,#333);padding:0 2px}
.login-form li input:focus{border-bottom:2px solid var(--color-dark-gray,#333)}
.login-form li input::placeholder{color:var(--color-gray,#aaa)}
.login-form li input[type=text]:read-only{background:#eee;border-radius:10px;border-bottom:none}
.login-form li input.in-button{padding:0 42px 0 2px}
.login-form li .btn-del{position:absolute;bottom:0;right:-9px;padding:9px;width:auto!important;height:42px;background:none}
.login-form li [class^="btn"]:disabled{border-color:var(--color-gray,#aaa);color:var(--color-gray,#aaa)}
.login-form li [class^="btn"]{display:inline-block;width:120px}
.login-form li.tel{font-size:0}
.login-form li.tel input{display:inline-block;margin-right:10px;width:calc(100% - 130px);vertical-align:top}
.login-form li .certification-number{position:relative;margin-top:10px;display:flex}
.login-form li .certification-number input{width:50%}
.login-form li .certification-number span{display:block;flex-grow:1;margin-right:15px;font-size:14px;line-height:40px;color:var(--color-primary,#0148d4);text-align:right}
.login-form li.no-label{margin-top:40px}
.login-form li :is(.checkbox-wrap,.radio-wrap){margin-top:5px}
.login-form li :is(.checkbox-wrap,.radio-wrap) li{display:inline-block;margin:0 20px 5px 0;vertical-align:top}
.login-form li .checkbox-wrap{width:auto}
.login-form li :is(.checkbox-wrap,.radio-wrap) li label{line-height:24px;color:var(--color-dark-gray,#333)}
.login-form li.email{font-size:0}
.login-form li.email input{display:inline-block;width:calc(100% - 200px);height:50px;vertical-align:top}
.login-form li.email span{display:inline-block;width:40px;font-size:18px;line-height:50px;color:var(--color-dark-gray,#333);text-align:center;vertical-align:top}
.login-form li.email select{display:inline-block;width:160px;vertical-align:top}
.login-form li.birthday{display:flex;flex-wrap:wrap}
.login-form li.birthday label{width:100%}
.login-form li.birthday select{display:inline-block;margin-left:10px;width:calc(30% - 7px);vertical-align:top}
.login-form li.birthday select:first-of-type{margin-left:0;width:calc(40% - 7px)}
.login-form li.address{font-size:0}
.login-form li.address :is(input:nth-of-type(1),input:nth-of-type(2)){padding:0 12px;height:40px;border-radius:10px;border-bottom:0 none;background:#eee}
.login-form li.address input:nth-of-type(1){display:inline-block;margin-right:10px;width:20%;min-width:100px;vertical-align:top}
.login-form li.address input:nth-of-type(2){margin:10px 0}
.login-form li.error input{border-bottom-color:#ff8e20}
.login-form li .error-txt{display:block;margin-top:10px;font-size:12px;line-height:16px;color:#ff8e20}
.login-form li .error-txt img{display:inline-block;margin-right:6px;vertical-align:top}
.login-form li .select-file{padding-bottom:9px;border-bottom:1px solid var(--color-light-gray,#ccc)}
.login-form li textarea{font-size:18px;border:1px solid var(--color-light-gray,#ccc);width:100%;height:200px;padding:10px;line-height:1.5em;resize:none}
.login-form .attach-file{position:relative;padding-right:15px;display:inline-block}
.login-form .attach-file img{width:80px;cursor:pointer}
.login-form .attach-file .btn-delete{position:absolute;top:3px;right:15px;width:30px;z-index:10;cursor:pointer}
.login-form .attach-file .btn-delete img{width:100%}
.login-form .phone-number {display:flex; align-items:center; gap:0 8px;}
.login-form .phone-number input {width:30%; flex-grow:1;}
.login-form .email-address {display:flex; align-items:center; gap:0 8px;}
.login-form .email-address input {width:50%; flex-grow:1;}
.agree-wrap .all-select{margin-bottom:4px;padding-bottom:22px;width:100%!important;border-bottom:1px solid var(--color-light-gray,#ccc)}
.agree-wrap .all-select label{font-weight:500;font-size:22px;letter-spacing:-1px}
.agree-wrap li{margin:16px 0;display:flex;align-items:center}
.agree-wrap li strong{font-weight:400;color:var(--color-red,#dc3545)}
.agree-wrap li span{color:var(--color-gray,#aaa)}
.agree-wrap .checkbox-wrap{display:inline-block;width:calc(100% - 70px);vertical-align:middle}
.agree-wrap a{display:inline-block;width:70px;background:url(/html/images/sub/mypage/arrow_g.png) no-repeat right center;font-size:14px;color:var(--color-gray,#aaa);vertical-align:middle}
.popup-wrap.agree .popup-inner{max-height:550px}
.popup-wrap.agree .agree-popup-conts{overflow-x:hidden;margin-top:40px;padding:15px 20px;width:100%;height:300px;border:1px solid var(--color-light-gray,#ccc)}
.popup-wrap.agree .agree-popup-conts p{font-weight:300;font-size:14px;line-height:21px;color:var(--color-dark-gray,#333);word-break:keep-all}
.popup-wrap.agree .popup-btn{margin-top:36px}
.floating-input-box > .floating-label{position:absolute;top:30px;left:0;display:block;font-size:18px;line-height:40px;color:var(--color-gray,#aaa);pointer-events:none;transition:all .2s}
.floating-input-box input{margin-top:30px}
.floating-input-box :is(input:focus,input:not(:placeholder-shown)) + .floating-label{position:absolute;top:0;left:0;color:var(--color-primary,#0148d4);font-size:15px;line-height:30px}
.floating-input-box input::placeholder{color:transparent!important}
.agree-wrap{margin-top:60px}
.agree-wrap .all-select{margin-bottom:4px;padding-bottom:22px;width:100%!important;border-bottom:1px solid var(--color-light-gray,#ccc)}
.agree-wrap .all-select label{font-weight:500;font-size:22px;letter-spacing:-1px}
.agree-wrap .checkbox-wrap{display:inline-block;width:calc(100% - 70px);vertical-align:middle}
.agree-wrap a{display:inline-block;width:70px;background:url(/html/images/sub/mypage/arrow_g.png) no-repeat right center;font-size:14px;color:var(--color-gray,#aaa);vertical-align:middle}
.agree-wrap .sub-check-box {margin-left:34px;}
.agree-wrap .sub-check-box .checkbox-wrap {width:auto;}
.agree-wrap .sub-check-box .checkbox-wrap + .checkbox-wrap {margin-left:20px;}
@media only screen and (max-width:1920px) {
    .login-wrap .login-inner{margin-left:640px}
}
@media only screen and (max-width:1300px) {
    .login-wrap .login-inner{margin-left:550px}
}
@media only screen and (max-width:1200px) {
    .login-wrap{background:none!important}
    .login-wrap .login-inner{margin-left:auto}
}
@media only screen and (min-width:1025px) {
	.login-wrap #header{display:none}
}
@media only screen and (max-width:1024px) {
	.login-wrap #header{display:block}
    .login-wrap .logo{display:none}
}
@media only screen and (max-width:860px) {
	.login-wrap .login-inner{padding:0 30px;padding-bottom:70px}
    .login-wrap .login-title{margin-top:40px}
    .sub-title{margin-top:40px}
}
@media only screen and (max-width:767px) {
	.login-wrap .login-inner{padding:0 20px;padding-bottom:50px;width:100%}
	.sub-title{margin-top:20px;font-size:18px}
    .login-wrap .login-title{margin-top:20px;font-size:18px}
    .login-wrap .sub-tit{margin-top:40px;margin-bottom:-20px}
    .login-wrap .login-form{margin-top:30px}
    .login-wrap .login-btn{margin:20px 0 10px}
    .login-wrap .login-btn button{height:50px;font-size:16px}
    .login-wrap .find-wrap li{padding:0 8px}
    .login-wrap .find-wrap li:before{margin-top:-5px;height:10px}
    .login-wrap .find-wrap li a{font-size:14px}
    .login-wrap .sns-login-wrap{margin-top:30px;padding-top:30px}
    .login-wrap .sns-login-wrap h1{font-size:14px}
    .login-wrap .sns-login{margin:0 0 25px}
    /* .login-wrap .sns-login li{margin:0 10px} */
    /* .login-wrap .sns-login li a{width:45px;height:45px} */
    .login-wrap .sns-login li a {font-size:14px;}
    .login-wrap .sns-login li.naver a{background-size:auto 12px}
    .login-wrap .sns-login li:is(.kakao,.facebook,.google) a{background-size:auto 15px}
    .login-wrap .join-info{font-size:15px;line-height:50px}
    .login-wrap .find-result{margin-top:5px}
    .login-wrap .find-result .find-info{font-size:15px}
    .login-wrap .find-result .find-result-txt{margin:25px 0;padding:40px 10px}
    .login-wrap .find-result .find-result-txt p{font-size:16px}
    .login-wrap .find-result .find-txt{margin-top:-10px}
    .login-wrap .find-result .find-txt li{font-size:13px}
    .login-form li input{height:35px;font-size:15px}
    .login-form li input.in-button{padding-right:36px}
    .login-form li .btn-del{padding:8px;height:35px}
    .login-form li .btn-del img{height:19px}
    .login-form li.no-label{margin-top:20px}
    .login-form li.email input{height:40px}
    .login-form li.email span{font-size:15px;line-height:40px}
    .login-form li.address :is(input:nth-of-type(1),input:nth-of-type(2)){height:35px}
    .login-form li.tel{margin-top:25px}
    .login-form li.tel input,.login-form li.address input:nth-of-type(1){width:calc(100% - 110px)}
    .login-form li.address input:nth-of-type(2){margin:7px 0}
    .login-form li :is(.checkbox-wrap,.radio-wrap) li label{line-height:18px}
    .login-form li [class^="btn"]{width:100px}
    .login-form li textarea{font-size:15px}
    .login-wrap .login-form li input{font-size:14px}
    .login-wrap .login-form li > label{font-size:13px}
    .mypage-modify-wrap .login-form li label, .login-form .form-title{font-size:12px;line-height:24px}
    .popup-wrap.agree .agree-popup-conts{margin-top:20px;padding:12px 15px}
    .popup-wrap.agree .agree-popup-conts p{font-size:12px;line-height:18px}
    .popup-wrap.agree .popup-btn{margin-top:20px}
    .floating-input-box > .floating-label{font-size:14px;line-height:35px}
    .floating-input-box :is(input:focus,input:not(:placeholder-shown)) + .floating-label{font-size:13px}
    .agree-wrap{margin-top:30px}
    .agree-wrap .all-select{padding-bottom:16px}
    .agree-wrap .all-select label{font-size:17px}
    .agree-wrap li{margin:10px 0}
}
/* 서브 비주얼 */
.sub-visual{display:table;width:100%;height:200px;text-align:center;table-layout:fixed}
.sub-visual.company{background:url(/html/images/sub/visual/sub_visual01.jpg) no-repeat center center;background-size:cover}
.sub-visual.lecture{background:url(/html/images/sub/visual/sub_visual02.jpg) no-repeat center center;background-size:cover}
.sub-visual.teacher{background:url(/html/images/sub/visual/sub_visual03.jpg) no-repeat center center;background-size:cover}
.sub-visual.shop{background:url(/html/images/sub/visual/sub_visual04.jpg) no-repeat center center;background-size:cover}
.sub-visual.learning{background:url(/html/images/sub/visual/sub_visual05.jpg) no-repeat center center;background-size:cover}
.sub-visual .sub-visual-inner{display:table-cell;vertical-align:middle;background:rgba(0,0,0,0.86)}
.sub-visual-wrap{width:100%;height:200px}
.sub-visual-wrap .visual-inner{display:flex;align-items:center;justify-content:center;max-width:1920px;width:100%;height:100%;margin:auto;background-position:center;background-repeat:no-repeat;background-size:cover}
.sub-visual-wrap .visual-inner h1{font-weight:700;font-size:28px;color:#fff;text-shadow:5px 0 10px rgba(0,0,0,.1)}
.sub-visual .sub-visual-inner h1{font-weight:700;font-size:28px;color:#fff;text-shadow:5px 0 10px rgba(0,0,0,.1)}
@media only screen and (max-width:1024px) {
    .sub-visual{display:none}
    .sub-visual-wrap{display:none}
}
@media only screen and (max-width:768px) {
    .sub-visual{height:300px}
    .sub-visual .sub-visual-inner h1{font-size:24px}
}
@media only screen and (max-width:640px) {
    .sub-visual{height:200px}
    .sub-visual .sub-visual-inner h1{font-size:20px}
}
/* 콘텐츠 레이아웃 */
.sub-conts-wrap{padding:60px 0 150px}
@media only screen and (max-width:768px) {
    .sub-conts-wrap{padding:50px 0 100px}
}
@media only screen and (max-width:640px) {
    .sub-conts-wrap{padding:40px 0 70px}
}
/* -------- sub-conts-tit -------- */
.sub-conts-wrap .sub-conts-tit{margin-bottom:7px;font-weight:700;font-size:28px;color:var(--color-dark-gray,#333)}
@media only screen and (max-width:1024px) {
    .sub-conts-wrap .sub-conts-tit{margin-bottom:30px}
}
@media only screen and (max-width:768px) {
    .sub-conts-wrap .sub-conts-tit{margin-bottom:20px;font-size:24px}
}
@media only screen and (max-width:640px) {
    .sub-conts-wrap .sub-conts-tit{font-size:20px}
}
/* -------- location-menu -------- */
.location-menu{margin-bottom:40px;display:flex}
.location-menu li{display:inline-block;vertical-align:middle}
.location-menu li:after{content:'';display:inline-block;margin:0 10px;width:7px;height:10px;background:url(/html/images/sub/common/location_arrow.png) no-repeat center center;vertical-align:middle}
.location-menu li:last-child:after{display:none}
.location-menu li a{display:inline-block;font-size:16px;color:#666;vertical-align:middle}
@media only screen and (max-width:1024px) {
    .location-menu{display:none}
}
@media only screen and (max-width:768px) {
    .location-menu{margin-bottom:30px}
    .location-menu li:after{top:-1px;margin:0 8px}
    .location-menu li a{font-size:15px}
}
@media only screen and (max-width:640px) {
    .location-menu{margin-bottom:20px}
    .location-menu li:after{margin:0 6px;background-size:auto 8px}
    .location-menu li a{font-size:13px}
}
/* -------- sub-tab-menu -------- */
.sub-tab-menu{margin-bottom:50px;border-bottom:2px solid #eee}
.sub-tab-menu .swiper-slide{display:inline-block;margin-right:40px;width:auto;vertical-align:top}
.sub-tab-menu .swiper-slide:last-child{margin-right:0}
.sub-tab-menu .swiper-slide a{position:relative;display:block;font-size:20px;line-height:40px;color:var(--color-dark-gray,#333)}
.sub-tab-menu .swiper-slide.on a{font-weight:700}
.sub-tab-menu .swiper-slide.on a:after{content:'';position:absolute;bottom:-2px;left:0;width:100%;height:4px;background:var(--color-primary,#0148d4)}
@media only screen and (max-width:1180px) {
    .sub-tab-menu{width:calc(100% + 30px);overflow:hidden}
}
@media only screen and (max-width:768px) {
    .sub-tab-menu{margin-bottom:40px;width:calc(100% + 20px)}
    .sub-tab-menu .swiper-slide{margin-right:35px}
    .sub-tab-menu .swiper-slide a{font-size:18px;line-height:36px}
}
@media only screen and (max-width:640px) {
    .sub-tab-menu{margin-bottom:25px}
    .sub-tab-menu .swiper-slide{margin-right:25px}
    .sub-tab-menu .swiper-slide a{font-size:15px;line-height:32px}
    .sub-tab-menu .swiper-slide:is(.on,.swiper-slide-active) a:after{height:3px}
}
/* 개별페이지 */
/* -------- 교육원소개 -------- */
.intro-wrap{text-align:center}
.intro-wrap .intro-visual{width:100%;background-size:cover}
.intro-wrap .intro-visual img{width:100%;height:100%;object-fit:cover}
.intro-wrap .intro-tit{margin:75px 0 70px;font-size:32px;color:var(--color-dark-gray,#333);font-weight:400;letter-spacing:-1px;text-align:center;word-break:keep-all;line-height:1.33em}
.intro-wrap .intro-tit strong{font-weight:700}
.intro-wrap .intro-tit span{display:block;font-size:24px}
/* -------- 연혁 -------- */
.history-wrap{position:relative;display:inline-block;width:auto;text-align:left}
.history-wrap:before{content:'';position:absolute;top:10px;left:157px;width:1px;height:calc(100% - 20px);background:#ddd}
.history-wrap .history-box{margin:45px 0;font-size:0}
.history-wrap .history-box:first-child{margin-top:0}
.history-wrap .history-box:last-child{margin-bottom:0}
.history-wrap .history-box > h1{display:inline-block;padding-right:90px;width:157px;font-size:28px;line-height:1;color:var(--color-dark-gray,#333);vertical-align:top}
.history-wrap .history-box > ul{position:relative;display:inline-block;padding-left:90px;width:calc(100% - 157px);vertical-align:top}
.history-wrap .history-box > ul:before{content:'';position:absolute;top:7px;left:0;margin-left:-6px;width:13px;height:13px;border-radius:50%;background:var(--color-primary,#0148d4)}
.history-wrap .history-box > ul li{display:flex;margin-bottom:10px;font-size:18px;color:var(--color-dark-gray,#333);line-height:1.5em; word-break:keep-all}
.history-wrap .history-box > ul li:last-child{margin-bottom:0}
.history-wrap .history-box > ul li span{display:inline-block;width:45px;flex-shrink:0;}
.history-zigzag-wrap .history-box{position:relative;display:block;width:50%;padding-bottom:40px}
.history-zigzag-wrap .history-box:nth-child(odd){margin:0 auto 0 0;padding-right:50px}
.history-zigzag-wrap .history-box:nth-child(even){display:block;margin:0 0 0 auto;padding-left:50px}
.history-zigzag-wrap .history-box:last-child{padding-bottom:0}
.history-zigzag-wrap .history-box:before{content:"";position:absolute;top:0;right:-.5px;bottom:0;width:1px;background-color:#bdbdbd;z-index:1}
.history-zigzag-wrap .history-box:nth-child(even):before{right:auto;left:-.5px}
.history-zigzag-wrap .history-box:first-child:before{top:10px}
.history-zigzag-wrap .history-box:last-child:before{bottom:auto;height:10px}
.history-zigzag-wrap .history-tit{position:relative;font-size:28px;font-weight:500;color:var(--color-dark-gray,#333);text-align:right;line-height:1;margin-bottom:15px}
.history-zigzag-wrap .history-tit:after{content:"";position:absolute;width:11px;height:11px;background-color:var(--color-primary,#0148d4);border-radius:50%;top:8px;right:-55px;z-index:10;box-sizing:content-box}
.history-zigzag-wrap .history-box:nth-child(even) .history-tit{text-align:left}
.history-zigzag-wrap .history-box:nth-child(even) .history-tit:before{right:auto;left:-30.5px}
.history-zigzag-wrap .history-box:nth-child(even) .history-tit:after{right:auto;left:-55px}
.history-zigzag-wrap .history-box .offset-md-6{text-align:right;word-break:keep-all;margin-left:0}
.history-zigzag-wrap .history-box:nth-child(even) .offset-md-6{text-align:left}
.history-zigzag-wrap .history-box dl{margin-top:10px}
.history-zigzag-wrap .history-box dt{display:none}
.history-zigzag-wrap .history-box dd{position:relative;display:inline-block;font-size:18px;color:#333132;line-height:1.5em;padding-left:35px}
.history-zigzag-wrap .history-box dd span{position:absolute;top:0;left:0;color:#555}
.history_inner_img{width:220px}
@media (max-width: 767px) {
    .history-zigzag-wrap{margin-left:10px}
    .history-zigzag-wrap .history-box{width:100%;margin:0!important;padding-right:0!important;padding-left:20px!important}
    .history-zigzag-wrap .history-box:before{right:auto;left:0}
    .history-zigzag-wrap .history-box dl{margin-top:10px}
    .history-zigzag-wrap .history-tit{text-align:left;font-size:20px}
    .history-zigzag-wrap .history-box:nth-child(even) .history-tit:after,.history-zigzag-wrap .history-tit:before,.history-zigzag-wrap .history-tit:after{right:auto;left:-25px;top:5px}
    .history-zigzag-wrap .history-box .offset-md-6{text-align:left}
    .history-zigzag-wrap .history-box dd{font-size:15px}
}
/*서비스 소개*/
.service-intro .intro-tit{font-size:40px;line-height:1.25em;display:flex;flex-direction:column;align-items:center;margin-bottom:100px}
.service-intro .intro-tit strong{color:var(--color-primary,#0148d4)}
.service-intro .intro-tit .txt{margin-top:35px;font-size:24px;line-height:1.333em;max-width:534px}
.service-intro .intro-img{margin-top:90px}
.intro-img img{max-width:100%}
.intro-list{display:grid;grid-template-columns:repeat(2,1fr);width:100%;max-width:1180px;margin:auto;gap:20px}
.intro-list li{border:1px solid #eee;border-radius:9px;padding:15px 40px;min-height:298px;display:flex;flex-direction:column;justify-content:center;align-items:center}
.intro-list .list-title{margin-top:36px;font-size:24px;color:var(--color-dark-gray,#333)}
.intro-list .list-text{margin-top:24px;font-size:18px;color:var(--color-dark-gray,#333);line-height:1.66em}
@media only screen and (max-width:768px) {
	.intro-wrap .intro-visual{aspect-ratio:5/1.5}
    .intro-wrap .intro-tit{margin:40px 0;font-size:24px}
    .intro-wrap .intro-tit span{margin-top:3px;padding:0 20px;font-size:18px;line-height:1.4em}
    .history-wrap{margin-left:10px;width:calc(100% - 10px)}
    .history-wrap:before{left:0}
    .history-wrap .history-box{position:relative;margin:35px 0;padding-left:20px}
    .history-wrap .history-box:before{content:'';position:absolute;top:5px;left:0;margin-left:-5px;width:11px;height:11px;border-radius:50%;background:var(--color-primary,#0148d4)}
    .history-wrap .history-box > h1{margin-bottom:16px;padding-right:0;width:100%;font-size:20px}
    .history-wrap .history-box > ul{padding-left:0;width:100%}
    .history-wrap .history-box > ul:before{display:none}
    .history-wrap .history-box > ul li{margin-bottom:5px;font-size:15px;}
    .history-wrap .history-box > ul li span{width:35px}
    .service-intro .intro-tit{font-size:32px}
    .service-intro .intro-tit .txt{margin-top:28px;font-size:20px;line-height:1.4em}
    .service-intro .intro-img{margin-top:50px}
    .intro-list{grid-template-columns:repeat(1,100%)}
    .intro-list li{padding:20px 35px;min-height:240px}
    .intro-list .list-img{width:50px}
    .intro-list img{width:100%}
    .intro-list .list-title{margin-top:20px;font-size:20px}
    .intro-list .list-text{margin-top:15px;font-size:16px}
}
/* -------- 찾아오시는길 -------- */
/* map */
.location-wrap .location-map{overflow:hidden;width:100%;height:400px}
/* address */
.location-wrap .address-info{margin-top:80px;border-top:1px solid #ddd}
.location-wrap .address-info .address-box{padding:13px 0;border-bottom:1px solid #ddd;display:flex}
.location-wrap .address-info .address-box > *{display:inline-block;font-size:18px;color:var(--color-dark-gray,#333);word-break:keep-all;vertical-align:top}
.location-wrap .address-info .address-box h1{margin:13px 0;width:220px;font-weight:700;text-align:center}
.location-wrap .address-info .address-box ul{padding-left:10%;width:calc(100% - 220px);text-align:left}
.location-wrap .address-info .address-box ul li{margin:13px 0}
@media only screen and (max-width:768px) {
    .location-wrap .location-map{height:300px}
    .location-wrap .location-map iframe{height:300px!important}
    .location-wrap .address-info{margin-top:40px}
    .location-wrap .address-info .address-box{padding:10px 0}
    .location-wrap .address-info .address-box h1{display:block;margin:0;width:100%;text-align:left}
    .location-wrap .address-info .address-box ul{padding:0;width:100%}
    .location-wrap .address-info .address-box ul li{margin:3px 0}
    .location-wrap .address-info .address-box > *{font-size:15px}
}
/* 게시판 */
/* -------- 검색 -------- */
.board-search-wrap{overflow:hidden;position:relative;margin:0 auto 50px;width:100%;max-width:450px;height:48px;border-radius:15px;border:1px solid #ddd}
.board-search-wrap input{padding-left:20px;width:calc(100% - 56px);height:48px;border:0 none;background:none;font-size:18px;color:var(--color-dark-gray,#333)}
.board-search-wrap input::placeholder{color:var(--color-gray,#aaa)}
.board-search-wrap button{position:absolute;top:0;right:0;padding:0;width:56px;height:48px;background:none;border:0 none}
.board-search-wrap button img{display:block;margin:0 auto}
@media only screen and (max-width:640px) {
    .board-search-wrap{margin-bottom:30px;height:40px;border-radius:10px}
    .board-search-wrap input{padding-left:12px;width:calc(100% - 42px);height:40px;font-size:15px}
    .board-search-wrap button{width:42px;height:40px}
}
/* -------- 게시판 버튼 -------- */
.board-btn-wrap{margin-top:60px;font-size:0}
.board-btn-wrap .btn-utils{position:relative;left:-11px;display:inline-block;width:calc(100% - 120px);vertical-align:top}
.board-btn-wrap .btn-utils li{position:relative;display:inline-block;padding:0 11px;vertical-align:middle}
.board-btn-wrap .btn-utils li:after{content:'';position:absolute;top:50%;right:0;margin-top:-7px;width:1px;height:14px;background:#ddd}
.board-btn-wrap .btn-utils li:last-child:after{display:none}
.board-btn-wrap .btn-utils li a{display:block;font-weight:500;font-size:16px;line-height:40px;color:var(--color-gray,#aaa)}
.board-btn-wrap .btn-utils li:hover a{text-decoration:underline}
.board-btn-wrap .btn-write{display:inline-block;width:120px;vertical-align:top}
.board-btn-wrap .btn-write :is(a,button){width:100%}
.board-search-wrap + .board-btn-wrap{margin-top:0;margin-bottom:15px}
@media only screen and (max-width:640px) {
    .board-btn-wrap{margin-top:30px}
    .board-btn-wrap .btn-utils{left:-8px;width:calc(100% - 80px)}
    .board-btn-wrap .btn-utils li{padding:0 7px}
    .board-btn-wrap .btn-utils li:after{margin-top:-5px;height:10px}
    .board-btn-wrap .btn-utils li a{font-size:13px;line-height:35px}
    .board-btn-wrap .btn-write{width:80px}
}
/* -------- board-paging -------- */
.board-paging{margin-top:100px;text-align:center}
.board-paging :is(ul,ol){display:flex;justify-content:center}
.board-paging li{display:inline-block;width:31px;height:31px;vertical-align:top}
.board-paging .paging-num{margin:0 3px;width:auto}
.board-paging .paging-num li{margin:0 3px}
.board-paging .paging-num li.on{border:1px solid var(--color-blue,#011fd4)}
.board-paging .paging-num li a{display:block;font-weight:500;font-size:14px;line-height:29px;color:var(--color-dark-gray,#333)}
.board-paging .paging-num li.on a{color:var(--color-blue,#011fd4)}
.board-paging :is(.btn-first,.btn-prev,.btn-next,.btn-last) a{display:block;width:100%;height:100%;border:1px solid var(--color-light-gray,#ccc);font-size:0}
.board-paging .btn-first a{background:url(/html/images/sub/board/btn_first.png) no-repeat center center}
.board-paging .btn-prev a{margin-left:5px;background:url(/html/images/sub/board/btn_prev.png) no-repeat center center}
.board-paging .btn-next a{background:url(/html/images/sub/board/btn_next.png) no-repeat center center}
.board-paging .btn-last a{margin-left:5px;background:url(/html/images/sub/board/btn_last.png) no-repeat center center}
@media only screen and (max-width:768px) {
.board-paging{margin-top:70px}
}
@media only screen and (max-width:640px) {
.board-paging{margin-top:40px}
}
/* 강의소개 */
/* -------- 강의리스트 -------- */
.lecture-list{display:flex;flex-wrap:wrap;position:relative;width:100%;gap:40px 4%;left:0;margin-bottom:0}
.lecture-list .lecture-box{display:flex;flex-direction:column;vertical-align:top;width:30.666%;padding:0}
.lecture-box .thumb{overflow:hidden;border-radius:4px}
.lecture-box .thumb a{display:block;aspect-ratio:1.8/1.01}
.lecture-box .thumb img{width:100%;height:100%;object-fit:cover;vertical-align:top}
.lecture-box .lecture-detail{flex-grow:1;position:relative;border-radius:0 0 4px 4px;background:#fff;transition:.3s;display:flex;flex-direction:column}
.lecture-box:hover .lecture-detail{box-shadow:0 0 15px rgba(0,0,0,.15)}
.lecture-box .lecture-detail>a{display:flex;flex-direction:column;height:100%;padding:30px 10px 10px}
.lecture-box .lecture-label{position:absolute;top:-15px;left:10px;z-index:1;display:flex}
.lecture-box .lecture-label li{display:inline-block;margin-right:4px;padding:0 13px;border-radius:4px;background:var(--color-sky-blue,#0098e0);font-weight:700;font-size:14px;line-height:30px;color:#fff;vertical-align:top}
.lecture-box .lecture-label li:first-child{background:var(--color-primary,#0148d4)}
.lecture-box .lecture-info{margin-bottom:15px}
.lecture-box .lecture-info .cate{margin-bottom:3px;font-size:14px;color:var(--color-gray,#aaa)}
.lecture-box .lecture-info .name{font-size:15px;color:var(--color-dark-gray,#333)}
.lecture-box .lecture-info .subject{font-weight:700;font-size:18px;color:var(--color-dark-gray,#333);letter-spacing:-1px;word-break:keep-all}
.lecture-box .lecture-info .date{font-size:15px;color:var(--color-dark-gray,#333)}
.lecture-box .price-wrap{margin-top:auto}
.lecture-box .price-wrap .discount{font-size:16px}
.lecture-box .price-wrap .discount em{margin-right:3px;font-style:normal;font-weight:500;color:var(--color-red,#dc3545)}
.lecture-box .price-wrap .discount span{color:var(--color-gray,#aaa);text-decoration:line-through}
.lecture-box .price-wrap .price{font-weight:500;font-size:16px;color:var(--color-dark-gray,#333)}
.lecture-box .price-wrap .price strong{font-weight:500;font-size:24px}
@media only screen and (max-width:1024px) {
    .lecture-list{left:0;width:100%;column-gap:20px}
    .lecture-list .lecture-box{width:calc((100% - 40px) / 3);padding:0}
}
@media only screen and (max-width:950px) {
    .lecture-list{left:0;column-gap:30px;width:100%}
    .lecture-list .lecture-box{padding:0;width:calc(50% - 15px)}
}
@media only screen and (max-width:640px) {
    .lecture-list{margin-bottom:0;row-gap:20px}
    .lecture-list .lecture-box{width:100%;margin-bottom:0}
    .lecture-box .lecture-label{top:-13px}
    .lecture-box .lecture-detail>a{padding:22px 5px 5px}
    .lecture-box .lecture-label li{padding:0 10px;font-size:12px;line-height:26px}
    .lecture-box .lecture-info .cate{font-size:12px}
    .lecture-box .lecture-info .name{font-size:13px}
    .lecture-box .lecture-info .subject{margin:3px 0;font-size:16px}
    .lecture-box .lecture-info .date{font-size:13px}
    .lecture-box .price-wrap{margin-top:5px}
    .lecture-box .price-wrap .discount{font-size:14px}
    .lecture-box .price-wrap .price{font-size:14px}
    .lecture-box .price-wrap .price strong{font-size:20px;line-height:1}
}
/* -------- 강의리스트 -------- */
.lecture-view{position:relative}
/* conts */
.lecture-conts-wrap { 
	display:inline-block;
	width:calc(100% - 400px);
	vertical-align:top;
}
.lecture-conts-wrap{display:inline-block;width:calc(100% - 400px);vertical-align:top}
.lecture-conts-wrap .lecture-tit{margin-bottom:20px;font-weight:700;font-size:32px;color:var(--color-dark-gray,#333)}
.lecture-conts-wrap .video-wrap{position:relative;padding-top:56%;width:100%;height:auto}
.lecture-conts-wrap .video-wrap :where(iframe,img){position:absolute;top:0;left:0;z-index:1;width:100%;height:100%}
.lecture-conts-wrap .video-wrap img{object-fit:cover}
@media only screen and (max-width:767px) {
    .lecture-conts-wrap .lecture-tit{margin-bottom:10px;font-size:22px}
}
.lecture-conts-tab{border-bottom:1px solid #eee;display:flex;flex-wrap:wrap}
.lecture-conts-tab li{position:relative;bottom:-1px;display:inline-block;margin-left:40px;width:auto;vertical-align:top;border-bottom:1px solid #eee;}
.lecture-conts-tab li:first-child{margin-left:0}
.lecture-conts-tab li.on:after{content:'';position:absolute;bottom:-1px;left:0;width:100%;height:1px;background:var(--color-primary,#0148d4)}
.lecture-conts-tab li a{display:block;font-size:18px;line-height:37px;color:var(--color-dark-gray,#333)}
.lecture-conts-tab li.on a{font-weight:500;color:var(--color-primary,#0148d4)}
.lecture-conts-box{padding-top:50px;font-size:initial}
.lecture-conts-box .lecture-conts{padding-top:60px}
.lecture-conts-box .lecture-conts .lecture-conts-tit{margin:60px 0 25px;font-weight:700;font-size:24px;color:var(--color-dark-gray,#333);word-break:keep-all;position:relative;z-index:1}
.lecture-conts-box .lecture-conts .lecture-conts-tit span{display:block;font-weight:500;font-size:16px;color:var(--color-primary,#0148d4)}
.lecture-conts-box .lecture-conts .lecture-conts-tit:first-child{margin-top:0}
.fixedTab.fixed{position:fixed;width:1180px;left:50%;top:60px;z-index:20;transform:translateX(-50%)}
.fixedTab.fixed .lecture-conts-tab{width:calc(100% - 400px);position:relative;padding-top:15px;background:#fff}
.fixedTab.fixed .lecture-conts-tab li a{padding:5px 0}
.lecture-view .lecture-cart.fixed{top:20px}
@media only screen and (max-width:1180px) {
    .fixedTab.fixed{left:0;transform:none;width:100%}
    .fixedTab.fixed .lecture-conts-tab{width:calc(100% - 430px);padding-left:30px}
}
@media only screen and (max-width:1024px) {
    .lecture-conts-wrap{width:100%}
    .lecture-view .lecture-cart.fixed{top:auto}
    .fixedTab.fixed .lecture-conts-tab{width:100%}
}
@media only screen and (max-width:767px) {
    .lecture-conts-box .lecture-conts .lecture-conts-tit{margin:40px 0 15px;font-size:18px}
    .lecture-conts-tab li{margin-left:25px}
    .lecture-conts-tab li a{font-size:14px;line-height:30px}
    .lecture-conts-box .lecture-conts{padding-top:40px}
    .fixedTab.fixed{top:126px}
    .fixedTab.fixed .lecture-conts-tab{left:0;transform:none;width:100%;padding:5px 10px 0}
}
/* class */
.lecture-conts-box {container-type:inline-size; container-name:class-info;}
.lecture-conts-box .class-compose{font-size:0}
.lecture-conts-box .class-compose :is(dt,dd){display:inline-block;margin:3px 0;font-weight:400;font-size:16px;word-break:keep-all;vertical-align:top}
.lecture-conts-box .class-compose dt{width:105px;color:var(--color-gray,#aaa)}
.lecture-conts-box .class-compose dd{width:calc(100% - 105px);color:var(--color-dark-gray,#333)}
.class-info {display:flex; gap:10px; margin-top:23px; }
.class-info>div {width:50%; padding:40px;}
.class-info-box {border-radius:8px; background:#20242b url(/html/images/sub/lecture/leture_info_bg.jpg) no-repeat right bottom;}
.class-info .info-title {font-size:21px; color:#333;}
.class-info .class-compose {margin-top:15px; border-top:1px solid #ddd;}
.class-info-box .info-title {color:#fff;}
.class-info-box .class-compose {padding-top:32px;}
.class-info-box .class-compose dt {width:90px;}
.class-info-box .class-compose dd {color:#fff;}
.class-info .lecture-license-box {border:1px solid #ddd; border-radius:8px;}
.lecture-license-box .license-number {margin-top:8px; font-size:18px; font-weight:500; color:#333;}
.lecture-license-box .info-text {margin-top:22px; line-height:21px; font-size:14px; color:#333; word-break:keep-all;}
.lecture-license-box .class-compose {padding-top:19px;}
.lecture-license-box .class-compose dt {width:105px; font-size:14px; font-weight:300; color:#999;}
.lecture-license-box .class-compose dd {font-size:14px; font-weight:300; color:#999;}
.lecture-license-box .btn-license {display:block; width:100%; height:50px; line-height:50px; margin-top:18px; font-size:16px; color:#fff; text-align:center; border-radius:4px; background:linear-gradient(150deg, rgba(69,145,205,1) 0%, rgba(75,167,131,1) 100%);}
@container class-info (max-width:767px) {
    .class-info {flex-wrap:wrap;}
    .class-info>div {width:100%; padding:28px;}
}
@media only screen and (max-width:767px) {
.lecture-conts-box .class-compose :is(dt,dd){font-size:14px}
.lecture-conts-box .class-compose dt{width:80px}
.lecture-conts-box .class-compose dd{width:calc(100% - 80px)}

.class-info {margin-top:20px;}
.class-info .info-title {font-size:18px;}
.class-info-box .class-compose {margin-top:12px; padding-top:26px;}
.lecture-license-box .license-number {margin-top:6px; font-size:16px;}
.lecture-license-box .info-text {margin-top:18px; font-size:13px;}
.lecture-license-box .class-compose :is(dt,dd) {font-size:13px; font-weight:400;}
.lecture-license-box .class-compose dt {width:95px;}
.lecture-license-box .class-compose dd {width:calc(100% - 95px);}
.lecture-license-box .btn-license {margin-top:14px; height:40px; line-height:40px; font-size:14px;}

}
.lecture-conts-box .class-movie{overflow:hidden;width:100%;border-radius:4px;font-size:16px}
.lecture-conts-box .class-movie a{display:block;font-size:0}
.lecture-conts-box .class-movie img{width:100%}
.lecture-conts-box .class-conts-box{padding:20px 0;border-bottom:1px solid #eee}
.lecture-conts-box .class-conts .thumb{overflow:hidden;display:inline-block;width:260px;border-radius:6px;vertical-align:top}
.lecture-conts-box .class-conts .thumb img{width:100%}
.lecture-conts-box .class-conts .class-info{display:inline-block;padding-left:20px;width:calc(100% - 260px);vertical-align:top}
.lecture-conts-box .class-conts .class-info h1{margin-bottom:20px;font-weight:700;font-size:18px;color:var(--color-dark-gray,#333);word-break:keep-all}
.lecture-conts-box .class-conts .class-info h1 span{display:block;font-weight:500;font-size:16px;color:var(--color-primary,#0148d4)}
.lecture-conts-box .class-conts .class-info li{position:relative;margin:2px 0;padding-left:8px;font-size:16px;color:var(--color-dark-gray,#333);word-break:keep-all}
.lecture-conts-box .class-conts .class-info li:before{content:'';position:absolute;top:9px;left:0;width:5px;height:5px;border-radius:50%;background:var(--color-dark-gray,#333)}
@media only screen and (max-width:767px) {
.lecture-conts-box .class-conts-box{padding:10px 0}
.lecture-conts-box .class-conts .thumb{width:130px}
.lecture-conts-box .class-conts .class-info{padding-left:10px;width:calc(100% - 130px)}
.lecture-conts-box .class-conts .class-info h1{margin-bottom:5px;font-size:14px}
.lecture-conts-box .class-conts .class-info h1 span{font-size:13px}
.lecture-conts-box .class-conts .class-info li{padding-left:6px;font-size:11px}
.lecture-conts-box .class-conts .class-info li:before{top:7px;width:3px;height:3px}
.lecture-conts-box .class-movie{font-size:14px}
}
/* curriculum */
.lecture-conts-box .class-curriculum-index{position:relative;display:flex;justify-content:space-between;flex-wrap:wrap}
.lecture-conts-box .class-curriculum-index:after{content:'';position:absolute;top:0;right:0;width:260px;height:160px;z-index:1;opacity:.7}
.lecture-conts-box .class-curriculum-index:nth-of-type(1):after{background:url(/html/images/sub/lecture/curriculum_bg01.png) no-repeat right top}
.lecture-conts-box .class-curriculum-index:nth-of-type(2):after{background:url(/html/images/sub/lecture/curriculum_bg02.png) no-repeat right top}
.class-curriculum-index.bg-none:after {display:none;}
.lecture-conts-box .class-curriculum .lecture-conts-tit + p{margin-top:40px;font-size:16px;color:var(--color-dark-gray,#333)}
.lecture-conts-box .class-curriculum ul + .class-curriculum-index{margin-top:60px}
.lecture-conts-box .class-curriculum ul{margin-top:30px;border-top:1px solid #eee;position:relative;z-index:10}
.lecture-conts-box .class-curriculum ul li{padding:16px 0 17px;border-bottom:1px solid #eee;font-size:18px;color:var(--color-dark-gray,#333)}
.lecture-conts-box .class-curriculum ul li > *{display:inline-block;vertical-align:middle}
.lecture-conts-box .class-curriculum ul li .time{margin-left:30px;font-weight:300;font-size:14px;line-height:15px;color:var(--color-gray,#aaa)}
.lecture-conts-box .class-curriculum ul li .time img{display:inline-block;margin-right:5px;vertical-align:middle}
.lecture-conts-box .class-curriculum ul li strong{margin-left:20px;padding:0 10px;border-radius:13px;border:1px solid var(--color-primary,#0148d4);font-weight:400;font-size:14px;line-height:23px;color:var(--color-primary,#0148d4);display:inline-block}
.lecture-conts-box .class-curriculum .image-box{max-width:300px;aspect-ratio:3/2}
.lecture-conts-box .class-curriculum .image-box img{width:100%;height:100%;object-fit:contain}
@media only screen and (max-width:767px) {
    .lecture-conts-box .class-curriculum .lecture-conts-tit + p{margin-top:20px;font-size:14px}
    .lecture-conts-box .class-curriculum ul + .class-curriculum-index{margin-top:30px}
    .lecture-conts-box .class-curriculum ul{margin-top:40px}
    .lecture-conts-box .class-curriculum ul li{padding:10px 0 11px;font-size:15px}
    .lecture-conts-box .class-curriculum ul li .time{margin-left:15px;font-size:12px;line-height:13px}
    .lecture-conts-box .class-curriculum ul li .time img{position:relative;top:-1px;margin-right:3px;height:12px}
    .lecture-conts-box .class-curriculum ul li strong{margin-left:10px;padding:0 7px;font-size:12px;line-height:18px}
    .lecture-conts-box .class-curriculum .image-box{margin-top:15px;max-width:100%;width:100%}
    .lecture-conts-box .class-curriculum-index:after{max-width:260px;width:36vw;background-size:contain!important}
}
/* review */
.lecture-review-box{margin-bottom:43px;padding-bottom:40px;border-radius:10px;background:#fff;box-shadow:2px 0 10px rgba(0,0,0,.15)}
.lecture-review-box a{display:block;padding:40px 40px 0}
.lecture-review-box ul{padding-left:50px;background:url(/html/images/common/login_icon.png) no-repeat left center}
.lecture-review-box ul li{display:block;font-size:0}
.lecture-review-box .grade{margin-bottom:4px}
.lecture-review-box .grade .grade-wrap{display:inline-block;width:96px;height:16px;background:url(/html/images/sub/board/grade.png) no-repeat left center;text-align:left;vertical-align:middle}
.lecture-review-box .grade .grade-wrap span{display:inline-block;height:16px;background:url(/html/images/sub/board/grade_on.png) no-repeat left center;vertical-align:top}
.lecture-review-box ul .name{display:inline-block;margin-right:20px;font-weight:700;font-size:18px;color:var(--color-dark-gray,#333);vertical-align:middle}
.lecture-review-box ul .date{display:inline-block;font-weight:300;font-size:16px;color:var(--color-gray,#aaa);vertical-align:middle}
.lecture-review-box .subject{overflow:hidden;display:block;margin:37px 0 17px;width:100%;font-weight:700;font-size:18px;color:var(--color-dark-gray,#333);white-space:nowrap;text-overflow:ellipsis}
.lecture-review-box .conts{overflow:hidden;display:block;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;height:88px;font-size:15px;line-height:22px;color:var(--color-dark-gray,#333);word-break:keep-all}
.lecture-review-box .reply-cont{margin:20px 40px 0;padding-top:20px;border-top:1px solid #eee}
.lecture-review-box .reply-cont .conts{height:auto;-webkit-line-clamp:unset;text-overflow:clip}
.lecture-review-wrap + [class^="btn"]{display:block;margin-top:60px}
@media only screen and (max-width:767px) {
    .lecture-review-box{margin-bottom:20px;padding-bottom:20px}
    .lecture-review-box a{padding:20px 20px 0}
    .lecture-review-box ul{padding-left:45px;background-size:auto 35px}
    .lecture-review-box .grade .grade-wrap{width:72px;height:12px;background-size:auto 100%}
    .lecture-review-box .grade .grade-wrap span{height:12px;background-size:auto 100%}
    .lecture-review-box ul .name{margin-right:10px;font-size:15px}
    .lecture-review-box ul .date{font-size:13px}
    .lecture-review-box .subject{margin:17px 0 7px;font-size:15px}
    .lecture-review-box .conts{height:72px;font-size:13px;line-height:18px}
    .lecture-review-box .reply-cont{margin:15px 20px 0;padding-top:15px}
    .lecture-review-wrap + [class^="btn"]{margin-top:30px}
}
/* teacher */
.lecture-teacher-list{position:relative;display:grid;gap:70px 30px;grid-template-columns:repeat(auto-fill,minmax(225px,1fr))}
.lecture-teacher-list li .teacher-photo{border-radius:10px}
.lecture-teacher-list li .teacher-name{margin-top:5px;text-align:left}
@lmedia only screen and (max-width:767px) {
    .lecture-teacher-list{gap:30px 4%;grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}
    .lecture-teacher-list li .teacher-name{font-size:16px}
}
@media only screen and (max-width:480px) {
    .lecture-teacher-list{grid-template-columns:repeat(auto-fill,minmax(153px,1fr))}
}
/* cart */
.lecture-cart{display:inline-block;margin-left:20px;padding:30px;width:380px;border-radius:4px;border:1px solid #ddd;background:#fff;vertical-align:top;position:absolute;top:0;right:auto}
@media only screen and (min-width:1025px) {
    .lecture-cart.fixed{position:fixed;top:0;margin-top:100px}
    .lecture-cart.on{position:absolute;top:auto;bottom:0;margin-top:0}
}
.lecture-cart .name{margin-bottom:10px;display:flex;flex-wrap:wrap}
.lecture-cart .name li{position:relative;display:inline-block;padding:0 10px;font-size:16px;color:var(--color-dark-gray,#333);vertical-align:top}
.lecture-cart .name li:first-child{padding-left:0}
.lecture-cart .name li + li:before{content:'';position:absolute;top:50%;left:0;margin-top:-7px;width:1px;height:14px;background:#ddd}
.lecture-cart .name .teacher-name{color:var(--color-primary,#0148d4)}
.lecture-cart .subject{margin-bottom:10px;font-weight:700;font-size:22px;line-height:30px;color:var(--color-dark-gray,#333);word-break:keep-all}
.lecture-cart .date{font-size:16px;color:var(--color-gray,#aaa);word-break:keep-all}
.lecture-cart .desc {color:#333;}
.lecture-cart dl{font-size:0}
.lecture-cart dl :is(dt,dd){display:inline-block;vertical-align:top}
.lecture-cart dl dd{text-align:right}
.lecture-cart .info{margin-top:17px;padding-top:12px;border-top:1px solid #ddd}
.lecture-cart .info :is(dt,dd){margin:3px 0;font-weight:400;font-size:16px}
.lecture-cart .info dt{width:90px;color:var(--color-gray,#aaa)}
.lecture-cart .info dd{width:calc(100% - 90px);color:var(--color-dark-gray,#333); text-align:left;}
.lecture-cart .price{margin-top:17px;padding-top:20px;border-top:1px solid #ddd}
.lecture-cart .price dt{width:calc(100% - 120px)}
.lecture-cart .price dd{width:120px;font-weight:700;font-size:18px;color:var(--color-dark-gray,#333)}
.lecture-cart .price dd > span{display:block;font-weight:400;font-size:14px;color:var(--color-gray,#aaa);text-decoration:line-through}
.lecture-cart .price dd em{display:inline-block;font-style:normal;font-weight:700;color:var(--color-red,#dc3545)}
.lecture-cart .lecture-price{overflow-x:hidden;margin-top:12px;padding-top:15px;max-height:87px}
.lecture-cart .lecture-price :is(dt,dd){display:inline-block;margin:5px 0;vertical-align:middle}
.lecture-cart .total-price{margin-top:40px}
.lecture-cart .total-price dt{width:80px;font-weight:400;font-size:16px}
.lecture-cart .total-price dd{width:calc(100% - 80px);font-weight:700;font-size:24px;color:var(--color-dark-gray,#333)}
.lecture-cart .m-price{display:none;background:var(--color-light-gray2,#f5f5f7);font-size:0;text-align:center}
.lecture-cart .m-price *{display:inline-block;font-size:18px;line-height:45px;vertical-align:top}
.lecture-cart .m-price em{font-style:normal;font-weight:700;color:var(--color-red,#dc3545)}
.lecture-cart .m-price span{margin:0 10px;font-weight:400;color:var(--color-gray,#aaa);text-decoration:line-through}
.lecture-cart .m-price strong{font-weight:700;color:var(--color-dark-gray,#333)}
.lecture-cart .lecture-cart-btn{padding-top:10px;display:flex;gap:0 4px; background:#fff;}
.lecture-cart .lecture-cart-btn li{position:relative;width:50px}
.lecture-cart .lecture-cart-btn li a{display:block;width:100%;height:100%}
/* .lecture-cart .lecture-cart-btn li:nth-child(3){width:calc(100% - 108px)} */
.lecture-cart .lecture-cart-btn li a img{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}
.lecture-cart .lecture-cart-btn .btn-buy {flex-grow:1;}
.m-lecture-cart-close{display:none}
/* 등록번호,안내사항 */
.lecture-cart .regist-number {display:inline-flex; margin-bottom:16px; padding:8px 10px; background:#f3f3f3; border-radius:4px;}
.lecture-cart .regist-number dt {line-height:1em; font-size:14px; color:#999;}
.lecture-cart .regist-number dd {margin-left:10px; padding-left:11px; line-height:1em; font-size:14px; color:#333; border-left:1px solid #ddd;}
.lecture-cart .notice-list {margin-top:20px; padding-top:18px; border-top:1px solid #ddd;}
.lecture-cart .notice-list li {position:relative; padding-left:18px; line-height:21px; font-size:13px; font-weight:300; color:#aaa;}
.lecture-cart .notice-list li::before {content:'ⓘ'; position:absolute; top:0; left:0; font-size:13px;}

@media only screen and (max-width:1024px) {
    .lecture-view.on:before{content:'';position:fixed;top:0;left:0;z-index:110;width:100%;height:100%;background:rgba(0,0,0,.8)}
    .lecture-cart{position:fixed;bottom:0;left:0;z-index:110;margin-left:0;margin-top:0;padding:15px;width:100%;border-radius:0;border:0 none;background:#fff;box-shadow:0 0 8px rgba(0,0,0,.1);top:auto}
    .lecture-cart:before{content:'';position:absolute;bottom:0;left:0;width:100%;height:100%;z-index:-1;background:#fff}
    .lecture-cart :is(.name,.subject,.date,.info,.total-price){display:none}
	.lecture-cart .desc {font-size:14px; color:#333; line-height:2em; background:#fff;}
    .lecture-cart .m-price{display:block}
    .lecture-cart .price{margin-top:0;border-top:0 none}
    .lecture-cart .lecture-price{margin-top:12px;margin-bottom:15px;padding:12px 0 0;border-top:1px solid #ddd}
    .m-lecture-cart{position:fixed;bottom:-300px;left:0;z-index:-1;padding:12px 15px 0;background:#fff;box-shadow:0 -8px 8px rgba(0,0,0,.05);width:100%;transition:.3s}
    /* .m-lecture-cart.on{bottom:128px !important} */
    .m-lecture-cart .m-lecture-cart-close{display:block;margin-bottom:-5px;width:100%;height:30px;background:url(/html/images/sub/lecture/player_arrow.png) no-repeat center center;text-indent:-9999em}
    /* 등록번호,안내사항 */
    .lecture-cart .regist-number {display:none;}
    .lecture-cart .notice-list {display:none;}
}
@media only screen and (max-width:767px) {
        .lecture-cart .m-price *{font-size:15px;line-height:40px}
        /* .m-lecture-cart.on{bottom:119px !important} */
}
/* 결제정보 및 환불정보 */
.lecture-conts.lecture-pay-info {margin-top:60px; padding:33px 38px 40px; border:1px solid #ddd; border-radius:8px;}
.lecture-conts.lecture-pay-info .lecture-conts-tit {margin:0;}
.lecture-pay-info .pay-sub-title {margin-top:20px; font-size:16px; font-weight:500; color:#4481de;}
.lecture-pay-info .pay-list {margin-top:12px;}
.lecture-pay-info .pay-list li {position:relative; padding-left:11px; font-size:16px; color:#333; word-break:keep-all;}
.lecture-pay-info .pay-list li:before {content:''; position:absolute; top:10px; left:0; width:3px; height:3px; background:#333; border-radius:50%;}
.lecture-pay-info .pay-text {position:relative; margin-top:12px; padding-left:11px; font-size:16px; color:#333; word-break:keep-all;}
.lecture-pay-info .pay-text:before {content:''; position:absolute; top:10px; left:0; width:3px; height:3px; background:#333; border-radius:50%;}
.lecture-pay-info .pay-table {display:flex; margin-top:5px; border:1px solid #ddd; border-top:none;}
.lecture-pay-info .pay-table dl {width:25%;}
.lecture-pay-info .pay-table dl + dl {border-left:1px solid #ddd;}
.lecture-pay-info .pay-table dl :is(dt, dd) {height:38px; line-height:38px; font-size:14px; color:#333; text-align:center; }
.lecture-pay-info .pay-table dl dt {background:#f8f8f8; border-top:1px solid #ddd;}
.lecture-pay-info .pay-table dl dd {border-top:1px solid #ddd;}
@media only screen and (max-width:767px) {
    .lecture-conts.lecture-pay-info {padding:23px 26px 28px;}
    .lecture-pay-info .pay-sub-title {margin-top:16px; font-size:14px;}
    .lecture-pay-info .pay-list {margin-top:10px;}
    .lecture-pay-info .pay-list li {font-size:14px;}
    .lecture-pay-info .pay-text {font-size:14px;}
    .lecture-pay-info .pay-table {flex-wrap:wrap;}
    .lecture-pay-info .pay-table dl {width:50%;}
    .lecture-pay-info .pay-table dl :is(dt, dd) {height:32px; line-height:32px; font-size:13px;}
    .lecture-pay-info .pay-table dl:nth-child(3) {border-left:none;}
}

/* -------- player -------- */
.lecture-player{padding:100px;width:100%;min-height:100vh;background:var(--color-light-gray2,#f5f5f7)}
.lecture-player header{position:fixed;top:0;left:0;z-index:10;width:100%;height:80px;background:#fff;box-shadow:2px 0 5px rgba(0,0,0,.1)}
.lecture-player header h1{display:inline-block;padding:10px 20px;vertical-align:middle;position:absolute;top:50%;left:0;transform:translateY(-50%)}
.lecture-player header h1 a{display:block;line-height:0}
.lecture-player header h1 img{height:100%;max-height:59px}
.lecture-player .login-utils{position:absolute;top:50%;right:20px;margin-top:-20px;padding-right:70px;background:url(/html/images/common/login_icon.png) no-repeat right center}
.lecture-player .login-utils li a{display:block;font-weight:500;font-size:16px;line-height:40px}
.lecture-player .login-utils .join a{color:var(--color-gray,#aaa)}
.lecture-player .login-utils .admin a{color:#000}
.player-wrap{position:relative}
.player-wrap .player-box{width:calc(100% - 400px)}
.player-wrap .player-box .video-wrap{position:relative;padding-top:56%;width:100%;height:auto}
.player-wrap .player-box iframe{position:absolute;top:0;left:0;z-index:1;width:100%;height:100%}
.player-wrap .player-box .player_view{position:absolute;top:0;left:0;z-index:1;width:100%;height:100%}
.player-wrap .player-controller{display:flex;padding:24px 40px 24px 20px;border:1px solid #eee;background:#fff}
.player-wrap .player-controller dl{display:inline-block;/*width:calc(100% - 160px);*/vertical-align:middle}
.player-wrap .player-controller dt{display:block;margin-bottom:13px;font-weight:700;font-size:16px;color:var(--color-primary,#0148d4)}
.player-wrap .player-controller dd{display:block;font-weight:700;font-size:22px;color:var(--color-dark-gray,#333);word-break:keep-all}
.player-wrap .player-controller-btn{display:flex;/*width:260px;*/margin-left:auto;text-align:center;justify-content:center}
.player-wrap .player-controller-btn li{display:inline-block;margin-left:40px;min-width:60px; flex-shrink:0; vertical-align:middle}
.player-wrap .player-controller-btn li:first-child{margin-left:0}
.player-wrap .player-controller-btn li span{display:block;margin-top:9px;font-weight:700;font-size:16px;color:var(--color-dark-gray,#333)}
.player-wrap .player-controller-btn li.off{opacity:.4}
.player-wrap .player-controller-btn li img{vertical-align:top}
.player-wrap .player-list-wrap{position:absolute;top:0;right:0;height:100%;width:400px;border:1px solid #eee;vertical-align:top;overflow-y:auto}
.player-list-wrap .player-list ul{display:none;background:var(--color-light-gray2,#f5f5f7)}
.player-list-wrap .player-list.on ul{display:block}
.player-list-wrap .player-list > a{display:block;padding:17px 20px;background:#fff url(/html/images/sub/lecture/player_arrow.png) no-repeat 94% center;border-top:1px solid #eee}
.player-list-wrap .player-list.on > a{background:#fff url(/html/images/sub/lecture/player_arrow_on.png) no-repeat 94% center}
.player-list-wrap .player-list > a > strong{display:block;font-weight:400;font-size:17px;color:var(--color-dark-gray,#333)}
.player-list-wrap .player-list > a > span{display:block;font-weight:400;font-size:16px;color:var(--color-gray,#aaa)}
.player-list-wrap .player-list li{border-top:1px solid #eee}
.player-list-wrap .player-lecture-list li a{display:block;padding:16px 20px}
.player-list-wrap .player-lecture-list li strong{display:block;font-weight:400;font-size:18px;color:var(--color-dark-gray,#333)}
.player-list-wrap .player-lecture-list li a > span{display:inline-block;margin-top:7px;font-weight:300;font-size:14px;line-height:15px;color:var(--color-gray,#aaa);vertical-align:top}
.player-list-wrap .player-lecture-list li a > span img{display:inline-block;margin-right:5px;vertical-align:top}
.player-list-wrap .player-lecture-list li.on a strong{font-weight:500;color:var(--color-primary,#0148d4)}
.player-list-wrap .player-lecture-list li a strong span:not(.lecture-password){display:inline-block;margin-left:20px;min-width:72px; padding:0 9px; border-radius:13px;border:1px solid var(--color-primary,#0148d4);background:#fff;font-size:14px;line-height:23px;color:var(--color-primary,#0148d4);text-align:center;vertical-align:top}
.player-list-wrap .player-lecture-list li .lecture-password{display:block;margin-top:8px;font-size:15px}
.player-list-wrap .player-lecture-list li a strong span.disabled {margin-left:5px; color:var(--color-gray,#aaa); border:1px solid var(--color-gray,#aaa);}
@media only screen and (max-width:1300px) {
	#lecturePlayer{padding-left:30px;padding-right:30px}
    .player-wrap .player-controller{flex-direction:column}
    .player-wrap .player-controller-btn {margin-top:20px;}
}
@media only screen and (max-width:1024px) {
	.player-wrap .player-box{width:100%}
    .player-wrap .player-list-wrap{margin-top:30px;width:100%;position:relative}
    .player-wrap .player-controller-btn li {margin-left:30px;}
}
@media only screen and (max-width:768px) {
	#lecturePlayer{padding:90px 20px 40px}
    #lecturePlayer header{height:70px}
    #lecturePlayer header h1 img{max-height:30px}
    #lecturePlayer .login-utils{margin-top:-15px;padding-right:40px;background-size:auto 100%}
    #lecturePlayer .login-utils li a{font-size:14px;line-height:30px}
    .player-wrap .player-controller{padding:20px 20px 25px;}
    .player-wrap .player-controller dl{width:100%}
    .player-wrap .player-controller dt{margin-bottom:8px;font-size:14px}
    .player-wrap .player-controller dd{font-size:18px}
    .player-wrap .player-controller-btn{margin:20px auto 0}
    .player-wrap .player-controller-btn li{margin-left:20px;width:50px}
    .player-wrap .player-controller-btn li img{height:18px}
    .player-wrap .player-controller-btn li span{margin-top:4px;font-size:13px}
    .player-list-wrap .player-list > a{padding:10px 15px}
    .player-list-wrap .player-lecture-list li a{padding:12px 15px}
    .player-list-wrap .player-list > a > strong{font-size:14px}
    .player-list-wrap .player-list > a > span{margin-bottom:3px;font-size:13px}
    .player-list-wrap .player-lecture-list li strong{font-size:15px}
    .player-list-wrap .player-lecture-list li.on a strong span{margin-left:10px;padding:0 8px;width:auto;font-size:12px;line-height:20px}
    .player-list-wrap .player-lecture-list li a > span{margin-top:5px;font-size:12px;line-height:13px}
    .player-list-wrap .player-lecture-list li a > span img{margin-top:1px;width:13px}
}
/* 강사소개 */
/* -------- 강사리스트 -------- */
.teacher-list{position:relative;display:grid;grid-template-columns:repeat(auto-fill,minmax(225px,1fr));width:100%;gap:50px 20px}
.teacher-box{vertical-align:top;width:100%}
.teacher-box a{display:block}
.teacher-box .teacher-photo{overflow:hidden;border-radius:35%;border:1px solid #eee;background:var(--color-light-gray2,#f5f5f7);aspect-ratio:1/1}
.teacher-box .teacher-photo img{width:100%;height:100%;object-fit:cover}
.teacher-box .teacher-name{display:block;margin-top:20px;font-weight:700;font-size:20px;color:#000;text-align:center}
@media only screen and (max-width:640px) {
    .teacher-list{grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:30px 10px}
    .teacher-box .teacher-name{margin-top:10px;font-size:17px}
    .teacher-box .teacher-name strong{margin-top:2px;font-size:17px}
}
@media only screen and (max-width:480px) {
    .teacher-list{grid-template-columns:repeat(auto-fill,minmax(135px,1fr))}
}
/* -------- 강사상세 -------- */
.teacher-view{display:flex;flex-wrap:wrap}
.teacher-view .teacher-photo{width:40.678%}
.teacher-view .teacher-photo img{overflow:hidden;width:100%;border-radius:4px;border:1px solid #eee;vertical-align:top}
.teacher-view .teacher-detail{padding-left:60px;width:calc(100% - 40.678%)}
.teacher-detail .teacher-detail-header{margin-bottom:60px}
.teacher-detail .teacher-detail-header .cate{display:inline-block;margin-bottom:12px;padding:0 12px;border-radius:4px;border:1px solid #eee;font-weight:500;font-size:16px;line-height:30px;color:var(--color-gray,#aaa)}
.teacher-detail .teacher-detail-header .name{margin-bottom:20px;font-weight:700;font-size:24px;color:var(--color-dark-gray,#333)}
.teacher-detail .teacher-detail-header .name strong{font-size:32px}
.teacher-detail .teacher-detail-header .slogan{font-size:24px;color:var(--color-dark-gray,#333);word-break:keep-all}
.teacher-detail .teacher-info{margin-top:45px}
.teacher-detail .teacher-info h1{margin-bottom:15px;font-weight:700;font-size:20px;color:var(--color-dark-gray,#333)}
.teacher-detail .teacher-info ul li{margin:3px 0;font-size:16px;color:var(--color-dark-gray,#333);word-break:keep-all}
.teacher-view .lecture-list{left:0;margin-top:45px;margin-bottom:-30px;width:100%}
.teacher-view .lecture-list h1{margin-bottom:20px;font-weight:700;font-size:20px;color:var(--color-dark-gray,#333)}
.teacher-view .lecture-list ul{width:100%;font-size:0}
.teacher-view .lecture-list ul li{display:inline-block;margin-left:30px;margin-bottom:30px;max-width:228px;width:calc(50% - 15px);vertical-align:top}
.teacher-view .lecture-list ul li:nth-child(2n+1){margin-left:0}
.teacher-view .lecture-list ul li a{display:block}
.teacher-view .lecture-list ul li .thumb{overflow:hidden;border-radius:6px}
.teacher-view .lecture-list ul li .thumb img{width:100%}
.teacher-view .lecture-list ul li .subject{display:block;margin-top:15px;font-size:16px;line-height:20px;color:var(--color-dark-gray,#333);word-break:keep-all}
@media only screen and (max-width:767px) {
.teacher-view .teacher-photo{width:100%;text-align:center}
.teacher-view .teacher-photo img{max-width:100%;width:auto}
.teacher-view .teacher-detail{margin-top:50px;padding:0 30px;width:100%}
}
@media only screen and (max-width:640px) {
.teacher-view .teacher-detail{margin-top:30px;padding:0;width:100%}
.teacher-detail .teacher-detail-header{margin-bottom:30px}
.teacher-detail .teacher-detail-header .cate{margin-bottom:10px;padding:0 10px;font-size:14px;line-height:25px}
.teacher-detail .teacher-detail-header .name{margin-bottom:10px;font-size:18px}
.teacher-detail .teacher-detail-header .name strong{font-size:24px}
.teacher-detail .teacher-detail-header .slogan{font-size:18px}
.teacher-detail .teacher-info{margin-top:30px}
.teacher-detail .teacher-info h1{margin-bottom:10px;font-size:16px}
.teacher-view .lecture-list{margin-bottom:-20px}
.teacher-view .lecture-list h1{margin-bottom:10px;font-size:16px}
.teacher-view .lecture-list ul li{margin-left:10px;margin-bottom:20px;width:calc(50% - 5px)}
.teacher-view .lecture-list ul li .subject{margin-top:10px;font-size:14px;line-height:18px}
}

/* 학습도서 */
/* -------- 상세 -------- */
.shop-view-header{margin-bottom:60px;display:flex;flex-wrap:wrap}
.shop-view-header > *{display:inline-block;vertical-align:top}
.shop-view-header .goods-img-wrap {position:relative; height:520px; width:45.764%;}
.shop-view-header .goods-img-wrap .goods-img-area {height:100%; overflow:hidden;}
.shop-view-header .goods-img{background:#eee;text-align:center}
.shop-view-header .goods-img a{display:block}
.shop-view-header .goods-img img{display:inline-block; width:100%; height:100%; object-fit:contain; box-shadow:10px 0 10px rgba(0,0,0,.15)}
.goods-img-wrap .swiper-pagination-bullets.swiper-pagination-horizontal{bottom:15px;font-size:0}
.goods-img-wrap .swiper-pagination .swiper-pagination-bullet{width:15px;height:15px;background:var(--color-gray,#aaa);border-radius:50%; opacity:1;}
.goods-img-wrap .swiper-pagination .swiper-pagination-bullet-active{background:var(--color-primary, #0148d4)}
.goods-img-wrap .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet{margin:0 4px}
.shop-view-header .goods-info{width:calc(100% - 45.764%);padding-left:5%}
.shop-view-header .goods-info .goods-tit{font-weight:500;font-size:18px;line-height:1.2;color:var(--color-dark-gray,#333);word-break:keep-all}
.shop-view-header .goods-info .goods-tit strong{display:block;font-weight:700;font-size:28px}
.shop-view-header .goods-info .goods-detail{margin-top:6px;margin-bottom:35px;font-size:0}
.shop-view-header .goods-info .goods-detail li{position:relative;display:inline-block;padding:0 5px;font-weight:300;font-size:14px;color:var(--color-gray,#aaa);vertical-align:top}
.shop-view-header .goods-info .goods-detail li:first-child{padding-left:0}
.shop-view-header .goods-info .goods-detail li:after{content:'';position:absolute;top:50%;right:0;margin-top:-7px;width:1px;height:14px;background:#b5b5b5}
.shop-view-header .goods-info .goods-detail li:last-child:after{display:none}
.shop-view-header .goods-info .price{margin-bottom:30px}
.shop-view-header .goods-info .price li{font-weight:500;font-size:16px;color:var(--color-dark-gray,#333)}
.shop-view-header .goods-info .price li span{font-weight:400;color:var(--color-gray,#aaa); text-decoration:line-through;}
.shop-view-header .goods-info .price li strong{font-weight:700;font-size:24px;color:var(--color-dark-gray,#333)}
.shop-view-header .goods-info .price .point{margin-top:5px;font-weight:700;font-size:18px;color:var(--color-primary,#0148d4)}
.shop-view-header .goods-info .book-info{margin-bottom:35px;font-size:0}
.shop-view-header .goods-info .book-info dt,.shop-view-header .goods-info .book-info dd{display:inline-block;margin:4px 0;font-weight:400;font-size:16px;color:var(--color-dark-gray,#333);word-break:keep-all;vertical-align:top}
.shop-view-header .goods-info .book-info dt{width:100px;color:var(--color-gray,#aaa)}
.shop-view-header .goods-info .book-info dd{width:calc(100% - 100px)}
.shop-view-header .shop-option{margin-bottom:50px;padding-top:30px;border-top:1px solid #ddd}
.shop-view-header .shop-option > ul{display:flex; justify-content:space-between; align-items:center; font-size:0;}
.shop-view-header .shop-option > ul > li{display:flex; align-items:center; flex-wrap:wrap; gap:10px; /*width:240px;*/vertical-align:top}
.shop-view-header .shop-option > ul > li:last-child{/*width:calc(100% - 240px);*/ justify-content:flex-end; text-align:right}
.shop-view-header .shop-option label{display:inline-block;/*width:100px;*/font-size:16px;line-height:22px;color:var(--color-dark-gray,#333);vertical-align:top}
.shop-view-header .shop-option > ul > li:last-child label{/*width:110px;*/text-align:left}
.shop-view-header .shop-option label + *{display:inline-block;vertical-align:top}
.shop-view-header select{width:120px}
.shop-view-header .shop-option > ul > li strong{font-weight:700;font-size:24px;line-height:38px;color:var(--color-dark-gray,#333)}
.shop-view-header .goods-info .shop-cart-btn{display:flex;gap:10px}
.shop-view-header .goods-info .shop-cart-btn li{width:calc(25% - 10px);flex-grow:1}
.shop-view-header .goods-info .shop-cart-btn li:last-child{width:50%}
.shop-view-header .goods-info .shop-cart-btn li :is(a,button){display:flex; align-items:center; justify-content:center; gap:10px; height:100%;min-width:auto;width:100%}
.shop-view-header .goods-info .shop-cart-btn li .bd-gray{color:var(--color-dark-gray,#333)}
.shop-view-header .goods-info .shop-cart-btn li a img{position:relative;display:inline-block;}
@media only screen and (max-width:1024px) {
.shop-view-header .goods-img-wrap {width:100%; height:420px;}
.shop-view-header .goods-info{margin-top:5%;padding-left:0;width:100%}
}
@media only screen and (max-width:767px) {
.shop-view-header .goods-img-wrap {height:44vw; min-height:200px;}
/* .shop-view-header .goods-img img{max-width:40%} */
.goods-img-wrap .swiper-pagination-bullets.swiper-pagination-horizontal {bottom:10px;}
.goods-img-wrap .swiper-pagination .swiper-pagination-bullet {width:12px; height:12px;}
.shop-view-header .goods-info .goods-tit{font-size:14px}
.shop-view-header .goods-info .goods-tit strong{margin-top:3px;font-size:19px}
.shop-view-header .goods-info .goods-detail{margin:3px 0 25px}
.shop-view-header .goods-info .goods-detail li{font-size:12px}
.shop-view-header .goods-info .goods-detail li:after{margin-top:-5px;height:10px}
.shop-view-header .goods-info .price{margin-bottom:20px}
.shop-view-header .goods-info .price li{font-size:13px}
.shop-view-header .goods-info .price li strong{font-size:20px}
.shop-view-header .goods-info .price .point{margin-top:2px;font-size:15px}
.shop-view-header .goods-info .book-info{margin-bottom:0}
.shop-view-header .goods-info .book-info dt,.shop-view-header .goods-info .book-info dd{margin:2px 0;font-size:13px}
.shop-view-header .goods-info .book-info dt{width:70px}
.shop-view-header .goods-info .book-info dd{width:calc(100% - 70px)}
.shop-view-header .shop-menu-btn{position:fixed;bottom:0;left:0;z-index:50;padding:15px;width:100%;background:#fff;box-shadow:0 0 10px rgba(0,0,0,.15)}
.shop-view-header .shop-option{margin-bottom:10px;padding:5px 20px;border-top:0 none;background:var(--color-light-gray2,#f5f5f7)}
.shop-view-header .shop-option label{/*width:60px;*/font-size:13px;line-height:30px}
.shop-view-header .shop-option > ul > li strong{font-size:18px;line-height:30px}
.shop-view-header .shop-option > ul > li{/*width:160px*/ gap:7px;}
/*.shop-view-header .shop-option > ul > li:last-child{width:calc(100% - 160px)} */
.shop-view-header .shop-option > ul > li:last-child label{/*width:65px;*/font-size:11px}
.shop-view-header .shop-option .quantity-wrap{width:82px}
.shop-view-header .shop-option .quantity-wrap button{width:25px;height:30px}
.shop-view-header .shop-option .quantity-wrap input{width:30px;height:30px;font-size:15px}
.shop-view-header .shop-option select{padding:0 10px;width:100px;height:30px;font-size:15px;background-size:auto 5px}
.shop-view-header .goods-info .shop-cart-btn li{margin-left:4px}
.shop-view-header .goods-info .shop-cart-btn li:first-child{margin-left:0}
.shop-view-header .goods-info .shop-cart-btn li:last-child{width:calc(100% - 108px)}
.shop-view-header .goods-info .shop-cart-btn :is(li:nth-of-type(1),li:nth-of-type(2)){width:50px}
.shop-view-header .goods-info .shop-cart-btn :is(li:nth-of-type(1),li:nth-of-type(2)) a{position:relative;font-size:0}
.shop-view-header .goods-info .shop-cart-btn :is(li:nth-of-type(1),li:nth-of-type(2)) a img{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);margin-right:0}
}
.shop-view-detail > section{padding-top:45px;display:none}
.shop-view-detail > section.on{display:block}
.shop-view-detail .detail-contents{padding-top:25px}
.shop-view-tab{border-bottom:2px solid #eee;display:flex;flex-wrap:wrap}
.shop-view-tab li{display:inline-block;margin-right:40px;width:auto;vertical-align:top}
.shop-view-tab li:last-child{margin-right:0}
.shop-view-tab li a{position:relative;display:block;font-size:20px;line-height:40px;color:var(--color-dark-gray,#333)}
.shop-view-tab li.on a{font-weight:700}
.shop-view-tab li.on a:after{content:'';position:absolute;bottom:-2px;left:0;width:100%;height:4px;background:var(--color-primary,#0148d4)}
@media only screen and (max-width:768px) {
.shop-view-tab li{margin-right:25px}
.shop-view-tab li a{font-size:18px;line-height:36px}
.shop-view-detail .detail-contents{padding-top:15px}
.shop-view-detail > section{padding-top:25px}
}
@media only screen and (max-width:640px) {
.shop-view-tab li{margin-right:15px}
.shop-view-tab li a{font-size:14px;line-height:32px}
.shop-view-tab li.on a:after{height:3px}
}

.slide-tab-area {overflow:hidden;}
.slide-tab-area :is(.basic-tab,.lecture-conts-tab) {flex-wrap:nowrap;}
.basic-tab{display:flex;flex-wrap:wrap;border-bottom:2px solid #eee;}
.basic-tab li{position:relative; display:inline-block;padding-right:40px;width:auto;vertical-align:top;border-bottom:2px solid #eee; bottom:-2px;}
.basic-tab li:last-child{padding-right:0}
.basic-tab li a{position:relative;display:block;font-size:20px;line-height:40px;color:var(--color-dark-gray,#333)}
.basic-tab li.on a{font-weight:700}
.basic-tab li.on a:after{content:'';position:absolute;bottom:-2px;left:0;width:100%;height:4px;background:var(--color-primary,#0148d4)}
@media only screen and (max-width:1024px) {
.slide-tab-area {width:calc(100% + 30px);}
.basic-tab li{padding-right:30px}
}
@media only screen and (max-width:768px) {
.slide-tab-area {width:calc(100% + 20px);}
.basic-tab li{padding-right:25px}
.basic-tab li a{font-size:18px;line-height:36px}
}
@media only screen and (max-width:640px) {
.basic-tab li{padding-right:15px}
.basic-tab li a{font-size:14px;line-height:32px}
.basic-tab li.on a:after{height:3px}
}

.shop-view-detail .shop-view-tit{display:block;margin:45px 0 15px;font-weight:700;font-size:24px;color:var(--color-dark-gray,#333)}
.shop-view-detail .tab-conts-wrap>.shop-view-tit:first-child{margin-top:0}
.shop-view-detail .shop-view-tit span{font-size:18px}
.shop-view-detail p{line-height:1.4em; font-weight:400;font-size:16px;color:var(--color-dark-gray,#333);word-break:keep-all}
.shop-view-detail ul + ul{margin-top:15px}
.shop-view-detail ul li{font-weight:400;font-size:16px;color:var(--color-dark-gray,#333);word-break:keep-all}
.detail-contents .text-tiny{font-size:.7em}
.detail-contents .text-small{font-size:.85em}
.detail-contents .text-big{font-size:1.4em}
.detail-contents .text-huge{font-size:1.8em}
.detail-contents img{max-width:100%}
@media only screen and (max-width:767px) {
.shop-view-detail .shop-view-tit{margin:25px auto 8px;font-size:16px}
.shop-view-detail .shop-view-tit span{font-size:14px}
.shop-view-detail p,.shop-view-detail ul li{font-size:12px}
}

.shop-view-detail .shop-view-banner{position:relative;margin-top:50px;padding:11.865% 0;width:100%;background:#e8e2e4 url(/html/images/sub/shop/shop_view_banner.jpg) no-repeat right center;background-size:cover}
.shop-view-detail .shop-view-banner h1{position:absolute;top:50%;left:7%;transform:translateY(-50%);padding-top:5px;font-weight:400;font-size:20px;color:var(--color-dark-gray,#333)}
.shop-view-detail .shop-view-banner h1 span{font-size:28px}
.shop-view-detail .shop-view-banner h1 strong{font-weight:700;font-size:40px;color:var(--color-primary,#0148d4)}

@media only screen and (max-width:1180px) {
.shop-view-detail .shop-view-banner h1{left:5%;font-size:17px}
.shop-view-detail .shop-view-banner h1 span{font-size:22px}
.shop-view-detail .shop-view-banner h1 strong{font-size:32px}
}
@media only screen and (max-width:850px) {
.shop-view-detail .shop-view-banner h1{font-size:14px}
.shop-view-detail .shop-view-banner h1 span{font-size:17px}
.shop-view-detail .shop-view-banner h1 strong{font-size:24px}
}
@media only screen and (max-width:767px) {
.shop-view-detail .shop-view-banner{margin-top:30px;padding:16% 0;background-position:75% center}
.shop-view-detail .shop-view-banner h1{left:6%;padding-top:0;max-width:50%;font-size:10px}
.shop-view-detail .shop-view-banner h1 span{margin-bottom:3px;font-size:13px}
.shop-view-detail .shop-view-banner h1 strong{font-size:16px}
}

.shop-view-detail .lecture-list{margin-top:45px;display:flex;row-gap:50px}
.shop-view-detail .lecture-list .swiper-slide .thumb{overflow:hidden;border-radius:4px;width:100%;aspect-ratio:18/10.1}
.shop-view-detail .lecture-list .lecture-box .txt-wrap{padding:10px}
.shop-view-detail .lecture-list .lecture-box .txt-wrap span{display:block;font-size:14px;color:var(--color-gray,#aaa);letter-spacing:-.7px}
.shop-view-detail .lecture-list .lecture-box .txt-wrap em{display:inline-block;margin-right:10px;padding:0 14px;border-radius:4px;background:var(--color-primary,#0148d4);font-style:normal;font-weight:700;font-size:14px;line-height:30px;color:#fff}
.shop-view-detail .lecture-list .lecture-box .txt-wrap strong{display:block;margin-top:5px;font-weight:700;font-size:18px;color:var(--color-dark-gray,#333);letter-spacing:-.7px;word-break:keep-all}

@media only screen and (max-width:1024px) {
.shop-view-detail .lecture-list .swiper-wrapper{flex-wrap:nowrap}
}
@media only screen and (max-width:767px) {
.shop-view-detail .lecture-list{margin-top:25px;gap:6vw 4%}
.shop-view-detail .lecture-list .lecture-box{width:48%}
}
@media only screen and (max-width:640px) {
.shop-view-detail .lecture-list .lecture-box .txt-wrap span{font-size:13px}
.shop-view-detail .lecture-list .lecture-box .txt-wrap em{margin-right:7px;padding:0 10px;font-size:13px;line-height:24px}
.shop-view-detail .lecture-list .lecture-box .txt-wrap strong{font-size:15px;line-height:1.3}
}

.shop-view-detail .photo-reivew-wrap{position:relative}
.shop-view-detail .photo-reivew-list{overflow:hidden;position:relative;left:-10px;width:calc(100% + 20px)}
.shop-view-detail .photo-reivew-list .swiper-slide{padding:0 10px;width:150px;line-height:0}
.shop-view-detail .photo-reivew-list .swiper-slide a{display:block;aspect-ratio:6.5/6.4}
.shop-view-detail .photo-reivew-list .swiper-slide a img{overflow:hidden;width:100%;border-radius:4px;height:100%;object-fit:cover}
.photo-reivew-wrap :is(.swiper-button-next,.swiper-button-prev){z-index:10;margin-top:-30px;width:60px;height:60px;border-radius:50%;background:#fff;box-shadow:0 0 3px rgba(0,0,0,.1)}
.photo-reivew-wrap .swiper-button-prev{left:-30px;background:#fff url(/html/images/sub/shop/review_prev.png) no-repeat center center}
.photo-reivew-wrap .swiper-button-next{right:-30px;background:#fff url(/html/images/sub/shop/review_next.png) no-repeat center center}
.photo-reivew-wrap :is(.swiper-button-prev,.swiper-button-next):after{display:none}
@media only screen and (max-width:1180px) {
.shop-view-detail .photo-reivew-wrap{padding-left:30px;width:calc(100% + 30px)}
.photo-reivew-wrap .swiper-button-prev{left:0}
.photo-reivew-wrap .swiper-button-next{right:23px}
}
@media only screen and (max-width:768px) {
.shop-view-detail .photo-reivew-wrap{padding-left:20px;width:calc(100% + 20px)}
}
@media only screen and (max-width:767px) {
.shop-view-detail .photo-reivew-list{left:-5px;width:calc(100% + 10px)}
.shop-view-detail .photo-reivew-list .swiper-slide{padding:0 5px;width:90px}
.photo-reivew-wrap :is(.swiper-button-next,.swiper-button-prev){margin-top:-20px;width:40px;height:40px;background-size:auto 13px}
}

.shop-view-detail .photo-reivew-wrap + .shop-view-tit{margin:60px 0 0;padding:27px 0 30px;border-top:1px solid var(--color-dark-gray,#333)}
.shop-view-detail .shop-detail-review{border-top:1px solid #eee}
.shop-view-detail .shop-review-list{padding:37px 30px;border-bottom:1px solid #eee}
.shop-view-detail .shop-review-list .review-header{font-size:0}
.shop-view-detail .shop-review-list .review-header ul{display:inline-block;margin-top:0;width:50%;font-size:0;vertical-align:middle}
.shop-view-detail .shop-review-list .review-header ul:last-child{text-align:right}
.shop-view-detail .shop-review-list .review-header ul li{display:inline-block;vertical-align:middle}
.shop-view-detail .shop-review-list .review-header ul li:first-child{margin-right:25px}
.shop-view-detail .shop-review-list .review-header ul:last-child li{margin-left:20px}
.shop-view-detail .shop-review-list .review-header .grade{line-height:0}
.shop-view-detail .shop-review-list .review-header .grade .grade-wrap{display:inline-block;width:96px;height:16px;background:url(/html/images/sub/board/grade.png) no-repeat left center;text-align:left;vertical-align:middle}
.shop-view-detail .shop-review-list .review-header .grade .grade-wrap span{display:inline-block;height:16px;background:url(/html/images/sub/board/grade_on.png) no-repeat left center;vertical-align:top}
.shop-view-detail .shop-review-list .review-header .subject{font-weight:700;font-size:18px;color:var(--color-dark-gray,#333);word-break:keep-all}
.shop-view-detail .shop-review-list .review-header .name{font-size:18px;color:var(--color-dark-gray,#333)}
.shop-view-detail .shop-review-list .review-header ul:last-child li:first-child{margin-left:0}
.shop-view-detail .shop-review-list .review-header .date{font-size:16px;color:var(--color-gray,#aaa)}
.shop-view-detail .shop-review-list .conts{overflow:hidden;display:block;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;margin-top:30px;height:44px;font-weight:400;font-size:15px;line-height:22px;color:var(--color-dark-gray,#333);word-break:keep-all}
.shop-view-detail [class^="btn"]{display:block;margin:40px auto 0;width:300px}
.shop-view-detail .shop-review-list .reply-cont{margin-top:30px;border-top:1px solid #eee}

@media only screen and (max-width:767px) {
.shop-view-detail .photo-reivew-wrap + .shop-view-tit{margin-top:30px;padding:20px 0}
.shop-view-detail .shop-review-list{padding:20px 10px}
.shop-view-detail .shop-review-list .review-header ul{width:100%}
.shop-view-detail .shop-review-list .review-header ul:last-child{margin-top:5px;text-align:left}
.shop-view-detail .shop-review-list .review-header ul li:first-child{margin-right:15px}
.shop-view-detail .shop-review-list .review-header .grade .grade-wrap{width:72px;height:12px;background-size:auto 100%}
.shop-view-detail .shop-review-list .review-header .grade .grade-wrap span{height:12px;background-size:auto 100%}
.shop-view-detail .shop-review-list .review-header .subject{font-size:15px}
.shop-view-detail .shop-review-list .conts{margin-top:15px;-webkit-line-clamp:3;height:54px;font-size:13px;line-height:18px}
.shop-view-detail [class^="btn"]{margin-top:25px;width:100%}
.shop-view-detail .shop-review-list .reply-cont{margin-top:15px}
}

.goods-thumb-popup{position:fixed;top:0;left:0;z-index:110;width:100%;height:100%;background:rgba(0,0,0,.8);display:none}
.goods-thumb-popup.on{display:block}
.goods-thumb-popup .goods-thumb-popup-zoom{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center}
.goods-thumb-popup .goods-thumb-popup-zoom img{max-width:100%}
.photo-review-detail-popup{position:fixed;top:0;left:0;z-index:110;width:100%;height:100%;background:rgba(0,0,0,.8)}
.photo-review-detail-popup .photo-review-detail-popup-inner{overflow:hidden;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:100%;max-width:860px;height:100%;max-height:550px;border-radius:4px;background:#fff;font-size:0}
.photo-review-detail-wrap{overflow:hidden;display:inline-block;width:55.815%;vertical-align:middle}
.photo-review-detail-list{width:100%;height:480px;background:var(--color-light-gray2,#f5f5f7)}
.photo-review-detail-list .swiper-slide a{display:flex;width:100%;height:100%;align-items:center}
.photo-review-detail-list .swiper-slide a img{width:100%}
.photo-review-detail-thumb{padding:0 19px}
.photo-review-detail-thumb .swiper-slide{margin:0 1px;width:50px;height:50px}
.photo-review-detail-thumb .swiper-slide a{position:relative;display:block;background:#000;aspect-ratio:1/1}
.photo-review-detail-thumb .swiper-slide a img{width:100%;opacity:.6;height:100%;object-fit:cover}
.photo-review-detail-thumb .swiper-slide.swiper-slide-thumb-active a img{opacity:1}
.photo-review-detail-thumb .swiper-slide.swiper-slide-thumb-active a:after{content:'';position:absolute;top:0;left:0;width:100%;height:100%;border:4px solid #000;box-sizing:border-box}
.photo-review-detail-popup .photo-review-detail-conts{overflow-x:hidden;display:inline-block;padding-left:20px;padding-right:10px;width:calc(100% - 55.815%);height:400px;vertical-align:middle}
.photo-review-detail-popup .photo-review-detail-conts .subject{margin-bottom:15px;font-weight:700;font-size:18px;color:var(--color-dark-gray,#333)}
.photo-review-detail-popup .photo-review-detail-conts .grade{line-height:0}
.photo-review-detail-popup .photo-review-detail-conts .grade .grade-wrap{display:inline-block;width:96px;height:16px;background:url(/html/images/sub/board/grade.png) no-repeat left center;text-align:left;vertical-align:middle}
.photo-review-detail-popup .photo-review-detail-conts .grade .grade-wrap span{display:inline-block;height:16px;background:url(/html/images/sub/board/grade_on.png) no-repeat left center;vertical-align:top}
.photo-review-detail-popup .photo-review-detail-conts ul{margin-top:5px;font-size:0}
.photo-review-detail-popup .photo-review-detail-conts ul li{display:inline-block;font-size:14px;color:var(--color-dark-gray,#333);vertical-align:middle}
.photo-review-detail-popup .photo-review-detail-conts ul li:last-child{margin-left:15px;font-weight:300;color:var(--color-gray,#aaa)}
.photo-review-detail-popup .photo-review-detail-conts .conts{margin-top:10px;padding-top:23px;width:calc(100% - 30px);border-top:1px solid #eee;font-size:14px;line-height:22px;color:var(--color-dark-gray,#333);word-break:keep-all}
.photo-review-detail-popup .close{position:absolute;top:37px;right:37px;width:42px;height:42px;font-size:0}
.photo-review-detail-popup .close:before,.photo-review-detail-popup .close:after{content:'';position:absolute;top:50%;left:0;width:100%;height:2px;border-radius:5px;background:var(--color-gray,#aaa)}
.photo-review-detail-popup .close:before{transform:rotate(45deg)}
.photo-review-detail-popup .close:after{transform:rotate(-45deg)}
.photo-review-detail-popup .board-info li + li {margin-left:10px;}
.photo-review-detail-popup .star-rate-select {width:14px; height:14px;}
@media only screen and (max-width:920px) {
    .photo-review-detail-popup .photo-review-detail-popup-inner{left:30px;transform:translateY(-50%);max-width:calc(100% - 60px)}
}
@media only screen and (max-width:767px) {
.photo-review-detail-popup .photo-review-detail-popup-inner{overflow-y:auto;padding-bottom:20px;height:auto;max-height:calc(100vh - 40px)}
.photo-review-detail-wrap{width:100%}
.photo-review-detail-list{padding:10% 0;height:auto}
.photo-review-detail-thumb{padding:0 9px}
.photo-review-detail-thumb .swiper-slide{width:40px;height:40px}
.photo-review-detail-popup .photo-review-detail-conts{margin-top:40px;padding-right:0;width:100%;height:auto}
.photo-review-detail-popup .close{top:17px;right:17px;width:32px;height:32px}
}
@media only screen and (max-width:640px) {
.photo-review-detail-popup .close{top:10px;right:15px}
.photo-review-detail-list{padding:15% 0}
}


/* -------- 학습도서 -------- */
.book-list{display:flex;flex-wrap:wrap;position:relative;left:-10px;margin-bottom:-50px;width:calc(100% + 20px);font-size:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:50px 20px;width:100%;margin-bottom:0;left:0}
.book-list .book-box{display:flex;flex-direction:column;margin-bottom:50px;padding:0 10px;width:25%;vertical-align:top;padding:0;width:100%}
.book-list .book-box .thumb{overflow:hidden;background:var(--color-light-gray2,#f5f5f7)}
.book-list .book-box .thumb a{display:block;margin:0 30px;text-align:center;aspect-ratio:2.9/4}
.book-list .book-box .thumb img{display:inline-block;width:100%;height:100%;transform:scale(1);transition:.3s;object-fit:cover}
.book-list .book-box:hover .thumb img{transform:scale(1.38)}
.book-list .book-box .book-info{flex-grow:1;border-radius:0 0 4px 4px;background:#fff;transition:.3s}
.book-list .book-box:hover .book-info{box-shadow:0 0 15px rgba(0,0,0,.15)}
.book-list .book-box .book-info>a{display:block;padding:17px 10px 10px}
.book-list .book-box .book-info .cate{font-size:0}
.book-list .book-box .book-info .cate li{position:relative;display:inline-block;padding:0 5px;font-size:14px;color:var(--color-gray,#aaa);vertical-align:top}
.book-list .book-box .book-info .cate li:first-child{padding-left:0}
.book-list .book-box .book-info .cate li:after{content:'';position:absolute;top:50%;right:0;margin-top:-6px;width:1px;height:14px;background:var(--color-gray,#aaa)}
.book-list .book-box .book-info .cate li:last-child:after{display:none}
.book-list .book-box .book-info .subject{display:block;margin-top:5px;font-weight:700;font-size:18px;line-height:1.1;color:#000;word-break:keep-all}
.book-list .book-box .book-info .price{margin-top:5px;font-size:18px;color:#111}
.book-list .book-box .book-info .price strong{font-weight:500}
.book-list .book-box .book-info .price span{font-size:15px;color:var(--color-gray,#aaa);text-decoration:line-through}
.book-list .book-box .price-wrap .discount span{color:var(--color-gray,#aaa);text-decoration:line-through}
.book-list .book-box .book-info .book-label{margin-top:5px;font-size:0}
.book-list .book-box .book-info .book-label li{display:inline-block;margin-left:4px;padding:0 11px;border-radius:4px;border:1px solid var(--color-light-gray,#ccc);font-size:13px;line-height:20px;color:var(--color-dark-gray,#333);vertical-align:top}
.book-list .book-box .book-info .book-label li:first-child{margin-left:0}

@media only screen and (max-width:1180px) {
.book-list{grid-template-columns:repeat(auto-fill,minmax(205px,1fr))}
}
@media only screen and (max-width:850px) {
.book-list .book-box{width:33.333%;width:100%}
}
@media only screen and (max-width:640px) {
.book-list{left:-5px;margin-bottom:-30px;width:calc(100% + 10px);left:0;width:100%;gap:30px 10px}
.book-list .book-box{margin-bottom:30px;padding:0 5px;width:50%;padding:0;width:100%}
.book-list .book-box .book-info>a{padding:12px 7px 7px}
.book-list .book-box .book-info .cate li{padding:0 3px;font-size:12px}
.book-list .book-box .book-info .subject{font-size:15px}
.book-list .book-box .book-info .price{font-size:15px}
.book-list .book-box .book-info .price span{font-size:13px}
.book-list .book-box .book-info .book-label li{padding:0 7px;font-size:12px;line-height:17px}
}
@media only screen and (max-width:480px) {
.book-list{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
}

/* -------- 상세 -------- */
.goods-detail .detail-tab{font-size:0;border-top:2px solid #eee}
.goods-detail .detail-tab li{display:inline-block;margin-right:40px;vertical-align:middle}
.goods-detail .detail-tab li:last-child{margin-right:0}
.goods-detail .detail-tab li a{display:block}

/* list */
.board-movie-list{display:flex;flex-wrap:wrap;gap:50px 5%}
.board-movie-list .board-movie-box{width:47.5%}
.board-movie-list .board-movie-box .thumb{overflow:hidden;border-radius:10px;border:1px solid #ddd;aspect-ratio:1.78/1;height:auto;width:100%}
.board-movie-list .board-movie-box .thumb a{display:block;height:100%;line-height:0}
.board-movie-list .board-movie-box .thumb img{width:100%;height:100%;object-fit:cover;vertical-align:top}
.board-movie-list .board-movie-box .info a{display:block;padding-top:17px}
.board-movie-list .board-movie-box .info .cate{display:block;font-weight:700;font-size:16px;color:var(--color-primary,#0148d4)}
.board-movie-list .board-movie-box .info .subject{display:block;margin-top:8px;font-weight:500;font-size:22px;color:var(--color-dark-gray,#333);word-break:break-all;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}
.board-movie-list .board-movie-box .info .conts{display:block;margin-top:8px;font-weight:500;font-size:18px;color:var(--color-dark-gray,#333);word-break:break-all;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;height:44px;line-height:1.2222em}
.board-movie-list .board-movie-box .info .date{display:block;margin-top:12px;font-weight:300;font-size:16px;color:var(--color-gray,#aaa)}
@media only screen and (max-width:767px) {
.board-movie-list{gap:30px 3.96%}
.board-movie-list .board-movie-box{width:48.02%}
.board-movie-list .board-movie-box .info .cate{font-size:14px}
.board-movie-list .board-movie-box .info .subject{margin-top:5px;font-size:18px}
.board-movie-list .board-movie-box .info .conts{margin-top:5px;font-size:16px;height:40px}
.board-movie-list .board-movie-box .info .date{margin-top:8px;font-size:14px}
}
@media only screen and (max-width:640px) {
.board-movie-list .board-movie-box{width:100%}
}

/* popup */
.board-popup{position:fixed;top:0;left:0;z-index:110;width:100%;height:100%;background:rgba(0,0,0,.8)}
.board-popup .board-popup-inner{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);overflow-x:hidden;padding:40px;width:100%;max-width:1180px;height:100%;max-height:900px;border-radius:10px;background:#fff}
.board-popup .board-popup-inner .subject{display:block;font-weight:700;font-size:24px;color:var(--color-dark-gray,#333);word-break:keep-all}
.board-popup .board-popup-inner .conts{display:block;margin-top:10px;font-weight:300;font-size:16px;color:var(--color-gray,#aaa);word-break:keep-all}
.board-popup .board-popup-inner .img-wrp{margin-top:35px;line-height:0;border:1px solid #ddd}
.board-popup .board-popup-inner .img-wrp img{max-width:100%}
.board-popup .board-popup-inner .img-wrp :where(iframe,object,embed){position:absolute;top:0;left:0;width:100%;height:100%}
.board-popup .board-popup-btn{margin-top:40px;font-size:0;text-align:center}
.board-popup .board-popup-btn li{display:inline-block;margin:0 10px;width:260px;vertical-align:top}
.board-popup .board-popup-btn li a{display:block;border-radius:4px;border:1px solid var(--color-gray,#aaa);font-size:20px;line-height:58px;color:var(--color-gray,#aaa)}
.board-popup .board-popup-btn li:first-child a{border-color:var(--color-primary,#0148d4);background:var(--color-primary,#0148d4);color:#fff}
.board-popup .close{position:absolute;top:37px;right:37px;width:42px;height:42px;font-size:0}
.board-popup .close:before,.board-popup .close:after{content:'';position:absolute;top:50%;left:0;z-index:1;width:100%;height:2px;border-radius:5px;background:var(--color-gray,#aaa)}
.board-popup .close:before{transform:rotate(45deg)}
.board-popup .close:after{transform:rotate(-45deg)}
.board-popup.border-view .board-popup-inner{max-width:940px;max-height:540px}
.board-popup.border-view .board-header{padding-bottom:36px;border-bottom:1px solid var(--color-dark-gray,#333)}
.board-popup.border-view .board-header .subject{margin-bottom:0; margin-right:50px}
.board-popup.border-view .attach-files {display:flex; gap:10px; margin-top:15px;}
.board-popup.border-view .attach-files li {margin-top:0;}
.board-popup .board-utils{display:flex;justify-content:flex-end;align-items:center;margin-top:27px}
.board-popup .board-utils li{position:relative;padding:0 10px;font-weight:300;font-size:16px;color:var(--color-gray,#aaa)}
.board-popup .board-utils li + li:before{content:'';position:absolute;top:6px;left:0;width:1px;height:14px;background:#ddd}
.board-popup .board-utils .writer{font-weight:500;color:var(--color-dark-gray,#333)}
.board-popup .writer .blue{color:var(--color-primary,#0148d4)}
.board-popup .board-conts{margin-top:21px;font-weight:400;font-size:18px;line-height:1.667em;color:var(--color-dark-gray,#333);word-break:keep-all}
.board-popup .attach-files{margin-top:50px}
.board-popup .attach-files li + li{margin-top:10px}
.board-popup .attach-files a{display:inline-block;padding:8px 13px 9px;font-size:16px;color:var(--color-dark-gray,#333);background:var(--color-light-gray2,#f5f5f7)}
.board-popup .board-popup-inner .attach-files a:hover{text-decoration:underline}
.board-popup .attach-files a img{vertical-align:middle}
#popupMovieDetail .board-popup-inner .img-wrp{position:relative;padding-bottom:56.25%;padding-top:30px;height:0;overflow:hidden}
@media only screen and (max-width:1180px) {
.board-popup .board-popup-inner,.board-popup.border-view .board-popup-inner{top:50%;left:30px;transform:translateY(-50%);max-width:calc(100% - 60px);height:auto;max-height:calc(100vh - 60px)}
}
@media only screen and (max-width:767px) {
.board-popup .board-popup-inner{padding:25px}
.board-popup .board-popup-inner .subject{font-size:18px}
.board-popup .board-popup-inner .conts{margin-top:5px;font-size:13px}
.board-popup .board-popup-inner .img-wrp{margin-top:20px}
.board-popup .board-popup-btn{position:relative;left:-5px;margin-top:25px;width:calc(100% + 10px)}
.board-popup .board-popup-btn li{margin:0 5px;width:calc(50% - 10px)}
.board-popup .board-popup-btn li a{font-size:14px;line-height:38px}
.board-popup .close{top:17px;right:17px;width:32px;height:32px}
.board-popup.border-view .board-header{padding-bottom:22px}
.board-popup .board-utils{margin-top:18px}
.board-popup .board-utils li{font-size:13px}
.board-popup .board-utils li + li:before{top:4px;height:10px}
.board-popup .board-conts{margin-top:18px;font-size:15px}
.board-popup .attach-files a{font-size:13px}
.board-popup.border-view .close{top:21px;right:22px}
}

/* 학습운영센터 */
/* -------- 글쓰기 -------- */
.board-write{border-top:2px solid var(--color-dark-gray,#333)}
.board-write table{width:100%}
.board-write tr{border-bottom:1px solid #ddd}
.board-write tr:last-child{border-bottom-color:var(--color-dark-gray,#333)}
.board-write th,.board-write td{height:80px}
.board-write th{padding:26px 20px;font-weight:400;font-size:18px;color:var(--color-dark-gray,#333);text-align:left;vertical-align:top}
.board-write td{padding:15px 20px 15px 0;vertical-align:middle}
.board-write td input[type="text"]{padding:0 20px;width:100%;height:50px;border:1px solid var(--color-light-gray,#ccc);border-radius:4px;font-weight:400;font-size:18px;color:var(--color-dark-gray,#333)}
.board-write td .input-style1,.board-write td input[type="text"].input-style1{width:395px}
.board-write td input[type="text"].full{width:100%}
.board-write td input[type="text"].input-style2{width:150px}
.board-write td select{font-weight:400}
.board-write td .edit-wrap{width:100%;height:260px;padding:10px;resize:none;border:1px solid var(--color-light-gray,#ccc);border-radius:4px}
.board-write td.editor{font-size:18px}
.board-write .file-list input[type="file"]{margin-top:10px;width:100%}
.board-write .attach-list{display:inline-block;width:100%}
.board-write .attach-image{position:relative;padding-right:15px;display:inline-block}
.board-write .attach-image img{width:80px;cursor:pointer}
.board-write .attach-image .btn-delete{position:absolute;top:3px;right:15px;width:30px;z-index:10;cursor:pointer}
.board-write .attach-image .btn-delete img{width:100%}
.board-write .ck-editor__editable_inline{min-height:300px}
.ck-content .image{margin:0 auto!important}
.board-write .checkbox-wrap li{display:inline-block;margin-left:20px;vertical-align:top}
.board-write .checkbox-wrap li:first-child{margin-left:0}
.board-write .checkbox-wrap + input{margin-top:15px}
.board-write .period{font-size:0}
.board-write .period > *{display:inline-block;vertical-align:middle}
.board-write .period br{display:none}
.board-write .period .date{width:200px;background:url(/html/images/sub/board/icon_cal.png) no-repeat 90% center}
.board-write .period select{width:100px;background-position:88% center}
.board-write .period span{display:inline-block;padding:0 10px;font-weight:400;font-size:18px;line-height:40px;color:var(--color-dark-gray,#333);vertical-align:middle}
.board-write .period span:nth-of-type(2){padding-right:0}
.board-write .period input + span{padding-left:20px}
.board-write .btn-file-controller{font-size:0;display:inline-block;vertical-align:top}
.board-write .btn-file-controller li{display:inline-block;margin-right:-1px;vertical-align:top}
.board-write .btn-file-controller li button{position:relative;width:40px;height:24px;border-radius:4px;border:1px solid var(--color-light-gray,#ccc);background:#fff}
.board-write .btn-file-controller li button:before{content:'';position:absolute;top:50%;left:50%;margin-top:-1px;margin-left:-5px;width:10px;height:2px;background:#000}
.board-write .btn-file-controller li .add:after{content:'';position:absolute;top:50%;left:50%;margin-top:-5px;margin-left:-1px;width:2px;height:10px;background:#000}
.board-write .btn-file-controller li button:disabled:before,.board-write .btn-file-controller li button:disabled:after{background:#ddd!important}
.board-write .movie-info{margin-top:15px;font-weight:300;font-size:14px;color:var(--color-dark-gray,#333)}
.board-write .movie-info strong{font-weight:300;color:var(--color-red,#dc3545)}
.board-write .movie-info span{color:#779df5}
.board-write .terms-box{overflow-x:hidden;padding:15px 20px;margin-bottom:10px;width:100%;height:180px;border:1px solid var(--color-light-gray,#ccc);border-radius:4px}
.board-write .star-rate-box{display:flex;}
.board-write td input[type="text"] + .checkbox-wrap{display:inline-block;margin-left:10px}
.board-write .row-box + .row-box{margin-top:10px}
.board-write .btn-refresh{display:inline-block;width:25px;margin-top:12px;vertical-align:top}
.board-write img{vertical-align:top}
.board-write .btn-refresh img{width:100%}
.board-write .board-btn{margin-top:60px}
.board-write .form-box {display:flex; align-items:center;}
.board-write .form-box input[type="text"] {flex-grow:1;}
.board-write .form-box input[type="text"] + .checkbox-wrap{flex-shrink:0;}
.board-btn{display:flex;justify-content:center;gap:0 10px}
.board-btn li{width:160px}
.board-btn li a{display:block}
@media only screen and (max-width:1180px) {
.board-write .period{padding-top:10px;padding-bottom:10px}
.board-write .period > *{margin:5px 0}
.board-write .period br{display:block}
.board-write .period span:nth-of-type(3){display:none}
}
@media only screen and (max-width:767px) {
.board-write colgroup{display:none}
.board-write :is(th,td){height:auto}
.board-write th{display:block;padding:15px 0 7px;width:100%;font-size:15px}
.board-write .btn-file-controller{position:relative;top:-1px;display:inline-block;margin-top:0;margin-left:5px;vertical-align:middle}
.board-write td{display:block;padding:0 0 15px;width:100%}
.board-write td select{background-position:96% center;background-size:auto 6px}
.board-write td :is(.input-style1,input[type="text"].input-style1){width:100%}
.board-write td :is(input[type="text"],select){padding:0 10px;height:40px;font-size:15px}
.board-write .checkbox-wrap + input{margin-top:5px}
.board-write .movie-info{margin-top:7px;font-size:12px}
.attach-list li,.select-file span{margin-bottom:5px;font-size:14px;line-height:20px}
.select-file span{margin-bottom:0}
.select-file label,.attach-list li strong{margin-right:7px;padding:0 7px;font-size:11px;line-height:20px}
.board-write .period span{padding:0 8px;font-size:15px;line-height:35px}
.board-write .period input + span{padding-left:8px}
.board-write .period .date{width:120px;background-size:auto 15px}
.board-write .period select{width:70px}
.board-write td.editor{font-size:15px}
.board-write .write-form-btn{margin-top:30px;justify-content:space-between}
.board-write .write-form-btn li{width:calc(50% - 5px);margin:0}
.board-write .board-btn{margin-top:30px}
.board-btn{justify-content:space-between}
.board-btn li{flex-grow:1}
}

/* -------- 게시판목록 -------- */
.board-list{font-size:0}
.board-list .thumb{overflow:hidden;width:100%;border-radius:4px;border:1px solid #ddd;line-height:0}
.board-list .thumb img{width:100%}
.board-list .board-conts-wrap{margin-top:20px}
.board-list .board-conts-header{margin-bottom:10px;font-size:0}
.board-list .board-conts-header li{display:inline-block;width:50%;font-size:16px;vertical-align:middle}
.board-list .board-conts-header .cate{font-weight:700;color:var(--color-primary,#0148d4)}
.board-list .board-conts-header .hit{font-weight:300;color:var(--color-gray,#aaa);text-align:right}
.board-list .board-conts a{display:block}
.board-list .board-conts .subject{overflow:hidden;display:block;width:100%;font-weight:500;font-size:18px;color:var(--color-dark-gray,#333);text-overflow:ellipsis;white-space:nowrap}
.board-list .board-conts .subject a{display:block}
.board-list .board-conts .conts{overflow:hidden;display:block;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;margin:10px 0;height:120px;font-size:16px;line-height:24px;color:var(--color-dark-gray,#333);word-break:keep-all}
.board-list .date{font-weight:300;font-size:16px;color:var(--color-gray,#aaa)}
.board-list .board-utils{margin-top:15px;font-size:0}
.board-list .board-utils li{display:inline-block;width:50%;vertical-align:middle}
.board-list .board-utils .name{font-weight:500;font-size:18px;line-height:40px;color:var(--color-dark-gray,#333)}
.board-list .board-utils .name img{display:inline-block;margin-right:10px;vertical-align:top}
.board-list .grade{text-align:right}
.board-list .grade .grade-wrap{display:inline-block;width:96px;height:16px;background:url(/html/images/sub/board/grade.png) no-repeat left center;text-align:left;vertical-align:middle}
.board-list .grade .grade-wrap span{display:inline-block;height:16px;background:url(/html/images/sub/board/grade_on.png) no-repeat left center;vertical-align:top}
/* type1 */
.board-type1 {position:relative; display:flex; flex-wrap:wrap; gap:50px 5%;}
.board-type1 .board-box {width:30%;}
.board-type1 .thumb {position:relative; height:auto; aspect-ratio:9/5;}
.board-type1 .thumb img {width:100%; height:100%; object-fit:cover;}
/* type2 */
.board-type2 .board-box{margin-bottom:50px}
.board-type2 .board-box .thumb{display:inline-block;width:360px;vertical-align:middle;aspect-ratio:12/7.1}
.board-type2 .board-box .thumb img{width:100%;height:100%;object-fit:cover}
.board-type2 .board-box .board-conts-wrap{display:inline-block;margin-top:0;padding-left:5%;width:calc(100% - 360px);vertical-align:middle}
.board-type2 .board-conts .conts{-webkit-line-clamp:2;height:48px}
.board-type2 .board-utils{margin-top:10px}
/* type3 */
.board-type3{width:100%;border-top:2px solid var(--color-dark-gray,#333);border-bottom:1px solid var(--color-dark-gray,#333);table-layout:fixed}
.board-type3 td{padding:26px 10px;font-size:16px;color:var(--color-dark-gray,#333);text-align:center}
.board-type3 .tit{border-top:1px solid var(--color-dark-gray,#333)}
.board-type3 .cate{padding-left:20px;padding-right:20px;color:var(--color-primary,#0148d4);text-align:left}
.board-type3 .number{color:var(--color-primary,#0148d4);text-align:center}
.board-type3 .subject{max-width:100%;text-align:left}
.board-type3 .subject a{display:inline-block;font-size:0;display:flex;align-items:center}
.board-type3 .subject a div{display:inline-block;overflow:hidden;max-width:100%;font-weight:500;font-size:18px;text-overflow:ellipsis;white-space:nowrap;vertical-align:middle}
.board-type3 .subject.has a div{max-width:calc(100% - 97px)}
.board-type3 .subject .cate{padding:0;margin-right:10px;display:inline-block;font-weight:400;font-size:16px;flex-shrink:0}
.board-type3 .board-icon{display:inline-block;margin-left:10px;font-size:0;vertical-align:middle;flex-shrink:0}
.board-type3 .board-icon li{display:inline-block;margin-left:10px;vertical-align:middle}
.board-type3 .board-icon li:first-child{margin-left:0}
.board-type3 .grade{padding-left:0;padding-right:0}
.board-type3 .name{font-weight:700;font-size:18px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden; vertical-align:middle;}
.board-type3 .date{font-weight:400;color:var(--color-dark-gray,#333); vertical-align:middle;}
.board-type3 .hit{font-weight:300; vertical-align:middle;}
.board-type3 .conts{display:none;border-top:1px solid #ddd}
.board-type3 .tit.on + .conts{display:table-row}
.board-type3 .conts td{padding:20px;height:125px;text-align:left}

@media only screen and (max-width:850px) {
.board-type3{display:block;width:100%}
.board-type3 colgroup{display:none}
.board-type3 tbody{display:block;width:100%}
.board-type3 tr{display:block;padding:14px 0 16px}
.board-type3 .conts{padding:0}
.board-type3 td{padding:0 20px 0 0;display:inline-block}
.board-type3 .cate{padding-left:0;padding-right:0}
.board-type3 .subject{margin-bottom:7px;width:100%}
.board-type3 .grade{padding-right:20px}
.board-type3 .hit{padding-right:0}
.board-type3 .conts td{padding-left:0;padding-right:0}
.board-type3 .tit.on + .conts{display:block}
}
@media only screen and (max-width:767px) {
.board-type1{gap:30px 3.5%}
.board-type1 .board-box{width:48.25%}
.board-list .board-conts-wrap{margin-top:15px}
.board-list .board-conts-header{margin-bottom:6px}
.board-list .board-conts-header li{font-size:14px}
.board-list .board-conts .subject{font-size:16px}
.board-list .board-conts .conts{margin:7px 0;height:100px;font-size:14px;line-height:20px}
.board-list .date{font-size:14px}
.board-list .board-utils{margin-top:10px}
.board-list .board-utils .name{font-size:16px;line-height:30px}
.board-list .board-utils .name img{margin-right:7px;width:30px}
.board-list .grade .grade-wrap{width:72px;height:12px;background-size:auto 100%}
.board-list .grade .grade-wrap span{height:12px;background-size:auto 100%}
.board-type2 .board-box .thumb,.board-type2 .board-box .board-conts-wrap{width:50%}
.board-type3 td{padding:0 12px 0 0;font-size:14px}
.board-type3 .cate{font-size:14px}
.board-type3 .subject{margin-bottom:5px}
.board-type3 .subject a div{font-size:15px}
.board-type3 .subject.has a div{max-width:calc(100% - 79px)}
.board-type3 .subject .cate{font-size:14px;margin-right:6px}
.board-type3 .name{font-size:16px}
.board-type3 .conts td{height:auto}
.board-type3 .board-icon{margin-left:15px}
.board-type3 .board-icon li img{height:15px}
}
@media only screen and (max-width:640px) {
.board-type1 .board-box{width:100%}
.board-type2 .board-box{margin-bottom:30px}
.board-type2 .board-box .thumb,.board-type2 .board-box .board-conts-wrap{width:100%}
.board-type2 .board-box .board-conts-wrap{margin-top:15px;padding-left:0}
}

/* popup */
.photo-review-detail-popup,.board-popup{display:none}
.popup-wrap.secret .popup-inner{max-height:590px}
.popup-wrap .secret-wrap{margin-top:40px;padding-top:40px;border-top:1px solid var(--color-light-gray,#ccc);text-align:center}
.popup-wrap .secret-wrap .icon{margin:0 auto;width:120px;height:120px;border-radius:50%;border:2px solid #eee;background:url(/html/images/sub/board/icon_lock_b.png) no-repeat center center}
.popup-wrap .secret-wrap .txt{margin:35px 0 15px;font-size:18px;line-height:30px;color:var(--color-dark-gray,#333)}
.popup-wrap .secret-wrap input[type="password"]{width:100%;height:50px;border-radius:4px;border:1px solid var(--color-light-gray,#ccc);font-size:18px;color:var(--color-dark-gray,#333);text-align:center}
.popup-wrap.secret .error-txt{display:block;margin-top:10px;margin-bottom:-30px;font-size:12px;line-height:16px;color:#ff8e20;text-align:left;vertical-align:middle}
.popup-wrap.secret .error-txt img{display:inline-block;margin-right:6px;vertical-align:middle}
.popup-wrap .board-write{border-top:1px solid var(--color-light-gray,#ccc)}
.popup-wrap .board-write tr:last-child{border-bottom-color:var(--color-light-gray,#ccc)}
@media only screen and (max-width:767px) {
.popup-wrap .secret-wrap{margin-top:30px;padding-top:30px}
.popup-wrap.secret .popup-inner{max-height:calc(100% - 60px)}
.popup-wrap .secret-wrap .icon{width:80px;height:80px;background-size:auto 20px}
.popup-wrap .secret-wrap .txt{margin:20px 0 10px;font-size:13px;line-height:18px}
.popup-wrap .secret-wrap input[type="password"]{height:40px;font-size:15px}
.popup-wrap.secret .error-txt{margin-bottom:-10px}
}

/* -------- 게시물 상세 -------- */
.board-view .board-utils{font-size:0}
.board-view .board-utils > *{display:inline-block;vertical-align:middle}
.board-view .board-utils .cate{width:calc(100% - 300px);font-weight:700;font-size:16px;color:var(--color-primary,#0148d4)}
.board-view .board-utils ul{width:300px;font-size:0;text-align:right}
.board-view .board-utils ul li{position:relative;display:inline-block;padding:0 20px;font-weight:300;font-size:16px;color:var(--color-dark-gray,#333);vertical-align:middle}
.board-view .board-utils ul li:last-child{padding-right:0}
.board-view .board-utils ul li:before{content:'';position:absolute;top:50%;left:0;margin-top:-7px;width:1px;height:14px;background:#ddd}
.board-view .board-utils ul li:first-child:before{display:none}
.board-view .board-utils ul .date{color:var(--color-gray,#aaa)}
.board-view .subject{margin:15px 0 50px;font-weight:700;font-size:24px;color:var(--color-dark-gray,#333);word-break:keep-all}
.board-view .user{margin-bottom:30px;font-size:0}
.board-view .grade{display:inline-block;margin-right:20px;vertical-align:middle}
.board-view .grade .grade-wrap{display:inline-block;width:96px;height:16px;background:url(/html/images/sub/board/grade.png) no-repeat left center;text-align:left;vertical-align:middle}
.board-view .grade .grade-wrap span{display:inline-block;height:16px;background:url(/html/images/sub/board/grade_on.png) no-repeat left center;vertical-align:top}
.board-view .user .name{display:inline-block;font-weight:700;font-size:18px;line-height:40px;color:var(--color-dark-gray,#333);vertical-align:middle}
.board-view .user .name img{display:inline-block;margin-right:10px;vertical-align:top}
.board-view .board-conts .img-file{margin-bottom:30px;text-align:center}
.board-view .board-conts .img-file img{max-width:100%}
.board-view .board-conts p{font-size:18px;line-height:1.6;color:var(--color-dark-gray,#333);word-break:keep-all}
.board-view .board-conts .file-list{margin-top:30px}
.board-view .board-conts .file-list li{padding:2px 0}
.board-view .board-conts .file-list a:hover{text-decoration:underline}
.board-navi{margin-top:20px;border-top:1px solid var(--color-dark-gray,#333);border-bottom:1px solid var(--color-dark-gray,#333);font-size:0}
.board-navi li{display:flex; align-items:center; gap:10px; padding:0 20px}
.board-navi li.next{border-top:1px solid #ddd}
.board-navi li > *{padding:16px 0 17px; font-size:18px;line-height:1.5em;vertical-align:middle}
.board-navi li strong{min-width:160px;font-weight:400; flex-shrink:0;}
.board-navi li strong + *{width:calc(100% - 160px)}
.board-navi li .off,.board-navi li span{color:var(--color-gray,#aaa)}
.board-navi li a{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.board-navi li a:hover{text-decoration:underline}
.board-navi li a img{margin-left:5px;vertical-align:middle}
.board-view .board-btn{margin-top:80px}

/* comment */
.comment-wrap{margin-top:40px}
.comment-wrap .comment-form{padding:40px 20px 30px;background:var(--color-light-gray2,#f5f5f7)}
.comment-wrap .comment-form fieldset{font-size:0}
.comment-wrap .comment-form input{display:inline-block;padding:0 20px;width:150px;height:50px;border:1px solid var(--color-light-gray,#ccc);background:#fff;font-size:16px;color:var(--color-dark-gray,#333);vertical-align:top}
.comment-wrap .comment-form input::placeholder{color:var(--color-gray,#aaa)}
.comment-wrap .comment-form .comment-input{width:100%}
.comment-wrap .comment-form .comment-input input{width:calc(100% - 120px)}
.comment-wrap .comment-form input + input,.comment-wrap .comment-form img + input{margin-left:5px}
.comment-wrap .comment-form button{display:inline-block;width:120px;height:50px;border:0 none;background:var(--color-dark-gray,#333);font-weight:500;font-size:18px;color:#fff;text-align:center;vertical-align:top}
.comment-form .comment-area{display:flex;flex-wrap:wrap;justify-content:flex-start;gap:5px}
.comment-list{border-bottom:1px solid var(--color-light-gray,#ccc)}
.comment-box-wrap{padding:20px;border-top:1px solid var(--color-light-gray,#ccc)}
.comment-box-wrap .comment-box{font-size:16px}
.comment-box-wrap .comment-box .comment-header{display:flex; margin-bottom:10px;font-size:0}
.comment-box-wrap .comment-box .comment-header > *{display:inline-block;font-weight:500;font-size:16px;word-break:keep-all;vertical-align:middle}
.comment-box-wrap .comment-box .comment-header .name{flex-grow:1; color:var(--color-dark-gray,#333)}
.comment-box-wrap .comment-box .comment-header .modify{margin-left:auto;color:var(--color-gray,#aaa);text-align:right}
.comment-box-wrap .comment-box .comment-header .modify li{position:relative;display:inline-block;padding:0 11px;vertical-align:middle}
.comment-box-wrap .comment-box .comment-header .modify li:last-child{padding-right:0}
.comment-box-wrap .comment-box .comment-header .modify li:after{content:'';position:absolute;top:50%;right:0;margin-top:-7px;width:1px;height:14px;background:#ddd}
.comment-box-wrap .comment-box .comment-header .modify li:last-child:after{display:none}
.comment-box-wrap .comment-box .comment-header .modify li a{display:block;font-weight:500;font-size:16px;color:var(--color-gray,#aaa)}
.comment-box-wrap .comment-box .comment-header .modify li:hover a{text-decoration:underline}
.comment-box-wrap .comment-box .comment-conts{word-break:keep-all}
.comment-box-wrap .comment-box .date{margin-top:15px;font-size:14px;color:var(--color-gray,#aaa)}
.comment-box-wrap .comment-reply{margin-top:20px;padding:20px;border:1px solid var(--color-light-gray,#ccc)}
.comment-box-wrap .comment-reply .comment-header .name:before{content:'';position:relative;top:-1px;display:inline-block;margin-right:10px;width:15px;height:10px;background:url(/html/images/sub/board/reply.png) no-repeat left top;vertical-align:middle}
.comment-list .comment-form{margin-top:20px;border:1px solid var(--color-light-gray,#ccc)}

@media only screen and (max-width:767px) {
.board-view .board-utils .cate{font-size:14px;width:calc(100% - 230px)}
.board-view .board-utils ul{width:230px}
.board-view .board-utils ul li{padding:0 10px;font-size:14px}
.board-view .board-utils ul li:before{margin-top:-5px;height:10px}
.board-view .subject{margin:12px 0 20px;font-size:18px}
.board-view .board-conts .img-file{margin-bottom:15px}
.board-view .board-conts p{font-size:15px}
.board-view .user{margin-bottom:20px}
.board-view .grade{margin-right:10px}
.board-view .grade .grade-wrap{width:72px;height:12px;background-size:auto 100%}
.board-view .grade .grade-wrap span{height:12px;background-size:auto 100%}
.board-view .user .name{font-size:15px;line-height:30px}
.board-view .user .name img{margin-right:7px;width:30px}
.board-navi{margin-top:15px}
.board-navi li{padding:0 15px}
.board-navi li > *{padding:10px 0; font-size:14px;}
.board-navi li strong{min-width:55px}
.board-navi li strong + *{width:calc(100% - 55px)}
.board-navi li a img {width:18px;}
.comment-wrap{margin-top:25px}
.comment-wrap .comment-form{padding:20px 12px 15px}
.comment-wrap .comment-form input{padding:0 10px;height:42px;font-size:13px}
.comment-wrap .comment-form .comment-input input{width:calc(100% - 40px)}
.comment-wrap .comment-form button{width:40px;height:42px;font-size:12px;line-height:1.2}
.comment-form .comment-box{flex-grow:1}
.comment-form .comment-box img{height:42px}
.comment-box-wrap .comment-box-wrap{padding:15px}
.comment-box-wrap .comment-box{font-size:14px}
.comment-box-wrap .comment-box .comment-header .name{font-size:14px}
.comment-box-wrap .comment-box .comment-header .modify li{padding:0 7px}
.comment-box-wrap .comment-box .comment-header .modify li:after{margin-top:-5px;height:10px}
.comment-box-wrap .comment-box .comment-header .modify li a{font-size:14px}
.comment-box-wrap .comment-box .date{margin-top:10px;font-size:12px}
.comment-box-wrap .comment-reply{margin-top:15px;padding:15px}
.comment-box-wrap .comment-box .comment-header{margin-bottom:5px}
.comment-box-wrap .comment-reply .comment-header .name:before{margin-right:5px;background-size:auto 8px}
.comment-box-wrap .comment-form{margin-top:15px}
.board-view-btn{margin-top:50px}
}
@media only screen and (max-width:640px) {
.comment-wrap .comment-form input{width:100%}
.comment-wrap .comment-form input + input,.comment-wrap .comment-form img + input{margin-left:0;margin-top:5px}
.board-view .board-btn{margin-top:30px}
}

/* -------- FAQ -------- */
.faq-wrap{border-top:2px solid var(--color-dark-gray,#333)}
.faq-wrap .f-box{position:relative;display:table;padding:0 100px 0 20px;width:100%;height:80px;border-bottom:1px solid var(--color-dark-gray,#333)}
.faq-wrap .f-box.on{border-bottom-color:#ddd}
.faq-wrap .f-box:before,.faq-wrap .f-box:after{content:'';position:absolute;top:50%;right:20px;width:14px;height:2px;background:#000;transition:.3s}
.faq-wrap .f-box:after{transform:rotate(-90deg)}
.faq-wrap .f-box.on:after{display:none}
.faq-wrap .f-box > *{display:table-cell;vertical-align:middle}
.faq-wrap .f-box .cate{width:175px;font-size:16px;color:var(--color-primary,#0148d4);text-align:left}
.faq-wrap .f-box .subject{font-weight:500;font-size:18px;color:var(--color-dark-gray,#333);text-align:left;word-break:keep-all}
.faq-wrap .f-box .name{width:85px;font-weight:700;font-size:18px;color:var(--color-dark-gray,#333);text-align:left}
.faq-wrap .f-box .date{width:85px;font-weight:300;font-size:16px;color:var(--color-gray,#aaa);letter-spacing:-1px;text-align:right}
.faq-wrap .q-box{display:none;padding:20px;min-height:120px;border-bottom:1px solid var(--color-dark-gray,#333)}
.faq-wrap .q-box p{font-size:16px;line-height:1.5;color:var(--color-dark-gray,#333);word-break:keep-all}
@media only screen and (max-width:767px) {
.faq-wrap .f-box{display:block;padding:15px 50px 15px 15px;height:auto}
.faq-wrap .f-box > *{display:inline-block}
.faq-wrap .f-box .cate{width:100%;font-size:14px}
.faq-wrap .f-box .subject{display:block;margin:5px 0 10px;font-size:15px}
.faq-wrap .f-box .name{margin-right:15px;width:auto;font-size:15px}
.faq-wrap .f-box .date{width:auto;font-size:14px;text-align:left}
.faq-wrap .q-box{padding:15px;min-height:auto}
.faq-wrap .q-box p{font-size:13px}
.faq-wrap .f-box:before,.faq-wrap .f-box:after{right:15px;width:10px}
}

/* -------- 이벤트 -------- */
.board-category{margin-bottom:40px;font-size:0}
.board-category .swiper-slide{display:inline-block;margin-left:15px;width:auto;vertical-align:top}
.board-category .swiper-slide:first-child{margin-left:0}
.board-category .swiper-slide a{display:block;font-size:16px;color:var(--color-dark-gray,#333);padding:9px 20px;background:#eee;border-radius:20px}
.board-category .swiper-slide.on a{font-weight:500;color:#fff;background:var(--color-primary,#0148d4)}
@media only screen and (max-width:1300px) {
.board-category{width:calc(100% + 30px);overflow:hidden}
}
@media only screen and (max-width:768px) {
.board-category{width:calc(100% + 20px)}
}
@media only screen and (max-width:767px) {
.board-category .swiper-slide{margin-left:10px}
.board-category .swiper-slide a{font-size:14px;padding:8px 15px}
}

/* list */
.event-list{display:flex;flex-wrap:wrap;gap:50px 5%}
.event-list .event-box{width:47.5%}
.event-list .event-box .thumb{position:relative;aspect-ratio:1.78/1}
.event-list .event-box .thumb a{overflow:hidden;display:block;border:1px solid #ddd;border-radius:10px}
.event-list .event-box .thumb a > img{width:100%;height:100%;object-fit:cover;vertical-align:top}
.event-list .event-box .thumb .event-label{position:absolute;top:10px;left:10px;width:64px;border-radius:4px;background:#fff;font-weight:700;font-size:14px;line-height:30px;color:var(--color-dark-gray,#333);text-align:center}
.event-list .event-box .event-info a{display:block}
.event-list .event-box .event-info .cate{display:block;margin-top:12px;font-weight:700;font-size:16px;color:var(--color-primary,#0148d4)}
.event-list .event-box .event-info .subject{display:block;margin-top:12px;font-weight:500;font-size:22px;color:var(--color-dark-gray,#333);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}
.event-list .event-box .event-info .word{display:block;margin-top:12px;font-size:18px;color:var(--color-dark-gray,#333);word-break:break-all;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;height:44px;line-height:1.2222em}
.event-list .event-box .date-wrap{margin-top:12px;font-size:0}
.event-list .event-box .date-wrap li{display:inline-block;margin-left:23px;vertical-align:middle}
.event-list .event-box .date-wrap .d-day{margin-left:0;font-weight:700;font-size:18px;color:var(--color-dark-gray,#333)}
.event-list .event-box .date-wrap .date{font-weight:300;font-size:16px;color:var(--color-gray,#aaa)}
.event-list .event-box.end .thumb:before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;border-radius:10px;background:rgba(0,0,0,.5)}
.event-list .event-box.end .event-label{background:var(--color-gray,#aaa);color:#fff}
@media only screen and (max-width:767px) {
.event-list{gap:30px 3.96%}
.event-list .event-box{width:48.02%}
.event-list .event-box .thumb{border-radius:7px}
.event-list .event-box .thumb .event-label{width:56px;font-size:14px;line-height:25px}
.event-list .event-box .event-info .cate{font-size:14px}
.event-list .event-box .event-info .subject{margin-top:8px;font-size:18px}
.event-list .event-box .event-info .word{margin-top:7px;font-size:16px;height:40px}
.event-list .event-box .date-wrap{margin-top:8px}
.event-list .event-box .date-wrap li{margin-left:15px}
.event-list .event-box .date-wrap .d-day{font-size:16px}
.event-list .event-box .date-wrap .date{font-size:14px}
}
@media only screen and (max-width:640px) {
.event-list .event-box{width:100%}
}

/* list */
.gallery-board-list{display:flex;flex-wrap:wrap;gap:50px 5%}
.gallery-box{width:47.5%}
.gallery-box .thumb{position:relative;aspect-ratio:1.7884/1}
.gallery-box .thumb a{overflow:hidden;display:block;border:1px solid #ddd;border-radius:10px;height:100%}
.gallery-box .thumb a > img{width:100%;height:100%;object-fit:cover;vertical-align:top}
.gallery-box .thumb .board-label{position:absolute;top:10px;left:10px;width:64px;border-radius:4px;background:#fff;font-weight:700;font-size:14px;line-height:30px;color:var(--color-dark-gray,#333);text-align:center}
.gallery-box .board-info a{display:block}
.gallery-box .board-info .cate{display:block;margin-top:12px;font-weight:700;font-size:16px;color:var(--color-primary,#0148d4)}
.gallery-box .board-info .subject{display:block;margin-top:12px;font-weight:500;font-size:22px;color:var(--color-dark-gray,#333);word-break:break-all;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}
.gallery-box .board-info .conts{display:block;margin-top:12px;font-size:18px;color:var(--color-dark-gray,#333);word-break:break-all;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;height:44px;line-height:1.2222em}
.gallery-box .date-wrap{margin-top:12px;font-size:0}
.gallery-box .date-wrap li{display:inline-block;vertical-align:middle}
.gallery-box .date-wrap li + li{margin-left:23px}
.gallery-box .date-wrap .d-day{margin-left:0;font-weight:700;font-size:18px;color:var(--color-dark-gray,#333)}
.gallery-box .date-wrap .date{font-weight:300;font-size:16px;color:var(--color-gray,#aaa)}
.gallery-box.end .thumb:before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;border-radius:10px;background:rgba(0,0,0,.5)}
.gallery-box.end .board-label{background:var(--color-gray,#aaa);color:#fff}
@media only screen and (max-width:767px) {
.gallery-board-list{gap:30px 3.96%}
.gallery-box{width:48.02%}
.gallery-box .thumb{border-radius:7px}
.gallery-box .thumb .board-label{width:56px;font-size:14px;line-height:25px}
.gallery-box .board-info .cate{font-size:14px}
.gallery-box .board-info .subject{margin-top:8px;font-size:18px}
.gallery-box .board-info .conts{margin-top:7px;font-size:16px;height:40px}
.gallery-box .date-wrap{margin-top:8px}
.gallery-box .date-wrap li{margin-left:15px}
.gallery-box .date-wrap .d-day{font-size:16px}
.gallery-box .date-wrap .date{font-size:14px}
}
@media only screen and (max-width:640px) {
.gallery-box{width:100%}
}
/* 마이페이지
------------------------------------------------------ */
.mypage-wrap{display:flex}
/* -------- 레이아웃 -------- */
/* left */
.mypage-wrap .mypage-menu-wrap{width:240px;flex-shrink:0}
.mypage-wrap .user-info h1{font-weight:400;font-size:36px;line-height:1;color:var(--color-dark-gray,#333)}
.mypage-wrap .user-info h1 strong{font-weight:700}
.mypage-wrap .user-info p{margin-top:10px}
.mypage-wrap .user-info p a{position:relative;display:inline-block;padding:3px 0;font-size:16px;color:var(--color-gray,#aaa)}
.mypage-wrap .user-info p a:after{content:'';display:block;width:100%;height:1px;background:var(--color-gray,#aaa)}
.mypage-wrap .maypage-menu h1{margin:53px 0 19px;font-weight:700;font-size:22px;line-height:1;color:#000}
.mypage-wrap .maypage-menu ul li + li {margin-top:3px;}
.mypage-wrap .maypage-menu ul li a{display:block;padding:3px 0;font-size:18px;line-height:1.5em;/*line-height:36px;*/color:var(--color-dark-gray,#333);transition:.3s}
.mypage-wrap .maypage-menu ul li:hover a,.mypage-wrap .maypage-menu ul li.on a{font-weight:500;color:var(--color-primary,#0148d4)}
/* conts */
.mypage-wrap .mypage-conts{width:calc(100% - 240px)}
.mypage-wrap .mypage-conts-header{display:flex;margin-bottom:60px;padding:20px;border-radius:4px;background:#f8f8f8}
.mypage-wrap .mypage-conts-header dl{margin-left:20px;padding:20px;background:#fff;box-shadow:0 0 10px rgba(0,0,0,.05);vertical-align:top}
.mypage-wrap .mypage-conts-header dl:nth-of-type(1){margin-left:0;width:calc(100% - 460px)}
.mypage-wrap .mypage-conts-header dl:nth-of-type(2){width:220px}
.mypage-wrap .mypage-conts-header dl:nth-of-type(3){width:200px}
.mypage-wrap .mypage-conts-header dl dt{font-weight:300;font-size:16px;line-height:1;color:var(--color-dark-gray,#333)} 1
.mypage-wrap .mypage-conts-header dl dd{margin-top:25px;font-weight:700;font-size:24px;line-height:1;color:var(--color-dark-gray,#333)}
.mypage-wrap .mypage-conts-tit{margin-bottom:40px;font-weight:700;font-size:24px;line-height:1;color:var(--color-dark-gray,#333)}
.mypage-wrap .mypage-conts-tit + .sub-tab-menu{display:none}
@media only screen and (max-width:1024px) {
.mypage-wrap{margin-top:-60px;flex-direction:column}
.mypage-wrap .mypage-menu-wrap{width:100%}
.mypage-wrap .user-info{display:none}
.mypage-wrap .mypage-conts-header{display:none}
.mypage-wrap .maypage-menu h1{margin:0;border-bottom:1px solid var(--color-light-gray,#ccc);line-height:70px;background:url(/html/images/sub/mypage/icon_arrow_down.png) no-repeat right center}
.mypage-wrap .maypage-menu h1.on{background:url(/html/images/sub/mypage/icon_arrow_up.png) no-repeat right center}
.mypage-wrap .maypage-menu ul{display:none;padding:15px 20px;border-bottom:1px solid var(--color-light-gray,#ccc);background:var(--color-light-gray2,#f5f5f7)}
.mypage-wrap .maypage-menu h1.on + ul{display:block}
.mypage-wrap .mypage-conts{width:100%}
.mypage-wrap .mypage-conts-tit{display:none}
.mypage-wrap .mypage-conts-tit + .sub-tab-menu{display:block;margin-top:30px}
.mypage-wrap .sub-title{margin-top:20px}
}
@media only screen and (max-width:768px) {
.mypage-wrap{margin-top:-50px}
}
@media only screen and (max-width:767px) {
.mypage-wrap .maypage-menu h1{font-size:18px;line-height:60px;background-size:auto 6px}
.mypage-wrap .maypage-menu h1.on{background-size:auto 6px}
.mypage-wrap .maypage-menu ul{padding:12px 15px}
.mypage-wrap .maypage-menu ul li a{font-size:16px;line-height:30px}
}
@media only screen and (max-width:640px) {
.mypage-wrap{margin-top:-40px}
}

/* -------- 주문내역 -------- */
.mypage-order-wrap{margin-top:-25px;border-top:2px solid var(--color-dark-gray,#333)}
.mypage-info{margin:25px 0}
.mypage-info li{position:relative;padding-left:12px;font-size:16px;color:#666;word-break:keep-all}
.mypage-info li:before{content:'';position:absolute;top:9px;left:0;width:5px;height:5px;background:#666}
/* 검색 */
.mypage-order-search{margin-bottom:40px;padding:20px 10px 20px 20px;background:#f8f8f8}
.mypage-order-search fieldset{font-size:0}
.mypage-order-search .select-wrap{display:inline-block;width:calc(100% - 160px);vertical-align:top}
.mypage-order-search .select-wrap .select-top{margin-bottom:10px;font-size:0}
.mypage-order-search .select-wrap .checkbox-btn{display:inline-block;font-size:0;vertical-align:top}
.mypage-order-search .select-wrap select{display:inline-block;width:120px;background-color:#fff}
.mypage-order-search .select-wrap select + select{margin-left:20px}
.mypage-order-search .select-wrap .search-keyword{display:inline-block;margin-left:20px;padding:5px 10px;width:calc(100% - 300px);height:40px;border-radius:4px;border:1px solid var(--color-light-gray,#ccc);font-size:16px;color:var(--color-dark-gray,#333);vertical-align:top}
.mypage-order-search .btn-wrap{display:inline-block;width:160px;vertical-align:top}
.mypage-order-search .btn-wrap button{width:100%;height:90px}

@media only screen and (max-width:1024px) {
.mypage-order-wrap{margin-top:0}
.mypage-order-search .select-wrap{width:100%}
.mypage-order-search .btn-wrap{margin-top:20px;width:100%}
.mypage-order-search .btn-wrap button{height:60px}
}
@media only screen and (max-width:767px) {
.mypage-info{margin:15px 0}
.mypage-info li{padding-left:8px;font-size:14px}
.mypage-info li:before{top:7px;width:3px;height:3px}
.mypage-order-search{margin-bottom:30px;padding:20px}
.mypage-order-search .select-wrap .search-keyword{width:100%;height:30px;margin-left:0;margin-top:5px;font-size:15px}
}
@media only screen and (max-width:660px) {
.select-date .date{width:calc(50% - 15px)}
.mypage-order-search .select-wrap .checkbox-btn{width:80%}
.mypage-order-search .checkbox-btn label{width:calc(25% - 10px)}
.mypage-order-search .select-wrap select{padding:0 10px;width:20%}
.mypage-order-search .select-wrap select + select{margin-left:0}
}
@media only screen and (max-width:640px) {
.mypage-order-search{margin-bottom:20px;padding:15px}
.mypage-order-search .checkbox-btn label{margin-right:5px;width:calc(25% - 10px)}
.mypage-order-search .select-wrap .checkbox-btn{width:100%}
.mypage-order-search .checkbox-btn label{width:calc(25% - 4px)}
.mypage-order-search .checkbox-btn label:last-child{margin-right:0}
.mypage-order-search .select-wrap select{margin-top:5px;width:100%}
.mypage-order-search .btn-wrap{margin-top:15px}
.mypage-order-search .btn-wrap button{height:45px}
}

/* 리스트 */
.mypage-order-box{margin-bottom:20px;border:1px solid var(--color-light-gray,#ccc)}
.mypage-order-box .mypage-order-box-header{padding:0 20px;background:#f8f8f8;font-size:0}
.mypage-order-box .mypage-order-box-header li{display:inline-block;width:50%;vertical-align:top;font-weight:700;font-size:18px;line-height:54px;color:var(--color-dark-gray,#333)}
.mypage-order-box .mypage-order-box-header li a{display:inline-block;font-weight:700;color:var(--color-dark-gray,#333);cursor:pointer}
.mypage-order-box .mypage-order-box-header li:last-child{font-weight:400;color:var(--color-gray,#aaa);text-align:right}
.mypage-order-box .mypage-order-box-header [class^="btn"]{display:inline-block;width:80px;margin-left:10px;color:var(--color-primary,#0148d4);font-size:13px;vertical-align:middle}
.mypage-order-box .mypage-order-conts{padding:20px;display:flex}
.mypage-order-box .mypage-order-conts .conts-box{flex-grow:1}
.mypage-order-box .mypage-order-conts .btn-wrap{width:100px}
.mypage-order-box .mypage-order-conts .btn-wrap li{margin-bottom:10px}
.mypage-order-box [class^="btn"]{display:block;width:100%}
.mypage-order-box .mypage-order-conts .good-name{font-size:20px;color:var(--color-dark-gray,#333)}
.mypage-order-box .mypage-order-conts .good-name strong{font-weight:700}
.mypage-order-box .mypage-order-conts .good-name li{margin-bottom:3px;word-break:keep-all}
.mypage-order-box .mypage-order-conts .goods-payment{margin-top:35px;font-size:0}
.mypage-order-box .mypage-order-conts .goods-payment li{position:relative;display:inline-block;padding:0 10px;font-size:16px;color:#666;vertical-align:middle}
.mypage-order-box .mypage-order-conts .goods-payment .price{font-weight:700;font-size:20px;color:var(--color-dark-gray,#333)}
.mypage-order-box .mypage-order-conts .goods-payment li:first-child{padding-left:0}
.mypage-order-box .mypage-order-conts .goods-payment li:after{content:'';position:absolute;top:50%;right:0;margin-top:-7px;width:1px;height:15px;background:#ddd}
.mypage-order-box .mypage-order-conts .goods-payment li:last-child:after{display:none}
.mypage-order-box .mypage-order-conts .goods-payment li .pay_ready{color:var(--color-gray,#aaa)}
.mypage-order-box .mypage-order-conts .goods-payment li .pay_done{color:#054ef7}
.mypage-order-box .mypage-order-conts .goods-payment li .order_cancel{color:#f9051c}
.mypage-order-box .mypage-order-conts .goods-payment li .refund_ready{color:#fec065}
.mypage-order-box .mypage-order-conts .goods-payment li .refund_done{color:#ff9800}
.mypage-order-box .mypage-order-box-footer{padding:10px 20px;border-top:1px solid var(--color-light-gray,#ccc);display:flex;align-items:center}
.mypage-order-box .mypage-order-box-footer li{font-weight:500;font-size:20px;color:var(--color-gray,#aaa);flex-grow:1}
.mypage-order-box .mypage-order-box-footer li:last-child{width:100px;flex-grow:0}

@media only screen and (max-width:767px) {
.mypage-order-box{margin-bottom:15px}
.mypage-order-box .mypage-order-box-header li{font-size:15px;line-height:35px;padding:6px 0}
.mypage-order-box .mypage-order-box-header [class^="btn"]{display:block;margin-left:0}
.mypage-order-box .mypage-order-conts .conts-box{width:calc(100% - 70px)}
.mypage-order-box .mypage-order-conts .good-name{padding-right:10px;font-size:16px}
.mypage-order-box .mypage-order-conts .goods-payment{margin-top:12px}
.mypage-order-box .mypage-order-conts .goods-payment .price{display:block;margin-bottom:3px;font-size:16px}
.mypage-order-box .mypage-order-conts .goods-payment li{padding:0 7px;font-size:14px}
.mypage-order-box .mypage-order-conts .goods-payment li:nth-of-type(2){padding-left:0}
.mypage-order-box .mypage-order-conts .goods-payment li:after{margin-top:-5px;height:10px;display:none}
.mypage-order-box .mypage-order-conts .btn-wrap{width:70px}
.mypage-order-box .mypage-order-conts .btn-wrap li{margin-bottom:5px}
.mypage-order-box .mypage-order-box-footer li{font-size:15px}
.mypage-order-box .mypage-order-box-footer li:last-child{width:70px}
}

/* no data */
.no-data{padding:120px 0;text-align:center;flex-grow:1}
.no-data .icon{margin:0 auto 40px;width:120px;height:120px;border-radius:50%;border:1px solid #eee}
.no-data.order .icon{background:url(/html/images/sub/mypage/icon_cart.png) no-repeat center center}
.no-data.cart .icon{background:url(/html/images/sub/mypage/icon_cart.png) no-repeat center center}
.no-data.wishlist .icon{background:url(/html/images/sub/mypage/icon_wishlist.png) no-repeat center center}
.no-data.mypoint .icon{background:url(/html/images/sub/mypage/icon_point.png) no-repeat center center}
.no-data p{font-size:18px;color:var(--color-dark-gray,#333);word-break:keep-all}
.no-data.lecture{padding:50px 0}
.no-data.board {padding:35px 0; width:100%; text-align:center;}

/* -------- 장바구니 -------- */
.mypage-cart-list{margin-top:18px;width:100%;border-top:2px solid var(--color-dark-gray,#333)}
.mypage-cart-box{padding:30px 0 30px 10px;border-bottom:1px solid #ddd;display:flex;flex-wrap:wrap}
.mypage-cart-box > *{display:inline-block;vertical-align:top}
.mypage-cart-box .checkbox-wrap label{font-size:0}
.mypage-cart-box .thumb{width:230px}
.mypage-cart-box .thumb a{display:block}
.mypage-cart-box .thumb img{width:100%}
.mypage-cart-box .goods-info{padding-left:25px;width:calc(100% - 264px)}
.mypage-cart-box .goods-name li{font-size:18px;color:var(--color-dark-gray,#333);word-break:keep-all}
.mypage-cart-box .goods-name li strong{font-weight:700}
.mypage-cart-box .goods-footer{display:flex; align-items:center; flex-wrap:wrap; position:relative;margin-top:13px;padding:10px;/*height:60px;*/border-radius:4px;background:var(--color-light-gray2,#f5f5f7)}
.mypage-cart-box .goods-footer .quantity-wrap{position:absolute;top:10px;left:10px;display:flex}
.mypage-cart-box .goods-footer .save-date{/*position:absolute;top:10px;left:11px;*/font-size:16px;line-height:40px;color:var(--color-gray,#aaa)}
.mypage-cart-box .goods-footer .price{margin-left:auto; font-size:20px;line-height:40px;color:var(--color-dark-gray,#333);text-align:right}
.mypage-wrap .mypage-foot-btn{margin-top:20px}
.mypage-wrap .mypage-foot-btn [class^="btn"]{min-width:80px}
.mypage-cart .mypage-total{margin-top:60px;padding:0 10px;border-top:1px solid var(--color-dark-gray,#333);border-bottom:1px solid var(--color-dark-gray,#333);font-size:0}
.mypage-cart .mypage-total dl{display:flex; flex-wrap:wrap; align-items:center; padding:17px 0}
.mypage-cart .mypage-total dl dt,.mypage-cart .mypage-total dl dd{display:inline-block;font-weight:400;font-size:18px;line-height:36px;color:var(--color-dark-gray,#333);vertical-align:middle}
.mypage-cart .mypage-total dl dt{width:40%;}
.mypage-cart .mypage-total dl dd{width:60%;text-align:right}
.mypage-cart .mypage-total .total-price{padding:20px 0;border-top:1px solid #ddd}
.mypage-cart .mypage-total .total-price dt{font-weight:500;font-size:22px}
.mypage-cart .mypage-total .total-price dd{font-weight:500;font-size:22px;color:var(--color-primary,#0148d4)}
.mypage-cart .mypage-total .total-price dd strong{font-weight:500;font-size:28px}
.mypage-wrap .mypage-btn{margin-top:60px;gap:0 20px;justify-content:center}
.mypage-wrap .mypage-btn li{width:calc(50% - 10px)}
.mypage-wrap .mypage-btn li [class^="btn"]{display:block;width:100%}
@media only screen and (max-width:640px) {
.mypage-cart-box{position:relative;padding:20px 0}
.mypage-cart-box .goods-info{padding-left:0;width:100%}
.mypage-cart-box .thumb{width:100px}
.mypage-cart-box .goods-name{position:absolute;top:20px;left:154px}
.mypage-cart-box .goods-name li{font-size:14px}
.mypage-cart-box .goods-footer{margin-top:12px;padding:7px;/*height:51px*/}
.mypage-cart-box .goods-footer .quantity-wrap{top:8px;left:8px;width:84px}
.mypage-cart-box .goods-footer .quantity-wrap button{width:24px;height:33px}
.mypage-cart-box .goods-footer .quantity-wrap input{width:33px;height:33px}
.mypage-cart-box .goods-footer .quantity-wrap button:before{margin-left:-4px;width:8px}
.mypage-cart-box .goods-footer .quantity-wrap .add:after{margin-top:-4px;height:8px}
.mypage-cart-box .goods-footer .save-date{/*top:8px;*/font-size:14px;line-height:35px}
.mypage-cart-box .goods-footer .price{font-size:16px;line-height:35px}
.mypage-cart .mypage-total{margin-top:35px}
.mypage-cart .mypage-total dl{padding:13px 0}
.mypage-cart .mypage-total dl dt,.mypage-cart .mypage-total dl dd{font-size:14px;line-height:30px}
.mypage-cart .mypage-total .total-price{padding:15px 0}
.mypage-cart .mypage-total .total-price dt{font-size:18px}
.mypage-cart .mypage-total .total-price dd{font-size:18px}
.mypage-cart .mypage-total .total-price dd strong{font-size:24px}
.mypage-wrap .mypage-btn{margin-top:30px;column-gap:10px}
.mypage-wrap .mypage-foot-btn{margin-top:15px}
.no-data{padding:60px 0}
.no-data .icon{margin-bottom:20px;width:80px;height:80px}
.no-data.cart .icon,.no-data.mypoint .icon,.no-data.order .icon{background-size:auto 25px}
.no-data.wishlist .icon{background-size:auto 18px}
.no-data p{font-size:15px}
}

/* -------- 마이포인트 -------- */
.mypoint-info{padding:31px 20px;border-radius:4px;border:1px solid var(--color-light-gray,#ccc);font-size:0}
.mypoint-info ul{width:100%}
.mypoint-info ul li{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap}
.mypoint-info ul li:last-child{margin-top:15px}
.mypoint-info .point-title{width:340px;font-weight:700;font-size:20px;color:var(--color-dark-gray,#333)}
.mypoint-info .point-title .desc{display:block;margin-top:5px;font-size:16px;color:#666}
.mypoint-info .point strong{color:var(--color-red,#dc3545);font-weight:700}
.mypoint-info ul .more a{display:block;width:160px;border-radius:4px;background:var(--color-primary,#0148d4);font-size:18px;line-height:50px;color:#fff;text-align:center}
.mypoint-info .point{width:calc(100% - 350px);text-align:right;margin-left:10px;font-weight:500;vertical-align:middle;font-size:28px;color:var(--color-dark-gray,#333)}
.mypoint-info .point.use{color:var(--color-gray,#aaa)}

/* list */
.mypoint-list{margin-top:60px;width:100%;border-top:2px solid var(--color-dark-gray,#333);border-bottom:1px solid var(--color-dark-gray,#333)}
.mypoint-list thead th{padding:16px 20px;font-weight:500;font-size:16px;color:var(--color-dark-gray,#333);text-align:left}
.mypoint-list thead .point{text-align:center}
.mypoint-list tbody tr{border-top:1px solid #ddd}
.mypoint-list tbody tr:first-child{border-color:var(--color-dark-gray,#333)}
.mypoint-list tbody td{padding:22px 20px;font-weight:500;font-size:18px;color:var(--color-dark-gray,#333);word-break:break-all;text-align:left}
.mypoint-list tbody .date{font-size:14px;color:var(--color-gray,#aaa)}
.mypoint-list tbody .point{font-weight:400;text-align:center}
.mypoint-list tbody .point span{color:var(--color-gray,#aaa)}
.mypoint-list tbody .point strong{font-weight:400;color:var(--color-red,#dc3545)}
.mypoint-list thead th.text-center{text-align:center}
.basic-list{margin-top:60px;width:100%;border-top:2px solid var(--color-dark-gray,#333);border-bottom:1px solid var(--color-dark-gray,#333)}
.basic-list thead th{padding:16px 20px;font-weight:500;font-size:16px;color:var(--color-dark-gray,#333);text-align:left}
.basic-list thead .point{text-align:center}
.basic-list tbody tr{border-top:1px solid #ddd}
.basic-list tbody tr:first-child{border-color:var(--color-dark-gray,#333)}
.basic-list tbody td{padding:22px 20px;font-weight:500;font-size:18px;color:var(--color-dark-gray,#333);word-break:break-all;text-align:left}
.basic-list tbody .date{font-size:14px;color:var(--color-gray,#aaa)}
.basic-list tbody .point{font-weight:400;text-align:center}
.basic-list tbody .point span{color:var(--color-gray,#aaa)}
.basic-list tbody .point strong{font-weight:400;color:var(--color-red,#dc3545)}
.basic-list .text-center{text-align:center}
.checkbox-wrap + .addr-list{margin-top:18px}
.addr-list tbody .request-message{font-size:16px;color:var(--color-gray,#aaa);font-weight:400;letter-spacing:-.025em;display:inline-block;word-break:break-all}
.addr-list tbody .label{font-size:13px;color:var(--color-dark-gray,#333);letter-spacing:-.025em;background:var(--color-light-gray2,#f5f5f7);padding:6px 12px;border-radius:15px}
.addr-list tbody .label + p{margin-top:6px}
.addr-list tbody p + .request-message{margin-top:5px}

/* 마이페이지 리스트 버튼 */
.addr-list tbody .btn-box{text-align:center}
.addr-list tbody .btn-box .btn{position:relative;font-size:16px;letter-spacing:-.025em;color:var(--color-gray,#aaa);padding-left:7px;padding-right:4px}
.addr-list tbody .btn-box .btn + .btn:before{content:'';position:absolute;top:50%;left:0;transform:translateY(-50%);width:1px;height:14px;background:#ddd}
.addr-list .address-info{position:relative;padding-left:44px}
.addr-list .checkbox-wrap{position:absolute;top:50%;left:0;transform:translateY(-50%)}
.addr-list .checkbox-wrap label{font-size:0}

@media only screen and (max-width:1024px) {
.mypoint-info{margin-top:40px}
}
@media only screen and (max-width:767px) {
.mypoint-info{margin-top:30px;padding:20px 15px}
.mypoint-info .point-title{width:100%;font-size:16px}
.mypoint-info .point-title .desc{font-size:14px}
.mypoint-info .point{margin-top:15px;width:100%;margin-left:15px;font-size:20px}
.mypoint-info ul .more a{width:100px;font-size:14px;line-height:35px}
.mypoint-list{display:block;margin-top:30px}
.mypoint-list thead,.mypoint-list colgroup{display:none}
.mypoint-list tbody,.mypoint-list tbody tr{display:block;width:100%}
.mypoint-list tbody tr{padding:15px 0}
.mypoint-list tbody tr:first-child{border-top:0 none}
.mypoint-list tbody td{display:block;padding:0;width:100%;font-size:15px}
.mypoint-list tbody .history{margin:3px 0 1px}
.mypoint-list tbody .point{text-align:left}
.mypoint-list tbody td:before{display:inline-block;margin-right:10px;vertical-align:top}
.mypoint-list tbody .point:before{content:'적립/차감 포인트'}
.basic-list{display:block;margin-top:30px}
.basic-list thead,.basic-list colgroup{display:none}
.basic-list tbody,.basic-list tbody tr{display:block;width:100%}
.basic-list tbody tr{padding:15px 0}
.basic-list tbody tr:first-child{border-top:0 none}
.basic-list tbody td{display:block;padding:0;width:100%;font-size:15px}
.basic-list tbody .history{margin:3px 0 1px}
.basic-list tbody .point{text-align:left}
.basic-list tbody td:before{display:inline-block;margin-right:10px;vertical-align:top}
.basic-list tbody .point:before{content:'적립/차감 포인트'}
.basic-list .d-inline {display:inline-block; width:auto;}
.addr-list tbody .btn-box{width:auto;text-align:left;margin-top:5px;margin-left:23px}
.addr-list tbody .label{font-size:11px}
.addr-list tbody .request-message{font-size:13px}
.addr-list .btn-area{display:none}
.addr-list .receiver-name{display:inline-block;width:auto;font-size:14px;padding-left:30px}
.addr-list .phone-number{position:relative;display:inline-block;width:auto;margin-left:6px;padding-left:7px;margin-top:14px;font-size:14px}
.addr-list tbody .receiver-name + .phone-number:before{content:'';position:absolute;top:50%;left:0;transform:translateY(-50%);width:1px;height:14px;background:#ddd}
.addr-list .address-info{padding-left:30px}
.addr-list .checkbox-wrap{left:3px}
}

/* -------- 마이쿠폰 -------- */
.coupon-register{padding:35px 20px;background:#f8f8f8}
.coupon-register fieldset{font-size:0; display:flex; align-items:center; flex-wrap:wrap;}
.coupon-register label{width:230px;font-weight:700;font-size:20px;line-height:26px;color:var(--color-dark-gray,#333);vertical-align:top}
.coupon-register .coupon-form{width:calc(100% - 230px);vertical-align:top}
.coupon-register .coupon-form > *{display:inline-block;vertical-align:top}
.coupon-register .coupon-form input{padding:0 20px;width:calc(100% - 170px);height:50px;border-radius:4px;border:1px solid var(--color-light-gray,#ccc);font-size:20px;color:var(--color-dark-gray,#333)}
.coupon-register .coupon-form input::placeholder{color:var(--color-gray,#aaa)}
.coupon-register .coupon-form button{margin-left:10px;width:160px}

/* 쿠폰함 */
.coupon-list{margin-top:100px}
.coupon-register + .coupon-list{margin-top:35px}
.coupon-list > h1{margin-bottom:10px;font-weight:700;font-size:24px;color:var(--color-dark-gray,#333)}
.coupon-list-wrap{display:flex;flex-wrap:wrap;gap:60px 40px}
.coupon-list-wrap .coupon-box{width:calc(50% - 20px)}
.coupon-box .coupon-inner{position:relative;display:flex;justify-content:center}
.coupon-box .coupon{position:relative;z-index:1;height:180px;text-align:center;display:flex;flex-direction:column;justify-content:center;flex-grow:1}
.coupon-box .coupon:before{content:'';position:absolute;top:0;left:0;z-index:-1;width:calc(100% - 105px);height:100%;width:100%;border:1px solid #ddd;border-right:0 none;box-sizing:border-box}
.coupon-box .coupon dt{margin-bottom:3px;font-weight:700;font-size:20px;color:var(--color-dark-gray,#333)}
.coupon-box .coupon dd{font-size:18px;color:var(--color-gray,#aaa)}
.coupon-box .coupon dd strong{font-weight:700;font-size:36px;line-height:1;color:var(--color-dark-gray,#333)}
.coupon-box .coupon dd:nth-child(3){margin-top:15px}
.coupon-box .coupon .amount{font-size:15px}
.coupon-box .info{display:block;margin-top:7px}
.coupon-box .info a{display:inline-block;padding-right:10px;background:url(/html/images/sub/mypage/arrow.png) no-repeat right center;font-weight:500;font-size:14px;color:var(--color-dark-gray,#333)}
.coupon-box .coupon.complete + .barcode{background-color:#dcdcdc}
.coupon-box .coupon.complete *{color:var(--color-gray,#aaa)}
.coupon-box .barcode{position:relative;width:105px;height:180px;background:var(--color-primary,#0148d4) url(/html/images/sub/mypage/coupon_barcode.webp) no-repeat center;border-radius:0 18px 18px 0}
.coupon-box .barcode:before{content:'';position:absolute;top:50%;width:50px;height:50px;right:-25px;transform:translateY(-50%);border-radius:25px;background:#fff}
.popup-wrap .applicable-list{overflow:hidden;height:calc(100% - 12px)}
.popup-wrap .applicable-list h1{margin:30px 0;font-weight:500;font-size:18px;line-height:1;color:var(--color-dark-gray,#333)}
.popup-wrap .applicable-list ul{overflow-x:hidden;height:calc(100% - 85px);border-top:1px solid var(--color-light-gray,#ccc)}
.popup-wrap .applicable-list ul li{display:flex; justify-content:center; align-items:center; gap:13px; padding-right:25px;border-bottom:1px solid var(--color-light-gray,#ccc);font-size:0}
.popup-wrap .applicable-list ul li:first-child{border-top:0 none}
.popup-wrap .applicable-list ul li strong{flex-grow:1; line-height:59px;font-weight:400;font-size:18px;color:var(--color-dark-gray,#333);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}
.popup-wrap .applicable-list ul li a{flex-shrink:0; line-height:21px; font-weight:700;font-size:15px;color:var(--color-primary,#0148d4);text-align:right}
/* .popup-wrap .popup-btn{margin-top:58px;width:100%}
.popup-wrap .popup-btn button{width:100%} */

@media only screen and (max-width:767px) {
.coupon-register{padding:25px 20px}
.coupon-register label{display:block;margin-bottom:15px;width:100%;line-height:1}
.coupon-register .coupon-form{width:100%}
.coupon-register .coupon-form input{height:40.5px;font-size:18px}
.coupon-list > h1{font-size:18px}
.coupon-list-wrap{row-gap:40px}
.coupon-list-wrap .coupon-box{width:100%}
.coupon-box .coupon-inner{margin:auto}
.coupon-box .coupon{max-width:450px;height:150px;background-size:auto 100%}
.coupon-box .coupon.complete{background-size:auto 100%}
.coupon-box .coupon dt{font-size:16px}
.coupon-box .coupon dd{font-size:15px}
.coupon-box .coupon dd:last-child{margin-top:10px}
.coupon-box .coupon dd strong{font-size:27px}
.coupon-box .info{margin:7px auto 0;max-width:450px}
.coupon-box .barcode{width:85px;height:150px;background-size:34px auto}
.coupon-box .barcode:before{width:40px;height:40px;right:-20px}
.popup-wrap .applicable-list{height:calc(100vh - 240px)}
.popup-wrap .applicable-list h1{margin:15px 0;font-size:15px}
.popup-wrap .applicable-list ul{height:calc(100vh - 300px)}
.popup-wrap .applicable-list ul li{padding-right:5px}
.popup-wrap .applicable-list ul li *{line-height:49px}
.popup-wrap .applicable-list ul li strong{font-size:14px}
.popup-wrap .applicable-list ul li a{font-size:13px}
/* .popup-wrap .popup-btn{margin-top:30px} */
}
@media only screen and (max-width:640px) {
.coupon-register + .coupon-list{margin-top:25px}
.coupon-list-wrap{row-gap:30px}
.coupon-register .coupon-form input{width:100%;height:40px;font-size:14px}
.coupon-register .coupon-form button{margin-top:7px;margin-left:0;width:100%}
}

/* 회원수정 */
.mypage-modify{display:flex;flex-wrap:wrap;align-items:flex-start}
.mypage-modify-wrap{display:inline-block;width:calc(100% - 460px);vertical-align:top;flex-grow:1}
.mypage-modify-wrap .sub-tit{margin-top:75px;margin-bottom:-35px;font-weight:700;font-size:18px;color:var(--color-gray,#aaa)}
.mypage-modify-wrap .sub-tit + .login-form > li > label{margin-top:20px}
.mypage-modify-wrap .login-form{margin-top:40px}
.mypage-modify-wrap .login-btn{margin:30px 0 10px}
.mypage-modify-btn{margin-top:50px}
.mypage-modify-btn li a{display:block}
.mypage-modify-wrap a.link{float:right}
.sns-account{display:inline-block;margin-left:60px;padding:30px;width:400px;border-radius:4px;border:1px solid var(--color-light-gray,#ccc);vertical-align:top}
.sns-account h1{font-weight:500;font-size:22px;color:var(--color-dark-gray,#333)}
.sns-account .sns-account-wrap{margin-top:30px}
.sns-account .sns-account-wrap .sns-account-list{padding:11px 0;border-bottom:1px solid #eee;font-size:0}
.sns-account .sns-account-wrap .sns-account-list:first-child{padding-top:0}
.sns-account .sns-account-wrap .sns-account-list:last-child{padding-bottom:0;border-bottom:0 none}
.sns-account .sns-account-wrap .sns-account-list dl{display:inline-block;width:calc(100% - 80px);vertical-align:middle}
.sns-account .sns-account-wrap .sns-account-list .sns{display:inline-block;margin-right:20px;width:60px;height:60px;border-radius:50%;vertical-align:top}
.sns-account .sns-account-wrap .sns-account-list dd{display:inline-block;font-size:14px;line-height:60px;color:var(--color-gray,#aaa);vertical-align:top}
.sns-account .sns-account-wrap .sns-account-list a{width:80px}
.sns-account .sns-account-wrap .sns-account-list a.on{border:1px solid var(--color-dark-gray,#333);background:#fff;color:var(--color-dark-gray,#333)}
.sns-account .sns-account-wrap .sns-account-list .naver{background:#03c75a url(/html/images/login/sns_naver.png) no-repeat center center}
.sns-account .sns-account-wrap .sns-account-list .kakao{background:#fee500 url(/html/images/login/sns_kakao.png) no-repeat center center}
.sns-account .sns-account-wrap .sns-account-list .facebook{background:#166fe5 url(/html/images/login/sns_facebook.png) no-repeat center center}
.sns-account .sns-account-wrap .sns-account-list .google{background:var(--color-light-gray2,#f5f5f7) url(/html/images/login/sns_google.png) no-repeat center center}
.form-wrap .form-box{position:relative}
.form-wrap .form-box + .form-box{margin-top:20px}
.form-wrap .form-box .form-title label{display:block;font-size:15px;line-height:30px;color:var(--color-primary,#0148d4)}
.form-wrap .form-box .input-box{display:flex;justify-content:space-between}
.form-wrap .form-box .input-box + .input-box{margin-top:5px}
.form-wrap .form-box .input-box input{padding:3px 5px;height:40px;border:0 none;border-bottom:1px solid var(--color-light-gray,#ccc);font-size:18px;color:var(--color-dark-gray,#333);flex-grow:1;background:transparent;max-width:100%}
.form-wrap .form-box .input-box input::placeholder{color:var(--color-gray,#aaa)}
.form-wrap .form-box .input-box select{padding:3px 10px;width:30%;min-width:60px}
.form-wrap .form-box .input-box span + input{width:30%;min-width:60px}
.form-wrap .form-box .input-box span{font-size:18px;color:var(--color-dark-gray,#333);line-height:40px;margin:0 5px}
.form-wrap .form-box .input-box input:read-only{background:#ddd;border-bottom:none}
.form-wrap .form-box .input-box .btn{display:inline-block;width:140px;border-radius:4px;border:1px solid var(--color-dark-gray,#333);font-weight:500;font-size:16px;line-height:38px;color:var(--color-dark-gray,#333);text-align:center;vertical-align:top;margin-left:10px}
.form-wrap .form-box .textarea-box textarea{width:100%;height:100px;font-size:18px;color:var(--color-dark-gray,#333);border:1px solid var(--color-light-gray,#ccc);resize:none}
.form-wrap .form-box .text{font-size:15px;color:var(--color-dark-gray,#333)}
.form-wrap .form-box .checkbox-wrap li{display:inline-block;vertical-align:top}
.form-wrap .form-box .checkbox-wrap li + li{margin-left:20px}
.form-wrap .form-box .checkbox-wrap + input{margin-top:15px}
.search-post{display:none;position:relative;border:1px solid #ced4da;width:100%;height:300px;margin:5px 0}
.search-post .search-post-btn{cursor:pointer;position:absolute;right:0;top:-1px;z-index:1}
@media only screen and (max-width:1180px) {
.mypage-modify-wrap{width:calc(100% - 390px)}
.sns-account{margin-left:30px;padding:20px;width:360px}
}
@media only screen and (max-width:850px) {
.mypage-modify-wrap{width:100%}
.sns-account{margin-top:30px;margin-left:0;width:100%}
}
@media only screen and (max-width:767px) {
.mypage-modify{margin-top:0}
.mypage-modify-btn{margin-top:30px}
.sns-account{margin-top:20px;padding:20px}
.sns-account h1{font-size:17px}
.sns-account .sns-account-wrap{margin-top:20px}
.sns-account .sns-account-wrap .sns-account-list{padding:7px 0}
.sns-account .sns-account-wrap .sns-account-list .sns{margin-right:10px;width:45px;height:45px}
.sns-account .sns-account-wrap .sns-account-list dl{width:calc(100% - 65px)}
.sns-account .sns-account-wrap .sns-account-list dd{font-size:12px;line-height:45px}
.sns-account .sns-account-wrap .sns-account-list a{width:65px}
.sns-account .sns-account-wrap .sns-account-list .naver{background-size:auto 30%}
.sns-account .sns-account-wrap .sns-account-list .kakao{background-size:auto 35%}
.sns-account .sns-account-wrap .sns-account-list .facebook{background-size:auto 40%}
.sns-account .sns-account-wrap .sns-account-list .google{background-size:auto 35%}
.form-wrap .form-box{margin-top:15px}
.form-wrap .form-box .input-box.input-button input{width:68%}
.form-wrap .form-box .input-box .btn{width:30%}
}

/* -------- 나의강의실 -------- */
.border-tab{width:100%;display:flex}
.border-tab li{position:relative;display:table-cell;border:1px solid var(--color-gray,#aaa);border-left-width:0;text-align:center;vertical-align:middle;flex-grow:1;height:60px;line-height:60px}
.border-tab li:first-child{border-left-width:1px}
.border-tab li.on:before{content:'';position:absolute;top:-1px;left:-1px;width:100%;height:100%;border:1px solid var(--color-primary,#0148d4)}
.border-tab li a{position:relative;z-index:10;display:block;font-size:20px;color:var(--color-gray,#aaa)}
.border-tab li.on a{font-weight:500;color:var(--color-primary,#0148d4)}

/* list */
.lecture-room-list{position:relative;left:-20px;width:calc(100% + 40px);display:flex;flex-wrap:wrap;gap:40px 4.25%;width:100%;left:0}
.lecture-room-list .lecture-room-box{width:50%;vertical-align:top;width:47.875%}
.lecture-room-box .thumb{position:relative;border-radius:4px;overflow:hidden;aspect-ratio:25/14}
.lecture-room-box .thumb a{overflow:hidden;display:block;border-radius:4px;line-height:0}
.lecture-room-box .thumb img{width:100%;height:100%;object-fit:cover}
.lecture-room-box.end .thumb .end-info{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.7);text-align:center}
.lecture-room-box.end .thumb .end-info span{position:absolute;top:50%;left:0;transform:translateY(-50%);width:100%;font-size:14px;color:#fff}
.lecture-room-box .lecture-info{padding-top:16px}
.lecture-room-box .lecture-info h1{font-size:0; display:flex;}
.lecture-room-box .lecture-info h1 > *{display:inline-block;vertical-align:top}
.lecture-room-box .lecture-info h1 .tit{/*width:calc(100% - 50px);*/ flex-grow:1; font-weight:700;font-size:18px;color:var(--color-dark-gray,#333)}
.lecture-room-box .lecture-info h1 .tit em{font-style:normal;font-weight:700;color:var(--color-primary,#0148d4)}
.lecture-room-box .lecture-info h1 .progress{/*width:50px;*/margin-left:auto; font-weight:700;font-size:18px;color:var(--color-dark-gray,#333);text-align:right}
.lecture-room-box .lecture-info .date{display:flex; margin:10px 0 17px;}
.lecture-room-box .lecture-info .date li{display:inline-block;width:calc(100% - 80px);font-size:15px;color:var(--color-dark-gray,#333);vertical-align:top}
.lecture-room-box .lecture-info .date li:last-child{margin-left:auto; text-align:right}
.lecture-room-box .lecture-info .btn-area li{margin-left:10px;width:calc(25% - 8px)}
.lecture-room-box .lecture-info .btn-area li:first-child{margin-left:0;width:calc(50% - 5px); flex-grow:1;}
.lecture-room-box .lecture-info .btn-area.n2 li{width:calc(50% - 5px)}
.lecture-room-box .lecture-info .btn-area li :is(button,a){width:100%;word-break:keep-all}
.lecture-room-box .lecture-info .btn-area li .btn-ml{height:50px;font-size:14px;display:flex;align-items:center; justify-content:center;}
.lecture-room-box .lecture-info .btn-area li :disabled{background:var(--color-light-gray,#ccc);border:1px solid var(--color-light-gray,#ccc)}
.btn-wrap a:disabled,
.btn-wrap button:disabled {pointer-events:none;}

@media only screen and (max-width:1024px) {
.lecture-room-tab{margin-top:40px}
.lecture-room-list{row-gap:30px}
}
@media only screen and (max-width:767px) {
.border-tab li{height:45px;line-height:45px}
.border-tab li a{font-size:16px}
.lecture-room-list{gap:25px 4%}
.lecture-room-list .lecture-room-box{width:46%}
.lecture-room-box .lecture-info .btn-area li{margin-left:5px;width:calc(25% - 3px)}
.lecture-room-box .lecture-info .btn-area li:first-child{width:calc(50% - 4px)}
.lecture-room-box .lecture-info .btn-area li .btn-ml{font-size:12px;height:40px;padding:0}
}
@media only screen and (max-width:640px) {
.lecture-room-list .lecture-room-box{width:100%}
.lecture-room-box .lecture-info{padding-top:12px}
.lecture-room-box .lecture-info h1 .tit{font-size:15px}
.lecture-room-box .lecture-info h1 .progress{font-size:15px}
.lecture-room-box .lecture-info .date{margin:7px 0 12px}
.lecture-room-box .lecture-info .date li{font-size:13px}
}

/* -------- 나의강의실 -------- */
.myclass-detail .myclass-banner{position:relative;width:100%;height:220px;background:url(/html/images/sub/mypage/myclass_header.jpg) no-repeat center center;background-size:cover}
.myclass-detail .myclass-banner h1{position:absolute;bottom:28px;left:20px;font-weight:500;font-size:32px;color:#fff}
.myclass-detail .myclass-banner h1 span{display:block;font-weight:300;font-size:18px}
.myclass-detail .myclass-lecture-info{margin:40px 0 59px;display:flex}
.myclass-lecture-info .thumb{overflow:hidden;width:47.874%;border-radius:4px;aspect-ratio:25/14}
.myclass-lecture-info .thumb img{width:100%;height:100%;object-fit:cover}
.myclass-lecture-info .myclass-lecture-info-txt{padding-left:40px;width:calc(100% - 47.874%)}
.myclass-lecture-info .myclass-lecture-info-txt .tit{font-weight:700;font-size:22px;color:var(--color-dark-gray,#333)}
.myclass-lecture-info .myclass-lecture-info-txt .tit span{display:block;font-weight:400;font-size:16px;color:var(--color-gray,#aaa)}
.myclass-lecture-info .myclass-lecture-info-txt .progress{margin:30px 0 20px;font-size:0}
.myclass-lecture-info .myclass-lecture-info-txt .progress dl{margin-bottom:7px}
.myclass-lecture-info .myclass-lecture-info-txt .progress dl dt,.myclass-lecture-info .myclass-lecture-info-txt .progress dl dd{display:inline-block;vertical-align:middle}
.myclass-lecture-info .myclass-lecture-info-txt .progress dl dt{font-weight:400;font-size:16px;color:var(--color-dark-gray,#333)}
.myclass-lecture-info .myclass-lecture-info-txt .progress dl dd{margin-left:5px;font-weight:700;font-size:20px}
.myclass-lecture-info .myclass-lecture-info-txt .progress dl dd span{font-size:16px}
.myclass-lecture-info .myclass-lecture-info-txt .progress-bar{position:relative;display:block;width:100%;height:6px;background:var(--color-light-gray2,#f5f5f7)}
.myclass-lecture-info .myclass-lecture-info-txt .progress-bar .bar{position:absolute;top:0;left:0;height:6px;background:var(--color-primary,#0148d4)}
.myclass-lecture-info .myclass-lecture-info-txt .btn-area li{width:25%}
.myclass-lecture-info .myclass-lecture-info-txt .btn-area :is(li:nth-child(2),li:nth-child(3)) button{width:100%; height:100%; font-weight:500;font-size:14px;min-height:50px;padding:0;word-break:keep-all}
.myclass-lecture-info .myclass-lecture-info-txt .btn-area li:first-child{width:50%}
.myclass-lecture-info .myclass-lecture-info-txt .btn-area li:first-child :is(a,button){width:100%;font-weight:700}
.myclass-lecture-info .btn-area{align-items:stretch; flex-wrap:nowrap;gap:10px}
@media only screen and (max-width:1024px) {
.myclass-detail .myclass-banner{display:none}
}
@media only screen and (max-width:980px) {
.myclass-lecture-info .thumb{width:40%}
.myclass-lecture-info .myclass-lecture-info-txt{padding-left:3%;width:60%}
}
@media only screen and (max-width:850px) {
.myclass-lecture-info .thumb{display:none;width:47.874%}
.myclass-detail .myclass-lecture-info{margin-top:30px;border-top:1px solid var(--color-dark-gray,#333)}
.myclass-lecture-info .myclass-lecture-info-txt{margin-top:20px;padding-left:0;width:100%}
}
@media only screen and (max-width:767px) {
.myclass-lecture-info .myclass-lecture-info-txt .tit span{font-size:14px}
.myclass-lecture-info .myclass-lecture-info-txt .progress{margin:10px 0 15px}
.myclass-lecture-info .myclass-lecture-info-txt .progress dl dt{font-size:14px}
.myclass-lecture-info .myclass-lecture-info-txt .progress dl dd{font-size:17px}
.myclass-lecture-info .myclass-lecture-info-txt .progress dl dd span{font-size:14px}
.myclass-lecture-info .btn-area{gap:6px}
.myclass-lecture-info .myclass-lecture-info-txt .btn-area :is(li:nth-child(2),li:nth-child(3)) button{font-size:12px;height:40px;padding:0}
}

.myclass-detail .myclass-detail-tab{border-bottom:1px solid #eee;font-size:0}
.myclass-detail .myclass-detail-tab li{position:relative;display:inline-block;margin-right:40px;vertical-align:top}
.myclass-detail .myclass-detail-tab li a{display:block;font-size:20px;line-height:40px;color:var(--color-dark-gray,#333)}
.myclass-detail .myclass-detail-tab li.on a:after{content:'';position:absolute;bottom:-1px;left:0;width:100%;height:4px;background:var(--color-primary,#0148d4)}
.myclass-detail .myclass-detail-sub-tab{width:100%;background:var(--color-light-gray2,#f5f5f7);font-size:0;overflow-x:hidden}
.myclass-detail .myclass-detail-sub-tab .swiper-slide{position:relative;display:inline-block;padding:0 20px;width:auto;vertical-align:top}
.myclass-detail .myclass-detail-sub-tab .swiper-slide a{display:block;font-size:18px;line-height:80px;color:var(--color-gray,#aaa)}
.myclass-detail .myclass-detail-sub-tab .on a{font-weight:500;color:var(--color-dark-gray,#333)}
.myclass-detail .myclass-detail-sub-tab .swiper-slide a:after{content:'';position:absolute;top:50%;right:0;margin-top:-9px;width:1px;height:18px;background:var(--color-gray,#aaa)}
.myclass-detail .myclass-detail-sub-tab .swiper-slide:last-child a:after{display:none}
.myclass-detail-conts-wrap .myclass-list-tit{margin-top:65px;margin-bottom:20px;font-weight:700;font-size:24px;color:var(--color-dark-gray,#333)}
.myclass-detail-conts-wrap .myclass-list-tit span{display:block;font-weight:500;font-size:16px;color:var(--color-primary,#0148d4)}
.myclass-detail-conts-wrap .myclass-list{border-top:1px solid #eee}
.myclass-list-box{padding:10px 0;border-bottom:1px solid #eee;display:flex}
.myclass-list-box > *{line-height:38px}
.myclass-list-box .tit{font-size:17px;color:var(--color-dark-gray,#333);flex-grow:1}
.myclass-list-box .tit span:not(.lecture-password){position:relative;top:-1px;display:inline-block;margin-left:20px;padding:0 11px;border:1px solid var(--color-primary,#0148d4);border-radius:13px;font-size:14px;line-height:23px;color:var(--color-primary,#0148d4);vertical-align:middle}
.myclass-list-box .tit strong{font-weight:500;color:var(--color-red,#dc3545)}
.myclass-list-box ul{font-size:0}
.myclass-list-box ul li{display:inline-block;font-size:16px;vertical-align:middle}
.myclass-list-box .etc{width:200px;flex-shrink:0}
.myclass-list-box .etc li{width:50%}
.myclass-list-box .etc .time{font-weight:300;font-size:16px;color:var(--color-gray,#aaa);text-align:left}
.myclass-list-box .etc .time img{position:relative;top:-1px;display:inline-block;margin-right:10px;vertical-align:middle}
.myclass-list-box .etc .progress{font-weight:700;color:var(--color-dark-gray,#333);text-align:center}
.myclass-list-box .play-btn{margin-left:20px;width:198px;flex-shrink:0;display:flex;align-items:stretch;justify-content:flex-end}
.myclass-list-box .play-btn li{margin-left:10px;width:94px}
.myclass-list-box .play-btn li:first-child{margin-left:0}
.myclass-list-box .play-btn li [class^="btn"]{width:100%; height:100%;}
.myclass-list-box .play-btn li [class^="btn"] img{position:relative;top:-1px;display:inline-block;margin-right:5px;vertical-align:middle}
.myclass-list-box .lecture-password{display:block;line-height:1.2em;font-size:15px}
.myclass-book {margin-bottom:40px;}
.myclass-book .myclass-list-tit {margin-bottom:10px;}
.myclass-book-list li + li{margin-top:10px}
.myclass-book-list a{font-size:16px;color:var(--color-dark-gray,#333)}
.myclass-book-list a img{width:16px;vertical-align:middle}
.play-btn a:disabled,.play-btn button:disabled{pointer-events:none}
.tab-conts-wrap{display:none}
.tab-conts-wrap.on{display:block}
@media only screen and (max-width:1180px) {
.myclass-detail .myclass-detail-sub-tab{position:relative}
.myclass-detail .myclass-detail-sub-tab:before{content:'';position:absolute;bottom:100%;left:100%;width:100%;height:1px;background:#eee}
.myclass-detail .myclass-detail-sub-tab:after{content:'';position:absolute;top:0;left:100%;width:100%;height:100%;background:var(--color-light-gray2,#f5f5f7)}
}
@media only screen and (max-width:850px) {
.myclass-list-box{padding:10px 0 20px;flex-direction:column}
.myclass-list-box > *{display:block}
.myclass-list-box .tit{width:100%}
.myclass-list-box .play-btn{margin-left:0;justify-content:flex-start}
}
@media only screen and (max-width:767px) {
.myclass-detail .myclass-detail-tab li{margin-right:25px}
.myclass-detail .myclass-detail-tab li a{font-size:16px;line-height:35px}
.myclass-detail .myclass-detail-sub-tab{padding:0 10px}
.myclass-detail .myclass-detail-sub-tab .swiper-slide{padding:0 10px}
.myclass-detail .myclass-detail-sub-tab .swiper-slide a{font-size:15px;line-height:60px}
.myclass-detail .myclass-detail-sub-tab .swiper-slide a:after{margin-top:-7px;height:14px}
.myclass-list-box > *{line-height:20px}
.myclass-list-tit{margin-top:30px;margin-bottom:10px;font-size:18px}
.myclass-list-tit span{font-size:14px}
.myclass-list-box .tit{font-size:15px}
.myclass-list-box .tit span:not(.lecture-password){margin-left:10px;padding:0 8px;font-size:12px;line-height:18px}
.myclass-list-box .etc{margin:9px 0 12px}
.myclass-list-box .play-btn li{width:85px}
.myclass-list-box .play-btn li button{height:36px;font-size:12px}
.myclass-list-box .lecture-password{margin-top:5px;font-size:13px}
.myclass-book {margin-bottom:30px;}
}

/* popup */
.popup-wrap:is(.result,.lecture-content) .popup-inner{max-height:560px}
.popup-wrap .result-wrap{margin-top:40px;border-top:1px solid var(--color-light-gray,#ccc);height:calc(100% - 70px);overflow-y:auto}
.popup-wrap .result-wrap .result-box{padding:20px 0;border-bottom:1px solid var(--color-light-gray,#ccc);font-size:0}
.popup-wrap .result-wrap .result-box dl{display:inline-block;width:calc(100% - 94px);vertical-align:top}
.popup-wrap .result-wrap .result-box dl dt{font-weight:700;font-size:18px;color:var(--color-dark-gray,#333)}
.popup-wrap .result-wrap .result-box dl dd{font-size:14px;color:var(--color-gray,#aaa)}
.popup-wrap .result-wrap .result-box dl dd > span,.popup-wrap .result-wrap .result-box dl dd > strong{font-weight:700;font-size:24px}
.popup-wrap .result-wrap .result-box dl dd > span{color:var(--color-gray,#aaa)}
.popup-wrap .result-wrap .result-box dl dd > strong{color:var(--color-dark-gray,#333)}
.popup-wrap .result-wrap .result-box dl dd > span span,.popup-wrap .result-wrap .result-box dl dd > strong span{font-size:16px}
.popup-wrap .result-wrap .result-box dl dd:last-child{margin-top:10px}
.popup-wrap .result-wrap .result-box .btn-wrap{display:inline-block;width:94px;vertical-align:top}
.popup-wrap .result-wrap .result-box .btn-wrap button{width:100%;height:40px;border-radius:4px;background:var(--color-primary,#0148d4);font-weight:500;font-size:14px;color:#fff}
.popup-wrap .result-wrap .no-data{text-align:center;min-height:180px}
@media only screen and (max-width:767px) {
.popup-wrap .result-wrap{height:calc(100vh - 200px)}
}

/* 결제하기 */
.order-wrap{position:relative}
.order-wrap .order-tit{display:block;margin-bottom:75px;font-weight:700;font-size:28px;color:var(--color-dark-gray,#333);text-align:center}
.order-wrap .order-conts-tit{display:block;margin-top:60px;padding-bottom:15px;border-bottom:1px solid var(--color-dark-gray,#333);font-weight:700;font-size:24px;color:var(--color-dark-gray,#333)}
.order-wrap .order-conts-tit:first-child{margin-top:0}
.goods-info-wrap .goods-info-box{padding:30px 10px 25px;border-bottom:1px solid var(--color-dark-gray,#333);display:flex;justify-content:space-between}
.goods-info-wrap .goods-info{flex-grow:1}
.goods-info-wrap .goods-info-box .sub-tit{font-size:0}
.goods-info-wrap .goods-info-box .sub-tit li{position:relative;display:inline-block;padding:0 10px;font-size:16px;color:var(--color-dark-gray,#333);vertical-align:middle}
.goods-info-wrap .goods-info-box .sub-tit li:first-child{padding-left:0}
.goods-info-wrap .goods-info-box .sub-tit li + li:before{content:'';position:absolute;top:50%;left:0;margin-top:-7px;width:1px;height:14px;background:#ddd}
.goods-info-wrap .goods-info-box .sub-tit li strong{font-weight:700;color:var(--color-primary,#0148d4)}
.goods-info-wrap .goods-info-box .sub-tit .teacher-name{color:var(--color-primary,#0148d4)}
.goods-info-wrap .goods-info-box .tit{margin:10px 0 15px;font-weight:700;font-size:22px;color:var(--color-dark-gray,#333);word-break:keep-all}
.goods-info-wrap .goods-info-box .date{font-size:16px;color:var(--color-gray,#aaa)}
.goods-info-wrap .goods-info-box .book-info{font-size:0}
.goods-info-wrap .goods-info-box .book-info li{position:relative;display:inline-block;padding:0 5px;font-weight:300;font-size:14px;color:var(--color-gray,#aaa);vertical-align:middle}
.goods-info-wrap .goods-info-box .book-info li:first-child{padding-left:0}
.goods-info-wrap .goods-info-box .book-info li:after{content:'';position:absolute;top:50%;right:0;margin-top:-7px;width:1px;height:14px;background:#b7b7b7}
.goods-info-wrap .goods-info-box .book-info li:last-child:after{display:none}
.goods-info-wrap .goods-info-box dl{margin-top:25px;font-size:0;display:flex;flex-wrap:wrap;align-items:center;padding:3px 0}
.goods-info-wrap .goods-info-box dl + dl{margin-top:0}
.goods-info-wrap .goods-info-box dl :is(dt,dd){display:inline-block;font-size:16px;vertical-align:top}
.goods-info-wrap .goods-info-box dl dt{width:100px;font-weight:400;color:var(--color-gray,#aaa)}
.goods-info-wrap .goods-info-box dl dd{width:calc(100% - 100px);color:var(--color-dark-gray,#333);text-align:left}
.goods-info-wrap .goods-info-box dl dd strong{font-weight:700}
.goods-info-wrap .goods-info-box dl dd span + button{margin-left:10px}
.goods-info-wrap .goods-info-box dl dd button{padding:6px 10px 7px}
.goods-info-wrap .goods-info-box dl dd.refund-box{display:flex;align-items:center}
.goods-info-wrap .good-img{width:220px;text-align:right;flex-shrink:0}
.goods-info-wrap .good-img img{max-width:100%}
.goods-info-wrap .good-img.books img{max-width:170px}
.order-wrap .order-box{display:inline-block;width:calc(100% - 420px);vertical-align:top}
.order-form-wrap .shipping-addr{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:15px 10px; margin:20px 0 50px;font-size:0}
.order-form-wrap .shipping-addr > *{display:inline-block;vertical-align:middle!important}
/* .order-form-wrap .shipping-addr .checkbox-wrap{width:calc(100% - 150px)} */
.order-form-wrap .shipping-addr a {width:auto;}
.order-form-wrap .input-form label{display:block;margin:15px 0 5px;font-size:15px;color:var(--color-primary,#0148d4)}
.order-form-wrap .input-form input[type="text"]{padding:0;width:100%;height:40px;border:0 none;border-bottom:1px solid var(--color-light-gray,#ccc);font-size:18px;color:var(--color-dark-gray,#333)}
.order-form-wrap .input-form input[type="text"].box-type{padding:0 20px;height:50px;border-radius:4px;border:1px solid var(--color-light-gray,#ccc)}
.order-form-wrap .input-form label input::placeholder{color:var(--color-gray,#aaa)}
.order-form-wrap .input-form input[type="text"].box-type::placeholder{color:var(--color-dark-gray,#333)}
.order-form-wrap .input-form .address-wrap{height:auto;font-size:0}
.order-form-wrap .input-form .address-wrap .input-addr{display:inline-block;padding:0 11px;border-radius:4px;border-bottom:0 none;background:#eee;vertical-align:top}
.order-form-wrap .input-form .address-wrap .input-addr:first-child{margin-right:10px;width:calc(100% - 150px)}
.order-form-wrap .input-form .address-wrap .input-addr:nth-child(3){margin:10px 0}
.order-form-wrap [class^="btn"]{display:inline-block;width:140px}
.order-form-wrap .input-form .address-wrap input.box-type{padding:0 20px;width:100%;height:50px;border:1px solid var(--color-light-gray,#ccc);border-radius:4px;font-size:18px;color:var(--color-dark-gray,#333)}
.order-form-table{width:100%;table-layout:fixed}
.order-form-table tr{border-bottom:1px solid #ddd}
.order-form-table tr:last-child{border-bottom-color:var(--color-dark-gray,#333)}
.order-form-table :is(th,td){padding:15px 10px;height:80px;vertical-align:middle}
.order-form-table th{font-weight:400;font-size:18px;color:var(--color-dark-gray,#333);text-align:left}
.order-form-table .vAt{vertical-align:top}
.order-form-table.coupon th{padding-top:30px;vertical-align:top}
.order-form-table.coupon input{text-align:right}
.order-form-table .btn-coupon{display:inline-block;margin-left:10px;width:140px}
.order-form-table.coupon input[type="text"]{display:inline-block;padding:0 10px;width:100%;border-radius:4px;border:1px solid var(--color-light-gray,#ccc);font-weight:700;font-size:22px;line-height:48px;color:var(--color-dark-gray,#333);text-align:right;vertical-align:middle}
.order-form-table.coupon .point{font-size:0}
.order-form-table.coupon .point .checkbox-wrap{display:inline-block;vertical-align:middle}
.order-form-table.coupon .point .checkbox-wrap input{display:none}
.order-form-table.coupon .point .checkbox-wrap label{margin-left:10px;font-size:0}
.order-form-table.coupon .point .checkbox-wrap label:before{margin-right:0}
.order-form-table.coupon .point [class^="btn"]{margin-left:10px;width:auto;padding:1px 4px 0}
.order-form-table.coupon td div{display:block;margin-top:7px;font-size:14px;color:var(--color-dark-gray,#333);text-align:right}
.order-form-table.coupon td div em{font-style:normal;color:#779df5}
.order-form-table .checkbox-wrap{display:flex;flex-wrap:wrap;gap:10px 20px}
.order-form-table .checkbox-wrap li:last-child{margin-right:0}
.order-form-table .checkbox-wrap label img{position:relative;top:-2px;display:inline-block;vertical-align:middle}
.order-form-table select{display:inline-block;padding-left:4px; padding-right:30px; width:calc(100% - 155px); text-align:right;}
.order-form-table select + input{display:inline-block;margin-left:10px;width:140px;height:50px;border-radius:4px;border:1px solid var(--color-light-gray,#ccc);font-size:18px;color:var(--color-dark-gray,#333);text-align:center;vertical-align:top}
.order-form-table .checkbox-wrap label span{display:block;padding-left:34px;font-size:16px;color:var(--color-gray,#aaa)}
.order-form-table .checkbox-wrap label span a{display:inline-block;font-size:14px;color:#ff8e20;vertical-align:middle}
.order-form-table .checkbox-wrap input:checked + label{font-weight:700;color:var(--color-dark-gray,#333)}
.order-form-table .checkbox-wrap input:checked + label span{font-weight:400}
.order-form-table td .desc{display:block;margin-top:7px;font-size:14px;color:var(--color-dark-gray,#333)}
.order-wrap .payment-info{position:relative;display:inline-block;margin-left:36px;width:380px;vertical-align:top}
.mypage-wrap .order-wrap{margin-top:30px}

@media only screen and (min-width:1025px) {
.order-wrap .payment-info.fixed{position:fixed;top:0;margin-top:100px}
.order-wrap .payment-info.on{position:absolute;top:auto;bottom:0;margin-top:0}
}
.order-wrap .payment-info .order-conts-tit{border-bottom:0 none}
.order-wrap .payment-inner{padding:30px;border-radius:4px;border:1px solid #ddd;background:#fff}
.order-wrap .payment-info dl{font-size:0}
.order-wrap .payment-info dl :is(dt,dd){display:inline-block;vertical-align:top}
.order-wrap .payment-info dl dd{text-align:right}
.order-wrap .payment-info .info + .info{margin-top:15px;padding-top:15px;border-top:1px solid var(--color-light-gray,#ccc)}
.order-wrap .payment-info .info :is(dt,dd){margin:3px 0;font-weight:400;font-size:16px;color:var(--color-dark-gray,#333)}
.order-wrap .payment-info .info dt{width:150px}
.order-wrap .payment-info .info dd{width:calc(100% - 150px);font-weight:500;font-size:18px;color:var(--color-gray,#aaa)}
.order-wrap .payment-info .info dd strong{font-weight:700;color:var(--color-dark-gray,#333)}
.order-wrap .payment-info .info dd span{font-size:16px}
.font-red{color:var(--color-red,#dc3545)!important}
.order-wrap .payment-info .total{margin:20px 0 30px;padding:20px 0;border-top:1px solid #ddd;border-bottom:2px solid var(--color-dark-gray,#333)}
.order-wrap .payment-info .total dt,.order-wrap .payment-info .total dd{width:50%;font-size:22px;color:var(--color-dark-gray,#333);vertical-align:middle}
.order-wrap .payment-info .total dd strong{font-weight:700;font-size:28px;word-break:break-all}
.order-wrap .payment-info.end .total dd strong{color:var(--color-primary,#0148d4)}
.order-wrap .payment-info .payment-btn li{display:block;margin-top:10px}
.order-wrap .payment-info .payment-btn li a{display:block;width:100%;padding:15px 15px 16px;font-size:18px}
.order-wrap .payment-info .payment-btn li:last-child a{color:var(--color-dark-gray,#333)}
.order-table{width:100%;border-bottom:1px solid var(--color-dark-gray,#333);table-layout:fixed}
.order-table :is(th,td){padding-top:10px;padding-bottom:10px}
.order-table th{padding-left:10px;font-size:16px;color:var(--color-gray,#aaa);text-align:left; word-break:break-word;}
.order-table td{font-size:18px;color:var(--color-dark-gray,#333)}
.order-table tr:first-child :is(th,td){padding-top:25px}
.order-table tr:last-child :is(th,td){padding-bottom:25px}
.order-table .total-price{color:var(--color-primary,#0148d4);font-size:28px}
.order-table .expire-date{color:var(--color-red,#dc3545)}
@media only screen and (max-width:1024px) {
.order-wrap .order-box{width:100%}
.order-wrap .payment-info{margin-top:40px;margin-left:0;width:100%}
}
@media only screen and (max-width:767px) {
.order-wrap .order-tit{margin-bottom:35px;font-size:20px}
.goods-info-wrap .goods-info-box{padding:20px 5px 15px}
.goods-info-wrap .good-img{width:100px}
.goods-info-wrap .good-img.books img{max-width:100%}
.goods-info-wrap .goods-info-box .sub-tit li{padding:0 7px;font-size:14px}
.goods-info-wrap .goods-info-box .sub-tit li:after{margin-top:-5px;height:10px}
.goods-info-wrap .goods-info-box .tit{margin:5px 5px 10px 0;font-size:16px;line-height:1.3}
.goods-info-wrap .goods-info-box .date{font-size:14px}
.goods-info-wrap .goods-info-box dl{margin-top:15px}
.goods-info-wrap .goods-info-box dl :is(dt,dd){margin:2px 0;font-size:14px}
.order-form-wrap .input-form label{font-size:13px}
.order-form-wrap .input-form input[type="text"]{font-size:15px;line-height:35px}
.order-form-wrap .shipping-addr{margin:10px 0 30px}
.order-form-wrap .input-form input[type="text"]{height:35px}
.order-form-wrap [class^="btn"]{width:120px}
/* .order-form-wrap .shipping-addr .checkbox-wrap{width:calc(100% - 120px)} */
.order-form-wrap .input-form .address-wrap .input-addr:first-child{margin-right:5px;width:calc(100% - 125px)}
.order-form-wrap .input-form input[type="text"].box-type{padding:0 10px;height:40px}
.order-form-table.coupon colgroup{display:none}
.order-form-table.coupon th{width:70px}
.order-form-table select{padding-left:10px;width:calc(100% - 105px);font-size:13px}
.order-form-table .btn-coupon{margin-left:5px;width:95px}
.order-form-table select + input{margin-left:5px;width:95px;height:40px;font-size:15px;line-height:40px}
.order-form-table.coupon input[type="text"]{font-size:18px;line-height:38px}
.order-form-table.coupon td div,.order-form-table.coupon .point [class^="btn"]{font-size:12px}
.order-form-table.payment colgroup{display:none}
.order-form-table.payment :is(th,td){display:block;width:100%;height:auto}
.order-form-table th{padding-bottom:0;font-size:15px}
.order-form-table .checkbox-wrap{flex-direction:column}
.order-form-table .checkbox-wrap label span{margin:3px 0;padding-left:23px}
.order-form-table .checkbox-wrap label span:first-child{margin-top:5px}
.order-form-table .checkbox-wrap label span:last-child{margin-bottom:8px}
.order-wrap .order-conts-tit{margin-top:30px;padding-bottom:10px;font-size:18px}
.order-table th,.order-table td{padding-top:5px;padding-bottom:5px}
.order-table th{font-size:14px}
.order-table td{font-size:15px}
.order-table tr:first-child :is(th,td){padding-top:15px}
.order-table tr:last-child :is(th,td){padding-bottom:15px}
.order-wrap .payment-inner{padding:20px}
.order-wrap .payment-info .info + .info{margin-top:8px;padding-top:8px}
.order-wrap .payment-info .info :is(dt,dd){font-size:14px}
.order-wrap .payment-info .info dt{width:170px}
.order-wrap .payment-info .info dd{width:calc(100% - 170px)}
.order-wrap .payment-info .total{margin:15px 0 20px;padding:15px 0}
.order-wrap .payment-info .total :is(dt,dd){font-size:18px}
.order-wrap .payment-info .total dd strong{font-size:22px}
.order-wrap .payment-info .payment-btn li{margin-top:7px}
.order-wrap .payment-info .payment-btn li a{font-size:15px;padding:10px 15px 11px}
}

/* coupon */
.popup-box{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);padding:40px;width:560px;height:290px;border-radius:10px;border:1px solid var(--color-light-gray,#ccc);background:#fff;display:none}
.popup-box .popup-tit{display:block;margin-bottom:45px;font-weight:500;font-size:24px;line-height:1;color:var(--color-dark-gray,#333);text-align:left}
.popup-box input{width:100%;height:60px;border:1px solid var(--color-light-gray,#ccc);border-radius:4px;font-weight:700;font-size:22px;color:var(--color-dark-gray,#333);letter-spacing:3px;text-align:center}
.popup-box button{margin-top:20px;width:100%}

@media only screen and (max-width:767px) {
.popup-box{padding:25px 20px;width:calc(100% - 40px);max-width:560px;height:auto}
.popup-box .popup-tit{margin-bottom:30px;font-size:18px}
.popup-box input{height:45px;font-size:18px}
.popup-box button{margin-top:10px}
}

/* popup */
/* .popup-wrap{position:fixed;top:0;left:0;bottom:0;right:0;z-index:99999;width:100%;height:100%;background:rgba(0,0,0,.8)}
.popup-wrap .popup-inner{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);padding:40px;max-width:560px;width:calc(100% - 60px);max-height:800px;height:calc(100% - 60px);border-radius:10px;background:#fff}
.popup-wrap .popup-tit{font-weight:500;font-size:24px;color:var(--color-dark-gray,#333)} */
.popup-wrap .addr-list{border-top:1px solid var(--color-light-gray,#ccc)}
.popup-wrap .addr-list .addr-box{padding:15px 0;border-bottom:1px solid var(--color-light-gray,#ccc);font-size:0}
.popup-wrap .addr-list .addr-box > *{display:inline-block;vertical-align:middle}
.popup-wrap .addr-list .addr-info{width:calc(100% - 24px)}
.popup-wrap .addr-list .addr-info > *{font-size:16px;color:var(--color-dark-gray,#333);word-break:keep-all}
.popup-wrap .addr-list .addr-info .name{font-weight:700}
.popup-wrap .addr-list .addr-info .address{line-height:1.2}
.popup-wrap .addr-list .addr-info .msg{margin-top:7px}
.popup-wrap .addr-list .checkbox{width:24px}
.popup-wrap .addr-list .checkbox input{display:none}
.popup-wrap .addr-list .checkbox label{display:inline-block;width:24px;height:24px;border:1px solid var(--color-light-gray,#ccc);border-radius:50%;font-size:0;vertical-align:middle;cursor:pointer}
.popup-wrap .addr-list .checkbox input:checked + label{border:8px solid var(--color-primary,#0148d4)}
/* .popup-wrap .popup-btn{width:100%}
.popup-wrap .popup-btn a{display:block}
.popup-wrap .popup-btn{display:flex}
.popup-wrap .popup-btn button + button{margin-left:10px}
.popup-wrap .popup-contents-wrap{margin-top:30px;height:calc(100% - 178px)}
.popup-wrap .popup-scroll{overflow-x:hidden} */
.popup-wrap .lecture-content-area{margin:15px 10px}

@media only screen and (max-width:767px) {
/* .popup-wrap .popup-tit{font-size:18px}
.popup-wrap .popup-inner{padding:25px;max-height:calc(100vh - 100px);height:auto} */
.popup-wrap .addr-list{margin:25px 0}
.popup-wrap .addr-list .addr-box{padding:10px 0}
.popup-wrap .addr-list .addr-info > *{font-size:14px}
.popup-wrap:is(.result,.lecture-content) .popup-inner{max-height:calc(100% - 60px);height:auto}
.popup-wrap .result-wrap{margin-top:20px}
.popup-wrap .result-wrap .result-box{padding:15px 0}
.popup-wrap .result-wrap .result-box dl{width:100%}
.popup-wrap .result-wrap .result-box dl dt{font-size:16px}
.popup-wrap .result-wrap .result-box dl dd{font-size:12px}
.popup-wrap .result-wrap .result-box dl dd > span,.popup-wrap .result-wrap .result-box dl dd > strong{font-size:18px}
.popup-wrap .result-wrap .result-box dl dd:last-child{margin-top:5px}
.popup-wrap .result-wrap .result-box dl dd > span span,.popup-wrap .result-wrap .result-box dl dd > span strong{font-size:14px}
.popup-wrap .result-wrap .result-box .btn-wrap{margin-top:15px;width:80px}
.popup-wrap .result-wrap .result-box .btn-wrap button{height:35px;font-size:12px}
/* .popup-wrap .close{top:17px;right:17px;width:32px;height:32px}
.popup-wrap .popup-contents-wrap{margin-bottom:10px;height:calc(100vh - 282px)} */
.popup-wrap .lecture-content-area{margin:10px}
}

/* leveltest */
.popup-wrap.mock-test-popup {z-index:120;}
#leveltestWrap{position:relative;padding:20px;width:100%;min-height:100vh;background:var(--color-dark-gray,#333)}
#leveltestWrap #header{position:absolute;top:20px;left:20px;width:calc(100% - 40px);height:100px;box-shadow:none}
#leveltestWrap #header #logo{left:20px}
#leveltestWrap #header .leveltest-tit{position:absolute;top:0;left:50%;transform:translateX(-50%);font-weight:700;font-size:32px;line-height:100px;color:var(--color-dark-gray,#333);text-align:center}
#leveltestWrap #header .close{position:absolute;top:50%;right:20px;margin-top:-21px;width:42px;height:42px;font-size:0}
#leveltestWrap #header .close:before,#leveltestWrap #header .close:after{content:'';position:absolute;top:50%;left:0;width:100%;height:2px;border-radius:5px;background:var(--color-gray,#aaa)}
#leveltestWrap #header .close:before{transform:rotate(45deg)}
#leveltestWrap #header .close:after{transform:rotate(-45deg)}
#leveltestWrap #contents{overflow:hidden;padding:100px 0;width:100%;min-height:calc(100vh - 40px);background:#fff}

@media only screen and (max-width:950px) {
#leveltestWrap{padding:0}
#leveltestWrap #header{top:0;left:0;width:100%}
#leveltestWrap #header #logo{display:none}
#leveltestWrap #header .leveltest-tit{left:20px;transform:none;text-align:left}
#leveltestWrap #contents{min-height:100vh}

#leveltestWrap.test-result #header {height:150px; padding:20px 20px 0;}
#leveltestWrap.test-result #header #logo {display:block; position:static; text-align:center; transform:none;}
#leveltestWrap.test-result #header #logo img {vertical-align:top;}
#leveltestWrap.test-result #header .leveltest-tit {position:static; margin-top:30px; line-height:1.4em; text-align:center; transform:none;}
#leveltestWrap.test-result #header .close {top:15px; margin-top:0;}
#leveltestWrap.test-result #contents {padding:150px 0 100px;}
}
@media only screen and (max-width:768px) {
#leveltestWrap #header{height:60px}
#leveltestWrap #header.fixed{position:fixed}
#leveltestWrap #header .leveltest-tit{left:15px;font-size:18px;line-height:60px}
#leveltestWrap #contents{padding:60px 0 0}
#leveltestWrap #header .close{right:10px;margin-top:-13px;width:26px;height:26px}

#leveltestWrap.test-result #header {height:100px;}
#leveltestWrap.test-result #header #logo img {height:100%;}
#leveltestWrap.test-result #header .leveltest-tit {text-align:left;}
#leveltestWrap.test-result #contents {padding-top:100px;}
}

.leveltest-conts-wrap .leveltest-conts{position:relative}
.leveltest-conts-wrap .leveltest-conts .leveltest-conts-inner{margin:0 auto;width:800px}
@media only screen and (max-width:880px) {
.leveltest-conts-wrap .leveltest-conts .leveltest-conts-inner{padding:20px 20px 0;width:100%}
}
@media only screen and (max-width:768px) {
.leveltest-conts-wrap .leveltest-conts .leveltest-conts-inner{padding-bottom:100px}
.leveltest-conts-wrap .leveltest01 .leveltest-conts-inner{min-height:calc(100vh - 60px)}
}

/* 01 */
.leveltest-conts-wrap .leveltest .user-info-box {max-width:1200px; margin:auto;}
.leveltest-conts-wrap .leveltest .user-info{display:flex; flex-wrap:wrap; position:relative;left:-10px;margin-bottom:80px;width:calc(100% + 20px);font-size:0}
.leveltest-conts-wrap .leveltest .user-info dl{display:inline-block;margin:0 5px 5px;padding:8px 0 7px;width:calc(25% - 10px);border-radius:4px;background:var(--color-light-gray2,#f5f5f7);text-align:center;vertical-align:top}
.leveltest-conts-wrap .leveltest .user-info dl dt{display:block;font-weight:400;font-size:14px;color:var(--color-dark-gray,#333)}
.leveltest-conts-wrap .leveltest .user-info dl dd{display:block;font-weight:700;font-size:18px;color:var(--color-dark-gray,#333)}
.leveltest-conts-wrap .leveltest01 .user-info{display:flex; flex-wrap:wrap;margin-bottom:2.3333rem;}
.leveltest-conts-wrap .leveltest01 .user-info dl{width:calc(16.66% - 10px);}
.leveltest-conts-wrap .leveltest01 .leveltest-cover img{width:100%}
.leveltest-conts-wrap .leveltest01 h1{margin-top:25px;font-weight:700;font-size:32px;color:var(--color-dark-gray,#333);text-align:center}
.leveltest-conts-wrap .leveltest01 p{margin-top:5px;font-weight:400;font-size:20px;color:var(--color-dark-gray,#333);text-align:center}
.leveltest-conts-wrap .leveltest .leveltest-button{margin-top:40px;border-radius:4px;width:100%;height:80px;border-radius:4px;background:var(--color-red,#dc3545);font-weight:500;font-size:20px;color:#fff}
.leveltest-conts-wrap .leveltest .leveltest-button.disabled{background:#ddd;}
.leveltest-conts-wrap .leveltest01 .image-box {height:180px; max-height:180px; background:url(/html/images/sub/leveltest/leveltest_img01.png) no-repeat center/cover; border-radius:10px;}
.leveltest-conts-wrap .leveltest01 .image-box span {font-size:0; text-indent:-9999em;}
.leveltest-conts-wrap .dot-list.exam-list {margin-top:35px;}
.leveltest-conts-wrap .dot-list.exam-list li {color:#000; font-weight:500;}
.leveltest-conts-wrap .dot-list.exam-list li + li {margin-top:0;}
.leveltest-conts-wrap .dot-list.exam-list li .text-blue {color:#0148d4;}
.leveltest-conts .btn-area {justify-content:center; margin-top:1.6667rem;}
.leveltest-conts .certify-btn {width:14.6667rem;}
.leveltest-conts .notice-box {margin-top:2.6667rem; padding-top:1.3333rem; border-top:1px solid #ddd;}
.leveltest-conts .notice-box .notice-title {font-weight:bold; font-size:15px; color:#aaa;}
.leveltest-conts .notice-box .dot-list {margin-top:5px;}
.leveltest-conts .notice-box .dot-list li {padding-left:10px; line-height:21px; font-weight:500; font-size:15px; color:#aaa;}
.leveltest-conts .notice-box .dot-list li + li {margin-top:0;}
.leveltest-conts .notice-box .dot-list li:before {top:9px; background:#aaa;}

.popup-wrap[class*=certify] {background:rgba(0,0,0,.2); z-index:120;}
.popup-wrap[class*=certify] .popup-inner {display:flex; flex-direction:column; width:calc(100vw - 40px); max-width:500px; height:480px;}
.popup-wrap[class*=certify] .popup-contents-wrap {margin-top:25px; height:auto;}
.popup-wrap[class*=certify] .form-wrap .form-box + .form-box {margin-top:16px;}
.popup-wrap[class*=certify] .form-wrap .form-box .input-box input {height:38px;}
.popup-wrap[class*=certify] .popup-btn {margin-top:auto;}
.popup-wrap.certify-result .popup-inner {height:400px;}
.popup-wrap[class*=certify] .certify-result {display:flex; flex-direction:column; justify-content:center; align-items:center; gap:16px; width:100%; max-width:420px; height:150px; font-size:18px; color:#333; font-weight:bold; text-align:center; background:#f5f5f5; border-radius:4px;}
.popup-wrap[class*=certify] .certify-result:before {content:''; display:inline-block; width:48px; height:48px; background:url(/html/images/sub/common/icon_exclamation_lg.png) no-repeat center/contain;}

@media only screen and (max-width:1024px) { 
    .leveltest-conts-wrap .leveltest01 .user-info dl {width:calc(33.33% - 10px);}
}
@media only screen and (max-width:768px) {
/* .leveltest-conts-wrap .leveltest01 .leveltest-conts-inner{background:url(/html/images/sub/leveltest/m_leveltest_cover.png) no-repeat center center;background-size:cover} */
/* .leveltest-conts-wrap .leveltest01 .leveltest-cover img{display:none} */
.leveltest-conts-wrap .leveltest .leveltest-button{position:absolute;bottom:0;left:0;border-radius:0;height:60px;font-size:15px}
.leveltest-conts-wrap .leveltest01 h1{margin-top:20vh;font-size:22px}
.leveltest-conts-wrap .leveltest01 p{font-size:14px}
.leveltest-conts-wrap .leveltest01 .user-info{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);margin-bottom:0;padding:0 30px;max-width:400px}
.leveltest-conts-wrap .leveltest .user-info dl{margin:0 3px;padding:15px 0;width:calc(25% - 6px)}
.leveltest-conts-wrap .leveltest01 .user-info dl{margin:5px;padding:18px 0;width:calc(50% - 10px)}
.leveltest-conts-wrap .leveltest .user-info dl dt{font-size:9px}
.leveltest-conts-wrap .leveltest .user-info dl dd{font-size:11px}
.leveltest-conts-wrap .leveltest .user-info{margin-bottom:30px}
    
.leveltest-conts-wrap .leveltest01 .user-info {position:static; transform:none; max-width:none; margin-bottom:10px;}
.leveltest-conts-wrap .leveltest01 .user-info dl dt {font-size:11px;}
.leveltest-conts-wrap .leveltest01 .user-info dl dd {font-size:12px;}
.leveltest-conts-wrap .leveltest01 .image-box {height:21.3vw;}
.leveltest-conts-wrap .leveltest01 .notice-box .notice-title {font-size:13px;}
.leveltest-conts-wrap .lleveltest01 .notice-box .dot-list li {font-size:13px;}
.popup-wrap[class*=certify] .popup-inner {height:420px;}
.popup-wrap.certify-result .popup-inner {height:350px;}
}
@media only screen and (max-width:640px) { 
    .leveltest-conts-wrap .leveltest01 .user-info dl {width:calc(50% - 10px);}
}
@media only screen and (max-width:480px) { 
    .leveltest-conts-wrap .leveltest01 .image-box {height:110px; background-size:auto 110px;}
}

.leveltest-conts-wrap .leveltest02 .time{margin-bottom:50px;padding:0 10px;border-radius:10px;background:var(--color-light-gray2,#f5f5f7)}
.leveltest-conts-wrap .leveltest02 .time dt,.leveltest-conts-wrap .leveltest02 .time dd{display:inline-block;font-weight:400;font-size:22px;line-height:60px;color:var(--color-dark-gray,#333);vertical-align:top}
.leveltest-conts-wrap .leveltest02 .time dd{font-weight:700}
.leveltest-conts-wrap .leveltest .questions{position:relative;margin-top:95px;margin-bottom:25px;font-weight:700;font-size:28px;color:var(--color-dark-gray,#333);word-break:keep-all}
.leveltest-conts-wrap .leveltest .questions:first-of-type{margin-top:50px}
.leveltest-conts-wrap .leveltest .questions strong{font-weight:700;color:var(--color-gray,#aaa)}
.leveltest-conts-wrap .leveltest .questions span{font-size:22px}
.leveltest-conts-wrap .leveltest .img-wrap{line-height:0}
.leveltest-conts-wrap .leveltest .img-wrap img{width:100%}
.leveltest-conts-wrap .leveltest .image img{max-width:100%}
.leveltest-conts-wrap .leveltest .questions-word{padding:40px 30px;border:1px dashed var(--color-gray,#aaa);font-weight:700;font-size:28px;color:var(--color-dark-gray,#333)}
.leveltest-conts-wrap .leveltest .questions-word span{position:relative;bottom:5px;display:inline-block;width:80px;border-bottom:2px solid var(--color-dark-gray,#333);vertical-align:bottom}
.leveltest-conts-wrap .leveltest .select-answer{position:relative;left:-10px;margin-top:10px;width:calc(100% + 20px);font-size:0}
.leveltest-conts-wrap .leveltest .select-answer li{display:inline-block;margin-top:20px;padding:0 10px;width:50%; vertical-align:top;}
.leveltest-conts-wrap .leveltest .select-answer li.full{width:100%}
.leveltest-conts-wrap .leveltest .select-answer li input{display:none}
.leveltest-conts-wrap .leveltest .select-answer li label{position:relative;display:block;padding:14px 30px;width:100%;border:1px solid #ddd;font-size:22px;line-height:1.4em;color:var(--color-dark-gray,#333);cursor:pointer}
.leveltest-conts-wrap .leveltest .select-answer li input:checked + label{background:url(/html/images/sub/leveltest/icon_check.png) no-repeat 93% center}
.leveltest-conts-wrap .leveltest .select-answer li input:checked + label:before{content:'';position:absolute;top:-1px;left:-1px;width:calc(100% + 2px);height:calc(100% + 2px);box-sizing:border-box;border:2px solid var(--color-dark-gray,#333)}
.leveltest-conts-wrap .leveltest .select-answer li input.wrong + label:before{content:'';position:absolute;top:-1px;left:-1px;width:calc(100% + 2px);height:calc(100% + 2px);box-sizing:border-box;border:2px solid var(--color-dark-gray,#333)}
.leveltest-conts-wrap .leveltest .select-answer li input.correct + label{background:url(/html/images/sub/leveltest/icon_check_red.png) no-repeat 93% center;color:var(--color-red,#dc3545)}
.leveltest-conts-wrap .leveltest .select-answer li input.correct + label:before{content:'';position:absolute;top:-1px;left:-1px;width:calc(100% + 2px);height:calc(100% + 2px);box-sizing:border-box;border:2px solid var(--color-red,#dc3545)}
.leveltest-conts-wrap .leveltest .select-answer li input[type="text"]{display:block;padding:0 30px;width:100%;height:60px;border:1px solid #ddd;font-size:22px;color:var(--color-dark-gray,#333)}
.leveltest-conts-wrap .leveltest .select-answer li input[type="text"]:placeholder{color:var(--color-gray,#aaa)}
.leveltest-conts-wrap .leveltest .select-answer li textarea{display:block;padding:10px 20px;width:100%;min-height:100px;border:1px solid #ddd;font-size:22px;color:var(--color-dark-gray,#333);line-height:1.4em}
.leveltest-conts-wrap .leveltest .select-answer li textarea:placeholder{color:var(--color-gray,#aaa)}
.leveltest-conts-wrap .leveltest .select-answer li .text{position:relative;display:block;padding:14px 30px;width:100%;border:1px solid #ddd;font-size:22px;line-height:1.4em;color:var(--color-dark-gray,#333)}
.leveltest-conts-wrap .leveltest .select-answer li .text.correct{background:url(/html/images/sub/leveltest/icon_check_red.png) no-repeat 93% center;color:var(--color-red,#dc3545)}
.leveltest-conts-wrap .leveltest .select-answer li .text.correct:before{content:'';position:absolute;top:-1px;left:-1px;width:calc(100% + 2px);height:calc(100% + 2px);box-sizing:border-box;border:2px solid var(--color-red,#dc3545)}
.leveltest-conts-wrap .leveltest .answer-sheet{position:fixed;top:120px;right:60px;height:82vh; max-height:calc(100vh - 120px); min-height:350px;overflow-y:scroll; z-index:10;width:300px;background:#fff;}
.leveltest-conts-wrap .leveltest .answer-sheet table{width:100%}
.leveltest-conts-wrap .leveltest .answer-sheet table caption{background:#2a2b34;font-weight:700;font-size:24px;line-height:60px;color:#fff}
.leveltest-conts-wrap .leveltest .answer-sheet table th,.leveltest-conts-wrap .leveltest .answer-sheet table td{height:40px;border:1px solid var(--color-gray,#aaa);font-size:16px;color:var(--color-dark-gray,#333);vertical-align:middle;text-align:center}
.leveltest-conts-wrap .leveltest .answer-sheet table td:nth-of-type(2){color:var(--color-red,#dc3545)}
.leveltest-conts-wrap .leveltest .answer-sheet table th{font-weight:700}
.leveltest-conts-wrap .leveltest .answer-sheet table tbody tr{position:relative;cursor:pointer}
.leveltest-conts-wrap .leveltest .answer-sheet table .on:after{content:'';position:absolute;top:-1px;left:-1px;width:100%;height:100%;border:3px solid var(--color-red,#dc3545);box-sizing:border-box}
@media only screen and (max-width:1024px) {
.leveltest-conts-wrap .leveltest .answer-sheet{display:none}
}
@media only screen and (max-width:768px) {
.leveltest-conts-wrap .leveltest02 .time{margin-bottom:20px}
.leveltest-conts-wrap .leveltest02 .time dt,.leveltest-conts-wrap .leveltest02 .time dd{font-size:17px;line-height:45px}
.leveltest-conts-wrap .leveltest .questions{margin-top:40px;margin-bottom:20px;font-size:20px;line-height:1.3}
.leveltest-conts-wrap .leveltest .select-answer li{margin-top:10px;width:100%}
.leveltest-conts-wrap .leveltest .select-answer li label{padding:0 20px;font-size:17px;line-height:45px}
.leveltest-conts-wrap .leveltest .select-answer li input:checked + label,.leveltest-conts-wrap .leveltest .select-answer li input.correct + label{background-position:95% center;background-size:auto 20px}
.leveltest-conts-wrap .leveltest .select-answer li input[type="text"]{padding:0 20px;height:45px;font-size:17px}
.leveltest-conts-wrap .leveltest .questions-word{padding:20px 15px;font-size:20px}
.leveltest-conts-wrap .leveltest .questions-word span{width:50px}
.leveltest-conts-wrap .leveltest .select-answer li textarea{padding:10px 15px;font-size:17px;min-height:70px}
.leveltest-conts-wrap .leveltest .select-answer li .text{padding:0 20px;font-size:17px;line-height:45px}
.leveltest-conts-wrap .leveltest .select-answer li .text.correct{background-position:95% center;background-size:auto 20px}
}

.leveltest-conts-wrap .leveltest.leveltest-result .user-info{margin-bottom:70px;}
.leveltest-conts-wrap .leveltest .leveltest-result-tit{position:relative;padding-left:23px;margin-bottom:15px;font-weight:700;font-size:20px;color:var(--color-dark-gray,#333);word-break:keep-all}
.leveltest-conts-wrap .leveltest .leveltest-result-tit:before{content:'';position:absolute;top:7px;left:0;width:15px;height:15px;background:var(--color-dark-gray,#333)}
.leveltest-conts-wrap .leveltest .leveltest-result-wrap{position:relative;padding:25px 0;background:var(--color-light-gray2,#f5f5f7)}
.leveltest-conts-wrap .leveltest .leveltest-result-wrap:before,.leveltest-conts-wrap .leveltest .leveltest-result-wrap:after{content:'';position:absolute;top:0;width:100%;height:100%;background:var(--color-light-gray2,#f5f5f7)}
.leveltest-conts-wrap .leveltest .leveltest-result-wrap:before{left:100%}
.leveltest-conts-wrap .leveltest .leveltest-result-wrap:after{right:100%}
.leveltest-conts-wrap .leveltest .leveltest-result-wrap ul{display:flex;}
.leveltest-conts-wrap .leveltest .leveltest-result-wrap ul:first-of-type li{width:calc(50% - 10px)}
.leveltest-conts-wrap .leveltest .leveltest-result-wrap ul li{display:inline-block;margin:5px;padding:15px 0;width:calc(25% - 10px);height:80px;border-radius:4px;background:#fff;box-shadow:0 0 10px rgba(0,0,0,.05);font-size:14px;color:var(--color-dark-gray,#333);text-align:center;vertical-align:top}
.leveltest-conts-wrap .leveltest .leveltest-result-wrap ul li strong{display:block;font-weight:700;font-size:22px;color:var(--color-dark-gray,#333)}
.leveltest-conts-wrap .leveltest .leveltest-result-wrap ul:last-of-type li:last-child{padding:0;}
.leveltest-conts-wrap .leveltest .leveltest-result-wrap ul:last-of-type li.pass a{color:var(--color-primary,#0148d4)}
.leveltest-conts-wrap .leveltest .leveltest-result-wrap ul li a{display:block;font-weight:700;font-size:22px;line-height:80px;color:#aaa}
.leveltest-conts-wrap .leveltest .leveltest-result-table-wrap{padding-top:50px}
.leveltest-conts-wrap .leveltest .leveltest-result-table{width:100%}
.leveltest-conts-wrap .leveltest .leveltest-result-table .on{position:relative}
.leveltest-conts-wrap .leveltest .leveltest-result-table .on:after{content:'';position:absolute;top:-1px;left:-1px;width:100%;height:100%;border:3px solid var(--color-red,#dc3545);box-sizing:border-box}
.leveltest-conts-wrap .leveltest .leveltest-result-table th,.leveltest-conts-wrap .leveltest .leveltest-result-table td{border:1px solid var(--color-gray,#aaa);height:40px;font-size:16px;vertical-align:middle;text-align:center}
.leveltest-conts-wrap .leveltest .leveltest-result-table th{font-weight:700;color:var(--color-dark-gray,#333)}
.leveltest-conts-wrap .leveltest .wrong-answer-note{margin-top:110px}
.leveltest-conts-wrap .leveltest .wrong-answer-note .wrong-answer-note-tit{margin-bottom:-45px;border:1px solid var(--color-dark-gray,#333);font-weight:700;font-size:28px;line-height:78px;color:var(--color-dark-gray,#333);text-align:center}
.leveltest-conts-wrap .leveltest .explanation-table{margin-top:22px;width:100%}
.leveltest-conts-wrap .leveltest .explanation-table:last-child{margin-bottom:0}
.leveltest-conts-wrap .leveltest .explanation-table th,.leveltest-conts-wrap .leveltest .explanation-table td{border:1px solid var(--color-light-gray,#ccc);text-align:left}
.leveltest-conts-wrap .leveltest .explanation-table th{padding:19px 30px;background:var(--color-light-gray2,#f5f5f7);font-weight:700;font-size:18px;color:var(--color-dark-gray,#333)}
.leveltest-conts-wrap .leveltest .explanation-table td{padding:15px 30px;font-size:16px;color:var(--color-dark-gray,#333)}
.leveltest-conts-wrap .leveltest .explanation-form th{font-size:0}
.leveltest-conts-wrap .leveltest .explanation-table th ul{display:inline-block;width:calc(100% - 120px);vertical-align:middle}
.leveltest-conts-wrap .leveltest .explanation-table th ul li{display:inline-block;margin-right:10px;font-weight:700;font-size:18px;line-height:40px;color:var(--color-dark-gray,#333);vertical-align:middle}
.leveltest-conts-wrap .leveltest .explanation-table th ul li:last-child{margin-right:0}
.leveltest-conts-wrap .leveltest .explanation-table th ul li span{display:inline-block;margin:5px 0;width:80px;height:30px;border-radius:15px;font-weight:700;font-size:16px;line-height:30px;color:#fff;text-align:center;vertical-align:top}
.leveltest-conts-wrap .leveltest .explanation-table th ul li span img{position:relative;top:-2px;display:inline-block;vertical-align:middle}
.leveltest-conts-wrap .leveltest .explanation-table th ul li .wrong{background:var(--color-gray,#aaa)}
.leveltest-conts-wrap .leveltest .explanation-table th ul li .wrong img{margin-right:10px}
.leveltest-conts-wrap .leveltest .explanation-table th ul li .correct{background:var(--color-red,#dc3545)}
.leveltest-conts-wrap .leveltest .explanation-table th ul li .correct img{margin-left:10px}
.leveltest-conts-wrap .leveltest .explanation-table th ul li input{display:inline-block;margin:0 5px;width:40px;height:30px;border:1px solid var(--color-light-gray,#ccc);vertical-align:middle}
.leveltest-conts-wrap .leveltest .explanation-table .btn-change{display:inline-block;width:120px;height:40px;border-radius:4px;background:var(--color-dark-gray,#333);font-weight:500;font-size:16px;color:#fff;text-align:center;vertical-align:middle}
.leveltest-conts-wrap .leveltest .explanation-form td{height:150px;padding:0}
.leveltest-conts-wrap .leveltest .explanation-form td textarea{width:100%;padding:10px 20px;height:100%;border:1px solid #ddd;font-size:18px;color:var(--color-dark-gray,#333);line-height:1.4em;resize:none}
.leveltest-conts-wrap .leveltest .explanation-form td textarea::placeholder{color:var(--color-light-gray,#ccc)}
.leveltest-conts-wrap .leveltest .wrong-answer-note .questions:before{content:'';background:url(/html/images/sub/leveltest/icon_test_incorrect.png) no-repeat center;position:absolute;top:-16px;left:-27px}
.leveltest-conts-wrap .leveltest .wrong-answer-note .questions.correct:before{background-image:url(/html/images/sub/leveltest/icon_test_correct.png);width:66px;height:68px}
.leveltest-conts-wrap .leveltest .wrong-answer-note .questions.incorrect:before{width:57px;height:70px}
.leveltest-conts-wrap .leveltest .explanation-form .custom-toggle{display:inline-block;width:70px;height:30px;vertical-align:middle}
.leveltest-conts-wrap .leveltest .explanation-form .custom-toggle input{display:none}
.leveltest-conts-wrap .leveltest .explanation-form .custom-toggle-slider{width:100%;margin:0}
.leveltest-conts-wrap .leveltest .explanation-form .custom-toggle-slider:before{width:24px;height:24px}
.leveltest-conts-wrap .leveltest .explanation-form input:checked+.custom-toggle-slider:before{left:14px}
.leveltest-conts-wrap .leveltest .explanation-form .custom-toggle-slider::after{font-size:16px;line-height:30px;right:4px}
.leveltest-conts-wrap .leveltest .explanation-form .custom-toggle input:checked+.custom-toggle-slider:after{left:4px;right:auto}
.leveltest-conts-wrap .announce-result-box {padding-bottom:54px;}
.leveltest-conts-wrap .announce-result-box.pass {padding-bottom:75px; padding-top:24px; background:url(/html/images/sub/leveltest/bg_pass.png) no-repeat top center;}
.leveltest-conts-wrap .announce-result-box .announce-title {font-size:26px; font-weight:bold; color:#000; text-align:center;}
.leveltest-conts-wrap .announce-result-box .announce-text {margin-top:28px; line-height:1.5em; font-size:18px; font-weight:500; color:#000; text-align:center;}
.leveltest-conts-wrap .announce-result-box .announce-text strong {color:var(--color-primary,#0148d4);}
.leveltest-conts-wrap .leveltest.leveltest-result .btn-area {gap:10px; margin-top:2.667em;}
.leveltest-conts-wrap .leveltest.leveltest-result .btn-area button:first-child {width:160px;}
@media only screen and (max-width:768px) {
.leveltest-conts-wrap .leveltest-result{margin-bottom:-60px}
.leveltest-conts-wrap .leveltest .leveltest-result-wrap ul{position:relative;left:-10px;width:calc(100% + 20px)}
.leveltest-conts-wrap .leveltest .leveltest-result-wrap ul li{margin:3px;padding:12px 0;width:calc(25% - 6px);height:63px;font-size:11px}
.leveltest-conts-wrap .leveltest .leveltest-result-wrap ul li strong{font-size:13px}
.leveltest-conts-wrap .leveltest .leveltest-result-wrap ul li a{font-size:11px;line-height:63px}
.leveltest-conts-wrap .leveltest .leveltest-result-wrap ul:first-of-type{margin-bottom:3px;width:calc(100% + 17px);padding:10px 0;border-radius:4px;background:#fff;box-shadow:0 0 10px rgba(0,0,0,.05)}
.leveltest-conts-wrap .leveltest .leveltest-result-wrap ul:first-of-type li{display:flex; flex-direction:column; justify-content:center; padding:0;width:100%;height:auto;background:none;box-shadow:none;font-size:0;}
.leveltest-conts-wrap .leveltest .leveltest-result-wrap ul:first-of-type li:first-child strong{font-weight:400;font-size:11px}
.leveltest-conts-wrap .leveltest .leveltest-result-table-wrap{padding-top:30px}
.leveltest-conts-wrap .leveltest .leveltest-result-tit{padding-left:15px;font-size:15px}
.leveltest-conts-wrap .leveltest .leveltest-result-tit:before{top:5px;width:10px;height:10px}
.leveltest-conts-wrap .leveltest .leveltest-result-table th,.leveltest-conts-wrap .leveltest .leveltest-result-table td{height:26px;font-size:12px}
.leveltest-conts-wrap .leveltest .leveltest-result-table td img{height:10px}
.leveltest-conts-wrap .leveltest .wrong-answer-note{margin-top:40px}
.leveltest-conts-wrap .leveltest .wrong-answer-note .wrong-answer-note-tit{margin-bottom:-10px;font-size:18px;line-height:45px}
.leveltest-conts-wrap .leveltest .explanation-table{margin-top:15px}
.leveltest-conts-wrap .leveltest .explanation-table th{padding:10px 12px;font-size:15px}
.leveltest-conts-wrap .leveltest .explanation-table td{padding:12px 15px;font-size:14px}
.leveltest-conts-wrap .leveltest .explanation-table th ul{width:calc(100% - 70px)}
.leveltest-conts-wrap .leveltest .explanation-table th ul li{margin-right:5px;font-size:14px;line-height:30px}
.leveltest-conts-wrap .leveltest .explanation-table th ul li span{width:50px;height:25px;font-size:11px;line-height:25px}
.leveltest-conts-wrap .leveltest .explanation-table th ul li span img{height:10px}
.leveltest-conts-wrap .leveltest .explanation-table th ul li .wrong img{margin-right:4px}
.leveltest-conts-wrap .leveltest .explanation-table th ul li .correct img{margin-left:4px}
.leveltest-conts-wrap .leveltest .explanation-table th ul li input{width:30px;height:25px}
.leveltest-conts-wrap .leveltest .explanation-table .btn-change{width:70px;height:35px;font-size:13px}
.leveltest-conts-wrap .leveltest .explanation-form th{font-size:0}
.leveltest-conts-wrap .leveltest .wrong-answer-note .questions:before{background-size:82%;top:-25px;left:-25px}

.leveltest-conts-wrap .leveltest.leveltest-result .user-info {margin-bottom:25px;}
.leveltest-conts-wrap .announce-result-box {padding-bottom:30px;}
.leveltest-conts-wrap .announce-result-box.pass {display:flex; flex-direction:column; justify-content:center; padding:0; min-height:170px; margin-bottom:25px; background-position-y:center; background-size:contain;}
.leveltest-conts-wrap .announce-result-box .announce-title {font-size:19px;}
.leveltest-conts-wrap .announce-result-box .announce-text {margin-top:20px; font-size:14px;}
}
@media only screen and (max-width:480px) {
	.leveltest-conts-wrap .announce-result-box.pass {display:flex; flex-direction:column; justify-content:center; min-height:150px; }
	.leveltest-conts-wrap .announce-result-box .announce-title {font-size:17px;}
	.leveltest-conts-wrap .announce-result-box .announce-text {margin-top:1rem; font-size:12px;}
}

#leveltestWrap #footer .btn-top{right:auto;left:50%;margin-left:330px;border:1px solid #ddd;box-shadow:none}
@media only screen and (max-width:880px) {
    #leveltestWrap #footer .btn-top{left:auto;right:20px;bottom:0;margin-left:0}
}

/* 평점 */
.radio_star{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse}
.radio_star input[type="radio"] + label{display:block;padding-left:0;width:2.375rem;height:2.375rem;margin-right:0!important;margin-left:1.25rem}
.radio_star input[type="radio"] + label:before{content:"";top:0;left:0;width:100%;height:100%;background:url(/html/images/sub/mypage/img_star_blank.png) no-repeat center/100%;border:0;border-radius:0}
.radio_star input[type="radio"] + label:last-child{margin-left:0}
.radio_star input[type="radio"]:checked + label:before{background:url(/html/images/sub/mypage/img_star.png) no-repeat center/100%}
.radio_star input[type="radio"]:checked + label ~ label:before{background:url(/html/images/sub/mypage/img_star.png) no-repeat center/100%}

/* 별점 선택 */
.star-rate-select{display:inline-block;width:19px;height:19px;padding:0;background:url(../images/sub/mypage/img_star_blank.png) no-repeat;background-size:100%;font-size:19px;vertical-align:top;text-indent:-9999em}
.star-rate-select.checked{background-image:url(../images/sub/mypage/img_star.png)}

/*수량 선택*/
.quantity-wrap{width:100px;border-radius:4px;border:1px solid #ddd;background:#fff;overflow:hidden}
.quantity-wrap > *{display:inline-block;vertical-align:top}
.quantity-wrap button{position:relative;width:30px;height:38px;background:#fff;font-size:0;text-indent:-9999em}
.quantity-wrap button:before{content:'';position:absolute;top:50%;left:50%;margin-top:-1px;margin-left:-5px;width:10px;height:2px;background:#000}
.quantity-wrap .add:after{content:'';position:absolute;top:50%;left:50%;margin-top:-5px;margin-left:-1px;width:2px;height:10px;background:#000}
.quantity-wrap input{width:38px;height:38px;border:none;font-size:18px;color:var(--color-dark-gray,#333);text-align:center}

/* 버튼 */
.btn-area {display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap;}
.btn-area .right-box {margin-left:auto}
.btn-area.full li,
.btn-area li.full, [class^="btn"].full {width:100%}
.btn-area.half li {width:calc(50% - 5px);}
:is(.btn-xl, .btn-lg, .btn-ml, .btn-md, .btn-sm, .btn-xs) {display:inline-block; font-weight:500; line-height:1.5em !important; letter-spacing:-.025em; text-align:center; border-radius:4px; box-sizing:border-box; background:transparent;}
.btn-xl {min-width:120px; padding:14px; font-size:20px;}
.btn-lg {min-width:90px; padding:10px 9px 11px; font-size:18px;}
.btn-ml {min-width:70px; padding:12px 9px 12px; font-size:16px;}
.btn-md {min-width:60px; padding:7px 9px 7px; font-size:16px;}
.btn-sm {min-width:60px; padding:8px 9px 9px; font-size:14px;}
.btn-xs {min-width:60px; padding:3px 5px 4px; font-size:14px;}
[class^="btn"].icon {font-size:0;min-width:auto;}
[class^="btn"].bg-primary {color:#fff; background-color:var(--color-primary, #0148d4); border:1px solid var(--color-primary, #0148d4);}
[class^="btn"].bg-red {color:#fff; background-color:var(--color-red, #dc3545); border:1px solid var(--color-red, #dc3545);}
[class^="btn"].bg-skyblue {color:#fff; background-color:var(--color-sky-blue,#0098e0); border:1px solid var(--color-sky-blue,#0098e0);}
[class^="btn"].bg-gray {color:#fff; background-color:var(--color-light-gray, #ccc); border:1px solid var(--color-light-gray, #ccc);}
[class^="btn"].bg-darkgray {color:#fff; background-color:var(--color-dark-gray, #333); border:1px solid var(--color-dark-gray, #333);}
[class^="btn"].bd-primary {color:var(--color-primary, #0148d4); border:1px solid var(--color-primary, #0148d4);}
[class^="btn"].bd-gray {color:var(--color-gray, #aaa); border:1px solid var(--color-gray, #aaa);}
[class^="btn"].bd-darkgray {color:var(--color-dark-gray, #333); border:1px solid var(--color-dark-gray, #333);}
[class^="btn"].bd-red {color:var(--color-red, #dc3545); border:1px solid var(--color-red, #dc3545);}
[class^="btn"].bd-primary {color:var(--color-primary, #0148d4); border:1px solid var(--color-primary, #0148d4);}
[class^="btn"].bg-bd-gray {color:var(--color-gray, #aaa); background-color:var(--color-light-gray2,#f5f5f7); border:1px solid #ddd;}
[class^="btn"]:disabled {background:var(--color-light-gray, #ccc) !important; border-color:var(--color-light-gray, #ccc);}
[class^="btn"].link {padding:0;}

@media only screen and (max-width: 767px) {
    .btn-xl{padding:12px;font-size:16px}
    .btn-lg{padding:8px 5px;font-size:15px}
    .btn-ml{padding:8px 5px;font-size:14px}
    .btn-md{padding:7px 5px;font-size:13px}
    .btn-sm{padding:5px;font-size:12px}
    .btn-xs{padding-bottom:3px;font-size:12px}
}

/*대시보드*/
.dashboard {font-size:16px; letter-spacing:-.025em; color:var(--color-dark-gray, #333);}
.dashboard .dashboard-wrap {display:flex; flex-wrap:wrap; column-gap:20px;}
.dashboard .dashboard-wrap:last-child {align-items:flex-start;}
.dashboard .dashboard-area {display:flex; flex-wrap:wrap; gap:20px; width:calc(50% - 10px); container-type:inline-size;	container-name:dashboard-area;}
.dashboard .box {width:100%; padding:26px 30px; border:1px solid #eee; border-radius:8px;}
.dashboard .box.half {width:calc(50% - 10px);}
.dashboard .title {position:relative; font-weight:bold;}
.dashboard .title .arrow {position:absolute; top:50%; right:-10px; margin-top:-3px; width:6px; height:6px; border:2px solid var(--color-dark-gray, #333); border-left:none; border-bottom:none; text-indent:-9999em; transform:rotate(48deg);}
.dashboard .dashboard-head {display:flex; justify-content:space-between; align-items:center;}
.dashboard .dashboard-head .sub-text {font-weight:bold; color:var(--color-gray, #aaa);}
.dashboard .intro-box {background:linear-gradient(120deg, rgba(16,91,191,1) 0%, rgba(0,46,162,1) 100%);}
.dashboard .intro-box .title {font-size:24px; color:#fff;}
.dashboard .intro-box .title .user-id {text-decoration:underline;}
.dashboard .intro-box .text {margin-top:17px; color:#fff;}
.dashboard .week-box {position:relative; left:-10px; width:calc(100% + 20px); display:flex; column-gap:4px; margin-top:17px;}
.dashboard .week-box .day-box {display:flex; flex-direction:column; align-items:center; width:calc(100% / 7); height:110px; padding:16px 3px 9px; text-align:center; border:1px solid #eee; border-radius:8px;}
.dashboard .week-box .day-box.day-off {color:var(--color-red, #dc3545);}
.dashboard .week-box .day-box.today {color:var(--color-primary, #0148d4); font-weight:bold; background:var(--color-light-primary,#e3edf9);}
.dashboard .week-box .day {margin-top:5px;}
.dashboard .week-box .icon-check {display:inline-block; width:24px; height:24px; margin-top:auto; border-radius:12px; font-size:0; text-indent:-9999em; vertical-align:top; background:var(--color-primary) url('/html/images/common/checkmark.png') no-repeat center center;}
.dashboard .recent-lecture {border:5px solid var(--color-light-primary,#e3edf9); padding-top:15px;}
.dashboard .recent-lecture .dashboard-head {padding-bottom:15px; border-bottom:1px solid #333}
.dashboard .recent-lecture .recent-lecture-box {margin-top:16px; display:flex; align-items:flex-end; justify-content:space-between; flex-wrap:wrap;}
.dashboard .recent-lecture .lecture-name {flex-grow:1; font-weight:bold; text-overflow:ellipsis; white-space:nowrap; overflow:hidden; font-size:16px;}
.dashboard .recent-lecture .expire-date {flex-shrink:0; font-size:14px; color:var(--color-gray, #aaa);}
.dashboard .recent-lecture .progress-bar {margin-top:13px; position:relative; display:block; width:100%; height:14px; background:var(--color-light-primary,#e3edf9); border-radius:3px;}
.dashboard .recent-lecture .progress-bar .bar {position:absolute; top:0; left:0; height:14px; background:var(--color-primary,#0056c1); border-radius:3px;}
.dashboard .recent-lecture a[class^="btn"] {width:100%; margin-top:20px;}
.dashboard .progress-rate {padding:5px 13px; font-size:14px; color:var(--color-primary, #0148d4); border:2px solid #eee; border-radius:15px;}
.dashboard .sub-title {margin-top:0; font-size:14px; font-weight:bold; color:var(--color-gray, #aaa);}
.dashboard .count {margin-top:12px; font-weight:bold; font-size:16px;}
.dashboard .count strong {font-size:22px;}
.dashboard .rate-box {display:flex; align-items:center; justify-content:space-between; margin-top:12px;}
.dashboard .rate-box .graph {width:70px; height:70px;}
.dashboard .tooltip {display:inline-block;}
.dashboard .tooltip::before {content:''; display:inline-block; width:21px; height:21px; margin-left:4px; background:url(/html/images/common/icon_tooltip.webp) center no-repeat; vertical-align:top; cursor:pointer;}
.dashboard .tooltip .tooltip-box {position:absolute; top:100%; left:-7px; padding-top:10px; z-index:1; display:none;}
.dashboard .tooltip .tooltip-box .tooltip-inner {position:relative; padding:20px 20px; width:180px; line-height:18px; font-size:12px; color:var(--color-gray, #aaa); background:#fff; border:1px solid var(--color-gray, #aaa);}
.dashboard .tooltip .tooltip-box .tooltip-inner::before {content:''; position:absolute; top:-10px; left:20px; width:12px; height:10px; background:url(/html/images/common/tooltip_arrow.webp) no-repeat;}
.dashboard .tooltip:hover .tooltip-box {display:block;}
.dashboard .summary-info {display:flex; flex-direction:column; align-items:flex-start;}
.dashboard .summary-info .count {margin-top:25px; margin-left:auto;}
.dashboard .week-lecture .graph {margin-top:17px; height:390px;}
.dashboard .dashboard-banner {margin-top:20px;}
.dashboard .dashboard-banner a {display:block; border-radius:8px; background-position:center; background-repeat:no-repeat; overflow:hidden; background-size:cover;}
.dashboard .dashboard-banner img {width:100%; vertical-align:top;}
.dashboard .dashboard-banner .img_mo {display:none;}
.dashboard .dashboard-banner + .dashboard-wrap {margin-top:20px;}
.dashboard .board {margin-top:20px; border-top:1px solid var(--color-dark-gray, #333);}
.dashboard .board .post {padding:18px 11px; display:flex; align-items:center; justify-content:space-between; gap:5px; border-bottom:1px solid #eee;}
.dashboard .board .post .subject {display:block; width:calc(100% - 150px); font-weight:500; text-overflow:ellipsis; white-space:nowrap; overflow:hidden; font-size:16px;}
.dashboard .board .post .content {width:calc(100% - 140px); margin-left:20px;}
.dashboard .board .post .content .subject {width:100%;}
.dashboard .board .post .content .dot {margin-top:8px; font-size:14px;}
.dashboard .board .post .date {font-size:14px; font-weight:300; color:var(--color-gray, #aaa);}
.dashboard .board .post .state {font-size:14px; font-weight:500; flex-shrink:0;}
.dashboard .board .post .time {font-size:14px; font-weight:300; color:var(--color-gray, #aaa);}
.dashboard .board.course-status .post {align-items:flex-start; justify-content:flex-start;}
.dashboard .board.course-status .post .time {margin-left:auto;}
.dashboard .board.course-status .post .date {color:var(--color-dark-gray, #333);}
.dashboard .order-box {margin-top:20px; border:1px solid #eee;}
.dashboard .order-box .order-head {display:flex; align-items:center; justify-content:space-between; padding:18px 19px 16px; background:var(--color-primary, #0148d4); border-radius:3px;}
.dashboard .order-box .order-head .subject {font-weight:bold; color:#fff; font-size:16px; text-overflow:ellipsis; white-space:nowrap; overflow:hidden; }
.dashboard .order-box .order-head .date {margin-left:5px; font-weight:300; font-size:14px; color:#fff; flex-shrink:0;}
.dashboard .order-list {padding:10px 18px;}
.dashboard .order-list li {padding:13px 0 12px; display:flex; align-items:center; justify-content:space-between;}
.dashboard .order-list li + li {border-top:1px solid #eee;}
.dashboard .order-list .subject {font-size:14px; color:var(--color-dark-gray, #333); text-overflow:ellipsis; white-space:nowrap; overflow:hidden;}
.dashboard .order-list .state {flex-shrink:0; font-size:14px; font-weight:500;}
.dashboard .dot {position:relative; padding-left:12px;}
.dashboard .dot::before {content:''; position:absolute; top:6px; left:0; width:5px; height:5px; background:var(--color-dark-gray, #333); border-radius:1px;}
.dashboard .blue {color:var(--color-primary, #0148d4);}
.dashboard .red {color:var(--color-red, #dc3545);}

@media only screen and (max-width: 1024px) { 
	.dashboard .dashboard-wrap {margin-top:20px;}
}

@container dashboard-area (max-width: 425px) {
	.dashboard {font-size:15px;}
	.dashboard .box {padding:20px 22px;}
	.dashboard .intro-box .title {font-size:23px;}
	.dashboard .intro-box .text {font-size:16px; margin-top:15px;}
	.dashboard .title {font-size:15px;}
	.dashboard .tooltip::before {width:18px; height:19px;}
	.dashboard .dashboard-head .sub-text {font-size:15px;}
	.dashboard .week-box {margin-top:15px;}
	.dashboard .week-box .day-box {height:100px; padding:12px 2px 9px; font-size:15px;}
	.dashboard .week-box .icon-check {width:20px; height:20px; background-size:10px;}
	.dashboard .recent-lecture .dashboard-head {padding-bottom:12px;}
	.dashboard .recent-lecture .recent-lecture-box {margin-top:13px;}
	.dashboard .recent-lecture .lecture-name {font-size:15px;}
	.dashboard .recent-lecture a[class^="btn"] {margin-top:17px;}
	.dashboard .rate-box .graph {/*width:60px;height:70px;*/  flex-grow:1;}
	.dashboard .progress-rate {font-size:14px;}
	.dashboard .sub-title {font-size:14px;}
	.dashboard .count {margin-top:10px; font-size:15px;}
	.dashboard .count strong {font-size:19px;}
	.dashboard .summary-info .count {margin-top:22px;}
	.dashboard .week-lecture .graph {height:355px;}
	.dashboard .dot {padding-left:11px;}
	.dashboard .dot::before {width:4px; height:4px;}
	.dashboard .board {margin-top:17px;}
	.dashboard .board .post {padding:15px 9px;}
	.dashboard .board .post .subject {width:calc(100% - 130px); font-size:15px;}
	.dashboard .board .post .content {width:calc(100% - 100px); margin-left:15px;}
	.dashboard .board .post .content .dot {margin-top:6px; font-size:14px;}
	.dashboard .order-box .order-head {padding:14px 15px 13px;}
	.dashboard .order-box .order-head .subject {font-size:14px;}
	.dashboard .order-list {padding:8px 16px;}
	.dashboard .order-list li {padding:11px 0 10px;}
	.dashboard .order-list .subject {font-size:14px;}
	.dashboard .order-list .state {font-size:14px;}
}

@container dashboard-area (max-width: 360px) {
	.dashboard {font-size:14px;}
	.dashboard .intro-box .title {font-size:22px;}
	.dashboard .intro-box .text {font-size:15px; margin-top:15px;}
	.dashboard .title {font-size:14px;}
	.dashboard .tooltip::before {width:18px; height:19px;}
	.dashboard .dashboard-head .sub-text {font-size:14px;}
	.dashboard .week-box .day-box {font-size:14px;}
	.dashboard .recent-lecture .recent-lecture-box {margin-top:13px;}
	.dashboard .recent-lecture .lecture-name {font-size:14px;}
	.dashboard .recent-lecture .expire-date {font-size:13px;}
	.dashboard .progress-rate {font-size:13px;}
	.dashboard .sub-title {font-size:13px;}
	.dashboard .count {font-size:14px;}
	.dashboard .count strong {font-size:18px;}
	.dashboard .rate-box {flex-direction:column; align-items:flex-start;}
	.dashboard .rate-box .graph {margin-top:17px; width:100%;}
	.dashboard .summary-info .count {margin-top:22px;}
	.dashboard .board .post .subject {font-size:14px;}
	.dashboard .board .post .date {font-size:13px;}
	.dashboard .board .post .state {font-size:13px;}
	.dashboard .board .post .time {font-size:13px;}
	.dashboard .board .post .content .dot {font-size:13px;}
	.dashboard .order-box .order-head .subject {font-size:14px;}
	.dashboard .order-box .order-head .date {font-size:13px;}
	.dashboard .order-list .subject {font-size:13px;}
	.dashboard .order-list .state {font-size:13px;}
}

@media only screen and (max-width: 768px) { 
	.dashboard .dashboard-wrap {flex-direction:column; row-gap:20px;}
	.dashboard .dashboard-area {width:100%; gap:18px;}
	.dashboard .tooltip::before {margin-left:0;}
	.dashboard .sub-title {margin-top:0;}
	/* .dashboard .dashboard-banner a {padding-top:14vw;} */
    .dashboard .dashboard-banner .img_mo {display:block;}
    .dashboard .dashboard-banner .img_pc {display:none;}
	.dashboard .board .post {align-items:flex-start; justify-content:flex-start; flex-wrap:wrap; gap:12px;}
	.dashboard .board .post .subject {width:100%;}
	.dashboard .board .post .content {width:100%; margin-left:0; order:1;}
}

.sample-lecture .popup-inner {max-width:700px; max-height:500px;}
.sample-player {position:relative; padding-top:56.3%;}
.sample-player iframe {position:absolute; top:0; left:0; width:100%; height:100%;}
.sample-lecture .popup-contents-wrap {height:auto;}
@media only screen and (max-width: 768px) { 
    .sample-lecture .popup-contents-wrap {height:auto;}
}


/*공통*/
.title-round {position:relative; padding-left:1.8571rem; line-height:1.5em; font-size::1.6rem; font-weight:bold; color:#333;}
.title-round:before {content:''; position:absolute; top:10px; left:0; width:8px; height:8px; border:4px solid #4481de; border-radius:50%;}
.title-line {position:relative; padding-top:13px; line-height:1.5em; font-size:1.7143rem; font-weight:bold; color:#333;}
.title-line:before {content:''; position:absolute; top:0; left:0; width:7.1429rem; height:4px; background:#5096ff; border-radius:2px;}

.dot-list li {position:relative; padding-left:1.1333rem; line-height:1.5555em; font-size:1.2rem; color:#333; word-break:keep-all;}
.dot-list li + li {margin-top:8px;}
.dot-list li:before {content:''; position:absolute; top:.8rem; left:0; width:2px; height:2px; background:#333; border-radius:50%;}

.text-blue {color:#4481de;}
.text-red {color:#dc3545;}
.bg-box {background:#f1f5fb;}
/* 교육원소개 인사말 */
.greeting-area {position:relative; width:100%; height:100vh; min-height:53.3333rem;}
.greeting-inner {position:relative; display:flex; flex-direction:column; justify-content:center; align-items:center; height:100%; max-width:1220px; width:100%; margin:0 auto; padding:70px 20px 0;}
.greeting-area .text-bold {font-weight:bold;}
.greeting-area .image-box img {max-width:100%; vertical-align:top;}
.greeting-area .text-gradint {display:inline-block; background:linear-gradient(150deg, #1dd5e6 45%, #46aef7 60%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.greeting-area .greeting-main-title {display:block; line-height:1.5em; font-size:3.6rem; font-weight:bold; color:#fff; text-align:center; word-break:keep-all;}
.greeting-area .greeting-title {display:block; line-height:1.5em; font-size:3.2rem; font-weight:bold; text-align:center; color:#333; text-align:center; word-break:keep-all;}
.greeting-area .greeting-title.sm {line-height:1.5em; font-size:2.1333rem;}
.greeting-area .greeting-text {color:#333; text-align:center; word-break:keep-all;}
.greeting-area .greeting-text.lg {line-height:1.5em; font-size:2.4rem;}
.greeting-area .greeting-text.md {line-height:1.5em; font-size:2.1333rem;}
.greeting-area .greeting-text.sm {line-height:1.5em; font-size:1.6rem;}
.greeting-area .text-blue {color:#5096ff;}
.greeting-area .emphasis {position:relative;}
.greeting-area .emphasis:before {content:''; position:absolute; top:-0.8rem; left:50%; width:.4667rem; height:.4667rem; background:#5096ff; border-radius:50%; transform:translateX(-50%);} 
.greeting-area .greeting-list {display:flex; gap:4rem; width:100%;}
.greeting-area .greeting-list .item {width:33.33%;}
.greeting-area .greeting-list .item .item-sequence {font-weight:bold; font-size:1.2rem; color:#0148d4;}
.greeting-area .greeting-list .item .item-title {margin-top:4px; line-height:1.5em; font-weight:bold; font-size:1.8667rem; color:#333; word-break:keep-all;}
.greeting-area .greeting-list .item .item-title.sm {font-size:1.6rem;}
.greeting-area .greeting-list .item .item-text {margin-top:4px; line-height:1.5555em; font-size:1.2rem; color:#333; word-break:keep-all;}
.greeting-area .greeting-box {display:flex; flex-direction:column; align-items:center; width:100%; padding:7rem 15px 6.6667rem; border:5px solid #4481de;}
.greeting-area .greeting-box .box-title {margin-top:0; font-size:2.5333rem; text-align:center;}
.greeting-area .greeting-box .box-title br {display:none;}
.greeting-area .greeting-box .dot-list {margin-top:1.5333rem;}
.greeting-area .greeting-box .dot-list li {padding-left:.8rem; font-size:1.3333rem;}
.greeting-area .greeting-box .dot-list li + li {margin-top:5px;}
.greeting-area .plus {position:absolute; top:6.6667rem; left:50%; width:3.3333rem; height:3.3333rem; margin-left:-1.66rem; display:flex; align-items:center;}
.greeting-area .plus:before {content:''; width:3.3333rem; height:4px; background:#000;}
.greeting-area .plus:after {content:''; position:absolute; top:1.5333rem; width:3.3333rem; height:4px; background:#000; transform:rotate(90deg);}
.greeting-area .scroll-btn {position:absolute; bottom:80px; left:50%; width:27px; height:16px; background:url(/html/images/sub/about/greeting_arrow.png) no-repeat center/contain; transform:translateX(-50%);;}
.greeting-area.bg {background:#000 no-repeat center/cover;}
.greeting-area.section01 {background-image:url(/html/images/sub/about/greeting01_bg.jpg);}
.greeting-area.section01 .greeting-inner {justify-content:flex-end;}
.greeting-area.section02 {background:#fff;}
.greeting-area.section03 {background-image:url(/html/images/sub/about/greeting02_bg.jpg)}
/* .greeting-area.section05.bg {background-image:url(/html/images/sub/about/greeting03_bg.jpg)}
.greeting-area.section06.bg {background-image:url(/html/images/sub/about/greeting03_bg.jpg)} */
.greeting-area.section09 {background-image:url(/html/images/sub/about/greeting04_bg.jpg)}
/* .greeting-wrap.bg_on:before {content:''; position:fixed; top:0; left:0; width:100%; height:100%; background:url(/html/images/sub/about/greeting03_bg.jpg) no-repeat center/cover; background-attachment:fixed;} */
.greeting-group {position:relative;}
.greeting-group:before {content:''; position:absolute; top:0; left:0; width:100%; height:100%;  background:url(/html/images/sub/about/greeting03_bg.jpg) no-repeat center/cover; background-attachment:fixed;}
.greeting-area:is(.section03,.section05,.section06,.section09) .greeting-title {color:#fff;}
.greeting-area.section01 .greeting-main-title {margin-bottom:12.5333rem;}
.greeting-area.section02 .greeting-text {margin-top:1.1333rem;}
.greeting-area.section02 .greeting-text.sm {margin-top:2.2667rem;}
.greeting-area.section02 .greeting-list {margin-top:5.1333rem;}
.greeting-area.section02 .greeting-list .item {padding:2.9333rem 2.6rem 2rem; border:1px solid #ddd;}
.greeting-area.section02 .greeting-list .item .image {display:block; width:7.6923rem; height:4.8rem; background:url(/html/images/sub/about/greeting_icon01.png) no-repeat left center; background-size:contain;}
.greeting-area.section02 .greeting-list .item:nth-child(2) .image {background-image:url(/html/images/sub/about/greeting_icon02.png);}
.greeting-area.section02 .greeting-list .item:nth-child(3) .image {background-image:url(/html/images/sub/about/greeting_icon03.png);}
.greeting-area.section02 .greeting-list .item .image + .item-title {margin-top:2.4667rem;}
.greeting-area.section02 .greeting-list .item .item-title + .item-text {margin-top:.5333rem;}
.greeting-area.section04 .greeting-text {font-weight:500;}
.greeting-area.section04 .greeting-title {margin-top:1.9333rem;}
.greeting-area.section04 .greeting-list {margin-top:4.7333rem; gap:3.3333rem;}
.greeting-area.section04 .greeting-list .item .item-info {margin-top:2.3333rem;}
.greeting-area.section04 .greeting-list .item .item-sequence {display:block;}
.greeting-area.section04 .greeting-list .item .item-title {margin-top:8px; line-height:1.3em;}
.greeting-area.section04 .greeting-list .item .item-text {margin-top:0;}
.greeting-area.section06 .greeting-inner {max-width:1060px;}
.greeting-area.section06 .greeting-list {margin-top:5.8rem;}
.greeting-area.section06 .greeting-list .item {display:flex; justify-content:center; align-items:center; width:50%; min-height:20rem; text-align:center; background:#fff;}
.greeting-area.section07 .rule-title {margin:2.2667rem auto 0; width:22.6667rem; height:3.3333rem; line-height:3.3333rem; font-size:1.6rem; font-weight:bold; color:#fff; text-align:center; background:#4481de; border-radius:25px;}
.greeting-area.section07 .greeting-list {max-width:920px; margin-top:5.0667rem;}
.greeting-area.section07 .greeting-list .item {display:flex; flex-direction:column; align-items:center; text-align:center;}
.greeting-area.section07 .greeting-list .item .image {display:block; width:9.8667rem; height:11.8667rem; margin-top:2.7333rem; background:url(/html/images/sub/about/greeting_img04.png) no-repeat center/contain;}
.greeting-area.section07 .greeting-list .item:nth-child(2) .image {background-image:url(/html/images/sub/about/greeting_img05.png);}
.greeting-area.section07 .greeting-list .item:nth-child(3) .image {background-image:url(/html/images/sub/about/greeting_img06.png);}
.greeting-area.section07 .greeting-list .item .item-title {margin-top:2.2rem;}
.greeting-area.section07 .greeting-list .item .item-text {margin-top:2.2667rem;}
.greeting-area.section08 .greeting-title {margin-top:2.1333rem;}
.greeting-area.section08 .greeting-box {margin-top:6.1333rem;}
.greeting-area.section09 .greeting-title {margin-top:12px;}
.greeting-area.section09 .image-box {margin-top:5.2rem; text-align:center;}
.greeting-area.section10 .greeting-title {color:#fff;}
.greeting-area.section10 {background:linear-gradient(0deg, rgba(79,79,79,1) 0%, rgba(0,0,0,1) 50%);}
.greeting-area.section10 .greeting-title + .greeting-title {margin-top:3.3333rem; }
.greeting-area.section11 .greeting-text {margin-top:4.4667rem;} 
.greeting-area.section12 .greeting-text {position:relative;}
.greeting-area.section12 .menu-list {margin-top:2.1333rem;}
.greeting-area .top-line {position:absolute; top:-5rem; left:50%; transform:translateX(-50%);}
.greeting-area .top-line:before {content:''; display:block; width:2px; height:2.6667rem; background:#333;}
.greeting-area .menu-list {display:flex; flex-wrap:wrap; width:100%; gap:20px;}
.greeting-area .menu-list .item {position:relative; width:calc(50% - 10px); height:16rem; background:url(/html/images/sub/about/greeting_img08.jpg) no-repeat center/cover;}
.greeting-area .menu-list .item:nth-child(2) {background-image:url(/html/images/sub/about/greeting_img09.jpg);}
.greeting-area .menu-list .item:nth-child(3) {background-image:url(/html/images/sub/about/greeting_img10.jpg);}
.greeting-area .menu-list .item:nth-child(4) {background-image:url(/html/images/sub/about/greeting_img11.jpg);}
.greeting-area .menu-list .item:hover:before {content:''; position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.8);}
.greeting-area .menu-list .item a {position:relative; display:flex; justify-content:center; align-items:center; height:100%; font-weight:bold; font-size:24px; color:#fff; z-index:1}
.greeting-area .menu-list .item:hover a {text-decoration:underline; text-underline-position:under;}
.greeting-area.section13 .review-btn {display:block; width:21.3333rem; margin:3.6rem auto 0; font-weight:400;}

/*자격증발급신청*/
.certificate-wrap .bg-box {border-radius:4px; padding:1.6667rem 2rem;}
.certificate-wrap .table-info {display:flex; justify-content:space-between; margin-top:3.6667rem; font-size:1rem; color:#333;}
.certificate-wrap .basic-list {margin-top:10px;}
.certificate-wrap .basic-list .select {text-align:center;}
.certificate-wrap .btn-area {margin-top:2.6667rem; justify-content:center;}
.certificate-wrap .btn-area .apply-btn {width:21.3333rem;}
.certificate-wrap .certificate-list {display:flex; justify-content:center; gap:2rem; margin-top:8rem;}
.certificate-wrap .certificate-list li img {max-width:100%; vertical-align:top;}

/*평생교육원 선택 시 주의사항*/
.caution-wrap .text-blue {color:#4481de;}
.caution-sub-title {margin-top:2rem; padding-top:2rem; line-height:1.5em; font-weight:500; font-size:1.3333rem; color:#333; background:url(/html/images/sub/about/quote.png) no-repeat top left; background-size:4.9333rem auto;}
.caution-area {margin-top:7.3333rem;}
.caution-area + .caution-area {margin-top:5.8rem;}
.caution-box {display:flex; justify-content:space-between; gap:5.3333rem;}
.caution-box .caution-point {font-weight:bold; font-size:18px; color:#4481de;}
.caution-box .caution-title {margin-top:7px; font-weight:bold; font-size:1.7333rem; color:#333;}
.caution-box .caution-text {margin-top:1.2667rem; line-height:1.5em; font-size:1.2rem; color:#333; word-break:keep-all;}
.caution-box .image-box {width:30.6667rem; flex-shrink:0; border-radius:8px; overflow:hidden;}
.caution-box .image-box img {width:100%; vertical-align:top;}
.caution-area .bg-box {margin-top:2rem; padding:1.6667rem 2rem; line-height:1.5em; font-size:1.2rem; color:#333; border-radius:10px;}
.caution-area .bg-box p {word-break:keep-all;}
.caution-area .bg-box .check-btn {display:inline-block; margin-top:1.2rem; font-size:1.2rem; color:#4481de; text-decoration:underline; text-underline-position:under;}
.caution-area .bg-box .check-btn:before {content:''; display:inline-block; width:1.8667rem; height:1.8667rem; margin-right:4px; vertical-align:top; background:url(/html/images/sub/about/icon_reading_glasses.png) no-repeat center/contain;}

@media only screen and (max-width:1180px) { 
	/* 교육원소개 인사말 */
    .greeting-area .greeting-list {gap:40px;}
    .greeting-area.section02 .greeting-list .item {padding:35px 30px 20px 30px;}
}
@media only screen and (max-width:1023px) { 
	/* 교육원소개 인사말 */
    .greeting-area .greeting-main-title {font-size:42px;}
    .greeting-area .greeting-title {font-size:36px;}
    .greeting-area .greeting-title.sm {font-size:26px;}
    .greeting-area .greeting-text.lg {font-size:28px;}
    .greeting-area .greeting-text.md {font-size:26px;}
    .greeting-area .greeting-text.sm {font-size:18px;}
    .greeting-area .greeting-list {gap:30px;}
    .greeting-area .greeting-list .item .item-sequence {font-size:15px;}
    .greeting-area .greeting-list .item .item-title {font-size:22px;}
    .greeting-area .greeting-list .item .item-title.sm {font-size:19px;}
    .greeting-area .greeting-list .item .item-text {font-size:15px;}
    .greeting-area.section02 .greeting-list .item .image {height:57px;}
    .greeting-area .greeting-box .box-title {font-size:30px;}
    .greeting-area .greeting-box .dot-list li {font-size:16px;}
}
@media only screen and (max-width:767px) { 
    .title-round {font-size:19px;}
    /* 교육원소개 인사말 */
    .greeting-area {height:auto; min-height:auto;}
    .greeting-area .greeting-main-title {font-size:27px;}
    .greeting-area .greeting-title {font-size:22px;}
    .greeting-area .greeting-title.sm {font-size:18px;}
    .greeting-area .greeting-text.lg {font-size:20px;}
    .greeting-area .greeting-text.md {font-size:18px;}
    .greeting-area .greeting-text.sm {font-size:16px;}
    .greeting-area .greeting-list {flex-direction:column; gap:20px;}
    .greeting-area .greeting-list .item {width:100%;}
    .greeting-area .greeting-list .item .item-sequence {font-size:13px;}
    .greeting-area .greeting-list .item .item-title {font-size:17px;}
    .greeting-area .greeting-list .item .item-title.sm {font-size:16px;}
    .greeting-area .greeting-list .item .item-text {font-size:14px;}
    .greeting-area .greeting-box {padding:40px 15px; border-width:3px;}
    .greeting-area .greeting-box .box-title {font-size:20px;}
    .greeting-area .greeting-box .box-title br {display:block;}
    .greeting-area .greeting-box .dot-list {margin-top:15px;}
    .greeting-area .greeting-box .dot-list li {font-size:14px;}
    .greeting-area .greeting-box .dot-list li + li {margin-top:5px;}
    .greeting-area .scroll-btn {bottom:40px; width:20px; height:12px;}
    .greeting-area .plus {top:-55px; width:25px; height:25px; margin-left:-12.5px;}
    .greeting-area .plus:before {width:25px; height:3px;}
    .greeting-area .plus:after {width:25px; top:11px; height:3px;}
    .greeting-area .emphasis:before {top:-6px; width:3px; height:3px;}
    .greeting-area.section01 {margin-top:128px; height:500px;}
    .greeting-area.section01 .greeting-main-title {margin-bottom:95px;}
    .greeting-area.section02 .greeting-inner {justify-content:flex-start;}
    .greeting-area .greeting-inner {padding-top:0;}
    .greeting-area:is(.section02,.section04,.section07,.section08,.section09,.section10,.section11,.section13) .greeting-inner {padding-top:60px;padding-bottom:70px;}
    .greeting-group .greeting-inner {padding-top:60px;padding-bottom:70px;}
    .greeting-group .section06 .greeting-inner {padding-top:0;padding-bottom:70px;}
    .greeting-area.section02 .greeting-list {max-width:480px; margin-top:39px}
    .greeting-area.section02 .greeting-list .item {width:100%; padding:2.1538rem 2.1538rem 1.5385rem}
    .greeting-area.section02 .greeting-list .item .image {height:3.8462rem;}
    .greeting-area.section02 .greeting-list .item .image + .item-title {margin-top:20px;}
    .greeting-area.section03 {height:400px;}
    .greeting-area.section04 .greeting-list {max-width:480px; margin-top:40px; gap:20px;}
    .greeting-area.section04 .greeting-list .item .image-box {text-align:center;}
    .greeting-area.section04 .greeting-list .item .item-info {margin-top:16px;}
    .greeting-area.section04 .greeting-list .item .item-title {margin-top:6px;}
    .greeting-area.section04 .greeting-list .item .item-text {margin-top:3px;}
    .greeting-area.section06 .greeting-list {margin-top:40px; flex-direction:column; align-items:center;}
    .greeting-area.section06 .greeting-list .item {max-width:400px; width:100%; min-height:200px;}
    .greeting-area.section07 .rule-title {height:40px; line-height:40px; margin-top:20px; font-size:16px;}
    .greeting-area.section07 .greeting-list {margin-top:40px; gap:30px;}
    .greeting-area.section07 .greeting-list .item .image {margin-top:0;}
    .greeting-area.section07 .greeting-list .item .item-title {margin-top:0;}
    .greeting-area.section07 .greeting-list .item .item-text {margin-top:15px;}
    .greeting-area.section07 .greeting-list .item:nth-child(1) .image {margin-top:20px;}
    .greeting-area.section07 .greeting-list .item:nth-child(1) .item-title {margin-top:15px;}
    .greeting-area.section08 {padding-top:70px;}
    .greeting-area.section08 .greeting-title {margin-top:0;}
    .greeting-area.section08 .greeting-box {margin-top:35px;}
    .greeting-area.section09 .greeting-title {margin-top:0;}
    .greeting-area.section09 .image-box {margin-top:38px;}
    .greeting-area.section10 .greeting-title + .greeting-title {margin-top:30px;}
    .greeting-area.section11 .greeting-text {margin-top:30px;}
    .greeting-area.section12 .greeting-inner {padding-top:80px;}
	.greeting-area .top-line {top:-80px;}
    .greeting-area .menu-list .item {height:13.8462rem;}
    .greeting-area .menu-list .item a {font-size:1.3846rem;}
    /*자격증발급신청*/
    .certificate-wrap .table-info {margin-top:2.6153rem;}
    .certificate-wrap .basic-list .select {text-align:left;}
    .certificate-wrap .basic-list .d-inline {padding-right:.6667rem;}
    .certificate-wrap .certificate-list {flex-wrap:wrap; align-items:center; margin-top:6.1538rem; margin-top:6.1538rem;}
    .certificate-wrap .certificate-list li img {max-width:19.2307rem;}
    /*평생교육원 선택 시 주의사항*/
    .caution-sub-title {margin-top:20px;}
    .caution-area {margin-top:70px;}
    .caution-area + .caution-area {margin-top:60px;}
    .caution-box {flex-direction:column; gap:30px;}
    .caution-box .image-box {width:100%; border-radius:5px;}
    .caution-area .bg-box {border-radius:5px;}
}
@media only screen and (max-width:640px) { 
    /* 교육원소개 인사말 */
    .greeting-wrap .menu-list {flex-direction:column;}
    .greeting-wrap .menu-list .item {width:100%;}
    /*자격증발급신청*/
    .certificate-wrap .table-info {font-size:13px;}
}