@charset "UTF-8";
/*
html说明:
1.导航不压banner
2.导航压banner
3.导航为黑色主题
header.css header.js
*/
:root{
--color-primary: #115fad;
--color-primary-light: #e52c17;
--color-white: #ffffff;
--color-light: #f0f0f0; /* 浅白色 / 背景浅灰 */
--color-light-soft: #f5f5f5; /* 更柔和的浅白 */
--color-light-pale: #eeeeee; /* 最淡的浅白 */
--color-gray: #747474; /* 中性灰 */
--color-black: #333333;
--color-blackS:#000000;
--header-height: 90px;
--header-height-small:60px;
}
.textColor {
color: var(--Primary-color);
}
.textColorGray {
color: var(--color-gray);
}
.textCenter {
text-align: center;
}
.flex {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.flexWrap {
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.alignCenter {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.justifyCenter {
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
a{-webkit-transition: all .2s;-moz-transition: all .2s; -ms-transition: all .2s;transition: all .2s;}
.header .header_con{display:flex;flex-wrap:wrap;justify-content: space-between;}
.header{
z-index:999;height: var(--header-height);width: 100%;position: fixed;top: 0px;left: 0px;transition: all .3s ease-in-out;
background: #fff;
color: #ffffff;
}
.header .logo{float: left;height:var(--header-height);line-height: var(--header-height);text-align: left;padding-left:30px;display: flex;flex-wrap: wrap;}
.header .logo a{display: block;width:156px;}
.header .logo span{padding-left:10px;font-size:18px;}
.header .logo span a{display:inline-block;width:auto;}
.header .logo span a:hover{color:#666;}
.header .logo img{vertical-align: middle;width: 100%;}
.header .logo img.defaultLogo{display: none;}
.header .logo img.hoverLogo{display: block;}
.header:hover .logo img.defaultLogo{display: none;}
.header:hover .logo img.hoverLogo{display: block;}
.header .right{float: right;display: flex;flex-wrap: wrap;padding-right:30px;flex:1;justify-content: space-between;}
.header .right .men {
display: none;
}
.header .right .nav_con{margin-left:auto;margin-right:auto;}
.header .nav{margin-right: 0px;display: flex;flex-wrap: wrap;}
.header .nav li{height: var(--header-height);line-height: var(--header-height);width:auto;margin-left: 20px;margin-right:20px;text-align:center;position: relative;z-index: 9;}
.header .nav li .TWnav a{position: relative;color: var(--color-black);transition: color .3s ease-in-out;}
.header .nav li:hover .TWnav a{color:var(--color-primary-light)!important;}
.header .nav li.hover .TWnav a{color:var(--color-primary-light)!important;}
.header .nav li .TWnav a span{position: absolute;bottom:-10px;left:50%;display:inline-block;
width: 0%;margin:0 auto;background: var(--color-primary-light);height: 2px;
transition:all 0.5s ease-in-out;
transform:translateX(-50%);
}
.header .nav li:nth-child(3) .pc_nav{
display: none!important;
}
.header .nav li:hover .TWnav a span{width: 100%;}
.header .nav li.hover .TWnav a span{width: 100%;}
.header .nav li:hover .erNav{display: block;animation: displayN 0.5s forwards;}
.header .nav .mo_nav{display: none;border-top:1px solid var(--color-light);}
.header .nav-bg{
position:absolute;top:var(--header-height);left:0px;right:0px;height:0vh;
background-color: var(--color-white);z-index: 3;transition:all 0.2s ease-in-out;
}
.header .nav-bg a{color:var(--color-black);}
.header .nav-bg .nav-list{
display: flex;flex-wrap:wrap;margin-left:auto;margin-right:auto;justify-content: space-between;
position: absolute;top:0px;left:50%;transform:translateX(-50%);z-index: 2;
/* 不是用 display:none;会导致无动画。pointer-events: none; */
opacity: 0;visibility: hidden;pointer-events: none;transition: opacity .5s ease;
}
.header .nav-bg .nav-list.nav_show{opacity: 1;visibility: visible;pointer-events: auto;}
.header .nav-bg .nav-list.has_no_img{justify-content: center;}
.header .nav-bg .nav-list.has_no_img .dl{flex:0 0 auto;}
.header .nav-bg .nav-list .dl{flex:1;display: flex;flex-wrap:wrap;margin:70px 0;margin-right: 100px;}
.header .nav-bg .nav-list dl{flex:0 0 30.33%;margin-right: 4%;padding-bottom:10px;}
.header .nav-bg .nav-list dl:nth-of-type(3n){margin-right: 0px;;}
.header .nav-bg .nav-list dt{font-weight: normal;line-height: inherit;}
.header .nav-bg .nav-list dt a{font-weight: 700;display: block;width:100%;padding-bottom:20px;border-bottom:1px solid #eee;transition:all 0.3s ease-in-out;position: relative;}
.header .nav-bg .nav-list dt a:hover{color:var(--color-primary-light);border-color: var(--color-primary-light);}
.header .nav-bg .nav-list dd a{display: block;margin-bottom: 4px;color:#666;}
.header .nav-bg .nav-list dd a:hover{color:var(--color-primary)}
.header .nav-bg .nav-list .img{height:180px;width:350px;margin:70px 0;}
.header .nav-bg .nav-list .img img{width:100%;height:100%;object-fit: cover;}
.header .nav-bg .nav-list dt a:after{
content: "";width:8px;height:8px;
border-top:1px solid var(--color-gray);border-right:1px solid var(--color-gray);transition: all 0.3s ease-in-out;
position:absolute;top: 17%;right: 17px; transform:translateY(0%) rotate(45deg);
}
.header .nav-bg .nav-list dt a:hover:after{border-color:var(--color-primary-light);}
/* 入场动画 */
.header .nav-bg .nav-list .dl,
.header .nav-bg .nav-list .img {opacity: 0;transform: translateY(20px);transition: all 0.3s ease-in;}
.header .nav-bg .nav-list .img {transition-delay: 0.2s;}
.header .nav-bg .nav-list.nav_show .dl,
.header .nav-bg .nav-list.nav_show .img {opacity: 1;transform: translateY(0);}
.header .pc_nav{
width: 200px;
display: none;
position: absolute;
left: 50%;
transform: translateX(-50%);
background: #fff;
box-shadow: 0 10px 10px 0 rgba(0,0,0,0.1);
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
overflow: hidden;
padding: 15px 0;
}
.header .pc_nav a{
display: block;
text-align: center;
line-height: 40px;
transition: all 0.5s;
}
.header .pc_nav a:hover{
background: rgba(0,0,0,0.04);
color: var(--color-primary-light);
}
.nav-submenu__cover{
top: var(--header-height);
z-index: 2;
width: 100%;
height: calc(100vh - var(--header-height));
opacity: 0;
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
pointer-events: none;
background-color: rgba(0, 0, 0, .4);
transition: all .35s;
position: absolute;
left: 0;
}
.nav-submenu__cover.active{opacity: 1;transition-delay:0.2s;}
.lang{
float: left;height: var(--header-height);margin-right:20px;display: flex;flex-wrap: wrap;align-items: center;
position: relative;
}
.lang svg{display: flex;width:20px;height: 20px;flex-wrap: wrap;}
.lang svg path{fill:var(--color-white);transition: fill .3s ease-in-out;}
.lang-box{
width:120px;text-align: center;display: none;transform: translateX(-50%);
position:absolute;top:var(--header-height);left:50%;background:rgba(255,255,255,.9);box-shadow: 0px 8px 10px rgba(0,0,0,.2);
}
.lang-box li{padding:10px 10px;border-bottom: 1px solid var(--color-white);transition: all .3s ease-in-out;}
.lang-box li a{display: block;text-align: center;color:var(--color-black--color);}
.lang-box li:hover{background: var(--color-primary-light);}
.lang-box li:hover a{color:var(--color-white);}
.lang-box li:last-child{border-bottom: 0px;}
.lang:hover .lang-box{display:block;animation: displayN 0.5s forwards; }
.search{float: left;height: var(--header-height);position: relative;display: flex;flex-wrap: wrap;align-items: center;margin-right:0px;}
.search svg{display: flex;width:20px;height: 20px;flex-wrap: wrap;}
.search svg path{fill:var(--color-black);transition: fill .3s ease-in-out;}
.search:after{
content: "";display: none;width:1px;height:20px;background: var(--color-white);
position:absolute;left:0px;top:50%;transform:translateY(-50%);
}
.search-drop-down {
position: absolute; top: 100%;width: 100%;
height: 150px;z-index: 8;display: none;background: rgba(0, 0, 0, 0.3);
}
.search-drop-down .search-wrapper {
width: 100%;max-width: 90%;height: 100%;margin: 0 auto;
display: flex;justify-content: center;align-items: center;flex-direction: row;
}
.search-drop-down .search-wrapper #search-btn {
display: inline-flex;width: 45px;height: 45px;position: relative;cursor: pointer;
flex-wrap: wrap;align-items: center;justify-content: center;
}
.search-drop-down #search-btn svg{width:26px;height:26px;}
.search-drop-down .search-wrapper #close {
display: inline-flex;width: 45px;height: 45px;position: relative;cursor: pointer;
flex-wrap: wrap;align-items: center;justify-content: center;
}
.search-drop-down .search-wrapper #close svg{width: 24px;height:24px;}
.search-drop-down .search-wrapper .search-input{width:50%;position: relative;}
.search-drop-down .search-wrapper input {
width: 100%;
color: var(--color-white);
font-size: 1.5rem;
padding: 0.5rem 0;
border: none;
background: none;
border-bottom: 1px solid var(--color-light-pale);
}
.search-drop-down .errorMsg{color: var(--color-primary);display: none;position:absolute;left:0px;bottom:-25px;font-size: 12px;}
.search-drop-down .errorMsg.show{display: block;}
.header .change{
display: flex;height: var(--header-height);position: relative;
align-items: center;margin-right: 30px;cursor:pointer;padding-left:30px;
color: var(--color-white);
}
.header .change:after{
content: "";display: none;width:1px;height:20px;background: var(--color-white);
position:absolute;left:0px;top:50%;transform:translateY(-50%);
}
.header .change path{fill:var(--color-black);}
.header .change .dq{width:20px;height:20px;margin-right: 0px;}
.header .change .jt{width:18px;height:18px;margin-left:0px;}
.header .change_con{
display:none;
position:absolute;top:var(--header-height);
width:110px;background: var(--color-white);left:75%;transform:translateX(-50%);
box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.1);
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
.header .change_con a{
color:var(--color-white);
display: block;height:40px;line-height: 40px;text-align: center;border-bottom:1px solid rgba(255,255,255,.1);
}
.header .change_con a:last-child{border-bottom:0px;}
.header .change_con a:hover{
color:var(--color-primary-light)!important;
background: rgba(0, 0, 0, 0.04);
}
.header .change:hover .change_con{display:block;animation: displayN 0.5s forwards;}
.lang_search>div:last-child{margin-right: 0px;display:none;}
.lang_search .men a{border:1px solid var(--color-black);padding:10px 20px 8px;border-radius: 50px;color:var(--color-black);}
.lang_search .link img{vertical-align:middle;}
/*移入效果*/
.header:hover{background: var(--color-white);transition:background 0.2s ease-in 0s;border-bottom:1px solid #eee;}
.header:hover .nav li .TWnav a{color:var(--color-black);transition: color .3s ease-in 0s;}
.header:hover .search svg path{fill:var(--color-black);}
.header:hover .search svg:hover path{fill:var(--color-primary-light)!important;}
.header:hover .lang svg path{fill:var(--color-black);}
.header:hover .change_con a{color:var(--color-black);}
.header:hover .change path{fill:var(--color-black);}
.header:hover .change:hover span{color:var(--color-primary-light);}
.header:hover .change:hover svg path{fill:var(--color-primary-light)!important;}
.header:hover .change{color: var(--color-black);}
.header:hover .search:after{background: var(--color-black);}
.header:hover .change:after{background: var(--color-black);}
.header:hover .logo span{color:var(--color-black)}
.header:hover .lang_search .men a{background: var(--color-primary-light);border-color: var(--color-primary-light);color:#fff;}
/*滚动后的头部样式*/
.header.hideHeader {
-webkit-transform: translateY(-100%);
-ms-transform: translateY(-100%);
transform: translateY(-100%);
}
.scrollHeader.header .logo span{color:var(--color-black)}
.scrollHeader.header{height: var(--header-height-small);background-color: var(--color-white);background-image: none;border-bottom:1px solid #eee;}
.scrollHeader.header .logo{height: var(--header-height-small);line-height: var(--header-height-small);}
.scrollHeader.header .nav li{height: var(--header-height-small);line-height: var(--header-height-small);}
.scrollHeader.header .nav li .TWnav a{color:var(--color-black);}
.scrollHeader.header .nav-bg{top:var(--header-height-small);}
.scrollHeader.header .nav-submenu__cover{top: var(--header-height-small);height: calc(100vh - var(--header-height-small));}
.scrollHeader.header .lang{height: var(--header-height-small);}
.scrollHeader.header .lang-box{top:var(--header-height-small);}
.scrollHeader.header .lang svg path{fill:var(--color-black);}
.scrollHeader.header .search{height: var(--header-height-small);}
.scrollHeader.header .search .input{top: var(--header-height-small);}
.scrollHeader.header .search svg path{fill:var(--color-black);}
.scrollHeader.header .change_con a{color:var(--color-black);}
.scrollHeader.header .change path{fill:var(--color-black);}
.scrollHeader.header .change{color: var(--color-black);}
.scrollHeader.header .search:after{background: var(--color-black);}
.scrollHeader.header .change:after{background: var(--color-black);}
.scrollHeader.header .logo img.defaultLogo{display: none;}
.scrollHeader.header .logo img.hoverLogo{display: block;}
.scrollHeader.header:hover .logo img.defaultLogo{display: none;}
.scrollHeader.header:hover .logo img.hoverLogo{display: block;}
.scrollHeader.header:hover .lang_search .men a{background: var(--color-primary-light);border-color: var(--color-primary-light);}
.scrollHeader.header .lang_search .men a{background: var(--color-primary-light);border-color: var(--color-primary-light);color:#fff;}
.header .nav li .erNav{display: none;width: max-content;min-width: 100%;text-align: left;
background: var(--color-white);position:absolute;top:100%;left:0px;line-height: normal;
}
.header .nav li .erNav a{display: block;padding:17px 20px;height:auto;background: var(--color-white);transition:all 0.5s ease-in-out;color:var(--color-black);}
.header .nav li .erNav a:hover{background-color: var(--color-primary-light);color:var(--color-white);}
.scrollHeader.header .change{height: var(--header-height-small);}
.scrollHeader.header .change_con{top:var(--header-height-small);}
.staticHeader .header{background-color: var(--color-white);background-image: none;border-bottom:1px solid #eee;}
.staticHeader .header .nav li .TWnav a{color:var(--color-black);font-size:18px;}
.staticHeader .header .lang svg path{fill:var(--color-black);}
.staticHeader .header .search svg path{fill:var(--color-black);}
.staticHeader .header .search svg path{fill:var(--color-black);}
.staticHeader .header .change{color: var(--color-black);}
.staticHeader .header .search:after{background: var(--color-black);}
.staticHeader .header .change:after{background: var(--color-black);}
.staticHeader .header .change_con a{color:var(--color-black);}
.staticHeader .header .change path{fill:var(--color-black);}
.staticHeader .header .logo span{color:var(--color-black);}
.staticHeader .header .lang_search .men a{background: var(--color-primary-light);border-color: var(--color-primary-light);}
.staticHeader .header .logo img.defaultLogo{display: none;}
.staticHeader .header .logo img.hoverLogo{display: block;}
.staticHeader .header:hover .logo img.defaultLogo{display: none;}
.staticHeader .header:hover .logo img.hoverLogo{display: block;}
.header .mode_btn{width:150px;height:35px;border:1px solid var(--color-blackS);border-radius: 35px;text-align: center;transition:all 0.3s ease-in-out;}
.header .mode_btn:hover{background: var(--color-blackS);color:var(--color-white);}
.header .mode_btn a{color:var(--main-color);display: block;}
.header .mode_btn:hover a{color:var(--color-white);}
.header .mode_btn span{padding-left:26px;}
.scrollHeader.header .lang.mode_btn{height:35px;}
.black_page .scrollHeader.header{background-color: var(--color-blackS);border-bottom:1px solid #474747;}
.black_page .scrollHeader.header .nav li .TWnav a{color:var(--color-light);}
.black_page .scrollHeader.header .lang svg path{fill:var(--color-light);}
.black_page .scrollHeader.header .search svg path{fill:var(--color-light);}
.black_page .scrollHeader.header .change{color: var(--color-white);}
.black_page .staticHeader.header .logo span{color:var(--color-white)}
.black_page .header{border-bottom:1px solid #474747;}
.black_page .header .mode_btn{border-color: var(--color-primary-light);color: var(--color-primary-light);}
.black_page .header .nav-bg a{color: var(--color-light);}
.black_page .header .nav-bg{background: var(--color-blackS);}
.black_page .header .nav-bg .nav-list dt a:hover{color:var(--color-primary-light);}
.black_page .header .nav-bg .nav-list dd a:hover{color:var(--color-primary-light);}
.black_page .header .nav li:hover .TWnav a{color:var(--color-primary-light);}
.black_page .search-drop-down{background: var(--color-blackS);}
.black_page .header:hover{background-color: var(--color-blackS);border-bottom:1px solid #474747;}
.black_page .header:hover .nav li a{color:var(--color-light);}
.black_page .header:hover .lang svg path{fill:var(--color-light);}
.black_page .header:hover .search svg path{fill:var(--color-light);}
.black_page .header .change{color: var(--color-white);}
.black_page .header .logo span{color:var(--color-white)}
.black_page .header .logo img.defaultLogo{display: block;}
.black_page .header .logo img.hoverLogo{display: none;}
.black_page .header:hover .logo img.defaultLogo{display: block;}
.black_page .header:hover .logo img.hoverLogo{display: none;}
/* 黑色固定导航 */
.black_page.staticHeader .header .logo img.defaultLogo{display: block;}
.black_page.staticHeader .header .logo img.hoverLogo{display: none;}
.black_page.staticHeader .header:hover .logo img.defaultLogo{display: block;}
.black_page.staticHeader .header:hover .logo img.hoverLogo{display: none;}
.black_page.staticHeader .header{background-color: var(--color-blackS);border-bottom:1px solid #474747;}
.black_page.staticHeader .header .nav li a{color:var(--color-light);}
.black_page.staticHeader .header .lang svg path{fill:var(--color-light);}
.black_page.staticHeader .header .search svg path{fill:var(--color-light);}
.black_page.staticHeader .header .change{color: var(--color-white);}
.black_page.staticHeader .header .logo span{color:var(--color-white)}
.w_logo{display: none;}
.black_page .w_logo{display: block;}
.black_page .b_logo{display: none;}
.black_page .header .nav li .erNav{background: var(--color-black);}
.black_page .header .nav li .erNav a{background: var(--color-black);}
.black_page .header .nav li .erNav a:hover{background-color: var(--color-primary-light);color:var(--color-white);}
.black_page .header .change_con{background: var(--color-black);}
.black_page .header .change path{fill:var(--color-white);}
.black_page .header .change_con a{color:var(--color-white);}
.black_page .header .change_con a:hover{color:var(--color-primary-light);}
.black_page .header .mode_btn a{color: var(--main-color-light);}
.black_page .header .mode_btn:hover{background:var(--main-color-light);color:var(--color-white);}
.black_page .header .mode_btn:hover a{color:var(--color-white);}
.staticHeader .section{padding-top: var(--header-height);}
.black_page .detailT{padding-top: var(--header-height);}
@media only screen and (max-width: 1600px){
.header .nav-bg .nav-list .img{width:20vw;height: 10vw;}
.header .nav-bg .nav-list dl{padding-bottom:30px;}
.footer .top .right dt.fnt18 {
font-size: 14px;
}
}
@media only screen and (max-width: 1300px){
.header .mode_btn{width:130px;}
}
@media only screen and (max-width: 1200px) {
.staticHeader .section{padding-top: 60px;}
.black_page .detailT{padding-top: 60px;}
}
@media only screen and (max-width: 700px) {
.header .mode_btn{display:none;}
.nav_bgJt{right:0px;opacity: 0.1;width:100%;}
.nav_bgJt img{width:100%;}
}
@media only screen and (max-width: 1600px){
.other_china{margin-left:20px;}
.header .nav li{margin-left:15px;margin-right: 15px;}
.header .change{padding-left:20px;margin-right: 20px;}
.header .logo span{font-size:16px;}
.lang_search .men a{font-size:14px;padding:8px 15px;}
}
@media only screen and (max-width: 1430px){
.header .nav li{margin-left:10px;margin-right: 10px;}
.header .logo a{width:150px;}
.header .logo span{font-size:12px;}
}
@media only screen and (max-width: 1400px){
.staticHeader .header .nav li .TWnav a{font-size: 16px!important;}
.header .nav li .TWnav a{font-size:16px!important;}
}
@media (min-width:1200px) and (max-width: 1300px){
.header .nav-bg .nav-list{width:80%;}
.other_china a{font-size: 12px;}
.header .nav li .TWnav a{font-size:14px!important;}
.lang_search .men a{font-size:12px;padding:6px 14px;}
}
.TWnavBtn{display: none;}
.touch_body .TWnavBtn{display: block;}
/*大pad端1366时显示的按钮*/
.touch_body .nav_btn{width:25px;position: relative;margin-right:20px;cursor:pointer;display: flex;flex-wrap: wrap;align-items: center;}
.touch_body .nav_btn span{display: inline-block;width: 26px;height: 2px;background-color: var(--color-white);
position: absolute;top: 50%;left: 0px;transform:translateY(-50%);
transition:background-color 0.3s ease-out 0.1s;
}
.touch_body .nav_btn span:after{content:'';display: inline-block;width: 26px;height: 2px;
background-color: var(--color-white);position: absolute;top: 7px;left:0px;
transition:transform 0.3s ease-out,top 0.5s ease 0.4s;
transform: rotate(0deg);
}
.touch_body .nav_btn span:before{content:'';display: inline-block;width: 26px;height: 2px;
background-color: var(--color-white);position: absolute;top: -7px;left:0px;
transition:transform 0.3s ease-out,top 0.5s ease 0.4s;
transform: rotate(0deg);
}
.touch_body .nav_btn.click span{background-color: transparent;}
.touch_body .nav_btn.click span:after{
transition: top 0.5s ease, transform 0.3s ease-out 0.4s;
transform: rotate(-45deg);top: 0px;background-color: var(--color-black);
}
.touch_body .nav_btn.click span:before{
transition: top 0.5s ease, transform 0.3s ease-out 0.4s;
transform: rotate(45deg);top: 0px;background-color: var(--color-black);
}
.touch_body .scrollHeader .nav_btn span{background-color: var(--color-black);}
.touch_body .scrollHeader .nav_btn span:after{background-color: var(--color-black);}
.touch_body .scrollHeader .nav_btn span:before{background-color: var(--color-black);}
/*Ipad端导航样式*/
.touch_body .header .right{justify-content:flex-end;padding-right: 20px;}
.touch_body .header .nav li{margin-left: 0px;}
.touch_body .header .nav li:nth-child(3) .TWnavBtn{
display: none!important;
}
.touch_body .header .nav li:nth-child(3) .pc_nav{
display: none!important;
}
.touch_body .header .nav li .erNav{display: none;}
.touch_body .nav-submenu__cover{display: none;}
.touch_body .header .nav-bg{display: none;}
.touch_body .header .nav_con{
height: calc(100vh - var(--header-height-small));
display: none;position: fixed;top: var(--header-height);left: 0px;bottom:0;right: 0px;margin-right:0px;background: var(--color-white);overflow-y:auto;
}
.touch_body .header .nav{width:80%;margin-left:auto;margin-right:auto;}
.touch_body .header .nav li{float: none;width: 100%;height: auto;text-align: center;border-bottom: 1px solid var(--color-light);line-height: var(--header-height-small);}
.touch_body .header .nav li.hover{z-index: 10;}
.touch_body .header .nav li a{display: block;width: 100%;padding-bottom: 0;font-size: 14px;position: relative;color: var(--color-black);padding-left: 0px;}
.touch_body .header .nav li .p .THnav a{padding-left:0px;line-height: 1.5;padding:15px 0;color:#747474;}
.touch_body .header .nav li .TWnav a{padding-left:0px;}
.touch_body .header .nav li.hover .TWnav a{color:var(--color-primary);}
.touch_body .header .nav li .TWnav a span{bottom: 0px;display: none;}
.touch_body .header .nav a{color:var(--color-white)}
/* 二级下拉按钮 */
.touch_body .TWnavBtn{
position:absolute;right:0px;top:0px;
width:var(--header-height-small);height:var(--header-height-small);z-index: 2;
}
.touch_body .header .nav li.has_two .TWnavBtn:after{content: "";width:10px;height:10px;
border-top:1px solid var(--color-black);border-right:1px solid var(--color-black);transition: all 0.3s ease-in-out;
position:absolute;top: 50%;right: 17px; transform:translateY(-80%) rotate(135deg);
}
.touch_body .header .nav li.has_two.hover .TWnavBtn:after{transform:translateY(-20%) rotate(-45deg);border-top:1px solid var(--color-primary);border-right:1px solid var(--color-primary);}
/* 三级 */
.header .nav li .p.has_three .THnav{position: relative;}
.header .nav li .p.has_three .THnavBtn{
position:absolute;right:0px;top:0px;
width:var(--header-height-small);height:var(--header-height-small);z-index: 2;
}
.header .nav li .p.has_three .THnavBtn:after{content: "";
width: 5px;height: 5px;transition: all 0.3s ease-in-out;
border-top:1px solid var(--color-black);border-right:1px solid var(--color-black);
position:absolute;top: 50%;right: 20px;
transform:translateY(-50%) rotate(135deg);
}
.header .nav li .p.has_three.hover .THnavBtn:after{transform:translateY(-20%) rotate(-45deg);border-top:1px solid var(--color-primary);border-right:1px solid var(--color-primary);}
.header .nav li .p .THnav a{border-bottom:1px solid var(--color-light);padding-left:30px;}
.header .nav li .p .three_nav{display: none;padding:15px 0;border-bottom:1px solid var(--color-light);}
.header .nav li .p .three_nav a{font-size: 14px;color:var(--color-gray);line-height: 1.3;padding:7px 0px 7px 40px;}
.touch_body .scrollHeader.header .nav_con{top:var(--header-height-small);}
.touch_body .lang svg path{fill:var(--color-white);}
.touch_body .search svg path{fill:var(--color-white);}
.touch_body .header.bg{background-color: var(--color-white);}
.touch_body .header{background-color: transparent;}
.touch_body .header.scrollHeader{background-color: var(--color-white);}
.touch_body .header.bg .nav_btn span{background-color: transparent;}
.touch_body .header .search svg path{fill:var(--color-white);}
.touch_body .header .lang svg path{fill:var(--color-white);}
.touch_body .header .change path{fill:var(--color-white);}
.touch_body .header .change:after{background-color: var(--color-black);}
.touch_body .header.scrollHeader .search svg path{fill:var(--color-black);}
.touch_body .header.scrollHeader .lang svg path{fill:var(--color-black);}
.touch_body .header.bg .search svg path{fill:var(--color-black);}
.touch_body .header.bg .lang svg path{fill:var(--color-black);}
.touch_body .header.scrollHeader .change path{fill:var(--color-black);}
.touch_body .header .logo img.defaultLogo{display: none;}
.touch_body .header .logo img.hoverLogo{display: block;}
.touch_body .header:hover .logo img.defaultLogo{display: none;}
.touch_body .header:hover .logo img.hoverLogo{display: block;}
.touch_body .header .logo span{color: var(--color-black);display:none;}
.touch_body.staticHeader .header .nav li .TWnav a{color:var(--color-black);font-size:18px;}
.touch_body.staticHeader .header .lang svg path{fill:var(--color-black);}
.touch_body.staticHeader .header .search svg path{fill:var(--color-black);}
.touch_body.staticHeader .header .search svg path{fill:var(--color-black);}
.touch_body.staticHeader .header .change{color: var(--color-black);}
.touch_body.staticHeader .header .search:after{background: var(--color-black);}
.touch_body.staticHeader .header .change:after{background: var(--color-black);}
.touch_body.staticHeader .header .change_con a{color:var(--color-black);}
.touch_body.staticHeader .header .change path{fill:var(--color-black);}
.touch_body.staticHeader .header .logo span{color:var(--color-black);}
.touch_body.staticHeader .header .lang_search .men a{background: var(--color-primary-light);border-color: var(--color-primary-light);}
.black_page.touch_body .header{background: var(--color-blackS);border-color:var(--color-black);}
.black_page.touch_body .nav_btn span{background-color: var(--color-light);}
.black_page.touch_body .nav_btn span:after{background-color: var(--color-light);}
.black_page.touch_body .nav_btn span:before{background-color: var(--color-light);}
.black_page.touch_body .header .search svg path{fill: var(--color-light);}
.black_page.touch_body .header .lang svg path{fill: var(--color-light);}
.black_page.touch_body .header .nav_con{background: var(--color-blackS);}
.black_page.touch_body .header .nav li.hover .TWnav a{color:var(--color-primary-light);}
.black_page.touch_body .header .nav li{border-color:var(--color-black);}
.black_page.touch_body .header .nav li .p .THnav a{border-color:var(--color-black);color: var(--color-gray);}
.black_page.touch_body .header .nav li.has_two.hover .TWnavBtn:after{
border-top: 1px solid var(--color-light);
border-right: 1px solid var(--color-light);
}
.black_page.touch_body .header .nav li.has_two .TWnavBtn:after{
border-top: 1px solid var(--color-light);
border-right: 1px solid var(--color-light);
}
.black_page.touch_body.staticHeader .header .change path{fill:var(--color-white);}
.touch_body .header .change{padding-left:15px;margin-right:15px;}
.touch_body .header .search{margin-right:15px;padding-left: 15px;}
.touch_body .lang_search>div:first-child{padding-left:0px;}
.touch_body .lang_search>div:first-child:after{display: none;}
.touch_body .lang_search>div:last-child{margin-right: 0px;}
.touch_body .header .change span{display: none;}
.touch_body .header .change .jt{display: none;}
.touch_body .header.hideHeader{transform:translateY(0);}
@media only screen and (max-width: 1200px){
.header .right{height:60px;}
.black_page.touch_body .header{background: var(--color-blackS);border-color:var(--color-black);}
.black_page.touch_body .nav_btn span{background-color: var(--color-light);}
.black_page.touch_body .nav_btn span:after{background-color: var(--color-light);}
.black_page.touch_body .nav_btn span:before{background-color: var(--color-light);}
.black_page.touch_body .header .search svg path{fill: var(--color-light);}
.black_page.touch_body .header .lang svg path{fill: var(--color-light);}
.black_page.touch_body .header .nav_con{background: var(--color-blackS);}
.black_page.touch_body .header .nav li.hover .TWnav a{color:var(--color-primary-light);}
.black_page.touch_body .header .nav li{border-color:var(--color-black);}
.black_page.touch_body .header .nav li .p .THnav a{border-color:var(--color-black);color: var(--color-gray);}
.black_page.touch_body .header .nav li.has_two.hover .TWnavBtn:after{
border-top: 1px solid var(--color-light);
border-right: 1px solid var(--color-light);
}
.black_page.touch_body .header .nav li.has_two .TWnavBtn:after{
border-top: 1px solid var(--color-light);
border-right: 1px solid var(--color-light);
}
.touch_body .header{background: var(--color-white);height: var(--header-height-small);border-bottom: 1px solid var(--color-light);}
.header .logo{height: var(--header-height-small);line-height: var(--header-height-small);}
.header .nav_con{display: none;}
.header .right{justify-content:flex-end;padding-right: 20px;}
.TWnavBtn{display: block;}
.touch_body .nav_btn span{background-color: var(--color-black);}
.touch_body .nav_btn span:after{background-color: var(--color-black);}
.touch_body .nav_btn span:before{background-color: var(--color-black);}
.touch_body .header .search svg path{fill: var(--color-black);}
.touch_body .header .lang svg path{fill: var(--color-black);}
.touch_body .header .change path{fill:var(--color-black);}
.touch_body .header .change:after{background-color: var(--color-black);}
/*导航样式*/
.touch_body .header .nav_con{top: var(--header-height-small);}
.touch_body .header .nav{width: 90%;}
.touch_body .header .nav li .erNav{display: none;}
.header .nav li .erNav{display: none;}
/*搜索*/
.search-drop-down .search-wrapper .search-input{ width: 70%;}
.header .lang{height: var(--header-height-small);}
.header .search{height: var(--header-height-small);}
.header .search .input{top: var(--header-height-small);}
/* 语言 */
.lang-box{top:var(--header-height-small);}
.header .change{height: var(--header-height-small);}
.header .change_con{top:var(--header-height-small);}
}
@media only screen and (max-width: 1000px){
.touch_body .header .nav li.hover{border-bottom: 0px;}
}
.moTip{display: none;}
@media only screen and (max-width: 767px){
.moTip{font-size: 12px;display: block;flex-wrap: wrap;justify-content: flex-end;}
.moTip a{margin-right: 20px;margin-top: 5px;display: block;}
.moTip .men{width:200px;margin:5vw auto;}
.moTip .men a{
border:1px solid var(--color-primary-light);padding:8px 20px;border-radius: 50px;color:#fff;background: var(--color-primary-light);
text-align: center;font-size: 14px;
}
.moTip .link {text-align: center;display:none;}
.footer .top .left .meiti span {
font-size: 14px;
}
.footer .top .left .lxix{
font-size: 14px;
}
.header .logo{padding-left:10px;}
.header .lang_search .men{display: none;}
.header .lang_search .link{display: none;}
.touch_body .header .right{padding-right: 10px;}
.touch_body .header .search{padding-left:0px;margin-right: 6px;}
.touch_body .header .change{padding-left: 0px;margin-right: 10px;}
/* .header .logo{width:160px;} */
/* 搜索 */
.search-drop-down{height:100px;}
.search-drop-down .search-wrapper .search-input{ width: 80%;}
/* 语言 */
.lang a{height: 25px;line-height: 25px;font-size: 12px;margin-right: 0;}
}
.footer{
background-color: #181818;
}
.footer .top {
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-orient: horizontal;
-webkit-box-direction: reverse;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse;
}
.footer .top .left{
flex-direction: column;
justify-content: space-between;
}
.footer .top .left .flogo{
width:262px;
}
.footer .top .left .flogo img{width:100%;}
.footer .top .left .lxix {
color: #666;
}
.footer .top .left .lxix a {
color: #fff;
display: flex;
}
.footer .top .left .lxix svg {
margin-right: 8px;
width: 16px;
height: 18px;
margin-top: 2px;
}
.footer .top .left .lxix .p p {
display: flex;
}
.footer .top .left .lxix .st0 {
fill:#ffffff;
}
.footer .top .left .lxix path {
fill:#ffffff;
}
.footer .top .left .lxix a:hover {
color: var(--main-color);
}
.footer .top .left .lxix dt{
margin-bottom: 10px;
}
.footer .top .left .lxix dd {
color:#fff;margin-bottom: 5px;
}
.footer .top .left .lxix dd .name {
display: none;
}
.footer .top .left .lxix dt.a a{
margin-top: 40px;margin-left: 0px;width:140px;height:44px;
border-color: #898a8d;
}
.footer .top .left .lxix dt.a-text {
margin-top: 20px;
}
.footer .top .left .lxix dt.a-text a:hover {
color: #e52c17;
}
.footer .top .left .meiti li {
position: relative;
margin-right: 10px;
}
.footer .top .left .meiti p {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
width: 47px;
height: 47px;
border-radius: 100%;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
background: #181818;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
cursor: pointer;
}
.footer .top .left .meiti a {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
width: 47px;
height: 47px;
border-radius: 100%;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
background: #181818;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.footer .top .left .meiti a:hover {
background: var(--main-color);
}
.footer .top .left .meiti a:hover path {
fill: #fff;
}
.footer .top .left .meiti p:hover {
background: var(--main-color);
}
.footer .top .left .meiti p:hover path {
fill: #fff;
}
.footer .top .left .meiti svg {
width: 26px;
height: 26px;
}
.footer .top .left .meiti path {
fill: #898a8d;
}
.footer .top .left .meiti span{
display: block;
width:100%;margin-top: 10px;
color:#666;
text-align: center;
}
.footer .top .left .meiti .ewm {
bottom: 50px;
left: 0px;
width: 95px;
height: 95px;
border-radius: 8px;
background-color: #fff;
padding: 5px;
z-index: 99;
-webkit-animation: displayN 0.5s forwards;
animation: displayN 0.5s forwards;
}
.footer .top .left .meiti .ewm img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.footer .top .left .meiti .weiX:hover .ewm {
display: block;
}
.footer .top .right{
flex:0 0 60%;
}
.footer .top .right dl {
padding-left: 10px;
padding-right: 10px;
/**border-left:1px solid #444;**/
flex:0 0 auto;
margin-bottom: 60px;
}
.footer .top .right dt {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.footer .top .right dt a{color:#fff;}
.footer .top .right dd {
margin-top: 10px;
}
.footer .top .right dd a {
color: #747474;
display: block;
margin-bottom: 6px;
}
.footer .top .right dd a:hover {
color: #e52c17;
}
.footer .top .right dl.active dd {
display: block;
}
.footer .top .right dl.active dt svg {
-webkit-transform: rotate(-180deg);
-ms-transform: rotate(-180deg);
transform: rotate(-180deg);
}
.footer .top .right dl.active dt path {
fill: #333;
}
.footer .bottom {
border-top: 1px solid #3d3d3d;
color: #b2b2b2;
}
.footer .bottom .wrap{
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.footer .bottom a {
color: #b2b2b2;
}
.footer .bottom a:hover {
color: #fff;
}
.footer .bottom li {
margin-left: 30px;
padding-left: 30px;
position: relative;
}
.footer .bottom li:after {
content: "";
position: absolute;
left: 0px;
top: 50%;
display: block;
width: 1px;
height: 16px;
background-color: #666;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.footer .bottom li:first-child:after {
display: none;
}
@media only screen and (max-width: 1600px) {
.footer .top .right dl{margin-bottom: 3vw;
padding-left: 10px;
padding-right: 10px;
}
.footer .top .right {
flex: 0 0 64%;
}
.footer .bottom .wrap {
font-size: 12px;
}
}
@media only screen and (max-width: 1500px) {
.footer .top .right dl{
padding-left: 8px;
padding-right: 8px;
}
}
@media only screen and (max-width: 1440px) {
.footer .top .right {
flex: 0 0 66%;
}
.footer .top .left .lxix svg {
margin-top: 0px;
}
.footer .top .left {
flex: 0 0 34%;
}
.footer .top .left .flogo{
width:162px;
}
.footer .top .right dl {
padding-left: 10px;
padding-right: 10px;
}
.footer .top .right dt.fnt18 {
font-size: 12px;
}
.footer .top .right dd.fnt16 {
font-size: 12px;
}
.footer .top .left .lxix dd {
font-size: 12px;
}
.footer .top .left {
flex: 0 0 36%;
}
.footer .top .right {
flex: 0 0 64%;
}
}
@media only screen and (max-width: 1000px) {
.footer .top .right dt {
font-size: 16px;
}
.footer .bottom .wrap{
flex-direction: column;
justify-content: center;
align-items: center;
}
.footer .bottom .left{margin-bottom: 10px;}
.footer .bottom li:first-child {
padding-left: 0px;
margin-left: 0px;
}
.footer .top .left .meiti .ewm{
width:66px;height:66px;padding:2px;
}
}
@media only screen and (max-width: 768px) {
.header .change_con {
left: 50%;
}
.header .logo a{width:110px;}
.footer .top .right {
margin-bottom: 8vw;
display: none;
}
.footer .top .right dl {
-webkit-box-flex: 0;
-ms-flex: 0 0 100%;
flex: 0 0 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.footer .top .right dt {
-webkit-box-flex: 0;
-ms-flex: 0 0 100%;
flex: 0 0 100%;
padding: 20px 0;
font-size: 14px;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
border-bottom: 1px solid #eee;
}
.footer .top .right dd {
padding: 0 20px;
font-size: 12px;
margin-top: 20px;
-webkit-box-flex: 0;
-ms-flex: 0 0 100%;
flex: 0 0 100%;
}
.footer .top .left {
flex:0 0 100%;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
}
.footer .top .left .lxix {
margin: 5vw 0;
}
.footer .top .left .meiti {
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
margin-top: 3vw;
}
.footer .top .left .meiti li {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
margin-left: 0px;
display: flex;justify-content: center;flex-wrap: wrap;
}
.footer .top .left .flogo {
text-align: center;
margin-bottom: 8vw;
margin-left:auto;margin-right: auto;
}
.footer .bottom li {
margin-left: 10px;
padding-left: 10px;
}
.footer .bottom .left{font-size: 12px;}
}