@charset "utf-8";
/* ====================公共样式========================= */


/* header */
header{position:fixed;left:0;top:0;width:100%;height:80px;z-index:999;background:#fff}
.newheader{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:#fff;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:#dc121d;width:0;height:2px;transition:all .4s ease;opacity:0}
.menu-item:hover{color: #dc121d;}
.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%; position: relative;}
.menu-lft li>a{display:flex;align-items:center;font-size:16px;color:#333;padding:13px 26px}
.menu-lft li>a i{display:flex;width:32px;height:32px;align-items:center;justify-content:center;margin-right:20px}
.menu-lft li>a i img{max-width:100%;max-height:100%;object-fit:cover}
.menu-lft li>a i img.white,.menu-lft li>a:hover img.color,.menu-lft li.active>a img.color{display:none}
.menu-lft li>a:hover,.menu-lft li.active>a{background:#dc121d;color:#fff}
.menu-lft li>a:hover img.white,.menu-lft li.active>a img.white{display:block}
.menu-lft li>a span{opacity:0;margin-left:auto;color:#fff}
.menu-lft li>a:hover span,.menu-lft li.active>a span{opacity:1}
.menu-lft li>a h6{font-size:16px;margin:0;padding:0;font-weight:normal;}

.menu-lft.two li dl{display: none; width: 60%; padding:12px 0; margin: 0; position: absolute; left: 100%; top:0; background: #f3f3f3; box-shadow: 0 20px 40px 0px rgb(42 22 139 / 25%);}
.menu-lft.two li:hover dl{ display: block; }
.menu-lft.two li dl dd{ margin:0; }
.menu-lft.two li dl dd a{display: block; font:15px/45px 'microsoft yahei'; color: #555; border-bottom: 1px dashed #eee; padding:0 20px; }
.menu-lft.two li dl dd a:hover{ background:#dc121d; color:#fff; border-bottom: 1px dashed #dc121d; }
@media all and (max-width:750px) {
.menu-lft.two li dl{ width: 100%; left: 0; top:100%; z-index: 9999; }
.menu-lft.two li dl dd a{ padding: 0 7px; }
}

.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:#dc121d;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-btnn{margin-top:50px}
.menu-btnn .btnn{padding:6px 30px;font-size:18px}
.menu-btnn .btnn 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}

.btnn{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}
.btnn.blue{background:#0079cb;color:#fff}
.btnn:hover{transform:scale(1.03,1.03) perspective(1px)}
.btnn.blue:hover{box-shadow:inset 0 0 0 2px #0079cb;background:0 0;color:#0079cb}
.btnn.sm{padding:6px 20px;font-size: 14px}


header{background:rgba(0,0,0,0.3);}
header .bread-icon{margin-top:0px;}
.header-logo img{height:50px;}


/* 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:#fff;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)}}






/* -------------------------PC端--------------------------- */


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




/* ------------------------手机端-------------------------- */
@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}
    .newheader{justify-content: unset}
    header{height: 60px;border-bottom: 1px solid #bac4cc;box-shadow: 0 0 8px 0 #cecece}
    .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;padding:0px;}
    .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}


    .btnn{padding: 6px 30px}
    .menu-lft.two{height: auto;display: flex;flex-direction: row;flex-wrap: wrap;width: 100%;padding:0px;}
    .menu-lft.two li{width: 31%}




}
@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>a i{ margin:0; }
    .menu-lft li,.menu-lft.two li{width: 50%}{width: 48%}
    .header-mb-arrow{width: 20px;height: 20px;left: 15px}


}