﻿@charset "utf-8";
/* CSS Document */
body{font-family:Roboto-Regular, Arial, Helvetica, sans-serif; font-size: 18px;overflow-x: hidden; color: #222; }
html, body, div, span, h1, h2, h3, h4, h5, h6, p,table, td, blockquote, pre, a, address, big, cite, code, del, em, font, img, ins, small, strong, var, b, u, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend {margin: 0;padding: 0; }
input,select,textarea{font-size: 14px;border:none;margin: 0;padding: 0;}
img{border: 0 none;vertical-align: middle; max-width: 100%; }
a{color: inherit;text-decoration:none;background-color:transparent;}
a:hover{cursor: pointer; }
a:focus,div:focus,input:focus,textarea:focus{outline:none;}
ul, li, dl, dt, dd{list-style: none outside none;}
*{ box-sizing: border-box; }

@font-face {
  font-family: 'Roboto-Bold';
  src: url('fonts/Roboto-Bold.eot');
  src: local('☺'), url('fonts/Roboto-Bold.woff') format('woff'), url('fonts/Roboto-Bold.ttf') format('truetype'), url('fonts/Roboto-Bold.svg') format('svg');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Roboto-Light';
  src: url('fonts/Roboto-Light.eot');
  src: local('☺'), url('fonts/Roboto-Light.woff') format('woff'), url('fonts/Roboto-Light.ttf') format('truetype'), url('fonts/Roboto-Light.svg') format('svg');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Roboto-Regular';
  src: url('fonts/Roboto-Regular.eot');
  src: local('☺'), url('fonts/Roboto-Regular.woff') format('woff'), url('fonts/Roboto-Regular.ttf') format('truetype'), url('fonts/Roboto-Regular.svg') format('svg');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'segoeui_0';
  src: url('fonts/segoeui_0.eot');
  src: local('☺'), url('fonts/segoeui_0.woff') format('woff'), url('fonts/segoeui_0.ttf') format('truetype'), url('fonts/segoeui_0.svg') format('svg');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Nunito-Bold';
  src: url('fonts/Nunito-Bold.eot');
  src: local('☺'), url('fonts/Nunito-Bold.woff') format('woff'), url('fonts/Nunito-Bold.ttf') format('truetype'), url('fonts/Nunito-Bold.svg') format('svg');
  font-weight: normal;
  font-style: normal;
}


@font-face {
  font-family: "iconfont"; /* Project id 3403314 */
  src: url('fonts/iconfont.woff2') format('woff2'),
       url('fonts/iconfont.woff') format('woff'),
       url('fonts/iconfont.ttf') format('truetype');
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-dianhua4:before {
  content: "\e600";
}

.icon-email:before {
  content: "\e689";
}

.icon-jingxinsheji:before {
  content: "\e6a1";
}

.icon-p-vc:before {
  content: "\e638";
}

.icon-shujuxiufu:before {
  content: "\e615";
}

.icon-di3bulurusvg:before {
  content: "\e601";
}

.icon-shouye1:before {
  content: "\e60c";
}

.icon-shouji1:before {
  content: "\e621";
}

.icon--fuwu:before {
  content: "\e8aa";
}

.icon-jiajianzujianjiahao:before {
  content: "\e64d";
}

.icon-fangdajing1:before {
  content: "\e688";
}

.icon-zhiliang1:before {
  content: "\e79b";
}

.icon-fabuzhengshu:before {
  content: "\e611";
}

.icon-jiantou:before {
  content: "\e663";
}

.icon-twitter:before {
  content: "\e89d";
}

.icon-youtube1:before {
  content: "\e8d7";
}

.icon-shouye:before {
  content: "\e62f";
}

.icon-xiazai19:before {
  content: "\e613";
}

.icon-zhuye:before {
  content: "\e6c5";
}

.icon-facebook:before {
  content: "\e6e5";
}

.icon-zixun1:before {
  content: "\e662";
}

.icon-dizhi1:before {
  content: "\e614";
}

.icon-youtube:before {
  content: "\e6ab";
}

.icon-youxiang1:before {
  content: "\e607";
}

.icon-dianhua1:before {
  content: "\e61e";
}

.icon-original-whatapp:before {
  content: "\e60d";
}

.icon-wechat:before {
  content: "\e608";
}

.icon-mean_list:before {
  content: "\e653";
}

.icon-liaotian:before {
  content: "\e6a5";
}

.icon-fangdajing:before {
  content: "\e603";
}

.icon-dianhua:before {
  content: "\e606";
}

.icon-shoujilianxi:before {
  content: "\e620";
}

.icon-dizhi:before {
  content: "\e619";
}

.icon-skype:before {
  content: "\e707";
}

.icon-chuanzhen:before {
  content: "\e616";
}

.icon-in:before {
  content: "\e6f1";
}

.icon-instagram-fill:before {
  content: "\e763";
}

.icon-shouji:before {
  content: "\e612";
}

.icon-dianhua3:before {
  content: "\e618";
}

.icon-dianhua2:before {
  content: "\e60a";
}

.icon-666666-copy:before {
  content: "\ec8d";
}

.icon-WhatsappMessage:before {
  content: "\e841";
}

.icon-Mail:before {
  content: "\e71f";
}

.icon-custom-service:before {
  content: "\e617";
}


.img-responsive{ display: block; width: 100%; height: auto }
.clearfix { *zoom: 1; /* 兼容IE低版本 */}
.clearfix:before,
.clearfix:after{ content: '';  display: table; }
.clearfix:after{ clear: both; }
.fl{ float: left; }
.fr{ float: right; }
.text-overflow-1 { text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}
.text-overflow-2 { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.text-overflow-num { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical;}
.pos-rel{ position: relative; }

body{ padding-top: 135px!important; }
.main{ background: #f8fafb; overflow: hidden; width: 100%;  }
.wrapper{ width:1400px; margin:0 auto; position: relative; }



header{ position: fixed; top: 0; left: 0; background: #fff; height: 135px; width: 100%; z-index: 110; box-shadow: 0 1px 10px 0 rgb(0 0 0 / 20%); }
header:before{ content: ""; position: absolute; top: 0; right: 0; z-index: -1; width: 50%; height: 45px; background: #0b80cd;  }


.logo{ position: absolute; top: 50%; left: 34px; width: 23%; transform: translateY(-50%); }
.head-top{ text-align: right; position: relative; height: 45px; }
.head-link{ margin-top: 10px; display: inline-block; font-size: 16px; overflow: hidden; font-family: Roboto-Light; }
.head-link li{ display: inline-block; padding: 0 22px; position: relative;}
.head-link li:before{ content: ""; position: absolute; top: 3px; right: 0; width: 1px; height: 15px; background: #fff; }
.head-link li *{ vertical-align: middle; }
.head-link li i{ color: #fff; margin-right: 10px; }
.head-link li a{ color: #fff;font-size: 18px; font-weight: 700;font-style: italic;}
.head-link li a strong {
  font-size: 20px;
  font-family: 'arial';
}
.head-link li a:hover{ text-decoration: underline; }
.head-link li:last-child:before{ display: none; }

.head-quote{ position: absolute; right: 0; top: 0;z-index: 9; }
.head-quote a{ background: #ff961d; transition: all 0.3s; font-size: 16px; border-radius: 5px; width: 200px; height: 45px; line-height: 45px; text-align: center; color: #fff; display: inline-block; }
.head-quote a i{ margin-right: 6px; }
.head-quote a:hover{ border-radius: 0;  background: #ff961d;}
/* .head-quote .head-quote-title {
  line-height: 45px;
  color: #fff;
  font-family: 'Roboto-Light';
  font-size: 16px;
  cursor: pointer;
}
.head-quote .head-quote-title img {
  width: 20px;
  margin-right: 10px;
}
.head-quote .head-quote-title .head-quote-lan {
  display: none;
}
.head-quote .head-quote-title:hover .head-quote-lan {
  display: block;
  padding-top: 0!important;
} */
.head-bottom{ position: relative; }
nav{ float: right; margin-right: 55px;}
nav li{ float: left; position: relative; margin: 0 20px; }
nav li > a{ text-transform: capitalize; font-family: Nunito-Bold; line-height: 90px; font-size: 20px; position: relative; display: block; text-align: center; transition:0.5s;}
nav li.on > a,nav li:hover > a{ color: #ff961d; }
nav dl{ transition: opacity 1s ease;position: absolute; box-shadow: 0 3px 9px -5px #000; display: none; background: #fff; min-width: 230px; top: 80px;  left:0; z-index: 999; opacity: 0;  }
nav dl dd{ display: block; position: relative; }
nav li dl dd a{ opacity: 1; background: transparent !important; color: #666 !important; display: block; padding: 12px 12px; text-align: left; white-space: nowrap;font-size:17px;}
nav li dl dd a:hover{ background: #ff961d !important; cursor: pointer; color: #fff !important;}
nav dl dd div{position: absolute; left: 100%; top: 0; background:rgba(1,119,234,.7); display: none;}
nav li:hover dl{ opacity: 1; visibility: visible; }
nav dl dd div a{padding: 12px 12px; color: #fff !important; border-bottom: none; }

.head-search{position: absolute; right: 0; top: 22px; width: 46px;}
.head .search-button{ cursor: pointer; width: 46px; text-align: center;  position: relative; border-radius: 46px; height: 46px; line-height: 46px; display: inline-block; }


#nav .nav-button{ display: none; width: 46px;height: 46px;border-radius: 3px;background: #ff961d; color: #fff;position: absolute; right: 10px; top: 12px;line-height: 46px;text-align: center; font-size: 22px;}
#nav .nav-button i{ color: #fff; font-size: 22px; font-weight: 600; }

.head-search{ position: absolute;  right:0; top: 26px; width: 45px; }
.search-button{ cursor: pointer; width: 45px; text-align: center; position: relative;  border-radius: 45px; height: 45px; line-height: 45px; display: inline-block; }
.search-button i{ color: #333; font-size: 30px;  }
.searchform{ overflow: hidden; background:#00497d;position: absolute; right: 0; height: 0; z-index: 88; top:64px; width: 240px; transition: all .3s;}
.searchform i{ font-size: 24px; color: #fff; }
.searchform input{ width: 190px; background:#ff961d; color: #fff; line-height:51px; padding-left:10px; float: left; }
.searchform button{ width:54px; line-height:51px; background:#ff961d; border: 0; color: #fff; text-align: center; outline: none; cursor: pointer; transition: all .5s; position: absolute; right: 0; top: 0}
.searchform input::-webkit-input-placeholder { color: #fff;}
.searchform input:-moz-placeholder {  color: #fff;}

.close-nav{position: fixed; top:0; left:0; width: 100%;height: 100%;background: #000;opacity: 0;visibility: hidden;transition: 0.5s;z-index: 88;}
.nav-open{ display: block; position: fixed; left: 0; top: 0; bottom: 0; width: 310px; z-index: 99;  overflow: auto; background: #222; transition: 0.3s;}
.nav-open li{ float: none; padding: 0; margin: 0; }
.nav-open li > a,
.nav-open li dl dd a{ color: #fff!important; line-height: normal; display: block;  padding: 15px 20px; border-bottom: 1px solid #2e2e2e; text-align: left;}
.nav-open dl{ position: static; display: block!important; height: auto!important; background: #393a3a; transition: none; opacity: 1; }
.nav-open ul li:hover dl{ display: block!important; }
.close-open{opacity: 0.5;visibility: visible;}
/* .head-bottom .head-quote {
  display: none;
  top: 10px;
  right: 80px;
  width: 70px;
}
.head-bottom .head-quote .head-quote-title {
  text-align: center;
}
.head-bottom .head-quote .head-quote-title img {
  width: 30px;
  margin-right: 10px;
}
.head-bottom .head-quote a{ background:#fff; transition: all 0.3s; font-size: 16px; width: 70px; height: 30px; line-height: 30px; text-align: center; color: #ff961d; display: block;}
.head-quote .head-quote-title:hover .head-quote-lan {
  display: block;
  padding-top: 10px;
} */

.footer{ padding: 50px 0 30px; background: #0b80cd; color: #fff; background: url(../images/footer-bg.jpg) center no-repeat; background-size: cover;}
.f-intro{ width: 18%; }
.f-intro p{ margin-top: 25px; color: #fff; font-size: 16px; font-family: Roboto-Light; line-height: 24px; }
.f-intro .f-media{ margin-top: 20px; position: relative; }
.f-intro .f-media a{ color: #fff; font-size: 16px; border-radius: 30px; background: #a31ea1; width: 30px; height: 30px; line-height: 30px; text-align: center; margin-right: 2%; display: inline-block; }
.f-intro .f-media a:nth-child(2){ background: #4676ed; }
.f-intro .f-media a:nth-child(3){ background: #da0000; }
.f-intro .f-media a:nth-child(4){ background: #00de7d; }
.f-intro .f-media .f-weixin{ display: none; position: absolute; top: 40px; right: 70px;  }
.f-intro .f-media .icon-wechat:hover + .f-weixin{ display: block; }


.f-links{ width: 20%;  margin-left: 3%; }
.footer h3{ font-size: 24px; position: relative; color: #fff; font-family: Nunito-Bold; display: inline-block; }
.footer ul{ margin-top: 20px; }
.footer li{ margin-bottom: 13px; padding-left: 24px; position: relative;}
.f-links li::before{ content: "\e663"; font-weight: bold; color: #ff961d; font-size: 12px; font-family: iconfont; position: absolute; top: 3px; left: 0; }

.f-contact{ width: 27%; margin-left: 4%; }
.f-contact i{ position: absolute; top: 3px; left: 0; color: #ff961d;}

.f-form{ width: 26%; }
.f-form form{ margin-top: 20px; }
.f-form .form-item{ margin-bottom: 15px; position: relative; }
.f-form .form-item .LV_validation_message{ position: absolute; left: 0; bottom: -15px; font-size: 12px; color: #c40000; }
.f-form .form-item .LV_valid{ font-size: 0; }
.f-form .txt{ width: 100%; background: #fff; border: none; border-radius: 3px; padding: 2px 18px; font-family: Roboto-Regular; resize: none; color: #000; font-size: 14px; height: 44px; line-height: 44px; border: none; }
.f-form .txt::-webkit-input-placeholder, .f-form textarea::-webkit-input-placeholder{ color: #ccc; }
.f-form .bd-btn{  font-size: 16px; text-transform: uppercase; font-family: Roboto-Bold; transition: all 0.3s; display: block; color: #fff; text-align: center; background: #ff961d; border-radius: 35px; cursor: pointer; }


.copyright{ background: #0569ab; color: #fff; text-align: center; overflow: hidden; font-size: 14px; font-family: Roboto-Light; padding: 18px 0; }



.swt{ width: 40px; position: fixed; top: 30%; right: 0; z-index: 666;}
.swt li{ position: relative; margin-bottom: 1px; transition: all 0.3s; }
.swt li a{ width: 100%; height: 40px; font-size: 20px; text-align: center; line-height: 40px; background: #a31ea1; color: #fff; display: block; }
.swt li a svg{ width: 24px; height: 24px; margin-top: 8px; fill: #fff; }
.swt li:nth-child(2) a{ background: #4676ed; }
.swt li:nth-child(3) a{ background: #da0000; }
.swt li:nth-child(4) a{ background: #78cd51; }
.swt li:nth-child(5) a{ background: #00de7d; }

.swt li a i{ font-size: 20px; }
.swt li span{ display: block; position: absolute; top: 0; line-height: 40px; padding: 0 10px; background: #f2941a; right: -999px; width: 0; font-size: 16px; transition: right 0.5s; }
.swt li:hover{ opacity: 0.9; }
.swt li:hover span{ width: 230px; right: 40px; }
.swt .backToTop a{ background: url(../images/icon_top.png) #ff961d no-repeat center; cursor: pointer; color: #fff; transition: all .3s;}
.swt .weixin span{ background: none; }






@media screen and (max-width: 1680px){
  
}
@media screen and (max-width: 1600px){

}

@media screen and (max-width: 1440px){
  .wrapper{ width: 92%; }
  

  header:before{ width: 72%; }
  .head-link{ margin-right: 250px; }
  
}


@media screen and (max-width: 1366px){

 nav li{ margin: 0 20px; }



}

@media screen and (max-width: 1280px){
  

  .head-link{ margin-right: 170px; }
  .head-link li{ padding: 0 10px; }
  .head-quote a{ width: 160px; }
  nav li{ margin: 0 12px; }
  nav li > a{ font-size: 16px; }
  nav li dl dd a{ font-size: 15px; }
  
}

@media screen and (max-width: 1024px){
  body{ padding-top: 70px!important; }

  .wrapper{ width: 96%; }

  header{ height: auto; }
  .head-top,header:before, nav{ display: none; }
  .logo{ position: static; float: left; transform: translateY(0); width: 180px; padding: 10px 0; }
  .head-search{ right: 55px; top: 12px; }
  #nav .nav-button { display: block; right: 0; }

  .footer{ padding: 30px 0; }
  .footer h3{ font-size: 22px; }
  .f-intro{ display: none; }
  .f-links{ margin-left: 0; width: 24%; }
  .f-contact{ width: 36%; }
  .f-form{ width: 33%; }
  

}
@media screen and (max-width: 991px){
  
}

@media screen and (max-width: 768px){
  .f-links{ display: none;}
  .f-contact{ width: 48%; margin-left: 0; }
  .f-form{ width: 50%; }
  .footer li{ font-size: 14px; line-height: 20px; }
  .f-contact i{ top: -3px; }
}

@media screen and (max-width: 640px){
  .head-bottom .head-quote {
    display: block;
  }
  .f-contact{ width: 100%; }
  .f-form{ width: 100%; margin-top: 15px; }
  
}

@media screen and (max-width: 480px){
  body{ padding-top: 53px!important; }
  .logo{ width: 120px; }

  #nav .nav-button, .search-button{ width: 36px; height: 36px; line-height: 36px; top: 8px; }
  .search-button{ top: -3px; right: -10px; }
}









