@charset "utf-8";


/** 产品部分 **/
.main {
    width: 100%;
    margin-top: 3rem;
    margin-bottom: 3rem;
}

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

/*** pro cate 产品分类 **/
.pro-cate {
    width: calc(25% - 4rem);
    min-height: 5rem;
    background: #fff;
    color: #515151;
    text-align: left;
    padding-left: 2rem;
    padding-right: 2rem;
    font-size: 1.6rem;
}

    .pro-cate .tit {
        width: 100%;
        height: 5rem;
        line-height: 5rem;
        font-size: 2.2rem;
        font-weight: bold;
        margin-top: 1rem;
    }

    .pro-cate .cates > ul {
        margin-top: 1rem;
        margin-bottom: 3rem;
    }

    .pro-cate .cates ul.open {
        display: block;
    }

    .pro-cate .cates > ul > li {
        display: inline-block;
        width: 100%;
        min-height: 41px;
    }

    .pro-cate .cates li.cur > a {
        color: #d13434;
    }

    .pro-cate .cates > ul > li.more {
        background: url(/assets/images/pc/icon_arrow_down.png) no-repeat right 5px top 17px;
        background-size: 12px 7px;
    }

        .pro-cate .cates > ul > li.more.cur {
            background: url(/assets/images/pc/icon_arrow_up_cur.png) no-repeat right 5px top 17px;
            background-size: 12px 7px;
        }

            .pro-cate .cates > ul > li.more.cur > a {
                color: #d13434;
            }

                .pro-cate .cates > ul > li.more.cur > a:hover {
                    background: url(/assets/images/pc/icon_arrow_up_cur.png) no-repeat right 5px top 17px;
                    background-size: 12px 7px;
                }

    .pro-cate .cates > ul > li > ul {
        margin-left: 3rem;
        display: none;
    }

    .pro-cate .cates a {
        display: inline-block;
        width: 100%;
        height: 41px;
        line-height: 41px;
    }

        .pro-cate .cates a:hover {
            color: #d13434;
        }

    .pro-cate .cates > ul > li.more > a:hover {
        background: url(/assets/images/pc/icon_arrow_down_cur.png) no-repeat right 5px top 17px;
        background-size: 12px 7px;
    }



/** pro list **/
.pro-list {
    width: calc(75% - 2rem);
    margin: 0 auto;
}

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

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

    .pro-list ul li {
        float: left;
        width: calc((100% - 2rem) / 3 - 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: 1rem;
        margin-bottom: 1.5rem;
        padding-left: 10px;
        padding-right: 10px;
    }

        .pro-list ul li:nth-child(3n) {
            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 {
                margin:0 auto;
                margin-top: 10px;
                margin-bottom: 10px;
                width:60%;
                height:38px;
                overflow:hidden;
                /*
                display: flex;
                align-items:center;
                justify-content:center;
                */
                display:-webkit-box;
                -webkit-box-orient:vertical;
                -webkit-line-clamp:2;
            }

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


/*** 产品详情 ***/
.productinfo-box .main{

}
.productinfo-box .main:after{
    content:' ';
    clear:both;
    display:block;
}
.pro-info-cate-box{
    /*display:none;*/
    border:1px solid #f0f0f0;
    float:left;
}
.mn-wrap-h5{
    display:none;
}


.container .intro {
    
}

.pro-info-box{
    width:calc(75% - 2rem);
    float:right;
}

    .container .intro:after {
        content: ' ';
        clear: both;
        display: block;
    }

    .container .intro .img-box {
        width: 40%;
        height: auto;
        position: relative;
        margin-bottom: 4rem;
    }

    .container .intro .imgshow {
        width: 100%;
        height: unset;
        margin-bottom: 10px;
        position: relative;
        border: 1px solid #f0f0f0;
        cursor: move
    }

        .container .intro .imgshow 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%;
            cursor:pointer;
        }

        .container .intro .mask {
            width: 20rem;
            height: 20rem;
            background: rgba(0,0,0,0.5);
            position: absolute;
            top: 0;
            left: 0;
            display: none;
        }

    .container .intro .imgshow video {
        position: absolute;
        top: 0px;
        left: 0px;
        background:#fff;
    }

    .container .intro .bigshow {
        position: absolute;
        top: 0;
        overflow: hidden;
        margin-left: 10px;
        display: none;
        border: 1px solid #f0f0f0;
        z-index:999;
    }

        .container .intro .bigshow img {
            width: 860px;
            height: 860px;
            margin-right: 10px;
        }

    .productinfo-box .intro .h5-img-box,.h5-img-box-thumbs{
        display:none;
    }


    .container .intro .smallshow {
        width: 100%;
        height: 70px;
        position: relative
    }

        .container .intro .smallshow img {
            width: 100%;
            border: 1px solid #e8e8e8;
            box-sizing: border-box;
            transition: all 0.5s
        }

        .container .intro .smallshow > .middle_box {
            margin-left: 30px;
            margin-right: 30px;
            width: calc(100% - 64px);
            overflow: hidden;
            height: 70px;
        }

        .container .intro .smallshow .middle {
            overflow: hidden;
            transition: all 0.5s;
            height: 70px;
        }

            .container .intro .smallshow .middle > li {
                width: 64px;
                height: 64px;
                float: left;
                cursor: pointer;
                padding: 0 5px;
            }

        .container .intro .smallshow > p {
            position: absolute;
            top: 50%;
            width: 22px;
            height: 32px;
            margin-top: -16px;
            cursor: pointer;
        }

        .container .intro .smallshow > .prev {
            left: 0;
            background: url(/assets/images/pc/hover-prev.png) no-repeat;
            transition: all 0.5s
        }

        .container .intro .smallshow > .next {
            right: 0;
            background: url(/assets/images/pc/hover-next.png) no-repeat;
            transition: all 0.5s
        }

        .container .intro .smallshow > .prev.prevnone {
            left: 0;
            background: url(/assets/images/pc/prev.png) no-repeat;
            cursor: not-allowed
        }

        .container .intro .smallshow > .next.nextnone {
            right: 0;
            background: url(/assets/images/pc/next.png) no-repeat;
            cursor: not-allowed
        }

    .container .intro > .text {
        width: calc(60% - 3rem);
        text-align: left;
        position:relative;
    }

        .container .intro > .text .tit {
            font-size: 2.4rem;
            font-weight: bold;
        }

        .container .intro > .text .con {
            font-size: 1.4rem;
            line-height: 3rem;
            color: #6e6e85;
            margin-top: 3rem;
        }

        .container .intro > .text .con > ul > li{
            display:flex;
            align-items:center;
        }

        .container .intro > .text .con > ul > li label{
            font-weight:bold;
            margin-right:15px;
        }

        .container .intro > .text > .tag-box {
            /*position: absolute;*/
            bottom: 0;
            left: 0;
            font-size: 1.4rem;
            line-height: 3rem;
            color: #6e6e85;
            margin-top:3rem;
        }
        .container .intro > .text > .tag-box > p:nth-child(1){
            display:inline-block;
            margin-bottom:10px;
        }
        .container .intro > .text > .tag-box > p:nth-child(1) a{
            font-size:2.4rem;
            font-weight:bold;
            color:#fa4d56;
            float:right;
            display:flex;
            align-items:center;
        }
        .container .intro > .text > .tag-box > p:nth-child(1) a i{
            display:inline-block;
            height:20px; width:20px;
            margin-right:10px;
            background:url(../images/pc/icn_email_red2.png) no-repeat center;
            background-size:cover;
            -webkit-animation: twinkling 1.5s infinite ease-in-out;
        }
        .animated{
            -webkit-animation-direction:1.2s;
            animation-direction:1.2s;
            -webkit-animation-fill-mode:both;
            animation-fill-mode:both;
        }
        @-webkit-keyframes twinkling{
            0%{
                opacity:0;
            }
            100%{
                opacity:1;
            }
        }
        @keyframes twinkling{
            0%{
                opacity:0;
            }
            100%{
                opacity:1;
            }
        }

.container .tabs {
    width: 100%;
    padding-top: 2rem;
    padding-bottom: 2rem;
    font-size: 2.2rem;
    font-weight: bold;
}

    .container .tabs span {
        cursor: pointer;
    }

        .container .tabs span:hover, .container .tabs span.cur {
            color: #d13434;
        }

        .container .tabs span:nth-child(2) {
            margin-left: 4rem;
        }

.container .desc {
    background: #f7f7f7;
    width: calc(100% - 4rem);
    padding: 2rem 2rem 2rem 2rem;
    text-align: left;
    /*max-width:calc(1000px - 4rem);*/
    margin:0 auto;
}

    .container .desc > label {
        font-size: 1.6rem;
        font-weight: bold;
        display: inline-block;
        width: calc(100% - 1rem);
        height: 7rem;
        line-height: 7rem;
        padding-left: 1rem;
    }


    .container .desc span,.container .desc p,.container .desc div{
        white-space:unset !important;
	    table-layout: fixed;
	    word-wrap: break-all;
	    word-break: normal;
    }

    .container .desc > div {
        font-size: 1.4rem;
    }

        .container .desc > div ul {
        }

        .container .desc > div > ul > li {
            padding: 1rem 1rem;
            border-bottom: 1px solid #ccc;
            display: flex;
            align-items: center;
        }

            .container .desc > div > ul > li > label {
                display: inline-block;
                width: 25%;
            }

            .container .desc > div > ul > li > div {
                width: 75%;
                line-height: 3.5rem;
            }

    .container .desc > div > p{
        margin-top:15px;
    }
    .container .desc > div > p img {
        /*
            width:calc((100% - 1rem) / 2);
            margin-right:1rem;
        */
        height: unset;
        margin-bottom:1rem;
    }
    .container .desc > div > p img:nth-child(2n){
        /*margin-right:0;*/
    }


/*
手机端
*/
@media screen and (max-width:640px) {
    .main{
        margin-top:1.5rem;
        margin-bottom:1rem;
    }
    .pro-cate{
        width:calc(100% - 4rem);
    }
    .pro-cate .tit{
        font-size:1.6rem;
        height:3rem;
        line-height:3rem;
    }
    .pro-cate .cates > ul{
        margin-top:0;
        margin-bottom:1rem;
    }
    .pro-cate .cates > ul > li{
        min-height:2.4rem;
    }
    .pro-cate .cates a{
        height:2.4rem;
        line-height:2.4rem;
        font-size:1.2rem;
    }

    .pro-list {
        width: 100%;
        margin-top: 1rem;
    }
    .pro-list ul li{
        width:calc((100% - 1rem) / 2 - 20px);
        margin-right:1rem;
    }
    .pro-list ul li > a i{
        width:3rem;
        height:3rem;
    }
    .pro-list ul li:nth-child(3n) {
        margin-right: 1rem;
    }
    .pro-list ul li:nth-child(2n) {
        margin-right: 0;
    }

    .pro-info-cate-box {
        display: block;
        float: unset;
    }
    .container .intro .img-box{
        width:100%;
        margin-bottom:1rem;
        display:none;
    }
    .container .intro .bigshow,.container .intro .mask{
        display:none !important;
    }

    .pro-info-box{
        width:calc(100% - 2rem);
        padding-left:1rem;
        float:unset;
    }

    .productinfo-box .intro .h5-img-box {
        margin-bottom: 1rem;
        display: block;
        position: relative;
        overflow: hidden;
    }
    .swiper-slide > div{
        width:100%;
        background:rgba(0,0,0,1);
    }
    .productinfo-box .intro .h5-img-box video{
        width:100%;
        height:unset;
    }

    .productinfo-box .intro .h5-img-box-thumbs{
        display:block;
        width:100%;
        overflow:hidden;
        margin-bottom:1rem;
    }
    .productinfo-box .intro .h5-img-box-thumbs video{
        width:100%;
        height:unset;
    }
    .productinfo-box .intro .h5-img-box-thumbs img{
        border: 1px solid #e8e8e8;
        box-sizing: border-box;
        transition: all 0.5s
    }
    .productinfo-box .intro .h5-img-box-thumbs video::-webkit-media-controls {
        display: none !important;
    }
    .h5-img-box-thumbs .swiper-slide {
        opacity: 0.4;
    }
    .h5-img-box-thumbs .swiper-slide-thumb-active {
        opacity: 1;
    }


    .container .intro > .text{
        width:100%;
        height:unset !important;
        padding-bottom:2rem;
    }
    .container .intro > .text .tit{
        font-size:1.6rem;
    }
    .container .intro > .text .con{
        font-size:1.2rem;
        margin-top:1rem;
        line-height:2rem;
    }
    .container .intro > .text > .tag-box > p:nth-child(1) a{
        /*display:none;*/
    }

    .container .tabs{
        font-size:1.6rem;
    }
    .container .desc > div > p img{
        width:100%;
        margin-right:0;
    }

    .mn-wrap-h5{
        display:block;
        width:100%;
        overflow:hidden;
        margin-top:2rem;
    }
    .mn-wrap-h5 .default img{
        width:6rem;
    }
    .mn-wrap-h5 .swiper-wrapper .default{
        height:6rem;
    }
    .mn-wrap-h5 .swiper-wrapper > div{
        font-size:1.6rem;
        line-height:6rem;
    }
    .mn-wrap-h5 .swiper-wrapper > div.default{
        display:flex;
        align-items:center;
        justify-content:space-between;
    }
    .mn-wrap-h5 .swiper-wrapper > div.phone{
        display:flex;
        align-items:center;
        justify-content:center;
    }
    .mn-wrap-h5 .swiper-wrapper > div > a{
        color:#fa4d56;
    }
    .mn-wrap-h5 .swiper-wrapper > div i{
        display:inline-block;
        width:1.6rem; height:1.6rem;
        background:url(../images/pc/icn_email_red2.png) no-repeat center;
        background-size:cover;
        -webkit-animation: twinkling 1.5s infinite ease-in-out;
        margin-right:1rem;
    }
    .rel-pro{
        margin-top:1rem;
    }
}