/* ==================== 内页22 - 容器 Start ==================== */ .ny22-box { width: 23rem; margin-left: auto; margin-right: auto; } /* ==================== 内页22 - 容器 End ==================== */ /* ==================== 内页22 - 通用标题 Start ==================== */ .ny22-text1 { font-size: 1rem; color: #1E1E20; font-family: "HYJunhei-85J"; line-height: 1.2; } .ny22-text2 { font-size: 0.4333rem; color: #1E1E20; line-height: 1.4; margin-top: 0.5002rem; } /* ==================== 内页22 - 通用标题 End ==================== */ /* ==================== 内页22 - 板块一 Start ==================== */ .ny22-section1 { position: relative; } .ny22-section1 .bg-image img { width: 100%; } .ny22-section1 .info { position: absolute; z-index: 2; top: 50%; left: 0; width: 100%; transform: translateY(-50%); } .ny22-section1 .info .max-body { padding-left: 4.5002rem; } .ny22-section1 .info .desc { width: 9.1667rem; } /* ==================== 内页22 - 板块一 End ==================== */ /* ==================== 内页22 - 板块二 Start ==================== */ .ny22-section2 { overflow: hidden; height: 100vh; min-height: 15.6666rem; background-size: cover; background-position: center; background-repeat: no-repeat; display: flex; align-items: flex-start; justify-content: flex-start; padding-top: 3.8333rem; } .ny22-section2 .ny22-section2-box { max-width: 32rem; margin-left: auto; margin-right: auto; width: 100%; } .ny22-section2 .body { display: flex; align-items: center; justify-content: flex-start; padding-left: 3rem; } .ny22-section2 .info2 { width: 8rem; margin-right: 1.6666rem; } .ny22-section2 .right-body { width: 7.5002rem; height: 8.5002rem; position: relative; background-repeat: no-repeat; display: flex; align-items: center; justify-content: flex-start; background-size: 100%; } .ny22-section2 .right-body .info { height: 100%; padding-left: 0.3334rem; padding-right: 0.1667rem; display: flex; flex-flow: column; justify-content: center; align-items: flex-start; } .ny22-section2 .right-body .info .text1 { font-size: 0.3334rem; color: #1D1D1F; line-height: 1; margin-bottom: 0.3334rem; } .ny22-section2 .right-body .info .text2 { font-size: 1.1334rem; line-height: 1; color: transparent; background: -webkit-linear-gradient(45.73586756deg, #FF0000 0%, #FFB800 100%); background: -o-linear-gradient(45.73586756deg, #FF0000 0%, #FFB800 100%); background: -moz-linear-gradient(45.73586756deg, #FF0000 0%, #FFB800 100%); background: linear-gradient(45.73586756deg, #FF0000 0%, #FFB800 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-family: "HYJunhei-85J"; } .ny22-section2 .right-body .info .text3 { margin-top: 2.3334rem; font-size: 0.3334rem; color: #1D1D1F; line-height: 1.2; } .ny22-section2 .image-group { position: relative; display: flex; align-items: flex-end; margin-bottom: 0.3334rem; } .ny22-section2 .image-group .image { width: 3.8333rem; flex-shrink: 0; transform-origin: 50% 330%; } .ny22-section2 .image-group .image:first-child ~ .image { position: absolute; top: 0; left: 0; } /* ==================== 内页22 - 板块二 End ==================== */ /* ==================== 内页22 - 板块三 Start ==================== */ .ny22-section3 { overflow: hidden; padding-top: 2.8333rem; padding-bottom: 2.6666rem; background-color: #000; } .ny22-section3 .info { text-align: center; } .ny22-section3 .ny22-text1 { color: #fff; } .ny22-section3 .ny22-text2 { color: #808080; margin-top: 0.5002rem; } .ny22-section3 .image { width: 17rem; display: block; margin-left: auto; margin-right: auto; margin-top: 1rem; } .ny22-section3 .image img { width: 100%; } /* ==================== 内页22 - 板块三 End ==================== */ /* ==================== 内页22 - 板块四 Start ==================== */ .ny22-section4 { display: flex; align-items: center; justify-content: space-between; padding-top: 2.6666rem; padding-bottom: 2.6666rem; user-select: none; } .ny22-section4 .body { width: 23rem; margin-left: auto; margin-right: auto; } .ny22-section4 .image img { width: 100%; } .ny22-section4 .info { text-align: center; margin-bottom: 1rem; } .ny22-section4 .ny22-text2 { color: rgba(29, 29, 31, 0.6); } .ny22-section4 .image-box { position: relative; border-radius: 0.3334rem; overflow: hidden; } .ny22-section4 .image-box img { width: 100%; } .ny22-section4 .drag-mask { position: absolute; width: 100%; height: 100%; top: 0; left: 0; } .ny22-section4 .drag-mask .mask-content { position: relative; overflow: hidden; width: 100%; height: 100%; } .ny22-section4 .drag-mask img { clip-path: inset(0 0 0 0% round 0); border-radius: 0.3334rem; width: 100%; } .ny22-section4 .drag-mask .mask { content: ""; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; pointer-events: none; margin-left: -100%; border-right: 1px solid #fff; } .ny22-section4 .drag-btn { position: absolute; top: 50%; transform: translate(50%, -50%); width: 0.832rem; height: 0.832rem; right: 0; border-radius: 100%; display: flex; align-items: center; justify-content: center; background-color: #ffffff; cursor: move; z-index: 10; } .ny22-section4 .drag-btn .text { position: absolute; top: 50%; transform: translateY(-50%); left: 100%; white-space: nowrap; font-size: 0.3334rem; color: #1D1D1F; padding-left: 0.1667rem; } .ny22-section4 .drag-btn i { font-size: 0.2336rem; color: #000; } .ny22-section4 .drag-btn i:nth-child(1) { transform: rotateY(180deg); } /* ==================== 内页22 - 板块四 End ==================== */ /* ==================== 内页22 - 板块五 Start ==================== */ .ny22-section5 { padding-top: 2.6666rem; padding-bottom: 2.6666rem; background-color: #F1F1F1; overflow: hidden; } .ny22-section5 .ny22-text1 { text-align: center; margin-bottom: 1rem; } .ny22-section5 .body1 { margin-bottom: 2.6666rem; } .ny22-section5 .body1 .itembox { display: flex; align-items: center; } .ny22-section5 .body1 .item { overflow: hidden; position: relative; height: 8.16rem; width: 25%; transition: all 0.4s; cursor: pointer; margin-right: 1%; } .ny22-section5 .body1 .item:hover { width: 40%; } .ny22-section5 .body1 .item:nth-child(4n) { margin-right: 0; } .ny22-section5 .body1 .item .img1, .ny22-section5 .body1 .item .img2 { width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-size: cover; background-position: left center; transition: all 0.2s; border-radius: 0.3334rem; } .ny22-section5 .body1 .item .img1 { width: 4.8rem; opacity: 1; visibility: visible; left: 50%; transform: translateX(-50%); } .ny22-section5 .body2 { position: relative; margin-bottom: 2.6666rem; } .ny22-section5 .body2 .bg-image { border-radius: 0.3334rem; overflow: hidden; } .ny22-section5 .body2 .bg-image img { width: 100%; } .ny22-section5 .body2 .info { width: 100%; position: absolute; bottom: 0; left: 0; padding-left: 0.6666rem; padding-right: 3.5002rem; padding-bottom: 1.1667rem; z-index: 3; } .ny22-section5 .body2 .info .text1 { font-size: 1rem; line-height: 1.1; color: #1D1D1F; font-family: "HYJunhei-85J"; } .ny22-section5 .body2 .info .text2 { font-size: 0.4333rem; margin-top: 0.5002rem; line-height: 1.2; } .ny22-section5 .body3 { display: flex; align-items: center; justify-content: space-between; position: relative; } .ny22-section5 .body3 .vs { width: 2rem; flex-shrink: 0; } .ny22-section5 .body3 .vs img { width: 100%; } .ny22-section5 .body3 .item { box-shadow: 0.1334rem 0.1667rem 0.3334rem 0.0333rem rgba(0, 0, 0, 0.06); border-radius: 0.3334rem; background-color: #fff; overflow: hidden; position: relative; } .ny22-section5 .body3 .item .image img { width: 100%; } .ny22-section5 .body3 .item .info { padding: 0.6666rem; position: absolute; bottom: 0; left: 0; width: 100%; } .ny22-section5 .body3 .item .info .text1 { font-size: 0.3667rem; color: #1D1D1F; line-height: 1.1; margin-bottom: 0.2499rem; font-family: "HYJunhei-85J"; } .ny22-section5 .body3 .item .info .text2 { font-size: 0.3002rem; color: #86868B; } .ny22-section5 .body3 .left-item { width: 12.5002rem; } .ny22-section5 .body3 .right-item { width: 6.3334rem; } /* ==================== 内页22 - 板块五 End ==================== */ /* ==================== 内页22 - 板块六 Start ==================== */ .ny22-section6 { padding-bottom: 3.3334rem; background-color: #F1F1F3; overflow: hidden; } .ny22-section6 .body { display: flex; align-items: center; padding-left: 3rem; } .ny22-section6 .left-body { color: #1D1D1F; min-width: 0; flex-grow: 1; padding-bottom: 1.4333rem; } .ny22-section6 .left-body .info { margin-top: 0.6666rem; } .ny22-section6 .left-body .info:first-child { margin-top: 0; } .ny22-section6 .left-body .info .text1 { font-size: 0.6666rem; line-height: 1; margin-bottom: 0.1667rem; color: #86868B; font-family: "HYJunhei-85J"; } .ny22-section6 .left-body .info .text2 { font-size: 1rem; line-height: 1; font-family: "HYJunhei-85J"; } .ny22-section6 .left-body .text3 { margin-top: 1.6666rem; font-size: 0.4333rem; line-height: 1; color: #86868B; } .ny22-section6 .right-body { overflow: hidden; width: 19.1667rem; flex-shrink: 0; } .ny22-section6 .right-body .ny22-section6-swiper { width: 14.6666rem; overflow: visible; margin-left: 0; margin-right: auto; } .ny22-section6 .right-body .ny22-section6-swiper .image { border-radius: 0.3334rem; overflow: hidden; } .ny22-section6 .right-body .ny22-section6-swiper .swiper-slide-active .image:after { opacity: 0; } .ny22-section6 .right-body .image { position: relative; } .ny22-section6 .right-body .image:after { content: ""; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-color: #000; opacity: 0.6; transition: all 0.4s; } .ny22-section6 .right-body .image img { width: 100%; } .ny22-section6 .btn-group { margin-top: 0.6666rem; display: flex; align-items: center; justify-content: flex-start; } .ny22-section6 .btn-group .swiper-button { flex-shrink: 0; position: static; width: 0.7667rem; height: 0.7667rem; transform: translate(0, 0); margin: 0; background: #000; display: flex; align-items: center; justify-content: center; } .ny22-section6 .btn-group .swiper-button-prev { margin-right: 0.3334rem; } /* ==================== 内页22 - 板块六 End ==================== */ /* ==================== 内页22 - 板块七 Start ==================== */ .ny22-section7 { background-color: #fff; padding-top: 2.6666rem; padding-bottom: 2.6666rem; padding-left: 4.5002rem; overflow: hidden; } .ny22-section7 .swiper { width: 100%; } .ny22-section7 .ny22-section7-swiper { width: 12rem; margin-left: 0; margin-right: auto; overflow: visible; } .ny22-section7 .swiper-slide-active .title { opacity: 1; visibility: visible; } .ny22-section7 .image { border-radius: 0.3334rem; overflow: hidden; } .ny22-section7 .bottom { margin-left: 0.6666rem; } .ny22-section7 .line { width: 10.3334rem; height: 0.0499rem; background: #BFBFBF; margin-right: auto; margin-top: 1rem; margin-bottom: 0.1667rem; position: absolute; bottom: 0.8333rem; left: 0.6rem; top: auto; } .ny22-section7 .line span { position: absolute; top: 0; left: 0; height: 100%; display: block; background-color: #000; } .ny22-section7 .title-group { position: relative; } .ny22-section7 .title { font-size: 0.4333rem; margin-top: 1.3334rem; opacity: 0; visibility: hidden; transition: all 0.4s; padding-left: 0.6rem; } /* ==================== 内页22 - 板块七 End ==================== */ /* ==================== 内页22 - 板块八 Start ==================== */ .ny22-section8 { padding-top: 2.6666rem; padding-bottom: 2.6666rem; background-color: #000000; } .ny22-section8 .ny22-text1 { color: #fff; margin-bottom: 1rem; } .ny22-section8 .table { background-color: #101010; border-radius: 0.3334rem; overflow: hidden; width: 100%; padding: 1rem; } .ny22-section8 table, .ny22-section8 td, .ny22-section8 th { border-collapse: collapse; border: 1px solid #37373A; text-align: left; } .ny22-section8 table { width: 100%; } .ny22-section8 tr:nth-child(2n-1) td { color: rgba(255, 255, 255, 0.5); background-color: #222323; } .ny22-section8 tr:nth-child(2n) td { padding-top: 0.6666rem; padding-bottom: 0.6666rem; color: #fff; } .ny22-section8 td { font-size: 0.2666rem; padding: 0.2666rem 0.3334rem; } /* ==================== 内页22 - 板块八 End ==================== */