.research-banner-popup { position: absolute; width: 100%; height: 100%; top: 0; left: 0; overflow: hidden; } .research-banner-popup .tit-group { margin-top: 17%; display: inline-block; } .research-banner-popup .tit1 { font-size: 3.75vw; font-weight: bold; line-height: 1.2; color: #333; opacity: 0.36; } .research-banner-popup .tit2 { font-size: 2.5vw; font-weight: bold; color: #333; line-height: 1.2; text-align: center; margin-top: -0.5em; } .research-list { padding-top: 0.32rem; } .research-item { float: left; cursor: pointer; transition: all 0.3s; width: 24%; margin-left: 1.33333%; padding: 1.04166vw; margin-top: 2.0833vw; } .research-item:nth-child(4n+1) { margin-left: 0; } .research-item:hover { box-shadow: 0 0.05rem 0.3rem rgba(0, 0, 0, 0.1); } .research-item .cover { width: 100%; height: 13.5416vw; overflow: hidden; } .research-item .cover img { width: 100%; height: 100%; object-fit: cover; transition: all 1s; } .research-item:hover .cover img { transform: scale(1.1); } .research-item .info { padding-top: 0.2rem; height: 1.05rem; } .research-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: 1; -webkit-box-orient: vertical; overflow: hidden; transition: all 0.3s; } .research-item:hover .info .tit { color: #0A85D3; } .research-item .info .desc { font-size: 0.14rem; font-weight: 400; color: #999; line-height: 1.4; word-break: break-all; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; transition: all 0.3s; margin-top: 0.06rem; } .research-item .time { font-size: 0.12rem; font-weight: 400; line-height: 1.2; color: #999; margin-top: 0.06rem; } /**技术创新**/ .research-ti { padding-top: 0.8rem; padding-bottom: 1rem; text-align: center; } .research-ti .head .tit-en { font-size: 0.32rem; color: #EEEEEE; } .research-ti .head .tit { font-weight: bold; font-size: 0.24rem; color: #333; margin-top: 0.05rem; } .research-body { margin-top: 0.55rem; position: relative; width: auto; margin-left: auto; margin-right: auto; text-align: left; display: inline-block; } .research-body .bg { width: 8.82rem; /* height: 4.97rem; */ } .research-body .p01, .research-body .p02, .research-body .p03, .research-body .p04 { position: absolute; } .research-body .p-relative { position: relative; } .research-body .icon { position: absolute; top: 0; width: 1.2rem; } .research-body .info { padding-top: 0.1rem; } .research-body .info .tit { font-weight: bold; color: #333333; font-size: 0.18rem; } .research-body .info .desc { font-size: 0.18rem; color: #777; margin-top: 0.05rem; } .research-body .p01 { top: 0; right: 76%; width: 3.3rem; } .research-body .p02 { top: 50.70422%; right: 76.2%; width: 3.5rem; } .research-body .p03 { top: 11.066398%; left: 75%; width: 4.71rem; } .research-body .p04 { top: 69.818913%; left: 63%; width: 4.7rem; } .research-body .p01 .p-relative, .research-body .p02 .p-relative { padding-right: 1.4rem; } .research-body .p01 .info, .research-body .p02 .info { text-align: right; } .research-body .p01 .icon, .research-body .p02 .icon { right: 0; } .research-body .p03 .p-relative, .research-body .p04 .p-relative { padding-left: 1.4rem; } .research-body .p03 .icon, .research-body .p04 .icon { left: 0; } .research-ri { background: url(../img/research-bg11.jpg) no-repeat; background-size: cover; background-position: 50% 50%; width: 100%; height: 8.58rem; text-align: center; padding-top: 2.5rem; } .research-ri .head .tit-en { font-size: 0.32rem; color: #FFFFFF; opacity: 0.55; } .research-ri .head .tit { font-weight: bold; font-size: 0.24rem; color: #333; margin-top: 0.05rem; } .research-ri .head .desc { font-size: 0.14rem; color: #333; margin-top: 0.12rem; line-height: 2; } .research-ri .tags { display: inline-block; margin-top: 0.22rem; } .research-ri .tags .item { width: 1.2rem; height: 0.8rem; background: #FFFFFF; border-radius: 0.4rem; color: #333; font-size: 0.16rem; display: inline-flex; float: left; align-items: center; justify-content: center; text-align: center; transition: background 0.6s; cursor: pointer; } .research-ri .tags .item span { line-height: 1.2; padding: 0 0.12rem; padding-top: 0.02rem; } .research-ri .tags .item+.item { margin-left: 0.4rem; } .research-ri .tags .item:hover { background: #0A85D3; color: #fff; } .research-rd { background: url(../img/research-bg21.jpg) no-repeat; background-size: cover; background-position: 50% 50%; width: 100%; height: 9rem; text-align: center; padding-top: 0.8rem; transition: all 0.6s; } .research-rd .head .tit-en { font-size: 0.32rem; color: #EEEEEE; /* opacity: 0.33; */ } .research-rd .head .tit { font-weight: bold; font-size: 0.24rem; color: #333; margin-top: 0.05rem; } .research-rd .types { margin-top: 0.4rem; } .research-rd .types .item { float: left; width: 16.66666%; height: 9.375vw; text-align: center; background: rgba(0, 0, 0, 0.14); transition: background 0.6s; cursor: pointer; } .research-rd .types .item+.item { border-left: 1px solid rgba(0, 0, 0, 0.05); } .research-rd .types .item.active { background: rgba(10, 133, 211, 0.89); } .research-rd .types .item .icon { width: 31.620%; margin-top: 12%; } .research-rd .types .item .name { font-size: 1.25vw; color: #fff; margin-top: 2%; } @media screen and (max-width: 1440px) { .research-banner-popup .tit1 { font-size: 4.25vw; } .research-banner-popup .tit2 { font-size: 3.2vw; } .research-item .cover { height: 15vw; } .research-item .info .tit { font-size: 0.16rem; } .research-ti .head .tit-en { font-size: 0.3rem; } .research-ti .head .tit { font-size: 0.2rem; } .research-body .bg { width: 57.71428vw; } .research-body .icon { width: 8.5714vw; } .research-body .p01 .p-relative, .research-body .p02 .p-relative { padding-right: 10vw; } .research-body .p03 .p-relative, .research-body .p04 .p-relative { padding-left: 10vw; } .research-body .info { padding-top: 0.5vw; } .research-body .info .tit { font-size: 0.16rem; } .research-body .info .desc { font-size: 0.14rem; } .research-body .p01, .research-body .p02, .research-body .p03, .research-body .p04 { max-width: 33.5714285vw; } .research-ri { padding-top: 2rem; height: 7rem; } .research-ri .head .tit-en { font-size: 0.3rem; } .research-ri .head .tit { font-size: 0.2rem; } .research-rd { height: 7.5rem; } .research-rd .head .tit-en { font-size: 0.3rem; } .research-rd .head .tit { font-size: 0.2rem; } .research-rd .types .item { height: 11vw; } .research-rd .types .item .name { font-size: 1.45vw; } } @media screen and (max-width: 1200px) { .research-rd { height: 6.5rem; } .research-rd .types .item { height: 12vw; } .research-rd .types .item .name { font-size: 1.55vw; } } @media screen and (max-width: 900px) { .research-banner-popup .tit1 { font-size: 7vw; } .research-banner-popup .tit2 { font-size: 5.2vw; } .research-list { padding-top: 0.25rem; } .research-item { width: 50%; margin-left: 0; padding: 0.1rem; } .research-item:nth-child(2n+1) { margin-left: 0; } .research-item .info { padding-top: 0.1rem; height: 0.95rem; } .research-item .cover { height: 24vw; } .research-item .info .tit { font-size: 0.14rem; } .research-item .time { font-size: 0.12rem; margin-top: 0.05rem; } .research-ti .head .tit-en { font-size: 0.2rem; } .research-ti .head .tit { font-size: 0.18rem; } .research-ti { padding-top: 0.4rem; padding-bottom: 0.4rem; } .research-body { margin-top: 0.25rem; width: 92%; } .research-body .bg { width: 100%; } .research-body .p01, .research-body .p02, .research-body .p03, .research-body .p04 { position: static; max-width: 100% !important; width: 100% !important; margin-top: 0.2rem; } .research-body .p-relative { padding-left: 0.6rem !important; padding-right: 0 !important; } .research-body .p01 .info, .research-body .p02 .info { text-align: left; } .research-body .icon { width: 0.5rem; right: auto; left: 0 !important; } .research-ri { padding-top: 0.5rem; height: 4rem; } .research-ri .head .tit-en { font-size: 0.2rem; } .research-ri .head .tit { font-size: 0.18rem; } .research-ri .tags .item { width: 1.57rem; height: 0.5rem; font-size: 0.13rem; } .research-ri .tags .item+.item { margin-left: 0; } .research-ri .tags .item:nth-child(2n) { margin-left: 0.3rem; } .research-ri .tags .item:nth-child(3), .research-ri .tags .item:nth-child(4) { margin-top: 0.2rem; } .research-rd { padding-top: 0.5rem; height: 7.5rem; height: 4.2rem; } .research-rd .head .tit-en { font-size: 0.2rem; } .research-rd .head .tit { font-size: 0.18rem; } .research-rd .types { margin-top: 0.25rem; } .research-rd .types .item { height: 0.9rem; width: 33.333%; margin-top: 0.1rem; } .research-rd .types .item .icon { width: 0.4rem; } .research-rd .types .item .name { font-size: 0.14rem; } .research-rd .types .item:nth-child(1), .research-rd .types .item:nth-child(2), .research-rd .types .item:nth-child(3) { margin-top: 0; } .research-rd .types .item:nth-child(4) { border-left: 0; } }