
@charset "utf-8";


.banner{position: relative; min-height: 680px; width: 100%; margin: 0 auto;}
.banner-con{width: 100%; margin: 0 auto; position: absolute;left: 0; top: 0;}
.img-text{width: 1200px; margin: 160px auto 0; position: relative;height: 460px;}

.img-text-left{width: 367px;padding-top: 30px;}
.p1{margin-bottom: 20px;transition: all 0.8s ease-in-out;opacity: 0;transform: translateY(50px);}
.p2{font-size: 18px; color: #2a2929;transition: all 0.8s ease-in-out;opacity: 0;transform: translateY(50px);}
.banner-btn{width: 100%; overflow: hidden;display: flex;justify-content: space-between; margin-top: 70px;transition: all 0.8s ease-in-out;opacity: 0;transform: translateY(50px);}
.swiper-slide-active .p1{ opacity:1; transform:translateY(0); transition-delay:0.3s;}
.swiper-slide-active .p2{ opacity:1; transform:translateY(0); transition-delay:0.4s;}
.swiper-slide-active .banner-btn{ opacity:1; transform:translateY(0); transition-delay:0.5s;}
.swiper-slide-img{width: 100%; height: 680px;}
.banner-1{background: url(../images/banner1.jpg) no-repeat; background-size: cover;}
.banner-2{background: url(../images/banner2.jpg) no-repeat; background-size: cover;}
.banner-3{background: url(../images/banner3.jpg) no-repeat; background-size: 100% 100%;}
.banner .swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet{margin: 0 14px;}
.banner-btn a{display: inline-block;width: 170px;transition: all 0.3s linear;border-radius: 50px; height: 54px; line-height: 54px; text-align: center;font-size: 16px; }

a.open{color: #fff;background-image: -moz-linear-gradient( 0deg, rgb(225,10,32) 0%, rgb(244,44,72) 100%);
     background-image: -webkit-linear-gradient( 0deg, rgb(225,10,32) 0%, rgb(244,44,72) 100%);
     background-image: -ms-linear-gradient( 0deg, rgb(225,10,32) 0%, rgb(244,44,72) 100%);
     box-shadow: 0px 5px 8px 0px rgba(225, 10, 32, 0.16);
}
.open:hover{opacity: 0.8;}
.more{color: #fff;}
.banner-btn a.more:hover{background: #d4e7f5; color: #2f7db6;}

.banner-img{width: 100%;position: relative;}
.swiper-pagination1{width: 100%;}
.banner .swiper-pagination-bullet{ background:#c2c2c2; display: inline-block; height: 12px;  width:12px;  position: relative;vertical-align:middle; opacity: 0.8;border-radius: 12px;}
.banner .swiper-pagination-bullet.swiper-pagination-bullet-active{ background:#e20c23; opacity: 1;}
.banner .swiper-container-horizontal>.swiper-pagination-bullets,.banner .swiper-pagination-custom,.banner .swiper-pagination-fraction{bottom: 130px; text-align: center;}

.banner-bottom{height: 100px;width: 100%;z-index: 10; position: absolute; bottom: 0;left: 0; border-top: 1px solid #fff; background: url(../images/banner-bottom-bg.png) repeat;}
.banner-bottom-con{width: 1200px; margin: 0 auto;display: flex;  height: 100px;  justify-content: space-around;align-items: center;}
.banner-bottom-div{display: flex;justify-content: space-between; align-items: center; }
.banner-bottom-div i,.banner-bottom-div span{display: inline-block;} 
.banner-bottom-div i{margin: 0 10px;font-size: 16px; color: #151313;}  

.modal-btn{width: 116px; height: 34px; border: 1px solid #e2f0ff; background: none;text-align: center;border-radius: 6px;}
.modal-a{display: inline-block;background: url(../images/more2.png) no-repeat right center;line-height: 34px; padding-right: 30px; color: #616567; font-size: 14px;}


.img-text-right{width: 850px; height:449px; position: absolute; bottom: 0; right: -137px; }  
.ban-img-div{width: 100%; position: relative; height:449px;}
.ban-img {position: absolute; cursor: pointer;transition: all 0.6s; }
.ban-img4{background: url(../images/ban6.png) no-repeat; width: 300px; height: 275px;z-index: 2;}
.ban-img1{left: 636px; top: -60px;animation: box1 ease-in-out 2s;z-index: 2;}
.ban-img2{left: 564px; top:265px;animation: box2 ease-in-out 2.3s;z-index: 2;}
.ban-img3{left: -67px; top: 118px; animation: box3 ease-in-out 2.5s;z-index: 2; }
.ban-img4{left: 250px; top: -95px;animation: box4 ease-in-out 2.6s;z-index: 2;}
.ban-img5{left: 0; top: 0;animation: box5 ease-in-out 2.8;z-index: 1;}
.ban-img6{left: -67px; top: -117px;animation: box6 ease-in-out 2.8;z-index: 1;}
.ban-img7{left: 130px; top: -83px;animation: box6 ease-in-out 2.8;z-index: 1;}
/* .swiper-slide-active */
@keyframes box1 {from { opacity: 0; }to {opacity: 1;}}
@keyframes box2 {from { opacity: 0; }to {opacity: 1;}}
@keyframes box3 {from { opacity: 0; }to {opacity: 1;}}
@keyframes box4 { from { top: -400px; }to { top: -95px; }}
@keyframes box5 { from { top: -400px; }to { top: 0; }}
@keyframes box6 { from { top: -400px; }to { top: 0; }}
.ban-img4 img{animation:s-banTBani2 2s ease-in-out infinite;}
@keyframes s-banTBani2 {0% { transform:translateY(0);}
                        50% {transform:translateY(-20px);}
                        100% {transform:translateY(0); }
}

.index-modal1{background: url(../images/m1-bg.jpg) no-repeat; padding: 70px 0 70px; background-size: cover;}
.modal1-bg{width: 100%; background: url(../images/m1-bg2.png) no-repeat left center; background-size: 98% 136px;}
.modal1-bg-div{width: 1200px; margin: 62px auto 33px;height:700px; position: relative;}
.modal1-bg1{position: absolute;left: -90px;top:280px;z-index: 0;}
.modal1-bg2{position: absolute;right: -90px;top:280px;z-index: 0;}
.modal1-con{position: absolute; left: 0; top:0; display: flex; flex-wrap: wrap;justify-content: space-between;}
.modal1-item-card{box-shadow: 0px 8px 8px 0px rgba(0, 0, 0, 0.03);border-radius: 10px;width: 385px;height: 330px;margin-bottom: 35px;}
.modal1-title{margin: 40px 0 50px 40px;font-size: 20px; color: #e20c23;font-weight: bold;}
.modal1-div-a a{display: block;}
.modal1-div-a{padding: 0 40px; margin: 10px 0; height: 30px;position: relative;transition: height .4s;}
.modal1-div-a h4{font-size: 16px;font-weight: bold; color: #1e191a; background: url(../images/m1-dot1.png) no-repeat left center; padding-left: 30px; white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
}
.modal1-div-a p{padding-left: 30px;line-height: 25px;font-size: 14px; color: #e20c23; margin-top: 5px; opacity: 0; transition: opacity .5s;height:50px; overflow: hidden;text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical;-webkit-line-clamp: 2;}


.modal1-div-a:hover{height: 105px; background: url(../images/m1-txt-on.png) no-repeat;}
.modal1-div-a:hover p{opacity: 1;}

.m1-pic1{background: url(../images/m1-pic1.jpg) no-repeat left top #fff;}
.m1-pic2{background: url(../images/m1-pic2.jpg) no-repeat left top #fff;}
.m1-pic3{background: url(../images/m1-pic3.jpg) no-repeat left top #fff;}
.m1-pic4{background: url(../images/m1-pic4.jpg) no-repeat left top #fff;}
.m1-pic5{background: url(../images/m1-pic5.jpg) no-repeat left top #fff;}
.m1-pic6{background: url(../images/m1-pic6.jpg) no-repeat left top #fff;}
.modal1-a{text-align: center;}
a.more4{display: inline-block;text-align: center;line-height: 54px;border-radius: 27px; color: #fff;
     background-image: -moz-linear-gradient( 0deg, rgb(225,10,32) 0%, rgb(244,44,72) 100%);
     background-image: -webkit-linear-gradient( 0deg, rgb(225,10,32) 0%, rgb(244,44,72) 100%);
     background-image: -ms-linear-gradient( 0deg, rgb(225,10,32) 0%, rgb(244,44,72) 100%);
     box-shadow: 0px 5px 8px 0px rgba(225, 10, 32, 0.16); width: 197px; height: 54px;}
a.more4:hover{opacity: 0.7;}

.modal2{background: url(../images/m2-bg.jpg) no-repeat;background-size: cover; padding: 100px 0 70px;}
.modal2 .hmTbox {color: #fff;}
.modal2-con{width: 1200px; margin: 75px auto 0;  min-height: 620px;}
.modal2-menu{display: flex;justify-content: space-between;}
.modal2-nav{display: inline-block; position: relative;height: 177px;text-align: center; color: #767c81;cursor: pointer;}
.m2-icon{border-radius: 10px;width: 70px;margin: 0 auto 20px;text-align: center;height: 70px;background: #fff; box-shadow: 0px 5px 8px 0px rgba(225, 10, 32, 0.11);}
.m2-icon div{width: 70px; height: 70px; display: table-cell; vertical-align: middle; }
.modal2-nav h4{color: #fff;font-size: 20px;margin-bottom: 13px;opacity: 0.6;}
.modal2-nav p{font-size: 14px; color: #fff;opacity: 0.6;}
.modal2-nav:before,.modal2-nav:after {content: '';width: 0%; cursor: pointer; height: 3px;background-color: #fff;left: 50%;bottom: 0;transition: all 0.3s ease-in-out;position: absolute;}
/* .modal2-nav:hover:after { width: 50%;left: 65px;}
.modal2-nav:hover h4,.modal2-nav:hover p{opacity: 1;} */
.modal2-nav.on:after { width: 50%;left: 65px;}
.modal2-nav.on p,.modal2-nav.on h4{opacity: 1;}

.modal2-divs{padding-top: 67px;width: 1200px; height:427px;}
.modal2-div{float: left; height: 360px; cursor: pointer;}
.modal2-box{border-radius: 6px;padding: 55px 0 0 40px;float: left;margin-right: 20px;transition: all 0.3s linear;
     box-shadow: 0px 8px 8px 0px rgba(0, 0, 0, 0.33);width: 245px;height: 305px;background: url(../images/m2-txt-bg.jpg) no-repeat;position: relative;}
.modal2-box-tip{background: url(../images/m2-tip-on.png) no-repeat;height: 28px; line-height: 22px; font-size: 14px; color: #fff; padding: 0 10px;display: inline-block;}
.modal2-box h3{font-size: 24px; color: #e20c23;margin: 10px 0 35px;}
.modal2-box p{font-size: 14px; color: #504d4d; line-height: 35px;}
a.more3{display: inline-block;text-align: center;color: #e20c23; font-size: 16px; height: 46px;line-height: 46px;opacity: 0.9; border-radius: 25px; width: 195px;background: #fffdfd; border: 1px solid #f9ced2; position: absolute; bottom: 30px;}
.m2-pic{position: absolute; right:-11px; top: 0;transition: all 0.3s linear;}
.m2-pic img{display: inline-block;}
.modal2-div:last-child .modal2-box{margin-right: 0;}

.modal2-box:hover{background: url(../images/m2-txt-bg-on.jpg) no-repeat;}
.modal2-box:hover .modal2-box-tip{background: url(../images/m2-tip.png) no-repeat; color: #fc2628;}
.modal2-box:hover p{color: #fff;}
.modal2-box:hover h3{color: #fff;}
.modal2-box:hover .m2-pic{top: -50px;}
.modal2-box.on{background: url(../images/m2-txt-bg-on.jpg) no-repeat;}
.modal2-box.on .modal2-box-tip{background: url(../images/m2-tip.png) no-repeat; color: #fc2628;}
.modal2-box.on p{color: #fff;}
.modal2-box.on h3{color: #fff;}
.modal2-box.on .m2-pic{top: -50px;}

.modal3{background: url(../images/m3-bg.jpg) no-repeat;background-size: 100% 100%;background-position: center center; padding: 100px 0 40px;}
.modal3-con{width: 1200px;margin: 80px auto 0; text-align: center;}
.modal3-con img{display: inline-block; max-width: 100%;}
.index-box3-div{position: relative; width: 1200px; margin-top: 30px;margin-bottom: 100px; height: 600px; background: url(../images/m3-pic-bg.png) no-repeat center center;}
.index-box3-div div{position: absolute;}
.index-box3-div div:hover h4{color: #fc2628;}
.index-box3-div div h4{font-size: 18px; color: #292929; padding-bottom: 10px;}
.index-box3-div .index-box3-p1{font-size: 14px; color: #787878; line-height: 30px;text-align:right;}
.index-box3-div .index-box3-p2{ font-size: 14px; color: #787878; line-height: 30px;text-align:left;}
.index-box3-div1{left:249px; top:54px; text-align: right;}
.index-box3-div2{left: 28px; top: 196px; text-align: right;}
.index-box3-div3{left: 80px; top: 358px; text-align: right;}
.index-box3-div4{left: 192px; top: 529px; text-align: right;}
.index-box3-div5{right: 261px; top: 48px;}
.index-box3-div6{right: 96px; top: 200px;}
.index-box3-div7{right: 93px; top: 362px;}
.index-box3-div8{right: 154px; top: 527px;}

.modal3-num{width: 100%;height:180px;padding-top: 70px;}
.modal3-con-box{width: 240px; float: left; text-align: center;}
.modal3-con-num span{color: #e61217; font-size: 60px;width: 55px; font-family: 'Impact'; margin-right: 10px; display: inline-block;}
.modal3-con-num strong{color: #e61217; font-size: 16px; padding-right: 5px; display: inline-block;}
.add{background: url(../images/add.png) no-repeat;display: inline-block; width:17px; height: 26px;}
.reduce{background: url(../images/reduce.png) no-repeat;display: inline-block; width:17px; height: 26px;}
.modal3-con-box p{color: #1c1616; line-height:80px;font-size: 14px;}



.modal4{background: url(../images/m4-bg.jpg) no-repeat;background-size: 100% 100%;background-position: center center; padding: 100px 0 70px;}
.modal4-con{width: 1200px;margin: 100px auto 0;height: 568px; position: relative;background: url(../images/m4-left-bg.jpg) no-repeat;border-radius: 10px;} 
.modal4-menu{width: 299px;height: 538px;padding: 30px 0 0 15px; position: absolute; left: 0; top: 0; z-index: 3;}
.modal4-nav{line-height: 68px;cursor: pointer;margin-bottom: 6px;padding-left: 20px;}
.modal4-nav.on{background: url(../images/m4-txt-on.png) no-repeat; color: #e20c23;}
.modal4-nav span{display: inline-block;  float: left; width: 25px; height: 68px;margin-right: 10px;}
.modal4-nav1{background: url(../images/m4-icon1.png) no-repeat left center;}
.modal4-nav2{background: url(../images/m4-icon2.png) no-repeat left center;}
.modal4-nav3{background: url(../images/m4-icon3.png) no-repeat left center;}
.modal4-nav4{background: url(../images/m4-icon4.png) no-repeat left center;}
.modal4-nav5{background: url(../images/m4-icon5.png) no-repeat left center;}
.modal4-nav6{background: url(../images/m4-icon6.png) no-repeat left center;}
.modal4-nav7{background: url(../images/m4-icon7.png) no-repeat left center;}

.modal4-nav.on .modal4-nav1{background: url(../images/m4-icon1-on.png) no-repeat left center;}
.modal4-nav.on .modal4-nav2{background: url(../images/m4-icon2-on.png) no-repeat left center;}
.modal4-nav.on .modal4-nav3{background: url(../images/m4-icon3-on.png) no-repeat left center;}
.modal4-nav.on .modal4-nav4{background: url(../images/m4-icon4-on.png) no-repeat left center;}
.modal4-nav.on .modal4-nav5{background: url(../images/m4-icon5-on.png) no-repeat left center;}
.modal4-nav.on .modal4-nav6{background: url(../images/m4-icon6-on.png) no-repeat left center;}
.modal4-nav.on .modal4-nav7{background: url(../images/m4-icon7-on.png) no-repeat left center;}

.modal4-nav:hover {color: #e20c23;}

.modal4-rights{float: right; width: 923px;height: 568px;}
.modal4-right{padding: 90px 0 0 40px;display: none;height: 478px;position: relative;transition: all 0.3s linear;}
.modal4-right.on{display: block;}
.modal4-right-div{width: 474px;}
.modal4-right-div h4{font-size: 24px; color: #1e191a;margin-bottom: 50px;}
.modal4-right-div p{font-size: 14px; color: #676767;line-height: 30px;height: 200px; margin-bottom: 30px;overflow: hidden;text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical;-webkit-line-clamp: 6;}
.m4-pic1{position: absolute; right:-71px; top: -76px;}
.m4-pic2{position: absolute; right:-48px; top: -106px;}
.m4-pic3{position: absolute; right:-47px; top: -85px;}
.m4-pic4{position: absolute; right:-85px; top: -92px;}
.m4-pic5{position: absolute; right:-66px; top: -81px;}
.m4-pic6{position: absolute; right:-64px; top: -106px;}
.m4-pic7{position: absolute; right:-91px; top: -68px;}

.modal4-right1{background: url(../images/m4-right-bg1.jpg) no-repeat;}
.modal4-right2{background: url(../images/m4-right-bg2.jpg) no-repeat;}
.modal4-right3{background: url(../images/m4-right-bg3.jpg) no-repeat;}
.modal4-right4{background: url(../images/m4-right-bg4.jpg) no-repeat;}
.modal4-right5{background: url(../images/m4-right-bg5.jpg) no-repeat;}
.modal4-right6{background: url(../images/m4-right-bg6.jpg) no-repeat;}
.modal4-right7{background: url(../images/m4-right-bg7.jpg) no-repeat;}

.modal5{background: url(../images/m5-bg.jpg) no-repeat;background-size: cover; padding: 100px 0 70px;}
.modal5-con{position: relative;width: 100%;}
.modal5-menu{display: flex;justify-content: space-evenly; height: 52px;width: 1200px; margin: 70px auto 34px;}
.modal5-menu span{display: inline-block;cursor: pointer; padding-bottom: 25px; font-size: 20px; color: #1c1616;padding-bottom: 0;position: relative;text-decoration: none;}
.modal5-menu span:before,.modal5-menu span:after {content: '';width: 0;height: 3px;background-color: #ee3333;bottom: 0;left: 50%;transition: all 0.4s;position: absolute;}
.modal5-menu span:hover:after { width: 100%;left:0px;}
.modal5-menu span.on:after { width: 100%;left:0px;}
.modal5-menu span:hover{ color: #ee3333;}
.modal5-menu span.on{ color: #ee3333;}
.modal5-menu span{font-size: 20px;}
.modal5-divs{width: 100%;}
.modal5-div{width: 100%;box-shadow: 0px 7px 8px 0px rgba(143, 143, 143, 0.08);height: 508px;display: none;}
.modal5-div.on{display: block;animation: fadeInUp 0.5s ease;}
.modal5-div-left{width: 50%;height: 508px;float: left;display: inline-block;}
.modal5-div-img1{background: url(../images/m5-pic1.jpg) no-repeat; background-size: cover;}
.modal5-div-img2{background: url(../images/m5-pic2.jpg) no-repeat; background-size: cover;}
.modal5-div-img3{background: url(../images/m5-pic3.jpg) no-repeat; background-size: cover;}
.modal5-div-img4{background: url(../images/m5-pic4.jpg) no-repeat; background-size: cover;}
.modal5-div-img5{background: url(../images/m5-pic5.jpg) no-repeat; background-size: cover;}
.modal5-div-right{width: 46%;padding-left: 4%; padding-top: 70px;float: left; display: inline-block;}
.modal5-div-right h5{display: flex; align-items: flex-end;}
.modal5-div-right h5 span{display: inline-block; font-size: 22px;color: #e20c23;margin-top: 15px;}
.modal5-div-right h5 img{display: inline-block;}
.modal5-div-right p{width: 500px;line-height: 30px;height: 150px; margin: 40px 0;font-size: 14px; color: #303030;overflow: hidden;text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical;-webkit-line-clamp: 5;}
.modal5-logos{width: 1200px; margin: 35px auto;display: flex; flex-wrap: wrap;justify-content: space-between;}
.modal5-logos span{display: inline-block;border-radius: 10px;height: 70px; transition: all 0.3s linear;width: 222px;text-align: center;border: 1px solid #f4f4f4;margin-bottom: 20px;}
.modal5-logos span img{height: 70px;}
.modal5-logos span:hover{border: 1px solid #e20c23;}

.modal6{padding: 0 0 70px;}
.modal6-con{height: 483px; background: url(../images/m6-bg.jpg) no-repeat left top #f4f4f4;width: 100%;margin-top: 105px;position: relative;}
.modal6-con-left{padding-top: 100px;width: 540px;}
.modal6-con-left h4{font-size: 24px; color: #1e191a;}
.modal6-con-left p{font-size: 14px; color: #676767;margin-top: 34px; line-height: 30px;height: 180px; overflow: hidden;text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical;-webkit-line-clamp: 6;}
.modal6-con-left div{margin-top: 50px;}
.modal6-con-video{position: absolute;right: 0;top: 0;width: 50%;}
.modal6-con-video div img{width: 100%;height: 483px;}
.modal6-video-con{position: relative;}
.m6-icon1{position: absolute; left: -333px; top: -61px; background: url(../images/m6-icon1.png) no-repeat;width: 334px; height: 258px;}
.video-icon{position: absolute; right: 50%; top: 50%;width: 54px;cursor: pointer; height: 54px; background: url(../images/video.png) no-repeat; margin-right: -27px; margin-top: -27px;} 


.modal7{background: url(../images/m7-bg.jpg) no-repeat;background-size: cover; padding: 0 0 70px;position: relative;}
.more-div{text-align: center;}
a.more2{display: inline-block;text-align: center;color: #e20c23; font-size: 16px; height: 46px;line-height: 46px;opacity: 0.9; border-radius: 25px; width: 165px;background: #fffdfd; border: 1px solid #f9ced2;}
a.more2:hover{background: #e20c23;color: #fff;}
.modal7-con{width: 1200px; margin: 60px auto; display: flex;justify-content: space-between;}
.modal7-con-div{width: 330px;display: inline-block; height: 103px;padding: 30px 25px; background: #fff; border: 1px solid #e7e7e7;border-radius: 10px; transition: all 0.3s linear;}
.modal7-con-div div{font-size: 16px; color: #1e191a;line-height: 26px;height: 52px; overflow: hidden;text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical;-webkit-line-clamp: 2;}
.modal7-con-div p{margin-top: 20px;}
.modal7-con-div:hover{border: 1px solid #ef9ca5; background: url(../images/m7-txt-bg.png) no-repeat #fff;background-size: 100% 100%;}
.modal7-con-div:hover div{color: #e20c23;}
.m7-bg2{position: absolute; bottom: -48px; left: 24px;}





@media screen and (max-width: 1500px){
     .modal1-bg{width: 100%; background: url(../images/m1-bg2.png) no-repeat left center; background-size: 100% 136px;}
     .modal6-con-left{width: 440px;}
     .modal6-con-video{width: 47%;}
     
}

   



































