@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: 10rem;
    --hd-height-m: 7rem;
}

/*============================================================*/
/* 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: 300; 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: var(--col-theme); 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%;}
}



/*============================================================*/
/* 메인, Service */
/*============================================================*/
.nft-btn-area {margin-top: 7rem; text-align: center;}

.nft-list {display: flex; flex-wrap: wrap; justify-content: center; gap: 2rem; margin-top: 8rem;}
.nft-list > li {position: relative; width: calc(33.33% - 1.4rem); padding: 2rem; border-radius: 2rem; border: 1px solid rgba(255,255,255,0.3); overflow: hidden;}
.nft-list > li::before {content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: linear-gradient(130deg, #fff, transparent); opacity: .15; pointer-events: none;}
.nft-list > li .img {aspect-ratio: 1; margin-bottom: 2rem; border-radius: 0; overflow: hidden;}
.nft-list > li .img img {width: 100%;}
.nft-list > li h4 {font-size: 2.2rem; font-weight: 700;}
.nft-list > li p {font-size: 87.5%; font-weight: 500; line-height: 1.5;}
.nft-list .info {display: flex; justify-content: space-between; gap: 1rem; margin-top: 2rem;}
.nft-list .info dl {flex: 1 0 auto; display: flex; flex-direction: column-reverse; gap: 1rem;}
.nft-list .info dt {font-size: 87.5%; font-weight: 500}
.nft-list .info dd {font-size: 2rem; font-weight: 600}

.nft-list .info dl:last-child {align-items: flex-end;}
.nft-list .info dl:last-child dt {color: #24FF00;}

@media (hover: hover) and (pointer: fine) {
    .nft-list:hover > li {transition: opacity 300ms;}
    .nft-list:hover > li:not(:hover) {opacity: 0.6;}
}
@media (max-width: 1200px) {
    .nft-list > li {width: calc(50% - 1rem);}
}
@media (max-width: 768px) {
    .nft-list .info {flex-direction: column;}
    .nft-list .info dl {flex-direction: row; justify-content: space-between; align-items: center;}
    .nft-list .info dl:last-child {align-items: center;}
}
@media (max-width: 576px) {
    .nft-list > li {width: 100%; max-width: 460px;}
}