@charset "utf-8";

:root {
	--col-theme: #1F1337;
	--col-wt: #FFFFFF;
	--col-bk: #0D0D0D;

	--trans-25: all .25s ease-in-out;
	--hd-height: 11rem;
	--hd-height-m: 7rem;
}

html {font-size: 62.5%;}
body {color: var(--col-wt); font-family: 'Pretendard', sans-serif; font-size: 1.5rem; font-weight: 400; letter-spacing: -0.02em;}

/* 스크롤바 */
body::-webkit-scrollbar {width: 8px;}
body::-webkit-scrollbar-track {background-color: var(--col-theme);}
body::-webkit-scrollbar-thumb {background-color: rgba(255,255,255,0.25); border-radius: 50px;}

/* font-family */
.ff-pretendard {font-family: 'Pretendard', sans-serif !important;}
.ff-inter {font-family: "Inter", sans-serif !important;}
.ff-bNeue {font-family: 'Bebas Neue', sans-serif !important;}

/*============================================================*/
/* 공통 */
/*============================================================*/
/* 풀페이지 */
.page-container {display: flex; justify-content: center; align-items: flex-end; height: 100%;}
.page-wrap {width: 100%; height: calc(100% - var(--hd-height));}

/* 타이틀 */
.main-title {text-align: center;}
.main-title h3 {font-family: 'Bebas Neue', sans-serif; font-size: 7.2rem;}
.main-title h4 {margin-bottom: 1rem; font-size: 3rem; font-weight: 700; }
.main-title p {font-size: 14px;}

/*============================================================*/
/* 헤더 */
/*============================================================*/
/*로고*/
header {position: fixed; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; align-items: center; gap: 7rem; max-width: 1440px; height: var(--hd-height); margin: 0 auto; font-family: "Inter", sans-serif; z-index: 2;}
header h1 {flex: 0 0 auto;}
/* 로고 변경 240523 */
/*header h1 a {display: inline-block; width: 17.8rem; aspect-ratio: 178/29; background:url(/img/logo/horiz_wt.png) left center/contain no-repeat;}*/
header h1 a {display: inline-block; width: 5.5rem; aspect-ratio: 47/46; background:url(/img/logo/verti_wt.png) left center/contain no-repeat;}

/*네비*/
.gnb-wrap {display: flex; justify-content: space-between; align-items: center; gap: 7rem; width: 100%;}
.gnb {display: flex; justify-content: center; align-items: center; width: 100%;}
.gnb.mobile {display: none;}
.gnb > li {margin: 0 4rem;}
.gnb > li > a {position: relative; display: block; width: 100%; height: 100%; padding: 2rem 0; font-size: 14px; font-weight: 500;}
.gnb > li > a:after {content: ""; position: absolute; bottom: 0; left: 0; right: 0; width: 0; height: 1px; margin: auto; background: var(--col-wt); transition: var(--trans-25);}
@media (hover: hover) and (pointer: fine) {
    .gnb > li > a:hover:after {width: 100%;}
}


/*언어*/
.lang-box {flex: 0 0 auto; position: relative;}
.lang-box > div {position: relative; display: flex; justify-content: center; align-items: center; min-width: 40px; height: 36px; padding-right: 16px; font-size: 16px; font-weight: 500; cursor: pointer;}
.lang-box > div::after {content: ""; position: absolute; top: 15px; right: 0; width: 7px; aspect-ratio: 6/5; background: url("/img/select.png") center/contain no-repeat; transition: var(--trans-25);}
.lang-box ul {opacity: 0; visibility: hidden; position: absolute; top: 4.6rem; left: 50%; transform: translateX(-50%); min-width: 4rem; background: #FAFAFA; border-radius: 6px; overflow: hidden; transition: var(--trans-25);}
.lang-box ul li {padding: 1rem 1.4rem; border-bottom: 1px solid #ACACAC; color: #959595; font-size: 14px; transition: var(--trans-25); cursor: pointer;}

.lang-box.open > div::after {transform: rotate(180deg);}
.lang-box.open ul {opacity: 1; visibility: visible; top: 3.6rem;}
@media (hover: hover) and (pointer: fine) {
	.lang-box ul li:hover {color: var(--col-bk); font-weight: 700;}
}

/*모바일 네비*/
body.open {overflow: hidden;}
.btn-snb {display: none; width: 36px; height: 36px;}
.btn-snb .icon-burger {position: relative; display: block; width: 27px; height: 2px; margin: 0 auto; background: #fff; transition: var(--trans-25);}
.btn-snb .icon-burger:before,
.btn-snb .icon-burger:after {content: ''; position: absolute; width: 100%; height: 100%; display: block; background: #fff; transition: var(--trans-25);}
.btn-snb .icon-burger:before {top: 8px;}
.btn-snb .icon-burger:after {top: -8px;}

.btn-snb.open .icon-burger {background: transparent;}
.btn-snb.open .icon-burger:before,
.btn-snb.open .icon-burger:after {top: 0;}
.btn-snb.open .icon-burger:before {transform: rotate(-45deg);}
.btn-snb.open .icon-burger:after {transform: rotate(45deg);}


/*============================================================*/
/* 섹션 1(Home) = 비주얼 슬라이드 */
/*============================================================*/
.main-slide {position: absolute; top: 0; bottom: 0; width: 100%; height: 100%;}
.main-slide .swiper-slide {background-image: url(/img/visual/01.jpg); background-position: center; background-size: cover; background-repeat: no-repeat;}
.main-slide .swiper-txt {position: relative; max-width: 1504px; margin: 0 auto;}
.main-slide .swiper-txt .left {position: absolute; top: 50%; transform: translateY(-50%); left: 0;}
.main-slide .swiper-txt .right {display: none; position: absolute; bottom: 8.4rem; right: 0;}

.main-slide .swiper-txt .left > * {margin-bottom: 5.2rem;}
.main-slide .swiper-txt h2 {font-family: 'Bebas Neue', sans-serif; font-size: 13rem; line-height: 1; user-select: none;}
.main-slide .swiper-txt .left p {font-family: "Inter", sans-serif; font-weight: 700; line-height: 1.75;}
.main-slide .swiper-txt .btn-area {margin: 0 -6px;}
.main-slide .swiper-txt .btn-area a {display: inline-flex; justify-content: center; align-items: center; min-width: 15rem; height: 44px; margin: 0 6px; border: 1px solid var(--col-wt); border-radius: 8px; font-weight: 700; transition: var(--trans-25);}

.main-slide .swiper-txt .right p {margin-bottom: 2.8rem; font-size: 2.4rem; font-weight: 700;}
.main-slide .swiper-txt ul li {font-size: 12px; font-weight: 300; line-height: 2;}

@media (hover: hover) and (pointer: fine) {
    .main-slide .swiper-txt .btn-area a:hover {background: var(--col-wt); color: var(--col-bk);}
}


/*============================================================*/
/* 섹션 2(DMC) = 도표 */
/*============================================================*/
.outline {background: url(/img/sec02.jpg) center/cover no-repeat;}
.outline .diagram {height: 46%; margin: 2% auto 0; text-align: center;}
.outline .diagram img {max-width: none; height: 100%;}
.outline .diagram .mobile {display: none;}


/*============================================================*/
/* 섹션 3(platform) = 플랫폼 */
/*============================================================*/
.service {background: url(/img/sec03.jpg) center/cover no-repeat;}
.pf-slide-wrap {position: relative; max-width: 1164px; margin: 0 auto;}
.pf-slide-wrap .page-wrap > .main-title {position: absolute; top: 40%; left: 0; transform: translateY(-50%); text-align: left;}
.pf-slide-wrap .swiper-controller {position: absolute; bottom: 30%; left: 0; transform: translateY(50%); width: 90px; height: 40px; z-index: 1;}
.swiper-controller .swiper-button-next,
.swiper-controller .swiper-button-prev {width: 40px; height: 40px; background: rgba(252,252,252,0.09); border-radius: 2px; transition: var(--trans-25); user-select: none;}
.swiper-controller .swiper-button-prev {left: 0;}
.swiper-controller .swiper-button-next {right: 0;}
.swiper-controller .swiper-button-next:after,
.swiper-controller .swiper-button-prev:after {color: #fff; font-size: 20px; transition: var(--trans-25); user-select: none;}

.platform-slide {width: 100%; height: 100%;}
.platform-slide .swiper-slide {display: flex; justify-content: space-between; align-items: center; width: 100%; height: 100%;}
.platform-slide .main-title {text-align: left;}
.platform-slide .main-title h4 {font-family: 'Bebas Neue', sans-serif; font-size: 3.2rem; font-weight: 400; letter-spacing: 0}
.platform-slide .img {width: 66%; height: 100%; margin-right: -4rem; background-size: contain; background-position: center; background-repeat: no-repeat; user-select: none;}
.platform-slide .swiper-slide:nth-child(1) .img {background-image: url("/img/platform01.png");}
.platform-slide .swiper-slide:nth-child(2) .img {background-image: url("/img/platform02.png");}
.platform-slide .swiper-slide:nth-child(3) .img {background-image: url("/img/platform03.png");}

@media (hover: hover) and (pointer: fine) {
    .swiper-controller .swiper-button-next:hover,
    .swiper-controller .swiper-button-prev:hover {background: #fff; color: var(--col-theme);}
    .swiper-controller .swiper-button-next:hover:after,
    .swiper-controller .swiper-button-prev:hover:after {color: var(--col-theme); font-weight: 700;}
}

/*============================================================*/
/* 섹션 4(token) = 토큰 */
/*============================================================*/
.info {background: url(/img/sec04.jpg) center/cover no-repeat;}
.info .page-wrap {display: flex; flex-direction: column; justify-content: center; gap: 8%;}
.info .table-wrap {margin: 0 auto; background: #0C0721; border: 1px solid rgba(255,255,255,0.5); border-radius: 12px; overflow: hidden;}
.info .table-wrap table {table-layout: fixed;}
.info .table-wrap tr {border-bottom: 1px solid rgba(255,255,255,0.5);}
.info .table-wrap th,
.info .table-wrap td {height: 8rem; padding: 1rem; border-right: 1px solid rgba(255,255,255,0.5); text-align: center; font-size: 1.8rem; font-weight: 700;}
.info .table-wrap td {line-height: 1.5;}

.info .table-wrap.name {max-width: 772px;}
.info .table-wrap.network {max-width: 1017px; margin-top: 4.4%;}


/*============================================================*/
/* 섹션 5(roadmap) = 로드맵 */
/*============================================================*/
.history .page-wrap {display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 5%;}
.history {background: url(/img/sec05.jpg) center/cover no-repeat;}
.history-list {display: flex; flex-wrap: wrap; justify-content: center; gap: 3rem 5rem; width: 100%; max-width: 1100px; margin: 0 auto;}
.history-list > li {flex: 1 0 auto; position: relative; width: calc(33.33% - 3.4rem); padding: 4rem 3rem 3rem; border-radius: 2rem; box-shadow: 0 -2px 10px 0 rgba(233,223,255,30%);}
.history-list > li::before,
.history-list > li::after {position: absolute; top: 0; bottom: 0; left: 0; right: 0; }
.history-list > li::before {box-shadow: 0 -2px 40px 0 rgba(187,155,255,15%);}
.history-list > li::after {box-shadow: inset 0 0.5px 0 0 rgba(255,255,255,50%);}
.history-list > li p {margin-bottom: 1.7rem; text-align: center; color: #C3B9D7; font-size: 3rem; font-weight: 600;}
.history-list > li > ol > li {text-align: center; font-size: 14px; font-weight: 300; line-height: 1.45; word-break: break-all;}


/*============================================================*/
/* 푸터 */
/*============================================================*/
footer {padding: 5.5rem 0 5rem;}
footer .container {display: flex; justify-content: space-between; align-items: flex-end; max-width: 1144px; margin: 0 auto;}
/* 로고 변경 240523 */
/*footer .ft-logo {display: inline-block; width: 17.8rem; aspect-ratio: 178/29; margin-bottom: 12px; background:url(/img/logo/horiz_bk.png) left center/contain no-repeat;}*/
footer .ft-logo {display: inline-block; width: 5.5rem; aspect-ratio: 47/46; margin-bottom: 12px; background:url(/img/logo/verti_bk.png) left center/contain no-repeat;}
.copyright {color: var(--col-bk); font-size: 14px;}
footer .btn-area {display: flex; flex-wrap: wrap; gap: 4px 8px;}
.btn-download {display: inline-flex; justify-content: center; align-items: center; min-width: 12rem; height: 35px; border-radius: 4px; background: var(--col-bk); color: var(--col-wt); font-size: 12px; line-height: 1;}

/*============================================================*/
/* 반응형 */
/*============================================================*/
@media (min-width: 1921px) {
    .outline .page-wrap {display: flex; flex-direction: column; justify-content: center;}
}
@media (max-width: 1600px) {
    /* 섹션1 */
    .main-slide .swiper-txt .left {left: 5rem;}
    .main-slide .swiper-txt .right {right: 5rem;}
}
@media (max-width: 1500px) {
	header {padding: 0 2rem;}

    /* 섹션2 */
    .outline .diagram {min-width: auto; width: 100%; max-width: 750px; margin: 3rem auto 0; padding-bottom: 2rem;}
    .outline .diagram img {margin: 0 auto;}
    .outline .diagram .pc {display: none;}
    .outline .diagram .mobile {display: block;}

    /* 섹션5 */
    .history-list > li {padding: 3rem 3rem 2rem;}
}
@media (max-width: 1200px) {
    /* 풀페이지 해제 */
    .page-wrap {height: auto; padding: 10rem 4rem;}

    /*헤더*/
	.btn-snb {display: block;}
	.gnb-wrap {opacity: 0; visibility: hidden; position: absolute; top: 0; bottom: 0; right: -240px; width: 100dvw; height: 100dvh; padding: calc(var(--hd-height) + 3rem) 3rem 5rem; background: rgba(0,0,0,0.85); align-items: flex-start; transition: right .35s;}
	.gnb-wrap.open {opacity: 1; visibility: visible; right: 0; transition: top .35s;}

    .gnb.pc {display: none;}
    .gnb.mobile {display: flex;}
    .gnb {flex-direction: column;}
    .gnb > li {display: inline-block;}
    .lang-box {position: absolute; top: 3.7rem; right: 9rem;}

    /*섹션1*/
    .visual {height: 100dvh;}
    .main-slide .swiper-txt {position: absolute; top: calc(var(--hd-height) + 2rem);}
    .main-slide .swiper-txt .left {top: calc(13% + 13rem); left: 4rem;}
    .main-slide .swiper-txt .right {right: 4rem;}

    /*섹션2*/
    .outline .diagram img {max-width: 100%; height: auto;}

    /*섹션3*/
    .pf-slide-wrap .page-wrap > .main-title {position: relative; top: 0; left: 0; transform: none;}
    .pf-slide-wrap .swiper-wrapper {align-items: center;}
    .platform-slide .swiper-slide {flex-direction: column;}
    .platform-slide .main-title {margin: 0 0 0 auto;}
    .platform-slide {padding-bottom: 7rem;}
    .platform-slide .swiper-slide {align-items: flex-start; gap: 3rem;}
    .platform-slide .main-title {margin: 0;}
    .platform-slide .img {width: 100%; aspect-ratio: 772/466;}
    .pf-slide-wrap .swiper-controller {bottom: 0; transform: none;}

    /*섹션4*/
    .info .page-wrap {gap: 3rem;}

    /*섹션5*/
    .history .page-wrap {gap: 3rem;}
    .history-list > li {width: calc(33.33% - 2rem);}

    /*푸터*/
    footer {padding: 3rem 2rem 2rem;}
}
@media (max-width: 992px) {
	/*html {font-size: 58.6%; !* 15px *!}*/
    /*공통*/
    .main-title h3 {font-size: 6rem;}

    /*섹션1*/
    .main-slide .swiper-txt .left > * {margin-bottom: 2rem;}
    .main-slide .swiper-txt h2 {font-size: 7rem;}

    /*섹션3*/
    .info .table-wrap th, .info .table-wrap td {height: 6rem;}

    /*섹션5*/
    .history-list {gap: 3rem;}
    .history-list > li {width: calc(50% - 2rem); padding: 3rem 2rem;}
    .history-list > li p {font-size: 2.4rem;}

    /*푸터*/
    footer .container {flex-direction: column; align-items: flex-start; gap: 4rem;}
}
@media (max-width: 768px) {
    /*헤더*/
    .gnb-wrap {gap: 3rem;}

    /*섹션1*/
    /*.main-slide .swiper-slide {background-image: url(/img/visual/01_m.jpg);}*/
    .main-slide .page-wrap {height: auto;}
    .main-slide .swiper-txt .left {top: calc(50% + 13rem);}
    .main-slide .swiper-txt .right {display: none;}

    /*섹션3*/
    .data, .data thead, .data tbody, .data th, .data td, .data tr {display: block;}
    .data thead tr {display: none;}
    .data tbody tr {padding: 2rem 0; border-bottom: 1px solid rgba(255,255,255,0.5);}
    .info .table-wrap th, .info .table-wrap td {position: relative; height: auto; padding: 1rem 3rem 1rem 240px; border: none; border-bottom: 1px solid rgba(255,255,255,0.5); text-align: left;}
    .info .table-wrap td:last-child {border: 0;}
    .data tbody tr td:before {content: attr(data-head); position: absolute; top: 50%; left: 3rem; transform: translateY(-50%); right: 3rem; display: inline-block; min-width: 230px; text-align: left;}

    /*섹션5*/
    .history-list > li {width: 100%;}
}
@media (max-width: 567px) {
    /*풀페이지*/
    .page-wrap {padding: 7rem 2rem;}
    /*공통*/
    .main-title h3 {font-size: 3.8rem;}
    /* 섹션1 */
    .main-slide .swiper-txt .left {left: 2rem;}
    .main-slide .swiper-txt .right {right: 2rem;}
    /*섹션3*/
    .info .table-wrap th, .info .table-wrap td {padding: 40px 3rem 1rem; text-align: center;}
    .data tbody tr td:before {top: 1rem; transform: none; min-width: auto; text-align: center;}
}