@font-face {font-family: neo;src: url('neo.woff2') format('woff2');}

/* basic */
* {font-family: "neo" !important;}
body,
load {background-color: var(--bg);font-size: 16px;}
.shadow::after {width: calc(100% - 30px);background-color: var(--orange);}
.line {width: 100%;height: 50px;background-image: url(../images/line.svg);background-size: cover;}
.main {max-width: 1400px;padding: 0;}
.describe {color: var(--txt);text-align: center;line-height: 150%;}
p {line-height: 150%;}

/* color */
:root {
    --color: #6337FF;
    --orange: #FFBC36;
    --deep: #160E37;
    --block: #34256A;
    --txt: #9F92CB;
    --bg: #22184C;
}

/* btn */
.btn {background-color: var(--orange);color: var(--deep);border-radius: 100px;font-weight: bold;padding: 0 30px;}

/* head */
.head {position: absolute;width: 100%;z-index: 3;padding: 40px;}
.head h1 {width: 70px;}
.head h1 img {width: 100%;transition-duration: .3s;}
.head h1:hover img {transform: rotateY(180deg);}
.head-cont a {width: 60px;height: 60px;border-radius: 100%;display: flex;}
.head-cont a i {color: var(--orange);font-size: 32px;}
.head-cont a:hover {background-color: var(--color);}

/* menu */
menu {flex: 1;}
menu x {color: var(--orange);}
menu-cont li a {color: white;padding: 0 30px;height: 50px;line-height: 50px;border-radius: 100px;font-weight: bold;}
menu-cont li a.shadow::after {opacity: 0;transition-duration: .3s;}
menu-cont li a:hover {background-color: var(--orange);color: var(--deep);}
menu-cont li a.shadow:hover::after {opacity: 1;}

/* banner */
.banner {background-size: cover;max-width: 1920px;margin: auto;height: 860px;padding-top: 120px;}
.banner .main {height: 100%;}
.banner-cont {height: 100%;display: flex;align-items: center;}
.banner-txt {flex: 1;}
.banner-txt h2 {color: white;text-transform: inherit;font-size: 66px;padding-bottom: 30px;}
.banner-txt h2 z:first-child {color: var(--color);}
.banner-txt h2 z:last-child {color: var(--orange);}
.banner-txt span {color: white;font-size: 20px;display: block;line-height: 200%;}

/*atropos*/
.atropos {width: 800px;margin-right: -120px;}
.atropos img {position: absolute;top: 0;left: 0;}
.atropos img:first-child {position: static;}
.atropos {position: relative;display: block;perspective: 1200px;transform: translate3d(0, 0, 0);}
.atropos-rotate-touch,
.atropos-rotate-scroll-x,
.atropos-rotate-scroll-y {-webkit-tap-highlight-color: rgba(0, 0, 0, 0);-webkit-touch-callout: none;user-select: none;}
.atropos-rotate-touch-scroll-y {touch-action: pan-y;}
.atropos-rotate-touch-scroll-x {touch-action: pan-x;}
.atropos-rotate-touch {touch-action: none;}
.atropos-scale,
.atropos-rotate {width: 100%;height: 100%;transform-style: preserve-3d;transition-property: transform;display: block;}
.atropos-shadow,
.atropos-highlight {position: absolute;pointer-events: none;transition-property: transform, opacity;display: block;opacity: 0;}
.atropos-shadow {z-index: -1;background: #000;left: 0;top: 0;width: 100%;height: 100%;filter: blur(30px);}
.atropos-highlight {left: -50%;top: -50%;width: 200%;height: 200%;background-image: radial-gradient(circle at 50%, rgba(255, 255, 255, 0.25), transparent 50%);z-index: 0;}
.atropos-rotate {position: relative;}
.atropos-inner {width: 100%;height: 100%;position: relative;overflow: hidden;transform-style: preserve-3d;transform: translate3d(0, 0, 0);display: block;}
.atropos-active {z-index: 1;}
.atropos-active .atropos-shadow {opacity: 1 !important;}
[data-atropos-offset],
::slotted([data-atropos-offset]) {transition-property: transform;}
[data-atropos-opacity] {transition-property: opacity;}
[data-atropos-offset][data-atropos-opacity],
::slotted([data-atropos-offset][data-atropos-opacity]) {transition-property: transform, opacity;}

/* link */
.link {background-color: var(--block);}
.link u {display: block;width: 100%;height: 1px;background-image: linear-gradient(90deg,var(--block),var(--orange),var(--block));}
.link ul {display: flex;padding: 50px;}
.link ul li {flex: 1;}
.link ul li a {width: 70px;display: block;margin: auto;mix-blend-mode: luminosity;opacity: .5;}
.link ul li a:hover {mix-blend-mode: normal;opacity: 1;transform: scale(1.1);}

/* title */
.title {padding: 50px 0;}
.title h3 {color: white;text-transform: uppercase;font-size: 30px;padding: 0 30px;}
.title em {width: 8px;height: 8px;background-color: var(--orange);}
.title span {width: 60px;height: 3px;background-color: var(--orange);}

/* app */
.app {}
.app-list {display: grid;grid-template-columns: 1fr 1fr 1fr;grid-gap: 20px;padding: 120px 0;}
.app-list li {text-align: center;background-color: var(--block);border-radius: 20px;transition-duration: .3s;}
.app-list li em {width: 120px;height: 120px;border: 15px var(--bg) solid;background-color: var(--color);border-radius: 100%;color: white;display: flex;align-items: center;font-size: 40px;margin-top: -60px;transition-duration: .3s;}
.app-list li h5 {color: white;font-size: 24px;padding: 20px 0;}
.app-list li cite {color: var(--txt);display: block;line-height: 30px;}
.app-list li a {margin: 30px 0 -30px;width: 200px;}
.app-list li:hover {background-color: white;}
.app-list li:hover h5 {color: var(--deep);}
.app-list li:hover em {transform: rotate(360deg);}

/* contract */
.contract {background-image: url(../images/contract.jpg);background-size: cover;padding: 80px 0;max-width: 1920px;margin: auto;}
.contract .title {text-align: left;}
.contract .title h3 {padding: 20px 0;font-size: 40px;}
.contract .describe {text-align: left;width: 50%;}
.contract-list {display: grid;grid-template-columns: 1fr 1fr 1fr 1fr;grid-gap: 20px;padding-top: 150px;}
.contract-list li {backdrop-filter: blur(10px) brightness(120%);padding: 20px;border-radius: 20px;transition-duration: .3s;cursor: pointer;}
.contract-list li h5 {color: var(--orange);font-size: 20px;padding: 10px 0;}
.contract-list li p {color: white;}
.contract-list li:hover {background-color: var(--color);}

/* currency */
.currency {padding: 50px 0;}
.currency-list {display: grid;grid-template-columns: 1fr 1fr;grid-gap: 20px;padding: 80px 0;}
.currency-list li {background-color: var(--block);border-radius: 20px;padding: 40px;display: flex;align-items: center;transition-duration: .3s;cursor: pointer;}
.currency-list i {width: 120px;margin-right: 50px;transition-duration: .3s;}
.currency-list aside {flex: 1;}
.currency-list aside h5 {color: white;font-size: 20px;margin-bottom: 20px;}
.currency-list aside p {color: var(--txt);}
.currency-list li:hover {background-color: white;}
.currency-list li:hover h5 {color: var(--deep);}
.currency-list li:hover i {transform: rotateY(180deg);}
.currency-lead {background-image: url(../images/lead.jpg);background-size: cover;border-radius: 20px;padding: 150px 50% 120px 40px;}
.currency-lead h4 {color: white;font-size: 40px;padding-bottom: 20px;}
.currency-lead p {color: white;}
.currency-info {background-color: var(--deep);padding-top: 200px;margin-top: -200px;}
.currency-info ul {display: grid;grid-template-columns: 1fr 1fr;grid-gap: 20px;padding: 50px 0;}
.currency-info li {text-align: center;padding: 30px;}
.currency-info li i {width: 100px;display: block;margin: 0 auto 20px;transition-duration: .3s;}
.currency-info li h5 {color: white;padding: 20px 0;font-size: 20px;}
.currency-info li p {color: var(--txt);}
.currency-info li:hover i {transform: rotateY(180deg);}

/* multiple */
.multiple {}
.multiple-list {display: grid;grid-template-columns: 1fr 1fr 1fr 1fr;grid-gap: 20px;padding: 80px 0;}
.multiple-list a {border-radius: 20px;overflow: hidden;height: 460px;position: relative;}
.multiple-list a span {position: absolute;left: 0;bottom: 0;width: 100%;padding: 100px 20px 40px;color: white;}
.multiple-list a:nth-child(1) span {background-image: linear-gradient(transparent,#2d326f);}
.multiple-list a:nth-child(2) span {background-image: linear-gradient(transparent,#1535a3);}
.multiple-list a:nth-child(3) span {background-image: linear-gradient(transparent,#2b1587);}
.multiple-list a:nth-child(4) span {background-image: linear-gradient(transparent,#202d40);}
.multiple-list a:hover {transform: translateY(-10px);}

/* foot */
.foot {margin-top: 100px;background-color: var(--deep);}
.foot-cont {display: flex;align-items: center;padding: 50px 0;}
.foot-logo {width: 70px;margin-right: 100px;}
.foot-logo img {transition-duration: .3s;}
.foot-logo:hover img {transform: rotateY(180deg);}
.foot-nav {flex: 1;}
.foot-nav a {color: white;padding: 0 20px;text-transform: capitalize;}
.foot-nav a:hover {color: var(--orange);}
.foot-social h5 {color: white;font-size: 22px;margin-bottom: 20px;text-align: center;}
.foot-social ul {display: grid;grid-template-columns: 1fr 1fr 1fr 1fr;}
.foot-social ul li {width: 100px;}
.foot-social ul li a {opacity: .5;}
.foot-social ul li a:hover {opacity: 1;}
.foot-copy {border-top: 1px var(--block) solid;padding: 20px 0;color: var(--txt);text-align: center;text-transform: uppercase;}
.foot-copy a {color: var(--txt);}
.foot-copy a:hover {color: var(--orange);}

/*im*/
.im {height: 140px;margin: auto 10px;}
.im a {width: 60px;height: 60px;padding: 0;font-weight: normal;font-size: 30px;}
.top.btn {width: 60px;position: static;margin: auto;font-size: 30px;}

/*chart*/
.chart {margin-bottom: 80px;}
.chart .main {background-color: white;padding: 30px 30px 0;border-radius: 20px;}
.tradingview-widget-container {width: 100% !important;}
.tradingview-widget-copyright {display: none;}




@media(max-width:640px){
    /* basic */
    body,
    load {font-size: .2rem;}
    .shadow::after {width: calc(100% - .3rem);}
    .line {height: .2rem;}
    .main {padding: 0 .1rem;}

    /* btn */
    .btn {padding: 0 .3rem;}

    /* head */
    .head {padding: 0;}
    .head h1 {width: .6rem;margin: .1rem;}
    .head-cont a {width: .6rem;height: .6rem;margin: .1rem;}
    .head-cont a i {font-size: .36rem;}
    .head-cont a:hover {background-color: inherit;}

    /* menu */
    menu-cont li a {padding: 0;height: .8rem;line-height: .8rem;border-radius: 0;}

    /* banner */
    .banner {height: auto;padding: 1rem 0 .3rem;}
    .banner-cont {display: block;}
    .banner-txt {padding: .5rem .3rem;}
    .banner-txt h2 {font-size: .5rem;padding-bottom: .3rem;}
    .banner-txt span {font-size: .2rem;}

    /*atropos*/
    .atropos {width: 5rem;pointer-events: none;margin: auto;}
    .atropos-shadow {filter: blur(.3rem);}
    
    /* link */
    .link ul {padding: .5rem .2rem;}
    .link ul li a {width: .6rem;}
    .link ul li a:hover {mix-blend-mode: luminosity;opacity: .5;transform: scale(1);}

    /* title */
    .title {padding: .5rem 0;}
    .title h3 {font-size: .32rem;padding: 0 .3rem;}
    .title em {width: .1rem;height: .1rem;}
    .title span {width: .8rem;height: .03rem;}

    /* app */
    .app {}
    .app-list {grid-gap: .1rem;padding: 1rem 0;}
    .app-list li {border-radius: .2rem;width: 100%;margin: auto;}
    .app-list li em {width: 1rem;height: 1rem;border: .1rem var(--bg) solid;font-size: .4rem;margin-top: -.5rem;}
    .app-list li h5 {font-size: .26rem;padding: .15rem 0;}
    .app-list li cite {line-height: .4rem;}
    .app-list li a {margin: .2rem 0 -.3rem;width: 90%;padding: 0;}

    /* contract */
    .contract {padding: .5rem .1rem;}
    .contract .title h3 {padding: .2rem 0;font-size: .32rem;}
    .contract-list {grid-template-columns: 1fr 1fr;grid-gap: .2rem;padding-top: 1rem;}
    .contract-list li {backdrop-filter: blur(.1rem) brightness(120%);padding: .2rem;border-radius: .2rem;}
    .contract-list li h5 {font-size: .2rem;padding: .1rem 0;}
    .contract-list li p {font-size: .18rem;}

    /* currency */
    .currency {padding: .4rem 0;}
    .currency-list {grid-template-columns: 1fr;grid-gap: .2rem;padding: .5rem 0;}
    .currency-list li {border-radius: .2rem;padding: .3rem;}
    .currency-list i {width: 1.2rem;margin-right: .3rem;}
    .currency-list aside h5 {font-size: .24rem;margin-bottom: .2rem;}
    .currency-lead {border-radius: .2rem;padding: 1rem 30% 1rem .4rem;}
    .currency-lead h4 {font-size: .4rem;padding-bottom: .2rem;}
    .currency-info {padding-top: 2rem;margin-top: -2rem;}
    .currency-info ul {grid-gap: .2rem;padding: .5rem 0;}
    .currency-info li {padding: .2rem;}
    .currency-info li i {width: 1rem;margin: 0 auto .2rem;}
    .currency-info li h5 {padding: .2rem 0;font-size: .2rem;}

    /* multiple */
    .multiple {}
    .multiple-list {grid-template-columns: 1fr 1fr;grid-gap: .2rem;padding: .6rem 0;}
    .multiple-list a {border-radius: .2rem;height: 4rem;}
    .multiple-list a span {padding: 1rem .2rem .4rem;}
    .multiple-list a:hover {transform: translateY(0);}

    /* foot */
    .foot {margin-top: .5rem;}
    .foot-cont {display: block;padding: .5rem 0 .2rem;}
    .foot-logo {width: .8rem;margin: auto;}
    .foot-nav {padding: .4rem;text-align: center;}
    .foot-nav a {padding: .1rem;display: inline-block;}
    .foot-social h5 {font-size: .26rem;margin-bottom: .2rem;text-align: center;}
    .foot-social ul {padding: 0 .4rem;}
    .foot-social ul li {width: auto;}
    .foot-copy {padding: .2rem 0;}

    /*im*/
    .im {height: 1.6rem;margin: auto .1rem;}
    .im a {width: .7rem;height: .7rem;padding: 0;font-weight: normal;font-size: .36rem;}
    .top.btn {width: .7rem;position: static;margin: auto;font-size: .36rem;}
    
    /*chart*/
    .chart {width: 6rem;margin: auto auto .5rem;}
    .chart .main {padding: .2rem .2rem 0;border-radius: .2rem;}
}