@charset "utf-8";
/* ====================公共样式========================= */
.container{max-width: 1200px;width:100%;margin:0 auto}
.obj-cover{width:100%;height:100%;object-fit:cover}
.of-hidden{overflow: hidden}
.placeholder{visibility:hidden!important;height:0!important;border:0!important;padding:0!important;margin:0!important}/*space-between占位*/
main{margin-top: 80px;display:block}
.btn{border-radius:30px;padding:10px 36px;display:inline-flex;align-items:center;justify-content:center;font-size:16px;border:1px solid transparent;transition:all .6s ease}
.btn.blue{background:#0079cb;color:#fff}
.btn:hover{transform:scale(1.03,1.03) perspective(1px)}
.btn.blue:hover{box-shadow:inset 0 0 0 2px #0079cb;background:0 0;color:#0079cb}
.btn.sm{padding:6px 20px;font-size: 14px}
.pc-hidden{display: none}
br{content: '';display: block;height: 1em}

/* 通用banner */
.banner{height:560px}
.banner .swiper-container,.banner-bg{height:100%}
.banner-bg-mb{display:none}
.banner-cont{position:absolute;left:0;top:0;width:100%;height:100%;color:#fff}
.banner-cont .container{height:100%;display:flex;flex-direction:column;justify-content:center}
.banner h1{font-size:60px;font-weight:700;margin-bottom:25px}
.banner p{font-size:24px}
.banner-btn{margin-top:80px}
.banner-btn .btn{border-color:#fff}
.banner-btn .btn:hover{background:#0079cb;color:#fff;border-color:#0079cb}
.banner .swiper-container-horizontal>.swiper-pagination-bullets{bottom:50px}
.banner .swiper-pagination-bullet{width:12px;height:12px}
.banner .swiper-pagination-bullet-active{background:#000;opacity:.5}
.banner .swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet{margin:0 10px}
.banner .swiper-slide-active h1{animation: to-down 1.5s ease both}
.banner .swiper-slide-active p{animation: to-up 1.5s ease both .2s}
.banner .swiper-slide-active .banner-btn{animation: to-up 1.5s ease both .5s}
.banner-bg{transform: scale(1.1);transition: all 4s ease}
.banner .swiper-slide-active .banner-bg{transform: scale(1)}

/* header */
header{position:fixed;left:0;top:0;width:100%;height:80px;z-index:999;box-shadow: 0px 0px 8px #e8e8e8;background:#fff}
.header{max-width:1200px;width:100%;height:100%;margin:0 auto;display:flex;align-items:center;justify-content:space-between}
.header-logo{transition: transform 1s ease}
.header-logo a{display:flex;align-items:center}
.header-logo h1{text-indent:-9999px}
.header-menu{display:flex;align-items:center}
.menu-item{display:block;line-height:80px;color:#666;font-size:18px;padding:0 15px}
.menu-item span{position:relative;display:block;line-height:80px}
.menu-item span:after{content:'';position:absolute;left:0;bottom:10px;background:#0079cb;width:0;height:2px;transition:all .4s ease;opacity:0}
.menu-item:hover{color: unset}
.header-menu li.active .menu-item span:after{width:100%;opacity:1}
body.PC .header-bg{display: none!important}
body.PC .header-menu{display: flex!important}

/* 下拉菜单 */
.menu-sub{position:absolute;background:#f7f7f7;width:100%;left:0;height:384px;display:none;box-shadow: 0 28px 40px 0 rgba(17,58,93,.1)}
.menu-sub .container{height:100%;display:flex;padding-top: 24px}
.tab-menu .menu-rgt:not(.active){display: none}
.menu-lft{width:23%}
.menu-lft.two{height: 336px;display: flex;flex-direction: column;flex-wrap: wrap;width: 50%}
.menu-lft.two li{width: 50%}
.menu-lft a{display:flex;align-items:center;font-size:16px;color:#444;padding:13px 26px}
.menu-lft a i{display:flex;width:32px;height:32px;align-items:center;justify-content:center;margin-right:20px}
.menu-lft a i img{max-width:100%;max-height:100%;object-fit:cover}
.menu-lft a i img.white,.menu-lft a:hover img.color,.menu-lft li.active a img.color{display:none}
.menu-lft a:hover,.menu-lft li.active a{background:#0079cb;color:#fff}
.menu-lft a:hover img.white,.menu-lft li.active a img.white{display:block}
.menu-lft a span{opacity:0;margin-left:auto;color:#fff}
.menu-lft a:hover span,.menu-lft li.active a span{opacity:1}
.menu-rgt{display:flex;width:580px;background:#fff;margin-left:auto;align-items:center;padding:24px;justify-content:space-between;border-radius:10px;height: 288px}
.menu-rgt h3{font-size:24px;color:#333;line-height: 36px}
.menu-rgt .model{font-size:18px;color:#0079cb;margin:20px 0 0}
.menu-rgt p{font-size:16px;color:#999;line-height:26px;margin-top: 22px;height: 75px;overflow:hidden;display:-webkit-box;text-overflow:ellipsis;-webkit-box-orient:vertical;-webkit-line-clamp:3}
.menu-info{width:60%}
.menu-btn{margin-top:50px}
.menu-btn .btn{padding:6px 30px;font-size:18px}
.menu-btn .btn span:lang(en){font-style: italic}
.menu-picture{width:180px;height:240px;display: flex;justify-content: center;align-items: center}
.menu-picture img{max-width:90%;max-height:90%;display:flex;align-items:center;justify-content:center;border-radius: 15px;margin:0 auto}
.header-menu i{display: none}

/* footer */
.footer{background:#31313b;color:#999;padding:58px 0 40px}
.footer .container{display:flex;justify-content:space-between}
.footer-info{width:25%}
.footer p{font-size:14px;color:#999;margin-top:16px;line-height: 20px}
.footer-qr{width:108px;height:108px;margin:35px 0}
.footer-phone{font-family:Arial;font-size:24px;color:#ffff;font-weight:700;line-height:1}
.footer-list{display:flex;justify-content:space-between;width:62%}
.footer-item{width:15%}
.footer-item h3{font-size:16px;color:#fff;border-bottom:1px solid #64656d;margin-bottom:20px;padding-bottom:20px}
.footer-item li{font-size:14px;line-height:32px}
footer a:hover{color:#fff}
.copyright{padding:18px 0;background:#26262e;color:#999}
.copyright .container{display:flex;align-items:center;justify-content:center}
.beian{padding-left:30px}

/* 侧边栏 */
.aside-bar{position:fixed;bottom:10%;right:50px;z-index:9999;display:flex;flex-direction:column;align-items:flex-end}
.aside-bar a{display:flex;align-items:center;justify-content:center;flex-direction:column;width:56px;height:56px;background:#f5f8fa;border-radius:50%;color:#666;box-shadow:0 5px 5px rgba(192,198,204,.1)}
.aside-bar a:hover{background:#0079cb;color:#fff;box-shadow:0 5px 5px rgba(0,121,203,.3)}
.aside-bar a:not(:first-child){margin-top:16px}
.aside-bar .phone{position:relative;background: #0079cb;color: #fff;box-shadow:0 5px 5px rgba(0,121,203,.3);overflow: hidden}
.aside-bar .phone:hover{width:220px;border-radius:30px;align-items:flex-start;padding:0 20px}
.aside-bar .phone span{position:absolute;left:60px;top:18px;font-family:Arial;font-size:20px;white-space:nowrap;opacity:0}
.aside-bar .phone:hover span{opacity:1}

/* animated */
@keyframes to-up{0%{opacity: 0;transform: translate3d(0, 50px, 0);}100%{opacity: 1;transform: translate3d(0, 0, 0);}}
@keyframes to-down{0%{opacity: 0;transform: translate3d(0, -50px, 0);}100%{opacity: 1;transform: translate3d(0, 0, 0);}}
@keyframes to-rgt{0%{opacity: 0;transform: translate3d(50px, 0, 0);}100%{opacity: 1;transform: translate3d(0, 0, 0);}}
@keyframes to-lft{0%{opacity: 0;transform: translate3d(-50px, 0, 0);}100%{opacity: 1;transform: translate3d(0, 0, 0);}}
@keyframes to-upB{0%{opacity: 0;transform: translate3d(0, 100px, 0);}100%{opacity: 1;transform: translate3d(0, 0, 0);}}
@keyframes clip{0%{clip-path:inset(0 100% 0 0)}100%{clip-path:inset(0 0 0 0)}}
@keyframes clip-hide{0%{clip-path:inset(0 0 0 0)}100%{clip-path:inset(0 100% 0 0)}}
@keyframes fontB{0%{transform:scale(1.1);opacity: 0}100%{transform:scale(1);opacity: 1}}
@keyframes bounceR{0%,100%,20%,50%,80%{transform:translateX(0)}40%{transform:translateX(-10px)}60%{transform:translateX(-5px)}}
@keyframes zoom-icon { 0%{opacity: 0;transform: scale(0)} 100%{opacity: 1;transform: scale(1)} }
@keyframes backInLeft{0%{transform:translateX(-1000px) scale(.7);transform:translateX(-1000px) scale(.7);opacity:.7}80%{transform:translateX(0) scale(.7);transform:translateX(0) scale(.7);opacity:.7}to{transform:scale(1);transform:scale(1);opacity:1}}

.header-search{display:none}
.search-bg{content:'';width:100%;height:100%;top:60px;position:fixed;left:0;display:none;z-index:9999}
.search-btn{width:24px;height:24px;display:flex}
.search-btn svg{width: 100%;height:100%}
.search-box{padding:10px 4% 10px;position:absolute;width:100%;left:0;top:0;height:100%;display:none;align-items:center;justify-content:center}
.search-box input{width:0;height:100%;border:1px solid #ddd;border-radius:5px;padding:0 10px}
.search-box.active input{animation:input 1.5s ease both}
.search-box.out input{animation:input-out 1s ease both}
.search-box input::placeholder{color:#999}
header.search-sta .bread-icon{transform:translateX(60px)}
header.search-sta .header-logo{transform:translateX(-200px)}
.search-btn.inner{margin-left:30px;animation:clip 1s ease both}
@keyframes input{0%{width:0}100%{width:80%}}
@keyframes input-out{0%{width:80%}100%{width:0}}
header.search-sta .search-btn:not(.inner){animation:clip-hide .8s ease both}


/* 汉堡菜单 */
header .bread-icon{cursor:pointer;user-select:none;position: relative;display: none;margin-left: 20px;align-items: center;justify-content: center;height: 25px;transition: transform 1s ease}
.bread-icon .lines:after,.bread-icon .lines:before,header .bread-icon .lines{display:inline-block;height:3px;width:25px;background:#4b4b4b;transition:top .2s linear;border-radius: 5px}
header.white .bread-icon .lines:after,header.white .bread-icon .lines:before,header.white .bread-icon .lines{}
header .bread-icon .lines{position:relative}
.bread-icon .lines:before,header .bread-icon .lines:after{position:absolute;left:0;content:'';transform-origin:50% 50%;transition:top .2s .4s ease,transform .4s ease;height:3px;border-radius: 5px}
header .bread-icon .lines:before{top:7px}
header .bread-icon .lines:after{top:-7px}
header .bread-icon.active .lines{transition:all .2s 0s ease;background:0 0}
header .bread-icon.active .lines:after,header .bread-icon.active .lines:before{transition:top .2s ease,transform .2s .3s ease;top:0;width:25px}
header .bread-icon.active .lines:before{transform:rotate3d(0,0,1,45deg)}
header .bread-icon.active .lines:after{transform:rotate3d(0,0,1,-45deg)}


.header-bg{content:'';position:fixed;left:0;top:60px;background:#000;opacity:.5;width:100%;height:100%;display:none;z-index:-1}
.header-mb-arrow{display:none;width:30px;height:30px;position:absolute;left:20px;top:80px}

@keyframes menuShow{0%{transform:translate3d(100%,0,0)}100%{transform:translate3d(0,0,0)}}
@keyframes menuHide{0%{transform:translate3d(0,0,0)}100%{transform:translate3d(100%,0,0)}}

/* 视频 */
.popVideo {display: none;position: fixed;z-index: 99999;width: 100%;height: 100%;background: rgba(0, 0, 0, .5);top: 0;left: 0;}
.popVideo-content {display: flex;justify-content: center;align-items: center;position: relative;width: 66%;height: 100%;margin: 0 auto;}
.popVideo-core {position: relative;display: inline-block;vertical-align: middle;width: 100%;position: relative;}
.popVideo-core video {width: 100%;}
.popVideo-close {width: 28px;height: 28px;position: absolute;right: -1px;top: 0;z-index: 3;background: rgba(255,255,255,.2) url('../images/pages/icon/close-btn.png') no-repeat center /16px;cursor: pointer;opacity: .7;transition: all .6s ease;}
.popVideo-close:hover {opacity: 1;background: #0079cb url('../images/pages/icon/close-btn.png') no-repeat center /16px;}
@media all and (max-width:1279px) {.popVideo-content{width: 92%;}.popVideo-close{right: 0;}}




/* -------------------------PC端--------------------------- */
@media all and (max-width:1700px) {
    /* 1600 × (900/1024/1200) */
}

@media all and (max-width:1599px) {
    /* 1440 × (900/1050) */
}

@media all and (max-width:1439px) {
    /* 1360 × (768) */

}

@media all and (max-width:1359px) {
    /* 1280 × (800/854/1024) */
}

@media all and (max-width:1279px) {
    /* 1152 × (864) */
    .header,.container{max-width: 92%}
}

@media all and (max-width:1151px) {
    /* 1024 × (600/768) */

}


/* ------------------------手机端-------------------------- */
@media all and (max-width:1000px) {
    /* 平板设备 720 适配 */
    .menu-lft{width: 100%}
    .menu-rgt,.menu-lft a span,.aside-bar .return-top,.aside-bar .phone,.footer-list,.footer-logo,.footer-logo+p{display: none}
    .header{justify-content: unset}
    header{height: 60px;border-bottom: 1px solid #bac4cc;box-shadow: 0 0 8px 0 #cecece}
    main{margin-top: 60px}
    .header-logo img{width: 100px}
    .header-menu{display: none;position: fixed;right: 0;top: 60px;width: 88%;background: #f9f9f9;height: 100vh;padding: 20px 20px 0;z-index: 1}
    .menu-item{padding: 0 0 15px;color: #333;line-height: unset;font-size: 20px;margin-bottom: 15px;border-bottom: 1px solid #eaeaea}
    .menu-item span{line-height: unset}
    .header-menu li.active .menu-item span:after, .menu-item:hover span:after{display: none}
    .header-menu .menu-item+i{display: flex;position: absolute;right: 0;top: 5px;align-items: center;justify-content: center;height: 30px;width: 30px;color: #999;z-index: 99}
    .header-menu .menu-item+i svg{width: 20px;height:11px;transition: all .4s ease}
    .header-menu .menu-item+i.active svg{transform: rotate(180deg)}
    .header-menu li{position: relative}
    .menu-sub{background: transparent;position: static;height: auto;box-shadow: unset}
    .menu-sub .container{max-width: 100%;padding-top: 0}
    .menu-lft{display: flex;flex-wrap: wrap;justify-content: space-between;padding-bottom: 20px}
    .menu-lft:after{width: 31%;content: ''}
    .menu-lft li{width: 31%;margin-bottom: 10px}
    .menu-lft a{padding: 10px;background: #fff;flex-direction: column;border-radius: 5px;justify-content: center;color: #333;text-align: center}
    .menu-lft a h6{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;width: 100%}
    .menu-lft a i{margin: 0 auto 10px}
    .header-search,header .bread-icon{display: block}
    .header-search{margin-left: auto}
    .header-mb-arrow{animation:to-lft 1s ease both}
    .menu-show.header-menu{animation:menuShow .8s ease both}
    .menu-hide.header-menu{animation:menuHide .8s ease both}
    .pc-hidden{display: block}
    .footer-info{width: 100%;text-align: center}
    .footer-qr{margin: 35px auto}
    .footer-phone{display: inline-block;padding: 10px 60px;border-radius: 5px;border: 2px solid #98989c}
    .footer-mb{display: flex;justify-content: center;font-size: 16px;margin-bottom: 30px;padding-bottom: 30px;border-bottom: 1px solid #55555d}
    .footer-mb-item{width: 15%}
    .footer-mb-item i{display: flex;align-items: center;justify-content: center;width: 50px;height: 50px;margin: 0 auto;border: 1px solid #98989d;border-radius: 50%}
    .footer-mb-item i img{width:50%;height:50%}
    .footer p{font-size: 16px;color: #fff;font-weight: lighter;margin-top: 30px}
    .footer-mb p{margin-top: 10px;color: #98989d}
    .btn{padding: 6px 30px}
    .menu-lft.two{height: auto;display: flex;flex-direction: row;flex-wrap: wrap;width: 100%}
    .menu-lft.two li{width: 31%}

    .mb-hidden{display: none!important}

    /* 通用banner */
    .banner-bg-pc,.prod-lft h3,.prod-lft p,.solution-nav,.solution .swiper-slide p,.solution .swiper-slide i,.solution-btn{display: none}
    .banner-bg-mb{display: block}
    .banner h1{font-size: 40px}
    .banner p{font-size: 20px}
    .banner .swiper-container-horizontal>.swiper-pagination-bullets{bottom: 20px}
    .banner .swiper-pagination-bullet{width: 8px;height: 8px}
    .banner .swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet{margin: 0 5px}
}
@media all and (max-width:640px) {
    /* 移动终端以上 360 适配 */
    .menu-item{font-size: 16px}
    .header-menu .menu-item+i{width: 50px;height: 40px;justify-content:flex-end;top:-8px}
    .header-menu .menu-item+i svg{width:15px}
    .menu-lft a h6{font-size: 10px}
    .menu-lft li,.menu-lft.two li{width: 31%}{width: 48%}
    .header-mb-arrow{width: 20px;height: 20px;left: 15px}
    .footer-mb-item{width: 25%}
    .footer-phone{font-size: 20px;padding: 10px 30px}
    .footer p{font-size: 14px}
    .copyright{padding: 10px 0;font-size: 12px;text-align: center}
    .copyright .container{flex-direction: column}
    .beian{margin-top: 10px}

    /* 通用banner */
    .banner{height: 400px}
    .banner h1,.banner p,.banner-btn{text-align: center;animation: none!important;}
    .banner h1{font-size: 34px;margin-bottom: 10px}
    .banner p{font-size: 13px;line-height: 20px}
    .banner-btn{margin-top: 30px}
    .banner-cont .container{justify-content: flex-end;padding-bottom: 80px}
}