@import url("common.css");





/*** css 공통 ***/
.w960 {max-width:960px; margin:0 auto;}


/*** Visual ***/
#visual {width:100%; height: var(--vh); overflow: hidden; position:relative; z-index:10;}
#visual::before {content:''; width:600px; height:600px; border-radius:100%; opacity: 0.5; background: linear-gradient(49deg, rgba(255, 98, 184, 0.00) 16.29%, #FF2CA8 69.16%); filter: blur(25px); position:absolute; top:0; right:0; transform: rotate(29deg) translate(40%,-10%);}
#visual::after {content:''; width:100%; height:100%; background:url("/img/vdeco.png")no-repeat top left; position:absolute; top:0; left:0; z-index:-1;}
#visual .visual_in {height:calc(100% - 122px); display:flex; flex-wrap:wrap; align-items:flex-end; position:relative; z-index:10;}
#visual .visual_in .tBox {width:500px; position:relative; bottom:50%; transform:translateY(50%);}
#visual .visual_in .tBox h2 {font-size: 2.666rem; font-weight: 700; line-height:120.833%; color:var(--white); margin:0 0 12px;}
#visual .visual_in .tBox .visual_btn {display:flex; flex-wrap:Wrap; align-items:center; gap:0 20px; margin:30px 0 0;}
#visual .visual_in .tBox .visual_btn .get_btn {display:block; width:140px; height:52px; line-height:52px; border-radius:4px; background:var(--main); color:var(--white); /* text-decoration:underline; text-underline-offset:3px; */ text-align:center;}
#visual .visual_in .tBox .visual_btn .app_btn {font-size:0.88rem; color:var(--white); display:flex; flex-wrap:wrap; align-items:center; gap:0 10px;}
#visual .visual_in .tBox .visual_btn .app_btn::before {content:''; width:24px; height:24px; background:url("/img/down_ico.png")no-repeat center; display:block;}
/* #visual .visual_in .tBox .logo_cont {margin:80px 0 0;}
#visual .visual_in .tBox .logo_cont .fs12 {font-size:0.666rem;}
#visual .visual_in .tBox .logo_cont .fs12::after {content:''; width: 30px; height: 1px; background: #70747F; display:inline-block; vertical-align:middle; margin-left:12px;}
#visual .visual_in .tBox .logo_cont ul {display:flex; flex-wrap:wrap; align-items:center; gap:10px 50px; margin:22px 0 0;}
#visual .visual_in .tBox .logo_cont ul li {} */
#visual .visual_in .imgBox {width:calc(100% - 500px);}
#visual .visual_in .imgBox img {display:block; margin:0 0 0 auto; max-width:100%;}
#visual .visual_banner {height:122px; width:100%; background:url("/img/banner_bg.jpg")no-repeat center / cover;}
#visual .visual_banner ul {display:flex; flex-wrap:wrap; align-items:center; height:100%;}
#visual .visual_banner ul li {display:flex; flex-wrap:wrap; align-items:center;  justify-content:center; gap:0 12px; text-align:center; width:33.33%; color:var(--white); font-size:0.88rem;}
#visual .visual_banner ul li b {color: var(--white); font-size: 2.666rem; font-weight: 700; line-height:120.833%;}


#visual.chain_ver {background:url("/img/chain_bg.jpg")no-repeat center / cover;}
#visual.chain_ver .visual_in {height:100%;}
#visual.chain_ver .visual_in .tBox {width:100%;}
#visual.chain_ver::before, #visual.chain_ver::after {display:none;}
#visual.chain_ver .visual_banner {position:absolute; bottom:0; left:0; background:transparent;}


/* Get started */
.get-start-list {display: grid;  grid-template-columns: repeat(4, 1fr); grid-gap:32px;}
.get-start-list li {text-align:center;}
.get-start-list li .num {position:relative; width: 53px; height: 50px; text-align:center; line-height:50px; display:block; font-style:normal; border-radius: 50px; font-size: 1.333rem; font-weight: 600; color:var(--main); margin:0 auto;}
.get-start-list li .num::after {content:'';  width:102px; height:98px; background:url("/img/step-bg.png")no-repeat center / 100%; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);}
.get-start-list li .fs24 {margin:20px 0 8px; }
.get-start-list li .fs16 {}
.get-start-list li .fs16 a {/* text-decoration:underline; text-underline-offset: 3px; */}
/* Get started */


/* Why a blockchain for security tokens? */
#security-tokens {overflow:hidden; position:relative; z-index:10;}
#security-tokens::before {content:''; width: 805px; height: 792px; border-radius: 100%; opacity: 0.4; background: linear-gradient(49deg, rgba(255, 98, 184, 0.00) 16.29%, #FF2CA8 69.16%); filter: blur(50px); position: absolute; left: 0; top: 0; z-index:-1; transform:translateX(-78%);}
.security-tokens-list {display: grid;  grid-template-columns: repeat(2, 1fr); grid-gap:96px;}
.security-tokens-list .imgBox {padding-top:30px;}
.security-tokens-list .imgBox img {display:block; margin:0 auto; max-width:100%;}
.security-tokens-list .tBox {}
.security-tokens-list .tBox dl {display:flex; flex-wrap:wrap;}
.security-tokens-list .tBox dl+dl {margin:32px 0 0;}
.security-tokens-list .tBox dl dt {width:44px; position:relative;}
.security-tokens-list .tBox dl dt img {position:absolute; top:-24px; left:-24px;}
.security-tokens-list .tBox dl dd {width:calc(100% - 44px); padding-left:20px; box-sizing:border-box;}
.security-tokens-list .tBox dl dd .fs24 {margin:0 0 8px;}
/* Why a blockchain for security tokens? */


/* Video */
.video-cont {max-width:960px; margin:0 auto;}
.video-cont img {max-width:100%;}
/* Video */

.info-table-list {display: grid;  grid-template-columns: repeat(2, 1fr); grid-gap:30px;}
.info-table-list dl {border-radius:8px; overflow:hidden;}
.info-table-list dl dt {position:relative;}
.info-table-list dl dt::after {content:''; width:100%; height:50px; background: linear-gradient(180deg, rgba(20, 24, 34, 0.00) 0%, #141822 100%); position:absolute; bottom:0; left:0; z-index:10;}
.info-table-list dl dt img {width:100%;}
.info-table-list dl dd {position:relative; padding:32px 32px 32px 72px; box-sizing:Border-box; background:var(--BG-BG-2);}
.info-table-list dl dd::before {content:''; width:40px; height:89px; background:url("/img/info_bg.png")no-repeat center; position:absolute; bottom:30px; right:25px;}
.info-table-list dl dd::after {content:''; width:172px; height:172px; border-radius:100%; background: linear-gradient(180deg, rgba(48, 86, 211, 0.09) 0%, rgba(196, 196, 196, 0.00) 100%); position:absolute; bottom:0; right:0; transform:translate(55%,35%);}
.info-table-list dl dd * {position:relative; z-index:10;}
.info-table-list dl dd i {position:absolute; top:32px; left:32px;}
.info-table-list dl dd .fs24 {margin:4px 0 22px;}


.news-list {display: grid; gap: 32px; grid-template-columns: repeat(2, 1fr);}
.news-list dl {}
.news-list dl a {display: grid; grid-template-columns: repeat(2, 1fr); grid-gap:24px;}
.news-list dl dt {}
.news-list dl dt img {display: block; width: 100%; height: 100%; object-fit: cover;}
.news-list dl dd {padding:30px 0;}
.news-list dl dd .date {line-height:157.143%; font-size:0.77rem;}
.news-list dl dd h4 {font-weight: 600; line-height:144.444%; color:var(--white); margin:12px 0 8px; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-wrap:break-word; overflow:hidden; height: 3rem;}
.news-list dl dd .stxt {line-height:1.5; font-size:0.88rem; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; word-wrap:break-word; overflow:hidden; height: 4rem;}
.news-list dl dd .tag-list {display:flex; flex-wrap:wrap; gap:8px; margin:24px 0 0;}
.news-list dl dd .tag-list li {border-radius: 4px; background: rgba(137, 42, 69, 0.20); font-size: 0.77rem; font-weight: 300; line-height:157.143%; color:var(--main); padding:8px; box-sizing:border-box;}

.news-list dl:nth-of-type(1) {grid-row: 1 / span 2;}
.news-list dl:nth-of-type(1) a {display:block;}
.news-list dl:nth-of-type(1) dt {height:255px;}
.news-list dl:nth-of-type(1) dd {margin:32px 0 0;}
.news-list dl:nth-of-type(1) dd h4 {margin:12px 0;}
.news-list dl:nth-of-type(1) dd .stxt {-webkit-box; -webkit-line-clamp: 2; height: 2.5rem;}


.logo_cont {}
.logo_cont .slick-arrow {border:0; padding:0; font-size:0; outline:none; cursor:pointer; transition:all .3s linear; position: absolute; top:-41px;  right:0; z-index: 9999; width:20px; height:20px;}
.logo_cont .slick-prev {background:url("/img/arrow-left.svg")no-repeat center / 100%; margin-right:32px;}
.logo_cont .slick-next {background:url("/img/arrow-right.svg")no-repeat center / 100%;}
.logo_cont .fs12 {font-size:0.666rem; margin:0 0 22px;}
.logo_cont .fs12::after {content:''; width: 30px; height: 1px; background: #70747F; display:inline-block; vertical-align:middle; margin-left:12px;}
.logo_cont ul {}
.logo_cont ul .slick-slide > div {margin:0 0 10px;}
.logo_cont ul .slick-slide img {width: 100%;}




/**** chain ****/
#chain-list {}
#chain-list ul {display: grid;  grid-template-columns: repeat(3, 1fr); grid-gap:12px;}
#chain-list ul li {text-align:center; background:#111; border-radius:20px; padding:32px; box-sizing:border-box;}
#chain-list ul li .img {display:block;}
#chain-list ul li .img img {max-width:100%;}
#chain-list ul li .fs30 {font-size: 1.666rem; font-weight: 700; line-height:126.667%; color:var(--white); margin:32px 0 16px;}


#own {display:flex; flex-wrap:wrap; align-items:center;}
#own .imgBox {width:50%; border-radius:0 20px 20px 0; overflow:hidden;}
#own .imgBox img {width:100%;}
#own .tBox {width:50%; padding-left:96px; box-sizing:border-box; padding-right:calc((100% - 1280px) / 2);}
#own .tBox .fs40 {color:var(--white);}
#own .tBox .fs16 {margin:16px 0 44px;}


#move {background:url("/img/move_bg.jpg")no-repeat center / cover; padding:94px 0;}
#move .basic_in {display:flex; flex-wrap:wrap;}
#move .basic_in .fs48 {width:463px;}
#move .basic_in .tBox {width:calc(100% - 463px); padding-left:56px; box-sizing:border-box;}
#move .basic_in .tBox .stxt {color:var(--white);}
#move .basic_in .tBox a {display:block; width:224px; height:52px; background:var(--main); border-radius:4px; text-align:center; text-align:center; font-size: 0.88rem; font-weight: 400; line-height:52px; color:var(--white); /* text-decoration:underline; text-underline-offset:2px; */ margin-top:20px;}


#tokenization {display:flex; flex-wrap:wrap;}
#tokenization .tBox {width:480px;}
#tokenization .tBox .fs24 {color:var(--basic); margin:12px 0 0;}
#tokenization .tokenization-list {width:calc(100% - 480px); padding-left:64px; box-sizing:border-box;}
#tokenization .tokenization-list dl {display:flex; flex-wrap:wrap;}
#tokenization .tokenization-list dl+dl {margin:28px 0 0;}
#tokenization .tokenization-list dl dt {width:48px;}
#tokenization .tokenization-list dl dd {width:calc(100% - 48px); padding-left:20px; box-sizing:border-box;}
#tokenization .tokenization-list dl dd h4 {font-weight: 600; line-height:144.444%; color:var(--white);}
#tokenization .tokenization-list dl dd .fs16 {margin:8px 0 0;}

.grayBox {padding:64px; box-sizing:border-box; border-radius: 16px; background: #111; text-align:center;}


#contact {display:flex; flex-wrap:wrap;}
#contact .imgBox {width:333px;}
#contact .form-wrap {width:calc(100% - 333px); padding-left:56px; box-sizing:border-box;}
/**** chain ****/








/*******************************************************************************
	@media ~1500px
*******************************************************************************/
@media all and (max-width:1500px) { 




}
/*******************************************************************************
	@media ~1300px
*******************************************************************************/
@media all and (max-width:1300px) { 

#visual .visual_in .tBox {width:50%;}
#visual .visual_in .imgBox {width:70%; margin-left:-20%;}


#own .tBox {width:50%; padding-left:60px; padding-right:5%;}



#tokenization .tBox {width:50%;}
#tokenization .tokenization-list {width:50%; padding-left:5%;}




}
/*******************************************************************************
	@media 769~980px
*******************************************************************************/
@media all and (max-width:980px) { 

#visual .visual_banner ul li b {font-size: 2.22rem;}

/* Get started */
.get-start-list {display: grid;  grid-template-columns: repeat(2, 1fr); grid-gap:35px 20px;}
/* Get started */


/* Why a blockchain for security tokens? */
.security-tokens-list {display: grid;  grid-template-columns: repeat(2, 1fr); grid-gap:45px;}
/* Why a blockchain for security tokens? */

.news-list {display: grid; gap: 32px; grid-template-columns: repeat(1, 1fr);}
.news-list dl:nth-of-type(1) {grid-row: 1 / span 2;}


#move .basic_in .fs48 {width:100%;}
#move .basic_in .tBox {width:100%; padding-left:0; box-sizing:border-box; margin:20px 0 0;}



#tokenization .tBox {width:100%;}
#tokenization .tBox br {display:none;}
#tokenization .tokenization-list {width:100%; padding-left:0; padding-top:50px;}


#contact .imgBox {width:250px;}
#contact .imgBox img {width:100%;}
#contact .form-wrap {width:calc(100% - 250px); padding-left:30px;}

.news-list dl dd {padding:20px 0;}

}
/*******************************************************************************
	@media 481~680px
*******************************************************************************/
@media all and (max-width:680px) { 



#visual .visual_in .tBox {position:absolute; bottom:auto; transform:translateY(0); top:15%; left:0; width:100%; text-align:center;}
#visual .visual_in .tBox br {display:none;}
#visual .visual_in .tBox h2 {font-size:2rem;}
#visual .visual_in .tBox .visual_btn {justify-content:center; margin:20px 0 0; gap:0 15px;}
#visual .visual_in .tBox .visual_btn .get_btn {width:115px; height:42px; line-height:42px;}
#visual .visual_in .tBox .logo_cont {margin:40px 0 0;}
/* #visual .visual_in .tBox .logo_cont .fs12 {text-align:left;} */
#visual .visual_in .tBox .logo_cont ul {gap:10px 20px; margin:15px 0 0; justify-content:center;}
#visual .visual_in .tBox .logo_cont ul li img {max-height:20px;}

#visual .visual_in .imgBox {width:100%; margin-left:0;}
#visual .visual_banner ul li b {width:100%; display:block; margin:0 0 5px; font-size:1.8rem;}

#visual.chain_ver {background:url("/img/chain_bg_m.jpg")no-repeat center / cover;}

/* Get started */
.get-start-list {grid-template-columns: repeat(1, 1fr); grid-gap:35px 0;}
.get-start-list li .num {width:43px; height:40px; line-height:40px; font-size:1.22rem;}
.get-start-list li .num::after {width:82px; height:78px; }
.get-start-list li .fs24 {margin:15px 0 5px;}
/* Get started */

/* Why a blockchain for security tokens? */
.security-tokens-list {display: grid;  grid-template-columns: repeat(1, 1fr); grid-gap:35px;}
.security-tokens-list .tBox dl+dl {margin:16px 0 0;}
.security-tokens-list .tBox dl dt {width:30px;}
.security-tokens-list .tBox dl dt img {width:70px; left:-18px; top:-18px;}
.security-tokens-list .tBox dl dd {width:calc(100% - 30px);}
.security-tokens-list .tBox dl dd .fs24 {margin:0 0 6px;}
/* Why a blockchain for security tokens? */

.info-table-list {grid-template-columns: repeat(1, 1fr); grid-gap:30px;}
.info-table-list dl dd {padding:20px 20px 20px 50px;}
.info-table-list dl dd i {top:15px; left:15px;}
.info-table-list dl dd .fs24 {margin:8px 0 15px;}

.news-list dl a {display: block;}
.news-list dl dt {height:200px;}
.news-list dl dd {margin:20px 0 0; padding:0;}
.news-list dl dd h4 {margin:12px 0;}
.news-list dl dd .stxt {-webkit-box; -webkit-line-clamp: 2; height: 2.5rem;}

.news-list dl:nth-of-type(1) dt {height:200px;}
.news-list dl:nth-of-type(1) dd {margin:20px 0 0;}
.news-list dl:nth-of-type(1) dd h4 {margin:12px 0;}
.news-list dl:nth-of-type(1) dd .stxt {-webkit-box; -webkit-line-clamp: 2; height: 2.5rem;}









#chain-list ul {grid-template-columns: repeat(1, 1fr); grid-gap:12px;}
#chain-list ul li .fs30 {font-size:1.33rem; margin:25px 0 10px;}

#own .imgBox {width:100%; border-radius:0 0 0 0; overflow:hidden;}
#own .tBox {width:100%; padding:30px 5% 0; box-sizing:border-box;}
#own .tBox .fs16 {margin:12px 0 20px;}

#move {padding:45px 0; text-align:center;}
#move .basic_in br {display:none;}
#move .basic_in .tBox a {width:175px; height:42px; line-height:42px; margin:25px auto 0;}


#tokenization .tokenization-list dl dt {width:30px;}
#tokenization .tokenization-list dl dt img {width:100%;}
#tokenization .tokenization-list dl dd {width:calc(100% - 30px);}

.grayBox {padding:24px;}


#contact .imgBox {width:100%;}
#contact .form-wrap {width:100%; padding-left:0; padding-top:30px;}


}