@charset "utf-8";

.sub_cont {
    padding:120px 0;
}

.sub_cont .title {
    font-size:16px;
    font-weight:bold;
    color:#3B7BE1;
    margin-bottom:10px;
}

.sub_cont h4 {
    font-size:40px;
    font-weight:bold;
    color:#222222;
    margin-bottom:10px;
}

.sub_cont .text {
    font-size:14px;
    color:#555555;
    word-break:keep-all;
}

/* #home */
#home {
    position:relative;
    padding:400px 0;
    text-align:center;
    background:url(../images/bg/bg-home.png) no-repeat 50% 50%;
    background-size:cover;
    color:#ffffff;
}

#home h3 {
    font-size:70px;
    line-height:70px;
    font-weight:bold;
    padding-bottom:30px;
}

#home p {
    font-size:25px;
}

#home p br {
    display:none;
}

#home .btn_scroll {
    position:relative;
    position:absolute;
    left:50%;
    bottom:100px;
    transform:translate(-50%);
    display:inline-block;
    color:#ffffff;
    font-size:16px;
    letter-spacing:5px;
}

#home .btn_scroll:after {
    position:absolute;
    left:50%;
    top:40px;
    transform:translate(-50%);
    content:'';
    display:inline-block;
    width:3px;
    height:90px;
    background-color:#ffffff;
    animation: loading 2s infinite ease-in-out;
}

@keyframes loading {
  0% {
    height: 0px;
  }
  100% {
    height: 90px;
  }
}

/* #about */
#about .about .col-12 {
    text-align:center;
}

#about .about .col-lg-6 {
    display:flex;
    align-items:center;
    margin-top:50px;
}

#about .about img {
    border-radius:15px;
    box-shadow:0 0 10px 3px rgba(0,0,0,0.1);
}

#about .about .cont {
    padding:0 50px;
}

#about .about .text {
    margin-top:15px;
}

#about .about .text:first-child {
    margin-top:0;
}

#about .service {
    background-color:rgba(59,123,225,0.04);
    text-align:center;
}

#about .service .text br {
    display:none;
}

#about .service li {
    margin-top:80px;
}

#about .service li h5 {
    text-align:left;
    font-weight:bold;
    font-size:20px;
}

#about .service li img {
    margin:20px 0;
}

#about .service li p {
    text-align:left;
    font-size:14px;
    word-break:keep-all;
    color:#777777;
}

#about .solution {
    background:url(../images/bg/bg-solution.png) no-repeat 50% 50%;
    background-size:cover;
}

#about .solution .col-12 {
    margin-top:80px;
}

#about .solution .col-12:first-child {
    text-align:center;
    margin-top:0;
}

#about .solution .col-lg-6 {
    display:flex;
    align-items:flex-start;
    margin-top:30px;
}

#about .solution .col-lg-6:nth-child(3) {
    align-items:center;
}

#about .solution .col-lg-6 .cont {
    padding:0 50px;
}

#about .solution h5 {
    font-weight:bold;
    font-size:30px;
    color:#3B7BE1;
}

#about .solution .info {
    margin:10px 0 20px;
    font-size:14px;
    word-break:keep-all;
}

#about .solution ul li {
    position:relative;
    padding-left:25px;
    margin-top:10px;
}

#about .solution ul li i {
    position:absolute;
    left:0;
    top:5px;
    color:#3B7BE1;
}

#about .solution h6 {
    font-weight:bold;
    font-size:22px;
}

#about .solution .cont2 {
    display:flex;
}

#about .solution .cont2 img {
    display:block;
    width:40px;
    height:40px;
    margin-right:20px;
}

#about .solution .cont2 dl dt {
    font-weight:bold;
    font-size:18px;
    line-height:40px;
    color:#3B7BE1;
}

#about .solution .cont2 dl dd {
    font-size:14px;
    word-break:keep-all;
    color:#555555;
}

/* #roadmap */
#roadmap  {
    background-color:rgba(59,123,225,0.04);
}

#roadmap .col-12 {
    position:relative;
    text-align:center;
}

#roadmap .col-12 h4 {
    margin-bottom:80px;
}

#roadmap .line {
    position:relative;
    position:absolute;
    left:0;
    top:240px;
    width:100%;
    height:3px;
    background-color:#3B7BE1;
    border-radius:30px;
}

#roadmap .line:before {
    position:absolute;
    left:0;
    top:-4px;
    content:'';
    display:inline-block;
    width:12px;
    height:12px;
    border-radius:50%;
    background-color:#3B7BE1;
}

#roadmap .line:after {
    position:absolute;
    right:0;
    top:-4px;
    content:'';
    display:inline-block;
    width:12px;
    height:12px;
    border-radius:50%;
    background-color:#3B7BE1;
}

#roadmap .roadmap_swiper {
    height:350px;
}

#roadmap .roadmap_swiper .swiper-slide {
    position:relative;
    text-align:center;
}

#roadmap .roadmap_swiper .swiper-slide .date {
    font-size:16px;
    font-weight:bold;
    padding-top:10px;
    padding-bottom:60px;
    color:#3B7BE1;
}

#roadmap .roadmap_swiper .swiper-slide .period {
    position:absolute;
    left:50%;
    top:60px;
    transform:translate(-50%);
    width:40px;
    height:40px;
    line-height:36px;
    background-size:cover;
    background-color:#ffffff;
    border:2px solid #3B7BE1;
    border-radius:50%;
    font-weight:bold;
    box-shadow:3px 3px 10px 3px rgba(0,0,0,0.08);
    color:#3B7BE1;
    font-size:20px;
}

#roadmap .roadmap_swiper .swiper-slide ul {
    position:relative;
    width:180px;
    padding-top:120px;
    margin:0 auto;
}

#roadmap .roadmap_swiper .swiper-slide ul:before {
    position:absolute;
    left:50%;
    top:30px;
    transform:translate(-50%);
    content:'';
    display:inline-block;
    width:2px;
    height:60px;
    background-color:#3B7BE1;
}

#roadmap .roadmap_swiper .swiper-slide li {
    position:relative;
    color:#666666;
    font-size:13px;
    margin-bottom:5px;
    text-align:left;
    font-weight:500;
    word-break:keep-all;
}

#roadmap .roadmap_swiper .swiper-slide li:before {
    position:absolute;
    left:-15px;
    top:7px;
    content:'';
    display:inline-block;
    width:5px;
    height:5px;
    background-color:#3B7BE1;
    border-radius:50%;
}

#roadmap .roadmap_swiper .swiper-pagination .swiper-pagination-bullet {
    width:15px;
    border-radius:10px;
    background-color:#3B7BE1;
}

#roadmap .roadmap_swiper .swiper-pagination .swiper-pagination-bullet-active {
    width:30px;
    border-radius:10px;
    background-color:#3B7BE1;
}

/* #token */
#token {
    text-align:center;
    background:url(../images/bg/bg-token.png) no-repeat 50% 50%;
    background-size:cover;
}

#token h5 {
    text-align:left;
    font-weight:bold;
    font-size:25px;
    margin:80px 0 30px;
}

#token table {
    width:100%;
    box-shadow:0 0 10px 3px rgba(0,0,0,0.02);
}

#token table caption {
    display:none;
}

#token tbody tr {
    height:60px;
    border-bottom:1px solid #ffffff;
}

#token tbody tr:last-child {
    border-bottom:0 none;
}

#token table tbody th {
    padding:10px;
    font-weight:bold;
    background:linear-gradient(to right, #2DBDEB 0%, #4740D8 100%);
    color:#ffffff;
}

#token table tbody td {
    padding:10px;
    font-weight:bold;
    background:linear-gradient(to right, rgba(0,69,176,0.05) 0%, rgba(0,178,204,0.05) 100%);
}

#token table tbody tr:last-child td {
    word-break:break-all;
}

#token .col-lg-6 {
    display:flex;
    align-items:center;
}

#token .col-lg-6 ul {
    width:100%;
    max-width:500px;
    margin:0 auto;
}

#token .col-lg-6 li {
    text-align:left;
    margin-bottom:30px;
    line-height:40px;
    font-size:16px;
    font-weight:bold;
}

#token .col-lg-6 li:last-child {
    margin-bottom:0;
}

#token .col-lg-6 li .color {
    display:inline-block;
    width:10px;
    height:10px;
    border-radius:50%;
    vertical-align:middle;
    margin-right:10px;
}

#token .col-lg-6 li:nth-child(1) .color {
    background-color:#4740D8;
}

#token .col-lg-6 li:nth-child(2) .color {
    background-color:#4256DB;
}

#token .col-lg-6 li:nth-child(3) .color {
    background-color:#3E6DDF;
}

#token .col-lg-6 li:nth-child(4) .color {
    background-color:#3981E2;
}

#token .col-lg-6 li:nth-child(5) .color {
    background-color:#349AE6;
}

#token .col-lg-6 li:nth-child(6) .color {
    background-color:#31ACE8;
}

#token .col-lg-6 li:nth-child(7) .color {
    background-color:#2EBAEB;
}

#token .col-lg-6 li:nth-child(8) .color {
    background-color:#53D6F9;
}

#token .col-lg-6 li .num {
    float:right;
    font-weight:300;
}

#token .col-12 img {
    width:100%;
    margin-top:80px;
    border-radius:20px;
    box-shadow:0 0 10px 3px rgba(0,0,0,0.1);
}

/* #whitepaper */
#whitepaper {
    background-color:rgba(59,123,225,0.04);
    text-align:center;
}

#whitepaper ul {
    width:100%;
    max-width:300px;
    margin:50px auto 0;
    text-align:center;
}

#whitepaper .wp li {
    width:100%;
    padding:15px;
    margin:0 auto;
    transition: transform 0.65s cubic-bezier(0.05, 0.2, 0.1, 1), box-shadow 0.65s cubic-bezier(0.05, 0.2, 0.1, 1);
}

#whitepaper .wp li:hover {
    transform: translateY(-10px);
}

#whitepaper .wp li a {
    display:inline-block;
    width:100%;
    height:100%;
    border-radius:5px;
    box-shadow:10px 10px 20px rgba(0,0,0,0.03);
    background-color:#ffffff;
}

#whitepaper .wp li img {
    width:60px;
    margin-top:30px;
}

#whitepaper .wp li p {
    margin:20px 0;
    font-weight:bold;
    color:#222222;
}

#whitepaper li a p span {
    position:relative;
    margin-left:20px;
    font-size:14px;
}

#whitepaper li a p span:before {
    position:absolute;
    left:-11px;
    top:4px;
    content:'';
    display:inline-block;
    width:2px;
    height:12px;
    background-color:#222222;
}

/* #contact */
#contact {
    text-align:center;
    background:url(../images/bg/bg-contact.png) no-repeat 65% 50%;
    background-size:cover;
}

#contact h4 {
    word-break:keep-all;
    font-weight:bold;
    margin-bottom:50px;
    color:#fff;
}

#contact .btn_contact {
    display:inline-block;
    width:220px;
    height:55px;
    line-height:49px;
    text-align:center;
    border:3px solid transparent;
    border-radius:30px;
    color:#ffffff;
    font-weight:bold;
    background-color:#3B7BE1;
    transition:.5s;
    letter-spacing:1px;
}

#contact .btn_contact:hover {
    border-color:#3B7BE1;
    color:#3B7BE1;
    background-color:#ffffff;
}

#contact .sns {
    width:100%;
    max-width:210px;
    margin:30px auto 0;
}

#contact .sns li {
    float:left;
    width:50px;
    height:50px;
    margin-right:30px;
    font-size:0;
}

#contact .sns li:last-child {
    margin-right:0;
}

#contact .sns li a {
    display:inline-block;
    width:100%;
    height:100%;
}

#contact .sns li .btn_twitter {
    background:url(../images/sns/twitter.png) no-repeat 50% 50%;
    background-size:100%;
}

#contact .sns li .btn_telegram_channel {
    background:url(../images/sns/telegram_channel.png) no-repeat 50% 50%;
    background-size:100%;
}

#contact .sns li .btn_telegram_group {
    background:url(../images/sns/telegram_group.png) no-repeat 50% 50%;
    background-size:100%;
}

#contact .sns li:hover a {
    animation-name: elementor-animation-push;
    animation-duration: .3s;
    animation-timing-function: linear;
    animation-iteration-count: 1;
}

@keyframes elementor-animation-push{
    50%{transform:scale(0.8)}
    100%{transform:scale(1)}
}