﻿
.pro-main{
    background: #f7f7f7;
    padding-bottom: 3%;
}
    .pro-select{
        margin-bottom: 10px;
    }

    .pro-select>ul{
        max-width: 1280px;
        margin: 0 auto;
        background: #fff;
    }
    .pro-select>ul>li{
        border-bottom: 1px solid #f7f7f7;
    }
    .pro-select>ul>li .s-left{
        display: inline-block;
        width: 90px;
        padding-top: 12px;
        vertical-align: top;
        text-align: right;
    }
    .pro-select>ul>li .s-left p{
        font-size: 14px;
        color: #999;
    }

    .pro-select>ul>li .s-right{
        display: inline-block;
        width: calc(99.5% - 90px);
        vertical-align: top;
    }
    .pro-select>ul>li .s-right ul li{
        display: inline-block;
        padding: 12px 0;
        width: 90px;
        margin-left: 1%;
    }
    .pro-select>ul>li .s-right ul li a{
        font-size: 14px;
        color: #666;
        padding:5px 5px;
    }
    .pro-select>ul>li .s-right ul li a:hover{
        color: #931322;
    }
.pro-select>ul>li .s-right ul li a.cur{ background:#931322; color:#fff;}

    /* 更多选项 */
    .loading_box1, .loading_box2, .loading_box3 {
        text-align: center;
    }
    .loading_box1 a.opened, .loading_box2 a.opened, .loading_box3 a.opened {
        background: url(../img/pro-up.png)  right center no-repeat;
    }
    .loading_bg{
        display: inline-block;
        width: 175px;
        height: 30px;
        background: #fff;
    }
    .loading_box1 a, .loading_box2 a, .loading_box3 a {
        display: inline-block;
         padding: 0 25px 0 0;
       line-height: 30px;
        background: url(../img/pro-down.png) right center no-repeat;
        color: #931322;
        font-size: 14px;
    }


    /* 已经选择 */
    .pro-selected{
        max-width: 1280px;
        margin: 0 auto;
        background: #fff;
        margin-bottom: 50px;
    }
    .pro-selected .s-left{
        display: inline-block;
        width: 90px;
        padding-top: 12px;
        vertical-align: top;
        text-align: right;
    }
    .pro-selected .s-left p{
        font-size: 14px;
        color: #999;
    }
    .pro-selected .s-right{
        display: inline-block;
        width: calc(99.5% - 90px);
        vertical-align: top;
    }
    .pro-selected .s-right ul li{
        display: inline-block;
        padding: 12px 0;
        width: 75px;
        margin-left: 1.5%;
    }
    .pro-selected .s-right ul li a{
        font-size: 14px;
        color: #666;
    }
    .pro-selected .s-right ul li button{
        display: inline-block;
        color: #931322;
        font-size: 14px;
        margin-left: 3px;
        border: none;
        background: none;
        outline: none;
    }

    /* 列表 */
    .pro-list{
        max-width: 1280px;
        margin: 0 auto;
    }
    .pro-list ul{

    }
    .pro-list ul li{
        display: block;    float: left;
        width: 16%;
        margin-right: 2%;margin-left: 2%;
        /*background: #fff;*/
        margin-bottom: 25px;
    }
    .pro-list ul li a{display: block;width: 100%;}
    .pro-list ul li:nth-child(5n){
        margin-right: 0;
    }
    .pro-list ul li .pro-img{
        display: inline-block;
        width: 100%;
        padding-bottom: 100%;
        position: relative;
        overflow: hidden;/*border: 1px solid #931322;box-sizing: border-box;*/
    }


    .pro-list ul li .pro-img img{
        position: absolute;
        top: 0;
        left: 0;
        display: inline-block;
        width: 100%;
        height: 100%;
        transition: .5s;
        -webkit-transition: .5s;
        -moz-transition: .5s;
        -ms-transition: .5s;
        -o-transition: .5s;
    }
    .pro-list ul li:hover .pro-img img{
        transform: scale(1.05);
        -webkit-transform: scale(1.05);
        -moz-transform: scale(1.05);
        -ms-transform: scale(1.05);
        -o-transform: scale(1.05);
    }
    .pro-list ul li .pro-txt{
        padding: 14% 7% 0 7%;position: relative;
    }

     .pro-list ul li .pro-txt::before{content: "";position: absolute;width: 86%; height:1px; left:7%; top:22%;background: #ddd;}
     .pro-list ul li .pro-txt::after{content: "";position: absolute;width: 20%;height:1px;left:7%; top:22%;background: #222;}
 
    .pro-list ul li .pro-txt h1{
        font-size: 16px;
        color: #333;
        text-align: left;
        font-weight: normal;
        margin-bottom: 10px;
        overflow: hidden;
        text-overflow:ellipsis;
        white-space: nowrap;letter-spacing: 2px;
    }
    .pro-list ul li .pro-txt p{
        font-size: 14px;
        color: #931322;
        text-align: left;
    }
    .pro-list ul li .pro-txt p span{
        display: inline-block;
        font-size: 14px;
        color: #999;
        margin-left: 6px;
    }

    .pageGuide{
        margin-top: 20px;
    }

@media(max-width:1600px){
	.pro-list ul{padding: 0 3%;}
}

    @media(max-width:1330px){
        .pro-list ul li{
            margin-right: 1.2%;
        }
    }
    @media(max-width:1200px){
        .pro-list ul li{
           width: 23.8%;
        }
        .pro-list ul li:nth-child(5n){
            margin-right: 1.2%;
        }
        .pro-list ul li:nth-child(4n){
            margin-right:0%;
        }
    }
    @media(max-width:1040px){
        .pro-list ul li{
            width: 23.7%;
         }
         .pro-list ul li .pro-txt h1{
             font-size: 14px;
             margin-bottom: 5px;
         }
    }
   
    @media(max-width:860px){
        .pro-select>ul>li .s-right,.pro-selected .s-right {
            width: calc(98% - 90px);
        }
    }
    @media(max-width:780px){
        .pro-selected{
            margin-bottom: 25px;
        }
        .pro-list ul li{
            width: 23.6%;
         }
    }

    @media(max-width:620px){
	.pro-list ul{ padding: 0 8%;}
        .pro-list ul li{
            width: 47.5%;
            margin-right: 0 !important;
            margin-bottom: 35px;
         }
         .pro-list ul li:nth-child(odd){
            float: left;
         }
         .pro-list ul li:nth-child(even){
            float: right;
         }
         .pro-select>ul>li .s-right ul li{
             width: 70px;
         }
         .pro-list ul li .pro-txt h1{
             font-size: 12px;
         }
         .pro-list ul li .pro-txt p,.pro-list ul li .pro-txt p span{
            font-size: 12px;
        }
    }

    @media(max-width:570px){
        .pro-select>ul>li .s-left,.pro-selected .s-left{
            padding-top: 6px;    padding-bottom: 6px;
        }
        .pro-select>ul>li .s-left p,.pro-selected .s-left p{
            line-height: 14px;
        }
        .pro-select>ul>li .s-right ul li,.pro-selected .s-right ul li{
            padding: 6px 0;
        }
        .pro-select>ul>li .s-right ul li a,.pro-selected .s-right ul li a{
            font-size: 12px;
        }
    }


/* 产品详情 */
.prod-top-container{
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 3%;
    margin-bottom: 5%;
}


    .prod-top-right{
        display: inline-block;
        width: calc(95% - 570px);
        float: right;
        vertical-align: top;
    }
    .prod-top-right h1{
        font-size: 22px;
        color: #333;
        font-weight: normal;
        padding-bottom: 20px;
        border-bottom: 1px solid #dddddd;
        margin-bottom: 35px;
    }
    .top-txt>div{
        margin-bottom: 20px;
    }
    .top-txt>div p{
        display: inline-block;
        font-size: 14px;
        color: #666;
        width: 100px;
    }
    .top-txt>div span{
        font-size: 14px;
        color: #666;
    }
    .top-txt>div:nth-child(1) span{
        font-size: 26px;
        color: #bf2839;
    }
.top-txt>div:nth-child(2) span{text-decoration: line-through; color:#999;}

    .top-txt>div a{
        display: inline-block;
        font-size: 14px;
        color: #999;
        text-decoration:line-through;
        margin-left: 10px;
    }
    .top-a{
        margin-top: 85px;
        position: relative;
    }
    .top-a .top-a-code,.top-a .top-a-back{
        display: inline-block;
        width: 200px;
        height: 45px;
        line-height: 45px;
        text-align: center;
        border: 1px solid #931322;
        font-size: 14px;
    }
    .top-a .top-a-code{
        background: #931322;
        color: #fff;
        margin-right: 10px;
    }
    .top-a .top-a-back{
        background: #fff;
        color: #931322;
    }

    .top-a .online-code{
        display: inline-block;
        display: none;
        position: absolute;
        z-index: 10000;
        left: -9px;
        top: 47px;
        background: url(../img/prod-code-box.png) no-repeat center center;
        background-size: 100% 100%;
        width: 220px;
        height: 220px;
    }
    .top-a .online-code img{
        display: inline-block;
        width: 72%;
        margin-left: 14.5%;
       margin-top: 17.5%;
    }

    @media(max-width:760px){
        .top-a .top-a-code, .top-a .top-a-back{
            width: 120px;
            height: 35px;
            line-height: 35px;
        }
        .top-a .online-code {
            left: -15px;
            top: 38px;
            width: 180px;
            height: 180px;
        }

    }



    /* 底部 */
.prod-bottom{
    
}
    .prod-bottom-container{
        max-width: 1280px;
        margin: 0 auto;
        padding: 0 3%;
    }
    .prod-bottom-container .bottom-left{
        display: inline-block;
        width: 200px;
        border: 1px solid #dddddd;
    }
    .prod-bottom-container .bottom-left>h1{
        width: 100%;
        height: 50px;
        line-height: 50px;
        font-size: 18px;
        background: #f6f6f6;
        color: #333;
        text-align: center;
        font-weight: normal;
        border-bottom: 1px solid #dddddd;
    }
    .prod-bottom-container .bottom-left .left-lbt{
        display: inline-block;
        width:100%;
        height: 960px;
        overflow: hidden;
    }
    .left-lbt .swiper-slide{
        
    }
    .left-lbt .swiper-slide .prod-slide-img{
        width: 100%;
        padding-bottom: 100%;
        position: relative;
        margin-top: 5px;
    }
    .left-lbt .swiper-slide .prod-slide-img img{
        display: inline-block;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
    }
    .left-lbt .swiper-slide h1{
        font-size: 14px;
        color: #333;
        text-align: center;
        font-weight: normal;
        margin-top: 5px;
        margin-bottom: 10px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    
    .prod-bottom-container .bottom-right{
        display: inline-block;
        width: calc(90% - 200px);
        vertical-align: top;
        margin-left: 9%;
    }

    .tab {
        width: 100%;
        border: 1px solid #e9e9e9;
        padding-bottom: 5%;
    }
    .tab .hd {
        height: 50px;
        background: #f6f6f6;
        margin-bottom: 10px;
        font-size: 14px;
        _height: 50px;
        _position: relative;
        border-bottom: 1px solid #dddddd;
    }
    .tab .hd ul {
        _width: 100%;
        _height: 50px;
        _position: absolute;
        _left: 0px;
        _top: 0px;
    }
    .tab .hd ul li {
        float: left;
        cursor: pointer;
        vertical-align: top;
    }
    .tab .hd ul li{
        white-space: nowrap;
        padding-left: 50px;
        padding-right: 50px;
        height: 50px;
        line-height: 50px;
        font-size: 18px;
        text-align: center;
        color: #333;
    }
    .tab .hd ul li.on {
        color: #333;
        height: 52px;
        line-height: 50px;
        background: #fff;
        box-sizing: border-box;
        border-top: 2px solid #931322;
    }
    .tab .bd ul {
        zoom: 1;
    }
    .tab .bd li {
        font-size: 15px;
        color: #666;
        padding: 0 30px;
    }
    .tab .bd li p{
        line-height: 36px;
        font-size: 15px;
        color: #666;
    }
    .tab .bd li .date {
        float: right;
        color: #999;
    }

    /* 上下一页 */
    .prod-page{
        display: inline-block;
        margin-top: 20px;
    }
    .prod-page a{
        display: block;
        font-size: 14px;
        color: #666666;
        margin-bottom: 10px;
    }
    .prod-page a:hover{
        color: #931322;
    }


    @media(max-width:1200px){
        .prod-top-container{
            text-align: center;
        }
        .prod-top-container .prod-top-left{
            display: block;
            margin: 0 auto;
        }
        .prod-top-right{
            float: none;
            text-align: left;
            margin-top: 5%;
            width: 640px;
        }

        /* 轮播 */
        .prod-bottom-container .bottom-left{
            width: 100%;
            margin-bottom: 5%;
        }
        .prod-bottom-container .bottom-left .left-lbt{
            height: auto;
        }
        .prod-bottom-container .bottom-right {
            width: 100%;
            vertical-align: top;
            margin-left: 0;
        }
    }

    @media(max-width:760px){
        .tab .hd ul li{
            font-size: 16px;
            padding-left: 20px;
            padding-right: 20px;
        }
        .prod-top-right h1 {
            font-size: 20px;
            padding-bottom: 10px;
            margin-bottom: 20px;
        }
        .top-txt>div {
            margin-bottom: 15px;
        }
        .top-a {
            margin-top: 50px;
        }
        .top-a>a{
            width: 120px;
            height: 40px;
            line-height: 40px;
        }
        .prod-top-right{
            width: 100%;
        }
        .prod-top-container .prod-top-left{
            width: 100%;
        }
	
	.prod-top-container{padding: 0 8%;}
	.prod-bottom-container{padding: 0 8%;}
	.top-txt>div p{width: 90px;}
	.top-txt>div:nth-child(1) span{    font-size: 20px;}
	.top-txt>div{margin-bottom: 10px;}
	.top-a{margin-top: 30px;}
	.tab .bd li p{    line-height: 26px;font-size: 14px;}


    }












