
/* w3018 header start */
body {font-family: "Noto Sans SC", Arial;}
body * {font-family: "Noto Sans SC", Arial;}
.header{position: fixed;top: 0;left: 0;z-index: 128; width: 100%;background-color: #ffffff;}
.h-main{width: 100%;padding: 0 .4rem;}
.h-main:after{content:".";display:block;height:0;clear:both;visibility:hidden;line-height:0;font-size:0;}
.h-left{float: left; font-size: 0;}
.h-logo{display: inline-block;height: 1.2rem;line-height: 1.2rem;}
.h-logo img{height: .76rem;}

.h-right{float: right;font-size: 0;}
.h-lt{display: inline-block;vertical-align: middle;height: 1.2rem;margin-right: .4rem;padding-right: .1rem; border-right: 1px solid #e5e5e5;}
.h-top{width: 100%;padding-top: .25rem;text-align: right;padding-right: .25rem;}
.h-list{display: inline-block;vertical-align: middle;}
.h-link{display: inline-block;vertical-align: middle;cursor: pointer; margin-right: .2rem;}
.h-link img{max-width: 100%;height: 1.42em;}
.h-language{display: inline-block;vertical-align: middle;margin-right: .2rem; position: relative;}
.hl-tip{position: relative;z-index: 8;display: block;cursor: pointer;height: .4rem;line-height: .4rem; color: #333333;}
.hl-tip:before{content: '';display: inline-block;vertical-align: top;margin-right: .1rem; width: 1.28em;height: .4rem;background-image: url('/static/home/images/wm4.png');background-size: 100% auto;background-position: center center;background-repeat: no-repeat;}
.hl-tip:after{content: '';display: inline-block;vertical-align: top;margin-left: .1rem; width: .71em;height: .4rem;background-image: url('/static/home/images/wm5.png');background-size: 100% auto;background-position: center center;background-repeat: no-repeat;}
.hl-list{display: none;width: 6em; background-color: #fff;z-index: 88; position: absolute;left: 50%;top: 100%;transform: translate(-50% ,0); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);}
.hl-item{display: block;cursor: pointer; width: 100%;padding: 10px 5px; line-height:1.5;text-align: center; color: #666;transition: background-color .3s;}
.hl-item:hover {background-color: #00cae7; color: #fff;}

.h-bottom{display: inline-block;vertical-align: middle;}
.h-bottom .h-phone{display: none;}
.h-h{display: inline-block;vertical-align: middle;}
.h-i{display: inline-block;vertical-align: middle;position: relative; cursor: pointer; padding: 0 .25rem;}
.h-j{position: relative; display: inline-block;color: #333333;height: .55rem;font-weight: bold; line-height: .5rem; transition: all ease .5s;} 
.h-j:after{content: '';position: absolute;bottom: 0;left: 0; width: 0;overflow: hidden;height: .05rem; transition: all ease .5s;background-color: #00cae7;}
.h-i.active .h-j{color: #00cae7;}
.h-i:hover .h-j{color: #00cae7;} 
.h-sub {display: none; width: 2rem;  background-color: #fff; position: absolute;left: 50%;top:  100%;transform: translate(-50% ,0); z-index: 1000;box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);}
.h-item{display: block;width: 100%;position: relative;}
.h-one{position: relative; display: block;cursor: pointer;width: 100%;padding: 10px .2rem; line-height:1.4;  color: #333333; }
.h-item.has-two .h-one{padding-right: .5rem;}
.h-item.has-two .h-one:after{content: '>';position: absolute;top: 50%;right: 0;transform: translate(0,-50%); width: .5rem;text-align: center;}
.h-twobox{display: none; position: absolute;top: 0;right: -100%; width: 2rem; background-color: #fff; z-index: 1000;box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);}
.h-two{display: block;cursor: pointer;width: 100%;padding: 10px .2rem; line-height:1.4;  color: #333333; } 
.h-sub:hover{overflow: visible !important;}
.h-item:hover .h-twobox{display: block;} 

.h-phone{display: inline-block;vertical-align: middle;padding:  0 .3rem;line-height: .6rem;color: #ffffff;font-weight: bold; background-color: #00cae7;line-height: .6rem;}
.h-phone:before{content: '';display: inline-block;vertical-align: middle;margin-right: .2rem;width: .937em;height: 1.5em;background-image: url('/static/home/images/wm7.png'); background-size: 100% auto;background-position: center center;background-repeat: no-repeat;}

.h-menu {display: none; position: absolute;cursor: pointer; top: 0;right: 0;  width: 1rem;height: 1.2rem;background-image: url('/static/home/images/h-menu.png');background-size: 32px auto;background-position: center center;background-repeat: no-repeat;}
.h-opa {display: none;width: 100%;height: 100%;position: fixed;left: 0;top: 0;background-color: rgba(0, 0, 0, 0.5);z-index: 10;cursor: pointer;}
 

@media (min-width: 1200px) {  
    .h-item:hover .h-one{background-color: #00cae7;color: #fff;} 
    .h-two:hover{background-color: #00cae7;color: #fff;} 
    .h-i:hover .h-j:after{width: 100%;}
    .h-i.active .h-j:after{width: 100%;}

    .h-k{display: inline-block;vertical-align: middle;}
    .h-search{display: none;}
    .hs-a{display: block;position: relative;width: 2rem;background-color: #f7f7f7;border: solid 1px #dddddd;}
    .hs-form{width: 100%;}
    .hs-text{display: block;border: none;background-color: transparent; width: 100%;height: calc(.4rem - 2px);padding-left: .2rem;color: #333;}
    .hs-submit{position: absolute;top: 0;right: 0;display: block;border: none;background-color: transparent;cursor: pointer; width: .55rem;height: 100%;background-image: url('/static/home/images/wm6.png'); background-size: .15rem auto;background-position: center center;background-repeat: no-repeat;}

}

@media (max-width: 1200px) { 
    .h-main{width: 100%;padding-left: 10px;padding-right: 0; display: flex;} 
    .h-left{flex: 1;}
    .h-left img{height: auto;max-height: 90%;max-width: 90%;}
    .h-bottom{position: fixed; right: 0;top: 0;margin-right: 0; width: 260px; height: 100vh;overflow: auto; background-color: #fff;  z-index: 1000;transform: translate(100vw, 0);transition: transform .3s;}
    .h-h{width: 100%;}
    .h-i {width: 100%;padding: 0;margin: 0;height: auto;}
    .h-j {padding: 0;padding-left: 20px;height: 40px;line-height: 40px;font-size: 16px;} 
    .h-i.has-sub:after {content: "";background-image: url('/static/home/images/h-right.png');background-size:auto 12px ;background-position: center center;background-repeat: no-repeat; display: inline-block;width: 40px;height: 40px;line-height: 40px;text-align: center;position: absolute;right: 0;top: 0;font-size: 20px;color: #333;}
    .h-i.has-sub.show:after {background-image: url('/static/home/images/h-down.png');background-size:auto 14px ;}
    
    .h-sub {position: relative;top: 0;background-color: #fff;box-shadow: none;left: 0;transform: translate(0,0);width: 100%;}
    .h-one{text-align: left;padding-left: 40px;font-size: 14px;} 
    .h-one:after{display: none;}
    .h-twobox{display: block;position: relative;right: 0;width: 100%; padding-left: 60px;    box-shadow: none;} 

    .h-right{margin-right: 1rem;}
    .h-lt{padding-right: 0;margin-right: 0;border-right: none;}
    .h-language{margin-right: 15px;}
    .h-top{padding-top: 0;padding-right: 0;}
    .h-link{margin-right: 15px;}
    .hl-tip{height: 1.2rem;line-height: 1.2rem;}
    .hl-tip:before{height: 1.2rem;}
    .hl-tip:after{height: 1.2rem;}
    .h-k{display: inline-block;vertical-align: middle;}
    .h-search{position: relative;z-index: 8;display: block;cursor: pointer; width: 2em;height: 1.2rem;background-image: url('/static/home/images/wm6.png');background-size:   auto 1.42em;background-position: center center;background-repeat: no-repeat;}
    .hs-a{display: none;z-index: 108;white-space: nowrap; position: fixed;top: 2rem;left: 50%;transform: translate(-50%,0);}
    .hs-form{font-size: 0;display: inline-block;}
    .hs-text{border: none;padding: 0 .2rem; display: inline-block;vertical-align: middle; width: 5rem;height: 35px;background-color: #fff;color: #333;}
    .hs-submit{border: none;display: inline-block;vertical-align: middle;cursor: pointer; width: 35px;height: 35px; background-color: #00cae7;background-image: url('/static/home/images/wm6-b.png');background-size: 19px auto;background-position: center center;background-repeat: no-repeat;}
    header.hax-search .hs-a {display: block;}
    header.hax-search .h-opa {display: block;} 

    .h-menu{display: block;}
    .header.hax-menu .h-opa{display: block;}
    .header.hax-menu .h-bottom{transform: translate(0,0);} 
    .h-phone{display: none;}
    .h-bottom .h-phone{display: block;line-height: 40px;}
}

@media (max-width: 370px) { 
    .h-link{margin-right: 10px;}
    .h-link img{height: 1em;}
    .h-language{margin-right: 10px;}
    .h-search{width: 1.5em;background-size: auto 1em;}
}

/* w3018 header end */

/* w3018 底部 start */
.footer{width: 100%;background-color: #111111;}
.f-topbox{width: 100%;padding: .3rem 0; background-color: #00cae7;}
.f-form{width: 100%;}
.f-top{width: 15.2rem;margin:  0 auto;display: flex;align-items: center;flex-wrap: wrap;}
.f-lt{flex: 1;}
.f-titles{width: 100%;color: #ffffff;line-height: 1.35;font-weight: bold;}
.f-intro{width: 100%;color: #ffffff;line-height: 1.7;}
.f-rt{font-size: 0;}
.f-input{display: inline-block;vertical-align: middle;margin-right: .1rem; border: none;color: #333; width: 3rem;height: .6rem;padding: 0 .2rem;background-color: #ffffff;}
.f-submit{display: inline-block;vertical-align: middle;cursor: pointer; border: none;color: #ffffff;font-weight: bold;padding: 0 .1rem;	min-width: 1.2rem;height: .6rem;line-height: .6rem;text-align: center;background-color: #ffbf27;}
 
.f-bottom{width: 100%;padding-top: .65rem; padding-bottom: .43rem;}
.f-main{width: 15.2rem;margin: 0 auto;}
.f-cont{width: 100%;padding-bottom: .9rem;}
.f-cont:after{content:".";display:block;height:0;clear:both;visibility:hidden;line-height:0;font-size:0;}
.f-left{float: left;font-size: 0;width: 4rem;}
.f-logo{display: block;margin-bottom: .33rem; cursor: pointer;width: 2.71rem;}
.f-logo img{width: 100%;}
.f-synopsis{width: 100%; color: rgba(255,255,255,.6);line-height: 1.7;} 
 
.f-sharebox{width: 100%;font-size: 0;padding-top: .2rem;}
.f-share{display: inline-block;vertical-align: middle;cursor: pointer;position: relative;margin-top: .15rem;margin-right: .1rem;width: .4rem;}
.f-share>img{width: auto; height: 1.5em;}
.f-sub{display: none; position: absolute;bottom: 100%;left: 0;width: 1.5rem;min-width: 100px;padding-bottom: .15rem;}
.f-code img{width: 100%;}

.f-right{float: right;width: 9.8rem; font-size: 0;display: flex;justify-content: space-between;}
.f-item{display: block;max-width: 3.5rem; margin-top: .15rem;}
.f-one{display: block;margin-bottom: .2rem; width: 100%;color: #ffffff;font-weight: bold;line-height: 1.5;}
.f-twobox{display: inline-block;}
.f-two{display: block;margin-bottom: .12rem;cursor: pointer; color: rgba(255,255,255,.6);line-height: 1.7;}
.f-two:hover{color: #fff;}
.f-tr{width: 3.1rem;}
.f-td{width: 100%;position: relative; margin-bottom: .12rem;}
.f-icon{opacity: .6; position: absolute;top: 0;left: 0;width: 1.28em;height: 1.7em;line-height: 1.7em;}
.f-icon img{max-width: 100%;max-height: 1.57em;}
.f-text{width: 100%;padding-left: 1.9em; color: rgba(255,255,255,.6);line-height: 1.7;} 
.f-textbox{width: 100%;text-align: center;color: rgba(255,255,255,.6);line-height: 1.7;}

@media (max-width: 900px) {
    .f-top{width: 100%;max-width: 500px;padding-left: 10px;padding-right: 10px;}
    .f-lt{width: 100%;margin-bottom: 15px;}
    .f-rt{width: 100%;}
    .f-input{width: 100%;height: 32px;margin-right: 0;margin-bottom: 10px;}
    .f-submit{width: 100%;height: 32px;line-height: 32px;}
    .f-main{width: 100%;max-width: 500px;padding-left: 10px;padding-right: 10px;}
    .f-left{width: 100%;margin-bottom: 25px;}
    .f-share{width: 32px;margin-right: 10px;}
    .f-right{width: 100%;flex-wrap: wrap;}
    .f-item{width: 100%;max-width: 100%;}
    .f-twobox{width: 100%;}
    .f-two{display: inline-block;vertical-align: middle;padding-right: 15px;}
    .f-tr{width: 100%;}
}
/* w3018 底部 end */

/* w3018 文章页banner start */
.nanner { width: 100%; position: relative; }
.nanner .imgs { width: 100%; position: relative; overflow: hidden; }
.nanner .imgs .img { width: 100%; height: 4.2rem; }
.nanner .nox { position: absolute; z-index: 4; left: calc(200 / 1920 * 100%); top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); width: 80%; }
.nanner .nox .nit { width: 100%; color: #fff; font-weight: bold; line-height: 1.5; }
.nanner .nox .nim { width: 100%; color: #fff; font-weight: bold; line-height: 1.5; }
.product .nanner .nox .nit { color: #fff; }
.product .nanner .nox .nim { color: #fff; }
@media (max-width: 1540px) { .nanner .nox { left: 3%; width: 90%; } }
/* w3018 文章页banner end */

/* w3018 侧栏客服 start */
.rightnav {
  position: fixed;
  right: .4rem;
  bottom: 20%;
  width: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  width: .7rem;
  z-index: 188;
}

.rightnav .ritm {
  flex: 1;
  display: block;
  margin: .1rem 0;
  font-size: 0;
  position: relative;
  width: .7rem;
  height: .7rem;
  border-radius: .35rem;
  background-color: #f2f6f9;
  border: solid 1px #dddddd;
}

.rightnav .ritm a {
  display: block;
  white-space: nowrap;
  right: 0;
  font-size: 0;
  width: .7rem;
}

.rightnav .ritm .atom {
  display: inline-block;
  vertical-align: middle;
  width: .7rem;
  height: .7rem;
}

.rightnav .ritm .atom .img1 {
  width: 100%;
  display: block;
}

.rightnav .ritm .atom .img1 img {
  width: 100%;
}

.rightnav .ritm .atom .img2 {
  width: 100%;
  display: none;
}

.rightnav .ritm .atom .img2 img {
  width: 100%;
}

.rightnav .ritm .vm {
  display: inline-block;
  vertical-align: middle;
  color: #fff;
  width: auto;
  transition: all ease 0.5s;
  width: 0;
  overflow: hidden;
}

.rightnav .ritm.long {
  width: auto;
  background-color: #00cae7;
  border: solid 1px #00cae7;
}

.rightnav .ritm.long .img1 {
  display: none;
}

.rightnav .ritm.long .img2 {
  display: block;
}

.rightnav .ritm.long a {
  width: auto;
  overflow: auto;
}

.rightnav .ritm.long .vm {
  width: auto;
  display: inline-block;
  vertical-align: middle;
  padding-left: 0.05rem;
  padding-right: 0.3rem;
}

.rightnav .ritm+.ritm {
  margin-top: 1px;
}

@media (max-width: 900px) {
  .rightnav {
    right: 10px;
  }
}
/* w3018 侧栏客服 end */




