body {
    cursor: default;
}

.line {
    margin: 55px 0 60px;
    border-bottom: 1px solid #BDBDBD;
}

.item1 img {
    width: 100%;
    height: 60vh;
    margin-top: 50px;
}

.item1 img {
    width: 100%;
}


/* 2222 */

.item2 {
    padding: 60px 0 150px;
    text-align: center;
    background-color: #f5f5f7;
}

.title {
    font-size: 35px;
}

.title2 {
    font-weight: 700;
    font-size: 18px;
    color: #a8a8a8;
}

.item2 .content {
    margin-top: 40px;
    text-align: center;
}

.item2 .content h3 {
    font-size: 24px;
}


/* product */

.outbox1 a,
.outbox2 a,
.outbox3 a,
.outbox4 a {
    position: relative;
    display: block;
}

.outbox3,
.outbox1,
.outbox2 {
    margin-bottom: 20px;
}

.outbox1,
.outbox1 .bottom,
.outbox1 .outbox,
.outbox2,
.outbox1 .right,
.outbox3,
.outbox4 {
    display: flex;
}

.outbox1 .outbox {
    width: 100%;
}

.outbox1 .left {
    flex: 9;
}

.outbox1 .right {
    flex: 5;
    background: url('/static/img/index/product/fenglifadian.jpg');
    background-size: cover;
    border-radius: 10px;
    overflow: hidden;
}

.outbox1 .bottom,
.outbox1 .top {
    width: 100%;
    height: 300px;
}

.outbox1 .top {
    margin-bottom: 20px;
    border-radius: 10px;
    overflow: hidden;
    background: url('/static/img/index/product/chongdianzhuang.jpg');
    background-size: 100% 100%;
}

.outbox4 .right::before,
.outbox4 .left::before,
.outbox3 .right::before,
.outbox3 .left::before,
.outbox2 .top::before,
.outbox2 .bottom::before,
.outbox2 .middle::before,
.outbox2 .left::before,
.outbox1 .right::before,
.outbox1 .first::before,
.outbox1 .sed::before,
.outbox1 .top::before {
    content: '';
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, .4);
    width: 100%;
    height: 100%;
    transition: all .5s;
    opacity: 1;
}

.outbox3 .left:hover.left:hover::before,
.outbox4 .right:hover::before,
.outbox4 .left:hover::before,
.outbox3 .right:hover::before,
.outbox2 .top:hover::before,
.outbox2 .bottom:hover::before,
.outbox1 .first:hover::before,
.outbox1 .sed:hover::before,
.outbox1 .top:hover::before {
    width: 0;
    opacity: 0;
}

.outbox1 .right:hover::before,
.outbox2 .middle:hover::before,
.outbox2 .left:hover::before {
    height: 0;
    opacity: 0;
}

.outbox1 .first {
    flex: 1;
    height: 100%;
    background: url('/static/img/index/product/chuneng.jpg');
    border-radius: 10px;
    overflow: hidden;
    background-size: 100% 100%;
}

.outbox1 .sed {
    flex: 1;
    height: 100%;
    background: url('/static/img/index/product/nibianqi.jpg');
    border-radius: 10px;
    overflow: hidden;
    background-size: 100% 100%;
}

.outbox2 .middle,
.outbox2 .left {
    flex: 2;
}

.outbox2 .left {
    background: url('/static/img/index/product/hangkongdianzi.jpg');
    border-radius: 10px;
    overflow: hidden;
    background-size: cover;
}

.outbox2 .middle {
    background: url('/static/img/index/product/gongye.jpg');
    border-radius: 10px;
    overflow: hidden;
    background-size: cover;
}

.outbox2 .right {
    flex: 4;
}

.outbox2 .top {
    height: 250px;
    margin-bottom: 20px;
    background: url('/static/img/index/product/guidaojiaotong.jpg');
    border-radius: 10px;
    overflow: hidden;
    background-size: cover;
}

.outbox2 .bottom {
    height: 250px;
    background: url('/static/img/index/product/ITAV.jpg');
    border-radius: 10px;
    overflow: hidden;
    background-size: cover;
}

.outbox1 .first,
.outbox1 .left,
.outbox2 .left,
.outbox2 .middle,
.outbox4 .left,
.outbox3 .left {
    margin-right: 15px;
}

.outbox3 .left {
    flex: 3;
    height: 300px;
    background: url('/static/img/index/product/dianchi.jpg');
    border-radius: 10px;
    overflow: hidden;
    background-size: cover;
}

.outbox3 .right {
    flex: 2;
    height: 300px;
    background: url('/static/img/index/product/yiliaoqixie.jpg');
    border-radius: 10px;
    overflow: hidden;
    background-size: cover;
}

.outbox4 .left {
    flex: 2;
    height: 300px;
    background: url('/static/img/index/product/wuxinachanping.jpg');
    border-radius: 10px;
    overflow: hidden;
    overflow: hidden;
    background-size: cover;
}

.outbox4 .right {
    flex: 3;
    height: 300px;
    border-radius: 10px;
    overflow: hidden;
    background: url('/static/img/index/product/jiayongdianqi.jpg') no-repeat;
    background-size: cover;
}

.product-content {
    margin-top: 30px;
}

.product-content div {
    position: relative;
    overflow: hidden;
}

.product-content .text {
    position: absolute;
    top: 50%;
    left: 50%;
    font-size: 30px;
    color: #fff;
    border-radius: 0;
    overflow: visible;
    transform: translate(-50%, -50%);
    transition: all 1s;
    width: 200px;
}

.product-content .text div {
    width: 200px;
}

.outbox4 .right:hover .text,
.outbox4 .left:hover .text,
.outbox3 .right:hover .text,
.outbox3 .left:hover .text,
.outbox2 .bottom:hover .text,
.outbox2 .top:hover .text,
.outbox2 .middle:hover .text,
.outbox2 .left:hover .text,
.outbox1 .right:hover .text,
.outbox1 .sed:hover .text,
.outbox1 .first:hover .text,
.outbox1 .top:hover .text {
    width: 0;
    overflow: hidden;
}

.product-content img {
    width: 55%;
    height: 100px;
}

.product-content .outbox3 .left img {
    width: 70%;
    height: 80px;
}

@media screen and (max-width: 1500px) {
    .item2 {
        padding: 10vw 0 12vw;
    }
    .home {
        width: 100%;
    }
    .product-content {
        padding: 0 2vw;
    }
    .product-content .outbox3 .left img {
        width: 50%;
        height: 6vw;
    }
    .product-content img {
        width: 45%;
        height: 8vw;
    }
    .product-content .text {
        font-size: 1.5vw;
        width: 20vw;
    }
    .product-content .text div {
        width: 20vw;
    }
}

@media screen and (max-width: 992px) {
    .item2 {
        padding: 15vw 0 20vw;
    }
    /* 产品 */
    .outbox1 .first,
    .outbox1 .left,
    .outbox2 .left,
    .outbox2 .middle,
    .outbox4 .left,
    .outbox3 .left {
        margin-right: 2vw;
    }
    .outbox1 {
        display: block;
    }
    .outbox1 .left {
        margin-right: 0vw;
    }
    .outbox1 .right {
        height: 35vw;
        margin-top: 2vw;
    }
    .outbox1 .top {
        margin-bottom: 2vw;
        height: 35vw;
    }
    .outbox1 .bottom {
        height: 35vw;
    }
    .outbox1 .right {
        background: url('../../../static/img/index/product/fenglifadian2.jpg');
        background-size: 100% 100%;
    }
    .outbox3,
    .outbox1,
    .outbox2 {
        margin-bottom: 2vw;
    }
    .outbox2 {
        height: 105vw;
        flex-direction: column-reverse;
    }
    .outbox2 .middle,
    .outbox2 .left {
        height: 35vw;
        margin-right: 0;
        margin-bottom: 2vw;
    }
    .outbox2 .left {
        background: url('../../../static/img/index/product/hangkongdianzi2.jpg') no-repeat;
        background-size: 100% 100%;
    }
    .outbox2 .middle {
        background: url("../../../static/img/index/product/gongye2.jpg") no-repeat;
        background-size: 100% 100%;
    }
    .outbox2 .right {
        display: flex;
        height: 35vw;
        flex: inherit;
        flex-direction: row;
        margin-bottom: 2vw;
    }
    .outbox2 .bottom,
    .outbox2 .top {
        height: 100%;
        flex: 1;
    }
    .outbox2 .top {
        margin-right: 2vw;
    }
    .outbox4 .left,
    .outbox4 .right,
    .outbox3 .left,
    .outbox3 .right {
        height: 35vw;
    }
    .item5 {
        padding: 0;
    }
    .product-content .text {
        font-size: 3vw;
    }
    .outbox1 .top:hover::before {
        width: 100%!important;
        height: 0%!important;
    }
}

@media screen and (max-width: 445px) {
    .item2 {
        padding: 22vw 0 20vw;
    }
    /* 产品 */
    .product-content .text {
        font-size: 3.5vw;
        width: 22vw;
    }
    .product-content .text div {
        width: 22vw;
    }
    .outbox1 .top,
    .outbox1 .right,
    .outbox2 .middle,
    .outbox2 .left {
        height: 35vw;
    }
    .outbox2 {
        height: 111vw;
    }
    .product {
        padding-bottom: 0vw;
    }
}