/*
* @description: PC
* @author: Senxia
* @update: 2018-06-19
*/

/* Fontfamily */
@font-face{
    font-family: HelveticaBQ;
    src: url('../fonts/HelveticaBQ-UltraLight.ttf'),url('../fonts/HelveticaBQ-UltraLight.svg'),url('../fonts/HelveticaBQ-UltraLight.woff'),url('../fonts/HelveticaBQ-UltraLight.woff2'),
        url('../fonts/HelveticaBQ-UltraLight.eot'); /* IE9+ */
}

@font-face{
    font-family: Helvetica-Neue;
    src: url('../fonts/Helvetica Neue CE 35 Thin.ttf'),url('../fonts/Helvetica Neue CE 35 Thin.svg'),url('../fonts/Helvetica Neue CE 35 Thin.woff'),url('../fonts/Helvetica Neue CE 35 Thin.woff2'),
        url('../fonts/Helvetica Neue CE 35 Thin.eot'); /* IE9+ */
}

@font-face{
    font-family: Helvetica-45;
    src: url('../fonts/Helvetica LT 45 Light.ttf'),url('../fonts/Helvetica LT 45 Light.svg'),url('../fonts/Helvetica LT 45 Light.woff'),url('../fonts/Helvetica LT 45 Light.woff2'),
        url('../fonts/Helvetica LT 45 Light.eot'); /* IE9+ */
}

@font-face{
    font-family: Helvetica-45-Italic;
    src: url('../fonts/Helvetica LT 46 Light Italic.ttf'),url('../fonts/Helvetica LT 46 Light Italic.svg'),url('../fonts/Helvetica LT 46 Light Italic.woff'),url('../fonts/Helvetica LT 46 Light Italic.woff2'),
        url('../fonts/Helvetica LT 46 Light Italic.eot'); /* IE9+ */
}

@font-face {
    font-family: 'iconfont';  /* project id 811262 */
    src: url('//at.alicdn.com/t/font_811262_qydfkii5ut.eot');
    src: url('//at.alicdn.com/t/font_811262_qydfkii5ut.eot?#iefix') format('embedded-opentype'),
    url('//at.alicdn.com/t/font_811262_qydfkii5ut.woff') format('woff'),
    url('//at.alicdn.com/t/font_811262_qydfkii5ut.ttf') format('truetype'),
    url('//at.alicdn.com/t/font_811262_qydfkii5ut.svg#iconfont') format('svg');
  }

  

/* Fontfamily End */

/* Common */
body,html{ margin: 0; padding: 0; overflow-x: hidden; font-family: 'Helvetica-45',Arial, Helvetica, sans-serif}
body,IMG,ul,li,i,dd,ol,section,dl,dt,figure,nav{ list-style:none; margin:0; padding:0; border:0;}
i{ font-style:normal;}a{ text-decoration:none;}
h1,h2,h3,h4{display:inline-block;*display: inline;*zoom: 1; margin:0; padding:0; font-weight:100; font-size:100%;}
center{ font-size: 0.16rem;line-height: 2rem;}
/* Common End */

/* Header */
.header{ background: #fff; width: 100%; float: left; border-bottom: 1px solid #eee;  position: fixed; left: 0; top: -100%; z-index: 1000; transition: all 0.3s ease-in-out 0.2s}
.header .logo{ width: 2.35rem; float: left;}
.header .logo img{  width: 100%;}

/* 2018-09-22 修改 */
.nav-pc{ width: 100%; text-align: center; background: #000; display: block; font-size: 0; float: left; height: 0.88rem; position: fixed; z-index: 99999; top: 0; left: 0; box-sizing: border-box; padding: 0 0.3rem;}
.nav-pc .main{ position: relative; z-index: 99999; width: 100%; padding: 0 10%; box-sizing: border-box;}
.nav-pc .nav-product-pc{ float: left; margin-top: 0.3rem;}
.nav-pc .nav-product-pc i{ width: 0.33rem; height: 0.26rem; color: #fff; font-family: iconfont; font-size: 0.26rem; float: left;}
.nav-pc .nav-product-pc span{ float: left; font-size: 0.14rem; margin-left: 0.2rem; line-height: 0.26rem; color: #fff; text-transform: uppercase;}

.nav-pc .nav-so-pc{ float: left; margin-top: 0.3rem; margin-left: 0.4rem;}
.nav-pc .nav-so-pc i{ width: 0.33rem; height: 0.26rem; line-height: 0.28rem; color: #fff; font-family: iconfont; font-size: 0.16rem; float: left;}


.nav-pc .nav-logo-pc{ width: auto; display: inline-block; margin: 0.15rem 0 0 0; position: absolute; left: 50%; margin-left: -1rem; width: 2rem;}
.nav-pc .nav-logo-pc img{ width: 100%;}

.nav-pc .nav-menu-pc{ float: right;}
.nav-pc .nav-menu-pc .language{ height: 0.88rem; font-size: 0.14rem; float: left; width: 0.5rem; box-sizing: border-box; cursor: pointer; padding-top: 0; top: 0; position: absolute; right: 0;}
.nav-pc .nav-menu-pc .language a{ float: left}
.nav-pc .nav-menu-pc .language i{font-size: 0.26rem; font-family: "iconfont"; color: #fff; display: none; }
.nav-pc .nav-menu-pc .language span{ font-size: 0.24rem; line-height: 0.88rem; color: #fff; width: 100%; float: left;}

.nav-pc .nav-menu-pc a{ float: left; font-size: 0.14rem; color: #000; text-transform: uppercase;}
.nav-pc .nav-menu-pc .menu-icon{ height: 0.88rem; float: left; width: 0.6rem; box-sizing: border-box; cursor: pointer; padding-top: 0.13rem; margin-right: 0.3rem; }
.nav-pc .nav-menu-pc .menu-icon i{font-size: 0.36rem; font-family: "iconfont"; color: #fff; }
.nav-pc .nav-menu-pc .menu-icon span{ font-size: 0.12rem; color: #fff; width: 100%; float: left;}
.nav-pc .nav-menu-pc .menu-icon:hover{ opacity: 0.7;}
.nav-pc .brand span{ font-size: 0.14rem; color: #fff; display: block;}
.nav-pc .nav-menu-pc .brand{ float: left; height: 0.88rem; /*border-left: 1px solid #ccc;*/ padding-left: 0.4rem; }
.nav-pc .nav-menu-pc .brand a{ margin: 0.25rem 0.05rem 0.05rem; float: left; font-size: 0.36rem; font-family: "iconfont"; color: #fff; }
.nav-pc .nav-menu-pc .brand img{ height: 0.36rem}
.nav-pc .nav-menu-pc .brand span{ margin: 0.2rem 0.15rem 0.05rem 0.02rem; line-height: 0.24rem; letter-spacing: 0.01rem; float: left;}
.nav-pc .nav-menu-list-pc{ position: fixed; top: 0; left: 0; overflow: hidden; float: left; width: 100%; height: 0;}
.nav-pc .nav-menu-list-pc ul{ width: 100%; float: left; height: 100%; box-sizing: border-box; padding: 1.88rem 1rem 1rem;}
.nav-pc .nav-menu-list-pc li{ width: 25%; float: left; height: 100%; box-sizing: border-box; padding: 1px;}
.nav-pc .nav-menu-list-pc li a{ width: 100%; float: left; position: relative; display: table; height: 0; overflow: hidden; background: #fff; box-sizing: border-box; padding: 0 0.3rem; transition: all 0.3s ease-in-out; z-index: -1;}
.nav-pc .nav-menu-list-pc li a:before{ content:""; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 0;}
.nav-pc .nav-menu-list-pc li.nav-menu-list-pc-company a:before{background: url(../images/nav-pc-01.jpg) no-repeat center top / auto 100%;}
.nav-pc .nav-menu-list-pc li.nav-menu-list-pc-news a:before{background: url(../images/nav-pc-02.jpg) no-repeat center top / auto 100%;}
.nav-pc .nav-menu-list-pc li.nav-menu-list-pc-catalogues a:before{background: url(../images/nav-pc-03.jpg) no-repeat center top / auto 100%;}
.nav-pc .nav-menu-list-pc li.nav-menu-list-pc-contant a:before{background: url(../images/nav-pc-04.jpg) no-repeat center top / auto 100%;}
.nav-pc .nav-menu-list-pc li a .text{ display: table-cell; vertical-align:middle;}
.nav-pc .nav-menu-list-pc li a h3{ width: 100%; font-size: 0.24rem; overflow: hidden; height: 0; font-weight: bold; font-family: arial; display: inline-block; vertical-align: middle; color: #fff; text-transform: uppercase; position: relative; z-index: 1;}
.nav-pc .nav-menu-list-pc li a p{ width: 100%; font-size: 0.24rem; margin: 0 0; display: inline-block; height: 0; opacity: 0; overflow: hidden; vertical-align: middle; color: #fff; position: relative; z-index: 1;}
.nav-pc .nav-menu-list-pc li a:hover h3{ font-size: 0.2rem;}
.nav-pc .nav-menu-list-pc li a:hover p{ height: auto; opacity: 1; margin: 0.05rem 0;}
.nav-pc .nav-menu-list-pc li a:hover::before{ opacity: 0.7;}
.nav-pc.open .nav-menu-list-pc{ z-index: 1;}
.nav-pc.open .nav-menu-list-pc li a{ height: 100%; z-index: 1; }
.nav-pc.open .nav-menu-list-pc li a h3{ height: auto;}
.header{ display: none;}


/* Banner Video */
.videobg{ width: 100%; height: 100%; background: #000; position: absolute; top: 0; left: 0;}
.videobg video{ width: 100%; height: 100%;}
.jq22-container{ overflow: hidden;  transition: all 0.3s ease-in-out 0.2s}

/* Navigation */
.nav-c{ display: none;}
.nav{ width: 100%; float: left; box-sizing: border-box; padding: 0.3rem;}
.nav .nav_zt{ float: right;}
.nav .nav_zt li{ float: left; margin: 0 0.25rem; line-height: 0.46rem; position: relative;}
.nav .nav_zt li > a{ text-transform: uppercase; float: left; vertical-align: middle; color: #000; font-size: 0.16rem;}
.nav .nav_zt li > a img{ float: left; margin-top: 0.16rem;}

.nav .nav_zt li .list{ overflow: hidden; background: #ececec; width: 2rem; height: 0; position: absolute; top: 0.4rem; color: #000;}
.nav .nav_zt li .list a{ color: #000; width: 100%; float: left; font-size: 0.14rem; line-height: 0.18rem; box-sizing: border-box; padding: 0.05rem 0.07rem;}
.nav .nav_zt li .list a:hover{ background: #aaa;}
.nav .nav_zt li .list a.hover{ background: #666;}

.header .nav nav .logo{ display: none;}
.header .nav .nav_zt .iconlist,.header .nav nav .footer{ display: none;}
/* Navigation End */

.foot_nav{ width: 100%; float: left; display: none;}

/* --------------------------  横版 IPAD and Mini  -------------------------- */


@media (max-width:1024px) and (min-width:769px){
.nav-pc { padding-right: 0.2rem}
.nav-pc .main{ width: 100%; padding: 0 0 0 0; box-sizing: border-box;}
.nav-pc .nav-menu-pc{ float: right;}
.nav-pc .nav-menu-pc .language{ text-align: center; position: relative;}
.nav-pc .nav-menu-pc .language a{ width: 100%;}

.nav-pc .nav-menu-pc .menu-icon{ margin-right: 0rem; }
.nav-pc .nav-menu-pc .brand{ float: left; height: 0.88rem; /*border-left: 1px solid #ccc;*/ padding-left: 0.1rem; }
.nav-pc .nav-menu-pc .brand a{ margin: 0.25rem 0.05rem 0.05rem; float: left; font-size: 0.36rem; font-family: "iconfont"; color: #fff; }
.nav-pc .nav-menu-pc .brand img{ height: 0.36rem}
.nav-pc .nav-menu-pc .brand span{ margin: 0.2rem 0.1rem 0.05rem 0; line-height: 0.24rem; letter-spacing: 0.01rem; float: left;}




}

/* --------------------------  横版 IPAD and Mini END  -------------------------- */


/* --------------------------  竖版 IPAD and Mini  -------------------------- */

@media screen and (max-width: 768px) {

/* Navigation */
.nav-pc{ display: none;}
.header{ top: 0; display: block; background: #000; border: none;}
.header .logo{ width: auto; height: 0.4rem; float: left;}
.header .logo img{  width: auto; max-height: 100%;}
.header .nav{  padding: 0.25rem;}
.header .nav .logo{ width: auto; height: 0.4rem; float: left;}
.header .nav .logo img{  width: auto; max-height: 100%;}


.header .nav nav{position: fixed; right: 0; opacity: 0; padding: 10%; box-sizing: border-box; pointer-events:none; width: 100%; height: 100%; top: 0; transition: all 0.3s ease;}
.header .nav nav::after{ content: ""; right: 0; top: 0; background:rgba(0,0,0,0.5); opacity: 1; width: 100%; z-index: 99; height: 100%; float: left; position: absolute; z-index: -1;}
.header .nav nav .logo{ position: absolute; top: 0.25rem; left: 0.4rem; z-index: 99; margin: 10%; display: block;}
.header .nav nav .nav_zt{position: relative; box-sizing: border-box; float: left; width: 100%; height: 100%; background: #fff;}
.header .nav nav .nav_zt:before{ display: none;}
.header .nav nav .nav_zt li:first-child{ margin-top: 0.9rem !important; border-top: 1px solid #ddd;}
.header .nav nav .nav_zt li{ width: 100%; margin: 0; padding: 0; display: block; border-bottom: 1px solid #ddd; height: 0.6rem; }
.header .nav nav .nav_zt li > a{ color: rgba(0,0,0,0.8); font-size: 0.16rem; width: 100%; margin: 0; padding: 0 0 0 0.2rem; box-sizing: border-box; line-height: 0.6rem;}
.header .nav nav .nav_zt li > a i{ color: rgba(0,0,0,0.8); font-size: 0.22rem; font-family: iconfont; line-height: 0.6rem; width: 0.7rem; box-sizing: border-box; padding-left: 0.1rem; display: inline-block;}
.header .nav nav .nav_zt li > a i.icon-home:before{ content: "\e77e";}
.header .nav nav .nav_zt li > a i.icon-about:before{ content: "\e640";}
.header .nav nav .nav_zt li > a i.icon-product:before{ content: "\e603"; font-size: 0.26rem;}
.header .nav nav .nav_zt li > a i.icon-news:before{ content: "\e65f";}
.header .nav nav .nav_zt li > a i.icon-download:before{ content: "\e659";}
.header .nav nav .nav_zt li > a i.icon-contact:before{ content: "\e646"; font-size: 0.26rem;}
.header .nav nav .nav_zt li.language,.header .nav nav .nav_zt li.Search{ display: none;}
.header .nav nav .nav_zt .iconlist,.header .nav nav .footer{ display: block;}
.header .nav nav .nav_zt .iconlist{ width: 100%; display: block; font-size: 0; text-align: center}
.header .nav nav .nav_zt .iconlist a{ display: inline-block; width: auto; margin: 0.4rem 0.15rem; color: #000;}
.header .nav nav .nav_zt .iconlist a i{font-family: iconfont,Arial; font-size: 0.24rem; display: block; line-height: 0.4rem;}
.header .nav nav .nav_zt .iconlist a i.icon-feacbook{ font-size: 0.3rem;}
.header .nav nav .nav_zt .iconlist a i.icon-twitter{ font-size: 0.3rem;}
.header .nav nav .nav_zt .iconlist a i.icon-skype{font-family: iconfont; font-size: 0.28rem;}
.header .nav nav .nav_zt .iconlist a i.icon-qq{font-family: iconfont; font-size: 0.28rem;}
.header .nav nav .nav_zt .iconlist a{ font-size: 0.16rem;}
.header .nav nav .footer{ background: none; padding: 0; text-align: center; color: rgba(0,0,0,0.8); margin-top: -0.6rem; border-top: 1px solid #ddd;}
.header .nav nav .footer .wz2{ text-align: center;}

.header .nav .nav-c{ display: block; transition: all 0.3s ease; z-index: 2; position: absolute; right: 0.2rem; top: 0.25rem; width: 0.35rem; height: 0.3rem;}
.header .nav .nav-c span{ width: 100%; height: 2px; top: 50%; position: absolute; margin-top: -1px;  background: #fff; display: block;}
.header .nav .nav-c::after,
.header .nav .nav-c::before{ content: ""; width: 100%; height: 2px; position: absolute; background: #fff; display: block;}
.header .nav .nav-c::before{ top: 0;}
.header .nav .nav-c::after{ bottom: 0;}
.header .nav.open .nav-c::after,
.header .nav.open .nav-c::before{background: #000;}

.header .nav.open nav{ opacity: 1; pointer-events: auto; }
.header .nav.open .nav-c{ right: 0.4rem; top: 0.4rem; z-index: 9999999; width: 0.2rem; margin: 10%;}
.header .nav.open .nav-c::before{ transform: rotate(45deg); top: 50%; height: 3px; margin-top: -0.015rem; }
.header .nav.open .nav-c::after{ transform: rotate(-45deg); bottom: 50%; height: 3px; margin-bottom: -0.015rem; }
.header .nav.open .nav-c span{ opacity: 0;}
.header .nav .nav_zt li .list{ display: none;}


.header .nav .brand-m{ display: inline-block; height: 0.88rem; box-sizing: border-box; padding-top: 0.2rem; width: 2.5rem; vertical-align: middle; text-align: center; font-size: 0; }
.header .nav .brand-m a{ display: inline-block; font-size: 0.36rem; margin: 0 0.1rem; font-family: "iconfont"; color: #000; }
.header .nav .brand-m img{ height: 0.36rem}
.header .nav .brand-m span{ line-height: 0.18rem; padding-right: 0.2rem; font-size: 0.14rem; text-align: center; text-transform: uppercase; display: inline-block;}
.header .nav .language{ height: 0.48rem; border-left: none; padding-left: 0.15rem; margin-left: 0.15rem; display: inline-block; width: 0.5rem; box-sizing: border-box; cursor: pointer; vertical-align: middle; margin-top: 0.15rem;}
.header .nav .language a{ display: inline-block;}
.header .nav .language i{font-size: 0.26rem; font-family: "iconfont"; color: #000; }
.header .nav .language span{ font-size: 0.24rem; line-height: 0.3rem; color: #000; width: 100%; display: inline-block;}
.header .nav .m-nav-link{ width: 100%; display: block; text-align: center; font-size: 0;  height: 0.88rem; float: left; width: 100%; padding-top: 0.3rem;}



/* Navigation End */
}

/* --------------------------  竖版 IPAD and Mini End  -------------------------- */

/*--------------------------------------- Mobile header ---------------------------------------*/

@media screen and (max-width: 736px)  {
/* Navigation */
.header{ background: #000; border: none;}
.header .nav nav .logo{ top: 0.45rem; left: 0.4rem; margin: 0;}
.header .nav nav{ padding: 0.2rem;}
.header .nav .nav-c span{background: #fff;}
.header .nav .nav-c::after,
.header .nav .nav-c::before{background: #fff;}
.header .nav.open .nav-c{ right: 0.4rem; top: 0.45rem; margin: 0; }
.header .nav.open .nav-c::after,
.header .nav.open .nav-c::before{background: #000;}

.header .nav .brand-m{ display: inline-block; height: 0.88rem; box-sizing: border-box; padding-top: 0.2rem; width: 2.5rem; vertical-align: middle; text-align: center; font-size: 0; }
.header .nav .brand-m a{ display: inline-block; font-size: 0.36rem; margin: 0 0.1rem; font-family: "iconfont"; color: #000; }
.header .nav .brand-m img{ height: 0.36rem}
.header .nav .brand-m span{ line-height: 0.18rem; padding-right: 0.2rem; font-size: 0.14rem; text-align: center; text-transform: uppercase; display: inline-block;}
.header .nav .language{ height: 0.48rem; border-left: none; padding-left: 0.15rem; margin-left: 0.15rem; display: inline-block; width: 0.5rem; box-sizing: border-box; cursor: pointer; vertical-align: middle; margin-top: 0.15rem;}
.header .nav .language a{ display: inline-block;}
.header .nav .language i{font-size: 0.26rem; font-family: "iconfont"; color: #000; }
.header .nav .language span{ font-size: 0.24rem; line-height: 0.3rem; color: #000; width: 100%; display: inline-block;}
.header .nav .m-nav-link{ width: 100%; display: block; text-align: center; font-size: 0;  height: 0.88rem; float: left; width: 100%; padding-top: 0.3rem;}
/* Navigation End */
}

/*--------------------------------------- Mobile header End ---------------------------------------*/