body { opacity: 1; background: #fff; } * { box-sizing: border-box; } .clearfix:after { content: ""; display: block; height: 0; clear: both; visibility: hidden; } .clearfix { *zoom: 1; padding-bottom: 0; } .ellipsis { overflow: hidden; text-overflow:ellipsis; white-space: nowrap; } .product-center { max-width: 1400px; margin: 0 auto; width: 92%; position: relative; padding-bottom: 120px; } .product-banner { width: 100%; height: 419px; position: relative; /*margin-bottom: 98px;*/ /*margin-bottom: 30px;*/ } .product-banner .search-cnt { width: 100%; text-align: center; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .product-banner .search-cnt .search-title { font-size: 36px; line-height: 40px; font-weight: 700; color: #fff; } .product-banner .search-cnt .input-box { width: 92%; max-width: 646px; position: relative; height: 45px; margin: 0 auto; margin-top: 64px; } .product-banner .search-cnt .input-box input { width: 100%; height: 45px; border: none; padding: 0px 56px 0 16px; font-size: 14px; } .product-banner .search-cnt .input-box .iconfont { position: absolute; right: 16px; top: 10px; font-size: 24px; line-height: 24px; color: #999; cursor: pointer; background: none; border: none; } .product-banner .search-cnt .input-box .iconfont:focus { outline: none; } .product-center .img-box { height: 170px; margin-bottom: 30px; } .product-center .img-box img { width: 100%; } .product-center-mobile { display: none; } /* pc绔牱寮 */ .product-center .product-center-list { margin-top: 46px; } .product-center .product-center-list .swiper-product .swiper-slide { font-size: 18px; font-weight: 600; line-height: 40px; width: auto; cursor: pointer; padding: 16px 70px 0 70px; } .product-center .product-center-list .swiper-container-free-mode>.swiper-wrapper { padding-bottom: 12px; } .product-center .product-center-list .swiper-product .product-active { color: #cc0000; } .product-center .product-center-list .swiper-product .product-active::after { content: ""; width: 100%; height: 9px; position: absolute; top: 61px; right: 0; background: url(../home_new_image/ai-line.png) no-repeat; transform:rotate(180deg); background-position: center; } .product-center .product-center-list .swiper-product .swiper-slide:hover { color: #cc0000; } .product-center .product-center-list .swiper-product .product-content { display: none; position: relative; border-top: 2px solid #dadada; } .product-center .product-center-list .swiper-product .product-content .ul-box { background-color: #f1f1f1; display: flex; flex-wrap: wrap; padding: 40px 40px 15px 40px; } .product-center .product-center-list .swiper-product .product-content .ul-box li { width: 14.2%; font-size: 15px; line-height: 26px; padding: 0 5px; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; margin-bottom: 25px; } .product-center .product-center-list .swiper-product .product-content .ul-box li a { color: #333; transition: all 0.3s; } .product-center .product-center-list .swiper-product .product-content .ul-box li a:hover { color: #cc0000; } .product-center .product-center-list .swiper-product .product-content .slide-content-active { display: block; } .product-center .product-center-list .swiper-product .product-prev, .product-center .product-center-list .swiper-product .product-next { background-image: none; font-size: 20px; font-weight: 600; color: #bfbfbf; z-index: 9; } .product-center .product-center-list .swiper-product .product-prev:hover, .product-center .product-center-list .swiper-product .product-next:hover { color: #cc0000; } .product-center .product-center-list .swiper-product .product-prev:focus, .product-center .product-center-list .swiper-product .product-next:focus { outline: none; } .product-center .product-center-list .swiper-product .product-prev { position: absolute; top: 16px; left: 0; background: #fff; padding-right: 35px; } .product-center .product-center-list .swiper-product .product-next { position: absolute; top: 16px; right: 0; left: auto; background: #fff; padding-left: 35px; } .product-center .product-center-list .swiper-product .pc-product-disable { display: none; } @media screen and (max-width: 1440px) { .product-banner { height: 310px; } .product-banner .search-cnt .input-box { margin-top: 40px; } } @media screen and (max-width: 1024px) { .clearfix { padding-bottom: 0; } .product-wrap h2 { margin: 40px 0; } .product-banner .search-cnt .search-title { font-size: 24px; line-height: 32px; } .product-center .product-center-list .swiper-product .swiper-slide { font-size: 16px; padding: 16px 24px 0 24px; } .product-center .product-center-list .swiper-product .product-content .ul-box li { font-size: 16px; line-height: 24px; } } @media screen and (max-width: 768px) { .product-center-list { display: none; } .product-center-mobile { display: block; margin-top: 30px; } .product-center { padding: 0 0 40px 0; } .product-center .img-box { height: 120px; } .product-center-mobile .mobile-ul li .title-box { background-color: #fff; box-shadow: 0px 0px 46px 5px rgba(51, 51, 51, 0.05); padding: 20px 35px; display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } .product-center-mobile .mobile-ul li .title-box .title { font-size: 16px; line-height: 26px; font-weight: 600; margin-right: 15px; } .product-center-mobile .mobile-ul li .title-box .iconfont { font-size: 20px; line-height: 26px; } .product-center-mobile .mobile-list { background-color: #f5f5f5; padding: 20px 60px; } .product-center-mobile .mobile-list li { margin-bottom: 15px; } .product-center-mobile .mobile-list li a { color: #333; font-size: 14px; line-height: 22px; } .product-center-mobile .mobile-ul .mobile-active .title { color: #cc0000; } .product-center-mobile .mobile-ul .mobile-active .iconfont { transform: rotate(180deg); -webkit-transform: rotate(180eg); } .product-banner { height: 220px; /*margin-bottom: 40px;*/ } .product-banner .search-cnt .search-title { font-size: 18px; line-height: 26px; } .product-banner .search-cnt .input-box { margin-top: 36px; } .product-banner .search-cnt .input-box input { height: 40px; } .product-banner .search-cnt .input-box .iconfont { top: 8px; } }