.swiper-slide,.swiper-wrapper{ height: auto; }
.banner_con{ position: relative; }
.banner_con .banner{ width: 100%; }
.banner_con .fix{ position: absolute; width: 100%; top: 50%; margin-top: -50px; text-align: center; opacity: 0; transform: translateY(50%); }
.banner_con .swiper-slide-active .fix{ opacity: 1; transform: translateY(0); transition: all 0.5s ease; }
.banner_con .swiper-button-next{ right: 50px; color: #e60012; }
.banner_con .swiper-button-prev{ left: 50px; color: #e60012; }
.mainTitle{ text-align: center; }
.mainTitle h3{ font-size: 30px; color: #000; margin-bottom: 10px; font-weight: bold; }
.mainTitle .en{ font-size: 12px; color: #000; opacity: 0.4; margin-bottom: 20px; }
.mainTitle span{ display: inline-block; width: 70px; height: 4px; background: #e60012; margin-bottom: 50px; }

.aboutCont{ padding: 80px 0; background: #fff url(../images/index/aboutBg.png) no-repeat center; background-size: 100% auto; }
.aboutCont .mainTitle{ text-align: left; }
.aboutCont .flex{ display: flex; align-items: center; justify-content: space-between; }
.aboutCont .text{ width: 50%; padding-bottom: 20px; }
.aboutCont .text a{ font-size: 12px; color: #2f2f2f; width: 110px; text-align: center; line-height: 30px; border: 1px solid #bbb9c4; border-radius: 50px; display: inline-block; transition: all 0.3s ease; margin-top: 20px; }
.aboutCont .text a:hover{ color: #fff; background: #e60012; border-color: #e60012; }
.aboutCont .text p{ font-size: 16px; color: #000; margin-bottom: 20px; line-height: 26px; }
.aboutCont .imgbox{ width: 42%; }
.aboutCont .imgbox img{ width: 100%; transition: all 1.5s ease; }
.mob{ display: none !important; }
.aboutCont .imgbox:hover img{ transform: scale(1.05) }

.pictureCont{ position: relative; }
.pictureCont .bg{ width: 100%; }
.pictureCont .bgbox{ width: 100%; height: 100%; transition: all 1.5s ease; }
.pictureCont>div:hover .bgbox{ transform: scale(1.05); }
.pictureCont>div{ position: absolute; text-align: center; overflow: hidden; }
.pictureCont .pic1{ position: absolute; width: 67%; height: 100%; left: 0; top: 0; }
.pictureCont .pic2{ position: absolute; width: 33%; height: 50%; right: 0; top: 0; }
.pictureCont .pic3{ position: absolute; width: 33%; height: 50%; right: 0; bottom: 0; }
.pictureCont .pic1 .bgbox{ background: url(../images/index/pic1.jpg) no-repeat center; background-size: cover; }
.pictureCont .pic2 .bgbox{ background: url(../images/index/pic2.jpg) no-repeat center; background-size: cover; }
.pictureCont .pic3 .bgbox{ background: url(../images/index/pic3.jpg) no-repeat center; background-size: cover; }
.pictureCont>div .phone{ display: none; }
.pictureCont>div .text{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; color: #fff; display: flex; align-items: center; justify-content: center; text-align: center; }
.pictureCont>div .text h3{ font-size: 30px; }
.pictureCont>div .text .line{ display: inline-block; width: 70px; height: 4px; background: #e60012; margin: 40px 0; }
.pictureCont>div .text p{ font-size: 16px; line-height: 28px; margin-bottom: 20px; width: 80%; margin: 0 auto 20px; text-align: left; }

.advantageCont{ padding: 80px 0; }
.advantageCont .flex{ display: flex; justify-content: space-between; }
.advantageCont .li{ width: 25%; text-align: center; font-weight: bold; color: #47474b; font-size: 18px; }
.advantageCont .li .icon{ display: inline-block; position: relative; margin-bottom: 30px; border: 2px solid #e60012; border-radius: 100%; }
.advantageCont .li .icon::after{ content: ''; left: -5%; top: -5%; position: absolute; width: 110%; height: 110%; background: url(../images/index/border1.png) no-repeat center; transition: all 0.4s ease; }
.advantageCont .li .icon::before{ content: ''; left: -5%; top: -5%; position: absolute; width: 110%; height: 110%; background: url(../images/index/border2.png) no-repeat center; transition: all 0.6s ease; }
.advantageCont .li img{ max-width: 100%; }
.advantageCont .li:hover .icon::after{ transform: rotate(180deg); }
.advantageCont .li:hover .icon::before{ transform: rotate(180deg); }

.productCont .flex{ display: flex; justify-content: space-between; flex-wrap: wrap; }
.productCont .li{ width: 50%; overflow: hidden; position: relative; }
.productCont .li:hover img{ transform: scale(1.05); }
.productCont .li img{ width: 100%; transition: all 1.5s ease; }
.productCont .li .text{ position: absolute; width: 100%; top: 0; height: 100%; display: flex; align-content: center; text-align: center; justify-content: center; flex-wrap: wrap; }
.productCont .li .text p{ font-size: 32px; color: #fff; width: 100%; margin-bottom: 20px; font-weight: lighter; }
.productCont .li .text a{ display: inline-block; width: 115px; text-align: center; line-height: 32px; border: 1px solid #fff; border-radius: 50px; color: #fff; transition: all 0.3s ease; }
.productCont .li .text a:hover{ border-color: #e60012; background: #e60012; }

@media (any-hover: hover) {
    .productCont .li .text p{ margin-bottom: 40px; }
    .productCont .li .text{ transform: translateY(40px); transition: all 0.3s ease 0.2s; }
    .productCont .li .text .a{ opacity: 0; visibility: hidden; transition: all 0.5s ease; transform: translateY(40px); }
    .productCont .li:hover .text{ transform: translateY(0); transition: all 0.3s ease; }
    .productCont .li:hover .text .a{ opacity: 1; visibility: visible; transform: translateY(0); transition: all 0.5s ease 0.2s; }
}
@media only screen and (max-width: 1400px) {
    .pictureCont>div .text p{ font-size: 14px; }
    .pictureCont>div .text .line{ margin: 20px 0; }
}
@media only screen and (max-width: 1200px) {
    .pictureCont{ display: flex; flex-wrap: wrap; }
    .pictureCont .pic1{ position: relative; width: 100%; height: auto; }
    .pictureCont .pic2,.pictureCont .pic3{ position: relative; width: 50%; height: auto; }
    .pictureCont .bg{ display: none; }
    .pictureCont>div .phone{ display: block; min-width: 100%; }
    .pictureCont .bgbox{ display: none; }
}
@media only screen and (max-width: 820px) {
    .aboutCont{ padding: 80px 0; }
    .pictureCont .pic1 .phone{ position: absolute; z-index: 1; top: 0; height: 100%; }
    .pictureCont .pic1 .text{ position: relative; z-index: 2; padding: 40px 20px; box-sizing: border-box; height: auto; }
    .pictureCont .pic2,.pictureCont .pic3{ width: 100%; }
}
@media only screen and (max-width: 510px) {
    .mainTitle h3{ font-size: 26px; }
    .mainTitle .en{ margin-bottom: 10px; }
    .aboutCont .flex{ flex-wrap: wrap; justify-content: space-between; }
    .aboutCont .imgbox{ width: 100%; text-align: center; order: 2; }
    .aboutCont .imgbox img{ width: 60%; }
    .aboutCont .text{ width: 100%; margin-bottom: 20px; order: 1; text-align: center; }
    .aboutCont{ padding: 40px 0; }
    .aboutCont .mainTitle{ text-align: center; }
    .mainTitle span,.aboutCont .text p{ margin-bottom: 20px; }
    .advantageCont{ padding: 40px 0; }
    .advantageCont .li{ width: 50%; margin-bottom: 20px; }
    .advantageCont .flex{ flex-wrap: wrap; margin-top: 20px; }
    .productCont .li{ width: 100%; }
    .productCont .li .text p,.pictureCont>div .text h3{ font-size: 26px; }
    .pictureCont>div .text .line{ margin: 20px 0; }
    .pictureCont>div .text p{ width: 100%; }
    .banner_con .fix{ margin-top: -20px; }
    .banner_con .fix img{ width: 60%; }
    .banner_con .swiper-button-prev{ left: 30px; }
    .banner_con .swiper-button-next{ right: 30px; font-size: 30px; }
    .banner_con .swiper-button-prev::after,.banner_con .swiper-button-next::after{ font-size: 30px; }
    .pictureCont>div .phone{ width: 100%; }
    .banner_con .banner{ width: 150%; margin-left: -25%; }
}
@keyframes move{
   0%{ transform: translateY(0); }
   50%{ transform: translateY(10px); }
   100%{ transform: translateY(0); }
}