/*banner*/ #banner{height: 100vh;overflow: hidden;position: relative;} #banner .swiper-slide{position: relative;overflow: hidden;} #banner .swiper-slide .container{height: 100%;} #banner .banimg{position: absolute; width: 100%;height: 100%;object-fit: cover;} #banner .content{z-index: 2;padding-bottom: 40px;overflow: hidden;} #banner .bannerText{width:98%;padding-top: 20.5vh;} #banner .swiper-pagination-banner{position: absolute!important;bottom: 35px!important;} /*banner1*/ #banner .bannerGuo{position: relative;margin-top: 2.5vh;width: 100%;} #banner .bannerGuo .desc{width: 98%;height: 100%;position: absolute;top: 0;left: 1%;} #banner .bannerGuo .Guo_smoke{position: relative;} #banner .bannerGuo .Guo{width: 45%;margin: auto;} /*yan*/ .smoke{position: absolute;width: 75%;top: -45%;left: 13%;pointer-events: none;} .smoke::before{width: 100%;height: 100%;position: absolute;left: 0%;top: 0%;content: '';background: url(../img/banner_yan_img.png) no-repeat;background-size: cover;opacity: 0;-webkit-transform: rotate(135deg);animation: smoke1 4s linear infinite 0.5s;} .smoke::after{width: 100%;height: 100%;position: absolute;left: 0%;top: 0%;content: '';background: url(../img/banner_yan_img.png) no-repeat;background-size: cover;opacity: 0;-webkit-transform: rotate(65deg);animation: smoke2 4s linear infinite 1.5s;} .smoke span{width: 100%;height: 100%;position: absolute;left: 0%;top: 0%;display: block;background: url(../img/banner_yan_img.png) no-repeat;background-size: cover;opacity: 0;animation: smoke3 4s linear infinite 2s;} .smoke img{opacity: 0;animation: smoke4 4s linear infinite;} @keyframes smoke1{ 0% {transform: scale(0.75);opacity: 0;} 50% {transform: scale(1);opacity: 1;} 100% {transform: scale(1.4);opacity: 0;} } @keyframes smoke2 { 0% {transform: scale(0.75) rotate(135deg);opacity: 0;} 50% {transform: scale(1) rotate(140deg);opacity: 1;} 100% {transform: scale(1.4) rotate(145deg);opacity: 0;} } @keyframes smoke3 { 0% {transform: scale(0.75) rotate(65deg);opacity: 0;} 50% {transform: scale(1) rotate(70deg);opacity: 1;} 100% {transform: scale(1.4) rotate(75deg);opacity: 0;} } @keyframes smoke4 { 0% {transform: scale(0.75) rotate(80deg);opacity: 0;} 50% {transform: scale(1) rotate(75deg);opacity: 1;} 100% {transform: scale(1.4) rotate(70deg);opacity: 0;} } #box-1{background: url(../img/index_box1_bj.jpg) no-repeat center center;background-size: cover;padding: 125px 0 12.5vw 0;} #box-1 .block01{max-width: 1790px;margin-left: auto;padding-left: 40px;} #box-1 .box1{width: 40%;} #box-1 .box1 .content{padding-right: 20px;} #box-1 .box1 .ftitle{font-size: 30px;font-weight: bold;color: #DC142D;} #box-1 .box1 .title{width: 90%;} #box-1 .box1 .desc{margin: 60px 0 80px 0;text-align: justify;} #box-1 .box1 .desc p{color: #333;font-size: 18px;line-height: 2.2;} #box-1 .box1 .tongji{padding-bottom: 10px;} #box-1 .box1 .tongji img{width: 20px;margin-right: 5px;} #box-1 .box1 .tongji span{color: #9d9d9d;font-size: 16px;} #box-1 .box1 .number .t1{font-size: 41px;font-weight: bold;color: #005EAC;} #box-1 .box1 .number .t1 b{font-size: 20px;} #box-1 .box1 .number .t2{font-size: 14px;color: #000;} #box-1 .box1 .btn{margin-top: 90px;} #box-1 .box1 .pub_Btn{transform-origin: left;} #box-1 .box2{width: 54%;} #box-1 .content_video{width:100%;position: relative;} #box-1 .box2 .video_img{overflow: hidden;} #box-1 .content_video .video_img img{height: 100%;} .video_btn{position: absolute;left: calc(50% - 10px);top:calc(50% - 48px);} .video_btn img{width: 96px;cursor: pointer;transition: all .5s;} .video_btn img:nth-child(2){left: 0;position: absolute;animation: rotate 2s infinite linear;} .fix_video {position: fixed;top: 0;left: 0;width: 100%;height: 100%;z-index: 9999;display: none;} .fix_video .fix_bg {background: rgba(0, 0, 0, .7);position: absolute;left: 0;top: 0;width: 100%;height: 100%;z-index: 99;} .fix_video .fix_text {display: -ms-flexbox;display: flex;-ms-flex-pack: justify;justify-content: space-between;-ms-flex-align: center;align-items: center;overflow: hidden;height: 100%;} .fix_video .fix_text .video {width: 100%;max-width: 55%;margin: 0 auto;position: relative;margin-top: 50px;} .fix_video .fix_text .video video {width: 100%;position: relative;z-index: 100;} .fix_video i img{width: 45px;height: 45px;position: absolute;z-index: 999;cursor: pointer;top: -60px;right: -60px;filter: invert(1);} #box-2{background: url(../img/index_box2_bj.png) no-repeat top center;background-size: cover;margin-top: -5vw;} #box-2 .block01{position: relative;} #box-2 .box1{margin-top: 65px;overflow: hidden;position: relative;padding-bottom: 30px;} #box-2 .box1 li{width: 57%;transition: 1s;} #box-2 .box1 li>div{position: relative;opacity: 0;} #box-2 .box1 li.swiper-slide-prev>div,#box-2 .box1 li.swiper-slide-active>div,#box-2 .box1 li.swiper-slide-next>div{opacity: 1;} #box-2 .box1 li .img01 img{border-radius: 30px;overflow: hidden;-webkit-transform: translate3d(0, 0, 0);} #box-2 .box1 li.swiper-slide-active img{filter: opacity(1);transition: 0.2s;} #box-2 .box1 li .img img{width: 100%;} #box-2 .box1 li .img02{position: absolute;width: 37%;left: -13%;bottom: -22%;z-index: 2;transform: scale(0);} #box-2 .box1 li.swiper-slide-active .img02{transform: scale(1);transition: 0.5s;} #box-2 .swiper-button-prev,#box-2 .swiper-button-next{top: 43%;} #box-2 .swiper-button-prev{left: 0.5%;} #box-2 .swiper-button-next{right: 0.5%;} #box-2 .swiper-pagination{padding-top: 30px;} #box-2 .btn{margin-top: 50px;} #box-2 .btn a{background-color: #fff;border: 2px solid #fff;pointer-events: visible;} #box-2 .pub_Btn ._circle::before,#box-2 .pub_Btn ._icon::after{background: #E72423;} #box-2 .pub_Btn ._icon::before{background: rgba(237, 109, 0, 0.2);} #box-2 .pub_Btn:hover ._icon::after{background: #fff;} #box-2 .btn *{color: #E72423;} #box-2 .pub_Btn:hover ._label {color: #fff;} #box-3{background: url(../img/index_box3_bj.jpg) no-repeat top center;margin-top: -1px;padding-top: 8.6vw;} #box-3 .box1{border: 1px dashed rgba(231, 36, 35, 0.5);border-radius: 10px;background: #e72423;overflow: hidden;-webkit-transform: translate3d(0, 0, 0);margin-top: 80px;} #box-3 .box1 ul{display: flex;flex-wrap: wrap;margin-right: -1px;margin-bottom: -1px;} #box-3 .box1 ul li{width: 25%;border-bottom: 1px dashed #fff;border-right: 1px dashed #fff;} #box-3 .box1 ul li>div{display: flex;align-items: center;padding: 70px 20px 70px 80px;} #box-3 .box1 ul li .img{width: 88px;margin-right: 18px;} #box-3 .box1 ul li .content{width: calc(100% - 106px);} #box-3 .box1 ul li .title{font-size: 26px;color: #fff;} #box-3 .box1 ul li .ftitle{font-size: 15px;color: #fff;} #box-4{background: url(../img/index_box4_bj.jpg) no-repeat center center;background-size: cover;padding-bottom: 90px;} #box-4 .block01{margin-top: 80px;display: flex;flex-wrap: wrap;padding-right: 5%;} #box-4 .block01 .left{width: 74%;} #box-4 .block01{position: relative;} #box-4 .block01 .right{width: 26%;position: relative;} #box-4 .block01 .right>div{overflow: hidden;} #box-4 .box1 ul{flex-wrap: wrap;} #box-4 .box1 li{position: relative;padding: 14px 0;} #box-4 .box1 li::before {content: '';position: absolute;width: 100%;height: 100%;left: 0px;top: 0;background: url(../img/index_box4_li01.png) no-repeat left center;background-size: 30px;transition: 0.5s;pointer-events: none;} #box-4 .box1 li::after {content: '';position: absolute;width: 100%;height: 100%;right: 0px;top: 0;background: url(../img/index_box4_li02.png) no-repeat right center;background-size: 30px;transition: 0.5s;pointer-events: none;} #box-4 .box1 li>div{padding:0 35px;text-align: center;color: #E72423;font-size: 20px;} #box-4 .box1 li .desc{font-weight: bold;} #box-4 .right .next{left: calc(50% - 13px);bottom: -10%;top: auto;background: url(../img/index_box4_jt01.png) no-repeat center center;background-size: contain;width: 26px;} #box-4 .right .prev{left: calc(50% - 13px);top: -8%;background: url(../img/index_box4_jt01.png) no-repeat center center;background-size: contain;width: 26px;opacity: 0.5;transform: rotate(180deg);} #box-5{background: url(../img/index_box5_bj.jpg) no-repeat center center;background-size: cover;} #box-5 .box1{margin: 0 -25%;padding-top: 20px;} #box-5 .swiper-slide-shadow-left,#box-5 .swiper-slide-shadow-right{display: none;} #box-5 li .img{border-radius: 25px;overflow: hidden;} #box-6{background: url(../img/index_box6_bj.jpg) no-repeat center center;background-size: cover;} #box-6 .title{margin-top: 60px;} #box-6 .title span{font-size: 72px;color: #E72423;font-weight: bold;margin-right: 35px;} #box-6 .title img{width: 77px;margin-right: 8px;} #box-6 .title b{font-size: 24px;color: #E72423;line-height: 1.3;} #box-6 .box1{width: 88%;margin:0 auto;} #box-6 .box1 ul{display: flex;} /* #box-6 .box1 ul li{min-width: 12.2vw;} #box-6 .box1 ul li>div{padding: 45px 0 35px 0;} */ #box-6 .box1 ul li{padding: 65px 0 55px 0;} #box-6 .box1 ul li>div{width: 7vw!important;height: 7vw!important;display: flex;align-items: center;justify-content: center;background: #fff;transform: rotate(45deg);margin:0 2.6vw;border: 1px solid #E72423;border-radius: 25px;transition: 0.5s;} #box-6 .box1 ul li>div:hover{transform: rotate(45deg) scale(1.1);} #box-6 .box1 ul li>div img{transform: rotate(-45deg);} #box-6 .desc{font-size: 20px;color: #333;text-align: center;} #box-6 .btn{margin-top: 70px;} #box-7 {position: relative;padding: 0;} #box-7>div{padding: 120px 0;} #box-7 .box1{margin: 60px -65px 120px -65px;} #box-7 .side-scroll-list-wrapper {position: relative; width: 100%;height: 21vw;} #box-7 .side-scroll-list {position: absolute;top: 40px;left: 0;display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex;} #box-7 .side-scroll-item {width: 31vw;position: relative;padding: 0px 65px;} #box-7 .side-scroll-item:not(:first-child){border-left: 2px dashed #C3C2BF;} #box-7 .side-scroll-item:last-child{border: none;} #box-7 .box1 li:not(.box7_btn) .img{position: relative;padding-top: 70%;} #box-7 .box1 li:not(.box7_btn) .img img{position: absolute;width: 100%;height: 100%;top: 0;} #box-7 .box1 li .time{font-size: 14px;color: #005FA5;} #box-7 .box1 li .title{font-size: 26px;color: #000;margin: 15px 0;} #box-7 .box1 li .desc p{font-size: 16px;color: #494949;} #box-7 .box1 li .img{margin-top: 25px;} #box-7 .box1 .box7_btn{height: auto;padding: 20px 0;width:13vw;} #box-7 .box1 .box7_btn a{width: 10vw;height: 10vw;border: 1px solid #E72423;border-radius: 50%;position: relative;text-align: center;transition: 0.5s;} #box-7 .box1 .box7_btn a:hover{background: #E72423;} #box-7 .box1 .box7_btn a::after{content: '';width: 100%;height: 100%;background: url(../img/index_box7_quan.png) no-repeat center center;background-size: contain;position: absolute;left: 0;z-index: 5;animation: quan 7.5s infinite linear;pointer-events: none;} @keyframes quan{0% {transform: rotate(0) scale(1.2);}100% {transform: rotate(360deg) scale(1.2);}} #box-7 .box1 .box7_btn .title{font-size: 16px;color: #E72423;margin: 0;padding-bottom: 5px;} #box-7 .box1 .box7_btn .img{width: 65px;margin: 0;} #box-7 .box1 .box7_btn a:hover .title{color: #fff;} #box-7 .box1 .box7_btn a:hover img{content: url(../img/index_box7_jt2.png);} @media (min-width: 767px){ #box-5 li{flex-shrink: 0!important;position: relative!important;transition-property: transform!important;box-sizing: border-box!important;} #box-5 li.swiper-slide-active{transform: translate3d(0px, 0px, -2vw) rotateX(0deg) rotateY(58deg) scale(1.1)!important;opacity: 1;} #box-5 li.swiper-slide-active+li{transform:translate3d(1vw, 0px, -115.9485px) rotateX(0deg) rotateY(8.9743deg) scale(0.89)!important;opacity: 1;} #box-5 li.swiper-slide-next+li{transform:translate3d(-1vw, 0px, -115.9485px) rotateX(0deg) rotateY(-8.9743deg) scale(0.89)!important;opacity: 1;} #box-5 li.swiper-slide-next+li+li{transform:translate3d(0px, 0px, -2vw) rotateX(0deg) rotateY(-58deg) scale(1.1)!important;opacity: 1;} } @media (min-width: 1800px){#box-1 .block01{width: 95%;}} @media (min-width: 1700px) and (max-width: 1800px){#box-1 .block01{width: 98%;}} @media (min-width: 1199px) and (max-width: 1500px){ #banner .bannerText {padding-top: 25vh;} #box-1 .box1 {width: 44%;} #box-1 .box2 {width: 50%;} #box-1 .box1 .desc {margin: 40px 0 50px 0;} #box-1 .box1 .number .t1 {font-size: 38px;} #box-1 .box1 .number .t1 b {font-size: 18px;} #box-3 .box1 ul li .img{width: 78px;margin-right: 15px;} #box-3 .box1 ul li>div{padding: 55px 10px 55px 45px;} #box-4 .block01 .left{width: 73%;} #box-4 .block01 .right{width: 27%;} #box-4 .block01{padding-right: 20px;} #box-5 .box1{padding-top: 25px;} #box-5 li.swiper-slide-active{transform: translate3d(0px, 0px, -10vw) rotateX(0deg) rotateY(58deg) scale(1.1)!important;} #box-5 li.swiper-slide-next+li+li{transform:translate3d(0px, 0px, -10vw) rotateX(0deg) rotateY(-58deg) scale(1.1)!important;} #box-6 .box1 ul li>div{width: 8.5vw!important;height: 8.5vw!important;margin:0 3vw;border-radius: 20px;} } @media (min-width: 767px) and (max-width: 1199px){ #banner{max-height: 780px;} #banner .bannerText {padding-top: 120px;} #banner .bannerGuo {margin-top: 50px;} #banner .swiper-pagination-banner{bottom: 30px!important;} #box-1{padding: 90px 0 12.5vw 0;} #box-1 .box1 {width: 44%;} #box-1 .box1 .ftitle{font-size: 24px;} #box-1 .box1 .desc {margin: 45px 0 55px 0;} #box-1 .box1 .desc p{font-size: 15px;} #box-1 .box1 .number .t1 {font-size: 28px;} #box-1 .box1 .number .t1 b{font-size: 15px;} #box-1 .box1 .btn {margin-top: 60px;} #box-1 .box2 {width: 50%;} #box-1 .fix_video .fix_text .video {max-width: 77%;margin-top: 5px;} .video_btn {left: calc(50% - 10px);top: calc(50% - 30px);} .video_btn img {width: 65px;} #box-2 .box1{margin-top: 50px;} #box-2 .box1 li{width: 59%;} #box-2 .box1 li .img01 img {border-radius: 20px;} #box-2 .swiper-button-prev, #box-2 .swiper-button-next {top: 40%;} #box-2 .swiper-button-prev{left: -1%;} #box-2 .swiper-button-next{right: -1%;} #box-2 .swiper-pagination {padding-top: 10px;} #box-2 .btn {margin-top: 25px;} #box-3{padding-top: 100px;} #box-3 .box1{margin-top: 60px;} #box-3 .box1 ul li .img{width: 55px;margin-right: 10px;} #box-3 .box1 ul li .content{width: calc(100% - 65px);} #box-3 .box1 ul li>div{padding: 40px 10px 40px 20px;} #box-3 .box1 ul li .title{font-size: 18px;} #box-3 .box1 ul li .ftitle{font-size: 14px;} #box-4{padding-bottom: 60px;} #box-4 .block01{padding-right: 20px;} #box-4 .box1 li>div{font-size: 16px;} #box-4 .box1 li{padding: 10px 0;} #box-4 .box1 li::before,#box-4 .box1 li::after{background-size: 23px;} #box-4 .right .prev,#box-4 .right .next{width: 22px;left: calc(50% - 13px);} #box-5 li.swiper-slide-active{transform: translate3d(0px, 0px, -14vw) rotateX(0deg) rotateY(55deg) scale(1.1)!important;opacity: 1;} #box-5 li.swiper-slide-active+li{transform:translate3d(0.5vw, 0px, -115.9485px) rotateX(0deg) rotateY(8.9743deg) scale(0.92)!important;opacity: 1;} #box-5 li.swiper-slide-next+li{transform:translate3d(-0.5vw, 0px, -115.9485px) rotateX(0deg) rotateY(-8.9743deg) scale(0.92)!important;opacity: 1;} #box-5 li.swiper-slide-next+li+li{transform:translate3d(0px, 0px, -14vw) rotateX(0deg) rotateY(-55deg) scale(1.1)!important;opacity: 1;} #box-5 li .img{border-radius: 20px;} #box-6 .title {margin-top: 50px;} #box-6 .title span {font-size: 56px;margin-right: 30px;} #box-6 .title img {width: 56px;} #box-6 .title b {font-size: 18px;} #box-6 .box1 ul li{padding: 50px 0 45px 0;} #box-6 .box1 ul li>div{width: 9.3vw!important;height: 9.3vw!important;margin:0 3.3vw;border-radius: 15px;} #box-6 .desc{font-size: 16px;} #box-6 .btn {margin-top: 60px;} #box-7>div {padding: 100px 0;} #box-7 .box1 {margin-top: 50px;} #box-7 .side-scroll-list-wrapper {height: 24vw;max-height: 250px;} #box-7 .side-scroll-item{width: 38vw;padding: 0px 45px;} #box-7 .box1 li .title {font-size: 22px;} #box-7 .box1 li .desc p {font-size: 15px;} #box-7 .box1 .box7_btn{width: 18vw;} #box-7 .box1 .box7_btn a{width: 12vw;height: 12vw;} } @media (min-width: 767px) and (max-width: 850px){ #box-5 .box1{margin: 0 -30%;padding-top: 30px;} #box-5 li.swiper-slide-active+li{transform:translate3d(0.15vw, 0px, -115.9485px) rotateX(0deg) rotateY(15.9743deg) scale(0.94)!important;opacity: 1;} #box-5 li.swiper-slide-next+li{transform:translate3d(-0.15vw, 0px, -115.9485px) rotateX(0deg) rotateY(-15.9743deg) scale(0.94)!important;opacity: 1;} } @media (max-width: 850px){ #banner {height: 400px;} #banner .content{padding-bottom: 15px;} #banner .bannerText {padding-top: 75px;} #banner .bannerGuo .desc{width: 100%;top: 0;left: 0%;z-index: 5;} #banner .bannerGuo .Guo {width: 76%;} .smoke {top: -22%;left: 11%;width: 82%;} #box-1{padding: 90px 0 14.5vw 0;} #box-1 .block01{padding:0 40px;} #box-1 .box1{width: 100%;} #box-1 .box1 .title {width: 70%;} #box-1 .box1 .content{padding-right: 0;} #box-1 .box1 .number .t1 {font-size: 36px;} #box-1 .box2{width: 100%;margin-top: 65px;} #box-1 .SJBlock{display: block!important;} #box-1 .PCBlock{display: none!important;} #box-1 .box2 .video_img{border-radius: 15px;} #box-2 .box1{margin: 55px -15px 0 -15px;} #box-2 .box1 li{width: 100%;transition: 0.2s;} #box-2 .box1 li>div{padding:0 15px;} #box-2 .box1 li .img02{display: none;} #box-2 .swiper-button-next, #box-2 .swiper-button-prev{display: none;} #box-3 .box1 ul li{width: 33.3%;} #box-4{background: url(../img/index_box4_bj_ipad.jpg) no-repeat bottom center;background-size: cover;} #box-4 .block01{flex-direction: column-reverse;padding-right: 0;padding-bottom: 56vw;} #box-4 .block01 .left{width: 100%;margin-top: 80px;} #box-4 .block01 .right{width: 60%;margin: auto;} #box-4 .box1 li>div {font-size: 17px;} #box-4 .right .prev{top: -13%;} #box-4 .right .next{bottom: -19%;} #box-4 .box1 li::before, #box-4 .box1 li::after {background-size: 20px;} #box-6 .box1 ul li{padding: 50px 0 45px 0;} #box-6 .box1 ul li>div{width: 10.5vw!important;height: 10.5vw!important;margin:0 3.5vw;} #box-7 .side-scroll-list-wrapper {height: auto;max-height: 100%;margin:0;} #box-7 .side-scroll-list {position: relative;flex-wrap: wrap;} #box-7 .side-scroll-item {width: 50%!important;margin-top: 50px;} #box-7 .side-scroll-item:nth-child(3){border: none;} #box-7 .side-scroll-item:last-child {border-left: 2px dashed #C3C2BF;} #box-7 .box1 .box7_btn a{width: 18vw;height: 18vw;} } @media (max-width: 767px){ #banner .swiper-pagination{bottom: 25px;} #banner .swiper-pagination-banner{bottom: 20px!important;} #box-1{padding: 60px 0 80px 0;} #box-1 .block01{padding:0 20px;width: 100%;} #box-1 .box1 .ftitle{font-size: 20px;padding-bottom: 5px;} #box-1 .box1 .title {width: 85%;} #box-1 .box1 .desc {margin: 40px 0 30px 0;} #box-1 .box1 .desc p{font-size: 15px;line-height: 1.8;} #box-1 .box1 .tongji {padding-bottom: 5px;} #box-1 .box1 .tongji img {width: 17px;} #box-1 .box1 .tongji span{font-size: 15px;} #box-1 .box1 .number li{width: 50%;padding: 15px 5px;} #box-1 .box1 .number li:nth-child(4){margin-left:-5%;width:55%;} #box-1 .box1 .btn {margin-top: 45px;} #box-1 .box2{margin-top: 55px;} #box-1 .content_video{width: 100%;} #box-1 .content_video .video_img{height: 230px;} .video_btn {left: calc(50% - 28px);top: calc(50% - 28px);} .video_btn img {width: 56px;} .fix_video .fix_text .video {max-width: 88%;margin-top: -80px;} .fix_video i img{top: auto;bottom: -80px;left: calc(50% - 22px);} #box-2{margin-top: -20px;} #box-2 .box1 {margin: 40px -15px 0 -15px;padding-bottom: 0;} #box-2 .box1 li .img01{padding-bottom: 0px;} #box-2 .box1 li .img01 img{border-radius: 10px;} #box-2 .swiper-pagination {padding-top: 0px;} #box-2 .btn {margin-top: 40px;} #box-3{padding-top: 80px;padding-bottom: 40px;} #box-3 .box1{margin-top: 45px;text-align: center;} #box-3 .box1 ul li{width: 50%;} #box-3 .box1 ul li .img{width: 45px;margin: auto;} #box-3 .box1 ul li .content{width: 100%;margin-top: 3px;} #box-3 .box1 ul li>div{padding: 20px 10px 20px 10px;flex-wrap: wrap;} #box-3 .box1 ul li .title{font-size: 18px;} #box-3 .box1 ul li .ftitle{font-size: 13px;} #box-4{background: url(../img/index_box4_bj_sj.jpg) no-repeat bottom center;background-size: cover;padding-top: 40px;} #box-4 .block01 {margin-top: 45px;padding-bottom: 48vw;} #box-4 .block01 .left{width: 100%;margin-top: 50px;} #box-4 .block01 .right{width: 80%;} #box-4 .box1 li>div {font-size: 15px;} #box-4 .right .prev,#box-4 .right .next{width: 22px;left: calc(50% - 11px);display: none;} #box-4 .box1 li {padding: 10px 0;} #box-4 .box1 li:nth-child(1){padding-top: 0;} #box-4 .box1 li:last-child{padding-bottom:0;} #box-4 .block01 .right>div{overflow-y: auto;padding-left:0px;padding-right: 25px;height: 180px;margin-right: -15px;} #box-4 .block01 .right>div::-webkit-scrollbar {width : 4px; height: 1px;} #box-4 .block01 .right>div::-webkit-scrollbar-thumb,#box-4 .block01 .right>div::-webkit-scrollbar-thumb:active {background: rgba(231, 36, 35, 0.3)!important;border-radius: 0px!important;} #box-4 .block01 .right>div::-webkit-scrollbar-track {background: rgba(231, 36, 35, 0.15)!important;border-radius: 0px!important;} #box-5 .box1 {margin: 0 5px;position: relative;overflow: hidden;padding-top: 40px;} #box-5 .box1 li>div{padding:0 15px;} #box-5 li .img {border-radius: 15px;} #box-6 .title{margin-top: 30px;} #box-6 .title span {font-size: 38px;width: 100%;display: block;text-align: center;margin-right: 0px;margin-bottom: 5px;} #box-6 .title img {width: 48px;} #box-6 .title b {font-size: 16px;} #box-6 .box1 ul li{padding: 45px 0 40px 0;} #box-6 .box1 ul li>div{width: 16.5vw!important;height: 16.5vw!important;margin:0 5.5vw;border-radius: 10px;} #box-6 .desc{font-size: 15px;} #box-6 .btn {margin-top: 55px;} #box-7>div {padding: 60px 0 40px 0;} #box-7 .side-scroll-list{top: 0;} #box-7 .side-scroll-item{border: none!important;width: 100%!important;padding: 0px 0px;margin-top: 45px;} #box-7 .box1 li .img{margin-top: 0;} #box-7 .box1 li .time{margin-top: 30px;} #box-7 .box1 li .title {font-size: 20px;margin: 10px 0;} #box-7 .box1 li .desc p {font-size: 15px;} #box-7 .box1 .box7_btn a{width: 34vw;height: 34vw;} } /*新增样式*/ /* ========== 公司简介区域 - 新增排版样式 ========== */ /* 覆盖原有box-1的padding */ #box-1 { padding-bottom: 0 !important; /* 移除底部内边距 */ } /* 左右对称布局容器 */ .about-grid { display: flex; flex-wrap: wrap; gap: 60px; margin-bottom: 0; /* 移除底部间距，让统计面板紧贴 */ } /* 左侧内容区域 */ .about-content { flex: 1; min-width: 280px; } /* 右侧视频区域 */ .about-video { flex: 1; min-width: 280px; } /* 品牌标识（英文） */ .about-brand { font-size: 18px; color: #E72423; letter-spacing: 4px; margin-bottom: 15px; position: relative; display: inline-block; } .about-brand::after { content: ''; position: absolute; bottom: -5px; left: 0; width: 40px; height: 2px; background: #E72423; } /* Logo区域 */ .about-logo { margin: 25px 0 30px 0; } .about-logo img { max-height: 70px; width: auto; } /* 描述文字 */ .about-description { margin-bottom: 35px; } .about-description p { font-size: 16px; line-height: 1.9; color: #555; text-align: justify; } /* 特色标签 */ .about-features { display: flex; flex-wrap: wrap; gap: 20px; margin-bottom: 40px; } .about-features .feature-item { display: flex; align-items: center; gap: 10px; background: #f8f8f8; padding: 8px 20px; border-radius: 40px; transition: all 0.3s ease; } .about-features .feature-item:hover { background: #E72423; transform: translateY(-3px); } .about-features .feature-item:hover .feature-text { color: #fff; } .about-features .feature-icon { width: 24px; height: 24px; } .about-features .feature-icon img { width: 100%; height: 100%; object-fit: contain; } .about-features .feature-text { font-size: 14px; color: #333; transition: color 0.3s ease; } /* 视频区域样式 */ .about-video { position: relative; } .about-video .video-wrapper { position: relative; border-radius: 20px; overflow: hidden; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15); transition: transform 0.4s ease; } .about-video .video-wrapper:hover { transform: translateY(-8px); } .about-video .video-cover { position: relative; width: 100%; padding-top: 56.25%; /* 16:9 比例 */ overflow: hidden; } .about-video .video-cover img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .about-video .video-wrapper:hover .video-cover img { transform: scale(1.05); } .about-video .play-btn { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80px; height: 80px; cursor: pointer; z-index: 10; transition: all 0.3s ease; } .about-video .play-btn img { width: 100%; height: 100%; transition: transform 0.3s ease; } .about-video .play-btn:hover img { transform: scale(1.1); } .about-video .play-btn .pulse-ring { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100px; height: 100px; background: rgba(231, 36, 35, 0.4); border-radius: 50%; animation: pulse 2s infinite; z-index: -1; } @keyframes pulse { 0% { transform: translate(-50%, -50%) scale(0.8); opacity: 0.8; } 100% { transform: translate(-50%, -50%) scale(1.4); opacity: 0; } } /* 统计数据区域 - 全屏宽度卡片式设计，紧贴介绍部分 */ .about-stats-full { width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; background: linear-gradient(135deg, #fff 0%, #fafafa 100%); padding: 35px 0; margin-top: 0; /* 完全移除上边距 */ margin-bottom: 0; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05); border-top: 1px solid rgba(231, 36, 35, 0.1); border-bottom: 1px solid rgba(231, 36, 35, 0.1); } .about-stats-full .stats-container { max-width: 1660px; margin: 0 auto; padding: 0 40px; } .about-stats-header { display: flex; justify-content: flex-end; align-items: center; gap: 8px; margin-bottom: 20px; padding-bottom: 10px; border-bottom: 1px dashed #eee; } .about-stats-header img { width: 22px; } .about-stats-header span { font-size: 14px; color: #999; } .stats-grid { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 30px; } .stats-item { flex: 1; min-width: 180px; text-align: center; padding: 18px 20px; background: #fff; border-radius: 20px; transition: all 0.3s ease; border: 1px solid #f0f0f0; position: relative; overflow: hidden; } .stats-item::before { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 3px; background: #E72423; transform: scaleX(0); transition: transform 0.3s ease; } .stats-item:hover { transform: translateY(-5px); box-shadow: 0 15px 30px rgba(231, 36, 35, 0.15); border-color: #E72423; } .stats-item:hover::before { transform: scaleX(1); } .stats-number { font-size: 48px; font-weight: bold; color: #005EAC; line-height: 1.2; margin-bottom: 5px; } .stats-number b { font-size: 22px; font-weight: normal; color: #E72423; margin-left: 5px; } .stats-label { font-size: 15px; color: #666; margin-top: 3px; } /* 响应式适配 */ @media (min-width: 767px) and (max-width: 1199px) { .about-grid { gap: 40px; } .about-description p { font-size: 15px; } .about-stats-full { padding: 30px 0; } .stats-number { font-size: 38px; } .stats-number b { font-size: 18px; } .stats-label { font-size: 13px; } .stats-item { min-width: 150px; padding: 15px 15px; } .about-video .play-btn { width: 65px; height: 65px; } } @media (max-width: 767px) { .about-grid { flex-direction: column; gap: 35px; } .about-brand { font-size: 16px; } .about-logo img { max-height: 50px; } .about-description p { font-size: 14px; line-height: 1.7; } .about-features { gap: 12px; } .about-features .feature-item { padding: 5px 15px; } .about-features .feature-text { font-size: 12px; } .about-stats-full { padding: 25px 0; } .about-stats-full .stats-container { padding: 0 20px; } .about-stats-header { margin-bottom: 15px; } .stats-grid { gap: 12px; } .stats-item { flex: 0 0 calc(50% - 12px); min-width: auto; padding: 12px 10px; } .stats-number { font-size: 28px; margin-bottom: 3px; } .stats-number b { font-size: 16px; } .stats-label { font-size: 11px; margin-top: 2px; } .about-video .play-btn { width: 55px; height: 55px; } } @media (min-width: 1200px) and (max-width: 1500px) { .stats-number { font-size: 44px; } .stats-item { min-width: 160px; } } /* ========== 品牌优势区域 - 全新排版样式 ========== */ /* 覆盖原有样式 */ #box-3 { background: linear-gradient(135deg, #fff 0%, #f8f9fa 100%); padding: 100px 0; position: relative; overflow: hidden; } #box-3::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, #E72423, #005EAC, #E72423); } /* 优势网格布局 */ .advantages-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; margin-top: 60px; } /* 优势卡片 */ .advantage-card { background: #fff; border-radius: 24px; padding: 40px 25px 35px; text-align: center; transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1); position: relative; overflow: hidden; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05); border: 1px solid rgba(231, 36, 35, 0.1); } .advantage-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 0; background: linear-gradient(135deg, #E72423, #ff6b6b); transition: height 0.4s ease; z-index: 0; } .advantage-card:hover::before { height: 100%; } .advantage-card:hover { transform: translateY(-12px); box-shadow: 0 25px 50px rgba(231, 36, 35, 0.2); border-color: #E72423; } /* 图标区域 */ .advantage-icon { position: relative; z-index: 1; width: 100px; height: 100px; margin: 0 auto 25px; background: #fff5f5; border-radius: 30px; display: flex; align-items: center; justify-content: center; transition: all 0.4s ease; border: 1px solid rgba(231, 36, 35, 0.2); } .advantage-card:hover .advantage-icon { background: #fff; transform: rotateY(360deg); border-color: #fff; } .advantage-icon img { width: 55px; height: 55px; object-fit: contain; transition: transform 0.3s ease; } .advantage-card:hover .advantage-icon img { transform: scale(1.1); } /* 标题区域 */ .advantage-title { position: relative; z-index: 1; font-size: 24px; font-weight: bold; color: #E72423; margin-bottom: 15px; transition: color 0.3s ease; } .advantage-card:hover .advantage-title { color: #fff; } /* 描述区域 */ .advantage-desc { position: relative; z-index: 1; font-size: 14px; color: #666; line-height: 1.6; transition: color 0.3s ease; } .advantage-card:hover .advantage-desc { color: rgba(255, 255, 255, 0.9); } /* 序号标识 */ .advantage-number { position: absolute; bottom: 15px; right: 20px; font-size: 48px; font-weight: bold; color: rgba(231, 36, 35, 0.08); z-index: 0; transition: all 0.3s ease; } .advantage-card:hover .advantage-number { color: rgba(255, 255, 255, 0.15); transform: scale(1.1); } /* 响应式适配 */ @media (min-width: 1200px) and (max-width: 1500px) { .advantages-grid { gap: 25px; } .advantage-card { padding: 35px 20px 30px; } .advantage-icon { width: 85px; height: 85px; } .advantage-icon img { width: 45px; height: 45px; } .advantage-title { font-size: 22px; } } @media (min-width: 767px) and (max-width: 1199px) { .advantages-grid { grid-template-columns: repeat(2, 1fr); gap: 25px; } .advantage-card { padding: 30px 20px 25px; } .advantage-icon { width: 80px; height: 80px; } .advantage-icon img { width: 42px; height: 42px; } .advantage-title { font-size: 20px; } #box-3 { padding: 80px 0; } } @media (max-width: 767px) { .advantages-grid { grid-template-columns: 1fr; gap: 20px; margin-top: 40px; } .advantage-card { padding: 25px 20px; display: flex; align-items: center; text-align: left; gap: 20px; } .advantage-icon { width: 70px; height: 70px; margin: 0; flex-shrink: 0; } .advantage-icon img { width: 38px; height: 38px; } .advantage-content { flex: 1; } .advantage-title { font-size: 18px; margin-bottom: 8px; } .advantage-desc { font-size: 13px; } .advantage-number { display: none; } #box-3 { padding: 60px 0; } } /* ========== 品牌优势区域 - 全新排版样式 ========== */ /* 覆盖原有样式 */ #box-3 { background: linear-gradient(135deg, #fff 0%, #f8f9fa 100%); padding: 100px 0; position: relative; overflow: hidden; } #box-3::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, #E72423, #005EAC, #E72423); } /* 优势网格布局 */ .advantages-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; margin-top: 60px; } /* 优势卡片 */ .advantage-card { background: #fff; border-radius: 24px; padding: 40px 25px 35px; text-align: center; transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1); position: relative; overflow: hidden; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05); border: 1px solid rgba(231, 36, 35, 0.1); } .advantage-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 0; background: linear-gradient(135deg, #E72423, #ff6b6b); transition: height 0.4s ease; z-index: 0; } .advantage-card:hover::before { height: 100%; } .advantage-card:hover { transform: translateY(-12px); box-shadow: 0 25px 50px rgba(231, 36, 35, 0.2); border-color: #E72423; } /* 图标区域 */ .advantage-icon { position: relative; z-index: 1; width: 100px; height: 100px; margin: 0 auto 25px; background: #fff5f5; border-radius: 30px; display: flex; align-items: center; justify-content: center; transition: all 0.4s ease; border: 1px solid rgba(231, 36, 35, 0.2); } .advantage-card:hover .advantage-icon { background: #fff; transform: rotateY(360deg); border-color: #fff; } .advantage-icon img { width: 55px; height: 55px; object-fit: contain; transition: transform 0.3s ease; } .advantage-card:hover .advantage-icon img { transform: scale(1.1); } /* 标题区域 */ .advantage-title { position: relative; z-index: 1; font-size: 24px; font-weight: bold; color: #E72423; margin-bottom: 15px; transition: color 0.3s ease; } .advantage-card:hover .advantage-title { color: #fff; } /* 描述区域 */ .advantage-desc { position: relative; z-index: 1; font-size: 14px; color: #666; line-height: 1.6; transition: color 0.3s ease; } .advantage-card:hover .advantage-desc { color: rgba(255, 255, 255, 0.9); } /* 序号标识 */ .advantage-number { position: absolute; bottom: 15px; right: 20px; font-size: 48px; font-weight: bold; color: rgba(231, 36, 35, 0.08); z-index: 0; transition: all 0.3s ease; } .advantage-card:hover .advantage-number { color: rgba(255, 255, 255, 0.15); transform: scale(1.1); } /* 响应式适配 */ @media (min-width: 1200px) and (max-width: 1500px) { .advantages-grid { gap: 25px; } .advantage-card { padding: 35px 20px 30px; } .advantage-icon { width: 85px; height: 85px; } .advantage-icon img { width: 45px; height: 45px; } .advantage-title { font-size: 22px; } } @media (min-width: 767px) and (max-width: 1199px) { .advantages-grid { grid-template-columns: repeat(2, 1fr); gap: 25px; } .advantage-card { padding: 30px 20px 25px; } .advantage-icon { width: 80px; height: 80px; } .advantage-icon img { width: 42px; height: 42px; } .advantage-title { font-size: 20px; } #box-3 { padding: 80px 0; } } @media (max-width: 767px) { .advantages-grid { grid-template-columns: 1fr; gap: 20px; margin-top: 40px; } .advantage-card { padding: 25px 20px; display: flex; align-items: center; text-align: left; gap: 20px; } .advantage-icon { width: 70px; height: 70px; margin: 0; flex-shrink: 0; } .advantage-icon img { width: 38px; height: 38px; } .advantage-content { flex: 1; } .advantage-title { font-size: 18px; margin-bottom: 8px; } .advantage-desc { font-size: 13px; } .advantage-number { display: none; } #box-3 { padding: 60px 0; } }