/* to embed a font */
@import url('/assets/css/font-33091213e788152b36b9a399f7a80453.css');

:root {
    --black: #000000;
    --white: #FFFFFF; /* text title */

    --gray90: #0E0E0E; /* background */
    --gray80: #1A1A1A; /* background */
    --gray70: #262626; /* line, disabled */
    --gray60: #323232; /* icon */
    --gray50: #3E3E3E;
    --gray40: #565656; /* text disabled */
    --gray30: #9F9F9F; /* text */
    --gray20: #B7B7B7;
    --gray10: #CFCFCF;
    --gray5: #E7E7E7; /* text body */

    --blue50: #00D8EE; /* main */
    --blue40: #99EFF8;
    --blue30: #B3F3FA;
    --blue20: #CCF7FC;
    --blue10: #E6FBFD;
    
    --point1: #FF7E1B;
    --point2: #124559;
    --point3: #B8B3BE;
    --point4: #D2CCA1;
    --point5: #292A2D;

    --danger: #EB003B;
    --warning: #FFB724;
    --success: #008A1E;
    --information: #0066FF;
}

/* header : 미노출 */
header {height: 6rem; display: none; align-items: center; justify-content: center; position: relative; padding: 0 2rem;}
header h1 {font-size: 1.8rem; font-weight: 600;}

/* main */
main {padding: 1rem 1.6rem 3.4rem;}

.cont-box + .cont-box {margin-top: 4rem;}
.cont-box.line + .cont-box {border-top: 1rem solid var(--gray80); width: 100vw; margin: 4rem -1.6rem 0; padding: 4rem 1.6rem 0;}

.box + .box {margin-top: 2.4rem;}

/* 계정 ----------------------- */
/* 로그인 */
.login-wrap {height: calc(100dvh - 1rem - 3.4rem); display: flex; flex-flow: column; row-gap: 2rem; align-items: center; justify-content: center;}
.login-wrap > div {display: flex; flex-flow: column; row-gap: 1.2rem; align-items: center; margin-bottom: 2rem;}
.login-wrap > div > p {text-align: center; font-size: 1.4rem; font-weight: 500; text-align: center;}

.login-wrap .info {width: 100%; display: flex; flex-flow: column; row-gap: .8rem;}
.login-wrap .info > li {display: flex; flex-flow: column; row-gap: .8rem; flex-wrap: wrap;}
.login-wrap .info > li > input + label {margin-top: .4rem; column-gap: .6rem;}
.login-wrap .info > li > input + label > p {color: var(--gray30);}
.login-wrap .info > li > span {font-size: 1.2rem; color: var(--point1);}
.login-wrap .info > li > button {margin-top: 1.2rem;}

.login-wrap .link {display: flex; align-items: center; justify-content: center; column-gap: 1.2rem;}
.login-wrap .link > li {display: flex; align-items: center; column-gap: 1.2rem;}
.login-wrap .link > li + li::before {content: ''; width: 1px; height: 1.2rem; background-color: var(--gray70);}
.login-wrap .link > li > a {font-size: 1.4rem; font-weight: 500; color: var(--gray30);}

.login-wrap .sns {margin-top: 1rem; border-top: 1px solid var(--gray70); padding-top: 3rem; display: flex; flex-flow: column; row-gap: 2rem; align-items: center; width: 100%;}
.login-wrap .sns > p {text-align: center; font-size: 1.4rem; font-weight: 500; color: var(--gray30);}
.login-wrap .sns > ul {display: flex; align-items: center; justify-content: center; column-gap: 2rem;}
.login-wrap .sns > ul > li > button {width: fit-content; height: fit-content; padding: 0; border-radius: 100%; background-color: transparent;}

/* 아이디 찾기 */
.address {display: flex; flex-flow: column; row-gap: .8rem;}
.address > li {display: flex; align-items: center; column-gap: .8rem;}
.address > li > button {width: 9.6rem; height: 4.4rem; background-color: var(--gray40); font-size: 1.4rem; font-weight: 500;}

/* 비밀번호 찾기 */
.accredit-wrap {display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 2rem; }
.accredit-wrap > li > button {width: 100%; height: 14.4rem; flex-flow: column; row-gap: 1.2rem; background-color: var(--gray80); box-shadow: 4px 4px 12px 0px rgba(7, 29, 61, 0.04);}
.accredit-wrap > li > button > p {font-size: 1.4rem; font-weight: 500;}

/* 회원가입 */
.signup-step {margin-bottom: 3rem; display: flex; align-items: center; justify-content: center; column-gap: .4rem;}
.signup-step > li {display: flex; align-items: center; justify-content: center; column-gap: .4rem; font-size: 1.6rem; color: var(--gray30);}
.signup-step > li.active {font-weight: 600; color: var(--white);}
.signup-step > li + li::before {content: ''; width: 2.4rem; height: 2.4rem; background-image: url(/assets/img/ico/ic-arrow-right-24-gr-13bb54ea7ceae8053335d0142a5e65dc.svg); background-repeat: no-repeat; background-size: contain; background-position: center;}

.signup-wrap .title {margin-bottom: 3rem;}
.signup-wrap .title > h2 {font-weight: 400;}
.signup-wrap .title > h2 > span {font-weight: 700;}

.terms-chk {display: flex; flex-flow: column; row-gap: 1.6rem;}
.terms-chk .all {margin-bottom: .4rem; padding-bottom: 2rem; border-bottom: 1px solid var(--gray70);}
.terms-chk > li {display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; grid-gap: .8rem;}
.terms-chk > li > input + label {flex: 1;}
.terms-chk > li > a {font-size: 1.4rem; color: var(--gray30);}
.terms-chk > li > ul {width: 100%; display: flex; flex-flow: column; row-gap: .8rem; padding: 1.2rem; background-color: var(--gray80);}

/* 이용약관 상세 */
.terms-wrap {display: flex; flex-flow: column; row-gap: 2rem;}
.terms-wrap > div {padding-bottom: 2rem; border-bottom: 1px solid var(--gray70); font-size: 1.4rem; line-height: 1.6; word-break: keep-all;}
.terms-wrap > div > ul {display: flex; flex-flow: column; row-gap: 1.2rem;}
.terms-wrap > div > ol {display: flex; flex-flow: column; row-gap: 1.2rem; list-style: decimal; margin-left: 1.6rem;}
.terms-wrap > div:nth-child(1):nth-last-child(1) {border: 0;}

/* 메뉴 ----------------------- */
.menu-wrap {display: flex; flex-flow: column; row-gap: 1.2rem;}
.menu-wrap > li {background-color: var(--gray80); border-radius: .4rem;}
.menu-wrap > li > p {height: 6rem; display: flex; align-items: center; column-gap: .8rem; padding: 0 1.6rem; font-size: 1.6rem; font-weight: 600; position: relative;}
.menu-wrap > li > p::after {content: ''; width: 2rem; height: 2rem; background-image: url(/assets/img/ico/ic-arrow-down-20-85ce341a0a14f87c68bf437d8590ee68.svg); background-repeat: no-repeat; background-size: contain; background-position: center; position: absolute; right: 1.6rem;}
.menu-wrap > li > ul {display: none; flex-flow: column; padding: .6rem 1.6rem; border-top: 1px dashed var(--gray40);}
.menu-wrap > li > ul > li {height: 5rem; display: flex; align-items: center; justify-content: space-between;}
.menu-wrap > li > ul > li::after {content: ''; width: 2rem; height: 2rem; background-image: url(/assets/img/ico/ic-menu-more-50eab2a0639d73f94c541821ab6b81a4.svg); background-repeat: no-repeat; background-size: contain; background-position: center;}
.menu-wrap > li > ul > li + li {border-top: 1px solid var(--gray70);}
.menu-wrap > li > ul > li > p {font-size: 1.4rem; font-weight: 500;}


.menu-wrap > li.active > p::after {background-image: url(/assets/img/ico/ic-arrow-up-20-bd1031963b75a94a1f14d1d72f8bb159.svg);}
.menu-wrap > li.active > ul {display: flex;}

/* 메인 ----------------------- */
/* 메인 */
.cont-box:has(.main-banner-swiper) + .cont-box {margin-top: 1rem;}
.main-banner-swiper.swiper {width: 100vw; margin: -1rem -1.6rem 0; position: relative; display: flex; align-items: center; justify-content: flex-end; flex-flow: column;}
.main-banner-swiper.swiper .swiper-slide {width: 100%; height: 32.3rem; position: relative; display: flex; align-items: center; justify-content: flex-end; flex-flow: column; padding: 1rem 1.6rem 7rem;}
.main-banner-swiper.swiper .swiper-slide::before {content: ''; width: 100%; height: 100%; display: block; background: linear-gradient(180deg, rgba(18, 18, 18, 0.00) 38.41%, #121212 100%); background-blend-mode: darken; mix-blend-mode: luminosity; position: absolute; left: 0; bottom: 0; z-index: 1;}
.main-banner-swiper.swiper .swiper-slide::after {content: ''; width: 100%; height: 100%; display: block; background: linear-gradient(180deg, rgba(18, 18, 18, 0.00) 38.41%, #121212 100%); background-blend-mode: darken; mix-blend-mode: luminosity; position: absolute; left: 0; bottom: 0; z-index: 1;}
.main-banner-swiper.swiper .swiper-slide .img {width: 100%; height: 100%; background-repeat: no-repeat; background-size: cover; background-position: center; position: absolute; top: 0; left: 0;}
.main-banner-swiper.swiper .swiper-slide .img::before {content: ''; width: 100%; height: 23.8rem; display: block; background: linear-gradient(0deg, rgba(18, 18, 18, 0.00) 38.41%, #121212 100%); background-blend-mode: darken; mix-blend-mode: luminosity; position: absolute; left: 0; top: 0; z-index: 1;}
.main-banner-swiper.swiper .swiper-slide .desc {display: flex; flex-flow: column; align-items: center; position: relative; z-index: 2; font-size: 3.6rem; font-weight: 700; color: var(--white); line-height: 1.2;}
.main-banner-swiper.swiper .swiper-slide .desc > span {font-size: 2.6rem;}

.main-banner-swiper.swiper .swiper-pagination-wrap {position: absolute; bottom: 3rem; z-index: 2; display: flex; align-items: center; justify-content: center; column-gap: .8rem;}
.main-banner-swiper.swiper .swiper-pagination-wrap > button {width: fit-content; height: fit-content; padding: 0; background-color: transparent;}
.main-banner-swiper.swiper .swiper-pagination-wrap .swiper-pagination {position: relative; top: initial; right: initial; bottom: initial; left: initial; margin: 0; padding: 0; display: flex; align-items: center; justify-content: center; column-gap: .2rem; font-size: 1.2rem; font-weight: 500; color: var(--gray30);}
.main-banner-swiper.swiper .swiper-pagination-wrap .swiper-pagination > span {display: block; width: 1.6rem;}
.main-banner-swiper.swiper .swiper-pagination-wrap .swiper-pagination .swiper-pagination-current {color: var(--white);}

.main-summary {display: flex; flex-flow: column;}
.main-summary .title {align-items: flex-end;}
.main-summary .title > h2 {font-size: 2.2rem; font-weight: 400;}
.main-summary .title > h2 > span {font-weight: 700;}
.main-summary .title > a {font-weight: 600; height: 3.6rem; color: var(--gray30);}
.main-summary .title > a .ic-arrow-right-16 {background-image: url(/assets/img/ico/ic-arrow-right-16-gr-c99532aa158a27a335c77c8759f38744.svg);}

.main-summary-swiper.swiper {width: 100vw; height: fit-content; margin: 0 -1.6rem; padding: 0 1.6rem; position: relative;}
.main-summary-swiper.swiper .swiper-slide {width: 100%; height: 20.9rem; padding: 1.6rem 1.6rem 0; display: flex; flex-flow: column; row-gap: 2rem; border-radius: .4rem; overflow: hidden; background: var(--gray70); box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, 0.12); backdrop-filter: blur(4px); position: relative;}
.main-summary-swiper.swiper .swiper-slide::before {content: ''; width: 1.6rem; height: 1.6rem; border-radius: 100%; background-color: var(--gray90); position: absolute; left: -.8rem; bottom: 4.4rem;}
.main-summary-swiper.swiper .swiper-slide::after {content: ''; width: 1.6rem; height: 1.6rem; border-radius: 100%; background-color: var(--gray90); position: absolute; right: -.8rem; bottom: 4.4rem;}
.main-summary-swiper.swiper .swiper-slide .info {display: flex; align-items: center; column-gap: 1rem; justify-content: space-between; margin-bottom: .8rem;}
.main-summary-swiper.swiper .swiper-slide .info > ul {display: flex; align-items: center; column-gap: .6rem;}
.main-summary-swiper.swiper .swiper-slide .info > ul > li {display: flex; align-items: center; column-gap: .6rem; font-size: 1.4rem; font-weight: 500;}
.main-summary-swiper.swiper .swiper-slide .info > ul > li + li::before {content: ''; width: 1px; height: 1rem; background-color: var(--gray5);}

.main-summary-swiper.swiper .swiper-slide .option {display: flex; align-items: center; column-gap: 1rem; margin-top: -.4rem;}
.main-summary-swiper.swiper .swiper-slide .option > div {flex: 1; height: 3rem; border-radius: .4rem; background-color: var(--gray90); display: flex; align-items: center; column-gap: .6rem; justify-content: center;}
.main-summary-swiper.swiper .swiper-slide .option > div .img {width: 1.8rem; height: 1.8rem; background-color: var(--gray10); border-radius: 100%; background-image: url(/assets/img/ico/ic-mom-vote-52f01268f0c846b08de5d036c146ec96.svg); background-repeat: no-repeat; background-size: cover; background-position: top center;}
.main-summary-swiper.swiper .swiper-slide .option > div > div {display: flex; align-items: center; font-size: 1.2rem; font-weight: 500;}
.main-summary-swiper.swiper .swiper-slide .option > div > div > i {width: 1.4rem; height: 1.4rem;}
.main-summary-swiper.swiper .swiper-slide .option > div > span {font-size: 1rem; font-weight: 500;}

.main-summary-swiper.swiper .swiper-slide .option .mom.disabled > span {color: var(--gray40);}
.main-summary-swiper.swiper .swiper-slide .option .mom.disabled > div {color: var(--gray40);}
.main-summary-swiper.swiper .swiper-slide .option .mom.disabled > div > i {display: none;}


.main-summary-swiper.swiper .swiper-slide .btn {border-top: 1px dashed rgba(255, 255, 255, .25); padding: 1rem 0;}
.main-summary-swiper.swiper .swiper-slide .btn button {height: 3rem; background-color: transparent; font-size: 1.4rem;}
.main-summary-swiper.swiper .swiper-slide .btn button.blue {background-color: var(--blue50); color: #fff;}

.main-summary-swiper.swiper .swiper-slide .empty {width: 100%; height: 100%; padding-bottom: 6rem!important; display: flex; flex-flow: column; row-gap: 1.2rem; align-items: center; justify-content: center;}
.main-summary-swiper.swiper .swiper-slide .empty > i {width: 5rem; height: 5rem;}
.main-summary-swiper.swiper .swiper-slide .empty > p {text-align: center; font-size: 1.4rem; font-weight: 600;}

.game-info {display: flex; align-items: center; justify-content: center; column-gap: 1.6rem;}
.game-info > div {flex: 1; display: flex; align-items: center; column-gap: 1rem;}
.game-info > div:first-child {flex-flow: row-reverse;}
.game-info > div > i {width: 2.8rem; height: 2.8rem;}
.game-info > div > p {font-size: 1.6rem; font-weight: 600;}
.game-info > ul {display: flex; align-items: center; column-gap: .8rem; justify-content: center; min-width: 6.2rem;}
.game-info > ul > li {display: flex; align-items: center; column-gap: .4rem; font-size: 1.8rem; font-weight: 700; width: 2rem; justify-content: center;}
.game-info > ul > li:nth-child(2) {width: fit-content;}

.main-summary-swiper.swiper .swiper-pagination {position: relative; top: initial; left: initial; bottom: initial; right: initial; margin-top: 1.2rem; display: flex; align-items: center; column-gap: .8rem; justify-content: center;}
.main-summary-swiper.swiper .swiper-pagination .swiper-pagination-bullet {width: .6rem; height: .6rem; margin: 0; background-color: var(--white); opacity: .2;}
.main-summary-swiper.swiper .swiper-pagination .swiper-pagination-bullet-active {opacity: 1;}

/* 메인 > 배너 */
.banner-swiper.swiper {height: fit-content; position: relative; border-radius: .4rem; overflow: hidden;}
.banner-swiper.swiper .swiper-slide {height: initial;}
.banner-swiper.swiper .swiper-slide img {width: 100%; height: 100%; object-fit: cover;}
.banner-swiper.swiper .swiper-pagination {width: fit-content; min-width: 3.6rem; height: 2rem; border-radius: 2rem; padding: 0 .6rem; display: flex; align-items: center; column-gap: .2rem; justify-content: center; position: absolute; top: initial; left: initial; bottom: .8rem; right: .8rem; background-color: var(--black); font-size: 1.2rem; color: rgba(255, 255, 255, .4);}
.banner-swiper.swiper .swiper-pagination > span {width: .8rem; text-align: center;}
.banner-swiper.swiper .swiper-pagination .swiper-pagination-current {font-weight: 500; color: var(--white);}

/* 메인 > 팀 순위 */
.team-rank-table01 table tbody td:nth-child(1) {font-family: 'Roboto'; font-weight: 700; font-style: italic; font-size: 1.6rem;}
.team-rank-table01 table tbody .point td:nth-child(1),
.team-rank-table01 table tbody .point td:nth-child(2) {color: var(--blue50);}
.team-rank-table01 table tbody .more button {background-color: transparent; font-size: 1.4rem; height: 4rem;}

/* 메인 > MD 컬렉션 */
.collection-swiper.swiper {width: 100vw; margin: 0 -1.6rem; padding: 0 1.6rem;}
.collection-swiper.swiper .swiper-slide {width: 11rem; display: flex; flex-flow: column; row-gap: 1rem;}
.collection-swiper.swiper .swiper-slide .img {width: 11rem; height: 11rem; border-radius: .4rem; background-repeat: no-repeat; background-size: cover; background-position: center;}
.collection-swiper.swiper .swiper-slide .info {display: flex; flex-flow: column; row-gap: .8rem;}
.collection-swiper.swiper .swiper-slide .info > p {font-size: 1.1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.collection-swiper.swiper .swiper-slide .info > div {display: flex; align-items: center; column-gap: .4rem; font-size: 1.2rem; font-weight: 600;}
.collection-swiper.swiper .swiper-slide .info > div > span {color: var(--point1);}

/* 메인 > 성남FC SNS */
.media-summary {display: flex; flex-flow: column; row-gap: 2rem;}
.media-summary > div {display: flex; flex-flow: column; row-gap: 1rem;}
.media-summary > div .img {width: 100%; height: 50vw; background-repeat: no-repeat; background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; border-radius: .4rem;}
.media-summary > div .info {display: flex; flex-flow: column; row-gap: 1rem;}
.media-summary > div .info > p {font-size: 1.4rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; line-clamp: 1; -webkit-line-clamp: 1; -webkit-box-orient: vertical;}
.media-summary > div .info > ul {display: flex; align-items: center; column-gap: .6rem;}
.media-summary > div .info > ul > li {display: flex; align-items: center; column-gap: .6rem; font-size: 1.2rem; color: var(--gray30);}
.media-summary > div .info > ul > li + li::before {content: ''; width: 1px; height: 1rem; background-color: var(--gray70);}

.media-summary > ul {display: flex; flex-flow: column; row-gap: 1rem;}
.media-summary > ul > li {display: flex; flex-flow: row-reverse; column-gap: 4rem;}
.media-summary > ul > li + li {border-top: 1px solid var(--gray70); padding-top: 1rem;}
.media-summary > ul > li .img {width: 13.2rem; height: 7.4rem; border-radius: .4rem; background-repeat: no-repeat; background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center;}
.media-summary > ul > li .img > i {width: 3.2rem; height: 3.2rem;}
.media-summary > ul > li .info {display: flex; flex-flow: column; row-gap: 1.2rem; flex: 1;}
.media-summary > ul > li .info > p {height: 4rem; font-size: 1.2rem; font-weight: 500; line-height: 1.6; word-break: keep-all; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; line-clamp: 2; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.media-summary > ul > li .info > ul {display: flex; align-items: center; column-gap: .6rem;}
.media-summary > ul > li .info > ul > li {display: flex; align-items: center; column-gap: .6rem; font-size: 1.2rem; color: var(--gray30);}
.media-summary > ul > li .info > ul > li + li::before {content: ''; width: 1px; height: 1rem; background-color: var(--gray70);}

.instagram-wrap {display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: .6rem;}
.instagram-wrap > li {width: 100%; height: calc((100vw - 3.2rem - .6rem) / 2); border-radius: .4rem; overflow: hidden; object-fit: cover;}
.instagram-wrap > li > img {width: 100%;}

/* 메인 > SNS */
.sns-wrap {display: flex; flex-flow: column; row-gap: .8rem;}
.sns-wrap > li {height: 4.4rem; border-radius: .4rem; border: 1px solid var(--gray70); background-color: var(--gray80); display: flex; align-items: center; justify-content: center; column-gap: .4rem;}
.sns-wrap > li > p {font-size: 1.4rem; font-weight: 600;}

/* 메인 > 스폰서 */
.sponsor-swiper.swiper {width: 100vw; margin: 0 -1.6rem; padding: 0 1.6rem;}
.sponsor-swiper.swiper .swiper-slide {width: fit-content;}
.sponsor-swiper.swiper .swiper-slide img {height: 3.4rem;}

/* 경기 ----------------------- */
/* 경기 > 일정 결과 */
.nav-wrap {display: flex; align-items: center; justify-content: center; margin-bottom: 2rem; position: relative;}
.nav-wrap > ul {display: flex; align-items: center; column-gap: 1.2rem;}
.nav-wrap > ul > li > p {font-size: 1.8rem; font-weight: 700;}
.nav-wrap > ul > li > button {width: fit-content; height: fit-content; padding: 0; background-color: transparent;}
.nav-wrap > button {width: fit-content; height: 2.4rem; padding: 0 .6rem; border-radius: 2rem; border-color: var(--gray70); background-color: var(--gray80); font-size: 1.2rem; font-weight: 500; position: absolute;}
.nav-wrap > button:last-child {right: 0;}

.schedule-list {display: flex; flex-flow: column; row-gap: 2rem;}
.schedule-list > li {display: flex; flex-flow: column; row-gap: 2rem; border: 1px solid var(--gray70); background-color: var(--gray80); border-radius: .4rem; padding: 1.6rem;}
.schedule-list > li .info {display: flex; align-items: center; column-gap: 1rem; justify-content: space-between; margin-bottom: .8rem;}
.schedule-list > li .info > ul {display: flex; align-items: center; column-gap: .6rem;}
.schedule-list > li .info > ul > li {display: flex; align-items: center; column-gap: .6rem; font-size: 1.4rem; font-weight: 500;}
.schedule-list > li .info > ul > li + li::before {content: ''; width: 1px; height: 1rem; background-color: var(--gray5);}
.schedule-list > li .btn {border-top: 1px dashed rgba(255,255,255,.3); padding-top: 2rem; display: flex; align-items: center; justify-content: center; column-gap: .8rem;}
.schedule-list > li .btn > div {display: flex; align-items: center; column-gap: 1rem; flex: 1;}
.schedule-list > li .btn > div .img {width: 3.2rem; height: 3.2rem; border-radius: 100%; background-image: url(/assets/img/player/thumbnail-img01-7940f82665200da12b11fa69a644de13.png); background-repeat: no-repeat; background-size: cover; background-position: top center; background-color: var(--gray10);}
.schedule-list > li .btn > div .desc {display: flex; flex-flow: column; row-gap: .6rem;}
.schedule-list > li .btn > div .desc > span {font-size: 1rem; font-weight: 500;}
.schedule-list > li .btn > div .desc > div {font-size: 1.4rem; font-weight: 700; display: flex; align-items: center; column-gap: .2rem;}
.schedule-list > li .btn > div.coming .desc {color: var(--gray40);}
.schedule-list > li .btn > div + button {width: 8rem;}
.schedule-list > li .btn > button {height: 3.2rem; font-size: 1.4rem; width: 100%;}
.schedule-list > li .btn > button:nth-child(1):nth-last-child(1) {width: 100%; background-color: var(--blue50);}
.schedule-list > li .btn > button:disabled {color: var(--white)!important; background-color: var(--gray40)!important;}


.empty.game {height: calc(100dvh - 4.5rem - 2rem - 2.6rem - 2rem - 3.4rem);}

/* 경기 > 일정 결과 > 매치센터 */
.match-summary {display: flex; flex-flow: column; row-gap: 2rem; align-items: center; width: 100vw; margin: -1rem -1.6rem 0; padding-top: 1rem; background-color: var(--gray80);}
.match-summary .goal {border-top: 1px dashed rgba(255,255,255,.3); width: 100%; padding: 1.2rem 1.6rem; display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 4rem;}
.match-summary .goal > ul {display: flex; flex-flow: column; row-gap: .8rem;}
.match-summary .goal > ul > li {display: flex; align-items: center; column-gap: .6rem;}
.match-summary .goal > ul > li > i {width: 1.2rem; height: 1.2rem;}
.match-summary .goal > ul > li > p {font-size: 1.2rem; color: var(--gray5); font-weight: 500; display: flex; align-items: center; column-gap: .4rem;}
.match-summary .goal > ul > li > p > span {color: var(--gray30); font-weight: 400;}
.match-summary .goal > ul:nth-child(1) > li {flex-flow: row-reverse;}

.game-info-detail {display: flex; flex-flow: column; row-gap: 2rem; align-items: center; width: 100%; padding: 0 1.6rem;}
.game-info-detail > ul {display: flex; align-items: center; column-gap: .6rem;}
.game-info-detail > ul > li {display: flex; align-items: center; column-gap: .6rem; font-size: 1.4rem; font-weight: 500;}
.game-info-detail > ul > li + li::before {content: ''; width: 1px; height: 1rem; background-color: var(--white);}
.game-info-detail > div {width: 100%; display: flex; align-items: center; column-gap: 2rem; justify-content: center;}
.game-info-detail > div .team {flex: 1; display: flex; flex-flow: column; row-gap: .8rem; align-items: center;}
.game-info-detail > div .team > i {width: 3.8rem; height: 3.8rem;}
.game-info-detail > div .team > p {font-size: 1.4rem; font-weight: 600;}
.game-info-detail > div .score {display: flex; flex-flow: column; align-items: center; row-gap: .8rem;}
.game-info-detail > div .score > ul {display: flex; align-items: center; column-gap: .6rem; justify-content: center;}
.game-info-detail > div .score > ul > li {font-size: 3.2rem; font-weight: 700; width: 4rem; text-align: center;}
.game-info-detail > div .score > ul > li:nth-child(2) {width: fit-content;}

.match-ground-wrap {display: flex; flex-flow: column; row-gap: 2rem;}
.match-ground-wrap .ground {border-radius: .4rem; position: relative;}
.match-ground-wrap .ground > img {width: 100%;}
.match-ground-wrap .ground > div {position: absolute; display: flex; flex-flow: column; align-items: center; row-gap: .2rem; width: 6.4rem; height: 4.6rem; margin-left: -3.2rem; margin-top: -2.3rem;}
.match-ground-wrap .ground > div > p {width: 2.8rem; height: 2.8rem; background-color: var(--black); display: flex; align-items: center; justify-content: center; border-radius: 100%; font-size: 1.4rem;}
.match-ground-wrap .ground > div > div {height: 1.6rem; padding: 0 .4rem; border-radius: 2rem;  background-color: rgba(14,14,14,.5); display: flex; align-items: center; justify-content: center;}
.match-ground-wrap .ground > div > div > p {max-width: 5.6rem; font-size: 1rem; font-weight: 500; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
/*.match-ground-wrap > ul {display: flex; flex-flow: column; row-gap: 1.6rem; max-height: 10rem; overflow-y: auto;}*/
.match-ground-wrap > ul {display: flex; flex-flow: column; row-gap: 1.6rem;}
.match-ground-wrap > ul > li {display: flex; flex-flow: column; row-gap: .4rem;}
.match-ground-wrap > ul > li > div {display: flex; align-items: center; column-gap: .6rem;}
.match-ground-wrap > ul > li > div  > p {font-size: 1.4rem; font-weight: 500; color: var(--gray5); display: flex; align-items: center; column-gap: .4rem;}
.match-ground-wrap > ul > li > div > p > span {color: var(--gray30); font-weight: 400;}

/*.match-ground-wrap > ul::-webkit-scrollbar {width: .2rem; height: 100%; background-color: rgba(255, 255, 255, .25); display: block; border-radius: .4rem;}*/
/*.match-ground-wrap > ul::-webkit-scrollbar-thumb {background-color: var(--white);}*/

/* 경기 > 일정 결과 > 매치센터 > 경기 정보 */
.graph-wrap {display: flex; flex-flow: column; row-gap: 1.2rem;}
.graph-wrap .team {display: flex; align-items: center; column-gap: .6rem; justify-content: center;}
.graph-wrap .team > li:nth-child(1) {flex: 1;}
.graph-wrap .team > li:nth-child(1) > p {text-align: right;}
.graph-wrap .team > li:nth-child(2) {width: fit-content;}
.graph-wrap .team > li:nth-child(3) {flex: 1;}
.graph-wrap .team > li > p {font-size: 1.6rem; font-weight: 600;}
.graph-wrap .team > li > span {width: 5.2rem; font-size: 1.4rem; color: var(--gray40); display: block; text-align: center;}

.graph-wrap .graph {display: flex; flex-flow: column; row-gap: 1.2rem;}
.graph-wrap .graph > li {display: flex; align-items: center; column-gap: .6rem;}
.graph-wrap .graph > li > p {width: 5.2rem; text-align: center; font-size: 1.2rem; font-weight: 500; color: var(--gray30);}
.graph-wrap .graph > li > div {flex: 1; display: flex; align-items: center; column-gap: .6rem;}
.graph-wrap .graph > li > div > p {width: 3.6rem; font-size: 1.2rem; font-weight: 500;}
.graph-wrap .graph > li > div > div {flex: 1; height: .4rem; border-radius: .1rem; background-color: var(--gray70); display: flex; align-items: center;}
.graph-wrap .graph > li > div > div > span {display: block; height: 100%; border-radius: .1rem; background-color: var(--blue50);}

.graph-wrap .graph > li > div:nth-child(1) > p {text-align: right;}
.graph-wrap .graph > li > div:nth-child(1) > div {justify-content: flex-end;}
.graph-wrap .graph > li > div:nth-child(3) {flex-flow: row-reverse;}
.graph-wrap .graph > li > div:nth-child(3) > div > span {background-color: var(--gray30);}

/* 경기 > 일정 결과 > 매치센터 > 타임라인 */
.timeline {display: flex; flex-flow: column; background-color: var(--gray80); border-radius: .4rem;}
.timeline > li {display: flex; align-items: center; column-gap: .6rem; height: 4.6rem; padding: 0 1.6rem;}
.timeline > li > div {flex: 1; display: flex; align-items: center; column-gap: .8rem; justify-content: space-between;}
.timeline > li > div > div {display: flex; flex-flow: column; row-gap: .4rem;}
.timeline > li > div > div > p {font-size: 1.4rem; font-weight: 600;}
.timeline > li > div > div > span {font-size: 1.2rem; color: var(--gray30);}
.timeline > li > div:nth-child(3) {flex-flow: row-reverse;}
.timeline > li > div:nth-child(3) > div {align-items: flex-end;}
.timeline > li > p {width: 3.6rem; text-align: center; font-size: 1.4rem; font-weight: 500; color: var(--gray30);}
.timeline > li + li {border-top: 1px dashed rgba(159,159,159,.3);}

/* 경기 > 팀 순위 */
.team-rank-table02 {position: relative;}
.team-rank-table02 tr > *:nth-child(1) {position: sticky; left: 0; z-index: 1;}
.team-rank-table02 tr > *:nth-child(2) {position: sticky; left: 4rem; z-index: 1;}
.team-rank-table02 tr > *:nth-child(2)::before {content: ''; width: 1px; height: 100%; background-color: #272727; display: block; position: absolute; top: 0; left: initial; right: 0;}
.team-rank-table02 tr > *:nth-child(2)::after {content: ''; width: 1.4rem; height: 100%; background: linear-gradient(90deg, rgba(23, 23, 23, 0.55) -10%, rgba(28, 28, 28, 0.00) 100%); display: block; position: absolute; right: -1.4rem; top: 0;}
.team-rank-table02 tr > *:nth-child(2) + td::before {content: none;}
.team-rank-table02 tr > td:nth-child(1) {font-family: 'Roboto'; font-weight: 700; font-style: italic; font-size: 1.6rem;}

/* 까치같이 ----------------------- */
/* 까치같이 > 구단 뉴스 */
main .search-wrap:first-child {margin-top: -1rem; position: sticky; top: 0;}
.tab-cont .search-wrap:first-child {margin-top: -2rem; position: sticky; top: 4.5rem;}

.search-wrap {width: 100vw; margin: 0 -1.6rem 2rem; padding: 1.2rem 1.6rem; display: flex; align-items: center; grid-gap: .6rem; flex-wrap: wrap; border-bottom: 1px solid var(--gray70); background-color: var(--gray90); z-index: 10;}
.search-wrap:has(> *:nth-child(1):nth-last-child(3)) > select {width: calc((100% - .6rem) / 2);}
.search-wrap > select {width: 11rem;}
.search-wrap > div {flex: 1; position: relative; display: flex; align-items: center;}
.search-wrap > div > input {padding-right: 4.4rem;}
.search-wrap > div > button {width: fit-content; height: fit-content; padding: 0; position: absolute; right: 1.2rem; background-color: transparent;}

.notice-list {display: flex; flex-flow: column; row-gap: 2rem;}
.notice-list > li {display: flex; flex-flow: column; row-gap: 1.2rem;}
.notice-list > li + li {border-top: 1px solid var(--gray70); padding-top: 2rem;}
.notice-list > li .img img {width: 100%;}
.notice-list > li .desc {display: flex; flex-flow: column; row-gap: .8rem;}
.notice-list > li .desc > p {font-size: 1.4rem; font-weight: 600; line-height: 1.4; word-break: keep-all;}
.notice-list > li .desc > ul {display: flex; align-items: center; column-gap: .6rem;}
.notice-list > li .desc > ul > li {display: flex; align-items: center; column-gap: .6rem; font-size: 1.2rem; color: var(--gray30);}
.notice-list > li .desc > ul > li + li::before {content: ''; width: 1px; height: 1rem; background-color: var(--gray70);}

.empty.news {height: calc(100dvh - 4.5rem - 6.9rem - 2rem - 3.4rem);}

/* 까치같이 > 구단뉴스 > 상세 */
.notice-detail {display: flex; flex-flow: column;}
.notice-detail .cont {display: flex; flex-flow: column; row-gap: 3.2rem; padding-bottom: 4rem;}
.notice-detail .cont .tit {display: flex; flex-flow: column; row-gap: 1.2rem;}
.notice-detail .cont .tit > p {font-size: 1.6rem; font-weight: 600; line-height: 1.6; word-break: keep-all;}
.notice-detail .cont .tit > ul {display: flex; align-items: center; column-gap: .6rem;}
.notice-detail .cont .tit > ul > li {display: flex; align-items: center; column-gap: .6rem; font-size: 1.2rem; color: var(--gray30);}
.notice-detail .cont .tit > ul > li + li::before {content: ''; width: 1px; height: 1rem; background-color: var(--gray70);}
.notice-detail .cont .desc {display: flex; flex-flow: column; row-gap: 2.4rem; font-size: 1.4rem; line-height: 1.6;}
.notice-detail .cont .desc h2 {font-size: 2rem; font-weight: 700; line-height: 1.6;}
.notice-detail .cont .desc img {width: 100vw!important; margin: 0 -1.6rem!important;}

.notice-img-swiper.swiper {width: 100vw; height: fit-content; margin: -1rem -1.6rem 0; position: relative;}
.notice-img-swiper.swiper .swiper-slide {width: 100%;}
.notice-img-swiper.swiper .swiper-slide .img {width: 100%; height: 20rem; background-image: url(/assets/img/media/media-thumbnail01-8b881b6f4d12df25d5adf535fd07c436.png); background-repeat: no-repeat; background-size: cover; background-position: center;}
.notice-img-swiper.swiper .swiper-slide .img::before {content: ''; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: linear-gradient(0deg, rgba(0, 0, 0, 0.80) 0%, rgba(0, 0, 0, 0.00) 69.97%);}
.notice-img-swiper.swiper .swiper-pagination {width: calc(100% - 3.2rem); height: .2rem; top: initial; bottom: 2rem; left: 1.6rem; right: initial; background-color: rgba(255, 255, 255, .2);}
.notice-img-swiper.swiper .swiper-pagination > span {background-color: var(--white);}

.comment-wrap > div {width: 100vw; height: 4.8rem; padding: 0 1.6rem; margin: 0 -1.6rem; background-color: var(--gray80); display: flex; align-items: center; justify-content: space-between;}
.comment-wrap > div > ul {display: flex; align-items: center; column-gap: 1.2rem;}
.comment-wrap > div > ul > li {display: flex; align-items: center; column-gap: .4rem; font-size: 1.2rem; font-weight: 500; color: var(--gray30);}
.comment-wrap > div i {width: 2rem; height: 2rem;}
.comment-wrap > div button {width: fit-content; height: fit-content; padding: 0; background-color: transparent; font-size: 1.2rem; font-weight: 500; color: var(--gray30);}
.comment-wrap > div button.active {font-weight: 600; color: var(--blue50);}
.comment-wrap > ul {display: flex; flex-flow: column;}
.comment-wrap > ul > li {display: flex; flex-flow: column; row-gap: 2rem; width: 100vw; margin: 0 -1.6rem; padding: 2rem 1.6rem;}
.comment-wrap > ul > li + li {border-top: 1px solid var(--gray70);}
.comment-wrap > ul > li > div {display: flex; flex-flow: column; row-gap: 1rem;}
.comment-wrap > ul > li > ul {display: flex; flex-flow: column; row-gap: 2rem; padding-left: 4rem;}
.comment-wrap > ul > li .info {display: flex; justify-content: space-between;}
.comment-wrap > ul > li .info > div {display: flex; column-gap: 1.2rem;}
.comment-wrap > ul > li .info > div .img {width: 2.8rem; height: 2.8rem; border-radius: 100%; background-image: url(/assets/img/player/thumbnail-img01-7940f82665200da12b11fa69a644de13.png); background-repeat: no-repeat; background-size: cover; background-position: center; border: 1px solid var(--gray30);}
.comment-wrap > ul > li .info > div .info {display: flex; flex-flow: column; row-gap: .6rem;}
.comment-wrap > ul > li .info > div .info > p {font-size: 1.2rem; font-weight: 600; display: flex; align-items: center; column-gap: .6rem;}
.comment-wrap > ul > li .info > div .info > span {font-size: 1.2rem; color: var(--gray30);}
.comment-wrap > ul > li .info .more {position: relative;}
.comment-wrap > ul > li .info .more > ul {display: flex; align-items: center; border: 1px solid var(--gray70); background-color: var(--gray80); border-radius: .4rem; position: absolute; top: 2rem; right: 0; z-index: 10;}
.comment-wrap > ul > li .info .more > ul > li {position: relative; display: flex; align-items: center;}
.comment-wrap > ul > li .info .more > ul > li + li::before {content: ''; width: 1px; height: 1rem; background-color: var(--gray60); position: absolute; left: 0;}
.comment-wrap > ul > li .info .more > ul > li > button {width: 4.5rem; height: 3.6rem; padding: 0; font-size: 1.2rem; font-weight: 500; color: var(--white); background-color: transparent;}
.comment-wrap > ul > li .info > button {width: fit-content; height: fit-content; padding: 0; background-color: transparent;}
.comment-wrap > ul > li .desc {padding-left: 4rem; display: flex; flex-flow: column; row-gap: 1rem;}
.comment-wrap > ul > li .desc > p {font-size: 1.4rem; line-height: 1.6; color: var(--gray5);}
.comment-wrap > ul > li .desc > ul {display: flex; align-items: center; column-gap: 1rem;}
.comment-wrap > ul > li .desc > ul > li {display: flex; align-items: center; column-gap: .4rem; font-size: 1rem; color: var(--gray5);}
.comment-wrap > ul > li .desc > ul > li i {width: 1.2rem; height: 1.2rem;}
.comment-wrap > ul > li .desc > ul > li button {font-size: 1rem; color: var(--gray5); font-weight: 400; column-gap: .4rem; width: fit-content; height: fit-content; padding: 0; background-color: transparent;}
.comment-wrap > ul > li .desc > ul > li button.active {color: var(--blue50);}

.comment-wrap > ul > li .info > div > button {width: fit-content; height: fit-content; padding: 0; background-color: transparent;}

.comment-wrap > ul > li .desc > ul > li > div button {font-size: 1rem; color: var(--gray5); font-weight: 400; column-gap: .4rem; width: fit-content; height: fit-content; padding: 0; background-color: transparent;}

.more-wrap {position: relative; z-index: 5;}
.more-wrap .more-layer {position: absolute; top: 2rem; right: 0; 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;}

.notice-detail .list {width: 100vw; margin: 0 -1.6rem .4rem; padding: 0 1.6rem; border-top: 1rem solid var(--gray80);}
.notice-detail .list > li {height: 4.4rem; display: flex; align-items: center; column-gap: 1rem;}
.notice-detail .list > li + li {border-top: 1px solid var(--gray70);}
.notice-detail .list > li > span {font-size: 1.2rem; color: var(--gray30);}
.notice-detail .list > li > p {flex: 1; font-size: 1.2rem; color: var(--gray5); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; line-clamp: 1; -webkit-line-clamp: 1; -webkit-box-orient: vertical;}

.bottom-fixed:has(.comment-input)::after {height: calc(1rem + 4.4rem);}
.bottom-fixed:has(.comment-input) > div {background-color: var(--gray80); border-top: 1px solid var(--gray70);}
.comment-input {display: flex; align-items: center; column-gap: .8rem;}
.comment-input input {background-color: var(--gray70); border-color: var(--gray60);}
.comment-input button {width: 8rem; height: 4.4rem; font-size: 1.4rem;}

/* 까치같이 > 구단뉴스 > 상세 > 댓글 수정 */
main .modify-wrap:first-child {width: 100vw; margin: -1rem -1.6rem 0; padding: 1.6rem; border-top: 1rem solid var(--gray80);}
main .modify-wrap:first-child textarea {padding: 0; height: 36rem; background-color: transparent; border: 0;}

/* 까치같이 > 구단뉴스 > 상세 > 신고 */
.notify-wrap {display: flex; flex-flow: column; width: 100vw; margin: 0 -1.6rem; border-top: 1px solid var(--gray70);}
.notify-wrap > li {padding: 0 1.6rem; height: 5.2rem; display: flex; align-items: center; font-size: 1.4rem; font-weight: 500; border-bottom: 1px solid var(--gray70);}

/* 까치같이 > MOM 투표 */
.mom-list {width: 100vw; margin: -2rem -1.6rem 0; padding: 3rem 1.6rem 0; background-image: url(/assets/img/talk/mom-bg-263a8e95ffb9e7f68b954e8ec0c1c039.png); background-repeat: no-repeat; background-size: 100% auto; background-position: top center;}
.mom-list > div {display: flex; flex-flow: column; row-gap: 3rem; align-items: center; margin-bottom: 2rem;}
.mom-list > div img {height: 7.4rem;}

.empty.mom {height: calc(100dvh - 4.5rem - 3rem - 14.8rem - 2rem - 3.4rem);}

/* 까치같이 > MOM 투표 > 상세 */
.mom-summary {display: flex; flex-flow: column; row-gap: 2rem; align-items: center; width: 100vw; margin: -1rem -1.6rem 0; padding: 3rem 1.6rem 2rem; background-image: url(/assets/img/talk/mom-bg-263a8e95ffb9e7f68b954e8ec0c1c039.png); background-repeat: no-repeat; background-size: 100% auto; background-position: top center;}
.mom-summary > img {height: 7.4rem;}
.mom-summary .league {display: flex; flex-flow: column; align-items: center; row-gap: 1rem;}
.mom-summary .league img {width: 4rem; height: 4rem;}
.mom-summary .league p {text-align: center; font-size: 1.2rem; font-weight: 700;}

.mom-summary .mom-player {display: flex; align-items: flex-end; justify-content: center; position: relative;}
.mom-summary .mom-player > img {width: 100%;}
.mom-summary .mom-player > div {display: flex; flex-flow: column; align-items: center; position: absolute; width: 100%;}
.mom-summary .mom-player > div .player {width: 16rem; height: 16rem; background-repeat: no-repeat; background-size: 100% auto; background-position: top center;}
.mom-summary .mom-player > div > p {width: 100%; height: 3.6rem; display: flex; align-items: center; justify-content: center; background-color: var(--gray80); font-size: 1.6rem; font-weight: 700;}

.vote-state {display: flex; flex-flow: column; row-gap: 1rem;}
.vote-state > li {height: 4.8rem; display: flex; align-items: center; justify-content: space-between; padding: 0 1.6rem; background-color: var(--gray80); border: 1px solid var(--gray70); border-radius: .4rem;}
.vote-state > li > div {display: flex; align-items: center; column-gap: 1rem;}
.vote-state > li > div .img {width: 3.2rem; height: 3.2rem; border-radius: 100%; background-image: url(/assets/img/player/thumbnail-img01-7940f82665200da12b11fa69a644de13.png); background-color: var(--gray10); background-repeat: no-repeat; background-size: cover; background-position: center top;}
.vote-state > li > div > p {font-size: 1.4rem; font-weight: 500;}
.vote-state > li > p {font-size: 1.4rem; font-weight: 700;}
.vote-state > li:nth-child(1) > p {color: var(--blue50);}

.media-list01 {display: flex; flex-flow: column; row-gap: 3rem;}
.media-list01 > li {display: flex; flex-flow: column; row-gap: 2rem;}
.media-list01 > li .img {width: 100%; height: 50vw; border-radius: .4rem; background-image: url(/assets/img/media/media-thumbnail01-8b881b6f4d12df25d5adf535fd07c436.png); background-repeat: no-repeat; background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden;}
.media-list01 > li .img:has(i)::before {content: ''; background-color: rgba(0, 0, 0, 0.25); width: 100%; height: 100%; position: absolute; z-index: 1;}
.media-list01 > li .img > i {position: relative; z-index: 2;}
.media-list01 > li .desc {display: flex; flex-flow: column; row-gap: 1.2rem;}
.media-list01 > li .desc > div {display: flex; flex-flow: column; row-gap: .6rem;}
.media-list01 > li .desc > div > p {font-size: 1.4rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.media-list01 > li .desc > ul {display: flex; align-items: center; column-gap: .6rem;}
.media-list01 > li .desc > ul > li {display: flex; align-items: center; column-gap: .6rem; font-size: 1.2rem; color: var(--gray30);}
.media-list01 > li .desc > ul > li + li::before {content: ''; width: 1px; height: 1rem; background-color: var(--gray40);}


/* 까치같이 > 이벤트 */
.event-list {display: flex; flex-flow: column; row-gap: 2rem;}
.event-list > li {border-bottom: 1px solid var(--gray70); padding-bottom: 2rem; display: flex; flex-flow: column; row-gap: .6rem;}
.event-list > li > div {display: flex; align-items: center; justify-content: space-between; column-gap: 4rem;}
.event-list > li > div > div {display: flex; flex-flow: column; row-gap: .8rem; flex: 1;}
.event-list > li > div > div > p {font-size: 1.4rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; line-clamp: 1; -webkit-line-clamp: 1; -webkit-box-orient: vertical;}
.event-list > li > div > div > span {font-size: 1.2rem; color: var(--gray30);}
.event-list > li > div > ul {display: flex; align-items: center; column-gap: 2rem;}
.event-list > li > div > ul > li {text-align: center; font-size: 1.8rem; font-weight: 700; color: var(--gray5);}
.event-list > li > div > ul > li > i {width: 2.8rem; height: 2.8rem;}

.empty.event {height: calc(100dvh - 4.5rem - 2rem - 3rem - 2rem - 3.4rem);}

/* 까치같이 > 이벤트 > 상세 */
.event-type01 {display: flex; flex-flow: column; align-items: center; padding-top: 2.4rem;}
.event-type01 .tit {padding-bottom: 5.6rem;}
.event-type01 .tit img {height: 4.4rem;}
.event-type01 .tit > p {font-size: 1.4rem; font-weight: 500; color: var(--gray5); line-height: 1.6; text-align: center;}

.event-type01 .game {display: flex; flex-flow: column; row-gap: 2rem; width: 100%;}
.event-type01 .game > ul {display: flex; align-items: center; column-gap: .6rem;}
.event-type01 .game > ul > li {display: flex; align-items: center; column-gap: .6rem; font-size: 1.4rem; font-weight: 500; color: var(--gray5);}
.event-type01 .game > ul > li + li::before {content: ''; width: 1px; height: 1rem; background-color: var(--gray5);}
.event-type01 .game > div {display: flex; flex-flow: column; row-gap: 2rem;}
.event-type01 .game > div > a {display: flex; align-items: center; justify-content: center; column-gap: .4rem; font-size: 1.4rem; color: var(--gray5);}

.guess-winner {display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 1.2rem;}
.guess-winner > li input + label {height: 12rem; border-radius: .4rem; background-color: var(--gray80); border: 1px solid var(--gray70); flex-flow: column; align-items: center; justify-content: center; row-gap: 1rem;}
.guess-winner > li input + label::before {content: none;}
.guess-winner > li input + label > i {width: 4.8rem; height: 4.8rem;}
.guess-winner > li input + label > p {flex: initial; text-align: center; font-size: 1.4rem; font-weight: 500;}
.guess-winner > li input:checked + label {border-color: var(--blue50);}

.notice.event {height: calc(100dvh - 1rem - 14.4rem - 22.2rem - 4rem);}

.event-type01 .result {margin: -1.4rem 0 3rem; display: flex; align-items: center; flex-flow: column; row-gap: 4rem;}
.event-type01 .result > ul {display: flex; align-items: center; column-gap: .6rem;}
.event-type01 .result > ul > li {display: flex; align-items: center; column-gap: .6rem; font-size: 1.4rem; font-weight: 500; color: var(--gray5);}
.event-type01 .result > ul > li + li::before {content: ''; width: 1px; height: 1rem; background-color: var(--gray5);}
.event-type01 .result > div {display: flex; flex-flow: column; align-items: center; row-gap: 2rem;}
.event-type01 .result > div > div {display: flex; flex-flow: column; align-items: center; row-gap: .8rem;}
.event-type01 .result > div > div > p {font-size: 2rem; font-weight: 700; text-align: center;}
.event-type01 .result > div > div > span {font-size: 1.4rem; text-align: center;}

.event-type01 .box {width: 100%;}
.event-type01 .game-info-detail {background-color: var(--gray80); border: 1px solid var(--gray70); border-radius: .4rem; padding: 3rem 0;}

.event-type02 {display: flex; flex-flow: column; align-items: center; row-gap: 2rem; padding-top: 2.4rem;}
.event-type02 .tit {display: flex; flex-flow: column; align-items: center; row-gap: 2rem;}
.event-type02 .tit img {height: 3.2rem;}
.event-type02 .tit > p {font-size: 1.4rem; font-weight: 500; color: var(--gray5); line-height: 1.6; text-align: center;}

.event-type02 .game {position: relative; display: flex; align-items: center; justify-content: center; padding-top: 1rem; width: 100%;}
.event-type02 .game .roulette-picker {width: 5rem; height: 6rem; position: absolute; top: -0.3rem; z-index: 1; background-repeat: no-repeat; background-size: contain; background-position: center;}
.event-type02 .game .roulette-pan {overflow: hidden;}
.event-type02 .game .roulette-btn {width: 8.4rem; height: 8.4rem; padding: 0; border-radius: 100%; background-color: transparent; position: absolute; z-index: 1; background-size: contain;}

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

/* 까치같이 > 팬토크 */
.floating-btn {position: fixed; right: 2rem; bottom: 3rem; z-index: 100;}
.floating-btn button {height: 4rem; padding: 0 1.2rem; border-radius: 4rem; font-size: 1.4rem; font-weight: 500;}

.search-wrap + .notice-point {margin-top: -2rem;}
.notice-point {width: 100vw; height: 5rem; margin: 0 -1.6rem 2rem; padding: 0 1.6rem; display: flex; align-items: center; column-gap: .6rem; border-bottom: 1px solid var(--gray70);}
.notice-point > p {flex: 1; font-size: 1.4rem; font-weight: 500; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; line-clamp: 1; -webkit-line-clamp: 1; -webkit-box-orient: vertical}

.talk-list {display: flex; flex-flow: column; row-gap: 2rem;}
.talk-list > li {display: flex; flex-flow: column; row-gap: .8rem; padding-bottom: 2rem; border-bottom: 1px solid var(--gray70);}
.talk-list > li .cont {display: flex; column-gap: 2rem; justify-content: space-between;}
.talk-list > li .cont .desc {display: flex; flex-flow: column; row-gap: .6rem; flex: 1;}
.talk-list > li .cont .desc > div {font-size: 1.6rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; line-clamp: 1; -webkit-line-clamp: 1; -webkit-box-orient: vertical}
.talk-list > li .cont .desc > p {font-size: 1.4rem; color: var(--gray10); line-height: 1.4; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; line-clamp: 1; -webkit-line-clamp: 1; -webkit-box-orient: vertical}
.talk-list > li .cont .img {width: 4.8rem; height: 4.8rem; border-radius: .2rem; background-repeat: no-repeat; background-size: cover; background-position: center; border: 1px solid var(--gray30);}
.talk-list > li .info {display: flex; align-items: center; justify-content: space-between; column-gap: 2rem;}
.talk-list > li .info > div {display: flex; align-items: center; column-gap: 1rem;}
.talk-list > li .info > div .img {width: 2.8rem; height: 2.8rem; border: 1px solid var(--gray70); border-radius: 100%; background-image: url(/assets/img/player/thumbnail-img01-7940f82665200da12b11fa69a644de13.png); background-repeat: no-repeat; background-size: cover; background-position: center;}
.talk-list > li .info > div > ul {display: flex; align-items: center; column-gap: .4rem;}
.talk-list > li .info > div > ul > li {display: flex; align-items: center; column-gap: .4rem; font-size: 1.2rem; color: var(--gray30);}
.talk-list > li .info > div > ul > li {display: flex; align-items: center; column-gap: .4rem; font-size: 1.2rem; color: var(--gray30);}
.talk-list > li .info > div > ul > li + li::before {content: ''; width: 1px; height: 1rem; background-color: var(--gray50);}
.talk-list > li .info > ul {display: flex; align-items: center; column-gap: .8rem;}
.talk-list > li .info > ul > li {display: flex; align-items: center; column-gap: .2rem; font-size: 1.2rem; font-weight: 500; color: var(--gray30);}
.talk-list > li .info > ul > li > i {width: 1.2rem; height: 1.2rem;}

.empty.talk {height: calc(100dvh - 4.5rem - 6.9rem - 5rem - 2rem - 3rem - 2rem - 3.4rem);}

/* 까치같이 > 팬토크 > 작성 */
.write-wrap {display: flex; flex-flow: column;}
.write-wrap .category {width: 100vw; margin: -1rem -1.6rem 0; padding: 0 1.6rem; height: 5.6rem; display: flex; align-items: center; justify-content: space-between; border-bottom: 1rem solid var(--gray80);}
.write-wrap .category > p {font-size: 1.6rem; font-weight: 600;}
.write-wrap .category > ul {display: flex; align-items: center; border: 1px solid var(--gray50); border-radius: .2rem;}
.write-wrap .category > ul > li + li {border-left: 1px solid var(--gray50);}
.write-wrap .category > ul > li input + label {min-width: 6rem; height: 3.2rem; text-align: center; font-size: 1.2rem; font-weight: 500; color: var(--gray30); align-items: center; justify-content: center;}
.write-wrap .category > ul > li input + label::before {content: none;}
.write-wrap .category > ul > li input:checked + label {background-color: var(--gray40); font-weight: 600; color: var(--white);}
.write-wrap .write > input {background-color: transparent; width: 100vw; height: 5rem; margin: 0 -1.6rem; padding: 0 1.6rem; border: 0; border-radius: 0; font-size: 1.8rem; font-weight: 500; border-bottom: 1px solid var(--gray70);}
.write-wrap .write > textarea {height: calc(100dvh - 5.6rem - 5rem - 14.4rem - 5.8rem - 3.4rem); background-color: transparent; width: 100vw; margin: 0 -1.6rem; padding: 1.6rem; border: 0; border-radius: 0;}

.photo-wrap {border-top: 1rem solid var(--gray80); width: 100vw; margin: 0 -1.6rem; padding: 1.2rem 1.6rem 2rem; display: flex; flex-flow: column; row-gap: 1rem;}
.photo-wrap > div {display: flex; align-items: center; justify-content: space-between;}
.photo-wrap > div > p {font-size: 1.6rem; font-weight: 600; display: flex; align-items: center; column-gap: .4rem;}
.photo-wrap > div > p > span {font-size: 1.2rem; font-weight: 500; color: var(--gray40);}
.photo-wrap > div .file input + label {width: 12rem; height: 3.2rem; border: 1px solid var(--gray50); background-color: transparent; font-size: 1.2rem; color: var(--gray10);}
.photo-wrap > ul {display: flex; align-items: center; column-gap: 1rem;}
.photo-wrap > ul > li {width: 6rem; height: 6rem; padding: .4rem; border-radius: .2rem; background-image: url(/assets/img/talk/photo-default-1d1e5cc69c48bc52c64fbad4f42987a4.png); background-repeat: no-repeat; background-size: cover; background-position: center; display: flex; align-items: flex-start; justify-content: flex-end;}
.photo-wrap > ul > li > button {width: fit-content; height: fit-content; padding: 0; background-color: transparent;}

/* 까치같이 > 팬토크 > 상세 */
.talk-detail {display: flex; flex-flow: column;}
.talk-detail .tit {display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 2rem;}
.talk-detail .tit > div {display: flex; flex-flow: column; row-gap: 1.2rem;}
.talk-detail .tit > div > div {display: flex; align-items: center; column-gap: 1.2rem;}
.talk-detail .tit > div > div .img {width: 2.8rem; height: 2.8rem; border: 1px solid var(--gray70); border-radius: 100%; background-image: url(/assets/img/player/thumbnail-img01-7940f82665200da12b11fa69a644de13.png); background-repeat: no-repeat; background-size: cover; background-position: center;}
.talk-detail .tit > div > div .desc {display: flex; flex-flow: column; row-gap: .6rem;}
.talk-detail .tit > div > div .desc > p {font-size: 1.2rem; font-weight: 600; color: var(--gray5);}
.talk-detail .tit > div > div .desc > span {font-size: 1.2rem; color: var(--gray30);}
.talk-detail .tit > p {font-size: 1.2rem; color: var(--gray30);}
.talk-detail .cont {display: flex; flex-flow: column; row-gap: 1.6rem; padding-bottom: 4rem;}
.talk-detail .cont > p {font-size: 1.8rem; font-weight: 600;}
.talk-detail .cont .desc {display: flex; flex-flow: column; row-gap: 2.4rem; font-size: 1.4rem; line-height: 1.6;}
.talk-detail .cont .desc img {width: 100%;}

/* 까치같이 > 1대1 문의 */
.inquiry-wrap {margin-top: -2rem; display: flex; flex-flow: column; row-gap: 2rem;}
.inquiry-wrap .desc {width: 100vw; margin: 0 -1.6rem; padding: 0 1.6rem; border-bottom: 1rem solid var(--gray80); height: 5.8rem; display: flex; align-items: center;}
.inquiry-wrap .desc > p {font-size: 1.2rem; color: var(--gray20);}
.inquiry-wrap .desc > p > span {color: var(--white);}
.inquiry-wrap .wrap > ul {display: flex; flex-flow: column; row-gap: 2rem;}
.inquiry-wrap .wrap > ul > li {display: flex; flex-flow: column; row-gap: 1rem;}
.inquiry-wrap .wrap > ul > li > div {display: flex; align-items: center; justify-content: space-between;}
.inquiry-wrap .wrap > ul > li > div > p {font-size: 1.4rem; font-weight: 600;}
.inquiry-wrap .wrap > ul > li > div > button {width: fit-content; height: fit-content; padding: 0; font-size: 1.4rem; font-weight: 500; color: var(--gray5); background-color: transparent;}
.inquiry-wrap .wrap > ul > li .captcha {border-radius: .4rem;}
.inquiry-wrap .wrap > ul > li .captcha img {width: 100%;}

/* 구단소개 ----------------------- */
/* 구단소개 > 연혁 */
.history-wrap {display: flex; flex-flow: column; row-gap: 2.4rem; align-items: center; position: relative; padding: 1rem 0;}
.history-wrap::before {content: ''; width: 1px; height: 100%; background-color: var(--gray70); position: absolute; top: 0;}
.history-wrap > li {display: flex; flex-flow: column; row-gap: 1.6rem;}
.history-wrap > li > * {width: calc((100% - 4rem) / 2);}
.history-wrap > li > div {display: flex; flex-flow: column; row-gap: .8rem; align-items: flex-end; position: relative;}
.history-wrap > li > div::after {content: ''; width: 2rem; height: 2rem; background-image: url(/assets/img/ico/ic-history02-aed27d0a5ad751d4e613a8e9dc8afa46.svg); background-repeat: no-repeat; background-size: contain; background-position: center; position: absolute; top: 0; right: -3rem; z-index: 1;}
.history-wrap > li > div > p {font-size: 1.8rem; font-weight: 600;}
.history-wrap > li > div > span {font-size: 1.4rem;}
.history-wrap > li > div > img {width: 100%; margin-top: .4rem;}
.history-wrap > li > ul {display: flex; flex-flow: column; row-gap: 1.2rem; margin-left: auto;}
.history-wrap > li > ul > li {display: flex; flex-flow: column; row-gap: .8rem; position: relative;}
.history-wrap > li > ul > li::before {content: ''; width: .4rem; height: .4rem; border-radius: 100%; background-color: var(--white); position: absolute; top: .5rem; left: -2.3rem; z-index: 1;}
.history-wrap > li > ul > li > p {font-size: 1.4rem; font-weight: 600;}
.history-wrap > li > ul > li > span {font-size: 1.4rem; line-height: 1.2; word-break: keep-all;}

.history-wrap > li:nth-child(1) > div::after {background-image: url(/assets/img/ico/ic-history01-35d7ef7f62c38fd3ad4af64d07a10b54.svg);}

/* 구단소개 > 엠블럼/마스코트 */
.intro-wrap {display: flex; flex-flow: column; row-gap: 2rem;}
.intro-wrap > p {font-size: 1.4rem; color: var(--gray5); line-height: 1.6; word-break: keep-all;}
.intro-wrap > img {width: 100%;}
.intro-wrap > ul {background-color: var(--gray80); border-radius: .4rem; padding: 1.6rem; display: flex; flex-flow: column; row-gap: .8rem;}
.intro-wrap > ul > li {display: flex; column-gap: 2.4rem; line-height: 1.6; font-size: 1.4rem; color: var(--gray5);}
.intro-wrap > ul > li > p {font-weight: 600; width: 5.6rem;}
.intro-wrap > ul > li > span .label {display: inline-flex; margin-right: .8rem;}

/* 구단소개 > 홈구장 */
.stadium-swiper.swiper {width: 100%; height: fit-content;}
.stadium-swiper.swiper .swiper-slide {border-radius: .4rem; overflow: hidden;}
.stadium-swiper.swiper .swiper-slide img {width: 100%;}

.stadium-swiper.swiper .swiper-pagination {width: fit-content; display: flex; align-items: center; column-gap: .2rem; justify-content: center; background-color: var(--black); font-size: 1.2rem; color: rgba(255, 255, 255, .4); position: relative; top: initial; left: initial; right: initial; bottom: initial; margin: .8rem auto 0;}
.stadium-swiper.swiper .swiper-pagination > span {width: .8rem; text-align: center;}
.stadium-swiper.swiper .swiper-pagination .swiper-pagination-current {font-weight: 500; color: var(--white);}

.assist-desc {display: flex; flex-flow: column; row-gap: 1.2rem; margin-top: 2rem;}
.assist-desc > p {font-size: 1.4rem; font-weight: 600;}
.assist-desc > span {font-size: 1.4rem; line-height: 1.6; color: var(--gray5); word-break: keep-all;}
.assist-desc > button {height: 3.2rem; background-color: var(--gray70); font-size: 1.4rem;}

.seat-view {display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 1.2rem; margin-top: 2rem;}
.seat-view > li > button {height: 3.2rem; font-size: 1.4rem; padding: 0;}

/* 구단소개 > 클럽하우스 */
.intro-wrap .clubhouse {row-gap: 2rem;}
.intro-wrap .clubhouse > li {flex-flow: column; row-gap: .4rem;}
.intro-wrap .clubhouse > li + li {border-top: 1px solid var(--gray70); padding-top: 2rem;}
.intro-wrap .clubhouse > li > p {width: fit-content;}
.intro-wrap .clubhouse > li > span {word-break: keep-all;}

.partner-wrap {display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 2rem;}
.partner-wrap > li {background-color: var(--gray80); border-radius: .4rem; display: flex; align-items: center; justify-content: center;}
.partner-wrap > li > img {height: 6.3rem;}

/* 구단소개 > 조직도 */
.organization-wrap {display: flex; flex-flow: column; row-gap: 8rem;}
.organization-wrap .management {display: flex; flex-flow: column; row-gap: 4rem; align-items: center; position: relative;}
.organization-wrap .management::before {content: ''; width: 1px; height: calc(100% + 4rem); background-color: var(--gray70); position: absolute;}
.organization-wrap .management > li {width: 12.8rem; height: 4.4rem; border-radius: .4rem; display: flex; align-items: center; justify-content: center; background-color: var(--gray40); font-size: 1.4rem; font-weight: 500; z-index: 1;}
.organization-wrap .management .ceo {background-color: var(--blue50);}
.organization-wrap .team {display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 2rem; position: relative;}
.organization-wrap .team::before {content: ''; width: 1px; height: calc(100% + 4rem); background-color: var(--gray70); position: absolute; left: calc((100% - 2rem) / 4); bottom: 0; }
.organization-wrap .team::after {content: ''; width: 1px; height: calc(100% + 4rem); background-color: var(--gray70); position: absolute; right: calc((100% - 2rem) / 4); bottom: 0; }
.organization-wrap .team > li {padding: 2rem 1.2rem; background-color: var(--gray80); border-radius: .4rem; display: flex; flex-flow: column; align-items: center; row-gap: 1.2rem; position: relative; z-index: 1;}
.organization-wrap .team > li:nth-child(1)::before {content: ''; width: calc(50% + 1rem); height: 1px; background-color: var(--gray70); position: absolute; top: -4rem; left: 50%;}
.organization-wrap .team > li:nth-child(2)::before {content: ''; width: calc(50% + 1rem); height: 1px; background-color: var(--gray70); position: absolute; top: -4rem; right: 50%;}
.organization-wrap .team > li > p {text-align: center; font-size: 1.4rem; font-weight: 500; line-height: 1.4;}
.organization-wrap .team > li > span {width: 100%; padding-top: 1.2rem; border-top: 1px dashed rgba(255,255,255,.3); text-align: center; font-size: 1.2rem; line-height: 1.8; color: var(--gray30);}

/* 선수단 ----------------------- */
/* 선수단 */
.player-list {display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 2rem;}
.player-list > li {display: flex; flex-flow: column; row-gap: 1.2rem;}
.player-list > li .img {width: 100%; height: calc((100vw - 3.2rem - 2rem) / 2); border-radius: .4rem; background-image: url(/assets/img/player/player-bg-90183a38b7e9f34653a197ab4b06105d.png); background-repeat: no-repeat; background-size: cover; background-position: center; overflow: hidden; display: flex; align-items: flex-start; justify-content: center;}
.player-list > li .img img {width: 100%;}
.player-list > li .info {display: flex; align-items: center; justify-content: space-between;}
.player-list > li .info > p {font-size: 1.6rem; font-weight: 600;}
.player-list > li .info > span {font-size: 1.2rem; font-weight: 600; color: var(--gray30);}

/* 선수단 > 상세 */
.player-summary {width: 100vw; height: 26.4rem; margin: -1rem -1.6rem 2rem; padding: 4rem 1.6rem; background-image: url(/assets/img/player/player-detail-bg-e80bcda90024df87d7ec285da4067433.png); background-repeat: no-repeat; background-size: cover; background-position: center; overflow: hidden; position: relative; display: flex; align-items: flex-end;}
.player-summary .img {width: 26rem; position: absolute; bottom: 0; right: 0; display: flex; align-items: flex-start; justify-content: center;}
.player-summary .img img {width: 100%;}
.player-summary .info {display: flex; flex-flow: column; row-gap: .8rem; position: relative; z-index: 1;}
.player-summary .info > span {font-size: 1.6rem; font-weight: 600; color: var(--gray30);}
.player-summary .info > p {font-size: 2.4rem; font-weight: 600;}

.player-info {display: flex; flex-flow: column; row-gap: 1.2rem;}
.player-info > li {display: flex; align-items: center; column-gap: 2rem;}
.player-info > li > p {width: 5.6rem; font-size: 1.4rem; color: var(--gray30);}
.player-info > li > span {font-size: 1.4rem; font-weight: 500;}

.player-record-table01 {position: relative;}
.player-record-table01 tr > *:nth-child(1) {position: sticky; left: 0; z-index: 1;}
.player-record-table01 tr > *:nth-child(2) {position: sticky; left: 4rem; z-index: 1;}
.player-record-table01 tr > *:nth-child(3) {position: sticky; left: 10rem; z-index: 1;}
.player-record-table01 tr > *:nth-child(3)::before {content: ''; width: 1px; height: 100%; background-color: #272727; display: block; position: absolute; top: 0; left: initial; right: 0;}
.player-record-table01 tr > *:nth-child(3)::after {content: ''; width: 1.4rem; height: 100%; background: linear-gradient(90deg, rgba(23, 23, 23, 0.55) -10%, rgba(28, 28, 28, 0.00) 100%); display: block; position: absolute; right: -1.4rem; top: 0;}
.player-record-table01 tr > *:nth-child(3) + td::before {content: none;}

.player-record-table02 {position: relative;}
.player-record-table02 tr > *:nth-child(1) {position: sticky; left: 0; z-index: 1;}
.player-record-table02 tr > *:nth-child(1)::before {content: ''; width: 1px; height: 100%; background-color: #272727; display: block; position: absolute; top: 0; left: initial; right: 0;}
.player-record-table02 tr > *:nth-child(1)::after {content: ''; width: 1.4rem; height: 100%; background: linear-gradient(90deg, rgba(23, 23, 23, 0.55) -10%, rgba(28, 28, 28, 0.00) 100%); display: block; position: absolute; right: -1.4rem; top: 0;}
.player-record-table02 tr > *:nth-child(1) + td::before {content: none;}

/* 선수단 > 유소년 */
.youth-wrap {display: flex; flex-flow: column; row-gap: 2rem;}
.youth-wrap > p {font-size: 1.4rem; color: var(--gray5); line-height: 1.6; word-break: keep-all;}
.youth-wrap > ul {background-color: var(--gray80); border-radius: .4rem; padding: 1.6rem; display: flex; flex-flow: column; row-gap: .8rem;}
.youth-wrap > ul > li {display: flex; column-gap: 2.4rem; line-height: 1.6; font-size: 1.4rem; color: var(--gray5);}
.youth-wrap > ul > li > p {font-weight: 600; width: 6.8rem;}
.youth-wrap > ul > li > span .label {display: inline-flex; margin-right: .8rem;} 
.youth-wrap > ul > li > ul {display: flex; align-items: center; column-gap: .8rem;}


.youth-swiper.swiper {width: 100%; height: fit-content;}
.youth-swiper.swiper .swiper-slide {border-radius: .4rem; overflow: hidden;}
.youth-swiper.swiper .swiper-slide img {width: 100%;}

.youth-swiper.swiper .swiper-pagination {width: fit-content; display: flex; align-items: center; column-gap: .2rem; justify-content: center; background-color: var(--black); font-size: 1.2rem; color: rgba(255, 255, 255, .4); position: relative; top: initial; left: initial; right: initial; bottom: initial; margin: .8rem auto 0;}
.youth-swiper.swiper .swiper-pagination > span {width: .8rem; text-align: center;}
.youth-swiper.swiper .swiper-pagination .swiper-pagination-current {font-weight: 500; color: var(--white);}


/* 미디어 ----------------------- */
/* 까치레터 */
.media-filter {display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.2rem;}
.media-filter > p {font-size: 1.2rem; font-weight: 600;}
.media-filter > p > span {color: var(--blue50);}
.media-filter > ul {display: flex; align-items: center; column-gap: .4rem;}
.media-filter > ul > li {display: flex; align-items: center; column-gap: .4rem;}
.media-filter > ul > li + li::before {content: ''; width: 1px; height: 1rem; background-color: var(--gray70);}
.media-filter > ul > li > button {width: fit-content; height: fit-content; padding: 0; background-color: transparent; font-size: 1.2rem;}

.webtoon-summary {display: flex; flex-flow: column; row-gap: 1.6rem;}
.webtoon-summary .img {width: 100%; border-radius: .4rem; object-fit: cover; overflow: hidden;}
.webtoon-summary .img img {width: 100%;}
.webtoon-summary .desc {display: flex; flex-flow: column; row-gap: 1.2rem;}
.webtoon-summary .desc > p {font-size: 1.4rem; font-weight: 500;}
.webtoon-summary .desc > span {font-size: 1.2rem; color: var(--gray30); line-height: 1.6; word-break: keep-all;}

.webtoon-detail {display: flex; flex-flow: column; width: 100vw; margin: -1rem -1.6rem 0;}
.webtoon-detail .cont {display: flex; flex-flow: column;}
.webtoon-detail .cont img {width: 100%;}
.webtoon-detail .nav {margin-top: .8rem; background-color: var(--gray80); display: flex; align-items: center; justify-content: space-between; padding: 1.2rem 1.6rem; column-gap: 1rem;}
.webtoon-detail .nav > div {display: flex; align-items: center; column-gap: .8rem; flex: 1;}
.webtoon-detail .nav > div .img {width: 6rem; height: 6rem; border-radius: .4rem; background-repeat: no-repeat; background-size: cover; background-position: center;}
.webtoon-detail .nav > div > p {font-size: 1.4rem; font-weight: 500; flex: 1; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; line-clamp: 1; -webkit-line-clamp: 1; -webkit-box-orient: vertical;}
.webtoon-detail .nav > button {width: fit-content; height: fit-content; padding: 0; font-size: 1.4rem; font-weight: 500; column-gap: .2rem; background-color: transparent;}
.webtoon-detail .nav > button > i {width: 2rem; height: 2rem;}

.webtoon-active {color: var(--gray60);}

.media-list02 {display: flex; flex-flow: column; row-gap: 2rem;}
.media-list02 > li {display: flex; column-gap: 1.2rem; align-items: center;}
.media-list02 > li + li {border-top: 1px solid var(--gray70); padding-top: 2rem;}
.media-list02 > li .img {width: 15.6rem; height: 8.8rem; background-image: url(/assets/img/media/media-thumbnail01-8b881b6f4d12df25d5adf535fd07c436.png); background-repeat: no-repeat; background-size: cover; background-position: center; border-radius: .4rem;}
.media-list02 > li .desc {display: flex; flex-flow: column; row-gap: .8rem; flex: 1;}
.media-list02 > li .desc > p {font-size: 1.4rem; font-weight: 600; line-height: 1.4; word-break: keep-all; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; line-clamp: 2; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.media-list02 > li .desc > ul {display: flex; align-items: center; column-gap: .6rem;}
.media-list02 > li .desc > ul > li {display: flex; align-items: center; column-gap: .6rem; font-size: 1.2rem; color: var(--gray30);}
.media-list02 > li .desc > ul > li + li::before {content: ''; width: 1px; height: 1rem; background-color: var(--gray40);}

.media-list03 {display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 2rem;}
.media-list03 > li {height: 68vw; padding: 1.6rem; position: relative; border-radius: .4rem; overflow: hidden; display: flex; align-items: flex-end; justify-content: center; background-image: url(/assets/img/media/media-thumbnail02-b0b5d42e1c73ca33cd87f8e1653eeeb8.png); background-repeat: no-repeat; background-size: cover; background-position: center;}
.media-list03 > li::before {content: ''; width: 100%; height: 100%; display: block; background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 0.75) 100%); background-blend-mode: darken; position: absolute; top: 0; left: 0;}
.media-list03 > li .desc {width: 100%; display: flex; flex-flow: column; row-gap: 1.2rem; position: relative; z-index: 1;}
.media-list03 > li .desc > p {font-size: 1.4rem; font-weight: 600; line-height: 1.4; word-break: keep-all; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; line-clamp: 2; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.media-list03 > li .desc > ul {display: flex; align-items: center; column-gap: .6rem;}
.media-list03 > li .desc > ul > li {display: flex; align-items: center; column-gap: .6rem; font-size: 1.2rem; color: var(--gray30);}
.media-list03 > li .desc > ul > li + li::before {content: ''; width: 1px; height: 1rem; background-color: var(--gray40);}

.empty.media {height: calc(100dvh - 6.9rem - 2rem - 3.4rem);}

/* 팬 ----------------------- */
/* 원정신청 */
.away-img {width: 100vw; margin: 0 -1.6rem;}

/* 서포터즈 */
.supporters-list {display: flex; flex-flow: column; row-gap: 2rem;}
.supporters-list > li {display: flex; flex-flow: column; row-gap: 2rem;}
.supporters-list > li + li {border-top: 1px solid var(--gray70); padding-top: 2rem;}
.supporters-list > li > div {display: flex; column-gap: .8rem;}
.supporters-list > li > div .img {width: 10rem; height: 10rem; border-radius: .4rem; background-repeat: no-repeat; background-size: cover; background-position: center;}
.supporters-list > li > div .desc {display: flex; flex-flow: column; row-gap: 1.2rem; flex: 1;}
.supporters-list > li > div .desc > p {font-size: 1.6rem; font-weight: 600;}
.supporters-list > li > div .desc > span {font-size: 1.2rem; color: var(--gray5); word-break: keep-all; line-height: 1.6;}
.supporters-list > li > button {height: 3.2rem; font-size: 1.4rem; font-weight: 500; background-color: var(--gray70);}

/* 응원가 */
.song-list {display: flex; flex-flow: column;}
.song-list > li {display: flex; flex-flow: column; row-gap: 2rem;}
.song-list > li + li {border-top: 1px solid var(--gray70); padding-top: 2rem;}
.song-list > li .img {width: 100%; height: 50vw; border-radius: .4rem; background-image: url(/assets/img/media/media-thumbnail01-8b881b6f4d12df25d5adf535fd07c436.png); background-repeat: no-repeat; background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden;}
.song-list > li .img:has(i)::before {content: ''; background-color: rgba(0, 0, 0, 0.25); width: 100%; height: 100%; position: absolute; z-index: 1;}
.song-list > li .img > i {position: relative; z-index: 2;}
.song-list > li .desc {display: flex; flex-flow: column;}
.song-list > li .desc .info {display: flex; align-items: center; justify-content: space-between; margin-bottom: 2rem;}
.song-list > li .desc .info > p {font-size: 1.4rem; font-weight: 500;}
.song-list > li .desc .info > ul {display: flex; align-items: center; column-gap: 1.2rem;}
.song-list > li .desc .info > ul > li > button {width: fit-content; height: fit-content; padding: 0; background-color: transparent;}
.song-list > li .desc .lyrics {display: none; width: 100%; background-color: var(--gray80); padding: 1.6rem; font-size: 1.4rem; line-height: 1.6; word-break: keep-all;}

.song-list > li.active .desc .ic-arrow-down-20 {background-image: url(/assets/img/ico/ic-arrow-up-20-bd1031963b75a94a1f14d1d72f8bb159.svg);}
.song-list > li.active .desc .lyrics {display: block;}

/* 분실물 센터 */
.lost-list {display: flex; flex-flow: column; row-gap: 2rem;}
.lost-list > li {display: flex; flex-flow: column; row-gap: 2rem;}
.lost-list > li + li {border-top: 1px solid var(--gray70); padding-top: 2rem;}
.lost-list > li .img {width: 100%; height: 50vw; border-radius: .4rem; background-image: url(/assets/img/media/media-thumbnail01-8b881b6f4d12df25d5adf535fd07c436.png); background-repeat: no-repeat; background-size: cover; background-position: center; overflow: hidden;}
.lost-list > li > ul {display: flex; flex-flow: column;}
.lost-list > li > ul > li {display: flex; align-items: center; column-gap: 2rem;}
.lost-list > li > ul > li > p {font-size: 1.4rem; font-weight: 500; line-height: 1.8; width: 8rem;}
.lost-list > li > ul > li > span {font-size: 1.4rem; color: var(--gray5); line-height: 1.8; flex: 1;}

/* 사회공헌 ----------------------- */
/* 교육 ‧ 장학 */
.crs-banner {width: 100vw; height: 15.2rem; margin: -1rem -1.6rem 0; padding: 1rem 1.6rem; display: flex; flex-flow: column; row-gap: 1.2rem; justify-content: center; background-repeat: no-repeat; background-size: cover; background-position: center;}
.crs-banner > div {display: flex; flex-flow: column; align-items: center;}
.crs-banner > div > h2 {text-align: center; font-size: 2.4rem; font-weight: 900; text-transform: uppercase;}
.crs-banner > div > p {font-size: 1.4rem; font-weight: 500; word-break: keep-all;}
.crs-banner > p {text-align: center; font-size: 1.4rem; color: var(--gray5); text-align: center; line-height: 1.4;}

.crs-banner.banner01 {background-image: url(/assets/img/crs/crs-banner01-9c9bb0a095583416a5f30a27daf949e2.png);}
.crs-banner.banner02 {background-image: url(/assets/img/crs/crs-banner02-942ff31264fea3e9d9e4743f2074576c.png);}
.crs-banner.banner03 {background-image: url(/assets/img/crs/crs-banner03-fe9d9a6e6a1504e2709e14fd228366d7.png);}
.crs-banner.banner04 {background-image: url(/assets/img/crs/crs-banner04-094b67ef15ab480384e9450b75bbeabd.png);}

.crs-wrap {display: flex; flex-flow: column; row-gap: 2rem;}
.crs-wrap > div {display: flex; flex-flow: column; row-gap: 1.2rem;}
.crs-wrap > div > h3 {font-size: 2rem; font-weight: 600; line-height: 1.4;}
.crs-wrap > div > h3 > span {color: var(--blue50); display: block;}
.crs-wrap > div > h4 {font-size: 1.6rem; font-weight: 600;}
.crs-wrap > div > p {font-size: 1.4rem; color: var(--gray5); line-height: 1.4; word-break: keep-all;}
.crs-wrap > div > div {display: flex; flex-flow: column; row-gap: 1.2rem;}
.crs-wrap > div > div > p {font-size: 1.4rem;}
.crs-wrap > div > div > ul {background-color: var(--gray80); border-radius: .4rem; padding: 1.6rem; display: flex; flex-flow: column; row-gap: .8rem;}
.crs-wrap > div > div > ul > li {display: flex; column-gap: 2.4rem; line-height: 1.6; font-size: 1.4rem; color: var(--gray5);}
.crs-wrap > div > div > ul > li > p {font-weight: 600; width: 9.2rem;}
.crs-wrap > div > div > ul > li > span .label {display: inline-flex; margin-right: .8rem;}
.crs-wrap > img {width: 100%; border-radius: .4rem;}
.crs-wrap > button {height: 3.2rem; font-size: 1.4rem; font-weight: 500; background-color: var(--gray70);}

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

#map {width: 100vw; height: 60vw; margin: 0 -1.6rem; background-color: var(--white);}

.map-list {width: 100vw; margin: 0 -1.6rem -4rem;}
.map-list > li .info {height: 8.4rem; padding: 0 1.6rem; display: flex; flex-flow: column; row-gap: 1.2rem; justify-content: center; background-image: url(/assets/img/ico/ic-arrow-down-20-85ce341a0a14f87c68bf437d8590ee68.svg); background-size: 2rem; background-repeat: no-repeat; background-position: center right 1.6rem; border-bottom: 1px solid var(--gray70);}
.map-list > li .info > p {font-size: 1.4rem;}
.map-list > li .info > span {font-size: 1.6rem; font-weight: 600; color: var(--blue50);}
.map-list > li .desc {display: none; padding: 2rem 1.6rem; background-color: var(--gray80); flex-flow: column; row-gap: 2rem; border-bottom: 1px solid var(--gray70);}
.map-list > li .desc > p {font-size: 1.2rem; font-weight: 600;}
.map-list > li .desc > ul {display: flex; flex-flow: column; row-gap: 2rem; position: relative;}
.map-list > li .desc > ul > li {display: flex; flex-flow: column; padding-left: 3.4rem; position: relative;}
.map-list > li .desc > ul > li > p {font-size: 1.4rem; line-height: 1.6; word-break: keep-all;}
.map-list > li .desc > ul > li > span {font-size: 1.4rem; line-height: 1.6; word-break: keep-all; color: var(--gray30);}
.map-list > li .desc > ul > li > img {width: 100%; margin-top: 1rem;}

.map-list > li .desc > ul::before {content: ''; width: 1px; height: 100%; background-color: var(--gray50); display: block; position: absolute; top: 0; left: 1.4rem;}
.map-list > li .desc > ul > li::before {content: ''; width: 2.8rem; height: 2.8rem; background-repeat: no-repeat; background-size: contain; background-position: center; position: absolute; left: 0;}
.map-list > li .desc > ul > li:nth-child(1):before {background-image: url(/assets/img/ico/ic-spot-start-0cbf08a5c15cc3f1f373fb18c6cd55c2.svg);}
.map-list > li .desc > ul > li:nth-last-child(1):before {background-image: url(/assets/img/ico/ic-spot-end-342de3c3baaf1d51251a0a836246357e.svg);}
.map-list > li .desc > ul > li:not(:nth-child(1), :nth-last-child(1))::before {width: .8rem; height: .8rem; background-image: url(/assets/img/ico/ic-spot-14579930a874c28fd1338f7df2126ba3.svg); top: .8rem; left: 1rem;}

.map-list > li.active .info {background-image: url(/assets/img/ico/ic-arrow-up-20-bd1031963b75a94a1f14d1d72f8bb159.svg);}
.map-list > li.active .desc {display: flex;}

/* 까치둥지 ----------------------- */
/* 까치둥지 > 까치둥지 소개 */
.magpie-img01 {width: 100vw; margin: -2rem -1.6rem 0;}

.apply-wrap {display: flex; flex-flow: column; row-gap: 2rem;}
.apply-wrap > img {width: 100%;}
.apply-wrap > ul {display: flex; flex-flow: column; row-gap: .6rem;}
.apply-wrap > ul > li {font-size: 1.4rem; line-height: 1.4; word-break: keep-all; display: flex; column-gap: .8rem;}
.apply-wrap > ul > li::before {content: '・';}


/* 까치둥지 > 가입 기업 소개 */
.magpie-list {display: flex; flex-flow: column; row-gap: 2rem;}
.magpie-list > li {display: flex; flex-flow: column; row-gap: 2rem;}
.magpie-list > li + li {border-top: 1px solid var(--gray70); padding-top: 2rem;}
.magpie-list > li .img {width: 100%; height: 50vw; border-radius: .4rem; background-image: url(/assets/img/media/media-thumbnail01-8b881b6f4d12df25d5adf535fd07c436.png); background-repeat: no-repeat; background-size: cover; background-position: center;}
.magpie-list > li .desc {display: flex; flex-flow: column; row-gap: 1.2rem;}
.magpie-list > li .desc > p {font-size: 2rem; font-weight: 600;}
.magpie-list > li .desc > ul {display: flex; flex-flow: column;}
.magpie-list > li .desc > ul > li {display: flex; align-items: center; column-gap: 2rem; line-height: 1.6; row-gap: .8rem;}
.magpie-list > li .desc > ul > li > p {font-size: 1.4rem; font-weight: 600; width: 5.2rem;}
.magpie-list > li .desc > ul > li > span {font-size: 1.4rem; color: var(--gray5);}
.magpie-list > li .btn {display: flex; align-items: center; column-gap: 1.2rem;}
.magpie-list > li .btn > button {height: 3.2rem; font-size: 1.4rem; font-weight: 500;}
.magpie-list > li .btn > button:nth-child(2) {background-color: var(--gray70);}

.magpie-certify {display: flex; column-gap: .4rem; justify-content: space-between;}
.magpie-certify-img {width: 2.8rem; height: 2.8rem; border: 1px solid var(--gray70); border-radius: 100%; background-image: url(/assets/img/player/thumbnail-img01-7940f82665200da12b11fa69a644de13.png); background-repeat: no-repeat; background-size: cover; background-position: center;}
.magpie-certify > ul {display: flex; align-items: center; column-gap: .4rem;}
.magpie-certify > ul > li {display: flex; align-items: center; column-gap: .4rem; font-size: 1.2rem; color: var(--gray30);}
.magpie-certify > ul > li {display: flex; align-items: center; column-gap: .4rem; font-size: 1.2rem; color: var(--gray30);}

.magpie-certify > div > ul {display: flex; align-items: center; column-gap: .4rem;}
.magpie-certify > div > ul > li {display: flex; align-items: center; column-gap: .4rem; font-size: 1.2rem; color: var(--gray30);}
.magpie-certify > div > ul > li {display: flex; align-items: center; column-gap: .4rem; font-size: 1.2rem; color: var(--gray30);}

/*.magpie-certify-detail {}*/

.magpie-certify-detail-label {width: fit-content; height: 2.5rem; padding: 0 .8rem; display: flex; align-items: center; justify-content: center; border-radius: .4rem; border: 1px solid var(--gray70); background-color: var(--gray80); font-size: 1.5rem; font-weight: 600;}
.magpie-certify-detail-label.point {background-color: var(--blue50);}

.magpie-certify-detail > p {font-size: 1.5rem}

.magpie-write {width: 100vw;
    padding: 0 1.6rem; height: 5.6rem; align-items: center; justify-content: space-between; border-bottom: 1rem solid var(--gray80);
    margin: -1rem -1.6rem 6rem;
}
.magpie-write > label > p{font-size: 1.6rem; font-weight: 600; margin-top: 1rem; margin-bottom: 1rem }
.magpie-write > input {margin-bottom: 1rem;}
.magpie-write > span {color:#FF7E1B; font-size: 1.0rem; margin-top: 1rem; margin-bottom: 2rem}

/* 예매안내 ----------------------- */
/* 예매안내 > 예매하기 */
.ticket-img01 {width: 100vw; margin: -2rem -1.6rem 0;}

/* 멤버십 ----------------------- */
/* 멤버십 */
.membership-img01 {width: 100vw; margin: -2rem -1.6rem 0;}

.bottom-fixed:has(div > select)::after {height: 12.2rem;}
.bottom-fixed > div > select {margin-bottom: 2rem;}

/* 알림 ----------------------- */
/* 알림 */
.notify-list {display: flex; flex-flow: column;}
.notify-list > li {border-bottom: 1px solid var(--gray70); padding: 2rem 0; display: flex; column-gap: 1.2rem;}
.notify-list > li .img {width: 3.2rem; height: 3.2rem; border-radius: 100%; background-color: var(--gray50); background-repeat: no-repeat; background-size: cover; background-position: center;}
.notify-list > li .desc {flex: 1; display: flex; flex-flow: column; row-gap: .8rem;}
.notify-list > li .desc > p {font-size: 1.4rem; font-weight: 600; line-height: 1.4; word-break: keep-all;}
.notify-list > li .desc > span {font-size: 1.2rem; color: var(--gray30); line-height: 1.4; word-break: keep-all; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; line-clamp: 3; -webkit-line-clamp: 3; -webkit-box-orient: vertical;}
.notify-list > li.new .desc > p::after {content: ''; width: .4rem; height: .4rem; border-radius: 100%; background-color: var(--blue50); display: inline-block; margin-left: .2rem; position: relative; top: -.8rem;}

/* 마이페이지 ----------------------- */
/* 마이페이지 */
.mypage-summary {display: flex; flex-flow: column; row-gap: 1.2rem;}
.mypage-summary .profile {margin-bottom: .8rem; display: flex; align-items: center; column-gap: 1.2rem;}
.mypage-summary .profile .img {width: 5.6rem; height: 5.6rem; border-radius: 100%; background-image: url(/assets/img/mypage/profile-img01-7435f3e514531e9dda7a25f15a4e4d61.png); background-repeat: no-repeat; background-size: cover; background-position: center;}
.mypage-summary .profile .img.female {background-image: url(/assets/img/mypage/profile-female-cc72c5405814be4d62bc6d2bb9ce51a2.png);}
.mypage-summary .profile .img.male {background-image: url(/assets/img/mypage/profile-male-bdf01c083521f2f33ee3d754154cb27a.png);}
.mypage-summary .profile .desc {display: flex; flex-flow: column; row-gap: .6rem;}
.mypage-summary .profile .desc > p {font-size: 1.8rem; display: flex; align-items: center; column-gap: .6rem;}
.mypage-summary .profile .desc > p > span {font-weight: 700;}
.mypage-summary .profile .desc > p > i {margin-left: -.4rem;}
.mypage-summary .profile .desc > span {font-size: 1.2rem; color: var(--gray50);}
.mypage-summary > p {width: 100%; height: 3.6rem; text-align: center; font-size: 1.2rem; font-weight: 500; background-color: var(--gray70); border-radius: .4rem; display: flex; align-items: center; justify-content: center;}
.mypage-summary > p + span {padding-bottom: .8rem;}
.mypage-summary > span {text-align: center; font-size: 1.2rem; color: var(--gray30); line-height: 1.4; font-weight: 500; display: block;}
.mypage-summary > button {height: 3.6rem; font-size: 1.2rem; font-weight: 500; background-color: var(--gray70);}

.mypage-summary .barcode {background-color: var(--gray80); border: 1px solid var(--gray70); border-radius: .4rem;}
.mypage-summary .barcode .grade {border-bottom: 1px solid var(--gray70); display: flex; align-items: center; justify-content: space-between; column-gap: .2rem; padding: 0 1.6rem; height: 5.4rem;}
.mypage-summary .barcode .grade > div {display: flex; align-items: center; column-gap: .8rem;}
.mypage-summary .barcode .grade > div > p {font-size: 1.4rem; font-weight: 600;}
.mypage-summary .barcode .grade > button {width: fit-content; height: 2.4rem; padding: 0 .4rem; font-size: 1.2rem; font-weight: 500; background-color: var(--gray70); border-color: var(--gray60);} 
.mypage-summary .barcode .grade > button:disabled .ic-expand {background-image: url(/assets/img/ico/ic-expand-dis-b07570d803007fdd28877e358fdb5678.svg);}
.mypage-summary .barcode .desc {display: flex; flex-flow: column; row-gap: .8rem; align-items: center; padding: 2rem 0;}
.mypage-summary .barcode .desc > img {height: 4.8rem;}
.mypage-summary .barcode .desc > p {font-size: 1.2rem; font-weight: 500; text-align: center; line-height: 1.4;}

.mypage-summary .score {display: flex; flex-flow: column; row-gap: .8rem;}
.mypage-summary .score .graph {background-color: var(--gray80); border: 1px solid var(--gray70); border-radius: .4rem; padding: 2rem 1.6rem; display: flex; flex-flow: column; row-gap: .8rem;}
.mypage-summary .score .graph > p {font-size: 1.2rem; font-weight: 500; margin-bottom: .4rem;}
.mypage-summary .score .graph > div {width: 100%; height: .4rem; border-radius: .4rem; background-color: var(--gray60); display: flex; align-items: center; justify-content: flex-start;}
.mypage-summary .score .graph > div > span {height: .4rem; display: block; border-radius: .4rem; background-color: var(--blue50);}
.mypage-summary .score .graph > ul {display: flex; align-items: center; column-gap: .2rem; width: fit-content; margin-left: auto;}
.mypage-summary .score .graph > ul > li {display: flex; align-items: center; column-gap: .2rem; font-size: 1.2rem; font-weight: 500; color: var(--gray30);}
.mypage-summary .score .graph > ul > li + li::before {content: '/';}
.mypage-summary .score .graph > ul > li > p {font-weight: 600; color: var(--blue50);}

.mypage-summary .score .guide {position: relative;}
.mypage-summary .score .guide > p {display: flex; align-items: center; column-gap: .4rem; font-size: 1.2rem; font-weight: 600; color: var(--gray30); margin-left: auto; width: fit-content;}
.mypage-summary .score .guide > div {background-color: var(--gray70); border-radius: .4rem; padding: 1.6rem; display: none; flex-flow: column; row-gap: .8rem; align-items: center; width: fit-content; position: absolute; top: 2.6rem; right: 4.2rem;}
.mypage-summary .score .guide > div::before {content: ''; width: 1.4rem; height: 1.4rem; background-image: url(/assets/img/ico/ic-bubble-4b235f9aa65847755f03c1ac176bf2b2.svg); background-repeat: no-repeat; background-size: cover; background-position: center top; position: absolute; top: -.8rem; right: 4rem;}
.mypage-summary .score .guide > div > p {font-size: 1.4rem; font-weight: 600;}
.mypage-summary .score .guide > div > ul {display: flex; flex-flow: column; align-items: center;}
.mypage-summary .score .guide > div > ul > li {font-size: 1.2rem; line-height: 1.6;}
.mypage-summary .score .guide > div > ul > li > span {font-weight: 600;}
.mypage-summary .score .guide > div.active {display: flex;}

.mypage-summary.basic > p {background-color: var(--blue10); color: var(--blue50);}
.mypage-summary.vip > p {background-color: var(--point4); color: var(--point5);}

.quick-list {display: flex; flex-flow: column; row-gap: .8rem;}
.quick-list > li > a {font-size: 1.6rem; font-weight: 600; display: flex; align-items: center; column-gap: .8rem; background-color: var(--gray80); border-radius: .4rem; height: 6rem; padding: 0 1.6rem; background-image: url(/assets/img/ico/ic-arrow-right-20-606012fd7d7b912528a0082a68023ebc.svg); background-repeat: no-repeat; background-size: 2rem; background-position: center right 1.6rem;}

/* 마이페이지 > 바코드 확대 */
.barcode-wrap {width: 100vw; height: 100vh; display: flex; align-items: center; justify-content: center; position: fixed; top: 0; left: 0; z-index: 1000;}
/* perspective-origin: 50% 0%; */
.barcode-wrap > div {display: flex; flex-flow: column; row-gap: 2rem; justify-content: center; align-items: center; transform: rotate(90deg);}
.barcode-wrap > div > p {font-size: 3.2rem; font-weight: 500;}
.barcode-wrap > div > img {height: 8.8rem;}
.barcode-wrap > div > span {font-size: 2rem;}

/* 마이페이지 > 멤버십 티켓 등록 */
.mem-ticket-rotate {position: relative; width: 22rem; height: 36.4rem; margin: 0 auto; perspective: 900px; overflow: hidden; border-radius: .4rem;}
.mem-ticket-rotate .ticket {position: absolute; transition: transform .3s ease; z-index: 1; width: 100%; height: 100%; background-repeat: no-repeat; background-size: cover; background-position: center;  border: 1px solid var(--gray70);}
.mem-ticket-rotate .ticket.back {z-index: 0; padding: 0!important;}

.mem-ticket-rotate.active .ticket {transform: rotateY(-180deg); transition: transform 0.3s ease; z-index: 0;}
.mem-ticket-rotate.active .ticket.back {z-index: 1; transform: rotateY(-180deg) scaleX(-1);}

.mem-ticket-swiper.swiper {width: 100%; height: fit-content;}
.mem-ticket-swiper.swiper .swiper-slide {display: flex; flex-flow: column; row-gap: 1.2rem; align-items: center;}
.mem-ticket-swiper.swiper .swiper-slide > ul {display: flex; align-items: center; column-gap: 1.2rem;}
.mem-ticket-swiper.swiper .swiper-slide > ul > li {font-size: 1.2rem; color: var(--gray30);}
.mem-ticket-swiper.swiper .swiper-slide > ul > li.active {font-weight: 600; color: var(--blue50);}

.mem-ticket-swiper.swiper .swiper-button-prev::after,
.mem-ticket-swiper.swiper .swiper-button-next::after {content: none;}
.mem-ticket-swiper.swiper .swiper-button-prev {position: absolute; top: 16rem; bottom: initial; left: 0; right: initial; width: fit-content; height: fit-content; margin: 0;}
.mem-ticket-swiper.swiper .swiper-button-next {position: absolute; top: 16rem; bottom: initial; left: initial; right: 0; width: fit-content; height: fit-content; margin: 0;}
.mem-ticket-swiper.swiper .swiper-button-prev::before {content: ''; width: 4.6rem; height: 4.6rem; background-image: url(/assets/img/ico/ic-swiper-prev-5ea7d1a22a65a16bc35b8834a39d511a.svg);} 
.mem-ticket-swiper.swiper .swiper-button-next::before {content: ''; width: 4.6rem; height: 4.6rem; background-image: url(/assets/img/ico/ic-swiper-next-04d40d8a90196b5f14d2291bd8fa6a0b.svg);} 

.mem-ticket-swiper.swiper .swiper-pagination {position: relative; top: initial; bottom: initial; left: initial; right: initial; margin-top: 2rem; display: flex; align-items: center; column-gap: .8rem; justify-content: center;}
.mem-ticket-swiper.swiper .swiper-pagination .swiper-pagination-bullet {width: .6rem; height: .6rem; opacity: 1; border-radius: 100%; background-color: var(--gray70); margin: 0;}
.mem-ticket-swiper.swiper .swiper-pagination .swiper-pagination-bullet-active {background-color: var(--white);}

.ticket-input {display: flex; flex-flow: column; row-gap: .8rem;}
.ticket-input > li {font-size: 1.2rem; color: var(--gray30);}
.ticket-input > li:last-child {margin-top: .4rem;}

/* 마이페이지 > 설정 */
.setting-list {display: flex; flex-flow: column;}
.setting-list > li {height: 4.8rem; display: flex; align-items: center; justify-content: space-between;}
.setting-list > li + li {border-top: 1px solid var(--gray70);}
.setting-list > li > p {font-size: 1.4rem; font-weight: 500;}
.setting-list > li > div {display: flex; align-items: center; column-gap: 1.2rem; font-size: 1.4rem; font-weight: 500;}
.setting-list > li > div > button {width: 7.2rem; height: 3.2rem; background-color: var(--gray70); padding: 0; font-size: 1.4rem; font-weight: 500;}
.setting-list > li > span {flex: 1; text-align: center; font-size: 1.2rem; font-weight: 500; color: var(--gray30); margin-top: 3.2rem;}
.setting-list > li > span > a {text-decoration: underline; color: var(--gray5); font-weight: 600;}

/* 마이페이지 > 회원탈퇴 */
.withdrawal-wrap .title > h2 {font-weight: 500;}
.withdrawal-wrap > p {font-size: 1.2rem; line-height: 1.6; color: var(--gray30);}

/* 마이페이지 > 체크인 */
.checkin-desc {text-align: center; font-size: 2rem; font-weight: 600; color: var(--white); line-height: 1.4; padding-top: 1rem;}
.checkin-desc > span {color: var(--blue50);}

.checkin-wrap {display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 2rem;}
.checkin-wrap > li {display: flex; flex-flow: column; align-items: center; row-gap: .2rem;}
.checkin-wrap > li > div {display: flex; flex-flow: column; align-items: center; row-gap: .2rem; height: 2.8rem; justify-content: center;}
.checkin-wrap > li > div > span {font-size: 1.2rem; font-weight: 500; color: var(--gray30);}
.checkin-wrap > li > div > p {font-size: 1.4rem; font-weight: 500; color: var(--gray40);}

.checkin-wrap > li.on > i {background-image: url(/assets/img/ico/ic-chkin-ov-0d19c6afead5a5c82313fedca6199431.svg);}
.checkin-wrap > li.on > div > p {color: var(--white);}

.answer-img > p > img {width: 80vw!important; margin: 0 -1.6rem!important;}