@charset "utf-8";
@import url("base.css");/* 重置&常用样式 */
@import url("fonts/custom.css"); /* 字体 */

/* 全局变量 */
:root{
   --max-width: 1440;
   --default-color__rgb: 34,34,34; /*#222*/
   --default-color: rgba(var(--default-color__rgb), 1);
   --default-color_333__rgb: 51,51,51; /*#33*/
   --default-color_333: rgba(var(--default-color_333__rgb), 1);
   --default-color_666__rgb: 102,102,102; /*#666*/
   --default-color_666: rgba(var(--default-color_666__rgb), 1);
   --primary-color__rgb: 207, 32, 27; /*#cf201b*/
   --primary-color: rgba(var(--primary-color__rgb), 1);
   --f-family: 'hm', sans-serif;
   --f-family__en: 'Barlow','hm', sans-serif;
   --main_line_height: 1;
   --button_height: 0.4rem;
   --transition: 0.3s;
   --header-height:1rem;
}

/* 比例要求 */
/*基于屏幕尺寸自适应字体大小*/
/*超过1920px时，继续按比例增长*/
html{font-size: calc(100 / 1920 * 100vw);}
.container {max-width: calc(var(--max-width) / 100 * 1rem);}
@media (min-width:1440px) and (max-width: 1920px) {
   html{font-size: 100px;} 
}
@media (max-width: 1440px) {
   html:not(.view){font-size: calc(100 / 1600 * 100vw);}
}
@media (max-width: 1024px) {
   html:not(.view){font-size: calc(100 / 1000 * 100vw);}
}
@media (max-width: 480px) {
   html:not(.view){font-size: calc(100 / 540 * 100vw);}
   :root{
      --header-height:0.8rem;
   }
}


/*超过1920px时，比例不变  默认
html{font-size: 100px;}
main{max-width: 1920px;margin: 0 auto;}
.container {max-width: calc(var(--max-width) * 1px);}
@media (max-width: 1600px) {
   html:not(.view){font-size: calc(100 / 1600 * 100vw);}
}*/

body{font-size: var(--font-size__16); font-family:var(--f-family); line-height:  var(--main_line_height); color: var(--black-color);}
#canvas{position: fixed;left: 0;width: 100vw;height: 100vh;top: 0; pointer-events: none;z-index: 300;}
@media (max-width: 1024px) {
   #canvas{visibility: hidden;opacity: 0;}
}

/* Start
   ========================================================================== */
header{font-weight: var(--font-weight__l);position: fixed;left: 0;top: 0;width: 100%;z-index: 100;transition: 0.5s;}
header .container{height: var(--header-height);transition: 0.5s; position: relative;z-index: 90;}
header.has-inside,
header.has-whitebg{background-color: var(--white-color);box-shadow: 0 0.04rem 0.14rem 0.02rem rgba(26, 79, 154, 0.06);}
header .logo img{max-height: 0.5rem;}
@media (min-width: 1025px) {
header.fixed{box-shadow: 0 0.04rem 0.14rem 0.02rem rgba(26, 79, 154, 0.06);background-color: var(--white-color);}
}
@media (max-width: 1024px) {
header .logo img{max-height: 0.38rem;}
header{box-shadow: 0 0.04rem 0.14rem 0.02rem rgba(26, 79, 154, 0.06);background-color: var(--white-color);}
}

 .nav-sub{ border-radius: 0 0 0.06rem 0.06rem;transition: 0.5s;opacity: 0; clip-path: polygon(0 0,100% 0,100% 0,0 0); }
 .nav-sub::before{position: absolute; content: '';width: 100%;height: 0.09rem;top: 0;left: 0; background: linear-gradient(to bottom, rgba(26, 79, 154, 0.06), rgba(26, 79, 154, 0));}
 .nav-sub h3{margin: 0; font-size: var(--font-size__20); font-weight: var(--font-weight__m);border-bottom: 1px solid rgba(var(--black-color__rgb), 0.06); position: relative;padding-bottom: 0.1rem;}
 .nav-sub h3::after{position: absolute; content: ''; bottom: -1px;height: 1px;width: 0.3rem;background-color: var(--primary-color); left: 0; transition:transform 0.3s; transform-origin: 0 0;}
 .nav-sub .item:hover h3:after{transform: scaleX(2);}
 .nav-sub p{font-weight: var(--font-weight__l); margin: 0.1rem 0 0 0; line-height: calc(30 / 16);color: var(--default-color);}
 @media (min-width: 1025px) {
 .nav-sub .item{--lin:4;--limr:1rem;}
 /*.nav-sub .item:not(:nth-child(4n)){margin-right: var(--limr);}
 .nav-sub .item:nth-child(4) ~ .item{margin-top: var(--pm__30);}*/
 }

 .main-nav li{ position:relative;}
 .main-nav li span,
 .main-nav li span a{display: block;}
 .main-nav li span{position: relative;}
 .main-nav li span a{ transition: 0.5s;}
 .main-nav li span a:not(:hover){color: var(--default-color);}
 .main-nav li.aon span a{color: var(--primary-color);}
 .main-nav li .item{ padding:.05rem 0; line-height:1.6;}
 @media (min-width: 1025px) {
 .main-nav{margin-right: var(--pm__60);}
 .main-nav li:not(:last-child){margin-right:3em;}
 .main-nav li span a{line-height: var(--header-height); }
 .nav-sub{position: absolute; min-width: 100%;top: 100%;left: 0;background-color: var(--white-color); padding: var(--pm__10);white-space: nowrap;box-shadow: 0 0.04rem 0.14rem 0.02rem rgba(26, 79, 154, 0.06);}
 .show .nav-sub{opacity: 1;clip-path: polygon(0 0,100% 0,100% 100%,0 100%);}
 }
 @media (min-width: 1025px) and  (max-width: 1600px){
   .main-nav{margin-right: var(--pm__100);}
   .main-nav li:not(:last-child){margin-right: var(--pm__50);}
 }
 @media (max-width: 1024px) {
   .main-nav{position: fixed;top: var(--header-height); bottom: 0; width: 3rem; background-color: var(--white-color); box-shadow: 0 0.14rem 0.14rem rgba(26, 79, 154, 0.06); left: -100%;opacity: 0;transition: 0.5s ease-in-out;}
   .menu-show .main-nav{left: 0;opacity: 1;}
   .main-nav ul{height: 100%; overflow: auto; flex-wrap:wrap; align-items:flex-start; align-content:flex-start;}
   .main-nav li:not(:last-child){border-bottom: 1px solid rgba(var(--black-color__rgb), 0.06);}
   .main-nav li{width:100%;}
   .main-nav li span a{padding: 1em 1em 1em 3em; font-size: var(--font-size__20);}
   .open-menu{display: flex;flex-direction: column;align-items: center;justify-content: space-between; width: 0.4rem; height: 0.32rem;padding: 0.06rem 0; margin-left: 0.2rem;}
   .open-menu i{display: block; width: 100%; height: 2px;background-color: var(--primary-color);}
   .wap-op{position: absolute;z-index: 10;right: 0;top: 0;width: 0.4rem;height: 100%;display: flex;align-items: center;justify-content: center;}
   .wap-op:after{display: block;content: ''; width: 0.1rem;height: 0.1rem;background: url(../images/select.svg) var(--bg-contain); transition: 0.3s;}
   .wap-show .wap-op:after{transform: rotate(180deg);}
   .nav-sub{visibility: hidden; height: 0;overflow: hidden; padding:0 0 0 3em;border-top: 1px solid rgba(var(--black-color__rgb), 0.06);}
   .nav-sub .item{padding: 1em 0;}
   .wap-show .nav-sub{opacity: 1;clip-path: polygon(0 0,100% 0,100% 100%,0 100%);visibility: visible; height: auto;}
 }

.open-search{width: 0.16rem; height: 0.16rem;display: block;background: url(../images/search.svg) var(--bg-contain);cursor: pointer; margin-right: var(--pm__60);}
.search-show .open-search{background-image: url(../images/close.svg);}
.top-search{position: fixed; width: 100%;top: var(--header-height);left: 0;transition: 0.5s;opacity: 0; clip-path: polygon(0 0,100% 0,100% 0,0 0);z-index: 99; padding-bottom: 0.28rem;}
.top-search .container{ border-radius: 0 0 0.06rem 0.06rem;background-color: var(--white-color); padding: var(--pm__60); box-shadow: 0 0.04rem 0.14rem 0.02rem rgba(26, 79, 154, 0.06);}
.search-show .top-search{opacity: 1;clip-path: polygon(0 0,100% 0,100% 100%,0 100%);}
.top-search .tips{text-align: center; font-size: var(--font-size__20);font-weight: var(--font-weight__m); margin-bottom: 0.5em;}
.top-search .inner{margin: 0 auto; max-width: 6rem;width: 90%;position: relative;}
.top-search .form-input{line-height: 2; padding-left: 0.2rem;padding-right: 0.8rem;}
.top-search .btn{position: absolute;right: 0;top: 0;width: 0.7rem;height: 100%; background: url(../images/search.svg) var(--bg-contain); background-size: auto 50%;cursor: pointer;}

footer{background-color: var(--black-color); padding-top: var(--pm__100);padding-bottom: var(--pm__60);font-weight: var(--font-weight__l);}
footer,
footer a:not(:hover){color: var(--white-color);}
footer .logo .img{width: 2.8rem;flex-shrink: 0;margin: 0 0.38rem;}
footer .logo .img img{filter: brightness(0) invert(1);}
footer .logo::before,
footer .logo:after{display: block; content: '';height: 1px;flex: 1;background-color: rgba(var(--white-color__rgb), 0.3);}
footer .tit{font-weight: var(--font-weight__m);font-size: var(--font-size__20); margin-bottom: var(--pm__30);}
.f-contact{margin: var(--pm__80) 0 var(--pm__140) 0;}
.f-other,
.f-other a:not(:hover){color: rgba(var(--white-color__rgb), 0.6);}
.f-nav{margin-bottom: var(--pm__30);}
.f-copyright .other-nav a{display: inline-flex;align-items: center;}
.f-copyright .other-nav a:not(:last-child):after{display: block;content: '';width: 0.01rem;height: 0.1rem;background-color: rgba(var(--white-color__rgb), 0.3);margin: 0 1em;}
.f-contact .info .pic{width: 1.24rem;flex-shrink: 0;}
.f-contact .info dl{flex: 1;margin-left: var(--pm__40);}
.f-contact .info dd{line-height: calc(22 / 16); padding-left: 0.33rem;background: no-repeat left center;}
.f-contact .info dd.tel{background-image: url(../images/tel.svg);background-size: auto 0.2rem;}
.f-contact .info dd.wx{background-image: url(../images/wx.svg);background-size: auto 0.16rem;}
.f-contact .info dd.email{background-image: url(../images/email.svg);background-size: auto 0.15rem;}
.f-contact .info dd:not(:last-child){margin-bottom: var(--pm__20);}
.f-contact .code li{max-width: 1.24rem;}
.f-contact .code li p{font-size: var(--font-size__18);font-weight: var(--font-weight__m); margin-bottom:.25rem;}
.f-contact .links li img{opacity: 0.8; transition: 0.3s; max-width: 1.2rem;}
.f-contact .links li a:hover img{opacity: 1;}
@media (min-width:1025px) {
.f-contact .code{width: calc(460 / var(--max-width) * 100%);flex-shrink: 0;}
.f-contact .links{width: calc(368 / var(--max-width) * 100%);flex-shrink: 0;}
.f-nav a:not(:last-child){margin-right: 3em;}
}
@media (max-width:1024px) {
   .f-contact .links ul{align-items: center;flex-wrap: wrap;justify-content: space-around;}
   .f-contact .links li img{max-height: 0.6rem;}
   .f-nav{justify-content: center;}
   .f-nav a{margin: 0 1em;}
   .f-copyright{text-align: center; line-height: 1.5;}
   .f-copyright .other-nav{justify-content: center;}
   .f-copyright .copyright a{display: inline-block;}
}
@media (max-width:640px) {
.f-contact .info{ margin-bottom:.3rem;}
.f-contact .code{ margin-bottom:.3rem;}
.f-contact .code li p{ margin-bottom:.1rem;}
}

.h-lang{margin: 0 var(--pm__50) 0 0;}
.h-lang a{display:flex;align-items: center;}
.h-lang a:not(:last-child):after{width: 0.01rem;height: 0.12rem;background-color: rgba(var(--black-color__rgb), 0.4);margin:0 0.5em;display: block; content: '';}

@media (min-width: 1025px) {
header:not(.fixed).lighter .h-lang a,
header:not(.fixed).lighter .main-nav li span a{color: var(--white-color);}
header:not(.fixed).lighter .open-search,
header:not(.fixed).lighter .logo img{filter: brightness(0) invert(1);}
header:not(.fixed).lighter a:not(:last-child):after{background-color: rgba(var(--white-color__rgb), 0.4);}
}

.home-secitons .section{
   height: 100%;
   width: 100%;
   top: 0;
   position: fixed;
   visibility: hidden;}
.home-secitons #guide{ visibility:visible;}
.home-secitons .section .container{height: 100%; padding-top: var(--header-height);}

 
   .home-secitons .section .sec-outer,
   .home-secitons .section .sec-inside {
     width: 100%;
     height: 100%;
     overflow: hidden;
   }
   .home-secitons .section .bg{ position: absolute; height: 100%; width: 100%; top: 0; /*background-color: var(--white-color);*/}

.home-tit{text-align: center; margin-bottom:calc(50 / 960 * 100vh);}
.home-tit .en{font-family: var(--f-family__en);font-size: var(--font-size__56); font-weight: var(--font-weight__m);}
.home-tit .en span{color: var(--primary-color);}
.home-tit .cn{font-weight: var(--font-weight__l);font-size: var(--font-size__32); margin-top: 0.09rem; line-height: 1.2;}
@media (max-width:750px) {
   .home-tit{--font-size__56:0.4rem;--font-size__32:0.24rem}
}

a[data-more]{ display:inline-flex; align-items: center; padding: 0 var(--pm__30); line-height: calc(40 / 16); border-radius:0.5rem; background: var(--primary-color); color: var(--white-color); font-weight: var(--font-weight__l); position: relative; transition: all 0.5s; z-index: 1;}
[data-more] + [data-more]{margin-left:0.14rem;}
[data-more='lighter']{background-color: #df1614;} 
[data-more]::after,
[data-more]::before { content: "";position: absolute;border: 2px solid var(--primary-color); width: calc(100% + 10px);height:  calc(100% + 10px);border-radius: 0.04rem; inset: -5px;animation: pathRotate 3s infinite linear; opacity: 0; transition: all 0.5s;}
[data-more]:hover::after,
[data-more]:hover::before{opacity: 1;}
[data-more]::after {animation-delay: -1.5s;}
[data-more]:hover {border-radius: 0.04rem;}
@keyframes pathRotate {
  0%,
  100% {
    clip-path: inset(0 0 98% 0);
  }
  25% {
    clip-path: inset(0 98% 0 0);
  }
  50% {
    clip-path: inset(98% 0 0 0);
  }
  75% {
    clip-path: inset(0 0 0 98%);
  }
}
[data-more='ico'] span{display: flex;align-items: center;}
[data-more='ico'] span:after{display: block;content: '';width: 0.11rem; height: 0.05rem; transform: rotate(90deg); background: url(../images/gettop.svg) var(--bg-contain); margin-left: 0.22rem;}

.home-body .right-fixed,
.home-body .fixed-nav,
.home-body header,
#intro .top{animation: hh 2s 1s linear both; opacity: 0;}
#intro .solgan .guide-logo{animation: hh2 2s 1s linear both;}
@keyframes hh {
   0%{opacity: 0;}
   100%{opacity: 1;}
}
@keyframes hh2 {
   0%{opacity: 1;}
   100%{opacity: 0;}
}

#guide .center-txt{background:url(../images/ban-cover.png) var(--bg-cover); padding-top: 5%;z-index: 10; }
#guide .layer{background-color: #000;animation: layer 3s linear 1s both; opacity:1;}
@keyframes layer {
   0%{opacity: 1;}
   100%{opacity: 0;}
}
#guide .swiper{position: absolute; left:0;top: 0;width: 100%;height: 100vh;}
#guide .swiper img,
#guide video{width: 100%;height: 100%;object-fit: cover;}
#guide .logo{width: 3.37rem; margin: 0 auto;}
#guide .txt{text-align: center;color: var(--white-color);text-shadow: 0 0 0.23rem 0.08rem rgba(53, 53, 53, 0.8);font-weight: var(--font-weight__l); margin-top: -0.1rem;}
#guide .slogan{height: calc(42 / 30 * 1em);text-align: justify; font-size: var(--font-size__30);font-weight: var(--font-weight__r);}
#guide .slogan::after{content: '';display: inline-block;width: 100%;}

#guide .center-txt{ pointer-events: none; /*animation: layer 3s linear 1s both;*/ opacity:1;}
#guide .swiper-pagination{ width:100%; z-index:6; bottom:.1rem;}
#guide .swiper-pagination .swiper-pagination-bullet{ margin:0 .05rem; background-color:#fff; opacity:1; cursor:pointer;}
#guide .swiper-pagination .swiper-pagination-bullet-active{ background-color:var(--primary-color);}
@media (max-width:750px) {
   #guide{--font-size__30:0.24rem}
   #guide .logo{width: 2rem;}
   #guide .inner{width: 70%;}
}

#intro .bg{background-color: #fffbf6;}
#intro .container{ padding-top: calc(var(--header-height) + 63 / 960 * 100vh); justify-content:flex-start;}
#intro .left svg,
#intro .left img{width: 3.61rem;}
#intro .right p{text-align: right;font-weight: var(--font-weight__l);color: rgba(85, 85, 85, 0.8); line-height: calc(30 / 16);margin: 0;}
#intro .solgan{ margin-top: 8vh;}
#intro .solgan .logo{width: 4.65rem; margin-bottom: calc(58 / 960 * 100vh); position:relative;z-index:10}
#intro .solgan .guide-logo{position:absolute;left:0;top:0;width:100%;z-index:2; pointer-events:none}
#intro .solgan .guide-logo img{position:relative;z-index:4;}
#intro .solgan .guide-logo:before{position:absolute;z-index:1;left:50%;top:50%;width:100vw;height:100vw;margin:-50vw 0 0 -50vw;background:var(--black-color);content:'';}
#intro .solgan .text{font-size: var(--font-size__30);letter-spacing: 0.08rem;text-indent: 0.08rem;}
#intro .solgan p{margin: 0.12rem 0 0 0;text-align: center;font-size: 0.19rem; line-height: calc(30 / 19);letter-spacing: 0.01rem;font-weight: var(--font-weight__l);}
@media (max-width:750px) {
   #intro .left svg,
   #intro .left img{width: 2rem;}
   #intro .solgan .logo{width: 3.2rem; margin-bottom: var(--pm__60);}
}

#story .bg{background:linear-gradient(to bottom,#fff 85%,#f8f8f8 100%);}
#story .right-swiper .txt{padding:var(--pm__40);}
#story .right-swiper .txt p{text-align: right;color: var(--white-color);font-size: var(--font-size__30);margin-top: 0.1rem;}
#story .right-swiper .logo img{height: 0.38rem;}
#story .right-swiper .figure{border-radius: 0.14rem;}
#story .left-swiper .title{border-bottom: 1px solid rgba(35, 24, 21, 0.12);color: #555555;padding-bottom: 0.09rem;}
#story .left-swiper .swiper:before,
#story .left-swiper .swiper:after{position: absolute; content: '';width: 100%;left: 0;z-index: 10;pointer-events: none;}
#story .left-swiper .swiper:before{top: 0;height: 0.3rem;background:linear-gradient(to bottom, var(--white-color) 0%, transparent 100%);}
#story .left-swiper .swiper:after{bottom: 0;height: 0.8rem;background:linear-gradient(to bottom, transparent 0%, rgb(251,251,251) 100%);}
#story .left-swiper .swiper-slide{height: auto;}
#story .left-swiper .inner{border-bottom: 1px dashed #e4e3e3; padding: 0.3rem 0;align-items: flex-start;}
#story .left-swiper .year{width: 1.08rem;font-size: var(--font-size__36);color: rgba(var(--black-color__rgb), 0.4);font-family: var(--f-family__en);font-weight: var(--font-weight__sb);flex-shrink: 0;display: flex;align-items: center;transition: 0.3s;}
#story .left-swiper .year:before{display: block;content: '';width: 0;height: 0.03rem; background-color: #cf201b; transition: 0.3s;}
#story .left-swiper dd{line-height: 0.3rem;color: #555;position: relative; padding-left: 0.12rem;}
#story .left-swiper dd::before{position: absolute;width: 0.04rem; height: 0.04rem; background-color: #000000;border-radius: 50%;left: 0; top: 0.8em;content: '';}
#story .left-swiper [class*="thumb-active"] .year{color: var(--primary-color);width:1.37rem;}
#story .left-swiper [class*="thumb-active"] .year:before{width: 0.2rem; margin-right: 0.14rem;}
#story .left-swiper [class*="thumb-active"] dd{color: rgba(var(--black-color__rgb), 0.86); font-size: var(--font-size__18);}
#story .right-swiper .swiper{border-radius: 0.14rem;}
@media (min-width:1025px) {
#story .left-swiper{width: calc(520 / var(--max-width) * 100%);}
#story .right-swiper{width: calc(800 / var(--max-width) * 100%);}
#story .left-swiper .swiper{height: 5.07rem;}
#story .right-swiper .swiper{height: 5.33rem;}
#story .right-swiper .figure{padding-bottom: calc(533 / 800 * 100%);}
}
@media (max-width:1024px) {
   #story .bg{background-color: var(--white-color);}
   #story .left-swiper .swiper{height: 30vh;width: 100vw;padding: 0 3vw;margin-left: -3vw;}
   #story .right-swiper{margin-top: 0.2rem;}
   #story .right-swiper .swiper{height: 35vh;}
   #story .right-swiper .figure{height: 100%;}
}

#service{--wh:0.46rem;}
#service .service-list .item{max-width:4.3rem;}
#service .service-list .ico{width: 0.72rem; flex-shrink: 0;}
#service .service-list .ico img{max-height: 0.37rem;}
#service .service-list .txt{flex: 1;}
#service .service-list .txt h3{margin: 0; font-size: var(--font-size__20);font-weight: var(--font-weight__m); height:1.8em;display: inline-flex;position: relative;z-index: 1;}
#service .service-list .txt h3:after{position: absolute; bottom: 0;width: 100%;left: 0;height: 100%;background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200%25' height='100%25'%3E%3Cdefs%3E%3Cstyle%3E .wave%7B animation:wave 1s ease-in-out infinite alternate; animation-delay:-0.25s; stroke:%23d1201a; stroke-width:2; stroke-linecap:square; %7D @keyframes wave%7B to%7B d:path('M 0 40 Q 20 42.5 40 40 Q 60 37.5 80 40'); %7D %7D %3C/style%3E%3C/defs%3E%3Cpattern id='wavePattern' x='0' y='0' width='80' height='80' patternUnits='userSpaceOnUse'%3E%3Cpath fill='none' class='wave' d='M 0 40 Q 20 37.5 40 40 Q 60 42.5 80 40' /%3E%3C/pattern%3E%3Crect x='0' y='0' width='100%25' height='100%25' fill='url(%23wavePattern)'%3E%3C/rect%3E%3C/svg%3E") 0px -0.5em / 0.8rem 0.8rem repeat-x;animation: waving 3s linear infinite;content: ''; opacity: 0;transition: 0.3s;}
#service .service-list .item:hover h3:after{opacity: 1;}
@keyframes waving {
   100% {
      background-position: 2rem -0.5em;
  }
}
#service .service-list .txt p{line-height: calc(28 / 16);color: var(--default-color_333); font-weight: var(--font-weight__l);margin: 0;}
#service .swiper{width: 100%; margin-bottom:calc(60 / 960 * 100vh); overflow: inherit;}
#service .swiper-slide a{display: block; overflow: hidden;border-radius: 0.14rem;position: relative;}
#service .swiper-slide a:before{position: absolute;z-index: 2; left: 0;bottom:0; height: calc(140 / 420 * 100%);background: linear-gradient(to bottom, transparent 0%, rgba(var(--black-color__rgb),0.7) 100%);width: 100%; content: ''; transition: 0.3s;}
#service .swiper-slide a:hover:before{height: 50%;}
#service .swiper-slide .figure{padding-bottom: calc(420 / 345 * 100%);}
#service .swiper-slide a:hover .figure img{transform: scale(1.05);}
#service .swiper-slide .txt{color: var(--white-color); padding: 0.18rem 0.26rem;}
#service .swiper-slide .txt h3{margin: 0;font-size: var(--font-size__28);font-weight: var(--font-weight__m); line-height:var(--wh);}
#service .swiper-slide .more{width: var(--wh); height: var(--wh);display: flex;align-items: center;justify-content: center;border-radius: 50%;transition: 0.3s;}
#service .swiper-slide a:hover .more{background-color: var(--primary-color);}
#service .swiper-slide .more:after{content: '';display: block;width: 0.13rem; height: 0.07rem;background: url(../images/gettop.svg) var(--bg-contain); transform: rotate(90deg);}
@media (max-width:750px) {
   #service{--font-size__28:0.2rem;--wh:0.3rem}
   #service .service-list .item:not(:last-child){margin-bottom: var(--pm__50);}
   #service .swiper-slide .txt{padding: 0.1rem;}
}

#learn .bg{background-color: var(--white-color);}
#learn .items {display: inline-flex!important; vertical-align: top;}
#learn .item {flex-shrink: 0; }
#learn .marquee3k + .marquee3k{margin-top: var(--pm__30);}
#learn .marquee3k {overflow: hidden;}
#learn .marquee3k .items { display: inline-flex !important; white-space: nowrap; will-change: transform;transform: translateZ(0);}
#learn .marquee3k .item { flex-shrink: 0;}

#learn .bg{background: url(../images/learn-bg.jpg) var(--bg-cover);}
#learn .item{width: 2.03rem;margin: 0 0.22rem}
#learn .in{background-color: var(--white-color); height:100%; border-radius: 0.14rem; border: solid 0.01rem var(--white-color);padding: var(--pm__20);text-align: center;}
#learn .in .figure{padding-bottom: 100%;border-radius: 0.1rem;}
#learn .in .pic{transition: 0.5s;}
#learn .in:hover .pic{margin: -0.15rem;}
#learn .in h3{margin: 0.1rem 0;font-size: var(--font-size__18);font-weight: var(--font-weight__m);transition: 0.5s;}
#learn .in:hover h3{transform: translateY(0.25rem);}
#learn .in p{font-size: var(--font-size__14);font-weight: var(--font-weight__l);transition: 0.5s;white-space: normal;
}
#learn .in:hover p{opacity: 0;transform: translateY(0.2rem);}
#learn .all-more{margin-top: calc(40 / 960 * 100vh);}
@media (max-width:750px) {
   #learn .item{width: 1.7rem;margin: 0 0.1rem}
   #learn .mq3k{margin-left: -3vw;width:100vw;}
}

.right-fixed{position: fixed;right: 3%; pointer-events: none;top: 0;height: 100%;z-index: 99;}
.follow-us li{position: relative;z-index: 20;pointer-events: auto;cursor: pointer;}
.follow-us li .hover-code{position: absolute; background-color: var(--black-color); padding: 0.05rem;width: 1.2rem; border: 1px dashed var(--white-color); opacity: 0; visibility: hidden; transition: 0.3s;}
.follow-us li.active .hover-code{opacity: 1; visibility: visible;}
.follow-us li .hover-code:after{content: '';display: block;position: absolute;border: 5px solid transparent;}
.right-fixed .follow-us li:not(:last-child){margin-bottom: 0.06rem;}
.right-fixed .follow-us li .hover-code{right: calc(100% + 0.1rem); top: 50%; transform: translateY(-50%) translateX(-0.3rem);}
.right-fixed .follow-us li .hover-code:after{border-left-color: var(--white-color); left: 100%;top:50%;margin-top: -5px;}
.right-fixed .follow-us li.active .hover-code{ transform: translateY(-50%) translateX(0);}
.right-fixed .follow-us li .back-top,
.right-fixed .follow-us li .ico{	width: 0.44rem; height: 0.44rem; background-color: #333333;border-radius: 50%;cursor: pointer; transition: 0.3s;}
.right-fixed .follow-us li .ico{display: flex;align-items: center;justify-content: center;}
.right-fixed .follow-us li .ico img{max-height: 40%;max-width:60%;}
.right-fixed .follow-us li .back-top:hover,
.right-fixed .follow-us li .ico:hover{background-color: var(--primary-color);}
.right-fixed .follow-us li .back-top{background-image: url(../images/gettop.svg); background-position: center center;background-repeat: no-repeat; background-size: auto 0.09rem;display: block;}
.home-body #back-top{display: none;}

@media (max-width:1024px) {
   .right-fixed{align-items: flex-end; padding-bottom: 0.2rem;}
}

#about .bg{background: url(../images/about-bg.jpg) var(--bg-cover);color: var(--white-color);font-weight: var(--font-weight__l);}
#about .follow-us li .hover-code{ bottom: calc(100% + 0.1rem);left: 50%;transform: translateX(-50%) translateY(-0.3rem);}
#about .follow-us li.active .hover-code{transform: translateX(-50%) translateY(0);}
#about .follow-us li .hover-code:after{border-top-color: var(--white-color); top: 100%;left: 50%;margin-left: -5px;}
#about .inside{width: 100%;}
#about .left .figure{padding-bottom: calc(614 / 920 * 100%);border-radius: 0.14rem;}
#about .logo{margin: 0.2rem 0 0.25rem 0;}
#about .logo img{height: 0.77rem;}
#about .slogan h3{margin: 0 0 0.32rem 0;font-weight: var(--font-weight__l);font-size: var(--font-size__24);}
#about .slogan pre{font-size: var(--font-size__18); line-height: calc(34 / 18);}
#about .all-more{margin-top: 0.42rem;}
#about .bottom{padding-bottom: var(--pm__40);}
#about .bottom p{font-size: var(--font-size__18); margin-bottom:.2rem;}
#about .bottom li:not(:last-child){margin-right: 0.24rem;}
#about .bottom li .ico img{height: 0.3rem; min-width: 0.3rem;}
@media (min-width:751px) {
#about .left{width: calc(920 / var(--max-width) * 100%);}
#about .right{width: calc(420 / var(--max-width) * 100%);}
}
@media (max-width:750px) {
   #about .bottom{display: flex;align-items: center; margin-top: var(--pm__30);}
}

#events .swiper{width:100%;height: 100%;}
#events .txt{padding-bottom: calc(117 / 960 * 100vh); background-color: rgba(var(--black-color__rgb), 0.2);}
#events .figure{height: 100%;}
#events .txt .img-text img{width: 5.45rem;}
#events .all-more{margin-top: calc(58 / 960 * 100vh);}
#events .all-more a{padding: 0 0.48rem;}
#events .pages{position:absolute;width:100%;display:flex;align-items:center;justify-content:center; z-index:10;left:0;bottom:3%;}
#events .pages span{margin:0 0.1rem; background:var(--white-color)}
#events .pages span[class*=active]{background:var(--primary-color)}
@media (max-width:750px) {
   #events .txt .img-text{max-width: 60%;margin: 0 auto;}
}

#awards .txt{padding-bottom: calc(117 / 960 * 100vh); background-color: rgba(var(--black-color__rgb), 0.2);}
#awards .figure{height: 100%;}
#awards .txt .img-text img{width: 5.45rem;}
#awards .all-more{margin-top: calc(58 / 960 * 100vh);}
#awards .all-more a{padding: 0 0.48rem;}
@media (max-width:750px) {
   #awards .txt .img-text{max-width: 60%;margin: 0 auto;}
}

#design-company .home-tit{margin-bottom: var(--pm__30);}
#design-company .swiper-main{ overflow: hidden; height:calc(590 / 960 * 100vh); position: relative;z-index: 1; width: calc(100% + 0.2rem);padding-right: 0.2rem;}
#design-company .swiper-main:after{content: '';display: block;position: absolute; left: 0;width: 100%; height: 0.5rem;background: linear-gradient(to bottom,transparent 0%,var(--white-color) 100%); bottom: 0;z-index: 10; }
#design-company .swiper{overflow: initial;}
#design-company .swiper{height: calc(1.71rem * 3);}
#design-company .swiper-slide{height: 1.71rem;}
#design-company .inside{border-bottom: 1px dashed rgba(var(--black-color__rgb), 0.16);height: 100%;}
#design-company .txt{width: 1.68rem;flex-shrink: 0;font-weight: var(--font-weight__l);font-size: var(--font-size__18);line-height: calc(28 / 18);}
#design-company .txt p{margin: 0;}
#design-company .txt h3{font-size: var(--font-size__18);margin: 0;}
#design-company .txt p.en{font-size: var(--font-size__14); line-height: 2; margin-top: 0.12rem;}
#design-company .imgs-group{flex: 1;}
#design-company .imgs-group [data-items]{--itemmr:0.18rem;--itemnum:5;}
#design-company .img{background-color: #f8f8f8; border-radius: 0.1rem; height: 100%;display: flex;align-items: center;justify-content: center; transition: 0.3s;}
#design-company .img:hover{background: rgba(var(--primary-color__rgb), 0.05);}
#design-company .img-item{margin-bottom: 0;height: 1.3rem;}
#design-company .img{position: relative;z-index: 1;}
#design-company .img:after{position: absolute; content: '';--wh:0; left: var(--wh);top: var(--wh);right: var(--wh);bottom: var(--wh); border: 2px solid var(--primary-color);border-radius: 0.1rem; opacity: 0; transition: 0.3s;}
#design-company .img:hover:after{--wh:-0.1rem;opacity: 1;}
#design-company .img img{mix-blend-mode: multiply; max-width: 80%;max-height: 60%;} 
@media (max-width: 750px) {
   #design-company .txt{width: 1.2rem;}
   #design-company .imgs-group [data-items]{--itemnum:3}
   #design-company .img-item:nth-child(3) ~ .img-item{margin-top: var(--itemmr);}
   #design-company .img-item{height: 0.5rem;}
}

#footer .bg{background-color: var(--black-color);}

.fixed-nav{position: fixed;left: 3%; pointer-events: none;z-index: 99;}
#fixed-nav.white{filter: brightness(0) invert(1);}
#fixed-nav li{pointer-events: auto;	width: 0.04rem; height: 0.04rem; background-color: #999999; position: relative; border-radius: 50%;cursor: pointer;}
#fixed-nav li:before{content: '';display: block;position: absolute; left: 50%;top: 50%;margin: -0.1rem 0 0 -0.1rem; width: 0.2rem; height: 0.2rem;background: url(../images/sidebar-on.svg) var(--bg-contain); opacity: 0; transition: 0.3s; transform: scale(0);}
#fixed-nav li.active{background-color: transparent;}
#fixed-nav li.active:before{opacity: 1;transform: scale(1);}

@media (min-width:751px) {
.fixed-nav{height: 100%;top: 0;}
#fixed-nav li +li{margin-top: var(--pm__30);}
}
@media (max-width: 750px) {
.fixed-nav{width: 100%;bottom: 0.2rem;justify-content: flex-start;}
#fixed-nav{display: flex;align-items: center;}
#fixed-nav li{margin: 0 0.1rem;}
}