@font-face {font-family: "iconfont";
    src: url('https://qiniu.wessyun.com/new_yali/epay/iconfont.eot'); /* IE9*/
    src: url('https://qiniu.wessyun.com/new_yali/epay/iconfont.eot') format('embedded-opentype'), /* IE6-IE8 */
    url('https://qiniu.wessyun.com/new_yali/epay/iconfont.ttf') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
    url('https://qiniu.wessyun.com/new_yali/epay/iconfont.svg') format('svg'); /* iOS 4.1- */
  }
  
  .iconfont {
    font-family:"iconfont" !important;
    font-size:16px;
    font-style:normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  .icon-html5:before { content: "\e600"; }
  .icon-msnui-telephone:before { content: "\e622"; }
  .icon-fasongxinxi:before { content: "\e6d3"; }
  .icon-htmal5icon05:before { content: "\e621"; }
  .icon-socialjavascript:before { content: "\e90a"; }
  .icon-dizhi:before { content: "\e61f"; }
  .icon-languagephp:before { content: "\e914"; }
  .icon-shangdian:before { content: "\e67a"; }
  .icon-phone6dianhua:before { content: "\e679"; }
  .icon-anquanbaozhang1:before { content: "\e61c"; }
  .icon-jiantou8:before { content: "\e60a"; }
  .icon-jiaoyijilu:before { content: "\e636"; }
  .icon-zhifu:before { content: "\e615"; }
  .icon-erweima:before { content: "\e605"; }
  .icon-xuanzhongzhuangtai:before { content: "\e61d"; }
  .icon-qq:before { content: "\e6a1"; }
  .icon-shang:before { content: "\e62e"; }
  .icon-you:before { content: "\e68c"; }
  .icon-zuo:before { content: "\e68f"; }
  .icon-xuanze:before { content: "\e60b"; }
  .icon-renwuguanli:before { content: "\e657"; }
  .icon-wenjian:before { content: "\e68a"; }
  .icon-python:before { content: "\e664"; }
  .icon-qian:before { content: "\e60d"; }
  .icon-qianbao:before { content: "\e61e"; }
  .icon-fukuantongzhi:before { content: "\e60c"; }
  .icon-qianshouguanhuai:before { content: "\e612"; }
  .icon-Automaticdelivery:before { content: "\e6f7"; }
  .icon-liaotian:before { content: "\eee9"; }
  .icon--net-:before { content: "\e601"; }
  

  html, body {background-color: #fff;}
  a:hover{text-decoration:none}
  .clear:after{content:'.';display:block;height:0;clear:both;visibility:hidden}
  .wrapper{width:1200px;margin:0 auto}
  .g-txt{float:left;line-height:1.4;padding-top:180px;width:539px;font-family:"Lucida Grande","Microsoft JhengHei","Microsoft YaHei"}
  .g-txt h2{position:relative;padding-left:20px;font-size:36px}
  .g-txt h2:before{content:'';position:absolute;left:0;top:2.5px;width:3px;height:38px;background:#47e7c4}
  .g-txt h2 font{font-size:30px}
  .g-txt p{padding-top:40px;font-size:16px;line-height:30px}
  .g-img{padding-top:158px;float:right}
  .g-hd{text-align:center;color:#515c7a}
  .g-hd h2{font-size:30px}
  .g-hd p{font-size:16px;font-family:"Lucida Grande","Microsoft JhengHei","Microsoft YaHei";letter-spacing:10px}
  .g-btn{display:inline-block;width:200px;height:70px;line-height:70px;font-size:28px;color:#fff;text-align:center;background-image:linear-gradient(#1b92fa,#1b92fa),linear-gradient(#57b1fb,#57b1fb);-webkit-box-shadow:0 20px 30px 0 rgba(62,123,248,.3);box-shadow:0 20px 30px 0 rgba(62,123,248,.3);-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;-moz-transition:all .5s;-webkit-transition:all .5s;transition:all .5s;opacity:.8;padding: 0;}
  .g-btn:hover{opacity:1;color:#fff}
  .g-btn:focus{color:#fff}
  .even{background:#f6f9fe}
  .even .img{float:right}
  .even .txt{float:left}
  .odd .img{float:left}
  .odd .txt{float:right}
  .line-27{font-size:26px;font-family:"Lucida Grande","Microsoft JhengHei","Microsoft YaHei";color:#8690a3}
  .line-27:before{content:'';margin-right:15px;display:inline-block;width:2px;height:27px;background:#47e7c4;vertical-align:-4px}
  .probanner{margin-top:-80px;width:100%;height:600px;background:url('https://qiniu.wessyun.com/new_yali/epay/banner.jpg') no-repeat center #3d7bf8;background-size:cover;color:#fff}
  .probanner-r{margin-left:100px;float:left}
  .pro-pay{padding:90px 0 124px}
  .pro-bd{margin-top:70px;overflow:hidden}
  .pro-pay-l{margin-top:80px;float:left}
  .pro-pay-r{float:right}
  .g-describe{margin-top:50px;font-size:14px;font-family:"Lucida Grande","Microsoft JhengHei","Microsoft YaHei";line-height:30px;color:#8d95a4}
  .pro-pay-r ul{margin-top:100px;overflow:visible}
  .pro-pay-r li{list-style:none;float:left;width:25%;text-align:center;cursor:pointer;transition:all .5s}
  .pro-pay-r li:hover{-webkit-transform:translateY(-30px);-moz-transform:translateY(-30px);transform:translateY(-30px)}
  .pro-pay-r li:hover span{color:#5bb1fb}
  .pro-pay-r li span{display:block;margin-top:17px;font-size:16px;color:#4a5875}
  .pro-sys{padding:70px 0 90px;background:#f7f9ff}
  .pro-sys .pro-txt{margin-top:70px;line-height:30px;font-size:14px;letter-spacing:normal;color:#8D95A4}
  p.pro-txt{font-size:14px}
  .pro-sys-l,.pro-sys-r{float:left}
  .pro-sys-l li a{display:block;width:239px;height:120px;line-height:120px;font-size:20px;color:#5f697f;background:#f8f9fc;text-align:center}
  .pro-sys-l li.on a{background:#57b1fb;color:#fff}
  .pro-sys-l li.on i{color:#fff}
  .pro-sys-l li i{margin-right:30px;font-size:30px;color:#5f697f}
  .pro-sys-r{position:relative;width:959px;height:600px;background:#fff}
  .pro-sys-r-none{display:none}
  .pro-sys-r .img{margin-top:55px;text-align:center}
  .pro-sys-r .txt{padding:0 0 0 80px;margin-top:-35px}
  .pro-sys-r .txt h2{font-size:20px;color:#515c7a}
  .pro-sys-r .txt p{margin-top:10px;font-size:14px;line-height:36px}
  .pro-sys-r .btn{position:absolute;right:103px;bottom:60px}
  .pro-df{padding:110px 0 100px;background:#fff}
  .pro-df .pro-bd{overflow:visible}
  .pro-df-l{padding-bottom:20px}
  .pro-df-l .bj-4ac4fd:before{background:#4ac4fd}
  .pro-df-l .btn{margin-top:60px}
  .pro-qr{padding:80px 0 67px;background:#f7f9ff}
  .pro-qr .pro-bd{margin-top:20px}
  .pro-qr-l{margin-top:100px}
  .pro-qr-l .btn{margin-top:88px}
  .pro-qr-r{padding-left:60px}
    

  @media only screen and (max-width:767px) {
    html,body{
      font-size: 12px;
    }
    img{
      max-width:100%; 
    }
    .wrapper{
      margin: 0 3%; width: auto;
    }
    .g-txt{
      float: none; padding: 0 3%; position: relative; z-index: 1; width: auto; text-align: center; padding-top:130px;
    }
    .g-txt h2{
      text-align: center; line-height: 1.2; padding-left: 0; font-size: 24px; position: relative;
    }
    .g-txt h2:after{
      position: absolute; left: 50%; margin-left: -25px; bottom: -20px; content: "";
      width: 50px; height: 2px; background-color:#47e7c4 ;
    }
    .g-txt h2 font{
      line-height: 1.3;  font-size: 24px;
    }
    .g-txt h2:before{
      display: none;
    }
    .g-txt p{
      text-align: center; font-size: 16px; padding-top: 40px; max-width: 420px; margin: 0 auto; opacity: 0.8; line-height: 1.6;
    }
    
    .g-img{
      float: none; padding-top: 0; position: absolute; left: 0; right: 0; text-align: center; bottom: 0; 
    }
    .g-img img{
      opacity: 0.4;
    }
    .g-hd h2{
      font-size: 20px;
    }
    .g-hd p{
      font-size: 15px; letter-spacing: 1px; line-height: 1.3;
    }

    
    .g-btn{
      height: 45px; line-height: 45px; font-size: 16px;
    }
    .line-27,
    .pro-sys-r .txt h2{
      font-size:18px;
    }
    .line-27:before{
      height: 20px; vertical-align: -2px;
    }

    /*产品中心*/
    .probanner{
      position: relative; height: 500px; 
    }
    .g-img{
      font-size: 0; overflow: hidden;
    }
    .g-img img{
      position: relative; margin-bottom: -16%;
    }
    .probanner-r{
      margin-left: 0; display: none;
    }
    .probanner-r img{
      width: 300px;
    }
    .pro-pay,
    .pro-sys,
    .pro-df,
    .pro-qr,
    .about,
    .contact,
    .channel,
    .traffic,
    .sdk,
    .login1{
      padding: 40px 0;
    }
    .pro-pay .wrapper{
      margin: 0;
    }
    .pro-bd,
    .pro-sys .pro-txt{
      margin-top: 30px;
    }
    .pro-pay-l{
      width: 40%; margin-left: -50px;  text-align: right;  box-sizing: border-box; margin-top: 0px;
    }
    .pro-pay-r{
      width: 60%;
    }
    .g-describe{
      margin-top: 20px; font-size: 14px; line-height: 1.5;
    }
    .g-describe br{
      display: none;
    }
    .pro-pay-r ul{
      margin-top: 30px;
    }
    .pro-pay-r li{
      width: 20%;
    }
    .pro-pay-r li img{
      width: 80px;
    }
    .pro-pay-r li span{
      margin-top: 8px; font-size: 14px;
    }
    .pro-sys .pro-txt{
      font-size: 14px; line-height: 1.5; max-width: 600px; margin-left: auto; margin-right: auto;
    }
    .pro-sys .pro-txt br{
      display: none;
    }
    .pro-sys-l, .pro-sys-r{
      float: none; width: auto;
    }
    .pro-sys-l li{
      width: 20%; float: left; text-align: center; 
    }
    .pro-sys-l li a{
      display: block; width: auto; font-size: 16px; line-height: 1.2;padding: 15px 0; height: auto;
    }
    .pro-sys-l li i{
      display: block; margin-right: 0;
    }
    .pro-sys-r{
      padding: 30px 10px; height: auto;
    }
    .pro-sys-r .img{
      margin-top: 0;
    }
    .pro-sys-r .img img{
    
    }
    .pro-sys-r .txt{
      padding: 0 10px;  width: 60%; float: left;
    }
    .pro-sys-r .txt p{
      font-size: 14px; line-height: 1.5;
    }
    .pro-sys-r .btn{
      position: relative; right: 0; bottom: 0; margin-top: 20px; 
    }
    .pro-df-l{
      width: 60%;
    }
    .pro-df-l .btn,
    .pro-qr-l .btn{
      margin-top: 20px;margin-left: auto; margin-right: auto;
    }
    .pro-df-r,
    .odd .pro-qr-r{
      width: 40%;
    }
    .pro-qr-r{
      padding-left: 0;
    }
    .pro-qr-l{
      margin-top: 50px; width: 60%;
    }

    .hview.even .img,
    .hview.odd .img,
    .pro-pay-l{
      margin-right: 0; width: auto; float: none; text-align: center; margin-left: 0;
    }
    .hview.even .img img,
    .hview.odd .img img,
    .pro-pay-l img{
       width: 80%;
    }
    .hview-txt,
    .pro-pay-r{
      float: none; width: auto; margin-top: 25px;
    }
    .pro-pay-r{
      margin-left: 3%; margin-right: 3%;
    }

    .probanner-r img{
      width: 200px;
    }
    .pro-pay-r li{
      width: 25%;
    }
    .pro-pay-r li span{
      font-size: 12px;
    }
    .pro-sys-l li a{
      font-size: 12px;
    }
    .pro-sys-l li i{
      font-size: 24px;
    }
    .pro-df-r,
    .odd .pro-qr-r,
    .pro-df-l,
    .pro-qr-l{
      width: auto; float: none; 
    }
    .pro-df-r, .odd .pro-qr-r{
      width: 80%; margin: 0 auto;
    }
    .pro-qr-l{
      margin-top: 10px;
    }

    .pro-df-l{
      margin-bottom: 30px;
    }

    .pro-sys-r .img img{
      width: 80%;
    }
    .pro-sys-r .txt{
      float: none; width: auto; margin-top: 0;
    }
    .pro-sys-r .txt p br{
      display: none;
    }
    .pro-sys-r .btn{
      text-align: center;
    }

    .pro-df-l .btn, .pro-qr-l .btn{
      display: block;
    }
    .line-27, .pro-sys-r .txt h2{
      font-size: 16px;
    }
    .line-27:before{
      vertical-align: -5px;
    }
  }