@charset "utf-8";
html {overflow-y:scroll; font-size: 62.5%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
input[type="submit"], input[type="reset"], input[type="button"], input { -webkit-appearance: none; resize: none; }
body, div, ul, li, ol, h1, h2, h3, h4, h5, h6, input, textarea, select, p, dl, dt, dd, a, img, button, form, table, th, tr, td, tbody, article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
.wrapper img { max-width: 100%; height: auto; width: auto\9; -ms-interpolation-mode: bicubic; border: none; display: block; width: 100%; }
body, div, ul, li, ol, h1, h2, h3, h4, h5, h6, input, textarea, select, p, dl, dt, dd, a, img, button, form, table, th, tr, td, tbody, article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { margin: 0; padding: 0; border: none; }
body, button, input, select, textarea { font: 12px/1.5 Arial, '微软雅黑', 'tahoma', 'Srial', 'helvetica', 'sans-serif'; }
body { min-width: 320px;}
em, i, b { font-style: normal; font-weight: normal; }
strong { font-weight: normal; }
a { text-decoration: none; color: #ccc; }
a:hover { text-decoration: none; }
ul, ol { list-style: none; }
h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: normal; }
* { margin: 0; padding: 0; text-shadow: none; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
.translateXY { left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }
.translateY { top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); }
.translateX { left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); }
.clearfix:before, .clearfix:after { display: table; content: ""; }
.clearfix:after { clear: both; }
.clearfix { *zoom:1;
}
.relative { position: relative; }
.absolute { position: absolute; }
.fl { float: left; display: inline; }
.fr { float: right; display: inline; }
.wrapper { width: 100%; margin: 0 auto; position: relative; height: 100%; background: #fff; }
.header .navBtn, .header .logo, .header .hdTel .telBtn, .items .itemCon a:before, .nIcon,nav .navHd h3 { background: url("../images/icons.png") no-repeat; }

/*nav*/
.navOn{-webkit-transform: translateX(80%); transform:translateX(80%);}
nav { opacity: 0; overflow: hidden; position: fixed; background: #fff; width: 100%;height: 100%; left: 0; top: 0; z-index:-1;  -webkit-transition: transform 0.3s ease-out, opacity 0.3s ease-out; transition:transform 0.3s ease-out, opacity 0.3s ease-out; }
nav.on{opacity: 1; z-index:0;}
.swtCenter.on,.swtFooter.on,.znq.on{z-index: -2!important;}
nav .navCon {position: relative;overflow: hidden; }
nav .navCon:before { content: ""; position: absolute; width: 40px; height: 100%; right: -55px; top: 0; box-shadow:-40px 0 40px rgba(0,0,0,.3);}
nav .navHd { width: 100%; overflow: hidden; padding: 20px 0 14px 18px; background: #f3f1f1;}
nav .navHd h3 { width: 214px; height: 54px; background-position: -536px -85px; }
nav .navBd .item { padding: 24px 0 20px 20px; overflow: hidden; width: 100%; }
nav .navBd .item:nth-of-type(2n) { background: #f3f1f1; }
nav .navBd .item h4 { width: 100%; overflow: hidden; font-size: 3rem; color: #000; font-weight: 600; line-height: 1.67; }
nav .navBd .item h6 { width: 100%; overflow: hidden; font-size: 2.4rem; color: #c3c3c3; line-height: 2; }
nav .navBd .item li { float: left; }
nav .navBd .item ul li:nth-child(3n+1) { width: 35%; }
nav .navBd .item ul li:nth-child(3n+2) { width: 33%; }
nav .navBd .item ul li:nth-child(3n+3) { width: 32%; }
nav .navBd .item ul li a { font-size: 2.6rem; color: #898989; line-height: 2.14; white-space: nowrap; }
/*header*/
.header { width: 100%; height: 86px; position: relative; }
.header .navBtn { display: block; width: 48px; height: 41px; left: 30px; }
.header .navBtn.on { background-position: -471px -90px; }
.header .logo { width: 308px; height: 48px; background-position: -43px -165px; }
.header .hdTel { width: 48px; height: 48px; right: 24px; }
.header .hdTel .telBtn { display: block; width: 100%; height: 100%; background-position: -330px 0; }
.header .hdTel .telNum { width: 28px; height: 28px; background: #e60012; border-radius: 50%; text-align: center; line-height: 28px; top: -10px; right: -14px; font-size: 18px; color: #fff; }
/*call*/
.call { width: 100%; padding: 45px 0 20px;background: #fff; }
.call .callBtn { width: 91.2%; display: block; margin: 0 auto; background: #00b2c4; box-shadow: 0 13px 20px rgba(0,189,209,.66); border-radius: 130px; padding: 30px 100px 30px 120px; position: relative; z-index: 2; }
/*footer*/
.footer { width: 100%; overflow: hidden; padding-bottom: 143px;background: #fff; }
.footer .info { width: 100%; margin: 0 auto; }
@media screen and (min-width:320px) and (max-width:359px) {
    html { font-size: 31.25%!important; } /*0.5*/
    .header .navBtn, .header .logo, .header .hdTel .telBtn, .items .itemCon a:before, .nIcon,nav .navHd h3 { 
        background: url("../images/icons.png") no-repeat;  
        -webkit-background-size: 375px 124px; 
        background-size: 375px 124px; 
    }
    /*nav*/
    nav .navCon:before {width: 20px; right: -28px; box-shadow: -20px 0 20px rgba(0,0,0,.3); }
    nav .navHd { padding: 10px 0 7px 9px; }
    nav .navHd h3 { width: 107px; height: 28px; background-position: -268px -42px; }
    nav .navBd .item { padding: 12px 0 10px 10px; }
    /*header*/
    .header { height: 46px; }
    .header .navBtn { width: 25px; height: 22px; left: 15px; }
    .header .navBtn.on { background-position: -235px -43px; }
    .header .logo { width: 154px; height: 23px; background-position: -21px -84px; }
    .header .hdTel { width: 26px; height: 25px; right: 12px; }
    .header .hdTel .telBtn { background-position: -164px 0; }
    .header .hdTel .telNum { width: 16px; height: 16px; line-height: 16px; top: -8px; right: -8px; font-size: 10px; }
    /*call*/
    .call { padding: 20px 0 10px; }
    .call .callBtn { box-shadow: 0 5px 10px rgba(0,189,209,.66); border-radius: 50px; padding: 15px 50px 15px 60px; }
    /*footer*/
    .footer { padding-bottom: 70px; }
}
@media screen and (min-width:360px) and (max-width:409px) {
    html { font-size: 35%!important; }  /*0.56*/
    .header .navBtn, .header .logo, .header .hdTel .telBtn, .items .itemCon a:before, .nIcon,nav .navHd h3 { 
        background: url("../images/icons.png") no-repeat; 
        -webkit-background-size: 420px 139px; 
        background-size: 420px 139px; 
    }
    /*nav*/
    nav .navCon:before{width: 23px; right: -35px; box-shadow: -23px 0 23px rgba(0,0,0,.3); }
    nav .navHd  { padding: 12px 0 8px 10px; }
    nav .navHd h3 { width: 120px; height: 31px; background-position: -300px -47px; }
    nav .navBd .item { padding: 13px 0 11px 11px; }
    /*header*/
    .header { height: 48px; }
    .header .navBtn { width: 29px; height: 26px; left: 17px; }
    .header .navBtn.on { background-position: -262px -48px; }
    .header .logo { width: 172px; height: 28px; background-position: -24px -93px; }
    .header .hdTel { width: 28px; height: 28px; right: 14px; }
    .header .hdTel .telBtn { background-position: -184px 0; }
    .header .hdTel .telNum { width: 18px; height: 18px; line-height: 18px; top: -7px; right: -7px; font-size: 12px; }
    /*call*/
    .call { padding: 25px 0 12px; }
    .call .callBtn { box-shadow: 0 8px 12px rgba(0,189,209,.66); padding: 16px 56px 16px 67px; }
    /*footer*/
    .footer { padding-bottom: 80px; }
}
@media screen and (min-width:410px) and (max-width:479px) {
    html { font-size: 40%!important; }  /*0.64*/
    .header .navBtn, .header .logo, .header .hdTel .telBtn, .items .itemCon a:before, .nIcon,nav .navHd h3 { 
        background: url("../images/icons.png") no-repeat; 
        -webkit-background-size: 480px 159px; 
        background-size: 480px 159px; 
    }
    /*nav*/
    nav .navCon:before {width: 25px; right: -38px; box-shadow: -25px 0 25px rgba(0,0,0,.3); }
    nav .navHd { padding: 13px 0 9px 11px; }
    nav .navHd h3 { width: 137px; height: 35px; background-position: -343px -54px; }
    nav .navBd .item { padding: 15px 0 12px 12px; }
    /*header*/
    .header { height: 56px; }
    .header .navBtn { width: 36px; height: 31px; left: 20px; }
    .header .navBtn.on { background-position: -298px -55px; }
    .header .logo { width: 197px; height: 31px; background-position: -28px -106px; }
    .header .hdTel { width: 32px; height: 31px; right: 19px; }
    .header .hdTel .telBtn { background-position: -211px 0; }
    .header .hdTel .telNum { width: 20px; height: 20px; line-height: 20px; top: -9px; right: -9px; font-size: 12px; }
    /*call*/
    .call { padding: 28px 0 13px; }
    .call .callBtn { box-shadow: 0 9px 13px rgba(0,189,209,.66); padding: 19px 64px 19px 76px; }
    /*footer*/
    .footer { padding-bottom: 91px; }
}
@media screen and (min-width:480px) and (max-width:750px) {
    html { font-size: 47%!important; }  /*0.75*/
    .header .navBtn, .header .logo, .header .hdTel .telBtn, .items .itemCon a:before, .nIcon,nav .navHd h3 { 
        background: url("../images/icons.png") no-repeat; 
        -webkit-background-size: 562px 188px; 
        background-size: 562px 188px; 
    }
    /*nav*/
    nav .navCon:before {width: 30px; right: -45px; box-shadow: -30px 0 30px rgba(0,0,0,.3); }
    nav .navHd { padding: 15px 0 10px 15px; }
    nav .navHd h3  { width: 161px; height: 41px; background-position: -401px -63px; }
    nav .navBd .item{ padding: 18px 0 15px 15px; }
    /*header*/
    .header { height: 64px; }
    .header .navBtn { width: 37px; height: 31px; left: 25px; }
    .header .navBtn.on { background-position: -353px -67px; }
    .header .logo { width: 231px; height: 36px; background-position: -32px -125px; }
    .header .hdTel { width: 37px; height: 36px; right: 22px; }
    .header .hdTel .telBtn { background-position: -247px 0; }
    .header .hdTel .telNum { width: 24px; height: 24px; line-height: 24px; top: -9px; right: -12px; font-size: 12px; }
    /*call*/
    .call { padding: 33px 0 15px; }
    .call .callBtn { box-shadow: 0 10px 15px rgba(0,189,209,.66); padding: 22px 75px 22px 90px; }
    /*footer*/
    .footer { padding-bottom: 107px; }
}