﻿

.home-container{

}
    .home-container .home-left{

    }
    .home-container .home-left ul.home-nav1{
        display: inline-block;
    }
    .home-container .home-left ul.home-nav1 li{
        display: inline-block;
        margin-bottom: 30px;
        margin-right: 50px;
    }
    .home-container .home-left ul.home-nav1 li a{ 
        color: #999;
        font-size: 22px;
        position: relative;
    }
    .home-container .home-left ul.home-nav1 .home-nav1-active a{
        color: #963437;
        position: relative;
    }
    .home-container .home-left ul.home-nav1 li a::after{
        content: "";
        width: 0px;
        height: 3px;
        background: #963437;
        position: absolute;
        top: 120%;
        left: 0;
        transition: .5s;
        -webkit-transition: .5s;
        -moz-transition: .5s;
        -ms-transition: .5s;
        -o-transition: .5s;
}
    .home-container .home-left ul.home-nav1 .home-nav1-active a::after{
        content: "";
        width: 20px;
        height: 3px;
        background: #963437;
        position: absolute;
        top: 120%;
        left: 0;
    }
    .home-container .home-left ul.home-nav1 li:hover a{
        color: #963437;
    }
    .home-container .home-left ul.home-nav1 li:hover a::after{
        width: 20px;
    }

    .home-container .home-left ul.home-nav2{

    }
    .home-container .home-left ul.home-nav2 li{
        display: inline-block;
        margin-right: 20px;
    }
    .home-container .home-left ul.home-nav2 li a{
        font-size: 16px;
        color: #999;
    }
    .home-container .home-left ul.home-nav2 li.home-nav2-active a{
       color: #963437;
    }

    .home-container .home-left ul.home-nav2 li:hover a{
        color: #963437;
    }

@media(max-width:1500px){
    .home-container .home-left ul.home-nav1 li a{font-size: 20px;}
}
@media(max-width:1200px){
    .home-container .home-left ul.home-nav1 li a{font-size: 18px;}
}

@media(max-width:960px){
    .home-container .home-left ul.home-nav1 li a{font-size: 16px;}
}


/* 材料中心列表 */
.products-content{
    /* border: 1px solid red; */
}
    .products-content ul{
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }
    .products-content ul li{
        display: flex;
        width: 48.75%;
        margin-bottom: 2.3%;
        align-items: center;
    }
    .products-content ul li .pro-img{
        display: inline-block;
        width: 44.8%;
        padding-bottom: 44.8%;
        position: relative;
	    background:#e6e6e6;
    }
    .products-content ul li .pro-img a{
        position: absolute;
        top: 0%;
        left: 0%;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
    }
    .products-content ul li .pro-img a img{
        display: inline-block;
        max-width: 80%;
        max-height: 80%;
        transition: .5s;
        -webkit-transition: .5s;
        -moz-transition: .5s;
        -ms-transition: .5s;
        -o-transition: .5s;
}
    .products-content ul li .pro-text{
        display: inline-block;
        width: 53.8%;
        vertical-align: top;
        box-sizing: border-box;
        padding: 0 4%;
    }
    .products-content ul li .pro-text h1 a{
        display: block;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        font-size: 24px;
        color: #333;
        margin-bottom: 8%;
        font-weight: normal;
    }
    .products-content ul li .pro-text p a{
        display: block;
        font-size: 16px;
        color: #666;
        line-height: 30px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;
        margin-bottom: 8%;
    }
    .products-content ul li .pro-text span{
        display: block;
        font-size: 18px;
        color: #963437;
        margin-bottom: 10%;
    }
    .products-content ul li .pro-text>a{
        display: inline-block;
        width: 160px;
        height: 50px;
        line-height: 50px;
        text-align: center;
        box-sizing: border-box;
        border: 1px solid #999999;
        font-size: 18px;
        color: #333;
        border-radius: 4px;
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        -ms-border-radius: 4px;
        -o-border-radius: 4px;
}

    .products-content ul li:hover .pro-img a img{
        transform: scale(1.1);
        -webkit-transform: scale(1.1);
        -moz-transform: scale(1.1);
        -ms-transform: scale(1.1);
        -o-transform: scale(1.1);
    }
    .products-content ul li:hover .pro-text h1 a{
        color: #963437;
    }
    .products-content ul li:hover .pro-text>a{
        border: 1px solid #963437;
        background: #963437;
        color: white;
    }
    .products-content ul li:hover{
        box-shadow: 0 0 14px rgba(0, 0, 0, .2);
    }

    .products-content .pageGuide{
        margin-top: 2%;
    }

@media(max-width:1600px){
    .products-content ul li .pro-text h1 a{font-size: 22px;}
    .products-content ul li .pro-text p a{font-size: 15px;line-height: 28px;}
    .products-content ul li .pro-text span{font-size: 17px;}
    .products-content ul li .pro-text>a{font-size: 17px;width: 150px;height: 46px;line-height: 46px;}
}
@media(max-width:1500px){
    .products-content ul li .pro-text h1 a{font-size: 20px;}
}
@media(max-width:1400px){
    .products-content ul li .pro-text h1 a{font-size: 18px;}
    .products-content ul li .pro-text p a{font-size: 14px;line-height: 26px;}
    .products-content ul li .pro-text span{font-size: 16px;}
    .products-content ul li .pro-text>a{font-size: 15px;width: 135px;height: 40px;line-height: 40px;}
}
@media(max-width:1300px){
    

}
@media(max-width:1200px){
    .products-content ul li .pro-text h1 a{font-size: 16px;}
    .products-content ul li .pro-text span{font-size: 15px;}
    .products-content ul li .pro-text>a{font-size: 14px;width: 120px;height: 36px;line-height: 36px;}
    .products-content ul li .pro-text p a{-webkit-line-clamp:2}
    .products-content ul li .pro-text p a{font-size: 13px;line-height: 24px;}
}
@media(max-width:960px){
    .products-content ul li .pro-text span{font-size: 14px;}
    .products-content ul li{flex-wrap: wrap;}
    .products-content ul li .pro-img{width: 100%;padding-bottom: 100%;}
    .products-content ul li .pro-text{width: 100%;padding: 4%;}
    .products-content ul li .pro-text h1 a,.products-content ul li .pro-text p a{margin-bottom: 10px;}
    .products-content ul li{margin-bottom: 20px;}
}
@media(max-width:760px){
    .products-content ul li .pro-text p a{font-size: 12px;line-height: 22px;}
    .products-content ul li .pro-text>a {
        font-size: 12px;
        width: 100px;
        height: 33px;
        line-height: 33px;}
}

/* 产品详情 */
.productsd-content{
    /* border: 1px solid red; */
}
    .productsd-top{
        margin-bottom: 5%;
    }
    .prod-left{
        display: inline-block;
        width: 40.64%;
        padding: 0 4.68%;
        overflow: hidden;
        position: relative;
    }

    .pc-slide{
        overflow: hidden;
    }
    /* 大图展示轮播 */
    .view{
        margin: 0 2%;
        overflow: hidden;
    }
    .view .swiper-container {width: 100%;position: relative;}
    .view:hover .arrow{display: block;}
    .view .arrow{display: block;position: absolute;top: 50%;margin-top: -35px;width: 70px;height: 70px;z-index: 100000000; }
    .view .swiper-slide{
        width: 100%;
        padding-bottom: 92.3%;
        position: relative;
	background:#e6e6e6;
    }
    .view .swiper-slide a{
        display: inline-block;
        width: 70%;
        height: 75%;
        position: absolute;
        top: 12.5%;
        left: 15%;
    }
    .view .swiper-slide a img{
        display: inline-block;
        width: 100%;
        height: 100%;
        transition: .5s;
        -webkit-transition: .5s;
        -moz-transition: .5s;
        -ms-transition: .5s;
        -o-transition: .5s;
	}
    .view .swiper-slide a img:hover{
        transform: scale(1.1);
        -webkit-transform: scale(1.1);
        -moz-transform: scale(1.1);
        -ms-transform: scale(1.1);
        -o-transform: scale(1.1);
}

    /* 缩略图轮播图 */
    .preview { width: 100%;margin-top: 3%;position: relative;padding: 0 0.5%;}
    .preview .swiper-slide {width: 22% !important;height: 100%;margin: 0 1.4%;position: relative;padding-bottom: 22%;overflow: hidden;box-sizing: border-box;border: 1px solid #ccc;background:#e6e6e6;}
    .preview .swiper-slide img{ display: inline-block; width: 70%; height: 70%; position: absolute; top: 15%; left: 15%; cursor: pointer; transition: .5s; -webkit-transition: .5s; -moz-transition: .5s; -ms-transition: .5s; -o-transition: .5s; }
    /* .preview .arrow{position: absolute;top: 50%;margin-top: -9px;width: 30px; height: 60px;z-index: 10;} */
    #arrow-left,#arrow-right{position: absolute;top: 50%;margin-top: -9px;width: 4.5%; height: 8%;z-index: 10;}

    #arrow-left {background: url("../img/pro-prev.png") no-repeat center;left: 2px;top:40%;cursor: pointer;background-size: 100% 100%;}
    #arrow-right {
        background: url("../img/pro-prev.png") no-repeat center;
        right: 0px;
        top: 40%;
        cursor: pointer;
        background-size: 100% 100%;
        transform: rotateY(180deg);
        -webkit-transform: rotateY(180deg);
        -moz-transform: rotateY(180deg);
        -ms-transform: rotateY(180deg);
        -o-transform: rotateY(180deg);
    }

    .preview .active-nav {
        box-sizing: border-box;
        border: 2px solid #963437;
    }
    
    .prod-right{
        display: inline-block;
        width: 45%;
        padding-left: 4%;
        vertical-align: top;
    }
    .prod-right>h1{
        padding: 2% 0;
        padding-left: 2%;
        font-size: 24px;
        color: white;
        background: #963437;
    }
    .prod-right span{
        font-size: 18px;
        color: #963437;
        display: block;
        margin: 5% 0;
    }
    .prod-right p{
        font-size: 16px;
        line-height: 30px;
        color: #595959;
    }
    .preview .swiper-slide img:hover{
        transform: scale(1.2);
        -webkit-transform: scale(1.2);
        -moz-transform: scale(1.2);
        -ms-transform: scale(1.2);
        -o-transform: scale(1.2);
}

/* 产品说明 */
.productsd-detail{
    width: 100%;
}
    .productsd-detail .productsd-name{
        background: #ececec;
    }
    .productsd-detail .productsd-name p{
        display: inline-block;
        color: white;
        height: 45px;
        line-height: 45px;
        text-align: center;
        width: 140px;
        background: #963437;
    }
    .prod-edit{
        padding-bottom: 5%;
        border-bottom: 1px solid #bfbfbf;
        margin-bottom: 2%;
    }
    .prod-edit>div{
        margin-top: 3%;
    }
    .prod-edit>div>p{
        font-size: 14px;
        line-height: 30px;
        color: #6a6969;
    }

    .prod-page{

    }
    .prod-page .prod-page-left{
        display: inline-block;
    }
    .prod-page .prod-page-left a{
        display: block;
        font-size: 14px;
        line-height: 30px;
        color: #323232;
    }
    .prod-page .prod-page-left a:hover{
        color: #963437;
    }

    .prod-page .prod-page-right{
        display: inline-block;
        float: right;
    }
    .prod-page .prod-page-right a{
        display: inline-block;
        width: 100px;
        height: 35px;
        line-height: 35px;
        text-align: center;
        font-size: 12px;
        color: white;
        background: #963437;
        border-radius: 4px;
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        -ms-border-radius: 4px;
        -o-border-radius: 4px;
        position: relative;
        top: 40px;
}

@media(max-width:760px){
    .prod-left{
        width: 90.64%;
        margin-bottom: 5%;
    }
    .prod-right{
        width: 92%;
        padding: 0 4%;
    }
    .prod-page .prod-page-right{
        display: block;
        float: none;
        margin-top: 5%;
    }
    .prod-page .prod-page-right a{ 
        position: relative;
        top: 0;
    }
}

.hide{ display:none;}






