article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary

{display:block}

audio,canvas,video

{display:inline-block;*display:inline;*zoom:1}

audio:not([controls])

{display:none;height:0}

[hidden]

{display:none}

html

{font-size:100%;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}

html,button,input,select,textarea

{font-family:sans-serif}

body

{margin:0}

a:focus

{outline:thin dotted}

a:active,a:hover

{outline:0}

h1

{font-size:2em;margin:.67em 0}

h2

{font-size:1.5em;margin:.83em 0}

h3

{font-size:1.17em;margin:1em 0}

h4

{font-size:1em;margin:1.33em 0}

h5

{font-size:.83em;margin:1.67em 0}

h6

{font-size:.67em;margin:2.33em 0}

abbr[title]

{border-bottom:1px dotted}

b,strong

{font-weight:700}

blockquote

{margin:1em 40px}

dfn

{font-style:italic}

hr

{-moz-box-sizing:content-box;box-sizing:content-box;height:0}

mark

{background:#ff0;color:#000}

p,pre

{margin:1em 0}

code,kbd,pre,samp

{font-family:monospace,serif;_font-family:'courier new',monospace;font-size:1em}

pre

{white-space:pre;white-space:pre-wrap;word-wrap:break-word}

q

{quotes:none}

q:before,q:after

{content:'';content:none}

small

{font-size:80%}

sub,sup

{font-size:75%;line-height:0;position:relative;vertical-align:baseline}

sup

{top:-.5em}

sub

{bottom:-.25em}

dl,menu,ol,ul

{margin:1em 0}

dd

{margin:0 0 0 40px}

menu,ol,ul

{padding:0 0 0 40px}

nav ul,nav ol

{list-style:none;list-style-image:none}

img

{border:0;-ms-interpolation-mode:bicubic}

svg:not(:root)

{overflow:hidden}

figure

{margin:0}

form

{margin:0}

fieldset

{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}

legend

{border:0;padding:0;white-space:normal;*margin-left:-7px}

button,input,select,textarea

{font-size:100%;margin:0;vertical-align:baseline;*vertical-align:middle}

button,input

{line-height:normal}

button,select

{text-transform:none}

button,html input[type=button],input[type=reset],input[type=submit]

{-webkit-appearance:button;cursor:pointer;*overflow:visible}

button[disabled],html input[disabled]

{cursor:default}

input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0;*height:13px;*width:13px}

input[type=search]

{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}

input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration

{-webkit-appearance:none}

button::-moz-focus-inner,input::-moz-focus-inner

{border:0;padding:0}

textarea

{overflow:auto;vertical-align:top}

table

{border-collapse:collapse;border-spacing:0}

a

{text-decoration:none}

img

{display:block}

ul,li

{list-style:none;margin:0;padding:0}



html {

    width: 100%;

    height: 100%;

    box-sizing: border-box;

}



body {

    margin: 0;

    padding: 0;

    background-color: #FFFFFF;

    color: black;

    font-size: 16px;

    width: 100%;

    height: 100%;

    font-family: Microsoft YaHei;

    font-weight: 400;

    /* 全局颜色变量 */

    --main: #3662EC;

    --main75: #3662EC73;

    --white: #FFFFFF;

    --light: #F7F7F7;

    --black: #000000;

    --black75: #000000BF;

    --black45: #00000073;

    --black15: #00000026;

}



.anchor {

  display: block;

  width: 0.1px;

  height: 0.1px;

  position: relative;

  top: -120px;

}



/* 颜色 */

.color-main {

  color: var(--main);

}



.color-main-light {

  color: var(--main75);

}



.color-bg-main {

  background-color: var(--main);

}



.color-bg-main-light {

  background-color: var(--main75);

}



.color-white {

  color: var(--white);

}



.color-bg-white {

  background-color: var(--white);

}



.color-light {

  color: var(--light);

}



.color-bg-light {

  background-color: var(--light);

}



.color-black {

  color: var(--black);

}



.color-bg-black {

  background-color: var(--black);

}



.color-black75 {

  color: var(--black75);

}



.color-bg-black75 {

  background-color: var(--black75);

}



.color-black45 {

  color: var(--black45);

}



.color-bg-black45 {

  background-color: var(--black45);

}



.color-black15 {

  color: var(--black15);

}



.color-bg-black15 {

  background-color: var(--black15);

}



/* 阴影 */

.shadow {

  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2)!important;

}



/* 定位 */

.position-absolute {

  position: absolute;

}

.position-fixed {

  position: fixed;

}

.position-relative {

  position: relative;

}

.left-0 {

  left: 0;

}

.top-0{

  top: 0;

}

.bottom-0{

  bottom: 0;

}

.right-0{

  right: 0;

}



/* 宽高 */

.w-100{ width: 100%; }

.h-100{ height: 100%; }

.container {

  width: 1200px;

}



/* 字体 从大到小 */

.font-home-big {

  font-size: 50px;

  font-weight: bold!important;

}

.font-title-big {

  font-size: 40px;

}

.font-title {

  font-size: 30px;

}

.font {

  font-size: 16px;

}

.font-md {

  font-size: 14px;

}

.font-sm {

  font-size: 12px;

}





.font-weight {

  font-weight: bold!important;

}

.text-center {

  text-align: center;

}

.text-left {

  text-align: left;

}

.text-right {

  text-align: right;

}



/* flex布局 */

.d-flex{ display: flex; }

.d-block{ display: block; }

.d-inline-block{ display: inline-block; }

.d-none{ display: none; }



.flex-1{ flex: 1; }

.flex-column{ flex-direction: column; }

.flex-row{ flex-direction: row; }

.flex-wrap{ flex-wrap: wrap; }

.flex-nowrap{ flex-wrap: nowrap; }

.flex-shrink{flex-shrink: 0;}

.j-start{ justify-content: flex-start; }

.j-center{ justify-content: center; }

.j-end{ justify-content: flex-end; }

.j-sb{ justify-content: space-between; }

.j-sa{ justify-content: space-around; }

.a-center{ align-items:center; }

.a-start{ align-items: flex-start; }

.a-end{ align-items:flex-end; }

.a-stretch{ align-items: stretch; }

.a-self-start{ align-self: flex-start; }

.a-self-auto{ align-self: auto; }

.a-self-end{ align-self: flex-end; }

.a-self-stretch{ align-self:stretch; }

.a-self-baseline{ align-self:baseline; }



/* Border */

.border{  border-width: 1px; border-style: solid; border-color: var(--borderColor);}

.border-top{ border-top-width: 1px; border-top-style: solid; border-top-color: var(--borderColor); }

.border-right{ border-right-width: 1px; border-right-style: solid; border-right-color: var(--borderColor);}

.border-bottom{ border-bottom-width: 1px;border-bottom-style: solid;border-bottom-color:var(--borderColor);}

.border-left{ border-left-width: 1px;border-left-style: solid;border-left-color:var(--borderColor);}



.border-0{ border-width: 0; }

.border-top-0{ border-top-width: 0; }

.border-right-0{ border-right-width: 0; }

.border-bottom-0{ border-bottom-width: 0; }

.border-left-0{ border-left-width: 0; }



.rounded{ border-radius: 8px; }

.rounded-circle{ border-radius:100%; }

.rounded-0{ border-radius:0; }



/* Spacing */

.m-0-auto {

  margin: 0 auto;

}

.m-0 { margin-left: 0;margin-right: 0;margin-top: 0;margin-bottom: 0;}

.m { margin-left: 5px;margin-right: 5px;margin-top: 5px;margin-bottom: 5px;}

.m-1 { margin-left: 10px;margin-right: 10px;margin-top: 10px;margin-bottom: 10px;}

.m-2 { margin-left: 20px;margin-right: 20px;margin-top: 20px;margin-bottom: 20px;}

.m-3 { margin-left: 30px;margin-right: 30px;margin-top: 30px;margin-bottom: 30px;}

.m-4 { margin-left: 40px;margin-right: 40px;margin-top: 40px;margin-bottom: 40px;}

.m-5 { margin-left: 50px;margin-right: 50px;margin-top: 50px;margin-bottom: 50px;}



.mx-0 { margin-left: 0;margin-right: 0;}

.mx { margin-left: 5px;margin-right: 5px;}

.mx-1 { margin-left: 10px;margin-right: 10px;}

.mx-2 { margin-left: 20px;margin-right: 20px;}

.mx-3 { margin-left: 30px;margin-right: 30px;}

.mx-4 { margin-left: 40px;margin-right: 40px;}

.mx-5 { margin-left: 50px;margin-right: 50px;}



.my-0 { margin-top: 0;margin-bottom: 0;}

.my { margin-top: 5px;margin-bottom: 5px;}

.my-1 { margin-top: 10px;margin-bottom: 10px;}

.my-2 { margin-top: 20px;margin-bottom: 20px;}

.my-3 { margin-top: 30px;margin-bottom: 30px;}

.my-4 { margin-top: 40px;margin-bottom: 40px;}

.my-5 { margin-top: 50px;margin-bottom: 50px;}



.mt-0 { margin-top: 0;}

.mt { margin-top: 5px;}

.mt-auto { margin-top: auto;}

.mt-1 { margin-top: 10px;}

.mt-2 { margin-top: 20px;}

.mt-3 { margin-top: 30px;}

.mt-4 { margin-top: 40px;}

.mt-5 { margin-top: 50px;}



.mb-0 { margin-bottom: 0;}

.mb { margin-bottom: 5px;}

.mb-auto { margin-bottom: auto;}

.mb-1 { margin-bottom: 10px;}

.mb-2 { margin-bottom: 20px;}

.mb-3 { margin-bottom: 30px;}

.mb-4 { margin-bottom: 40px;}

.mb-5 { margin-bottom: 50px;}



.ml-0 { margin-left: 0;}

.ml { margin-left: 5px;}

.ml-auto { margin-left: auto;}

.ml-1 { margin-left: 10px;}

.ml-2 { margin-left: 20px;}

.ml-3 { margin-left: 30px;}

.ml-4 { margin-left: 40px;}

.ml-5 { margin-left: 50px;}



.mr-0 { margin-right: 0;}

.mr { margin-right: 5px;}

.mr-1 { margin-right: 10px;}

.mr-2 { margin-right: 20px;}

.mr-3 { margin-right: 30px;}

.mr-4 { margin-right: 40px;}

.mr-5 { margin-right: 50px;}



.p-0 {padding-left: 0;padding-right: 0;padding-top: 0;padding-bottom: 0;}

.p {padding-left: 5px;padding-right: 5px;padding-top: 5px;padding-bottom:5px;}

.p-1 {padding-left: 10px;padding-right: 10px;padding-top: 10px;padding-bottom: 10px;}

.p-2 {padding-left: 20px;padding-right: 20px;padding-top: 20px;padding-bottom: 20px;}

.p-3 {padding-left: 30px;padding-right: 30px;padding-top: 30px;padding-bottom: 30px;}

.p-4 {padding-left: 40px;padding-right: 40px;padding-top: 40px;padding-bottom: 40px;}

.p-5 {padding-left: 50px;padding-right: 50px;padding-top: 50px;padding-bottom: 50px;}



.px-0 { padding-left: 0;padding-right: 0;}

.px { padding-left: 5px;padding-right: 5px;}

.px-1 { padding-left: 10px;padding-right: 10px;}

.px-2 { padding-left: 20px;padding-right: 20px;}

.px-3 { padding-left: 30px;padding-right: 30px;}

.px-4 { padding-left: 40px;padding-right: 40px;}

.px-5 { padding-left: 50px;padding-right: 50px;}



.py-0 { padding-top: 0;padding-bottom: 0;}

.py { padding-top: 5px;padding-bottom: 5px;}

.py-1 { padding-top: 10px;padding-bottom: 10px;}

.py-2 { padding-top: 20px;padding-bottom: 20px;}

.py-3 { padding-top: 30px;padding-bottom: 30px;}

.py-4 { padding-top: 40px;padding-bottom: 40px;}

.py-5 { padding-top: 50px;padding-bottom: 50px;}



.pt-0 { padding-top: 0;}

.pt { padding-top: 5px;}

.pt-1 { padding-top: 10px;}

.pt-2 { padding-top: 20px;}

.pt-3 { padding-top: 30px;}

.pt-4 { padding-top: 40px;}

.pt-5 { padding-top: 50px;}



.pb-0 { padding-bottom: 0;}

.pb { padding-bottom: 5px;}

.pb-1 { padding-bottom: 10px;}

.pb-2 { padding-bottom: 20px;}

.pb-3 { padding-bottom: 30px;}

.pb-4 { padding-bottom: 40px;}

.pb-5 { padding-bottom: 50px;}



.pl-0 { padding-left: 0;}

.pl { padding-left: 5px;}

.pl-1 { padding-left: 10px;}

.pl-2 { padding-left: 20px;}

.pl-3 { padding-left: 30px;}

.pl-4 { padding-left: 40px;}

.pl-5 { padding-left: 50px;}



.pr-0 { padding-right: 0;}

.pr { padding-right: 5px;}

.pr-1 { padding-right: 10px;}

.pr-2 { padding-right: 20px;}

.pr-3 { padding-right: 30px;}

.pr-4 { padding-right: 40px;}

.pr-5 { padding-right: 50px;}



.cursor-default {

  cursor: default !important;

}



.header-holder {

  width: 100%;

  height: 120px;

}



.hidden-pc {

  display: none !important;

}



.hidden-m {

  display: flex !important;

}



/* 头部样式 */

.header {

  width: 100%;

  height: 120px;

  position: fixed;

  top: 0;

  left: 0;

  z-index: 100;

  transition: background-color 0.3s ease;

  /* position: sticky;

  top: 0; */

}



.header-warp {

  width: 1200px;

  height: 120px;

  margin: 0 auto;

}



.sticky {

  background-color: var(--main);

  color: var(--white);

  transition: background-color 0.3s ease;

}



.sticky .logo a img {

  content: url("../images/logo2.png");

}



.sticky .stock {

  color: var(--white);

}



.sticky .darrow {

  content: url("../images/icon_arrow_down2.png");

}



.sticky .langicon {

  content: url("../images/icon_lang2.png");

}



.sticky .menu-item > a {

  color: var(--white);

}



/* .sticky .menu-item > a:hover {

  color: var(--black);

}



.sticky .menu-item:hover {

  color: var(--black);

}



.sticky .lang:hover {

  color: var(--black);

} */



.sticky .toggle-button i {

  background: var(--white);

}



.logo {

  width: 160px;

  height: 50px;

}



.vline {

  width: 1px;

  height: 50px;

  margin: 0 16px;

}



.menu {

  height: 37px;

}



.menu-item {

  margin: 8px 16px;

  position: relative;

}



.menu-item a {

  color: var(--black);

}



.menu-item a:hover {

  cursor: pointer;

  /* color: var(--main); */

}



.menu-item:hover {

  cursor: pointer;

  /* color: var(--main); */

}



.menu-item:hover > .darrow {

  transition: all 0.3s ease;

  transform: rotate(180deg);

}



.menu-item:nth-child(2):hover .products {

  display: block;

}



.menu-item:nth-child(3):hover .solutions {

  display: block;

}



.products {

  position: absolute;

  width: 85px;

  top: 0;

  left: 0px;

  z-index: 10;

}



.product-warp {

  width: 145px;

  margin-top: 37px;

  margin-left: -90px;

  background-color: #FFFFFF;

  box-shadow: 0px 4px 16px 0px rgba(0,0,0,0.16);

  border-radius: 16px 16px 16px 16px;

  padding: 40px 32px;

}



.product-item {

  margin-bottom: 24px;

}



.product-item a:hover {

  cursor: pointer;

}



.product-item a:hover > .arrow {

  opacity: 1;

  margin-left: 6px;

}



.product-item:last-child {

  margin-bottom: 0;

}



.solutions {

  position: absolute;

  width: 85px;

  top: 0;

  left: 0;

  z-index: 10;

}



.solution-warp {

  width: 670px;

  margin-top: 37px;

  margin-left: -300px;

  background-color: #fff;

  box-shadow: 0px 4px 16px 0px rgba(0,0,0,0.16);

  border-radius: 16px 16px 16px 16px;

  padding: 40px 32px;

}



.solution-item {

  height: 60px;

}



.solution-item a:hover {

  cursor: pointer;

}



.solution-item a:hover > .arrow {

  opacity: 1;

  margin-left: 6px;

}



.solution-hint:hover {

  cursor: default;

}



.lang {

  position: relative;

}



.lang:hover > .darrow {

  transition: all 0.3s ease;

  transform: rotate(180deg);

}



.lang:hover {

  cursor: pointer;

  /* color: var(--main); */

}



.lang:hover .langs {

  display: block;

}



.langs {

  position: absolute;

  width: 120px;

  top: 0;

  left: 0;

  z-index: 10;

}



.lang-warp {

  width: 110%;

  margin-top: 37px;

  margin-left: -40px;

  background-color: #fff;

  box-shadow: 0px 4px 16px 0px rgba(0,0,0,0.16);

  border-radius: 16px 16px 16px 16px;

  padding: 20px 16px;

}



.lang-item {

  margin-bottom: 25px;

}



.lang-item:last-child {

  margin-bottom: 5px;

}



.lang-item a:hover {

  cursor: pointer;

}



.lang-item a:hover > .arrow {

  opacity: 1;

  margin-left: 6px;

}



.arrow {

  width: 24px;

  height: 24px;

  opacity: 0;

  margin-left: 0px;

  transition: opacity 0.3s, margin-left 0.3s;

}



/* Footer */



.footer {

  width: 100%;

  background-color: var(--light);

}



.footer-wrap {

  width: 1200px;

  padding: 80px 0;

  box-sizing: border-box;

  margin: 0 auto;

}



.footer-left {

  display: flex;

  flex-direction: row;

  justify-content: space-between;

  align-items: flex-start;

}



.footer-links {

  margin-right: 30px;

}



.footer-link-title {

  margin: 0 0 36px 0;

}



.footer-link {

  margin-bottom: 16px;

}



.footer-link a{

  color: var(--black);

}



.footer-link:hover{

  cursor: pointer;

}



.footer-link:hover a{

  color: var(--main);

}



.vline2 {

  width: 1px;

  height: 200px;

  background-color: var(--black15);

}



.footer-right {

  display: flex;

  flex-direction: row;

  justify-content: space-between;

  align-items: flex-start;

}



.footer-copyright {

  width: 100%;

  height: 80px;

  line-height: 80px;

  background-color: var(--light);

  text-align: center;

}



.footer-copyright a:hover {

  cursor: pointer;

  color: var(--main);

}



/* 移动端Header */

.header-toolbar {

  height: 42px;

  margin-right: 8px;

  white-space: nowrap;

}



.toggle-button {

  cursor: pointer;

  margin-right: -6px;

  padding: 11px 10px 7px;

  width: 22px;

}



.toggle-button i {

  background: var(--main);

  display: block;

  height: 3px;

  margin-bottom: 4px;

  width: 22px;

}



.nav-close {

  width: 32px;

  height: 36px;

  background-color: transparent;

  position: relative;

}



.nav-close::before {

  content: '';

  position: absolute;

  top: 50%;

  left: 50%;

  width: 28px;

  height: 4px;

  background-color: var(--main); 

  transform: translateX(-50%) translateY(-50%) rotate(45deg);

}



.nav-close::after {

  content: '';

  position: absolute;

  top: 50%;

  left: 50%;

  width: 28px;

  height: 4px;

  background-color: var(--main); 

  transform: translateX(-50%) translateY(-50%) rotate(-45deg);

}



.sticky .nav-close::before {

  background-color: var(--white);

}



.sticky .nav-close::after {

  background-color: var(--white);

}



#nav-layer {

  width: 100%;

  z-index: 500;

  background-color: transparent;

  position: fixed;

  left: 0px;

  top: 66px;

  right: 0;

  bottom: 0;

}



.nav-mask {

  width: 100%;

  height: 100%;

  background-color: rgba(0, 0, 0, 0.5);

}



.nav-menu {

  width: 100%;

  height: 100%;

  position: absolute;

  right: 0;

  top: 0;

  padding: 10px;

  box-sizing: border-box;

  background-color: var(--black75);

}



.nav-list {

  padding-top: 10px;

  padding-left: 0px;

  box-sizing: border-box;

  overflow: scroll;

}



.nav-item {

  font-size: 16px;

  padding: 10px 10px;

  color: var(--white);

  display: flex;

  flex-direction: row;

  justify-content: space-between;

  align-items: center;

}



.nav-item2 {

  font-size: 16px;

  padding: 10px 10px;

  color: var(--white);

  display: flex;

  flex-direction: column;

}



.nav-submenu a {

  display: block;

  padding: 10px 20px;

  color: var(--white);

}



.nav-item3 {

  font-size: 16px;

  padding: 10px 10px;

  color: var(--white);

  display: flex;

  flex-direction: row;

  justify-content: space-between;

  flex-wrap: wrap;

}



.nav-item3 > .nav-submenu {

  display: block;

  width: 33%;

  color: var(--white);

}



/* .nav-item > .darrow {



} */



.nav-item a {

  

  width: 100%;

  color: var(--white);

}



@media all and (max-width: 750px) {

  .hidden-m {

    display: none !important;

  }



  .hidden-pc {

    display: flex !important;

  }



  .header {

    height: 66px;

  }



  .anchor {

    top: -66px;

  }



  .header-warp {

    width: 100%;

    height: 66px;

    padding: 0 5px;

    box-sizing: border-box;

  }



  .header-holder {

    height: 66px;

  }



  .footer-wrap {

    width: 100%;

    padding: 20px 0;

    flex-direction: column;

  }



  .footer-left {

    justify-content: center;

  }



  .footer-right {

    justify-content: center;

    margin-top: 10px;

  }



  .footer-links {

    margin: 0 5px;

  }



  /* .footer-copyright {

    line-height: 30px;

  } */

}