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

.mbx .layout_ .list {
    padding: 0
}

.mbx .layout_ .nav2 {
    overflow: hidden
}

.mbx .layout_ .nav2 a {
    padding: 15px 0 15px 30px;
    color: #000000;
    display: inline-block;
    font-family: Tomorrow2;
    text-transform: uppercase
}

.mbx .layout_ .nav2 a.active {
    padding: 15px 30px;
    background: var(--color-main)
}

.pro_lists {
    margin-top: 58px
}

.pro_lists .pro_lists_main {
    --pd: 17px;
    --mt: 40px
}

.pro_lists .pro_lists_main .img_par {
    background: #efefef
}

.pro_lists .pro_lists_main .img_par .img {
    padding-bottom: calc((255 / 2.77) * 1%)
}

.pro_lists .pro_lists_main .img_par .img img {
    width: calc(100% - 67px - 45px);
    height: calc(100% - 67px - 45px);
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    object-fit: contain
}

.pro_lists .pro_lists_main .img_par .img img:hover {
    transform: translate(-50%, -50%) scale(1.1)
}

.pro_lists .pro_lists_main .info {
    border: 1px solid #efefef;
    padding: 30px 16px 25px; flex: 1; display: flex; flex-direction: column;
}

.pro_lists .pro_lists_main .info .title {
    font-family: Tomorrow3;
    font-size: 22px;
    color: #000000;
    margin: 0; flex: 1;
}

.pro_lists .pro_lists_main .info .desc {
    color: #000000; line-height: 22px; height: 44px; display: -webkit-box;
}

.pro_lists .pro_lists_main .info .more2 {
    display: block;
    padding: 20px;
    background: #000;
    color: #fff;
    text-align: center
}

.pro_lists .pro_lists_main .info .more2:hover {
    background: var(--color-main);
    color: #000
}

.des6 {
    color: #666
}

.why {
    background: #efefef;
    padding: calc((82 / 19.2) * 1%) 0 calc((57 / 19.2) * 1%); margin-top: 5%;
}

.why .lists {
    margin-top: 60px;
    --pd: 44px;
    --mt: 44px
}

.why .lists .item {
    border: 1px solid #b3afaf;
    padding: 66px 35px 88px
}

.why .lists .item:hover {
    border-color: transparent;
    background: var(--color-main)
}

.why .lists .item:hover .img .img1 {
    display: none
}

.why .lists .item:hover .img .img2 {
    display: block
}

.why .lists .item .img {
    width: 66px;
    height: 66px;
    padding: 0
}

.why .lists .item .img img {
    display: none
}

.why .lists .item .img .img1 {
    display: block
}

.why .lists .item .t1 {
    font-family: Tomorrow3;
    font-size: 22px;
    margin-top: 35px
}

.box1 {
    padding: calc((100 / 19.2) * 1%) 0 97px
}

.box1 .box1_main {
    position: relative
}

.box1 .box1_main::after {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: calc((1108 / 16) * 1%);
    background: #efefef;
    z-index: 0
}

.box1 .box1_main .lll {
    position: relative;
    z-index: 2;
    padding: 100px 80px 80px
}

.box1 .box1_main .lll .des6 {
    font-size: 24px
}

.box1 .box1_main .lll .c_more {
    margin-top: 50px
}

.box1 .box1_main .rrr {
    padding-bottom: calc((597 / 16) * 1%);
    position: relative;
    top: 97px;
    z-index: 2
}

.box_faq {
    padding-top: calc((100 / 19.2) * 1%)
}

.box_faq .box_faq_main .lists {
    margin-top: 24px
}

.box_faq .box_faq_main .lists .item {
    margin-top: 24px;
    background: #efefef;
    padding: 37px 32px 32px
}

.box_faq .box_faq_main .lists .item.active .top>span {
    transform: rotate(180deg)
}

.box_faq .box_faq_main .lists .item .top {
    display: flex;
    align-items: center;
    justify-content: space-between
}

.box_faq .box_faq_main .lists .item .top .tit {
    font-size: 20px
}

.box_faq .box_faq_main .lists .item .top>span {
    display: block;
    width: 18px;
    height: 11px;
    background: url(../images/color/faq_icon.png) no-repeat center / cover;
    flex-shrink: 0
}

.box_faq .box_faq_main .lists .item .desc {
    margin-top: 19px;
    display: none
}

@media screen and (max-width:1366px) {
    .mbx .layout_ .nav2 a {
        padding: 10px 0 10px 20px
    }

    .mbx .layout_ .nav2 a.active {
        padding: 10px 20px
    }
}

@media screen and (max-width:950px) {
    .mbx .layout_ {
        flex-direction: column;
        align-items: flex-start;
        padding: 30px var(--all-pd) 10px
    }

    .mbx .layout_ .nav2 {
        margin-top: 10px
    }

    .mbx .layout_ .nav2 a {
        padding: 10px !important
    }

    .box1 {
        padding-bottom: 30px
    }

    .box1 .box1_main::after {
        width: 100%
    }

    .box1 .box1_main .lll {
        padding: 30px
    }

    .box1 .box1_main .rrr {
        top: 0;
        margin: 0;
        padding-bottom: 70%
    }
}