/* reset */
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
dl,
dt,
dd,
ul,
ol,
li,
form,
button,
input,
textarea,
th,
td {
  margin: 0;
  padding: 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: 100%;
}
ul,
ol {
  list-style: none;
}
input,
textarea {
  outline: none;
  font-family: "Microsoft YaHei", Arial, Helvetica, sans-serif;
}
input:-webkit-autofill {  
    -webkit-box-shadow: 0 0 0px 1000px white inset !important;  
}
/* set font-family */
em {
  font-style: normal;
}
img {
  border: 0;
  vertical-align: middle;
}
textarea {
  resize: none;
}
table {
  border-collapse: separate;
  border-spacing: 0;
  border-color: #808080;
}
input:-moz-placeholder,
textarea:-moz-placeholder {
  color: #999;
}
input::-moz-placeholder,
textarea::-moz-placeholder {
  color: #999;
}
input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
  color: #999;
  opacity: 1;
}
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
  color: #999;
}
a {
  text-decoration: none;
  outline: medium none;
  color: #333;
  cursor:pointer;
}
a:hover {
  text-decoration: none;
  color: #000;
}
html {
  font-size: 12px;
  _background-image: url(/about:blank);
  _background-attachment: fixed;
}
/*for ie 6*/
body {
  _background-attachment: scroll;
}
/*for ie 6*/
.fl {
  float: left;
}
.fr {
  float: right;
}
.f12 {
  font-size: 12px;
}
.f14 {
  font-size: 14px;
}
.text-left {
  text-align: right;
}
.text-center {
  text-align: center;
}
.text-right {
  text-align: right;
}
.hidden {
  display: none;
}
.clearfix:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}
.clearfix {
  zoom: 1;
}
.ov {
  overflow: hidden;
}
.align-justify {
  text-align: justify;
  -ms-text-justify: distribute-all-lines;
  text-justify: distribute-all-lines;
}
.align-justify:after {
  content: '';
  width: 100%;
  display: inline-block;
  font-size: 0;
  line-height: 0;
}
html, body {
  font-family: "微软雅黑";
  color: #333;
  font-size: 12px;
}
body {
  padding-top: 60px;
}
.wrap {
  width: 83.3333333%;
  margin:0 auto;
}
header{
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  height: 60px;
  background: #FFF;
    -webkit-box-shadow: 0 0px 15px rgba(0, 0, 0, .2);
    -moz-box-shadow: 0 0px 15px rgba(0, 0, 0, .2);
    -o-box-shadow: 0 0px 15px rgba(0, 0, 0, .2);
    box-shadow: 0 0px 15px rgba(0, 0, 0, .2);
}
.logo {
  height: 100%;
}
.logo img{
  height: 100%;
  max-height: 60px;
}
.navbar {
  height: 100%;
  background: #FFF;
}
.navbar li {
  position: relative;
  height: 60px;
  margin:0 20px;
  float: left;
}
.navbar li a {
  display: block;
  text-align: center;
  line-height: 60px;
  font-size: 15px;
  color: #666;
}

.navbar li span {
   display: block;
   width: 0px;
   height: 4px;
   background:  #F39800;
   margin: auto;
   margin-top: -4px;
}

.navbar li.active a {
   color: #F39800;
}

.navbar li.active span {
    width: 100%;
 }

.navbar li:hover span {
  width: 100%;
  -webkit-transition: all 0.5s linear -1ms;
  -moz-transition: all 0.5s linear -1ms;
  -ms-transition: all 0.5s linear -1ms;
  -o-transition: all 0.5s linear -1ms;
  transition: all 0.5s linear -1ms;
}

.navbar .child-one{ width: 120px; height: auto; background: #FFF; text-align: center; position: absolute; top: -560px; left: 50%; transform: translateX(-50%);}
.navbar .child-one .child-one-ul{ width: auto; overflow: hidden; }
.navbar .child-one .child-one-item { display: inline-block; width: 100px; height: 40px; line-height: 40px;}
.navbar .child-one .child-one-item p { height: 40px; line-height: 40px; text-align: center; font-size: 16px; color: #333;}

.navbar li:hover .child-one { top: 60px; transition: all 0.3s; }
.navbar .child-one .child-one-item:hover p{ color: #F39800; }

.serarch-btn {
   margin-top: 22.5px;
   margin-left: 20px;
}
.top-menu-btn { display: none; }
.top-menu-btn{width:44px;height:44px;line-height:44px;font-size:26px;position:absolute;top:50%;right:10px;text-align:center;background-color:#FFF;
-webkit-transform:translate( 0, -50%);
transform:translate( 0, -50%);
}
.top-menu-btn span{width: 26px; height: 3px; background-color: #4E4E4E; display: block; border-radius: 999px; position: absolute; top: 20px; left: 9px; -webkit-transition-duration: .8s; transition-duration: .8s; -webkit-transition-property: all; transition-property: all;}
.top-menu-btn span:before,.top-menu-btn span:after{width: 100%; height: 100%; background: #4E4E4E; border-radius: 999px; content: ''; position: absolute; left: 0; -webkit-transition: -webkit-transform 0.5s; transition: transform 0.5s; -webkit-transition-property: all; transition-property: all;}
.top-menu-btn span:before {-webkit-transform: translateY(-250%); transform: translateY(-250%);}
.top-menu-btn span:after{-webkit-transform: translateY(250%);transform: translateY(250%);}
.top-menu-btn span.on{background-color: transparent; -webkit-transition-duration: .5s; transition-duration: .5s; -webkit-transition-property: all; transition-property: all;}
.top-menu-btn span.on:before{-webkit-transform: translateY(0); transform: translateY(0); -webkit-transform: rotate(45deg); transform: rotate(45deg);}
.top-menu-btn span.on:after{-webkit-transform: translateY(0); transform: translateY(0); -webkit-transform: rotate(-45deg); transform: rotate(-45deg);}

.time300ms{ -webkit-transition:300ms; -moz-transition:300ms; -ms-transition:300ms; transition:300ms;}

footer { background: #262A33 url(footer_bg.jpg) no-repeat center center; height: 330px;}
.footer-main { width: 98%; margin: auto; }
.footer-main .head-title {margin-top: 60px; margin-bottom: 20px;}
.footer-main .head-title p{ height: 40px; line-height: 40px; font-size: 32px; text-align: center; }
.footer-main .head-title p.p1 {color: #FFF;}
.footer-main .head-title p.p2 {color: #4D535F;}

.third-party{ width: 100%; overflow: hidden; margin-top: 40px; }
.third-party .item { float: left; width: 33.3333333%; position: relative;}
.third-party .item i { display: block; width: 121px; height: 121px; border-radius: 50%; margin: auto; background-size: cover;}
.third-party .item h1 { height: 50px; line-height: 50px; font-size: 22px; color: #FFF; font-weight: 400; width: 50%; margin: auto; text-align: center;}
.third-party .item .ewm { width: 102px; padding:10px; background: #FFF; border-radius: 10px; position: absolute;}
.third-party .item .ewm img { width: 102px; height: 102px; }
.third-party .item .ewm span{width: 0;height: 0;border-top: 5px solid transparent;border-right: 10px solid #FFF;border-bottom: 5px solid transparent; position: absolute; top: 50%; left: -10px; transform: translateY(-5px);}
.third-party .item .ewm.action { top:50%; left: 80%; transform: translateY(-81px); z-index: 2; transition: 0.3s all;}
.third-party .item-weibo i { background: url(/tpl/www/images/footer_icon01.png) no-repeat;}
.third-party .item-weixin i { background: url(/tpl/www/images/footer_icon02.png) no-repeat;}
.third-party .item-join i { background: url(/tpl/www/images/footer_icon03.png) no-repeat;}
.third-party .item-weibo:hover i { background: url(/tpl/www/images/footer_icon01_hover.png) no-repeat;}
.third-party .item-weixin:hover i { background: url(/tpl/www/images/footer_icon02_hover.png) no-repeat;}
.third-party .item-join:hover i { background: url(/tpl/www/images/footer_icon03_hover.png) no-repeat;}
.footer-contact { padding-top: 60px; }
.footer-contact .contact-info { width: 30%; float: left; }
.footer-contact .contact-info p{ line-height: 40px; font-size: 14px; color: #FFF; }
.footer-contact .contact-form { width: 50%; float: left; }
.footer-contact .contact-ewm { width: 20%; float: left; text-align: center; }
.footer-contact .contact-ewm img{ max-width: 112px; border-radius: 5px; }


.contact-name { width: 48%; height: 50px; background: #FFF; float: left; position: relative;}
.contact-name:nth-child(2) {float: right;}
.contact-name label{ font-size: 14px;
    color: #666;
    position: absolute;
    left: 15px;
    z-index: 2;
    line-height: 50px;
    height: 50px; }
.contact-name input{ position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 1;  text-indent: 85px;border: none;}





.contact-form-input { width: 48%; height: 50px; background: #FFF; float: left; position: relative;}
.contact-form-input:nth-child(2) {float: right;}
.contact-form-input label{ font-size: 14px;
    color: #666;
    position: absolute;
    left: 15px;
    z-index: 2;
    line-height: 50px;
    height: 50px; }
.contact-form-input input{ position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 1;  text-indent: 85px;border: none;}



.contact-form-textarea { width: 100%; height: 100px; background: #FFF; margin-top: 10px; float: left; position: relative;}
.contact-form-textarea label {font-size:14px; color: #666; position: absolute; top: 20%; transform: translateY(-6px); left: 15px; z-index: 2;font-size: 14px;}
.contact-form-textarea textarea { width: 100%; height: 100px; line-height: 50px; position: absolute; top: 0; left: 0; text-indent: 85px; z-index: 1;border: none;font-size: 14px; }

.contact-form-btn a{ display: block; float: right; width: 20%; color: #FFF; font-size: 16px; text-align: center; background: #F39800; }
.contact-form-btn:hover a { width: 30%; transition: 0.3s all; }

.contact-form-btn input{ width: 100%; height: 50px; line-height: 50px; float: left; margin-top: 10px; }
.contact-form-btn input{ display: block; float: right; width: 20%; color: #FFF; font-size: 16px; text-align: center; background: #F39800; }
.contact-form-btn:hover input { width: 30%; transition: 0.3s all; }

.copyright{padding-top:15px;height:100px;line-height: 70px; background: #262A33; }
.copyright p { margin:10px;color: #ddd; text-align: center; font-size: 14px; }
.copyright p a { color: #FFF; }

.fixed-right-box{ width: 38px; height: auto; position: fixed; bottom: 3%; right: 2%; display: none}
.fixed-right-box a{ display: block; width: 38px; height: 38px; margin-bottom: 10px; }
.go-top{ background: url(/tpl/www/images/top_icon.png) no-repeat center center; }
.go-top:hover{}
/**@会员中心 start**/

@media screen and (min-width:750px) and (max-width:1260px) {
    body { padding-top: 60px; }
    header { height: 60px; }
    .header-main { width: 90%; }
    .logo a{  display: block; height: 60px; }
    .navbar li { height: 60px; }
    .navbar li a {line-height: 60px;}
    .child-one { display: none; }
    .serarch-btn { display: none; }

    .footer-main { width: 83.3333333%; }
    .third-party .item i { width: 80px; height: 80px; background-position: center; background-size: cover;}
    .third-party .item h1 { font-size: 18px; height: 40px; line-height: 40px; }

    .search-wrapper { display: none; }
    .footer-main .head-title {margin-top: 20px;}
    .footer-main .head-title p{ height: 30px; line-height: 30px; font-size: 24px; text-align: center; }
}

@media screen and (min-width:319px) and (max-width:749px) {
    body { padding-top: 60px; }
    header { height: 60px; }
    .header-main { width: 98%; }
    .logo a{  display: block; height: 60px; }
    .navbar { position: fixed; top: 60px; left: 0px; width: 100%; opacity: 0;transform: scale(0.2);-webkit-transform: scale(0.2);-moz-transform: scale(0.2);-o-transform: scale(0.2);transform-origin: right top;-webkit-transform-origin: right top;-moz-transform-origin: right top;-o-transform-origin: right top;}
    .navbar.on { opacity: 1; transform: scale(1); }
    .navbar li { height: 40px; width: 100%; border-bottom: 1px solid #333; line-height: 40px; margin: 0;  background: #262A33; }
    .navbar li a { line-height: 40px; color: #FFF; }
    .child-one { display: none; }
    .serarch-btn { display: none; }
    .top-menu-btn { display: block;}

    footer { height: auto; }
    .footer-main { width: 96%; }
    .third-party .item i { width: 60px; height: 60px; background-position: center; background-size: cover;}
    .third-party .item h1 { font-size: 14px; height: 30px; line-height: 30px; width: 100%; }
    .footer-contact { padding-top: 30px;  }
    .footer-contact .contact-info { width: 100%; }
    .footer-contact .contact-form { width: 100%; }
    .footer-contact .contact-ewm { width: 100%; float: left; text-align: center; margin-top: 20px; }
    .footer-contact .contact-ewm img{ max-width: 112px; border-radius: 5px; }
    .contact-form-input { width: 100%; margin: 0; margin-bottom: 10px; }
    .contact-form-btn a { width: 100%; }
    .contact-form-btn:hover { width: 100%; }
    .copyright { line-height: 30px; }
    .search-wrapper { display: none; }

    .footer-main .head-title {margin-top: 20px;}
    .footer-main .head-title p{ height: 30px; line-height: 30px; font-size: 24px; text-align: center; }
}

.search-wrapper {
 position:absolute;
 -webkit-transform:translate(-15%, -50%);
 -moz-transform:translate(-15%,-50%);
 transform:translate(-15%, -50%);
 top:50%;
 right: 2%;
 z-index: 3;
}
.search-wrapper.active {
}
.search-wrapper .input-holder {
 overflow:hidden;
 height: 45px;
 background: #F39800;
 border-radius:25px;
 position:relative;
 width:45px;
 -webkit-transition:all .3s ease-in-out;
 -moz-transition:all .3s ease-in-out;
 transition:all .3s ease-in-out
}
.search-wrapper.active .input-holder {
 border-radius:50px;
 width:450px;
 background:rgba(0,0,0,.8);
 -webkit-transition:all .5s cubic-bezier(0,.105,.035,1.57);
 -moz-transition:all .5s cubic-bezier(0,.105,.035,1.57);
 transition:all .5s cubic-bezier(0,.105,.035,1.57)
}
.search-wrapper .input-holder .search-input {
 width:100%;
 height:45px;
 padding:0 70px 0 20px;
 opacity:0;
 position:absolute;
 top:0;
 left:0;
 background:0 0;
 -webkit-box-sizing:border-box;
 -moz-box-sizing:border-box;
 box-sizing:border-box;
 border:0;
 outline:0;
 font-family:open sans,Arial,Verdana;
 font-size:16px;
 font-weight:400;
 line-height:20px;
 color:#fff;
 -webkit-transform:translate(0,60px);
 -moz-transform:translate(0,60px);
 transform:translate(0,60px);
 -webkit-transition:all .3s cubic-bezier(0,.105,.035,1.57);
 -moz-transition:all .3s cubic-bezier(0,.105,.035,1.57);
 transition:all .3s cubic-bezier(0,.105,.035,1.57);
 -webkit-transition-delay:.3s;
 -moz-transition-delay:.3s;
 transition-delay:.3s
}
.search-wrapper.active .input-holder .search-input {
 opacity:1;
 -webkit-transform:translate(0,0px);
 -moz-transform:translate(0,0px);
 transform:translate(0,0px)
}
.search-wrapper .input-holder .search-icon {
 width:45px;
 height:45px;
 border:0;
 border-radius: 25px;
 background: url(/tpl/www/images/search_icon.png) no-repeat center center;
 background-size: cover;
 padding:0;
 outline:0;
 position:relative;
 z-index:2;
 float:right;
 cursor:pointer;
 -webkit-transition:all .3s ease-in-out;
 -moz-transition:all .3s ease-in-out;
 transition:all .3s ease-in-out
}
.search-wrapper.active .input-holder .search-icon {
 border-radius:50px
}

.search-wrapper .close {
 position:absolute;
 z-index:1;
 top:10px;
 right:20px;
 width:25px;
 height:25px;
 cursor:pointer;
 -webkit-transform:rotate(-180deg);
 -moz-transform:rotate(-180deg);
 transform:rotate(-180deg);
 -webkit-transition:all .3s cubic-bezier(.285,-.45,.935,.11);
 -moz-transition:all .3s cubic-bezier(.285,-.45,.935,.11);
 transition:all .3s cubic-bezier(.285,-.45,.935,.11);
 -webkit-transition-delay:.2s;
 -moz-transition-delay:.2s;
 transition-delay:.2s
}
.search-wrapper.active .close {
 right:-50px;
 -webkit-transform:rotate(45deg);
 -moz-transform:rotate(45deg);
 transform:rotate(45deg);
 -webkit-transition:all .6s cubic-bezier(0,.105,.035,1.57);
 -moz-transition:all .6s cubic-bezier(0,.105,.035,1.57);
 transition:all .6s cubic-bezier(0,.105,.035,1.57);
 -webkit-transition-delay:.5s;
 -moz-transition-delay:.5s;
 transition-delay:.5s
}
.search-wrapper .close::before,.search-wrapper .close::after {
 position:absolute;
 content:'';
 background:#F39800;
 border-radius:2px
}
.search-wrapper .close::before {
 width:5px;
 height:25px;
 left:10px;
 top:0
}
.search-wrapper .close::after {
 width:25px;
 height:5px;
 left:0;
 top:10px
}
.search-wrapper .result-container {
 width:100%;
 position:absolute;
 top:80px;
 left:0;
 text-align:center;
 font-family:open sans,Arial,Verdana;
 font-size:14px;
 display:none;
 color:#b7b7b7
}
@media screen and (max-width:560px) {
 .search-wrapper.active .input-holder {
  width:200px
 }
}
<!--耗时1764897067.1688秒-->