html,
body {
    font-family: "OPPOSans-R";
    font-size: 20px;
    letter-spacing: 0.06rem;
    /* color:#333333; */
    /* min-width: 1400px; */
    /* max-width: 1920px; */
    /* margin: 0 auto; */
}

@font-face {
    font-family: 'OPPOSans-M';
    /* src: url('../font/OPPOSans-M-2.ttf'); */
    src: url('https://vispek-components.oss-cn-shenzhen.aliyuncs.com/web/font/OPPOSans-Medium.woff2');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'OPPOSans-R';
    /* src: url('../font/OPPOSans-R-2.ttf'); */
    src: url('https://vispek-components.oss-cn-shenzhen.aliyuncs.com/web/font/opposans-r-2.woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'OPPOSans-L';
    /* src: url('../font/OPPOSans-L-2.ttf'); */
    src: url('https://vispek-components.oss-cn-shenzhen.aliyuncs.com/web/font/OPPOSans-L-2.woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Poppins-Medium';
    src: url('https://vispek-components.oss-cn-shenzhen.aliyuncs.com/web/font/Poppins-Medium.ttf');
    font-weight: normal;
    font-style: normal;
}

/* @font-face {
    font-family: 'Poppins-Bold';
    src: url('https://vispek-components.oss-cn-shenzhen.aliyuncs.com/web/font/Poppins-Bold.ttf');
    font-weight: normal;
    font-style: normal;
} */
@font-face {
    font-family: 'Poppins-Light';
    src: url('https://vispek-components.oss-cn-shenzhen.aliyuncs.com/web/font/Poppins-Light.ttf');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Poppins-SemiBold';
    src: url('https://vispek-components.oss-cn-shenzhen.aliyuncs.com/web/font/Poppins-SemiBold.ttf');
    font-weight: normal;
    font-style: normal;
}

.font-OPPOSans-M {
    font-family: 'OPPOSans-M';
}

.font-OPPOSans-R {
    font-family: 'OPPOSans-R';
}

.font-OPPOSans-L {
    font-family: 'OPPOSans-L' !important;
}

.font-Poppins-Medium {
    font-family: 'Poppins-Medium';
}

.font-Poppins-Light {
    font-family: 'Poppins-Light';
}

.font-Poppins-SemiBold {
    font-family: 'Poppins-SemiBold';
}

* {
    padding: 0;
    margin: 0;
}

ul {
    list-style: none;
    margin: 0;
}

p {
    margin: 0;
}

button {
    outline: none;
}

.clearfix:after {
    visibility: hidden;
    display: block;
    clear: both;
    height: 0;
    font-size: 0;
    content: ".";
}

.clearfix {
    zoom: 1;
}

/* a:link {text-decoration:none;color: #ffffff}		未访问的链接 */
/* a:visited {text-decoration:none;color: #444444}	已访问的链接 */
/* a:hover {text-decoration:none;color: #ff3434}	鼠标移动到链接上 */
/* a:active {text-decoration:none;}	选定的链接 */
.input_w40 {
    width: 2rem;
    height: 25px;
    border: thin solid #dcdcdc;
    background: #f5f5f5
}

.input_w80 {
    width: 4rem;
    height: 1.5rem;
    border: thin solid #dcdcdc;
    background: #f5f5f5
}

.input_w100 {
    width: 100%;
    height: 1.5rem;
    border: thin solid #dcdcdc;
    background: #f5f5f5
}

.input_w300 {
    width: 300px;
    height: 1.5rem;
    border: thin solid #dcdcdc;
    background: #f5f5f5
}

.input_w200 {
    width: 10rem;
    height: 1.5rem;
    border: thin solid #dcdcdc;
    background: #f5f5f5
}

.input_w140 {
    width: 12rem;
    height: 1.5rem;
    border: thin solid #dcdcdc;
    background: #f5f5f5
}

.input_w120 {
    width: 6rem;
    height: 1.5rem;
    border: thin solid #dcdcdc;
    background: #f5f5f5
}

.w950 {
    width: 47.5rem;
    margin: 0 auto;
}

.w1070 {
    width: 53.5rem;
    margin: 0 auto;
}

.w1200 {
    width: 60rem;
    margin: 0 auto;
}

.w1400 {
    width: 70rem;
    margin: 0 auto;
}

.w1580 {
    width: 79rem;
    margin: 0 auto;
}

.w100 {
    width: 100%;
}

.fl {
    float: left
}

.fr {
    float: right
}

.bold {
    font-weight: bold
}

.red {
    color: #ff3434;
}

.white {
    color: #fff !important;
}

.yellow {
    color: #fcc92d;
}

.blue {
    color: #007AFF
}

.hei0 {
    color: #000000;
}

.hei2 {
    color: #222222;
}

.hei3 {
    color: #333333;
}

.hei5 {
    color: #555555;
}

.hei6 {
    color: #666666;
}

.hei9 {
    color: #999999;
}

.lan {
    color: #1d87cb
}

.green-2e9364 {
    color: #2E9364;
}


.p40 {
    padding: 2rem
}


.p30 {
    padding: 1.5rem
}

.p10 {
    padding: 0.5rem;
}

.plr15 {
    padding: 0 0.75rem
}

.plr30 {
    padding: 0 1.5rem
}

.font8 {
    font-size: 0.4rem;
}

.font10 {
    font-size: 0.5rem;
}

.font12 {
    font-size: 0.6rem;
}

.font12 {
    font-size: 0.6rem;
}

.font14 {
    font-size: 0.7rem;
}

.font16 {
    font-size: 0.8rem;
}

.font18 {
    font-size: 0.9rem;
}

.font20 {
    font-size: 1rem;
}

.font22 {
    font-size: 1.1rem;
}

.font24 {
    font-size: 1.2rem;
}

.font26 {
    font-size: 1.3rem;
}

.font28 {
    font-size: 1.4rem !important;
}

.font30 {
    font-size: 1.5rem;
}

.font32 {
    font-size: 1.6rem;
}

.font34 {
    font-size: 1.7rem !important;
}

.font34-bold {
    font-size: 1.7rem;
}

.font36 {
    font-size: 1.8rem;
}

.font38 {
    font-size: 1.9rem;
}

.font40 {
    font-size: 2rem;
}

.font42 {
    font-size: 2.1rem;
}

.font44 {
    font-size: 2.2rem;
}

.font50 {
    font-size: 2.7rem;
}

.font54 {
    font-size: 2.5rem;
}

.font60 {
    font-size: 3rem;
}

.pr20 {
    padding-right: 1rem
}

.pt5 {
    padding-top: 5px
}

.pt10 {
    padding-top: 0.5rem
}

.pt15 {
    padding-top: 0.75rem
}

.pt30 {
    padding-top: 1.5rem
}

.pl10 {
    padding-left: 0.5rem
}

.pl20 {
    padding-left: 1rem
}

.pl50 {
    padding-left: 2.5rem
}

.pb10 {
    padding-bottom: 0.5rem;
}

.pt80 {
    padding: 4rem 0 !important
}

.p50 {
    padding: 2.5rem 0 !important
}

.ptb70 {
    padding: 3.5rem 0 !important
}

.ptb100 {
    padding: 5rem 0 !important
}

.ptb200 {
    padding: 10rem 0 !important
}

.pt270 {
    padding-top: 270px !important
}

.mt5 {
    margin-top: 5px
}

.mt7 {
    margin-top: 0.35rem
}

.mt10 {
    margin-top: 0.5rem
}

.mt15 {
    margin-top: 0.75rem
}

.mt20 {
    margin-top: 1rem
}

.mt25 {
    margin-top: 1.25rem
}

.mt30 {
    margin-top: 1.5rem
}

.mt35 {
    margin-top: 1.75rem
}

.m30 {
    margin: 1.5rem 0 0 0 !important
}

.m80 {
    margin: 4rem 0 0 0 !important
}

.mtb25 {
    margin: 25px auto !important
}

.mtb100 {
    margin: 5rem auto !important
}

.mt40 {
    margin-top: 2rem !important
}

.mt50 {
    margin-top: 2.5rem
}

.mt60 {
    margin-top: 3rem
}

.mt70 {
    margin-top: 3.5rem
}

.mt80 {
    margin-top: 4rem
}

.mt90 {
    margin-top: 4.5rem !important
}

.mt100 {
    margin-top: 5rem !important
}

.mt140 {
    margin-top: 7rem !important
}

.mt150 {
    margin-top: 7.5rem !important
}

.mt200 {
    margin-top: 10rem
}

.mt240 {
    margin-top: 12rem
}

.mt280 {
    margin-top: 14rem
}

.ml65 {
    margin-left: 3.25rem;
}

.ml70 {
    margin-left: 3.5rem;
}

.ml40 {
    margin-left: 2rem;
}

.ml44 {
    margin-left: 2.2rem;
}

.ml88 {
    margin-left: 4.4rem;
}

.ml20 {
    margin-left: 1rem;
}

.ml15 {
    margin-left: 0.75rem;
}

.ml10 {
    margin-left: 0.5rem;
}

.ml100 {
    margin-left: 5rem;
}

.ml150 {
    margin-left: 7.5rem;
}

.ml5 {
    margin-left: 5px;
}

.mlr30 {
    margin: 0 1.5rem
}

.mlr15 {
    margin: 0 0.75rem
}

.mb25 {
    margin-bottom: 25px !important
}

.mb50 {
    margin-bottom: 2.5rem
}

.mb100 {
    margin-bottom: 5rem
}

.mr10 {
    margin-right: 0.5rem;
}

.mr25 {
    margin-right: 1.25rem;
}

.pr {
    position: relative;
}

.pa {
    position: absolute;
}

.left {
    text-align: left
}

.right {
    text-align: right
}

.background_f {
    background-color: #ffffff;
}

.background_0 {
    background-color: #000000;
}

.h40 {
    height: 2rem;
}

.h60 {
    height: 3rem;
}


.h75 {
    height: 3.75rem;
}

.h50 {
    height: 2.5rem;
}

.lh20 {
    line-height: 1rem;
}

.lh26 {
    line-height: 1.3rem;
}

.lh30 {
    line-height: 1.875rem;
}

.lh34 {
    line-height: 1.7rem;
}

.lh40 {
    line-height: 2rem;
}


.ls-medium {
    letter-spacing: 0.18rem;
}

.ls-small {
    letter-spacing: 0.06rem;
}

/* 页头开始 */
nav {
    width: 100%;
    /* padding: 0 2.2rem; */
    height: 3rem;
    /* line-height: 2rem; */
    position: fixed;
    top: 0;
    z-index: 10;
    background-color: #ffffff;
    border-bottom: thin solid rgba(182, 182, 182, .7);
}

nav .nav-flex {
    display: flex;
    align-items: center;
    height: 3rem;
    /* gap: 1rem; */
}

nav a {
    text-align: center;
    color: #000000;
    width: 4.6rem;
    height: 2rem;
    line-height: 2rem;
    font-size: 0.7rem;
    opacity: .7;
    font-family: 'OPPOSans-R';
    display: inline-block;
    position: relative;
    padding-bottom: 0.1rem;
}

nav .active {
    color: #2E9364;
    /* background: #000; */
    opacity: 1;
    text-decoration: none;
    padding-bottom: 0.1rem;
}

nav .active::after {
    content: "";
    background: #2E9364;
    height: 2px;
    width: 50%;
    display: inline-block;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

nav a:hover {
    color: #2E9364;
    /* background: #000; */
    opacity: 1;
    text-decoration: none;
    padding-bottom: 0.1rem;
}

/* 下拉菜单样式 */
nav .nav-dropdown {
    position: relative;
    /* display: inline-block; */
}

nav .nav-dropdown .dropdown-menu {
    position: absolute;
    top: 2.5rem;
    left: 0;
    background: #ffffff;
    border-top: none;
    /* border-radius: 0 0 0.5rem 0.5rem; */
    box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.15);
    min-width: 4.6rem;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-0.5rem);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1000;
    padding: 0.5rem 0;
    display: block !important;
}

nav .nav-dropdown:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

nav .nav-dropdown:hover>a {
    color: #2E9364;
    /* background: #000; */
    opacity: 1;
}

nav .dropdown-menu a {
    display: block;
    padding: 0.6rem 0;
    color: #333333;
    text-decoration: none;
    font-size: 0.5rem;
    font-family: 'OPPOSans-R';
    transition: all 0.2s ease;
    width: 100%;
    height: auto;
    line-height: 1.2;
    background: transparent;
    opacity: 1;
    position: relative;
    margin: 0;
    text-align: center;
}

nav .dropdown-menu a:last-child {
    border-bottom: none;
}

nav .dropdown-menu a:hover {
    background: #2E9364;
    color: #FFF;
    /* border-bottom: 1px solid rgba(182, 182, 182, 0.1); */
    /* transform: translateX(0.25rem); */
}

/* 确保下拉菜单项不会继承父级导航的样式 */
nav .dropdown-menu a:before {
    display: none;
}

.nav-mini {
    display: none;
    position: fixed;
    top: 0;
    z-index: 10;
}

.nav-mini2 {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
}

.nav-menu {
    width: 1.8rem;
    height: 0.6rem;
    background: url("../img/menu.png")no-repeat;
    background-size: cover;
    display: inline-block;
    vertical-align: middle;
    cursor: pointer;
}

.nav-menu.active {
    background: url("../img/close.png")no-repeat;
    background-size: cover;
    width: 1rem;
    height: 1.05rem;
    display: inline-block;
    vertical-align: middle;
    /* animation: myfirst .5s; */
}

/* @keyframes myfirst
{
from {transform: rotate(0deg);}
to {transform: rotate(180deg);}
}  */
.nav-dialog-content {
    position: absolute;
    z-index: 12;
    /* width: 75rem; */
    width: 0;
    /* height: 45rem; */
    height: 0;
    display: inline-block;
    top: 0;
}

.nav-dialog-bg {
    height: 100vh;
    width: 100vw;
    background: rgba(0, 0, 0, .5);
    position: absolute;
    left: 0;
    z-index: 11;
    top: 0;
    /* display: none; */
}

.nav-dialog-nav {
    padding-bottom: 2rem;
    color: #666666;
    margin: 0 4.4rem;
    border-bottom: 2px solid rgba(182, 182, 182, .7);
}

.nav-dialog-nav a {
    text-align: left;
    color: #666666;
    font-size: 0.8rem;
    font-family: 'OPPOSans-R';
    display: block;
    position: relative;
    padding-bottom: 1.2rem;
    text-decoration: none;
}

.nav-dialog-nav .active {
    color: #005EFF;
}

.tags-view {
    width: 100%;
    height: 1.5rem;
    line-height: 1.5rem;
    top: 2rem;
}

.tags-item {
    padding: 0.8rem 4.4rem;
    /* border-bottom: thin solid #d8d8d8; */
    cursor: pointer;
}

.tags-item:hover {
    background-color: #005EFF;
    color: #ffffff !important;
    cursor: pointer;
}

.tags-item.active {
    background-color: #005EFF;
    color: #ffffff !important;
    cursor: pointer;
}

.tags-item.active div {
    color: #ffffff !important;
}

.tags-item:hover div {
    color: #ffffff !important;
}

.tags-close {
    /* width: 0.75rem; */
    display: inline-block;
    float: right;
    margin-top: 0.775rem;
    cursor: pointer;
    color: #808080;
}

.tags-close:hover {
    color: #ffffff;
}

.fixed {
    position: fixed;
    /* top:0; */
    z-index: 1
}

.head_flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    z-index: 1000;
}

.banner {
    width: 100%;
    text-align: right;
    position: absolute;
    z-index: -1;
}

/* banner */
.slideBox {
    width: 100%;
    height: 30rem;
    overflow: hidden;
    position: absolute;
    left: 0;
    right: 0px;
    top: 0px;
    border: 0;
    margin: 0 auto;
    z-index: 2
}

.slideBox .hd {
    /* height: 2.5rem; */
    /* width: 100%; */
    overflow: hidden;
    position: absolute;
    right: 8rem;
    margin: 0 auto;
    bottom: 5rem;
    z-index: 1;
}

.slideBox .hd ul {
    overflow: hidden;
    zoom: 1;
    margin: 0 auto;
    width: 100%;
}

.slideBox .hd ul li {
    margin-bottom: 1rem;
    width: 9.5rem;
    height: 4.75rem;
    border-radius: 1rem;
    cursor: pointer;
    background: transparent;
    color: #ffffff;
    font-size: 0.6rem;
    line-height: 4.75rem;
    text-align: center;
    position: relative;
}

.slideBox .hd ul li>span {
    color: #ffffff;
    position: relative;
    z-index: 2;
}

/* 添加灰色蒙层伪元素 */
.slideBox .hd ul li::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 9.5rem;
    height: 4.75rem;
    background: rgba(1, 32, 11, 0.80);
    border-radius: 1rem;
    pointer-events: none;
    z-index: 1;
}

/* 确保li内容在蒙层之上 */
.slideBox .hd ul li {
    position: relative;
    z-index: 0;
}

.slideBox .hd ul li:nth-child(1) {
    background: url(https://vispek-components.oss-cn-shenzhen.aliyuncs.com/senseen/banner-hd-01.webp);
    width: 9.5rem;
    height: 4.75rem;
    background-size: cover;
}

.slideBox .hd ul li:nth-child(2) {
    background: url(https://vispek-components.oss-cn-shenzhen.aliyuncs.com/senseen/banner-hd-02.webp);
    width: 9.5rem;
    height: 4.75rem;
    background-size: cover;
}

.slideBox .hd ul li:nth-child(3) {
    background: url(https://vispek-components.oss-cn-shenzhen.aliyuncs.com/senseen/banner-hd-03.webp);
    width: 9.5rem;
    height: 4.75rem;
    background-size: cover;
}

.slideBox .hd ul li:nth-child(4) {
    background: url(https://vispek-components.oss-cn-shenzhen.aliyuncs.com/senseen/banner-hd-04.webp);
    width: 9.5rem;
    height: 4.75rem;
    background-size: cover;
}

/* 选中状态移除蒙层 */
.slideBox .hd ul li.on::before {
    display: none;
}

.slideBox .hd ul li.on {
    color: #ffffff;
}

.slideBox .hd ul li.on>span {
    display: none;
}

.slideBox .bd {
    width: 100%;
    margin: 0 auto;
    position: relative;
}

.slideBox .bd li {
    position: absolute;
    width: 100%;
    height: 30rem;
    left: 0px;
    right: 0;
    top: 0px;
    display: none;
    background-size: cover;
    margin: auto;
}

.slideBox2 {
    width: 100%;
    height: 44.25rem;
    overflow: hidden;
    position: absolute;
    left: 0;
    right: 0px;
    top: 0px;
    border: 0;
    margin: 0 auto;
    z-index: 2
}

.slideBox2 .hd {
    height: 1.5rem;
    overflow: hidden;
    position: absolute;
    right: 0px;
    margin: 0 auto;
    bottom: 0;
    z-index: 1;
}

.slideBox2 .hd ul {
    overflow: hidden;
    zoom: 1;
    margin: 0 auto;
    width: 10rem;
}

.slideBox2 .hd ul li {
    float: left;
    margin-right: 0.9rem;
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    text-align: center;
    cursor: pointer;
    background: #d2d2d2;
}

.slideBox2 .hd ul li.on {
    background: #acacac;
    border-radius: 50%;
}

.slideBox2 .bd {
    width: 100%;
    margin: 0 auto;
    position: relative;
}

.slideBox2 .bd li {
    position: absolute;
    width: calc(100vw - 18rem) !important;
    height: 40.25rem;
    left: 0px;
    top: 0px;
    display: none;
    background-size: cover;
    border-radius: 2.2rem;
}

.slideBox3 {
    width: 100%;
    height: 31.8rem;
    overflow: hidden;
    position: absolute;
    left: 0;
    right: 0px;
    top: 0px;
    border: 0;
    margin: 0 auto;
    z-index: 2
}

.slideBox3 .hd {
    height: 1.5rem;
    overflow: hidden;
    position: absolute;
    right: 0px;
    margin: 0 auto;
    bottom: 0;
    z-index: 1;
}

.slideBox3 .hd ul {
    overflow: hidden;
    zoom: 1;
    margin: 0 auto;
    width: 10rem;
}

.slideBox3 .hd ul li {
    float: left;
    margin-right: 0.9rem;
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    text-align: center;
    cursor: pointer;
    background: #d2d2d2;
}

.slideBox3 .hd ul li.on {
    background: #acacac;
    border-radius: 50%;
}

.slideBox3 .bd {
    width: 100%;
    margin: 0 auto;
    position: relative;
}

.slideBox3 .bd li {
    position: absolute;
    width: 47rem !important;
    height: 27.8rem;
    left: 0px;
    top: 0px;
    display: none;
    background-size: cover;
    border-radius: 2.2rem;
}

.banner1_text {
    position: absolute;
    top: 0;
    left: 0;
    zoom: 1;
    /* transform: translateY(-50%); */
}

.mp_text {
    position: absolute;
    bottom: 2.3rem;
    right: 3.25rem;
    zoom: 1;
}

.support_text {
    position: absolute;
    top: 50%;
    zoom: 1;
    transform: translateY(-50%);
}

.head {
    position: relative;
}

.logo {
    background: url('https://vispek-components.oss-cn-shenzhen.aliyuncs.com/senseen/logo.png') no-repeat center;
    background-size: 100% auto;
    width: 6.2rem;
    height: 1.63155rem;
    display: inline-block;
    vertical-align: middle;
}

.logo2 {
    background: url('https://fis-gw.oss-cn-shenzhen.aliyuncs.com/image/logo.png') no-repeat center;
    background-size: cover;
    width: 108px;
    height: 108px;
}

.head_content {
    margin-top: 18.25rem;
    width: 100%;
}

.head_content_btn {
    display: inline-flex;
    padding: 0.4rem 1.8rem;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    border-radius: 1.5rem;
    background: var(--3, #2E9364);
    color: #ffffff;
    font-size: 0.7rem;
    cursor: pointer;
    /* 新增渐变色边框 */
    border: 1px solid transparent;
    background-clip: padding-box, border-box;
    background-origin: padding-box, border-box;
    background-image:
        linear-gradient(var(--3, #2E9364), var(--3, #2E9364)),
        linear-gradient(90deg, #2E9364 0%, #ffffff 100%);
}

section {
    position: relative;
    z-index: 0;
}

.section_content {
    width: 60rem;
    margin: 0 auto;
    text-align: center;
}

.section_title .line {
    display: table-caption;
    width: 74px;
    height: 9px;
    background: #44D695;
    margin: 0.5rem auto;
}

.section_title {
    font-size: 2rem;
    color: #242424;
    position: relative;
}

.section_title i {
    display: block;
    position: absolute;
    top: -37px;
    left: 0;
    right: 0;
    margin: auto;
    font-size: 1rem;
    color: #242424;
    opacity: 0.8;
    font-style: normal
}

.section_title .font_text {
    text-transform: Uppercase;
    opacity: 0.1;
    margin-top: -1rem;
    color: #242424;
}

.section_flex_piece {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 4rem auto;
}

.section_flex_piece2 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 4rem auto;
}

.section_flex_piece3 {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    margin: 4rem auto;
}

/* 页头结束 */
/* section 背景 */
.section_head {
    background-size: cover;
    width: 100%;
    height: 880px;
}

.flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.pa-device {
    position: absolute;
    left: 0;
    right: 0;
    top: -4.25rem;
    margin: auto;
    background-color: #fff;
    width: 9.5rem;
    height: 9.5rem;
    aspect-ratio: 1/1;
    border-radius: 50%;
    padding: 1rem;
    display: flex;
    align-items: center;
}

.gallery {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    /* 自适应列数，手机2列、平板3列、桌面3–4列 */
    /* grid-auto-rows: 220px; */
    /* 每行基础高度 */
    gap: 1rem;
    margin: 0 auto;
}

.gallery img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    display: block;
}

/* 关键：让部分图片跨行或跨列，形成高低错落 */
.tall {
    grid-row: span 2;
}

/* 竖着占2行 → 变高 */
.wide {
    grid-column: span 2;
}

/* 横着占2列 → 变宽 */
.big {
    grid-row: span 2;
    grid-column: span 2;
}

/* 占2×2，更大气，可选 */

/* home ----------- 开始 */
.home-section5-list {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.home-section5-list>div {
    width: 15.6rem;
    height: 15.15rem;
    border-radius: 1rem;
    background-color: rgba(0, 0, 0, .7);
    overflow: hidden;
    position: relative;
    padding: 1.4rem;
    cursor: pointer;
}

.home-section5-list img {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}

.home-section5-list svg {
    position: absolute;
    bottom: 1.4rem;
    right: 1.4rem;
    z-index: 1;
}

.home-section6-list {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.home-section6-list>div {
    /* width: 5.65rem; */
    /* height: 1.75rem; */
    border-radius: 1rem;
    background-color: #EEF2FE;
    padding: 0.3rem 0.75rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    color: #0055ff;
}


.home-button-line {
    padding: 0.2rem 0.9rem;
    background: #FFFFFF;
    border: 1px solid #666666;
    border-radius: 0.35rem;
    display: inline-block;
    border-radius: 999px;

}

.home-button-line2 {
    width: 5.65rem;
    height: 1.6rem;
    border: 1px solid #838383;
    border-radius: 0.8rem;
    display: inline-block;
    line-height: 0;
    background: transparent;
}

.home-button-line:hover,
.home-button-line2:hover {
    background: linear-gradient(269deg, #0345FF 0%, #016DFF 100%);
    border: 1px solid #016DFF;
    color: #ffffff;
}

.home-button-black {
    width: 5.65rem;
    height: 1.6rem;
    background: transparent;
    border: 1px solid #000000;
    border-radius: 0.8rem;
    display: inline-block;
    line-height: 0;
}

.home-button-black:hover {
    background: #000000;
    border: 1px solid #000000;
    color: #ffffff;
}

.home-button {
    width: 5.65rem;
    height: 1.6rem;
    background: transparent;
    border-radius: 0.8rem;
    display: inline-block;
    line-height: 0;
}

.home-button.blue {
    border: 1px solid #C0DAFF;
}

.home-button.blue:hover {
    background: #FFFFFF;
    border: 1px solid #FFFFFF;
    color: #000000 !important;
}

.home-button-section3 {
    padding: 0.4rem 1.8rem;
    background: #2E9364;
    color: #ffffff;
    border-radius: 1.5rem;
    border: 0;
    font-family: OPPOSans-R;
}

.home-list {
    line-height: 2rem;
    /* padding-top: 2.5rem; */
    height: 36rem;
}

.home-list p {
    font-size: 0.8rem;
    color: #9E9E9E;
    width: 12rem;
    margin-top: 0.5rem;
    display: none;
    line-height: 1.2rem;
    letter-spacing: 0.08rem;
}

.home-list div {
    padding: 0;
    font-size: 1rem;
    transition: padding .5s;
    -moz-transition: padding .5s;
    /* Firefox 4 */
    -webkit-transition: padding .5s;
    /* Safari and Chrome */
    -o-transition: padding .5s;
    /* Opera */
}

.home-list div:hover {
    /* padding: 3rem 0; */
    font-size: 1.1rem !important;
    color: #000000;
}

.home-list div.active {
    padding: 2.5rem 0;
    font-size: 1.1rem;
    color: #000000;
}

.home-list div.active p {
    display: block;
}

.home-list div:first-child.active {
    padding-top: 0 !important;
    padding-bottom: 2.5rem !important;
    font-size: 1.1rem !important;
    color: #000000;
}

.home-list div:last-child.active {
    padding-top: 2.5rem !important;
    padding-bottom: 0 !important;
    font-size: 1.1rem;
    color: #000000;
}

.home-list div:first-child:hover {
    /* padding-bottom: 3rem!important; */
    /* padding-top: 0!important; */
    font-size: 1.1rem;
    color: #000000;
}

.home-list div:last-child:hover {
    /* padding-top: 3rem!important; */
    /* padding-bottom: 0!important; */
    font-size: 1.1rem;
    color: #000000;
}

/* .home-list .active::before {
    content: '';
    display: inline-block;
    background: url('../img/right2.png')no-repeat center;
    background-size: cover;
    width: 0.55rem;
    height: 0.6rem;
    margin-right: 0.5rem;
} */

.home-point {
    display: inline-block;
    width: 0.3rem;
    height: 0.3rem;
    border-radius: 50%;
    background-color: #808080;
    vertical-align: 0.2rem;
}

/*
  animation-name: mymove;
    animation-duration: 1s;
    animation-fill-mode: forwards
@keyframes mymove {
    0% {padding: 0 0;}
    100% {padding: 3rem 0;}
} */
.home-block {
    box-shadow: 0px 0.5rem 1rem 1px rgba(4, 0, 0, 0.14);
    border-radius: 1.5rem;
    padding: 3.5rem 2.5rem;
    margin-top: -6rem;
    align-items: flex-start;
}

.home-block img {
    height: 2.5rem;
}

.home-steps {
    text-indent: -2.2rem;
    margin-left: 2.2rem;
}

.home-dev-card {
    position: absolute;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.50) 0%, rgba(0, 0, 0, 0.00) 100%);
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 1rem;
    border-radius: 1rem;
}

.home-dev-card:hover {
    background: transparent;
}

.steps-1::before {
    content: '1';
    width: 1.1rem;
    height: 1.1rem;
    border: thin solid #606060;
    border-radius: 50%;
    display: inline-block;
    text-align: center;
    font-size: 0.8rem;
    margin-right: 1rem;
    text-indent: 0;
}

.steps-2::before {
    content: '2';
    width: 1.1rem;
    height: 1.1rem;
    border: thin solid #606060;
    border-radius: 50%;
    display: inline-block;
    text-align: center;
    font-size: 0.8rem;
    margin-right: 1rem;
    text-indent: 0;
}

.steps-3::before {
    content: '3';
    width: 1.1rem;
    height: 1.1rem;
    border: thin solid #606060;
    border-radius: 50%;
    display: inline-block;
    text-align: center;
    font-size: 0.8rem;
    margin-right: 1rem;
    text-indent: 0;
}

.steps-4::before {
    content: '4';
    width: 1.1rem;
    height: 1.1rem;
    border: thin solid #606060;
    border-radius: 50%;
    display: inline-block;
    text-align: center;
    font-size: 0.8rem;
    margin-right: 1rem;
    text-indent: 0;
}

.steps-5::before {
    content: '5';
    width: 1.1rem;
    height: 1.1rem;
    border: thin solid #606060;
    border-radius: 50%;
    display: inline-block;
    text-align: center;
    font-size: 0.8rem;
    margin-right: 1rem;
    text-indent: 0;
}

/* 产品 */
.products-mp {
    width: 64.6rem;
    height: 31.5rem;
    border-radius: 2rem;
    padding: 2.5rem;
    cursor: pointer;
}

.products-mp:hover {
    color: #016EFF;
}

.products-mp:hover img {
    transform: scale(1.1, 1.1);
    transition: transform 1s;
}

.products-mp2 {
    width: 64.6rem;
    height: 31.5rem;
    border-radius: 2rem;
    padding: 2.5rem;
    cursor: pointer;
}

.products-mp2:hover {
    color: #016EFF;
}

.products-ul>div {
    width: 29.5rem;
    height: 31.5rem;
    display: inline-block;
    background-color: #ffffff;
    border-radius: 2rem;
    padding: 2.2rem;
    text-align: center;
    cursor: pointer;
}

.products-ul>div:hover {
    color: #016EFF;
}

.products-ul>div:hover img {
    transform: scale(1.1, 1.1);
    transition: transform 1s;
}

.products-arrows {
    /* width: 0.8rem; */
    margin-left: 1.75rem;
    display: inline-block;
    vertical-align: inherit;
    cursor: pointer;
    color: #808080;
    /* transform: rotate(180deg); */
    /* -webkit-transform: rotate(180deg); */
}

.products-arrows>svg {
    transform: rotate(270deg);
    vertical-align: middle;
    vertical-align: -0.2rem;
    margin-left: 0.3rem;
}

.products-arrows:hover {
    color: #ffffff;
}

.products-arrows.active {
    margin-left: 1.75rem;
    display: inline-block;
    vertical-align: inherit;
    color: #ffffff;
}

.products-arrows.active>svg {
    transform: rotate(90deg);
    vertical-align: middle;
    vertical-align: -0.2rem;
    transition: transform .5s;
}

/* developer ----- 开始 */
.developer-ul>div {
    width: 25.4rem;
    height: 35rem;
    display: inline-block;
    background-color: #EEEEEE;
    border-radius: 2rem;
    padding: 2.2rem;
    text-align: center;
    cursor: pointer;
    position: relative;
}

.developer-ul>div:hover {
    color: #016EFF;
}

.developer-ul>div:hover img {
    transform: scale(1.2, 1.2);
    transition: transform 1s;
}

.developer-item {
    border: 1px solid #9E9E9E;
    border-radius: 1.5rem;
    padding: 1.2rem 3.4rem;
    cursor: pointer;
}

.developer-item:hover {
    background-color: #EEEEEE;
}

.developer-item-black {
    background: #000000;
    border-radius: 1.5rem;
    padding: 0 3rem;
    display: none;
}

.developer-text-point {
    /* text-indent:-25px; */
}

.developer-text-point::before {
    content: '';
    background: #808080;
    width: 0.5rem;
    height: 0.5rem;
    display: inline-block;
    vertical-align: middle;
    border-radius: 50%;
    margin-right: 0.75rem;
}

/*  结束---------developer */
.news-top-title {
    font-size: 1.5rem;
    color: #000000;
    text-align: center;
    margin-top: 2rem;
}

.news-ul {
    display: flex;
    justify-content: flex-start;
    /* align-items: center; */
    height: 7.5rem;
    width: 100%;
    background-color: #ffffff;
    cursor: pointer;

}

.trapezoid-shape {
    padding: 0 0.5rem;
    height: 1rem;
    line-height: 1rem;
    background: black;
    color: #fff;
    font-size: 0.6rem;
    display: inline-block;
    position: absolute;
    /* 将元素右边缘对齐父元素右边缘 */
    right: 0;
    /* 使用transform将元素右移7.5px，实现超出效果 */
    transform: translateX(100%);
    top: 0;
    clip-path: polygon(0 0, 100% 0, calc(100% - 7.5px) 100%, 0 100%);
}

/* .news-ul>div {
    border-top: 1px solid #CCCCCC;
    margin-top: 3rem;
    cursor: pointer;
} */

.aboutus-text {
    position: absolute;
    bottom: 2rem;
    left: 2rem;
    color: #A6A8A7;
}

.aboutus-item {
    background: url('../img/about-img2.webp')no-repeat center;
    background-size: cover;
    width: 23rem;
    height: 11.7rem;
    border-radius: 0.3rem;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.aboutus-item-text {}

.aboutus-mange {
    background-color: rgba(0, 94, 255, 0.65);
    overflow: hidden;
    width: 100%;
    height: 0;
    position: absolute;
    bottom: 0;
    animation: 2s;
    border-radius: 2rem;
    padding: 0 2rem;
    text-align: unset
}

/* @keyframes fadenum12{
    0%{height: 0;}
    100%{height: 100%;}
 } */
.aboutus-arrow {
    width: 0;
    border-top: 0.4rem solid #808080;
    border-bottom: 0.4rem solid transparent;
    border-left: 0.4rem solid transparent;
    border-right: 0.4rem solid transparent;
    position: absolute;
    bottom: 4.2rem;
    left: 0;
    right: 0;
    margin: auto;
}

.aboutus-card {
    width: 10.25rem;
    height: 12.95rem;
    flex-shrink: 0;
    border-radius: 1rem;
    padding: 1.25rem 1.5rem;
    background: linear-gradient(180deg, #EEF2FE 0%, #FFF 100%);
}

.aboutus-card2 {
    width: 10.25rem;
    height: 12.95rem;
    flex-shrink: 0;
    border-radius: 1rem;
    padding: 1.25rem 1.5rem;
    background: linear-gradient(180deg, #FFF 0%, #EEF2FE 100%);
}


/* support ----- 开始 */
.support-itme {
    margin-top: 2.5rem;
    color: #808080;
    cursor: pointer;
}

.support-itme.active {
    color: #000000;
}

.support-itme.active::after {
    content: '';
    background: url('../img/right.png') no-repeat center;
    background-size: cover;
    width: 13px;
    height: 1.1rem;
    display: inline-block;
    margin-left: 1rem;
}

.support-content-text p {
    margin-top: 1.5rem;
}

footer {
    position: relative;
    z-index: 0;
    background-color: transparent !important;
}

/* 页头开始 */
.footer-nav {
    width: 100%;
    /* padding: 1rem 0; */
    color: #9E9E9E;
}

.footer-nav a {
    text-align: left;
    color: #ffffff;
    font-size: 0.7rem;
    font-family: 'OPPOSans-R';
    display: block;
    position: relative;
    padding-top: 1.25rem;
}

.footer-nav .active {
    /* border-bottom:2px solid #ffffff; */
    opacity: 1;
    color: #B3B3B3;
    font-family: Poppins-SemiBold;
    font-size: 1.1rem;
    /* padding-bottom: 25px; */
}

.footer-nav-logo {
    background: url('../img/svg/logo.svg') no-repeat center;
    background-size: cover;
    width: 8.5rem;
    height: 2.2rem;
}

.footer-box {
    background-color: #2E9364;
    padding: 3.3rem 0 1.6rem 0;
}

.wechat {
    background: url('../img/WeChat.png')no-repeat center;
    background-size: cover;
    width: 1.25rem;
    height: 1.25rem;
    display: inline-block;
    cursor: pointer;
    position: relative;
}

.wechat:hover {
    background: url('../img/WeChat-active.png')no-repeat center;
    background-size: cover;
    width: 1.25rem;
    height: 1.25rem;
    display: inline-block;
    cursor: pointer;
    position: relative;
}

.wechat:hover .wechat-ewm {
    display: inline-block;
}

.wechat .wechat-ewm {
    display: none;
}

.home-play {
    background-color: rgba(0, 0, 0, 0.36);
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 2rem;
    cursor: pointer;
}

.home-play img {
    position: relative;
    z-index: 1111111111;
}

.side_btn {
    position: fixed;
    right: 20px;
    bottom: 120px;
    width: 59px;
    z-index: 1;
    cursor: pointer;
    display: none;
    /* animation: myfirst .5s; */
}

.side_btn .up {
    background: url("../img/top.png")no-repeat center;
    background-size: cover;
    width: 59px;
    height: 59px;
    display: inline-block;
}

.side_btn .up:hover {
    background: url("../img/top2.png")no-repeat center;
    background-size: cover;
    width: 59px;
    height: 59px;
    display: inline-block;
}

.jump {
    width: 1.15rem;
    height: 0.45rem;
    margin-top: -1.3rem
}

.product-WT-item {
    width: 100%;
    height: 15.3rem;
    background: linear-gradient(0deg, #F5FDFF 0%, #95DAF9 100%);
    border-radius: 2rem;
    padding-left: 3rem;
}

.product-WT-item>div {
    margin-top: -3rem;
}

/* .product-water{
    width: 18.45rem;
    height: 25.55rem;
    display: inline-block;
} */

.product-water-item {
    width: 18.45rem;
    height: 25.55rem;
    display: inline-block;
    padding-top: 7.5rem;
}

.product-water-item.img1 {
    background: url("https://vispek-components.oss-cn-shenzhen.aliyuncs.com/web/product-water-scene1.webp")no-repeat center;
    background-size: cover;
}

.product-water-item.img2 {
    background: url("https://vispek-components.oss-cn-shenzhen.aliyuncs.com/web/product-water-scene2.webp")no-repeat center;
    background-size: cover;
}

.product-water-item.img3 {
    background: url("https://vispek-components.oss-cn-shenzhen.aliyuncs.com/web/product-water-scene3.webp")no-repeat center;
    background-size: cover;
}

.product-water-item.img4 {
    background: url("https://vispek-components.oss-cn-shenzhen.aliyuncs.com/web/product-water-scene4.webp")no-repeat center;
    background-size: cover;
}

.icon-right::before {
    content: '';
    background: url(https://vispek-components.oss-cn-shenzhen.aliyuncs.com/web/icon-right.png)no-repeat center;
    background-size: cover;
    width: 0.7rem;
    height: 0.85rem;
    display: inline-block;
    vertical-align: middle;
}

.case-btn {
    background: linear-gradient(180deg, #006EFF 0%, #0036CF 100%);
    color: #fff;
    border-radius: 999px;
    width: 9.5rem;
    height: 2.4rem;
    font-size: 1rem;
    cursor: pointer;
    border: 0;
}

.title-text {
    text-align: center;
    background: url(https://vispek-components.oss-cn-shenzhen.aliyuncs.com/website/title-banner.webp)no-repeat center;
    background-size: cover;
    width: 13rem;
    height: 5.7rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}

/* 本例子css -------------------------------------- */
.tabBox .hd {
    height: 3.4rem;
    line-height: 3.4rem;
    /* padding: 0 10px; */
    font-size: 0.9rem;
    background: #ffffff;
    /* border-bottom: 1px solid #D9D9D9; */
    /* margin: 0 1.6rem; */
}

.tabBox .hd ul {
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.tabBox .hd ul li:nth-child(1) {
    background-color: #e5eae4;
}

.tabBox .hd ul li:nth-child(2) {
    background-color: #8dcfb1;
}

.tabBox .hd ul li:nth-child(3) {
    background-color: #f3faf0;
}

.tabBox .hd ul li {
    /* float: left; */
    flex: 1;
    /* width: 7.5rem; */
    text-align: center;
    /* margin: 0 10px; */
    color: #000000;
    font-size: 0.9rem;
    border-radius: 0.5rem 0.5rem 0 0;
}

.tabBox .hd ul .on {
    /* border-bottom: 2px solid #000000; */
    color: #000;
    font-family: OPPOSans-M;
}

.tabBox .hd ul .on a {
    display: block;
    /* 修复Android 4.0.x 默认浏览器当前样色无效果bug */
}

.tabBox .bd div {
    padding: 2.9rem;
    border-radius: 0 0 0.5rem 0.5rem;
}

.tabBox .bd div:nth-child(1) {
    background-color: #e5eae4;
}

.tabBox .bd div:nth-child(2) {
    background-color: #8dcfb1;
}

.tabBox .bd div:nth-child(3) {
    background-color: #f3faf0;
}

.tabBox .bd .t {
    height: 85px;
    overflow: hidden;
}

.tabBox .bd .t .pic {
    width: 130px;
    float: left;
}

.tabBox .bd .t .con {
    margin-left: 130px;
    line-height: 20px;
}

.tabBox .bd .t .con p {
    font-size: 12px;
    color: #999;
}

.case-content-icon {
    margin-top: 2.4rem;
    height: 3.4rem;
    width: 100%;
    border-radius: 1rem 0 0 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    color: #0057FF;
    background: linear-gradient(90deg, #EEF2FE 0%, #ffffff 100%);
}

.case-content-icon img {
    height: 1.8rem;
    margin-left: 1.2rem;
}

.case-content-text {
    font-size: 0.8rem;
    line-height: 2.2rem;
}

.product-parameters {
    width: 100%;
    height: 100%;
}

.product-parameters-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 1.5rem;
    background-color: #F5F5F5;
}

.product-parameters-item:nth-child(odd) {
    background-color: #FFFFFF;
}

.product-parameters-item:nth-child(even) {
    background-color: #F5F5F5;
}

.product-parameters-item .title {
    width: 5rem;
    flex-shrink: 0;
    color: #000;
    text-align: left;
}

.product-parameters-item .describe {
    width: 100%;
    text-align: left;
    padding-left: 1.5rem;
}

.solution-index {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    margin-top: 1rem;
    text-align: left;
}

.solution-index .item {
    border-radius: 1rem;
    padding: 0.75rem 1rem;
}

.solution-index img {
    width: 4.8rem;
}

.solution-index-centent .solution-index:nth-child(odd) .item {
    background-color: #F3FAF0;
    color: #000000;
}

.solution-index-centent .solution-index:nth-child(even) .item {
    background-color: #2E9364;
    color: #ffffff;
}

.solution-index-centent-mini {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.solution-index-centent-mini .item:nth-child(odd) {
    background: linear-gradient(37deg, #E5EAE4 1.22%, rgba(255, 255, 255, 0.00) 98.78%);
    border-radius: 1rem;
    padding: 1.2rem;
}

.solution-index-centent-mini .item:nth-child(even) {
    background: linear-gradient(131deg, #E5EAE4 4.34%, rgba(255, 255, 255, 0.00) 95.66%);
    border-radius: 1rem;
    padding: 1.2rem;
}

.solution-index-mini {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    margin-top: 1rem;
    text-align: left;
}

.solution-index-mini img {
    width: 3.25rem;
}

.solution-index-centent-mini .item .solution-index-mini:nth-child(1) {
    margin-top: 0;
}