﻿
.shop-title{
    margin-bottom: 15px;
}
    .shop-title h1{
        display: inline-block;
        font-size: 26px;
        color: #931322;
    }
    .shop-title p{
        display: inline-block;
        font-size: 26px;
        color: #999;
        margin-left: 20px;
    }
@media(max-width:960px){
    .shop-title h1{
        font-size: 18px;
        padding-bottom: 2px;
        vertical-align: bottom;
    }
    .shop-title p{font-size: 14px;margin-left: 14px;}
}


.shop-container{
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 3%;
}
    .shop1{
      
    }
    .shop1 .shop1-ul{
        display: flex;
        justify-content: space-between;
    }
    .shop1 .shop1-ul li{
        display: inline-block;
        width: 28.75%; 
    }
    .shop1 .shop1-ul li.list_02,
    .shop1 .shop1-ul li.list_03{
        width: 21.5%;
    }
    .shop1 .shop1-ul li.list_04{
        width: 26.25%;
    }
    .shop1 .shop1-ul li .list-img{
        display: inline-block;
        width: 100%;
        padding-bottom: 100%;
        position: relative;
    }
    .shop1 .shop1-ul li .list-img a{
        display: inline-block;
        width: 100%;
        height: 100%;
        overflow: hidden;
        position: absolute;
        top: 0;
        left: 0;
    }
    .shop1 .shop1-ul li .list-img a img{
        display: inline-block;
        width: 100%;
        height: 100%;
        transition: .5s;
        -webkit-transition: .5s;
        -moz-transition: .5s;
        -ms-transition: .5s;
        -o-transition: .5s;
}
.shop1 .shop1-ul li .list-img:hover a img{
    transform: scale(1.08);
    -webkit-transform: scale(1.08);
    -moz-transform: scale(1.08);
    -ms-transform: scale(1.08);
    -o-transform: scale(1.08);
}
    .shop1 .shop1-ul li.list_02 .list-img,
    .shop1 .shop1-ul li.list_03 .list-img{
       padding-bottom: 134%;
    }
    .shop1 .shop1-ul li.list_04 .list-img{
        padding-bottom: 53.7%;
        position: relative;
        margin-bottom: 2.2%;
    }
    .shop1 .shop1-ul li .list-img a .list-txt{
        position: absolute;
        top:0;
        left: 0;
        width: 100%;
       height: 100%;
    }
    .shop1 .shop1-ul li .list-img a .list-txt h1{
        color: #222;
        font-size: 20px;
        margin-top: 45px;
        margin-bottom: 25px;
        font-weight: normal;
        text-align: center;
        position: relative;
    }
    .shop1 .shop1-ul li .list-img a .list-txt h1::after{
        content: "";
        position: absolute;
        width: 35px;
        height: 1px;
        background: #333;
        top: calc(100% + 12.5px);
        left: calc(50% - 15.25px);

    }
    .shop1 .shop1-ul li .list-img a .list-txt p{
        color: #333;
        font-size: 16px;
        font-weight: normal;
        text-align: center;
    }
    .shop1 .shop1-ul li.list_04 a .list-txt h1{
        display: inline-block;
        text-align: left;
        margin-left: 25px;
        margin-top: 25px;
    }
    .shop1 .shop1-ul li.list_04 a .list-txt h1:after{
        left: 0;
    }
    .shop1 .shop1-ul li.list_04 a .list-txt p{
        text-align: left;
        margin-left: 25px;
    }
    

    @media(max-width:1600px){
	.shop-container{padding: 0 8%;}
    }


    @media(max-width:1200px){
        .shop-container{padding: 0 5%;}

        .shop1 .shop1-ul li .list-img a .list-txt h1 {
            font-size: 16px;
            margin-top: 30px;
        }
        .shop1 .shop1-ul li .list-img a .list-txt p {
            font-size: 13px;
        }
        .shop1 .shop1-ul li.list_04 a .list-txt h1{
            margin-top: 10px;
        }
    }

    @media(max-width:960px){
        .shop1 .shop1-ul{
            display: block;
        }
        .shop1 .shop1-ul li{
            width: 55.6%;
            margin-bottom: 3%;
        }
        .shop1 .shop1-ul li:nth-child(odd){
            margin-right: 0;
            float: left;
        }
        .shop1 .shop1-ul li:nth-child(even){
            margin-right: 0;
            float: right;
        }
        .shop1 .shop1-ul li.list_02,
        .shop1 .shop1-ul li.list_03{
            width: 42%;
        }
        .shop1 .shop1-ul li.list_04{
            width: 55.6%;
        }
        .shop1 .shop1-ul li.list_04 .list-img{
            padding-bottom: 48.7%;
        }
    }

    @media(max-width:520px){
        .shop1 .shop1-ul li .list-img a .list-txt h1 {
            margin-top: 18px;
            margin-bottom: 15px;
        }
        .shop1 .shop1-ul li .list-img a .list-txt h1::after {
            top: calc(100% + 7.5px);
        }
        .shop1 .shop1-ul li .list-img a .list-txt p{
            font-size: 12px;
        }
        .shop1 .shop1-ul li.list_04 a .list-txt h1{
            margin-top: 5px;
            margin-left: 10px;
        }
        .shop1 .shop1-ul li.list_04 a .list-txt p{
            margin-left: 10px;
        }
    }

    .shop2-list{
        margin-bottom: 6%;
    }

/* 第三个列表 */

.mt6{
    margin-top: 6%;
}
.three-list{

}
    .three-list ul{
    
    }
    .three-list ul li{
        display: inline-block;
        width: 22.5%;
        vertical-align: top;
        float: left;
    }
    .three-list ul li .three-img{
        width: 100%;
        padding-bottom: 66.6%;
        position: relative;
    }
    .three-list ul li .three-img>a{
        display: inline-block;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        overflow: hidden;
        border: 1px solid;
        box-sizing: border-box;
        border: 1px solid #ddd;
    }
    .three-list ul li .three-img>a img{
        display: inline-block;
        width: 100%;
        height: 100%;
        transition: .5s;
        -webkit-transition: .5s;
        -moz-transition: .5s;
        -ms-transition: .5s;
        -o-transition: .5s;
    }
    .three-list ul li .three-img:hover>a img{
        transform: scale(1.08);
        -webkit-transform: scale(1.08);
        -moz-transform: scale(1.08);
        -ms-transform: scale(1.08);
        -o-transform: scale(1.08);
}
    .three-list ul li .three-txt{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
    .three-list ul li.three-list01{
        width: 32.5%;
    }
    .three-list ul li.three-list01 .three-img{
        padding-bottom: 92.3%;
    }
    .three-list ul li.three-list01 .three-img>a{
        border: none;
    }
    .three-list ul li .three-txt h1{
        font-size: 22px;
        color: #df8433;
        margin-bottom: 2%;
        margin-top: 5%;
        margin-left: 7%;
    }
    .three-list ul li .three-txt p{
        font-size: 14px;
        color: #666;
        margin-left: 7%;
        margin-bottom: 4%;
    }
    .three-list ul li .three-txt span{
        display: inline-block;
        width: 70px;
        height: 30px;
        line-height: 30px;
        margin-left: 7%;
        text-align: center;
        font-size: 14px;
        color: #fff;
        background: #df8433;
        border-radius: 30px;
        -webkit-border-radius: 30px;
        -moz-border-radius: 30px;
        -ms-border-radius: 30px;
        -o-border-radius: 30px;
    }



    .shop_list2 .three-list ul li .three-img>a{
        border-image: linear-gradient( #dcc1c2,  #dddddd) 30 30;
        border-image: -webkit-linear-gradient( #dcc1c2,  #dddddd) 30 30;
        border-image: -moz-linear-gradient( #dcc1c2,  #dddddd) 30 30;
        border-image: linear-gradient( #dcc1c2,  #dddddd) 30 30;
    }
    .shop_list2 .three-list ul li .three-txt h1{
        color: #d84040 !important;
    }
    .shop_list2 .three-list ul li .three-txt span{
        background: #d84040 !important;
    }



    .shop_list3 .three-list ul li .three-img>a{
        border-image: linear-gradient( #c0dac0,  #dddddd) 30 30;
        border-image: -webkit-linear-gradient( #c0dac0,  #dddddd) 30 30;
        border-image: -moz-linear-gradient( #c0dac0,  #dddddd) 30 30;
        border-image: linear-gradient( #c0dac0,  #dddddd) 30 30;
    }
    .shop_list3 .three-list ul li .three-txt h1{
        color: #36b25b !important;
    }
    .shop_list3 .three-list  ul li .three-txt span{
        background: #36b25b !important;
    }


/* 第六个 */
.shop6-title{
    text-align: center;
    margin-bottom: 30px;
}
    .shop6-title h1{
        display: block;
        margin-bottom: 20px;
        position: relative;
    }
    .shop6-title h1:after{
        content: "";
        position: absolute;
        width: 42%;
        left: 0;
        top: calc(100% + 10px);
        height: 1px;
        background: #eeeeee;
    }
    .shop6-title h1::before{
        content: "";
        position: absolute;
        width: 42%;
        right: 0;
        top: calc(100% + 10px);
        height: 1px;
        background: #eeeeee;
    }

    .shop6-title p{
        display: block;
    }

    @media(max-width:1200px){
        .three-list ul li .three-txt h1{
            font-size: 16px;
        }
        .three-list ul li .three-txt p{
            font-size: 12px;
        }
        .three-list ul li .three-txt span{
            font-size: 12px;
            width: 50px;
            height: 25px;
            line-height: 25px;
        }
    }

    @media(max-width:960px){
        .three-list ul li{
            width: 50%;
        }
        .three-list ul li.three-list01{
            width:59%;
        }
        .three-list ul li.three-list02{
            width: 41%;
        }
    }



/*1113*/
@media(max-width:960px){
	.shop-container{padding: 0 6%;}
	.shop_list1{margin-top: 10%;}
	.shop_list2{margin-top: 10%;}
	.shop_list3{margin-top: 10%;}
	.shop6-title{margin-top: 15%;}
	.shop6-title h1::before{width: 30%;}
	.shop6-title h1:after{width: 30%;}
	.shop6-title p{    margin-top: -20px; margin-left:0;}
	

}







