*{margin:0; padding:0;}
html,body{margin:0 auto; max-width:1920px; overflow-x:hidden;}
body{font:16px/1.6 'Microsoft Yahei'; background-color:#fff; color:#333; -webkit-tap-highlight-color:transparent;}
a{color:#333; text-decoration:none; transition: all .3s;}
a:hover{color:#ee3131!important;}
a,span,i,em{display:inline-block;}
ul,li{list-style:none;}
.wp {position:relative; margin:0 auto; width:1300px;}
.text-l{text-align:left;}
.text-c{text-align:center;}
.text-r{text-align:right;}

.ellipsis{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.img-100{display:block; width:100%;}

.pc{position:relative;}
.mobile{position:relative; display:none;}
@media (max-width:750px) {
    .pc{display:none;}
    .mobile{display:block;}
    .wp{width:auto; box-sizing:border-box;}
}

/* Flex */
.flex{display:flex;}
.flex-vertical{flex-flow:column}
.flex-center{align-items:center; justify-content:center;}
.flex-wrap-row{flex-wrap:wrap; flex-direction:row;}
.flex-auto{flex:1;}

/* 头部 */
.header{background:#ee3131;}
.header .info{width:400px;}
.header .box1{height:116px;}
.header .box1 .info{position:relative; height:100%;}
.header .box1 .info::before{position:absolute; left:0; top:0; width:1000px; height:100%; content:''; background-color:#222;}
.header .box1 .info .tel{position:absolute; left:30px; top:26px; color:#fff; z-index:10; line-height:1.2; background:url(../img/tel.png) no-repeat 0 50%; padding:10px 0 10px 75px;}
.header .box1 .info .tel p{color:#ee3131; font-size:18px;}
.header .box1 .info .tel span{color:#9f9e9e; font-size:13px;}

/* 导航 */
.menu{background:#2e375f;}
.menu li{position:relative; float:left; font-size:18px; z-index: 9999;}
.menu li a{padding:0 20px; height:60px; line-height:60px; color:#fff;}
.menu li .active,.menu li a:hover{color:#ee3131!important;}
.menu li:hover .subnav{display:block;}
.menu .subnav{display:none; position:absolute; left:0; top:60px; width:100px; background-color:#2e375f; box-shadow:0 8px 8px 3px rgba(0,0,0,.03); padding:0 20px 20px;}
.menu .subnav li{float:none;}
.menu .subnav a{display:block; height:auto; line-height:1; padding:10px 0; color:#fff;}
.menu .subnav a:hover, .menu .subnav a.active{color:#ee3131; border-bottom-color:#ee3131;}
.menu .subnav a:last-child{border-bottom:0;}

/* 移动端导航 */
.m-header{position:fixed; left:0; top:0; width:100%; height:50px; background-color:#ee3131; box-shadow:0 0 3px 2px rgba(0, 0, 0, .05); z-index:9999;}
.m-header .logo img{position:absolute; left:15px; top:50%; width:60%; transform:translateY(-50%);}
.m-header .bars{padding:0 20px; line-height:50px; font-size:24px; color:#fff;}
.m-menu{display:none;}
.m-menu .m-mask{position:fixed; left:0; top:0; width:100%; height:100%; background-color:rgba(0,0,0,.6); z-index:9990;}
.m-menu ul{position:fixed; left:0; top:50px; width:100%; max-height:90vh; padding:20px 30px; background-color:#fff; box-shadow:0 0 3px 2px rgba(0, 0, 0, .15); z-index:9995; overflow-y:auto; box-sizing:border-box;}
.m-menu ul li i{position:absolute; right:2px; top:13px; font-weight:700; color:#ee3131;}
.m-menu ul li a{position:relative; display:block; padding:8px 0; border-bottom:1px solid #eee;}
.m-menu ul li .active{color:#ee3131; font-weight:700;}
.m-menu ul li:last-child a{border:0;}
.m-menu ul .open .subnav{display:block;}
.m-menu ul .subnav{display:none;}
.m-menu ul .subnav a{padding:8px 2em; color:#979898;}
.m-menu ul .subnav a.active{color:#ee3131;}

/* 底部 */
.footer{background:#1c1b20; color:#b1b1b1;}
.footer a{color:#b1b1b1;}
.footer .info{padding:80px 0; text-align:center;}
.footer .logo img{display:block; margin:0 auto;}
.footer .nav{display:inline-block; padding-top:30px; margin-top:30px; border-top:1px solid #666; text-align:center; font-size:20px;}
.footer .nav a{margin:0 20px;}
.footer .copyright{padding:15px 0; border-top:1px solid #666; text-align:center;}
@media (max-width:750px) {
    .footer .info{padding:40px 0;}
    .footer .logo img{width:40%;}
    .footer .nav{display:block; font-size:16px;}
    .footer .copyright{padding:15px 20px;}
}

/* 轮播图 */
.swiper{width:100%; height:100%;}
.swiper-slide img{display:block; width:100%; height:100%; object-fit:cover;}
.swiper-pagination .swiper-pagination-bullet{width:25px; height:4px; border-radius:0;}
.swiper-pagination .swiper-pagination-bullet-active{background-color:#ee3131;}

.i-line::after{position:absolute; right:-600px; top:-50px; width:1000px; height:50px; content:''; background-color:#2e375f; z-index:99999;}

/* 产品 */
.i-focus{position:relative; margin:50px auto; height:450px; background:#fff;}
.i-focus::before{position:absolute; left:-320px; width:560px; height:100%; background:#2e375f; content:'';}
.i-focus .left{position:absolute; right:650px; top:0; width:1000px; height:100%; z-index:10; background:no-repeat right center;}

.i-focus .right{position:relative; float:right; width:600px; height:100%;}
.i-focus .right::after{position:absolute; left:-25px; top:0; width:3px; height:75px; background:#ee3131; content:'';}
.i-focus .right h1{color:#ee3131; font-size:36px; line-height:1;}
.i-focus .right h3{color:#000; font-size:20px; padding:8px 0;}
.i-focus .right p{color:#888; font-size:18px; line-height:1.8;}
.i-focus .right .zb{position:absolute; bottom:80px; left:0; width:100%; color:#000; font-size:18px; font-weight:700; line-height:1;}
.i-focus .right .zb span{display:block; font-size:44px; padding-bottom:6px; font-family:fantasy;  font-weight:400;}
.i-focus .right .more{position:absolute; left:0; bottom:0;}
.i-focus .right .more a{padding:10px 30px; background:#ee3131; color:#fff; font-size:18px;}
.i-focus .right .more a:hover{background:#2e375f; color:#fff!important;}
@media (max-width:1500px) {
    .i-focus .left{background-size:650px auto;}
}
@media (max-width:750px) {
    .i-focus{margin:0; height:auto; padding-bottom:30px;}
    .i-focus::before{left:0; top:0; width:100%; height:100px;}
    .i-focus .left{position:relative; left:0; top:0; width:100%; height:200px; background:no-repeat 50% 50%/80% auto;}
    .i-focus .right{float:none; width:auto; height:auto; padding:20px;}
    .i-focus .right h1{font-size:20px;}
    .i-focus .right h3{font-size:14px;}
    .i-focus .right p{font-size:14px;}
    .i-focus .right .zb{position:relative; bottom:auto; font-size:14px; padding:15px 0;}
    .i-focus .right .zb span{font-size:22px; font-weight:700;}
    .i-focus .right .more{position:relative; bottom:auto;}
    .i-focus .right .more a{display:block; font-size:14px; padding:10px 0; text-align:center; width:100%;}
}

/* 案例 */
.i-case{padding-top:50px;}
.i-case .title{text-align:center;}
.i-case .title h1{position:relative; color:#2e375f; font-size:32px; padding-bottom:12px; margin-bottom:12px;}
.i-case .title h1 span{color:#ee3131;}
.i-case .title h1::after{position:absolute; left:50%; bottom:0; margin-left:-43px; width:86px; height:2px; background:#ee3131; content:'';}
.i-case .title p{margin:0 auto; width:600px; color:#888;}
.i-case .tab{padding-top:30px; text-align:center; user-select:none;}
.i-case .tab span{margin:0 2px; padding:10px 30px; font-size:18px; background:#2e375f; color:#fff; cursor:pointer;}
.i-case .tab span.active{background:#ee3131;}

.i-case .list{padding-top:50px;}
.i-case .list .box{display:none;}
.i-case .list .box ul{overflow:hidden;}
.i-case .list .box li{float:left; margin:0 25px 25px 0; width:306px; height:220px; overflow:hidden;}
.i-case .list .box li:nth-child(4n+4){margin-right:0;}
.i-case .list .box li img{display:block; width:100%; height:100%; object-fit:cover; transition:all .3s}
.i-case .list .box li:hover img{transform:scale(1.1);}

@media (max-width:750px) {
    .i-case{padding:20px;}
    .i-case .title h1{font-size:26px;}
    .i-case .title p{width:100%;}
    .i-case .tab{text-align:left;}
    .i-case .tab span{padding:10px 20px; margin:0 2px 5px 0;}
    .i-case .list{padding-top:10px;}
    .i-case .list .box li{margin:0; width:50%; height:auto;}
    .i-case .list .box li img{height:auto;}
}

/* 关于我们 */
.i-about{margin-top:50px; height:520px;}
.i-about .left{position:absolute; right:210px; top:0; width:1508px; height:520px; background:url(../img/company.jpg) no-repeat;}

.i-about .right{position:absolute; left:640px; top:60px; width:1090px; height:480px; background:#ee3131;}
.i-about .right .box{margin:50px 50px 0 50px; width:600px; color:#fff;}
.i-about .right .box .tit{font-size:42px; font-weight:700; line-height:1;}
.i-about .right .box .con{padding:25px 0; font-size:18px; text-align:justify;}
.i-about .right .box p{text-indent:2em; padding:5px 0;}
.i-about .right .box a{background:#fff; color:#000; padding:10px 30px; font-size:20px;}
.i-about .right .box a:hover{background:#2e375f; color:#fff!important;}
@media (max-width:750px) {
    .i-about{margin-top:10px; height:auto;}
    .i-about .left{position:relative; left:0; top:0;width:100%; height:200px; background-position:50% 50%; background-size:cover;}
    .i-about .right{position:relative; left:0; top:0; width:100%; height:auto;}
    .i-about .right .box{margin:0; padding:20px; width:auto;}
    .i-about .right .box .tit{font-size:22px;}
    .i-about .right .box .con{padding:20px 0; font-size:14px;}
    .i-about .right .box a{display:block; padding:10px 0; width:100%; text-align:center; font-size:16px;}
}

/* 联系我们 */
.i-contact{height:560px; background:url(../img/contact.jpg) no-repeat 50% 50%/cover;}
.i-contact .info{padding:120px 0 0 100px;}
.i-contact .con1{position:relative; font-size:40px; font-weight:700; line-height:1.4; color:#000; letter-spacing:2px;}
.i-contact .con1 span{color:#ee3131;}
.i-contact .con1::after{position:absolute; left:-36px; top:12px; width:3px; height:110px; background:#ee3131; content:'';}

.i-contact .con2, .i-contact .con3{position:relative; margin-top:40px; font-size:18px; line-height:1;}
.i-contact .con2 p{padding-top:10px; font-size:36px; color:#ee3131; font-weight:700;}
.i-contact .con3 p{padding-top:10px; font-size:20px;}

.i-contact .con2::after{position:absolute; left:-92px; top:3px; width:58px; height:60px; background:url(../img/tel2.png) no-repeat; content:'';}
.i-contact .con3::after{position:absolute; left:-96px; top:-6px; width:66px; height:65px; background:url(../img/address.png) no-repeat; content:'';}

.i-contact .qrcode{position:absolute; right:0; top:120px;}
@media (max-width:750px) {
    .i-contact{height:auto;}
    .i-contact .info{padding:20px;}
    .i-contact .con1{font-size:22px;}

    .i-contact .qrcode{display:none;}
}







.page-main .wp{padding:30px 0 50px;}
.page-main .left{position:absolute; top:0; right:0; width:280px; height:100%; background:#2e375f;}
.page-main .left::before{position:absolute; left:0; top:-50px; width:100%; height:50px; background:#2e375f; z-index:9999; content:'';}
.page-main .right{width:960px; min-height:850px;}
@media (max-width:750px) {
    .page-main{padding:0 0 30px;}
    .page-main .left{display:none;}
    .page-main .right{float:none; width:auto; min-height:auto;}
}

.page-main .left .menu-title{text-align:center; font-size:36px; color:#fff; padding-bottom:40px; line-height:1;}
.left-menu a{position:relative; display:block; padding:6px 30px 6px 90px; color:#fff; font-size:18px;}
.left-menu a .tb{position:absolute; left:50px; top:9px;}
.left-menu a.active{background-color:#ee3131; color:#fff!important;}
.left-menu a i{position:absolute; right:20px; top:10px;}
.left-menu .open .subnav{display:block;}
.left-menu .subnav{position:relative;}
.left-menu .subnav::after{position:absolute; left:60px; top:0; width:1px; bottom:20px; background:#777d97; content:'';}
.left-menu .subnav a{position:relative; text-indent:1em; z-index:999;}
.left-menu .subnav a::after{position:absolute; left:60px; top:50%; width:40px; height:1px; background:#777d97; content:'';}
.left-menu .subnav .active::after{display:none;}

.page-title{margin-top:30px; background:#ee3131; color:#fff; font-size:20px; padding:15px 30px; font-weight:700;}
.page-dir{height:35px; line-height:35px; padding:0 10px; background-color:#2e375f; font-size:14px;}
.page-dir span{padding:0 5px; color:#fff;}
.page-dir a{color:#fff;}

.show-title{text-align:center; padding:20px; border-bottom:1px solid #eee; font-weight:700; font-size:18px;}
@media (max-width:750px) {
    .page-main .wp{padding:0;}
    .page-dir{padding:5px 10px;}
}

.page-content{padding:30px 0 0;}
.page-content img{margin:0 auto; display:block; max-width:100%!important; height:auto!important;}

.page-more{padding-top:30px; font-size:14px;}
.page-more p{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.page-more p a{display:inline;}


/* 新闻列表 */
.news-list{}
.news-list .item{clear:both; padding:20px 0; border-bottom:1px solid #eee; overflow:hidden;}
.news-list .item .thumb{float:left; width:120px; height:80px;}
.news-list .item .thumb a{display:block; width:100%; height:80px; overflow:hidden;}
.news-list .item .thumb img{display:block; width:100%; height:100%; object-fit:cover;}
.news-list .item .info{float:right; width:825px;}
.news-list .item .info h3{font-size:16px;}
.news-list .item .info h3 a{color:#333;}
.news-list .item .info p{font-size:14px; color:#999; padding-top:5px;}
@media (max-width:750px) {
    .news-list .item{display:flex; padding:20px 10px;}
    .news-list .item .thumb{float:none; padding-right:10px;}
    .news-list .item .info{float:none; flex:1;}
    .news-list .item .info p{overflow:hidden; -webkit-line-clamp:2; text-overflow:ellipsis; display:-webkit-box; -webkit-box-orient:vertical;}
}

/* 产品案例列表 */
.product-list{overflow:hidden;}
.product-list .item{float:left; margin:30px 30px 0 0; width:300px;}
.product-list .item:nth-child(3n+3){margin-right:0;}
.product-list .item .thumb{height:220px;}
.product-list .item .thumb a{display:block; width:100%; height:220px; overflow:hidden;}
.product-list .item .thumb img{display:block; width:100%; height:100%; object-fit:cover;}
.product-list .item .tit{font-size:16px; text-align:center; padding-top:10px;}
.product-list .item .tit a{display:block; color:#333; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
@media (max-width:750px) {
    .product-list{padding:5px;}
    .product-list .item{width:50%; margin:0; border:5px solid #fff; box-sizing: border-box;}
    .product-list .item .thumb, .product-list .item .thumb a{height:120px;}
}

/* 分页 */
.pages{padding-top:50px; text-align:center;}
.pages li{display:inline-block; padding:0 4px;}
.pages li a{border:1px solid #e8e8e8; border-radius:5px; padding:5px 15px; color:#666;}
.pages li.active a{border-color:#2e375f; background-color:#2e375f; color:#fff!important;}

.video{padding:30px 0 0;}
.player{width:100%; height:500px; background-color:#000;}

@media (max-width:750px) {
    .player{height:280px;}
    .page-title{padding:20px 20px 0; font-size:20px; text-align:center;}
    .page-content, .video, .pages, .page-more{padding:20px;}
}