@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: 1.25rem;
    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;
}





/* Footer */

.ft-wr {
    overflow-x: hidden;
    padding: 5rem 0;
}

.ft-wr .com-logo {
    margin-bottom: 2.5rem;
}

.ft-wr .com-logo a {
    display: block;
    width: 7.25rem;
    height: 2rem;
}

.ft-wr .com-logo a img {
    width: 100%;
    object-fit: contain;
}

.ft-l dl {
    display: flex;
    font-size: 1rem;
    line-height: 1;
    margin-bottom: 0;
}

.ft-l dl+dl {
    margin-top: 1.5rem;
}

.ft-l dl dt {
    display: inline-block;
    flex: 0 0 6.25rem;
    color: rgba(0, 0, 0, .38);
    width: 6.25rem;
    margin-right: 1.25rem;
    margin-bottom: 0;
    white-space: nowrap;
    font-weight: 400;

}

.ft-l dl dd {
    display: inline-block;
    word-break: keep-all;
    color: rgba(0, 0, 0, 0.6);
    margin-bottom: 0;
    width: max-content;

}

.ft-r {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;

}

.ft-r .ft-ut {
    display: flex;
    justify-content: flex-end;
}

.ft-r .ft-ut a {
    display: inline-block;
    color: var(--bs-black);
}

.ft-r .ft-ut a:last-child {
    margin-left: 0.5rem;
}

.ft-r .ft-ut span {
    font-size: 0.875rem;
    color: rgba(0, 0, 0, .12);
    margin-left: 0.5rem;
}

.copyright {
    display: flex;
    justify-content: flex-end;
}

/* 바텀바 */
.bt-wr {
    background-color: #000;
    border-radius: 1rem 1rem 0 0;
    color: #fff;
}

.bt-wr li {
    color: #fff;
    opacity: 0.38;
    text-align: center;
}

.bt-wr li p {
    color: #fff;
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1rem;
    margin-top: 0.25rem;
}

.bt-wr li.on {
    color: #fff;
    opacity: 1;
}

.bt-wr li.on p {
    font-weight: bold;

}


/* 검색 */

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

.wrap.join + .modal .modal-cont {
    gap: 0;
}

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

.auth-area#login {
    margin: 5rem auto;
    padding-top: 115px;
}

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

.auth-logo {
    margin: 0 auto 20px;
    text-align: center;
    width: fit-content;
    height: 2.5rem;
}

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

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

.auth-logo a img {
    width: auto;
    height: 100%;
    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;
    }

}


/* 메인 */

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-tab-area {
    padding-top: 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: -36px;
}

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

#main-inst .r-img-wr {
    padding-top: 100%;
}

#main-inst .cr-tit {
    width: 100%;
    text-align: center;
}

#main-inst .r-img {
    overflow: hidden;
    border-radius: 100%;
}

#main-inst .r-img-wr::before {
    content: '';
    position: absolute;
    display: block;
    border-radius: 100%;
    width: 100%;
    height: 100%;
    inset: 0;
    z-index: 0;

}


#main-inst .rank-1 .r-img-wr::before {
    background: linear-gradient(150deg, #FFBA00 0%, #FAFAFA 50%, #FFBA00 100%);

}

#main-inst .rank-2 .r-img-wr::before {
    background: linear-gradient(150deg, #CCCCCC 0%, #FAFAFA 50%, #CCCCCC 100%);

}

#main-inst .rank-3 .r-img-wr::before {
    background: linear-gradient(150deg, #9B633A 0%, #FAFAFA 50%, #9B633A 100%);

}

#main-inst [class*="rank-"] .r-img {
    width: calc(100% - 1rem);
    height: calc(100% - 1rem);
    margin: 0.5rem;
}

#main-inst .r-img img {
    position: relative;
    z-index: 1;
}

.cr-wr .tag-rank {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
}


.cr-wr.cr-inst .tag-rank {
    top: initial;
    left: 50%;
    bottom: -12px;
    transform: translateX(-50%);

}




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

.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;
    flex-wrap: wrap;
    column-gap: 2.5rem;
    row-gap: 0.625rem;
}

#courseOffline .cate-inst-box {
    column-gap: 1.25rem;
}

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

}

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

.cate-inst-box .cr-discount {
    font-size: 1rem;
}


/* 강의 > 강의 자료 */
.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-rw h4 {
    margin-bottom: 2.5rem;
}

.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 .my-mn {
    margin-bottom: 2.5rem;
}

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

.btn-txtunderline {
    width: fit-content;
    margin: 0 auto;
    background-color: var(--bs-white);
    border-color: var(--bs-white);
    box-shadow: none;
    color: var(--color-black-38);
    text-decoration: underline;
    --bs-btn-active-color: --bs-black;
    --bs-btn-active-bg: transparent;
    --bs-btn-active-border-color: transparent;

}

/* 회원탈퇴 */

.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: -16px;
    }

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

    .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 */

    .lms header {
        background: linear-gradient(rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.85)), url(/assets/images/img_header.png)no-repeat center / cover;

    }

    .join header,
    .detail header {
        background: #fff;
    }

    header .custom-underline-tab .custom-underline-tab-hd {
        background-color: transparent;
    }

    header .custom-underline-tab .nav-underline .nav-link {
        padding-top: 0;
    }


    header .custom-underline-tab .nav {
        --bs-nav-link-padding-y: 0.5rem;
        margin-bottom: -1px;
    }

    header .custom-underline-tab .nav-underline {
        --bs-nav-underline-gap: 1.25rem;
        --bs-nav-underline-border-width: 0.25rem;
        --bs-nav-underline-link-active-color: var(--bs-white);
        gap: var(--bs-nav-underline-gap)
    }

    header .custom-underline-tab .nav-underline .nav-link {
        --bs-nav-link-font-size: 1rem;
        --bs-nav-link-color: rgba(255, 255, 255, 0.6);
    }


    header .custom-underline-tab .nav-underline .nav-link.active,
    header .custom-underline-tab .nav-underline .show>.nav-link {
        font-weight: 700;
        color: var(--bs-nav-underline-link-active-color);
        border-bottom-color: var(--color-point);
    }

    header .custom-underline-tab .nav-underline .nav-link span {
        margin-left: 0.3125rem;
    }


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

    .hd-logo {
        position: absolute;
        left: 1rem;
        margin-bottom: 0;
    }

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

    .hd-right-area {
        margin-left: auto;
    }

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

    .wrap {
        padding-top: 88px;
    }

    .wrap.detail {
        padding-top: 56px;
    }

    .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;
        justify-content: flex-start;
        padding: 1rem;
        margin-bottom: 2rem;
        align-items: center;
        height: 3.5rem;
        border-bottom: 1px solid rgba(0, 0, 0, .12);
    }

    .nav-hd .hd-logo {
        position: relative;
        left: 0;
        height: 1.5rem;
    }

    .nav-hd .hd-logo img {
        height: 1.5rem;

    }

    .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: 1.875rem;
        padding-bottom: 7rem;
        margin-bottom: auto;
    }

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

    .btn-gohome {
        width: 1.5rem;
    }

    /* Footer */

    .ft-wr {
        padding: 3rem 0;
    }

    .lms .ft-wr {
        padding: 3rem 0 8rem;
    }

    .ft-wr .com-logo {
        margin-bottom: 1.5rem;
    }

    .ft-wr .com-logo a {
        display: block;
        height: auto;
    }

    .ft-wr .com-logo a img {
        width: 100%;
        object-fit: contain;
    }

    .ft-l {
        flex-direction: column;
    }

    .ft-l dl {
        font-size: 0.875rem;
        margin-top: 1rem;
    }

    .ft-l dl+dl {
        margin-top: 1rem;
    }

    .ft-r .ft-ut,
    .copyright {
        justify-content: flex-start;
        font-size: 0.875rem;
    }

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

    .auth-area#login {
        padding-top: 61px;
    }

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



    /* 메인 */

    section {
        padding: 3rem 0;
    }

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

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

    }

    .main-txt-cont .sub-tit {
        font-size: 1rem;
    }

    /* 메인 > 배너 */

    #main-bn {
        width: 100%;
    }

    .main-bn-slide .slick-slide {
        margin: 0 0.25rem;
    }


    /* 메인 > 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;
        margin-bottom: 1rem;
    }

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



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

    .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.list-area .list-wr {
        display: flex;
        white-space: nowrap;
        overflow-x: auto;
        width: calc(100% + 2rem);
        margin: 0 -1rem;
        padding-left: 1rem;
        flex-wrap: nowrap;
    }

    #main-inst.list-area .list-wr::-webkit-scrollbar {
        display: none;
    }

    #main-inst.list-area .list-wr {
        scrollbar-width: none;
    }

    #main-inst.list-area .list-wr .li-it {
        display: inline-block;
        width: 5rem;
        flex: 0 0 5rem;
        margin-right: 1rem;
    }

    #main-inst [class*="rank-"] .r-img {
        width: calc(100% - 0.375rem);
        height: calc(100% - 0.375rem);
        margin: 0.1875rem;
    }

    #main-inst .cr-tit {
        font-size: 0.875rem;
        font-weight: 500;
        margin-top: 0.5rem;
    }

    .cr-wr.cr-inst .tag-rank {
        bottom: -4px;
    }

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

    .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 0 1.3125rem;
        border-bottom: 1px solid rgba(0, 0, 0, .12);
        margin-bottom: 2.25rem;
        margin-left: 1rem;
        margin-right: 1rem;
    }


    .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-area .my-rw h4 {
        margin-bottom: 1.5rem;

    }

    .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,
    #courseOffline .cate-inst-box {
        margin-top: 1.5rem;
        font-size: 0.875rem;
        column-gap: 1rem;
        row-gap: 0;
    }

    .course-area .cate-inst-box>div {
        gap: 0.5rem;
    }

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

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

    .cate-inst-box .cr-discount {
        font-size: 0.875rem;
    }

    /* 강의 > 강의 자료 */

    .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: 0.875rem;
        vertical-align: text-bottom;
        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;
    }

}