@charset "utf-8";

/*
*--------------------------------------------*
|             Responsive Variable            |
*--------------------------------------------*
*/
:root {
    --pd-text-base: 16px;
    --pd-container-padding: clamp(16px, 3.125vw, 60px);

    --transition-speed: 0.25s;
    --transition-ease: ease-in-out; 
    --transition-linear: linear; 

    --pd-bg-base: #0e0e0e;

    --white: #ffffff;
    --gray: #d2d2d2;
    --green: #4af19d;
    --orange: #ff6b00;
    --blue: #00bbff;
    --primary-500: #e50814;

    /*--pd-bdrs-base: 0.2vw;*/
    --pd-bdrs-base: 16px;
    --pd-bdrs-base4: 4px;
    --pd-bdrs-base6: 6px;
    --pd-bdrs-base8: 8px;
    --pd-bdrs-base10: 10px;
    --pd-bdrs-base12: 12px;
    --pd-bdrs-base25: 25px;

    /* 학습창 버튼 */
    --btn-size: clamp(18.7px, 2.292vw, 44px); 

    /* inner */
    --pd-inner: 2000px;
}

html, body {
    position: relative;
    font-size: var(--pd-text-base);
    /*scrollbar-track-color: transparent;*/
}
header, footer{ position: relative; z-index: 2; }
/*::-webkit-scrollbar {*/
/*    width: 10px;*/
/*    height: 10px;*/
/*}*/
/*::-webkit-scrollbar-track {*/
/*    background-color: rgba(0,0,0,0);*/
/*}*/
/*::-webkit-scrollbar-thumb {*/
/*    background-color: rgba(0, 0, 0, 1);*/
/*    border-radius: 10px;*/
/*}*/

/* 4:3 비율 이하 (모바일/태블릿 세로 등) */
@media screen and (min-width: 0) and (max-width:480px) and (max-aspect-ratio:4/3) { :root { --pd-text-base: max(14px, 1.5vw); } }
@media screen and (min-width: 481px) and (max-width:840px) { :root { --pd-text-base: max(14px, 1vw); } }
@media screen and (min-width: 841px) and (max-width:1280px) { :root { --pd-text-base: max(14px, 0.75vw); } }
@media screen and (min-width: 1281px) and (max-width:1600px) { :root { --pd-text-base: 0.75vw; --pd-bdrs-base: 0.2vw } }
@media screen and (min-width: 1601px) and (max-width:1920px) { :root { --pd-text-base: 0.75vw; --pd-bdrs-base: 0.2vw } }
@media screen and (min-width: 1921px) and (max-aspect-ratio:4/3) { :root { --pd-text-base: 12px; --pd-bdrs-base: 0.2vw} }

/*
*--------------------------------------------*
|                   Common                   |
*--------------------------------------------*
*/
* { margin: 0; padding: 0; font-family: 'Spoqa Han Sans'; box-sizing: border-box;}
.common-loading { display: none; z-index: 99999; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5);}
.common-loading > div { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%;}
.common-loading-bar{ width: 50px; height: 50px; }
.common-loading-bar:after{ content: ""; background-image: url(https://assets.nflxext.com/en_us/pages/wiplayer/site-spinner.png); background-repeat: no-repeat; background-position-x: 50%; background-position-y: 50%; -moz-background-size: 100%; -o-background-size: 100%; background-size: 100%; position: absolute; margin: -6px; width: inherit; height: inherit; animation: nfLoader-spin 1.1s linear infinite,1!important; -webkit-animation: nfLoader-spin 1.1s linear infinite,1!important; }
@keyframes nfLoader-spin {
  100% {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes nfLoader-spin {
  100% {
    -webkit-transform: rotate(360deg);
  }
}
#headerGnb nav li ol{ display: none; }
body{ position: relative; color: var(--white); background-color: var(--pd-bg-base);}
.for-pc{ display: block !important; }
.for-mo{ display: none !important; }
.for-tb{ display: none !important; }
.common-bold{ font-weight: bold; }
/*.body-container{ overflow: hidden;}*/
/*.common-padding-left{ padding-left: 60px !important; }*/
.sub-section{ padding: 20px 60px; }
.common-init-pg .sub-section{ padding-top: unset; padding-bottom: unset; margin: 40px 0; }
.common-sub-section-wrap .swiper-wrapper, .common-sub-section-wrap .common-swiper-wrap{ min-height: 389px;}
.ctgr-nm{ color: var(--green) !important; }
.ctgr-nm.series{ color: var(--orange) !important; }
.ctgr-nm.short{ color: var(--blue) !important; }
.subscribed{ color: #bcbcbc !important; position: relative; }
.subscribed::before{ position: absolute; content: ""; width: 18px; height: 18px; top: 50%; left: -22px; transform: translateY(-50%); background: url("/images/common/icons/common-icon-subscribed-chk.svg") no-repeat center center / cover; flex-shrink: 0; }
.btn-sub-default.subscribed::before, .brand-btn-wrap .subscribed::before{ left: calc(50% - 43px); }
.subscribe{ color: #fff !important; }
.btn-red{ background-color: #e50814 !important; color: var(--white); }
*::placeholder { color: #bdbcbb; font-size: 16px; font-weight: 500; }
.k-input-md .k-input-inner::placeholder { color: #bdbcbb;  font-size: 14px; font-weight: normal; }
input[type=text]{ color: var(--white); }
input:disabled, input[readonly]{ background-color: #ffffff0c !important; color: #808080;}
input[type=text]:focus, input[type=password]:focus{ border: 1px solid #e50814 !important;}
input[type=text].input-search:focus{ border: 1px solid #fff !important;}
.txt-red{ color: #e50814; }
.txt-blue{ color: #00bbff; }
.txt-green{ color: #00f798; }
.icon-chevron-right{ display: inline-block; width: 8px; height: 8px; border-top: 2px solid #999; border-right: 2px solid #999; transform: rotate(45deg); margin-left: 4px; vertical-align: middle; }
img { max-width: 100%;}
input[type=number] { -moz-appearance: textfield; }
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

.size-b { width: 270px; height: 54px; font-size: 18px; font-weight: bold; line-height: 1.33;}
.btn-default.size-b { display: inline-flex; justify-content: center; align-items: center; height: 54px; font-size: 18px; font-weight: bold; line-height: 1.33;}

textarea.k-textarea { width: 100%; padding: 20px; border-radius: 8px; border: solid 1px #414141; background-color: rgba(255, 255, 255, 0.05); color: #fff;}

.input-icon-box {}
.icon-naver { width: 24px; height: 24px; background: url("../images/sub/icon-naver.png") no-repeat center; background-size: contain;}
.icon-kakao { width: 24px; height: 24px; background: url("../images/sub/icon-kakao.png") no-repeat center; background-size: contain;}

button { transition: background-color .3s ease-in-out;}
button:focus { outline: 2px solid #ff0000;}
/*[class*="btn-"]:hover { background-color: #414141;}*/
.btn-wrap:hover { background-color: transparent;}
[class*="btn-"]:focus { outline: 1px solid #ff0000 !important;}
.btn-default{ display: inline-flex; align-items: center; justify-content: center; height: 54px; line-height: 1; padding: 0 10px; color: var(--white); font-size: 16px; font-weight: 500; letter-spacing: normal; text-align: center; box-sizing: border-box; background-color: rgba(255, 255, 255, 0.2); border-radius: var(--pd-bdrs-base4); }
.btn-sub-default{ width: 100%; height: 40px; line-height: 40px; color: #bcbcbc; font-size: 15px; font-weight: 500; letter-spacing: normal; border-radius: var(--pd-bdrs-base); background-color: rgba(255, 255, 255, 0.15); }
.btn-border{ padding: 0 16px; height: 40px; line-height: normal; color: var(--white); font-size: 15px; font-weight: normal; border-radius: var(--pd-bdrs-base4); border: 1px solid #ffffff80; }
.btn-border:hover { border: 1px solid #ffffff; background-color: transparent;}
.btn-underline{ flex-shrink: 0; color: var(--white); font-size: 16px; font-weight: 500; line-height: 1.3; letter-spacing: normal; text-decoration: underline; }
.btn-alert{ display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; width: auto; height: 34.3px; padding: 0 10px; font-size: 13px; font-weight: normal; letter-spacing: normal;  border-radius: 4px; border: solid 1px rgba(255, 255, 255, 0.5); }
.btn-alert:after { content: ''; display: inline-flex; width: 18.1px; height: 18.1px; background: url("/images/common/icons/common-icon-alert.png") no-repeat 0 0; background-size: contain;}
.btn-alert.download:after { content: ''; display: inline-flex; width: 18.1px; height: 18.1px; background: url("/images/common/icons/icon-download.png") no-repeat 0 0; background-size: contain;}
.btn-go-series{ padding-left: 40px; color: var(--white); font-size: 17px; font-weight: 500; letter-spacing: normal; background: url("/images/common/icons/icon-pop-prev.png") no-repeat center left 0 / contain; }
.btn-disabled { background-color: rgba(255, 255, 255, 0.05); color: rgba(255, 255, 255, 0.5);}

.btn-search:hover,
.btn-default:hover,
.filter-container .btn-filer-search:hover { background-color: #414141;}
.btn-subscribe:hover { background-color: #c11119 !important;}


.alert-window .btn-login.btn-s { width: 140px;}
.alert-window .btn-wrap { margin-top: 24px;}

.visually-hidden{ position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; clip: rect(0 0 0 0); clip-path: inset(100%); overflow: hidden; white-space: nowrap; }
.check-box { display: inline-flex;}
.check-box label{ display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: normal; letter-spacing: normal; text-align: left; cursor: pointer; }
.check-box label .check{ flex-shrink: 0; position: relative; display: inline-block; width: 16px; height: 16px; border: 1px solid #ffffff59; border-radius: 2px; }
.check-box input[type="checkbox"]:checked + label .check{ display: inline-block; background-color: #fff; }
.check-box input[type="checkbox"]:checked + label .check::after{ content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 11px; height: 8px; background: url("/images/common/common-sprites-login.png") no-repeat -46px -10px; }
.check-box label span { color: #fff;}

.radio-box-wrap{ display: flex; flex-direction: column; align-items: flex-start; }
.radio-box-wrap .radio-box{ display: flex; align-items: center; }
.radio-box-wrap label,
.radio-box label { display: flex; align-items: center; gap: 8px; color: var(--white); font-size: 16px; font-weight: normal; line-height: normal; letter-spacing: normal; text-align: left; cursor: pointer; }
.radio-box-wrap input[type="radio"] + label .radio,
.radio-box input[type="radio"] + label .radio { width: 18px; height: 18px; border-radius: 100%; border: 1px solid #ffffff59; }
.radio-box-wrap input[type="radio"]:checked + label .radio,
.radio-box input[type="radio"]:checked + label .radio { position: relative; background-color: #fff; border: 1px solid #fff; }
.radio-box-wrap input[type="radio"]:checked + label .radio::before,
.radio-box input[type="radio"]:checked + label .radio::before { content: ""; position: absolute; width: 10px; height: 10px; top: 50%; left: 50%; transform: translate(-50%, -50%); border: 1px solid #fff; border-radius: 100%; background-color: #000000e6; }

textarea{ resize: none;}
.common-textarea{ padding: 20px; color: #fff; font-size: 16px; font-weight: normal; line-height: 1.6; letter-spacing: -0.32px; text-align: left; border-radius: var(--pd-bdrs-base8); border: solid 1px #414141; background-color: rgba(255, 255, 255, 0.05); box-sizing: border-box !important; resize: none; }
.common-textarea:focus{ border: 1px solid #e50814;  }
.common-textarea::placeholder{ color: #bcbcbc;}
.common-textarea.join { height: 130px; background-color: rgba(0, 0, 0, 0.5);}
.join-category-wrap .dropdown.dropdown-style2 .label { font-size: 14px;}

.join-category-wrap .dropdown .dropdown-btn { background-color: rgba(0, 0, 0, 0.5); font-size: 14px;}

.common-sub-section-wrap{ min-height: calc(100vh - 202px); /*margin-top: 68px !important;*/ margin: 0 auto; max-width: var(--pd-inner);}
.common-tit-wrap { display: flex; justify-content: flex-start; align-items: center; width: 100%; padding-top: 16px; margin-bottom: 24px; font-size: 1.4vw; }
.common-tit-wrap .common-tit { margin-bottom: 0; font-size: 26.9px; font-weight: 500; line-height: 0.89; letter-spacing: normal; color: #e5e5e5;}
.contents-store-wrap .common-tit-wrap{ margin-top: 25px;}
.common-list-wrap{ display: flex; align-items: flex-start; /*grid-template-columns: repeat(auto-fill, minmax(288px, 1fr));*/ flex-wrap: wrap; width: 100%; gap: 24px; /*padding-right: 60px;*/ }
.common-tit-wrap .btn-more{ display: inline-flex; align-items: center; color: #54b9c5; font-size: 0.9vw; font-weight: normal; line-height: normal; padding: 0; background: none; border: none; cursor: pointer; }
/* "더보기" 텍스트 초기 숨김 */
.common-tit-wrap .btn-more .txt-more{ max-width: 0; line-height: 20px; opacity: 0; white-space: nowrap; overflow: hidden; transform: translateX(0); transition: max-width 0.9s ease, opacity 0.9s ease, transform 0.9s ease; }
/* chevron 아이콘 초기 숨김 */
.common-tit-wrap .btn-more .icon-chevron{ margin-left: -3px; max-width: 0; opacity: 0; width: 0; height: 20px; background: url('/images/common/icons/icon-chevron-more.svg') no-repeat center / cover; transform: translateX(0); transition: max-width 0.2s ease 0.1s, opacity 0.2s ease 0.1s, transform 0.2s ease 0.15s; }
/* Hover 텍스트 */
.common-tit-wrap.show-more .btn-more .txt-more{ opacity: 1; max-width: 200px; transform: translateX(20px); }
/* Hover 아이콘 */
.common-tit-wrap.show-more .btn-more .icon-chevron{ opacity: 1; max-width: 20px; width: 20px; transform: translateX(22px); }
/* swiper 에 hover 시: 아이콘만 나타남 */
.common-tit-wrap.swiper-hover .btn-more .icon-chevron { opacity: 1; max-width: 30px; width: 30px; transform: translateX(10px); }
/* swiper 에 hover 시: 텍스트 노출 안됨 */
.common-tit-wrap.swiper-hover .btn-more .txt-more { opacity: 0; max-width: 0; transform: translateX(0);}


/* Common */
.common-tit-wrap { padding-right: 10px; flex-direction: row !important; align-items: center !important; justify-content: space-between;}
.common-tit-wrap .btn-more{ padding-right: 10px; font-size: inherit; }
.common-tit-wrap .btn-more .txt-more{ max-width: unset; opacity: 1; color: #fff; transform: unset !important; transition: unset !important; }
.common-tit-wrap .btn-more .icon-chevron{ width: 20px; opacity: 1; margin-left: unset; max-width: unset; filter: brightness(0) invert(1); transform: unset !important; transition: unset !important; }
.common-tit-wrap.swiper-hover .btn-more .icon-chevron{ width: 20px; height: 20px; opacity: 1;}
.common-tit-wrap.swiper-hover .btn-more .txt-more{ max-width: unset; opacity: 1; }


/* .common-list-wrap .common-item{ width: 100%; opacity: 0; transition: opacity var(--transition-speed) var(--transition-ease); border-radius: var(--pd-bdrs-base6); background-color: #000; cursor: pointer; } */
.common-list-wrap .common-item{ display: flex; position: relative; width: 100%; border-radius: var(--pd-bdrs-base12); background-color: transparent; overflow: hidden; aspect-ratio: 16 / 9;}
/* 통합검색 */
.sub-section.search { width: 100%;}
.sub-section.search .common-list-wrap.myshelf.myshelf-watching-wrap,
.sub-section.search .tab-cont-wrap .common-list-wrap.brand-wrap { padding: 0;}
.inti-search-wrap .sub-section { padding: 0;}
/* .sub-sec-container.search .common-tit-wrap { padding-bottom: 36.5px;} */
.inti-search-wrap .tab-cont-wrap .common-list-wrap.inst-wrap { padding: 0;}
.inti-search-wrap.common-sub-section-wrap .common-list-wrap .common-item{ aspect-ratio: 16 / 9; /*콘텐츠 보관함 가로썸네일*/}
.inti-search-wrap.common-sub-section-wrap .common-list-wrap.inst-wrap .common-item{ /* padding-top: 25px; padding-bottom: 30px; */ aspect-ratio: auto; /*콘텐츠 보관함 가로썸네일*/ overflow: visible; }

/* 채널 */
/*.brand-wrap .brand-item { aspect-ratio: 429.75 / 361.91;}*/
.swiper-slide.brand-item .contents-wrap.brand-thum { overflow: hidden; position: relative; width: 100%; border-radius: 12px 12px 0 0; /*aspect-ratio: 2.35 / 1;*/ aspect-ratio: 429.75 / 182.91;}
.brand-item .brand-thum img { object-position: center center;}
.brand-item .info .info-top { position: relative;}
.brand-item .info .brand-nm img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; object-position: center;}
.brand-item .info .brand-info-detail { display: flex; flex-direction: column; gap: 10px;text-overflow: ellipsis;overflow: hidden;}
.brand-item .info .brand-info-detail h3 { overflow: hidden; width: 100%; font-size: 18px; font-weight: bold; line-height: 1.3; white-space: nowrap; text-overflow: ellipsis;}
.brand-item .info .brand-info-detail .detail { overflow: hidden; width: 100%; font-size: 14px; font-weight: normal; line-height: 1.35; color: #b3b3b3; white-space: nowrap; text-overflow: ellipsis;}
.brand-item .flex-wrap,
.prdct-brand-info .flex-wrap { display: flex; align-items: center; gap: 8px; white-space: nowrap;}
.brand-item .flex-wrap .lecture-cnt-wrap,
.prdct-brand-info .flex-wrap .lecture-cnt-wrap { font-size: 15px; line-height: 1.5; letter-spacing: -0.3px; color: #e5e5e5;}
.review-area { display: flex; align-items: center; gap: 4px; font-size: 15px; line-height: 1.5; letter-spacing: -0.3px;}
.review-area strong { font-weight: bold;}
.review-area .review-count { font-weight: normal; color: #e5e5e5;}
.brand-item .review-area:before,
.prdct-brand-info .flex-wrap .review-area:before { content: ''; display: inline-flex; width: 4px; height: 4px; margin-right: 4px; background: #808080; border-radius: 50%;}

/* 채널 디자인 바뀜 260213 */
.brand-wrap .brand-item { position: relative; padding: 10px 9px; border-radius: 10px; background-color: #232323; cursor: pointer;}
.brand-wrap .brand-item .mobile { display: none;}
.brand-wrap .brand-item .toggle-menu-wrap { position: relative; top: auto; margin-top: 0; text-align: right;}
.brand-item .info { display: flex; flex-direction: column; gap: 34px; padding: 0 20px 24px;}
.brand-item .info .info-top { display: flex; align-items: center; gap: 20px;}
.brand-item .info .brand-nm { overflow: hidden; flex-shrink: 0; position: relative; width: 74px; height: 74px; border-radius: 100%; aspect-ratio: 1 / 1;}
.brand-item .info .info-top .detail { display: none;}
.brand-item .info .brand-bottom { display: flex; flex-direction: column; gap: 30px;}
.brand-item .info .detail { overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    word-break: break-all; font-size: 15px; line-height: 1.7; -webkit-line-clamp: 2; color: #e5e5e5;}
.brand-item .info .brand-bottom .dl-group { gap: 5px;}
.brand-item .info .brand-bottom .dl-group dt { min-width: 92px;}

[class*="pdBtn-wrap-"] { display: flex; align-items: center; gap: 8px; width: 100%;}
.pdBtn-wrap-center { justify-content: center;}

button:disabled { background-color: rgba(255, 255, 255, 0.15); cursor: default;}
button:disabled:hover { background-color: rgba(255, 255, 255, 0.15) !important;}
[class*="pdBtn-"] { display: inline-flex; background-position: center; background-repeat: no-repeat;}
.pdBtn-text { font-size: 15px; line-height: 1.5; letter-spacing: -0.3px; color: #b3b3b3;}
.pdBtn-text.underline span { position: relative;}
.pdBtn-text.underline span:before { content: ''; position: absolute; bottom: 3px; left: 0; width: 100%; height: 1px; background: #bcbcbc;}
.pdBtn-icon { flex-shrink: 0; justify-content: center; align-items: center; width: 24px; height: 24px; border: 1px solid rgba(255, 255, 255, 0.5); border-radius: 50%;}
.pdBtn-icon [class*="icon-"] { width: 13.1px; height: 13.1px; background-size: contain;}
.pdBtn-purchase { justify-content: center; align-items: center; width: 100%; height: 54px; border-radius: 4px; background: #e50814; font-size: 18px; font-weight: bold; line-height: 1.33; color: #fff;}
.pdBtn-purchase:hover { background-color: #c11119 !important;}
.pdBtn-purchase:disabled,
.pdBtn-purchase:disabled:hover { background-color: rgba(255, 255, 255, 0.15);}
.pdBtn-purchase.show{ background-color: #545454;}
/*.pdBtn-hart { background-image: url("/images/common/icons/icon-menu-plus.png");}*/
/*.pdBtn-alarm { background-image: url("/images/common/icons/icon-menu-bell.png");}*/
/*.pdBtn-copy { background-image: url("/images/common/icons/icon-menu-share.png");}*/
/*.pdBtn-alert { background: url("/images/common/icons/common-icon-alert.png") no-repeat right 9px center / 18px 18px;}*/

.icon-plus { display: inline-block; width: 24px; height: 24px; background-image: url("/images/common/icons/icon-plus.svg"); background-position: center; background-repeat: no-repeat;}
.icon-bell { display: inline-block; width: 24px; height: 24px; background-image: url("/images/common/icons/icon-bell.svg"); background-position: center; background-repeat: no-repeat;}
.icon-share { display: inline-block; width: 24px; height: 24px; background-image: url("/images/common/icons/icon-share-3.svg"); background-position: center; background-repeat: no-repeat;}
.icon-urgent { display: inline-block; width: 24px; height: 24px; background-image: url("/images/common/icons/icon-urgent.svg"); background-position: center; background-repeat: no-repeat;}
.icon-del { display: inline-block; width: 24px; height: 24px; background-image: url("/images/common/icons/icon-menu-del.png"); background-position: center; background-repeat: no-repeat; background-size: 24px;}
.icon-bell-del { display: inline-block; width: 24px; height: 24px; background-image: url("/images/common/icons/icon-bell-check-filled.png"); background-position: center; background-repeat: no-repeat; background-size: 24px;}
.icon-arrow-right { flex-shrink: 0; width: 18px; height: 18px; background-image: url("/images/common/icons/icon-chevron-right.png"); background-position: center; background-repeat: no-repeat;}
.icon-chevron-up { flex-shrink: 0; width: 20px; height: 20px; background-image: url("/images/common/icons/icon-chevron-up.svg"); background-position: center; background-repeat: no-repeat;}
.icon-reload { display: inline-flex; justify-content: center; align-items: center; width: 20px; height: 20px; background-image: url("/images/common/icons/icon-reload.svg"); background-position: center; background-repeat: no-repeat;}
.icon-circle-check { display: inline-flex; justify-content: center; align-items: center; width: 24px; height: 24px; background-image: url("/images/common/icons/icon-circle-check.svg"); background-position: center; background-repeat: no-repeat;}
.icon-lock { display: inline-flex; justify-content: center; align-items: center; width: 20px; height: 20px; background-image: url("/images/common/icons/icon-lock.svg"); background-position: center; background-repeat: no-repeat;}
.icon-adjustments { display: inline-flex; justify-content: center; align-items: center; width: 20px; height: 20px; background-image: url("/images/common/icons/icon-adjustments.svg"); background-position: center; background-repeat: no-repeat;}
.icon-minus { display: inline-flex; justify-content: center; align-items: center; width: 24px; height: 24px; background-image: url("/images/common/icons/icon-minus.png"); background-position: center; background-repeat: no-repeat;}

.border-not-bottom { border-bottom: 0 !important;}

.common-list-wrap .common-item .common-cont-img{ width: 100%; height: 100%; display: block; border-radius: inherit; object-fit: cover; cursor: pointer;}
.common-list-wrap .common-item.show{ opacity: 1; }
/* 썸네일 하단 상세 */
.common-swiper-wrap .swiper-slide .info {}
.common-list-wrap .common-list-inner .info { min-height: 112px; height: 158px; padding: 16px 0 18px 0; display: flex; align-items: flex-start; gap: 12px; background-color: transparent; }
.common-list-wrap .common-list-inner .info .flex-wrap, .common-swiper-wrap .swiper-slide .info .flex-wrap{ align-items: flex-start; flex: 1; min-width: 0; display: flex; flex-direction: column;}
.common-list-wrap .common-list-inner .info .ctgr-nm, .common-swiper-wrap .swiper-slide .info .ctgr-nm{ font-size: 15px; font-weight: bold; line-height: 1.4; letter-spacing: normal; text-align: left; }
.common-list-wrap .common-list-inner .info h3, .common-swiper-wrap .swiper-slide .info h3{ margin-bottom: 4px; width: 100%; height: 47px; color: var(--white); /*font-size: 1.1112rem; line-height: 1.3rem;*/ font-size: 18px; line-height: 1.3; font-weight: bold; letter-spacing: normal; text-align: left; text-overflow: ellipsis; overflow: hidden; word-break: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; cursor: pointer;}
.common-list-wrap .common-list-inner .info .review-area, .common-swiper-wrap .swiper-slide .info .review-area{ margin-bottom: 4px; display: flex; align-items: center; gap: 3px;}
.common-list-wrap .common-list-inner .info .review-area > img, .common-swiper-wrap .swiper-slide .info .review-area > img{ width: 15px; height: 15px;}
.common-list-wrap .common-list-inner .info .review-area > .score, .common-swiper-wrap .swiper-slide .info .review-area > .score{ /*font-size: 0.9028rem;*/ font-size: 15px; font-weight: bold; line-height: 1.5; letter-spacing: -0.26px; color: #fff;}
.common-list-wrap .common-list-inner .info .review-area > .review-count, .common-swiper-wrap .swiper-slide .info .review-area > .review-count{ /*font-size: 0.9028rem;*/ font-size: 15px; font-weight: normal; line-height: 1.5; letter-spacing: -0.26px; color: #e5e5e5;}
.common-list-wrap .common-list-inner .info .instr-nm, .common-swiper-wrap .swiper-slide .info .instr-nm{ margin-bottom: 4px; /*font-size: 0.9028rem;*/ font-size: 14px; font-weight: normal; line-height: 1.35; letter-spacing: normal; color: #b3b3b3; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.price-wrap, .common-swiper-wrap .swiper-slide .info .price-wrap{ display: flex; align-items: center; gap: 5px;}
.price-wrap .price-discount, .common-swiper-wrap .swiper-slide .info .price-wrap .price-discount{ color: #fc1c49; font-size: 18px; font-weight: 500; line-height: 1.3; letter-spacing: normal;}
.price-wrap .price-amount, .common-swiper-wrap .swiper-slide .info .price-wrap .price-amount{ display: flex; align-items: center; gap: 5px; color: #fff; font-size: 18px; font-weight: bold; line-height: 1.3; letter-spacing: normal;}
.price-wrap .price-origin, .common-swiper-wrap .swiper-slide .info .price-wrap .price-origin,
.price-wrap .price-origin-wrap .price-unit, .common-swiper-wrap .swiper-slide .info .price-wrap .price-origin-wrap .price-unit{ text-decoration: line-through; font-size: 12px; color: #bcbcbc; font-weight: 500; line-height: normal; letter-spacing: normal; }
.common-list-wrap .common-list-inner .info .btn-toggle-info, .common-swiper-wrap .swiper-slide .info .btn-toggle-info{ flex-shrink: 0;}
.common-list-wrap .common-list-inner .info .hash-tag-wrap{ display: flex; height: 42px; flex-wrap: wrap; gap: 8px; justify-content: flex-start; margin-bottom: 12px; text-overflow: ellipsis; overflow: hidden; word-break: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.common-list-wrap .common-list-inner .info .hash-tag-wrap span{ color: #bcbcbc; font-size: 13px; line-height: 1.3; letter-spacing: normal; text-align: left; }
.common-list-wrap .common-list-inner .info .brand-nm, .common-swiper-wrap .swiper-slide .info .brand-nm{ display: flex; justify-content: flex-start; align-items: center; margin-right: 3px; }
.common-list-wrap .common-list-inner .info .brand-nm > img, .common-swiper-wrap .swiper-slide .info .brand-nm > img{ flex-shrink: 0; width: max(24.9px, 1.875vw); height: max(24.9px, 1.875vw); border-radius: 100%; background-color: #000; }
.common-list-wrap .common-list-inner .info .brand-nm > span, .common-swiper-wrap .swiper-slide .info .brand-nm > span{ width: 100%; color: #bcbcbc; font-size: 14px; font-weight: 500; line-height: 1.3; letter-spacing: normal; text-align: left; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
.common-list-wrap .common-list-inner .info .prdct-date,
.common-swiper-wrap .swiper-slide .info .prdct-date { font-size: 14px; line-height: 1.35; color: #b3b3b3;}
.price-wrap .price-amount p { font-weight: bold;}
.no-data{ width: 100%; text-align: center; padding: 60px 0;}
.no-data2 { padding: 60px 0;}
.common-swiper-wrap .no-data, .common-list-wrap .no-data{ padding: 4.77vw 0; font-size: 14px;}
.common-list-wrap .no-data{ grid-column: 1 / -1; /*margin-left: 4.1vw;*/ }
.common-list-wrap .no-data p,
.no-data p { font-size: 16px; line-height: 1.6; letter-spacing: -0.32px; color: #d2d2d2;}
.myshelf .common-list-wrap .no-data{ margin-left: unset; }
.brand-tab-cont > div .no-data { padding: 60px 0;}
.common-list-wrap.inst-wrap .common-list-inner .info .flex-wrap { flex-direction: row;}
.common-list-wrap .common-list-inner .info .reEduCnt { display: inline-flex; align-items: center; gap: 5px; width: auto; min-width: 111px; margin-top: 8px; padding: 4px 8px; border-radius: 4px; background-color: rgba(255, 255, 255, 0.2); font-size: 14px; line-height: 1.35; letter-spacing: normal; color: #b3b3b3;}
.common-list-wrap .common-list-inner .info .reEduCnt .reEduCnt-title { color: #b3b3b3;}
.common-list-wrap .common-list-inner .info .reEduCnt .reEduCnt-title + span { color: #fff;}

/* 썸네일 하단 상세(채널 전용), 버튼 */
.common-swiper-wrap.brand-swiper .swiper-slide .contents-wrap{ position: relative; aspect-ratio: 429.8 / 170; border-radius: clamp(8px, 0.347vw + 5.34px, 12px) clamp(8px, 0.347vw + 5.34px, 12px) 0 0;}
.common-swiper-wrap.brand-swiper .swiper-slide .contents-wrap .toggle-menu-wrap{ position: absolute; top: 10px; right: 9px;}
.common-list-wrap.brand-list-wrap .common-list-inner .info, .common-swiper-wrap.brand-swiper .swiper-slide .info{ padding: 70px 29px 25px 29px; background-color: #2a2a2a; border-radius: 0 0 clamp(8px, 0.347vw + 5.34px, 12px) clamp(8px, 0.347vw + 5.34px, 12px);}
.common-swiper-wrap.brand-swiper .swiper-slide .info{ position: relative; }
.common-swiper-wrap.brand-swiper .swiper-slide .info .brand-nm{ position: absolute; top: -21.4px; left: 24px; width: 70px; height: 70px; border-radius: 100%; margin-right: unset; display: inline-block;}
.common-swiper-wrap.brand-swiper .swiper-slide .info .brand-nm > img{ width: 100%; height: 100%;}
.common-swiper-wrap.brand-swiper .swiper-slide .info h3{ margin-bottom: 12px; }
.common-swiper-wrap.brand-swiper .swiper-slide .info .detail{ margin-bottom: 12px; color: #b3b3b3; font-size: 14px; font-weight: normal; line-height: 1.35; letter-spacing: normal; text-align: left; text-overflow: ellipsis; overflow: hidden; word-break: break-word; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;}
.common-swiper-wrap.brand-swiper .swiper-slide .info .flex-wrap{ flex-direction: row; align-items: center;}
.common-swiper-wrap.brand-swiper .swiper-slide .info .lecture-cnt-wrap{ position: relative; padding-right: 12px; margin-right: 9px; font-size: 15px; font-weight: normal; line-height: 1.5; letter-spacing: -0.3px; text-align: left; color: #e5e5e5; }
.common-swiper-wrap.brand-swiper .swiper-slide .info .lecture-cnt-wrap::after{ content: ""; position: absolute; top: 50%; right: 0; width: 4px; height: 4px; border-radius: 100%; background-color: #808080;}
.common-swiper-wrap.brand-swiper .swiper-slide .info .review-area{ margin-bottom: unset;}


/* 썸네일 하단 상세 - 버튼 */
.btn-toggle-info{ width: 36px; height: 36px; border-radius: 50%; background: url("/images/common/icons/icon-dots-vertical.svg") no-repeat center center; background-size: 24px; transition: background-color 0.2s;}
.toggle-menu-wrap { position: relative; flex-shrink: 0; margin-top: -6px;}
.btn-toggle-info:hover { background-color:  rgba(255, 255, 255, 0.15);}
.more-menu-list { z-index: 99; display: none; padding: 6px 0; position: absolute; top: calc(1.25vw + 5.4px); left: 0; width: 254px; background-color: #262626; border-radius: var(--pd-bdrs-base12); box-shadow: 0 4px 32px 0 rgba(0, 0, 0, 0.1);}
.more-menu-list.active { display: block; animation: fadeIn 0.15s ease-out;}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}
[class*="icon-"] { display: inline-flex; background-repeat: no-repeat; background-position: center center;}
.more-menu-list > li{ padding: 8px 16px; display: flex; align-items: center; gap: 12px; width: 100%; color: #fff; font-size: 14px; font-weight: normal; line-height: normal; letter-spacing: normal; text-align: left; cursor: pointer; transition: background-color 0.2s;}
.more-menu-list > li:hover{ background-color: rgba(255, 255, 255, 0.1);}
.more-menu-list .icon-list{ width: 20px; height: 20px; background-repeat: no-repeat; background-position: center center; background-size: cover;}
.icon-list.list-add{ background-image: url("/images/common/icons/icon-menu-plus.png");}
.icon-list.list-del{ background-image: url("/images/common/icons/icon-menu-del.png");}
.icon-list.list-share{ background-image: url("/images/common/icons/icon-menu-share.png");}
.icon-list.list-bell{ background-image: url("/images/common/icons/icon-menu-bell.png");}
.icon-list.list-not-bell{ background-image: url("/images/common/icons/icon-menu-not-bell.png");}
.icon-list.list-rptr{ background-image: url("/images/common/icons/icon-menu-urgent.png");}
.icon-list.list-like,
.icon-like { background-image: url("/images/common/icons/icon-menu-like.png");}
.icon-list.list-dislike,
.icon-unlike { background-image: url("/images/common/icons/icon-menu-dislike.png");}
.icon-link { background-image: url("/images/common/icons/icon-share-dtl.png");}
.icon-join-plus { width: 24px; height: 24px; background-image: url("/images/common/icon-plus_join.svg");}
.icon-acc-arrow { display: inline-flex; width: 28px; height: 28px; background: url("/images/common/icons/icon-acc-arrow.png") no-repeat center center / cover; transition: all var(--transition-speed) var(--transition-linear); }
.active > .icon-acc-arrow { transform: rotate(360deg); background: url("/images/common/icons/icon-arrow-up.png") no-repeat center center / cover; }

/* 수강완료 버튼 */
.common-list-wrap .common-btnBox { display: flex; flex-direction: row; gap: 8px; width: 100%; margin-top: 20px;}
.common-list-wrap .common-btnBox .btn-border { display: flex; justify-content: center; align-items: center; gap: 6px; width: 100%; height: 48px; font-size: 16px;}

.common-list-wrap.brand-wrap .common-item{ display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 25px 20px 15px; background: #2a2a2a; border-radius: var(--pd-bdrs-base10); box-sizing: border-box; aspect-ratio: unset; }
.common-list-wrap.brand-wrap .common-item img{aspect-ratio: 1 / 1; margin-bottom: 32px; /*width: 90%;*/ width: 6.771vw; height: 6.771vw; border-radius: 100%; cursor: pointer; }
.common-list-wrap.brand-wrap .common-item .desc-wrap{ width: calc(100% - 20px); cursor: pointer; }
.common-list-wrap.brand-wrap .common-item h3{ width: 100%; color: var(--white); font-size: 18px; font-weight: bold; line-height: 1.35; letter-spacing: normal; text-align: left; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; text-align: center; }
.common-list-wrap.brand-wrap .common-item .subscribe-info{ margin: 4px auto 8px; display: block; width: 100%; color: #bcbcbc; font-size: 16px; font-weight: normal; line-height: 1.3; letter-spacing: normal; text-align: center; }
.common-list-wrap.brand-wrap .common-item .subscribe-info strong{ font-weight: normal; }
.common-list-wrap.brand-wrap .common-item .btn-sub-default{ background-color: #333; }

/* 강사 목록 */
.common-list-wrap.inst-wrap { gap: 28px 20px;}
.common-list-wrap.inst-wrap .common-list-inner {
    display: inline-flex; flex-direction: column; justify-content: center;
    position: relative;
    width: calc((100% - (24px * 3)) / 4);
    padding: 10px 10px 25px;
    border-radius: 12px;
    background-color: #232323;
}
.common-init-pg .common-list-wrap.inst-wrap .common-list-inner {
    gap: 22px;
    padding: 22px 15px 24px;
    border-radius: 10px;
    background-color: #181818;
}
.common-list-wrap.inst-wrap .common-list-inner .toggle-menu-wrap { position: relative; top: 0; right: 0; margin-top: 0; text-align: right;}
.common-list-wrap.inst-wrap .common-item { justify-content: center; align-items: center; aspect-ratio: auto;}
.common-list-wrap.inst-wrap .common-item .common-cont-img { width: 183.9px; height: 183.9px; border-radius: 50%; aspect-ratio: auto;}
.common-list-wrap.inst-wrap .info { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 6px; padding-top: 0; height: auto; min-height: auto;}
.common-list-wrap.inst-wrap .info .common-item-title { font-size: 18px; line-height: 1.3;}
.common-list-wrap.inst-wrap .info span { overflow: hidden; width: 80%; font-size: 15px; line-height: 1.5; text-align: center; color: #e5e5e5; white-space: nowrap; text-overflow: ellipsis;}
.common-list-wrap.inst-wrap .info p { overflow: hidden; text-overflow: ellipsis; width: 100%; padding: 0 35px; font-size: 14px; line-height: 1.35; white-space: nowrap; color: #b3b3b3;}

/* 대표 강의 */
.common-row-item { display: flex; gap: 30px;}
.common-row-item .common-item-img { flex-shrink: 0; width: 461.1px; aspect-ratio: 16 / 9; cursor: pointer; }
.common-row-item .common-item-img img { width: 100%; aspect-ratio: 16 / 9; border-radius: 12px;}
.common-row-item .common-item-info { display: flex; flex-direction: column; gap: 0; width: 608.6px;}
.common-row-item .common-item-info .common-item-title { margin-bottom: 24px; font-size: 22px; font-weight: bold; line-height: 1.3; word-break: keep-all; color: #fff;}
.common-row-item .common-item-info .common-item-dec { width: 570px; margin-bottom: 24px; font-size: 16px; line-height: 1.65; color: #b3b3b3;}
.common-row-item .common-item-info .review-area { margin-bottom: 15px; font-size: 16px; line-height: 1.5;}
.common-row-item .common-item-info .common-item-instr { margin-bottom: 20px; font-size: 16px; line-height: 1.35; color: #b3b3b3;}
.common-row-item .price-wrap { gap: 10px;}
.common-row-item .price-wrap .price-discount { font-size: 24px; line-height: 1.3;}
.common-row-item .price-wrap .price-amount { gap: 8px; font-size: 24px; line-height: 1.3;}
.common-row-item .price-wrap .price-origin-wrap,
.common-row-item .price-wrap .price-origin,
.common-row-item .price-wrap .price-origin-wrap .price-unit { font-size: 16px;}

.inst-wrap .pdBtn-tech-dtl { display: none; justify-content: center; align-items: center; flex-shrink: 0; width: 70px; height: 34px; border-radius: 4px; background: #333; font-size: 12px; line-height: 2; color: #fff;}


.rlst-info{ padding-top: 74px; margin-bottom: 24px; color: var(--white); font-size: 24px; font-weight: bold; line-height: normal; letter-spacing: -0.48px; text-align: center; background: url("/images/common/icons/icon-pop-check.png") no-repeat top center; word-break: keep-all; }
.rlst-info > span{ display: block; margin-top: 10px; width: 100%; color: #d2d2d2;  font-size: 15px; font-weight: normal; line-height: 1.6; letter-spacing: -0.3px; text-align: center; } 
.rlst-info.exc-mark{ background: url("/images/common/icons/icon-pop-excmark.png") no-repeat top center; }

.file-list{ margin-top: 20px; padding: 22px 0; color: var(--white); border-top: 1px solid #404040; border-bottom: 1px solid #404040;}
.file-list > a{ display: flex; align-items: center; gap: 10px; color: var(--white) !important; }
.file-list .file-icon { display: inline-block; width: 24px; height: 24px; background: url("/images/common/icons/common-icon-download.svg") no-repeat 50% 50%; vertical-align: middle; }

.k-datepicker{ width: 140px; height: 44px; color: var(--white) !important; border-radius: var(--pd-bdrs-base4) !important; border: solid 1px #808080 !important; background-color: #0e0e0e !important; }
.k-datepicker .k-button-md.k-icon-button{ border-left: 0; background-color: #0e0e0e !important; }
.k-datepicker .k-button-md.k-icon-button .k-button-icon{ width: 24px; height: 24px; background: url("/images/common/icons/common-icon-calendar.png"); }
.k-datepicker .k-button-md.k-icon-button .k-button-icon > svg{ display: none; }
.k-input-md .k-input-inner{ font-size: 14px; font-weight: normal; letter-spacing: -0.2px; }

.icon-close { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; background: url("/images/common/icons/icon-x.svg") no-repeat center;}

.callout { display: flex; flex-direction: column; width: 100%; padding: 15px 20px; border-radius: 6px; background: #2a2a2a;}
.callout p { font-size: 14px; line-height: 1.8; letter-spacing: -0.28px; color: #d2d2d2;}

/* 검색 */
.search-input-box { display: inline-flex; align-items: center; width: 350px; height: 44px; border-radius: 4px; border: 1px solid #808080;}
.search-input-box .btn-single-search { flex-shrink: 0; width: 44px; height: 100%; padding: 0; border: 0;}
.search-input-box .input-search { width: 100%; height: auto; font-size: 15px; font-weight: normal; line-height: 1;}

.date-range-wrap span { font-size: 14px; font-weight: normal;}

/*
*--------------------------------------------*
|                   Kendo                    |
*--------------------------------------------*
*/
/* kendo grid */
.k-grid .k-grid-content{ background-color: #181818;}
.k-grid.grid-default{ width: 100%; border: none; border-top: 1px solid #3a3a3a; border-radius: 0; box-shadow: none;}
.k-grid.grid-default .k-grid-header{ border-radius: 0; background-color: #181818;}
.k-grid.grid-default .k-grid-header .k-grid-header-wrap{ border: none;}
.k-grid.grid-default .k-grid-header th.k-header{ padding: 22px 8px; line-height: 1.5; font-size: 14px; color: #e5e5e5; font-weight: 700; letter-spacing: -0.36px; border: none; border-bottom: 1px solid #eee; background: #181818;}
.k-grid.grid-default tr:hover{ background: none;}
.k-grid.grid-default tr.k-alt{ background: none;}
.k-grid.grid-default tr.k-state-selected{ background: none; box-shadow: none;}
.k-grid.grid-default tr td{ padding: 22px 8px; line-height: 1.5; font-size: 14px; color: #e5e5e5; letter-spacing: -0.28px; font-weight: normal; border: none; border-bottom: 1px solid #3a3a3a; background-color: #181818;}
.k-grid.grid-default tr td a{ color: #212529; text-decoration: none;}
.k-grid.grid-default tr td:hover a{ text-decoration: underline;}
/* .k-grid.grid-default tr td span.icon-file{ display: inline-block; width: 24px; height: 24px; vertical-align: middle; margin-left: 10px; background: url(../../images/sub/icon_file.png) no-repeat 50% 50%;} */
.k-grid.grid-default td.k-state-selected:hover, .k-grid.grid-default tr.k-state-selected:hover td, .k-grid.grid-default td.k-state-focused{ background: none; box-shadow: none;}
.k-grid-content-expander{ height: 0;}
.k-grid-norecords{ justify-content: center;}
.k-grid-norecords .no-data-cont{ display: flex; align-items: center; height: 100px;}

.k-grid.grid-default .k-grid-pager{ justify-content: center; padding: 20px 0 1px; border: none; background: #181818; box-shadow: none;}
.k-grid.grid-default .k-grid-pager .k-pager-info{ position: absolute; right: 0;}
.k-grid.grid-default .k-grid-pager .k-pager-nav{ background-repeat: no-repeat; background-position: center center; background-color: #181818;}
.k-grid.grid-default .k-grid-pager .k-pager-nav > span{ display: none;}
.k-grid.grid-default .k-grid-pager .k-pager-nav:hover{ background-color: rgba(255, 255, 255, 0.2);}
.k-grid.grid-default .k-grid-pager .k-pager-first{ background: url(/images/common/icon_page_first.svg) no-repeat center center !important;}
.k-grid.grid-default .k-grid-pager .k-pager-first.k-disabled{ background: url(/images/common/icon_page_first_disabled.svg) no-repeat center center !important;}
.k-grid.grid-default .k-grid-pager .k-pager-nav:nth-of-type(2){ background: url(/images/common/icon_page_prev.svg) no-repeat center center !important;}
.k-grid.grid-default .k-grid-pager .k-pager-nav:nth-of-type(2).k-disabled{ background: url(/images/common/icon_page_prev_disabled.svg) no-repeat center center !important;}
.k-grid.grid-default .k-grid-pager .k-pager-nav:nth-of-type(3){ background: url(/images/common/icon_page_next.svg) no-repeat center center !important;}
.k-grid.grid-default .k-grid-pager .k-pager-nav:nth-of-type(3).k-disabled{ background: url(/images/common/icon_page_next_disabled.svg) no-repeat center center !important;}
.k-grid.grid-default .k-grid-pager .k-pager-last{ background: url(/images/common/icon_page_end.svg) no-repeat center center !important;}
.k-grid.grid-default .k-grid-pager .k-pager-last.k-disabled{ background: url(/images/common/icon_page_end_disabled.svg) no-repeat center center !important;}
.k-grid.grid-default .k-pager-numbers{ gap: 8px; margin: 0 20px;}
.k-grid.grid-default .k-pager-numbers .k-button{ width: 40px; height: 40px; padding: 5px; line-height: 40px; text-align: center; font-size: 16px; color: #777; font-weight: normal; letter-spacing: normal; border-radius: 100%; border: none; box-shadow: none; box-sizing: border-box;}
.k-grid.grid-default .k-pager-numbers .k-button.k-selected{ color: #fff; font-weight: bold; background: rgba(255, 255, 255, 0.2);}
.k-grid.grid-default .k-pager-numbers .k-button.k-selected:hover{ color: #fff; font-weight: bold; background: rgba(255, 255, 255, 0.2);}

/* grid template */
.k-grid.grid-template{ border: none; border-radius: 0; box-shadow: none; background: transparent;}
.k-grid.grid-template .k-grid-header{ display: none;}
.k-grid.grid-template tr td{ border: none;}
.k-grid.grid-template tr.k-state-selected{ border: none; background: none; box-shadow: none!important;}
.k-grid.grid-template tr.k-state-selected:hover{ border: none;}
.k-grid.grid-template tr.k-state-selected:hover td{ border: none; background: none;}
.k-grid.grid-template tr.k-state-selected:hover td.k-state-focused, .k-grid.grid-template tr:hover .k-state-focused.k-state-selected{ border: none; background: none; box-shadow: none!important;}
.k-grid.grid-template tr.k-state-selected td.k-state-focused{ border: none; background: none; box-shadow: none!important;}
.k-grid.grid-template tr td.k-state-focused{ border: none; background: none; box-shadow: none!important;}
.k-grid.grid-template tr:hover{ background: none;}

.k-tabstrip-items .k-item .k-link-text { font-size: 16px;}



/*
*--------------------------------------------*
|                    Gnb                     |
*--------------------------------------------*
*/
.inner { width: 100%; margin: 0 auto; max-width: var(--pd-inner);}
#headerGnb.for-pc{ display: flex !important; }
#headerGnbTb.for-tb{ display: none !important;}
.logo{ display: inline-flex; width: 92.5px; }
.logo *{ display: flex; width: 100%; }
.gnb { z-index: 10; position: sticky; top: 0; left: 0; flex-wrap: wrap; padding: 0 60px; width: 100%; height: 68px; transition: all var(--transition-speed); background-image: linear-gradient(180deg, rgba(0, 0, 0, .7) 10%, transparent);}
.gnb.fixed{ background-color: var(--pd-bg-base); }
.gnb .inner { display: flex; align-items: enter; gap: 2.3vw;  max-height: 100%; justify-content: space-between; }
.gnb .h-login, .gnb .h-myshelf{ display: inline-block; width: 20px; height: 21px; }
.gnb .h-login{ background: url("/images/common/icon-gnb-login.svg") no-repeat center center; }
.gnb .h-myshelf{ background: url("/images/common/icon-gnb-myshelf.svg") no-repeat center center; }
.gnb .btn-admin{ width: 24px; height: 25px; background: url(/images/common/common-icon-settings.svg) no-repeat center center; }
.gnb .menu-list ul{ display: flex; gap: 20px; }
.gnb .menu-list ul li { flex-shrink: 0; }
.gnb .menu-list ul li a{ color: var(--white); font-size: 14px; }
.gnb .menu-list ul > li > a{ display: block; line-height: 60px; height: fit-content; }
/*.logo, .gnb .menu-list ul > li > a, .gnb .util{ line-height: 60px; }*/
.gnb .util { margin-left: auto; display: flex; align-items: center; gap: 15px; height: 60px; position: relative; }
.gnb .util > li{ display: flex; align-items: center; height: 100%; }
.gnb .util [class^="btn-"]{ width: 32px; height: 36px; }
.gnb .util .search-wrap{ display: flex; justify-content: flex-end; position: relative; width: fit-content; height: 44px; }
.gnb .util .search-wrap .input-search{ opacity: 0; visibility: hidden; width: 32px; height: 100%; padding: 7px 8px; transition: all var(--transition-speed); }
.gnb .util .search-wrap.active .input-search{ opacity: 1; visibility: visible; width: 360px; font-size: 14px; padding-left: 36px; padding-right: 34px; background-color: rgba(255, 255, 255, 0.15); border-radius: var(--pd-bdrs-base); }
.gnb .util .search-wrap.active .input-search::placeholder{ font-size: 14px; font-weight: 500; letter-spacing: normal; }
.gnb .util .search-wrap .btn-search{ position: absolute; top: 50%; left: 0; transform: translateY(-50%); padding: 12px 20px; background: url("/images/common/icon-comm-gnb-search.svg") no-repeat center center; }
.gnb .util .search-wrap .btn-cancle{ width: 24px; height: 24px; display: none; position: absolute; top: 50%; transform: translateY(-50%); right: 8px; background: url("/images/common/icons/search-icon-cancle.png") no-repeat center center / cover; }

/* 알림 버튼 (종 아이콘) */
.btn-alarm { position: relative; width: 36px; height: 36px; display: flex; flex-shrink: 0; align-items: center; justify-content: center; transition: background 0.2s;}
.btn-alarm > svg { width: 24px; height: 24px;}
/* 알림 레이어 (드롭다운) */
.alarm-layer { display: none; position: absolute; top: 100%; right: 36px; width: 470px; border-radius: 8px; box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.12), 0 0 2px 0 rgba(0, 0, 0, 0.08); background-color: #232323; z-index: 10; overflow: hidden; transform-origin: top right; animation: fadeIn 0.2s ease-out;}
.alarm-layer.active { display: block;}
/* 알림 헤더 영역 */
.alarm-header { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 18px 16px; color: #fff; font-size: 16px; font-weight: 500; line-height: normal; letter-spacing: normal; text-align: left; border-bottom: 1px solid #404040;}

/* 리스트 영역 */
.alarm-list { max-height: 584px; overflow-y: auto;}
.alarm-item { display: flex; align-items: center; padding: 16px 20px; color: #fff; border-bottom: 1px solid #404040; cursor: pointer;}
.alarm-item:last-child { border-bottom: none; }
.alarm-item .brand-nm { width: 40px; height: 40px; border-radius: 50%; background-color: #fff; overflow: hidden; flex-shrink: 0; margin-right: 16px; display: flex; align-items: center; justify-content: center;}
.alarm-item .brand-nm > img { width: 100%; height: 100%; object-fit: cover; }
.alarm-item .item-content { flex: 1; display: flex; align-items: flex-start; min-width: 0;}
.alarm-item .item-mid-wrap { flex: 1; padding-right: 12px; min-width: 0;}
.alarm-item .flex-wrap { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; line-height: normal;}
.alarm-item .item-title { font-size: 12px; font-weight: normal; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.alarm-item .item-date { font-size: 12px; color: #b3b3b3; flex-shrink: 0; margin-left: 6px;}
.alarm-item .item-desc { font-size: 12px; color: #fff; margin-bottom: 4px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;}
.alarm-item .item-detail { font-size: 12px; line-height: normal; color: #b3b3b3; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;}
/* 썸네일 */
.alarm-item .contents-wrap { width: 90px; height: 50.6px; border-radius: 4px; overflow: hidden; background-color: #333; flex-shrink: 0; margin-right: 10px; cursor: pointer;}
.alarm-item .contents-wrap > img { width: 100%; height: 100%; object-fit: cover; }
/* 알림 더보기 */
.alarm-item .toggle-menu-wrap { position: relative; flex-shrink: 0;}
.gnb .util .alarm-item .btn-toggle-info { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; transition: color 0.2s;}
/* 더보기 드롭다운 리스트 */
.more-menu-list { display: none; position: absolute; top: 28px; /* 버튼 아래 위치 */ right: 0; z-index: 100; width: 227px; padding: 6px 0; background-color: #262626; border-radius: 12px; box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.12), 0 0 2px 0 rgba(0, 0, 0, 0.08);}
/* wrap에 active 클래스가 붙으면 리스트 보임 */
.toggle-menu-wrap.active .more-menu-list { display: block;}
.more-menu-list li { padding: 12px 16px; font-size: 14px; color: #fff; transition: background 0.2s; cursor: pointer; text-align: left;}
.more-menu-list li:hover { background-color: rgba(255, 255, 255, 0.1);}
/* 알림 이 없을 때 */
.alarm-not { display: flex; justify-content: center; align-items: center; height: 90px;}
.alarm-not p { display: flex; flex-direction: column; text-align: center; line-height: 1.8; letter-spacing: -0.26px;}
.alarm-not p strong { font-size: 14px; font-weight: normal; line-height: 1.6; letter-spacing: -0.28px;}
.alarm-not p span { font-size: 13px; color: #b3b3b3;}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* 헤드 마이셀프 메뉴 */
.my-gnb-layer { right: 0; width: 200px;}
.my-gnb-layer ul li a { display: block; padding: 12px 16px; font-size: 14px; line-height: 1.5; transition: all .3s ease-in-out;}
.my-gnb-layer ul li a:hover,
.my-gnb-layer ul li a.active { background-color: rgba(255, 255, 255, 0.1);}
.my-gnb-layer .my-gnb-header { display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-bottom: 1px solid #404040;}
.my-gnb-layer .my-gnb-header .my-name { font-size: 14px; font-weight: bold; line-height: 1.5; color: #fff;}
.my-gnb-layer .my-gnb-header .my-role { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; line-height: 1.5; color: #fff;}
.my-gnb-layer .my-gnb-header .my-role:before { content: ''; display: inline-block; width: 4px; height: 4px; border-radius: 50%; background-color: #808080;}
.my-gnb-layer .my-gnb-header .my-th { font-size: 12px; line-height: 1.5; color: #fff;}
.my-gnb-layer .my-gnb-header .my-role + .my-th:before { content: '/';}

/*
*--------------------------------------------*
|                   Swiper                   |
*--------------------------------------------*
*/
.swiper-container{ position: relative; }
.common-swiper-wrap .swiper-container{  padding-bottom: 14px;}
.swiper-slide{ opacity: 1; transition: opacity var(--transition-speed) var(--transition-ease); cursor: pointer; }
.swiper-slide.last-slide, .swiper-slide.swiper-slide-prev{ position: relative; pointer-events:none;}
.swiper-slide.last-slide::before, .swiper-slide.swiper-slide-prev::before{ z-index: 2; content:""; position: absolute; top: 0; right: 0; width: 100%; height: 100%; background-color: #14141480;}
.swiper-slide.swiper-slide-prev{ opacity: 0.5 !important; }
.swiper-slide .contents-wrap{ position: relative; overflow: hidden; border-radius: var(--pd-bdrs-base12);  border-radius: clamp(8px, 0.347vw + 5.34px, 12px); aspect-ratio: 16 / 9; }
/* .brand-swiper .contents-wrap{ border-radius: var(--pd-bdrs-base25); aspect-ratio: 1 / 1; } */
.swiper-slide .contents-wrap img{ width: 100%; height: 100%; object-fit: cover; }

.ranking-badge{ 
  z-index: 1; position: absolute; top: 0; right: 0; width: 32px; height: 43px; line-height: 40px; color: var(--white); font-size: 22px; font-weight: bold; text-align: center; background: url("/images/common/img-common-badge.svg") no-repeat center center / cover; filter: drop-shadow(0px 4px 10px rgba(0, 0, 0, 0.30)); border-radius: 0 clamp(8px, 0.347vw + 5.34px, 12px) 0 0;
  /* width: 20px ~ 32px */
  width: clamp(20px, 0.78vw + 16.94px, 32px);
  /* height: 28px ~ 43px */
  height: clamp(28px, 0.98vw + 24.18px, 43px);
  /* font-size: 13px ~ 20px */
  font-size: clamp(13px, 0.46vw + 11.21px, 20px);
  /* line-height: 11.7px ~ 18px */
  line-height: clamp(25px, 0.98vw + 21.18px, 40px);
}
/* .common-swiper-wrap .swiper-button-next,
.common-swiper-wrap .swiper-button-prev{ opacity: 0; height: 100% !important; top: 0; margin-top: unset !important; transition: opacity .3s ease; pointer-events: none; } */
.common-swiper-wrap:hover .swiper-button-next, 
.common-swiper-wrap:hover .swiper-button-prev,
.brand-swiper:hover .swiper-button-next,
.brand-swiper:hover .swiper-button-prev { opacity: 1; pointer-events: auto; }
.common-swiper-wrap .swiper-button-next.swiper-button-disabled, 
.common-swiper-wrap .swiper-button-prev.swiper-button-disabled,
.brand-swiper .swiper-button-next.swiper-button-disabled,
.brand-swiper .swiper-button-prev.swiper-button-disabled { opacity: 0 !important; pointer-events: none;}
.common-swiper-wrap:hover .swiper-button-next.swiper-button-disabled, 
.common-swiper-wrap:hover .swiper-button-prev.swiper-button-disabled,
.brand-swiper:hover .swiper-button-next.swiper-button-disabled,
.brand-swiper:hover .swiper-button-prev.swiper-button-disabled{ /*opacity: 0.35;*/ display: none; /*더보기 버튼 UI추가로 display: none처리*/ }

.common-swiper-wrap .swiper-button-prev, 
.common-swiper-wrap .swiper-button-next, 
.brand-swiper .swiper-button-prev, 
.brand-swiper .swiper-button-next { top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 100%; box-shadow: 0 19.6px 29.3px 0 rgba(0, 0, 0, 0.12), 0 0 2.4px 0 rgba(0, 0, 0, 0.08); background-color: #404040; transition: background-color .3s ease;}
.lecture .swiper-button-prev, 
.lecture .swiper-button-next { top: calc((100% - 140px) / 2); }
.common-swiper-wrap .swiper-button-next,
.brand-swiper .swiper-button-next{ right: 0; }
.common-swiper-wrap .swiper-button-prev,
.brand-swiper .swiper-button-prev{ left: 0; }
.common-swiper-wrap .swiper-button-prev:after, 
.common-swiper-wrap .swiper-button-next:after,
.brand-swiper .swiper-button-prev:after,
.brand-swiper .swiper-button-next:after{ content: "" !important; width: 24.4px !important; height: 24.4px !important; transition: transform 0.2s ease;}
.common-swiper-wrap .swiper-button-prev:after,
.brand-swiper .swiper-button-prev:after{ background: url("/images/common/common-prev-slide-icon.svg") no-repeat center center / cover !important; }
.common-swiper-wrap .swiper-button-next:after,
.brand-swiper .swiper-button-next:after{ background: url("/images/common/common-next-slide-icon.svg") no-repeat center center / cover !important; }
.common-swiper-wrap .swiper-button-prev:hover, .common-swiper-wrap .swiper-button-next:hover,
.brand-swiper .swiper-button-prev:hover, .brand-swiper .swiper-button-next:hover{ background-color: #fc2e57;}
.common-swiper-wrap:has(.swiper-button-prev:hover) .swiper-slide.swiper-slide-prev::before,
.common-swiper-wrap:has(.swiper-button-next:hover) .swiper-slide.last-slide::before,
.brand-swiper:has(.swiper-button-prev:hover) .swiper-slide.swiper-slide-prev::before,
.brand-swiper:has(.swiper-button-next:hover) .swiper-slide.last-slide::before{ background-color: #141414B2 !important;}
.swiper-pagination{ bottom: 0 !important; display: flex; align-items: center; justify-content: center; gap: 6px;}
.swiper-pagination .swiper-pagination-bullet{ margin: 0 !important; width: 10px; height: 4px; border-radius: 10px; background-color: rgba(255, 255, 255, 0.4);} 
.swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{ width: 30px; background-color: #fff;} 

/**************************************** 251122 slide와 .common-list-wrap 요소 gap 간격 통일 / border-radius는 고정값 ****************************************/
.common-swiper-wrap .swiper-slide{ padding: 16px 16px 18px 16px; border-radius: var(--pd-bdrs-base12) !important; border-radius: clamp(8px, 0.347vw + 5.34px, 12px) !important; /*overflow: hidden;*/ transition: background-color .3s ease;}
.common-swiper-wrap:not(.brand-swiper, .inst-wrap) .swiper-slide:hover { background-color: #2a2a2a;}
.common-list-wrap .common-item{ border-radius: var(--pd-bdrs-base12); border-radius: clamp(8px, 0.347vw + 5.34px, 12px);}
.myshelf .common-list-wrap{ padding: 0;}
/* .myshelf.common-sub-section-wrap{ padding: 0 60px; } */
.myshelfInfo.common-sub-section-wrap { display: flex; gap: 40px; padding: 0 60px; }
.common-swiper-wrap{ overflow: hidden;}

.curation .curation-cont { padding: 50px 0; border-top: 1px solid #404040;}
.brand-tab-cont .curation .curation-cont:nth-of-type(1) { padding-top: 0; border-top: 0;}
.curation .curation-cont .common-tit-wrap { }
.curation-swiper .swiper-container { width: 100%;}
.brand-swiper .swiper-container { width: 100%;}

/*
*--------------------------------------------*
|                  Dropdown                  |
*--------------------------------------------*
*/
.dropdown{ display: inline-block; position: relative; }
.dropdown .dropdown-btn{ display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 0.94rem; width: 11.88rem; height: 44px; font-size: 1rem; color: var(--white); text-align: center; border: 1px solid #fff; }
.dropdown .dropdown-btn .icon-dropdown-arrow{ display: inline-block; width: 0; height: 0; border-left: 0.415rem solid transparent; border-right: 0.415rem solid transparent; border-top: 0.42rem solid var(--white); transition: transform var(--transition-speed) var(--transition-ease); }
.dropdown .dropdown-btn.active .icon-dropdown-arrow{ transform: rotate(180deg); }
.dropdown .dropdown-menu{ z-index: 10; display: none; position: absolute; top: 100%; left: 0; width: 100%; max-height: 350px; overflow-y: auto; border: 1px solid #808080; background-color: var(--pd-bg-base); }
.dropdown .dropdown-menu.bot-open{ top: initial; bottom: 100%; }
.dropdown .dropdown-menu a{ display: inline-block; padding: 12px 15px; width: 100%; color: var(--white); font-size: 16px; font-weight: normal; letter-spacing: normal; text-align: left; }
.dropdown .dropdown-menu a:hover{ background-color: #2a2a2a; }
.dropdown.dropdown-style2{ width: 100%; }
.dropdown.dropdown-style2 .dropdown-btn{ width: 100%; font-size: 14px; border-radius: var(--pd-bdrs-base4); border: solid 1px #808080; }
.dropdown.dropdown-style2 .label{ margin-right: 8px; }
.dropdown.dropdown-style2 li{ display: inline-block; padding: 12px 15px; width: 100%; color: var(--white); font-size: 14px; font-weight: normal; letter-spacing: normal; text-align: left; cursor: pointer; }
.dropdown.dropdown-style2 li:hover{ background-color: #2a2a2a; }
.dropdown.dropdown-style3 { background-color: #181818; background-position: 97% center;}

select.dropdown { height: 44px; padding: 0 11px; border: 1px solid #808080; border-radius: 4px; background-image: url("/images/common/icons/dropdown-arrow.png"); background-position: 93% center; background-repeat: no-repeat; background-color: var(--pd-bg-base); font-size: 14px; letter-spacing: -0.2px; color: #fff;}
select.dropdown:focus { }
.dropdown.dropdown-style2 option:hover {
    background-color: #2a2a2a; /* 일부 브라우저에서만 작동 */
    box-shadow: 0 0 10px 100px #2a2a2a inset; /* 트릭: 배경색 강제 적용 시도 */
}

/*
*--------------------------------------------*
|                   Popup                    |
*--------------------------------------------*
*/
.k-window{ border: none !important; border-radius: var(--pd-bdrs-base4) !important; overflow: hidden; background-color: #181818 !important; }
.k-window-title{ padding-left: 4px; color: var(--white) !important; border: none !important; background-color: #181818 !important; font-size: 1rem;}
.k-window-title .k-window-action{ width: 22px !important; height: 22px !important; margin: unset !important; -webkit-margin-end: unset !important; margin-inline-end: unset !important; opacity: 1 !important; }
.k-window-titlebar { height: 60px;}
.k-window-titlebar-action .k-icon{ width: 100% !important; height: 100% !important; }
.k-window-titlebar-action .k-icon::before{ content: "" !important; position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; background: url("/images/common/icons/icon-pop-x.png") no-repeat center center / cover !important; }
.k-window-content.kendo-window{ padding: 0 30px 30px 30px !important; }
.k-window-content.kendo-window.style2{ padding: 0 20px 20px 20px !important; } 
.k-window-content.kendo-window.style3{ padding: 0 !important; } 
.k-window .popup-content{ width: 100%;height: calc(100% - 90px) !important; }
.k-window .popup-btn{ width: 100%; background-color: #181818; border-radius: 0 0 var(--pd-bdrs-base4); overflow: hidden; }
.k-window .popup-btn .btn-default{ display: inline-flex; justify-content: center; align-items: center; height: 48px; line-height: 1.5; padding: 0 10px; color: var(--white); font-size: 16px; font-weight: 500; letter-spacing: normal; text-align: center; box-sizing: border-box; background-color: rgba(255, 255, 255, 0.2); border-radius: var(--pd-bdrs-base4); }
.k-window-content.kendo-window.style2 .popup-btn button,
.k-window-content.kendo-window.style2 .popup-btn .btn-default{ width: 140px; }
.k-button-md.k-icon-button .k-button-icon.k-svg-icon>svg, .k-button-md.k-icon-button .k-button-icon.k-icon-md>svg { width: 28px; height: 28px;}

.popup-foot { display: flex; justify-content: center; align-items: center; gap: 10px; padding: 20px 0 0;}
.popup-foot [class*="btn-"] { display: inline-flex; align-items: center; justify-content: center; min-width: 140px; height: 48px; font-weight: 500; line-height: 1.5;}


.pop-common-tit{ margin-bottom: 16px; color: var(--white); font-size: 16px; font-weight: normal; }
.pop-common-desc{ color: #d2d2d2; font-size: 15px; font-weight: normal; line-height: 1.6; letter-spacing: -0.3px; }
.common-scroll{ height: 66.69vh; overflow-y: auto; }
.popup-scroll-wrap{ display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; }
.product-wrap .common-item{ display: flex; align-items: flex-start; justify-content: flex-start; gap: 40px; width: 100%;}
.product-wrap .common-item .common-cont-img{ flex-shrink: 0; width: 310px; height: 100%; aspect-ratio: 16 / 9; border-radius: var(--pd-bdrs-base12); background-color: #000; }
.product-wrap .common-item .info{ display: flex; flex-direction: column; justify-content: space-between; height: 465px; width: calc(100% - 350px); }
.product-wrap .common-item .info .ctgr-nm{ font-size: 18px; font-weight: bold; line-height: 1.4; letter-spacing: normal; text-align: left; }
.product-wrap .common-item .info h3{ margin-top: -4.3px; width: 100%; color: var(--white); font-size: 30px; font-weight: bold; line-height: 1.3; letter-spacing: normal; text-align: left; text-overflow: ellipsis; overflow: hidden; word-break: break-word; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.product-wrap .common-item .info .product-summary span{ position: relative; display: inline-block; padding-right: 14px; margin-right: 15px; font-size: 15px; font-weight: 500; line-height: 1.5; letter-spacing: normal; text-align: left; color: #d2d2d2; }
.product-wrap .common-item .info .product-summary span:not(:last-child)::after{ content: ""; position: absolute; width: 1px; height: 15px; background-color: #d2d2d2; top: 50%; right: 0; transform: translateY(-50%);}
.product-wrap .common-item .info .product-summary span strong{ display: inline-block; padding-left: 10px; font-weight: bold; }
.product-wrap .common-item .info .product-desc{ color: #d2d2d2; font-size: 16px; font-weight: normal; line-height: 1.6; letter-spacing: normal; text-align: left; }
.product-wrap .common-item .info .hash-tag-wrap{ display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-start; margin-bottom: 12px; text-overflow: ellipsis; overflow: hidden; word-break: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; color: #bcbcbc; font-size: 15px; line-height: 1.3; letter-spacing: normal; text-align: left; }
.product-wrap .common-item .info .hash-tag-wrap span{ color: #bcbcbc; font-size: 14px; line-height: 1.3; letter-spacing: normal; text-align: left; }
.product-wrap .common-item .info .price{ color: var(--white); font-size: 30px; font-weight: bold; text-align: right; }
.product-wrap .product-actions{ display: flex; justify-content: space-between; width: 100%; align-items: flex-start; gap: 40px; }
.product-wrap .product-actions .btn-subscribe, 
.product-wrap .product-actions .btn-purchase,
.product-wrap .product-actions .btn-default{ height: 54px; line-height: 54px; }
.product-wrap .product-actions .btn-subscribe{ flex-shrink: 0; display: flex !important; align-items: center; justify-content: space-between; gap: 22px; padding: 0 20px 0 12px; width: 310px; border-radius: var(--pd-bdrs-base8); background-color: #2a2a2a; }
.product-wrap .product-actions .btn-subscribe .brand-nm{ display: flex; justify-content: flex-start; align-items: center; gap: 8px; }
.product-wrap .product-actions .btn-subscribe .brand-nm > img{ flex-shrink: 0; width: 36px; height: 36px; border-radius: var(--pd-bdrs-base4); background-color: #000; }
.product-wrap .product-actions .btn-subscribe .brand-nm > span{ width: 100%; color: #bcbcbc; font-size: 15px; font-weight: 500; line-height: 1.35; letter-spacing: normal; text-align: left; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
.product-wrap .product-actions .btn-purchase, 
.product-wrap .product-actions .btn-default{ width: 100%; color: var(--white); font-size: 18px; font-weight: bold; background-color: #e50814; text-align: center; border-radius: var(--pd-bdrs-base4); }
.product-wrap .product-actions .pay-method-wrap{ display: flex; flex-direction: column; width: 470px; }
.product-wrap .product-actions .pay-method-wrap .btn-purchase{ margin-bottom: 40px; }
.product-wrap .product-actions .pay-method-wrap .btn-purchase.disabled{ background-color: rgba(255, 255, 255, 0.15); }
.product-wrap .product-actions .pay-method-wrap .btn-purchase.show{ background-color: #545454; }
.product-wrap .product-actions .pay-method-wrap .pay-method-inner{ border-top: 1px solid #404040; }
.product-wrap .product-actions .pay-method-wrap .pay-btn-wrap{ margin: 25px 0 15px; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.product-wrap .product-actions .pay-method-wrap .pay-btn-wrap > button{ color: #fff; height: 48px; line-height: 48px; font-size: 16px; letter-spacing: normal; border-radius: 6px; }
.product-wrap .product-actions .pay-method-wrap .pay-btn-wrap > button.active{ background-color: #e50814; }
.product-wrap .product-actions .pay-method-wrap .pay-btn-wrap > button:nth-child(1){ flex: 1; }
.product-wrap .product-actions .pay-method-wrap .pay-btn-wrap > button:nth-child(2){ flex: 2; }
.product-wrap .product-actions .pay-method-wrap .pay-btn-wrap > button:nth-child(3){ flex: 1.5; }
.product-wrap .product-actions .pay-method-wrap .btn-purchase:last-child{ margin-top: 15px; }
.product-wrap .conts-list-section{ margin-top: 50px; }
.product-wrap .product-actions{ margin-top: 20px; }
.product-wrap .pop-comm-tit{ display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; margin-bottom: 18px; color: #e5e5e5; font-size: 24px; font-weight: 500; line-height: 1.46; letter-spacing: normal; text-align: left; }
.product-wrap .conts-list-wrap li:first-child{ border-top: 1px solid #404040; }
.product-wrap .conts-list-wrap li{ border-bottom: 1px solid #404040; }
.product-wrap .conts-list-wrap li .df-wrap{ display: flex; align-items: center; justify-content: space-between; padding: 16px; }
.product-wrap .conts-list-wrap li .conts-index{ flex-shrink: 0; display: inline-block; width: 9.80%; color: #dcdcdc; font-size: 24px; font-weight: normal; text-align: center; }
.product-wrap .conts-list-wrap li .conts-list-info > img{ flex-shrink: 0; width: 25.1%; border-radius: var(--pd-bdrs-base12); overflow: hidden }
.product-wrap .conts-list-wrap li .conts-list-info{ display: flex; align-items: center; gap: 20px; }
.product-wrap .conts-list-wrap li .conts-list-info h4{ color: var(--white); font-size: 16px; font-weight: bold; line-height: normal; letter-spacing: normal; }
.product-wrap .conts-list-wrap li .conts-list-info p{ margin-top: 8px; color: #d2d2d2; font-size: 15px; font-weight: normal; line-height: 1.5; letter-spacing: normal; text-align: left; }
.product-wrap .conts-list-wrap li .single-wrap{ flex-shrink: 0; margin-left: 20px; width: 80px; display: flex !important; flex-direction: column; gap: 8px; }
.product-wrap .conts-list-wrap li .single-wrap > button{ height: 34px; line-height: 34px; max-width: 80px; font-size: 13px; letter-spacing: normal; }
.product-wrap .conts-list-wrap li .conts-duration{ flex-shrink: 0; color: var(--white); font-size: 16px; font-weight: normal;  line-height: normal; letter-spacing: normal; text-align: center; }
.product-wrap .conts-list-wrap li .conts-duration > strong{ font-weight: normal; }
.product-wrap .conts-list-wrap li .btn-default.for-mo{ width: 100%; margin-top: 10px; }

.std-wrap .common-item{ display: flex; align-items: flex-start; justify-content: center; gap: 40px; width: 100%;}
.std-wrap .common-item .common-cont-img{ flex-shrink: 0; width: 310px; height: 100%; aspect-ratio: 16 / 9; border-radius: var(--pd-bdrs-base12); background-color: #000; }
.std-wrap .common-item .info{ display: flex; flex-direction: column; justify-content: space-between; height: 465px; }
.std-wrap .common-item .info .ctgr-nm{ font-size: 18px; font-weight: bold; line-height: 1.4; letter-spacing: normal; text-align: left; }
.std-wrap .common-item .info h3{ margin-top: -4.3px; width: 100%; color: var(--white); font-size: 30px; font-weight: bold; line-height: 1.3; letter-spacing: normal; text-align: left; text-overflow: ellipsis; overflow: hidden; word-break: break-word; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.std-wrap .common-item .info .std-summary span{ position: relative; display: inline-block; padding-right: 14px; margin-right: 15px; font-size: 15px; font-weight: 500; line-height: 1.5; letter-spacing: normal; text-align: left; color: #d2d2d2; }
.std-wrap .common-item .info .std-summary span:not(:last-child)::after{ content: ""; position: absolute; width: 1px; height: 15px; background-color: #d2d2d2; top: 50%; right: 0; transform: translateY(-50%);}
.std-wrap .common-item .info .std-summary span strong{ display: inline-block; padding-left: 10px; font-weight: bold; }
.std-wrap .common-item .info .std-desc{ color: #d2d2d2; font-size: 16px; font-weight: normal; line-height: 1.6; letter-spacing: normal; text-align: left; }
.std-wrap .common-item .info .hash-tag-wrap{ display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-start; margin-bottom: 12px; text-overflow: ellipsis; overflow: hidden; word-break: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; color: #bcbcbc; font-size: 14px; line-height: 1.3; letter-spacing: normal; text-align: left; }
.std-wrap .std-actions{ display: flex; justify-content: space-between; width: 100%; align-items: center; gap: 40px; }
.std-wrap .std-actions .btn-subscribe, 
.std-wrap .std-actions .btn-purchase,
.std-wrap .std-actions .btn-default{ height: 54px; line-height: 54px; }
.std-wrap .std-actions .btn-subscribe{ display: flex !important; align-items: center; justify-content: space-between; gap: 22px; padding: 0 20px 0 12px; width: 310px; border-radius: var(--pd-bdrs-base8); background-color: #2a2a2a; }
.std-wrap .std-actions .btn-subscribe .brand-nm{ display: flex; justify-content: flex-start; align-items: center; gap: 8px; }
.std-wrap .std-actions .btn-subscribe .brand-nm > img{ flex-shrink: 0; width: 36px; height: 36px; border-radius: var(--pd-bdrs-base4); background-color: #000; }
.std-wrap .std-actions .btn-subscribe .brand-nm > span{ width: 100%; color: #bcbcbc; font-size: 15px; font-weight: 500; line-height: 1.35; letter-spacing: normal; text-align: left; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
.std-wrap .std-actions .btn-purchase, 
.std-wrap .std-actions .btn-default{ width: calc(100% - 350px); color: var(--white); font-size: 18px; font-weight: bold; background-color: #e50814; text-align: center; border-radius: var(--pd-bdrs-base4); }
.std-wrap .conts-list-section{ margin-top: 50px; }
.std-wrap .std-actions{ margin-top: 20px; }
.std-wrap .pop-comm-tit{ display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; margin-bottom: 18px; color: #e5e5e5; font-size: 24px; font-weight: 500; line-height: 1.46; letter-spacing: normal; text-align: left; }
.std-wrap .conts-list-wrap li:first-child{ border-top: 1px solid #404040; }
.std-wrap .conts-list-wrap li{ border-bottom: 1px solid #404040; }
.std-wrap .conts-list-wrap li .df-wrap{ display: flex; align-items: center; justify-content: space-between; padding: 16px; gap: 20px; }
.std-wrap .conts-list-wrap li .conts-index{ display: inline-block; width: 7%; flex-shrink: 0; color: #dcdcdc; font-size: 24px; font-weight: normal; text-align: center; }
.std-wrap .conts-list-wrap li .conts-list-info .play-wrap{ position: relative; flex-shrink: 0; width: 25.1%; border-radius: var(--pd-bdrs-base12); overflow: hidden; cursor: pointer; }
.std-wrap .conts-list-wrap li .conts-list-info .play-wrap::before{ content: ""; position: absolute; width: 38px; height: 38px; top: 50%; left: 50%; transform: translate(-50%, -50%); background: url("/images/common/icons/icon-player-play-sm.svg") no-repeat 60% center / 50%; z-index: 1; border: 1px solid #fff; border-radius: 100%; }
.std-wrap .conts-list-wrap li .conts-list-info .play-wrap::after{ content: ""; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background-color: #2a2a2a; opacity: 0.4; }
.std-wrap .conts-list-wrap li .conts-list-info .play-wrap > img{ width: 100%; height: 100%; object-fit: cover; }
.std-wrap .conts-list-wrap li .conts-list-info{ display: flex; align-items: center; gap: 20px; }
.std-wrap .conts-list-wrap li .conts-list-info h4{ color: var(--white); font-size: 16px; font-weight: bold; line-height: normal; letter-spacing: normal; }
.std-wrap .conts-list-wrap li .conts-list-info p{ margin-top: 8px; color: #d2d2d2; font-size: 15px; font-weight: normal; line-height: 1.43; letter-spacing: normal; text-align: left; }
.std-wrap .conts-list-wrap li .single-wrap{ flex-shrink: 0; display: flex !important; flex-direction: column; gap: 8px; }
.std-wrap .conts-list-wrap li .single-wrap > button{ height: 34px; line-height: 34px; max-width: 80px; font-size: 13px; letter-spacing: normal; }
.std-wrap .conts-list-wrap li .conts-duration{ flex-shrink: 0; color: var(--white); font-size: 16px; font-weight: normal;  line-height: normal; letter-spacing: normal; text-align: center; }
.std-wrap .conts-list-wrap li .conts-duration > strong{ font-weight: normal; }
.std-wrap .conts-list-wrap li .btn-default.for-mo{ width: 100%; }
.std-wrap .play-wrap{ position: relative; }
.std-wrap .play-wrap .progress-bar-wrap{ position: absolute; z-index: 2; width: 94%; left: 50%; bottom: 4px; transform: translateX(-50%); }
.std-wrap .conts-inner-wrap{ max-width: 500px; }

#complaintWindow .radio-box-wrap label{ padding: 4px 0; }
#complaintWindow .common-textarea{ margin: 22px 0 20px; }
#complaintWindow .popup-btn .btn-default{ width: 140px; }

/* 팝업 내 평점 및 리뷰 영역 */
.total-count { margin-bottom: 15px; border-bottom: 1px solid #3a3a3a; font-size: 18px; line-height: 1.3; color: #d2d2d2;}
.k-window-content { scroll-behavior: smooth;}
.review-section.mt50{ margin-top: 50px; }
.review-section .review-title{ width: 100%; margin-bottom: 18px; color: #e5e5e5; font-size: 24px; font-weight: 500; line-height: 1.46; letter-spacing: normal; text-align: left;}
.review-box{ display: flex; align-items: center; gap: 40px; width: 100%; padding: 30px 40px; border-top: 1px solid #404040; border-bottom: 1px solid #404040; box-sizing: border-box;}
.review-box > .score{ width: 160px; flex-shrink: 0;}
.review-box > .score > .avg-score{ width: 100%; margin-bottom: 10px; text-align: center; font-size: 36px; color: #d2d2d2; font-weight: 700; letter-spacing: -0.72px; line-height: 36px;}
.review-box > .score > ul.star-list{ width: 100%; display: flex; justify-content: center; gap: 5px; align-items: center;}
.review-box > .score > ul.star-list li > img{ width: 15px; height: 15px;}
.review-box > .score .review-cnt-txt{ display: block; width: 100%; margin-top: 8px; font-size: 14px; color: #d2d2d2; font-weight: 400; letter-spacing: -0.28px; text-align: center;}
.review-box > span.bar{ display: block; width: 1px; height: 90px; background: #404040;}
.review-box > ul.avg-wrap{ width: 100%;}
.review-box > ul.avg-wrap > li{ display: flex; gap: 10px; align-items: center; justify-content: start;}
.review-box > ul.avg-wrap > li > span{ width: 22px; line-height: 27px; text-align: left; font-size: 14px; color: #d2d2d2; font-weight: 400; letter-spacing: -0.28px;}
.review-box > ul.avg-wrap > li > div{ position: relative; width: calc(100% - 32px); height: 8px; border-radius: 100px; background: #404040;}
.review-box > ul.avg-wrap > li > div > span{ position: absolute; top: 0; left: 0; height: 8px; border-radius: 100px; background: #ffbe0b;}
.review-td-section{ padding: 0;}
.review-td-section .review-td-item{ padding: 22px 8px; border-bottom: solid 1px #3a3a3a; }
.review-td-section .review-td-item .top-info{ display: flex; align-items: center; margin-bottom: 10px; gap: 12px; flex-wrap: wrap; width: 100%; box-sizing: border-box;}
.review-td-section .review-td-item .top-info > .name{ line-height: 22.5px; text-align: left; font-size: 15px; color: #fff; font-weight: 400; letter-spacing: -0.3px;}
.review-td-section .review-td-item .top-info > .date{ font-size: 14px; font-weight: normal; line-height: 1.5; letter-spacing: -0.28px; text-align: left; color: #808080;}
.review-td-section .review-td-item .top-info > ul.score{ display: flex; gap: 3px; align-items: center;}
.review-td-section .review-td-item .top-info > ul.score li > img{ vertical-align: baseline;}
.review-td-section .review-td-item .cont-wrap .cont-tit{ display: block; width: 100%; margin-bottom: 10px; padding: 13px 18px 15px; font-size: 13px; font-weight: normal; line-height: 1.5; letter-spacing: -0.26px; text-align: left; color: #d2d2d2; border-radius: 6px; background-color: #2a2a2a;}
.review-td-section .review-td-item .cont-wrap .cont{ width: 100%; line-height: 1.5;; text-align: left; color: #e5e5e5; font-size: 14px; font-weight: 400; letter-spacing: -0.28px; word-break: keep-all;}
.btn-more-review-wrap{ display: flex; align-items: center; justify-content: center;}
.btn-more-review-wrap .btn-more-review{ margin-top: 20px; min-width: 240px; height: 48px; line-height: 48px;}
.review-td-section .no-data{ padding: 40px 10px; font-size: 14px; color: #e5e5e5; text-align: center; }
.review-td-section .review-cont p { font-size: 14px; line-height: 1.6; color: #bcbcbc;}

.score-tot-wrap{ display: flex; align-items: center; gap: 10px; }
.score-tot-wrap .star-list{ display: flex; align-items: center; gap: 4px;}
.score-tot-wrap .star-list li > img{ width: 16px; height: 16px; vertical-align: inherit;}
.score-tot-wrap .text-underline{ font-size: 15px; font-weight: bold; line-height: 1.5; letter-spacing: normal; color: #fff; text-decoration: underline;}

.score-wrap{ margin-bottom: 10px;}
.score-wrap > ul.score{ display: flex; gap: 3px;}
.score-wrap > ul.score li{ border: none !important;}
.score-wrap .no-review{ display: flex; align-items: center; gap: 8px;  font-size: 13px; font-weight: normal; line-height: 1.5; letter-spacing: -0.26px; text-align: left; color: #d2d2d2;}

/* 리뷰상세 팝업 grid */
.review-grid.k-grid.grid-default tr td,
.accordion-grid.k-grid.grid-default tr td { width: 100%; padding: 6px 0; border-bottom: 1px solid #3a3a3a;}
.accordion-grid.k-grid.grid-default tr td { border-bottom: 0;}
#reviewListWindow .popup-content,
#qaListWindow .popup-content { height: 100%;}
#qaListWindow .popup-content #reviewList,
#qaListWindow .popup-content #qaList { height: 100% !important;}

/*
*--------------------------------------------*
|                   학습창                    |
*--------------------------------------------*
*/	
.kendo-window.player-wrap{ /* 전체보기 종료 후 스크롤 이슈 방지*/ overflow-x: hidden;}
.player-wrap .btn-default{ max-width: 100px; height: 44px; line-height: 44px; padding: 0 24px; color: var(--white); font-size: 15px; font-weight: 500; background-color: rgba(255, 255, 255, 0.15); border-radius: var(--pd-bdrs-base4); }
.player-wrap .std-wrap{ padding: 25.5px 30px; }
.player-wrap .std-wrap .pop-comm-tit{ display: flex; align-items: center; justify-content: space-between; }
.player-wrap .std-wrap .pop-comm-tit .title{ color: var(--white); font-size: 25px; font-weight: bold; line-height: 1.4; letter-spacing: -0.75px; text-align: left; }

.player-wrap .std-wrap .brand-desc-wrap{ margin-top: 12.5px; padding: 15px 20px 16px; border-radius: var(--pd-bdrs-base8); color: #d2d2d2; font-size: 15px; font-weight: normal; line-height: 1.6; letter-spacing: -0.3px; text-align: left; background-color: rgba(255, 255, 255, 0.05); }
.player-wrap .std-wrap .brand-desc-wrap .brand-intro{ display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; text-overflow: ellipsis; overflow: hidden; white-space: normal; line-height: 1.5; }
.player-wrap .std-wrap .brand-desc-wrap .brand-intro.expanded{ -webkit-line-clamp: unset; height: auto; white-space: normal; }

.player-wrap .std-wrap .comment-wrap{ margin-top: 25px; }
.player-wrap .std-wrap .comment-wrap > span{ display: inline-block; margin-left: 5px; margin-bottom: 10px; color: #d2d2d2; font-size: 18px; font-weight: normal; line-height: 1.3; letter-spacing: normal; text-align: left; }
.player-wrap .std-wrap .comment-wrap > span > strong{ color: #d2d2d2; font-size: 18px; font-weight: normal; line-height: 1.3; letter-spacing: normal; text-align: left; }
.player-wrap .std-wrap .comment-txtarea-wrap{ display: flex; flex-direction: column; justify-content: space-between; height: 130px; position: relative; margin: 4px 0 8px; padding: 20px; color: var(--white); border-radius: 8px; border: solid 1px #414141; background-color: rgba(255, 255, 255, 0.05); }
.comment-txtarea-wrap .btn-wrap, .review-txtarea-wrap .btn-wrap{ display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.player-wrap .std-wrap .comment-txtarea-wrap > button{ position: absolute; bottom: 11.6px; right: 12px; }
.player-wrap .std-wrap .comment-list{ padding: 22px 8px 25px; border-bottom: 1px solid #3a3a3a; }
.player-wrap .std-wrap .comment-list .comment-info{ position: relative; display: flex; align-items: center; justify-content: space-between; color: var(--white); }
.player-wrap .std-wrap .comment-list .comment-info button{ margin-left: auto; width: 20px; height: 20px; }
.player-wrap .std-wrap .comment-list .comment-info .del-alert-wrap{ z-index: 1; position: absolute;; width: 128px; height: fit-content; right: 0; top: 100%; border-radius: var(--pd-bdrs-base8); background-color: #2a2a2a; overflow: hidden; }
.player-wrap .std-wrap .comment-list .comment-info .del-alert-wrap > button{ position: relative; padding: 0 15px 0 20px; width: 100%; height: 38px; line-height: 38px; color: var(--white); font-size: 14px; font-weight: normal; letter-spacing: normal; text-align: center; }
.player-wrap .std-wrap .comment-list .comment-info .del-alert-wrap > button:hover{ background-color: #3a3a3a; }
.player-wrap .std-wrap .comment-list .comment-info .del-alert-wrap > button::before{ content: ""; position: absolute; top: 50%; left: 15px; width: 18px; height: 18px; transform: translateY(-50%); }
.del-alert-wrap .btn-del::before{ background: url("/images/common/player/player-sprites-option.png") no-repeat -10px -10px; }
.del-alert-wrap .btn-report::before{ background: url("/images/common/player/player-sprites-option.png") no-repeat -10px -48px; }
.player-wrap .std-wrap .comment-list .comment-info span,
.player-wrap .std-wrap .comment-list .comment-info strong{ display: inline-block; margin-right: 12px; color: var(--white); font-size: 14px; font-weight: bold;  line-height: 1.5; letter-spacing: -0.28px; text-align: left; }
.player-wrap .std-wrap .comment-list .comment-info strong{ color: #808080; }
.player-wrap .std-wrap .comment-list .comment-cont{ margin-top: 2px; margin-bottom: 6px; color: #e5e5e5; font-size: 14px; font-weight: normal; line-height: 1.5; letter-spacing: -0.28px; text-align: left; }
.player-wrap .std-wrap .comment-list .comment{ margin-bottom: 8px; }

.player-wrap .std-wrap .comment-reply-list .comment-reply-info{ position: relative; display: flex; align-items: center; justify-content: space-between; color: var(--white); }
.player-wrap .std-wrap .comment-reply-list .comment-reply-info button{ margin-left: auto; width: 20px; height: 20px; }
.player-wrap .std-wrap .comment-reply-list .comment-reply-info .del-alert-wrap{ z-index: 1; position: absolute;; width: 128px; height: fit-content; right: 0; top: 100%; border-radius: var(--pd-bdrs-base8); background-color: #2a2a2a; overflow: hidden; }
.player-wrap .std-wrap .comment-reply-list .comment-reply-info .del-alert-wrap > button{ position: relative; padding: 0 15px 0 20px; width: 100%; height: 38px; line-height: 38px; color: var(--white); font-size: 14px; font-weight: normal; letter-spacing: normal; text-align: center; }
.player-wrap .std-wrap .comment-list .comment-reply-info .del-alert-wrap > button:hover{ background-color: #3a3a3a; }
.player-wrap .std-wrap .comment-list .comment-reply-info .del-alert-wrap > button::before{ content: ""; position: absolute; top: 50%; left: 15px; width: 18px; height: 18px; transform: translateY(-50%); }
.player-wrap .std-wrap .comment-reply-list .comment-reply-info span,
.player-wrap .std-wrap .comment-reply-list .comment-reply-info strong{ display: inline-block; margin-right: 12px; color: var(--white); font-size: 14px; font-weight: bold;  line-height: 1.5; letter-spacing: -0.28px; text-align: left; }
.player-wrap .std-wrap .comment-reply-list .comment-reply-info strong{ color: #808080; }
.player-wrap .std-wrap .comment-reply-list > li{ padding: 10px 0 22px 23px; }

.btn-comment-reply{ position: relative; padding-left: 22px; color: #bcbcbc; font-size: 14px; font-weight: normal; line-height: 1.71; letter-spacing: normal; }
.btn-comment-reply::before{ width: 18px; height: 18px; position: absolute; content: ""; top: 50%; left: 0; transform: translateY(-50%); background: url("/images/common/player/player-sprites-reply.png") no-repeat -10px -10px; }
.btn-comment-reply.active::before{ position: absolute; content: ""; background: url("/images/common/player/player-sprites-reply.png") no-repeat -48px -10px; }
.btn-reply-more{ margin-top: 14px; display: flex; align-items: center; gap: 3px; color: var(--white); font-size: 13px; font-weight: bold;  line-height: 1.5; letter-spacing: -0.26px; }
.btn-reply-more .reply-icon{ display: inline-block; width: 18px; height: 18px; background: url("/images/common/player/common-icon-arrow.png") no-repeat center center / cover; transition: all var(--transition-speed) var(--transition-linear); }
.btn-reply-more.expanded .reply-icon{ transform: rotate(180deg); }
.btn-dot-more{ width: 20px; height: 20px; background: url("/images/common/player/common-icon-more.png") no-repeat center center / cover; }

.mejs__controls{ height: 7.54rem !important; padding: 0 1.2026rem 1.2026rem 1.2026rem !important; gap: 20px; align-items: center; }
.mejs__button.mejs__play, 
.mejs__button.mejs__replay, 
.mejs__button.mejs__pause, 
.mejs__button.mejs__volume-button, 
.mejs__button.mejs__speed-button,
.mejs__button.mejs__fullscreen-button{ position: absolute; bottom: 1.2026rem;}

.mejs__button.mejs__play, .mejs__button.mejs__replay{ left: 1.2026rem;  width: var(--btn-size); height: var(--btn-size); /*background: url("/images/common/icons/icon-player-play.svg") no-repeat center center / cover;*/ }
.mejs__button.mejs__pause{ left: 1.2026rem; width: var(--btn-size); height: var(--btn-size); /*background: url("/images/common/icons/icon-player-pause.svg") no-repeat center center / cover;*/ }
.mejs__button.mejs__volume-button{ left: calc(1.2026rem + var(--btn-size) + 15px); width: var(--btn-size); height: var(--btn-size); /*background: url("/images/common/icons/icon-player-volume.svg") no-repeat center center / cover;*/ }
.mejs__button.mejs__unmute{ left: calc(1.2026rem + var(--btn-size) + 15px); width: var(--btn-size); height: var(--btn-size); /*background: url("/images/common/icons/icon-player-mute.svg") no-repeat center center / cover; */}
.mejs__button.mejs__fullscreen-button{ right: 1.2026rem; width: var(--btn-size); height: var(--btn-size); /* background: url("/images/common/icons/icon-player-fullscreen.svg") no-repeat center center / cover;*/ }
.mejs__button.mejs__speed-button{ right: calc(1.2026rem + var(--btn-size) + 15px); width: var(--btn-size); height: var(--btn-size); /*background: url("/images/common/icons/icon-player-speed.svg") no-repeat center center / cover;*/}

.mejs__button.mejs__play > svg, .mejs__button.mejs__pause > svg, .mejs__volume-button > svg, .mejs__fullscreen-button > svg{ display: none !important; }

/* 학습창 컨트롤 버튼 */
.mejs__controls .mejs__button { width: var(--btn-size); height: var(--btn-size); z-index: 1; background: none !important;  transform: none !important;  transition: none !important;}
.mejs__controls .mejs__button::before {content: ''; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-size: cover !important; background-position: center center !important; background-repeat: no-repeat !important; transition: transform 0.2s ease; z-index: -1; /* 버튼 내용물보다 뒤로 */}
.mejs__button.mejs__play::before { background-image: url("/images/common/icons/icon-player-play.svg"); }
.mejs__button.mejs__replay::before { background-image: url("/images/common/icons/icon-player-play.svg"); }
.mejs__button.mejs__pause::before { background-image: url("/images/common/icons/icon-player-pause.svg"); }
.mejs__button.mejs__volume-button::before { background-image: url("/images/common/icons/icon-player-volume.svg"); }
.mejs__button.mejs__unmute::before { background-image: url("/images/common/icons/icon-player-mute.svg"); }
.mejs__button.mejs__fullscreen-button::before { background-image: url("/images/common/icons/icon-player-fullscreen.svg"); }
.mejs__button.mejs__speed-button::before { background-image: url("/images/common/icons/icon-player-speed.svg"); }
.mejs__controls .mejs__button:hover::before { transform: scale(1.3);}
.mejs__controls .mejs__speed-button .mejs__speed-selector { transform: none !important; }

.mejs__controls .mejs__button > button{ width: var(--btn-size); height: var(--btn-size); margin: 0;}
.mejs__controls .mejs__button > button > svg{ display: none; }
.mejs__time.mejs__currenttime-container{ display: none;}
.mejs__time.mejs__duration-container{ position: absolute; position: absolute; top: 0; right: 1.2026rem; font-size: 1rem;}
.mejs__time-rail{ position: absolute !important; top: 0; left: 1.2026rem; width: calc(100% - 2.4052rem - 70px) !important;}
.mejs__time-current, .mejs__time-handle-content{ z-index: 1 !important; background-color: #f50723 !important;}
.mejs__time-handle-content{ width: 1.6271rem !important; height: 1.6271rem !important; left: -1.14rem !important; top: -0.65rem !important; border-color: #f50723 !important ;}
.mejs__time-handle{ z-index: 1 !important;}
/* 배속 커스텀 CSS */
.mejs__speed-selector-list { display: flex !important;}
.mejs__speed-slider-wrap { display: none !important;}
/* 1. 팝업 컨테이너 (검은색 배경 박스) */
.mejs__controls .mejs__speed-button .mejs__speed-selector { 
  position: absolute; width: min(604.8px, 31.5vw) !important; height: auto !important; background: #262626; border-radius: 2.2px; 
  bottom: min(var(--btn-size), 2.292vw) !important; /* 컨트롤바 위에 위치 */ right: max(-60px, -3.125vw) !important; /* 버튼 기준 정렬 보정 */ padding: min(20px, 1.042vw) min(25px, 1.302vw);
  visibility: hidden; /* 기본적으로 숨김 (hover시 표시) */ opacity: 0; transition: opacity 0.2s, visibility 0.2s; z-index: 9999;
}
/* 2. hover시 팝업 표시 */
.mejs__controls .mejs__speed-button:hover .mejs__speed-selector { visibility: visible !important; opacity: 1 !important; display: block !important;}
.mejs__controls .mejs__speed-selector::before { 
  content: '재생속도'; display: block; color: #fff; font-size: clamp(13px, 1.125vw, 21.6px); font-weight: 500; 
  margin-bottom: min(15.3px, 0.797vw); text-align: left; line-height: 1.5; letter-spacing: normal;
}
.mejs__speed-selector-list { display: flex !important; justify-content: space-between; align-items: center; position: relative; padding: 0 !important; margin: 0 !important; list-style: none !important;}
.mejs__speed-selector-list > li:first-child .label-wrap > label{ align-items: flex-start !important;}
.mejs__speed-selector-list > li:last-child .label-wrap > label{ align-items: flex-end !important;}
.mejs__speed-selector-list::before { 
  content: ''; position: absolute; top: min(5.1px, 0.266vw);  /* 동그라미 중심에 선이 오도록 높이 조절 */ left: 5px; right: 5px; 
  height: 0.7px; background: #979797;  z-index: 0;
}
.mejs__speed-selector-list .label-wrap > label{ 
  display: flex; flex-direction: column; align-items: center; gap: min(17.7px, 0.922vw); cursor: pointer;
}
.mejs__speed-selector-list .label-wrap .speed-txt{ 
  font-size: clamp(13px, 1.031vw, 19.8px); font-weight: normal; line-height: 1.64; letter-spacing: normal; color: #e5e5e5;
}
.mejs__speed-selector-list .label-wrap > label.mejs__speed-selected .speed-txt{ color: #fff; font-weight: 500;}
.mejs__speed-selector-list-item { margin: 0 !important; padding: 0 !important; z-index: 1; /* 선보다 위에 위치 */ background: transparent !important; cursor: pointer;}
.mejs__speed-selector-input { position: absolute; opacity: 0; width: 0; height: 0;}
/* 선택 및 hover */
.mejs__speed-selected { position: relative; color: #fff !important; }
.mejs__speed-selector-label .speed-dot { 
  position: relative; display: block; width: min(11.2px, 0.583vw); height: min(11.2px, 0.583vw); background: #dcdcdc; border-radius: 50%; transition: all 0.2s ease; box-sizing: border-box;
}
.mejs__speed-selector-label.mejs__speed-selected .speed-dot::before { 
  content: ""; display: inline-block; position: absolute; width: min(38.2px, 1.99vw); height: min(38.2px, 1.99vw); 
  border: min(2.88px, 0.15vw) solid #B3B3B3; border-radius: 50%; top: 50%; left: 50%; transform: translate(-50%, -50%);
}
.mejs__speed-selector-label:hover .speed-txt { color: #fff;}
/* 학습창 - 모바일 Android에서 정중앙에 위치하지 않는 이슈방지 */
/*#testVideo{ position: absolute; width: inherit; height: inherit;}*/
#testVideo > video{ position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 100%; height: 100%;}

/* 진도율 */
.progress-container { display: flex; flex-direction: column; gap: 8px;}
.progress-container .progress-info { display: flex; align-items: center; gap: 10px;}
.progress-container .progress-info label { flex-shrink: 0; font-size: 14px; font-weight: 500; line-height: 1.5; color: #d2d2d2;}
.progress-container .progress-info .progress-value { display: flex; align-items: center; justify-content: space-between; width: 100%; font-size: 14px; line-height: 1.5;}
.progress-container progress { -webkit-appearance: none; -moz-appearance: none; appearance: none; width: 100%; height: 12px; border: none;}
/* 1. 배경 (Track) - Chrome, Safari, Opera, Edge */
.progress-container progress::-webkit-progress-bar {
    background-color: #3a3a3a;
    border-radius: 32px;
    box-shadow: none;
}

/* 2. 채워지는 바 (Fill) - Chrome, Safari, Opera, Edge */
.progress-container progress::-webkit-progress-value {
    background-color: #e50814;
    border-radius: 32px;
    transition: width 0.5s ease;
}

/* 3. 배경 (Track) - Firefox */
.progress-container progress {
    background-color: #3a3a3a;
    border-radius: 32px;
}

/* 4. 채워지는 바 (Fill) - Firefox */
.progress-container progress::-moz-progress-bar {
    background-color: #e50814;
    border-radius: 32px;
}


/* 학습창 내 리뷰영역 */
.review-write-wrap .review-top-wrap{ margin-bottom: 12px; display: flex; align-items: center; justify-content: space-between;}
.review-write-wrap .review-top-wrap .sub-tit{ font-size: 16px; font-weight: bold; line-height: 1.5; letter-spacing: normal; color: #e5e5e5;}
.review-write-wrap .review-top-wrap .star-rating-wrap{ display: flex; align-items: center; gap: 10px;}
.review-write-wrap .review-top-wrap .star-rating-wrap .review-label{ font-size: 15px; font-weight: normal; line-height: 1.5; letter-spacing: normal; color: #d2d2d2;}
.review-write-wrap .review-top-wrap .star-rating-wrap ul.score{ display: flex; align-items: center; gap: 5px;}
.review-write-wrap .review-top-wrap .star-rating-wrap ul.score > li > img{ width: 15px; height: 15px; vertical-align: inherit; cursor: pointer;}
.btn-rev-cancel{ background-color: transparent !important;}
.review-alert-wrap{ display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: normal; line-height: 1.3; letter-spacing: normal; color: #eb3942;}
.review-alert-wrap i.icon-cancel{ flex-shrink: 0; display: inline-block; width: 16px; height: 16px; background: url("/images/common/icon-cancel.svg") no-repeat center center / cover;}

/*
*--------------------------------------------*
|                   Footer                   |
*--------------------------------------------*
*/
footer{ width: 100%;  }
footer .inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 2.08vw 3.13vw 1.30vw; }
footer .nav > *{ font-weight: normal; }
footer .nav .btn-wrap{ display: flex; justify-content: flex-start; gap: 25px; }
footer address{ margin-top: 0.625rem; color: #979797; font-weight: normal; line-height: 1.4; letter-spacing: normal; }
footer address p{ word-break: keep-all; }
footer address p span{ line-height: 1.3125rem; }

/*
*--------------------------------------------*
|        스텝                                 |
*--------------------------------------------*
*/
.step-wrap{ display: flex; justify-content: space-between; align-items: flex-start; gap: 63.3px; position: relative; width: 100%; margin: 30px auto 54px; }
.step-wrap .step-inner-wrap{ flex-shrink: 0; position: relative; }
.step-wrap .step-inner-wrap::before{ content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 40px; height: 40px; background: url("/images/common/common_sprites_check.png") no-repeat -70px -10px; }
.step-wrap .step-inner-wrap::after{ content: ""; position: absolute; top: 20px; right: 100%; height: 4px; width: 63.3px; border-radius: 40px; background-color: #414141; }
.step-wrap .step-inner-wrap.active:after{ background-color: #e50814; }
.step-wrap .step-inner-wrap:first-child::after{ display: none; }
.step-wrap .step-inner-wrap.active:before { background: url("/images/common/common_sprites_check.png") no-repeat -10px -10px;}
.step-wrap .step-inner-wrap strong{ display: block; margin-top: 60px; font-size: 18px; font-weight: 500; line-height: 1.33; letter-spacing: normal; color: #fff;}
.step-wrap .step-inner-wrap span{ color: #d2d2d2; font-size: 14px; font-weight: normal; line-height: 1.71; letter-spacing: normal; text-align: center; }

.step-cont .step-text-cont { padding: 4.16vw 20px 4.688vw; border-top: 1px solid #404040;}
.step-cont .step-text-cont .text-box { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 6px; margin-bottom: 24px;}
.step-cont .step-text-cont .text-box strong { font-size: 24px; font-weight: bold; letter-spacing: -0.48px; text-align: center; color: #fff;}
.step-cont .step-text-cont .text-box span { font-size: 15px; line-height: 1.6; letter-spacing: -0.3px; text-align: center; color: #d2d2d2;}
.step-cont .step-text-cont .btn-join { display: inline-flex; justify-content: center; align-items: center; width: auto; height: 48px; padding: 0 24px; line-height: 1;}

/*
*--------------------------------------------*
|                   List                    |
*--------------------------------------------*
*/
.list-bar { display: flex; align-items: center; gap: 15px;}
.list-bar .list-bar-box { display: flex; align-items: center; gap: 10px;}
.list-bar .list-bar-box:before { content: ''; display: inline-flex; width: 1px; height: 15px; background: #545454;}
.list-bar .list-bar-box p,
.list-bar .list-bar-box span { font-size: 15px; font-weight: 500; line-height: 1.5; color: #d2d2d2;}
.list-bar .list-bar-box p strong { font-weight: bold; color: #fff;}
.list-bar .list-bar-box:first-child:before { display: none;}


/*
*--------------------------------------------*
|                   아크디언                   |
*--------------------------------------------*
*/
.accordion-body[hidden] { display: none;}
.accordion-wrap { display: flex; flex-direction: column; gap: 12px;}
.accordion-item { border: 1px solid #404040; border-radius: 6px;}
.accordion-item .accordion-head { display: flex; justify-content: space-between; align-items: center; gap: 4px; width: 100%; padding: 12px 10px; border-radius: 6px 6px 0 0; background-color: rgba(255, 255, 255, 0.1); font-size: 16px; line-height: 1.6; color: #e5e5e5;}
.accordion-item .accordion-head i { flex-shrink: 0;}
.accordion-item .accordion-head .icon-acc-arrow { display: inline-flex; flex-shrink: 0; width: 36px; height: 36px; background: url("/images/common/icon-chevron-up.svg") no-repeat center; background-size: 20px; transform: rotate(180deg); transition: all .3s ease;}
.accordion-item .accordion-head .accordion-timer { justify-content: center; min-width: 110px; font-weight: normal; text-align: center;}
.accordion-item .accordion-head > span { display: inline-flex; align-items: center; justify-content: space-between; gap: 9px; width: 100%; font-weight: 500;}
.accordion-item .accordion-head .title-cont { display: inline-flex; align-items: center; gap: 9px; width: 100%; text-align: left;}
.accordion-item .accordion-head .name-date { display: inline-flex; align-items: center; gap: 10px; flex-shrink: 0; padding: 0 15px; font-size: 14px; line-height: 1.5; letter-spacing: -0.28px;}
.accordion-item .accordion-head .name-date .name { font-weight: bold; color: #fff;}
.accordion-item .accordion-head .name-date .date { color: #808080;}
.accordion-item .accordion-head .title { text-align: left; word-break: keep-all;}
.accordion-item .accordion-head .title br { display: none;}
.accordion-item .accordion-body { overflow: hidden; max-height: 0; transition: max-height 0.3s ease-out;}
.accordion-item .accordion-body > div { padding: 12px 30px 15px 50px;}
.accordion-item .accordion-body p { font-size: 14px; line-height: 1.6; color: #bcbcbc;}
.accordion-head[aria-expanded="true"] .icon-acc-arrow { transform: rotate(0deg);}


/*
*--------------------------------------------*
|        이용약관, 개인정처리방침 Popup        |
*--------------------------------------------*
*/
.k-window-content.kendo-window.terms-privacy{ padding: 0 20px 20px 20px !important; background-color: #181818 !important; }
.terms-privacy .acc-header, .terms-privacy .accordian-section:not(:last-child){ margin-bottom: 30px; }
.terms-privacy .acc-header-summary{ color: #d2d2d2; font-size: 15px; font-weight: normal; line-height: 1.5; letter-spacing: normal; text-align: left; }
.terms-privacy .acc-section-title{ padding: 12px 0; color: var(--white); font-size: 16px; font-weight: 500; line-height: 1.3; letter-spacing: normal; text-align: left; border-bottom: 1px solid #404040; }
.terms-privacy .acc-list-item button{ display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 12px 10px; color: #d2d2d2; font-size: 16px; font-weight: normal; line-height: 1.5; letter-spacing: -0.32px; text-align: left; box-sizing: border-box; border-bottom: 1px solid #404040; }
.terms-privacy .acc-list-item button.active{ border-bottom: none; }
.terms-privacy .acc-list-item button .icon-acc-arrow{ display: inline-block; width: 28px; height: 28px; background: url("/images/common/icons/icon-acc-arrow.png") no-repeat center center / cover; transition: all var(--transition-speed) var(--transition-linear); }
.terms-privacy .acc-list-item button.active .icon-acc-arrow{ transform: rotate(180deg); }
.terms-privacy .acc-item-content{ display: none; padding: 18px 20px; color: #d2d2d2; font-size: 15px; font-weight: normal; line-height: 1.65; letter-spacing: -0.3px; text-align: left; border-radius: var(--pd-bdrs-base4); background-color: #2a2a2a; }
.terms-privacy .acc-item-content.active{ display: block; }



/* --- Filter Container --- */
.filterContainer.header { position: fixed; top: 68px; left: 0; z-index: 99; transform-origin: top right; animation: fadeIn 0.2s ease-out;}
.filter-container { display: none; width: 100%; overflow: visible; border: 1px solid #404040; background-color: #0e0e0e;}
.filter-container.active { display: block;}
.filter-content-wrap { display: none; flex-direction: column; border-top: 1px solid #404040;}
.filterContainer.header.active .filter-content-wrap { display: block;}

/* --- Header --- */
.filter-container .filter-header { display: flex; justify-content: space-between; align-items: center; height: auto; padding: 15px 10px 16px 20px;}
.filter-container .header-title { display: flex; align-items: center; height: 100%; border-bottom: 0; color: #fff; font-size: 20px; font-weight: 500; line-height: normal; letter-spacing: -0.4px; text-align: left; cursor: pointer;}
.filter-container .filter-header .mobile-back-btn,
.filter-container .filter-header .mobile-close-btn { display: none;}
.filter-container .filter-header .mobile-back-btn { justify-content: center; align-items: center; width: 40px; height: 40px;}
.filter-container .filter-header .mobile-back-btn .btn-go-series { display: inline-flex; width: 26.7px; height: 26.7px; padding-left: 0; background-size: 27px;}
.filter-container .filter-header .search-area-wrap .check-box { display: none;}
.filter-container .filter-header .search-area-wrap .filter-sort { display: none;}

.filter-container .filter-header .header-icon{ margin-left: 12px; width: 24px; height: 24px; transition: transform 0.25s ease-in-out; background: url("/images/common/icon-chevron-up.svg") no-repeat center center; cursor: pointer;}
.filter-container .filter-header .header-title.collapsed .header-icon { transform: rotate(180deg);}
.filter-container .filter-header .search-area { position: relative; }
.filter-container .filter-header .search-input { width: 360px; height: 50px; padding: 0 20px 0 54px; line-height: 50px; font-size: 16px; font-weight: 500; color: #fff; letter-spacing: normal; border-radius: 8000px; background-color: #333; border: none;}
.filter-container .filter-header .search-input::placeholder { font-size: 16px; font-weight: 500; color: #fff;}
.filter-container .filter-header .search-input:focus { border-color: #fff; }
.filter-container .filter-header .search-icon { position: absolute; left: 20px; top: 50%; transform: translateY(-50%);}

.filter-container.header .filter-header .header-icon { display: none;}

.filter-sort { display: flex; align-items: center; gap: 10px; position: absolute; top: 23px; right: 18px;}
.filter-sort li { display: flex; align-items: center; gap: 10px;}
.filter-sort li:before { content: ''; display: inline-block; width: 1px; height: 15px; background: #808080;}
.filter-sort li:first-child:before { display: none;}
.filter-sort li label { font-size: 15px; color: #bcbcbc; cursor: pointer;}
.filter-sort li label.active { font-weight: bold; color: #fff;}

/* --- Extra Input Section --- */
.filter-container .filter-sub-header { z-index: 10; position: relative; padding: 15px 18px; border-bottom: 1px solid #404040;}
.filter-container .filter-sub-header .input-wrapper { display: flex; align-items: center; gap: 20px; position: relative; width: fit-content;}
.filter-container .filter-sub-header .input-wrapper .check-box label .check { width: 18px; height: 18px;}
.filter-container .filter-sub-header .input-wrapper .check-box label { font-size: 16px;}
.filter-container .filter-sub-header .input-wrapper .extra-input-area{ position: relative; width: 360px;}
.filter-container .filter-sub-header .extra-input { position: relative; width: 100%; height: 40px; line-height: 40px; padding: 0 10px; color: #fff; font-size: 15px; font-weight: 500; letter-spacing: normal; border-radius: 4px; border-color: #333; background-color: #333;}
.filter-container .filter-sub-header .extra-input:focus { border-color: #fff; }
.filter-container .filter-sub-header .search-icon{ position: absolute; right: 10px; top: 50%; transform: translateY(-50%);}

/* --- Search Result Layer --- */
.search-result-layer { z-index: 10; margin-top: 10px; position: absolute; top: 100%; left: 0; width: 100%; background-color: #333; border: none; border-radius: 4px; display: none;}
.search-result-layer .result-list { max-height: 250px; overflow-y: auto; padding: 8px 0;}
.search-result-layer .result-item { padding: 8px 20px; cursor: pointer; display: flex; align-items: center; color: #bcbdbc; font-size: 15px; font-weight: normal; letter-spacing: normal; text-align: left;}
.search-result-layer .result-item:last-child{ margin-bottom: 0;}
.search-result-layer .result-item .check-box{ display: flex; align-items: center;}
.search-result-layer .result-item .sub-name{ font-size: 15px; font-weight: normal; color: #bcbcbc; letter-spacing: normal;}
.search-result-layer .result-item .result-highlight { color: #fff; font-weight: 500;}
.result-item label span { display: inline-flex; align-items: center; gap: 2px;}

.filter-container .result-footer { border-top: 1px solid #545454; padding: 12px 10px; display: flex; justify-content: flex-end; gap: 8px;}
.filter-container .result-footer > button { height: 32px; width: auto; padding: 0 10px; min-width: 74px; font-size: 14px; font-weight: 500; color: #fff; letter-spacing: normal; border-radius: 4px;}
.filter-container .btn-cancel-layer { background-color: #333; }
.filter-container .btn-cancel-layer:hover { font-weight: bold; }
.filter-container .btn-confirm-layer { background-color: rgba(255, 255, 255, 0.2); }
.filter-container .btn-confirm-layer:hover { font-weight: bold; }

/* --- Body (3 Columns Layout) --- */
.filter-body {
    display: flex;
    height: 200px;
    border-bottom: 1px solid #404040;
}

.custom-scroll::-webkit-scrollbar { width: 6px; }
.custom-scroll::-webkit-scrollbar-thumb { background-color: #444; border-radius: 3px; }
.custom-scroll::-webkit-scrollbar-track { background-color: #1e1e1e; }

.col {
    overflow-y: auto;
    height: 100%;
}

/* 1st Column: Main Category (3 Columns Grid) */
.filter-container .filter-body .col-main,
.filter-container .filter-body .col-sub{ width: 35%; display: grid; grid-template-columns: repeat(3, 1fr);  grid-auto-rows: 40px; gap: 2px 8px; padding: 15px; align-content: start; border-right: 1px solid #404040;}

.filter-container .filter-body .category-item,
.filter-container .filter-body .sub-item  { display: flex; justify-content: space-between; align-items: center; padding: 0 12px; color: #bcbcbc; font-size: 14px; line-height: normal; letter-spacing: -0.28px; text-align: left; cursor: pointer; border: 1px solid transparent;  border-radius: 4px;  background-color: transparent; transition: all 0.2s; word-break: keep-all;}

.filter-container .filter-body .category-item:hover,
.filter-container .filter-body .sub-item:hover { background-color: #2a2a2a; color: #fff; }

.filter-container .filter-body .category-item.active,
.filter-container .filter-body .sub-item.active { background-color: #2a2a2a; color: #fff; font-weight: bold; z-index: 1;}

.filter-container .filter-body .category-item.active::after,
.filter-container .filter-body .sub-item.active::after { content: ''; display: inline-block; width: 18px; height: 18px; background: url("/images/common/icon-filter-btn-right.svg") no-repeat center center / cover;}

/* 3rd Column: Details */
.filter-container .filter-body .col-detail { width: 30%; padding: 15px;}
.filter-container .filter-body .tags-wrapper { display: flex; flex-wrap: wrap; gap: 8px;}
.filter-container .filter-body .tags-wrapper .tag-btn { padding: 0 24px; height: 32px; line-height: 32px; font-size: 14px; font-weight: normal; color: #bcbcbc; border: 1px solid #444; border-radius: 1000px; border: solid 1px rgba(255, 255, 255, 0.3); background-color: #0e0e0e; transition: all 0.2s;}
.filter-container .filter-body .tags-wrapper .tag-btn:hover { border: solid 1px rgba(255, 255, 255, 0.3); color: #fff; }
.filter-container .filter-body .tags-wrapper .tag-btn.selected { font-weight: bold; border: solid 1px rgba(255, 255, 255, 0.3); background-color: #2a2a2a; color: #fff;}

/* --- Footer --- */
.filter-container .filter-footer { padding: 16px 10px; display: flex; align-items: center; justify-content: space-between;}
.selected-area { flex: 1; display: flex; flex-wrap: wrap; justify-content: flex-start; width: 100%; gap: 6px; margin-right: 20px;}
.selected-chip { display: flex; align-items: center; padding: 0 15px; height: 40px; line-height: 40px; background-color: #333; color: #fff; font-size: 15px; font-weight: normal; border-radius: 80000px; animation: fadeIn 0.2s ease-in-out;}
.selected-chip > span { display: inline-flex; align-items: center;}
@keyframes fadeIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }

.chip-path,
.chip-name{ color: #fff; font-size: 15px; font-weight: normal; letter-spacing: -0.3px;}
.chip-path { display: flex; align-items: center; justify-content: center; }
.icon-filter-arrow{ display: inline-block; width: 18px; height: 18px; background: url("/images/common/icon-filter-right.svg") no-repeat center center / cover;}
.chip-remove { margin-left: 8px; display: inline-block; width: 20px; height: 20px; background: url("/images/common/icon-filter-delete.svg") no-repeat center center / cover; cursor: pointer;}
.chip-remove:hover { color: #fff; }

.filter-container .footer-buttons { display: flex; align-items: center; gap: 15px; }
.filter-container .btn-reset { color: #999; font-size: 13px; display: flex; align-items: center; gap: 5px; }
.filter-container .btn-reset:hover { background-color: transparent; color: #fff; }
.filter-container .btn-reset .icon-rotate-right{ display: inline-block; margin-left: 4px; width: 16px; height: 16px; background: url("/images/common/icon-filter-rotate.svg") no-repeat center center / cover;}
.filter-container .btn-filer-search { padding: 0 20px; width: auto; min-width: 120px; height: 48px; line-height: 48px; font-size: 16px; font-weight: 500; color: #fff; letter-spacing: normal; border-radius: 4px; background-color: rgba(255, 255, 255, 0.2); }
.filter-container .empty-msg { color: #555; font-size: 14px; text-align: center; width: 100%; padding: 10px 0; }


.mobile-filter-body { display: none; background-color: #0e0e0e; max-height: 500px; overflow-y: auto; }
.m-depth1-item { border-bottom: 1px solid #333; }
.m-depth1-head { padding: 20px 30px; display: flex; justify-content: space-between; align-items: center; cursor: pointer; font-size: 16px; font-weight: normal; letter-spacing: normal; }
.m-depth1-head.active { color: #fff; border-bottom: 1px solid #333; }
.m-depth1-head i { transition: 0.3s; font-size: 12px; }

.m-depth2-list { display: none; padding: 18px 0;}
.m-depth2-head { position: relative; padding: 6px 45px; display: flex; justify-content: space-between; align-items: center; cursor: pointer; color: #bcbcbc; font-size: 14px; line-height: 1.3; letter-spacing: normal;}
.m-depth2-head::before{ content: "-"; position: absolute; top: 50%; left: 30px; transform: translateY(-50%);}
.m-depth2-head.active { color: #fff; font-weight: bold;}
.m-depth2-head i { transition: 0.3s; font-size: 10px; }

.m-depth3-content { display: none; width: calc(100% - 40px); margin: 0 auto; padding: 10px 17px 12px 17px; font-size: 14px; font-weight: normal; line-height: 1.3; letter-spacing: normal; text-align: left; color: #bcbcbc; background-color: #262626; border-radius: 4px;}
.m-depth3-content .tags-wrapper{ display: flex; flex-direction: column; width: 100%;}
.m-depth3-content .tags-wrapper > .tag-btn { position: relative; width: 100%; padding: 5px 5px 5px 14px;  font-size: 14px; color: #bcbcbc; font-weight: normal; line-height: 1.3; letter-spacing: normal; text-align: left;}
.m-depth3-content .tags-wrapper > .tag-btn:hover,
.m-depth3-content .tags-wrapper > .tag-btn:focus,
.m-depth3-content .tags-wrapper > .tag-btn.active{ color: #fff; text-decoration: underline;}
.m-depth3-content .tags-wrapper > .tag-btn::before{ content: ""; position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 4px; height: 4px; background-color: #bcbcbc; border-radius: 100%;}

/* --- Filter Container --- */

/* --- Header --- */
.header-title {
    display: flex;
    align-items: center;
    height: 100%;
    font-size: 16px;
    font-weight: bold;
    color: #fff;
    border-bottom: 3px solid #fff;
    padding: 0 5px;
}

.header-icon {
    font-size: 10px;
    margin-left: 8px;
    transform: rotate(180deg);
}

.search-area {
    position: relative;
}
.search-input {
    background-color: #2c2c2c;
    border: 1px solid #444;
    color: #fff;
    padding: 8px 35px 8px 15px;
    border-radius: 20px;
    width: 250px;
    font-size: 13px;
    outline: none;
}
.search-input:focus { border-color: #666; }
.search-icon {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #888;
    font-size: 14px;
}

/* --- Extra Input Section --- */
.input-wrapper {
    position: relative;
}
.extra-input {
    width: 100%;
    background-color: #1e1e1e;
    border: 1px solid #444;
    color: #fff;
    padding: 12px 15px;
    font-size: 14px;
    border-radius: 4px;
    outline: none;
}
.extra-input:focus { border-color: #38f; }
.extra-input::placeholder { color: #777; }

/* --- Search Result Layer --- */
.search-result-layer {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background-color: #2c2c2c;
    border: 1px solid #444;
    border-radius: 0 0 4px 4px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.5);
    z-index: 100;
    display: none;
    margin-top: 5px;
}
.result-list {
    max-height: 250px;
    overflow-y: auto;
    padding: 10px 0;
}
.result-item {
    padding: 10px 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #ccc;
}
.result-item:hover {
    background-color: #3a3a3a;
    color: #fff;
}
.result-item label { align-items: center; width: 100%; cursor: pointer;}

.result-highlight {
    color: #38f;
    font-weight: bold;
}

.result-footer {
    border-top: 1px solid #444;
    padding: 10px 20px;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    background-color: #252525;
    border-radius: 0 0 4px 4px;
}
.result-footer button {
    font-size: 13px;
    padding: 6px 15px;
    border-radius: 4px;
    font-weight: bold;
}
.btn-cancel-layer { background-color: #444; color: #fff; }
.btn-cancel-layer:hover { background-color: #555; }
.btn-confirm-layer { background-color: #38f; color: #fff; }
.btn-confirm-layer:hover { background-color: #29d; }

/* --- Body (3 Columns Layout) --- */

.custom-scroll::-webkit-scrollbar { width: 6px; }
.custom-scroll::-webkit-scrollbar-thumb { background-color: #444; border-radius: 3px; }
.custom-scroll::-webkit-scrollbar-track { background-color: #1e1e1e; }

/* 1st Column: Main Category (3 Columns Grid) */
.category-item {
    padding: 5px;
    font-size: 14px;
    color: #aaa;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;

    border: 1px solid transparent;
    border-radius: 4px;
    background-color: transparent;

    transition: all 0.2s;
    word-break: keep-all;
    line-height: 1.3;
}

.category-item:hover { background-color: #262626; color: #ddd; }

.category-item.active {
    background-color: #333; /* 회색 배경 */
    color: #fff; /* 흰색 폰트 */
    font-weight: bold;
    border: 1px solid #333;
    z-index: 1;
}

.category-item.active::after {
    content: '\f054'; /* FontAwesome Chevron Right */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 10px;
    margin-left: 6px;
    display: inline-block;
    color: #fff;
}

/* 2nd Column: Sub Category (3 Columns Grid - Same as 1st Column) */
.col-sub {
    width: 35%; /* 비율 조정: 25 -> 35% */
    /* CSS Grid 적용 (3열) */
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 2열 -> 3열 변경 */
    grid-auto-rows: 60px;
    gap: 0;
    padding: 10px;
    align-content: start;
}

.sub-item {
    padding: 5px;
    font-size: 14px;
    color: #aaa;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;

    border: 1px solid transparent;
    border-radius: 4px;
    background-color: transparent;

    transition: all 0.2s;
    word-break: keep-all;
    line-height: 1.3;
}

.sub-item:hover { background-color: #2a2a2a; color: #ddd; }

.sub-item.active {
    background-color: #333; /* 회색 배경 */
    color: #fff; /* 흰색 폰트 */
    font-weight: bold;
    border: 1px solid #333;
    z-index: 1;
}

.sub-item.active::after {
    content: '\f054'; /* FontAwesome Chevron Right */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 10px;
    margin-left: 6px;
    display: inline-block;
    color: #fff;
}

/* 3rd Column: Details */
.col-detail {
    width: 30%; /* 비율 조정: 35 -> 30% */
    padding: 25px;
}
.detail-header {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 15px;
    color: #fff;
}
.tags-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.tag-btn {
    padding: 8px 18px;
    border: 1px solid #444;
    border-radius: 50px;
    font-size: 13px;
    color: #bbb;
    background-color: #252525;
    transition: all 0.2s;
}
.tag-btn:hover { border-color: #666; color: #fff; }
.tag-btn.selected {
    background-color: #fff;
    color: #000;
    border-color: #fff;
    font-weight: bold;
}

/* --- Footer --- */
.selected-area {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-right: 20px;
}
@keyframes fadeIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }

.chip-path { color: #888; font-size: 11px; margin-right: 6px; }
.chip-name { margin-right: 8px; font-weight: bold; }
.chip-remove { cursor: pointer; color: #aaa; font-size: 12px; }
.chip-remove:hover { color: #fff; }

.footer-buttons { display: flex; align-items: center; gap: 15px; }
.btn-reset { color: #999; font-size: 13px; display: flex; align-items: center; gap: 5px; }
.btn-reset:hover { color: #fff; }
.empty-msg { color: #555; font-size: 14px; text-align: center; width: 100%; padding: 10px 0; }
.mobile-filter-btn { display: none; justify-content: center; align-items: center; gap: 4px; height: 40px; padding: 0 18px; border: solid 1px rgba(255, 255, 255, 0.5); border-radius: 8000px; font-size: 15px; line-height: 3.33; letter-spacing: -0.3px; color: #fff; cursor: pointer;}

/* 모바일 필터 결과물 보여주는 영역 */
.mobile-filter-btn-wrap { display: none;}
.mobile-filter-title { display: none;}
.filter-mobile-result { display: none; align-items: center; gap: 10px; position: relative; padding: 0 8px 8px;}
.filter-mobile-result:before { content: ''; position: absolute; top: 0; right: 0; z-index: 1; width: 74px; height: 40px; background-image: linear-gradient(to right, rgba(14, 14, 14, 0) 25%, #0e0e0e 100%);}
.pdBtn-filter-reload { display: inline-flex; justify-content: center; align-items: center; flex-shrink: 0; width: 40px; height: 40px; border-radius: 8000px; border: 1px solid rgba(255, 255, 255, 0.5);}
.pdBtn-filter-reload:hover { border-color: #fff;}
.filter-mobile-result .filter-result-category { display: flex; align-items: center; gap: 6px; overflow-x: auto; width: 100%; padding-right: 60px;}
.filter-mobile-result .selected-chip { flex-shrink: 0; height: 36px; line-height: 36px;}
.filter-mobile-result .selected-chip .chip-remove { width: 16px; height: 16px; background: url("/images/common/icons/icon-x-gray.svg") no-repeat center center / cover;}




/*
*--------------------------------------------*
|                    header 필터                   |
*--------------------------------------------*
*/
.header-category { display: inline-flex; gap: 10px; align-items: center;}
.toggle-btn { display: inline-flex; flex-direction: column; justify-content: center; align-items: center; gap: 6px; flex-shrink: 0; position: relative; width: 40px; height: 40px; border-radius: 50%;}
.toggle-btn:hover,
.toggle-btn.active { background-color: rgba(255, 255, 255, 0.15);}
.toggle-btn::before,
.toggle-btn::after,
.toggle-btn .bar { left: 0; right: 0; width: 24px; height: 2px; background-color: #fff; border-radius: 2px; transition: all 0.25s ease-in-out;}
.toggle-btn::before { content: ""; }
.toggle-btn::after { content: "";}

/*
*--------------------------------------------*
|                    평점및리뷰 팝업                |
*--------------------------------------------*
*/
.score-review-write-wrap { display: flex; flex-direction: column;}
.score-review-write-wrap > strong { margin-bottom: 15px; font-size: 24px; font-weight: bold; text-align: center; letter-spacing: -0.48px; color: #fff;}
.score-review-write-wrap textarea {}
.review-star.check-box-wrap { display: flex; justify-content: center; gap: 2px; margin-bottom: 25px;}
.review-star.check-box-wrap .icon-star { display: inline-flex; width: 30px; height: 30px; background: url("../images/sub/star-off-big.png") no-repeat center;}
.review-star.check-box-wrap input:checked + label .icon-star { background: url("../images/sub/star-on-big.png") no-repeat center;}

/*
*--------------------------------------------*
|                    list style              |
*--------------------------------------------*
*/
.dot-list { display: flex; align-items: center; gap: 6px;}
.dot-list li { display: flex; align-items: center; gap: 6px; color: #b3b3b3;}
.dot-list li:before { content: ''; display: inline-flex; width: 4px; height: 4px; border-radius: 50%; background: #b3b3b3;}
.dot-list li:first-child:before { display: none;}
.dot-list li .col-white { color: #fff;}

/*
*--------------------------------------------*
|                    color style              |
*--------------------------------------------*
*/
.col-white { color: #fff !important;}
.col-80 { color: #808080 !important;}



/*
*--------------------------------------------*
|                   Join                    |
*--------------------------------------------*
*/
.profile-file-upload input[type="file"] { display: none;}
.form-group-wrap .form-group .profile-file-upload { justify-content: center; align-items: center; gap: 0;}
.form-group-wrap .form-group .profile-file-upload label { justify-content: center; align-items: center; position: relative; width: auto; cursor: pointer;}
.form-group-wrap .form-group .profile-file-upload label span { display: inline-flex; justify-content: center; align-items: center; position: absolute; bottom: 0; right: 0; width: 40px; height: 40px; border-radius: 50%; border: 1px solid #808080; background-color: #181818;}
.form-group-wrap .form-group .profile-file-upload img { width: 130px; height: 130px; border-radius: 50%; object-fit: cover;}
.form-group-wrap .form-group .profile-file-upload .k-upload-files,
.form-group-wrap .form-group .profile-file-upload .k-upload-status {
    display: none !important;
}

/* 업로드 버튼 커스텀 (Kendo 기본 버튼 숨기기 보다는 감싸는 영역 제어) */
.form-group-wrap .form-group .profile-file-upload .k-upload {
    display: none;
    border: none;
    background: transparent;
}
.form-group-wrap .form-group .profile-file-upload .k-upload-button {
    display: none; /* input file을 직접 label로 제어할 경우 */
}
.form-group-wrap .form-group .profile-file-upload > div { width: 100%; margin-top: 20px;}
.form-group-wrap .form-group .profile-file-upload > div > p { font-size: 14px; line-height: 1.8; letter-spacing: -0.28px; color: #d2d2d2;}


/*
*--------------------------------------------*
|                   Tab                      |
*--------------------------------------------*
*/
.tab-cont-wrap { padding: 0 60px; }
/* .tab-cont-wrap .tab-cont-padding { padding: 0 44px;}
.tab-cont-wrap .tab-cont-padding.tab-cont-inst { padding: 0 60px;}
.tab-cont-wrap .watched-section { padding-top: 20px;} */



/*
*--------------------------------------------*
|                   콜아웃                      |
*--------------------------------------------*
*/
.corout { display: flex; flex-direction: column; padding: 18px 16px; border-radius: 6px; background: #2f2f2f;}
.corout p { display: flex; gap: 8px; font-size: 16px; font-weight: 500; line-height: 1.6; letter-spacing: -0.32px; color: #fff;}
.corout p i { flex-shrink: 0;}


/*
*--------------------------------------------*
|                    Media                   |
*--------------------------------------------*
*/

@media screen and (min-width: 2560px){
    /* 학습창 */
    .mejs__time-rail{ width: calc(100% - 2.4052rem - 80px) !important;}
}
@media screen and (max-width: 1440px) {
    .brand-item .info .info-top { gap: 16px; }
    .brand-item .info .brand-bottom .dl-group dt {min-width: 60px;}
    .brand-item .flex-wrap, .prdct-brand-info .flex-wrap {gap: 6px; }
    .brand-item .flex-wrap, .prdct-brand-info .review-area {gap: 2px;}
}

@media screen and (max-width: 1280px) {
    /* Common */
    .for-pc{ display: none !important; }
    .for-tb{ display: block !important; }

    /* Gnb */
    #headerGnb.for-pc{ display: none !important; }
    #headerGnbTb.for-tb{ display: block !important; padding: 0 10px; height: 54px;}
    .common-sub-section-wrap{ /*margin-top: 54px !important;*/ margin-top: 0 !important;}
    .gnb-inner-wrap{ display: flex; align-items: center; gap: 10px; height: 54px; width: 100%;}
    .gnb-inner-wrap .util{ width: unset;}
    #tbGnbMenu{  position: fixed;top: 54px;right: -100vw; display: flex; flex-direction: column; padding: 54px 16px 16px 16px; width:100%; height: 100vh; transition: right 0.25s ease-in-out;background: var(--pd-bg-base);}
	#tbGnbMenu.active{ right: 0; }
    #tbGnbMenu ul{ flex-direction: column; align-items: center; gap: 8.2vw;}
    #tbGnbMenu ul li a{ font-size: 20px; font-weight: bold; line-height: 28px; letter-spacing: -0.4px;}
    #tbGnbMenu ul > li > ol{ display: none;}
    .gnb{ z-index: 13; padding: 4.1vw; }
    .gnb .menu-list{ order: 3; overflow-x: auto; }
    .gnb .menu-list ul{ gap: 5.13vw; }
    .gnb .util{ width: calc(100% - 140px); justify-content: flex-end; }
    .gnb-toggle-menu-li, .li-mid{ padding: 0 6px;}
    .gnb-toggle-menu { position: relative; width: 20px; height: 15px;}
    .gnb-toggle-menu::before, .gnb-toggle-menu::after, .gnb-toggle-menu .bar { left: 0; right: 0; width: 100%; height: 2px; background-color: #fff; border-radius: 2px; transition: all 0.25s ease-in-out;}
    .gnb-toggle-menu::before { content: ""; position: absolute; top: 0;}
    .gnb-toggle-menu::after{ content: ""; position: absolute; top: calc(100% - 2px);}
    .gnb-toggle-menu .bar{ position: absolute; top: 50%; transform: translateY(-50%); width: 80%;}
    .gnb-toggle-menu.active::before { top: calc(50% - 1px); transform: rotate(45deg);}
    .gnb-toggle-menu.active::after { top: calc(50% - 1px); transform: rotate(-45deg);}
    .gnb-toggle-menu.active .bar { opacity: 0;}


    .common-tit-wrap .common-tit { font-size: 24px;}

    /* 헤더 마이셀프 메뉴 */
    .my-gnb-layer { left: auto !important; right: 20px; width: 270px !important; padding-top: 10px;}
    .my-gnb-layer ul li a { padding: 12px 30px;}

  

    /* Swiper */
    .swiper-slide.swiper-slide-prev{ opacity: 1 !important; }

    .premium-wrap{ padding-right: 4.1vw; }
    
    .common-list-wrap{ display: flex; flex-wrap: wrap; /*justify-content: space-between;*/ gap: 8px;}
    .common-list-wrap .common-item{ display: flex; /*width: calc(50% - 15px);*/ flex-direction: column; }
    .common-list-wrap .common-item .common-cont-img{ width: 100%; /*border-radius: var(--pd-bdrs-base) 0 0 var(--pd-bdrs-base);*/ }
    .common-list-wrap .common-list-inner .info .ctgr-nm{ font-size: 0.92rem; line-height: 1.4; }
    .common-list-wrap .common-list-inner .info .hash-tag-wrap span{ font-size: 0.8571rem; line-height: 1.3; }
    .common-list-wrap .common-list-inner .info .hash-tag-wrap{ margin-bottom: 0.8571rem; }
    .sub-section{ padding-bottom: 0; }
    .sub-section.pd-mt10{ margin-top: 0; }

    .k-datepicker{ height: 42px; width: 50%; }
	
	/* Table For Mobile */
    .common-card-wrap .common-card{ padding: 16px; border-top: 0; border-bottom: 1px solid #404040; }
    .common-card-wrap .common-card .card-title{ margin-bottom: 0.25rem; color: var(--white); font-size: 1rem; font-weight: normal; line-height: 1.4; letter-spacing: -0.02rem; text-align: left; cursor: pointer; text-decoration: underline; }
    .common-card-wrap .common-card .card-info .card-item{ display: flex; align-items: center; margin-bottom: 0.3125rem; }
    .common-card-wrap .common-card .card-info{ color: var(--white); font-size: 0.875rem; font-weight: normal; line-height: 1.4; letter-spacing: -0.0175rem; text-align: left; }
    .common-card-wrap .common-card .card-info .item-label{ display: inline-block; width: 23.08%; color: #d2d2d2; }
    .common-card-wrap .common-card .card-actions{ margin-top: 0.5rem; text-align: center; }
    .common-card-wrap .common-card .card-actions button{ width: 100%; height: 40px; line-height: 40px; font-size: 14px; }
    /* 세로 */
    .common-card-wrap .common-card .card-col { display: flex; flex-direction: column; gap: 8px; cursor: pointer;}
    .common-card-wrap .common-card .card-col .card-item { flex-direction: column; align-items: flex-start; margin-bottom: 0;}
    .common-card-wrap .common-card .card-info.card-col .item-label { display: none;}
    .common-card-wrap .common-card .card-info.card-col .item-value { font-size: 14px; line-height: 1.4; letter-spacing: -0.28px; color: #d2d2d2;}
    .common-card-wrap .common-card .card-info.card-col .item-title { font-size: 16px;}

    /* 학습창 */
    .std-wrap .conts-list-wrap li .conts-duration.for-tb{ text-align: left; }

    /* Popup */
    .k-window-title{ font-size: 1.0625rem; }
    .rlst-info > span{ font-size: 0.875rem; }
    .pop-common-desc{ font-size: 0.875rem; }

/*  step  */
    .step-wrap { gap: clamp(20px, 7vw, 54.3px); margin: 25px auto 40px;}
    .step-wrap:after { content: ''; position: absolute; top: 11px; left: 0; z-index: -1; width: 100%; height: 2px; border-radius: 40px; background: #414141;}
    .step-wrap:before { content: ''; position: absolute; top: 11px; left: 0; z-index: 0; height: 2px; border-radius: 40px; background: #e50814;}
    .step-wrap.act-2::before { width: 50%;}
    .step-wrap.act-3::before { width: 66.6%;}
    .step-wrap.act-4::before { width: 100%;}
    .step-wrap .step-inner-wrap { display: flex; align-items: center; gap: 6px; padding: 0 6px; background: #181818;}
    .step-wrap .step-inner-wrap::before { position: relative; left: 0; transform: translateX(0); width: 24px; height: 24px; background: url("/images/common/step_.svg") no-repeat center; background-size: contain;}
    .step-wrap .step-inner-wrap.active:before { background: url("/images/common/step_chk.svg") no-repeat center; background-size: contain;}
    .step-wrap .step-inner-wrap strong { display: none; margin-top: 0; font-size: 14px; line-height: 1.3;}
    .step-wrap .step-inner-wrap.active strong { display: block;}
    .step-wrap .step-inner-wrap.complete strong { display: none;}
    .step-wrap .step-inner-wrap::after { display: none;}
/*   세로 */
/*    .step-wrap{ flex-direction: column; width: 100%; gap: 0; }*/
/*    .step-wrap .step-inner-wrap{ padding-bottom: 5rem; }*/
/*    .step-wrap .step-inner-wrap::before{ left: 0; transform: unset; }*/
/*    .step-wrap .step-inner-wrap::after{ top: 2px; left: 18px; width: 4px; height: 100%; z-index: -1; }*/
/*    .step-wrap .step-inner-wrap strong{ margin-top: 8px; margin-left: 60px; }*/
/*    .step-wrap .step-inner-wrap span{ display: inline-block; margin-top: 8px; margin-left: 10px; }*/
/*    .step-wrap .step-inner-wrap.second{ flex-direction: row; }*/

    .callout { padding: 12px 15px;}
    .callout p { font-size: 13px;}

    .filter-container { margin-bottom: 20px;}

    /* 시청, 관심, 통합검색 통합 여백 */
    .tab-cont-wrap { padding: 0 36px;}

/*  리스트  */
    .brand-swiper.brand-wrap .brand-item { width: 100%;}
    .brand-item .info {gap: 24px;}
    .brand-item .info .info-top { flex-direction: column;}
    .common-init-pg .common-swiper-wrap .common-list-inner { width: 100% !important;}

/*  강사  */
    .common-list-wrap.inst-wrap .common-list-inner { width: calc((100% - (16px * 3)) / 4); padding-bottom: 12px;}

    .common-list-wrap.inst-wrap .common-item { align-items: center; aspect-ratio: auto; /*  padding-top: 10px; padding-bottom: 20px; */}
    .common-list-wrap.inst-wrap .common-item .common-cont-img { flex-shrink: 0; width: 59.2px; height: 64.1px;}
    .common-list-wrap.inst-wrap .info { gap: 2px; min-height: 0;}
    .common-list-wrap.inst-wrap .info .common-item-title { font-size: 16px;}
    .common-list-wrap.inst-wrap .info span,
    .common-list-wrap.inst-wrap .info p { font-size: 14px;}
    .common-list-wrap.inst-wrap .info p { padding: 0 5px;}
    .common-list-wrap.inst-wrap .common-list-inner .info .review-area > .score,
    .common-swiper-wrap.inst-wrap .swiper-slide .info .review-area > .score,
    .common-list-wrap.inst-wrap .common-list-inner .info .review-area > .review-count,
    .common-swiper-wrap.inst-wrap .swiper-slide .info .review-area > .review-count{ font-size: 11px;}
    .common-list-wrap.brand-wrap .common-item .btn-sub-default.subscribed{display: flex !important; align-items: center; justify-content: center; gap: 2px;}
    .btn-sub-default.subscribed::before, .brand-btn-wrap .subscribed::before{ width: 16px; height: 16px; position: static !important; transform: none !important;/* 기존 left 값 제거 */left: auto !important; margin: 0 !important; display: inline-block;}
    .common-list-wrap .common-list-inner .info, .common-swiper-wrap .swiper-slide .info { height: auto; min-height: 78px; padding-top: 12px;}
    .common-list-wrap .common-btnBox .btn-border { height: 38px; font-size: 12px;}
    .common-list-wrap .common-btnBox .btn-border .review-area strong { font-size: 11px;}
    .common-init-pg .common-list-wrap.inst-wrap .common-list-inner { padding: 5px 5px 12px;}

}

/*디자인변경건 반영*/
@media screen and (min-width: 1025px) {
    .pd-right .common-swiper-wrap .no-data, 
    .pd-right .common-list-wrap .no-data{ padding-right: 60px;}
    /* .main-section .swiper-button-prev{ left: calc((60px - 13.89px - 10px) / 2) !important;} */
    /* .main-section .swiper-button-next{ right: calc((60px - 13.89px - 10px) / 2) !important; } */
    .common-swiper-wrap .swiper-button-prev, 
    .common-swiper-wrap .swiper-button-next { width: 36px; height: 36px;}
    /* .common-swiper-wrap .swiper-button-prev{ left: calc((60px) * -1) !important;} */

    .common-list-wrap{ gap: 24px;}
    .common-init-pg .common-list-wrap{ padding-right: 0;}
    .common-init-pg .common-list-wrap .common-list-inner{ width: calc((100% - (24px * 3)) / 4); flex-grow: 0; flex-shrink: 0; box-sizing: border-box;}
    .common-init-pg .common-list-wrap .swiper-slide .common-list-inner{ width: 100%; flex-grow: 0; flex-shrink: 0; box-sizing: border-box;}
    .brand-wrap .brand-item { width: calc((100% - (24px * 3)) / 4); flex-grow: 0; flex-shrink: 0;}

    /* 채널 슬라이드 */
    .brand-wrap.brand-swiper .brand-item { width: 100%;}

    /* Brand 상세 */
    .common-sub-section-wrap .common-list-wrap.brand-dtl-wrap .common-list-inner{ width: calc((100% - (24px * 3)) / 4);}
    /* 강사 */
    .common-list-wrap.inst-wrap .common-list-inner { width: 100%; gap: 16px; padding: 16px 12px; }
    /*.common-init-pg .common-list-wrap.inst-wrap .common-list-inner { width: calc((100% - (24px * 4)) / 5);}*/
    /* .common-init-pg .common-list-wrap.inst-wrap.curation-swiper .common-list-inner { width: 100%; gap: 16px; padding: 16px 12px;} */

    /* Myshelf - Main, 콘텐츠 보관함 */
    .common-list-wrap.myshelf { padding: 0;}
    .common-sub-section-wrap .common-list-wrap { gap: 40px 24px;}
    .common-sub-section-wrap .common-list-wrap.myshelf .common-list-inner{ width: calc((100% - (24px * 3)) / 4);}
    /* 통합검색 */
    .inti-search-wrap.common-init-pg:not(.myshelf) .sub-section{ padding-right: 60px;}
    .inti-search-wrap.common-sub-section-wrap .common-list-wrap .common-list-inner{ width: calc((100% - (24px * 3)) / 4);}
}

@media screen and (max-width: 1024px) {
    .gnb .util > li { flex-shrink: 0;}
    .gnb .util > li.first-list { flex-shrink: 1;}

    .sub-section{ padding-left: 30px; padding-right: 30px;}

    .pd-right .common-swiper-wrap .no-data, .pd-right .common-list-wrap .no-data{ padding-right: 4%;}

    .common-list-wrap{ gap: 24px !important;}
    .common-init-pg .common-list-wrap{ padding-right: 0 !important;}
    .common-init-pg .common-list-wrap .common-list-inner{ width: calc((100% - (24px * 2)) / 3) !important; flex-grow: 0 !important; flex-shrink: 0 !important; box-sizing: border-box !important;}
    .brand-wrap .brand-item { width: calc((100% - (24px * 2)) / 3); flex-grow: 0; flex-shrink: 0; padding: 5px;}
    /*.brand-info-detail .flex-wrap { display: none;}*/
    .brand-wrap .brand-item .brand-bottom .mobile { display: flex !important;}



    .brand-item .info .brand-bottom { gap: 14px;}

    .brand-item .info .brand-bottom .dl-group dl dt { overflow: hidden; min-width: auto; width: 15px; background-repeat: no-repeat; background-position: center; text-indent: -999999px;}
    .brand-item .info .brand-bottom .dl-group dl:nth-of-type(1) dt { background-image: url("/images/common/icons/icon-building-skyscraper.svg");}
    .brand-item .info .brand-bottom .dl-group dl:nth-of-type(2) dt { background-image: url("/images/common/icons/icon-user.svg");}
    .brand-item .info .brand-bottom .dl-group dl:nth-of-type(3) dt { background-image: url("/images/common/icons/icon-mail.svg");}

    /* Brand 상세 */
    .common-sub-section-wrap .common-list-wrap.brand-dtl-wrap .common-list-inner{ width: calc((100% - (24px * 2)) / 3) !important;}
    /* Myshelf - Main, 콘텐츠 보관함 */
    .common-sub-section-wrap .common-list-wrap.myshelf .common-list-inner{ width: calc((100% - (24px * 2)) / 3) !important;}
    /* 통합검색 */
    .inti-search-wrap.common-init-pg:not(.myshelf) .sub-section{ padding-right: 60px;}
    .inti-search-wrap.common-sub-section-wrap .common-list-wrap .common-list-inner{ width: calc((100% - (24px * 2)) / 3);}

    /*  알림  */
    .alarm-header { padding: 10px 10px 10px 20px;}
    .alarm-header h2 { font-size: 17px; font-weight: 500; line-height: 1.6; letter-spacing: normal;}
    .alarm-close { display: inline-flex; justify-content: center; align-items: center; width: 40px; height: 40px;}
    .alarm-layer { position: fixed; top: 53px; left: 0; right: 0; width: 100%; height: calc(100% - 53px); border-radius: 0; background: var(--pd-bg-base);}
    .alarm-center-cont { height: 100%;}
    .alarm-not { height: calc(100% - 60px);}

    .my-gnb-layer {right: 0 !important;}

    /* 배속 커스텀 CSS */
    .mejs__speed-selector-list { display: none !important;}
    .mejs__speed-slider-wrap { display: block !important;}
    .mejs__controls .mejs__speed-selector::before{ display: none;}
    .mejs__controls .mejs__speed-button .mejs__speed-selector{ padding: 15px; right: calc(-18.69px * 2) !important; width: calc(90vw - 16px - 15px) !important; /* kendo window width 90vw에서 빼야함*/}
    .mejs__speed-slider-wrap .mejs__speed-slider { appearance: auto;}
    .mejs__speed-slider-wrap .mejs__speed-slider-labels{ margin-top: 17.9px; display: flex; align-items: center; justify-content: space-between;}
    .mejs__speed-slider-wrap .mejs__speed-slider-labels > span{ font-size: 13px; font-weight: normal; line-height: normal; letter-spacing: normal; color: #979797; text-align: center; cursor: pointer;}
    .mejs__speed-slider-wrap .mejs__speed-slider-labels > span.active{ color: #fff; font-weight: 500;}
    .mejs__speed-slider[type="range"] { appearance: none; cursor: pointer; outline: none; width: 100%; height: 3px; /* thumb의 height와 일치 */ margin: 0; /* reset margin */ padding: 0; /* reset padding */ background-color: transparent; }
    .mejs__speed-slider[type="range"]::-webkit-slider-thumb { /* Webkit 기반 브라우저 */
        appearance: none; width: 32.4px; height: 32.4px; border: none; border-radius: 50%; background-color: #fff; transition: all 0.15s ease-in-out;
        margin-top: 0 !important /*calc((3px - 32.4px) * 0.5);*/ /* calc((track의 height - thumb의 height) * 0.5) */
    }
    .mejs__speed-slider[type="range"]::-moz-range-thumb { /* 파이어폭스 */ appearance: none; width: 32.4px; height: 32.4px; border: none; border-radius: 50%; background-color: #fff; transition: all 0.15s ease-in-out;}
    .mejs__speed-slider[type="range"]:focus::-webkit-slider-thumb { /* Webkit 기반 브라우저 */ box-shadow: 0 0 0 1px #fff, 0 0 0 .25rem rgba(0, 116, 117, .4); }

    .mejs__speed-slider[type="range"]:focus::-moz-range-thumb { /* 파이어폭스 */ box-shadow: 0 0 0 1px #fff, 0 0 0 .25rem rgba(0, 116, 117, .4);}
    .mejs__speed-slider[type="range"]::-webkit-slider-thumb:active { /* Webkit 기반 브라우저 */ background-color: #fff; }

    .tab-nav-wrap { padding: 0 16px;}
    .prdct-dtl-cont-wrap .tab-nav-wrap { gap: 16px;}
    .tab-nav-wrap li .tab-btn,
    .prdct-dtl-cont-wrap .tab-nav-wrap li .tab-btn { min-width: 30px; font-size: 16px;}

    .accordion-wrap { gap: 10px;}
    .accordion-item .accordion-head { font-size: 14px;}
    .accordion-item .accordion-head .accordion-timer { min-width: 80px;}

    .list-bar .list-bar-box p,
    .list-bar .list-bar-box span { font-size: 14px;}

    .common-textarea { padding: 10px; font-size: 14px;}
    .prdct-qa-item-wrap .common-textarea { height: 100px;}

    /* 강의 목록 item */
    .common-tit-wrap { margin-bottom: 0;}
    .common-tit-wrap .common-tit { font-size: 20px; word-break: keep-all;}
    .common-list-wrap .common-list-inner .info .price-wrap,
    .common-swiper-wrap .swiper-slide .info .price-wrap { align-items: flex-start;}
    .common-list-wrap .common-list-inner .info .price-wrap .price-amount,
    .common-swiper-wrap .swiper-slide .info .price-wrap .price-amount { flex-direction: column; gap: 0;}
    .common-init-pg .common-list-wrap.curation-swiper .common-list-inner{ gap: 0; width: 100% !important;}

    /* 강사 목록 */
    .common-list-wrap.inst-wrap .common-list-inner { width: calc((100% - (24px * 2)) / 3);}
    .brand-item .info .brand-info-detail h3 { font-size: 16px; }

    /* 시청, 관심, 통합검색 통합 여백 */
    .tab-cont-wrap { padding: 0 16px;}

    /* 시청 리스트 */
    /* .myshelf.common-sub-section-wrap { padding: 0;} */
    /* .tab-cont-wrap .tab-cont-padding.tab-cont-inst { padding: 0 16px;} */

    /* 통합검색 */
    .sub-sec-container.search .common-tit-wrap { padding: 16px 0 15px;}
    .inti-search-wrap .sub-sec-container .common-tit-wrap .common-tit { padding: 0;}
    /* .inti-search-wrap.common-sub-section-wrap .common-list-wrap.inst-wrap .common-item { align-items: center; padding: 16px 0;} */

    /******************************** 여기서부터 복붙하시면 됩니다.(Mobile) *************************************/
    .body-container.filter-open { z-index: 11;}
    .filterContainer.header { display: none; top: 0;}
    /*.filterContainer.header.active { display: inline-flex;}*/
    .filter-container { display: none; flex-direction: column; overflow: hidden; position: fixed; top: 0; left: 0; z-index: 99; margin-bottom: 0; height: 100vh;}
    .filter-container.active { display: flex !important;}
    .filterContainer.header.active .filter-content-wrap { display: flex;}
    .filter-container .filter-header{ flex-shrink: 0; flex-direction: column; align-items: flex-start; padding: 0;}
    .filter-container .filter-header .header-icon{ display: none;}
    .filter-container .filter-header .mobile-back-btn,
    .filter-container .filter-header .mobile-close-btn { display: inline-flex;}
    .filter-container .filter-header .mobile-close-btn { position: absolute; top: 12px; right: 16px;}
    .filter-container .header-title{ justify-content: center; position: relative; width: 100%; height: 54px; padding: 7px 16px; border-bottom: 1px solid #333333; text-align: center; font-size: 16px;}
    .filter-container .filter-header .search-area{ width: 100%; margin-top: 12px;}
    .filter-container .filter-header .search-input{ width: 100%; height: 48px; line-height: 48px; font-size: 14px;}
    .filter-container .filter-header .search-input::placeholder{ font-size: 14px;}
    .filter-container .filter-sub-header{ display: none; padding: 15px;}
    .filter-container .search-area-wrap { position: relative; width: 100%; padding: 15px; border-bottom: 0;}
    .filter-container .search-area-wrap .search-area-top { display: flex; justify-content: space-between; align-items: center;}
    .filter-container .search-area-wrap .search-area-top .filter-sort { display: flex; position: relative; top: 0; right: 0;}
    .filter-sort li label { font-size: 14px;}

    .filter-container .filter-header .mobile-back-btn { position: absolute; top: 7px; left: 16px;}
    .filter-container .filter-header .search-area-wrap .check-box { display: flex; padding-left: 10px;}

    .filter-content-wrap { display: flex; flex-direction: column; flex-grow: 1; overflow: hidden;}
    .filter-container .filter-sub-header .input-wrapper,
    .filter-container .filter-sub-header .input-wrapper .extra-input-area{ width: 100%;}
    .filter-body { display: none; }
    .mobile-filter-body { display: block; flex: 1; overflow-y: auto; min-height: 0; /*height: calc(100vh - 288px);*/ max-height: none;}
    .filter-container .filter-header { flex-direction: column; align-items: flex-start; }
    .filter-container .filter-footer { display: flex; flex-shrink: 0; flex-direction: column; gap: 10px; /*position: fixed; bottom: 0; left: 0; right: 0;*/ max-height: 40vh; padding: 15px; box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.12), 0 0 2px 0 rgba(0, 0, 0, 0.08); background-color: #232323;}
    .filter-container .footer-buttons { flex-shrink: 0; width: 100%; justify-content: space-between; }
    .filter-container .filter-footer .selected-area{ flex: 1; align-content: flex-start; overflow-y: auto; min-height: 0; max-height: 25vh; margin-right: 0;}
    .filter-container .filter-footer .selected-chip > span{ display: flex; align-items: center; font-size: 14px; letter-spacing: -0.28px;}
    .filter-container .btn-reset{ font-size: 14px; letter-spacing: -0.28px;}
    .m-depth3-content .tags-wrapper > .tag-btn { border: 0;}
    .m-depth3-content .tags-wrapper > .tag-btn.selected { background: transparent; text-decoration: underline; color: #fff;}
    .m-depth1-head.active { font-weight: bold;}
    .m-depth2-list { display: flex; flex-direction: column; gap: 4px;}
    .m-depth2-head { padding: 6px 30px 6px 45px;}
    .m-depth2-head.active { font-weight: normal; color: #bcbcbc;}
    .m-depth2-head.active .icon-acc-arrow { transform: rotate(180deg); background: url("/images/common/icons/icon-acc-arrow.png") no-repeat center center / cover;}
    #header_filter { display: none;}
    .mobile-filter-title.show { display: flex; align-items: center; justify-content: flex-end; padding: 0 16px 10px;}
    .filter-mobile-result { display: none; padding: 0 0 0 24px;}
    .filter-mobile-result.show { display: flex;}
    .mobile-filter-btn.show { display: inline-flex;}

    footer { z-index: auto;}
}

@media screen and (max-width: 960px) {
    .logo{ width: max(4.01em, 97px);}

    /* Slide */
    .common-swiper-wrap .swiper-slide{ padding: 8px 8px 9px 8px;}
    .common-swiper-wrap .swiper-button-prev, .common-swiper-wrap .swiper-button-next,
    .brand-swiper .swiper-button-prev, .brand-swiper .swiper-button-next{ width: 24px; height: 24px;}
    .common-swiper-wrap .swiper-button-prev:after, .common-swiper-wrap .swiper-button-next:after,
    .brand-swiper .swiper-button-prev:after, .brand-swiper .swiper-button-next:after{ width: 13.3px !important; height: 13.3px !important;}
    /* 썸네일 하단 상세 */
    .common-list-wrap .common-list-inner .info h3, .common-swiper-wrap .swiper-slide .info h3{ font-size: 16px;}
    .common-list-wrap .common-list-inner .info .review-area, .common-swiper-wrap .swiper-slide .info .review-area{ margin-bottom: 2px;}
    .common-list-wrap .common-list-inner .info .review-area > img, .common-swiper-wrap .swiper-slide .info .review-area > img{ width: 10px; height: 10px;}
    .common-list-wrap .common-list-inner .info .review-area > .score, .common-swiper-wrap .swiper-slide .info .review-area > .score{ font-size: 15px;}
    .common-list-wrap .common-list-inner .info .review-area > .review-count, .common-swiper-wrap .swiper-slide .info .review-area > .review-count{ font-size: 15px;}
    .common-list-wrap .common-list-inner .info .instr-nm, .common-swiper-wrap .swiper-slide .info .instr-nm{ margin-bottom: 2px; font-size: 15px; line-height: 1.35;}
    .common-list-wrap .common-list-inner .info .price-wrap, .common-swiper-wrap .swiper-slide .info .price-wrap{ align-items: flex-start; gap: 6px;}
    .common-list-wrap .common-list-inner .info .price-wrap .price-amount, .common-swiper-wrap .swiper-slide .info .price-wrap .price-amount{ flex-direction: column; gap: 1px; align-items: flex-start; font-size: 15px; line-height: 1.3;}
    .common-list-wrap .common-list-inner .info .price-wrap .price-discount, .common-swiper-wrap .swiper-slide .info .price-wrap .price-discount{ font-size: 15px; line-height: 1.3;}
    .common-list-wrap .common-list-inner .info .price-wrap .price-origin, .common-swiper-wrap .swiper-slide .info .price-wrap .price-origin,
    .common-list-wrap .common-list-inner .info .price-wrap .price-origin-wrap .price-unit, .common-swiper-wrap .swiper-slide .info .price-wrap .price-origin-wrap .price-unit{ font-size: 12px;}
    /* 썸네일 하단 상세(채널 전용), 버튼 */
    .common-list-wrap.brand-list-wrap .common-list-inner .info, .common-swiper-wrap.brand-swiper .swiper-slide .info{  padding: 40px 12px 12px 12px;}
    .common-swiper-wrap.brand-swiper .swiper-slide .info .brand-nm{ width: 40px; height: 40px; left: 12px; top: -12px;}
    .common-swiper-wrap.brand-swiper .swiper-slide .info h3{ margin-bottom: 5px; font-size: 12px; line-height: 1.3;}
    .common-swiper-wrap.brand-swiper .swiper-slide .info .detail{ margin-bottom: 6px; font-size: 11px;}
    .common-swiper-wrap.brand-swiper .swiper-slide .info .flex-wrap{ flex-direction: column; align-items: flex-start;}
    .common-swiper-wrap.brand-swiper .swiper-slide .info .lecture-cnt-wrap{ padding-right: unset; margin-right: unset; font-size: 11px; line-height: normal;}
    .common-swiper-wrap.brand-swiper .swiper-slide .info .lecture-cnt-wrap::after{ display: none;}
    .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{ width: 25px;}
    .swiper-pagination .swiper-pagination-bullet{ width: 8px;}

    .swiper-slide.brand-item .contents-wrap.brand-thum { aspect-ratio: 163 / 80;}

}

@media screen and (max-width: 768px) {
    /* Gnb */
    .gnb .util .search-wrap.active .input-search{ padding-right: 10px; width: 100%; }
    /* .gnb .util .search-wrap.active .input-search::placeholder{ font-size: 13px;} */

    .btn-default.size-b { width: 100%;}

    /* Popup */
    .k-window-content.kendo-window{ padding: 0 20px 20px !important; }
    .rlst-info{ margin-top: 156px; padding-top: 72px; }
    .product-wrap .conts-list-wrap li .df-wrap{ padding: unset; }

    /* Common */
    .for-pc{ display: none !important; }
    .for-mo{ display: block !important; }
    .common-list-wrap .common-item, .swiper-slide .contents-wrap, .common-swiper-wrap .swiper-slide{ border-radius: 8px !important;}
    #prdctQA .accordion-item .accordion-head > span { flex-direction: column; align-items: flex-start; gap: 4px;}
    .accordion-item .accordion-head .name-date { padding: 0;}


    /* 회원가입 step */
    .step-wrap .step-inner-wrap:nth-of-type(2)::before { background: url("../images/common/icons/icon-step2.svg") no-repeat center; background-size: contain;}
    .step-wrap .step-inner-wrap:nth-of-type(3)::before { background: url("../images/common/icons/icon-step3.svg") no-repeat center; background-size: contain;}
    .step-wrap .step-inner-wrap:nth-of-type(4)::before { background: url("../images/common/icons/icon-step4.svg") no-repeat center; background-size: contain;}
    #joinBizWindow .step-wrap .step-inner-wrap:nth-of-type(5)::before { background: url("../images/common/icons/icon-step4.svg") no-repeat center; background-size: contain;}
    .step-wrap .step-inner-wrap:nth-of-type(2).active:before,
    .step-wrap .step-inner-wrap:nth-of-type(3).active:before,
    .step-wrap .step-inner-wrap:nth-of-type(4).active:before { background: url("/images/common/step_chk.svg") no-repeat center; background-size: contain;}
    .step-wrap .step-inner-wrap.type-B.active:before,
    .step-wrap .step-inner-wrap.type-T.active:before { background: url("/images/common/step_chk.svg") no-repeat center !important; background-size: contain !important;}
    .step-wrap .step-inner-wrap.type-B::before { background: url("../images/common/icons/icon-step3.svg") no-repeat center !important; background-size: contain;}
    .step-wrap .step-inner-wrap.type-T::before { background: url("../images/common/icons/icon-step3.svg") no-repeat center !important; background-size: contain;}

    /* 디자인적용 */
    .common-init-pg .sub-section{ margin-top: 16px !important; margin-bottom: 16px !important;}
    /*.common-tit-wrap { margin-bottom: 11px;}*/
    .common-tit-wrap .common-tit{font-size: 16px;}
    .common-tit-wrap .btn-more .txt-more{ font-size: 13px;}

    .btn-toggle-info { width: 20px; height: 20px; background-size: 13.3px;}
    .common-list-wrap.brand-wrap .common-item{ width: 100%; flex-direction: row; justify-content: space-between; gap: 15px; padding: 1.1125rem 1.1429rem; }
    .common-list-wrap.brand-wrap .common-item img{ flex-shrink: 0; margin-bottom: unset; }
    .common-list-wrap.brand-wrap .common-item .desc-wrap{ width: 45%; }
    .common-list-wrap.brand-wrap .common-item h3{ font-size: max(14px, 1.1429rem); text-align: left; }
    .common-list-wrap.brand-wrap .common-item .subscribe-info{ margin: 2px 0 0; font-size: max(12px, 0.85714rem); text-align: left; }
    .common-list-wrap.brand-wrap .common-item .btn-sub-default{ width: 25%; font-size: max(12px, 0.85714rem); height: 34px; line-height: 34px;}




    .product-wrap .common-item{ flex-direction: column; }
    .product-wrap .common-item .common-cont-img{ width: 100%; height: fit-content; }
    .product-wrap .common-item .info{ width: 100%; height: fit-content; justify-content: flex-start; gap: 20px; }
    .product-wrap .common-item .info h3{ font-size: 1.5625rem; }
    .product-wrap .common-item .info .price{ font-size: 1.75rem; }
    .product-wrap .product-actions.for-mo{ margin-top: -20px; }
    .product-wrap .product-actions .btn-subscribe{ width: 100%; }
    .product-wrap .product-actions .btn-subscribe.for-pc{ display: none !important; }
    .product-wrap .product-actions .btn-purchase,
    .product-wrap .product-actions .btn-default{ width: 100%; }
    .product-wrap .pop-comm-tit{ margin-bottom: 0.54375rem; font-size: 1.25rem; }
    .product-wrap .conts-list-wrap li{ padding: 1.25rem 0.625rem; }
    .product-wrap .conts-list-wrap li .conts-index{ display: none; }
    .product-wrap .conts-list-wrap li .conts-list-info{ gap: 16px; }
    .product-wrap .conts-list-wrap li .conts-list-info > img{ width: 32.82%; }
    .product-wrap .conts-list-wrap li .conts-duration.for-mo{ text-align: left; }
    .product-wrap .conts-list-section{ overflow-y: auto; margin-bottom: 100px; }
    .product-wrap .product-actions.fixed-actions{ z-index: 1; padding: 1.25rem; position: fixed; bottom: 0; left: 0; right: 0; background-color: #181818; }
    .product-wrap .product-actions .card-select-wrap.show .dropdown .dropdown-menu{ bottom: 100%; top: unset; }
    .product-wrap .conts-list-wrap li .single-wrap.for-pc{ display: none !important; }


    .std-wrap .common-item{ flex-direction: column; }
    .std-wrap .common-item .common-cont-img{ width: 100%; height: fit-content; }
    .std-wrap .common-item .info h3{ font-size: 1.5625rem; }
    .std-wrap .common-item .info .price{ font-size: 1.75rem; }
    .std-wrap .std-actions.for-mo{ margin-top: -20px; }
    .std-wrap .std-actions .btn-subscribe{ width: 100%; }
    .std-wrap .std-actions .btn-subscribe.for-pc{ display: none !important; }
    .std-wrap .std-actions .btn-purchase,
    .std-wrap .std-actions .btn-default{ width: 100%; }
    .std-wrap .pop-comm-tit{ margin-bottom: 0.54375rem; font-size: 1.25rem; }
    .std-wrap .conts-list-wrap li{ padding: 1.25rem 0.625rem; }
    .std-wrap .conts-list-wrap li .conts-index{ display: none; }
    .std-wrap .conts-list-wrap li .conts-list-info{ gap: 16px; }
    .std-wrap .conts-list-wrap li .conts-list-info .play-wrap{ width: 32.82%; }
    .std-wrap .conts-list-wrap li .conts-duration.for-mo{ text-align: left; }
    .std-wrap .conts-list-section{ overflow-y: auto; margin-bottom: 100px; }
    .std-wrap .std-actions.fixed-actions{ padding: 1.25rem; position: fixed; bottom: 0; left: 0; right: 0; background-color: #181818; }
    .std-wrap .conts-list-wrap .score li{ padding: unset;}

    /* 팝업 내 평점 및 리뷰 영역 */
    div#prdctInfoWindow{ margin-bottom: 134px;}
    .score-tot-wrap .text-underline{ font-size: 14px;}
    .review-section .review-title{ margin-bottom: 0.54375rem; font-size: 1.25rem; }
    .review-box{ flex-direction: column; gap: 20px;}
    .review-box > .score{ width: 100%;}
    .review-box > .score > p{ margin-bottom: 4px; font-size: 32px; letter-spacing: -0.64px;}
    .review-box > .score .review-cnt-txt{ margin-top: 8px;}
    .review-box > span.bar{ display: none;}
    .review-td-section .review-td-item .top-info > .name{ font-size: 14px; letter-spacing: -0.28px;}
    .review-td-section .review-td-item .cont-wrap .cont-tit{ padding: 13px 15px; }

    /* 학습창 */
    .mejs__container,
    .mejs__poster,
    .mejs__overlay,
    .mejs__overlay-play,
    .mejs__container video{ height: 16.1625rem !important; }
    .mejs__controls{ height: 60px !important;}
    .mejs__time-rail .mejs__time-slider, .mejs__time-rail .mejs__time-slider > *{ height: 3.2px !important;}
    .mejs__time{ font-size: 12px !important; height: fit-content; padding-top: 0.8rem !important;}
    .mejs__time-handle-content{ width: 12px !important; height: 12px !important; top: 50% !important; transform: translateY(-50%) !important;}
    .mejs__button.mejs__play, .mejs__button.mejs__replay .mejs__button.mejs__pause, .mejs__button.mejs__volume-button, .mejs__button.mejs__speed-button, .mejs__button.mejs__fullscreen-button{ bottom: 14.2px !important;}
    .player-wrap .std-wrap{ padding: 1.142rem 1.25rem;}
    .player-wrap .std-wrap .pop-comm-tit .title{ font-size: 1.125rem; }
    .player-wrap .std-wrap .brand-desc-wrap{ padding: 12px 18px;  }
    .player-wrap .std-wrap .brand-desc-wrap .brand-intro{ font-size: 0.875rem; }
    .player-wrap .std-wrap .comment-wrap > span{ font-size: 1.1429rem; }
    .player-wrap .std-wrap .comment-txtarea-wrap{ padding: 1.125rem; font-size: 0.875rem; }
    .player-wrap .std-wrap .comment-txtarea-wrap textarea::placeholder, .player-wrap .std-wrap .comment-txtarea-wrap textarea{ font-size: 0.875rem; }
    .player-wrap .std-wrap .comment-txtarea-wrap > button, .player-wrap .std-wrap .comment-txtarea-wrap .btn-wrap > button{ height: 2.5rem; line-height: 2.5rem; }
    .player-wrap .std-wrap .comment-reply-list > li{ padding: 8px 0 15.5px 23px; }
    .std-wrap .conts-list-wrap > li{ padding: 0;}
    .std-wrap .conts-list-wrap > li .df-wrap{ flex-direction: column; gap: 15px;}
    .std-wrap .conts-list-wrap > li p.conts-desc.for-mo{ color: #d2d2d2; font-size: 14px; font-weight: normal; line-height: 1.43; letter-spacing: normal; text-align: left; }
    .std-wrap .conts-list-wrap > li .conts-list-info p.for-pc-tb{ display: none;}
    .std-wrap .conts-list-wrap > li .single-wrap.for-pc{ display: none !important;}
    .player-wrap .std-wrap .comment-wrap{ margin-top: 12px;}
    .review-write-wrap .review-top-wrap .sub-tit{  font-size: 14px; }
    .mejs__time-rail{ position: absolute !important; top: 0; left: 1.2026rem; width: calc(100% - 2.4052rem - 56px) !important;}

    /* Footer */
    footer .inner { flex-direction: column; padding-bottom: 5.13vw; margin-top: 2.8125rem; }
    footer .nav > *{ /*font-size: 0.8125rem;*/ text-align: center; }
    footer .nav .btn-wrap{ justify-content: center; }
    footer address{ margin: 0.625rem auto 1.25rem; }
    footer address p span{ line-height: 1.1375rem; }
    footer address p:last-child span{ display: block; width: 100%; }
    footer .dropdown{ width: 100%; }
    footer .dropdown .dropdown-btn{ width: 100%; }

    .sub-section{ padding-left: 16px; padding-right: 16px;}
    .pd-right .common-swiper-wrap .no-data, .pd-right .common-list-wrap .no-data{ padding-right: 10px;}
    /* .main-section .swiper-button-prev{ left: calc((10px - 13.89px) / 2) !important; }
    .main-section .swiper-button-next{ right: calc((10px - 27.78px) / 2) !important; }
    .common-swiper-wrap .swiper-button-prev{ left: calc((10px - 13.89px) / 2) !important; }
    .common-swiper-wrap .swiper-button-next{ right: calc((10px - 27.78px) / 2) !important; } */

    .common-list-wrap{ gap: 20px 16px !important;}
    .common-init-pg .common-list-wrap .common-list-inner{ width: calc((100% - (8px * 2)) / 2) !important; flex-grow: 0 !important; flex-shrink: 0 !important; box-sizing: border-box !important;}

    .brand-wrap .brand-item { width: calc((100% - 16px - (0px * 2)) / 2); flex-grow: 0; flex-shrink: 0;}
    .brand-swiper .brand-item { width: 100%;}
    .common-init-pg .common-list-wrap.inst-wrap .info .common-item-title { line-height: 1.3;}
    .common-init-pg .common-list-wrap.inst-wrap .info,
    .common-list-wrap.inst-wrap .common-list-inner .info { height: auto;}
    /* Brand 상세 */
    .brand-container .brand-section{ padding-right: 10px !important; }
    .common-sub-section-wrap .common-list-wrap.brand-dtl-wrap .common-list-inner{ width: calc((100% - 8px) / 2) !important;}
    /* Myshelf - Main, 콘텐츠 보관함 */
    /* .myshelf.common-sub-section-wrap{ padding: 0 10px } */
    .common-sub-section-wrap .common-list-wrap.myshelf .common-list-inner{ width: calc((100% - 16px) / 2) !important;}
    /* 통합검색 */
    .inti-search-wrap.common-init-pg:not(.myshelf) .sub-section{ padding-right: 10px;}
    .inti-search-wrap.common-sub-section-wrap .common-list-wrap.inst-wrap .common-list-inner { width: calc((100% - 16px) / 2);}
    /*.inti-search-wrap.common-sub-section-wrap .common-list-wrap .common-list-inner{ width: calc((100% - 8px) / 2) !important;}*/

    /* 썸네일 하단 상세 */
    /* .common-list-wrap .common-list-inner .info h3, .common-swiper-wrap .swiper-slide .info h3{ font-size: 12px;} */
    .common-list-wrap .common-list-inner .info .review-area > .score, .common-swiper-wrap .swiper-slide .info .review-area > .score,
    .common-list-wrap .common-list-inner .info .review-area > .review-count, .common-swiper-wrap .swiper-slide .info .review-area > .review-count,
    .common-list-wrap .common-list-inner .infoon-swiper-wrap .swiper-button-prev, .common-swiper-wrap .swiper-button-next .instr-nm, .common-swiper-wrap .swiper-slide .info .instr-nm { font-size: 13px;}
    /* .price-wrap .price-discount, .common-swiper-wrap .swiper-slide .info .price-wrap .price-discount { font-size: 12px;} */
    /* .price-wrap .price-amount, .common-swiper-wrap .swiper-slide .info .price-wrap .price-amount { font-size: 12px;} */
    /* .price-wrap .price-amount p { font-size: 9px;} */

    /*   브랜드 리스트 item */
    .brand-item .info { gap: 0; padding: 0 12px 12px;}
    .brand-item .info .brand-info-detail { width: 100%; gap: 5px;}
    /* .brand-item .info .brand-info-detail h3 { font-size: 12px;} */
    .brand-item .info .brand-bottom .detail { display: none; font-size: 11px; -webkit-line-clamp: 1;}
    .brand-item .info .info-top { flex-direction: column; align-items: flex-start; gap: 14.3px;}
    .brand-item .info .brand-nm { width: 70px; height: 70px; margin: 10px auto 0;}
    .brand-item .info .brand-info-detail h3 { -webkit-line-clamp: 1;}
    .brand-item .info .brand-bottom .dl-group { display: none;}
    .brand-item .info .info-top .detail { display: block; font-size: 11px; -webkit-line-clamp: 1;}
    .brand-info-detail .flex-wrap { flex-direction: column; align-items: flex-start; gap: 3px;}
    .brand-info-detail .flex-wrap .lecture-cnt-wrap { font-size: 11px;}
    .brand-info-detail .flex-wrap .review-area { font-size: 11px;}
    .brand-info-detail .flex-wrap .review-area:before { display: none;}

    /*  강의 상세  */
    .prdct-info-dtl-top .brand-info-detail .flex-wrap { flex-direction: row; gap: 8px;}
    .prdct-info-dtl-top .brand-info-detail .flex-wrap .lecture-cnt-wrap { font-size: 15px;}
    .prdct-info-dtl-top .brand-info-detail .review-area:before { display: inline-flex;}
    .prdct-info-dtl-top .brand-info-detail .flex-wrap .review-area { font-size: 15px;}

/*  강사 리스트  */
    .common-list-wrap.inst-wrap .common-list-inner { width: calc((100% - 16px - (0px * 2)) / 2); padding: 12px 5px;}
    /* .common-list-wrap.inst-wrap .common-item { padding-top: 10px;} */

    .inti-search-wrap.common-sub-section-wrap .common-list-wrap .common-item { aspect-ratio: auto;}
    .common-list-wrap.inst-wrap .common-list-inner .info { min-height: 0; padding-top: 0;}



    .mobile-filter-btn-wrap { display: flex; justify-content: flex-end;}
/*  탭  */
    .k-tabstrip-items .k-item,
    .tab-nav-wrap li { flex: 1; width: 100%;}
    .tab-nav-wrap li .tab-btn { width: 100%;}

/*  kendo grid  */
    .k-pager-numbers-wrap .k-picker-solid { background-color: transparent;}
}

@media screen and (max-width: 766px) {
    /* Gnb */
    #headerGnbTb.for-tb{ padding: 0 10px;}
    .gnb .util{ gap: 4px; }
    .gnb .util .search-wrap{ justify-content: space-between; }
}

@media screen and (max-width: 760px){
    body{ padding: 0;}
    .main-section{ width: 100%;}
    .ui-btn-wrap{ display: none;}


}

@media screen and (max-width: 400px) {
    /* common */
    .common-list-wrap.brand-wrap .common-item img{ flex-shrink: 0; margin-bottom: unset; width: 2.57143rem; height: 2.57143rem;}

    .common-list-wrap.brand-wrap .common-item .btn-sub-default{ width: 20.79%; font-size: max(12px, 0.85714rem); height: 34px; line-height: 34px;}
}

@media screen and (max-width: 390px) {
    /* 썸네일 하단 상세 */

    .common-list-wrap .common-list-inner .info, .common-swiper-wrap .swiper-slide .info{ gap: 4px; }
    .common-list-wrap .common-list-inner .info h3, .common-swiper-wrap .swiper-slide .info h3{ margin-bottom: 2px; font-size: 14px;}
    .common-list-wrap .common-list-inner .info .review-area > img, .common-swiper-wrap .swiper-slide .info .review-area > img{ width: 10px; height: 10px;}
    .common-list-wrap .common-list-inner .info .review-area > .score, .common-swiper-wrap .swiper-slide .info .review-area > .score{ font-size: 11px;}
    .common-list-wrap .common-list-inner .info .review-area > .review-count, .common-swiper-wrap .swiper-slide .info .review-area > .review-count{ font-size: 11px; letter-spacing: -0.22px;}
    .common-list-wrap .common-list-inner .info .price-wrap, .common-swiper-wrap .swiper-slide .info .price-wrap{ display: flex; align-items: center; gap: 5px;}
    .common-list-wrap .common-list-inner .info .price-wrap .price-discount, .common-swiper-wrap .swiper-slide .info .price-wrap .price-discount{ color: #fc1c49; font-size: 18px; font-weight: 500; line-height: 1.3; letter-spacing: normal;}
    .common-list-wrap .common-list-inner .info .price-wrap .price-amount, .common-swiper-wrap .swiper-slide .info .price-wrap .price-amount{ color: #fff; font-size: 18px; font-weight: bold; line-height: 1.3; letter-spacing: normal;}

    /* 썸네일 하단 상세 - 버튼 */
    .more-menu-list{ padding-top: 12px; padding-bottom: 0;}
    .more-menu-list > li{ gap: 20px; padding: 10px 16px;}
    .more-menu-list .icon-list{ width: 28px; height: 28px;}
}

/* 모바일 - 가로모드 */
@media (orientation: landscape) and (max-width: 1366px) {
  /* 학습창 - 모바일 Android에서 정중앙에 위치하지 않는 이슈방지 (갤럭시탭S7, iPad Pro) */
  #testVideo > video{ width: 100% !important; height: 100% !important;}
}