@charset "utf-8";

/* style css */
/* .mypage-user-section .section-head .right {margin-left:auto;} */
.register-board .image-area .image-form:has(.preview-box img) .upload-box {display:none}
.register-board .image-area .image-form .preview-box {display:none; width:100%; /*height:300px;*/ border-radius:10px; overflow:hidden;}
.register-board .image-area .image-form:has(.preview-box img) .preview-box {display:block}
.register-board .image-area .image-form .preview-box img {width:100%; height:100%; object-fit:cover;}
.wrapper:has(.emoji-picker) {z-index:110;}


/* 공통 */
/* 콘텐츠 레이아웃 */
/* .sub-conts-wrap {padding:0} */
/* 타이틀 */
/* .sub-conts-tit{line-height:21px; font-weight:700; font-size:18px; color:var( --color-gray-900);} */
/* .section-title {line-height:32px; font-weight:700;font-size:28px;color:var(--color-secondary,#252525);}
.section-title.sm {font-size:24px;}
.page-title-head {display:flex; align-items:center; gap:12px; margin-bottom:60px;}
.page-title-head .btn-back {flex-shrink: 0; display:none; width:24px; height:24px; font-size:0; background:url(/html/images/common/icon_back_page.svg) no-repeat center/contain;}
.page-title-head .right {flex-shrink: 0;margin-left: auto;}
.title-box {display:flex; align-items:center; gap:12px;}
.title-box .btn-back {display:block; width:24px; height:24px; font-size:0; background:url(/html/images/common/icon_back.svg) no-repeat center/contain;}
.title-box .btn-close {display:block; width:24px; height:24px; margin-left: auto; font-size:0; background:url(/html/images/common/icon_layer_close.svg) no-repeat center/contain;}
.section-title02 {line-height:32px; font-weight:700;font-size:28px;color:var(--color-gray-800,#393939);} */
/* .sub-conts-desc {margin-top:8px; color:var(--color-gray-900); font-size:16px; line-height:19px;} */

/* inner 정리 */
.inner:has(.mypage-wrap),
.inner:has(.main-conts-section) {max-width:1220px;}
.inner:has(.mypage-wrap) .cont-inner {width:auto; max-width:100%; padding-left:0; padding-right:0;}
@media only screen and (max-width:1260px) {
    .inner:has(.mypage-wrap),
    .inner:has(.main-conts-section) {padding-left:20px; padding-right:20px;}
}
@media only screen and (max-width:768px) {
    .inner:has(.mypage-wrap),
    .inner:has(.main-conts-section) {padding-left:0; padding-right:0;}
}


/* -------- sub-tab-menu -------- */
.sub-tab-menu {position:relative; left:-25px; width:calc(100% + 50px); border-bottom:2px solid var(--color-gray-100); background:#FFF;}
.sub-tab-menu .swiper-slide{display:inline-block;width:20%;vertical-align:top}
.sub-tab-menu .swiper-slide:last-child{margin-right:0}
.sub-tab-menu .swiper-slide a{position:relative;display:block; padding:14px 5px 12px; font-size:15px;font-weight:500;line-height:20px; text-align:center; color:var(--color-gray-700,#767676); letter-spacing:-.02em;}
.sub-tab-menu .swiper-slide.on a{position:relative; font-weight:600; color:var(--color-primary);}
.sub-tab-menu .swiper-slide.on a:after {content:''; position:absolute; bottom:-2px; left:0; width:100%; height:2px; background:var(--color-primary);}
/* @media only screen and (max-width:1200px) {
    .sub-tab-menu .swiper-slide a {font-size:20px;}
}
@media only screen and (max-width:768px) {
    .sub-tab-menu {margin-left:20px; margin-right:20px; padding:20px 0 0; border-bottom:1px solid var(--color-gray-100);}
    .sub-tab-menu .swiper-slide{margin-right:12px}
    .sub-tab-menu .swiper-slide a{min-width:72px; font-size:16px;line-height:19px; text-align:center;}
    .sub-tab-menu .swiper-slide.on a {padding-bottom:9px;}
    .sub-tab-menu .swiper-slide.on a:after {bottom:-1px;}
} */


/* 로그인 */
.login-wrap{position:relative; width:100%;}
.login-wrap:has(.login-area) #header {display:none}
.login-wrap .fnb {display:none;}
/* .login-wrap .login-inner {padding:0 25px;} */
.login-wrap .login-area {min-height:100dvh; display:flex; flex-direction:column; align-items:center; justify-content:center;}
.login-wrap .login-area form[name=formLogin] {width:100%;}
.login-wrap .logo {height:44px; text-align:center;}
.login-wrap .logo img {height:100%; vertical-align:top;}
.login-wrap .title-box {margin-bottom:40px;}
/* .login-wrap .sub-conts-tit {line-height:32px; font-size:24px;} */
.login-wrap .title-box .step {line-height:32px; font-size:24px; font-weight:700; color:var(--color-gray-800,#393939)}
.login-area .btn-area {margin-top:28px; flex-wrap:nowrap; gap:10px;}
.login-area .btn-area .btn-default {flex-grow:1; width:50%;}
.login-wrap .login-form {margin-top:32px;}
.login-area .login-form .form-box + .form-box {margin-top:12px;}
/* .login-area .form-box .input-box input {border-color:#D8D8D8} */
/* .login-area .form-box .input-box input::placeholder {color:#B4B4B4}
.login-area .form-box .input-box input:focus {border-color:var(--color-gray-900);} */
.login-wrap .login-area .login-form {margin-top:90px;}
.login-area .login-utils{margin-top:40px; padding-top:10px; border-top:1px solid var(--color-gray-100);}
.login-utils .checkbox-wrap label {font-weight:400; color:#B4B4B4}
.login-area .result-box {padding:80px 10px 92px; line-height:40px; font-size:28px; color:#484848; text-align:center;}
.login-area .sns-login{margin-top:54px; margin-bottom:68px; display:flex;justify-content:center; gap:20px;}
.login-area .sns-login li a{display:block;width:52px;height:52px;border-radius:50%;font-size:0}
.login-area .sns-login li.naver a{background:url(/html/images/sub/member/icon_naver.svg) no-repeat center/contain;}
.login-area .sns-login li.kakao a{background:url(/html/images/sub/member/icon_kakao.svg) no-repeat center/contain;}
.login-area .sns-login li.facebook a{background:#166fe5 url(/html/images/login/sns_facebook.png) no-repeat center/contain;}
.login-area .sns-login li.google a{background:url(/html/images/sub/member/icon_google.svg) no-repeat center/contain;}
.login-area .sns-login li.twitter a{background:#1da1f2 url(/html/images/login/sns_twitter.png) no-repeat center/contain;}
.login-area .sns-login li.apple a{background:var(--color-light-gray2,#f5f5f7) url(/html/images/login/sns_apple.svg) no-repeat center/contain;}
.login-area .join-info {display:flex; justify-content:center; gap:7px; margin-top:8px;}
.login-area .join-info a {display:inline-block; width:50%; line-height:24px; font-size:12px; color:#767676; text-align:center;}
.login-area .join-info a:first-child {width:calc(50% + 10px);}
.login-wrap .login-form.find-id li{margin-top:20px}
/* 아이디찾기 */
.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}

/* 회원가입 */
.join-form-area {display:none;}
.join-form-area.on {display:block;}
.login-form .form-box .input-box + .form-label {margin-top:8px;}
/* .login-area .form-box .detect-input .input-box:has(input:not(:placeholder-shown)) + .btn-default {background-color:var(--color-gray-800)}  */
.login-form li .certification-number {margin-top:8px;}
.login-form li .certification-number .time {position:absolute; top:50%; right:16px; font-size:18px; color:#B4B4B4; transform:translateY(-50%);}
.agree-wrap {padding-top:28px;}
.agree-wrap .all-select {margin-bottom:4px; padding-bottom:24px; border-bottom:1px solid var(--color-gray-300);}
.agree-wrap .all-select .checkbox-wrap label {font-size:16px; font-weight:700;}
.agree-wrap .all-select .txt {display:block; margin-top:8px; line-height:18px; font-size:12px; letter-spacing:-.02em; color:#767676}
.agree-wrap .item + .item {margin-top:20px;}
.agree-wrap .checkbox-wrap + .checkbox-wrap {margin-top:12px;}
.agree-wrap .checkbox-wrap.required label:after {content:'*'; margin-left:2px; color:var(--color-red,#F44336)}
.agree-wrap .agree-cont {height:120px; margin-top:12px; padding:12px 14px; line-height:24px; font-size:12px; color:var(--color-gray-500); border:1px solid var(--color-gray-400); border-radius:8px; letter-spacing:-.02em; overflow-y:scroll;}
.agree-wrap .sub-checkbox {margin-top:12px; padding-left:20px;}

.join-form-area + .btn-area {margin-top:40px;}
.profile-img-box {position:relative; width:160px; margin:42px auto 0;}
.profile-img-box .profile-img {width:100%; height:160px; background:url(/html/images/sub/member/default_profile.svg) no-repeat center/contain; border-radius:50%; overflow:hidden}
.profile-img-box .profile-img:has(img) {background:transparent;}
.profile-img-box .profile-img img {width:100%; height:100%; object-fit:cover; vertical-align:top;}
.profile-img-box input[type=file] {position:absolute; width:0px; height:0px; appearance:none;}
.profile-img-box .btn-upload-img {position:absolute; bottom:0; right:6px; width:34px; height:34px; background:url(/html/images/sub/member/icon_upload.svg) no-repeat center/contain;}
.profile-img-box .login-form {margin-top:48px;}



.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:var(--color-border,#eee)}
.login-form li.address input:nth-of-type(1){display:inline-block;margin-right:10px;width:20%;min-width:80px;vertical-align:top}
.login-form li.address input:nth-of-type(2){margin:10px 0}
.login-form .form-box.error .input-box input {border-color:var(--color-error);}
.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;}

@media only screen and (max-width:1200px) {
    /* .login-wrap .login-inner {justify-content:center;}
    .login-wrap .login-area {margin-right:0;} */
}
@media only screen and (max-width:768px) {
    /* .login-wrap {background:#FFF;}
	.login-wrap .login-inner{align-items:flex-start; padding-top:0; padding-bottom:50px;width:100%;}
    .login-wrap .login-area {padding:20px; border-radius:0; box-shadow:none; border:none;}
    .login-wrap .title-box {margin-bottom:24px;}
    .login-wrap .sub-conts-tit {font-size:20px; line-height:24px;}
    .login-wrap .title-box .step {font-size:20px; line-height:24px;}
    .login-area .form-box + .form-box {margin-top:32px;}
    .login-area .form-box.user-id .input-box input {font-size:18px;}

    /* 로그인 */
    /*.login-area .login-utils {margin-top:24px;}
    .login-wrap .sns-login{margin-top:16px; gap:16px;}
    .login-wrap .sns-login li a{width:40px;height:40px}
    .login-wrap .join-info{margin-top:16px}
    .login-area .join-info a {line-height:17px; font-size:14px;}
    .login-area .btn-area {margin-top:16px} */

    /* 회원가입 */
    .login-area:has(.agree-wrap) .title-box {margin-bottom:24px;}
    /* .login-form li .success-txt {font-size:12px;} */
    .join-form-area + .btn-area {margin-top:24px;}
    .agree-wrap .item .accordion-body .agree-cont {font-size:14px;}

    /* 회원가입완료 */
    .login-area .result-box {padding:76px 0 84px; line-height:1.4em; font-size:16px;}
    .login-area .result-box + .btn-area .btn-default.bg-secondary {display:none;}

    .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 textarea{font-size:15px}
    .mypage-member-wrap .login-form li label, .login-form .form-title{font-size:12px;line-height:24px}
    .login-form .form-title a {font-size:12px;}
    .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}
}
/* 서브 비주얼 */
.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(1,72,212,0.9)}
.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:var(--color-white,#fff);text-shadow:5px 0 10px rgba(0,0,0,.1)}
.sub-visual .sub-visual-inner h1{font-weight:700;font-size:28px;color:var(--color-white,#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}
}
/* -------- location-menu -------- */
.location-menu{margin-bottom:40px;display:none}
.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}
}
/* 개별페이지 */
/* -------- 교육원소개 -------- */
.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:var(--color-border2,#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 var(--color-border,#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 var(--color-border2,#ddd)}
.location-wrap .address-info .address-box{padding:13px 0;border-bottom:1px solid var(--color-border2,#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 var(--color-border2,#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:var(--color-border2,#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:var(--color-white,#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:var(--color-white,#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}
.lecture-box .price-wrap .installment {font-size:13px; font-weight:400;}
@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 var(--color-border,#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 var(--color-border,#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:var(--color-white,#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 .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)}
@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)}
}
.lecture-conts-box .class-movie{overflow:hidden;width:100%;border-radius:4px;font-size:16px}
.lecture-conts-box .class-movie img{width:100%}
.lecture-conts-box .class-conts-box{padding:20px 0;border-bottom:1px solid var(--color-border,#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 var(--color-border,#eee);position:relative;z-index:10}
.lecture-conts-box .class-curriculum ul li{padding:16px 0 17px;border-bottom:1px solid var(--color-border,#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:var(--color-white,#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 var(--color-border,#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 var(--color-border2,#ddd);background:var(--color-white,#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:var(--color-border2,#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 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:14px;padding-top:12px;border-top:1px solid var(--color-border2,#ddd)}
.lecture-cart .info :is(dt,dd){margin:3px 0;font-weight:400;font-size:16px}
.lecture-cart .info dt{width:70px;color:var(--color-gray,#aaa)}
.lecture-cart .info dd{width:calc(100% - 70px);color:var(--color-dark-gray,#333)}
.lecture-cart .price{margin-top:12px;padding-top:12px;border-top:1px solid var(--color-border2,#ddd);}
.lecture-cart .price:not(.lecture-price) {display:flex; align-items:center;}
.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-size:14px;font-weight:700;color:var(--color-red,#dc3545)}
.lecture-cart .lecture-price{overflow-x:hidden;margin-top:10px;padding-top:12px;/* max-height:160px */}
.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 .installment-price{margin-top:40px; display:flex; justify-content:flex-end; align-items:baseline; gap:7px;}
.lecture-cart .installment-price dt{flex-shrink:0; font-weight:400;font-size:13px}
.lecture-cart .installment-price dd{font-weight:700;font-size:22px;color:var(--color-dark-gray,#333)}
.lecture-cart .installment-price strong{font-size:30px;}
.lecture-cart .price_title_box {display:flex; align-items:center;}
.lecture-cart .price_sub_title {font-size:15px; color:#666; font-weight:400;}
.lecture-cart .price_title_box + dl {margin-top:5px;}
.lecture-cart .price_title_box .discount_price {margin-left:auto; display:block;font-weight:400;font-size:14px;color:var(--color-gray,#aaa);text-decoration:line-through}
.lecture-cart .price_title_box .discount_price em{display:inline-block;font-style:normal;font-weight:700;color:var(--color-red,#dc3545)}

.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:var(--color-white,#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;}
.lecture-cart .m-price.installment {display:flex; justify-content:center; align-items:baseline; gap:7px; }
.lecture-cart .m-price.installment span {margin:0; font-size:13px; color:#555; text-decoration:none;}
.lecture-cart .m-price.installment .display_amount {font-size:22px; font-weight:700; color:var(--color-dark-gray,#333); text-decoration:none;}
.lecture-cart .m-price.installment .display_amount strong {font-size:24px;}
.m-lecture-cart-close{display:none}
.lecture-cart .m-price.installment {display:none;}
@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:var(--color-white,#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:var(--color-white,#fff)}
    .lecture-cart :is(.name,.subject,.date,.info,.total-price, .installment-price){display:none}
    .lecture-cart .m-price{display:block}
	.lecture-cart #displaySalePrice {margin-bottom:10px;}
    .lecture-cart .price{margin-top:0;border-top:0 none}
    .lecture-cart .lecture-price{margin-top:10px;margin-bottom:10px;padding:12px 0 0;border-top:1px solid var(--color-border2,#ddd)}
    .m-lecture-cart{position:fixed;bottom:-100%;left:0;z-index:-1;padding:12px 15px 0;background:var(--color-white,#fff);box-shadow:0 -8px 8px rgba(0,0,0,.05);width:100%;transition:.3s}
    .m-lecture-cart.on{bottom:128px}
    .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 .price_sub_title {font-size:13px;}
	.lecture-cart .m-price.installment {display:flex;}
	.lecture-cart .m-price.installment span {font-size:13px; }
	.lecture-cart .m-price.installment .display_amount {font-size:16px;}
	.lecture-cart .m-price.installment .display_amount strong {font-size:18px;}
	.lecture-view.on .lecture-cart {padding-top:36px;}
}
@media only screen and (max-width:767px) {
        .lecture-cart .m-price *{font-size:15px;line-height:40px}
        .m-lecture-cart.on{bottom:119px}
}

/* -------- 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:var(--color-white,#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:var(--color-black,#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;width:100%;height:100%}
.player-wrap .player-controller{display:flex;padding:24px 40px 24px 20px;border:1px solid var(--color-border,#eee);background:var(--color-white,#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 var(--color-border,#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:var(--color-white,#fff) url(/html/images/sub/lecture/player_arrow.png) no-repeat 94% center;border-top:1px solid var(--color-border,#eee)}
.player-list-wrap .player-list.on > a{background:var(--color-white,#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 var(--color-border,#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:var(--color-white,#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}
	.lecture-player header {position:absolute;} /*모바일에서만 고정*/
	.player-wrap .player-box .player_view {z-index:1111;} /*모바일에서만 고정*/
}
/* 강사소개 */
/* -------- 강사리스트 -------- */
.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 var(--color-border,#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:var(--color-black,#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 var(--color-border,#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 var(--color-border,#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:var(--color-border,#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 var(--color-border2,#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:var(--color-white,#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 var(--color-border,#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 var(--color-border,#eee);}
.basic-tab li{position:relative; display:inline-block;padding-right:40px;width:auto;vertical-align:top;border-bottom:2px solid var(--color-border,#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:var(--color-white,#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:var(--color-white,#fff);box-shadow:0 0 3px rgba(0,0,0,.1)}
.photo-reivew-wrap .swiper-button-prev{left:-30px;background:var(--color-white,#fff) url(/html/images/sub/shop/review_prev.png) no-repeat center center}
.photo-reivew-wrap .swiper-button-next{right:-30px;background:var(--color-white,#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 var(--color-border,#eee)}
.shop-view-detail .shop-review-list{padding:37px 30px;border-bottom:1px solid var(--color-border,#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 var(--color-border,#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:var(--color-white,#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:var(--color-black,#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 var(--color-black,#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 var(--color-border,#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)}
@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:var(--color-white,#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:var(--color-black,#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 var(--color-border,#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 var(--color-border2,#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:var(--color-white,#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 var(--color-border2,#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:var(--color-white,#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 {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:var(--color-border2,#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{padding-top:32px; padding-bottom:32px;}
.board-write table{width:100%}
.board-write tr{border-bottom:1px solid var(--color-border2,#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:var(--color-white,#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:var(--color-black,#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:var(--color-black,#000)}
.board-write .btn-file-controller li button:disabled:before,.board-write .btn-file-controller li button:disabled:after{background:var(--color-border2,#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}

.board-write.feedback {position:relative; left:-25px; width:calc(100% + 50px); padding-left:25px; padding-right:25px; flex-grow:1; background:var(--color-gray-100);}
.board-write .form-box + .form-box {margin-top:40px;}
.board-write .form-box .form-label {margin-bottom:12px; line-height:20px; font-size:16px; color:var(--color-gray-900);}
.board-write .textarea-box {margin-top:8px;}
.board-write .form-file-row + .form-file-row {margin-top:8px;}
.board-write .bullet-list {margin-top:32px;}
@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}
}

/* -------- 게시판목록 -------- */
.sub-conts-wrap:has(.board-list) .inner {max-width:910px; position:relative;}
/* .sub-conts-wrap:has(.board-list) .page-title-head + .sub-tab-menu {display:none;} */
.board-list{font-size:0; margin-top:60px;}
.board-list .thumb{overflow:hidden;width:100%;border-radius:4px;border:1px solid var(--color-border2,#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%;table-layout:fixed;}
.board-type3 td{padding-bottom:30px;font-size:20px;color:var(--color-secondary,#333);text-align:center}
.board-type3 tr + tr td {padding-top:36px}
.board-type3 .tit{border-bottom:1px solid var(--color-gray-200,#333)}
.board-type3 .cate{padding-left:20px;padding-right:20px;color:var(--color-primary,#0148d4);text-align:left}
.board-type3 .number{width:40px; font-weight:500; color:var(--color-gray-600);text-align:center}
.board-type3 .subject{position:relative; max-width:100%;text-align:left; padding-left:12px; padding-right:26px;}
.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%; line-height:32px; font-weight:500;font-size:24px;text-overflow:ellipsis;white-space:nowrap;vertical-align:middle}
.board-type3 .subject.has a div{max-width:calc(100% - 97px)}
.board-type3 .subject.new a div:after {content:''; display:inline-block; width:8px; height:8px; margin-left:10px; background:var(--color-primary); border-radius:50%; vertical-align:middle;}
.board-type3 .subject .cate{padding:0;margin-right:10px;display:inline-block;font-weight:400;font-size:16px;flex-shrink:0}
.board-type3 .subject:after {content:''; position:absolute; bottom:36px; right:0; width:24px; height:24px; background:url(/html/images/common/icon_back.svg) no-repeat center/contain; transform:rotate(180deg);}
.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 var(--color-border2,#ddd)}
.board-type3 .tit.on + .conts{display:table-row}
.board-type3 .conts td{padding:20px;height:125px;text-align:left}
/*FAQ*/
.faq-area .section-title {margin-top:60px;}
.faq-area .txt-center {text-align:center;}
.faq-area .board-list {margin-top:40px;}
.board-type4{width:100%;table-layout:fixed;}
.board-type4 tr + tr {border-top:12px solid #FFF;}
.board-type4 td {padding:21px 0;font-size:20px;color:var(--color-secondary,#333);text-align:center; background:var(--color-gray-50);}
.board-type4 .number{width:64px; padding-left:24px; font-weight:500; color:var(--color-gray-600);text-align:center;border-radius:20px 0 0 20px;}
.board-type4 .subject{position:relative; max-width:100%;text-align:left; padding-right:46px; padding-left:12px; padding-right:26px; border-radius:0 20px 20px 0;}
.board-type4 .subject:after {content:''; position:absolute; top:50%; right:24px; width:24px; height:24px; background:url(/html/images/common/icon_back.svg) no-repeat center/contain; transform:rotate(180deg) translateY(50%);}
.board-type4 .subject a { display:flex;overflow:hidden;max-width:100%; line-height:32px; font-weight:500;font-size:24px;text-overflow:ellipsis;white-space:nowrap;vertical-align:middle}
.board-type4 .subject.new a:after {content:''; display:inline-block; width:8px; height:8px; margin-left:10px; background:var(--color-primary); border-radius:50%; vertical-align:middle;}

.board-sub-menu {display:flex;}
:is(.sub-conts-wrap:has(.board-list),.sub-conts-wrap:has(.board-view)) .sub-tab-menu {margin-right:255px;}
.inquiry-btn-area {position:absolute; top:100px; right:0; display:flex; gap:12px; margin-left:auto;}
.inquiry-btn-area .btn-call {width:40px; height:40px; background:var(--color-secondary) url(/html/images/sub/common/icon_call.svg) no-repeat center/auto 24px; border-radius:50%;}
.inquiry-btn-area .btn-kakao {width:40px; height:40px; background:url(/html/images/sub/common/btn_kakaotalk.svg) no-repeat center/contain;}
@media only screen and (max-width:1200px) {
    .inquiry-btn-area {top:80px;}
}
@media only screen and (max-width:920px) {
    /*FAQ*/
    .faq-area {padding:0 20px;}
    .sub-conts-wrap:has(.faq-area) .page-title-head {padding-left:20px; padding-right:20px;}
    :is(.sub-conts-wrap:has(.board-list),.sub-conts-wrap:has(.board-view)) .page-title-head {padding-left:20px; padding-right:20px;}
    :is(.sub-conts-wrap:has(.board-list),.sub-conts-wrap:has(.board-view)) .sub-tab-menu {margin-left:20px;}
    .inquiry-btn-area {right:20px;}
}
@media only screen and (max-width:768px) {
.board-list {margin-top:24px;}
.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} */
.board-type3 td {padding-bottom:20px;}
.board-type3 tr + tr td {padding-top:22px;}
.board-type3 .number {font-size:14px;}
.board-type3 .subject a div {line-height:24px; font-size:16px;}
.board-type3 .subject:after {bottom:23px;}

/*FAQ*/
.faq-area .section-title {margin-top:36px; font-size:20px;}
.faq-area .board-list {margin-top:24px;}
.board-type4 td {padding-top:16px; padding-bottom:16px;}
.board-type4 .number {width:46px; padding-left:16px; font-size:14px; border-radius:16px 0 0 16px;}
.board-type4 .subject {border-radius:0 16px 16px 0; padding-left:6px; padding-right:36px;}
.board-type4 .subject:after {right:16px;}
.board-type4 .subject a {line-height:24px; font-size:16px;}

.board-sub-menu {flex-direction:column;}
:is(.sub-conts-wrap:has(.board-list),.sub-conts-wrap:has(.board-view)) .sub-tab-menu {margin-right:20px;}
.inquiry-btn-area {position:static; justify-content:flex-end; margin-top:12px; margin-right:20px;}
}
@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 var(--color-border,#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}
}

/* -------- 게시물 상세 -------- */
.sub-conts-wrap:has(.board-view) .inner {max-width:910px; position:relative;}
/* .sub-conts-wrap:has(.board-view) .page-title-head + .sub-tab-menu {display:none;} */
/* .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:var(--color-border2,#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  {margin-top:60px;}
.board-view .board-head {padding-bottom:30px; gap:12px; border-bottom:1px solid var(--color-gray-200);}
.board-view .number{flex-shrink:0; width:40px; font-size:20px; font-weight:500; color:var(--color-gray-600);text-align:center}
.board-view .subject{line-height:32px;font-weight:500;font-size:24px;color:var(--color-secondary,#333);word-break:keep-all}
.board-view .subject.new:after {content:''; display:inline-block; width:8px; height:8px; margin-left:10px; background:var(--color-primary); border-radius:50%; vertical-align:middle;}
.board-view .date{flex-shrink:0; margin-left:auto; font-size:16px; color:var(--color-gray-600,#aaa)}
.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 {margin-top:24px; padding:24px;}
.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{line-height:32px; font-size:24px;font-weight:500;line-height:1.6;color:var(--color-gray-700);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 var(--color-border2,#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 :is(input,textarea){display:inline-block;padding:0 20px;width:150px;height:50px;border:1px solid var(--color-light-gray,#ccc);background:var(--color-white,#fff);font-size:16px;color:var(--color-dark-gray,#333);vertical-align:top}
.comment-wrap .comment-form :is(input,textarea)::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 .comment-input textarea {width:calc(100% - 120px); height:70px; padding-top:10px; padding-bottom:10px; resize:none;}
.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:var(--color-white,#fff);text-align:center;vertical-align:top}
.comment-wrap .comment-form .comment-input textarea + button {height:70px}
.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:var(--color-border2,#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:768px) {
.sub-conts-wrap:has(.board-view) .page-title-head .btn-back {display:none;}
.board-view  {margin-top:24px;}
.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 .board-head {gap:6px; padding:0 20px 20px;}
.board-view .subject{line-height:26px; font-size:18px}
.board-view .number {font-size:16px;}
.board-view .date {font-size:14px;}
.board-view .board-conts {margin-top:0;}
.board-view .board-conts .img-file{margin-bottom:15px}
.board-view .board-conts p{line-height:26px; font-size:18px}
.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 :is(input,textarea) {padding:0 10px;height:42px;font-size:13px}
.comment-wrap .comment-form .comment-input :is(input,textarea) {width:calc(100% - 40px)}
.comment-wrap .comment-form .comment-input textarea {height:55px; padding-top:7px; padding-bottom:7px;}
.comment-wrap .comment-form .comment-input textarea + button {height:55px;}
.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 -------- */
#wrapper:has(.board-faq) .fnb,
#wrapper:has(.board-write) .fnb {display:none;}
#wrapper:has(.sub-tab-menu) .full-height {min-height:calc(100dvh - 102px);}
.board-faq {padding-top:42px;}
.board-faq .board-title {margin-top:32px; padding-left:1px; line-height:22px; font-size:16px; font-weight:600; letter-spacing:-.02em; color:var(--color-gray-800);}
.faq-wrap{margin-top:26px;}
.faq-wrap .f-box{position:relative;padding:16px 36px 16px 0;width:100%; text-align:left; background:#FFF;}
.faq-wrap .f-box.on{border-bottom-color:var(--color-border2,#ddd)}
.faq-wrap .f-box:after {content:'';position:absolute;top:50%;right:0;width:24px;height:24px;background:url(/html/images/sub/board/icon_arrow.svg) no-repeat center/contain; transform:translateY(-50%);}
.faq-wrap .f-box.on:after {transform:translateY(-50%) rotate(180deg);}
.faq-wrap .q-box + .f-box {border-top:1px solid var(--color-gray-300)}
/* .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{display:inline-block; margin-bottom:2px; line-height:16px; font-size:11px; font-weight:500; color:var(--color-gray-600);text-align:left}
.faq-wrap .f-box.new .cate:after {content:''; display:inline-block; width:4px; height:4px; margin-left:2px; background:#F46200; border-radius:50%; vertical-align:super;}
.faq-wrap .f-box .subject{line-height:20px; font-size:14px; font-weight:400; color:var(--color-gray-950);text-align:left; letter-spacing:-.02em; 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 0;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}
/* .faq-wrap .q-box:after {content:''; display:block; clear:both;} */
/* @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-top:16px;}
.board-category .category-list {display:flex; flex-wrap:wrap; gap:6px;}
.board-category .item {display:inline-block; width:auto;vertical-align:top}
.board-category .item a{display:block;line-height:18px; font-size:12px;font-weight:500;color:var(--color-gray-700); letter-spacing:-.02em; padding:6px 10px; border:1px solid var(--color-gray-300); border-radius:15px;}
.board-category .item.on a{color:#FFF;background:var(--color-primary)}
/* @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 var(--color-border2,#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:var(--color-white,#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:var(--color-white,#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 var(--color-border2,#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:var(--color-white,#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:var(--color-white,#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:var(--color-black,#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:var(--color-white,#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)}
.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: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}
}

/* -------- 주문내역 -------- */
.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:var(--color-white,#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:var(--color-gray-50,#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:var(--color-border2,#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 var(--color-border,#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 var(--color-border2,#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 var(--color-border2,#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:var(--color-white,#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 var(--color-border2,#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 var(--color-border2,#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 thead th.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:var(--color-border2,#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:'적립/차감 포인트'}
.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:var(--color-border2,#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 var(--color-border2,#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:var(--color-white,#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%}
}

/* 회원수정 */
.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}
.mypage-member {max-width:700px; margin:0 auto; padding-top:60px;}
.mypage-member .login-form + .login-form {margin-top:36px; padding-top:40px; border-top:1px solid var(--color-gray-200);}
/* .mypage-member .form-box .input-box input:read-only {background-color:#FFF;} */
.mypage-member .birthday .input-area {gap:12px;}
.mypage-member .birthday .custom-select-wrap {width:33.33%;}
.mypage-member .birthday .txt {margin-right:20px;}
.mypage-member .custom-select-wrap {flex-grow:1;}
.mypage-member .btn-area {margin-top:40px; gap:12px;}
.mypage-member .radio-wrap {gap:72px;}
.mypage-member .btn-area .btn-default {flex-grow:1; width:50%;}
.mypage-member .btn-area .btn-default.bg-secondary:disabled {color:var(--color-gray-500,#888); background-color:var(--color-gray-300,#D9D9D9);}
.mypage-member .popup-wrap .popup-tit.txt-center {margin-bottom:20px;}
.mypage-member .popup-wrap .popup-contents-wrap {display:flex; flex-direction:column; gap:40px;}
.mypage-member.modify .logout-area {display:none}
/* 프로필 수정 */
.mypage-member.profile :is(.input-box input,.textarea-box textarea) {border-color:#D8D8D8;}
.item-box.thumbnail {align-items:center; gap:10px; margin-top:8px;}
.item-box.thumbnail .preview {width:120px; height:120px; border-radius:50%; background:#FFF url(/html/images/sub/member/thumbnail_previewl.svg) no-repeat center/60px auto; overflow:hidden;}
.item-box.thumbnail .preview:has(img) {background:transparent;}
.item-box.thumbnail .preview img {width:100%; height:100%; object-fit:cover;}
.item-box.thumbnail .file-upload {position:absolute; width:0px; height:0px; appearance:none;}
.item-box.thumbnail .btn-round {cursor:pointer;}
/* 비즈니스계정 전환 */
.inner:has(.mypage-member.business) {max-width:908px;}
.mypage-member.business {max-width:100%; padding-top:0;}
.mypage-member.business .title-box {gap:4px;}
.mypage-member.business .section-title {font-size:24px;}
.mypage-member.business .process-step {position:relative; display:flex; justify-content:space-between; margin-top:60px; padding:61px 0;}
.mypage-member.business .process-step:before {content:''; position:absolute; top:0; left:50%; width:100vw; max-width:908px; height:1px; background:var(--color-gray-200); transform:translateX(-50%);}
.mypage-member.business .process-step:after {content:''; position:absolute; bottom:0; left:50%; width:100vw; max-width:908px; height:1px; background:var(--color-gray-200); transform:translateX(-50%);}
.mypage-member.business .process-step .arrow {flex-grow:1; background:url(/html/images/sub/member/step_arrow.svg) no-repeat center/24px auto;}
.mypage-member.business .step-box .number {display:block; line-height:32px; font-size:32px; font-weight:700; color:var(--color-primary); opacity:0.2;}
.mypage-member.business .step-box .title {display:block; margin-top:16px; line-height:32px; font-size:24px; font-weight:700;}
.mypage-member.business .notice-txt {margin-top:32px; margin-bottom:60px; line-height:28px; font-size:20px; font-weight:500; color:var(--color-gray-600); text-align:center;}
.mypage-member.business .certify-business {position:relative; padding-top:36px; padding-bottom:36px;}
.mypage-member.business .certify-business:after {content:''; position:absolute; bottom:0; left:50%; width:100vw; max-width:908px; height:1px; background:var(--color-gray-200); transform:translateX(-50%);}
.mypage-member.business .certify-business .form-box .input-area {gap:16px 12px;}
.mypage-member.business .certify-business .form-box .btn-default {margin-left:0;}
.mypage-member.business .business-form {margin-top:60px;}
.mypage-member.business .open-date .input-area {gap:12px; align-items:center;}
.mypage-member.business .open-date .txt + .custom-select-wrap {margin-left:20px;}
.mypage-member.business .address .input-box + .input-box {margin-left:0;}
.mypage-member.business .address .input-box {margin-top:8px;}
.mypage-member.business .address .input-area .input-box {margin-top:0;}
.mypage-member.business .custom-select-wrap + .custom-select-wrap {margin-left:8px;}
.mypage-member.business .form-file-row .file-name {background-color:var(--color-gray-50)}
.mypage-member.business .divider {position:relative; padding-top:36px;}
.mypage-member.business .divider:before {content:''; position:absolute; top:0; left:50%; width:100vw; max-width:908px; height:1px; background:var(--color-gray-200); transform:translateX(-50%);}
.mypage-member.business .bullet-list {margin-top:36px;}
.mypage-member.business .notice-area {margin-top:36px; padding-top:36px; border-top:1px solid var(--color-gray-200);}
.mypage-member.business .notice-area .bullet-list {margin-top:12px;}
.mypage-member.business .btn-area {margin-top:36px;}

@media only screen and (max-width:768px) {
    /* 마이페이지 */
    /* 회원수정 */
    .mypage-member{padding-top:40px}
    .mypage-member .login-form + .login-form {margin-top:40px;}
    .mypage-member .form-box.password-box {margin-top:20px;}
    .mypage-member .radio-wrap {gap:0; justify-content:space-between; max-width:400px;}
    .mypage-member .birthday .input-area {gap:8px;}
    .mypage-member .birthday .txt {margin-right:0;}
    .mypage-member .popup-wrap .form-box {margin-top:20px;}
    .mypage-member.modify .logout-area {display:block; margin-top:40px; text-align:center;  border-top:1px solid #F0F0F0;}
    .mypage-member.modify .btn-logout {padding-top:3px;display:inline-block; font-size:14px; font-weight:500; color:var(--color-gray-700); text-decoration:underline; letter-spacing:0; text-underline-position:from-font;}
    .mypage-member.modify .btn-area {padding:4px 20px 0;}
    .mypage-member .btn-area .btn-default.bg-secondary:disabled {color:#FFF;}
    .mypage-member .popup-wrap .popup-contents-wrap {gap:20px;}
    .mypage-member .popup-wrap.layer-inactive .popup-inner {padding-top:40px}
    .mypage-member .popup-wrap.layer-inactive .popup-tit.txt-center {margin-bottom:16px;}
    .mypage-member .popup-wrap.layer-inactive .popup-contents-wrap {gap:30px;}
    .mypage-member .popup-wrap.layer-inactive .btn-area {margin-top:30px;}
    .mypage-member .popup-wrap.layer-delete .popup-inner {padding-top:20px;}
    .mypage-member .popup-wrap.layer-delete .popup-tit {margin-bottom:10px;}
    .mypage-member .popup-wrap.layer-delete .btn-area {margin-top:28px;}
    /* 프로필 수정 */
    .item-box.thumbnail {padding:20px 0;}
    .item-box.thumbnail .preview {width:80px; height:80px; background-size:44px;}
    .mypage-member.profile .btn-area {margin-top:32px;}
    /* 비즈니스계정 전환 */
    /* .mypage-member.business {padding:0 20px;} */
    .mypage-member.business .title-box {position:relative; padding:16px 20px; border-bottom:1px solid var(--color-gray-200);}
    /* .mypage-member.business .title-box:after {content:''; position:absolute; bottom:0; left:50%; width:100vw; max-width:908px; height:1px; background:var(--color-gray-200); transform:translateX(-50%);} */
    .mypage-member.business .section-title {line-height:1.2em; font-size:16px;}
    .mypage-member.business .process-step {margin-top:0; padding:40px 20px 20px;}
    .mypage-member.business .process-step:before {display:none;}
    .mypage-member.business .process-step:after {width:100%;}
    .mypage-member.business .step-box .number {font-size:24px;}
    .mypage-member.business .step-box .title {margin-top:4px; line-height:1.2em; font-size:14px;}
    .mypage-member.business .notice-txt {margin-top:16px; margin-bottom:20px; padding-left:20px; text-align:left; line-height:1.4; font-size:14px;}
    .mypage-member.business .certify-business {padding:20px;}
    .mypage-member.business .certify-business:before {content:''; position:absolute; top:0; left:50%; width:100vw; max-width:908px; height:1px; background:var(--color-gray-200); transform:translateX(-50%);}
    .mypage-member.business .certify-business .form-box .input-area {flex-wrap:wrap; column-gap:8px;}
    .mypage-member.business .certify-business .form-box .input-box {width:calc(33.33% - 6px)}
    .mypage-member.business .certify-business .form-box .btn-default {width:100%;}
    .mypage-member.business .certify-business .bullet-list {margin-top:16px;}
    .mypage-member.business .business-form {margin-top:0; padding:20px;} 
    .mypage-member.business .bullet-list {margin-top:8px;}
    .mypage-member.business .notice-area {margin-top:0; padding-top:20px;}
    .mypage-member.business .notice-area .section-title {line-height:32px;}
    .mypage-member.business .notice-area .bullet-list li {line-height:1.4em;}
    .mypage-member.business .divider {padding-top:20px; margin-top:20px;}
    .mypage-member.business .btn-area {margin-top:20px; padding:0 20px;}

    .bullet-list li {padding-left:18px; line-height:1.2em; font-size:12px;}
    .bullet-list li:before {left:6px; font-size:12px;}
}

/* -------- 나의강의실 -------- */
.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:var(--color-white,#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;padding:0}
.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;}

/*추천강의 필수(선수)*/
[class*=recommend-].popup-wrap {z-index:111;}
[class*=recommend-].popup-wrap .close {top:23px; right:26px; width:30px; height:30px;}
[class*=recommend-].popup-wrap .close:before, [class*=recommend-].popup-wrap .close:after {background:var(--color-dark-gray,#333);}
.popup-wrap .lecture-area {position:relative; width:calc(100% + 40px); overflow:hidden;}
.popup-wrap .main-class-box {position:relative;}
.popup-wrap .main-class-box .badge {position:absolute; top:-25px; right:-22px;}
.popup-wrap .main-class-box {width:380px;}
.popup-wrap .main-class-box .thumb {aspect-ratio:16/9;}
.popup-wrap .main-class-box .thumb a {height:100%;}
.popup-wrap .main-class-box .thumb img {height:100%;object-fit:cover;}
.popup-wrap .main-class-box .name {margin-top:17px; font-weight:bold;}
.popup-wrap .main-class-box .class-subject {margin-top:10px; font-weight:400;}
.popup-wrap .main-class-box .price {margin-top:16px;}
.recommend-before.popup-wrap .popup-inner {display:flex; flex-direction:column; max-width:640px; height:727px; padding-top:55px; padding-left:52px; border-radius:26px; border:2px solid var(--color-black,#000);}
.recommend-before.popup-wrap .popup-contents-wrap {height:auto; margin-top:35px;}
.recommend-before.popup-wrap .popup-tit {font-size:30px; font-weight:bold;}
.recommend-before.popup-wrap .popup-sub-tit {margin-top:2px;}
.recommend-before.popup-wrap .popup-btn {margin-top:auto; justify-content:center;}
.recommend-before.popup-wrap .popup-btn [class^=btn] {width:216px; color:var(--color-white,#fff); background:#1e489b; border-radius:33px;}
/*추천강의 추천(후수)*/
.recommend-after.popup-wrap .popup-inner {max-width:1020px; height:640px; padding-top:55px; padding-left:48px; border-radius:26px; border:2px solid var(--color-black,#000);}
.recommend-after.popup-wrap .popup-contents-wrap {margin-top:26px; height:auto;}
.recommend-after.popup-wrap .lecture-area {padding-top:25px;}
.popup-wrap .popup-check {position:absolute; bottom:30px; right:40px; font-size:16px;}
/*간편문답*/
.lecture-qna.popup-wrap {z-index:9999;}
.lecture-qna.popup-wrap .popup-inner {max-width:1020px; height:640px; padding:25px 10px 10px; border-radius:26px; border:2px solid var(--color-black,#000);}
.lecture-qna.popup-wrap .popup-contents-wrap {margin-top:0; height:auto; padding:30px; padding-top:30px;}
.lecture-qna.popup-wrap .leveltest-conts-wrap .leveltest .questions:first-of-type {margin-top:0;}
.lecture-qna.popup-wrap .popup-btn {justify-content:center;}
.lecture-qna.popup-wrap .popup-btn button {max-width:500px;}
/*이어보기 팝업*/
.view-notice-popup.popup-wrap .popup-inner {max-height:200px; padding:25px;}
.view-notice-popup.popup-wrap .popup-contents-wrap {height:auto; margin-top:20px;}
.view-notice-popup.popup-wrap .popup-btn {margin-top:20px;}
@media only screen and (max-width:1024px) {
.lecture-room-tab{margin-top:40px}
.lecture-room-list{row-gap:30px}
/*추천강의 필수(선수)*/
.recommend-before.popup-wrap .popup-inner {max-width:625px; padding-top:40px; padding-left:40px;}
/*추천강의 추천(후수)*/
.recommend-after.popup-wrap .popup-inner {height:610px;}
.popup-wrap .popup-check {bottom:20px;}
}
@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}
/*추천강의 필수(선수)*/
[class*=recommend-].popup-wrap .close {top:15px; right:15px; width:21px; height:21px;}
.popup-wrap .lecture-area {width:calc(100% + 20px);}
.popup-wrap .main-class-box {width:320px; margin-bottom:0;}
.recommend-before.popup-wrap .popup-inner {height:560px; padding:30px 20px; border:none; border-radius:18px;}
.recommend-before.popup-wrap .popup-tit {font-size:20px;}
.recommend-before.popup-wrap .popup-contents-wrap {margin-top:30px;}
/*추천강의 추천(후수)*/
.recommend-after.popup-wrap .popup-inner {top:auto; bottom:0; left:0; width:100%; height:510px; padding:40px 20px; border:none; border-radius:0; transform:none;;}
.recommend-after.popup-wrap .popup-contents-wrap {margin-top:30px;}
.popup-wrap .popup-check {bottom:10px; right:20px; font-size:14px;}

/*간편문답*/
.lecture-qna.popup-wrap .popup-inner {padding:30px 5px 5px;}
.lecture-qna.popup-wrap .popup-contents-wrap {height:calc(100vh - 160px); padding:20px; margin-bottom:10px;}
}
@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}
/*추천강의 필수(선수)*/
.popup-wrap .main-class-box {width:240px; margin-bottom:0;}
/*추천강의 추천(후수)*/
.recommend-after.popup-wrap .popup-inner {height:460px; padding-top:35px; padding-bottom:35px;}
}

/* -------- 나의강의실 -------- */
.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:var(--color-white,#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{position:relative; padding-top:7px; 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 .myclass-lecture-info-txt .rank-box {position:absolute; top:0; right:0; display:inline-flex; justify-content:center; align-items:baseline; gap:6px; min-width:90px; height:25px; line-height:25px; padding:0 10px; font-size:13px; color:var(--color-dark-gray,#333); background:#ffdede; border-radius:12.5px; cursor:pointer;}
.myclass-lecture-info .myclass-lecture-info-txt .rank-box .icon-rank {width:10px; height:10px; background:url(/html/images/sub/common/icon_rank.png) no-repeat center/contain;}
.myclass-lecture-info .btn-area{align-items:stretch; flex-wrap:nowrap;gap:10px}
.popup-wrap.analyze-learner .popup-inner {max-height:400px;}
.popup-wrap.analyze-learner .list {display:flex; flex-wrap:wrap; gap:30px;}
.popup-wrap.analyze-learner .list li {width:calc(50% - 20px)}
.popup-wrap.analyze-learner .list li .chart-box {display:flex; justify-content:center; align-items:center;}
@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;min-height:40px;padding:0}
.myclass-lecture-info .myclass-lecture-info-txt .rank-box {padding:0 7px; height:22px; line-height:22px; font-size:12px;}
.popup-wrap.analyze-learner .popup-inner {max-height:85vh; height:600px;}
.popup-wrap.analyze-learner .list {gap:0;}
.popup-wrap.analyze-learner .list li {width:100%}
}

.myclass-detail .myclass-detail-tab{border-bottom:1px solid var(--color-border,#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 var(--color-border,#eee)}
.myclass-list-box{padding:10px 0;border-bottom:1px solid var(--color-border,#eee);display:flex; align-items:center;}
.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:var(--color-border,#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:var(--color-white,#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:var(--color-border2,#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:var(--color-border,#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 var(--color-border2,#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 var(--color-border2,#ddd);background:var(--color-white,#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}
.order-wrap .payment-info .total{margin:20px 0 30px;padding:20px 0;border-top:1px solid var(--color-border2,#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 .total dd strong:lang(en) {font-weight:700;font-size:25px;word-break:break-all}
.order-wrap .payment-info .total dd strong:lang(zh) {font-weight:700;font-size:25px;word-break:break-all}
.order-wrap .payment-info .total dd strong:lang(jp) {font-weight:700;font-size:25px;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:var(--color-white,#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:var(--color-white,#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}
}

/* 평점 */
.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 var(--color-border2,#ddd);background:var(--color-white,#fff);overflow:hidden}
.quantity-wrap > *{display:inline-block;vertical-align:top}
.quantity-wrap button{position:relative;width:30px;height:38px;background:var(--color-white,#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:var(--color-black,#000)}
.quantity-wrap .add:after{content:'';position:absolute;top:50%;left:50%;margin-top:-5px;margin-left:-1px;width:2px;height:10px;background:var(--color-black,#000)}
.quantity-wrap input{width:38px;height:38px;border:none;font-size:18px;color:var(--color-dark-gray,#333);text-align:center}

.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;}
}



/* 폼 공통 */
.form-wrap {display:flex; justify-content:center; gap:20px;}
/*이미지 영역*/
.form-wrap .image-area {width:50%; padding-top: 4px}
.form-wrap .section-title {margin-bottom:16px; font-size:24px;}
.form-wrap .image-area .upload-box {height:293px;}
.form-wrap .image-area .upload-box label {cursor:pointer;}
.form-wrap .image-area .image-upload {position:absolute; width:0px; height:0px; appearance:none;}
.form-wrap .image-area img {width:100%; vertical-align: top;}
/*입력폼 영역*/
.form-wrap .form-area {width:max(50%,500px); max-width:600px; flex-shrink:0;}
.form-wrap .form-area .custom-select-wrap {width:100%;}
.form-wrap .form-area .custom-select-wrap.select .option {font-weight:500;}
.form-wrap .form-area .custom-select-wrap .option-area .txt {display:block; padding:20px 16px 0; line-height:26px; font-size:18px; font-weight:400; letter-spacing:0; color:var(--color-gray-400)}
.form-wrap .form-area .form-box .input-box:has(.btn-file-down) input:read-only {background-color:#FFF;}
.form-wrap .form-area .form-box :is(.input-box,.form-file-row) + .txt {display:block; margin-top:10px; font-size:14px;}
.form-wrap .form-area .btn-round {margin-top:8px;}
.form-area .divider {position:relative; padding-top:36px;}
.form-area .divider:before {content:''; position:absolute; top:0; left:0; right:0; height:1px; background:var(--color-gray-200); }
.form-area .btn-area {gap:12px; margin-top:36px;} 
.form-area .btn-area .btn-default {width:100%;}
.form-area .btn-area .btn-default:disabled {background-color:var(--color-gray-500);}

/* 약관 */
.sub-conts-wrap:has(.terms-wrap) .inner {max-width:950px; position:relative;}
/* .sub-conts-wrap:has(.terms-wrap) .page-title-head + .sub-tab-menu {display:none;} */
.view-terms .popup-inner {padding-top:15px; padding-bottom:34px;}
.view-terms .close {display:inline-block; margin-bottom:15px;}
.view-terms .popup-contents-wrap {flex-grow:1; gap:0;}
.terms-head {padding:20px 0;}
.terms-head .head-title {line-height:26px; font-size:20px; font-weight:600; color:var(--color-gray-950); letter-spacing:-.02em;}
.terms-head .head-date {display:block; line-height:20px; margin-top:6px; font-size:14px; color:var(--color-gray-600); letter-spacing:-.02em;}
.terms-wrap .terms-area {margin-top:30px;}
.terms-area .terms-title {display:block; padding:12px 0; line-height:22px; font-size:16px; font-weight:500; color:var(--color-gray-950); border-top:1px solid var(--color-gray-800);}
.terms-area .terms-cont {margin-bottom:16px; padding:20px 0; line-height:20px; font-size:14px; color:var(--color-gray-700); font-weight:500; letter-spacing:-.02em; border-top:1px solid var(--color-gray-300)}
.terms-area .terms-cont .sub {font-size:13px; font-weight:400;}
.terms-area .terms-cont .sub + .sub {margin-top:6px;}
.terms-area .terms-cont ol {padding-inline-start:21px; }
.terms-area .terms-cont ol li {list-style-type:decimal}
.terms-area .terms-cont ol li::marker {margin-right:2px;}
.terms-area .terms-cont .table {margin-top:6px; border:1px solid var(--color-gray-300); border-radius:8px; overflow:hidden;}
.terms-area .terms-cont .table table th {height:36px; font-size:13px; font-weight:400; color:var(--color-gray-800); text-align:center; letter-spacing:-.02em; vertical-align:middle; background:var(--color-gray-200);}
.terms-area .terms-cont .table table th + th {border-left:1px solid var(--color-gray-300);}
.terms-area .terms-cont .table table td {padding:4px 10px; line-height:16px; font-size:11px; font-weight:400; color:var(--color-gray-700); text-align:left; letter-spacing:-.02em; vertical-align:middle; border-top:1px solid var(--color-gray-300);}
.terms-area .terms-cont .table table td + td {border-left:1px solid var(--color-gray-300);}
.terms-area .terms-cont a {color:#007AFF;}


/* ================= 채팅 ================== */ 
/* 메인 */
.chat-area .btn-chat-main {position:absolute; top:50%; left:50%; width:243px; height:243px; padding:0; margin-top:-12px; line-height:20px; font-size:14px; color:#FFF; text-align:center; border:none; background:url(/html/images/sub/chat/btn_chat.svg) no-repeat center/contain; transform:translate(-50%, -50%);}
/* 안내 */
.chat-guide .guide-area {display:flex; align-items:center; justify-content:center; flex-direction:column; flex-grow:1; padding-bottom:24px;}
.chat-guide .guide-area .round-img {width:87px; height:87px;}
.chat-guide .guide-area .sub-conts-tit {margin-top:24px; text-align:center;}
.chat-guide .guide-area .sub-conts-desc {margin-top:12px; line-height:24px; text-align:center;}
/* 리스트 */
.chat-list-area {padding-top:28px; padding-bottom:20px;}
.chat-list-area .btn-default {margin-top:12px;}
.chat-list {display:flex; flex-wrap:wrap; gap:20px 12px;}
.chat-list li {position:relative; width:calc(50% - 6px);}
.chat-list .item {display:block; border-radius:10px; overflow:hidden;}
.chat-list .item .img-box {width:100%; aspect-ratio:157/200;}
.chat-list .item .img-box img {width:100%; height:100%; object-fit:cover; vertical-align:top;}
.chat-list .item .flag {position:absolute; top:8px; right:8px; padding:0 12px; line-height:26px; font-size:12px; font-weight:600; color:#FFF; background:var(--color-primary); border-radius:6px;}
.chat-list .item .chat-ralfy-box {position:absolute; left:8px; bottom:8px; display:flex; align-items:center;}
.chat-list .item .chat-ralfy-box .ralfy-img {width:28px; height:28px; margin-left:-18px; border-radius:50%; border:1px solid var(--color-gray-100); overflow:hidden;}
.chat-list .item .chat-ralfy-box .ralfy-img:first-of-type {margin-left:0;}
.chat-list .item .chat-ralfy-box .ralfy-img img {width:100%; height:100%; vertical-align:top;}
.chat-list .item .chat-ralfy-box .ralfy-count {margin-left:-18px; padding:0 10px; line-height:30px; font-size:12px; font-weight:500; color:#FFF; border:1px solid var(--color-gray-100); background:var(--color-primary); border-radius:15px;}
.chat-list .shara-box {position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background: rgba(0, 0, 0, 0.25); border-radius:10px; display:none; }
.chat-list .btn-share {width:48px; height:48px; background:#FFF url(/html/images/sub/chat/icon_share.svg) no-repeat center/24px auto; box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.3), 0px 4px 8px 3px rgba(0, 0, 0, 0.15); border-radius:50%;}
.chat-list li:hover .shara-box {display:flex;}
/* 추천리스트 */
.recommend-area {padding-top:20px; padding-bottom:20px;}
.recommend-area .sub-conts-tit {color:#0D1B34;}
.recommend-area .new-ralfy {margin-top:61px;}
.recommend-area .ralfy-list {margin-top:16px;}
/* 추천리스트 인기 */
.popular-area .popular-ralfy-list .item {padding-left:46px;}
/* 채팅방 */
/* .chat-wrap .chat-content {display:flex; flex-direction:column;} */
.chat-item {padding:16px 0;}
.chat-item .round-img {display:block; width:32px; height:32px; margin-bottom:12px;}
.chat-item .message-area {display:flex; align-items:flex-end; gap:8px;}
.chat-item .message-area + .message-area {margin-top:8px;}
.chat-item .chat-bubble {line-height:21px; font-size:14px; border-radius:6px;}
.chat-item .chat-bubble strong {font-weight:700;}
.chat-item .chat-bubble .chat-message-head {text-align:center; background:var(--color-gray-100); border-radius:6px;}
.chat-item .chat-bubble .chat-message-head img {vertical-align:top;}
.chat-item .chat-bubble .chat-message {padding:12px 16px;}
.chat-item .chat-time {flex-shrink:0; color:var(--color-gray-500); font-size:10px;}
.chat-item.is-other .chat-bubble {color:var(--color-gray-900); background:var(--color-gray-200)}
.chat-item.is-me {margin-left:auto;}
.chat-item.is-me .chat-bubble {color:#FFF; background:var(--color-primary); order:2;}
.chat-item.is-me .message-area {justify-content:flex-end;}
.chat-item.is-me .chat-time {order:1;}
.chat-item.is-me + .chat-item.is-me {padding-top:0; margin-top:-8px;}
/* 랄피 목록 */
.chat-wrap .ralfy-area {position:relative; width:calc(100% + 50px); left:-25px; padding:0 25px; overflow:hidden;}
.ralfy-image-list {display:flex; margin-top:12px;}
.ralfy-image-list .item {width:auto;}
.ralfy-image-list .item .round-img {display:block; width:42px; height:42px; border:1px solid #CDCDCD;}
.ralfy-image-list .item.active .round-img {border-color:var(--color-primary); box-shadow:0px 0px 10px 0px rgba(139, 92, 246, 0.7);}
/* 추천질문 */
.chat-item .question-area {position:relative; width:calc(100% + 50px); left:-25px; margin-top:12px; padding:0 25px; overflow:hidden;}
.chat-item .question-area .list {display:flex;}
.chat-item .question-area .list .item {width:auto;}
.chat-item .question-area .list .item .btn {display:block; padding:6px 12px; line-height:17px; font-size:14px; color:#FFF; background:var(--color-primary); border-radius:4px;}
/* 메세지 - 이미지 */
.chat-item .chat-image {max-width:70.133%; overflow:hidden;}
.chat-item .chat-image img {width:100%; height:100%; object-fit:cover; vertical-align:top;}
/* 이미지 레이어 팝업 */
.chat-image-layer {position:absolute; inset:0; background:rgba(0, 0, 0, 0.4); z-index:10; display:none;}
.chat-image-layer .layer-inner {display:flex; align-items:center; justify-content:center; width:91.466%; height:100%; margin:0 auto;}
.chat-image-layer .img-box {border-radius:6px; overflow:hidden;}
.chat-image-layer .img-box img {width:100%; vertical-align:top;}
/* 채팅 입력 로딩 */
.chat-bubble.chat-loading {flex-grow:0; display:flex; align-items:center; gap:6px; padding:12px 16px;}  
.chat-loading .dot {width:10px; height:10px; background-color:#D0BFFF; border-radius:50%; animation:wave-loading 1.4s infinite ease-in-out; animation-fill-mode:both;}
.chat-loading .dot:nth-child(1) {animation-delay:0s;}
.chat-loading .dot:nth-child(2) {animation-delay:0.2s;}
.chat-loading .dot:nth-child(3) {animation-delay:0.4s;}
@keyframes wave-loading {
    0%, 80%, 100% {background-color:#D0BFFF;}
    40% {background-color:#9A78F9;}
}
/* .dot-flashing {position:relative; width:10px; height:10px; border-radius:5px; background-color:#9A78F9; color:#9A78F9; animation:dotFlashing 1s infinite ease-in-out alternate; animation-delay:.2s;}
.dot-flashing::before, .dot-flashing::after {content:''; display:inline-block; position:absolute; top:0;}
.dot-flashing::before {left:-15px; width:10px; height:10px; border-radius:5px; background-color:#9A78F9; color:#9A78F9; animation:dotFlashing 1s infinite ease-in-out  alternate; animation-delay:0s;}
.dot-flashing::after {left:15px; width:10px; height:10px; border-radius:5px; background-color:#9A78F9; color:#9A78F9; animation:dotFlashing 1s infinite ease-in-out alternate; animation-delay:.5s;}
@keyframes dotFlashing {
    0% {background-color:#9A78F9;}
    50%,
    100% {background-color:#D0BFFF;}
} */

/* 새 메세지 */
.new-message-group:before {content:''; display:block; margin:8px 0; width:100%; height:1px; background:var(--color-gray-300);}
.new-message-group .new-label{display:block; margin-top:8px; font-size:10px; font-weight:500; color:var(--color-primary);}
/* 멀티미디어 레이어 */
.chat-attach-layer .attach-wrap {position:relative; display:flex; gap:12px; left:-25px; width:calc(100% + 50px); margin-top:24px; margin-bottom:-25px; padding:0 25px 25px; overflow-x:scroll;}
.chat-attach-layer .btn-area {gap:12px;}
.chat-attach-layer .btn-area a {display:flex; flex-direction:column; align-items:center; justify-content:center; width:100px; height:100px; background:var(--color-gray-200); border-radius:6px;}
.chat-attach-layer .btn-area a:before {content:''; display:block; width:32px; height:32px; background:url(/html/images/sub/chat/icon_file.svg) no-repeat center/contain;}
.chat-attach-layer .btn-area .btn-picture:before {background-image:url(/html/images/sub/chat/icon_picture.svg);}
.chat-attach-layer .btn-area .btn-camera:before {background-image:url(/html/images/sub/chat/icon_camera.svg);}
.chat-attach-layer .attach-image-area {margin-left:12px;}
.chat-attach-layer .image-list {display:flex; gap:12px;}
.chat-attach-layer .image-list .item {position:relative; width:100px; height:100px; border-radius:6px; overflow:hidden;}
.chat-attach-layer .image-list .item img {width:100%; height:100%; object-fit:cover; vertical-align:top;}
.chat-attach-layer .image-list .item .checkbox-wrap label {position:absolute; inset:0; top:0; right:0; padding:2px; display:flex; justify-content:flex-end;}
.chat-attach-layer .image-list .item .checkbox-wrap label:before {width:20px; height:20px; background-size:20px auto;}
/* 채팅방 관리 레이어 */
.layer-utils.chat-manage .layer-area {left:37px; bottom:59px; width:116px;}
/* 메세지 유틸 레이어 */
.layer-utils.message-util {background:rgba(0, 0, 0, 0.4);}
.layer-utils.message-util .layer-area {width:128px;}
.chat-item .message-area.active .chat-bubble {position:relative; z-index:101;}
.chat-wrap .chat-area:has(.chat-item .message-area.active) {overflow:hidden;}
/* 설정 */
.setting-wrap .flex-box {min-height:64px; align-items:center;}
.setting-area .title {margin-right:auto; font-size:18px; color:var(--color-gray-950); letter-spacing:-.02em;}
.setting-area .chat-setting-box .sub-box {padding-left:20px;}
.setting-area .chat-setting-box .sub-box .checkbox-wrap {margin-top:12px;}
/* 알림 설정 */
.setting-wrap .time-area {display:flex; justify-content:space-between; gap:24px; padding:16px 0;}
.setting-wrap .time-area .title {font-size:14px; font-weight:500; color:var(--color-gray-900); letter-spacing:-.02em;} 
.setting-wrap .time-box {width:50%;}
.setting-wrap .time-input {margin-top:5px;}
.setting-wrap .time-input input {display:block; width:100%; padding:9px 0; font-size:18px; line-height:21px; color:var(--color-gray-700); letter-spacing:-.02em; border:none; background:#FFF url(/html/images/sub/time_arrow.svg) no-repeat center right/24px auto; cursor:pointer;}
.setting-wrap .time-box:has(.active) .title {color:var(--color-gray-700);}
.setting-wrap .time-input input.active {color:var(--color-gray-500); background-image:url(/html/images/sub/time_arrow_active.svg);}
.layer-select-time .selected-time {padding:9px 0; font-size:22px; font-weight:600; color:var(--color-primary); letter-spacing:-.0194em; text-align:center; background:var(--color-gray-100); border-radius:8px;}
.layer-select-time {position:fixed; bottom:0; left:0; width:100%; padding:16px 16px 40px; background:#fff; box-shadow:0px 3px 10px 0px rgba(0, 0, 0, 0.1); z-index:10; display:none;}
.layer-select-time.active {display:block !important;}
.layer-select-time .time-picker-area {position:relative; width:100%; margin-top:32px; display:flex; align-items:center; justify-content:center; gap:24px;}
.layer-select-time .swiper {display:block; width:46px; height:126px; margin:0;}
.layer-select-time .swiper-slide {display:flex; justify-content:center; align-items:center; height:42px !important; line-height:42px !important; font-size:18px; font-weight:500; color:var(--color-gray-600); letter-spacing:-.0002em; opacity:0.6; cursor:pointer;}
.layer-select-time .swiper-slide-active {opacity:1; color:var(--color-gray-900); border-top:1px solid rgba(194, 196, 200, 0.43); border-bottom:1px solid rgba(194, 196, 200, 0.43);}
.layer-select-time .btn-area {justify-content:center; gap:8px; margin-top:32px;}

/* 유틸리티 레이어*/
.layer-utils {position:fixed; inset:0; max-width:768px; margin:0 auto; z-index:100; display:none;}
.layer-utils .layer-area {position:absolute; border-radius:6px; background:#FFF; box-shadow:0px 1px 3px 0px rgba(0, 0, 0, 0.3), 0px 4px 8px 3px rgba(0, 0, 0, 0.15);}
.layer-utils .utils .item + .item {border-top:1px solid var(--color-gray-200);}
.layer-utils .utils .item a {display:flex; align-items:center; padding:10px 12px 12px; font-size:14px; font-weight:500; color:var(--color-gray-800); letter-spacing:-.02em;}
.layer-utils .utils .item:first-child a {padding-top:12px; padding-bottom:10px;}
.layer-utils .utils .item a:after {content:''; width:24px; height:24px; margin-left:auto; background:url(/html/images/sub/chat/icon_exit.svg) no-repeat center/contain;}
.layer-utils .utils .item.summary a:after {background-image:url(/html/images/sub/chat/icon_summary.svg);}
.layer-utils .utils .item.copy a:after {background-image:url(/html/images/sub/chat/icon_copy.svg);}
.layer-utils .utils .item.delete a:after {background-image:url(/html/images/sub/chat/icon_delete.svg);}
.layer-utils .utils .item.camera a:after {background-image:url(/html/images/sub/icon_camera.svg);}
.layer-utils .utils .item.picture a:after {background-image:url(/html/images/sub/icon_image.svg);}
.layer-utils .utils .item.thunder a:after {background-image:url(/html/images/sub/chat/icon_thunder.jpg);}
.layer-utils .utils .item.thunder.active a:after { background-image: url(/html/images/sub/chat/icon_thunder_active.jpg);}

/* 내정보 */
.info-wrap .profile-img-box {display:flex; flex-direction:column; align-items:center; gap:16px; width:auto; margin-top:60px;}
.info-wrap .profile-img-box .profile-img {width:100px; height:100px; background-image:url(/html/images/common/user.svg);}
.info-wrap .profile-img-box .open-utils:hover {color:#FFF; background-color:var(--color-primary)}
.info-wrap .form-area {margin-top:16px;}
.info-wrap .form-box .form-label {margin-bottom:12px; line-height:20px; font-size:16px; color:var(--color-gray-900);}
.info-wrap .form-box .txt {margin-top:12px;}
.info-wrap .form-box .input-box input:focus {border-color:var(--color-gray-300)}
.layer-utils.edit-profile .layer-area {top:132px; left:50%; width:116px; margin-left:-15px;}
/* Ralfy 정보 */
.riq-type {display:flex; align-items:center; gap:2px; font-size:16px; font-weight:600; color:#9A78F9; letter-spacing:-.02em;}
.riq-type:before {content:''; display:inline-block; width:24px; height:24px; background:url(/html/images/sub/icon_egg.svg) no-repeat center/contain;}
.riq-type.public:before {background-image:url(/html/images/sub/icon_public.svg)}
.riq-type.star:before {background-image:url(/html/images/sub/icon_star.svg)}
.riq-type.egg:after {content:'Egg';}
.riq-type.public:after {content:'Public';}
.riq-type.star:after {content:'Star';}
.info-wrap.ralfy .ralfy-info-area {display:flex; flex-direction:column; align-items:center;}
.info-wrap.ralfy .profile-img-box .btn-edit {position:absolute; bottom:0; right:0; width:26px; height:26px; background:url(/html/images/sub/icon_edit.svg) no-repeat center/contain;}
.info-wrap.ralfy .user-info {display:flex; align-items:center; margin-top:4px;}
.info-wrap.ralfy .user-info .rate-box {position:relative; width:71px; height:6px; margin-left:11px; background:#EEE8FF; border-radius:3px;}
.info-wrap.ralfy .user-info .rate-box .rate {position:absolute; top:0; left:0; height:6px; background:#9A78F9; border-radius:3px;}
.info-wrap.ralfy .user-info .number {margin-left:4px; font-size:11px; font-weight:500; color:#B094FF; letter-spacing:-.02em;}
.info-wrap.ralfy .ralfy-info-area .btn-default {margin-top:16px;}
.info-wrap.ralfy .form-area {margin-top:40px;}
.info-wrap.ralfy .info-area {margin-top:24px;}
.info-wrap.ralfy .title {margin-bottom:12px; line-height:17px; font-size:14px; font-weight:700; color:#0D1B34;}
.info-wrap.ralfy .ralfy-list .item {padding-top:12px; padding-bottom:11px;}
.info-wrap.ralfy .ralfy-image-list .item .img-box {border:1px solid var(--color-primary);}
.info-wrap.ralfy .ralfy-list .time-box {margin-left:auto; font-size:12px; color:#CDCDCD; letter-spacing:-.02em; text-align:right}
.info-wrap.ralfy .ralfy-list .time-box .time {display:block;}
.info-wrap.ralfy .ralfy-list .time-box .sub {display:block; margin-top:12px; font-weight:600;}
/* ralfy 정보 팝업 */
.popup-wrap.view-riq .popup-contents-wrap {align-items:center; gap:16px;}
.popup-wrap.view-riq .profile-img {width:100px; height:100px;}
.popup-wrap.view-riq .info-box .riq-type {justify-content:center;}
.popup-wrap.view-riq .info-box .riq-info {display:flex; align-items:center; margin-top:8px; line-height:20px; font-size:14px; letter-spacing:-.02em;}
.popup-wrap.view-riq .info-box .riq-info dt {font-weight:500; color:var(--color-gray-800);}
.popup-wrap.view-riq .info-box .riq-info dd {margin-left:4px; font-weight:600; color:var(--color-primary);}
.popup-wrap.view-riq .info-box .riq-info dd + dt {margin-left:8px;}
.popup-wrap.view-riq .detail {width:100%; padding:12px 20px; background:#F4F4F4; border-radius:12px;}
.popup-wrap.view-riq .detail li {display:flex; line-height:17px; font-size:14px; letter-spacing:-.02em;}
.popup-wrap.view-riq .detail li + li {margin-top:12px;}
.popup-wrap.view-riq .detail .title {width:44.28%; margin-bottom:0; font-weight:600; color:var(--color-gray-900);}
.popup-wrap.view-riq .detail .txt {width:55.72%; color:var(--color-gray-700); text-align:left;}
/* riq 구매 팝업 */
.popup-wrap.buy-riq .popup-contents-wrap {overflow:visible;}
.riq-select-wrap {position:relative;}
.riq-select-wrap input {position:absolute; width:1px; height:1px; margin:-1px; font-size:initial; clip:rect(0 0 0 0); overflow:hidden !important; appearance:none;}
.riq-select-wrap .select-area {margin-top:8px; padding:8px; background:#F4F4F4; border-radius:4px;}
.riq-select-wrap .select-area .title {display:block; line-height:14px; font-size:12px; letter-spacing:-.02em;}
.riq-select-wrap .select-area .selected {display:flex; align-items:center; gap:9px; margin-top:4px; color:#000; letter-spacing:-.02em; cursor:pointer;}
.riq-select-wrap .select-area .selected:after {content:''; display:inline-block; width:24px; height:24px; background:url(/html/images/common/selectbox_down03.svg) no-repeat center/contain;}
.riq-select-wrap.open .select-area .selected::after {transform:scaleY(-1);}
.riq-select-wrap .select-area .selected .quantity {display:flex; gap:3px; min-width:29%; font-size:16px; font-weight:600;}
.riq-select-wrap .select-area .selected .quantity .type {margin-right:auto;}
.riq-select-wrap .select-area .selected .price {margin-left:auto; font-size:18px; text-align:right;}
.riq-select-wrap .option-area {position:absolute; top:calc(100% + 4px); width:100%; background:#FFF; border-radius:6px; box-shadow:0px 1px 3px 1px rgba(0, 0, 0, 0.15), 0px 1px 2px 0px rgba(0, 0, 0, 0.3); display:none;}
.riq-select-wrap .option-ul {padding:7px 12px;}
.riq-select-wrap .option-ul li {display:flex; align-items:center; gap:9px; font-size:14px; color:var(--color-gray-900); letter-spacing:-.02em; cursor:pointer;}
.riq-select-wrap .option-ul li.selected {color:#8B5CF6;}
.riq-select-wrap .option-ul .quantity {display:flex; gap:3px; min-width:29%; padding:5px 0; line-height:24px; font-weight:700;}
.riq-select-wrap .option-ul .quantity .type {margin-right:auto;}
.riq-select-wrap .option-ul .price {margin-left:auto; text-align:right;}
/* 보안관리 */
.security-wrap .form-area {margin-top:16px;}
.security-wrap .accordion {margin-top:20px;}
.security-wrap .accordion .history li {display:flex; gap:10px;}
.security-wrap .accordion .history li + li {margin-top:6px;}
.security-wrap .accordion .history .title {flex-shrink:0; width:70px; line-height:20px; font-size:14px; color:var(--color-gray-700); letter-spacing:-.02em;}
.security-wrap .accordion .history .txt {line-height:20px; flex-grow:0; font-size:14px; font-weight:500; color:var(--color-gray-700); letter-spacing:-.02em;}
.security-wrap .accordion .history + .history {margin-top:20px;}
/* 보안관리 - 비밀번호 재설정 */
.security-wrap .sub-title-box + .form-area {margin-top:32px;}
/* 구독관리 */
.setting-wrap.subscribe .setting-area {align-items:flex-end; padding:20px 0;}
.setting-area .title-box {margin-right:auto;}
.setting-area .title-box .title {display:block; line-height:26px; font-size:20px; font-weight:600;}
.setting-area .title-box .txt {display:block; margin-top:12px; line-height:20px; font-size:12px; color:var(--color-gray-950); letter-spacing:-.02em;}
/* 앱 버전 정보 */
.app-info-wrap {padding-top:32px;}
.app-info-wrap .version-area {display:flex; gap:29px; align-items:center;}
.app-info-wrap .round-img {width:120px; height:120px;}
.app-info-wrap .title {line-height:26px; font-size:20px; font-weight:600; letter-spacing:-.02em; color:var(--color-gray-950);}
.app-info-wrap .version {margin-top:12px;}
.app-info-wrap .txt {display:block; line-height:20px; font-size:14px; letter-spacing:-.02em; color:var(--color-gray-950);}
.app-info-wrap .txt + .txt {margin-top:4px;}
.app-info-wrap .btn-area {margin-top:32px;}
/* 업데이트 안내 */
.update-wrap .faq-wrap {margin-top:32px;}
.update-wrap .faq-wrap .f-box {padding-top:14px; padding-bottom:14px;}

/* ================= 구독 ================== */ 
/* 메인 */
.subscribe-list {display:flex; flex-direction:column; gap:16px;}
.subscribe-item {position:relative; border:1px solid var(--color-gray-200); border-radius:8px;}
.subscribe-item.bd-purple {border-color:#9A78F9;}
.subscribe-item.recommend {margin-top:24px; border-color:#9A78F9;}
.subscribe-item.recommend:before {content:'Ralfy 추천!'; position:absolute; left:50%; top:-24px; width:calc(100% + 2px); padding:6px 0 10px; display:block; font-size:12px; font-weight:700; text-align:center; color:#FFF; background:#9A78F9; border-radius:8px 8px 0 0; transform:translateX(-50%);}
.subscribe-item.recommend .item-inner {position:relative; border-radius:8px; background:#FFF; z-index:1;}
.subscribe-item.lock:after {content:''; position:absolute; inset:0; background:rgba(57, 57, 57, 0.7) url(/html/images/sub/subscribe/icon_lock.svg) no-repeat center; border-radius:8px;}
.subscribe-item .item-inner {position:relative; padding:16px;}
.subscribe-item .title-box {display:flex; align-items:center;}
.subscribe-item .title {font-size:18px; font-weight:700; color:var(--color-gray-800); letter-spacing:-.02em;}
.subscribe-item .tag {display:inline-block; margin-left:10px; padding:2px 4px; font-size:12px; font-weight:500; color:#377E36; background:#E0F0E4; border-radius:4px;}
.subscribe-item .sub-title {margin-top:8px; line-height:22px; font-size:16px; color:var(--color-gray-800); letter-spacing:-.02em;}
.subscribe-item .desc-list {margin-top:12px;}
.subscribe-item .desc-list li {font-size:12px; color:var(--color-gray-700); letter-spacing:-.02em;}
.subscribe-item .desc-list li:before {content:''; display:inline-block; width:24px; height:24px; margin-right:4px; background:url(/html/images/sub/subscribe/list_check_gray.svg) no-repeat center/contain; vertical-align:-7px;}
.subscribe-item .desc-list.check-purple li:before {background-image:url(/html/images/sub/subscribe/list_check_purple.svg)}
.subscribe-item .flex-box {margin-top:12px; align-items:center;}
.subscribe-item .price {font-size:16px; font-weight:700; color:var(--color-gray-800); letter-spacing:-.02em;}
.subscribe-item .btn-default {margin-left:auto;}
.subscribe-item .txt {display:block; font-size:12px; color:var(--color-gray-700); letter-spacing:-.02em;}
.subscribe-item .item-inner .txt {margin-top:8px; text-align:right;}
.subscribe-item .payment-inner {position:relative; padding:24px 16px 12px;}
.subscribe-item .payment-inner:before {content:''; position:absolute; top:0; left:50%; width:calc(100% - 32px); height:1px; background:var(--color-gray-200); transform:translateX(-50%);}
.subscribe-item .payment-title {display:block; font-size:16px; font-weight:500; color:var(--color-gray-900); letter-spacing:-.02em;}
.subscribe-item .payment-type {display:inline-block; margin-top:12px; padding:8px 12px; font-size:14px; color:var(--color-gray-700); border:1px solid var(--color-gray-200); border-radius:6px;}
.subscribe-item .payment-type:before {content:''; display:inline-block; width:24px; height:24px; margin-right:6px; background:var(--color-gray-200) url(/html/images/sub/subscribe/icon_payment.svg) no-repeat center/22px auto; vertical-align:-6px; border-radius:50%;}
.subscribe-item .payment-type.kakao:before {background-image:url(/html/images/sub/subscribe/icon_kakao.svg); background-size:contain;}
.subscribe-item .payment-inner .flex-box {justify-content:space-between;}
/* 구독 상태 관리 */
.subscribe-wrap .accordion {margin-top:20px;}
.subscribe-wrap .accordion [class^=icon-] {display:inline-block; width:24px; height:24px; margin-right:4px; background:url(/html/images/sub/subscribe/icon_payment.svg) no-repeat center/contain; vertical-align:-7px;}
.subscribe-wrap .accordion .icon-payment {background-image:url(/html/images/sub/subscribe/icon_payment.svg)}
.subscribe-wrap .accordion .icon-cancel {background-image:url(/html/images/sub/subscribe/icon_cancel_membership.svg);}
.subscribe-wrap .accordion .icon-recovery {background-image:url(/html/images/sub/subscribe/icon_recovery.svg);}
.subscribe-wrap .accordion .icon-linked {background-image:url(/html/images/sub/subscribe/icon_linked.svg);}
.subscribe-wrap .accordion .icon-terms {background-image:url(/html/images/sub/subscribe/icon_terms.svg);}
.subscribe-wrap .accordion .icon-refund {background-image:url(/html/images/sub/subscribe/icon_refund.svg);}
.subscribe-wrap .accordion .accordion-body {max-height:622px; color:var(--color-gray-900); overflow-y:auto;}
.subscribe-wrap .accordion .accordion-body:has(.terms) {padding-top:0; padding-bottom:0;}
.subscribe-wrap .accordion .flex-box {justify-content:space-between; align-items:center;}
.subscribe-wrap .accordion .txt-box {padding:33px 0;}
.subscribe-wrap .accordion .txt-box strong {line-height:22px; font-size:16px; font-weight:500;}
/* 미구독 */
.subscribe-wrap .status-box {display:flex; flex-direction:column; align-items:center; padding:32px 0;}
.subscribe-wrap .status-box .round-img {width:100px; height:100px;}
.subscribe-wrap .status-box .title {display:block; margin-top:20px; font-size:18px; color:var(--color-gray-900); font-weight:700; text-align:center;}
.subscribe-wrap .btn-area {margin-top:32px;}

/* ================= AI Analysis ================== */ 
/* 로딩페이지 */
#wrapper:has(.loading-area) #header,
#wrapper:has(.loading-area) .fnb {display:none;}
.loading-area {position:fixed; inset:0; width:100%; height:100dvh; padding:0 25px 39px; display:flex; flex-direction:column; justify-content:center; align-items:center; background:#FFF;}
.loading-area .logo {height:44px;}
.loading-area .logo img {height:100%; vertical-align:top;}
.loading-area .loading-box {width:100%; max-width:768px; margin-top:8px;}
.loading-area .title {display:block; margin-top:24px; line-height:26px; font-size:18px; font-weight:600; color:var(--color-gray-950); text-align:center;}
.loading-area .txt {margin-top:12px; line-height:1.5em; font-size:16px; color:var(--color-gray-900); text-align:center;}
.loading-box .progress {position:relative; width:100%; height:6px; margin-top:8px; background-color:#EEE8FF; border-radius:3px;}
.loading-box .progress-gage {position:absolute; top:0; left:0; width:10px; height:6px; background-color:#9A78F9; border-radius:3px; animation-name:progress; animation-duration:5s; animation-iteration-count:infinite;}
.loading-box .dot-typing {display:flex; align-items:center; justify-content:center; padding-top:5px;}
.loading-box .dot-typing .dot {position:relative; left:-9999px; width:10px; height:10px; color:#EEE8FF; border-radius:5px; background-color:#EEE8FF; box-shadow:9983px 0 0 0 #EEE8FF, 9999px 0 0 0 #D0BFFF, 10015px 0 0 0 #B094FF; animation:dot-typing 1.5s infinite linear;}
@keyframes progress{
    0%   {width:0%;}
    25%  {width:10%;}
    50%  {width:40%;}
    75%  {width:50%;}
    100% {width:100%;}
}
@keyframes dot-typing {
    0% {box-shadow:9983px 0 0 0 #EEE8FF, 9999px 0 0 0 #D0BFFF, 10015px 0 0 0 #B094FF;}
    16.667% {box-shadow: 9983px -5px 0 0 #EEE8FF, 9999px 0 0 0 #D0BFFF, 10015px 0 0 0 #B094FF;}
    33.333% {box-shadow: 9983px 0 0 0 #EEE8FF, 9999px 0 0 0 #D0BFFF, 10015px 0 0 0 #B094FF;}
    50% {box-shadow: 9983px 0 0 0 #EEE8FF, 9999px -5px 0 0 #D0BFFF, 10015px 0 0 0 #B094FF;}
    66.667% {box-shadow: 9983px 0 0 0 #EEE8FF, 9999px 0 0 0 #D0BFFF, 10015px 0 0 0 #B094FF;}
    83.333% {box-shadow: 9983px 0 0 0 #EEE8FF, 9999px 0 0 0 #D0BFFF, 10015px -5px 0 0 #B094FF;}
    100% {box-shadow: 9983px 0 0 0 #EEE8FF, 9999px 0 0 0 #D0BFFF, 10015px 0 0 0 #B094FF;}
}
/* empty */
.empty {align-items:center; justify-content:center; padding-bottom:148px;}
.empty .round-img {width:100px; height:100px;}
.empty .sub-conts-tit {margin-top:20px; color:var(--color-gray-600); text-align:center;}
/* 질문 */
.analysis-wrap .question-progress {display:flex; counter-reset:item 0; padding:8px; overflow-y:hidden; overflow-x:auto;}
.analysis-wrap .question-progress .box {flex:1 0 25%; padding:8px;}
.analysis-wrap .question-progress .box:before {counter-increment:item 1; content:counter(item); display:block; width:24px; height:24px; margin:0 auto; line-height:24px; font-family:Inter; font-size:10px; font-weight:600; text-align:center; color:var(--color-gray-500); background:var(--color-gray-200); border-radius:50%;}
.analysis-wrap .question-progress .box .txt {display:block; margin-top:12px; font-size:12px; font-weight:500; color:#8F9098; text-align:center;}
.analysis-wrap .question-progress .box.on:before {content:''; background:var(--color-primary) url(/html/images/common/check_white.svg) no-repeat center/10px auto;}
.analysis-wrap .question-progress .box.on .txt {font-weight:700; color:var(--color-primary);}
.analysis-wrap .question-area {margin-top:20px;}
.analysis-wrap .question-area .question-title {font-size: 18px; font-weight:700; color:var(--color-gray-900);}
.analysis-wrap .question-area .question-list {margin-top:16px;}
.analysis-wrap .question-area .item {position:relative; max-height:244px; padding:13px 11px; border:1px solid var(--color-gray-300); border-radius:8px; overflow-y:auto;}
.analysis-wrap .question-area .item + .item {margin-top:12px;}
.analysis-wrap .question-area .item .title {display:block; line-height:20px; font-size:14px; font-weight:400; color:var(--color-gray-800);}
.analysis-wrap .question-area .item input[type=radio] {position:absolute; width:0px; height:x; appearance:none;}
.analysis-wrap .question-area .item input[type=radio] + label {position:absolute; top:0; left:0; right:0; bottom:0; z-index:1; width:100%; height:100%; box-sizing:border-box;}
.analysis-wrap .question-area .item:has(input[type=radio]:checked) {border-color:var(--color-primary);}
.analysis-wrap .question-area .item .multiple-area {margin-top:11px; padding-left:16px;}
.analysis-wrap .question-area .item .multiple-area .sub-checkbox {padding-left:20px; margin-top:12px;}
.analysis-wrap .question-area .item .multiple-area .sub-checkbox .checkbox-wrap + .checkbox-wrap {margin-top:12px;}
/* 분석결과 */
.analysis-share.layer-utils .layer-area {top:42px; right:13px; box-shadow:0px 3px 10px 0px rgba(0, 0, 0, 0.1);}
.analysis-share.layer-utils .utils .item a {padding:12px 26px;}
.analysis-share.layer-utils .utils .item a:after {display:none;}

.sub-conts-wrap:has(.analysis-wrap.result) {background:#F8F8F8}
.analysis-wrap.result {padding-top:20px; padding-bottom:26px;}
.analysis-wrap .title {line-height:21px; font-size:18px; font-weight:700; color:var(--color-primary);}
.analysis-wrap .title-sm {line-height:18px; font-size:14px; font-weight:600; color:var(--color-gray-800); letter-spacing:-.5px;}
.analysis-wrap .summary-area {padding:16px; background:var(--color-primary); border-radius:8px;}
.analysis-wrap .summary-area .title-sm {font-weight:700; color:#EEE8FF; letter-spacing:0;}
.analysis-wrap .summary-area .title {display:block; margin-top:12px; color:#FFF;}
.analysis-wrap .summary-area .desc {margin-top:6px; line-height:20px; font-size:12px; color:#EEE8FF;}
.analysis-wrap .summary-area + .item-area {margin-top:20px;}
.analysis-wrap .item-area + .item-area {margin-top:16px;}
.analysis-wrap .item-area .last-result + .flex-box {margin-top:20px;}
.analysis-wrap .item-area {padding:16px; background:#FFF; border-radius:8px; box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.1);}
.analysis-wrap .item-area.recommend {padding:12px;}
.analysis-wrap .item-area .desc {margin-top:12px; line-height:14px; font-size:12px; color:var(--color-gray-600);}
.analysis-wrap .item-area .flex-box {margin-top:4px;}
.analysis-wrap .rti-types {display:flex; flex-wrap:wrap; gap:8px 4px; margin-top:12px;}
.analysis-wrap .rti-types .type {padding:5px 8px; font-size:14px; font-weight:500; letter-spacing:-.5px; color:var(--color-primary); background:#F6F2FF; border-radius:8px;}
.analysis-wrap .rti-types.red .type {color:#F65C5F; background-color:#FFF5F5;}
.analysis-wrap .btn-share {display:inline-block; width:24px; height:24px; margin-left:auto; background:url(/html/images/sub/analysis/icon_share.svg) no-repeat center/16px auto;}
.analysis-wrap .btn-area {margin-top:26px; flex-direction:column; gap:12px;}
.analysis-wrap .card {margin-top:26px; padding:12px; border:1px solid var(--color-gray-200); border-radius:8px;}
.analysis-wrap .card + .card {margin-top:12px;}
.analysis-wrap .card .title-box {display:flex; gap:10px; align-items:center;}
.analysis-wrap .card .card-title {font-size:20px; font-weight:500; color:var(--color-gray-950);}
.analysis-wrap .card .card-title::before {content:''; display:inline-block; width:6px; height:6px; margin-right:10px; background:var(--color-primary); border-radius:50%; vertical-align:4px;}
.analysis-wrap .card .badge {padding:2px 4px; line-height:16px; font-family:'Inter'; font-size:12px; font-weight:500; color:#377E36; background:#E0F0E4; border-radius:4px;}
.analysis-wrap .card .badge.minus {color:#B12F30; background-color:#FEECEB;}
.analysis-wrap .card .list {margin-top:9px;}
.analysis-wrap .card .list li {line-height:18px; font-size:14px; color:var(--color-gray-600); letter-spacing:-.5px;}
.analysis-wrap .card .list li::before {content:'•'; display:inline-block; padding:0 7px; font-size:14px;}
.analysis-wrap .chart-area {position:relative; margin-top:20px;}
.analysis-wrap .chart-area .chart.disposition {width:196px; height:196px; margin:0 auto;}
.analysis-wrap .chart-area .chart-desc {position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);}
.analysis-wrap .chart-area .chart-desc .percent {display:block; line-height:29px; font-size:24px; font-weight:500; color:var(--color-primary); text-align:center;}
.analysis-wrap .chart-area .chart-desc .label {display:block; margin-top:8px; line-height:12px; font-size:10px; color:var(--color-gray-600); text-align:center;}
.analysis-wrap .chart-area .chart.compare {width:100%; height:232px; border-top:1px dashed #9A78F9;}
.analysis-wrap .filter-box {display:flex; align-items:center; margin-top:24px;}
.analysis-wrap .filter-box .filter-title {font-size:16px; font-weight:600; color:var(--color-gray-800);}
.analysis-wrap .filter-box .custom-select-wrap {min-width:60px; margin-left:auto;}
.analysis-wrap .filter-box .custom-select-wrap .option {height:24px; padding-left:0; padding-right:34px; line-height:24px; border:none;}
.analysis-wrap .filter-box .custom-select-wrap .option::after {right:0; background-image:url(/html/images/sub/analysis/filter_arrow_down.svg)}
.analysis-wrap .filter-box .custom-select-wrap.open .option::after {background-image:url(/html/images/sub/analysis/filter_arrow_up.svg); transform:translate(0,-50%);}
.analysis-wrap .filter-box .custom-select-wrap .option-area {right:7px; width:81px; border:none; box-shadow:0px 1px 3px 1px rgba(0, 0, 0, 0.15), 0px 1px 2px 0px rgba(0, 0, 0, 0.3);}
.analysis-wrap .filter-box .custom-select-wrap .option-ul li {padding-top:5px; padding-bottom:5px; text-align:center;}
.analysis-wrap .filter-box .custom-select-wrap .option-ul li.selected {color:var(--color-gray-400);}
#wrapper:has(.analysis-wrap.main) {background:#F8F8F8;}
.analysis-wrap[class*=main] {display:flex; flex-direction:column; height:calc(100dvh - 128px); padding-top:20px; padding-bottom:26px;}
.analysis-wrap.main .summary-area .desc {display:-webkit-box; padding-right:40px; overflow:hidden; text-overflow:ellipsis; -webkit-line-clamp:2; -webkit-box-orient: vertical;}
.analysis-wrap.main .summary-area .btn-default {margin-top:20px;}
.analysis-wrap.main .item-area {position:relative; overflow:hidden}
.analysis-wrap.main .item-area:after {content:''; position:absolute; bottom:0; left:0; width:100%; height:218px; background:linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 75%);}
.analysis-wrap.main .btn-view-result {position:absolute; left:0; bottom:20px; display:inline-flex; align-items:center; justify-content:center; gap:6px; width:100%; font-size:14px; font-weight:500; color:var(--color-gray-600); letter-spacing:-.5px; z-index:1;}
.analysis-wrap.main .btn-view-result:after {content:''; display:block; width:24px; height:24px; background:url(/html/images/sub/analysis/icon_view.svg) no-repeat center/contain;}
.analysis-wrap .info-area  {display:flex; flex-direction:column; align-items:center; justify-content:center; height:100%;}
.analysis-wrap .info-area .round-img {width:100px; height:100px;}
.analysis-wrap .info-area .title {display:block; margin-top:20px; color:var(--color-gray-900); text-align:center;}
.analysis-wrap .info-area .desc {margin-top:8px; padding:0 50px; line-height:17px; font-size:12px; color:var(--color-gray-800); text-align:center;}
.analysis-wrap .info-area .btn-default {margin-top:40px;}
.analysis-wrap.main-type .item-area .desc {display:-webkit-box; overflow:hidden; text-overflow:ellipsis; -webkit-line-clamp:3; -webkit-box-orient: vertical;}