/* css 重置 */


@font-face {
  font-family: family;
  src: url("../fonts/moderat-regular.eot");
  src: local("☺"), url("../fonts/moderat-regular.woff") format("woff"), url("../fonts/moderat-regular.ttf") format("truetype"), url("../fonts/moderat-regular.svg") format("svg"); }


body,
p,
input,
h1,
h2,
h3,
h4,
h5,
h6,
ul,
li,
dl,
dt,
dd,
form {
  margin: 0;
  padding: 0;
  list-style: none;
  vertical-align: middle;
  font-weight: normal;
  font-family: "PingFang SC", "Source Han Sans SC", "HanHei SC",
    "Helvetica Neue", Helvetica, "Hiragino Sans GB", "Microsoft YaHei", 黑体,
    Arial, sans-serif;
}

.en{font-family:family,Tahoma,Geneva,sans-serif;}

img {
  border: 0;
  max-width:100%;
}

body {
  margin: 0;
  padding: 0;
  font-size: 14px;
  color: #000;
  text-align: left;
}

header,
section,
footer,
img {
  display: block;
  margin: 0;
  padding: 0;
}

a {
  text-decoration: none;
  color: var(--themaBlack);
}

a:hover {
  text-decoration: none;
}

li {
  list-style: none;
}

.clearfix {
  zoom: 1;
}

.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

* {
  box-sizing: border-box;
}

:root {
  --themabrown: #484848;
  --themaYellow: #fffbf0;
  --themaBlack: #444545;
  --themaFontBlack: #a1a1a1;
  --themaDeepBrown: #332c2b;
}
.supWidth {
  max-width: 1920px;
  margin: 0 auto;
}

.maxWidth {
  max-width: 1630px;
  padding: 0 15px;
  margin: 0 auto;
}
.rightPic p{
    font-size: 16px;
    margin: 5px 0;
}

.midWidth {
}

.smallWidth {
}


.supWidth,
.midWidth,
.smallWidth {
  position: relative;
  margin: 0 auto;
  padding: 0 15px;
}

.df {
  display: flex;
}

.banner {
  position: relative;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.dibm {
  display: inline-block;
  vertical-align: middle;
}

.dbcenter {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.navigator {
  width: 100%;
  margin: -100px auto 0;
  font-size: 0;
  text-align: center;
}

.navigator li {
  display: inline-block;
  margin: 0 16px;
}

.navigator li a {
  position: relative;
  display: block;
  padding: 0 2px;
  line-height: 40px;
  color: white;
  font-size: 16px;
  overflow: hidden;
}

.navigator li a::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 1px;
  left: -100%;
  bottom: 0;
  transition: all 0.4s;
  background-color: white;
}

.navigator li a:hover::after,
.navigator li a.on::after {
  left: 0%;
}


/* header-start */

header .menus{ position:absolute; right:15px; bottom:38px; display:none}

header .menus img{ height:25px;}

header .twoLink {
  margin-top: 25px;
}

header .twoLink a {
  font-size: 13px;
  color: var(--themaBlack);
}

header .tlogo {
  margin-top: 30px;
  margin-bottom: 55px;
  transition: all 0.4s;
}
header .tlogo img{height: 100px;}

header nav {
  margin: 0 auto 45px;
  text-align: center;
  transition: all 0.4s;
}

header nav li {
	text-transform:uppercase;
  display: inline-block;
  margin: 0 20px;
}

header nav li  a{ width:105px;}

header nav li font{ opacity:0; display:none}

header nav li:hover font{ opacity:1;display:block}

header nav li:hover span{ opacity:0;display:none}

header nav li a {
	font-weight:bold;
  position: relative;
  display: block;
  height: 35px;
  font-size: 16px;
  overflow: hidden;
  transition: all .4s;
  color: var(--themaBlack);
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
}
.header nav li a img{
  width: 22px;
  height: 22px;
  object-fit: contain;
}

header nav li a::after {
  content: "";
  position: absolute;
  bottom: 0px;
  left: -100%;
  width: 100%;
  height: 2px;
  transition: all .4s;
  background-color: transparent;
}

header nav li a:hover::after {
  left: 0;
  background-color: var(--themaBlack);
}

header .maxWidth{
  position: relative;
}
.search{ position: fixed; top:0; left: 0; background: #ffffff; width:100%; display:none;height:100%; z-index:1001}
.search .search-c .closess{ position:absolute; right:10vw; top:140px;}
.search .search-c .closess img{ width:30px;}
.search .search-c{ display:none; margin: 0 auto;max-width: 1530px;width:80%; z-index:2;background:#fff; padding-top:200px; padding-bottom:50px;}
.search .search-c .p1{ font-size:30px;}
.search .search-c .form{ position:relative; margin:2.5% 0;}
.search .search-c .submit{ position:absolute; top:15px; right:0; border:0; width:30px; height:30px;background:url(../images/submit.png) repeat; background-size:contain}
.search .search-c .text{ border-bottom:solid 1px #ccc; font-size:20px; padding:15px 0; border-top:0;border-left:0;border-right:0; display:block; width:100%;outline: none}
.search .search-c .container{-webkit-opacity:0; -moz-opacity:0; -ms-opacity:0; -o-opacity:0;opacity:0;-webkit-transition:all .3s ease-in-out;transition:all .3s ease-in-out}
.search.on .search-c .container{-webkit-opacity:1; -moz-opacity:1; -ms-opacity:1; -o-opacity:1;opacity:1;}
.search .search-c .form input[type=submit]{
  cursor: pointer;
}

/* header-end */

.line {
  height: 60px;
  margin-top: 27px;
  margin-bottom: 40px;
  border-bottom: 1px solid #f6f6f6;
  box-sizing: content-box;
}

.putImg {
  overflow: hidden;
}

.putImg img {
  max-width: 100%;
  transition: all 0.4s;
}

.putImg:hover img {
  /*transform: scale(1.1);*/
}



/* footer */

footer {
  padding-top: 100px;
  padding-bottom: 145px;
}

footer .top .left .p1 {
  margin-bottom: 45px;
  font-size: 30px;
}

footer .top .left p:not(.p1) {
  color: var(--themaFontBlack);
  font-size: 15px;
  line-height: 22px;
}

footer .top .left p:not(.p1) span{
  color: var(--themaBlack);
}

footer .top .left p:not(.p1) span a{
  color: var(--themaFontBlack);
  font-weight:normal
}




footer .btm {
  align-items: center;
}

footer .rightOtherLink a {
  display: inline-block;
  margin-left: 38px;
  vertical-align: middle;
}

footer .rightOtherLink a:not(:first-child):hover {
  text-decoration: underline;
}

footer .leftCopy {
  line-height: 22px;
  color: #979797;
}

footer .emailButton {
  display: block;
  max-width: 250px;
  line-height: 64px;
  margin: 65px 0 95px;
  color: #3f4040;
  text-align: center;
  border-radius: 50px;
  transition: all .6s;
  border: 2px solid #cdcdcd;
  background-color: transparent;
}

footer .emailButton img {
  margin-right: 22px;
  transition: all .6s;
  filter: brightness(100) invert(0);
}

footer .emailButton:hover {
  color: white;
  border-color: var(--themabrown);
  background-color: var(--themabrown);
}

footer .emailButton:hover img {
  filter: brightness(0) invert(1);
}

footer .right .flogo img {
  display: block;
  margin-right: 0;
  margin-left: auto;
  margin-top: 75px;
}

footer .twoQrCode .item {
  display: inline-block;
  margin-left: 26px;
  text-align: center;
  font-size: 14px;
  color: var(--themaBlack);
}

footer .twoQrCode .item p {
  line-height: 40px;
}

footer .twoQrCode .item img {
  display: block;
  max-width: 92px;
  padding: 10px;
  box-sizing: content-box;
  border: 1px solid #cfcfcf;
}

main.grey {
  background-color: #eeeeee;
}

.banner {
  height: 980px;
}

.banner .ctMain {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  color: white;
  line-height: 50px;
  transform: translate(-50%, -50%);
}

.banner .ctMain .b {
  font-size: 44px;
}

.banner .ctMain .s {
  font-size: 16px;
}

/* 返回按钮 */

.returnBtn {
  position: absolute;
  width: 162px;
  height: 55px;
  top: 76px;
  right: 100px;
  cursor: pointer;
  z-index: 9;
  line-height: 55px;
  border-radius: 30px;
  background-color: #cd121b;
}

.returnBtn img {
  display: block;
  margin-top: 20px;
  margin-left: 20px;
}

/* 菜单 */

.header__nav {
  display: flex;
  align-items: flex-start;
  position: fixed;
  top: 0;
  left: 0;
  width: calc(100vw - 168px);
  height: 100vh;
  padding: 12rem 0 10rem 4rem;
  background-color: #ededed;
  color: #333;
  z-index: -1;
  opacity: 0;
  pointer-events: none;
  transition: opacity 1s ease 0.8s;
  overflow: hidden;
  transform: translateZ(1px);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.header__nav__wrapper {
  scroll-behavior: smooth;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.header__nav__wrapper a {
  display: inline-block;
  padding: 0.8rem 0;
  font-size: 13.33333333vh;
  line-height: 0.93;
  letter-spacing: 0.01em;
  font-weight: 500;
  overflow: hidden;
  color: #333;
  transform: translateX(-3rem);
  opacity: 0;
  transition: 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0ms;
  transition-property: opacity, transform;
}

.header__nav__wrapper img {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  transform: translateX(2rem);
  height: auto;
  z-index: -1;
  -o-object-fit: cover;
  object-fit: cover;
}

.header__nav__wrapper img.portrait {
  width: 41.7rem;
  height: 56.7rem;
}

.header__nav__wrapper img[data-img-id="0"] {
  top: 0;
  right: 14.8rem;
}

.header__links {
  width: calc(100% - 8rem);
  display: flex;
  position: absolute;
  left: 4rem;
  bottom: 3rem;
  z-index: 9;
}

.header__links__item {
  font-size: 1.3rem;
  color: #a5a5a5;
}

.header__links a {
  color: #333;
  transition: color 0.2s linear;
}

.header__lang {
  margin-left: auto;
  display: flex;
  list-style: none;
}

.header__lang .lang-item {
  margin-left: 1rem;
  text-transform: uppercase;
}

.header__lang .lang-item a {
  color: #a5a5a5;
  font-size: 1.4rem;
}

.header__lang .lang-item.current-lang a,
.no-touchevents .header__lang .lang-item a:hover {
  color: #333;
}

.menu-open .header__nav {
  opacity: 1;
  pointer-events: all;
  transition-duration: 0.8s;
  transition-delay: 0.2s;
  z-index: 10;
}

.menu-open .header__nav__wrapper a {
  opacity: 1;
  transform: none;
  transition: 1s cubic-bezier(0.19, 1, 0.22, 1) 0ms;
}

.header__nav__wrapper a:first-of-type {
  transition-delay: 0.2s;
}

.header__nav img {
  opacity: 0;
  transform: translate(0px, 0px);
}

.flexBetween {
  display: flex;
  justify-content: space-between;
}


@media (max-width:1024px) {
.headerdiv{ height:291px !important}
}

@media (max-width:768px) {
footer{ padding:15% 0 20%;}
footer .top,footer .btm{ display:block}
footer .twoQrCode .item{ margin-left:0; margin-right:15px;}
footer .right .flogo img{ margin-left:0; margin-top:0}
footer .right .flogo{ padding:10% 0; overflow:hidden; display:block}
footer .emailButton{ margin:10% 0;}
footer .top .left .p1{ font-size:35px;}
footer .rightOtherLink a{ margin-left:0; margin-right:25px;}
footer .rightOtherLink{ margin-top:10%}
}


@media (max-width:640px) {
footer .top .left .p1{ font-size:28px;}
header nav{ display:none}
header .tlogo img{ height:50px;}
header .twoLink{ margin-bottom:30px;}
header .menus{ display:block;}
header .tlogo{ margin:30px 0 !important;}
.headerdiv{ height:140px !important;}
}


/* TODO: 新pc侧栏 */
.float-sidebar{
  width: 86px;
  background-color: rgba(0,0,0,0.6);
  backdrop-filter: blur(10px);
  position: fixed;
  right: 40px;
  border-radius: 43px;
  top: calc(50% - 154px);
  padding: 20px 0;
  z-index: 999;
}
.float-sidebar-item{
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-bottom: 25px;
}
.float-sidebar-item:last-of-type{
  margin-bottom: 0;
}
.float-sidebar-item-icon{
  width: 86px;
  height: 56px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.float-sidebar-item-icon-img{
  width: 35px;
  height: 35px;
  object-fit: contain;
}
.float-sidebar-item-title{
  width: 100%;
  text-align: center;
  font-size: 13px;
  color: #FFFFFF;
}

/* iPadPro, iPadAir, SurfacePro7 */
@media (max-width:1024px) and (min-width: 821px){
  .float-sidebar{
    width: 86px;
    background-color: rgba(0,0,0,0.6);
    backdrop-filter: blur(10px);
    position: fixed;
    right: 27px;
    border-radius: 43px;
    top: calc(50% - 154px);
    padding: 20px 0;
    z-index: 999;
  }
  .float-sidebar-item{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 25px;
  }
  .float-sidebar-item:last-of-type{
    margin-bottom: 0;
  }
  .float-sidebar-item-icon{
    width: 86px;
    height: 56px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }
  .float-sidebar-item-icon-img{
    width: 35px;
    height: 35px;
    object-fit: contain;
  }
  .float-sidebar-item-title{
    width: 100%;
    text-align: center;
    font-size: 13px;
    color: #FFFFFF;
  }
}

/* iPadMini */
@media (max-width:820px) and (min-width: 641px){
  .float-sidebar{
    width: 86px;
    background-color: rgba(0,0,0,0.6);
    backdrop-filter: blur(10px);
    position: fixed;
    right: 27px;
    border-radius: 43px;
    top: calc(50% - 154px);
    padding: 20px 0;
    z-index: 999;
  }
  .float-sidebar-item{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 25px;
  }
  .float-sidebar-item:last-of-type{
    margin-bottom: 0;
  }
  .float-sidebar-item-icon{
    width: 86px;
    height: 56px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }
  .float-sidebar-item-icon-img{
    width: 35px;
    height: 35px;
    object-fit: contain;
  }
  .float-sidebar-item-title{
    width: 100%;
    text-align: center;
    font-size: 13px;
    color: #FFFFFF;
  }
}

.titleWithResult{
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  border-bottom: #000000 solid 1px;
  padding-bottom: 60px;
}
.titleWithResult .result{
  text-align: left;
  font-size: 30px;
  padding-top: 17px;
}

/* 普通手机 */
@media (max-width:640px){
  .float-sidebar{
    width: 56px;
    background-color: rgba(0,0,0,0.6);
    backdrop-filter: blur(10px);
    position: fixed;
    right: 12px;
    border-radius: 28px;
    top: calc(50% - 105px);
    padding: 20px 0;
    z-index: 999;
  }
  .float-sidebar-item{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
  }
  .float-sidebar-item:last-of-type{
    margin-bottom: 0;
  }
  .float-sidebar-item-icon{
    width: 56px;
    height: 36px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }
  .float-sidebar-item-icon-img{
    width: 22px;
    height: 22px;
    object-fit: contain;
  }
  .float-sidebar-item-title{
    width: 100%;
    text-align: center;
    font-size: 10px;
    color: #FFFFFF;
  }
}