@-webkit-keyframes heroArrow2 {
    0% {
        transform: translate(-.104167rem, 0)
    }

    to {
        transform: translate(0, 0)
    }
}

@keyframes heroArrow2 {
    0% {
        transform: translate(-.104167rem, 0)
    }

    to {
        transform: translate(0, 0)
    }
}

.scene {
    width: 3.75rem;
    overflow: hidden;
    background: #f2f3f5;
    position: relative
}

.scene .scene-header {
    padding: .180rem .180rem;
}



.scene .scene-header .scene-header-title {
    font-size: 56px;
    font-weight: bold;
    color: #000000;
    text-align: center;
}

.scene .scene-header .scene-header-desc {
    font-size: 56px;
    font-weight: bold;
    color: #000000;
}

.scene .scene-hot {
    position: absolute;
    top: .78125rem;
    left: 0;
    width: 100%;
    height: .625rem
}

.scene .scene-content {
    display: flex;
    width: 4.048177rem;
    height: 1.666667rem;
    overflow: hidden
}

.scene .scene-content:hover+.scene-hot,
.scene-mobile {
    display: none
}

.scene .scene-content:hover .scene-content-item .scene-wrapper .scene-modal {
    opacity: .8
}

.scene .scene-content:hover .scene-content-item .scene-wrapper .scene-wrapper-bg>img {
    transform: translate(0, 0)
}

.scene .scene-content:hover .item-thumb {
    opacity: 0;
    z-index: 1
}

.scene .scene-content .scene-content-item {
    position: relative;
    flex: 1 1 .298177rem;
    transition: all 1s;
    will-change: auto
}

.scene .scene-content .scene-content-item:hover {
    flex: 1 0 2.1rem
}

.scene .scene-content .scene-content-item:hover .scene-wrapper .scene-modal {
    opacity: 0;
    visibility: hidden
}

.scene .scene-content .scene-content-item:hover .item-detail {
    opacity: 1;
    z-index: 2
}

.scene .scene-content .scene-content-item .scene-wrapper {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    transform: skew(-10.15deg);
    transform-origin: left top;
    overflow: hidden
}

.scene .scene-content .scene-content-item .scene-wrapper .scene-modal {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #000;
    opacity: 0;
    z-index: 100;
    transition: all .6s
}

.scene .scene-content .scene-content-item .scene-wrapper::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(107deg, #0a2349 20%, rgba(10, 35, 73, 0) 100%);
    opacity: 0;
    visibility: hidden;
    transition: all .6s
}

.scene .scene-content .scene-content-item .scene-wrapper-bg {
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -.149089rem;
    width: 3.75rem;
    height: 100%;
    transform: translate(-50%, 0) skew(10.15deg);
    transform-origin: left top
}

.scene .scene-content .scene-content-item .scene-wrapper-bg>img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform .5s
}

.scene .scene-content .scene-content-item:nth-child(1) .scene-wrapper {
    position: relative
}

.scene .scene-content .scene-content-item:nth-child(1) .scene-wrapper::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    z-index: 10;
    width: 2px;
    height: 100%;
    background-color: #fff;
    opacity: .3
}

.scene .scene-content .scene-content-item:nth-child(1) .scene-wrapper-bg>img {
    transform: translate(-.260417rem, 0)
}

.scene .scene-content .scene-content-item:nth-child(2) .scene-wrapper {
    overflow: initial;
    z-index: 0
}

.scene .scene-content .scene-content-item:nth-child(2) .scene-wrapper-bg>img {
    transform: translate(.260417rem, 0)
}

.scene .scene-content .scene-content-item:nth-child(3) .scene-wrapper {
    position: relative
}

.scene .scene-content .scene-content-item:nth-child(3) .scene-wrapper::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    width: 2px;
    height: 100%;
    background-color: #fff;
    opacity: .3
}

.scene .scene-content .scene-content-item:nth-child(3) .scene-wrapper-bg>img {
    transform: translate(-.182292rem, 0)
}

.scene .scene-content .scene-content-item .item-thumb {
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(360deg, #0a2349 0, rgba(10, 35, 73, 0) 100%);
    transition: opacity .5s
}

.scene .scene-content .scene-content-item .item-thumb .item-thumb-title {
    margin-top: .893229rem;
    margin-bottom: .03125rem;
    line-height: .138021rem;
    text-align: center;
    color: #fff;
    font-size: .098958rem;
    font-weight: 300;
    font-family: PingFangSC-Light, PingFang SC
}

.scene .scene-content .scene-content-item .item-thumb .item-thumb-desc {
    margin-bottom: .101563rem;
    line-height: .057292rem;
    text-align: center;
    color: #fff;
    font-size: .041667rem;
    font-weight: .041667rem;
    font-family: PingFangSC-Light, PingFang SC
}

.scene .scene-content .scene-content-item .item-thumb .item-thumb-action {
    display: flex;
    justify-content: center
}

.scene .scene-content .scene-content-item .item-thumb .item-thumb-action .item-thumb-action-left,
.scene .scene-content .scene-content-item .item-thumb .item-thumb-action .item-thumb-action-right {
    position: relative;
    width: .049479rem;
    height: .135417rem;
    background-image: url(https://cdnstatic.megvii.com/websiteFE/static/img/refactor/aiot/rect-small.dc028340.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover
}

.scene .scene-content .scene-content-item .item-thumb .item-thumb-action .item-thumb-action-left {
    left: .010417rem
}

.scene .scene-content .scene-content-item .item-thumb .item-thumb-action .item-thumb-action-right {
    left: -.010417rem
}

.scene .scene-content .scene-content-item .item-thumb .item-thumb-action .item-thumb-action-center {
    width: .1875rem;
    height: .135417rem;
    background-image: url(https://cdnstatic.megvii.com/websiteFE/static/img/refactor/aiot/rect.ff8cbac0.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center
}

.scene .scene-content .scene-content-item .item-thumb .item-thumb-action .item-thumb-action-center img {
    width: .0625rem;
    height: .0625rem
}

.scene .scene-content .scene-content-item .item-detail {
    opacity: 0;
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(107deg, #0a2349 20%, rgba(10, 35, 73, 0) 100%);
    transition: opacity .6s
}

.scene .scene-content .scene-content-item .item-detail .item-detail-header {
    margin-bottom: .3125rem;
    padding: .208333rem 0 0 .9rem
}

.scene .scene-content .scene-content-item .item-detail .item-detail-header:hover .item-detail-arrow div {
    -webkit-animation: heroArrow2 1s ease infinite;
    animation: heroArrow2 1s ease infinite
}

.scene .scene-content .scene-content-item .item-detail .item-detail-header .item-detail-title {
    margin-bottom: .041667rem;
    line-height: .138021rem;
    color: #fff;
    font-size: .098958rem;
    font-weight: 400;
    font-family: PingFangSC-Regular, PingFang SC
}

.scene .scene-content .scene-content-item .item-detail .item-detail-header .item-detail-desc {
    margin-bottom: .041667rem;
    line-height: .065104rem;
    color: #fff;
    font-size: .046875rem;
    font-weight: 300;
    font-family: PingFangSC-Light, PingFang SC
}

.scene .scene-content .scene-content-item .item-detail .item-detail-header .item-detail-arrow {
    width: .078125rem;
    height: .052083rem;
    overflow: hidden
}

.scene .scene-content .scene-content-item .item-detail .item-detail-header .item-detail-arrow div {
    display: flex
}

.scene .scene-content .scene-content-item .item-detail .item-detail-header .item-detail-arrow img {
    margin-right: .026042rem;
    width: .078125rem;
    height: .052083rem
}

.scene .scene-content .scene-content-item .item-detail .item-detail-content .item-detail-item .item-detail-info .item-detail-info-imgs>a:last-child,
.scene .scene-content .scene-content-item .item-detail .item-detail-header .item-detail-arrow img:last-child {
    margin-right: 0
}

.scene .scene-content .scene-content-item .item-detail .item-detail-content {
    position: relative;
    margin-left: .588542rem
}

.scene .scene-content .scene-content-item .item-detail .item-detail-content .item-detail-item {
    margin-bottom: .083333rem;
    line-height: .078125rem;
    color: #fff;
    font-size: .041667rem;
    font-weight: 300;
    font-family: PingFangSC-Light, PingFang SC
}

.scene .scene-content .scene-content-item .item-detail .item-detail-content .item-detail-item.active .item-detail-name,
.scene .scene-content .scene-content-item .item-detail .item-detail-content .item-detail-item:hover .item-detail-name {
    color: #fff;
    font-size: .052083rem;
    font-weight: 400;
    font-family: PingFangSC-Regular, PingFang SC
}

.scene .scene-content .scene-content-item .item-detail .item-detail-content .item-detail-item.active .item-detail-info {
    display: block
}

.scene .scene-content .scene-content-item .item-detail .item-detail-content .item-detail-item .item-detail-name {
    width: .3125rem;
    line-height: .078125rem;
    color: #fff;
    font-size: .041667rem;
    font-weight: 300;
    font-family: PingFangSC-Light, PingFang SC;
    cursor: pointer;
    transition: all .4s
}

.scene .scene-content .scene-content-item .item-detail .item-detail-content .item-detail-item .item-detail-info {
    display: none;
    position: absolute;
    left: .395833rem;
    top: 0
}

.scene .scene-content .scene-content-item .item-detail .item-detail-content .item-detail-item .item-detail-info .item-detail-info-imgs {
    display: flex;
    margin-bottom: .083333rem
}

.scene .scene-content .scene-content-item .item-detail .item-detail-content .item-detail-item .item-detail-info .item-detail-info-imgs>a {
    margin-right: .083332rem
}

.scene .scene-content .scene-content-item .item-detail .item-detail-content .item-detail-item .item-detail-info .item-detail-info-imgs .item-detail-info-img {
    position: relative;
    width: .677082rem;
    height: .401042rem;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    will-change: background-size;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    transition: background-size .6s
}

.scene .scene-content .scene-content-item .item-detail .item-detail-content .item-detail-item .item-detail-info .item-detail-info-imgs .item-detail-info-img::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 1px solid rgba(255, 255, 255, .4);
    box-sizing: border-box
}

.scene .scene-content .scene-content-item .item-detail .item-detail-content .item-detail-item .item-detail-info .item-detail-info-imgs .item-detail-info-img:hover {
    background-size: 106% 106%
}

.scene .scene-content .scene-content-item .item-detail .item-detail-content .item-detail-item .item-detail-info .item-detail-info-imgs .item-detail-info-img span {
    padding-bottom: .041667rem;
    line-height: .057292rem;
    color: #fff;
    font-size: .041667rem;
    font-weight: 400;
    font-family: PingFangSC-Regular, PingFang SC
}

.scene .scene-content .scene-content-item .item-detail .item-detail-content .item-detail-item .item-detail-info .scene-more {
    text-align: center
}

.scene .scene-content .scene-content-item .item-detail .item-detail-content .item-detail-item .item-detail-info .scene-more .button {
    cursor: pointer;
    width: .354167rem;
    height: .114583rem;
    line-height: .109375rem
}

@media screen and (max-width:767px) {
    .scene {
        display: none
    }

    .scene-mobile {
        display: block;
        background: #f2f3f5
    }

    .scene-mobile .scene-header {
        padding: .48rem 0
    }

    .scene-mobile .scene-header .scene-header-title {
        margin-bottom: .08rem;
        line-height: .37rem;
        text-align: center;
        color: #000;
        font-size: .26rem;
        font-weight: 400;
    }

    .scene-mobile .scene-content .scene-item-inner .scene-item-title,
    .scene-mobile .scene-header .scene-header-desc {
        line-height: .37rem;
        text-align: center;
        color: #000;
        font-size: .26rem;
        font-weight: 200;
        font-family: PingFangSC-Thin
    }

    .scene-mobile .scene-header .scene-header-desc b {
        font-weight: 400;
        font-family: PingFangSC-Regular
    }

    .scene-mobile .scene-content .scene-item-inner {
        padding-top: .53rem;
        width: 100%;
        height: 2.4rem;
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover
    }

    .scene-mobile .scene-content .scene-item-inner .scene-item-title {
        margin-bottom: .12rem;
        color: #fff;
        font-family: PingFangSC-Light
    }

    .scene-mobile .scene-content .scene-item-inner .scene-item-desc {
        margin-bottom: .24rem;
        line-height: .2rem;
        text-align: center;
        color: #ffffffcc;
        font-size: .14rem;
        font-weight: 200;
        font-family: PingFangSC-Light
    }

    .scene-mobile .scene-content .scene-item-inner .scene-item-arrow {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center
    }

    .scene-mobile .scene-content .scene-item-inner .scene-item-arrow .arrow-left,
    .scene-mobile .scene-content .scene-item-inner .scene-item-arrow .arrow-right {
        width: .16rem;
        height: .42rem
    }

    .scene-mobile .scene-content .scene-item-inner .scene-item-arrow .arrow-center {
        width: .56rem;
        height: .42rem
    }

    .scene-mobile .scene-content .scene-item-inner .scene-item-arrow .arrow {
        position: absolute;
        top: .08rem;
        left: 50%;
        transform: translate(-50%, 0);
        width: .24rem;
        height: .24rem
    }
}