@charset "UTF-8";



.header {
    /*background: none;*/
    position: relative;
    z-index: 99;
}
    .header .menu .sub {
        background: rgba(225,225,225,0.4);
    }
        .header .menu .sub li a {
            color:#eee;
        }


/** 广告 **/
.banner {
    width: 100%;
    position: relative;
    z-index: 1;
    background: #24252d;
    text-align: center;
}

    .banner .box {
        width: 100%;
        max-width: 1920px;
        height: 100%;
        overflow: hidden;
        margin: 0 auto;
    }

        .banner .box img {
            width: 100%;
        }


    .banner .btn {
        position: absolute;
        top: 0;
        bottom:0;
        margin:auto;
        width: 60px;
        height: 60px;
        cursor: pointer;
        z-index:99;
    }

        .banner .btn.left {
            background: url(/assets/images/pc/btn_banner_arrow.png) no-repeat 0 0;
            background-size:cover;
            left: 5rem;
        }

        .banner .btn.right {
            background: url(/assets/images/pc/btn_banner_arrow.png) no-repeat -60px 0;
            background-size:cover;
            right: 5rem;
        }

    .banner-pagination{
        position:absolute;
        bottom:20px; left:0;
        z-index:99;
    }
    .swiper-pagination-bullet{
        width:10px; height:10px;
        background:#fff;
        opacity:1;
    }
    .swiper-pagination-bullet-active{
        background:#e2583d;
    }



/*about us*/
.aboutus {
    width: 100%;
    background: #fff;
}

    .aboutus .cont {
        width: 68%;
        max-width: 1280px;
        padding-top: 4.5rem;
        padding-bottom: 6rem;
        margin: 0 auto;
    }

    .aboutus .video {
        width: 50%;
        margin-right: 4rem;
    }

    .aboutus .text {
        width: calc(50% - 4rem);
        text-align: left;
        position: relative;
    }

    .aboutus .tit {
        font-size: 36px;
        font-weight: bold;
    }

    .aboutus .detail {
        font-size:14px;
        margin-top: 1.5rem;
        color: #666;
        line-height: 2.5rem;
    }

    .aboutus .more {
        position: absolute;
        bottom: 0;
        right:0;
    }

/** cate **/
.pro-cate {
    width: 100%;
    height: 23rem;
    background: url(/assets/images/pc/home_bg_cate.png) no-repeat;
    background-size: cover;
}

    .pro-cate .cont {
        width: 68%;
        max-width: 1280px;
        height: 100%;
        margin: 0 auto;
    }

    .pro-cate ul {
        width: 100%;
        height: 100%;
    }

        .pro-cate ul:after {
            content: ' ';
            clear: both;
            display: block;
        }

    .pro-cate li {
        float: left;
        width: calc(100% / 8);
        height: 100%;
        
    }

        .pro-cate li img {
            width: 5.6rem;
            height: 5.6rem;
        }

            .pro-cate li img:nth-child(2) {
                display: none;
            }

        .pro-cate li span {
            color: #fff;
            margin-top: 1rem;
            display: inline-block;
            width: 100%;
            text-align: center;
        }

        .pro-cate li a {
            display: inline-block;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

            .pro-cate li a:hover {
                background: rgba(0,0,0,0.5);
            }

            .pro-cate li a.cur {
                background: rgba(0,0,0,0.5);
            }

                .pro-cate li a:hover span, .pro-cate li a.cur span {
                    color: #d23733;
                }

                .pro-cate li a:hover img:nth-child(1), .pro-cate li a.cur img:nth-child(1) {
                    display: none;
                }

                .pro-cate li a:hover img:nth-child(2), .pro-cate li a.cur img:nth-child(2) {
                    display: block;
                }

/** pro list **/
.pro-list {
    width: 68%;
    max-width: 1280px;
    margin: 0 auto;
    padding-top: 3rem;
    padding-bottom: 4rem;
}

    .pro-list:after {
        content: ' ';
        clear: both;
        display: block;
    }


    .pro-list ul li {
        float: left;
        width: calc((100% - 1.5rem) / 4 - 20px);
        /*background: #fff url(/assets/images/pc/pro_info_bg_logo.png) no-repeat left 10px top 10px;
        background-size: 78px 43px;*/
        background: #fff;
        margin-right: 0.5rem;
        margin-bottom: 1.5rem;
        padding-left: 10px;
        padding-right: 10px;
    }

            .pro-list ul li:nth-child(4n) {
                margin-right: 0;
            }

        .pro-list ul li > a {
            display: inline-block;
            width: 100%;
            height: 100%;
            /*margin-top: 63px;*/
            margin-top:10px;
            margin-bottom: 5px;
            font-size: 14px;
        }

                .pro-list ul li > a > div {
                    width: 100%;
                    height: 0;
                    padding-bottom: 100%;
                    overflow: hidden;
                    position:relative;
                }

                .pro-list ul li > a img {
                    height: unset;
                }

                .pro-list ul li > a video {
                    display:none;
                }

                .pro-list ul li > a i {
                    width: 64px;
                    height: 64px;
                    position: absolute;
                    bottom: 5px;
                    left: 5px;
                    background: url(/assets/images/pc/ico_play.png) no-repeat center;
                    background-size:100%;
                }

                .pro-list ul li > a > span {
                    display: inline-block;
                    margin:0 auto;
                    margin-top: 10px;
                    margin-bottom: 10px;

                    width:60%;
                    height:38px;
                    overflow:hidden;
                    display:-webkit-box;
                    -webkit-box-orient:vertical;
                    -webkit-line-clamp:2;
                }

                .pro-list ul li > a:hover > span {
                    color: #7aa1dc;
                }

/** 质量和安全 qas **/
.qas {
    width: 100%;
    background: url(/assets/images/pc/home_bg_qas.png) no-repeat;
    background-size: cover;
}

    .qas .cont {
        width: 68%;
        max-width: 1280px;
        height: calc(100% - 25rem);
        padding-top: 12.5rem;
        padding-bottom: 12.5rem;
        margin: 0 auto;
    }

        .qas .cont:after {
            content: ' ';
            clear: both;
            display: block;
        }

    .qas .text {
        color: #fff;
        width: 30%;
        text-align: left;
    }

        .qas .text .tit {
            font-size: 36px;
            font-weight: bold;
        }

        .qas .text .detail {
            font-size: 13px;
            margin-top: 1rem;
            line-height: 2rem;
        }

        .qas .text .btn {
            width: 100%;
            height: 21px;
            margin-top: 2rem;
        }

            .qas .text .btn span {
                width: 32px;
                height: 21px;
                display: inline-block;
                cursor: pointer;
                margin-right: 1rem;
            }

        .qas .text .pre {
            background: url(/assets/images/pc/btn_left_right.png) no-repeat 0 0;
        }

            .qas .text .pre:hover, .qas .text .pre.cur {
                background: url(/assets/images/pc/btn_left_right.png) no-repeat 0 -21px;
            }

        .qas .text .next {
            background: url(/assets/images/pc/btn_left_right.png) no-repeat -48px -21px;
        }

            .qas .text .next:hover, .qas .text .next.cur {
                background: url(/assets/images/pc/btn_left_right.png) no-repeat -48px 0;
            }

    .qas .images {
        width: calc(70% - 2rem);
        overflow: hidden;
    }

        .qas .images li {
            float: left;
            margin-right: 1rem;
            width: calc((100% - 2rem) / 3);
        }

            .qas .images li:nth-child(3n) {
                margin-right: 0;
            }
/**
    常见问题和新闻
*/
.faq-news {
    width: 100%;
    background: #fff;
}

    .faq-news .cont {
        width: 68%;
        max-width: 1280px;
        height: calc(100% - 25rem);
        padding-top: 6.5rem;
        padding-bottom: 6.5rem;
        margin: 0 auto;
    }

        .faq-news .cont:after {
            content: ' ';
            clear: both;
            display: block;
        }

    .faq-news .tit {
        font-size: 42px;
        font-weight: bold;
        margin-bottom: 2rem;
    }

    .faq-news .faq {
        width: calc(50% - 4rem);
        text-align: left;
        padding-right: 4rem;
        font-size: 1.4rem;
    }

        .faq-news .faq .a-box {
            font-weight: bold;
            display: flex;
            align-items: center;
            margin-bottom: 1rem;
        }

            .faq-news .faq .a-box > i {
                display: inline-block;
                width: 2.2rem;
                height: 2.2rem;
                background: url(/assets/images/pc/icn_msg.png) no-repeat;
                background-size: cover;
                margin-right: 0.5rem;
            }

        .faq-news .faq .q-box {
            color: #999;
            padding-bottom: 1.5rem;
            border-bottom: 1px #bbb solid;
            margin-bottom: 1.5rem;
        }

    .faq-news .news {
        width: 50%;
        text-align: left;
    }

        .faq-news .news li {
            margin-bottom: 4.5rem;
        }

            .faq-news .news li:after {
                content: ' ';
                clear: both;
                display: block;
            }

        .faq-news .news .f-left {
            width: 20rem;
            height: 13rem;
        }

        .faq-news .news .f-right {
            width: calc(100% - 25rem);
            text-align: left;
            font-size: 1.4rem;
        }

            .faq-news .news .f-right div {
                line-height: 2.5rem;
            }

                .faq-news .news .f-right div:nth-child(1) {
                    font-weight: bold;
                }

                .faq-news .news .f-right div:nth-child(3) {
                    margin-top: 0.5rem;
                }

/*
手机端
*/
@media screen and (max-width:640px) {
    .banner{
        margin-top:5rem;
        /*height:13rem;*/
        height:unset;
    }
    .banner .btn{
        margin:auto;
        top:0;
        bottom:0;
        width:3rem; height:3rem;
    }
    .banner .btn.left {
        background: url(/assets/images/pc/btn_banner_arrow.png) no-repeat 0 0;
        background-size:cover;
        left: 2rem;
    }

    .banner .btn.right {
        background: url(/assets/images/pc/btn_banner_arrow.png) no-repeat -3rem 0;
        background-size:cover;
        right: 2rem;
    }
    .banner-pagination{
        bottom:1rem;
    }

    .aboutus .cont{
        width:calc(100% - 2rem);
        padding-bottom:5rem;
    }
    .aboutus .video{
        width:100%;
        margin-right:0;
    }

    .aboutus .text{
        width:100%;
        padding-top:1rem;
        height:100% !important;
    }
    .aboutus .tit{
        font-size:2.4rem;
    }
    .aboutus .detail{
        margin-top:1rem;
        line-height:1.8rem;
    }
    .link{
        padding:0.7rem 1rem;
        font-size:1.2rem;
        background:#e2583d;
    }
    .aboutus .more{
        right:0;
        bottom:-3rem;
    }

    .pro-cate{height:26rem;}
    .pro-cate .cont{
        width:calc(100% - 2rem);
    }
    .pro-cate li{
        width:calc(100% / 4);
        height:50%;
    }

    .pro-list{
        width:calc(100% - 2rem);
        padding-bottom:1rem;
    }
    .pro-list ul li{
        width:calc((100% - 1rem) / 2 - 20px);
        margin-right:1rem;
    }
    .pro-list ul li:nth-child(4n){
        margin-right:1rem;
    }
    .pro-list ul li:nth-child(2n){
        margin-right:0;
    }
    .pro-list ul li > a i{
        width:3rem;
        height:3rem;
    }
    .pro-list ul li > a > span{
        width:90%;
        height:2.94rem;
        display:block;
    }

    .qas .cont{
        width:calc(100% - 2rem);
        padding-top:1rem;
        padding-bottom:2rem;
    }
    .qas .text{
        width:100%;
    }
    .qas .text .tit{font-size:2.4rem;}
    .qas .text .detail{ line-height:1.8rem;}
    .qas .images{
        width:100%;
        margin-top:1.5rem;
    }

    .faq-news .cont{
        width:calc(100% - 2rem);
        padding-top:1rem;
        padding-bottom:1.5rem;
        overflow-x:hidden;
    }
    .faq-news .faq{
        width:100%;
    }
    .faq-news .tit{
        font-size:2.4rem;
        margin-bottom:1rem;
    }
    .faq-news .faq .a-box span{
        font-size:1.2rem;
    }
    .faq-news .faq .q-box{
        font-size:1rem;
    }
    .faq-news .news{
        width:100%;
    }
    .faq-news .news li{
        margin-bottom:1rem;
    }
    .faq-news .news .f-left{
        width:15rem;
        height:9.75rem;
    }
    .faq-news .news .f-right{
        width:calc(100% - 16rem);
        font-size:1.2rem;
        margin-left:1rem;
    }
    .faq-news .news .f-right div{
        line-height:1.5rem;
    }
    .faq-news .news .f-right div:nth-child(1){
        margin-bottom:1.5rem;
    }
}