@media (min-width: 1024px) {
.head-pc{display: block!important;}
.head-mobile{display: none!important;}
.nav-content{height:1rem;background-color: #fff;max-width: 1280px;margin: 0 auto;background-image: url("/templates/default/images/top.png");background-position: center;position: relative;z-index: 1001;}
.language-toggle{position: absolute;top:50%;right:0;transform: translateY(-50%)}
.nav-content-left{display: flex;justify-content: flex-start;align-items: center;color:#000;font-size: .21rem;}
.nav-content-left img{width: .9rem;height:.9rem;}
.nav-content-left p {margin: 0!important; margin-left: .15rem!important;}
.nav-content-right{display: flex;justify-content: flex-start;align-items: center;}
.nav-content-right .qr-code{margin-right:.2rem;}
.nav-content-right .qr-code img{width: .7rem;height: .7rem}
.nav-content-right .qr-code p {margin: 0;text-align: center;}
.mobile-content{margin-right:.2rem;display: flex;align-items: center;}
.mobile-content p{margin: 0;}
.mobile-content div:last-child{color:red;margin-left: .15rem;}
.menu-content{position: absolute;top: 1rem;z-index: 1000;width: 100%; background-color: #325187;padding: .15rem 0;}
.menu-content ul{display: flex;align-items: center;justify-content: space-between;max-width: 1280px;margin: 0 auto;}
.menu-content ul li {position: relative;transition: background 0.3s;}
.menu-content>ul>li>a {font-size: .19rem;color: #fff;font-weight: 400;}
.menu-content ul li a:hover{cursor: pointer;font-weight: 550}
.link_nav{font-weight: 550!important;}
.menu-content li:hover .menu-child-content {width:2rem;opacity: 1;max-height: 600px;transform: translateY(0);display: flex; flex-direction: column;}
.menu-child-content{width:2rem;position: absolute;top: 153%;left: -80%; padding: 0;margin: .06rem 0 0 0; background: white; box-shadow: 0 3px .15rem rgba(0,0,0,0.1);opacity: 0;max-height: 0; overflow: hidden; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);transform: translateY(-.15rem);display: flex; flex-direction: column;z-index: 100;}
.menu-child-content li {padding: .06rem .15rem;border-bottom: 1px solid #eee;transition: background 0.2s;display: flex;}
.menu-child-content>ul>li>a {font-size: .19rem;color: #333;font-weight: 400;}
.menu-child-content-text {font-size: .15rem!important;font-weight: 400!important;}
.nav-content-middle{color: red;font-weight: 500;font-size:.2rem;}
.mobile-content>div:nth-of-type(1){font-size:.14rem;}
.mobile-content>div:nth-of-type(2){font-size:.17rem;}
.language-toggle img{width:.3rem;height:.3rem;}
.language-toggle img:hover{cursor: pointer;}
/* .language-toggle img:hover + .language-toggle-content{opacity: 1;width:.8rem;max-height:1.2rem;transform: translateY(0);visibility: visible;}*/
.language-toggle-content{ display: none;width:.8rem;height: 1rem; position: absolute;top:105%;left:-50%; background-color: #fff;z-index: 1001;box-shadow: 0 3px .15rem rgba(0,0,0,0.1);transform: translateY(.15rem);}
.language-toggle-content li{padding:.1rem;}
.language-toggle-content li a{color:#000;font-size:.15rem;}
.language-toggle-content li:hover a{color:#325187;cursor: pointer;}
/* 婵€娲荤姸鎬佹牱寮� */
.menu-content a.active {
font-weight: 800 !important;
position: relative;
}
/* 浜岀骇鑿滃崟婵€娲绘寚绀哄櫒 */
.menu-content > ul > li > a.active::after {
content: '';
position: absolute;
bottom: -5px;
left: 0;
width: 100%;
height: 2px;
background: #1890ff;
}
}
@media (max-width: 1023px) {
.head-pc{display: none!important;}
.head-mobile{display: block!important;}
.header { position: fixed;top: 0;left: 0;right: 0;height: 60px;background: rgba(255, 255, 255, 0.96);box-shadow: 0 2px 8px rgba(0,0,0,0.1);display: flex;align-items: center;justify-content: space-between;padding: 0 20px;z-index: 1000;}
.logo {width: 120px;height: auto;}
.header-right {display: flex; align-items: center;gap: 15px;}
.menu{height:0rem;position: absolute;top:1.4rem;left: 0;width: 100%;z-index:100; transition: height 0.3s ease-in-out;overflow-y: auto;background-color: #fff;}
.nav-mobile{display: flex;justify-content: space-between;align-items: center;padding: .2rem;}
.nav-mobile-left img{height:1rem;}
.nav-mobile-right img{width:.6rem;height:.6rem;}
.language-switch {
font-size: 14px;
color: #333;
padding: 6px 12px;
border-radius: 4px;
transition: all 0.3s;
}
.language-switch:hover {
background: #f5f5f5;
}
.menu .menu-item {height: .8rem;line-height: .8rem;border-bottom: 1px solid #efefef;padding:.2rem .4rem;}
/* .menu .menu-item:last-child{border-bottom: none;}*/
.menu .menu-item a{font-size:.35rem;color: #333;}
.menu .menu-item span{font-size:.35rem;color: #333;}
.menu-content-mobile{overflow: auto;padding-bottom:2rem;}
.menu-toggle {
width: 24px;
height: 24px;
position: relative;
cursor: pointer;
}
.menu-toggle span {
position: absolute;
height: 2px;
width: 100%;
background: #333;
transition: all 0.3s;
}
.menu-toggle span:nth-child(1) {
top: 4px;
}
.menu-toggle span:nth-child(2) {
top: 11px;
}
.menu-toggle span:nth-child(3) {
bottom: 4px;
}
/* 婵€娲荤姸鎬佺殑姹夊牎鑿滃崟 */
.menu-toggle.active span:nth-child(1) {
transform: rotate(45deg) translate(4px, 4px);
}
.menu-toggle.active span:nth-child(2) {
opacity: 0;
}
.menu-toggle.active span:nth-child(3) {
transform: rotate(-45deg) translate(4px, -4px);
}
.submenu{
height: 0; transition: max-height 0.3s ease-in-out;overflow: hidden;
}
.submenu li {height: .8rem;line-height: .8rem;border-bottom: 1px solid #efefef;padding:.2rem .4rem;padding-left: 1.2rem;}
.submenu li:last-child{border-bottom: none;}
.submenu li a{font-size:.35rem;color: #333;}
.menu-item{display: flex;justify-content: space-between;align-items: center;}
/* 涓嬫媺鑿滃崟 */
.nav-container {
position: fixed;
top: 60px;
left: 0;
right: 0;
background: rgba(255, 255, 255, 0.98);
max-height: 0;
overflow: hidden;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.nav-container.active {
max-height: 500px; /* 鏍规嵁瀹為檯鍐呭璋冩暣 */
}
.nav-menu {
padding: 20px;
}
.nav-menu li {
opacity: 0;
transform: translateY(10px);
transition: all 0.3s;
}
.nav-menu.active li {
opacity: 1;
transform: translateY(0);
}
.nav-menu li a {
display: block;
padding: 14px 0;
color: #333;
font-size: 16px;
border-bottom: 1px solid #eee;
transition: all 0.2s;
}
.nav-menu li:last-child a {
border-bottom: none;
}
.nav-menu li a:hover {
color: #007bff;
transform: translateX(8px);
}
}