* {
    color: #333;
    font-size: 16px
}

.home_swiper {
    position: relative;
    overflow: hidden
}

.home_swiper .img {
    padding-bottom: calc((850 / 19.2) * 1%)
}

.home_swiper .swiper-button-prev,
.home_swiper .swiper-button-next {
    width: 46px;
    height: 105px;
    background-repeat: no-repeat;
    background-size: 25%;
    background-color: rgba(0, 0, 0, 0.5);
    background-position: center
}

.home_swiper .swiper-button-prev:hover,
.home_swiper .swiper-button-next:hover {
    background-color: var(--color-main)
}

.home_swiper .swiper-button-prev {
    background-image: url(../images/color/home_l.png);
    left: 0
}

.home_swiper .swiper-button-next {
    background-image: url(../images/color/home_r.png);
    right: 0
}

.home_swiper .swiper-pagination-bullet {
    width: 11px;
    height: 11px;
    background: var(--color-main);
    opacity: .5;
    border-radius: 0;
    margin: 0 23px !important
}

.home_swiper .swiper-pagination-bullet-active {
    opacity: 1;
    width: 17px;
    height: 17px;
    border-radius: 0
}

.home_swiper_h5 {
    width: 100%;
    height: auto
}

.home_swiper_h5 img {
    position: relative
}

.dese9,
.dese9 * {
    color: #e9e9e9
}

.des6,
.des6 * {
    color: #666;
    line-height: 30px
}

.desd4 {
    color: #d4d4d4;
    line-height: 24px
}

.dese5 {
    color: #e5e5e5
}

.before {
    position: relative;
    padding-bottom: 20px
}

.before::before {
    content: "";
    display: block;
    width: 127px;
    height: 4px;
    background: var(--color-main);
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%)
}

.home_pro {
    padding: calc((124 / 19.2) * 1%) 0 0
}

.home_pro .home_pro_nav_swiper {
    margin-top: 58px
}

.home_pro .home_pro_nav_swiper .swiper-wrapper {
    /* justify-content: center */
}

.home_pro .home_pro_nav_swiper .item {
    background: #f2f4f7;
    border-radius: 10px;
    color: #666666;
    font-size: 18px;
    width: auto;
    padding: 15px 25px;
    cursor: pointer;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.home_pro .home_pro_nav_swiper .item.active_ {
    color: #ffffff;
    background: var(--color-main)
}

.home_pro .home_pro_main_swiper {
    margin-top: 46px;
}

.home_pro .home_pro_main_swiper .lists {
    --pd: 40px;
    --mt: 54px;
    height: auto
}

.home_pro .home_pro_main_swiper .lists .item {
    position: relative;
    border-radius: 10px;
    overflow: hidden
}

.home_pro .home_pro_main_swiper .lists .item:hover .infos .title {
    -webkit-line-clamp: unset
}

.home_pro .home_pro_main_swiper .lists .img {
    padding-bottom: 100%
}

.home_pro .home_pro_main_swiper .lists .img img {
    object-fit: contain;
}

.home_pro .home_pro_main_swiper .lists .infos {
    /*
     left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    padding: 50px;

    transition: all .3s ease 
    */
    padding-top: 20px;
    height: 100%;
    padding-bottom: 90px;
}

.home_pro .home_pro_main_swiper .lists .infos .title {
    font-size: 22px;
    margin: 0
}

.home_pro .home_pro_main_swiper .lists .infos .desc {
    display: -webkit-box;
}

.home_pro .home_pro_main_swiper .lists .infos .desc,
.home_pro .home_pro_main_swiper .lists .infos .desc * {
    line-height: 30px;
}

.home_pro .home_pro_main_swiper .lists .infos .c_btn {
    margin-top: 40px
}

.home_about {
    background: #f2f4f7;
    padding: calc((109 / 19.2) * 1%) 0 calc((64 / 19.2) * 1%)
}

.home_about .ab_main {
    align-items: center
}

.home_about .lll {
    height: 0;
    padding-bottom: calc((627 / 16) * 1%);
    position: relative
}

.home_about .lll .img {
    width: calc((758 / 8) * 1%);
    padding-bottom: calc((583 / 8) * 1%)
}

.home_about .lll .info {
    position: absolute;
    right: 0;
    bottom: 0;
    border-radius: 10px;
    padding: 48px 68px 53px 49px;
    background: var(--color-main)
}

.home_about .lll .info * {
    color: #fff
}

.home_about .lll .info .num {
    font-size: 58px;
    line-height: 1;
    font-weight: 900
}

.home_about .rrr {
    padding-left: 58px
}

.home_about .rrr .title .color2 {
    margin-left: 5px
}

.home_about .rrr .title2 {
    font-weight: 900;
    font-size: 44px
}

.home_about .rrr .txt2 {
    margin-top: 70px
}

.home_about .rrr .txt2 img {
    margin-right: 14px
}

.home_about .rrr .c_btn {
    background: transparent
}

.adv {
    background: var(--color-main);
    padding: calc((92 / 19.2) * 1%) 0 calc((70 / 19.2) * 1%)
}

.adv .lists {
    margin-top: 70px;
    --pd: 43px;
    --mt: 30px
}

.adv .lists .item {
    background: #003e75;
    border-radius: 10px;
    border: 1px solid #4b7397;
    padding: 67px 50px 37px;
    justify-content: unset;
    transition: all .3s ease;
}

.adv .lists .item:hover {
    background: #f2f4f7;
}

.adv .lists .item .title {
    color: #ffffff;
    font-size: 18px;
    font-weight: bold;
    margin-top: 30px
}

.adv .lists .item .desd4 {
    margin-top: 40px
}

.adv .lists .item:hover * {
    color: var(--color-default)
}

.adv .lists .item .img {
    width: 40px;
    height: 40px
}

.adv .c_btn {
    margin-top: 85px
}

.g_pro {
    padding-top: calc((102 / 19.2) * 1%)
}

.g_pro .layout_1 {
    --all-pd: calc((98/19.2) * 1%)
}

.g_pro .layout_1 .lists {
    --pd: 36px;
    --mt: 46px;
    margin-top: 66px
}

.g_pro .layout_1 .lists .img {
    padding-bottom: calc((313 / 4.03) * 1%)
}

.g_pro .layout_1 .lists .info {
    background: #f8fafc;
    padding: 33px 36px 36px
}

.g_pro .layout_1 .lists .info .title {
    font-size: 20px
}

.g_pro .layout_1 .lists .info .title:hover {
    color: var(--color-main);
}

.g_pro .oem {
    margin-top: calc((109 / 16) * 1%)
}

.g_pro .oem .oem_main {
    --l-w: calc((444/16) * 1%);
    --pd: calc((134 / 16) * 1%)
}

.g_pro .oem .oem_main .lll .ul {
    margin-top: 60px
}

.g_pro .oem .oem_main .lll .ul li {
    display: flex;
    align-items: center;
    font-weight: bold;
    margin-top: 20px
}

.g_pro .oem .oem_main .lll .ul li::before {
    flex-shrink: 0;
    content: "";
    display: block;
    width: 16px;
    height: 16px;
    margin-right: 16px;
    background: url(../images/color/dui.png) no-repeat center / contain
}

.g_pro .oem .oem_main .lll .c_btn {
    background: var(--color-shadow);
    border: 0;
    margin-top: 60px
}

.g_pro .oem .oem_main .rrr {
    align-self: flex-start;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap
}

.g_pro .oem .oem_main .rrr .item {
    width: calc(50% - 10px);
    border: 1px solid #f1f5f9;
    background: #f8fafc;
    padding: 40px 40px 50px;
    margin-top: 34px
}

.g_pro .oem .oem_main .rrr .item:hover .img {
    transition: all .3s ease;
    transform: rotateY(360deg);
}

.g_pro .oem .oem_main .rrr .item:nth-child(-n + 2) {
    margin-top: 0
}

.g_pro .oem .oem_main .rrr .item .img {
    width: 35px;
    height: 35px
}

.g_pro .oem .oem_main .rrr .item .title {
    font-weight: bold;
    margin-top: 15px
}

.ab2 {
    margin-top: calc((120 / 19.2) * 1%)
}

.ab2 .ab2_main {
    align-items: center
}

.ab2 .img {
    padding-bottom: calc((630 / 19.2) * 1%)
}

.ab2 .rrr {
    padding: 30px 0 30px 56px
}

.ab2 .rrr .des6 {
    margin-top: 40px
}

.ab2 .rrr .c_btn {
    margin-top: 50px
}

.ins {
    background: #f8fafc;
    padding: calc((75 / 19.2) * 1%) 0 calc((124 / 19.2) * 1%)
}

.ins .ins_swiper {
    margin-top: 50px
}

.ins .ins_swiper .img {
    padding-bottom: calc((231 / 4.81) * 1%)
}

.ins .ins_swiper .info {
    padding: 30px 33px 25px;
    border-radius: 0px 0px 10px 10px;
    border: 1px solid #e2e8f0;
    background: #ffffff
}

.ins .ins_swiper .info .title {
    font-size: 20px
}

.ins .ins_swiper .info .more {
    display: inline-flex;
    margin-top: 40px;
    text-decoration: underline
}

.contact {
    padding: calc((90 / 19.2) * 1%) 0 calc((98 / 19.2) * 1%)
}

.contact .lll .title {
    font-size: 37px;
    font-weight: bold
}

.contact .lll .list {
    margin-top: 70px
}

.contact .lll .list .item {
    margin-top: 33px
}

.contact .lll .list .item:first-child {
    margin-top: 0
}

.contact .lll .list .item .img {
    width: 24px;
    height: 24px;
    margin-right: 18px
}

.contact .lll .list .item .val {
    margin-top: 5px
}

.contact .lll .list .item .val a:hover {
    color: var(--color-main)
}

.contact .con_main {
    align-items: center
}

.contact .con_main .rrr {
    border: 1px solid #e2e8f0;
    background: #f3f3f6;
    padding: 36px 40px 48px 48px
}

.contact .con_main .rrr .com_form2 ul {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap
}

.contact .con_main .rrr .com_form2 ul li {
    width: calc(50% - 16.5px);
    display: flex;
    flex-direction: column
}

.contact .con_main .rrr .com_form2 ul li span {
    color: #666666
}

.contact .con_main .rrr .com_form2 ul li span::after {
    content: '*';
    color: red;
    position: relative;
    left: 2px;
    top: 2px;
}

.contact .con_main .rrr .com_form2 ul li.email,
.contact .con_main .rrr .com_form2 ul li.message {
    margin-top: 26px;
    width: 100%
}

.contact .con_main .rrr .com_form2 ul li input,
.contact .con_main .rrr .com_form2 ul li textarea {
    height: 65px;
    line-height: 65px;
    margin-top: 18px;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    padding: 0 20px
}

.contact .con_main .rrr .com_form2 ul li input::placeholder,
.contact .con_main .rrr .com_form2 ul li textarea::placeholder {
    color: #999999
}

.contact .con_main .rrr .com_form2 ul li textarea {
    height: 150px;
    line-height: 1.6;
    padding: 20px
}

.contact .con_main .rrr .com_form2 .sub {
    width: 100%;
    height: 65px;
    line-height: 65px;
    background: var(--color-shadow);
    color: #fff;
    text-align: center;
    margin-top: 44px
}

@media screen and (max-width:1366px) {
    .home_about .rrr .title2 {
        font-size: 30px
    }

    .g_pro .oem .oem_main {
        --pd: 30px
    }

    .home_pro .home_pro_main_swiper .lists .img img {
        object-fit: contain;
    }
}

@media screen and (max-width:950px) {
    .home_swiper {
        position: absolute;
        top: 999999px
    }

    .home_swiper_h5 {
        position: relative;
        top: unset
    }

    .home_pro {
        padding: 50px 0 0
    }

    .home_pro .home_pro_main_swiper .lists .infos {
        padding-bottom: 0;
    }

    .home_pro .home_pro_nav_swiper {
        margin-top: 30px
    }

    .home_pro .home_pro_nav_swiper .swiper-wrapper {
        justify-content: unset
    }

    .home_pro .home_pro_nav_swiper .swiper-wrapper .item {
        padding: 15px 40px
    }

    .contact .lll .list .item .img {
        padding: 0
    }

    .home_about {
        padding: 40px 0 50px
    }

    .home_about .lll {
        height: auto;
        display: flex;
        flex-direction: column;
        align-items: flex-end
    }

    .home_about .lll .img {
        padding-bottom: calc((295 / 3.83) * 1%)
    }

    .home_about .lll .info {
        position: relative;
        padding: 30px;
        display: inline-flex;
        flex-direction: column;
        margin-top: -25%
    }

    .home_about .lll .info .num {
        font-size: 42px
    }

    .home_about .rrr .txt2 {
        margin-top: 40px
    }

    .adv {
        padding: 50px 0
    }

    .adv .lists {
        margin-top: 60px
    }

    .adv .lists .item .desd4 {
        margin-top: 20px
    }

    .adv .c_btn {
        margin-top: 50px
    }

    .g_pro {
        padding: 50px 0 0
    }

    .g_pro .layout_1 .lists {
        margin-top: 44px;
        --mt: 30px
    }

    .g_pro .oem {
        margin-top: 100px
    }

    .g_pro .oem .oem_main .lll .ul,
    .g_pro .oem .oem_main .lll .c_btn {
        margin-top: 40px
    }

    .g_pro .oem .oem_main .rrr .item {
        width: 100%;
        margin-top: 19px !important
    }

    .g_pro .oem .oem_main .rrr .item .img {
        padding: 0
    }

    .ab2 {
        margin-top: 80px;
        padding: 0 var(--all-pd)
    }

    .ab2 .ab2_main .rrr {
        margin-top: 48px
    }

    .ab2 .ab2_main .rrr .des6 {
        margin-top: 30px
    }

    .ab2 .ab2_main .rrr .c_btn {
        margin: 50px 0
    }

    .ins {
        padding: 40px 0
    }

    .ins .des6 {
        display: none
    }

    .ins .ins_swiper .info .more {
        margin-top: 30px
    }

    .contact {
        padding: 50px 0 70px
    }

    .contact .lll .list {
        margin-top: 40px
    }

    .contact .con_main .rrr {
        padding: 50px 30px;
        margin-top: 70px
    }

    .contact .con_main .rrr .com_form2 ul li {
        width: 100%;
        margin-top: 30px
    }

    .contact .con_main .rrr .com_form2 ul li:first-child {
        margin-top: 0
    }

    .contact .con_main .rrr .com_form2 ul li input,
    .contact .con_main .rrr .com_form2 ul li textarea {
        margin-top: 12px
    }
}