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

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

/* Prevent font size inflation */
html {
    text-size-adjust: none;
    -webkit-text-size-adjust: none;
    -ms-text-size-adjust : none;
    -moz-text-size-adjust: none;
    /* smoothing font */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: auto;
}  

html, body {
    position: relative;
    width: 100%;
    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;
    color: var(--white);
    background-color: var(--gray90);
}

/* 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;
    font-weight: 400;
    letter-spacing: -0.5px;
    /* Remove the inheritance of text transform in Edge, Firefox and IE. */
    text-transform: none;
    color: var(--white);
    background-color: transparent;
    /* 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(--white);
    text-decoration: none;
    text-decoration-skip-ink: auto;
    /* 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(--white);
    text-decoration: none;
}

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

:focus {
    outline: none;
}

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

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

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

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

/* scroll */
::-webkit-scrollbar {width: 0; height: 0; background-color: transparent; display: none;}
::-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 style */
.font-blue {color: var(--blue50)!important;}
.font-gold {color: var(--point4)!important;}

/* label */
.label {width: fit-content; height: 1.8rem; padding: 0 .8rem; display: flex; align-items: center; justify-content: center; border-radius: .4rem; border: 1px solid var(--gray70); background-color: var(--gray80); font-size: 1rem; font-weight: 600;}

.label.sm {height: 1.6rem; padding: 0 .5rem; font-size: 1rem;}
.label.lg {height: 2.4rem; padding: 0 1.2rem; font-size: 1.2rem;}

.label.point {background-color: var(--blue50);}

.label.line {background-color: transparent; border-color: var(--blue50); color: var(--blue50);}
.label.line.light {border-color: var(--blue20); color: var(--blue20);}
.label.line.point1 {border-color: var(--point1); color: var(--point1);}
.label.line.point2 {border-color: var(--point2); color: var(--point2);}
.label.line.point3 {border-color: var(--point3); color: var(--point3);}
.label.line.point4 {border-color: var(--point4); color: var(--point4);}
.label.line.point5 {border-color: var(--point5); color: var(--point5);}


/* flex input */
.flex-input {display: flex; align-items: center; grid-gap: 1.2rem; flex-wrap: wrap;}
.flex-input > li textarea {height: 8rem;}

.flex-input.ver {flex-flow: column; align-items: initial; row-gap: .8rem;}
.flex-input.ver > li {display: flex; flex-flow: column; row-gap: 1.2rem;}

/* input */
input {width: 100%; height: 4.4rem; padding: 0 1.2rem; border-radius: .4rem; background-color: var(--gray80); border: 1px solid var(--gray70); font-size: 1.4rem;}
input:read-only,
input:disabled {color: var(--gray40); cursor: default;}
input::placeholder {color: var(--gray30);}
input:focus {border-color: var(--gray40);}

/* input[type="file"] */
.file {display: flex; align-items: center; column-gap: .8rem; width: 100%;}
.file input {flex: 1;}
.file input + label {display: flex; align-items: center; justify-content: center; border-radius: .4rem; width: 9.6rem; height: 4.4rem; background-color: var(--gray40); font-size: 1.4rem; font-weight: 500; cursor: pointer;}

input[type="file"] {display: none;}

/* input[type="checkbox"] */
input[type="checkbox"] {display: none;}
input[type="checkbox"] + label {display: flex; column-gap: .8rem; align-items: flex-start; cursor: pointer;}
input[type="checkbox"] + label::before {content: ''; width: 1.8rem; height: 1.8rem; background-image: url(/assets/img/ico/ic-chk-295051a867a47980d104b3878e21649d.svg); background-repeat: no-repeat; background-size: contain; background-position: center; position: relative; top: .3rem;}
input[type="checkbox"] + label > p {font-size: 1.4rem; font-weight: 500; flex: 1; line-height: 1.6; word-break: keep-all;}
input[type="checkbox"]:checked + label::before {background-image: url(/assets/img/ico/ic-chk-ov-f09efac6d7b47a0a3d2d5f414ccd8caf.svg);}
input[type="checkbox"]:disabled + label {cursor: default;}
input[type="checkbox"]:checked:disabled + label {cursor: default;}
input[type="checkbox"]:checked:disabled + label::before {background-image: url(/assets/img/ico/ic-chk-dis-f04a5c7cede99c4dc30e8b2ec4c935e4.svg);}

/* input[type="radio"] */
input[type="radio"] {display: none;}
input[type="radio"] + label {display: flex; column-gap: .8rem; align-items: flex-start; cursor: pointer;}
input[type="radio"] + label::before {content: ''; width: 1.8rem; height: 1.8rem; background-image: url(/assets/img/ico/ic-radio-87f292042d7dea68c642a42f8d3b2b70.svg); background-repeat: no-repeat; background-size: contain; background-position: center; position: relative; top: .3rem;}
input[type="radio"] + label > p {font-size: 1.4rem; font-weight: 500; flex: 1; line-height: 1.6; word-break: keep-all;}
input[type="radio"]:checked + label::before {background-image: url(/assets/img/ico/ic-radio-ov-cea7e27e9918231ca231da905e42e262.svg);}
input[type="radio"]:disabled + label {cursor: default;}
input[type="radio"]:checked:disabled + label {cursor: default;}
input[type="radio"]:checked:disabled + label::before {background-image: url(/assets/img/ico/ic-radio-dis-ed3de0e9f7ceb4f4be0fb88c82db7581.svg);}

/* textarea */
textarea {width: 100%; height: 20rem; padding: 1.2rem; border-radius: .4rem; background-color: var(--gray80); border: 1px solid var(--gray70); font-size: 1.4rem; line-height: 1.6;}
textarea::placeholder {color: var(--gray30);}
textarea:focus {border-color: var(--gray40);}

/* button */
.bottom-fixed::after {content: ''; width: 100%; height: calc(1rem + 4.8rem); display: block;}
.bottom-fixed:has(.btn-wrap.ver)::after {height: calc(1rem + 4.8rem + 4.8rem + .8rem);}
.bottom-fixed > div {position: fixed; left: 0; bottom: 0; width: 100%; padding: 1rem 1.6rem 3.4rem; background-color: var(--gray90); z-index: 100;}
.bottom-fixed > div .btn-wrap {margin-top: 0;}

.btn-wrap {margin-top: 2rem; display: flex; align-items: center; justify-content: center; column-gap: .8rem;}
.btn-wrap button:nth-last-child(2) {background-color: var(--gray70);}

.btn-wrap.ver {flex-flow: column; row-gap: .8rem;}
.btn-wrap.ver button:nth-last-child(2) {background-color: transparent; border-color: var(--blue50); color: var(--blue50);}

button {width: 100%; height: 4.8rem; padding: 0 1.2rem; border-radius: .4rem; font-size: 1.6rem; font-weight: 600; background-color: var(--blue50); display: flex; align-items: center; justify-content: center; column-gap: .4rem; border: 1px solid transparent; cursor: pointer;}
button:disabled {background-color: var(--gray70)!important; color: var(--gray40)!important; cursor: default;}

button.red {background-color: var(--danger);}
button.gray {background-color: var(--gray70);}
button.light-gray {background-color: var(--gray40);}

/* select */
select {width: 100%; height: 4.4rem; padding: 0 4rem 0 1.2rem; border-radius: .4rem; background-color: var(--gray80); border: 1px solid var(--gray70); font-size: 1.4rem; background-image: url(/assets/img/ico/ic-arrow-down-16-45e562cc38301543ebdc929b716acc61.svg); background-repeat: no-repeat; background-size: 1.2rem; background-position: center right 1.6rem; -webkit-appearance: none; appearance: none;}
select::-ms-expand {display: none;/*for IE10,11*/}

/* toggle */
.toggle-wrap {position: relative; display: flex; align-items: center;}
.toggle-wrap .toggle {width: 4.4rem; height: 2.4rem; background-color: var(--gray70); border-radius: 40rem; cursor: pointer; -webkit-transition: .3s; transition: .3s; position: relative;}
.toggle-wrap .toggle::before {content: ''; width: 2rem; height: 2rem; border-radius: 100%; background-color: var(--white); position: absolute; top: .2rem; left: .2rem; -webkit-transition: .3s; transition: .3s; filter: drop-shadow(1px 1px 4px rgba(0, 0, 0, 0.12));}
.toggle-wrap input:checked + .toggle {background-color: var(--blue50);}
.toggle-wrap input:checked + .toggle::before {-webkit-transform: translateX(2rem); -ms-transform: translateX(2rem); transform: translateX(2rem);}


/* title */
.title {display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.6rem;}
.title > h2 {font-size: 2rem; font-weight: 700; line-height: 1.6;}
.title > a {display: flex; align-items: center; column-gap: .6rem; font-size: 1.4rem;}
.title > select {width: fit-content; height: 2.4rem; background-color: transparent; border: 0; padding: 0 2.2rem 0 0; background-position: center right;}

.sub-title {display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.6rem;}
.sub-title > h3 {font-size: 1.6rem; font-weight: 700; line-height: 1.6;}
.sub-title > a {display: flex; align-items: center; column-gap: .6rem; font-size: 1.4rem;}

/* tab */
main .tab-style01:first-child {margin-top: -1rem;}
.tab-style01 {width: 100vw; margin: 0 -1.6rem 2rem; display: flex; align-items: center; border-bottom: 1px solid var(--gray70); position: sticky; top: 0; background-color: var(--gray90); z-index: 10;}
.tab-style01 > li {flex: 1; height: 4.4rem; display: flex; align-items: center; justify-content: center;}
.tab-style01 > li > p {height: 100%; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; font-weight: 500; color: var(--gray30); position: relative;}
.tab-style01 > li.active > p {font-weight: 600; color: var(--blue50);}
.tab-style01 > li.active > p::after {content: ''; width: 100%; height: .2rem; background-color: var(--blue50); display: block; position: absolute; left: 0; bottom: -1px; z-index: 1;}

.tab-style01:has(> li:nth-child(5)) {justify-content: space-around;}
.tab-style01:has(> li:nth-child(5)) > li {flex: initial; padding: 0 .8rem;}


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

.tab-style02 {width: 100vw; margin: 0 -1.6rem; padding: 0 1.6rem; margin-bottom: 2rem; overflow-x: auto; display: flex; align-items: center; column-gap: .8rem;}
.tab-style02 > li {width: fit-content; height: 3rem; border-radius: 2rem; padding: 0 1.2rem; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; font-weight: 500; background-color: var(--gray80); border: 1px solid var(--gray70); color: var(--gray30); white-space: nowrap;}
.tab-style02 > li.active {background-color: var(--white); border-color: var(--white); color: var(--gray90); font-weight: 600;}

.tab-sharing {width: 100vw; margin: 0 -1.6rem; padding: 0 1.6rem; margin-bottom: 2rem; overflow-x: auto; display: flex; align-items: center; column-gap: .8rem;}
.tab-sharing > li {width: fit-content; height: 3rem; border-radius: 2rem; padding: 0 1.2rem; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; font-weight: 500; background-color: var(--gray80); border: 1px solid var(--gray70); color: var(--gray30); white-space: nowrap;}
.tab-sharing > li.active {background-color: var(--white); border-color: var(--white); color: var(--gray90); font-weight: 600;}

/* info input */
.info-input {display: flex; flex-flow: column; row-gap: 2rem;}
.info-input > li {display: flex; flex-flow: column; row-gap: .8rem;}
.info-input > li > p {font-size: 1.2rem; font-weight: 500;}
.info-input > li > p > span {color: var(--point1);}
.info-input > li > div {display: flex; align-items: center; column-gap: .8rem; width: 100%;}
.info-input > li > div > button {width: 9.6rem; height: 4.4rem; background-color: var(--gray40); font-size: 1.4rem; font-weight: 500;}
.info-input > li > span {margin-top: -.2rem; font-size: 1.2rem; color: var(--point1);}

.info-input .grid-2 {display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 2rem;}
.info-input .grid-2 > div {display: flex; flex-flow: column; row-gap: .8rem; align-items: initial;}
.info-input .grid-2 > div > p {font-size: 1.2rem; font-weight: 500;}

/* table */
.scroll {width: calc(100% + 1.6rem); margin-right: -1.6rem; padding-right: 1.6rem; overflow-x: auto;}
.scroll table {min-width: 100%; width: max-content;}
.scroll table tr > * {position: relative;}
.scroll table tr td + td::before {content: ''; width: 1px; height: 1rem; background-color: var(--gray70); display: block; left: 0; position: absolute;}

table {width: 100%; border-collapse: collapse; border-spacing: 0;}
table thead {padding-bottom: .4rem;}
table thead th {height: 3.2rem; font-size: 1.2rem; color: var(--gray30); text-align: center; vertical-align: middle; background-color: var(--gray70); border-bottom: .4rem solid var(--gray90); border-bottom: 2px solid var(--gray90);}
table tbody td {height: 3.6rem; font-size: 1.2rem; text-align: center; vertical-align: middle; background-color: var(--gray80);border-bottom: 2px solid var(--gray90);}
table tbody td .label {margin: 0 auto;}

/* team name */
.team-name {display: flex; align-items: center; column-gap: 1rem;}
.team-name > i {width: 2.4rem; height: 2.4rem;}
.team-name > p {font-size: 1.4rem; font-weight: 500;}

/* empty */
.empty {width: 100%!important; margin: 0!important; padding: 4rem 0!important; display: flex; flex-flow: column; row-gap: 1.2rem!important; align-items: center; justify-content: center;}
.empty.full {height: calc(100dvh - 1rem - 3.4rem);}
.empty > p {font-size: 1.4rem; font-weight: 500; text-align: center; line-height: 1.4;}

/* notification */
.notification {height: calc(100dvh - 1rem - 9.2rem); display: flex; flex-flow: column; row-gap: 2rem; align-items: center; justify-content: center;}
.notification > i {width: 7.2rem; height: 7.2rem;}
.notification > div {display: flex; flex-flow: column; row-gap: 1.2rem; align-items: center;}
.notification > div > p {font-size: 1.6rem; font-weight: 500; text-align: center;}
.notification > div > span {font-size: 1.4rem; font-weight: 500; text-align: center; line-height: 1.4;}
.notification > div > span > span {color: var(--blue50); font-weight: 600;}

/* notice */
.notice-desc {margin-top: 2rem;}
.notice-desc > p {font-size: 1.4rem; color: var(--gray30); line-height: 1.6; word-break: keep-all;}

.notice {width: 100vw; margin: 4rem -1.6rem 0; padding: 2rem 1.6rem; display: flex; flex-flow: column; background-color: var(--gray80);}
.notice .sub-title {margin-bottom: .4rem;}
.notice > p {font-size: 1.4rem; color: var(--gray30); line-height: 1.6; word-break: keep-all;}
.notice > ul {display: flex; flex-flow: column; row-gap: .6rem;}
.notice > ul > li {display: flex; column-gap: 1rem; font-size: 1.4rem; color: var(--gray20); line-height: 1.4; word-break: keep-all;}
.notice > ul > li::before {content: '・';}
.notice > ul > li > span {font-weight: 600; color: var(--white); text-align: center;}

/* pop */
.pop {width: 100vw; height: 100dvh; position: fixed; top: 0; left: 0; background-color: rgba(0,0,0,.6); display: none; align-items: center; justify-content: center; z-index: 10;}
.pop.active {display: flex;}
.pop .pop-wrap {width: calc(100% - 3.2rem); padding: 1.6rem; display: flex; flex-flow: column; background-color: var(--gray70); border-radius: .4rem; overflow: hidden;}
.pop .pop-wrap .pop-tit {min-height: 2.4rem; padding: 0 1.6rem; display: flex; align-items: center; justify-content: center; position: relative;}
.pop .pop-wrap .pop-tit > h2 {font-size: 1.8rem; font-weight: 600;}
.pop .pop-wrap .pop-tit > button {position: absolute; right: 1.6rem; width: fit-content; height: fit-content; padding: 0; background-color: transparent;}
.pop .pop-wrap .pop-cont {padding: 2rem 0; display: flex; flex-flow: column; row-gap: 1rem; align-items: center;}
.pop .pop-wrap .pop-cont:last-child {padding-bottom: 0;}
.pop .pop-wrap .pop-cont h2 {text-align: center; font-size: 1.8rem; font-weight: 600;}
.pop .pop-wrap .pop-cont p {text-align: center; font-size: 1.4rem; line-height: 1.6;}
.pop .pop-wrap .pop-cont img {width: 100%;}
.pop .pop-wrap .pop-btn {display: flex; align-items: center; column-gap: .8rem; margin-top: 1rem;}
.pop .pop-wrap .pop-btn button {height: 4rem; font-size: 1.4rem; flex: 1;}
.pop .pop-wrap .pop-btn button:nth-last-child(2) {background-color: var(--gray50);}

/* loading */
.loading-wrap {width: 100vw; height: 100vh; display: flex; align-items: center; justify-content: center; position: fixed; z-index: 99999;}
.loading-wrap .loading-img {width: 6rem; height: 6rem; background-image: url(/assets/img/favicon-ccb05fb53a270273a453045b3cbb41ad.svg); background-repeat: no-repeat; background-size: contain; background-position: center;}

.loading {width: 100vw; height: 100vh; display: flex; align-items: center; justify-content: center; position: fixed; top: 0; left: 0; z-index: 10000;}
.loading > img {width: 12rem;}