:root {
  --font-color-normal:#303030;
  --font-color-light:#3b71ff;
  --font-color-white:rgba(255, 255, 255, 0.65);
  --title-to-text-margin:0.5em;
  --body-demo-padding:10%;
  --title-line-height:1;
  --text-line-height:1.5;
  --footer-back-color:#1C2028;
  --about-padding:1em 2em;
  --box-shadow:rgba(0, 0, 0, 0.12);
}
.font-white .nav li a{
  color: #fff;
  border-color: #fff;
}
.font-white .nav li a:hover{
  color: #fff;
}
.demo-back {
  position: relative !important;
  left: 0 !important;
  top: 0 !important;
}
/* reset */
html { height: 100%; overflow-x:hidden;}
body { min-height: 100%; overflow-x:hidden;}
body { _height: 100% }
body, div, ul, ol, li, dl, dt, dd, h1, h2, h3, h4, h5, h6, iframe, pre, code, fieldset, legend, form, input, select, textarea, button, p, blockquote, th, td, figure { margin: 0; padding: 0 }
li { list-style-type: none }
h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: normal;}

body {
  background-color: #F7F7F7;
  /* 新字体集 */
   /* font-family: 'Microsoft Yahei',Arial,sans-serif;  */
   /* 百度的字体集 */
   /* font-family: Arial,sans-serif;   */
   /* 谷歌浏览器的字体集 */
  /* font-family: Roboto, 'Segoe UI',Arial,'Microsoft Yahei',sans-serif;  */
  /* 趣链的字体集  */
  font-family: -apple-system,system-ui,BlinkMacSystemFont,Segoe UI,Roboto,PingFang SC,Hiragino Sans GB,Microsoft YaHei,Helvetica Neue,sans-serif; 
}
a { color:var(--font-color-normal);text-decoration: none!important; transition:0.2s all; -webkit-transition:0.1s all;}
a * { cursor: pointer }
:focus { outline: none }

/* header样式 */
.header{
  width: 100%;
  height:80px;
  background-color:transparent;
  position: fixed;
  left:0;
  top:0;
  z-index: 100;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.header .nav li a {
  cursor: pointer;
}
.header .nav li .second-menu {
  position: relative;
  overflow: visible;
  display: flex;
  justify-content: center;
}
.header .nav li .second-menu .popper {
  top: 100%;
  position: absolute;
  overflow-y: hidden;
  height: 0;
  transition:height 300ms ease-in-out;
	-webkit-transition:height 300ms ease-in-out;
}
.popper .inner {
  background-color: #fff;
  border-radius: 0.25em;
  padding: 1em 0;
  box-shadow: 0 0 4px var(--box-shadow) inset;
}
.popper-show {
  height: 10em !important;
}
.header .nav li .second-menu .popper .item {
  width: fit-content;
  padding: 0 1em;
  font-size: 14px;
  line-height: 2em;
  white-space: nowrap;
  color:var(--font-color-normal);
  word-wrap: normal;
  cursor: pointer;
}
.header .nav li .second-menu .popper .item:hover {
  color: var(--font-color-light);
}
.header .nav li .second {
  cursor: default;
  color:var(--font-color-normal);
}
.font-white .nav li .second {
  color: #fff;
}
.font-white .nav li .inner   a{
  color: var(--font-color-normal);
}
.font-white .nav li .inner  a:hover{
  color:  var(--font-color-light);
}
.head-scroll .nav li .second {
  color: var(--font-color-normal);
}
/* header滚动的样式 */
.head-scroll {
  background-color: #fff;
}
.head-scroll .nav li a {
  color: var(--font-color-normal);
}
.head-scroll .nav li a:hover {
  color: var(--font-color-light);
}
.head-scroll .nav li .nav-active {
  border: 1px solid var(--font-color-light);
  padding: 0.2rem  0.9rem;
  border-radius: 1rem;
  color: var(--font-color-light);
}
/* header-logo样式 */
.header .logo {
  height: 50%;
  margin-left: var(--body-demo-padding);
}
.header .logo img {
 height: 100%;
 width: auto;
}
/* 菜单样式 */
.nav{ 
  margin-right: var(--body-demo-padding);
}
.nav ul{
  display: flex;
  align-items: center;
}
.nav ul li + li{
margin-left: 2vw;
}
.nav li a:hover {
  color: var(--font-color-light);
}
.main{
  min-height: 100vh;
}
.nav-active {
  border: 1px solid var(--font-color-light);
  padding: 0.2rem  0.9rem;
  border-radius: 1rem;
  color: var(--font-color-light);
}
/* nav-phone样式 */
.phone-btn {
  cursor: pointer;
  display: none;
  margin-right: var(--body-demo-padding);
}
.phone-btn .line {
  display: block;
  width: 25px;
  height: 3px;
  margin: 5px auto;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  background-color: var(--font-color-light);
}
.white-btn .line {
  background-color: #fff;
}
.phone-btn.active .line:nth-child(2) {
  opacity: 0;
}

.phone-btn.active .line:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.phone-btn.active .line:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}
.phone-menu {
  position: absolute;
  top: 100%;
  left: 100%;
  width: 100%;
  background-color: #fff;
  width: 100%;
  text-align: left;
  padding: 1em;
  box-sizing: border-box;
  transition: 0.3s;
}
.show-all {
  left: 0;
}
.phone-menu-hidden {
  display: none;
}
.phone-menu li {
  padding: 1em 0;
  color: var(--font-color-normal);
}
.phone-menu li a {
  cursor: pointer;
}
.phone-menu li .active {
  color: var(--font-color-light);
}
.phone-menu li a:hover {
 color: var(--font-color-light);
}
.sub-active {
  color: var(--font-color-light);
}
.phone-submenu {
  cursor: pointer;
}
.phone-submenu .arrow{
  transition: transform 300ms ease-in-out;
}
.sub-active .arrow{
  transform: rotate(90deg);
}
.subblock {
  overflow-y: hidden;
  height: 0;
  transition:height 300ms ease-in-out;
	-webkit-transition:height 300ms ease-in-out;
}
.subblock-full {
  height: 7.5em !important;
}
.subblock .subitem:first-child {
  margin-top: 1em;
}
.subblock .subitem {
  padding:1em;
  color: var(--font-color-normal);
  line-height: 1.25;
  cursor: pointer;
}
.subblock .subitem:hover {
  color: var(--font-color-light);
}
/* 首页banner样式 */
/* max-width: 1280px; */
.wrap{ margin:0 auto; width: 80%;}
.a-m-c{ transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); position:absolute; left:50%; top:50%;}
.inbanner{ position: relative; color:#fff; padding-top: 100px;}
.inbanner img{ width:100%;}
.inbanner .txt{ top:auto; bottom:15%;}
.inbanner h2{display: inline-block;}
/* page的样式 */
.page {
  padding: 1em 0;
   color: var(--font-color-normal);
}
.page .center {
  padding: 0 var(--body-demo-padding);
}
.page .center .title {
  text-align: center;
}
.page .center .imgs,.page .center .row {
  display: flex;
  justify-content: space-between;
}
.page .center .row .map {
  height: 100%;
  background: url('../upload/image/aboutus/map.jpg');
  background-position: center center;
  background-size: cover;
}
.page .center .row .map-row {
  display: flex;
}
.page .center .row .map-row .new-code {
  margin-top: 0.5em;
  width: 4.5em;
  display: block;
  margin-right: 0.5em;
}
.page .center .row .map-row .map-size {
  flex-grow: 1;
  margin-top: 0.5em;
  display: none;
  max-width: 100%;
  background: url('../upload/image/aboutus/map.jpg');
  background-position: center center;
  background-size: cover;
}
.page .center .imgs img {
  width: 31%;
  height: auto;
}
/* home-row-more的样式 */
.page .center .home-row-more {
  display: flex;
}
.page .center .home-row-more:not(:first-child) {
  margin-top: 0.5em;
}
.page .center .home-row-more .item{
  display: flex;
  align-items: center;
  justify-content: center;
}
.page .center .home-row-more .item img {
  height: 1em;
  width: auto;
}
.page .center .home-row-more .item .padding {
  padding: 0 27%;
}
.page .center .home-row-more .item .text {
  font-size: 14px;
  line-height: 1.5;
  text-align: justify;
}
.page .center .home-row-more .left,.page .center .home-row-more .right {
  width: 50%;
}
.page .center .home-row-more img {
  width: 100%;
  display: block;
}
/* home-row-one的样式 */
.page .center .home-row-one {
  width: 100%;
  display: none;
  position: relative;
}
.page .center .home-row-one:not(:first-child){
  margin-top: 0.5em;
}
.page .center .home-row-one img {
  width: 100%;
  display: block;
  height: auto;
  opacity: 0.3;
}
.page .center .home-row-one .item {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  display: flex;
  padding: 0 var(--body-demo-padding);
  justify-content: center;
  align-items: center;
}
.page .center .home-row-one .item img {
   height: 1em;
   opacity: 1;
  width: auto;
}
.page .center .home-row-one .item .text {
   font-size: 14px;
  line-height: 1.5;
  text-align: justify;
}
/* footer样式 */
.footer {
  padding: 1em var(--body-demo-padding);
  background-color: var(--footer-back-color);
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--font-color-white);
}
.footer .logo img{
  height: 36px;
  display: block;
}
.footer .text{
  font-size: 14px;
  display: flex;
  align-items: center;
  line-height: 1.5;
}
.footer .text2 a {
  margin-left: 1em;
}
.footer .link-text {
  display: flex;
  align-items: center;
  width: 100%;
}
.footer .text a,.footer .link-text a {
color: var(--font-color-white);
}
.footer .link-text a:hover {
  color: rgba(255, 255, 255, 0.95);
}
.footer .text img {
  display: block;
  height: 1.2em;
  margin-right: 0.1em;
  /* width: auto; */
}
/* aboutus页面 */
.about-padding {
  background: #fff;
  padding: var(--about-padding);
}
.page .center .fonts-row2 {
  display: none;
}
.page .center .fonts-row ul li,.page .center .fonts-row2 ul li {
  margin-left: 16px;
  list-style-type: disc;
  list-style-position: outside;
}
/* blockchain页面 */
.chain {
  display: flex;
  justify-content: space-between;
}
.chain .item {
  width: calc((100% - 1em)/3);
  padding: 0.5em;
  box-sizing: border-box;
  background-color: #E9F3FF;
}
.chain .item .text {
  font-size: 14px;
  line-height: 1.5;
  text-align: justify;
}
.chain .item img {
  height: 1.8em;
}
.chain .margin-top2 {
  margin-top: 0.5em;
}
.chain-second {
  width: 100%;
  background-color: #fff;
  padding: 1em 0;
  border-radius: 0.25em;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}
.chain-second .fonts {
  width: 49%;
}
.chain-second .fonts .text {
  font-size: 14px;
  text-align: justify;
}
.chain-second .fonts img {
  height: 1.5em;
  display: block;
}
.chain-second .img-size {
  width: 31%;
}
.chain-second .img-size img {
  width: 100%;
  display: block;
}
.chain-second-margin-top {
  margin-top: 1em;
}
/* trustedstorage页面 */
.storage {
  display: flex;
  justify-content: space-between;
}
.storage .item {
  width: calc((100% - 2em)/4);
  background-color: #F5F5F5;
}
.storage .item img {
  width: 100%;
  display: block;
}
.storage .item .fonts {
  padding: 0 0.45em 0.45em;

}
.storage .item .fonts .text {
  font-size: 14px;
  text-align: justify;
}
.storage .item .line {
  width: 100%;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  margin-bottom: 0.7em;
}
.storage .demo .title{
  background: linear-gradient(135deg, #4987F4 0%, #234FE5 100%);
  padding: 0.5em 0;
  color: #fff;
}
.storage .demo .fonts {
  padding: 0;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.storage .demo .text {
  padding: 2em;
  font-size: 14px;
  text-align: justify;
  flex-grow: 1;
  background-color: #fff;
}
.storage .demo .text .border {
  border: 1px solid #ddd;
  padding: 1.5em;
  height: 100%;
  box-sizing: border-box;
}
.storage .item .margin {
  margin: 0.7em 0;
}
.storage2 .item {
  width: calc((100% - 1em)/2);
  padding: 1em;
  background-color: #fff;
  display: flex;
  box-sizing: border-box;
}
.storage2 .item .border {
  width: 100%;
  display: flex;
  padding: 0.8em;
  box-sizing: border-box;
  border: 1px solid #ddd;
}
.storage2 .item img {
  height: 1.5em;
  display: block;
  width: auto;
}
.storage2 .item .fonts {
  padding: 0;
  margin-left: 0.5em;
}
/* 适配范围 */
@media only screen and (max-width: 1599px) {

}
@media only screen and (max-width: 1300px) {
   .page .center .fonts-row {
    display: none !important;
  }
  .page .center .fonts-row2 {
    display: flex;
  }
  
}
@media only screen and (max-width: 1279px){
  .inbanner{padding-top: 0;}
  .page .center .home-row-more .item .padding {
    padding: 0 15%;
  }
}

@media only screen and (min-width: 1025px){

}
@media only screen and (max-width: 1024px){
  .header {
    height: 50px;
  }
  .footer .logo img {
    height: 25px;
  }
  .footer .text {
    font-size: 12px;
  }
  .page .center .home-row-more .item .padding {
    padding: 0 10%;
  }
  .storage {
    display: block;
  }
  .storage:not(:first-child) {
    margin-top: 0.5em !important;
  }
  .storage .item {
    width: 100%;
    display: flex;
    align-items: center;
  }
  .storage .item:not(:first-child) {
    margin-top: 0.5em;
  }
  .storage .item img {
    width: 50%;
  }
  .storage .item .fonts {
    padding: 0 0.45em;
  }
  .storage .item .fonts .fnt_20, .storage .item .fonts .line{
    margin: 0;
    margin-bottom: 0.5em;
  }
  .storage2 .item img {
    width: auto;

  }
  .storage .demo {
    display: block;
  }

}
@media only screen and (max-width: 1023px){ 
  
   
}
@media only screen and (max-width: 950px) {
.page .center .home-row-more .item .padding {
    padding: 0 6%;
  }
  .page .center .fonts-row {
    display: none !important;
  }
  .page .center .fonts-row2 {
    display: block;
  }
  
}
@media only screen and (max-width: 767px){
  .inbanner{ height: 200px;}
  .inbanner img{ display: none;}
  .page .center .home-row-more {
    display: none;
  }
  :root {
    --body-demo-padding:3%;
  }
  .banner .txt {
    padding: 0;
  }
  .page .center .home-row-one {
    display: block;
  }
  .page .center .row {
    display: block;
  }
  .page .center .row .phone-us {
    width: auto !important;
  }
  .page .center .row .map-row .new-code {
    width: 30%;
  }
  .page .center .row .map-row .map-size {
    display: block;
  }
  .chain {
    display: block;
  }
  .chain .item {
    width: 100%;
    padding: 1em;
  }
  .chain .margin-top1:not(:first-child),.chain .margin-top2{
    margin-top: 1em;
  }
  .chain-second .img-size {
    display: none;
  }
  .chain-second .fonts {
    width: 90%;
    /* padding: 1em; */
  }
  
}
@media only screen and (max-width: 500px) {
  .header .nav{
    display: none;
  }
  .phone-btn {
    display: block;
  }
 
}
@media only screen and (max-width: 480px){
 .storage .item {
    display: block;
    position: relative;
  }
  .storage .item img {
    width: 100%;
    opacity: 0.3;
  }
  .storage .item .fonts2 {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    display: flex;
    padding: 0 1em;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .storage2 .item img{
    width: auto;
    opacity: 1;
  }
  .storage2 .item {
    display: flex;
  }
}
@media only screen and (max-width: 430px){
  .footer .text2 {
    display: block;
    text-align: center;
  }
  .footer .text2 a {
    margin-left: 0px !important;
  }
}