/* root --------------------------- */
:root {
    /* sac */
    --sac-red: #FF535E;
    --sac-blue: #1372D0;
    --sac-green: #17C9A9; /* emerald-green */
    --sac-violet: #5A1DA8;
    --sac-brown: #6C3518; /* dark-brown */
    --sac-gold: #93804E;
    --sac-gray: #B3B3A6; /* warm-gray */
    --sac-silver: #909093;
    --sac-new-blue: #1D91A5;
    /* membership */
    --mem-corp: #000;
    --mem-gold: #D29E35;
    --mem-blue: #163C98;
    --mem-green: #3A8645;
    --mem-basic: #FA4A55;
    --mem-sac: #17C9A9;
    --mem-nobel: #84754E;
    /* black, gray */
    --white01: #fff;
    --white02: #fff;
    --black: #1A1A1A;
    --gray01: #888A8D;
    --gray02: #B8BBC0;
    --gray03: #E8E8E8;
    --gray04: #F6F6F6;
    --opa-light-white: rgba(255,255,255,.1);
    --opa-bold-white: rgba(255,255,255,.8);
    --opa-white: rgba(255,255,255,.6);
    --opa-black: rgba(0,0,0,.6);
    --opa-bold-black: rgba(0,0,0,.8);
}

@media (prefers-color-scheme: dark) {
    :root {
        /* sac */
        --sac-blue: #2C81D4;
        --sac-violet: #7C47C0;
        --sac-brown: #8B5437;
        /* membership */
        --mem-blue: #315ABD;
        /* black, gray */
        --white01: #1A1A1A;
        --white02: #1F1F1F;
        --black: #fff;
        --gray01: #888A8D;
        --gray02: #5A5B5E;
        --gray03: #3B3C40;
        --gray04: #2A2B2E;
        /* --opa-light-white: rgba(255,255,255,.1);
        --opa-bold-white: rgba(255,255,255,.8);
        --opa-white: rgba(255,255,255,.6);
        --opa-black: rgba(0,0,0,.6);
        --opa-bold-black: rgba(0,0,0,.8); */
    }
}

/* header -------------------- */
header {width: 100%; height: 5.7rem; padding: 0 1rem; background-color: var(--white01); position: fixed; top: 0; left: 0; z-index: 999; display: none;}
/* header.bg-trans {background-color: transparent;} */
header h1 {text-align: center; margin: 0 auto; font-size: 1.8rem; line-height: 5.7rem; width: 20rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
header span.compl-btn {font-size: 1.5rem; font-weight: 500; position: absolute; top: 50%; right: 1.6rem; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); cursor: pointer;}
header i {position: absolute; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); cursor: pointer;}
header i.icon-arrow-left-24 {left: 1rem;}
header i.icon-alram,
header i.icon-like {right: 5.2rem;}
header i.icon-search-wh,
header i.icon-search-24,
header i.icon-statistics-24,
header i.icon-close-24,
header i.icon-menu-24,
header i.icon-share {right: 1.6rem;}
header i.icon-list-24 {right: 4.6rem;}
header i.icon-add-24 {right: 7.6rem;}


/* content -------------------- */
/* .bg-trans + .container {margin-top: 0!important;} */

.tab-cont .container {margin-top: 0; min-height: calc(100vh - 3.9rem - 18.5rem);}
.tab-cont .container::before {content: none;}

.container {position: relative; margin-top: .8rem; padding: 2rem 1.6rem 3.4rem; min-height: calc(100vh - .8rem); background-color: var(--white01);}
.container::before {content: ''; width: 100%; height: .8rem; background-color: var(--gray04); position: fixed; top: 0; left: 0; z-index: 100;}
.container.capture::before {content: ''; width: 100%; height: .8rem; background-color: transparent; position: fixed; top: 0; left: 0; z-index: 100;}

.container.no-line {margin-top: 0; min-height: 100vh;}
.container.no-line::before {content: none;}
.container.bg-gray {background-color: var(--gray04);}
.container > button {margin-top: 3.6rem;}

.cont-box {position: relative;}
.cont-box + .cont-box {margin-top: 3.6rem; padding-top: 2.8rem;}
.cont-box + .cont-box::before {content: ''; width: 100vw; height: .8rem; position: absolute; top: 0; left: -1.6rem; background-color: var(--gray04);}
.cont-box > button {margin-top: 3.6rem;}

.box + .box, .banner + .box {margin-top: 3.6rem;}
.box > p {position: relative; font-size: 1.4rem; line-height: 1.6; word-break: keep-all; margin-bottom: 3.6rem;}
.box > p > button {position: absolute; right: 0;  top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%);}

/* footer -------------------- */
.container .footer {margin-left: -1.6rem; margin-right: -1.6rem;}
.footer {width: 100vw; margin-top: 4rem; margin-bottom: -3.4rem; padding: 2rem 0; background-color: var(--gray04); text-align: center;}
.footer .btn-wrap {display: flex; align-items: center; justify-content: center; margin-bottom: 1.6rem;}
.footer .btn-wrap > button {width: 7.2rem; height: 2.8rem; padding: 0 0 .2rem;}
.footer .btn-wrap > button + button {margin-left: 4rem;}
.footer > ul {display: flex; align-items: center; justify-content: center;}
.footer > ul > li {position: relative; font-size: 1.1rem; color: var(--gray01); font-weight: 500;}
.footer > ul > li + li {margin-left: 1.6rem;}
.footer > ul > li + li::before {content: ''; display: block; width: 1px; height: .8rem; background-color: var(--gray01); position: absolute; top: 50%; left: -.8rem; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%);}
.footer > ul:not(.link) {margin: .8rem auto 0; width: 60%; flex-wrap: wrap;}
.footer > ul:not(.link) > li {font-weight: initial; line-height: 1.6;}
.footer > p {margin-top: 1.6rem; font-size: 1.1rem; color: var(--gray01);}
.footer .copy {display: block; margin-top: 2rem; font-size: 1.1rem; color: var(--gray01);}

/* 메인 -------------------- */
/* 메인 > 상단 포스터 */
/* height: calc(100vh - 10rem); 전체에서 main-wrap 첫 타이틀 영역(5.6rem) + margin 영역(1.6rem + 2.8rem) = 10rem */
.play-intro-swiper-wrap {width: 100vw; height: calc(100vh - 100px); position: fixed; top: 0; left: 0;}
.play-intro-swiper-wrap .play-intro-swiper {height: 100%;}

.play-intro-swiper-wrap .swiper-pagination {bottom: 75px!important;}
.play-intro-swiper-wrap .swiper-pagination .swiper-pagination-bullet {background-color: #fff; opacity: .5;}
.play-intro-swiper-wrap .swiper-pagination .swiper-pagination-bullet-active {opacity: 1;}

.play-intro {position: relative; width: 100%; height: 100%; padding: 0 1.6rem; text-align: center;}
.play-intro > div {width: 100%; padding-bottom: 2.8rem; padding-top: 8vw;}
.play-intro .poster {width: 302px; height: 386px; margin: 0 auto 2rem; filter: drop-shadow(0 0 2.3rem rgba(26, 26, 26, 0.2)); background-repeat: no-repeat; background-size: 100% 100%; background-position: center;}
.play-intro ul {justify-content: center; margin-bottom: 1rem;}
.play-intro ul > li {position: relative; font-size: 1.3rem; font-weight: 500; color: #fff;}
.play-intro ul > li + li::before {content: ''; display: block; width: 1px; height: .8rem; background-color: #fff; position: absolute; top: 50%; left: -.8rem; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%);}
.play-intro h2 {font-size: 24px; font-weight: 700; color: #fff; width: 80%; height: 2.4rem; margin: 0 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.play-intro button {width: 9.2rem; height: fit-content; margin: 2rem auto 0; padding: .65rem 0 .75rem; border-radius: 2rem; background-color: var(--white01); color: black;}

@media screen and (max-width: 375px) {
    .play-intro .poster {width: 230px; height: 300px;}
}

/* 메인 > 메인 콘텐츠 */
.main-wrap {display: flex; flex-flow: column; position: absolute; width: 100vw; height: 100%; overflow: hidden; top: calc(100vh - 151px); left: 0; transition: top .2s ease; z-index: 5; background-color: var(--white01); border-radius: 3rem 3rem 0 0; box-shadow: 0 -.4rem 1.5rem rgba(26, 26, 26, 0.05);}
.main-wrap .main-handle {height: 51px; background-image: url(/resource/img/ico/slide-up-89ac2736e3139ddd10d9ed201f7266ad.svg); background-repeat: no-repeat; background-size: 2.4rem; background-position: center top .5rem;}
.main-wrap .main-cont {width: 100%; height: calc(100% - 5.1rem); padding: 0 1.6rem 13.6rem; overflow: hidden;}
.main-wrap .main-cont .main-title {margin-bottom: 2.8rem; display: flex; align-items: flex-end; justify-content: space-between; column-gap: .8rem;}
.main-wrap .main-cont .main-title h2 {font-weight: 500; letter-spacing: -.03rem; font-size: 23px; display: flex; align-items: flex-end; justify-content: space-between; column-gap: .8rem;}
.main-wrap .main-cont .main-title > button {position: initial; bottom: auto; right: auto;}
.main-wrap .main-cont .main-title + p {margin-bottom: 2.8rem;}
.main-wrap .main-cont .box > img {width: 100%;}

.main-wrap.active {top: 0;}
.main-wrap.active .main-cont {overflow: scroll;-webkit-overflow-scrolling: touch}

@media (prefers-color-scheme: dark) {
    .main-wrap .main-handle {filter: invert(.8);}
}

/* 메인 > 예약한 공연/전시 */
.swiper.reserve-swiper {width: 100vw; height: fit-content; position: relative; left: -1.6rem; padding: 0 1.6rem 2.2rem;}
.swiper.reserve-swiper .swiper-scrollbar {left: 1.6rem; bottom: 0; height: .2rem; width: calc(100vw - 3.2rem); border-radius: 0; background: linear-gradient(var(--white01) 50%, var(--gray03) 50%); z-index: 1;}
.swiper.reserve-swiper .swiper-scrollbar .swiper-scrollbar-drag {background-color: var(--sac-red); height: .2rem; border-top: 1px solid var(--sac-red);}

.swiper.reserve-swiper .swiper-slide {display: flex; align-items: center; justify-content: space-between; width: 270px; height: 125px; padding: 16px; border: 1px solid var(--gray03); border-radius: .4rem; box-shadow: .2rem .2rem .8rem rgba(26, 26, 26, 0.05);}
.swiper.reserve-swiper .swiper-slide .info {width: calc(100% - 85px);}
.swiper.reserve-swiper .swiper-slide .info > span {font-size: 12px; font-weight: 500; display: block; margin-bottom: 1.2rem;}
.swiper.reserve-swiper .swiper-slide .info > h6 {font-size: 14px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-bottom: 1.2rem;}
.swiper.reserve-swiper .swiper-slide .info > ul > li {position: relative; font-size: 12px; color: var(--gray01); font-weight: 500; line-height: 1.4;}
.swiper.reserve-swiper .swiper-slide .info > ul > li + li::before {content: ''; display: block; width: 1px; height: .8rem; background-color: var(--gray03); position: absolute; top: 50%; left: -.8rem; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%);}
.swiper.reserve-swiper .swiper-slide .poster {width: 65px; height: 94px; margin-left: 20px; border-radius: .4rem; background-repeat: no-repeat; background-size: 100% 100%; background-position: center;}

/* 메인 > 전시장 별 일정 바로가기 */
.hall-quick {display: grid; grid-template-columns: repeat(3, 1fr); align-items: center; text-align: center; margin-bottom: -1.6rem;}
.hall-quick > li > div {width: 7.2rem; height: 7.2rem; border-radius: 100%; background-color: var(--white01); border: 1px solid var(--gray04); box-shadow: 2px 2px 20px 0px rgba(0, 0, 0, 0.08); display: flex; align-items: center; justify-content: center; margin: 0 auto;}
.hall-quick i {width: 6.4rem; height: 3.2rem; margin: 0 auto; background-repeat: no-repeat; background-position: center; }
.hall-quick span {display: block; font-size: 1.4rem; font-weight: 500; margin-top: 1.2rem; }
.img-opera-red {background-image: url(/resource/img/ico/img-opera-red-acc9b6c39648f6efcfa422d3c3d303a5.svg); background-size: 100% auto;}
.img-music-red {background-image: url(/resource/img/ico/img-music-red-4d548e9bebc5b40df5245dc247d4dab2.svg); background-size: 100% auto;}
.img-hangaram-red {background-image: url(/resource/img/ico/img-hangaram-red-4e081f78fc30b8d77b626bd43096abd7.svg); background-size: auto 100%;}

@media screen and (min-width: 768px) {
    .hall-quick {grid-template-columns: repeat(3, 12rem); justify-content: center;}
}

/* 메인 > 오늘의 공연/전시 일정 */
.today-list > li {position: relative; padding-left: 2rem; display: flex; align-items: center; margin-bottom: 3rem;}
.today-list > li::before {content: ''; width: .9rem; height: .9rem; border-radius: 100%; background-color: var(--gray02); position: absolute; left: 0; top: 0;}
.today-list > li::after {content:  ''; width: 1px; height: calc(100% + 3rem); background-color: var(--gray02); position: absolute; left: .4rem; top: 0;}
.today-list > li:last-child:after {height: 100%;}
.today-list .poster {width: 7.5rem; height: 10.5rem; margin-right: 1.2rem; border-radius: .4rem; background-repeat: no-repeat; background-size: 100% 100%; background-position: center;}
.today-list .info {width: calc(100% - 8.7rem);}
.today-list .info > ul > li {position: relative; font-size: 1.3rem; color: var(--gray01); line-height: 1.4;}
.today-list .info > ul > li + li::before {content: ''; display: block; width: 1px; height: .8rem; background-color: var(--gray03); position: absolute; top: 50%; left: -.8rem; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%);}
.today-list .info > p {font-size: 1.3rem; color: var(--gray01); line-height: 1.4; margin-bottom: .8rem;}
.today-list .info > h6 {width: 100%; font-size: 1.5rem; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.today-list .info > button {margin-top: 1.8rem;}
.today-list .info > button.blue {background-color: var(--sac-new-blue); border-color: var(--sac-new-blue);}

/* 메인 > 오늘의 공연 싹쓸이 */
.swiper.today-swiper {width: 100vw; height: fit-content; position: relative; left: -1.6rem; padding: 0 1.6rem;}
.swiper.today-swiper .swiper-slide {width: 12.4rem;}
.swiper.today-swiper .swiper-slide .poster {position: relative; width: 12.4rem; height: 12.4rem; border-radius: .4rem; box-shadow: 0 .3rem .8rem 1px rgba(1, 1, 1, 0.15); background-repeat: no-repeat; background-size: 100% 100%; background-position: center;}
.swiper.today-swiper .swiper-slide .poster.unopened::before {content: ''; width: 12.4rem; height: 12.4rem; background-color: var(--opa-black); position: absolute; top: 0; left: 0; border-radius: .4rem;}
.swiper.today-swiper .swiper-slide .poster > span {display: block; width: fit-content; height: 2.8rem; white-space: nowrap; line-height: 2.7rem; margin: 0 auto; padding: 0 1rem; font-size: 1.2rem; font-weight: 500; color: #fff; background-color: black; border-radius: 2rem; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}
.swiper.today-swiper .swiper-slide h6 {margin-top: 1rem; font-size: 1.3rem; font-weight: 500; line-height: 1.4; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; line-clamp: 2; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}

.swiper.today-swiper .swiper-slide .price {margin-top: 1rem; display: flex; flex-flow: column;}
.swiper.today-swiper .swiper-slide .price .label {width: fit-content; height: 1.4rem; padding: 0 .2rem; font-size: 1rem; line-height: 0; display: flex; align-items: center; justify-content: center;}
.swiper.today-swiper .swiper-slide .price .original {width: 8rem; margin-top: .4rem; display: flex; align-items: center; justify-content: space-between;}
.swiper.today-swiper .swiper-slide .price .original > p {font-size: 1rem; font-weight: 700; color: var(--sac-red);}
.swiper.today-swiper .swiper-slide .price .original > span {font-size: 1rem; font-weight: 500; color: var(--sac-silver); text-decoration: line-through;}
.swiper.today-swiper .swiper-slide .price .discount {width: 8rem; margin-top: .2rem; display: flex; align-items: center; justify-content: space-between;}
.swiper.today-swiper .swiper-slide .price .discount > p {font-size: 1.4rem; font-weight: 700; color: var(--sac-red);}
.swiper.today-swiper .swiper-slide .price .discount > span {font-size: 1.4rem; font-weight: 700;}

@media (prefers-color-scheme: dark) {
    .main-title > img {display: none;}
}

/* 메인 > 패키지 공연, 당일할인 티켓 바로가기 */
.main-quick {display: flex; align-items: center; margin: 3.6rem 0; border: 1px solid var(--gray03); box-shadow: .2rem .2rem .8rem rgba(26, 26, 26, 0.05); border-radius: .4rem;}
.main-quick > li {width: 50%; padding: 2.4rem 1.2rem; display: flex; align-items: center; justify-content: space-between; cursor: pointer;}
.main-quick > li + li {border-left: 1px solid var(--gray03);}
.main-quick > li div {width: calc(100% - 4rem);}
.main-quick > li h6 {font-size: 1.6rem; font-weight: 500; word-break: keep-all; line-height: 1.4;}
.main-quick > li span {font-size: 1.4rem; color: var(--gray01); display: block; margin-top: .8rem;}

/* 메인 > 패키지 공연, 당일할인 티켓 바로가기 - 상세 */
.sales-info {display: flex; flex-flow: column; width: 100vw; height: 488px; margin: -2rem -1.6rem 0; padding: 3rem 1.6rem 0; background-repeat: no-repeat; background-size: cover; background-position: center;}
.sales-info.package {background-image: url(/resource/img/img-bg-package-06352bf5a033113bf9446f448324e568.png);}
.sales-info.discount {background-image: url(/resource/img/img-bg-sale-f8e087de9a52c57758e77922291a26df.png);}
.sales-info > h2 {font-size: 25px; color: #fff; line-height: 1.3; font-weight: 700; margin-bottom: 40px;}
.sales-info.package > h2 {margin-bottom: .8rem;}
.sales-info .sales-desc {font-size: 13px; color: #fff; font-weight: 500; line-height: 1.5;}
.sales-info .sales-desc + .sales-desc {margin-top: 20px;}
.sales-info .sales-desc > h6 {font-weight: 700; margin-bottom: 4px;}
.sales-info > div > button {margin-top: 1.6rem;}

@media (prefers-color-scheme: dark) {
    .sales-info > div > button {background-color: var(--white01); border-color: var(--white01); color: var(--black)!important;}
}

/* 메인 > 티켓 오픈 일정 */
.swiper.open-schedule-swiper {width: 100vw; height: fit-content; position: relative; left: -1.6rem; padding: 0 1.6rem;}
.swiper.open-schedule-swiper .swiper-slide {width: 12.4rem;}
.swiper.open-schedule-swiper .swiper-slide .poster {position: relative; width: 12.4rem; height: 17.4rem; border-radius: .4rem; overflow: hidden; background-repeat: no-repeat; background-size: 100% 100%; background-position: center;}
.swiper.open-schedule-swiper .swiper-slide .poster > ul {position: absolute; bottom: 0; background-color: var(--opa-bold-black); width: 100%; padding: .6rem .8rem;}
.swiper.open-schedule-swiper .swiper-slide .poster > ul > li {position: relative; font-size: 1.2rem; color: #fff; display: flex; align-items: center;}
.swiper.open-schedule-swiper .swiper-slide .poster > ul > li + li::before {content: ''; display: block; width: 1px; height: .8rem; background-color: #fff; position: absolute; top: 50%; left: -.8rem; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%);}
.swiper.open-schedule-swiper .swiper-slide .poster > ul > li > i {margin-right: .2rem;}
.swiper.open-schedule-swiper .swiper-slide h6 {margin-top: .8rem; font-size: 1.5rem; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}

/* 메인 > 티켓 오픈 일정 > 상세 */
.open-schedule-list {display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 2rem 1.2rem;}
.open-schedule-list .poster {position: relative; width: 100%; height: calc(((133vw - 3.2rem) / 2) - 1.2rem); border-radius: .4rem; overflow: hidden; background-repeat: no-repeat; background-size: 100% 100%; background-position: center;}
.open-schedule-list .poster > ul {position: absolute; bottom: 0; background-color: var(--opa-bold-black); width: 100%; padding: 6px 8px;}
.open-schedule-list .poster > ul > li {position: relative; font-size: 12px; color: #fff; display: flex; align-items: center; display: flex; align-items: center;}
.open-schedule-list .poster > ul > li + li {margin-left: 16px;}
.open-schedule-list .poster > ul > li + li::before {content: ''; display: block; width: 1px; height: 8px; background-color: #fff; position: absolute; top: 50%; left: -8px; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%);}
.open-schedule-list .poster > ul > li > i {width: 16px; height: 16px; margin-right: 2px;}
.open-schedule-list h6 {width: calc(((100vw - 3.2rem) / 2) - 1.2rem); margin-top: .8rem; font-size: 1.5rem; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}

@media screen and (min-width: 768px) {
    .open-schedule-list {grid-template-columns: repeat(4, 1fr);}
    .open-schedule-list .poster {height: calc(((133vw - 3.2rem) / 4) - 3.6rem);}
    .open-schedule-list h6 {width: calc(((100vw - 3.2rem) / 4) - 3.6rem);}
}

/* 메인 > 메인 배너 */
.main-banner {height: fit-content; margin: 3.6rem 0; text-align: center;}
.main-banner img {width: 100%;}

@media screen and (min-width: 768px) {
    .main-banner img {width: 34.3rem; height: 15rem;}
}

/* 메인 > 예술의전당이 추천해요, 나만의 맞춤 공연 */
.play-grid-list {display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 2rem 1.2rem;}
.play-grid-list .poster {width: 100%; height: calc(((133vw - 3.2rem) / 2) - 1.2rem); border-radius: .4rem; background-repeat: no-repeat; background-size: 100% 100%; background-position: center;}
.play-grid-list .info {margin-top: 1.2rem;}
.play-grid-list .info > h6 {width: calc(((100vw - 3.2rem) / 2) - 1.2rem); font-size: 1.5rem; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.play-grid-list .info > ul {margin-top: .6rem; font-size: 1.2rem; color: var(--gray01); }
.play-grid-list .info > ul > li {position: relative; font-size: 1.3rem; color: var(--gray01); line-height: 1.4;}
.play-grid-list .info > ul > li + li::before {content: ''; display: block; width: 1px; height: .8rem; background-color: var(--gray01); position: absolute; top: 50%; left: -.8rem; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%);}
.play-grid-list .info > p {font-size: 1.3rem; color: var(--gray01); line-height: 1.4;}
.play-grid-list > li.more {grid-column: 1 / span 2; display: flex; align-items: center; justify-content: center; padding: 1.6rem 0; text-align: center; font-size: 1.3rem; font-weight: 500; color: var(--gray01); border-top: 1px solid var(--gray03); border-bottom:  1px solid var(--gray03); cursor: pointer;}
.play-grid-list > li.more > i {margin-left: .4rem;}

@media screen and (min-width: 768px) {
    .play-grid-list {grid-template-columns: repeat(4, 1fr);}
    .play-grid-list .poster {height: calc(((133vw - 3.2rem) / 4) - 3.6rem);}
    .play-grid-list .info > h6 {width: calc(((100vw - 3.2rem) / 4) - 3.6rem);}
    .play-grid-list > li.more {grid-column: 1 / span 4;}
}

/* 메인 > 좋아할만한 공연 전시 */
.interest-play-swiper.swiper {width: 100vw; height: fit-content; padding: 0 1.6rem; position: relative; left: -1.6rem;}
.interest-play-swiper .swiper-slide {width: 16rem;}
.interest-play-swiper .poster {width: 100%; height: 20.3rem; border-radius: .4rem; background-repeat: no-repeat; background-size: 100% 100%; background-position: center;}
.interest-play-swiper .info {margin-top: 1.2rem;}
.interest-play-swiper .info > h6 {width: 100%; font-size: 1.5rem; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.interest-play-swiper .info > ul {margin-top: .6rem; font-size: 1.2rem; color: var(--gray01); }
.interest-play-swiper .info > ul > li {position: relative; font-size: 1.3rem; color: var(--gray01); line-height: 1.4;}
.interest-play-swiper .info > ul > li + li::before {content: ''; display: block; width: 1px; height: .8rem; background-color: var(--gray01); position: absolute; top: 50%; left: -.8rem; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%);}
.interest-play-swiper .info > p {font-size: 1.3rem; color: var(--gray01); line-height: 1.4;}

.main-wrap .empty-cont.trans {padding: 1.6rem 0;}

/* 메인 > 주제별 통계 바로가기 */
.stats-quick {display: flex; align-items: center; width: 100%; height: 6rem; padding: 1.6rem 2rem; margin: 3.6rem 0; font-size: 14px; font-weight: 700; color: #fff; border-radius: .4rem; background-color: var(--sac-red); background-image: url(/resource/img/ico/icon-won-stats-3f6c27e4d254d7a9ceca3b197fdaf228.svg); background-repeat: no-repeat; background-size: 4rem; background-position: right 20px center;}

/* 메인 > 홈페이지 바로가기 */
.home-quick {display: flex; align-items: center; width: 100%; height: 6rem; padding: 1.6rem 2rem; margin: 3.6rem 0; font-size: 14px; font-weight: 700; color: #fff; border-radius: .4rem; background-color: #101010; background-image: url(/resource/img/logo/sac-logo02-93dba1ca043e1200394236f518f5c602.svg); background-repeat: no-repeat; background-size: auto 2rem; background-position: right 20px bottom 16px;}

/* 메인 > 예술의전당 story */
.swiper.story-swiper {width: 100vw; height: fit-content; position: relative; left: -1.6rem; padding: 0 1.6rem;}
.swiper.story-swiper .swiper-slide {width: 284px;}
.swiper.story-swiper .swiper-slide .thumbnail {position: relative; width: 284px; height: 41vw; border-radius: .4rem; background-repeat: no-repeat; background-size: cover; background-position: center;}
.swiper.story-swiper .swiper-slide .thumbnail::before {content: ''; width: 6.2rem; height: 6.2rem; background-image: url(/resource/img/ico/icon-play-e5e374220a302edee622022d3ab4fc5d.svg); background-repeat: no-repeat; background-size: contain; background-position: center; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}
.swiper.story-swiper .swiper-slide h6 {width: 100%; margin-top: 1.2rem; font-size: 1.5rem; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.swiper.story-swiper .swiper-slide span {display: block; margin-top: .8rem; font-size: 1.3rem; color: var(--gray01);}

/* 메인 > 예술의전당 story > 상세 */
.story-wrap {width: 100vw; margin:  -2rem -1.6rem 0; }
.story-wrap .video {width: 100%; height: 56vw;}
.story-wrap .video iframe {width: 100%; height: 100%;}
.story-wrap .info {margin: 1.6rem;}
.story-wrap .info > h6 {font-size: 1.5rem; font-weight: 500; margin-bottom: .8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.story-wrap .info > div {display: flex; align-items: center; flex-wrap: wrap;}
.story-wrap .info ul:not(.hashtag) {margin-right: 1rem;}
.story-wrap .info ul:not(.hashtag) > li {position: relative; font-size: 1.3rem; color: var(--gray01); line-height: 1.6;}
.story-wrap .info ul:not(.hashtag) > li + li::before {content: ''; display: block; width: 1px; height: .8rem; background-color: var(--gray03); position: absolute; top: 50%; left: -.8rem; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%);}
.story-wrap .info ul.hashtag {font-size: 1.3rem; color: var(--sac-blue);}
.story-wrap .info ul.hashtag > li {line-height: 1.6;}
.story-wrap .info ul.hashtag > li + li {margin-left: .6rem;}

/* 메인 > 예당 pick 관람평 */
.swiper.review-swiper {width: 100vw; height: fit-content; position: relative; left: -1.6rem; padding: 1.6rem; margin: -1.6rem 0;}
.swiper.review-swiper .swiper-slide {width: 16rem; overflow: hidden; border: 1px solid var(--gray03); border-radius: .4rem; box-shadow: .2rem .2rem .8rem rgba(26, 26, 26, 0.05);}
.swiper.review-swiper .swiper-slide .poster {position: relative; width: 16rem; height: 12rem; background-repeat: no-repeat; background-size: 100% auto; background-position: center;}
.swiper.review-swiper .swiper-slide .poster > span {position: absolute; bottom: .8rem; right: .8rem; width: 4rem; height: 2rem; line-height: 2rem; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; color: #fff; background-color: var(--opa-black); border-radius: 2rem;}
.swiper.review-swiper .swiper-slide .poster > span.on {background-color: var(--sac-red);}
.swiper.review-swiper .swiper-slide .poster > span > i {margin-right: .2rem;}
.swiper.review-swiper .swiper-slide .info {height: 16.4rem; padding: 1.2rem 1.6rem;}
.swiper.review-swiper .swiper-slide .info > div {display: flex; align-items: center; justify-content: space-between; position: relative;}
.swiper.review-swiper .swiper-slide .info > div .report-layer {display: none; width: 8.2rem; height: 4.2rem; position: absolute; top: 1.8rem; right: 0; border: 1px solid var(--gray03); background-color: var(--white02); border-radius: .4rem; box-shadow: .3rem .3rem .6rem rgba(26, 26, 26, 0.06); z-index: 1;}
.swiper.review-swiper .swiper-slide .info > div .report-layer button {width: 100%; height: 100%; font-size: 1.2rem;}
.swiper.review-swiper .swiper-slide .info > div > i.active + .report-layer {display: block;}
.swiper.review-swiper .swiper-slide .info .flex {margin-top: .8rem;}
.swiper.review-swiper .swiper-slide .info .flex > li {position: relative; font-size: 1.3rem; font-weight: 500; color: var(--gray01);}
.swiper.review-swiper .swiper-slide .info .flex > li + li::before {content: ''; display: block; width: 1px; height: .8rem; background-color: var(--gray03); position: absolute; top: 50%; left: -.8rem; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%);}
.swiper.review-swiper .swiper-slide .info h6 {font-size: 1.5rem; font-weight: 500; margin-top: 1.6rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.swiper.review-swiper .swiper-slide .info span {display: block; margin-top: .8rem;font-size: 1.3rem; color: var(--gray01);}
.swiper.review-swiper .swiper-slide .info p {margin-top: 1.6rem; font-size: 1.3rem; line-height: 1.4; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; line-clamp: 2; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}

/* 메인 > 예당 pick 관람평 > 상세 */
.pick-review-title {position: relative; width: 100vw; margin: -2rem -1.6rem 0; padding: 1.2rem 1.6rem 2rem;}
.pick-review-title > h6 {font-size: 1.3rem; color: var(--gray01); font-weight: 500; display: flex; align-items: center;}
.pick-review-title > h6 > i {margin-left: .4rem;}
.pick-review-title > p {font-size: 1.3rem; color: var(--gray01); margin-top: 1rem;}
.pick-review-title .bubble {position: absolute; top: 2.6rem; left: .6rem; width: 25.4rem; height: 11.2rem; padding: 2.7rem 1.6rem 1.6rem 2.2rem; font-size: 1.1rem; color: var(--gray01); line-height: 1.4; word-break: keep-all; background-image: url(/resource/img/ico/bubble-top-line4-682eaa2f865a5d0dd42142d74bf56b54.png); background-repeat: no-repeat; background-size: contain; background-position: center; z-index: 1;}

.pick-review-list {width: 100vw; margin: 0 -1.6rem; padding: 0 1.6rem; background-color: var(--white01); margin-bottom: .8rem;}
.pick-review-list .cont {padding: 2rem 0; display: flex; align-items: center;}
.pick-review-list .cont .poster {width: 4.6rem; height: 6.5rem; margin-right: 1.2rem; border-radius: .4rem; background-repeat: no-repeat; background-size: 100% 100%; background-position: center;}
.pick-review-list .cont .info {width: calc(100% - 5.8rem);}
.pick-review-list .cont .info > h6 {margin-top: 1.2rem; font-size: 1.4rem; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.pick-review-list .cont .info > div {position: relative; display: flex; align-items: center; justify-content: space-between; margin-top: .8rem;}
.pick-review-list .cont .info > div > ul {flex-wrap: wrap;}
.pick-review-list .cont .info > div > ul > li {position: relative; font-size: 1.2rem; color: var(--gray01);}
.pick-review-list .cont .info > div .report-layer {display: none; width: 8.2rem; height: 4.2rem; position: absolute; top: 1.8rem; right: 0; border: 1px solid var(--gray03); background-color: var(--white02); border-radius: .4rem; box-shadow: .3rem .3rem .6rem rgba(26, 26, 26, 0.06);}
.pick-review-list .cont .info > div .report-layer button {width: 100%; height: 100%; font-size: 1.2rem;}
.pick-review-list .cont .info > div > i.active + .report-layer {display: block;}
.pick-review-list > p {font-size: 1.3rem; line-height: 1.6;}
.pick-review-list .reply {margin-top: 2rem; padding: 1.2rem 0; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--gray03);}
.pick-review-list .reply > p {font-size: 1.3rem;}

/* 메인 > 검색 */
.search-play-list > li {display: flex; align-items: center;}
.search-play-list > li + li {margin-top: 1.6rem;}
.search-play-list > li .poster {width: 4.6rem; height: 6.5rem; margin-right: 1.2rem; border-radius: .2rem; background-repeat: no-repeat; background-size: 100% 100%; background-position: center;}
.search-play-list > li .info {width: calc(100% - 5.8rem);}
.search-play-list > li .info h6 {font-size: 1.5rem; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.search-play-list > li .info ul {margin-top: 1.2rem;}
.search-play-list > li .info ul > li {position: relative; font-size: 1.3rem; line-height: 1.4; color: var(--gray01);}
.search-play-list > li .info ul > li + li::before {content: ''; display: block; width: 1px; height: .8rem; background-color: var(--gray03); position: absolute; top: 50%; left: -.8rem; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%);}
.search-play-list > li .info p {font-size: 1.3rem; line-height: 1.4; color: var(--gray01);}
.search-play-list > li.more {display: flex; align-items: center; justify-content: center; padding: 1.6rem 0; text-align: center; font-size: 1.3rem; font-weight: 500; color: var(--gray01); border-top: 1px solid var(--gray03); border-bottom:  1px solid var(--gray03); cursor: pointer;}
.search-play-list > li.more > i {margin-left: .4rem;}

/* 알림 -------------------- */
.inform-list > li {padding-bottom: 2rem;}
.inform-list > li + li {padding-top: 2rem; border-top: 1px solid var(--gray03);}
.inform-list > li > div {display: flex; align-items: center; justify-content: space-between;}
.inform-list > li > div > h6 {display: flex; align-items: center; font-size: 1.3rem; font-weight: 700;}
.inform-list > li > div > h6 > i {margin-right: .6rem;}
.inform-list > li > div > span {font-size: 1.2rem; color: var(--gray01);}
.inform-list > li > p {margin-top: 1.2rem; font-size: 1.4rem; font-weight: 500; width: 90%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}

.inform-list > li.checked {color: var(--gray02);}
.inform-list > li.checked > div > h6 > i {opacity: .3;}

/* 알림 > 상세 */
.inform-cont {display: flex; align-items: flex-start;}
.inform-cont + .inform-cont {margin-top: 2rem;}
.inform-cont .img {width: 4rem; height: 4rem; margin-right: .6rem; border-radius: 100%; background-color: var(--white01); background-image: url(/resource/img/logo/inform-sac-logo01-cf881bbed721dd9abe7d9b358fbf6979.png); background-repeat: no-repeat; background-size: 55%; background-position: center;}
.inform-cont p {width: calc(100% - 4.6rem); padding: 2rem 1.6rem; font-size: 1.4rem; line-height: 1.4; background-color: var(--white01); border-radius: .4rem;}
.inform-cont .link {text-decoration: underline;}

@media (prefers-color-scheme: dark) {
    .inform-cont .img {background-image: url(/resource/img/logo/inform-sac-logo01-dark-7df6995705daa4e650a6b7ee6507be53.png);}
}

/* 설문조사 -------------------- */
.survey-list > li + li {margin-top: 5rem;}
.survey-list > li {display: flex; flex-flow: column; row-gap: 3rem;}
.survey-list > li > p {font-size: 1.5rem; font-weight: 500; line-height: 1.6;}
.survey-list > li > ul {display: flex; flex-flow: column; row-gap: 1.6rem;}
.survey-list > li > ul > li {display: flex; flex-wrap: wrap; row-gap: 1rem;}
.survey-list > li > img {width: 100vw; margin: 0 -1.6rem -1rem;}
.survey-list > li > button {margin-top: -1rem;}

/* 설문조사 버튼 형태 라디오 */
/* .survey-list > li > ul {margin-top: 1rem; margin-bottom: 2.4rem; display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 1rem .6rem; align-items: center;}
.survey-list > li > ul > li > input[type='radio'] + label {width: 100%; height: 3.4rem;}
.survey-list > li > ul > li > input[type='radio'] + label::before {content: none;}
.survey-list > li > ul > li > input[type='radio'] + label > span {display: block; width: 100%; height: 100%; line-height: 3.3rem; border: 1px solid var(--black); border-radius: .4rem; text-align: center; font-size: 1.4rem; font-weight: 500; background-color: var(--white01);}
.survey-list > li > ul > li > input[type='radio']:checked + label > span {background-color: var(--black); color: var(--white01);} */


/* 로그인 -------------------- */
.login-wrap > li {font-size: 1.3rem; font-weight: 500; line-height: 1.6;}
.login-wrap > li + li {margin-top: .8rem;}
.login-wrap > li > input {margin-bottom: .8rem;}
.login-wrap > li > p {margin-top: -.8rem; padding-bottom: .8rem; font-size: 1.2rem; font-weight: 400; line-height: 1.4; color: var(--sac-red);}

.login-chk {display: flex; align-items: center; margin-top: 2rem;}
.login-chk > li + li {margin-left: 2.4rem;}

.login-sns {margin-top: 3.6rem;}
.login-sns > h6 {position: relative; text-align: center; font-size: 1.3rem; color: var(--gray01);}
.login-sns > h6::before {content: ''; width: calc((100% - 16rem) / 2); height: 1px; background-color: var(--gray03); position: absolute; top: 50%; left: 0; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%);}
.login-sns > h6::after {content: ''; width: calc((100% - 16rem) / 2); height: 1px; background-color: var(--gray03); position: absolute; top: 50%; right: 0; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%);}
.login-sns > ul {display: flex; align-items: center; justify-content: center; margin-top: 2rem;}
.login-sns > ul > li {cursor: pointer;}
.login-sns > ul > li + li {margin-left: 1.2rem;}

.account {display: flex; align-items: center; justify-content: center; margin-top: 3.6rem;}
.account > li {position: relative; font-size: 1.4rem; color: var(--gray01); cursor: pointer;}
.account > li + li {margin-left: 1.6rem;}
.account > li + li::before {content: ''; display: block; width: 1px; height: .8rem; background-color: var(--gray03); position: absolute; top: 50%; left: -.8rem; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%);}

.non-members > button {margin: 0 auto;}

/* 로그인 > 계정찾기 */
.certify > li + li {margin-top: .8rem;}
.account-result {position: relative; display: flex; align-items: center; justify-content: space-between; margin: -1.6rem; padding: 2rem 1.6rem; border-bottom: .8rem solid var(--gray04);}
.account-result::before {content: ''; width: calc(100% - 3.2rem); height: 1px; background-color: var(--gray03); position: absolute; top: 0; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%);}
.account-result > span {color: var(--gray01);}
.account-result > * {font-size: 1.4rem; font-weight: 500;}

/* 회원가입 -------------------- */
/* 회원가입 */
.sns-link {display: flex; flex-flow: column; row-gap: 2rem; margin: 1.6rem 0 3.6rem;}
.sns-link p {font-size: 1.4rem; line-height: 1.4; word-break: keep-all;}

.join-terms + .join-terms {margin-top: 4rem;}
.join-terms > h6 {font-size: 1.6rem; font-weight: 700; margin-bottom: 2rem;}
.join-terms .terms-cont {width: 100vw; margin: 0 -1.6rem; padding: 2rem 1.6rem; background-color: var(--gray04); word-break: keep-all;}
.join-terms .terms-cont.overflow {height: 23rem; overflow-y: auto;}

.join-terms .terms-cont h4 {font-size: 1.4rem; font-weight: 700; margin-bottom: 3rem;}
.join-terms .terms-cont h6 {font-size: 1.4rem; font-weight: 500; margin-bottom: .6rem;}
.join-terms .terms-cont p {font-size: 1.4rem; line-height: 1.6;}
.join-terms .terms-cont p + h6 {margin-top: 3rem;}
.join-terms .terms-cont p + table {margin-top: 2.4rem;}

.join-terms .terms-agree {margin-top: 2.4rem;}
.join-terms .terms-agree > p {font-size: 1.4rem; line-height: 1.4; margin-bottom: 1.2rem;}

.join-terms-all {margin-top: 2rem; padding-top: 2rem; border-top: 1px solid var(--gray03);}
.join-terms-all input[type='checkbox'] + label {align-items: flex-start; margin-top: .2rem;}
.join-terms-all input[type='checkbox'] + label > span {width: calc(100% - 2rem); display: block; word-break: keep-all;}

/* 회원가입 > 실명인증 */
.cer-name {display: flex; align-items: center; justify-content: space-between;}
.cer-name button {width: calc((100% - .8rem) / 2);}

.terms-guide {width: calc(100% - 3.2rem); background-color: var(--white01); position: absolute; bottom: 3.4rem;}
.terms-guide p {font-size: 1.3rem; color: var(--gray01); line-height: 1.6; padding-bottom: 3.6rem;}
.terms-guide p > span {font-size: 1.3rem; color: var(--gray02);}

/* 회원가입 > 정보입력 */
.join-wrap > li {font-size: 1.3rem; font-weight: 500; line-height: 1.6;}
.join-wrap > li + li {margin-top: .8rem;}
.join-wrap > li:not(:last-child) > input,
.join-wrap > li:not(:last-child) > select {margin-bottom: 1.2rem;}
.join-wrap > li:not(:last-child) > .flex {margin-bottom: 2rem;}
.join-wrap > li > textarea {height: 10rem;}
.join-wrap > li > p {margin-top: -1.2rem; padding-bottom: 1.2rem; font-size: 1.2rem; font-weight: 400; line-height: 1.4; color: var(--gray01);}
.join-wrap input + label > span {font-weight: initial;}
.join-wrap .id {display: flex; align-items: center; padding-bottom: .8rem;}
.join-wrap .id input[type='text'] {width: calc(100% - 11.8rem); margin-right: .8rem; margin-bottom: 0;}
.join-wrap .id button {display: inline-block;}
.join-wrap .address {position: relative;}
.join-wrap .address input[type='text'] {margin-bottom: 0;}
.join-wrap .address i {width: 2rem; height: 2rem; background-image: url(/resource/img/ico/icon-search-20-1d03d677e8701df8c479fc8b801433c2.svg); background-repeat: no-repeat; background-size: contain; background-position: center; position: absolute; top: 50%; right: 1.2rem; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); cursor: pointer;}

.join-wrap .minor p {margin-top: 0; font-size: 1.3rem;}
.join-wrap .minor h6 {font-size: 1.4rem; font-weight: initial; margin-bottom: .4rem;}
.join-wrap .minor table {margin-bottom: 1.2rem;}
.join-wrap .minor .certify {display: flex; align-items: center;}
.join-wrap .minor .certify > li {width: calc((100% - .8rem) / 2);}
.join-wrap .minor .certify > li + li {margin-left: .8rem; margin-top: 0;}
.join-wrap .minor .certify > li button {width: 100%;}
.join-wrap .minor.line {padding-bottom: 2.8rem; margin-bottom: 2rem; position: relative;}
.join-wrap .minor.line::before {content: ''; width: 100vw; height: .8rem; position: absolute; bottom: 0; left: -1.6rem; background-color: var(--gray04);}

.pay-option {margin-top: 2rem;}
.pay-option > select + select {margin-top: .8rem;}
.pay-option ~ button {margin-top: 3.6rem;}

/* 회원가입 > 유료회원 가입 */
.join-paid-wrap .box:not(.join-paid) {display: none;}
.join-paid-wrap.active .box {display: block;}
.join-paid-wrap.active .join-paid .join-title .icon-arrow-down-20 {background-image: url(/resource/img/ico/icon-arrow-up-20-gr-154ab283fcc7c0f6c7fdffcb2c6903bc.svg);}
.join-paid-wrap .join-paid + .box {margin-top: 1.6rem;}
.join-title .bubble {position: absolute; top: 1.8rem; right: -2.2rem; width: 24.6rem; height: 8.3rem; padding: 2rem 3rem; font-size: 1.1rem; color: var(--gray01); word-break: keep-all; line-height: 1.4; background-image: url(/resource/img/ico/bubble-top-line3-right-d4f97a418d390646b32c916bedf1d489.png); background-repeat: no-repeat; background-size: contain; background-position: center; z-index: 1;}

.paid-join-guide {margin: 2rem 0;}
.paid-join-guide > li {width: fit-content; padding-right: 2.2rem; font-size: 1.4rem; font-weight: 500; color: var(--black); background-image: url(/resource/img/ico/icon-arrow-right-12-gr-2eeebea278f2af95f3ba05d05d00fdef.svg); background-repeat: no-repeat; background-size: 1.6rem; background-position: right center; cursor: pointer;}
.paid-join-guide > li + li {margin-top: 1rem;}

.paid-mem-notice {display: flex; align-items: flex-start; column-gap: .8rem;}
.paid-mem-notice i {margin-top: .2rem;}
.paid-mem-notice p {font-size: 1.5rem; line-height: 1.4; width: calc(100% - 2.4rem);}


/* 주차 -------------------- */
.car-reg > li + li {margin-top: .8rem;}
.car-reg input[type='radio'] + label {width: 100%;}
.car-reg input[type='radio'] + label::before {content: none;}
.car-reg input[type='radio'] + label > span {display: flex; align-items: center; justify-content: space-between; width: 100%; height: 5.2rem; padding: 0 20px; background-color: var(--gray02); border-radius: 4px; text-align: center; font-size: 15px; font-weight: 500; color: var(--white01);}
.car-reg input[type='radio'] + label > span > div {display: flex; align-items: center;}
.car-reg input[type='radio'] + label > span > div > i {margin-right: 4px;}
.car-reg input[type='radio'] + label > span .time {font-size: 13px; font-weight: initial; column-gap: 4px;}
.car-reg input[type='radio'] + label > span .time > span {display: block; width: 100px; text-align: center;}
.car-reg input[type='radio']:checked + label > span {background-color: var(--black);}
.car-reg input[type='radio']:checked + label > span .time {color: var(--gray01);}
.car-reg button.line {border: 1px dashed var(--gray01);}

@media (prefers-color-scheme: dark) {
    .car-reg button.black {background-color: #fff; border-color: #fff; color: #1A1A1A!important;}
}

.car-modify {display: flex; align-items: center; justify-content: end; margin-top: 2rem;}
.car-modify > li {position: relative;}
.car-modify > li + li {margin-left: .4rem;}
.car-modify > li + li::before {content: ''; display: block; width: 1px; height: .8rem; background-color: var(--gray03); position: absolute; top: 50%; left: -.2rem; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%);}

.car-pay {margin-top: 2rem;}
.car-pay > p {text-align: center; font-size: 1.3rem; margin-bottom: 1.2rem;}

/* 주차 > 나의 주차권 */
.parking-ticket > li:not(.more) {position: relative; background-color: var(--white01); border: 1px solid var(--gray03); border-radius: .4rem; padding: 2rem 1.6rem; box-shadow: .2rem .2rem .8rem rgba(26, 26, 26, 0.05);}
.parking-ticket > li + li {margin-top: 1.2rem;}
.parking-ticket > li input[type='radio'] + label {display: initial;}
.parking-ticket > li input[type='radio'] + label::before {background-image: url(/resource/img/ico/icon-radio-chk-20-286494255023742739e385f2305ec68d.svg); position: absolute; top: 50%; right: 2.4rem; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%);}
.parking-ticket > li input[type='radio']:checked + label::before {background-image: url(/resource/img/ico/icon-radio-chk-20-ov-e6c67ae8adaccad64272cd1e82f3821a.svg);}
.parking-ticket > li h6 {font-size: 1.4rem; font-weight: 500;}
.parking-ticket > li p {margin-top: .8rem; font-size: 1.3rem;}
.parking-ticket > li .date {display: block; margin-top: 1.6rem; font-size: 1.2rem; color: var(--gray01);}
.parking-ticket > li .desc {font-size: 1.2rem; color: var(--gray01)!important;}
.parking-ticket > li.more {display: flex; align-items: center; justify-content: center; margin-top: 2rem; text-align: center; font-size: 1.3rem; font-weight: 500; color: var(--gray01); cursor: pointer;}
.parking-ticket > li.more > i {margin-left: .4rem;}

.parking-ticket > li input[type='radio']:disabled + label {margin: -2rem -1.6rem; padding: 2rem 1.6rem; background-color: var(--gray04); display: block; width: calc(100% + 3.2rem);}
.parking-ticket > li input[type='radio']:disabled + label > * {opacity: .4;}
.parking-ticket > li input[type='radio']:disabled + label::before {content: none;}

@media (prefers-color-scheme: dark) {
    .parking-ticket > li input[type='radio']:checked + label::before {filter: none; background-image: url(/resource/img/ico/icon-radio-chk-20-ov-dark-6e7c1fa4d74b061fb394bec537e0ffe5.svg);}
}

/* 주차 > 이용내역 */
.parking-history {border-top: 1px solid var(--black);}
.parking-history > li:not(.more) {border-bottom: 1px solid var(--gray03); padding: 1.6rem 0; display: flex; align-items: center; justify-content: space-between;}
.parking-history > li h6 {font-size: 1.4rem;}
.parking-history > li h6 .date {display: block; margin-bottom: .6rem; font-size: 1.2rem; color: var(--gray01);}
.parking-history > li div {font-size: 1.4rem; font-weight: 500; color: var(--gray01);}
.parking-history > li.more {display: flex; align-items: center; justify-content: center; margin-top: 2rem; text-align: center; font-size: 1.3rem; font-weight: 500; color: var(--gray01); cursor: pointer;}
.parking-history > li.more > i {margin-left: .4rem;}

/* 주차 > 사전 할인 */
.parking-ticket-list {display: flex; flex-flow: column; row-gap: 2rem;}
.parking-ticket-list > li {display: flex; flex-flow: column; row-gap: 2rem;}
.parking-ticket-list > li + li {border-top: 1px solid var(--gray03); padding-top: 2rem;}
.parking-ticket-list > li > div {display: flex; align-items: center; justify-content: space-between;}
.parking-ticket-list > li > div > input + label > span {font-weight: 600; font-size: 1.8rem;}

.parking-receipt {margin-top: 1.6rem; margin-bottom: 3.6rem; background-color: var(--black); border-radius: .4rem; padding: 2.4rem 1.6rem; color: #fff;}
.parking-receipt h6 {font-size: 1.8rem; font-weight: 700; display: flex; align-items: center; justify-content: space-between;}
.parking-receipt h6 > span {font-size: 1.3rem; font-weight: initial; display: flex; align-items: center;}
.parking-receipt h6 > span > i {margin-left: .2rem;}
.parking-receipt .date {display: block; margin-top: .8rem; font-size: 1.3rem; color: var(--gray01);}
.parking-receipt ul {margin-top: 2rem; padding-top: 2rem; border-top: 1px solid var(--gray01);}
.parking-receipt ul > li {display: flex; align-items: center; justify-content: space-between; font-size: 1.3rem; }
.parking-receipt ul > li + li {margin-top: 1rem;}
.parking-receipt ul > li.total {font-weight: 700; margin-top: 2rem;}
.parking-receipt ul > li.total .sum {font-size: 1.5rem;}

#desc-pop .pop-cont.car-position {overflow-y: initial;}
#desc-pop .pop-cont.car-position > div {width: calc(100% + 4rem); height: 23.6rem; margin: 0 -2rem; background-repeat: no-repeat; background-size: cover; background-position: center;}
#desc-pop .pop-cont.car-position > ul {margin-top: 2rem;}
#desc-pop .pop-cont.car-position > ul > li {display: flex; align-items: center; font-size: 1.3rem; line-height: 2;}
#desc-pop .pop-cont.car-position > ul > li > span {display: block; width: 6rem; margin-right: 7rem; font-weight: 500;}

@media (prefers-color-scheme: dark) {
    .parking-receipt {background-color: var(--gray03);}
    .parking-receipt h6 > span > i {filter: invert(.5);}
}

/* 주차 > 주차권 > 등록 */
.parking-reg > li {font-size: 1.3rem; font-weight: 500; display: flex; align-items: center;}
.parking-reg > li + li {margin-top: .8rem;}
.parking-reg > li input[type='text'] {width: calc(100% - 11.8rem); margin-right: .8rem;}
.parking-reg > li:nth-child(3) {margin-top: 2rem;}
.parking-reg > li:nth-child(3) > button {margin: 0 auto;}

/* 선물하기 -------------------- */
.gift-list > li {position: relative; padding: 1rem; display: flex; align-items: end; border-radius: .4rem; z-index: 1;}
.gift-list > li::before {content: ''; width: 1.6rem; height: 1.6rem; background-color: var(--white01); border-radius: 100%; position: absolute; right: 4.8rem; top: -.8rem; z-index: 1;}
.gift-list > li::after {content: ''; width: 1.6rem; height: 1.6rem; background-color: var(--white01); border-radius: 100%; position: absolute; right: 4.8rem; bottom: -.8rem; z-index: 1;}
.gift-list > li + li {margin-top: 1.2rem;}
.gift-list > li > * {z-index: 1;}
.gift-list > li .bg {position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: .4rem; z-index: 0; background-repeat: no-repeat; background-size: cover; background-position: center; border-radius: .4rem;}  /* -webkit-filter: blur(.1rem); -moz-filter: blur(.1rem); -o-filter: blur(.1rem); -ms-filter: blur(.1rem); filter: blur(.1rem); */
.gift-list > li .bg::before {content: ''; display: block; width: 100%; height: 100%; border-radius: .4rem; background-color: rgba(0,0,0,.5); z-index: 1;}
.gift-list > li .poster {width: 26.5vw; height: 36.5vw; max-width: 10rem; max-height: 13.8rem; margin-right: 1.6rem; border-radius: .4rem; background-repeat: no-repeat; background-size: 100% 100%; background-position: center;}
.gift-list > li .info {width: calc(100% - 12rem); padding-bottom: 1rem;}
.gift-list > li .info .tag {margin-bottom: 1.2rem;}
.gift-list > li .info h6 {width: calc(100% - 1rem); font-size: 1.5rem; font-weight: 500; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.gift-list > li .info ul {display: flex; align-items: center; margin-top: 1.2rem;}
.gift-list > li .info ul > li {position: relative; font-size: 1.3rem; color: #fff;}
.gift-list > li .info ul > li + li {margin-left: 1.6rem;}
.gift-list > li .info ul > li + li::before {content: ''; display: block; width: 1px; height: .8rem; background-color: var(--gray03); position: absolute; top: 50%; left: -.8rem; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%);}
.gift-list > li .info p {margin-top: .6rem; font-size: 13px; color: #fff;}

@media (prefers-color-scheme: dark) {
    .gift-list > li .info ul > li + li::before {background-color: #fff;}
}

/* 선물하기 > 티켓리스트 */
.gift-info {display: flex; align-items: end; margin-bottom: 2rem;}
.gift-info .poster {width: 7.5rem; height: 10.5rem; margin-right: 1.2rem; border-radius: .4rem; background-repeat: no-repeat; background-size: 100% 100%; background-position: center;}
.gift-info .info {width: calc(100% - 8.7rem); padding-bottom: 1rem;}
.gift-info .info > span {display: block; margin-bottom: .8rem; font-size: 1.2rem; color: var(--sac-red); font-weight: 500;}
.gift-info .info > h6 {width: calc(100% - 1rem); font-size: 1.5rem; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.gift-info .info > ul {display: flex; align-items: center; margin-top: 1.2rem;}
.gift-info .info > ul > li {position: relative; font-size: 1.3rem; color: var(--gray01);}
.gift-info .info > ul > li + li {margin-left: 1.6rem;}
.gift-info .info > ul > li + li::before {content: ''; display: block; width: 1px; height: .8rem; background-color: var(--gray03); position: absolute; top: 50%; left: -.8rem; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%);}
.gift-info .info > p {margin-top: .6rem; font-size: 1.3rem; color: var(--gray01);}

.gift-ticket > li {position: relative; padding: 1.6rem; border: 1px solid var(--gray03); border-radius: .4rem;}
.gift-ticket > li::before {content: ''; width: 1.6rem; height: 1.6rem; border-width: 1px; border-style: solid; border-radius: 100%; border-color: var(--white01) var(--white01) var(--gray03) var(--gray03); background-color: var(--white01); border-radius: 100%; position: absolute; right: 4.8rem; top: -.8rem; transform: rotate(-45deg);}
.gift-ticket > li::after {content: ''; width: 1.6rem; height: 1.6rem; border-width: 1px; border-style: solid; border-radius: 100%; border-color: var(--white01) var(--white01) var(--gray03) var(--gray03); background-color: var(--white01); border-radius: 100%; position: absolute; right: 4.8rem; bottom: -.8rem; transform: rotate(125deg);}
.gift-ticket > li + li {margin-top: 1.2rem;}
.gift-ticket > li input[type='checkbox'] + label::before {position: absolute; top: 50%; right: 1.8rem; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%);}
.gift-ticket > li ul::before {content: ''; width: 1px; height: calc(100% - 2.6rem); border-right: 1px dashed var(--gray03); position: absolute; top: 50%; right: 5.6rem; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%);}
.gift-ticket > li ul > li {line-height: 1.6;}
.gift-ticket > li ul > li > span {font-size: 1.4rem;}
.gift-ticket > li ul > li > span:nth-child(1) {color: var(--gray01);}
.gift-ticket > li ul > li > span:nth-child(2) {font-weight: 500;;}

/* 선물하기 > 상세 정보 */
.gift-sender {border-top: 1px solid var(--gray03); padding-top: 2.4rem; margin-bottom: -1.2rem; font-size: 1.4rem; display: flex; align-items: center; justify-content: space-between;}
.gift-sender > span {color: var(--gray01); font-weight: 500;}

.gift-addressee {margin-bottom: -1.6rem;}
.gift-addressee > li + li {border-top: 1px solid var(--gray03); padding-top: 2rem; margin-top: 2rem;}
.gift-addressee > li .title {display: flex; align-items: center; justify-content: space-between; cursor: pointer; background-image: url(/resource/img/ico/icon-arrow-down-16-bl-ae1a90841a706541bbe91620dc79f2b3.svg); background-repeat: no-repeat; background-size: 1.6rem; background-position: right center;}
.gift-addressee > li .title > h6 {font-size: 1.4rem; vertical-align: middle;}
.gift-addressee > li .gift-detail {display: none;}
.gift-addressee > li.active .title {background-image: url(/resource/img/ico/icon-arrow-up-16-bl-e76db746f74cff680f8db6509f9be79e.svg);}
.gift-addressee > li.active .gift-detail {display: block;}
.gift-addressee > li:first-child:nth-last-child(1) .title {background-image: none;}

.gift-detail {margin-top: 2rem;}
.gift-detail > li {position: relative; font-size: 1.3rem; font-weight: 500; display: flex; align-items: center; justify-content: space-between;}
.gift-detail > li > span {display: flex; align-items: center;}
.gift-detail > li + li {margin-top: .8rem;}
.gift-detail > li .flex {margin-top: 1.6rem;}
.gift-detail > li > input {margin-bottom: 1.2rem;}
.gift-detail > li > input + .icon-delete {position: absolute; top: 1.4rem; right: 1.4rem; cursor: pointer;}
.gift-detail > li > p {padding-bottom: 1.2rem; font-size: 1.2rem; font-weight: 400; line-height: 1.4; color: var(--gray01);}

.gift-date > li {position: relative; font-size: 1.3rem; font-weight: 500;}
.gift-date > li + li {margin-top: .8rem;}
.gift-date + button {margin-top: 3.6rem;}

.refund-guide h6 {width: fit-content; padding-right: 2.2rem; font-size: 1.4rem; font-weight: 500; color: var(--black); background-image: url(/resource/img/ico/icon-arrow-right-12-gr-2eeebea278f2af95f3ba05d05d00fdef.svg); background-repeat: no-repeat; background-size: 1.6rem; background-position: right center; cursor: pointer;}
.refund-guide ul {margin-top: 1.2rem; display: flex; flex-flow: column; row-gap: .8rem;}
.refund-guide ul > li {font-size: 1.3rem; color: var(--gray01); word-break: keep-all; line-height: 1.4;}
.refund-guide input + label {margin-top: 2.4rem;}

/* 선물하기 > 상세 > 티켓 취소/환불안내 팝업 */
.refund-desc {padding: 0 2rem 2rem;}
.refund-desc * {font-size: 1.3rem; line-height: 1.6;}
.refund-desc * + p,
.refund-desc ul + ul {margin-top: 1.6rem;}
.refund-desc * + h6 {margin-top: 2rem;}
.refund-desc ul > li {text-indent: -.7rem; padding-left: 1.7rem;}
.refund-desc ul > li::before {content: '- ';}


/* 선물하기 > 완료 */
.gift-complete > p {margin-top: 1.6rem; text-align: center; font-size: 2rem; line-height: 1.6;}

.gift-complete-ticket {margin-top: 3.6rem;}
.gift-complete-ticket > li {position: relative; height: fit-content; max-height: 14rem; padding: 0 1.6rem; border: 1px solid var(--gray03); border-radius: .4rem;}
.gift-complete-ticket > li::before {content: ''; width: 1.6rem; height: 1.6rem; border-width: 1px; border-style: solid; border-radius: 100%; border-color: var(--white01) var(--white01) var(--gray03) var(--gray03); background-color: var(--white01); border-radius: 100%; position: absolute; right: 4.8rem; top: -.8rem; transform: rotate(-45deg);}
.gift-complete-ticket > li::after {content: ''; width: 1.6rem; height: 1.6rem; border-width: 1px; border-style: solid; border-radius: 100%; border-color: var(--white01) var(--white01) var(--gray03) var(--gray03); background-color: var(--white01); border-radius: 100%; position: absolute; right: 4.8rem; bottom: -.8rem; transform: rotate(125deg);}
.gift-complete-ticket > li + li {margin-top: 1.2rem;}
.gift-complete-ticket > li .poster {width: 26.5vw; height: 36.5vw; max-width: 10rem; max-height: 13.8rem; background-repeat: no-repeat; background-size: 100% 100%; background-position: center; border-radius: .4rem 0 0 .4rem; margin: -1px 1.2rem -1px -1.6rem;}
.gift-complete-ticket > li input + label {width: initial;}
.gift-complete-ticket > li input + label::before {position: absolute; top: 50%; right: 1.8rem; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%);}
.gift-complete-ticket > li .info::before {content: ''; width: 1px; height: calc(100% - 26px); border-right: 1px dashed var(--gray03); position: absolute; top: 50%; right: 5.6rem; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%);}
.gift-complete-ticket > li .info > span {display:block; margin-bottom: .8rem; font-size: 1.2rem;}
.gift-complete-ticket > li .info > h6 {width: 43vw; font-size: 1.5rem; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.gift-complete-ticket > li .info > ul {margin-top: 1.8rem;}
.gift-complete-ticket > li .info > ul > li {position: relative; font-size: 1.3rem; color: var(--gray01); line-height: 1.4;}
.gift-complete-ticket > li .info > ul > li + li::before {content: ''; display: block; width: 1px; height: .8rem; background-color: var(--gray03); position: absolute; top: 50%; left: -.8rem; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%);}
.gift-complete-ticket > li .info > p {width: 43vw; font-size: 1.3rem; color: var(--gray01); line-height: 1.4;}

/* 선물하기 > 선물내역 */
.gift-history > li + li {margin-top: 1.6rem;}
.gift-history > li .desc {display: flex; align-items: center; justify-content: space-between; margin-bottom: .8rem;}
.gift-history > li .desc > p {font-size: 1.3rem; font-weight: 500;}
.gift-history > li .desc > ul {display: flex; align-items: center; font-size: 1.2rem; color: var(--gray01);}
.gift-history > li .desc > ul > li {position: relative;}
.gift-history > li .desc > ul > li + li {margin-left: 1.2rem;}
.gift-history > li .desc > ul > li + li::before {content: ''; display: block; width: 1px; height: .8rem; background-color: var(--gray03); position: absolute; top: 50%; left: -.6rem; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%);}
.gift-history > li .ticket {display: flex; align-items: center; position: relative; height: 14rem; padding: 0 1.6rem; border: 1px solid var(--gray03); border-radius: 4px; cursor: pointer;}
.gift-history > li .ticket::before {content: ''; width: 1.6rem; height: 1.6rem; border-width: 1px; border-style: solid; border-radius: 100%; border-color: var(--white01) var(--white01) var(--gray03) var(--gray03); background-color: var(--white01); border-radius: 100%; position: absolute; right: 4.8rem; top: -.8rem; transform: rotate(-45deg);}
.gift-history > li .ticket::after {content: ''; width: 1.6rem; height: 1.6rem; border-width: 1px; border-style: solid; border-radius: 100%; border-color: var(--white01) var(--white01) var(--gray03) var(--gray03); background-color: var(--white01); border-radius: 100%; position: absolute; right: 4.8rem; bottom: -.8rem; transform: rotate(125deg);}
.gift-history > li .ticket .poster {width: 26.5vw; height: 36.5vw; max-width: 10rem; max-height: 13.8rem; background-repeat: no-repeat; background-size: 100% 100%; background-position: center; border-radius: .4rem 0 0 .4rem; margin: 0 1.2rem 0 -1.6rem; }
.gift-history > li .ticket .info::before {content: ''; width: 1px; height: calc(100% - 2.6rem); border-right: 1px dashed var(--gray03); position: absolute; top: 50%; right: 5.6rem; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%);}
.gift-history > li .ticket .info > span {display: block; margin-bottom: .8rem; font-size: 1.2rem;}
.gift-history > li .ticket .info > h6{width: 43vw; font-size: 1.4rem; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.gift-history > li .ticket .info > ul {margin-top: 2rem;}
.gift-history > li .ticket .info > ul > li {position: relative; font-size: 1.2rem; color: var(--gray01); line-height: 1.4;}
.gift-history > li .ticket .info > ul > li + li::before {content: ''; display: block; width: 1px; height: .8rem; background-color: var(--gray03); position: absolute; top: 50%; left: -.8rem; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%);}
.gift-history > li .ticket .info > p {width: 43vw; font-size: 1.2rem; color: var(--gray01); line-height: 1.4;}
.gift-history > li .ticket > span {width: 4rem; text-align: center; line-height: 1.4; font-size: 1.3rem; color: var(--gray01); font-weight: 500; position: absolute; top: 50%; right: .8rem; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%);}

/* 선물하기 > 선물내역 > 상세 */
.gift-history-ticket {position: relative; display: flex; align-items: center; column-gap: 12px; margin-bottom: 20px;}
.gift-history-ticket .poster {width: 75px; height: 105px; border-radius: 4px; background-repeat: no-repeat; background-size: 100% 100%; background-position: center;}
.gift-history-ticket .info {width: calc(100% - 87px);}
.gift-history-ticket .info > span {display: block; margin-bottom: 8px; font-size: 13px; font-weight: 500; color: var(--sac-red);}
.gift-history-ticket .info > h6 {width: 220px; font-size: 15px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.gift-history-ticket .info > ul {margin-top: 18px;}
.gift-history-ticket .info > ul > li {position: relative; font-size: 13px; color: var(--gray01); line-height: 1.4;}
.gift-history-ticket .info > ul > li + li::before {content: ''; display: block; width: 1px; height: 8px; background-color: var(--gray03); position: absolute; top: 50%; left: -8px; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%);}
.gift-history-ticket .info > p {font-size: 13px; color: var(--gray01); line-height: 1.4;}

.gift-history-info-list {display: flex; flex-flow: column; row-gap: 1.2rem;}
.gift-history-info-list > li {box-shadow: 0 0 1.2rem rgba(0, 0, 0, 0.1); padding: 2rem 1.6rem; border-radius: .4rem;}
.gift-history-info-list > li .state > p {display: flex; align-items: center; justify-content: center; column-gap: .4rem; margin-top: 2rem; font-size: 1.5rem; font-weight: 500; color: var(--sac-red);}
.gift-history-info-list > li .state > p > span {color: var(--gray01); display: block;}
.gift-history-info-list > li .state > ul {display: flex; align-items: center; border: 1px solid var(--gray03); border-radius: .4rem; margin-top: 2rem;}
.gift-history-info-list > li .state > ul > li {width: 50%;}
.gift-history-info-list > li .state > ul > li + li {border-left: 1px solid var(--gray03);}
.gift-history-info-list > li .state > ul > li > button {width: 100%; height: 4.8rem; color: var(--black); background-color: transparent; border-color: transparent;}
.gift-history-info-list > li .state > ul > li:nth-child(1) > button {color: var(--gray01);}
.gift-history-info-list > li .state > ul > li > button:disabled {color: var(--gray02)!important; border-color: transparent!important;}

.gift-history-info {margin-bottom: 2rem; display: flex; align-items: center; column-gap: .8rem;}
.gift-history-info p {font-size: 1.3rem; font-weight: 500; color: var(--gray01);}
.gift-history-info ul {display: flex; align-items: center; grid-gap: 1.2rem;}
.gift-history-info ul > li {position: relative; font-size: 1.2rem; color: var(--gray01);}
.gift-history-info ul > li + li::before {content: ''; display: block; width: 1px; height: .8rem; background-color: var(--gray03); position: absolute; top: 50%; left: -.6rem; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%);}

.gift-history-ticket > ul {border-top: 1px dashed var(--gray03); padding-top: 2rem;}
.gift-history-ticket > ul > li {display: flex; align-items: center; justify-content: space-between; line-height: 1.8;}
.gift-history-ticket > ul > li > span {font-size: 1.4rem; color: var(--gray01);}
.gift-history-ticket > ul > li > p {font-size: 1.4rem; font-weight: 500;}
.gift-history-ticket > ul > li > ul > li {position: relative; font-size: 1.4rem; font-weight: 500;}
.gift-history-ticket > ul > li > ul > li + li::before {content: ''; display: block; width: 1px; height: .8rem; background-color: var(--gray03); position: absolute; top: 50%; left: -.8rem; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%);}

.seat-info {background-color: var(--gray04); padding: 2rem 1.6rem; border-radius: .4rem;}
.seat-info + .seat-info {margin-top: 1rem;}
.seat-info > li {display: flex; align-items: center; font-size: 1.4rem; font-weight: 500; color: var(--gray01);}
.seat-info > li + li {margin-top: 1.2rem;}
.seat-info > li > span {display: block; width: 6rem; margin-right: .6rem; text-align: justify; text-align-last: justify; -moz-text-align-last: justify; font-weight: initial;} /* 양쪽 정렬 */
.seat-info > li .certify {width: 100%; white-space: nowrap; font-size: 1.4rem; color: var(--sac-red); font-weight: 500;}
.seat-info > li > button {height: 2.8rem; padding: 0 1.2rem; margin-top: .2rem;}
.seat-info > li > button:disabled {background-color: var(--gray03)!important; border-color: var(--gray03);}
.seat-info > li .certify-compl {display: flex; align-items: center; column-gap: .4rem; margin-top: .2rem;}
.seat-info > li .link {padding-right: 1.6rem; background-image: url(/resource/img/ico/icon-arrow-right-12-gr-2eeebea278f2af95f3ba05d05d00fdef.svg); background-repeat: no-repeat; background-size: 1.2rem; background-position: right center;}
.seat-info.end {background-image: url(/resource/img/ico/icon-won-end-e0780bb8cf56b492ba9e1478e421310a.svg); background-repeat: no-repeat; background-size: 7.2rem; background-position: center right 1.6rem;}
.seat-info.date {background-image: url(/resource/img/ico/icon-end-stamp-gr-fdf29273e40a63680aa905f53d5b53bc.svg); background-repeat: no-repeat; background-size: 7.2rem; background-position: center right 1.6rem;}
.seat-info.print {background-image: url(/resource/img/ico/icon-print-stamp-gb-da6ca077fe65a2334fd4d32eef91d0e2.svg); background-repeat: no-repeat; background-size: 7.2rem; background-position: center right 1.6rem;}
.seat-info.cancel {background-image: url(/resource/img/ico/icon-end-stamp-cancel-efe17b0dbc6113d14a9bdd0ec36d111f.svg); background-repeat: no-repeat; background-size: 7.2rem; background-position: center right 1.6rem;}

.ticket-refund {border-top: 1px solid var(--gray03); padding: 2rem 0;}
.ticket-refund .title {display: flex; align-items: center; justify-content: space-between; cursor: pointer; background-image: url(/resource/img/ico/icon-arrow-down-16-bl-ae1a90841a706541bbe91620dc79f2b3.svg); background-repeat: no-repeat; background-size: 1.6rem; background-position: right center;}
.ticket-refund .title > h6 {font-size: 1.5rem; font-weight: 500;}
.ticket-refund .refund-desc {display: none; margin-top: 2rem; padding: 0;}

.ticket-refund.active .title {background-image: url(/resource/img/ico/icon-arrow-up-16-bl-e76db746f74cff680f8db6509f9be79e.svg);}
.ticket-refund.active > .refund-desc {display: block;}

/* 선물하기 > 선물함 */
.storage-guide {padding: 2rem; background-color: var(--gray04); text-align: center; margin-bottom: 2rem;}
.storage-guide > p {font-size: 1.3rem; color: var(--gray01);}

.gift-history .disabled {position: relative;}
.gift-history .disabled::before {content: ''; display: block; width: 100%; height: 14rem; background-color: var(--opa-white); border-radius: .4rem; position: absolute; bottom: 0; z-index: 2;}
.gift-history .disabled::after {content: ''; display: block; width: 9.8rem; height: 9.8rem; background-image: url(/resource/img/ico/icon-used-stamp-gr-ba232f6de13ea221330d061219540d11.svg); background-repeat: no-repeat; background-size: contain; background-position: center; position: absolute; bottom: 2rem; right: 0; z-index: 3;}
.gift-history .disabled.date::after {background-image: url(/resource/img/ico/icon-end-stamp-gr-fdf29273e40a63680aa905f53d5b53bc.svg);}
.gift-history .disabled.print::after {background-image: url(/resource/img/ico/icon-print-stamp-gb-da6ca077fe65a2334fd4d32eef91d0e2.svg);}

/* 선물하기 > 선물함 > 선물함 상세 */
.gift-box-ticket {display: flex; align-items: center; column-gap: 12px; background-color: var(--white01); box-shadow: 0 0 12px rgba(0, 0, 0, 0.1); padding: 16px;}
.gift-box-ticket .poster {width: 75px; height: 105px; border-radius: 4px; background-repeat: no-repeat; background-size: 100% 100%; background-position: center;}
.gift-box-ticket .info {width: calc(100% - 85px);}
.gift-box-ticket .info > span {display: block; margin-bottom: 8px; font-size: 13px;}
.gift-box-ticket .info > h6 {width: 220px; font-size: 15px; line-height: 1.4; font-weight: 500; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; line-clamp: 2; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.gift-box-ticket .info > ul {margin-top: 8px;}
.gift-box-ticket .info > ul > li {position: relative; font-size: 13px; color: var(--gray01); line-height: 1.4;}
.gift-box-ticket .info > ul > li + li::before {content: ''; display: block; width: 1px; height: 8px; background-color: var(--gray03); position: absolute; top: 50%; left: -8px; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%);}
.gift-box-ticket .info > p {font-size: 13px; color: var(--gray01); line-height: 1.4;}

.seat-info + button {margin-top: 2rem;}

/* 선물하기 > 선물받은 화면 */
#gift-view {width: 100%; height: 100%; padding: 2rem 2rem 3.4rem; background-color: var(--white01);}
.gift-view-img {position: relative; width: 100vw; height: 592px; margin: -2rem -2rem 0; background-color: #DCD6FC; background-image: url(/resource/img/gift-view-img01-61c1a2c94b563cfd035b36e46a24b90a.png); background-repeat: no-repeat; background-size: contain; background-position: top -2rem center;}
.gift-view-img > div {display: flex; flex-flow: column; justify-content: center; width: 100%; height: 13rem; text-align: center; background-image: url(/resource/img/gift-view-ticket01-829fccae37526cbb8de392986cdbece9.png); background-repeat: no-repeat; background-size: contain; background-position: center; position: absolute; bottom: .6rem; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%);}
.gift-view-img > div > h6 {font-size: 14px; font-weight: 500; color: #1A1A1A;}
.gift-view-img > div > p {margin: 10px auto 0; font-size: 13px; color: var(--gray01); width: 293px; line-height: 1.4; word-break: keep-all;}
.gift-view-cont {padding-top: 5.4rem;}
.gift-view-cont > h6 {text-align: center; font-size: 1.4rem; font-weight: 700; margin-bottom: 3rem;}
.gift-view-cont .ticket .poster {width: 17rem; height: 22rem; margin: 0 auto 2rem; border-radius: .4rem; overflow: hidden; box-shadow: 0rem .3rem .8rem 1px rgba(1, 1, 1, 0.15); background-repeat: no-repeat; background-size: 100% 100%; background-position: center;}
.gift-view-cont .ticket > h6 {width: 80%; margin: 0 auto; text-align: center; font-size: 1.5rem; font-weight: 500; margin-bottom: 1rem; line-height: 1.4;}
.gift-view-cont .ticket > ul {display: flex; align-items: center; justify-content: center;}
.gift-view-cont .ticket > ul > li {position: relative; line-height: 1.6rem; font-size: 1.3rem; color: var(--gray01); line-height: 1.6;}
.gift-view-cont .ticket > ul > li + li {margin-left: 1.6rem;}
.gift-view-cont .ticket > ul > li + li::before {content: ''; display: block; width: 1px; height: .8rem; background-color: var(--gray03); position: absolute; top: 50%; left: -.8rem; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%);}
.gift-view-cont .btn-wrap {margin-top: 4rem; display: flex; flex-flow: column; align-items: center; row-gap: 1rem;}
.gift-view-cont .btn-wrap > li {width: 100%; text-align: center;}
.gift-view-cont .btn-wrap > li p {font-size: 1.2rem; font-weight: 500; padding-top: .8rem; color: var(--gray01);}

/* 마이페이지 -------------------- */
header.mypage {background-color: var(--black);}
header.mypage i.icon-barcode {left: 1rem;}
header.mypage i.icon-setting {right: 1rem;}

.mypage-wrap {display: flex; flex-flow: column; width: 100vw; margin: -2rem 0 -3.4rem -1.6rem;}
.mypage-wrap .cont-box {padding: 1.6rem 1.6rem 0;}

/* 마이페이지 > 상단 */
.mypage-summary {background-color: #1A1A1A; padding: 2rem 1.6rem;}
.mypage-summary .grade {display: flex; align-items: center;}
.mypage-summary .grade .card {width: 8rem; height: 4.8rem; margin-right: 1.2rem; border-radius: .2rem; background-repeat: no-repeat; background-size: contain; background-position: center;}
.mypage-summary .grade .card.gold {background-image: url(/resource/img/mem-card-gold-0819020fc66fba3d1c5462e3856081f3.png);}
.mypage-summary .grade .card.blue {background-image: url(/resource/img/mem-card-blue-d5fe46eb9ca3a411d4f7e9e9ead8d250.png);}
.mypage-summary .grade .card.green {background-image: url(/resource/img/mem-card-green-aba4b98f8a5571850530af087d0a0675.png);}
.mypage-summary .grade .card.noble {background-image: url(/resource/img/mem-card-noble-210bf1d4986b6c6a00780512bdfd1790.png);}
.mypage-summary .grade .card.sacteen {background-image: url(/resource/img/mem-card-sacteen-5e275b5bffb571062303e9ce3e881ecb.png);}
.mypage-summary .grade .card.basic {background-image: url(/resource/img/mem-card-basic-2765639ca4fe0792041562a45dab16d9.png);}
.mypage-summary .grade .card.patron {background-image: url(/resource/img/mem-card-patron-0d0ec9a62e8b82b2690905b7a6350055.png);}
.mypage-summary .grade > p {font-size: 1.8rem; line-height: 1.4; color: #fff;}
.mypage-summary .grade > p > span {font-weight: 700;}
.mypage-summary .membership {margin-top: 3.6rem;}
.mypage-summary .membership > div {display: flex; align-items: center; justify-content: space-between; margin-bottom: 2rem;}
.mypage-summary .membership > div > span {font-size: 1.2rem; color: #B8BBC0;}
.mypage-summary .membership > div > a {font-size: 1.3rem; font-weight: 500; color: #B8BBC0; cursor: pointer; margin-left: auto;}
.mypage-summary .membership > ul {height: 8rem; background-color: var(--opa-light-white); border-radius: .4rem; display: grid; grid-template-columns: repeat(2, 1fr); align-items: center;}
.mypage-summary .membership > ul > li {position: relative; text-align: center; color: #fff;}
.mypage-summary .membership > ul > li > div {font-size: 2rem; font-weight: 700; margin-bottom: .8rem;}
.mypage-summary .membership > ul > li > span {font-size: 1.3rem;}
.mypage-summary .membership > ul > li + li::before {content: ''; display: block; width: 1px; height: 2rem; background-color: var(--gray01); position: absolute; top: 50%; left: 0; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%);}

/* 마이페이지 > 회원카드 팝업 */
.mem-card .card {width: 100%; height: calc(62vw - 3.2rem); border-radius: 1.2rem; background-repeat: no-repeat; background-size: 100% 100%; background-position: center;}
.mem-card .card.gold {background-image: url(/resource/img/mem-card-gold-0819020fc66fba3d1c5462e3856081f3.png);}
.mem-card .card.blue {background-image: url(/resource/img/mem-card-blue-d5fe46eb9ca3a411d4f7e9e9ead8d250.png);}
.mem-card .card.green {background-image: url(/resource/img/mem-card-green-aba4b98f8a5571850530af087d0a0675.png);}
.mem-card .card.noble {background-image: url(/resource/img/mem-card-noble-210bf1d4986b6c6a00780512bdfd1790.png);}
.mem-card .card.sacteen {background-image: url(/resource/img/mem-card-sacteen-5e275b5bffb571062303e9ce3e881ecb.png);}
.mem-card .card.basic {background-image: url(/resource/img/mem-card-basic-2765639ca4fe0792041562a45dab16d9.png);}
.mem-card > p {text-align: right; font-size: 1.6rem; font-weight: 500; margin-top: 1rem;}

@media screen and (min-width: 768px) {
    .mem-card {width: 34.4rem; margin: 0 auto;}
    .mem-card .card {height: 21.4rem;}
}

.mem-barcode {margin-top: 3.6rem; padding: 3.6rem 0; border-top: 1px solid var(--gray03); background-color: #fff;}
.mem-barcode .barcode {width: 270px; height: 80px; margin: 0 auto; background-repeat: no-repeat; background-size: 100% 100%; background-position: center;}
.mem-barcode > h6 {font-size: 1.4rem; font-weight: 500; margin-bottom: 2rem; color: #1A1A1A;}
.mem-barcode > p {text-align: center; font-size: 1.3rem; margin-top: 1.2rem; color: #1A1A1A;}

@media (prefers-color-scheme: dark) {
    .mem-barcode {margin: 3.6rem -1.6rem 0; border-top-color: #fff;}
    .mem-barcode > h6 {padding: 0 1.6rem;}
}

/* 마이페이지 > 퀵 메뉴 */
.mypage-menu > li {display: flex; align-items: center; padding: 2rem 0; border-bottom: 1px solid var(--gray03); cursor: pointer; background-image: url(/resource/img/ico/icon-arrow-right-16-bl-cdad93e579fcaab7591404cdc1026f79.svg); background-repeat: no-repeat; background-size: 1.6rem; background-position: right center;}
.mypage-menu > li > i {margin-right: .8rem;}
.mypage-menu > li > span {font-size: 1.4rem; font-weight: 500;}

@media (prefers-color-scheme: dark) {
    .mypage-menu > li {background-image: url(/resource/img/ico/icon-arrow-right-16-wh-16bc80e7726d463f6f5096c573ac6a70.svg);}
}

/* 마이페이지 > 최근 본 공연 */
.play-summary {position: relative; display: flex; align-items: center; box-shadow: .2rem .2rem .8rem rgba(26, 26, 26, 0.05); border-radius: .4rem; border: 1px solid var(--gray03);}
.play-summary .poster {width: 7.5rem; height: 10.5rem; margin: -.1rem 1.2rem 0 -.1rem; border-radius: .4rem 0 0 .4rem; background-repeat: no-repeat; background-size: 100% 100%; background-position: center;}
.play-summary .info {width: calc(100% - 9.9rem); padding-right: 1.2rem;}
.play-summary .info > h6 {width: 100%; font-size: 1.5rem; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.play-summary .info > ul {margin-top: 1.6rem;}
.play-summary .info > ul > li {position: relative; font-size: 1.3rem; color: var(--gray01); line-height: 1.4;}
.play-summary .info > ul > li + li::before {content: ''; display: block; width: 1px; height: .8rem; background-color: var(--gray03); position: absolute; top: 50%; left: -.8rem; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%);}
.play-summary .info > p {font-size: 1.3rem; color: var(--gray01); line-height: 1.4;}
.play-summary .top-bubble {position: absolute; bottom: 7.4rem; right: .7rem; width: 10.3rem; height: 4.4rem; background-image: url(/resource/img/ico/bubble-top-txt7-gap1-e87d2ea98d790f308771fd5d83188716.png); background-repeat: no-repeat; background-size: 100% 100%; background-position: center; animation: motion-type01 0.4s linear 0s infinite alternate; cursor: pointer;}
.play-summary .top-bubble > span {position: relative; top: 1.15rem; left: 1.15em; font-size: 1.1rem; color: var(--sac-red);}
@keyframes motion-type01 { 0% {bottom: 7.4rem;} 100% {bottom: 7.6rem;} }

/* 마이페이지 > 관심 있는 공연 */
.tab-btn {display: flex; align-items: center; justify-content: flex-end; margin-bottom: 2rem;}
.tab-btn > li {display: flex; align-items: center; position: relative; font-size: 1.3rem; font-weight: 500; cursor: pointer;}
.tab-btn > li > i {margin-left: .2rem;}
.tab-btn > li + li {margin-left: 1.6rem;}
.tab-btn > li + li::before {content: ''; display: block; width: 1px; height: .8rem; background-color: var(--gray02); position: absolute; top: 50%; left: -.8rem; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%);}

.tag-list {display: flex; align-items: center; flex-wrap: wrap; grid-gap: 1.6rem .8rem;}

/* 마이페이지 > MY PICK */
.swiper.mypage-play-swiper {margin: 0 -1.6rem; height: fit-content; padding: 0 1.6rem;}
.swiper.mypage-play-swiper .swiper-slide {width: 14rem;}

.swiper.mypage-play-swiper .poster {width: 14rem; height: 19.7rem; border-radius: .4rem; background-repeat: no-repeat; background-size: 100% 100%; background-position: center;}
.swiper.mypage-play-swiper .info {width: 100%; margin-top: 1.2rem;}
.swiper.mypage-play-swiper .info > h6 {width: 100%; font-size: 1.5rem; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.swiper.mypage-play-swiper .info > ul {margin-top: .8rem;}
.swiper.mypage-play-swiper .info > ul > li {position: relative; font-size: 1.3rem; color: var(--gray01); line-height: 1.4;}
.swiper.mypage-play-swiper .info > ul > li + li::before {content: ''; display: block; width: 1px; height: .8rem; background-color: var(--gray03); position: absolute; top: 50%; left: -.8rem; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%);}
.swiper.mypage-play-swiper .info > p {font-size: 1.3rem; color: var(--gray01); line-height: 1.4;}

/* 마이페이지 > 회원약관 */
.terms > h4 {font-size: 1.8rem; font-weight: 700; line-height: 1.6; margin-bottom: 1.2rem;}
.terms > h6 {font-size: 1.6rem; font-weight: 700; line-height: 1.6;}
.terms > p {font-size: 1.6rem; line-height: 1.6;}
.terms > p + h6 {margin-top: 1.2rem;}

/* 설정 -------------------- */
.setting-list > li {display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; padding-bottom: 2rem; border-bottom: 1px solid var(--gray03);}
.setting-list > li + li {padding-top: 2rem;}
.setting-list > li > h6 {font-size: 1.4rem; font-weight: 500;}
.setting-list > li > h6 > span {font-weight: initial;}
.setting-list > li > a,
.setting-list > li > span {font-size: 1.3rem; color: var(--gray01); font-weight: 500;}
.setting-list > li > p {width: 100%; margin-top: .8rem; font-size: 1.3rem; color: var(--gray01); line-height: 1.6;}
.setting-list > li > select {width: fit-content; height: 1.4rem; padding: 0 1.6rem 0 0; border: 0; font-size: 1.3rem; color: var(--gray01); font-weight: 500; background-image: url(/resource/img/ico/icon-arrow-down-12-253af512e9472b86ab2577287c79a961.svg); background-size: 1.2rem; background-position: right center;}

/* 설정 > 회원정보 수정 */
.modify-info {padding: 1.6rem 0 3.6rem; border-bottom: 1px solid var(--gray03);}
.modify-info .card {width: 8rem; height: 4.8rem; margin: 0 auto 1.6rem; border-radius: .2rem; background-repeat: no-repeat; background-size: 100% 100%; background-position: center;}
.modify-info .card.gold {background-image: url(/resource/img/mem-card-gold-0819020fc66fba3d1c5462e3856081f3.png);}
.modify-info .card.blue {background-image: url(/resource/img/mem-card-blue-d5fe46eb9ca3a411d4f7e9e9ead8d250.png);}
.modify-info .card.green {background-image: url(/resource/img/mem-card-green-aba4b98f8a5571850530af087d0a0675.png);}
.modify-info .card.basic {background-image: url(/resource/img/mem-card-basic-2765639ca4fe0792041562a45dab16d9.png);}
.modify-info > p {text-align: center; font-size: 1.8rem; word-break: keep-all; line-height: 1.4;}
.modify-info > p > span {font-weight: 700;}
.modify-info > button {margin: 2rem auto 0;}

.modify-wrap {padding-bottom: 3.6rem; border-bottom: 1px solid var(--gray03);}
.modify-wrap > li {display: flex; align-items: center;}
.modify-wrap > li + li {margin-top: 2rem;}
.modify-wrap > li > span {display: block; width: 9.8rem; margin-right: 1.2rem; font-size: 1.4rem; font-weight: 500; color: var(--gray01);}
.modify-wrap > li > *:not(span) {width: calc(100% - 11rem);}
.modify-wrap > li > p {font-size: 1.4rem;}
.modify-wrap > li.address {position: relative; margin-bottom: -1.2rem;}
.modify-wrap > li.address i {width: 2rem; height: 2rem; background-image: url(/resource/img/ico/icon-search-20-1d03d677e8701df8c479fc8b801433c2.svg); background-repeat: no-repeat; background-size: contain; background-position: center; position: absolute; top: 50%; right: 1.2rem; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); cursor: pointer;}

.modify-sns {display: flex; align-items: center;}
.modify-sns > li + li {margin-left: 1.2rem;}

/* 설정 > 멤버십 혜택보기 */
.membership-list > p {text-align: center; font-size: 1.8rem; font-weight: 500; margin-bottom: 3.2rem;}
.membership-list > ul {display: flex; flex-flow: column; row-gap: 1rem;}
.membership-list > ul > li {display: flex; align-items: center; column-gap: 1.2rem;}
.membership-list > ul > li:not(:nth-child(1)) {border: 1px solid var(--gray03); box-shadow: .2rem .2rem .8rem rgba(26, 26, 26, .05); padding: 1rem;}
.membership-list > ul > li .card {width: 8rem; height: 4.8rem; background-repeat: no-repeat; background-size: cover; background-position: center; border-radius: .2rem;}
.membership-list > ul > li .card.gold {background-image: url(/resource/img/mem-card-gold-0819020fc66fba3d1c5462e3856081f3.png);}
.membership-list > ul > li .card.blue {background-image: url(/resource/img/mem-card-blue-d5fe46eb9ca3a411d4f7e9e9ead8d250.png);}
.membership-list > ul > li .card.green {background-image: url(/resource/img/mem-card-green-aba4b98f8a5571850530af087d0a0675.png);}
.membership-list > ul > li .card.noble {background-image: url(/resource/img/mem-card-noble-210bf1d4986b6c6a00780512bdfd1790.png);}
.membership-list > ul > li .card.sacteen {background-image: url(/resource/img/mem-card-sacteen-5e275b5bffb571062303e9ce3e881ecb.png);}
.membership-list > ul > li .card.basic {background-image: url(/resource/img/mem-card-basic-2765639ca4fe0792041562a45dab16d9.png);}
.membership-list > ul > li .card.patron {background-image: url(/resource/img/mem-card-patron-0d0ec9a62e8b82b2690905b7a6350055.png);}
.membership-list > ul > li > div {display: flex; flex-flow: column; row-gap: .8rem; width: calc(100% - 8rem - 1.2rem - 1.2rem - 4.8rem);}
.membership-list > ul > li > div > p {font-size: 1.5rem; font-weight: 500;}
.membership-list > ul > li > div > span {font-size: 1.4rem; color: var(--gray01);}
.membership-list > ul > li > a {width: 4.8rem; text-align: right; font-size: 1.3rem; font-weight: 500; color: var(--gray01);}
.membership-list .more {margin-top: 2rem; display: flex; align-items: center; justify-content: flex-end; column-gap: .6rem; font-size: 1.4rem; font-weight: 500;}
.membership-list .more::after {content: ''; width: 1.2rem; height: 1.2rem; background-image: url(/resource/img/ico/icon-arrow-right-12-gr-2eeebea278f2af95f3ba05d05d00fdef.svg); background-repeat: no-repeat; background-size: contain; background-position: center;}

.my-membership {padding: 1.6rem 0 3.6rem; border-bottom: 1px solid var(--gray03);}
.my-membership > i {display: block; margin: 0 auto 2rem;}
.my-membership > p {text-align: center; font-size: 1.8rem; line-height: 1.4; word-break: keep-all;}
.my-membership > p > span {font-weight: 700;}
.my-membership > span {display: block; margin-top: 1.2rem; text-align: center; font-size: 1.2rem; color: var(--gray02);}
.my-membership > button {margin: 2rem auto 0;}

.benefit {background-repeat: no-repeat; background-size: 174px 140px; background-position: right top 50px;}
.benefit.grade-gold {background-image: url(/resource/img/membership-gold-2a53b80eb3ca9166c0064210740b31c1.svg);}
.benefit.grade-blue {background-image: url(/resource/img/membership-blue-5c4adea0f4e2574fcaa412df9bce6a72.svg);}
.benefit.grade-green {background-image: url(/resource/img/membership-green-33402055e64124a11b29f683bab06996.svg);}
.benefit > h4 {font-size: 22px; line-height: 1.6; text-align: center}
.benefit > p {margin-top: 30px; font-size: 15px;}
.benefit > div {font-size: 30px; font-weight: 700; color: var(--mem-gold); margin-top: 10px;}
.benefit > div > span {font-size: 15px; font-weight: 500; color: var(--black); display: inline-block;}
.benefit > ul {background-color: #424242; border-radius: .4rem; margin-top: 2rem; padding: 2rem 1.6rem;}
.benefit > ul > li {font-size: 14px; line-height: 1.8; color: #fff; display: flex; align-items: center; justify-content: space-between;}
.benefit > ul > li > p {font-weight: 500;}
.benefit > span {display: block; font-size: 1.3rem; color: var(--gray01); margin-top: 1.2rem; line-height: 1.4;}

/* .my-benefit {background-color: var(--gray04); padding: 2rem 1.6rem;}
.my-benefit > li {display: flex; align-items: center; justify-content: space-between; line-height: 1.8;}
.my-benefit > li > span {font-size: 1.4rem; color: var(--gray01);}
.my-benefit > li > p {font-size: 1.4rem; font-weight: 500;}
.my-benefit > li > ul > li {position: relative; font-size: 1.4rem; font-weight: 500;}
.my-benefit > li > ul > li + li::before {content: ''; display: block; width: 1px; height: .8rem; background-color: var(--gray03); position: absolute; top: 50%; left: -.8rem; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%);} */

.benefit-list {display: grid; grid-template-columns: repeat(2, 1fr); align-items: center;}
.benefit-list > li {text-align: center; padding: 2rem 0;}
.benefit-list > li:nth-child(2n) {border-left: 1px solid var(--gray03);}
.benefit-list > li:nth-child(n+3) {border-top: 1px solid var(--gray03);}
.benefit-list > li > i {margin-bottom: 1.2rem;}
.benefit-list > li > p {font-size: 14px; line-height: 1.4;}
.benefit-list > li > p > span {display: block; font-size: 13px; line-height: 1.5;}
.benefit-list > li.on > p {font-weight: 500;}

.membership-guide.line {padding-bottom: 3.6rem; border-bottom: 1px solid var(--gray03);}
.membership-guide > li {display: flex; align-items: center; justify-content: space-between;}
.membership-guide > li + li {margin-top: 2rem;}
.membership-guide > li > h6 {display: flex; align-items: center; font-size: 1.4rem; font-weight: 500;}
.membership-guide > li > h6 > span {display: block; width: 1.2rem; height: 1.2rem; margin-right: .4rem;}
.membership-guide > li > h6 > span.corp {background-color: var(--mem-corp);}
.membership-guide > li > h6 > span.gold {background-color: var(--mem-gold);}
.membership-guide > li > h6 > span.blue {background-color: var(--mem-blue);}
.membership-guide > li > h6 > span.green {background-color: var(--mem-green);}
.membership-guide > li > h6 > span.basic {background-color: var(--mem-basic);}
.membership-guide > li > h6 > span.sac {background-color: var(--mem-sac);}
.membership-guide > li > h6 > span.nobel {background-color: var(--mem-nobel);}
.membership-guide > li > p {font-size: 1.4rem;}

.membership-intro {text-align: center;}
.membership-intro .card {width: 8rem; height: 4.8rem; margin: 0 auto 1.6rem; border-radius: .2rem; background-repeat: no-repeat; background-size: cover; background-position: center;}
.membership-intro .card.gold {background-image: url(/resource/img/mem-card-gold-0819020fc66fba3d1c5462e3856081f3.png);}
.membership-intro .card.blue {background-image: url(/resource/img/mem-card-blue-d5fe46eb9ca3a411d4f7e9e9ead8d250.png);}
.membership-intro .card.green {background-image: url(/resource/img/mem-card-green-aba4b98f8a5571850530af087d0a0675.png);}
.membership-intro .card.general {background-image: url(/resource/img/mem-card-basic-2765639ca4fe0792041562a45dab16d9.png);}
.membership-intro .card.teen {background-image: url(/resource/img/mem-card-sacteen-5e275b5bffb571062303e9ce3e881ecb.png);}
.membership-intro .card.noble {background-image: url(/resource/img/mem-card-noble-210bf1d4986b6c6a00780512bdfd1790.png);}
.membership-intro > h6 {font-size: 1.4rem; font-weight: 700;}
.membership-intro > p {margin-top: 1.2rem; font-size: 1.3rem; font-weight: 500; line-height: 1.4;}
.membership-intro .benefit-intro {margin-top: 3.6rem;}
.membership-intro .benefit-intro .label {margin: 0 auto 1.2rem; min-width: 4.8rem; width: fit-content; padding: 0 .8rem; font-size: 1.1rem; display: flex; align-items: center; justify-content: center; line-height: 1;}
.membership-intro .benefit-intro > h6 {font-size: 1.4rem; font-weight: 500;}
.membership-intro .benefit-intro > h6 + h6 {margin-top: 1rem;}
.membership-intro .benefit-intro > p {margin-top: .8rem; font-size: 1.3rem; line-height: 1.4;}
.membership-intro .benefit-intro > span {display: block; margin-top: 1.2rem; font-size: 1.3rem; line-height: 1.4; color: var(--gray01);}

/* 설정 > 멤버십 > 자동이체 신청정보 조회/신청 */
.auto-guide {border: 1px solid var(--gray03); background-color: var(--gray04); padding: 1.6rem; margin-bottom: 2rem; text-align: center; font-size: 1.4rem; font-weight: 500; line-height: 1.6; color: var(--gray01); border-radius: .4rem;}

.card-box .title {display: flex; flex-flow: column; row-gap: 1rem;}
.card-box .title > h4 {font-size: 1.8rem; font-weight: 700;}
.card-box .title > p {font-size: 1.4rem;}
.card-box > ul {margin-top: 2rem; display: flex; flex-flow: column; row-gap: 2rem;}
.card-box > ul > li {display: flex; align-items: center; column-gap: .8rem;}
.card-box > ul > li > h6 {margin-bottom: -1.4rem; font-size: 1.3rem; font-weight: 500;}
.card-box > ul > li > input {text-align: center;}

.auto-cancle > li {display: flex; flex-flow: column; row-gap: 3rem;}
.auto-cancle > li + li {border-top: 1px solid var(--gray03); margin-top: 2rem; padding-top: 2rem;}
.auto-cancle > li > div > h6 {display: flex; align-items: center; column-gap: .4rem; font-size: 1.5rem; font-weight: 500;}
.auto-cancle > li > div > h6 > span {display: block; width: 1.2rem; height: 1.2rem;}
.auto-cancle > li > div > h6 > span.gold {background-color: var(--mem-gold);}
.auto-cancle > li > div > h6 > span.blue {background-color: var(--mem-blue);}
.auto-cancle > li > div > h6 > span.green {background-color: var(--mem-green);}
.auto-cancle > li > div > h6 > span.basic {background-color: var(--mem-basic);}
.auto-cancle > li > div > p {margin-top: 1.2rem; font-size: 1.4rem;}
.auto-cancle > li > ul {display: flex; flex-flow: column; row-gap: 1rem;}
.auto-cancle > li > ul > li {display: flex; align-items: center; justify-content: space-between;}
.auto-cancle > li > ul > li > h6 {font-size: 1.4rem; color: var(--gray01);}
.auto-cancle > li > ul > li > p {font-size: 1.4rem; font-weight: 500;}


/* 설정 > 유료회원 가입 */
.join-grade {display: flex; align-items: center; margin-bottom: 2rem;}
.join-grade > li:first-child:nth-last-child(2), .join-grade > li:first-child:nth-last-child(2) ~ li {width: calc((100% - (.8rem * 1)) / 2);}
.join-grade > li:first-child:nth-last-child(3), .join-grade > li:first-child:nth-last-child(3) ~ li {width: calc((100% - (.8rem * 2)) / 3);}
.join-grade > li + li {margin-left: .8rem;}

.join-grade > li input[type='radio'] + label {width: 100%;}
.join-grade > li input[type='radio'] + label::before {content: none;}
.join-grade > li input[type='radio'] + label > span {width: 100%; height: 4.8rem; line-height: 4.8rem; border-radius: .4rem; text-align: center; font-size: 1.5rem; font-weight: 500; border: 1px solid;}
.join-grade > li input[type='radio'] + label.gold > span {border-color: var(--mem-gold); color: var(--mem-gold);}
.join-grade > li input[type='radio']:checked + label.gold > span {background-color: var(--mem-gold); color: #fff;}
.join-grade > li input[type='radio'] + label.blue > span {border-color: var(--mem-blue); color: var(--mem-blue);}
.join-grade > li input[type='radio']:checked + label.blue > span {background-color: var(--mem-blue); color: #fff;}
.join-grade > li input[type='radio'] + label.green > span {border-color: var(--mem-green); color: var(--mem-green);}
.join-grade > li input[type='radio']:checked + label.green > span {background-color: var(--mem-green); color: #fff;}

.grade-info {margin-bottom: 2rem;}
.grade-info div {width: 100%; display: flex; align-items: center; justify-content: space-between;}
.grade-info h6 {display: flex; align-items: center; font-size: 1.5rem; font-weight: 500;}
.grade-info h6 .color {width: 1.2rem; height: 1.2rem; margin-right: .4rem;}
.grade-info h6 .color.gold {background-color: var(--mem-gold);}
.grade-info h6 .color.blue {background-color: var(--mem-blue);}
.grade-info h6 .color.green {background-color: var(--mem-green);}
.grade-info > p {margin-top: 1.2rem; font-size: 1.4rem; line-height: 1.6;}

.grade-info + ul {display: flex; flex-flow: column; row-gap: 1rem;}
.grade-info + ul > li {display: flex; align-items: center; justify-content: space-between;}
.grade-info + ul > li > h6 {font-size: 1.4rem; color: var(--gray01);}
.grade-info + ul > li > p {font-size: 1.4rem; font-weight: 500;}

/* 설정 > 회원탈퇴 */
.withdrawal-wrap > li {font-size: 1.3rem; font-weight: 500;}
.withdrawal-wrap > li + li {margin-top: .8rem;}
.withdrawal-wrap > li > input,
.withdrawal-wrap > li > select {margin-bottom: 1.2rem;}
.withdrawal-wrap > li > p {font-size: 1.3rem; font-weight: 500; line-height: 1.6;}

/* 쿠폰 -------------------- */
#coupon .box > .notice:nth-child(1) {margin-top: -2rem; margin-bottom: 2rem;}

.coupon-list > li {height: 10.6rem; padding: 2rem 1.6rem; border: 1px solid var(--gray03); border-radius: .4rem; box-shadow: .2rem .2rem .8rem rgba(26, 26, 26, 0.05); position: relative;}
.coupon-list > li + li {margin-top: 1.2rem;}
.coupon-list > li > h6 {font-size: 1.4rem; font-weight: 500;}
.coupon-list > li > h6 > span {font-size: 1.5rem; font-weight: 700;}
.coupon-list > li > p {font-size: 1.3rem; margin-top: .8rem;}
.coupon-list > li > span {display: block; margin-top: 1.6rem; font-size: 1.2rem; color: var(--gray01);}
.coupon-list > li > button {position: absolute; top: 50%; right: 1.6rem; width: 6.8rem; height: 6.8rem; border-radius: 100%; flex-flow: column; row-gap: .4rem; font-size: 1.2rem; border: 0; background: linear-gradient(320deg, #FF535E 32%, rgba(255, 83, 94, .7) 90%); box-shadow: .2rem .2rem .8rem rgba(255, 83, 94, .25); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%);}
.coupon-list > li > button:disabled {color: #fff!important; background: linear-gradient(320deg, #3A3A3A 14%, rgba(137, 137, 137, .71) 90%); box-shadow: .2rem .2rem .8rem rgba(105, 105, 105, 0.25);}

.coupon-list .disabled {position: relative;}
.coupon-list .disabled::before {content: ''; display: block; width: calc(100% - .2rem); height: 10.4rem; background-color: var(--white01); border-radius: .4rem; position: absolute; left: 1px; bottom: 0; z-index: 2; opacity: .6;}
.coupon-list .disabled::after {content: ''; display: block; width: 9.8rem; height: 9.8rem; background-image: url(/resource/img/ico/icon-used-stamp-gr-3b4d4c00d1c646c7f8454307959a2f82.png); background-repeat: no-repeat; background-size: contain; background-position: center; position: absolute; top: 50%; right: 0; z-index: 3; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%);}

.coupon-input {margin-top: 2.4rem;}
.coupon-input > h6 {font-size: 1.3rem; font-weight: 500;}
.coupon-input > div {margin-top: .8rem; display: flex; align-items: center; justify-content: space-between;}
.coupon-input > div input[type='text'] {width: calc(100% - 11.8rem); margin-right: .8rem;}

/* 프로그램북 */
#program .box > .notice:nth-child(1) {margin-top: -2rem; margin-bottom: 2rem;}
#program .box > .notice > div {font-size: 1.3rem; color: var(--gray01); line-height: 1.5!important;}

.program-list > li {height: 10.6rem; padding: 2rem 1.6rem; border: 1px solid var(--gray03); border-radius: .4rem; box-shadow: .2rem .2rem .8rem rgba(26, 26, 26, 0.05); position: relative;}
.program-list > li + li {margin-top: 1.2rem;}
.program-list > li > h6 {font-size: 1.4rem; font-weight: 500;}
.program-list > li > h6 > span {font-size: 1.5rem; font-weight: 700;}
.program-list > li > p {font-size: 1.3rem; margin-top: .8rem;}
.program-list > li > span {display: block; margin-top: 1.6rem; font-size: 1.2rem; color: var(--gray01);}
.program-list > li > button {position: absolute; top: 50%; right: 1.6rem; width: 6.8rem; height: 6.8rem; border-radius: 100%; flex-flow: column; row-gap: .4rem; font-size: 1.2rem; border: 0; background: linear-gradient(320deg, #FF535E 32%, rgba(255, 83, 94, .7) 90%); box-shadow: .2rem .2rem .8rem rgba(255, 83, 94, .25); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%);}
.program-list > li > button:disabled {color: #fff!important; background: linear-gradient(320deg, #3A3A3A 14%, rgba(137, 137, 137, .71) 90%); box-shadow: .2rem .2rem .8rem rgba(105, 105, 105, 0.25);}

.program-list .disabled {position: relative;}
.program-list .disabled::before {content: ''; display: block; width: calc(100% - .2rem); height: 10.4rem; background-color: var(--white01); border-radius: .4rem; position: absolute; left: 1px; bottom: 0; z-index: 2; opacity: .6;}
.program-list .disabled::after {content: ''; display: block; width: 9.8rem; height: 9.8rem; background-image: url(/resource/img/ico/icon-used-stamp-gr-3b4d4c00d1c646c7f8454307959a2f82.png); background-repeat: no-repeat; background-size: contain; background-position: center; position: absolute; top: 50%; right: 0; z-index: 3; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%);}

/* 교환권 -------------------- */
.play-summary-list > li {position: relative; display: flex; align-items: center; column-gap: 1.2rem; box-shadow: .2rem .2rem .8rem rgba(26, 26, 26, 0.05); border-radius: .4rem; border: 1px solid var(--gray03);}
.play-summary-list > li + li {margin-top: 1.2rem;}
.play-summary-list > li .poster {width: 6.3rem; height: 9rem; margin: -.1rem 0 0 -.1rem; border-radius: .4rem 0 0 .4rem; background-repeat: no-repeat; background-size: 100% 100%; background-position: center;}
.play-summary-list > li .info {flex: 1; padding-right: 1.2rem;}
.play-summary-list > li .info > div {display: flex; align-items: center; column-gap: .8rem;}
.play-summary-list > li .info h6 {line-height: 1.6; font-size: 1.5rem; font-weight: 500; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; line-clamp: 1; -webkit-line-clamp: 1; -webkit-box-orient: vertical;}
.play-summary-list > li .info > ul {margin-top: 1rem;}
.play-summary-list > li .info > ul + ul {margin-top: 0;}
.play-summary-list > li .info > ul > li {position: relative; font-size: 1.3rem; color: var(--gray01); line-height: 1.4;}
.play-summary-list > li .info > ul > li + li::before {content: ''; display: block; width: 1px; height: .8rem; background-color: var(--gray03); position: absolute; top: 50%; left: -.8rem; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%);}
.play-summary-list > li .info > p {font-size: 1.3rem; color: var(--gray01); line-height: 1.4;}

.exchange-play {padding-top: 1.6rem;}
.exchange-play .poster {width: 17rem; height: 22.5rem; margin: 0 auto 1.6rem; border-radius: .4rem; background-repeat: no-repeat; background-size: 100% 100%; background-position: center;}
.exchange-play .info {text-align: center;}
.exchange-play .info > h6 {font-size: 1.5rem; font-weight: 500; line-height: 1.2; word-break: keep-all;}
.exchange-play .info > div {display: flex; align-items: center; column-gap: .8rem; margin-top: 1.2rem; justify-content: center;}
.exchange-play .info > button {margin: 1.2rem auto 0;}
.exchange-play .info > ul {margin-top: 2.4rem; padding: 2rem 1.6rem; background-color: var(--gray04); border-radius: .4rem;}
.exchange-play .info > ul > li {display: flex; align-items: center; justify-content: space-between; font-size: 14px; color: var(--gray01); line-height: 1.8;}
.exchange-play .info > ul > li > ul > li {position: relative; font-weight: 500;}
.exchange-play .info > ul > li > ul > li + li::before {content: ''; display: block; width: 1px; height: .8rem; background-color: var(--gray02); position: absolute; top: 50%; left: -.8rem; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%);}
.exchange-play .info > ul > li > p {font-weight: 500;}

/* 교환권 > 좌석 선택 */
.seat-select {display: flex; flex-flow: column; width: 100vw; height: calc(100vh - 11.4rem); margin: 0 -1.6rem;}
.seat-select .play-info {padding: 0 1.6rem 2rem; border-bottom: 1px solid var(--gray03);}
.seat-select .play-info > h6 {font-size: 1.5rem; font-weight: 500; line-height: 1.6;}
.seat-select .play-info > ul {margin-top: .4rem;}
.seat-select .play-info > ul > li {position: relative; font-size: 1.3rem; color: var(--gray01);}
.seat-select .play-info > ul > li + li::before {content: ''; display: block; width: 1px; height: .8rem; background-color: var(--gray03); position: absolute; top: 50%; left: -.8rem; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%);}
.seat-select .map {height: calc(100% - 5.8rem - 12.2rem);}
.seat-select .seat-info {height: 12.2rem; background-color: transparent; padding: 0; border-radius: 0; border-top: 1px solid var(--black);}
.seat-select .seat-info > h6 {padding: 1.6rem; font-size: 1.5rem; font-weight: 500; border-bottom: 1px solid var(--gray03);}
.seat-select .seat-info > div {padding: 1.6rem;}
.seat-select .seat-info > div > p {font-size: 1.4rem; font-weight: 500; display: flex; align-items: center;}
.seat-select .seat-info > div > p > span {width: 1.2rem; height: 1.2rem; display: block; margin-right: .4rem;}
.seat-select .seat-info > div > span {display: block; margin-top: 1.2rem; font-size: 1.4rem;}

/* 교환권 > 좌석별 색상 */
.seat-select .seat-info > div > p > span.red {background-color: #FF3030;}
.seat-select .seat-info > div > p > span.blue {background-color: #1272D3;}
.seat-select .seat-info > div > p > span.yellow {background-color: #FFFB10;}
.seat-select .seat-info > div > p > span.green {background-color: #20BD41;}
.seat-select .seat-info > div > p > span.pink {background-color: #FFA19D;}
.seat-select .seat-info > div > p > span.brown {background-color: #876213;}
.seat-select .seat-info > div > p > span.light-green {background-color: #CBEAB3;}
.seat-select .seat-info > div > p > span.violet {background-color: #8152B6;}
.seat-select .seat-info > div > p > span.orange {background-color: #FFC32B;}

/* 공지사항 -------------------- */
.notice-list > li {display: flex; align-items: center; padding-bottom: 2rem; border-bottom: 1px solid var(--gray03);}
.notice-list > li + li {padding-top: 2rem;}
.notice-list > li .label {margin-right: .8rem;}
.notice-list > li > h6 {width: calc(100% - 6.2rem); font-size: 1.4rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}

/* 고객센터 -------------------- */
.cs-title {margin-top: 1.6rem; text-align: center; font-size: 2rem;}
.cs-cont {display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 3.6rem;}
.cs-cont > li {height: 11.4rem; padding-top: 2.4rem; text-align: center; cursor: pointer;}
.cs-cont > li > span {display: block; margin-top: 1.2rem; font-size: 1.4rem; font-weight: 500; line-height: 1.4; word-break: keep-all;}
.cs-cont > li:not(:nth-child(3n + 1)) {border-left: 1px solid var(--gray03);}
.cs-cont > li:nth-child(n+4) {border-top: 1px solid var(--gray03);}

/* 고객센터 > 전당소개 */
.container.sac-intro {background-color: #fff;}
.container.sac-intro select {border-color: #E8E8E8; color: #1A1A1A;}

.sac-intro-wrap {width: 100vw; height: calc(100vh - 4.8rem - 1rem - 2.8rem); margin: 1rem -1.6rem -3.4rem; overflow: hidden; background-color: #fff;}
.sac-intro-wrap .floor {position: absolute; bottom: 7rem; left: 0; display: flex; flex-flow: column; position: absolute; bottom: 3.8rem; border: 1px solid #E8E8E8; border-radius: .2rem; background-color: #fff;}
.sac-intro-wrap .floor > li {display: flex; align-items: center; width: 3.6rem; height: 3.6rem; padding: .8rem 1rem; font-size: 1.4rem; color: #1A1A1A;}
.sac-intro-wrap .floor > li.active {font-weight: 700;}
.sac-intro-wrap .resize {position: absolute; bottom: 3.8rem; right: 0; display: flex; flex-flow: column; border: 1px solid #E8E8E8; border-radius: .2rem; box-shadow: .2rem .2rem .8rem rgba(26, 26, 26, 0.05);}
.sac-intro-wrap .resize > li {width: 3.6rem; height: 3.6rem; display: flex; align-items: center; justify-content: center; background-color: #fff; cursor: pointer;}
.sac-intro-wrap .resize > li + li {border-top: 1px solid #E8E8E8;}

#desc-pop .pop-wrap.sac-intro {padding: 0; overflow: hidden;}
#desc-pop .pop-wrap.sac-intro .pop-tit {padding: 2.4rem 2rem 0;}
#desc-pop .pop-wrap.sac-intro .pop-tit .icon-close-24 {top: 2rem; right: 2rem;}
#desc-pop .pop-wrap.sac-intro .pop-cont > p,
#desc-pop .pop-wrap.sac-intro .pop-cont > ul {padding: 2rem 2rem 2.4rem;}
#desc-pop .pop-wrap.sac-intro .pop-cont > ul > li {column-gap: .4rem;}
#desc-pop .pop-wrap.sac-intro .pop-cont > ul > li h6 {width: 5.1rem; text-align: justify; text-align-last: justify;}
/* #desc-pop .pop-wrap.sac-intro .pop-cont {margin: 2rem -2rem 0;}
#desc-pop .pop-wrap.sac-intro .pop-cont > p,
#desc-pop .pop-wrap.sac-intro .pop-cont > ul {padding: 2rem; margin-bottom: -2rem;} */

.sac-intro-swiper {height: 23rem; line-height: 1;}
.sac-intro-swiper .swiper-slide img {width: 100%; height: 23rem;}
.sac-intro-swiper .swiper-pagination-bullet {background-color: var(--white01); opacity: .5;}
.sac-intro-swiper .swiper-pagination-bullet-active {background-color: var(--white01); opacity: 1;}

/* .sac-intro-cont {position: relative;}
.sac-intro-cont img {width: 100%;}
.sac-intro-cont .number {width: 100%; height: 100%; position: absolute; top: 0; left: 0;}
.sac-intro-cont .number div {border-radius: 100%; position: absolute; display: flex; align-items: center; justify-content: center;}
.sac-intro-cont .number div.red {background-color: #D7282F; color: #fff!important;}  */

/* 고객센터 > 전당소개 > 오페라하우스 m */
.number.opera-m div {width: 1.4rem; height: 1.4rem; font-size: .8rem; font-weight: 700;}
.number.opera-m div.num01 {top: 22.6rem; left: 11.8rem;}
.number.opera-m div.num02 {top: 21.3rem; left: 24.95rem; transform: rotate(-20deg);}


/* 고객센터 > 오시는 길 */
.directions-wrap {display: flex; flex-flow: column; width: 100vw; height: 100vh; overflow: hidden; margin: 0 0 0 -1.6rem; position: fixed; top: 0;}
.directions-wrap .map-wrap {height: 36.4rem;}
.directions-wrap .map-wrap .map {width: 100vw; height: 27rem; background-color: var(--gray04);}
.directions-wrap .map-wrap .map-link {padding: 2rem 1.6rem;}
.directions-wrap .map-wrap .map-link .link {border: 1px solid var(--gray01); border-radius: 4px; padding: 16px 10px; display: flex; align-items: center; background-image: url(/resource/img/ico/icon-arrow-right-16-gr-bad09494675fad41c2a0264370aa878b.svg); background-repeat: no-repeat; background-size: 16px; background-position: center right 10px; cursor: pointer;}
.directions-wrap .map-wrap .map-link .link > * + * {margin-left: 4px;}
.directions-wrap .map-wrap .map-link .link > p {font-size: 16px; font-weight: 500; color: var(--gray01);}
.directions-wrap .transport {height: calc(100vh - 36.4rem); overflow-y: auto;}
.directions-wrap .transport .tab {top: 36.3rem;}
.directions-wrap .transport .tab-cont {padding: 3.6rem 1.6rem 3.4rem;}
.directions-wrap .transport .tab-cont .course + .course {margin-top: 3rem;}
.directions-wrap .transport .tab-cont .course > h6 {display: flex; align-items: center; font-size: 1.8rem; font-weight: 500;}
.directions-wrap .transport .tab-cont .course > p {display: flex; align-items: center; margin-top: 1rem; font-size: 1.6rem; line-height: 1.6;}
.directions-wrap .transport .tab-cont .course i {margin-right: .8rem;}
.directions-wrap .transport .tab-cont .course .red {font-weight: 700; color: #CE2E26!important;}
.directions-wrap .transport .tab-cont .course .orange {font-weight: 700; color: #EB7E30!important;}
.directions-wrap .transport .tab-cont .course .blue {font-weight: 700; color: #1372D0!important;}
.directions-wrap .transport .tab-cont .course .green {font-weight: 700; color: #61B144!important;}


/* FAQ -------------------- */
.faq-list > li {padding-bottom: 2rem; border-bottom: 1px solid var(--gray03);}
.faq-list > li + li {padding-top: 2rem;}
.faq-list > li .title {display: flex; align-items: center; padding-right: 3.6rem; font-size: 1.4rem; line-height: 1.4; background-image: url(/resource/img/ico/icon-arrow-down-16-bl-ae1a90841a706541bbe91620dc79f2b3.svg); background-repeat: no-repeat; background-size: 1.6rem; background-position: right center;}
.faq-list > li .title::before {content: 'Q.'; font-size: 1.5rem; font-weight: 500; margin-right: .8rem;}
.faq-list > li .cont {position: relative; display: none; margin: 2rem 0 -2rem; padding: 2rem 1.6rem 2rem 4rem; font-size: 1.4rem; line-height: 1.6; background-color: var(--gray04);}
.faq-list > li .cont::before {content: 'A.'; font-size: 1.5rem; font-weight: 500; margin-right: .8rem; position: absolute; top: 1.8rem; left: 1.6rem;}
.faq-list > li .cont > * + * {display: block; margin-top: 2rem;}
.faq-list > li .cont > a {font-weight: 500;}

.faq-list > li.active .title {background-image: url(/resource/img/ico/icon-arrow-up-16-bl-e76db746f74cff680f8db6509f9be79e.svg);}
.faq-list > li.active .cont {display: block;}

@media (prefers-color-scheme: dark) {
    .faq-list > li .title {background-image: url(/resource/img/ico/icon-arrow-down-16-wh-49cd7af182eeffc6173a06ba44915b12.svg);}
    .faq-list > li.active .title {background-image: url(/resource/img/ico/icon-arrow-up-16-wh-2aaf2462b691df020bb50d0242aad8e7.svg);}
}

/* 관람평 -------------------- */
.review-list > li {position: relative; padding-bottom: 1.6rem; display: flex; align-items: center; column-gap: 1.2rem;}
.review-list > li + li {padding-top: 1.6rem; border-top: 1px solid var(--gray03);}
.review-list .poster {width: 75px; height: 105px; border-radius: .4rem; background-repeat: no-repeat; background-size: 100% 100%; background-position: center;}
.review-list .info {width: calc(100% - 75px - 1.2rem);}
.review-list .info > div {display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.2rem;}
.review-list .info > div .flex.btn > li {font-size: 1.3rem; font-weight: 500; color: var(--gray01); position: relative;}
.review-list .info > div .flex.btn > li + li::before {content: ''; display: block; width: 1px; height: .8rem; background-color: var(--gray03); position: absolute; top: 50%; left: -.8rem; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%);}
.review-list .info > h6 {width: 100%; font-size: 1.5rem; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.review-list .info > ul:not(.score) > li {position: relative; font-size: 1.3rem; color: var(--gray01); margin-top: .8rem; line-height: 1.4;}
.review-list .info > ul:not(.score) > li + li::before {content: ''; display: block; width: 1px; height: .8rem; background-color: var(--gray03); position: absolute; top: 50%; left: -.8rem; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%);}
.review-list .info > p {font-size: 1.3rem; color: var(--gray01); line-height: 1.4;}
.review-list .info > span {display: block; width: 100%; margin-top: 1.6rem; font-size: 1.3rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.review-list .info > button {margin-top: 1.6rem;}

/* 관람평 > 관람평 작성 */
.review-info {display: flex; align-items: center;}
.review-info .poster {width: 7.5rem; height: 10.5rem; margin-right: 1.2rem; border-radius: .4rem; background-repeat: no-repeat; background-size: 100% 100%; background-position: center;}
.review-info .info {width: calc(100% - 8.7rem);}
.review-info .info > h6 {width: 100%; font-size: 1.5rem; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.review-info .info > ul:not(.score) > li {position: relative; font-size: 1.3rem; color: var(--gray01); margin-top: .8rem; line-height: 1.4;}
.review-info .info > ul:not(.score) > li + li::before {content: ''; display: block; width: 1px; height: .8rem; background-color: var(--gray03); position: absolute; top: 50%; left: -.8rem; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%);}
.review-info .info > p {font-size: 1.3rem; color: var(--gray01); line-height: 1.4;}
.review-info .info .score {margin-top: 2rem;}

.review-write {margin-top: 3.6rem; height: 18rem;}


/* 티켓 -------------------- */
/* 티켓 > 티켓예매/취소내역 */
.reserve-align {display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.4rem;}
.reserve-align button {height: 2.8rem;}
.reserve-align select {width: fit-content; height: fit-content; padding: 0 1.4rem 0 0; border: 0; font-size: 1.3rem; font-weight: 500; background-image: url(/resource/img/ico/icon-arrow-down-12-bl-7b00808b9af7b76b8fd73e7b64c81ccf.svg); background-size: 1.2rem; background-position: right center;}

.ticket-list > li {display: flex; column-gap: 10px; position: relative; min-height: 14rem; padding-right: 1rem; border: 1px solid var(--gray03); border-radius: .4rem; cursor: pointer;}
.ticket-list > li::before {content: ''; width: 1.6rem; height: 1.6rem; border-width: 1px; border-style: solid; border-radius: 100%; border-color: var(--white01) var(--white01) var(--gray03) var(--gray03); background-color: var(--white01); border-radius: 100%; position: absolute; right: 4.8rem; top: -.8rem; transform: rotate(-45deg);}
.ticket-list > li::after {content: ''; width: 1.6rem; height: 1.6rem; border-width: 1px; border-style: solid; border-radius: 100%; border-color: var(--white01) var(--white01) var(--gray03) var(--gray03); background-color: var(--white01); border-radius: 100%; position: absolute; right: 4.8rem; bottom: -.8rem; transform: rotate(125deg);}
.ticket-list > li + li {margin-top: 1.2rem;}
.ticket-list > li .poster {width: 100px; background-repeat: no-repeat; background-size: 100% 100%; background-position: center; border-radius: .4rem 0 0 .4rem;}
.ticket-list > li .info {width: calc(100% - 100px - 20px - 34px); padding: 2rem 1rem 2rem 0;}
.ticket-list > li .info::before {content: ''; width: 1px; height: calc(100% - 2.6rem); border-right: 1px dashed var(--gray03); position: absolute; top: 50%; right: 5.6rem; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%);}
.ticket-list > li .info > span {display: block; margin-bottom: .8rem; font-size: 1.3rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.ticket-list > li .info > h6 {width: 100%; font-size: 1.5rem; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.ticket-list > li .info > ul {margin-top: 1.8rem; grid-gap: .8rem;}
.ticket-list > li .info > ul > li {position: relative; font-size: 1.3rem; color: var(--gray01); line-height: 1.4;}
.ticket-list > li .info > ul > li + li::before {content: ''; display: block; width: 1px; height: .8rem; background-color: var(--gray03); position: absolute; top: 50%; left: -.4rem; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%);}
.ticket-list > li .info .flex {flex-wrap: wrap; grid-gap: 0 .8rem;}
.ticket-list > li .info > p {font-size: 1.3rem; color: var(--gray01); line-height: 1.4; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.ticket-list > li > span {width: 34px; align-self: center; text-align: center; line-height: 1.4; font-size: 1.3rem; color: var(--gray01); font-weight: 500;}
.ticket-list + .more {width: fit-content; margin: 2rem auto 120px; padding: 0 2rem 0 0; text-align: center; font-size: 1.3rem; font-weight: 500; color: var(--gray01); background-image: url(/resource/img/ico/icon-arrow-down-16-ed8088d995a209f3643dad6f8e8faadd.svg);}

.tab-out {margin: 3.9rem 0 0; padding: 2rem 1.6rem 0; background-color: var(--white01);}
.tab-out ~ .tab-cont {margin-top: 0;}

.reserve-desc {background-color: var(--gray04); border: 1px solid var(--gray03); border-radius: .4rem; padding: 1.6rem 3rem; word-break: keep-all; text-align: center; font-size: 1.4rem; font-weight: 500; color: var(--gray01); line-height: 1.5;}
.reserve-desc-sub {margin-top: 2rem; height: 5.6rem; font-size: 1.3rem; color: var(--gray01); line-height: 1.5;}

/* 티켓 > 예매 상세 */
.reserve-info {margin-bottom: 1.6rem; display: flex; align-items: center; justify-content: space-between;}
.reserve-info p {font-size: 1.3rem; font-weight: 500; color: var(--gray01); margin-right: .8rem;}
.reserve-info > button {color: var(--black)!important;}

.reserve-ticket {position: relative; border: 1px solid var(--gray03); border-radius: .4rem; padding: 1.6rem;}
.reserve-ticket::before {content: ''; width: 1.6rem; height: 1.6rem; border-width: 1px; border-style: solid; border-radius: 100%; border-color: var(--white01) var(--white01) var(--gray03) var(--gray03); background-color: var(--white01); border-radius: 100%; position: absolute; left: -.8rem; bottom: 18rem; transform: rotate(-140deg);}
.reserve-ticket::after {content: ''; width: 1.6rem; height: 1.6rem; border-width: 1px; border-style: solid; border-radius: 100%; border-color: var(--white01) var(--white01) var(--gray03) var(--gray03); background-color: var(--white01); border-radius: 100%; position: absolute; right: -.8rem; bottom: 18rem; transform: rotate(45deg);}
.reserve-ticket .play {display: flex; align-items: center; margin-bottom: 2rem;}
.reserve-ticket .play .poster {width: 75px; height: 105px; margin-right: 12px; border-radius: 4px; background-repeat: no-repeat; background-size: 100% 100%; background-position: center;}
.reserve-ticket .play .info > span {display: block; margin-bottom: 4px; font-size: 13px;}
.reserve-ticket .play .info > h6 {width: 190px; font-size: 15px; line-height: 1.4; font-weight: 500; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; line-clamp: 2; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.reserve-ticket .play .info > ul {margin-top: 12px;}
.reserve-ticket .play .info > ul > li {position: relative; font-size: 13px; color: var(--gray01); line-height: 1.4;}
.reserve-ticket .play .info > ul > li + li::before {content: ''; display: block; width: 1px; height: 8px; background-color: var(--gray03); position: absolute; top: 50%; left: -.8rem; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%);}
.reserve-ticket .play .info > p {font-size: 13px; color: var(--gray01); line-height: 1.4;}
.reserve-ticket .state {border-top: 1px solid var(--gray03); padding: 2rem 0; text-align: center;}
.reserve-ticket .state > p {display: flex; align-items: center; justify-content: center; font-size: 1.5rem; font-weight: 500; color: var(--sac-red);}
.reserve-ticket .state > p > i {margin-right: .4rem;}
.reserve-ticket .state > p > span {color: var(--gray01); display: block;}
.reserve-ticket .state > p > span > span {font-weight: initial;}
.reserve-ticket .state > ul {display: flex; align-items: center; border: 1px solid var(--gray03); border-radius: .4rem; margin-top: 2rem;}
.reserve-ticket .state > ul > li {width: 50%;}
.reserve-ticket .state > ul > li + li {border-left: 1px solid var(--gray03);}
.reserve-ticket .state > ul > li > button {width: 100%; height: 4.8rem; color: initial; background-color: transparent;}
.reserve-ticket .state > ul > li:nth-child(1) > button {color: var(--gray01);}
.reserve-ticket .state > ul > li > button:disabled {color: var(--gray02)!important;}
.reserve-ticket > ul {border-top: 1px dashed var(--gray03); padding-top: 2rem;}
.reserve-ticket > ul > li {display: flex; align-items: center; justify-content: space-between; line-height: 1.8;}
.reserve-ticket > ul > li > span {font-size: 1.4rem; color: var(--gray01);}
.reserve-ticket > ul > li > p {font-size: 1.4rem; font-weight: 500;}
.reserve-ticket > ul > li > ul > li {position: relative; font-size: 1.4rem;}
.reserve-ticket > ul > li > ul > li + li::before {content: ''; display: block; width: 1px; height: .8rem; background-color: var(--gray03); position: absolute; top: 50%; left: -.8rem; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%);}

.pay-receipt + .pay-receipt {margin-top: 2rem; padding-top: 2rem; border-top: 1px solid var(--gray03);}
.pay-receipt > li {display: flex; align-items: center; justify-content: space-between;}
.pay-receipt > li + li {margin-top: 1.2rem;}
.pay-receipt > li > span {font-size: 1.4rem; color: var(--gray01);}
.pay-receipt > li > p {font-size: 1.4rem; font-weight: 500;}
.pay-receipt .total {margin-top: 2rem; padding-top: 2rem; border-top: 1px solid var(--gray03);}
.pay-receipt .total > p > span {font-size: 1.8rem; font-weight: 700;}

.pay-btn {display: flex; align-items: center; height: 4.8rem; margin-top: 2rem; border: 1px solid var(--gray03); border-radius: .4rem;}
.pay-btn > button {position: relative; width: 100%; height: 100%; font-size: 1.5rem; color: var(--black)!important; font-weight: 500;}
.pay-btn > button + button::before {content: ''; width: 1px; height: 100%; background-color: var(--gray03); display: block; position: absolute; left: 0;}
.pay-btn > button:first-child:nth-last-child(2), .pay-btn > button:first-child:nth-last-child(2) ~ button {width: 50%;}

.seat-info-list + button {margin-top: 1.2rem;}
.seat-info-list > li {position: relative; padding: 1.6rem; border: 1px solid var(--gray03); border-radius: .4rem;}
.seat-info-list > li + li {margin-top: 1.2rem;}
.seat-info-list > li::before {content: ''; width: 1.6rem; height: 1.6rem; border-width: 1px; border-style: solid; border-radius: 100%; border-color: var(--white01) var(--white01) var(--gray03) var(--gray03); background-color: var(--white01); border-radius: 100%; position: absolute; right: 4.8rem; top: -.8rem; transform: rotate(-45deg);}
.seat-info-list > li::after {content: ''; width: 1.6rem; height: 1.6rem; border-width: 1px; border-style: solid; border-radius: 100%; border-color: var(--white01) var(--white01) var(--gray03) var(--gray03); background-color: var(--white01); border-radius: 100%; position: absolute; right: 4.8rem; bottom: -.8rem; transform: rotate(125deg);}
.seat-info-list > li input[type='checkbox'] + label {width: 100%; justify-content: space-between;}
.seat-info-list > li input[type='checkbox'] + label::before {position: absolute; top: 50%; right: 1.8rem; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%);}
.seat-info-list > li input[type='checkbox']:disabled + label::before {content: none;}
.seat-info-list > li .seat-info {background-color: transparent; padding: 0; border-radius: 0;}
.seat-info-list > li .seat-info::before {content: ''; width: 1px; height: calc(100% - 2.6rem); border-right: 1px dashed var(--gray03); position: absolute; top: 50%; right: 5.6rem; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%);}
.seat-info-list > li .seat-info > li + li {margin-top: 1rem;}
.seat-info-list > li.cancel label > ul *{color: #C8C9CA;}
.seat-info-list > li.cancel label > span {display: flex; align-items: center; justify-content: center; width: 2.4rem; padding: 0; word-break: keep-all; font-size: 1.3rem; color: var(--sac-red); font-weight: 500;}

@media (prefers-color-scheme: dark) {
    .seat-info-list > li.cancel label > ul *{color: var(--gray01);}
}


/* 싹템 -------------------- */
.sactem-wrap {display: flex; flex-flow: column; width: 100vw; margin: -2rem 0 -3.4rem -1.6rem;}
.sactem-wrap .cont-box {padding: 1.6rem 1.6rem 3.4rem;}
.sactem-wrap .cont-box .box {position: relative;}
.sactem-wrap .cont-box .box + .box {margin-top: 3.6rem; padding-top: 2.8rem;}
.sactem-wrap .cont-box .box + .box::before {content: ''; width: 100vw; height: .8rem; position: absolute; top: 0; left: -1.6rem; background-color: var(--gray04);}

.sactem-summary {background-color: #1a1a1a; padding: 2rem 1.6rem; background-image: url(/resource/img/sactem-pattern-11a19f8ea83661d802497c9ae0c4b5b5.svg); background-repeat: no-repeat; background-size: cover; background-position: center top -.5rem;}
/* .sactem-summary .sactem-title {position: relative;}
.sactem-summary .sactem-title .bubble {position: absolute; top: 1.4rem; left: -1.4rem; width: 24.6rem; height: 8.3rem; padding: 2rem 3rem; font-size: 1.1rem; color: var(--gray01); word-break: keep-all; line-height: 1.4; background-image: url(/resource/img/ico/bubble-top-line3-22c98bf96cfc5f64944329087d1a7352.png); background-repeat: no-repeat; background-size: contain; background-position: center; z-index: 1;}
.sactem-summary h6 {font-size: 1.3rem; font-weight: 500; color: #fff; display: flex; align-items: center;}
.sactem-summary h6 > i {margin-left: .4rem;}
.sactem-summary .sac-level-wrap {display: flex; align-items: center; justify-content: center; flex-flow: column; margin-top: .8rem;}
.sactem-summary .sac-level-wrap .sac-level {width: 8.6rem; height: 8.6rem; font-size: 2.6rem; font-weight: 700; color: #fff; display: flex; align-items: center; justify-content: center; border-radius: 100%; border: .6rem solid rgba(255, 255, 255, .4);}
.sactem-summary .sac-level-wrap > p {font-size: 1.4rem; font-weight: 500; color: #fff; margin-top: 1rem;}
.sactem-summary .sac-level-wrap .sac-graph-wrap {width: 100%; margin-top: 3rem; display: flex; flex-flow: column; align-items: center; justify-content: center;}
.sactem-summary .sac-level-wrap .sac-graph-wrap .graph {width: 100%; height: 1.2rem; border-radius: 1rem; background-color: #81ADF1;}
.sactem-summary .sac-level-wrap .sac-graph-wrap .graph > span {display: block; height: 1.2rem; border-radius: 1rem; background-color: #fff;}
.sactem-summary .sac-level-wrap .sac-graph-wrap > ul {width: 100%; margin-top: .8rem; display: flex; align-items: center; justify-content: space-between;}
.sactem-summary .sac-level-wrap .sac-graph-wrap > ul > li {width: 4.8rem; text-align: center; font-size: 1.3rem; font-weight: 700; color: #fff;}
.sactem-summary .sac-level-wrap .sac-graph-wrap > ul > li:first-child {width: 2.4rem; text-align: left;}
.sactem-summary .sac-level-wrap .sac-graph-wrap > ul > li:last-child {width: 2.4rem; text-align: right;}
.sactem-summary .non-members {text-align: center; margin-top: 8rem;}
.sactem-summary .non-members > p {font-size: 1.4rem; font-weight: 500; color: #fff;}
.sactem-summary button {margin-top: 2rem; background-color: #fff; border-color: #fff; color: #1A1A1A;} */

.sactem-summary .graph-wrap {display: flex; align-items: center; flex-flow: column; row-gap: 1rem;}
.sactem-summary .graph-wrap > h4 {font-size: 1.8rem; color: #fff; font-weight: 700; display: flex; align-items: flex-end; line-height: 1.4;}
.sactem-summary .graph-wrap > h4 > p {padding-left: .6rem; font-size: 3rem; line-height: 1;}

.sactem-summary .graph-wrap .graph {position: relative; display: flex; align-items: center; justify-content: center; width: 13rem; height: 13rem; background-color: #1a1a1a; border-radius: 50%;}
.sactem-summary .graph-wrap .graph > div {position: absolute; transform: rotate(180deg); z-index: 1;}
.sactem-summary .graph-wrap .graph > p {font-size: 3rem; font-weight: 700; color: #fff;}
.sactem-summary .graph-wrap .graph > p > span {font-size: 2rem;}

.sactem-summary .graph-wrap .graph #per {width: 13rem; height: 13rem;}
.sactem-summary .graph-wrap .graph #per .donut-bg {stroke: #3C3328;}
.sactem-summary .graph-wrap .graph #per .donut-fill {stroke: #FFC379;}

.sactem-summary .graph-wrap .graph #exhibition {width: 13rem; height: 13rem;}
.sactem-summary .graph-wrap .graph #exhibition .donut-bg {stroke: #3C3A38;}
.sactem-summary .graph-wrap .graph #exhibition .donut-fill {stroke: #FFF0DF;}

.sactem-summary .graph-wrap .graph #music {width: 9.8rem; height: 9.8rem;}
.sactem-summary .graph-wrap .graph #music .donut-bg {stroke: #3C3328;}
.sactem-summary .graph-wrap .graph #music .donut-fill {stroke: #FFC379;}

.sactem-summary .graph-wrap .graph #concert {width: 6.6rem; height: 6.6rem;}
.sactem-summary .graph-wrap .graph #concert .donut-bg {stroke: #3C2324;}
.sactem-summary .graph-wrap .graph #concert .donut-fill {stroke: #FF535E;}

.sactem-summary > ul {display: grid; grid-template-columns: repeat(3, 1fr); background-color: #313131; border-radius: .4rem; margin-top: 1.6rem;}
.sactem-summary > ul > li {position: relative; display: flex; flex-flow: column; row-gap: .6rem; align-items: center; justify-content: center; padding: 2rem 0;}
.sactem-summary > ul > li + li::before {content: ''; width: 1px; height: 2rem; background-color: #888A8D; position: absolute; left: 0;}
.sactem-summary > ul > li > p {font-size: 2rem; font-weight: 700;}
.sactem-summary > ul > li > p::after {content: '%'; font-size: 1.4rem;}
.sactem-summary > ul > li > span {font-size: 1.3rem; color: #fff;}

.sactem-summary > ul > li:nth-child(1) > p {color: #FF535E;}
.sactem-summary > ul > li:nth-child(2) > p {color: #FFC379;}
.sactem-summary > ul > li:nth-child(3) > p {color: #FFF0DF;}

.sactem-summary > p {margin-top: 3rem; font-size: 1.4rem; text-align: center; line-height: 1.6; color: #888A8D; word-break: keep-all;}
.sactem-summary > p > span {color: #fff;}
.sactem-summary > button {margin: 3rem auto 0; height: 2.8rem; background-color: #fff; border-color: #fff; color: #1a1a1a;}

.sactem-summary .none-mem {display: flex; flex-flow: column; row-gap: 2rem; align-items: center; justify-content: center; padding: 5rem 0;}
.sactem-summary .none-mem > p { font-size: 1.4rem; font-weight: 500; color: #fff;}
.sactem-summary .none-mem > button {height: 2.8rem; background-color: #fff; border-color: #fff; color: #1a1a1a;}

/* 싹템 > 출석체크 */
.attend-wrap {margin: -2rem -1.6rem -3.6rem; padding: 7rem 1.6rem 16rem; background-color: #24647D; background-image: url(/resource/img/attendance-bg-04cbc1fca5e9a2b46d4e99d2bb81231b.svg); background-size: cover; background-position: center center;}
.attend-wrap > .title > h2 {text-align: center; font-size: 30px; font-weight: 700; color: #fff;}
.attend-wrap > .title > p {text-align: center; font-size: 17px; font-weight: 500; color: #fff; margin-top: 2rem;}
.attend-wrap .attend-cal-wrap {margin-top: 70px; background-color: #fff; border-radius: 4px; padding: 30px 20px;}
.attend-wrap .attend-cal-wrap .title {display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 20px;}
.attend-wrap .attend-cal-wrap .title > h4 {font-size: 28px; font-weight: 700; color: #1A1A1A;}
.attend-wrap .attend-cal-wrap .title > p {font-size: 13px; display: flex; align-items: center; color: #1A1A1A;}
.attend-wrap .attend-cal-wrap .title > p > span {width: 8px; height: 8px; border-radius: 100%; background-color: #FFF1E0; margin-right: 4px;}
.attend-wrap .attend-cal-wrap .attend-cal .day {display: grid; grid-template-columns: repeat(7, 1fr); grid-gap: 4px;}
.attend-wrap .attend-cal-wrap .attend-cal .day > li {text-align: center; font-size: 14px; color: #1A1A1A;}
.attend-wrap .attend-cal-wrap .attend-cal .month {margin-top: 20px; display: grid; grid-template-columns: repeat(7, 1fr); grid-gap: 4px; align-items: center;}
.attend-wrap .attend-cal-wrap .attend-cal .month > li {position: relative; height: 10.5vw; font-size: 16px; color: var(--gray01); font-weight: 600; display: flex; align-items: center; justify-content: center; z-index: 1;}
.attend-wrap .attend-cal-wrap .attend-cal .month > li.prev,
.attend-wrap .attend-cal-wrap .attend-cal .month > li.next {opacity: 0;}
.attend-wrap .attend-cal-wrap .attend-cal .month > li.today::before {content: ''; width: 42px; height: 42px; border-radius: 100%; background-color: #FFF1E0; z-index: -1!important; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}
.attend-wrap .attend-cal-wrap .attend-cal .month > li.attend::before {content: ''; width: 42px; height: 42px; border-radius: 100%; background-image: url(/resource/img/attend-seal-f1da15b26fb272bf88774c537469017e.svg); background-size: contain; background-position: center; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}
.attend-wrap > button {margin-top: 20px; background-color: var(--sac-new-blue); border-color: var(--sac-new-blue);}

/* 싹템 > 이벤트 */
.event-list {display: grid; grid-template-columns: repeat(1, 1fr); grid-gap: 1.6rem;}
.event-list > li .img {height: 34vw; border-radius: .4rem; background-repeat: no-repeat; background-size: cover; background-position: center;}
.event-list > li .info {margin-top: 1.2rem;}
.event-list > li .info > h6 {font-size: 1.5rem; font-weight: 500; width: calc(100vw - 3.2rem); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.event-list > li .info > span {display: block; margin-top: .8rem; font-size: 1.3rem; color: var(--gray01);}

@media screen and (min-width: 768px) {
    .event-list {grid-template-columns: repeat(2, 1fr);}
    .event-list > li .info > h6 {width: calc((100vw - 4.8rem) / 2);}
    .event-list > li .img {height: 17vw;}
}

.event-cont .img {height: 34vw; border-radius: .4rem; background-repeat: no-repeat; background-size: cover; background-position: center;}
.event-cont .info {margin-top: 1.2rem;}
.event-cont .info > h6 {font-size: 1.5rem; font-weight: 500; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.event-cont .info > span {display: block; margin-top: .8rem; font-size: 1.3rem; color: var(--gray01);}

.event-list-swiper-wrap {position: relative; height: fit-content;}
.event-list-swiper-wrap .event-list-swiper-btn {position: absolute; top: 0; width: 100%; height: 34vw;}
.event-list-swiper-wrap .event-list-swiper-btn .swiper-button-prev::after,
.event-list-swiper-wrap .event-list-swiper-btn .swiper-button-next::after {content: none;}
.event-list-swiper-wrap .event-list-swiper-btn .swiper-button-prev::before,
.event-list-swiper-wrap .event-list-swiper-btn .swiper-button-next::before {content: ''; width: 32px; height: 32px; border-radius: 100%; box-shadow: 2px 2px 8px rgba(26, 26, 26, 0.08); background-repeat: no-repeat; background-size: contain; background-position: center;}
.event-list-swiper-wrap .event-list-swiper-btn .swiper-button-prev {left: -8px; width: fit-content; height: fit-content; margin: 0; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%);}
.event-list-swiper-wrap .event-list-swiper-btn .swiper-button-next {right: -8px; width: fit-content; height: fit-content; margin: 0; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%);}
.event-list-swiper-wrap .event-list-swiper-btn .swiper-button-prev::before {background-image: url(/resource/img/ico/swiper-prev01-68351b6a2c64b124260ed739819e9d99.svg);}
.event-list-swiper-wrap .event-list-swiper-btn .swiper-button-next::before {background-image: url(/resource/img/ico/swiper-next01-02f5f84c02d410cbeb6931ce9ea26078.svg);}

@media (prefers-color-scheme: dark) {
}

.event-btn {display: flex; align-items: center; height: 5.2rem; margin-top: 2rem; border-radius: .4rem; background-color: var(--black);}
.event-btn > button {position: relative; width: 100%; height: 100%; background-color: var(--black); border-color: var(--black);  color: var(--white01)!important;}
.event-btn > button + button::before {content: ''; width: 1px; height: 1.2rem; background-color: var(--white01); display: block; position: absolute; left: 0;}
.event-btn > button:first-child:nth-last-child(2), .event-btn > button:first-child:nth-last-child(2) ~ button {width: 50%;}

.board .title > div {display: flex; align-items: center;}
.board .title > div > h6 {width: 100%; font-size: 1.5rem; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.board .title > div .label {margin-right: .8rem;}
.board .title > span {display: block; margin-top: .8rem; font-size: 1.3rem; color: var(--gray01);}
.board .cont {padding: 2rem 0 3.6rem; font-size: 1.4rem; line-height: 1.6;}
.board .cont > * + * {margin-top: 1.6rem;}
.board .cont img {width: 100%;}

.comments {width: 100vw; margin: 0 -1.6rem; padding: 2.4rem 1.6rem; border-top: .8rem solid var(--gray04);}
.comments > h4 {display: flex; align-items: center; font-size: 1.5rem; font-weight: 500; margin-bottom: 2rem;}
.comments > h4 > i {margin-right: .4rem;}
.comments > ul > li {padding-bottom: 2rem;}
.comments > ul > li + li {padding-top: 2rem; border-top: 1px solid var(--gray03);}
.comments > ul > li > p {font-size: 1.4rem; line-height: 1.6; word-break: keep-all; }
.comments > ul > li > p > i {margin-right: .4rem;}
.comments > ul > li > div {position: relative; display: flex; align-items: center; justify-content: space-between; margin-top: .8rem;}
.comments > ul > li > div > ul > li {position: relative; font-size: 1.2rem; color: var(--gray01);}
.comments > ul > li > div > ul > li + li::before {content: ''; display: block; width: 1px; height: .8rem; background-color: var(--gray03); position: absolute; top: 50%; left: -.8rem; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%);}
.comments > ul > li > div .report-layer {display: none; width: 8.2rem; min-height: 4.2rem; padding: .6rem 0; position: absolute; top: 1.8rem; right: 0; border: 1px solid var(--gray03); background-color: var(--white02); border-radius: .4rem; box-shadow: .3rem .3rem .6rem rgba(26, 26, 26, 0.06); z-index: 10;}
.comments > ul > li > div .report-layer button {width: 100%; height: 100%; padding: 1rem 0; font-size: 1.2rem;}
.comments > ul > li > div > i.active + .report-layer {display: block;}
.comments > ul > li:last-child:not(.more) {padding-bottom: 3.6rem;}
.comments > ul .more {padding-bottom: 6rem; border-top: none;}
.comments > ul .more > button {margin: 0 auto;}

.comments-btn {display: flex; align-items: center; justify-content: space-between; column-gap: .8rem;}
.comments-btn > button:nth-child(1) {width: 5.2rem; height: 5.2rem; border: 1px solid var(--gray03); border-radius: .4rem; background-color: transparent;}
.comments-btn > button:nth-child(2) {width: calc(100% - 6rem);}

.comments-input {display: flex; align-items: flex-end; justify-content: flex-end; position: relative;}
.comments-input textarea {width: 100%; overflow-y: hidden; height: initial; min-height: 4.8rem; padding-right: 7.8rem;}
.comments-input input[type='text'] {width: calc(100% - 11.8rem);}
.comments-input button {position: absolute; margin-bottom: 1rem; margin-right: 1rem;}

/* 싹템 > 깜짝미션 */
.mission-wrap {width: 100vw; margin: -2rem -1.6rem 0; padding: 2rem 1.6rem; background-repeat: no-repeat; background-size: cover; background-position: center;}
.mission-wrap .title {text-align: center; margin-bottom: 3rem;}
.mission-wrap .title > h6 {font-size: 1.8rem; font-weight: 500; color: #fff; line-height: 1.4; word-break: keep-all;}
.mission-wrap .title > span {display: block; margin-top: 1.2rem; font-size: 1.4rem; color: #fff;}
.mission-wrap .stamp {display: grid; grid-template-columns: repeat(5, 1fr); grid-gap: 1.6rem 1rem ;}
.mission-wrap .stamp > li {position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: calc((100vw - 7.2rem) / 5); border-radius: 100%; background-color: #fff; border: 1px dashed var(--sac-gold); font-size: 1.6rem; font-weight: 700; color: var(--gray01);}
.mission-wrap .stamp > li.on {border: 1px solid var(--sac-gold); background-repeat: no-repeat; background-size: 100% 100%; background-position: center; color: transparent;}
/* .mission-wrap .stamp > li.on::before {content: ''; width: 100%; height: 100%; border-radius: 100%; display: block; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%);} */
.mission-wrap .guide {width: 100%; padding: 3rem 0 2rem; margin-top: 4rem; text-align: center; background-color: #fff; border-radius: .4rem;}
.mission-wrap .guide > h6 {font-size: 1.6rem; font-weight: 500; color: #1A1A1A;}
.mission-wrap .guide > p {margin-top: 1rem; font-size: 1.4rem; line-height: 1.4; color: #1A1A1A; word-break: keep-all;}
.mission-wrap .guide > button {margin: 2rem auto 0; background-color: #1A1A1A; border-color: #1A1A1A;}

/* 싹템 > 깜짝미션 > QR코드 스캔 */
.qr-wrap {width: 100vw; height: 100vw; background-color: var(--opa-black); margin: -2rem -1.6rem 0; position: relative;}
.qr-scan {width: 12rem; height: 12rem; background-color: var(--opa-white); background-image: url(/resource/img/qr-line01-b845e91216bed84ffd313c747102d1f6.svg); background-repeat: no-repeat; background-size: contain; background-position: center; border-radius: .5rem; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}
.qr-desc {font-size: 1.6rem; color: var(--white01); font-weight: 500; text-align: center; line-height: 1.4; position: absolute; top: calc(50% + 10rem); left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}
.qr-guide {margin-top: 3.6rem; text-align: center;}
.qr-guide > h6 {font-size: 1.4rem; font-weight: 500;}
.qr-guide > p {margin-top: .8rem; font-size: 1.4rem; line-height: 1.4;}

/* 싹템 > 깜짝미션 > 비밀번호 입력 */
.mission-pw > li {font-size: 1.3rem; font-weight: 500; display: flex; align-items: center; column-gap: .8rem;}
.mission-pw > li + li {margin-top: .8rem;}
.mission-pw > li input[type='text'] {width: calc(100% - 11.8rem);}

/* 싹템 > 싹싹뱃지 */
.bedge-title {position: relative; margin-top: -1rem;}
.bedge-title > h6 {display: flex; align-items: center; justify-content: flex-end; margin-bottom: 1rem; font-size: 1.3rem; color: var(--gray01); font-weight: 500;}
.bedge-title > h6 > i {margin-left: .4rem;}
.bedge-title > h4 {font-size: 1.4rem; font-weight: 500; text-align: center;}
.bedge-title > p {font-size: 1.4rem; text-align: center; margin-top: .8rem;}
.bedge-title .bubble {position: absolute; top: 1.4rem; right: -1rem; width: 23.5rem; height: 8.5rem; padding: 2.8rem 2.6rem 2.8rem 2.2rem; font-size: 1.1rem; color: var(--gray01); line-height: 1.4; word-break: keep-all; background-image: url(/resource/img/ico/bubble-top-line2-5c70f488efd88d0e53a5e59c8ad8f127.png); background-repeat: no-repeat; background-size: contain; background-position: center; z-index: 1;}

.bedge-gauge {margin-top: 5.2rem;}
.bedge-gauge .bedge-level {width: 320px; height: 120px; margin: 0 auto; background-repeat: no-repeat; background-size: contain; background-position: center;}
.bedge-gauge .bedge-gauge-graph {margin-top: 2rem;}
.bedge-gauge .bedge-gauge-graph .title {display: flex; align-items: center; justify-content: space-between; font-size: 1.3rem;}
.bedge-gauge .bedge-gauge-graph .graph {margin-top: .8rem; width: 100%; height: 1rem; border-radius: 4rem; background-color: var(--gray03);}
.bedge-gauge .bedge-gauge-graph .graph > span {display: block; height: 1rem; background-color: #1E91A5; border-radius: 4rem;}

.bedge-wrap {display: grid; grid-template-columns: repeat(3, 1fr); row-gap: 3rem;}
.bedge-wrap > li {text-align: center;}
.bedge-wrap > li > div {width: 80px; height: 80px; margin: 0 auto; background-repeat: no-repeat; background-size: 100% 100%; background-position: center;}
.bedge-wrap > li > p {margin-top: 1rem; font-size: 14px; font-weight: 500;}

.bedge-layer {text-align: center;}
.bedge-layer .bedge-img {width: 17.5rem; height: 17.5rem; margin: 0 auto; background-repeat: no-repeat; background-position: center; background-size: 100%;}
.bedge-layer .bedge-cont {margin: 3rem 0;}
.bedge-layer .bedge-cont .bubble {width: 14rem; height: 5rem; margin: 0 auto; padding: 1.4rem .8rem 1.7rem .3rem; text-align: center; font-size: 1.2rem; color: #fff; background-image: url(/resource/img/ico/bubble-top-mint01-5f9f6a2e2f8f23305b4b048554fe43e2.png); background-repeat: no-repeat; background-size: contain; background-position: center;}
.bedge-layer .bedge-cont > h4 {font-size: 2.2rem; font-weight: 500;}
.bedge-layer .bedge-cont > p {margin-top: 1.6rem; font-size: 1.6rem; line-height: 1.6;}
.bedge-layer .bedge-cont .date {width: fit-content; height: 3rem; line-height: 3rem; margin: 2rem auto 0; padding: 0 1.6rem; background-color: var(--gray04); border-radius: 1.6rem; text-align: center; font-size: 1.4rem; font-weight: 500; color: var(--gray01);}
.bedge-layer .bedge-cont .date.end {color: #38637A; font-weight: 700;}

/* 싹템 > 싹싹뱃지 > 공연 */
#concert .bedge-level.level01 {background-image: url(/resource/img/bedge/concert/level/concert-level01-39fac23e340ad1ab5a37ea0ad913236e.svg);}
#concert .bedge-level.level02 {background-image: url(/resource/img/bedge/concert/level/concert-level02-825ceeff3135e4af274b7deafbe138f0.svg);}
#concert .bedge-level.level03 {background-image: url(/resource/img/bedge/concert/level/concert-level03-cd9dbb4e0f2afd57302b0ec65362f93b.svg);}
#concert .bedge-level.level04 {background-image: url(/resource/img/bedge/concert/level/concert-level04-9744c5f9f297e470584083317c26b569.svg);}
#concert .bedge-level.level05 {background-image: url(/resource/img/bedge/concert/level/concert-level05-cebb6286dab605e7d9c420cf31a0ca30.svg);}
#concert .bedge-level.level06 {background-image: url(/resource/img/bedge/concert/level/concert-level06-a08ba179b87bbf9cabd96695603b3a36.svg);}

#concert .bedge-img01 {background-image: url(/resource/img/bedge/concert/concert-badge-off01-0db68ae45c2c62c4f4b3b9f331d6ccd2.svg);}
#concert .bedge-img02 {background-image: url(/resource/img/bedge/concert/concert-badge-off02-8d93b1b6318ce7e6fda3d8da7d2d1f64.svg);}
#concert .bedge-img03 {background-image: url(/resource/img/bedge/concert/concert-badge-off03-bf78db55c2dbe4c02c5d0d9c79dfca5e.svg);}
#concert .bedge-img04 {background-image: url(/resource/img/bedge/concert/concert-badge-off04-f48c1de565ef3709f62855f54144a8a5.svg);}
#concert .bedge-img05 {background-image: url(/resource/img/bedge/concert/concert-badge-off05-eff6faf261ddd022bea3a0056c64f295.svg);}
#concert .bedge-img06 {background-image: url(/resource/img/bedge/concert/concert-badge-off06-af35b454ba676c76a7e6611d0c522c8e.svg);}
#concert .bedge-img07 {background-image: url(/resource/img/bedge/concert/concert-badge-off07-ddf44847317b32cb7e165864ba063ea3.svg);}
#concert .bedge-img08 {background-image: url(/resource/img/bedge/concert/concert-badge-off08-eabf661a472fcf73cfb66497846531b2.svg);}
#concert .bedge-img09 {background-image: url(/resource/img/bedge/concert/concert-badge-off09-ca13b30278fcbe3ad0c556ecc142a56a.svg);}
#concert .bedge-img01.on {background-image: url(/resource/img/bedge/concert/concert-badge01-f46fdd758ae8aa2bdd8fb29f7d57e82d.svg);}
#concert .bedge-img02.on {background-image: url(/resource/img/bedge/concert/concert-badge02-6c1f351a6dee5fdca86321f20da6d593.svg);}
#concert .bedge-img03.on {background-image: url(/resource/img/bedge/concert/concert-badge03-f221e64257cb5f5cd3243f7fedbe264f.svg);}
#concert .bedge-img04.on {background-image: url(/resource/img/bedge/concert/concert-badge04-edb8ba34d9e1be939bfd25328382e80e.svg);}
#concert .bedge-img05.on {background-image: url(/resource/img/bedge/concert/concert-badge05-0f08b268c23bb6023c876f5eb5d88676.svg);}
#concert .bedge-img06.on {background-image: url(/resource/img/bedge/concert/concert-badge06-89dd34777add01cb69b3d5fdd9d227e3.svg);}
#concert .bedge-img07.on {background-image: url(/resource/img/bedge/concert/concert-badge07-d890740853c2cd27e5226e5740b25f27.svg);}
#concert .bedge-img08.on {background-image: url(/resource/img/bedge/concert/concert-badge08-1a03b3894e59d671694f2440e50ed56a.svg);}
#concert .bedge-img09.on {background-image: url(/resource/img/bedge/concert/concert-badge09-987b8c15d4acd81e10ae15d957ebcb64.svg);}

@media (prefers-color-scheme: dark) {
    #concert .bedge-img01 {background-image: url(/resource/img/bedge/concert/concert-badge-off01-dark-541db6f5cfee42c5d42453cf33ed82a6.svg);}
    #concert .bedge-img02 {background-image: url(/resource/img/bedge/concert/concert-badge-off02-dark-4b5c29b6f31cbbd7f9a94ae1c01651b6.svg);}
    #concert .bedge-img03 {background-image: url(/resource/img/bedge/concert/concert-badge-off03-dark-87052d402c773bd043428d3ad73d4b23.svg);}
    #concert .bedge-img04 {background-image: url(/resource/img/bedge/concert/concert-badge-off04-dark-79859df546c824fa359bb7657bfa50eb.svg);}
    #concert .bedge-img05 {background-image: url(/resource/img/bedge/concert/concert-badge-off05-dark-ffd8ca3e846ca4665fd0f4290dd19b3d.svg);}
    #concert .bedge-img06 {background-image: url(/resource/img/bedge/concert/concert-badge-off06-dark-6aafb55e1e5149d32d1095fc0a8b7187.svg);}
    #concert .bedge-img07 {background-image: url(/resource/img/bedge/concert/concert-badge-off07-dark-5c09cdc3ea3c14ba7c3fb8cd4b0951e4.svg);}
    #concert .bedge-img08 {background-image: url(/resource/img/bedge/concert/concert-badge-off08-dark-26f7b5848e9be560c22a588a038f2865.svg);}
    #concert .bedge-img09 {background-image: url(/resource/img/bedge/concert/concert-badge-off09-dark-435aac759d0335a95a803f29a5652a42.svg);}
}


/* 싹템 > 싹싹뱃지 > 음악 */
#music .bedge-level.level01 {background-image: url(/resource/img/bedge/music/level/music-level01-9b70272a648b545d5b3ac631a2b133cf.svg);}
#music .bedge-level.level02 {background-image: url(/resource/img/bedge/music/level/music-level02-2ccb8a2f122403776d0cc3cf06208219.svg);}
#music .bedge-level.level03 {background-image: url(/resource/img/bedge/music/level/music-level03-0740f4cac4c01391c8e1b8148684505b.svg);}
#music .bedge-level.level04 {background-image: url(/resource/img/bedge/music/level/music-level04-f448769aee38f2468f7131f439fc7fbc.svg);}
#music .bedge-level.level05 {background-image: url(/resource/img/bedge/music/level/music-level05-6671f1c69dcb47b24f67a65772541486.svg);}
#music .bedge-level.level06 {background-image: url(/resource/img/bedge/music/level/music-level06-29fdf0fe3c78cf6f82645a88dd778ee6.svg);}

#music .bedge-img01 {background-image: url(/resource/img/bedge/music/music-badge-off01-444adbc3ec561f7897ad691e30b07aa7.svg);}
#music .bedge-img02 {background-image: url(/resource/img/bedge/music/music-badge-off02-2b770c9744565675ae00847c1598d83d.svg);}
#music .bedge-img03 {background-image: url(/resource/img/bedge/music/music-badge-off03-5e4cbaf311cf8dc2d3282ad2412a772b.svg);}
#music .bedge-img04 {background-image: url(/resource/img/bedge/music/music-badge-off04-16f798e3b23ca83f518210f8f962c20c.svg);}
#music .bedge-img05 {background-image: url(/resource/img/bedge/music/music-badge-off05-01445ed096ea41ae488b0509868de1db.svg);}
#music .bedge-img06 {background-image: url(/resource/img/bedge/music/music-badge-off06-07407d41ed1cbda73f2b244ab4fe3584.svg);}
#music .bedge-img07 {background-image: url(/resource/img/bedge/music/music-badge-off07-9c9d62ca13ed9135aae461ab6e9fe8da.svg);}
#music .bedge-img08 {background-image: url(/resource/img/bedge/music/music-badge-off08-642fa50346301ab3e04bdb29a28eaae7.svg);}
#music .bedge-img09 {background-image: url(/resource/img/bedge/music/music-badge-off09-828d7b28519f5e65641e7db636f512a7.svg);}
#music .bedge-img01.on {background-image: url(/resource/img/bedge/music/music-badge01-8b689439ba3caf30abe0476bcff51150.svg);}
#music .bedge-img02.on {background-image: url(/resource/img/bedge/music/music-badge02-f20bbfd0c0b633cb58f9dfd61a1d2f22.svg);}
#music .bedge-img03.on {background-image: url(/resource/img/bedge/music/music-badge03-53064d4174da542add1192a8a42c6cd0.svg);}
#music .bedge-img04.on {background-image: url(/resource/img/bedge/music/music-badge04-c569b5792eb861bf5fd9aeda751d11ac.svg);}
#music .bedge-img05.on {background-image: url(/resource/img/bedge/music/music-badge05-6cbdfdaf4dfa1d46df547124eebf8d5c.svg);}
#music .bedge-img06.on {background-image: url(/resource/img/bedge/music/music-badge06-20dcb9e74df1c95c834f7171342ff953.svg);}
#music .bedge-img07.on {background-image: url(/resource/img/bedge/music/music-badge07-8554343a3d8f7d995d5e87da71381301.svg);}
#music .bedge-img08.on {background-image: url(/resource/img/bedge/music/music-badge08-bf1fc1acbfdf71cf681e905f40498fae.svg);}
#music .bedge-img09.on {background-image: url(/resource/img/bedge/music/music-badge09-61150878388dfecdf2fdd80eb712f3f8.svg);}

@media (prefers-color-scheme: dark) {
    #music .bedge-img01 {background-image: url(/resource/img/bedge/music/music-badge-off01-dark-c9d48062030e9f606c39b866f43bf1a0.svg);}
    #music .bedge-img02 {background-image: url(/resource/img/bedge/music/music-badge-off02-dark-d827e182bf005ef553422d01ebfebb3b.svg);}
    #music .bedge-img03 {background-image: url(/resource/img/bedge/music/music-badge-off03-dark-01915f98c7f68d7fb348bac322e07900.svg);}
    #music .bedge-img04 {background-image: url(/resource/img/bedge/music/music-badge-off04-dark-74b120fcfa8c02eb49eb81d5f9e634c5.svg);}
    #music .bedge-img05 {background-image: url(/resource/img/bedge/music/music-badge-off05-dark-4e3d99956d6ea053321058c75c244d51.svg);}
    #music .bedge-img06 {background-image: url(/resource/img/bedge/music/music-badge-off06-dark-87413b10b56052783732a18db86a7ac7.svg);}
    #music .bedge-img07 {background-image: url(/resource/img/bedge/music/music-badge-off07-dark-d9e871ed484b255d9ca214e5a7259710.svg);}
    #music .bedge-img08 {background-image: url(/resource/img/bedge/music/music-badge-off08-dark-94220bc7b7888b23fc1d24b74de8f82b.svg);}
    #music .bedge-img09 {background-image: url(/resource/img/bedge/music/music-badge-off09-dark-491c04be3a7042d3a32722f18907ee04.svg);}
}

/* 싹템 > 싹싹뱃지 > 전시 */
#exhibition .bedge-level.level01 {background-image: url(/resource/img/bedge/exhibition/level/exhibition-level01-11525ec195672a9eabab0dad7badaac5.svg);}
#exhibition .bedge-level.level02 {background-image: url(/resource/img/bedge/exhibition/level/exhibition-level02-919a9a8fefc09247b9e8dc48667baf13.svg);}
#exhibition .bedge-level.level03 {background-image: url(/resource/img/bedge/exhibition/level/exhibition-level03-161fdb06006de4d93793ad82fba97a88.svg);}
#exhibition .bedge-level.level04 {background-image: url(/resource/img/bedge/exhibition/level/exhibition-level04-fd32421b4b7f98a49a1ea5729b744089.svg);}
#exhibition .bedge-level.level05 {background-image: url(/resource/img/bedge/exhibition/level/exhibition-level05-2ac659250ac3952784a9ac9432b18cd1.svg);}
#exhibition .bedge-level.level06 {background-image: url(/resource/img/bedge/exhibition/level/exhibition-level06-e0360cc83b56cc8e16819a3b8feee229.svg);}

#exhibition .bedge-img01 {background-image: url(/resource/img/bedge/exhibition/exhibition-badge-off01-4af65d18b084ba07e5b3bb0ee48e0107.svg);}
#exhibition .bedge-img02 {background-image: url(/resource/img/bedge/exhibition/exhibition-badge-off02-fcb10e73a90cacbadf683f17d82758e2.svg);}
#exhibition .bedge-img03 {background-image: url(/resource/img/bedge/exhibition/exhibition-badge-off03-a44a099faa14074842595ae4df67ebe0.svg);}
#exhibition .bedge-img04 {background-image: url(/resource/img/bedge/exhibition/exhibition-badge-off04-dca5088e631111692645eaa970690429.svg);}
#exhibition .bedge-img05 {background-image: url(/resource/img/bedge/exhibition/exhibition-badge-off05-f54ade3a84bf9a55e5f04bed96443603.svg);}
#exhibition .bedge-img06 {background-image: url(/resource/img/bedge/exhibition/exhibition-badge-off06-b1e89b7ec258da98a447b3f0334ba087.svg);}
#exhibition .bedge-img07 {background-image: url(/resource/img/bedge/exhibition/exhibition-badge-off07-e2d1f51ebc8b4d42d2989fe83386b8c1.svg);}
#exhibition .bedge-img08 {background-image: url(/resource/img/bedge/exhibition/exhibition-badge-off08-56482cee6b0dd1301278f62b62db4b4e.svg);}
#exhibition .bedge-img09 {background-image: url(/resource/img/bedge/exhibition/exhibition-badge-off09-14ae9567cdc9eab2ffdac36b3be9f1ab.svg);}
#exhibition .bedge-img01.on {background-image: url(/resource/img/bedge/exhibition/exhibition-badge01-5371cbb2c561b3930e3db6b05cad4032.svg);}
#exhibition .bedge-img02.on {background-image: url(/resource/img/bedge/exhibition/exhibition-badge02-a4082bce6fe65c03ccca5de0c7056655.svg);}
#exhibition .bedge-img03.on {background-image: url(/resource/img/bedge/exhibition/exhibition-badge03-7446400c6a365681dd866dbe8f4430fb.svg);}
#exhibition .bedge-img04.on {background-image: url(/resource/img/bedge/exhibition/exhibition-badge04-9c22358a56f0f34516581ec64008546a.svg);}
#exhibition .bedge-img05.on {background-image: url(/resource/img/bedge/exhibition/exhibition-badge05-ea4a01857cab0161a63cee3386330ab2.svg);}
#exhibition .bedge-img06.on {background-image: url(/resource/img/bedge/exhibition/exhibition-badge06-de9da12b1d1c0226b3ab0ec3e27796ca.svg);}
#exhibition .bedge-img07.on {background-image: url(/resource/img/bedge/exhibition/exhibition-badge07-748e4efb661c8817f577eab76ae631b4.svg);}
#exhibition .bedge-img08.on {background-image: url(/resource/img/bedge/exhibition/exhibition-badge08-57df69bcaa9da1cf93f7f7fd14e52d4f.svg);}
#exhibition .bedge-img09.on {background-image: url(/resource/img/bedge/exhibition/exhibition-badge09-ea858528b2d796f98dccf5c425fb2929.svg);}

@media (prefers-color-scheme: dark) {
    #exhibition .bedge-img01 {background-image: url(/resource/img/bedge/exhibition/exhibition-badge-off01-dark-39ba2eb197f573cf1b839e3071d6f0d7.svg);}
    #exhibition .bedge-img02 {background-image: url(/resource/img/bedge/exhibition/exhibition-badge-off02-dark-136448424fa7abd9a06a633e80d40356.svg);}
    #exhibition .bedge-img03 {background-image: url(/resource/img/bedge/exhibition/exhibition-badge-off03-dark-b210ffedab1ff6764ed3efc7bdc8d079.svg);}
    #exhibition .bedge-img04 {background-image: url(/resource/img/bedge/exhibition/exhibition-badge-off04-dark-039f967923443d0692ac8d3d3f54106b.svg);}
    #exhibition .bedge-img05 {background-image: url(/resource/img/bedge/exhibition/exhibition-badge-off05-dark-a2ee91d303a62ca79af9c58dbed68c0a.svg);}
    #exhibition .bedge-img06 {background-image: url(/resource/img/bedge/exhibition/exhibition-badge-off06-dark-a63e4536efc02fdbb986a6ac7cf059cd.svg);}
    #exhibition .bedge-img07 {background-image: url(/resource/img/bedge/exhibition/exhibition-badge-off07-dark-922090239e5369d4e1973b17e473d813.svg);}
    #exhibition .bedge-img08 {background-image: url(/resource/img/bedge/exhibition/exhibition-badge-off08-dark-003088ccb682088bf063848fc9bc8959.svg);}
    #exhibition .bedge-img09 {background-image: url(/resource/img/bedge/exhibition/exhibition-badge-off09-dark-6e51d56102b3ea1643fefe9f6f48d7e6.svg);}
}

/* 일간 일정 -------------------- */
.schedule-tab {display: grid; grid-template-columns: repeat(4, 1fr); width: 100vw; margin: -.4rem -1.6rem 0; padding-bottom: 1.6rem; border-bottom: 1px solid var(--gray03);}
.schedule-tab > li {text-align: center;}
.schedule-tab > li > i {background-repeat: no-repeat; background-size: auto 2.4rem; background-position: center; opacity: .5;}
.schedule-tab > li .img-opera {width: 3.2rem; height: 2.4rem; background-image: url(/resource/img/ico/img-opera-92eb940292a43d18454d6fae38ac802d.svg);}
.schedule-tab > li .img-music {width: 3.2rem; height: 2.4rem; background-image: url(/resource/img/ico/img-music-928e1cf1b1a93cc7218d055f908d414c.svg);}
.schedule-tab > li .img-hangaram {width: 3.2rem; height: 2.4rem; background-image: url(/resource/img/ico/img-hangaram-e206af1a52d3e69d9e3f187de8694f6a.svg);}
.schedule-tab > li > span {display: block; margin-top: .4rem; font-size: 15px; font-weight: 500; color: var(--gray01);}
.schedule-tab > li.active > span {color: var(--black);}
.schedule-tab > li.active > i {opacity: 1;}

.schedule-cont {display: none;}
.schedule-cont.active {display: block;}

.schedule-sub-tab {display: flex; align-items: center; margin: 0 -1.6rem; width: 100vw; overflow-x: auto}
.schedule-sub-tab > li {width: fit-content; padding: 1.2rem 1.6rem; font-size: 1.3rem; color: var(--gray01); font-weight: 500; white-space: nowrap;}
.schedule-sub-tab > li.active {color: initial;}
.schedule-sub-tab + .schedule-sub-tab {background-color: var(--gray04); border-top: 1px solid #ddd; margin-bottom: -.8rem;}

@media (prefers-color-scheme: dark) {
    .schedule-sub-tab > li.active {color: #fff;}
    .schedule-sub-tab + .schedule-sub-tab {border-color: var(--gray04);}
}

.schedule-sub-cont {display: none; width: 100vw; margin: 0 -1.6rem -3.4rem; padding: 1.6rem 1.6rem 0; border-top: .8rem solid var(--gray04);}
.schedule-sub-cont.active {display: block;}

/* 월간 일정 -------------------- */
/* schedule list */
.schedule-cal-wrap {display: flex; flex-flow: column; width: 100vw; height: calc(100vh - 4rem); margin: -2rem -1.6rem -3.4rem -1.6rem;}
.schedule-cal {padding: 2rem 1.6rem;}

.schedule-month-list {display: flex; flex-flow: column; position: absolute; width: 100vw; height: calc(100vh - 5rem); overflow: hidden; top: 38.3rem; left: 0; transition: top .2s ease; z-index: 5; background-color: var(--white01); border-radius: 3rem 3rem 0 0; box-shadow: 0 -.4rem 1.5rem rgba(26, 26, 26, 0.05);}
.schedule-month-list .schedule-list-handle {height: 5.1rem; background-image: url(/resource/img/ico/slide-up-89ac2736e3139ddd10d9ed201f7266ad.svg); background-repeat: no-repeat; background-size: 2.4rem; background-position: center top 1.6rem;}

.schedule-month-list .schedule-list-cont {width: 100%; height: calc(100% - 5.1rem); padding: 0 1.6rem 3.6rem; overflow: hidden;}
.schedule-play-list > li {display: flex; align-items: center;}
.schedule-play-list > li + li {margin-top: 1.6rem; padding-top: 1.6rem; border-top: 1px solid var(--gray03);}
.schedule-play-list > li .poster {width: 5rem; height: 7rem; margin-right: 1.2rem; border-radius: .2rem; display: block; background-repeat: no-repeat; background-size: 100% 100%; background-position: center;}
.schedule-play-list > li .info {width: calc(100% - 6.2rem);}
.schedule-play-list > li .info > h6 {font-size: 1.4rem; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.2;}
.schedule-play-list > li .info > ul {margin-top: 1.2rem;}
.schedule-play-list > li .info > ul > li {position: relative; font-size: 1.2rem; color: var(--gray01); line-height: 1.4;}
.schedule-play-list > li .info > ul > li + li::before {content: ''; display: block; width: 1px; height: .8rem; background-color: var(--gray03); position: absolute; top: 50%; left: -.8rem; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%);}
.schedule-play-list > li .info > p {font-size: 1.2rem; color: var(--gray01); line-height: 1.4;}

.schedule-month-list.active {top: 1rem;}
.schedule-month-list.active .schedule-list-cont {overflow: scroll;}

@media (prefers-color-scheme: dark) {
    .schedule-month-list {box-shadow: 0 -.4rem 1.5rem rgba(255, 255, 255, 0.05);}
}

/* full calendar style */
.schedule-cal .fc .fc-toolbar {display: block; position: relative;}
.schedule-cal .fc .fc-toolbar.fc-header-toolbar {margin-bottom: 2.4rem;}
.schedule-cal .fc .fc-toolbar-chunk:nth-child(1) {position: absolute; left: 0;}
.schedule-cal .fc .fc-toolbar-chunk:nth-child(2) {display: flex; align-items: center; justify-content: center; height: 2.5rem;}
.schedule-cal .fc .fc-today-button:disabled,
.schedule-cal .fc .fc-today-button {width: 4.6rem; height: 2.5rem; padding: .35rem 0; background-color: var(--gray03); border-radius: 3rem; border: none; font-size: 1.2rem; font-weight: 500; color: var(--black);}
.schedule-cal .fc .fc-toolbar-title {margin: 0 1.2rem!important; font-size: 2rem; font-weight: 700;}
.schedule-cal .fc .fc-prev-button,
.schedule-cal .fc .fc-next-button {width: 2rem; height: 2rem; background-color: transparent; border: none; margin: 0; padding: 0;}
.schedule-cal .fc .fc-button-primary:not(:disabled):active,
.schedule-cal .fc .fc-button-primary:not(:disabled).fc-button-active,
.schedule-cal .fc .fc-button-primary:not(:disabled).fc-button-active:focus,
.schedule-cal .fc .fc-button-primary:focus,
.schedule-cal .fc .fc-button-primary:hover {border: 0; border-color: transparent!important; background-color: transparent; box-shadow: none;}
.schedule-cal .fc .fc-button .fc-icon {display: block; width: 2rem; height: 2rem; line-height: initial; margin: 0; padding: 0;}
.schedule-cal .fc-direction-ltr .fc-toolbar > * > :not(:first-child) {margin: 0;}
.schedule-cal .fc .fc-icon-chevron-right::before {content: ''; display: block; width: 2rem; height: 2rem; background-image: url(/resource/img/ico/icon-arrow-right-20-5aa9f0c0721330f092c43ce411e0c43b.svg); background-repeat: no-repeat; background-size: contain; background-position: center;}
.schedule-cal .fc .fc-icon-chevron-left::before {content: ''; display: block; width: 2rem; height: 2rem; background-image: url(/resource/img/ico/icon-arrow-left-20-a22a3ddcedc6a809ec38ef7b0cf84d7d.svg); background-repeat: no-repeat; background-size: contain; background-position: center;}

.schedule-cal .fc .fc-view-harness {height: 29.4rem!important;}
.schedule-cal .fc .fc-view-harness-active > .fc-view {overflow: hidden;}
.schedule-cal .fc .fc-scroller-liquid-absolute {overflow: hidden!important; position: initial; top: initial; left: initial; bottom: initial; right: initial;}
.schedule-cal .fc table,
.schedule-cal .fc table th,
.schedule-cal .fc table td {border: none;}
.schedule-cal .fc-theme-standard th,
.schedule-cal .fc-theme-standard td {position: relative; height: 5rem;}
.schedule-cal .fc .fc-scrollgrid-section-body table {height: fit-content!important;}

.schedule-cal .fc .fc-col-header-cell-cushion {text-align: center; font-size: 1.2rem; font-weight: 500; height: 3.6rem; padding: 1.2rem;}

.schedule-cal .fc .fc-daygrid-day-frame {text-align: center; z-index: 1; font-size: 1.2rem; font-weight: 500; width: 3.6rem; height: 3.6rem; padding: 1.2rem; min-height: initial; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}
.schedule-cal .fc .fc-daygrid-day.fc-day-today {background-color: transparent;}
.schedule-cal .fc .fc-daygrid-day.fc-day-today::before {content: ''; z-index: 0; display: block; width: 3.6rem; height: 3.6rem; background-color: var(--gray03); border-radius: 1.8rem; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}
.schedule-cal .fc .fc-highlight {background-color: var(--sac-red); border-radius: 1.8rem; border: .2rem solid var(--sac-red);}
.schedule-cal .fc .fc-daygrid-day-top {display: block; text-align: center;}

.schedule-cal .fc .fc-daygrid-body-unbalanced .fc-daygrid-day-events {display: none;}
.schedule-cal .fc .fc-daygrid-day-number {padding: 0;}
.schedule-cal .fc .active .fc-daygrid-day-number {color: var(--white01);}

.schedule-cal .fc-license-message {display: none;}

@media (prefers-color-scheme: dark) {
    .schedule-cal .fc .fc-icon-chevron-right::before,
    .schedule-cal .fc .fc-icon-chevron-left::before {filter: invert(1);}
}

/* 연간 일정 -------------------- */
.schedule-controller {display: flex; align-items: center; justify-content: center; margin-bottom: 2.4rem;}
.schedule-controller > li {font-size: 2rem; font-weight: 700; line-height: 0;}
.schedule-controller > li + li {margin-left: 1.2rem;}

#all .schedule-year-wrap {height: calc(100vh - 18.3rem);}
.schedule-year-wrap {position: relative; height: calc(100vh - 25.7rem); padding-right: 1.4rem; overflow-y: auto;}
.schedule-year-title {font-size: 2rem; font-weight: 700; margin-bottom: 1rem;}
.schedule-year-list > li {display: flex; align-items: center; padding-bottom: 1.2rem;}
.schedule-year-list > li + li {padding-top: 1.2rem; border-top: 1px solid var(--gray03);}
.schedule-year-list > li .poster {width: 3rem; height: 4rem; border-radius: .2rem; margin-right: 1rem; background-repeat: no-repeat; background-size: 100% 100%; background-position: center;}
.schedule-year-list > li .info {width: calc(100% - 4rem);}
.schedule-year-list > li .info > h6 {font-size: 1.4rem; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.schedule-year-list > li .info span {font-size: 1.2rem; color: var(--gray01); margin-top: .8rem; display: block;}
.schedule-year-list > li .info .flex {margin-top: .8rem; grid-gap: .8rem;}
.schedule-year-list > li .info .flex > li {font-size: 1.2rem; color: var(--gray01); display: flex; align-items: center;}
.schedule-year-list > li .info .flex > li + li::before {content: ''; width: 1px; height: .8rem; display: block; background-color: var(--gray03); margin-right: .8rem;}

.schedule-quick-scroll {position: fixed; bottom: 0; right: 1.6rem; width: 1rem; height: calc(100vh - 22.1rem); display: flex; flex-flow: column; align-items: center; justify-content: space-between;}
.schedule-quick-scroll > li {font-size: .9rem; transform: scale(.9); height: calc(100% / 12);}
.schedule-quick-scroll > li > span {display: block; width: .5rem; height: .5rem; border-radius: 100%; background-color: var(--gray02);}

/* 전시회 별 일정 -------------------- */
.hall-tab {width: 100vw; margin: 0 -1.6rem; overflow-x: auto; height: 4rem; z-index: 10; display: flex; align-items: center; background-color: var(--white01); border-bottom: 1px solid var(--gray04); position: fixed; top: 0; z-index: 100; overflow-y: hidden;}
.hall-tab + .hall-cont {margin-top: 2rem;}
.hall-tab.scroll {top: -4rem;}
.hall-tab > li {text-align: center; font-size: 1.5rem; font-weight: 500; color: var(--gray01); padding: 0 1.6rem; white-space: nowrap;}
.hall-tab > li> span {position: relative; display: block; width: fit-content; height: 4rem; line-height: 4.2rem; margin: 0 auto; cursor: pointer;}
.hall-tab > li.active {color: var(--black); font-weight: 700;}
.hall-tab > li.active > span::before {content: ''; width: 100%; height: .2rem; display: block; background-color: var(--sac-red); position: absolute; bottom: 0;}

.hall-cont {display: none; margin-top: -2rem;}
.hall-cont.active {display: block;}
.hall-cont .cont-box + .cont-box {margin-top: 0;}

/* 전시회 별 일정 > 상단 배너 */
.swiper.hall-main-swiper {margin: 0 -1.6rem; padding-bottom: 5.8rem; width: 100vw; height: fit-content;}
.swiper.hall-main-swiper .img {width: 100vw; height: 58vw; background-repeat: no-repeat; background-size: cover; background-position: center;}
.swiper.hall-main-swiper .hall-poster {width: 100vw; height: 74.5vw; background-repeat: no-repeat; background-size: 100% auto; background-position: center; position: relative;}
.swiper.hall-main-swiper .hall-poster .poster-bg {display: block; width: 100vw; height: 100%; opacity: .6; position: absolute; top: 0; left: 0;}
.swiper.hall-main-swiper .hall-poster .poster {width: 17rem; height: 23.4rem; border-radius: .4rem; margin: 0 auto; background-repeat: no-repeat; background-size: 100% 100%; background-position: center; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}
.swiper.hall-main-swiper .info {padding: 1.2rem 1.6rem 0;}
.swiper.hall-main-swiper .info > h6 {font-size: 1.4rem; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.swiper.hall-main-swiper .info > p {font-size: 1.3rem; margin-top: .8rem; color: var(--gray01); font-weight: 500;}


.swiper.hall-main-swiper .swiper-pagination {bottom: 2rem;}
.swiper.hall-main-swiper .swiper-pagination .swiper-pagination-bullet {background-color: var(--gray01);}
.swiper.hall-main-swiper .swiper-pagination .swiper-pagination-bullet-active {background-color: var(--black);}

/* 전시회 별 일정 > 날짜별 공연 리스트 */
.month-tab {width: 100vw; margin: -2rem -1.6rem 0; overflow-x: auto; display: flex; align-items: center; background-color: var(--white01);}
.month-tab > li {font-size: 1.6rem; font-weight: 500; padding: 2rem; white-space: nowrap;}
.month-tab > li.past {color: var(--gray02);}
.month-tab > li.active {color: var(--sac-red);}

.day-tab {width: 100vw; margin: 0 -1.6rem; padding: .4rem 0 1.6rem; overflow-x: auto; display: flex; align-items: center; background-color: var(--white01);}
.day-tab > li {display: flex; flex-flow: column; justify-content: space-between; align-items: center; height: 4.7rem; padding: 0 1.6rem;}
.day-tab > li > p {font-size: 1.4rem; color: var(--gray01); font-weight: 500;}
.day-tab > li > span {position: relative; font-size: 1.6rem; font-weight: 500;}
.day-tab > li.active > span {color: #fff; z-index: 0;}
.day-tab > li.active > span::before {content: ''; display: block; width: 3.4rem; height: 3.4rem; border-radius: 100%; background-color: var(--sac-red); position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: -1;}

.day-schedule-wrap {background-color: var(--gray04); width: 100vw; margin: 0 -1.6rem; padding: 2rem 1.6rem;}

/* 전시회 별 일정 > 예술의전당 concert */
.concert-video {width: 100%; height: calc((100vw - 3.2rem) * .562); border-radius: .4rem; overflow: hidden;}
.concert-video iframe {width: 100%; height: 100%;}

.concert-insta {width: 100%; height: calc((100vw - 3.2rem - 2rem) / 3); border-radius: .4rem; overflow: hidden;}
.concert-insta .lightwidget__posts--grid {display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 1rem;}
.concert-insta .lightwidget__posts--grid .lightwidget__tile {max-width: 100%; border-radius: .4rem; overflow: hidden;}

/* 일정 > 검색 -------------------- */
.play-summary-sm > li {display: flex; align-items: center; padding-bottom: 1.2rem;}
.play-summary-sm > li + li {padding-top: 1.2rem; border-top: 1px solid var(--gray03);}
.play-summary-sm > li .poster {width: 3rem; height: 4rem; border-radius: .2rem; margin-right: 1rem; background-repeat: no-repeat; background-size: 100% 100%; background-position: center;}
.play-summary-sm > li .info {width: calc(100% - 4rem);}
.play-summary-sm > li .info > h6 {font-size: 1.4rem; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.play-summary-sm > li .info > span {display: block; margin-top: .8rem; font-size: 1.2rem; color: var(--gray01);}
.play-summary-sm > li.more {display: flex; align-items: center; justify-content: center; padding: 1.6rem 0; text-align: center; font-size: 1.3rem; font-weight: 500; color: var(--gray01); border-top: 1px solid var(--gray03); border-bottom:  1px solid var(--gray03); cursor: pointer;}
.play-summary-sm > li.more > i {margin-left: .4rem;}

/* 일정 > 공연 상세 -------------------- */
.play-poster {position: fixed; width: 100vw; top: .8rem; left: 0; height: 28rem; background-repeat: no-repeat; background-size: 100% auto; background-position: center;}
.play-poster .poster-bg {display: block; width: 100vw; height: 100%; opacity: .6; position: absolute; top: 0; left: 0;}
.play-poster .poster {width: 17rem; height: 23.4rem; border-radius: .4rem; margin: 0 auto; background-repeat: no-repeat; background-size: 100% 100%; background-position: center; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}

.play-info-wrap > i {display: none; margin: 3rem auto 0;}
.play-info-wrap.arrow {padding-bottom: 1.4rem; border-bottom: 1px solid var(--gray03);}
.play-info-wrap.arrow > i {display: none;}
.play-info-wrap.arrow > button {height: 2.8rem; margin: 2rem auto 0; padding: 0 1.2rem;}
.play-info-wrap.arrow > div:nth-of-type(n+4) {display: none;}
.play-info-wrap.arrow.active > i {transform: rotate(180deg); display: block;}
.play-info-wrap.arrow.active > button {display: none;}
.play-info-wrap.arrow.active > div:nth-of-type(n+4) {display: block;}

.play-info-wrap {position: relative; width: 100vw; margin: 26rem -1.6rem 0; padding: 2.4rem 1.6rem; z-index: 1; background-color: var(--white01); border-bottom: 1px solid var(--gray03);}
.play-info-wrap div + div {margin-top: 2rem; padding-top: 2rem; border-top: 1px solid var(--gray03);}
.play-info-wrap .summary > h4 {font-size: 1.8rem; font-weight: 700; line-height: 1.4;}
.play-info-wrap .summary .info {margin-top: 2rem; position: relative;}
.play-info-wrap .summary .info > li {display: flex; align-items: flex-start;}
.play-info-wrap .summary .info > li > span {display: block; width: 5.8rem; margin-right: 1.2rem; font-size: 1.4rem; line-height: 1.6; color: var(--gray01);}
.play-info-wrap .summary .info > li > p {flex: 1; font-size: 1.4rem; font-weight: 500; line-height: 1.6; display: flex; align-items: center; justify-content: space-between;}
.play-info-wrap .summary .info > li > p > span {font-size: 1.4rem; font-weight: 400; line-height: 1.6; display: flex; align-items: center;}
.play-info-wrap .summary .icon-wrap {height: 2.24rem; display: flex; align-items: center; column-gap: 1.4rem; position: absolute; right: 1.6rem; bottom: 0;}
.play-info-wrap .desc > h4 {font-size: 1.7rem; font-weight: 700; line-height: 1.4; margin-bottom: 1.6rem;}
.play-info-wrap .desc > p {font-size: 1.4rem; line-height: 1.6;}
.play-info-wrap .desc > ul > li {display: flex; align-items: center;}
.play-info-wrap .desc > ul > li + li {margin-top: 1.2rem;}
.play-info-wrap .desc > ul > li > span {display: block; width: 5.8rem; margin-right: 1.2rem; font-size: 1.4rem; color: var(--gray01);}
.play-info-wrap .desc > ul > li > p {font-size: 1.4rem;}
.play-info-wrap .desc > ul > li > p.link {padding-right: 1.6rem; background-image: url(/resource/img/ico/icon-arrow-right-12-gr-2eeebea278f2af95f3ba05d05d00fdef.svg); background-repeat: no-repeat; background-size: 1.2rem; background-position: right center; cursor: pointer;}

.play-tab {width: 100vw; margin: 0 -1.6rem; height: 4rem; z-index: 10; display: flex; align-items: center; background-color: var(--white01); border-bottom: 1px solid var(--gray04); position: sticky; top: .8rem;}
.play-tab > li {text-align: center; font-size: 1.5rem; font-weight: 500; color: var(--gray01);}
.play-tab > li > span {position: relative; display: block; width: fit-content; height: 4rem; line-height: 4.2rem; margin: 0 auto; cursor: pointer;}
.play-tab > li.active {color: var(--black); font-weight: 700;}
.play-tab > li.active > span::before {content: ''; width: 100%; height: .2rem; display: block; background-color: var(--sac-red); position: absolute; bottom: 0;}
.play-tab > li:first-child:nth-last-child(3), .play-tab > li:first-child:nth-last-child(3) ~ li {width: calc(100vw / 3);}

.play-wrap {display: none; margin: 0 -1.6rem; padding: 1.6rem 1.6rem 0; background-color: var(--white01); z-index: 1; position: relative;}
.play-wrap.active {display: block;}

.play-wrap .box {padding-bottom: 20px; overflow: hidden;}
.play-wrap .box + .box {margin-top: 0; border-top: 1px solid var(--gray03);}
.play-wrap .box .sub-title {margin-top: 0; padding-top: 2rem; background-color: var(--white01); z-index: 2;}

.play-wrap .box.more {padding-bottom: 2rem;}
.play-wrap .box.more:last-child {padding-bottom: 0;}
.play-wrap .box.more > i {display: block; margin: 2rem auto 0;}
.play-wrap .box.more > button {margin: 2rem auto 0; padding: 0 .8rem; height: 2.8rem; background-color: var(--white01); position: relative; z-index: 2}
.play-wrap .box.more.active > button::before {content: '간략히보기'; font-size: 1.2rem; font-weight: 500;}
.play-wrap .box.more.active > button > p {display: none;}
.play-wrap .box.more.active > button > i {background-image: url(/resource/img/ico/icon-arrow-up-16-bl02-937e400ad37c8331cb9d1ab0b7935548.svg);}
.play-wrap .box.more .play-cont {height: 11rem; overflow: hidden; position: relative; transform-origin: top left; z-index: 1;}
.play-wrap .box.more .play-cont.play-intro-cont {height: 52rem;}
.play-wrap .box.more .play-cont > * + * {margin-top: .8rem;}
.play-wrap .box.more .play-cont > h6 {font-size: 1.6rem; font-weight: 700; line-height: 1.6;}
.play-wrap .box.more .play-cont > h6 ~ h6 {margin-top: 2rem; padding-top: 2rem; border-top: 1px dashed var(--gray03);}
.play-wrap .box.more .play-cont > p {font-size: 1.4rem; line-height: 1.6;}
.play-wrap .box.more .play-cont > p + img {margin-top: 2rem;}
.play-wrap .box.more .play-cont > span {font-size: 1.3rem; line-height: 1.6; display: block; color: var(--gray01);}
.play-wrap .box.more .play-cont > span + img {margin-top: 2rem;}
.play-wrap .box.more .play-cont > ul > li {font-size: 1.4rem; line-height: 1.6; color: var(--gray01); display: flex; align-items: flex-start;}
.play-wrap .box.more .play-cont > ul > li span {display: block;  min-width: 10rem;}
.play-wrap .box.more .play-cont > ul > li strong {font-weight: 500;}
.play-wrap .box.more .play-cont .swiper {margin: 2rem 0; height: fit-content;}
.play-wrap .box.more .play-cont img {width: 100% !important; height: 100% !important; line-height: 0;}

.play-wrap .box.more.active > i {background-image: url(/resource/img/ico/icon-arrow-up-20-cfd370093a892cbd4d6f7154f40313d9.svg);}
.play-wrap .box.more.active .play-cont {height: max-content;}

.play-wrap .box.more + .box .main-title {margin-top: 3rem;}

.stats-graph {display: grid; align-items: center; column-gap: .8rem; grid-template-columns: 1.2fr 2fr;}
.stats-graph .gender {display: flex; align-items: center; justify-content: center; column-gap: 1.2rem;}
.stats-graph .gender > li {display: flex; flex-flow: column; row-gap: .4rem;}
.stats-graph .gender > li > p {font-size: 1rem; display: flex; align-items: center; column-gap: .2rem;}
.stats-graph .gender > li > p > span {font-size: 1.2rem; font-weight: 600;}
.stats-graph .graph {height: 12.4rem; display: flex; align-items: flex-end; padding-left: .8rem; border-left: 1px dashed var(--gray03); justify-content: center;}
.stats-graph .graph > li {width: 3.2rem; height: 100%; display: flex; flex-flow: column-reverse; align-items: center; position: relative;}
.stats-graph .graph > li::after {content: ''; width: 100%; height: 1px; background-color: var(--gray02); position: absolute; left: 0; bottom: 1.4rem;}
.stats-graph .graph > li > p {font-size: 1rem; color: var(--gray01);white-space: nowrap; margin-top: .4rem;}
.stats-graph .graph > li > div {height: 100%; display: flex; flex-flow: column-reverse; align-items: center; row-gap: .4rem;}
.stats-graph .graph > li > div > span {display: block; width: 1.6rem; background-color: var(--gray02); -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease;}
.stats-graph .graph > li > div > p {font-size: 1rem; font-weight: 500;}
.stats-graph .graph > li.focus > div > span {background-color: var(--sac-blue);}

.stats-graph02 {height: 35rem; margin-bottom: 3rem; border: 1px solid var(--gray03); border-radius: 2rem; background-color: var(--white01); box-shadow: .2rem .2rem .8rem 0 rgba(26, 26, 26, 0.05);}

.open-soon .flex > li {position: relative; display: flex; align-items: center;}
.open-soon .flex > li + li::before {content: ''; width: 1px; height: .8rem; display: block; background-color: #fff; position: absolute; left: -.8rem;}
.open-soon > div {display: flex; align-items: center; column-gap: .6rem;}

@media (prefers-color-scheme: dark) {
    .play-wrap .box.more.active > i {filter: invert(1);}
}

/* 일정 > 공연 상세 > 상세정보 */
.play-wrap .program-book {display: flex; align-items: center; justify-content: space-between; column-gap: 2rem;}
.play-wrap .program-book > button {width: 10.8rem;}
.play-wrap .program-book > p {width: calc(100% - 10.8rem - 2rem); font-size: 1.4rem; line-height: 1.6; word-break: keep-all;}
.play-wrap .play-video {width: 100%; height: calc((100vw - 3.2rem) * .562);}
.play-wrap .play-video iframe {width: 100%; height: 100%;}

.swiper.play-place-swiper {padding-bottom: 2rem; height: fit-content;}
.play-place-swiper .swiper-pagination-bullets.swiper-pagination-horizontal {bottom: 0; line-height: 0;}
.play-place-swiper .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {width: .6rem; height: .6rem; margin: 0 .4rem; opacity: 1; background-color: var(--gray01);}
.play-place-swiper .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet-active {background-color: var(--black);}

.swiper.play-floor-swiper {padding-bottom: 2rem;}
.play-floor-swiper img {height: fit-content;}
.play-floor-swiper .swiper-pagination-bullets.swiper-pagination-horizontal {bottom: 0; line-height: 0;}
.play-floor-swiper .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {width: .6rem; height: .6rem; margin: 0 .4rem; opacity: 1; background-color: var(--gray01);}
.play-floor-swiper .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet-active {background-color: var(--black);}

.play-seat-info {display: flex; align-items: flex-start; flex-wrap: wrap; margin: 1rem 0 2rem!important;}
.play-seat-info > li:nth-child(1):nth-last-child(1) {width: 100%;}
.play-seat-info > li {display: flex; flex-flow: column; width: 50%; padding-top: 1rem;}
.play-seat-info > li p {font-size: 1.4rem; color: var(--black); font-weight: 500;}
.play-seat-info > li ul > li {display: flex; align-items: center;}

/* 일정 > 공연 상세 > 관람평 */
.review-btn {margin-bottom: 2.4rem;}
.review-btn > p {text-align: center; font-size: 1.3rem; color: var(--gray01); line-height: 1.4; word-break: keep-all; margin-bottom: 1.2rem;}

.play-wrap .review-list {border-bottom: .8rem solid var(--gray04); width: 100vw; margin: 0 -1.6rem; padding: 0 1.6rem;}
.play-wrap .review-list + .review-list {margin-top: 2rem;}
.play-wrap .review-list .info {width: 100%;}
.play-wrap .review-list .info > div {position: relative; display: flex; align-items: center; justify-content: space-between;}
.play-wrap .review-list .info > div .flex {margin-top: .6rem; display: flex; align-items: center;}
.play-wrap .review-list .info > div .flex > li {position: relative; font-size: 1.2rem; color: var(--gray01);}
.play-wrap .review-list .info > div .flex > li + li::before {content: ''; display: block; width: 1px; height: .8rem; background-color: var(--gray03); position: absolute; top: 50%; left: -.8rem; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%);}
.play-wrap .review-list .info > div .report-layer {display: none; width: 8.2rem; height: 4.2rem; position: absolute; top: 1.8rem; right: 0; border: 1px solid var(--gray03); background-color: var(--white02); border-radius: .4rem; box-shadow: .3rem .3rem .6rem rgba(26, 26, 26, 0.06);}
.play-wrap .review-list .info > div .report-layer button {width: 100%; height: 100%; font-size: 1.2rem;}
.play-wrap .review-list .info > div > i.active + .report-layer {display: block;}

.play-wrap .review-list .cont > p {margin-top: 2rem; font-size: 1.3rem; line-height: 1.4;}
.play-wrap .review-list .cont .comment {margin-top: 1.2rem; background-color: var(--gray04); border-radius: .4rem; padding: 2rem 1.6rem;}
.play-wrap .review-list .cont .comment ul > li {position: relative; font-size: 1.2rem; color: var(--gray01);}
.play-wrap .review-list .cont .comment ul > li + li::before {content: ''; display: block; width: 1px; height: .8rem; background-color: var(--gray01); position: absolute; top: 50%; left: -.8rem; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%);}
.play-wrap .review-list .cont .comment > p {margin-top: .6rem; font-size: 1.3rem; line-height: 1.4;}
.play-wrap .review-list .reply {margin-top: 2rem; padding: 1.2rem 0; border-top: 1px solid var(--gray03); display: flex; align-items: center; justify-content: space-between;}
.play-wrap .review-list .reply > p {font-size: 1.3rem;}

/* 일정 > 공연 상세 > 시야보기 */
.seat-map {width: 100vw; height: calc(100vh - .8rem); margin: -2rem -1.6rem -3.4rem;}
.seat-view img {width: 100%;}
.seat-view p {padding: 2rem; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; font-weight: 500;}

/* 패키지 상세 -------------------- */
.package-wrap {background-color: var(--white01); margin: 0 -1.6rem; padding: 0 1.6rem; border-top: .8rem solid var(--gray04); position: relative; z-index: 1;}
.package-wrap .sub-title {margin-top: 0; padding-top: 2rem;}

.package-cont {font-size: 1.4rem; line-height: 1.6;}
.package-cont * + * {margin-top: 1rem;}
.package-cont * + h6 {margin-top: 1.6rem;}
.package-cont h6 {font-weight: 500;}
.package-cont h6 + * {margin-top: .2rem;}

/* 티켓북 -------------------- */
.ticketbook-controller {display: flex; align-items: center; justify-content: center; margin-bottom: 2.4rem;}
.ticketbook-controller > li {font-size: 2rem; font-weight: 700; line-height: 0;}
.ticketbook-controller > li + li {margin-left: 1.2rem;}

.ticketbook-cal-wrap {margin: 0 -1.6rem;}
.ticketbook-cal-wrap .day {display: grid; grid-template-columns: repeat(7, 1fr);}
.ticketbook-cal-wrap .day > li {font-size: 1.1rem; font-weight: 500; margin-bottom: 2rem; text-align: center;}
.ticketbook-cal-wrap .month {display: grid; grid-template-columns: repeat(7, 1fr); grid-gap: .2rem;}
.ticketbook-cal-wrap .month > li {position: relative; height: 20vw; padding: .6rem .8rem; background-color: var(--gray04); border-radius: .4rem; overflow: hidden;}
.ticketbook-cal-wrap .month > li.none {opacity: 0;}
.ticketbook-cal-wrap .month > li > span {display: block; font-size: 1.1rem; font-weight: 500;}
.ticketbook-cal-wrap .month > li > ul {position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; flex-wrap: wrap;}
.ticketbook-cal-wrap .month > li > ul > li {background-repeat: no-repeat; background-size: cover; background-position: center;}
.ticketbook-cal-wrap .month > li > ul > li:nth-child(1):nth-last-child(1) {width: 100%; height: 100%;}
.ticketbook-cal-wrap .month > li > ul > li:nth-child(1):nth-last-child(2), .ticketbook-cal-wrap .month > li > ul > li:nth-child(1):nth-last-child(2) ~ li {width: 100%; height: 50%;}
.ticketbook-cal-wrap .month > li > ul.horizon > li:nth-child(1):nth-last-child(2), .ticketbook-cal-wrap .month > li > ul.horizon > li:nth-child(1):nth-last-child(2) ~ li {width: 50%; height: 100%;}
.ticketbook-cal-wrap .month > li > ul > li:nth-child(1):nth-last-child(3) {width: 100%; height: 50%;}
.ticketbook-cal-wrap .month > li > ul > li:nth-child(1):nth-last-child(3) ~ li {width: 50%; height: 50%;}
.ticketbook-cal-wrap .month > li > ul > li:nth-child(1):nth-last-child(4), .ticketbook-cal-wrap .month > li > ul > li:nth-child(1):nth-last-child(4) ~ li {width: 50%; height: 50%;}

/* 티켓북 > 티켓 선택 */
.ticketbook-ticket-list > li {display: flex; align-items: center;}
.ticketbook-ticket-list > li + li {margin-top: 1.6rem; padding-top: 1.6rem; border-top: 1px solid var(--gray03);}
.ticketbook-ticket-list > li .poster {width: 4.6rem; height: 6.5rem; margin-right: 1.2rem; border-radius: .2rem; background-repeat: no-repeat; background-size: 100% 100%; background-position: center;}
.ticketbook-ticket-list > li .info {width: calc(100% - 5.8rem);}
.ticketbook-ticket-list > li .info h6 {font-size: 1.5rem; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.ticketbook-ticket-list > li .info ul {margin-top: 1.2rem;}
.ticketbook-ticket-list > li .info ul > li {position: relative; font-size: 1.3rem; line-height: 1.4; color: var(--gray01);}
.ticketbook-ticket-list > li .info ul > li + li::before {content: ''; display: block; width: 1px; height: .8rem; background-color: var(--gray03); position: absolute; top: 50%; left: -.8rem; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%);}
.ticketbook-ticket-list > li .info p {font-size: 1.3rem; line-height: 1.4; color: var(--gray01);}
.ticketbook-ticket-list > li.more {display: flex; align-items: center; justify-content: center; padding: 1.6rem 0; text-align: center; font-size: 1.3rem; font-weight: 500; color: var(--gray01); border-top: 1px solid var(--gray03); border-bottom:  1px solid var(--gray03); cursor: pointer;}
.ticketbook-ticket-list > li.more > i {margin-left: .4rem;}

.ticketbook-image-setting {display: flex; align-items: center; justify-content: flex-end; margin-top: 1.2rem; font-size: 1.5rem; font-weight: 500;}
.ticketbook-image-setting > i {margin-right: .4rem;}

/* 티켁북 > 티켓 선택 > 이미지 설정 */
.image-setting {display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; grid-gap: 1rem;}
.image-setting > h6 {font-size: 1.4rem; font-weight: 500;}
.image-setting > span {font-size: 1.3rem; color: var(--gray01);}
.image-setting > ul {width: 100%; margin-top: 1rem; display: flex; align-items: center; }

/* 티켓북 > 내 티켓 목록 > 이미지로 보기 */
.ticket-view-img {display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 2rem 1.2rem;}
.ticket-view-img > li {border: 1px solid var(--gray03); border-radius: .4rem; overflow: hidden;}
.ticket-view-img > li .poster {width: 100%; height: calc((128vw - 4.4rem) / 2); background-repeat: no-repeat; background-size: 100% 100%; background-position: center;}
.ticket-view-img > li .info {padding: 1.2rem;}
.ticket-view-img > li .info > h6 {font-size: 1.5rem; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.ticket-view-img > li .info > ul {margin-top: .8rem;}
.ticket-view-img > li .info > ul > li {position: relative; font-size: 1.3rem; color: var(--gray01);}
.ticket-view-img > li .info > ul > li + li::before {content: ''; display: block; width: 1px; height: .8rem; background-color: var(--gray03); position: absolute; top: 50%; left: -.8rem; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%);}

@media screen and (min-width: 768px) {
    .ticket-view-img {grid-template-columns: repeat(4, 1fr);}
    .ticket-view-img > li .poster {height: calc(((133vw - 3.2rem) / 4) - 3.6rem);}
    .ticket-view-img > li .info > h6 {width: calc(((100vw - 3.2rem) / 4) - 3.6rem);}
}

/* 티켓북 > 내 티켓 목록 > 리스트로 보기 */
.ticket-view-list > li {display: flex; align-items: center; position: relative; height: 100px; padding: 0 16px; border: 1px solid var(--gray03); border-radius: 4px; cursor: pointer;}
.ticket-view-list > li::before {content: ''; width: 16px; height: 16px; border-width: 1px; border-style: solid; border-radius: 100%; border-color: var(--white01) var(--white01) var(--gray03) var(--gray03); background-color: var(--white01); border-radius: 100%; position: absolute; right: 48px; top: -8px; transform: rotate(-45deg);}
.ticket-view-list > li::after {content: ''; width: 16px; height: 16px; border-width: 1px; border-style: solid; border-radius: 100%; border-color: var(--white01) var(--white01) var(--gray03) var(--gray03); background-color: var(--white01); border-radius: 100%; position: absolute; right: 48px; bottom: -8px; transform: rotate(125deg);}
.ticket-view-list > li + li {margin-top: 12px;}
.ticket-view-list > li .poster {width: 70px; height: 100%; background-repeat: no-repeat; background-size: 100% 100%; background-position: center; border-radius: 4px 0 0 4px; margin: -2px 12px -2px -16px; }
.ticket-view-list > li .info {width: calc(100% - 82px - 24px);}
.ticket-view-list > li .info::before {content: ''; width: 1px; height: calc(100% - 26px); border-right: 1px dashed var(--gray03); position: absolute; top: 50%; right: 56px; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%);}
.ticket-view-list > li .info > span {display: block; margin-bottom: 16px; font-size: 10px; font-weight: 500; color: var(--gray01);}
.ticket-view-list > li .info > h6 {width: 180px; font-size: 15px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.ticket-view-list > li .info > ul {margin-top: 8px;}
.ticket-view-list > li .info > ul > li {position: relative; font-size: 13px; color: var(--gray01); line-height: 1.4;}
.ticket-view-list > li .info > ul > li + li::before {content: ''; display: block; width: 1px; height: 8px; background-color: var(--gray03); position: absolute; top: 50%; left: -8px; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%);}
.ticket-view-list > li .date {width: 56px; margin-right: -16px; text-align: center; display: flex; align-items: center; justify-content: center; flex-flow: column;}
.ticket-view-list > li .date > span {font-size: 8px; font-weight: 500; margin-bottom: 4px;}
.ticket-view-list > li .date > h6 {font-size: 24px; font-weight: 700;}

/* 티켓북 > 티켓 추가 > 내 공연 불러오기 */
.ticketbook-my-ticket > li {position: relative; height: 140px; padding: 0 16px; border: 1px solid var(--gray03); border-radius: 4px;}
.ticketbook-my-ticket > li::before {content: ''; width: 16px; height: 16px; border-width: 1px; border-style: solid; border-radius: 100%; border-color: var(--white01) var(--white01) var(--gray03) var(--gray03); background-color: var(--white01); border-radius: 100%; position: absolute; right: 48px; top: -8px; transform: rotate(-45deg);}
.ticketbook-my-ticket > li::after {content: ''; width: 16px; height: 16px; border-width: 1px; border-style: solid; border-radius: 100%; border-color: var(--white01) var(--white01) var(--gray03) var(--gray03); background-color: var(--white01); border-radius: 100%; position: absolute; right: 48px; bottom: -8px; transform: rotate(125deg);}
.ticketbook-my-ticket > li + li {margin-top: 12px;}
.ticketbook-my-ticket > li .poster {width: 100px; height: 138px; background-repeat: no-repeat; background-size: 100% 100%; background-position: center; border-radius: 4px 0 0 4px; margin: -1px 12px -1px -16px; }
.ticketbook-my-ticket > li input + label::before {position: absolute; top: 50%; right: 18px; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%);}
.ticketbook-my-ticket > li .info::before {content: ''; width: 1px; height: calc(100% - 26px); border-right: 1px dashed var(--gray03); position: absolute; top: 50%; right: 56px; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%);}
.ticketbook-my-ticket > li .info > span {display:block; margin-bottom: 8px; font-size: 12px;}
.ticketbook-my-ticket > li .info > h6 {width: 160px; font-size: 15px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.ticketbook-my-ticket > li .info > ul {margin-top: 18px;}
.ticketbook-my-ticket > li .info > ul > li {position: relative; font-size: 13px; color: var(--gray01); line-height: 1.4;}
.ticketbook-my-ticket > li .info > ul > li + li::before {content: ''; display: block; width: 1px; height: 8px; background-color: var(--gray03); position: absolute; top: 50%; left: -8px; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%);}
.ticketbook-my-ticket > li .info > p {font-size: 13px; color: var(--gray01); line-height: 1.4;}

/* 티켓북 > 티켓 추가 > 정보 입력 */
.ticket-add-wrap .poster {position: relative; width: 290px; height: 406px; margin: 0 auto; border-radius: .4rem; background-repeat: no-repeat; background-size: 100% 100%; background-position: center;}
.ticket-add-wrap .poster.edit::before {content: ''; width: 100%; height: 100%; display: block; background-color: var(--opa-black); border-radius: .4rem;}
.ticket-add-wrap .poster.edit::after {content: '편집'; width: 7.6rem; height: 3.6rem; display: block; margin: 0 auto; background-color: var(--black); border-radius: 2rem; font-size: 1.5rem; font-weight: 500; color: var(--white01); text-align: center; line-height: 3.6rem; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}
.ticket-add-wrap .poster + button {margin: 1.6rem auto 0;}
.ticket-add-wrap .poster + .info {margin-top: 2rem;}
.ticket-add-wrap .info > li {font-size: 1.3rem; font-weight: 500;}
.ticket-add-wrap .info > li + li {margin-top: .8rem;}
.ticket-add-wrap .info > li > input, .ticket-add-wrap .info > li > select, .ticket-add-wrap .info > li > textarea {margin-bottom: 1.2rem;}
.ticket-add-wrap .info > li > button {margin: -.8rem auto 1.2rem; min-width: 6.8rem;}
.ticket-add-wrap .info .tag-wrap {display: flex; align-items: center; flex-wrap: wrap; grid-gap: .4rem .8rem; padding-top: .4rem;}
.ticket-add-wrap .info > li.link {display: flex; align-items: center; justify-content: space-between;}
.ticket-add-wrap .info > li.link > p {color: var(--gray01); cursor: pointer; line-height: 1;}
.ticket-add-wrap .info > li.link > p > i {width: 1.2rem; height: 1.2rem; background-image: url(/resource/img/ico/icon-arrow-right-12-gr-2eeebea278f2af95f3ba05d05d00fdef.svg); vertical-align: top;}

/* 티켓북 > 티켓 추가 > 편집 */
.ticket-add-category {margin: 0 -1.6rem; padding: 0 1.6rem;}
.ticket-add-category > li {display: flex; align-items: center; font-size: 1.4rem;}
.ticket-add-category > li + li {margin-top: 2rem;}
.ticket-add-category > li > i {margin-right: .8rem;}
.ticket-add-category > li > input[type="text"] {width: 24rem; height: 3.6rem; margin: -1rem 0;}
.ticket-add-category + .ticket-add-category {margin-top: 2.8rem; padding-top: 2.8rem; border-top: .8rem solid var(--gray04);}

@media (prefers-color-scheme: dark) {
    .ticket-add-category > li > i {filter: invert(.5);}
}

/* 티켓북 > 내 티켓 */
.my-ticket-swiper {position: relative;}
.my-ticket-swiper .swiper-button-prev,
.my-ticket-swiper .swiper-button-next {position: absolute; top: 0; width: 2.8rem; height: 2.8rem; margin: 0; color: transparent;}
.my-ticket-swiper .swiper-button-prev::after,
.my-ticket-swiper .swiper-button-next::after {content: none;}
.my-ticket-swiper .swiper-button-prev {left: 0;}
.my-ticket-swiper .swiper-button-next {right: 0;}
.my-ticket-swiper .swiper-button-prev::before {content: ''; display: block; width: 2.8rem; height: 2.8rem; background-image: url(/resource/img/ico/ticket-swiper-btn-prev-ov-2b8462b2fc1c13a96087ef574764d8e5.svg); background-repeat: no-repeat; background-size: contain; background-position: center;}
.my-ticket-swiper .swiper-button-next::before {content: ''; display: block; width: 2.8rem; height: 2.8rem; background-image: url(/resource/img/ico/ticket-swiper-btn-next-ov-0d702194f36cb09388979f2284883a24.svg); background-repeat: no-repeat; background-size: contain; background-position: center;}
.my-ticket-swiper .swiper-button-prev.swiper-button-disabled::before {background-image: url(/resource/img/ico/ticket-swiper-btn-prev-6d6e4466672c8feaa22edb25ce5bddaa.svg);}
.my-ticket-swiper .swiper-button-next.swiper-button-disabled::before {background-image: url(/resource/img/ico/ticket-swiper-btn-next-911c32fcf8b6bee2a6166490192dba7a.svg);}

@media (prefers-color-scheme: dark) {
    .my-ticket-swiper .swiper-button-prev::before {background-image: url(/resource/img/ico/ticket-swiper-btn-prev-ov-dark-882010c0046875e3f1565e05fefc9ed9.svg);}
    .my-ticket-swiper .swiper-button-next::before {background-image: url(/resource/img/ico/ticket-swiper-btn-next-ov-dark-4afcfd5d989e31794cdfd6f80b019c60.svg);}
    .my-ticket-swiper .swiper-button-prev.swiper-button-disabled::before {background-image: url(/resource/img/ico/ticket-swiper-btn-prev-dark-06f0e8f45de4ed593886859480f8aa47.svg);}
    .my-ticket-swiper .swiper-button-next.swiper-button-disabled::before {background-image: url(/resource/img/ico/ticket-swiper-btn-next-dark-9c99db17a585c0452ab2e2b3c316e8fa.svg);}
}

.my-ticket-swiper button {margin: 0 auto 2rem;}
.my-ticket-swiper .poster {width: 290px; height: 406px; margin: 0 auto; border-radius: .4rem; background-repeat: no-repeat; background-size: 100% 100%; background-position: center;}
.my-ticket-swiper .info {margin-top: 2rem;}
.my-ticket-swiper .info > li {display: flex; align-items: center; padding-bottom: 2rem; border-bottom: 1px solid var(--gray03);}
.my-ticket-swiper .info > li + li {padding-top: 2rem;}
.my-ticket-swiper .info > li > h6 {width: 9rem; font-size: 1.3rem; font-weight: 500;}
.my-ticket-swiper .info > li > p {font-size: 1.4rem; line-height: 1.4;}
.my-ticket-swiper .info > li ul.flex > li {position: relative; font-size: 1.4rem;}
.my-ticket-swiper .info > li ul.flex > li + li::before {content: ''; display: block; width: 1px; height: .8rem; background-color: var(--gray03); position: absolute; top: 50%; left: -.8rem; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%);}
.my-ticket-swiper .note {margin-top: 2rem;}
.my-ticket-swiper .note > li {display: flex; align-items: flex-start; flex-flow: column; row-gap: .8rem;}
.my-ticket-swiper .note > li + li {margin-top: 2rem;}
.my-ticket-swiper .note > li > h6 {font-size: 1.3rem; font-weight: 500;}
.my-ticket-swiper .note > li > p {width: 100%; min-height: 9.6rem; background-color: var(--gray04); border-radius: .4rem; font-size: 1.4rem; line-height: 1.6; padding: 1.2rem;}
.my-ticket-swiper .note .tag-wrap {margin-top: -.4rem; display: flex; align-items: center; flex-wrap: wrap;}
.my-ticket-swiper .note .tag-wrap > li {margin-right: .8rem; margin-top: .4rem;}

.my-ticket-option {justify-content: flex-end;}
.my-ticket-option > li {position: relative; font-size: 1.3rem; color: var(--gray01);}
.my-ticket-option > li + li::before {content: ''; display: block; width: 1px; height: .8rem; background-color: var(--gray03); position: absolute; top: 50%; left: -.8rem; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%);}

/* 티켓북 > 내 티켓 > 포토카드 */
.photo-ticket {position: relative; width: 340px; height: 538px; margin: 0 auto; border: 1px solid #E8E8E8; border-radius: 4px; background-color: #fff;}
.photo-ticket .poster {position: relative; width: 100%; overflow: hidden; border-radius: 4px; display: flex; flex-flow: column; align-items: center; justify-content: center; background-color: #E8E8E8;}
.photo-ticket .poster .img {width: 100%; height: 100%; border-radius: 4px; background-repeat: no-repeat; background-size: cover; background-position: center; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}
.photo-ticket .poster .poster-wrap {width: 100%; height: 100%; border-radius: 4px; background-repeat: no-repeat; background-size: cover; background-position: center; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}
.photo-ticket .poster .poster-wrap .poster-bg {display: block; width: 100%; height: 100%; opacity: .6; position: absolute; top: 0; left: 0;}
.photo-ticket .poster .poster-wrap .poster-img {width: 28.6rem; height: 36.6rem; margin: 0 auto; background-repeat: no-repeat; background-size: 100% 100%; background-position: center; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}
.photo-ticket .poster > i {margin-bottom: 36px;}
.photo-ticket .poster > p {font-size: 16px; color: #1a1a1a; text-align: center; line-height: 1.4;}
.photo-ticket .poster.edit::before {content: ''; display: block; width: 100%; height: 100%; background-color: rgba(0,0,0,.4); position: absolute; top: 0; left: 0; z-index: 1;}
.photo-ticket .poster.edit > button {width: fit-content; height: 2.8rem; padding: 0 1.2rem; font-size: 1.2rem; font-weight: 500; border-radius: 2rem; background-color: rgba(255, 255, 255, .3); color: #fff; border: 1px solid #fff; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: 2;}
.photo-ticket input[type="text"] {margin: 14px 0; border: 1px dashed #888A8D; height: 28px; padding: 0; border-radius: 0; text-align: center; font-size: 16px; color: #1a1a1a;}
.photo-ticket input[type="text"]::placeholder {color: #1a1a1a;}
.photo-ticket input[type="text"]:disabled {border: 0; font-weight: 500; color: #1a1a1a;}
.photo-ticket p.input {margin: 16px 0; padding: 6px; text-align: center; font-size: 16px; color: #1a1a1a;}
.photo-ticket p.input-space {margin: 16px 0; padding: 14px; text-align: center;}
.photo-ticket .info > h4 {color: #1a1a1a;}
.photo-ticket .info ul.flex {grid-gap: 8px 12px;}
.photo-ticket .info ul.flex > li {position: relative; font-size: 17px; font-weight: 600; color: #1a1a1a;}
.photo-ticket .info ul.flex > li + li::before {content: ''; display: block; width: 1px; height: 10px; background-color: #1a1a1a; position: absolute; top: 50%; left: -6px; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%);}
.photo-ticket .info > p {font-size: 16px; font-weight: 500; margin-top: 8px; color: #1a1a1a;}
.photo-ticket .logo {width: 84px; height: 16px; background-image: url(/resource/img/logo/sac-logo01-2c6bab144d5d6fece8dca1a188d3b764.png); background-repeat: no-repeat; background-size: contain; background-position: center;}
.photo-ticket i.icon-refresh {position: absolute; right: 12px; bottom: 12px;}

.photo-ticket.type01 {padding: 12px;}
.photo-ticket.type01 .poster {height: 283px;}
.photo-ticket.type01 .info {border-top: 1.5px solid #1a1a1a; border-bottom: 1.5px solid #1a1a1a; padding: 12px 0 16px;}
.photo-ticket.type01 .info > h4 {height: 52px; margin-bottom: 4px; font-size: 20px; font-weight: 700; line-height: 1.4;overflow: hidden; text-overflow: ellipsis; display: -webkit-box; line-clamp: 2; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.photo-ticket.type01 .logo {margin: 18px auto 0;}

.photo-ticket.type02 {padding: 6px;}
.photo-ticket.type02 .ticket-wrap {position: relative; border: 1px solid #444444; border-radius: 4px; padding: 12px 12px 16px;}
.photo-ticket.type02 .ticket-wrap::before {content: ''; width: 12px; height: 12px; border-width: 1px; border-style: solid; border-radius: 100%; border-color: #fff #fff #444444 #444444; background-color: #fff; border-radius: 100%; position: absolute; left: -6px; top: 341px; transform: rotate(-140deg);}
.photo-ticket.type02 .ticket-wrap::after {content: ''; width: 12px; height: 12px; border-width: 1px; border-style: solid; border-radius: 100%; border-color: #fff #fff #444444 #444444; background-color: #fff; border-radius: 100%; position: absolute; right: -6px; top: 341px; transform: rotate(45deg);}
.photo-ticket.type02 .poster {height: 280px;}
.photo-ticket.type02 .info {border-top: 1px dashed #444444; padding-top: 12px;}
.photo-ticket.type02 .info > h4 {height: 52px; margin-bottom: 4px; font-size: 20px; font-weight: 700; line-height: 1.4; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; line-clamp: 2; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.photo-ticket.type02 .logo {margin: 18px auto 0;}

.photo-ticket.type03 {padding: 12px;}
.photo-ticket.type03 .poster {height: 450px;}
.photo-ticket.type03 .info {margin-top: 16px;}
.photo-ticket.type03 .info > h4 {font-size: 16px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-bottom: 10px;}
.photo-ticket.type03 .info ul.flex > li {font-size: 15px; font-weight: 500;}
.photo-ticket.type03 .info .logo-wrap {display: flex; align-items: center; justify-content: space-between;}

/* 티켓북 > 내 티켓 > 포토카드(2배) */
.photo-ticket.size-up {width: 648px; height: 1032px;border: 2px solid #E8E8E8; border-radius: 8px;}
.photo-ticket.size-up .poster {border-radius: 8px;}
.photo-ticket.size-up .poster-wrap {border-radius: 8px;}
.photo-ticket.size-up .poster-wrap .poster-img {width: 57.3rem; height: 73.3rem;}
.photo-ticket.size-up .poster > i {width: 126px; height: 126px; margin-bottom: 72px;}
.photo-ticket.size-up .poster > p {font-size: 32px;}
.photo-ticket.size-up .poster.edit > button {height: 5.6rem; padding: 0 2.4rem; font-size: 2.4rem; border-radius: 4rem;}
.photo-ticket.size-up input[type="text"] {margin: 24px 0; border: 2px dashed #888A8D; height: 56px; font-size: 32px;}
.photo-ticket.size-up p.input {margin: 24px 0; padding: 12px; font-size: 32px;}
.photo-ticket.size-up p.input-space {margin: 24px 0; padding: 28px;}
.photo-ticket.size-up .info ul.flex {grid-gap: 16px 24px;}
.photo-ticket.size-up .info ul.flex > li {font-size: 34px;}
.photo-ticket.size-up .info ul.flex > li + li::before {content: ''; display: block; width: 2px; height: 20px; background-color: #1a1a1a; position: absolute; top: 50%; left: -12px; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%);}
.photo-ticket.size-up .info > p {font-size: 32px; margin-top: 14px;}
.photo-ticket.size-up .logo {width: 168px; height: 32px;}
.photo-ticket.size-up i.icon-refresh {right: 24px; bottom: 24px;}

.photo-ticket.type01.size-up {padding: 20px;}
.photo-ticket.type01.size-up .poster {height: 566px;}
.photo-ticket.type01.size-up .info {border-top: 3px solid #1a1a1a; border-bottom: 3px solid #1a1a1a; padding: 24px 0 32px;}
.photo-ticket.type01.size-up .info > h4 {height: 100px; margin-bottom: 24px; font-size: 40px; line-height: 1.3;}
.photo-ticket.type01.size-up .logo {margin: 20px auto 0;}

.photo-ticket.type02.size-up {padding: 16px;}
.photo-ticket.type02.size-up .ticket-wrap {border: 2px solid #444444; border-radius: 8px; padding: 16px 16px 32px;}
.photo-ticket.type02.size-up .ticket-wrap::before {width: 32px; height: 32px; border-width: 2px; left: -17px; top: 666px;}
.photo-ticket.type02.size-up .ticket-wrap::after {width: 32px; height: 32px; border-width: 2px; right: -17px; top: 666px;}
.photo-ticket.type02.size-up .poster {height: 560px;}
.photo-ticket.type02.size-up .info {border-top: 2px dashed #444444; padding-top: 24px;}
.photo-ticket.type02.size-up .info > h4 {height: 100px; margin-bottom: 18px; font-size: 40px; line-height: 1.3;}
.photo-ticket.type02.size-up .logo {margin: 20px auto 0;}

.photo-ticket.type03.size-up {padding: 20px;}
.photo-ticket.type03.size-up .poster {height: 900px;}
.photo-ticket.type03.size-up .info > h4 {font-size: 32px; margin-bottom: 12px;}
.photo-ticket.type03.size-up .info ul.flex > li {font-size: 30px;}

.photo-ticket.back.size-up {padding: 20px; height: 1032px;}

/* 티켓북 > 내 티켓 > 포토카드 타입 선택 */
/* photo ticket swiper */
.photo-ticket-swiper {width: 100vw; margin: 0 -1.6rem!important;}
.photo-ticket-swiper .swiper-slide {width: fit-content; padding: 1.6rem .8rem;}
.photo-ticket-swiper + button {width: 6.8rem; margin: .4rem auto 0;}

.photo-ticket-swiper .photo-ticket {width: 260px; height: 410px;}
.photo-ticket-swiper .photo-ticket .poster > i {width: 48px; height: 48px; margin-bottom: 24px;}
.photo-ticket-swiper .photo-ticket .poster > p {font-size: 12px;}
.photo-ticket-swiper .photo-ticket input[type="text"] {margin: 10px 0; height: 22px; font-size: 12px;}
.photo-ticket-swiper .photo-ticket .info ul.flex > li {font-size: 12px;}
.photo-ticket-swiper .photo-ticket .info > p {font-size: 12px; margin-top: 6px;}
.photo-ticket-swiper .photo-ticket .logo {width: 64px; height: 12px;}

.photo-ticket-swiper .photo-ticket.type01 .poster {height: 216px;}
.photo-ticket-swiper .photo-ticket.type01 .info {padding: 10px 0;}
.photo-ticket-swiper .photo-ticket.type01 .info > h4 {height: 40px; font-size: 14px;}
.photo-ticket-swiper .photo-ticket.type01 .logo {margin: 13px auto 0;}

.photo-ticket-swiper .photo-ticket.type02 .ticket-wrap::before {top: 256px;}
.photo-ticket-swiper .photo-ticket.type02 .ticket-wrap::after {top: 256px;}
.photo-ticket-swiper .photo-ticket.type02 .poster {height: 207px;}
.photo-ticket-swiper .photo-ticket.type02 .info {border-top: 1px dashed var(--gray03); padding-top: 10px;}
.photo-ticket-swiper .photo-ticket.type02 .info > h4 {height: 40px; font-size: 14px;}
.photo-ticket-swiper .photo-ticket.type02 .logo {margin: 13px auto 0;}

.photo-ticket-swiper .photo-ticket.type03 .poster {height: 342px;}
.photo-ticket-swiper .photo-ticket.type03 .info {margin-top: 10px;}
.photo-ticket-swiper .photo-ticket.type03 .info > h4 {font-size: 14px; margin-bottom: 6px;}
.photo-ticket-swiper .photo-ticket.type03 .info .logo-wrap {display: flex; align-items: center; justify-content: space-between;}

.photo-ticket-choice-guide {text-align: center;}
.photo-ticket-choice-guide > h4 {font-size: 2rem; line-height: 1.2;}
.photo-ticket-choice-guide > p {font-size: 1.4rem; margin-top: 1.6rem; line-height: 1.4;}

/* 티켓북 > 내 티켓 > 포토카드 > 앞면 미리보기 */
.photo-ticket.preview {padding: 0;}
.photo-ticket.preview .poster {height: 100%;}

/* 티켓북 > 내 티켓 > 포토카드 > 뒷면 */
.photo-ticket.back {padding: 12px; height: 538px;}
.photo-ticket.back .poster {height: 100%;}

/* 티켓북 > 내 티켓 > 포토카드 > 뒷면 > 이미지/포스터 */
.photo-ticket-img-zip {display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: .8rem;}
.photo-ticket-img-zip > li {width: 100%; height: calc((132vw - 4.8rem) / 3); border-radius: .4rem; background-repeat: no-repeat; background-size: 100% 100%; background-position: center;}

.poster-reg {width: 100%; height: 10.6rem; padding: 2.4rem 0 3.4rem; display: flex; align-items: center; justify-content: center; column-gap: 5.4rem; position: fixed; bottom: 0; background-color: var(--white01);}
.poster-reg > li {font-size: 1.6rem;}
.poster-reg > li.active {color: var(--sac-red); font-weight: 500;}

@media screen and (min-width: 768px) {
    .photo-ticket-img-zip {grid-template-columns: repeat(6, 1fr);}
    .photo-ticket-img-zip > li {height: calc((132vw - 7.2rem) / 6);}
}

/* 티켓북 > 내 티켓 > 포토카드 > 결제(티켓 미리보기) */
.ticket-rotate-tab {margin-top: 2rem; display: flex; align-items: center; justify-content: center;}
.ticket-rotate-tab > li {font-size: 1.6rem;}
.ticket-rotate-tab > li.active {color: var(--sac-red); font-weight: 500;}
.ticket-rotate-tab > li + li {margin-left: 7rem;}

.ticket-rotate {position: relative; width: 340px; height: 538px; margin: 0 auto; perspective: 900px; overflow: hidden;}
.ticket-rotate .photo-ticket {position: absolute; transition: transform .3s ease;}
.ticket-rotate .photo-ticket.preview,
.ticket-rotate .photo-ticket.type01,
.ticket-rotate .photo-ticket.type02,
.ticket-rotate .photo-ticket.type03 {z-index: 1;}
.ticket-rotate .photo-ticket.back {z-index: 0; padding: 0!important;}
.ticket-rotate .photo-ticket.back .poster {transform: scaleX(-1);}

.ticket-rotate.active .photo-ticket.preview,
.ticket-rotate.active .photo-ticket.type01,
.ticket-rotate.active .photo-ticket.type02,
.ticket-rotate.active .photo-ticket.type03 {transform: rotateY(-180deg); transition: transform 0.3s ease; z-index: 0;}
.ticket-rotate.active .photo-ticket.back {transform: rotateY(-180deg); transition: transform 0.3s ease; z-index: 1;}

/* 티켓북 > 내 티켓 > 포토카드 > 결제 */
.photo-ticket-receipt {margin-top: 1.6rem; margin-bottom: 3.6rem; background-color: var(--black); border-radius: .4rem; padding: 2.4rem 1.6rem; color: #fff;}
.photo-ticket-receipt ul > li {display: flex; align-items: center; justify-content: space-between; font-size: 1.3rem;}
.photo-ticket-receipt ul > li + li {margin-top: 1rem;}
.photo-ticket-receipt ul > li.total {font-weight: 700; margin-top: 2rem;}
.photo-ticket-receipt ul > li.total .sum {font-size: 1.5rem;}

.complete-receipt {padding: 1.6rem; border-top: 1px solid var(--gray03); border-bottom: 1px solid var(--gray03);}
.complete-receipt > li {display: flex; align-items: center; justify-content: space-between; font-size: 1.5rem; line-height: 1.8;}

@media (prefers-color-scheme: dark) {
    .photo-ticket-receipt {background-color: var(--gray03);}
}

/* 티켓북 > 마이아트 데이터 */
.stats-controller {display: flex; align-items: center; justify-content: center; margin-bottom: 2.4rem;}
.stats-controller > li {font-size: 2rem; font-weight: 700; line-height: 0;}
.stats-controller > li + li {margin-left: 1.2rem;}

.stats-controller ~ .box + .box,
.stats-period ~ .box + .box {border-top: .8rem solid var(--gray04); margin: 3.6rem -1.6rem 0; padding: 2.8rem 1.6rem 0;}

.stats-title h2 {font-size: 2rem; font-weight: 500; margin-top: .8rem; margin-bottom: 2.4rem;}
.stats-title h4 {text-align: center; font-size: 1.8rem; margin-top: .8rem; margin-bottom: 2rem;}

.stats-data {display: flex; align-items: center; background-color: var(--gray04); border-radius: .8rem; padding: 1.8rem;}
.stats-data + * {margin-top: 3rem;}
.stats-data > li:nth-child(1):nth-last-child(2), .stats-data > li:nth-child(1):nth-last-child(2) ~ li {width: 50%;}
.stats-data > li {position: relative; display: flex; flex-flow: column; align-items: center; justify-content: center; row-gap: .8rem;}
.stats-data > li + li::before {content: ''; width: 1px; height: 3.4rem; background-color: var(--gray03); position: absolute; left: 0; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%);}
.stats-data > li > span {font-size: 1.3rem; color: var(--gray01);}
.stats-data > li > p {font-size: 24px; font-weight: 700;}

.month-bar-graph-wrap {display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 10px;}
.month-bar-graph-wrap > li {display: flex; flex-flow: column; align-items: center; justify-content: center; row-gap: 1rem;}
.month-bar-graph-wrap > li .month-bar-graph {position: relative; width: 10px; height: 13.8rem; border-radius: 8px; background-color: var(--gray04);}
.month-bar-graph-wrap > li .month-bar-graph > span {display: block; width: 10px; border-radius: 8px; background-color: #AECEFB; position: absolute; bottom: 0; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%);}
.month-bar-graph-wrap > li > p {font-size: 15px; font-weight: 700;}

.stats-period {margin: 0 -1.6rem 3.6rem; padding: 1rem 1.6rem; background-color: var(--gray04); display: flex; align-items: center; justify-content: space-between;}
.stats-period .tag {background-color: var(--white01); border: none; font-size: 13px; font-weight: 500; box-shadow: 1px .2rem 0 rgba(0, 0, 0, 0.06);}
.stats-period > a {font-size: 13px; color: var(--black); font-weight: 500;}

.chart-custom .chart-circle {display: flex; align-items: center; justify-content: center;}
.chart-custom .chart-circle .c3-chart-arc path {stroke: none;}
.chart-custom .chart-circle .c3-chart-arc text {font-size: 1.3rem;}

.chart-legend {display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 10px; margin-top: 2rem;}
.chart-legend > li {display: flex; align-items: center; column-gap: 10px;}
.chart-legend > li > span {display: block; width: 10px; height: 10px; border-radius: 100%;}
.chart-legend > li > p {font-size: 15px;}

.category-bar-graph-wrap > li + li {margin-top: 2rem;}
.category-bar-graph-wrap > li > h6 {font-size: 1.5rem; margin-bottom: .8rem;}
.category-bar-graph-wrap > li .category-bar-graph {display: flex; align-items: center; justify-content: space-between;}
.category-bar-graph-wrap > li .category-bar-graph .bar-graph {width: 30rem; height: 1rem; border-radius: .8rem; background-color: var(--gray04);}
.category-bar-graph-wrap > li .category-bar-graph .bar-graph > span {display: block; height: 1rem; border-radius: .8rem;}
.category-bar-graph-wrap > li:nth-child(1) .category-bar-graph .bar-graph > span {background-color: #AECEFB;}
.category-bar-graph-wrap > li:nth-child(2) .category-bar-graph .bar-graph > span {background-color: #FAC8A1;}
.category-bar-graph-wrap > li:nth-child(3) .category-bar-graph .bar-graph > span {background-color: #FCBAE5;}
.category-bar-graph-wrap > li:nth-child(4) .category-bar-graph .bar-graph > span {background-color: #CFBAF9;}
.category-bar-graph-wrap > li:nth-child(5) .category-bar-graph .bar-graph > span {background-color: #A5D9D0;}
.category-bar-graph-wrap > li:nth-child(6) .category-bar-graph .bar-graph > span {background-color: #FEB5B5;}
.category-bar-graph-wrap > li:nth-child(7) .category-bar-graph .bar-graph > span {background-color: #A2E48A;}
.category-bar-graph-wrap > li .category-bar-graph > p {width: 4.5rem; text-align: right; font-size: 1.7rem; font-weight: 700;}

.stats-tag-wrap {display: flex; align-items: center; flex-wrap: wrap; grid-gap: .8rem;}

/* 티켓북 > 마이아트 데이터 > 기간조회 */
.period-check {display: flex; align-items: center;}
.period-check > li {display: flex; align-items: center; justify-content: center; height: 4.8rem; font-size: 1.5rem; font-weight: 500; border-top: 1px solid var(--gray03); border-left: 1px solid var(--gray03); border-bottom: 1px solid var(--gray03);}
.period-check > li:nth-child(1) {border-radius: .4rem 0 0 .4rem;}
.period-check > li:nth-last-child(1) {border-radius: 0 .4rem .4rem 0; border-right: 1px solid var(--gray03);}
.period-check > li.active {border-color: var(--sac-red);}
.period-check > li.active + li {border-left-color: var(--sac-red);}
.period-check > li:nth-child(1):nth-last-child(4), .period-check > li:nth-child(1):nth-last-child(4) ~ li {width: calc(100% / 4);}

.period-date {display: flex; align-items: center; margin-top: .8rem; width: 100%; border: 1px solid var(--gray03); border-radius: .4rem;}
.period-date > li:nth-child(1), .period-date > li:nth-child(3) {width: calc((100% - 4.8rem) / 2);}
.period-date > li:nth-child(2) {width: 4.8rem; text-align: center; font-size: 1.6rem; font-weight: 500;}
.period-date > li input[type="date"] {height: 4.6rem; border: none;}

.period-date ~ button {margin-top: 1.6rem;}

/* 모바일티켓 -------------------- */
.pop-cont .mobile-ticket-wrap {width: 100%; height: fit-content; padding: 0; background-color: initial; border: 0; border-radius: initial;}
.pop-cont .mobile-ticket-wrap::before,
.pop-cont .mobile-ticket-wrap::after {content: none;}
.pop-cont .mobile-ticket-wrap .info-wrap.once {height: fit-content;}
.pop-cont .mobile-ticket-wrap .info {height: fit-content; padding-bottom: 26px;}
.pop-cont .mobile-ticket-wrap .seat {height: fit-content; margin-top: 20px;}
.pop-cont .mobile-ticket-wrap .seat .seat-num {height: 20vh;}

.mobile-ticket-bottom-hole {width: 100%; height: 16px; position: absolute; bottom: 0; left: 0; z-index: 0;}
.mobile-ticket-bottom-hole::before {content: ''; width: 16px; height: 16px; border-width: 1px; border-style: solid; border-radius: 100%; border-color: var(--gray04) var(--gray04) var(--gray03) var(--gray03); background-color: var(--gray04); border-radius: 100%; position: absolute; left: -8px; bottom: 46px; transform: rotate(-140deg);}
.mobile-ticket-bottom-hole::after {content: ''; width: 16px; height: 16px; border-width: 1px; border-style: solid; border-radius: 100%; border-color: var(--gray04) var(--gray04) var(--gray03) var(--gray03); background-color: var(--gray04); border-radius: 100%; position: absolute; right: -8px; bottom: 46px; transform: rotate(45deg);}

.mobile-ticket-wrap {width: 343px; height: 664px; position: relative; padding: 20px 16px; background-color: var(--white01); border: 1px solid var(--gray03); border-radius: 4px;}
.mobile-ticket-wrap::before {content: ''; width: 16px; height: 16px; border-width: 1px; border-style: solid; border-radius: 100%; border-color: var(--gray04) var(--gray04) var(--gray03) var(--gray03); background-color: var(--gray04); border-radius: 100%; position: absolute; left: -8px; top: 344px; transform: rotate(-140deg);}
.mobile-ticket-wrap::after {content: ''; width: 16px; height: 16px; border-width: 1px; border-style: solid; border-radius: 100%; border-color: var(--gray04) var(--gray04) var(--gray03) var(--gray03); background-color: var(--gray04); border-radius: 100%; position: absolute; right: -8px; top: 344px; transform: rotate(45deg);}

.mobile-ticket-wrap.no-ticket {width: 100%; height: 436px; display: flex; flex-flow: column; align-items: center; row-gap: 20px; padding-top: 110px;}
.mobile-ticket-wrap.no-ticket::before,
.mobile-ticket-wrap.no-ticket::after {top: 302px;}
.mobile-ticket-wrap.no-ticket > p {font-size: 20px;}

.mobile-ticket-wrap .poster {width: 236px; height: 310px; margin: 0 auto; border-radius: 4px; background-repeat: no-repeat; background-size: 100% 100%; background-position: center;}
.mobile-ticket-wrap .poster.before {width: calc(100% + 32px); height: 330px; margin: -20px -16px 0;}
.mobile-ticket-wrap .poster.before .poster-sample {position: relative; height: 210px; border-radius: 4px 4px 0 0; background-repeat: no-repeat; background-size: 100% auto; background-position: center;}
.mobile-ticket-wrap .poster.before .poster-sample::before {content: ''; width: 100%; height: 100%; border-radius: 4px 4px 0 0; display: block; background-color: var(--opa-black);}
.mobile-ticket-wrap .poster.before .poster-sample .sample {width: 120px; height: 158px; border-radius: 4px; background-repeat: no-repeat; background-size: 100% 100%; background-position: center; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}
.mobile-ticket-wrap .poster .guide {padding: 30px; text-align: center;}
.mobile-ticket-wrap .poster .guide > h6 {font-size: 15px; font-weight: 500;}
.mobile-ticket-wrap .poster .guide > p {font-size: 13px; line-height: 1.5; font-weight: 500; margin-top: 6px;}
.mobile-ticket-wrap .poster .guide > ul {display: flex; align-items: center; justify-content: center; margin-top: 12px;}
.mobile-ticket-wrap .poster .guide > ul > li + li {margin-left: 16px;}

.mobile-ticket-wrap .info-wrap {height: 166px; margin-top: 20px; padding-top: 20px; border-top: 1px dashed var(--gray03); display: flex; justify-content: space-between; position: relative;}
.mobile-ticket-wrap .info-wrap .payment-add {width: 97px; height: 36px; padding-top: 3px; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: var(--sac-red); position: absolute; top: -36px; left: 10px; background-image: url(/resource/img/payment-add-bg-71241404027b856c592101368c5ccffd.svg); background-repeat: no-repeat; background-position: top center; background-size: cover;}
.mobile-ticket-wrap .info-wrap .info * {display: block;}
.mobile-ticket-wrap .info-wrap .info .date {font-size: 13px; font-weight: 500; margin-bottom: 6px; line-height: 1.4;}
.mobile-ticket-wrap .info-wrap .info .date > span {font-weight: initial; display: initial;}
.mobile-ticket-wrap .info-wrap .info > h6 {font-size: 16px; font-weight: 700; width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.mobile-ticket-wrap .info-wrap .info .time {font-size: 32px; font-weight: 700; margin-top: 12px;}
.mobile-ticket-wrap .info-wrap .info .place {font-size: 13px; margin-top: 10px; font-weight: 500; color: #5E6166;}
.mobile-ticket-wrap .info-wrap .info .num {margin-top: 6px; display: flex; align-items: center; font-size: 13px; font-weight: 500; color: #5E6166;}
.mobile-ticket-wrap .info-wrap .info .num > span {margin-left: 8px;}
.mobile-ticket-wrap .info-wrap .info ul.num {column-gap: 1.1rem;}
.mobile-ticket-wrap .info-wrap .info ul.num > li {position: relative; display: flex; align-items: center;}
.mobile-ticket-wrap .info-wrap .info ul.num > li + li::before {content: ''; width: 1px; height: .8rem; background-color: var(--gray03); display: block; position: absolute; left: -.6rem;}
.mobile-ticket-wrap .info-wrap .info .price {width: 300px; margin-top: 6px; font-size: 13px; color: #5E6166; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; position: absolute;}

.mobile-ticket-wrap .info-wrap.exhibition {height: calc(166px + 72px);}
.mobile-ticket-wrap .info-wrap.exhibition .info .time {font-size: 32px; font-weight: 700; margin-top: 30px;}
.mobile-ticket-wrap .info-wrap.exhibition .info .time > span {font-size: 13px; font-weight: 500; margin-bottom: 10px;}
.mobile-ticket-wrap .info-wrap.exhibition .info .place {margin-top: 30px;}
.mobile-ticket-wrap .info-wrap.exhibition .info .num {margin-top: 8px;}
.mobile-ticket-wrap .info-wrap.exhibition .info .price {margin-top: 8px;}
.mobile-ticket-wrap .info-wrap.exhibition .btn {width: 68px; height: 68px; margin-right: 20px; display: flex; flex-flow: column; grid-gap: 4px; align-items: center; justify-content: center; border-radius: 100%; background: linear-gradient(319.74deg, var(--sac-red) 31.86%, rgba(255, 83, 94, 0.71) 89.83%); box-shadow: 2px 2px 8px rgba(255, 83, 94, 0.25); cursor: pointer;}
.mobile-ticket-wrap .info-wrap.exhibition .btn.complete,
.mobile-ticket-wrap .info-wrap.exhibition .btn.paper {background: linear-gradient(319.74deg, #3A3A3A 13.92%, rgba(137, 137, 137, 0.71) 89.83%); box-shadow: 2px 2px 8px rgba(105, 105, 105, 0.25);}
.mobile-ticket-wrap .info-wrap.exhibition .btn p {font-size: 12px; font-weight: 500; color: #fff;}

.mobile-ticket-wrap .info-wrap.once {height: 124.5px; margin-top: 0; padding-top: 0; border-top: none;}

.mobile-ticket-wrap .info-wrap .qr {width: 120px; position: relative; display: flex; flex-flow: column; align-items: center;}
.mobile-ticket-wrap .info-wrap .qr .option > button {width: 90px; position: absolute; top: -34px; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%);}
.mobile-ticket-wrap .info-wrap .qr .option .bubble {position: absolute; top: -36px; right: 6px; width: 103px; height: 44px; background-image: url(/resource/img/ico/bubble-top-txt7-gap1-e87d2ea98d790f308771fd5d83188716.png); background-repeat: no-repeat; background-size: 100% 100%; background-position: center; animation: motion-type02 0.4s linear 0s infinite alternate; cursor: pointer;}
.mobile-ticket-wrap .info-wrap .qr .option .bubble > span {position: relative; top: 11.5px; left: 11.5px; font-size: 11px; color: var(--sac-red);}
@keyframes motion-type02 { 0% {top: -36px;} 100% {top: -38px;} }

.mobile-ticket-wrap .info-wrap .qr .state {width: 112px; height: 112px; position: absolute; top: 0; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); z-index: 2;}
.mobile-ticket-wrap .info-wrap .qr .state.finished::before {content: ''; width: 72px; height: 72px; display: block; background-image: url(/resource/img/ico/icon-won-finished-d67b77b5e95cab0fd11d0b9c6319ee1b.svg); background-repeat: no-repeat; background-size: contain; background-position: center; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}
.mobile-ticket-wrap .info-wrap .qr .state.finished::after {content: ''; width: 112px; height: 112px; display: block; background-color: var(--opa-bold-white);}

.mobile-ticket-wrap .info-wrap .qr .state.paper::before {content: ''; width: 72px; height: 72px; display: block; background-image: url(/resource/img/ico/icon-won-paper-da6ca077fe65a2334fd4d32eef91d0e2.svg); background-repeat: no-repeat; background-size: contain; background-position: center; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}
.mobile-ticket-wrap .info-wrap .qr .state.paper::after {content: ''; width: 112px; height: 112px; display: block; background-color: var(--opa-bold-white);}

.mobile-ticket-wrap .info-wrap .qr .state.expired button {width: 118px; height: 30px; padding: 6px 12px 5px; font-size: 12px; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}
.mobile-ticket-wrap .info-wrap .qr .state.expired button > i {margin-left: 4px;}
.mobile-ticket-wrap .info-wrap .qr .state.expired::after {content: ''; width: 112px; height: 112px; display: block; background-color: var(--opa-bold-white);}
.mobile-ticket-wrap .info-wrap .qr .img {width: 112px; height: 112px; margin: 0 auto; padding: 5px; background-repeat: no-repeat; background-size: 100%; background-position: center; background-color: #fff; position: relative; z-index: 0;}
.mobile-ticket-wrap .info-wrap .qr .img canvas {width: 102px; height: 102px; z-index: 1; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}
.mobile-ticket-wrap .info-wrap .qr .timeout {height: 13px; font-size: 13px; font-weight: 500; /*margin-top: 8px;*/}

.mobile-ticket-wrap .seat {margin-top: 36px; height: 314px;}
.mobile-ticket-wrap .seat > p {font-size: 16px; font-weight: 500;}
.mobile-ticket-wrap .seat .seat-num {position: relative; margin-top: 12px; height: 286px; overflow-y: auto;}
.mobile-ticket-wrap .seat .seat-num > ul {display: flex; align-items: center; flex-wrap: wrap; grid-gap: 8px 10px;}

.mobile-ticket-wrap .map {width: 100%; height: 52px; margin-top: 20px; border-radius: 4px; background-color: var(--sac-red); padding: 20px; display: flex; align-items: center; justify-content: space-between;}
.mobile-ticket-wrap .map > p {width: calc(100% - 12px - 64px); font-size: 15px; font-weight: 500; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.mobile-ticket-wrap .map > span {width: 64px; display: flex; align-items: center; justify-content: flex-end; font-size: 13px; font-weight: 500; color: #fff;}
.mobile-ticket-wrap .map > span i {width: 16px; height: 16px;}

.mobile-ticket-wrap .etc-link {margin-top: 20px; padding-top: 20px; border-top: 1px dashed var(--gray03); display: flex; align-items: center;}
.mobile-ticket-wrap .etc-link > li:nth-child(1):nth-last-child(1), .mobile-ticket-wrap .etc-link > li:nth-child(1):nth-last-child(1) ~ li {width: calc(100% / 1);}
.mobile-ticket-wrap .etc-link > li:nth-child(1):nth-last-child(2), .mobile-ticket-wrap .etc-link > li:nth-child(1):nth-last-child(2) ~ li {width: calc(100% / 2);}
.mobile-ticket-wrap .etc-link > li:nth-child(1):nth-last-child(3), .mobile-ticket-wrap .etc-link > li:nth-child(1):nth-last-child(3) ~ li {width: calc(100% / 3);}
.mobile-ticket-wrap .etc-link > li {position: relative; text-align: center; font-size: 13px; font-weight: 500; color: var(--gray01);}
.mobile-ticket-wrap .etc-link > li + li::before {content: ''; display: block; width: 1px; height: 12px; background-color: var(--gray01); position: absolute; top: 50%; left: 0; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%);}

.swiper.mobile-ticket-swiper {padding-bottom: 22px; width: 100vw; margin: 0 -16px;}
.mobile-ticket-swiper .swiper-slide {width: 343px;}
.mobile-ticket-swiper .swiper-pagination-bullets.swiper-pagination-horizontal {bottom: 0;}
.mobile-ticket-swiper .swiper-pagination-bullets.swiper-pagination-horizontal {bottom: 0; line-height: 0;}
.mobile-ticket-swiper .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {width: 6px; height: 6px; margin: 0 4px; opacity: 1; background-color: var(--gray01);}
.mobile-ticket-swiper .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet-active {background-color: var(--black);}

.mobile-ticket-wrap ~ button {margin: 3rem auto 0;}
.mobile-ticket-swiper ~ button {margin: 3rem auto 0;}

.infinite-scroll-wrap {background-color: var(--black); width: 100%; height: 40px; line-height: 40px; overflow: hidden; position: absolute; bottom: 0; left: 0;}
.infinite-scroll-wrap .infinite-scroll li {width: fit-content!important; height: fit-content!important; font-size: 13px; font-weight: 500; color: var(--white01);}
.infinite-scroll-wrap .infinite-scroll li + li {margin-left: 10px;}

/* 모바일티켓 > 좌석보기 */
#desc-pop .pop-cont.my-seat-position {overflow-y: initial;}
#desc-pop .pop-cont.my-seat-position > div {width: calc(100% + 40px); height: 280px; margin: 0 -20px 24px; background-repeat: no-repeat; background-size: cover; background-position: center;}
#desc-pop .pop-cont.my-seat-position > p {text-align: center;}


/* 모바일티켓 > 할인증빙 */
.discount-type {width: 100%; min-height: 9rem; height: fit-content; padding: 1.6rem; word-break: keep-all; background-color: #1A1A1A; text-align: center; display: flex; flex-flow: column; row-gap: 1.2rem; align-items: center; justify-content: center; border-radius: .4rem;}
.discount-type > h6 {font-size: 1.8rem; font-weight: 700; color: #fff;}
.discount-type > h6:nth-child(1):nth-last-child(1) {line-height: 1.6;}
.discount-type > p {font-size: 1.3rem; color: #fff;}

.discount-pw-chk {border-top: 1px solid var(--gray03); padding-top: 3.6rem;}
.discount-pw-chk > li {font-size: 1.4rem; font-weight: 500; display: flex; align-items: center; column-gap: .8rem;}
.discount-pw-chk > li + li {margin-top: .8rem;}
.discount-pw-chk > li input[type="text"] {width: calc(100% - 10.4rem);}
.discount-pw-chk > li button {width: 9.6rem; height: 4.8rem; background-color: var(--black); border-color: var(--black); color: var(--white01);}
.discount-pw-chk > li input[type="checkbox"] + label {margin-top: .4rem;}


/* 튜토리얼 -------------------- */
.tutorial {background-color: #f2f2f2; height: 100vh; padding-top: 36px; position: relative; overflow: hidden;}
.tutorial-pagination {display: flex; align-items: center; justify-content: center; margin-bottom: 56px;}
.tutorial-pagination > li {width: 8px; height: 8px; background-color: #d9d9d9; border-radius: 100%;}
.tutorial-pagination > li + li {margin-left: 10px;}
.tutorial-pagination > li.active {background-color: var(--sac-red);}

.tutorial-cont {text-align: center;}
.tutorial-cont h2 {font-size: 30px; font-weight: 300; color: #1A1A1A;}
.tutorial-cont p {height: 60px; font-size: 18px; color: var(--gray01); line-height: 1.6; margin-top: 20px;}
.tutorial-cont .img {width: 260px; height: 590px; margin: 60px auto 0; background-repeat: no-repeat; background-size: 100% auto; background-position: top center; border-radius: 38px;/* box-shadow: 0 7px 17px 6px rgba(0, 0, 0, 0.04);*/}
/*  position: absolute; bottom: 0; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); */

.tutorial .btn-bottom-full button {font-size: 18px; font-weight: initial; padding: 16px 20px 48px;}
.tutorial .btn-bottom-full button:first-child:nth-last-child(2) {justify-content: flex-start;}
.tutorial .btn-bottom-full button:first-child:nth-last-child(2) ~ button:nth-child(2) {justify-content: flex-end;}

@media screen and (min-width: 768px) {
    .tutorial-cont {position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}
}

/* 문자 > 예매내역 확인 */
.reserve-preview {width: calc(100% - 3.2rem); height: fit-content; display: flex; flex-flow: column; align-items: center;}
.reserve-preview > h6 {font-size: 1.4rem; font-weight: 700;}
.reserve-preview .poster {width: 17.2rem; height: 22rem; border-radius: .4rem; margin-top: 3rem; background-repeat: no-repeat; background-size: cover; background-position: center; box-shadow: 0px 3px 8px 1px rgba(1, 1, 1, 0.15);}
.reserve-preview .info {display: flex; flex-flow: column; align-items: center; margin-top: 2rem;}
.reserve-preview .info > h6 {text-align: center; font-size: 1.4rem; font-weight: 500; word-break: keep-all; line-height: 1.4;}
.reserve-preview .info .date {display: flex; align-items: center; justify-content: center; column-gap: 1.6rem; margin-top: 1rem;}
.reserve-preview .info .date > li {font-size: 1.2rem; color: var(--gray01); position: relative; display: flex; align-items: center;}
.reserve-preview .info .date > li + li::before {content: ''; width: 1px; height: .8rem; display: block; background-color: var(--gray03); position: absolute; left: -.8rem;}
.reserve-preview .info .place {display: flex; align-items: center; justify-content: center; column-gap: 1.6rem; margin-top: .6rem;}
.reserve-preview .info .place > li {font-size: 1.2rem; color: var(--gray01); position: relative; display: flex; align-items: center;}
.reserve-preview .info .place > li + li::before {content: ''; width: 1px; height: .8rem; display: block; background-color: var(--gray03); position: absolute; left: -.8rem;}
.reserve-preview .btn-wrap {margin-top: 6rem; width: 100%; display: flex; flex-flow: column; align-items: center; grid-gap: 1rem;}
.reserve-preview .btn-wrap .trans {margin-top: .6rem;}

/* 통계 > 주제별 통계 */
.stats-tab {width: 100vw; margin: 0 -1.6rem 3rem; padding: 0 1.6rem; overflow-x: auto;}
.stats-tab > ul {width: max-content; display: flex; align-items: center; column-gap: .4rem;}
.stats-tab > ul > li {width: fit-content; min-width: 7rem; height: 3.8rem; padding: 0 1.4rem; border: 1px solid var(--gray03); border-radius: 2rem; background-color: var(--white01); display: flex; align-items: center; justify-content: center; font-size: 1.4rem; color: var(--gray01);}
.stats-tab > ul > li.active {background-color: var(--sac-red); border-color: var(--sac-red); color: var(--white01); font-weight: 600;}

.container > .cont-box:nth-child(1) .stats-summary {margin-top: -2rem;}

.stats-summary {width: 100vw; margin: 0 -1.6rem; padding: 5rem 1.6rem 0; background-image: url(/resource/img/stats-summary-bg-4d0376c37e590b38ff582108a1893132.png); background-repeat: no-repeat; background-size: 100% auto; background-position: top left;}
.stats-summary .title {display: flex; flex-flow: column; row-gap: 1.6rem; margin-bottom: 4rem;}
.stats-summary .title > h2 {font-size: 3.6rem; font-weight: 600; color: #fff;}
.stats-summary .title > p {font-size: 1.8rem; color: rgba(255,255,255,.6);}

.stats-swiper .swiper-slide {display: flex; flex-flow: column; row-gap: 1.2rem;}
.stats-swiper .swiper-slide .poster {height: 63vw; background-repeat: no-repeat; background-size: cover; background-position: center;}
.stats-swiper .swiper-slide .desc {display: flex; flex-flow: column; row-gap: 1.5rem;}
.stats-swiper .swiper-slide .desc > div {display: flex; flex-flow: column; row-gap: .4rem;}
.stats-swiper .swiper-slide .desc > div > p {font-size: 1.6rem; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.stats-swiper .swiper-slide .desc > div > span {font-size: 1.2rem; color: var(--gray01);}

.stats-swiper-wrap > ul {display: flex; align-items: center; column-gap: 1.5rem; margin-bottom: 2rem;}
.stats-swiper-wrap .swiper-button-prev,
.stats-swiper-wrap .swiper-button-next {position: relative; right: initial; left: initial; top: initial; width: initial; height: initial; margin: 0;}
.stats-swiper-wrap .swiper-button-prev::after,
.stats-swiper-wrap .swiper-button-next::after {content: none;}
.stats-swiper-wrap .swiper-button-prev::before,
.stats-swiper-wrap .swiper-button-next::before {content: ''; width: 3.2rem; height: 3.2rem; background-repeat: no-repeat; background-size: contain; background-position: center;}
.stats-swiper-wrap .swiper-button-prev::before {background-image: url(/resource/img/ico/ic-swiper-prev-df76858555c91e4a0cdf9e214db4c119.svg);}
.stats-swiper-wrap .swiper-button-next::before {background-image: url(/resource/img/ico/ic-swiper-next-77503766ff3a8bd696d4109316780829.svg);}

.stats-swiper-wrap .swiper-pagination-fraction {position: relative; top: initial; left: initial; right: initial; bottom: initial; font-size: 1rem; color: #fff;}
.stats-swiper-wrap .swiper-pagination-fraction > span {width: 1.4rem; text-align: center; font-size: 1rem; color: #fff;}
.stats-swiper-wrap .swiper-pagination-fraction .swiper-pagination-current {font-weight: 600;}

.stats-all {display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 2rem 1rem; padding-top: 5.2rem;}
.stats-all > li {display: flex; flex-flow: column; row-gap: 1.2rem;}
.stats-all > li .poster {height: 63vw; background-repeat: no-repeat; background-size: cover; background-position: center;}
.stats-all > li .desc {display: flex; flex-flow: column; row-gap: 1.5rem;}
.stats-all > li .desc > div {display: flex; flex-flow: column; row-gap: .4rem;}
.stats-all > li .desc > div > p {font-size: 1.6rem; font-weight: 500; width: 100%; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; line-clamp: 1; -webkit-line-clamp: 1; -webkit-box-orient: vertical;}
.stats-all > li .desc > div > span {font-size: 1.2rem; color: var(--gray01);}


select + .stats-notice {margin-top: 1.5rem;}
.stats-notice {padding: 2rem; margin-bottom: 2rem; background-color: var(--gray04); border-radius: .4rem; display: flex; align-items: center; justify-content: space-between;}
.stats-notice > p {font-size: 1.4rem; line-height: 1.6; }
.stats-notice > p > span {font-weight: 600;}

.stats-info {display: flex; flex-flow: column; align-items: center; padding-bottom: 2.4rem;}
.stats-info > i {margin-bottom: 1.2rem;}
.stats-info > p {font-size: 1.4rem; font-weight: 500; line-height: 1.6;}
.stats-info > span {font-size: 1.4rem; line-height: 1.6;}

.stats-play-wrap {display: flex; flex-flow: column; row-gap: 1.4rem; border-top: 2px solid var(--black);}
.stats-play-wrap > li {display: flex; flex-flow: column; padding-top: 1.4rem;}
.stats-play-wrap > li + li {border-top: 1px solid var(--gray03);}
.stats-play-wrap > li > button {height: 4rem; font-size: 1.4rem; margin-top: 1.4rem;}
.stats-play-wrap > li .info-wrap {display: flex; align-items: center; justify-content: space-between;}
.stats-play-wrap > li .info-wrap .info {display: flex; align-items: center; column-gap: 1.2rem;}
.stats-play-wrap > li .info-wrap .info .poster {width: 5rem; height: 7rem; overflow: hidden; border-radius: .4rem; background-repeat: no-repeat; background-size: cover; background-position: center; display: flex; align-items: flex-start; justify-content: flex-start;}
.stats-play-wrap > li .info-wrap .info .poster > p {width: 1.8rem; height: 1.8rem; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; font-weight: 500; color: var(--white01); background-color: #555;}
.stats-play-wrap > li .info-wrap .info .desc {display: flex; flex-flow: column; row-gap: .6rem;}
.stats-play-wrap > li .info-wrap .info .desc > p {width: 16rem; height: 3.4rem; word-break: keep-all; font-size: 1.4rem; font-weight: 500; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; line-clamp: 2; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.stats-play-wrap > li .info-wrap .info .desc > ul > li {font-size: 1.2rem; color: var(--gray01); line-height: 1.4;}
.stats-play-wrap > li .info-wrap .more {width: fit-content; height: 3rem; padding: 0 .8rem; border-radius: 2rem; background-color: var(--white01); border: 1px solid var(--gray03); display: flex; align-items: center; column-gap: .4rem; font-size: 1.4rem; color: var(--gray01);}

.stats-play-wrap > li.active .info-wrap .more {background-color: var(--black); border-color: var(--black); color: var(--white01);}
.stats-play-wrap > li.active .info-wrap .more > i {background-image: url(/resource/img/ico/icon-arrow-up-10-e588ea88324bcdb9ccac849d6d498216.svg);}

@media (prefers-color-scheme: dark) {
    .stats-play-wrap > li .info-wrap .more > i {filter: invert(.5);}
}

.stats-play-wrap > li .stats {background-color: var(--gray04); border-radius: .4rem; padding: .8rem; margin-top: 1.2rem; display: none; align-items: center; column-gap: .8rem;}
.stats-play-wrap > li .stats .gender {flex: 1; display: flex; align-items: center; justify-content: center; column-gap: 1.2rem;}
.stats-play-wrap > li .stats .gender > li {display: flex; flex-flow: column; row-gap: .4rem;}
.stats-play-wrap > li .stats .gender > li > p {font-size: 1rem; display: flex; align-items: center; column-gap: .2rem;}
.stats-play-wrap > li .stats .gender > li > p > span {font-size: 1.2rem; font-weight: 600;}
.stats-play-wrap > li .stats .graph {height: 12.4rem; display: flex; align-items: flex-end; padding-left: .8rem; border-left: 1px dashed var(--gray03);}
.stats-play-wrap > li .stats .graph > li {width: 3.2rem; height: 100%; display: flex; flex-flow: column-reverse; align-items: center; position: relative;}
.stats-play-wrap > li .stats .graph > li::after {content: ''; width: 100%; height: 1px; background-color: var(--gray02); position: absolute; left: 0; bottom: 1.4rem;}
.stats-play-wrap > li .stats .graph > li > p {font-size: 1rem; color: var(--gray01);white-space: nowrap; margin-top: .4rem;}
.stats-play-wrap > li .stats .graph > li > div {height: 100%; display: flex; flex-flow: column-reverse; align-items: center; row-gap: .4rem;}
.stats-play-wrap > li .stats .graph > li > div > span {display: block; width: 1.6rem; background-color: var(--gray02); -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease;}
.stats-play-wrap > li .stats .graph > li > div > p {font-size: 1rem; font-weight: 500;}
.stats-play-wrap > li .stats .graph > li.focus > div > span {background-color: var(--sac-blue);}

.stats-play-wrap > li.active .stats {display: flex;}


/* 통계 > 모의 혜택 가격 계산 */
.discount-play-tab {display: flex; align-items: center; column-gap: .8rem; margin-bottom: 3rem;}
.discount-play-tab > li {flex: 1; height: 4.8rem; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; font-weight: 500; border: 1px solid var(--black); background-color: var(--white01); border-radius: .4rem;}
.discount-play-tab > li.active {background-color: var(--black); color: var(--white01);}
.discount-play-tab + p {font-size: 1.2rem; text-align: right; margin: -1.4rem 0 2.4rem;}

.discount-play-wrap {display: flex; flex-flow: column; row-gap: 2.4rem;}
.discount-play-wrap > li {display: flex; flex-flow: column;}
.discount-play-wrap > li + li {border-top: 1px solid var(--gray03); padding-top: 2.4rem;}
.discount-play-wrap > li .info-wrap {display: flex; align-items: center; justify-content: space-between;}
.discount-play-wrap > li .info-wrap .info {display: flex; align-items: center; column-gap: 1.2rem;}
.discount-play-wrap > li .info-wrap .info .poster {width: 5rem; height: 7rem; border-radius: .4rem; background-repeat: no-repeat; background-size: cover; background-position: center;}
.discount-play-wrap > li .info-wrap .info .desc {display: flex; flex-flow: column; row-gap: 1.2rem;}
.discount-play-wrap > li .info-wrap .info .desc > p {width: 16rem; font-size: 1.4rem; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.discount-play-wrap > li .info-wrap .info .desc > ul > li {font-size: 1.2rem; color: var(--gray01); line-height: 1.4;}
.discount-play-wrap > li .info-wrap .more {width: fit-content; height: 3rem; padding: 0 .8rem; border-radius: 2rem; background-color: var(--white01); border: 1px solid var(--gray03); display: flex; align-items: center; column-gap: .4rem; font-size: 1.4rem; color: var(--gray01);}

.discount-play-wrap > li.active .info-wrap .more {background-color: var(--black); border-color: var(--black); color: var(--white01);}
.discount-play-wrap > li.active .info-wrap .more > i {background-image: url(/resource/img/ico/icon-arrow-up-10-e588ea88324bcdb9ccac849d6d498216.svg);}

@media (prefers-color-scheme: dark) {
    .discount-play-wrap > li .info-wrap .more > i {filter: invert(.5);}
}

.discount-play-wrap > li .stats {background-color: var(--gray04); border-radius: .4rem; padding: .8rem; margin-top: 1.2rem; display: none; align-items: center; column-gap: .8rem;}
.discount-play-wrap > li .stats .gender {flex: 1; display: flex; align-items: center; justify-content: center; column-gap: 1.2rem;}
.discount-play-wrap > li .stats .gender > li {display: flex; flex-flow: column; row-gap: .4rem;}
.discount-play-wrap > li .stats .gender > li > p {font-size: 1rem; display: flex; align-items: center; column-gap: .2rem;}
.discount-play-wrap > li .stats .gender > li > p > span {font-size: 1.2rem; font-weight: 600;}
.discount-play-wrap > li .stats .graph {height: 12.4rem; display: flex; align-items: flex-end; padding-left: .8rem; border-left: 1px dashed var(--gray03);}
.discount-play-wrap > li .stats .graph > li {width: 3.2rem; height: 100%; display: flex; flex-flow: column-reverse; align-items: center; position: relative;}
.discount-play-wrap > li .stats .graph > li::after {content: ''; width: 100%; height: 1px; background-color: var(--gray02); position: absolute; left: 0; bottom: 1.4rem;}
.discount-play-wrap > li .stats .graph > li > p {font-size: 1rem; color: var(--gray01);white-space: nowrap; margin-top: .4rem;}
.discount-play-wrap > li .stats .graph > li > div {height: 100%; display: flex; flex-flow: column-reverse; align-items: center; row-gap: .4rem;}
.discount-play-wrap > li .stats .graph > li > div > span {display: block; width: 1.6rem; background-color: var(--gray02); -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease;}
.discount-play-wrap > li .stats .graph > li > div > p {font-size: 1rem; font-weight: 500;}
.discount-play-wrap > li .stats .graph > li.focus > div > span {background-color: var(--sac-blue);}

.discount-play-wrap > li.active .stats {display: flex;}

.discount-play-wrap > li .price {margin-top: 2rem; display: flex; flex-flow: column; row-gap: 1.6rem;}
.discount-play-wrap > li .price .info {display: flex; flex-flow: column; row-gap: .8rem;}
.discount-play-wrap > li .price .info > p {font-size: 1.4rem; font-weight: 500;}
.discount-play-wrap > li .price > ul {background-color: var(--gray04); border-radius: .4rem; padding: 2rem 1.6rem; display: flex; flex-flow: column; row-gap: 2rem;}
.discount-play-wrap > li .price > ul > li {display: flex; align-items: center; justify-content: space-between;}
.discount-play-wrap > li .price > ul > li > h6 {display: flex; align-items: center; column-gap: .4rem; font-size: 1.4rem; font-weight: 500;}
.discount-play-wrap > li .price > ul > li > h6 > span {display: block; width: 1.2rem; height: 1.2rem;}
.discount-play-wrap > li .price > ul > li > h6 > span.gold {background-color: var(--mem-gold);}
.discount-play-wrap > li .price > ul > li > h6 > span.blue {background-color: var(--mem-blue);}
.discount-play-wrap > li .price > ul > li > h6 > span.green {background-color: var(--mem-green);}
.discount-play-wrap > li .price > ul > li > p {font-size: 1.4rem;}
.discount-play-wrap > li .price > ul > li > p > span {font-weight: 600; min-width: 3.6rem; display: inline-flex; justify-content: flex-end;}
.discount-play-wrap > li .price .count {display: flex; align-items: center; column-gap: 1rem;}
.discount-play-wrap > li .price .count > button {flex: 1; height: 3.6rem; border-color: var(--black);}

.mem-guide {display: flex; flex-flow: column; align-items: center; row-gap: 2rem;}
.mem-guide > p {text-align: center; font-size: 1.4rem; font-weight: 500; line-height: 1.4;}
.mem-guide > span {text-align: center; font-size: 1.2rem; color: var(--sac-red); font-weight: 500;}

.bottom-wrap.mem.active::after {content: ''; width: 100vw; height: 100vh; position: fixed; top: 0; left: 0; background-color: var(--opa-black); z-index: 10!important;}
.bottom-wrap.mem.active * {z-index: 11;}
.bottom-wrap.mem::before {height: 17.7rem;}
.bottom-wrap.mem .mem-calc {width: 100%; display: flex; flex-flow: column; align-items: center; border-radius: 3rem 3rem 0 0; padding: .8rem 1.6rem 0; position: fixed; left: 0; bottom: 9.2rem; background-color: var(--white01); box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.14);}
.bottom-wrap.mem .mem-calc .ic-arrow-up-24 {margin-bottom: .8rem;}
.bottom-wrap.mem .mem-calc .list {display: none; width: 100%; max-height: 24rem; overflow-y: auto; margin-bottom: 2rem;}
.bottom-wrap.mem .mem-calc .list > ul {display: flex; flex-flow: column; row-gap: 1rem;}
.bottom-wrap.mem .mem-calc .list > ul > li {width: 100%; height: 5.4rem; padding: 0 1.6rem; border-radius: .4rem; background-color: var(--gray04); display: flex; align-items: center; justify-content: space-between;}
.bottom-wrap.mem .mem-calc .list > ul > li > div {display: flex; flex-flow: column; row-gap: .2rem;}
.bottom-wrap.mem .mem-calc .list > ul > li > div > p {font-size: 1.4rem; font-weight: 500;}
.bottom-wrap.mem .mem-calc .list > ul > li > div > span {font-size: 1.2rem; color: var(--gray01);}
.bottom-wrap.mem .mem-calc .list > ul > li > button {width: fit-content; height: fit-content; padding: 0; background-color: transparent; border: 0;}
.bottom-wrap.mem .mem-calc .receipt {width: 100%; margin-bottom: 2.4rem;}
.bottom-wrap.mem .mem-calc .receipt .sub-title {display: none; width: 100%; margin: 0 0 1.6rem;}
.bottom-wrap.mem .mem-calc .receipt > ul {width: 100%; display: flex; flex-flow: column; row-gap: 1.4rem;}
.bottom-wrap.mem .mem-calc .receipt > ul > li {width: 100%; display: none; align-items: center; justify-content: space-between; font-size: 1.4rem;}
.bottom-wrap.mem .mem-calc .receipt > ul > li.total {display: flex;}
.bottom-wrap.mem .mem-calc .receipt > ul > li.total > p {display: flex; font-weight: 600; color: var(--sac-red); font-size: 2rem;}

.bottom-wrap.mem.active .mem-calc .list {display: block;}
.bottom-wrap.mem.active .mem-calc .ic-arrow-up-24 {background-image: url(/resource/img/ico/ic-arrow-down-24-5255f00ce6a588e9ed7f76e50daf71a3.svg);}
.bottom-wrap.mem.active .mem-calc .receipt .sub-title {display: flex;}
.bottom-wrap.mem.active .mem-calc .receipt > ul > li {display: flex;}
.bottom-wrap.mem.active .mem-calc .receipt > ul > li.total {padding-top: 1.4rem; border-top: 1px solid var(--gray03);}