@charset "utf-8";

:root {
    --col-theme: #1E3932;
    --col-theme-h: #1E3932;
    --col-subtheme: #1E3932;
    --col-subtheme-h: #1E3932;
    --col-wt: #FFFFFF;
    --col-bk: #222;
    --col-gray: #A1A1A1;
    --col-darkgray: #767676;
    --col-red: #DD241F;
    --col-red-h: #c31914;
    --col-blue: #3398FF;

    --col-bd-gray: #DDDDDD;

    --trans-25: all .25s ease-in-out;
    --trans-45: all .45s cubic-bezier(0.645, 0.045, 0.355, 1);

    --hd-height: 12rem;
    --hd-height-m: 8rem;
}

/*============================================================*/
/* ready */
/*============================================================*/
.ready-page {text-align: center;}
.ready-page h5 {position: relative; display: inline-block; margin-bottom: 1rem; font-size: 3rem; font-weight: 700;}
.ready-page h5::before {content: ""; display: block; width: 7rem; height: 6rem; margin: 0 auto 1.6rem; background: url("/img/logo/symbol.png") center/contain no-repeat;}
.ready-page h5 span {color: var(--col-red);}


/*============================================================*/
/* list */
/*============================================================*/
.dot-list > li {position: relative; padding-left: calc(0.3em + 2.2rem); text-align: left; font-size: 2rem; font-weight: 400; line-height: 1.45;}
.dot-list > li + li {margin-top: 1.6rem;}
.dot-list > li:before {content: ""; position: absolute; top: 0.5em; left: 0; width: 0.3em; aspect-ratio: 1; background: #fff; border-radius: 50%;}


/*============================================================*/
/* text */
/*============================================================*/
.ellipsis-2 {text-overflow: ellipsis; overflow: hidden; word-break: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}

/* color*/
.col-theme {color: var(--col-theme);}


/*============================================================*/
/* button */
/*============================================================*/
.btn-area {text-align: center;}

.btn-sm {position: relative; display: inline-flex; justify-content: center; align-items: center; width: 100%; max-width: 10rem; height: 4rem; padding: 0 1rem; border-radius: 4px; font-size: 1.6rem; font-weight: 400;}
.btn-md {display: inline-flex; justify-content: center; align-items: center; gap: 1.2rem; height: 4rem; aspect-ratio: 154/40; border-radius: 5rem; background: #222186; color: #fff; transition: var(--trans-25);}
.btn-lg {display: inline-flex; justify-content: center; align-items: center; gap: 1.2rem; height: 5.6rem; aspect-ratio: 154/40; border-radius: 5rem; background: #222186; color: #fff; transition: var(--trans-25);}

.btn-radient {position: relative; color: #fff; overflow: hidden; z-index: 1;}
.btn-radient::before {content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 200%; height: 100%; background: rgb(23,235,191); background: linear-gradient(90deg, rgba(23,235,191,1) 0%, rgba(0,175,142,1) 50%, rgba(23,235,191,1) 100%); transition: all .4s ease-in-out; z-index: -1;}

.btn-green {position: relative; color: #fff; overflow: hidden; z-index: 1;}
.btn-green::before {content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 200%; height: 100%; background: rgb(8,133,88); background: linear-gradient(90deg, rgba(8,133,88,1) 0%, rgba(43,109,86,1) 50%, rgba(8,133,88,1) 100%); transition: all .4s ease-in-out; z-index: -1;}

.btn-theme {background: var(--col-theme); color: #fff; transition: var(--trans-25);}
.btn-subtheme {background: var(--col-subtheme); color: #fff; transition: var(--trans-25);}
.btn-gray {background: #CBCBCB; color: #fff; transition: var(--trans-25);}
.btn-red {background: var(--col-red); color: #fff; transition: var(--trans-25);}
.btn-bk {background: var(--col-bk); color: #fff;}

.btn-bd-theme {border: 1px solid var(--col-theme); color: #444;}
.btn-bd-gray {border: 1px solid var(--col-gray); color: var(--col-darkgray);}

@media (hover: hover) and (pointer: fine) {
    .btn-radient:hover::before {left: -100%;}
    .btn-green:hover::before {left: -100%;}
    .btn-theme:hover {background: var(--col-theme-h);}
    .btn-subtheme:hover {background: var(--col-subtheme-h);}
    .btn-gray:hover {background: #b1b0b0;}
    .btn-red:hover {background: var(--col-red-h);}
}

@media (max-width: 992px) {
    .btn-lg {height: 4.6rem}
}


/*============================================================*/
/* clause */
/*============================================================*/
.clause-wrap {height: 23rem; padding: 2rem; background: #fff; border: 1px solid var(--col-bd-gray); text-align: left; overflow: hidden auto;}
.clause-wrap::-webkit-scrollbar {width: 6px;}
.clause-wrap::-webkit-scrollbar-track {background-color: #FFF;}
.clause-wrap::-webkit-scrollbar-thumb {background-color: var(--col-bd-gray); border-radius: 50px;}

.clause-wrap .clause {font-size: 14px; line-height: 1.75;}
.clause-wrap .clause h4 {margin-top: 20px; margin-bottom: 15px; text-align: left; color: var(--col-bk); font-size: 16px;}
.clause-wrap .clause h4:first-of-type {margin-top: 0;}
.clause-wrap .clause h5 {margin-top: 10px; margin-bottom: 10px; color: var(--col-bk); font-size: 15px;}
.clause-wrap .clause p {margin-bottom: 10px;}
.clause-wrap .clause ol, .clause-wrap .clause ul {padding-left: 25px;}
.clause-wrap .clause ol > li {list-style: decimal;}
.clause-wrap .clause ol ul > li {list-style: hangul;}


/*============================================================*/
/* tooltip */
/*============================================================*/
.tooltip {position: relative; display: inline-block;}
.tooltip .warning {position: relative; padding: 0 20px;}
.tooltip .warning::after {content: ""; position: absolute; top: 2px; right: 0; width: 16px; height: 16px; background: url("../img/caution.png") center/contain no-repeat;}
.tooltip .tooltiptext {position: absolute; visibility: hidden; width: 27rem; padding: 7px 2rem; background-color: #F5F5F5; border-radius: 4px; text-align: left; color: #666; font-size: 12px; font-weight: 400; line-height: 1.5; letter-spacing: -0.02em; z-index: 1;}
.tooltip:hover .tooltiptext {visibility: visible;}
.tooltip .tooltiptext::after {content: " "; position: absolute; border-style: solid; border-width: 5px;}
.tooltip .tooltip-right {top: -10px; left: 110%;}
.tooltip .tooltip-right::after {top: 20px; right: 100%; margin-top: -5px; border-color: transparent #F5F5F5 transparent transparent;}

@media (max-width: 992px) {
    .tooltip .tooltip-right {top: 150%; left: 50%; transform: translateX(-50%);}
    .tooltip .tooltip-right::after {top: auto; bottom: 100%; left: 50%; right: auto; transform: translateX(-50%); border-color: transparent transparent #F5F5F5 transparent;}
}



/*============================================================*/
/* pop up */
/*============================================================*/
.popup-container {position: fixed; top: 0; left: 0; width: 100%; height: 100dvh; background: rgba(0,0,0,0.6); z-index: 50;}
.popup-wrap {display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; height: 100%;}
.popup {position: relative; width: 530px; /*padding-top: 28.25%;*/ aspect-ratio: 714/1104; background: #fff; overflow: hidden;}
.popup .img img {position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 100%;}

.popup-container .btm {display: flex; justify-content: space-between; align-items: center; width: 530px; padding: 6px 10px; background: #333; color: #fff; font-size: 13px;}
.popup-container .btm button {color: #fff;}

.popup-container [type="checkbox"]:checked + label,
.popup-container [type="checkbox"]:not(:checked) + label {padding-left: 26px;}
.popup-container [type="checkbox"]:checked + label:before,
.popup-container [type="checkbox"]:not(:checked) + label:before,
.popup-container [type="checkbox"]:checked + label:after,
.popup-container [type="checkbox"]:not(:checked) + label:after {width: 21px; height: 21px;}

@media (max-width: 576px) {
    .popup,
    .popup-container .btm {width: 90%;}
}



/*============================================================*/
/* 메인, History */
/*============================================================*/
.culture-item {display: flex; flex-wrap: wrap; gap: 4rem;}
.culture-item li {display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; width: calc(50% - 2rem); aspect-ratio: 1; padding: 0 1rem; background-position: center bottom; background-size: 100% auto; background-repeat: no-repeat; border-radius: 3.2rem; font-family: 'EF_MACHO'; font-size: 4.8rem; line-height: 1.5; overflow: hidden; transition: opacity 300ms;}
.culture-item {max-width: 1660px; margin: 0 auto;}
.culture-item li:nth-child(1) {background-image: url("../img/main/culture01.png");}
.culture-item li:nth-child(2) {background-image: url("../img/main/culture02.png");}
.culture-item li:nth-child(3) {background-image: url("../img/main/culture03.png");}
.culture-item li:nth-child(4) {background-image: url("../img/main/culture04.png");}
.culture-item li p {margin-top: 1.5rem; font-size: 2.4rem; font-weight: 500;}

@media (hover: hover) and (pointer: fine) {
    .culture-item:hover li:not(:hover) {opacity: 0.5;}
}
@media (max-width: 992px) {
    .culture-item {gap: 2rem;}
    .culture-item li {width: calc(50% - 1rem); border-radius: 1.8rem; font-size: 2.4rem;}
    .culture-item li p {font-size: 1.8rem;}
}
@media (max-width: 576px) {
    .culture-item {flex-direction: column;}
    .culture-item li {width: 100%;}
}



/*============================================================*/
/* 메인, Ecosystem, Project */
/*============================================================*/
.play-earn {padding: 12rem 0; background: #0B0B40; overflow: hidden;}
.play-earn .eco-wrap {display: flex; justify-content: space-between; align-items: center; gap: 2rem;}
.play-earn .eco-wrap .left {}
.play-earn .eco-wrap .right {width: 68rem;}

.play-earn .eco-wrap .txt {color: #F5F5F5;}
.play-earn .eco-wrap .txt .title {font-size: 8rem; font-weight: 900; text-transform: capitalize;}
.play-earn .eco-wrap .txt .title + p {margin-top: 4.4rem;}
.play-earn .eco-wrap .txt p {line-height: 1.75;}
.play-earn .eco-wrap a {display: inline-flex; justify-content: center; align-items: center; text-align: center; min-width: 30rem; height: 8rem; margin-top: 26%; background: #336FBE; background: linear-gradient(90deg, rgba(51, 111, 190, 1) 0%, rgba(49, 55, 158, 1) 100%); border-radius: .8rem; font-size: 2rem; font-weight: 800; overflow: hidden;}

.play-earn .eco-wrap ul {display: flex; flex-wrap: wrap; margin-left: 1px; margin-top: 1px;}
.play-earn .eco-wrap ul li {position: relative; width: 50%; padding: 12rem 1rem 10rem; border: 1px solid #BBB; margin-left: -1px; margin-top: -1px; text-align: center; z-index: 1;}
.play-earn .eco-wrap ul li::before {content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 0; background: #0B0B40; background: linear-gradient(180deg, rgba(11, 11, 64, 1) 0%, rgba(48, 55, 158, 1) 100%); transition: var(--trans-25); z-index: -1;}
.play-earn .eco-wrap ul li:hover::before {height: 100%;}

.play-earn .eco-wrap ul li .title {font-family: 'EF_MACHO'; font-size: 3.5rem;}
.play-earn .eco-wrap ul li p {max-width: 70%; margin: 2rem auto 0; line-height: 1.75;}

@media (min-width: 1921px) {
    .play-earn .eco-wrap .right {width: 40%;}
}
@media (max-width: 1200px) {
    .play-earn .eco-wrap .txt .title {font-size: 4rem;}
    .play-earn .eco-wrap ul li .title {font-size: 2rem;}
    .play-earn .eco-wrap a {height: 6.8rem;}
}
@media (min-width: 992px) and (max-width: 1200px) {
    .play-earn .eco-wrap .txt p br {display: none;}
}
@media (max-width: 992px) {
    .play-earn .eco-wrap {display: block;}
    .play-earn .eco-wrap a {margin-top: 3rem;}
    .play-earn .eco-wrap .right {width: auto; max-width: 68rem; margin: 0 auto;}
    .play-earn .eco-wrap ul {margin-top: 5rem;}
    .play-earn .eco-wrap ul li p {max-width: 90%;}
}
@media (max-width: 576px) {
    .play-earn .eco-wrap .txt .title br,
    .play-earn .eco-wrap .txt p br {display: none;}
}
@media (max-width: 376px) {
    .play-earn .eco-wrap ul {display: block;}
    .play-earn .eco-wrap ul li {width: 100%; margin-left: 0;}
}