body { color:#999; font-size:16px; font-family:"Arial","Microsoft YaHei"; }
html{ overflow-y:scroll;}
form,div,body,img,p,img,dl,dt,dd,h2,h1,h3{ margin:0px; padding:0px; border:0; }
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: "din-b";
    src: url("../fonts/din-bold.TTF") format("truetype");
}
@font-face {
    font-family: "din-l";
    src: url("../fonts/din-light.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{ -moz-transition:all ease 0.3s; -webkit-transition:all ease 0.3s; -o-transition:all ease 0.3s; transition:all ease 0.3s; }
.container{ overflow:hidden; position:relative; }
.main-all{ padding: 0 8%; }

.main-header{ position: fixed; width: 100%; top: 0; left: 0; height: 100px; z-index: 1005; transition: all 0.3s ease; }
.main-header.active{ background: #fff; }
.main-header .main-all{ position: relative; height: 100%; }
.main-header .main-all .flex{ display: flex; justify-content: space-between; height: 100%; align-items: center }



.main-header .main-all .sub-menu .flex{
    display: grid !important;
    gap: 20px;
    grid-template-columns: repeat(4, 1fr);
}
.main-header .main-menu li .sub-menu .list{
    width: 100% !important;
}


.main-header .main-logo{ width: 192px; height: 100%; }
.main-header .main-logo a{ display: block; height: 100%; background: url(../images/logo2.svg) no-repeat center; background-size: 100% auto; }
.main-header.active .main-logo a{ background: url(../images/logo1.svg) no-repeat center; background-size: 100% auto; }
.main-header .main-menu li{ float: left; margin-left: 30px; position: relative; }
.main-header .main-menu li>a{ display: block; position: relative; font-size: 14px; color: #fff; height: 100px; padding: 0 10px; line-height: 100px; overflow: hidden; }
.main-header .main-menu li>a::after{ content: ''; height: 2px; background: #fff; position: absolute; bottom: 0; left: 0; width: 100%; transform: scale(0); transition: all 0.3s ease; }
.main-header.active .main-menu li>a::after{ background: #000; }
.main-header.active .main-menu li>a{ color: #000 }
.main-header .main-menu li>a span{ height: 68px; position: relative; display: block; transition: all 0.3s ease; top: 0; }
.main-header .main-menu li>a em{ top: 68px; color: #007ce3; position: absolute; left: 0; width: 100%; text-align: center; transition: all 0.3s ease; }
.main-header.active .main-menu li>a em{ font-weight: bold; color: #000; }
.main-header .main-menu li:hover>a::after,.main-header.active .main-menu li.active>a::after{ transform: scale(1) }
.main-header .main-menu li:hover span,.main-header .main-menu li.active span{ top: -68px; }
.main-header .main-menu li:hover em,.main-header .main-menu li.active em{ top: 0; }
.main-header .main-menu li .sub-menu{ position: fixed; top: 100px; width: 100%; background: #fff; left: 0; padding: 30px 0 20px; visibility: hidden; opacity: 0; transform: translateY(10%); transition: all 0.3s ease; pointer-events: none; }
.main-header .main-menu li .sub-menu.min{ height: 58px; }
.main-header .main-menu li.now .sub-menu{ opacity: 1; visibility: visible; transform: translateY(0); transition: all 0.3s ease; pointer-events: auto; }
.main-header .main-menu li .sub-menu .flex{ display: flex; padding: 0 8%; justify-content: space-between; flex-wrap: wrap; }
.main-header .main-menu li .sub-menu .list{ width: 24%; box-sizing: border-box; padding: 20px; border-radius: 15px; overflow: hidden; background-color: #f6f6f6; background-size: auto 100%; background-position: center right; background-repeat: no-repeat; margin-bottom: 15px; }
.main-header .main-menu li .sub-menu .text{ width: 60%; }
.main-header .main-menu li .sub-menu .text .max{ font-size: 30px; color: #000; margin-bottom: 20px; }
.main-header .main-menu li .sub-menu .text .min{ line-height: 28px; margin-bottom: 20px; height: 56px; }
.main-header .main-menu li .sub-menu .text .more{ color: #999; }
.main-header .main-menu li .sub-menu .text .more a{ color: #007ce3; }
.main-header .main-menu li .fix-menu{ position: absolute; left: -67px; width: 210px; background: #fff; border-radius: 15px; overflow: hidden; top: 100px; opacity: 0; visibility: hidden; transform: translateY(40px); transition: all 0.1s ease; }
.main-header .main-menu li:hover .fix-menu{ transform: translateY(0); opacity: 1; visibility: visible; transition: all 0.3s ease; }
.main-header .main-menu li .fix-menu a{ display: block; text-align: center; line-height: 60px; color: #666; border-bottom: 1px solid #eaeaea; transition: all 0.3s ease; }
.main-header .main-menu li .fix-menu a:last-child{ border: none; }
.main-header .main-menu li .fix-menu a:hover{ color: #fff; background: #007ce3; }


.main-header .menu-btnbox{ position: relative; }
.main-header .menu-btnbox .com{ text-align: center; margin-right: 45px; }
.main-header .menu-btnbox .com a{ color: #fff; background: #007ce3; border-radius: 50px; padding: 6px 20px; display: inline-block; transition: all 0.3s ease; }
.main-header .menu-btnbox .com a:hover{ background: #056abe; }
.main-header .menu-btnbox .com a span{ display: inline-block; padding-left: 20px; background: url(../images/icon2.png) no-repeat left center; background-size: 13px auto; }
.main-header .menu-btnbox .lan{ width: 32px; border: 1px solid #fff; border-radius: 30px; padding-top: 30px; text-align: center; position: absolute; right: 0; top: 0; background: url(../images/lang.png) no-repeat center top; cursor: pointer; background-size: 31px; height: 30px; overflow: hidden; box-sizing: border-box; transition: all 0.3s ease; }
.main-header.active .menu-btnbox .lan{ border: 1px solid #000; background: #fff url(../images/lang2.png) no-repeat center top; background-size: 31px; }
.main-header .menu-btnbox .lan:hover{ height: 110px; }
.main-header .menu-btnbox .lan a{ display: inline-block; line-height: 30px; width: 30px; color: #fff; margin-top: 5px; font-size: 14px; }
.main-header.active .menu-btnbox .lan a{ color: #000; }
.main-header .menu-btnbox .lan a:hover{ color: #007ce3; }

.main-foot{ background: url(../images/fbg.jpg) no-repeat center; background-size: cover; padding-top: 90px; position: relative; z-index: 1; }
.main-foot .top{ display: flex; flex-wrap: wrap; justify-content: space-between; }
.main-foot .menu{ width: 70%; display: flex; flex-wrap: wrap; }
.main-foot .menu dl{ float: left; margin-right: 10%; }
.main-foot .menu dt{ font-size: 18px; color: #fff; margin-bottom: 15px; }
.main-foot .menu dd a{ color: #999; font-size: 14px; position: relative;line-height: 36px; display: inline-block; transition: all 0.3s ease; }
.main-foot .menu dd a::after{ content: ''; position: absolute; width: 100%; bottom: 3px; height: 1px; background: #fff; left: 0; opacity: 0; transition: all 0.3s ease; }
.main-foot .menu dd a:hover{ color: #fff; }
.main-foot .menu dd a:hover::after{ opacity: 1; }
.main-foot .code{ width: 30%; color: #fff; text-align: right; }
.main-foot .code .max{ font-size: 30px; }
.main-foot .code .min{ margin: 15px 0 20px; }
.main-foot .code .btn a{ display: inline-block; color: #fff; background: #007ce3; width: 108px; line-height: 30px; border-radius: 30px; text-align: center; transition: all 0.3s ease; }
.main-foot .code .btn a:hover{ background: #056abe; }
.main-foot .top{ padding-bottom: 100px; }
.main-foot .media{ border-top: 1px solid #2a2929; border-bottom: 1px solid #2a2929; padding: 30px 0; display: flex; justify-content: space-between; flex-wrap: wrap; align-items: center; }
.main-foot .media .share{ color: #c1c1c1; }
.main-foot .media .share p{ margin-top: 20px; }
.main-foot .media .share a{ display: inline-block; height: 24px; margin-right: 12px; }
.main-foot .media .share a img{ height: 24px; }
.main-foot .media .share a:hover img{ opacity: 1; transition: all 0.3s ease; }
.main-foot .media .follow a{ color: #c1c1c1; line-height: 24px; display: inline-block; margin-left: 70px; }
.main-foot .media .follow a img{ height: 24px; margin-right: 15px; }
.main-foot .copy{ line-height: 90px; color: #5b5b5b; }

.main_mask{ 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; }
.main-header .phone-btn{ 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; }
.main-header .phone-btn span{ display:block; width:100%; height:2px; background:#fff; position:absolute; left:0; }
.main-header .phone-btn .sp1{ top:0; transform:translateX(0); -webkit-transform:translateX(0); -webkit-transition:all 0.3s ease; transition:all 0.3s ease; }
.main-header .phone-btn .sp2{ top:8px; background:none; -webkit-transition:all 0.3s ease; transition:all 0.3s ease; transform:rotateY(0); -webkit-transform:rotateY(0); -moz-transform:rotateY(0); -o-transform:rotateY(0); }
.main-header .phone-btn .sp2 em{ display:block; background:#fff; height:2px; }
.main-header.active .phone-btn .sp2 em,.main-header.active .phone-btn span{ background: #000; transition: all 0.3s ease; }
.main-header .phone-btn .sp3{ bottom:0; transform:translateX(0); -webkit-transform:translateX(0); -webkit-transition:all 0.3s ease; transition:all 0.3s ease; }
.main-header .phone-btn.cur .sp1{ transform:translateX(-100%); -webkit-transform:translateX(-100%); -moz-transform:translateX(-100%); -o-transform:translateX(-100%); -moz-transition:all ease 0.3s; -webkit-transition:all ease 0.3s; -o-transition:all ease 0.3s; transition:all ease 0.3s; opacity:0; }
.main-header .phone-btn.cur .sp2{ -moz-transition:all 0.3s ease 0.1s; -webkit-transition:all 0.3s ease 0.1s; -o-transition:all 0.3s ease 0.1s; transition:all 0.3s ease 0.1s; transform:rotateY(90deg); -webkit-transform:rotateY(90deg); -moz-transform:rotateY(90deg); -o-transform:rotateY(90deg); }
.main-header .phone-btn.cur .sp3{ transform:translateX(100%); -webkit-transform:translateX(100%); -moz-transform:translateX(100%); -o-transform:translateX(100%); -moz-transition:all ease 0.3s; -webkit-transition:all ease 0.3s; -o-transition:all ease 0.3s; transition:all ease 0.3s; opacity:0; }

.main-header .phone-close{ 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); -webkit-transform:rotate(0); -moz-transform:rotate(0); -o-transform:rotate(0); transition: all 0.3s ease 0.3s; }
.main-header .phone-close.cur{ z-index: 3; opacity: 1; transition: all 0.4s ease 0.5s; }
.main-header .phone-close span{ display:block; height:2px; top:50%; margin-top:-1px; background:#000; position:absolute; width:100%; transform:rotate(0); -webkit-transform:rotate(0); -moz-transform:rotate(0); -o-transform:rotate(0); -moz-transition:all ease 0.3s; -webkit-transition:all ease 0.3s; -o-transition:all ease 0.3s; transition:all ease 0.3s; }
.main-header .phone-close.cur span.sp1{ transform:rotate(45deg); -webkit-transform:rotate(45deg); -moz-transform:rotate(45deg); -o-transform:rotate(45deg); -moz-transition:all 0.3s ease 1s; -webkit-transition:all 0.3s ease 1s; -o-transition:all 0.3s ease 1s; transition:all 0.3s ease 1s; }
.main-header .phone-close.cur span.sp2{ transform:rotate(-45deg); -webkit-transform:rotate(-45deg); -moz-transform:rotate(-45deg); -o-transform:rotate(-45deg); -o-transform:rotate(45deg); -moz-transition:all 0.3s ease 1s; -webkit-transition:all 0.3s ease 1s; -o-transition:all 0.3s ease 1s; transition:all 0.3s ease 1s; }

.zi_menu{ position: fixed; z-index: 1001; height: 100%; width: 40%; right: 0; top: 0; background: #fff; transform: translateX(100%); transition: all 0.5s ease 0.5s; padding: 100px 5% 0; display: none; }
.zi_menu.cur{ transform: translateX(0); transition: all 0.5s ease; }
.zi_menu li{ margin-top: 10px; padding-bottom: 10px; border-bottom: 1px solid #acacac; }
.zi_menu li>a{ display: block; line-height: 40px; font-size: 18px; color: #333; }
.zi_menu li dl{ padding-left: 20px; display: none; }
.zi_menu li dd{ padding-left: 10px; font-size: 12px; }
.zi_menu li dt{ font-size: 14px; margin: 10px 0; }
.zi_menu li dd a{ line-height: 30px; color: #666; }
.main-header .language_08{ display: none; position: absolute; top: 18px; right: 70px; z-index: 2; }
.main-header .language_08 a{ display: block; padding-left: 38px; color: #fff; background: url(../images/lang3.png) no-repeat left center; background-size: 31px; line-height: 31px; }
.main-header.active .language_08 a{ color: #000; background: url(../images/lang4.png) no-repeat left center; background-size: 31px; }

.videoMask{ position: fixed; width: 100%; height: 100%; left: 0; top: 0; z-index: 100011; background: rgba(0,0,0,0.4); opacity: 0; transition: all 0.3s ease; }
.videoFix{ position: fixed; width: 1200px; max-width: 90%; height: 100%; top: 0; left: 50%; margin-left: -600px; z-index: 100012; display: flex; align-items: center; opacity: 0; transition: all 0.3s ease; }
.videoFix .position{ width: 100%; }
.videoFix .close{ position: absolute; left: 50%; margin-left: -20px; bottom: -80px; width: 40px; height: 40px; cursor: pointer; background: url(../images/close.png) no-repeat center; background-size: 40px; z-index: 1; }
.videoFix .close:hover{ transform: rotate(180deg); transition: all 0.3s ease; }
.videoFix video{ width: 100%; }
.videoFix .position{ position: relative; }
.videoMask.active,.videoFix.active{ opacity: 2; }

@media only screen and (max-width: 1600px) {
    .main-all{ padding: 0 4%; }
    .main-header .main-menu li .sub-menu .text .max{ font-size: 24px; }
    .main-header .main-menu li .sub-menu .text .min{ font-size: 14px; }
}
@media only screen and (max-width: 1370px) {
    
}
@media only screen and (max-width: 1270px) {
    .main-menu,.main-header .menu-btnbox .lan{ display: none; }
    .main-header .menu-btnbox{ position: static; }
    .main-header .menu-btnbox .com a{ font-size: 12px; padding: 0 10px; height: 30px; line-height: 30px; }
    .main-header .menu-btnbox .com{ position: absolute; right: 140px; margin: 0; top: 18px; }
    .main-header .phone-btn{ opacity: 1; visibility: visible; }
    .main-header .phone-close{ visibility: visible; }
    .zi_menu{ display: block; }
    .main-header{ height: 70px; }
    .main-header .language_08{ display: block; }
    .videoFix{ width: 1000px; margin-left: -500px; }
}
@media only screen and (max-width: 1100px) {
    .videoFix{ width: 90%; left: 5%; margin: 0; }
}
@media only screen and (max-width: 850px) {
    .main-foot .top{ display: none; }
    .main-foot .media{ border: none; }
    .main-foot{ padding-top: 20px; }
    .main-foot .code{ width: 100%; text-align: left; }
    .main-foot .top{ padding-bottom: 60px; }
    .main-foot .media .share a{ margin: 0 12px 20px; }
    .videoFix{ width: 100%; max-width: 100%; left: 0; margin: 0; background: #000; }
    .main-foot .media .share{ width: 100%; text-align: center; }
    .main-foot .media .follow{ width: 100%; text-align: center; }
    .main-foot .media .follow a{ margin: 0 20px; }
}
@media only screen and (max-width: 580px) {
    .main-foot .copy{ font-size: 10px; }
    body{ font-size: 14px; }
    .main-header .main-logo{ width: 150px; }
}