/* 100 (Thin) */ @font-face { font-family: "Poppins"; src: url('../font/Poppins-Thin.ttf'); font-weight: 100; unicode-range: U+0041-005A, U+0061-007A; } /* 200 (ExtraLight) */ @font-face { font-family: "Poppins"; src: url('../font/Poppins-ExtraLight.ttf'); font-weight: 200; unicode-range: U+0041-005A, U+0061-007A; } /* 300 (Light) */ @font-face { font-family: "Poppins"; src: url('../font/Poppins-Light.ttf'); font-weight: 300; unicode-range: U+0041-005A, U+0061-007A; } /* 400 (Regular) */ @font-face { font-family: "Poppins"; src: url('../font/Poppins-Regular.ttf'); font-weight: 400; unicode-range: U+0041-005A, U+0061-007A; } /* 500 (Medium) */ @font-face { font-family: "Poppins"; src: url('../font/Poppins-SemiBold.ttf'); font-weight: 500; unicode-range: U+0041-005A, U+0061-007A; } /* 600 (SemiBold) */ @font-face { font-family: "Poppins"; src: url('../font/Poppins-SemiBold.ttf'); font-weight: 600; unicode-range: U+0041-005A, U+0061-007A; } /* 700 (Bold) */ @font-face { font-family: "Poppins"; src: url('../font/Poppins-Bold.ttf'); font-weight: 700; unicode-range: U+0041-005A, U+0061-007A; } /* num */ @font-face { font-family: "GmarketSans"; src: url('../font/GmarketSansTTFLight.ttf'); font-weight: 100; unicode-range: U+0030-0039, U+002C, U+0025; } @font-face { font-family: "GmarketSans"; src: url('../font/GmarketSansTTFMedium.ttf'); font-weight: 400; unicode-range: U+0030-0039, U+002C, U+0025; } @font-face { font-family: "GmarketSans"; src: url('../font/GmarketSansTTFBold.ttf'); font-weight: 700; unicode-range: U+0030-0039, U+002C, U+0025; } *:hover {transition: 0.6s ease-in-out;} h1 {font-size: 58px; font-weight: 700;} h4 {font-size: 36px;} h4 span {font-size: inherit; font-weight: 300;} b {font-weight: 600;} button {cursor: pointer;} .semi-bold {font-weight: 600;} .bold {font-weight: 700;} .p-s-10 {padding-left: 10px;} .ko .p-s-10 {padding-left: 0;} body {overflow-x: hidden; font-family: "Poppins", "GmarketSans", sans-serif; color: #2D2B2B;} #container {font-size: 16px; padding-top: 90px; background-image: url(../img/paydawork_bg.jpg); background-position: center top; background-size: 1930px; background-repeat: no-repeat;} header {position: fixed; top: 0; background-color: #fff; width: 100vw; height: 90px; z-index: 10;} header .fixed {max-width: 1435px; width: 100%; height: 100%; margin: auto;} header .fixed > div {display: flex; justify-content: space-between; align-items: center; height: 100%;} header .fixed > div .logo {height: 35px;} header .fixed > div .logo img {height: 100%; width: auto;} header .fixed > div .menu-list {height: 100%; display: flex; align-items: center;} header .fixed > div .menu-list ul {gap: 55px;} header .fixed > div .menu-list ul, header .fixed > div .menu-list ul li, header .fixed > div .menu-list ul li > *, header .fixed > div .menu-list ul li a {display: inline-flex; align-items: center; height: 100%;} header .fixed > div .menu-list ul li a {font-weight: 500; color: #555353;} header .fixed > div .menu-list ul li .lang {display: inline-flex; gap: 5px;} header .fixed > div .menu-list ul li .lang::before {content: ""; display: block; width: 16px; height: 16px; margin-top: 4px; background-image: url(../img/icon-lang.svg);} header .fixed > div .menu-list ul li .lang a, header .fixed > div .menu-list ul li .lang p {color: #bebebe;} header .fixed > div .menu-list ul li .lang a.active {color: #2D2B2B;} header .fixed > div .menu-list .menu-item:hover a, header .fixed > div .menu-list ul li .lang a:hover {color: #C09515;} header .fixed .device {display: none !important;} .content {width: 100%; padding: 120px 0 30px; word-break: keep-all;} .content > div {max-width: 1435px; margin: auto;} .content div > .title {display: flex; flex-direction: column;} .content div > .title h4 {font-size: 52px; font-weight: 700;} .content div > .title > span {font-size: 28px; font-weight: 300;} .content .plus {position: relative;} .content .plus::before {content: ""; position: absolute; left: -11.5px; width: 21px; height: 21px; background-image: url(../img/icon-plus.svg); background-repeat: no-repeat; background-position: center; z-index: 0;} .content .plus.top::before {top: -11.5px;} .content .plus.bottom::before {bottom: -11.5px;} .content .plus.right::before {right: -11.5px; left: unset;} .content.main {max-width: 940px; width: 100%; margin: auto; display: flex; flex-direction: column; align-items: center; gap: 45px; padding: clamp(65px, 20vh, 25vh) 40px clamp(65px, 25vh, 35vh);} .content.main h1, .content.main p {text-align: center; color: #fff;} .content.main > p {font-size: 22px; line-height: 1.4; font-weight: 400;} .content.main .btn-list {display: inline-flex; justify-content: space-between; gap: 10px; width: 100%;} .content.main .btn-list button {background-color: #ffffff; border-radius: 8px; font-size: 16px; max-width: 220px; width: 100%; height: 60px; letter-spacing: 24%; display: inline-flex; align-items: center; justify-content: center; gap: 10px;} .content.main .btn-list button.pdf {background-image: url(../img/pdf_bg.png); background-position: top center; background-repeat: no-repeat; background-color: unset; color: #fff;} .content.main .btn-list button.pdf .badge {background-color: #2D2B2B; font-size: 10px; font-weight: 700; border-radius: 4px; display: inline-block; padding: 2px 1px 2px 4px;} .content.main .btn-list button img {max-width: 25px;} .content.main .btn-list button:has(img) span {color: #878787; font-size: 10px; letter-spacing: 10%;} .content.main .btn-list button:not(.pdf):hover {background-color: #2D2B2B; color: #fff;} .content.main .btn-list button.twitter:hover img {filter: brightness(10);} .content.main .btn-list button.pdf:hover .badge {color: #2D2B2B; background-color: #fff;} #about {color: #fff; background-color: #000103; background: linear-gradient(0deg, #000103 80%, transparent);} #about .plus::before {background-image: url(../img/icon-plus-y.svg);} #about > div {display: flex; flex-direction: column; gap: 20px;} #about .box {display: flex; flex-wrap: wrap; align-items: center; gap: 30px 50px; background-color: #00010624;} #about .box .box-img {display: inline-flex; max-height: 150px; align-items: flex-start;} #about .box > p {font-size: 22px; font-weight: 300; line-height: 1.6; color: #f5f5f5; max-width: calc(100% - 550px);} #about .box > p:last-child {margin-left: auto;} #about .box p span {color: #fff;} #about .box.sub {display: inline-flex; flex-direction: column; gap: 0; margin-top: 30px;} #about .box.sub > div ul {display: inline-flex; flex-wrap: wrap;} #about .box.sub > div ul li {display: inline-flex; align-items: center; border: 1px solid #2D2B2B; padding: 20px; font-size: 22px;} #about .box.sub > div ul li div p {line-height: 1.2; font-size: 18px; font-weight: 300; color: #f5f5f5;} #about .box.sub > div.top ul li {width: calc(100% / 5); flex-direction: column; align-items: center; gap: 10px; border-bottom: none;} #about .box.sub > div.top ul li:nth-child(-n+4) {border-right: none;} #about .box.sub > div.bottom ul li {width: calc(100% / 2); gap: 20px;} #about .box.sub > div.bottom ul li:nth-child(odd) {border-right: none;} #about .box.sub > div.top ul li .icon-img img {max-width: 90px; position: relative;} #about .box.sub > div.top ul li .icon-img img:last-child {opacity: 0; position: absolute;} #about .box.sub > div.top ul li:hover .icon-img img:first-child {opacity: 0; transition: 0.6s ease-in-out;} #about .box.sub > div.top ul li:hover .icon-img img:last-child {opacity: 0.6; transition: 0.6s ease-in-out;} #about .box.sub > div.top ul li div {display: inline-flex; flex-direction: column; justify-content: center; gap: 20px; text-align: center;} #about .box.sub > div.bottom ul li .icon-img {max-width: 105px; position: relative;} #about .box.sub > div.bottom ul li .icon-img img:last-child {opacity: 0; position: absolute;} #about .box.sub > div.bottom ul li div {display: inline-flex; flex-direction: column; gap: 10px;} #about .box.sub > div.bottom ul li div p {padding-right: 50px;} #about .box.sub > div.top ul li:hover, #about .box.sub > div.bottom ul li:hover {background-color: #ffbf0040;} #about .box.sub > div.bottom ul li:hover .icon-img img:first-child {opacity: 0; transition: 0.6s ease-in-out;} #about .box.sub > div.bottom ul li:hover .icon-img img:last-child {opacity: 0.6; transition: 0.6s ease-in-out;} .bg-000103 {position: relative; background-color: #fff; width: 100%; height: 90px; display: block;} .bg-000103::before {content: ""; position: absolute; left: 0; top: 0; display: block; width: 100%; height: 100%; background-color: #000103; border-radius: 0 0 6rem 6rem;} #token .token-list {display: grid; grid-template-columns: repeat(3, 1fr);} #token .token-list li:nth-child(2) {grid-column: 2 span;} #token .token-list li.title {min-height: 120px; font-size: 22px;} #token .token-list li:not(.title) {min-height: 200px;} #token .token-list li {display: flex; border: 1px solid #d9d9d9; border-right: none; padding: 20px;} #token .token-list li:nth-child(3n+2) {border-right: 1px solid #d9d9d9;} #token .token-list li:nth-child(n+1):nth-child(-n+5) {border-bottom: none;} #token .token-list li:nth-child(n+3):hover {background-color: #f5f5f5;} #token .token-list li div {display: inline-flex; gap: 10px;} #token .token-list li div.top {gap: 5px 20px; flex-wrap: wrap;} #token .token-list li div.top > div > * {font-size: 14px;} #token .token-list li:nth-child(1) {justify-content: center; flex-direction: column; gap: 5px 0;} #token .token-list li:nth-child(2) {white-space: nowrap; align-items: center; gap: 10px;} #token .token-list li div.left {flex-direction: column; justify-content: space-between; width: 100%;} #token .token-list li div.left b {font-size: 22px;} #token .token-list li div.left .num b {font-size: 20px; font-weight: 400;} #token .token-list li div.left p {font-size: 18px; font-weight: 300; line-height: 1.5;} #token .token-list li div.left > div:not(.num) {flex-direction: column;} #token .token-list li div.right {align-items: end;} #token .token-list li div.right p {white-space: nowrap; font-size: 45px; font-weight: 400;} #token .token-list li div.right p span {font-size: 25px; font-weight: 400; margin-left: 8px;} #token .token-list li .deco {background-image: url(../img/token_bg.svg); max-height: 20px; width: 100%; height: 100%;} #token .token-list li .total {display: inline-flex; align-items: baseline;} #token .token-list li .total h2 {font-size: 38px;} #token .token-list li .total b {font-size: 22px;} #metamast .title {flex-direction: row; white-space: nowrap; gap: 20px; align-items: end;} #metamast .title .progress-container {width: 100%; height: 10px; border: 1px solid #C09515;} #metamast .title .progress-bar {height: 100%; width: 0%; background: #C09515; transition: width 0.1s ease;} #metamast .title .status-text {margin-top: -30px; text-align: right; color: #C09515;} #metamast .swiper {width: 100%; overflow-x: unset; padding: 20px 0; cursor: ew-resize;} #metamast .swiper::-webkit-scrollbar {width: 0; height: 0;} #metamast .swiper-slide {background: #f5f5f5; display: flex; align-items: center; justify-content: center; width: 500px; height: 380px; border: 1px solid #d9d9d9;} #metamast .swiper-slide .step {display: inline-flex; width: 100%;} #metamast .swiper-slide .step > div {width: 100%; overflow: hidden; display: flex; justify-content: center;} #metamast .swiper-slide .step .step-img {padding: 1px; max-height: 380px;} #metamast .swiper-slide .step .step-img img {width: auto; height: 100%;} #metamast .swiper-slide .step .step-box {display: inline-flex; align-items: center; justify-content: center; flex-direction: column; gap: 15px; padding: 20px; text-align: center; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none;} #metamast .swiper-slide .step .step-box div p {font-size: 15px; font-weight: 600; padding-bottom: 5px; color: #C09515;} #metamast .swiper-slide .step .step-box div p span {font-family: "Poppins";} #metamast .swiper-slide .step .step-box > p {font-size: 14px; line-height: 1.25;} #metamast .swiper-slide .step .step-box > p:not(b) {font-weight: 300;} #metamast .swiper-slide-active {background-color: #ffbf0040; border-color: #C09515;} #metamast .scroll {color: #878787; padding-top: 55px; text-align: center; display: flex; align-items: center; justify-content: center; gap: 20px;} #metamast .scroll::before, #metamast .scroll::after {content: ""; display: block; width: 27px; height: 27px; margin-top: 2px; background-image: url(../img/icon-arrow.svg); background-repeat: no-repeat; background-position: center;} #metamast .scroll::after {transform: rotate(180deg);} #roadmap .roadmap-list {display: grid; grid-template-columns: repeat(3, 1fr);} #roadmap .roadmap-list > li {border: 1px solid #d9d9d9; border-right: none;} #roadmap .roadmap-list > li:nth-child(-n+3) {border-bottom: none;} #roadmap .roadmap-list > li:nth-child(3n) {border-right: 1px solid #d9d9d9;} #roadmap .roadmap-list li.title {display: inline-flex; flex-direction: column; gap: 20px; padding: 20px;} #roadmap .roadmap-list li.title h4 {font-size: 52px; font-weight: 600;} #roadmap .roadmap-list li.title p {font-size: 18px; line-height: 1.3; color: #555353;} #roadmap .roadmap-list li .grid {display: grid; grid-template-columns: 0.3fr 0.7fr; grid-template-rows: 1fr; align-items: stretch;} #roadmap .roadmap-list li .grid li {border-bottom: 1px solid #d9d9d9;} #roadmap .roadmap-list li .grid li:nth-child(-n+2) {min-height: 80px; padding: 0 20px; background-color: #f5f5f5;} #roadmap .roadmap-list li .grid li:nth-child(-n+2) > * {line-height: 80px;} #roadmap .roadmap-list li .grid li:nth-child(-n+2) p {font-size: 18px; display: flex; align-items: baseline;} #roadmap .roadmap-list li .grid li:nth-child(-n+2) p b {padding: 0 5px;} #roadmap .roadmap-list li .grid li:nth-child(-n+2) p span {font-size: 28px;} #roadmap .roadmap-list li .grid li:nth-child(-n+2) .bold {font-size: 28px; color: #555353;} #roadmap .roadmap-list li .grid li:nth-child(-n+2) .bold span {color: #2D2B2B;} #roadmap .roadmap-list li .grid li:nth-child(n+3) {grid-column: 2 span; padding: 12px 5px 12px 20px; font-size: 15px; font-weight: 300; display: flex; align-items: center; height: 100%;} #roadmap .roadmap-list li .grid li:nth-child(2) {position: relative; border-left: 1px solid #d9d9d9;} #roadmap .roadmap-list li .grid li:nth-child(2)::after {content: ""; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); display: block; width: 27px; height: 27px; background-image: url(../img/icon-arrow.svg); background-repeat: no-repeat; background-position: center;} #roadmap .roadmap-list li:nth-child(2) .grid li:nth-child(2)::after {background-image: url(../img/icon-circle.svg);} #roadmap .roadmap-list li:nth-child(4) .grid li:nth-child(2)::after, #roadmap .roadmap-list li:nth-child(5) .grid li:nth-child(2)::after {transform: rotateY(180deg) translateY(calc(-50% + 3.5px));} #roadmap .roadmap-list li:last-child .grid li:nth-child(2)::after {transform: rotate(90deg) translate(calc(-50% + 4px), -5px);} #roadmap .roadmap-list li .grid li:last-child {border: none;} #roadmap .roadmap-list > li:last-child {border-top-color: #C09515;} #roadmap .roadmap-list li:has(.active), #roadmap .roadmap-list li .grid.active li {border-color: #C09515;} #roadmap .roadmap-list li .grid.active li:nth-child(-n+2) {background-color: #ffbf0040;} #roadmap .roadmap-list li .grid.active li:nth-child(-n+2) .bold span {color: #C09515;} #roadmap .roadmap-list li .grid.active li:nth-child(2)::after {background-image: url(../img/icon-arrow-y.svg);} #team {padding: 120px 20px 80px 0;} #team > div {display: flex; position: relative;} #team .title {height: fit-content; position: sticky; top: 90px; z-index: 1; transform: translateX(-86px); width: 0;} #team .title h4 {display: none;} #team .box {width: 100%; transform: translateX(10px);} #team .box ul {display: grid; grid-template-columns: repeat(2, 1fr); gap: 45px;} #team .box ul li .name {border: 1px solid #d9d9d9; background-color: #f5f5f5; display: flex; align-items: center; gap: 20px; font-weight: 500; font-size: 22px;} #team .box ul li .name img {max-width: 80px;} #team .box ul li .name .rank {font-size: 18px; font-weight: 700; color: #C09515; padding-bottom: 5px;} #team .box ul li ul {grid-template-columns: 1fr; gap: 0; padding: 10px 0;} #team .box ul li ul li {line-height: 18px; font-size: 15px; font-weight: 300; color: #555353; list-style-image: url(../img/icon-circle-one.svg); transform: translateX(20px); width: calc(100% - 20px); padding: 5px 10px 5px 0;} #team .box ul li:hover .name {border-color: #C09515; background-color: #ffbf0040;} #team .box ul li .plus::before {bottom: -10.5px; right: -10.5px;} #team .box ul li:hover .plus::before {background-image: url(../img/icon-plus-yg.svg);} .content.partners {background-color: #f5f5f5; padding: 120px 0 80px; margin: 0; max-width: unset;} .partners > div {max-width: 1435px;} .partners .title {text-align: center; padding-bottom: 50px;} .partners .partners-list {display: grid; grid-template-columns: repeat(3, 1fr); max-width: 860px; margin: auto;} .partners .partners-list li {border: 1px solid #d9d9d94a; border-right: none;} .partners .partners-list li:nth-child(3n) {border-right: 1px solid #d9d9d94a;} .partners .partners-list li:nth-child(n+1):nth-child(-n+3) {border-bottom: none;} .partners .partners-list li img {opacity: 0.6; filter: grayscale(1);} .partners .partners-list li:hover img {opacity: 1; filter: grayscale(0);} footer {background-color: #f5f5f5; border-top: 1px solid #d9d9d9; height: 100px;} footer div {display: flex; align-items: center; justify-content: space-between; max-width: 1435px; height: 100%; margin: auto; color: #878787; font-size: 14px;} footer div .logo {height: 35px;} footer div .logo img {filter: grayscale(1); opacity: 0.6; width: auto; height: 100%;} .ko #about .box.sub {margin-top: 90px;} .ko #token .token-list li div.left p {font-weight: 400; color: #878787;} .ko #metamast .swiper-slide .step .step-box > p:not(b) {font-weight: 400;} .ko #metamast .swiper-slide .step .step-box > p {font-size: 15px; line-height: 1.5;} .ko #metamast .swiper-slide .step .step-box div b {font-size: 20px;} .ko #roadmap .roadmap-list li .grid {grid-template-columns: 0.3fr 1fr;} .ko #roadmap .roadmap-list li .grid li:nth-child(-n+2) p span:last-child {padding-right: 10px;} .ko #roadmap .roadmap-list li .grid li:nth-child(n+3) {font-weight: 400;} .ko #team .box ul li ul li {font-size: 16px; line-height: 20px; font-weight: 400;} @media screen and (min-width: 1921px) { #container {background-size: 100vw;} } @media screen and (max-width: 1630px) { #team {padding: 120px 20px 80px 6px;} #team .title {transform: unset; width: auto; margin-right: 20px;} #team .box {transform: unset;} } @media screen and (max-width: 1480px) { header .fixed > div, footer div, .partners > div {padding: 0 20px;} .content {padding: 120px 20px 30px;} .content#metamast {padding: 120px 0 30px;} #metamast .title {padding: 0 20px;} #metamast .scroll {padding: 55px 20px 0;} #metamast .swiper {padding: 20px 0 20px 20px;} #team {padding: 120px 20px 80px;} } @media screen and (max-width: 1303px) { #container:not(.ko) #roadmap .roadmap-list li:nth-child(2) .grid li:nth-child(3), #container:not(.ko) #roadmap .roadmap-list li:nth-child(3) .grid li:nth-child(3) {min-height: 55px;} } @media screen and (max-width: 1280px) { #about .box {gap: 15px 30px;} #about .box .box-img {overflow: hidden; width: 35vw;} #about .box > p {max-width: calc(100% - 35vw - 30px);} #about .box > p:last-child {margin: 0; max-width: unset;} .ko #about .box.sub {margin-top: 60px;} } @media screen and (max-width: 1266px) { #container:not(.ko) #roadmap .roadmap-list li:nth-child(2) .grid li:nth-child(4), #container:not(.ko) #roadmap .roadmap-list li:nth-child(3) .grid li:nth-child(4) {min-height: 55px;} } @media screen and (max-width: 1220px) { #roadmap .roadmap-list li .grid li:nth-child(-n+2) .bold, #roadmap .roadmap-list li .grid li:nth-child(-n+2) .bold span, #roadmap .roadmap-list li .grid li:nth-child(-n+2) p span {font-size: 24px;} #roadmap .roadmap-list li .grid li:nth-child(-n+2) p {font-size: 16px;} } @media screen and (max-width: 1195px) { #about .box .box-img {max-height: 150px; width: 30vw;} #about .box > p {max-width: calc(100% - 30vw - 30px);} #roadmap .roadmap-list li .grid li:nth-child(-n+2) .bold, #roadmap .roadmap-list li .grid li:nth-child(-n+2) .bold span, #roadmap .roadmap-list li .grid li:nth-child(-n+2) p span {font-size: 22px;} } @media screen and (max-width: 1088px) { #container:not(.ko) #roadmap .roadmap-list li:nth-child(n+4) .grid li:nth-child(4) {min-height: 55px;} } @media screen and (max-width: 1060px) { #about .box p, #token .token-list li.title, #token .token-list li .total b, #token .token-list li div.left b, #roadmap .roadmap-list li .grid li:nth-child(-n+2) .bold, #roadmap .roadmap-list li .grid li:nth-child(-n+2) .bold span, #roadmap .roadmap-list li .grid li:nth-child(-n+2) p span {font-size: 20px;} #about .box.sub > div ul li div p, #token .token-list li div.left p {font-size: 16px;} #about .box.sub > div.top ul li {width: calc(100% / 3); gap: 15px;} #about .box.sub > div.top ul li:nth-child(n+4) {width: calc(100% / 2);} #about .box.sub > div.top ul li .icon-img img {max-width: 85px;} #token .token-list {grid-template-columns: repeat(2, 1fr);} #token .token-list li:nth-child(1) {grid-column: 2 span; border-right: 1px solid #d9d9d9;} #token .token-list li:nth-child(4), #token .token-list li:nth-child(6) {border-right: 1px solid #d9d9d9;} #token .token-list li:nth-child(5) {border-right: none; border-bottom: none;} #token .token-list li:nth-child(6) {border-bottom: none;} } @media screen and (max-width: 1024px) { header .fixed > div .menu-list ul li a {font-weight: 400;} header .fixed > div .menu-list:not(.device) ul li.menu-item:nth-child(-n+6) {display: none;} header .fixed > div .menu-list:not(.device) ul {gap: 25px;} header .fixed .device {display: block !important;} header .fixed > div .menu-list.device {position: absolute; top: 105px; right: -100%; width: auto; height: calc(100vh - 120px); padding: 20px; background-color: #fff; max-width: 200px; border-radius: 2rem; background: linear-gradient(180deg, #f5f5f5c4, #f5f5f5); backdrop-filter: blur(10px); box-shadow: 3px 3px 10px -3px #2d2b2b45; transition: 0.6s ease-in-out; border: 1px solid #fff;} header .fixed > div .menu-list.device ul {flex-wrap: wrap; gap: 20px; width: 100%; height: auto;} header .fixed > div .menu-list.device ul li {width: 100%; padding: 12px; font-size: 20px; text-align: center; height: auto;} header .fixed > div .menu-list:not(.device) ul li.device {max-height: 22px;} header .fixed > div .menu-list:not(.device) ul li button {display: flex; flex-direction: column; justify-content: space-between;} header .fixed > div .menu-list:not(.device) ul li button span {display: block; width: 32px; height: 2px; border-radius: 2px; background-color: #2D2B2B; transition: 0.3s ease-in-out;} header .fixed > div .menu-list.device.active {right: 15px; transition: 0.6s ease-in-out;} header .fixed > div .menu-list:not(.device) ul li.active button span {transition: 0.3s ease-in-out;} header .fixed > div .menu-list:not(.device) ul li.active button span:nth-child(1) {transform: rotate(45deg) translate(12px, -4px); width: 10px;} header .fixed > div .menu-list:not(.device) ul li.active button span:nth-child(3) {transform: rotate(-45deg) translate(12px, 4px); width: 10px;} .content .plus::before {left: -12px;} .content .plus.right::before {right: -10px;} #about .box.sub > div.top ul li:nth-child(3) {border-right: 1px solid #2D2B2B !important;} #about .box.sub > div.bottom ul li {width: 100%; border-right: 1px solid #2D2B2B !important; border-bottom: none;} #about .box.sub > div.bottom ul li:last-child {border-bottom: 1px solid #2D2B2B;} #roadmap .roadmap-list {grid-template-columns: repeat(2, 1fr);} #roadmap .roadmap-list li:nth-child(2) .grid li:nth-child(3), #roadmap .roadmap-list li:nth-child(3) .grid li:nth-child(3), #roadmap .roadmap-list li:nth-child(2) .grid li:nth-child(4), #roadmap .roadmap-list li:nth-child(3) .grid li:nth-child(4), #roadmap .roadmap-list li:nth-child(n+4) .grid li:nth-child(4) {min-height: unset;} #roadmap .roadmap-list > li:last-child {border-top-color: #d9d9d9;} #roadmap .roadmap-list > li:nth-child(5) {border-top-color: #C09515;} #roadmap .roadmap-list > li:nth-child(2n) {border-right: 1px solid #d9d9d9;} #roadmap .roadmap-list > li:nth-child(3) {border-right-color: #C09515;} #roadmap .roadmap-list li .grid.active li:nth-child(2)::after {background-image: url(../img/icon-circle-y.svg);} #roadmap .roadmap-list li:nth-child(4) .grid li:nth-child(2)::after {transform: translateY(-50%);} #team > div {flex-direction: column;} #team .title .length {display: none;} #team .title {margin-right: 0;} #team .title h4 {display: block; padding-bottom: 30px; text-align: center; background-color: #fff; z-index: 5;} } @media screen and (max-width: 920px) { .content.main .btn-list {flex-wrap: wrap; justify-content: center; width: 420px;} .content.main .btn-list button {max-width: 200px;} } @media screen and (max-width: 860px) { #about .box p, #token .token-list li.title, #token .token-list li .total b, #token .token-list li div.left b, #token .token-list li div.left .num b, #token .token-list li div.right p span {font-size: 18px;} #roadmap .roadmap-list li.title p {font-size: 16px;} #about .box.sub > div ul li div p, #container:not(.ko) #token .token-list li div.left p {font-size: 15px;} #token .token-list li div.right p {font-size: 38px;} #roadmap .roadmap-list li .grid li:nth-child(n+3) {font-size: 13px;} #roadmap .roadmap-list li .grid li:nth-child(-n+2) .bold, #roadmap .roadmap-list li .grid li:nth-child(-n+2) .bold span, #roadmap .roadmap-list li .grid li:nth-child(-n+2) p span {font-size: 20px;} #container:not(.ko) #roadmap .roadmap-list li:nth-child(3) .grid li:nth-child(4), #container:not(.ko) #roadmap .roadmap-list li:nth-child(4) .grid li:nth-child(4) {min-height: 51px;} .ko #roadmap .roadmap-list li .grid li:nth-child(n+3) {font-size: 14px;} } @media screen and (max-width: 740px) { #metamast .title {align-items: start; flex-direction: column;} #team .box ul {grid-template-columns: 1fr;} } @media screen and (max-width: 680px) { .content div > .title h4, #roadmap .roadmap-list li.title h4 {font-size: 46px;} .content div > .title > span {font-size: 22px;} #about .box .box-img {max-height: 300px; width: 100%;} #about .box > p {max-width: unset; text-align: justify; padding: 0 1vw;} #about .box.sub > div.top ul li, #about .box.sub > div.top ul li:nth-child(4) {width: calc(100% / 2);} #about .box.sub > div.top ul li:last-child {width: 100%;} #about .box.sub > div.top ul li:nth-child(2n) {border-right: 1px solid #2D2B2B !important;} #about .box.sub > div.top ul li:nth-child(3) {border-right: none !important;} #token .token-list {grid-template-columns: 1fr;} #token .token-list li.title {grid-column: unset; background-color: #f5f5f5;} #token .token-list li:nth-child(2) {flex-wrap: wrap; align-items: baseline; justify-content: space-between;} #token .token-list li:nth-child(n+3):nth-child(odd) {border-right: 1px solid #d9d9d9;} #token .token-list li:nth-child(7) {border-bottom: none;} #token .token-list li .deco {display: none;} #token .token-list li .total {width: 100%; justify-content: end;} #roadmap .roadmap-list {grid-template-columns: 1fr;} #roadmap .roadmap-list li.title, #roadmap .roadmap-list > li:nth-child(5) {border-right: 1px solid #d9d9d9;} #roadmap .roadmap-list > li:nth-child(5) {border-top: none; border-bottom: none;} #roadmap .roadmap-list > li:nth-child(4) {border-top-color: #C09515;} #roadmap .roadmap-list li:nth-child(3) .grid li:nth-child(4), #roadmap .roadmap-list li:nth-child(4) .grid li:nth-child(4) {min-height: unset;} #roadmap .roadmap-list li .grid.active li:nth-child(2)::after {background-image: url(../img/icon-arrow-y.svg);} #roadmap .roadmap-list li:nth-child(n+3) .grid li:nth-child(2)::after {transform: rotate(90deg) translate(calc(-50% + 4px), -5px);} .partners .partners-list {grid-template-columns: repeat(2, 1fr);} .partners .partners-list li {border: none !important;} .partners .partners-list li img {opacity: 0.8; filter: grayscale(0);} footer {height: auto;} footer div {flex-direction: column; padding: 35px 20px; gap: 20px;} } @media screen and (max-width: 520px) { h1 {font-size: clamp(38px, 2.5rem, 3rem);} h4, #token .token-list li .total h2, .content div > .title h4, #roadmap .roadmap-list li.title h4 {font-size: 32px;} .content div > .title h4 {font-size: 42px;} .content div > .title > span {font-size: 18px;} .content.main > p {font-size: clamp(13px, 1.1rem, 1.3rem);} .content.main .btn-list {width: unset;} .content.main .btn-list button {font-size: 14px;} #about .box p {font-size: 16px;} #about .box.sub > div ul li {font-size: 20px;} #content:not(.ko) #about .box.sub > div ul li div p {font-size: 13px;} #about .box.sub > div.top ul li .icon-img img {max-width: 65px;} #about .box.sub > div.top ul li, #about .box.sub > div.top ul li:nth-child(4) {width: 100%;} #about .box.sub > div.top ul li:nth-child(1), #about .box.sub > div.top ul li:nth-child(3) {border-right: 1px solid #2D2B2B !important;} #content:not(.ko) #token .token-list li div.top > div > * {font-size: 12px;} #metamast .title {gap: 40px;} #metamast .swiper-slide {width: 440px; height: 320px;} #metamast .swiper-slide .step .step-img {max-height: 320px; padding-right: 5px;} #metamast .swiper-slide .step .step-box {padding: 10px;} #content:not(.ko) #roadmap .roadmap-list li.title p {font-size: 14px;} footer div {font-size: 12px;} } @media screen and (max-width: 460px) { .bg-000103 {height: 60px;} #about .box.sub > div.bottom ul li {flex-direction: column;} #about .box.sub > div.bottom ul li .icon-img {max-width: 70px; border-radius: 50%; overflow: hidden;} #about .box.sub > div.bottom ul li div {text-align: center;} #about .box.sub > div.bottom ul li div p {padding-right: 0;} #metamast .swiper-slide {width: 240px; height: 555px; justify-content: center;} #metamast .swiper-slide .step {flex-direction: column; height: 100%;} #metamast .swiper-slide .step .step-img {max-height: 460px; padding: 0;} #metamast .swiper-slide .step .step-img img {width: 100%; height: auto;} #metamast .swiper-slide .step .step-box {padding: 20px 10px;} } @media screen and (max-width: 415px) { h4, #token .token-list li .total h2 {font-size: 28px;} .content div > .title > span {font-size: 16px;} .content div > .title h4 {font-size: 36px;} #about .box > p {padding: 0 0.5vw; font-size: 14px;} #token .token-list li.title {min-height: 100px;} #token .token-list li:not(.title) {min-height: 180px;} #token .token-list li > .top {flex-direction: column;} #about .box p, #token .token-list li.title, #token .token-list li .total b, #token .token-list li div.left b, #token .token-list li div.left .num b, #token .token-list li div.right p span {font-size: 16px;} #token .token-list li div.left p {font-size: 14px;} #token .token-list li div.right p {font-size: 32px;} #team .box ul li .name .rank {font-size: 16px;} #team .box ul li .name {font-size: 20px;} #team .box ul li ul li {font-size: 14px;} .ko #token .token-list li div.left p {font-size: 15px;} } @media screen and (max-width: 365px) { header .fixed > div .menu-list ul li .lang::before {width: 14px; height: 14px; background-size: 100%;} h4, #token .token-list li .total h2 {font-size: 24px;} .content.main {padding: clamp(65px, 15vh, 25vh) 40px clamp(65px, 25vh, 35vh);} #content:not(.ko) #about .box > p {padding: 0; font-size: 13px;} #token .token-list li {flex-direction: column; justify-content: space-between;} #token .token-list li:nth-child(2) {justify-content: center;} #token .token-list li div.right {justify-content: end;} #roadmap .roadmap-list li .grid {grid-template-columns: 0.3fr 1fr;} #roadmap .roadmap-list li .grid li:nth-child(-n+2) .bold, #roadmap .roadmap-list li .grid li:nth-child(-n+2) .bold span, #roadmap .roadmap-list li .grid li:nth-child(-n+2) p span {font-size: 18px;} #roadmap .roadmap-list li .grid li:nth-child(-n+2) p {font-size: 14px;} #roadmap .roadmap-list li .grid li:nth-child(n+3) {font-size: 12px;} .partners .partners-list {grid-template-columns: 1fr; max-width: 220px;} footer div p {text-align: center; line-height: 1.4;} } @media screen and (max-width: 336px) { footer div .logo, header .fixed > div .logo {height: 30px;} header .fixed > div .menu-list:not(.device) ul {gap: 15px;} header .fixed > div .menu-list:not(.device) ul li button span {width: 25px;} header .fixed > div .menu-list:not(.device) ul li.active button span:nth-child(1) {transform: rotate(45deg) translate(12px, -3px);} header .fixed > div .menu-list:not(.device) ul li.active button span:nth-child(3) {transform: rotate(-45deg) translate(12px, 3px);} .content div > .title h4 {font-size: 30px;} .content.main {padding: clamp(65px, 10vh, 25vh) 40px clamp(65px, 25vh, 35vh);} #content:not(.ko) #about .box > p {text-align: center;} #team .box ul li .name .rank {font-size: 14px;} #team .box ul li .name {font-size: 18px;} #team .box ul li ul li {font-size: 13px;} .ko #about .box p{ font-size: 14px;} .ko #about .box.sub > div ul li {font-size: 18px;} .ko #about .box.sub > div ul li div p {font-size: 14px;} } @media screen and (max-width: 312px) { #token .token-list li {padding: 10px;} #token .token-list li .total b {font-size: 14px;} #roadmap .roadmap-list li .grid li:nth-child(-n+2) {padding: 0 10px;} } @media screen and (max-width: 288px) { .content div > .title h4 {font-size: 26px;} }