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

/* document --------------------------- */
*, *::after, *::before {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

html, body {
    position: relative;
    width: 100%;
    background-color: var(--background);
    margin: 0;
    padding: 0;
    border: 0;
    /* web font + system font */
    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
    font-size: 62.5%; /* 1rem = 1rem */
    font-weight: 400;
    letter-spacing: -0.5px;
    color: var(--headline);
    /* smoothing font */
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
}

/* typography --------------------------- */
h1, h2, h3, h4, h5, h6 {
    clear: both;
    margin: 0;
    padding: 0;
}

b, strong {
    /* add the correct font weight in Chrome, Edge, and Safari */
    font-weight: 600;
}

/* list style --------------------------- */
ul, ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* embedded content --------------------------- */
img {
    /* remove the border on images inside links in IE 10 */
    border-style: none;
}

/* form --------------------------- */
button, input, textarea, select, option {
    /* web font + system font */
    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
    /* Remove the inheritance of text transform in Edge, Firefox and IE. */
    text-transform: none;
    background-color: transparent;
    letter-spacing: -0.5px;
    color: var(--headline);
    font-weight: 400;
    /* Show the overflow in Edge and IE. */
    overflow: visible;
    cursor: pointer;
}

button:disabled, input:disabled {
    cursor: not-allowed;
}

button, [type='button'], [type='reset'], [type='submit'] {
    /* correct the inability to style clickable types in iOS and Safari */
    appearance: button;
    -moz-appearance: button;
    -webkit-appearance: button;
}

[type='checkbox'], [type='radio'] {
    /* remove the padding in IE 10 */
    padding: 0;
    margin: 0;
}

textarea {
    width: 100%;
    /* remove the default vertical scrollbar in IE 10+ */
    overflow: auto;
    resize: none;
}

/* link --------------------------- */
a {
    color: var(--headline);
    text-decoration: none;
    /* remove the gray background on active links in IE 10 */
    background-color: transparent;
    cursor: pointer;
}

a:visited, a:hover, a:active, a:focus {
    color: var(--headline);
    text-decoration: none;
}

/* misc --------------------------- */
[hidden] {
    /* add the correct display in IE 10 */
    display: none;
}

:focus {
    outline: none;
}

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

/* scroll */
::-webkit-scrollbar {width: 0; height: 0; background-color: transparent;}
::-webkit-scrollbar-thumb {background-color: transparent;}
::-webkit-scrollbar-track {background-color: transparent;}

/* align */
.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%);}
.position-center-top {position: absolute; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%);}
.position-center-left {position: absolute; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%);}

/* text overflow */
.ellipsis {overflow: hidden; text-overflow: ellipsis; white-space: nowrap;} /* 한 줄 말줄임, width 지정 필요 */
.ellipsis.double {overflow: hidden; text-overflow: ellipsis; display: -webkit-box;line-clamp: 2; -webkit-line-clamp: 2; -webkit-box-orient: vertical;} /* 두 줄 말줄임 */

/* font color */
.font-black {color: var(--black)!important;}
.font-red {color: var(--red)!important;}
.font-navy {color: var(--navy)!important;}
.font-orange {color: var(--orange)!important;}
.font-dark-gray {color: var(--subheadline)!important;}
.font-gray {color: var(--body)!important;}


.font-kgc {color: var(--kgc-main)!important;}
.font-lg {color: var(--lg-main)!important;}
.font-sk {color: var(--sk-main)!important;}
.font-hd {color: var(--hd-main)!important;}
.font-sono {color: var(--sono-main)!important;}
.font-kcc {color: var(--kcc-main)!important;}
.font-db {color: var(--db-main)!important;}
.font-kt {color: var(--kt-main)!important;}
.font-pega {color: var(--pega-main)!important;}
.font-ss {color: var(--ss-main)!important;}

/* font weight */
.font400 {font-weight: 400!important;}
.font500 {font-weight: 500!important;}
.font600 {font-weight: 600!important;}
.font700 {font-weight: 700!important;}

/* text align */
.text-left {text-align: left!important;}
.text-center {text-align: center!important;}
.text-right {text-align: right!important;}

/* br */
br.mobile {display: none;}

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

/* input */
.input {position: relative; display: flex; align-items: center;}
.input button {display: none; width: fit-content; min-width: initial; height: fit-content; padding: 0; position: absolute; right: 1.2rem; background-color: transparent;}
.input input:focus {padding-right: 6rem;}
.input input:focus + button {display: block;}

.input.event input:focus {border-color: var(--gray01); padding-right: 1.2rem;}
.input.event input:focus + button {display: none;}
.input.event.active input {padding-right: 6rem; border-color: var(--black);}
.input.event.active input + button {display: block;}

input {height: 5.6rem; padding: 0 1.8rem; font-size: 1.6rem; font-weight: 500; border-radius: 1.2rem; border: 1px solid var(--gray01); background-color: var(--white); cursor: text;}
input::placeholder {color: var(--disabled);}

input:focus {border-color: var(--black);}
input:read-only {background-color: var(--gray03);}
input:disabled {background-color: var(--gray03); color: var(--gray01);}
input:invalid {background-color: var(--red);}

input.md {height: 4rem; padding: 0 1.2rem; font-size: 1.4rem; border-radius: .8rem;}
input.md:focus {padding-right: 4.8rem;}

/* input: flex */
.flex-input {display: flex; align-items: center; column-gap: 1.6rem;}

/* input: checkbox */
input[type='checkbox'] {display: none;}
input[type='checkbox'] + label {display: flex; align-items: center; column-gap: .8rem; cursor: pointer; font-size: 1.4rem;}
input[type='checkbox'] + label::before {content: ''; width: 2rem; height: 2rem; background-image: url(../img/ico/ic-chk.svg); background-repeat: no-repeat; background-size: contain; background-position: center;}
input[type='checkbox'] + label > p {font-size: 1.4rem; line-height: 2rem; flex: 1; word-break: keep-all;}
input[type='checkbox']:checked + label::before {background-image: url(../img/ico/ic-chk-ov.svg);}
input[type='checkbox']:disabled + label {color: var(--gray01); cursor: default;}
input[type='checkbox']:disabled + label::before {background-image: url(../img/ico/ic-chk-disabled.svg);}
input[type='checkbox']:checked:disabled + label {color: var(--black);}
input[type='checkbox']:checked:disabled + label::before {background-image: url(../img/ico/ic-chk-ov-disabled.svg);}

/* input: radio */
input[type='radio'] {display: none;}
input[type='radio'] + label {display: flex; align-items: center; column-gap: .8rem; cursor: pointer; font-size: 1.4rem;}
input[type='radio'] + label::before {content: ''; width: 2rem; height: 2rem; background-image: url(../img/ico/ic-radio.svg); background-repeat: no-repeat; background-size: contain; background-position: center;}
input[type='radio']:checked + label::before {background-image: url(../img/ico/ic-radio-ov.svg);}
input[type='radio']:disabled + label {color: var(--gray01); cursor: default;}
input[type='radio']:disabled + label::before {background-image: url(../img/ico/ic-radio-disabled.svg);}
input[type='radio']:checked:disabled + label {color: var(--black);}
input[type='radio']:checked:disabled + label::before {background-image: url(../img/ico/ic-radio-ov-disabled.svg);}

/* input: date */
.date-wrap {width: 100%; display: flex; align-items: center; column-gap: .8rem;}
.date-wrap > li:nth-child(2) {width: 2rem; font-size: 1.4rem; text-align: center;}
.date-wrap > li:nth-child(1),
.date-wrap > li:nth-child(3) {flex: 1; width: calc((100% - 1.6rem - 2rem) / 2);}
.date-wrap > liinput[type='date'] {width: 100%; min-width: initial; height: 4rem; padding: 0 1.2rem; font-size: 1.4rem; border-radius: .8rem;}

@media screen and (max-width: 768px) {
    .date-wrap {column-gap: .4rem; font-size: 1.2rem;}
    .date-wrap input[type='date'] {width: 100%;}
}

input[type='date'] {width: 0; min-width: 100%; padding-right: 6rem; position: relative; display: flex; align-items: center;}
input[type='date']::-webkit-calendar-picker-indicator {position: absolute; right: 1.8rem; z-index: 2; width: 2.4rem; height: 2.4rem; background-image: none;}
input[type='date']::after{content: ''; display: block; position: absolute; right: 1.8rem; width: 2.4rem; height: 2.4rem; background-image: url(../img/ico/ic-date.svg); background-repeat: no-repeat; background-size: contain; background-position: center; z-index: 0;}

/* input: file */
.file {display: flex; align-items: center; column-gap: 1.2rem;}
.file input[type='file'] {display: none;}
.file input[type='text'] {flex: 1; cursor: default;}
.file input[type='text']:read-only {background-color: var(--white);}
.file input[type='text']:focus {border-color: var(--gray01);}
.file input[type='text']:valid {background-color: var(--gray03);}
.file label {min-width: 11.5rem; height: 5.6rem; padding: 0 1.8rem; font-size: 1.6rem; font-weight: 500; display: flex; align-items: center; justify-content: center; border-radius: 1.2rem; border: 1px solid transparent; background-color: var(--black); color: var(--white); cursor: pointer;}
.file label.md {height: 4rem; padding: 0 1.2rem; font-size: 1.4rem; border-radius: .8rem;}
.file button {height: 4.1rem; padding: 0 1.2rem; font-size: 1.4rem; border-radius: .8rem; display: inline-block;}

@media screen and (max-width: 768px) {
    .file {column-gap: .8rem;}
    .file label {min-width: 9.2rem;}
}

/* textarea */
textarea {min-height: 24rem; padding: 1.6rem 1.8rem; font-size: 1.6rem; line-height: 2.4rem; font-weight: 500; border-radius: 1.2rem; border: 1px solid var(--gray01); word-break: keep-all;}
textarea.md {padding: 1rem 1.2rem; font-size: 1.4rem; line-height: 2rem; border-radius: .8rem;}
textarea::placeholder {color: var(--disabled);}

@media screen and (max-width: 768px) {
    textarea {min-height: 20rem; border-radius: .8rem; font-size: 1.4rem; line-height: 2rem;}
}

/* select */
select {height: 5.6rem; padding: 0 6rem 0 1.8rem; font-size: 1.6rem; font-weight: 500; border-radius: 1.2rem; border: 1px solid var(--gray01);  background-image: url(../img/ico/ic-dropdown.svg); background-repeat: no-repeat; background-size: 2.4rem; background-position: center right 1.8rem; -webkit-appearance: none; appearance: none; background-color: var(--white);}
select::-ms-expand {display: none;/*for IE10,11*/}
select:disabled {background-color: var(--gray03); color: var(--gray01); cursor: default;}
select.readonly {background-color: var(--gray03); cursor: default; background-image: none;}

select.md {height: 4rem; padding: 0 4.4rem 0 1.2rem; border-radius: .8rem; background-position: center right 1rem; font-size: 1.4rem;}
select.sm {height: 3.2rem; padding: 0 3.8rem 0 1.2rem; border-radius: .6rem; background-position: center right .4rem; font-size: 1.4rem;}

/* toggle */
.toggle-wrap {position: relative; display: flex; align-items: center;}
.toggle-wrap .toggle {width: 4.4rem; height: 2.4rem; background-color: var(--gray01); border-radius: 10rem; cursor: pointer; -webkit-transition: .3s; transition: .3s; position: relative;}
.toggle-wrap .toggle::before {content: ''; width: 1.8rem; height: 1.8rem; border-radius: 100%; background-color: var(--white); position: absolute; top: .3rem; left: .3rem; -webkit-transition: .3s; transition: .3s;}
.toggle-wrap input:checked + .toggle {background-color: var(--black);}
.toggle-wrap input:checked + .toggle::before {-webkit-transform: translateX(2rem); -ms-transform: translateX(2rem); transform: translateX(2rem);}


/* dropdown */
.dropdown {position: relative; padding: 0 6rem 0 1.8rem; border-radius: 1.2rem; border: 1px solid var(--gray01); background-color: var(--white); background-image: url(../img/ico/ic-dropdown.svg); background-repeat: no-repeat; background-size: 2.4rem; background-position: center right 1.8rem;}
.dropdown:active {background-color: var(--white); border-color: var(--black);}
.dropdown > p {width: 100%; height: 100%; font-size: 1.6rem; line-height: 2.4rem; font-weight: 500; color: var(--black); display: flex; align-items: center;}
.dropdown > ul {display: none;}

.dropdown.active {border-color: var(--black); background-color: var(--white); background-image: url(../img/ico/ic-dropdown-ov.svg); border-radius: 1.2rem 1.2rem 0 0;}
.dropdown.active > ul {position: absolute; top: 5.5rem; left: -.1rem; width: calc(100% + .2rem); display: flex; flex-flow: column; border-radius: 0 0 1.2rem 1.2rem; background-color: var(--white); border: 1px solid var(--black); border-top: 0; z-index: 1;}
.dropdown.active > ul > li > button {width: 100%; justify-content: flex-start; background-color: var(--white); color: var(--black);}
.dropdown.active > ul > li > button:hover {background-color: var(--gray03);}

.dropdown.disabled {border-color: var(--gray01); background-color: var(--gray03); background-image: url(../img/ico/ic-dropdown-disabled.svg); cursor: default;}
.dropdown.disabled > p {color: var(--gray01);}

.dropdown.readonly {border-color: var(--gray01); background-color: var(--gray03); cursor: default; background-image: none;}

.dropdown.md {padding: 0 4.4rem 0 1.2rem; border-radius: .8rem; background-position: center right 1rem;}
.dropdown > p {font-size: 1.4rem; line-height: 2rem;}

.dropdown.md.active {border-radius: .8rem .8rem 0 0;}
.dropdown.md.active > ul {top: 3.9rem; border-radius: 0 0 .8rem .8rem;}
.dropdown.md.active > ul > li > button {height: 4rem; font-size: 1.4rem;}

/* button */
.btn-wrap {display: flex; align-items: center; justify-content: center; column-gap: 1.2rem; margin-top: 5rem; position: relative;}
.btn-wrap.gray {background-color: var(--gray03); padding: 1.2rem;}
.btn-wrap > div {display: flex; align-items: center; column-gap: 1.2rem;}
.btn-wrap > button {min-width: 12.8rem;}
.btn-wrap .right {position: absolute; right: 2rem;}

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

@media screen and (max-width: 768px) {
    .btn-wrap {width: 100vw; height: 8rem; margin: 4rem -2rem -4rem; padding: 0 2rem; background-color: var(--gray03);}
    .btn-wrap.bottom {width: 100vw; height: 8rem; margin: 4rem -2rem -4rem; padding: 0 2rem; background-color: var(--gray03);}
    .btn-wrap > div {flex: 1;}
    .btn-wrap > div > button {width: 100%;}
    .btn-wrap > div > button:nth-child(1):nth-last-child(2), .btn-wrap > div > button:nth-child(1):nth-last-child(2) ~ button {min-width: calc((100% - 1.2rem) / 2);}
    .btn-wrap > button {width: 100%;}
    .btn-wrap > button:nth-child(1):nth-last-child(2), .btn-wrap > button:nth-child(1):nth-last-child(2) ~ button {min-width: calc((100% - 1.2rem) / 2);}

    .btn-wrap.desktop,
    .btn-wrap .desktop {display: none;}
    .btn-wrap.mobile {display: flex; margin-top: 0;}
}

button {width: fit-content; min-width: 7.2rem; height: 5.6rem; padding: 0 1.8rem; font-size: 1.6rem; font-weight: 500; display: flex; align-items: center; justify-content: center; column-gap: .4rem; border-radius: 1.2rem; border: 1px solid transparent; background-color: var(--black); color: var(--white); -webkit-tap-highlight-color: transparent;}
button.md {min-width: 6.4rem; height: 4rem; padding: 0 1.2rem; font-size: 1.4rem; border-radius: .8rem;}
button.sm {min-width: 5.2rem; height: 3.2rem; padding: 0 1.2rem; font-size: 1.4rem; border-radius: .6rem;}

button:active {background-color: #000;}
button:disabled {background-color: var(--gray01)!important; color: var(--disabled)!important;}

button.navy {background-color: var(--navy);}
button.navy:active {background-color: #03154E;}
button.red {background-color: var(--red);}
button.red:active {background-color: #D80808;}

button.line {background-color: var(--white);}
button.line:disabled {border-color: var(--gray01)!important; background-color: var(--gray03)!important; color: var(--gray01)!important;}

button.line.black {border-color: var(--black); color: var(--black);}
button.line.black:active {background-color: var(--gray02);}
button.line.navy {border-color: var(--navy); color: var(--navy);}
button.line.navy:active {background-color: #EEF2FC;}
button.line.gray {border-color: var(--gray01); color: var(--black);}
button.line.gray:active {border-color: var(--black);}

/* number count */
.num-count {display: grid; grid-template-columns: 4rem 5.6rem 4rem; border: 1px solid var(--gray01); border-radius: .8rem; overflow: hidden; background-color: var(--white);}
.num-count > li + li {border-left: 1px solid var(--gray01);}
.num-count > li > button {width: 100%; height: 4rem; min-width: initial; padding: 0; background-color: transparent;}
.num-count > li input {width: 100%; height: 4rem; padding: 0; text-align: center; font-size: 1.4rem; font-weight: 500; border: 0; cursor: auto;}
.num-count > li > input {text-align: center;}

/* label */
.label {display: flex; align-items: center; justify-content: center; min-width: 4rem; height: 2rem; width: fit-content; padding: 0 .4rem; column-gap: 1rem; border-radius: .4rem; background-color: var(--gray02); font-size: 1.2rem; font-weight: 500; line-height: 1.6rem; color: var(--subheadline); border: 1px solid transparent;}

.label.gray {background-color: var(--body); color: var(--white);}
.label.black {background-color: var(--black); color: var(--white);}
.label.orange {background-color: var(--orange); color: var(--white);}
.label.navy {background-color: var(--navy); color: var(--white);}
.label.red {background-color: var(--red); color: var(--white);}
.label.line.navy {border-color: var(--navy); color: var(--navy); background-color: var(--white);}
.label.line.red {border-color: var(--red); color: var(--red); background-color: var(--white);}
.label.line.gray {border-color: var(--body); color: var(--body); background-color: var(--white);}
.label.line.black {border-color: var(--black); color: var(--black); background-color: var(--white);}

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

/* layout */
.layout.grid-2 {display: grid; grid-template-columns: calc(100% - 35rem - 4rem) 35rem; column-gap: 4rem;}
.layout.grid-2 .side {display: block; position: sticky; position: -webkit-sticky;  top: 14.8rem; height: fit-content;}
.layout.grid-2 .side.active {display: block;}
.layout.grid-2 .side .cont-box img {width: 100%; border-radius: 1.2rem; filter: drop-shadow(0px 4px 8px rgba(0, 0, 0, 0.05));}
.layout.grid-2 .side .cont-box > .dropdown {width: 100%; margin-bottom: 2rem;}

.layout .contents .grid-2 {display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 6rem;}
.layout .contents + .cont-box {margin-top: 5rem;}
.layout .contents .cont-box + .grid-2 {margin-top: 5rem;}
.layout .contents .grid-2 + .cont-box {margin-top: 5rem;}
.layout .contents .grid-2 .cont-box + .cont-box {margin-top: 0;}

.cont-box.mobile {display: none;}

.cont-box + .cont-box {margin-top: 5rem;}
.box + .box {margin-top: 4rem;}

@media screen and (max-width: 768px) {
    .layout.grid-2 {display: block;}
    .layout.grid-2 .side {display: none;}
    .layout.grid-2 .side.active {display: block; position: initial;}
    .layout.grid-2 .side.mobile {display: block; margin-top: 4rem;}

    .layout .contents .grid-2 {grid-template-columns: repeat(1, 1fr); row-gap: 4rem;}
    .layout .contents + .cont-box {margin-top: 4rem;}
    .layout .contents .cont-box + .grid-2 {margin-top: 4rem;}
    .layout .contents .grid-2 + .cont-box {margin-top: 4rem;}

    .cont-box.desktop {display: none;}
    .cont-box.mobile {display: block;}

    .cont-box.desktop + .cont-box.mobile {margin-top: 0;}
    .cont-box + .cont-box {margin-top: 4rem;}
    .box + .box {margin-top: 2.4rem;}
}

.prev.mobile {display: none;}

@media screen and (max-width: 768px) {
    .prev.mobile {display: flex; width: 100vw; height: 5.6rem; display: flex; align-items: center; margin: -2.4rem -2rem 2.4rem; padding: 0 2rem; font-size: 1.6rem; line-height: 2.4rem; font-weight: 600; border-bottom: 1px solid var(--gray02);}
}

/* team rank table */
.team-rank-table table tbody tr:first-child > * {color: var(--orange);}
.team-rank-table table tbody tr:last-child > * {border-bottom: 0;}
.team-rank-table table tbody tr.ver02 > * {color: var(--headline)!important;}

/* team name */
.team-name {display: flex; align-items: center; column-gap: .4rem;}
.team-name > p {flex: 1; max-width: 10rem; text-align: left; font-size: 1.4rem; font-weight: 500; line-height: 2rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}

/* player name */
.player-name {display: flex; align-items: center; column-gap: .8rem;}
.player-name > div {width: 2.4rem; height: 2.4rem; background-color: var(--gray03); border-radius: 100%; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden;}
.player-name > div > img {width: 110%; position: absolute; top: .2rem;}
.player-name > p {flex: 1; font-size: 1.4rem; line-height: 2rem; text-align: left;}

/* notice */
.notice-preview {display: grid; grid-template-columns: repeat(2, 1fr); column-gap: .8rem;}
.notice-preview > li {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-preview > li > 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;}
.notice-preview > li > span {font-size: 1.2rem; line-height: 1.6rem; color: var(--body);}

/* event */
.event-preview {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));}
.event-preview .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-preview .event-name > p {font-size: 1.6rem; line-height: 2.4rem; font-weight: 600;}
.event-preview .event-desc > p {font-size: 1.6rem; line-height: 2.4rem; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.event-preview .event-desc > span {font-size: 1.2rem; line-height: 1.6rem; color: var(--body); display: block; margin-top: .8rem;}
.event-preview .event-desc .img {width: 100%; height: 17.4rem; background-repeat: no-repeat; background-size: cover; background-position: top center; margin-top: 2rem; position: relative; border-radius: 1.2rem; overflow: hidden;}
/* .event-preview .event-desc .img::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.05) 50%); z-index: 1; border-radius: .8rem .8rem 0 0;} */
.event-preview .event-desc > button {margin-top: 2rem; width: 100%;}

/* tab style */
.tab-style1 {width: 100%; display: flex; column-gap: 2rem; border-bottom: 1px solid var(--gray01); margin-bottom: 2.4rem; background-color: var(--white); position: relative; z-index: 10;}
.tab-style1 > li:nth-child(1):nth-last-child(2), .tab-style1 > li:nth-child(1):nth-last-child(2) ~ li {width: calc((100% - (2rem * 1)) / 2);}
.tab-style1 > li:nth-child(1):nth-last-child(4), .tab-style1 > li:nth-child(1):nth-last-child(4) ~ li {width: calc((100% - (2rem * 3)) / 4);}
.tab-style1 > li > a {height: 4.4rem; display: flex; align-items: center; justify-content: center; flex-flow: column; font-size: 1.6rem; color: var(--body); position: relative; text-align: center;}
.tab-style1 > li > a.active {color: var(--black); font-weight: 600;}
.tab-style1 > li > a.active::after {content: ''; width: 100%; height: .2rem; background-color: var(--black); position: absolute; bottom: -.1rem;}

@media screen and (max-width: 768px) {
    .tab-style1 {width: 100vw; margin: -2.4rem -2rem 2.4rem; column-gap: 1.2rem;}
    .tab-style1 > li:nth-child(1):nth-last-child(2), .tab-style1 > li:nth-child(1):nth-last-child(2) ~ li {width: calc((100% - (1.2rem * 1)) / 2);}
    .tab-style1 > li:nth-child(1):nth-last-child(4), .tab-style1 > li:nth-child(1):nth-last-child(4) ~ li {width: calc((100% - (1.2rem * 3)) / 4);}

    .tab-style1.sticky {position: sticky; position: -webkit-sticky; top: 5.6rem; z-index: 11;}
}

.cont-box + .tab-style2 {margin-top: 5rem;}
.tab-style2 {width: 100%; display: flex; align-items: center; flex-wrap: wrap; background-color: #ebebeb; border-radius: .8rem; overflow: hidden; margin-bottom: 2.4rem;}
.tab-style2 > li:nth-child(1):nth-last-child(2), .tab-style2 > li:nth-child(1):nth-last-child(2) ~ li {width: calc(100% / 2);}
.tab-style2 > li:nth-child(1):nth-last-child(3), .tab-style2 > li:nth-child(1):nth-last-child(3) ~ li {width: calc(100% / 3);}
.tab-style2 > li:nth-child(1):nth-last-child(4), .tab-style2 > li:nth-child(1):nth-last-child(4) ~ li {width: calc(100% / 4);}
.tab-style2 > li:nth-child(1):nth-last-child(5), .tab-style2 > li:nth-child(1):nth-last-child(5) ~ li {width: calc(100% / 5);}
.tab-style2 > li:nth-child(1):nth-last-child(6), .tab-style2 > li:nth-child(1):nth-last-child(6) ~ li {width: calc(100% / 6);}
.tab-style2 > li > a {width: 100%; height: 4rem; padding: 0 .4rem; display: flex; align-items: center; justify-content: center; text-align: center; font-size: 1.4rem; line-height: 2rem; color: var(--body); cursor: pointer; border-radius: .8rem;}
.tab-style2 > li > a.active {background-color: var(--black); font-weight: 600; color: var(--white);}

@media screen and (max-width: 768px) {
    .tab-style1 + .tab-style2 {margin-top: -.8rem;}
    .tab-style2 {margin-top: -1.2rem;}
    .tab-style2.desktop {display: none;}

    .tab-style2 > li:nth-child(1):nth-last-child(4), .tab-style2 > li:nth-child(1):nth-last-child(4) ~ li {width: calc(100% / 2);}
}

/* depth */
.depth {margin-bottom: 2rem; display: flex; align-items: center; column-gap: .4rem;}
.depth > li {font-size: 2rem; line-height: 2.8rem; color: var(--body); display: flex; align-items: center; column-gap: .4rem;}
.depth > li:not(:last-child):after {content: ''; width: 2.4rem!important; height: 2.4rem; background-image: url(../img/ico/ic-depth.svg); background-repeat: no-repeat; background-size: contain; background-position: center;}
.depth > li:last-child {font-weight: 600; color: var(--black); display: initial; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}

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

/* title */
.title {margin-bottom: 3rem; display: flex; align-items: center; justify-content: space-between;}
.title > h2 {font-size: 2.4rem; line-height: 3.2rem; font-weight: 600; display: flex; align-items: center; column-gap: .8rem;}
.title > h2 > i {width: 2.8rem; height: 2.8rem;}
.title > h2 > img {height: 3.2rem;}
.title > a {font-size: 1.4rem; line-height: 2rem; color: var(--body); text-decoration: underline;}
.title .button {display: flex; align-items: center; column-gap: 1.6rem;}
.title button {width: fit-content; height: fit-content; min-width: initial; padding: 0; background-color: transparent; margin-left: auto;}
.title .depth {margin-bottom: 0;}
.title.mobile {display: none;}
.title .mobile {display: none;}

.mid-title {margin-bottom: 2rem; display: flex; align-items: center; justify-content: space-between;}
.mid-title.mobile {display: none;}
.mid-title .mobile {display: none;}
.mid-title > h3 {font-size: 2rem; line-height: 2.8rem; font-weight: 600; display: flex; align-items: center; column-gap: .8rem; word-break: keep-all;}
.mid-title > h3 > span {font-size: 1.4rem; line-height: 2rem; font-weight: 500;}
.mid-title > div {display: flex; align-items: center; column-gap: 1.6rem;}
.mid-title > p {font-size: 1.4rem; line-height: 2rem; color: var(--subheadline);}
.mid-title button {width: fit-content; height: fit-content; min-width: initial; padding: 0; background-color: transparent; margin-left: auto;}
.mid-title button.sm {min-width: 5.2rem; height: 3.2rem; padding: 0 1.2rem;}
.mid-title button.md {min-width: 6.4rem; height: 4rem; padding: 0 3.2rem; font-size: 1.4rem; border-radius: .8rem;}
.mid-title button.black {background-color: var(--black);}
.mid-title button.line.black {background-color: var(--white);}
.mid-title a {display: flex; align-items: center; column-gap: .4rem; font-size: 1.4rem; line-height: 2rem; color: var(--body);}

.mid-title .select {column-gap: 1rem;}
.mid-title .select select {min-width: 15rem; height: 4rem; padding: 0 4.4rem 0 1.2rem; border-radius: .8rem; background-position: center right 1rem; font-size: 1.4rem;}

.sub-title {margin-bottom: 1.2rem; display: flex; align-items: center; justify-content: space-between;}
.sub-title > h4 {font-size: 1.6rem; line-height: 2.4rem; font-weight: 600; color: var(--subheadline);}
.sub-title > a {display: flex; align-items: center; font-size: 1.2rem; font-weight: 500; line-height: 1.6rem; color: var(--body);}
.sub-title > p {font-size: 1.2rem; line-height: 1.6rem; color: var(--body);}

@media screen and (max-width: 768px) {
    .title.desktop {display: none;}
    .title.mobile,
    .title .mobile {display: flex;}

    .mid-title {margin-bottom: 1.6rem; grid-gap: 1.2rem .8rem; flex-wrap: wrap;}
    .mid-title .desktop {display: none;}
    .mid-title.mobile {display: flex;}
    .mid-title .mobile {display: block;}
    .mid-title > h3 {font-size: 1.6rem; line-height: 2.4rem;}
    .mid-title > p {font-size: 1.4rem; font-weight: 500; line-height: 2rem;}
    .mid-title > div {column-gap: .8rem;}

    .mid-title .select {width: 100%; display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: .8rem;}
    .mid-title .select select:nth-child(1):nth-last-child(1) {grid-column: 1 / span 2; width: 100%;}
    .mid-title .select + .view-tab {margin-left: auto;}
}

/* side table */
.side table::before {content: none;}
.side table thead {border-top: 0;}
.side table thead tr > * {height: fit-content; font-size: 1.2rem; line-height: 1.6rem; background-color: var(--white); padding: 0 .6rem 1.2rem; border-bottom: 1px solid var(--gray02);}
.side table thead tr > * + * {border-left: 0;}
.side table tbody {padding-top: 2rem;}
.side table tbody tr > * {height: 4rem; font-weight: 500; border-bottom: 0;}

/* table */
table {width: 100%; border-spacing: 0; border-collapse: collapse; position: relative;}
table::before {content: ''; width: 100%; height: 1px; background-color: var(--disabled); position: absolute; top: 0; left: 0; z-index: 10;}
table::after {content: ''; width: 100%; height: 1px; background-color: var(--gray01); position: absolute; bottom: 0; left: 0; z-index: 10;}
table caption {position: absolute; width: 0; height: 0; overflow: hidden; color: transparent;}
table thead tr > * {height: 3.6rem; padding: .6rem .8rem; background-color: var(--gray03); vertical-align: middle; font-size: 1.4rem; line-height: 2rem; text-align: center; border-bottom: 1px solid var(--gray02); color: var(--body); word-break: keep-all;}
table thead tr > * + * {border-left: 1px solid var(--gray02);}
table thead tr > th[rowspan] {border-right: 1px solid var(--gray02);}
table tbody tr > th {background-color: var(--gray03); border-block-color: #ececec; color: var(--body); word-break: keep-all;}
table tbody tr > * {height: 4rem; padding: .6rem .8rem; background-color: var(--white); vertical-align: middle; font-size: 1.4rem; line-height: 2rem; text-align: center; border-bottom: 1px solid var(--gray03); word-break: keep-all;}
table tbody tr:last-child > * {border-bottom: 0;}
table tbody tr button {margin: 0 auto;}

table thead .order {min-width: auto; width: calc(100% + 1.6rem); height: calc(100% + 1.2rem); margin: -.6rem -.8rem; padding: .6rem .8rem; border-radius: 0; background-color: rgba(1, 27, 106, 0.1); font-size: 1.4rem; line-height: 2rem; text-align: center; color: var(--body); position: relative; border: 0;}
table thead .order::before {content: ''; width: 100%; height: .2rem; background-color: var(--navy); position: absolute; left: 0; z-index: 12;}
table thead .order.des::before {top: 0;}
table thead .order.asc::before {bottom: 0;}

.table-1200 {width: calc(100% + 4rem + 35rem); overflow-y: auto;}
.table-1200::-webkit-scrollbar {height: .4rem;}
.table-1200::-webkit-scrollbar-thumb {background-color: var(--gray01);}
.table-1200::-webkit-scrollbar-track {background-color: var(--gray03);}

.table-100 {width: 100%; overflow-y: auto;}
.table-100::-webkit-scrollbar {height: .4rem;}
.table-100::-webkit-scrollbar-thumb {background-color: var(--gray01);}
.table-100::-webkit-scrollbar-track {background-color: var(--gray03);}

.table-desc {margin-top: 1.2rem; display: flex; align-items: center; column-gap: .4rem; font-size: 1.2rem; line-height: 1.6rem; font-weight: 500;}
.table-desc.top {margin-bottom: 1.2rem; display: flex; align-items: center; justify-content: flex-end; column-gap: .4rem; font-size: 1.2rem; line-height: 1.6rem; font-weight: 500;}


@media screen and (max-width: 768px) {
    .table-1200 {width: 100vw; margin: 0 -2rem;}
    .table-100 {width: 100vw; margin: 0 -2rem; overflow-y: auto;}
}

/* empty */
.empty {height: 60rem; display: flex; align-items: center; justify-content: center; flex-flow: column; row-gap: 2.4rem; cursor: default;}
.empty.sm {height: 26rem;}
.empty > p {font-size: 1.6rem; line-height: 2.4rem; color: var(--disabled);}

.empty-wrap {width: 100vw; height: 100vh; display: flex; flex-flow: column; align-items: center; justify-content: center; flex-flow: column; row-gap: 2.4rem; position: fixed; top: 0; left: 0;}
.empty-wrap > p {font-size: 1.6rem; line-height: 2.4rem; color: var(--disabled);}
.empty-wrap-ver02 {height: 50vh; display: flex; align-items: center; justify-content: center; flex-flow: column; row-gap: 2.4rem; top: 0; left: 0;}
.empty-wrap-ver02 > p {font-size: 1.6rem; line-height: 2.4rem; color: var(--disabled);}

@media screen and (max-width: 768px) {
    .empty {height: 40rem;}
}

/* error */
.error {width: 100vw; height: 100vh; position: fixed; top: 0; left: 0; z-index: 1000; padding: 4rem 0; background-image: url(../img/error/error-bg.svg); background-repeat: no-repeat; background-size: cover; background-position: center; display: flex; flex-flow: column; align-items: center; justify-content: center; row-gap: 1.6rem;}
.error > i {margin-bottom: 2rem;}
.error > p {text-align: center; font-size: 2.4rem; line-height: 3.2rem; font-weight: 600; color: var(--white);}
.error > span {text-align: center; font-size: 1.6rem; line-height: 2.4rem; font-weight: 600; color: var(--gray01);}
.error > button {margin-top: 3.2rem;}

@media screen and (max-width: 768px) {
    .error {padding: 2rem; row-gap: 1.2rem; background-image: url(../img/error/error-bg-mb.png);}
    .error > i {margin-bottom: 1.2rem;}
    .error > p {font-size: 1.6rem; line-height: 2.4rem;}
    .error > span {font-size: 1.2rem; line-height: 1.6rem;}
    .error > button {width: calc(100% - 4rem); position: absolute; bottom: 4rem;}
}

/* pagination */
.table-1200 + .pagination {width: 120rem;}

.pagination {display: flex; align-items: center; column-gap: .8rem; justify-content: center; margin-top: 5rem;}
.pagination > li {display: flex; align-items: center; justify-content: center;}
.pagination > li:nth-child(1) {margin-right: -.8rem;}
.pagination > li:nth-last-child(1) {margin-left: -.8rem;}
.pagination > li > a {width: 3.2rem; height: 3.2rem; display: flex; align-items: center; justify-content: center;}
.pagination > li > a.disabled {cursor: default;}
.pagination > li > a > p {width: 2.4rem; height: 2.4rem; border-radius: .6rem; font-size: 1.4rem; font-weight: 500; line-height: 2rem; color: var(--body); display: flex; align-items: center; justify-content: center;}
.pagination > li > a.active > p {background-color: var(--black); font-weight: 600; color: var(--white);}

@media screen and (max-width: 768px) {
    .table-1200 + .pagination {width: 100%;}
    .pagination {margin-top: 4.2rem;}
}

/* pop */
.pop {display: none; align-items: center; justify-content: center; position: fixed; top: 0; left: 0; width: 100vw; height: 100dvh; z-index: 1000; background-color: rgba(0,0,0,0.54);}
.pop.active {display: flex;}
.pop .pop-wrap {background-color: var(--white); border-radius: 2rem; width: 39rem; display: flex; flex-flow: column; overflow: hidden; position: relative;}
.pop .pop-wrap.md {width: 62rem;}
.pop .pop-wrap.lg {width: 78rem;}
.pop .pop-wrap .pop-tit {margin-top: 2.4rem; padding: 0 2rem; display: flex; align-items: center; justify-content: space-between;}
.pop .pop-wrap .pop-tit > h2 {font-size: 2rem; font-weight: 600; line-height: 2.8rem;}
.pop .pop-wrap .pop-tit > div {display: flex; align-items: center; column-gap: 1.6rem;}
.pop .pop-wrap .pop-tit .close {width: fit-content; min-width: initial; height: fit-content; padding: 0; background-color: transparent;}
.pop .pop-wrap .pop-tit + .pop-cont {margin-top: 1.6rem; flex: 1; display: flex; flex-flow: column;}
.pop .pop-wrap .pop-cont {width: 100%; overflow-x: hidden; margin-top: 4rem; padding: 0 2rem 2.8rem; max-height: 46.4rem; overflow-y: auto;}
.pop .pop-wrap .pop-cont > p {font-size: 1.6rem; line-height: 2.4rem;}
.pop .pop-wrap .pop-cont > p:nth-child(1):nth-last-child(1) {text-align: center;}
.pop .pop-wrap .pop-cont > p + * {margin-top: 2.4rem;}
.pop .pop-wrap .pop-cont .cont-box + .cont-box {margin: 2.4rem -2rem 0; border-top: 1.2rem solid var(--gray03); padding: 2.4rem 2rem 0;}
.pop .pop-wrap .pop-tit + .pop-cont {padding-bottom: 2.4rem;}
.pop .pop-wrap .pop-tit ~ .pop-btn {background-color: var(--gray03);}
.pop .pop-wrap .pop-btn {padding: 1.2rem 2rem; display: flex; align-items: center; justify-content: center; column-gap: 1.2rem;}
.pop .pop-wrap .pop-btn > button {width: calc((100% - 1.2rem) / 2);}
.pop.desktop.active {display: flex;}
.pop.mobile.active {display: none;}

@media screen and (max-width: 768px) {
    .bottom-sheet.pop {align-items: flex-end;}
    .bottom-sheet.pop .pop-wrap {border-radius: 2rem 2rem 0 0; width: 100%!important;}
    .bottom-sheet.pop .pop-wrap .pop-cont {max-height: 36.4rem; overflow-y: auto; padding: 0 2rem 2.8rem;}
    .bottom-sheet.pop .pop-wrap .pop-cont .tab-style1 {position: sticky; position: -webkit-sticky;  top: 0;}
    .pop .pop-wrap .pop-btn > button:nth-child(1):nth-last-child(1) {width: 100%;}

    .pop .pop-wrap,
    .pop .pop-wrap.md,
    .pop .pop-wrap.lg {width: calc(100% - 4rem);}
    .pop.desktop.active {display: none;}
    .pop .pop-btn.desktop {display: none;}
    .pop.mobile.active {display: flex;}
}

/* toast */
.toast {display: none;}

@media screen and (max-width: 768px) {
    .toast {position: fixed; bottom: -12rem; opacity: 0; display: flex; width: calc(100% - 4rem); align-items: center; justify-content: center; padding: 2rem; transition: all .3s ease-in; border-radius: 1.2rem; background-color: rgba(0,0,0,0.8); z-index: 100;}
    .toast > p {font-size: 1.6rem; line-height: 2.4rem; text-align: center; color: var(--white);}

    .toast.active {bottom: 2rem; opacity: 1;}
}