.product-banner-popup { position: absolute; width: 100%; height: 100%; top: 0; left: 0; padding-top: 17%; overflow: hidden; text-align: center; } .product-banner-popup .tit1 { /* margin-top: 17%; */ font-size: 3.75vw; font-weight: bold; line-height: 1.2; color: #fff; opacity: 0.6; } .product-banner-popup .tit2 { font-size: 2.5vw; font-weight: bold; color: #fff; line-height: 1.2; } .product-list { padding-top: 0.32rem; } .product-item { float: left; cursor: pointer; transition: all 0.3s; width: 32%; margin-left: 2%; } .product-item:nth-child(3n+2) { margin-left: 0; } .product-item:first-child { margin-left: 0; width: 100%; } /* .product-item:hover { box-shadow: 0 0.05rem 0.3rem rgba(0, 0, 0, 0.1); } */ .product-item+.product-item { margin-top: 2.0833vw; } .product-item .cover { width: 100%; height: 13.5416vw; overflow: hidden; } .product-item:first-child .cover { height: 17vw; } .product-item .cover img { width: 100%; height: 100%; object-fit: cover; transition: all 1s; } .product-item:hover .cover img { transform: scale(1.1); } .product-item .info { padding-top: 0.2rem; height: 1rem; } .product-item:first-child .info { height: .66rem; } .product-item .info .tit { font-size: 0.18rem; font-weight: 400; color: #333; line-height: 1.2; word-break: break-all; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; transition: all 0.3s; } .product-item:hover .info .tit { color: #0A85D3; } .product-item .time { font-size: 0.16rem; font-weight: 400; line-height: 1.2; color: #999; margin-top: 0.1rem; } .product-item:first-child .time { display: none; } .product-container { padding-top: 0.8rem; padding-bottom: 0.8rem; } .product-container .head { text-align: center; } .product-container .head .tit-en { font-size: 0.68rem; font-weight: bold; line-height: 1.2; color: #000000; opacity: 0.1; } .product-container .head .tit { font-size: 0.36rem; font-weight: bold; line-height: 1.2; color: #333333; } .product-container .head .desc { font-size: 0.18rem; line-height: 2; color: #333333; margin: 0 auto; margin-top: 0.1rem; max-width: 13.22rem; } .product-container-list { text-align: center; margin-top: 0.42rem; } .product-container-list .item { width: 32.5%; height: 17.1875vw; overflow: hidden; float: left; margin-left: 1.25%; } .product-container-list .item:nth-child(3n+1) { margin-left: 0; } .product-container-list .item .cover { width: 100%; height: 100%; object-fit: cover; transition: all 1s; } .product-container-list .item:hover .cover { transform: scale(1.1); } .product-container-list .item .qukuan { position: relative; } .product-container-list .item .titls{ display:block; position: absolute; height: 42px; line-height: 42px; text-align: center; background-color: #000; opacity: 0.5; width: 100%; bottom: 0; color:#fff; font-weight: bold; font-size: 24px; } .product-container-list .types { background: #FAFAFA; display: flex; align-items: center; justify-content: center; } .product-container-list .types:nth-of-type(4) { background: #DCDCDC; } .product-container-list .types:nth-of-type(6) { background: #EEEEEE; } .product-container-list .types .en { font-size: 2.1875vw; font-weight: bold; line-height: 1.2; margin-top: 10%; color: #000000; opacity: 0.1; } .product-container-list .types .tit { font-size: 1.25vw; font-weight: bold; line-height: 1.5; color: #333333; margin-top: 2%; } .product-container-list .types .icon { width: 3.125vw; height: 3.125vw; display: inline-flex; align-items: center; margin-top: 3%; } .product-container-list .types .icon img { width: 100%; } @media screen and (max-width: 1440px) { .product-banner-popup .tit1 { font-size: 4.25vw; } .product-banner-popup .tit2 { font-size: 3.2vw; } .product-item .cover { height: 17vw; } .product-item:first-child .cover { height: 20vw; } .product-item .info .tit { font-size: 0.16rem; } .product-container .head .tit-en { font-size: 0.6rem; } .product-container .head .tit { font-size: 0.3rem; } .product-container .head .desc { font-size: 0.16rem; } .product-container-list .item { height: 20vw; } .product-container-list .types .en { font-size: 3vw; } .product-container-list .types .tit { font-size: 1.5vw; } .product-container-list .types .icon { width: 4vw; height: 4vw; } } @media screen and (max-width: 1200px) { .product-container-list .item { height: 23vw; } } @media screen and (max-width: 900px) { .product-banner-popup .tit1 { font-size: 7vw; } .product-banner-popup .tit2 { font-size: 5.2vw; } .product-list { padding-top: 0.25rem; } .product-item { width: 48%; margin-left: 4%; } .product-item:first-child { margin-left: 0; width: 100%; } .product-item:nth-child(3n+2) { margin-left: 4%; } .product-item:nth-child(2n) { margin-left: 0; } .product-item .info { padding-top: 0.1rem; height: 0.75rem; } .product-item .cover { height: 24vw; } .product-item:first-child .cover { height: 28vw; } .product-item .info .tit { font-size: 0.14rem; } .product-item .time { font-size: 0.12rem; margin-top: 0.05rem; } .product-container { padding-top: 0.4rem; padding-bottom: 0.4rem; } .product-container .head .tit-en { font-size: 0.32rem; } .product-container .head .tit { font-size: 0.18rem; } .product-container .head .desc { font-size: 0.14rem; } .product-container-list .item { height: 26vw; } .product-container-list .types .en { font-size: 3.6vw; } .product-container-list .types .tit { font-size: 3vw; } .product-container-list .types .icon { width: 6vw; height: 6vw; } }