/* ==================== 重置样式 Start ==================== */ header *, footer * { margin: 0; padding: 0; box-sizing: border-box; font-family: "HYJunhei-65J"; } /* html{ min-width: 1260px; } */ header a, footer a { text-decoration: none; outline: none; } header img, footer img { vertical-align: middle; max-width: 100%; } header ul, header li, footer ul, footer li { list-style: none; } header .mxw-box, footer .mxw-box { width: 1440px; max-width: 90%; margin-left: auto; margin-right: auto; } header { position: absolute; top: 0; left: 0; /* min-width: 1260px; */ } /* ==================== 重置样式 End ==================== */ /* ==================== 导航搜索弹框 Start ==================== */ .nav-seach-popup { position: relative; opacity: 0; visibility: hidden; transition: opacity 0.4s, visibility 0.4s; height: 0; } .nav-seach-popup .nav-seach-popup-box { background-color: #1C1C1C; padding-top: 50px; padding-bottom: 50px; } .nav-seach-popup.active { opacity: 1; visibility: visible; } .nav-seach-popup .mxw-box { width: 1020px; } .nav-seach-popup .search { background-color: #fff; border-radius: 5px; margin-bottom: 10px; display: flex; align-items: center; } .nav-seach-popup .search .icon { font-size: 20px; color: #C0C5CE; flex-shrink: 0; margin-left: 8px; margin-right: 8px; } .nav-seach-popup .search input { min-width: 0; flex-grow: 1; color: #000; height: 40px; padding-right: 20px; font-size: 20px; } .nav-seach-popup .search input::-webkit-input-placeholder { color: #C0C5CE; } .nav-seach-popup .search input::-moz-placeholder { color: #C0C5CE; } .nav-seach-popup .search input:-moz-placeholder { color: #C0C5CE; } .nav-seach-popup .search input:-ms-input-placeholder { color: #C0C5CE; } .nav-seach-popup .link { padding-left: 10px; } .nav-seach-popup .link .title { font-size: 12px; color: #fff; margin-bottom: 4px; } .nav-seach-popup .link ul>li { transition: all 0.4s; padding: 0 10px; border-radius: 5px; } .nav-seach-popup .link ul>li:hover { background-color: rgba(255, 255, 255, 0.02); } .nav-seach-popup .link ul>li:last-child { margin-bottom: 0; } .nav-seach-popup .link ul>li>a { display: block; color: #fff; font-size: 16px; line-height: 1.6; padding: 4px 0; } .nav-seach-popup .link ul>li .icon { font-size: 14px; margin-right: 10px; } /* ==================== 导航搜索弹框 End ==================== */ /* ==================== 置顶按钮 Start ==================== */ .goto-top { position: fixed; right: 1.17rem; bottom: 20%; font-size: 0.6rem; background-color: #0071E3; z-index: 11; width: 1.17rem; height: 1.17rem; border-radius: 100%; cursor: pointer; transition: all 0.4s; opacity: 0; visibility: hidden; display: flex; align-items: center; justify-content: center; color: #fff; } .goto-top .iconfont { font-size: inherit; } .goto-top.show { opacity: 1; visibility: visible; } @media screen and (max-width: 749px) { .goto-top { right: 15px; bottom: 5%; width: 40.2px; height: 40.2px; font-size: 18px; } } /* ==================== 置顶按钮 End ==================== */ /* ==================== 通用断点隐藏 Start ==================== */ @media screen and (max-width: 749px) { .m-hide { display: none !important; } .common-header{ display: none!important; } } @media screen and (min-width: 750px) { .pc-hide { display: none !important; } } /* ==================== 通用断点隐藏 End ==================== */ /* ==================== 首页 - 通用按钮 Start ==================== */ .index-btn { color: #0071E3; display: inline-flex; align-items: center; justify-content: center; font-size: 20.004px; line-height: 1; font-family: "HYJunhei-65J"; position: relative; text-decoration: none; } .index-btn.min { min-width: 126.012px; height: 46.002px; } .index-btn.min:after { display: none; } .index-btn.white { color: #fff; } .index-btn.white:before { background-color: #fff; } .index-btn.white:after { background-image: url(../images/img830@36x36.png); } .index-btn.white.video-style:after { background-image: url(../images/img109@140x140.png); } .index-btn.video-style { line-height: 27.996px; height: 27.996px; } .index-btn.video-style:after { margin-left: 10.002px; width: 27.996px; height: 27.996px; background-image: url(../images/img110@140x140.png); } .index-btn:hover:before { display: block; } .index-btn:after { content: ""; display: block; width: 18.012px; height: 18.012px; margin-left: 6.012px; margin-top: -0.1em; background: url(../images/img833@36x36.png) no-repeat center; background-size: 100%; } .index-btn2 { display: inline-flex; align-items: center; justify-content: center; width: 126.012px; height: 46.002px; font-size: 18.012px; line-height: 1; font-family: "HYJunhei-65J"; position: relative; background-color: #0071E3; border-radius: 99.996px; color: #fff; } /* ==================== 首页 - 通用按钮 Start ==================== */ /* ==================== 通用产品底部 - 板块一 Start ==================== */ .public-product-page1 * { box-sizing: border-box; } .public-product-page1 { position: relative; background-color: #fff; overflow: hidden; z-index: 13; } .public-product-page1 .pin-spacer { background-color: #fff !important; } .public-product-page1 .public-product-page1-pin { height: 100vh; position: relative; display: flex; align-items: center; justify-content: center; } .public-product-page1 .public-product-page1-box { width: 100%; } .public-product-page1 .info-group { position: relative; } .public-product-page1 .info-group .info-item { position: relative; } .public-product-page1 .info-group .info-item:first-child { z-index: 2; } .public-product-page1 .info-group .info-item:first-child~.info-item { position: absolute; top: 0; left: 0; z-index: 1; } .public-product-page1 .info-group .info-item .text1 { display: flex; align-items: center; justify-content: flex-start; font-size: 3.125vw; line-height: 1.2; height: 2.4em; color: #000000; font-family: "HYJunhei-85J"; white-space: nowrap; } .public-product-page1 .info-group .info-item .index-btn { margin-top: 2.083vw; } .public-product-page1 .image-group { position: relative; margin-right: 3.385vw; } .public-product-page1 .image-group .image-item { width: 45.313vw; height: 30.208vw; flex-shrink: 0; position: relative; z-index: 3; overflow: hidden; clip-path: inset(0 0 0); } .public-product-page1 .image-group .image-item img { width: 100%; } .public-product-page1 .image-group .image-item video { display: block; width: 101%; height: 101%; object-fit: cover; object-position: center; } .public-product-page1 .image-group .image-item~.image-item { position: absolute; top: 0; left: 0; } .public-product-page1 .image-group .image-item .bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0); } .public-product-page1 .image-group .image-item .bg:after { content: ""; display: block; position: absolute; width: 100%; height: 0.0167rem; background-color: #fff; bottom: -0.0167rem; left: 0; } .public-product-page1 .right-body { min-width: 0; flex-grow: 1; } .public-product-page1 .body { margin-left: auto; margin-right: auto; } .public-product-page1 .body .max-body { display: flex; align-items: center; justify-content: space-between; padding-left: 14.323vw; padding-right: 14.323vw; } .public-product-page1 .tab { width: 21.875vw; margin-top: 7.813vw; display: flex; align-items: flex-start; position: relative; } .public-product-page1 .tab .tab-item { font-size: 1.042vw; color: #000; padding-bottom: 0.521vw; margin-right: 1.563vw; position: relative; cursor: pointer; opacity: 0.5; } .public-product-page1 .tab .tab-item:after { content: ""; display: block; width: 100%; height: 0.0333rem; background-color: #000; position: absolute; bottom: -0.0167rem; left: 0; z-index: 2; display: none; } .public-product-page1 .tab .tab-item.active { color: #000; } .public-product-page1 .tab .tab-item:last-child { margin-right: 0; } .public-product-page1 .line { display: block; width: 21.875vw; background-color: #ECECEC; position: relative; height: 0.0333rem; margin-bottom: 0.781vw; font-size: 1.042vw; } .public-product-page1 .line span { width: 4em; height: 0.0333rem; position: absolute; top: 0; left: 0; background-color: #000; } .public-product-page1 .desc-group { width: 21.875vw; position: relative; } .public-product-page1 .desc-group .desc { font-size: 1.042vw; color: #666666; line-height: 1.6; text-align: justify; opacity: 0.8; } .public-product-page1 .desc-group .desc:first-child~.desc { position: absolute; top: 0; left: 0; width: 100%; } /* ==================== 通用产品底部 - 板块一 End ==================== */ /* ==================== 通用产品底部 - 板块二 Start ==================== */ .public-product-page2 * { box-sizing: border-box; } .public-product-page2 { overflow: hidden; background-color: #000; position: relative; z-index: 3; } .public-product-page2 .public-product-page2-pin { height: 100vh; display: flex; align-items: center; justify-content: center; } .public-product-page2 .public-product-page2-box { width: 100%; } .public-product-page2 .body { display: flex; align-items: center; justify-content: flex-start; } .public-product-page2 .left-body { z-index: 3; position: relative; margin-left: -27.108vw; } .public-product-page2 .left-body .img1 { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 4; border-radius: 2.283vw; padding: 0.885vw; } .public-product-page2 .left-body .img1 video { width: 100%; display: block; height: 100%; object-fit: cover; object-position: center; border-radius: 2.283vw; } .public-product-page2 .left-body .img1 .bg { width: 79.367vw; height: 37.3vw; position: absolute; top: 0; left: 0; z-index: 5; background: url(../images/img828.png) no-repeat center; background-size: 100%; } .public-product-page2 .left-body .img2 { width: 79.167vw; height: 37.5vw; position: relative; z-index: 3; } .public-product-page2 .left-body .img2 img { width: 100%; } .public-product-page2 .right-body { padding-right: 11.979vw; margin-left: 6.25vw; } .public-product-page2 .right-body .text1 { width: 10.417vw; margin-bottom: 2.083vw; } .public-product-page2 .right-body .text2 { font-size: 3.125vw; color: #fff; line-height: 1.2; font-family: "HYJunhei-85J"; } .public-product-page2 .right-body .text3 { font-size: 1.042vw; color: #9C9C9C; line-height: 1.8; } .public-product-page2 .right-body .index-btn { margin-top: 3.906vw; } /* ==================== 通用产品底部 - 板块二 End ==================== */ /* ==================== 通用产品底部 - 板块三 Start ==================== */ .public-product-page3 * { box-sizing: border-box; } .public-product-page3 { background-color: #fff; padding-top: 8.333vw; padding-bottom: 8.333vw; position: relative; z-index: 1; } .public-product-page3 .public-product-page3-box { width: 73.958vw; margin-left: auto; margin-right: auto; } .public-product-page3 .title { text-align: center; margin-bottom: 4.167vw; font-family: inherit; } .public-product-page3 .title .text1 { font-size: 3.125vw; color: #000000; line-height: 1; font-family: "HYJunhei-85J"; } .public-product-page3 .title .text2 { margin-top: 1.563vw; color: #666666; font-size: 1.042vw; line-height: 1.8; } .public-product-page3 .itembox { height: 25.521vw; display: flex; align-items: stretch; justify-content: space-between; } .public-product-page3 .item { width: 33.333%; background-size: cover; background-position: center; transition: all 0.4s; overflow: hidden; position: relative; display: block; } .public-product-page3 .item .cover { position: absolute; width: 100%; height: 100%; background-size: cover; background-position: center; top: 0; left: 0; z-index: 1; } .public-product-page3 .item .video { position: absolute; width: 100%; height: 100%; top: 0; left: 0; } .public-product-page3 .item .video video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; } .public-product-page3 .item:before { content: ""; display: block; width: 100%; height: 100%; background-image: linear-gradient(to top, #000, transparent); position: absolute; bottom: 0; left: 0; transition: all 0.4s; visibility: visible; opacity: 1; z-index: 2; } .public-product-page3 .item:after { content: ""; display: block; background: url(../images/img826@52x52.png) no-repeat center; position: absolute; right: 1.25vw; bottom: 2.063vw; background-size: 100%; width: 1.354vw; height: 1.354vw; transition: all 0.4s; visibility: visible; opacity: 1; z-index: 5; } .public-product-page3 .item:nth-child(3n-1) { margin-left: 0.521vw; margin-right: 0.521vw; } .public-product-page3 .item:hover, .public-product-page3 .item.active { width: 39.583vw; flex-shrink: 0; } .public-product-page3 .item:hover:before, .public-product-page3 .item.active:before, .public-product-page3 .item:hover:after, .public-product-page3 .item.active:after { opacity: 0; visibility: hidden; } .public-product-page3 .item:hover .info, .public-product-page3 .item.active .info { transform: translateY(0); } .public-product-page3 .item:hover .info .desc, .public-product-page3 .item.active .info .desc { opacity: 1; visibility: visible; } .public-product-page3 .item .info { padding: 2.083vw 1.042vw; padding-right: 2.604vw; position: absolute; width: 100%; left: 0; bottom: 0; transform: translateY(75%); transition: all 0.4s; z-index: 3; } .public-product-page3 .item .info .title2 { position: absolute; top: 0; left: 0; width: 100%; font-size: 1.146vw; color: #FFFFFF; line-height: 1.1; text-align: left; padding-left: 1.042vw; padding-right: 1.042vw; transform: translateY(-1.042vw); } .public-product-page3 .item .info .desc { font-size: 0.938vw; color: #FFFFFF; line-height: 1.8; width: 39.583vw; transition: all 0.4s; opacity: 0; visibility: hidden; } /* ==================== 通用产品底部 - 板块三 End ==================== */ /* ==================== 通用产品底部 - 板块四 Start ==================== */ .public-product-page4 * { box-sizing: border-box; } .public-product-page4 { overflow: hidden; padding-top: 8.333vw; padding-bottom: 8.333vw; background-color: #000000; position: relative; z-index: 2; } .public-product-page4 .public-product-page4-box { max-width: 72.917vw; margin-left: auto; margin-right: auto; } .public-product-page4 .title { font-size: 3.125vw; text-align: center; margin-bottom: 3.646vw; line-height: 1; font-family: inherit; } .public-product-page4 .title .text1 { font-size: 3.125vw; line-height: 1; display: inline-block; margin-bottom: 0.521vw; color: transparent; background: -webkit-linear-gradient(to left, #E4CD94 0%, #CCA870 51%, #DFC78F 100%); background: -o-linear-gradient(to left, #E4CD94 0%, #CCA870 51%, #DFC78F 100%); background: -moz-linear-gradient(to left, #E4CD94 0%, #CCA870 51%, #DFC78F 100%); background: linear-gradient(to left, #E4CD94 0%, #CCA870 51%, #DFC78F 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-family: "HYJunhei-85J"; } .public-product-page4 .title .text2 { font-size: 1.04vw; color: #FFFFFF; letter-spacing: 0.7vw; } .public-product-page4 .itembox { display: flex; justify-content: space-around; } .public-product-page4 .item .icon { width: 2.6vw; margin-bottom: 1.82vw; margin-left: auto; margin-right: auto; } .public-product-page4 .item .icon img{ width: 100%; } .public-product-page4 .item .info { text-align: center; } .public-product-page4 .item .text1 { font-size: 1.25vw; line-height: 1.1; color: #FFFFFF; letter-spacing: 0.0333rem; } .public-product-page4 .item .text2 { font-size: 0.938vw; line-height: 1.1; margin-top: 0.781vw; color: #FFFFFF; opacity: 0.5; } .public-product-page4 .item .more-btn { display: flex; align-items: center; justify-content: center; font-size: 1.042vw; color: #FFFFFF; line-height: 1; margin-top: 2.604vw; font-family: "HYJunhei-35J"; text-decoration: none; } .public-product-page4 .item .more-btn img { width: 0.417vw; margin-left: 0.26vw; } .public-product-page4 .item .more-btn .iconfont { font-size: 1em; line-height: 1; margin-top: 0.104vw; margin-left: 0.104vw; } /* ==================== 通用产品底部 - 板块四 End ==================== */ /* ==================== 通用产品底部 - 板块五 Start ==================== */ .public-product-page5 { background-color: #000; height: 100vh; display: flex; align-items: center; justify-content: center; overflow: hidden; } .public-product-page5 .public-product-page5-box { width: 100%; } .public-product-page5 .title { font-size: 3.125vw; color: #FFFFFF; font-family: "HYJunhei-85J"; line-height: 1; text-align: center; margin-bottom: 3.385vw; } .public-product-page5 .swiper { padding-left: 14.063vw; } .public-product-page5 .public-product-page5-swiper { width: 48.958vw; margin-left: 0; margin-right: auto; overflow: visible; } .public-product-page5 .public-product-page5-swiper .swiper-slide { width: 100%; margin-right: 1.2%; position: relative; } .public-product-page5 .public-product-page5-swiper .swiper-slide .video { width: 100%; height: 26.563vw; } .public-product-page5 .public-product-page5-swiper .swiper-slide .video video { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; } .public-product-page5 .public-product-page5-swiper .swiper-slide .image img { width: 100%; } .public-product-page5 .public-product-page5-swiper .swiper-slide .img-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #000; opacity: 0.6; } .public-product-page5 .bottom { display: table; margin-left: auto; margin-right: auto; margin-top: 2.604vw; } .public-product-page5 .line { width: 100%; height: 0.365vw; border-radius: 5.208vw; overflow: hidden; background-color: #1d1d1f; position: relative; } .public-product-page5 .line span { height: 100%; width: 6.25vw; background-color: #fff; border-radius: 5.208vw; display: block; position: absolute; top: 0; left: 0; } .public-product-page5 .tabs { display: flex; align-items: center; justify-content: space-between; margin-top: 0.521vw; } .public-product-page5 .tab-item { color: #fff; line-height: 1.1; font-size: 0.833vw; margin-right: 5.729vw; opacity: 0.5; cursor: pointer; } .public-product-page5 .tab-item.active { color: #fff; } .public-product-page5 .tab-item:last-child { margin-right: 0; } /* ==================== 通用产品底部 - 板块五 End ==================== */