@charset "utf-8";

.col-linear {background: linear-gradient(90deg, #EACCF8, #6654F1, #69EACB); vertical-align: top; color: transparent; display: inline-block; -webkit-background-clip: text; -webkit-text-fill-color: transparent;}

/* 파티클 */
.particles-container {position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: -1;}


/*============================================================*/
/* 메인 타이틀 */
/*============================================================*/
.main-title {text-align: center;}
.main-title small {display: block; background: linear-gradient(90deg, #69EACB, #6654F1, #EACCF8); vertical-align: top; color: transparent; display: inline-block; -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-family: 'ClashDisplay-Bold'; font-size: 2rem; font-weight: 600;}
.main-title h3 {font-size: 5.6rem; font-weight: 700;}
.main-title p {max-width: 66rem; margin: 0 auto; color: rgba(255,255,255,0.8); font-size: 1.8rem; font-weight: 300; line-height: 1.7;}
.main-title h3 + p {margin: 1rem auto 0;}

@media (max-width: 768px) {
    .main-title h3 {font-size: 3.4rem;}
}
@media (max-width: 576px) {
    .main-title h3 {font-size: 2.8rem;}
}



/*============================================================*/
/* 섹션 1 = 비주얼 */
/*============================================================*/
.main-visual {position: relative; height: 100dvh; overflow: hidden; z-index: 1;}
.main-visual::before,
.main-visual::after {content: ""; position: absolute; width: 54rem; aspect-ratio: 1; border-radius: 50%; background: #3E34CD; filter: blur(13rem); z-index: -1;}
.main-visual::before {top: 14%; left: -2%;}
.main-visual::after {display: none; bottom: -15%; right: -2%;}

.main-visual .container {display: flex; align-items: center; height: 100%; padding-top: var(--hd-height);}
.main-visual .left {width: calc(100% - 710px);}
.main-visual .right {width: 710px;}

.main-visual h2 {position: relative; font-family: 'ClashDisplay-Bold'; font-size: 10rem; line-height: 1;}
.main-visual h2::after {content: ""; display: block; width: 100%; height: 1.4rem; background: url("../img/main/visual_line.png") left center/contain no-repeat; animation: revealLine 1s ease-out forwards; animation-delay: 0.5s;}
.main-visual p {max-width: 50rem; margin-top: 3rem; font-size: 2rem; font-weight: 300; line-height: 1.65;}
@keyframes revealLine {
    from {width: 0;}
    to {width: 100%;}
}

.main-visual .right {position: relative; height: 100%;}
.main-visual .img {display: flex; justify-content: center; width: 100%; height: 100%;}
.main-visual .img img {max-width: none; height: 100%;}
.main-visual .coin {position: absolute; aspect-ratio: 1; background-position: center; background-size: contain; background-repeat: no-repeat; animation: floatUpDown 3s ease-in-out infinite;}
.main-visual .bit {top: 8rem; left: 4rem; width: 22rem; background-image: url("../img/main/coin_bit.png");  animation-direction: reverse;}
.main-visual .skull {bottom: 36rem; left: -6rem; width: 16rem; background-image: url("../img/main/coin_skull.png"); animation-delay: 0.6s;}
.main-visual .ether {bottom: 22rem; right: 6rem; width: 18rem; background-image: url("../img/main/coin_ether.png"); animation-delay: 1s;}
@keyframes floatUpDown {
    0%, 100% {transform: translateY(0);}
    50% {transform: translateY(-20px);}
}


@media (min-width: 1025px) and (max-width: 1300px) {
    .main-visual .container {justify-content: flex-end;}
    .main-visual .left {position: absolute; left: 2rem; width: 100%; z-index: 1;}
    .main-visual .right {margin-right: -13rem;}
}
@media (max-width: 1024px) {
    .main-visual {height: auto; margin-top: var(--hd-height-m); padding-top: calc(var(--hd-height-m) + 4rem); overflow: hidden;}
    .main-visual .container {display: block; height: auto; padding-top: 0;}
    .main-visual .left,
    .main-visual .right {width: 100%;}
    .main-visual .left {display: flex; flex-direction: column; justify-content: center;}
    .main-visual .right {height: auto;}
    .main-visual .img {height: auto;}
    .main-visual .img img {max-width: 160%; height: auto;}
    .main-visual .bit {top: 0; }
    .main-visual .skull {left: 0;}
    .main-visual .ether {bottom: 14rem; right: 0;}
}
@media (max-width: 767px) {
    .main-visual h2 {font-size: 6rem;}
    .main-visual .img img {max-width: 220%;}
    .main-visual .bit {top: 0; width: 12rem;}
    .main-visual .skull {left: 0; width: 6rem;}
    .main-visual .ether {bottom: 14rem; right: 0; width: 8rem;}
}


/*============================================================*/
/* 섹션 2 = 소개 */
/*============================================================*/
.main-about {position: relative; padding: 14rem 0;}
.main-about::before {content: ""; position: absolute; top: 0; left: 0; right: 0; aspect-ratio: 1920/1040; background: url("../img/main/bg_about.png") center/cover no-repeat; pointer-events: none;}

.about-box {position: relative; display: flex; justify-content: center; align-items: center; gap: 8%; padding: 9rem 5.8rem; border-radius: 4rem; border: 1.5px solid #fff; overflow: hidden;}
.about-box::before {content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: linear-gradient(130deg, #fff, #fff, transparent); opacity: .11; pointer-events: none;}

.about-box .img {flex: 0 0 auto; position: relative; width: 42rem; aspect-ratio: 1;}
.about-box .img::before {content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: url("../img/main/about_coin_bg.png") center/contain no-repeat; animation: spin 20s linear infinite; transform-origin: center center; z-index: 1;}
.about-box .img::after {content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: url("../img/main/about_coin.png") center/70% no-repeat;}
@keyframes spin {
    from {transform: rotate(0deg);}
    to {transform: rotate(360deg);}
}

.about-box .main-title {margin-bottom: 1.8rem; text-align: left;}
.about-box p {max-width: 70rem; font-size: 2.4rem; font-weight: 300; line-height: 1.5;}
.about-box p + p {margin-top: 5rem;}


@media (max-width: 1200px) {
    .about-box .img {width: 32rem;}
}
@media (max-width: 992px) {
    .main-about {overflow: hidden;}
    .about-box {flex-direction: column; gap: 4rem; padding: 9rem 2rem}
}
@media (max-width: 576px) {
    .about-box .img {width: 80%;}
    .about-box p {font-size: 1.8rem;}
}


/*============================================================*/
/* 섹션 3 = nft */
/*============================================================*/
.main-nft {position: relative; padding-bottom: 13rem; overflow: hidden;}
.main-nft::before {content: ""; position: absolute; top: 50%; right: -20%; transform: translateY(-50%); width: 48%; aspect-ratio: 1; border-radius: 50%; background: linear-gradient(130deg, #1A1559, #1B10B7); filter: blur(10rem); z-index: -1;}


/*============================================================*/
/* 섹션 4 = Partners */
/*============================================================*/
.main-partners {position: relative; padding-bottom: 13rem; overflow-x: hidden;}
.main-partners::before {content: ""; position: absolute; top: 50%; left: -18%; transform: translateY(-50%); width: 35%; aspect-ratio: 1; border-radius: 50%; background: linear-gradient(130deg, #1A1559, #1B10B7); filter: blur(10rem); z-index: -1;}

.partners-list {display: flex; flex-wrap: wrap; justify-content: center; gap: 2rem; margin-top: 8rem;}
.partners-list > li {flex: 0 0 auto; position: relative; display: flex; justify-content: center; align-items: center; width: calc(25% - 1.5rem); aspect-ratio: 340/156; padding: 3rem 2rem; border-radius: 3rem;  text-align: center; background-color: #fff;}
.partners-list > li::before {content: ""; display: block; width: 100%; height: 100%; max-width: 20rem; max-height: 10rem; background-position: center; background-size: contain; background-repeat: no-repeat;}
.partners-list > li.chiefmate::before {background-image: url("../img/main/partners01.png");}
.partners-list > li.strategy::before {background-image: url("../img/main/partners02.png");}
.partners-list > li.wowmax::before {background-image: url("../img/main/partners03.png");}
.partners-list > li.cfcx::before {background-image: url("../img/main/partners13.png");}
.partners-list > li.monkeyswap::before {background-image: url("../img/main/partners04.png");}
.partners-list > li.dt_ai::before {background-image: url("../img/main/partners15.png");}
.partners-list > li.dts::before {background-image: url("../img/main/partners16.png");}
.partners-list > li.dt_cosmos::before {background-image: url("../img/main/partners17.png");}
.partners-list > li.dt_resort::before {background-image: url("../img/main/partners18.png");}
.partners-list > li.dt_phone::before {background-image: url("../img/main/partners19.png");}
.partners-list > li.dt_mall::before {background-image: url("../img/main/partners20.png");}
.partners-list > li.dt_card::before {background-image: url("../img/main/partners21.png");}
.partners-list > li.dt_game::before {background-image: url("../img/main/partners22.png");}
.partners-list > li.cfcswap::before {background-image: url("../img/main/partners14.png");}
.partners-list > li.cfcw::before {background-image: url("../img/main/partners23.png");}

.main-partners .second {display: flex; margin-top: 8rem;}
.main-partners .second > * {flex: 1 0 0;}
.main-partners .second .partners-list {justify-content: center;}
.main-partners .second .partners-list > li {width: 340px;}

@media (max-width: 1200px) {
    .partners-list > li {padding: 2rem;}
    .main-partners .second {flex-direction: column; gap: 8rem;}
}
@media (max-width: 992px) {
    .partners-list > li {width: calc(33.33% - 1.5rem);}
}
@media (max-width: 768px) {
    .partners-list {gap: 1rem;}
    .partners-list > li {width: calc(50% - 0.5rem); aspect-ratio: 340/186; border-radius: 1.8rem;}
    .main-partners .second .partners-list {margin-top: 4rem;}
    .main-partners .second .partners-list > li {width: 250px;}
}



/*============================================================*/
/* 섹션 5 = technical */
/*============================================================*/
.main-tech {padding-bottom: 13rem;}
.logo-slide-wrap {margin-top: 8rem;}

.logo-slide {height: 8rem; overflow: hidden;}
.logo-slide + .logo-slide {margin-top: 2rem;}
.logo-slide .swiper-wrapper {transition-timing-function: linear !important;}
.logo-slide .swiper-slide {display: flex; justify-content: center; align-items: center; width: 340px; background: #fff; border-radius: 1.6rem; overflow: hidden;}

@media (max-width: 992px) {
    .logo-slide {height: 6rem;}
    .logo-slide + .logo-slide {margin-top: 1rem;}
}
@media (max-width: 992px) {
    .logo-slide .swiper-slide {width: 250px;}
}