﻿:root {
    --primary-color: #BE1A11;
}

/* header */
.header{padding: 0 5.2%;position: absolute;left: 0;top: 0;width: 100%;z-index: 99;line-height: 3.33rem;color: #fff;box-sizing: border-box;}
.header .logo img{height: 2.13rem;}
.header .logo .o{position: absolute;left: 0;top: 50%;transform: translateY(-50%);opacity: 0;}
.header .nav .nLi{padding: 0 0.67rem;position: relative;}
.header .nav .nLi h2 a{display: block;position: relative;}
.header .nav .nLi h2 a::before{content: "";width: 100%;height: 1px;position: absolute;left: 0;bottom: 0.73rem;background: currentColor;transform: scale(0, 1);opacity: 0;}
.header .nav .nLi .navSub{position: absolute;left: 50%;top: 100%;width: 180px;margin-left: -90px;background: #fff;box-shadow: 0 0 10px rgba(0,0,0,0.1);padding: 10px 0;display: none;}
.header .nav .nLi .navSub ul li{padding: 12px 0;}
.header .nav .nLi .navSub a{display: block;line-height: 24px;text-align: center;color: #333;padding: 0 4px;position: relative;}
.header .nav .nLi .navSub a:hover{color: var(--primary-color);}
.header .nav .nLi .navSub a:before{content: "";width: 2px;height: 100%;background: var(--primary-color);position: absolute;left: 0;top:0;-webkit-transform: scale(1,0);transform: scale(1,0);}
.header .nav .nLi.on h2 a::before,
.header .nav .nLi:hover h2 a::before{transform: scale(1);opacity: 1;}
.header .line{width: 1px;height: 0.53rem;background: currentColor;margin: 0 1.33rem 0 0.67rem;}
.header .searchBtn{cursor: pointer;}
.header:hover{background: #fff;box-shadow: 0 0 10px rgba(0,0,0,0.1);color: #1A1A1A;}
.header:hover .logo .d{opacity: 0;}
.header:hover .logo .o{opacity: 1;}
.header:hover .icon{filter: brightness(0) invert(0.5);}

/* 查看更多 */
.moreStyle{color: var(--primary-color);}
.moreStyle img{margin-left: 2px;}
.moreStyle:hover{text-decoration: underline;}

/* footer */
.footer{background: url(../images/footer_bg.jpg) no-repeat center;background-size: cover;color: #FFFFFF;}
.footer .top{padding: 1rem 0;}
.footer .logo img{height: 3.13rem;}
.footer .qrcode{width: 3.27rem;text-align: center;line-height: 0.67rem;}
.footer .qrcode img{width: 100%;margin-bottom: 0.27rem;}
.footer .top .text{line-height: 1rem;margin-bottom: 0.8rem;}
.footer .top .text span{margin-right: 1.5rem;}
.footer .top .text span:last-child{margin-right: 0;}
.footer .select{width: 8rem;position: relative;}
.footer .select dt{padding: 0 0.8rem;border: 1px solid #fff;border-radius: 1.6rem;line-height: 1.4rem;background: url(../images/icon_down.svg) no-repeat 90% center;}
.footer .select dd{position: absolute;left: 0;bottom: 100%;width: 100%;border-radius: 0.6rem;background: #fff;display: none;}
.footer .select dd ul{padding: 10px 0;max-height: 6rem;overflow: auto;}
.footer .select dd ul a{display: block;padding: 4px 0.8rem;color: #333;}
.footer .select dd ul a:hover{color: var(--primary-color);text-decoration: underline;}
.footer .btm{padding: 0.67rem 0;border-top: 1px solid rgba(255, 255, 255, 0.3);line-height: 0.67rem;}
.footer a:hover{text-decoration: underline;color: rgba(255, 255, 255, 0.8);}


@media screen and (max-width: 1620px){
.header .logo img{height: 1.7rem;}
.header .nav .nLi{padding: 0 0.5rem;}
}
@media screen and (max-width: 1480px){

}

@media screen and (max-width: 1300px){
}

@media screen and (max-width: 1200px){
.header .logo img{height: 1.4rem;}
.header .nav .nLi{padding: 0 0.3rem;}
}

@media screen and (max-width: 1024px){
.header .nav{display: none;}
.header .menuIcon{display: block;}
.header .line{margin: 0 1rem;}
.header .right{flex-direction: row-reverse;}

.footer .top .logo{display: none;}
.footer .top .text{line-height: 1.4;}
.footer .top .text span{width: 100%;margin: 0 0 0.2rem;}

}

@media screen and (max-width: 760px){
.header{line-height: 2.2rem;position: relative;background: #fff;box-shadow: 0 0 10px rgba(0,0,0,0.1);color: #1A1A1A;}
.header .logo img{height: 1.2rem;}
.header .logo .d{opacity: 0;}
.header .logo .o{opacity: 1;}
.header .icon{filter: brightness(0) invert(0.5);}

.footer .qrcode{width: 4rem;flex-shrink: 0;margin-left: 0.5rem;}
.footer .btm{display: block;line-height: 1.6;}
.footer .select{width: 7rem;}
.footer .select dt{line-height: 1.2rem;}
}

@media screen and (max-width: 468px){
}