@charset "utf-8";
@font-face {
    font-family: 'Poppins Regular';
    font-style: normal;
    font-weight: normal;
    src: local('Poppins Regular'), url('../font/Poppins-Regular.woff') format('woff');
    }
    
    @font-face {
    font-family: 'Poppins Thin';
    font-style: normal;
    font-weight: normal;
    src: local('Poppins Thin'), url('../font/Poppins-Thin.woff') format('woff');
    }
    
    @font-face {
    font-family: 'Poppins ExtraLight';
    font-style: normal;
    font-weight: normal;
    src: local('Poppins ExtraLight'), url('../font/Poppins-ExtraLight.woff') format('woff');
    }

    @font-face {
    font-family: 'Poppins Light';
    font-style: normal;
    font-weight: normal;
    src: local('Poppins Light'), url('../font/Poppins-Light.woff') format('woff');
    }

    @font-face {
    font-family: 'Poppins Medium';
    font-style: normal;
    font-weight: normal;
    src: local('Poppins Medium'), url('../font/Poppins-Medium.woff') format('woff');
    }
    
    @font-face {
    font-family: 'Poppins SemiBold';
    font-style: normal;
    font-weight: normal;
    src: local('Poppins SemiBold'), url('../font/Poppins-SemiBold.woff') format('woff');
    }
    
    @font-face {
    font-family: 'Poppins Bold';
    font-style: normal;
    font-weight: normal;
    src: local('Poppins Bold'), url('../font/Poppins-Bold.woff') format('woff');
    }
    
    @font-face {
    font-family: 'Poppins ExtraBold';
    font-style: normal;
    font-weight: normal;
    src: local('Poppins ExtraBold'), url('../font/Poppins-ExtraBold.woff') format('woff');
    }       

    @font-face {
    font-family: 'Poppins Black';
    font-style: normal;
    font-weight: normal;
    src: local('Poppins Black'), url('../font/Poppins-Black.woff') format('woff');
}
@font-face {
	font-family: 'SUIT';
	font-weight: 400;
	src: url('../font/SUIT-Regular.woff2') format('woff2');
}
@font-face {
	font-family: 'SUIT';
	font-weight: 500;
	src: url('../font/SUIT-Medium.woff2') format('woff2');
}
@font-face {
	font-family: 'SUIT';
	font-weight: 600;
	src: url('../font/SUIT-SemiBold.woff2') format('woff2');
}
@font-face {
	font-family: 'SUIT';
	font-weight: 700;
	src: url('../font/SUIT-Bold.woff2') format('woff2');
}
@font-face {
	font-family: 'SUIT';
	font-weight: 800;
	src: url('../font/SUIT-ExtraBold.woff2') format('woff2');
}
@font-face {
	font-family: 'SUIT';
	font-weight: 900;
	src: url('../font/SUIT-Heavy.woff2') format('woff2');
}

/* 공통 */
:root {
	--primary-color: #696CBF;
	--txt-color: #171717;
	--point-color:#00c3a7;
	--bg-color:#ffffff;
}
*, *:before, *:after {
  box-sizing: border-box !important;
}

/* display */
.pc_hidden { display: none !important; }

/* reset */
html { overflow-x: hidden; overflow-y: auto; -ms-touch-action: manipulation; touch-action: manipulation; scroll-behavior: smooth;}
body { min-height: 100vh; min-height: 960px;  min-height: -webkit-fill-available; color:var(--txt-color); background-color: var(--bg-color); font: 20px 'SUIT', 'Malgun Gothic', '돋움', 'Dotum', Arial, Sans-serif; font-weight: 500;}
html, body { height: 100%; -webkit-overflow-scrolling: touch;}
h1, h2, h3, h4, h5, h6 { font: 16px 'SUIT', 'Malgun Gothic', '돋움', 'Dotum', Arial, Sans-serif; }
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, blockquote, th, td, p, button { margin: 0; padding: 0; -webkit-text-size-adjust: none;word-break: keep-all;  }
fieldset, img, abbr, acronym { border: 0 none; }
fieldset { min-inline-size: auto; }
iframe{ display: block; margin:3rem auto;}
legend { position: absolute; height: 0; line-height: 0; font-size: 0; overflow: hidden; margin: 0; padding: 0; }
address, caption, cite, code, dfn, em, var { font-style: normal; font-weight: normal; }
ol, ul { list-style: none; }
q:before, q:after { content:''; }
table { width: 100%; border-collapse: collapse; border-spacing: 0; }
caption { display: table-caption; width: 0; height: 0; line-height: 0; font-size: 0; overflow: hidden; text-align: left; }
select { min-width: 100px; -webkit-border-radius: 0; }
select::-ms-expand { display: none; }
textarea { overflow: auto; resize: none; }
select:focus,
input:focus,
textarea:focus { outline-color: #2068d3; outline-offset: -1px; }
a { text-decoration: none; cursor: pointer; color: #fff; }
a.disabled,
button.disabled,
button:disabled { cursor: default; pointer-events: none; }
button { border: 0 none; background: none; cursor: pointer; }
button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }
button, input, select, textarea { font: 1rem 'SUIT', 'Malgun Gothic', '돋움', 'Dotum', Arial, Sans-serif; font-weight: 500; vertical-align: middle; }
a:focus, button:focus { outline-offset: -2px; }
input:-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px #fff inset; }
area { cursor: pointer; }
hr { margin: 0; border: 0 none; }

/* html5 태그*/
header, footer, article, section, aside, details, figure, figcaption, nav, hgroup { display: block; margin: 0; padding: 0; }
audio[controls], canvas, video { display: inline-block; *display: inline; *zoom: 1; }

/* box-sizing */
*, *:before, *:after { -webkit-box-sizing: border-box !important; box-sizing: border-box !important; }


.wrap{ width: 1440px;margin: auto;}
h2{ font-size: 60px; font-family: 'SUIT'; font-weight: 900; text-transform: uppercase;}
h3{ font-size: 60px; font-family: 'SUIT'; font-weight: 900; }
h4{ font-size: 30px; font-family: 'SUIT';  font-weight: 800; line-height:40px;}

/* header */
#header { position: fixed; top: 0; width: 100%; height: 95px; z-index: 999;  background-color: transparent; transition: all 0.2s ease-in-out;}
#header.nav-up { top: -100px; transition: all 0.2s ease-in; }
.nav-down{ background: linear-gradient(90deg, #a2a4fa66 0%, #bd7ebb66 100%);  }
#header .wrap { position: relative; display: flex; justify-content: space-between; align-items: center; }
#header .logo{	background: url(../images/logo-chica.svg) no-repeat center center; background-size: 100%; width: 134px; height: 100px; }
#header .logo a{ display: block; text-indent: -9999px; width: 100%; height: 100%;}

#gnb{display: flex; justify-content: space-between; }
.gnb { display: flex; justify-content: right; line-height: 0;  gap: 40px;  }
.gnb li { display: inline-flex; }
.gnb li a { display: block; position: relative; padding: 11px 10px; color: #FFF; line-height: 22px; font-size: 1.125rem;font-family: 'Poppins Regular', sans-serif; text-transform: uppercase;}
.gnb li a:before { content: ""; position: absolute; bottom: 0; left: 50%; width: 0; height: 3px; background: #fff; transition: all 0.3s ease 0s; }
.gnb li a:hover { color: #FFF;  }
.gnb li a:hover:before { width: calc(100% - 20px); left: 10px; }
.logo-gnb,.gnb .home,[class*="btn-gnb"] { display: none !important; }	

#topBtn {  display: none;  position: fixed;  bottom: 20px;  right: 30px; width: 52px;height: 52px; z-index: 999;  font-size: 1.125rem; border-radius: 50%;
	outline: none;  background-color: transparent; cursor: pointer; text-indent: -9999px;}
#topBtn:hover {background-color: var(--primary-color);}
#topBtn a{ display: block; width: 100%; height: 100%; padding: 10px;}
#topBtn .ico-top{ width: 100%; height: 100%; display: block;}
#topBtn .ico-top path{fill: var(--primary-color); transition: all .2s ease-in; }
#topBtn:hover .ico-top path{fill: #fff; transition: all .2s ease-in-out; }

/* language */
.lang{ position: relative; right: 0;  padding: 0.25rem 1rem;   transition: all .2s ease;  cursor: pointer;  }
.lang-ico{ width: 60px; height:100%; background: url(../images/ico-lang.svg) no-repeat center center; background-size: 50%;  }
.lang > a{ display: block; color: #fff; margin: 0.25rem 1rem; transition: all .2s ease; }
.lang > a:hover{ color: var(--primary-color); }
.lang:hover .lang_menu{ display: block; transition: all .2s ease; position: absolute; top: 40px; width: 70px; background-color: #fff; padding:10px 1rem;border-radius: 3px; }
.lang:hover .lang_menu li a{ display: block; color: #7042A0; font-size: 1rem; padding: 4px 0; transition: all .2s ease;}
.lang_menu{ display: none; }
.lang_menu li{position: relative;  }
.lang_menu li a::before { content: ""; position: absolute; bottom: 0; left: 50%; width: 0; height: 2px; background: #653C94;  transition: all 0.3s ease 0s; }
.lang_menu li a:hover:before { width: 100%; left:0; }
.lang_menu li.active a:before {width: 100%; left:0;}

/* contents */
#intro{  
    max-width: 100%;
	height:150vh;  
	background: linear-gradient(90deg, rgba(162,164,250,1) 0%, rgba(189,126,187,1) 100%);
	overflow: hidden;}
#intro .wrap{ position: relative; display: flex; align-items: center; height: 100%; padding: 0 80px; }
#intro .wrap h1{position: absolute; left: 5rem; top: 34vh; font-size: 4.375rem; color: #fff; font-family: 'Poppins black'; line-height: 1.4;}
#intro .wrap h1 em{ display: block; font-size: 6rem;}
#intro .wrap .img-wrap{ position: absolute; z-index: 5; left: 55%; height: 100%; top: 15vh;  }
#intro .wrap .img-wrap .intro-txt{  position: absolute;  transform: translate( 480px, -105px); overflow: hidden;}

.intro-bg{ position: absolute; left: 0; right: 0; top: 0; height: 150vh; background: url(../images/bg-main.png) no-repeat center top ; background-size: cover; z-index: 2; }
.mov-txt{ animation: rotation 12s ease-out infinite; }

@keyframes rotation {
    0% { transform: rotate(1deg);}
    100% { transform: rotate(360deg);}
  }
@keyframes light {
  0% { opacity: 1;}
  50% { opacity: 0;}
  100% { opacity: 1;}
}
@keyframes light2 {
  0% { opacity: 1;}
  50% { opacity: 0;}
  100% { opacity: 1;}
}

#market{ position: relative; margin-top:calc(-50vh + 90px); height: 100vh; min-height: 960px; }
#market .market-bg{ position: absolute; top: 0; left: 0; right: 0; height: 50vh; background: linear-gradient(90deg, #a2a4fa 0%, #bd7ebb 100%);z-index: -1; }
#market .wrap{ position: relative; height: 100%;padding: 0 80px; z-index: 5;}
#market .wrap .txt-area{ position:absolute; padding: 10vh 140px; line-height: 54px; width: 100%; text-align: center; color:#fff; font-size: 2.5rem;font-family: 'SUIT'; font-weight: 600; word-break:keep-all;}
.list-wrap{padding-top: calc(50vh - 125px);}
.list-wrap .about-list{ display: flex; justify-content: space-between;  z-index: 5; }
.list-wrap .about-list li{ text-align: center; width: 31%;} 

#market2{  max-width: 100%; height: 100vh; min-height: 960px;  background: url(../images/bg-market2.png) no-repeat right bottom; background-size: cover; overflow: hidden;  }
#market2 .wrap{ padding-top: 180px; height: 100%; }
#market2 .wrap p { text-align: center; font-size: 2.5rem;font-family: 'SUIT';font-weight: 700;  padding:40px 220px 0; line-height: 1.2;}
.market2-list{position: relative; height: 500px;}
.market2-list .left, 
.market2-list .right{
  position: absolute; 
  display: flex; 
  justify-content: center; 
  align-items: center;
  background-color: #fff; 
  border-radius: 50%; 
  font-size: 30px;
  text-align: center;
  width: 500px; 
  height: 500px;
  padding: 70px;
  z-index: 1;}
.market2-list .left{ left: calc(50% - 690px);}
.market2-list .right{ right: calc(50% - 690px);}
.market2-list .chica{  position: absolute; left: calc(50% - 295px); top: -45px; width: 590px; z-index: 5; }
.market2-list .chica>img{ width: 100%; height: 100%;}

#goal{ max-width: 100%; background-color: #F5F6FC; height: 100vh; min-height: 960px; overflow: hidden;   }
#goal .wrap{ padding: 0 80px;}
#goal .wrap h3{ text-align: center; padding-top: 120px;}
.goal-list{ margin-top: 40px; }
.goal-list li{ display: flex; flex-wrap: wrap; width: 100%; padding: 36px 20px 40px;}
.goal-list li:not(:last-child){ border-bottom: 1px solid #BFBFBF;}
.goal-list li div.img{ width: 146px; height: 146px; border-radius: 50%; text-align: center; padding-top: 30px; background: linear-gradient(90deg, rgba(162,164,250,1) 0%, rgba(189,126,187,1) 100%);  }
.goal-list li div.txt{ width: calc( 100% - 146px); padding-left: 32px; display: flex; flex-flow: column; justify-content: center;}

#rewards{ max-width: 100%; height: 100vh; min-height: 960px; overflow: hidden;  }
#rewards .wrap{ padding: 0 80px; position: relative; height: 100%; }
#rewards .wrap .rewards-img{ position: absolute; left: 0; width: 100%; height: 100%; background: url(../images/chica-reward.png) no-repeat left bottom;}
#rewards .wrap .rewards-txt{ position: absolute; left:45%; top:0 ; padding-right: 80px; }
#rewards .wrap .rewards-txt h3{ padding-top: 120px; line-height: 1.2; font-family: 'suit'; font-weight: 900; }
.rewards-list{ padding: 60px 0;}
.rewards-list li{  display: flex;flex-wrap: wrap; padding: 20px; }
.rewards-list li:not(:last-child){ border-bottom: 1px solid #BFBFBF;}
.rewards-list li div:nth-child(1){ width: 50px; display: flex; align-items: center;}
.rewards-list li div:nth-child(2){ width: calc(100% - 50px); padding-left: 20px; }

#membership{  background-color: #F5F6FC; height: 100vh; min-height: 960px;  min-height: 960px; display: flex; align-items: center;overflow: hidden;  }
#membership .wrap{ padding: 0 80px;}
#membership .wrap h3{ text-align: center; margin-bottom: 50px;font-family: 'suit'; font-weight: 900;}
#membership .wrap .membership-txt{ background-color: #DEE1F2; color: #71779D; text-align: center; padding: 27px 110px;margin-bottom: 20px;}
#membership .wrap .membership-img{ width: 100%; height: 320px; margin: 50px 0 0 40px; background: url(../images/img-membership-kr.svg) no-repeat 50% 50%; }


#platform{  height: 800px;position: relative; overflow: hidden; }
#platform .wrap{ padding: 0 80px; height: 100%; position: relative; }
.platform-txt{  position: absolute; display: flex; flex-flow: column; justify-content: center; left:80px; width:calc(50% - 80px);height: 100%; z-index: 5;  }
.platform-txt h4{ line-height: 1.2; margin-bottom: 20px; }
.platform-background{ position: absolute;top: 0;  overflow: hidden;  width: 100%; height: 100%; z-index: 1;  }
.platform-background figure{position: absolute; margin-right: -100px; right:0; width:80vw;height: 100%;background: url(../images/bg-platform.png) no-repeat right bottom; overflow: hidden; }

.platform-illust{ width:100%; height:400px; margin-top: -30px; background: linear-gradient(90deg, rgba(162,164,250,1) 0%, rgba(189,126,187,1) 100%);z-index: 5; overflow: hidden;  }
.platform-illust .img{  width:100%; height:100%;background:url(../images/img-platform-kr.png) no-repeat 50% 50%; }

#expand{ height: 800px; position: relative;background-color: #F5F6FC; overflow: hidden; }
#expand .wrap{ padding: 0 80px; height: 100%; position: relative; }
.expand-txt{  position: absolute; display: flex; flex-flow: column; justify-content: center; left:50%; width:calc(50% - 80px);height: 100%; z-index: 5; }
.expand-txt h4{ padding: 15px 0 26px;}
.expand-img{position: absolute; left: -150px; bottom: 0; width: 100%; height: 100%; background: url(../images/bg-expand.png) no-repeat 0 50%; z-index: 1 }

#issue{ height: 100vh; min-height: 960px;  display: flex; align-items: center; justify-content: center; overflow: hidden; }
#issue .wrap{  padding: 0 80px; text-align: center; }
.issue-list{ display: flex; flex-wrap: wrap; justify-content: space-evenly; gap: 20px;}
.issue-list li{ flex: 1 1 20%; }
.issue-list .title{ background-color: #999CF8; width: 100%; padding: 12px 0; color: #fff; font-size: 26px;}
.issue-list .name{ font-size: 40px; color: #696CBF;font-family: 'SUIT';	font-weight: 600; }

#roadmap{ background-color: #F5F6FC; min-height: 960px;  padding: 120px 0; display: flex; justify-content: center;}
#roadmap .wrap{  padding: 0 80px; }
.roadmap-list{list-style:none; margin:0; padding:0; counter-reset:list-number;}  
.roadmap-list > li{counter-increment:list-number; position: relative; padding:30px 70px 30px;}  
.roadmap-list li .period{ color: var(--primary-color); font-size:  2.125rem;	font-weight: 800; padding-bottom: 10px;} 
.roadmap-list li h4{ font-size: 24px;	font-weight: 600; line-height: 1.4; margin-bottom: 10px;}
.roadmap-list li h4 > b{	font-weight: 800;}
/* .roadmap-list li:before{content:counter(list-number); position: absolute; left: 0; top: 10px; color: #DEE0FF; font-size:80px ; font-family: 'Poppins bold';}  */
.roadmap-list > li:not(:last-child){ border-bottom: 1px solid #DADCFE;}
.roadmap-list>li>ul>li{ margin-left: 20px; text-indent: -1.5rem;}
.roadmap-list>li>ul>li::before{content: '- '; margin: 0 4px;}

#economy{height: 100vh; min-height: 960px;  display: flex; justify-content: center; overflow: hidden;}
#economy .wrap{ padding: 0 80px; text-align: center; overflow: hidden;}
#economy .wrap h3{ padding-bottom: 30px;}
.economy-chart{ display: flex; gap: 50px; align-items: center;}
.economy-chart li img{ width: 100%;}

#team{ display: flex; align-items: center;  background: linear-gradient(90deg, #a2a4fa 0%, #bd7ebb 100%);}
#team .wrap{ padding: 140px 80px; text-align: center;}
#team .wrap h3{ padding-bottom: 30px; color: #fff;}
.team-list{ display: flex;flex-wrap: wrap; justify-content: space-evenly;}
.team-list li{ width: 33%; justify-content: center; margin-bottom: 40px;}
.team-list li figure{ margin: auto;}
.team-list .photo{width: 238px; height: 238px; border-radius: 50%; background: linear-gradient(180deg, #D4CCDB 0%, #A491B4 100%);}
.team-list .photo img{ width: 100%; height: auto;}
.team-list .txt .job{display: block; color: #fff; font-size: 20px; margin-top: 10px; }
.team-list .txt .name{ color: #000; font-size: 26px; font-family: 'SUIT';	font-weight: 500;}

#partners{ height: 700px; display: flex; align-items: center;}
#partners .wrap{ padding: 0 80px; text-align: center;}
#partners .wrap h3{ padding-bottom: 60px;}
.partner-list{ display: flex; justify-content: center; flex-wrap: wrap; gap: 20px;}
.partner-list li{ width: 405px; height: 180px; display: flex; align-items: center; justify-content: center; position: relative; }
.partner-list li:nth-child(1)::after, .partner-list li:nth-child(2)::after,.partner-list li:nth-child(4)::after
{ content: ''; position: absolute; right:-10px; top: -10px; height: 100%; border-right: 1px solid #BFBFBF;}
.partner-list li:nth-child(1), .partner-list li:nth-child(2), .partner-list li:nth-child(3){ border-bottom: 1px solid #BFBFBF;}

#community{ height: 350px; background-color: #F5F6FC; display: flex; align-items: center; overflow: hidden;  }
#community .wrap{ padding: 0 80px; display: flex; justify-content: space-between;   align-items: center;  }
#community .wrap .arrow{width: 100%; height: 80px; background: url(../images/arrow.svg) no-repeat right center; margin: 0 100px;}
.community-list{ display: flex; align-items: center; }
.community-list li a{ display: flex; align-items: center;  overflow: hidden; padding: 25px;}
.community-list li a span{ text-indent: -100px;opacity: 0;  transition: all .2s ease;}
.community-list li a svg path{  transition: all .2s ease;}
.community-list li a:hover{ color: #B473B2;}
.community-list li a:hover svg path{ fill: #B473B2;}
.community-list li a:hover span{ text-indent: 0; opacity: 1;  padding-left: 10px;}

#docs{ height: 800px; background: url(../images/bg-docs.jpg) no-repeat; display: flex; align-items: center;}
#docs .wrap{ padding: 0 80px; }
#docs .wrap h3{ color: #fff;}
#docs .wrap .btn-wrap{ margin-top: 40px; }
#docs .wrap .btn-wrap .btn-down{ border: 2px solid #fff;padding: 32px 80px; font-size: 26px; transition: all .3s ease; }
#docs .wrap .btn-wrap .btn-down svg{ position: relative; top: 4px;}
#docs .wrap .btn-wrap .btn-down:hover{ background-color: #fff; border: 2px solid #fff; color: var(--primary-color); }
#docs .wrap .btn-wrap .btn-down:hover svg path{ fill: var(--primary-color);}


@media (max-width: 1440px){
    .wrap{ width: 100%;}  
  }
@media screen and (max-width: 960px){
    body{ font-size: 17px;}
    h3{ font-size: 2rem;}
    h4{ font-size: 1.25rem;line-height: 1.4;}
    .wrap{ max-width: 100% !important; padding: 0 0; overflow: hidden; }
    #header{ height: 70px; border-bottom: 2px solid #fff; }
    #header .wrap{width: 100%; height: 100%; padding: 0; overflow: initial;}
    #gnb {margin-right: 0;}
    #header .logo { position: relative; background-size: 70%;}
    #gnb.on{ top: 0; right: 0;}
    #gnb.on .gnb-wrap { right: 0; visibility: visible; z-index: 100; }
    .gnb-wrap { position: fixed; top: 0; right: -100%; padding: 20px 16px; width: 100%; height: auto; background: #B473B2; overflow-y: auto; visibility: hidden; transition: all 1s cubic-bezier(0.16, 1, 0.3, 1) 0s; }
    .gnb { margin-top: 76px; gap: 0; flex-flow: column; }
    .gnb li { display: block;  margin: 0 !important;  }
    .gnb li:not(:last-child){ border-bottom: 1px solid #ffffff66;}
    .gnb li a { display: block; text-align: center; padding: 30px 0; color: #fff; line-height: 22px; font-size: 1.25rem; font-family: 'Poppins bold';  }
    .gnb li a:before { display: none; }  
    [class*="btn-gnb"] { display: block !important; text-indent: -9999px; overflow: hidden; }
    .btn-gnb-open { position: relative;margin-right: 1rem; width: 52px; height: 60px;background: url("../images/ico-menu.svg") no-repeat center; background-size: auto 19px; }
    .btn-gnb-close { position: absolute; top: 0; right: 1rem; width: 52px; height: 60px; background: url("../images/ico-close.svg") no-repeat center; background-size: auto 19px; text-indent: -9999px; overflow: hidden; }
    .logo-gnb { display: block !important; position: absolute; top: 0; left: 1rem; width: 110px; height: 60px; background: url("../images/logo-chica.svg") no-repeat center; background-size: auto 28px; text-indent: -9999px; overflow: hidden; }
    .gnb .home { display: block !important; }
    .lang{ position: absolute; right: 60px;  height: 60px;}
    .lang-ico{  background-size: 70%;  }
    .lang:hover .lang_menu{ top: 59px; border:1px solid #996BC9; border-radius: 8px; }

    #intro{ max-height: 140vh;}
    #intro .wrap{ padding: 0 2rem;}
    #intro .wrap h1{ left: auto; top: 14vh; font-size: 8.5vw; color: #fff; font-family: 'Poppins Black'; line-height: 1.4;}
    #intro .wrap h1 em{ display: block; font-size: 11.4vw;}
    #intro .wrap .img-wrap{ position: absolute; z-index: 5; left: auto; width:86vw; height: 100%; top: 35vh;  }
    #intro .wrap .img-wrap .intro-img img{width: 100%; height: auto;}
    #intro .wrap .img-wrap .intro-txt{ width: 24vw; z-index: 10;  transform: translate( 66vw, -6vh);}
    #intro .wrap .img-wrap .intro-txt img{ width: 100%;}

    #market{ height: auto; margin-top:-35vh ; }
    #market .market-bg{height: 40vh;}
    #market .wrap{padding: 0 2.5rem;}
    #market .wrap .txt-area { position: relative; width: 100%;  padding:0; font-size: 2rem; line-height: 1.4;}
    .list-wrap{ padding-top: 2rem;}
    .list-wrap .about-list{ flex-wrap: wrap;}
    .list-wrap .about-list li{width: 86vw; margin-bottom: 8vh;} 
    .list-wrap .about-list li img{width: 100%;}
    
  #market2{ height: auto; min-height: initial; }
  #market2 .wrap{ padding: 15vh 2rem;}
  #market2 .wrap p { font-size: 1.5rem;  padding:40px 0 0;}
  
  #market2{ height: auto; min-height: initial; }
  #market2 .wrap{ padding: 20vh 2rem;}
  #market2 .wrap p { font-size: 1.5rem;  padding:60px 0 0;}
  .market2-list{position: relative; height: 60vw; padding-top: 4rem;}
  .market2-list .left, 
  .market2-list .right{  font-size: 1rem; width: 50vw;  height: 50vw;  padding: 5vw; opacity: .8 !important; }
  .market2-list .left{ left: 0;}
  .market2-list .right{ right: 0;}
  .market2-list .chica{  width: 60vw;  height: 60vw; left: calc(50% - 30vw); top: -10rem; }

  #goal { height: auto;  min-height: initial;}
  #goal .wrap{ padding: 0 2rem;}
  #goal .wrap h3{ text-align: center; padding-top: 120px;}
  .goal-list{ padding-bottom: 4rem;}
  .goal-list li{flex-flow: column; width: 100%; padding: 36px 0;}
  .goal-list li:not(:last-child){ border-bottom: 0;}
  .goal-list li div.img{ margin: auto; }
  .goal-list li div.txt{ width: 100%; text-align: center; padding-left: 0; padding-top: 1rem;}
  .goal-list li div.txt h4{ line-height: 1.2;}
  .goal-list li div.txt p{ padding-top: 1rem;}

  #rewards{ height: auto;  min-height: initial;}
  #rewards .wrap{ padding: 0 2rem;}
  #rewards .wrap .rewards-img{ width: 84vw; height: 50vh; top: 2vh; left: 50%; transform: translate(-50%, 0% ); background-image: url(../images/chica-reward-m.png); background-size: contain;}
  #rewards .wrap .rewards-txt{ position: relative; left:0;  padding-right: 0; }
  #rewards .wrap .rewards-txt h3{ padding-top: 5rem; text-align: center;}
  #rewards .wrap .rewards-txt h3 em{ display: block;}
  .rewards-list{ padding: 40vh 0 8vh;}
  .rewards-list li{  display: flex; padding: 20px; }
  .rewards-list li:not(:last-child){ border-bottom: 1px solid #BFBFBF;}
  .rewards-list li div:nth-child(1){ width: 50px; display: flex; align-items: center;}
  .rewards-list li div:nth-child(2){ width: calc(100% - 50px); padding-left: 20px; }

  #membership{ height: auto; padding-bottom: 2rem;  min-height: initial;}
  #membership .wrap h3{ padding-top: 5rem;}
  #membership .wrap{ padding: 0 2rem;}
  #membership .wrap .membership-txt{ padding: 20px; }
  #membership .wrap .membership-img{ width: 80vw; height: 50vh; margin: 0; background-image: url(../images/img-membership-krm.svg); background-size: contain; }

  #platform{ height: auto; padding:2rem 0;}
  #platform .wrap{ padding: 0 2rem;}
  .platform-txt{ left:0; width:100%; position: relative; justify-content: flex-start; margin: 32vh 0 10vh;  }
  .platform-background{ top: -45vh; }
  .platform-background figure{ margin-right: 2rem;  width: 86vw; background-image:url(../images/bg-platform-m.png) ; background-size: 100%; }
  .platform-illust{ width: 100vw; height:80vh;  padding: 0 2rem; overflow: hidden;}
  .platform-illust .img{  background-image:url(../images/img-platform-m.svg); background-size: 100%;}

  #expand{ height: max-content; min-height: initial; }
  #expand .wrap{ padding: 5rem 2rem;}
  .expand-txt{   width:100%; position: relative; left: initial; }
  .expand-txt h4{ padding: 15px 0 26px; }
  .expand-img{position: initial; height: 30vh; background-image: url(../images/bg-expand-m.png); background-size: 100%;}

  #issue{ height: auto; min-height: initial; }
  #issue .wrap{  padding: 5rem 2rem; text-align: center;}
  #issue .wrap figure img{ width: 60vw;}
  .issue-list{ flex-wrap: wrap; justify-content: center; gap: 10px;}
  .issue-list li{ flex: 1 1 40%;  }
  .issue-list .title{ font-size: 0.875rem;}
  .issue-list .name{ font-size: 1rem;  }

  #roadmap{ height: auto;  min-height: initial; padding: 50px 0;}
    #roadmap .wrap{  padding: 5rem 2rem; }
    .roadmap-list>li{ padding: 30px 0 30px}   
    .roadmap-list>li:before{ font-size: 3.125rem;} 
    .roadmap-list li .period{ font-size: 1.5rem;}
    
  #economy{height: 100vh; min-height: 960px;  display: flex; justify-content: center; overflow: hidden;}
  #economy .wrap{ padding: 0 2rem; text-align: center; overflow: hidden;}
  #economy .wrap h3{ padding-bottom: 30px;}
  .economy-chart{ flex-wrap: wrap;}
  .economy-chart div img{ width: 100%; }

  #team{  height: auto;  min-height: initial;}
  #team .wrap{ padding: 5rem 1rem; }
  #team .wrap h3{ padding-bottom: 30px; color: #fff;}
  .team-list{ display: flex;  gap: .6rem;}
  .team-list li{ width:30%; }
  .team-list .photo{ width: 20vw; height: 20vw; margin: auto; border-radius: 50%;}
  .team-list .txt .job{ font-size: 0.875rem;}
  .team-list .txt .name{ font-size: 1rem; line-height: 1; display: block;}

  #partners{ height: auto;  min-height: initial;}
  #partners .wrap{ padding: 5rem 2rem;}
  #partners .wrap h3{ padding-bottom: 2rem;}
  .partner-list li{ width: 86vw; height: 6rem; border-bottom: 1px solid #BFBFBF; }
  .partner-list li:nth-child(1)::after, .partner-list li:nth-child(2)::after,.partner-list li:nth-child(4)::after
  { content: ''; border-right: 0;}
  .partner-list li img{ max-width: 55vw; max-height: 7vh;}

  #community{ height: auto; min-height: initial;}
  #community .wrap{ padding:5rem 2rem; flex-flow: column; }
  #community .wrap h3{ text-align: center; padding-bottom: 3rem;}
  #community .wrap .arrow {display: none;}
  .community-list{ gap: 10px; justify-content: space-between;}
  .community-list li{ width: 18vw; height: 18vw; background-color: #fff; border-radius: 50%;}
  .community-list li a{ height: 100%; padding: 10px; justify-content: center;}
  .community-list li a:hover span{ display: none;}

  #docs{ height: 40vh; background-size: cover; background-position: center top; }
  #docs .wrap{  padding:5rem 2rem;}
  #docs .wrap .btn-wrap{ margin-top: 40px; }
  #docs .wrap .btn-wrap .btn-down{ padding: 1rem 2rem; font-size: 1rem;  }

}
@media (max-width: 768px){
  body{  font-size: 87.5% !important;}
  .market2-list{ padding-top: 4rem;}
  .market2-list div{transition: all .3s ease;}
  .market2-list .left:hover, .market2-list .right:hover{ transform: translate( -105px, 0 ); }
  .market2-list .chica{ top: -6rem; }  
  .team-list .photo{ width: 28vw; height: 28vw;}
  .roadmap-list li h4{ font-size: 1rem;}
  .roadmap-list li h4 >b{font-size: 1.25rem; }
}
@media (max-width: 380px){	
#market .wrap .txt-area {  font-size: 1.5rem;  line-height: 1.4;}
.platform-background{ top: -48vh; }	
#rewards .wrap .rewards-img{  top: 100px;}
.rewards-list{ padding: 45vh 0 8vh;}
}