/* CSS reset@ */
/*@font-face {
	font-family:fz;
	src: url('http://www.jnban.com/fonts/FE08015T.TTF');
}*/

body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td,a{padding:0;margin:0;}
table {border-collapse: collapse;border-spacing:0;}
del, ins {text-decoration:none;}
fieldset, img {border:0;}.unLock{ overflow:hidden;}
body{ overflow-x:hidden; position:relative;}
body,button,textarea{font:14px/1.6 "Microsoft YaHei",微软雅黑, Arial, sans-serif;color:#333;-webkit-text-size-adjust: none;}
input,select{font:14px/1.6 "Microsoft YaHei",微软雅黑, Arial, sans-serif;color:#333;}
input,select,img{vertical-align:middle;}img{ max-width:100%;}
input,select{outline:none;-webkit-appearance: none;}
select{height:22px;line-height:18px;padding:2px;}
ul,ol{list-style:none;}
h1, h2, h3, h4, h5, h6 {font-size:14px; font-weight:normal;}
address,cite,dfn,em,var{font-style:normal;}
legend{display:none;}
td{font-size:14px;line-height:140%;}
label{margin:0;cursor:pointer;}
input::-moz-focus-inner,button::-moz-focus-inner{border:0;padding:0;}
.left{float:left;}
.right{float:right;}
.mt10{margin-top:10px;}
.mt15{margin-top:15px;}
.mt20{margin-top:20px;}
a{color:#333;text-decoration:none; -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s;}
a:hover{color:#b62020;text-decoration:none;}
i{ font-style:normal;}
.txthide{text-indent:-999em;overflow:hidden;line-height:0;font-size:0}
.clearfix:after{content:"";height:0;visibility:hidden;display:block;clear:both;}
.clearfix{zoom:1;}
.clear{clear:both;height:0;overflow:hidden;}
*, *:after, *:before{ padding:0;margin:0;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;-o-box-sizing: border-box;box-sizing: border-box;}
.flex-centerbox {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}
.fr{ float:right;}.fl{ float:left;}
.header{ width:100%; height:90px; background: #fff;  position:static; z-index:9999;}
.header-menu{ width:100%; height:90px; line-height:90px; position:relative;}
.header-menu img{ width:auto; height:59px; position:absolute; top:16px; left:49px;}
.headernav{ padding:0 20px; float: right; margin-right:103px; width:70%;}
.header-nav ul li{ float:left;}
.header-nav ul li a{ font-size:15px; color:#595757; padding:0 35px; display:block;}
.header-en{ width:103px; height:90px;  position:absolute; top:0; right:0;}
.header-en a{ color:#595757; text-align:center; display:block;border-left: 1px solid #ddd;}

ul.nav {display: inline-flex;flex: 1;padding-left:50px; width:100%;}
li.nav-item {flex: 1; display:inline-block;}
li.nav-item>a{display: block;text-align: center;line-height: 90px;font-size: 16px;position: relative;width: 200px;}
li.nav-item>a::before{ display: none; content: ''; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); border-width: 0 40px 3px; border-style: solid;  position: absolute;}
li.nav-item:hover>a ,li.nav-item.active>a{color: #e62129;}
li.nav-item:hover>a::before,li.nav-item.active>a::before{display: block;}
/* 二级菜单 */
.subMenu{display: none;position: absolute;top: 90px;left: 0;width: 100%; height: 50px;background: url(../images/menubg.jpg) no-repeat center center; z-index: 999;}
.subMenu>ul{display: flex;flex-wrap: wrap;flex-direction: row;justify-content: center;align-items: center;}
.subMenu>ul>li>a{display:block;padding:0 18px;text-align: center;line-height: 50px;color: #000; font-size: 16px;}
.subMenu>ul>li>a:hover{color:red}


.prosubMenu{display: none;position: absolute;top: 90px;left: 0;width: 100%; height: 360px;background: url(../images/menubg.jpg) no-repeat center center; z-index: 999;}
.prosubMenu>ul{display: flex;flex-wrap: wrap;flex-direction: row;justify-content: center; width: 80%; max-width: 1340px; margin: 0 auto;}
.prosubMenu>ul>li{width:15%; margin-right:2%; float:left;}
.prosubMenu>ul>li:last-child{margin-right: 0px;}
.prosubMenu>ul>li strong{ line-height:50px !important; height:50px !important;}
.prosubMenu>ul>li strong a{color: #000; line-height: 30px; text-align: left; font-size: 18px;}
.prosubMenu>ul>li>a{display:block;text-align: left;line-height: 18px;color: #717171; font-size: 16px; padding-bottom: 24px;}
.prosubMenu>ul>li>a:hover{color:red}

.pc{display: block;}
.mobile{display: none;}
@media(max-width: 768px){
.pc{display: none;}
.mobile{display: block;}
}

.footer{ width:100%; background:#333333; color:#adabab; min-height:auto !important; height:auto !important;}
.footer .footer-nav{ padding:0 30px; height:43px;}
.footer .footer-nav .qq{ float:right;}
.footer .footer-nav .qq .iconfont{ font-size:20px; line-height:42px; color:#b5b5b9;}
.footer .footer-nav .qq .iconfont:hover{ color:#b62020;}
.footer .footer-nav ul li{ float:left;}
.footer .footer-nav ul li a{ height:42px; line-height:42px; padding:0 30px; display:block; color:#ccc;}
.footer .footer-nav ul li a:hover{color:#b62020;}

.footer .footer-content{ overflow:hidden;}
.footer .footerBox1{ float:left; width:18%; padding:50px 0 60px 60px;}
.footer .footerBox1 ul li { text-align:left;padding: 0 0 3px 0;}
.footer .footerBox1 ul li a{ font-size:14px; color:#ccc; height:35px; line-height:35px; text-transform:uppercase;}
.footer .footerBox1 ul li a:hover{ font-size:18px; color:#b62020; font-weight:bold;}
.footer .footerBox2{ float:left; width:40%; padding:50px 0 0; margin:0 10%;}
.footer .footer-logo{ text-align:center;}
.footer .footer-search{ width:100%; background: #fff; border-radius: 5px; overflow:hidden; margin:60px auto 30px; font-size:12px; color:#adabab;}
.footer .footer-search .tint{ width:85%; height:39px; font:14px "Microsoft YaHei"; color:#adabaa; line-height:37px; padding-left:14px; float:left; border:1px solid #fff; border-right:0;-webkit-appearance: none;}
.footer .footer-search .bint{ width:15%; height:39px; background:#fff url(../images/icon-search.png) no-repeat center center; background-size:25px; font:14px "Microsoft YaHei"; color:#adabaa; border:none; cursor:pointer;float:right;}
.footer .footer-intro{ font-size:12px; color:#adabab; padding:0 0 35px; text-align:center; text-transform:uppercase;}
.footer .footer-intro a{ color:#adabab;}
.footer .footer-intro a:hover{ color:#b62020;}

.footer .footerBox3{ float:right; width:22%; padding:60px 0 30px;}
.footer .footer-contactTitle{ font-size:32px; color:#fff; letter-spacing:5px; line-height:80px; font-weight:lighter; text-transform:uppercase; font-style:italic;}
.footer .footerBox3 ul li{ overflow:hidden; line-height:22px; margin-bottom:15px;}
.footer .footerBox3 ul li span{ float:left; width: 30%; width:40px; font-size:20px;}
.footer .footerBox3 ul li span.icon-Fax{ font-size:26px;}
.footer .footerBox3 ul li p,.footer .footerBox3 ul li div{ float:left; width: 70%; color:#adabab;}
.footer .footerBox3 a{ color:#adabab;}

.footer .footer-copyright{ font-size:12px; color:#eeedec; background:#1a1919; padding:12px 60px; line-height:24px; overflow:hidden; text-align:center;}
.footer .footer-copyright a{ font-size:12px; color:#eeedec;}
.footer .footer-copyright a:hover{ color:#fff;}

.right_side{ position: absolute; right: 0; top: 35%; width: 60px; height: 245px; z-index: 80000; }
.right_side ul{}
.right_side ul li{ width: 60px; height: 60px; border-bottom: 1px solid #f6aab4; background: #e62129 url(../images/right_ico.png) no-repeat; cursor: pointer; position:relative;-webkit-transition:  background 0.5s ease-out ; -moz-transform:background 0.5s ease-out; transition: background 0.5s ease-out ; }
.right_side ul li:hover{ background:#FFFFFF url(../images/right_hover_ico.png) no-repeat; }

.right_side ul li.qq{  background-position: center 17px;    }
.right_side ul li.qq div{ display: none; background-color: #f9f9f9; position: absolute; right: 60px; border-bottom-left-radius: 5px; border-top-left-radius: 5px; overflow: hidden; -moz-box-shadow:-7px 0px 10px rgba(0,0,0,0.2); -webkit-box-shadow:-7px 0px 10px rgba(0,0,0,0.2); box-shadow:-7px 0px 10px rgba(0,0,0,0.2); }
.right_side ul li.qq div dt{ text-align: center; height: 60px; line-height: 60px; background-color: #ffffff; }
.right_side ul li.qq div dd{height: 60px; line-height: 60px; color: #666666; margin: 0 auto; width: 160px; font-size: 16px; text-indent: 80px; background: url(../images/qqbg.gif) no-repeat 30px 17px;}
.right_side ul li.qq div dd a{ display: block;}
.right_side ul li.qq div dd a:hover{ color: #556c9c;}

.right_side ul li.tel{ background-position: center -44px; }
.right_side ul li.tel div,.right_side ul li.wx div,.right_side ul li.bottomback div{ display: none; border-bottom-left-radius: 5px; border-top-left-radius: 5px;  position: absolute;  right: 60px;-moz-box-shadow:-7px 0px 10px rgba(0,0,0,0.3); -webkit-box-shadow:-7px 0px 10px rgba(0,0,0,0.3); box-shadow:-7px 0px 10px rgba(0,0,0,0.3); height: 60px; line-height: 60px; padding: 0 20px; font-size: 24px; font-weight: bold; color: #217cc8; background-color: #fff; white-space: nowrap }
.right_side ul li.wx{  background-position: center -105px; border-top-left-radius: 5px;}
/*.right_side ul li.wx div{ border-radius: 5px; display: none; position: absolute; top: -45px; right: 60px;-moz-box-shadow:-7px 0px 10px rgba(0,0,0,0.3); -webkit-box-shadow:-7px 0px 10px rgba(0,0,0,0.3); box-shadow:-7px 0px 10px rgba(0,0,0,0.3); overflow: hidden; }*/
.right_side ul li.topback{ background-position: center -166px; border: none; border-bottom-left-radius: 5px;}
.right_side ul li.bottomback{ background-position: center -220px; border: none;  border-bottom: 1px solid #f6aab4; }
.right_side ul li:hover div{ display: block;}
.right_side ul li.qq:hover{ border-radius: 0;}
.right_side ul li img{ max-width:none;}
.right_side #returnTop a{ width:60px; height:60px; display:block; text-indent:-9999px;}

.izl-rmenu{position:fixed; right:0; margin-right:20px; bottom:20px; padding-bottom:20px; z-index:999;
 _position:absolute; 
_top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));
 /* for IE6 */ overflow:visible;}
.izl-rmenu .btn{width:51px; height:51px; margin-bottom:9px; cursor:pointer; position:relative;}

.izl-rmenu .btn-top{font-family:Arial, Helvetica, sans-serif; width:45px;height:40px;padding:5px 0 0;line-height:40px;text-align:center;background-image:url(../images/ico_top.png);background-position:center 9px;background-repeat:no-repeat;background-color:#2e84eb;color:#fff;font-size:14px;font-weight:bold;cursor:pointer; display:none;filter:alpha(opacity=30); -moz-opacity:0.3; -khtml-opacity: 0.8; opacity: 0.3;}
.izl-rmenu .btn-top:hover{filter:alpha(opacity=100); -moz-opacity:1; -khtml-opacity:1; opacity:1;}

@font-face {
  font-family: 'iconfont';  /* Project id 2453985 */
  src: url('//at.alicdn.com/t/font_2453985_hh9t8lno3hq.woff2?t=1637720465489') format('woff2'),
       url('//at.alicdn.com/t/font_2453985_hh9t8lno3hq.woff?t=1637720465489') format('woff'),
       url('//at.alicdn.com/t/font_2453985_hh9t8lno3hq.ttf?t=1637720465489') format('truetype');
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-search:before {
  content: "\e649;";
}

.icon-Fax:before {
  content: "\e621";
}

.icon-skype:before {
  content: "\e707";
}


.icon-wechat:before {
  content: "\e7e5";
}

.icon-email:before {
  content: "\e623";
}

.icon-qq:before {
  content: "\e60f";
}

.icon-tel:before {
  content: "\e6ed";
}

.icon-iPhone:before {
  content: "\e620";
}

.icon-address:before {
  content: "\e6d9";
}

.icon-whatsapp-fill:before {
  content: "\e97b";
}

.icon-shejiaotubiao-14:before {
  content: "\e643";
}







/*  css animation  */
.trans{
/*    -webkit-transition: all .4s ease-in;
    -moz-transition:all .4s ease-in;
    -o-transition:all .4s ease-in;
    -ms-transition:all .4s ease-in;
    transition:all .4s ease-in;*/
}

@media (min-width:325px){
  /* page animation  */
  .ani-view {
      opacity: 0;
      opacity: 1\9;
      opacity: 1\0/;
      opacity: 1\0/;
  }
  @-webkit-keyframes fadeInDown{
      0% {
          opacity:0;
          -webkit-transform:translateY(40px)
      }
      100% {
          opacity:1;
          -webkit-transform:translateY(0)
      }
  }
  @-moz-keyframes fadeInDown{
      0% {
          opacity:0;
          -moz-transform:translateY(40px)
      }
      100% {
          opacity:1;
          -moz-transform:translateY(0)
      }
  }
  @-o-keyframes fadeInDown {
      0% {
          opacity:0;
          -o-transform:translateY(40px)
      }
      100% {
          opacity:1;
          -o-transform:translateY(0)
      }
  }
  @keyframes fadeInDown {
      0% {
          opacity:0;
          transform:translateY(40px)
      }
      100% {
          opacity:1;
          transform:translateY(0)
      }
  }

  .ani-view.fade-in-down{
      opacity:0;
      opacity: 1\9;
      opacity: 1\0/;
      -webkit-transform:translateY(40px);
      -moz-transform:translateY(40px);
      -o-transform:translateY(40px);
      transform:translateY(40px);
  }
  .ani-view.fadeInDown{
      -webkit-animation:fadeInDown 1s cubic-bezier(.25,.74,.22,.99) forwards;
      -moz-animation:fadeInDown 1s cubic-bezier(.25,.74,.22,.99) forwards;
      -o-animation:fadeInDown 1s cubic-bezier(.25,.74,.22,.99) forwards;
      animation:fadeInDown 1s cubic-bezier(.25,.74,.22,.99) forwards;
      -webkit-animation-delay:0.1s; 
      -moz-animation-delay:0.1s;
      -o-animation-delay:0.1s;
      animation-delay:0.1s;
  }


  @-webkit-keyframes fadeInLeft {
      0% {
          opacity:0;
          -webkit-transform:translateX(-100px)
      }
      100% {
          opacity:1;
          -webkit-transform:translateX(0)
      }
  }
  @-moz-keyframes fadeInLeft {
      0% {
          opacity:0;
          -moz-transform:translateX(-100px)
      }
      100% {
          opacity:1;
          -moz-transform:translateX(0)
      }
  }
  @-o-keyframes fadeInLeft {
      0% {
      opacity:0;
      -o-transform:translateX(-100px)
      }
      100% {
      opacity:1;
      -o-transform:translateX(0)
      }
  }
  @keyframes fadeInLeft {
      0% {
      opacity:0;
      transform:translateX(-100px)
      }
      100% {
      opacity:1;
      transform:translateX(0)
      }
  }
  .ani-view.fade-in-left{
      opacity:0;
      opacity: 1\9;
      opacity: 1\0/;
      -webkit-transform:translateX(-100px);
      -moz-transform:translateX(-100px);
      -o-transform:translateX(-100px);
      transform:translateX(-100px);
  }
  .ani-view.fadeInLeft {
      -webkit-animation:fadeInLeft 1s cubic-bezier(.25,.74,.22,.99) forwards;
      -moz-animation:fadeInLeft 1s cubic-bezier(.25,.74,.22,.99) forwards;
      -o-animation:fadeInLeft 1s cubic-bezier(.25,.74,.22,.99) forwards;
      animation:fadeInLeft 1s cubic-bezier(.25,.74,.22,.99) forwards;
      -webkit-animation-delay:0.1s; 
      -moz-animation-delay:0.1s;
      -o-animation-delay:0.1s;
      animation-delay:0.1s;
  }

  @-webkit-keyframes fadeInRight {
      0% {
      opacity:0;
      -webkit-transform:translateX(100px)
      }
      100% {
      opacity:1;
      -webkit-transform:translateX(0)
      }
  }
  @-moz-keyframes fadeInRight {
      0% {
      opacity:0;
      -moz-transform:translateX(100px)
      }
      100% {
      opacity:1;
      -moz-transform:translateX(0)
      }
  }
  @-ms-keyframes fadeInRight {
      0% {
      opacity:0;
      -ms-transform:translateX(100px)
      }
      100% {
      opacity:1;
      -ms-transform:translateX(0)
      }
  }
  @-o-keyframes fadeInRight {
      0% {
      opacity:0;
      -o-transform:translateX(100px)
      }
      100% {
      opacity:1;
      -o-transform:translateX(0)
      }
  }
  @keyframes fadeInRight {
      0% {
      opacity:0;
      transform:translateX(100px)
      }
      100% {
      opacity:1;
      transform:translateX(0)
      }
  }
  .ani-view.fade-in-right{
      opacity:0;
      opacity: 1\9;
      opacity: 1\0/;
      -webkit-transform:translateX(100px);
      -moz-transform:translateX(100px);
      -o-transform:translateX(100px);
      transform:translateX(100px);
  }
  .ani-view.fadeInRight {
      -webkit-animation:fadeInRight 1s cubic-bezier(.25,.74,.22,.99) forwards;
      -moz-animation:fadeInRight 1s cubic-bezier(.25,.74,.22,.99) forwards;
      -o-animation:fadeInRight 1s cubic-bezier(.25,.74,.22,.99) forwards;
      animation:fadeInRight 1s cubic-bezier(.25,.74,.22,.99) forwards;
      -webkit-animation-delay:0.1s; 
      -moz-animation-delay:0.1s;
      -o-animation-delay:0.1s;
      animation-delay:0.1s;
  }
  .ani-view.ani_delay2{
    -webkit-animation-delay:0.2s; 
    -moz-animation-delay:0.2s;
    -o-animation-delay:0.2s;
    animation-delay:0.2s;
  }
  .ani-view.ani_delay3{
    -webkit-animation-delay:0.3s; 
    -moz-animation-delay:0.3s;
    -o-animation-delay:0.3s;
    animation-delay:0.3s;
  }
  .ani-view.ani_delay4{
    -webkit-animation-delay:0.4s; 
    -moz-animation-delay:0.4s;
    -o-animation-delay:0.4s;
    animation-delay:0.4s;
  }
  .ani-view.ani_delay5{
    -webkit-animation-delay:0.5s; 
    -moz-animation-delay:0.5s;
    -o-animation-delay:0.5s;
    animation-delay:0.5s;
  }
  .ani-view.ani_delay6{
    -webkit-animation-delay:0.6s; 
    -moz-animation-delay:0.6s;
    -o-animation-delay:0.6s;
    animation-delay:0.6s;
  }
  .ani-view.ani_delay7{
    -webkit-animation-delay:0.7s; 
    -moz-animation-delay:0.7s;
    -o-animation-delay:0.7s;
    animation-delay:0.7s;
  }
  .ani-view.ani_delay8{
    -webkit-animation-delay:0.8s; 
    -moz-animation-delay:0.8s; 
    -o-animation-delay:0.8s; 
    animation-delay:0.8s; 
  }
  .ani-view.ani_delay9{
    -webkit-animation-delay:0.9s; 
    -moz-animation-delay:0.9s;
    -o-animation-delay:0.9s;
    animation-delay:0.9s;
  }
  .ani-view.ani_delay10{
    -webkit-animation-delay:1s; 
    -moz-animation-delay:1s;
    -o-animation-delay:1s;
    animation-delay:1s;
  }
  .ani-view.ani_delay11{
    -webkit-animation-delay:1.1s; 
    -moz-animation-delay:1.1s; 
    -o-animation-delay:1.1s; 
    animation-delay:1.1s; 
  }
  .ani-view.ani_delay12{
    -webkit-animation-delay:1.2s; 
    -moz-animation-delay:1.2s; 
    -o-animation-delay:1.2s; 
    animation-delay:1.2s; 
  }
  .ani-view.ani_delay13{
    -webkit-animation-delay:1.3s; 
    -moz-animation-delay:1.3s;  
    -o-animation-delay:1.3s;  
    animation-delay:1.3s;  
  }
  .ani-view.ani_delay14{
    -webkit-animation-delay:1.4s; 
    -moz-animation-delay:1.4s; 
    -o-animation-delay:1.4s; 
    animation-delay:1.4s; 
  }
  .ani-view.ani_delay15{
    -webkit-animation-delay:1.5s; 
    -moz-animation-delay:1.5s;  
    -o-animation-delay:1.5s;  
    animation-delay:1.5s;  
  }
  .ani-view.ani_delay16{
    -webkit-animation-delay:1.6s; 
    -moz-animation-delay:1.6s;
    -o-animation-delay:1.6s;
    animation-delay:1.6s;
  }
  .ani-view.ani_delay17{
    -webkit-animation-delay:1.7s; 
    -moz-animation-delay:1.7s; 
    -o-animation-delay:1.7s; 
    animation-delay:1.7s; 
  }
  .ani-view.ani_delay18{
    -webkit-animation-delay:1.8s; 
    -moz-animation-delay:1.8s; 
    -o-animation-delay:1.8s; 
    animation-delay:1.8s; 
  }
  .ani-view.ani_delay19{
    -webkit-animation-delay:1.9s; 
    -moz-animation-delay:1.9s; 
    -o-animation-delay:1.9s; 
    animation-delay:1.9s; 
  }
  .ani-view.ani_delay20{
    -webkit-animation-delay:2s; 
    -moz-animation-delay:2s; 
    -o-animation-delay:2s; 
    animation-delay:2s; 
  }



  .fade-in-box{
      width: 100%; 
      height:100%;
      position: absolute;
      top:0%;
      left: 0%;
      background: url(http://www.jnban.com/img/img34.png) center/cover no-repeat;
      -webkit-transform: scale3d(1,1,1);
      transform: scale3d(1,1,1);
  }
  .fade-in-box.on{
      -webkit-animation:fade 1.2s ease-in-out forwards;
      -moz-animation:fade 1.2s ease-in-out forwards;
      -o-animation:fade 1.2s ease-in-out forwards;
      animation:fade 1.2s ease-in-out forwards;
  }
  @-webkit-keyframes fade{
      0% {
      -webkit-transform: scale3d(1,1,1);
      transform: scale3d(1,1,1);
      }
      99% {
      -webkit-transform: scale3d(25,25,25);
      transform: scale3d(25,25,25);
      }
      100%{
          -webkit-transform: scale3d(25,25,25);
          transform: scale3d(25,25,25);
          display: none;
      }
  }
  @-moz-keyframes fade{
     0% {
      -webkit-transform: scale3d(1,1,1);
      transform: scale3d(1,1,1);
      }
      99% {
      -webkit-transform: scale3d(25,25,25);
      transform: scale3d(25,25,25);
      }
      100%{
          -webkit-transform: scale3d(25,25,25);
          transform: scale3d(25,25,25);
          display: none;
      }
  }
  @-ms-keyframes fade{
     0% {
      -webkit-transform: scale3d(1,1,1);
      transform: scale3d(1,1,1);
      }
      99% {
      -webkit-transform: scale3d(25,25,25);
      transform: scale3d(25,25,25);
      }
      100%{
          -webkit-transform: scale3d(25,25,25);
          transform: scale3d(25,25,25);
          display: none;
      }
  }
  @-o-keyframes fade{
      0% {
      -webkit-transform: scale3d(1,1,1);
      transform: scale3d(1,1,1);
      }
      99% {
      -webkit-transform: scale3d(25,25,25);
      transform: scale3d(25,25,25);
      }
      100%{
          -webkit-transform: scale3d(25,25,25);
          transform: scale3d(25,25,25);
          display: none;
      }
  }
  @keyframes fade{
      0% {
      -webkit-transform: scale3d(1,1,1);
      transform: scale3d(1,1,1);
      }
      99% {
      -webkit-transform: scale3d(25,25,25);
      transform: scale3d(25,25,25);
      }
      100%{
          -webkit-transform: scale3d(25,25,25);
          transform: scale3d(25,25,25);
          display: none;
      }
  }

  .Fade-Inbox{
      width: 100%; 
      height:100%;
      position: absolute;
      top:0%;
      left: 0%;
      background: url(http://www.jnban.com/img/100.png) center/cover no-repeat;
      -webkit-transform: scale3d(1,1,1);
      transform: scale3d(1,1,1);
      -webkit-animation:Fabox 0.9s 0.2s ease-in-out forwards;
      -moz-animation:Fabox 0.9s 0.2s ease-in-out forwards;
      -o-animation:Fabox 0.9s 0.2s ease-in-out forwards;
      animation:Fabox 0.9s 0.2s ease-in-out forwards;
  }

  @-webkit-keyframes Fabox{
      0% {
      -webkit-transform: scale3d(1,1,1);
      transform: scale3d(1,1,1);
      }
      99% {
      -webkit-transform: scale3d(18,18,1);
      transform: scale3d(18,18,1);
      }
      100%{
          -webkit-transform: scale3d(18,18,1);
          transform: scale3d(18,18,1);
          display: none;
      }
  }
  @-moz-keyframes Fabox{
      0% {
      -webkit-transform: scale3d(1,1,1);
      transform: scale3d(1,1,1);
      }
      99% {
      -webkit-transform: scale3d(30,30,1);
      transform: scale3d(30,30,1);
      }
      100%{
          -webkit-transform: scale3d(30,30,1);
          transform: scale3d(30,30,1);
          display: none;
      }
  }
  @-ms-keyframes Fabox{
      0% {
      -webkit-transform: scale3d(1,1,1);
      transform: scale3d(1,1,1);
      }
      99% {
      -webkit-transform: scale3d(30,30,1);
      transform: scale3d(30,30,1);
      }
      100%{
          -webkit-transform: scale3d(30,30,1);
          transform: scale3d(30,30,1);
          display: none;
      }
  }
  @-o-keyframes Fabox{
      0% {
      -webkit-transform: scale3d(1,1,1);
      transform: scale3d(1,1,1);
      }
      99% {
      -webkit-transform: scale3d(30,30,1);
      transform: scale3d(30,30,1);
      }
      100%{
          -webkit-transform: scale3d(30,30,1);
          transform: scale3d(30,30,1);
          display: none;
      }
  }
  @keyframes Fabox{
      0% {
      -webkit-transform: scale3d(1,1,1);
      transform: scale3d(1,1,1);
      }
      99% {
      -webkit-transform: scale3d(30,30,1);
      transform: scale3d(30,30,1);
      }
      100%{
          -webkit-transform: scale3d(30,30,1);
          transform: scale3d(30,30,1);
          display: none;
      }
  }
}

/* 动画绑定 */

@-webkit-keyframes move_right {
from {
opacity: 0;
}
to {
opacity: 1;
-webkit-transform: translateX(120px);
transform: translateX(120px);
}
}
@keyframes move_right {
from {
opacity: 0;
}
to {
opacity: 1;
-webkit-transform: translateX(120px);
transform: translateX(120px);
}
}


.move_right {
-webkit-animation-name : move_right;
animation-name : move_right;
-webkit-animation-duration : 1s;
animation-duration : 1s;
-webkit-animation-iteration-count : 1;
animation-iteration-count : 1;
-webkit-animation-fill-mode : forwards;
animation-fill-mode : forwards;
}


.viewport-tip{position: absolute;z-index: 0;background: rgba(0,0,0,.59);width: 100%;height: 100%;top: 0;transition: all .5s;opacity: 0;display: none;}
.viewport-tip .overload{content: '';background: url(http://www.jnban.com/images/tip.png);background-size:.865rem;width: .865rem;height: .865rem;position: absolute;left: 50%;top: 50%;margin: -.4325rem 0 0 -.4325rem; }
.showOn{z-index: 99999999;opacity: 1;display: block;}