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

:root {
    --background: #ffffff;

    --headline: #191919;
    --subheadline: #505050;
    --body: #767676;
    --disabled: #999999;

    --white: #ffffff;
    --black: #191919;
    --navy: #011B6A;
    --orange: #f08300;
    --red: #ff0000;

    --gray01: #cccccc;
    --gray02: #e6e6e6;
    --gray03: #f9f9f9;

    --kgc-main: #CF1F25;
    --kgc-sub: #FDF4F5;

    --sono-main: #72A3CD;
    --sono-sub: #F5F8FB;

    --lg-main: #550E10;
    --lg-sub: #F7F3F3;

    --sk-main: #AB0028;
    --sk-sub: #FDF3F5;

    --hd-main: #023370;
    --hd-sub: #F3F5F8;

    --kcc-main: #07215A;
    --kcc-sub: #F3F4F7;

    --db-main: #03662C;
    --db-sub: #F3F7F5;

    --kt-main: #E21820;
    --kt-sub: #FEF3F4;

    --pega-main: #374EA2;
    --pega-sub: #F5F7FB;

    --ss-main: #0C4DA1;
    --ss-sub: #F3F7FB;

    --kaf-main: #F8C02C;
    --kaf-sub: #FEF9EA;
}

#root {width: 100%; height: 100%;}

/* header */
header {width: 100%; min-width: 128rem; position: sticky; position: -webkit-sticky;  left: 0; top: 0; background-color: var(--white); z-index: 99;}
header .header {width: 100%; min-width: 128rem; border-bottom: 1px solid var(--gray02);}
header .header > div {width: 128rem; height: 6.3rem; margin: 0 auto; padding: 0 4rem; display: flex; align-items: center; justify-content: space-between;}
header .header > div > div {height: 100%;}
header .header > div > div:nth-child(1) {display: none; align-items: center;}
header .header > div > div:nth-child(2) {display: flex; align-items: center; column-gap: 4rem;}
header .header > div > div:nth-child(3) {display: flex; align-items: center; column-gap: 1.6rem;}
header .header > div .language {display: none;}

@media screen and (max-width: 768px) {
    header {width: 100%; min-width: initial;}
    header .header {width: 100%; min-width: initial; border-bottom: none;}
    header .header > div {width: 100%; height: 5.6rem; padding: 0 2.4rem; column-gap: 1.6rem;}
    header .header > div > div:nth-child(1) {display: flex; width: 6.2rem;}
    header .header > div > div:nth-child(3) {display: flex; width: 6.2rem; column-gap: .6rem; justify-content: flex-end;}
    header .header > div .language {display: block;}

    header .header > div > *:nth-child(1):nth-last-child(1) {width: fit-content; min-width: initial; height: fit-content; padding: 0; margin-left: auto; background-color: transparent;}
}

header .header .logo {width: 6.4rem; height: 100%; display: flex; align-items: center; justify-content: center;}
header .header .logo > a {display: flex; flex-flow: column; row-gap: .4rem; align-items: center; justify-content: center; position: relative;}
header .header .logo img {height: 2.8rem;}
header .header .logo > ul {position: absolute; top: 6.4rem; padding: 2rem; background-color: var(--white); border-radius: 1.2rem; border: 1px solid var(--black); display: none; flex-flow: column; row-gap: 1.2rem; z-index: 10;}
header .header .logo > ul > li > a {display: flex; align-items: center; column-gap: .8rem; font-size: 1.4rem; font-weight: 500; white-space: nowrap;}
header .header .logo > ul > li > a > div {width: 3.2rem; height: 3.2rem; border-radius: 100%; display: flex; align-items: center; justify-content: center;}

header .header .logo:hover > a > i {transform: rotate(180deg);}
header .header .logo:hover > ul {display: flex;}

@media screen and (max-width: 768px) {
    header .header .logo > ul {top: 5.6rem;}
}

header .header .logo > ul > li > a > div.kbl {background-color: var(--gray03);}
header .header .logo > ul > li > a > div.kgc {background-color: var(--kgc-sub);}
header .header .logo > ul > li > a > div.sono {background-color: var(--sono-sub);}
header .header .logo > ul > li > a > div.lg {background-color: var(--lg-sub);}
header .header .logo > ul > li > a > div.sk {background-color: var(--sk-sub);}
header .header .logo > ul > li > a > div.hd {background-color: var(--hd-sub);}
header .header .logo > ul > li > a > div.kcc {background-color: var(--kcc-sub);}
header .header .logo > ul > li > a > div.db {background-color: var(--db-sub);}
header .header .logo > ul > li > a > div.kt {background-color: var(--kt-sub);}
header .header .logo > ul > li > a > div.pega {background-color: var(--pega-sub);}
header .header .logo > ul > li > a > div.ss {background-color: var(--ss-sub);}

header .header > div > div > nav {height: 100%;}
header .header > div > div > nav > ul {height: 100%; display: flex; align-items: center;}
header .header > div > div > nav > ul > li {display: flex; flex-flow: column; align-items: center; height: 100%; padding: 0 2rem;}
header .header > div > div > nav > ul > li:nth-child(1) {padding-left: 0;}
header .header > div > div > nav > ul > li:nth-last-child(1) {padding-right: 0;}
header .header > div > div > nav > ul > li > a {display: flex; align-items: center; font-size: 1.6rem; line-height: 2.4rem; font-weight: 500; height: 100%;}
header .header > div > div > nav > ul > li > ul {position: absolute; top: 6.4rem; display: none; flex-flow: column; align-items: center; row-gap: 1.2rem; border: 1px solid var(--black); border-radius: .8rem; padding: 2rem; background-color: var(--white); z-index: 10;}
header .header > div > div > nav > ul > li > a:hover + ul,
header .header > div > div > nav > ul > li > ul:hover {display: flex;}
header .header > div > div > nav > ul > li > ul::before {content: ''; width: 1.4rem; height: 1rem; background-image: url(../img/ico/ic-nav-bubble.svg); background-repeat: no-repeat; background-size: contain; background-position: center bottom; position: absolute; top: -.8rem; z-index: 10;}
header .header > div > div > nav > ul > li > ul::after {content: ''; width: 1.3rem; height: .1rem; background-color: var(--white); position: absolute; top: -.1rem;}
header .header > div > div > nav > ul > li > ul > li {width: 100%;}
header .header > div > div > nav > ul > li > ul > li > a {font-size: 1.4rem; line-height: 2rem;}
header .header > div > div > nav > ul > li > ul > li > a:hover {color: var(--orange);}

@media screen and (max-width: 768px) {
    header .header > div > div > nav {display: none;}
}

header .header > div > div > a {position: relative;}
header .header > div > div > a.alarm::after {content: ''; width: .6rem; height: .6rem; background-color: var(--red); border-radius: 100%; position: absolute; top: 0; right: 0;}

@media screen and (max-width: 768px) {
    header .header > div > div > button {display: none;}
}

@media screen and (max-width: 768px) {
    header .header .mobile > button {display: flex; width: fit-content; min-width: initial; height: fit-content; padding: 0; background-color: transparent;}
    header .header .mobile .menu {display: none; width: 100vw; height: 100vh; position: fixed; top: 0; left: 0; z-index: 100; background-color: var(--white);}
    header .header .mobile .menu.active {display: block;}
    header .header .mobile .menu .option {height: 5.6rem; display: flex; align-items: center; justify-content: space-between; padding: 0 2.4rem;}
    header .header .mobile .menu .option > ul {display: flex; align-items: center; column-gap: 1.4rem;}
    header .header .mobile .menu > nav {display: flex;}
    header .header .mobile .menu > nav > ul {height: calc(100vh - 5.2rem); overflow-y: auto;}
    header .header .mobile .menu > nav .large {width: 18rem; padding-bottom: 3.4rem;}
    header .header .mobile .menu > nav .large > li {height: 5.2rem;}
    header .header .mobile .menu > nav .large > li > a {width: 100%; height: 100%; font-size: 2rem; padding: 0 3.2rem; display: flex; align-items: center;}
    header .header .mobile .menu > nav .large > li > a.active {background-color: var(--gray03); color: var(--orange); font-weight: 600;}
    header .header .mobile .menu > nav .medium {flex: 1; background-color: var(--gray03); display: flex; flex-flow: column; row-gap: .4rem; padding-bottom: 2rem;}
    header .header .mobile .menu > nav .medium > li > a,
    header .header .mobile .menu > nav .medium > li > p {height: 5.2rem; padding: 0 2rem; display: flex; align-items: center; font-size: 2rem; font-weight: 600;}
    header .header .mobile .menu > nav .medium > li > ul > li > a {height: 5.2rem; padding: 0 2rem; display: flex; align-items: center; font-size: 1.6rem; font-weight: 500; color: var(--subheadline);}
}

/* header > lnb */
header .lnb {width: 100%; min-width: 128rem; height: 4.4rem; display: none; background-color: var(--black);}
header .lnb.active {display: flex; align-items: center;}
header .lnb > div {width: 128rem; height: 100%; margin: 0 auto; padding: 0 4rem; display: flex; align-items: center; column-gap: 2rem;}
header .lnb > div > p {font-size: 1.4rem; font-weight: 600; color: var(--white); padding: 0 1.6rem; position: relative; display: flex; align-items: center;}
header .lnb > div > p::after {content: ''; width: 1px; height: 2rem; background-color: var(--subheadline); display: block; position: absolute; right: 0;}
header .lnb > div > ul {display: flex; align-items: center; column-gap: 2rem; height: 100%;}
header .lnb > div > ul > li {height: 100%;}
header .lnb > div > ul > li > a {height: 100%; font-size: 1.4rem; color: var(--gray01); position: relative; display: flex; flex-flow: column; align-items: center; justify-content: center;}
header .lnb > div > ul > li > a.active,
header .lnb > div > ul > li > a:hover {font-weight: 600; color: var(--white);}
header .lnb > div > ul > li > a.active::after,
header .lnb > div > ul > li > a:hover::after {content: ''; width: 100%; height: .2rem; background-color: var(--orange); position: absolute; bottom: 0;}

@media screen and (max-width: 768px) {
    header .lnb {width: 100%; min-width: initial; display: none; background-color: var(--white); overflow: hidden; position: relative;}
    header .lnb::after {content: ''; width: 100vw; height: 1px; background-color: var(--gray01); position: absolute; bottom: 0;}
    header .lnb > div {width: 100%; padding: 0; column-gap: 0;}
    header .lnb > div > p {font-size: 1.6rem; color: var(--black);}
    header .lnb > div > p::after {background-color: var(--gray01);}
    header .lnb > div > ul {flex: 1; overflow-y: auto; padding: 0 1.6rem; position: relative;}
    header .lnb > div > ul > li > a {font-size: 1.6rem; color: var(--disabled); white-space: nowrap;}
    header .lnb > div > ul > li > a:hover {font-weight: initial; color: var(--disabled);}
    header .lnb > div > ul > li > a.active {font-weight: 500; color: var(--black);}
    header .lnb > div > ul > li > a:hover::after {content: none;}
    header .lnb > div > ul > li > a.active::after {content: ''; background-color: var(--black); z-index: 10;}

    header .lnb > div > ul::-webkit-scrollbar {width: 0; height: 0; background-color: transparent; display: none; -ms-overflow-style: none; scrollbar-width: none;}
    header .lnb > div > ul::-webkit-scrollbar-thumb {background-color: transparent;}
    header .lnb > div > ul::-webkit-scrollbar-track {background-color: transparent;}
}


/* footer */
footer {width: 100%; min-width: 128rem; background-color: var(--black); padding: 4rem 0 5rem;}
footer .footer {width: 128rem; margin: 0 auto; padding: 0 4rem; display: flex; flex-flow: column; row-gap: 4rem;}
footer .footer .link {display: flex; justify-content: space-between; align-items: flex-start;}
footer .footer .link .fnb {display: flex; column-gap: 10rem;}
footer .footer .link .fnb > li {display: flex; flex-flow: column; row-gap: 1.2rem;}
footer .footer .link .fnb > li > p {font-size: 1.4rem; line-height: 2rem; font-weight: 500; color: var(--white);}
footer .footer .link .fnb > li > ul {display: flex; flex-flow: column; row-gap: .8rem;}
footer .footer .link .fnb > li > ul > li > a {font-size: 1.2rem; line-height: 1.6rem; font-weight: 500; color: var(--disabled);}
footer .footer .link .sns {display: flex; align-items: center; column-gap: 1.2rem;}

@media screen and (max-width: 768px) {
    footer {min-width: initial; padding: 3.2rem 0 4rem;}
    footer .footer {width: 100%; padding: 0 2rem; row-gap: 0; position: relative;}
    footer .footer .link {width: fit-content; position: absolute; top: 0; right: 2rem;}
    footer .footer .link .fnb {display: none;}
}

footer .footer .info {border-top: 1px solid var(--subheadline); padding-top: 4rem; display: flex; column-gap: 2rem; align-items: flex-start;}
footer .footer .info > div {display: flex; flex-flow: column; row-gap: .8rem; padding-top: .6rem;}
footer .footer .info > div > p {font-size: 1.2rem; line-height: 1.8rem; color: var(--disabled); word-break: keep-all;}
footer .footer .info > div > ul {display: flex; align-items: center; column-gap: 1rem; flex-wrap: wrap;}
footer .footer .info > div > ul > li {font-size: 1.2rem; line-height: 1.8rem; color: var(--disabled);}

@media screen and (max-width: 768px) {
    footer .footer .info {border-top: none; padding-top: 0; flex-flow: column; row-gap: 2rem;}
    footer .footer .info > img {width: 4.8rem; height: 2.8rem;}
    footer .footer .info > div {display: flex; flex-flow: column; row-gap: .8rem; padding-top: .6rem;}
}

/* main */
main {width: 128rem; padding: 4rem 4rem 8rem; margin: 0 auto;}

@media screen and (max-width: 768px) {
    main {width: 100%; padding: 2.4rem 2rem 4rem;}
}

/* 로그인 */
.account-wrap {width: 39rem; min-height: calc(100vh - 6.4rem - 12rem); margin: 0 auto; padding: 0 3.2rem; display: flex; flex-flow: column; align-items: center; justify-content: center; row-gap: 3.2rem;}
.account-wrap .logo {height: 4.8rem;}
.account-wrap .intro {display: flex; flex-flow: column; row-gap: 1.6rem;}
.account-wrap .intro > p {font-size: 2.4rem; line-height: 3.2rem; font-weight: 600; text-align: center; word-break: keep-all;}
.account-wrap .intro > span {font-size: 1.6rem; text-align: center; color: var(--body); line-height: 2.4rem; word-break: keep-all;}
.account-wrap .login {width: 100%; display: flex; flex-flow: column; row-gap: 1.2rem;}
.account-wrap .login > li .input {width: 100%;}
.account-wrap .login > li .input input {width: 100%;}
.account-wrap .login > li > ul {margin-top: 1.2rem;}
.account-wrap .login > li > button {width: 100%;}
.account-wrap .login > li:nth-child(4) {margin-top: 3.8rem;}
.account-wrap .login .link {display: flex; align-items: center; justify-content: center; column-gap: 1.6rem;}
.account-wrap .login .link > li {text-align: center; font-size: 1.4rem; line-height: 2rem; color: var(--subheadline); display: flex; align-items: center; column-gap: 1.6rem;}
.account-wrap .login .link > li + li::before {content: ''; width: 1px; height: 1rem; background-color: var(--gray02);}

@media screen and (max-width: 768px) {
    .account-wrap {width: 100%; min-height: initial; padding: 0 1.2rem; align-items: flex-start;}
    .account-wrap .intro > p {text-align: left;}
    .account-wrap .intro > span {text-align: left;}
    .account-wrap .login > li:nth-child(4) {margin-top: 2.8rem;}
}

/* 로그인 > 아이디 비밀번호 찾기 */
.account-find {display: flex; flex-flow: column; row-gap: 2.4rem; margin-top: 2.4rem;}
.account-find > li > p {font-size: 1.6rem; font-weight: 600;}
.account-find > li > span {font-size: 1.4rem; line-height: 2rem; font-weight: 500; color: var(--subheadline); display: block; margin-top: .4rem;}
.account-find > li > div {margin-top: 1.2rem; display: flex; align-items: center; column-gap: 1.2rem;}
.account-find > li > div .input {flex: 1;}
.account-find > li > div .input input {width: 100%;}
.account-find > li > div > button {width: 9.2rem;}
.account-find > li .warning {margin-top: .8rem; justify-content: space-between;}
.account-find > li .warning.hidden {visibility: hidden; height: 0; margin-top: 0;}
.account-find > li .warning > p {font-size: 1.2rem; line-height: 1.6rem; color: var(--red);}
.account-find > li .warning > p:nth-child(2) {color: var(--body);}
.account-find > li .warning > p:nth-child(2) > span {color: var(--red);}

.tab-style1 + .account-find {margin-top: 0;}

@media screen and (max-width: 768px) {
    .tab-style1 + .account-find {margin-top: 2.4rem;}
}

.account-result {flex: 1; display: flex; align-items: center; justify-content: center;}
.account-result > p {text-align: center; font-size: 1.6rem; line-height: 2.4rem; color: var(--subheadline);}
.account-result > p > span {font-weight: 500; color: var(--orange);}

/* 회원가입 */
.join-type {margin-top: 4.8rem; width: 100%; display: flex; flex-flow: column; row-gap: 1.2rem;}
.join-type > li > button {width: 100%;}

.join-wrap {width: 39rem; min-height: calc(100vh - 6.4rem - 12rem); margin: 0 auto; display: flex; flex-flow: column; align-items: center; justify-content: center;}
.join-wrap .title {text-align: center; margin-bottom: 1.6rem;}
.join-wrap .title + p {text-align: center; font-size: 1.6rem; line-height: 2.4rem; color: var(--body); margin-bottom: 2rem;}
.join-wrap .mid-title > h3 {display: block;}

@media screen and (max-width: 768px) {
    .join-wrap {width: 100%; min-height: initial; padding: 0 1.2rem; align-items: flex-start;}
}

.join-step {width: 100%; height: 7rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; column-gap: .4rem; border-bottom: 1px solid var(--gray01); margin-bottom: 2.4rem;}
.join-step > li {display: flex; align-items: center; column-gap: .4rem; font-size: 1.6rem; line-height: 2.4rem; color: var(--disabled);}
.join-step > li.active {font-weight: 600; color: var(--black);}
.join-step > li + li::before {content: ''; width: 2.4rem; height: 2.4rem; background-image: url(../img/ico/ic-join-step.svg); background-repeat: no-repeat; background-size: contain; background-position: center;}

@media screen and (max-width: 768px) {
    .join-step {width: 100vw; margin: 0 -2rem 2.4rem;}
    .join-step > li {display: flex; align-items: center; column-gap: .4rem; font-size: 1.6rem; line-height: 2.4rem; color: var(--disabled);}
    .join-step > li.active {font-weight: 600; color: var(--black);}
    .join-step > li + li::before {content: ''; width: 2.4rem; height: 2.4rem; background-image: url(../img/ico/ic-join-step.svg); background-repeat: no-repeat; background-size: contain; background-position: center;}
}

/* 회원가입 > 약관동의 */
.terms-chk {display: flex; flex-flow: column; row-gap: 2rem; margin: 0 auto; padding: 0 2rem;}
.terms-chk > li {display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; grid-gap: .8rem;}
.terms-chk > li > span {display: block; width: 100%; padding-left: 2.8rem; padding-right: 4rem; font-size: 1.2rem; line-height: 1.6rem; color: var(--body); word-break: keep-all;}
.terms-chk > li > button {width: fit-content; min-width: initial; height: fit-content; padding: 0; background-color: transparent;}
.terms-chk > li > input[type='checkbox'] + label {max-width: 80%;}
.terms-chk > li.all {border-top: 1px solid var(--gray02); padding-top: 2rem;}

.join-type-btn {width: 100%; display: flex; align-items: center; justify-content: center; column-gap: 1.2rem; margin-top: 5rem; padding: 0 3.2rem;}
.join-type-btn > button {width: calc((100% - 1.2rem) / 2);}

@media screen and (max-width: 768px) {
    .terms-chk {padding: 0;}
    .join-type-btn {padding: 0;}
}

/* 회원가입 > 정보입력 */
.join-wrap .cont-box {width: 100%; margin: 0 auto; padding: 0 2rem;}
.join-wrap .cont-box + .cont-box {margin-top: 5rem; border-top: 1.2rem solid var(--gray03); padding-top: 5rem;}
.join-wrap .cont-box .box + .box,
.join-wrap .cont-box .pop + .box {margin-top: 4rem;}
.join-wrap .cont-box .mid-title + span {margin-top: -.4rem; font-size: 1.2rem; line-height: 1.6rem; color: var(--body); display: block;}

.join-wrap .pop .cont-box {padding: 0;}

@media screen and (max-width: 768px) {
    .join-wrap {padding: 0;}
    .join-wrap .cont-box {width: 100%; padding: 0;}
    .join-wrap .cont-box + .cont-box {width: 100vw; margin: 4rem -2rem 0; padding: 4rem 2rem 0;}

    .join-wrap .btn-wrap {margin: 4rem -2rem -4rem;}
}

.join-wrap .cont-box .info {display: flex; flex-flow: column; row-gap: 2rem;}
.join-wrap .cont-box .info > li {display: flex; align-items: center; column-gap: 1.2rem;}
.join-wrap .cont-box .info > li > div > *:nth-child(1):nth-last-child(2) ~ button {width: 100%;}
.join-wrap .cont-box .info > li > div {width: 100%; display: flex; flex-flow: column; row-gap: .8rem;}
.join-wrap .cont-box .info > li > div .input {width: 100%;}
.join-wrap .cont-box .info > li > div .input > input {width: 100%;}
.join-wrap .cont-box .info > li > div > p {font-size: 1.6rem; font-weight: 500; line-height: 2.4rem; color: var(--subheadline);}
.join-wrap .cont-box .info > li > div .button {display: flex; align-items: center; column-gap: 1.2rem;}
.join-wrap .cont-box .info > li > div .button .input {flex: 1;}
.join-wrap .cont-box .info > li > div .button > button {width: 9.2rem; white-space: nowrap;}
.join-wrap .cont-box .info > li .birth {flex: 1;}
.join-wrap .cont-box .info > li .gender {width: 14rem;}
.join-wrap .cont-box .info > li .gender .dropdown {width: 100%;}
.join-wrap .cont-box .info > li .guide > p {font-size: 1.2rem; line-height: 1.6rem; color: var(--body);}
.join-wrap .cont-box .info > li .warning {margin-top: .8rem; justify-content: space-between;}
.join-wrap .cont-box .info > li .warning.hidden {visibility: hidden; margin-top: -.8rem; height: 0;}
.join-wrap .cont-box .info > li .warning > p {font-size: 1.2rem; color: var(--red);}
.join-wrap .cont-box .info > li .warning > p:nth-child(2) {color: var(--body);}
.join-wrap .cont-box .info > li .warning > p:nth-child(2) > span {color: var(--red);}

.join-wrap .cont-box .info > li .address {display: flex; flex-flow: column; row-gap: .8rem;}
.join-wrap .cont-box .info > li .address > li {display: flex; align-items: center; column-gap: .8rem;}
.join-wrap .cont-box .info > li .address > li > input {height: 5.6rem; padding: 0 1.8rem; font-size: 1.6rem; border-radius: 1.2rem;}
.join-wrap .cont-box .info > li .address > li > button {width: 14rem; height: 5.6rem; padding: 0 1.8rem; font-size: 1.6rem; border-radius: 1.2rem;}

.join-wrap .cont-box .terms-chk {padding: 0; margin-top: 2rem; border-top: 1px solid var(--gray02); padding-top: 3.2rem;}
.join-wrap .cont-box .marketing-chk {margin-top: 3.2rem; background-color: var(--gray03); border-radius: 1.2rem; padding: 2rem; display: flex; flex-flow: column; row-gap: 1.6rem;}
.join-wrap .cont-box .marketing-chk > p {font-size: 1.4rem; font-weight: 500;}

@media screen and (max-width: 768px) {
    .join-wrap .cont-box .marketing-chk > ul {flex-wrap: wrap; grid-gap: .8rem 1.6rem;}
}

.join-wrap .foreigner {display: flex; flex-flow: column; row-gap: 1.2rem;}
.join-wrap .foreigner > li {display: flex; align-items: center; grid-gap: .8rem 1.2rem; flex-wrap: wrap;}
.join-wrap .foreigner > li:nth-child(1) {flex-wrap: nowrap;}
.join-wrap .foreigner > li .react-international-phone-input-container {display: flex; align-items: center; flex: 1; width: calc(100% - 9.2rem - 1.2rem); position: relative;}
.join-wrap .foreigner > li .react-international-phone-input {flex: 1; min-width: initial; border-radius: 0 1.2rem 1.2rem 0; width: 100%;}
.join-wrap .foreigner > li .react-international-phone-country-selector-button {min-width: fit-content; padding: 0; border-radius: 1.2rem 0 0 1.2rem; background-color: transparent; border-color: var(--gray01); border-right: 0;}
.join-wrap .foreigner > li .react-international-phone-country-selector-button .react-international-phone-country-selector-button__button-content {display: flex; align-items: center; padding-left: 1.2rem; padding-right: .4rem; column-gap: .4rem;}
.join-wrap .foreigner > li .react-international-phone-country-selector-button .react-international-phone-flag-emoji {width: 2rem; height: 2rem;}
.join-wrap .foreigner > li .react-international-phone-country-selector-button .react-international-phone-country-selector-button__dropdown-arrow {width: 2.4rem; height: 2.4rem; background-image: url(../img/ico/ic-dropdown.svg); background-repeat: no-repeat; background-size: contain; background-position: center;}
.join-wrap .foreigner > li .react-international-phone-country-selector-button--active {border-color: var(--black); position: relative;}
.join-wrap .foreigner > li .react-international-phone-country-selector-button--active::after {content: ''; width: 1px; height: 100%; background-color: var(--black); position: absolute; top: 0; right: -1px;}
.join-wrap .foreigner > li .react-international-phone-country-selector ul {position: absolute; top: 5.5rem; left: 0; width: calc(100% + 1px); display: flex; flex-flow: column; border-radius: 1.2rem; background-color: var(--white); border: 1px solid var(--black); z-index: 10; padding: .4rem 0; max-height: 16rem; overflow-y: auto;}
.join-wrap .foreigner > li .react-international-phone-country-selector ul > li {display: flex; align-items: center; column-gap: .4rem; width: 100%; background-color: var(--white); color: var(--black); padding: .4rem 1rem; cursor: pointer; column-gap: .4rem;}
.join-wrap .foreigner > li .react-international-phone-country-selector ul > li:hover {background-color: var(--gray03);}
.join-wrap .foreigner > li .react-international-phone-country-selector ul > li > img {width: 2.4rem; height: 2.4rem;}
.join-wrap .foreigner > li .react-international-phone-country-selector ul > li > span {font-size: 1.4rem; line-height: 2rem;}

.join-wrap .foreigner > li .input {flex: 1;}
.join-wrap .foreigner > li > button {width: 9.2rem; white-space: nowrap;}
.join-wrap .foreigner > li > p {display: block; width: 100%; font-size: 1.2rem; font-weight: 1.6rem; color: var(--body); text-align: right;}
.join-wrap .foreigner > li > p > span {color: var(--red);}

/* 회원가입 > 정보입력 > my team */
.my-team {width: 100%; height: 10.4rem; padding: 0 2rem; display: flex; align-items: center; column-gap: 1rem; border-radius: 1.2rem;}
.my-team > i {width: 8.8rem; height: 8.8rem;}
.my-team > div {display: flex; align-items: center; column-gap: 2.4rem; color: var(--white);}
.my-team > div > p {font-size: 2rem; font-weight: 600; width: 3.6rem; text-align: center;}
.my-team > div > p > span {font-size: 1.4rem; font-weight: 400;}
.my-team > div > ul {display: flex; align-items: center; column-gap: 2.4rem;}
.my-team > div > ul > li {width: 2.5rem; display: flex; align-items: center; justify-content: center; flex-flow: column; row-gap: .4rem;}
.my-team > div > ul > li > p {font-size: 1.4rem; line-height: 2rem; color: rgba(255,255,255,.75);}
.my-team > div > ul > li > span {display: block; text-align: center; font-size: 2rem; line-height: 2.8rem; font-weight: 600;}

.my-team.mobile {display: none;}

@media screen and (max-width: 768px) {
    .my-team.mobile {display: flex;}
}

.my-team.kbl {background-color: var(--gray03);}
.my-team.kbl > div {color: var(--black);}

.my-team.kgc {background-color: var(--kgc-main);}
.my-team.lg {background-color: var(--lg-main);}
.my-team.sk {background-color: var(--sk-main);}
.my-team.hd {background-color: var(--hd-main);}
.my-team.sono {background-color: var(--sono-main);}
.my-team.kcc {background-color: var(--kcc-main);}
.my-team.db {background-color: var(--db-main);}
.my-team.kt {background-color: var(--kt-main);}
.my-team.pega {background-color: var(--pega-main);}
.my-team.ss {background-color: var(--ss-main);}


.my-team .ic-emblem.kgc {background-image: url(../img/ico/logo/ic-kgc-dark-line.svg);}
.my-team .ic-emblem.lg {background-image: url(../img/ico/logo/ic-lg-dark.svg);}
.my-team .ic-emblem.sk {background-image: url(../img/ico/logo/ic-sk-dark.svg);}
.my-team .ic-emblem.hd {background-image: url(../img/ico/logo/ic-hd-dark.svg);}
.my-team .ic-emblem.sono {background-image: url(../img/ico/logo/ic-sono-dark.svg);}
.my-team .ic-emblem.kcc {background-image: url(../img/ico/logo/ic-kcc-dark.svg);}
.my-team .ic-emblem.db {background-image: url(../img/ico/logo/ic-db-dark.svg);}
.my-team .ic-emblem.kt {background-image: url(../img/ico/logo/ic-kt-dark.svg);}
.my-team .ic-emblem.pega {background-image: url(../img/ico/logo/ic-pega-dark.svg);}
.my-team .ic-emblem.ss {background-image: url(../img/ico/logo/ic-ss-dark.svg);}

/* 회원가입 > 정보입력 > my player */
.my-player > ul {display: flex; align-items: center; justify-content: center; column-gap: 1.2rem; width: fit-content; min-width: 100%; position: relative; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%);}
.my-player > ul > li {width: 12rem; height: 15.2rem; border-radius: .8rem; display: flex; flex-flow: column; row-gap: .6rem; overflow: hidden; background-color: var(--gray03);}
.my-player > ul > li .name {display: flex; align-items: center; column-gap: .6rem; padding: 1rem .8rem 0;}
.my-player > ul > li .name > p {flex: 1; font-size: 1.4rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.my-player > ul > li .img {width: 100%; height: calc(100% - 3.4rem - .6rem); overflow: hidden; display: flex; align-items: flex-start; justify-content: center;}
.my-player > ul > li .img > img {width: 100%;}
.my-player > ul > li.add > button {width: 100%; min-width: initial; height: 100%; flex-flow: column; row-gap: 3.4rem; padding: 0; background-color: transparent;}
.my-player > ul > li.add > button > p {font-size: 1.4rem; line-height: 2rem; font-weight: 500; color: var(--body);}
.my-player > ul > li.add:nth-child(1):nth-last-child(1) {margin-right: auto;}

@media screen and (max-width: 768px) {
    .my-player {width: 100vw; margin: 0 -2rem; padding: 0 2rem; overflow-y: auto;}
    .my-player > ul {justify-content: flex-start; left: initial; -webkit-transform: initial; -moz-transform: initial; -ms-transform: initial; -o-transform: initial; transform: initial; overflow-y: auto;}
    .my-player > ul > li.add:nth-child(1):nth-last-child(1) {margin-right: initial;}
}

.my-player > ul > li.kbl {background-color: var(--gray03);}
.my-player > ul > li.kgc {background-color: var(--kgc-sub);}
.my-player > ul > li.sono {background-color: var(--sono-sub);}
.my-player > ul > li.lg {background-color: var(--lg-sub);}
.my-player > ul > li.sk {background-color: var(--sk-sub);}
.my-player > ul > li.hd {background-color: var(--hd-sub);}
.my-player > ul > li.kcc {background-color: var(--kcc-sub);}
.my-player > ul > li.db {background-color: var(--db-sub);}
.my-player > ul > li.kt {background-color: var(--kt-sub);}
.my-player > ul > li.pega {background-color: var(--pega-sub);}
.my-player > ul > li.ss {background-color: var(--ss-sub);}

/* 회원가입 > 가입완료 */
.join-wrap .account-wrap {min-height: fit-content; padding-top: 6rem;}

@media screen and (max-width: 768px) {
    .join-wrap .account-wrap {padding: 6rem 0 0; align-items: center;}
    .join-wrap .account-wrap .intro > p {text-align: center;}
    .join-wrap .join-type {margin-top: 2.8rem;}
}

/* 메인 > 일정 정보(경기 일정) */
.schedule-info + .layout .side {position: relative; top: initial;}
.play-swiper-wrap {width: 100vw; min-width: 128rem; margin: -4rem auto 4rem; padding: 1.6rem 0; display: flex; align-items: center; background-color: var(--gray03); position: relative; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); overflow: hidden;}
.play-swiper-wrap .empty {height: 15.2rem; margin: 0 auto; width: fit-content;}
.play-swiper-wrap .empty > p {font-size: 1.4rem; line-height: initial;}
.play-swiper.swiper {width: 128rem; padding: 0 4rem; margin: 0 auto; overflow: initial;}
.play-swiper.swiper .swiper-slide {width: 26rem; padding: 1.6rem; display: flex; flex-flow: column; row-gap: 1.2rem; background-color: var(--white); border: 1px solid var(--gray02); border-radius: 1.2rem; filter: drop-shadow(0px 6px 12px rgba(25, 25, 25, 0.05)); position: relative; overflow: hidden;}
.play-swiper.swiper .swiper-slide .info {display: flex; align-items: center; justify-content: space-between; margin-bottom: -.4rem;}
.play-swiper.swiper .swiper-slide .info > p {font-size: 1.2rem; line-height: 1.6rem; color: var(--subheadline);}
.play-swiper.swiper .swiper-slide .info > div {display: flex; align-items: center; column-gap: .4rem;}
.play-swiper.swiper .swiper-slide .info > div > button {z-index: 20; width: fit-content; height: fit-content; min-width: fit-content; padding: 0; background-color: transparent;}
.play-swiper.swiper .swiper-slide .info > div > button > i {width: 2rem; height: 2rem;}
.play-swiper.swiper .swiper-slide .versus {display: flex; flex-flow: column; row-gap: .4rem;}
.play-swiper.swiper .swiper-slide .versus > li {display: flex; align-items: center; justify-content: space-between;}
.play-swiper.swiper .swiper-slide .versus > li > div .team-name {column-gap: .8rem;}
.play-swiper.swiper .swiper-slide .versus > li > div .team-name > i {width: 3.2rem; height: 3.2rem;}
.play-swiper.swiper .swiper-slide .versus > li > p {text-align: right; font-size: 1.4rem; line-height: 2rem; color: var(--disabled); font-weight: 600;}
.play-swiper.swiper .swiper-slide .versus > li.win > p {color: var(--black);}
.play-swiper.swiper .swiper-slide .desc {display: flex; align-items: center; justify-content: space-between;}
.play-swiper.swiper .swiper-slide .desc .channel {display: flex; align-items: flex-start; column-gap: .8rem;}
.play-swiper.swiper .swiper-slide .desc .channel img {height: 1.2rem;}
.play-swiper.swiper .swiper-slide .desc .channel > p {font-size: 1.4rem; line-height: 2.4rem; flex: 1; color: var(--subheadline);}

@media screen and (max-width: 768px) {
    .schedule-info {margin-bottom: 4rem;}
    .schedule-info .title {margin-bottom: 2rem;}
    .play-swiper-wrap {min-width: initial; margin: 0 -2rem; padding: 0; background-color: transparent; left: initial; -webkit-transform: initial; -moz-transform: initial; -ms-transform: initial; -o-transform: initial; transform: initial}
    .play-swiper.swiper {width: 100%; padding: 0 2rem; margin: 0;}
    .play-swiper.swiper .swiper-slide {filter: initial;}
}

.play-swiper.swiper .swiper-slide .btn {display: none; width: 100%; height: 100%; column-gap: .8rem; background-color: rgba(255,255,255,.85); align-items: center; justify-content: center; padding: 1.6rem; position: absolute; top: 0; left: 0;}
.play-swiper.swiper .swiper-slide .btn > button {padding: 0;}
.play-swiper.swiper .swiper-slide .btn > button:nth-child(1) {width: 7.2rem;}
.play-swiper.swiper .swiper-slide .btn > button:nth-child(2) {width: 6rem;}
.play-swiper.swiper .swiper-slide .btn > button:nth-child(3) {width: 8rem;}

.play-swiper.swiper .swiper-slide:hover .btn {display: flex;}

@media screen and (max-width: 768px) {
    .play-swiper.swiper .swiper-slide:hover .btn {display: none;}
    .play-swiper-wrap.active .play-swiper.swiper .swiper-slide .btn {display: flex; height: fit-content; background-color: transparent; padding: 0; position: relative; top: initial; left: initial; padding-top: 1.2rem; border-top: 1px solid var(--gray02);}
}

.play-swiper-wrap .play-swiper-btn {position: absolute; width: 6.4rem; height: 6.4rem; margin: 0; border-radius: 100%; background-repeat: no-repeat; background-size: contain; filter: drop-shadow(0px 2px 6px rgba(25, 25, 25, 0.15)); cursor: pointer; z-index: 10;}
.play-swiper-wrap .play-swiper-btn.prev {left: -3.2rem; right: initial; background-image: url(../img/ico/paly-swiper-prev.svg); background-position: center right;}
.play-swiper-wrap .play-swiper-btn.next {left: initial; right: -3.2rem; background-image: url(../img/ico/paly-swiper-next.svg); background-position: center left;}
.play-swiper-wrap .play-swiper-btn::after {content: none;}

@media screen and (max-width: 768px) {
    .play-swiper-wrap .play-swiper-btn {display: none;}
}

/* 메인 > 콘텐츠 */
.layout.main .cont-box.mobile {display: none;}
.layout.main .cont-box.mobile + .cont-box {margin-top: 0;}
.layout.main .cont-box:not(.mobile) ~ .cont-box.mobile + .cont-box {margin-top: 5rem;}

@media screen and (max-width: 768px) {
    .layout.main .mid-title {margin-bottom: 2rem;}
    .layout.main .mid-title h3 {font-size: 2.4rem; line-height: 3.2rem;}

    .layout.main .cont-box + .cont-box {margin: 4rem -2rem 0; border-top: 1.2rem solid var(--gray03); padding: 4rem 2rem 0;}
    .layout.main .pop + .cont-box {margin: 4rem -2rem 0; border-top: 1.2rem solid var(--gray03); padding: 4rem 2rem 0;}
    .layout.main .cont-box.desktop {display: none;}
    .layout.main .cont-box.mobile {display: block;}

    .layout.main .cont-box.mobile + .cont-box {margin-top: 4rem;}
    .layout.main .cont-box:not(.mobile) ~ .cont-box.mobile + .cont-box {margin-top: 4rem;}
}

/* 메인 > 메인 배너 */
.main-banner {position: relative; display: flex; align-items: center;}
.main-banner .main-banner-swiper.swiper {width: 100%; height: 44rem; border-radius: 1.2rem; overflow: hidden;}
.main-banner .main-banner-swiper.swiper .swiper-slide {width: 100%; height: 100%; padding: 5rem 10rem; display: flex; flex-flow: column; justify-content: center; row-gap: 4rem; background-repeat: no-repeat; background-size: cover; background-position: center; overflow: hidden; position: relative;}
.main-banner .main-banner-swiper.swiper .swiper-slide::before {content: ''; width: 100%; height: 15.8rem; background: linear-gradient(180deg, rgba(25, 25, 25, 0.00) 0%, #191919 100%); position: absolute; bottom: 0; left: 0; z-index: 0;}
.main-banner .main-banner-swiper.swiper .swiper-slide > a {display: flex; flex-flow: column; row-gap: .8rem; position: relative; z-index: 1; padding-bottom: 2rem;}
.main-banner .main-banner-swiper.swiper .swiper-slide > a > span {font-size: 2rem; line-height: 2.8rem; font-weight: 500; color: var(--white);}
.main-banner .main-banner-swiper.swiper .swiper-slide > a > p {width: 36rem; font-size: 2.8rem; font-weight: 600; line-height: 3.6rem; color: var(--white); word-break: keep-all;}
/* .main-banner .main-banner-swiper.swiper .swiper-slide > a {display: flex; align-items: center; column-gap: .4rem; font-size: 1.4rem; line-height: 2rem; color: var(--white); position: relative; z-index: 1;} */

.main-banner .swiper-pagination {top: initial!important; bottom: 2rem!important; left: initial!important; display: flex; align-items: center; justify-content: center; column-gap: .8rem;}
.main-banner .swiper-pagination .swiper-pagination-bullet {opacity: 1; width: .6rem; height: .6rem; background-color: rgba(255, 255, 2555, .3); margin: 0!important;}
.main-banner .swiper-pagination .swiper-pagination-bullet-active {width: .8rem; height: .8rem; background-color: var(--white);}

.main-banner .swiper-button {width: 4rem; height: 4rem; border-radius: initial; filter: none;}
.main-banner .swiper-button.prev {left: 3rem; width: 4rem; height: 4rem; background-image: url(../img/ico/main-banner-swiper-prev.svg);}
.main-banner .swiper-button.next {right: 3rem; width: 4rem; height: 4rem; background-image: url(../img/ico/main-banner-swiper-next.svg);}

.main-banner .main-banner-swiper-list.swiper {position: absolute; bottom: 3rem; padding: 0 4rem; width: 100%;}
.main-banner .main-banner-swiper-list.swiper .swiper-slide {width: 18rem; height: 9.8rem; padding: .8rem; display: flex; align-items: center; justify-content: center; border-radius: .8rem; overflow: hidden; border: 1px solid rgba(0, 0, 0, 0.7); background-repeat: no-repeat; background-size: 102% 102%; background-position: center; position: relative; cursor: pointer;}
.main-banner .main-banner-swiper-list.swiper .swiper-slide::before {content: ''; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.7); position: absolute; top: 0; left: 0; z-index: 0;}
.main-banner .main-banner-swiper-list.swiper .swiper-slide > p {text-align: center; font-size: 1.6rem; line-height: 2.4rem; font-weight: 600; color: var(--gray01); position: relative; z-index: 1; word-break: keep-all;}

.main-banner .main-banner-swiper-list.swiper .swiper-slide-thumb-active {border-color: var(--white);}
.main-banner .main-banner-swiper-list.swiper .swiper-slide-thumb-active > p {font-weight: 600; color: var(--white);}

/* 메인 > 플레이오프 */
.playoff-wrap.main  > div > div > p {color: var(--white);}

@media screen and (max-width: 768px) {
    .playoff-wrap.main {margin: 0 -2rem;}
}

/* 메인 > 공지사항(모바일) */
@media screen and (max-width: 768px) {
    .notice-swiper-wrap {margin: 0 -2rem;}
    .notice-swiper-wrap .notice-swiper.swiper {padding: 2rem; margin: -2rem 0;}
    .notice-swiper-wrap .notice-swiper.swiper .swiper-slide {width: 15.8rem;}
    .notice-swiper-wrap .notice-swiper.swiper .swiper-slide > a {width: 100%; padding: 2rem; display: flex; flex-flow: column; row-gap: 1.2rem; border-radius: .8rem; background-color: var(--white); border: 1px solid var(--gray02); filter: drop-shadow(0px 6px 12px rgba(25, 25, 25, 0.05));}
    .notice-swiper-wrap .notice-swiper.swiper .swiper-slide > a > p {height: 4rem; font-size: 1.4rem; line-height: 2rem; font-weight: 500; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; line-clamp: 2; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
    .notice-swiper-wrap .notice-swiper.swiper .swiper-slide > a > span {font-size: 1.2rem; line-height: 1.6rem; color: var(--body);}
}

/* 메인 > 챌린지 배너(모바일) */
@media screen and (max-width: 768px) {
    .layout.main .cont-box + .cont-box.challenge-banner {padding-top: 1.6rem; margin-bottom: -2.4rem;}
    .challenge-banner img {width: 100%;}
}

/* 메인 > MY PLAYER */
.empty.main {height: 24rem;}

.my-player-swiper-wrap {position: relative; display: flex; align-items: center;}
.my-player-swiper-wrap .my-player-swiper.swiper {width: 100%;}
.my-player-swiper-wrap .my-player-swiper.swiper .swiper-wrapper {padding-bottom: 3.6rem;}
.my-player-swiper-wrap .my-player-swiper.swiper .swiper-slide {padding: 2rem 2.4rem; background-color: var(--white); border: 1px solid var(--gray02); border-radius: 1.2rem;}
.my-player-swiper-wrap .my-player-swiper.swiper .swiper-slide > i {width: 6.6rem; height: 4rem; margin-bottom: 2.4rem;}
.my-player-swiper-wrap .my-player-swiper.swiper .swiper-slide > p {width: 100%; margin-bottom: .8rem; font-size: 2rem; line-height: 2.8rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; line-clamp: 1; -webkit-line-clamp: 1; -webkit-box-orient: vertical;}
.my-player-swiper-wrap .my-player-swiper.swiper .swiper-slide .intro {display: flex; height: 14.6rem;}
.my-player-swiper-wrap .my-player-swiper.swiper .swiper-slide .intro .info {flex: 1;}
.my-player-swiper-wrap .my-player-swiper.swiper .swiper-slide .intro .info > p {font-size: 1.2rem; line-height: 2.4rem; color: var(--body);}
.my-player-swiper-wrap .my-player-swiper.swiper .swiper-slide .intro .info > p > span {font-size: 1.6rem; font-weight: 600;}
.my-player-swiper-wrap .my-player-swiper.swiper .swiper-slide .intro .info > ul {margin-top: 2.4rem;}
.my-player-swiper-wrap .my-player-swiper.swiper .swiper-slide .intro .info > ul > li {font-size: 1.4rem; line-height: 2rem; color: var(--body);}
.my-player-swiper-wrap .my-player-swiper.swiper .swiper-slide .intro .img {width: 12rem; height: 14.6rem; background-repeat: no-repeat; background-size: cover; background-position: center top;}
.my-player-swiper-wrap .my-player-swiper.swiper .swiper-slide .desc {width: 100%; padding: 2rem 1.6rem; background-color: var(--gray03); border-radius: 1.2rem; display: flex; flex-flow: column; row-gap: 1.6rem;}
.my-player-swiper-wrap .my-player-swiper.swiper .swiper-slide .desc > ul {display: grid; grid-template-columns: repeat(3, 1fr); column-gap: .8rem;}
.my-player-swiper-wrap .my-player-swiper.swiper .swiper-slide .desc > ul > li {display: flex; align-items: center; flex-flow: column; row-gap: .4rem;}
.my-player-swiper-wrap .my-player-swiper.swiper .swiper-slide .desc > ul > li > p {font-size: 1.4rem; text-align: center; color: var(--body);}
.my-player-swiper-wrap .my-player-swiper.swiper .swiper-slide .desc > ul > li > span {font-size: 2rem; line-height: 2.8rem; font-weight: 600;}
.my-player-swiper-wrap .my-player-swiper.swiper .swiper-slide .desc > button {width: 100%;}

@media screen and (max-width: 768px) {
    .my-player-swiper-wrap {width: 100vw; margin: 0 -2rem;}
    .my-player-swiper-wrap .my-player-swiper.swiper {padding: 0 2rem;}
    .my-player-swiper-wrap .my-player-swiper.swiper .swiper-wrapper {padding-bottom: 2.8rem;}
    .my-player-swiper-wrap .my-player-swiper.swiper .swiper-slide {padding: 0; border: 0; border-radius: 0;}
    .my-player-swiper-wrap .my-player-swiper.swiper .swiper-slide > p {width: 16rem;}
    .my-player-swiper-wrap .my-player-swiper.swiper .swiper-slide .intro {height: 13.6rem;}
    .my-player-swiper-wrap .my-player-swiper.swiper .swiper-slide .intro .info {flex: 1;}
    .my-player-swiper-wrap .my-player-swiper.swiper .swiper-slide .intro .img {width: 21.6rem; height: 23.6rem; position: absolute; top: 0; right: 0;}
}

.my-player-swiper-wrap .swiper-pagination {top: initial!important; bottom: 0!important; left: 0!important; display: flex; align-items: center; justify-content: center; column-gap: .8rem;}
.my-player-swiper-wrap .swiper-pagination .swiper-pagination-bullet {opacity: 1; width: .6rem; height: .6rem; background-color: var(--gray01); margin: 0!important;}
.my-player-swiper-wrap .swiper-pagination .swiper-pagination-bullet-active {width: .8rem; height: .8rem; background-color: var(--black);}

/* 메인 > MY TEAM > 굿즈 */
.my-team-wrap.main .mobile {display: none;}

@media screen and (max-width: 768px) {
    .my-team-wrap.main .desktop {display: none;}
    .my-team-wrap.main .mobile {display: block;}

    .my-team-wrap.main {flex-flow: column; row-gap: 1.2rem;}
    .my-team-wrap.main .desc {column-gap: 0; width: 100%;}
    .my-team-wrap.main .desc > li:nth-child(1),
    .my-team-wrap.main .desc > li:nth-child(3) {width: calc((100vw - 4rem - 4.8rem) / 2); height: calc((100vw - 4rem - 4.8rem) / 2);}
    .my-team-wrap.main .desc > li > div {row-gap: .8rem; padding: 1.2rem; width: 100%; height: 100%;}
    .my-team-wrap.main .desc > li:nth-child(1) > div > p {font-size: 2rem; font-weight: 600;}
    .my-team-wrap.main .desc > li:nth-child(1) > div > p > span {font-size: 1.4rem; font-weight: initial;}
    .my-team-wrap.main .desc > li > div > ul {display: flex; flex-flow: column; row-gap: .8rem;}

    .my-team-wrap.main .info {flex: initial; width: 100%; height: 9.2rem;}
}

.goods-swiper.swiper {background-color: var(--gray03); border-radius: 1.2rem; padding: 2rem;}
.goods-swiper.swiper .swiper-slide {width: 14rem; background-color: var(--white); border: 1px solid var(--gray02); border-radius: 1.2rem; padding: 2rem; display: flex; flex-flow: column; row-gap: 2rem;}
.goods-swiper.swiper .swiper-slide .img {width: 100%; height: 7.2rem; background-repeat: no-repeat; background-size: contain; background-position: center;}
.goods-swiper.swiper .swiper-slide > p {height: 4rem; font-size: 1.4rem; font-weight: 500; line-height: 2rem; word-break: keep-all; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; line-clamp: 2; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}

@media screen and (max-width: 768px) {
    .goods-swiper-wrap {width: 100vw; margin: 0 -2rem;}
    .goods-swiper.swiper {background-color: transparent; border-radius: 0; padding: 0 2rem;}
    .goods-swiper.swiper .swiper-slide {width: 14rem; background-color: var(--white); border: 1px solid var(--gray02); border-radius: 1.2rem; padding: 2rem; display: flex; flex-flow: column; row-gap: 2rem;}
    .goods-swiper.swiper .swiper-slide .img {width: 100%; height: 7.2rem; background-repeat: no-repeat; background-size: contain; background-position: center;}
    .goods-swiper.swiper .swiper-slide > p {height: 4rem; font-size: 1.4rem; font-weight: 500; line-height: 2rem; word-break: keep-all; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; line-clamp: 2; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
}

/* 메인 > KBL FANTASY(모바일) */
@media screen and (max-width: 768px) {
    .kbl-fantasy img {width: 100%; border-radius: 1.2rem; overflow: hidden;}
}

/* 메인 > SHORTS, PHOTO, KBL TV */
.main-media-swiper-wrap {position: relative; display: flex; align-items: center;}
.main-media-swiper.swiper.type1 {width: 100%;}
.main-media-swiper.swiper.type1 .empty {height: 29rem;}
.main-media-swiper.swiper.type1 .swiper-slide > a {position: relative; display: block;}
.main-media-swiper.swiper.type1 .swiper-slide > a .img {width: 100%; height: 29rem; position: relative; border-radius: .8rem; overflow: hidden; display: flex; align-items: center; justify-content: center; background-repeat: no-repeat; background-size: cover; background-position: center top;}
.main-media-swiper.swiper.type1 .swiper-slide > a .img::before {content: ''; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: linear-gradient(180deg, rgba(255, 255, 255, 0.0) 0%, rgba(0, 0, 0, 0.75) 100%);}
.main-media-swiper.swiper.type1 .swiper-slide > a .desc {width: 100%; height: 100%; position: absolute; top: 0; left: 0; padding: 1.6rem; display: flex; flex-flow: column; justify-content: flex-end; row-gap: .8rem; z-index: 10;}
.main-media-swiper.swiper.type1 .swiper-slide > a .desc > p {font-size: 1.6rem; line-height: 2.4rem; font-weight: 500; color: var(--white); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; line-clamp: 2; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.main-media-swiper.swiper.type1 .swiper-slide > a .desc > span {font-size: 1.2rem; line-height: 1.6rem; color: var(--gray01);}

.main-media-swiper.swiper.type2 .empty {height: 14.8rem;}
.main-media-swiper.swiper.type2 {width: 100%;}
.main-media-swiper.swiper.type2 .swiper-slide > a {display: flex; flex-flow: column; row-gap: 2rem;}
.main-media-swiper.swiper.type2 .swiper-slide > a .img {width: 100%; height: 14.8rem; border-radius: 1.2rem; overflow: hidden; display: flex; align-items: center; justify-content: center;}
.main-media-swiper.swiper.type2 .swiper-slide > a .img img {width: 100%;}
.main-media-swiper.swiper.type2 .swiper-slide > a .desc {display: flex; flex-flow: column; row-gap: .8rem;}
.main-media-swiper.swiper.type2 .swiper-slide > a .desc > p {font-size: 1.6rem; line-height: 2.4rem; font-weight: 500; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; line-clamp: 1; -webkit-line-clamp: 1; -webkit-box-orient: vertical;}
.main-media-swiper.swiper.type2 .swiper-slide > a .desc > ul {display: flex; align-items: center; column-gap: .8rem;}
.main-media-swiper.swiper.type2 .swiper-slide > a .desc > ul > li {font-size: 1.2rem; line-height: 1.6rem; color: var(--body);}

.main-media-swiper-wrap .swiper-button.main-project-swiper {top: 5rem;}

@media screen and (max-width: 768px) {
    .main-media-swiper-wrap {width: 100vw; margin: 0 -2rem;}
    .main-media-swiper.swiper {padding: 0 2rem;}
    .main-media-swiper.swiper .swiper-slide > a .desc > p {font-size: 1.4rem; line-height: 2rem;}

    .main-media-swiper.swiper.type1 .empty {height: 24rem;}
    .main-media-swiper.swiper.type1 .swiper-slide {width: 15.8rem;}
    .main-media-swiper.swiper.type1 .swiper-slide > a .img {height: 24rem;}

    .main-media-swiper.swiper.type2 .empty {height: 17.2rem;}
    .main-media-swiper.swiper.type2 .swiper-slide {width: 30.6rem;}
    .main-media-swiper.swiper.type2 .swiper-slide > a .img {height: 17.2rem;}
}

/* 메인 > 시즌 리더 */
.leader-swiper.swiper .swiper-slide {display: flex; flex-flow: column; row-gap: 1.2rem;}
.leader-swiper.swiper .swiper-slide .part {height: 2.5rem; padding: 0 .8rem; display: flex; align-items: center; justify-content: space-between;}
.leader-swiper.swiper .swiper-slide .part > p {font-size: 1.6rem; font-weight: 600; color: var(--subheadline); line-height: 2.4rem;}
.leader-swiper.swiper .swiper-slide .part > p > span {font-size: 1.2rem; font-weight: 400;}
.leader-swiper.swiper .swiper-slide .rank {border-radius: 1.2rem; display: flex; flex-flow: column; overflow: hidden;}
.leader-swiper.swiper .swiper-slide .rank > div {padding: 2rem 0 2rem 2.4rem; display: flex; position: relative;}
.leader-swiper.swiper .swiper-slide .rank > div::before {content: ''; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, 0.20) 100%);}
.leader-swiper.swiper .swiper-slide .rank > div .info {position: relative; z-index: 1; display: flex; flex-flow: column; row-gap: 1.2rem;}
.leader-swiper.swiper .swiper-slide .rank > div .info > div {display: flex; align-items: center; column-gap: .8rem;}
.leader-swiper.swiper .swiper-slide .rank > div .info > div > span {font-size: 1.6rem; font-weight: 600; color: var(--white); line-height: 2.4rem;}
.leader-swiper.swiper .swiper-slide .rank > div .info > div > p {font-size: 1.6rem; font-weight: 600; color: var(--white); line-height: 2.4rem; max-width: 12rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.leader-swiper.swiper .swiper-slide .rank > div .info > i {width: 4.6rem; height: 2.8rem;}
.leader-swiper.swiper .swiper-slide .rank > div .info > p {font-size: 1.6rem; font-weight: 600; color: var(--white); line-height: 2.4rem;}
.leader-swiper.swiper .swiper-slide .rank > div .img {width: 12rem; height: 12rem; background-repeat: no-repeat; background-size: contain; background-position: center bottom; position: absolute; bottom: 0; right: 0; z-index: 1;}
.leader-swiper.swiper .swiper-slide .rank > ul {border: 1px solid var(--gray02); border-top: 0; padding: 2rem 2.4rem 2.4rem; display: flex; flex-flow: column; row-gap: 2rem; border-radius: 0 0 1.2rem 1.2rem;}
.leader-swiper.swiper .swiper-slide .rank > ul > li {display: flex; align-items: center; column-gap: 1.4rem;}
.leader-swiper.swiper .swiper-slide .rank > ul > li > p {font-size: 1.6rem; font-weight: 600; color: var(--disabled); line-height: 2.4rem;}
.leader-swiper.swiper .swiper-slide .rank > ul > li .info {flex: 1; display: flex; flex-flow: column; row-gap: .4rem;}
.leader-swiper.swiper .swiper-slide .rank > ul > li .info > p {font-size: 1.4rem; font-weight: 600; line-height: 2rem; max-width: 14.4rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.leader-swiper.swiper .swiper-slide .rank > ul > li .info > span {font-size: 1.2rem; color: var(--body); line-height: 1.6rem;}
.leader-swiper.swiper .swiper-slide .rank > ul > li .score {font-size: 1.4rem; font-weight: 600; line-height: 2rem;}

@media screen and (max-width: 768px) {
    .leader-swiper-wrap {width: 100vw; margin: 0 -2rem;}
    .leader-swiper.swiper {padding: 0 2rem;}
    .leader-swiper.swiper .swiper-slide {width: 26.2rem;}
}

.leader-swiper.swiper .swiper-slide .rank > div.kgc {background-color: var(--kgc-main);}
.leader-swiper.swiper .swiper-slide .rank > div.lg {background-color: var(--lg-main);}
.leader-swiper.swiper .swiper-slide .rank > div.sk {background-color: var(--sk-main);}
.leader-swiper.swiper .swiper-slide .rank > div.hd {background-color: var(--hd-main);}
.leader-swiper.swiper .swiper-slide .rank > div.sono {background-color: var(--sono-main);}
.leader-swiper.swiper .swiper-slide .rank > div.kcc {background-color: var(--kcc-main);}
.leader-swiper.swiper .swiper-slide .rank > div.db {background-color: var(--db-main);}
.leader-swiper.swiper .swiper-slide .rank > div.kt {background-color: var(--kt-main);}
.leader-swiper.swiper .swiper-slide .rank > div.pega {background-color: var(--pega-main);}
.leader-swiper.swiper .swiper-slide .rank > div.ss {background-color: var(--ss-main);}

.leader-swiper.swiper .swiper-slide .rank .info .ic-logo.kgc {background-image: url(../img/logo/logo-kgc-dark-line-20240919.svg);}
.leader-swiper.swiper .swiper-slide .rank .info .ic-logo.lg {background-image: url(../img/logo/logo-lg-dark.svg);}
.leader-swiper.swiper .swiper-slide .rank .info .ic-logo.sk {background-image: url(../img/logo/logo-sk-dark.svg);}
.leader-swiper.swiper .swiper-slide .rank .info .ic-logo.hd {background-image: url(../img/logo/logo-hd-dark.svg);}
.leader-swiper.swiper .swiper-slide .rank .info .ic-logo.sono {background-image: url(../img/logo/logo-sono-dark.svg);}
.leader-swiper.swiper .swiper-slide .rank .info .ic-logo.kcc {background-image: url(../img/logo/logo-kcc-dark.svg);}
.leader-swiper.swiper .swiper-slide .rank .info .ic-logo.db {background-image: url(../img/logo/logo-db-dark.svg);}
.leader-swiper.swiper .swiper-slide .rank .info .ic-logo.kt {background-image: url(../img/logo/logo-kt-dark.svg);}
.leader-swiper.swiper .swiper-slide .rank .info .ic-logo.pega {background-image: url(../img/logo/logo-pega-dark.svg);}
.leader-swiper.swiper .swiper-slide .rank .info .ic-logo.ss {background-image: url(../img/logo/logo-ss-dark.svg);}

/* 메인 > 라운드 MVP */
.mvp-preview {display: flex; flex-flow: column; row-gap: 1.2rem;}
.mvp-preview .round {display: flex; align-items: center; justify-content: space-between;}
.mvp-preview .round > p {font-size: 2rem; line-height: 2.8rem; font-weight: 600; color: var(--orange);}
.mvp-preview .round > a {display: flex; align-items: center; column-gap: .8rem; font-size: 1.4rem; line-height: 2rem; font-weight: 500;}
.mvp-preview .player {border-radius: 1.2rem; background-color: var(--gray03); padding: 2.4rem; display: flex; align-items: center; flex-flow: column; row-gap: 2rem;}
.mvp-preview .player .info {display: flex; justify-content: space-between; width: 100%;}
.mvp-preview .player .info > div {display: flex; flex-flow: column; row-gap: .4rem;}
.mvp-preview .player .info > div > p {font-size: 2.4rem; font-weight: 600; line-height: 3.2rem;}
.mvp-preview .player .info > div > div {font-size: 1.4rem; color: var(--subheadline); line-height: 2rem;}
.mvp-preview .player .info > div > div > span {font-size: 2rem; font-weight: 600; color: var(--black); line-height: 2.8rem;}
.mvp-preview .player .info > i {width: 4.8rem; height: 4.8rem;}
.mvp-preview .player .desc {width: 100%; display: flex; flex-flow: column; align-items: center;}
.mvp-preview .player .desc .img {width: 23.2rem; height: 21.6rem; background-repeat: no-repeat; background-position: center top; background-size: cover;}
.mvp-preview .player .desc > ul {width: 100%; border-radius: 1.2rem; background-color: var(--white); padding: 2rem; display: grid; grid-template-columns: repeat(3, 1fr); column-gap: .8rem;}
.mvp-preview .player .desc > ul > li {display: flex; flex-flow: column; row-gap: .4rem; align-items: center;}
.mvp-preview .player .desc > ul > li > p {font-size: 1.4rem; line-height: 2rem; color: var(--body);}
.mvp-preview .player .desc > ul > li > span {font-size: 2rem; font-weight: 600; line-height: 2.8rem;}
.mvp-preview .player > a {font-size: 1.4rem; font-weight: 500; text-decoration: underline;}
.mvp-preview .empty {height: 20rem; background-color: var(--gray03); border-radius: 1.2rem; row-gap: 1.6rem;}
.mvp-preview .empty > i {width: 4rem; height: 4rem;}
.mvp-preview .empty > p {font-size: 1.4rem; line-height: 2rem;}

@media screen and (max-width: 768px) {
    .mvp-swiper-wrap {margin: 0 -2rem;}
    .mvp-swiper-wrap .mvp-swiper.swiper {padding: 0 2rem;}
    .mvp-swiper-wrap .mvp-swiper.swiper  .swiper-wrapper {padding-bottom: 2.8rem;}
    .mvp-swiper-wrap .mvp-swiper.swiper .swiper-slide {display: flex; flex-flow: column; row-gap: 1.2rem;}
    .mvp-swiper-wrap .mvp-swiper.swiper .swiper-slide .round {display: flex; align-items: center; justify-content: space-between;}
    .mvp-swiper-wrap .mvp-swiper.swiper .swiper-slide .round > p {font-size: 2rem; line-height: 2.8rem; font-weight: 600; color: var(--orange);}
    .mvp-swiper-wrap .mvp-swiper.swiper .swiper-slide .round > a {display: flex; align-items: center; column-gap: .8rem; font-size: 1.4rem; line-height: 2rem; font-weight: 500;}
    .mvp-swiper-wrap .mvp-swiper.swiper .swiper-slide .player {border-radius: 1.2rem; background-color: var(--gray03); padding: 2.4rem; display: flex; align-items: center; flex-flow: column; row-gap: 2rem;}
    .mvp-swiper-wrap .mvp-swiper.swiper .swiper-slide .player .info {display: flex; justify-content: space-between; width: 100%;}
    .mvp-swiper-wrap .mvp-swiper.swiper .swiper-slide .player .info > div {display: flex; flex-flow: column; row-gap: .4rem;}
    .mvp-swiper-wrap .mvp-swiper.swiper .swiper-slide .player .info > div > p {font-size: 2.4rem; font-weight: 600; line-height: 3.2rem;}
    .mvp-swiper-wrap .mvp-swiper.swiper .swiper-slide .player .info > div > span {font-size: 1.4rem; color: var(--subheadline); line-height: 2rem;}
    .mvp-swiper-wrap .mvp-swiper.swiper .swiper-slide .player .info > div > span > span {font-size: 2rem; font-weight: 600; color: var(--black); line-height: 2.8rem;}
    .mvp-swiper-wrap .mvp-swiper.swiper .swiper-slide .player .info > i {width: 4.8rem; height: 4.8rem;}
    .mvp-swiper-wrap .mvp-swiper.swiper .swiper-slide .player .desc {width: 100%; display: flex; flex-flow: column; align-items: center;}
    .mvp-swiper-wrap .mvp-swiper.swiper .swiper-slide .player .desc .img {width: 23.2rem; height: 21.6rem; background-repeat: no-repeat; background-position: center top; background-size: cover;}
    .mvp-swiper-wrap .mvp-swiper.swiper .swiper-slide .player .desc > ul {width: 100%; border-radius: 1.2rem; background-color: var(--white); padding: 2rem; display: grid; grid-template-columns: repeat(3, 1fr); column-gap: .8rem;}
    .mvp-swiper-wrap .mvp-swiper.swiper .swiper-slide .player .desc > ul > li {display: flex; flex-flow: column; row-gap: .4rem; align-items: center;}
    .mvp-swiper-wrap .mvp-swiper.swiper .swiper-slide .player .desc > ul > li > p {font-size: 1.4rem; line-height: 2rem; color: var(--body);}
    .mvp-swiper-wrap .mvp-swiper.swiper .swiper-slide .player .desc > ul > li > span {font-size: 2rem; font-weight: 600; line-height: 2.8rem;}
    .mvp-swiper-wrap .mvp-swiper.swiper .swiper-slide .player > a {font-size: 1.4rem; font-weight: 500; text-decoration: underline;}

    .mvp-swiper-wrap .swiper-pagination {top: initial!important; bottom: 0!important; left: 0!important; display: flex; align-items: center; justify-content: center; column-gap: .8rem;}
    .mvp-swiper-wrap .swiper-pagination .swiper-pagination-bullet {opacity: 1; width: .6rem; height: .6rem; background-color: var(--gray01); margin: 0!important;}
    .mvp-swiper-wrap .swiper-pagination .swiper-pagination-bullet-active {width: .8rem; height: .8rem; background-color: var(--black);}

}

/* 메인 > 이벤트(모바일) */
@media screen and (max-width: 768px) {
    .event-swiper-wrap {margin: 0 -2rem;}
    .event-swiper-wrap .event-swiper.swiper {margin: -2rem 0; padding: 2rem;}
    .event-swiper-wrap .event-swiper.swiper .empty {height: 9rem;}
    .event-swiper-wrap .event-swiper.swiper .swiper-slide {width: 19.6rem; display: flex; flex-flow: column; padding: 2rem; background-color: var(--white); border: 1px solid var(--gray02); border-radius: 1.2rem; filter: drop-shadow(0px 6px 12px rgba(25, 25, 25, 0.05)); overflow: hidden;}
    .event-swiper-wrap .event-swiper.swiper .swiper-slide .event-name {display: flex; align-items: center; justify-content: space-between; padding-bottom: 1.2rem; margin-bottom: 1.6rem; border-bottom: 1px solid var(--gray02);}
    .event-swiper-wrap .event-swiper.swiper .swiper-slide .event-name > p {font-size: 1.6rem; line-height: 2.4rem; font-weight: 600;}
    .event-swiper-wrap .event-swiper.swiper .swiper-slide .event-desc > p {height: 4rem; font-size: 1.4rem; line-height: 2rem; font-weight: 500; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; line-clamp: 2; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
    .event-swiper-wrap .event-swiper.swiper .swiper-slide .event-desc > span {font-size: 1.2rem; line-height: 1.6rem; color: var(--body); display: block; margin-top: .8rem;}
    .event-swiper-wrap .event-swiper.swiper .swiper-slide .event-desc > div {margin-top: 2rem; height: 9rem;}
    .event-swiper-wrap .event-swiper.swiper .swiper-slide .event-desc > div > ul {display: flex; flex-flow: column; row-gap: 1.4rem; position: relative; height: 8.8rem; overflow: hidden;}
    .event-swiper-wrap .event-swiper.swiper .swiper-slide .event-desc > div > ul > li {position: relative; z-index: 0;}
    .event-swiper-wrap .event-swiper.swiper .swiper-slide .event-desc > div > ul::after {content: ''; width: 100%; height: 3.4rem; position: absolute; left: 0; bottom: 0; background: linear-gradient(0deg, #FFF 8.82%, rgba(255, 255, 255, 0.20) 50%); z-index: 1;}
    .event-swiper-wrap .event-swiper.swiper .swiper-slide .event-desc .img {width: 100%; height: 8.6rem; background-repeat: no-repeat; background-size: cover; background-position: top center; position: relative;}
    /* .event-swiper-wrap .event-swiper.swiper .swiper-slide .event-desc .img::after {content: ''; width: 100%; height: 3.4rem; position: absolute; left: 0; bottom: 0; border-radius: .8rem .8rem 0 0; background: linear-gradient(0deg, #FFF 8.82%, rgba(255, 255, 255, 0.05) 50%); z-index: 1;} */
    .event-swiper-wrap .event-swiper.swiper .swiper-slide .event-desc > button {margin-top: 2rem; width: 100%;}
}

/* 메인 > 캠페인 배너 */
.campaign-swiper-wrap {position: relative; padding: 2rem 0;}
.campaign-swiper.swiper .swiper-slide img {width: 100%;}

.campaign-swiper-wrap .campaign-swiper .swiper-pagination {display: none;}

@media screen and (max-width: 768px) {
    .layout.main .cont-box + .cont-box.campaign-banner {padding-top: 0; margin-bottom: -4rem;}

    .campaign-swiper-wrap {width: 100vw; padding: 0; margin: 0 -2rem;}

    .campaign-swiper-wrap .campaign-swiper .swiper-pagination {width: 4.4rem; height: 2.4rem; background-color: rgba(0, 0, 0, 0.5); border-radius: 2rem; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; color: var(--gray01); bottom: initial; top: 1.2rem; left: 1.2rem; z-index: 10;}
    .campaign-swiper-wrap .campaign-swiper .swiper-pagination .swiper-pagination-current {font-weight: 600; color: var(--white);}
}

/* 메인 > 사용자 화면 편집(모바일) */
@media screen and (max-width: 768px) {
    .layout.main .cont-box + .cont-box.ui-edit {padding-top: 1.6rem; margin-bottom: -2.4rem;}
    .ui-edit button {width: 100%;}
}

/* 메인 > 파트너 */
.partner-wrap {display: grid; grid-template-columns: repeat(5, 1fr); border-top: .2rem solid var(--black);}
.partner-wrap > li {display: flex; flex-flow: column; justify-content: center; height: 11rem; position: relative;}
.partner-wrap > li:nth-child(5n+1)::before {content: ''; width: 500%; height: 1px; background-color: var(--gray02); position: absolute; bottom: 0; left: 0;}
.partner-wrap > li > div {display: flex; flex-flow: column; row-gap: .4rem; align-items: center; justify-content: center;}
.partner-wrap > li > div .img {width: 12.2rem; height: 5rem; background-repeat: no-repeat; background-size: contain; background-position: center;}
.partner-wrap > li > div > p {font-size: 1.2rem; color: var(--body); line-height: 1.6rem; text-align: center; word-break: keep-all;}

@media screen and (max-width: 768px) {
    .partner-wrap {grid-template-columns: repeat(2, 1fr);}
    .partner-wrap > li:nth-child(5n+1)::before {content: none;}
    .partner-wrap > li:nth-child(2n+1)::before {content: ''; width: 200%; height: 1px; background-color: var(--gray02); position: absolute; bottom: 0; left: 0;}
}

/* 메인 > 이벤트 팝업 */
.pop-event-swiper-wrap {margin: 0 -2rem;}
.pop-event-swiper-wrap .pop-event-swiper.swiper {padding: 0 2rem;}
.pop-event-swiper-wrap .pop-event-swiper.swiper .swiper-slide img {width: 100%;}

.swiper-pagination.event {top: initial!important; bottom: initial!important; left: initial!important; position: relative!important; display: flex; align-items: center; justify-content: center; column-gap: .8rem!important; width: fit-content!important;}
.swiper-pagination.event .swiper-pagination-bullet {opacity: 1; width: .6rem; height: .6rem; background-color: var(--gray01); margin: 0!important;}
.swiper-pagination.event .swiper-pagination-bullet-active {width: .8rem; height: .8rem; background-color: var(--black);}

/* 메인 > 사용자 화면 편집 팝업 */
.ui-edit-setting {display: flex; flex-flow: column; row-gap: 1.6rem; max-height: 30rem; overflow-y: auto; margin-bottom: -2.8rem; padding-bottom: 1.2rem;}
.ui-edit-setting > p {font-size: 1.2rem; line-height: 1.6rem; color: var(--body); word-break: keep-all;}
.ui-edit-setting > ul {display: flex; flex-flow: column;}
.ui-edit-setting > ul > li {height: 4.8rem; display: flex; align-items: center; justify-content: space-between; column-gap: 1.6rem;}
.ui-edit-setting > ul > li > p {font-size: 1.6rem; font-weight: 500; color: var(--subheadline); flex: 1;}
.ui-edit-setting > ul > li > div {display: flex; align-items: center; column-gap: 1.6rem;}

/* KBL 소개 */
.greeting {height: 44rem; display: flex; flex-flow: column; row-gap: 2rem; align-items: center; justify-content: center; background-image: url(../img/intro/greetinf-bg.png); background-repeat: no-repeat; background-size: cover; background-position: center;}
.greeting > p {font-size: 2.8rem; line-height: 3.6rem; font-weight: 600; color: var(--white);}
.greeting > span {text-align: center; font-size: 1.4rem; line-height: 2rem; color: var(--white);}
.greeting > div {margin-top: 2rem; display: flex; align-items: center; justify-content: center; flex-flow: column; row-gap: .4rem;}
.greeting > div .img {width: 8rem; height: 8rem; border-radius: 100%; display: flex; align-items: center; justify-content: center; margin-bottom: 1.2rem;}
.greeting > div .img img {width: 100%;}
.greeting > div > p {font-size: 1.6rem; line-height: 2.4rem; font-weight: 600; color: var(--white);}
.greeting > div > span {font-size: 1.4rem; line-height: 2rem; color: var(--gray01);}

@media screen and (max-width: 768px) {
    .greeting {height: 48rem; margin: -2.4rem -2rem 0;}
}

.business {display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 1.2rem;}
.business > li {height: 11.2rem; padding: 0 2.4rem; background-color: var(--gray03); display: flex; flex-flow: column; row-gap: .8rem; align-items: center; justify-content: center;}
.business > li > p {text-align: center; font-size: 1.4rem; line-height: 2rem; font-weight: 500;}
.business > li:nth-child(9) {grid-column: 1 / span 2;}
.business > li:nth-child(10) {grid-column: 3 / span 2;}

@media screen and (max-width: 768px) {
    .business {grid-template-columns: repeat(2, 1fr);}
    .business > li {padding: 0 1.2rem;}
    .business > li:nth-child(9) {grid-column: 1;}
    .business > li:nth-child(10) {grid-column: 2;}
}

/* KBL 소개 > 조직도 */
.organization {width: 100%;}
.organization.mobile {display: none;}

@media screen and (max-width: 768px) {
    .organization {display: none;}
    .organization.mobile {display: block;}
}

/* KBL 소개 > 역대 총재 */
.governor {padding: 0 2.4rem; display: flex; align-items: flex-start; grid-gap: 3.2rem 6rem; flex-wrap: wrap;}
.governor > li {display: flex; flex-flow: column; align-items: center; row-gap: 1.2rem;}
.governor > li .img {width: 12rem;  height: 12rem; border-radius: 100%; display: flex; align-items: center; justify-content: center;}
.governor > li .img img {width: 100%;}
.governor > li .info {display: flex; flex-flow: column; row-gap: .4rem;}
.governor > li .info > div {display: flex; align-items: center; column-gap: .8rem;}
.governor > li .info > div > p {font-size: 1.6rem; line-height: 2.4rem; font-weight: 600;}
.governor > li .info > div > span {font-size: 1.4rem; line-height: 2rem; font-weight: 500; color: var(--subheadline);}
.governor > li .info > span {font-size: 1.2rem; line-height: 1.6rem; color: var(--body); word-break: keep-all;}

@media screen and (max-width: 768px) {
    .governor {padding: 0 2rem; justify-content: center; grid-gap: 2.4rem 3.6rem;}
}

/* KBL 소개 > 연혁 */
.history {display: flex; flex-flow: column; row-gap: 1.6rem; position: relative;}
.history::before {content: ''; width: 1px; height: calc(100% - 2rem); background-color: var(--gray02); position: absolute; top: 2rem; left: 1.2rem;}
.history > li {display: flex; flex-flow: column; row-gap: 1rem; padding-left: 2.8rem;}
.history > li > p {font-size: 1.6rem; line-height: 2.4rem; font-weight: 500; position: relative; display: flex; align-items: center;}
.history > li > p::before {content: ''; width: .7rem; height: .7rem; border-radius: 100%; background-color: var(--subheadline); display: block; position: absolute; left: -1.9rem;}
.history > li:nth-child(1) > p::before {width: 2.4rem; height: 2.4rem; background-image: url(../img/ico/ic-history.svg); background-repeat: no-repeat; background-size: contain; background-position: center; left: -2.8rem; background-color: transparent;}
.history > li > span {font-size: 1.4rem; line-height: 2rem; word-break: keep-all;}

/* KBL 소개 > 엠블럼 */
.brand img {width: 100%; margin-bottom: 2rem;}
.brand img.mobile {display: none;}
.brand p {font-size: 1.6rem; line-height: 2.4rem; font-weight: 600; color: var(--orange);}
.brand span {display: block; font-size: 1.4rem; line-height: 2rem; margin-top: 1.6rem; word-break: keep-all;}

@media screen and (max-width: 768px) {
    .brand img {display: none;}
    .brand img.mobile {display: block;}
}

.color img {width: 100%; margin-top: 2rem;}
.color img.mobile {display: none;}
.color p {font-size: 1.4rem; line-height: 2rem; word-break: keep-all;}

@media screen and (max-width: 768px) {
    .color img {display: none;}
    .color img.mobile {display: block;}
}

.history-ci-wrap p {font-size: 1.4rem; line-height: 2rem; word-break: keep-all;}
.history-ci-wrap .history-ci {display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 1.2rem; margin-top: 2rem;}
.history-ci-wrap .history-ci > li {height: 14.4rem; border-radius: 1.2rem; border: 1px solid var(--gray02); display: flex; flex-flow: column; row-gap: 1.2rem; align-items: center; justify-content: center;}
.history-ci-wrap .history-ci > li img {width: 14.4rem;}
.history-ci-wrap .history-ci > li p {font-size: 1.4rem; text-align: center; line-height: 2rem;}

@media screen and (max-width: 768px) {
    .history-ci-wrap .history-ci {grid-template-columns: repeat(1, 1fr);}
}

.history-emblem {border-right: 1px solid var(--gray02); border-top: 1px solid var(--gray02); border-radius: 1.2rem; overflow: hidden; display: grid; grid-template-columns: repeat(4, 1fr);}
.history-emblem > li {display: flex; flex-flow: column; align-items: center; justify-content: center; row-gap: .4rem; height: 12.8rem; border-left: 1px solid var(--gray02); border-bottom: 1px solid var(--gray02);}
.history-emblem > li:nth-child(1) {grid-column: 1 / span 2; border-top-left-radius: 1.2rem;}
.history-emblem > li:nth-last-child(1) {border-bottom-right-radius: 1.2rem;}
.history-emblem > li:nth-last-child(4) {border-bottom-left-radius: 1.2rem;}
.history-emblem > li img {width: 9.6rem;}
.history-emblem > li p {font-size: 1.4rem; text-align: center; line-height: 2rem; color: var(--subheadline);}

@media screen and (max-width: 768px) {
    .history-emblem {border: 1px solid var(--gray02); grid-template-columns: repeat(2, 1fr);}
    .history-emblem > li {border-left: 0; border-bottom: 1px solid var(--gray02);}
    .history-emblem > li:nth-child(2n-1) {border-left: 1px solid var(--gray02);}
    .history-emblem > li:nth-child(1) {border-top-left-radius: 0; border-left: 0;}
    .history-emblem > li:nth-last-child(-n+2) {border-bottom: 0;}
    .history-emblem > li:nth-last-child(1) {border-bottom-right-radius: 0;}
    .history-emblem > li:nth-last-child(4) {border-bottom-left-radius: 0;}
}

/* KBL 소개 > 파트너 */
.partner {display: grid; grid-template-columns: repeat(5, 1fr); grid-gap: 1.2rem; border-bottom: 1px solid var(--gray02); padding-bottom: 1.2rem;}
.partner > li {width: 100%; height: 8rem; display: flex; align-items: center; justify-content: center;}
.partner > li img {width: 15.5rem;}

@media screen and (max-width: 768px) {
    .partner {grid-template-columns: repeat(2, 1fr);}
    .partner > li {width: 100%; height: 6.4rem;}
    .partner > li img {width: 9.7rem;}
}

/* KBL 소개 > SNS */
.sns-intro {display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 3rem;}
.sns-intro > li {height: 12rem; display: flex; align-items: center; column-gap: 2rem; padding: 0 2rem; border-radius: 1.2rem; border: 1px solid var(--gray02); filter: drop-shadow(0px 6px 12px rgba(25, 25, 25, 0.05));}
.sns-intro > li > i {width: 5.6rem; height: 5.6rem;}
.sns-intro > li > div > p {font-size: 1.6rem; line-height: 2.4rem; font-weight: 600;}
.sns-intro > li > div > a {font-size: 1.4rem; line-height: 2rem; color: var(--body); display: block; margin-top: .4rem;}
.sns-intro > li > div > ul {display: flex; align-items: center; column-gap: 1.2rem; margin-top: 1.2rem;}

@media screen and (max-width: 768px) {
    .sns-intro {grid-template-columns: repeat(1, 1fr); grid-gap: 1.2rem;}
    .sns-intro > li {padding: 0 1.2rem;}
    .sns-intro > li > div > ul {column-gap: .8rem;}
}

/* KBL 소개 > 가이드북 연감 */
.book {display: grid; grid-template-columns: repeat(6, 1fr); grid-gap: 2.4rem; flex-wrap: wrap;}
.book > li {display: flex; flex-flow: column;}
.book > li .img {width: 100%; height: 25.2rem; border-radius: 1.2rem; overflow: hidden; border: 1px solid var(--gray02); display: flex; align-items: center; justify-content: center;}
.book > li .img img {width: 100%; height: 100%;}
.book > li > p {height: 4.8rem; margin-top: 1.2rem; font-size: 1.6rem; line-height: 2.4rem; font-weight: 500; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; line-clamp: 2; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.book > li > button {width: 100%; margin-top: 1.6rem;}

@media screen and (max-width: 768px) {
    .book {grid-template-columns: repeat(2, 1fr); grid-gap: 2rem;}
    .book > li .img {height: 23rem;}
    .book > li > p {font-size: 1.4rem; line-height: 2rem;}
}

/* KBL 규정 > 정관 및 규약 */
.rule {display: grid; grid-template-columns: repeat(6, 1fr); grid-gap: 5rem 2.4rem; flex-wrap: wrap;}
.rule > li {display: flex; flex-flow: column;}
.rule > li .img {width: 100%; height: 25.2rem; border-radius: 1.2rem; overflow: hidden; border: 1px solid var(--gray02); display: flex; align-items: center; justify-content: center;}
.rule > li .img img {width: 100%; height: 100%;}
.rule > li > p {margin-top: 1.2rem; font-size: 1.6rem; line-height: 2.4rem; font-weight: 500; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; line-clamp: 1; -webkit-line-clamp: 1; -webkit-box-orient: vertical;}
.rule > li > button {width: 100%; margin-top: 1.6rem;}

.rule.grid-2 {grid-template-columns: repeat(2, 1fr); grid-gap: 2.4rem 2rem;}
.rule.grid-2 > li .img {height: 23rem;}

.rule.grid-4 {grid-template-columns: repeat(4, 1fr);}

@media screen and (max-width: 768px) {
    .rule {grid-template-columns: repeat(2, 1fr); grid-gap: 4rem 2rem;}
    .rule > li .img {height: 23rem;}
    .rule > li > p {font-size: 1.4rem; line-height: 2rem;}

    .rule.grid-4 {grid-template-columns: repeat(2, 1fr);}
}

/* KBL 규정 > 농구 이해하기 */
.media-type1 {display: flex; flex-flow: column; row-gap: 2rem;}
.media-type1 > li {display: flex; align-items: center; column-gap: 2rem; cursor: pointer;}
.media-type1 > li .img {width: 19.5rem; height: 11rem; border-radius: .8rem; overflow: hidden; display: flex; align-items: center; justify-content: center; position: relative;}
.media-type1 > li .img .mark-wrap {position: absolute; top: .6rem; width: calc(100% - 1.2rem);}
.media-type1 > li .img .mark-wrap > div {width: 2.8rem; height: 2.8rem; background-color: var(--white); border-radius: 100%; display: flex; align-items: center; justify-content: center; overflow: hidden; position: absolute;}
.media-type1 > li .img .mark-wrap > div > i {width: 2.4rem; height: 2.4rem;}
.media-type1 > li .img .mark-wrap .club {left: 0;}
.media-type1 > li .img .mark-wrap .pin {right: 0;}
.media-type1 > li .img img {width: 100%; height: auto;}
.media-type1 > li > div {display: flex; flex-flow: column; row-gap: 1rem;}
.media-type1 > li > div:not(.img) {flex: 1;}
.media-type1 > li > div > div {display: flex; flex-flow: column; row-gap: .4rem;}
.media-type1 > li > div > div > ul {display: flex; align-items: center; column-gap: .6rem;}
.media-type1 > li > div > div > ul > li {font-size: 1.2rem; line-height: 1.6rem; font-weight: 500; color: var(--subheadline); display: flex; align-items: center; column-gap: .6rem;}
.media-type1 > li > div > div > ul > li + li::before {content: ''; width: 1px; height: 1.2rem; background-color: var(--gray01);}
.media-type1 > li > div > div > span {font-size: 1.2rem; font-weight: 500; color: var(--subheadline); line-height: 1.6rem;}
.media-type1 > li > div > div > p {height: 4.8rem; font-size: 1.6rem; line-height: 2.4rem; font-weight: 500; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; line-clamp: 2; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.media-type1 > li > div > ul {display: flex; align-items: center; column-gap: .8rem;}
.media-type1 > li > div > ul > li {font-size: 1.2rem; line-height: 1.6rem; color: var(--body);}
.media-type1 > li > div > span {font-size: 1.2rem; line-height: 1.6rem; color: var(--body);}

.media-type1.sm > li {column-gap: 1.6rem;}
.media-type1.sm > li .img {width: 15.6rem; height: 8.8rem;}
.media-type1.sm > li > div > div > p {height: 4rem; font-size: 1.4rem; line-height: 2rem;}

@media screen and (max-width: 768px) {
    .media-type1 > li {column-gap: 1.6rem;}
    .media-type1 > li .img {width: 15.6rem; height: 8.8rem;}
    .media-type1 > li .img .mark-wrap {top: .4rem; width: calc(100% - .8rem);}
    .media-type1 > li .img .mark-wrap > div {width: 2rem; height: 2rem;}
    .media-type1 > li .img .mark-wrap > div > i {width: 1.6rem; height: 1.6rem;}
    .media-type1 > li > div {row-gap: .8rem;}
    .media-type1 > li > div > div > p {height: 4rem; font-size: 1.4rem; line-height: 2rem;}
}

/* KBL 규정 > 농구 이해하기 > 상세 */
.detail-wrap {display: flex; flex-flow: column; row-gap: 3.2rem;}
.detail-wrap .detail-tit {display: flex; flex-flow: column; row-gap: 1.2rem; padding-bottom: 2rem; border-bottom: 1px solid var(--gray02);}
.detail-wrap .detail-tit > h2 {font-size: 2rem; font-weight: 600; line-height: 2.8rem; word-break: keep-all;}
.detail-wrap .detail-tit > ul {display: flex; align-items: center; column-gap: .8rem;}
.detail-wrap .detail-tit > ul > li {font-size: 1.2rem; line-height: 1.6rem; color: var(--body);}
.detail-wrap .detail-tit > div {display: flex; align-items: center; justify-content: space-between;}
.detail-wrap .detail-tit > div > ul {display: flex; align-items: center; column-gap: .8rem;}
.detail-wrap .detail-tit > div > ul {display: flex; align-items: center; column-gap: .8rem;}
.detail-wrap .detail-tit > div > ul > li {font-size: 1.2rem; line-height: 1.6rem; color: var(--body);}
.detail-wrap .detail-tit > div > div {display: flex; align-items: center; column-gap: 1.2rem;}
.detail-wrap .detail-tit > div > div .mobile {display: none;}
.detail-wrap .detail-tit > div > div > button {width: fit-content; min-width: fit-content; height: fit-content; padding: 0; background-color: transparent; font-size: 1.2rem; line-height: 1.6rem; color: var(--body);}
.detail-wrap .detail-tit > div > div > button > i {width: 2.4rem; height: 2.4rem;}
.detail-wrap .detail-cont {display: flex; flex-flow: column; row-gap: 1.2rem; width: 100%!important;}
.detail-wrap .detail-cont iframe {display: block; width: 56rem; height: 31.5rem; margin: 0 auto;}
.detail-wrap .detail-cont img {display: block; width: 100%; height: auto; margin: 0 auto;}
.detail-wrap .detail-cont *:not(.event, .event *) {font-size: 1.4rem!important; line-height: 2rem; font-weight: 500; color: var(--subheadline); word-break: break-word;}
.detail-wrap .detail-cont .event img {width: initial; margin: initial; display: initial;}
.detail-wrap .detail-cont .webtoon {display: block; width: 36rem; margin: 4rem auto 0;}

@media screen and (max-width: 768px) {
    .detail-wrap .detail-tit {padding-bottom: 0; border-bottom: 0;}
    .detail-wrap .detail-tit > div > div > button.mobile {display: flex;}
    .detail-wrap .detail-cont iframe {display: block; width: 100vw; height: 56vw; margin: 0 -2rem;}
    .detail-wrap .detail-cont .webtoon {width: 100%; margin: 2.4rem auto 0;}

    .youthTable {width: 100vw; overflow-x: auto; margin: 0 -2rem;}
}

.datail-notice {padding: 2.4rem 2rem; display: flex; flex-flow: column; row-gap: 2rem; background-color: var(--gray03);}
.datail-notice > div {display: flex; flex-flow: column; row-gap: 1.2rem;}
.datail-notice > div > p {font-size: 1.6rem; font-weight: 600; color: var(--subheadline);}
.datail-notice > div > ul {display: flex; flex-flow: column; row-gap: .8rem;}
.datail-notice > div > ul > li {font-size: 1.4rem; line-height: 2rem; color: var(--subheadline); word-break: keep-all; display: flex; column-gap: .8rem;}
.datail-notice > div > ul > li::before {content: '•'; font-size: 1rem; line-height: 1.8rem;}

@media screen and (max-width: 768px) {
    .datail-notice {width: 100vw; margin: 0 -2rem;}
}

.detail-file {width: 100%; padding: 2rem; display: flex; flex-flow: column; row-gap: 1.4rem; border-radius: .8rem; background-color: var(--gray03);}
.detail-file > li {width: 100%; display: flex; column-gap: 1.4rem;}
.detail-file > li button {flex: 1; min-width: fit-content; height: fit-content; background-color: transparent; padding: 0; column-gap: .8rem; align-items: initial; word-break: keep-all;}
.detail-file > li button > p {flex: 1; text-align: left; font-size: 1.4rem; line-height: 2.4rem; color: var(--subheadline); font-weight: 500;}
.detail-file .more {display: none;}

@media screen and (max-width: 768px) {
    .detail-file {padding: .8rem 1.6rem;}
    .detail-file .more {display: flex; flex: initial;}
}

.detail-btn {margin-top: 1.8rem; display: flex; align-items: center; justify-content: center; position: relative; column-gap: 1.2rem;}
.detail-btn > button {min-width: 12rem;}
.detail-btn > div {display: flex; align-items: center; column-gap: 1.2rem; position: absolute;}
.detail-btn > div:nth-child(1) {left: 0;}
.detail-btn > div:nth-last-child(1) {right: 0;}
.detail-btn > div button {min-width: 12rem;}
.detail-btn > div:not(.button) button:nth-child(1) {padding: 0 3.2rem 0 2.2rem;}
.detail-btn > div:not(.button) button:nth-child(2) {padding: 0 2.2rem 0 3.2rem;}
.detail-btn .button {margin: 0 auto; left: initial!important; right: initial!important; display: flex; align-items: center; justify-content: center; column-gap: 1.2rem;}

@media screen and (max-width: 768px) {
    .detail-btn {margin-top: .8rem; justify-content: space-between;}
    .detail-btn > *:nth-child(1):nth-last-child(1) {width: 100%;}
    .detail-btn > button {min-width: 13.2rem; height: 4rem; padding: 0 1.2rem; font-size: 1.4rem; border-radius: .8rem;}
    .detail-btn > button:nth-child(1):nth-last-child(2), .detail-btn > button:nth-child(1):nth-last-child(2) ~ button {width: calc((100% - .8rem) / 2);}
    .detail-btn > div {position: relative;}
    .detail-btn > div.desktop {display: none;}
    .detail-btn > div button {min-width: fit-content; height: 4rem; padding: 0 1.2rem; font-size: 1.4rem; border-radius: .8rem;}
    .detail-btn > div:not(.button) button:nth-child(1) {padding: 0 1.2rem 0 .6rem;}
    .detail-btn > div:not(.button) button:nth-child(2) {padding: 0 .6rem 0 1.2rem;}

    .detail-btn .button {width: 100%;}
    .detail-btn .button > button {width: calc((100% - 1.2rem) / 2);}
}

.like-btn {margin-top: 1.8rem; display: flex; align-items: center; justify-content: center; column-gap: 1.2rem;}
.like-btn > li > button {width: 18rem; height: 8rem; flex-flow: column; row-gap: .4rem; font-size: 1.4rem; line-height: 2rem; font-weight: 600; background-color: var(--gray03); border-color: var(--gray01); color: var(--black);}

@media screen and (max-width: 768px) {
    .like-btn {margin-top: .8rem;}
    .like-btn > li {width: calc((100% - 1.2rem) / 2);}
    .like-btn > li > button {width: 100%;}
}

.report-chk {display: flex; flex-flow: column; row-gap: 1.6rem;}
.report-chk > li {display: flex; flex-flow: column; row-gap: 1.2rem;}
.report-chk > li > textarea {min-height: 10rem;}

/* KBL 규정 > 운영방식 */
.operation-matches img {width: 100%;}
.operation-matches img.mobile {display: none;}

@media screen and (max-width: 768px) {
    .operation-matches img {display: none;}
    .operation-matches img.mobile {display: block;}
}

/* 이용약관 > 개인정보처리방침 */
.terms-wrap {font-size: 1.4rem; line-height: 2rem; word-break: keep-all; color: var(--body); white-space: break-spaces;}
.terms-wrap .font500 {color: var(--black);}

/* Contact Us > 문의 제안 */
.inquiry-wrap {display: grid; grid-template-columns: 1fr 4fr; grid-gap: 2rem;}
.inquiry-wrap > li {display: flex; flex-flow: column; row-gap: 1.2rem;}
.inquiry-wrap > li:nth-child(3) {grid-column: 1 / span 2;}
.inquiry-wrap > li:nth-child(4) {grid-column: 1 / span 2;}
.inquiry-wrap > li > p {font-size:  1.4rem; line-height: 2rem; font-weight: 500; color: var(--subheadline);}
.inquiry-wrap > li > *:not(p) {width: 100%;}
.inquiry-wrap > li > * input {width: 100%;}

.inquiry-wrap .MuiDropzoneArea-root,
.inquiry-wrap .MuiDropzoneArea-root *:not(svg, svg *) {all: unset;}
.inquiry-wrap .MuiDropzoneArea-root {padding: 1.8rem; font-size: 1.6rem; font-weight: 500; border-radius: 1.2rem; border: 1px solid var(--gray01); background-color: var(--white); cursor: pointer; display: flex; flex-flow: column; justify-content: center; row-gap: 1.6rem;}
.inquiry-wrap .MuiDropzoneArea-root .MuiDropzoneArea-textContainer {display: flex; flex-flow: column; align-items: center; row-gap: .8rem; width: fit-content; margin: 0 auto;}
.inquiry-wrap .MuiDropzoneArea-root .MuiDropzoneArea-textContainer > p {font-size: 1.4rem; color: var(--body); word-break: keep-all;}
.inquiry-wrap .MuiDropzoneArea-root .MuiDropzoneArea-textContainer > svg {display: none;}
.inquiry-wrap .MuiDropzoneArea-root .css-r1hick-MuiGrid-root {display: flex; align-items: center; grid-gap: 2rem; flex-wrap: wrap;}
.inquiry-wrap .MuiDropzoneArea-root .css-r1hick-MuiGrid-root > .MuiGrid-item {position: relative;}
.inquiry-wrap .MuiDropzoneArea-root .css-r1hick-MuiGrid-root > .MuiGrid-item > button {background-color: var(--body); border-radius: 100%; display: flex; align-items: center; justify-content: center; width: 1.6rem; height: 1.6rem; position: absolute; bottom: 0; right: -.8rem;}
.inquiry-wrap .MuiDropzoneArea-root .css-r1hick-MuiGrid-root > .MuiGrid-item > button > svg {width: 1.2rem; height: 1.2rem;}
.inquiry-wrap .MuiDropzoneArea-root .css-r1hick-MuiGrid-root > .MuiGrid-item > button > svg > path {fill: var(--white);}
.inquiry-wrap .MuiDropzoneArea-root .MuiDropzonePreviewList-image {width: 6.8rem; height: 6.8rem; border-radius: .8rem;}

@media screen and (max-width: 768px) {
    .inquiry-wrap {grid-template-columns: 1fr;}
    .inquiry-wrap > li:nth-child(3) {grid-column: 1;}
    .inquiry-wrap > li:nth-child(4) {grid-column: 1;}
    .inquiry-wrap .MuiDropzoneArea-root .MuiDropzonePreviewList-image {width: calc((100vw - 4rem - 4rem - 2px - 4rem) / 3); height: calc((100vw - 4rem - 4rem - 2px - 4rem) / 3);}
}

/* Contact Us > FAQ */
.faq-wrap {display: flex; flex-flow: column; row-gap: 2.4rem;}
.faq-wrap > li {padding-bottom: 2.4rem; border-bottom: 1px solid var(--gray02);}
.faq-wrap > li > button {align-items: flex-start; width: 100%; height: 100%; padding: 0; justify-content: initial; column-gap: 1rem; font-size: 1.6rem; font-weight: 500; line-height: 2.4rem; color: var(--black); background-color: transparent;}
.faq-wrap > li > button > p {flex: 1; text-align: left; word-break: keep-all;}
.faq-wrap > li > button::before {content: 'Q.'; width: 1.6rem; font-size: 1.6rem; font-weight: 500; line-height: 2.4rem;}
.faq-wrap > li > button::after {content: ''; width: 2.4rem; height: 2.4rem; background-image: url(../img/ico/ic-dropdown-ov.svg); background-repeat: no-repeat; background-size: contain; background-position: center;}
.faq-wrap > li > button[data-selected='false']::after {background-image: url(../img/ico/ic-dropdown.svg);}
.faq-wrap > li > div {align-items: flex-start; column-gap: 1rem;}
.faq-wrap > li > div[aria-hidden='true'] {margin-top: 0; display: none;}
.faq-wrap > li > div[aria-hidden='false'] {margin-top: 1.2rem; display: flex;}
.faq-wrap > li > div::before {content: 'A.'; width: 1.6rem; font-size: 1.6rem; line-height: 2.4rem; font-weight: 500; color: var(--orange);}
.faq-wrap > li > div > p {flex: 1; border-radius: .8rem; padding: 2rem 1.6rem; background-color: var(--gray03); font-size: 1.6rem; line-height: 2.4rem; color: var(--subheadline); word-break: keep-all;}

@media screen and (max-width: 768px) {
    .faq-wrap {row-gap: 2rem;}
    .faq-wrap > li {padding-bottom: 2rem;}
    .faq-wrap > li > button {column-gap: .8rem; font-size: 1.4rem; line-height: 2rem;}
    .faq-wrap > li > button::before {font-size: 1.4rem; line-height: 2rem;}
    .faq-wrap > li > button::after {width: 2rem; height: 2rem}
    .faq-wrap > li > div {column-gap: .8rem;}
    .faq-wrap > li > div::before {font-size: 1.4rem; line-height: 2rem;}
    .faq-wrap > li > div > p {padding: 1.2rem 1.6rem; font-size: 1.4rem; line-height: 2rem;}
}

/* Contact Us > 오시는길 */
.map {display: flex; flex-flow: column;}
.map img {width: 100%;}
.map img.mobile {display: none;}
.map > p {height: 4.8rem; display: flex; align-items: center; justify-content: center; background-color: var(--black); font-size: 1.4rem; line-height: 2rem; text-align: center; color: var(--white);}

@media screen and (max-width: 768px) {
    .map {width: 100vw; margin: 0 -2rem;}
    .map img {display: none;}
    .map img.mobile {display: block;}
}

.map-info {display: flex; align-items: flex-start; column-gap: 12rem;}
.map-info > li {display: flex; flex-flow: column; row-gap: 2rem;}
.map-info > li > p {font-size: 2rem; font-weight: 600; line-height: 2.8rem;}
.map-info > li > ul {display: flex; align-items: flex-start; column-gap: 2.4rem;}
.map-info > li > ul > li {display: flex; flex-flow: column; row-gap: .4rem;}
.map-info > li > ul > li > p {font-size: 1.4rem; line-height: 2rem; font-weight: 500; color: var(--body);}
.map-info > li > ul > li > span {font-size: 1.6rem; font-weight: 500; line-height: 2.4rem;}

@media screen and (max-width: 768px) {
    .map-info {flex-flow: column; row-gap: 4rem; width: 100vw; margin: 0 -2rem;}
    .map-info > li {width: 100%; row-gap: 1.2rem; padding: 0 2rem;}
    .map-info > li + li {border-top: 1.2rem solid var(--gray03); padding-top: 3.2rem;}
    .map-info > li > p {font-size: 1.6rem; line-height: 2.4rem;}
    .map-info > li > ul {display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 2rem;}
    .map-info > li > ul > li > p {font-size: 1.2rem; line-height: 1.6rem;}
    .map-info > li > ul > li > span {font-size: 1.4rem; line-height: 2rem;}
}

/* Contact > 클린바스켓센터 */
.clean-basket-desc {display: flex; flex-flow: column; row-gap: 2.4rem;}
.clean-basket-desc > div {display: flex; flex-flow: column; row-gap: 1.2rem;}
.clean-basket-desc > div > p {font-size: 1.6rem; font-weight: 600; line-height: 2.4rem;}
.clean-basket-desc > div > span {font-size: 1.4rem; line-height: 2rem; color: var(--body); word-break: keep-all;}

/* Contact > 클린바스켓센터 > 상세 */
.clean-basket-info {display: flex; flex-flow: column; row-gap: 2rem;}
.clean-basket-info > li {display: flex; flex-flow: column; row-gap: 1.2rem;}
.clean-basket-info > li > p {font-size:  1.4rem; line-height: 2rem; font-weight: 500; color: var(--subheadline);}
.clean-basket-info > li > *:not(p) {width: 100%;}
.clean-basket-info > li > * input {width: 100%;}

.clean-basket-info .MuiDropzoneArea-root,
.clean-basket-info .MuiDropzoneArea-root *:not(svg, svg *) {all: unset;}
.clean-basket-info .MuiDropzoneArea-root {width: 100%; padding: 1.8rem; font-size: 1.6rem; font-weight: 500; border-radius: 1.2rem; border: 1px solid var(--gray01); background-color: var(--white); cursor: pointer; display: flex; flex-flow: column; justify-content: center; row-gap: 1.6rem;}
.clean-basket-info .MuiDropzoneArea-root .MuiDropzoneArea-textContainer {display: flex; flex-flow: column; align-items: center; row-gap: .8rem; width: fit-content; margin: 0 auto;}
.clean-basket-info .MuiDropzoneArea-root .MuiDropzoneArea-textContainer > p {font-size: 1.4rem; color: var(--body); word-break: keep-all;}
.clean-basket-info .MuiDropzoneArea-root .MuiDropzoneArea-textContainer > svg {display: none;}
.clean-basket-info .MuiDropzoneArea-root .css-r1hick-MuiGrid-root {display: flex; align-items: center; grid-gap: 2rem; flex-wrap: wrap;}
.clean-basket-info .MuiDropzoneArea-root .css-r1hick-MuiGrid-root > .MuiGrid-item {position: relative;}
.clean-basket-info .MuiDropzoneArea-root .css-r1hick-MuiGrid-root > .MuiGrid-item > button {background-color: var(--body); border-radius: 100%; display: flex; align-items: center; justify-content: center; width: 1.6rem; height: 1.6rem; position: absolute; bottom: 0; right: -.8rem;}
.clean-basket-info .MuiDropzoneArea-root .css-r1hick-MuiGrid-root > .MuiGrid-item > button > svg {width: 1.2rem; height: 1.2rem;}
.clean-basket-info .MuiDropzoneArea-root .css-r1hick-MuiGrid-root > .MuiGrid-item > button > svg > path {fill: var(--white);}
.clean-basket-info .MuiDropzoneArea-root .MuiDropzonePreviewList-image {width: 6.8rem; height: 6.8rem; border-radius: .8rem;}

@media screen and (max-width: 768px) {
    .clean-basket-info .MuiDropzoneArea-root .MuiDropzonePreviewList-image {width: calc((100vw - 4rem - 4rem - 2px - 4rem) / 3); height: calc((100vw - 4rem - 4rem - 2px - 4rem) / 3);}
}

.terms-desc {display: flex; flex-flow: column; row-gap: 1.2rem;}
.terms-desc > li {display: flex; align-items: center; justify-content: space-between;}
.terms-desc > li > button {width: fit-content; min-width: initial; height: fit-content; padding: 0; border-radius: 0; background-color: transparent;}
.terms-desc > li > input:checked ~ button > i {background-image: url(../img/ico/ic-dropdown-ov.svg);}
.terms-desc .desc {width: 100%; padding: 1.2rem 1.6rem; border-radius: 1.2rem; background-color: var(--gray03); display: flex; flex-flow: column; row-gap: .8rem; max-height: 8rem; overflow-y: auto;}
.terms-desc .desc > li {font-size: 1.4rem; line-height: 2rem; color: var(--headline); word-break: keep-all; display: flex; column-gap: .4rem;}
.terms-desc > li > ul > h6 {font-size: 1.6rem; font-weight: 600;}
.terms-desc > li > ul > li > h6 {width: 7rem; font-size: 1.5rem; font-weight: 500;}
.terms-desc > li > ul > li > p {width: calc(100% - 7.8rem); font-size: 1.5rem;}
.terms-desc > li > ul > li.sub {color: var(--body);}
.terms-desc > li > ul > li.sub::before {content: '-'; font-size: 1.4rem; line-height: 2rem;}

.pop-cont > .terms-desc .desc {max-height: 30rem;}

/* 경기 > 일정 및 결과 > 리스트형 */
.view-tab {display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; column-gap: 0!important;}
.view-tab > input + label {min-width: 3.2rem; height: 3.2rem; padding: 0 1.2rem; text-align: center; display: flex; align-items: center; justify-content: center; background-color: var(--white); border: 1px solid var(--gray01); border-right: 0;}
.view-tab > input + label::before {content: none;}
.view-tab > input:nth-child(1) + label {border-radius: .6rem 0 0 .6rem;;}
.view-tab > input + label:nth-last-child(1) {border-radius: 0 .6rem .6rem 0; border-right: 1px solid var(--gray01);}
.view-tab > input:checked + label {font-weight: 600; border-color: var(--black);}
.view-tab > input:checked + label.active {font-weight: 600; border-color: var(--black);}
.view-tab > input:checked + label .ic-list {background-image: url(../img/ico/ic-list-ov.svg);}
.view-tab > input:checked + label .ic-calendar {background-image: url(../img/ico/ic-calendar-ov.svg);}
.view-tab > input:checked + label + input + label {border-left-color: var(--black);}

.game-schedule-list {display: flex; flex-flow: column; row-gap: 1.2rem; align-items: center;}
.game-schedule-list + .game-schedule-list {margin-top: 5rem;}
.game-schedule-list > p {font-size: 1.6rem; font-weight: 600; line-height: 2.4rem; color: var(--body);}
.game-schedule-list > ul {width: 100%; display: flex; flex-flow: column; row-gap: 2rem;}
.game-schedule-list > ul > li {width: 100%; border: 1px solid var(--gray02); border-radius: 1.2rem; padding: 0 2rem; display: flex; flex-flow: column; background-color: var(--white); filter: drop-shadow(0px 6px 12px rgba(25, 25, 25, 0.05)); position: relative;}
.game-schedule-list > ul > li .sub {display: flex; align-items: center; justify-content: space-between; padding: 1.6rem 0; border-bottom: 1px solid var(--gray02); position: relative;}
.game-schedule-list > ul > li .sub .desc {display: flex; align-items: center; column-gap: .8rem;}
.game-schedule-list > ul > li .sub .desc > ul {display: flex; align-items: center; column-gap: .8rem;}
.game-schedule-list > ul > li .sub .desc > ul > li {font-size: 1.2rem; font-weight: 500; line-height: 1.6rem; color: var(--subheadline); display: flex; align-items: center; column-gap: .8rem;}
.game-schedule-list > ul > li .sub .desc > ul > li + li {max-width: 8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: initial;}
.game-schedule-list > ul > li .sub .channel {display: flex; align-items: flex-start; justify-content: center; column-gap: .8rem; position: absolute; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%);}
.game-schedule-list > ul > li .sub .channel img {height: 1.2rem;}
.game-schedule-list > ul > li .sub .channel > p {font-size: 1.4rem; line-height: 2.4rem; flex: 1; color: var(--subheadline);}
.game-schedule-list > ul > li .sub .option {display: flex; align-items: center; column-gap: 1.6rem; justify-content: flex-end;}
.game-schedule-list > ul > li .sub .option > button {width: fit-content; min-width: initial; height: fit-content; padding: 0; background-color: transparent;}

@media screen and (max-width: 768px) {
    .game-schedule-list + .game-schedule-list {margin-top: 4rem;}
    .game-schedule-list > ul {row-gap: 1.2rem;}
    .game-schedule-list > ul > li .sub {padding: 1.2rem 0; position: initial;}
    .game-schedule-list > ul > li .sub .desc {display: flex; align-items: center; column-gap: .8rem;}
    .game-schedule-list > ul > li .sub .desc .label {display: none;}
    .game-schedule-list > ul > li .sub .desc > ul {column-gap: .6rem;}
    .game-schedule-list > ul > li .sub .desc > ul > li {column-gap: .6rem;}
    .game-schedule-list > ul > li .sub .channel {position: relative; left: initial; -webkit-transform: initial; -moz-transform: initial; -ms-transform: initial; -o-transform: initial; transform: initial;}
    .game-schedule-list > ul > li .sub .channel > p {font-size: 1.2rem; line-height: 2rem;}
    .game-schedule-list > ul > li .sub .option {position: absolute; bottom: 2rem; right: 1.6rem;}
}

.game-schedule-list > ul > li .info {padding: 2rem 0; display: flex; align-items: center; justify-content: space-between;}
.game-schedule-list > ul > li .info .versus {display: flex; align-items: center; column-gap: 2rem;}
.game-schedule-list > ul > li .info .versus > li {width: 18rem; display: flex; align-items: center; column-gap: 1.2rem; justify-content: flex-end;}
.game-schedule-list > ul > li .info .versus > li:nth-child(2) {flex-flow: row-reverse;}
.game-schedule-list > ul > li .info .versus > li > div {display: flex; align-items: center; column-gap: .8rem; flex: 1;}
.game-schedule-list > ul > li .info .versus > li > div > i {width: 3.2rem; height: 3.2rem;}
.game-schedule-list > ul > li .info .versus > li > div > p {font-size: 1.6rem; font-weight: 500; line-height: 2.4rem; flex: 1;}
.game-schedule-list > ul > li .info .versus > li:nth-child(1) > div {flex-flow: row-reverse;}
.game-schedule-list > ul > li .info .versus > li:nth-child(1) > div > p {text-align: right;}
.game-schedule-list > ul > li .info .versus > li > p {width: 3.5rem; font-size: 2rem; line-height: 2.8rem; font-weight: 600;}
.game-schedule-list > ul > li .info .versus > li:nth-child(2) > p {text-align: right;}
.game-schedule-list > ul > li .info .versus > li.win > p {color: var(--black);}
.game-schedule-list > ul > li .info .versus > li.lose > p {color: var(--disabled);}
.game-schedule-list > ul > li .info .versus > li.draw > p {color: var(--disabled);}
.game-schedule-list > ul > li .info .versus > li.coming > p {color: var(--disabled);}
.game-schedule-list > ul > li .info .link {display: flex; align-items: center; justify-content: flex-end; column-gap: .8rem;}
.game-schedule-list > ul > li .info .link button {min-width: 9.6rem;}

@media screen and (max-width: 768px) {
    .game-schedule-list > ul > li .info {flex-flow: column; row-gap: 2rem; align-items: flex-start;}
    .game-schedule-list > ul > li .info .versus {width: 100%; display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 0;}
    .game-schedule-list > ul > li .info .versus > li {width: 100%; column-gap: .8rem;}
    .game-schedule-list > ul > li .info .versus > li > div {column-gap: .6rem;}
    .game-schedule-list > ul > li .info .versus > li > div > p {font-size: 1.4rem; line-height: 2rem;}
    .game-schedule-list > ul > li .info .versus > li > p {width: 3rem; font-size: 1.6rem; line-height: 2.4rem;}
    .game-schedule-list > ul > li .info .link {column-gap: .8rem;}
    .game-schedule-list > ul > li .info .link li {display: flex; align-items: center; column-gap: .8rem;}
    .game-schedule-list > ul > li .info .link li + li::before {content: ''; width: 1px; height: 1.2rem; background-color: var(--gray01);}
    .game-schedule-list > ul > li .info .link li > button {width: fit-content; min-width: initial; height: 2.4rem; padding: 0; background-color: transparent; border: 0; column-gap: 1.6rem; color: var(--black);}
    .game-schedule-list > ul > li .info .link li > button.red {color: var(--red);}
    .game-schedule-list > ul > li .info .link li > button.navy {color: var(--navy);}
}

.game-schedule-list.md > ul {row-gap: 1.2rem;}
.game-schedule-list.md > ul > li {padding: 0 1.6rem;}
.game-schedule-list.md > ul > li .sub {padding: 1.2rem 0; position: initial;}
.game-schedule-list.md > ul > li .sub .desc {display: flex; align-items: center; column-gap: .8rem;}
.game-schedule-list.md > ul > li .sub .desc .label {display: none;}
.game-schedule-list.md > ul > li .sub .desc > ul {column-gap: .6rem;}
.game-schedule-list.md > ul > li .sub .desc > ul > li {column-gap: .6rem;}
.game-schedule-list.md > ul > li .sub .channel {position: relative; left: initial; -webkit-transform: initial; -moz-transform: initial; -ms-transform: initial; -o-transform: initial; transform: initial;}
.game-schedule-list.md > ul > li .sub .channel img {height: 1.2rem;}
.game-schedule-list.md > ul > li .sub .option {position: absolute; bottom: 2rem; right: 1.6rem;}

.game-schedule-list.md > ul > li .info {flex-flow: column; row-gap: 2rem; align-items: flex-start;}
.game-schedule-list.md > ul > li .info .versus {width: 100%; display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 0;}
.game-schedule-list.md > ul > li .info .versus > li {width: 100%; column-gap: .8rem;}
.game-schedule-list.md > ul > li .info .versus > li > div {column-gap: .6rem;}
.game-schedule-list.md > ul > li .info .versus > li > div > p {font-size: 1.4rem; line-height: 2rem;}
.game-schedule-list.md > ul > li .info .versus > li > p {width: 3rem; font-size: 1.6rem; line-height: 2.4rem;}
.game-schedule-list.md > ul > li .info .link {column-gap: 1.6rem;}
.game-schedule-list.md > ul > li .info .link li {display: flex; align-items: center; column-gap: 1.6rem;}
.game-schedule-list.md > ul > li .info .link li + li::before {content: ''; width: 1px; height: 1.2rem; background-color: var(--gray01);}
.game-schedule-list.md > ul > li .info .link li > button {width: fit-content; min-width: initial; height: 2.4rem; padding: 0; background-color: transparent; border: 0; column-gap: 1.6rem; color: var(--black);}
.game-schedule-list.md > ul > li .info .link li > button.red {color: var(--red);}
.game-schedule-list.md > ul > li .info .link li > button.navy {color: var(--navy);}

.game-schedule-list.sm > ul > li {padding: 0 1.6rem;}
.game-schedule-list.sm > ul > li .sub .channel {position: relative; left: initial; -webkit-transform: initial; -moz-transform: initial; -ms-transform: initial; -o-transform: initial; transform: initial;}
.game-schedule-list.sm > ul > li .sub .channel > a > img {width: initial; border-radius: initial; filter: initial;}
.game-schedule-list.sm > ul > li .info .versus {width: 100%; column-gap: 0;}
.game-schedule-list.sm > ul > li .info .versus > li {width: 50%;}
.game-schedule-list.sm > ul > li .info .versus > li > div > p {max-width: 7rem; font-size: 1.4rem; line-height: 2rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}

@media screen and (max-width: 768px) {
    .game-schedule-list.sm > ul > li .info .versus > li {width: 100%;}
}

/* 경기 > 일정 및 결과 > 캘린더형 */
.calendar-wrap {display: flex; flex-flow: column;}
.calendar-wrap .week {display: grid; grid-template-columns: repeat(7, 1fr); border: 1px solid var(--gray02);}
.calendar-wrap .week > li {display: flex; align-items: center; justify-content: center; height: 3.2rem; font-size: 1.2rem; font-weight: 500; line-height: 1.6rem; color: var(--body);}
.calendar-wrap .week > li:nth-child(1) {color: var(--red);}
.calendar-wrap .week > li + li {border-left: 1px solid var(--gray02);}
.calendar-wrap .day {display: grid; grid-template-columns: repeat(7, 1fr); border: 1px solid var(--gray02); border-top: 0; border-bottom: 0;}
.calendar-wrap .day > li {min-height: 7.8rem; padding: .8rem; display: flex; flex-flow: column; row-gap: .4rem; border-bottom: 1px solid var(--gray02); border-left: 1px solid var(--gray02);}
.calendar-wrap .day > li:nth-child(7n+1) {border-left: 0;}
.calendar-wrap .day > li > p {font-size: 1.4rem; font-weight: 500; line-height: 2rem; color: var(--body);}
.calendar-wrap .day > li:nth-child(7n+1) > p {color: var(--red);}
.calendar-wrap .day > li > div {display: flex; align-items: center; justify-content: center; font-size: 1rem; line-height: 1.4rem; font-weight: 600; color: var(--disabled);}
.calendar-wrap .day > li > ul {display: flex; flex-flow: column; row-gap: .4rem; width: 100%;}
.calendar-wrap .day > li > ul > li {width: 100%; height: 3.8rem; border-radius: .4rem; background-color: var(--gray03); border: 1px solid transparent; display: flex; flex-flow: column; align-items: center; justify-content: center;}
.calendar-wrap .day > li > ul > li .team {display: flex; align-items: center; justify-content: center; column-gap: 2.4rem;}
.calendar-wrap .day > li > ul > li .team i {width: 1.6rem; height: 1.6rem;}
.calendar-wrap .day > li > ul > li .score {display: flex; align-items: center; justify-content: center; column-gap: 2rem;}
.calendar-wrap .day > li > ul > li .score > p {width: 2rem; text-align: center; font-size: 1rem; font-weight: 600; line-height: 1.4rem;}

.calendar-wrap .day > li > ul > li.coming {background-color: var(--white); border-color: var(--gray02);}
.calendar-wrap .day > li > ul > li.coming .team {column-gap: .8rem;}
.calendar-wrap .day > li > ul > li.coming .score > p {width: fit-content;}

.calendar-wrap .day > li > ul > li.d-league {background-color: #F9F4EC;}
.calendar-wrap .day > li > ul > li.coming-d-league {background-color: var(--white); border-color: #F0DEBA;}

@media screen and (max-width: 768px) {
    .calendar-wrap .day > li {min-height: 6.6rem; padding: .8rem .4rem;}
    .calendar-wrap .day > li > ul > li .team {column-gap: .6rem;}
    .calendar-wrap .day > li > ul > li .team i {width: 1.4rem; height: 1.4rem;}
    .calendar-wrap .day > li > ul > li .score {column-gap: 0; width: 100%;}
    .calendar-wrap .day > li > ul > li .score > p {width: 50%;}

    .calendar-wrap .day > li > ul > li.coming .team {column-gap: .6rem;}
}

.month-picker {display: flex; flex-flow: column; row-gap: 2rem;}
.month-picker .year {position: sticky; position: -webkit-sticky;  top: 0; background-color: var(--white); z-index: 20;}
.month-picker .year > p {font-size: 1.2rem; line-height: 1.6rem; color: var(--body); margin-bottom: 1.6rem;}
.month-picker .year .year-picker {height: 100%; cursor: pointer; position: relative; height: 4rem; border-top: 1px solid var(--gray02); border-bottom: 1px solid var(--gray02);}
.month-picker .year .year-picker::before {content: ''; display: block; width: 2.4rem; height: 100%; background: linear-gradient(90deg, #FFF 0%, rgba(255, 255, 255, 0.00) 100%); position: absolute; left: 0; z-index: 10;}
.month-picker .year .year-picker::after {content: ''; display: block; width: 2.4rem; height: 100%; background: linear-gradient(-90deg, #FFF 0%, rgba(255, 255, 255, 0.00) 100%); position: absolute; right: 0; z-index: 10;}
.month-picker .year .year-picker .swiper-slide {width: 5.2rem; height: 100%; text-align: center; font-size: 2rem; line-height: 2.8rem; color: var(--disabled); display: flex; align-items: center; justify-content: center;}
.month-picker .year .year-picker .swiper-slide-active {font-weight: 600; color: var(--black);}
.month-picker .month {display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: .4rem;}
.month-picker .month > li input + label::before {content: none;}
.month-picker .month > li input + label {width: 100%; height: 4rem; border-radius: .8rem; align-items: center; justify-content: center;}
.month-picker .month > li input + label > p {font-size: 1.4rem; line-height: 2rem;}
.month-picker .month > li input:checked + label {background-color: var(--subheadline);}
.month-picker .month > li input:checked + label > p {font-weight: 600; color: var(--white);}
.month-picker .calendar > div + div {margin-top: 2.4rem;}
.month-picker .calendar > div {display: flex; flex-flow: column; align-items: center;}
.month-picker .calendar > div > p {text-align: center; font-size: 1.6rem; font-weight: 600; line-height: 2.4rem; margin-bottom: 1.2rem;}
.month-picker .calendar > div .week {width: 100%; display: grid; grid-template-columns: repeat(7, 1fr); background-color: var(--gray03); border-radius: 1rem;}
.month-picker .calendar > div .week > li {height: 2rem; display: flex; align-items: center; justify-content: center; font-size: 1.2rem;}
.month-picker .calendar > div .day {width: 100%; display: grid; grid-template-columns: repeat(7, 1fr); position: relative;}
.month-picker .calendar > div .day > li input + label::before {content: none;}
.month-picker .calendar > div .day > li input + label {height: 5rem; align-items: center; justify-content: center;}
.month-picker .calendar > div .day > li input + label > p {font-size: 1.4rem; width: 3.6rem; height: 3.6rem; display: flex; align-items: center; justify-content: center; border-radius: 100%; position: relative; z-index: 10;}
.month-picker .calendar > div .day > li input + label > p.active {background-color: var(--subheadline); font-weight: 600; color: var(--white);}
.month-picker .calendar > div .day > li input.today + label > p {font-weight: 600; color: var(--orange)!important;}
.month-picker .calendar > div .day > li input:disabled + label > p {color: var(--disabled);}
.month-picker .calendar > div .day > li input:checked + label > p {background-color: var(--subheadline); font-weight: 600; color: var(--white);}
.month-picker .calendar.period {margin-bottom: 5.2rem;}
.month-picker .calendar.period > div .day > li input:checked + label::after {content: ''; width: calc(100% - 1.4rem); height: 3.6rem; background-color: var(--gray02); position: absolute; z-index: 5; border-radius: 1.8rem; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%);}
.month-picker .calendar .period {width: 100%; height: 5.2rem; display: flex; flex-flow: initial; align-items: center; justify-content: space-between; padding: 0 2rem; background-color: var(--white); position: absolute; left: 0; bottom: 8rem; z-index: 20; border-top: 1px solid var(--gray02);}
.month-picker .calendar .period > span {font-size: 1.4rem; line-height: 2rem; font-weight: 600;}
.month-picker .calendar .period > p {font-size: 2rem; line-height: 2.8rem; font-weight: 600; color: var(--orange); margin: 0; text-align: initial;}

/* 경기 > 일정 및 결과 > 기록 > 경기요약 */
.grid-2.schedule .empty {height: 32.4rem;}
.reset-wrap {display: flex; align-items: center; justify-content: space-between; margin-bottom: 2rem; height: 4rem; position: relative;}
.reset-wrap select {height: 4rem; padding: 0 4.4rem 0 1.2rem; border-radius: .8rem; background-position: center right 1rem; font-size: 1.4rem;}

.reset {display: flex; column-gap: .8rem; justify-content: flex-end; align-items: center; margin-left: auto;}
.reset > button {width: fit-content; height: fit-content; min-width: initial; padding: 0; background-color: transparent;}
.reset .list {min-width: 5.2rem; height: 3.2rem; padding: 0 1.2rem; font-size: 1.4rem; border-radius: .6rem;}

.reset-wrap .view-wrap {display: flex; align-items: center; column-gap: 1rem; position: absolute; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%);}

@media screen and (max-width: 768px) {
    .tab-style1.sticky.app {top: 0rem;}
    .reset-wrap {row-gap: 1.2rem;}
    .tab-style2 + .reset-wrap {margin-top: -1.2rem;}

    .reset.desktop {display: none;}
    .reset .list {display: none;}

    .reset-wrap .view-wrap {width: 100%; justify-content: space-between; position: relative; left: initial; -webkit-transform: initial; -moz-transform: initial; -ms-transform: initial; -o-transform: initial; transform: initial;}
}

.record-summary {width: 100%; padding: 3.2rem; background-color: var(--black); border-radius: 2rem; display: flex; flex-flow: column; align-items: center; justify-content: center; row-gap: .4rem;}
.record-summary .versus {display: flex; align-items: flex-start; justify-content: center; column-gap: 4rem; }
.record-summary .versus > li {display: flex; align-items: flex-start; column-gap: 4rem;}
.record-summary .versus > li > ul {display: flex; flex-flow: column; row-gap: .4rem;}
.record-summary .versus > li > ul > li {display: flex; align-items: center; column-gap: .8rem;}
.record-summary .versus > li > ul > li > p {width: 2.2rem; font-size: 1.2rem; line-height: 1.6rem; color: var(--disabled);}
.record-summary .versus > li > ul.en > li > p {width: 4.2rem;}
.record-summary .versus > li > ul > li > span {font-size: 1.2rem; line-height: 1.6rem; color: var(--white); flex: 1;}
.record-summary .versus > li > div {display: flex; align-items: center; column-gap: 2rem;}
.record-summary .versus > li > div .team {width: 12rem; display: flex; flex-flow: column; row-gap: .8rem; align-items: center;}
.record-summary .versus > li > div .team > i {width: 6.6rem; height: 4rem;}
.record-summary .versus > li > div .team > i.lg {background-image: url(../img/logo/logo-lg-dark.svg);}
.record-summary .versus > li > div .team > i.kgc {background-image: url(../img/logo/logo-kgc-dark.svg);}
.record-summary .versus > li > div .team > p {font-size: 1.4rem; line-height: 2rem; font-weight: 500; color: var(--white);}
.record-summary .versus > li > div > p {font-size: 2.8rem; line-height: 3.6rem; color: var(--white); font-weight: 600; width: 5rem; text-align: center;}
.record-summary .versus > li.win > div > p {color: var(--white);}
.record-summary .versus > li.lose > div > p {color: var(--disabled);}
.record-summary .versus > li.draw > div > p {color: var(--disabled);}
.record-summary .versus > li:nth-child(2) {flex-flow: row-reverse;}
.record-summary .versus > li:nth-child(2) > div {flex-flow: row-reverse;}
.record-summary .sub {display: flex; flex-flow: column; row-gap: .8rem; align-items: center; margin-bottom: 2rem;}
.record-summary .sub > p {font-size: 1.2rem; line-height: 1.6rem; color: var(--disabled);}
.record-summary .sub > .channel {display: flex; align-items: center; column-gap: .8rem;}
.record-summary .sub > .channel img {height: 1rem;}
.record-summary .sub > .channel > p {font-size: 1.2rem; line-height: 2.4rem; flex: 1; color: var(--disabled);}
.record-summary .record {position: relative; display: flex; align-items: center;}
.record-summary .record > div {background-color: #000000; border-radius: 1.2rem; padding: 1.2rem 1.2rem 2.4rem;}
.record-summary .record > div table::before {content: none;}
.record-summary .record > div table::after {content: none;}
.record-summary .record > div table thead tr > * {height: 2.4rem; padding: .4rem 1.2rem; background-color: transparent; font-size: 1.2rem; line-height: 1.6rem; border: 0; color: var(--gray01); text-transform: uppercase;}
.record-summary .record > div table thead tr > * + * {border: 0;}
.record-summary .record > div table tbody tr > * {height: 2.8rem; padding: .4rem .6rem; background-color: transparent; border: 0; color: var(--white); font-weight: 500; text-transform: uppercase;}
.record-summary .record > div table tbody tr:last-child > * {border: 0;}
.record-summary .record > div table tr > *:first-child {padding-right: 1.6rem;}
.record-summary .record > div table tr > *:last-child {color: var(--orange); padding-left: 2rem;}
.record-summary .record > ul {display: flex; flex-flow: column; row-gap: .4rem; position: absolute; left: 36.8rem; width: max-content;}
.record-summary .record > ul > li {display: flex; align-items: center; column-gap: .8rem;}
.record-summary .record > ul > li > p {width: 2.2rem; font-size: 1.2rem; line-height: 1.6rem; color: var(--disabled);}
.record-summary .record > ul.en > li > p {width: 9rem;}
.record-summary .record > ul > li > span {font-size: 1.2rem; line-height: 1.6rem; color: var(--white);}

@media screen and (max-width: 768px) {
    .record-summary {width: 100vw; padding: 3.2rem 2.4rem; margin: 0 -2rem; border-radius: 0; row-gap: 2.4rem; position: relative;}
    .record-summary > div {display: flex; align-items: center; justify-content: center; width: 100%;}
    .record-summary .versus {column-gap: 3.2rem; width: 100%;}
    .record-summary .versus > li {width: calc((100% - 3.2rem) / 2); flex-flow: column-reverse; row-gap: 5.8rem;}
    .record-summary .versus > li > div {column-gap: 2rem; width: 100%;}
    .record-summary .versus > li > div > p {font-size: 2.8rem; line-height: 3.6rem; color: var(--white); font-weight: 600; width: 4rem; text-align: center;}
    .record-summary .versus > li > div .team {width: calc(100% - 4rem - 2rem);}
    .record-summary .versus > li > div .team > p {height: 4rem; text-align: center; word-break: keep-all; display: flex; align-items: center; justify-content: center;}
    .record-summary .versus > li:nth-child(2) {flex-flow: column-reverse;}
    .record-summary .versus > li:nth-child(2) > ul {margin-left: auto;}
    .record-summary .versus > li > ul > li > span {width: 5.2rem;}
    .record-summary .sub {margin-bottom: 0; position: absolute; top: 12.4rem;}
    .record-summary .record {position: initial;}
    .record-summary .record > ul {width: calc((100vw - 10rem) / 3); top: 17.8rem; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%);}
    .record-summary .record > ul > li > span {width: 5.2rem;}
}

.record-summary.md {flex-flow: initial; column-gap: 4.8rem; margin-bottom: 1.2rem;}
.record-summary.md > div {display: flex; flex-flow: column; row-gap: 1.2rem;}
.record-summary.md .versus {display: flex; align-items: center; justify-content: center; column-gap: 4rem;}
.record-summary.md .versus > li > div > p {font-size: 2.8rem; line-height: 3.6rem; color: var(--white); font-weight: 600; width: 5rem; text-align: center;}
.record-summary.md .sub {margin-bottom: 0;}

@media screen and (max-width: 768px) {
    .record-summary.md {flex-flow: column;}
    .record-summary.md .sub {position: relative; top: initial;}
}

.team-versus {display: flex; align-items: center; column-gap: 2rem; margin-bottom: 2rem;}
.team-versus.mobile {display: none;}

.team-versus .team {width: calc((100% - 4rem - 4.8rem) / 2); height: 9.6rem; border-radius: .8rem; display: flex; flex-flow: column; justify-content: flex-start; align-items: center; padding-top: .8rem;}
.team-versus .team > i {width: 4.8rem;  height: 4.8rem;}
.team-versus .team > p {font-size: 1.4rem; font-weight: 500; line-height: 2rem; color: var(--white); text-align: center; width: 12rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}

.team-versus.md .team {height: 6.4rem; flex-flow: initial; justify-content: center; column-gap: 1.4rem; padding-top: 0;}
.team-versus.md .team:nth-child(1) {flex-flow: row-reverse;}

@media screen and (max-width: 768px) {
    .team-versus {column-gap: 1.6rem; margin-bottom: 2.4rem;}
    .team-versus.mobile {display: flex;}

    .team-versus .team {width: calc((100% - 3.2rem - 4.8rem) / 2); height: 8.4rem;}

    .team-versus.md .team {height: 8.4rem; flex-flow: column; justify-content: center;}
    .team-versus.md .team:nth-child(1) {flex-flow: column;}
}

.team-versus .team.kgc {background-color: var(--kgc-main);}
.team-versus .team.lg {background-color: var(--lg-main);}
.team-versus .team.sk {background-color: var(--sk-main);}
.team-versus .team.hd {background-color: var(--hd-main);}
.team-versus .team.sono {background-color: var(--sono-main);}
.team-versus .team.kcc {background-color: var(--kcc-main);}
.team-versus .team.db {background-color: var(--db-main);}
.team-versus .team.kt {background-color: var(--kt-main);}
.team-versus .team.pega {background-color: var(--pega-main);}
.team-versus .team.ss {background-color: var(--ss-main);}

.team-versus .team .ic-emblem.kgc {background-image: url(../img/ico/logo/ic-kgc-dark-line.svg);}
.team-versus .team .ic-emblem.lg {background-image: url(../img/ico/logo/ic-lg-dark.svg);}

.team-versus .team .ic-logo.kgc {background-image: url(../img/logo/logo-kgc-dark-line-20240919.svg);}
.team-versus .team .ic-logo.lg {background-image: url(../img/logo/logo-lg-dark.svg);}
.team-versus .team .ic-logo.sk {background-image: url(../img/logo/logo-sk-dark.svg);}
.team-versus .team .ic-logo.hd {background-image: url(../img/logo/logo-hd-dark.svg);}
.team-versus .team .ic-logo.sono {background-image: url(../img/logo/logo-sono-dark.svg);}
.team-versus .team .ic-logo.kcc {background-image: url(../img/logo/logo-kcc-dark.svg);}
.team-versus .team .ic-logo.db {background-image: url(../img/logo/logo-db-dark.svg);}
.team-versus .team .ic-logo.kt {background-image: url(../img/logo/logo-kt-dark.svg);}
.team-versus .team .ic-logo.pega {background-image: url(../img/logo/logo-pega-dark.svg);}
.team-versus .team .ic-logo.ss {background-image: url(../img/logo/logo-ss-dark.svg);}

.team-versus .team.or {background-color: var(--sono-main);}
.team-versus .team.zz {background-color: var(--pega-main);}
.team-versus .team.kaf {background-color: var(--kaf-main);}

.team-record-table1 td > p {width: 5.6rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.team-record-table1.schedule {max-height: 27.6rem; overflow-y: auto; border-bottom: 1px solid var(--gray01);}
.team-record-table1.schedule table::before {content: none;}
.team-record-table1.schedule table::after {content: none;}
.team-record-table1.schedule thead {position: sticky; position: -webkit-sticky; top: 0;}
.team-record-table1.schedule thead::before {content: ''; width: 100%; height: 1px; background-color: var(--disabled); position: absolute; top: 0; left: 0; z-index: 10;}
.team-record-table1.schedule thead::after {content: ''; width: 100%; height: 1px; background-color: var(--gray02); position: absolute; bottom: 0; left: 0; z-index: 10;}
.team-record-table1.schedule thead th {position: relative;}
.team-record-table1.schedule thead th:nth-child(1):before {content: ''; width: 1px; height: 100%; background-color: var(--gray02); position: absolute; top: 0; right: -.1rem; z-index: 10;}

.media-type2 {display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 5rem 2rem;}
.media-type2 > li,
.media-type2 > li > a {display: flex; flex-flow: column; row-gap: 2rem;}
.media-type2 > li .img {width: 100%; height: 16rem; border-radius: 1.2rem; overflow: hidden; display: flex; align-items: center; justify-content: center;}
.media-type2 > li .img img {width: 100%;}
.media-type2 > li .desc {display: flex; flex-flow: column; row-gap: .8rem;}
.media-type2 > li .desc > p {font-size: 1.6rem; line-height: 2.4rem; font-weight: 500; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; line-clamp: 1; -webkit-line-clamp: 1; -webkit-box-orient: vertical;}
.media-type2 > li .desc > ul {display: flex; align-items: center; column-gap: .8rem;}
.media-type2 > li .desc > ul > li {font-size: 1.2rem; line-height: 1.6rem; color: var(--body);}
.media-type2 > li .desc > span {font-size: 1.4rem; line-height: 2rem; color: var(--subheadline); word-break: keep-all;}

.media-type2.grid-3 {grid-template-columns: repeat(3, 1fr); grid-gap: 5rem 1.2rem;}
.media-type2.grid-3 > li .img {height: 14.8rem;}

.media-type2.grid-4 {width: 120rem;}

@media screen and (max-width: 768px) {
    .media-type2 {grid-template-columns: repeat(2, 1fr); grid-gap: 2.4rem 1.6rem;}
    .media-type2 > li,
    .media-type2 > li > a {row-gap: 1.2rem;}
    .media-type2 > li .img {height: 24vw; border-radius: .8rem;}
    .media-type2 > li .desc > p {font-size: 1.4rem; line-height: 2rem; line-clamp: 2; -webkit-line-clamp: 2;}
    .media-type2 > li .desc > ul {display: flex; align-items: center; column-gap: .8rem;}

    .media-type2.grid-3 {grid-template-columns: repeat(2, 1fr); grid-gap: 2.4rem 1.6rem;}
    .media-type2.grid-3 > li .img {height: 24vw;}

    .media-type2.grid-4 {width: unset;}

    .media-scroll {width: 100vw; margin: 0 -2rem; padding: 0 2rem; overflow-y: auto;}
    .media-scroll .media-type2 {display: flex; align-items: flex-start; column-gap: 1.2rem; width: max-content;}
    .media-scroll .media-type2 > li {width: 21.6rem; row-gap: 2rem;}
    .media-scroll .media-type2 > li > a {row-gap: 2rem;}
    .media-scroll .media-type2 > li .img {height: 12rem;}
    .media-scroll .media-type2 > li .desc > p {line-clamp: 1; -webkit-line-clamp: 1;}
}

.media-type3 {display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 5rem 1.4rem;}
.media-type3 > li > a {position: relative; display: block;}
.media-type3 > li > a .img {width: 100%; height: 29rem; position: relative; border-radius: .8rem; overflow: hidden; display: flex; align-items: center; justify-content: center; background-repeat: no-repeat; background-size: cover; background-position: center top;}
.media-type3 > li > a .img::before {content: ''; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: linear-gradient(180deg, rgba(255, 255, 255, 0.0) 0%, rgba(0, 0, 0, 0.75) 100%);}
.media-type3 > li > a .img::after {content: ''; width: 7.2rem; height: 7.2rem; background-repeat: no-repeat; background-size: contain; background-position: center; margin-bottom: 8rem; position: absolute; z-index: 1;}
.media-type3 > li > a .desc {width: 100%; height: 100%; position: absolute; top: 0; left: 0; padding: 1.6rem; display: flex; flex-flow: column; justify-content: flex-end; row-gap: .8rem; z-index: 10;}
.media-type3 > li > a .desc > p {font-size: 1.6rem; line-height: 2.4rem; font-weight: 500; color: var(--white); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; line-clamp: 2; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.media-type3 > li > a .desc > span {font-size: 1.2rem; line-height: 1.6rem; color: var(--gray01);}

.media-type3 > li > a .img.kbl {background-color: var(--navy);}
.media-type3 > li > a .img.kgc {background-color: var(--kgc-main);}
.media-type3 > li > a .img.lg {background-color: var(--lg-main);}
.media-type3 > li > a .img.sk {background-color: var(--sk-main);}
.media-type3 > li > a .img.hd {background-color: var(--hd-main);}
.media-type3 > li > a .img.sono {background-color: var(--sono-main);}
.media-type3 > li > a .img.kcc {background-color: var(--kcc-main);}
.media-type3 > li > a .img.db {background-color: var(--db-main);}
.media-type3 > li > a .img.kt {background-color: var(--kt-main);}
.media-type3 > li > a .img.pega {background-color: var(--pega-main);}
.media-type3 > li > a .img.ss {background-color: var(--ss-main);}

.media-type3 > li > a .img.kbl::after {background-image: url(../img/ico/logo/ic-kbl.svg);}
.media-type3 > li > a .img.kgc::after {background-image: url(../img/ico/logo/ic-kgc.svg);}
.media-type3 > li > a .img.lg::after {background-image: url(../img/ico/logo/ic-lg.svg);}
.media-type3 > li > a .img.sk::after {background-image: url(../img/ico/logo/ic-sk.svg);}
.media-type3 > li > a .img.hd::after {background-image: url(../img/ico/logo/ic-hd.svg);}
.media-type3 > li > a .img.sono::after {background-image: url(../img/ico/logo/ic-sono.svg);}
.media-type3 > li > a .img.kcc::after {background-image: url(../img/ico/logo/ic-kcc.svg);}
.media-type3 > li > a .img.db::after {background-image: url(../img/ico/logo/ic-db.svg);}
.media-type3 > li > a .img.kt::after {background-image: url(../img/ico/logo/ic-kt.svg);}
.media-type3 > li > a .img.pega::after {background-image: url(../img/ico/logo/ic-pega.svg);}
.media-type3 > li > a .img.ss::after {background-image: url(../img/ico/logo/ic-ss.svg);}

.media-type3.grid-6 {grid-template-columns: repeat(6, 1fr);}

@media screen and (max-width: 768px) {
    .media-type3 {grid-template-columns: repeat(2, 1fr); grid-gap: 1.2rem;}
    .media-type3 > li > a .img {height: 75vw;}
    .media-type3 > li > a .desc > p {font-size: 1.4rem; line-height: 2rem;}

    .media-scroll {width: 100vw; margin: 0 -2rem; padding: 0 2rem; overflow-y: auto;}
    .media-scroll .media-type3 {display: flex; align-items: flex-start; column-gap: 1.2rem; width: max-content;}
    .media-scroll .media-type3 > li {width: 15.8rem;}
    .media-scroll .media-type3 > li > a .img {height: 24rem;}
}

/* 경기 > 일정 및 결과 > 기록 > 경기기록 */
.game-record-table1 {width: max-content; min-width: 100%;}
.game-record-table1 th:nth-child(1) {position: sticky; position: -webkit-sticky; left: 0;}
.game-record-table1 th:nth-child(1)::after {content: ''; width: 1px; height: 100%; background-color: var(--gray02); position: absolute; top: 0; right: -.1rem;}
.game-record-table1 th:nth-child(2) {position: sticky; position: -webkit-sticky; left: 4.6rem;}
.game-record-table1 th:nth-child(2)::after {content: ''; width: 1px; height: 100%; background-color: var(--gray02); position: absolute; top: 0; right: -.1rem;}
.game-record-table1 td:nth-child(1) {position: sticky; position: -webkit-sticky; left: 0;}
.game-record-table1 td:nth-child(2) {position: sticky; position: -webkit-sticky; left: 4.6rem;}
.game-record-table1 td > p {overflow: hidden; text-overflow: ellipsis; display: -webkit-box; line-clamp: 1; -webkit-line-clamp: 1; -webkit-box-orient: vertical;}

.game-record-table1.kgc .starter {background-color: var(--kgc-sub);}
.game-record-table1.sono .starter {background-color: var(--sono-sub);}
.game-record-table1.lg .starter {background-color: var(--lg-sub);}
.game-record-table1.sk .starter {background-color: var(--sk-sub);}
.game-record-table1.hd .starter {background-color: var(--hd-sub);}
.game-record-table1.kcc .starter {background-color: var(--kcc-sub);}
.game-record-table1.db .starter {background-color: var(--db-sub);}
.game-record-table1.kt .starter {background-color: var(--kt-sub);}
.game-record-table1.pega .starter {background-color: var(--pega-sub);}
.game-record-table1.ss .starter {background-color: var(--ss-sub);}

.mobile-table1 table::before {content: none;}
.mobile-table1 thead {position: sticky; position: -webkit-sticky; top: 0;}
.mobile-table1 thead::before {content: ''; width: 100%; height: 1px; background-color: var(--disabled); position: absolute; top: 0; left: 0; z-index: 10;}
.mobile-table1 thead::after {content: ''; width: 100%; height: 1px; background-color: var(--gray02); position: absolute; bottom: 0; left: 0; z-index: 10;}
.mobile-table1 thead th {position: relative;}
.mobile-table1 thead th:nth-child(1):before {content: ''; width: 1px; height: 100%; background-color: var(--gray02); position: absolute; top: 0; right: -.1rem; z-index: 10;}

.team-record-table td {display: table-cell;}
.team-record-table td.kgc {color: var(--kgc-main); background-color: var(--kgc-sub);}
.team-record-table td.lg {color: var(--lg-main); background-color: var(--lg-sub);}
.team-record-table td.sk {color: var(--sk-main); background-color: var(--sk-sub);}
.team-record-table td.hd {color: var(--hd-main); background-color: var(--hd-sub);}
.team-record-table td.sono {color: var(--sono-main); background-color: var(--sono-sub);}
.team-record-table td.or {color: var(--sono-main); background-color: var(--sono-sub);}
.team-record-table td.kcc {color: var(--kcc-main); background-color: var(--kcc-sub);}
.team-record-table td.db {color: var(--db-main); background-color: var(--db-sub);}
.team-record-table td.kt {color: var(--kt-main); background-color: var(--kt-sub);}
.team-record-table td.pega {color: var(--pega-main); background-color: var(--pega-sub);}
.team-record-table td.zz {color: var(--pega-main); background-color: var(--pega-sub);}
.team-record-table td.ss {color: var(--ss-main); background-color: var(--ss-sub);}
.team-record-table td.kaf {color: var(--kaf-main); background-color: var(--kaf-sub);}
.team-record-table td.tit {background-color: var(--white);}

/* 경기 > 일정 및 결과 > 기록 > 경기차트 */
.option-filter {display: flex; align-items: center; grid-gap: .4rem; margin-bottom: 2.4rem; flex-wrap: wrap;}
.option-filter > li > input + label {display: flex; align-items: center; justify-content: center; column-gap: .4rem; width: fit-content; min-width: 4.4rem; height: 3.2rem; padding: 0 1.2rem; border-radius: .6rem; background-color: var(--gray02); font-size: 1.4rem; font-weight: 500; color: var(--body);}
.option-filter > li > input + label::before {content: none;}
.option-filter > li > input:checked + label {background-color: var(--black); color: var(--white);}

.shoot-chart {display: flex; align-items: flex-start; justify-content: space-between; column-gap: 6.6rem;}
.shoot-chart .player {width: fit-content; display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: .8rem .4rem;}
.shoot-chart .player > li {width: fit-content;}
.shoot-chart .player > li input + label {width: 8rem; height: 3.2rem; padding: 0 1rem; border-radius: .6rem; align-items: center; justify-content: center; background-color: var(--gray02); color: var(--body);}
.shoot-chart .player > li input + label > p {font-size: 1.4rem; text-align: center; margin: 0 auto; font-weight: 500; line-height: 2rem; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; line-clamp: 1; -webkit-line-clamp: 1; -webkit-box-orient: vertical;}
.shoot-chart .player > li input + label::before {content: none;}

@media screen and (max-width: 768px) {
    .shoot-chart {display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 1.2rem;}
    .shoot-chart .player {grid-row: 2;}
    .shoot-chart .player:last-child {margin-left: auto;}
    .shoot-chart .player > li input + label {width: 7.2rem;}
}

.shoot-chart .player.kgc > li input:checked + label {color: var(--kgc-main); background-color: var(--kgc-sub);}
.shoot-chart .player.lg > li input:checked + label {color: var(--lg-main); background-color: var(--lg-sub);}
.shoot-chart .player.sk > li input:checked + label {color: var(--sk-main); background-color: var(--sk-sub);}
.shoot-chart .player.hd > li input:checked + label {color: var(--hd-main); background-color: var(--hd-sub);}
.shoot-chart .player.sono > li input:checked + label {color: var(--sono-main); background-color: var(--sono-sub);}
.shoot-chart .player.kcc > li input:checked + label {color: var(--kcc-main); background-color: var(--kcc-sub);}
.shoot-chart .player.db > li input:checked + label {color: var(--db-main); background-color: var(--db-sub);}
.shoot-chart .player.kt > li input:checked + label {color: var(--kt-main); background-color: var(--kt-sub);}
.shoot-chart .player.pega > li input:checked + label {color: var(--pega-main); background-color: var(--pega-sub);}
.shoot-chart .player.ss > li input:checked + label {color: var(--ss-main); background-color: var(--ss-sub);}

.shoot-chart .chart .img {position: relative;}
.shoot-chart .chart .img img {width: 100%;}
.shoot-chart .chart .img .success {width: 0.8rem; height: 0.8rem; border-radius: 100%; border: 1px solid; position: absolute;}
.shoot-chart .chart .img .try {width: 0.8rem; height: 1.0px; display: block; background-color: transparent; position: absolute;}
.shoot-chart .chart .img .try::before {content: ''; display: block; width: 100%; height: 1px; background-color: var(--body); transform: rotate(45deg); position: absolute; top: 0;}
.shoot-chart .chart .img .try::after {content: ''; display: block; width: 100%; height: 1px; background-color: var(--body); transform: rotate(-45deg); position: absolute; top: 0;}

@media screen and (max-width: 768px) {
    .shoot-chart .chart {grid-row: 1; grid-column: 1 / span 2;}
    .shoot-chart .chart .img {width: 36.3rem; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%);}
    .shoot-chart .chart .img img {width: 100%;}
}

.shoot-chart .chart .img .success.kgc {border-color: var(--kgc-main);}
.shoot-chart .chart .img .success.lg {border-color: var(--lg-main);}
.shoot-chart .chart .img .success.sk {border-color: var(--sk-main);}
.shoot-chart .chart .img .success.hd {border-color: var(--hd-main);}
.shoot-chart .chart .img .success.sono {border-color: var(--sono-main);}
.shoot-chart .chart .img .success.or {border-color: var(--sono-main);}
.shoot-chart .chart .img .success.kcc {border-color: var(--kcc-main);}
.shoot-chart .chart .img .success.db {border-color: var(--db-main);}
.shoot-chart .chart .img .success.kt {border-color: var(--kt-main);}
.shoot-chart .chart .img .success.pega {border-color: var(--pega-main);}
.shoot-chart .chart .img .success.zz {border-color: var(--pega-main);}
.shoot-chart .chart .img .success.ss {border-color: var(--ss-main);}
.shoot-chart .chart .img .success.kaf {border-color: var(--kaf-main);}

.shoot-chart .chart > ul {display: flex; align-items: center; justify-content: space-between; margin-top: 1.2rem;}
.shoot-chart .chart > ul > li {font-size: 1.6rem; line-height: 2.4rem; font-weight: 600;}
.shoot-chart .chart > ul > li:nth-child(2) {text-align: right;}
.shoot-chart .chart > ul > li > span {font-weight: initial;}

.chart-info {display: flex; align-items: center; column-gap: 2.4rem; margin-bottom: 2rem;}
.chart-info > li {display: flex; align-items: center; column-gap: .8rem;}
.chart-info > li .ic-emblem {width: 3.2rem; height: 3.2rem;}
.chart-info > li > span {width: 2.8rem; height: .4rem; display: block;}

.team-best-player {display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 2rem;}
.team-best-player > li {height: 12.8rem; display: flex; align-items: center; justify-content: center; column-gap: 2.8rem; border-radius: .8rem; border: 1px solid var(--gray02); filter: drop-shadow(0px 6px 12px rgba(25, 25, 25, 0.05));}
.team-best-player > li .player {width: calc((100% - 6.4rem) / 2); display: flex; flex-flow: column; align-items: center; row-gap: .8rem;}
.team-best-player > li .player .img {width: 6.4rem; height: 6.4rem; border-radius: 100%; background-color: var(--gray03); overflow: hidden; display: flex; align-items: flex-start; justify-content: center;}
.team-best-player > li .player .img img {width: 120%;}
.team-best-player > li .player > p {font-size: 1.2rem; font-weight: 600; line-height: 1.6rem; text-align: center;}

@media screen and (max-width: 768px) {
    .team-best-player {grid-template-columns: repeat(1, 1fr); grid-gap: 1.2rem;}
}

.team-best-player > li .player.win .img.kgc {background-color: var(--kgc-main);}
.team-best-player > li .player.win .img.lg {background-color: var(--lg-main);}
.team-best-player > li .player.win .img.sk {background-color: var(--sk-main);}
.team-best-player > li .player.win .img.hd {background-color: var(--hd-main);}
.team-best-player > li .player.win .img.sono {background-color: var(--sono-main);}
.team-best-player > li .player.win .img.kcc {background-color: var(--kcc-main);}
.team-best-player > li .player.win .img.db {background-color: var(--db-main);}
.team-best-player > li .player.win .img.kt {background-color: var(--kt-main);}
.team-best-player > li .player.win .img.pega {background-color: var(--pega-main);}
.team-best-player > li .player.win .img.ss {background-color: var(--ss-main);}

.team-best-player > li .score {width: 6.4rem; display: flex; flex-flow: column; align-items: center; row-gap: .4rem;}
.team-best-player > li .score > span {text-align: center; font-size: 1.2rem; line-height: 1.6rem; color: var(--body);}
.team-best-player > li .score > p {font-size: 2rem; color: var(--disabled); display: flex; align-items: center; column-gap: .4rem;}
.team-best-player > li .score > p .win {color: var(--black); font-weight: 600;}

/* 경기 > 일정 및 결과 > 기록 > 문자중계 */
.sms-broadcast-table table {table-layout: fixed;}
.sms-broadcast-table table tr > * {background-color: var(--white); height: 4.4rem; border: 0;}
.sms-broadcast-table table tr:nth-child(2n) > * {background-color: var(--gray03);}
.sms-broadcast-table table tr > th {font-size: 1.2rem; line-height: 1.6rem;}
.sms-broadcast-table table tr > td > p {text-align: left; word-break: keep-all;}
.sms-broadcast-table table tr > td > p > i {display: inline-block; vertical-align: middle;}
.sms-broadcast-table table tr > td:nth-child(1) > p {text-align: right;}
.sms-broadcast-table table tr > th.start {color: var(--black); font-weight: 500; font-size: 1.4rem;}

/* 경기 > 일정 및 결과 > 프리뷰 */
.taem-record-table1 table {table-layout: fixed;}
.taem-record-table1 + .taem-record-table1 {margin-top: 2rem;}
.taem-record-table1 table .total td {position: relative;}
.taem-record-table1 table .total td::before {content: ''; width: 100%; height: 1px; display: block; background-color: var(--gray01); position: absolute; top: 0; left: 0;}

.recent-game {display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 6rem;}
.recent-game .result {height: 5.6rem; border: 1px solid var(--gray02); border-radius: .8rem; display: flex; align-items: center; justify-content: space-between; padding: 0 2rem; margin-bottom: 1.2rem;}
.recent-game .result .team-name {column-gap: .8rem;}
.recent-game .result .team-name i {width: 3.2rem; height: 3.2rem;}
.recent-game .result > p {font-size: 1.6rem; font-weight: 600; line-height: 2.4rem;}

@media screen and (max-width: 768px) {
    .recent-game {grid-template-columns: repeat(1, 1fr); grid-gap: 2.4rem;}

    .player-record-table1 {width: 100%;}ㄴ
    .player-record-table1 th:nth-child(1) {position: sticky; position: -webkit-sticky; left: 0; width: 8.8rem;}
    .player-record-table1 th:not(:nth-child(1)) {min-width: 4.4rem;}
    .player-record-table1 th:nth-child(1)::after {content: ''; width: 1px; height: 100%; background-color: var(--gray02); position: absolute; top: 0; right: -.1rem;}
    .player-record-table1 td[rowspan]:nth-child(1) {position: sticky; position: -webkit-sticky; left: 0;}
    .player-record-table1 td > p {width: 7.2rem; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; line-clamp: 1; -webkit-line-clamp: 1; -webkit-box-orient: vertical;}
}

/* 경기 > 팀순위 > 정규경기 */
.filter-select {padding: 1.2rem 2rem; background-color: var(--gray03); display: flex; grid-gap: 1rem 2rem; flex-wrap: wrap; align-items: center; margin-bottom: 2.4rem;}
.filter-select > li {position: relative; display: flex; align-items: center; column-gap: .8rem;}
.filter-select > li > p {font-size: 1.4rem; line-height: 2rem; color: var(--subheadline);}
.filter-select > li > span {font-size: 1.6rem; line-height: 2.4rem; font-weight: 600; min-width: 11.2rem; text-align: right;}
.filter-select > li > i.ic-search {position: absolute; right: 1.2rem;}
.filter-select select {min-width: 16rem; height: 4rem; padding: 0 4.4rem 0 1.2rem; border-radius: .8rem; background-position: center right 1rem; font-size: 1.4rem;}
.filter-select input {min-width: 33rem; height: 4rem; padding: 0 1.2rem; font-size: 1.4rem; border-radius: .8rem;}
.filter-select button {min-width: 6.4rem; height: 4rem; padding: 0 1.2rem; font-size: 1.4rem; border-radius: .8rem;}

@media screen and (max-width: 768px) {
    .contents > .desktop + .filter-select {margin-top: -2.4rem;}
    .filter-select:first-child {margin-top: -2.4rem;}
    .filter-select {display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: .8rem 1rem; width: 100vw; margin: 0 -2rem 2.4rem;}
    .filter-select > li:nth-child(1):nth-last-child(1) {grid-column: 1 / span 2;}
    .filter-select > li:nth-child(1):nth-last-child(5) {grid-column: 1 / span 2;}
    .filter-select > li.desktop {display: none;}
    .filter-select > li > span {min-width: fit-content; text-align: right;}
    .filter-select select {min-width: initial; width: 100%;}
    .filter-select input {min-width: initial; width: 100%;}
    .filter-select button {min-width: initial; width: 100%;}
    .filter-select button.desktop {display: none;}

    .filter-select.grid-1 {grid-template-columns: repeat(1, 1fr);}

    .filter-select.grid-3 {grid-template-columns: repeat(3, 1fr);}
    .filter-select.grid-3 .column-1-2 {grid-column: 1 / span 2;}
    .filter-select.grid-3 .column-2-2 {grid-column: 2 / span 2;}
}

@media screen and (max-width: 768px) {
    .team-rank-table1 {width: max-content;}
    .team-rank-table1 th:nth-child(1) {position: sticky; position: -webkit-sticky; left: 0;}
    .team-rank-table1 th:nth-child(1)::after {content: ''; width: 1px; height: 100%; background-color: var(--gray02); position: absolute; top: 0; right: -.1rem;}
    .team-rank-table1 th:nth-child(2) {position: sticky; position: -webkit-sticky; left: 4.6rem;}
    .team-rank-table1 th:nth-child(2)::after {content: ''; width: 1px; height: 100%; background-color: var(--gray02); position: absolute; top: 0; right: -.1rem;}
    .team-rank-table1 td:nth-child(1) {position: sticky; position: -webkit-sticky; left: 0;}
    .team-rank-table1 td:nth-child(2) {position: sticky; position: -webkit-sticky; left: 4.6rem;}
}

.team-list-chk {display: flex; align-items: center; column-gap: .6rem;}
.team-list-chk > li {width: calc((100% - (.6rem * 9)) / 10);}
.team-list-chk > li input + label {width: 100%; height: 3.2rem; border-radius: .6rem; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; font-weight: 500; line-height: 2rem; background-color: var(--gray02); color: var(--body);}
.team-list-chk > li input + label::before {content: none;}

.team-list-chk.sm {display: grid; grid-template-columns: repeat(5, 1fr); grid-gap: .8rem .4rem;}
.team-list-chk.sm > li {width: 100%;}
.team-list-chk.sm > li input + label {font-size: 1.2rem; font-weight: 500; line-height: 1.6rem;}

@media screen and (max-width: 768px) {
    .team-list-chk {display: grid; grid-template-columns: repeat(5, 1fr); grid-gap: .8rem .4rem;}
    .team-list-chk > li {width: 100%;}
    .team-list-chk > li input + label {font-size: 1.2rem; font-weight: 500; line-height: 1.6rem;}
}

.team-list-chk > li input[id='kgc']:checked + label {color: var(--kgc-main); background-color: var(--kgc-sub);}
.team-list-chk > li input[id='lg']:checked + label {color: var(--lg-main); background-color: var(--lg-sub);}
.team-list-chk > li input[id='sk']:checked + label {color: var(--sk-main); background-color: var(--sk-sub);}
.team-list-chk > li input[id='hd']:checked + label {color: var(--hd-main); background-color: var(--hd-sub);}
.team-list-chk > li input[id='sono']:checked + label {color: var(--sono-main); background-color: var(--sono-sub);}
.team-list-chk > li input[id='kcc']:checked + label {color: var(--kcc-main); background-color: var(--kcc-sub);}
.team-list-chk > li input[id='db']:checked + label {color: var(--db-main); background-color: var(--db-sub);}
.team-list-chk > li input[id='kt']:checked + label {color: var(--kt-main); background-color: var(--kt-sub);}
.team-list-chk > li input[id='pega']:checked + label {color: var(--pega-main); background-color: var(--pega-sub);}
.team-list-chk > li input[id='ss']:checked + label {color: var(--ss-main); background-color: var(--ss-sub);}

.team-list-chk > li input[id='zz']:checked + label {color: var(--pega-main); background-color: var(--pega-sub);}
.team-list-chk > li input[id='or']:checked + label {color: var(--sono-main); background-color: var(--sono-sub);}

@media screen and (max-width: 768px) {
    .round-rank-graph > div {width: 100%;}
}

/* 경기 > 팀 순위 > 플레이오프 */
.playoff-wrap {padding: 3.2rem 2.8rem 4rem; background-image: url(../img/game/playoff-bg.png); background-repeat: no-repeat; background-size: cover; background-position: center; display: flex; flex-flow: column; row-gap: 3.2rem; align-items: center; justify-content: center;}
.playoff-wrap div.logo {display: flex; flex-flow: column; row-gap: .4rem; align-items: center;}
.playoff-wrap div.logo > div {display: flex; flex-flow: initial!important; align-items: center; column-gap: .4rem; align-items: center; justify-content: center;}
.playoff-wrap div.logo > div > i {width: 2.5rem; height: 1.5rem; margin-bottom: .3rem;}
.playoff-wrap div.logo > div > p {font-size: 1.6rem; line-height: 1.4rem; font-weight: 900; background: linear-gradient(270deg, #997752 0.25%, #BBA36D 31.94%, #886145 100%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; position: relative!important; top: initial!important;}
.playoff-wrap div.logo > img {height: 3.4rem;}
.playoff-wrap img.logo {height: 6.2rem;}
.playoff-wrap > div {display: flex; align-items: center; justify-content: center; column-gap: 2.2rem;}
.playoff-wrap > div > div {min-width: 24.3rem; display: flex; align-items: center; flex-flow: column; row-gap: 1.2rem; position: relative;}
.playoff-wrap > div > div > p {font-size: 1.4rem; line-height: 2rem; font-weight: 600; color: #bba36d; position: absolute; top: -3rem;}
.playoff-wrap > div > div > div {width: 100%; display: flex; flex-flow: column; row-gap: 1.2rem; align-items: center;}
.playoff-wrap > div > div > div > ul {width: 100%; min-height: 6.4rem; padding: .8rem 1.6rem; border-radius: .8rem; background-color: rgba(0, 0, 0, 0.2); display: flex; flex-flow: column; justify-content: center; row-gap: 1.2rem; position: relative;}
.playoff-wrap > div > div > div > ul > li {display: flex; align-items: center; column-gap: 1.2rem;}
.playoff-wrap > div > div > div > ul > li > span {display: flex; width: 1.2rem; font-size: 1.6rem; font-weight: 900; color: var(--disabled); text-align: center; align-items: center; justify-content: center;}
.playoff-wrap > div > div > div > ul > li .team-name {flex: 1;}
.playoff-wrap > div > div > div > ul > li .team-name > i {width: 4rem; height: 4rem;}
.playoff-wrap > div > div > div > ul > li .team-name > p {font-size: 1.6rem; font-weight: 600; color: var(--white);}
.playoff-wrap > div > div > div > ul > li > p {display: flex; width: 3.6rem; font-size: 1.6rem; font-weight: 900; color: var(--white); text-align: center; align-items: center; justify-content: center;}
.playoff-wrap > div > div > div > ul > li > img {height: 4rem;}
.playoff-wrap > div > div > div > ul > li.lose > span {opacity: .3;}
.playoff-wrap > div > div > div > ul > li.lose .team-name {opacity: .3;}

@media screen and (max-width: 768px) {
    .playoff-wrap {width: 100vw; margin: 0 -2rem; padding: 3.2rem 0 4rem;}
    .playoff-wrap > div {width: 100vw; padding: 0 2rem; overflow-y: auto; justify-content: initial;}
}

.playoff-wrap > div > div  > div > ul::before {opacity: .2;}
.playoff-wrap > div > div  > div > ul::after {opacity: .2;}

.playoff-wrap > div > div  > div > ul.end::before {opacity: 1;}
.playoff-wrap > div > div  > div > ul.end::after {opacity: 1;}

.playoff-wrap > div .round  > div > ul:nth-child(1)::before {content: ''; width: calc(50% + 2.2rem); height: .2rem; background-color: var(--white); position: absolute; right: calc(-50% - 2.2rem); top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%);}
.playoff-wrap > div .round  > div > ul:nth-child(1)::after {content: ''; width: .2rem; height: calc(50% + 1.1rem); background-color: var(--white); position: absolute; right: calc(-50% - 2.2rem); bottom: -1.2rem;}
.playoff-wrap > div .round  > div > ul:nth-child(2)::before {content: ''; width: 2.2rem; height: .2rem; background-color: var(--white); position: absolute; right: -2.2rem; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%);}
.playoff-wrap > div .round  > div > ul:nth-child(3)::before {content: ''; width: 2.2rem; height: .2rem; background-color: var(--white); position: absolute; right: -2.2rem; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%);}
.playoff-wrap > div .round  > div > ul:nth-child(4)::before {content: ''; width: calc(50% + 2.2rem); height: .2rem; background-color: var(--white); position: absolute; right: calc(-50% - 2.2rem); top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%);}
.playoff-wrap > div .round  > div > ul:nth-child(4)::after {content: ''; width: .2rem; height: calc(50% + 1.1rem); background-color: var(--white); position: absolute; right: calc(-50% - 2.2rem); top: -1.2rem;}

.playoff-wrap > div .semifinals > p {top: -7.5rem;}
.playoff-wrap > div .semifinals  > div > ul:nth-child(1)::before {content: ''; width: 2.2rem; height: .2rem; background-color: var(--white); position: absolute; right: -2.2rem; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%);}
.playoff-wrap > div .semifinals  > div > ul:nth-child(1)::after {content: ''; width: .2rem; height: calc(50% + .5rem); background-color: var(--white); position: absolute; right: -2.2rem; bottom: -.6rem;}
.playoff-wrap > div .semifinals  > div > ul:nth-child(2)::before {content: ''; width: 2.2rem; height: .2rem; background-color: var(--white); position: absolute; right: -2.2rem; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%);}
.playoff-wrap > div .semifinals  > div > ul:nth-child(2)::after {content: ''; width: .2rem; height: calc(50% + .5rem); background-color: var(--white); position: absolute; right: -2.2rem; top: -.6rem;}

.playoff-wrap > div .finals {padding-left: 1.6rem; min-width: initial;}
.playoff-wrap > div .finals > div {width: fit-content;}
.playoff-wrap > div .finals > div > ul {width: fit-content; display: flex; flex-flow: initial; align-items: flex-start; justify-content: center; column-gap: .4rem; padding: 2.2rem 1.6rem 1.8rem;}
.playoff-wrap > div .finals > div > ul > li {display: flex; flex-flow: column; row-gap: 2rem;}
.playoff-wrap > div .finals > div > ul > li > img {opacity: .1; margin: 0 -2rem;}
.playoff-wrap > div .finals > div > ul > li > i {width: 4rem; height: 4rem;}
.playoff-wrap > div .finals > div > ul > li > p {width: 8.4rem;}
.playoff-wrap > div .finals > div > p {text-align: center; font-size: 1.4rem; line-height: 2rem; color: var(--white); position: absolute; bottom: -3rem;}
.playoff-wrap > div .finals > div > ul::before {content: ''; width: 1.6rem; height: .2rem; background-color: var(--white); position: absolute; left: -1.6rem; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%);}

.playoff-wrap > div .finals > div > ul.undecided {padding: 2rem 1.6rem;}
.playoff-wrap > div .finals > div > ul.undecided > li > img {width: 8.4rem; height: 8.4rem; opacity: 1;}
.playoff-wrap > div .finals > div > ul:not(.undecided)::before {opacity: 1;}

.playoff-wrap > div.winner {padding-top: 2.8rem; padding-bottom: 10.4rem; flex-flow: column; row-gap: 3rem;}
.playoff-wrap > div.winner > p {font-size: 2.8rem; line-height: 3.6rem; color: var(--white); text-align: center; font-weight: 600;}
.playoff-wrap > div.winner > div > p {position: relative; top: initial;}
.playoff-wrap > div.winner > div > div {min-width: initial; border-radius: .8rem; background-color: rgba(0, 0, 0, 0.2); justify-content: center; width: 20.8rem; height: 12.4rem;}
.playoff-wrap > div.winner > div > div > i {width: 16.4rem; height: 16.4rem; position: absolute;}

.match-info-wrap {display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 4rem;}

@media screen and (max-width: 768px) {
    .match-info-wrap {grid-template-columns: repeat(1, 1fr); row-gap: 4rem;}
}

.team-match-result {display: flex; align-items: center; justify-content: space-between;}
.team-match-result > ul {width: calc((100% - 4rem - 4.8rem) / 2); display: flex; align-items: center; column-gap: 1.6rem; justify-content: center;}
.team-match-result > ul > li {display: flex; flex-flow: column; row-gap: .4rem; align-items: center; justify-content: center}
.team-match-result > ul > li > span {font-size: 1.2rem; line-height: 1.6rem; color: var(--body);}
.team-match-result > ul > li > p {font-size: 2rem; font-weight: 600; line-height: 2.8rem;}
.team-match-result > ul > li:last-child > p {color: var(--disabled);}

.team-match-play {display: flex; flex-flow: column; row-gap: 1.2rem;}
.team-match-play > li > a {border-radius: .8rem; border: 1px solid var(--gray02); padding: 1.2rem 1.6rem; display: flex; align-items: center; justify-content: space-between;}
.team-match-play > li > a > ul {display: flex; align-items: center; column-gap: .4rem;}
.team-match-play > li > a > ul > li {min-width: 6.4rem; font-size: 1.4rem; line-height: 2rem; color: var(--body); display: flex; align-items: center; text-align: center; justify-content: center;}
.team-match-play > li > a > ul > li:nth-child(3) {flex-flow: row-reverse;}
.team-match-play > li > a > ul > li > * {width: 4.8rem; height: 4.8rem; display: flex; align-items: center; justify-content: center; font-size: 1.6rem; font-weight: 600; line-height: 2.4rem; color: var(--black);}
.team-match-play > li > a > ul > li.lose > p {color: var(--disabled);}

@media screen and (max-width: 768px) {
    .team-match-play > li > a {padding: 1.2rem;}
    .team-match-play > li > a > ul > li {min-width: 5.6rem; font-size: 1.2rem; line-height: 1.6rem;}
    .team-match-play > li > a > ul > li > * {width: 3.6rem; height: 3.6rem; font-size: 1.4rem; line-height: 2rem;}

    .pop .team-versus .team > p {width: 10rem;}
}

/* 기록 > 시즌리더 */
#s2iZone .filter-wrap.short {border-bottom: 0!important;}

.filter-wrap {margin-bottom: 2.4rem;}
.filter-wrap > ul {height: 5.6rem; padding: 0 2rem; display: flex; grid-gap: 2rem 1rem; flex-wrap: wrap; align-items: center; border-bottom: 1px solid var(--gray02);}
.filter-wrap > ul:not(.filter-select) > li > select {height: 4rem; padding: 0 2.4rem 0 1rem; border-radius: .8rem; background-position: center right; font-size: 1.4rem; border: 0; background-size: 2rem;}
.filter-wrap > ul > li.more {margin-left: auto;}
.filter-wrap > ul > li.more input + label {width: fit-content; height: fit-content; padding: 0; font-size: 1.4rem; font-weight: 500; line-height: 2rem; color: var(--orange); column-gap: .8rem; background-color: transparent; align-items: center;}
.filter-wrap > ul > li.more input + label::before {content: none;}
.filter-wrap > ul > li.more input:checked + label > i {transform: rotate(180deg);}

.filter-wrap .nav {display: flex; align-items: center; justify-content: space-between; height: 5.6rem; padding: 0 2rem; background-color: var(--gray03);  position: relative;}
.filter-wrap .nav > *:nth-child(1):nth-last-child(2) ~ button {margin-left: auto;}
.filter-wrap .nav > select {height: 3.2rem; padding: 0 3.8rem 0 1.2rem; border-radius: .6rem; background-position: center right .4rem; font-size: 1.4rem;}
.filter-wrap .nav > p {font-size: 1.4rem; color: var(--subheadline);}
.filter-wrap .nav > p > span {font-size: 1.6rem; font-weight: 500;}
.filter-wrap .nav .date {display: flex; align-items: center; column-gap: 2rem; justify-content: center; position: absolute; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%);}
.filter-wrap .nav .date > li > button {width: fit-content; min-width: initial; height: fit-content; padding: 0; background-color: transparent;}
.filter-wrap .nav .date > li > p {text-align: center; font-size: 1.6rem; line-height: 2.4rem; font-weight: 600;}
.filter-wrap .nav .view-tab > input + label {padding: 0 .4rem;}

@media screen and (max-width: 768px) {
    .filter-wrap > ul {height: fit-content; min-height: 5.6rem;}

    .filter-wrap .nav .date {column-gap: 1.2rem;}
    .filter-wrap .nav .desktop {display: none;}

    #s2iZone.en .filter-wrap.mobile > ul {padding-right: 15rem!important;}
    #s2iZone.en .filter-wrap.mobile > ul::before {width: 15rem!important;}
}

.filter-wrap .filter-select {margin-bottom: 0; position: relative;}
.filter-wrap .filter-select::after {content: ''; width: 100%; height: 1px; background-color: var(--gray03); position: absolute; left: 0; bottom: -1px;}

.filter-wrap .setting {display: none; flex-flow: column; row-gap: 3.2rem; padding: 2rem; background-color: var(--gray03); border-bottom: 1px solid var(--gray02);}
.filter-wrap .setting.active {display: flex;}
.filter-wrap .setting .option {display: grid; grid-template-columns: repeat(5, 1fr); grid-gap: 2rem;}
.filter-wrap .setting .option > li {display: flex; flex-flow: column; row-gap: .8rem;}
.filter-wrap .setting .option > li.mobile {display: none;}
.filter-wrap .setting .option > li > p {font-size: 1.4rem; color: var(--subheadline);}
.filter-wrap .setting .option > li > select {height: 4rem; padding: 0 4.4rem 0 1.2rem; border-radius: .8rem; background-position: center right 1rem; font-size: 1.4rem;}
.filter-wrap .setting .result {border-top: 1px solid var(--gray02); padding-top: 3.2rem; display: flex; flex-wrap: wrap; grid-gap: 1.2rem 2rem; align-items: center;}
.filter-wrap .setting .result > li {display: flex; align-items: center; column-gap: .8rem;}
.filter-wrap .setting .result > li.mobile {display: none;}
.filter-wrap .setting .result > li > p {font-size: 1.4rem; line-height: 2rem; color: var(--subheadline);}
.filter-wrap .setting .result > li > span {display: flex; align-items: center; column-gap: .4rem; font-size: 1.4rem; color: var(--subheadline); padding: 0 .8rem; height: 2.4rem; border-radius: .4rem; background-color: var(--gray02);}
.filter-wrap .setting .result > li > span button {min-width: initial; width: fit-content;  height: fit-content; background-color: transparent; padding: 0;}
.filter-wrap .setting > div {display: flex; align-items: center; justify-content: center; column-gap: 1.2rem;}
.filter-wrap .setting > div > button {width: 12rem; height: 4rem; padding: 0 1.2rem; font-size: 1.4rem; border-radius: .8rem;}

@media screen and (max-width: 768px) {
    .filter-wrap {width: 100vw; margin: -2.4rem -2rem 2.4rem;}
    .filter-wrap > ul {grid-gap: 1.2rem;}
    .filter-wrap > ul:not(.filter-select) > li > select {padding: 0 3rem 0 0; background-position: center right;}

    .filter-wrap .filter-select {margin: 0;}
    .filter-wrap .filter-select > li > select {padding: 0 4.4rem 0 1.2rem;}
    .filter-wrap .setting {row-gap: 2rem;}
    .filter-wrap .setting .option {grid-template-columns: repeat(1, 1fr);}
    .filter-wrap .setting .option > li.desktop {display: none;}
    .filter-wrap .setting .option > li.mobile {display: flex;}
    .filter-wrap .setting .result {padding-top: 2rem;}
    .filter-wrap .setting .result > li.desktop {display: none;}
    .filter-wrap .setting .result > li.mobile {display: flex;}
    .filter-wrap + .tab-style2 {margin-top: 0;}
}

.season-record {display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 2rem 4rem;}
.season-record > li {border: 1px solid var(--gray02); border-radius: 1.2rem; background-color: var(--white); filter: drop-shadow(0px 6px 12px rgba(25, 25, 25, 0.05)); padding: 2rem;}
.season-record > li > div {display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--gray02); padding-bottom: .8rem;}
.season-record > li > div > p {font-size: 1.6rem; font-weight: 500; line-height: 2.4rem;}
.season-record > li > div > p > span {font-size: 1.2rem; line-height: 1.6rem;}
.season-record > li > ul {display: flex; flex-flow: column; row-gap: 1.2rem; margin-top: 1.6rem;}
.season-record > li > ul > li {display: flex; column-gap: 1rem;}
.season-record > li > ul > li > span {display: block; width: 1rem; text-align: center; font-size: 1.4rem; line-height: 2rem; color: var(--disabled);}
.season-record > li > ul > li > div {display: flex; flex-flow: column; row-gap: .4rem; flex: 1;}
.season-record > li > ul > li > div > p {font-size: 1.4rem; line-height: 2rem; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; line-clamp: 1; -webkit-line-clamp: 1; -webkit-box-orient: vertical;}
.season-record > li > ul > li > div > span {font-size: 1.2rem; line-height: 1.6rem; color: var(--body);}
.season-record > li > ul > li > p {font-size: 1.4rem; line-height: 2rem; text-align: right; width: 3rem;}
.season-record > li > ul > li:nth-child(1) > span {font-weight: 600; color: var(--black);}
.season-record > li > ul > li:nth-child(1) > div > p {font-weight: 600;}
.season-record > li > ul > li:nth-child(1) > p {font-weight: 600;}

@media screen and (max-width: 768px) {
    .season-record {grid-template-columns: repeat(1, 1fr); grid-gap: 2rem;}
    .season-record > li > ul > li > div {flex-flow: initial; column-gap: .4rem;}
    .season-record > li > ul > li > div > p {max-width: 16rem;}
}

/* 기록 > 선수기록 */
.page-option {display: flex; align-items: center; column-gap: 2rem;}
.page-option .page {display: flex; align-items: center; column-gap: 2rem;}
.page-option .page > div {display: flex; align-items: center; column-gap: 1rem;}
.page-option .page > div > p {font-size: 1.4rem; line-height: 2rem; color: var(--subheadline);}
.page-option .page > div > select {height: 3.2rem; padding: 0 4.4rem 0 1.2rem; border-radius: .6rem; background-position: center right 1rem; font-size: 1.4rem;}
.page-option .page > div > span {font-size: 1.4rem; line-height: 2rem; color: var(--subheadline);}
.page-option .page > div > button {min-width: initial; width: 3.2rem; height: 3.2rem; border-color: var(--gray01); background-color: var(--white); border-radius: .6rem;}
.page-option .page > div > button + button {margin-left: -.6rem;}

@media screen and (max-width: 768px) {
    .page-option .page.desktop {display: none;}
}

.table-cursor tbody tr {cursor: pointer;}
.table-cursor tbody tr:hover > td {background-color: #FEF9F2;}

.record-table1 {width: max-content; min-width: 100%;}
.record-table1 th:nth-child(1) {position: sticky; position: -webkit-sticky; left: 0;}
.record-table1 th:nth-child(1)::after {content: ''; width: 1px; height: 100%; background-color: var(--gray02); position: absolute; top: 0; right: -.1rem;}
.record-table1 th:nth-child(2) {position: sticky; position: -webkit-sticky; left: 4.6rem;}
.record-table1 th:nth-child(2)::after {content: ''; width: 1px; height: 100%; background-color: var(--gray02); position: absolute; top: 0; right: -.1rem;}
.record-table1 td:nth-child(1) {position: sticky; position: -webkit-sticky; left: 0;}
.record-table1 td:nth-child(2) {position: sticky; position: -webkit-sticky; left: 4.6rem;}
.record-table1 td > p {overflow: hidden; text-overflow: ellipsis; display: -webkit-box; line-clamp: 1; -webkit-line-clamp: 1; -webkit-box-orient: vertical;}

/* 기록 > 라운드 mvp */
.mvp-wrap {display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 5rem 4rem;}
.mvp-wrap > li {display: flex; flex-flow: column; row-gap: 1.2rem;}
.mvp-wrap > li .round {display: flex; align-items: center; justify-content: space-between;}
.mvp-wrap > li .round > p {font-size: 2rem; line-height: 2.8rem; font-weight: 600; color: var(--orange);}
.mvp-wrap > li .round > a {font-size: 1.4rem; line-height: 2rem; font-weight: 500; display: flex; align-items: center; column-gap: .8rem;}
.mvp-wrap > li .player {border-radius: 1.2rem; background-color: #f2f2f2; padding: 2.8rem 2.4rem; display: flex; flex-flow: column; row-gap: 2.4rem;}
.mvp-wrap > li .player .info {display: flex; align-items: flex-start; justify-content: space-between; height: 6.8rem;}
.mvp-wrap > li .player .info > div {display: flex; flex-flow: column; row-gap: .8rem;}
.mvp-wrap > li .player .info > div > p {font-size: 2.4rem; font-weight: 600; line-height: 3.2rem;}
.mvp-wrap > li .player .info > div > span {font-size: 1.4rem; line-height: 2.8rem; color: var(--subheadline);}
.mvp-wrap > li .player .info > div > span {font-size: 1.4rem; line-height: 2.8rem; color: var(--subheadline);}
.mvp-wrap > li .player .info > div > span > span {font-size: 2rem; font-weight: 600;}
.mvp-wrap > li .player .info > i {width: 4.8rem; height: 4.8rem;}
.mvp-wrap > li .player .record {padding: 0 1.6rem;}
.mvp-wrap > li .player .record .img {padding: 0 3.6rem; width: 100%; height: 21.6rem; display: flex; align-items: flex-start; justify-content: center; overflow: hidden;}
.mvp-wrap > li .player .record .img img {width: 100%;}
.mvp-wrap > li .player .record > ul {width: 100%; border-radius: 1.2rem; height: 9.2rem; padding: 0 4rem; display: flex; align-items: center; justify-content: space-between; background-color: var(--white);}
.mvp-wrap > li .player .record > ul > li {width: 4.8rem; display: flex; flex-flow: column; row-gap: .4rem; align-items: center;}
.mvp-wrap > li .player .record > ul > li > span {font-size: 1.4rem; line-height: 2rem; color: var(--body);}
.mvp-wrap > li .player .record > ul > li > p {font-size: 2rem; font-weight: 600; line-height: 2.8rem;}
.mvp-wrap > li .player .record > a {font-size: 1.4rem; text-align: center; display: block; margin: 2rem auto 0; font-weight: 500; text-decoration: underline; line-height: 2rem; color: #505050;}
.mvp-wrap > li.coming .round > a {cursor: default; color: var(--disabled);}
.mvp-wrap > li.coming .round > a > i {background-image: url(../img/ico/ic-ball-disabled.svg);}
.mvp-wrap > li.coming .info > div > p {color: var(--disabled);}

@media screen and (max-width: 768px) {
    .mvp-wrap {grid-template-columns: repeat(1, 1fr); grid-gap: 4rem;}
    .mvp-wrap > li .player {height: fit-content;}
    .mvp-wrap > li .player .record {padding: 0;}
}

.goods-list {display: flex; flex-flow: column; row-gap: 2rem;}
.goods-list > li > a {background-color: var(--white); border: 1px solid var(--gray02); border-radius: 1.2rem; filter: drop-shadow(0px 6px 12px rgba(25, 25, 25, 0.05)); padding: 2rem; display: flex; align-items: center; column-gap: 2rem;}
.goods-list > li > a .img {width: 10rem; height: 7.2rem; background-repeat: no-repeat; background-size: contain; background-position: center;}
.goods-list > li > a .info {display: flex; flex-flow: column; row-gap: .8rem;}
.goods-list > li > a .info > p {font-size: 1.6rem; font-weight: 600; line-height: 2.4rem;}
.goods-list > li > a .info > span {font-size: 1.4rem; line-height: 2rem;}

.goods-list.type2 > li > a {filter: none; border-color: transparent;}
.goods-list.type2 > li.kbl > a {background-color: var(--gray03);}
.goods-list.type2 > li.kgc > a {background-color: var(--kgc-sub);}
.goods-list.type2 > li.sono > a {background-color: var(--sono-sub);}
.goods-list.type2 > li.lg > a {background-color: var(--lg-sub);}
.goods-list.type2 > li.sk > a {background-color: var(--sk-sub);}
.goods-list.type2 > li.hd > a {background-color: var(--hd-sub);}
.goods-list.type2 > li.kcc > a {background-color: var(--kcc-sub);}
.goods-list.type2 > li.db > a {background-color: var(--db-sub);}
.goods-list.type2 > li.kt > a {background-color: var(--kt-sub);}
.goods-list.type2 > li.pega > a {background-color: var(--pega-sub);}
.goods-list.type2 > li.ss > a {background-color: var(--ss-sub);}

/* 기록 > 역대수상현황 */
.award-table1 table {table-layout: fixed;}
.award-table1.mobile {display: none;}

@media screen and (max-width: 768px) {
    .award-table1.desktop {display: none;}
    .award-table1.mobile {display: block;}
}

/* 기록 > 관중현황 */
.crowd-bar1 {width: calc(100% + 1.6rem); position: relative; display: flex; align-items: center; margin: 0 -.8rem;}
.crowd-bar1 > div {height: 2.4rem; background-color: #eef2fc; border-radius: 0 1.2rem 1.2rem 0;}
.crowd-bar1 > p {position: absolute; left: .8rem; font-size: 1.4rem; line-height: 2rem; color: var(--navy);}

.crowd-table1.mobile {display: none;}

@media screen and (max-width: 768px) {
    .crowd-table1.desktop {display: none;}
    .crowd-table1.mobile {display: block;}

    .crowd-table2 {width: max-content; min-width: 100%;}
    .crowd-table2 th:nth-child(1) {position: sticky; position: -webkit-sticky; left: 0; width: 8.8rem;}
    .crowd-table2 th:nth-child(1)::after {content: ''; width: 1px; height: 100%; background-color: var(--gray02); position: absolute; top: 0; right: -.1rem;}
    .crowd-table2 td:nth-child(1) {position: sticky; position: -webkit-sticky; left: 0;}
}

.compare-table2 {width: max-content; min-width: 100%;}
.compare-table2 th:nth-child(1) {position: sticky; position: -webkit-sticky; left: 0;}
.compare-table2 th:nth-child(1)::after {content: ''; width: 1px; height: 100%; background-color: var(--gray02); position: absolute; top: 0; right: -.1rem;}
.compare-table2 th:nth-child(2) {position: sticky; position: -webkit-sticky; left: 12rem;}
.compare-table2 th:nth-child(2)::after {content: ''; width: 1px; height: 100%; background-color: var(--gray02); position: absolute; top: 0; right: -.1rem;}
.compare-table2 td:nth-child(1) {position: sticky; position: -webkit-sticky; left: 0;}
.compare-table2 td:nth-child(2) {position: sticky; position: -webkit-sticky; left: 12rem;}
.compare-table2 td > p {overflow: hidden; text-overflow: ellipsis; display: -webkit-box; line-clamp: 1; -webkit-line-clamp: 1; -webkit-box-orient: vertical;}

table tr.bor-b > * {border-bottom-color: var(--gray01);}
table tr > *.bor-b {border-bottom-color: var(--gray01);}
table tr.point > * {background-color: #FEF6EE;}

@media screen and (max-width: 768px) {
    .compare-table1 table {width: max-content; min-width: 100%;}
}

/* 기록 > 팀 기록 비교 */
#s2iZone table tr:nth-child(1) th:before {content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 1px; background-color: var(--disabled);}
#s2iZone table tr th:before {content: none;}

/* 선수 > 선수 */
@media screen and (max-width: 768px) {
    .player-table1 {width: max-content; min-width: 100%;}
    .player-table1 th:nth-child(1) {position: sticky; position: -webkit-sticky; left: 0;}
    .player-table1 th:nth-child(1)::after {content: ''; width: 1px; height: 100%; background-color: var(--gray02); position: absolute; top: 0; right: -.1rem;}
    .player-table1 td:nth-child(1) {position: sticky; position: -webkit-sticky; left: 0; min-width: 12rem;}
    .player-table1 th {white-space: nowrap;}
    .player-table1 td {white-space: nowrap;}
}

/* 선수 > 선수 상세 */
.contents.detail .depth {position: relative; z-index: 2;}
.contents.detail .depth > li {color: var(--gray01);}
.contents.detail .depth > li:last-child {color: var(--white);}

.player-detail-wrap::before {content: ''; width: 100vw; height: calc(100% - 4.6rem - 2.4rem); display: block; position: absolute; top: 0; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); z-index: 1; background-color: var(--navy);}
.player-detail-wrap.kgc::before {background-color: var(--kgc-main);}
.player-detail-wrap.lg::before {background-color: var(--lg-main);}
.player-detail-wrap.sk::before {background-color: var(--sk-main);}
.player-detail-wrap.hd::before {background-color: var(--hd-main);}
.player-detail-wrap.sono::before {background-color: var(--sono-main);}
.player-detail-wrap.kcc::before {background-color: var(--kcc-main);}
.player-detail-wrap.db::before {background-color: var(--db-main);}
.player-detail-wrap.kt::before {background-color: var(--kt-main);}
.player-detail-wrap.pega::before {background-color: var(--pega-main);}
.player-detail-wrap.ss::before {background-color: var(--ss-main);}

@media screen and (max-width: 768px) {
    .player-detail-wrap::before {content: none;}
}

.player-detail-wrap {position: relative; margin-top: -8.8rem; padding: 4rem 0 2.4rem;}
.player-detail-wrap > * {position: relative; z-index: 2;}
.player-detail-wrap > ul {display: flex; align-items: center; justify-content: flex-end; column-gap: 1.2rem; width: fit-content; position: absolute; top: 4rem; right: 0; z-index: 10;}
.player-detail-wrap > ul > li > button {min-width: initial; width: fit-content; height: fit-content; padding: 0; background-color: transparent;}
.player-detail-wrap > div {margin: 0 auto; padding: 0 .6rem;}
.player-detail-wrap > div .info {width: 62.5rem; padding-top: 1rem; display: flex; justify-content: space-between; margin: 0 auto;}
.player-detail-wrap > div .info > i {width: 8rem; height: 4.8rem;}
.player-detail-wrap > div .info > div {display: flex; flex-flow: column; row-gap: 1rem; margin-left: auto;}
.player-detail-wrap > div .info > div > p {font-size: 2.8rem; line-height: 3.6rem; font-weight: 600; color: var(--white);}
.player-detail-wrap > div .info > div > ul {display: flex; align-items: center; column-gap: .8rem; width: 23.5rem;}
.player-detail-wrap > div .info > div > ul > li {font-size: 1.4rem; color: var(--gray01); display: flex; align-items: center; column-gap: .8rem;}
.player-detail-wrap > div .info > div > ul > li > p {font-size: 1.2rem;}
.player-detail-wrap > div .info > div > ul > li > p > span {font-size: 1.4rem;}
.player-detail-wrap > div .info > div > ul > li + li::before {content: ''; width: 1px; height: 1.2rem; background-color: rgba(255,255,255,.3);}
.player-detail-wrap > div .player {width: 62.5rem; margin: -8rem auto 0; padding-left: 10rem; display: flex; align-items: flex-end; justify-content: space-between;}
.player-detail-wrap > div .player .img {width: 21.6rem; height: 23.6rem; display: flex; align-items: flex-end; justify-content: center;}
.player-detail-wrap > div .player .img > img {width: 100%;}
.player-detail-wrap > div .player > ul {width: 23.5rem; margin-bottom: 5rem; display: flex; align-items: center; justify-content: space-between;}
.player-detail-wrap > div .player > ul > li {display: flex; flex-flow: column; row-gap: .4rem;}
.player-detail-wrap > div .player > ul > li > p {font-size: 1.4rem; line-height: 2rem; color: var(--gray01);}
.player-detail-wrap > div .player > ul > li > span {font-size: 2rem; line-height: 2.8rem; font-weight: 600; color: var(--white);}
.player-detail-wrap > div .detail .sub-title {display: none;}
.player-detail-wrap > div .detail > ul {display: flex; align-items: center; justify-content: center; column-gap: 5rem; width: fit-content; margin: 0 auto; height: 9.2rem; border-radius: 1.2rem; background-color: #f2f2f2; padding: 0 5rem;}
.player-detail-wrap > div .detail > ul > li.mobile {display: none;}
.player-detail-wrap > div .detail > ul > li {display: flex; flex-flow: column; row-gap: .8rem; align-items: center;}
.player-detail-wrap > div .detail > ul > li > p {font-size: 1.4rem; line-height: 2rem; color: var(--body);}
.player-detail-wrap > div .detail > ul > li > span {font-size: 1.6rem; line-height: 2.4rem; font-weight: 500;}

@media screen and (max-width: 768px) {
    .player-detail-wrap {margin: 0 -2rem 3.2rem; padding: 0 2rem 4rem; border-bottom: 1.2rem solid var(--gray03); width: 100vw;}
    .player-detail-wrap .desktop {display: none;}
    .player-detail-wrap > div {margin: 0; padding: 0;}
    .player-detail-wrap > div .info {width: 100%; padding-top: 0; flex-flow: row-reverse;}
    .player-detail-wrap > div .info > i {width: 6rem; height: 3.6rem;}
    .player-detail-wrap > div .info > div {row-gap: .8rem; margin-left: 0; margin-right: auto;}
    .player-detail-wrap > div .info > div > p {font-size: 2.4rem; line-height: 3.2rem; color: var(--black);}
    .player-detail-wrap > div .info > div > ul {width: fit-content;}
    .player-detail-wrap > div .info > div > ul > li {font-size: 1.6rem; color: var(--body);}
    .player-detail-wrap > div .info > div > ul > li.desktop {display: none;}
    .player-detail-wrap > div .info > div > ul > li + li::before {background-color: var(--gray01);}
    .player-detail-wrap > div .info > div > ul > li.desktop + li::before {content: none;}
    .player-detail-wrap > div .info > div > ul > li > p > span {font-size: 1.6rem;}
    .player-detail-wrap > div .player {width: 100%; margin: 1.6rem auto 0; padding-left: 0; flex-flow: column; align-items: center;}
    .player-detail-wrap > div .player > ul {width: 100%; height: 9.2rem; border-radius: 1.2rem; background-color: #f2f2f2; margin-bottom: 0; display: grid; grid-template-columns: repeat(3, 1fr);}
    .player-detail-wrap > div .player > ul > li {align-items: center;}
    .player-detail-wrap > div .player > ul > li > p {color: var(--body);}
    .player-detail-wrap > div .player > ul > li > span {color: var(--black);}
    .player-detail-wrap > div .detail {margin-top: 2.4rem;}
    .player-detail-wrap > div .detail .sub-title {display: block;}
    .player-detail-wrap > div .detail > ul {width: 100%; display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 2rem; align-items: initial; height: fit-content; border-radius: initial; background-color: transparent; padding: 0;}
    .player-detail-wrap > div .detail > ul > li.mobile {display: none;}
    .player-detail-wrap > div .detail > ul > li {row-gap: .4rem; align-items: initial; justify-content: initial;}
    .player-detail-wrap > div .detail > ul > li > p {font-size: 1.2rem; line-height: 1.6rem;}
    .player-detail-wrap > div .detail > ul > li > span {font-size: 1.4rem; line-height: 2rem;}
    .player-detail-wrap > div .detail > ul > li.mobile {display: flex;}
    .player-detail-wrap > div .detail > ul > li.mobile > ul {display: flex; align-items: center; column-gap: .6rem;}
    .player-detail-wrap > div .detail > ul > li.mobile > ul > li > button {min-width: initial; width: fit-content; height: fit-content; padding: 0; background-color: transparent;}
}

.player-detail-table1 {table-layout: fixed;}
.player-detail-table2 {table-layout: fixed;}

@media screen and (max-width: 768px) {
    .player-detail-table1 {width: max-content; min-width: 100%; table-layout: initial;}
    .player-detail-table1 th:nth-child(1) {position: sticky; position: -webkit-sticky; left: 0; min-width: 9rem;}
    .player-detail-table1 th:nth-child(1)::after {content: ''; width: 1px; height: 100%; background-color: var(--gray02); position: absolute; top: 0; right: -.1rem;}
    .player-detail-table1 td:nth-child(1) {position: sticky; position: -webkit-sticky; left: 0;}
    .player-detail-table1 th:nth-child(2) {position: sticky; position: -webkit-sticky; left: 9rem; min-width: 12rem;}
    .player-detail-table1 th:nth-child(2)::after {content: ''; width: 1px; height: 100%; background-color: var(--gray02); position: absolute; top: 0; right: -.1rem;}
    .player-detail-table1 td:nth-child(2) {position: sticky; position: -webkit-sticky; left: 9rem;}

    .player-detail-table3 {width: max-content; min-width: 100%; table-layout: initial;}
    .player-detail-table3 th:nth-child(1) {position: sticky; position: -webkit-sticky; left: 0; min-width: 12rem;}
    .player-detail-table3 th:nth-child(1)::after {content: ''; width: 1px; height: 100%; background-color: var(--gray02); position: absolute; top: 0; right: -.1rem;}
    .player-detail-table3 td:nth-child(1) {position: sticky; position: -webkit-sticky; left: 0;}
    .player-detail-table3 th:nth-child(2) {position: sticky; position: -webkit-sticky; left: 12rem; min-width: 4.5rem;}
    .player-detail-table3 th:nth-child(2)::after {content: ''; width: 1px; height: 100%; background-color: var(--gray02); position: absolute; top: 0; right: -.1rem;}
    .player-detail-table3 td:nth-child(2) {position: sticky; position: -webkit-sticky; left: 12rem;}

    .player-detail-table4 {width: max-content; min-width: 100%; table-layout: initial;}
    .player-detail-table4 th:nth-child(1) {position: sticky; position: -webkit-sticky; left: 0; min-width: 9rem;}
    .player-detail-table4 th:nth-child(1)::after {content: ''; width: 1px; height: 100%; background-color: var(--gray02); position: absolute; top: 0; right: -.1rem;}
    .player-detail-table4 td:nth-child(1) {position: sticky; position: -webkit-sticky; left: 0;}
    .player-detail-table4 th:nth-child(2) {position: sticky; position: -webkit-sticky; left: 9rem; min-width: 12rem;}
    .player-detail-table4 th:nth-child(2)::after {content: ''; width: 1px; height: 100%; background-color: var(--gray02); position: absolute; top: 0; right: -.1rem;}
    .player-detail-table4 td:nth-child(2) {position: sticky; position: -webkit-sticky; left: 9rem;}
    .player-detail-table4 tr:last-child td:nth-child(2) {position: initial; left: initial;}
}

/* 선수 > 선수공시 */
@media screen and (max-width: 768px) {
    .announce-table1 {width: max-content; min-width: 100%; table-layout: initial;}
    .announce-table1 th {white-space: nowrap;}
    .announce-table1 td {white-space: nowrap;}
}

/* 선수 > 드래프트 */
.draft-table.mobile {display: none;}

.draft-table1 {width: max-content; min-width: 100%;}
.draft-table1 th:nth-child(1) {position: sticky; position: -webkit-sticky; left: 0;}
.draft-table1 th:nth-child(1)::after {content: ''; width: 1px; height: 100%; background-color: var(--gray02); position: absolute; top: 0; right: -.1rem;}
.draft-table1 th:nth-child(2) {position: sticky; position: -webkit-sticky; left: 8.8rem;}
.draft-table1 th:nth-child(2)::after {content: ''; width: 1px; height: 100%; background-color: var(--gray02); position: absolute; top: 0; right: -.1rem;}
.draft-table1 td:nth-child(1) {position: sticky; position: -webkit-sticky; left: 0;}
.draft-table1 td:nth-child(2) {position: sticky; position: -webkit-sticky; left: 8.8rem;}
.draft-table1 td > p {overflow: hidden; text-overflow: ellipsis; display: -webkit-box; line-clamp: 1; -webkit-line-clamp: 1; -webkit-box-orient: vertical;}

@media screen and (max-width: 768px) {
    .draft-table.desktop {display: none;}
    .draft-table.mobile {display: block;}

    .draft-table2 {width: max-content;}
}

/* 선수 > 드래프트 > 선수 상세 */
.draft-highlight iframe {width: 100%; height: 28.4rem; border-radius: 1.2rem;}

.scout-report {display: flex; flex-flow: column; row-gap: .8rem;}
.scout-report > li {display: flex; column-gap: .6rem;}
/*.scout-report > li::before {content: ''; width: .3rem; height: .3rem; background-color: var(--black); border-radius: 100%; margin-top: .8rem;}*/
.scout-report > li > p {flex: 1; font-size: 1.4rem; line-height: 2rem;}

@media screen and (max-width: 768px) {
    .draft-table3 {width: max-content; min-width: 100%;}
    .draft-table3 th:nth-child(1) {position: sticky; position: -webkit-sticky; left: 0;}
    .draft-table3 th:nth-child(1)::after {content: ''; width: 1px; height: 100%; background-color: var(--gray02); position: absolute; top: 0; right: -.1rem;}
    .draft-table3 td:nth-child(1) {position: sticky; position: -webkit-sticky; left: 0;}

    .draft-highlight iframe {height: 50vw; border-radius: .8rem;}
}

/* 팀 > 팀 */
.team-intro-wrap {display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 3rem;}
.team-intro-wrap > li {display: flex; align-items: center; padding: 1.6rem 2rem; column-gap: 2rem; background-color: var(--gray03); border-radius: 1.2rem;}
.team-intro-wrap > li > i {width: 7.2rem; height: 7.2rem;}
.team-intro-wrap > li > div {display: flex; flex-flow: column; row-gap: .8rem; flex: 1;}
.team-intro-wrap > li > div > p {font-size: 1.4rem; line-height: 2rem; font-weight: 600;}
.team-intro-wrap > li > div > ul {width: 100%; display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: .8rem;}
.team-intro-wrap > li > div > ul > li > button {width: 100%;}

@media screen and (max-width: 768px) {
    .team-intro-wrap {grid-template-columns: repeat(1, 1fr); grid-gap: 1.2rem;}
    .team-intro-wrap > li > i {width: 4.8rem; height: 4.8rem;}
}

@media screen and (max-width: 768px) {
    .team-table1 {width: max-content; min-width: 100%;}
    .team-table1 th:nth-child(1) {position: sticky; position: -webkit-sticky; left: 0;}
    .team-table1 th:nth-child(1)::after {content: ''; width: 1px; height: 100%; background-color: var(--gray02); position: absolute; top: 0; right: -.1rem;}
    .team-table1 th:nth-child(2) {position: sticky; position: -webkit-sticky; left: 4rem; width: 12rem;}
    .team-table1 th:nth-child(2)::after {content: ''; width: 1px; height: 100%; background-color: var(--gray02); position: absolute; top: 0; right: -.1rem;}
    .team-table1 td:nth-child(1) {position: sticky; position: -webkit-sticky; left: 0;}
    .team-table1 td:nth-child(2) {position: sticky; position: -webkit-sticky; left: 4rem; width: 12rem;}
}

/* 팀 > 코칭 스태프 */
.staff-list {display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 5rem 3rem;}
.staff-list > li {display: flex; flex-flow: column; row-gap: 1.6rem;}
.staff-list > li > button {width: 100%; height: 3.2rem; padding: 0 1.2rem; font-size: 1.4rem; border-radius: .6rem; border-color: var(--gray01); background-color: var(--white); color: var(--black);}
.staff-list > li > button:active {border-color: var(--black);}
.staff-list > li > button:disabled {border-color: var(--gray01)!important; background-color: var(--gray03)!important; color: var(--gray01)!important;}
.staff-list > li > div {border-radius: 1.2rem; padding: 1.4rem 1.6rem 0 1.6rem; position: relative; overflow: hidden;}
.staff-list > li > div > p {font-size: 1.6rem; font-weight: 600; line-height: 2.4rem;}
.staff-list > li > div > span {display: block; font-size: 1.2rem; font-weight: 500; line-height: 1.6rem; color: var(--body); margin-top: .4rem;}
.staff-list > li > div .img {width: calc(100% + 3.2rem); height: 15.4rem; margin: 0 -1.6rem; background-repeat: no-repeat; background-position: top center; background-size: cover;}
.staff-list > li > p {width: 100%; height: 4rem; padding: 0 1.2rem; font-size: 1.4rem; font-weight: 500; border-radius: .8rem; border: 1px solid var(--gray01); background-color: var(--white); color: var(--black); display: flex; align-items: center; justify-content: center;}

.staff-list.ss > li > p {border-color: var(--ss-main); color: var(--ss-main);}

@media screen and (max-width: 768px) {
    .staff-list {grid-template-columns: repeat(2, 1fr); grid-gap: 2.4rem 2rem;}
    .staff-list > li > div .img {height: 14.2rem;}
}

.staff-list.kgc > li > div {background-color: var(--kgc-sub);}
.staff-list.sono > li > div {background-color: var(--sono-sub);}
.staff-list.lg > li > div {background-color: var(--lg-sub);}
.staff-list.sk > li > div {background-color: var(--sk-sub);}
.staff-list.hd > li > div {background-color: var(--hd-sub);}
.staff-list.kcc > li > div {background-color: var(--kcc-sub);}
.staff-list.db > li > div {background-color: var(--db-sub);}
.staff-list.kt > li > div {background-color: var(--kt-sub);}
.staff-list.pega > li > div {background-color: var(--pega-sub);}
.staff-list.ss > li > div {background-color: var(--ss-sub);}

.staff-detail {display: flex; align-items: flex-start; justify-content: space-between; padding: 2.4rem 2rem; border-radius: 1.2rem; height: 9.6rem; overflow: hidden; margin-bottom: 2rem;}
.staff-detail ~ .box + .box {padding: 2.4rem 2rem 0; margin: 2.4rem -2rem 1.2rem; border-top: 1.2rem solid var(--gray03);}
.staff-detail > div {display: flex; flex-flow: column; row-gap: .4rem;}
.staff-detail > div > p {font-size: 2rem; line-height: 2.8rem; font-weight: 600;}
.staff-detail > div > span {font-size: 1.2rem; line-height: 1.6rem; color: var(--body); font-weight: 500;}
.staff-detail > img {width: 16.5rem; margin-right: -2rem; margin-top: -1.2rem;}

@media screen and (max-width: 768px) {
    .pop .staff-detail > img {display: none;}
}

.staff-info {display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 1.6rem;}
.staff-info > li {display: flex; flex-flow: column; row-gap: .4rem;}
.staff-info > li > p {font-size: 1.2rem; line-height: 1.6rem; font-weight: 500; color: var(--body);}
.staff-info > li > span {font-size: 1.4rem; line-height: 2rem; font-weight: 500;}

.staff-career {display: flex; flex-flow: column; row-gap: 1.6rem;}
.staff-career > li {display: flex; flex-flow: column; row-gap: .4rem;}
.staff-career > li > p {font-size: 1.4rem; font-weight: 500; line-height: 2rem;}
.staff-career > li > span {font-size: 1.4rem; color: var(--subheadline); line-height: 2rem;}

.staff-detail.kgc {background-color: var(--kgc-sub);}
.staff-detail.sono {background-color: var(--sono-sub);}
.staff-detail.lg {background-color: var(--lg-sub);}
.staff-detail.sk {background-color: var(--sk-sub);}
.staff-detail.hd {background-color: var(--hd-sub);}
.staff-detail.kcc {background-color: var(--kcc-sub);}
.staff-detail.db {background-color: var(--db-sub);}
.staff-detail.kt {background-color: var(--kt-sub);}
.staff-detail.pega {background-color: var(--pega-sub);}
.staff-detail.ss {background-color: var(--ss-sub);}

/* 팀 > 응원단 */
.cheerleader {font-size: 1.4rem; line-height: 2rem; word-break: keep-all;}

/* 소식 > 공지사항 */
.board-table table th + th {border-left: 0;}
.board-table table td {height: 5.6rem; font-size: 1.4rem; line-height: 2rem; color: var(--body);}
.board-table table td.text-left {font-size: 1.6rem; line-height: 2.4rem; color: var(--black);}

@media screen and (max-width: 768px) {
    .mid-title + .board-list {border-top: 1px solid var(--gray02); margin-top: 0;}
    .board-list {margin-top: -1.2rem;}
    .board-list > li {padding: 1.2rem 0; border-bottom: 1px solid var(--gray02);}
    .board-list > li > a {display: flex; flex-flow: column; row-gap: 1.2rem;}
    .board-list > li > a > p {font-size: 1.4rem; line-height: 2rem; font-weight: 500;}
    .board-list > li > a > ul {display: flex; align-items: center; column-gap: .8rem;}
    .board-list > li > a > ul > li {font-size: 1.2rem; line-height: 1.6rem; color: var(--body);}
}

/* 소식 > 커뮤니티 */
.team-cheering {padding: 2rem; border: 1px solid var(--gray02); background-color: var(--white); filter: drop-shadow(0px 6px 12px rgba(25, 25, 25, 0.05)); border-radius: 1.2rem; display: flex; flex-flow: column; row-gap: 1.2rem;}
.team-cheering > ul {display: flex; flex-flow: column; row-gap: 1.2rem;}
.team-cheering > ul > li {padding-bottom: 1.2rem; border-bottom: 1px solid var(--gray02); display: flex; align-items: center; column-gap: 1.6rem;}
.team-cheering > ul > li .img {width: 3.6rem; height: 3.6rem; border-radius: .2rem; background-repeat: no-repeat; background-size: cover; background-position: center;}
.team-cheering > ul > li i {width: 3.6rem; height: 3.6rem;}
.team-cheering > ul > li .desc {flex: 1; display: flex; flex-flow: column; row-gap: .8rem;}
.team-cheering > ul > li .desc > div {display: flex; align-items: center; column-gap: .8rem;}
.team-cheering > ul > li .desc > div > p {font-size: 1.4rem; font-weight: 600; line-height: 2rem;}
.team-cheering > ul > li .desc > div > span {font-size: 1.2rem; line-height: 1.6rem; color: var(--body);}
.team-cheering > ul > li .desc > p {font-size: 1.4rem; line-height: 2rem; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; line-clamp: 1; -webkit-line-clamp: 1; -webkit-box-orient: vertical;}
.team-cheering > ul > li .button {width: 6.8rem; display: flex; align-items: center; column-gap: .4rem;}
.team-cheering > ul > li .button > button {width: fit-content; min-width: fit-content; height: fit-content; padding: 0; background-color: transparent;}
.team-cheering > ul > li .button > button > i {width: 2.4rem; height: 2.4rem;}
.team-cheering > ul > li .button > p {font-size: 1.2rem; line-height: 1.6rem; font-weight: 600;}

@media screen and (max-width: 768px) {
    .team-cheering {padding: 1.6rem; row-gap: 1.6rem;}
    .team-cheering > ul > li .desc > p {line-clamp: 2; -webkit-line-clamp: 2;}
}

/* 소식 > 커뮤니티 > 팀 선택 */
.team-select {display: grid; grid-template-columns: repeat(10, 1fr); grid-gap: 1rem;}
.team-select > li > a {height: 9.2rem; display: flex; flex-flow: column; row-gap: .8rem; align-items: center; justify-content: center; border-radius: 1.2rem; border: 1px solid var(--gray02);}
.team-select > li > a > i {width: 6.6rem; height: 4rem;}
.team-select > li > a > p {text-align: center; font-size: 1.4rem; line-height: 2rem; font-weight: 500; color: var(--subheadline);}

@media screen and (max-width: 768px) {
    .team-select {grid-template-columns: repeat(2, 1fr);}
}

/* 소식 > 커뮤니티 > 팀응원 / 카드자랑 */
.board-table.community table td > a {display: flex; align-items: center; column-gap: .4rem;}
.board-table.community table td > a .img {width: 3.6rem; height: 3.6rem; border-radius: .4rem; background-repeat: no-repeat; background-size: cover; background-position: center; display: inline-block;}
.board-table.community table td > a > p {overflow: hidden; text-overflow: ellipsis; display: -webkit-box; line-clamp: 1; -webkit-line-clamp: 1; -webkit-box-orient: vertical;}

@media screen and (max-width: 768px) {
    .board-list.community > li > a {flex-flow: initial; display: flex; align-items: center; column-gap: .8rem;}
    .board-list.community > li > a .img {width: 4.8rem; height: 4.8rem; border-radius: .4rem; background-repeat: no-repeat; background-size: cover; background-position: center;}
    .board-list.community > li > a .desc {flex: 1; display: flex; flex-flow: column; row-gap: 1rem; flex: 1; font-size: 1.4rem; line-height: 2rem;}
    .board-list.community > li > a .desc > div {display: flex; align-items: center; column-gap: .4rem;}
    .board-list.community > li > a .desc > div > p {font-size: 1.4rem; line-height: 2rem; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; line-clamp: 1; -webkit-line-clamp: 1; -webkit-box-orient: vertical;}
    .board-list.community > li > a .desc > ul {display: flex; align-items: center; column-gap: .8rem;}
    .board-list.community > li > a .desc > ul > li {font-size: 1.2rem; line-height: 1.6rem; color: var(--body);}
}

/* 소식 > 커뮤니티 > 글쓰기 */
.comment.empty {height: 22.7rem;}
.detail-input {display: flex; flex-flow: column; row-gap: 2.4rem;}
.detail-input > li {display: flex; flex-flow: column; row-gap: .8rem;}
.detail-input > li > p {display: block; align-items: center; column-gap: .8rem; font-size: 1.6rem; font-weight: 500;}

@media screen and (max-width: 768px) {
    .detail-input > li > p {font-size: 1.4rem;}

    .detail-input > li select,
    .detail-input > li input,
    .detail-input > li label {height: 4rem; padding: 0 1.2rem; font-size: 1.4rem; border-radius: .8rem;}
}

.detail-input .MuiDropzoneArea-root,
.detail-input .MuiDropzoneArea-root *:not(svg, svg *) {all: unset;}

.detail-input .MuiDropzoneArea-root {min-height: 12rem; padding: 1.8rem; font-size: 1.6rem; font-weight: 500; border-radius: 1.2rem; border: 1px solid var(--gray01); background-color: var(--white); cursor: pointer; display: flex; flex-flow: column; justify-content: center; row-gap: 1.6rem;}
.detail-input .MuiDropzoneArea-root .MuiDropzoneArea-textContainer {display: flex; flex-flow: column; align-items: center; row-gap: .8rem; width: fit-content; margin: 0 auto;}
.detail-input .MuiDropzoneArea-root .MuiDropzoneArea-textContainer > p {font-size: 1.4rem; color: var(--body); word-break: keep-all;}
.detail-input .MuiDropzoneArea-root .MuiDropzoneArea-textContainer > svg > path {fill: var(--body);}
.detail-input .MuiDropzoneArea-root .css-r1hick-MuiGrid-root {display: flex; align-items: center; grid-gap: 2rem; flex-wrap: wrap;}
.detail-input .MuiDropzoneArea-root .css-r1hick-MuiGrid-root > .MuiGrid-item {position: relative;}
.detail-input .MuiDropzoneArea-root .css-r1hick-MuiGrid-root > .MuiGrid-item > button {background-color: var(--body); border-radius: 100%; display: flex; align-items: center; justify-content: center; width: 1.6rem; height: 1.6rem; position: absolute; bottom: 0; right: -.8rem;}
.detail-input .MuiDropzoneArea-root .css-r1hick-MuiGrid-root > .MuiGrid-item > button > svg {width: 1.2rem; height: 1.2rem;}
.detail-input .MuiDropzoneArea-root .css-r1hick-MuiGrid-root > .MuiGrid-item > button > svg > path {fill: var(--white);}
.detail-input .MuiDropzoneArea-root .MuiDropzonePreviewList-image {width: 6.8rem; height: 6.8rem; border-radius: .8rem;}

@media screen and (max-width: 768px) {
    .detail-input .MuiDropzoneArea-root .MuiDropzonePreviewList-image {width: calc((100vw - 4rem - 4rem - 2px - 4rem) / 3); height: calc((100vw - 4rem - 4rem - 2px - 4rem) / 3);}
}

/* 소식 > 대회참가신청 > 참가신청 */
.apply-wrap {width: 39rem; padding: 12rem 0; margin: 0 auto; display: flex; flex-flow: column; align-items: center; justify-content: center;}
.apply-wrap .title {text-align: center; margin-bottom: 1.6rem;}
.apply-wrap .title + p {text-align: center; font-size: 1.6rem; line-height: 2.4rem; color: var(--body); margin-bottom: 2rem;}
.apply-wrap .mid-title > h3 {display: block;}
.apply-wrap .button {width: 100%; display: flex; align-items: center; justify-content: center; margin-top: 5rem; padding: 0 3.2rem;}
.apply-wrap .button > button {width: calc((100% - 1.2rem) / 2);}

@media screen and (max-width: 768px) {
    .apply-wrap {width: 100%; min-height: initial; padding: 0 1.2rem; align-items: flex-start;}
    .apply-wrap .button {padding: 0;}
}

.apply-step {width: 100%; height: 7rem; display: flex; align-items: center; justify-content: center; column-gap: .4rem; border-bottom: 1px solid var(--gray01); margin-bottom: 2.4rem;}
.apply-step > li {display: flex; align-items: center; column-gap: .4rem; font-size: 1.6rem; line-height: 2.4rem; color: var(--disabled);}
.apply-step > li.active {font-weight: 600; color: var(--black);}
.apply-step > li + li::before {content: ''; width: 2.4rem; height: 2.4rem; background-image: url(../img/ico/ic-join-step.svg); background-repeat: no-repeat; background-size: contain; background-position: center;}

@media screen and (max-width: 768px) {
    .apply-step {width: 100vw; margin: 0 -3.2rem 2.4rem;}
    .apply-step > li {display: flex; align-items: center; column-gap: .4rem; font-size: 1.6rem; line-height: 2.4rem; color: var(--disabled);}
    .apply-step > li.active {font-weight: 600; color: var(--black);}
    .apply-step > li + li::before {content: ''; width: 2.4rem; height: 2.4rem; background-image: url(../img/ico/ic-join-step.svg); background-repeat: no-repeat; background-size: contain; background-position: center;}
}

/* 소식 > 대회참가신청 > 정보입력 */
.apply-wrap .cont-box {width: 100%; margin: 0 auto; padding: 0 3.2rem;}
.apply-wrap .cont-box + .cont-box {margin-top: 5rem; border-top: 1.2rem solid var(--gray03); padding-top: 5rem;}
.apply-wrap .cont-box .box + .box {margin-top: 4rem;}
.apply-wrap .cont-box .mid-title + span {margin-top: -.4rem; font-size: 1.2rem; line-height: 1.6rem; color: var(--body); display: block;}

@media screen and (max-width: 768px) {
    .apply-wrap {padding: 0;}
    .apply-wrap .cont-box {width: 100%; padding: 0;}
    .apply-wrap .cont-box + .cont-box {width: 100vw; margin: 4rem -2rem 0; padding: 4rem 2rem 0;}

    .apply-wrap .cont-box + .cont-box .btn-wrap {margin: 4rem 0 -4rem;}
}

.apply-wrap .info {display: flex; flex-flow: column; row-gap: 2rem;}
.apply-wrap .info > li {display: flex; align-items: center; column-gap: 1.2rem; font-size: 1.2rem; line-height: 1.6rem; color: var(--body);}
.apply-wrap .info > li > select {width: 100%;}
.apply-wrap .info > li > div > *:nth-child(1):nth-last-child(2) ~ button {width: 100%;}
.apply-wrap .info > li > div {width: 100%; display: flex; flex-flow: column; row-gap: .8rem;}
.apply-wrap .info > li > div .input {width: 100%;}
.apply-wrap .info > li > div .input > input {width: 100%;}
.apply-wrap .info > li > div > p {font-size: 1.6rem; font-weight: 500; line-height: 2.4rem; color: var(--subheadline);}
.apply-wrap .info > li > div .button {display: flex; align-items: center; column-gap: 1.2rem;}
.apply-wrap .info > li > div .button .input {flex: 1;}
.apply-wrap .info > li > div .button > button {width: 9.2rem; white-space: nowrap;}

.apply-wrap .apply-mem {display: flex; flex-flow: column; row-gap: 1.2rem;}
.apply-wrap .apply-mem > li {display: flex; column-gap: 1.2rem;}
.apply-wrap .apply-mem > li > input {flex: 1;}
.apply-wrap .apply-mem > li > input + button {min-width: initial; width: 9.2rem;}
.apply-wrap .apply-mem > li > button:nth-child(1):nth-last-child(1) {width: 100%;}
.apply-wrap .apply-mem > li > button > i {filter: brightness(.2);}

/* 소식 > 대회참가신청 > 신청완료 */
.apply-wrap .result {padding-top: 8rem; display: flex; flex-flow: column; align-items: center; justify-content: center; row-gap: 3.2rem;}
.apply-wrap .result .logo {height: 4.8rem;}
.apply-wrap .result .intro > p {font-size: 2.4rem; line-height: 3.2rem; font-weight: 600; text-align: center; word-break: keep-all;}
.apply-wrap .result .button {flex-flow: column; row-gap: 1.2rem;}
.apply-wrap .result .button > button {width: 100%;}

@media screen and (max-width: 768px) {
    .apply-wrap .result {width: 100%; min-height: initial; padding: 0 1.2rem; align-items: flex-start;}
    .apply-wrap .result .intro > p {text-align: left;}
    .apply-wrap .result .intro > span {text-align: left;}
}

/* 미디어 */
.game-schedule-list.live > ul > li .sub .channel {position: relative; left: initial; -webkit-transform: initial; -moz-transform: initial; -ms-transform: initial; -o-transform: initial; transform: initial;}
.game-schedule-list.live > ul > li .sub .channel img {height: 1.2rem;}

@media screen and (max-width: 768px) {
    .game-schedule-list.live > ul > li .info .link {width: 100%;}
    .game-schedule-list.live > ul > li .info .link li {width: 100%;}
    .game-schedule-list.live > ul > li .info .link li > button {width: 10rem; height: 3.2rem; padding: 0 1.2rem; margin: 0 auto; font-size: 1.4rem; border-radius: .6rem; background-color: var(--black); color: var(--white);}
    .game-schedule-list.live > ul > li .info .link li > button.red {color: var(--white); background-color: var(--red);}
    .game-schedule-list.live > ul > li .info .link li > button.navy {color: var(--white); background-color: var(--navy);}
}

/* 미디어 > 상세 */
.live-game-nav {height: 6.4rem; background-color: var(--gray03); padding: 1.2rem; display: flex; align-items: center; position: relative; margin-bottom: 2rem;}
.live-game-nav > li {display: flex; align-items: center; justify-content: center; column-gap: 1.2rem; position: absolute;}
.live-game-nav > li.tit {left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%);}
.live-game-nav > li.prev {left: 1.2rem;}
.live-game-nav > li.next {right: 1.2rem;}
.live-game-nav > li > button {width: fit-content; min-width: initial; height: 4rem; padding: 0 1.2rem; font-size: 1.4rem; border-radius: .8rem; background-color: transparent; color: var(--subheadline);}
.live-game-nav > li > img {width: 4rem;}
.live-game-nav > li > div {display: flex; align-items: center; column-gap: .8rem;}
.live-game-nav > li > div:nth-child(1) {flex-flow: row-reverse;}
.live-game-nav > li > div:nth-child(1) > p {text-align: right;}
.live-game-nav > li > div > i {width: 3.6rem; height: 3.6rem;}
.live-game-nav > li > div > p {font-size: 1.6rem; line-height: 2.4rem; font-weight: 600;}

@media screen and (max-width: 768px) {
    .live-game-nav {display: none;}
}

.live-iframe {border-radius: 1.2rem; width: 100%; height: 45.6rem; margin-bottom: 2rem;}

@media screen and (max-width: 768px) {
    .live-iframe {border-radius: 0; width: 100vw; margin: -2.4rem -2rem 0; height: 56vw;}
    .live-iframe + .tab-style1 {margin-top: 0;}
}

/* 미디어 > kbl film */
.swiper-button {position: absolute; width: 4.8rem; height: 4.8rem; border-radius: 100%; background-repeat: no-repeat; background-size: contain; background-position: center; filter: drop-shadow(0px 2px 6px rgba(25, 25, 25, 0.15)); cursor: pointer; z-index: 10;}
.swiper-button.prev {left: -2.4rem; right: initial; width: 4.8rem; height: 4.8rem; margin: 0; background-image: url(../img/ico/ic-swiper-prev.svg);}
.swiper-button.next {left: initial; right: -2.4rem; width: 4.8rem; height: 4.8rem; margin: 0; background-image: url(../img/ico/ic-swiper-next.svg);}
.swiper-button::after {content: none;}

.media-swiper-wrap {width: 120rem; position: relative;}
.media-swiper-wrap .swiper-button.type1 {top: 5.6rem;}
.media-swiper-wrap .swiper-button.type2 {top: 17.4rem;}

@media screen and (max-width: 768px) {
    .swiper-button {display: none;}

    .media-swiper-wrap {width: 100vw; margin: 0 -2rem;}
}

.media-swiper-wrap.grid-3 {width: 100%;}
.media-swiper-wrap.grid-3 .media-swiper.type1.swiper .swiper-slide > a .img {height: 14.8rem;}

@media screen and (max-width: 768px) {
    .media-swiper-wrap.grid-3 {width: 100vw;}
    .media-swiper-wrap.grid-3 .media-swiper.type1.swiper .swiper-slide {width: 17rem;}
    .media-swiper-wrap.grid-3 .media-swiper.type1.swiper .swiper-slide > a .img {height: 9.4rem;}
}

.media-swiper.type1.swiper .swiper-slide > a {display: flex; flex-flow: column; row-gap: 2rem;}
.media-swiper.type1.swiper .swiper-slide > a .img {width: 100%; height: 16rem; border-radius: 1.2rem; overflow: hidden; display: flex; align-items: center; justify-content: center;}
.media-swiper.type1.swiper .swiper-slide > a .img img {width: 100%;}
.media-swiper.type1.swiper .swiper-slide > a .desc {display: flex; flex-flow: column; row-gap: .8rem;}
.media-swiper.type1.swiper .swiper-slide > a .desc > p {font-size: 1.6rem; line-height: 2.4rem; font-weight: 500; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; line-clamp: 1; -webkit-line-clamp: 1; -webkit-box-orient: vertical;}
.media-swiper.type1.swiper .swiper-slide > a .desc > ul {display: flex; align-items: center; column-gap: .8rem;}
.media-swiper.type1.swiper .swiper-slide > a .desc > ul > li {font-size: 1.2rem; line-height: 1.6rem; color: var(--body);}

@media screen and (max-width: 768px) {
    .media-swiper.type1.swiper {padding: 0 2rem;}
    .media-swiper.type1.swiper .swiper-slide {width: 21.6rem;}
    .media-swiper.type1.swiper .swiper-slide > a {row-gap: 1.2rem;}
    .media-swiper.type1.swiper .swiper-slide > a .img {height: 12rem; border-radius: .8rem;}
    .media-swiper.type1.swiper .swiper-slide > a .desc {display: flex; flex-flow: column; row-gap: .8rem;}
    .media-swiper.type1.swiper .swiper-slide > a .desc > p {font-size: 1.4rem; line-height: 2rem;}
}

.media-swiper.type2.swiper .swiper-slide > a {position: relative; display: block;}
.media-swiper.type2.swiper .swiper-slide > a .img {height: 39.6rem; position: relative; border-radius: .8rem; overflow: hidden; display: flex; align-items: center; justify-content: center;}
.media-swiper.type2.swiper .swiper-slide > a .img::before {content: ''; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: linear-gradient(180deg, rgba(255, 255, 255, 0.0) 0%, rgba(0, 0, 0, 0.75) 100%);}
.media-swiper.type2.swiper .swiper-slide > a .img img {height: 100%;}
.media-swiper.type2.swiper .swiper-slide > a .desc {width: 100%; height: 100%; position: absolute; top: 0; left: 0; padding: 1.6rem; display: flex; flex-flow: column; justify-content: flex-end; row-gap: .8rem; z-index: 10;}
.media-swiper.type2.swiper .swiper-slide > a .desc > p {font-size: 1.6rem; line-height: 2.4rem; font-weight: 500; color: var(--white); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; line-clamp: 2; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.media-swiper.type2.swiper .swiper-slide > a .desc > span {font-size: 1.2rem; line-height: 1.6rem; color: var(--gray01);}

@media screen and (max-width: 768px) {
    .media-swiper.type2.swiper {padding: 0 2rem;}
    .media-swiper.type2.swiper .swiper-slide {width: 15.8rem;}
    .media-swiper.type2.swiper .swiper-slide > a .img {height: 28rem; border-radius: .8rem;}
    .media-swiper.type2.swiper .swiper-slide > a .desc > p {font-size: 1.4rem; line-height: 2rem;}
}

.media-search {display: flex; align-items: center; column-gap: 1rem; margin-bottom: 2.4rem;}
.media-search > li {position: relative; display: flex; align-items: center;}
.media-search > li.mobile {display: none;}
.media-search > li > .input {width: 26rem;}
.media-search > li > .input button {right: 4.8rem;}
.media-search > li > .input input {width: 100%; height: 4rem; padding: 0 1.2rem; font-size: 1.4rem; border-radius: .8rem;}
.media-search > li > .input + i {position: absolute; right: 1.2rem; cursor: pointer;}
.media-search > li > button {width: fit-content; min-width: 6.4rem;  height: 4rem; padding: 0; border-radius: .8rem; position: relative;}

@media screen and (max-width: 768px) {
    .desktop + .media-search {margin-top: -1.4rem;}
    .media-search > li {flex: 1;}
    .media-search > li.desktop {display: none;}
    .media-search > li.mobile {display: flex;}
}

.side-search-filter {background-color: var(--gray03); border-radius: 2rem; padding: 2rem; display: flex; flex-flow: column; height: calc(100vh - 14.8rem - 6rem); overflow-y: hidden;}
.side-search-filter .mid-title {margin-bottom: 1.6rem;}
.side-search-filter .filter-wrap {flex: 1; overflow-y: auto; border-bottom: 0; margin-bottom: 0; padding-bottom: 2rem;}
.side-search-filter .filter-wrap .filter {display: flex; flex-flow: column; row-gap: 1.2rem;}
.side-search-filter .filter-wrap .filter + .filter {margin-top: 2rem; border-top: 1px solid var(--gray02); padding-top: 2rem;}
.side-search-filter .filter-wrap .filter > p {font-size: 1.4rem; line-height: 2rem; font-weight: 600; color: var(--subheadline);}
.side-search-filter .filter-wrap .filter > ul {display: flex; flex-wrap: wrap; grid-gap: 1.6rem 2rem;}
.side-search-filter .filter-wrap .filter > button {width: fit-content; min-width: initial; height: fit-content; padding: 0; column-gap: .4rem; font-size: 1.4rem; color: var(--body); background-color: transparent; margin: .4rem auto 0;}
.side-search-filter .btn-wrap {justify-content: center; margin-top: 0; background-color: var(--gray02); margin: 0 -2rem -2rem; padding: 1.2rem 2rem;}
.side-search-filter .btn-wrap > button {width: calc((100% - 1.2rem) / 2);}

@media screen and (max-width: 768px) {
    .side-search-filter {background-color: var(--white); border-radius: 2rem 2rem 0 0; padding: 2.4rem 2rem 2rem 2rem; height: initial; width: 100vw; position: fixed; bottom: 0; left: 0; z-index: 2; }
    .side-search-filter .filter-wrap {max-height: calc(100vh - 35rem); width: fit-content; margin: 0;}
    .side-search-filter .filter-wrap .filter {display: flex; flex-flow: column; row-gap: 1.2rem;}
    .side-search-filter .filter-wrap .filter + .filter {margin-top: 2rem; border-top: 1px solid var(--gray02); padding-top: 2rem;}
    .side-search-filter .filter-wrap .filter > p {font-size: 1.4rem; line-height: 2rem; font-weight: 600; color: var(--subheadline);}
    .side-search-filter .filter-wrap .filter > ul {display: flex; flex-wrap: wrap; grid-gap: 1.6rem 2rem;}
    .side-search-filter .filter-wrap .filter > button {width: fit-content; min-width: initial; height: fit-content; padding: 0; column-gap: .4rem; font-size: 1.4rem; color: var(--body); background-color: transparent; margin: .4rem auto 0;}
    .side-search-filter .btn-wrap {background-color: var(--gray03);}
}

.filter-result {padding-bottom: 2rem; border-bottom: 1px solid var(--gray02); margin-bottom: 2.4rem; display: flex; flex-wrap: wrap; align-items: center; grid-gap: 1.6rem .8rem;}
.filter-result > p {font-size: 1.4rem; line-height: 2rem; color: var(--subheadline);}
.filter-result > div + p {margin-left: .8rem;}
.filter-result > div {display: flex; align-items: center; column-gap: .4rem; background-color: var(--gray02); padding: 0 .4rem 0 .8rem; height: 2.4rem; border-radius: .4rem; font-size: 1.4rem; color: var(--subheadline);}
.filter-result > div > button {width: fit-content; min-width: initial; height: fit-content; padding: 0; background-color: transparent;}

@media screen and (max-width: 768px) {
    .filter-result {grid-gap: 1.2rem .8rem;}
}

/* 미디어 > kbl film > 상세 */
.film-iframe {border-radius: 1.2rem; width: 100%; height: 45.6rem; margin-bottom: 2rem;}
.film-title {display: flex; flex-flow: column; row-gap: 2rem; padding-bottom: 2.4rem; border-bottom: 1px solid var(--gray02);}
.film-title > p {font-size: 2.4rem; font-weight: 600; line-height: 3.2rem; word-break: keep-all;}
.film-title > div {display: flex; align-items: center; justify-content: space-between;}
.film-title > div .info {display: flex; align-items: center; column-gap: .8rem;}
.film-title > div .info > li {font-size: 1.4rem; line-height: 2rem; color: var(--body);}
.film-title > div .button {display: flex; align-items: center; column-gap: 2rem;}
.film-title > div .button > li {display: flex; align-items: center; column-gap: .4rem; font-size: 1.4rem; font-weight: 600; line-height: 2rem;}
.film-title > div .button > li.mobile {display: none;}
.film-title > div .button > li > button {width: auto; min-width: initial; height: fit-content; padding: 0; background-color: transparent;}
.film-title > div .button > li > button > i {width: 2.4rem; height: 2.4rem;}

@media screen and (max-width: 768px) {
    .film-iframe {border-radius: 0; width: 100vw; margin: -2.4rem -2rem 2.4rem; height: 56vw;}
    .film-title {margin: 0 -2rem; padding: 0 2rem 2.4rem; row-gap: 1.6rem; border-bottom: 1.2rem solid var(--gray03);}
    .film-title > p {font-size: 2rem; line-height: 2.8rem;}
    .film-title > div .info > li {font-size: 1.2rem; line-height: 1.6rem;}
    .film-title > div .button {column-gap: 1.6rem;}
    .film-title > div .button > li.mobile {display: flex;}
}

.detail-comments {background-color: var(--gray03); border-radius: 2rem; padding: 2rem; display: flex; flex-flow: column; height: calc(100vh - 14.8rem - 6rem); overflow-y: hidden;}
.detail-comments .mid-title {margin-bottom: 1.6rem;}
.detail-comments .mid-title > button {display: none;}
.detail-comments > ul {flex: 1; overflow-y: auto; border-bottom: 0; margin-bottom: 0; padding-bottom: 2rem; display: flex; flex-flow: column; row-gap: 2rem;}
.detail-comments > ul > li {display: flex; flex-flow: column; row-gap: 1.2rem;}
.detail-comments > ul > li > div {display: flex; flex-flow: column; row-gap: .4rem;}
.detail-comments > ul > li > div .info {display: flex; align-items: center; column-gap: .8rem;}
.detail-comments > ul > li > div .info > p {font-size: 1.4rem; font-weight: 600; line-height: 2rem;}
.detail-comments > ul > li > div .info > span {font-size: 1.2rem; line-height: 1.6rem; color: var(--body);}
.detail-comments > ul > li > div .info > ul {display: flex; align-items: center; column-gap: .6rem; margin-left: auto;}
.detail-comments > ul > li > div .info > ul > li {display: flex; align-items: center; column-gap: .6rem;}
.detail-comments > ul > li > div .info > ul > li + li::before {content: ''; width: 1px; height: 1.2rem; background-color: var(--gray01);}
.detail-comments > ul > li > div .info > ul > li > button {width: fit-content; height: fit-content; padding: 0; min-width: initial; font-size: 1.2rem; color: var(--body); background-color: transparent;}
.detail-comments > ul > li > div .info > button { margin-left: auto; width: fit-content; height: fit-content; padding: 0; min-width: initial; font-size: 1.2rem; color: var(--body); background-color: transparent; column-gap: .4rem;}
.detail-comments > ul > li > div > p {font-size: 1.4rem; line-height: 2rem; word-break: keep-all; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; line-clamp: 2; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.detail-comments > ul > li > div > p.active {overflow: initial; text-overflow: initial; display: initial; line-clamp: initial; -webkit-line-clamp: initial; -webkit-box-orient: initial;}
.detail-comments > ul > li > div > button {margin-top: .8rem; width: fit-content; min-width: initial; height: fit-content; padding: 0; background-color: transparent; font-size: 1.4rem; line-height: 2rem; color: var(--body); column-gap: .4rem;}
.detail-comments > ul > li > div.reply .info::before {content: ''; width: 2rem; height: 2rem; background-image: url(../img/ico/ic-reply.svg); background-repeat: no-repeat; background-size: contain; background-position: center;}
.detail-comments > ul > li > div.reply .info> p {color: var(--orange);}
.detail-comments > ul > li > div.reply > p {padding-left: 2.8rem;}
.detail-comments > .input {display: flex; align-items: center; column-gap: 1rem; margin-top: 0; background-color: var(--gray02); margin: 0 -2rem -2rem; padding: 1.2rem 2rem;}
.detail-comments > .input > .input {flex: 1;}
.detail-comments > .input > .input > input {width: 100%; height: 4rem; padding: 0 1.2rem; font-size: 1.4rem; border-radius: .8rem;}
.detail-comments > .input > button {display: flex; position: relative; right: auto; background-color: var(--black); min-width: 6.4rem; height: 4rem; padding: 0 1.2rem; font-size: 1.4rem; border-radius: .8rem;}

@media screen and (max-width: 768px) {
    .detail-comments-wrap {width: 100vw; height: 100vh; position: fixed; top: 0; left: 0; background-color: rgba(0, 0, 0, 0.5); z-index: 100;}
    .detail-comments {background-color: var(--white); border-radius: 2rem 2rem 0 0; padding: 2.4rem 2rem 2rem 2rem; height: initial; width: 100vw; position: absolute; bottom: 0; left: 0;}
    .detail-comments .mid-title > button {display: flex;}
    .detail-comments > ul {max-height: calc(100vh - 42rem);}
    .detail-comments > .input {background-color: var(--gray03);}
}

/* 미디어 > KBL Shorts */
.pop-shorts {border-radius: 2rem; display: flex; flex-flow: column; position: relative; background-color: transparent;}
.pop-shorts .close {position: absolute; top: 0; right: -5.2rem; width: fit-content; min-width: initial; height: fit-content; padding: 0; background-color: transparent;  filter: invert(1);}

@media screen and (max-width: 768px) {
    .pop-shorts {width: 100vw; height: 100vh; border-radius: 0; display: block;  background-color: var(--black);}
    .pop-shorts .close {top: 1.4rem; right: 2.4rem; z-index: 10;}
}

.shorts-swiper-wrap {display: flex; column-gap: 2rem;}
.shorts-swiper-wrap .detail-comments {display: none;}
.shorts-swiper-wrap .detail-comments.active {display: flex; width: 34rem; height: 77.8rem;}
.shorts-swiper-wrap .swiper-button.shorts {top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%);}
.shorts-swiper-wrap .swiper-button.shorts.prev {left: -6.8rem;}
.shorts-swiper-wrap .swiper-button.shorts.next {right: -6.8rem;}

@media screen and (max-width: 768px) {
    .shorts-swiper-wrap {width: 100%; height: 100%;}
    .shorts-swiper-wrap .detail-comments.active {width: 100vw; height: initial; z-index: 1;}
}

.shorts-swiper.swiper {width: 38rem;}
.shorts-swiper.swiper .swiper-slide {display: flex; flex-flow: column; row-gap: 1.6rem;}
.shorts-swiper.swiper .swiper-slide video {width: 38rem; height: 66rem; border-radius: 2rem;}
.shorts-swiper.swiper .swiper-slide video * {width: 100%; height: 100%;}
.shorts-swiper.swiper .swiper-slide video::-webkit-media-controls {display: none !important;}
.shorts-swiper.swiper .swiper-slide > div {display: flex; flex-flow: column; row-gap: 1.2rem;}
.shorts-swiper.swiper .swiper-slide > div > p {height: 6.4rem; font-size: 2.4rem; line-height: 3.2rem; font-weight: 600; color: var(--white); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; line-clamp: 2; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.shorts-swiper.swiper .swiper-slide > div > div {display: flex; align-items: center; justify-content: space-between;}
.shorts-swiper.swiper .swiper-slide > div > div .info {display: flex; align-items: center; column-gap: .8rem;}
.shorts-swiper.swiper .swiper-slide > div > div .info > li {font-size: 1.4rem; line-height: 2rem; color: var(--gray01);}
.shorts-swiper.swiper .swiper-slide > div > div .button {display: flex; align-items: center; column-gap: 2rem;}
.shorts-swiper.swiper .swiper-slide > div > div .button > li {display: flex; align-items: center; column-gap: .4rem; font-size: 1.4rem; font-weight: 600; line-height: 2rem; color: var(--white);}
.shorts-swiper.swiper .swiper-slide > div > div .button > li > button {width: auto; min-width: initial; height: fit-content; padding: 0; background-color: transparent;}
.shorts-swiper.swiper .swiper-slide > div > div .button > li > button > i {width: 2.4rem; height: 2.4rem;}

@media screen and (max-width: 768px) {
    .shorts-swiper.swiper {width: 100%;}
    .shorts-swiper.swiper .swiper-slide {height: 100%; position: relative; align-items: center; justify-content: center;}
    .shorts-swiper.swiper .swiper-slide video {width: 100%; height: auto; border-radius: 0;}
    .shorts-swiper.swiper .swiper-slide > div {width: 100%; padding: 2.4rem 2rem 4rem; position: absolute; left: 0; bottom: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, 0.25) 24.48%, rgba(0, 0, 0, 0.50) 50%, rgba(0, 0, 0, 0.75) 75%, #000 100%);}
    .shorts-swiper.swiper .swiper-slide > div > p {height: 5.6rem; font-size: 2rem; line-height: 2.8rem;}
    .shorts-swiper.swiper .swiper-slide > div > div .info > li {font-size: 1.2rem; line-height: 1.6rem;}
    .shorts-swiper.swiper .swiper-slide > div > div .button {column-gap: 1.6rem;}
}

/* 게임 > kbl challenge */
.fantasy-banner {margin-bottom: 5rem;}
.fantasy-banner > a {border-radius: 1.2rem; overflow: hidden;  background-repeat: no-repeat; background-size: cover; background-position: center right; padding: 3.6rem 4rem; display: flex; flex-flow: column; row-gap: 2rem; filter: drop-shadow(0px 8.308px 16.615px rgba(0, 0, 0, 0.05));}
.fantasy-banner > a > p {font-size: 2.8rem; line-height: 3.4rem; font-weight: 600; color: var(--white);}
.fantasy-banner > a > span {display: flex; align-items: center; column-gap: .4rem; font-size: 1.4rem; line-height: 2rem; color: var(--white);}

@media screen and (max-width: 768px) {
    .fantasy-banner {margin-bottom: 4rem; margin-top: -2.4rem;}
    .fantasy-banner > a {border-radius: 0; padding: 2.4rem 2rem; width: 100vw; margin: 0 -2rem; row-gap: 0;}
    .fantasy-banner > a > p {font-size: 1.6rem; line-height: 2.4rem; font-weight: 700; display: flex; flex-flow: column; row-gap: .4rem;}
    .fantasy-banner > a > p > span {display: block; font-size: 1.2rem; font-weight: 400; line-height: 1.6rem; color: var(--gray01);}
    .fantasy-banner > a > span {display: none;}

}

.point-rank {border: 1px solid var(--gray02); border-radius: 1.2rem; padding: 2rem 1.6rem; box-shadow: 0px 6px 12px 0px rgba(25, 25, 25, 0.05); display: flex; flex-flow: column; row-gap: 1.6rem;}
.point-rank > div {display: flex; align-items: center; column-gap: 2.4rem; margin-right: 4rem; padding-bottom: 1rem; position: relative;}
.point-rank > div::after {content: ''; width: calc(100% + 2rem); height: 1px; background-color: var(--gray02); position: absolute; left: 0; bottom: 0;}
.point-rank > div > span {width: 6.4rem; text-align: center; font-size: 1.6rem; line-height: 2.4rem; font-weight: 600; color: var(--orange);}
.point-rank > div > p {flex: 1; font-size: 1.6rem; line-height: 2.4rem; font-weight: 600; color: var(--orange);}
.point-rank > div > div {width: 16.4rem; text-align: right; font-size: 1.6rem; line-height: 2.4rem; font-weight: 600; color: var(--orange);}
.point-rank > ul {display: grid; grid-template-rows: repeat(10, 1fr); grid-auto-flow: column; grid-gap: 1.6rem 8rem;}
.point-rank > ul > li {display: flex; align-items: center; column-gap: 2.4rem;}
.point-rank > ul > li:nth-child(-n+3) > * {font-weight: 500; color: var(--black);}
.point-rank > ul > li > span {width: 6.4rem; text-align: center; font-size: 1.6rem; line-height: 2.4rem; color: var(--subheadline);}
.point-rank > ul > li > p {flex: 1; font-size: 1.6rem; line-height: 2.4rem; color: var(--subheadline);}
.point-rank > ul > li > div {width: 16.4rem; text-align: right; margin-right: 4rem; font-size: 1.6rem; line-height: 2.4rem; color: var(--subheadline);}
.point-rank > ul > li.my {background-color: #FEF9F2;}
.point-rank > ul > li.my > * {font-weight: 600; color: var(--orange);}

@media screen and (max-width: 768px) {
    .point-rank {row-gap: 1rem;}
    .point-rank > div {column-gap: 1.6rem; width: 100%;}
    .point-rank > div::after {width: 100%;}
    .point-rank > div > div {width: 11.2rem; margin-right: 4rem;}
    .point-rank > ul {grid-template-rows: repeat(3, 1fr); padding-top: 1.6rem;}
    .point-rank > ul > li {column-gap: 1.6rem;}
    .point-rank > ul > li:nth-child(n+4) {display: none;}
    .point-rank > ul > li > div {width: 11.2rem;}
}

.challenge-list {display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 2.8rem 4rem;}
.challenge-list > li > a {padding: 2rem; border-radius: 1.2rem; background-repeat: no-repeat; background-size: cover; background-position: center; display: flex; flex-flow: column; row-gap: .8rem; position: relative; justify-content: center; overflow: hidden; filter: drop-shadow(0px 4px 8px rgba(0, 0, 0, 0.05));}
.challenge-list > li > a > p {font-size: 2rem; font-weight: 600; color: var(--white); line-height: 2.8rem;}
.challenge-list > li > a > span {font-size: 1.2rem; font-weight: 500; color: var(--white); line-height: 1.6rem;}
.challenge-list > li > a > i {position: absolute; right: 2rem;}
.challenge-list > li.disabled > a {opacity: .2;}
.challenge-list > li.stats-king > a {background-image: url(../img/play/stats-king-bg.png);}
.challenge-list > li.daily-picks > a {background-image: url(../img/play/daily-picks-bg.png);}
.challenge-list > li.weekly6 > a {background-image: url(../img/play/weekly6-bg.png);}
.challenge-list > li.bracket-challenge > a {background-image: url(../img/play/bracket-challenge-bg.png);}
.challenge-list > li.draft-challenge > a {background-image: url(../img/play/draft-challenge-bg.png);}

@media screen and (max-width: 768px) {
    .challenge-list {grid-template-columns: repeat(1, 1fr); grid-gap: 2rem;}
}

/* 게임 > kbl challenge > 전체 포인트 상세 */
.point-rank-detail {display: flex; flex-flow: column; row-gap: 1.6rem;}
.point-rank-detail > div {display: flex; align-items: center; column-gap: 3.6rem; justify-content: center; background-color: var(--black); padding: 2rem;}
.point-rank-detail > div > span {width: 6.4rem; text-align: center; font-size: 1.6rem; line-height: 2.4rem; font-weight: 500; color: var(--orange);}
.point-rank-detail > div > p {width: 8rem; font-size: 1.6rem; line-height: 2.4rem; font-weight: 500; color: var(--white);}
.point-rank-detail > div > div {width: 19rem; text-align: right; font-size: 1.6rem; line-height: 2.4rem; font-weight: 500; color: var(--white);}
.point-rank-detail > ul {display: flex; flex-flow: column;}
.point-rank-detail > ul > li {display: flex; align-items: center; column-gap: 3.6rem; justify-content: center; padding: .8rem;}
.point-rank-detail > ul > li:nth-child(-n+3) > * {font-weight: 500; color: var(--black);}
.point-rank-detail > ul > li > span {width: 6.4rem; text-align: center; font-size: 1.6rem; line-height: 2.4rem; color: var(--subheadline);}
.point-rank-detail > ul > li > p {width: 8rem; font-size: 1.6rem; line-height: 2.4rem; color: var(--subheadline);}
.point-rank-detail > ul > li > div {width: 19rem; text-align: right; font-size: 1.6rem; line-height: 2.4rem; color: var(--subheadline);}
.point-rank-detail > ul > li.my {background-color: #FEF9F2;}
.point-rank-detail > ul > li.my > * {font-weight: 600; color: var(--orange);}

@media screen and (max-width: 768px) {
    .point-rank-detail > div {column-gap: 2.4rem; padding: 2rem; width: 100vw; margin: 0 -2rem;}
    .point-rank-detail > div > p {width: initial; flex: 1;}
    .point-rank-detail > div > div {width: 16.4rem;}
    .point-rank-detail > ul > li {column-gap: 2.4rem; height: 4rem; padding: 0 2rem; width: 100vw; margin: 0 -2rem;}
    .point-rank-detail > ul > li > p {width: initial; flex: 1;}
    .point-rank-detail > ul > li > div {width: 16.4rem;}
}

/* 게임 > StatsKing > 게임참여 */
.game-title {padding: 2.4rem 2rem; margin-bottom: 2.4rem; background-repeat: no-repeat; background-size: cover; background-position: center; display: flex; flex-flow: column; row-gap: 2.4rem;}
.game-title > div {display: flex; align-items: center; justify-content: space-between;}
.game-title > div > h2 {font-size: 2.8rem; font-weight: 600; color: var(--white); line-height: 3.6rem;}
.game-title > div > a {font-size: 1.4rem; line-height: 1.6rem; color: var(--white); font-weight: 600; border-bottom: 1px solid var(--white);}
.game-title .tab-style2 {margin: 0;}
.game-title + .filter-wrap {margin-top: -2.4rem;}

@media screen and (max-width: 768px) {
    .game-title {width: 100vw; margin: -2.4rem -2rem 2.4rem;}
}

.game-title.stats-king {background-image: url(../img/challenge/game-title-bg01.png);}
.game-title.daily-picks {background-image: url(../img/challenge/game-title-bg02.png);}
.game-title.weekly6 {background-image: url(../img/challenge/game-title-bg03.png);}
.game-title.bracket {background-image: url(../img/challenge/game-title-bg05.png);}
.game-title.draft {background-image: url(../img/challenge/game-title-bg04.png);}

@media screen and (max-width: 768px) {
    .game-title.stats-king {background-image: url(../img/challenge/game-title-bg01-mb.png);}
    .game-title.daily-picks {background-image: url(../img/challenge/game-title-bg02-mb.png);}
    .game-title.weekly6 {background-image: url(../img/challenge/game-title-bg03-mb.png);}
    .game-title.bracket {background-image: url(../img/challenge/game-title-bg05-mb.png);}
    .game-title.draft {background-image: url(../img/challenge/game-title-bg04-mb.png);}
}

.mid-title.game > h3 {font-size: 2.8rem; line-height: 3.6rem;}

.game-rule {display: flex; flex-flow: column; row-gap: 5rem;}
.game-rule > li {display: flex; flex-flow: column; row-gap: 2rem;}
.game-rule > li > div {display: flex; flex-flow: column; row-gap: .4rem;}
.game-rule > li > div > span {font-size: 1.6rem; list-style: 2.4rem; font-weight: 500; color: var(--disabled);}
.game-rule > li > div > p {font-size: 2rem; line-height: 2.8rem; font-weight: 500; word-break: keep-all;}
.game-rule > li > img {width: 100%;}
.game-rule > li > img.mobile {display: none;}

@media screen and (max-width: 768px) {
    .game-rule {row-gap: 4rem;}
    .game-rule > li > div > span {font-size: 1.4rem;}
    .game-rule > li > div > p {font-size: 1.6rem;}

    .game-rule > li > img.desktop {display: none;}
    .game-rule > li > img.mobile {display: block;}
}

.statsking-list {display: flex; flex-flow: column; row-gap: 2rem;}
.statsking-list > li {filter: drop-shadow(0px 6px 12px rgba(25, 25, 25, 0.05)); padding: 0 2rem; border-radius: 1.2rem; border: 1px solid var(--gray02); background-color: var(--white); display: flex; flex-flow: column;}
.statsking-list > li .info {display: flex; align-items: center; justify-content: space-between; padding: 1.6rem 0; border-bottom: 1px solid var(--gray02);}
.statsking-list > li .info > div {display: flex; align-items: center; column-gap: .8rem;}
.statsking-list > li .info > div > ul {display: flex; align-items: center; column-gap: .8rem;}
.statsking-list > li .info > div > ul > li {display: flex; align-items: center; column-gap: .8rem; font-size: 1.2rem; font-weight: 500; color: var(--subheadline);}
.statsking-list > li .info > div > ul > li + li::before {content: ''; width: 1px; height: 1.2rem; background-color: var(--gray01);}
.statsking-list > li .info > p {font-size: 1.2rem; line-height: 1.6rem; color: var(--subheadline);}
.statsking-list > li .info > p .font-red {font-size: 1.4rem; font-weight: 500; color: var(--red);}

@media screen and (max-width: 768px) {
    .statsking-list > li {padding: 0 1.6rem;}
    .statsking-list > li .info {padding: 1.2rem 0 0; border-bottom: 0;}
    .statsking-list > li .info > div > ul {display: none;}
}

.statsking-list > li .versus {padding: 2.4rem 0; position: relative; display: flex; align-items: center; justify-content: center;}
.statsking-list > li .versus > ul {display: flex; align-items: center; justify-content: center; column-gap: 1.2rem;}
.statsking-list > li .versus > ul > li {display: flex; align-items: center; column-gap: .8rem;}
.statsking-list > li .versus > ul > li:nth-child(2) {width: 9rem; justify-content: center;}
.statsking-list > li .versus > ul > li > i {width: 3.6rem; height: 3.6rem;}
.statsking-list > li .versus > ul > li > p {width: 11.2rem; font-size: 1.6rem; font-weight: 500; color: var(--subheadline);}
.statsking-list > li .versus > ul > li:nth-child(1) > p {text-align: right;}
.statsking-list > li .versus > ul > li .score {width: 100%; display: flex; align-items: center; justify-content: space-between;}
.statsking-list > li .versus > ul > li .score > p {font-size: 2rem; font-weight: 600; color: var(--black);}
.statsking-list > li .versus > ul > li .score .lose {color: var(--disabled);}
.statsking-list > li .versus > ul > li .score .draw {color: var(--disabled);}
.statsking-list > li .versus > ul > li .mobile  {display: none;}
.statsking-list > li .versus > div {width: fit-content; height: 3.2rem; padding: 0 1rem 0 1.8rem; font-size: 1.4rem; font-weight: 500; display: flex; align-items: center; justify-content: center; column-gap: .4rem; border-radius: .6rem; border: 1px solid var(--gray01); background-color: var(--white); color: var(--black); position: absolute; right: 0;}

@media screen and (max-width: 768px) {
    .statsking-list > li .versus {padding: 2rem 0;}
    .statsking-list > li .versus > ul {width: 100%; column-gap: .8rem;}
    .statsking-list > li .versus > ul > li {flex-flow: column; row-gap: .8rem; width: calc((100% - 9.2rem - 1.6rem) / 2);}
    .statsking-list > li .versus > ul > li:nth-child(2) {width: 9.2rem;}
    .statsking-list > li .versus > ul > li > i {width: 6.6rem; height: 4rem;}
    .statsking-list > li .versus > ul > li > p {width: fit-content; font-size: 1.4rem; font-weight: 500;}
    .statsking-list > li .versus > ul > li:nth-child(1) {flex-flow: column-reverse;}
    .statsking-list > li .versus > ul > li:nth-child(1) > p {text-align: center;}
    .statsking-list > li .versus > ul > li > img {display: none;}
    .statsking-list > li .versus > ul > li .score > p {font-size: 2.8rem;}
    .statsking-list > li .versus > ul > li .mobile {display: flex; flex-flow: column; row-gap: .4rem; align-items: center;}
    .statsking-list > li .versus > ul > li .mobile > p {font-size: 2.8rem; line-height: 3.6rem; font-weight: 600; color: var(--subheadline);}
    .statsking-list > li .versus > ul > li .mobile > span {font-size: 1.2rem; color: var(--body);}
    .statsking-list > li .versus > div {display: none;}
}

/* 게임 > StatsKing > 랭킹 */
.game-rank-table {max-height: 46rem; overflow-y: auto;}
.game-rank-table table::before {content: none;}
.game-rank-table table::after {content: none;}
.game-rank-table thead {position: sticky; position: -webkit-sticky; top: 0;}
.game-rank-table thead::before {content: ''; width: 100%; height: 1px; background-color: var(--disabled); position: absolute; top: 0; left: 0; z-index: 10;}
.game-rank-table thead::after {content: ''; width: 100%; height: 1px; background-color: var(--gray02); position: absolute; bottom: 0; left: 0; z-index: 10;}
.game-rank-table thead th {position: relative;}
.game-rank-table thead th:not(:last-child):before {content: ''; width: 1px; height: 100%; background-color: var(--gray02); position: absolute; top: 0; right: -.1rem; z-index: 10;}
.game-rank-table .my > * {background-color: #FEF9F2; color: var(--orange); font-weight: 500;}

.game-notice {padding: 2.4rem 2rem; margin-top: 5rem; display: flex; flex-flow: column; row-gap: 2rem; background-color: var(--gray03);}
.game-notice > div {display: flex; flex-flow: column; row-gap: 1.2rem;}
.game-notice > div > p {font-size: 1.6rem; font-weight: 600; color: var(--subheadline);}
.game-notice > div > ul {display: flex; flex-flow: column; row-gap: .8rem;}
.game-notice > div > ul > li {font-size: 1.4rem; line-height: 2rem; color: var(--subheadline); word-break: keep-all; display: flex; column-gap: .8rem;}
.game-notice > div > ul > li::before {content: '・'; font-size: 1rem; line-height: 1.8rem;}

.game-rank-table + * {margin-top: 0;}

@media screen and (max-width: 768px) {
    .game-notice {width: 100vw; margin: 0 -2rem -4rem;}

    .draw-result + .game-notice {margin-top: 4rem;}
}

/* 게임 > StatsKing > 상세 */
.statsking-list + .statsking-wrap {margin-top: 3.2rem;}
.statsking-wrap {display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 6rem;}
.statsking-wrap > div {display: flex; flex-flow: column; row-gap: 1.2rem;}
.statsking-wrap > div > p {width: 100%; text-align: center; font-size: 1.4rem; color: var(--body); padding-bottom: 1.2rem; border-bottom: 1px solid var(--gray02);}
.statsking-wrap > div > ul {display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 2rem;}
.statsking-wrap > div > ul > li {display: flex; flex-flow: column; row-gap: 1.2rem;}
.statsking-wrap > div > ul > li .part {height: 2.4rem; display: flex; align-items: center; justify-content: space-between;}
.statsking-wrap > div > ul > li .part > p {font-size: 1.6rem; font-weight: 500; color: var(--subheadline);}
.statsking-wrap > div > ul > li .player-name {width: 100%; height: 5.2rem; border-radius: 1.2rem; padding: 0 .8rem; border-radius: 1.2rem; border: 1px dashed var(--gray02); background-color: var(--gray03); cursor: pointer;}
.statsking-wrap > div > ul > li .player-name > div {width: 3.2rem; height: 3.2rem;}
.statsking-wrap > div > ul > li .player-name > p {color: var(--disabled); font-weight: 500;}
.statsking-wrap > div > ul > li .player-name.active {border: 1px solid var(--black); background-color: var(--white);}
.statsking-wrap > div > ul > li .player-name.active > p {color: var(--black);}
.statsking-wrap > div > ul > li .player-name.finish {border-color: transparent; background-color: var(--gray03);}
.statsking-wrap > div > ul > li .player-name.finish > p {color: var(--black);}

.statsking-wrap .empty {height: 30.4rem;}

.pop .statsking-wrap {height: 44rem;}
.pop .statsking-wrap > div {overflow-y: auto;}

@media screen and (max-width: 768px) {
    .statsking-wrap .desktop {display: none;}
    .pop .statsking-wrap.mypage {height: fit-content;}

    .statsking-wrap {grid-template-columns: repeat(1, 1fr);}
    .statsking-wrap > div > p {display: none;}
    .statsking-wrap > div > ul {grid-gap: 2rem;}
}

.statsking-wrap > div > ul > li .player-name.kgc {background-color: var(--kgc-sub); border-color: transparent;}
.statsking-wrap > div > ul > li .player-name.sono {background-color: var(--sono-sub); border-color: transparent;}
.statsking-wrap > div > ul > li .player-name.lg {background-color: var(--lg-sub); border-color: transparent;}
.statsking-wrap > div > ul > li .player-name.sk {background-color: var(--sk-sub); border-color: transparent;}
.statsking-wrap > div > ul > li .player-name.hd {background-color: var(--hd-sub); border-color: transparent;}
.statsking-wrap > div > ul > li .player-name.kcc {background-color: var(--kcc-sub); border-color: transparent;}
.statsking-wrap > div > ul > li .player-name.db {background-color: var(--db-sub); border-color: transparent;}
.statsking-wrap > div > ul > li .player-name.kt {background-color: var(--kt-sub); border-color: transparent;}
.statsking-wrap > div > ul > li .player-name.pega {background-color: var(--pega-sub); border-color: transparent;}
.statsking-wrap > div > ul > li .player-name.ss {background-color: var(--ss-sub); border-color: transparent;}

.statsking-wrap > div > ul > li .player-name.kgc > p {color: var(--black);}
.statsking-wrap > div > ul > li .player-name.sono > p {color: var(--black);}
.statsking-wrap > div > ul > li .player-name.lg > p {color: var(--black);}
.statsking-wrap > div > ul > li .player-name.sk > p {color: var(--black);}
.statsking-wrap > div > ul > li .player-name.hd > p {color: var(--black);}
.statsking-wrap > div > ul > li .player-name.kcc > p {color: var(--black);}
.statsking-wrap > div > ul > li .player-name.db > p {color: var(--black);}
.statsking-wrap > div > ul > li .player-name.kt > p {color: var(--black);}
.statsking-wrap > div > ul > li .player-name.pega > p {color: var(--black);}
.statsking-wrap > div > ul > li .player-name.ss > p {color: var(--black);}

.statsking-wrap > div > ul > li .player-name.active.kgc {background-color: var(--kgc-main); border-color: transparent;}
.statsking-wrap > div > ul > li .player-name.active.lg {background-color: var(--lg-main); border-color: transparent;}
.statsking-wrap > div > ul > li .player-name.active.sk {background-color: var(--sk-main); border-color: transparent;}
.statsking-wrap > div > ul > li .player-name.active.hd {background-color: var(--hd-main); border-color: transparent;}
.statsking-wrap > div > ul > li .player-name.active.sono {background-color: var(--sono-main); border-color: transparent;}
.statsking-wrap > div > ul > li .player-name.active.kcc {background-color: var(--kcc-main); border-color: transparent;}
.statsking-wrap > div > ul > li .player-name.active.db {background-color: var(--db-main); border-color: transparent;}
.statsking-wrap > div > ul > li .player-name.active.kt {background-color: var(--kt-main); border-color: transparent;}
.statsking-wrap > div > ul > li .player-name.active.pega {background-color: var(--pega-main); border-color: transparent;}
.statsking-wrap > div > ul > li .player-name.active.ss {background-color: var(--ss-main); border-color: transparent;}

.statsking-wrap > div > ul > li .player-name.active.kgc > p {color: var(--white);}
.statsking-wrap > div > ul > li .player-name.active.sono > p {color: var(--white);}
.statsking-wrap > div > ul > li .player-name.active.lg > p {color: var(--white);}
.statsking-wrap > div > ul > li .player-name.active.sk > p {color: var(--white);}
.statsking-wrap > div > ul > li .player-name.active.hd > p {color: var(--white);}
.statsking-wrap > div > ul > li .player-name.active.kcc > p {color: var(--white);}
.statsking-wrap > div > ul > li .player-name.active.db > p {color: var(--white);}
.statsking-wrap > div > ul > li .player-name.active.kt > p {color: var(--white);}
.statsking-wrap > div > ul > li .player-name.active.pega > p {color: var(--white);}
.statsking-wrap > div > ul > li .player-name.active.ss > p {color: var(--white);}

.btn-wrap.game {justify-content: space-between;}
.btn-wrap.game > div:nth-child(1):nth-last-child(1) {margin-left: auto;}
.btn-wrap.game > div.center {margin: 0 auto;}
.btn-wrap.game button {min-width: 12.8rem;}
.btn-wrap.game .right {position: relative; right: initial; margin-left: auto;}
.btn-wrap.game .mobile {display: none;}

@media screen and (max-width: 768px) {
    .btn-wrap.game {margin: 4rem -2rem 0; background-color: transparent; height: fit-content;}
    .btn-wrap.game > div {width: calc((100% - 1.2rem) / 2);}
    .btn-wrap.game > div:nth-child(1):nth-last-child(1) {width: 100%;}
    .btn-wrap.game > button {width: calc((100% - 1.2rem) / 2);}
    .btn-wrap.game .mobile {display: flex;}
}

.player-record-table2 {max-height: 46rem; overflow-y: auto; border-bottom: 1px solid var(--gray01);}
.player-record-table2 table::before {content: none;}
.player-record-table2 table::after {content: none;}
.player-record-table2 thead {position: sticky; position: -webkit-sticky; top: 0; background-color: var(--white); z-index: 9; border-top: 0;}
.player-record-table2 thead::after {content: ''; width: 100%; height: 1px; background-color: var(--gray02); position: absolute; bottom: 0; left: 0; z-index: 10;}
.player-record-table2 thead tr th {position: relative; height: fit-content; font-size: 1.2rem; line-height: 1.6rem; background-color: var(--white); padding: 0 .8rem 1.2rem; border-bottom: 1px solid var(--gray02);}
.player-record-table2 thead tr th + th {border-left: 0;}
.player-record-table2 tbody {padding-top: 2rem;}
.player-record-table2 tbody tr td {height: 6rem; font-weight: 500; border-bottom: 0;}

.pop .player-record-table2 {max-height: 38rem;}
.pop .player-record-table2 tbody tr {cursor: pointer;}
.pop .player-record-table2 tbody tr:hover > td {background-color: var(--gray03);}

@media screen and (max-width: 768px) {
    .pop .player-record-table2 {max-height: 27.6rem;}
}

/* 게임 > StatsKing > 상세 > 결과 팝업(모바일) */
@media screen and (max-width: 768px) {
    .statsking-result {display: flex; flex-flow: column; row-gap: 2rem;}
    .statsking-result .sort {display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 2rem;}
    .statsking-result .sort > p {width: 100%; text-align: center; font-size: 1.2rem; color: var(--body); padding-bottom: 1.2rem; border-bottom: 1px solid var(--gray02);}

    .statsking-result > ul {display: flex; flex-flow: column; row-gap: 3.6rem;}
    .statsking-result > ul > li {display: flex; flex-flow: column; row-gap: 1.6rem;}
    .statsking-result > ul > li .part {height: 2.4rem; display: flex; align-items: center; justify-content: space-between;}
    .statsking-result > ul > li .part > p {font-size: 1.4rem; font-weight: 500; color: var(--subheadline);}
    .statsking-result > ul > li > ul {display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 2rem;}
    .statsking-result > ul > li > ul > li .player-name {width: 100%; height: 5.2rem; border-radius: 1.2rem; padding: 0 .8rem; border-radius: 1.2rem; border: 1px dashed var(--gray02); background-color: var(--gray03); cursor: pointer;}
    .statsking-result > ul > li > ul > li .player-name > div {width: 3.2rem; height: 3.2rem;}
    .statsking-result > ul > li > ul > li .player-name > p {color: var(--disabled); font-weight: 500;}
    .statsking-result > ul > li > ul > li .player-name.active {border: 1px solid var(--black); background-color: var(--white);}
    .statsking-result > ul > li > ul > li .player-name.active > p {color: var(--black);}

    .statsking-result > ul > li > ul > li .player-name.kgc {background-color: var(--kgc-sub); border-color: transparent;}
    .statsking-result > ul > li > ul > li .player-name.sono {background-color: var(--sono-sub); border-color: transparent;}
    .statsking-result > ul > li > ul > li .player-name.lg {background-color: var(--lg-sub); border-color: transparent;}
    .statsking-result > ul > li > ul > li .player-name.sk {background-color: var(--sk-sub); border-color: transparent;}
    .statsking-result > ul > li > ul > li .player-name.hd {background-color: var(--hd-sub); border-color: transparent;}
    .statsking-result > ul > li > ul > li .player-name.kcc {background-color: var(--kcc-sub); border-color: transparent;}
    .statsking-result > ul > li > ul > li .player-name.db {background-color: var(--db-sub); border-color: transparent;}
    .statsking-result > ul > li > ul > li .player-name.kt {background-color: var(--kt-sub); border-color: transparent;}
    .statsking-result > ul > li > ul > li .player-name.pega {background-color: var(--pega-sub); border-color: transparent;}
    .statsking-result > ul > li > ul > li .player-name.ss {background-color: var(--ss-sub); border-color: transparent;}

    .statsking-result > ul > li > ul > li .player-name.kgc > p {color: var(--black);}
    .statsking-result > ul > li > ul > li .player-name.sono > p {color: var(--black);}
    .statsking-result > ul > li > ul > li .player-name.lg > p {color: var(--black);}
    .statsking-result > ul > li > ul > li .player-name.sk > p {color: var(--black);}
    .statsking-result > ul > li > ul > li .player-name.hd > p {color: var(--black);}
    .statsking-result > ul > li > ul > li .player-name.kcc > p {color: var(--black);}
    .statsking-result > ul > li > ul > li .player-name.db > p {color: var(--black);}
    .statsking-result > ul > li > ul > li .player-name.kt > p {color: var(--black);}
    .statsking-result > ul > li > ul > li .player-name.pega > p {color: var(--black);}
    .statsking-result > ul > li > ul > li .player-name.ss > p {color: var(--black);}

    .statsking-result > ul > li > ul > li .player-name.active.kgc {background-color: var(--kgc-main); border-color: transparent;}
    .statsking-result > ul > li > ul > li .player-name.active.lg {background-color: var(--lg-main); border-color: transparent;}
    .statsking-result > ul > li > ul > li .player-name.active.sk {background-color: var(--sk-main); border-color: transparent;}
    .statsking-result > ul > li > ul > li .player-name.active.hd {background-color: var(--hd-main); border-color: transparent;}
    .statsking-result > ul > li > ul > li .player-name.active.sono {background-color: var(--sono-main); border-color: transparent;}
    .statsking-result > ul > li > ul > li .player-name.active.kcc {background-color: var(--kcc-main); border-color: transparent;}
    .statsking-result > ul > li > ul > li .player-name.active.db {background-color: var(--db-main); border-color: transparent;}
    .statsking-result > ul > li > ul > li .player-name.active.kt {background-color: var(--kt-main); border-color: transparent;}
    .statsking-result > ul > li > ul > li .player-name.active.pega {background-color: var(--pega-main); border-color: transparent;}
    .statsking-result > ul > li > ul > li .player-name.active.ss {background-color: var(--ss-main); border-color: transparent;}

    .statsking-result > ul > li > ul > li .player-name.active.kgc > p {color: var(--white);}
    .statsking-result > ul > li > ul > li .player-name.active.sono > p {color: var(--white);}
    .statsking-result > ul > li > ul > li .player-name.active.lg > p {color: var(--white);}
    .statsking-result > ul > li > ul > li .player-name.active.sk > p {color: var(--white);}
    .statsking-result > ul > li > ul > li .player-name.active.hd > p {color: var(--white);}
    .statsking-result > ul > li > ul > li .player-name.active.kcc > p {color: var(--white);}
    .statsking-result > ul > li > ul > li .player-name.active.db > p {color: var(--white);}
    .statsking-result > ul > li > ul > li .player-name.active.kt > p {color: var(--white);}
    .statsking-result > ul > li > ul > li .player-name.active.pega > p {color: var(--white);}
    .statsking-result > ul > li > ul > li .player-name.active.ss > p {color: var(--white);}

    .statsking-result .empty {height: 20rem;}
}

/* 게임 > StatsKing > 상세 > 선수선택 팝업 */
.team-player {display: flex; flex-flow: column; row-gap: 2rem;}
.team-player .team {width: 100%; border-radius: .8rem; height: 4rem; display: flex; align-items: center; justify-content: center; column-gap: .8rem;}
.team-player .team > i {width: 3.2rem; height: 3.2rem;}
.team-player .team > p {font-size: 1.4rem; font-weight: 500;}

.team-player .team.kgc {background-color: var(--kgc-sub);}
.team-player .team.sono {background-color: var(--sono-sub);}
.team-player .team.lg {background-color: var(--lg-sub);}
.team-player .team.sk {background-color: var(--sk-sub);}
.team-player .team.hd {background-color: var(--hd-sub);}
.team-player .team.kcc {background-color: var(--kcc-sub);}
.team-player .team.db {background-color: var(--db-sub);}
.team-player .team.kt {background-color: var(--kt-sub);}
.team-player .team.pega {background-color: var(--pega-sub);}
.team-player .team.ss {background-color: var(--ss-sub);}

.team-player .team.kgc > p {color: var(--kgc-main);}
.team-player .team.lg > p {color: var(--lg-main);}
.team-player .team.sk > p {color: var(--sk-main);}
.team-player .team.hd > p {color: var(--hd-main);}
.team-player .team.sono > p {color: var(--sono-main);}
.team-player .team.kcc > p {color: var(--kcc-main);}
.team-player .team.db > p {color: var(--db-main);}
.team-player .team.kt > p {color: var(--kt-main);}
.team-player .team.pega > p {color: var(--pega-main);}
.team-player .team.ss > p {color: var(--ss-main);}

/* 게임 > Daily Picks > 게임참여 */
.layout.grid-2 .side .cont-box .team-versus {column-gap: 1.2rem;}
.layout.grid-2 .side .cont-box .team-versus > li:not(:nth-child(2)) {flex: 1;}
.layout.grid-2 .side .cont-box .team-versus > li > select {width: 100%; height: 4rem; padding: 0 4.4rem 0 1.2rem; border-radius: .8rem; background-position: center right 1rem; font-size: 1.4rem;}
.layout.grid-2 .side .cont-box .team-versus > li > img {width: 4rem; filter: none;}

.team-record-table2 table::before {content: ''; width: 100%; height: 1px; background-color: var(--disabled); position: absolute; top: 0; left: 0; z-index: 10;}
.team-record-table2 table::after {background-color: var(--disabled);}
.team-record-table2 table tr + tr {border-top: 1px solid var(--gray03);}

.game-count {display: none; height: 4rem; align-items: center; justify-content: center; column-gap: .8rem; margin-bottom: 2.4rem; padding: .8rem 2rem; background-color: var(--gray03); border-radius: .8rem; text-align: center; font-size: 1.4rem; line-height: 2rem; color: var(--subheadline);}
.game-count > span {font-size: 1.6rem; font-weight: 500; line-height: 2.4rem;}
.game-count.desktop {display: flex;}

@media screen and (max-width: 768px) {
    .game-count {display: flex;}
}

.dailypick-list {display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 4rem 6rem;}
.dailypick-list > li {display: flex; flex-flow: column; row-gap: .8rem;}
.dailypick-list > li .info {display: flex; align-items: center; justify-content: space-between;}
.dailypick-list > li .info > div {display: flex; align-items: center; column-gap: .8rem;}
.dailypick-list > li .info > div .label {min-width: 5.7rem;}
.dailypick-list > li .info > div > ul {display: flex; align-items: center; column-gap: .6rem;}
.dailypick-list > li .info > div > ul > li {display: flex; align-items: center; column-gap: .6rem; font-size: 1.2rem; font-weight: 500; color: var(--subheadline);}
.dailypick-list > li .info > div > ul > li + li::before {content: ''; width: 1px; height: 1.2rem; background-color: var(--gray01);}
.dailypick-list > li .info > a {display: flex; align-items: center; font-size: 1.2rem; font-weight: 500; color: var(--body);}
.dailypick-list > li > p {min-height: 4.8rem; font-size: 1.6rem; line-height: 2.4rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; line-clamp: 2; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.dailypick-list > li > ul {margin-top: .8rem; border-radius: 1.2rem; filter: drop-shadow(0px 6px 12px rgba(25, 25, 25, 0.05)); display: grid; grid-template-columns: repeat(3, 1fr);}
.dailypick-list > li > ul > li > input + label {width: calc(100% + 1px); margin-left: 1px; border: 1px solid var(--gray02); height: 8rem; display: flex; flex-flow: column; row-gap: .4rem; align-items: center; justify-content: center; background-color: var(--white);}
.dailypick-list > li > ul > li > input + label > i.lg-dark {background-image: url(/assets/img/ico/logo/ic-lg-dark.svg);}
.dailypick-list > li > ul > li > input + label > i.kgc-dark {background-image: url(/assets/img/ico/logo/ic-kgc-dark-line.svg);}
.dailypick-list > li > ul > li:nth-child(1) > input + label {border-radius: 1.2rem 0 0 1.2rem;}
.dailypick-list > li > ul > li:nth-child(3) > input + label {border-radius: 0 1.2rem 1.2rem 0;}
.dailypick-list > li > ul > li > input + label::before {content: none;}
.dailypick-list > li > ul > li > input + label > i {width: 3.6rem; height: 3.6rem;}
.dailypick-list > li > ul > li > input + label > p {font-size: 1.4rem; font-weight: 500; color: var(--subheadline);}
.dailypick-list > li .answer {margin-top: .8rem; display: flex; align-items: center; column-gap: .8rem;}
.dailypick-list > li .answer > p {font-size: 1.4rem;}
.dailypick-list > li .answer .ic-answer-true + p {color: var(--orange);}
.dailypick-list > li .answer .ic-answer-false + p {color: var(--body);}

.dailypick-list + .draw-result {margin-top: 5rem;}

@media screen and (max-width: 768px) {
    .dailypick-list {grid-template-columns: repeat(1, 1fr); width: 100vw; margin: 0 -2rem;}
    .dailypick-list > li {padding: 0 2rem;}
    .dailypick-list > li + li {border-top: 1.2rem solid var(--gray03); padding-top: 4rem;}
    .dailypick-list > li .info > div .label {min-width: 5.7rem;}
    .dailypick-list > li > p {min-height: fit-content;}

    .dailypick-list + .draw-result {margin-top: 4rem;}
}

.dailypick-list > li > ul > li > input:checked + label {border-color: var(--black); background-color: var(--gray03); position: relative; z-index: 1;}
.dailypick-list > li > ul > li > input:checked + label > p {color: var(--black);}

.dailypick-list > li > ul > li > input.true + label {border-color: var(--subheadline); background-color: var(--subheadline);}
.dailypick-list > li > ul > li > input.true + label .ic-equal {background-image: url(../img/ico/ic-equal-wh.svg);}
.dailypick-list > li > ul > li > input.true + label > p {color: var(--white)!important;}

.dailypick-list > li > ul > li > input.kgc:checked + label {border-color: var(--kgc-main); background-color: var(--kgc-sub);}
.dailypick-list > li > ul > li > input.lg:checked + label {border-color: var(--lg-main); background-color: var(--lg-sub);}
.dailypick-list > li > ul > li > input.sk:checked + label {border-color: var(--sk-main); background-color: var(--sk-sub);}
.dailypick-list > li > ul > li > input.hd:checked + label {border-color: var(--hd-main); background-color: var(--hd-sub);}
.dailypick-list > li > ul > li > input.sono:checked + label {border-color: var(--sono-main); background-color: var(--sono-sub);}
.dailypick-list > li > ul > li > input.kcc:checked + label {border-color: var(--kcc-main); background-color: var(--kcc-sub);}
.dailypick-list > li > ul > li > input.db:checked + label {border-color: var(--db-main); background-color: var(--db-sub);}
.dailypick-list > li > ul > li > input.kt:checked + label {border-color: var(--kt-main); background-color: var(--kt-sub);}
.dailypick-list > li > ul > li > input.pega:checked + label {border-color: var(--pega-main); background-color: var(--pega-sub);}
.dailypick-list > li > ul > li > input.ss:checked + label {border-color: var(--ss-main); background-color: var(--ss-sub);}

.dailypick-list > li > ul > li > input.kgc:checked + label > p {color: var(--kgc-main);}
.dailypick-list > li > ul > li > input.lg:checked + label > p {color: var(--lg-main);}
.dailypick-list > li > ul > li > input.sk:checked + label > p {color: var(--sk-main);}
.dailypick-list > li > ul > li > input.hd:checked + label > p {color: var(--hd-main);}
.dailypick-list > li > ul > li > input.sono:checked + label > p {color: var(--sono-main);}
.dailypick-list > li > ul > li > input.kcc:checked + label > p {color: var(--kcc-main);}
.dailypick-list > li > ul > li > input.db:checked + label > p {color: var(--db-main);}
.dailypick-list > li > ul > li > input.kt:checked + label > p {color: var(--kt-main);}
.dailypick-list > li > ul > li > input.pega:checked + label > p {color: var(--pega-main);}
.dailypick-list > li > ul > li > input.ss:checked + label > p {color: var(--ss-main);}

.dailypick-list > li > ul > li > input.true.kgc + label {border-color: var(--kgc-main); background-color: var(--kgc-main);}
.dailypick-list > li > ul > li > input.true.lg + label {border-color: var(--lg-main); background-color: var(--lg-main);}
.dailypick-list > li > ul > li > input.true.sk + label {border-color: var(--sk-main); background-color: var(--sk-main);}
.dailypick-list > li > ul > li > input.true.hd + label {border-color: var(--hd-main); background-color: var(--hd-main);}
.dailypick-list > li > ul > li > input.true.sono + label {border-color: var(--sono-main); background-color: var(--sono-main);}
.dailypick-list > li > ul > li > input.true.kcc + label {border-color: var(--kcc-main); background-color: var(--kcc-main);}
.dailypick-list > li > ul > li > input.true.db + label {border-color: var(--db-main); background-color: var(--db-main);}
.dailypick-list > li > ul > li > input.true.kt + label {border-color: var(--kt-main); background-color: var(--kt-main);}
.dailypick-list > li > ul > li > input.true.pega + label {border-color: var(--pega-main); background-color: var(--pega-main);}
.dailypick-list > li > ul > li > input.true.ss + label {border-color: var(--ss-main); background-color: var(--ss-main);}

.dailypick-calendar {display: flex; flex-flow: column;}
.dailypick-calendar .week {display: grid; grid-template-columns: repeat(7, 1fr); border: 1px solid var(--gray02); border-bottom: 0;}
.dailypick-calendar .week > li {height: 3.2rem; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; font-weight: 500; color: var(--body);}
.dailypick-calendar .week > li:nth-child(1) {color: var(--red);}
.dailypick-calendar .week > li + li {border-left: 1px solid var(--gray02);}
.dailypick-calendar .day {display: grid; grid-template-columns: repeat(7, 1fr); border: 1px solid var(--gray02); border-bottom: 0;}
.dailypick-calendar .day > li {height: 7.5rem; padding: .8rem; border-bottom: 1px solid var(--gray02); display: flex; flex-flow: column; row-gap: .4rem;}
.dailypick-calendar .day > li:nth-of-type(7n+1) > span {color: var(--red);}
.dailypick-calendar .day > li + li {border-left: 1px solid var(--gray02);}
.dailypick-calendar .day > li > span {font-size: 1.4rem; font-weight: 500; color: var(--body);}
.dailypick-calendar .day > li > p {width: 100%; height: 4rem; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; font-weight: 500; color: var(--disabled);}
.dailypick-calendar .day > li > i {margin: .8rem auto;}

@media screen and (max-width: 768px) {
    .dailypick-calendar {width: 100vw; margin: 0 -2rem;}
    .dailypick-calendar .week {border-left: 0; border-right: 0;}
    .dailypick-calendar .day {border-left: 0; border-right: 0;}
    .dailypick-calendar .day > li {height: 6rem;}
    .dailypick-calendar .day > li > p {height: 2.4rem;}
    .dailypick-calendar .day > li > i {margin: 0 auto;}
}
/* 게임 > Weekly6 > 게임참여 */
.weekly6-list {display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 4rem 6rem;}
.weekly6-list > li {display: flex; flex-flow: column; row-gap: .8rem;}
.weekly6-list > li .info {display: flex; align-items: center; justify-content: space-between;}
.weekly6-list > li .info > div {display: flex; align-items: center; column-gap: .8rem;}
.weekly6-list > li .info > div .label {min-width: 5.7rem;}
.weekly6-list > li .info > div > ul {display: flex; align-items: center; column-gap: .6rem;}
.weekly6-list > li .info > div > ul > li {display: flex; align-items: center; column-gap: .6rem; font-size: 1.2rem; font-weight: 500; color: var(--subheadline);}
.weekly6-list > li .info > div > ul > li + li::before {content: ''; width: 1px; height: 1.2rem; background-color: var(--gray01);}
.weekly6-list > li .info > a {display: flex; align-items: center; font-size: 1.2rem; font-weight: 500; color: var(--body);}
.weekly6-list > li > p {min-height: 4.8rem; font-size: 1.6rem; line-height: 2.4rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; line-clamp: 2; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.weekly6-list > li > ul {margin-top: .8rem; border-radius: 1.2rem; filter: drop-shadow(0px 6px 12px rgba(25, 25, 25, 0.05)); display: grid; grid-template-columns: repeat(2, 1fr);}
.weekly6-list > li > ul > li > input + label {width: calc(100% + 1px); margin-left: 1px; border: 1px solid var(--gray02); height: 8rem; display: flex; flex-flow: column; row-gap: .4rem; align-items: center; justify-content: center; background-color: var(--white);}
.weekly6-list > li > ul > li > input + label > i.lg-dark {background-image: url(/assets/img/ico/logo/ic-lg-dark.svg);}
.weekly6-list > li > ul > li > input + label > i.kgc-dark {background-image: url(/assets/img/ico/logo/ic-kgc-dark-line.svg);}
.weekly6-list > li > ul > li:nth-child(1) > input + label {border-radius: 1.2rem 0 0 1.2rem;}
.weekly6-list > li > ul > li:nth-child(2) > input + label {border-radius: 0 1.2rem 1.2rem 0;}
.weekly6-list > li > ul > li > input + label::before {content: none;}
.weekly6-list > li > ul > li > input + label > i {width: 3.6rem; height: 3.6rem;}
.weekly6-list > li > ul > li > input + label > p {font-size: 1.4rem; font-weight: 500; color: var(--subheadline);}
.weekly6-list > li .answer {margin-top: .8rem; display: flex; align-items: center; column-gap: .8rem;}
.weekly6-list > li .answer > p {font-size: 1.4rem;}
.weekly6-list > li .answer .ic-answer-true + p {color: var(--orange);}
.weekly6-list > li .answer .ic-answer-false + p {color: var(--body);}

.weekly6-list  + .draw-result {margin-top: 5rem;}

@media screen and (max-width: 768px) {
    .weekly6-list {grid-template-columns: repeat(1, 1fr); width: 100vw; margin: 0 -2rem;}
    .weekly6-list > li {padding: 0 2rem;}
    .weekly6-list > li + li {border-top: 1.2rem solid var(--gray03); padding-top: 4rem;}
    .weekly6-list > li .info > div .label {min-width: 5.7rem;}
    .weekly6-list > li > p {min-height: fit-content;}

    .weekly6-list  + .draw-result {margin-top: 4rem;}
}

.weekly6-list > li > ul > li > input:checked + label {border-color: var(--black); background-color: var(--gray03); position: relative; z-index: 1;}
.weekly6-list > li > ul > li > input:checked + label > p {color: var(--black);}

.weekly6-list > li > ul > li > input.true + label {border-color: var(--subheadline); background-color: var(--subheadline);}
.weekly6-list > li > ul > li > input.true + label .ic-equal {background-image: url(../img/ico/ic-equal-wh.svg);}
.weekly6-list > li > ul > li > input.true + label > p {color: var(--white)!important;}

.weekly6-list > li > ul > li > input.kgc:checked + label {border-color: var(--kgc-main); background-color: var(--kgc-sub);}
.weekly6-list > li > ul > li > input.lg:checked + label {border-color: var(--lg-main); background-color: var(--lg-sub);}
.weekly6-list > li > ul > li > input.sk:checked + label {border-color: var(--sk-main); background-color: var(--sk-sub);}
.weekly6-list > li > ul > li > input.hd:checked + label {border-color: var(--hd-main); background-color: var(--hd-sub);}
.weekly6-list > li > ul > li > input.sono:checked + label {border-color: var(--sono-main); background-color: var(--sono-sub);}
.weekly6-list > li > ul > li > input.kcc:checked + label {border-color: var(--kcc-main); background-color: var(--kcc-sub);}
.weekly6-list > li > ul > li > input.db:checked + label {border-color: var(--db-main); background-color: var(--db-sub);}
.weekly6-list > li > ul > li > input.kt:checked + label {border-color: var(--kt-main); background-color: var(--kt-sub);}
.weekly6-list > li > ul > li > input.pega:checked + label {border-color: var(--pega-main); background-color: var(--pega-sub);}
.weekly6-list > li > ul > li > input.ss:checked + label {border-color: var(--ss-main); background-color: var(--ss-sub);}

.weekly6-list > li > ul > li > input.kgc:checked + label > p {color: var(--kgc-main);}
.weekly6-list > li > ul > li > input.lg:checked + label > p {color: var(--lg-main);}
.weekly6-list > li > ul > li > input.sk:checked + label > p {color: var(--sk-main);}
.weekly6-list > li > ul > li > input.hd:checked + label > p {color: var(--hd-main);}
.weekly6-list > li > ul > li > input.sono:checked + label > p {color: var(--sono-main);}
.weekly6-list > li > ul > li > input.kcc:checked + label > p {color: var(--kcc-main);}
.weekly6-list > li > ul > li > input.db:checked + label > p {color: var(--db-main);}
.weekly6-list > li > ul > li > input.kt:checked + label > p {color: var(--kt-main);}
.weekly6-list > li > ul > li > input.pega:checked + label > p {color: var(--pega-main);}
.weekly6-list > li > ul > li > input.ss:checked + label > p {color: var(--ss-main);}

.weekly6-list > li > ul > li > input.true.kgc + label {border-color: var(--kgc-main); background-color: var(--kgc-main);}
.weekly6-list > li > ul > li > input.true.lg + label {border-color: var(--lg-main); background-color: var(--lg-main);}
.weekly6-list > li > ul > li > input.true.sk + label {border-color: var(--sk-main); background-color: var(--sk-main);}
.weekly6-list > li > ul > li > input.true.hd + label {border-color: var(--hd-main); background-color: var(--hd-main);}
.weekly6-list > li > ul > li > input.true.sono + label {border-color: var(--sono-main); background-color: var(--sono-main);}
.weekly6-list > li > ul > li > input.true.kcc + label {border-color: var(--kcc-main); background-color: var(--kcc-main);}
.weekly6-list > li > ul > li > input.true.db + label {border-color: var(--db-main); background-color: var(--db-main);}
.weekly6-list > li > ul > li > input.true.kt + label {border-color: var(--kt-main); background-color: var(--kt-main);}
.weekly6-list > li > ul > li > input.true.pega + label {border-color: var(--pega-main); background-color: var(--pega-main);}
.weekly6-list > li > ul > li > input.true.ss + label {border-color: var(--ss-main); background-color: var(--ss-main);}

.weekly6-status {margin-top: 5rem; min-height: 4rem; padding: .8rem 2rem; border-radius: .8rem; display: flex; align-items: center; justify-content: center; column-gap: .8rem; font-size: 1.4rem; color: var(--subheadline); line-height: 2rem; background-color: var(--gray03);}
.weekly6-status > span {font-size: 1.6rem; font-weight: 500;}

@media screen and (max-width: 768px) {
    .weekly6-status {margin-top: 4rem;}
}

/* 게임 > Bracket Challenge > 게임 참여 */
.tab-style2 + .cont-box > .bracket-wrap {margin-top: 0;}

.bracket-wrap {padding: 3.2rem 2.8rem 4rem; margin-top: -2.4rem; background-image: url(../img/game/playoff-bg.png); background-repeat: no-repeat; background-size: cover; background-position: center; display: flex; flex-flow: column; row-gap: 3.2rem; align-items: center; justify-content: center; position: relative;}
.bracket-wrap .logo {height: 6.2rem;}
.bracket-wrap > p {height: 4rem; width: fit-content; padding: .8rem 2rem; display: flex; align-items: center; justify-content: center; column-gap: .8rem; font-size: 1.4rem; color: var(--gray01); position: absolute; top: 2rem; right: 2rem;}
.bracket-wrap > p > span {font-size: 1.6rem; color: var(--white); font-weight: 500;}
.bracket-wrap > div {display: flex; align-items: center; justify-content: center; column-gap: 2.2rem;}
.bracket-wrap > div > div {min-width: 24.3rem; display: flex; align-items: center; flex-flow: column; row-gap: 1.2rem; position: relative;}
.bracket-wrap > div > div > p {font-size: 1.4rem; line-height: 2rem; font-weight: 600; color: var(--white); position: absolute; top: -3rem;}
.bracket-wrap > div > div > div {width: 100%; display: flex; flex-flow: column; row-gap: 1.2rem; align-items: center;}
.bracket-wrap > div > div > div > ul {width: 100%; min-height: 6.4rem; padding: .8rem 1.6rem; border-radius: .8rem; background-color: rgba(0, 0, 0, 0.2); display: flex; flex-flow: column; justify-content: center; row-gap: 1.2rem; position: relative;}
.bracket-wrap > div > div > div > ul > li {display: flex; align-items: center; column-gap: 1.2rem;}
.bracket-wrap > div > div > div > ul > li > span {display: flex; width: 1.2rem; font-size: 1.6rem; font-weight: 900; color: var(--disabled); text-align: center; align-items: center; justify-content: center;}
.bracket-wrap > div > div > div > ul > li .team-name {flex: 1;}
.bracket-wrap > div > div > div > ul > li .team-name > i {width: 4rem; height: 4rem;}
.bracket-wrap > div > div > div > ul > li .team-name > p {font-size: 1.6rem; font-weight: 600; color: var(--white);}
.bracket-wrap > div > div > div > ul > li .coming {background-color: rgba(255,255,255, .1); border-radius: .4rem; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; font-weight: 600; color: var(--gray01); width: 100%; height: 4rem;}
.bracket-wrap > div > div > div > ul > li > p {display: flex; width: 3.6rem; font-size: 1.6rem; font-weight: 900; color: var(--white); text-align: center; align-items: center; justify-content: center;}
.bracket-wrap > div > div > div > ul > li > img {height: 4rem;}
.bracket-wrap > div > div > div > ul > li.lose > span {opacity: .3;}
.bracket-wrap > div > div > div > ul > li.lose .team-name {opacity: .3;}

.bracket-wrap > div > div > div > ul.done {background-color: rgba(255,255,255, .1);}
.bracket-wrap > div > div > div > ul.quiz > li:nth-child(1)::after {content: ''; width: 3.8rem; height: 8.4rem; background-color: rgba(255,255,255, .1); border-radius: .4rem; background-image: url(../img/ico/ic-question-24.svg); background-repeat: no-repeat; background-size: 2.4rem; background-position: center; position: absolute; top: 1.2rem; right: 1.6rem;}

@media screen and (max-width: 768px) {
    .tab-style2 + .cont-box > .bracket-wrap {margin-top: -2.4rem;}

    .bracket-wrap {width: 100vw; margin: -2.4rem -2rem 4rem; padding: 10.4rem 0 4rem;}
    .bracket-wrap > p {width: calc(100% - 4rem); background-color: rgba(0, 0, 0, 0.2); border-radius: .8rem; top: 2.4rem; right: initial; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%);}
    .bracket-wrap > div {width: 100vw; padding: 0 2rem; overflow-y: auto; justify-content: initial;}
}

.bracket-wrap > div > div  > div > ul::before {opacity: .2;}
.bracket-wrap > div > div  > div > ul::after {opacity: .2;}

.bracket-wrap > div > div  > div > ul.end::before {opacity: 1;}
.bracket-wrap > div > div  > div > ul.end::after {opacity: 1;}

.bracket-wrap > div .round  > div > ul:nth-child(1)::before {content: ''; width: calc(50% + 2.2rem); height: .2rem; background-color: var(--white); position: absolute; right: calc(-50% - 2.2rem); top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%);}
.bracket-wrap > div .round  > div > ul:nth-child(1)::after {content: ''; width: .2rem; height: calc(50% + 1.1rem); background-color: var(--white); position: absolute; right: calc(-50% - 2.2rem); bottom: -1.2rem;}
.bracket-wrap > div .round  > div > ul:nth-child(2)::before {content: ''; width: 2.2rem; height: .2rem; background-color: var(--white); position: absolute; right: -2.2rem; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%);}
.bracket-wrap > div .round  > div > ul:nth-child(3)::before {content: ''; width: 2.2rem; height: .2rem; background-color: var(--white); position: absolute; right: -2.2rem; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%);}
.bracket-wrap > div .round  > div > ul:nth-child(4)::before {content: ''; width: calc(50% + 2.2rem); height: .2rem; background-color: var(--white); position: absolute; right: calc(-50% - 2.2rem); top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%);}
.bracket-wrap > div .round  > div > ul:nth-child(4)::after {content: ''; width: .2rem; height: calc(50% + 1.1rem); background-color: var(--white); position: absolute; right: calc(-50% - 2.2rem); top: -1.2rem;}

.bracket-wrap > div .semifinals > p {top: -7.5rem;}
.bracket-wrap > div .semifinals  > div > ul:nth-child(1)::before {content: ''; width: 2.2rem; height: .2rem; background-color: var(--white); position: absolute; right: -2.2rem; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%);}
.bracket-wrap > div .semifinals  > div > ul:nth-child(1)::after {content: ''; width: .2rem; height: calc(50% + .5rem); background-color: var(--white); position: absolute; right: -2.2rem; bottom: -.6rem;}
.bracket-wrap > div .semifinals  > div > ul:nth-child(2)::before {content: ''; width: 2.2rem; height: .2rem; background-color: var(--white); position: absolute; right: -2.2rem; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%);}
.bracket-wrap > div .semifinals  > div > ul:nth-child(2)::after {content: ''; width: .2rem; height: calc(50% + .5rem); background-color: var(--white); position: absolute; right: -2.2rem; top: -.6rem;}

.bracket-wrap > div .finals {padding-left: 1.6rem; min-width: initial;}
.bracket-wrap > div .finals > div {width: fit-content;}
.bracket-wrap > div .finals > div > ul {width: fit-content; display: flex; flex-flow: initial; align-items: flex-start; justify-content: center; column-gap: .4rem; padding: 2.2rem 1.6rem 1.8rem;}
.bracket-wrap > div .finals > div > ul > li {display: flex; flex-flow: column; row-gap: 2rem;}
.bracket-wrap > div .finals > div > ul > li > img {opacity: .1; margin: 0 -2rem;}
.bracket-wrap > div .finals > div > ul > li > i {width: 4rem; height: 4rem;}
.bracket-wrap > div .finals > div > ul > li > p {width: 8.4rem;}
.bracket-wrap > div .finals > div > p {text-align: center; font-size: 1.4rem; line-height: 2rem; color: var(--white); position: absolute; bottom: -3rem;}
.bracket-wrap > div .finals > div > ul::before {content: ''; width: 1.6rem; height: .2rem; background-color: var(--white); position: absolute; left: -1.6rem; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%);}

.bracket-wrap > div .finals > div > ul.quiz > li {padding-bottom: 5.2rem; row-gap: 0;}
.bracket-wrap > div .finals > div > ul.quiz > li:nth-child(1)::after {content: ''; width: calc(100% - 3.2rem); height: 4rem; background-color: rgba(255,255,255, .1); border-radius: .4rem; background-image: url(../img/ico/ic-question-24.svg); background-repeat: no-repeat; background-size: 2.4rem; background-position: center; position: absolute; bottom: 1.2rem; left: 1.6rem; top: initial; right: initial;}
.bracket-wrap > div .finals > div > ul .coming {background-color: rgba(255,255,255, .1); border-radius: .4rem; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; font-weight: 600; color: var(--gray01); width: 17.6rem; height: 10rem; margin: -.8rem 0;}

.bracket-wrap > div.winner {padding-top: 2.8rem; padding-bottom: 10.4rem; flex-flow: column; row-gap: 3rem;}
.bracket-wrap > div.winner > p {font-size: 2.8rem; line-height: 3.6rem; color: var(--white); text-align: center; font-weight: 600;}
.bracket-wrap > div.winner > div > p {position: relative; top: initial;}
.bracket-wrap > div.winner > div > div {min-width: initial; border-radius: .8rem; background-color: rgba(0, 0, 0, 0.2); justify-content: center; width: 20.8rem; height: 12.4rem;}
.bracket-wrap > div.winner > div > div > i {width: 16.4rem; height: 16.4rem; position: absolute;}

.bracket-list {display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 4rem 6rem;}
.bracket-list > li {display: flex; align-items: center; column-gap: 1.6rem;}
.bracket-list > li > div {width: 5.5rem; display: flex; flex-flow: column; align-items: center; row-gap: .8rem;}
.bracket-list > li > div > p {font-size: 1.6rem; font-weight: 500; color: var(--body);}
.bracket-list > li > ul {display: flex; align-items: center; column-gap: .8rem; flex: 1;}
.bracket-list > li > ul > li:not(:nth-child(2)) {width: calc((100% - 3.2rem - 1.6rem) / 2);}
.bracket-list > li > ul > li > img {width: 3.2rem;}
.bracket-list > li > ul > li > input + label {width: 100%; height: 9.2rem; border-radius: 1.2rem; border: 1px dashed var(--gray02); display: flex; flex-flow: column; row-gap: .8rem; align-items: center; justify-content: center;}
.bracket-list > li > ul > li > input + label::before {content: none;}
.bracket-list > li > ul > li > input + label > i {width: 6.6rem; height: 4rem;}
.bracket-list > li > ul > li > input + label > p {font-size: 1.4rem; font-weight: 500; color: var(--subheadline);}
.bracket-list > li > ul > li > input.true + label > p {color: var(--white);}

.bracket-list + .draw-result {margin-top: 5rem;}

@media screen and (max-width: 768px) {
    .bracket-list {grid-template-columns: repeat(1, 1fr); grid-gap: 2.4rem;}
    .bracket-list > li > div {width: 4.8rem;}
    .bracket-list > li > div > p {font-size: 1.4rem;}

    .bracket-list + .draw-result {margin-top: 4rem;}
}

.bracket-list > li > ul > li > input:checked.kgc + label {background-color: var(--kgc-sub); border-color: transparent;}
.bracket-list > li > ul > li > input:checked.sono + label {background-color: var(--sono-sub); border-color: transparent;}
.bracket-list > li > ul > li > input:checked.lg + label {background-color: var(--lg-sub); border-color: transparent;}
.bracket-list > li > ul > li > input:checked.sk + label {background-color: var(--sk-sub); border-color: transparent;}
.bracket-list > li > ul > li > input:checked.hd + label {background-color: var(--hd-sub); border-color: transparent;}
.bracket-list > li > ul > li > input:checked.kcc + label {background-color: var(--kcc-sub); border-color: transparent;}
.bracket-list > li > ul > li > input:checked.db + label {background-color: var(--db-sub); border-color: transparent;}
.bracket-list > li > ul > li > input:checked.kt + label {background-color: var(--kt-sub); border-color: transparent;}
.bracket-list > li > ul > li > input:checked.pega + label {background-color: var(--pega-sub); border-color: transparent;}
.bracket-list > li > ul > li > input:checked.ss + label {background-color: var(--ss-sub); border-color: transparent;}

.bracket-list > li > ul > li > input.true.kgc + label {background-color: var(--kgc-main); border-color: transparent;}
.bracket-list > li > ul > li > input.true.lg + label {background-color: var(--lg-main); border-color: transparent;}
.bracket-list > li > ul > li > input.true.sk + label {background-color: var(--sk-main); border-color: transparent;}
.bracket-list > li > ul > li > input.true.hd + label {background-color: var(--hd-main); border-color: transparent;}
.bracket-list > li > ul > li > input.true.sono + label {background-color: var(--sono-main); border-color: transparent;}
.bracket-list > li > ul > li > input.true.kcc + label {background-color: var(--kcc-main); border-color: transparent;}
.bracket-list > li > ul > li > input.true.db + label {background-color: var(--db-main); border-color: transparent;}
.bracket-list > li > ul > li > input.true.kt + label {background-color: var(--kt-main); border-color: transparent;}
.bracket-list > li > ul > li > input.true.pega + label {background-color: var(--pega-main); border-color: transparent;}
.bracket-list > li > ul > li > input.true.ss + label {background-color: var(--ss-main); border-color: transparent;}

/* 게임 > Draft Challenge */
.draft-wrap {display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 6rem;}
.draft-wrap div.logo {display: flex; flex-flow: column; row-gap: .4rem; align-items: center;}
.draft-wrap div.logo > div {display: flex; flex-flow: initial!important; align-items: center; column-gap: .4rem; align-items: center; justify-content: center;}
.draft-wrap div.logo > div > i {width: 2.5rem; height: 1.5rem; margin-bottom: .3rem;}
.draft-wrap div.logo > div > p {font-size: 1.6rem; line-height: 1.4rem; font-weight: 900; background: linear-gradient(270deg, #997752 0.25%, #BBA36D 31.94%, #886145 100%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; position: relative!important; top: initial!important;}
.draft-wrap div.logo > img {height: 3.4rem;}
.draft-wrap img.logo {height: 6.2rem;}
.draft-wrap > div {display: flex; flex-flow: column; row-gap: 1.2rem;}
.draft-wrap > div > p {width: 100%; text-align: center; font-size: 1.4rem; color: var(--body); padding-bottom: 1.2rem; border-bottom: 1px solid var(--gray02);}
.draft-wrap > div > ul {display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 2rem;}
.draft-wrap > div > ul > li {display: flex; flex-flow: column; row-gap: 1.2rem;}
.draft-wrap > div > ul > li .part {height: 2.4rem; display: flex; align-items: center; justify-content: space-between;}
.draft-wrap > div > ul > li .part > p {font-size: 1.6rem; font-weight: 500; color: var(--subheadline);}
.draft-wrap > div > ul > li .player-name {width: 100%; height: 5.2rem; border-radius: 1.2rem; padding: 0 .8rem; border-radius: 1.2rem; cursor: pointer;}
.draft-wrap > div > ul > li .player-name > div {width: 3.2rem; height: 3.2rem;}
.draft-wrap > div > ul > li .player-name > p {font-weight: 500;}

.draft-wrap .answer > ul > li .player-name {background-color: var(--black);}
.draft-wrap .answer > ul > li .player-name > p {color: var(--white);}
.draft-wrap .my > ul > li .player-name {background-color: var(--gray03);}

.draft-wrap .empty {height: 30.4rem;}

.draft-wrap + .draw-result {margin-top: 5rem;}

.pop .draft-wrap {height: 44rem;}
.pop .draft-wrap > div {overflow-y: auto;}

@media screen and (max-width: 768px) {
    .draft-wrap {grid-gap: 2rem;}
    .draft-wrap > div {row-gap: 2rem;}
    .draft-wrap > div > p {font-size: 1.2rem;}
    .draft-wrap > div > ul {grid-template-columns: repeat(1, 1fr); grid-gap: 3.6rem;}
    .draft-wrap > div > ul > li {display: flex; flex-flow: column; row-gap: 1.2rem;}
    .draft-wrap .answer ul > li .part {justify-content: flex-end;}
    .draft-wrap .answer ul > li .part > p {display: none;}

    .draft-wrap + .draw-result {margin-top: 4rem;}
}

.draft-wrap .player {padding: 6rem 2.4rem; background-image: url(../img/challenge/draft-bg.png); background-repeat: no-repeat; background-size: cover; background-position: center; display: flex; flex-flow: column; align-items: center;}
.draft-wrap .player > img {margin-bottom: 1.6rem;}
.draft-wrap .player > a {font-size: 1.4rem; color: var(--gray01); text-decoration: underline;}
.draft-wrap .player > ul {display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 4rem; margin-top: 4rem; width: 100%;}
.draft-wrap .player > ul > li {display: flex; flex-flow: column; row-gap: 1.2rem; align-items: center;}
.draft-wrap .player > ul > li:nth-child(1) {grid-column: 1 / span 2;}
.draft-wrap .player > ul > li > p {display: flex; align-items: flex-end; column-gap: .2rem; font-size: 1.4rem; font-weight: 600; color: var(--white);}
.draft-wrap .player > ul > li > p > span {font-size: 2rem;}
.draft-wrap .player > ul > li > div {background-color: var(--gray03); width: 5.6rem; height: 5.6rem; overflow: hidden; border-radius: 100%;}
.draft-wrap .player > ul > li > div img {width: 100%; margin-top: .8rem;}
.draft-wrap .player > ul > li > a {width: 100%; max-width: 14rem; height: 4rem; margin-top: .8rem; border-radius: .8rem; background-color: rgba(255,255,255, .1); display: flex; align-items: center; justify-content: center; font-size: 1.6rem; font-weight: 500; color: var(--gray01);}
.draft-wrap .player > ul > li > a.end {pointer-events: none;}

@media screen and (max-width: 768px) {
    .draft-wrap .player {grid-column: 1 / span 2; width: 100vw; margin: 0 -2rem;}
}

.pop .filter-select {width: calc(100% + 4rem); margin: 0 -2rem 2.4rem;}
.pop .filter-select > li,
.pop .filter-select > li > select {width: 100%;}

.draft-player-table1 {max-height: 46rem; overflow-y: auto; border-bottom: 1px solid var(--gray01);}
.draft-player-table1 table::before {content: none;}
.draft-player-table1 table::after {content: none;}
.draft-player-table1 thead {position: sticky; position: -webkit-sticky; top: 0; background-color: var(--white); z-index: 9; border-top: 0;}
.draft-player-table1 thead::after {content: ''; width: 100%; height: 1px; background-color: var(--gray02); position: absolute; bottom: 0; left: 0; z-index: 10;}
.draft-player-table1 thead tr th {position: relative; height: fit-content; font-size: 1.2rem; line-height: 1.6rem; background-color: var(--white); padding: 0 .8rem 1.2rem; border-bottom: 1px solid var(--gray02);}
.draft-player-table1 thead tr th + th {border-left: 0;}
.draft-player-table1 tbody {padding-top: 2rem;}
.draft-player-table1 tbody tr td {height: 6rem; font-weight: 500; border-bottom: 0;}
.draft-player-table1 tbody tr td .player-name > p {width: 12rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.draft-player-table1 tbody tr td > p {overflow: hidden; text-overflow: ellipsis; display: -webkit-box; line-clamp: 1; -webkit-line-clamp: 1; -webkit-box-orient: vertical;}

.statsking-wrap .draft-player-table1 {max-height: 38rem;}
.statsking-wrap .draft-player-table1 tbody tr {cursor: pointer;}
.statsking-wrap .draft-player-table1 tbody tr:hover > td {background-color: var(--gray03);}

@media screen and (max-width: 768px) {
    .pop .statsking-wrap.draft {height: fit-content;}
    .pop .statsking-wrap .draft-player-table1 {max-height: 33.2rem;}
}

.draft-player-table2 {width: calc(100% + 4rem);}
.draft-player-table2 table {width: max-content; min-width: calc(100% - 4rem);}
.draft-player-table2 th:nth-child(1) {position: sticky; position: -webkit-sticky; left: 0;}
.draft-player-table2 th:nth-child(1)::after {content: ''; width: 1px; height: 100%; background-color: var(--gray02); position: absolute; top: 0; right: -.1rem;}
.draft-player-table2 th:nth-child(2) {position: sticky; position: -webkit-sticky; left: 8.8rem;}
.draft-player-table2 th:nth-child(2)::after {content: ''; width: 1px; height: 100%; background-color: var(--gray02); position: absolute; top: 0; right: -.1rem;}
.draft-player-table2 td:nth-child(1) {position: sticky; position: -webkit-sticky; left: 0;}
.draft-player-table2 td:nth-child(2) {position: sticky; position: -webkit-sticky; left: 8.8rem;}
.draft-player-table2 td > p {width: 7.2rem; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}


/* 이벤트 > polls */
@media screen and (max-width: 768px) {
    .tab-style2 + .cont-box .mid-title > .select:nth-child(1):nth-last-child(1) {margin-top: -1.6rem;}
}

/* 이벤트 > polls > 상세 */
.event-cont {display: flex; flex-flow: column; row-gap: 2rem;}
.event-cont > p {font-size: 1.2rem; line-height: 1.6rem; color: var(--body);}

.polls-type1 {display: flex; flex-flow: column; row-gap: 2rem;}
.polls-type1 > li input + label {height: 7.2rem; background-color: var(--white); border: 1px solid var(--gray02); border-radius: 1.2rem; padding: 0 2.8rem; column-gap: 1.2rem; box-shadow: 0px 6px 12px 0px rgba(25, 25, 25, 0.05);}
.polls-type1 > li input + label > i {width: 4.8rem; height: 4.8rem;}
.polls-type1 > li input + label .img {width: 4.8rem; height: 4.8rem; border-radius: 100%; background-color: var(--gray03); background-repeat: no-repeat; background-size: cover; background-position: center top .4rem;}
.polls-type1 > li input + label > p {font-size: 1.6rem; flex: initial;}
.polls-type1 > li input + label > span {font-size: 1.2rem; color: var(--body);}
.polls-type1 > li input:checked + label {border-color: var(--black);}

@media screen and (max-width: 768px) {
    .polls-type1 {display: flex; flex-flow: column; row-gap: 1.2rem;}
}

.polls-type2 {display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 4rem 1.2rem;}
.polls-type2 > li {display: flex; flex-flow: column; row-gap: 1.6rem;}
.polls-type2 > li .img {width: 100%; height: 14.8rem; border-radius: 1.2rem; background-repeat: no-repeat; background-size: cover; background-position: center;}
.polls-type2 > li .desc input + label > p {overflow: hidden; text-overflow: ellipsis; display: -webkit-box; line-clamp: 1; -webkit-line-clamp: 1; -webkit-box-orient: vertical;}

@media screen and (max-width: 768px) {
    .polls-type2 {grid-template-columns: repeat(2, 1fr); grid-gap: 2rem 1.2rem;}
    .polls-type2 > li {row-gap: 1.2rem;}
    .polls-type2 > li .img {height: 24vw; border-radius: .8rem;}
}

.polls-result {display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 4rem 1.2rem;}
.polls-result > li {display: flex; flex-flow: column; row-gap: 1.6rem;}
.polls-result > li .img {width: 100%; height: 14.8rem; border-radius: 1.2rem; background-repeat: no-repeat; background-size: cover; background-position: center;}
.polls-result > li .desc {display: flex; flex-flow: column; row-gap: 1.2rem;}
.polls-result > li .desc > div {display: flex; column-gap: .8rem;}
.polls-result > li .desc > div > span {font-size: 2rem; line-height: 2.4rem; font-weight: 600; color: var(--disabled);}
.polls-result > li .desc > div > p {font-size: 1.6rem; line-height: 2.4rem; word-break: keep-all;}
.polls-result > li .desc .graph {display: flex; align-items: center; column-gap: .8rem;}
.polls-result > li .desc .graph > div {flex: 1; height: 2.4rem; border-radius: .4rem; background-color: var(--gray03); display: flex; align-items: center; justify-content: flex-start;}
.polls-result > li .desc .graph > div > div {height: 2.4rem; border-radius: .4rem; background-color: var(--orange); }
.polls-result > li .desc .graph > p {width: 6rem; text-align: right; font-size: 1.6rem; font-weight: 600;}

.polls-result > li:nth-child(1) .desc > div > span {color: var(--black);}

@media screen and (max-width: 768px) {
    .polls-result {grid-template-columns: repeat(2, 1fr); grid-gap: 2rem 1.2rem;}
    .polls-result > li {row-gap: 1.2rem;}
    .polls-result > li .img {height: 24vw; border-radius: .8rem;}
    .polls-result > li .desc > div > span {font-size: 1.6rem;}
    .polls-result > li .desc > div > p {font-size: 1.4rem; line-height: 2rem;}

}

/* 이벤트 > polls > 결과 */
.event-result {display: flex; flex-flow: column; row-gap: 2rem;}
.event-result + p {margin-top: 1.2rem; font-size: 1.2rem; line-height: 1.6rem; color: var(--body);}
.event-result > div {border-radius: 1.2rem; padding: 1.6rem 2rem; display: flex; align-items: center; column-gap: 1.2rem; background-color: var(--black);}
.event-result > div > p {font-size: 2rem; line-height: 2.4rem; font-weight: 700; color: var(--white); width: 2.4rem; text-align: center;}
.event-result > div .img {width: 4.8rem; height: 4.8rem; border-radius: 100%; background-color: var(--gray03); background-repeat: no-repeat; background-size: cover; background-position: center top .4rem;}
.event-result > div .info {display: flex; flex-flow: column;}
.event-result > div .info > p {font-size: 1.6rem; line-height: 2.4rem; font-weight: 600; color: var(--white);}
.event-result > div .info > span {font-size: 1.2rem; line-height: 1.6rem; color: var(--white);}
.event-result > div .graph {margin-left: auto; width: 20rem; display: flex; align-items: center; justify-content: flex-end;}
.event-result > div .graph > div {height: 2.4rem; border-radius: .4rem 0 0 .4rem; background-color: var(--orange); position: relative;}
.event-result > div .graph > div > p {position: absolute; text-align: right; width: 6rem; left: -6.8rem; font-size: 1.6rem; font-weight: 600; color: var(--white); line-height: 2.4rem;}

.event-result > ul {border-radius: 1.2rem; padding: 1.6rem 2rem; display: flex; flex-flow: column; row-gap: 1.6rem; background-color: var(--gray03);}
.event-result > ul > li {display: flex; align-items: center; column-gap: 1.2rem;}
.event-result > ul > li > p {font-size: 2rem; line-height: 2.4rem; font-weight: 700; color: var(--disabled); width: 2.4rem; text-align: center;}
.event-result > ul > li .img {width: 4.8rem; height: 4.8rem; border-radius: 100%; background-color: var(--gray03); background-repeat: no-repeat; background-size: cover; background-position: center top .4rem;}
.event-result > ul > li .info {display: flex; flex-flow: column;}
.event-result > ul > li .info > p {font-size: 1.6rem; line-height: 2.4rem; font-weight: 600; color: var(--black);}
.event-result > ul > li .info > span {font-size: 1.2rem; line-height: 1.6rem; color: var(--body);}
.event-result > ul > li .graph {margin-left: auto; width: 20rem; display: flex; align-items: center; justify-content: flex-end;}
.event-result > ul > li .graph > div {height: 2.4rem; border-radius: .4rem 0 0 .4rem; background-color: var(--black); position: relative;}
.event-result > ul > li .graph > div > p {position: absolute; text-align: right; width: 6rem; left: -6.8rem; font-size: 1.6rem; font-weight: 600; color: var(--black); line-height: 2.4rem;}

@media screen and (max-width: 768px) {
    .event-result > div .graph {width: 10rem;}
    .event-result > ul > li .graph {width: 10rem;}
}

/* 이벤트 > draw > 상세 */
.draw-date {width: 100%; height: 7.2rem; display: flex; align-items: center; justify-content: center; column-gap: .6rem; border-radius: 1.2rem; background-color: var(--gray03);}
.draw-date > p {font-size: 1.4rem; line-height: 2rem; font-weight: 500; color: var(--orange);}

.draw-result > ul {border-radius: 1.2rem; background-color: var(--gray03); padding: 1.6rem 2rem; display: grid; grid-template-columns: repeat(5, 1fr); grid-gap: 1.6rem; justify-content: space-between;}
.draw-result > ul > li {display: flex; align-items: center; column-gap: .4rem;}
.draw-result > ul > li > p {width: 4.4rem; font-size: 1.4rem; font-weight: 500; line-height: 2rem;}
.draw-result > ul > li > span {font-size: 1.4rem; color: var(--subheadline); line-height: 2rem;}

@media screen and (max-width: 768px) {
    .draw-result > ul {grid-template-columns: repeat(2, 1fr);}
}

/* 이벤트 > event */
.event-type1 {height: 102.8rem; display: flex; flex-flow: column; row-gap: 5rem; padding-top: 26.4rem; align-items: center; background-image: url(../img/event/event-bg01.png); background-repeat: no-repeat; background-size: contain; background-position: top left;}
.event-type1 .calendar {display: flex; flex-flow: column; row-gap: 2rem;}
.event-type1 .calendar .week {display: grid; grid-template-columns: repeat(7, 1fr); grid-gap: .8rem;}
.event-type1 .calendar .week > li {width: 5.6rem; text-align: center; font-size: 1.6rem; line-height: 2.4rem; color: var(--body); margin: 0 auto;}
.event-type1 .calendar .week > li:nth-child(1) {color: var(--red);}
.event-type1 .calendar .day {display: grid; grid-template-columns: repeat(7, 1fr); grid-gap: 1.6rem .8rem;}
.event-type1 .calendar .day > li {width: 5.6rem; height: 5.6rem; border-radius: 100%; background-color: var(--white); display: flex; align-items: center; justify-content: center; font-size: 1.6rem; font-weight: 500; color: var(--disabled); position: relative; margin: 0 auto;}
.event-type1 .calendar .day > li.none {background-color: transparent;}
.event-type1 .calendar .day > li::after {content: ''; width: 100%; height: 100%; border-radius: 100%; background-repeat: no-repeat; background-size: contain; background-position: center; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}
.event-type1 .calendar .day > li.fail::after {background-image: url(../img/event/ic-fail.svg); background-color: #F9F7F4;}
.event-type1 .calendar .day > li.success::after {background-image: url(../img/event/ic-success.svg);}
.event-type1 .calendar .day > li.today::after {background-image: url(../img/event/ic-today.svg);}
.event-type1 > button {width: 20rem;}

@media screen and (max-width: 768px) {
    .event-type1 {height: 212vw; row-gap: 4rem; background-image: url(../img/event/event-bg01-mb.png); margin: 0 -2rem; padding: 48vw 2rem 0;}
    .event-type1 .calendar {row-gap: 4.2vw; width: 100%;}
    .event-type1 .calendar .week {grid-gap: 1.6vw; width: 100%; justify-content: space-between;}
    .event-type1 .calendar .week > li {width: calc((100vw - 6rem - 9.6vw) / 7); font-size: 3.2vw; line-height: 5vw;}
    .event-type1 .calendar .day {grid-gap: 3.2vw 1.6vw; justify-content: space-between;}
    .event-type1 .calendar .day > li {width: calc((100vw - 6rem - 9.6vw) / 7); height: calc((100vw - 6rem - 9.6vw) / 7); font-size: 3.2vw;}
    .event-type1 > button {width: 100%;}
}

.event-type2 {padding: 5rem 0; background-color: var(--black); background-image: url(../img/event/event-bg02.png); background-repeat: no-repeat; background-size: contain; background-position: center top; display: flex; flex-flow: column; row-gap: 4rem;}
.event-type2 > p {text-align: center; font-size: 2.4rem; line-height: 3.2rem; color: var(--white); text-shadow: 0px 0px 10px #323232;}
.event-type2 > p .font-orange {font-weight: 600;}
.event-type2 > div {width: 100%; max-width: 42rem; margin: 0 auto; padding: 3rem 2.4rem; border-radius: 1.2rem; border: 1.2px solid #c6c6c6; background-color: rgba(255,255,255,.2); box-shadow: 0px 4.8px 4.8px 0px rgba(0, 0, 0, 0.15); backdrop-filter: blur(4px); display: flex; flex-flow: column; row-gap: 2rem; align-items: center;}
.event-type2 > div > ul {display: flex; align-items: center; justify-content: center; column-gap: .2rem;}
.event-type2 > div > ul > li {font-family: 'Jalnan'; width: 4rem; height: 4rem; background: rgba(255, 255, 255, 0.80); mix-blend-mode: overlay; font-size: 3rem; color: var(--black); display: flex; align-items: center; justify-content: center;}
.event-type2 > div .prize {width: 14rem; height: 14rem; margin-top: 1.6rem; background-color: var(--white); border-radius: 100%; display: flex; align-items: center; justify-content: center; position: relative;}
.event-type2 > div .prize > img {width: 8rem; height: 8rem;}
.event-type2 > div .prize > p {width: 4rem; height: 4rem; background-color: var(--orange); display: flex; align-items: center; justify-content: center; font-size: 1.4rem; color: var(--white); position: absolute; top: 0; right: 0; border-radius: 100%;}
.event-type2 > div > p {text-align: center; font-size: 1.4rem; line-height: 2rem; color: rgba(255,255,255,.5);}
.event-type2 > div > p .font500 {color: var(--white);}
.event-type2 > div .answer {width: 100%; display: flex; align-items: center; column-gap: 1.2rem; margin-top: 1.2rem;}
.event-type2 > div .answer .input {flex: 1;}
.event-type2 > div .answer .input input {width: 100%; height: 4rem; padding: 0 1.2rem; font-size: 1.4rem; border-radius: .8rem;}
.event-type2 > div .answer > button {min-width: 9.2rem; height: 4rem; padding: 0 1.2rem; font-size: 1.4rem; border-radius: .8rem;}

@media screen and (max-width: 768px) {
    .event-type2 {padding: 4rem 2rem; background-image: url(../img/event/event-bg02-mb.png); row-gap: 2.4rem;}
    .event-type2 > p {font-size: 1.6rem; line-height: 2.4rem;}
    .event-type2 > div {padding: 2.4rem; row-gap: 1.6rem;}
    .event-type2 > div > ul > li {width: 3.2rem; height: 3.2rem; font-size: 2.4rem;}
    .event-type2 > div .prize {width: 12rem; height: 12rem;}
    .event-type2 > div .prize > img {width: 6.4rem; height: 6.4rem;}
    .event-type2 > div .prize > p {width: 3.2rem; height: 3.2rem; font-size: 1.2rem;}
    .event-type2 > div > p {font-size: 1.2rem; line-height: 1.6rem;}
    .event-type2 > div .answer {column-gap: 1rem; margin-top: .8rem;}
    .event-type2 > div .answer > button {min-width: 7.6rem;}
}

.event-type2.kgc {background-color: var(--kgc-main);}
.event-type2.lg {background-color: var(--lg-main);}
.event-type2.sk {background-color: var(--sk-main);}
.event-type2.hd {background-color: var(--hd-main);}
.event-type2.sono {background-color: var(--sono-main);}
.event-type2.kcc {background-color: var(--kcc-main);}
.event-type2.db {background-color: var(--db-main);}
.event-type2.kt {background-color: var(--kt-main);}
.event-type2.pega {background-color: var(--pega-main);}
.event-type2.ss {background-color: var(--ss-main);}

.event-type3 {padding: 4rem; display: flex; flex-flow: column; row-gap: 2.4rem; align-items: center; justify-content: center; position: relative; background-color: #F8B300; background-image: url(../img/event/event-bg03.png); background-repeat: no-repeat; background-size: cover; background-position: bottom center;}
.event-type3 > img {width: 8rem!important; position: absolute; top: 4rem; left: 4rem;}
.event-type3 > div {display: flex; flex-flow: column; align-items: center; row-gap: 2rem;}
.event-type3 > div .char {display: grid; grid-template-columns: repeat(6, 1fr); align-items: flex-end; justify-content: center; column-gap: 4rem;}
.event-type3 > div .char > li {display: flex; flex-flow: column; row-gap: .4rem; align-items: center; justify-content: center;}
.event-type3 > div .char > li > p {font-size: 1.6rem; line-height: 2.4rem;}
.event-type3 > div > div {position: relative; margin: 0 auto;}
.event-type3 > div > div .background {width: 100%!important; height: 100%;}
.event-type3 > div > div .background.finish {opacity: .15;}
.event-type3 > div > div .line {position: absolute; width: 100%!important; height: 100%; top: 0; left: 0;}
.event-type3 > div > div .line.on {display: block;}
.event-type3 > div > div .line.off {display: none;}
.event-type3 > div .prize {display: grid; grid-template-columns: repeat(6, 1fr); column-gap: 4rem;}
.event-type3 > div .prize > li {width: 7.6rem; display: flex; align-items: center; justify-content: center; text-align: center; font-size: 1.4rem; line-height: 2rem; font-weight: 500;}
.event-type3 > div .prize > li.off {color: transparent; background-image: url(../img/event/prize-null.svg); background-repeat: no-repeat; background-size: 3rem; background-position: center;}
.event-type3 > button {width: 20rem;}

.event-type3 > div > div > svg.mobile {display: none;}
.event-type3 > div > div > svg .cls-1 {stroke: #191919; stroke-width: 4;}
.event-type3 > div > div > svg.background {margin: initial; display: initial; opacity: .15;}
.event-type3 > div > div > svg.on {position: absolute; width: 100%!important; height: 100%; top: 0; left: 0; stroke-dasharray: 1000; stroke-dashoffset: 1000;}

/* 사다리 애니메이션 */
@keyframes drawLine {
    0% {
        stroke-dashoffset: 1000;
    }
    100% {
        stroke-dashoffset: 0;
    }
}

@media screen and (max-width: 768px) {
    .event-type3 {padding: 4rem 2rem; row-gap: 3.2rem; background-image: none;}
    .event-type3 > img {position: relative; top: initial; left: initial;}
    .event-type3 > div {row-gap: 1.6rem;}
    .event-type3 > div .char {column-gap: .5rem;}
    .event-type3 > div .char > li > img {width: 5rem!important;}
    .event-type3 > div .char > li > p {font-size: 1.4rem; line-height: 2rem;}
    .event-type3 > div .prize {column-gap: initial; column-gap: .5rem;}
    .event-type3 > div .prize > li {width: 5rem; font-size: 1.2rem; line-height: 1.6rem;}
    .event-type3 > button {width: 100%;}

    .event-type3 > div > div > svg.mobile {display: block;}
    .event-type3 > div > div > svg.desktop {display: none;}
}

.event-type4 {padding: 4rem; display: flex; flex-flow: column; row-gap: 3.2rem; align-items: center; justify-content: center; position: relative; background-color: #E4F7FE;  overflow: hidden;}
.event-type4 > img {height: 9.2rem; position: absolute; top: 4rem; left: 4rem;}
.event-type4 > div {width: 36rem; height: 36rem; display: flex; align-items: center; justify-content: center; position: relative;}
.event-type4 > div > img {width: 100%!important; height: 100%!important; position: absolute;}
.event-type4 > div > button {width: fit-content; min-width: fit-content; height: fit-content; border-radius: 100%; background-color: transparent; padding: 0; position: absolute;}
.event-type4 > div > button > img {width: 12rem; height: 12rem; filter: drop-shadow(0px 6.917px 6.917px rgba(0, 0, 0, 0.40));}
.event-type4 > p {text-align: center; font-size: 2rem; font-weight: 600;}
.event-type4 > button {width: 20rem;}

@media screen and (max-width: 768px) {
    .event-type4 {padding: 4rem 2rem;}
    .event-type4 > img {position: relative; top: initial; left: initial;}
    .event-type4 > div {width: 31.2rem; height: 31.2rem;}
    .event-type4 > div > button > img {width: 10rem; height: 10rem;}
    .event-type4 > button {width: 100%;}
}

.event-type4.kgc {background-color: var(--kgc-sub);}
.event-type4.sono {background-color: var(--sono-sub);}
.event-type4.lg {background-color: var(--lg-sub);}
.event-type4.sk {background-color: var(--sk-sub);}
.event-type4.hd {background-color: var(--hd-sub);}
.event-type4.kcc {background-color: var(--kcc-sub);}
.event-type4.db {background-color: var(--db-sub);}
.event-type4.kt {background-color: var(--kt-sub);}
.event-type4.pega {background-color: var(--pega-sub);}
.event-type4.ss {background-color: var(--ss-sub);}

.keypad-wrap {display: flex; flex-flow: column; row-gap: 2.4rem;}
.keypad-wrap .result {display: grid; grid-template-columns: repeat(4, 1fr); column-gap: 1.6rem; width: fit-content; margin: 0 auto;}
.keypad-wrap .result > li {width: 6.5rem; height: 6.5rem; border-radius: 1.2rem; background-color: var(--gray03); display: flex; align-items: center; justify-content: center;}
.keypad-wrap .result > li::before {content: ''; width: 1rem; height: 1rem; border-radius: 100%; background-color: var(--gray01);}
.keypad-wrap .result > li.active::before {background-color: var(--black);}
.keypad-wrap .keypad {display: grid; grid-template-columns: repeat(3, 1fr);}
.keypad-wrap .keypad > li {height: 8.8rem; display: flex; align-items: center; justify-content: center;}
.keypad-wrap .keypad > li > button {width: 100%; height: 100%; min-width: inherit; padding: 0; font-size: 3.2rem; font-weight: 500; background-color: transparent; color: var(--black);}
.keypad-wrap .keypad > li > button > p {font-size: 1.4rem; color: var(--body);}

@media screen and (max-width: 768px) {
    .keypad-wrap .result {column-gap: 1rem;}
}

.event-type5 {display: flex; flex-flow: column; row-gap: 2rem;}
.event-type5 > img {width: 100%;}
.event-type5 .desc {background-color: var(--gray03); padding: 3.2rem; display: flex; flex-flow: column; row-gap: 2.4rem; align-items: center; justify-content: center;}
.event-type5 .desc > p {text-align: center; font-size: 2.4rem; line-height: 3.2rem; font-weight: 600;}
.event-type5 .desc > p > span {font-weight: 700; color: var(--orange);}
.event-type5 .desc .input {width: 38rem;}
.event-type5 .desc .input > input {width: 100%;}
.event-type5 .desc > ul {width: 52rem; display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 1.2rem 2.4rem;}
.event-type5 .desc > ul > li > label {height: 4rem; background-color: var(--white); border: 1px solid var(--gray01); border-radius: .8rem; padding: 0 1.2rem; flex-flow: row-reverse; justify-content: space-between;}
.event-type5 .desc > ul > li > label > p {display: flex; align-items: center; column-gap: 1.2rem; font-size: 1.4rem; font-weight: 500; color: var(--subheadline);}
.event-type5 .desc > ul > li > label > p > span {font-size: 600; color: var(--black);}

@media screen and (max-width: 768px) {
    .event-type5 .desc {width: 100vw; margin: 0 -2rem; padding: 2.4rem 2rem; row-gap: 1.6rem;}
    .event-type5 .desc > p {font-size: 1.6rem; line-height: 2.4rem;}
    .event-type5 .desc .input {width: 100%;}
    .event-type5 .desc > ul {width: 100%; grid-template-columns: repeat(1, 1fr);}
}

.event-notice {padding: 2.4rem 2rem; display: flex; flex-flow: column; row-gap: 2rem; background-color: var(--gray03);}
.event-notice > div {display: flex; flex-flow: column; row-gap: 1.2rem;}
.event-notice > div > p {font-size: 1.6rem; font-weight: 600; color: var(--subheadline);}
.event-notice > div > ul {display: flex; flex-flow: column; row-gap: .8rem;}
.event-notice > div > ul > li {font-size: 1.4rem; line-height: 2rem; color: var(--subheadline); word-break: keep-all; display: flex; column-gap: .8rem;}
.event-notice > div > ul > li::before {content: '•'; font-size: 1rem; line-height: 1.8rem;}

@media screen and (max-width: 768px) {
    .event-notice {width: 100vw; margin: 0 -2rem;}
}

/* 이벤트 > event > 경품 지급 안내 */
.pop .notice {display: flex; flex-flow: column; row-gap: 2.4rem; align-items: center;}
.pop .notice > div {display: flex; flex-flow: column; row-gap: .4rem;}
.pop .notice > div > p {text-align: center; font-size: 1.6rem; font-weight: 600; line-height: 2.4rem; word-break: keep-all;}
.pop .notice > div > span {text-align: center; font-size: 1.4rem; font-weight: 500; line-height: 2rem; color: var(--subheadline); word-break: keep-all;}
.pop .notice + * {margin-top: 2.4rem;}

/* 티켓 > 티켓 안내 */
.ticket-price img {width: 100%;}
.ticket-info {display: flex; align-items: center; grid-gap: 2rem; flex-wrap: wrap;}
.ticket-info > li > button {width: 5.2rem; height: 5.2rem; min-width: initial; padding: 0; border-radius: 100%;}
.ticket-info > li > button > i {width: 3.2rem; height: 3.2rem;}
.ticket-info + p {margin-top: 1.6rem; font-size: 1.2rem; line-height: 1.6; color: var(--body); word-break: keep-all;}

@media screen and (max-width: 768px) {
    .ticket-info > li > button {width: 5rem; height: 5rem;}
}

.ticket-info > li > button.kgc {background-color: var(--kgc-sub)!important;}
.ticket-info > li > button.sono {background-color: var(--sono-sub)!important;}
.ticket-info > li > button.lg {background-color: var(--lg-sub)!important;}
.ticket-info > li > button.sk {background-color: var(--sk-sub)!important;}
.ticket-info > li > button.hd {background-color: var(--hd-sub)!important;}
.ticket-info > li > button.kcc {background-color: var(--kcc-sub)!important;}
.ticket-info > li > button.db {background-color: var(--db-sub)!important;}
.ticket-info > li > button.kt {background-color: var(--kt-sub)!important;}
.ticket-info > li > button.pega {background-color: var(--pega-sub)!important;}
.ticket-info > li > button.ss {background-color: var(--ss-sub)!important;}
.ticket-info > li > button:disabled {opacity: .2;}

.ticket-info-desc {padding: 2.4rem 2rem; background-color: var(--gray03); display: flex; flex-flow: column; row-gap: 5rem;}
.ticket-info-desc > div {display: flex; flex-flow: column; row-gap: 1.2rem;}
.ticket-info-desc > div .sub-title {margin-bottom: 0;}
.ticket-info-desc > div > ul {display: flex; flex-flow: column; row-gap: .8rem;}
.ticket-info-desc > div > ul > li {font-size: 1.4rem; line-height: 2rem; color: var(--subheadline); display: flex; column-gap: .4rem; word-break: keep-all;}
.ticket-info-desc > div > ul > li::before {content: '•'; font-size: 1rem; line-height: 1.8rem; color: var(--subheadline);}
.ticket-info-desc > div > ul > li.sub {color: var(--body);}
.ticket-info-desc > div > ul > li.sub::before {content: '-'; font-size: 1.4rem; line-height: 2rem;}

@media screen and (max-width: 768px) {
    .title.desktop + .cont-box > .ticket-info-desc:first-child {margin-top: -2.4rem;}
    .ticket-info-desc {width: 100vw; margin: 0 -2rem; padding: 2.4rem 2rem; row-gap: 2.4rem;}
}

.ticket-list {min-height: 60rem;}

.ticket-list.type01 {display: flex; flex-flow: column; row-gap: 2rem;}
.ticket-list.type01 > li {padding: 0 2rem; border: 1px solid var(--gray02); border-radius: 1.2rem; filter: drop-shadow(0px 6px 12px rgba(25, 25, 25, 0.05)); background-color: var(--white);}
.ticket-list.type01 > li > ul {width: 100%; padding: 2rem 0; border-bottom: 1px solid var(--gray02); display: flex; align-items: center; column-gap: .8rem;}
.ticket-list.type01 > li > ul > li {font-size: 1.2rem; line-height: 1.6rem; font-weight: 500; color: var(--subheadline); display: flex; align-items: center; column-gap: .8rem;}
.ticket-list.type01 > li > ul > li + li::before {content: ''; width: 1px; height: 1.2rem; background-color: var(--gray01);}
.ticket-list.type01 > li > div {padding: 2.4rem 0; display: flex; align-items: center; justify-content: space-between;}
.ticket-list.type01 > li > div .versus {display: flex; align-items: center; column-gap: 4rem;}
.ticket-list.type01 > li > div .versus > li {display: flex; align-items: center; column-gap: .8rem;}
.ticket-list.type01 > li > div .versus > li > img {width: 3.6rem; height: 3.6rem;}
.ticket-list.type01 > li > div .versus > li > div {width: 3.6rem; height: 3.6rem; border-radius: 100%; background-color: var(--gray03); background-repeat: no-repeat; background-size: cover; background-position: top .2rem center;}
.ticket-list.type01 > li > div .versus > li > p {min-width: 11.2rem; font-size: 1.6rem; line-height: 2.4rem; font-weight: 500;}
.ticket-list.type01 > li > div .versus > li:nth-child(1) > p {text-align: right;}
.ticket-list.type01 > li > div .versus > li > i {width: 3.6rem; height: 3.6rem;}
.ticket-list.type01 > li > div > div {display: flex; align-items: center; justify-content: flex-end; column-gap: .8rem;}
.ticket-list.type01 > li > div > div > button {min-width: 9.6rem; height: 3.2rem; padding: 0 1.2rem; font-size: 1.4rem; border-radius: .6rem;}

.ticket-list.type01 > li > div .d-league {display: flex; flex-flow: column; row-gap: 3rem;}
.ticket-list.type01 > li > div .d-league > li {display: flex; flex-flow: column; row-gap: .8rem;}
.ticket-list.type01 > li > div .d-league > li > p {font-size: 1.2rem; font-weight: 500;}
.ticket-list.type01 > li > div .d-league + div {display: flex; flex-flow: column; row-gap: .8rem;}
.ticket-list.type01 > li > div .d-league + div button.red:disabled {background-color: var(--red)!important; color: var(--white)!important;}

@media screen and (max-width: 768px) {
    .ticket-list {min-height: fit-content;}

    .ticket-list.type01 {row-gap: 1.2rem;}
    .ticket-list.type01 > li {padding: 0 1.6rem;}
    .ticket-list.type01 > li > ul {padding: 1.2rem 0; column-gap: .6rem;}
    .ticket-list.type01 > li > ul > li {font-size: 1.4rem; line-height: 2rem; column-gap: .6rem;}
    .ticket-list.type01 > li > div {padding: 2rem 0; flex-flow: column; row-gap: 2rem;}
    .ticket-list.type01 > li > div .versus {column-gap: 2rem;}
    .ticket-list.type01 > li > div .versus > li {flex-flow: column; justify-content: center;}
    .ticket-list.type01 > li > div .versus > li:nth-child(1) {flex-flow: column-reverse;}
    .ticket-list.type01 > li > div .versus > li > img {width: 5.2rem; height: 5.2rem;}
    .ticket-list.type01 > li > div .versus > li > div {margin-bottom: .8rem;}
    .ticket-list.type01 > li > div .versus > li > p {min-width: 9.8rem; font-size: 1.4rem; line-height: 2rem; text-align: center; word-break: keep-all;}
    .ticket-list.type01 > li > div .versus > li:nth-child(1) > p {text-align: center;}
    .ticket-list.type01 > li > div .versus > li > i {width: 6.6rem; height: 6.6rem;}
    .ticket-list.type01 > li > div > div {width: 100%;}
    .ticket-list.type01 > li > div > div > button {width: calc((100% - .8rem) / 2);}

    .ticket-list.type01 > li > div .d-league + div {flex-flow: row; row-gap: .8rem; justify-content: center;}
}

.ticket-list.type02 {display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 2rem 4rem; min-height: initial;}
.ticket-list.type02 > li {height: fit-content; padding: 1.6rem 2rem; border-radius: 1.2rem; display: flex; align-items: center; column-gap: 2rem; background-color: var(--gray03); position: relative;}
.ticket-list.type02 > li::before {content: ''; width: 1.2rem; height: 1.2rem; background-color: var(--white); border-radius: 100%; position: absolute; top: -.6rem; left: 9.4rem;}
.ticket-list.type02 > li::after {content: ''; width: 1.2rem; height: 1.2rem; background-color: var(--white); border-radius: 100%; position: absolute; bottom: -.6rem; left: 9.4rem;}
.ticket-list.type02 > li > i {width: 7.2rem; height: 7.2rem;}
.ticket-list.type02 > li > img {width: 7.2rem; height: 7.2rem;}
.ticket-list.type02 > li > div {display: flex; flex-flow: column; row-gap: .8rem; flex: 1;}
.ticket-list.type02 > li > div::before {content: ''; display: block; height: calc(100% - 1.2rem); width: 1px; border-right: 1px dashed var(--gray02); position: absolute; top: .6rem; left: 10rem;}
.ticket-list.type02 > li > div > p {font-size: 1.4rem; line-height: 2rem; font-weight: 600;}
.ticket-list.type02 > li > div > span {font-size: 1.2rem; line-height: 1.6rem; color: var(--body);}
.ticket-list.type02 > li > div > ul {display: flex; align-items: baseline; column-gap: .6rem;}
.ticket-list.type02 > li > div > ul > li {font-size: 1.2rem; color: var(--body); display: flex; align-items: baseline; column-gap: .6rem;}
.ticket-list.type02 > li > div > ul > li + li::before {content: ''; width: 1px; height: 1rem; background-color: var(--gray01); }
.ticket-list.type02 > li > div > div {display: flex; align-items: center; justify-content: flex-end; column-gap: .8rem; margin-top: .4rem;}
.ticket-list.type02 > li > div > div > button {width: 100%; height: 3.2rem; padding: 0 1.2rem; font-size: 1.4rem; border-radius: .6rem;}
.ticket-list.type02 > li > div > div > button:nth-child(1):nth-last-child(2), .ticket-list.type02 > li > div > div > button:nth-child(1):nth-last-child(2) ~ button {width: calc((100% - .8rem) / 2);}

@media screen and (max-width: 768px) {
    .ticket-list.type02 {grid-template-columns: repeat(1, 1fr); grid-gap: 1.2rem;}
    .ticket-list.type02 > li::before {left: 7.2rem;}
    .ticket-list.type02 > li::after {left: 7.2rem;}
    .ticket-list.type02 > li > i {width: 4.8rem; height: 4.8rem;}
    .ticket-list.type02 > li > img {width: 4.8rem; height: 4.8rem;}
    .ticket-list.type02 > li > div::before {left: 7.8rem;}
}

.ticket-list.type02 > li.kgc {background-color: var(--kgc-sub);}
.ticket-list.type02 > li.sono {background-color: var(--sono-sub);}
.ticket-list.type02 > li.lg {background-color: var(--lg-sub);}
.ticket-list.type02 > li.sk {background-color: var(--sk-sub);}
.ticket-list.type02 > li.hd {background-color: var(--hd-sub);}
.ticket-list.type02 > li.kcc {background-color: var(--kcc-sub);}
.ticket-list.type02 > li.db {background-color: var(--db-sub);}
.ticket-list.type02 > li.kt {background-color: var(--kt-sub);}
.ticket-list.type02 > li.pega {background-color: var(--pega-sub);}
.ticket-list.type02 > li.ss {background-color: var(--ss-sub);}


.ticket-list.type03 {display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 2rem 4rem; min-height: initial;}
.ticket-list.type03 > li {display: flex; flex-flow: column; row-gap: .8rem;}
.ticket-list.type03 > li > div {height: fit-content; padding: 1.6rem 2rem; border-radius: 1.2rem; display: flex; flex-flow: column; row-gap: .8rem; background-color: var(--gray03); position: relative;}
.ticket-list.type03 > li > div > p {font-size: 1.4rem; line-height: 2rem; font-weight: 600;}
.ticket-list.type03 > li > div > span {font-size: 1.2rem; line-height: 1.6rem; color: var(--body);}
.ticket-list.type03 > li > div > span + span {margin-top: -.4rem;}
.ticket-list.type03 > li > div > ul {display: flex; flex-flow: column; row-gap: .8rem;}
.ticket-list.type03 > li > div > ul > li {display: flex; align-items: center; justify-content: space-between;}
.ticket-list.type03 > li > div > ul > li > p {font-size: 1.4rem; line-height: 1.6rem; color: var(--body);}
.ticket-list.type03 > li > div > ul > li > span {font-size: 1.4rem; line-height: 1.6rem;}
.ticket-list.type03 > li > div > div {display: flex; align-items: center; justify-content: flex-end; column-gap: .8rem; margin-top: .4rem;}
.ticket-list.type03 > li > div > div > button {width: 100%; height: 3.2rem; padding: 0 1.2rem; font-size: 1.4rem; border-radius: .6rem;}
.ticket-list.type03 > li > div > div > button:nth-child(1):nth-last-child(2), .ticket-list.type03 > li > div > div > button:nth-child(1):nth-last-child(2) ~ button {width: calc((100% - .8rem) / 2);}

@media screen and (max-width: 768px) {
    .ticket-list.type03 {grid-template-columns: repeat(1, 1fr); grid-gap: 1.2rem;}
}

/* 티켓 > 컵대회 */
.ticket-cup-list {border-radius: 1.2rem; padding: 2rem; background-color: var(--white); border: 1px solid var(--gray02); filter: drop-shadow(0px 6px 12px rgba(25, 25, 25, 0.05)); display: flex; flex-flow: column; row-gap: 2rem;}
.ticket-cup-list > div {display: flex; align-items: center; justify-content: space-between; padding-bottom: 2rem; border-bottom: 1px solid var(--gray02);}
.ticket-cup-list > div .info {display: flex; flex-flow: column; row-gap: .6rem;}
.ticket-cup-list > div .info > p {font-size: 1.4rem; font-weight: 600; line-height: 1.6rem;}
.ticket-cup-list > div .info > ul {display: flex; align-items: center; column-gap: .8rem;}
.ticket-cup-list > div .info > ul > li {display: flex; align-items: center; column-gap: .8rem; font-size: 1.2rem; line-height: 1.6rem; color: var(--body);}
.ticket-cup-list > div .info > ul > li + li::before {content: ''; width: 1px; height: 1.2rem; background-color: var(--gray01);}
.ticket-cup-list > div .button {display: flex; align-items: center; column-gap: .8rem;}
.ticket-cup-list > div .button button {min-width: 12.2rem;}
.ticket-cup-list > img {width: 100%;}

@media screen and (max-width: 768px) {
    .ticket-cup-list {padding: 1.6rem; row-gap: 1.6rem;}
    .ticket-cup-list > div {width: 100%; align-items: flex-start; flex-flow: column; row-gap: 1.2rem; padding-bottom: 1.6rem;}
    .ticket-cup-list > div .button {width: 100%;}
    .ticket-cup-list > div .button button {width: calc((100% - .8rem) / 2);}
}

/* 스토어 > 포토스토어 */
.store-search {display: flex; align-items: center; column-gap: 1rem; margin-bottom: 2.4rem;}
.store-search > li {position: relative; display: flex; align-items: center;}
.store-search > li select {height: 4rem; padding: 0 4.4rem 0 1.2rem; border-radius: .8rem; background-position: center right 1rem; font-size: 1.4rem;}
.store-search > li .input {width: 40rem;}
.store-search > li .input button {right: 4.8rem;}
.store-search > li .input input {width: 100%; height: 4rem; padding: 0 1.2rem; font-size: 1.4rem; border-radius: .8rem;}
.store-search > li .input + i {position: absolute; right: 1.2rem; cursor: pointer;}
.store-search > li > button {width: 4rem; min-width: initial; height: 4rem; padding: 0; border-radius: .8rem; border: 1px solid var(--gray01); background-color: var(--white); position: relative;}
.store-search > li > button > span {width: 1.6rem; height: 1.6rem; border-radius: 100%; background-color: var(--red); position: absolute; right: -.4rem; top: -.4rem; font-size: 1.2rem; font-weight: 600; color: var(--white); display: flex; align-items: center; justify-content: center;}

@media screen and (max-width: 768px) {
    .tab-style2  + .store-search {margin-top: -1.2rem;}
    .store-search {width: 100vw; margin: -2.4rem -2rem 2.4rem; padding: 1.2rem 2rem; background-color: var(--gray03); column-gap: .8rem;}
    .store-search.mypage-store-search {margin: 0 -2rem 2.4rem;}
    .store-search > li select {background-position: center right .6rem; padding: 0 3.2rem 0 1.2rem;}
    .store-search > li:nth-child(1) {width: calc(100% - 4rem - .8rem);}
    .store-search > li:nth-child(1):nth-last-child(1) {width: 100%;}
    .store-search > li:nth-child(1):nth-last-child(3) {width: fit-content;}
    .store-search > li:nth-child(1):nth-last-child(3) ~ li:nth-child(2) {flex: 1;}
    .store-search > li:nth-child(1):nth-last-child(3) ~ li .input {width: 100%;}
    .store-search > li .input + i {width: 2rem; height: 2rem;}
    .store-search > li > input {width: 100%;}
}

.photostore-category {width: 120rem; display: grid; grid-template-columns: repeat(5, 1fr); grid-gap: 5rem 2rem;}
.photostore-category > li > a {display: flex; flex-flow: column; row-gap: 2rem;}
.photostore-category > li > a > ul {display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: .8rem;}
.photostore-category > li > a > ul > li {overflow: hidden; border-radius: .8rem; width: 100%; height: 7rem; background-repeat: no-repeat; background-size: cover; background-position: center;}
.photostore-category > li > a > ul > li:nth-child(1) {border-radius: 1.2rem; grid-column: 1 / span 3; height: 22.4rem;}
.photostore-category > li > a > p {font-size: 1.6rem; font-weight: 500; line-height: 2.4rem;}

.photostore-category.sm {width: 100%; grid-template-columns: repeat(2, 1fr); grid-gap: 2rem;}
.photostore-category.sm > li > a {row-gap: 1.2rem;}
.photostore-category.sm > li > a > ul {grid-gap: .4rem;}
.photostore-category.sm > li > a > ul > li {height: 5.2rem;}
.photostore-category.sm > li > a > ul > li:nth-child(1) {height: 16.4rem;}
.photostore-category.sm > li > a > p {font-size: 1.4rem; line-height: 2rem;}

@media screen and (max-width: 768px) {
    .photostore-category {width: 100%; grid-template-columns: repeat(2, 1fr); grid-gap: 2rem;}
    .photostore-category > li > a {row-gap: 1.2rem;}
    .photostore-category > li > a > ul {grid-gap: .4rem;}
    .photostore-category > li > a > ul > li {height: calc((((100vw - 6rem) / 2) - .8rem) / 3);}
    .photostore-category > li > a > ul > li:nth-child(1) {height: calc((100vw - 6rem) / 2);}
    .photostore-category > li > a > p {font-size: 1.4rem; line-height: 2rem;}
}

/* 스토어 > 포토스토어 > 리스트 */
.photo-store-list {display: grid; grid-template-columns: repeat(5, 1fr); grid-gap: 5rem 2rem;}
.photo-store-list > li > a {display: flex; flex-flow: column; row-gap: 2rem;}
.photo-store-list > li > a .img {width: 100%; height: 22.4rem; border-radius: 1.2rem; background-repeat: no-repeat; background-size: cover; background-position: center;}
.photo-store-list > li > a .info {display: flex; flex-flow: column; row-gap: 1rem;}
.photo-store-list > li > a .info > p {font-size: 1.6rem; font-weight: 500; line-height: 2.4rem; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; line-clamp: 2; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.photo-store-list > li > a .info > div {font-size: 1.6rem; font-weight: 600; line-height: 2.4rem; display: flex; align-items: center; column-gap: .4rem;}
.photo-store-list > li > a .info > div > span {font-size: 1.2rem; line-height: 2rem;}

@media screen and (max-width: 768px) {
    .photo-store-list {grid-template-columns: repeat(2, 1fr); grid-gap: 2rem;}
    .photo-store-list > li > a {row-gap: 1.2rem;}
    .photo-store-list > li > a .img {height: calc((100vw - 6rem) / 2);}
    .photo-store-list > li > a .info > p {font-size: 1.4rem; line-height: 2rem;}
    .photo-store-list > li > a .info > div {font-size: 1.4rem; line-height: 2rem;}
}

/* 스토어 > 포토스토어 > 상세 */
.store-detail-wrap {display: grid; grid-template-columns: calc(100% - 35rem - 4rem) 35rem; column-gap: 4rem;}
.store-detail-wrap .prod-swiper-wrap {width: 100%; height: 42rem; border-radius: 1.2rem; border: 1px solid var(--gray02); overflow: hidden; margin-bottom: 2.4rem;}
.store-detail-wrap .prod-swiper-wrap > img {display: block; margin: 0 auto; height: 100%;}
.store-detail-wrap .prod-swiper-wrap .prod-swiper {width: 100%; height: 100%;}
.store-detail-wrap .prod-swiper-wrap .prod-swiper .swiper-slide {display: flex; align-items: center; justify-content: center;}
.store-detail-wrap .prod-swiper-wrap .prod-swiper .swiper-slide > img {height: 90%;}
.store-detail-wrap .prod-swiper-wrap .prod-swiper .swiper-pagination {width: 4.4rem; height: 2.4rem; background-color: rgba(0, 0, 0, 0.5); border-radius: 2rem; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; color: var(--gray01); bottom: 2rem; top: initial; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); z-index: 10;}
.store-detail-wrap .prod-swiper-wrap .prod-swiper .swiper-pagination .swiper-pagination-current {font-weight: 600; color: var(--white);}

@media screen and (max-width: 768px) {
    .store-detail-wrap {display: block;}
    .store-detail-wrap .prod-swiper-wrap {width: 100vw; height: 100vw; border-radius: 0; border: 0; margin: -2.4rem -2rem 2.4rem;}
    .store-detail-wrap .prod-swiper-wrap .prod-swiper .swiper-slide > img {height: 100%;}

    .store-detail-wrap .prod-swiper-wrap.photocard .prod-swiper .swiper-slide {background-color: var(--gray03);}
    .store-detail-wrap .prod-swiper-wrap.photocard .prod-swiper .swiper-slide .pointcard .img {min-width: 18.4rem; height: 24rem;}
    .store-detail-wrap .prod-swiper-wrap.photocard .prod-swiper .swiper-slide .pointcard .desc > span {display: block;}
    .store-detail-wrap .prod-swiper-wrap.photocard .prod-swiper .swiper-slide .pointcard .desc > i {width: 6.6rem 4rem;}
}

/* 스토어 > 포토스토어 > 상세 > 상품설명 */
.store-detail-wrap .prod-info {display: flex; flex-flow: column;}
.store-detail-wrap .prod-info img {width: 100%;}

/* 스토어 > 포토스토어 > 상세 > 리뷰 */
.review-btn {width: fit-content; height: fit-content; min-width: initial; padding: 0; column-gap: .4rem; font-size: 1.6rem; font-weight: 600; color: var(--orange);}

.review-list {display: flex; flex-flow: column; row-gap: 1.2rem;}
.review-list > li {display: flex; flex-flow: column; row-gap: 1.2rem; padding-bottom: 1.2rem; border-bottom: 1px solid var(--gray02);}
.review-list > li > div {display: flex; flex-flow: column; row-gap: .8rem;}
.review-list > li > div > div {display: flex; align-items: center; column-gap: .8rem;}
.review-list > li > div > div > p {font-size: 1.4rem; font-weight: 600; line-height: 2rem; }
.review-list > li > div > div > span {font-size: 1.2rem; line-height: 1.6rem; color: var(--body);}
.review-list > li > div > p {font-size: 1.4rem; line-height: 2rem; word-break: keep-all;}

.review-list > li > div + div {row-gap: .4rem; padding: 1.2rem 1.6rem 1.2rem 4.4rem; background-color: var(--gray03); border-radius: .8rem;}
.review-list > li > div + div > div {margin-left: -2.8rem;}
.review-list > li > div + div > div::before {content: ''; width: 2rem; height: 2rem; background-image: url(../img/ico/ic-reply.svg); background-repeat: no-repeat; background-size: contain; background-position: center;}
.review-list > li > div + div > div > p {color: var(--orange);}

.review-write > ul {display: flex; flex-flow: column; row-gap: .4rem; margin-top: 1.2rem;}
.review-write > ul > li {font-size: 1.2rem; line-height: 1.6rem; color: var(--body); display: flex; align-items: center; column-gap: .4rem;}
.review-write > ul > li::before {content: '•'; font-size: 1rem; line-height: 1rem;}
.review-write .button {margin-top: 2rem; display: flex; align-items: center; justify-content: center; column-gap: 1rem;}
.review-write .button > button {min-width: 6.4rem; height: 4rem; padding: 0 1.2rem; font-size: 1.4rem; border-radius: .8rem;}

@media screen and (max-width: 768px) {
    .review-write .button > button {min-width: initial; width: calc((100% - 1rem) / 2);}
}

/* 스토어 > 포토스토어 > 상세 > Q&A */
.qna-list {display: flex; flex-flow: column; row-gap: 1.2rem;}
.qna-list > li {display: flex; flex-flow: column; row-gap: 1.2rem; padding-bottom: 1.2rem; border-bottom: 1px solid var(--gray02);}
.qna-list > li > div {display: flex; flex-flow: column; row-gap: 1.2rem;}
.qna-list > li > div > p {font-size: 1.4rem; font-weight: 500; line-height: 2rem; word-break: keep-all;}
.qna-list > li > div > ul {display: flex; align-items: center; column-gap: .8rem;}
.qna-list > li > div > ul > li {display: flex; align-items: center; column-gap: .8rem; font-size: 1.2rem; line-height: 1.6rem; color: var(--body);}
.qna-list > li > div > ul > li + li::before {content: ''; width: 1px; height: 1.2rem; background-color: var(--gray02);}
.qna-list > li > div > ul > li.font-gray,
.qna-list > li > div > ul > li.font-orange {font-weight: 600;}

.qna-list > li > div + div {row-gap: .8rem; padding: 1.2rem 1.6rem; background-color: var(--gray03); border-radius: .8rem;}
.qna-list > li > div + div > span {font-size: 1.2rem; line-height: 1.6rem; color: var(--body);}
.qna-list > li > div + div > p {font-size: 1.4rem; line-height: 2rem; word-break: keep-all;}

/* 스토어 > 포토스토어 > 상세 > 모바일 */
.buy-button {display: none;}

@media screen and (max-width: 768px) {
    .buy-button {display: flex; align-items: center; column-gap: 1.2rem; position: sticky; position: -webkit-sticky; bottom: 0; left: 0; width: 100vw; margin: 4rem -2rem -4rem; padding: 1.2rem 2rem; background-color: var(--gray03); z-index: 10;}
    .buy-button > button:not(.share) {flex: 1;}
    .buy-button .share {width: 5.6rem; height: 5.6rem; min-width: initial; padding: 0;}
}

/* 스토어 > 포토스토어 > 상세 > 옵션 */
.option-wrap {position: sticky; position: -webkit-sticky; top: 14.8rem; height: fit-content;}
.option-wrap .ic-arrow-down-32 {display: none;}
.option-wrap .desktop > span + p {margin-top: .8rem;}
.option-wrap .desktop > p {font-size: 2rem; line-height: 2.8rem; font-weight: 600; word-break: keep-all;}
.option-wrap .info {margin-top: 2rem; border: 1px solid var(--gray02); border-radius: 1.2rem; padding: 1.6rem 2rem; display: flex; flex-flow: column; row-gap: .8rem; background-color: var(--white);}
.option-wrap .info > li {display: flex; align-items: center; justify-content: space-between;}
.option-wrap .info > li > p {font-size: 1.4rem; line-height: 2rem; color: var(--body);}
.option-wrap .info > li > p.font600 {color: var(--black);}
.option-wrap .info > li > span {font-size: 1.4rem; line-height: 2rem; white-space: pre-wrap;}
.option-wrap .info > li > div {display: flex; align-items: center; column-gap: .4rem; font-size: 2rem; font-weight: 600; line-height: 2.8rem;}
.option-wrap .info > li > div > span {font-size: 1.4rem; line-height: 2rem;}

.option-wrap-mobile {display: none;}

@media screen and (max-width: 768px) {
    .option-wrap {display: none; position: relative; z-index: 100;}
    .option-wrap.active {display: block;}
    .option-wrap::before {content: ''; width: 100vw; height: 100vh; background-color: rgba(0, 0, 0, 0.5); position: fixed; top: 0; left: 0; z-index: 1;}
    .option-wrap > div {position: fixed; left: 0; top: initial; bottom: 0; width: 100vw; background-color: var(--white); z-index: 2; border-radius: 2rem 2rem 0 0;}
    .option-wrap > div .ic-arrow-down-32 {display: flex; margin: .8rem auto;}
    .option-wrap > div .desktop {display: none;}

    .option-wrap-mobile {display: flex; flex-flow: column; margin: 0 -2rem 2.4rem; padding: 0 2rem 2.4rem; border-bottom: 1.2rem solid var(--gray03);}
    .option-wrap-mobile + .tab-style2 {margin-top: 0;}
    .option-wrap-mobile > span + p {margin-top: .8rem;}
    .option-wrap-mobile > p {font-size: 2rem; line-height: 2.8rem; font-weight: 600; word-break: keep-all;}
    .option-wrap-mobile .info {margin-top: 2rem; border: 1px solid var(--gray02); border-radius: 1.2rem; padding: 1.6rem 2rem; display: flex; flex-flow: column; row-gap: .8rem; background-color: var(--white);}
    .option-wrap-mobile .info > li {display: flex; align-items: center; justify-content: space-between;}
    .option-wrap-mobile .info > li > p {font-size: 1.4rem; line-height: 2rem; color: var(--body);}
    .option-wrap-mobile .info > li > span {font-size: 1.4rem; line-height: 2rem; white-space: pre-wrap;}
    .option-wrap-mobile .info > li > div {display: flex; align-items: center; column-gap: .4rem; font-size: 2rem; font-weight: 600; line-height: 2.8rem;}
    .option-wrap-mobile .info > li > div > span {font-size: 1.4rem; line-height: 2rem;}
}

.option-wrap .option {margin-top: 2rem; display: flex; flex-flow: column; row-gap: 1rem;}
.option-wrap .option .dropdown {width: 100%; height: 4rem; padding: 0 1.2rem; font-size: 1.4rem; border-radius: .8rem;}
.option-wrap .option .dropdown.active {border-radius: .8rem .8rem 0 0;}
.option-wrap .option .dropdown.active > ul {top: 3.9rem; overflow: hidden; max-height: 14rem; overflow-y: auto;}
.option-wrap .option .dropdown.active > ul > li {padding: 1rem 1.2rem;}
.option-wrap .option .dropdown.active > ul > li:hover {background-color: var(--gray03);}
.option-wrap .option .dropdown.active > ul > li input + label > p {text-align: left; color: var(--black);}
.option-wrap .option .dropdown.active > ul > li input:disabled + label > p {color: var(--gray01);}
.option-wrap .option > input {width: 100%; height: 4rem; padding: 0 1.2rem; font-size: 1.4rem; border-radius: .8rem;}

@media screen and (max-width: 768px) {
    .option-wrap .option {margin-top: 0; row-gap: .8rem; padding: 0 2rem;}
}

.order-list {display: flex; flex-flow: column; row-gap: 2rem; margin-top: 2rem; max-height: calc(100vh - 14.8rem - 48.9rem - 6rem); overflow-y: auto;}
.order-list > li {display: flex; flex-flow: column; row-gap: 1.2rem;}
.order-list > li > div {border-radius: .8rem; background-color: var(--gray03); padding: 1.6rem; display: flex; flex-flow: column; row-gap: 1.2rem;}
.order-list > li > div > div {display: flex; justify-content: space-between; align-items: center;}
.order-list > li > div .name {align-items: initial; column-gap: 2rem;}
.order-list > li > div .name > p {flex: 1; font-size: 1.4rem; line-height: 2rem;}
.order-list > li > div .price > p {font-size: 1.6rem; font-weight: 600;}
.order-list > li > p {display: flex; align-items: center; column-gap: .4rem; font-size: 1.2rem; line-height: 1.6rem; color: var(--body);}

@media screen and (max-width: 768px) {
    .order-list {row-gap: 1.2rem; margin-top: 1.2rem; max-height: calc(100vh - 28.1rem - 14rem); padding: 0 2rem 2.4rem;}
    .order-list > li {row-gap: .8rem;}
}

.buy-wrap {margin-top: 4rem; border-top: 1px solid var(--gray02); padding-top: 2rem; display: flex; flex-flow: column; row-gap: 2rem;}
.buy-wrap .price {display: flex; align-items: center; justify-content: space-between;}
.buy-wrap .price > p {font-size: 1.4rem; line-height: 2rem; font-weight: 600;}
.buy-wrap .price > div {display: flex; align-items: center; column-gap: .4rem; font-size: 2rem; line-height: 2.8rem; font-weight: 600; color: var(--orange);}
.buy-wrap .price > div > span {font-size: 1.4rem; line-height: 2rem;}
.buy-wrap .button {display: flex; align-items: center; column-gap: 1rem;}
.buy-wrap .button button:not(.share) {flex: 1;}
.buy-wrap .button .share {width: 5.6rem!important; height: 5.6rem; min-width: initial; padding: 0;}

@media screen and (max-width: 768px) {
    .buy-wrap {margin-top: 0; padding-top: 1.2rem; row-gap: 1.2rem;}
    .buy-wrap .price {padding: 0 2rem;}
    .buy-wrap .button {background-color: var(--gray03); padding: 1.2rem 2rem;}
}

/* 스토어 > 포토스토어 > 상세 > 옵션 > 결제 */
.receipt-wrap {border: 1px solid var(--gray02); border-radius: 1.2rem; padding: 1.6rem 2rem; display: flex; flex-flow: column; row-gap: .8rem;}
.receipt-wrap > li {display: flex; align-items: center; justify-content: space-between;}
.receipt-wrap > li > p {font-size: 1.4rem; line-height: 2rem; color: var(--body);}
.receipt-wrap > li > span {font-size: 1.4rem; line-height: 2rem; font-weight: 600;}
.receipt-wrap > li.total {margin-top: .4rem; border-top: 1px solid var(--gray02); padding-top: 1.2rem;}
.receipt-wrap > li.total > p {font-size: 1.4rem; line-height: 2rem; font-weight: 600;}
.receipt-wrap > li.total > div {font-size: 2rem; line-height: 2.8rem; font-weight: 600; color: var(--orange); display: flex; align-items: center; column-gap: .4rem;}
.receipt-wrap > li.total > div > span {font-size: 1.4rem; line-height: 2rem;}

.order-prod-list {display: flex; flex-flow: column; row-gap: 2.4rem;}
.order-prod-list > li {display: flex; column-gap: 2rem;}
.order-prod-list > li + li {border-top: 1px solid var(--gray02); padding-top: 2.4rem;}
.order-prod-list > li .img {width: 12rem; height: 12rem; border-radius: .8rem; background-repeat: no-repeat; background-size: cover; background-position: center; box-shadow: 0px 6px 12px 0px rgba(25, 25, 25, 0.05);}
.order-prod-list > li .img.card {height: 19.8rem;}
.order-prod-list > li .info {display: flex; flex-flow: column; row-gap: .8rem; flex: 1;}
.order-prod-list > li .info > p {font-size: 1.4rem; font-weight: 500; line-height: 2rem; word-break: keep-all;}
.order-prod-list > li .info > span {font-size: 1.2rem; line-height: 1.6rem; color: var(--body);}
.order-prod-list > li .info > div {margin-top: .4rem; display: flex; align-items: center; column-gap: .2rem; font-size: 1.4rem; line-height: 2rem; font-weight: 600;}
.order-prod-list > li .info > div > span {font-size: 1.2rem; line-height: 1.6rem;}

.address-info {display: flex; flex-flow: column; row-gap: 2.4rem;}
.address-info > li {display: flex; flex-flow: column; row-gap: 1.2rem;}
.address-info > li > div {display: flex; align-items: center; justify-content: space-between;}
.address-info > li > p {border-radius: .8rem; padding: 1.6rem; background-color: var(--gray03); font-size: 1.4rem; line-height: 2rem;}

ul.address {display: flex; flex-flow: column; row-gap: .8rem;}
ul.address > li {display: flex; align-items: center; column-gap: .8rem;}
ul.address > li > input {width: 100%; height: 4rem; padding: 0 1.2rem; font-size: 1.4rem; border-radius: .8rem; flex: 1;}
ul.address > li > button {width: 10rem; height: 4rem; padding: 0 1.2rem; font-size: 1.4rem; border-radius: .8rem;}

.pay-way {display: grid; grid-template-columns: repeat(2, 1fr);}

/* 스토어 > 포토스토어 > 상세 > 주문완료 */
.order-completed {display: flex; flex-flow: column; row-gap: 2.4rem; width: fit-content; margin: 0 auto; align-items: center;}
.order-completed > p {font-size: 2.4rem; line-height: 3.2rem; font-weight: 600; text-align: center;}
.order-completed > ul {width: 36rem; display: flex; flex-flow: column; row-gap: 2.4rem;}
.order-completed > ul > li {border-top: 1px solid var(--gray02); padding-top: 2.4rem; display: flex; column-gap: 2rem;}
.order-completed > ul > li > p {width: 5rem; font-size: 1.4rem; line-height: 2rem; color: var(--body);}
.order-completed > ul > li > *:not(p) {flex: 1;}
.order-completed > ul > li > span {font-size: 1.4rem; line-height: 2rem;}
.order-completed > ul > li > div {display: flex; align-items: center; column-gap: 2rem;}
.order-completed > ul > li > div .img {width: 9.2rem; height: 9.2rem; border-radius: .8rem; background-repeat: no-repeat; background-size: cover; background-position: center;}
.order-completed > ul > li > div .img.card {width: 9.2rem; height: 15.2rem;}
.order-completed > ul > li > div .info {flex: 1; display: flex; flex-flow: column; row-gap: 1.2rem;}
.order-completed > ul > li > div .info > p {font-size: 1.4rem; font-weight: 500; line-height: 2rem; word-break: keep-all;}
.order-completed > ul > li > div .info > button {width: 100%; height: 4rem; padding: 0 1.2rem; font-size: 1.4rem; border-radius: .8rem;}
.order-completed > span {display: flex; align-items: center; width: 100%; font-size: 1.2rem; line-height: 1.6rem; color: var(--body); column-gap: .4rem;}

@media screen and (max-width: 768px) {
    .order-completed > ul {width: 100%;}
}

/* 스토어 > 포인트카드 */
.pointcard {display: flex; flex-flow: column; border-radius: .8rem; overflow: hidden; border: 1px solid var(--gray02); background-color: var(--white); filter: drop-shadow(0px 6px 12px rgba(25, 25, 25, 0.05));}
.pointcard .img {width: 100%; min-width: 22rem; height: 30rem; border-radius: .8rem .8rem 0 0; background-repeat: no-repeat; background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; position: relative;}
.pointcard .img > i {position: absolute;}
.pointcard .img > button {position: absolute; width: fit-content; height: fit-content; min-width: fit-content; padding: 0; background-color: transparent; top: 1.2rem; right: 1.2rem;}
.pointcard .info {display: flex; align-items: center; justify-content: space-between; padding: 1.2rem;}
.pointcard .info > div {display: flex; flex-flow: column; row-gap: .2rem;}
.pointcard .info > div > span {font-size: 1rem; font-weight: 600; color: var(--disabled); line-height: 1.2rem;}
.pointcard .info > div > p {font-size: 1.8rem; font-weight: 600; line-height: 2.4rem;}
.pointcard .info > i {width: 6.6rem; height: 4rem;}

@media screen and (max-width: 768px) {
    .pointcard .img {min-width: initial; height: 57vw;}
    .pointcard .img > i {width: 10.4rem; height: 6.3rem;}
    .pointcard .info > div > span {display: none;}
    .pointcard .info > i {width: 4rem; height: 2.4rem;}
}

.pointcard.kbl .info > div > p {color: var(--navy);}
.pointcard.kgc .info > div > p  {color: var(--kgc-main);}
.pointcard.lg .info > div > p {color: var(--lg-main);}
.pointcard.sk .info > div > p {color: var(--sk-main);}
.pointcard.hd .info > div > p {color: var(--hd-main);}
.pointcard.sono .info > div > p {color: var(--sono-main);}
.pointcard.kcc .info > div > p  {color: var(--kcc-main);}
.pointcard.db .info > div > p {color: var(--db-main);}
.pointcard.kt .info > div > p {color: var(--kt-main);}
.pointcard.pega .info > div > p {color: var(--pega-main);}
.pointcard.ss .info > div > p {color: var(--ss-main);}

.pointcard-list {display: grid; grid-template-columns: repeat(5, 1fr); grid-gap: 5rem 2rem;}
.pointcard-list > li > a {display: flex; flex-flow: column; row-gap: 2rem;}
.pointcard-list > li > a .desc {display: flex; flex-flow: column; row-gap: 1rem;}
.pointcard-list > li > a .desc > p {font-size: 1.6rem; line-height: 2.4rem; font-weight: 500;}
.pointcard-list > li > a .desc > div {font-size: 1.6rem; font-weight: 600; line-height: 2.4rem; display: flex; align-items: center; column-gap: .2rem;}
.pointcard-list > li > a .desc > div > span {font-size: 1.2rem; line-height: 1.6rem;}

@media screen and (max-width: 768px) {
    .pointcard-list {width: 100%; grid-template-columns: repeat(2, 1fr); grid-gap: 2rem;}
    .pointcard-list > li > a {row-gap: 1.2rem;}
    .pointcard-list > li > a .desc {row-gap: .8rem;}
    .pointcard-list > li > a .desc > p {font-size: 1.4rem; line-height: 2rem;}
    .pointcard-list > li > a .desc > div {font-size: 1.4rem; line-height: 2rem;}
}

/* 스토어 > 옥션 */
.auction-list {display: grid; grid-template-columns: repeat(5, 1fr); grid-gap: 5rem 2rem;}
.auction-list > li > a {display: flex; flex-flow: column; row-gap: 2rem;}
.auction-list > li > a .img {width: 100%; height: 22.4rem; padding: 1rem; border-radius: 1.2rem; background-color: var(--gray03); background-repeat: no-repeat; background-size: 90%; background-position: center; display: flex; flex-flow: column; justify-content: space-between;}
.auction-list > li > a .info > div {font-size: 1.2rem; line-height: 1.6rem; color: var(--body);}
.auction-list > li > a .info > div > span {font-weight: 500;}
.auction-list > li > a .info > p {font-size: 1.6rem; font-weight: 500; line-height: 2.4rem; word-break: keep-all; margin-top: .8rem;}
.auction-list > li > a .info > ul {margin-top: 1.6rem; border-top: 1px solid var(--gray03); padding-top: 1.6rem; display: flex; flex-flow: column; row-gap: .6rem;}
.auction-list > li > a .info > ul > li {display: flex; column-gap: .8rem;}
.auction-list > li > a .info > ul > li > p {width: 4rem; font-size: 1.4rem; line-height: 2rem; color: var(--body);}
.auction-list > li > a .info > ul > li > span {flex: 1; font-size: 1.4rem; line-height: 2rem;}
.auction-list > li > a .info > ul > li > span .font-orange {font-weight: 600;}

@media screen and (max-width: 768px) {
    .auction-list {grid-template-columns: repeat(2, 1fr); grid-gap: 2rem;}
    .auction-list > li > a {row-gap: 1.2rem;}
    .auction-list > li > a .img {height: 16.4rem; padding: .8rem;}
    .auction-list > li > a .info > p {font-size: 1.4rem; line-height: 2rem; margin-top: .4rem;}
    .auction-list > li > a .info > ul {margin-top: .8rem; padding-top: .8rem; row-gap: .4rem;}
    .auction-list > li > a .info > ul > li {column-gap: .4rem;}
    .auction-list > li > a .info > ul > li > p {font-size: 1.2rem; line-height: 1.6rem;}
    .auction-list > li > a .info > ul > li > span {font-size: 1.2rem; line-height: 1.6rem;}
}

.auction-address {margin-top: 2rem; display: flex; flex-flow: column; row-gap: 1.6rem;}
.auction-address > li {display: flex; flex-flow: column; row-gap: .8rem;}
.auction-address > li > p {font-size: 1.4rem; font-weight: 500;}
.auction-address > li > * {width: 100%;}

.auction-account {border: 1px solid var(--gray02); border-radius: 1.2rem; padding: 2rem; display: flex; flex-flow: column; row-gap: 1.6rem; margin-top: 2rem;}
.auction-account > li {display: flex; align-items: center; justify-content: space-between;}
.auction-account > li > p {font-size: 1.4rem; color: var(--body);}
.auction-account > li > span {font-size: 1.4rem;}
.auction-account > li .font-red {display: flex; align-items: center; column-gap: .4rem;}

.auction-option {margin-top: 2rem; display: flex; flex-flow: column; row-gap: 2rem;}
.auction-option > li {border-radius: .8rem; background-color: var(--gray03); padding: 1.6rem; display: flex; align-items: center; justify-content: space-between;}
.auction-option > li > p {font-size: 1.4rem; line-height: 2rem;}
.auction-option > li > span {font-size: 1.4rem; line-height: 2rem; font-weight: 600;}
.auction-option > li > div {display: flex; flex-flow: column; row-gap: 1.2rem;}
.auction-option > li > div .num-count {grid-template-columns: 4rem 15rem 4rem;}
.auction-option > li > div .price {display: flex; align-items: center; column-gap: .8rem;}
.auction-option > li > div .price > li  {width: calc((100% - 2.4rem) / 4);}
.auction-option > li > div .price > li > button {width: 100%; min-width: initial; height: 3.2rem; padding: 0; font-size: 1.4rem; border-radius: .6rem;}

.auction-account + .buy-wrap,
.auction-address + .buy-wrap,
.auction-option + .buy-wrap {margin-top: 2rem; border-top: 0; padding-top: 0;}

@media screen and (max-width: 768px) {
    .auction-address,
    .auction-option {margin-top: 0; padding: 0 2rem;}

    .auction-account {margin: 2rem 2rem 0;}
}

.auction-table {max-height: 40rem; overflow-y: auto;}
.auction-table table::before {content: none;}
.auction-table thead {position: sticky; position: -webkit-sticky; top: 0;}
.auction-table thead::before {content: ''; width: 100%; height: 1px; background-color: var(--disabled); position: absolute; top: 0; left: 0; z-index: 10;}
.auction-table thead::after {content: ''; width: 100%; height: 1px; background-color: var(--gray02); position: absolute; bottom: 0; left: 0; z-index: 10;}
.auction-table thead th {position: relative;}
.auction-table thead th:nth-child(1):before {content: ''; width: 1px; height: 100%; background-color: var(--gray02); position: absolute; top: 0; right: -.1rem; z-index: 10;}

@media screen and (max-width: 768px) {
    .auction-table {max-height: 22rem;}
}

/* 스토어내역 */
.store-history {display: flex; flex-flow: column; row-gap: 2.4rem;}
.store-history > li {display: flex; align-items: center; column-gap: 2rem; padding-bottom: 2.4rem; border-bottom: 1px solid var(--gray02);}
.store-history > li .img {width: 12rem; height: 12rem; border-radius: .8rem; background-repeat: no-repeat; background-size: cover; background-position: center; box-shadow: 0px 6px 12px 0px rgba(25, 25, 25, 0.05);}
.store-history > li .img.card {height: 19.8rem;}
.store-history > li .desc {flex: 1; display: flex; flex-flow: column;}
.store-history > li .desc .info {display: flex; align-items: center; column-gap: 1rem; margin-bottom: 1.2rem;}
.store-history > li .desc .info > ul {display: flex; align-items: center; column-gap: .6rem;}
.store-history > li .desc .info > ul > li {display: flex; align-items: center; column-gap: .6rem; font-size: 1.2rem; line-height: 1.6rem; color: var(--body);}
.store-history > li .desc .info > ul > li + li::before {content: ''; width: 1px; height: 1.2rem; background-color: var(--gray01);}
.store-history > li .desc .info > ul > li > span {font-weight: 600; color: var(--subheadline);}
.store-history > li .desc > p {font-size: 1.6rem; line-height: 2.4rem; font-weight: 500; word-break: keep-all;}
.store-history > li .desc .price {margin-top: 3.2rem; display: flex; align-items: center; justify-content: space-between;}
.store-history > li .desc .price > div {font-size: 1.6rem; font-weight: 600; line-height: 2.4rem; display: flex; align-items: center; column-gap: .2rem;}
.store-history > li .desc .price > div > span {font-size: 1.2rem; line-height: 1.6rem;}
.store-history > li .desc .price .label.mobile {display: none;}
.store-history > li .button {width: 21rem; display: flex; align-items: center; column-gap: 1rem;}
.store-history > li .button > button {flex: 1; min-width: initial; height: 4rem; padding: 0 1.2rem; font-size: 1.4rem; border-radius: .8rem;}

@media screen and (max-width: 768px) {
    .store-history > li {flex-wrap: wrap; grid-gap: 2rem; align-items: initial;}
    .store-history > li .desc .info .label.desktop {display: none;}
    .store-history > li .desc .info > ul {flex-flow: column; align-items: initial; row-gap: .4rem;}
    .store-history > li .desc .info > ul > li + li::before {content: none;}
    .store-history > li .desc > p {font-size: 1.4rem; line-height: 2rem;}
    .store-history > li .desc .price {margin-top: 1.2rem;}
    .store-history > li .desc .price > div {font-size: 1.4rem; line-height: 2rem;}
    .store-history > li .desc .price .label.mobile {display: flex;}
    .store-history > li .button {width: calc(100% - 12rem - 2rem); margin-left: auto;}
}

/* 장바구니 */
.cart-list {display: flex; flex-flow: column; row-gap: 2.4rem;}
.cart-list > li {display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--gray02); padding-bottom: 2.4rem; column-gap: 4rem;}
.cart-list > li.all {background-color: var(--gray03); padding: 1.2rem 2rem; border-bottom: 0;}
.cart-list > li.all > button {height: 3.2rem; padding: 0 1.2rem; font-size: 1.4rem; border-radius: .6rem;}
.cart-list > li input + label {column-gap: 2rem; flex: 1; align-items: initial;}
.cart-list > li input + label::before {margin-right: -.4rem;}
.cart-list > li .img {width: 12rem; height: 12rem; border-radius: .8rem; background-repeat: no-repeat; background-size: cover; background-position: center; box-shadow: 0px 6px 12px 0px rgba(25, 25, 25, 0.05);}
.cart-list > li .img.card {height: 19.8rem;}
.cart-list > li .info {display: flex; flex-flow: column;}
.cart-list > li .info > p {font-size: 1.6rem; font-weight: 500; line-height: 2.4rem; word-break: keep-all; margin-bottom: 1.2rem;}
.cart-list > li .info > span {font-size: 1.2rem; line-height: 1.6rem; color: var(--body);}
.cart-list > li .info > div {display: flex; align-items: center; column-gap: .2rem; font-size: 1.6rem; line-height: 2.4rem; font-weight: 600; margin-top: 4rem;}
.cart-list > li .info > div > span {font-size: 1.2rem; line-height: 1.6rem;}

@media screen and (max-width: 768px) {
    .cart-list {margin: -2.4rem -2rem 0;}
    .cart-list > li {margin: 0 2rem; flex-flow: column; align-items: flex-end;}
    .cart-list > li:last-child {border-bottom: 0; padding-bottom: 0;}
    .cart-list > li.all {margin: 0;}
    .cart-list > li input + label {width: 100%;}
    .cart-list > li .info {flex: 1;}
    .cart-list > li .info > p {font-size: 1.4rem; line-height: 2rem; margin-bottom: .8rem;}
    .cart-list > li .info > div {font-size: 1.4rem; line-height: 2rem; margin-top: 1.2rem;}
    .cart-list > li .num-count {width: calc(100% - 2rem - 1.6rem - 12rem - 2rem); grid-template-columns: 4rem auto 4rem;}
}

.cart-receipt {margin-top: 5rem; display: flex; flex-flow: column;}
.cart-receipt .receipt-wrap {width: 36rem; margin: 0 auto; background-color: var(--gray03); border: 0;}
.cart-receipt .receipt-wrap > li > p {color: var(--black);}
.cart-receipt .receipt-total {width: 36rem; margin: 2rem auto 0; display: flex; align-items: center; justify-content: space-between;}
.cart-receipt .receipt-total > p {font-size: 1.4rem; line-height: 2rem; font-weight: 600;}
.cart-receipt .receipt-total > div {display: flex; align-items: center; column-gap: .2rem; font-size: 2rem; line-height: 2.8rem; font-weight: 600; color: var(--orange);}
.cart-receipt .receipt-total > div > span {font-size: 1.4rem; line-height: 2rem;}
.cart-receipt .btn-wrap {position: relative;}
.cart-receipt .btn-wrap > div {display: flex; align-items: center; column-gap: 1.2rem;}
.cart-receipt .btn-wrap > div > button {min-width: 14rem;}
.cart-receipt .btn-wrap > button {position: absolute; right: 1.2rem;}

@media screen and (max-width: 768px) {
    .cart-receipt {margin-top: 3.2rem;}
    .cart-receipt .receipt-wrap {width: 100%;}
    .cart-receipt .receipt-total {width: 100%;}
    .cart-receipt .btn-wrap > div {width: 100%;}
    .cart-receipt .btn-wrap > div > button {min-width: calc((100% - 1.2rem) / 2);}
    .cart-receipt .btn-wrap > button {display: none;}
}

/* 마이페이지 */
.mypage-summary.mobile {display: none;}

.mypage-summary.desktop {display: flex; column-gap: 4rem; align-items: flex-start;}
.mypage-summary .my {flex: 1; background-color: var(--gray03); border-radius: 1.2rem; padding: 2rem; display: flex; flex-flow: column; row-gap: 2.4rem; height: 35.9rem;}
.mypage-summary .my > div {display: flex; align-items: center; column-gap: 2rem;}
.mypage-summary .my > div .team {width: 6.4rem; height: 6.4rem; background-color: var(--white); border-radius: 100%; display: flex; align-items: center;  justify-content: center;}
.mypage-summary .my > div .team > i {width: 4.6rem; height: 4.6rem;}
.mypage-summary .my > div .desc {display: flex; flex-flow: column; row-gap: .8rem;}
.mypage-summary .my > div .desc > div {display: flex; align-items: center; column-gap: .4rem;}
.mypage-summary .my > div .desc > div > p {font-size: 2rem; font-weight: 600; line-height: 2.8rem;}
.mypage-summary .my > div .desc > div > button {width: fit-content; height: fit-content; min-width: fit-content; padding: 0; background-color: transparent;}
.mypage-summary .my > div .desc > p {font-size: 1.4rem; line-height: 2rem; font-weight: 500; color: var(--subheadline);}
.mypage-summary .my > p {height: 3.2rem; display: flex; align-items: center; justify-content: space-between; font-size: 1.4rem; line-height: 2rem; color: var(--body);}
.mypage-summary .my > p > button {width: fit-content; height: fit-content; min-width: fit-content; padding: 0; background-color: transparent;}
.mypage-summary .my .ticket {display: flex; align-items: center; grid-gap: 1rem;}
.mypage-summary .my .ticket > li {border-radius: .4rem; height: 3.2rem; display: flex; align-items: center; column-gap: 1rem; padding: 0 .8rem 0 .4rem; position: relative;}
.mypage-summary .my .ticket > li::before {content: ''; width: .6rem; height: .6rem; border-radius: 100%; position: absolute; left: 2.8rem; top: -.3rem;}
.mypage-summary .my .ticket > li::after {content: ''; width: .6rem; height: .6rem; border-radius: 100%; position: absolute; left: 2.8rem; bottom: -.3rem;}
.mypage-summary .my .ticket > li > p {font-size: 1.2rem; line-height: 1.6rem; color: var(--white);}
.mypage-summary .my .ticket > li > i.lg {background-image: url(../img/ico/logo/ic-lg-dark.svg);}
.mypage-summary .my .ticket > li > i.kgc {background-image: url(../img/ico/logo/ic-kgc-dark-line.svg);}
.mypage-summary .my .per {border-top: 1px dashed var(--gray02); padding-top: 2.8rem; margin-top: .4rem; height: 10.7rem; display: flex; align-items: center; justify-content: center;}
.mypage-summary .my .per > li {display: flex; flex-flow: column; align-items: center; justify-content: center; row-gap: .8rem;}
.mypage-summary .my .per > li > p {text-align: center; font-size: 1.4rem; font-weight: 500; color: var(--subheadline);}
.mypage-summary .my .per > li > div {display: flex; flex-flow: column; align-items: center; justify-content: center; row-gap: .4rem;}
.mypage-summary .my .per > li > div > p {text-align: center; font-size: 2.4rem; line-height: 3.2rem; font-weight: 600;}
.mypage-summary .my .per > li > div > span {text-align: center; font-size: 1.4rem; color: var(--disabled); line-height: 2rem;}
.mypage-summary .my > button {width: 100%;}

@media screen and (max-width: 768px) {
    .mypage-summary.desktop {display: none;}

    .mypage-summary.mobile {display: flex; flex-flow: column; row-gap: 2.4rem;}
    .mypage-summary .my {width: 100%; padding: 2rem; flex-flow: row; flex-wrap: wrap; justify-content: space-between; grid-gap: 2rem; height: fit-content;}
    .mypage-summary .my > div {width: fit-content; column-gap: 1.6rem;}
    .mypage-summary .my > div .team {width: 4.8rem; height: 4.8rem;}
    .mypage-summary .my > div .team > i {width: 3.2rem; height: 3.2rem;}
    .mypage-summary .my > div .desc {row-gap: .4rem;}
    .mypage-summary .my > div .desc > div > p {font-size: 1.6rem; line-height: 2.4rem;}
    .mypage-summary .my > div .desc > p {font-size: 1.2rem; line-height: 1.6rem;}
    .mypage-summary .my > a {padding: .8rem 1rem; border-radius: .8rem; background-color: var(--white); border: 1px solid var(--gray02); display: flex; flex-flow: column; align-items: center; justify-content: center; row-gap: .4rem;}
    .mypage-summary .my > a > p {display: flex; align-items: center; font-size: 1.2rem; font-weight: 500; color: var(--body); padding-left: 1.2rem;}
    .mypage-summary .my > a > span {font-size: 1.4rem; font-weight: 600;}
}

.mypage-summary .my.kbl {background-color: var(--gray03);}
.mypage-summary .my.kgc {background-color: var(--kgc-sub);}
.mypage-summary .my.sono {background-color: var(--sono-sub);}
.mypage-summary .my.lg {background-color: var(--lg-sub);}
.mypage-summary .my.sk {background-color: var(--sk-sub);}
.mypage-summary .my.hd {background-color: var(--hd-sub);}
.mypage-summary .my.kcc {background-color: var(--kcc-sub);}
.mypage-summary .my.db {background-color: var(--db-sub);}
.mypage-summary .my.kt {background-color: var(--kt-sub);}
.mypage-summary .my.pega {background-color: var(--pega-sub);}
.mypage-summary .my.ss {background-color: var(--ss-sub);}

.mypage-summary .my .ticket > li.kgc  {background-color: var(--kgc-main);}
.mypage-summary .my .ticket > li.lg {background-color: var(--lg-main);}
.mypage-summary .my .ticket > li.sk {background-color: var(--sk-main);}
.mypage-summary .my .ticket > li.hd {background-color: var(--hd-main);}
.mypage-summary .my .ticket > li.sono {background-color: var(--sono-main);}
.mypage-summary .my .ticket > li.kcc  {background-color: var(--kcc-main);}
.mypage-summary .my .ticket > li.db {background-color: var(--db-main);}
.mypage-summary .my .ticket > li.kt {background-color: var(--kt-main);}
.mypage-summary .my .ticket > li.pega {background-color: var(--pega-main);}
.mypage-summary .my .ticket > li.ss {background-color: var(--ss-main);}

.mypage-summary .my.kgc .ticket > li::before {background-color: var(--kgc-sub);}
.mypage-summary .my.kgc .ticket > li::after {background-color: var(--kgc-sub);}
.mypage-summary .my.sono .ticket > li::before {background-color: var(--sono-sub);}
.mypage-summary .my.sono .ticket > li::after {background-color: var(--sono-sub);}
.mypage-summary .my.lg .ticket > li::before {background-color: var(--lg-sub);}
.mypage-summary .my.lg .ticket > li::after {background-color: var(--lg-sub);}
.mypage-summary .my.sk .ticket > li::before {background-color: var(--sk-sub);}
.mypage-summary .my.sk .ticket > li::after {background-color: var(--sk-sub);}
.mypage-summary .my.hd .ticket > li::before {background-color: var(--hd-sub);}
.mypage-summary .my.hd .ticket > li::after {background-color: var(--hd-sub);}
.mypage-summary .my.kcc .ticket > li::before {background-color: var(--kcc-sub);}
.mypage-summary .my.kcc .ticket > li::after {background-color: var(--kcc-sub);}
.mypage-summary .my.db .ticket > li::before {background-color: var(--db-sub);}
.mypage-summary .my.db .ticket > li::after {background-color: var(--db-sub);}
.mypage-summary .my.kt .ticket > li::before {background-color: var(--kt-sub);}
.mypage-summary .my.kt .ticket > li::after {background-color: var(--kt-sub);}
.mypage-summary .my.pega .ticket > li::before {background-color: var(--pega-sub);}
.mypage-summary .my.pega .ticket > li::after {background-color: var(--pega-sub);}
.mypage-summary .my.ss .ticket > li::before {background-color: var(--ss-sub);}
.mypage-summary .my.ss .ticket > li::after {background-color: var(--ss-sub);}

.mypage-summary > .info {width: 42.8rem; display: flex; align-items: flex-start; column-gap: 2rem;}
.mypage-summary > .info .card {width: 22rem; display: flex; flex-flow: column; row-gap: 2rem; align-items: center;}
.mypage-summary > .info .card .pointcard .img {height: 29.3rem;}
.mypage-summary > .info .card .card-option {width: 100%; position: relative;}
.mypage-summary > .info .card .card-option > button {position: absolute; width: fit-content; height: fit-content; min-width: fit-content; padding: 0; background-color: transparent; top: 1.2rem; right: 1.2rem;}
.mypage-summary > .info .card > button {width: fit-content; height: fit-content; min-width: fit-content; padding: 0; background-color: transparent; font-size: 1.2rem; line-height: 1.6rem; color: var(--subheadline); text-decoration: underline;}

.mypage-summary > .info .menu {flex: 1; background-color: var(--gray03); border-radius: 1.2rem; padding: 2.4rem; display: flex; flex-flow: column; justify-content: space-between; height: 35.9rem;}
.mypage-summary > .info .menu > li > a {display: flex; align-items: center; column-gap: .8rem; font-size: 1.6rem; font-weight: 500; line-height: 2.4rem;}
.mypage-summary > .info .menu > li > button {width: 100%;}
.mypage-summary > .info .menu > li:nth-last-child(2) {margin-top: 1.2rem; margin-bottom: -1.2rem;}

@media screen and (max-width: 768px) {
    .mypage-summary .card-swiper-wrap {width: 100vw; margin: 0 -2rem;}
    .mypage-summary .card-swiper-wrap .card-swiper.swiper {padding: 0 2rem;}
    .mypage-summary .card-swiper-wrap .card-swiper.swiper .swiper-slide {display: flex; flex-flow: column; align-items: center; row-gap: 2.4rem; width: fit-content;}
    .mypage-summary .card-swiper-wrap .card-swiper.swiper .swiper-slide .pointcard .img {width: 100%; min-width: 22rem; height: 30rem;}
    .mypage-summary .card-swiper-wrap .card-swiper.swiper .swiper-slide .pointcard .img > i {width: 13.2rem; height: 8rem;}
    .mypage-summary .card-swiper-wrap .card-swiper.swiper .swiper-slide .pointcard .info > div > span {display: block;}
    .mypage-summary .card-swiper-wrap .card-swiper.swiper .swiper-slide .pointcard .info > i {width: 6.6rem; height: 4rem;}
    .mypage-summary .card-swiper-wrap .card-swiper.swiper .swiper-slide > button {width: fit-content; height: fit-content; min-width: fit-content; padding: 0; background-color: transparent; font-size: 1.2rem; line-height: 1.6rem; color: var(--subheadline); text-decoration: underline;}

    .mypage-summary .info-wrap {display: flex; flex-flow: column; row-gap: 4rem;}
    .mypage-summary .info-wrap > div {display: flex; align-items: center; column-gap: 1.2rem; justify-content: center;}
    .mypage-summary .info-wrap > div > button {flex: 1;}
    .mypage-summary .info-wrap > ul {display: grid; grid-template-columns: repeat(4, 1fr); background-color: var(--gray03); border-radius: 1.2rem; padding: 2rem 1.2rem;}
    .mypage-summary .info-wrap > ul > li {position: relative; display: flex; align-items: center;}
    .mypage-summary .info-wrap > ul > li + li::before {content: ''; width: 1px; height: 2.4rem; background-color: var(--gray02); position: absolute; left: 0;}
    .mypage-summary .info-wrap > ul > li > a {display: flex; flex-flow: column; row-gap: .8rem; font-size: 1.2rem; font-weight: 500; align-items: center; width: fit-content; margin: 0 auto;}
}

.my-team-wrap {display: flex; align-items: center; column-gap: 2rem;}
.my-team-wrap .desc {display: flex; align-items: center; column-gap: .8rem;}
.my-team-wrap .desc > li > div {display: flex; flex-flow: column; align-items: center; justify-content: center; row-gap: 1rem; border-radius: 1.2rem; padding: 1.6rem; width: 15.2rem; height: 14.4rem;}
.my-team-wrap .desc > li > div > i {width: 12rem; height: 7.2rem;}
.my-team-wrap .desc > li > div > i + p {font-weight: 500;}
.my-team-wrap .desc > li > div > p {text-align: center; font-size: 1.4rem; line-height: 1rem; color: var(--white);}
.my-team-wrap .desc > li > div > ul {display: flex; flex-flow: column; row-gap: .8rem;}
.my-team-wrap .desc > li > div > ul > li {display: flex; align-items: center; column-gap: .8rem; font-size: 1.4rem; font-weight: 600; color: var(--white);}
.my-team-wrap .desc > li > div > ul > li > div {width: 2.4rem; height: 2.4rem; background-color: var(--white); display: flex; align-items: center; justify-content: center; border-radius: 100%;}
.my-team-wrap .desc > li > div > ul > li > div.win {color: var(--orange);}
.my-team-wrap .desc > li > div > ul > li > div.lose {color: var(--disabled);}
.my-team-wrap .desc > li > div > ul > li > div.draw {color: var(--disabled);}

.my-team-wrap .desc > li > div > i.lg {background-image: url(../img/logo/logo-lg-dark.svg);}
.my-team-wrap .desc > li > div > i.kgc {background-image: url(../img/logo/logo-kgc-dark-line.svg);}

@media screen and (max-width: 768px) {
    .my-team-wrap.desktop {display: none;}
}

.my-team-wrap.kgc .desc > li > div {background-color: var(--kgc-main);}
.my-team-wrap.lg .desc > li > div {background-color: var(--lg-main);}
.my-team-wrap.sk .desc > li > div {background-color: var(--sk-main);}
.my-team-wrap.hd .desc > li > div {background-color: var(--hd-main);}
.my-team-wrap.sono .desc > li > div {background-color: var(--sono-main);}
.my-team-wrap.kcc .desc > li > div {background-color: var(--kcc-main);}
.my-team-wrap.db .desc > li > div {background-color: var(--db-main);}
.my-team-wrap.kt .desc > li > div {background-color: var(--kt-main);}
.my-team-wrap.pega .desc > li > div {background-color: var(--pega-main);}
.my-team-wrap.ss .desc > li > div {background-color: var(--ss-main);}

.my-team-wrap .info {flex: 1; height: 14.4rem; border-radius: 1.2rem; display: flex; align-items: center; justify-content: center; column-gap: 3.2rem;}
.my-team-wrap .info > li {width: 4rem; display: flex; flex-flow: column; row-gap: .4rem; align-items: center;}
.my-team-wrap .info > li > p {font-size: 1.4rem; line-height: 2rem; color: rgba(255,255,255,.75);}
.my-team-wrap .info > li > span {font-size: 2rem; line-height: 2.8rem; font-weight: 600; color: var(--white);}

.my-team-wrap.kgc .info {background-color: var(--kgc-main);}
.my-team-wrap.lg .info {background-color: var(--lg-main);}
.my-team-wrap.sk .info {background-color: var(--sk-main);}
.my-team-wrap.hd .info {background-color: var(--hd-main);}
.my-team-wrap.sono .info {background-color: var(--sono-main);}
.my-team-wrap.kcc .info {background-color: var(--kcc-main);}
.my-team-wrap.db .info {background-color: var(--db-main);}
.my-team-wrap.kt .info {background-color: var(--kt-main);}
.my-team-wrap.pega .info {background-color: var(--pega-main);}
.my-team-wrap.ss .info {background-color: var(--ss-main);}

.fav-match-swiper-wrap {position: relative; display: flex; align-items: center;}
.fav-match-swiper-wrap .empty {width: 100%; height: 22rem;}
.fav-match-swiper.swiper {width: 100%;}
.fav-match-swiper.swiper .swiper-slide {padding: 1.6rem; display: flex; flex-flow: column; row-gap: 1.2rem; background-color: var(--white); border: 1px solid var(--gray02); border-radius: 1.2rem; filter: drop-shadow(0px 6px 12px rgba(25, 25, 25, 0.05));}
.swiper-wrapper:empty ~ .swiper-button {display: none;}
.fav-match-swiper.swiper .swiper-slide .info {display: flex; align-items: center; justify-content: space-between; margin-bottom: -.4rem;}
.fav-match-swiper.swiper .swiper-slide .info > p {font-size: 1.2rem; line-height: 1.6rem; color: var(--subheadline);}
.fav-match-swiper.swiper .swiper-slide .info > div {display: flex; align-items: center; column-gap: 1.6rem;}
.fav-match-swiper.swiper .swiper-slide .info > div > button {width: fit-content; height: fit-content; min-width: fit-content; padding: 0; background-color: transparent;}
.fav-match-swiper.swiper .swiper-slide .versus {display: flex; flex-flow: column; row-gap: .4rem;}
.fav-match-swiper.swiper .swiper-slide .versus > li {display: flex; align-items: center; justify-content: space-between;}
.fav-match-swiper.swiper .swiper-slide .versus > li > div .team-name {column-gap: .8rem;}
.fav-match-swiper.swiper .swiper-slide .versus > li > div .team-name > i {width: 3.2rem; height: 3.2rem;}
.fav-match-swiper.swiper .swiper-slide .versus > li > p {text-align: right; font-size: 1.4rem; line-height: 2rem; color: var(--disabled); font-weight: 600;}
.fav-match-swiper.swiper .swiper-slide .desc {display: flex; align-items: center; justify-content: space-between;}
.fav-match-swiper.swiper .swiper-slide .desc .channel {display: flex; align-items: center; column-gap: .8rem;}
.fav-match-swiper.swiper .swiper-slide .desc .channel img {height: 1.2rem;}
.fav-match-swiper.swiper .swiper-slide .desc .channel > p {font-size: 1.4rem; line-height: 2.4rem; flex: 1; color: var(--subheadline);}
.fav-match-swiper.swiper .swiper-slide .button {border-top: 1px solid var(--gray02); padding-top: 1.2rem; display: flex; align-items: center; column-gap: .8rem;}
.fav-match-swiper.swiper .swiper-slide .button > button {height: 3.2rem; padding: 0; font-size: 1.4rem; border-radius: .6rem; flex: 1; }

@media screen and (max-width: 768px) {
    .fav-match-swiper-wrap {width: 100vw; margin: 0 -2rem;}
    .fav-match-swiper.swiper {padding: 0 2rem;}
    .fav-match-swiper.swiper .swiper-slide {width: 26rem;}
}

/* 마이페이지 > 알림(모바일) */
.mobile-notice {width: 100vw; height: 100vh; background-color: var(--white); position: fixed; top: 0; left: 0; z-index: 1000;}
.mobile-notice .title {height: 5.6rem; display: flex; align-items: center; justify-content: space-between; padding: 0 2.4rem; margin-bottom: 0;}
.mobile-notice .title > h2 {font-size: 2rem; font-weight: 600;}

.mobile-notice .notice-type {width: 100%; background-color: var(--gray03); padding: 1.2rem 2rem;}
.mobile-notice .notice-type > select {width: 100%;}

.mobile-notice .notice-list {display: flex; flex-flow: column; padding: 0 2rem; height: calc(100vh - 5.6rem - 6.4rem - 8rem); overflow-y: auto;}
.mobile-notice .notice-list > li {padding: 2.4rem 0; display: flex; flex-flow: column; row-gap: 1.2rem;}
.mobile-notice .notice-list > li + li {border-top: 1px solid var(--gray02);}
.mobile-notice .notice-list > li > div {display: flex; flex-flow: column; row-gap: 1.2rem;}
.mobile-notice .notice-list > li > div > p {font-size: 1.6rem; line-height: 2.4rem; font-weight: 600; word-break: keep-all;}
.mobile-notice .notice-list > li > div > span {font-size: 1.4rem; line-height: 2rem; color: var(--subheadline); word-break: keep-all;}
.mobile-notice .notice-list > li > a {font-size: 1.4rem; line-height: 2rem; color: var(--subheadline); word-break: keep-all;}
.mobile-notice .notice-list > li > span {font-size: 1.2rem; line-height: 1.6rem; color: var(--body);}

.mobile-notice .btn-wrap {margin: 0;}

/* 마이페이지 > 앱설정(모바일) */
.mobile-setting {width: 100vw; height: 100vh; background-color: var(--white); position: fixed; top: 0; left: 0; z-index: 1000;}
.mobile-setting .title {height: 5.6rem; display: flex; align-items: center; justify-content: space-between; padding: 0 2.4rem; margin-bottom: 0;}
.mobile-setting .title > h2 {font-size: 2rem; font-weight: 600;}
.mobile-setting .cont-box {height: calc(100vh - 5.6rem - 8rem); overflow-y: auto;}
.mobile-setting .cont-box .box {padding: 0 2rem;}

.mobile-setting .app-version {height: 6.4rem; padding: 0 2rem; display: flex; align-items: center; justify-content: space-between; background-color: var(--gray03); margin-bottom: 2.4rem;}
.mobile-setting .app-version > p {font-size: 1.6rem; font-weight: 600; line-height: 2.4rem;}
.mobile-setting .app-version > div {display: flex; align-items: center; column-gap: 1.6rem;}
.mobile-setting .app-version > div > span {font-size: 1.4rem; color: var(--subheadline);}

.mobile-setting .setting-menu {display: flex; flex-flow: column;}
.mobile-setting .setting-menu > li {padding: 1.6rem 0; display: flex; align-items: center; flex-wrap: wrap; row-gap: 1.6rem; justify-content: space-between; border-bottom: 1px solid var(--gray02);}
.mobile-setting .setting-menu > li > p {font-size: 1.6rem; color: var(--subheadline);}
.mobile-setting .setting-menu > li > button {width: fit-content; min-width: fit-content; height: fit-content; padding: 0; background-color: transparent;}
.mobile-setting .setting-menu > li > ul {display: none; flex-flow: column; width: 100vw; background-color: var(--gray03); padding: 0 2rem; margin: 0 -2rem -1.6rem; position: relative;}
.mobile-setting .setting-menu > li > ul::after {content: ''; width: 100%; height: 1px; background-color: var(--white); position: absolute; left: 0; bottom: -1px; z-index: 10;}
.mobile-setting .setting-menu > li > ul > li {padding: 1.2rem 0; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; row-gap: 1.2rem;}
.mobile-setting .setting-menu > li > ul > li > p {font-size: 1.6rem; font-weight: 500; color: var(--subheadline);}
.mobile-setting .setting-menu > li > ul > li > div {display: flex; align-items: center; column-gap: 1.6rem;}
.mobile-setting .setting-menu > li > ul > li > div > button {width: fit-content; min-width: fit-content; height: fit-content; padding: 0; background-color: transparent;}
.mobile-setting .setting-menu > li > ul > li > ul {width: 100%; display: none; flex-flow: column;}
.mobile-setting .setting-menu > li > ul > li > ul > li {height: 4.8rem; display: flex; align-items: center;}

.mobile-setting .setting-menu > li.active > button > .ic-arrow-down-24,
.mobile-setting .setting-menu > li > ul > li.active > div > button > .ic-arrow-down-24 {background-image: url(../img/ico/ic-arrow-up-24.svg);}
.mobile-setting .setting-menu > li.active > ul,
.mobile-setting .setting-menu > li > ul > li.active > ul {display: flex;}

.mobile-setting .btn-wrap {margin: 0;}

/* 마이페이지 > (팝업)MY TEAM 설정 */
.my-team-current {height: 4rem; border-radius: .8rem; display: flex; align-items: center; justify-content: center; column-gap: .8rem;}
.my-team-current > i {width: 3.2rem; height: 3.2rem;}
.my-team-current > p {font-size: 1.4rem; line-height: 2rem; font-weight: 500;}

.my-team-current.kbl {background-color: var(--gray03);}
.my-team-current.kgc {background-color: var(--kgc-sub);}
.my-team-current.sono {background-color: var(--sono-sub);}
.my-team-current.lg {background-color: var(--lg-sub);}
.my-team-current.sk {background-color: var(--sk-sub);}
.my-team-current.hd {background-color: var(--hd-sub);}
.my-team-current.kcc {background-color: var(--kcc-sub);}
.my-team-current.db {background-color: var(--db-sub);}
.my-team-current.kt {background-color: var(--kt-sub);}
.my-team-current.pega {background-color: var(--pega-sub);}
.my-team-current.ss {background-color: var(--ss-sub);}

.my-team-current.kbl {color: var(--body);}
.my-team-current.kgc  {color: var(--kgc-main);}
.my-team-current.lg {color: var(--lg-main);}
.my-team-current.sk {color: var(--sk-main);}
.my-team-current.hd {color: var(--hd-main);}
.my-team-current.sono {color: var(--sono-main);}
.my-team-current.kcc  {color: var(--kcc-main);}
.my-team-current.db {color: var(--db-main);}
.my-team-current.kt {color: var(--kt-main);}
.my-team-current.pega {color: var(--pega-main);}
.my-team-current.ss {color: var(--ss-main);}

.my-team-setting {width: calc(100% + 4rem); height: calc(46.4rem - 2.4rem - 7.6rem - 4rem - 3.6rem); margin: 0 -2rem -2.4rem; display: flex; flex-flow: column; overflow-y: auto;}
.my-team-setting > li > input + label {height: 6rem; padding: 0 2rem; display: flex; align-items: center; justify-content: space-between; flex-flow: row-reverse;}
.my-team-setting > li > input + label > div {display: flex; align-items: center; column-gap: .8rem;}
.my-team-setting > li > input + label > div > div {width: 3.2rem; height: 3.2rem; background-color: var(--gray03); border-radius: 100%; display: flex; align-items: center; justify-content: center;}
.my-team-setting > li > input + label > div > p {font-size: 1.4rem; line-height: 2rem;}
.my-team-setting > li > input + label::before {width: 2.4rem; height: 2.4rem; background-image: none;}

.my-team-setting > li:hover > input + label,
.my-team-setting > li > input:checked + label {background-color: var(--gray03);}
.my-team-setting > li > input:checked + label::before {background-image: url(../img/ico/ic-check-24.svg);}

@media screen and (max-width: 768px) {
    .my-team-setting {height: calc(46.4rem - 2.4rem - 7.6rem - 2.4rem - 3.6rem);}
}

/* 마이페이지 > MY PLAYER */
.my-player-wrap > ul {display: grid; grid-template-columns: repeat(5, 1fr); column-gap: 1.2rem;}
.my-player-wrap > ul > li {width: 100%; height: 19rem; border-radius: 1rem; display: flex; flex-flow: column; row-gap: .6rem; overflow: hidden; background-color: var(--gray03); position: relative;}
.my-player-wrap > ul > li .name {display: flex; align-items: center; column-gap: .8rem; padding: 1.2rem .8rem 0;}
.my-player-wrap > ul > li .name > i {width: 3.2rem; height: 3.2rem;}
.my-player-wrap > ul > li .name > p {flex: 1; font-size: 1.6rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.my-player-wrap > ul > li .img {width: 100%; height: 14rem; overflow: hidden; display: flex; align-items: flex-start; justify-content: center;}
.my-player-wrap > ul > li .img > img {width: 100%;}
.my-player-wrap > ul > li:not(.add) > button {position: absolute; left: 0; bottom: 0; width: 100%; border-radius: 0; background: rgba(25, 25, 25, 0.25); backdrop-filter: blur(.25rem); color: var(--white); height: 4rem; padding: 0 1.2rem; font-size: 1.4rem;}
.my-player-wrap > ul > li.add > button {width: 100%; min-width: initial; height: 100%; flex-flow: column; row-gap: 3.2rem; padding: 0; background-color: transparent;}
.my-player-wrap > ul > li.add > button > i {width: 5rem; height: 5rem;}
.my-player-wrap > ul > li.add > button > p {font-size: 1.6rem; line-height: 2.4rem; font-weight: 500; color: var(--body);}

@media screen and (max-width: 768px) {
    .my-player-wrap {width: 100vw; margin: 0 -2rem; padding: 0 2rem; overflow-x: auto;}
    .my-player-wrap > ul {display: flex; column-gap: 1.2rem; width: max-content;}
    .my-player-wrap > ul > li {width: 12rem; height: 15.2rem; border-radius: .8rem;}
    .my-player-wrap > ul > li .name {column-gap: .6rem; padding: 1rem .8rem 0;}
    .my-player-wrap > ul > li .name > i {width: 2.4rem; height: 2.4rem;}
    .my-player-wrap > ul > li .name > p {font-size: 1.4rem;}
    .my-player-wrap > ul > li .img {height: 11.2rem;}
    .my-player-wrap > ul > li:not(.add) > button {height: 3.2rem;}
    .my-player-wrap > ul > li.add > button > i {width: 4rem; height: 4rem;}
    .my-player-wrap > ul > li.add > button > p {font-size: 1.4rem; line-height: 2rem;}
}

.my-player-wrap > ul > li.kbl {background-color: var(--gray03);}
.my-player-wrap > ul > li.kgc {background-color: var(--kgc-sub);}
.my-player-wrap > ul > li.sono {background-color: var(--sono-sub);}
.my-player-wrap > ul > li.lg {background-color: var(--lg-sub);}
.my-player-wrap > ul > li.sk {background-color: var(--sk-sub);}
.my-player-wrap > ul > li.hd {background-color: var(--hd-sub);}
.my-player-wrap > ul > li.kcc {background-color: var(--kcc-sub);}
.my-player-wrap > ul > li.db {background-color: var(--db-sub);}
.my-player-wrap > ul > li.kt {background-color: var(--kt-sub);}
.my-player-wrap > ul > li.pega {background-color: var(--pega-sub);}
.my-player-wrap > ul > li.ss {background-color: var(--ss-sub);}

/* 마이페이지 > My PLAYER 드래그 >>>>>>>>>>>>>>>>>> */
.my-player-wrap-drag {width: 100%; height: 19rem; border-radius: 1rem; display: flex; flex-flow: column; row-gap: .6rem; overflow: hidden; background-color: var(--gray03); position: relative;}
.my-player-wrap-drag .name {display: flex; align-items: center; column-gap: .8rem; padding: 1.2rem .8rem 0;}
.my-player-wrap-drag .name > i {width: 3.2rem; height: 3.2rem;}
.my-player-wrap-drag .name > p {flex: 1; font-size: 1.6rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.my-player-wrap-drag .img {width: 100%; height: 14rem; overflow: hidden; display: flex; align-items: flex-start; justify-content: center;}
.my-player-wrap-drag .img > img {width: 100%;}
.my-player-wrap-drag:not(.add) > button {position: absolute; left: 0; bottom: 0; width: 100%; border-radius: 0; background: rgba(25, 25, 25, 0.25); backdrop-filter: blur(.25rem); color: var(--white); height: 4rem; padding: 0 1.2rem; font-size: 1.4rem;}
.my-player-wrap-drag.add > button {width: 100%; min-width: initial; height: 100%; flex-flow: column; row-gap: 3.2rem; padding: 0; background-color: transparent;}
.my-player-wrap-drag.add > button > i {width: 5rem; height: 5rem;}
.my-player-wrap-drag.add > button > p {font-size: 1.6rem; line-height: 2.4rem; font-weight: 500; color: var(--body);}

@media screen and (max-width: 768px) {
    .my-player-wrap-drag {width: 12rem; height: 15.2rem; border-radius: .8rem;}
    .my-player-wrap-drag .name {column-gap: .6rem; padding: 1rem .8rem 0;}
    .my-player-wrap-drag .name > i {width: 2.4rem; height: 2.4rem;}
    .my-player-wrap-drag .name > p {font-size: 1.4rem;}
    .my-player-wrap-drag .img {height: 11.2rem;}
    .my-player-wrap-drag:not(.add) > button {height: 3.2rem;}
    .my-player-wrap-drag.add > button > i {width: 4rem; height: 4rem;}
    .my-player-wrap-drag.add > button > p {font-size: 1.4rem; line-height: 2rem;}
}

.kbl.my-player-wrap-drag {background-color: var(--gray03);}
.kgc.my-player-wrap-drag {background-color: var(--kgc-sub);}
.sono.my-player-wrap-drag {background-color: var(--sono-sub);}
.lg.my-player-wrap-drag {background-color: var(--lg-sub);}
.sk.my-player-wrap-drag {background-color: var(--sk-sub);}
.hd.my-player-wrap-drag {background-color: var(--hd-sub);}
.kcc.my-player-wrap-drag {background-color: var(--kcc-sub);}
.db.my-player-wrap-drag {background-color: var(--db-sub);}
.kt.my-player-wrap-drag {background-color: var(--kt-sub);}
.pega.my-player-wrap-drag {background-color: var(--pega-sub);}
.ss.my-player-wrap-drag {background-color: var(--ss-sub);}
/* <<<<<<<<<<<<<<<< === 마이페이지 > My PLAYER 드래그 === */

.player-search {display: grid; grid-template-columns: repeat(2, 1fr); column-gap: .8rem; margin-bottom: 2rem;}
.player-search > li {position: relative; display: flex; align-items: center; justify-content: flex-end;}
.player-search > li > select {width: 100%; height: 4rem; padding: 0 4.4rem 0 1.2rem; border-radius: .8rem; background-position: center right 1rem; font-size: 1.4rem;}
.player-search > li > input {width: 100%; height: 4rem; padding: 0 4.8rem 0 1.2rem; font-size: 1.4rem; border-radius: .8rem;}
.player-search > li > i {position: absolute; right: 1.2rem;}

@media screen and (max-width: 768px) {
    .player-search {width: 100vw; margin: 0 -2rem; padding: 1.2rem 2rem; margin-bottom: 0; background-color: var(--gray03);}
}

.player-search-list {display: flex; flex-flow: column; max-height: calc(100vh - 14.8rem - 4.8rem - 6rem - 2rem); overflow-y: auto;}
.player-search-list > li {width: 100%; display: flex; align-items: center; column-gap: 2rem; padding: 1.4rem 0;}
.player-search-list > li .team {width: 14rem; display: flex; align-items: center; column-gap: .8rem;}
.player-search-list > li .team > div {width: 3.2rem; height: 3.2rem; background-color: var(--gray03); border-radius: 100%; display: flex; align-items: center; justify-content: center;}
.player-search-list > li .team > p {flex: 1; font-size: 1.4rem; line-height: 2rem; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; line-clamp: 1; -webkit-line-clamp: 1; -webkit-box-orient: vertical;}
.player-search-list > li > p {flex: 1; font-size: 1.4rem; font-weight: 600; line-height: 2rem; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; line-clamp: 1; -webkit-line-clamp: 1; -webkit-box-orient: vertical;}
.player-search-list > li > button {width: fit-content; height: fit-content; min-width: fit-content; padding: 0; background-color: transparent;}

@media screen and (max-width: 768px) {
    .player-search-list {max-height: calc(100vh - 55.4rem);}
}

/* 마이페이지 > (팝업)MY PLAYER */
.pop .my-player-wrap {width: calc(100% + 4rem); margin: 0 -2rem; padding: 0 2rem; overflow-x: auto;}
.pop .my-player-wrap > ul {display: flex; column-gap: 1.2rem; width: max-content;}
.pop .my-player-wrap > ul > li {width: 12rem; height: 15.2rem; border-radius: .8rem;}
.pop .my-player-wrap > ul > li .name {column-gap: .6rem; padding: 1rem .8rem 0;}
.pop .my-player-wrap > ul > li .name > i {width: 2.4rem; height: 2.4rem;}
.pop .my-player-wrap > ul > li .name > p {font-size: 1.4rem;}
.pop .my-player-wrap > ul > li .img {height: 11.2rem;}
.pop .my-player-wrap > ul > li:not(.add) > button {height: 3.2rem;}
.pop .my-player-wrap > ul > li.add > button > i {width: 4rem; height: 4rem;}
.pop .my-player-wrap > ul > li.add > button > p {font-size: 1.4rem; line-height: 2rem;}

.pop .player-search {width: calc(100% + 4rem); margin: 0 -2rem; padding: 1.2rem 2rem; margin-bottom: 0; background-color: var(--gray03);}
.pop .player-search-list {height: calc(46.4rem - 2.4rem - 18.8rem - 4rem - 3.6rem - 6.4rem); margin-bottom: -2.4rem;}

@media screen and (max-width: 768px) {
    .pop .player-search-list {height: calc(46.4rem - 2.4rem - 18.8rem - 2.4rem - 3.6rem - 6.4rem);}
}

/* 마이페이지 > 직관현황 */
.direct-search {display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: .8rem; background-color: var(--gray03); padding: 1.2rem 2rem; margin-bottom: 2.4rem;}
.direct-search > li:nth-child(1) {grid-column: 1 / span 2;}
.direct-search > li select {width: 100%; height: 4rem; padding: 0 4.4rem 0 1.2rem; border-radius: .8rem; background-position: center right 1rem; font-size: 1.4rem;}

@media screen and (max-width: 768px) {
    .direct-search {width: 100vw; margin: 0 -2rem 2.4rem;}
}

.direct-per {background-color: var(--gray03); border-radius: 1.2rem; display: grid; grid-template-columns: repeat(3, 1fr); margin-bottom: 1.6rem;}
.direct-per > li {display: flex; flex-flow: column; align-items: center; justify-content: center; row-gap: .8rem; height: 12.4rem;}
.direct-per > li:nth-child(1):nth-last-child(1) {grid-column: 1 / span 3;}
.direct-per > li > p {text-align: center; font-size: 1.4rem; font-weight: 500; color: var(--subheadline);}
.direct-per > li > div {display: flex; flex-flow: column; align-items: center; justify-content: center; row-gap: .4rem;}
.direct-per > li > div > p {text-align: center; font-size: 2.4rem; line-height: 3.2rem; font-weight: 600;}
.direct-per > li > div > span {text-align: center; font-size: 1.4rem; color: var(--disabled); line-height: 2rem;}

.direct-list .game-schedule-list {overflow-y: auto; margin-bottom: -5rem; max-height: calc(89rem - 6.2rem - 4.8rem - 13.6rem - 13rem - 4.4rem); padding-bottom: 5rem;}
.direct-list .game-schedule-list > ul > li {filter: none;}
.direct-list .game-schedule-list > ul > li .info .versus {column-gap: 0;}

@media screen and (max-width: 768px) {
    .direct-list .game-schedule-list {overflow-y: initial; margin-bottom: 0; max-height: initial; padding-bottom: 0;}
}

.direct-reward > ul {display: flex; flex-flow: column; row-gap: 2rem; margin-bottom: -3rem;}
.direct-reward > ul > li {display: flex; align-items: center; justify-content: space-between;}
.direct-reward > ul > li > div {display: flex; align-items: center; column-gap: 1.6rem;}
.direct-reward > ul > li > div > div {width: 4.8rem; height: 4.8rem; background-color: var(--gray03); border-radius: 100%; display: flex; align-items: center; justify-content: center;}
.direct-reward > ul > li > div > p {font-size: 1.6rem; font-weight: 500;}
.direct-reward > ul > li > button {min-width: 5.2rem; height: 3.2rem; padding: 0 1.2rem; font-size: 1.4rem; border-radius: .6rem;}

.direct-way {display: flex; flex-flow: column; row-gap: 1.2rem; padding: 1.6rem; border: 1px solid var(--gray02); border-radius: 1.2rem;}
.direct-way + .direct-way {margin-top: 1.6rem;}
.direct-way > p {font-size: 1.4rem; line-height: 2rem; font-weight: 600;}
.direct-way > img {width: 100%;}

.notification {list-style: decimal;}
.notification > li {font-size: 1.4rem; line-height: 2rem; color: var(--body); margin-left: 1.4rem; padding-left: .4rem; word-break: keep-all;}

.address-wrap {display: flex; flex-flow: column; row-gap: 2.4rem;}
.address-wrap > li + li {padding-top: 2.4rem; border-top: 1px solid var(--gray02);}
.address-wrap > li > p {font-size: 1.4rem; line-height: 2rem; font-weight: 500; color: var(--body);}
.address-wrap > li > input + label {margin-top: 1.6rem;}

/* 마이페이지 > 포인트카드 */
.my-card {background-color: var(--gray03); border-radius: 1.2rem; padding: 3.2rem 4rem; display: flex; align-items: center; column-gap: 4rem;}
.my-card > ul {display: flex; align-items: center; column-gap: 2.4rem;}
.my-card > div {display: flex; flex-flow: column; row-gap: .4rem;}
.my-card > div > span {font-size: 1.4rem; font-weight: 500; color: var(--subheadline); line-height: 2rem;}
.my-card > div > p {font-size: 1.6rem; font-weight: 600; line-height: 2.4rem;}

@media screen and (max-width: 768px) {
    .my-card {background-color: transparent; border-radius: 0; padding: 0;}
    .my-card > ul {flex: 1; display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 1.6rem;}
    .my-card > div {display: none;}
}

.my-card-list {display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 3rem 2rem;}
.my-card-list > li .pointcard .img {min-width: initial; height: 25.4rem;}

@media screen and (max-width: 768px) {
    .my-card-list {grid-template-columns: repeat(2, 1fr); grid-gap: 2.4rem 1.6rem;}
    .my-card-list > li .pointcard .img {height: 57vw;}
}

/* 마이페이지 > 문의 및 제안 내역 */
.inquiry-list {display: flex; flex-flow: column; row-gap: 1.6rem;}
.inquiry-list > li {display: flex; flex-flow: column; row-gap: 1.6rem; border-bottom: 1px solid var(--gray02); padding-bottom: 1.6rem;}
.inquiry-list > li .tit {padding: 0 2rem; display: flex; flex-flow: column; row-gap: 1.2rem;}
.inquiry-list > li .tit > p {font-size: 1.6rem; font-weight: 600; line-height: 2.4rem;}
.inquiry-list > li .tit > div {display: flex; align-items: center; column-gap: .8rem;}
.inquiry-list > li .tit > div > span {font-size: 1.4rem; font-weight: 500;}
.inquiry-list > li .tit > div > ul {display: flex; align-items: center; column-gap: .8rem;}
.inquiry-list > li .tit > div > ul::before {content: ''; width: 1px; height: 1.2rem; background-color: var(--gray02);}
.inquiry-list > li .tit > div > ul > li {font-size: 1.4rem; color: var(--body);}
.inquiry-list > li .cont {margin: 0 2rem; background-color: var(--gray03); border-radius: .8rem; padding: 2rem; display: none; flex-flow: column; row-gap: 1.2rem;}
.inquiry-list > li .cont > p {font-size: 1.6rem; line-height: 2.4rem; display: flex; column-gap: .8rem; white-space: pre-wrap;}
.inquiry-list > li .cont > p::before {width: 1.6rem; font-size: 1.6rem; font-weight: 500; text-align: center;}
.inquiry-list > li .cont .q::before {content: 'Q.';}
.inquiry-list > li .cont .a::before {content: 'A.'; color: var(--orange);}
.inquiry-list > li .cont > span {font-size: 1.4rem; line-height: 2rem; color: var(--body); margin-left: 2.4rem;}

.inquiry-list > li.active .cont {display: flex;}

@media screen and (max-width: 768px) {
    .filter-select.inquiry {grid-template-columns: 3fr 1fr;}
    .filter-select.inquiry > li:nth-child(1) {order: 2;}
    .filter-select.inquiry > li:nth-child(2) {order: 1; grid-column: 1 / span 2;}
    .filter-select.inquiry > li:nth-child(3) {order: 3;}
    .filter-select.inquiry > li .date input[type='date'] {width: 100%; flex: 1;}

    .inquiry-list {row-gap: 1.2rem;}
    .inquiry-list > li {row-gap: 1.2rem; padding-bottom: 1.2rem;}
    .inquiry-list > li .tit {padding: 0; row-gap: .8rem;}
    .inquiry-list > li .tit > p {font-size: 1.4rem; line-height: 2rem;}
    .inquiry-list > li .tit > div > span {font-size: 1.2rem;}
    .inquiry-list > li .tit > div > ul > li {font-size: 1.2rem;}
    .inquiry-list > li .cont {margin: 0; padding: 1.6rem; row-gap: .8rem;}
    .inquiry-list > li .cont > p {font-size: 1.4rem; line-height: 2rem;}
    .inquiry-list > li .cont > p::before {width: 1.2rem; font-size: 1.4rem;}
    .inquiry-list > li .cont > span {font-size: 1.2rem; line-height: 1.6rem; margin-left: 2rem;}
}

/* 마이페이지 > 이벤트 > polls 결과 */
.polls-my {display: flex; align-items: center; padding: 0 1.6rem; column-gap: 1.2rem; height: 7.2rem; background-color: var(--white); border: 1px solid var(--black); border-radius: 1.2rem; column-gap: 1.2rem; box-shadow: 0px 6px 12px 0px rgba(25, 25, 25, 0.05);}
.polls-my > i {width: 4.8rem; height: 4.8rem;}
.polls-my .img {width: 4.8rem; height: 4.8rem; border-radius: 100%; background-color: var(--gray03); background-repeat: no-repeat; background-size: cover; background-position: center top .4rem;}
.polls-my > p {font-size: 1.6rem;}
.polls-my > span {font-size: 1.2rem; color: var(--body);}

.event-prizewinner {border-radius: 1.2rem; background-color: var(--gray03); padding: 1.6rem 2rem; display: grid; grid-template-columns: repeat(5, 1fr); grid-gap: 1.6rem; justify-content: space-between;}
.event-prizewinner > li {display: flex; align-items: center; column-gap: .4rem;}
.event-prizewinner > li > p {width: 4.4rem; font-size: 1.4rem; font-weight: 500; line-height: 2rem;}
.event-prizewinner > li > span {font-size: 1.4rem; color: var(--subheadline); line-height: 2rem;}

@media screen and (max-width: 768px) {
    .event-prizewinner {grid-template-columns: repeat(2, 1fr);}
}

/* 마이페이지 > 티켓내역 > 구매내역 */
.my-ticket-list {display: none;}
.my-ticket-list td > p {word-break: keep-all;}

@media screen and (max-width: 768px) {
    .my-ticket-table {display: none;}
    .my-ticket-table th {white-space: nowrap;}
    .my-ticket-table td {white-space: nowrap;}

    .my-ticket-list {display: flex; flex-flow: column; row-gap: 1.2rem; margin: 0 2rem;}
    .my-ticket-list > li {background-color: var(--gray03); border-radius: .8rem; padding: 1.6rem 2rem; display: flex; flex-flow: column; row-gap: 1.6rem;}
    .my-ticket-list > li > a {display: flex; flex-flow: column; row-gap: 1.6rem;}
    .my-ticket-list > li .info {display: flex; align-items: center; column-gap: .8rem; margin-bottom: .4rem;}
    .my-ticket-list > li .info > div {display: flex; align-items: center; column-gap: .4rem;}
    .my-ticket-list > li .info > div .label {min-width: 5.2rem;}
    .my-ticket-list > li .info > p {font-size: 1.2rem; line-height: 2rem; font-weight: 500; color: var(--disabled);}
    .my-ticket-list > li .versus {display: flex; align-items: center; justify-content: center; column-gap: 2rem;}
    .my-ticket-list > li .versus > li {display: flex; flex-flow: column; row-gap: .8rem; align-items: center;}
    .my-ticket-list > li .versus > li > i {width: 6.6rem; height: 4rem;}
    .my-ticket-list > li .versus > li > p {text-align: center; font-size: 1.4rem; font-weight: 400; line-height: 2rem; word-break: keep-all;}
    .my-ticket-list > li .versus > li:not(:nth-child(2)) {width: calc((100% - 4.8rem - 4rem) / 2);}
    .my-ticket-list > li .desc {display: flex; align-items: center; justify-content: space-between;}
    .my-ticket-list > li .desc > ul {display: flex; align-items: center; column-gap: .6rem;}
    .my-ticket-list > li .desc > ul > li {display: flex; align-items: center; column-gap: .6rem; font-size: 1.2rem; line-height: 1.6rem; font-weight: 500; color: var(--subheadline);}
    .my-ticket-list > li .desc > ul > li + li::before {content: ''; width: 1px; height: 1.2rem; background-color: var(--gray01);}
    .my-ticket-list > li .desc > p {font-size: 1.2rem; line-height: 1.6rem; font-weight: 600;}
}

.ticket-game-info {margin-bottom: 2.4rem; padding: 1.6rem; background-color: var(--gray03); border-radius: .8rem; position: relative; display: flex; align-items: center; column-gap: 2.4rem;}
.ticket-game-info::before {content: ''; width: 1.2rem; height: 1.2rem; background-color: var(--white); border-radius: 100%; position: absolute; top: -.6rem; left: 7.2rem;}
.ticket-game-info::after {content: ''; width: 1.2rem; height: 1.2rem; background-color: var(--white); border-radius: 100%; position: absolute; bottom: -.6rem; left: 7.2rem;}
.ticket-game-info > i {width: 4.8rem; height: 4.8rem;}
.ticket-game-info > div {display: flex; flex-flow: column; row-gap: .2rem;}
.ticket-game-info > div::before {content: ''; width: 1px; height: calc(100% - 1.2rem); border-right: 1px dashed var(--gray02); position: absolute; top: .6rem; left: 7.8rem;}
.ticket-game-info > div > ul {display: flex; align-items: center; column-gap: .6rem;}
.ticket-game-info > div > ul > li {display: flex; align-items: center; column-gap: .6rem; font-size: 1.4rem; line-height: 2rem; font-weight: 500; color: var(--body);}
.ticket-game-info > div > ul > li + li::before {content: ''; width: 1px; height: 1.2rem; background-color: var(--gray01);}
.ticket-game-info > div > p {font-size: 1.6rem; font-weight: 600; line-height: 2.4rem;}

@media screen and (max-width: 768px) {
    .ticket-game-info::before {content: none;}
    .ticket-game-info::after {content: none;}
    .ticket-game-info > i {display: none;}
    .ticket-game-info > div::before {content: none;}
}

.reserve-info {display: flex; flex-flow: column; row-gap: .8rem;}
.reserve-info +.reserve-info {margin-top: 2rem; border-top: 1px dashed var(--gray02); padding-top: 2rem;}
.reserve-info > li {display: flex; column-gap: 1.2rem; align-items: center;}
.reserve-info > li p {font-size: 1.4rem; line-height: 2rem; color: var(--body); width: 7.6rem; display: flex; align-items: center; column-gap: .4rem;}
.reserve-info > li span {font-size: 1.4rem; font-weight: 500; line-height: 2rem; flex: 1; word-break: keep-all; align-items: center; display: flex; column-gap: .8rem; white-space: pre-wrap;}
.reserve-info > li span > i {margin-top: .2rem; align-self: flex-start;}
.reserve-info > li span > p {flex: 1; font-size: 1.4rem; font-weight: 500; line-height: 2rem; flex: 1; word-break: keep-all;}
.reserve-info > li > a {display: flex; column-gap: 1.2rem; align-items: center;}
.reserve-info > li > a > * {text-decoration: underline;}
.reserve-info > li > button {width: 100%; margin-top: 1.2rem; height: 4rem; padding: 0 1rem; font-size: 1.4rem; border-radius: .8rem;}
.reserve-info > li > input + label {margin-top: .4rem;}
.reserve-info > li > input + label > p {width: initial;}
.reserve-info > li .memo {display: flex; flex-flow: column; row-gap: .4rem; margin-top: .4rem;}
.reserve-info > li .memo > li {font-size: 1.2rem; line-height: 1.6rem; color: var(--subheadline); word-break: keep-all; text-indent: -.8rem; padding-left: .8rem;}
.reserve-info > li .memo > li::before {content: '- ';}

.guideline {padding: 2rem 1.6rem; background-color: var(--gray03); border-radius: 1.2rem; display: flex; flex-flow: column; row-gap: .8rem;}
.guideline > p {font-size: 1.4rem; font-weight: 600; line-height: 2rem;}
.guideline > ul {display: flex; flex-flow: column; row-gap: .8rem;}
.guideline > ul > li {display: flex; column-gap: .4rem; font-size: 1.2rem; line-height: 1.6rem; color: var(--subheadline); word-break: keep-all;}
.guideline > ul > li::before {content: '•'; font-size: 1rem; line-height: 1.2rem;}
.guideline + button {width: 100%; margin-top: 2rem;}

.refund-info {display: flex; flex-flow: column; row-gap: .8rem; margin-bottom: 2.4rem;}
.refund-info select {width: 100%; height: 4rem; padding: 0 4.4rem 0 1.2rem; border-radius: .8rem; background-position: center right 1rem; font-size: 1.4rem;}
.refund-info input {width: 100%; height: 4rem; padding: 0 1.2rem; font-size: 1.4rem; border-radius: .8rem;}

.ticketing-guideline {display: flex; flex-flow: column; row-gap: .8rem;}
.ticketing-guideline > li {display: flex; column-gap: .8rem; font-size: 1.4rem; line-height: 2rem;}
.ticketing-guideline > li::before {content: '•'; font-size: 1.2rem; line-height: 1.8rem;}

.seat-game-info {display: flex; flex-flow: column; row-gap: 1.2rem; margin-bottom: 3.2rem;}
.seat-game-info > p {font-size: 2rem; font-weight: 600; line-height: 2.8rem; word-break: keep-all;}
.seat-game-info > span {font-size: 1.2rem; line-height: 1.6rem; color: var(--body);}

.seat-map-wrap {width: calc(100% + 4rem); margin: 0 -2rem -2.4rem; height: 60rem; position: relative;}
.seat-map-wrap .direction {width: 16rem; height: 3.2rem; border: 1px solid var(--gray02); background-color: rgba(118, 118, 118, 0.6); display: flex; align-items: center; justify-content: center; font-size: 1.2rem; line-height: 1.6rem; color: var(--white); position: absolute; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); top: 1.6rem;}
.seat-map-wrap > p {width: 100%; height: 3.2rem; padding: 0 2rem; border-top: 1px solid var(--gray02); background-color: rgba(118, 118, 118, 0.6); display: flex; align-items: center; justify-content: center; font-size: 1.2rem; line-height: 1.6rem; color: var(--white); position: absolute; left: 0; bottom: 0;}

@media screen and (max-width: 768px) {
    .seat-game-info {row-gap: .4rem; margin-bottom: 1.6rem;}
    .seat-game-info > p {font-size: 1.6rem; line-height: 2.4rem;}
    .seat-map-wrap {height: 36rem;}
}

.qr-swiper-wrap {width: calc(100% + 4rem); margin: 0 -2rem;}
.qr-swiper-wrap .qr-swiper.swiper {padding: 0 2rem;}
.qr-swiper-wrap .qr-swiper.swiper .swiper-slide {display: flex; flex-flow: column; row-gap: 2rem; padding-bottom: 2rem;}
.qr-swiper-wrap .qr-swiper.swiper .swiper-slide .qr {display: flex; flex-flow: column; row-gap: 1.2rem; align-items: center;}
.qr-swiper-wrap .qr-swiper.swiper .swiper-slide .qr > p {text-align: center; font-size: 1.6rem; line-height: 2.4rem; font-weight: 500;}
.qr-swiper-wrap .qr-swiper.swiper .swiper-slide .qr > div {width: 12rem; display: flex; flex-flow: column; align-items: center; justify-content: flex-start; position: relative; row-gap: 1rem;}
.qr-swiper-wrap .qr-swiper.swiper .swiper-slide .qr > div::after {content: ''; width: 100%; height: 2rem; font-size: 1.4rem; line-height: 2rem; font-weight: 600; display: flex; align-items: center; justify-content: center; color: var(--white);}
.qr-swiper-wrap .qr-swiper.swiper .swiper-slide .qr > div.using::after {content: '사용완료'; background-color: var(--black);}
.qr-swiper-wrap .qr-swiper.swiper .swiper-slide .qr img {width: 12rem;}
.qr-swiper-wrap .qr-swiper.swiper .swiper-slide .desc {width: 100%; background-color: var(--gray03); border-radius: 1.2rem; display: grid; grid-template-columns: repeat(2, 1fr); padding: 2rem 0;}
.qr-swiper-wrap .qr-swiper.swiper .swiper-slide .desc > li {display: flex; flex-flow: column; row-gap: .4rem; align-items: center; justify-content: flex-start; position: relative; padding: 0 2rem;}
.qr-swiper-wrap .qr-swiper.swiper .swiper-slide .desc > li + li::before {content: ''; width: 1px; height: 100%; background-color: var(--gray02); position: absolute; left: 0;}
.qr-swiper-wrap .qr-swiper.swiper .swiper-slide .desc > li > p {font-size: 1.2rem; line-height: 1.6rem; font-weight: 500; color: var(--body);}
.qr-swiper-wrap .qr-swiper.swiper .swiper-slide .desc > li > p > a {text-decoration: underline; color: var(--body); display: flex; align-items: center; column-gap: .4rem;}
.qr-swiper-wrap .qr-swiper.swiper .swiper-slide .desc > li > span {font-size: 1.4rem; line-height: 2rem; font-weight: 500; text-align: center;}

.qr-swiper-wrap .qr-swiper.swiper .swiper-pagination {top: initial; bottom: 0; display: flex; align-items: center; justify-content: center; column-gap: .6rem;}
.qr-swiper-wrap .qr-swiper.swiper .swiper-pagination .swiper-pagination-bullet {width: .6rem; height: .6rem; opacity: 1; background-color: var(--disabled); margin: 0;}
.qr-swiper-wrap .qr-swiper.swiper .swiper-pagination .swiper-pagination-bullet-active {background-color: var(--orange);}

.qr-swiper-wrap .sponsor {display: flex; column-gap: 1.2rem; margin-top: 2.4rem; padding: 0 2rem;}
.qr-swiper-wrap .sponsor > li {display: flex; align-items: center; justify-content: center;}
.qr-swiper-wrap .sponsor > li:nth-child(1):nth-last-child(2), .qr-swiper-wrap .sponsor > li:nth-child(1):nth-last-child(2) ~ li {width: calc(100% - (1.2rem * 1) / 2);}
.qr-swiper-wrap .sponsor > li:nth-child(1):nth-last-child(3), .qr-swiper-wrap .sponsor > li:nth-child(1):nth-last-child(3) ~ li {width: calc(100% - (1.2rem * 2) / 3);}
.qr-swiper-wrap .sponsor > li > img {max-height: 6rem;}

/* 마이페이지 > 티켓내역 > 모바일 시즌권 */
 .coupon-input {background-color: var(--gray03); margin-bottom: 2.4rem; padding: 1.6rem 2rem; display: flex; flex-flow: column; row-gap: 1.2rem;}
.coupon-input .info {display: flex; align-items: center; column-gap: .8rem;}
.coupon-input .info > p {font-size: 1.6rem; line-height: 2.4rem; font-weight: 600;}
.coupon-input .info > span {font-size: 1.2rem; line-height: 1.6rem; color: var(--body);}
.coupon-input .input-wrap {display: flex; align-items: center; column-gap: .8rem;}
.coupon-input .input-wrap .input input {width: 28rem; height: 4rem; padding: 0 1.2rem; font-size: 1.4rem; border-radius: .8rem;}
.coupon-input .input-wrap > button {height: 4rem; padding: 0 1.2rem; font-size: 1.4rem; border-radius: .8rem;}

@media screen and (max-width: 768px) {
    .coupon-input .input-wrap .input {flex: 1;}
    .coupon-input .input-wrap .input input {width: 100%;}
}

/* 마이페이지 > 티켓내역 > 선물함 */
@media screen and (max-width: 768px) {
    .gift-table1 {width: 100vw; margin: 0 -2rem; overflow-x: auto;}
    .gift-table1 th {white-space: nowrap;}
    .gift-table1 td {white-space: nowrap;}
}

.gift-info {width: 100%; margin-bottom: 1.6rem; padding: .8rem 2rem; text-align: center; font-size: 1.4rem; line-height: 2rem; color: var(--subheadline); background-color: var(--gray03); border-radius: .8rem;}
.gift-info > span {font-weight: 600; color: var(--orange);}

/* 마이페이지 > 티켓내역 > 쿠폰함 */
.coupon-list {display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 2rem 4rem;}
.coupon-list > li {padding: 1.6rem 2rem; background-color: var(--gray03); display: flex; align-items: center; column-gap: 2rem; border-radius: 1.2rem;}
.coupon-list > li > i {width: 7.2rem; height: 7.2rem;}
.coupon-list > li > div {display: flex; flex-flow: column; row-gap: 1.2rem; flex: 1;}
.coupon-list > li > div > div {display: flex; flex-flow: column; row-gap: .4rem;}
.coupon-list > li > div > div > ul {display: flex; align-items: center; column-gap: .8rem;}
.coupon-list > li > div > div > span {font-size: 1.2rem; line-height: 1.6rem; font-weight: 500; color: var(--body);}
.coupon-list > li > div > div > p {font-size: 1.4rem; line-height: 2rem; font-weight: 600;}
.coupon-list > li > div > div > p > span {color: var(--orange);}
.coupon-list > li > div > span {font-size: 1.2rem; line-height: 1.6rem; font-weight: 500; color: var(--body);}
.coupon-list > li > p {width: 7.2rem; height: calc(100% + 3.2rem); padding-left: 2rem; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; color: var(--disabled); border-left: 1px dashed var(--gray02); }
.coupon-list > li.disabled {opacity: .5;}

@media screen and (max-width: 768px) {
    .coupon-list {grid-template-columns: repeat(1, 1fr); grid-gap: 1.2rem;}
    .coupon-list > li > i {width: 4.8rem; height: 4.8rem;}
}

/* 마이페이지 > 회원정보 관리 */
.password-reset {display: flex; flex-flow: column; row-gap: 2.4rem;}
.password-reset > li {display: flex; flex-flow: column; row-gap: .8rem;}
.password-reset > li > p {font-size: 1.6rem; font-weight: 600; line-height: 2.4rem; margin-bottom: .4rem;}
.password-reset > li > span {font-size: 1.2rem; line-height: 1.6rem; color: var(--red);}
.password-reset > li > div {width: 100%; display: flex; align-items: center; column-gap: 1.2rem;}
.password-reset > li .input {flex: 1;}
.password-reset > li input {width: 100%; height: 4rem; padding: 0 1.2rem; font-size: 1.4rem; border-radius: .8rem;}
.password-reset > li button {min-width: 6.4rem; height: 4rem; padding: 0 1.2rem; font-size: 1.4rem; border-radius: .8rem;}

/* 마이페이지 > 회원 탈퇴 */
.join-wrap.withdrawal {min-height: fit-content;}

/* 마이페이지 > 관심경기 */
.fav-match-list {display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 2rem 6rem;}
.fav-match-list > li {width: 100%; padding: 0 2rem 2rem; border: 1px solid var(--gray02); border-radius: 1.2rem; background-color: var(--white); filter: drop-shadow(0px 6px 12px rgba(25, 25, 25, 0.05)); display: flex; flex-flow: column; row-gap: 2rem;}
.fav-match-list > li .info-wrap {padding: 1.2rem 0; border-bottom: 1px solid var(--gray02); display: flex; align-items: center; justify-content: space-between;}
.fav-match-list > li .info-wrap .info {display: flex; align-items: center; column-gap: 1.2rem;}
.fav-match-list > li .info-wrap .info > p {font-size: 1.2rem; line-height: 1.6rem; color: var(--body);}
.fav-match-list > li .info-wrap .option {display: flex; align-items: center; column-gap: 1.6rem;}
.fav-match-list > li .info-wrap .option button {width: fit-content; min-width: initial; height: fit-content; padding: 0; background-color: transparent;}
.fav-match-list > li .info-wrap .channel {display: flex; align-items: center; column-gap: .8rem;}
.fav-match-list > li .info-wrap .channel img {height: 1.2rem;}
.fav-match-list > li .info-wrap .channel > p {font-size: 1.4rem; line-height: 2.4rem; flex: 1; color: var(--subheadline);}
.fav-match-list > li .desc-wrap {display: flex; flex-flow: column; row-gap: 2rem;}
.fav-match-list > li .desc-wrap .desc {display: flex; align-items: center; column-gap: 1.6rem; justify-content: center;}
.fav-match-list > li .desc-wrap .desc .team {width: calc((100% - 10.6rem - 3.2rem) / 2); display: flex; flex-flow: column; row-gap: .8rem; align-items: center;}
.fav-match-list > li .desc-wrap .desc .team > i {width: 6.6rem; height: 4rem;}
.fav-match-list > li .desc-wrap .desc .team > p {text-align: center; font-size: 1.2rem; line-height: 1.6rem; font-weight: 500; color: var(--subheadline);}
.fav-match-list > li .desc-wrap .desc .versus {width: 10.6rem; position: relative; display: flex; flex-flow: column; row-gap: .4rem; align-items: center; justify-content: flex-end;}
.fav-match-list > li .desc-wrap .desc .versus > span {font-size: 1.2rem; line-height: 1.6rem; text-align: center; color: var(--body);}
.fav-match-list > li .desc-wrap .desc .versus > p {font-size: 2.8rem; line-height: 3.6rem; font-weight: 600; color: var(--subheadline);}
.fav-match-list > li .desc-wrap .desc .versus > p:nth-child(1) {margin-top: 2rem;}
.fav-match-list > li .desc-wrap .desc .versus > p:nth-last-child(1) {margin-bottom: 2rem;}
.fav-match-list > li .desc-wrap .desc .versus > ul:nth-child(1) {margin-top: 2rem;}
.fav-match-list > li .desc-wrap .desc .versus > ul:nth-last-child(1) {margin-bottom: 2rem;}
.fav-match-list > li .desc-wrap .desc .versus > ul {width: 100%; display: flex; align-items: center; justify-content: space-between;}
.fav-match-list > li .desc-wrap .desc .versus > ul > li {width: 4.8rem; text-align: center; font-size: 2.8rem; line-height: 3.6rem; font-weight: 600;}
.fav-match-list > li .desc-wrap .desc .versus > ul > li.win {color: var(--subheadline);}
.fav-match-list > li .desc-wrap .desc .versus > ul > li.lose {color: var(--disabled);}
.fav-match-list > li .desc-wrap .desc .versus > ul > li.draw {color: var(--disabled);}
.fav-match-list > li .desc-wrap > ul {display: grid; grid-template-columns: repeat(3, 1fr); column-gap: .8rem;}
.fav-match-list > li .desc-wrap > ul > li > button {width: 100%; height: 3.2rem; padding: 0 1.2rem; font-size: 1.4rem; border-radius: .6rem;}

@media screen and (max-width: 768px) {
    .fav-match-list {grid-template-columns: repeat(1, 1fr);}
    .fav-match-list > li {padding: 0 1.6rem 1.6rem;}

    .filter-wrap.fav-match .nav {height: 6.4rem; display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 2rem;}
    .filter-wrap.fav-match .nav > select {width: 100%; height: 4rem; padding: 0 4.4rem 0 1.2rem; border-radius: .8rem; background-position: center right 1rem; font-size: 1.4rem;}
    .filter-wrap.fav-match .nav .date {position: relative; left: initial; -webkit-transform: initial; -moz-transform: initial; -ms-transform: initial; -o-transform: initial; transform: initial;}
}


/* 구단 -------------------- */
/* 소개 인사말 */
.greeting-wrap {display: flex; align-items: flex-start; grid-gap: 2rem 4rem;}
.greeting-wrap > img {width: 20rem;}
.greeting-wrap > div {display: flex; flex-flow: column; row-gap: 2rem;}
.greeting-wrap > div > p {font-size: 2rem; font-weight: 600; line-height: 2.8rem; word-break: keep-all;}
.greeting-wrap > div > span {font-size: 1.4rem; line-height: 2rem; word-break: keep-all;}

@media screen and (max-width: 768px) {
    .greeting-wrap {flex-flow: column; align-items: center;}
    .greeting-wrap > img {width: 16rem;}
    .greeting-wrap > div {row-gap: 1.6rem;}
    .greeting-wrap > div > p {text-align: center;}
}

.greeting-wrap.kgc > div > p {color: var(--kgc-main);}
.greeting-wrap.lg > div > p {color: var(--lg-main);}
.greeting-wrap.sk > div > p {color: var(--sk-main);}
.greeting-wrap.hd > div > p {color: var(--hd-main);}
.greeting-wrap.sono > div > p {color: var(--sono-main);}
.greeting-wrap.kcc > div > p {color: var(--kcc-main);}
.greeting-wrap.db > div > p {color: var(--db-main);}
.greeting-wrap.kt > div > p {color: var(--kt-main);}
.greeting-wrap.pega > div > p {color: var(--pega-main);}
.greeting-wrap.ss > div > p {color: var(--ss-main);}

/* 프론트 조직 */
.organization-wrap {display: flex; flex-flow: column; align-items: center; row-gap: 4.4rem;}
.organization-wrap > p {width: 20rem; height: 4.4rem; border-radius: .8rem; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; font-weight: 500; position: relative;}
.organization-wrap > p::after {content: ''; width: 1px; height: 100%; background-color: var(--gray02); position: absolute; bottom: -100%;}
.organization-wrap .leader {color: var(--white);}
.organization-wrap .director {color: var(--white);}
.organization-wrap ul {margin-top: 4.4rem; width: 100%; display: flex; align-items: center; justify-content: center; grid-gap: 1.2rem; flex-wrap: wrap; position: relative; background-color: var(--gray02); border-radius: .8rem; padding: 1.2rem;}
.organization-wrap ul::before {content: '';  height: 1px; background-color: var(--gray02); position: absolute; top: -4.4rem;}
.organization-wrap ul > li {padding: 1rem 0; background-color: var(--white); border-radius: .4rem; display: flex; flex-flow: column; align-items: center;}
.organization-wrap ul > li::before {content: ''; width: 1px; height: 4.4rem; background-color: var(--gray02); position: absolute; top: -4.4rem;}
.organization-wrap ul > li > span {font-size: 1.2rem; line-height: 1.6rem; color: var(--subheadline);}
.organization-wrap ul > li > p {font-size: 1.4rem; line-height: 2rem; color: var(--subheadline);}

.organization-wrap ul > li:nth-child(1):nth-last-child(5), .organization-wrap ul > li:nth-child(1):nth-last-child(5) ~ li {width: calc((100% - (1.2rem * 4)) / 5);}
.organization-wrap ul > li:nth-child(1):nth-last-child(6), .organization-wrap ul > li:nth-child(1):nth-last-child(6) ~ li {width: calc((100% - (1.2rem * 5)) / 6);}
.organization-wrap ul > li:nth-child(1):nth-last-child(7), .organization-wrap ul > li:nth-child(1):nth-last-child(7) ~ li {width: calc((100% - (1.2rem * 6)) / 7);}

.organization-wrap.db ul::before {width: calc(100% - 2.4rem - 103.98px);}
.organization-wrap.hd ul::before {width: calc(100% - 2.4rem - 102.59px);}

@media screen and (max-width: 768px) {
    .organization-wrap > p {width: 12.8rem;}
    .organization-wrap ul {margin-top: 0;}
    .organization-wrap ul::before {content: none;}
    .organization-wrap ul > li::before {content: none;}

    .organization-wrap ul > li:nth-child(1):nth-last-child(5), .organization-wrap ul > li:nth-child(1):nth-last-child(5) ~ li {width: calc((100% - (1.2rem * 2)) / 3);}
    .organization-wrap ul > li:nth-child(1):nth-last-child(6), .organization-wrap ul > li:nth-child(1):nth-last-child(6) ~ li {width: calc((100% - (1.2rem * 2)) / 3);}
}

.organization-wrap.kgc .leader {background-color: var(--kgc-main);}
.organization-wrap.lg .leader {background-color: var(--lg-main);}
.organization-wrap.sk .leader {background-color: var(--sk-main);}
.organization-wrap.hd .leader {background-color: var(--hd-main);}
.organization-wrap.sono .leader {background-color: var(--sono-main);}
.organization-wrap.kcc .leader {background-color: var(--kcc-main);}
.organization-wrap.db .leader {background-color: var(--db-main);}
.organization-wrap.kt .leader {background-color: var(--kt-main);}
.organization-wrap.pega .leader {background-color: var(--pega-main);}
.organization-wrap.ss .leader {background-color: var(--ss-main);}

.organization-wrap.kgc .director {color: var(--kgc-main);}
.organization-wrap.lg .director {color: var(--lg-main);}
.organization-wrap.sk .director {color: var(--sk-main);}
.organization-wrap.hd .director {color: var(--hd-main);}
.organization-wrap.sono .director {color: var(--sono-main);}
.organization-wrap.kcc .director {color: var(--kcc-main);}
.organization-wrap.db .director {color: var(--db-main);}
.organization-wrap.kt .director {color: var(--kt-main);}
.organization-wrap.pega .director {color: var(--pega-main);}
.organization-wrap.ss .director {color: var(--ss-main);}

.organization-wrap.kgc .director {background-color: var(--kgc-sub);}
.organization-wrap.lg .director {background-color: var(--lg-sub);}
.organization-wrap.sk .director {background-color: var(--sk-sub);}
.organization-wrap.hd .director {background-color: var(--hd-sub);}
.organization-wrap.sono .director {background-color: var(--sono-sub);}
.organization-wrap.kcc .director {background-color: var(--kcc-sub);}
.organization-wrap.db .director {background-color: var(--db-sub);}
.organization-wrap.kt .director {background-color: var(--kt-sub);}
.organization-wrap.pega .director {background-color: var(--pega-sub);}
.organization-wrap.ss .director {background-color: var(--ss-sub);}

.map-wrap {display: flex; flex-flow: column; row-gap: 2rem;}
.map-wrap > p {width: 100%; height: 4.8rem; background-color: var(--black); display: flex; align-items: center; justify-content: center; font-size: 1.4rem; text-align: center; line-height: 2rem; color: var(--white);}
.map-wrap > ul {display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 1.2rem;}
.map-wrap > ul > li {padding: 1.6rem; border: 1px solid var(--gray02); border-radius: 1.2rem; display: flex; flex-flow: column; row-gap: 1.2rem;}
.map-wrap > ul > li:nth-child(1):nth-last-child(1) {grid-column: 1 / span 3;}
.map-wrap > ul > li > p {font-size: 1.6rem; font-weight: 600; line-height: 2.4rem;}
.map-wrap > ul > li > div {display: flex; flex-flow: column; row-gap: .8rem;}
.map-wrap > ul > li > div > p {font-size: 1.4rem; font-weight: 600; line-height: 2rem;}
.map-wrap > ul > li ul {display: flex; flex-flow: column; row-gap: .8rem;}
.map-wrap > ul > li ul > li {display: flex; column-gap: 1.2rem;}
.map-wrap > ul > li ul > li > p {width: 6rem; font-size: 1.4rem; font-weight: 500; line-height: 2rem;}
.map-wrap > ul > li ul > li > span {flex: 1; font-size: 1.4rem; line-height: 2rem; word-break: keep-all; color: var(--subheadline);}

.table-100 + .map-wrap  {margin-top: 2rem;}

@media screen and (max-width: 768px) {
    .map-wrap > img {width: 100vw; margin: 0 -2rem;}
    .map-wrap > img + p {margin-top: -2rem;}
    .map-wrap > p {width: 100vw; margin: 0 -2rem; padding: 0 2rem;}
    .map-wrap > ul {grid-template-columns: repeat(1, 1fr);}
    .map-wrap > ul > li {padding: 1.2rem 1.6rem; row-gap: .8rem;}
    .map-wrap > ul > li > p {font-size: 1.4rem; line-height: 2rem;}
    .map-wrap > ul > li > ul {row-gap: .4rem;}
}

/* 엠블럼 CI */
.emblem-wrap {display: flex; flex-flow: column; row-gap: 2rem;}
.emblem-wrap > p {font-size: 1.4rem; line-height: 2rem; word-break: keep-all;}
.emblem-wrap > img {width: 100%;}
.emblem-wrap .desc {display: flex; flex-flow: column; row-gap: .4rem;}
.emblem-wrap .desc > p {font-size: 1.4rem; font-weight: 600; line-height: 2rem;}
.emblem-wrap .desc > span {font-size: 1.4rem; line-height: 2rem; word-break: keep-all;}
.emblem-wrap .img {width: 100%; border-radius: 1.2rem; border: 1px solid var(--gray02); overflow: hidden;}
.emblem-wrap .img > img {width: 100%;}

.emblem-wrap .mobile {display: none;}

@media screen and (max-width: 768px) {
    .emblem-wrap .desktop {display: none;}
    .emblem-wrap .mobile {display: block;}
}

/* 엠블럼 CI > 현대 */
.emblem-color {display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 2rem;}
.emblem-color > li {border-radius: 1.2rem; padding: 0 3rem; display: flex; align-items: center; justify-content: space-between; height: 11.2rem;}
.emblem-color > li > p {font-size: 1.4rem; line-height: 2rem; font-weight: 600; color: var(--white);}
.emblem-color > li > span {font-size: 1.2rem; line-height: 1.6rem; color: var(--white); text-align: right;}

@media screen and (max-width: 768px) {
    .emblem-color {grid-template-columns: repeat(1, 1fr); grid-gap: 1.2rem;}
}

.emblem-backround {display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 2rem;}
.emblem-backround > li {height: 17.2rem; border: 1px solid var(--gray02); border-radius: 1.2rem; display: flex; align-items: center; justify-content: center;}
.emblem-backround > li > img {width: 10rem;}

.emblem-backround.hd > li.dark {background-color: var(--hd-main);}

.emblem-backround.ss > li:nth-child(2) {background-color: #FFB81C;}
.emblem-backround.ss > li:nth-child(3) {background-color: #0032A0;}
.emblem-backround.ss > li:nth-child(4) {background-color: #000000;}

@media screen and (max-width: 768px) {
    .emblem-backround {grid-template-columns: repeat(2, 1fr); grid-gap: 1.2rem;}
    .emblem-backround > li {width: calc((100vw - 4rem - 1.2rem) / 2);}
}

.emblem-signature {display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 1.2rem 2rem;}
.emblem-signature > li {border: 1px solid var(--gray02); border-radius: 1.2rem; overflow: hidden;}
.emblem-signature > li > img {width: 100%;}

@media screen and (max-width: 768px) {
    .emblem-signature {grid-template-columns: repeat(1, 1fr);}
}

.emblem-logo {display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 1.2rem 2rem;}
.emblem-logo > li {border: 1px solid var(--gray02); border-radius: 1.2rem; overflow: hidden;}
.emblem-logo > li > img {width: 100%;}

@media screen and (max-width: 768px) {
    .emblem-logo {grid-template-columns: repeat(1, 1fr);}
}

/* 지역파트너 */
.partner-list {display: flex; flex-flow: column; row-gap: 2rem;}
.partner-list > li {border-bottom: 1px solid var(--gray02); padding-bottom: 2rem;}
.partner-list > li .name {width: 100%; display: flex; align-items: center; column-gap: 1.2rem; cursor: pointer; background-image: url(../img/ico/ic-arrow-up-24.svg); background-repeat: no-repeat; background-size: 2.4rem; background-position: center right;}
.partner-list > li .name > p {font-size: 2rem; font-weight: 600;}
.partner-list > li .name > span:not(.label) {font-size: 1.2rem; color: var(--body);}
.partner-list > li .photo {display: none; margin-top: 2rem;}
.partner-list > li .photo ul {width: 100%; display: flex; column-gap: 1.2rem;}
.partner-list > li .photo ul > li {width: calc((100% - (1.2rem * 3)) / 4); height: 25rem; border-radius: .8rem; background-color: var(--gray01); background-repeat: no-repeat; background-size: cover; background-position: center;}
.partner-list > li .event {display: none; margin-top: 4rem; flex-flow: column; background-color: var(--gray03); border-radius: .8rem; padding: 2rem;}
.partner-list > li .event > span {font-size: 1.4rem; line-height: 2rem; word-break: keep-all;}
.partner-list > li .event > ul {display: flex; grid-gap: 1.2rem; margin-top: 2rem;}
.partner-list > li .event > ul > li {display: flex; flex-flow: column; grid-gap: .8rem 1.6rem;}
.partner-list > li .event > ul > li .img {width: 12rem; height: 12rem; border-radius: .8rem; background-color: var(--gray01);}
.partner-list > li .event > ul > li .desc {display: flex; flex-flow: column; row-gap: .8rem;}
.partner-list > li .event > ul > li .desc > p {width: 12rem; font-size: 1.4rem; line-height: 2rem; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.partner-list > li .event > ul > li .desc > div {font-size: 1.4rem; font-weight: 600;}
.partner-list > li .event > ul > li .desc > div > span {font-size: 1.2rem;}

@media screen and (max-width: 768px) {
    .partner-list {row-gap: 1.6rem;}
    .partner-list > li {padding-bottom: 1.6rem;}
    .partner-list > li .name > p {font-size: 1.6rem;}
    .partner-list > li .photo {width: 100vw; margin: 1.6rem -2rem 0; padding: 0 2rem; overflow-x: auto;}
    .partner-list > li .photo ul {width: fit-content;}
    .partner-list > li .photo ul > li {width: 15.8rem; height: 20.4rem;}
    .partner-list > li .event > ul {flex-flow: column;}
    .partner-list > li .event > ul > li {flex-flow: initial;}
    .partner-list > li .event > ul > li .desc {flex: 1;}
    .partner-list > li .event > ul > li .desc > p {width: 100%; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; line-clamp: 2; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: initial;}
}

.partner-list > li.active .name {background-image: url(../img/ico/ic-arrow-down-24.svg);}
.partner-list > li.active .photo {display: block;}
.partner-list > li.active .event {display: flex;}

/* 구장안내 > 구장안내 */
.stadium-wrap {display: flex; flex-flow: column; row-gap: 2rem;}
.stadium-wrap > p {font-size: 1.4rem; line-height: 2rem; word-break: keep-all;}
.stadium-wrap > ul {padding: 2rem; background-color: var(--gray03); display: flex; align-items: center; justify-content: center; flex-wrap: wrap; grid-gap: .8rem 1.6rem;}
.stadium-wrap > ul > li {display: flex; column-gap: .8rem;}
.stadium-wrap > ul > li > p {font-size: 1.4rem; font-weight: 600; line-height: 2rem;}
.stadium-wrap > ul > li > span {font-size: 1.4rem; color: var(--subheadline); line-height: 2rem; word-break: keep-all;}
.stadium-wrap > ul > li > a {font-size: 1.4rem; color: var(--subheadline); line-height: 2rem; word-break: keep-all; text-decoration: underline;}
.stadium-wrap > ul + img  {margin-top: 2rem;}
.stadium-wrap .img {width: 100%; border-radius: 1.2rem; border: 1px solid var(--gray02); overflow: hidden;}
.stadium-wrap img {width: 100%;}

@media screen and (max-width: 768px) {
    .stadium-wrap > ul > li {width: 100%;}
    .stadium-wrap > ul > li > p {width: 6rem;}
    .stadium-wrap > ul > li > span {flex: 1;}
}

/* 구장안내 > 편의시설 */
.amenities-wrap {display: flex; flex-flow: column; row-gap: 4rem;}
.amenities-wrap img {width: 100%;}

@media screen and (max-width: 768px) {
    .amenities-wrap {row-gap: 2.4rem;}
    .amenities-wrap img {width: 100vw; margin: 0 -2rem;}
}

.amenities-list {display: flex; flex-flow: column; row-gap: 2rem;}
.amenities-list > li {border-bottom: 1px solid var(--gray02); padding-bottom: 2rem;}
.amenities-list > li .name {width: 100%; display: flex; align-items: center; column-gap: 1.2rem; cursor: pointer; background-image: url(../img/ico/ic-arrow-up-24.svg); background-repeat: no-repeat; background-size: 2.4rem; background-position: center right;}
.amenities-list > li .name > p {font-size: 2rem; font-weight: 600;}
.amenities-list > li .name > span:not(.label) {font-size: 1.2rem; color: var(--body);}
.amenities-list > li > ul {display: none; grid-gap: 1.2rem; grid-template-columns: repeat(2, 1fr); margin-top: 2rem;}
.amenities-list > li > ul > li {padding: 2rem; border-radius: .8rem; background-color: var(--gray03); display: flex; align-items: center; column-gap: 2rem;}
.amenities-list > li > ul > li .img {width: 12rem; height: 12rem; background-color: var(--gray01); border-radius: .8rem;}
.amenities-list > li > ul > li .desc {flex: 1; display: flex; flex-flow: column; justify-content: space-between; height: 100%;}
.amenities-list > li > ul > li .desc > p {height: 4rem; font-size: 1.4rem; font-weight: 500; line-height: 2rem; word-break: keep-all; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; line-clamp: 2; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.amenities-list > li > ul > li .desc > div {font-size: 1.4rem; font-weight: 600;}
.amenities-list > li > ul > li .desc > div > span {font-size: 1.2rem;}
.amenities-list > li > ul > li .desc > button {width: 100%; height: 3.2rem; padding: 0 1.2rem; font-size: 1.4rem; border-radius: .6rem;}

@media screen and (max-width: 768px) {
    .amenities-list {row-gap: 1.6rem;}
    .amenities-list > li {padding-bottom: 1.6rem;}
    .amenities-list > li .name > p {font-size: 1.6rem;}
    .amenities-list > li > ul {grid-template-columns: repeat(1, 1fr); margin-top: 1.6rem;}
}

.amenities-list > li.active .name {background-image: url(../img/ico/ic-arrow-down-24.svg);}
.amenities-list > li.active > ul {display: grid;}

/* 구장안내 > 편의시설 > 상품설명 팝업 */
.prod-desc > div {display: flex; column-gap: 2rem;}
.prod-desc > div .img {width: 12rem; height: 12rem; background-color: var(--gray01); border-radius: .8rem;}
.prod-desc > div .desc {flex: 1; display: flex; flex-flow: column;}
.prod-desc > div .desc > p {font-size: 1.4rem; font-weight: 500; line-height: 2rem; word-break: keep-all;}
.prod-desc > div .desc > span {font-size: 1.2rem; color: var(--body); margin-top: .8rem; display: block;}
.prod-desc > div .desc > div {font-size: 1.4rem; font-weight: 600; margin-top: 1.2rem;}
.prod-desc > div .desc > div > span {font-size: 1.2rem;}
.prod-desc > div + div {width: calc(100% + 4rem); margin: 2.4rem -2rem 0; padding: 2.4rem 2rem 0; border-top: 1.2rem solid var(--gray03);}
.prod-desc > div > p {background-color: var(--gray03); padding: 1.6rem; border-radius: .8rem; font-size: 1.4rem; line-height: 2rem; word-break: keep-all;}

/* 사회공헌활동 */
.contribute-wrap {display: flex; align-items: flex-start; grid-gap: 2rem;}
.contribute-wrap .desc {flex: 1; display: flex; flex-flow: column; row-gap: 2rem;}
.contribute-wrap .desc > li {display: flex; flex-flow: column; row-gap: .8rem;}
.contribute-wrap .desc > li > p {font-size: 1.6rem; font-weight: 600; line-height: 2.4rem; word-break: keep-all;}
.contribute-wrap .desc > li > span {font-size: 1.4rem; line-height: 2rem; word-break: keep-all;}
.contribute-wrap .desc > li > ul {background-color: var(--gray03); border-radius: 1.2rem; padding: 1.6rem; display: flex; flex-flow: column; row-gap: .4rem;}
.contribute-wrap .desc > li > ul > li {display: flex; align-items: center; width: 100%;}
.contribute-wrap .desc > li > ul > li > p {width: 10rem; font-size: 1.4rem; font-weight: 600; line-height: 2rem;}
.contribute-wrap .desc > li > ul > li > span {flex: 1; font-size: 1.4rem; line-height: 2rem; color: var(--subheadline);}
.contribute-wrap img {width: 39rem; border-radius: 1.2rem;}

@media screen and (max-width: 768px) {
    .contribute-wrap {flex-flow: column;}
    .contribute-wrap .desc {row-gap: 1.6rem;}
    .contribute-wrap .desc > li > p {display: none;}
    .contribute-wrap img {width: 100%;}
}

.contribute-total {height: 6rem; padding: 0 2rem; border-radius: 1.2rem; display: flex; align-items: center; justify-content: space-between;}
.contribute-total + * {margin-top: 2rem;}
.contribute-total > p {font-size: 1.6rem; font-weight: 500; color: var(--white);}
.contribute-total > div {display: flex; align-items: center; column-gap: .8rem; font-size: 2.4rem; font-weight: 600; color: var(--white);}
.contribute-total > div > span {font-size: 1.4rem; font-weight: 500;}

@media screen and (max-width: 768px) {
    .contribute-total {height: fit-content; padding: 1.6rem 2rem; flex-flow: column; align-items: center; justify-content: center; row-gap: .8rem;}
}

.contribute-total.ss {background-color: var(--ss-main);}

@media screen and (max-width: 768px) {
    .contribute-table1  {width: max-content; min-width: 100%; table-layout: initial;}
    .contribute-table1  th {white-space: nowrap;}
    .contribute-table1  td {white-space: nowrap;}
}

/* 구단역사 */
.sk-wrap {display: flex; flex-flow: column; row-gap: 2rem;}
.sk-wrap > p {font-size: 1.4rem; line-height: 2rem; word-break: keep-all;}
.sk-wrap iframe {width: 100%; height: 45.6rem; border-radius: 1.2rem;}

@media screen and (max-width: 768px) {
    .sk-wrap  iframe {border-radius: 0; width: 100vw; margin: 0 -2rem; height: 56vw;}
}

.history-swiper-wrap {position: relative; display: flex; align-items: center;}
.history-swiper-wrap .history-swiper.swiper {border-radius: 1.2rem; overflow: hidden;}
.history-swiper-wrap .history-swiper.swiper img {width: 100%;}

@media screen and (max-width: 768px) {
    .history-swiper-wrap .history-swiper.swiper {border-radius: .8rem;}
}

.club-swiper-wrap {position: relative; display: flex; align-items: center;}
.club-swiper-wrap .club-swiper.swiper iframe {width: 100%; height: 45.6rem; border-radius: 1.2rem;}
.club-swiper-wrap .club-swiper.swiper img {width: 100%; border-radius: 1.2rem;}

@media screen and (max-width: 768px) {
    .club-swiper-wrap .club-swiper.swiper iframe {border-radius: 0; width: 100vw; margin: 0 -2rem; height: 56vw;}
}

/* 명예의 전당 > 영광의 순간 */
.honors-record {height: 14rem; border-radius: 2rem; display: flex; align-items: center; justify-content: center; flex-flow: column; row-gap: 1.2rem; background-color: var(--black);}
.honors-record > ul {display: flex; align-items: center;  justify-content: center; column-gap: 4.8rem;}
.honors-record > ul > li {display: flex; align-items: center; column-gap: 1.6rem;}
.honors-record > ul > li > i {width: 6.6rem; height: 4rem;}
.honors-record > ul > li > p {width: 12rem; text-align: right; font-size: 1.4rem; font-weight: 500; color: var(--white);}
.honors-record > ul > li > img {width: 5.6rem;}
.honors-record > ul > li:last-child {flex-flow: row-reverse;}
.honors-record > ul > li:last-child > p {text-align: left;}
.honors-record > p {display: flex; align-items: center; justify-content: center; padding: .6rem 1.2rem; border-radius: .6rem; font-size: 1.4rem; font-weight: 500; color: var(--black); background-color: var(--white);}

@media screen and (max-width: 768px) {
    .honors-record {height: fit-content; border-radius: .8rem; padding: 1.6rem;}
    .honors-record > ul {width: 100%; column-gap: 2rem;}
    .honors-record > ul > li {flex-flow: column-reverse; row-gap: 1.2rem;}
    .honors-record > ul > li:not(:nth-child(2)) {width: calc((100% - 4.8rem - 4rem) / 2);}
    .honors-record > ul > li > p {width: 100%; text-align: center; font-size: 1.2rem;}
    .honors-record > ul > li > img {width: 4.8rem;}
    .honors-record > ul > li:last-child {flex-flow: column-reverse;}
    .honors-record > ul > li:last-child > p {text-align: center;}
}

@media screen and (max-width: 768px) {
    .game-schedule-list.ss > ul > li .sub .desc .label {display: flex;}
}

.honors-swiper-main.swiper .swiper-slide > * {width: 100%; height: 45.6rem; border-radius: 1.2rem; cursor: pointer;}

.honors-swiper-list-wrap {position: relative; display: flex; align-items: center; margin-top: 1rem;}
.honors-swiper-list.swiper .swiper-slide > * {width: 100%; height: 11rem; border-radius: .8rem; cursor: pointer;}

@media screen and (max-width: 768px) {
    .honors-swiper-main.swiper .swiper-slide > * {height: 46vw; border-radius: .8rem;}

    .honors-swiper-list.swiper {width: 100vw; margin: 0 -2rem; padding: 0 2rem;}
    .honors-swiper-list.swiper .swiper-slide {width: fit-content;}
    .honors-swiper-list.swiper .swiper-slide > * {width: 14rem; height: 8rem; border-radius: .4rem;}
}

/* 명예의 전당 > 역사관 */
.history-desc {display: flex; flex-flow: column; row-gap: 2rem;}
.history-desc > p {font-size: 1.6rem; line-height: 2.4rem; word-break: keep-all; color: var(--subheadline);}

@media screen and (max-width: 768px) {
    .history-desc > p {font-size: 1.4rem; line-height: 2rem;}
}

/* 명예의 전당 > 역대 감독 */
.staff-list.ss.coach > li .img {height: 18.4rem; margin-top: 1.2rem;}
.staff-career.coach {row-gap: .8rem;}
.staff-career.coach > li {font-size: 1.4rem; line-height: 2rem; word-break: keep-all; color: var(--subheadline);}


/* 장학금 */
@media screen and (max-width: 768px) {
    .contribute-wrap.ss .desc > li > p {display: block;}
}

.scholarship-wrap {padding: 4rem; border: 1px solid var(--gray02); border-radius: 1.2rem; display: grid; grid-template-columns: repeat(2, 1fr); align-items: center; column-gap: 4rem;}
.scholarship-wrap > ul {display: flex; flex-flow: column; row-gap: 4rem;}
.scholarship-wrap > ul > li {display: flex; flex-flow: column; row-gap: 2rem;}
.scholarship-wrap > ul > li > p {font-size: 2rem; font-weight: 600;}
.scholarship-wrap > ul > li > ul {display: flex; flex-flow: column; row-gap: .8rem;}
.scholarship-wrap > ul > li > ul > li {display: flex; column-gap: 1.6rem;}
.scholarship-wrap > ul > li > ul > li > p {width: 8rem; font-size: 1.4rem; font-weight: 500; line-height: 2rem;}
.scholarship-wrap > ul > li > ul > li > span {flex: 1; font-size: 1.4rem; line-height: 2rem; color: var(--subheadline); word-break: keep-all;}
.scholarship-wrap > img {width: 100%;}

.scholarship-wrap > img.mobile {display: none;}

@media screen and (max-width: 768px) {
    .scholarship-wrap {padding: 2rem; border-radius: .8rem; display: grid; grid-template-columns: repeat(1, 1fr); row-gap: 2rem; overflow: hidden;}
    .scholarship-wrap > ul {row-gap: 2.4rem; grid-row: 2;}
    .scholarship-wrap > ul > li {row-gap: 1.2rem;}
    .scholarship-wrap > ul > li > p {font-size: 1.6rem;}
    .scholarship-wrap > ul > li > ul > li {row-gap: .8rem;}
    .scholarship-wrap > img {grid-row: 1; margin: -2rem -2rem 0; width: calc(100% + 4rem); border-radius: 0;}

    .scholarship-wrap > img.desktop {display: none;}
    .scholarship-wrap > img.mobile {display: block;}
}

@media screen and (max-width: 768px) {
    .scholarship-table1  {width: max-content; min-width: 100%; table-layout: initial;}
    .scholarship-table1  th {white-space: nowrap;}
    .scholarship-table1  td {white-space: nowrap;}
}

.download-table1 td button {width: fit-content; height: fit-content; min-width: initial; padding: 0; background-color: transparent;}

@media screen and (max-width: 768px) {
    .download-table1  {width: max-content; min-width: 100%; table-layout: initial;}
    .download-table1  th {white-space: nowrap;}
    .download-table1  td {white-space: nowrap;}
}

/* 명예기자 */
.media-type2.club {grid-template-columns: repeat(3, 1fr); grid-gap: 5rem 1.2rem;}
.media-type2.club > li > a .img {height: 26.2rem;}

@media screen and (max-width: 768px) {
    .media-type2.club {grid-template-columns: repeat(2, 1fr); grid-gap: 2.4rem 1.6rem;}
    .media-type2.club > li > a .img {height: calc((100vw - 4rem - 1.6rem) / 2);}
}

/* 임직원 관람신청 */
.employee-desc {display: flex; flex-flow: column; row-gap: 1.2rem;}
.employee-desc > li {font-size: 1.4rem; line-height: 2rem; word-break: keep-all;}
.employee-desc > li > span {display: block; padding-left: 1.4rem;}

.box .sub-title + .terms-chk {padding: 0;}

.employee-wrap {display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 2.4rem 2rem;}
.employee-wrap > li {display: flex; flex-flow: column; row-gap: .8rem;}
.employee-wrap > li:nth-child(1) {grid-column: 1 / span 2;}
.employee-wrap > li > p {font-size: 1.6rem; font-weight: 500; line-height: 2.4rem;}
.employee-wrap > li > span {font-size: 1.2rem; line-height: 1.6rem; color: var(--body); word-break: keep-all;}

@media screen and (max-width: 768px) {
    .employee-wrap {grid-template-columns: repeat(1, 1fr);}
    .employee-wrap > li:nth-child(1) {grid-column: 1;}
}