@import url('../fonts/pretendard.css');

@import url('reset.css');



/* 헤더 */

.wrap {
    padding-top: 115px;
}

header {
    position: fixed;
    top: 0;
    width: 100%;
    background-color: #fff;
    z-index: 99;
}

header.scroll {

    background-color: rgba(255, 255, 255, .88);
    backdrop-filter: blur(30px) brightness(1.15);
    -webkit-backdrop-filter: blur(30px) brightness(1.15);
    /* Safari 대응 */
    border-bottom: 1px solid #000;

}

.hd-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2.5rem 0 1.875rem;
    transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
}

.hd-logo {
    margin-bottom: 0.3125rem;
    cursor: pointer;
}

.hd-logo img {
    width: 9rem;
    height: 2.5rem;
    object-fit: contain;
}

nav.nav {
    display: inline-block;
}

.nav-wr .mn-l1 {
    display: flex;
    position: relative;

}

.nav-wr .mn-l1 .mn-l1-li {
    display: inline-block;
    position: relative;
    margin: 0 2.5rem;
    padding: 0;
}

.nav-wr .mn-l1 .mn-l1-li>a {
    display: block;
    font-size: 1em;
    font-weight: bold;
    height: 2.188rem;
    margin-top: 0.375rem;
    margin-bottom: auto;

}

nav .icon-arrow {
    width: auto;
    height: 0.75rem;
    margin-left: 2.5rem;
    margin-left: auto;
}

.mn-l1-li {
    position: relative;
}

.btn-icon {
    position: relative;
    display: inline-block;
    width: 2rem;
    padding: 0;
    line-height: 2.8125rem;
    text-align: center;
    vertical-align: middle;
    border: none;
    background-color: transparent;
}

.btn-icon img {
    width: auto;
    height: 2rem;
    object-fit: contain;
    vertical-align: top;
    margin-top: 0.125rem;
}

.btn-icon img + span {
    position: absolute;
    bottom: 0;
    right: 0;
    background-color: var(--color-point);
    border-radius: 100%;
    font-size: 10px;
    background-size: 13px;
    width: 13px;
    height: 13px;
    vertical-align: middle;
    line-height: 13px;
    color: var(--bs-white);
    font-weight: bold;
    
}

.hd-right-area {
    display: flex;
    z-index: 11;
}

.hd-right-area>div {
    padding-left: 1.25rem;
}


/* 검색 */

.search-area {
    display: none;
    position: fixed;
    left: 0;
    width: 100%;
    height: 100vh;
    padding: 0;
    background-color: rgba(0, 0, 0, .3);
    border-top: 1px solid rgba(0, 0, 0, 0.12);
    transition: top .3s ease;
    z-index: 10;
}

.search-cont {
    background-color: var(--bs-white);
    padding: 2.438rem 0;

}

.search-inner {
    position: relative;
    max-width: 52rem;
    margin: 0 auto;
    width: 100%;
    padding: 0 1rem;
}

.search-area .input-sch {
    border: 0;
    border-bottom: 0.125rem solid var(--bs-black);
    width: 100%;
    padding: 0.375rem 3.75rem 1.563rem 0;
    font-size: 1.5rem;
    line-height: 1.2rem;
    border-radius: 0;
    background: transparent;
    outline: transparent;
    appearance: none;
    -webkit-appearance: none;
    text-overflow: ellipsis;
    box-sizing: border-box;
}

.search-area .input-sch::placeholder {
    color: rgba(0, 0, 0, .38);
}

.search-area .btn-search {
    position: absolute;
    right: 1rem;
    top: 0;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border: 0;
}

.search-area .btn-search img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}


/* 메인페이지 */



/* .event-area {} */

.event-cont {
    width: 100%;
    height: clamp(120px, 12.5vw, 240px);
    position: relative;
    overflow: hidden;
}

.event-cont img {
    object-fit: cover;
    object-position: center center;
    width: 100%;
    height: 100%;
    min-height: 120px;

}

.event-area .slick-next {
    background: url(../img/icon_arrow_w_next.png) center center no-repeat;
    background-size: contain;
    
}

.event-area .slick-prev {
    background: url(../img/icon_arrow_w_prev.png) center center no-repeat;
    background-size: contain;
    
}



/* 로그인 & 회원가입 페이지 */

.btn-back-pg {
    position: absolute;
    left: calc((100% - 480px) / 2);
    top: 1.5rem;
    transition: left .3s linear;
}

.btn-back-pg a {
    display: flex;
    width: 2rem;
    height: 2rem;
}

.btn-back-pg a img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.wrap.join {
    padding: 0;
}

.auth-area {
    display: block;
    margin: 7.5rem auto;
    max-width: 30rem;
}

.auth-area#login {
    margin: 5rem auto;
}

.auth-hd {
    text-align: center;
}

.auth-logo {
    margin: 0 auto 20px;
    text-align: center;
    width: 12rem;
}

.auth-logo a {
    display: block;
    height: auto;
}

.auth-hd .border-top {
    margin-top: 3.125rem;
}

.auth-logo a img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

.auth-txt,
.auth-txt span {
    font-size: 1.5rem;
    color: rgba(0, 0, 0, .6);
}

#login .auth-txt {
    margin-bottom: 5rem;
}

#register .auth-txt {
    margin-bottom: 3.125rem;
}


.login-area .login-btn {
    margin-bottom: 0.625rem;
}

.register-area {
    padding-top: 2.5rem;
}

.register-area .top-btn-wr {
    margin-bottom: 2.5rem;
}

.register-area ul li{
    margin-bottom: 1.25rem;
}

.register-area ul li:last-of-type {
    margin-bottom: 2.5rem;
}

.register-form .mail-form{
    margin-bottom: 1.875rem;
}

.my-rw .register-form .mail-form {
    margin-bottom: 1.25rem;
}

.register-form .mail-form .form-check + .form-check{
    margin-left: 2.5rem;
}

.register-form .address-form .form-control +  {
    margin-bottom: 0.625rem;
}

.register-area .form-check.agree-form {
    margin: 2.5rem 0;
}

.form-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem;
}

.tel-box .form-select {
    width: 9.375rem;
}

.input-tel-num {
    display: flex;
    gap: 0.625rem;
    width: 100%;
}

.auth-num {
    display: inline-flex;
    width: 100%;
}

.auth-num #resendBtn {
    margin-left: -1px;
}

.auth-num .col{
    position: relative;
}

.auth-num .time {
    position: absolute;
    top: 1.25rem;
    right: 1.25rem;
    line-height: 1.1875rem;

}

.auth-num .form-control[type="tel"] {
    padding-right: 3.5rem;
}

.address-form #findAdd{
    margin-left: -1px;
}

.auth-ft {
    position: absolute;
    display: block;
    text-align: center;
    margin-top: auto;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
}


@media (max-height: 808px) and (min-width:768px){
    
    .auth-ft {
        position: relative;
        margin-top: 70px;
        bottom: 0;
    }
}


@media (max-height: 710px) and (max-width: 767.98px) {
    .auth-ft {
        position: relative;
        margin-top: 70px;
        bottom: 0;
    }
    
}


/* 메인 */

#main section {
    padding: 7.5rem 0;
}

.main-txt-cont {
    margin-bottom: 2.5rem;
}

.main-txt-cont h2 {
    font-size: 1.75rem;
    font-weight: bold;
    margin-bottom: 0.625rem;
    line-height: normal;

}

.main-txt-cont .sub-tit {
    font-size: 1.25rem;
    font-weight: 400;
    color: var(--color-black-60);
    line-height: 1.2084;
    word-break: keep-all;
}

/* 메인 > 배너 */


.main-bn-slide.slick-dotted.slick-slider {
    margin-bottom: 0;

}

.main-bn-slide .bn-wr {
    position: relative;
    border-radius: 15px;
    overflow: hidden;
    max-height: 720px;
    min-height: 240px;
    padding-top: 56.25%;
    transition: height .1s linear;
    height: initial;

}

.main-bn-slide .bn-in {
    position: absolute;
    top: 0;
    left: 0;
    object-position: center center;
    width: 100%;
    height: 100%;
    object-fit: cover;

}

.main-bn-slide .bn-in img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;

}


.main-bn-slide .bn-txt {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;

}

.main-bn-slide .bn-txt .txt p {
    font-size: clamp(1.5rem, 5vw, 4rem);
    font-family: 'Y_Spotlight';
    font-weight: bold;
    color: var(--bs-white);
    text-align: center;
}

.main-bn-slide .slick-prev {
    left: 2.5rem;
}

.main-bn-slide .slick-next {
    right: 2.5rem;
}

.slick-dots {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    line-height: 1;

}

.main-bn-slide .slick-dots {
    margin-bottom:8px;
}

.slick-dots {
    text-align: center;
    line-height: 1;
    font-size: 0.5rem;
}

.slick-dots li {
    display: inline-block;
    margin: 0 2px;
    width: 8px;
    height: 8px;
    font-size: .5rem;
    line-height: 1;
}

.slick-dots li button {
    border: 0;
    background: rgba(0, 0, 0, 0.12);
    text-indent: -999px;
    overflow: hidden;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    padding: 0;
}

.slick-dots .slick-active button {
    background: rgba(0, 0, 0, 0.6);
}

.slick-dots li button:before {
    content: none;
}


/* 메인 > sec1 추천 강의 */

/* #main section.main-tab-area, #main section.main-best-area {
    padding-bottom: 5rem;
} */

.main-tab-area .custom-tab .nav {
    margin-bottom: 2.5rem;
    
}


.main-tab-area .tab-content ul, .best-cont {
    display: flex;
    flex-wrap: wrap;
}

.main-tab-area .tab-content ul::after,
.best-cont::after {
    content: '';
    clear: both;
    position: relative;
    display: block;


}

.main-tab-area .tab-content ul li,
.best-cont li {
    float: left;
    width: calc((100% - 9.375%) / 4);
    margin: 0 3.125% 2.5rem 0;
}

.main-tab-area .tab-content ul li:nth-child(4n),
.best-cont li:nth-child(4n) {
    margin-right: 0;
}

.main-tab-area .tab-content ul li:nth-last-child(-n + 4),
.best-cont li:nth-last-child(-n + 4) {
    margin-bottom: 0;
}


/* 메인 > sec2 수강후기 */
.main-review-area .container {
    padding-bottom: 0;
}

.main-review-area .review-cont-wr {
    position: relative;
}

.main-review-area .review-cont {
    position: static;
    overflow-x: hidden;
}

.review-txt {
    height: 9.375rem;
    /* display: block; */
    display: -webkit-box;
    line-clamp: 6;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-all;
    line-height: 1.625;


}

.review-info {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 0.625rem;
    padding-top: 1.25rem;
}

.main-review-area .review-cont .cr-tit {
    margin-bottom: 1.25rem;
}

.main-review-area .review-cont .slick-slide {
    margin-right: 40px;
}

.main-review-area .review-cont .slick-list {
    margin-right: -40px;
}

.review-score-wr  {
    display: flex;
    margin-bottom: 1.25rem;
    align-items: flex-start;
    gap: 0.625rem;
}

.review-score {
    text-align: left;
    display: inline-flex;
    flex-wrap: nowrap;
    gap: 5px;
}

.review-score img {
    width: calc((100% - 20px) / 5);
    max-width: 20px;
}

.cr-cate {
    color: var(--color-black-38);
}

/* 메인 > sec3 인기 강의 */


/* 메인 > sec4 신규 강좌 */

.new-cont-wr {
    position: relative;
}

.new-cont {
    position: static;
    overflow-x: hidden;

}

.new-cont .slick-slide {
    margin-right: 40px;
}

.new-cont .slick-list {
    margin-right: -40px;
}

/* 메인 > 인기 크레이터 */

#main-inst {
    position: relative;
}

#main-inst .list-wr {
    display: block;
    overflow-x: hidden;
    position: static;
    margin-bottom: 0;

}

#main-inst .slick-slide {
    margin-right: 40px;
}

#main-inst .slick-list {
    margin-right: -40px;
}

#main-inst.list-area.inst-list {
    padding-top: 0;
}

#main-inst.list-area .list-wr .li-it {
    width: initial;
    margin: initial;
}


/* 메인 > 오프라인 강좌 */

.main-offline-area .container {
    padding-bottom: 0;
}

.main-offline-area .off-cont-wr {
    position: relative;
}

.main-offline-area .off-cont {
    
    overflow-x: hidden;
    position: static;
    margin-bottom: 0;

}

.main-offline-area .slick-slide {
    margin-right: 40px;
}

.main-offline-area .slick-list {
    margin-right: -40px;
}


/* 메인 > 이벤트 */




/* list  */


.list-sort {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2.5rem;
}


.list-area .list-wr {
    display: flex;
    flex-wrap: wrap;
    padding: 0;
    list-style: none;
    zoom: 1;
    clear: both;

}

.list-area .list-wr::after {
    display: block;
    visibility: hidden;
    clear: both;
    content: '';
}

.list-area .list-wr .li-it {
    float: left;
    width: calc((100% - 9.375%) / 4);
    margin: 0 3.125% 3.125% 0;

}

.list-area .list-wr .li-it:nth-child(4n) {
    margin-right: 0;
}


.list-area.inst-list {
    padding-top: 2.5rem;
}

.list-area.offline-list .list-wr .li-it {
    width: calc((100% - 3.125%) / 2);
    margin: 0 3.125% 3.125% 0;
}

.list-area.offline-list .list-wr .li-it:nth-child(2n) {
    margin-right: 0;
}



/* 강의 & 강사 > view */

.view-area {
    display: flex;
    justify-content: flex-start;
    gap: 3.125%;
}

.view-fl-wr.sticky-box {
    width: 22.65625%;
    height: fit-content;
    margin-bottom: auto;
}

.view-fl-wr.sticky-box+.view-fr-wr {
    width: 74.21875%;
}

/* view > 강의*/

.view-bn-area {
    position: relative;
    width: 100%;
    height: clamp(280px, 25vw, 480px);
    min-height: 280px;
    max-height: 480px;
    overflow: hidden;
}

.view-bn-area .view-bn-cont {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

}

.view-bn-area .view-bn-cont img {
    width: 100%;
    height: 100%;
    object-fit: cover;

}

.bn-shadow {
    position: absolute;
    top: 0;
    left: 0;
    background: linear-gradient(180deg, #FFFFFF00, #FFFFFF);
    width: 100%;
    height: 100%;
    mix-blend-mode: normal;

}

.view-course .view-fl-wr {
    width: calc(100% - 25rem);
}

.view-course .view-fl-wr .view-fl-top-wr {
    padding-bottom: 3rem;
}

.view-fr-wr.sticky-box {
    top: calc(75px + 2.5rem);
    width: 25rem;
    height: fit-content;
    margin-bottom: auto;
    flex: none;
}

.view-fl-wr .custom-underline-tab .custom-underline-tab-hd {
    margin-right: -1px;
}

.view-cont-section .view-content {
    padding: 2.5rem 0;

}

.view-cont-tit {
    display: flex;
    gap: 0.625rem;
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 1.25rem;
    line-height: 1.8125rem;
}

.view-cont-tit .ev-score {
    font-size: 1rem;
    font-weight: 400;
}

.view-cont-tit .ev-score span {
    color: var(--bs-black);
}

.view-detail-wr {
    padding-top: 1.25rem;

}

.view-cont-images {
    position: relative;
    max-height: 50rem;
    overflow: hidden;
    transition: max-height .3s ease-in-out;
}

.view-cont-images.show {
    max-height: none !important;
	padding-bottom:3rem;
}
.view-cont-images.show::before {
	background: none !important;
}

.view-content .more-btn {
    position: relative;
}

.view-content .more-btn.show img{
    transform: rotate(0deg);

}

.view-cont-images::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: block;
    height: 10rem;
    background: linear-gradient(180deg, #FFFFFF00, #FFFFFF);
    width: 100%;
    mix-blend-mode: normal;
}


.lecture-area ul {
    display: flex;
    flex-direction: column;

}

.lecture-area ul li {
    padding: 1.25rem 0 1.1875rem;
    border-bottom: 1px solid var(--color-black-12);
}

.lecture-area .lecture-cont {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0 1.25rem;
    margin-bottom: 0;
    line-height: 1;

}

.lecture-area .lecture-cont dt {
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 1;

}

.lecture-area .lecture-cont dt span{
    line-height: 1.4;
    text-wrap: balance;
}

.lecture-area .lecture-cont dd {
    display: flex;
    margin-bottom: auto;
    flex:  0 0 auto;
}

.lecture-area .lecture-cont dd .preview-btn {
    margin-right: 2.5rem;
}

.lecture-area .lecture-cont dd .preview-btn > img{
    margin-bottom: 1px;
}

.lecture-area .lecture-cont dd span {
    display: flex;
    align-items: center;
    gap: 5px;
    color: var(--color-black-38);
    line-height: 1.75rem;

}

.inst-info-area {
    display: flex;
    gap: 0 2.5rem;
    border-bottom: 1px solid var(--color-black-12);
    margin-bottom: 2.5rem;
    padding-bottom: 2.5rem;
}

.inst-info-area .inst-info-l {
    position: relative;
    flex: 0 0 5rem;
    width: 5rem;
    height: 5rem;
    overflow: hidden;
    border-radius: 100%;

}

.inst-info-area .inst-info-l img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    object-fit: cover;
}


.prod-buy-box {
    padding: 2.5rem;
    background-color: #fff;
    box-shadow: 2px 5px 25px rgba(0, 0, 0, .1);
    border-radius: 20px;
}

.pv-tag-wr {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    text-align: left;
    margin-bottom: 1.25rem;
    gap: 0.3125rem;
}

.pv-tag-wr .tag {
    margin-top: 0;
    font-size: 1rem;
    line-height: 1.1875rem;
    padding: 0.25rem 0.625rem ;
}

.pv-tit {
    font-size: 1.5rem;
    font-weight: bold;
    word-break: keep-all;
    margin-bottom: 1.25rem;

}

.pv-subtxt {
    margin-bottom: 2.5rem;
    line-height: 1.5;
}


.pv-info-wr {
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem;
    align-items: center;
    margin-bottom: 1.25rem;

}

.pv-info-wr .pv-name {
    display: flex;
    gap: 0.625rem;
    align-items: center;
    font-weight: bold;
    color: #000;
}

.pv-info-wr .pv-name .pv-img {
    position: relative;
    width: 2rem;
    height: 2rem;
    background-color: gray;
    border-radius: 50%;
    overflow: hidden;
}

.pv-info-wr .pv-name .pv-img img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: inherit;
    height: inherit;
    object-fit: cover;
}

.pv-date {
    color: var(--color-black-38);

}

.pv-tot-wr {
    margin-bottom: 2.5rem;
}

.pv-tot {
    display: table;
    width: 100%;
    line-height: 1;
}

.pv-tot+.pv-tot {
    margin-top: 0.625rem;
}

.pv-tot-wr .pv-tot-l {
    display: table-cell;
    vertical-align: middle;
    text-align: left;
    color: rgba(0, 0, 0, 0.2);
    font-size: 0.875rem;
}

.pv-tot-wr .pv-tot-r {
    display: flex;
    vertical-align: middle;
    justify-content: flex-end;
    align-items: center;
    text-align: right;
    line-height: 1.45;
    gap: 0.3125rem;
}

.pv-tot-wr .pv-tot-r .cr-discount {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.143;
}

.prd-btn-wr {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.view-course .view-fl-wr .view-fl-top-wr .pv-tot-wr{
    display: none;
}

.pv-cont-wr {
    background-color: var(--color-gray2);
    padding: 1.25rem;
    margin-bottom: 1.5rem;

}

.pv-cont-inner  {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.pv-cont-it {
    position: relative;
    display: flex;
    padding-left: 34px;
    gap: 0.625rem;
}

.pv-cont-it > img {
    position: absolute;
    left: 0;
    top: 0;
}

.place-tit {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.place-tit .name{
    font-size: 1.25rem;
    font-weight: bold;
    line-height: 1.2;

}

.place-map {
    padding-top: 1.25rem;
}

.place-map .map {
    position: relative;
    width: 100%;
    aspect-ratio: 7 / 2;
    border: 1px solid var(--color-black-12);

}

/* view > 강사 */

.open-course-list::after, .off-course-list::after {
    content: "";
    display: block;
    position: relative;
    clear: both;

}

.open-course-list .course-li{
    float: left;
    width: calc((100% -  8.42%) / 3);
    margin: 2.5rem 4.21% 0 0;
}

.open-course-list .course-li:nth-child(3n) {
    margin-right: 0;
}

.open-course-list .course-li:nth-child(-n + 3) {
    margin-top: 0;
}

.open-course-list .more-btn-wr .more-btn {
    margin-top: 2.5rem;
}

/* view > 강사 >  오프라인클래스 */

.offline-course-list .course-li {
    float: left;
    width: calc((100% - 4.21%) / 2);
    margin: 2.5rem 4.21% 0 0;
    
}

.offline-course-list .course-li:nth-child(2n) {
    margin-right: 0;

}

.offline-course-list .course-li:nth-child(-n + 2) {
    margin-top: 0;

}

.offline-course-list .more-btn-wr .more-btn {
    margin-top: 2.5rem;
}



/* 강의페이지 */

.course-area {
    width: calc(100% - 30rem);
    padding-top: 0;
}

.course-container {
    display: flex;
    flex-direction: column;
}

.course-header {
    display: flex;
    flex-wrap: nowrap;
    padding: 1.25rem;
    align-items: center;
    gap: 1.25rem;
    background-color: var(--bs-white);
}

.btn-gohome {
    position: relative;
    display: block;
    width: 2rem;
    /* height: 2rem; */
    object-fit: contain;

}

.course-header h1 {
    font-size: 1.25rem;
    margin-bottom: 0;
    overflow-x: hidden;
    text-overflow:ellipsis ;
    white-space: nowrap;
}

.video-area {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    margin-bottom: 10px;
}

.video-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;

}

.video-inner {
    position: relative;
    display: flex;
    width: 100%;
    height: 100%;
    flex-direction: column;

}

.video-controller {
    position: absolute;
    inset: 0;
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    z-index: 1;
}

.play-btn-container .play-btn {
    background: url(/assets/images/icon_play.svg) no-repeat;
    width: 6.75rem;
    height: 6.75rem;
    background-size: contain;
    padding: 0;
    margin: 0;
    border: none;
    box-shadow: none;

    
}

.video-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    inset: 0;
    flex-shrink: 1;
    opacity: 1;
    transition: opacity cubic-bezier(.4, 0, .6, 1) .6s;
    background: rgba(0, 0, 0, .3);
}

.video-overlay.d-none {
    opacity: 0;
}

.video-cont {
    position: relative;
    display: block;
    /*overflow: hidden;*/
    background-color: #000;
    width: 100%;
    height: 100%;
}

.course-video {
    /*display: flex;
    
    width: 100%;
    height: 100%;*/
	position: relative;
}

.course-video video{
    /*position: absolute;
    top: 0;
    left: 0;*/
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.play-btn-container {
    margin: 0;
    width: 100%;
    height: 100%;
    flex-shrink: 1;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.play-btn {
    position: absolute;
	box-sizing: border-box;
    background: url('/assets/images/icon_view.png') center center;
	background-size: 100% 100%; 
	width:100px;
	height: 100px;
	border: none;
}

.fullscreen-btn {
	position: absolute;
	box-sizing: border-box;
	border: none;
	right:20px;
	bottom:30px;
	width:30px;
	height: 30px;
	background-color: transparent;
	background: url('/assets/images/icon_fullscreen.svg') center center;
	background-size: 100% 100%; 
}

.tab-content>.tab-pane.sidebar-area {
    width: 30rem;
}

.course-area .custom-underline-tab .nav {
    margin-bottom: -1px;
}

.course-area .custom-underline-tab {
    max-width: 62rem;
    width: 100%;
    margin: 0 auto;
    padding: 0 1rem;
    z-index: 1;
}

.course-area .view-cont-section .view-content {
    padding: 2.5rem 0 7.5rem;
}


/* 강의 > 강의목차 */

.view-cont-section .view-content.sidebar {
    padding: 0;
}

.sidebar-cont-list-item {
    border-bottom: 1px solid var(--color-black-12);
}

.sidebar-cont-list-chapter {
    width: 100%;
    border: none;
    padding: 1.25rem 1.25rem 1.125rem;
    background-color: transparent;
	display: block;
}

.sidebar-cont-list-top {
    display: flex;
    justify-content: space-between;
    line-height: 1.188;
    margin-bottom: 0.75rem;
    align-items: flex-start;
    column-gap: 0.25rem;
}

.sidebar-cont-list-top-tit {
    font-weight: bold;
    display: -webkit-box;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    line-height: 1.4;

}

.sidebar-cont-list-top-time {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 5px;
    font-size: .875rem;
    color: var(--color-black-38);
}

.sidebar-cont-list-top-time .icon-view{
    width: .875rem;
    height: .875rem;
    background: url(/assets/images/icon_view_gray.svg);
}

.course-percent {
    text-align: left;
    line-height: 1rem;
}

.course-percent-txt {
    color: var(--color-black-38);
    font-size: 0.875rem;
}

.course-percent-num {
    display: inline-block;
    font-weight: bold;
    color: var(--color-point);
    margin-left: 5px;
    font-size: .875rem;
}

.course-percent-num > span{
    font-weight: 500;
    color: inherit;
    
}

.sidebar-cont-list-item.active .sidebar-cont-list-chapter {
    background-color: var(--color-point);
}

.sidebar-cont-list-item.active * {
    color: var(--bs-white);
}

.sidebar-cont-list-item.active .course-percent-txt {
    opacity: 0.8;

}

.sidebar-cont-list-item.active .sidebar-cont-list-top-time {
    font-weight: bold;
}

.sidebar-cont-list-item.active .sidebar-cont-list-top-time .icon-view{
    background: url(/assets/images/icon_view_w.svg);
}

/* 강의 > 강의설명 */

.course-area .view-cont-images {
    max-height: 27.5rem;

}

.course-desc-box {
    margin-bottom: 1.25rem;
}

.course-area .cate-inst-box {
    margin-top: 2.5rem;
}

.cate-inst-box {
    background-color: rgba(255, 0, 49, 0.05);
    padding: 1.25rem;
    font-size: 1.25rem;
    line-height: 1.5rem;
    display: flex;
    gap: 2.5rem;
}

.cate-inst-box > div {
    display: flex;
    gap: 0.625rem;

}

.cate-inst-box > div .cate {
    color: var(--color-black-38);
}

/* 강의 > 강의 자료 */
.material-list li {
    padding: 1.25rem 1.25rem;
    list-style: none;
    background-color: rgba(0, 0, 0, .05);
}
.material-list li img {
    margin-right: 15px;
}
.material-list li .files {
    margin-left: 40px;
    word-break: break-word;
}
/* 
.material-it label {
    display: flex;
    position: relative;
    padding: 1.25rem 1.25rem 1.25rem 4rem;
    background-color: rgba(0, 0, 0, .05);
}

.material-it label img {
    position: absolute;
    left: 1.25rem;
    top: 50%;
    transform: translateY(-50%);
}

.material-it input {
    display: none;
}

.materials-area .more-btn {
    margin-top: 2.5rem;
} */

/* 강의 > 강의문의 */
.course-inquiry-area .inquiry-btn{
    margin-bottom: 1.25rem;
}

/* 강의 > 강의 리뷰 */

.course-review-area .review-btn {
    margin-bottom: 1.25rem;
}

.btn-refund-wr {
    margin-top: 5rem;
    padding-top: 2.5rem;
    border-top: 1px solid var(--color-black-12);
    text-align: center;
}


/* 마이페이지 */

.my-area {
    display: flex;
    gap: 5%;
}

.my-lw {
    flex: 0 0 11rem;
}

.my-area h4 {
    font-size: 1.5rem;
    font-weight: bold;
}

.my-area h5 {
    font-size: 1.25rem;
    font-weight: bold;
}

.my-area .my-lw h5 {
    margin-bottom: 1.25rem;
}

.my-lw ul li {
    margin-top: 1.5rem;
    line-height: 1;
}

.my-lw ul li a{
    font-weight: 500;

}

.my-lw li a.active {
    color: var(--color-point);
    font-weight: bold;

}

.my-rw {
    flex: 1;
}

/* 마이페이지 > 내강의실 */

.my-cr-wr {
    display: flex;
    gap: 1.25rem;
    border: 1px solid var(--color-black-12);
    padding: 2.5rem;
}

.my-cr-rw .cr-tit {
    height: auto;
}

.my-cr-lw .my-cr-img {
    position: relative;
    width: 10rem;
    padding-top: calc(100% * (9 / 16));
    
}

.my-cr-lw .my-cr-img img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    
}

.my-cr-area {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding-top: 2.5rem;
}

.my-cr-rw {
    flex: 1;
}

.my-cr-rw .tag-wr{
    gap: 0.625rem;
}

.my-cr-rw .tag-wr .tag{
    margin-top: 0;
}

.my-cr-rbw {
    display: flex;
    justify-content: space-between;
    gap: 1.5rem 0.625rem;
    flex-wrap: wrap;

}

.my-cr-rw .my-cr-rbw {
    border-top: 1px solid var(--color-black-12);
    padding-top: 1.25rem;
}

.cr-prg-wr dl {
    display: flex;
    gap: 0.625rem;
    margin-bottom: 0.625rem;
    line-height: 1.188;
}

.cr-prg-wr dl:last-child {
    margin-bottom: 0;
}

.cr-prg-wr dt {
    color: var(--color-black-38);
    font-weight: 400;
    white-space: nowrap;
}

.cr-prg-wr dd {
    margin-bottom: 0;
}

.cr-prg-wr dd span:not(.txt-point) {
    color: var(--bs-black) !important;
    font-weight: 400;
    margin-left: 0.3125rem;
    word-break: break-all;
}

.cr-btn-wr {
    display: flex;
    gap: 0.625rem;
    justify-content: flex-end;
    margin-left: auto;
}

/* 내정보 */

.my-rw .register-area {
    max-width: 30rem;
    padding-top: 0;
}

.my-rw .register-area ul li:last-of-type {
    margin-bottom: 1.25rem;
}

.my-rw .register-area .btn-wr{
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    margin-top: 1.25rem;
}


/* 회원탈퇴 */

.bg-gray.info-box .tit{
    line-height: 1.188;
    margin-bottom: 1.25rem;
}

.bg-gray.info-box ul li{
    color: var(--color-black-60);
    line-height: 1.5;
    font-size: 0.875rem;
}

.bg-gray.info-box ul li:not(:last-of-type) {
    margin-bottom: 0.5rem;
}

.withdrawal-cp {
    padding: 1.25rem;
    max-width: 50rem;
    margin: 7.5rem auto;
}


.withdrawal-cp h4 {
    font-size: 1.5rem;
    margin-bottom: 1.25rem;
}

.withdrawal-cp .bg-gray{
    padding: 2.5rem;
    text-align: center;
    word-break: keep-all;
    margin-bottom: 1.25rem;
}

.withdrawal-cp .bg-gray .tit {
    margin-bottom: 1.25rem;
}

.withdrawal-cp .bg-gray .txt {
    font-size: 0.875rem;
    line-height: 1.715;
}

/* 결제내역 */

.payment-area .table-bd li .tb-sub {
    text-align: center;

}


/* 결제내역 상세보기 */

.payment-table .tb-prod {
    width: calc(100% - 12.5rem);
}

.payment-table .tb-charge{
    width: 12.5rem;
}

.pay-total {
    display: flex;
    margin-top: 0.625rem;
    width: 100%;
    text-align: center;
    border: 1px solid var(--bs-black);
}

.pay-total .pay-total-txt {
    width: calc(100% - 12.5rem);
    background-color: var(--bs-black);
    color: var(--bs-white);
    padding: 0.75rem 0.75rem 0.6875rem;
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.25rem;
}

.pay-total .pay-total-num {
    width: 12.5rem;
    padding: 0.75rem 0.75rem 0.6875rem;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.25rem;

}

/* 마이페이지 > 문의 list  */

.my-rw .list-sort {
    margin-bottom: 1.25rem;
}


/* 마이페이지 > view  */

.board-view .request-box {
    margin-top: 2.5rem;
}


/* 마이페이지 > 크리에이터 신청하기 */

.apply-form .row {
    --bs-gutter-x: 1.25rem;
}

.apply-form li{
    margin-bottom: 1.25rem;
}

.apply-form .form-check {
    margin-top: 2.5rem;
}

.apply-form .btn-wr {
    margin-top: 1.25rem;
}

/* modal > 강의문의 */
.inquiry-info dl{
    display: flex;
    width: 100%;
    line-height: 1.188;
    margin-bottom: 0.75rem;
    
}

.inquiry-info dt {
    flex: 0 0 42px;
    margin-right: 1.25rem;
    font-weight: 500;
    color: var(--color-black-38);
}

.inquiry-info dd {
    margin-bottom: 0;
    font-weight: 500;

}

.inquiry-view .request-box .request-tit *{
    font-size: 1rem;
}

.inquiry-view .request-box .request-tit {
    padding-bottom: .625rem;
}


/* 환불요청 */

.modal-box {
    padding: 1.25rem;
}

.modal-box dl{
    display: flex;
    width: 100%;
    
}

.modal-box.refund-info dl{
    line-height: 1.5;
    margin-bottom: 1rem;

}

.modal-box.refund-info dl:last-of-type {
    margin-bottom: 0;
}

.modal-box.refund-info dt {
    flex: 0 0 98px;
    margin-right: 0.625rem;
    font-weight: 500;
    color: var(--color-black-38);
}

.modal-box dd {
    margin-bottom: 0;
    font-weight: 500;

}


/* 장바구니 */
.cart-cont-area {
    display: flex;
    justify-content: flex-start;
    padding-top: 2.75rem;
}

.cart-sort-wr {
    display: flex;
    justify-content: space-between;
}

.cart-cont-area .cart-sort-wr {
    margin-bottom: 2.5rem;
}

.cart-cont-area .form-check {
    min-height: 1.5rem;
    line-height: 1.5rem;
}

.cart-cont-area .form-check-input {
    width: 1.5rem;
    height: 1.5rem;
}

.cart-cont-area .form-check-label {
    font-size: 1rem;
    line-height: 1.5rem;
}

.cart-cont-area .table-hd .table-row .cell {
    padding: 1.6875rem 0 1.8125rem;
    font-size: 1.25rem;
}

.cart-cont-area .table-bd li .cell {
    padding: 1.25rem 0;
}

.cart-cont-area .table-bd li:first-of-type .cell {
    padding-top: 1.8125rem;
}

.table-bd li .cell.tb-cart-info {
    display: flex;
    flex-direction: column;
    padding: 1.25rem 1.875rem 1.875rem 14rem;
    text-align: left;

}

.table-bd li .cell.tb-count {
    color: #666;
    font-weight: 500;
}

.table-bd li .cell.tb-count span {
    color: inherit;
    font-weight: inherit;
}

.cart-img-wr {
    position: absolute;
    left: 1.25rem;
    top: 1.25rem;
    max-width: 11.5625rem;
    width: 100%;
    flex: none;

}

.cart-cont-area .table-bd li:first-of-type .cart-img-wr {
    top: 1.875rem;

}

.cart-img-in {
    position: relative;
    display: block;
    /* padding-top: 64.865%; */
    padding-top: calc(100% * (9 / 16));

}

.cart-img{
    position: absolute;
    width: 100%;
    inset: 0;
}

.cart-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cart-tit-wr {
    flex: 0 0 calc(100% - 11.5625rem);
    font-size: 1.25rem;
    font-weight: bold;
    margin-bottom: 0.625rem;
    line-height: 1.4;
}

.cart-txt-wr {
    display: flex;
    flex-direction: column;
    flex: 0 0 calc(100% - 11.5625rem);
}

.cart-txt-wr .pv-info-wr {
    margin-bottom: 0.625rem;
    font-weight: 400;
    flex-wrap: wrap;
}


.cart-mn-wr {
    display: flex;
    gap: 0.3125rem;
    align-items: center;
}

.cart-mn-wr .cr-discount {
    margin: 0;
}


.readonly {
    background-color: rgba(0, 0, 0, .03);
    opacity: 1;
}

.cart-box {
    padding: 2.5rem;
    box-shadow: 2px 5px 25px rgba(0, 0, 0, .1);
    border-radius: 20px;

}

.cart-box-tit {
    font-size: 1.5rem;
    font-weight: bold;

}

.cart-box-detail {
    margin-top: 2.5rem;
    border-bottom: 1px solid var(--color-black-12);
    padding-bottom: 1.25rem;
    margin-bottom: 1.25rem;
}

.cart-box-detail ul li {
    display: flex;
    justify-content: space-between;
    line-height: 1.188;
}

.cart-box-detail ul li + li {
    margin-top: 1.25rem;
}

.cart-box-detail ul li > div:first-child {
    color: var(--color-black-38);

}

.cart-box-total {
    display: flex;
    justify-content: space-between;
    margin-bottom: 2.5rem;
}

.cart-box-total-tit {
    color: var(--color-black-60);
    font-weight: bold;
}

.cart-box-total-tit span {
    color: inherit;
}


@media (max-width: 1520px) {

    /* 메인 > sec2 수강후기 */

    .main-review-area .container {
        padding: 0
    }
}

@media (max-width: 1100px) {
    /* 강의페이지 */

    .course-area {
        width: calc(100% - 20rem);
        padding-top: 0;
    }

    .tab-content>.tab-pane.sidebar-area {
        width: 20rem;
    }

    .cart-img-wr {
        max-width: 11.5625rem;
        width: 100%;
        flex: none;
    
    }
    
}

@media (min-width:1200px) {
    
    /* 장바구니 */

    .cart-cont-area .cart-left {
        width: calc(100% - 25rem - 3.125%);
        margin-right: 3.125%;
    }
    
    .cart-cont-area .cart-right {
        top: calc(76px + 2.5rem);
        width: 25rem;
        height: fit-content;
        margin-bottom: auto;
        
    }

}


@media (min-width:768px) {

    /* 헤더 */

    header.scroll .hd-inner {

        padding: 1.125rem 0px 0.9375rem;
    }
    
    header.scroll .hd-logo {
        margin-bottom: 0.125rem;
    }

    nav.nav {
        display: inline-block !important;
        z-index: 11;
    }

    .mn-l1-li:hover>.mn-l2 {
        display: block !important;
    }

    .mn-l2 {
        display: none;
        position: absolute;
        top: 3.02rem;
        width: 7.5rem;
        border: 1px solid var(--bs-black);
        padding: 1.25rem;
		/*padding-top:2.5625rem;*/
        font-size: 0.875rem;
        border-radius: 0.3125rem;
        background-color: var(--bs-white);

    }

    .mn-l2 li {
        display: block;
        width: 100%;
        line-height: 1rem;
    }

    .mn-l2 li:not(:last-child) {
        margin-bottom: 1.25rem;
    }

    .mn-l2 li>a {
        position: relative;
        display: flex;
        white-space: nowrap;
    }

    .mn-l3 {
        display: none;
        position: absolute;
    }

    .nav-wr .mn-l2 {
        width: 10rem;
        top: 2.5625rem;
        right: 0;
        left: 50%;
        transform: translateX(-50%);
    }

    .login-area .mn-l2 {
        right: 0;
        left: 50%;
        /*transform: translateX(-50%);*/
		transform: translate(-50%, -6px);
    }

    .login-area .mn-l2 li>a {
        white-space: nowrap;
    }

    .nav .btn-toggle {
        display: none;
    }

    .hd-right-area > div {
        height: 2.688rem;
        
    }

    .mn-l1-li {
        height: 100%;
    }

    /* 강의페이지 */

    .tab-content>.tab-pane.sidebar-area{
        position: fixed;
        display: block;
        opacity: 1;
        top: 0;
        left: auto;
        right: 0;
        height: 100vh;
        background-color: #F8F8F8;
    }

    .sidebar-hd {
        position: relative;
        display: block;
        padding: 1.4375rem 1.25rem 1.5625rem;
    }

    .sidebar-hd-in {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    .sidebar-hd h2 {
        font-size: 1.25rem;
        font-weight: bold;
        margin-bottom: 0;
        line-height: 1;
    }

    .course-area .custom-underline-tab {
        padding-top: 1.75rem;
    }


    .sidebar-area .sidebar-container {
        overflow-y: auto;

    }

    .course-review-area .table-wr, .course-inquiry-area .table-wr {
        overflow-x: auto;
    }

    .course-review-area .table-wr .table, .course-inquiry-area .table-wr .table{
        min-width: 570px;
    }

    /* 장바구니 */

    .cart-cont-area .table-bd li:first-of-type  > div{
        min-height: 10.469rem;
    }
    
    .cart-cont-area .table-bd li > div {
        min-height: 10rem;
    }  


}

@media (max-width:1400px) {

    /* 로그인 & 회원가입 페이지 */

    .login-area .mn-l2 {
        right: 0;
        left: auto;
        transform: none;
        top: 2.2rem;
    }

}

@media (max-width:1199.98px) {
    
    /* 장바구니 */

    .cart-cont-area {
        padding-top: 0;
        flex-direction: column;
    }

    .cart-cont-area .cart-left {
        width: 100%;
        margin-right: 0;
    }

    .cart-cont-area .cart-sort-wr {
        margin-bottom: 1.5rem;
    }

    .cart-cont-area .table-bd {
        width: calc(100% - 2rem);
        margin: 0 auto;
    }
    
    .cart-cont-area .cart-right {
        position: relative;
        top: initial;
    }

    .cart-box {
        box-shadow: none;
        padding: 0;

    }

    .cart-box-tit {
        display: none;
    }

    .cart-box-total {
        margin-bottom: 1.5rem;
    }

    .cart-box-detail {
        margin-top: 1.25rem;
    }
    
}

@media (max-width: 1024px) {

    .nav-wr .mn-l1 .mn-l1-li {
        margin: 0 1rem;
    }

    .hd-right-area>div {
        padding-left: 1rem;
    }

    /* 메인 > sec2 수강후기 */
    .main-review-area .review-cont .slick-slide {
        margin-right: 20px;
    }

    .main-review-area .review-cont .slick-list {
        margin-right: -20px;
    }

    /* 메인 > sec4 신규 강좌 */

    .new-cont .slick-slide {
        margin-right: 20px;
    }

    .new-cont .slick-list {
        margin-right: -20px;
    }

    /* 메인 > 인기 크리에이터 */

    #main-inst .slick-slide {
        margin-right: 20px;
    }
    
    #main-inst .slick-list {
        margin-right: -20px;
    }
    
    #main-inst.list-area.inst-list {
        padding-top: 0;
    }

    /* 메인 > 오프라인 강의 */
    
    .main-offline-area .slick-slide {
        margin-right: 20px;
    }

    .main-offline-area .slick-list {
        margin-right: -20px;
    }


    /* view > 강의 */

    .view-course .view-fl-wr {
        width: 100%;
    }

    .view-fr-wr.sticky-box {
        position: fixed;
        width: 100%;
        z-index: 3;
        top: auto;
        bottom: 0;
        left: 0;
    }

    .prod-buy-box {
        padding: 1.5rem 1rem 2.5rem;
        border-radius: 16px 16px 0 0;
    }

    .view-area .buy-top-wr {
        display: none;
    }

    .pv-info-wr {
        gap: 0.5rem;
        margin-bottom: 1.5rem;
    }

    .pv-tag-wr {
        margin-bottom: 0.5rem;
    }

    .pv-tit {
        margin-bottom: 1.5rem;
    }

    .pv-subtxt {
        margin-bottom: 1.5rem;
    }

    .pv-tot-wr {
        padding-top: 1.5rem;
        border-top: 1px solid var(--color-black-12);
        margin-bottom: 0;
    }

    .view-course .view-fl-wr .view-fl-top-wr {
        padding-bottom: 2.25rem;
    }

    .view-course .view-fl-wr .view-fl-top-wr .pv-tot-wr {
        display: block;
    }

    .view-course + footer .ft-wr {
        padding-bottom: 17.5rem;
    }

    
}

@media (max-width:767.98px) {

    /* header */

    .hd-inner {
        padding: 1rem 0;
    }

    .hd-logo {
        margin-bottom: 0;
    }

    .hd-logo img {
        width: 6rem;
        height: auto;
    }

    .hd-right-area>div {
        padding-left: 0.25rem;
    }

    .wrap {
        padding-top: 61px;
    }

    .btn-icon {
        line-height: 1.8125;
    }

    .btn-icon img {
        height: 1.5rem;
        vertical-align: middle;
        margin-top: 0;
    }

    .btn-icon img + span {
        display: block;
    }

    .menu-open {
        width: 1.5rem;
        height: 1.5rem;
        margin: 0.156rem 0;
    }

    .menu-open img {
        width: auto;
        height: 100%;
        object-fit: contain;

    }

    .menu-close {
        background: url('/assets/images/icon_close.png')no-repeat center center;
        width: 1.5rem;
        height: 1.5rem;
        background-size: 100%;
        border: none;
        background-color: transparent;
        margin: 0.188rem 0 0.125rem 0;
    }

    nav.nav {
        display: none;
        position: fixed;
        flex-direction: column;
        flex-wrap: nowrap;
        width: 100%;
        height: 100vh;
        top: 0;
        left: 0;
        overflow-y: auto;
        background-color: var(--bs-white);
        z-index: 9999;
    }

    .nav-hd {
        position: relative;
        display: flex;
        padding: 1rem;
        margin-bottom: 1rem;
        align-items: center;
    }

    .hd-logo {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);

    }


    .nav-wr {
        padding: 0 1rem;
    }

    .nav-wr .mn-l1 {
        flex-direction: column;

    }

    .nav-wr .mn-l1 .mn-l1-li {
        display: block;
        width: 100%;
        height: auto;
        margin: 0;
        padding: 0;
        line-height: 1.2;
    }

    .nav-wr .mn-l1-li+.mn-l1-li {
        margin-top: 2rem;
    }

    .nav-wr .mn-l1 .mn-l1-li>a {
        font-size: 1.25rem;
        font-weight: 600;
        width: fit-content;
        height: auto;
        margin-top: 0;
        margin-bottom: 0;

    }

    nav .nav-wr .icon-arrow {
        display: none;
    }

    .nav-wr .mn-l2 {
        display: none;
        position: relative;
        top: initial;
        border: none;
        padding: 0;
        font-size: 0.875rem;
        border-radius: 0.3125rem;
        background-color: var(--bs-white);

    }

    .nav-wr .mn-l2>li>a>span {
        display: none;
    }

    .nav-wr .mn-l2 li {
        padding: 0 1.25rem;
        margin-top: 1.063rem;
    }

    .nav-wr .mn-l2 li a {
        font-size: 0.875rem;
        font-weight: 500;
        color: rgba(0, 0, 0, .6);

    }

    .nav-wr .mn-l3 {
        display: none;
    }

    .nav-ft {
        padding-top: 3.75rem;
        margin-bottom: 3.75rem;
    }

    .nav-ft>div+div {
        margin-top: 1.375rem;
    }

    .btn-gohome { 
        width: 1.5rem;
    }

    .btn-toggle {
        display: inline-block;
        position: absolute;
        top: 0.5rem;
        right: 0;
        vertical-align: middle;
        margin-left: auto;
        border: none;
        width: 1rem;
        height: 0.563rem;
        background: url('/assets/images/icon_navigate.png')no-repeat center center;
        background-color: transparent;
        background-size: contain;
        transform: rotate(180deg);
    }

    .btn-toggle.open {

        transform: rotate(0deg);

    }

    /* 검색 */

    .search-cont {
        padding: 1.438rem 0;

    }

    .search-area .input-sch {

        padding: 0 2.125rem 1rem 0;
        font-size: 1rem;
    }

    .search-area .btn-search {
        width: 1.5rem;
        height: 1.5rem;
    }


    /* 로그인 */

    .btn-back-pg {
        left: 1rem;
    }

    .auth-area {
        max-width: 100%;
        padding: 0 1rem;
    }

    .register-area .top-btn-wr {
        margin-bottom: 1.5rem;
    }
    
    .register-area ul li {
        margin-bottom: 1rem;
    }

    .register-area ul li:last-of-type {
        margin-bottom: 1.5rem;
    }

    .tel-box .form-select {
        width: 7.5rem;
    }

    .input-tel-num {
        gap: 0.5rem;
    }

    .form-group {
        gap: 0.5rem;
    }

    .register-form .mail-form, .register-form .address-form {
        margin-bottom: 1.5rem;
    }
    
    .register-area .form-check.agree-form {
        margin: 1.5rem 0;
    }
    


    /* 메인 */

    #main section {
        padding: 3rem 0;
    }

    /* #main section.main-tab-area, #main section.main-best-area {
        padding-bottom: 1.5rem;
    } */

    .main-txt-cont {
        margin-bottom: 1.5rem;
    }

    .main-txt-cont h2 {
        margin-bottom: .5rem;

    }

    /* 메인 > 배너 */

    /* 메인 > sec1 추천 강의 */



    .main-tab-area {
        width: 100%;
        padding-right: 0 !important;
        padding-left: 0 !important;
    }

    .main-tab-area .main-txt-cont {
        padding: 0 1rem;
    }

    .main-tab-area .custom-tab .nav {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .main-tab-area .tab-content ul {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        width: 100%;
        overflow-x: auto;
        padding: 0 20px;
        column-gap: 20px;
    }



    .main-tab-area .tab-content ul::-webkit-scrollbar {
        display: none;
    }


    .main-tab-area .tab-content ul li {
        width: 12.5rem;
        margin: 0 0 1.5rem 0;
    }


    /* 메인 > sec2 수강후기 */

    .main-review-area .review-cont .cr-tit {
        margin-bottom: 1rem;
        text-align: center;
    }

    .main-review-area .review-cont {
        margin-bottom: 0;
    }

    .main-review-area .review-cont .slick-list {
        margin-right: 0;
    }

    .main-review-area .review-cont .slick-slide {
        margin-right: 0;
    }

    .main-review-area .slick-dots {
        position: relative;
        margin-top: 1.5rem;

    }

    .review-txt {
        height: 7.875rem;
        text-align: center;
    }

    .review-score-wr {
        text-align: center;
        margin-bottom: 1rem;
        align-items: baseline;
        justify-content: center;
    }

    .review-score  {
        gap: 4px;

    }

    .review-score img {
        width: calc((100% - 16px) / 5);
        max-width: 14px;
    }

    .review-info {
        justify-content: center;
        padding-top: 1rem;
    }


    /* 메인 > sec3 인기 강의 */

    .best-cont li {
        width: calc((100% - 9px) / 2);
        margin: 0 9px 24px 0;

    }

    .best-cont li:nth-child(2n) {
        margin-right: 0;
    }

    .best-cont li:nth-last-child(-n + 4) {
        margin-bottom: 1.5rem;
    }

    .best-cont li:nth-last-child(-n + 2) {
        margin-bottom: 0;
    }


    /* 메인 > sec4 신규 강좌 */
    

    .new-cont {
        display: flex;
        overflow-x: auto;
        flex-wrap: nowrap;
        padding: 0 16px;
        margin: 0 -16px;
        scrollbar-width: none;
    }

    .new-cont .new-li {
        margin: 0 0.5rem 0 0;
        min-width: 17.375rem;
        width: 17.375rem;
    
    }

    .carousel-scrollbar {
        background-color: rgba(0, 0, 0, .05);
        width: 100%;
        height: 0.25rem;
        position: relative;
        margin-top: 1.5rem;
    }

    .carousel-scrollbar-thumb {
        background-clip: padding-box;
        background-color: var(--color-point);
        width: 5.8rem;
        height: 0.25rem;
        cursor: grab;
        position: absolute;
        bottom: 0px;
        transition: width 0.1s linear;
        max-width: 100%;
    }

    
    /* 메인 > 인기 크리에이터 */

    #main-inst .slick-slide {
        margin-right: 0px;
    }
    
    #main-inst .slick-list {
        margin-right: 0px;
    }
    
    #main-inst.list-area.inst-list {
        padding-top: 0;
    }
    
    #main-inst.list-area .list-wr .li-it {
        margin: 0;
    }

    #main-inst .slick-dots {
        position: relative;
        margin-top: 1.5rem;
    }

    /* 메인 > 오프라인 강의 */

    .main-offline-area .slick-slide {
        margin-right: 0px;
    }

    .main-offline-area .slick-list {
        margin-right: 0px;
    }

    .main-offline-area .slick-dots {
        position: relative;
        margin-top: 1.5rem;
    }



    /* list  */

    .list-area .list-wr .li-it, .list-area.offline-list .list-wr .li-it {
        width: calc((100% - 9px) / 2);
        margin: 0 9px 24px 0;
    }

    .list-area .list-wr .li-it:nth-child(2n) {
        margin-right: 0;
    }

    .list-area.inst-list {
        padding-top: 1.5rem;
    }

    .list-sort {
        margin-bottom: 1.5rem;
    }

    .list-area .pg-wrap {
        padding-top: 0;
    }

    /* view */

    .view-area {
        flex-direction: column;
    }

    .sticky-box.view-top-wr {
        position: relative;
        top: 0;

    }

    .view-fl-wr.sticky-box {
        width: 100%;
    }

    .view-fl-wr.sticky-box+.view-fr-wr {
        width: 100%;
    }

    /* list > view */

    .view-inst .custom-underline-tab-hd,
    .view-course .custom-underline-tab-hd {
        width: calc(100% + 2rem);
        margin: 0 -1rem;
        padding: 0 1rem;
    }
    
    .view-inst .custom-underline-tab .nav ,
    .view-course .custom-underline-tab .nav {
        width: calc(100% + 2rem);
        margin: 0 -1rem -2px;
        padding: 0 1rem;
        

    }

    .view-course + footer .ft-wr {
        padding-bottom: 13.625rem;
    }

    /* view > 강사 */

    .view-fl-wr .cr-wr.cr-inst {
        width: calc(100% + 2rem);
        margin: 0 -1rem;
    }

    .view-fl-wr .cr-wr.cr-inst .r-img-wr {
        padding-top: calc(100% * (160 / 131));
    }

    .view-area.view-inst .r-info-tag-wr {
        padding: 0.5rem 1rem 1.3125rem;
        border-bottom: 1px solid rgba(0, 0, 0, .12);
        margin-bottom: 2.25rem;
    }
    

    .view-cont-tit {
        gap: 0.5rem;
        margin-bottom: 1.5rem;
    }

    .view-cont-info {
        font-size: 0.875rem;
    }


    .open-course-list .course-li{
        width: calc((100% - 9px) / 2);
        margin: 24px 9px 0 0;
    }
    
    .open-course-list .course-li:nth-child(3n) {
        margin-right: 9px;
    }

    .open-course-list .course-li:nth-child(-n + 3) {
        margin-top: 24px;
    }

    .open-course-list .course-li:nth-child(-n + 2) {
        margin-top: 0;
    }
    
    .open-course-list .course-li:nth-child(2n) {
        margin-right: 0;
    }

    .open-course-list .more-btn-wr .more-btn {
        margin-top: 24px;
    }

    .offline-course-list .course-li {
        width: calc((100% - 9px) / 2);
        margin: 24px 9px 0 0;
    }



    .view-cont-section .view-content {
        padding: 1.5rem 0;
    }

    
    .lecture-area .lecture-cont.preview {
        position: relative;
        padding-bottom: 3.5rem;
    }

    .lecture-area .lecture-cont dd .preview-btn {
        position: absolute;
        left: 0;
        bottom: 0;
        flex: 0 0 100%;
        width: 100%;
        margin-right: 0;
        padding: 0.625rem 1rem 0.5625rem;
        height: 2.5rem;
        
    }

    .inst-info-area {
        gap: 1rem;
        padding-bottom: 1rem;
        margin-bottom: 1rem;
    }

    .inst-info-area .inst-info-l {
        flex: 0 0 4rem;
        width: 4rem;
        height: 4rem;
    }

    /* 마이페이지 */

    .my-lw {
        display: none;
    }

    .my-area {
        gap: 0;
    }

    .my-rw {
        width: 100%;
    }

    .my-cr-area {
        gap: 1.5rem;
        padding-top: 1.5rem;
    }

    /* 마이페이지 > 내강의실 */

    .my-rw .custom-tab .nav {
        width: calc(100% + 2rem);
        padding: 0 1rem;
        margin: 0 -1rem;
    }

    .my-cr-wr {
        flex-direction: column;
        padding: 1rem;
        gap: 1.5rem;
    }

    .my-cr-lw .my-cr-img {
        width: 100%;
    }

    .my-cr-rw .cr-txt-wr {
        margin-bottom: 1rem;

    }

    .my-cr-rw .my-cr-rbw {
        padding-top: 1rem;
    }

    .my-cr-rw .cr-tit{
        margin-top: 0.5rem;
        line-height: 1.5;
    }
    
    .cr-btn-wr {
        flex: 0 0 100%;
    }
    
    .cr-btn-wr .btn{
        width: 100%;        
    }

    
    /* 강의페이지 */

    .course-area {
        width: 100%;
        padding-top: 0;
    }

    .tab-content>.tab-pane {
        width: 100% !important;
        
    }

    .course-area .view-cont-section .view-content, .course-area .view-cont-section .view-content.sidebar {
        padding: 1.5rem 0  5rem;
    }

    .course-area .custom-underline-tab {
        margin: 0;
    }

    .course-area .custom-underline-tab-hd {
        width: calc(100% + 2rem);
        margin: 0 -1rem;
        padding: 0 1rem;


    }
    
    .course-area .custom-underline-tab .nav {
        width: calc(100% + 2rem);
        margin: 0 -1rem -1px;
        padding: 0 1rem;
        

    }

    .course-area .custom-underline-tab .nav::-webkit-scrollbar {
        display: none;
    }

    .course-inner {
        position: sticky;
        top: 0;
        z-index: 3;
    }

    .course-sub-area {
        display: flex;
        flex-direction: column;
        width: 100%;
        padding: 0 1rem;
        margin: 1.5rem 0 2.25rem;
    }

    .course-sub-area > p {
        /* font-size: 0.875rem; */
        font-size: 1.25rem;
        font-weight: bold;
    }

    .course-sub-area .cr-txt-wr {
        margin-bottom: 0;
    }

    .course-area .custom-underline-tab-hd {
        position: sticky;
        z-index: 4;

    }

    .play-btn-container .play-btn {
        width: 3.75rem;
        height: 3.75rem;

    }

    /* 강의 > 강의 목차 */
    
    .sidebar-cont-list-chapter {
        padding: 1rem 0.5rem 0.9375rem;
    }

    /* 강의 > 강의 설명 */
    .course-desc-box {
        margin-bottom: 1.5rem;
    }

    .course-area .cate-inst-box {
        margin-top: 1.5rem;
    }

    .course-area .view-cont-images {
        max-height: 50rem;
    }

    .cate-inst-box {
        padding: 1rem;
    }

    /* 강의 > 강의 자료 */

    .material-list {
        gap: 0.5rem;
    }

    .material-it label {
        padding: 0.875rem 1rem 0.8125rem 2.5rem;
        line-height: 1.313;

    }

    .material-it label img {
        width: 1rem;
        height: 1rem;
        object-fit: contain;
        left: 1rem;
    }

    .materials-area .more-btn {
        margin-top: .5rem;
    }

    /* 강의 > 강의문의 */

    .course-inquiry-area .inquiry-btn{
        margin-bottom: 1rem;
    }

    /* 강의 > 강의 리뷰 */

    .course-review-area .review-btn {
        margin-bottom: 1rem;
    }

    .btn-refund-wr {
        margin-top: 3rem;
        padding-top: 1.5rem;
    }


    /* 내정보 */

    .my-rw .register-area {
        max-width: 100%;
    }

    .sidebar-cont-list-top {
        margin-bottom: 0.5rem;
    }


    /* 마이페이지 > 크리에이터 신청하기 */

    .apply-form li{
        margin-bottom: 1rem;
    }

    .apply-form .form-check {
        margin-top: 1.5rem;
    }

    .apply-form .btn-wr {
        margin-top: 1rem;
    }
    
    /* 회원탈퇴 */

    .bg-gray.info-box {
        padding: 1rem;
    }

    .bg-gray.info-box .tit{
        margin-bottom: 1rem;
    }

    .withdrawal-cp {
        padding: 1rem;
        margin: 7.25rem auto;
    }

    .withdrawal-cp h4 {
        margin-bottom: 1.5rem;
    }

    .withdrawal-cp .bg-gray{
        padding: 1rem;
        text-align: left;
        margin-bottom: 1.5rem;
    }

    .withdrawal-cp .bg-gray .tit {
        margin-bottom: 1rem;
    }

    /* 결제내역 */

    .payment-area .table-bd li .tb-sub {
        text-align: left;

    }

    .payment-area .table-bd li .tb-date {
        position: relative;
        top: 0;

    }

    .payment-area .table-bd li .tb-detail {
        position: absolute;
        top: 1rem;
        right: 0;
    }

    .payment-area .table-bd li .tb-detail a > img {
        height: 1rem;
        vertical-align: middle;
        margin-left: 0.625rem;
    }

    /* 결제내역 상세보기 */

    .payment-table .tb-prod {
        width: calc(100% - 5rem);
    }
    
    .payment-table .tb-charge{
        width: 5rem;
    }
    
    /* 마이페이지 > view  */

    .board-view .request-box {
        margin-top: 1rem;
    }

    /* 환불요청 */



    /* 장바구니 */
    
    .cart-cont-area .cart-cont {
        width: calc(100% + 2rem);
        margin: 0 -1rem;

    }

    .cart-cont-area .table-bd {
        position: relative;
    }

    .cart-cont-area .table-bd::after{
        content: "";
        display: block;
        position: absolute;
        bottom: 0;
        left: -1rem;
        right: -1rem;
        border-bottom: 2px solid var(--bs-black);
        width: calc(100% + 2rem);
    }

    .cart-cont-area .table-bd li {
        display: flex;
        flex-direction: column;
        border-bottom: none;
    }

    .cart-cont-area .table-bd li:after {
        content: "";
        display: block;
        position: absolute;
        bottom: 0;
        left: -1rem;
        right: -1rem;
        border-bottom: 1px solid var(--color-black-12);
        width: calc(100% + 2rem);

    }

    .cart-cont-area .table-bd li .cell {
        padding: 0;
    }

    .cart-cont-area .table-bd li:first-of-type .cell {
        padding: 0;
    }

    /* .table-bd li .cell.tb-cart-info {
        flex-direction: row;
        flex-wrap: wrap;
        padding-top: 0;
        padding-left: 2rem !important;
        border-bottom: 1px solid var(--color-black-12);
        padding-bottom: 1rem !important;
        margin-bottom: 1rem;
    } */

    .table-bd li .cell.tb-cart-info {
        flex-direction: row;
        flex-wrap: wrap;
        padding-top: 0;
        border-bottom: 1px solid var(--color-black-12);
        padding-bottom: 1rem !important;
        margin-bottom: 1rem;

    }

    .cart-cont-area .table-bd li .cell.tb-chk {
        position: absolute;
        top: 1rem;
        left: 0;
        z-index: 1;

    }

    .table-bd li .cell.tb-count {
        position: absolute;
        bottom: 22px;
        z-index: 1;
    }

    .table-bd li .cell.cr-price-wr {
        padding-left: 3.75rem !important;
        text-align: end;

    }

    .table-bd li .cell.tb-del {
        position: absolute;
        bottom: 12px;
        z-index: 1;

    }

    .cart-tit-wr {
        flex:  0 0 100%;
        margin-bottom: 1rem;
    }

    .cart-tit-wr a {
        line-height: 1.5rem;
    }
    
    .cart-img-wr {
        position: relative;
        left: auto;
        top: auto;
        width: 5rem;
        flex: 0 0 5rem;

    }

    .cart-cont-area .table-bd li:first-of-type .cart-img-wr {
        top: auto;
    }
    
    .cart-img-in {
        padding-top: 100%;
    }

    .cart-txt-wr {
        width: calc(100% - 6rem);
        flex: 0 0 calc(100% - 6rem);
        margin-left: 1rem;
    }

    .cart-txt-wr .pv-info-wr {
        flex-wrap: wrap;
        margin-bottom: 1rem;
    }

    .cart-txt-wr .pv-info-wr .pv-name{
        flex: 0 0 100%;
    }

    .cart-cont-area .prd-btn-wr {
        position: fixed;
        width: 100%;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 2;
    }

    .prd-btn-in {
        padding: 1.5rem 1rem 2.5rem;
        background-color: var(--bs-white);
        box-shadow: 2px 5px 25px rgba(0, 0, 0, .1);
        border-radius: 20px 20px 0 0;
    }

    
    .prd-btn-wr .cart-box-total-tit {
        font-weight: 400;
    }
    
    .prd-btn-wr .cart-box-total-tit span {
        font-weight: bold;
    }

    .cart-container + footer .ft-wr {
        padding-bottom: 13rem;
    }
}