@charset "utf-8";
/* CSS Document */
html, body {font-size: 12px;margin: 0px;padding: 0px;text-decoration: none;font-family:"微软雅黑";background: #f7f7f7;text-align: center;-webkit-text-size-adjust: none;}
a {	color: #666666;text-decoration: none;outline:none;  star:expression(this.onFocus=this.blur());}
a:hover, a:active { color:#026ab5;}
* { margin: 0;padding: 0;list-style: none;}
table {	border-collapse: collapse;}
ul, li {list-style: none;border: 0 none;padding: 0;}
form {margin: 0;}
img {border: 0 none;text-align-last: center;vertical-align: middle;_azimuth:expression(this.pngSet?this.pngSet=true:(this.nodeName == "IMG" && this.src.toLowerCase().indexOf('.png')>-1?(this.runtimeStyle.backgroundImage = "none", this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')", this.src = "images/blank.gif"):(this.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.toString().replace('url("', '').replace('")', ''), this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "', sizingMethod='crop')", this.runtimeStyle.backgroundImage = "none")), this.pngSet=true);}
center {text-align: left;	color: #999;height: 50px;}
#clear, .clear {clear: both;float: none!important;background: none;width: 0 !important;	height: 0 !important;}
#noData, .noData {color: #ccc;font-size: 14px;text-align: left;padding: 50px 0;}
.fl-left, .fl{ float:left;}
.fl-right, .fr{ float:right;}
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }
::-webkit-scrollbar {width:8px;height: 1px;}
::-webkit-scrollbar-thumb {-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2); background:#000;}
::-webkit-scrollbar-track {-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);border-radius: 10px;background: #ededed;}



#head{ position:fixed;z-index:999;left:0;top:0;width:100%; background:rgba(0,0,0,.2);}
#head>.wrap{ width:90%;margin:0 auto;}
#head .logo{ position:relative; text-align:left; line-height:100px;}
#head .logo img{height:65px; width:auto;}
#head .back-home{ position:absolute;z-index:4; right:0;top:0; background:#006ec4;}
#head .back-home>a{display:block;  width:180px; height:100px; line-height:100px;color:#fff;}
#head .back-home>a>img{display:inline-block;width:100px; height:auto;}
#head .menu{ width:60%; text-align:right; line-height:100px; padding-right:140px;}
#head .menu>ul{display:block; text-align:right;}
#head .menu>ul>li{ position:relative; display:inline-block;}
#head .menu>ul>li.active:after{position:absolute;z-index:1;left:0;bottom:0;width:100%;height:2px; background:#30bafc;content:'';}
#head .menu>ul>li.active>a{color:#30bafc;}
#head .menu>ul>li>a{display:block;font-size:18px; color:#fff;padding:0 20px;}
#head .menu>.mob{display:none;}
#headmob{display:none;}

#fp-nav ul li a span, .fp-slidesNav ul li a span{background:rgba(255,255,255,.5) !important;}


#main .banner{margin:0 auto; width:100%;height:100%;background:url("../img/banenr_bg.jpg") no-repeat;background-size:cover;}
#main .banner .wrap{position:absolute;z-index:85;left:50%;top:30%; margin-left:-35%; width:70%; text-align:left;}
#main .banner .title{ position:relative; bottom:-100px; opacity:0; font-size:50px; color:#fff; font-weight:700; text-align:left;}
#main .banner .subtitle{ position:relative; bottom:-150px; opacity:0; font-size:50px; color:rgba(255,255,255,.2); font-weight:normal; text-align:left;}
#main .banner .text{ position:relative;bottom:-50px; opacity:0; width:40%;padding:50px 0; font-size:16px; color:#fff; font-weight:normal; line-height:28px; text-align:left;}
#main .banner .btn{ position:relative; bottom:-80px; opacity:0; text-align:left;}
#main .banner .btn>a{display:inline-block; font-size:16px; color:#fff; padding:14px 45px; background:#007aff; transition:all .35s;}
#main .banner .btn>a:hover{opacity:.8;}
#main .banner .btn>a.url{display:inline-block; font-size:16px; color:#fff; border:4px solid #fff !important; background:none !important; color:#fff !important;  padding:10px 45px; background:#007aff; margin-left:20px; transition:all .35s;}
#main .banner .btn>a.url img{margin-right:6px; height:18px; width:auto;}

#main .advantage{margin:0 auto; width:100%;height:100%;background:url("../img/advantage_bg.jpg") no-repeat;background-size:cover;}
#main .advantage .wrap{width:90%;margin:0 auto; box-sizing:border-box;padding-top:12%;}
#main .advantage .container{ position:relative; width:30%;}
#main .advantage .container>.title{font-size:36px; color:#30bafc;}
#main .advantage .container>.text{font-size:16px; color:#fff; padding-top:40px; line-height:28px;}
#main .advantage .container>.content{margin:0 auto;padding:60px 0;}
#main .advantage .container>.content li{ position:relative; left:-120%; display:block;float:left;width:50%; cursor:pointer; text-align:center; font-size:18px; color:#30bafc; margin-bottom:30px; transition:all .35s;}
#main .advantage .container>.content li>img{display:block;margin:0 auto 20px auto;}
#main .advantage .container>.content li:hover{transform:translateY(-10px);}
#main .advantage .img{ position:relative; right:-120%; width:60%;text-align:right;}
#main .advantage .img>img{width:100%;height:auto;}


.advantage_text{padding:50px; text-align:left; display:none;}
.advantage_text>h2{display:block; color:#007aff;font-weight:normal;}
.advantage_text>.txt{padding:20px 0; font-size:14px; line-height:26px;}


#main .solution{margin:0 auto; width:100%;height:100%;background:url("../img/solution_bg.jpg") no-repeat;background-size:cover;}
#main .solution .wrap{width:86%;max-width:1360px;margin:0 auto;padding:100px 0;}
#main .solution .nav{margin:0 auto;padding:0 50px; border-bottom:1px solid rgba(255,255,255,.2);}
#main .solution .nav>a{ position:relative; display:inline-block; font-size:30px; padding:20px 40px; color:#fff;}
#main .solution .nav>a.A{color:#30bafc;}
#main .solution .nav>a.A:after{position:absolute;z-index:1;left:0; bottom:0; width:100%;height:3px; background:#30bafc;content:''; }
#main .solution .container{position: relative;opacity:0; bottom: -120%; width:60%; margin:0 auto; height:300px;text-align:left; box-sizing:border-box;padding:120px 0;}
#main .solution .container .icon{width:20%;}
#main .solution .container .txt{ width:72%; font-size:16px; color:#fff; line-height:28px;}
#main .solution .container .hide{display:none;}


#main .structure{margin:0 auto; width:100%;height:100%;background:url("../img/structure_bg.jpg") no-repeat;background-size:cover;}
#main .structure .wrap{width:86%;max-width:1360px;margin:0 auto;padding:100px 0;}
#main .structure .title{font-size:36px; color:#30bafc;}
#main .structure .text{font-size:16px; color:#fff; padding-top:20px; line-height:28px;}
#main .structure .content{ position:relative; opacity:0; bottom:-120%; text-align:center; padding:50px 0;margin:0 auto;}
#main .structure .content>img{width:100%;height:auto;}


#main .process{margin:0 auto; width:100%;height:100%;background:url("../img/process_bg.jpg") no-repeat;background-size:cover;}
#main .process .wrap{ width:86%;max-width:1360px; margin:0 auto; text-align:left;}
#main .process .title{font-size:30px;color:#30bafc; font-weight:normal;}
#main .process .content{padding:50px 0;margin:0 auto;position:relative;opacity:0; text-align:center;}
#main .process .content>img{width:100%;height:auto;}

#main .foot{margin:0 auto; background:#003975;}
#main .foot .wrap{ width:90%; max-width:1600px;margin:0 auto;padding:80px 0;box-sizing:border-box; }
#main .foot .content{ text-align:left;padding:90px;padding-top:0 !important;padding-bottom:40px; margin-left:30px; box-sizing:border-box; border-right:1px solid rgba(255,255,255,.1);}
#main .foot .content>.hotline{ font-size:14px; color:#fff;}
#main .foot .content>.hotline>h2{font-size:30px; color:#fff;}
#main .foot .content>.txt{display:block; padding-top:20px; font-size:16px; color:rgba(255,255,255,.6); line-height:30px; transition:all .35s;}
#main .foot .content>.url{display:block; padding-top:20px;}
#main .foot .content>.url>a{display:inline-block; background:rgba(144,235,258,.5); color:#fff; font-size:14px;padding:8px 20px;}
#main .foot .qrcode{padding-left:15%;text-align:right;box-sizing:border-box;}
#main .foot .qrcode>.item{display:inline-block; text-align:center;width:auto;}
#main .foot .qrcode>.item:last-child{margin-left:20px;}
#main .foot .qrcode>.item>img{ display:block; width:180px;height:auto; }
#main .foot .qrcode>.item>p{ display:block;padding:10px 0; color:rgba(255,255,255,.5); font-size:14px;}
#main .foot .copyright{ border-top:1px solid rgba(255,255,255,.1);}
#main .foot .copyright>.wrap{padding:30px 0;text-align:left;color:rgba(255,255,255,.5); font-size:14px;}
#main .foot .copyright a{display:inline-block; color:rgba(255,255,255,.5); transition:all .35s;}
#main .foot .copyright a:hover{text-decoration:underline; color:rgba(255,255,255,.8);}







@media only screen and (max-width: 1580px){
  #main .foot .content{ padding:90px 60px;}

}

@media only screen and (max-width: 1480px){

  #main .banner .title{font-size:40px;}
  #main .banner .subtitle{font-size:45px;}
  #main .banner .text{ width:80%;}
  #main .advantage .container>.content li>img{ width:120px; height:auto;}
  #foot .copyright>.wrap{text-align:center;}
}

@media only screen and (max-width: 1380px){
  #main .advantage .wrap{padding-top:9%;}
  #main .advantage .container>.content{padding:30px 0;}
  #main .advantage .container>.text{font-size:14px;padding-top:20px; line-height:26px;}
  #main .advantage .container>.content li{ font-size:16px; margin-bottom:10px;}
  #main .advantage .container>.content li>img{width:100px;}
  #main .structure .content{ padding:20px 0; box-sizing:border-box; height:460px;}
  #main .structure .content>img{width:auto;height:100%;}
  #main .process .wrap{ padding-top:9%;}
  #main .process .title{font-size:30px;}
  #main .process .content{padding:20px 0; top:-50px;}
  #main .process .content>img{width:90%;height:auto;}
}

@media only screen and (max-width: 1200px){

  #head .menu>ul{display:none;}
  #head .menu>.mob{ display:block; position:absolute; right:180px;top:0; width:100px; height:100%; background:rgba(255,255,255,.1); border-left:1px solid rgba(255,255,255,.2); cursor:pointer;}
  #head .menu>.mob>.btn {position: absolute;top:50%; left:50%; z-index: 9; margin-top:-16px; margin-left:-16px; display: block;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;width:32px;height:32px;-webkit-tap-highlight-color: transparent;-ms-touch-action: manipulation;touch-action: manipulation;}
  #head .menu>.mob>.btn>span { position: relative; display:block; margin-top:16px;}
  #head .menu>.mob>.btn>span,#head .menu>.mob>.btn>span:after,#head .menu>.mob>.btn>span:before { display: block;width:32px;height: 2px;background-color: #fff;transition-duration: .4s;-webkit-transition-property: background-color,-webkit-transform;-moz-transition-property: background-color,-moz-transform; -o-transition-property: background-color,-o-transform; transition-property: background-color,transform;}
  #head .menu>.mob>.btn>span:after,.menu>.mob>.btn>span:before { position: absolute; content: "";}
  #head .menu>.mob>.btn>span:before {top: -10px;}
  #head .menu>.mob>.btn>span:after {top: 10px;}
  #head .menu>.mob.active{background:rgba(48,186,252,.8);}
  #head .menu>.mob.active>.btn span { background-color: transparent;}
  #head .menu>.mob.active>.btn span:after,#head .menu>.mob.active>.btn span:before {background-color:#fff;}
  #head .menu>.mob.active>.btn span:before {-webkit-transform: translateY(10px)rotate(45deg);-moz-transform: translateY(10px)rotate(45deg);transform: translateY(10px)rotate(45deg);-ms-transform: translateY(10px)rotate(45deg);}
  #head .menu>.mob.active>.btn span:after {-webkit-transform: translateY(-10px)rotate(-45deg);-moz-transform: translateY(-10px)rotate(-45deg);transform: translateY(-10px)rotate(-45deg);-ms-transform: translateY(-10px)rotate(-45deg);}

  #headmob{ display:none; position:fixed;z-index:999;left:0;top:100px; width:100%; height:100%; background:rgba(48,186,252,.8);}
  #headmob>ul{ width:90%; margin:0 auto;padding:20px 0;}
  #headmob>ul>li{display:block; border-bottom:1px solid rgba(255,255,255,.1);}
  #headmob>ul>li:last-child{border-bottom:0 !important;}
  #headmob>ul>li>a{display:block; padding:20px 0; text-align:left;color:#fff; font-size:16px;}

  #main .banner .text{font-size:14px; line-height:26px;}
  #main .banner .btn>a{font-size:14px;}

  #main .solution .container{ width:80%;}


  #main .advantage .wrap{padding-top:8%;}



  #main .advantage .container{width:30%;}
  #main .advantage .container>.title{font-size:30px; color:#30bafc;}
  #main .advantage .container>.text{font-size:12px; padding-top:20px;}
  #main .advantage .container>.content li{font-size:16px;}
  #main .advantage .container>.content li>img{width:100px; height:auto;}
  #main .advantage .img{width:60%; padding-top:30px;}



  #main .structure .content{ padding:50px 0; height:auto;}
  #main .structure .content>img{width:100%;height:auto;}

  #main .process .wrap{ padding-top:8%}
  #main .process .content{padding:50px 0; top:0;}
  #main .process .content>img{width:100%;height:auto;}





  #main .foot .content{ padding:90px; padding-left:0 !important; margin-left:0; border-left:0 !important;}
  #main .foot .qrcode{float:right!important; padding-left:0;}

}

@media only screen and (max-width: 980px){
  #main .advantage .container{ float:none; width:100%; box-sizing:border-box;padding:0 10%;}
  #main .advantage .container>.content li{width:25%; font-size:16px; margin-bottom:0;}
  #main .advantage .img{ float:none; width:100%;text-align:center;padding:0 50px; box-sizing:border-box;}
  #main .advantage .img>img{width:100%;height:auto;}
  #main .solution .nav>a{ font-size:24px;}
  #main .solution .container{ width:80%;}
  #main .solution .container .icon>img{width:120px; height:auto;}

}

@media only screen and (max-width: 800px){

  #main .banner .wrap{top:30%; margin-left:-40%; width:80%; text-align:center;}
  #main .banner .title{font-size:40px;text-align:center;}
  #main .banner .subtitle{font-size:36px; text-align:center;}
  #main .banner .text{ width:100%;text-align:left;}
  #main .banner .btn{text-align:center;}

  #main .solution .nav>a{ font-size:20px; width:33.33%; float:left; box-sizing:border-box;padding:20px 0;}
  #main .solution .container{ width:100%; }

  #main .foot .content{ width:50%;}
  #main .foot .qrcode{width:50%; padding:0;}
  #main .foot .qrcode>.item>img{ width:120px;}


}
@media only screen and (max-width: 760px){
  #main .foot .wrap{ padding:30px 10px;}
  #main .foot .content{ float:none; width:100%; border:0;padding:0; padding-bottom:30px; border-bottom:1px solid rgba(255,255,255,.1) !important;}
  #main .foot .qrcode{ float:none; width:100%; padding:0; padding-top:30px; text-align:left;}
}





@media only screen and (max-width: 640px){
  #head{background:rgba(48,186,252,.2);}
  #head .logo{ line-height:60px;}
  #head .logo img{height:36px;}
  #head .back-home>a{width:80px; height:60px; line-height:60px;color:#fff;}
  #head .back-home>a>img{width:60px;}

  #head .menu>.mob{ right:80px;width:60px;}
  #head .menu>.mob>.btn {margin-top:-12px; margin-left:-12px;width:24px;height:24px;}
  #head .menu>.mob>.btn>span { margin-top:10px;}
  #head .menu>.mob>.btn>span,#head .menu>.mob>.btn>span:after,#head .menu>.mob>.btn>span:before {width:24px;}
  #head .menu>.mob>.btn>span:before {top: -10px;}
  #head .menu>.mob>.btn>span:after {top: 10px;}

  #headmob{top:60px;}
  #headmob>ul>li>a{padding:10px 0;font-size:14px;}

  #main .banner .title{font-size:30px;}
  #main .banner .subtitle{font-size:22px;}
  #main .advantage .container{padding:0 10px;}
  #main .advantage .container>.content{padding-bottom:0 !important;}
  #main .advantage .container>.content li{ width:25%; margin-bottom:20px; font-size:12px;}
  #main .advantage .container>.content li>img{width:60px;}
  #main .advantage .img{padding:0 !important;}

  #main .solution .nav{padding:0;}
  #main .solution .nav>a{ font-size:18px;}
  #main .solution .container{padding:50px 0;}
  #main .solution .container .icon{ float:none; width:100%; margin:0 auto; text-align:center;}
  #main .solution .container .icon>img{width:60px; height:auto;}
  #main .solution .container .txt{ float:none; width:100%; font-size:14px; padding-top:40px; line-height:26px;}
}


@media only screen and (max-width: 420px){
  #main .solution .nav>a{ font-size:14px;}


}
