/* to embed a font */
@import url('/css/font-5c9f6b01db70e5f7188321dc4e0047dd.css');

/* root ----------------------- */
:root {
    /* color */
    --black: #000000;
    --white: #ffffff;
    --white-light: #ffffff;

    --red900: #980020;
    --red800: #C8102E; /* main color */
    --red700: #DA163A;
    --red600: #E72343;
    --red500: #E93E55; /* sub color */
    --red400: #FF808B;
    --red300: #FF9EA7;
    --red200: #FECBD4;
    --red50: #FBECEE;

    --brown: #AB6C22; /* point color */
    --light-brown: #F5EDE4;

    --gray900: #121212;
    --gray800: #1C1C1C;
    --gray700: #2B2B2B;
    --gray600: #424243;
    --gray500: #747479;
    --gray400: #BDBEC0;
    --gray300: #D7D8DA;
    --gray200: #E3E5E9;
    --gray100: #F2F3F6;

    --pink: #D54C79;
    --yellow: #F6B22A;
    --green: #00704A;
    --dark-green: #00483A;

    --system-red: #FF3529;
    --system-blue: #236CD9;
}

@media (prefers-color-scheme: dark) {
    :root {
        /* color */
        --black: #ffffff;
        --white: #121212;
        --white-light: #1C1C1C;

        --gray400: #424243;
        --gray300: #424243;
        --gray200: #2B2B2B;
        --gray100: #1C1C1C;
    }
}


header {display: none; align-items: center; width: 100%; height: 6rem; padding: 1.8rem 2rem; position: fixed; top: 0; left: 0; background-color: var(--white); z-index: 100;}
header h1 {font-size: 1.8rem; font-weight: 600; color: var(--black); 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%);}
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 .ic-back-24 {left: 2rem;}
header .ic-setting-24, header .ic-delete-24 {right: 2rem;}

header.red {background-color: var(--red800);}
header.red h1 {color: #fff;}
header.red i {filter: invert(1);}

.container {padding-bottom: 3.4rem; background-color: var(--white);}

/* 메인 ------------------------------ */
.main header {background-color: var(--red800);}
header .img-logo {width: 6rem; height: 2rem; background-image: url(/img/logo/img-logo-wh-4a2a33971954be931f75c6659ecc664e.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%); cursor: pointer;}
header .ic-alarm-24-wh {left: 2rem;}
header .ic-ticket-24 {right: 2rem;}
header .ic-food-24 {right: 5.4rem;}
header .ic-shop-24 {right: 8.8rem;}

.main-wrap {background-color: var(--white); position: relative; z-index: 5; padding: 1.6rem 2rem 3.4rem; transform: translate3d(0,0,0);}
.main-wrap > * + * {margin-top: 4rem;}

.faq-floating {position: fixed; bottom: 2rem; right: 2rem; width: 5.2rem; height: 5.2rem; border-radius: 100%; background-color: var(--red50); box-shadow: 2px 4px 4px rgba(200, 16, 46, 0.16); z-index: 100; display: flex; align-items: center; justify-content: center; cursor: pointer;}

/* 메인 > 현재 경기장 날씨 */
.weather-wrap {display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.2rem;}
.weather-wrap > h6 {font-size: 1.4rem; font-weight: 700; color: #fff; display: flex; align-items: center; cursor: pointer;}
.weather-wrap > ul {display: flex; align-items: center; column-gap: .6rem;}
.weather-wrap > ul > li {font-size: 1.2rem; font-weight: 600; color: #fff;}
.weather-wrap > ul > li.state {font-weight: 500; color: var(--red300); display: flex; align-items: center; column-gap: .3rem;}
.weather-wrap > ul > li.state::before {content: '‧'; margin-left: -.3rem;}

/* 메인 > 다가오는 경기 */
.coming-game-wrap {background-color: var(--red800); width: 100%; height: fit-content; padding: 2rem; position: sticky; top: 0; left: 0; }
.coming-game-tit {display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 2.4rem;}
.coming-game-tit > h2 {font-size: 2.4rem; line-height: 1.4; color: #fff;}
.coming-game-tit > h2 > a {color: #fff; font-weight: 700; position: relative;}
.coming-game-tit > h2 > a::before {content: ''; width: 100%; height: 1px; background-color: #fff; position: absolute; bottom: -1px;}
.coming-game-tit > i {cursor: pointer;}

.coming-game-swiper.swiper {padding: 0 2rem; margin: 0 -2rem 1.2rem; height: calc(17rem + 1.6rem + .6rem);}
.coming-game-swiper .swiper-slide {height: 17rem; display: flex; flex-flow: column; align-items: center; justify-content: center; padding: 2rem 1.6rem; border-radius: .8rem; box-shadow: .4rem .4rem .8rem rgba(0, 0, 0, .12); background-image: url(/img/bg-game-schedule-4a304176391a5465015275543b832a06.svg), linear-gradient(180deg, #980020 0%, #740018 100%); background-repeat: no-repeat; background-size: cover; background-position: right -1.2rem bottom, center; position: relative;}
.coming-game-swiper .swiper-slide .reset {width: 2.4rem; height: 2.4rem; border-radius: 100%; border: 1px solid var(--red600); background-color: var(--red800); position: absolute; top: 1.2rem; right: 1.2rem;}
.coming-game-swiper .swiper-slide > p {font-size: 1.4rem; font-weight: 500; color: var(--red400); margin-bottom: 1.6rem;}
.coming-game-swiper .swiper-slide .team-wrap {width: 100%; display: flex; align-items: center; justify-content: center;}
.coming-game-swiper .swiper-slide .team-wrap .team {display: flex; align-items: center; column-gap: 1.2rem; width: calc((100% - 7rem) / 2);}
.coming-game-swiper .swiper-slide .team-wrap .team > i {width: 5.6rem; height: 5.6rem;} 
.coming-game-swiper .swiper-slide .team-wrap .team > div {flex: 1; display: flex; flex-flow: column; row-gap: .4rem;}
.coming-game-swiper .swiper-slide .team-wrap .team > div > h6 {font-size: 1.1rem; font-weight: 500; color: var(--red400);}
.coming-game-swiper .swiper-slide .team-wrap .team > div > p {font-size: 1.1rem; font-weight: 500; color: #fff;}
.coming-game-swiper .swiper-slide .team-wrap .team:nth-child(1) > div {align-items: flex-end;}
.coming-game-swiper .swiper-slide .team-wrap .score {width: 7rem; margin-top: 1.2rem; display: flex; flex-flow: column; row-gap: .4rem; align-items: center; justify-content: center;}
.coming-game-swiper .swiper-slide .team-wrap .score.before::before {content: 'VS'; font-size: 1.8rem; font-weight: 700; color: #fff;}
.coming-game-swiper .swiper-slide .team-wrap .score > ul {display: flex; align-items: center; justify-content: center; column-gap: 1.6rem;}
.coming-game-swiper .swiper-slide .team-wrap .score > ul > li {width: 3.6rem; font-size: 1.8rem; font-weight: 700; color: #fff; display: flex; align-items: center; justify-content: flex-start; position: relative;}
.coming-game-swiper .swiper-slide .team-wrap .score > ul > li:nth-child(1) {justify-content: flex-end;}
.coming-game-swiper .swiper-slide .team-wrap .score > ul > li + li::before {content: ':'; width: 1.2rem; text-align: center; position: absolute; left: -1.4rem;}
.coming-game-swiper .swiper-slide .team-wrap .score .label.red {background-color: var(--red900); border-color: var(--red900); color: var(--red400);}
.coming-game-swiper .swiper-slide .team-wrap .score .label.gray {background-color: #747479!important; border-color: #747479!important; color: #fff;}
.coming-game-swiper .swiper-slide .btn {width: calc(100% + 3.2rem); height: 4.6rem; margin: 2rem -2rem -2rem; display: flex; align-items: center; border-top: 1px solid rgba(255,255,255,.12);}
.coming-game-swiper .swiper-slide .btn > button {height: 100%; background-color: transparent; border: 0; font-size: 1.4rem; position: relative; color: #fff;}
.coming-game-swiper .swiper-slide .btn > button + button::before {content: ''; width: 1px; height: 1.2rem; background-color: var(--red400); display: block; position: absolute; left: 0;}
.coming-game-swiper .swiper-slide .btn > button:disabled {color: var(--red400)!important; background-color: transparent!important;}

.coming-game-swiper .swiper-slide .none {height: 8.4rem; display: flex; flex-flow: column; row-gap: .8rem; align-items: center; justify-content: center;}
.coming-game-swiper .swiper-slide .none > i {width: 5.2rem; height: 5.2rem;}
.coming-game-swiper .swiper-slide .none > h6 {font-size: 1.4rem; font-weight: 600; color: #fff;}
.coming-game-swiper .swiper-slide .none > p {font-size: 1.2rem; font-weight: 500; color: var(--red400);}

.coming-game-swiper .swiper-pagination-bullets.swiper-pagination-horizontal {bottom: 0;}
.coming-game-swiper .swiper-pagination-bullets.swiper-pagination-horizontal .swiper-pagination-bullet {width: .6rem; height: .6rem; margin: 0 .4rem; background-color: rgba(255,255,255,.2); opacity: 1;}
.coming-game-swiper .swiper-pagination-bullets.swiper-pagination-horizontal .swiper-pagination-bullet-active {background-color: #fff;}

.coming-game-swiper .swiper-pagination-lock {display: flex; align-items: center; justify-content: center;}
.coming-game-swiper .swiper-pagination-lock::before {content: ''; width: .6rem; height: .6rem; display: block; background-color: #fff; border-radius: 100%;}

.versus-game-wrap {background-color: var(--red800); width: 100%; height: fit-content; padding: 1.6rem 0; position: sticky; top: 0; left: 0; }
.versus-swiper.swiper {width: 100%;}
.versus-swiper.swiper .swiper-slide {width: calc(100vw - 4rem); height: 36rem; padding: 1.6rem; display: flex; flex-flow: column; align-items: center; justify-content: flex-end; border-radius: .8rem; overflow: hidden; background-repeat: no-repeat; background-size: cover; background-position: center; background-color: #640015; position: relative;}
.versus-swiper.swiper .swiper-slide * {position: relative; z-index: 2;}
.versus-swiper.swiper .swiper-slide > h2 {font-size: 2.2rem; font-weight: 600; color: #ffffff;}
.versus-swiper.swiper .swiper-slide > p {font-size: 1.4rem; font-weight: 500; color: #ffffff; text-align: center; margin-top: 1rem;}
.versus-swiper.swiper .swiper-slide .button {height: 3.2rem; margin-top: 1.2rem;}
.versus-swiper.swiper .swiper-slide button {width: 9rem; height: 3.2rem; font-size: 1.2rem;}
.versus-swiper.swiper .swiper-slide .emblem {display: flex; align-items: center; column-gap: 1.6rem; margin-bottom: 2.4rem; justify-content: center;}
.versus-swiper.swiper .swiper-slide .emblem i {width: 14rem; height: 14rem;}
.versus-swiper.swiper .swiper-slide .emblem.sm {justify-content: space-between; width: 100%; padding: 0 2rem; position: absolute; bottom: 2rem; margin-bottom: 0; z-index: 1!important;}
.versus-swiper.swiper .swiper-slide .emblem.sm i {width: 6rem; height: 6rem;}
.versus-swiper.swiper .swiper-slide .info {display: flex; align-items: flex-end; column-gap: 1.6rem; justify-content: center; width: 100%;}
.versus-swiper.swiper .swiper-slide .info > li {display: flex; flex-flow: column; row-gap: .6rem; align-items: center; font-size: 2.8rem; font-weight: 700; color: #fff;}
.versus-swiper.swiper .swiper-slide .info > li:first-child {align-items: flex-end;}
.versus-swiper.swiper .swiper-slide .info > li:last-child {align-items: flex-start;}
.versus-swiper.swiper .swiper-slide .info > li:nth-child(2) {text-align: center; width: 4rem;}
.versus-swiper.swiper .swiper-slide .info > li:not(:nth-child(2)) {width: calc((100% - 4rem - 3.2rem) / 2);}
.versus-swiper.swiper .swiper-slide .info > li > span {font-size: 2.8rem; font-weight: 700;}
.versus-swiper.swiper .swiper-slide .info > li > p {font-size: 1.6rem; font-weight: 500;}
.versus-swiper.swiper .swiper-slide .empty {width: 100%; height: 100%; display: flex; flex-flow: column; align-items: center; justify-content: center;}
.versus-swiper.swiper .swiper-slide .empty > p {font-size: 1.8rem; font-weight: 600; color: #ffffff;}

/* .versus-swiper.swiper .swiper-slide:nth-child(1):nth-last-child(1) {width: 100%; margin: 0;} */

/* 메인 > 상단 배너 */
.main-banner .img {width: 100%; height: 26.267vw; background-repeat: no-repeat; background-size: cover; background-position: center; border-radius: .4rem;}
.main-banner .img img {width: 100%;}
.main-banner-wrap {display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 1.2rem;}
.main-banner-wrap > li {width: 100%; height: 43vw; background-repeat: no-repeat; background-size: cover; background-position: center; cursor: pointer; border-radius: .4rem;}

.banner-swiper.swiper {position: relative; border-radius: .4rem;}
.banner-swiper .banner {width: 100%; height: 26.267vw; background-repeat: no-repeat; background-size: cover; background-position: center;}
.banner-swiper .swiper-pagination-fraction {width: fit-content; height: 2rem; padding: 0 .8rem; border-radius: 10rem; background-color: rgba(0, 0, 0, .8); display: flex; align-items: center; justify-content: flex-end; column-gap: .2rem; font-size: 1.2rem; color: rgba(255,255,255,.4); position: absolute; left: initial; right: .8rem; bottom: .8rem;}
.banner-swiper .swiper-pagination-fraction .swiper-pagination-total {width: .8rem; text-align: center; font-size: 1.2rem; color: rgba(255,255,255,.4);}
.banner-swiper .swiper-pagination-fraction .swiper-pagination-current {width: .8rem; text-align: center; font-size: 1.2rem; font-weight: 500; color: #fff;}

/* 메인 > 티켓 예매 내역 */
.ticket-swiper.swiper {position: relative; height: 16.2rem;}
.ticket-swiper .swiper-slide {height: 14rem; border: 1px solid var(--gray200); border-radius: 0 0 .4rem .4rem; border-top: .2rem solid var(--red800); display: flex; flex-flow: column; align-items: center; justify-content: center; background-image: url(/img/bg-notice-c3739c0ae87360b17185b7c724a61a32.svg); background-repeat: no-repeat; background-size: cover; background-position: right - bottom;}
.ticket-swiper .swiper-slide::before {content: ''; display: block; width: 1.6rem; height: 1.6rem; background-color: var(--white); border-width: 1px; border-style: solid; border-radius: 100%; border-color: var(--white) var(--white) var(--gray200) var(--gray200); transform: rotate(-135deg); position: absolute; left: -.8rem; top: 8.2rem;}
.ticket-swiper .swiper-slide::after {content: ''; display: block; width: 1.6rem; height: 1.6rem; background-color: var(--white); border-width: 1px; border-style: solid; border-radius: 100%; border-color: var(--white) var(--white) var(--gray200) var(--gray200); transform: rotate(45deg); position: absolute; right: -.8rem; top: 8.2rem;}
.ticket-swiper .swiper-slide > div {width: 100%; display: flex; flex-flow: column; align-items: center; justify-content: center; padding: 2.4rem 0;}
.ticket-swiper .swiper-slide > div > h6 {font-size: 1.4rem; font-weight: 600; line-height: 1.6;}
.ticket-swiper .swiper-slide > div > p {font-size: 1.2rem; color: var(--gray500); line-height: 1.6;}
.ticket-swiper .swiper-slide > button {width: 100%; height: fit-content; padding: 1.6rem 0; border-radius: 0; line-height: 1; font-size: 1.4rem; background-color: transparent; border-color: transparent; color: var(--red800); border-top: 1px dashed var(--gray200);}

.ticket-swiper .swiper-pagination-bullets.swiper-pagination-horizontal {bottom: 0;}
.ticket-swiper .swiper-pagination-bullet {width: .6rem; height: .6rem; margin: 0 .4rem; background-color: var(--gray200); opacity: 1;}
.ticket-swiper .swiper-pagination-bullet-active {background-color: var(--red800);}

.ticket-swiper .swiper-pagination-lock {display: flex; align-items: center; justify-content: center;}
.ticket-swiper .swiper-pagination-lock::before {content: ''; width: .6rem; height: .6rem; display: block; background-color: var(--gray200); border-radius: 100%;}

@media (prefers-color-scheme: dark) {
    .ticket-swiper .swiper-slide {background-image: url(/img/bg-notice-dark-29dde124ee7ae4b3baca5ab8775297ab.svg);}
}

/* 메인 > 승부예측 */
.victory-wrap > button {margin-top: 1.6rem; height: 4.4rem; font-size: 1.4rem; font-weight: 600; background-color: var(--white-light); border: 1px solid var(--gray200); color: var(--black);}

@media (prefers-color-scheme: dark) {
    .victory-wrap > button > i {filter: invert(1);}
}

/* 메인 > 쓱퀴즈 */
.mission-wrap {margin: 0 -2rem; padding: 2rem 2rem 0; position: relative; display: flex; flex-flow: column; align-items: center; justify-content: center;}
.mission-wrap > * {position: relative; z-index: 1;}
.mission-wrap::before {content: ''; width: 100%; height: 35.2vw; display: block; background-image: url(/img/bg-mission-15b7b5b3177e0a15d169e6ed0d189609.png); background-repeat: no-repeat; background-size: cover; background-position: center; position: absolute; top: 0; left: 0; z-index: 0;}
.mission-wrap .label {background-color: var(--red800); color: #fff;}
.mission-wrap .label + .info {margin-top: .8rem;}
.mission-wrap .label + .info + .img {margin-top: 1rem;}
.mission-wrap .info {width: calc(100% - 10rem); display: flex; align-items: flex-start; column-gap: .4rem; margin-top: 1.2rem;}
.mission-wrap .info > p {font-size: 2rem; font-weight: 700; color: var(--red800);}
.mission-wrap .info > h6 {font-size: 1.6rem; font-weight: 600; line-height: 1.4; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; line-clamp: 2; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.mission-wrap .img {width: 7.2rem; height: 7.2rem; background-image: url(/img/img-mission-clock-a431c69344a8d2d92bf9461f22ef518f.png); background-repeat: no-repeat; background-size: contain; background-position: center; margin-top: 2.4rem;}

.mission-wrap .team-wrap {display: flex; align-items: center; column-gap: .8rem; position: absolute; right: 2rem; bottom: -1.8rem;}
.mission-wrap .team-wrap i {width: 6.4rem; height: 6.4rem;}

@media (prefers-color-scheme: dark) {
    .mission-wrap::before {background-image: url(/img/bg-mission-dark-ad33adf4f7eaaac249900353084a852e.png);}
}

/* 메인 > 공지사항 */
.notice-swiper.swiper {margin: -2rem -2rem 0; padding: 2rem; height: calc(13.8rem + 1.6rem + .6rem + 2rem);}
.notice-swiper .swiper-slide {height: 13.8rem; background-color: var(--white-light); border: 1px solid var(--gray100); box-shadow: .4rem .4rem 1.2rem rgba(0, 0, 0, .04); padding: 2rem; background-image: url(/img/bg-notice-c3739c0ae87360b17185b7c724a61a32.svg); background-repeat: no-repeat; background-size: cover; background-position: right center;}
.notice-swiper .swiper-slide > h4 {height: 4.8rem; font-size: 1.6rem; font-weight: 600; line-height: 1.5; margin-top: .4rem; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; line-clamp: 2; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.notice-swiper .swiper-slide > p {font-size: 1.2rem; color: var(--gray500); margin-top: 1.2rem;}
.notice-swiper .swiper-slide > p {font-size: 1.2rem; color: var(--gray500); margin-top: 1.2rem;}

.notice-swiper .swiper-pagination-bullets.swiper-pagination-horizontal {bottom: 0;}
.notice-swiper .swiper-pagination-bullet {width: .6rem; height: .6rem; margin: 0 .4rem; background-color: var(--gray200); opacity: 1;}
.notice-swiper .swiper-pagination-bullet-active {background-color: var(--red800);}

@media (prefers-color-scheme: dark) {
    .notice-swiper .swiper-slide {background-image: url(/img/bg-notice-dark-29dde124ee7ae4b3baca5ab8775297ab.svg);}
}

/* 메인 > 랜더스 스토리 */
.story-wrap > div {margin-bottom: 2.4rem;}
.story-wrap > div .img {height: 50vw; border-radius: .8rem; display: flex; align-items: center; justify-content: center; position: relative; background-repeat: no-repeat; background-position: center; background-size: cover;}
.story-wrap > div .img::before {content: ''; width: 100%; height: 100%; background-color: rgba(0, 0, 0, .12); position: absolute; top: 0; left: 0; border-radius: 0.4rem; z-index: 1;}
.story-wrap > div .img > i {z-index: 2; width: 4.8rem; height: 4.8rem;}
.story-wrap > div .info {margin-top: 1.2rem;}
.story-wrap > div .info > h6 {width: 30rem; font-size: 1.6rem; font-weight: 600; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.story-wrap > div .info > ul {margin-top: 1.2rem; display: flex; align-items: center; column-gap: .9rem;}
.story-wrap > div .info > ul > li {font-size: 1.2rem; color: var(--gray500); position: relative; display: flex; align-items: center;}
.story-wrap > div .info > ul > li + li::before {content: ''; width: 1px; height: 1rem; display: block; background-color: var(--gray300); position: absolute; left: -.5rem;}

/* 메인 > 최애 선수 영상 */
.my-player-video {position: relative; margin: 4rem -2rem 0; padding: 4rem 2rem 0;}
.my-player-video > * {position: relative; z-index: 1;}
.my-player-video::before {content: ''; width: 100vw; height: 16.8rem; position: absolute; top: 0; left: 0; background-color: var(--gray700); z-index: 0;}
.my-player-video .title {align-items: flex-end;}
.my-player-video .title > h2 {color: #fff;}

.my-player-none {width: 100%; height: 6.2rem; border-radius: 1.2rem; background: linear-gradient(126deg, #FBECEE 22.81%, #FECBD4 82.99%); display: flex; align-items: center; justify-content: center; font-size: 1.4rem; font-weight: 500;}
.my-player-none a {font-size: 1.4rem; font-weight: 600; color: var(--red800); text-decoration: underline;}

.player-video-swiper.swiper {margin: 0 -2rem; padding: 0 2rem;}
.player-video-swiper .swiper-slide {width: 24rem; display: flex; flex-flow: column; row-gap: 1rem;}
.player-video-swiper .swiper-slide .img {width: 24rem; height: 13.5rem; background-repeat: no-repeat; background-size: cover; background-position: center; border-radius: .4rem; display: flex; align-items: center; justify-content: center; position: relative;}
.player-video-swiper .swiper-slide .img::before {content: ''; width: 100%; height: 100%; background-color: rgba(0, 0, 0, .12); position: absolute; top: 0; left: 0; border-radius: .4rem; z-index: 1;}
.player-video-swiper .swiper-slide .img > i {z-index: 2; width: 4rem; height: 4rem;}
.player-video-swiper .swiper-slide .info > h6 {width: 24rem; font-size: 1.4rem; font-weight: 500; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.player-video-swiper .swiper-slide .info > ul {margin-top: 1.2rem; display: flex; align-items: center; column-gap: .9rem;}
.player-video-swiper .swiper-slide .info > ul > li {font-size: 1.2rem; color: var(--gray500); position: relative; display: flex; align-items: center;}
.player-video-swiper .swiper-slide .info > ul > li + li::before {content: ''; width: 1px; height: 1rem; display: block; background-color: var(--gray300); position: absolute; left: -.5rem;}

/* 메인 > 랜더스 온라인샵 */
.shop-banner {height: 42.4vw; border-radius: 1.2rem; background-repeat: no-repeat; background-size: cover; background-position: center; margin-bottom: 1.2rem;}

.shop-wrap {display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 1.2rem;}
.shop-wrap > li {display: flex; flex-flow: column; row-gap: .8rem;}
.shop-wrap > li .img {width: 100%; height: 43vw; border: 1px solid var(--gray200); border-radius: .4rem; background-color: #fff; background-repeat: no-repeat; background-size: 70%; background-position: center;}
.shop-wrap > li .info > h6 {width: 14rem; font-size: 1.2rem; font-weight: 500; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.shop-wrap > li .info > div {display: flex; align-items: flex-end; column-gap: .4rem; font-size: 1.4rem; font-weight: 700; margin-top: 1.2rem;}
.shop-wrap > li .info > div > p {font-size: 1.6rem; font-weight: 700; display: flex; align-items: flex-end; column-gap: .2rem;}
.shop-wrap > li .info > div > p > span {font-size: 1.2rem; font-weight: 500; line-height: 1.3;}
.shop-wrap > li .info > div .discount {font-size: 1.2rem; font-weight: 500; color: var(--gray400); text-decoration: line-through;}
.shop-wrap > li .info > div .discount > span {font-size: 1rem;}
.shop-wrap > li .info .label {margin-top: .6rem; padding: .2rem;}
.shop-wrap > li .info .label.red {background-color: var(--red800); border-color: var(--red800);}
.shop-wrap > li .info .label.brown {background-color: var(--brown); border-color: var(--brown); color: #fff;}

.shop-swiper.swiper {margin: 0 -2rem; padding: 0 2rem;}
.shop-swiper .swiper-slide {display: flex; align-items: center; column-gap: .8rem; width: fit-content;}
.shop-swiper .swiper-slide .img {width: 7.2rem; height: 7.2rem; background-repeat: no-repeat; background-size: 70%; background-position: center; background-image: #fff; border: 1px solid var(--gray200); border-radius: .4rem;}
.shop-swiper .swiper-slide .info {height: 7.2rem; position: relative;}
.shop-swiper .swiper-slide .info .label {padding: 0 .2rem; height: 1.4rem;}
.shop-swiper .swiper-slide .info .label.red {background-color: var(--red800); border-color: var(--red800);}
.shop-swiper .swiper-slide .info > h6 {width: 11.4rem; margin-top: .2rem; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; line-clamp: 2; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 1.2rem; font-weight: 500; line-height: 1.5; word-break: keep-all;}
.shop-swiper .swiper-slide .info > div {display: flex; align-items: flex-end; column-gap: .2rem; font-size: 1.4rem; font-weight: 700; position: absolute; left: 0; bottom: 0;}
.shop-swiper .swiper-slide .info > div .discount {font-size: 1rem; font-weight: 500; color: var(--gray400); text-decoration: line-through;}

/* 메인 > 하단 배너 */
.over-banner-swiper.swiper {position: relative; margin: 0 -2rem; width: 100vw;}
.over-banner-swiper .banner {width: 100%; height: 37.5vw; background-repeat: no-repeat; background-size: cover; background-position: center;}
.over-banner-swiper .swiper-pagination-fraction {width: fit-content; height: 2rem; padding: 0 .8rem; border-radius: 10rem; background-color: rgba(0, 0, 0, .8); display: flex; align-items: center; justify-content: flex-end; column-gap: .2rem; font-size: 1.2rem; color: rgba(255,255,255,.4); position: absolute; left: initial; right: 2rem; bottom: 1.2rem;}
.over-banner-swiper .swiper-pagination-fraction .swiper-pagination-total {width: .8rem; text-align: center; font-size: 1.2rem; color: rgba(255,255,255,.4);}
.over-banner-swiper .swiper-pagination-fraction .swiper-pagination-current {width: .8rem; text-align: center; font-size: 1.2rem; font-weight: 500; color: #fff;}

/* 메인 > 최애 선수 상품 */
.my-player-prod {position: relative;}
.my-player-prod .title {align-items: flex-end;}

.player-prod-wrap {background-color: var(--gray100); border-radius: .8rem; padding: 2rem;}
.player-prod-wrap > li {display: flex; align-items: center; column-gap: 1.2rem;}
.player-prod-wrap > li + li {margin-top: 2rem;}
.player-prod-wrap > li .img {width: 7.2rem; height: 7.2rem; border-radius: .4rem; border: 1px solid var(--gray200); background-color: #fff; background-repeat: no-repeat; background-size: 80%; background-position: center;}
.player-prod-wrap > li .info > h6 {font-size: 1.4rem; font-weight: 500; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 17rem;}
.player-prod-wrap > li .info > div {display: flex; align-items: flex-end; column-gap: .4rem; font-size: 1.4rem; font-weight: 700; margin-top: 1.2rem;}
.player-prod-wrap > li .info > div > p {font-size: 1.6rem; font-weight: 700; display: flex; align-items: flex-end; column-gap: .2rem;}
.player-prod-wrap > li .info > div > p > span {font-size: 1.2rem; font-weight: 500; line-height: 1.3;}
.player-prod-wrap > li .info > div .discount {font-size: 1.2rem; font-weight: 500; color: var(--gray400); text-decoration: line-through;}
.player-prod-wrap > li .info > div .discount > span {font-size: 1rem;}
.player-prod-wrap > li .info .label {margin-top: .6rem; padding: .2rem;}
.player-prod-wrap > li .info .label.red {background-color: var(--red800); border-color: var(--red800);}
.player-prod-wrap > li .info .label.brown {background-color: var(--brown); border-color: var(--brown); color: #fff;}

/* 메인 > 바로가기 */
.quick-wrap {display: flex; align-items: center; justify-content: space-between;}
.quick-wrap > li {display: flex; flex-flow: column; row-gap: .8rem; align-items: center; padding-top: .8rem;}
.quick-wrap > li:nth-child(1):nth-last-child(3), .quick-wrap > li:nth-child(1):nth-last-child(3) ~ li {width: calc(100% / 3);} 
.quick-wrap > li:nth-child(1):nth-last-child(4), .quick-wrap > li:nth-child(1):nth-last-child(4) ~ li {width: calc(100% / 4);} 
.quick-wrap > li:nth-child(1):nth-last-child(5), .quick-wrap > li:nth-child(1):nth-last-child(5) ~ li {width: calc(100% / 5);} 
.quick-wrap > li > p {font-size: 1.2rem; font-weight: 500;}

@media (prefers-color-scheme: dark) {
    .quick-wrap > li > i {filter: invert(1);}
}

/* 메인 > SNS */
.sns-wrap > li {height: 4.4rem; border: 1px solid var(--gray200); background-color: var(--white-light); border-radius: .4rem; display: flex; align-items: center; justify-content: center; column-gap: .2rem; cursor: pointer;}
.sns-wrap > li + li {margin-top: .8rem;}
.sns-wrap > li > p {font-size: 1.4rem; font-weight: 600;}

.sns-wrap.circle {display: grid; grid-template-columns: repeat(3, 1fr)}
.sns-wrap.circle > li {height: fit-content; display: flex; flex-flow: column; row-gap: .8rem; align-items: center; justify-content: center; border: 0; background-color: transparent;}
.sns-wrap.circle > li + li {margin-top: 0;}
.sns-wrap.circle > li > p {font-size: 1.2rem; font-weight: 500;}

/* 메인 > 출석체크 팝업 */
.attendance-wrap {padding: 0 2rem;}
.attendance-wrap > p {text-align: center; font-size: 1.4rem; line-height: 1.5;}
.attendance-wrap > div {display: flex; align-items: center; justify-content: space-between; height: 3rem; margin-top: 1.6rem; border-radius: .4rem; background-color: var(--gray100); padding: 0 1.6rem;}
.attendance-wrap > div > h6 {font-size: 1.2rem; font-weight: 500;}
.attendance-wrap > div > p {font-size: 1.4rem; font-weight: 700; color: var(--red800);}
.attendance-wrap > ul {width: 26rem; margin: 2.4rem auto 0; display: flex; flex-flow: wrap; justify-content: center; grid-gap: 1.6rem 4rem;}
.attendance-wrap > ul > li {display: flex; flex-flow: column; row-gap: .8rem; align-items: center; width: calc((100% - 8rem) / 3);}
.attendance-wrap > ul > li .img {width: 4.8rem; height: 4.8rem; background-image: url(/img/icon/img-stamp-60-019bb6f353f489056ff5fcefea811396.svg); background-repeat: no-repeat; background-size: contain; background-position: center;}
.attendance-wrap > ul > li > p {font-size: 1.2rem; font-weight: 500; color: var(--gray400);}
.attendance-wrap > ul > li.active .img {background-image: url(/img/icon/img-stamp-60-ov-5515bbf031d74834e00cefd411724ddf.svg);}
.attendance-wrap > ul > li.active > p {color: var(--red800);}

.popup .pop-wrap .pop-cont > p.attendance-desc {margin-top: 2.4rem; padding: 0 2rem 0 2.8rem; font-size: 1.2rem; text-align: left; color: var(--gray500); text-indent: -.8rem;}

/* 메인 > 체크인 팝업 */
.checkin-pop-wrap {display: flex; flex-flow: column; row-gap: 2rem; align-items: center;}
.checkin-pop-wrap > p {text-align: center; font-size: 1.4rem; line-height: 1.5;}
.checkin-pop-wrap > div {display: flex; align-items: center; justify-content: center; height: 3rem; padding: 0 2rem; font-size: 1.4rem; font-weight: 600; color: var(--red800); background-color: var(--gray100); border-radius: .2rem;}
.checkin-pop-wrap > div + p {margin-top: -1.2rem;}
.checkin-pop-wrap .stamp {width: 8rem; height: 8rem; border-radius: .4rem; border-color: var(--red900); background-image: url(/img/img-checkin-win-4eeab90a10e0f66f957f793725ed94c5.png); background-repeat: no-repeat; background-size: contain; background-position: center;}
.checkin-pop-wrap .stamp::before {content: '입장'; color: #fff; width: fit-content; height: fit-content; background-color: transparent; padding-top: 3.2rem;}

.qr-checkin {display: flex; flex-flow: column; row-gap: 1.2rem; align-items: center; justify-content: center;}
.qr-checkin > i {width: 8rem; height: 8rem;}
.qr-checkin > p {text-align: center; font-size: 1.4rem; font-weight: 500; line-height: 1.6;}
.qr-checkin > span {text-align: center; font-size: 1.2rem; line-height: 1.4; color: var(--gray500);}
.qr-checkin .img-spot {background-image: url(/img/icon/img-spot-e05e468848e03a2f4f55b8c7aa213420.svg);}
.qr-checkin .img-fanfare {background-image: url(/img/icon/img-fanfare-96f314077c841649d43d9340fad5811c.svg);}

/* 메인 > 알람 */
.notify-wrap {background-color: var(--gray100); min-height: 100vh; margin-bottom: -3.4rem; display: flex; flex-flow: column; row-gap: 1px;}
.notify-wrap > li {display: flex; flex-flow: column; background-color: var(--white); padding: 2rem 2rem 2rem 6.4rem; background-image: url(/img/icon/img-won-alarm-c27c9532c032a2ad5f38c676cb50c4b5.svg); background-repeat: no-repeat; background-size: 3.2rem; background-position: left 2rem center;}
.notify-wrap > li.new > h6::after {content: ''; width: .4rem; height: .4rem; background-color: var(--yellow); border-radius: 100%;}
.notify-wrap > li > h6 {font-size: 1.6rem; font-weight: 600; margin-bottom: .4rem; display: flex; align-items: flex-start; column-gap: .2rem;}
.notify-wrap > li > p {font-size: 1.4rem; line-height: 1.5;}
.notify-wrap > li > img {width: 100%; display: block; margin-top: .8rem; border-radius: .8rem;}
.notify-wrap > li > a {margin-top: 1.6rem; font-size: 1.2rem; color: var(--gray500); text-decoration: underline; text-decoration-color: var(--gray500); text-underline-offset: .2rem; font-weight: 500;}
.notify-wrap > li > span {font-size: 1.2rem; color: var(--gray500); margin-top: .2rem; display: block; margin-left: auto;}
.notify-wrap > li > p + span {margin-top: 1.6rem;}

.main-box .personal {font-size: 1.4rem; font-weight: 600; color: var(--gray500); text-decoration: underline; display: flex; align-items: center; justify-content: center;}

/* 로그인 회원가입 ------------------------------ */
/* 로그인 */
.login {width: 100vw; min-height: calc(100vh - 10rem); padding: 2rem 2rem 3.4rem; margin-top: 10rem; display: flex; flex-flow: column; background-color: var(--white);}
.login .img-emblem-ssg-120 {margin-bottom: 2.4rem;}
.login > p {font-size: 2rem; line-height: 1.5; margin-bottom: 2.4rem; align-self: flex-start;}

.login-info {width: 100%; display: flex; flex-flow: column; row-gap: .8rem;}
.login-info > li input[type="text"] {padding-left: 4rem; background-image: url(/img/icon/ic-user-20-1b1f2587850a815445f210f83e922a38.svg); background-repeat: no-repeat; background-size: 2rem; background-position: left 1rem center;}
.login-info > li input[type="password"] {padding-left: 4rem; background-image: url(/img/icon/ic-password-20-0ddcc5895e53b3f9f7901418a48f8e2f.svg); background-repeat: no-repeat; background-size: 2rem; background-position: left 1rem center;}
.login-info > li label {margin-top: .4rem;}
.login-info > li button {margin-top: 1.2rem;}

.login-sup {margin-top: 2rem; display: flex; align-items: center; justify-content: center; column-gap: 2.5rem;}
.login-sup > li {font-size: 1.4rem; font-weight: 500; color: var(--gray500); position: relative; display: flex; align-items: center; cursor: pointer;}
.login-sup > li + li::before {content: ''; width: 1px; height: 1.2rem; display: block; background-color: var(--gray300); position: absolute; left: -1.3rem;}

.sns-login {margin-top: 5.6rem; display: flex; flex-flow: column; align-items: center; row-gap: 1.6rem;}
.sns-login > h6 {font-size: 1.4rem; font-weight: 500; color: var(--black);}
.sns-login > ul {display: flex; align-items: center; justify-content: center; column-gap: 1.2rem;}
.sns-login > ul > li {cursor: pointer;}

.id-list {display: flex; flex-flow: column;}
.id-list > li {font-size: 1.4rem; font-weight: 500; color: var(--red800); line-height: 1.6;}
.id-list > p {font-size: 1.4rem; text-align: center; line-height: 1.6; font-weight: 500;}
.id-list > ul {border: 1px solid var(--gray200); border-radius: .4rem; padding: 2rem 0; display: flex; flex-flow: column; align-items: center; justify-content: center; margin-top: 1.6rem;}
.id-list > ul > li {font-size: 1.4rem; line-height: 1.6;}

.popup .id-list {padding: 0 2rem;}

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

/* 로그인 > 2단계 인증 */
.certification-login > p {font-size: 1.4rem; font-weight: 500; line-height: 1.6; margin-top: 2rem;}
.certification-login .security-img {border-radius: .4rem; overflow: hidden; margin-top: 1.6rem;}
.certification-login .security-img img {width: 100%;}
.certification-login .security-input {margin-top: .8rem; display: flex; align-items: center; column-gap: .8rem;}
.certification-login .security-input input[type="text"] {background-image: none; padding: 0 1.2rem; flex: 1;}
.certification-login .security-input button {width: 4.4rem; height: 4.4rem; margin-top: 0; background-color: var(--gray500); border-color: var(--gray500);}
.certification-login > span {margin-top: 1.2rem; font-size: 1.2rem; color: var(--system-red); line-height: 1.4; margin-top: .8rem; display: block;}

/* 로그인 > 회원가입 > 약관동의 */
.info-guide {display: flex; flex-flow: column; margin-bottom: 3.2rem; row-gap: .8rem;}
.info-guide > h6 {font-size: 1.6rem; font-weight: 600; color: var(--black);}
.info-guide > p {font-size: 1.4rem; color: var(--black); line-height: 1.5; word-break: keep-all;}
.info-guide > ol {display: flex; flex-flow: column; row-gap: 1.6rem; margin-top: .8rem; list-style: decimal; padding-left: 1.6rem;}
.info-guide > ol > li {font-size: 1.4rem; line-height: 1.6; word-break: keep-all;}


.info-guide.mem > p {font-size: 1.6rem; font-weight: 500; word-break: keep-all;}
.info-guide.mem > ul {display: flex; flex-flow: column; margin-top: .8rem;}
.info-guide.mem > ul > li {font-size: 1.2rem; line-height: 1.6; word-break: keep-all; color: var(--gray500);}

.terms-agree .all label > span {font-weight: 500;}
.terms-agree .all + li {margin-top: 2rem; border-top: 1px solid var(--gray100); padding-top: 2rem;}
.terms-agree > li {display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; grid-gap: .8rem;}
.terms-agree > li + li {margin-top: 1.6rem;}
.terms-agree > li label {column-gap: 1.2rem;}
.terms-agree > li > a {font-size: 1.4rem; font-weight: 500; color: var(--gray500);}
.terms-agree > li > ul {width: 100%; background-color: var(--gray100); padding: 1.2rem; display: flex; flex-flow: column; row-gap: .8rem;}

.pop-cont .terms-agree {width: calc(100% - 4rem); margin: 2.4rem auto 0; background-color: var(--gray100); padding: 1.2rem; min-height: 4.4rem;}
.pop-cont .terms-agree > li label {column-gap: .6rem;}
.pop-cont .terms-agree > li a {font-size: 1.2rem; text-decoration: underline;}

/* 로그인 > 회원가입 > 정보입력(회원정보 입력) */
.info-input > li {width: 100%; display: flex; flex-flow: column; row-gap: .8rem;}
.info-input > li + li {margin-top: 1.6rem;}
.info-input > li > h6 {font-size: 1.2rem; font-weight: 500; color: var(--black);}
.info-input > li > div {display: flex; align-items: center; column-gap: .8rem;}
.info-input > li > div > input {width: calc(100% - 8.8rem);}
.info-input > li > div > button {width: 8rem; height: 4.4rem; font-size: 1.4rem; font-weight: 500; line-height: 1.2; background-color: var(--gray500); border-color: var(--gray500);}
.info-input > li > p {font-size: 1.4rem; font-weight: 500;}
.info-input > li > span {font-size: 1.2rem; color: var(--system-red); line-height: 1.4;}
.info-input > li > button {margin-top: .4rem;}
.info-input > li > button + a {margin: 1.6rem auto 0; font-size: 1.4rem; text-align: center; text-decoration: underline;}
.info-input .delete {flex-flow: initial; align-items: center; justify-content: space-between;}
.info-input .delete > p {font-size: 1.2rem; font-weight: 500; color: var(--gray500);}
.info-input .delete > a {font-size: 1.2rem; font-weight: 500; text-decoration: underline; color: var(--gray500);}
.info-input .birth {display: grid; grid-template-columns: repeat(3, 1fr); column-gap: .8rem;;}
.info-input .birth select {width: 100%;}

.pop-cont .info-input {padding: 0 2rem;}

/* 로그인 > 비밀번호 재설정 */
.cont-box > .desc {font-size: 1.4rem; line-height: 1.6; margin-bottom: 3.2rem;}

/* 마이페이지 ------------------------------ */
/* 마이페이지 */
.profile-wrap {display: flex; align-items: center; flex-wrap: wrap; grid-gap: 2.4rem 1rem;}
.profile-wrap .profile {width: 4.8rem; height: 4.8rem; background-color: #fff; border: 1px solid var(--gray200); border-radius: 100%; background-repeat: no-repeat; background-size: cover; background-position: top center; position: relative;}
.profile-wrap .profile .modify {width: 2rem; height: 2rem; border-radius: 100%; background-color: var(--gray500); background-image: url(/img/icon/ic-pencil-12-e2657a40ceaa90287d9395d80d86393d.svg); background-repeat: no-repeat; background-size: 1.2rem; background-position: center; position: absolute; right: -.2rem; bottom: 0; cursor: pointer;}
.profile-wrap > p {font-size: 1.8rem; line-height: 1.5;}
.profile-wrap > p .family {color: #970022;}
.profile-wrap > p .frontier {color: var(--red800);}
.profile-wrap > p .legend {color: var(--yellow);}
.profile-wrap > p .allstar {color: var(--dark-green);}
.profile-wrap > p .regular {color: var(--brown);}
.profile-wrap > p .rookie {color: var(--gray400);}
.profile-wrap > p .junior {color: #529B93;}
.profile-wrap > button {border-color: var(--gray200); background-color: var(--white-light); color: var(--black); font-size: 1.4rem;}

@media (prefers-color-scheme: dark) {
    .profile-wrap > button > i {filter: invert(1);}
}

.benefit-guide {background-color: var(--red50); border-radius: .4rem; padding: 1.2rem 2rem; display: flex; align-items: center; justify-content: center; text-align: center; font-size: 1.2rem; color: var(--red800); margin-top: 2.4rem;}
.benefit-guide span {font-weight: 600;}

.membership-card {margin-top: 2rem; border: 1px solid var(--gray100); border-radius: .8rem; box-shadow: .4rem .4rem 1.2rem rgba(0, 0, 0, .04); background-color: var(--white); overflow: hidden;}
.membership-card .membership-grade {padding: 1.6rem; display: flex; align-items: center; justify-content: space-between;}
.membership-card .membership-grade .membership-name {display: flex; align-items: center; column-gap: .8rem;}
.membership-card .membership-grade .membership-name > li {display: flex; align-items: center; column-gap: .8rem; font-size: 1.4rem; font-weight: 500;}
.membership-card .membership-grade .membership-name > li + li::before {content: ''; width: 1px; height: 1rem; background-color: var(--gray200);}
.membership-card .membership-grade .membership-name > li > i {width: 2.8rem; height: 2.8rem;}
.membership-card .membership-grade .membership-name > li  > p {font-size: 1.4rem; font-weight: 600;}
.membership-card .membership-grade > a {font-size: 1.2rem; font-weight: 600; color: var(--gray500); cursor: pointer;}
.membership-card .membership-barcode {border-top: 1px solid var(--gray100); padding: 2rem 2rem 3rem; display: flex; flex-flow: column; align-items: center; justify-content: center; row-gap: 1.6rem;}
.membership-card .membership-barcode .barcode {width: 17.5rem; height: 4rem; background-repeat: no-repeat; background-size: contain; background-position: center;}
.membership-card .membership-barcode > p {font-size: 1.4rem; font-weight: 500;}

@media (prefers-color-scheme: dark) {
    .membership-card {border-color: var(--white);}
    .membership-card .membership-barcode {border-top-color: var(--white);}
}

.membership-copy {padding: 0 1.6rem 1.6rem; display: flex; align-items: center; justify-content: space-between;}
.membership-copy > p {font-size: 1.2rem; color: var(--gray500);}
.membership-copy > div {display: flex; align-items: center; column-gap: .8rem;}
.membership-copy > div  > p {font-size: 1.2rem; color: var(--gray500);}
.membership-copy > div  > p {font-size: 1.2rem; color: var(--gray500);}

.membership-double + .membership-double {border-top: 1px solid var(--gray100);}
.membership-double > p {height: 4.4rem; background-color: var(--gray100); display: flex; align-items: center;  justify-content: center; column-gap: .8rem; font-size: 1.4rem; font-weight: 500; cursor: pointer;}
.membership-double > div {display: none;}

.membership-double.active > p > i {background-image: url(/img/icon/ic-arrow-up-20-c07fc50e5779e3b374c8faa84bba3ac6.svg);}
.membership-double.active > div {display: block;}

.my-benefit {margin-top: 1.2rem; margin-bottom: 3.2rem; display: flex; align-items: center; justify-content: center; background-color: var(--white); border-radius: .4rem; box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.04); border: 1px solid var(--gray100);}
.my-benefit > li {height: 6.8rem; display: flex; flex-flow: column; align-items: center; justify-content: center; row-gap: .8rem;}
.my-benefit > li:nth-child(1):nth-last-child(3), .my-benefit > li:nth-child(1):nth-last-child(3) ~ li {width: calc(100% / 3);}
.my-benefit > li + li {border-left: 1px solid var(--gray100);}
.my-benefit > li > h6 {font-size: 1.2rem; font-weight: 500; color: var(--black);}
.my-benefit > li > p {font-size: 1.6rem; font-weight: 600; color: var(--red800);}

.my-quick {border-top: 1px solid var(--black);}
.my-quick > li {padding: 1.6rem 0; font-size: 1.4rem; font-weight: 500; color: var(--black); border-bottom: 1px solid var(--gray200); background-image: url(/img/icon/ic-arrow-right-20-7d4e9110cc29f49303afac10994db08e.svg); background-repeat: no-repeat; background-size: 2rem; background-position: right center; cursor: pointer;}

@media (prefers-color-scheme: dark) {
    .my-benefit > li > div > i {filter: invert(1);}
    .my-quick > li {background-image: url(/img/icon/ic-arrow-right-20-wh-9884a2a2faafbbd82f6a7e97fd7b1c88.svg);}
}

/* 마이페이지 > 설정 */
.setting-menu > li {min-height: 4.6rem; padding: 1rem 0; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; row-gap: .8rem;}
.setting-menu > li + li {border-top: 1px solid var(--gray200);}
.setting-menu > li > h6 {display: flex; flex-flow: column; row-gap: .8rem;}
.setting-menu > li > h6 > a {font-size: 1.2rem; font-weight: 500; color: var(--gray500); text-decoration: underline;}
.setting-menu > li > h6,
.setting-menu > li > p {font-size: 1.4rem; font-weight: 500; color: var(--black);}
.setting-menu > li > p {cursor: pointer;}
.setting-menu > li > div {width: 100%;}
.setting-menu > li > div > a {font-size: 1.2rem; font-weight: 500; color: var(--gray500); text-decoration: underline;}

.security-setting > li {height: 4.6rem; display: flex; align-items: center; justify-content: space-between;}
.security-setting > li > h6 {display: flex; align-items: center; column-gap: .2rem; font-size: 1.4rem; font-weight: 500; color: var(--black);}

.cont-box .personal {font-size: 1.4rem; font-weight: 600; color: var(--red800); text-decoration: underline;}

/* 마이페이지 > 설정 > 2단계 인증 */
.certification-state {background-color: var(--gray100); padding: 2rem; display: flex; flex-flow: column; row-gap: .8rem; margin-bottom: 1.6rem;}
.certification-state > h5 {font-size: 1.6rem; font-weight: 700; align-self: center;}
.certification-state > h6 {font-size: 1.6rem; font-weight: 700;}
.certification-state > p {font-size: 1.4rem; line-height: 1.6; word-break: keep-all;}

/* 마이페이지 > 설정 > 개인정보 처리방침 */
.policy-list {display: flex; flex-flow: column; grid-gap: 1.2rem;}
.policy-list + * {margin-top: 3.2rem;}
.policy-list > li {font-size: 1.4rem; line-height: 1.6; text-indent: -1.4rem; padding-left: 1.4rem; word-break: keep-all;}
.policy-cont {display: flex; flex-flow: column; row-gap: 1.6rem;}
.policy-cont > p {font-size: 1.4rem; font-weight: 500;}
.policy-cont > ul {display: flex; flex-flow: column; grid-gap: .8rem;}
.policy-cont > ul > li {font-size: 1.4rem; line-height: 1.6; word-break: keep-all; text-indent: -2rem; padding-left: 2rem;}

/* 마이페이지 > 설정 > 이용약관 */
.terms-cont * {font-size: 1.4rem; line-height: 1.6; word-break: keep-all;}
.terms-cont > h4 {font-weight: 700;}
.terms-cont > h6 {font-weight: 600; margin-top: 2rem;}
.terms-cont li {text-indent: -1.6rem; padding-left: 1.6rem;}
.terms-cont table {width: 100%;}
.terms-cont table tbody td ul li {padding: 0; text-indent: 0; word-break: break-all;}

@media (prefers-color-scheme: dark) {
    .terms-cont * {color: #fff!important; background-color: var(--white)!important;}
}

/* 마이페이지 > 프로필 변경 */
.profile-img-wrap {display: flex; flex-flow: column; align-items: center; row-gap: 1.6rem; margin: 0 auto 2.4rem;}
.profile-img-wrap > p {font-size: 1.4rem; font-weight: 600; color: var(--red800);}
.profile-img {width: 7rem; height: 7rem; background-color: #fff; border: 1px solid var(--gray200); border-radius: 100%; background-repeat: no-repeat; background-size: cover; background-position: top center; position: relative; cursor: pointer;}
.profile-img .camera {width: 2.8rem; height: 2.8rem; background-color: var(--red800); border-radius: 100%; background-image: url(/img/icon/ic-camera-16-03358935c1b7ca61bd5d979f2245c3f2.svg); background-repeat: no-repeat; background-size: 1.6rem; background-position: center; position: absolute; right: -.4rem; bottom: 0;}

.favor-player {height: 4.4rem; border: 1px solid var(--gray200); background-color: var(--white-light); border-radius: .4rem; padding: 0 1.2rem; display: flex; align-items: center; font-size: 1.4rem; font-weight: 500; color: var(--black); background-image: url(/img/icon/ic-arrow-right-20-7d4e9110cc29f49303afac10994db08e.svg); background-repeat: no-repeat; background-size: 2rem; background-position: right 1.2rem center; cursor: pointer;}

@media (prefers-color-scheme: dark) {
    .favor-player {background-image: url(/img/icon/ic-arrow-right-20-wh-9884a2a2faafbbd82f6a7e97fd7b1c88.svg);}
}

.favor-team {margin: 0 -2rem; padding: 0 2rem; overflow-y: hidden; overflow-x: auto; display: flex; align-items: center; column-gap: 1.2rem;}
.favor-team > li {min-width: 8rem; height: 8rem; border-radius: .4rem; display: flex; flex-flow: column; align-items: center; justify-content: center; row-gap: .4rem; opacity: .2; cursor: pointer;}
.favor-team > li > p {font-size: 1.2rem; font-weight: 500; color: #fff;}

.favor-team > li.active {opacity: 1;}
.favor-team > li.ssg {background-color: var(--red800); box-shadow: .4rem .4rem 1.2rem rgba(200, 16, 46, .2);}
.favor-team > li.doosan {background-color: #131230; box-shadow: .4rem .4rem 1.2rem rgba(19, 18, 48, .2);}
.favor-team > li.hanwha {background-color: #F37321; box-shadow: .4rem .4rem 1.2rem rgba(243, 115, 33, .2);}
.favor-team > li.kiwoom {background-color: #6C0012; box-shadow: .4rem .4rem 1.2rem rgba(108, 0, 18, .2);}
.favor-team > li.kia {background-color: #05141F; box-shadow: .4rem .4rem 1.2rem rgba(5, 20, 31, .2);}
.favor-team > li.samsung {background-color: #0066B3; box-shadow: .4rem .4rem 1.2rem rgba(0, 102, 179, .2);}
.favor-team > li.lotte {background-color: #002856; box-shadow: .4rem .4rem 1.2rem rgba(0, 40, 86, .2);}
.favor-team > li.lg {background-color: #960027; box-shadow: .4rem .4rem 1.2rem rgba(150, 0, 39, .2);}
.favor-team > li.kt {background-color: #221E1F; box-shadow: .4rem .4rem 1.2rem rgba(34, 30, 31, .2);}
.favor-team > li.nc {background-color: #004BAF; box-shadow: .4rem .4rem 1.2rem rgba(0, 75, 175, .2);}

.pop-cont .terms-cont > p + p {margin-top: 1rem;}
.pop-cont .terms-cont > h6 + p {margin-top: .6rem;}
.pop-cont .terms-cont > div {margin-top: 1rem;}
.pop-cont .terms-cont > div > table {table-layout: fixed;}
.terms-cont + .flex-chk-list {padding: 0 1.6rem;}

/* 마이페이지 > 프로필 변경 > 선호 선수 선택, 선수단 */
.players-wrap {display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 2.4rem 1.2rem;}
.players-wrap > li {cursor: pointer;}
.players-wrap .img {height: 28vw; border-radius: .4rem; background-repeat: no-repeat; background-size: cover; background-position: top center;}
.players-wrap .info {margin-top: .8rem; display: flex; align-items: flex-end; column-gap: .4rem;}
.players-wrap .info > h6 {font-size: 1.2rem; font-weight: 600; color: var(--black);}
.players-wrap .info > p {font-size: 1.2rem; font-weight: 600; color: var(--gray400);}

/* 마이페이지 > 멤버십 등급 혜택 */
.mem-level {display: flex; align-items: center; justify-content: center; column-gap: .8rem; margin-top: 1rem;}
.mem-level > p {font-size: 1.6rem; font-weight: 600;}
.mem-price {margin-top: .8rem; margin-bottom: 4rem; font-size: 1.4rem; display: flex; align-items: center; justify-content: center; column-gap: .2rem;}
.mem-price:has(div) {display: flex; flex-flow: column; row-gap: 1.2rem; display: flex; align-items: center;}
.mem-price:has(div) > div {display: flex; align-items: center; justify-content: center; column-gap: .2rem;}
.mem-price p {font-weight: 600; color: var(--red800);}
.mem-price > div + p {color: initial; font-size: 1.2rem; font-weight: 400;}
.mem-price > span {text-align: center; font-size: 1.2rem; line-height: 1.4; color: var(--gray500);}

.mem-box + .mem-box {margin-top: 4rem; padding-top: 4rem; border-top: 1px solid var(--gray200);}
.mem-box > h4 {text-align: center; font-size: 2rem; font-weight: 700; margin-bottom: 2.4rem;}
.mem-box > p {text-align: center; line-height: 1.6; font-size: 1.4rem; font-weight: 500;}
.mem-box > p .font-red {font-weight: 700; font-size: 1.4rem;}
.mem-box > div + div {margin-top: 3.2rem;}
.mem-box > div .title {display: flex; align-items: center; column-gap: .4rem; justify-content: center;}
.mem-box > div .title > i {width: 2.4rem; height: 2.4rem;}
.mem-box > div .title > h6 {font-size: 1.6rem; font-weight: 600;}
.mem-box > div table {table-layout: fixed; margin-bottom: 1.6rem;}
.mem-box > div table th {line-height: 1;}
.mem-box > div table td {word-break: keep-all; line-height: 1.4; font-size: 1.4rem;}
.mem-box > div > div {display: flex; align-items: center; justify-content: center; column-gap: .4rem; font-size: 1.6rem; font-weight: 600; margin-top: 3.2rem; margin-bottom: 1.6rem;}
.mem-box > div > div.block {display: block; line-height: 1.6; margin: 3.2rem auto 1.6rem; text-align: center;}
.mem-box > div > div.block > i {display: inline-flex; position: relative; top: .7rem; margin-right: .6rem;}
.mem-box > div > p {text-align: center; font-size: 1.4rem; line-height: 1.4;}
.mem-box > div > p + p {margin-top: 2.4rem;}
.mem-box > div > p > span {font-size: 1.2rem; line-height: 1.6; color: var(--gray500); display: block; margin-top: .6rem;}
.mem-box > div > p .font-red {font-weight: 600; font-size: 1.4rem; display: initial;}
.mem-box > div > p + span {margin-top: 1rem;}
.mem-box > div > span {display: block; text-align: center; font-size: 1.2rem; line-height: 1.6; word-break: keep-all; color: var(--gray500);}
.mem-box > div > span + p {margin-top: 2.4rem;}
.mem-box > div img {margin: 1.6rem auto; display: block;}
.mem-box .event-detail {display: flex; flex-flow: column; row-gap: 1.2rem; align-items: center;}
.mem-box .event-detail > p {min-width: 6.4rem; height: 2.8rem; background-color: var(--black); color: var(--white); padding: 0 1.6rem; font-size: 1.2rem; font-weight: 600; display: flex; align-items: center; justify-content: center; border-radius: 2rem;}
.mem-box .event-detail > ul {display: flex; width: 100%; flex-flow: column; row-gap: .8rem;}
.mem-box .event-detail > ul > li {display: flex; column-gap: .6rem; font-size: 1.4rem; line-height: 1.8; text-align: center;}
.mem-box .event-detail > ul > li > p {word-break: keep-all; flex: 1;}
.mem-box .event-detail > ul > li > p .sub {font-size: 1.2rem; color: var(--gray500);}

.mem-box .photocard {height: 18rem;}

.mem-desc {margin: 4rem -2rem 0; background-color: var(--gray100); padding: 2rem 2rem 3.4rem; margin-bottom: -3.4rem;}
.mem-desc > ul {display: flex; flex-flow: column; row-gap: 1.2rem; margin-bottom: 3.2rem;}
.mem-desc > ul > li {font-size: 1.2rem; color: var(--gray500); line-height: 1.6; display: flex; align-items: flex-start; column-gap: .4rem; word-break: keep-all;}
.mem-desc > ul > li::before {content: '-';}

.mem-family {height: calc(100dvh - 2rem - 12.6rem - 3.2rem); width: 100vw; margin: -2.4rem -2rem 0; overflow-y: auto; padding: 2.4rem 2rem 0;}

.popup .mem > span {text-align: center; font-size: 1.2rem; color: var(--gray500); display: flex; align-items: center; justify-content: center; margin-top: 2rem;}

.mem-terms {padding: 0 1.6rem; position: relative; display: flex; flex-flow: column; row-gap: 1.2rem; position: relative;}
.mem-terms > div {height: calc(60vh - 2rem - 1.2rem); border: 1px solid var(--gray200); border-radius: .4rem; font-size: 1.4rem; line-height: 1.6; word-break: keep-all;}
.mem-terms > div > div {height: 100%; overflow-y: auto; padding: 1.2rem; display: flex; flex-flow: column; row-gap: 1.4rem;}
.mem-terms > div h6 {font-weight: 600; margin-bottom: -.8rem;}

/* 마이페이지 > 멤버십 가입 */
.mem-tab {display: grid; grid-template-columns: repeat(5, 1fr); border-radius: .4rem; overflow: hidden; margin-bottom: 2rem;}
.mem-tab > li {height: 4.4rem; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; font-weight: 600; color: #fff;}
.mem-tab > li::after {content: ''; width: 1.2rem; height: 1.2rem; background-image: url(/img/icon/ic-arrow-right-12-wh-acf888ed08d4a83bc2ab3d285d68a970.svg);}
.mem-tab > li:nth-child(1) {background-color: #BDBEC0;}
.mem-tab > li:nth-child(2) {background-color: #AB6C22;}
.mem-tab > li:nth-child(3) {background-color: #00483A;}
.mem-tab > li:nth-child(4) {background-color: #F6B22A;}
.mem-tab > li:nth-child(5) {background-color: #C8102E;}

.mem-table-wrap {width: 100vw; margin: 0 -2rem; overflow-x: auto; position: relative;}
.mem-table-wrap table {min-width: 10rem;}
.mem-table-wrap table th {white-space: nowrap; text-align: center; padding: 1.2rem;}
.mem-table-wrap table td {white-space: nowrap; text-align: center; line-height: 1.6; padding: 1.2rem 1.4rem;}
.mem-table-wrap table td > div {display: flex; width: fit-content; padding: 0 .6rem; height: 2.4rem; margin: 0 auto; align-items: center; justify-content: center; font-size: 1.2rem; font-weight: 500;}
.mem-table-wrap table td > div.regular {background-color: rgba(171,108,34,0.2);}
.mem-table-wrap table td > div.allstar {background-color: rgba(0,72,58,0.2);}
.mem-table-wrap table td > div.legend {background-color: rgba(246,178,42,0.2);}
.mem-table-wrap table td > ul {display: flex; flex-flow: column; row-gap: .4rem; align-items: center;}
.mem-table-wrap table td > ul > li {text-align: center;}
.mem-table-wrap table tr > th:nth-child(1) {position: sticky; left: -1px;}

.membership.tab-style01 {top: calc(14.6rem + 2.4rem + .8rem);}
.membership.tab-style01 ~ .tab-cont-wrap {width: 100vw; height: calc(100vh - 14.6rem - 2.4rem - 3.2rem - 2rem); overflow-y: auto; margin: 2rem -2rem -3.4rem;}

.my-mem-level {display: flex; flex-flow: column; align-items: center; justify-content: center; row-gap: 1.2rem;}
.my-mem-level > i {width: 7.2rem; height: 7.2rem;}
.my-mem-level > p {font-size: 1.6rem; font-weight: 500; display: flex; flex-flow: column; row-gap: .6rem; text-align: center;}
.my-mem-level > p::after {font-size: 2rem; font-weight: 700;}
.my-mem-level > p.rookie::after {content: 'Rookie'; color: var(--gray400);}
.my-mem-level > p.regular::after {content: 'Regular'; color: var(--brown);}
.my-mem-level > p.allstar::after {content: 'All Star'; color: var(--dark-green);}
.my-mem-level > p.legend::after {content: 'Legend'; color: var(--yellow);}
.my-mem-level > p.frontier::after {content: 'Frontier'; color: var(--red800);}
.my-mem-level > p.family::after {content: 'SSG Family'; color: #970022;}
.my-mem-level > p.junior::after {content: 'Junior'; color: #529B93;}

.mem-gift {display: flex; align-items: center; justify-content: center; flex-wrap: wrap; grid-gap: 3.2rem 2rem;}
.mem-gift > li {display: flex; flex-flow: column; row-gap: .6rem; align-items: center; justify-content: center;}
.mem-gift > li > p {font-size: 1.4rem; font-weight: 500; text-align: center; line-height: 1.2;}

.mem-gift-list {margin-top: 2rem; display: flex; flex-flow: column; row-gap: 1rem; padding: 0 2rem;}
.mem-gift-list > li input[type="radio"] + label {border-radius: .4rem; padding: 1.6rem; display: flex; flex-flow: column; align-items: flex-start; row-gap: .8rem; background-color: var(--gray100); border: 1px solid var(--gray100); position: relative;}
.mem-gift-list > li input[type="radio"]:checked + label {border-color: var(--red800); background-color: var(--white);}
.mem-gift-list > li input[type="radio"] + label input {width: 22rem;}
.mem-gift-list > li input[type="radio"] + label::before {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%);}
.mem-gift-list > li input[type="radio"] + label > h6 {font-size: 1.4rem; font-weight: 600;}
.mem-gift-list > li input[type="radio"] + label > p {font-size: 1.2rem; color: var(--gray500);}

.mem-pay-way {display: flex; align-items: center; justify-content: center; column-gap: 3.2rem; margin-top: 2rem;}

.junior-product-img {width: 100%; margin-bottom: 1.2rem;}

.mem-pay-way-box {width: calc(100% - 4rem); margin: 0 auto; display: flex; flex-flow: column; row-gap: .8rem; margin-top: 2rem;}
.mem-pay-way-box > li {width: 100%; border: 1px solid var(--gray200); border-radius: .4rem; padding: 1.2rem;}
.mem-pay-way-box > li input + label {column-gap: .8rem;}
.mem-pay-way-box > li input + label > div {display: flex; flex-flow: column; row-gap: .8rem; align-items: flex-start;}
.mem-pay-way-box > li input + label > div > img {height: 1.6rem;}
.mem-pay-way-box > li input + label > div > p {font-size: 1.2rem;}
.mem-pay-way-box > li > ul {margin: 1.2rem -1.2rem -1.2rem; padding: 2rem; background-color: var(--gray100);}
.mem-pay-way-box > li > ul > li {font-size: 1.2rem; line-height: 1.8; color: var(--gray500); display: flex; column-gap: .4rem;}
.mem-pay-way-box > li > ul > li::before {content: '-';}

/* 마이페이지 > 멤버십 > 혜택안내 */
.edition-wrap {display: flex; flex-flow: column; align-items: center; justify-content: center; row-gap: 1.2rem; padding: 2rem 0;}
.edition-wrap > p {text-align: center; font-size: 1.4rem; font-weight: 500; line-height: 1.5;}

.tab-style01.mem {overflow: hidden; column-gap: 0; justify-content: space-between;}

/* 마이페이지 > 스탬프 */
.stamp-floating {position: fixed; bottom: 2rem; right: 2rem; width: 5.2rem; height: 5.2rem; border-radius: 100%; background-color: var(--white); display: flex; align-items: center; justify-content: center; flex-flow: column; row-gap: .2rem; filter: drop-shadow(.2rem .4rem .4rem rgba(0, 0, 0, 0.16)); border: 1px solid var(--gray100); z-index: 100; cursor: pointer; font-size: .8rem; font-weight: 600; color: var(--gray500);}

.stamp-swiper {padding-bottom: 3rem; position: relative;}
.stamp-swiper .swiper-pagination {bottom: 0; display: flex; column-gap: .8rem; justify-content: center; align-items: center;}
.stamp-swiper .swiper-pagination .swiper-pagination-bullet {width: .6rem; height: .6rem; margin: 0; opacity: 1; background-color: var(--gray200);}
.stamp-swiper .swiper-pagination .swiper-pagination-bullet-active {background-color: var(--red800);}

.stamp-list {display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 1.8rem 2rem;}
.stamp-list > li {width: 6rem; height: 6rem; margin: 0 auto; border-radius: 100%; display: flex; align-items: center; justify-content: center; background-color: var(--gray100); border: 1px dashed var(--gray200); font-size: 2rem; font-weight: 700; color: var(--gray400); position: relative;}
.stamp-list > li.active::before {content: ''; width: 100%; height: 100%; border-radius: 100%; display: block; background-color: var(--red800); position: absolute; background-image: url(/img/icon/img-stamp-ov-e314de866eb5805c0f8f11fc5c19dbae.svg); background-repeat: no-repeat; background-size: 4.8rem auto; background-position: center;}

.stamp-staff {display: flex; align-items: center; justify-content: space-between;}
.stamp-staff > h6 {font-size: 1.6rem; font-weight: 600; color: var(--black);}

/* 마이페이지 > 포인트 */
.benefit-wrap {margin-bottom: 3.2rem; display: flex; flex-flow: column; row-gap: 1.2rem;}
.benefit-wrap > div {height: 6rem; padding: 0 2rem; display: flex; align-items: center; justify-content: space-between; border-radius: .4rem; background: linear-gradient(270deg, #E72343 1.04%, #E93E55 100.75%); box-shadow: .4rem .4rem .8rem rgba(0, 0, 0, .12);}
.benefit-wrap h6 {font-size: 1.4rem; font-weight: 500; color: var(--red300);}
.benefit-wrap p {font-size: 1.8rem; font-weight: 600; color: #fff;}
.benefit-wrap > button {height: 4.4rem; font-size: 1.4rem; color: var(--gray900);}
.benefit-wrap > ul {height: 4.4rem; border: 1px solid var(--gray200); border-radius: .4rem; display: flex; align-items: center; justify-content: center; background-color: var(--white);}
.benefit-wrap > ul > li {width: calc(100% / 2); display: flex; align-items: center; justify-content: center; column-gap: .4rem; height: 100%;}
.benefit-wrap > ul > li + li {border-left: 1px solid var(--gray200);}
.benefit-wrap > ul > li > p {font-size: 1.4rem; font-weight: 600; color: var(--black);}

/* 마이페이지 > 포인트 > 리워드 팝업 */
.reward-wrap {display: flex; flex-flow: column; row-gap: 1.2rem; padding: 0 2rem;}
.reward-wrap > i {width: 8rem; height: 8rem; margin: 0 auto;}
.reward-wrap > h6 {font-size: 1.4rem; font-weight: 500; text-align: center; line-height: 1.6;}

.reward-list {display: flex; flex-flow: column; row-gap: 1rem;}
.reward-list > li input[type="radio"] + label {border-radius: .4rem; padding: 1.6rem; display: flex; flex-flow: column; align-items: flex-start; row-gap: .8rem; background-color: var(--gray100); border: 1px solid var(--gray100); position: relative;}
.reward-list > li input[type="radio"]:checked + label {border-color: var(--red800); background-color: var(--white);}
.reward-list > li input[type="radio"] + label::before {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%);}
.reward-list > li input[type="radio"] + label {font-size: 1.4rem; font-weight: 600;}
.reward-list > li input[type="radio"]:disabled + label {border-color: var(--gray200); background-color: var(--gray100); color: var(--gray400);}
.reward-wrap > p {font-size: 1.2rem; color: var(--gray500); line-height: 1.4; text-align: left;}


/* 마이페이지 > 포인트몰 */
.point-coupon {display: flex; flex-flow: column; row-gap: 1.6rem;}
.point-coupon > li {border-radius: 0 .8rem .8rem 0; border: 1px solid var(--gray200); border-left: .2rem solid var(--red800); padding: 2rem 2.8rem 2rem 2.2rem; display: flex; align-items: center; justify-content: space-between; position: relative;}
.point-coupon > li .info > p {font-size: 1.4rem; font-weight: 700; color: var(--red800);}
.point-coupon > li .info > h6 {font-size: 1.6rem; font-weight: 600; margin-top: 1rem;}
.point-coupon > li .info > span {display: block; font-size: 1.2rem; color: var(--gray500); margin-top: 1.6rem;}
.point-coupon > li > p {font-size: 1.4rem; font-weight: 500; color: 1.4rem; width: 2.6rem; text-align: center; color: var(--gray500);}
.point-coupon > li::before {content: ''; width: 1.6rem; height: 1.6rem; border-radius: 100%; background-color: var(--white); border-width: 1px; border-style: solid; border-color: var(--white) var(--white) var(--gray200) var(--gray200); transform: rotate(45deg); position: absolute; right: -.8rem;}
.point-coupon > li::after {content: ''; width: 1px; height: 100%; border-left: 1px dashed var(--gray200); position: absolute; right: calc(2.8rem + 2.6rem + 2rem);}

.point-coupon.md > li {border-left-color: var(--brown);}
.point-coupon.md > li .info > p {color: var(--brown);}

.point-coupon.fb > li {border-left-color: var(--yellow);}
.point-coupon.fb > li .info > p {color: var(--yellow);}

/* 마이페이지 > 포인트몰 > 상세 */
.point-info {border-top: 1px solid var(--black); border-bottom: 1px solid var(--gray200); padding: 1.6rem 0;}
.point-info > span {display: block; font-size: 1.2rem; font-weight: 600; color: var(--gray500); margin-bottom: .8rem;}
.point-info > h4 {font-size: 1.6rem; font-weight: 600; text-align: center;}
.point-info > h6 {font-size: 1.4rem; font-weight: 500;}
.point-info > p {font-size: 1.6rem; font-weight: 700; color: var(--red800); margin-top: 1.2rem;}

.point-detail {margin-top: 2rem; display: flex; flex-flow: column; row-gap: .8rem;}
.point-detail > li {display: flex; align-items: start; justify-content: space-between; column-gap: 1rem;}
.point-detail > li > h6 {font-size: 1.4rem; color: var(--gray500); width: 5rem; line-height: 1.4;}
.point-detail > li > p {font-size: 1.4rem; font-weight: 500; width: calc(100% - 5rem - 1rem); line-height: 1.4; text-align: right;}

.note {padding: 2rem; margin-top: 2rem; background-color: var(--gray100);}
.note > h6 {font-size: 1.2rem; font-weight: 700; color: var(--gray500); line-height: 1.6;}
.note > * + h6 {margin-top: 1.6rem;}
.note > p {font-size: 1.2rem; color: var(--gray500); line-height: 1.6; word-break: keep-all;}
.note > ul {display: flex; flex-flow: column; row-gap: .4rem;}
.note > ul > li {font-size: 1.2rem; color: var(--gray500); line-height: 1.6; text-indent: -.8rem; padding-left: .8rem;}

.popup .note.width-100 {margin: 1.6rem auto 0; width: calc(100% - 4rem); border-radius: .4rem; padding: 1.6rem;}

.note-event {padding: 1rem; display: flex; flex-flow: column; row-gap: .8rem;}
.note-event > h6 {font-size: 1.2rem; font-weight: 700; color: var(--gray500);}
.note-event > p {font-size: 1.2rem; color: var(--gray500); line-height: 1.6;}
.note-event > ul {display: flex; flex-flow: column; row-gap: .4rem;}
.note-event > ul > li {font-size: 1.2rem; color: var(--gray500); line-height: 1.6; text-indent: -.8rem; padding-left: .8rem;}

.point-pay {padding: 3.2rem 3.2rem 0; display: flex; flex-flow: column; row-gap: 2rem;}
.point-pay > li {display: flex; align-items: center; justify-content: space-between; font-size: 1.4rem; font-weight: 500;}
.point-pay > li:nth-child(1) > p {font-weight: 600; color: var(--system-blue);}
.point-pay > li:nth-child(2) > p {font-weight: 600; color: var(--red800);}


/* 마이페이지 > 쿠폰 */
.coupon-list > li {height: 11.2rem; border: 1px solid var(--gray200); border-radius: 0 .8rem .8rem 0; position: relative; display: flex; align-items: center; justify-content: space-between;}
.coupon-list > li::before {content: ''; width: .2rem; height: 100%; display: block; background-color: var(--red800); position: absolute; top: 0; left: 0;}
.coupon-list > li::after {content: ''; display: block; width: 1.6rem; height: 1.6rem; background-color: var(--white); border-width: 1px; border-style: solid; border-radius: 100%; border-color: var(--white) var(--white) var(--gray200) var(--gray200); transform: rotate(45deg); position: absolute; right: -.8rem; top: 4.8rem;}
.coupon-list > li + li {margin-top: 1.6rem;}
.coupon-list > li .info {padding: 2rem; width: calc(100% - 9.2rem);}
.coupon-list > li .info > h6 {font-size: 1.6rem; font-weight: 600; line-height: 1.5; margin-top: .4rem; color: var(--black); width: 100%; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.coupon-list > li .info > p {font-size: 1.2rem; color: var(--gray500); margin-top: 1.2rem;}
.coupon-list > li .info > div {display: flex; flex-flow: column; row-gap: .6rem; margin-top: 1rem;}
.coupon-list > li .info > div > span {font-size: 1.2rem; font-weight: 500;}
.coupon-list > li .info > div > p {font-size: 1.2rem; color: var(--gray500);}
.coupon-list > li .sheet {width: 9.2rem; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; font-weight: 500; color: var(--gray500); border-left: 1px dashed var(--gray200);}
.coupon-list > li .sheet button {width: fit-content; height: 3.2rem; padding: 0 1rem; font-size: 1.2rem; font-weight: 500; color: var(--gray500); background-color: var(--white); border-color: var(--gray200);}
.coupon-list > li .sheet button:disabled {color: var(--white);}

.coupon-list.season > li {background-image: url(/img/bg-notice-c3739c0ae87360b17185b7c724a61a32.svg);}

@media (prefers-color-scheme: dark) {
    .coupon-list > li .sheet button:disabled {color: var(--gray400);}
    .coupon-list.season > li {background-image: url(/img/bg-notice-dark-29dde124ee7ae4b3baca5ab8775297ab.svg);}
}

.coupon-list > li.finished::before {background-color: var(--gray300);}
.coupon-list > li.finished .info .label {background-color: var(--gray100); color: var(--gray500); border-color: var(--gray100);}
.coupon-list > li.finished .info > h6 {color: var(--gray400);}
.coupon-list > li.finished .info > h6 > span {color: var(--gray400)!important;}
.coupon-list > li.finished .info > p {font-size: 1.2rem; color: var(--gray500); margin-top: 1.2rem;}

.coupon.notification {height: calc(100vh - 6rem - 2rem - 6rem - 3.2rem - 2rem - 1.6rem - 3.4rem);}

/* 마이페이지 > 쿠폰 > 상세 */
.coupon-info {border-top: 1px solid var(--black); border-bottom: 1px solid var(--gray200); padding: 1.6rem 0; display: flex; flex-flow: column; row-gap: 2.4rem; align-items: center; justify-content: center;}
.coupon-info > p {font-size: 1.6rem; font-weight: 600;}
.coupon-info > button {height: 4.4rem; border-color: var(--gray200); background-color: var(--white); color: var(--blakc); font-size: 1.4rem; column-gap: .4rem;}
.coupon-info .coupon-barcode {display: flex; flex-flow: column; row-gap: 1.2rem; align-items: center; justify-content: center;}
.coupon-info .coupon-barcode > div {width: 13rem; height: 4rem; background-repeat: no-repeat; background-size: contain; background-position: center;}
.coupon-info .coupon-barcode > span {font-size: 1.2rem; font-weight: 500;}
.coupon-info .coupon-num {height: 4.4rem; background-color: var(--gray100); display: flex; align-items: center; column-gap: .8rem; justify-content: center; width: 100%;}
.coupon-info .coupon-num > p {font-size: 1.6rem; font-weight: 500;}
.coupon-info .coupon-num > button {width: 4.8rem; height: 3.2rem; border-color: var(--gray200); background-color: var(--white); font-size: 1.2rem; font-weight: 500; color: var(--black); line-height: 1;}

.coupon-detail {margin-top: 2rem; display: flex; flex-flow: column; row-gap: 1rem;}
.coupon-detail > li {display: flex; align-items: center; justify-content: space-between;}
.coupon-detail > li > h6 {font-size: 1.4rem; color: var(--gray500);}
.coupon-detail > li > p {font-size: 1.4rem; font-weight: 500;}

/* 마이페이지 > 쿠폰 > 상세 > 비밀번호 입력 */
.password-wrap {width: 100vw; height: calc(100vh - 3.4rem);}
.password-wrap .view {height: calc(100vh - 3.4rem - 32rem); display: flex; flex-flow: column; align-items: center; justify-content: center; row-gap: 3.2rem;}
.password-wrap .view > p {font-size: 1.6rem; font-weight: 500;}
.password-wrap .view .password {display: flex; align-items: center; justify-content: center; column-gap: 2.4rem;}
.password-wrap .view .password > li {width: 1.6rem; height: 1.6rem; border-radius: 100%; background-color: var(--gray200);}
.password-wrap .view .password > li.active {background-color: var(--red800); box-shadow: .2rem .2rem .8rem rgba(200, 16, 46, .2);}
.password-wrap .keypad {display: grid; grid-template-columns: repeat(3, 1fr);}
.password-wrap .keypad > li {height: 8rem; display: flex; align-items: center; justify-content: center; font-size: 2rem; font-weight: 600;}
.password-wrap .keypad > li > button {height: 100%; border-radius: 0; background-color: transparent; border-color: transparent; color: var(--black);}
.password-wrap .keypad > li > button:active {color: var(--red800);}
.password-wrap .keypad > li:nth-last-child(3) > button {font-size: 1.4rem; font-weight: 500;}
.password-wrap .keypad > li > button .ic-keypad-delete {width: 4.4rem; height: 2rem; background-image: url(/img/icon/ic-keypad-delete-b0833c52f09f16b2edf60a7b328a92d7.svg); background-repeat: no-repeat; background-size: contain; background-position: center;}

/* 마이페이지 > 체크인 */
.checkin-info > p {font-size: 2rem; line-height: 1.5;}
.checkin-info > span {display: block; margin-top: 1.6rem; font-size: 1.3rem;}
.checkin-info > span > span {font-weight: 600;}
.checkin-info > ul {margin-top: 1.6rem; height: 4.4rem; border: 1px solid var(--gray200); border-radius: .4rem; display: flex; align-items: center; justify-content: center; background-color: var(--white);}
.checkin-info > ul > li {width: calc(100% / 2); display: flex; align-items: center; justify-content: center; column-gap: .4rem; height: 100%;}
.checkin-info > ul > li + li {border-left: 1px solid var(--gray200);}
.checkin-info > ul > li > p {font-size: 1.4rem; font-weight: 600;}

.checkin-guide-table th {padding: .8rem; line-height: 1.4;}
.checkin-guide-table td {text-align: center!important; line-height: 1.4;}

@media (prefers-color-scheme: dark) {
    .checkin-info > div > i {filter: invert(1);}
}

.checkin-wrap {display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 2rem 2.8rem;}
.checkin-wrap > li {display: flex; flex-flow: column; align-items: center; justify-content: start; row-gap: .8rem;}
.checkin-wrap > li .stamp {width: 8rem; height: 8rem; border-radius: .6rem; border: 1px dashed var(--gray200); display: flex; align-items: center; justify-content: center; position: relative;}
.checkin-wrap > li .stamp::before {content: '미입장'; width: 6rem; height: 6rem; border-radius: .4rem; background-color: var(--gray100); font-size: 1.2rem; font-weight: 500; color: var(--gray400); display: flex; align-items: center; justify-content: center;}
.checkin-wrap > li.checkin .stamp {border: 1px solid var(--red800); background-image: url(/img/img-checkin-e86987e517ebbc24c687444a96d73bf2.png); background-repeat: no-repeat; background-size: contain; background-position: center; position: relative;}
.checkin-wrap > li.checkin .stamp::before {content: '입장'; width: fit-content; height: fit-content; background-color: transparent; color: var(--red800); padding-top: 3.2rem;}
.checkin-wrap > li.checkin.win .stamp {border-color: var(--red900); background-image: url(/img/img-checkin-win-4eeab90a10e0f66f957f793725ed94c5.png);}
.checkin-wrap > li.checkin.win .stamp::before {content: '입장‧승'; color: #fff;}
.checkin-wrap > li.checkin.img .stamp {border-color: var(--red900);}
.checkin-wrap > li.checkin.img .stamp::before {content: '입장'; color: #fff; width: 4.5rem; height: 2.4rem; position: absolute; top: 0; right: 0; padding: 0; background: linear-gradient(317deg, #980020 2.11%, #C8102E 95.97%); border-radius: 0 .4rem 0 .4rem;}
.checkin-wrap > li.checkin.img.win .stamp::before {content: '입장‧승'; color: #fff; width: 4.5rem; height: 2.4rem; position: absolute; top: 0; right: 0; padding: 0; background: linear-gradient(317deg, #980020 2.11%, #C8102E 95.97%); border-radius: 0 .4rem 0 .4rem;}
.checkin-wrap > li.download .stamp::after {content: ''; width: 3.2rem; height: 3.2rem; background-color: var(--brown); box-shadow: .2rem .2rem .4rem rgba(171, 108, 34, .24); border-radius: 100%; background-image: url(/img/icon/ic-download-16-14dc9b105a70e4a60be0cc5b532fc811.svg); background-repeat: no-repeat; background-size: 1.6rem; background-position: center; position: absolute; bottom: -.8rem; right: -.8rem; cursor: pointer;}

.checkin-wrap > li .info {display: flex; flex-flow: column; align-items: center; justify-content: start; row-gap: .4rem;}
.checkin-wrap > li .info > p {font-size: 1rem; font-weight: 500; color: var(--gray500);}
.checkin-wrap > li .info > h6 {font-size: 1.2rem; font-weight: 500; color: var(--black);}
.checkin-wrap > li .info .label {margin-top: .4rem;}

.checkin-guide + .checkin-guide {margin-top: 3.2rem;}
.checkin-guide > h4 {font-size: 1.6rem; font-weight: 600; margin-bottom: 1.2rem;}
.checkin-guide > div {display: flex; flex-flow: column; row-gap: 1.2rem;}
.checkin-guide > div + div {margin-top: 2rem;}
.checkin-guide > div > h6 {display: flex; align-items: center; justify-content: center; height: 3.2rem; background-color: var(--gray100); font-size: 1.4rem; font-weight: 500;}
.checkin-guide ul {display: flex; flex-flow: column; row-gap: 1.6rem;}
.checkin-guide ul > li {font-size: 1.4rem; line-height: 1.6; word-break: keep-all;}
.checkin-guide ul > li > p {display: block; font-weight: 600;}
.checkin-guide p {font-size: 1.4rem; line-height: 1.6; word-break: keep-all;}
.checkin-guide > img {width: 100%;}
.checkin-guide .box {margin-top: 2rem; background-color: var(--gray100); padding: 2rem; font-size: 1.2rem; color: var(--gray500); line-height: 1.6; word-break: keep-all;}

/* 마이페이지 > 체크인 > 나만의 관람 후기 */
.container.gray {background-color: var(--gray100);}
.container.gray .bottom-fixed .bottom-wrap {background-color: var(--gray100);}

.checkin-review-wrap {margin-top: -1.2rem;}
.checkin-review-wrap .option {display: flex; align-items: center; justify-content: flex-end; position: relative; height: 2rem;}
.checkin-review-wrap .option > ul {position: absolute; top: 2rem; right: 0; background-color: var(--white); border: 1px solid var(--gray200); border-radius: .4rem;}
.checkin-review-wrap .option > ul > li {padding: 1.2rem; font-size: 1.4rem; font-weight: 500;}
.checkin-review-wrap .option > ul > li + li {border-top: 1px solid var(--gray200);}

.checkin-review-wrap .img {width: 100%; height: calc(100vw - 4rem); margin-top: .8rem; margin-bottom: 1.6rem; border-radius: .8rem; background-color: var(--gray100); background-image: url(/img/icon/img-photo-add-5e0c14f4b16034b08639823aa79def12.svg); background-repeat: no-repeat; background-size: cover; background-position: center;}

.checkin-review-wrap .img-register > div {display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.2rem;}
.checkin-review-wrap .img-register > div > h2 {font-size: 1.4rem; font-weight: 500;}
.checkin-review-wrap .img-register > div > button {width: fit-content; height: 2.4rem; font-size: 1.2rem; padding: 0 .8rem; background-color: var(--white); color: var(--gray500); border-color: var(--gray200);}
.checkin-review-wrap .img-register > ul {display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: .2rem;}
.checkin-review-wrap .img-register > ul > li {width: 100%; height: calc((100vw - 4rem - .6rem) / 4); background-color: var(--gray400); border-radius: .4rem;}
.checkin-review-wrap .img-register > ul > li input[type="file"] + label {display: block; width: 100%; height: calc((100vw - 4rem - .6rem) / 4); background-color: var(--gray400); border-radius: .4rem;}

.checkin-review-wrap .text {position: relative;}
.checkin-review-wrap .text textarea {height: 14rem;}
.checkin-review-wrap .text .limit-count {bottom: 1.2rem;}

/* 마이페이지 > 배지 */
.my-badge {display: flex; flex-flow: column; row-gap: 1.2rem; align-items: center; justify-content: center; padding-bottom: 1rem;}
.my-badge .img {width: 10rem; height: 10rem; background-repeat: no-repeat; background-size: contain; background-position: center;}
.my-badge > p {font-size: 1.6rem; font-weight: 600;}

.badge-list {padding: .8rem 2rem 0; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 1.2rem 2.8rem;}
.badge-list > li {width: 8rem; min-height: 15.4rem;display: flex; flex-flow: column; row-gap: 1.2rem; align-items: center; margin: 0 auto;}
.badge-list > li > label {position: relative; display: flex; flex-flow: column; row-gap: 1.2rem;}
.badge-list > li > label::before {content: none;}
.badge-list > li > label .info {height: fit-content;}
.badge-list > li > input[type='radio']:checked + label .img {border-color: var(--red800);}

/* .badge-list > li .point {position: absolute; top: 0; right: -1.2rem; box-shadow: .2rem 0 .6rem rgba(0, 0, 0, .12); width: 4rem; height: 4rem; background-color: var(--white); display: flex; align-items: center; justify-content: center; font-size: 1.2rem; font-weight: 700; color: var(--brown); border-radius: 100%; z-index: 10;} */
.badge-list > li .img {width: 8rem; height: 8rem; border-radius: .4rem; border: 1px solid var(--gray100); background-repeat: no-repeat; background-size: 5.6rem; background-position: center; position: relative;}
.badge-list > li .img::before {content: ''; width: 8rem; height: 8rem; display: block; background-color: var(--gray100); border-radius: .4rem; background-image: url(/img/icon/ic-lock-32-e818b46833b61dec11d7aead0fbd547c.svg); background-repeat: no-repeat; background-size: 3.2rem; background-position: center; position: absolute; top: 0; left: 0;}
.badge-list > li .info {display: flex; flex-flow: column; align-items: center; justify-content: flex-start; row-gap: .8rem;}
.badge-list > li .info > p {font-size: 1.2rem; font-weight: 500; text-align: center; line-height: 1.4;}

.badge-list > li.active > label::before {content: ''; order: 3; margin-top: -.4rem;}
.badge-list > li.active .img {border-color: var(--gray200);}
.badge-list > li.active .img::before {content: none;}

@media (prefers-color-scheme: dark) {
    .badge-list > li .img::before {background-color: #2B2B2B; background-image: url(/img/icon/ic-lock-32-dark-9228fc30681e214ed76e91080749e29e.svg); box-shadow: .2rem 0 .6rem rgba(0, 0, 0, .12);}
    .badge-list > li .point {background-color: #1C1C1C;}
}

/* 마이페이지 > 배지 > 배지 선택 */
.badge-title {display: flex; flex-flow: column; align-items: center; justify-content: center; row-gap: 1.2rem; margin-bottom: 4rem;}
.badge-title > h2 {font-size: 2rem; font-weight: 700;}
.badge-title > p {font-size: 1.4rem;}

/* 마이페이지 > 배지 > 배지 설명 */
.badge-info {display: flex; flex-flow: column; row-gap: 1.2rem;}
.badge-info > li {padding: 2rem 1.6rem; border-radius: .4rem; border: 1px solid var(--gray200); display: flex; align-items: center; column-gap: 1.2rem;} 
.badge-info > li .img {width: 4rem; height: 4rem; background-repeat: no-repeat; background-size: contain; background-position: center;}
.badge-info > li .info {display: flex; flex-flow: column; row-gap: .6rem;}
.badge-info > li .info > h6 {font-size: 1.4rem; font-weight: 600;}
.badge-info > li .info > p {font-size: 1.2rem; color: var(--gray500); line-height: 1.4;}

/* 마이페이지 > 티켓 예매 취소 내역 */
.ticket-list > li {height: 19.8rem; padding: 2rem; border: 1px solid var(--gray200); background-color: var(--white); border-radius: .8rem; position: relative;}
.ticket-list > li::before {content: ''; display: block; width: 1.6rem; height: 1.6rem; background-color: var(--white); border-width: 1px; border-style: solid; border-radius: 100%; border-color: var(--white) var(--white) var(--gray200) var(--gray200); transform: rotate(-135deg); position: absolute; left: -.8rem; top: 8.2rem;}
.ticket-list > li::after {content: ''; display: block; width: 1.6rem; height: 1.6rem; background-color: var(--white); border-width: 1px; border-style: solid; border-radius: 100%; border-color: var(--white) var(--white) var(--gray200) var(--gray200); transform: rotate(45deg); position: absolute; right: -.8rem; top: 8.2rem;}
.ticket-list > li + li {margin-top: 1.6rem;}
.ticket-list > li .play {position: relative;}
.ticket-list > li .play .label + h4 {margin-top: .6rem;}
.ticket-list > li .play > i {width: 5.2rem; height: 5.2rem; position: absolute; right: 1.2rem; bottom: -1.2rem;}
.ticket-list > li .play > h4 {font-size: 1.6rem; font-weight: 600;}
.ticket-list > li .play > ul {display: flex; align-items: center; column-gap: .9rem; margin-top: 1.6rem}
.ticket-list > li .play > ul > li {font-size: 1.2rem; color: var(--gray500); display: flex; align-items: center; position: relative;}
.ticket-list > li .play > ul > li + li::before {content: ''; width: 1px; height: 1rem; background-color: var(--gray300); position: absolute; left: -.5rem;}
.ticket-list > li .info {margin-top: 2rem; padding: 1.6rem; border-radius: .2rem; background-color: var(--gray100);}
.ticket-list > li .info > li {display: flex; align-items: center; justify-content: space-between;}
.ticket-list > li .info > li + li {margin-top: 1rem;}
.ticket-list > li .info > li > h6 {font-size: 1.2rem; color: var(--gray500);}
.ticket-list > li .info > li > p {font-size: 1.2rem; font-weight: 500;}

/* 마이페이지 > 이벤트 응모 내역 */
.event-summary {padding: 1.6rem 2rem; background-color: var(--gray100); width: 100%; position: fixed; top: 0; left: 0; z-index: 10;}
.event-summary > ul {display: grid; grid-template-columns: repeat(2, 1fr); background-color: var(--white); border-radius: .4rem; box-shadow: .4rem .4rem 1.2rem rgba(0, 0, 0, .04);}
.event-summary > ul > li {display: flex; flex-flow: column; row-gap: .6rem; padding: 1.2rem 1.6rem; position: relative;}
.event-summary > ul > li + li::before {content: ''; width: 1px; height: 2rem; background-color: var(--gray200); 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%);}
.event-summary > ul > li > h6 {font-size: 1.2rem; font-weight: 500; color: var(--gray500);}
.event-summary > ul > li > p {font-size: 1.8rem; font-weight: 600; align-self: flex-end;}

.event-summary + .cont-box {margin-top: 9.2rem;}
.event-summary + .cont-box .search-date {background-color: var(--white); padding: 2rem 2rem 0; width: 100%; position: fixed; top: 9.2rem; left: 0; z-index: 10;}
.event-summary + .cont-box .event-list {margin-top: 12.4rem;}

.event-list > li {padding-bottom: 2rem; border-bottom: 1px solid var(--gray200); background-repeat: no-repeat; background-size: 4.8rem; background-position: right bottom 2rem;}
.event-list > li + li {padding-top: 2rem;}
.event-list > li > h4 {margin-top: .6rem; font-size: 1.6rem; line-height: 1.5; font-weight: 600;}
.event-list > li > ul {display: flex; align-items: center; column-gap: .9rem; margin-top: 1.6rem;}
.event-list > li > ul > li {font-size: 1.2rem; color: var(--gray500); position: relative; display: flex; align-items: center;}
.event-list > li > ul > li:nth-child(2) {color: var(--gray400); font-weight: 500;}
.event-list > li > ul > li + li::before {content: ''; width: 1px; height: 1rem; background-color: var(--gray300); position: absolute; left: -.5rem;}

.event-list > li.success {background-image: url(/img/icon/ic-success-48-b9ee3badff0a7aee1d82a1899d3ba37b.svg);}
.event-list > li.failed {background-image: url(/img/icon/ic-failed-48-6fc2f5d1933f59cdfebee5de3c2bb565.svg);}
.event-list > li.win {background-image: url(/img/icon/ic-win-48-d42f3d6f152ad7b7cb71748e66282092.svg);}
.event-list > li.next-chance {background-image: url(/img/icon/ic-next-chance-48-03ea4854138fdba8bb127956483cb761.svg);}

.event.notification {height: calc(100vh - 4.8rem - 6.8rem - 5rem - 2.4rem - 3rem);}

/* 마이페이지 > 신용카드 매춟전표 */
.credit-wrap {display: flex; flex-flow: column; row-gap: .8rem;}
.credit-wrap > li {height: 4.2rem; border-radius: .4rem; border: 1px solid var(--gray300); display: flex; align-items: center; justify-content: center; column-gap: .4rem; cursor: pointer;}
.credit-wrap > li > p {font-size: 1.4rem; font-weight: 600; display: flex; align-items: center; column-gap: .4rem;}
.credit-wrap > li > p + p::before {content: ''; width: 1px; height: 1rem; background-color: var(--gray300);}

/* 마이페이지 > 작성글 댓글 관리 */
/* .written.tab-wrap {position: fixed; top: 0; left: 0; width: 100%; padding: 2rem 2rem 2.4rem; background-color: var(--white); } 
.written.tab-wrap ~ .tab-cont {margin-top: 6.8rem;} */

.choice-wrap {height: 4.6rem; margin: 0 -2rem; padding: 0 2rem; display: flex; align-items: center; justify-content: space-between; background-color: var(--gray100); border-top: 1px solid var(--gray200); border-bottom: 1px solid var(--gray100); position: fixed; top: 0; width: 100%;}
.choice-wrap input[type="checkbox"] + label > span {font-size: 1.2rem; font-weight: 500;}
.tab-cont-wrap .choice-wrap {top: 4.4rem;}

.choice-wrap + .written-list {margin-top: calc(2.6rem + 2rem);}
.tab-cont-wrap .choice-wrap + .written-list {margin-top: calc(2.4rem + 4.6rem + 2rem);}


.written-list {margin-top: 2.4rem;}
.written-list > li {display: flex; align-items: center; column-gap: 2rem;}
.written-list > li + li {margin-top: 2rem; padding-top: 2rem; border-top: 1px solid var(--gray200);}
.written-list > li > div {width: 100%;}
.written-list > li > input ~ div {width: calc(100% - 2rem - 2rem);}
.written-list > li .cont {display: flex; align-items: flex-start; justify-content: space-between; column-gap: 2rem;}
.written-list > li .cont > div {width: calc(100% - 2rem - 4.8rem);}
.written-list > li .cont h4 {font-size: 1.6rem; font-weight: 600; line-height: 1.3; margin-top: .6rem;}
.written-list > li .cont p {font-size: 1.4rem; color: var(--gray700); margin-top: .8rem; width: 22rem; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.written-list > li .cont p.trash {color: var(--gray400);}
.written-list > li .cont p > i {display: inline-block; vertical-align: middle; margin-right: .4rem;}
.written-list > li .cont .img {width: 4.8rem; height: 4.8rem; background-repeat: no-repeat; background-size: cover; background-position: center;}
.written-list > li .info {display: flex; align-items: center; justify-content: space-between; margin-top: 1.6rem;}
.written-list > li .info > span {font-size: 1.2rem; color: var(--gray500);}
.written-list > li .info > ul {display: flex; align-items: center; column-gap: .8rem;}
.written-list > li .info > ul > li {display: flex; align-items: center; column-gap: .2rem;}
.written-list > li .info > ul > li > p {font-size: 1.2rem; font-weight: 500; color: var(--gray500);}
.written-list.comment > li .cont p {background-image: url(/img/icon/ic-coment-line-12-a0417c0e97ffba15b03253f082d05178.svg); background-repeat: no-repeat; background-size: 1.2rem; background-position: left center; padding-left: 2rem;}

@media (prefers-color-scheme: dark) {
    .written-list > li .cont p {color: var(--gray500);}
}

/* 마이페이지 > 1:1 문의 */
.qna-list > li {cursor: pointer;}
.qna-list > li + li {padding-top: 2rem; border-top: 1px solid var(--gray200);}
.qna-list .question {padding-bottom: 2rem; position: relative;}
.qna-list .question .label {margin-bottom: .6rem;}
.qna-list .question > div {display: flex; align-items: center; justify-content: space-between; column-gap: 2rem;}
.qna-list .question > div > h4 {font-size: 1.4rem; font-weight: 600; line-height: 1.4; position: relative; padding-left: 2.2rem;}
.qna-list .question > div > h4::before {content: 'Q'; font-size: 1.6rem; font-weight: 700; line-height: 1.3; color: var(--red800); position: absolute; top: 0; left: 0;}
.qna-list .question > span:not(.label) {display: block; font-size: 1.2rem; font-weight: 500; color: var(--gray500); margin-top: 1.2rem;}
.qna-list .question > p {display: none; font-size: 1.4rem; line-height: 1.4; margin-top: 1.6rem;}
.qna-list > li .article-img-swiper {display: none;}
.article-img-swiper {width: 100vw; margin: 1.2rem -2rem 0 -4rem; padding: 0 2rem 0 4rem;}
.article-img-swiper .swiper-slide {width: 10rem;}
.article-img-swiper .img {width: 10rem; height: 10rem; background-color: #fff; border: 1px solid var(--gray200); background-repeat: no-repeat; background-size: contain; background-position: center; cursor: pointer;}
.qna-list .answer {display: none; background-color: var(--gray100); padding: 2rem 2rem 2rem 4rem; position: relative;}
.qna-list .answer::before {content: 'A'; font-size: 1.6rem; font-weight: 700; line-height: 1.3; position: absolute; top: 2rem; left: 2rem;}
.qna-list .answer > p {font-size: 1.4rem; line-height: 1.4;}
.qna-list .answer > span {display: block; font-size: 1.2rem; font-weight: 500; color: var(--gray500); margin-top: 1.2rem;}

.qna-list > li.active .question > p,
.qna-list > li.active .answer {display: block;}
.qna-list > li.active .article-img-swiper {display: flex;}

/* 마이페이지 > 1:1 문의 > 1:1 문의 등록 */
.writing-btn {width: 5.2rem; height: 5.2rem; border-radius: 100%; position: fixed; right: 2rem; bottom: 5.4rem; cursor: pointer; z-index: 100; background-color: var(--red800); box-shadow: 2px 4px 4px rgba(200, 16, 46, 0.16); background-image: url(/img/icon/ic-pencil-24-e0a07674a10c9c2d2b3218dc5774d82c.svg); background-repeat: no-repeat; background-size: 2.4rem; background-position: center;}
.writing-btn + .faq-floating {bottom: 11.2rem;}

.box .writing-wrap {margin-top: -.8rem;}
.writing-wrap {margin: -2rem -2rem -2.4rem;}
.writing-wrap .tit {position: relative;}
.writing-wrap .tit > input[type="text"] {border: 0; border-radius: 0; padding: 0 2rem; font-size: 1.8rem; background-color: var(--white);}
.writing-wrap .cont {position: relative;}
.writing-wrap .cont > textarea {border: 0; border-top: 1px solid var(--gray200); padding: 1.6rem 2rem; font-size: 1.4rem;}
/* .writing-wrap .tit > input[type="text"] {border: 0; border-radius: 0; padding: 0 7rem 0 2rem; font-size: 1.8rem;} */
/* .writing-wrap .tit .limit-count {top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%);} */
/* .writing-wrap .cont {height: 40rem; position: relative;} */
/* .writing-wrap .cont > textarea {height: calc(100% - 1.2rem - 1.4rem - 1.2rem); border: 0; border-top: 1px solid var(--gray200); padding: 1.6rem 2rem; font-size: 1.4rem;} */
/* .writing-wrap .cont .limit-count {bottom: 1.2rem;} */

.writing-option {margin: -.8rem -2rem 0;}
.writing-option > li {display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; row-gap: 1.6rem; padding: 0 2rem;}
.writing-option > li + li {margin-top: 1.6rem; padding-top: 1.6rem; border-top: 1px solid var(--gray200);}
.writing-option > li > h6 {font-size: 1.6rem; font-weight: 600; display: flex; align-items: flex-end; column-gap: .2rem;}
.writing-option > li > h6 > span {font-size: 1.2rem; font-weight: 500; color: var(--gray400); line-height: 1.2;}
.writing-option > li > select {height: fit-content; width: 100%; padding: 0 3.2rem 0 0; background-position: right; font-size: 1.6rem; font-weight: 600; border: 0;}
.writing-option > li .writing-category {display: flex; align-items: center; border: 1px solid var(--gray200); border-radius: .2rem; overflow: hidden;}
.writing-option > li .writing-category > li {width: 6rem; height: 3.2rem; cursor: pointer;}
.writing-option > li .writing-category > li + li {border-left: 1px solid var(--gray200);}
.writing-option > li .writing-category > li > input[type="radio"] + label {width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; font-weight: 500; color: var(--gray500);}
.writing-option > li .writing-category > li > input[type="radio"] + label::before {content: none;}
.writing-option > li .writing-category > li > input[type="radio"]:checked + label {background-color: var(--red50); border-color: var(--red50); font-weight: 600; color: var(--red800);}
.writing-option > li .writing-category > li > input[type="radio"]:checked ~ label:nth-child {border-left-color: var(--red50);}

@media (prefers-color-scheme: dark) {
    .writing-option > li .writing-category > li > input[type="radio"]:checked + label {background-color: var(--gray200); border-color: var(--gray200); color: var(--red500);}
    .writing-option > li .writing-category > li > input[type="radio"]:checked ~ label:nth-child {border-left-color: var(--gray200);}
}

/* 마이페이지 > 스토어 주문 내역 */
.store.search-date {background-color: var(--white); padding: 2rem 2rem 0; width: 100%; position: fixed; top: 0; left: 0;}

.order-list {margin-top: 12.4rem;}
.order-list > li {border-top: 1px solid var(--black); padding: 1.6rem 0;}
.order-list > li .info {display: flex; align-items: center; column-gap: 1.2rem;}
.order-list > li .info .img {width: 6.4rem; height: 6.4rem; background-color: #fff; border: 1px solid var(--gray200); background-repeat: no-repeat; background-size: contain; background-position: center;}
.order-list > li .info .cont > span {font-size: 1.2rem; font-weight: 600; color: var(--red800);}
.order-list > li .info .cont > h6 {font-size: 1.4rem; font-weight: 500; margin-top: .4rem; line-height: 1.5;}
.order-list > li .info .cont > p {font-size: 1.6rem; font-weight: 700; display: flex; align-items: flex-end; column-gap: .2rem; margin-top: 1rem;}
.order-list > li .info .cont > p > span {font-size: 1.2rem; font-weight: 500; line-height: 1.2;}
.order-list > li .option {height: 4.6rem; margin-top: 1.6rem; padding: 0 1.2rem; display: flex; align-items: center; justify-content: space-between; background-color: var(--gray100);}
.order-list > li .option > span {font-size: 1.2rem; font-weight: 500; color: var(--gray500);}
.order-list > li .option > div {display: flex; align-items: center; column-gap: .4rem;}
.order-list > li .option > div button {min-width: 6rem; height: 3.2rem; font-size: 1.2rem; color: var(--gray500); background-color: var(--white); border-color: var(--gray200);}

.store.notification {height: calc(100vh - 6rem - 2rem - 10rem - 2.4rem - 3.4rem);}

@media (prefers-color-scheme: dark) {
    .order-list > li {border-top-color: var(--gray400);}
}

/* 마이페이지 > 스토어 주문 내역 > 주문취소 */
.order-detail {display: flex; align-items: flex-start; column-gap: 1.2rem; border-top: 1px solid var(--black); border-bottom: 1px solid var(--gray200); padding: 1.6rem 0;}
.order-detail .img {width: 6.4rem; height: 6.4rem; background-color: #fff; border: 1px solid var(--gray200); background-repeat: no-repeat; background-size: contain; background-position: center;}
.order-detail .cont > span {font-size: 1.2rem; font-weight: 600; color: var(--red800); margin-bottom: .4rem;}
.order-detail .cont > h6 {font-size: 1.4rem; font-weight: 500; line-height: 1.5;}
.order-detail .cont > p {font-size: 1.6rem; font-weight: 700; display: flex; align-items: flex-end; column-gap: .2rem; margin-top: 1rem;}
.order-detail .cont > p > span {font-size: 1.2rem; font-weight: 500; line-height: 1.2;}

@media (prefers-color-scheme: dark) {
    .order-detail {border-top-color: var(--gray400);}
}

.receipt-wrap {display: flex; flex-flow: column; row-gap: .4rem;}
.receipt-wrap + .receipt-wrap {margin-top: 2rem; border-top: 1px solid var(--gray200); padding-top: 2rem ;}
.receipt-wrap > li {display: flex; align-items: start; justify-content: space-between;}
.receipt-wrap > li > h4 {margin-bottom: 1.2rem; font-size: 1.6rem; font-weight: 700; color: var(--black);}
.receipt-wrap > li > h6 {font-size: 1.4rem; line-height: 1.6; display: flex; flex-flow: column;}
.receipt-wrap > li h6 > div {font-size: 1.4rem; line-height: 1.6; color: var(--gray500);}
.receipt-wrap > li h6 > i {width: 1.6rem; height: 1.6rem;}
.receipt-wrap > li p {font-size: 1.4rem; font-weight: 500; line-height: 1.6;}
.receipt-wrap > li > div {display: flex; flex-flow: column;}
.receipt-wrap > li > div > h6 {font-size: 1.4rem; line-height: 1.6; display: flex; column-gap: .4rem; align-items: center;}
.receipt-wrap > li > div > div {font-size: 1.4rem; line-height: 1.6; color: var(--gray500);}
.receipt-wrap > li.total {margin-top: 2rem; padding-top: 2rem; border-top: 1px solid var(--gray200);}
.receipt-wrap > li.total > h6 {font-size: 1.8rem; font-weight: 600;}
.receipt-wrap > li.total > p {font-size: 1.6rem; font-weight: 600;}

/* 마이페이지 > 스토어 주문 내역 > 배송조회 */
.delivery-step {display: grid; grid-template-columns: repeat(3, 1fr); align-items: flex-start;}
.delivery-step > li {display: flex; flex-flow: column; align-items: center; justify-content: center; position: relative;}
.delivery-step > li::before {content: ''; width: 100%; height: 1.2rem; display: block; background-image: url(/img/icon/img-delivery01-09f68a0a1ef36df8dabfc81ccf8065bf.svg); background-repeat: no-repeat; background-size: 1.2rem; background-position: center; position: relative; z-index: 2;}
.delivery-step > li::after {content: ''; width: 100%; height: 1px; display: block; background-color: var(--gray400); position: absolute; top: .55rem; z-index: 1;}
.delivery-step > li > h6 {margin-top: 1rem; font-size: 1.4rem; font-weight: 500; color: var(--gray400);}
.delivery-step > li > p {margin-top: .8rem; font-size: 1.2rem; color: var(--gray500);}
.delivery-step > li.active::before {background-image: url(/img/icon/img-delivery02-dab4287238d82b6cc31df35ef3c136d0.svg);}
.delivery-step > li.active::after {background-color: var(--red800);}
.delivery-step > li.active > h6 {color: var(--red800);}

.delivery-detail {display: flex; flex-flow: column; row-gap: 1.6rem; position: relative;}
.delivery-detail::before {content: ''; width: .5px; height: 100%; display: block; background-color: var(--gray400); position: absolute; top: .2rem; left: .425rem; z-index: 1;}
.delivery-detail > li {display: flex; flex-flow: column; row-gap: .8rem; padding-left: 1.8rem; position: relative;}
.delivery-detail > li::before {content: ''; width: 1rem; height: 1rem; display: block; background-image: url(/img/icon/img-delivery01-09f68a0a1ef36df8dabfc81ccf8065bf.svg); background-size: cover; background-position: center; position: absolute; left: 0; top: .2rem; z-index: 3;}
.delivery-detail > li:last-child::before {background-image: url(/img/icon/img-delivery02-dab4287238d82b6cc31df35ef3c136d0.svg);}
.delivery-detail > li:last-child::after {content: ''; width: 2px; height: 100%; display: block; background-color: var(--white); position: absolute; top: .2rem; left: .4rem; z-index: 2;}
.delivery-detail > li > h4 {font-size: 1.4rem; font-weight: 500;}
.delivery-detail > li > h6 {font-size: 1.2rem; color: var(--gray500);}
.delivery-detail > li > p {font-size: 1.2rem; color: var(--gray500);}
.delivery-detail > li > p + h6 {padding-top: .2rem;}

.delivery-desc > li {display: flex; align-items: center; column-gap: .6rem;}
.delivery-desc > li + li {margin-top: .8rem;}
.delivery-desc > li > h6 {font-size: 1.4rem; color: var(--gray500); width: 6.2rem;}
.delivery-desc > li > p {font-size: 1.4rem; width: calc(100% - 6.8rem);}

/* 마이페이지 > 스토어 주문 내역 > 교환신청 반품신청 */
.reason-check {display: flex; flex-flow: column; row-gap: 1.6rem;}

/* 마이페이지 > 스토어 주문 내역 > 상품평 */
.review-grade {padding: 3.2rem 0; display: flex; flex-flow: column; align-items: center; justify-content: center; row-gap: 1.2rem; border-bottom: 1px solid var(--gray200);}
.review-grade > h4 {font-size: 2rem; font-weight: 600;}

.grade-wrap {display: flex; align-items: center; justify-content: center; column-gap: .4rem;}
.grade-wrap > li {cursor: pointer;}
.grade-wrap.sm {column-gap: 0;}
.grade-wrap.sm i {width: 1.6rem; height: 1.6rem;}

.review-view {padding: 1.6rem 0; border-bottom: 1px solid var(--gray200); display: flex; flex-flow: column;}
.review-view .review-info {display: flex; align-items: center; column-gap: .4rem; margin-bottom: 1.2rem;}
.review-view .review-info > li {height: 1.6rem; font-size: 1.2rem; color: var(--gray500); line-height: 1.6;}
.review-view > h6 {font-size: 1.4rem; font-weight: 600; line-height: 1.4;}
.review-view > p {font-size: 1.4rem; color: var(--gray700); line-height: 1.5; margin-top: 1rem;}
.review-view > span {font-size: 1.2rem; color: var(--gray500); display: block; margin-top: 1.2rem;}

@media (prefers-color-scheme: dark) {
    .review-view > p {color: var(--gray500);}
}

/* 랜더스톡 ------------------------------ */
/* 랜더스톡 > 공지사항 */
.talk.tab-style01 ~ .tab-cont-wrap .search-wrap {top: 4.4rem;}
.talk.tab-style01 ~ .tab-cont-wrap .search-wrap + * {margin-top: calc(4.4rem + 6.8rem);}
.talk.tab-style01 ~ .tab-cont-wrap .cont-box:nth-child(1) {margin-top: 0;}

.notice-list > li {cursor: pointer;}
.notice-list > li + li {margin-top: 2rem; padding-top: 2rem; border-top: 1px solid var(--gray200);}
.notice-list > li > h4 {font-size: 1.6rem; font-weight: 600; line-height: 1.5; margin-top: .4rem; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; line-clamp: 2; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.notice-list > li > p {font-size: 1.2rem; color: var(--gray500); margin-top: 1.6rem;}

/* 랜더스톡 > 공지사항 > 공지사항 상세 */
.notice-title > span {margin-bottom: .6rem;}
.notice-title > h4 {font-size: 1.6rem; font-weight: 600; line-height: 1.5; word-break: keep-all;}
.notice-title > ul {margin-top: 1.2rem; display: flex; align-items: center; column-gap: .9rem;}
.notice-title > ul > li {display: flex; align-items: center; column-gap: .2rem; position: relative; font-size: 1.2rem; color: var(--gray500);}
.notice-title > ul > li + li::before {content: ''; width: 1px; height: 1rem; display: block; background-color: var(--gray300); position: absolute; left: -.5rem;}

.notice-cont {margin-top: 2.4rem;}
.notice-cont > * + * {margin-top: 2.4rem;}
.notice-cont > h6 {font-size: 1.6rem; font-weight: 600;}
.notice-cont > h6 + p {margin-top: 1.6rem;}
.notice-cont > p {font-size: 1.4rem; line-height: 1.6; color: var(--gray700);}
.notice-cont img {display: block; width: 100% !important; margin: 0;}
.notice-cont iframe {width: 100%; height: 50vw;}

@media (prefers-color-scheme: dark) {
    .notice-cont > p {color: var(--black);}
}

.option-cont {padding: 2.4rem;}
.option-cont > * {margin: 0.6rem 0 0.6rem 0; font-size:1.3rem;}
.option-cont > label {width:fit-content;}

.notice-bottom-wrap {position: fixed; left: 0; bottom: 0; width: 100vw; padding: 1rem 2rem 3.4rem; display: flex; column-gap: .8rem; background-color: var(--white); z-index: 99;}
.notice-bottom-wrap button {width: calc(100% - 8.4rem - .8rem - 8.4rem - .8rem);}
.notice-bottom-wrap button.prev,
.notice-bottom-wrap button.next {width: 8.4rem; background-color: var(--white); border-color: var(--gray200); color: var(--gray500);}
.notice-bottom-wrap button:disabled {background-color: var(--gray300); border-color: var(--gray300); color: var(--white);}
.notice-bottom-wrap button:disabled i {filter: brightness(10);}

@media (prefers-color-scheme: dark) {
    .notice-bottom-wrap button:disabled {background-color: #1c1c1c; color: #424243;}
    .notice-bottom-wrap button:disabled i {filter: none; background-image: url(/img/icon/ic-arrow-right-16-gr-dark-3a1b0df1c529337d77eb948a1a7fc89c.svg);}
}

/* 랜더스톡 > SSG톡 */
.notice-wrap {padding: 1.4rem 2rem; border-bottom: 1px solid var(--gray200); display: flex; align-items: center; column-gap: 1.2rem; cursor: pointer; justify-content: space-between;}
.notice-wrap > div {width: calc(100% - 5.8rem - .6rem); display: flex; align-items: center; column-gap: .6rem;}
.notice-wrap > div > p {display: block; font-size: 1.4rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.notice-wrap > span {width: 5.8rem; font-size: 1.2rem; color: var(--gray500);}

.best-article-swiper {margin: -1.6rem -2rem;}
.best-article-swiper .swiper-wrapper {align-items: center; padding: 1.6rem 0;}
.best-article-swiper .swiper-slide {width: 28rem; height: 13rem; border-radius: .8rem; box-shadow: .4rem .4rem 1.2rem rgba(0, 0, 0, .04); border: 1px solid var(--gray200); padding: 2rem 1.6rem; cursor: pointer;}
.best-article-swiper .swiper-slide.swiper-slide-active {padding: 2.4rem 1.6rem; height: 14rem;}
.best-article-swiper .swiper-slide > div {display: flex; align-items: center; justify-content: space-between;}
.best-article-swiper .swiper-slide .rank {font-size: 1.6rem; font-weight: 600; color: var(--red800);}
.best-article-swiper .swiper-slide > h4 {font-size: 1.6rem; line-height: 1.1; font-weight: 600; margin-top: .6rem; width: 24.8rem; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.best-article-swiper .swiper-slide > p {font-size: 1.4rem; line-height: 1.1; margin-top: .6rem; width: 24.8rem; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.best-article-swiper .swiper-slide .info {margin-top: 1.6rem;}
.best-article-swiper .swiper-slide .info > ul {display: flex; align-items: center; column-gap: .9rem;}
.best-article-swiper .swiper-slide .info > ul > li {display: flex; align-items: center; column-gap: .2rem; font-size: 1.2rem; color: var(--gray500); position: relative;}
.best-article-swiper .swiper-slide .info .upload > li + li::before {content: ''; width: 1px; height: 1rem; background-color: var(--gray300); position: absolute; left: -.5rem;}
.best-article-swiper .swiper-slide .info .respond > li {font-weight: 500;}

.search-result .post-list {margin-top: calc(14.4rem + 4.6rem);}
.post-list {margin-top: 0;}
.post-list > li {cursor: pointer;}
.post-list > li + li {margin-top: 2rem; padding-top: 2rem; border-top: 1px solid var(--gray200);}
.post-list > li .cont {display: flex; align-items: flex-start; justify-content: space-between; column-gap: 2rem;}
.post-list > li .cont > div {width: calc(100% - 2rem - 4.8rem);}
.post-list > li .cont h4 {font-size: 1.6rem; font-weight: 600; line-height: 1.3; margin-top: .6rem;}
.post-list > li .cont p {font-size: 1.4rem; line-height: 1.2; color: var(--gray700); margin-top: .6rem; width: 22rem; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.post-list > li .cont .img {width: 4.8rem; height: 4.8rem; background-repeat: no-repeat; background-size: cover; background-position: center;}
.post-list > li .info {display: flex; align-items: center; justify-content: space-between; margin-top: 1.6rem;}
.post-list > li .info > span {font-size: 1.2rem; color: var(--gray500);}
.post-list > li .info > ul {display: flex; align-items: center; column-gap: .9rem;}
.post-list > li .info > ul > li {display: flex; align-items: center; column-gap: .2rem; font-size: 1.2rem; color: var(--gray500); position: relative;}
.post-list > li .info .upload > li + li::before {content: ''; width: 1px; height: 1rem; background-color: var(--gray300); position: absolute; left: -.5rem;}
.post-list > li .info .respond > li {font-weight: 500;}

@media (prefers-color-scheme: dark) {
    .post-list > li .cont p {color: var(--gray500);}
}

/* 랜더스톡 > SSG톡 > 검색 */
.search.notification {height: calc(100vh - 6rem - 2rem - 4.4rem - 1.2rem - 4.4rem - 2.4rem - 4.6rem - 2.4rem - 3.4rem);}

/* 랜더스톡 > SSG톡 > SSG톡 상세 */
.post-detail .post-title > span {margin-bottom: .6rem;}
.post-detail .post-title > h4 {font-size: 2rem; font-weight: 700; line-height: 1.5;}
.post-detail .post-title > div {display: flex; align-items: center; justify-content: space-between; margin-top: 1.2rem;}
.post-detail .post-title > div > ul {display: flex; align-items: center; column-gap: .9rem;}
.post-detail .post-title > div > ul > li {display: flex; align-items: center; column-gap: .4rem; position: relative; font-size: 1.2rem; color: var(--gray500);}
.post-detail .post-title > div > ul > li + li::before {content: ''; width: 1px; height: 1rem; display: block; background-color: var(--gray300); position: absolute; left: -.5rem;}
.post-detail .post-title > div > ul > li .img {width: 2.4rem; height: 2.4rem; border: 1px solid var(--gray200); border-radius: 100%; background-repeat: no-repeat; background-size: cover; background-position: top center;}
.post-detail .post-title > div > ul > li:nth-child(1) {text-decoration: underline;}
.post-detail .post-title > div > span {font-size: 1.2rem; color: var(--gray500);}
.post-detail .post-cont {margin-top: 1.2rem;}
.post-detail .post-cont * {font-size: 1.4rem; line-height: 1.6; color: var(--gray700);}
.post-detail .post-cont * + * {margin-top: 2.4rem;}
/* .post-detail .post-cont .post-img-swiper {height: 22rem;} */
.post-detail .post-cont .post-img-swiper .swiper-wrapper {align-items: center;}
.post-detail .post-cont .post-img-swiper .swiper-wrapper .swiper-slide {margin: 0 0 2.2rem; text-align: center;}
.post-detail .post-cont .post-img-swiper .swiper-wrapper .swiper-slide img {width: 100%;}
.post-detail .post-cont .post-img-swiper .swiper-pagination {bottom: 0; margin: 0; font-size: 0;}
.post-detail .post-cont .post-img-swiper .swiper-pagination .swiper-pagination-bullet {width: .6rem; height: .6rem; margin: 0 .4rem; background-color: var(--gray200); opacity: 1;}
.post-detail .post-cont .post-img-swiper .swiper-pagination .swiper-pagination-bullet-active {background-color: var(--red800);}
.post-detail .post-respond {display: flex; align-items: center; justify-content: space-between; height: 4.4rem; margin: 2.4rem -2rem -2.4rem; padding: 0 2rem; border-top: 1px solid var(--gray200);}
.post-detail .post-respond > ul {display: flex; align-items: center; column-gap: 1.2rem;}
.post-detail .post-respond > ul > li {display: flex; align-items: center; column-gap: .4rem;}
.post-detail .post-respond > ul > li > * {font-size: 1.2rem; font-weight: 500; color: var(--gray500);}
.post-detail .post-respond > ul > li:nth-child(1) {cursor: pointer;}
.post-detail .post-respond > ul > li:nth-child(1).active > * {font-weight: 600; color: var(--red500);}
.post-detail .post-respond > i {width: 2rem; height: 2rem;}

@media (prefers-color-scheme: dark) {
    .post-detail .post-cont * {color: var(--black);}
}

.comment-list > li + li {margin-top: 2.4rem;}
.comment-list > li > ul {display: flex; align-items: center; column-gap: .9rem; margin-top: 1.6rem;}
.comment-list > li > ul > li {font-size: 1.2rem; color: var(--gray500);}
.comment-list > li > ul > li.reply-count {color: var(--red800); font-weight: 500;}
.comment-list > li .profile {display: flex; align-items: center; column-gap: .4rem; margin-bottom: .6rem;}
.comment-list > li .profile .img {width: 2.4rem; height: 2.4rem; border: 1px solid var(--gray200); border-radius: 100%; background-repeat: no-repeat; background-size: cover; background-position: top center;}
.comment-list > li .profile > p {font-size: 1.2rem; font-weight: 500; color: var(--gray500);}
.comment-list > li .comment {display: flex; align-items: flex-start; column-gap: 3rem;}
.comment-list > li .comment > p {width: calc(100% - 3rem - 2rem); font-size: 1.4rem; line-height: 1.6; color: var(--gray700); word-break: keep-all;}
.comment-list > li .comment .more {position: relative;}
.comment-list > li .comment .more .more-layer {position: absolute; top: 2rem; right: 0; display: flex; align-items: center; border: 1px solid var(--gray200); background-color: var(--white); border-radius: .4rem;}
.comment-list > li .comment .more .more-layer button {width: fit-content; height: 4.6rem; padding: 0 1.6rem; font-size: 1.4rem; font-weight: 500; color: var(--black); background-color: transparent; border-color: transparent; white-space: nowrap; position: relative;}
.comment-list > li .comment .more .more-layer button + button::before {content: ''; width: 1px; height: 1.2rem; display: block; background-color: var(--gray200); position: absolute; left: 0;}
.comment-list > li .comment .more .more-layer .delete {color: var(--gray500);}
.comment-list > li .modify-wrap > textarea {height: 10rem;}
.comment-list > li .modify-wrap > div {margin-top: .8rem; display: flex; column-gap: .8rem; align-items: center; justify-content: flex-end;}
.comment-list > li .modify-wrap > div > button {height: 3.2rem; width: 6rem; border-color: var(--gray200); background-color: var(--white); color: var(--gray500); font-size: 1.2rem; font-weight: 500; border-radius: .2rem;}
.comment-list > li .modify-wrap > div > button.modify {color: var(--black);}

.comment-list > li .reply-wrap {display: none; width: 100vw; margin: 1.6rem -2rem 0; padding: 1.6rem 2rem; background-color: rgba(242, 243, 246, .5);}
.comment-list > li .reply-wrap > li:not(:last-child) {padding-left: 2rem; background-image: url(/img/icon/ic-reply-12-d9daec2b5b86e41369d7895928daabd6.svg); background-repeat: no-repeat; background-size: 1.2rem; background-position: left top;}
.comment-list > li .reply-wrap > li + li {margin-top: 2rem;}
.comment-list > li .reply-wrap > li > span {font-size: 1.2rem; color: var(--gray500); display: block; margin-top: .8rem;}
.comment-list > li .reply-wrap .reply-writing {background-image: none; padding-left: 0;}
.comment-list > li .reply-wrap .reply-writing > div {display: flex; align-items: center; justify-content: flex-end; column-gap: .8rem; margin-top: .8rem;}
.comment-list > li .reply-wrap .reply-writing > div > button {height: 3.2rem; width: 6rem; border-color: var(--gray200); background-color: var(--white); color: var(--gray500); font-size: 1.2rem; font-weight: 500; border-radius: .2rem;}
.comment-list > li .reply-wrap .reply-writing > div > button.reg {color: var(--black);}

.comment-list > li .reply-wrap.active {display: block;}

@media (prefers-color-scheme: dark) {
    .comment-list > li .profile .img {border-color: var(--gray200);}
    .comment-list > li .comment > p {color: var(--black);}

    .comment-list > li .reply-wrap {background-color: var(--gray100);}
}

.comment-writing {position: relative;}
.comment-writing::before {content: ''; width: 100%; height: 10.3rem; display: block;}
.comment-writing > div {position: fixed; left: 0; bottom: 0; width: 100%; padding: 1.2rem 2rem 4.6rem; display: flex; align-items: center; column-gap: .8rem; background-color: var(--white); box-shadow: .4rem .4rem 1.2rem rgba(0, 0, 0, .08); border-top: 1px solid var(--gray100); z-index: 10;}
.comment-writing > div input[type="text"] {width: calc(100% - 8rem - .8rem);}
.comment-writing > div button {width: 8rem; height: 4.4rem;}

/* 랜더스톡 > SSG톡 > 검색 */
.profile.tab-wrap .tab-style01 {top: calc(10rem + 3.2rem);}
.profile.tab-wrap ~ .tab-cont-wrap {height: calc(100vh - 10rem - 3.2rem - .8rem - 4.4rem); overflow-y: auto; margin-top: 2rem; margin-bottom: -3.4rem;}

.user-profile {display: flex; align-items: center; justify-content: space-between;}
.user-profile .profile {display: flex; align-items: center; column-gap: 1.2rem;}
.user-profile .profile .img {width: 3.2rem; height: 3.2rem; background-repeat: no-repeat; background-size: cover; background-position: center; border-radius: 100%; border: 1px solid var(--gray200);}
.user-profile .profile .info {display: flex; flex-flow: column; row-gap: .8rem;}
.user-profile .profile .info > h6 {font-size: 2rem; font-weight: 700;}
.user-profile .profile .info > p {font-size: 1.2rem; color: var(--gray500);}
.user-profile .badge {width: 8rem; height: 8rem; border-radius: .4rem; border: 1px solid var(--gray100); position: relative;}
.user-profile .badge::before {content: ''; width: 100%; height: 100%; display: block; background-image: url(/img/icon/ic-lock-32-e818b46833b61dec11d7aead0fbd547c.svg); background-color: var(--gray100); background-position: center; background-size: 3.2rem; background-repeat: no-repeat; position: absolute; top: 0; left: 0; z-index: 1;}
.user-profile .badge.active::before {content: none;}
.user-profile .badge .img {width: 100%; height: 100%; background-repeat: no-repeat; background-size: 5.6rem; background-position: center;}

/* 랜더스톡 > 이벤트 > 일반 이벤트 */
.event-general-wrap {min-height: calc(100vh - 6rem - 2rem - 8.2rem - 3.4rem); display: flex; align-items: center; justify-content: center; flex-flow: column; row-gap: 3.2rem;}
.event-general-wrap > h4 {text-align: center; font-size: 2rem; font-weight: 700; line-height: 1.6;}
.event-general-wrap > p {text-align: center; font-size: 1.4rem; font-weight: 400; line-height: 1.6;}

.event-general-type01 {width: 100%; display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 1.2rem;}
.event-general-type01 input + label {height: 4.4rem; padding: 1.2rem; font-size: 1.4rem; font-weight: 500; background-color: var(--gray100); border: 1px solid var(--gray100); border-radius: .4rem; display: flex; align-items: center; justify-content: space-between; flex-direction: row-reverse;}
.event-general-type01 input:checked + label {background-color: var(--white); border-color: var(--red800); }

.event-general-type02 {width: 100%; display: flex; flex-flow: column; row-gap: 1.2rem;}
.event-general-type02 > li {display: flex; align-items: center; column-gap: .8rem;}
.event-general-type02 > li input + label {width: 100%; height: 7.2rem; padding: 0 1.6rem; background-color: var(--gray100); border: 1px solid var(--gray100); border-radius: .4rem;
    display: flex; column-gap: .6rem; cursor: pointer; align-items: center;
}
.event-general-type02 > li input + label::before {order: 3;}
.event-general-type02 > li .img {width: 4.8rem; height: 4.8rem; border-radius: 100%; border: 1px solid var(--gray200); background-color: #fff; background-repeat: no-repeat; background-size: cover; background-position: top center;}
.event-general-type02 > li .info {width: calc(100% - 4.8rem - .8rem - 2rem - .8rem); display: flex; flex-flow: column; row-gap: .6rem;}
.event-general-type02 > li .info > p {font-size: 1.6rem; font-weight: 600; color: var(--red800);}
.event-general-type02 > li .info > h6 {display: flex; align-items: flex-end; column-gap: .4rem; font-size: 1.6rem; font-weight: 600;}
.event-general-type02 > li .info > h6 > span {font-size: 1.2rem; font-weight: initial; color: var(--gray500); line-height: 1.2; margin-left: 0.5rem;}
.event-general-type02 > li input[type="radio"]:checked + label {border-color: var(--red800); background-color: var(--white);}

.event-general-type03 input + label {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    padding: 0.8rem 1.2rem 0.8rem 3.2rem;
    font-size: 1.4rem;
    font-weight: 500;
    background-color: var(--gray100);
    border: 1px solid var(--gray100);
    border-radius: .4rem;
    position: relative;
}
.event-general-type03 input + label::before {
    content: '';
    position: absolute; /* 상대적으로 위치 지정 */
    left: 0; /* 왼쪽 끝에 위치 */
    top: 50%; /* 수직으로 중앙에 위치 */
    transform: translateY(-50%); /* 수직 중앙 정렬 */
    width: 2rem;
    height: 2rem;
    display: inline-block;
    margin-left: 0.6rem;
}
.event-general-type03 input:checked + label {
    background-color: var(--white);
    border-color: var(--red800);
}
.event-general-type03 li {
    display: flex;
    flex-direction: column;
}
.event-general-type03 li input {
    order: 2;
    width: 2rem;
}
.event-general-type03 li label {
    order: 1;
    margin-bottom: 0.5rem;
}

.event-general-type04 {width: 100%; display: flex; flex-flow: column; row-gap: 1.2rem;}
.event-general-type04 > li input + label {width: 100%; height: fit-content; padding: 1.2rem 1.6rem; background-color: var(--gray100); border: 1px solid var(--gray100); border-radius: .4rem; font-size: 1.4rem; font-weight: 500; display: flex; align-items: center; justify-content: space-between;}
.event-general-type04 > li input + label::before {order: 3;}
.event-general-type04 > li input + label > p > span {font-size: 1.2rem; font-weight: initial; color: var(--gray500); line-height: 1.2; margin-left: 1rem;}
.event-general-type04 > li input:checked + label {border-color: var(--red800); background-color: var(--white);}

.pop-cont .terms-cont {padding: 0 1.6rem 3rem;}

/* 랜더스톡 > 이벤트 > 룰렛 참여 */
.roulette-cont {margin: 0 -2rem; padding: 3.2rem 2rem; background-repeat: no-repeat; background-size: cover; background-position: center top;}
.roulette-cont > h4 {font-size: 2rem; font-weight: 700; color: var(--red800); line-height: 1.4;}
.roulette-cont > p {font-size: 1.4rem; margin-top: 1.6rem; line-height: 1.6; word-break: keep-all; color: #2B2B2B;}

.roulette-wrap {width: 100%; height: 115.2vw; margin-top: 2.4rem; background-repeat: no-repeat; background-size: contain; background-position: center; position: relative;}
.roulette-wrap .roulette-pan {width: 79.2vw; height: 79.2vw; background-repeat: no-repeat; background-size: contain; background-position: center; position: absolute; top: 15.5%; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%);}
.roulette-wrap .roulette-picker {width: 10.8vw; height: 10.8vw; background-repeat: no-repeat; background-size: contain; background-position: center; position: absolute; top: 10.8%; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%);}
.roulette-wrap .roulette-btn {width: 30vw; height: 30vw; background-repeat: no-repeat; background-size: contain; background-position: center; position: absolute; top: 36.3%; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); cursor: pointer;}

#canvas {
    width:100%;
    height:100%;
    position:absolute;
}

/* 랜더스톡 > 이벤트 > 승부예측 참여 */
.event-victory-wrap {display: flex; flex-flow: column; align-items: center; justify-content: center; row-gap: 3.2rem; padding: 6rem 0 8rem;}
.event-victory-wrap > p {text-align: center; font-size: 2rem; font-weight: 700; line-height: 1.5;}
.event-victory {display: flex; align-items: center; justify-content: center; column-gap: 2rem;}
.event-victory > li {display: flex; flex-flow: column; align-items: center; justify-content: center;}
.event-victory div {font-size: 2rem; font-weight: 700; color: var(--gray500);}
.event-victory ul {display: flex; align-items: center; justify-content: center; column-gap: .9rem; margin-top: .8rem;}
.event-victory ul > li {display: flex; align-items: center; position: relative; font-size: 1.2rem; color: var(--gray500);}
.event-victory ul > li + li::before {content: ''; width: 1px; height: 1rem; display: block; background-color: var(--gray300); position: absolute; left: -.5rem;}
.event-victory .label {margin-top: 1.2rem;}

.event-victory input[type="radio"] + label::before {content: none;}
.event-victory input[type="radio"] + label {width: 8rem; height: 8rem; border-radius: .4rem; display: flex; flex-flow: column; align-items: center; justify-content: center; row-gap: .4rem; opacity: .2; cursor: pointer;}
.event-victory input[type="radio"] + label > p {font-size: 1.2rem; font-weight: 500; color: #fff;}
.event-victory input[type="radio"]:checked + label {opacity: 1;}

.event-victory > li .team {width: 8rem; height: 8rem; border-radius: .4rem; display: flex; flex-flow: column; align-items: center; justify-content: center; row-gap: .4rem; cursor: pointer;}
.event-victory > li .team > p {font-size: 1.2rem; font-weight: 500; color: #fff;}

.event-victory .team {background-image: url(/img/img-team-no-173f89eb108901dbe256bef516e8d67d.png); background-repeat: no-repeat; background-size: contain; background-position: center; box-shadow: .4rem .4rem 1.2rem #F2F3F6;}
.event-victory .ssg {background-image: none; background-color: var(--red800); box-shadow: .4rem .4rem 1.2rem rgba(200, 16, 46, .2);}
.event-victory .doosan {background-image: none; background-color: #131230; box-shadow: .4rem .4rem 1.2rem rgba(19, 18, 48, .2);}
.event-victory .hanwha {background-image: none; background-color: #F37321; box-shadow: .4rem .4rem 1.2rem rgba(243, 115, 33, .2);}
.event-victory .kiwoom {background-image: none; background-color: #6C0012; box-shadow: .4rem .4rem 1.2rem rgba(108, 0, 18, .2);}
.event-victory .kia {background-image: none; background-color: #05141F; box-shadow: .4rem .4rem 1.2rem rgba(5, 20, 31, .2);}
.event-victory .samsung {background-image: none; background-color: #0066B3; box-shadow: .4rem .4rem 1.2rem rgba(0, 102, 179, .2);}
.event-victory .lotte {background-image: none; background-color: #002856; box-shadow: .4rem .4rem 1.2rem rgba(0, 40, 86, .2);}
.event-victory .lg {background-image: none; background-color: #960027; box-shadow: .4rem .4rem 1.2rem rgba(150, 0, 39, .2);}
.event-victory .kt {background-image: none; background-color: #221E1F; box-shadow: .4rem .4rem 1.2rem rgba(34, 30, 31, .2);}
.event-victory .nc {background-image: none; background-color: #004BAF; box-shadow: .4rem .4rem 1.2rem rgba(0, 75, 175, .2);}

@media (prefers-color-scheme: dark) {
    .event-victory .team {background-image: url(/img/img-team-no-dark-bb3861032d732ae103aa4dadb6e820ee.png); box-shadow: none;}
    .event-victory .ssg {background-image: none; background-color: var(--red800); box-shadow: .4rem .4rem 1.2rem rgba(200, 16, 46, .2);}
    .event-victory .doosan {background-image: none; background-color: #131230; box-shadow: .4rem .4rem 1.2rem rgba(19, 18, 48, .2);}
    .event-victory .hanwha {background-image: none; background-color: #F37321; box-shadow: .4rem .4rem 1.2rem rgba(243, 115, 33, .2);}
    .event-victory .kiwoom {background-image: none; background-color: #6C0012; box-shadow: .4rem .4rem 1.2rem rgba(108, 0, 18, .2);}
    .event-victory .kia {background-image: none; background-color: #05141F; box-shadow: .4rem .4rem 1.2rem rgba(5, 20, 31, .2);}
    .event-victory .samsung {background-image: none; background-color: #0066B3; box-shadow: .4rem .4rem 1.2rem rgba(0, 102, 179, .2);}
    .event-victory .lotte {background-image: none; background-color: #002856; box-shadow: .4rem .4rem 1.2rem rgba(0, 40, 86, .2);}
    .event-victory .lg {background-image: none; background-color: #960027; box-shadow: .4rem .4rem 1.2rem rgba(150, 0, 39, .2);}
    .event-victory .kt {background-image: none; background-color: #221E1F; box-shadow: .4rem .4rem 1.2rem rgba(34, 30, 31, .2);}
    .event-victory .nc {background-image: none; background-color: #004BAF; box-shadow: .4rem .4rem 1.2rem rgba(0, 75, 175, .2);}
}

/* 랜더스톡 > 이벤트 > 승부예측 결과 */
.event-result {display: flex; flex-flow: column; align-items: center; justify-content: center;}
.event-result > h6 {font-size: 2rem; font-weight: 700;}
.event-result > p {text-align: center; font-size: 1.4rem; line-height: 1.6; margin-top: 1.2rem;}
.event-result > i {margin-top: 3.2rem;}
.event-result.success {min-height: calc(100vh - 2rem - 2.4rem - 14.4rem - 9.2rem - 3.4rem);}
.event-result.failed {min-height: 33rem; height: calc(100vh - 2rem - 2.4rem - 28rem - 9.2rem - 3.4rem);}
.event-result.failed > h6 {color: var(--gray400);}
.event-result.end {min-height: calc(100vh - 2rem - 2.4rem - 14.4rem - 9.2rem - 3.4rem);}
.event-result.end > h6 {color: var(--gray400);}

/* 랜더스톡 > 이벤트 > 라인업예측 참여 */
.event-lineup-wrap {display: flex; flex-flow: column; align-items: center; justify-content: center; row-gap: 3.2rem; padding: 2rem 0 4rem;}
.event-lineup-wrap > p {text-align: center; font-size: 2rem; font-weight: 700; line-height: 1.5;}
.event-lineup {width: 100%; display: flex; align-items: center; grid-gap: 1.2rem; flex-wrap: wrap;}
.event-lineup > li {width: calc((100% - 1.2rem) / 2); padding: 1.2rem; display: flex; align-items: center; column-gap: .8rem; border: 1px solid var(--gray200); border-radius: .4rem;}
.event-lineup > li > div {width: 2rem; height: 2rem; border-radius: .2rem; background-color: var(--red800); font-size: 1.4rem; font-weight: 500; color: var(--white); display: flex; align-items: center; justify-content: center;}
.event-lineup > li > select {width: calc(100% - 2rem - .8rem); height: fit-content; padding: 0 2.8rem 0  0.5rem; background-position: right center; border: none; max-height: 100px; overflow-y: scroll; }
.event-lineup > li > select:disabled {background-image: none;}

@media (prefers-color-scheme: dark) {
    .event-lineup > li > select {background-color: var(--white);}
}

/* 랜더스톡 > 이벤트 > 라인업예측 결과 */
.event-result.lineup {min-height: calc(100vh - 2rem - 2.4rem - 33.2rem - 9.2rem - 3.4rem);}

.event-lineup-result {width: 100%; display: flex; align-items: center; grid-gap: 1.2rem; flex-wrap: wrap;}
.event-lineup-result > li {width: calc((100% - 1.2rem) / 2); padding: 1.2rem; display: flex; align-items: center; column-gap: .8rem; background-color: var(--gray100); border-radius: .4rem; position: relative;}
.event-lineup-result > li > div {width: 2rem; height: 2rem; border-radius: .2rem; background-color: var(--system-blue); font-size: 1.4rem; font-weight: 500; color: var(--white); display: flex; align-items: center; justify-content: center;}
.event-lineup-result > li > p {width: calc(100% - 2rem - .8rem); font-size: 1.4rem; font-weight: 500; color: var(--system-blue);}
.event-lineup-result > li.failed::before {content: ''; width: 2rem; height: 2rem; display: block; background-image: url(/img/icon/ic-failed-20-3f34deaa2b2c395028e81412c1584f7d.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%);}
.event-lineup-result > li.failed > div {background-color: var(--system-red);}
.event-lineup-result > li.failed > p {color: var(--system-red);}

/* 랜더스톡 > 이벤트 > 쓱퀴즈 참여 */
.event-result.mission {height: 33rem; min-height: auto;}

.event-mission-wrap {padding: .4rem 0 2.4rem;}
.event-mission-wrap > p {text-align: center; font-size: 2rem; font-weight: 700; line-height: 1.5; margin-bottom: 2.4rem;}

.event-mission-team {display: flex; flex-flow: column; row-gap: 1.6rem; align-items: center; justify-content: center; margin-bottom: 3.2rem; padding: 2rem; border-radius: .8rem; box-shadow: .4rem .4rem .8rem rgba(0, 0, 0, .12); background-image: url(/img/team-bg-db797b303d4bd01d173f807f0afcf5ea.svg), linear-gradient(180deg, #E72343 0%, #E93E55 100%); background-repeat: no-repeat; background-size: 17.5rem auto, 100%; background-position: right -1.2rem bottom, center;}
.event-mission-team > p {font-size: 1.4rem; font-weight: 500; color: var(--red300);}
.event-mission-team .team {width: 100%; display: flex; align-items: center; justify-content: center; column-gap: 9rem;}
.event-mission-team .team > li {width: calc((100% - 9rem) / 2); display: flex; align-items: center; column-gap: 1.2rem; position: relative;}
.event-mission-team .team > li:nth-child(1) {justify-content: flex-end;}
.event-mission-team .team > li + li::before {content: 'VS'; font-size: 1.8rem; font-weight: 700; color: #fff; width: 2.6rem; position: absolute; left: -5.8rem;}
.event-mission-team .team > li > i {width: 5.2rem; height: 5.2rem;}
.event-mission-team .team > li > p {font-size: 1.6rem; font-weight: 500; color: #fff;}

.event-mission {display: flex; flex-flow: column; row-gap: 1.2rem; margin-bottom:5rem;}
.event-mission > li input[type="radio"] + label {display: flex; column-gap: .8rem; align-items: center; cursor: pointer; width: 100%; height: 7.2rem; padding: 0 1.6rem; background-color: var(--gray100); border: 1px solid var(--gray100); border-radius: .4rem;}
.event-mission > li input[type="radio"] + label::before {order: 3;}
.event-mission > li .img {width: 4.8rem; height: 4.8rem; border-radius: 100%; border: 1px solid var(--gray200); background-color: #fff; background-repeat: no-repeat; background-size: cover; background-position: top center;}
.event-mission > li .info {width: calc(100% - 4.8rem - .8rem - 2rem - .8rem); display: flex; flex-flow: column; row-gap: .6rem;}
.event-mission > li .info > p {font-size: 1.6rem; font-weight: 600; color: var(--red800);}
.event-mission > li .info > h6 {display: flex; align-items: flex-end; column-gap: .4rem; font-size: 1.6rem; font-weight: 600;}
.event-mission > li .info > h6 > span {font-size: 1.2rem; font-weight: initial; color: var(--gray500); line-height: 1.2;}
.event-mission > li input[type="radio"]:checked + label {border-color: var(--red800); background-color: var(--white);}

.event-mission.bottom-fixed::before {height: 17.6rem;}

/* 랜더스톡 > 이벤트 > 쓱퀴즈 결과 */
.event-mission-result {display: flex; flex-flow: column; row-gap: 1.2rem;}
.event-mission-result > li {display: flex; align-items: center; column-gap: .8rem; position: relative; width: 100%; height: 7.2rem; padding: 0 1.6rem; background-color: var(--gray100); border: 1px solid var(--gray100); border-radius: .4rem; background-repeat: no-repeat; background-size: 2rem; background-position: right 1.6rem center;}
.event-mission-result > li .img {width: 4.8rem; height: 4.8rem; border-radius: 100%; border: 1px solid var(--gray200); background-color: #fff; background-repeat: no-repeat; background-size: cover; background-position: top center;}
.event-mission-result > li .info {width: calc(100% - 4.8rem - .8rem - 2rem - .8rem); display: flex; flex-flow: column; row-gap: .6rem;}
.event-mission-result > li .info > p {font-size: 1.6rem; font-weight: 600; color: var(--red800);}
.event-mission-result > li .info > h6 {display: flex; align-items: flex-end; column-gap: .4rem; font-size: 1.6rem; font-weight: 600;}
.event-mission-result > li .info > h6 > span {font-size: 1.2rem; font-weight: initial; color: var(--gray500); line-height: 1.2;}
.event-mission-result > li input[type="radio"]:checked + label {border-color: var(--red800); background-color: var(--white);}

.event-mission-result.success > li {background-image: url(/img/icon/ic-radio-20-c51b0a64c57a0b365e5f5ed5456998cd.svg);}
.event-mission-result.success > li.my {background-image: url(/img/icon/ic-radio-20-ov-237e18e4504275eae4f6a25ecf78c12c.svg); background-color: var(--white); border-color: var(--red800);}
.event-mission-result.failed > li.my {background-image: url(/img/icon/ic-failed-20-3f34deaa2b2c395028e81412c1584f7d.svg);}
.event-mission-result.failed > li.my * {color: var(--system-red)!important;}
.event-mission-result.failed > li.right {background-image: url(/img/icon/ic-right-20-b9e945d715fd69d966e9b1783d248678.svg); border-color: var(--system-blue);}
.event-mission-result.failed > li.right * {color: var(--system-blue)!important;}

/* 랜더스톡 > 직관랭킹 */
.my-rank-wrap {display: flex; flex-flow: column; row-gap: 1.2rem; margin-bottom: 3.2rem;}
.my-rank-wrap > div {display: flex; align-items: center; justify-content: space-between; height: 6rem; padding: 0 2rem; border-radius: .4rem; background-image: linear-gradient(270deg, #E72343 1%, #E93E55 100%); box-shadow: .4rem .4rem 1.2rem rgba(0, 0, 0, .04);}
.my-rank-wrap > div > h6 {font-size: 1.4rem; font-weight: 500; color: var(--red300);}
.my-rank-wrap > div > p {font-size: 1.8rem; font-weight: 600; color: #fff;}
.my-rank-wrap > ul {height: 6rem; display: grid; grid-template-columns: repeat(3, 1fr); align-items: center; border: 1px solid var(--gray100); border-radius: .4rem; box-shadow: .4rem .4rem 1.2rem rgba(0, 0, 0, .04);}
.my-rank-wrap > ul {height: 6rem; display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--gray100); border-radius: .4rem; box-shadow: .4rem .4rem 1.2rem rgba(0, 0, 0, .04);}
.my-rank-wrap > ul > li {padding: 0 1.6rem; display: flex; flex-flow: column; row-gap: .6rem; position: relative;}
.my-rank-wrap > ul > li + li::before {content: ''; width: 1px; height: 2rem; background-color: var(--gray200); display: block; 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%);}
.my-rank-wrap > ul > li > h6 {font-size: 1.2rem; font-weight: 500; color: var(--gray500);}
.my-rank-wrap > ul > li > p {font-size: 1.8rem; font-weight: 600; align-self: flex-end;}

.rank-table tr > td:nth-child(1) {font-weight: 700;}
.rank-table tr:nth-of-type(-n+3) > td:nth-child(1) {color: var(--red800);}

.rank.notification {height: calc(100vh - 4.4rem - 2rem - 13.2rem - 3.2rem - 3.4rem);}

/* 랜더스톡 > FAQ */
.faq-list > li {cursor: pointer;}
.faq-list > li + li {margin-top: 2rem; padding-top: 2rem; border-top: 1px solid var(--gray200);}
.faq-list > li .faq-title {display: flex; align-items: center; justify-content: space-between; column-gap: 1.6rem; margin-top: .4rem;}
.faq-list > li .faq-title h6 {font-size: 1.6rem; font-weight: 600; line-height: 1.4; width: calc(100% - 2.4rem - 1.6rem);}
.faq-list > li .faq-title::after {content: ''; width: 2.4rem; height: 2.4rem; background-image: url(/img/icon/ic-arrow-drop-24-5fed0122653c10d96c9ea91dcc7075cd.svg); background-repeat: no-repeat; background-size: contain; background-position: center;}
.faq-list > li .faq-answer {display: none; width: 100vw; margin: 0 -2rem -2rem; padding: 2rem; background-color: var(--gray100); margin-top: 2rem;}
.faq-list > li .faq-answer {font-size: 1.4rem !important; line-height: 1.6!important;}
.faq-list > li .faq-answer img {display: block; width: 100% !important; margin: 0;}
.faq-list > li .faq-answer * {font-size: 1.4rem !important; line-height: 1.6!important;}
.faq-list > li .faq-answer * + * {margin-top: 1.6rem;}
.faq-list > li.active .faq-title::after {background-image: url(/img/icon/ic-arrow-up-24-f71b49c4d4ca687748efff1c9c3048a8.svg);}
.faq-list > li.active .faq-answer {display: block; word-break: break-word;}
.faq-list > li.active + li {border-top: 0;}

.faq.notification {height: calc(100vh - 4.4rem - 6.8rem - 2rem - 3rem - 2.4rem - 3.4rem);}

@media (prefers-color-scheme: dark) {
    .faq-list > li .faq-title::after {background-image: url(/img/icon/ic-arrow-drop-24-wh-0cf4a12d769a8402f7214c0b1348b5b8.svg);}
    .faq-list > li.active .faq-title::after {background-image: url(/img/icon/ic-arrow-up-24-wh-bd2238e439c375cbadffd3706e0c100d.svg);}
}

/* 경기 ------------------------------ */
/* 경기 > 일정/결과 > list */
.push-guide {padding: 2rem 2rem 0; display: flex; column-gap: .6rem;}
.push-guide > p {flex: 1; font-size: 1.2rem; line-height: 1.6; color: var(--gray500); word-break: keep-all;}
.push-guide > i {margin-top: .3rem; width: 1.4rem; height: 1.4rem;}

.game-list-wrap > li {border: 1px solid var(--gray200); border-radius: .8rem; overflow: hidden;}
.game-list-wrap > li + li {margin-top: 1.6rem;}
.game-list-wrap > li .info {padding: 1.6rem 2rem 0; display: flex; align-items: center; justify-content: space-between;}
.game-list-wrap > li .info > ul {display: flex; align-items: center; column-gap: .4rem;}
.game-list-wrap > li .info > ul > li {font-size: 1.2rem; font-weight: 500;}
.game-list-wrap > li .button {display: flex; align-items: center;}
.game-list-wrap > li .button > button {width: 100%;}
.game-list-wrap > li .button > button:nth-child(1):nth-last-child(2), .game-list-wrap > li .button > button:nth-child(1):nth-last-child(2) ~ button {width: calc(100% / 2);}
.game-list-wrap > li .button > button.light-red:disabled > i {opacity: .5;}
.game-list-wrap > li button {border-radius: 0; height: 4.4rem; font-size: 1.4rem;}

.game-list-wrap > li .team-wrap {padding: 2rem; display: flex; align-items: center; justify-content: center;}
.game-list-wrap > li .team-wrap .team {display: flex; align-items: center; column-gap: .8rem; width: calc((100% - 9rem) / 2);}
.game-list-wrap > li .team-wrap .team > i {width: 3.6rem; height: 3.6rem;} 
.game-list-wrap > li .team-wrap .team > p {font-size: 1.6rem; font-weight: 500; display: flex; align-items: center; column-gap: .4rem;}

.game-list-wrap > li .team-wrap .team:nth-child(1) {justify-content: flex-end;}
.game-list-wrap > li .team-wrap .team > p::before,
.game-list-wrap > li .team-wrap .team > p::after {width: 1.6rem; height: 1.6rem; display: flex; align-items: center; justify-content: center; border-radius: .2rem; font-size: 1.1rem; font-weight: 700; color: var(--white);}
.game-list-wrap > li .team-wrap .team:nth-child(1).win > p::after {content: 'W'; background-color: var(--red800);}
.game-list-wrap > li .team-wrap .team:nth-child(1).loss > p::after {content: 'L'; background-color: var(--gray500);}
.game-list-wrap > li .team-wrap .team:nth-child(1).draw > p::after {content: 'D'; background-color: var(--brown);}
.game-list-wrap > li .team-wrap .team:nth-last-child(1).win > p::before {content: 'W'; background-color: var(--red800);}
.game-list-wrap > li .team-wrap .team:nth-last-child(1).loss > p::before {content: 'L'; background-color: var(--gray500);}
.game-list-wrap > li .team-wrap .team:nth-last-child(1).draw > p::before {content: 'D'; background-color: var(--brown);}

.game-list-wrap > li .team-wrap .score {width: 9rem; display: flex; align-items: center; justify-content: center; column-gap: 1.6rem;}
.game-list-wrap > li .team-wrap .score > li {width: 3.6rem; font-size: 2rem; font-weight: 700; display: flex; align-items: center; justify-content: flex-start; position: relative;}
.game-list-wrap > li .team-wrap .score > li:nth-child(1) {justify-content: flex-end;}
.game-list-wrap > li .team-wrap .score > li + li::before {content: ':'; width: 1.2rem; text-align: center; position: absolute; left: -1.4rem;}

.game-list-wrap > li.before .team-wrap .score::before {content: 'VS'; font-size: 1.8rem; font-weight: 700; color: var(--gray500);}
.game-list-wrap > li.before .team-wrap .score > li + li::before {content: none;}

.game.notification {height: calc(100vh - 6rem - 4.4rem - 6rem - 2rem - 3.4rem);}
.box .game.notification {height: fit-content; padding-top: 1.6rem;}
.box .game.notification > i {width: 6rem; height: 6rem;}

/* 경기 > 일정/결과 > calendar */
.calendar-wrap table td::before {position: absolute; top: .6rem; left: .8rem; font-size: 1rem; font-weight: 700; height: 1.6rem;}
.calendar-wrap table td.home::before {content: 'H'; color: var(--red800);}
.calendar-wrap table td.away::before {content: 'A'; color: var(--gray500);}
.calendar-wrap table td > span {display: block; width: 1.6rem; height: 1.6rem; border-radius: 100%; margin-left: auto; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; font-weight: 500;}
.calendar-wrap table td.today > span {background-color: var(--red800); color: #fff;}
.calendar-wrap table td.holiday > span, .calendar-wrap table td:last-child {color: var(--red800);}
.calendar-wrap table td.last > span, .calendar-wrap table td.next > span {color: var(--gray400);}
.calendar-wrap table td .game {margin-top: .2rem; display: flex; flex-flow: column; align-items: center; justify-content: center;}
.calendar-wrap table td .game > i {width: 2.8rem; height: 2.8rem;}
.calendar-wrap table td .game > p {font-size: 1rem; font-weight: 500; line-height: 1; color: var(--gray400);}
.calendar-wrap table td .game > p + p {margin-top: .4rem;}
.calendar-wrap table td .game > p.win {color: var(--red800);}
.calendar-wrap table td .game > p.loss  {color: var(--gray500);}
.calendar-wrap table td .game > p.draw  {color: var(--brown);}
.calendar-wrap table td .game > p.draw  {color: var(--brown);}

.calendar-wrap table td .double-header {position: absolute; top: 2.2rem; z-index: 10; background-color: var(--white); border: 1px solid var(--gray100); border-radius: .4rem; filter: drop-shadow(.2rem .2rem 1.2rem rgba(0, 0, 0, .04));}
.calendar-wrap table td:nth-child(1) .double-header,
.calendar-wrap table td:nth-child(2) .double-header,
.calendar-wrap table td:nth-child(3) .double-header,
.calendar-wrap table td:nth-child(4) .double-header {left: .8rem;}
.calendar-wrap table td:nth-child(5) .double-header,
.calendar-wrap table td:nth-child(6) .double-header,
.calendar-wrap table td:nth-child(7) .double-header {right: .8rem;}
.calendar-wrap table td .double-header > li {display: flex; align-items: center; column-gap: .4rem; padding: 1rem 1.6rem;}
.calendar-wrap table td .double-header > li + li {border-top: 1px solid var(--gray100);}
.calendar-wrap table td .double-header > li > i {width: 2.4rem; height: 2.4rem;}
.calendar-wrap table td .double-header > li > p {font-size: 1.2rem; font-weight: 500; color: var(--red800); white-space: nowrap;}
.calendar-wrap table td .double-header > li > p.win {color: var(--red800);}
.calendar-wrap table td .double-header > li > p.loss  {color: var(--gray500);}
.calendar-wrap table td .double-header > li > p.draw  {color: var(--brown);}

/* 경기 > 일정/결과 > 상세 */
.game-record-wrap {height: calc(100vh - 6rem - 3.4rem);}
.game-record-wrap > .game-record-info {height: calc(6rem + 6rem + 21rem); padding-top: calc(6rem + 6rem);}
.game-record-wrap > .game-record-cont {position: relative; z-index: 5; box-shadow: 0 -1.2rem 1.2rem rgba(0, 0, 0, .12);}
.game-record-wrap > .game-record-cont .tab-style01 {position: sticky; top: calc(6rem + 6rem); left: initial;}
.game-record-wrap > .game-record-cont .tab-style01 ~ .tab-cont-wrap {margin-top: 0; background-color: var(--white);}
.game-record-wrap > .game-record-cont .tab-style01 ~ .tab-cont-wrap .cont-box {padding-bottom: 3.4rem; min-height: calc(100vh - 6rem - 6rem - 4.4rem);}
.game-record-wrap > .game-record-cont .tab-style01 ~ .tab-cont-wrap:not(:only-child) .cont-box {padding-bottom: unset; min-height: unset;}

.game-record-summary {width: 100%; height: 21rem; background-image: url(/img/bg-game-record-6b63bddfbdac15a9aa19ae81a34c0f18.png); background-repeat: no-repeat; background-size: 100% auto; background-position: center top; position: fixed;}
.game-record-summary::before {content: ''; width: 100%; height: 13.2rem; background-color: rgba(200, 16, 46, .8); position: absolute; top: 0; left: 0%; z-index: 1;}.game-record-summary {width: 100%; height: 21rem; background-image: url(/img/bg-game-record-6b63bddfbdac15a9aa19ae81a34c0f18.png); background-repeat: no-repeat; background-size: 100% auto; background-position: center top; position: fixed;}
.game-record-summary > * {position: relative; z-index: 2;}
.game-record-summary .info {padding: 1.6rem 2rem;}
.game-record-summary .info > ul {display: flex; align-items: center; justify-content: center; column-gap: .4rem; margin-bottom: 1.6rem;}
.game-record-summary .info > ul > li {height: 2.4rem; font-size: 1.2rem; font-weight: 500; color: #fff; display: flex; align-items: center;}
.game-record-summary .info > ul > li.font-gray {color: var(--red300)!important;}
.game-record-summary .info .double-header {column-gap: .8rem;}
.game-record-summary .info .double-header > li {border: 1px solid var(--red400); color: var(--red400); padding: 0 .6rem; border-radius: .4rem; cursor: pointer;}
.game-record-summary .info .double-header > li.active {color: #fff; border-color: #fff;}
.game-record-summary .team-wrap {display: flex; align-items: center; justify-content: center;}
.game-record-summary .team-wrap .team {width: calc((100% - 10rem) / 2); display: flex; align-items: center; column-gap: 1rem;}
.game-record-summary .team-wrap .team .record {width: calc(100% - 1.2rem - 5.2rem); display: flex; flex-flow: column; row-gap: .8rem;}
.game-record-summary .team-wrap .team .record > p {font-size: 1.6rem; font-weight: 500; color: #fff;}
.game-record-summary .team-wrap .team .record > ul {display: flex; flex-flow: column; row-gap: .4rem;}
.game-record-summary .team-wrap .team .record > ul > li {display: flex; align-items: center; flex-wrap: wrap; column-gap: .2rem; row-gap: .2rem;}
.game-record-summary .team-wrap .team:nth-child(1)  .record > ul > li {justify-content: flex-end;}
.game-record-summary .team-wrap .team:nth-child(1)  .record > ul > li > h6 {text-align: right;}
.game-record-summary .team-wrap .team .record > ul > li > h6 {width: 100%; font-size: 1.1rem; font-weight: 500; color: var(--red300);}
.game-record-summary .team-wrap .team .record > ul > li > p {font-size: 1.1rem; color: #fff;}
.game-record-summary .team-wrap .team > i {width: 5.2rem; height: 5.2rem;}
.game-record-summary .team-wrap .team.win .record > ul > li > h6,
.game-record-summary .team-wrap .team.loss .record > ul > li > h6,
.game-record-summary .team-wrap .team.draw .record > ul > li > h6 {width: fit-content;}
.game-record-summary .team-wrap .team.loss .record > ul > li > h6 {color: var(--gray500);}
.game-record-summary .team-wrap .score {width: 10rem; margin-top: 1.2rem; display: flex; flex-flow: column; align-items: center; row-gap: .4rem;}
.game-record-summary .team-wrap .score.before::before {content: 'VS'; font-size: 2.4rem; font-weight: 700; color: #fff;}
.game-record-summary .team-wrap .score > ul {display: flex; align-items: center; justify-content: center; column-gap: 1.6rem; position: relative;}
.game-record-summary .team-wrap .score > ul > li {width: 4.4rem; font-size: 2.4rem; font-weight: 700; color: #fff; position: relative;}
.game-record-summary .team-wrap .score > ul > li:nth-child(1) {text-align: right;}
.game-record-summary .team-wrap .score > ul > li:nth-last-child(1) {text-align: left;}
.game-record-summary .team-wrap .score > ul > li + li::before {content: ':'; width: 1.2rem; position: absolute; left: -1.4rem; text-align: center; line-height: .9;}
.game-record-summary .team-wrap .score .label.red {background-color: var(--red900); color: var(--red300); border-color: var(--red900);}
 
.game-record-summary table {margin-top: -1px;}
.game-record-summary table::before {content: none;}
.game-record-summary table th {height: 2.6rem; padding: 0; font-size: 1.1rem; color: var(--red300); background-color: var(--red900); border-top-color: #8B001D; border-bottom-color: rgba(255,255,255,.12);}
.game-record-summary table th.text-left {padding: 0 1.2rem;}
.game-record-summary table th + * {border-left: none;}
.game-record-summary table td {height: 2.6rem; padding: 0; font-size: 1.1rem; font-weight: 500; color: #fff; background-color: var(--red800); border: none;}
.game-record-summary table td.text-left {padding: 0 1.2rem; color: var(--red300);}

.game-record-summary .team-wrap .team:nth-child(1) {justify-content: flex-end;}
.game-record-summary .team-wrap .team:nth-child(1) .record {align-items: flex-end;}

.game-record-table.table-scroll {margin: 0; padding: 0;}
.game-record-table01 th:nth-child(1) {width: auto; min-width: 5rem;}
.game-record-table01 th:not(:nth-child(1)) {width: 2.4rem;}

/* 경기 > 일정/결과 > 상세 > 주요기록 */
.game-record-title {display: flex; align-items: center; justify-content: center; column-gap: 11rem; margin-bottom: 1.6rem;}
.game-record-title > li {width: calc((100% - 11rem) / 2); position: relative; display: flex; flex-flow: column; align-items: center; row-gap: .8rem;}
.game-record-title > li + li::before {content: 'VS'; width: 11rem; text-align: center; font-size: 2rem; font-weight: 700; color: var(--gray400); position: absolute;left: -11rem; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%);}
.game-record-title > li > h4 {font-size: 1.6rem; font-weight: 600;}
.game-record-title > li > p {font-size: 1.1rem; font-weight: 500; color: var(--gray500);}
.game-record-title > li > ul {display: flex; align-items: center; justify-content: center;}
.game-record-title > li > ul > li {font-size: 1.1rem; font-weight: 500; color: var(--gray500);}
.game-record-title > li > ul > li + li::before {content: '‧'; margin: 0 .2rem;}
.game-record-title > li > ul > li.font-red {font-weight: 600;}
.game-record-graph-wrap .game-record-graph {display: flex; flex-flow: column; row-gap: 1.2rem;}
.game-record-graph-wrap .game-record-graph .graph {display: flex; align-items: center;}
.game-record-graph-wrap .game-record-graph .graph > li {width: calc((100% - 11rem) / 2); display: flex; align-items: center; column-gap: 1.6rem;}
.game-record-graph-wrap .game-record-graph .graph > li > div {width: 100%; height: .8rem; border-radius: .2rem; background-color: var(--gray100); display: flex; justify-content: flex-end;}
.game-record-graph-wrap .game-record-graph .graph > li > div > span {height: .8rem; border-radius: .2rem; background-image: linear-gradient(270deg, #980020 0%, #C8102E 100%);}
.game-record-graph-wrap .game-record-graph .graph > li:nth-last-child(1) > div {justify-content: flex-start;}
.game-record-graph-wrap .game-record-graph .graph > li:nth-last-child(1) > div > span {background-image: linear-gradient(270deg, #C8102E 0%, #980020 100%);}
.game-record-graph-wrap .game-record-graph .graph > li:nth-child(2) {width: 11rem;}
.game-record-graph-wrap .game-record-graph .graph > li > h6 {width: 2.2rem; text-align: center; font-size: 1.2rem;}
.game-record-graph-wrap .game-record-graph .graph > li > p {width: calc((100% - 2.2rem - 3.2rem) / 2); font-size: 1.2rem; font-weight: 500; color: var(--red800);}
.game-record-graph-wrap .game-record-graph .graph > li > p:nth-child(1) {text-align: right;}
.game-record-graph-wrap .game-record-graph .graph > li > p:nth-last-child(1) {text-align: left;}

/* 경기 > 일정/결과 > 상세 > 박스스코어 */
.ssg-landers-record-table01 {min-width: 82rem;}
.ssg-landers-record-table02 {min-width: 87rem;}

/* 경기 > 중계 */
.broadcast-wrap {height: calc(100vh - 6rem - 4.4rem);}
.broadcast-wrap .broadcast-info {height: 21rem;}
.broadcast-wrap .broadcast-cont {background-color: var(--white); padding-bottom: 3.4rem; position: relative; z-index: 5; box-shadow: 0 -1.2rem 1.2rem rgba(0, 0, 0, .12);}
.broadcast-wrap .broadcast-cont .tab-wrap {position: sticky; top: 4.4rem; z-index: 10; background-color: var(--white);}
.broadcast-wrap .broadcast-cont .tab-wrap ~ .tab-cont {min-height: calc(100vh - 4.4rem - 2rem - 4.4rem - .4rem - 3.4rem);}

/* 경기 > 중계 > 라이브톡 */
.livetalk-input {display: flex; align-items: center; column-gap: .8rem; background-color: var(--white); position: sticky; top: calc(4.4rem + 2rem + 4.4rem + 2rem); z-index: 10;}
.livetalk-input::before {content: ''; width: 100%; height: 2rem; background-color: var(--white); position: absolute; top: -2rem;}
.livetalk-input > input {width: calc(100% - 4.4rem - .8rem);}
.livetalk-input > button {width: 4.4rem; height: 4.4rem;}

.livetalk-list > button {width: 2.4rem; height: 2.4rem; margin-top: 2.4rem; margin-left: auto; border-color: var(--gray200); border-radius: 100%; background-color: transparent; position: sticky; top: calc(4.4rem + 2rem + 4.4rem + 2rem + 4.4rem + 2.4rem); z-index: 10;}
.livetalk-list > button > i {width: 2.2rem; height: 2.2rem;}
.livetalk-list > ul {margin-top: -2.4rem;}
.livetalk-list > ul > li {display: flex; flex-flow: column; row-gap: .8rem;}
.livetalk-list > ul > li + li {margin-top: 2.4rem;}
.livetalk-list > ul > li .profile {display: flex; align-items: center; column-gap: .4rem;}
.livetalk-list > ul > li .profile .img {width: 2.4rem; height: 2.4rem; border: 1px solid var(--gray200); border-radius: 100%; background-repeat: no-repeat; background-size: cover; background-position: top center;}
.livetalk-list > ul > li .profile > p {font-size: 1.2rem; font-weight: 500; color: var(--gray500);}
.livetalk-list > ul > li .comment {display: flex; align-items: flex-start; column-gap: 3rem;}
.livetalk-list > ul > li .comment > p {width: calc(100% - 3rem - 2rem); font-size: 1.4rem; line-height: 1.6; color: var(--gray700);}
.livetalk-list > ul > li .modify-wrap > textarea {height: 10rem;}
.livetalk-list > ul > li .modify-wrap > div {margin-top: .8rem; display: flex; column-gap: .8rem; align-items: center; justify-content: flex-end;}
.livetalk-list > ul > li .modify-wrap > div > button {height: 3.2rem; width: 6rem; border-color: var(--gray200); background-color: var(--white); color: var(--gray500); font-size: 1.2rem; font-weight: 500; border-radius: .2rem;}
.livetalk-list > ul > li .modify-wrap > div > button.modify {color: var(--black);}

@media (prefers-color-scheme: dark) {
    .livetalk-list > ul > li .profile .img {border-color: var(--gray400);}
    .livetalk-list > ul > li .comment > p {color: #fff;}
}

.more-wrap {position: relative; z-index: 5;}
.more-wrap .more-layer {position: absolute; top: 2rem; right: 0; display: flex; align-items: center; border: 1px solid var(--gray200); background-color: var(--white); border-radius: .4rem;}
.more-wrap .more-layer button {width: fit-content; height: 4.6rem; padding: 0 1.6rem; font-size: 1.4rem; font-weight: 500; color: var(--black); background-color: transparent; border-color: transparent; white-space: nowrap; position: relative;}
.more-wrap .more-layer button + button::before {content: ''; width: 1px; height: 1.2rem; display: block; background-color: var(--gray200); position: absolute; left: 0;}
.more-wrap .more-layer .delete {color: var(--gray500);}

.broadcast.notification {height: calc(100vh - 6rem - 4.4rem - 2rem - 3.4rem);}

/* 경기 > 중계 > 라이브톡 > 신고하기 */
.notify-list > li + li {margin-top: 1.6rem;}

/* 경기 > 중계 > 전력 */
.game-data-graph {display: flex; align-items: center; column-gap: .6rem;}
.game-data-graph > p {font-size: 1.2rem; width: 3.2rem;}
.game-data-graph > div {width: calc(100% - 4rem); height: .8rem; border-radius: .2rem; background-color: var(--gray100);}
.game-data-graph > div > span {display: block; height: .8rem; margin-left: auto; border-radius: .2rem; background-image: linear-gradient(270deg, #980020 0%, #C8102E 100%);}
.game-data-graph > p + div > span {margin-left: initial; background-image: linear-gradient(270deg, #C8102E 0%, #980020 100%);}

.pitch-graph-wrap > li + li {margin-top: 1.2rem;}
.pitch-graph-wrap > li > div {width: 100%; height: 2.4rem;}
.pitch-graph-wrap > li > div > span {display: flex; align-items: center; justify-content: center; margin-left: auto; height: 2.4rem; border-radius: .2rem; font-size: 1.1rem; font-weight: 500; color: #fff;}
.pitch-graph-wrap > li > ul {display: flex; align-items: center; justify-content: flex-end; column-gap: .4rem; margin-top: .4rem;}
.pitch-graph-wrap > li > ul > li {font-size: 1.2rem;}

.pitch-graph-wrap.left > li > div > span {margin-left: initial;}
.pitch-graph-wrap.left > li > ul {justify-content: flex-start;}

.pitch-graph-wrap > li:nth-child(1) > div > span {background-color: var(--red800);}
.pitch-graph-wrap > li:nth-child(2) > div > span {background-color: var(--gray500);}
.pitch-graph-wrap > li:nth-child(3) > div > span {background-color: var(--gray400);}
.pitch-graph-wrap > li:nth-child(4) > div > span {background-color: var(--gray200);}

/* 경기 > 중계 > 라인업 */
.ar {width: 5rem; height: 2.4rem; margin: 1.4rem 2rem -.8rem auto; font-size: 1.2rem; font-weight: 500;}

.lineup-tab {display: flex; column-gap: 1.7rem; align-items: center; justify-content: flex-end; margin-bottom: 1.6rem;}
.lineup-tab > li {position: relative; display: flex; align-items: center; font-size: 1.4rem; color: var(--gray500); cursor: pointer;}
.lineup-tab > li.active {font-weight: 600; color: var(--black);}
.lineup-tab > li + li::before {content: ''; width: 1px; height: 1.2rem; display: block; background-color: var(--gray200); position: absolute; left: -.9rem;}

.ground-wrap {width: 100%; height: 95vw; margin-bottom: 1.6rem; border-radius: .8rem; background-image: url(/img/bg-ground-map-e7f9e25225000ec47cf20abc55671371.png); background-repeat: no-repeat; background-size: cover; background-position: center; position: relative; overflow: hidden;}
.ground-wrap > div {position: absolute; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); margin-top: -1.6rem;}
.ground-wrap > div .img {width: 2.8rem; height: 2.8rem; margin: 0 auto -.4rem; background-color: var(--white); border-radius: 100%; background-repeat: no-repeat; background-size: cover; background-position: center bottom; position: relative; z-index: 9;}
.ground-wrap > div > p {width: fit-content; height: 2.8rem; padding: 0 .8rem; border-radius: .4rem; background-color: #fff; display: flex; column-gap: .4rem; align-items: center; justify-content: center; font-size: 1.2rem; font-weight: 500; color: var(--red500); position: relative; -webkit-transform: initial; -moz-transform: initial; -ms-transform: initial; -o-transform: initial; transform: initial;}
.ground-wrap > p {width: fit-content; height: 2.8rem; padding: 0 .8rem; border-radius: .4rem; background-color: #fff; display: flex; column-gap: .4rem; align-items: center; justify-content: center; font-size: 1.2rem; font-weight: 500; color: var(--red500); position: absolute; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); white-space: nowrap;}
.ground-wrap .designate {position: absolute; left: 2rem; bottom: 1rem; -webkit-transform: initial; -moz-transform: initial; -ms-transform: initial; -o-transform: initial; transform: initial;}
.ground-wrap .designate > h6 {font-size: 1.1rem; font-weight: 500; color: #fff; margin: .6rem auto; text-align: center;}
.ground-wrap .designate > div > p {width: fit-content; height: 2.8rem; padding: 0 .8rem; border-radius: .4rem; border: 1px solid var(--red800); background-color: var(--red500); display: flex; column-gap: .4rem; align-items: center; justify-content: center; font-size: 1.2rem; font-weight: 500; color: #fff;}
.ground-wrap .designate > div > p > span {font-weight: 600;}
.ground-wrap .img {width: 2.8rem; height: 2.8rem; position:absolute; border: 1px solid var(--gray100); border-radius: 100%; background-repeat: no-repeat; background-size: cover; background-position: top center;}

.ground-wrap .empty {width: 100%; height: 100%; margin: 0; display: flex; align-items: center; justify-content: center; position: relative; -webkit-transform: initial; -moz-transform: initial; -ms-transform: initial; -o-transform: initial; transform: initial;}
.ground-wrap .empty::before {content: ''; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.40); backdrop-filter: blur(3px); position: absolute; top: 0; left: 0;}
.ground-wrap .empty > p {width: fit-content; height: fit-content; background-color: transparent; text-align: center; font-size: 1.6rem; font-weight: 600; color: #ffffff;}

/* 경기 > 중계 > 중계 */
.ground-wrap .base {display: none; width: 1.2rem; height: 1.2rem; box-shadow: 1px 1px .4rem rgba(0, 0, 0, .2); background-color: var(--red500); position: absolute; -webkit-transform: translateX(-50%),  rotate(45deg); -moz-transform: translateX(-50%) rotate(45deg); -ms-transform: translateX(-50%) rotate(45deg); -o-transform: translateX(-50%) rotate(45deg); transform: translateX(-50%) rotate(45deg);}
.ground-wrap .base.on {display: block;}
.ground-wrap .base.first {top: 53%; left: 82%;}
.ground-wrap .base.second {top: 23%; left: 50%}
.ground-wrap .base.third {top: 53%; left: 18%;}

.ground-wrap .count {position: absolute; left: 4rem; bottom: 3.2rem; display: flex; flex-flow: column; row-gap: .8rem;}
.ground-wrap .count > ul {display: flex; column-gap: .2rem; align-items: center;}
.ground-wrap .count > ul::before {width: 1.2rem; font-size: 1.1rem; font-weight: 500; color: #fff;}
.ground-wrap .count > ul > li {width: 1rem; height: 1rem; border: 1px solid #fff; border-radius: 100%; background-color: #fff;}
.ground-wrap .count .ball::before {content: 'B';}
.ground-wrap .count .ball > li.active {background-color: #1DCC00;}
.ground-wrap .count .strike::before {content: 'S';}
.ground-wrap .count .strike > li.active {background-color: var(--yellow);}
.ground-wrap .count .out::before {content: 'O';}
.ground-wrap .count .out > li.active {background-color: var(--system-red);}

.ground-wrap .player {background-color: var(--brown); color: #fff;}

.broadcast-desc-wrap {display: flex; flex-flow: column; row-gap: 3.2rem;}
.broadcast-desc-wrap > div {display: flex; flex-flow: column; row-gap: 1.6rem;}
.broadcast-desc-wrap > div > h4 {font-size: 1.6rem; font-weight: 700;}
.broadcast-desc-wrap > div .broadcast-desc .player {display: flex; align-items: center; column-gap: 1.2rem;}
.broadcast-desc-wrap > div .broadcast-desc .player .img {width: 4.8rem; height: 4.8rem; border: 1px solid var(--gray100); border-radius: 100%; background-repeat: no-repeat; background-size: cover; background-position: top center;}
.broadcast-desc-wrap > div .broadcast-desc .player .info {display: flex; flex-flow: column; row-gap: .8rem;}
.broadcast-desc-wrap > div .broadcast-desc .player .info > h6 {font-size: 1.4rem; font-weight: 500;}
.broadcast-desc-wrap > div .broadcast-desc .player .info > ul {display: flex; align-items: center; column-gap: .9rem;}
.broadcast-desc-wrap > div .broadcast-desc .player .info > ul > li {font-size: 1.2rem; font-weight: 500; color: var(--gray500); display: flex; align-items: center; position: relative;}
.broadcast-desc-wrap > div .broadcast-desc .player .info > ul > li + li::before {content: ''; width: 1px; height: 1rem; background-color: var(--gray200); display: block; position: absolute; left: -.5rem;}
.broadcast-desc-wrap > div .broadcast-desc .desc {margin-top: .8rem; background-color: var(--gray100); border-radius: .4rem; padding: 1.2rem; display: flex; flex-flow: column; row-gap: .8rem;}
.broadcast-desc-wrap > div .broadcast-desc .desc > li {display: flex; align-items: center; column-gap: .4rem; font-size: 1.2rem;}
.broadcast-desc-wrap > div .broadcast-desc .desc > li > span {width: 1.4rem; height: 1.4rem; border-radius: 100%; display: flex; align-items: center; justify-content: center; font-size: 1rem; font-weight: 600; color: #fff;}
.broadcast-desc-wrap > div .broadcast-desc .desc > li.ball > span {background-color: #1DCC00;}
.broadcast-desc-wrap > div .broadcast-desc .desc > li.foul > span,
.broadcast-desc-wrap > div .broadcast-desc .desc > li.strike > span,
.broadcast-desc-wrap > div .broadcast-desc .desc > li.miss > span {background-color: var(--yellow);}
.broadcast-desc-wrap > div .broadcast-desc .desc > li.batting > span {background-color: var(--system-blue);}
.broadcast-desc-wrap > div .broadcast-desc .desc > li.out > span {background-color: var(--system-red);}
.broadcast-desc-wrap > div .broadcast-desc .desc > li.total {line-height: 1.6;}
.broadcast-desc-wrap > div .broadcast-desc .desc > li.total + li {border-top: 1px solid var(--gray200); padding-top: .8rem;}

.broadcast-sub.notification {height: calc(100vh - 6rem - 4.4rem - 2rem - 4.4rem - 3.4rem);}

/* 경기 > 팀순위 */
.team-rank-summary {display: flex; flex-flow: column; row-gap: .4rem; margin-bottom: 2.4rem; padding: .4rem 2rem 2rem; border-radius: .8rem; box-shadow: .4rem .4rem .8rem rgba(0, 0, 0, .12); background-image: url(/img/team-bg-db797b303d4bd01d173f807f0afcf5ea.svg), linear-gradient(180deg, #E72343 0%, #E93E55 100%); background-repeat: no-repeat; background-size: 17.5rem auto, 100%; background-position: right -1.2rem bottom, center;}
.team-rank-summary .team {display: flex; align-items: center; justify-content: center; column-gap: 1.6rem;}
.team-rank-summary .team > i {width: 8.8rem; height: 8.8rem;}
.team-rank-summary .team > i {width: 8.8rem; height: 8.8rem;}
.team-rank-summary .team .info {display: flex; flex-flow: column; row-gap: .6rem;}
.team-rank-summary .team .info > p {font-size: 2.4rem; font-weight: 700; color: #fff;}
.team-rank-summary .team .info > span {font-size: 1.1rem; font-weight: 500; color: #fff;}
.team-rank-summary table {table-layout: fixed;}
.team-rank-summary table::before {content: none;}
.team-rank-summary table thead th {height: 2.4rem; padding: 0; background-color: transparent; font-size: 1.1rem; color: var(--red200); border-top-color: rgba(255, 255, 255, .2); border-bottom-color: rgba(255, 255, 255, .2); border-left: 0; border-right: 0;}
.team-rank-summary table tbody td {height: 2.4rem; padding: 0; background-color: transparent; font-size: 1.1rem; font-weight: 500; color: #fff; border-bottom-color: rgba(255, 255, 255, .2); border-left: 0; border-right: 0;}

/* 경기 > 선수기록 */
.player-record-swiper.swiper {margin: -2.4rem -2rem 0; padding: 2.4rem 2rem;}
.player-record-swiper .swiper-slide {width: 13.6rem; height: 10rem; box-shadow: .4rem .4rem 1.2rem rgba(0, 0, 0, .04); border: 1px solid var(--gray100); border-radius: .4rem; overflow: hidden;}
.player-record-swiper .swiper-slide > h6 {height: 2.8rem; background-color: var(--red800); display: flex; column-gap: .2rem; align-items: center; justify-content: center; font-size: 1.2rem; color: #fff;}
.player-record-swiper .swiper-slide > h6 > span {font-weight: 600;}
.player-record-swiper .swiper-slide .info {padding: 1.2rem; display: flex; align-items: center; column-gap: 1.2rem;}
.player-record-swiper .swiper-slide .info .img {width: 4.8rem; height: 4.8rem; background-color: #fff; border-radius: 100%; border: 1px solid var(--gray200); background-repeat: no-repeat; background-size: cover; background-position: center top;}
.player-record-swiper .swiper-slide .info .cont {display: flex; flex-flow: column; row-gap: .6rem;}
.player-record-swiper .swiper-slide .info .cont > p {font-size: 1.1rem; font-weight: 500; color: var(--red800);}
.player-record-swiper .swiper-slide .info .cont > h6 {font-size: 1.4rem; font-weight: 600;}

/* 경기 > AR */
.ar-wrap {background-color: #121212; width: 100vw; height: 100vh; padding: 2rem; display: flex; column-gap: 1.6rem; align-items: center; overflow: hidden;}
.ar-wrap .player-info {height: 100%; display: flex; flex-flow: column; justify-content: center; row-gap: 2rem;}
.ar-wrap .player-info .profile {width: 26rem; height: 18rem; padding: 2rem 1.6rem; overflow: hidden; background-color: var(--red800); border-radius: .8rem; background-image: url(/img/bg-player-detail-f66db4537f9441140362c2d4e8c2977e.png); background-size: auto 80%; background-repeat: no-repeat; background-position: left 2rem center; position: relative;}
.ar-wrap .player-info .profile .img {width: 16.8rem; height: 100%; background-repeat: no-repeat; background-size: cover; background-position: center top; position: absolute; bottom: 0; right: 0;}
.ar-wrap .player-info .profile .info {height: 100%; display: flex; flex-flow: column; row-gap: .4rem; justify-content: flex-end;}
.ar-wrap .player-info .profile .info > p {font-size: 1.6rem; font-weight: 600; color: var(--red300);}
.ar-wrap .player-info .profile .info > h4 {font-size: 2.4rem; font-weight: 600; color: #fff;}
.ar-wrap .player-info > .info {display: flex; flex-flow: column; row-gap: 1.2rem; max-height: calc(100% - 18rem - 2rem); overflow-y: auto;}
.ar-wrap .player-info > .info > li {display: flex; align-items: flex-start; justify-content: space-between;}
.ar-wrap .player-info > .info > li > h6 {font-size: 1.2rem; color: #747479;}
.ar-wrap .player-info > .info > li > p {font-size: 1.2rem; font-weight: 500; color: #fff;}
.ar-wrap .player-info > .info > li > ul > li {font-size: 1.2rem; font-weight: 500; color: #fff; line-height: 1.6;}

.ar-wrap .sub-title > h4 {color: #fff;}

.ar-wrap table {width: 100%; table-layout: fixed;}
.ar-wrap table::before {background-color: #424243;}
.ar-wrap table th {height: 2.8rem; padding: 0; background-color: #1C1C1C; border-color: #2B2B2B; border-bottom-color: transparent;}
.ar-wrap table td {height: 3.2rem; padding: 0; background-color: transparent; border-color: #2B2B2B; color: #fff;}

/* 메뉴 ------------------------------ */
/* 전체 메뉴 */
.all-menu-wrap {background-color: var(--gray100); padding: 2rem; margin-bottom: -3.4rem; display: flex; flex-flow: column; row-gap: .8rem;}
.all-menu-wrap .menu-wrap {background-color: var(--white);}
.all-menu-wrap .menu-wrap .menu-tit {display: flex; align-items: center; column-gap: 1rem; padding: 2rem;}
.all-menu-wrap .menu-wrap .menu-tit > h4 {font-size: 1.6rem; font-weight: 600;}
.all-menu-wrap .menu-wrap .sub-menu {display: grid; border-top: 1px solid var(--gray200); padding: 2rem; grid-template-columns: repeat(2, 1fr); grid-gap: 2rem;}
.all-menu-wrap .menu-wrap .sub-menu > li {font-size: 1.4rem; font-weight: 500; cursor: pointer;}

@media (prefers-color-scheme: dark) {
    .all-menu-wrap .menu-wrap .menu-tit > i {filter: invert(1);}
}

/* 메뉴 > 구단소개 > 선수단 */
.players.tab-wrap {width: 100%; position: fixed; top: calc(4.4rem + 6.8rem); left: 0; padding: 2rem 2rem 0;}
.players.tab-wrap ~ .tab-cont {margin-top: 6.4rem;}

.player-summary {width: 100%; height: 21.6rem; padding: 2rem; display: flex; align-items: flex-end; background-color: var(--red800); background-image: url(/img/bg-player-detail-f66db4537f9441140362c2d4e8c2977e.png); background-size: auto 100%; background-repeat: no-repeat; background-position: left 2rem bottom; position: fixed; top: 0; left: 0;}
.player-summary .img {width: 22.6rem; height: 21.6rem; background-repeat: no-repeat; background-size: cover; background-position: center top; position: absolute; right: 0; bottom: 0;}
.player-summary .info {display: flex; flex-flow: column; row-gap: .4rem;}
.player-summary .info > p {font-size: 1.6rem; font-weight: 600; color: var(--red300);}
.player-summary .info > h4 {font-size: 2.4rem; font-weight: 600; color: #fff;}

.player-cont {min-height: calc(100vh - 3.4rem); margin-top: 21.6rem; position: relative; z-index: 10; background-color: var(--white);}
.player-cont.cheerleader {min-height: initial;}
.player-cont .player-info-list > li {display: flex; column-gap: 2rem; align-items: flex-start;}
.player-cont .player-info-list > li + li {margin-top: .8rem;}
.player-cont .player-info-list > li > h6 {width: 5.6rem; font-size: 1.4rem; color: var(--gray500); line-height: 1.6;}
.player-cont .player-info-list > li > *:not(h6) {width: calc(100% - 2rem - 5.6rem); font-size: 1.4rem; font-weight: 500; line-height: 1.6;}
.player-cont .player-info-list > li > ul > li {display: flex; align-items: flex-start; column-gap: .4rem; word-break: keep-all;}
.player-cont .player-info-list > li > ul > li::before {content: '-';}

/* 메뉴 > 구단소개 > 응원단 > 응원단 상세 */
.cheer-detail {width: 100%; height: 133vw; background-repeat: no-repeat; background-size: 100%; background-position: bottom center; border-radius: .8rem; overflow: hidden; position: relative;}
.cheer-detail > ul {display: flex; align-items: center; column-gap: .8rem; width: 100%; height: 6.8rem; background-color: rgba(0,0,0,.4); position: absolute; bottom: 0; padding: 0 2rem;}
.cheer-detail > ul > li {display: flex; align-items: center; column-gap: .8rem;}
.cheer-detail > ul > li + li::before {content: ''; width: 2px; height: 1rem; background-color: rgba(255,255,255,.3);}
.cheer-detail > ul > li > h2 {font-size: 2rem; font-weight: 600; color: #fff;}
.cheer-detail > ul > li > p {font-size: 1.6rem; font-weight: 600; color: var(--gray200);}

/* 메뉴 > 구단소개 > 응원가 */
.song-list > li {border-bottom: 1px solid var(--gray200);}
.song-list > li + li {padding-top: 1.6rem;}
.song-list > li .song-tit {padding-bottom: 1.6rem; display: flex; align-items: center; justify-content: space-between; padding-right: 3.2rem; background-image: url(/img/icon/ic-arrow-drop-20-68d29cf88149061dd6824bd89eeb5b1c.svg); background-repeat: no-repeat; background-size: 2rem; background-position: top right;}
.song-list > li .song-tit > h6 {font-size: 1.4rem; font-weight: 500;}
.song-list > li .song-tit > div {display: flex; align-items: center; column-gap: 1.2rem;}
.song-list > li .song-tit > div > button {width: 2rem; height: 2rem; background-color: transparent; border-radius: 100%; border: 0; background-image: url(/img/icon/ic-audio-play-20-8918318310483ac1a33b2c70d7f006f7.svg); background-repeat: no-repeat; background-size: contain; background-position: center;}
.song-list > li .song-cont {display: none; background-color: var(--gray100); padding: 2rem; font-size: 1.4rem; line-height: 1.6;}

.song-list > li.active .song-tit {background-image: url(/img/icon/ic-arrow-up-20-c07fc50e5779e3b374c8faa84bba3ac6.svg);}
.song-list > li.active .song-cont {display: block;}

@media (prefers-color-scheme: dark) {
    .song-list > li .song-tit {background-image: url(/img/icon/ic-arrow-drop-24-wh-0cf4a12d769a8402f7214c0b1348b5b8.svg);}
    .song-list > li .song-tit > div i {filter: invert(1);}
    .song-list > li .song-tit > div > button {background-image: url(/img/icon/ic-play-20-wh-0b5b3f6ba8f45e38d159eb3f89aa53c9.svg);}

    .song-list > li.active .song-tit {background-image: url(/img/icon/ic-arrow-up-24-wh-bd2238e439c375cbadffd3706e0c100d.svg);}
}

/* 메뉴 > 구단소개 > 디지털 역사관 > 연혁 */
.history.tab-wrap  {position: sticky; top: 4.4rem;}

.history-year {margin-top: -2rem; margin-bottom: 2rem; padding-top: .8rem; position: sticky; top: calc(4.4rem + 2rem + 4.4rem); background-color: var(--white); z-index: 10;}
.history-year > select {width: 100%;}

.history-wrap .history + .history {margin-top: 3.2rem;}
.history-wrap .history > h6 {font-size: 2rem; font-weight: 600; margin-bottom: 1.2rem;}
.history-wrap .history > div {display: flex; align-items: flex-start; column-gap: 1.2rem;}
.history-wrap .history > div .img {width: 10.4rem; height: 7rem; background-repeat: no-repeat; background-size: cover; background-position: center;}
.history-wrap .history > div > ul {width: calc(100% - 10.4rem - 1.2rem);}
.history-wrap .history > div > ul > li {display: flex; align-items: flex-start; column-gap: .8rem; position: relative;}
.history-wrap .history > div > ul > li:not(:last-child)::before {content: ''; width: 1px; height: calc(100% + 2.4rem); margin-top: .8rem; position: absolute; left: .2rem; background-color: var(--gray300);}
.history-wrap .history > div > ul > li + li {margin-top: 2.4rem;}
.history-wrap .history > div > ul > li > h6 {width: calc(.5rem + .8rem + 1.8rem); font-size: 1.4rem; font-weight: 600; line-height: 1.5; display: flex; align-items: center; column-gap: .8rem;}
.history-wrap .history > div > ul > li > h6::before {content: ''; width: .5rem; height: .5rem; border-radius: 100%; background-color: var(--gray300); margin-bottom: .2rem;}
.history-wrap .history > div > ul > li:first-child > h6::after {content: ''; width: .7rem; height: .7rem; border-radius: 100%; background-color: var(--white); border: .2rem solid var(--red800); position: absolute; position: absolute; left: -1px;}
.history-wrap .history > div > ul > li > p {width: calc(100% - .5rem - .8rem - 1.8rem - .8rem); font-size: 1.4rem; line-height: 1.5;}

/* 메뉴 > 구단소개 > 디지털 역사관 > 역대선수단 */
.history-players > li {display: flex; flex-flow: column; align-items: flex-start; row-gap: 1.2rem;}
.history-players > li + li {margin-top: 2rem; padding-top: 2rem; border-top: 1px solid var(--gray300);}
.history-players > li > p {font-size: 1.4rem; font-weight: 600; color: var(--red800);}
.history-players > li > h6 {display: flex; align-items: center; column-gap: .6rem; font-size: 1.6rem; font-weight: 600; margin-top: .6rem;}
.history-players > li > h6 > span {font-size: 1.2rem; color: var(--gray400);}
.history-players > li > ul > li {display: flex; align-items: flex-start; column-gap: .8rem; line-height: 1.5;}
.history-players > li > ul > li + li {margin-top: .2rem;}
.history-players > li > ul > li > h6 {width: 4.2rem; font-size: 1.2rem; color: var(--gray500);}
.history-players > li > ul > li > p {width: calc(100% - 4.2rem - .8rem); font-size: 1.2rem; font-weight: 500;}

.history-players-summary {display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 2.4rem 1.2rem;}
.history-players-summary > li {display: flex; flex-flow: column; align-items: flex-start; row-gap: 1.2rem;}
.history-players-summary > li .img {width: 100%; height: 43.2vw; border-radius: .4rem; background-repeat: no-repeat; background-size: cover; background-position: center top; border: 1px solid var(--gray200);}
.history-players-summary > li .info > p {font-size: 1.4rem; font-weight: 600; color: var(--red800);}
.history-players-summary > li .info > h6 {display: flex; align-items: center; column-gap: .6rem; font-size: 1.6rem; font-weight: 600; margin-top: .6rem;}
.history-players-summary > li .info > h6 > span {font-size: 1.2rem; color: var(--gray400);}

/* 메뉴 > 구단소개 > 디지털 역사관 > 역대상징 */
.symbol-img {height: 16rem; border: 1px solid var(--gray200); border-radius: .8rem; background-color: var(--white); background-repeat: no-repeat; background-size: 12rem; background-position: center;}
.mascot-img {height: 33.5rem; border: 1px solid var(--gray200); border-radius: .8rem; background-color: var(--white); background-repeat: no-repeat; background-size: 29.4rem; background-position: center;}

.uniform-wrap {display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 2.4rem 1.2rem;}
.uniform-wrap > li {display: flex; flex-flow: column; align-items: center; justify-content: center; row-gap: 1.2rem;}
.uniform-wrap > li .img {width: 100%; height: 38vw; background-repeat: no-repeat; background-size: cover; background-position: center; border-radius: .4rem;}
.uniform-wrap > li > p {font-size: 1.6rem; font-weight: 600;}

/* 메뉴 > 구단소개 > 디지털 락커룸 */
.locker.container {background-color: #121212; width: 100vw; height: 100vh; padding: 2rem 2rem 3.4rem; overflow: hidden; position: relative;}

.locker-wrap {height: 100%; display: flex; align-items: center; justify-content: center;}
.locker-wrap .locker-bg {width: 100%; max-height: 100%;}
.locker-wrap .locker-obj {position: absolute; padding: 2.4rem 2rem;}

.locker-wrap .info {display: flex; align-items: center; column-gap: .6rem; }
.locker-wrap .info > p {font-size: 3.2rem; font-weight: 600; color: #fff;}
.locker-wrap .info > h4 {font-size: 2rem; font-weight: 600; color: #fff;}

.locker-wrap .obj {position: absolute; background-repeat: no-repeat; background-size: contain; background-position: center;}
.locker-wrap .uniform {width: 52vw; height: 72vw; display: flex; flex-flow: column; row-gap: .4rem; padding-bottom: 8rem; align-items: center; justify-content: center; top: 25.8%; left: 32%; background-image: url(/img/locker/img-uniform-c28a76bf93e3c3b59e75e024c848f8c7.png);}
.locker-wrap .uniform > h4 {font-size: 1.4rem; font-weight: 600; color: var(--gray700);}
.locker-wrap .uniform > p {font-size: 4rem; font-weight: 600; color: var(--red800); text-shadow: -1px 0 var(--gray700), 0 1px var(--gray700), 1px 0 var(--gray700), 0 -1px var(--gray700);}

.locker-wrap .photo {width: 24vw; height: 24vw; top: 36%; left: 7%; background-image: url(/img/locker/img-photo-8b40ac6ea2d7306b721105e6cd6891ca.png);}
.locker-wrap .video {width: 26.5vw; height: 24vw; top: 11%; left: 64%; background-image: url(/img/locker/img-video-6bc723cc74292d93015e4a50680d68be.png);}
.locker-wrap .record {width: 24vw; height: 24vw; top: 75%; left: 54%; background-image: url(/img/locker/img-score-d2ebe8835f3d20f921f62eacf04002fa.png);}
.locker-wrap .cap {width: 34vw; height: 24vw; top: 60%; left: 18%; background-image: url(/img/locker/img-cap-4f6da7f20afdd60065e3e29ebc4c0037.png);}

/* 메뉴 > 구단소개 > 홈구장 안내 > 구장 안내 */
.stadium.tab-wrap  {position: sticky; top: 4.4rem;}

.stadium-wrap {position: relative; margin: 0 -2rem 2.4rem; width: 100vw; height: 104vw;}
.stadium-wrap .stadium-img {width: 100%; height: 100%; background-repeat: no-repeat; background-size: contain; background-position: center; position: relative; background-image: url(/img/stadium/stadium-img01-72fd7ce80d9d5f7d5a8d964944e138e3.png);}
.stadium-wrap.opacity .stadium-img::before {content: ''; width: 100%; height: 100%; display: block; background-color: rgba(255,255,255,.8); position: absolute; top: 0; left: 0;}

.stadium-wrap .stadium-floor-guide {position: absolute; left: 2rem; bottom: 0; z-index: 9; border-radius: .4rem; overflow: hidden; display: flex; flex-flow: column-reverse;}
.stadium-wrap .stadium-floor-guide > li {width: 3.2rem; height: 3.2rem; background-color: var(--white); border: 1px solid var(--gray200); border-top: 0; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; font-weight: 500; color: var(--gray500); cursor: pointer;}
.stadium-wrap .stadium-floor-guide > li:last-child {border-top: 1px solid var(--gray200); border-top-left-radius: .4rem; border-top-right-radius: .4rem;}
.stadium-wrap .stadium-floor-guide > li:first-child {border-bottom-left-radius: .4rem; border-bottom-right-radius: .4rem;}
.stadium-wrap .stadium-floor-guide > li.active {background-color: var(--red50); border-color: var(--red50); font-weight: 600; color: var(--red800);}
.stadium-wrap .stadium-floor-guide > li.active + li {border-bottom-color: var(--red50);}
.stadium-wrap .stadium-floor-guide > li.disabled {cursor: default; color: var(--gray300);}

.stadium-wrap .stadium-floor {width: 100%; height: 100%;}
.stadium-wrap .stadium-floor > div {position: absolute; z-index: 11; display: flex; flex-flow: column; align-items: center; justify-content: center; row-gap: .4rem;  -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}
.stadium-wrap .stadium-floor > div > p {opacity: 0; height: 2.8rem; padding: 0 .8rem; background-color: var(--white); border-radius: .4rem; box-shadow: 0 0 .4rem rgba(0, 0, 0, .12); display: flex; align-items: center; justify-content: center; font-size: 1.1rem; font-weight: 600; white-space: nowrap;}
.stadium-wrap .stadium-floor > div.active > p {opacity: 1;}

@media (prefers-color-scheme: dark) {
    .stadium-wrap .stadium-img {background-image: url(/img/stadium/stadium-img01-dark-1e5ba54481b7c034a0acbb609f436bd1.png);}
    .stadium-wrap.opacity .stadium-img::before {background-color: var(--white); opacity: .7;}
    .stadium-wrap .stadium-floor-guide > li.active {background-color: var(--gray200); border-color: var(--gray200); color: var(--red500);}
    .stadium-wrap .stadium-floor-guide > li.active + li {border-bottom-color: var(--gray200);}
}

.stadium-color {display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 1.6rem;}
.stadium-color > li {display: flex; align-items: center; column-gap: .8rem;}
.stadium-color > li > span {width: 1.2rem; height: 1.2rem;}
.stadium-color > li > p {font-size: 1.2rem; font-weight: 500;}

.stadium-position {position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1;}
.stadium-position img {position: absolute; top: 0; left: 0; width: 100%; display: none;}
.stadium-position img.active {display: block;}

/* .stadium-link {height: calc(100vh - 4.4rem - 6.4rem - 2rem - 108vw - 3.2rem - 3.4rem); overflow-y: auto;} */
.stadium-link > li {font-size: 1.4rem; font-weight: 600; cursor: pointer;}
.stadium-link > li + li {margin-top: 1.6rem; border-top: 1px solid var(--gray200); padding-top: 1.6rem;}

/* 메뉴 > 구단소개 > 홈구장 안내 > 매점 */
.route-wrap {display: flex; flex-flow: column; row-gap: .8rem;}

.seat-list {display: flex; flex-flow: column; row-gap: 1.6rem;}
.seat-list > li {display: flex; flex-flow: column; row-gap: 1.2rem;}
.seat-list > li + li {border-top: 1px solid var(--gray200); padding-top: 1.6rem;}
.seat-list > li > div {display: flex; align-items: center; column-gap: .8rem;}
.seat-list > li > div > span {width: 1.2rem; height: 1.2rem;}
.seat-list > li > div > h2 {font-size: 1.2rem; font-weight: 500;}
.seat-list > li > ul {display: flex; flex-wrap: wrap; grid-gap: .8rem;}
.seat-list > li > ul > li {height: 3.2rem; display: flex; align-items: center; justify-content: center; padding: 0 1rem; font-size: 1.2rem; font-weight: 500; cursor: pointer; border: 1px solid var(--gray200); border-radius: .2rem;}

.route-way {display: flex; flex-flow: column; row-gap: 1.6rem; padding: 0 2rem 2rem; max-height: 70vh; overflow-y: auto;}
.route-way > li {display: flex; align-items: center; column-gap: .6rem;}
.route-way > li + li {border-top: 1px solid var(--gray200); padding-top: 1.6rem;}
.route-way > li > p {font-size: 1.4rem; font-weight: 500; word-break: keep-all; line-height: 1.6; flex: 1;}

/* 메뉴 > 구단소개 > 홈구장 안내 > 화장실 */
.stadium-wrap .stadium-svg {width: 100%; height: 100%;}
.stadium-guide {display: flex; flex-flow: column; row-gap: 1rem; align-items: center;}
.stadium-guide > p {text-align: center; font-size: 1.4rem; font-weight: 500; line-height: 1.4; word-break: keep-all;}
.stadium-guide > p > span {font-weight: 600;}
.stadium-guide > p .zone_01 {color: #07487A;}
.stadium-guide > p .zone_02 {color: #DB1134;}
.stadium-guide > p .zone_03 {color: #B83694;}
.stadium-guide > p .zone_04 {color: #FAB827;}
.stadium-guide > p .zone_05 {color: #573E97;}
.stadium-guide > p .zone_06 {color: #0075AF;}
.stadium-guide > p .zone_07 {color: #96D5D4;}
.stadium-guide > p .zone_08 {color: #009D9A;}
.stadium-guide > p .zone_09 {color: #82BB40;}
.stadium-guide > p .zone_10 {color: #00A574;}
.stadium-guide > p .zone_11 {color: #006037;}
.stadium-guide > p .zone_12 {color: #E0CF70;}
.stadium-guide > p .zone_13 {color: #E72474;}
.stadium-guide > p .zone_14 {color: #E72474;}
.stadium-guide > p .zone_15 {color: #623210;}
.stadium-guide > p .zone_16 {color: #623210;}
.stadium-guide > p .zone_17 {color: #99491F;}
.stadium-guide > p .zone_18 {color: #C2996E;}
.stadium-guide > p .zone_19 {color: #17B3E8;}
.stadium-guide > p .zone_20 {color: #FF653B;}
.stadium-guide > p .zone_21 {color: #F875AD;}
.stadium-guide > p .zone_22 {color: #00829D;}
.stadium-guide > p .zone_23 {color: #00829D;}
.stadium-guide > p .zone_24 {color: #E58220;}

/* 메뉴 > 구단소개 > 홈구장 안내 > 오시는 길 */
.map-wrap {width: 100%; height: 54vw; border-radius: .8rem; background-repeat: no-repeat; background-size: cover; background-position: center;}

.directions > li {font-size: 1.4rem; line-height: 1.8; display: flex; align-items: flex-start; column-gap: .6rem;}
.directions > li::before {content: '-'; font-size: 1.4rem; line-height: 1.8;}

.parking {margin-bottom: 1.2rem;}
.parking > li {display: flex; align-items: center; column-gap: 1rem;}
.parking > li + li {margin-top: 1.2rem;}
.parking > li > h6 {font-size: 1.4rem; color: var(--gray500); width: 6rem;}
.parking > li > p {font-size: 1.4rem; font-weight: 500; width: calc(100% - 7rem);}

/* 메뉴 > 미디어 > 영상/사진 > 랜더스 스토리 */
.media-cont .search-wrap {top: 0;}
.media-cont .search-wrap + .cont-box {margin-top: 6.8rem;}

.tab-style01 ~ .media-cont {margin-top: calc(4.4rem + 6.8rem);}
.tab-style01 ~ .media-cont .search-wrap {top: 4.4rem;}

.story-list > li {display: flex; align-items: center; column-gap: 1.4rem; cursor: pointer;}
.story-list > li + li {margin-top: 1.2rem; padding-top: 1.2rem; border-top: 1px solid var(--gray200);}
.story-list > li .info {width: calc(100% - 1.4rem - 13.2rem);}
.story-list > li .info > h6 {font-size: 1.4rem; 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;}
.story-list > li .info > ul {display: flex; align-items: center; column-gap: .9rem; margin-top: 1.2rem;}
.story-list > li .info > ul > li {font-size: 1.2rem; color: var(--gray500); position: relative; display: flex; align-items: center;}
.story-list > li .info > ul > li + li::before {content: ''; width: 1px; height: 1rem; display: block; background-color: var(--gray300); position: absolute; left: -.5rem;}
.story-list > li .img {width: 13.2rem; height: 7.4rem; border-radius: .4rem; background-repeat: no-repeat; background-size: cover; background-position: center; position: relative; display: flex; align-items: center; justify-content: center;}
.story-list > li .img::before {content: ''; width: 100%; height: 100%; background-color: rgba(0, 0, 0, .12); position: absolute; top: 0; left: 0; border-radius: .4rem; z-index: 1;}
.story-list > li .img > i {z-index: 2;}

/* 메뉴 > 미디어 > 영상/사진 > 랜더스 포토 */
.date-filter {width: 100vw; margin: 0 -2rem 2.4rem; padding: 0 2rem; overflow-x: auto; display: flex; column-gap: .8rem;}
.date-filter > li {width: fit-content; height: 3rem; padding: 0 1.2rem; display: flex; align-items: center; justify-content: center; border: 1px solid var(--gray200); border-radius: 2rem; font-size: 1.4rem; color: var(--gray500); font-weight: 500;}
.date-filter > li.active {background-color: var(--red800); color: #fff; border-color: var(--red800);}

.photo-list > li + li {margin-top: 1.6rem;}
.photo-list > li .img {width: 100%; height: 50vw; border-radius: .8rem; background-repeat: no-repeat; background-size: cover; background-position: center; position: relative;}
.photo-list > li .img::before {content: ''; width: 100%; height: 100%; background-color: rgba(0, 0, 0, .12); position: absolute; top: 0; left: 0; border-radius: .4rem; z-index: 1;}
.photo-list > li .info {margin-top: 1.2rem;}
.photo-list > li .info > h6 {font-size: 1.6rem; font-weight: 600; line-height: 1.4;}
.photo-list > li .info > ul {display: flex; align-items: center; column-gap: .9rem; margin-top: 1.2rem;}
.photo-list > li .info > ul > li {font-size: 1.2rem; color: var(--gray500); position: relative; display: flex; align-items: center;}
.photo-list > li .info > ul > li + li::before {content: ''; width: 1px; height: 1rem; display: block; background-color: var(--gray300); position: absolute; left: -.5rem;}

/* 메뉴 > 미디어 > SNS */
.sns-list > li {border: 1px solid var(--gray200); border-radius: .4rem; padding: .8rem 1.2rem; display: flex; align-items: center; justify-content: space-between; cursor: pointer;}
.sns-list > li + li {margin-top: .8rem;}
.sns-list > li > div {display: flex; align-items: center; column-gap: .6rem;}
.sns-list > li > div > i {width: 3.2rem; height: 3.2rem;}
.sns-list > li > div > p {font-size: 1.4rem; font-weight: 600;}
.sns-list > li > p {font-size: 1.4rem; padding-right: 1.4rem; background-image: url(/img/icon/ic-arrow-right-16-627d2ae29cf5eaa1d00cda62e4bd15c7.svg); background-repeat: no-repeat; background-size: 1.4rem; background-position: center right;}

/* 에러 처리 */
.error-wrap {width: 100%; height: 100vh; padding: 2rem; display: flex; flex-flow: column; align-items: center; justify-content: center; row-gap: 3.2rem; background-color: var(--white);}
.error-wrap > h4 {font-size: 2rem; font-weight: 700;}
.error-wrap > p {text-align: center; font-size: 1.4rem; line-height: 1.4; margin-top: -2rem;}

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

/* 시스템 점검 안내 */
.system-check-wrap {width: 100%; height: 100vh; padding: 2rem 2rem 11.4rem; display: flex; flex-flow: column; align-items: center; justify-content: center; row-gap: 3.2rem; position: relative;}
.system-check-wrap > i {width: 10rem; height: 10rem;}
.system-check-wrap > h4 {font-size: 2rem; font-weight: 700;}
.system-check-wrap > h4 + p {margin-top: -2rem; font-size: 1.4rem; line-height: 1.4; text-align: center;}
.system-check-wrap > ul {width: 100%; padding: 2rem; display: flex; flex-flow: column; row-gap: 2rem; background-color: var(--gray100);}
.system-check-wrap > ul > li {display: flex; flex-flow: column; row-gap: 1.2rem; font-size: 1.4rem;}
.system-check-wrap > ul > li > h6 {font-size: 1.4rem; font-weight: 600;}
.system-check-wrap > span {font-size: 1.2rem; color: var(--gray500); line-height: 1.6; text-align: center; position: absolute; bottom: 5.4rem;}

/* 티켓 > 티켓예매 */
.reserve-list {display: flex; flex-flow: column; row-gap: 1.6rem;}
.reserve-list > li {border: 1px solid var(--gray200); border-radius: .8rem; padding: 2rem; overflow: hidden;}
.reserve-list > li .date {display: flex; align-items: center; column-gap: .6rem; font-size: 1.2rem; font-weight: 500; margin-bottom: 2rem;}
.reserve-list > li .date > span {color: var(--gray500);}
.reserve-list > li .versus {display: flex; align-items: center; justify-content: center; column-gap: 3.2rem;}
.reserve-list > li .versus > li {display: flex; align-items: center; column-gap: .8rem; font-size: 1.8rem; font-weight: 700; color: var(--gray500); text-align: center;}
.reserve-list > li .versus > li:nth-child(1) {justify-content: flex-end;}
.reserve-list > li .versus > li:nth-child(2) {width: 2.6rem;}
.reserve-list > li .versus > li:not(:nth-child(2)) {width: calc((100% - 2.6rem - 6.4rem) / 2);}
.reserve-list > li .versus > li > i {width: 3.6rem; height: 3.6rem;}
.reserve-list > li .versus > li > h2 {font-size: 1.6rem; font-weight: 500; color: var(--black);}
.reserve-list > li > button {margin: 2rem -2rem -2rem; width: calc(100% + 4rem); border-radius: 0; height: 4.4rem; font-size: 1.4rem;}
.reserve-list > li > button:disabled {color: var(--gray500); background-color: var(--gray200)!important; border-color: var(--gray200)!important;}

/* 티켓 > 요금안내 */
.ticket-info {margin-bottom: -3.4rem;}
.ticket-info img {width: 100%;}

/* 티켓 > 시즌티켓 */
.season-ticket {width: 100%; height: calc(100dvh - 3.4rem - 2rem); display: flex; flex-flow: column; row-gap: 2rem; align-items: center; justify-content: center;}
.season-ticket .img {width: 15rem; height: 15rem; background-color: var(--gray100); background-repeat: no-repeat; background-size: contain; background-position: center;}
.season-ticket .info {width: 100%; display: flex; flex-flow: column; align-items: center; row-gap: 3.2rem;}
.season-ticket .info > p {font-size: 2rem; font-weight: 700; text-align: center;}
.season-ticket .info > ul {background-color: var(--gray100); padding: 2rem; display: flex; flex-flow: column; row-gap: .6rem; width: 100%;}
.season-ticket .info > ul > li {display: flex; align-items: center; justify-content: space-between;}
.season-ticket .info > ul > li > p {font-size: 1.4rem; color: var(--gray500);}
.season-ticket .info > ul > li > span {font-size: 1.4rem; font-weight: 500;}

.season-ticket-wrap {width: calc(100vw - 3.2rem); height: calc(100dvh - 3.4rem - 2rem); display: flex; flex-flow: column; align-items: center; justify-content: center; position: relative;}
.season-ticket-swiper.swiper .swiper-pagination {top: initial; left: initial; right: initial; bottom: 0;}
.season-ticket-swiper.swiper .swiper-pagination .swiper-pagination-bullet {width: .6rem; height: .6rem; opacity: 1; background-color: var(--gray200); margin: 0 .4rem;}
.season-ticket-swiper.swiper .swiper-pagination .swiper-pagination-bullet-active {background-color: var(--red800);}

.season-ticket-swiper.swiper {width: 100%; padding-bottom: 2.2rem;}
.season-ticket-swiper.swiper .swiper-wrapper {height: fit-content;}
.season-ticket-swiper.swiper .swiper-slide {height: fit-content; display: flex; flex-flow: column; row-gap: 2rem; align-items: center; justify-content: center;}
.season-ticket-swiper.swiper .swiper-slide .img {width: 15rem; height: 15rem; background-color: var(--gray100); background-repeat: no-repeat; background-size: contain; background-position: center;}
.season-ticket-swiper.swiper .swiper-slide .info {width: 100%; display: flex; flex-flow: column; align-items: center; row-gap: 3.2rem;}
.season-ticket-swiper.swiper .swiper-slide .info > p {font-size: 2rem; font-weight: 700; text-align: center;}
.season-ticket-swiper.swiper .swiper-slide .info > ul {background-color: var(--gray100); padding: 2rem; display: flex; flex-flow: column; row-gap: .6rem; width: 100%;}
.season-ticket-swiper.swiper .swiper-slide .info > ul > li {display: flex; align-items: center; justify-content: space-between;}
.season-ticket-swiper.swiper .swiper-slide .info > ul > li > p {font-size: 1.4rem; color: var(--gray500);}
.season-ticket-swiper.swiper .swiper-slide .info > ul > li > span {font-size: 1.4rem; font-weight: 500;}

/* AR 포토앨범 */
.album-list {display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: .2rem; width: 100vw; margin: 0 -2rem;}
.album-list > li {height: 50vw; background-image: url(/img/icon/ic-lock-32-e818b46833b61dec11d7aead0fbd547c.svg); background-color: var(--gray100); background-repeat: no-repeat; background-size: 4rem; background-position: center; position: relative; overflow: hidden;}
.album-list > li.more::before {content: ''; width: 2.4rem; height: 2.4rem; background-image: url(/img/icon/ic-photo-more-4d88da8777bf43f6d1fc3467b14dac88.svg); border-radius: 100%; position: absolute; top: 1.2rem; right: 1.2rem; z-index: 2;}
.album-list > li > .img {width: 100%; height: 100%; background-repeat: no-repeat; background-size: cover; background-position: center; position: absolute; top: 0; left: 0;}
.album-list > li .player {width: 100%; height: 100%; position: absolute; bottom: 0; left: 0; z-index: 2; padding: 1.2rem; display: flex; align-items: flex-end; background-image: linear-gradient(180deg, rgba(200, 16, 46, 0) 68.01%, #C8102E 95.97%);}
.album-list > li .player .logo {width: 4rem; height: 2rem; background-image: url(/img/album/img-ar-catchphrase-9bb1729256de7a3c23b9c5bc9b303ee7.png); background-size: contain; background-position: center; background-repeat: no-repeat; position: absolute; top: 1.2rem; left: 1.2rem;}
.album-list > li .player .img {width: 8rem; height: 10.4rem; position: absolute; bottom: -1px; right: 0; background-repeat: no-repeat; background-size: contain; background-position: center;}
.album-list > li .player .info {display: flex; flex-flow: column; row-gap: .4rem;}
.album-list > li .player .info > p {font-size: 1.2rem; font-weight: 600; color: #fff;}
.album-list > li .player .info > h6 {font-size: 1.6rem; font-weight: 600; color: #fff;}

.album-swiper-wrap {height: calc(100vh - 2rem - 3.4rem); display: flex; align-items: center; justify-content: center;}
.album-swiper.swiper {margin: -2rem -2rem -2.2rem; padding: 2rem;}
.album-swiper.swiper .swiper-slide {box-shadow: .4rem .4rem 1.2rem rgba(0, 0, 0, .08);}
.album-swiper.swiper .swiper-slide .photo {width: 100%; height: 90vw; position: relative;}
.album-swiper.swiper .swiper-slide .photo > .img {width: 100%; height: 100%; background-repeat: no-repeat; background-size: cover; background-position: center; position: absolute; top: 0; left: 0;}
.album-swiper.swiper .swiper-slide .photo .player {width: 100%; height: 100%; position: absolute; bottom: 0; left: 0; z-index: 2; padding: 2rem; display: flex; align-items: flex-end; background-image: linear-gradient(180deg, rgba(200, 16, 46, 0) 68.01%, #C8102E 95.97%);}
.album-swiper.swiper .swiper-slide .photo .player .logo {width: 8rem; height: 4rem; background-image: url(/img/album/img-ar-catchphrase-9bb1729256de7a3c23b9c5bc9b303ee7.png); background-size: contain; background-position: center; background-repeat: no-repeat; position: absolute; top: 2rem; left: 2rem;}
.album-swiper.swiper .swiper-slide .photo .player .img {width: 14.4rem; height: 18.5rem; position: absolute; bottom: -1px; right: 0; background-repeat: no-repeat; background-size: contain; background-position: center;}
.album-swiper.swiper .swiper-slide .photo .player .info {display: flex; flex-flow: column; row-gap: .6rem;}
.album-swiper.swiper .swiper-slide .photo .player .info > p {font-size: 1.6rem; font-weight: 600; color: #fff;}
.album-swiper.swiper .swiper-slide .photo .player .info > h6 {font-size: 2.4rem; font-weight: 600; color: #fff;}
.album-swiper.swiper .swiper-slide .desc {border: 1px solid var(--gray200); padding: 2.4rem 2rem 3.2rem; display: flex; flex-flow: column; align-items: center; row-gap: 2rem; background-image: url(/img/album/bg-catchphrase-cd20e8c70276b1ff9df54d51726fb1ec.png); background-size: 20rem 7.2rem; background-position: right bottom; background-repeat: no-repeat;}
.album-swiper.swiper .swiper-slide .desc > p {display: flex; align-items: center; column-gap: .2rem; font-size: 1.2rem; font-weight: 500;}
.album-swiper.swiper .swiper-slide .desc > p > span {color: var(--gray500);}
.album-swiper.swiper .swiper-slide .desc .team-wrap {width: 100%; display: flex; align-items: center; justify-content: center; column-gap: 9rem; position: relative;}
.album-swiper.swiper .swiper-slide .desc .team-wrap > li {display: flex; align-items: center; column-gap: .4rem; width: calc((100% - 9rem) / 2);}
.album-swiper.swiper .swiper-slide .desc .team-wrap > li > i {width: 5.2rem; height: 5.2rem;} 
.album-swiper.swiper .swiper-slide .desc .team-wrap > li > p {font-size: 1.6rem; font-weight: 500; width: calc(100% - 5.2rem - .4rem);}
.album-swiper.swiper .swiper-slide .desc .team-wrap > li:nth-child(1) > p {text-align: right;}
.album-swiper.swiper .swiper-slide .desc .team-wrap::before {content: 'VS'; width: 2.4rem; font-size: 1.8rem; font-weight: 700; color: var(--gray500); text-align: center; position: absolute; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%);}
.album-swiper.swiper .swiper-slide .desc .team-wrap .score {width: 7rem; margin-top: 1.2rem; display: flex; flex-flow: column; row-gap: .4rem; align-items: center; justify-content: center;}
.album-swiper.swiper .swiper-slide .desc .team-wrap .score.before::before {content: 'VS'; font-size: 1.8rem; font-weight: 700; color: #fff;}
.album-swiper.swiper .swiper-slide .desc .team-wrap .score > ul {display: flex; align-items: center; justify-content: center; column-gap: 1.6rem;}
.album-swiper.swiper .swiper-slide .desc .team-wrap .score > ul > li {width: 3.6rem; font-size: 1.8rem; font-weight: 700; color: #fff; display: flex; align-items: center; justify-content: flex-start; position: relative;}
.album-swiper.swiper .swiper-slide .desc .team-wrap .score > ul > li:nth-child(1) {justify-content: flex-end;}
.album-swiper.swiper .swiper-slide .desc .team-wrap .score > ul > li + li::before {content: ':'; width: 1.2rem; text-align: center; position: absolute; left: -1.4rem;}
.album-swiper.swiper .swiper-slide .desc .team-wrap .score .label.red {background-color: var(--red900); border-color: var(--red900); color: var(--red400);}
.album-swiper.swiper .swiper-slide .desc .team-wrap .score .label.gray {background-color: #747479!important; border-color: #747479!important; color: #fff;}

.album-swiper.swiper .swiper-pagination {bottom: 0; top: initial;}
.album-swiper.swiper .swiper-pagination .swiper-pagination-bullet {width: .6rem; height: .6rem; opacity: 1; background-color: var(--gray200); margin: 0 .4rem;}
.album-swiper.swiper .swiper-pagination .swiper-pagination-bullet-active {background-color: var(--red800);}

/* shop */
.shop-link {display: flex; flex-flow: column; row-gap: 3.2rem;}
.shop-link > p {font-size: 1.4rem; line-height: 1.4;}
.shop-link > ul {display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 1.2rem;}
.shop-link > ul > li {height: 18.2rem; background-color: var(--white); border: 1px solid var(--gray200); border-radius: .4rem; display: flex; align-items: center; justify-content: center; flex-flow: column; row-gap: 2.4rem;}
.shop-link > ul > li:nth-child(n+3) {height: 14rem; row-gap: 1.2rem;}
.shop-link > ul > li .img {width: 10rem; height: 6.4rem; background-repeat: no-repeat; background-size: contain; background-position: center;}
.shop-link > ul > li .img.dark {display: none;}
.shop-link > ul > li > h6 {text-align: center; font-size: 1.4rem; font-weight: 600; line-height: 1.4;}
@media (prefers-color-scheme: dark) {
    .shop-link > ul > li .img.light {display: none;}
    .shop-link > ul > li .img.dark {display: block;}
}

/* 스마트오더 */
.app-icon {width: 4.8rem; height: 4.8rem; background-image: url(/img/logo/app-icon-4ae1ad5988b75338192471c67378e965.svg); background-repeat: no-repeat; background-size: contain; background-position: center;}
.order-notice {display: none; column-gap: 1.2rem; position: fixed; bottom: 4.6rem; width: calc(100% - 4rem); background-color: var(--gray500); border-radius: 1.2rem; padding: 2.4rem; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%);}
.order-notice.active {display: flex;}
.order-notice > div:not(.app-icon) {width: calc(100% - 4.8rem - 1.2rem); display: flex; flex-flow: column; row-gap: 1rem;}
.order-notice > div:not(.app-icon) > h6 {font-size: 1.4rem; font-weight: 600; color: #fff;}
.order-notice > div:not(.app-icon) > p {font-size: 1.4rem; font-weight: 500; color: #fff; line-height: 1.6; word-break: keep-all;}

.search-count {display: flex; align-items: center; justify-content: space-between; margin-bottom: 2rem; font-size: 1.4rem;}
.search-count > p > span {color: var(--red800); font-weight: 600;}

.shop-list > li {display: flex; column-gap: 1.2rem; padding-bottom: 2rem;}
.shop-list > li + li {padding-top: 2rem; border-top: 1px solid var(--gray200);}
.shop-list > li .img {width: 10rem; height: 10rem; border-radius: .4rem; border: 1px solid var(--gray200); background-repeat: no-repeat; background-size: contain; background-position: center;}
.shop-list > li .info {width: calc(100% - 10rem - 1.2rem); display: flex; flex-flow: column; row-gap: 1.2rem;}
.shop-list > li .info > div {display: flex; flex-flow: column; row-gap: .6rem; position: relative;}
.shop-list > li .info > div > h6 {font-size: 1.6rem; font-weight: 600;}
.shop-list > li .info > div > p {font-size: 1.4rem; line-height: 1.4;}
.shop-list > li .info > div > span {height: 2rem; width: fit-content; padding: 0 .4rem; background-color: var(--red50); color: var(--red800); display: flex; align-items: center; justify-content: center; font-size: 1.1rem; font-weight: 500; position: absolute; top: -.4rem; right: 0;}
.shop-list > li .info > p {font-size: 1.2rem; color: var(--gray500);}
.shop-list > li .info > a {display: flex; align-items: center; font-size: 1.2rem; font-weight: 500; color: var(--gray500); cursor: pointer;}

.shop-list.simple {border-top: 1px solid var(--gray200); padding-top: 2rem;}
.shop-list.simple > li {border-bottom: 0; padding: 0 0 1.2rem;}
.shop-list.simple > li .img {width: 7.2rem; height: 7.2rem;}
.shop-list.simple > li .info {width: calc(100% - 7.2rem - 1.2rem); justify-content: center;}

.shop-info-wrap {display: flex; flex-flow: column; row-gap: 2.4rem;}
.shop-info-wrap > div {display: flex; align-items: center; column-gap: 1.2rem;}
.shop-info-wrap > div .img {width: 10rem; height: 10rem; border-radius: .4rem; border: 1px solid var(--gray200); background-repeat: no-repeat; background-position: center; background-size: contain; }
.shop-info-wrap > div .info {width: calc(100% - 10rem - 1.2rem); display: flex; flex-flow: column; row-gap: 1rem;}
.shop-info-wrap > div .info > h6 {font-size: 2rem; font-weight: 600; color: var(--black);}
.shop-info-wrap > div .info > ul > li {font-size: 1.4rem; color: var(--gray500); line-height: 1.6;}
.shop-info-wrap > button {background-color: var(--white); border-color: var(--gray200); color: var(--gray500);}

.menu-list > li {display: flex; align-items: center; column-gap: 1.2rem;}
.menu-list > li + li {margin-top: 2rem; padding-top: 2rem; border-top: 1px solid var(--gray200);}
.menu-list > li .img {width: 11.2rem; height: 11.2rem; border-radius: .4rem; overflow: hidden; background-image: url(/img/shop/img-empty-2b0db00c04e5e146e43ea7a4f2b5c80d.svg); background-repeat: no-repeat; background-size: contain; background-position: center;}
.menu-list > li .info {width: calc(100% - 11.2rem - 1.2rem); display: flex; flex-flow: column; row-gap: 1rem;}
.menu-list > li .info > div {display: flex; flex-flow: column; row-gap: .6rem;}
.menu-list > li .info > div > h6 {font-size: 1.6rem; font-weight: 600;}
.menu-list > li .info > p {font-size: 1.4rem; font-weight: 500;}

.menu-info {display: flex; flex-flow: column; row-gap: 2rem;}
.menu-info .img {width: calc(100% + 4rem); height: 54vw; margin-left: -2rem; margin-top: -2rem; background-repeat: no-repeat; background-size: cover; background-position: center;}
.menu-info .info > h6 {font-size: 2rem; font-weight: 600;}
.menu-info .info > ul {margin-top: 2rem; padding-top: 2rem; border-top: 1px solid var(--gray200); display: flex; flex-flow: column; row-gap: 1.6rem;}
.menu-info .info > ul > li {display: flex; align-items: center; justify-content: space-between; font-size: 1.6rem; font-weight: 600; color: var(--black);}

.menu-option {display: flex; flex-flow: column; row-gap: 1.6rem;}
.menu-option > li {display: flex; align-items: center; justify-content: space-between;}
.menu-option > li > p {font-size: 1.4rem; font-weight: 500;}

/* 장바구니 */
.store-summary {display: flex; align-items: center; column-gap: 1.2rem;}
.store-summary .img {width: 4rem; height: 4rem; border-radius: .4rem; border: 1px solid var(--gray200); background-repeat: no-repeat; background-size: contain; background-position: center;}
.store-summary > p {font-size: 1.6rem; font-weight: 600;}

.order-menu-list {margin-top: 2rem; border-top: 1px solid var(--gray200); padding-top: 2rem;}
.order-menu-list > li {display: flex; flex-flow: column; row-gap: 2rem;}
.order-menu-list > li + li {margin-top: 2rem; border-top: 1px solid var(--gray200); padding-top: 2rem;}
.order-menu-list > li .name {display: flex; align-items: center; justify-content: space-between;}
.order-menu-list > li .name > h6 {font-size: 1.8rem; font-weight: 600;}
.order-menu-list > li .option {display: flex; align-items: flex-end; justify-content: space-between;}
.order-menu-list > li .option > div {display: flex; flex-flow: column;}
.order-menu-list > li .option > div > p {font-size: 1.4rem; line-height: 1.6; color: var(--gray500);}
.order-menu-list > li .option > div > div {font-size: 1.4rem; line-height: 1.6; font-weight: 500;}
.order-menu-list > li > button {background-color: transparent; height: fit-content; border-color: transparent; color: var(--red900); column-gap: .8rem; font-size: 1.4rem;}

/* 주문하기 */
.order-info {display: flex; flex-flow: column; row-gap: 3.2rem;}
.order-info > li {display: flex; flex-flow: column; row-gap: 1.2rem;}
.order-info > li .title {display: flex; align-items: center; justify-content: space-between; margin-bottom: 0;}
.order-info > li .title > h6 {font-size: 1.6rem; font-weight: 700;}
.order-info > li .title > h3 {font-size: 1.6rem; font-weight: 600;}
.order-info > li .title > p {font-size: 1.4rem; display: flex; align-items: center; column-gap: .4rem;}
.order-info > li .title > p > span {font-weight: 600; color: var(--red800);}
.order-info > li .title > p > i {margin-left: -.4rem;}
.order-info > li > div:not(.title) {display: flex; align-items: center; column-gap: .8rem;}
.order-info > li > div:not(.title) button {height: 4.4rem; width: 8rem; font-size: 1.4rem;}
.order-info > li > div:not(.title) > *:not(button) {flex: 1;}

.order-info > li .coupon > div {display: flex; align-items: center; justify-content: flex-end; position: relative;}
.order-info > li .coupon > div > button {width: fit-content; height: fit-content; padding: 0; position: absolute; right: 1.2rem; border-radius: 0; background-color: var(--white); border: 0;}

.order-info > li .seat-info {display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 1.2rem;}
.order-info > li .seat-info > li > select {width: 100%;}

/* 주문내역 */
.order-history {display: flex; flex-flow: column; row-gap: 1.6rem;}
.order-history > div {border: 1px solid var(--gray200); border-radius: .8rem; overflow: hidden;}
.order-history > div .state {display: flex; align-items: center; justify-content: space-between; padding: 1.2rem 2rem;}
.order-history > div .state > ul {display: flex; align-items: center; column-gap: .4rem;}
.order-history > div .state > ul > li {display: flex; align-items: center; column-gap: .4rem; font-size: 1.2rem; color: var(--gray500);}
.order-history > div .state > ul > li + li::before {content: ''; width: .1rem; height: 1rem; background-color: var(--gray300);}
.order-history > div .info {border-top: 1px solid var(--gray200); padding: 2rem; display: flex; align-items: center; justify-content: space-between;}
.order-history > div .info .img {width: 6rem; height: 6rem; border-radius: .2rem; border: 1px solid var(--gray200); background-repeat: no-repeat; background-size: contain; background-position: center;}
.order-history > div .info > div:not(.img) {display: flex; flex-flow: column; row-gap: .8rem;}
.order-history > div .info > div:not(.img) > h6 {font-size: 1.6rem; font-weight: 600;}
.order-history > div .info > div:not(.img) > span {font-size: 1.4rem;}
.order-history > div .info > div:not(.img) > p {font-size: 1.4rem; font-weight: 500; margin-top: .8rem;}
.order-history > div .info > div:not(.img) > p > span {font-weight: 600;}
.order-history > div > button {border-radius: 0; border: 0; height: 4.4rem; font-size: 1.4rem;}

/* 주문상세 */
.order-step {display: grid; grid-template-columns: repeat(4, 1fr);}
.order-step > li {font-size: 1.4rem; font-weight: 500; color: var(--gray400); padding-top: 2rem; position: relative; display: flex; flex-flow: column; align-items: center;}
.order-step > li::before {content: ''; display: block; width: 100%; height: 1px; background-color: var(--gray400); position: absolute; top: .5rem;}
.order-step > li::after {content: ''; display: block; width: 1.2rem; height: 1.2rem; background-image: url(/img/icon/ic-order-step-10497b0d752742731aa90b2225df650c.svg); background-repeat: no-repeat; background-size: contain; background-position: center; position: absolute; top: 0;}
.order-step > li.active {color: var(--red900);}
.order-step > li.active::before {background-color: var(--red900);}
.order-step > li.active::after {background-image: url(/img/icon/ic-order-step-ov-a9961c868f7655af0b5c65342d96a8dd.svg);}
@media (prefers-color-scheme: dark) {
    .order-step > li::after {background-image: url(/img/icon/ic-order-step-dark-31d389287a513b60ced80e3386c450d4.svg);}
    .order-step > li.active::after {background-image: url(/img/icon/ic-order-step-ov-dark-6d062293db2deee750bf69a08f2b86c1.svg);}
}

.order-shop {display: flex; flex-flow: column; row-gap: 2rem;}
.order-shop .label {margin-bottom: -1.4rem;}
.order-shop > div > h6 {font-size: 1.6rem; font-weight: 600; line-height: 1.4;}
.order-shop > div > span {font-size: 1.4rem; line-height: 1.4;}
.order-shop > div > p {font-size: 1.4rem; line-height: 1.4; color: var(--gray500);}
.order-shop > ul {display: grid; grid-template-columns: repeat(2, 1fr); border: 1px solid var(--gray200); border-radius: .4rem;}
.order-shop > ul > li + li {border-left: 1px solid var(--gray200);}
.order-shop > ul > li button {height: 4.4rem; font-size: 1.4rem; background-color: transparent; border: 0; color: var(--black);}

/* 24.02.20 수정 */
.game-record-wrap .game-record-summary {height: fit-content; position: sticky; top: 0; z-index: 0;}
.game-record-wrap .tab-style01 {position: sticky; top: 0;}
.game-record-wrap .tab-style01 ~ .tab-cont-wrap {background-color: var(--white); z-index: 1; position: relative; margin-top: 0;}

.game-record-wrap .livetalk-input {top: 6.4rem; flex-wrap: wrap; grid-gap: 1.6rem .8rem;}
.game-record-wrap .livetalk-list > button {top: calc(6.4rem + 4.4rem + 2.4rem + 2.8rem);}
.livetalk-input > p {font-size: 1.2rem; color: var(--gray500); width: 100%;}

.stadium-map iframe {width: 100%; height: 32rem;}

.notification.card {height: calc(100vh - 27.8rem - 4.4rem - 2rem);}
.stadium-map {width:100%;height: calc(100vh - 27.8rem - 4.4rem - 2rem - 2rem - 1.6rem - 8rem);}


/* 랜더스 옥션 */
.auction-list {display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 4rem 1.2rem;}
.auction-list > li {display: flex; flex-flow: column; row-gap: 1rem;}
.auction-list > li .img {width: 100%; border: 1px solid var(--gray200); border-radius: .4rem; background-repeat: no-repeat; background-size: 80%; background-position: center; overflow: hidden;}
.auction-list > li .img > div {width: 100%; height: 100%; display: flex; flex-flow: column; row-gap: .6rem; align-items: center; justify-content: center; position: relative;}
.auction-list > li .img > div::before {content: ''; width: 100%; height: 100%; position: absolute; z-index: 1!important;}
.auction-list > li .img > div > * {position: relative; z-index: 2;}
.auction-list > li .img > div > p {font-size: 1.2rem; font-weight: 600; color: #121212;}

.auction-list > li .img .comming::before {background-color: rgba(255,255,255,0.95);}
.auction-list > li .img .end::before {background-color: rgba(0,0,0,0.5);}
.auction-list > li .img .end > p {color: #fff;}

.auction-list > li .info {display: flex; flex-flow: column; row-gap: .8rem;}
.auction-list > li .info > h2 {font-size: 1.2rem; font-weight: 500; line-height: 1.4;}
.auction-list > li .info > ul {display: flex; flex-flow: column; row-gap: .6rem;}
.auction-list > li .info > ul > li {display: flex; align-items: center; justify-content: space-between;}
.auction-list > li .info > ul > li > h3 {font-size: 1.2rem; font-weight: 500; color: var(--gray500);}
.auction-list > li .info > ul > li > p {font-size: 1.4rem; font-weight: 700; display: flex; align-items: center; column-gap: .2rem;}
.auction-list > li .info > ul > li > p > span {font-size: 1.2rem; font-weight: 500;}
.auction-list > li .info > ul > li.result > h3 {color: var(--black);}
.auction-list > li .info > ul > li.result > p {font-size: 1.6rem; color: var(--red800);}


.auction-timer {position: fixed; left: 0; top: 0; width: 100vw; height: 5.2rem; display: flex; align-items: center; justify-content: center; background-color: var(--red800); font-size: 1.6rem; color: #fff; font-weight: 600;box-shadow: 4px 4px 12px 0px rgba(0, 0, 0, 0.08); z-index: 99;}
.auction-timer + .auction-detail .img {margin-top: 6.2rem;}
.auction-detail .img {width: 100%; border: 1px solid var(--gray200); border-radius: .8rem; background-repeat: no-repeat; background-size: 80%; background-position: center;}
.auction-detail .info {margin-top: 2rem; border-top: 1px solid var(--black);}
.auction-detail .info .tit {display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--gray200); margin-bottom: 2.4rem;}
.auction-detail .info .tit > h2 {font-size: 2rem; font-weight: 600; padding: 2.6rem 0;}
.auction-detail .info .tit > i {width: 3rem; height: 3rem;}
.auction-detail .info > h2 {font-size: 2rem; font-weight: 600; padding: 2.6rem 0; border-bottom: 1px solid var(--gray200); margin-bottom: 2.4rem;}
.auction-detail .info > ul {display: flex; align-items: center; flex-flow: column; row-gap: 1rem;}
.auction-detail .info > ul > li {width: 100%; display: flex; column-gap: 4rem;}
.auction-detail .info > ul > li > h3 {font-size: 1.4rem; color: var(--gray500); width: 6rem; line-height: 1.5;}
.auction-detail .info > ul > li > p {font-size: 1.4rem; font-weight: 500; flex: 1; line-height: 1.5; word-break: keep-all;}
.auction-detail .info > ul > li > p > span {display: block;}
.auction-detail .info > ul > li .font-red {font-weight: 700; color: var(--red800);}
.auction-detail .info .result {height: 12.6rem; margin-top: 2.4rem; display: flex; flex-flow: column; row-gap: 2rem; align-items: center; justify-content: center; border-radius: .8rem; background-image: url(/img/auction/auction-bg-202dc46e1fbae3d7427f84b88efad7b8.svg); background-repeat: no-repeat; background-size: cover; background-position: center; box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, 0.12);}
.auction-detail .info .result > p {font-size: 1.4rem; font-weight: 500; color: #F2F3F6;}
.auction-detail .info .result > div {display: flex; flex-flow: column; row-gap: .8rem; align-items: center;}
.auction-detail .info .result > div > span {font-size: 1.4rem; font-weight: 500; color: #fff;}
.auction-detail .info .result > div > p {font-size: 2.2rem; font-weight: 700; color: #fff;}

.auction-detail .my {display: flex; align-items: center; justify-content: space-between; border-radius: .4rem; background-color: var(--gray600); height: 7.4rem; padding: 0 2rem; margin-bottom: 1rem;}
.auction-detail .my > div {display: flex; flex-flow: column; row-gap: .8rem;}
.auction-detail .my > div > p {font-size: 1.4rem; font-weight: 600; color: #ffffff;}
.auction-detail .my > div > span {font-size: 1.2rem; font-weight: 500; color: #ffffff;}
.auction-detail .my > p {font-size: 2.2rem; font-weight: 600;  color: #ffffff; display: flex; align-items: center; column-gap: .2rem;}
.auction-detail .my > p > span {font-size: 1.8rem;}

.auction-detail .price {height: 16.4rem; margin-bottom: 3rem; background-color: var(--gray100); border-radius: .4rem; display: flex; flex-flow: column; row-gap: 2rem; align-items: center; justify-content: center;}
.auction-detail .price > ul {display: flex; align-items: center; column-gap: 1rem; justify-content: center;}
.auction-detail .price > ul > li {position: relative; display: flex; align-items: center;}
.auction-detail .price > ul > li > input {width: 20rem; padding: 0 4.4rem 0 1.4rem;}
.auction-detail .price > ul > li > p {font-size: 1.6rem; font-weight: 500; position: absolute; right: 1.4rem;}
.auction-detail .price > p {font-size: 1.4rem; font-weight: 500; text-align: center; line-height: 1.6;}
.auction-detail .price > p .font-red {font-weight: 700;}

.auction-detail .desc {display: flex; flex-flow: column; row-gap: 3.4rem;}
.auction-detail .desc h4 {font-size: 1.6rem; font-weight: 600; line-height: 1.6; margin-bottom: .6rem;}
.auction-detail .desc p {font-size: 1.4rem; line-height: 1.6;}
.auction-detail .desc ol > li {font-size: 1.4rem; line-height: 1.6; text-indent: -1.6rem; padding-left: 1.6rem;}
.auction-detail .desc ol > li > span {display: block; text-indent: 0; font-weight: 600;}
.auction-detail .desc table {width: 100%!important;}
.auction-detail .desc table td {text-align: left;}
.auction-detail .desc table div {height: fit-content!important;}

.auction-detail .terms {margin-top: 2.4rem; border-top: 1px solid var(--gray200); padding-top: 2.4rem;}
.auction-detail .terms button {margin-top: 2rem;}

p + .bidding-wrap {margin-top: 3.2rem;}
.bidding-wrap {padding: 0 3.2rem;}
.bidding-wrap > h3 {font-size: 1.6rem; font-weight: 600; margin-bottom: 3rem;}
.bidding-wrap > ul {display: flex; flex-flow: column; row-gap: 2rem;}
.bidding-wrap > ul > li {display: flex; align-items: center; justify-content: space-between;}
.bidding-wrap > ul > li > h4 {font-size: 1.4rem; font-weight: 500;}
.bidding-wrap > ul > li > p {font-size: 1.4rem; font-weight: 600;}
.bidding-wrap > ul > li.transfer {border-top: 1px solid var(--gray200); margin: 0 -3.2rem; padding: 2rem 3.2rem 0;}

.auction-history > li {border-top: 2px solid var(--black); padding-bottom: 1.6rem;}
.auction-history > li .info {height: 9.6rem; display: flex; align-items: center; column-gap: 1.2rem; border-bottom: 1px solid var(--gray200);}
.auction-history > li .info .img {width: 6.4rem; height: 6.4rem; border: 1px solid var(--gray200); background-repeat: no-repeat; background-size: 80%; background-position: center;}
.auction-history > li .info .desc > span {font-size: 1.2rem; font-weight: 600;}
.auction-history > li .info .desc > h2 {font-size: 1.4rem; font-weight: 500; line-height: 1.6; margin-top: .4rem;}
.auction-history > li .info .desc > p {font-size: 1.2rem; color: var(--gray500); margin-top: .8rem;}
.auction-history > li > ul {padding: 1.6rem 0; display: flex; flex-flow: column; row-gap: 1rem;}
.auction-history > li > ul > li {display: flex; align-items: center; justify-content: space-between;}
.auction-history > li > ul > li > h3 {font-size: 1.4rem;}
.auction-history > li > ul > li > p {font-size: 1.4rem; font-weight: 500;}
.auction-history > li .result {height: 4.4rem; padding: 0 1.2rem; background-color: var(--gray100); border-bottom: 1px solid var(--gray200); display: flex; align-items: center; justify-content: space-between;}
.auction-history > li .result > p {font-size: 1.2rem; font-weight: 500; color: var(--gray500);}
.auction-history > li .guide {width: fit-content; height: 4rem; display: flex; align-items: center; justify-content: center; background-color: var(--black); border-radius: .4rem; margin-top: 1.2rem; font-size: 1.2rem; font-weight: 500; color: var(--white); padding: 0 1.6rem; position: relative;}
.auction-history > li .guide::before {content: ''; width: 2.4rem; height: 1.6rem; background-image: url(/img/auction/auction-bubble-7eb05f9f2061626347bd06dad965d0eb.svg); background-repeat: no-repeat; background-size: contain; background-position: center; position: absolute; left: .2rem; top: -.6rem;}

@media (prefers-color-scheme: dark) {
    .auction-history > li .guide::before {background-image: url(/img/auction/auction-bubble-dark-050b33527146fc04490b1955c379a213.svg);}
}

.auction.notification {height: calc(100vh - 5rem - 3rem - 2.4rem);}

.auction-payment .email {display: flex; flex-flow: column; row-gap: .8rem;}
.auction-payment .address {display: flex; flex-flow: column; row-gap: .8rem;}
.auction-payment .address button {background-color: var(--black); height: 4.4rem; padding: 0 1rem; font-size: 1.2rem; font-weight: 500; border: 0;}
.auction-prod {display: flex; align-items: center; column-gap: 1.2rem; padding: 2rem 0; border-top: 1px solid var(--black); border-bottom: 1px solid var(--gray200);}
.auction-prod .img {width: 6.4rem; height: 6.4rem; background-repeat: no-repeat; background-size: cover; background-position: center;}
.auction-prod .info {display: flex; flex-flow: column; row-gap: .8rem;}
.auction-prod .info > p {font-size: 1.2rem; font-weight: 600; color: var(--gray500);}
.auction-prod .info > h2 {font-size: 1.4rem; font-weight: 500;}
.auction-prod .info > span {display: block; margin-top: .4rem; font-size: 1.2rem; color: var(--gray500);}

@media (prefers-color-scheme: dark) {
    .auction-payment .address button {background-color: var(--red800);}
}

.auction-pay .price {height: 6.2rem; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--black); border-bottom: 1px solid var(--black); margin-bottom: 2rem;}
.auction-pay .price > span {font-size: 1.6rem; font-weight: 600;}
.auction-pay .price > p {font-size: 2rem; font-weight: 700;}
.auction-pay input + label::before {margin-top: .3rem;}
.auction-pay input + label > p {font-size: 1.4rem; color: var(--gray500); line-height: 1.6; flex: 1; word-break: keep-all;}
.auction-pay input + label > p .font-red {font-weight: 600;}
.auction-pay .note {width: 100vw; margin: 2rem -2rem 0;}


/* quiz */
.quiz-title {text-align: center; font-size: 2rem; font-weight: 700; line-height: 1.6; word-break: keep-all;}
.quiz-desc {margin: -.6rem 0 1rem; font-size: 1.4rem; line-height: 1.6; word-break: keep-all;}
.quiz-desc + .cont {position: relative;}
.quiz-desc + .cont textarea {max-height: 16rem; padding-bottom: 2.4rem;}
.quiz-desc + .cont .limit-count {bottom: 1.2rem;}

/* coming */
.notification.coming {height: calc(100dvh - 3.4rem - 10rem);}

.coming-next {width: 100vw; height: 100dvh; overflow: hidden; margin-bottom: -3.4rem; background-repeat: no-repeat; background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center;}
.coming-next img {width: 100%;}

/* 25.02.14 */
.order-closed {padding: 0 1.6rem; display: flex; flex-flow: column; row-gap: 1.2rem; align-items: center;}
.order-closed > p {text-align: center; font-size: 1.4rem; font-weight: 500;}
.order-closed > ul {background-color: var(--red50); border-radius: .8rem; padding: 1.2rem 1.6rem; display: flex; flex-flow: column; row-gap: 1.2rem;}
.order-closed > ul > li {font-size: 1.4rem; line-height: 1.6; display: flex; column-gap: .4rem;}
.order-closed > ul > li + li {border-top: 1px dashed var(--gray500); padding-top: 1.2rem;}
.order-closed > ul > li > p {font-weight: 600;}
.order-closed > ul > li > span {display: flex; flex-flow: column;}
.order-closed > ul > li > span > span{font-size: 1.2rem; color: var(--red800);}