@font-face { font-family: 'PingFang Medium'; src: url(''); }
@font-face { font-family: 'PingFang Bold'; src: url(''); }
@font-face { font-family: 'PingFang Light'; src: url(''); }
@font-face { font-family: 'PingFang Regular'; src: url(''); }

html, body { height: 100%; }
body { max-width: 1920px; margin: 0 auto; padding: 0; font: 14px/1.8 "PingFang SC","\5FAE\8F6F\96C5\9ED1",arial; color: #000; }
article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary { display: block; }
audio, canvas, progress, video { display: inline-block; vertical-align: baseline; }
audio:not([controls]) { display: none; height: 0; }
[hidden], template { display: none; }
a { background: transparent; text-decoration: none; -webkit-tap-highlight-color: transparent; color: #333; }
a:focus, a:hover { color: #8ec31f; text-decoration: none; }
abbr[title] { border-bottom: 1px dotted; }
b, strong { font-weight: bold; }
img { border: 0; vertical-align: middle; max-width: 100%; border: none; margin: 0; }
svg:not(:root) { overflow: hidden; }
em, i { font-style: normal; }
hr { -moz-box-sizing: content-box; box-sizing: content-box; height: 0; }
pre { overflow: auto; white-space: pre; white-space: pre-wrap; word-wrap: break-word; }
code, kbd, pre, samp { font-family: monospace, monospace; font-size: 1em; }
button, input, optgroup, select, textarea { color: inherit; font: inherit; margin: 0; }
button { overflow: visible; }
button, select { text-transform: none; }
button, html input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: button; cursor: pointer; }
button[disabled], html input[disabled] { cursor: default; }
button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }
input { line-height: normal; }
input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; }
input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { height: auto; }
input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; }
legend { border: 0; padding: 0; }
textarea { overflow: auto; resize: vertical; }
optgroup { font-weight: bold; }
table { border-collapse: collapse; border-spacing: 0; }
td, th { padding: 0; }
html, button, input, select, textarea { font-family: "Microsoft YaHei"; }
input::-moz-placeholder, textarea::-moz-placeholder { color: #666; }
input:-ms-input-placeholder, textarea:-ms-input-placeholder { color: #666; }
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { color: #666; }
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, h5, h6, p, figure, form, blockquote { margin: 0; }
ul, ol, li, dl, dd { margin: 0; padding: 0; }
li { list-style: none; }
ul, ol { list-style: none outside none; }
.fl { float: left; }
.fr { float: right; }
.left { float: left; }
.right { float: right; }
.tr { text-align: right; }
.tl { text-align: left; }
.tc { text-align: center; }
.clear { clear: both; height: 0px; line-height: 0px; zoom: 1; }
.clear:before, .clear:after { content: ""; display: table; }
.clear:after { clear: both; }
.clearfix:after,
.clearfix:before { content: ""; display: table; clear: both; }
.clearfix:after { clear: both; zoom: 1; }
.rel { position: relative; }
.abs { position: absolute; }
.ov { overflow: hidden; }
input, textarea { font-family: "Microsoft yahei"; font-size: 0.14rem; color: #fff; border: none; outline: medium none; }
.wrapper { overflow: hidden; }
.container { margin: 0 auto; width: 1280px; }
span.en { font-family: 'DINCond-Mediumf17bc02ea5a8d'; }

@media (min-width: 1025px) {
    
    ::-webkit-scrollbar { width: 6px; height: 6px; }
    ::-webkit-scrollbar-track { -webkit-border-radius: 3px; background-color: rgba(113, 112, 107, .1); }
    ::-webkit-scrollbar-thumb:vertical { -webkit-border-radius: 3px; background-color: rgba(0, 0, 0, .2); }
    ::-webkit-scrollbar-thumb:vertical:hover,
    ::-webkit-scrollbar-thumb:horizontal:hover { background: rgba(0, 0, 0, .5); }
    ::-webkit-scrollbar-thumb:horizontal { -webkit-border-radius: 3px; background-color: rgba(0, 0, 0, .2); }
    ::-webkit-scrollbar-corner { background-color: transparent; }
}


.menu-bar { position: absolute; z-index: 9999; display: none; right: 15px; top: 50%; margin-top: -12px; -webkit-transition: -webkit-transform .25s ease-out; -webkit-transition: top .25s ease-in-out; -webkit-transition: top .25s ease-in-out; -webkit-transition: top .25s ease-in-out; -webkit-transition: top .25s ease-in-out; -webkit-transition: top .25s ease-in-out; -webkit-transition: top .25s ease-in-out; -webkit-transition: top .25s ease-in-out; -webkit-transition: top .25s ease-in-out; -webkit-transition: top .25s ease-in-out; -webkit-transition: top .25s ease-in-out; -webkit-transition: top .25s ease-in-out; -webkit-transition: top .25s ease-in-out; -webkit-transition: top .25s ease-in-out; -webkit-transition: top .25s ease-in-out; -webkit-transition: top .25s ease-in-out; -webkit-transition: top .25s ease-in-out; -webkit-transition: top .25s ease-in-out; -webkit-transition: top .25s ease-in-out; -webkit-transition: top .25s ease-in-out; -webkit-transition: top .25s ease-in-out; -webkit-transition: top .25s ease-in-out; -webkit-transition: top .25s ease-in-out; -webkit-transition: top .25s ease-in-out; -webkit-transition: top .25s ease-in-out; -webkit-transition: top .25s ease-in-out; -webkit-transition: top .25s ease-in-out; -webkit-transition: top .25s ease-in-out; -webkit-transition: top .25s ease-in-out; -webkit-transition: top .25s ease-in-out; -webkit-transition: top .25s ease-in-out; -webkit-transition: top .25s ease-in-out; -webkit-transition: top .25s ease-in-out; -webkit-transition: top .25s ease-in-out; -webkit-transition: top .25s ease-in-out; -webkit-transition: top .25s ease-in-out; -webkit-transition: top .25s ease-in-out; -webkit-transition: top .25s ease-in-out; -webkit-transition: top .25s ease-in-out; -webkit-transition: top .25s ease-in-out; -webkit-transition: top .25s ease-in-out; transition: transform .25s ease-out; transition: top .25s ease-in-out; }
.menu-bar .btn-menu { display: block; box-sizing: border-box; width: 30px; text-align: center; text-decoration: none; border-bottom: none; }
.menu-bar .btn-menu .menu-line { display: block; width: 30px; height: 3px; margin: 8px auto; border-radius: 1px; background-color: #ffffff; }
.menu-bar .btn-menu .menu-line.menu-line-top { margin-top: 0; -webkit-transition: -webkit-transform .25s ease-out, background-color .25s ease-out; transition: transform .25s ease-out, background-color .25s ease-out; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); -webkit-transform-origin: 0 50%; -ms-transform-origin: 0 50%; transform-origin: 0 50%; }
.menu-bar.is-open .btn-menu .menu-line.menu-line-top { width: 36px; -webkit-transform: rotate(45deg) translate(-1px, -1px) scaleX(1); -ms-transform: rotate(45deg) translate(-1px, -1px) scaleX(1); transform: rotate(45deg) translate(-1px, -1px) scaleX(1); background-color: #ffffff; }
.menu-bar .btn-menu .menu-line.menu-line-middle { -webkit-transition: opacity .25s ease-out, background-color .25s ease-out; transition: opacity .25s ease-out, background-color .25s ease-out; opacity: 1; }
.menu-bar.is-open .btn-menu .menu-line.menu-line-middle { opacity: 0; }
.menu-bar .btn-menu .menu-line.menu-line-bottom { margin-bottom: 0; -webkit-transition: -webkit-transform .25s ease-out, background-color .25s ease-out; transition: transform .25s ease-out, background-color .25s ease-out; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); -webkit-transform-origin: 0 50%; -ms-transform-origin: 0 50%; transform-origin: 0 50%; }
.menu-bar.is-open .btn-menu .menu-line.menu-line-bottom { width: 36px; -webkit-transform: rotate(-45deg) translate(-2px, 1px) scaleX(1); -ms-transform: rotate(-45deg) translate(-2px, 1px) scaleX(1); transform: rotate(-45deg) translate(-2px, 1px) scaleX(1); background-color: #ffffff; }



#Header { width: 100%; z-index: 99; position: relative; left: 0; top: 0; background: #da333d; height: 60px; }
#Header .container{ position: relative; }
#Header .logo { padding: 10px 0; float: left; position: absolute; left: 0; top: 0; z-index: 99; }
#Header .logo img{ height: 40px;}
#Header.active { box-shadow: 0px 0px 5px #888; }
.Header_nav{ padding: 0 10%; }
.nav-ul .nav-li{ position: relative; margin: 0 7%;}
.nav-ul .nav-li a{ padding: 0 25px; font-size: 16px; color: #fff; line-height: 60px; padding: 0 ;  text-transform: uppercase;}
.nav-down{ display: none; position: absolute; left: 50%; transform: translateX(-50%); width: 200px; top: 60;}
.nav-down li{ text-align: center; background: rgba(218, 51, 61, 0.8);}
.nav-down li a{ font-size: 14px; color: #fff; line-height: 40px; display: block;} 
.nav-down li:hover{ background: rgba(218, 51, 61, 1);}
.tool-li{ position: absolute; right: 0; top: 0; padding: 10px 0;}
.tool-search { position: absolute; left: 0; top: 70%; width: 100%; display: none; }
.Header .myform { border: 1px solid #555; width: 790px; height: 70px; overflow: hidden; box-sizing: border-box; margin: 0 auto; }
.Header .myform input { font-size: 14px; color: #898888; line-height: 70px; height: 70px; padding: 0 20px; float: left; background: none; border: none; }
.Header .myform input[name="KeyWord"] { width: 90%; }
.Header .myform input[type="submit"] { width: 10%; border-left: none; background: url('../image/icon-s.png') no-repeat center center; background-size: 16px; }
.language-bar{ color: #fff; }
.language-bar a{ display: inline-block; margin:0 5px;  font-size: 16px; color: #fff; line-height: 40px;  padding: 0 10px;}



#Footer { position: relative; background: #0f0f0f; padding: 40px 0; }
.footer .main { padding-bottom: 30px; }
.footer .main .left { float: left; }
.footer .main .right { float: right; }
.f-nav { color: #555; }
.f-nav a { font-size: 14px; color: #9c9b9b;  text-transform: uppercase;  line-height: 30px; padding: 0 10px; font-family: Arial; }
.f-nav a:first-child{padding-left: 0;}
.f-nav a:hover { color: #fff; }
.f-tool h3 { font-size: 14px; color: #fff; line-height: 30px; float: left; font-weight: 100; }
.tool-list { float: left; }
.tool-list li { float: left; margin: 0 10px; }
.tool-list a { display: block; width: 30px; height: 30px;font-size: 0; opacity: 0.8; filter: alpha(opacity=80); }
.tool-list .icon_wb { background: url(../image/icon01.png) no-repeat center; background-size: 100%; }
.tool-list .icon_wx { background: url(../image/icon02.png) no-repeat center; background-size: 100%; }
.tool-list .icon_tm { background: url(../image/icon03.png) no-repeat center; background-size: 100%; }
.tool-list .icon_jd { background: url(../image/icon04.png) no-repeat center; background-size: 100%; }
.tool-list a:hover { opacity: 1; filter: alpha(opacity=100); }
#Footer .bottom { padding-top: 20px; font-family: Arial; }
#Footer .bottom .left p { font-size: 14px; color: #9c9b9b; line-height: 30px;  font-family: Arial;}
#Footer .bottom .left a { font-size: 14px; color: #9c9b9b; line-height: 30px; display: inline-block; margin: 0 10px; }
.link_con { position: relative; }
.link_con .name { display: block; height: 46px; width: 280px; border: 1px solid #383838; padding: 0 20px; font-size: 14px; color: #b6b6b6; line-height: 46px; background: url('../image/icon_sj01.jpg') no-repeat right 20px center; }
.link_con .link_son { position: absolute; bottom: 46px; width: 100%; text-align: center; background: #fff; display: none; }
.link_con .link_son a { font-size: 14px; color: #333; line-height: 40px; display: block; }
.link_con .link_son a:hover { background: #000; color: #fff; }



#fixedTop { position: fixed; right: 5%; bottom: 6%; width: 46px; height: 46px; border-radius: 2px; z-index: 999; cursor: pointer; opacity: 0; filter: alpha(opacity=0); transition: all 0.5s linear; -moz-transition: all 0.5s linear; -webkit-transition: all 0.5s linear; transform: translateY(300%); -moz-transform: translateY(300%); -webkit-transform: translateY(300%); }
#fixedTop.show { opacity: 1; filter: alpha(opacity=1); transform: translateY(0); -moz-transform: translateY(0); -webkit-transform: translateY(0); }



.bg-colCode { display: none; background-image: url('../image/bg-col.png'); position: fixed; z-index: 997; width: 100%; height: 100%; left: 0; top: 0; }
.fixedQcrod { display: none; position: fixed; width: 360px; height: 180px; left: 50%; top: 50%; margin-left: -180px; margin-top: -60px; z-index: 998; }
.fixedQcrod .Qcrod01 { position: absolute; left: -140px; width: 140px; opacity: 0.3; }
.fixedQcrod .Qcrod02 { position: absolute; right: -140px; width: 140px; opacity: 0.3; }
.fixedQcrod .pic { box-shadow: 0 0 15px #000; width: 140px; height: 140px; }
.fixedQcrod .pic img { margin: 0 auto; width: 100%; max-width: 100%; }
.fixedQcrod p { font-size: 16px; color: #fff; line-height: 50px; text-align: center; }

.contactus-pup{ display: none; position: fixed; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, .2); z-index: 99999; }
.contactus-pup .container{ position: relative; height: 100vh;}
.contactus-pup .cont{ font-size: 16px; color: #666; line-height: 24px; background: #fff; padding: 50px 42px; position: absolute; width: 100%; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); border-radius: 10px;}
.contactus-pup .cont .pup-left{ float: left; width: 49%; }
.contactus-pup .cont .pup-right{ float: right; width: 49%; }
.contactus-pup .cont .close-btn{  position: absolute; right: 15px; top: 15px; width: 40px; height: 40px; border-radius: 50%; cursor: pointer; }
.pup-title{ margin-bottom: 20px; }
.pup-title h3{font-size: 24px; color: #000; line-height: 50px; text-transform: capitalize; font-weight: 400; }
.pup-left dl{ margin-bottom: 20px;}
.pup-left dt{ font-size: 18px; color: #333333; margin-bottom: 10px;}
.pup-left dd { margin-top: 15px; line-height: 24px;}
.pup-left dd img{ margin-right: 10px; }
.pup-left .dl2{ margin-top: 50px; padding-top: 30px; border-top: 1px solid #f8f8f8;}
.pup-right .myform{ margin-top: 20px;}
.form-list li{ float: left; width: 100%;}
.form-list li:first-child{ width: 48%; margin-right: 4%;}
.form-list li:nth-child(2){ float: left; width: 48%;}
.form-list .form-item{ margin-bottom: 20px; }
.form-list .fi-label{ font-size: 16px; color: #000000; line-height: 24px; margin-bottom: 5px;}
.form-list .fi-label .i-star{ color: #d80b0b; }
.form-list .fi-cont{ border: 1px solid #cccccc; border-radius: 5px; }
.form-list .fi-cont .error-span{ display: none;}
.form-list .fi-cont input,.form-list .fi-cont textarea{ width: 100%; display: block; color: #333; font-size: 16px; line-height: 22px; padding: 10px 20px; border-radius: 5px; overflow: hidden; outline: none; }
.form-list .fi-cont textarea{ }
.form-list .fi-cont input::placeholder,.form-list .fi-cont input::-ms-input-placeholder { color: #d6d6d6; }
.btn-send{ display: block; width: 100%; background: #da333d; border-radius: 5px; font-size: 18px; line-height: 50px; border: none; color: #fff;}


@media (min-width: 1200px) {
    .nav-ul{  display: flex; justify-content:center;}
    .nav-ul li a:hover, .nav-ul .nav-li.cur a { color: #fff; }
    
}

@media (max-width: 1360px) {
    .container { width: 980px; }
}

@media (max-width: 1025px) {
    .container { width: 100%; padding: 0 30px; }

       
    .nav-ul { position: absolute; top: 60px; left: 0;  width: 100vw;  background: #fff; display: none; overflow: hidden; }
    .nav-ul .nav-li { margin: 0; float: none; width: 100%; text-align: left; padding: 10px 0; border-bottom: 1px solid #f1f1f1; }
    .nav-ul .nav-li a { font-size: 16px; color: #939393; line-height: 36px; padding: 0 10px; display: inline-block; text-align: left;  transition: all 0.3s linear; position: relative; }
    .nav-ul .nav-li .nav-down{ padding-left: 30px; display: block; position: relative;left: auto; top: auto; width: 100%; transform: translateX(0);}
    .nav-ul .nav-li .nav-down li{ background: none;  text-align: left; border-top: 1px solid #f1f1f1; }
    .nav-ul .nav-li .nav-down li a{ font-size: 14px; line-height: 36px; text-align: left;}
    .News .owl-theme .owl-dots .owl-dot span { width: 12px; height: 12px; border-radius: 50%; }
    .News .owl-theme .owl-dots .owl-dot.active span, .News .owl-theme .owl-dots .owl-dot:hover span { background: #000; }

    .contactus-pup .cont{ padding: 10px; font-size: 12px; }
    .contactus-pup .cont .pup-left{ display: none;}
    .contactus-pup .cont .pup-left,.contactus-pup .cont .pup-right{ width: 100%;}
    .pup-left dl{ margin-bottom: 0;}
    .pup-left dd{ margin: 0;}
    .pup-left .dl2{ margin: 0; padding-top: 10px;}
    .pup-title{ margin: 0;}
    .pup-title h3{ font-size: 20px; line-height: 1.5;}
    .pup-right .myform{ width: 100%; height: auto; margin-top: 10px;}
    .form-list .fi-label{ margin-bottom: 0;}
    .form-list .form-item{ margin-bottom: 10px;}
    .form-list .fi-cont input, .form-list .fi-cont textarea{ font-size: 14px; line-height: 40px; height: 40px; padding: 0 10px;}

}

@media (max-width: 768px) {
    #Header .container{ height: 60px;}
    .menu-bar{ display: block;}
    .tool-li{ right: 55px;}
    .container { width: 100%; padding: 0 20px; }   
    .myform { width: 80%; }
    #Footer .bottom .left { margin-bottom: 20px; float: none; width: 100%; }
    #Footer .bottom .right { float: none; width: 100%; }
    .link_con .name { width: 100%; }
    .contactus-pup .cont .close-btn{ top: 5px; right: 5px;}
}

@media (max-width: 640px) {
    .container { width: 100%; padding: 0 15px; }
    .tool-ul li { margin-left: 15px; }
    .menu-text { display: none; }
    .tool-search { top: 80%; }
    .myform { height: 50px; }
    .myform input { line-height: 50px; height: 50px; }
    .myform input[name="KeyWord"] { width: 78%; }
    .myform input[type="submit"] { width: 20%; }
    #Footer { padding: 20px 0; }
    .footer .main { padding-bottom: 10px; }
    .footer .main .left { float: none; text-align: left; margin-bottom: 10px; }
    .footer .main .right { float: none; padding-left: 10px; }
    #Footer .bottom { padding-top: 10px; }
}

@media (max-width: 480px) {
    .nav-ul li a { font-size: 18px; line-height: 40px; }
    #Footer .bottom .left p { font-size: 14px; text-align: left; }
}

@media (max-width: 420px) {
    #Header .logo { width: 180px; }
    #Footer .bottom .left a{margin: 0;}
    .nav-ul li a { font-size: 16px; }
}

@media (max-width: 360px) {
    .tool-ul .icon { display: none; }
}

@media (max-width: 321px) {
}