﻿/* 容器 */
.container{width: 82.55%; margin: 60px auto;}
/* 搜索 */
.container .search{width: 76.46%;margin: 20px auto;}
.container .search input{border: 1px solid #005ba3;background-color: #fff;}

/* 产品分类 */
.product_class{font-size: 0;margin: 60px auto;}
.product_class li{width: 20%;font-size: 30px;color: #3d3d3d;display: inline-block;position: relative;text-align: center;    vertical-align: top;}
.product_class li>a{color: #3d3d3d;}
.product_class li:hover {color: #005ba3;}
.product_class li div.menu{position: absolute;display: none;width: 100%; top: 100%;left: 0;background-color: #fff;z-index: 99;padding: 20px ;border-radius: 20px;box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.2);}
.product_class li:hover div.menu{display: block;transition: all 0.5s ease-in-out;}
.product_class li div.menu a{color: #737373;font-size: 24px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;display: block;line-height: 2;}
.product_class li div.menu a:hover{color: #005ba3;}
/* 产品列表 */
.product_list{}

.product_list  .product_item{display: block;margin-bottom: 64px;width: 29.4%;margin-right: 5.6%;border: 1px solid #dcdcdc; border-radius: 80px;padding: 50px 20px;text-align: center;position: relative;}
.product_list  .product_item:nth-child(3n){margin-right: 0%;}
.product_list  .product_item img{display: inline-block;width: 60%;}
.product_list  .product_item  p{font-size: 24px;color: #5a5a5a;line-height: 1;margin-top: 30px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}

.product_list  .product_item .mask{width: 100%; opacity: 0; height: 100%;position: absolute;top: 0 ;left: 0;background-color: rgba(0, 91, 163, 0.79);border-radius: 80px;display: flex;flex-direction: column;justify-content: center;transition: all 0.8s ease-in-out;-webkit-transition: all 0.8s ease-in-out;-moz-transition: all 0.8s ease-in-out;}
.product_list  .product_item:hover .mask{opacity: 1;transition: all 0.8s ease-in-out;-webkit-transition: all 0.8s ease-in-out;-moz-transition: all 0.8s ease-in-out;}
.product_list  .product_item .mask span{color: #fff;font-size: 28px;line-height: 1;margin-bottom: 40px;}
.product_list  .product_item .mask button{display: block; margin: 0px auto ;  border: 1px solid #005ba3;color: #005ba3;width: 222px;padding: 18px 30px;font-size: 18px;line-height: 1;border-radius: 28px;background: #fff url("../images/logo_icon2.png") no-repeat 20px 0;background-size: 34px 40px;text-align: center;}
button.btn{display: block; margin: 60px auto 80px;  border: 1px solid #005ba3;color: #005ba3;width: 222px;padding: 18px 30px;font-size: 18px;line-height: 1;border-radius: 28px;background: url("../images/logo_icon2.png") no-repeat 20px 0;background-size: 34px 40px;text-align: center;transition: all .5s ease-in-out;-webkit-transition: all .5s ease-in-out;-moz-transition: all .5s ease-in-out;}
button.btn:hover{color: #fff;background:url("../images/logo_icon1.png") no-repeat 20px 0;background-color: #005ba3; transition: all .5s ease-in-out;-webkit-transition: all .5s ease-in-out;-moz-transition: all .5s ease-in-out;}


/* 产品详情 */
/* 轮播 */
.product_lunbo{width: 78.125%;position: relative;margin: 100px auto 60px;}
.product_img>div{position: relative; width: 60%;}

.product_img>div>div{position: absolute;z-index: -1;left: 50%;transform: translateX(-50%);}
.product_img>div>div.active{ z-index: 1;}

.product_img>ul{font-size: 0;width: 40%;/*margin: 25px auto 50px;*/display: flex;justify-content: space-between;align-items: center;}
.product_img>ul>li{border: 1px solid #eaeaea;/*width: 15.96%;*/ margin-top: 20px; padding: 20px;width: 23%;border-radius: 20px;}
.product_img>ul>li.active{border: 1px solid #005ba3;}
.product_img>ul>li:last-child{margin-right: 0;}
.pagination>span{background-size: contain;width: 14px;height: 26px;display: block;position: absolute;top: 50%;}
.left{ background: url("../images/arr_left1.png") no-repeat center center;left: 10%;right: auto;}
.right{background: url("../images/arr_right1.png") no-repeat center center;left: auto;right:10% ;}

/* 参数 */
.parameter{width: 78.125%;margin: 0px auto ;}
.parameter ul{width: 100%;font-size: 0;}
.parameter ul li{margin: 15px auto;line-height: 1;color: #3d3d3d;font-size: 0;width: 50%;display: inline-block;}
.parameter ul li:last-child{width: 100%;}
.parameter ul li b{font-size: 30px; display: inline-block;font-weight: normal; vertical-align:top;}
.parameter ul li span{width: calc(100% - 184px);font-size: 30px; display: inline-block;vertical-align: top;}

/* 背景1 */
.bg1{background: url(../images/product_details1.jpg) no-repeat center center; background-size: cover;min-height: 305px;color: #fff;position: relative;margin: 90px auto;}
.bg1>div{width:78.125%;position: absolute;left:50%;top: 50%;transform: translate(-50%,-50%);-webkit-transform: translate(-50%,-50%);-moz-transform: translate(-50%,-50%);}
.bg1>div h3{font-size:35px ;line-height: 1;margin-bottom: 30px;}
.bg1>div p{font-size: 26px;line-height: 1.65;}

/* 用途肌理 */
.texture{width: 78.125%;margin: 0px auto ;}
.texture .texture_title{text-align: center;}
.texture .texture_title img{display: inline-block;width: 630px;}
.mechanism{margin: 70px auto 80px;}
.mechanism>div{width: 50%;}
.mechanism>div h3{font-size: 30px;font-weight: normal;line-height: 1;margin-bottom: 40px;}
.mechanism>div p{font-size: 24px;line-height: 1.79;}
.mechanism>img{width: 46.46%;}
.action{margin: 0 auto 60px;}
.action h3{font-size:30px ;line-height: 1;margin-bottom: 30px;font-weight: normal;}
.action ul>li{margin-bottom: 35px;font-size: 24px;}
.action ul>li span{display: block;color: #005ba3;}
.action ul>li p{line-height: 1.54;color: #3d3d3d;}

/* 用途 */
.use{width: 78.125%;margin: 0px auto ;}
.use .use_title{text-align: center;}
.use .use_title img{display: inline-block;width: 205px;}
.use_class{font-size: 0;margin: 60px auto;}
.use_class li{display: inline-block;width: 28.53%;margin-right: 6.667%;position: relative;}
.use_class li:last-child{margin-right:0%;}
.use_class li div.mask{width: 100%;height: 100%;position: absolute;top: 0;left: 0;display: flex;justify-content: center;align-items: center;background-color: rgba(0, 0, 0, 0.0);color: #fff;transition: background-color 0.5s ease-in-out;-webkit-transition: background-color 0.5s ease-in-out;-moz-transition: background-color 0.5s ease-in-out;}
.use_class li:hover div.mask{background-color: rgba(0, 0, 0, 0.5);transition: background-color 0.5s ease-in-out;-webkit-transition: background-color 0.5s ease-in-out;-moz-transition: background-color 0.5s ease-in-out;}
.use_class li div.mask p{font-size: 30px;}

.use_info span{font-size: 24px;color: #3d3d3d;display: block;margin-bottom:30px ;}
.use_info b{display: block;color: #005ba3;font-size: 24px;margin-bottom: 10px;}
.use_info p{font-size: 24px;color: #3d3d3d;line-height: 1.46;margin-bottom: 100px;}

.beCareful{margin-bottom: 60px;}
.beCareful h3{font-size: 30px;color: #3d3d3d;margin-bottom: 30px;}
.beCareful ul li{font-size: 24px;line-height: 2;color: #3d3d3d;}

@media screen and (max-width: 1600px) {
    .container{width: 82.55%; margin: 50px auto;}
    .product_class{font-size: 0;margin: 50px auto;}
    .product_class li{width: 20%;font-size: 26px;}
    .product_class li div.menu a{font-size: 20px;}
    .product_list  .product_item{margin-bottom: 44px;width: 29.4%;margin-right: 5.6%; border-radius: 80px;padding: 50px 20px;}

    .product_list  .product_item  p{font-size: 20px;line-height: 1;margin-top: 20px;}
    .product_list  .product_item .mask span{font-size: 24px;line-height: 1;margin-bottom: 30px;}

    .product_lunbo{width: 78.125%;position: relative;margin: 80px auto 40px;}
    .parameter ul li b{font-size: 26px; }
    .parameter ul li span{width: calc(100% - 184px);font-size: 26px; }
    
    .bg1{min-height: 305px;margin: 70px auto;}
    .bg1>div h3{font-size:30px ;line-height: 1;margin-bottom: 25px;}
    .bg1>div p{font-size: 22px;line-height: 1.65;}

   
    .texture .texture_title img{width: 504px;}
    .mechanism{margin: 50px auto 60px;}
    .mechanism>div h3{font-size: 26px;margin-bottom: 30px;}
    .mechanism>div p{font-size: 20px;line-height: 1.79;}

    .action{margin: 0 auto 50px;}
    .action h3{font-size:26px ;margin-bottom: 25px;}
    .action ul>li{margin-bottom: 30px;font-size: 20px;}

    .use .use_title img{width: 164px;}
    .use_class{font-size: 0;margin: 40px auto;}
    .use_class li div.mask p{font-size: 26px;}
    .use_info span{font-size: 20px;margin-bottom:25px ;}
    .use_info b{font-size: 20px;margin-bottom: 10px;}
    .use_info p{font-size: 20px;margin-bottom: 80px;}
    .beCareful{margin-bottom: 50px;}
    .beCareful h3{font-size: 26px;margin-bottom: 25px;}
    .beCareful ul li{font-size: 20px;line-height: 2;}

}
@media screen and (max-width: 1440px) {
    .container{width: 82.55%; margin: 40px auto;}
    .product_class{font-size: 0;margin: 40px auto;}

    .product_class li{width: 20%;font-size: 22px;}
    .product_class li div.menu a{font-size: 16px;}
    .product_list  .product_item  p{font-size: 16px;line-height: 1;margin-top: 20px;}
    .product_list  .product_item .mask span{font-size: 20px;line-height: 1;margin-bottom: 20px;}
    .product_list  .product_item .mask button{ width: 180px;padding: 10px 20px;font-size: 16px;border-radius: 28px;background: #fff url("../images/logo_icon2.png") no-repeat 6px -10px;background-size: 34px 40px;text-align: center;}

    .parameter ul li b{font-size: 22px; }
    .parameter ul li span{width: calc(100% - 148px);font-size: 22px;}
    .product_lunbo{width: 78.125%;position: relative;margin: 60px auto 30px;}


}
@media screen and (max-width: 1360px) {
    .parameter ul li b{font-size: 18px; }
    .parameter ul li span{width: calc(100% - 120px);font-size: 18px;}

    .bg1{min-height: 305px;margin: 50px auto;}
    .bg1>div h3{font-size:26px ;line-height: 1;margin-bottom: 20px;}
    .bg1>div p{font-size: 18px;line-height: 1.65;}

    .texture .texture_title img{width: 378px;}
    .mechanism{margin: 30px auto 40px;}
    .mechanism>div h3{font-size: 22px;margin-bottom: 20px;}
    .mechanism>div p{font-size: 16px;line-height: 1.79;}

    .action{margin: 0 auto 40px;}
    .action h3{font-size:22px ;margin-bottom: 20px;}
    .action ul>li{margin-bottom: 20px;font-size: 16px;}

    .use .use_title img{width: 123px;}
    .use_class{font-size: 0;margin: 30px auto;}
    .use_class li div.mask p{font-size: 22px;}
    .use_info span{font-size: 16px;margin-bottom:20px ;}
    .use_info b{font-size: 16px;margin-bottom: 10px;}
    .use_info p{font-size: 16px;margin-bottom: 60px;}
    .beCareful{margin-bottom: 40px;}
    .beCareful h3{font-size: 22px;margin-bottom: 20px;}
    .beCareful ul li{font-size: 16px;line-height: 2;}

}
@media screen and (max-width: 1024px) {
    .container{width: 82.55%; margin: 30px auto;}
    .product_class{font-size: 0;margin: 30px auto;}

    .product_class li{width: 20%;font-size: 18px;}
    .product_class li div.menu a{font-size: 12px;}
    .product_list  .product_item{margin-bottom: 24px;width: 29.4%;margin-right: 5.6%; border-radius: 40px;padding: 30px 10px;}

    .product_list  .product_item  p{font-size: 12px;line-height: 1;margin-top: 10px;}
    .product_list  .product_item:hover .mask{opacity: 0;}
    .product_list  .product_item .mask span{font-size: 16px;line-height: 1;margin-bottom: 10px;}
    .product_list  .product_item .mask button{ width: 180px;padding: 10px 20px;font-size: 11px;border-radius: 28px;background: #fff url("../images/logo_icon2.png") no-repeat 6px -10px;background-size: 34px 40px;text-align: center;}

    .product_lunbo{width: 78.125%;position: relative;margin: 40px auto 20px;}

    .texture .texture_title img{width: 378px;}
    .mechanism{margin: 30px auto 40px;}
    .mechanism>div h3{font-size: 18px;margin-bottom: 10px;}
    .mechanism>div p{font-size: 12px;line-height: 1.5;}


    
}
@media screen and (max-width: 768px) {
    .product_class li{width: 20%;font-size: 14px;}
    .product_img>div{position: relative; width: 100%;}
    .product_img>ul{width:100%;}

    .parameter ul li b{font-size: 14px; }
    .parameter ul li span{width: calc(100% - 100px);font-size: 14px;}

    .bg1{min-height: 305px;margin: 30px auto;}
    .mechanism{margin: 15px auto 20px;}
    .action{margin: 0 auto 20px;}
    .action h3{font-size:18px ;margin-bottom:10px;}
    .action ul>li{margin-bottom: 10px;font-size: 12px;}

    .use_class{font-size: 0;margin: 20px auto;}
    .use_class li div.mask p{font-size: 18px;}
    .beCareful{margin-bottom: 30px;}
    .beCareful h3{font-size: 18px;margin-bottom: 10px;}
    .beCareful ul li{font-size: 12px;line-height: 2;}

}
@media screen and (max-width: 750px) {
    .container{width: 82.55%; margin: 20px auto;}
    .product_class{font-size: 0;margin: 20px auto;}
    .container .search {width: 100%; margin: 20px auto;}
    .product_list  .product_item{margin-bottom: 20px;width:100%;margin-right:0%; border-radius: 40px;padding: 30px;}
    button.btn{ margin: 30px auto 40px;}

    .product_img .product_img_list{text-align: center;}
    .product_img .product_img_list img{display: inline-block;}
    .parameter ul li{width: 100%;}

    .texture .texture_title img{width: 252px;}
    .mechanism>div{width: 100%;}
    .mechanism>img{width: 100%;margin-top: 10px;}

    .use_class{font-size: 0;margin: 20px auto;}
    .use_class li div.mask p{font-size: 12px;}

    .use_info span{font-size: 12px;margin-bottom:10px ;}
    .use_info b{font-size: 12px;margin-bottom: 5px;}
    .use_info p{font-size: 12px;margin-bottom: 20px;}
    .beCareful{margin-bottom: 20px;}


}
