.m-banner-news { display: flex; align-items: flex-start; justify-content: flex-start; gap: 11px; width: 1440px; height: 499px; margin: 80px auto 0; overflow: hidden; } .m-banner-carousel { position: relative; width: 899px; height: 499px; overflow: hidden; } .m-banner-slide { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: flex-end; background-position: center; background-size: cover; background-repeat: no-repeat; opacity: 0; transition: opacity 0.8s ease-in-out; text-decoration: none; } .m-banner-slide.active { opacity: 1; pointer-events: auto; } .m-banner-slide:hover { text-decoration: none; } .m-banner-text { display: flex; flex-direction: column; padding: 34px 120px; } .m-banner-text .u-banner-title { font-size: 42px; font-weight: 700; color: #ffffff; font-family: "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", SimHei, Arial, Helvetica, sans-serif; letter-spacing: 0; } .m-banner-text .u-banner-desc { margin-top: 9px; margin-right: -54px; font-size: 24px; color: #ffffff; font-family: "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", SimHei, Arial, Helvetica, sans-serif; line-height: 28px; letter-spacing: 0; } .m-banner-dots { position: absolute; bottom: 16px; left: 120px; display: flex; gap: 8px; z-index: 2; } .m-banner-dots .u-dot { width: 24px; height: 3px; background: rgba(255, 255, 255, 0.5); border-radius: 2px; cursor: pointer; transition: background 0.3s; } .m-banner-dots .u-dot.active { background: #ffffff; } .m-news-panel { display: flex; flex-direction: column; padding: 38px 20px 34px 51px; overflow: hidden; } .m-news-header { display: flex; align-items: center; gap: 8px; margin-bottom: 20px; } .u-news-indicator { width: 4px; height: 18px; background: #ff6161; } .u-news-title { font-size: 18px; font-weight: 600; color: #333333; font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", SimHei, Arial, Helvetica, sans-serif; line-height: 20px; margin: 0; } .m-news-list { display: flex; flex-direction: column; } .m-news-item { display: flex; align-items: flex-start; justify-content: space-between; border-radius: 2px; background: #ffffff99; padding: 12px 12px 14px 5px; cursor: pointer; text-decoration: none; transition: background 0.2s; } .m-news-item:hover { background: #ffffffcc; text-decoration: none; } .m-news-item:hover .u-day { color: #ff584e; } .m-news-item:hover .u-ym { color: #ff584e; } .m-news-item:hover .u-news-divider { background: #ff584e; } .m-news-item:hover .u-news-text { color: #ff584e; } .m-news-item + .m-news-item { margin-top: 4px; } .m-news-date { display: flex; align-items: flex-start; justify-content: space-between; width: 44.5px; min-width: 44.5px; } .m-news-date .u-day { font-size: 22px; font-weight: 500; color: #00000066; font-family: DIN, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", SimHei, Arial, Helvetica, sans-serif; line-height: 20px; transition: color 0.2s; } .m-news-date .u-ym { margin-top: 3px; width: 18px; font-size: 8px; font-weight: 500; color: #00000066; font-family: DIN, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", SimHei, Arial, Helvetica, sans-serif; line-height: 8px; transition: color 0.2s; } .u-news-divider { margin: 4px 8px 0; background: #d9d9d9; width: 1px; height: 14px; flex-shrink: 0; transition: background 0.2s; } .u-news-text { margin: 4px 0 0 0; font-size: 16px; font-weight: 600; color: #000000cc; font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", SimHei, Arial, Helvetica, sans-serif; line-height: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 290px; min-width: 0; text-align: left; transition: color 0.2s; } .chart { text-align: center; margin-top: 72px; } .chart img { width: 1026px; } .chart h3 { font-size: 32px; color: rgba(0, 0, 0, 0.85); margin-bottom: 48px; } .chart .u-chart-desc { max-width: 1200px; margin: 0 auto 48px; font-size: 18px; line-height: 32px; letter-spacing: 0; color: #000000d9; font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", SimHei, Arial, Helvetica, sans-serif; font-weight: 300; text-align: justify; } .chart .m-three-in-one { display: flex; align-items: center; justify-content: center; margin-bottom: 107px; } .chart .m-three-in-one .m-mell { position: relative; width: 378px; height: 320px; } .chart .m-three-in-one .m-mell img { width: 100%; height: 100%; display: block; } .chart .m-three-in-one .m-mell .f-text { position: absolute; color: #ffffff; font-family: PingFangSC-Semibold, PingFang SC; } .chart .m-three-in-one .m-mell .u-text-1 { top: 100px; width: 100%; height: 42px; line-height: 42px; text-align: center; font-size: 30px; font-weight: 600; transition: transform 0.5s; transform: translateY(0px); } .chart .m-three-in-one .m-mell:hover .u-text-1 { transition: transform 0.5s; transform: translateY(-60px); } .chart .m-three-in-one .m-mell .u-text-2 { top: 152px; left: 50%; transform: translateX(-24px); width: 48px; height: 6px; background: #fb4747; border-radius: 3px; transition: transform 0.5s; transform: translate(-24px, 0px); } .chart .m-three-in-one .m-mell:hover .u-text-2 { transition: transform 0.5s; transform: translate(-24px, -60px); } .chart .m-three-in-one .m-mell .u-text-3 { top: 160px; margin: 0 25px; width: 328px; min-height: 84px; font-size: 14px; font-family: PingFangSC-Regular, PingFang SC; font-weight: 400; color: #ffffff; line-height: 24px; transition: opacity 0.5s, transform 0.5s; transform: translateY(0px); opacity: 0; } .chart .m-three-in-one .m-mell:hover .u-text-3 { transition: opacity 0.5s, transform 0.5s; opacity: 1; transform: translateY(-40px); } .introduce-wrap { width: 1200px; margin: 127px auto 0; box-sizing: border-box; } .introduce, .introduce-even { display: flex; margin-bottom: 140px; } .introduce .word { width: 480px; margin-right: 140px; display: flex; flex-direction: column; justify-content: center; } .introduce.even .word { margin-right: 0; } .introduce .word h6 { font-size: 30px; font-family: PingFangSC-Semibold, PingFang SC; font-weight: 600; color: rgba(0, 0, 0, 0.85); margin-bottom: 4px; } .introduce .word p { font-size: 20px; font-family: PingFangSC-Regular, PingFang SC; font-weight: 400; color: rgba(0, 0, 0, 0.65); line-height: 32px; } .introduce .pictures { position: relative; } .introduce.even .pictures { margin-right: 140px; } .introduce .pictures img:first-child { width: 580px; } .introduce .pictures img.top-picture { width: 254px; position: absolute; bottom: 0; } .introduce.odd .pictures img.top-picture { right: 0; } .introduce.even .pictures img.top-picture { left: -16px; } /*浜у搧涓庢湇鍔$煩闃?/ .matrix { position: relative; width: 100%; overflow: hidden; } .matrix .u-matrix-img { width: 100%; display: block; } .matrix .u-matrix-content { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; padding-top: 72px; } .matrix .u-matrix-title { line-height: 48px; letter-spacing: 0; color: #000000d9; font-family: "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", SimHei, Arial, Helvetica, sans-serif; font-size: 32px; text-align: center; margin: 0; } .matrix .u-matrix-desc { margin: 48px 0 0; max-width: 1200px; width: 85%; text-align: justify; line-height: 32px; letter-spacing: 0; color: #000000d9; font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", SimHei, Arial, Helvetica, sans-serif; font-size: 18px; font-weight: 300; } .pengyixia-wrap { width: 100%; } .m-pengyixia-banner { display: block; position: relative; width: 100%; overflow: hidden; text-decoration: none; transition: transform 0.3s, box-shadow 0.3s; } .m-pengyixia-banner:hover { cursor: pointer; text-decoration: none; } .u-pengyixia-bg { width: 100%; display: block; } .u-pengyixia-content { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding-top: 74px; box-sizing: border-box; } .u-pengyixia-title { line-height: 48px; letter-spacing: 0; color: #ffffff; font-family: "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", SimHei, Arial, Helvetica, sans-serif; font-size: 32px; margin-bottom: 48px; text-align: center; word-break: break-word; overflow-wrap: break-word; max-width: 100%; } .u-pengyixia-desc { max-width: 1200px; width: 85%; text-align: justify; line-height: 30px; letter-spacing: 0; color: #ffffff; font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", SimHei, Arial, Helvetica, sans-serif; font-size: 18px; font-weight: 300; margin-top: 0; margin-bottom: 36px; word-break: break-word; overflow-wrap: break-word; } .u-pengyixia-features { max-width: 1200px; width: 85%; display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; list-style: none; padding: 0; margin: 0; } .u-pengyixia-features li { color: #ffffff; font-size: 16px; line-height: 28px; font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", SimHei, Arial, Helvetica, sans-serif; font-weight: 300; width: calc(50% - 12px); } .u-pengyixia-features li strong { font-weight: 600; margin-right: 8px; } .gzart-wrap { width: 100%; } .u-gzart-title { line-height: 48px; letter-spacing: 0; color: #000000d9; font-family: "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", SimHei, Arial, Helvetica, sans-serif; font-size: 32px; text-align: center; max-width: 736px; word-break: break-word; overflow-wrap: break-word; } .u-gzart-desc { max-width: 1200px; width: 85%; text-align: justify; line-height: 30px; letter-spacing: 0; color: #000000d9; font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", SimHei, Arial, Helvetica, sans-serif; font-size: 18px; font-weight: 300; margin-top: 24px; margin-bottom: 36px; word-break: break-word; overflow-wrap: break-word; } .m-gzart-banner { display: block; position: relative; width: 100%; overflow: hidden; text-decoration: none; color: inherit; cursor: pointer; } .m-gzart-banner:hover, .m-gzart-banner:focus { text-decoration: none; } .u-gzart-bg { width: 100%; display: block; } .u-gzart-content { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding-top: 72px; box-sizing: border-box; } /*绯诲垪浜у搧*/ .products-used { margin-top: 48px; } .products-used h3 { font-size: 32px; color: rgba(0, 0, 0, 0.85); margin-bottom: 48px; text-align: center; } .products-used .u-data-desc { text-align: justify; max-width: 1200px; margin: 0 auto 48px; font-size: 18px; line-height: 32px; letter-spacing: 0; color: #000000d9; font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", SimHei, Arial, Helvetica, sans-serif; font-weight: 300; } /*杞挱鍥?/ .banner .content-pics .slider-wrap { width: 100%; } .content-pics .slider-wrap { position: relative; overflow: hidden; width: 1200px; margin: 0 auto; } .content-pics .slider-wrap:hover .left-btn, .content-pics .slider-wrap:hover .right-btn { display: inline-block; } .content-pics .ul-wrap { width: 5000px; position: relative; left: 0; } .left-btn, .right-btn { width: 40px; height: 240px; background: rgba(0, 0, 0, 0.3); position: absolute; text-align: center; line-height: 240px; z-index: 9; cursor: pointer; display: none; transition: all 0.1s; } .left-btn { left: 0; top: 0; } .right-btn { right: 0; top: 0; } .left-btn::before, .right-btn::before { content: ''; font-size: 20px; color: #fff; width: 12px; height: 22px; display: inline-block; background: url('../images/index/right_arr.png'); background-size: 12px 22px; } .left-btn::before { transform: rotateY(180deg); } .content-pics ul { display: flex; justify-content: space-between; float: left; } .content-pics ul li { width: 384px; height: 240px; margin-right: 24px; } .content-pics ul li:last-child { margin-right: 0; } .content-pics ul li img { width: 100%; height: 100%; } #myModal video { width: 100%; } /*鑷鏁板瓧*/ .content-tags { display: flex; justify-content: center; width: 1080px; margin: 0 auto 86px; } .content-tags dl { margin-right: 84px; width: 219px; text-align: center; margin-bottom: 0; } .content-tags dl:last-child { margin-right: 0; } .content-tags dt { font-size: 54px; font-family: DIN-Light, DIN; font-weight: 300; color: rgba(50, 52, 55, 1); white-space: nowrap; } #familyNum:after { content: '涓?; } .content-tags dd { font-size: 20px; color: rgba(139, 139, 139, 1); } /*鍝佺墝*/ .cooperation-brands { text-align: center; background-image: url('../images/index/dot_bg.png'); background-repeat: no-repeat; background-position: center; background-size: cover; margin-top: -64px; padding-top: 124px; } .cooperation-brands img { width: 1080px; } #pics-carousel img { cursor: pointer; } .friendly-community { width: 100%; position: relative; } .m-fc-banner { display: block; position: relative; width: 100%; overflow: hidden; text-decoration: none; transition: transform 0.3s, box-shadow 0.3s; } .m-fc-banner:hover { cursor: pointer; text-decoration: none; } .m-fc-banner:hover .u-fc-title, .m-fc-banner:hover .u-fc-desc { text-decoration: none; } .m-fc-carousel { position: relative; width: 100%; overflow: hidden; } .m-fc-carousel-track { display: flex; transition: transform 0.6s ease-in-out; } .m-fc-carousel-track.no-transition { transition: none; } .u-fc-slide { width: 100%; flex-shrink: 0; display: block; } .m-fc-dots { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; z-index: 2; } .u-fc-dot { width: 24px; height: 3px; background: rgba(0, 0, 0, 0.3); border-radius: 2px; cursor: pointer; transition: background 0.3s; } .u-fc-dot.active { background: #ffffff; } .u-fc-content { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding-top: 74px; z-index: 1; box-sizing: border-box; } .m-fc-banner .u-fc-title { text-decoration: none; line-height: 48px; letter-spacing: 0; color: #000000d9; font-family: "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", SimHei, Arial, Helvetica, sans-serif; font-size: 32px; margin-bottom: 48px; word-break: break-word; overflow-wrap: break-word; max-width: 100%; } .m-fc-banner .u-fc-desc { text-decoration: none; max-width: 1200px; width: 85%; text-align: justify; line-height: 30px; letter-spacing: 0; color: #000000d9; font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", SimHei, Arial, Helvetica, sans-serif; font-size: 18px; font-weight: 300; margin-top: 0; word-break: break-word; overflow-wrap: break-word; } .u-fc-qrcodes { position: absolute; right: 24px; bottom: 120px; display: flex; flex-direction: column; gap: 20px; z-index: 1; } .u-fc-qrcode { width: 120px; height: 144px; border-radius: 10px; overflow: hidden; } .u-fc-qrcode img { width: 100%; height: 100%; object-fit: cover; }