@charset "UTF-8";

:root{

	--color-primary: #122B57;

	--color-white: #ffffff;
	--color-light: #f0f0f0;   /* 浅白色 / 背景浅灰 */
	--color-light-soft: #f5f5f5;  /* 更柔和的浅白 */
  	--color-light-pale: #eeeeee;  /* 最淡的浅白 */
	--color-gray: #747474;    /* 中性灰 */
	--color-black: #2a2a2a;

    --header-height: 110px;
	--header-height-small:60px;
}
a{color:var(--color-white);-webkit-transition: all .2s;-moz-transition: all .2s; -ms-transition: all .2s;transition: all .2s;}

.header{z-index:999;height: var(--header-height);width: 100%;position: fixed;top: 0px;left: 0px;transition: background .3s ease-in-out 0.4s,transform .3s ease-in-out 0s;}
.header .logo{float: left;height:var(--header-height);line-height: var(--header-height);text-align: left;width: 225px;}
.header .logo img{vertical-align: middle;width: 100%;}
.header .right{float: right;display: flex;flex-wrap: wrap;}

.header .nav{margin-right: 20px;display: flex;flex-wrap: wrap;}
.header .nav li:first-child{width: 120px;}
.header .nav li{height: var(--header-height);line-height: var(--header-height);width:130px;text-align:center;position: relative;z-index: 9;}
.header .nav li .TWnav a{position: relative;color: var(--color-white);transition: color .3s ease-in-out 0.4s;}
.header .nav li:hover .TWnav a{color:var(--color-black);}
.header .nav li.hover .TWnav a{color:var(--color-black);}
.header .nav li .TWnav a span{position: absolute;bottom:-10px;left:50%;display:inline-block;
	width: 0%;margin:0 auto;background: var(--color-primary);height: 2px;
	transition:all 0.5s ease-in-out;
	transform:translateX(-50%);
}
.header .nav li:hover .TWnav a span{width: 100%;}
.header .nav li.hover .TWnav a span{width: 100%;}

.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.4s ease-in-out;
}
.header .nav-bg a{color:var(--color-black);}
.header .nav-bg .nav-list{
	display: flex;flex-wrap:wrap;width: 1000px;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;gap:50px;margin:40px 0;}
.header .nav-bg .nav-list dl{margin-bottom: 20px;}
.header .nav-bg .nav-list dt{margin-bottom: 10px;font-weight: normal;line-height: inherit;}
.header .nav-bg .nav-list dt a{font-weight: 700;}
.header .nav-bg .nav-list dt a:hover{color:var(--color-primary)}
.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:100px;width:200px;margin-top:40px;}
.header .nav-bg .nav-list .img img{width:100%;height:100%;object-fit: cover;}
/* 入场动画 */
.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);}

.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 0s;}
.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);}
.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;}
.search svg{display: flex;width:20px;height: 20px;flex-wrap: wrap;}
.search svg path{fill:var(--color-white);transition: fill .3s ease-in-out 0s;}

.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: #FFFFFF;
  font-size: 1.5rem;
  padding: 0.5rem 0;
  border: none;
  background: none;
  border-bottom: 1px solid #eeeeee;
}
.search-drop-down .errorMsg{color: #ff1121;display: none;position:absolute;left:0px;bottom:-25px;font-size: 12px;}
.search-drop-down .errorMsg.show{display: block;}


/*移入效果*/

.header:hover{background: var(--color-white);transition:background 0.2s ease-in 0s;}
.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 .lang svg path{fill:var(--color-black);}


/*滚动后的头部样式*/
.header.hideHeader {
  -webkit-transform: translateY(-100%);
      -ms-transform: translateY(-100%);
          transform: translateY(-100%);
}

.scrollHeader.header{height: var(--header-height-small);background-color: var(--color-white);background-image: none;}
.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);}


@media only screen and (max-width: 1600px){
	.header .nav li{width: 130px;}
	.header .nav li:first-child{width: 90px;}
}
@media only screen and (max-width: 1500px){
	.header .nav li{width:105px;}
}
@media only screen and (max-width: 1300px){
	.header .nav-bg .nav-list{width:80%;}
}
.TWnavBtn{display: none;}
.touch_body .TWnavBtn{display: block;}
    /*大pad端1366时显示的按钮*/
	.touch_body .nav_btn{width:25px;position: relative;margin-left: 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 .nav-submenu__cover{display: none;}
	.touch_body .header .nav-bg{display: none;}
	
	.touch_body .header .nav_con{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: 16px;position: relative;color: var(--color-black);}
	.touch_body .header .nav li .TWnav a{padding-left:20px;}
	.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.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);}

	

@media only screen and (max-width: 1200px){
	.header .right{height:60px;}
	.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;}

	.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 .nav_con{top: var(--header-height-small);}
	.touch_body .header .nav{width: 90%;}
	

	/*搜索*/
	.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);}
}
@media only screen and (max-width: 1000px){
	.touch_body .header .nav li.hover{border-bottom: 0px;}
}
@media only screen and (max-width: 767px){

	.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;}
}