@media (min-aspect-ratio: 51 / 50){body { background-color: #fff; } .banner { position: relative; width: 100%; } .banner-2-img { width: 100%; display: block; } 

.main-content{
    font-family:"Manrope", "Harmony";
    font-weight: 400;
}
.banner-text-box { 
    position: absolute; left: 10.41667vw; top: 50%; transform: translateY(-50%); 
    /* text-align: left;  */
    text-align: center; 
    
} 
.banner-text-box.right-banner-text { 
    right: 10.41667vw; 
    left: auto; 
    /* text-align: right;  */
    text-align: center; 
    margin: -3vw 0;
} 

.content-1 .banner-logo { height: 2.91667vw; margin-bottom: 1.5625vw; } 
.banner .banner-text-1 { 
    /* font-size: 1.26667vw;  */
    font-size: 1.66667vw; 
    margin-bottom: 0.88542vw; 
} 
.banner .banner-text-2 { 
    font-size: 1.04167vw; 
    /* color: #818181;  */
    margin-bottom: 0.88542vw; white-space: pre;
    
} 
.banner .banner-btn-box { 
    margin-top: 3.125vw; 
    /* margin-top: 2.125vw;  */
    text-align: center;
} 
.banner .banner-text-box.center-text-box {
    position: absolute;
    width: 25.145833vw;
    top: 20%;
    transform: translateX(-50%);
    left: 50%!important;
    right: auto;
    transition: all 0.5s ease-in-out;
    opacity: 1;
    will-change: opacity;
}

.banner-text-box .btn.white-btn { margin-left: 1.04167vw; } .banner .liveView { position: absolute; left: 50%; top: 28.64583vw; transform: translateX(-50%); } .mySwiper.swiper { width: 100%; height: 100%; } 
.mySwiper .swiper-slide { text-align: center; font-size: 0.9375vw; background: #fff; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; 
    /* height: 50vw;  */
    height: 48vw; 

} 
    
.banner .banner-img { width: 100%; display: block; } 
.mySwiper .swiper-slide .banner-img { 
    display: block; width: 100%; 
    height: 48vw; 
    object-fit: cover; 
} 
.mySwiper .swiper-pagination-bullet { width: 0.52083vw; height: 0.52083vw; background: #000; color: #000; opacity: 1; margin: 0 0.625vw !important; vertical-align: middle; } .mySwiper .swiper-pagination-bullet-active { background: none; border: 1px solid #000; width: 0.72917vw; height: 0.72917vw; vertical-align: middle; } .mySwiper.swiper-container-horizontal>.swiper-pagination-bullets, .mySwiper.swiper-pagination-custom, .mySwiper.swiper-pagination-fraction { bottom: 3.125vw; } .swiper-pagination { display: flex; justify-content: center; align-items: center; } .content-2 { display: flex; justify-content: space-between; padding: 5.20833vw 6.25vw; background-color: #f5f5f5; } .content-2-left { position: relative; overflow: hidden; } .content-2-left img { width: 43.75vw; height: 48.95833vw; transform: scale(1); transition: all .3s; display: block; } .content-2-left img:hover { transform: scale(1.1); transition: all .3s; } .content-2-left .img-tip { font-size: 0.625vw; position: absolute; left: 1.04167vw; bottom: 1.04167vw; color: #c6c6c6; font-weight: 300; } .content-2-right-img-box { width: 38.54167vw; height: 34.21875vw; background-color: #fff; overflow: hidden; } .content-2-right-img-box img { transform: scale(1); transition: all 0.3s; width: 100%; } .content-2-right-img-box:hover img { transform: scale(1.1); transition: all 0.3s; } .content-2-right-text { margin-top: 2.8125vw; } .content-2-right-text>.content-2-right-des { font-size: 1.875vw; margin-bottom: 3.125vw; } .content-3-top { margin: 5.20833vw 6.25vw 5.20833vw; height: 4.16667vw; display: flex; } .content-3-flex { flex: 1; display: flex; justify-content: initial; align-items: center; position: relative; padding: 0 3.125vw; } .content-3-flex img { width: 3.64583vw; height: 3.64583vw; } .content-3-flex:not(:last-child)::after { position: absolute; right: 0; top: 0; content: ""; width: 0.10417vw; height: 4.16667vw; background-color: rgba(0, 0, 0, 0.16); } .content-3-text { margin-left: 3.125vw; font-size: 1.04167vw; } .content-3-bottom { margin: 0 6.25vw; } .content-3-bottom-img { width: 100%; display: block; } .content-3-bottom-text-box { margin: 2.8125vw 0 5.20833vw; width: 100%; box-sizing: border-box; } .content-3-bottom-text-content { margin-bottom: 3.02083vw; } .content-3-bottom-title { font-size: 1.875vw; margin-bottom: 0.83333vw; } .content-3-bottom-content { font-size: 0.83333vw; color: #999; display: inline-block; } .content-3-bottom-text .view { border-radius: 0.52083vw; } .view:hover { opacity: 0.7; } .content-5 { position: relative; width: 100%; height: 36.458vw; overflow: hidden; } .content-5 video { width: 100%; height: auto; position: absolute; top: 50%; left: 0; transform: translateY(-50%); } .content-5 img { display: block; width: 100%; } .content-5-text { position: absolute; left: 50%; bottom: 4.167vw; transform: translateX(-50%); } 

/* ��ť */
.btn-content {
    
    font-size: 1.04167vw; 
    padding: 0.22917vw 1.45833vw;
}
.text-btn-box {
    text-align: center;
    margin-top: 1.5vw;
}
.btn-content.text-btn:hover,
.btn-content.buy-btn:hover {
    opacity: 0.7;
}
.btn-content.text-btn,
.btn-content.buy-btn {
    background-color: #000;
    color: #fff;
    font-size: 1.04167vw; 
    border-radius: 2vw;
}
.btn-content.more-btn {  
    font-size: 1.04167vw; 
    /* background-color: #fff; */
    /* border-bottom: 0.10417vw solid #000; */
    /* font-family:"Manrope"; */
}

.btn-content.more-btn:hover {
    opacity: 0.7;
    /* font-size: 0.8533vw; */
    /* font-size: 0.9333vw; */
}



/* �ڶ������� */

.content-product {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /* margin: 2vw; */
    /* padding: 2vw; */
    padding: 3vw 8vw 0vw;
    background-color: #f5f5f5;
    /* width: 100%; */
    position: relative;
}


.product-text-right-box {
    position: absolute;
    top: 55%; /* ������Ҫ���� */
    left: 75%; /* ������Ҫ���� */
    transform: translate(-50%, -50%); /* ʹ���־��� */
    text-align: center;
    /* width: 100%; ������Ҫ���� */
    color: black; /* ������ɫ��������Ҫ���� */
    box-sizing: border-box;
    z-index: 1;
    white-space: nowrap; /* ǿ���ı������� */
    
}

.product-text-left-box {
    position: absolute;
    top: 50%; /* ������Ҫ���� */
    left: 21%; /* ������Ҫ���� */
    transform: translate(-50%, -50%); /* ʹ���־��� */
    text-align: center;
    /* width: 100%; ������Ҫ���� */
    color: black; /* ������ɫ��������Ҫ���� */
    box-sizing: border-box;
    z-index: 1;
    white-space: nowrap; /* ǿ���ı������� */
    
}

/* ͼƬ��ʽ��ȷ��ͼƬ�ܹ������������ */
picture img {
    width: 100%;
    /* width: 95vw; */
    /* padding: 2vw; */
    height: auto;
    display: block;
    transition: transform 0.3s ease;
}

.content-product  picture img:hover,.html-content picture img:hover {
    transform: scale(1.1);
    transition: all .3s;
}
/* picture img:hover {
    transform: scale(1.1);
    transition: all .3s;
} */

.product-btn-box{
    font-size: 1.13333vw;
    padding: 2vw 0;
    
}
.product-text-1 {
    /* font-size: 2.3333vw; */
    font-size: 3.4333vw;
    /* text-align: left; */
    text-align: center;
}


.product-text-right-box.right-product-text .product-text-2 {
    
    font-size: 1.04167vw; 
    padding: 1vw 0;
    /* text-align: left; */
    text-align: center;
    
}
/* ������ */
.product-text-left-box.right-product-text .product-text-1 {
    /* font-size: 2.3333vw; */
    font-size: 3.0333vw;
    /* text-align: left; */
    text-align: center;
}
.product-text-left-box.right-product-text .product-text-2 {
    font-size: 1.04167vw; 
    padding: 1vw 0;
    /* text-align: left; */
    text-align: center;
    
}

/* ���в�Ʒtabչʾ */

.content-product-left {
    display: flex;
    /* justify-content: space-between; */
    flex-direction: column;
    /* margin: 2vw; */
    /* padding: 2vw; */
    padding: 2vw 1vw 5vw 10vw;
    background-color: #f5f5f5;
    /* width: 100%; */
    width: 50%;
    position: relative;
    /* height: 60vw; */
}
.content-product-right {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    /* height: 100%; */
    /* margin: 2vw; */
    /* padding: 2vw; */
    /* margin: 2vw; */
    background-color: #f5f5f5;
    width: 50%;
    /* position: relative; */

    align-items: stretch; /* ��Ԫ�������������������� */
    padding: 2vw 10vw 5vw 1vw;
  }


.products-header {
    min-height: 3.125vw;
    height: auto;
    /* padding: 2vw 0 0; */
    padding: 5vw 0 0;
    /* background-color: #ffffff; */
    background-color: #f5f5f5;
    /* z-index: 99; */
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    backdrop-filter: initial;
    /* margin-bottom: 2.5vw; */
    /* border-bottom: 1px solid #dadada; */
    
}
.products-header .products-nav-link {
    margin-right: 3.125vw;
    font-size: 0.83333vw;
    color: #666;
    cursor: pointer;
    position: relative;
    height: 100%;
    line-height: 3.125vw;
    display: inline-block;
}

.products-header .shell-logo {
    font-size: 2.525vw;
}
.products-header .products-nav-r {
    width: 36vw;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-top: 2vw;
}
.products-header .products-nav-link {
    margin-right: initial;
    font-size: 1.1333vw;
    color: #c6c6c6;
}

.products-header .products-nav-link.active,
.products-header .products-nav-link:hover {
    color: #000;
    /* color: red; */
}


.products-header .products-nav-link.active::after,
.products-header .products-nav-link:hover::after {
    content: "";
    width: 100%;
    height: 0.10417vw;
    background-color: #000;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}

/* ���в�Ʒ�ڲ����� */

    .tab-container {
        display: flex; /* ʹ��Flexbox���� */
        flex-direction: row;
        justify-content: space-between; /* ��������ƽ���ֲ���Ŀ */
        /* height: 80vw; */
        align-items: stretch; /* ȷ����������߶�һ�� */
        
    }
    .content-product-left-item {
        /* margin: 1vw 0; */
        /* padding: 2vw 0; */
        /* padding: 0 0 5vw 0; */
        /* height: auto; */
        /* width: 100%; */
        position: relative;
        display: flex
;
        background-color: #ffffff;
        flex-direction: column;
        /* height: 28vw; */
    }
    .content-product-right-item{
        /* margin: 0 0 2vw;   */
        padding: 1vw 0 1.5vw;
        /* �߶ȿ��Ը��������Զ����������߿������ù̶��߶� */
        /* height: auto; ���������Զ������߶� */
        width: 100%; /* ��Ԫ�ؿ���ռ���������� */
        position: relative;
        display: flex; /* ʹ��Flexbox���� */
        
        background-color: #ffffff;
        flex-direction: column; /* ��ֱ������Ԫ�� */
        text-align: center;

        align-items: center; /* �����ҪK����У�Ҳ�������������� */
        /* height: 25vw; ������������ĸ߶�ֵ */
        border: 0.5px solid #dcdcdc;
    }
    .content-product-right-item.mob-slide{
        display: none;
    }
    .content-product-right-item .content-product-img{
             /* width: 20vw; */
            /* width: 100%; ͼƬ����ռ���������� */
            /* height: auto; �߶ȸ���ͼƬ�����Զ����� */ 
        display: flex; /* ʹ��Flexbox���� */
        justify-content: center; /* ˮƽ���� */
        align-items: center; /* ��ֱ���� */
        height: 100%; /* ��������һ������ĸ߶� */
        /* width: 100%; /* ��������һ������Ŀ��� */  
        /* width: 22.875vw; */
        width: 45%;
        height: 15.83333vw;
    }
    .content-product-right-item .content-product-img-accessories{
             /* width: 20vw; */
            /* width: 100%; ͼƬ����ռ���������� */
            /* height: auto; �߶ȸ���ͼƬ�����Զ����� */ 
        display: flex; /* ʹ��Flexbox���� */
        justify-content: center; /* ˮƽ���� */
        align-items: center; /* ��ֱ���� */
        height: 100%; /* ��������һ������ĸ߶� */
        /* width: 100%; /* ��������һ������Ŀ��� */  
        /* width: 22.875vw; */
        width: 45%;
        /* height: 20.83333vw; */
        height: 16.5333vw;
    }
    .right-img{
        text-align: center;
    }
/* tab���������� */
.content-btn-box{
    font-size: 1.13333vw;
    padding:1vw 0vw 1vw;
    
    
}
.product-left-text-1 {
    font-size: 2.14333vw;
    /* font-size: 3.4333vw; */
    /* text-align: left; */
    text-align: center;
}
.product-left-text-2 {
    
    font-size: 1.04167vw; 
    padding: 1vw 0;
    text-align: left;
    text-align: center;
    
}
.product-left-text-box.product-left-text{
    padding:6vw 0 4.5vw 0vw;
    text-align: center;
}

.product-right-text-1 {
    /* padding:2vw 0 0; */
    font-size: 2.1333vw;
    /* font-size: 3.4333vw; */
    text-align: center;
    

}
.product-right-text-2 {
    font-size: 1.04167vw; 
    padding: 0.5vw 0;
    /* text-align: left; */
    text-align: center;
    
}



/* �ײ����� */
.content-footer {
    display: flex;            /* ʹ��Flexbox���� */
    justify-content: space-between; /* �������Ͼ��ȷ���ռ� */
    align-items: center;      /* �ڽ������Ͼ��ж��� */
}

.footer-service-left {
    /* ���������������Ҫ����ʽ��������ȡ��߶ȡ�����ɫ�� */
    /* padding: 1vw; */
    margin: 5vw 1vw 5vw 10vw;
    /* background-color: rgb(0, 242, 255); */
    display: flex;
    /* justify-content: space-between; */
    width: 50%;
    border: #000 0.1vw;
    align-content: end;
    border: 0.5px solid #dcdcdc; /* ���ñ߿�Ϊ2px����ʵ�ߣ���ɫΪ#eee */
    position: relative;
    text-align: center;
}
.footer-service-right {

    margin: 5vw 10vw 5vw 1vw;
    /* background-color: rgb(0, 242, 255); */
    display: flex;
    /* justify-content: space-between; */
    width: 50%;
    border: #000 0.1vw;
    align-content: end;
    border: 0.5px solid #dcdcdc; /* ���ñ߿�Ϊ2px����ʵ�ߣ���ɫΪ#eee */
    position: relative;
    text-align: center;
}
.footer-service-text-1{
    margin: 2vw 2vw 1vw 3vw;
    font-size: 1.43333vw;
}


.footer-service-text {
    position: absolute;
    top: 50%;
    left: 22%;
    width: 18vw;
    text-align: left;
    transform: translate(-50%, -50%);
    z-index: 2; /* ȷ��������ͼƬ�Ϸ� */
    cursor: pointer;
    
  }
  

.footer-service-img {
display: block;
width: 100%;
height: auto;
cursor: pointer;
}
.footer-service-text-2{
    margin: 1vw 0vw 3vw 3vw;
    font-size: 1.03333vw;
    
}
.learn-more.pc {
    display: block;
    
}
.learn-more.mobile{
    display: none;
    
}

/* ���DZ߿�div */
.product-detail {
    /* border: 0.5px solid #dcdcdc; */
    width: 100%;
    overflow: hidden;
    /* display: inline-block; */
    display: flex;
    margin-top: 3vw;
    flex-direction: row;
    position: relative;
}
.product-container {
    border: 0.5px solid #dcdcdc;
    width: 100%;
    overflow: hidden;
    display: inline-block;
}

.content-product-top-item {
    display:none;
}
/* ֻչʾpc���� */
.pc {
    display: block;
}
.mobile {
    display: none;
}

}

@media (min-width: 1900px) {

    .product-text-right-box.right-product-text .product-text-2 {
        
        font-size: 0.84333vw;
        padding: 1vw 0;
        /* text-align: left; */
        text-align: center;
        
    }

    .product-text-left-box.right-product-text .product-text-2 {
        /* font-size: 1.04167vw;  */
        font-size: 0.84333vw;
        padding: 1vw 0;
        /* text-align: left; */
        text-align: center;
        
    }

    .banner .banner-text-2 { 
        /* font-size: 1.04167vw;  */
        font-size: 0.84333vw;
        /* color: #818181;  */
        /* color: #818181;  */
        margin-bottom: 0.88542vw; white-space: pre;
        
    } 

    .btn-content {
        font-size: 0.84333vw;
        padding: 0.22917vw 1.45833vw;
    }
    
    .btn-content.text-btn,
    .btn-content.buy-btn {
        background-color: #000;
        color: #fff;
        
        font-size: 0.84333vw;
        border-radius: 2vw;
        /*font-family: "Harmony";*/
    }
    .btn-content.more-btn {
        
        font-size: 0.84333vw;
        /* background-color: #fff; */
        /* border-bottom: 0.10417vw solid #000; */
        /* font-family:"Manrope"; */
    }

    .product-left-text-2 {
        
        font-size: 0.8433vw;
        padding: 1vw 0;
        text-align: left;
        text-align: center;
        
    
    }

    .product-right-text-2 {
        font-size: 0.8433vw;
        padding: 0.5vw 0;
        /* text-align: left; */
        text-align: center;
        
    
    }
    .banner .banner-text-1 { 
        font-size: 1.26667vw; 
        margin-bottom: 0.88542vw; 
    } 
}