/*
 *  public.css by 453883682@qq.com
 */
.wow { transition-delay: 0.3s;}
.pc { display: block;}
.mob { display: none;}
.wrap{ width: 96%; max-width: 1430px; padding: 0 15px; margin: 0 auto;}

.header { position: fixed; left: 0; right: 0; top: 0; min-width: 320px; z-index: 9; color: #FFFFFF; border-bottom: 1px solid rgba(255, 255, 255, .2); transition: all .3s;}
.header.no-show{ transform: translateY(-100%);}
.header .wrap{ max-width: 1750px;}
.logo { position: relative; float: left; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; height: 120px; overflow: hidden;}
.logo a { display: block; transition: all .3s;}
.logo img { height: 65px; transition: all .3s;}
.logo img.white{ position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); opacity: 0; visibility: hidden;}

.navBox{ margin: 0 auto; text-align: right;}
.navList { list-style: none; margin: 0; font-size: 0; display: inline-block; vertical-align: top; padding: 0 .2rem; text-align: center; transition: all .3s;}
.navList > li { position: relative; display: inline-block; vertical-align: top;}
.navList > li > a { position: relative; display: block; line-height: 120px; font-size: 22px; color: var(--title-color); padding: 0 .2rem; font-family: 'OPPOSans-B'; transition: all .3s;}
.navList > li > a::before{ display: block; content: ""; position: absolute; left: 50%; bottom: -7px; width: 14px; height: 14px; border-radius: 50%; background-color: #FFFFFF; transform: scale(0); visibility: hidden; transition: all .3s;}
.navList > li > a:hover::before{ transform: scale(1); visibility: visible;}

.navRig { position: relative; float: right; line-height: 120px; text-align: right; font-size: 0; border-left: 1px solid rgba(255, 255, 255, .2); transition: all .3s;}
.navRig > li { position: relative; display: inline-block; vertical-align: middle; font-size: 14px; margin-left: .6rem;}
.navRig a,
.navRig i,
.navRig span { display: inline-block; vertical-align: middle; cursor: pointer;}
.nav-search > span{ display: block; width: 30px; height: 30px; background: url(../images/icon-search-white.png) center center no-repeat; background-size: cover;}
.nav-lang > span{ display: block; width: 30px; height: 30px; background: url(../images/icon-lang-white.png) center center no-repeat; background-size: cover;}

/* 导航白色，语言半透明 */
.header.white img.default{ opacity: 0; visibility: hidden;}
.header.white img.white{ opacity: 1; visibility: visible;}
.header.white .navList > li > a{ color: #FFFFFF;}
.header.white .navLang p{ color: #FFFFFF; background-color: rgba(255, 255, 255, 0.2);}
.header.white .navLang i{ background-image: url(../images/icon-lang-white.png);}
.header.white .navRigCon{ background-color: rgba(255, 255, 255, 0.2);}
.header.white .navRigCon a{ color: #FFFFFF;}
.header.white .navBtn span b{ background-color: #FFFFFF;}

/* 白色背景 */
.header.bg{ top: 0; color: var(--title-color); background-color: #FFFFFF; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);}
.header.bg .logo { height: 80px;}
.header.bg .logo img{ height: 50px;}
.header.bg .logo .white{ display: none;}
.header.bg .logo .default{ display: block; opacity: 1; visibility: visible;}
.header.bg .navRig{ line-height: 80px; border-left-color: rgba(0, 0, 0, 0.1);}
.header.bg .navRig > li{ margin-left: .3rem;}
.header.bg .nav-search > span{ transform: scale(0.8); background-image: url(../images/icon-search.png);}
.header.bg .nav-lang > span{ transform: scale(0.8); background-image: url(../images/icon-lang.png);}
.header.bg .navList > li > a{ font-size: 18px; color: var(--title-color); line-height: 80px;}
.header.bg .navList > li > a::before{ background-color: var(--main-color);}
.header.bg .navList > li > a:hover{ color: var(--main-color);}

.header.sticky{ position: sticky; position: -webkit-sticky; background-color: #FFFFFF; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);}


/* footer */
.footBg{ position: relative; color: #FFFFFF; line-height: 1.8; background-color: #FFFFFF; z-index: 2;}
.footBg a{ color: #FFFFFF;}
.footBg a:hover{ color: #FFFFFF;}
.footBox{ position: relative; background-color: #1B1B1B;}
.footBox .top{ position: absolute; left: 50%; top: 0; transform: translate(-50%,-50%); width: 186px; height: 186px; border-radius: 50%; background: url(../images/icon-top.png) center center no-repeat; background-size: contain; cursor: pointer; z-index: 1; transition: all .3s;}
.footBox .top:hover{ transform: translate(-50%,-50%) scale(0.9);}
.ftTop{ position: relative; display: flex; align-items: center; justify-content: space-between; padding: 1.1rem 0 .9rem; gap: .7rem;}
.ftLogo{ max-width: 325px;}
.ftLogo img{ max-width: 100%; max-height: 103px;}
.shareList{ list-style: none; margin-left: .24rem;}
.shareList li{ position: relative; margin-left: 22px;}
.shareList li span{ display: flex; flex-direction: column; align-items: center; justify-content: center; width: 98px; height: 98px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .16);  cursor: pointer; transition: all .3s;}
.shareList li span img{ display: block; width: 50px; height: 50px; opacity: .3;}
.shareWx{ position: absolute; left: 50%; transform: translateX(-50%); bottom: 100%; width: 120px; background-color: #FFFFFF; margin-bottom: 15px; opacity: 0; visibility: hidden; transition: all .3s;}
.shareWx::before{ display: block; content: ""; position: absolute; left: 50%; transform: translateX(-50%); top: 100%; width: 0; height: 0; border-top: 6px solid #FFFFFF; border-left: 6px solid transparent; border-right: 6px solid transparent;}
.shareWx img{ width: 100%; height: 100%;}
.shareList li:hover span{ border-color: #FFFFFF; transform: scale(0.8);}
.shareList li:hover span img{ opacity: 1;}
.shareList li:hover .shareWx{ opacity: 1; visibility: visible; margin-bottom: 10px;}

.ftCen{ padding: 0 0 .5rem; border-bottom: 1px solid rgba(255, 255, 255, 0.1);}
.ftNav{ list-style: none; flex: auto; display: flex; justify-content: space-between; overflow: hidden;}
.ftNav li{ margin-bottom: 15px;}
.ftNav li + li{ padding-left: 0.3rem;}
.ftNav h3{ font-size: 22px; margin: 0 0 .2rem;}
.ftCon{ font-size: 18px;}
.ftCon p{ line-height: 1.4; margin: .1rem 0;}
.ftCon p a{ color: rgba(255, 255, 255, .2); transition: all .3s;}

.ftBot{ display: flex; align-items: center; justify-content: space-between; padding: .5rem 0 .7rem;}
.copyright{ flex: auto; font-size: 18px; color: rgba(255, 255, 255, .1); overflow: hidden;}
.ftBot .link{ display: flex; gap: .2rem; font-size: 18px;}
.ftBot .link a{ position: relative; display: block; color: rgba(255, 255, 255, .1); transition: all .3s;}
.ftBot .link a::before{ display: block; content: ""; position: absolute; left: -.1rem; top: 50%; margin-top: -8px; width: 1px; height: 16px; background-color: rgba(255, 255, 255, .1);}
.ftBot .link a:first-child::before{ display: none;}
.ftBot .link a:hover{ color: #FFFFFF;}
 

@media (max-width:1700px) {
    .navList > li > a{ font-size: 20px; padding: 0 .1rem;}
    .navRig > li{ margin-left: .4rem;}
}
@media (max-width:1600px) {
    .wrap{ padding: 0 30px;}
    
}
@media (max-width:1400px) {
    .navList > li > a{ font-size: 18px;}

    .innerBg{ font-size: 14px;}
}
@media (min-width:1201px) {
    .navBox{ display: block !important;}
}