
.wow { transition-delay: 0.3s;}
.pc { display: block;}
.mob { display: none;}
.container{ width: 80%; max-width: 1470px; padding: 0 15px; margin:0 auto;}
.container1280{ max-width: 1280px !important;}
.container1100{ max-width: 1130px !important;}

.header{ position: fixed; top: 0; left: 0; right: 0; width: 100%;  background-color: #FFFFFF; box-shadow: 0 4px 8px 0 rgba(7,17,27,.1); z-index: 10; transition: all .3s;}
.header.sticky{ position: sticky; position: -webkit-sticky;}
/* hdTop */
.logo { float: left; height: 70px; padding-left: .12rem; align-items: flex-start; overflow: hidden; transition: all .5s;}
.logo a { display: block;}
.logo img { height: 46px; transition: all .3s;}
.logo img.shows{ display: block;}
.logo img.hides{ display: none;}

.navBox { margin: 0 auto; text-align: left;}
.navList { list-style: none; margin: 0; font-size: 0; display: inline-block; vertical-align: top; transition: all .3s; margin-left:80px;}
.navList > li { position: relative; display: inline-block; vertical-align: top; padding: 0 10px;}
.navList > li > a { position: relative; display: block; font-size: 18px; color: #141E28; line-height: 70px; min-width: 50px; text-align: center; transition: all .3s;}
.navList > li > a::before{ display: block; content: ""; position: absolute; left: 50%; bottom: 0; width: 0; height: 5px; background-color: var(--main-color); transition: all .3s;}
.navList > li > a:hover,
.navList > li.active > a,
.navList > li.cur > a{ color: var(--main-color);}
.navList > li > a:hover::before,
.navList > li.active > a::before,
.navList > li.cur > a::before{ left: 0; width: 100%;}
.nav-dropdown{ position: absolute; left: 50%; top: 100%; width: 100%; min-width: 190px; transform: translateX(-50%); height: auto; font-size: 16px; color: #333333; z-index: 2; box-shadow: 0px 0px 16px rgba(169,169,169,0.18); padding-top: 2px; display: none;}
.nav-dropdown ul{ list-style: none; text-align: center; background: url(../images/nav-bg.png) center center #FFFFFF no-repeat; background-size: cover; border-radius: .1rem; box-shadow: 0px 3px 6px rgba(0,0,0,0.07); padding: .2rem 0;}
.nav-dropdown ul > li > a{ position: relative; display: block; font-size: 16px; color: #333333; line-height: 2; padding: 3px 15px; white-space: nowrap; z-index: 1; transition: all .3s;}
.nav-dropdown ul > li > a:hover{ color: var(--main-color);}
.navList.hide{ display: none;}

.navRig { position: relative; float: right; margin-right: .3rem; line-height: 70px; text-align: right; font-size: 0; z-index: 1; transition: all .3s;}
.navRig li{ position: relative; display: inline-block; vertical-align: middle; text-align: center;}
.navRig a,
.navRig i,
.navRig span { display: inline-block; vertical-align: middle; font-size: 18px; color: #141E28;}
.navRig a:hover{ color: var(--main-color); transition: all .3s;}
.navRig li a{ padding: 0 15px;}
.navRig li.navTel::after{ display: block; content: ""; width: 1px; height: 18px; max-height: .2rem; background-color: #000000; opacity: .36; position: absolute; right: 0; top: 50%; transform: translateY(-50%);}
.navRig li.navTel a{ display: flex; align-items: center;}
.navRig li.navTel a i{ vertical-align: middle; width: 18px; height: 18px; margin-top: -2px; margin-right: 5px; background: url(../images/icon-tel.png) center center no-repeat; background-size: contain;}
.navRig li.navTel a span{ font-size: 18px; white-space: nowrap; overflow: hidden;}
.navRig li.navTrial a{ display: flex; align-items: center; justify-content: center; font-size: 16px; color: #FFFFFF !important; background-color: var(--main-color); border-radius:15px; line-height: 30px;}

.navRig li.navBtn { cursor: pointer; display: none;}
.navBtn span { width: 22px; height: 30px; position: relative;}
.navBtn span b { display: block; width: 100%; height: 2px; background: var(--main-color); position: absolute; left: 0; top: calc((100% - 4px) / 2); transition: all .3s;}
.navBtn span b:nth-child(1) { transform: translateY(6px) rotate(0deg);}
.navBtn span b:nth-child(3) { transform: translateY(-6px) rotate(0deg);}
.navBtn.active b:nth-child(1) { transform: translateY(0) rotate(45deg);}
.navBtn.active b:nth-child(3) { transform: translateY(0) rotate(-45deg);}
.navBtn.active b:nth-child(2) { opacity: 0;}
.navRig .nav-dropdown{ left: 0; transform: none; width: auto; min-width: 100%; background-color: #FFFFFF; box-shadow: 0px 3px 6px rgba(0,0,0,0.07),0px 2px 2px rgba(0,0,0,0.1) inset;}
.navRig .nav-dropdown li{ display: block; border: none;}
.navRig .nav-dropdown li + li{ border-top: 1px solid #EEEEEE;}
.navRig .nav-dropdown li a{ display: block; color: #666666 !important; line-height: 30px; padding: .15rem .3rem; white-space: nowrap; text-align: left; transition: all .4s;}
.navRig .nav-dropdown li a img{ width: 24px; max-width: .24rem; margin-right: .08rem; margin-top: -2px;}
.navRig .nav-dropdown li a:hover{ background-color: #F5F7FB;}
.navRig .nav-dropdown li a:hover img{ animation: swing 1s linear;}


.navRig li.top_search{background: #fff;border:1px solid #E3E6ED;border-radius: 4px;height: 38px;width:200px;position: relative;margin-right:18px;display: inline-block; vertical-align: middle;line-height: 30px;text-align: left;}
.top_search .pro_seript{height: 38px;background: transparent;outline: none;padding:0 12px;font-family: "Ã¥Â¾Â®Ã¨Â½Â¯Ã©â€ºâ€¦Ã©Â»â€˜";border: none;line-height: 38px;vertical-align: middle;}
.top_search .btn{width: 28px; height: 28px;display: block;position: absolute;right: 2px;top:8px;padding: 0;border: none;line-height: 18px;box-shadow: inset 0 0px 0px rgba(0,0,0,0);vertical-align: middle;}


.header.noBg{ background: #fff; box-shadow: none;}
.header.noBg .logo img.shows{ display: none;}
.header.noBg .logo img.hides{ display: block;}
.header.noBg .navList > li > a{ color: #333;font-size: 16px;}
.header.noBg .navList > li > a:hover,
.header.noBg .navList > li.active > a,
.header.noBg .navList > li.cur > a{ color: #E51F20;font-weight: bold;}
.header.noBg .navList > li > a::before{ background-color: #E51F20;}
.header.noBg .navRig a,
.header.noBg .navRig i,
.header.noBg .navRig span{ color: #333;font-size: 15px;}
.header.noBg .navRig li.navTel::after{ background-color: #333;}
.header.noBg .navRig li.navTel a i{ background-image: url(../images/icon-tel-white.png);}
