input::-webkit-input-placeholder { color: rgb(153, 153, 153);}
textarea::-webkit-input-placeholder { color: rgb(153, 153, 153);}
.w100 { width: 100%;}
.w172 { max-width: 18rem; margin: 0px auto;}
@media (max-width: 1720px) {
  .w172 {width: 95%;}
}
@media (max-width: 1560px) {
  .w156 {width: 95%;}
}
@media (max-width: 1400px) {
  .w14 { width: 95%;}
}
.fanhui { position: fixed; right: 30px; bottom: 75px; width: 48px; height: 48px; border-radius: 50%;}
img {vertical-align: middle;}
.flex { display: flex; justify-content: space-between; flex-wrap: wrap;}
.flex-center { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap;}
.flex-start { display: flex; justify-content: flex-start; flex-wrap: wrap;}
.flex-end { display: flex; justify-content: flex-end; flex-wrap: wrap;}
#gotop {position: fixed;display: block; z-index: 90;height: 0px; opacity: 0; /* visibility: hidden; */ bottom: 80px; right: 30px; box-sizing: border-box; text-align: center; cursor: pointer; transition: all 0.5s ease 0s;}
#gotop.hide {width: 0.5rem; height: 0.5rem;opacity: 1;}
#gotop img{display: block;width: 0.5rem;}
#gotop { cursor: pointer;}
#gotop svg { width: 100%; height: 100%; fill: rgb(13, 113, 230);}

@media (max-width: 1920px) {
  html { font-size: 16px;}
  table { width: 100% !important;}
}
@media (min-width: 1400px) and (max-width: 1600px) {
  html { font-size: 15px;}
  table { width: 100% !important;}
}
@media (min-width: 640px) and (max-width: 1399px) {
  html { font-size: 14px;}
  table { width: 100% !important;}
}
@media (min-width: 471px) and (max-width: 639px) {
  html { font-size: 13px;}
  table { display: flex; overflow-x: auto; white-space: nowrap; width: 100% !important;}
}
@media (min-width: 329px) and (max-width: 470px) {
  html { font-size: 12px;}
  table { display: flex; overflow-x: auto; white-space: nowrap; width: 100% !important;}
}
@media (max-width: 328px) {
  html { font-size: 12px;}
  table { display: flex; overflow-x: auto; white-space: nowrap; width: 100% !important;}
}
.header_box { z-index: 100; left: 0px; right: 0px; top: 0px; position: fixed;}
#header {    padding-top: 0.3rem;z-index: 999; width: 100%; transition: all 0.6s ease 0s;position: relative;}
.header_top{height: 0.5rem;background: var(--zt_color--);}
.header_top p a{line-height: 0.5rem;font-size: 0.14rem;color: #fff;margin-right: 0.3rem;transition: 0.6s all;}
.header_top p a:hover{opacity: 0.6;transition: 0.6s all;}
.header_top li{position: relative;line-height: 0.5rem;}
.header_top li a{font-size: 0.14rem;color: #fff;margin-right: 0.16rem;padding-right: 0.16rem;position: relative;transition: 0.6s all;}
.header_top li a::after{content: "";width: 0.01rem;height: 0.12rem;background: #b95254;position: absolute;right: 0;top: 50%;margin-top: -0.06rem;}
.header_top li a:hover{opacity: 0.6;transition: 0.6s all;}
.header_top h5{font-size: 0.14rem;color: #fff;cursor: pointer;padding-right: 0.18rem;background: url(../images/top01.jpg) no-repeat right center;transition: 0.6s all;}
.header_top .language div{position: absolute;display: none; z-index: 99999; width: 7.8rem;padding: 0.3rem; right: 0;top: 100%;border-top: 0.03rem solid #fbee0b;background: #fff url(../images/top03.jpg) no-repeat right bottom;}
.header_top .language h3{font-size: 0.16rem;line-height: 0.22rem; color: #323232;text-align: center;margin-bottom: 0.2rem;padding-bottom: 0.2rem;border-bottom: 0.01rem solid #eeeeee;}
.header_top .language dl{margin-bottom: -0.12rem;justify-content: flex-start;}
.header_top .language dd{width: 20%;padding-left: 0.12rem;line-height: 0.2rem;margin-bottom: 0.12rem;background: url(../images/top02.jpg) no-repeat left 0.06rem;}
.header_top .language dd a{line-height: 0.2rem;font-size: 0.12rem;color: #666666;margin-right: 0;padding-right: 0;transition: 0.6s all;}
.header_top .language dd a::after{display: none;}
.header_top .language dd a:hover{color: #9c080c;transition: 0.6s all;opacity: 1;}
.header_top .language .content{display: none;}
.header_top h5:hover{opacity: 0.6;transition: 0.6s all;}

.headerNav {position: relative;z-index: 99;justify-content: flex-end;align-items: center;}
.headerNav-left {
  flex: 1;
  padding-left: 1.5rem;
}
.headerNav-left-top {
  display: flex;
  align-items: center;
  justify-content: end;
}
.headerNav-left-link{
  display: flex;
}

.headerNav-left-link li {
  border-right: 1px solid rgba(255, 255, 255,.6);
}
.headerNav-left-link li:last-child{
  border-right: none;
}
.headerNav-left-link li a{
  margin: 0 0.2rem;
  font-size: 0.16rem;
  color: rgba(255, 255, 255,.6);
}
 .header_box.xg .headerNav-left-link li a {
  color: #9f9f9f;
 }
#header{}
.header{flex: 1;}
.header .search_btn{ 
  width: 2rem;
	height: 0.3rem;
	background-color: #ffffff;
	border-radius: 0.15rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.header .search_btn .search_ipt {
  padding-left: 0.15rem;
  height: 0.3rem;
  font-size: 0.12rem;
  border: none;
  outline: none;
  background: none;
}
.header .search_btn .search_img {
  margin-right: 0.1rem;
  border: none;
  width: 0.2rem;
  height: 0.2rem;
  content: "";
  background-image: url(../icon/search.png);
  background-size: 0.16rem 0.16rem;
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
}

#logo { width: 5rem;height: 0.8rem;position: relative;z-index: 99;}
#logo::after{content: "";width: 100%;max-width: 5rem;height: 100%;max-height: 0.8rem;background: url(../images/logo_white.png) no-repeat left center;background-size: contain; position: absolute;left: 0;top: 0;}
#logo a { display: block;width: 100%;height: 0.3rem;position: relative;z-index: 9;}
#header.show #nav{display: none;}
#header.show .menu-pc{background: url(../images/top05.png) no-repeat center;background-size: cover;}
@media (max-width: 1500px) {
  #m_header #logo { width: 50%;}
  #logo img { width: 100%;}
}
@media (max-width: 850px) {
  .header_box { height: 0.5rem;}
  #m_header #logo{width: 85%;}
}
@media (max-width: 414px) {
  .header_box { height: 0.5rem;}
}
@media (max-width: 340px) {
}

#nav { width: 100%; position: relative;}
#nav ul { position: relative;}
#nav ul li { position: relative; z-index: 9;}
#nav ul li a { display: block; padding: 0px;}
#nav ul li h3 { font-size: 0.2rem;color: rgb(255, 255, 255);font-weight: 600; line-height: 0.5rem; position: relative; transition: all 0.6s ease 0s;}
#nav ul li:hover a h3 {}
#nav ul li:hover a { color: rgb(255, 255, 255);}
#nav ul li.on h3 { font-weight: bold;}
#nav ul li:hover a h3 span, #nav ul li.on h3 span { background: url("") left center no-repeat;}
#nav ul li a i { display: inline-block; background: url("") center center / contain no-repeat; width: 9px; height: 6px; vertical-align: middle; margin-left: 8px;}
#nav ul li .sub { position: absolute; top: 100%; background: rgba(255, 255, 255, 0.95); width: 2rem; left: 50%; margin-left: -1rem; z-index: 10000; visibility: hidden; opacity: 0;border-radius: 0.05rem;    transform: scaleY(0);
    transform-origin: top center;
    transition: .3s;}
#nav ul li:last-child .sub { margin-left: 0px; left: auto; right: 0px;}
#nav ul li .sub .box { padding: 10px 0px; text-align: center;}
#nav ul li .sub a { padding: 0px; line-height: 2.5; transition: all 0.3s ease 0s; font-size: 16px; color: rgb(102, 102, 102);}
#nav ul li .sub a:hover { color: #fff;font-weight: 600; background: #397abf;}
#nav ul li:hover .sub { opacity: 1; visibility: visible; transform: scaleY(1);
    transform-origin: top center;
    transition: .3s;}
#nav ul > li.on h3, #nav ul li:hover h3, #header.xg #nav ul li.on a h3, #header.xg #nav ul li:hover a h3 { color: #fff;border-bottom: 1px solid #fff;}
#nav .navBox > ul > li h3::after { content: ""; display: block; width: 2rem; height: 3px; position: absolute; left: 50%; margin-left: -100px; background: var(--zt_color--); bottom: -1px; transition: all 0.3s ease 0s; transform: scale(0); border-radius: 0px;}
#nav .navBox > ul > li:last-child h3::after { left: auto; margin-left: 0px; right: 0px;}
#nav .navBox > ul > li h3::before { content: ""; display: block; position: absolute; left: 50%; margin-left: -3px; border-left: 3px solid transparent; border-right: 3px solid transparent; border-bottom: 4px solid #970fbe; bottom: 2px; transition: all 0.3s ease 0s; opacity: 0; visibility: hidden;}
#nav .navBox > ul > li:hover h3.ej::after, #nav ul li.on h3.ej::after { transform: scale(1);}
#nav .navBox > ul > li:hover h3.er::before, #nav > ul > li.on h3.ej::before { opacity: 1; visibility: visible;}
.header_box.xg {height: auto; transition: all 0.4s ease 0s; margin-top: 0px;border-top: none;background: #fff;box-shadow: 0px 0px 29px 0px rgba(0, 0, 0, 0.18);}
.header_box.xg #header{transition: 0.6s all;}
.header_box.xg #header #logo::after{background: url(../images/logo.png) no-repeat left center;background-size: contain;}
.header_box.xg #header #logo,.header_box.xg #header #logo a{height: 0.6rem;}
.header_box.xg #header #logo::after{max-height: 0.6rem;}
.header_box.xg #nav ul li h3{color: #323232;line-height: 0.6rem;}


.header_box.xg .menu-pc{background: url(../images/top04d.png) no-repeat center;background-size: cover;}

.header_box.xg #header.show #logo,.header_box.xg #header.show #logo a{height: 0.8rem;}
.header_box.xg #header.show #logo::after{max-height: 0.8rem;}
.header_box.xg #header.show #logo::after{background: url(../images/logo.png) no-repeat left center;background-size: contain;}
#logo .logo_black { display: none;}
.top_search_black { display: none;}

@media (max-width: 1200px) {
  .header_box { display: none;}
}
@media (max-width: 850px) {
  
  #header { display: none;}
  #gotop{right: 0.15rem;bottom: 0.3rem;}
  #gotop img,#gotop.hide{width: 0.3rem;}
  #gotop.hide{height: 0.3rem;}
}



.nav-pc{position: absolute;top: 0;left: 0;right: 0;height: 100vh;z-index: -1;background-repeat: no-repeat;background-position: center;-o-background-size: cover;background-size: cover;display: none;}
.nav-pc .navBox{position: absolute;top: 162px;left: 5%;bottom: 0;overflow-y: auto;width: 90%;}
.nav-pc .navBox dt{font-size: 0.22rem;font-weight: bold;margin-bottom: 0.3rem;}
.nav-pc .navBox dt a{color: #fff;transition: 0.6s all;}
.nav-pc .navBox dt a:hover{opacity: 0.6;transition: 0.6s all;}
.nav-pc .navBox dd{margin-bottom: 0.34rem;}
.nav-pc .navBox dd a{color: #fff;font-size: 0.18rem;transition: 0.6s all;opacity: 0.8;}
.nav-pc .navBox dd a:hover{opacity: 1;transition: 0.6s all;}


@keyframes spin { 
  100% { transform: rotate(1turn);}
}
@keyframes spin2 { 
  100% { transform: rotate(-1turn);}
}
@keyframes spin-reverse { 
  0% { transform: rotate(1turn);}
}
@keyframes spin-reverse2 { 
  0% { transform: rotate(-1turn);}
}
.tc_search { margin: 0.3rem 0.2rem 0px; width: calc(100% - 0.4rem); position: relative;}
.tc_search form { height: 40px; border-radius: 0px;position: relative; width: 100%; margin-bottom: 1rem;}
.tc_search .keyword { box-sizing: border-box;font-size: 0.18rem; color: rgb(255, 255, 255); height: 40px; line-height: 40px; box-shadow: none; appearance: none; background: none; width: 100%; outline: none; border: 1px solid rgba(255, 255, 255, 0.5); padding: 0px 51px 0 16px;}
.tc_search .btn_blue { position: absolute; right: 0px; width: 40px; height: 40px; line-height: 38px; border: 0px; background: url(../images/search_white.png) center center / 0.2rem no-repeat;}
.tc_search .btn_blue.fr { background: rgb(233, 237, 239); color: rgb(78, 79, 83);}
.tc_search input::-webkit-input-placeholder { color: rgba(255, 255, 255, 0.7);}
.tc_search input:focus::-webkit-input-placeholder { color: transparent;}
#nav_btn_box { height: 100%; z-index: 999999999; float: right;}
#nav_btn_box.on { background: none;}
#nav_btn {}
.m_headerB{align-items: center;padding: 0.1rem 0;}
#nav_btn .point.on .navbtn::after, #nav_btn .point.on .navbtn::before { background: rgb(255, 255, 255);}
#nav_btn { cursor: pointer; text-align: center; z-index: 99999; transition: all 0.5s ease 0s; outline: none; box-shadow: none;}
#nav_btn .point { display: inline-block; width: 24px; height: 22px; position: relative; outline: none;}
#nav_btn .point:hover .navbtn, #nav_btn .point:hover .navbtn::after, #nav_btn .point:hover .navbtn::before { width: 0.3rem;}
#nav_btn .navbtn { position: absolute; top: 12px; left: 0px; display: inline-block; width: 24px; height: 1px; transition: all 0.3s ease-out 0s; background: rgb(255, 255, 255);}
#nav_btn .navbtn::after, #nav_btn .navbtn::before { position: absolute; left: 0px; display: inline-block; width: 0.2rem; height: 1px; content: ""; transition: all 0.3s ease-out 0s; background: rgb(255, 255, 255);}
#nav_btn .navbtn::after { top: -8px;}
#nav_btn .navbtn::before { top: 8px;}
#nav_btn .point.on .navbtn { background: transparent;}
#nav_btn .point.on .navbtn::after { transform: rotate(45deg); top: 0px;}
#nav_btn .point.on .navbtn::before { transform: rotate(-45deg); top: 0px;}
.m_nav_list { flex-direction: column; justify-content: flex-start; width: 100%; margin: 0.3rem 0px 0px;}
.m_nav_list::-webkit-scrollbar { display: none;}
#m_nav { z-index: 99999; position: fixed; width: 100%; height: 100vh; right: -105%; top: 0px; padding: 0.3rem 0px 0.2rem; overflow: hidden; pointer-events: none; transition: all 0.3s ease-out 0s; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start;
 background-color: var(--zt_color--) ;}
#m_nav .close { position: absolute; top: 6px; right: 15px; font-size: 28px; color: rgb(255, 255, 255); z-index: 10000;}
#m_nav.act { pointer-events: auto; right: 0px; overflow: auto;}
#m_nav > ul > li { box-sizing: border-box; width: 100%; overflow: hidden; padding: 0px 0px 0px 0.3rem; position: relative;}
#m_nav > ul > li { border-bottom: 1px solid rgba(255, 255, 255, 0.1);}
#m_nav li .a { display: inline-block; width: calc(100% - 30px);}
#m_nav li .a { line-height: 0.6rem; height: 0.6rem; color: rgb(255, 255, 255); padding: 0px; font-size: 14px; float: left;}
#m_nav li .a span { display: block; position: absolute; top: 0px; right: 10px; width: 20px; height: 50px; text-align: center;}
#m_nav li .a span i { font-size: 0px;}
#m_nav li i { opacity: 1; width: 0.6rem; height: 0.6rem; background-image: url(../images/arrow_down.png); background-position: calc(100% - 30px) center; background-repeat: no-repeat; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: initial; position: absolute; display: block; right: 0px; background-size: 13px 13px !important;}
#m_nav li.on i { background: url(../images/arrow_down_on.png) calc(100% - 30px) center no-repeat;}
#m_nav .on.title .a i { transform: rotate(-90deg);}
#m_nav li { display: block; width: 100%;}
#m_nav .title .list { display: none; position: relative; width: 100%; z-index: 9; left: 0px; margin-left: 0px; background: none; border: 0px; clear: both; padding-bottom: 10px;}
#m_nav .title .list span { background: none;}
#m_nav .title .list span a:hover { color: #0a5aa8;}
#m_nav .title .list a { display: block; font-size: 0.16rem; color: rgba(255, 255, 255, 0.6); text-align: left; line-height: 40px; height: 40px; border: 0px; font-weight: 300;}
#m_nav .title .list .void > a { background-size: 10px; position: relative;}
#m_nav .title .list .void > a::before { content: "??????莽炉鈥�???猫路炉??a茅鈥澟该┾�溌懊柯�???茅鈥澟该р�÷�???忙沤鲁"; position: absolute; left: -1em; font-size: 12px; font-weight: bold;}
#m_nav .title .list span { position: relative; display: block;}
#m_nav .title .list span .sub { position: static; width: 100%; overflow: hidden; display: block !important;}
#m_nav .title .sub a { background: none; font-size: 0.875rem; opacity: 0.8; min-width: 50%; float: left; display: inline-block; color: rgb(153, 153, 153);}
#m_nav p{text-align: center;width: 100%;}
#m_nav>p{margin-bottom: 15px;}
#m_nav p a{color: #fff;padding: 0 10px;font-size: 14px;}



.nav_mask { position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; z-index: 888; background-color: rgba(0, 0, 0, 0.4); display: none;}
.m_header_box { transition: all 0.6s ease 0s; display: none;}
#m_header #logo .box_table { width: auto; float: left; display: table; height: 100%;}
#nav_btn_box .box_table { width: auto; float: left; display: table; height: 100%;}
#nav_btn_box .box_table .box_table_cell { vertical-align: middle; display: table-cell;}
#m_header #logo .box_table .box_table_cell { vertical-align: middle; display: table-cell; margin: 0px auto;}
#m_header #logo .box_table .box_table_cell a { display: block;}
.m_header_box header { padding: 0px 3% 120px; position: fixed; top: 0px; left: 0px; right: 0px; z-index: 100;
  background-image: url(../images/banner_ydbj.png);
  background-size: 100% auto;
  background-position: top center;
  background-repeat: no-repeat;
}
#m_header #logo { float: left; height: 50px;}
#m_header #logo::after{display: none;}
#m_header #logo img { max-height: 0.5rem; width: auto;}
#m_header .yuyan { height: 4.5rem; float: right; margin-right: 4rem;}
#m_header .yuyan span { display: block; width: 24px; height: 24px; line-height: 24px; color: rgb(255, 255, 255); font-size: 0.9rem; text-align: center; margin-left: 17px; background: rgba(255, 255, 255, 0.3);}


#m_nav .phone{padding: 0 0.3rem;}
#m_nav .phone p{font-size: 0.14rem;color: #fff;line-height: 0.24rem;text-align: left;margin-bottom: 0.05rem;}
@media (max-width: 1820px) {
  #header .w163{margin: 0 100px;width: calc(100% - 200px);}
}
/* banner */
.bannerBox{position: relative;height: 100vh;perspective: 100vw;}
.bannerBox .swiper-container{max-width: 100%;}
.bannerBox{width:100%;position: relative;z-index: 1;}
.bannerBox .swiper-slide a{display: block;position: relative;}
.bannerBox .swiper-slide a::after{content: "";width: 100%;height: 100%;background: url(../images/topBG.png) repeat-x top;position: absolute;left: 0;top: 0;}
.bannerBox img{display: block;width: 100vw;height: 100vh; position: relative;object-fit: cover;}
.bannerBox .swiper-pagination{bottom: 0.3rem !important;width: 17.2rem !important;margin-left: -8.6rem;left: 50% !important;text-align: center;}

.bannerBox .swiper-button-prev,.bannerBox .swiper-button-next{display: none; width: 0.82rem;height: 0.82rem;border: none;border-radius: 50%;margin-top: -0.41rem;margin-left: 0;opacity: 1;}
@media(max-width: 1720px){
	.bannerBox .swiper-pagination{width: 100% !important;left: 0 !important;margin-left: 0;padding-right: 2.5%;}
}
@media(max-width: 1400px){
	.bannerBox .text{width: 100%;left: 0;margin-left: 0;}
	.bannerBox .text p{width: 95%;margin: 0 auto;}
}
@media (max-width: 1200px) {
  .m_header_box { display: block;}
  .header_box { display: none;}
  .bannerBox {
    height: 100%;
  }
}
@media(max-width: 1200px){
	.bannerBox .swiper-slide a::after{display: none;}
	.bannerBox img{height: 60vw;}
	.bannerBox .swiper-pagination-bullet{margin: 0 0.1rem !important;}

}
@media(max-width: 850px){
	.banner a{height: 100%;width: 100%;}
	.bannerBox .swiper-button-prev, .bannerBox .swiper-button-next{display: none;}
}	
@media(max-width: 540px){
	.bannerBox .swiper-pagination{bottom: 0.15rem !important;}
}
@media(max-width: 480px){
  .m_header_box header {
    background-size: auto 100%;
  }
}

/* banner end */