﻿body { color:#1d1d1d; font-size:14px; font-family:"PingFangSC-Regular","Arial","Microsoft YaHei","宋体"; -webkit-font-smoothing: antialiased; }
html{ overflow-y:scroll;}
form,div,body,img,p,img,dl,dt,dd,h2,h1,h3{ margin:0px; padding:0px; border:0; }
a{ -webkit-tap-highlight-color: transparent; }
a:link{ text-decoration:none; behavior:url(/scripts/blur.htc);}
a:visited{ text-decoration:none;}
a:hover{ text-decoration:none;}
a:focus { -moz-outline-style: none; }
a:active{ outline:none; text-decoration:none;}
em,i{ font-style:normal; }
ul,li{ list-style:none; margin:0; padding:0;}
input,textarea,select{ color:#333; margin:0; padding:0; font-size:12px; font-family:Arial; vertical-align:middle;}
input:focus,textarea:focus{ outline:none;}
/*删除火狐下按钮默认样式*/
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
input[type="file"] > input[type="button"]::-moz-focus-inner{
	border:none; padding:0;
}

/*浮动*/
.clearboth:after{ display:block; clear:both; content:""; overflow:hidden; height:0; }
.clearboth{ *zoom:1;}
.float_l{ float:left;}
.float_r{ float:right;}


/*字体*/
.Arial { font-family:Arial;}
.YaHei { font-family:"microsoft yahei","宋体";}
/* @font-face {
    font-family: "pingfang";
    src: url("pingfangsc.ttf") format("truetype");
} */

/*上下间距*/
.mb5{ margin-bottom:5px;}
.mb10{ margin-bottom:10px;}
.mb15{ margin-bottom:15px;}
.mb18{ margin-bottom:18px;}
.mb20{ margin-bottom:20px;}
.mb25{ margin-bottom:25px;}
.mb30{ margin-bottom:30px;}
.mb35{ margin-bottom:35px;}
.mb40{ margin-bottom:40px;}
.mb45{ margin-bottom:45px;}
.mb50{ margin-bottom:50px;}
.mb60{ margin-bottom:60px;}
.mb80{ margin-bottom:80px;}
.mb100{ margin-bottom:100px;}

/*公用*/
.div100{ width:100%;}
.B{ font-weight:bold;}
.Text_l{ text-align:left;}
.Text_r{ text-align:right;}
.Text_c{ text-align:center;}
.animate{ transition:all ease 0.3s; }

.container{ max-width: 1920px; margin: 0 auto; padding-top: 70px; }
.all{ width:1200px; margin:0 auto; }

.mainHead{ position: fixed; width: 100%; height: 70px; z-index: 100010; background: #fff; box-shadow: 0 0 15px rgba(25,27,41,0.2); }
.mainHead .all{ position: relative; height: 100%; }
.mainHead .mainMenu{ position: absolute; right: 30px; top: 0; }
.mainHead .mainMenu a{ display: inline-block; position: relative; color: #000; width: 80px; text-align: center; margin: 0 15px; vertical-align: middle; line-height: 70px; transition: all 0.3s ease; }
.mainHead .mainMenu a span{ display: block; position: relative; overflow: hidden; }
.mainHead .mainMenu a span::after{ position: absolute; content: ''; width: 100%; left: 0; bottom: 0; height: 0; background: #e7141a; transition: all 0.2s ease; }
.mainHead .mainMenu a:hover span::after,.mainHead .mainMenu a.active span::after{ height: 2px; }
.mainHead .mainMenu a:hover,.mainHead .mainMenu a.active{ color: #e7141a; }
.mainLogo{ position: absolute; left: 0; top: 0; height: 100%; }
.mainLogo a{ display: block; height: 100%; }
.mainLogo a img{ height: 100%; }

.mainHead .mainBtn{ position:absolute; right:20px; top:24px; width:24px; height:18px; z-index:2; cursor:pointer; background:url(../images/close.gif) no-repeat center; visibility: hidden; opacity: 0; -webkit-tap-highlight-color: transparent; }
.mainHead .mainBtn span{ display:block; width:100%; height:2px; background:#e7141a; position:absolute; left:0; }
.mainHead .mainBtn .sp1{ top:0; transform:translateX(0); transition:all 0.3s ease 1s; }
.mainHead .mainBtn .sp2{ top:8px; background:none; transition:all 0.3s ease 1.1s; transform:rotateY(0); }
.mainHead .mainBtn .sp2 em{ display:block; background:#e7141a; height:2px; }
.mainHead .mainBtn .sp3{ bottom:0; transform:translateX(0); transition:all 0.3s ease 1s; }
.mainHead .mainBtn:hover .sp2 em{ animation: btnmove .5s linear 0s normal forwards 1; }
.mainHead.cur .mainBtn .sp1{ transform:translateX(-100%); transition:all ease 0.3s; opacity:0; }
.mainHead.cur .mainBtn .sp2{ transition:all 0.3s ease 0.1s; transform:rotateY(90deg); }
.mainHead.cur .mainBtn .sp3{ transform:translateX(100%); transition:all ease 0.3s; opacity:0; }

.mainHead .mainClose{ visibility: hidden; opacity: 0; position:absolute; z-index: 1; width:26px; right:20px; top:24px; height:18px; cursor:pointer; background:url(../images/close.gif) no-repeat center; background-size:100% 100%; transform:rotate(0); transition: all 0.3s ease 0.3s; }
.mainHead.cur .mainClose{ z-index: 3; opacity: 1; transition: all 0.4s ease 0.5s; }
.mainHead .mainClose span{ display:block; height:2px; top:50%; margin-top:-1px; background:#e7141a; position:absolute; width:100%; transform:rotate(0); transition:all ease 0.3s; }
.mainHead.cur .mainClose span.sp1{ transform:rotate(45deg); transition:all 0.3s ease 1s; }
.mainHead.cur .mainClose span.sp2{ transform:rotate(-45deg); transition:all 0.3s ease 1s; }

.ziMenu{ position:fixed; width:50%; top: 70px; bottom: 0; left: -51%; box-sizing: border-box; background:#fff; z-index:1002; transition:all 0.4s ease 0.5s; display: none; }
.ziMenu.cur{ left: 0; transition:all 0.4s ease 0.5s; }
.ziMenu .bg{ position:absolute; width:100%; top:40px; }
.ziMenu .bg p{ text-align: center; padding-top: 20px; transform:translateY(-20%); opacity:0; }
.ziMenu .bg p a{ text-decoration: underline; color: #333; }
.ziMenu li{ height:40px; padding: 10px 0; line-height: 40px; text-align:center; transform:translateY(-20%); opacity:0; width: 80%; margin: 0 auto; border-bottom: 1px solid #ddd; }
.ziMenu li.li1{ -moz-transition:all ease 0.3s; transition:all ease 0.3s; }
.ziMenu li.li2{ -moz-transition:all 0.3s ease 0.1s; transition:all 0.3s ease 0.1s; }
.ziMenu li.li3{ -moz-transition:all 0.3s ease 0.2s; transition:all 0.3s ease 0.2s; }
.ziMenu li.li4{ -moz-transition:all 0.3s ease 0.3s; transition:all 0.3s ease 0.3s; }
.ziMenu li.li5{ -moz-transition:all 0.3s ease 0.4s; transition:all 0.3s ease 0.4s; }
.ziMenu p{ -moz-transition:all 0.3s ease 0.4s; transition:all 0.3s ease 0.4s; }
.ziMenu.cur li.li1{ transform:translateY(0); opacity:1; transition:all 0.3s cubic-bezier(.23,.24,.52,1.4) 1.1s; }
.ziMenu.cur li.li2{ transform:translateY(0); opacity:1; transition:all 0.3s cubic-bezier(.23,.24,.52,1.4) 1.2s; }
.ziMenu.cur li.li3{ transform:translateY(0); opacity:1; transition:all 0.3s cubic-bezier(.23,.24,.52,1.4) 1.3s; }
.ziMenu.cur li.li4{ transform:translateY(0); opacity:1; transition:all 0.3s cubic-bezier(.23,.24,.52,1.4) 1.4s; }
.ziMenu.cur li.li5{ transform:translateY(0); opacity:1; transition:all 0.3s cubic-bezier(.23,.24,.52,1.4) 1.5s; }
.ziMenu.cur li.li6{ transform:translateY(0); opacity:1; transition:all 0.3s cubic-bezier(.23,.24,.52,1.4) 1.6s; }
.ziMenu.cur p{ transform:translateY(0); opacity:1; transition:all 0.3s cubic-bezier(.23,.24,.52,1.4) 1.5s; }
.ziMenu li a{ display:inline-block; width: 100%; font-size:20px; color:#000; text-align:center; height:100%; position:relative; transition:all ease 0.5s; text-align: left; }
.ziMenu li a.active{ color: #e7141a; }

.mainMask{ background: rgba(0,0,0,0.7); position: fixed; width: 100%; height: 100%; left: 0; top: 0; z-index: 1000; display: none; visibility: hidden; opacity: 0; }

.mainFoot{ padding-top: 50px; background: url(../images/repeat.png) repeat-x bottom; }
.mainFoot .topbox{ display: flex; justify-content: space-between; align-items: center; padding-bottom: 40px; }
.mainFoot .topbox .flogo{ width: 20%; }
.mainFoot .topbox .add{ display: flex; justify-content: space-between; color: #504f59; width: 65%; }
.mainFoot .topbox .add .li1{ background: url(../images/ficon1.png) no-repeat left center; padding-left: 20px; }
.mainFoot .topbox .add .li2{ background: url(../images/ficon2.png) no-repeat left center; padding-left: 30px; }
.mainFoot .topbox .add .li3{ background: url(../images/ficon3.png) no-repeat left center; padding-left: 35px; }
.mainFoot .topbox .add a{ color: #504f59 }
.mainFoot .topbox .code{ text-align: center; }
.mainFoot .topbox .code img{ display: inline-block; margin-bottom: 10px; width: 120px; }

.mainFoot .copy{ line-height: 80px; text-align: center; color: #bfbec1; font-size: 12px; border-top: 1px solid #ececef; }

.scrollTop{ position: fixed; bottom: 100px; right: 60px; width: 45px; height: 45px; background: #e7141a; color: #fff; font-size: 14px; border-radius: 50px; padding-top: 20px; box-sizing: border-box; text-align: center; cursor: pointer; font-family: Arial; transition: all 0.3s ease; z-index: 100; display: none; }
.scrollTop:hover{ opacity: 0.8; }
.scrollTop::after{ position: absolute; content: ''; top: 3px; left: 50%; margin-left: -7px; border: 7px solid; border-color: transparent transparent #fff transparent; }

.mainPage{ padding-top: 40px; text-align: center; }
.mainPage a{ display: inline-block; width: 30px; height: 30px; line-height: 30px; border-radius: 5px; background: #e3e7ea; color: #9d9ea0; text-align: center; margin: 0 5px; }
.mainPage a:hover,.mainPage a.active{ background: #e7141a; color: #fff; }

@media (any-hover: hover) {
  .mainFoot .share a.wechat:hover img{ visibility: visible; opacity: 1; transform: translateY(0); }
}
@media only screen and (max-width: 1260px) {
    .all{ width: 100%; padding: 0 20px; box-sizing: border-box; }
    .mainLogo{ left: 20px; }
    .mainHead .mainMenu{ right: 20px; }
    .mainHead .mainMenu .btn{ margin-right: 30px; font-size: 16px; }
}
@media only screen and (max-width: 1050px) {
    .mainHead .mainMenu .btn{ margin-right: 20px; }
    .scrollTop{ display: none !important; }
}
@media only screen and (max-width: 820px) {
    .mainHead .mainBtn{ visibility: visible; opacity: 1; }
    .mainHead .mainMenu{ display: none; }
    .mainMask{ visibility: visible; opacity: 1; }
    .ziMenu{ display: block; }
    .mainHead .mainClose{ visibility: visible; }
    .mainFoot .topbox{ flex-wrap: wrap; }
    .mainFoot .topbox .flogo{ width: 50%; order: 1; }
    .mainFoot .topbox .code{ order: 2; width: 100%; }
    .mainFoot .topbox .add{ width: 100%; order: 1; margin-bottom: 20px; }
}
@media only screen and (max-width: 510px) {
    .mainFoot{ padding-top: 30px; }
    .mainFoot .topbox{ padding-bottom: 30px; }
    .mainFoot .topbox .add{ flex-wrap: wrap; margin-bottom: 0 }
    .mainFoot .topbox .add div{ width: 50%; margin-bottom: 20px; box-sizing: border-box; }
    .mainFoot .topbox .add .li1{ width: 100% }
    .mainFoot .copy{ line-height: 60px; }
}