@charset "utf-8";

@import url(iconfont/iconfont.css);/*icon*/

/* CSS Document */
body,td,th,input,textarea,select{font-family: -apple-system, Arial, 'Helvetica Neue', 'Microsoft YaHei','PingFang SC', 'Source Han Sans SC', 'Noto Sans CJK SC', 'WenQuanYi Micro Hei', 'sans-serif'; color:#5f5f5f; outline:none;}
html{font-size: 62.5%;}
html,body{background: #fff; width:100%; height: 100%;}
html,body,form{margin: 0;}
img{border:0 none; vertical-align:middle; outline:none; max-width:100%; width:auto; height:auto;}
ul,dl{display:block; margin:0; padding:0;}
ul,dl{display:block; margin:0; padding:0;}
table {	border-collapse: collapse;}
ul, li {list-style: none;border: 0 none;padding: 0;margin:0;}
a,button,input,img,div,p,li,span{border:0 none; outline:none; -webkit-tap-highlight-color:rgba(0,0,0,0); -webkit-tap-highlight-color:transparent;}
a{text-decoration:none; color:#777; outline:none; -webkit-tap-highlight-color:rgba(0,0,0,0); -webkit-tap-highlight-color:transparent;}
a:active{color:#000;}
* { margin: 0;padding: 0;list-style: none;outline:none;box-sizing:border-box; }
form {margin: 0;}
img {border: 0 none;text-align-last: center;vertical-align: middle;}
center {text-align: left;	color: #999;height: 50px;}
#clear, .clear {clear: both;float: none!important;background: none;width: 0 !important;	height: 0 !important;margin:0 !important;padding: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; }
.mob{display:none;}
::-webkit-scrollbar {width:8px;height: 1px;}
::-webkit-scrollbar-thumb {-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2); background:#666;}
::-webkit-scrollbar-track {-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);border-radius: 10px;background: #ededed;}

.wrap{width:86%;max-width:1360px; margin:0 auto;}



#head{ position:fixed;z-index:1000; left:0;top:0; width:100%; height:70px; transition:all .35s;}
#head>.wrap{ position:relative; width:86%; max-width:1360px; margin:0 auto;}
#head .logo{ position:absolute;z-index:90; left:0;top:0; display:inline-block; text-align:left;transition:all .35s;}
#head .logo>a{display:inline-block; line-height:70px;}
#head .logo>a>img{vertical-align:middle; height:32px;width:auto;}
#head .logo>a>img.white{display:inline-block;}
#head .logo>a>img.black{display: none;}
#head .menu{width:auto;text-align:center;margin:0 auto;}
#head .menu>.click{display:none;}
#head .menu>.navbox, #head .menu>.navbox>ul{margin:0 auto;}
#head .menu>.navbox>ul>li{display:inline-block; vertical-align:top;}
#head .menu>.navbox>ul>li>a{ position:relative; display:block;line-height:70px;text-align:center;overflow:hidden; font-size:1.6rem; font-weight:700; color:rgba(255,255,255,1); padding:0 30px;transition:all .35s;}
#head .menu>.navbox>ul>li>a:after{position:absolute;z-index:2;left:0;bottom:0;width:0;height:3px; background:rgba(0,0,0,1); content:''; transition:all .35s;}
#head .menu>.navbox>ul>li>a:hover:after{ width:100%;}
#head .lang{position:absolute; right:40px; top:0;padding:0 10px;}
#head .lang>a{ position:relative; display:block;padding:0 25px; font-size:1.5rem; font-weight:700; line-height:70px;color:rgba(255,255,255,1);transition:all .35s;}
#head .lang>a:after{ position:absolute;z-index:2; right:0;top:50%;margin-top:-10px; font-family:iconfont; content:'\e688'; text-align:center; width:20px;height:20px; line-height:20px; transition:all .35s;}
#head .lang>div{ display:none; position:absolute;z-index:4;left:0; background:rgba(255,255,255,1); width:100%; text-align:center; }
#head .lang>div>a{display:block;line-height:70px; font-size:1.5rem; font-weight:600; color:rgba(170,170,170,1); transition:all .35s; }
#head .lang>div>a:hover{color:rgba(40,40,40,1);}
#head .search{ position:absolute;z-index:9; right:0; top:0; line-height:70px;}
#head .search>a{display:block;}
#head .search>a>i{font-size:2.4rem; color:rgba(255,255,255,1);}


#head:hover, #head.active{background:rgba(255,255,255,1); box-shadow:0 2px 8px rgba(0,0,0,.1);}
#head:hover .logo img.white, #head.active .logo img.white{display: none;}
#head:hover .logo img.black, #head.active .logo img.black{display: inline-block;}
#head:hover .menu>.navbox>ul>li>a, #head.active .menu>.navbox>ul>li>a{color:rgba(0,0,0,1);}
#head:hover .lang>a, #head.active .lang>a{color:rgba(0,0,0,1);}
#head:hover .lang>a:after, #head.active .lang>a:after{ color:rgba(0,0,0,1);}
#head:hover .search>a>i, #head.active .search>a>i{color:rgba(0,0,0,1);}



#search{ display: none; position: fixed;z-index: 1002; left: 0;top: 0;width: 100%;height: 100%; background: rgba(0,0,0,.8);}
#search .close{  position: relative; text-align: center; margin: 0 auto; cursor: pointer; }
#search .close:after{position: absolute;z-index: 3; left:50%;top: -30px; margin-left: -50px; background: rgba(255,64,0,1); width: 100px; height: 100px; border-radius: 100%; transform: scale(1.4); content: '';}
#search .close>i{ position: relative;z-index: 9; display: inline-block; font-size: 5rem; color: #fff; transition: all .8s;}
#search .close>i:hover{transform: rotate(360deg);}
#search form{ position: absolute;z-index: 8; left: 50%;top: 50%; margin-top: -25px; margin-left: -25%; width:50%; height:50px;background:rgba(255,255,255,.9); border-radius: 8px;overflow: hidden; }
#search form>input[type="text"]{outline: medium;float:left;height:50px;line-height:50px;width:80%; padding-left: 20px; border:none; background: none;  font-size:14px;color:#777;box-sizing:border-box;overflow:hidden;}
#search form>input::-webkit-input-placeholder{ color:rgba(0,0,0,.4);}
#search form>button{ position: relative;float:right;width:120px;height:50px; line-height: 50px; text-transform: uppercase; font-size: 1.5rem;font-weight: 600; text-shadow: 0 1px 4px rgba(0,0,0,.2); border:none; background: rgba(255,64,0,1);  color: rgba(255,255,255,1);cursor:pointer;box-sizing:border-box;overflow:hidden;}
#search form>button>i{vertical-align: top;font-size: 2rem; }











#title{ width: 86%; max-width: 1360px; margin: 0 auto; padding-top: 80px; border-bottom: 1px solid #ccc;}
#title>h3{ position: relative; font-size: 2.8rem; color: rgba(0,0,0,1); display: inline-block;padding: 10px; margin-left: 10px;}
#title>h3:after{position: absolute;z-index: 1; left: 0;bottom: -1px; width: 100%;height: 2px; background: rgba(255,64,0,1); content: '';}
#title>h3>a{display: inline-block; color: rgba(0,0,0,1); transition: all .35s;}
#title>h3>a:hover{color: rgba(255,64,0,1);}

#path{padding: 30px 0; font-size: 1.6rem; color: #999;}
#path>a{display: inline-block; color: #999; transition: all .35s;}
#path>a:hover{text-decoration: underline;}

#page{margin: 0 auto; padding: 50px 0 100px 0;}
#page>.pagenum{ margin: 0 auto; text-align: center;}
#page>.pagenum>a{display: inline-block; vertical-align: top; border: 1px solid #ddd; font-size: 1.4rem; margin-left: -1px; overflow: hidden; height: 40px; width: 40px; line-height: 40px; text-align: center;}
#page>.pagenum>a.active{ background: rgba(255,64,0,1); border: 1px solid rgba(255,64,0,1); color: #fff;}


#foot{ position:relative; margin:0 auto;background:#f6f6f6;}
#foot .navbox{position:relative;padding:80px 0;}
#foot .navbox>.box{text-align:left; width:30%;}
#foot .navbox>.box>.logo>img{height:36px;width:auto;}
#foot .navbox>.box>.contact{padding:30px 0;width:70%; font-size:1.4rem; line-height:1.6rem;color:rgba(0,0,0,.8);}
#foot .navbox>.box>.sms{padding:10px 0; text-align:left;}
#foot .navbox>.box>.sms>div{ position:relative; display:inline-block; vertical-align:top; margin-right:15px;}
#foot .navbox>.box>.sms>div>p{display:none; position:absolute;z-index:8; left:50%; bottom:36px; margin-left:-65px; width:130px;background:rgba(0,0,0,.7);padding:10px;border-radius:5px; font-size:1.3rem;color:rgba(255,255,255,1);}
#foot .navbox>.box>.sms>div>p:after{ position:absolute;z-index:24; left:50%;bottom:-12px; margin-left:-6px; width:0;height:0;border: 6px solid transparent;border-top-color: rgba(0,0,0,.7); content:'';}
#foot .navbox>.box>.sms>div>p>img{width:100%;height:auto;}
#foot .navbox>.box>.sms>div>i{font-size:2.8rem;color:rgba(0,0,0,.7); cursor:pointer;}
#foot .navbox>.box>.sms>div:hover p{display:block;}

#foot .navbox>.nav{text-align:left; width:70%;}
#foot .navbox>.nav>ul>li{ position:relative; display:block;float:left;box-sizing:border-box; padding-right:10%;}
#foot .navbox>.nav>ul>li:nth-child(1){width:60%;}
#foot .navbox>.nav>ul>li>a{display:block;font-size:1.6rem; color:rgba(0,0,0,1); font-weight:700;}
#foot .navbox>.nav>ul>li>div{text-align:left;padding:15px 0;}
#foot .navbox>.nav>ul>li>div>a{display:block; padding:5px 0; font-size:1.3rem; color:rgba(0,0,0,.8); transition:all .35s;}
#foot .navbox>.nav>ul>li>div.multiple>a{float:left;width:50%;}

#foot .navbox>.nav>ul>li span{display:inline-block;background-image: linear-gradient(transparent calc(100% - 1px), rgba(0,0,0,.8) 1px);background-repeat: no-repeat;background-size: 0 100%; transition:all .35s;}
#foot .navbox>.nav>ul>li a:hover span{background-size: 100% 100%;}
#foot .navbox>.gotop{position:absolute;z-index:99; right:0;top:80px;}
#foot .navbox>.gotop>a{display:block;background:rgba(0,0,0,1);color:rgba(255,255,255,1); padding:10px; transition:all .35s;}
#foot .navbox>.gotop>a>i{font-size:2rem;}
#foot .navbox>.gotop>a:hover{background:rgba(255,64,0,1);}

#foot .copy{background:#333;font-size:1.4rem;color:rgba(255,255,255,1); text-align:center;padding:20px 0;}





@media only screen and (max-width: 1200px){

    #head>.wrap{position: inherit; width: 100%;max-width: inherit;}
    #head .logo{left: 5%;}
    #head .menu{ position: absolute;z-index: 3; right: 2%;top: 0;}
    #head .menu>.click{display:block; width: 70px;height: 70px; cursor: pointer; }
    #head .menu>.click>.btn {position: absolute;top:50%; left:50%; z-index: 9; margin-top:-14px; margin-left:-14px; display: block;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;width:28px;height:28px;-webkit-tap-highlight-color: transparent;-ms-touch-action: manipulation;touch-action: manipulation;}
    #head .menu>.click>.btn>span { position: relative; display:block; margin-top:14px;}
    #head .menu>.click>.btn>span,#head .menu>.click>.btn>span:after,#head .menu>.click>.btn>span:before { display: block;width:28px;height: 2px; border-radius: 3px; background-color: rgba(255,64,0,1);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>.click>.btn>span:after,.menu>.click>.btn>span:before { position: absolute; content: "";}
    #head .menu>.click>.btn>span:before {top: -9px;}
    #head .menu>.click>.btn>span:after {top: 9px;}
    #head .menu>.click-active>.btn span { background-color: transparent;}
    #head .menu>.click-active>.btn span:after,#head .menu>.mob>.btn.active span:before {background-color:rgba(255,64,0,1);}
    #head .menu>.click-active>.btn span:before {-webkit-transform: translateY(9px)rotate(45deg);-moz-transform: translateY(9px)rotate(45deg);transform: translateY(9px)rotate(45deg);-ms-transform: translateY(9px)rotate(45deg);}
    #head .menu>.click-active>.btn span:after {-webkit-transform: translateY(-9px)rotate(-45deg);-moz-transform: translateY(-9px)rotate(-45deg);transform: translateY(-9px)rotate(-45deg);-ms-transform: translateY(-9px)rotate(-45deg);}
    #head .menu>.navbox{display: none; position: fixed;z-index: 900; top: 70px; right: 0;width: 100%; height: 100%; background: rgba(0,0,0,.9); }
    #head .menu>.navbox>ul{ width: 96%;margin: 0 auto; padding-top: 50px;}
    #head .menu>.navbox>ul>li{display:block; vertical-align:top;}
    #head .menu>.navbox>ul>li>a{ line-height:50px;text-align:left;}
    #head .menu>.navbox>ul>li>a:after{display: none;}
    #head:hover .menu>.navbox>ul>li>a, #head.active .menu>.navbox>ul>li>a { color: rgba(255,255,255,1); }


    #head .lang{display: none;}
    #head .search{display: none;}



}



@media only screen and (max-width: 860px){

    #head .logo>a>img{ height:27px;}



    #foot .navbox>.box>.logo>img{height:24px;}
    #foot .navbox>.box{float: none; width:100%;}
    #foot .navbox>.box>.contact {  padding: 30px 0; width: 100%; }
    #foot .navbox>.nav{display: none;}

    #foot .copy{font-size:1.2rem;}

}