.index-page { /* swiper杞???? */ /* ??棰???瀛? */ /* ?板??涓?甯? */ /* ?伴?讳腑蹇? */ /* 涓轰?涔????╂??浠 */ } .index-page .swiper1 { position: relative; } .index-page .swiper1 .swiper-slide .phone-banner { display: none; } .index-page .swiper1 .swiper-slide img { display: block; max-width: 100%; height: auto; } .index-page .swiper1 .swiper1-left, .index-page .swiper1 .swiper1-right { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 72px; height: 72px; background-color: rgba(0, 0, 0, 0.2); border-radius: 50%; display: flex; justify-content: center; align-items: center; cursor: pointer; } .index-page .swiper1 .swiper1-left { left: 60px; } .index-page .swiper1 .swiper1-right { right: 60px; } .index-page .swiper1 .swiper-pagination { bottom: 45px; } .index-page .swiper1 .swiper-pagination-bullet { width: 28px; height: 4px; border-radius: 4px; background-color: #fff; opacity: 1; margin-right: 10px; } .index-page .swiper1 .swiper-pagination-bullet.swiper-pagination-bullet-active { background-color: #127cb8; } .index-page .title-box { text-align: center; display: flex; align-items: center; justify-content: center; } .index-page .title-box .title { color: #1d1d1d; font-size: 36px; font-style: normal; font-weight: 900; line-height: normal; margin: 0 22px; } .index-page .new-product { padding-top: 100px; padding-bottom: 126px; } .index-page .new-product .product-list { display: flex; justify-content: space-between; margin-top: 74px; } .index-page .new-product .product-list .product-item { position: relative; width: 22.7%; height: 325px; display: flex; flex-direction: column; justify-content: center; align-items: center; } .index-page .new-product .product-list .product-item .img { width: 100%; display: flex; justify-content: center; align-items: center; } .index-page .new-product .product-list .product-item .img img { display: block; /* width: 190px; */ /* height: 173px; */ width: 200px; height: 200px; object-fit: contain; object-position: center; } .index-page .new-product .product-list .product-item .text { width: 100%; font-style: normal; font-weight: 400; line-height: normal; text-transform: uppercase; font-size: 16px; text-align: center; margin-top: 36px; } .index-page .new-product .product-list .product-item .text .title { color: #000; } .index-page .new-product .product-list .product-item .text .desc { color: #1d1d1d; margin-top: 9px; } .index-page .new-product .more { margin-top: 71px; width: 102px; height: 39px; color: #bb0007; font-family: PingFang SC; font-size: 16px; font-style: normal; font-weight: 400; line-height: normal; border: 1px solid #bb0007; display: block; margin-left: auto; margin-right: auto; text-align: center; line-height: 39px; white-space: nowrap; position: relative; } .index-page .new-product .more::before { content: ''; position: absolute; left: 0; top: 0; width: 0; height: 100%; background-color: #bb0007; transition: width 0.45s; z-index: -1; } .index-page .new-product .more:hover { color: #fff; } .index-page .new-product .more:hover::before { width: 100%; } .index-page .news-center { /* ?伴?诲??琛 */ /* ?伴?诲?绀轰富浣?*/ } .index-page .news-center .news-list { display: flex; justify-content: space-between; margin-top: 58px; } .index-page .news-center .news-list .news-item { width: 31.6%; } .index-page .news-center .news-list .news-item:hover img { transform: scale(1.2); } .index-page .news-center .news-list .news-item:hover p { color: #0168b7; } .index-page .news-center .news-list .news-item .img { width: 100%; height: 244px; overflow: hidden; } .index-page .news-center .news-list .news-item .img img { width: 100%; height: 100%; object-fit: cover; object-position: center; transition: all 0.45s; } .index-page .news-center .news-list .news-item p { width: 100%; color: #1d1d1d; font-family: PingFang SC; font-size: 20px; font-style: normal; font-weight: 900; line-height: normal; margin-top: 17px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; text-overflow: ellipsis; overflow: hidden; } .index-page .news-center .new-show { /* ??棰???瀛?锛???? */ /* 涓??瑰?炬???哄?? */ /* 涓??逛俊???哄?? */ } .index-page .news-center .new-show .head-box { display: flex; justify-content: space-between; align-items: center; padding-bottom: 15.5px; border-bottom: 1px solid #e6e6e6; margin-bottom: 32px; } .index-page .news-center .new-show .head-box .title { color: #1d1d1d; font-size: 24px; font-style: normal; font-weight: 900; line-height: normal; position: relative; padding-left: 14px; } .index-page .news-center .new-show .head-box .title::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 6px; height: 24px; background-color: #0168b7; } .index-page .news-center .new-show .head-box .more { color: #666; font-size: 14px; font-style: normal; font-weight: 400; line-height: normal; } .index-page .news-center .new-show .head-box .more:hover { color: #0168b7; } .index-page .news-center .new-show .top { display: flex; justify-content: space-between; margin-top: 119px; } .index-page .news-center .new-show .top .section { width: 45%; } .index-page .news-center .new-show .top .section .show-item { padding-right: 2.5px; display: flex; justify-content: space-between; } .index-page .news-center .new-show .top .section .show-item .pic { width: 72px; height: 72px; flex-shrink: 0; overflow: hidden; } .index-page .news-center .new-show .top .section .show-item .pic img { width: 100%; height: 100%; object-fit: cover; object-position: center; transition: 0.45s ease; } .index-page .news-center .new-show .top .section .show-item .text { width: 84%; } .index-page .news-center .new-show .top .section .show-item .text .title { color: #1d1d1d; font-family: PingFang SC; font-size: 16px; font-style: normal; font-weight: 900; line-height: normal; margin-bottom: 6px; } .index-page .news-center .new-show .top .section .show-item .text .desc { color: #444; font-family: PingFang SC; font-size: 14px; font-style: normal; font-weight: 400; line-height: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; text-overflow: ellipsis; overflow: hidden; } .index-page .news-center .new-show .top .section .show-item:hover { cursor: pointer; } .index-page .news-center .new-show .top .section .show-item:hover img { transform: scale(1.2); } .index-page .news-center .new-show .top .section .show-item:hover .text .title { color: #0168b7; } .index-page .news-center .new-show .top .section .show-item:nth-of-type(1) { margin-bottom: 24px; } .index-page .news-center .new-show .bottom { margin-top: 49px; display: flex; justify-content: space-between; } .index-page .news-center .new-show .bottom .section { width: 45%; } .index-page .news-center .new-show .bottom .section .section-item { display: flex; align-items: center; justify-content: space-between; margin-top: 20px; } .index-page .news-center .new-show .bottom .section .section-item:nth-of-type(1) { margin-top: 0; } .index-page .news-center .new-show .bottom .section .section-item:hover .left { color: #0168b7; } .index-page .news-center .new-show .bottom .section .section-item .left { color: #1d1d1d; font-size: 16px; font-style: normal; font-weight: 400; line-height: normal; max-width: 80%; padding-right: 15px; } .index-page .news-center .new-show .bottom .section .section-item .right { color: #838383; font-size: 14px; font-style: normal; font-weight: 400; line-height: normal; max-width: 20%; text-align: right; } .index-page .choose { margin-top: 122px; margin-bottom: 122px; } .index-page .choose .choose-list { margin-top: 65px; display: flex; justify-content: space-between; } .index-page .choose .choose-list .choose-item { width: 24.6%; } .index-page .choose .choose-list .choose-item:hover img { transform: scale(1.2); } .index-page .choose .choose-list .choose-item .pic { width: 100%; height: 222px; overflow: hidden; } .index-page .choose .choose-list .choose-item .pic img { width: 100%; height: 100%; object-fit: cover; object-position: center center; transition: 0.5s; } .index-page .choose .choose-list .choose-item .text { text-align: center; margin-top: 15px; width: 100%; /* ?规??峰?澶??? */ } .index-page .choose .choose-list .choose-item .text .top span:nth-child(1) { color: #0168b7; font-size: 52px; font-style: normal; font-weight: 900; line-height: normal; } .index-page .choose .choose-list .choose-item .text .top span:nth-child(2) { color: #0168b7; font-family: PingFang SC; font-size: 24px; font-style: normal; font-weight: 900; line-height: normal; vertical-align: top; } .index-page .choose .choose-list .choose-item .text .bottom { color: #292929; font-family: PingFang SC; font-size: 15px; font-style: normal; font-weight: 400; line-height: normal; margin-top: 5px; } .index-page .choose .choose-list .choose-item .text.custom .top span:nth-child(2) { font-size: 16px; vertical-align: baseline; } /* ??蹇???200px锛??存??250寮?濮?璋????冲? */ @media (max-width: 1250px) { .index-page .new-product { padding-top: 65px; padding-bottom: 65px; } .index-page .swiper1 .swiper1-left, .index-page .swiper1 .swiper1-right { width: 45px; height: 45px; } .index-page .swiper1 .swiper1-left img, .index-page .swiper1 .swiper1-right img { width: 50%; height: 50%; object-fit: contain; object-position: center; } .index-page .new-product .product-list { flex-wrap: wrap; justify-content: center; } .index-page .new-product .product-list .product-item { width: 45%; } .index-page .news-center .new-show .top .section { width: 47%; } .index-page .news-center .new-show .top .section .show-item .text { padding-left: 10px; } .index-page .choose .choose-list { flex-wrap: wrap; } .index-page .choose .choose-list .choose-item { width: 47%; } .index-page .choose .choose-list .choose-item:nth-of-type(n + 3) { margin-top: 35px; } } @media (max-width: 992px) { .index-page .swiper1 .swiper-pagination { bottom: 25px; } .index-page .news-center .news-list { flex-wrap: wrap; } .index-page .news-center .news-list .news-item { width: 45%; } .index-page .news-center .news-list .news-item:nth-of-type(3) { margin-top: 35px; } } /* 寮?濮?杩??ョЩ?ㄧ????? */ @media (max-width: 768px) { /* 璋??存ā???磋? */ .index-page .new-product { padding-top: 45px; padding-bottom: 70px; } .index-page .choose { margin-top: 45px; margin-bottom: 45px; } /* 璋??村?浣? */ .index-page .title-box .title { font-size: 24px; } .index-page .swiper1 .swiper-slide .phone-banner { display: block; } .index-page .swiper1 .swiper-slide .pc-banner { display: none; } .index-page .swiper1 .swiper1-left { left: 25px; } .index-page .swiper1 .swiper1-right { right: 25px; } .index-page .new-product .product-list .product-item { width: 50%; height: auto; } .index-page .new-product .product-list .product-item:nth-child(n + 3) { margin-top: 25px; } .index-page .new-product .product-list { margin-top: 35px; } .index-page .new-product .product-list .product-item .text { margin-top: 15px; } .index-page .news-center .news-list { margin-top: 45px; } .index-page .news-center .news-list .news-item { width: 100%; text-align: center; /* ?惧?楂?搴﹂??? */ } .index-page .news-center .news-list .news-item .img { height: auto; } .index-page .news-center .news-list .news-item p { font-size: 18px; } .index-page .news-center .news-list .news-item { margin-bottom: 25px; } .index-page .news-center .news-list .news-item p { font-size: 16px; margin-top: 12px; } .index-page .news-center .news-list .news-item:nth-of-type(3) { margin-top: 0; } .index-page .news-center .new-show .top { margin-top: 45px; } .index-page .news-center .new-show .top { flex-wrap: wrap; } .index-page .news-center .new-show .top .section { width: 100%; margin-bottom: 35px; } .index-page .news-center .new-show .bottom { flex-wrap: wrap; margin-top: 0; } .index-page .news-center .new-show .bottom .section { width: 100%; margin-bottom: 35px; } .index-page .choose .choose-list .choose-item { width: 47%; } .index-page .choose .choose-list .choose-item .pic { height: auto; } .index-page .choose .choose-list .choose-item .text .top { display: flex; align-items: center; justify-content: center; } .index-page .choose .choose-list .choose-item .text .top span:nth-child(1) { font-size: 22px; } /* 淇?? */ .index-page .news-center .new-show .top .section .show-item .text { width: 79%; } } @media (max-width: 576px) { .index-page .title-box .title { font-size: 20px; } .index-page .news-center .new-show .head-box .title { font-size: 20px; } .index-page .news-center .news-list .news-item p { font-size: 14px; line-height: 1.5; text-align: justify; } .index-page .title-box .title { margin: 0 15px; } .index-page .choose .choose-list .choose-item .text .bottom { /* white-space: wrap; */ white-space: normal !important; text-align: center; line-height: 1.5; margin-top: 0; font-size: 16px; } .index-page .title-box .title { padding: 0 10px; white-space: nowrap; } /* 淇?? */ /* .index-page .swiper1 { margin-top: 65px; } */ }