@charset "utf-8";

/****************** 常用的 *******************/
*{box-sizing:border-box;word-break: keep-all;}
a {color: inherit;text-decoration: none;}
.con-flex-start{display:flex;align-items:start; justify-content: space-between;}
.con-flex-end{display:flex;align-items:end; justify-content: space-between;}
.con-flex{display:flex;align-items:center;}
.con-flex-bet{display:flex;align-items:center;justify-content:space-between;}
.btn{display:flex;align-items: center;border-radius:30px;justify-content: center;}
.m-only{display:none;}
.videoWrapper {position: relative;width:100%;height: 100%;background-color: #01011D}
.videoWrapper video {position: absolute;top: 0;left: 0;width: 100%;height: 100%;object-fit: cover;}
.videoWrapper img {width: 100%;margin-top: 160px;display: none;}
.br-m{display:none;}


:root{
    /*颜色*/
    --bk:#01011D;
    --bg1:#f2f5fa;
    --main:#182B62;
   
    /*字体大小*/
    --page-tit:70px;
    --page-tab:24px;
    
    --com-txt-max1: 100px;
    --com-txt-max2: 80px;
    --con-tit-max1: 50px;
    --con-tit: 40px;
    --com-txt-bg: 24px;
    --com-txt:20px;
    --com-txt-sm:18px;


    /*间距*/
    --mg-bg-max:140px;
    --mg-bg:120px;
    --mg-bg-mid:100px;
    --mg-40:40px;
    --mg-mm:50px;

    
}

.inner{width:1400px;margin:0 auto;}
.tabbx{display:none;}
.tabbx.tabbx-on{display:block;}

.line {
    position: relative;
    width: 1px;
    height: clamp(6rem, 2.5889967638vw + 5.0291262136rem, 10rem);
    background-color: rgba(255, 255, 255, 0.7);
    overflow: hidden;
    z-index: 2;
}

.line::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 1px;
    height: clamp(1rem, 1.2944983819vw + 0.5145631068rem, 3rem);
    background-color: #fff;
    animation: scrolldown 2s ease-in infinite;
}

@keyframes scrolldown{
    0% {
        top: -20%;
    }
    100% {
        top: 120%;
    }
}


/******************头部*******************/
header{position:fixed;top:0;left:0;z-index:99;width:100%;height:90px;transition: .5s;}
header .inner{height:100%;}
header .gnb{gap:80px;}
header .gnb .con-flex{height: 30px;gap:80px;justify-content: flex-start; font-size: var(--com-txt-sm);font-weight: 700;color:#fff;}
header .gnb .con-flex .menu-item{display: flex;flex-direction: column;height: 30px;position: relative;}
header .gnb .con-flex .menu-item>a{display: flex;width:100%; height:30px;justify-content: center;align-items: center;}
header .gnb .con-flex .menu-item>ul{margin-top: 20px;}
header .gnb .con-flex .menu-item>a svg{transition: .3s;}
header .gnb .con-flex .menu-item>a:hover svg{transform: rotate(180deg);}
header .gnb .con-flex .menu-item:hover .menu-child-item{
    visibility: visible;
    opacity: 1;
    padding-top: 20px;
}
header .gnb .con-flex .menu-child-item{display:flex; flex-direction: column;gap: 20px; position: absolute;top: 30px;left: 50%;visibility: hidden;opacity: 0;transform: translateX(-50%) translateY(10px);transition: all 0.3s ease-in-out;margin-left: -10px;}
header .gnb .con-flex .menu-child-item a{display: block;padding: 8px 20px;background-color: #fff;color: var(--main);border-radius: 30px;text-align: center;}

header .lang-wrap{position:relative;color:#fff;}
header .lang-wrap button{display:flex;width:80px;height:30px;border-radius:999px;align-items: center;justify-content: center;gap:7px;border:1px solid #fff;font-size: 14px;font-weight: 700;background:transparent;color:#fff;cursor: pointer;}
header .lang-wrap button img{transition: .3s;}
header .lang-wrap ul{display:none;position:absolute;margin-top:10px;}
header .lang-wrap li a{display:flex;width:80px;height:30px;border-radius:999px;align-items: center;justify-content: center;font-size: 14px;font-weight: 700;background:#fff;color:#000;}
header .lang-wrap li{margin-bottom:10px;}
header .lang-wrap.on button img{transform: rotate(180deg);transition: .3s;}
header h1{position:relative;z-index:9999;}
header h1 img{width:265px;}


/*头部 滚动动画*/
header.scr-down{transform: translateY(-100%); }
header.bg-ch{background:#000;}
header.scr-down.bg-ch{background:transparent;}

/*移动端的汉堡按钮*/
.ham-btn{width:28px;cursor: pointer;z-index:9999;}
.ham-btn>span{display:block;width:100%;height:2px;background:#fff;transition: all 0.3s;transform: rotate(0deg) translateY(0px);}
.ham-btn>span:nth-child(2){width:22px;margin:5px auto 0;}
.ham-btn>span + span{margin-top:5px;}
.ham-btn.open>span:nth-child(1){transform: rotate(45deg) translateY(5px);}
.ham-btn.open>span:nth-child(3){transform: rotate(-45deg) translateY(-5px);}
.ham-btn.open>span:nth-child(2){display: none;}
.allmenu ul>li>a{opacity: 0; transform: translateX(-20px);}
.allmenu.open ul>li>a{opacity: 1; transform: translateX(0); transition: all 1s 0.8s;}
.allmenu:after{transform: translateY(300px); opacity: 0;}
.allmenuBg {display: block;width: 46px;height: 46px;background: #f9f9f9;border-radius: 50%;position: absolute;left: calc(97% - 23px);top: 46px;z-index: 1000;transform: translate(-50%, -50%) scale(0);transition: all 0.8s ease-in-out;}
.allmenuBg.open{transform: translate(-50%, -50%) scale(150);}
.allmenu{position:fixed;right:0;top:0;z-index:2000;width:100%;height:100vh;background:#f9f9f9;transform: scale(0);}
.allmenu.open {transform: scale(1);transition: all 0s 0.8s;}
.ham-btn.open span{background:var(--bk);}
.allmenu .con-top{width:100%;height:60px;}
header .open img{content:url('../img/common/logo_color.png');}
.allmenu .inner{display:flex;align-items: center;}
.allmenu ul{display:flex;flex-direction: column;gap:40px;font-size: var(--com-txt-bg);font-weight: 700;}
.allmenu li{position:relative;padding-left:15px;}
.allmenu li a{color:var(--bk);font-size: 22px;}
/*.allmenu li a::before{display: block;content: "";width: 3px;height: 18px;background: #000;position: absolute;left: 0px;top: 0px;transform: scaleY(0);transition: all .4s;}*/
/*.allmenu li:hover a::before{transform: scaleY(1);}*/

.allmenu .m-menu{position: relative;}
.allmenu .m-menu .m-sub-menu{
    width: 200px;
    display:flex;flex-direction: column; justify-content: center;align-items: center;
    position: absolute; right: -200px;top: 50%;
    visibility: visible;
    opacity: 0;
    transform: translate(0px, -50%);
}
.allmenu .m-menu .m-sub-menu a{
    display: flex;justify-content: center;align-items: center;
    background-color: #7C7C7C;color: #ffffff;padding: 10px 20px;border-radius: 50px;margin: 20px 0
}

/******************底部*******************/
footer{width:100%;padding:50px 0;background:var(--bk);}
footer .info-wrap{padding:var(--mg-mm) 0;color:#fff;border-bottom:1px solid rgba(255, 255, 255, 0.20);border-top:1px solid rgba(255, 255, 255, 0.20);}
footer .info-wrap ul{gap:100px;}
footer .info-wrap strong{display:block;margin-bottom:10px;font-size: var(--com-txt-bg);font-weight: 700;}
footer .info-wrap p{font-size:var(--com-txt-sm);margin-bottom: 4px}
footer .info-wrap img{width:110px;}
footer .copyright{padding-top:var(--mg-mm);font-size: calc(var(--com-txt-sm) - 4px);color:rgba(255, 255, 255, 0.80);}
footer .copyright p{text-align: center;}
footer .qrcode-flex{display:flex; gap: 20px;}
footer .qrcode-flex li{text-align: center;}
footer .info-wrap .footer-logo{width: 300px;}
footer .tel-box, footer .address-box{display:flex;gap: 10px;}
footer .tel-box img,
footer .address-box img{width: 20px;height: 20px;}
footer .dh-li p{line-height: 2em;padding: 5px 0;margin-bottom: 11px;}
footer .dh-li p .footer-menu{ width: 130px;display: inline-flex;}
footer .dh-li p a:hover{ }
footer .qrcode-li{margin-bottom: 13px}
footer .qrcode-li p{line-height: 2em;}
footer .lxfs-li{margin-bottom: 12px}
footer .lxfs-li div{margin-bottom: 10px}
footer .tel-box p{margin-bottom: 1.8em;}
footer .lxfs-li .tel-box{margin-bottom: 0px}


/********************浮层********************/
.floatingLayer{
    position: fixed;
    right: 40px;
    bottom: 40px;
    z-index: 9999;
    font-size: 20px;
    font-weight: 700;
    color: #000000;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.2);
    padding: 30px 25px;

    display: flex;
    flex-direction: column;
    gap: 40px;
}
.floatingLayer .item{cursor: pointer;}
.floatingLayer .item img{display:flex;flex-direction: column; width: 40px}
.floatingLayer .item p{margin-top: 10px;user-select: none; -webkit-user-select: none; -moz-user-select: none;}
.floatingLayer .wechat{position: relative;}
.floatingLayer .wechat .wechat-box {position: absolute;bottom: 0;left: -190px;z-index: 9999;opacity: 0;transform: translateY(20px); transition: all 0.3s ease;visibility: hidden;}
.floatingLayer .wechat:hover .wechat-box {opacity: 1; transform: translateY(0);visibility: visible;}
.floatingLayer .wechat-box .wechat-img{width: 160px;}
.floatingLayer .top-btn{width: 40px;height: 40px;border-radius: 100%;background-color: #9D9FA4; display: flex;align-items: center;justify-content: center;}
.floatingLayer .top-btn:hover{background-color: var(--main)}