#uniview::-webkit-scrollbar {
    display: none;
}
#uniview {
    height: 100%;
    -ms-overflow-style: none;
    overflow-x: hidden;
}
.nvr-page {
    overflow: hidden;
    -ms-overflow-style: none;
    overflow: -moz-scrollbars-none;
}

.nvr-page::-webkit-scrollbar {
    width: 0 !important;
}

.wrapper-full {
    background-color: #fff;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    position: relative;
    font-size: 20px;
    height: 100vh;
    min-height: 500px;
}

.wrapper-full.gary {
    background-color: #fafafa;
}

.wrapper-full.bule {
    background-color: #eef5fe;
}

.wrapper-full.layer {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    height: 100vh;
}

.wrapper-full.layer .background {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

.wrapper-full.layer .background.pc {
    display: block;
}

.wrapper-full.layer .background.m {
    display: none;
}

.wrapper-full .app-container {
    height: 100%;
}

.wrapper-full.bule {
    display: flex;
    align-items: center;
}

.wrapper-full.bottom .app-container {
    display: flex;
    align-items: flex-end;
    overflow: hidden;
}

.wrapper-full.bottom.ray-level,
.wrapper-full.rain.single {
    min-height: 680px;
}


.wrapper-full.center .app-container {
    display: flex;
    align-items: center;
}

.ray-fit {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
}

.ray-banner,
.holder-banner {
    width: 100vw;
    height: 100vh;
    position: relative;
    overflow: hidden;
}

.ray-banner .bg,
.holder-banner .bg {
    width: 100%;
    height: 100%;
    animation: scaleDraw 6s 1;
    animation-fill-mode: forwards;
    animation-direction: alternate;
    position: relative;
    z-index: 0;
    background-size: cover;
    background-position: center center;
}


.ray-banner img,
.holder-banner img {
    width: 100%;
    height: 100%;
    -webkit-object-fit: cover;
    -moz-object-fit: cover;
    -o-object-fit: cover;
    -ms-object-fit: cover;
    object-fit: cover
}

.ray-banner .app-container,
.holder-banner .app-container {
    height: 100%;
    display: flex;
    align-items: center;
}

.ray-banner-slogan {
    width: 28.125vw;
    max-width: 550px;
    min-width: 200px;
    color: #fff;
}

.ray-banner-slogan img {
    width: 100%;
    height: auto;
    display: block;
}

.ray-banner-slogan .pic {
    animation: slideUp 1s 1;
    animation-delay: 500ms;
    animation-fill-mode: forwards;
    opacity: 0;
}

.ray-banner-slogan .text {
    animation: slideUp 1s 1;
    animation-delay: 1s;
    animation-fill-mode: forwards;
    opacity: 0;
    padding-top: 1em;
}

.ray-introduce {
    display: flex;
    align-items: center;
    padding-top: 3em;
}

.ray-introduce__pictrue {
    width: 52%;
}

.ray-introduce__pictrue img {
    width: 100%;
    height: auto;
    display: block;
}

.ray-introduce__infos {
    width: 48%;
    padding-left: 5%;
}

.ray-introduce__items {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.ray-introduce__items .item {
    width: 33.333333%;
    padding: 2em .5em;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.ray-introduce__items .item-icon {
    width: 60px;
    height: 60px;
    background-size: contain;
    background-repeat: no-repeat;
}

.ray-introduce__items .item-text {
    padding: .5em 0;
    text-align: center;
}

.ray-full-middle {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ray-full-middle.left {
    justify-content: flex-start;
}

.ray-full-middle.top {
    align-items: flex-start;
    color: #fff;
    padding-top: 3em;
}

.ray-introduce__slogan {
    color: #fff;
    padding: 0 8%;
    line-height: 2;
    text-align: center;
    font-size: 34px;
}

.ray-introduce__slogan span {
    width: 100%;
    display: block;
}

.ray-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 15%;
}

.ray-header__title {
    font-size: 80px;
    width: 40%;
    text-align: right;
}

.wrapper-full.guard-scene .inner-infos .title {
    font-size: 80px;
}

.ray-header__intro {
    color: #666;
    width: 35%;
    text-align: justify;
}

.ray-header.center {
    justify-content: center;
}

.ray-header-subltitle {
    font-size: 40px;
}


.ray-full-middle.left .ray-header,
.ray-full-middle.top .ray-header {
    color: #fff;
    flex-direction: column;
    align-items: flex-start;
    padding: 0;
}

.ray-full-middle.top .ray-header {
    align-items: center;
}

.ray-full-middle.left .ray-header__title {
    width: 80%;
    text-align: left;
}

.ray-full-middle.top .ray-header__title {
    width: 80%;
    text-align: center;
}

.ray-full-middle.left .ray-header__intro,
.ray-full-middle.top .ray-header__intro {
    width: 60%;
    color: #fff;
    margin-top: 1em;
    line-height: 1.8;
}

.ray-full-middle.top .ray-header__intro {
    text-align: center;
}

.ray-header__intro {
    font-size: 20px;
}

.ray-business {
    display: flex;
    margin-top: 40px;
}

.ray-business .swiper-container {
    width: 100%;
}

.ray-business .swiper-container .swiper-slide {
    width: 15.625%;
    height: 100%;
    padding: 0 10px;
    transition: .5s width;
    transform-origin: left top;
}

.ray-business .swiper-container .swiper-slide.active {
    width: 37.5%;
}

.ray-business .swiper-container .swiper-slide .slide {
    width: 100%;
    height: 600px;
    position: relative;
}

.ray-business .swiper-container .swiper-slide .slide::after {
    content: '\20';
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    position: absolute;
    background-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, .35) 70%, rgba(0, 0, 0, 1) 100%);
    z-index: 1;
}

.ray-business .swiper-container .swiper-slide .slide-bg {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

.ray-business .swiper-container .swiper-slide .slide-inner {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 1em;
    z-index: 2;
    display: flex;
    align-items: flex-end;
    padding: 1em;
    padding-bottom: 1.5em;
}

.ray-business .swiper-container .swiper-slide .slide-inner .infos {
    color: #fff;
    width: 100%;
    position: relative;
}

.ray-business .swiper-container .swiper-slide .slide-inner .title {
    font-size: 24px;
    text-align: center;
}

.ray-business .swiper-container .swiper-slide .slide-inner .intro {
    margin-top: .5em;
    opacity: 0;
    position: absolute;
    top: 100%;
    width: 100%;
    line-height: 1.6;
}

.ray-business .swiper-container .swiper-slide .slide-inner .intro span {
    display: inline-block;

}

.ray-business .swiper-container .swiper-slide .slide-inner .intro span {
    margin-right: 1em;
}

.ray-business .swiper-container .swiper-slide .slide-inner .intro span:last-child {
    margin-right: 0;
}

.ray-business .swiper-container .swiper-slide.active .slide-inner .infos {
    -ms-transform: translateY(-120%);
    transform: translateY(-120%);
    transition: .3s transform;
}

.ray-business .swiper-container .swiper-slide.active .slide-inner .infos .title {
    text-align: left;
}

.ray-business .swiper-container .swiper-slide.active .slide-inner .intro {
    opacity: 1;
    transition: .5s opacity;
}

.ray-precision {
    display: flex;
    justify-content: space-between;
    height: 80%;
    width: 100%;
    position: relative;
    align-items: flex-end;
}

.ray-precision-line {
    position: absolute;
    bottom: 92%;
    left: 35%;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, .35);
    border: 1px solid #000;
}


.ray-precision-line::after {
    content: '\20';
    height: 1px;
    left: 100%;
    background-color: #000;
    position: absolute;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 100vw;
    /* animation: line02 1.5s ;
    animation-direction: alternate-reverse;
    animation-iteration-count: infinite; */
}

.ray-precision__pictrue {
    width: 50%;
    height: auto;
    display: flex;
    position: relative;
}

.ray-precision__pictrue img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
}

.ray-precision__infos {
    width: 31%;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    height: 100%;
}

.ray-precision__infos .title {
    font-size: 50px;
    text-align: right;
}

.ray-precision__infos .intro {
    padding: 1em 0;
}

.ray-precision__infos .photo {
    width: 90%;
    margin-top: 2.2em;
    border-radius: 1em;
    overflow: hidden;
}

.ray-precision__infos img {
    width: 100%;
    height: auto;
    display: block;
}

.ray-scenario {
    display: flex;
    margin-top: 50px;
    position: relative;
    color: #fff;
}

.ray-scenario .swiper-container {
    width: 100%;
    border-radius: 1em;
}

.ray-scenario .slide {
    height: 700px;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

.ray-scenario .slide-inner {
    width: 100%;
    height: 100%;
    display: flex;
    padding: 3.5em;
    align-items: center;
    text-align: center;
    flex-direction: column;
}

.ray-scenario .slide-inner .title {
    font-size: 46px;
}

.ray-scenario .slide-inner .intro {
    margin-top: 1em;
    line-height: 1.8;
}

.ray-scenario .slide-inner .intro span {
    display: block;
}

.ray-scenario-tabs {
    display: flex;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 80px;
    border-top: 1px solid rgba(255, 255, 255, .1);
    z-index: 2;
}

.ray-scenario-tabs .tab {
    width: 25%;
    border-right: 1px solid rgba(255, 255, 255, .1);
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    color: rgba(255, 255, 255, .5);
    cursor: pointer;
}

.ray-scenario-tabs .tab:last-child {
    border-right: none;
}

.ray-scenario-tabs .tab.active {
    color: #fff;
}

.ray-rolling {
    background-color: #fff;
}

.ray-rolling-phone {
    display: none;
}

.ray-rolling .app-container {
    height: 100%;
}

.ray-rolling .ray-header {
    width: 100%;
    justify-content: center;
    align-items: center;
}

.ray-rolling .ray-header .ray-header__title {
    width: 100%;
    text-align: center;
}

.ray-rolling-image {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    background-color: #fff;
}

.ray-rolling-image-inner {
    height: 100%;
    width: 100%;
    transform: translateY(40%);
}

.ray-rolling-image .img {
    background-position: center 0px;
    background-size: auto 100%;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
}

.ray-rolling-image .img.cover {
    background-size: cover;
    background-position: right top;
}


.ray-rolling .screen-1 {
    width: 100%;
    height: 45%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
    flex-direction: column
}

.ray-rolling .screen-1 .title {
    font-size: 46px;
    font-weight: normal
}

.ray-rolling .screen-2 {
    width: 100%;
    height: 30%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    position: relative;
    z-index: 1;
    flex-direction: column
}

.ray-rolling .screen-2 .app-container {
    height: 100%;
    display: flex;
    align-items: flex-end;
}

.ray-rolling .screen-2 .text {
    width: 35%;
}

.ray-rolling .black .screen-2 .text {
    color: #fff;
}

.wrapper-main.nvr-switch {
    background-color: #fff;
    position: relative;
    margin-top: -35%;
}

.camera-page .wrapper-full.ordinary {
    padding-top: 2vw;
}

@media screen and (max-width:1920px) {
    .wrapper-full {
        font-size: 1.041vw;
    }

    .ray-introduce__slogan {
        font-size: 1.77vw;
    }

    .ray-introduce__items .item-icon {
        width: 3.125vw;
        height: 3.125vw;
    }

    .ray-introduce__pictrue {
        width: 40%;
    }

    .ray-introduce__infos {
        width: 60%;
    }

    .ray-header__title,
    .ray-rolling .screen-1 .title,
    .wrapper-full.guard-scene .inner-infos .title {
        font-size: 4.166667vw;
    }

    .ray-header-subltitle {
        font-size: 2.4vw;
    }

    .ray-business .swiper-container .swiper-slide .slide {
        height: 33.25vw;
    }

    .ray-business .swiper-container .swiper-slide .slide-inner .infos {
        font-size: .8333vw;
    }

    .ray-business .swiper-container .swiper-slide .slide-inner .title {
        font-size: 1.25vw;
    }

    .ray-business {
        margin-top: 2.6vw;
    }

    .ray-precision-line {
        width: 7.3vw;
        height: 7.3vw;
    }

    .ray-precision__infos .title {
        font-size: 2.6vw;
    }

    .ray-scenario .slide {
        height: 35.458333vw;
    }

    .ray-scenario {
        margin-top: 2.4vw;
    }

    .ray-scenario .slide-inner .title {
        font-size: 2.4vw;
    }

    .ray-scenario-tabs .tab {
        font-size: .95vw;
    }

    .ray-scenario-tabs {
        height: 4.2vw;
    }

    .ray-header__intro {
        font-size: 1.25vw;
    }
}

@media screen and (max-width:1600px) {
    .ray-precision__infos {
        height: auto;
        padding-bottom: 15%;
    }

    .ray-business .swiper-container .swiper-slide .slide {
        height: 30.25vw;
    }

}

@media screen and (max-width:1600px) {
    .ray-precision__pictrue {
        width: 48%;
    }

    .wrapper-full {
        max-height: 800px;
    }

    .camera-page .wrapper-full {
        max-height: none;
    }
}

@media screen and (max-width:1366px) {
    .ray-scenario .slide {
        height: 30vw;
    }

    .ray-full-middle.top {
        padding-top: 0;
    }

}

@media screen and (max-width:1280px) {

    .wrapper-full {
        max-height: 750px;
    }

    .camera-page .wrapper-full {
        max-height: none;
    }

    .camera-page .wrapper-full.ordinary {
        min-height: 400px;
    }

    .ray-banner-slogan,
    .ray-introduce__items .item-text {
        font-size: 14px;
    }

    .ray-introduce__slogan {
        font-size: 18px;
    }

    .ray-introduce__slogan span {
        display: inline;
    }

    .ray-introduce__items .item-icon {
        width: 35px;
        height: 35px;
    }
}

@media screen and (max-width:1024px) {
    .wrapper-full {
        height: auto;
        min-height: 600px;
        max-height: none;
    }


    .camera-page .wrapper-full {
        height: 100vh;
        min-height: 400px;
    }

    .wrapper-full.single {
        height: 56.25vh;
    }

    .wrapper-full.single.layer {
        height: 80vh;
    }

    #ray-introduce {
        height: auto !important;
    }

    .ray-business .swiper-container .swiper-slide .slide {
        height: 400px;
    }

    .ray-business {
        margin-left: -5%;
        margin-right: -10%;
    }

    .ray-business .swiper-container .swiper-slide {
        width: 100%;
    }

    .ray-business .swiper-container .swiper-slide .slide-inner .infos {
        -ms-transform: translateY(0%);
        transform: translateY(0);
        font-size: 12px;
        padding: 0;
        text-align: left;
    }

    .ray-business .swiper-container .swiper-slide.active .slide-inner .infos {
        -ms-transform: translateY(0%);
        transform: translateY(0);
    }

    .ray-business .swiper-container .swiper-slide .slide-inner .title {
        font-size: 18px;
        text-align: left;
    }

    .ray-business .swiper-container .swiper-slide .slide-inner .intro {
        opacity: 1;
        position: static;
        width: 100%;
        height: 2.8em;
    }

    .ray-business .swiper-container .swiper-slide .slide-inner .intro span {
        display: inline;
    }

    .ray-header {
        padding: 0;
    }

    .wrapper-main.nvr-switch {
        margin-top: 0;
    }

    .ray-header__title {
        text-align: left;
    }

    .ray-header__intro {
        width: 60%;
    }

    .ray-scenario-tabs .tab {
        font-size: 12px;
    }

    .ray-scenario-tabs {
        height: 40px;
    }

    .ray-scenario {
        margin-top: 25px;
    }

    .ray-header-subltitle {
        font-size: 24px;
    }

    /* [data-scroll-banner].ray-rolling {
        height: 168.75vh !important;
    }

    [data-scroll-banner].ray-rolling>[data-scroll-sticky] [data-section] {
        height: 56.25vh;
        overflow: hidden;
    }

    [data-scroll-banner].ray-rolling.is-scroll-end {
        align-items: flex-start
    }

    [data-scroll-banner].ray-rolling>[data-scroll-sticky] {
        width: 100%;
    }

    [data-scroll-banner].ray-rolling>[data-scroll-sticky] [data-section] {
        position: relative;
        width: 100vw;
        height: 56.25vh;
    }

    [data-scroll-banner].ray-rolling>[data-scroll-sticky] .background {
        opacity: 1 !important;
        position: static;
        width: 100%;
        height: 100%;
    }

    .ray-rolling .screen-1 {
        height: 25%;
    }

    .ray-rolling .screen-1,
    .ray-rolling .screen-2 {
        position: absolute;
        opacity: 1 !important;
        z-index: 1;
        left: 0;
        top: 0;
    }

    .ray-rolling .screen-2 .app-container {
        align-items: center;
    }

    .ray-rolling .screen-2 .text {
        width: 80%;
    }

    .ray-rolling-image-inner {
        transform: translateY(15%);
    }

    .ray-rolling-image .img {
        background-size: 90% auto;
    } */
    [data-scroll-banner].ray-rolling {
        display: none;
    }

    .ray-rolling-phone {
        display: block;
    }

    .ray-rolling-phone .seed-01 {
        height: 45vh;
        min-height: 350px;
        max-height: 500px;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
    }

    .ray-rolling-image-inner {
        transform: translateY(20%);
    }

    .ray-rolling-phone .seed-02 {
        min-height: 350px;
        max-height: 500px;
    }

    .ray-rolling-phone .seed-02 .slide {
        background-size: auto 100%;
        background-repeat: no-repeat;
        background-position: center right;
        padding-bottom: 52.83%;
    }

    .ray-rolling-phone .seed-02-inner {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        top: 0;
        z-index: 9;
        padding: 2.5em 0;
        font-size: 16px;
    }

    .ray-rolling-phone .seed-02-inner.bright {
        color: #fff;
    }

    .wrapper-full.rain {
        height: 60vh;
        background-size: 100% auto;
        background-color: #021a60;
        background-position: center bottom;
    }

    .ray-full-middle.top .ray-header__intro {
        width: 90%;
    }

    .wrapper-full.rain.single {
        min-height: 0;
    }
}

@media screen and (max-width:800px) {
    .ray-banner {
        height: 65vh;
    }

    .wrapper-full {
        font-size: 14px;
        min-height: 300px;
        max-width: none;
    }

    .ray-banner .bg {
        background-position: 70% center;
    }

    .ray-fit {
        bottom: 30%;
    }

    .ray-banner .app-container {
        justify-content: center;
    }

    .wrapper-full.single.layer {
        height: 60vh;
    }

    .ray-business {
        margin-top: 25px;
    }

    .ray-precision__infos .title {
        font-size: 18px;
    }

    .ray-precision__infos {
        height: auto;
        width: 40%;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        padding-bottom: 2.5em;
    }

    .ray-precision__infos .intro {
        font-size: 12px;
    }

    .ray-scenario .slide-inner .title {
        font-size: 18px;
    }

    .ray-full-middle.top {
        padding-top: 0;
    }

    .wrapper-full.layer .background.pc {
        display: none;
    }

    .wrapper-full.layer .background.m {
        display: block;
        background-size: auto 100%;
        background-position: center bottom;
        background-color: #031a4e;
    }

    .ray-full-middle.left {
        justify-content: center;
        align-items: flex-start;
    }

    .ray-full-middle.left .ray-header__title {
        width: 100%;
        text-align: center;
    }

    .ray-full-middle.left .ray-header__intro {
        text-align: center;
        width: 100%;
    }

    .ray-introduce__items .item {
        padding: .5em;
    }

    .ray-banner-slogan .text {
        text-align: center;
    }
}

@media screen and (max-width:650px) {
    .ray-precision {
        align-items: flex-start;
    }

    .ray-precision__pictrue {
        width: 55%;
    }

    .ray-precision__infos {
        padding-top: 1em;
        text-align: right;
    }

    .ray-introduce__items {
        margin: 0 -1em;
    }

    .nvr-banner.app-banner__home .swiper-slide .inner {
        top: 10%;
    }

    .ray-header__intro {
        font-size: 14px;
    }
}

@media screen and (max-width:550px) {
    .wrapper-content.no-bottom {
        height: 35vh;
        min-height: 300px;
    }

    .ray-banner-slogan,
    .ray-introduce__items .item-text {
        font-size: 12px;
    }

    .ray-rolling-phone .seed-01 {
        height: 35vh;
    }

    .ray-rolling-phone .title {
        font-size: 24px;
    }

    .wrapper-full {
        min-height: 200px;
    }

    .wrapper-full.rain {
        height: 45vh;
        background-size: 120% auto;
    }

    .ray-introduce {
        flex-direction: column;
    }

    .ray-introduce__pictrue {
        width: 80%;
    }

    .ray-introduce {
        padding-top: 0;
    }

    .ray-introduce__infos {
        width: 100%;
        padding-left: 0%;
    }

    .ray-introduce__slogan {
        font-size: 16px;
    }

    .ray-header {
        flex-direction: column;
    }

    .ray-header__title {
        width: 100%;
        font-size: 24px;
    }

    .ray-rolling .screen-1 .title {
        font-size: 24px;

    }

    .ray-header__intro {
        width: 100%;
        margin-top: 1em;
    }

    .ray-scenario .slide {
        height: 40vh;
    }

    .ray-header.center {
        align-items: center;
    }

    .ray-scenario .slide-inner {
        padding: 2.5em 1em;
    }

    .ray-precision {
        height: 90%;
    }

    .ray-precision__infos .photo {
        margin-top: 0;
    }

    .ray-rolling .screen-2 {
        height: 20%;
    }

    .ray-scenario .slide-inner .intro span {
        display: inline;
    }

    .wrapper-full.bottom.ray-level {
        min-height: 380px;
    }
}

@media screen and (max-width:400px) {
    .ray-full-middle.top .ray-header__intro {
        width: 95%;
    }

    .ray-precision__infos .title {
        font-size: 16px;
    }

    .ray-precision__infos {
        padding-bottom: 1.5em;
    }
}

/*阿宇页面*/
.app-banner.nvr-banner .slide-inner .inner .app-container {
    justify-content: center;
    align-items: flex-start;
    padding-top: 8%;
}

.app-banner.nvr-banner .slide-inner .inner .app-container .text {
    text-align: center;
    display: flex;
    align-items: center;
    flex-direction: column;
}

.app-banner.nvr-banner .slide-inner .inner .app-container .text .title {
    color: #0560f6;
    letter-spacing: 1px;
}

.app-banner.nvr-banner .slide-inner .inner .app-container .text .intro {
    color: #333333;
    margin-top: 0;
}

.app-banner.nvr-banner .slide-inner .inner .app-container .text .app-text-more.blue::before {
    display: none;
}

.app-banner.nvr-banner.app-banner__home .pager-content {
    bottom: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.app-banner.nvr-banner.app-banner__home .pager-content .app-banner__home-pagination {
    width: 150px;
    flex: 0 1 auto;
}


.app-banner.nvr-banner.app-banner__home .app-banner__home-pagination .swiper-pagination-bullet::before {
    background-color: rgba(204, 204, 204, .8);
}

.app-banner.nvr-banner.app-banner__home .app-banner__home-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active::after {
    background-color: #0560f6;
}

.nvr-common-title {
    font-size: 46px;
    text-align: center;
    line-height: 1;
}

.nvr-tabs {
    display: flex;
    justify-content: center;
}

.nvr-tabs .tab {
    display: flex;
    margin: 0 70px;
    width: 175px;
    flex-direction: column;
    cursor: pointer;
}

.nvr-tabs .tab-icon {
    margin-bottom: 1em;
}

.nvr-tabs .tab-icon img {
    width: 100%;
    height: auto;
    display: block;
}

.nvr-tabs .tab-text {
    font-size: 20px;
    text-align: center;
    width: 100%;
}

.nvr-tabs .tab.active .tab-text {
    color: #0560f6;
    position: relative;
}

.nvr-tabs .tab.active .tab-text::after {
    content: '\20';
    left: 50%;
    width: 60px;
    right: 0;
    bottom: -8px;
    background-color: #0560f6;
    height: 2px;
    position: absolute;
    transform: translateX(-50%);
}

.nvr-contents {
    padding-top: 4.15vw;
    position: relative;
}

.nvr-contents .content {
    opacity: 0;
    height: 0;
    visibility: hidden;
    overflow: hidden;

}

.nvr-contents .content.show {
    opacity: 1;
    height: auto;
    visibility: visible;
}

.nvr-swipers {
    position: relative;
}

.nvr-swipers-infos {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    z-index: 9;
}

.nvr-swipers-infos .app-container {
    height: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.nvr-swipers-infos .app-container .inner {
    width: 35%;
}

.nvr-swipers-infos .title {
    font-size: 80px;
    line-height: 1;
}

.nvr-tabs .tab-text {
    font-size: 20px;
    text-align: center;
    width: 100%;
}

.nvr-swipers-infos ul {
    padding-left: 1em;
    margin: 3vw 0 2.5vw;
    color: #666;
    font-size: 10px;
}

.nvr-swipers-infos ul li {
    padding: .5em 0;
}

.nvr-swipers-infos ul li a {
    font-size: 20px;
}

.nvr-swipers-infos ul li {
    color: #666;
}

.nvr-swipers-infos ul li:hover {
    color: #0560f6;
}

.nvr-swipers .slide {
    position: relative;
    height: 0;
    overflow: hidden;
}

.nvr-swipers .slide.pc {
    padding-bottom: 41.666667%;
}

.nvr-swipers .slide.m {
    padding-bottom: 177.866667%;
    display: none;
}

.nvr-swipers .slide img {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    object-fit: cover;
}

.nvr-swipers .pagination,
.nvr-market .pagination {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 60px;
    z-index: 9;
    display: flex;
    justify-content: center;
    padding-right: 35%;
}

.nvr-swipers .pagination .swiper-pagination-bullet,
.nvr-market .pagination .swiper-pagination-bullet {
    width: 30px;
    height: 20px;
    background-color: transparent;
    border-radius: 0;
    opacity: 1;
    margin: 0 5px;
    position: relative;
}

.nvr-swipers .pagination .swiper-pagination-bullet::after,
.nvr-market .pagination .swiper-pagination-bullet::after {
    content: '\20';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background-color: #ccc;
}

.nvr-swipers .pagination .swiper-pagination-bullet-active::after,
.nvr-market .pagination .swiper-pagination-bullet-active::after {
    background-color: #0560f6;
}

.nvr-swipers.reverse .nvr-swipers-infos .app-container {
    justify-content: flex-start;
}

.nvr-swipers.reverse .nvr-swipers-infos .title {
    color: #fff;
}

.nvr-swipers.reverse .nvr-swipers-infos ul {
    color: #999;
}

.nvr-swipers.reverse .nvr-swipers-infos ul li,
.nvr-swipers.reverse .nvr-swipers-infos ul li a {
    color: #999;
}

.nvr-swipers.reverse .nvr-swipers-infos ul li:hover,
.nvr-swipers.reverse .nvr-swipers-infos ul li a:hover {
    color: #fff;
}

.nvr-swipers.reverse .pagination {
    padding-right: 0;
    padding-left: 35%;
}

.nvr-modules {
    display: flex;
    margin: -12.5px;
}

.nvr-modules .column {
    padding: 0 .5em;
    display: flex;
    flex-direction: column;
}

.nvr-modules .row {
    display: flex;
    width: 100%;
}

.nvr-modules .row .inner-warp {
    width: 50%;
}

.nvr-modules .row .inner-warp:first-child {
    padding-right: .5em;
}

.nvr-modules .row .inner-warp:last-child {
    padding-left: .5em;
}

.nvr-modules .column.small {
    width: 25%;
}

.nvr-modules .column.big {
    width: 50%;
}

.nvr-modules .inner-warp {
    padding: .5em 0;
}

.nvr-modules .inner {
    border-radius: 1em;
    height: 0;
    font-size: 34px;
    padding-bottom: 55.5%;
    position: relative;
    overflow: hidden;
    transform: rotate(0deg);
}

.nvr-modules .inner-bg {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    transform: scale(1);
    transition: .3s ease;
}

.nvr-modules .inner:hover .inner-bg {
    transform: scale(1.15);
    transition: .3s ease;
}

.nvr-modules-inne-post {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    padding: .5em .8em;
}

.nvr-modules-inner-title {
    color: #000;
    font-size: 34px;
}

.nvr-modules-inner-intro {
    color: #666;
    font-size: 20px;
}

.nvr-modules .inner.short {
    padding-bottom: 71.5%;
}

.nvr-modules .inner.long {
    padding-bottom: 114.3%;
}

.nvr-modules-phone {
    display: none;
}

.nvr-market {
    position: relative;
    display: none;
}

.nvr-market .slide {
    display: flex;
    background-color: #fbfbfb;
    align-items: center;
    position: relative;
    flex-direction: column;
}

.nvr-market .slide-pictrue {
    margin-top: 1em;
}

.nvr-market .slide-pictrue img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.nvr-market .slide-inner {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: space-between;
    padding: 5%;
    font-size: 3.5vw;
    min-height: 300px;
}

.nvr-market .slide-inner .head-tag {
    color: #000;
    font-size: 3.2vw;
}

.nvr-market .slide-inner .head-title {
    color: #333;
    white-space: nowrap;
    font-size: 3.5vw;
}

.nvr-market .slide-inner .head-slogan {
    font-size: 6.13vw;
    color: #0560f6;
    margin-top: 1vw;
}

.nvr-market .slide-inner .head-slogan span {
    color: #000;
}

.nvr-market .slide-inner .middle {
    padding: 3vw 0;
}

.nvr-market .slide-inner .middle li {
    list-style: none;
    color: #666;
    padding: .2em 0;
    font-size: 3.5vw;
    white-space: nowrap;
}

.nvr-market-pc {
    position: relative;
}

.nvr-market-pc .app-container {
    width: 90%;
}

.nvr-market-pc .wrapper {
    width: 300%;
    height: 100%;
    display: flex;
    justify-content: flex-end;
}

.nvr-market-pc .slide {
    width: 100vw;
    height: 100%;
    position: relative;
    display: flex;
}

.nvr-market-pc .slide .slide-pictrue {
    width: 60%;
    height: 100%;
    max-width: 1800px;
}

.nvr-market-pc .slide .slide-pictrue img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.nvr-market-pc .slide .slide-post {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    z-index: 1;
}

.nvr-market-pc .slide .slide-post .app-container {
    height: 100%;
    display: flex;
    justify-content: flex-end;
}

.nvr-market-pc .slide .slide-inner {
    width: 65%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: space-between;
    padding: 10%;
    padding-right: 0;
    margin-right: -2.5%;
    padding-left: 35%;
}

.nvr-market-pc .slide-inner .head-slogan {
    font-size: 2.4vw;
    color: #0560f6;
    margin-top: 1vw;
}

.nvr-market-pc .slide-inner .head-slogan span {
    color: #000;
}

.nvr-market-pc .slide .slide-inner .head-tag {
    color: #000;
}

.nvr-market-pc .slide .slide-inner .head-title {
    color: #333;
    white-space: nowrap;
}

.nvr-market-pc .slide.slide-inner .head-slogan {
    font-size: 46px;
    color: #0560f6;
    margin-top: 1em;
}

.nvr-market-pc .slide.slide-inner .head-slogan span {
    color: #000;
}

.nvr-market-pc .slide .slide-inner .middle {
    padding: 1.5em 0;
}

.nvr-market-pc .slide .slide-inner .middle li {
    list-style: none;
    color: #666;
    padding: .2em 0;
    white-space: nowrap;
}


@media screen and (max-width:1920px) {
    .nvr-common-title {
        font-size: 2.4vw;
    }

    .nvr-swipers-infos .title {
        font-size: 4.1666667vw;
    }

    .nvr-tabs .tab-text {
        font-size: 1.05vw;
        white-space: nowrap;
    }

    .nvr-modules-inner-intro,
    .nvr-swipers-infos ul li a,
    .nvr-market .slide-inner {
        font-size: 1.05vw;
    }

    .nvr-tabs .tab {
        margin: 0 3.6vw;
        width: 10vw;
    }

    .nvr-tabs .tab-icon {
        margin-bottom: 1em;
    }

    .nvr-tabs .tab-icon img {
        width: 100%;
        height: auto;
        display: block;
    }

    .nvr-swipers .pagination,
    .nvr-market .pagination {
        bottom: 3.125vw;
    }

    .nvr-modules-inner-title {
        font-size: 1.78vw;
    }

    .nvr-market-pc .slide .slide-inner {
        width: 50%;
        padding-left: 15%;
    }
}

@media screen and (max-width:1440px) {
    .nvr-market-pc .slide .slide-inner {
        padding: 5% 10% 15%;
    }

    .nvr-market-pc .slide .slide-pictrue {
        width: 55%;
    }
}


@media screen and (max-width:1023px) {
    .app-banner.nvr-banner .slide-inner .inner .app-container {
        padding-top: 20%;
    }

    .nvr-common-title {
        font-size: 24px;
    }

    .nvr-common-title h2 {
        font-size: 24px;
    }

    .nvr-tabs .tab {
        width: 33.33333%;
    }

    .nvr-tabs .tab-icon {
        padding: 0;
    }

    .nvr-tabs .tab-text {
        font-size: 16px;
    }

    .nvr-modules .inner {
        font-size: 18px;
    }

    .nvr-modules .inner-intro {
        font-size: 14px;
    }

    .nvr-modules {
        display: flex;
        margin: -5px;
    }

    .nvr-modules .column {
        padding: 0 5px;
    }

    .nvr-modules .row .inner-warp {
        padding: 5px;
    }

    .nvr-modules .inner-warp {
        padding: 5px 0;
    }

    .nvr-market {
        display: block;
    }

    .nvr-market-pc {
        display: none;
    }

    .nvr-modules-inner-intro,
    .nvr-swipers-infos ul li a,
    .nvr-market .slide-inner {
        font-size: 14px;
    }
}

@media screen and (max-width:750px) {
    .nvr-modules {
        display: none;
    }

    .nvr-modules-phone {
        padding-top: 3.5vw;
        display: flex;
        flex-wrap: wrap;
        margin: 0 -.5em;
    }

    .nvr-modules-phone .inner-warp {
        padding: .5em;
        width: 100%;
    }

    .nvr-modules-phone .inner-warp.short {
        width: 50%;
    }

    .nvr-modules-phone .inner {
        padding-bottom: 37.5%;
        border-radius: 1em;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center center;
        position: relative;
    }

    .nvr-modules-phone .inner.samll {
        padding-bottom: 71.5%;
    }

    .nvr-modules-inner-title {
        font-size: 4.5vw;
    }
}

@media screen and (max-width:650px) {
    .app-banner.nvr-banner.app-banner__home .pager-content {
        bottom: 20px;
    }

    .nvr-swipers-infos .app-container .inner {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .nvr-swipers-infos .title {
        font-size: 24px;
    }

    .nvr-swipers-infos ul li a {
        font-size: 16px;
    }

    .nvr-swipers-infos .app-container {
        justify-content: center;
        align-items: flex-start;
        padding-right: 0%;
        padding-top: 15%;
    }

    .nvr-swipers .slide.pc {
        display: none;
    }

    .nvr-swipers .slide.m {
        display: block;
    }

    .nvr-tabs .tab-text {
        font-size: 14px;
    }

    .nvr-swipers .pagination,
    .nvr-market .pagination {
        bottom: 30px;
        padding-right: 0;
    }

    .nvr-swipers.reverse .pagination {
        padding-left: 0;
    }

    .nvr-market .slide-inner {
        height: 450px;
    }

    .ray-rolling-phone .seed-02 .slide {
        height: 50vh;
    }

    .ray-rolling-phone .seed-02-inner {
        padding-top: 1.5em;
    }

    .nvr-modules-inner-intro,
    .nvr-swipers-infos ul li a,
    .nvr-market .slide-inner {
        font-size: 12px;
    }

    .app-banner.nvr-banner .slide-inner .inner .app-container {
        padding-bottom: 30%;
    }
}

@media screen and (max-width:600px) {
    .nvr-market .slide-inner {
        height: 400px;
    }
}

@media screen and (max-width:550px) {
    .nvr-market .slide-inner {
        height: 360px;
    }
}

@media screen and (max-width:400px) {
    .nvr-market .slide-inner {
        height: 40vh;
    }

    .wrapper-full.rain {
        height: 50vh;
    }

    .ray-business .swiper-container .swiper-slide .slide-inner .intro {
        height: 4.2em;
    }
}

/*双摄*/
/* .camera-page .app-body {
    background-color: #030303;
} */
.camera-page {
    background-color: #021a60;
}

.holder-page {
    position: relative;
}

.camera-wrappOne {
    background-color: #030303;
}
.camera-wrappTwo {
    background-color: #fff;
}
.camera-page .wrapper-content {
    padding-top: 6vw;
    padding-bottom: 2.5vw;
}

.camera-page .app-footer.show,
.guard-page .app-footer.show,
.holder-page .app-footer.show {
    padding-top: 20px;
}

.cam-banner {
    width: 100vw;
    height: 100vh;
    position: relative;
    overflow: hidden;
    background-color: #030303;
}

.cam-banner-flex {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    flex-direction: column;
}

.cam-banner-flex .cam-small {
    color: #cccccc;
    font-size: 2.1vw;
    letter-spacing: 10px;
}

.cam-banner-flex .cam-big {
    font-size: 7.2vw;
    padding: 5px 0;
    background: linear-gradient(90deg, #aeadad 0%, #fff 25%, #fff 40%, #aeadad 80%);
    background-clip: text;
    background-size: 100% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: rgba(0, 0, 0, 0);
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    color: #ffffff\0;
    text-align: justify;
    line-height: 1;
}

.cam-part01 {
    padding: 12vw 0 6vw;
    background: url(../Technology/Camera/cam-back-01.jpg) no-repeat;
    background-size: cover;
    background-position: 50% 100%;
    margin-top: -20vw;
    background-color: #030303;
}

.cam-part01 .app-container {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.cam-part01-content {
    display: flex;
    gap: 20px;
}

.cam-part01-content__left {
    max-width: 409px;
    max-height: 748px;
    width: 19.3vw;
    height: 36vw;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    margin-top: 6.7vw;
}

.cam-part01-content__left .positon {
    position: absolute;
    right: 110%;
    top: 32%;
}

.cam-part01-content__right {
    max-width: 422px;
    max-height: 776px;
    width: 17.5vw;
    height: 33vw;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
}

.cam-part01-content__right .positon {
    position: absolute;
    left: 110%;
    top: 42%;
}

.cam-part01-content .cam-inner {
    white-space: nowrap;
    text-align: right;
}

.cam-part01-content .cam-inner-title {
    font-size: 1.5625vw;
    color: #cccccc;
}

.cam-part01-content .cam-inner-intro {
    font-size: 1.875vw;
    color: #fff;
    margin-top: .5em;
}

.cam-part01-content__right .positon .cam-inner {
    text-align: left;
}

.cam-part02-back {
    background-color: #09090a;
}

.cam-part02-back .app-container {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cam-part02-back .inner-text-wrap {
    flex-direction: column;
    display: flex;
}

.cam-part02-back .inner-text[data-double-top],
.cam-part02-back .inner-text[data-double-bottom] {
    font-weight: 500;
    font-size: 7.2vw;
    padding: 5px 0;
    background: linear-gradient(65deg, #dde1e4 0%, #f6fbfe 25%, #b9bdc0 40%, #a3a6a9 70%);
    background-clip: text;
    background-size: 100% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: rgba(0, 0, 0, 0);
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    color: rgba(0, 0, 0, 0);
    color: #ffffff\0;
    text-align: justify;
    line-height: 1;
    height: 10vw;
}

.cam-part02-back .inner-text[data-double-bottom] {
    font-weight: 500;
    font-size: 7.3vw;
    padding: 5px 0;
    background: linear-gradient(265deg, #dde1e4 0%, #f6fbfe 25%, #b9bdc0 40%, #a3a6a9 70%);
    background-clip: text;
    background-size: 100% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: rgba(0, 0, 0, 0);
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    color: rgba(0, 0, 0, 0);
    color: #ffffff\0;

}

.cam-part02-back .inner-text::after {
    content: '\20';
    font-size: 0 !important;
    height: 0;
    width: 100%;
    line-height: 0;
    display: inline-block;
}


.camera-page .inner-pictrue-wrap {
    position: absolute;
    left: 50%;
    top: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 52%;
}

.camera-page .inner-pictrue {
    padding-bottom: 60%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    border-radius: 1em;
}

.camera-page .inner-pictrue-post {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.camera-page .inner-pictrue-post span {
    font-size: 4.16vw;
    color: #fff;
}

.cam-part02-fullView-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.cam-part02-fullView {
    position: relative;
    min-height: 200px;
    height: 41.65vw;
    max-height: 800px;
    overflow: hidden;
    width: 100%;
    max-width: 1920px;
}

.cam-part02-fullView-inner {
    position: absolute;
    left: 25%;
    right: 25%;
    top: 0;
    bottom: 0;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    border-radius: 35px;
}

/* 
.cam-part02-fullView .cam-mask-after {
    background-color: #fafafa;
    position: absolute;
    left: 0;
    right: 75%;
    top: 0;
    bottom: 0;
    z-index: 1;
}

.cam-part02-fullView .cam-mask-before {
    background-color: #fafafa;
    position: absolute;
    right: 0;
    left: 75%;
    top: 0;
    bottom: 0;
    z-index: 1;
} */

.cam-bothway {
    display: flex;
    margin-top: 7vw;
    align-items: stretch;
}

.cam-bothway-small {
    width: 39.23%;
}

.cam-bothway-small-inner {
    max-height: 560px;
    height: 29.15vw;
    min-height: 300px;
    position: relative;
    border-radius: 2em;
    overflow: hidden;
    transform: rotate(0deg);
}

.cam-bothway-small-inner .cam-pictrue {
    height: 100%;
    width: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: .3s transform;
}

.cam-bothway-small-inner .cam-pictrue.zoom {
    -ms-transform: scale(1.1);
    transform: scale(1.1);
    transition: .3s transform;
}

.cam-bothway-small-inner .cam-bothway-small-mask {
    position: absolute;
    bottom: 0;
    left: 0;
    top: 0;
    right: 0;
    background-image: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.5) 20%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0));
    display: flex;
    align-items: flex-end;
    padding: 2em;
    color: #fff;
}

.cam-bothway-small-mask-before {
    background-color: rgba(255, 255, 255, .85);
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}


.cam-bothway-small-inner .cam-bothway-small-mask span {
    font-size: 30px;
}

.cam-bothway-small-inner .cam-bothway-small-cover {
    max-width: 114px;
    max-height: 223px;
    width: 13.3%;
    height: 11.8vw;
    background: url(../Technology/cam-zoom.png) no-repeat;
    background-size: 100% 100%;
    position: absolute;
    top: 40%;
    left: 0;
    cursor: pointer;
    z-index: 9;
}

.cam-bothway-small-inner .cam-bothway-small-cover::after {
    content: '\20';
    max-width: 50px;
    max-height: 50px;
    width: 2.5vw;
    height: 2.5vw;
    min-width: 25px;
    min-height: 25px;
    background: url(../Technology/hand.png) no-repeat;
    background-size: contain;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.cam-bothway-big {
    width: 60.76%;
    padding-left: 2em;
}

.cam-bothway-detail {
    height: 100%;
    width: 100%;
    position: relative;
}

.cam-bothway-detail-pc {
    display: block;
    width: 100%;
    height: 100%;
}

.cam-bothway-detail-m {
    display: none;
}

.cam-bothway-detail .cam-screen-01,
.cam-bothway-detail .cam-screen-02,
.cam-bothway-detail .cam-screen-03 {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
}

.cam-bothway-detail .cam-bothway-detail-pc>div .cam-back {
    padding-bottom: 59.722222%;
    height: 0;
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: center center;
}

.cam-bothway-detail .cam-bothway-detail-pc .cam-screen-01 .cam-item-01 {
    width: 37.5%;
    border-top: 1px solid #fff;
    position: absolute;
    top: 33%;
    right: 63.5%;
    padding-top: .5em;
    height: 50px;
}

.cam-bothway-detail .cam-bothway-detail-pc .cam-screen-01 .cam-item-01 .line {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 1px;
    height: 14vw;
    background-color: #fff;
}

.cam-bothway-detail .cam-bothway-detail-pc .cam-screen-01 .cam-item-02 {
    width: 34.5%;
    border-top: 1px solid #fff;
    position: absolute;
    bottom: 13%;
    right: 65.5%;
    padding-top: .5em;
    height: 50px;
}

.cam-bothway-detail .cam-bothway-detail-pc .cam-screen-01 .cam-item-03 {
    width: 31.5%;
    border-top: 1px solid #fff;
    position: absolute;
    top: 46%;
    left: 68.5%;
    padding-top: .5em;
    text-align: right;
}

.cam-bothway-detail .cam-bothway-detail-pc .cam-screen-01 .cam-item-03 .line {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 1px;
    height: 10vw;
    background-color: #fff;
}

.cam-bothway-detail .cam-bothway-detail-pc .cam-screen-01 .cam-item-04 {
    width: 37%;
    border-top: 1px solid #fff;
    position: absolute;
    bottom: 11%;
    left: 63%;
    padding-top: .5em;
    text-align: right;
}

.cam-bothway-detail .cam-bothway-detail-pc span {
    font-size: 1.5625vw;
    color: #fff;
}

.cam-bothway-detail .cam-bothway-detail-pc .cam-screen-02,
.cam-bothway-detail .cam-bothway-detail-pc .cam-screen-03 {
    opacity: 0;
}

.cam-bothway-detail .cam-bothway-detail-pc .cam-screen-02 .cam-item-01 {
    width: 38%;
    border-top: 1px solid #fff;
    position: absolute;
    top: 25%;
    right: 61.5%;
    padding-top: .5em;
    height: 50px;
}

.cam-bothway-detail .cam-bothway-detail-pc .cam-screen-02 .cam-item-01 .line {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 1px;
    height: 5.5vw;
    background-color: #fff;
}

.cam-bothway-detail .cam-bothway-detail-pc .cam-screen-02 .cam-item-02 {
    width: 32%;
    border-top: 1px solid #fff;
    position: absolute;
    top: 40%;
    right: 68%;
    padding-top: .5em;
    height: 50px;
}

.cam-bothway-detail .cam-bothway-detail-pc .cam-screen-02 .cam-item-03 {
    width: 34%;
    border-top: 1px solid #fff;
    position: absolute;
    bottom: 16%;
    right: 66%;
    padding-top: .5em;
}

.cam-bothway-detail .cam-bothway-detail-pc .cam-screen-02 .cam-item-04,
.cam-bothway-detail .cam-bothway-detail-pc .cam-screen-03 .cam-item-04 {
    width: 15%;
    border-top: 1px solid #fff;
    position: absolute;
    top: 11%;
    left: 80%;
    padding-top: .5em;
    text-align: left;
}

.cam-bothway-detail .cam-bothway-detail-pc .cam-screen-02 .cam-item-05 {
    width: 32%;
    border-top: 1px solid #fff;
    position: absolute;
    top: 37%;
    left: 68%;
    padding-top: .5em;
    text-align: right;
}

.cam-bothway-detail .cam-bothway-detail-pc .cam-screen-02 .cam-item-06 {
    width: 34%;
    border-top: 1px solid #fff;
    position: absolute;
    top: 74%;
    left: 66%;
    padding-top: .5em;
    text-align: right;
}

.cam-bothway-detail .cam-bothway-detail-pc .cam-screen-03 .cam-item-01 {
    width: 30%;
    border-top: 1px solid #fff;
    position: absolute;
    top: 47%;
    right: 70%;
    padding-top: .5em;
    text-align: left;
}

.cam-bothway-detail .cam-bothway-detail-pc .cam-screen-03 .cam-item-02 {
    width: 42%;
    border-top: 1px solid #fff;
    position: absolute;
    top: 77%;
    right: 58%;
    padding-top: .5em;
    text-align: left;
}

.cam-bothway-detail .cam-bothway-detail-pc .cam-screen-03 .cam-item-03 {
    width: 35.5%;
    border-top: 1px solid #fff;
    position: absolute;
    top: 76%;
    left: 64.5%;
    padding-top: .5em;
    text-align: right;
}


.cam-bseries {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    margin: -12.5px;
    margin-top: 5.2vw;
}

.cam-bseries-small {
    width: 33.33333%;
    padding: 12.5px;
}

.cam-bseries-wrap {
    transform: rotate(0deg);
    max-height: 460px;
    height: 23.95vw;
    min-height: 230px;
    border-radius: 2em;
    overflow: hidden;
    position: relative;
}

.cam-bseries-wrap img {
    width: 100%;
    height: 100%;
    object-fit: fill;
    transform: scale(1);
    transition: .3s ease;
}

.cam-bseries-wrap:hover img {
    transform: scale(1.1);
    transition: .3s ease;
}

.cam-bseries-mask {
    position: absolute;
    bottom: 0;
    left: 0;
    top: 0;
    right: 0;
    background-image: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%,
            rgba(0, 0, 0, 0.5) 30%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.5) 85%, rgba(0, 0, 0, 0.2) 100%);
    display: flex;
    align-items: flex-end;
    padding: 2em;
    padding-bottom: 1em;
    color: #fff;
}

.cam-bothway-small-inner .cam-bothway-small-mask span {
    font-size: 1.5625vw;
}

.cam-bseries-big {
    width: 66.66666%;
    padding: 12.5px;
}

.cam-bseries-tips {
    text-align: right;
    margin-top: 2em;
    font-size: 1.1vw;
    color: #949494;
}
.cam-part05 {
    position: relative;
}
.cam-part05::after {
    content: '\20';
    bottom: -5px;
    position: absolute;
    left: 0;
    right: 0;
    height: 10px;
    background-color: #090909;
}
@media screen and (min-width:1920px) {
    .cam-banner-flex .cam-big {
        font-size: 140px;
    }

    .cam-part02-back .inner-pictrue-post span {
        font-size: 80px;
    }

    .cam-bothway-detail .cam-screen-01 span {
        font-size: 30px;
    }

    .cam-banner-flex .cam-small {
        font-size: 40px;
    }

    .cam-part01-content .cam-inner-title {
        font-size: 30px;
    }

    .cam-part01-content .cam-inner-intro {
        font-size: 36px;
    }

    .cam-bseries-tips {
        font-size: 20px;
    }
}


@media screen and (max-width:1440px) {
    .cam-bothway {
        margin-top: 4vw;
    }

    .camera-page .wrapper-content {
        padding-top: 5vw;
    }

    .cam-part01-content__left {
        width: 17vw;
        height: 31.7vw;
    }

    .cam-part01-content__right {
        width: 16vw;
        height: 33vw;
    }

    .cam-bothway-small-inner {
        height: 26.15vw;
        min-height: 240px;
    }

    .cam-bothway-small-inner .cam-bothway-small-mask {
        padding: 1em 2em;
    }

}

@media screen and (max-width:1180px) {
    .cam-banner-flex .cam-small {
        font-size: 24px;
    }

    .cam-banner-flex .cam-big {
        font-size: 64px;
    }

    .cam-part01-content .cam-inner-title {
        font-size: 20px;
    }

    .cam-part01-content .cam-inner-intro {
        font-size: 28px;
    }
}

@media screen and (max-width:950px) {
    .cam-part01 {
        padding: 5vw 0 5vw;
    }


    .cam-part01-content {
        flex-direction: column;
        width: 100%;
    }

    .cam-part01-content__left {
        max-width: none;
        max-height: none;
        width: 40%;
        height: 30vh;
        margin-top: 4.7vw;
        margin-left: 60%;
    }

    .cam-part01-content__right {
        max-width: none;
        max-height: none;
        width: 35%;
        height: 28vh;
        margin-top: 2.5vw;
    }

    .cam-part01-content__right .positon {
        position: absolute;
        left: 110%;
        top: 42%;
    }

    .cam-part01-content .cam-inner {
        white-space: nowrap;
        text-align: right;
    }

    .cam-part01-content .cam-inner-title {
        font-size: 18px;
    }

    .cam-part01-content .cam-inner-intro {
        font-size: 20px;
    }

    .cam-part02-back .inner-text[data-double-top],
    .cam-part02-back .inner-text[data-double-bottom] {
        font-size: 40px;
    }

    .camera-page .inner-pictrue-wrap {
        width: 70%;
    }

    .camera-page .inner-pictrue {
        padding-bottom: 80%;
    }

    .camera-page .wrapper-full.ordinary {
        height: auto;
        min-height: 500px;
    }


    .cam-part02-fullView {
        min-height: 280px;
        height: 56.25vh;
    }

    .cam-part02-fullView-inner {
        left: 30%;
        right: 30%;
        border-radius: 10px;
    }

    .camera-page .wrapper-full.cam-part05 {
        height: auto;
    }

    .cam-bothway-detail-pc {
        display: none;
    }

    .cam-bothway-detail-m {
        display: block;
        height: 100%;
        width: 100%;
    }

    .cam-bothway-detail {
        height: calc(100vh - 50px);
        position: relative;
        padding-top: 50px;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        width: 50%;
    }


    .cam-bothway-detail .cam-bothway-detail-m>div .cam-back {
        padding-bottom: 168.376%;
        height: 0;
        position: absolute;
        left: 0;
        right: 0;
        top: 50%;
        transform: translateY(-60%);
        background-size: 100% auto;
        background-repeat: no-repeat;
        background-position: center center;

    }

    .cam-bothway-detail .cam-bothway-detail-m .cam-screen-01 .cam-item-01 {
        width: auto;
        border-left: 1px solid #fff;
        position: absolute;
        top: 0%;
        left: 16%;
        height: 60%;
        padding-left: 1em;
    }

    .cam-bothway-detail .cam-bothway-detail-m .cam-screen-01 .cam-item-02 {
        border-left: 1px solid #fff;
        position: absolute;
        bottom: 5%;
        left: 16%;
        height: 22%;
        display: flex;
        align-items: flex-end;
        padding-left: 1em;
    }

    .cam-bothway-detail .cam-bothway-detail-m .cam-screen-01 .cam-item-03 {
        width: auto;
        border-right: 1px solid #fff;
        position: absolute;
        top: 5%;
        height: 60%;
        right: 8.5%;
        text-align: right;
        padding-right: 1em;
    }

    .cam-bothway-detail .cam-bothway-detail-m .cam-screen-01 .cam-item-04 {
        border-right: 1px solid #fff;
        position: absolute;
        bottom: 0;
        right: 20%;
        text-align: right;
        padding-right: 1em;
        height: 25%;
        display: flex;
        align-items: flex-end;
    }

    .cam-bothway-detail .cam-bothway-detail-m span {
        font-size: 2.5vw;
        color: #fff;
    }

    .cam-bothway-detail .cam-bothway-detail-m .cam-screen-02,
    .cam-bothway-detail .cam-bothway-detail-m .cam-screen-03 {
        opacity: 0;
    }

    .cam-bothway-detail .cam-bothway-detail-m .cam-screen-02 .cam-item-01 {
        border-left: 1px solid #fff;
        position: absolute;
        top: 28%;
        left: 24%;
        padding-left: .5em;
        height: 30%;
    }

    .cam-bothway-detail .cam-bothway-detail-m .cam-screen-02 .cam-item-02 {
        border-left: 1px solid #fff;
        position: absolute;
        top: 3%;
        left: 11%;
        padding-left: .5em;
        height: 58%;
    }

    .cam-bothway-detail .cam-bothway-detail-m .cam-screen-02 .cam-item-03 {
        border-left: 1px solid #fff;
        position: absolute;
        bottom: -10%;
        left: 15%;
        height: 23%;
        display: flex;
        align-items: flex-end;
        padding-left: .5em;
    }

    .cam-bothway-detail .cam-bothway-detail-m .cam-screen-02 .cam-item-04,
    .cam-bothway-detail .cam-bothway-detail-m .cam-screen-03 .cam-item-04 {
        width: 25%;
        border-top: 1px solid #fff;
        position: absolute;
        top: 5%;
        right: 15%;
        padding-top: .5em;
        text-align: left;
    }

    .cam-bothway-detail .cam-bothway-detail-m .cam-screen-02 .cam-item-05 {
        border-right: 1px solid #fff;
        position: absolute;
        top: 22%;
        right: 12%;
        padding-right: .5em;
        text-align: right;
        height: 35%;
    }

    .cam-bothway-detail .cam-bothway-detail-m .cam-screen-02 .cam-item-06 {
        border-right: 1px solid #fff;
        position: absolute;
        bottom: -5%;
        right: 18%;
        padding-right: .5em;
        height: 18%;
        text-align: right;
        display: flex;
        align-items: flex-end;
    }

    .cam-bothway-detail .cam-bothway-detail-m .cam-screen-03 .cam-item-01 {
        border-left: 1px solid #fff;
        position: absolute;
        top: 25%;
        left: 13%;
        height: 40%;
        padding-left: .5em;
        text-align: left;
    }

    .cam-bothway-detail .cam-bothway-detail-m .cam-screen-03 .cam-item-02 {
        border-right: 1px solid #fff;
        position: absolute;
        bottom: -12%;
        left: 18%;
        height: 25%;
        padding-right: .5em;
        display: flex;
        align-items: self-end;
    }

    .cam-bothway-detail .cam-bothway-detail-m .cam-screen-03 .cam-item-03 {
        border-right: 1px solid #fff;
        position: absolute;
        bottom: 0%;
        right: 21%;
        padding-right: 0.5em;
        text-align: right;
        height: 13%;
        display: flex;
        align-items: flex-end;
    }

    .cam-bseries {
        margin: -5px;
        margin-top: 5.8vw;
    }

    .cam-bseries-small {
        width: 50%;
        padding: 5px;
    }

    .cam-bseries-wrap {
        min-height: 150px;
        border-radius: 1em;
    }

    .cam-bothway-small-inner .cam-bothway-small-mask span {
        font-size: 14px;
    }

    .cam-bseries-big {
        width: 100%;
        padding: 5px;
    }

    .cam-bseries-tips {
        font-size: 12px;
    }

    .camera-page .inner-pictrue-post span {
        font-size: 7.16vw;
    }
}



@media screen and (max-width:550px) {
    .cam-banner-flex .cam-small {
        font-size: 18px;
    }

    .cam-bothway-detail {
        padding-top: 20px;
        width: 95%;
    }
    .cam-bothway-detail .cam-bothway-detail-m>div .cam-back {
        top: 55%;
    }
    .cam-banner-flex .cam-big {
        font-size: 50px;
    }
    .cam-bothway-detail .cam-bothway-detail-m .cam-screen-01 .cam-item-01 {
        height: 50%;
        top: 10%;
    }
    .cam-bothway-detail .cam-bothway-detail-m .cam-screen-03 .cam-item-02 {
        left: 15%;
        bottom: -10%;
    }

    .cam-bothway {
        align-items: flex-start;
        flex-direction: column-reverse;
        margin-bottom: 8vw;
    }

    .cam-bothway-big {
        width: 100%;
        padding-left: 0;
        margin-bottom: 1em;
    }

    .cam-bothway-small {
        width: 50%;
    }

    .camera-page .inner-pictrue-wrap {
        width: 100%;
        border-radius: 0;
    }

    .camera-page .inner-pictrue {
        padding-bottom: 150%;
    }

    .cam-bothway-small-inner {
        min-height: 160px;
        border-radius: 1em;
    }

    .cam-part02-back .inner-text[data-double-top],
    .cam-part02-back .inner-text[data-double-bottom] {
        height: 20vw;
    }

    .cam-bothway-small-inner .cam-bothway-small-mask {
        padding: 1em;
    }

    .cam-bothway-small-inner .cam-bothway-small-mask span {
        font-size: 14px;
    }

    .cam-bothway-small-inner .cam-bothway-small-cover {
        height: 20.8vw;
        top: 20%;
    }
    .cam-bothway-detail .cam-bothway-detail-m span {
        font-size: 3.5vw;
    }
}

/*门禁页面*/
.app-banner.app-banner__home.guard-banner {
    background: url(../Technology/guard-banner-bg.jpg) no-repeat;
    background-size: cover;
    background-position: center bottom;
    min-height: 700px;
}

.guard-banner .inner {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    padding-top: 9vw;
    padding-bottom: 2.5vw;
}

.guard-banner .inner-product {
    position: relative;
    height: 100%;
}

.guard-banner .inner-product .text-left,
.guard-banner .inner-product .text-right {
    position: absolute;
    right: 110%;
    top: 50%;
    -ms-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

.guard-banner .inner-product .text-right {
    right: auto;
    left: 110%;
}

.guard-banner .inner-product .big {
    font-size: 60px;
    white-space: nowrap;
    font-weight: 500;
}

.guard-banner .inner-product .small {
    font-size: 42px;
    white-space: nowrap;
}

.guard-banner .inner-product img {
    width: auto;
    height: 100%;
    display: block;
}

.guard-page .ray-header {
    padding: 0 10%;
}

.guard-page .ray-header .ray-header__title {
    width: 43%;
}

.guard-page .ray-header .ray-header__intro {
    width: 47%;
}

.wrapper-full.guard-alg {
    background-image: linear-gradient(to right, #f9f9f9 0%, #ffffff);
}

.wrapper-full.guard-alg .bg {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: flex-end;
    top: 4.6vw;
}

.wrapper-full.guard-alg .bg img {
    width: auto;
    height: 100%;
    display: block;
}

.wrapper-full.guard-alg .app-container {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.wrapper-full.guard-alg .inner {
    width: 43%;
    position: relative;
    z-index: 1;
}

.wrapper-full.guard-alg .ray-header,
.wrapper-full.guard-detection .ray-header,
.wrapper-full.guard-protection .ray-header {
    padding: 0;
    flex-direction: column;
}

.wrapper-full.guard-alg .ray-header .ray-header__title,
.wrapper-full.guard-detection .ray-header .ray-header__title,
.wrapper-full.guard-protection .ray-header .ray-header__title {
    width: 100%;
    text-align: left;
    margin-bottom: .25em;
}

.wrapper-full.guard-detection .ray-header .ray-header__title {
    white-space: nowrap;
}

.wrapper-full.guard-alg .ray-header .ray-header__intro,
.wrapper-full.guard-detection .ray-header .ray-header__intro,
.wrapper-full.guard-protection .ray-header .ray-header__intro {
    width: 100%;
}

.wrapper-full.guard-detection .ray-header .ray-header__intro,
.wrapper-full.guard-protection .ray-header .ray-header__intro {
    color: #fafafa;
}

.wrapper-full.guard-alg .inner .items {
    margin-top: 4em;
    display: flex;
}

.wrapper-full.guard-alg .inner .items .item {
    margin-right: 80px;
}

.wrapper-full.guard-alg .inner .items .item-number {
    font-size: 48px;
    color: #0560f6;
    font-weight: 500;
}

.wrapper-full.guard-alg .inner .items .item-intro {
    color: #666666;
}
.guard-wrapper {
    background-color: #090909;
}
.wrapper-full.guard-detection {
    background-color: #090909;
    overflow: hidden;
}

.wrapper-full.guard-detection .app-container {
    display: flex;
    align-items: flex-end;
}

.wrapper-full.guard-detection .inner {
    flex: 1;
    display: flex;
    justify-content: space-between;
    padding-top: 9.375vw;
    position: relative;
    align-items: flex-start;
    padding-bottom: 11vw;
}

.wrapper-full.guard-detection .inner-left {
    width: 33%;
    color: #fff;
}

.wrapper-full.guard-detection .inner .items {
    margin-top: 7em;
    display: flex;
}

.wrapper-full.guard-detection .inner .items .item {
    margin-right: 4.2vw;
    display: flex;
    flex-direction: column;
    align-items: center;
}


.wrapper-full.guard-detection .inner .items .item-icon {
    width: 6.5vw;
    height: 6.5vw;
}

.wrapper-full.guard-detection .inner .items .item-icon img {
    width: 100%;
    height: 100%;
    display: block;
}

.wrapper-full.guard-detection .inner .items .item-intro {
    color: #fafafa;
    text-align: center;
    white-space: nowrap;
    margin-top: 1em;
}

.wrapper-full.guard-detection .inner-right {
    position: absolute;
    z-index: 1;
    bottom: 0;
    width: 62.65%;
    right: -8.3vw;
}

.wrapper-full.guard-detection .inner-right .product {
    width: 100%;
    height: 0;
    padding-bottom: 73.469%;
    display: flex;
    align-items: flex-end;
}

.wrapper-full.guard-detection .inner-right .product img {
    width: 100%;
    height: auto;
    display: block;
}

.wrapper-full.guard-detection .inner-right .product .mode01 {
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    transform-origin: top center;
}

.wrapper-full.guard-detection .inner-right .product .mode01 .mask {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    z-index: 1;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    opacity: 0;
}

.wrapper-full.guard-detection .inner-right .product .mode02 {
    opacity: 0;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    transform: translateY(-17%);
}

.wrapper-full.guard-detection .inner .text-01 {
    width: 1px;
    height: 0;
    border-right: 1px solid #fff;
    position: absolute;
    left: 34.5%;
    bottom: 21%;
    color: #fff;
    opacity: 0;
}

.wrapper-full.guard-detection .inner .text-02 {
    width: 1px;
    height: 0;
    border-left: 1px solid #fff;
    position: absolute;
    right: 35%;
    bottom: 21%;
    color: #fff;
    text-align: right;
    opacity: 0;
}

.wrapper-full.guard-detection .inner .text-01 span {
    white-space: nowrap;
    position: absolute;
    top: 0;
    right: 1em;
    font-size: 30px;
}

.wrapper-full.guard-detection .inner .text-02 span {
    white-space: nowrap;
    position: absolute;
    top: 0;
    left: 1em;
    font-size: 30px;
}

.wrapper-full.guard-scene {
    position: relative;
    overflow: hidden;
}

.wrapper-full.guard-scene .bright,
.wrapper-full.guard-scene .dark {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
}

.wrapper-full.guard-scene .bright-pc,
.wrapper-full.guard-scene .dark-pc,
.wrapper-full.guard-scene .bright-m,
.wrapper-full.guard-scene .dark-m {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: left center;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
}

.wrapper-full.guard-scene .bright-m,
.wrapper-full.guard-scene .dark-m {
    display: none;
}

.wrapper-full.guard-scene .dark {
    opacity: 0;
}

.wrapper-full.guard-scene .inner {
    position: relative;
    display: flex;
    justify-content: flex-end;
    height: 100%;
    align-items: center;
}

.wrapper-full.guard-scene .inner-infos {
    width: 24%;
}

.wrapper-full.guard-scene .inner-infos .title {
    margin-bottom: .5em;
}

.wrapper-full.guard-scene .inner-infos .intro {
    white-space: nowrap;
    width: auto;
}

.wrapper-full.guard-scene .inner-product {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    max-height: 83%;
}

.wrapper-full.guard-scene .inner-product img {
    width: auto;
    height: 100%;
    display: block;
}

.wrapper-full.guard-scene .bright .inner-infos .title {
    color: #333;
}

.wrapper-full.guard-scene .bright .inner-infos .intro {
    color: #666666;
}

.wrapper-full.guard-scene .dark .inner-infos .title {
    color: #fff;
    font-weight: normal;
}

.wrapper-full.guard-scene .dark .inner-infos .intro {
    color: #fff;
}

.wrapper-full.guard-scene .dark .inner-infos {
    opacity: 0;
}

.wrapper-full.guard-protection {
    background-color: #000000;
    overflow: hidden;
}

.wrapper-full.guard-protection .inner {
    display: flex;
    position: relative;
    align-items: center;
    height: 100%;
}

.wrapper-full.guard-protection .inner-left {
    width: 44%;
    color: #fff;
    position: relative;
    z-index: 2;
}

.wrapper-full.guard-protection .inner .items {
    margin-top: 3em;
    display: flex;
}

.wrapper-full.guard-protection .inner .items .item {
    margin-right: 4.2vw;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.wrapper-full.guard-protection .inner .items .item-icon {
    width: 70px;
    height: 70px;
}

.wrapper-full.guard-protection .inner .items .item-icon img {
    width: 100%;
    height: 100%;
    display: block;
}

.wrapper-full.guard-protection .inner .items .item-intro {
    color: #fafafa;
    text-align: center;
    white-space: nowrap;
    margin-top: 1em;
}

.wrapper-full.guard-protection .inner-right {
    position: absolute;
    z-index: 0;
    bottom: 0;
    top: 0;
    width: 79.0625%;
    right: 0;
}

.wrapper-full.guard-protection .inner-right .product {
    width: 100%;
    height: 100%;
    background-position: center right;
    background-size: cover;
    background-repeat: no-repeat;
}

.wrapper-full.guard-introduce {
    background-color: #090909;
    padding-bottom: 0;
}

.wrapper-full.guard-introduce .app-container {
    height: 100%;
}

.guard-introduce-part01,
.guard-introduce-part02 {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
}

.guard-introduce-part01 .inner {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    position: relative;
    padding-bottom: 12%;
}

.guard-introduce-part01 .inner-text,
.guard-introduce-part02 .inner-text p {
    line-height: 1;
    font-size: 8.85vw;
    font-weight: 300;
    background: linear-gradient(180deg, #979797 0%, #a0a0a0 40%, #111111 92%);
    background-clip: text;
    background-size: 100% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: rgba(0, 0, 0, 0);
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    color: rgba(0, 0, 0, 0);
    color: #ffffff\0；
}

.guard-detection-wrap {
    width: 100%;
    height: 100%;
    position: relative;
}

.guard-introduce-part01 .inner-product {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    transform: translateY(20%);
}

.guard-introduce-part01 .inner-product .pic {
    width: 100%;
    display: flex;
    align-items: flex-end;
}

.guard-introduce-part01 .inner-product .pic img {
    width: 100%;
    height: auto;
    display: block;
}


.guard-introduce-part02 .inner {
    display: flex;
    align-items: center;
    height: 100%;
    position: relative;
}

.guard-introduce-part02 .inner-text p {
    margin-top: 2vw;
    opacity: 0;
    transform: translateY(100%);
}

.guard-introduce-part02 .inner-product {
    position: absolute;
    right: 0;
    bottom: 0;
    opacity: 0;
    max-height: 85%;
}

.guard-introduce-part02 .inner-product .pic {
    width: 32.5vw;
    display: flex;
    align-items: flex-end;
    max-height: 90%;
    max-width: 550px;
}

.guard-introduce-part02 .inner-product .pic img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
}

.guard-bseries {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    margin: -12.5px;
}

.guard-bseries-small {
    width: 33.33333%;
    padding: 12.5px;
}

.guard-bseries-wrap {
    transform: rotate(0deg);
    max-height: 500px;
    height: 26.04vw;
    min-height: 250px;
    border-radius: 1.5em;
    overflow: hidden;
    position: relative;
}

.guard-bseries-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1);
    transition: .3s ease;
}

.guard-bseries-wrap:hover img {
    transform: scale(1.1);
    transition: .3s ease;
}

.guard-bseries-mask {
    position: absolute;
    bottom: 0;
    left: 0;
    top: 0;
    right: 0;
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 85%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 1.5em;
    color: #fff;
}

.guard-bseries-mask .big {
    font-size: 1.875vw;
    font-weight: 500;
    margin-bottom: .35em;
}

.guard-bseries-big {
    width: 66.66666%;
    padding: 12.5px;
}


.app-medical-series {
    margin: 0px -12px;
    display: flex;
    margin-top: 4.5vw;
}

.app-medical-series .item {
    overflow: hidden;
    position: relative
}

.app-medical-series .item .image {
    height: 0;
    position: relative;
    overflow: hidden;
    padding-bottom: 107.5%;
    border-radius: 20px 20px 0 0;
    transform: rotate(0deg);
}


.app-medical-series .item .image img {
    border-radius: 20px 20px 0 0;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0
}

.app-medical-series .item img {
    width: 100%;
    height: 100%;
    -webkit-object-fit: cover;
    -moz-object-fit: cover;
    -o-object-fit: cover;
    -ms-object-fit: cover;
    object-fit: cover;
    -ms-transition: 1s ease transform;
    transition: 1s ease transform
}

.app-medical-series .item:hover img {
    -ms-transform: scale(1.1);
    transform: scale(1.1)
}


.app-medical-series .item .single {
    padding: 2em 2.5em;
    background-color: #fff;
    border-radius: 0 0 20px 20px
}

.app-medical-series .item .single .other {
    margin-top: 1em;
    color: #666;
    line-height: 1.6;
    font-size: 1.25vw;
}

.app-medical-series .item:hover .single {
    background-color: #0560f6
}

.app-medical-series .item:hover .single .title,
.app-medical-series .item:hover .single .other {
    color: #fff
}

.app-medical-series-next {
    right: -6%;
    background-color: #ebebed;
    border-radius: 50%;
}

.app-medical-series-prev {
    left: -6%;
    background-color: #ebebed;
    border-radius: 50%;
}

.app-medical-series-next.hide {
    display: none
}

.app-medical-series-next svg,
.app-medical-series-prev svg {
    width: 50%;
    fill: #333;
}

.app-medical-series-next:hover,
.app-medical-series-prev:hover {
    background-color: #0560f6;
}

.app-medical-series-next:hover svg,
.app-medical-series-prev:hover svg {
    fill: #fff;
}

.app-medical-series-prev.hide {
    display: none
}

.app-medical-series-next.hide {
    display: none
}

.app-medical-series .item .single .head .title {
    height: 55px;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 20px;
}

@media screen and (min-width:1920px) {
    .guard-banner .inner {
        padding-top: 175px;
        padding-bottom: 45px;
    }

    .wrapper-full.guard-detection .inner .items .item-icon {
        width: 100px;
        height: 100px;
    }

    .wrapper-full.guard-detection .inner-right {
        right: -160px;
    }

    .wrapper-full.guard-detection .inner {
        padding-top: 180px;
        padding-bottom: 50px;
    }

    .wrapper-full.guard-protection .inner .items .item,
    .wrapper-full.guard-detection .inner .items .item {
        margin-right: 80px;
    }

    .guard-introduce-part01 .inner-text,
    .guard-introduce-part02 .inner-text p {
        font-size: 170px;
    }

    .guard-bothway-small-inner .cam-bothway-small-mask .big {
        font-size: 36px;
    }

    .app-medical-series .item .single .other {
        font-size: 16px;
    }
}

@media screen and (max-width:1600px) {

    .wrapper-full.guard-detection,
    .wrapper-full.guard-scene,
    .guard-introduce {
        max-height: none;
        height: 100vh;
    }


    .wrapper-full.guard-detection .inner .text-01 span,
    .wrapper-full.guard-detection .inner .text-02 span {
        font-size: 1.675vw;
    }

    .wrapper-full.guard-scene .inner-infos {
        width: 30%;
    }

}


@media screen and (max-width:1440px) {
    .guard-banner .inner-product .big {
        font-size: 4.2vw;
    }

    .guard-banner .inner-product .small {
        font-size: 3.15vw;
    }

    .wrapper-full.guard-alg .bg img {
        max-width: 100%;
        height: auto;
    }

    .wrapper-full.guard-alg .inner {
        width: 45%;
    }

    .wrapper-full.guard-alg .inner .items .item {
        margin-right: 5.5vw;
    }

    .wrapper-full.guard-alg .inner .items .item-number {
        font-size: 3.3vw;
    }

    .wrapper-full.guard-detection .inner .items {
        margin-top: 5em;
    }

    .wrapper-full.guard-detection .inner .items .item {
        margin-right: 3em;
    }



    .wrapper-full.guard-protection .inner .items .item-icon {
        width: 6vw;
        height: 6vw;
    }

    .wrapper-full.guard-detection .inner .items .item-intro {
        font-size: 1.575vw;
    }

}

@media screen and (max-width:1366px) {
    .wrapper-full.guard-detection .inner-right {
        width: 65%;
    }

    .guard-page .ray-header .ray-header__intro {
        width: 50%;
    }

}

@media screen and (max-width:1080px) {
    .guard-banner .inner {
        padding-top: 120px;
        padding-bottom: 30px;
    }

    .guard-banner .inner-product {
        display: flex;
        align-items: center;
    }

    .guard-banner .inner-product .text {
        margin-left: 10%;
    }

    .guard-banner .inner-product .text-left,
    .guard-banner .inner-product .text-right {
        position: static;
        -ms-transform: translateY(0%);
        -webkit-transform: translateY(0%);
        transform: translateY(0%);
    }
}

@media screen and (max-width:1023px) {
    .wrapper-full.guard-alg {
        height: calc(100vh - 48px);
        max-height: 450px;
    }

    .wrapper-full.guard-protection .inner-right {
        width: 100%;
    }

    .wrapper-full.guard-protection {
        padding-bottom: 55vh;
        padding-top: 8vh;
    }

    .wrapper-full.guard-detection .inner {
        padding-top: 9.375vh;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        padding-bottom: 0;
        height: 100%;
    }

    .wrapper-full.guard-detection .inner-left {
        width: 100%;
        opacity: .2;
    }

    .wrapper-full.guard-detection .inner .items {
        margin-top: 2.5em;
    }

    .wrapper-full.guard-detection .inner-right {
        position: absolute;
        z-index: 1;
        bottom: 0;
        width: 100%;
        right: 0;
        transform: translateX(0);
    }

    .wrapper-full.guard-detection .inner-right .product {
        width: 100%;
        height: 0;
        display: flex;
        align-items: flex-end;
    }

    .wrapper-full.guard-detection .inner-right .product .mode02 {
        opacity: 0;
        transform: translateY(-10%);
    }

    .wrapper-full.guard-detection .inner .text-01 {
        left: 22.5%;
        bottom: 75.3%;
    }

    .wrapper-full.guard-detection .inner .text-02 {
        right: 27.5%;
        bottom: 75.3%;
    }



    .guard-introduce-part01 .inner {
        align-items: flex-start;
        padding-bottom: 0;
        padding-top: 60%;
    }

    .guard-introduce-part01 .inner-text {
        opacity: 0;
        transform: translateY(0);
    }

    .guard-introduce-part01 .inner-product {
        transform: translateY(0%) rotate(-90deg) scale(1.75);
    }

    .guard-introduce-part01 .inner-text,
    .guard-introduce-part02 .inner-text p {
        line-height: 1;
        font-size: 8.85vw;
        font-weight: 300;
        background: linear-gradient(180deg, #a0a0a0 0%, #a0a0a0 40%, #111111 92%);
        background-clip: text;
        background-size: 100% 100%;
        -webkit-background-clip: text;
        -webkit-text-fill-color: rgba(0, 0, 0, 0);
        -webkit-box-decoration-break: clone;
        box-decoration-break: clone;
        color: rgba(0, 0, 0, 0);
        color: #ffffff\0
    }

    .guard-detection-wrap {
        width: 100%;
        height: 100%;
        position: relative;
    }

    .guard-introduce-part01 .inner-product .pic {
        width: 100%;
        display: flex;
        align-items: flex-end;

    }

    .guard-introduce-part01 .inner-product .pic img {
        width: 100%;
        height: auto;
        display: block;
    }

    .guard-introduce-part01 .inner-product .pic {
        max-width: 500px;
    }


    .guard-introduce-part02 .inner {
        display: flex;
        align-items: flex-start;
        padding-top: 35%;
        height: 100%;
        position: relative;
        width: 100%;
        justify-content: center;
    }

    .guard-introduce-part02 .inner-text p {
        margin-top: 2vw;
        opacity: 0;
        transform: translateY(100%);
    }

    .guard-introduce-part02 .inner-product {
        position: absolute;
        right: 0;
        left: 50%;
        bottom: 0;
        max-height: 55vh;
        transform: translateX(-55%);
    }

    .guard-introduce-part02 .inner-product .pic {
        width: 105%;
        justify-content: center;
        display: flex;
        align-items: flex-end;
        max-height: 75%;
        max-width: 275px;
    }


    .guard-introduce-part02 .inner-product .pic img {
        width: 100%;
        height: auto;
        display: block;
        object-fit: contain;
    }

    .guard-bseries {
        margin: -5px;
    }

    .guard-bseries-small {
        width: 50%;
        padding: 5px;
    }

    .guard-bseries-wrap {
        min-height: 150px;
        border-radius: 1em;
    }

    .guard-bseries-big {
        width: 100%;
        padding: 5px;
    }

    .guard-bseries-mask .big {
        font-size: 20px;
    }

}

@media screen and (max-width:650px) {
    .wrapper-full.guard-alg {
        max-height: none;
        padding-top: 3em;
        padding-bottom: 60vh;
    }
    .guard-introduce-part01 .inner-product .pic {
        width: 90%;
    }
    .guard-banner .inner-product .text {
        order: -1;
        margin-bottom: 2em;
        margin-left: 0;
        text-align: center;
    }

    .wrapper-full.guard-alg .inner {
        width: 100%;
    }

    .wrapper-full.guard-alg .inner .items {
        margin-top: 1em;
    }

    .wrapper-full.guard-alg .inner .items .item-number {
        font-size: 24px;
    }

    .wrapper-full.guard-alg .bg img {
        max-width: 180%;
    }

    .wrapper-full.guard-detection .inner {
        padding-top: 9.375vh;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        padding-bottom: 0;
        height: 100%;
    }


    .wrapper-full.guard-detection .inner-left {
        width: 100%;
        opacity: 1;
    }

    .guard-introduce-part01 .inner-text,
    .guard-introduce-part02 .inner-text p {
        font-size: 11vw;
    }


    .wrapper-full.guard-detection .inner .items {
        margin-top: 2.5em;
    }

    .guard-page .ray-header .ray-header__title {
        width: 100%;
    }

    .wrapper-full.guard-detection .inner .items .item-icon {
        width: 50px;
        height: 50px;
    }

    .wrapper-full.guard-protection .inner .items .item-icon {
        width: 40px;
        height: 40px;
    }

    .wrapper-full.guard-detection .inner .items .item-intro {
        font-size: 14px;
    }

    .wrapper-full.guard-detection .inner-right {
        position: absolute;
        z-index: 1;
        bottom: 0;
        width: 100%;
        right: 0;
        transform: translateX(0);
    }

    .wrapper-full.guard-detection .inner-right .product {
        width: 100%;
        height: 0;
        display: flex;
        align-items: flex-end;
    }

    .wrapper-full.guard-detection .inner-right .product .mode02 {
        opacity: 0;
        transform: translateY(-10%);
    }

    .wrapper-full.guard-detection .inner .text-01 {
        left: 27%;
        bottom: 65.3%;
    }

    .wrapper-full.guard-detection .inner .text-02 {
        right: 27.5%;
        bottom: 65.3%;
    }

    .wrapper-full.guard-scene .inner {
        padding-bottom: 50vh;
    }

    .wrapper-full.guard-scene .inner-infos {
        width: 100%;
    }

    .wrapper-full.guard-scene .inner-product {
        display: none;
    }


    .wrapper-full.guard-protection .inner-left {
        width: 100%;
    }

    .wrapper-full.guard-protection .inner-right {
        width: 100%;
    }


    .wrapper-full.guard-protection .inner-right .product {
        background-position: bottom center;
        background-size: 165% auto;
    }

    .wrapper-full.guard-detection .inner .items .item-icon {
        width: 50px;
        height: 50px;
    }

    .wrapper-full.guard-protection .inner .items .item-icon {
        width: 40px;
        height: 40px;
    }

    .wrapper-full.guard-detection .inner .text-01 span,
    .wrapper-full.guard-detection .inner .text-02 span {
        font-size: 14px;
    }

    .wrapper-full.guard-detection .inner .items .item-intro {
        font-size: 14px;
    }

    .guard-page .ray-header {
        padding: 0;
        align-items: flex-start;
    }

    .guard-page .ray-header .ray-header__intro {
        width: 100%;
    }

    .guard-bseries-mask {
        padding: .5em;
    }

    .guard-bseries-mask .big {
        font-size: 16px;
    }

    .guard-bseries-mask span {
        font-size: 12px;
    }

    .app-medical-series {
        margin-top: 35px;
    }

    .wrapper-full.guard-scene .bright-pc,
    .wrapper-full.guard-scene .dark-pc {
        display: none;
    }

    .wrapper-full.guard-scene .bright-m,
    .wrapper-full.guard-scene .dark-m {
        display: block;
    }

    .app-medical-series-next {
        right: -4%;
    }

    .app-medical-series-prev {
        left: -4%;
    }

    .app-medical-series .item .single .other {
        font-size: 12px;
    }

    .app-medical-series .item .single .head .title {
        height: 35px;
        font-size: 14px;
    }
    .guard-introduce-part02 .inner-product .pic {
        width: 120%;
    }
}

@media screen and (max-width:550px) {
    .wrapper-full.guard-detection,
    .wrapper-full.guard-scene,
    .guard-introduce {
        height: calc(100vh - 48px);
    }
    .guard-banner .inner-product {
        flex-direction: column;
    }

    .guard-banner .inner-product img {
        height: 65%;
    }

    .guard-banner .inner-product .big {
        font-size: 24px;
    }

    .guard-banner .inner-product .small {
        font-size: 18px;
    }

    .guard-bseries-mask span {
        font-size: 10px;
    }
}

/*云台页面2023-08-03*/
.holder-banner {
    max-height: 950px;
}

.holder-banner .app-container {
    justify-content: flex-end;
    align-items: center;
    flex-direction: column;
}

.holder-banner-main {
    width: 38.125%;
    max-width: 732px;
    min-width: 260px;
}

.holder-banner-main img {
    width: 100%;
    height: auto;
    display: block;
}
.holder-banner-slogan-wrap{
    margin-bottom: 4.2vw;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.holder-banner-slogan {
    text-align: center;
    font-size: 4.16667vw;
    letter-spacing: 2px;
    color: #fff;
    font-weight: bold;
    margin-bottom: 1vw;
}

.holder-header .ray-header {
    flex-direction: column;
    align-items: center;
}

.holder-header .ray-header .ray-header__title,
.holder-header .ray-header .ray-header__intro {
    width: 100%;
    text-align: center;
    color: #333;
}

.holder-distance-wrap,
.holder-parameter {
    background-color: #fff;
    z-index: 1;
    position: relative;
}
.holder-distance {
    padding-top: 5em;
    max-height: 950px;
}

.holder-fog-wrap {
    position: relative;
    background-color: #f6f6f9;
}

.holder-fog-wrap .holder-header {
    z-index: 9;
    position: relative;
}


.holder-fog-wrap .wrapper-content,
.holder-distance-wrap .wrapper-content {
    padding-bottom: 0;
}

.holder-fog {
    max-height: 950px;
    background-color: transparent;
}

/* .holder-fog::after {
    content: '\20';
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    position: absolute;
    background: url(../images/holder-bg01.jpg) no-repeat;
    background-size: cover;
    background-position: top center;
    z-index: -1;
} */


.holder-distance .inner {
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
}

.holder-fog .inner {
    height: 100%;
    position: relative;
}

.holder-distance .inner-head,
.holder-fog .inner-head {
    display: flex;
    justify-content: center;
    height: 15.625vw;
    width: 100%;
}

/* .holder-distance .inner-head{
    display: flex;
    justify-content: center;
    height: 0;
    min-height: 0;
    width: 100%;
    opacity: 0;
} */

.holder-distance .inner-head .ray-header,
.holder-fog .inner-head .ray-header {
    flex-direction: column;
    width: 100%;
    padding: 0;
    justify-content: flex-start;
    align-items: center;
}

.holder-distance .inner-head .ray-header .ray-header__title,
.holder-distance .inner-head .ray-header .ray-header__intro,
.holder-fog .inner-head .ray-header .ray-header__title,
.holder-fog .inner-head .ray-header .ray-header__intro {
    text-align: center;
    color: #333;
}

.holder-distance .inner-main {
    width: 100%;
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    position: relative;
    justify-content: flex-end;
}

/* .holder-distance .inner-main-img{
    width: 57.29%;
    max-width: 1100px;
    display: flex;
    align-items: flex-start;
    height: 95%;
    min-width: 350px;
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(%);
} */
.holder-distance .inner-main-img {
    width: 40%;
    max-width: 1300px;
    display: flex;
    align-items: center;
    height: 100%;
    min-width: 350px;
    position: absolute;
    left: 0%;
    bottom: 50%;
    transform: translate(0%, 50%);
}

.holder-distance .inner-main-img img {
    width: 100%;
    height: auto;
    display: block;
}

.holder-distance-infos,
.holder-fog-infos {
    flex-direction: column;
    display: flex;
    width: 42%;
    align-items: stretch;
}

.holder-distance-infos__head,
.holder-fog-infos__head {
    transform: translateY(25%);
    opacity: 0;
}

.holder-distance-infos__head .ray-header,
.holder-fog-infos__head .ray-header {
    flex-direction: column;
    width: 100%;
    padding: 0;
}

.holder-distance-infos__head .ray-header .ray-header__title,
.holder-distance-infos__head .ray-header .ray-header__intro,
.holder-fog-infos__head .ray-header .ray-header__title,
.holder-fog-infos__head .ray-header .ray-header__intro {
    text-align: left;
    width: 100%;
    color: #333;
}

.holder-distance-video,
.holder-fog-video {
    width: 100%;
    margin-top: 5vw;
    transform: translateY(25%);
    opacity: 0;
}

.holder-fog-video {
    transform: translateY(0%);
}

.holder-distance-video .main,
.holder-fog-video .main {
    padding-bottom: 56.25%;
    position: relative;
}

.holder-distance-video .main-wrap,
.holder-fog-video .main-wrap {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
}

.holder-distance-video .main-wrap-bg,
.holder-fog-video .main-wrap-bg {
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    border-radius: 1em;
    overflow: hidden;
    cursor: pointer;
}

.holder-distance-video .main-wrap-bg .play,
.holder-fog-video .main-wrap-bg .play {
    width: 2.76vw;
    height: 3.125vw;
    background: url(../Technology/icon-play.png) no-repeat;
    background-size: contain;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.holder-fog .inner-scrn01 {
    position: absolute;
    left: 5%;
    right: 5%;
    top: 50%;
    transform: translateY(-50%);
    transform-origin: -10% 80%;
}

.holder-fog .inner-video {
    width: 100%;
    padding-bottom: 56.25%;
    position: relative;
}

.holder-fog .inner-video-wrap {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

.holder-fog .inner-video-inner {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 1em;
    overflow: hidden;
}

.holder-fog .inner-video-inner video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.holder-fog .inner-main {
    display: flex;
    justify-content: flex-start;
    position: relative;
    z-index: 9;
    align-items: center;
    height: 100%;
}

.holder-fog .inner-main-img {
    width: 50%;
    max-width: 750px;
    display: flex;
    align-items: center;
    height: 100%;
    min-width: 350px;
    position: absolute;
    right: -6vw;
    bottom: 45%;
    transform: translate(0%, 100%);
    opacity: 0;
}

.holder-fog .inner-main-img img {
    width: 100%;
    height: auto;
    display: block;
}


.wrapper-full.holder-protection {
    background-color: #f5f8fd;
    overflow: hidden;
}

.wrapper-full.holder-protection .inner {
    display: flex;
    position: relative;
    align-items: center;
    height: 100%;
    justify-content: flex-end;
}

.wrapper-full.holder-protection .inner-left {
    width: 44%;
    color: #333;
    position: relative;
    z-index: 2;

}

.wrapper-full.holder-protection .inner-left .ray-header {
    flex-direction: column;
    padding: 0;
}

.wrapper-full.holder-protection .inner-left .ray-header .ray-header__title,
.wrapper-full.holder-protection .inner-left .ray-header .ray-header__intro {
    width: 100%;
    text-align: left;
}

.wrapper-full.holder-protection .inner .items {
    margin-top: 3em;
    display: flex;
}

.wrapper-full.holder-protection .inner .items .item {
    margin-right: 1.8vw;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.wrapper-full.holder-protection .inner .items .item-icon {
    width: 6.25vw;
    height: 6.25vw;
}

.wrapper-full.holder-protection .inner .items .item-icon img {
    width: 100%;
    height: 100%;
    display: block;
}

.wrapper-full.holder-protection .inner .items .item-intro {
    color: #7a7d82;
    text-align: center;
    white-space: nowrap;
    margin-top: 1em;
}

.wrapper-full.holder-protection .inner-right {
    position: absolute;
    z-index: 0;
    bottom: 0;
    top: 0;
    width: 85.9375%;
    left: 0;
}

.wrapper-full.holder-protection .inner-right .product {
    width: 100%;
    height: 100%;
    background-position: center right;
    background-size: cover;
    background-repeat: no-repeat;
}

.holder-shake-main {
    margin-top: 3vw;
}

.holder-shake-flex {
    border-radius: 10px;
    display: flex;
    justify-content: space-between;
}
.holder-shake-flex-wrap {
    padding-bottom: 41.6666667%;
    position: relative;
    width: 100%;
}
.holder-shake-flex-wrap .hold-video {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}
.holder-shake-flex-wrap .hold-video-wrap {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: #000;
    border-radius: 10px;
}
.holder-shake-flex-wrap .hold-video-wrap video {
    object-fit: cover;
    width: 100%;
    height: 100%;
    position: relative;
    top: 10%;
}

.holder-shake-flex .cloumn {
    width: 50%;
    position: relative;
}

.holder-shake-flex .cloumn-wrapper {
    padding: 5vw 0;
    background-color: #000;
}

.holder-shake-flex .cloumn:first-child .cloumn-wrapper {
    padding-right: .5%;
    border-radius: 10px 0 0 10px;
}

.holder-shake-flex .cloumn:last-child .cloumn-wrapper {
    padding-left: .5%;
    border-radius: 0 10px 10px 0;
}

.holder-shake-flex .cloumn-wrap {
    padding-bottom: 56.25%;
    position: relative;
}

.holder-shake-flex .cloumn-inner {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

.holder-shake-flex .cloumn-inner video {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.holder-shake-flex .cloumn-text {
    text-align: center;
    color: #7a7d82;
    margin-top: 1em;
    font-size: 1.667vw;
}

.holder-dipper {
    background-position: center top;
}

.holder-dipper.show {
    animation: scaleDraw 6s 1;
    animation-fill-mode: forwards;
    animation-direction: alternate;
}

.holder-dipper .holder-header {
    width: 100%;
}

.holder-dipper .holder-header .ray-header__title {
    color: #fff;
}

.holder-dipper .holder-header .ray-header__intro {
    color: rgba(255, 255, 255, .6);
    margin-top: 1em;
}

.holder-series {
    background: url(../Technology/holder-bg02.jpg) no-repeat;
    background-size: cover;
}

.holder-series-header {
    text-align: center;
    margin-top: 5vw;
}

.holder-series-header .title {
    font-size: 2.5vw;
}

.holder-series-main {
    padding-top: 7vw;

}

.holder-series-swiper {}

.holder-series-swiper .swiper-container {
    overflow: visible;
}

.holder-series-swiper .swiper-container .swiper-slide {
    opacity: 0 !important;
}

.holder-series-swiper .swiper-container .swiper-slide-active {
    opacity: 1 !important;
}

.holder-series-swiper .swiper-container .swiper-slide-prev,
.holder-series-swiper .swiper-container .swiper-slide-next {
    opacity: .5 !important;
    transition: .5s opacity;
}

.holder-series-swiper .swiper-container .swiper-slide-prev .slide,
.holder-series-swiper .swiper-container .swiper-slide-next .slide {
    transform: translateY(35%);
    -webkit-transform: translateY(35%);
}

.holder-series-swiper .swiper-container .swiper-slide-prev.show,
.holder-series-swiper .swiper-container .swiper-slide-next.show {
    opacity: 1 !important;
    transition: .5s opacity;

}

.holder-series-swiper .swiper-container .swiper-slide-active {
    z-index: 999;
}

.holder-series-swiper .swiper-container .swiper-slide-prev .slide .slide-text,
.holder-series-swiper .swiper-container .swiper-slide-next .slide .slide-text,
.holder-series-swiper .swiper-container .swiper-slide-next .slide .slide-main-text,
.holder-series-swiper .swiper-container .swiper-slide-prev .slide .slide-main-text {
    opacity: 0;
}

.holder-series-swiper .slide {
    position: relative;
}

.holder-series-swiper .slide-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -70%);
    text-align: center;
    white-space: nowrap;
}

.holder-series-swiper .slide-text-inner {
    width: 52.3vw;
    max-width: 100%;
    min-width: 280px;
}

.holder-series-swiper .slide-text img {
    width: 100%;
    height: auto;
    display: block;
}

.holder-series-swiper .slide-text span {
    color: #0560f6;
    font-size: 12vw;
}

.holder-series-swiper .slide-main {
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 1;
    align-items: center;
    min-height: 28.5vw;
    justify-content: flex-end;
}

.holder-series-swiper .slide-main-img {
    width: 25%;
    transition: .35s ease;
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
}

.holder-series-swiper .slide-main-img img {
    width: 100%;
    height: auto;
    display: block;
}

.holder-series-swiper .slide-main-text {
    margin-top: .5em;
    max-width: 500px;
    width: 85%;
    text-align: center;
    height: 6.5vw;
}

.holder-series-swiper .slide-main-text .text-title {
    font-size: 1.77vw;
}

.holder-series-swiper .slide-main-text .text-intro {
    font-size: 1.05vw;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    height: auto;
    opacity: 1;
    overflow: hidden;
    text-overflow: ellipsis;
}

.holder-series-main .series-image-next {
    width: 10.5vw;
    height: 20vw;
    position: absolute;
    right: 5vw;
    bottom: 0;
    z-index: 9999;
    cursor: pointer;
}

.holder-series-main .series-image-prev {
    width: 10.5vw;
    height: 20vw;
    position: absolute;
    left: 5vw;
    bottom: 0;
    z-index: 9999;
    cursor: pointer;
}

.holder-parameter-main {
    margin-top: 4vw;
}

.holder-parameter-main table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
}

.holder-parameter-main table tr:nth-child(odd) {
    background-color: #f4fcfd;
}

.holder-parameter-main table td {
    padding-left: 3.5vw;
    padding-right: 2vw;
    padding-top: 1em;
    padding-bottom: 1em;
    border-right: 1px solid #cdf0f7;
    width: 50%;
}

.holder-parameter-main table td:last-child {
    border-right: none;
}

.holder-parameter-main table td .item {
    display: flex;
    align-items: center;
}

.holder-parameter-main table td .item-title {
    flex: 0 0 auto;
    font-weight: 500;
    width: 6em;
    text-align: justify;
    line-height: 1;
    height: 1em;
}

.holder-parameter-main table td:nth-child(odd) .item-title {
    width: 4em;
}

.holder-parameter-main table td .item-title::after {
    content: '\20';
    display: inline-block;
    width: 100%;
    height: 0;
    font-size: 0;
    line-height: 0;
}

.holder-parameter-main table td .item-intro {
    flex: 1 1 auto;
    color: #666666;
    padding-left: 2.5vw;
}

.holder-mask {
    bottom: 0;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 99999;
    display: none;
}

.holder-mask-overlay {
    backface-visibility: hidden;
    background: rgba(55, 58, 71, .9);
    transition: opacity .3s;
    z-index: 1;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.holder-mask-content {
    margin: auto;
    max-width: 900px;
    min-width: 290px;
    padding: 1em;
    position: relative;
    text-align: center;
    width: 100%;
    z-index: 5;
}

.holder-mask-content video {
    height: auto;
    width: 100%;
}

.holder-shake {
    background-color: #fff;
    position: relative;
    z-index: 2;
}

@media screen and (min-width:1920px) {
    .holder-banner-slogan {
        font-size: 80px;
    }

    .holder-parameter-main table td {
        padding-left: 55px;
        padding-right: 10px;
    }

    .holder-series-header .title {
        font-size: 48px;
    }

    .wrapper-full.holder-protection .inner .items .item-icon {
        width: 120px;
        height: 120px;
    }

    .wrapper-full.holder-protection .inner .items .item,
    .wrapper-full.holder-detection .inner .items .item {
        margin-right: 35px;
    }

    .holder-distance {
        background-color: #fff;
        padding-top: 110px;
    }

    .holder-distance .inner-head {
        height: 300px;
    }

    .holder-distance-video .main-wrap-bg .play {
        width: 53px;
        height: 60px;
    }

    .holder-shake-main {
        margin-top: 80px;
    }

    .holder-shake-flex {
        padding-bottom: 100px;
    }

    .holder-series-main {
        padding-top: 100px;
    }

    .holder-series-swiper .slide-text span {
        font-size: 230px;
    }

    .holder-series-swiper .slide-main-text .text-title {
        font-size: 34px;
    }

    .holder-series-swiper .slide-main-text .text-intro {
        font-size: 20px;
    }

    .holder-series-swiper .slide-main {
        min-height: 550px;
    }

    .holder-series-swiper .slide-main-text {
        height: 120px;
    }

    .holder-shake-flex .cloumn-text {
        font-size: 32px;
    }

    .holder-series-header {
        margin-top: 100px;
    }
}

@media screen and (max-width:1440px) {

    .holder-series-swiper .slide-main {
        min-height: 31vw;
    }

    .holder-distance .inner-main-img {
        width: 35%;
        max-width: 800px;
    }
    .holder-fog .inner-main-img {
        bottom: 40%;
    }
    .holder-fog .inner-main-img {
        width: 47.5%;
        right: -5vw;
    }
    .holder-series-main{
        padding-top: 2.5vw;
    }
    .holder-series-header{
        margin-top: 2vw;
    }
}

@media screen and (max-width:1280px) {
    .holder-distance .inner-main-img {
        max-height: 360px;
    }

    .holder-distance .inner-main-img {
        width: 35%;
        max-width: 700px;
    }
}

@media screen and (max-width:1023px) {
    .holder-distance {
        height: 100vh;
        overflow: hidden;
    }


    .holder-distance .inner-head,
    .holder-fog .inner-head {
        height: auto;
    }

    .holder-distance .inner-main {
        flex-direction: column;
        padding-top: 2em;
        justify-content: center;
    }

    .holder-distance-infos,
    .holder-fog-infos {
        width: 100%;
    }

    .holder-distance-infos .holder-distance-infos__head,
    .holder-fog-infos .holder-fog-infos__head {
        display: none;
    }

    .holder-distance-video {
        opacity: 1;
        transform: translateY(0);
    }

    .holder-distance .inner-main-img {
        max-height: none;
        height: auto;
        max-height: 30vh;
        bottom: 0;
        left: auto;
        transform: translate(0, 0);
        position: relative;
        flex: 1 1 auto;
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 300px;
        z-index: 1;
        transform-origin: 50% 0;
    }

    .holder-distance .inner-main-img img {
        height: 100%;
        width: auto;
    }

    .holder-fog .inner-scrn01 {
        display: none;
    }

    .holder-fog .inner-main {
        flex-direction: column-reverse;
        justify-content: center;
    }

    .holder-fog-video {
        opacity: 1;
        transform: translateY(-10%);
        margin-top: 0;
    }

    .holder-fog .inner-main-img {
        max-height: none;
        height: auto;
        max-height: 35vh;
        bottom: 0;
        right: auto;
        transform: translate(0, 0%);
        position: relative;
        display: flex;
        align-items: flex-start;
        margin-top: 0;
        min-width: 260px;
        z-index: 1;
        opacity: 1;
    }

    .holder-fog .inner-main-img {
        height: 100%;
    }

    .holder-fog-video {
        margin-top: 50px;
    }

    .wrapper-full.holder-protection .inner-right {
        width: 100%;
    }

    .wrapper-full.holder-protection {
        padding-bottom: 45vh;
        padding-top: 8vh;
    }

    .holder-dipper {
        height: 50vh;
    }
}


@media screen and (max-width:800px) {

    .ray-banner,
    .holder-banner {
        height: 50vh;
        min-height: 450px;
    }

    .holder-banner .ray-fit {
        bottom: 0;
    }

    .holder-fog-wrap,
    .holder-distance-wrap {
        padding-top: 10vw;
    }

    .holder-series-header .title {
        font-size: 22px;
    }

}

@media screen and (max-width:650px) {
    .holder-banner-slogan {
        font-size: 24px;
        margin-bottom: .5em;
    }

    .holder-distance {
        height: calc(100vh - 150px);
        padding-top: 0;
    }

    .holder-fog {
        height: calc(100vh - 150px);
        padding-top: 0;
    }

    .wrapper-full.holder-protection {
        background-color: #eaecf8;
    }

    .wrapper-full.holder-protection .inner-left {
        width: 100%;
    }

    .wrapper-full.guaholderrd-protection .inner-right {
        width: 100%;
    }


    .wrapper-full.holder-protection .inner-right .product {
        background-position: 10% bottom;
        background-size: 165% auto;
    }

    .wrapper-full.holder-protection .inner .items .item {
        margin-right: 25px;
    }

    .wrapper-full.holder-protection .inner .items .item:last-child {
        margin-right: 0;
    }
    .holder-fog .inner-main-img {
        justify-content: center;
    }

    .wrapper-full.holder-protection .inner .items .item-icon {
        width: 50px;
        height: 50px;
    }

    .holder-shake-flex .cloumn-text {
        font-size: 14px;
    }

    .holder-distance-video {
        margin-top: 5em;
    }

    /* .holder-shake-flex {
        flex-direction: column;
    } */

    /* .holder-shake-flex .cloumn {
        width: 100%;
    } */
    /* 
    .holder-shake-flex .cloumn:last-child {
        margin-top: 2em;
    } */
    .holder-fog .inner-main-img {
        max-height: 35vh;
    }

    .holder-distance .inner-main {
        padding-bottom: 10vh;

    }
    

    .holder-fog .inner-main {
        padding-top: 1.5em;
    }
    .holder-fog .inner-main-img img{
        width: auto;
        height: 100%;
    }

    .holder-shake-flex .cloumn-wrapper {
        padding: 30px 0;
    }

    .holder-shake-flex .cloumn:first-child .cloumn-wrapper {
        padding-right: 0%;
        border-radius: 10px;
    }

    .holder-shake-flex .cloumn:last-child .cloumn-wrapper {
        padding-left: 0%;
        border-radius: 10px;
    }

    .holder-series-swiper .slide-main-text .text-title {
        font-size: 18px;
    }

    .holder-series-swiper .slide-main-text .text-intro {
        font-size: 14px;
    }


    .holder-series-swiper .slide-main-text {
        height: 60px;
        margin-top: 2.5em;
    }

    .holder-parameter-main table tr:nth-child(odd) {
        background-color: #fff;
    }

    .holder-parameter-main table td {
        display: block;
        width: 100%;
        border-right: 0;
    }

    .holder-parameter-main table td:first-child {
        background-color: #f4fcfd;
    }

    .holder-series-main {
        margin: 0 -12vw;
    }

    .holder-parameter-main table td .item {
        flex-direction: column;
        align-items: flex-start;
    }

    .holder-parameter-main table td .item-intro,
    .holder-parameter-main table td .item-title {
        display: block;
    }

    .holder-parameter-main table td .item-intro {
        padding-left: 0;
        margin-top: 1em;
    }

    .holder-parameter-main table td .item-title {
        text-align: left;
    }


    .wrapper-full.holder-protection .inner-left .ray-header .ray-header__title,
    .wrapper-full.holder-protection .inner-left .ray-header .ray-header__intro {
        text-align: center;
    }

    .wrapper-full.holder-protection .inner .items {
        justify-content: center;
    }

    .holder-series-main {
        margin-top: 50px;
    }

    .holder-series-swiper .slide-main {
        min-height: 260px;
    }

    .holder-series-swiper .slide-main-img {
        width: 33.5%;
    }

    .holder-series-swiper .slide-text {
        top: 40%;
    }

    .holder-series-swiper .swiper-container .swiper-slide-prev .slide,
    .holder-series-swiper .swiper-container .swiper-slide-next .slide {
        transform: translateY(15%);
        -webkit-transform: translateY(15%);
    }
    .holder-series-main .series-image-prev{
        width: 15.5vw;
        height: 30vw;
        position: absolute;
        left: 5vw;
        bottom: 30%;
        z-index: 9999;
        cursor: pointer;
    }
    .holder-series-main .series-image-next{
        width: 15.5vw;
        height: 30vw;
        position: absolute;
        right: 5vw;
        bottom: 30%;
        z-index: 9999;
        cursor: pointer;
    }
}
@media screen and (max-width:380px) {
    .holder-fog .inner-main-img {
        max-height: 30vh;
    }
    .holder-distance .inner-main {
        padding-bottom: 20vh;

    }
    .holder-distance-video {
        margin-top: 3em;
    }
}