.home-banner { width: 100%; /* height: 51.0416vw; */ height: 100vh; /* min-width: 11.84rem; */ /* min-height: 3.996rem; */ } .home-banner .pc_show { height: 100%; } .home-banner .swiper-slide { width: 100%; height: 100%; position: relative; } .home-banner .swiper-slide img { width: 100%; height: 100%; object-fit: cover; } .home-banner .banner-popup { position: absolute; width: 100%; height: 100%; top: 0; left: 0; text-align: center; display: flex; align-items: center; justify-content: center; } .home-banner .banner-popup .tit1, .home-banner .banner-popup .tit2, .home-banner .banner-popup .btn1 { opacity: 0; transform: translateY(-0.4rem); transition: all 1s; } .home-banner .banner-popup .tit1 { /* margin-top: 19.5%; */ font-size: 0.5rem; font-weight: bold; color: #FFFFFF; } .home-banner .banner-popup .tit2 { font-size: 0.28rem; font-weight: 300; margin-top: 2%; color: #FFFFFF; transition-delay: 0.4s; -moz-transition-delay: 0.4s; /* Firefox 4 */ -webkit-transition-delay: 0.4s; /* Safari 和 Chrome */ -o-transition-delay: 0.4s; /* Opera */ } .home-banner .banner-popup .btn1 { margin-top: 2%; transition-delay: 0.8s; -moz-transition-delay: 0.8s; /* Firefox 4 */ -webkit-transition-delay: 0.8s; /* Safari 和 Chrome */ -o-transition-delay: 0.8s; /* Opera */ } .home-banner .swiper-slide-active .banner-popup .tit1, .home-banner .swiper-slide-active .banner-popup .tit2, .home-banner .swiper-slide-active .banner-popup .btn1 { opacity: 1; transform: translateY(0); } .home-banner .swiper-container-banner { width: 100%; height: 100%; } .home-banner .swiper-banner-pagination { position: absolute; z-index: 99; text-align: center; } .home-banner .swiper-banner-pagination .swiper-pagination-bullet { background: #FFFFFF; opacity: 0.6; } .home-banner .swiper-banner-pagination .swiper-pagination-bullet-active { background: #FFFFFF; opacity: 1; } .swiper-banner-pagination-pc { position: absolute; bottom: 0.4rem !important; z-index: 9; text-align: center; } .swiper-banner-pagination-pc .swiper-pagination-bullet { width: 0.16rem; height: 0.16rem; background: #FFFFFF; opacity: 0.3; border-radius: 0.1rem; transition: all 0.3s; margin: 0 0.16rem !important; } .swiper-banner-pagination-pc .swiper-pagination-bullet.swiper-pagination-bullet-active { width: 0.69rem; opacity: 0.9; } .home-product { padding-top: 4.79166vw; padding-bottom: 6.875vw; text-align: center; } .home-product .head .tit-en { font-size: 0.72rem; font-weight: bold; line-height: 1.2; color: #E5E5E5; } .home-product .head .tit { font-size: 0.36rem; font-weight: bold; line-height: 1.2; color: #333333; } .home-product .head .desc { font-size: 0.18rem; font-weight: 400; line-height: 1.8; color: #333333; margin-top: 0.16rem; } .home-product .types { display: flex; margin-top: 0.48rem; } .home-product .types .item { width: 33.33333%; background: #DCDCDC; height: 26.1979vw; transition: all 0.6s; } .home-product .types .item:nth-child(2) { background: #F2F2F2; } .home-product .types .item:hover { background: #0A85D3; } .home-product .types .item .en { font-size: 2.7604vw; font-weight: bold; line-height: 1.2; margin-top: 20%; color: #000000; opacity: 0.1; } .home-product .types .item .tit { font-size: 1.35416vw; font-weight: bold; line-height: 1.5; color: #333333; margin-top: 2%; } .home-product .types .item .icon { width: 6.5104vw; height: 6.5104vw; display: inline-flex; align-items: center; margin-top: 6%; } .home-product .types .item .icon img { width: 100%; } .home-profile { position: relative; background: #EFF9FF; padding-top: 7.34375vw; padding-bottom: 14.84375vw; overflow: hidden; } .home-profile .earth { position: absolute; bottom: 0; right: -20vw; width: 50vw; opacity: 0; transition: all 1s; } .home-profile.active .earth { opacity: 1; right: 0; } .home-profile .info { padding-right: 26vw; position: relative; z-index: 9; } .home-profile .tit-en { font-size: 0.68rem; font-weight: bold; line-height: 1.2; color: #000000; opacity: 0.1; } .home-profile .tit { font-size: 0.36rem; font-weight: bold; line-height: 1.2; color: #333333; } .home-profile .detail { font-size: 0.18rem; font-weight: 400; line-height: 2; color: #333333; margin-top: 0.25rem; margin-bottom: 0.25rem; } .home-profile .detail p+p { margin-top: 1.5em; } .home-cover .item { width: 25%; float: left; height: 51.0416vw; display: block; position: relative; cursor: pointer; } .home-cover .item .bg { position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 0; object-fit: cover; display: block; } .home-cover .item::after { content: ''; position: absolute; width: 100%; height: 0; bottom: 0; left: 0; z-index: 1; transition: all 0.5s; background: rgba(10, 133, 211, 0.43); } .home-cover .item:hover::after { height: 100%; } .home-cover .item .info { position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 2; text-align: center; } .home-cover .item .info .tit { margin-top: 70%; font-size: 1.875vw; font-weight: bold; line-height: 1.2; color: #FFFFFF; } .home-cover .item .info .icon { margin-top: 12%; width: 7.8125vw; } .home-news { padding-top: 6vw; padding-bottom: 0; text-align: center; position: relative; } .home-news .footer { position: absolute; bottom: 0; left: 0; width: 100%; } .home-news .tit-en { font-size: 0.68rem; font-weight: bold; line-height: 1.2; color: #000000; opacity: 0.1; } .home-news .tit { font-size: 0.34rem; font-weight: bold; line-height: 1.2; color: #333333; position: relative; top: -1.1em; } .home-news-list { display: flex; justify-content: space-between; margin-top: 3.90625vw; } .home-news-list .item { width: calc(16vw + 90px); transition: all 1s; } .home-news-list .item .cover { width: 100%; height: calc(12vw + 56px); overflow: hidden; position: relative; } .home-news-list .item .cover::after { content: ''; position: absolute; width: 100%; height: 100%; left: 0; top: 0; background: #000000; opacity: 0; transition: all 1s; } .home-news-list .item:hover .cover::after { opacity: 0.1; } .home-news-list .item .cover img { width: 100%; height: 100%; object-fit: cover; display: block; transition: all 1s; } .home-news-list .item:hover .cover img { transform: scale(1.1); } .home-news-list .item .name { font-size: 0.18rem; font-weight: bold; line-height: 1.2; color: #333333; margin-top: 3%; word-break: break-all; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; } .home-news-list .item:hover .name { color: #0A85D3; } .home-news-list .item .desc { margin-top: 2%; font-size: 0.14rem; font-weight: 400; line-height: 1.6; color: #999999; word-break: break-all; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .home-news-container { display: flex; justify-content: space-between; margin-top: 0; } .home-news-list2 { flex: 1; } .home-news-list2 .item { display: flex; transition: all 0.3s; border-radius: 6px; border: 1px solid #fff; } .home-news-list2 .item+.item { margin-top: 0.25rem; } .home-news-list2 .item .date { width: 1.58rem; height: 0.8rem; background: #F8F8F8; opacity: 1; border-radius: 5px 0px 0px 5px; text-align: center; font-weight: 400; transition: all 0.3s; padding-top: 0.1rem; } .home-news-list2 .item .date .day { font-size: 0.24rem; color: #333; } .home-news-list2 .item .date .year { font-size: 0.2rem; color: #999; } .home-news-list2 .item .info { flex: 1; font-weight: 400; padding-left: 0.2rem; text-align: left; padding-top: 0.1rem; } .home-news-list2 .item .info .tit1 { font-size: 0.24rem; color: #333333; word-break: break-all; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; transition: all 0.3s; } .home-news-list2 .item .info .desc { font-size: 0.16rem; color: #999999; margin-top: 0.05rem; word-break: break-all; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; } .home-news-cover { width: 5.5rem; margin-left: 0.5rem; } .home-news-cover img { width: 100%; } .home-news-list2 .item:hover { border: 1px solid #0A85D3; } .home-news-list2 .item:hover .date { background: #0A85D3; } .home-news-list2 .item:hover .date .day, .home-news-list2 .item:hover .date .year { color: #fff; } .home-news-list2 .item:hover .info .tit1 { color: #0A85D3; } /** 整屏切换 **/ .body-pc body, .body-pc { padding: 0; margin: 0; height: 100%; overflow: hidden; } .body-pc .main { height: 100vh; width: 100%; /* overflow: hidden; */ } .body-pc .section { height: 100vh; width: 100%; overflow: hidden; transition: opacity 0.6s; } .body-pc .home-product, .body-pc .home-profile, .body-pc .home-news { padding-top: calc(80px + 4vh); } .body-pc .home-cover .item { height: 100vh; } /** 过度动画 **/ .body-pc .home-banner .swiper-slide-active .banner-popup .tit1, .body-pc .home-banner .swiper-slide-active .banner-popup .tit2, .body-pc .home-banner .swiper-slide-active .banner-popup .btn1 { opacity: 0; transform: translateY(-0.4rem); } .body-pc .home-product .head .tit-en, .body-pc .home-profile .tit-en, .body-pc .home-news .tit-en, .body-pc .home-cover .item .info .tit { transform: translateY(-1rem); transition: all 1s; } .body-pc .home-cover .item .info .tit { opacity: 0; transition: all 2s; } .body-pc .home-product .head .tit, .body-pc .home-profile .tit, .body-pc .home-cover .item .info .icon, .body-pc .home-news .tit { transform: translateY(-1rem); transition: all 1s; transition-delay: 0.1s; -moz-transition-delay: 0.1s; /* Firefox 4 */ -webkit-transition-delay: 0.1s; /* Safari 和 Chrome */ -o-transition-delay: 0.1s; /* Opera */ opacity: 0; } .body-pc .home-product .head .desc, .body-pc .home-product .types, .body-pc .home-profile .detail, .body-pc .home-profile .btn-more, .body-pc .home-news .home-news-cover, .body-pc .home-news .home-news-list2 .item { transform: translateY(1rem); transition: all 1s; opacity: 0; } .body-pc .home-product .types, .body-pc .home-profile .btn-more, .body-pc .home-news .home-news-list2 .item:nth-child(2) { transition-delay: 0.1s; -moz-transition-delay: 0.1s; -webkit-transition-delay: 0.1s; -o-transition-delay: 0.1s; } .body-pc .home-news .home-news-list2 .item:nth-child(3) { transition-delay: 0.2s; -moz-transition-delay: 0.2s; -webkit-transition-delay: 0.2s; -o-transition-delay: 0.2s; } .body-pc .home-news .home-news-list2 .item:nth-child(4) { transition-delay: 0.3s; -moz-transition-delay: 0.3s; -webkit-transition-delay: 0.3s; -o-transition-delay: 0.3s; } .body-pc .home-banner.active .swiper-slide-active .banner-popup .tit1, .body-pc .home-banner.active .swiper-slide-active .banner-popup .tit2, .body-pc .home-banner.active .swiper-slide-active .banner-popup .btn1 { opacity: 1; transform: translateY(0); } .body-pc .home-product.active .head .tit-en, .body-pc .home-profile.active .tit-en, .body-pc .home-news.active .tit-en, .body-pc .home-cover.active .item .info .tit { transform: translateY(0); } .body-pc .home-cover.active .item .info .tit { opacity: 1; } .body-pc .home-product.active .head .tit, .body-pc .home-profile.active .tit, .body-pc .home-cover.active .item .info .icon, .body-pc .home-news.active .tit { transform: translateY(0); opacity: 1; } .body-pc .home-product.active .head .desc, .body-pc .home-product.active .types, .body-pc .home-profile.active .detail, .body-pc .home-profile.active .btn-more, .body-pc .home-news.active .home-news-cover, .body-pc .home-news.active .home-news-list2 .item { transform: translateY(0); opacity: 1; } @media screen and (max-width: 1440px) { .home-banner .banner-popup .tit1 { font-size: 0.4rem; } .home-banner .banner-popup .tit2 { font-size: 0.2rem; } .home-product .head .tit-en { font-size: 0.6rem; } .home-product .head .tit { font-size: 0.3rem; } .home-product .head .desc { font-size: 0.16rem; } .home-product .types .item { height: 29vw; } .home-product .types .item .en { font-size: 3vw; } .home-product .types .item .tit { font-size: 1.7vw; } .home-product .types .item .icon { width: 7vw; height: 7vw; } .home-profile .earth { /* width: 70vw; */ } .home-profile .info { padding-right: 20vw; } .home-profile .tit-en { font-size: 0.6rem; } .home-profile .tit { font-size: 0.3rem; } .home-profile .detail { font-size: 0.16rem; margin-top: 0.2rem; margin-bottom: 0.2rem; } .home-news .tit-en { font-size: 0.6rem; } .home-news .tit { font-size: 0.3rem; } .home-news-list .item { width: 26vw; transition: all 1s; } .home-news-list .item .cover { width: 100%; height: 18vw; overflow: hidden; position: relative; } .home-news-list2 .item+.item { margin-top: 0.16rem; } .home-news-list2 .item .date { width: 1.08rem; height: 0.6rem; padding-top: 0.05rem; } .home-news-list2 .item .date .day { font-size: 0.2rem; } .home-news-list2 .item .date .year { font-size: 0.16rem; margin-top: 0; } .home-news-list2 .item .info { padding-left: 0.16rem; padding-top: 0.06rem; } .home-news-list2 .item .info .tit1 { font-size: 0.2rem; } .home-news-list2 .item .info .desc { font-size: 0.14rem; margin-top: 0; } .home-news-cover { width: 4.06rem; margin-left: 0.5rem; } .body-pc .home-product, .body-pc .home-profile, .body-pc .home-news { padding-top: calc(70px + 4vh); } } @media screen and (max-width: 1200px) { .home-product .types .item { height: 31vw; } } @media screen and (max-height:700px) { .body-pc .home-product, .body-pc .home-profile, .body-pc .home-news { padding-top: calc(70px + 2vh); } .body-pc .home-product .types { margin-top: 3vh; } .body-pc .home-product .types .item { height: 50vh; } .body-pc .home-product .types .item .en { margin-top: 10vh; } .body-pc .home-product .types .item .icon { margin-top: 2vh; } .body-pc .home-profile .detail { margin-top: 3vh; margin-bottom: 3vh; line-height: 1.8; } .body-pc .home-profile .detail p+p { margin-top: 0.8em; } .body-pc .home-news-container { margin-top: -0.2rem; } .body-pc .home-news-cover { width: 46vh; } .body-pc .home-news-list2 .item .date { display: flex; align-items: center; justify-content: center; height: 0.32rem; } .body-pc .home-news-list2 .item .date .year { margin-left: 0.05rem; /* padding-top: 0.02rem; */ } .body-pc .home-news-list2 .item .info .tit1 { font-size: 0.16rem; } .body-pc .home-news-list2 .item .info .desc { display: none; } } /* 移动设备 */ @media screen and (max-width:900px) { .home-banner { width: 100%; height: 2.1rem; min-width: auto; min-height: auto; } .home-banner .swiper-slide img { height: 2.1rem; } .home-banner .banner-popup .tit1 { font-size: 0.18rem; /* margin-top: 15%; */ } .home-banner .banner-popup .tit2 { font-size: 0.13rem; margin-top: 3%; transition-delay: 0.6s; -moz-transition-delay: 0.6s; /* Firefox 4 */ -webkit-transition-delay: 0.6s; /* Safari 和 Chrome */ -o-transition-delay: 0.6s; /* Opera */ } .home-banner .banner-popup .btn1 { margin-top: 3%; transition-delay: 1.2s; -moz-transition-delay: 1.2s; /* Firefox 4 */ -webkit-transition-delay: 1.2s; /* Safari 和 Chrome */ -o-transition-delay: 1.2s; /* Opera */ } .home-product { padding-top: 0.4rem; padding-bottom: 0.4rem; } .home-product .head .tit-en { font-size: 0.32rem; } .home-product .head .tit { font-size: 0.18rem; } .home-product .head .desc { font-size: 0.14rem; } .home-product .types { margin-top: 0.25rem; } .home-product .types .item { height: 37vw; } .home-product .types .item .en { font-size: 3.6vw; } .home-product .types .item .tit { font-size: 3.4vw; margin-top: 10%; } .home-product .types .item .icon { width: 9vw; height: 9vw; margin-top: 10%; } .home-profile { padding-top: 0.4rem; } .home-profile .info { padding-right: 0; } .home-profile .tit-en { font-size: 0.32rem; } .home-profile .tit { font-size: 0.18rem; } .home-profile .detail { font-size: 0.14rem; } .home-profile .earth { width: 100vw; right: -20vw; /* right: 0; */ opacity: 1; } .home-cover .item .info .tit { margin-top: 70%; font-size: 2.875vw; font-weight: bold; line-height: 1.2; color: #FFFFFF; } .home-cover .item .info .icon { margin-top: 12%; width: 10vw; } .home-news { padding-top: 0.4rem; padding-bottom: 0; } .home-news .footer { position: static; } .home-news .tit-en { font-size: 0.32rem; } .home-news .tit { font-size: 0.18rem; } .home-news-list .item { width: 32%; } .home-news-list .item .cover { height: 20vw; } .home-news-list .item .name { font-size: 0.14rem; -webkit-line-clamp: 2; margin-top: 8%; font-weight: 500; } .home-news-list .item .desc { margin-top: 5%; font-size: 0.12rem; line-height: 1.4; } .home-news-container { display: block; position: relative; padding-top: 1.2rem; margin-bottom: 0.4rem; } .home-news-cover { width: 100%; margin-left: 0; position: absolute; top: 0; left: 0; } .home-news-cover img { height: 1rem; object-fit: cover; } .home-news-list2 .item .date { height: 0.5rem; width: 0.8rem; line-height: 1.4; } .home-news-list2 .item .date .day { font-size: 0.16rem; } .home-news-list2 .item .date .year { font-size: 0.13rem; } .home-news-list2 .item .info { padding-left: 0.1rem; padding-top: 0.05rem; } .home-news-list2 .item .info .tit1 { font-size: 0.15rem; } .home-news-list2 .item .info .desc { font-size: 0.12rem; margin-top: 0.03rem; } }