section {padding: 200px 0; position: relative; overflow: hidden; } section .title {display: flex; flex-direction: column; justify-content: center; } section .title h1 {color: #000; font-size: 48px; line-height: 1; text-transform: uppercase; margin-bottom: 30px; } section .title span {width: 70px; height: 2px; background: var(--color); } section .title .desc {color: #5C5C5C; font-size: 16px; font-weight: 400; line-height: 2; width: 300px; margin-top: 30px; margin-bottom: 75px; } section .title .More {color: #000; font-size: 16px; font-weight: 400; line-height: 1; text-transform: uppercase; } @media (max-width: 1440px) {section {padding: 150px 0; } } @media (max-width: 1200px) {section {padding: 120px 0; } section .title h1 {font-size: 32px; margin-bottom: 15px; } section .title .desc {width: 240px; margin-top: 16px; margin-bottom: 30px; } } @media (max-width: 640px) {section {padding: 60px 0; } section .title {display: flex; flex-direction: column; align-items: center; width: 100%; } section .title .desc {width: 100%; text-align: center; line-height: 1.5; } } /* banner */ .bannerbigbox {width: 100%; overflow: hidden; position: relative; } .bannerSwiper {width: 100%; overflow: hidden; position: relative; } .bannerSlide {overflow: hidden; } .bannerSlide>img {position: relative; z-index: 1; width: 100%; object-fit: cover; } .section2 {background-size: cover !important; } .box2 {display: flex; justify-content: space-between; } .box2Box {max-width: 1080px; width: calc(100% - 360px); } .box2Swiper {width: calc(100% + 280px); padding-right: 280px; } .box2Slide {background: #fff; position: relative; } .box2Slide .item {padding-top: 120px; padding-bottom: 45px; position: relative; } .box2Slide a {display: block; position: relative; } .box2Slide .cpbj {transition: 0.5s; position: absolute; top: 0; left: 0; z-index: 1; opacity: 0; width: 100%; height: 100%; object-fit: cover; } .box2Slide img {position: relative; width: 100%; } .box2Slide .text {position: relative; z-index: 2; padding-top: 30px; margin: 0 30px; overflow: hidden; display: flex; flex-direction: column; } .box2Slide .text h1 {color: #000; font-size: 20px; line-height: 1; margin-bottom: 15px; text-align: center; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; } .box2Slide .text p {color: #666666; font-size: 16px; line-height: 1; position: relative; background: #fff; text-align: center; width: auto; padding: 0 15px; margin: 0 auto; } .box2Slide .text p::after {content: ""; display: block; width: 300%; height: 1px; background: #666666; position: absolute; z-index: -1; left: -100%; top: 50%; } .box2Slide:hover .cpbj {z-index: 3; opacity: 1; } @media (max-width: 1600px) {} @media (max-width: 1440px) {.box2Slide .item {padding-top: 45px; padding-bottom: 45px; } .box2Slide .text {margin: 0 15px; } } @media (max-width: 1200px) {} @media (max-width: 992px) {.box2Box {width: calc(100% - 300px); } .box2Swiper {width: 100%; padding-right: 0; } .box2Slide .text p {font-size: 12px; padding: 0px 5px; } .box2Slide .item {padding-top: 30px; padding-bottom: 30px; } .box2Slide .text {padding-top: 15px; } } @media (max-width: 640px) {.box2 {display: flex; flex-wrap: wrap; } .box2Box {margin-top: 30px; width: 100%; } } .section3 {position: relative; padding: 0; } .box3 {display: flex; position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 2; } .section3 .bj {position: relative; width: 100%; } .box3 .item {position: relative; overflow: hidden; transition: 1s; flex: 1; } .box3 .item.cur {flex: 0 1 50%; transition: 1s; } .box3 .item img {width: 100%; height: 100%; object-fit: cover; position: relative; opacity: 0; transition: 1s; } .box3 .item.cur img {opacity: 1; transition: 1s; } .box3 .item a {position: absolute; z-index: 2; top: calc(50% - 50px); color: #000; font-size: 28px; line-height: 1.5; text-transform: capitalize; margin: 0 30px; transition: 1s; display: block; } .box3 .item a span {margin-top: 15px; display: block; width: 100%; height: 1px; background: #A1A1A1; transition: 1s; } .box3 .item.cur a {font-size: 38px; top: 75px; color: #fff; transition: 1s; } .box3 .item.cur a span {width: 300px; background: var(--color); transition: 1s; } @media (max-width: 1600px) {} @media (max-width: 1440px) {.box3 .item a {font-size: 24px; margin: 0 15px; } } @media (max-width: 1200px) {.box3 .item.cur a {font-size: 32px; } } @media (max-width: 992px) {.box3 .item a {font-size: 18px; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .box3 .item.cur a {font-size: 24px; } } @media (max-width: 640px) {.box3 {display: flex; flex-direction: column; } .section3 .bj {position: relative; width: 100%; height: 100vh; } } .section4 {padding: 0; } .box4 {overflow: hidden; display: flex; flex-wrap: wrap; } .box4text {width: 50%; padding-left: var(--paddingLeft); position: relative; } .box4text .title {margin-top: 200px; position: relative; z-index: 2; } .box4text .title .desc {max-width: 600px; width: 90%; } .box4text .number {background-size: 100% 100% !important; position: absolute; z-index: 1; width: 100%; height: 100%; left: 0; top: 0; } .box4text .number .item {position: absolute; display: flex; flex-direction: column; align-items: flex-start; } .box4text .number .item:nth-child(1) {bottom: 32%; left: 28%; } .box4text .number .item:nth-child(2) {bottom: 17%; left: 31%; } .box4text .number .item:nth-child(3) {bottom: 24%; left: 62%; } .box4text .number .item h1 {color: var(--color); font-size: 26px; font-weight: 700; line-height: 1; } .box4text .number .item sup {color: var(--color); font-size: 26px; font-weight: 700; line-height: 1; } .box4text .number .item h2 {color: #898989; font-size: 14px; line-height: 1; margin: 10px 0 20px; } .box4text .number .item span {display: block; width: 15px; height: 15px; border-radius: 50%; background: var(--color); position: relative; z-index: 9; opacity: .75; } @keyframes halo {0% {opacity: 0; transform: scale(0); } 50% {opacity: 1; } 100% {opacity: 0; transform: scale(1); } } .box4text .number .item span:after {content: ''; position: absolute; width: 40px; height: 40px; left: 50%; margin-left: -20px; top: 50%; margin-top: -20px; border-radius: 50%; background: var(--color); opacity: 0.8; z-index: 3; opacity: 0; transform-origin: center; animation: halo 1.5s 0.9s infinite ease-out; } /* �割唱�丞�� */ .box4img {width: 50%; overflow: hidden; position: relative; } .box4img img {width: 100%; height: 100%; object-fit: cover; transition: 10s; position: relative; z-index: 1; } .box4img:hover img {transform: scale(1.1); } .box4img .text {position: absolute; z-index: 2; width: 100%; left: 0; bottom: 15px; display: flex; flex-direction: column; align-items: center; } .box4img .text h1 {color: #FFF; font-size: 48px; font-weight: bold; line-height: 1; } .box4img .text h2 {color: rgba(255, 255, 255, 0.90); font-size: 16px; font-weight: 400; line-height: 1; margin: 15px 0; } .box4img .text span {color: var(--color); font-size: 48px; font-weight: 400; line-height: 1; } @media (max-width: 1600px) {.box4text .title {margin-top: 100px; } section .title .desc {margin-top: 30px; margin-bottom: 30px; } } @media (max-width: 1440px) {} @media (max-width: 1200px) {.box4text .title {margin-top: 60px; } .box4 {min-height: 600px; } section .title .desc {line-height: 1.5; } .box4text .number {top: 30px; } } @media (max-width: 992px) {} @media (max-width: 640px) {.box4 {min-height: auto; } .box4text {width: 100%; padding-bottom: 300px; } .box4img {width: 100%; } .box4text .number .item:nth-child(1) {bottom: 37%; left: 23%; } .box4text .number .item:nth-child(2) {bottom: 16%; left: 27%; } } .section5 {background-size: cover !important; } .box5 {display: flex; justify-content: space-between; } .newsBox {max-width: 1080px; width: calc(100% - 360px); display: flex; } .newsBox .item {width: 33.3333%; margin: 0 10px; } .newsBox .item .img {width: 100%; overflow: hidden; } .newsBox .item .img img {width: 100%; transition: 0.5s; } .newsBox .item:hover .img img {transform: scale(1.08); } .newsBox .item .text {padding: 30px 10px; display: flex; flex-direction: column; align-items: center; overflow: hidden; } .newsBox .item .text .time {color: rgba(0, 0, 0, 0.50); font-size: 14px; font-weight: 400; line-height: 1; } .newsBox .item .text h1 {color: #000; font-size: 18px; font-weight: 400; line-height: 1; margin: 10px 0 20px; word-break: break-all; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; } .newsBox .item .text .desc {color: #00000080; font-size: 16px; font-weight: 400; line-height: 25px; word-break: break-all; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;height:75px;overflow: hidden; } @media (max-width: 1600px) {} @media (max-width: 1440px) {} @media (max-width: 1200px) {.newsBox {width: calc(100% - 240px); } } @media (max-width: 992px) {.newsBox .item {width: 50%; margin: 0 10px; } .newsBox .item:last-child {display: none; } } @media (max-width: 640px) {.box5 {display: flex; justify-content: space-between; flex-wrap: wrap; } .newsBox {margin-top: 30px; width: 100%; display: flex; flex-direction: column; } .newsBox .item {width: 100%; margin: 0; } .newsBox .item:last-child {display: block } } .section6 {padding: 0; } .box6 {display: flex; } .box6 .item {width: 50%; overflow: hidden; position: relative; } .box6 .item img {width: 100%; transition: 0.5s; } .box6 .item:hover img {transform: scale(1.08); } .box6 .item h1 {position: absolute; width: 100%; height: 100%; z-index: 2; color: #FFF; background: #00000020; font-size: 24px; font-weight: 400; line-height: 1; text-transform: uppercase; display: flex; align-items: center; justify-content: center; } .box6 .item h1 span {display: block; width: 100px; height: 1px; background: #FFF; margin-right: 30px; } @media (max-width: 1440px) {} @media (max-width: 1200px) {} @media (max-width: 992px) {.box6 .item h1 {font-size: 18px; } } @media (max-width: 640px) {.box6 {display: flex; flex-wrap: wrap; } .box6 .item {width: 100%; } }