@font-face {
font-family: 'Helvetica CE 55 Roman Bold';
src: url(//cdn.nexabar.com/nexabar_www/default/static/fonts/Helvetica-Neue-CE-75-Bold.ttf);
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Helvetica CE 55 Roman';
src: url(//cdn.nexabar.com/nexabar_www/default/static/fonts/Helvetica-Neue-CE-55-Roman.ttf);
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Good Times';
src: url(//cdn.nexabar.com/nexabar_www/default/static/fonts/good-times-rg.ttf);
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'DINPro';
src: url(//cdn.nexabar.com/nexabar_www/default/static/fonts/DINPro-Regular.otf);
font-weight: normal;
font-style: normal;
font-display: swap;
}
.b-lazy {
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
.container-fluid {
background: #000;
}
.banner {
position: relative;
}
.banner .shop-btn {
display: none;
}
.banner img,
.part1 img,
.part3 img,
.part4 img,
.part5 img {
width: 100%;
}
.tit-con {
color: #ffffff;
}
.tit-con h1,
.tit-con h2,
.tit-con h3 {
font-family: "Good Times";
font-size: 0.5rem;
line-height: 0.55rem;
margin-bottom: 0.35rem;
}
.tit-con p {
font-family: "DINPro";
font-size: 0.3rem;
line-height: 0.36rem;
}
.proVideo {
height: 10.8rem;
display: flex;
align-items: center;
justify-content: center;
}
.proVideo .video-box {
width: 13.34rem;
height: 7.56rem;
box-sizing: content-box;
position: relative;
border: 0.05rem solid #fff;
box-shadow: 0 0 8px 9px #8b1d80;
}
.proVideo .video-box::after {
position: absolute;
display: block;
content: '';
width: 100%;
height: 100%;
border: 0.05rem solid #fff;
box-shadow: inset 0 0 8px 9px #8b1d80;
z-index: 2;
top: -0.05rem;
left: -0.05rem;
}
.proVideo .video-box .mask {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background-color: rgba(10, 22, 31, 0.8);
}
.proVideo .video-box .btn-play {
display: inline-block;
width: 1.32rem;
height: 1.32rem;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
cursor: pointer;
z-index: 3;
}
.proVideo .video {
width: 13.34rem;
height: 7.56rem;
object-fit: cover;
display: block;
}
.part1 {
height: 10.8rem;
padding-top: 1.42rem;
text-align: center;
}
.part1 .tit {
width: 4.13rem;
display: block;
margin: 0 auto 0.22rem;
}
.part1 .pro {
width: 11.94rem;
}
.part1 .features-box {
width: 11.94rem;
height: 6.27rem;
margin: 0 auto;
position: relative;
}
.part1 .features-item {
position: relative;
float: left;
}
.part1 .features-item p {
position: absolute;
font-family: "Helvetica CE 55 Roman Bold";
font-size: 0.34rem;
line-height: 0.3876rem;
color: #ffffff;
text-align: left;
}
.part1 .features-item:nth-child(1) .features-bg {
width: 2.4rem;
height: 3.44rem;
}
.part1 .features-item:nth-child(1) p {
top: 0.4rem;
left: 0.22rem;
}
.part1 .features-item:nth-child(2) {
margin: 0 0.13rem 0;
}
.part1 .features-item:nth-child(2) .features-bg {
width: 6.82rem;
height: 4.17rem;
}
.part1 .features-item:nth-child(3) {
float: right;
}
.part1 .features-item:nth-child(3) .features-bg {
width: 2.39rem;
height: 3.44rem;
}
.part1 .features-item:nth-child(3) p {
top: 0.4rem;
left: 0.22rem;
}
.part1 .features-item:nth-child(4) {
float: none;
position: absolute;
top: 3.6rem;
left: 0;
}
.part1 .features-item:nth-child(4) .features-bg {
width: 2.4rem;
height: 2.62rem;
}
.part1 .features-item:nth-child(4) p {
bottom: 0.1rem;
left: 0.22rem;
}
.part1 .features-item:nth-child(5) {
float: none;
position: absolute;
top: 4.3rem;
left: 2.53rem;
}
.part1 .features-item:nth-child(5) .features-bg {
width: 6.83rem;
height: 1.99rem;
}
.part1 .features-item:nth-child(6) {
float: right;
margin-top: 0.2rem;
}
.part1 .features-item:nth-child(6) .features-bg {
width: 2.39rem;
height: 2.6rem;
}
.part1 .features-item:nth-child(6) p {
bottom: 0.1rem;
left: 0.22rem;
}
.part6 {
height: 10.8rem;
position: relative;
padding-left: 1.8rem;
padding-top: 5.9rem;
}
.part6 .part6-hot .hot-item {
position: absolute;
font-family: "Helvetica CE 55 Roman Bold";
font-size: 0.3rem;
line-height: 0.33rem;
color: #ffffff;
}
.part6 .part6-hot .hot-item:nth-child(1) {
width: 2.41rem;
height: 0.37rem;
top: 2.97rem;
left: 3.73rem;
}
.part6 .part6-hot .hot-item:nth-child(1) p {
position: absolute;
top: -0.06rem;
left: 0.3rem;
white-space: nowrap;
}
.part6 .part6-hot .hot-item:nth-child(2) {
width: 2.58rem;
height: 0.48rem;
top: 7.01rem;
right: 2.8rem;
}
.part6 .part6-hot .hot-item:nth-child(2) p {
text-align: right;
position: absolute;
top: -0.35rem;
right: 0.52rem;
white-space: nowrap;
}
.part7 {
height: 10.8rem;
padding-top: 6.8rem;
padding-left: 1.8rem;
position: relative;
}
.part7 .video-box {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.part7 .video-box video {
width: 100%;
height: 100%;
object-fit: cover;
}
.part7 .tit-con {
position: relative;
z-index: 2;
}
.part7 .tit-con p span {
font-family: "Good Times";
}
.part8 {
height: 10.8rem;
padding-top: 6.7rem;
padding-left: 1.8rem;
position: relative;
}
.part8 .video-box {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.part8 .video-box video {
width: 100%;
height: 100%;
object-fit: cover;
}
.part8 .tit-con {
position: relative;
z-index: 2;
}
.part2 {
height: 10.72rem;
padding-top: 1.5rem;
text-align: center;
}
.part2 .tit {
width: 6.22rem;
}
.part2 .p {
width: 4.28rem;
margin: 0 auto 0.3rem;
display: flex;
}
.part2 .pro {
width: 14.47rem;
}
.part2-1 {
height: 10.8rem;
text-align: center;
}
.part2-1 .tit {
width: 9.57rem;
margin: 1.9rem 0 0.98rem;
}
.part2-1 .pro {
width: 15.8rem;
}
.part2-1 .tit2 {
margin: 0 auto;
width: 8.62rem;
margin-top: 1.4rem;
}
.part2-2 {
height: 10.8rem;
text-align: center;
}
.part2-2 .pro {
width: 15.69rem;
margin: 1.1rem auto 0;
}
.part3 {
height: 10.79rem;
padding-top: 1.25rem;
text-align: center;
}
.part3 .tit {
width: 6.98rem;
margin-bottom: 1.4rem;
}
.part3 .icon {
width: 13.59rem;
}
.part4 {
height: 11.62rem;
padding-top: 1.88rem;
padding-left: 10.65rem;
}
.part4 .tit {
width: 4.35rem;
margin-bottom: 0.25rem;
}
.part4 .con-item {
padding-left: 0.12rem;
color: #ffffff;
margin-bottom: 0.36rem;
font-family: "Helvetica CE 55 Roman";
}
.part4 .con-item h4 {
font-size: 0.4472rem;
line-height: 0.5979rem;
}
.part4 .con-item p {
font-size: 0.3128rem;
line-height: 0.3976rem;
}
@media (max-width: 750px) {
.tit-con h1,
.tit-con h2,
.tit-con h3 {
font-size: 0.24rem;
line-height: 0.3rem;
margin-bottom: 0.16rem;
}
.tit-con p {
font-size: 0.18rem;
line-height: 0.22rem;
}
.banner {
height: 12.11rem;
}
.banner .shop-btn {
display: inline-block;
position: absolute;
font-size: 0.24rem;
line-height: 0.36rem;
padding: 0 0.06rem;
top: 4.98rem;
left: 2.9rem;
color: #fed314;
border: 0.02rem solid #fed314;
}
.part2-1 {
height: 6.1rem;
}
.part2-1 .tit {
width: 4.13rem;
margin: 0.7rem auto 0.35rem;
}
.part2-1 .pro {
width: 5.28rem;
}
.part2-2 {
height: 8.52rem;
padding-top: 0.38rem;
}
.part2-2 .tit {
width: 3.73rem;
margin: 0 auto 0.4rem;
}
.part2-2 .pro {
width: 6.68rem;
margin: 0;
}
.proVideo {
height: 4.22rem;
}
.proVideo .video-box {
width: 100%;
height: 4.22rem;
border: none;
box-shadow: none;
}
.proVideo .video-box::after {
border: none;
box-shadow: none;
}
.proVideo .video-box .btn-play,
.proVideo .video-box .mask {
display: none;
}
.proVideo .video {
width: 100%;
height: 100%;
}
.part1 {
height: 6.63rem;
padding-top: 0.9rem;
}
.part1 .tit {
width: 2.87rem;
margin-bottom: 0.2rem;
}
.part1 .features-box {
width: 6.85rem;
height: 3.6rem;
}
.part1 .features-item p {
font-size: 0.1957rem;
line-height: 0.2231rem;
}
.part1 .features-item:nth-child(1) .features-bg {
width: 1.38rem;
height: 1.99rem;
}
.part1 .features-item:nth-child(1) p {
top: 0.24rem;
left: 0.12rem;
}
.part1 .features-item:nth-child(2) {
margin: 0 0.08rem;
}
.part1 .features-item:nth-child(2) .features-bg {
width: 3.92rem;
height: 2.4rem;
}
.part1 .features-item:nth-child(3) .features-bg {
width: 1.38rem;
height: 1.99rem;
}
.part1 .features-item:nth-child(3) p {
top: 0.24rem;
left: 0.12rem;
}
.part1 .features-item:nth-child(4) {
top: 2.07rem;
}
.part1 .features-item:nth-child(4) .features-bg {
width: 1.38rem;
height: 1.51rem;
}
.part1 .features-item:nth-child(4) p {
left: 0.12rem;
}
.part1 .features-item:nth-child(5) {
top: 2.45rem;
left: 1.45rem;
}
.part1 .features-item:nth-child(5) .features-bg {
width: 3.93rem;
height: 1.14rem;
}
.part1 .features-item:nth-child(6) {
margin-top: 0.08rem;
}
.part1 .features-item:nth-child(6) .features-bg {
width: 1.38rem;
height: 1.51rem;
}
.part6 {
height: 8.65rem;
padding-top: 5.9rem;
padding-left: 0;
}
.part6 .part6-hot .hot-item {
font-size: 0.18rem;
line-height: 0.206rem;
}
.part6 .part6-hot .hot-item:nth-child(1) {
width: 1.51rem;
height: 0.23rem;
top: 1.61rem;
left: 0.58rem;
}
.part6 .part6-hot .hot-item:nth-child(1) p {
top: -0.03rem;
left: 0.21rem;
}
.part6 .part6-hot .hot-item:nth-child(2) {
width: 1.6rem;
height: 0.3rem;
top: 4.37rem;
right: 0.67rem;
}
.part6 .part6-hot .hot-item:nth-child(2) p {
top: -0.2rem;
right: 0.3rem;
}
.part6 .tit-con {
text-align: center;
}
.part7 {
height: 9rem;
padding-top: 6.85rem;
padding-left: 0;
}
.part7 .video-box {
display: none;
}
.part7 .tit-con {
text-align: center;
}
.part7 .tit-con p span {
font-size: 0.2rem;
}
.part8 {
height: 7.4rem;
padding-top: 5.75rem;
padding-left: 0;
}
.part8 .video-box {
display: none;
}
.part8 .tit-con {
text-align: center;
}
.part2 {
height: 11.2rem;
padding-top: 1.35rem;
background-position: top center;
}
.part2 .tit {
width: 3.75rem;
}
.part2 .p {
width: 3.45rem;
margin-bottom: 0.8rem;
margin-top: 0.1rem;
}
.part2 .pro {
width: 6.68rem;
}
.part3 {
height: 6.9rem;
padding-top: 0.28rem;
}
.part3 .tit {
width: 3.64rem;
margin-bottom: 0.52rem;
margin-left: 0.3rem;
}
.part3 .icon {
width: 6.28rem;
}
.part4 {
height: 7.86rem;
padding-top: 1.08rem;
padding-left: 4.32rem;
}
.part4 .tit {
width: 2.26rem;
margin-bottom: 0.18rem;
}
.part4 .con-item {
padding-left: 0.07rem;
margin-bottom: 0.22rem;
}
.part4 .con-item h4 {
font-size: 0.2335rem;
line-height: 0.3121rem;
}
.part4 .con-item p {
font-size: 0.1633rem;
line-height: 0.2076rem;
}
}