@charset "utf-8";

/* .section */
.section {
    padding:120px 0;
}

.section h4 {
    word-break:keep-all;
    font-weight:bold;
    font-size:40px;
    line-height:60px;
}

.section h5 {
    word-break:keep-all;
    font-weight:bold;
    font-size:20px;
    line-height:40px;
}

.section p.title {
    display:inline-block;
    font-weight:bold;
    font-size:18px;
    line-height:30px;
    text-transform:uppercase;
    background: linear-gradient(to right, var(--SubColor) 0%, var(--MainColor) 50%, var(--SubSubColor) 100%);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

.section p.title_sub {
    font-weight:bold;
    font-size:18px;
    line-height:30px;
    color:var(--MainBackColor);
    text-transform:uppercase;
}

.section p.text {
    color:var(--SubFontColor);
    font-size:14px;
    word-break:keep-all;
}

/* btn */
.button {
    position:relative;
    display:inline-block;
    min-width:220px;
    height:60px;
    line-height:60px;
    font-weight:bold;
    font-size:18px;    
    text-align:center;
    text-decoration:none;
    text-transform:uppercase;
    transition:all 0.4s ease-in-out;
    color:var(--MainColor);
}

@supports (-webkit-background-clip: text) and (-webkit-text-fill-color: transparent) {
    .button {
        background-image:linear-gradient(to right, var(--SubColor), var(--MainColor), var(--SubSubColor), var(--MainBackColor), var(--MainBackColor));
        background-size:300% 100%;
        -webkit-background-clip:text;
        -webkit-text-fill-color:transparent;
    }
}

.button:before, .button:after {
    border-radius:3px;
    content:'';
    left:0;
    position:absolute;
    height:100%;
    top:0;
    transition:all 0.4s ease-in-out;
    width:100%;
}

.button:before {
    background:transparent;
    background-image:url('data:image/svg+xml,    <svg xmlns="http://www.w3.org/2000/svg" >    <defs>      <linearGradient id="linearGradient-1">        <stop stop-color="%2339F0FF" offset="0%"/>    <stop stop-color="%234F379D" offset="50%"/>     <stop stop-color="%23FF6CD1" offset="100%"/>      </linearGradient>    </defs>    <rect width="100%" height="100%" stroke="url(%23linearGradient-1)" stroke-width="5" fill="none"/>    </svg>');
    z-index:-1;
}

.button:after {
    background-image:linear-gradient(to right, rgba(242, 103, 34, 0) 0%, rgba(242, 103, 34, 0) 50%, var(--SubColor)60%, var(--MainColor) 85%, var(--SubSubColor) 100%);
    background-size:300% 100%;
    z-index:-2;
}

.button:hover, .button:focus, .button:active {
    color:var(--MainBackColor);
}

@supports (-webkit-background-clip: text) and (-webkit-text-fill-color: transparent) {
    .button:hover, .button:focus, .button:active {
        background-position:100% 0;
        transition:all 0.4s ease-in-out;
    }
}

.button:hover:after, .button:focus:after, .button:active:after {
    background-position:100% 0;
    transition:all 0.4s ease-in-out;
}

.button:active {
    color:var(--MainColor);
}

@supports (-webkit-background-clip: text) and (-webkit-text-fill-color: transparent) {
    .button:active {
        background:var(--MainColor);
        -webkit-background-clip:text;
        -webkit-text-fill-color:transparent;
    }
}

/* #home */
#home {
    position:relative;
    padding:400px 0;
    color:var(--MainBackColor);
    text-align:center;
}

#home .app-vidio-box {
    position: absolute;
    top: 0;
    left: 0;
    z-index:-1;
    width: 100%;
    height: 100%;
}

#home .app-vidio-box video {
    position: absolute;
    width: 100%;
    left: 50%;
    top: 50%;
    height: 100%;
    object-fit: cover;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

#home .app-vidio-cover {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color:rgba(34,34,34,0.7);
}

#home .logo {
    display:inline-block;
    width:150px;
    margin:0 auto;
}

#home h3 {
    margin:30px 0 80px;
    font-weight:bold;
    font-size:70px;
    line-height:100px;
    word-break:keep-all;
}

#home .btn_wp {
    width:100%;
    max-width:220px;
    margin:0 auto;
    background-color:rgba(255,255,255,0.2);
}

/* #about */
#about .intro .col-lg-6 {
    display:flex;
    align-items:center;
}

#about .intro .col-lg-6 .thumb {
    border-radius:10px;
    overflow:hidden;
    box-shadow:0 10px 10px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.1);
}

#about .intro h4 {
    margin:10px 0 30px;
}

#about .value {
    background:url(../images/bg/bg_value.png) no-repeat 30% 50%;
    background-size:cover;
    color:var(--MainBackColor);
    text-align:center;
}

#about .value h4 {
    margin:10px 0 30px;
}

#about .value p.text {
    color:var(--MainBackColor)
}

/* #business */
#business .ecosystem {
    background-color:var(--SubBackColor);
}

#business .ecosystem .col-lg-8 ul {
    display:flex;
    flex-wrap:wrap;
}

#business .ecosystem .col-lg-8 ul li {
    width:50%;
}

#business .ecosystem .col-lg-8 ul li:nth-child(odd) {
    padding:0 20px 0 0;
}

#business .ecosystem .col-lg-8 ul li:nth-child(even) {
    padding:0 0 0 20px;
    margin-top:100px;
}

#business .ecosystem .col-lg-8 ul li .thumb {
    margin-bottom:20px;
    border-radius:10px;
    box-shadow:0 0 10px 3px rgba(0,0,0,0.08);
    overflow:hidden;
}

#business .ecosystem .col-lg-8 ul li .thumb img {
    -webkit-transform:scale(1);
    -moz-transform:scale(1);
    -ms-transform:scale(1); 
    -o-transform:scale(1);  
    transform:scale(1);
    -webkit-transition:.5s;
    -moz-transition:.5s;
    -ms-transition:.5s;
    -o-transition:.5s;
    transition:.5s;
}

#business .ecosystem .col-lg-8 ul li:hover .thumb img {
    -webkit-transform:scale(1.05);
    -moz-transform:scale(1.05);
    -ms-transform:scale(1.05);   
    -o-transform:scale(1.05);
    transform:scale(1.05);
}

#business .platform .col-12 {
    margin-bottom:30px;
    text-align:center;
}

#business .platform .col-lg-6 {
    margin-top:30px;
}

#business .platform .box {
    width:100%;
    height:100%;
    border:1px solid transparent;
    border-radius: 10px;
    background-image: linear-gradient(var(--SubBackColor), var(--SubBackColor)), linear-gradient(to right, var(--SubColor), var(--MainColor), var(--SubSubColor));
    background-origin: border-box;
    background-clip: content-box, border-box;
    background-color:var(--SubBackColor);
}

#business .platform .box .cont {
    padding:50px 20px;
}

/* #token */
#token {
    background-color:var(--SubBackColor);
    text-align:center;
}

#token table {
    position:relative;
    width:100%;
    margin:50px 0 80px;
    background-color:var(--MainBackColor);
}

#token table::before, #token table::after {
    position:absolute;
    left:0;
    content:'';
    display:inline-block;
    width:100%;
    height:2px;
    background:linear-gradient(to right, var(--SubColor)0%, var(--MainColor) 50%, var(--SubSubColor) 100%);
}

#token table::before {
    top:-2px;
}

#token table::after {
    bottom:-2px;
}

#token table caption {
    display:none;
}

#token table thead tr {
    border-bottom:1px solid var(--BorderColor);
}

#token table tbody tr {
    border-bottom:1px solid var(--BorderColor);
}

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

#token table th {
    padding:5px;
    line-height:40px;
}

#token table td {
    padding:5px;
    line-height:40px;
}

/* #roadmap */
#roadmap {
    background:url(../images/bg/bg_roadmap.png) no-repeat 100% 50%;
    background-size:cover;
    color:var(--MainFontColor);
    overflow:hidden;
}

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

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

#roadmap .col-lg-6 {
    margin-top:30px;
}

#roadmap .col-lg-6 {
    position:relative;
}

#roadmap .col-lg-6::before {
    position:absolute;
    left:0px;
    bottom:-125px;
    content:'';
    display:inline-block;
    width:1.5px;
    height:120%;
    background-color:var(--BorderColor);
}

#roadmap .col-lg-6 li {
    position:relative;
    padding:25px 0 40px 30px;
}

#roadmap .col-lg-6 li::before {
    position:absolute;
    left:-22px;
    top:30px;
    content:'';
    display:inline-block;
    width:20px;
    height:20px;
    border-radius:50%;
    background:linear-gradient(to right, var(--SubColor)0%, var(--MainColor) 50%, var(--SubSubColor) 100%);
}

#roadmap .col-lg-6 li::after {
    position:absolute;
    left:-17px;
    top:35px;
    content:'';
    display:inline-block;
    width:10px;
    height:10px;
    border-radius:50%;
    background-color:var(--MainBackColor);
}

#roadmap .col-lg-6 li dt {
    margin-bottom:10px;
    font-weight:bold;
    font-size:18px;
}

#roadmap .col-lg-6 li dd {
    position:relative;
    font-size:14px;
    word-break:keep-all;
    margin-top:5px;
    padding-left:20px;
    color:var(--SubFontColor);
}

#roadmap .col-lg-6 li dd i {
    position:absolute;
    left:0;
    top:7px;
    margin-right:10px;
    font-size:12px;
}

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

#contact h4 {
    margin-bottom:50px;
    color:var(--MainBackColor);
    letter-spacing:2px;
}

#contact h4 br {
    display:none;
}

#contact .btn_contact {
    width:100%;
    max-width:220px;
    margin:0 auto;
    background-color:rgba(255,255,255,0.2);
}