﻿/* 顶部 */
header{position: relative;}
/* 导航 */
.nav{position: absolute;top: 0; left: 0; width: 100%;padding: 25px 50px;height: 120px;z-index: 99;}
/* 1、logo */
.nav .logo{margin: 5px auto;padding-left: 30px;width: 432px;}
/* 2、弹出按钮 */
.nav .nav_btn{width: 50.68%;text-align: center;}
.nav .nav_btn img{width: 45px;height: 45px;display: inline-block;margin: 12px;}
/*/3、中英文切换 */
.nav .language{padding: 0 10px;font-size: 0;}
.nav .language span{display: inline-block;padding:0 10px;font-size: 20px;color: #fff;line-height: 70px;}

/* 弹出导航 */
.popup{width: 100%;height: 100%;position: fixed;background: url("../images/popup.jpg")  no-repeat 0 0 ;background-size: cover;z-index: 999;display: none;}

/* 关闭按钮 */
.popup .close{width: 66.67%;text-align: center;margin: 0 auto;}
.popup .close img{width: 45px;height: 45px;display: inline-block;margin: 40px auto;}
/* logo */
.popup .logo1{width: 239px;margin: 0 auto;}

/* 导航 */
.popup .popup_nav{width:66.67% ;margin: 80px auto;font-size: 0;color: #fff;}
.popup .popup_nav>li{display: inline-block;margin: 0 3.7%;vertical-align: top;}
.popup .popup_nav>li:first-child{margin-left: 0 ;}
.popup .popup_nav>li:last-child{margin-right: 0 ;}
.popup .popup_nav>li p{font-size: 28px;margin-bottom: 10px;}
.popup .popup_nav>li ul li{font-size: 24px;line-height: 2;}
.popup .popup_nav>li ul li a{color: #fff;}
.popup .popup_nav>li ul li a:hover{color: #005ba3;}
/* 搜索 */
.search{margin: 0 auto;border-radius: 32px; width: 66.67%;position: relative;}
.search input{width: 100%; height: 65px; border: 1px solid #e5e5e5;background-color: #fbfbfb;border-radius: 32px;font-size: 24px;color: #989898;line-height: 65px;padding-left: 90px;}
.search span{position: absolute;top: 0 ; left: 20px;width: 60px;height: 65px; background: url("../images/search.png") no-repeat  center center; background-size: 25px 26px;}

/* 轮播 */
.banner.swiper-container-horizontal .swiper-pagination{pointer-events: auto; text-align: center;}
.banner .swiper-pagination-bullet { width: 16px; height: 16px;display: inline-block; border-radius: 100%;  background: #fff; margin: 0 9px;opacity: 1;position: relative;}
.banner .swiper-pagination-bullet-active { background: #fff;}
.banner .swiper-pagination-bullet-active::after{content: "";display: block;width: 24px;height: 24px;border: 1px solid #fff;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);border-radius: 100%;}
/* .banner .swiper-container-horizontal>.swiper-pagination {bottom: 40px;left: 10px; right: 10px; pointer-events: auto; z-index: 10; text-align: center;} */

/* 侧边导航 */
.navPageElement{position: absolute;top: 0; left:45px;width: 1px;height: 100%;background-color:#fff;z-index: 10;padding: 0;}
 /* .nav:before {position: absolute;left: -1.5px;height: 0; background: #005ba3; width: 3px; top: 0; content: ""} */
.navPageElement menu {position: absolute; left: -14px;top: 50%; transform: translateY(-50%); display: flex;  flex-direction: column}
.navPageElement menu li {margin-bottom: 15px}
.navPageElement menu a {letter-spacing: -.4px;color: #fff; font-family: Regular;font-size: 12px; text-transform: uppercase; white-space: nowrap;transition: font-size 0.3s linear;}
.navPageElement menu a:hover{font-size: 16px;transition: all 0.3s linear;}
.navPageElement menu li a.nuxt-link-exact-active {font-family: Medium;opacity: 1; position: relative ;font-size: 16px;}
.navPageElement menu li a.nuxt-link-exact-active:before {content: "";width: 29px; height: 29px;border-radius: 50%; border: 1px solid #005ba3;position: absolute; left: -42px;top: 50%; transform: translateY(-50%)}
.navPageElement menu li a.nuxt-link-exact-active:after {content: "";width: 20px;height: 20px;border-radius: 50%; background: #005ba3;position: absolute; left: -36px; top: 50%;transform: translateY(-50%)}
 


/* 底部 */
footer{background-color: #313131;}
/* logo */
.logo2{text-align: center;}
.logo2 img{width: 240px;display: inline-block;}
/* 导航、二维码 */
/* .f_two{width:66.67% ;margin: 60px auto;} */
.f_two { width: 66.67%; padding: 60px 0; margin: 0 auto;border-bottom: 1px solid #fff;border-top: 1px solid #fff;}
.f_two .f_nav{width:75% ;font-size: 0;color: #fff;}
.f_two .f_nav>li{display: inline-block;margin: 0 3.7%;vertical-align: top;}
.f_two .f_nav>li:first-child{margin-left: 0 ;}
.f_two .f_nav>li:last-child{margin-right: 0 ;}
.f_two .f_nav>li p{font-size: 20px;margin-bottom: 10px;}
.f_two .f_nav>li ul li{font-size: 18px;line-height: 2;text-align: center;}
.f_two .f_nav>li ul li a{color: #b1b1b1;}
.f_two .f_nav>li ul li a:hover{color: #005ba3;}

.f_two .code img{width: 128px;height: 128px;}
.f_two .code p{text-align: center;color: #fff;line-height: 1;margin: 15px auto;font-size: 18px;}

/* 备案、技术支持、分享 */
.f_three{width:66.67% ;margin: 0px auto;padding: 30px 0;}
.f_three>a{color: #b1b1b1;display: inline-block; margin-right: 20px;}
.f_three .share{font-size: 0;}
.f_three .share li{display: inline-block;}
.f_three .share a{display: block;width: 28px;height: 28px;background-repeat: no-repeat;background-position: center center;background-size: contain;margin-left: 30px;}
.f_three .share .share1{background-image: url("../images/facebook.png");}
.f_three .share .share2{background-image: url("../images/twitter.png");}
.f_three .share .share3{background-image: url("../images/wechat.png");}



@media screen and (max-width:1600px){
    /* 顶部 */
    .popup .popup_nav>li p{font-size: 24px;margin-bottom: 10px;}
    .popup .popup_nav>li ul li{font-size: 20px;line-height: 2;}
    .search input{width: 100%; height: 60px; border-radius: 32px;font-size: 20px;line-height: 60px;padding-left: 90px;}
    .search span{top: 0 ; left: 20px;width: 60px;height: 60px; background-size: 25px 26px;}

    .f_two .f_nav>li p{font-size: 18px;margin-bottom: 10px;}
    .f_two .f_nav>li ul li{font-size: 16px;line-height: 2;text-align: center;}

}
@media screen and (max-width:1440px){
    /* 顶部 */
    .nav{height: 100px;}
    .nav .logo{margin: 5px auto;padding-left: 30px;width: 348px;}
    .nav .nav_btn img{width: 45px;height: 45px;margin: 4px;}
    .nav .language span{padding:0 10px;font-size: 20px;color: #fff;line-height: 50px;}
    .popup .popup_nav>li{margin: 0 3.3%;}
    .f_two .f_nav>li{margin: 0 3.3%;}
}
@media screen and (max-width:1360px){
    .popup .popup_nav>li p{font-size: 22px;margin-bottom: 10px;}
    .popup .popup_nav>li ul li{font-size: 18px;line-height: 2;}
    .search input{width: 100%; height: 48px; border-radius: 32px;font-size: 18px;line-height: 48px;padding-left: 70px;}
    .search span{top: 0 ; left: 10px;width: 48px;height: 48px; background-size: 25px 26px;}
    .f_two .f_nav>li p{font-size: 16px;margin-bottom: 10px;}
    .f_two .f_nav>li ul li{font-size: 14px;line-height: 2;text-align: center;}
}
@media screen and (max-width:1280px){
    .popup .popup_nav>li p{font-size: 20px;margin-bottom: 10px;}
    .popup .popup_nav>li ul li{font-size: 16px;line-height: 2;}
}
@media screen and (max-width:1200px){
    .f_two .f_nav>li p{font-size: 14px;margin-bottom: 10px;}
    .f_two .f_nav>li ul li{font-size: 12px;line-height: 2;text-align: center;}
}
@media screen and (max-width:1024px){
    .nav{height: 100px;}
    .nav .logo{margin: 5px auto;padding-left: 30px;width: 300px;}
    .nav .nav_btn img{width: 36px;height: 36px;margin: 4px;}
    .nav .language span{padding:0 10px;font-size: 16px;color: #fff;line-height: 42px;}
    .popup .popup_nav>li{margin: 0 2.4%;}
    .f_two { width: 66.67%; padding: 40px 0;}
    .f_two .f_nav{width:78% ;font-size: 0;color: #fff;}
}
@media screen and (max-width:768px){
    .nav{height: 60px;padding: 10px 25px;}
    .nav .logo{margin: 5px auto;padding-left: 30px;width: 240px;}
    .nav .nav_btn img{width: 36px;height: 36px;margin: 4px;}
    .nav .language span{padding:0 10px;font-size: 16px;color: #fff;line-height: 42px;}
    .navPageElement menu li {margin-bottom: 10px}
    .navPageElement menu li a.nuxt-link-exact-active:before {width: 20px; height: 20px; left: -36px;}
    .navPageElement menu li a.nuxt-link-exact-active:after {width: 10px;height: 10px;left: -30px; }
    .banner .swiper-pagination-bullet { width: 10px; height: 10px; margin: 0 9px;}
    .banner .swiper-pagination-bullet-active::after{width: 16px;height: 16px;}

    .popup .popup_nav>li{margin: 0 1%;}
    .popup .popup_nav>li p{font-size: 18px;margin-bottom: 10px;}
    .popup .popup_nav>li ul li{font-size: 14px;line-height: 2;}
    
    .f_two{width:66.67% ;margin: 30px auto;}
    .f_two .f_nav{width:100% ;text-align: center;}
    .f_two .f_nav>li{margin: 0 ;width: 33%;}
    .f_two .code {text-align: center;width: 100%;margin: 20px auto;}
    .f_two .code img{display: inline-block;}

    .f_three .share{width: 100%;text-align: center;margin: 10px auto;}
}
@media screen and (max-width:750px){
    .navPageElement{display: none;}
    .nav{height: 40px;padding: 5px 10px;}
    .nav .logo{margin: 5px auto;padding-left: 0;width: 148px;}
    .nav .nav_btn{width: 36%;text-align: center;}
    .nav .nav_btn img{width: 24px;height:24px;display: inline-block;margin: 4px;}
    .nav .language{padding: 0 ;}
    .nav .language span{padding:0 5px;font-size:12px;color: #fff;line-height: 32px;}
    .popup .close img{width: 36px;height: 36px;margin: 20px auto;}
    .popup .popup_nav{width:80% ;margin: 0px auto;}
    .popup .popup_nav>li{margin: 0 ;width: 50%;}
    .search{margin: 10px auto;border-radius: 32px; width: 80%;}
    .search input{width: 100%; height: 36px; border-radius: 32px;font-size: 16px;line-height:36px;padding-left: 50px;}
    .search span{top: 0 ; left: 10px;width: 36px;height:36px; background-size: 17px 18px;}
    .f_two{width:80% ;margin: 20px auto;padding: 20px 0;}
    .f_three{width:80% ;margin: 0px auto;padding: 10px 0;}
    .f_three>a{ margin-right: 0;width: 100%;text-align: center;}
}
@media screen and (max-width:320px){
    .popup .logo1{width:128px;margin: 0 auto;}
    .nav .logo{margin: 5px auto;padding-left: 0;width: 120px;}
}
