@charset "utf-8";
/* CSS Document */

.product{ width:100%; margin:auto; overflow:hidden; position:relative; margin-bottom:20px;}
.product-search{ width:80%; margin:auto; overflow:hidden; margin-top:30px;}
.product-s{ float:right; width:355px; border:solid 1px #ccc; border-radius:25px; height:50px; background:#EFF2F4;}

.product-search1{ float:left; margin-top:1px; margin-left:18px; padding:0 5px; height:46px; width:275px; background:none; border:none; color:#666; font-size:14px;}
.product-search2{ width:27px; height:27px; float:right; margin:10px;}

.product-list{ width:90%; margin:auto; margin-top:45px;}
.product-list ul{ width:93%; margin:auto;}
.product-list ul li{ float:left; width:30%; margin-left:2.5%; margin-bottom:50px; position:relative; overflow:hidden;}
.product-list ul li img{ width:100%; transition:all 1s;}
.product-list ul li .product-ycc{ display: flex; align-items: center; justify-content: space-around; flex-direction: column; z-index:9; line-height:25px; transition:all 1s; opacity:1; width:100%; height:100%; position:absolute; top:0; left:0; background:url(../images/bk4-5.png); text-align:center; }
.product-list ul li:hover .product-ycc{z-index:-9;  transition:all 1s; opacity:0; width:50%; height:50%; position:absolute; top:25%; left:25%; background:url(../images/bk4-5.png); text-align:center; 
animation: rotate-x 1s;
    -moz-animation: rotate-x 1s;  /* Firefox */
    -webkit-animation: rotate-x 1s;   /* Safari 和 Chrome */
    -o-animation: rotate-x 1s;    /* Opera */

}
.product-ycc span{ padding:4%; color:#FFF; font-size:23px; display: table-cell; vertical-align:middle; text-align:center;}

.product-list ul li .bk1{ z-index:999; transition:all 0.5s; position:absolute; width:94%; top:4%; left:3%; border-top:solid 1px #fff;}
.product-list ul li:hover .bk1{ transition:all 0.5s; width:0%;}
.product-list ul li .bk2{ z-index:999; transition:all 0.5s; position:absolute; height:92%; top:4%; left:3%; border-left:solid 1px #fff;}
.product-list ul li:hover .bk2{ transition:all 0.5s; height:0;}
.product-list ul li .bk3{ z-index:999; transition:all0.5s; position:absolute;  height:92%; bottom:4%; right:3%; border-right:solid 1px #fff;}
.product-list ul li:hover .bk3{ transition:all 0.5s; height:0;}
.product-list ul li .bk4{ z-index:999; transition:all 0.5s; position:absolute; width:94%; bottom:4%; right:3%; border-bottom:solid 1px #fff; }
.product-list ul li:hover .bk4{ transition:all 0.5s; width:0;}


@media screen and (min-width:1480px) and (max-width:1680px) {
.product{ width:98%;}

}


@media screen and (min-width:1380px) and (max-width:1479px) {
.product{ width:98%;}
.product-search{ width:90%;}
.search-s{ width:200px;}
.product-list{ width:100%; margin-top:2%;}
.product-ycc span{ font-size:20px;}


}

@media screen and (min-width:1280px) and (max-width:1379px) {
.product{ width:98%;}
.product-search{ width:90%;}
.search-s{ width:200px;}
.product-list{ width:100%; margin-top:2%;}
.product-ycc span{ font-size:20px;}
}

@media screen and (min-width:1199px) and (max-width:1279px) {
.product{ width:98%;}
}

@media screen and (min-width:900px) and (max-width:1200px) {
.product{ width:100%; margin-left:1%;}
.product-s{ margin-right:3%;}
.product-list{ width:100%; margin-top:3%;}
.product-list ul{ width:100%;}
.product-list ul li{ width:30%; margin-left:2.4%; height:auto; margin-right:auto; margin-bottom:5%;}
.product-ycc span{  display:block; font-size:16px; }		
}

@media screen and (min-width:800px) and (max-width:899px) {
.product{ width:98%; margin-left:1%;}
.product-search{ margin-top:5%;}
.product-s{ width:100%;}
.product-search1{ width:70%;}

.product-list{ width:100%; margin-top:5%;}
.product-list ul{ width:100%;}
.product-list ul li{ width:30%; margin-left:2.4%; height:auto; margin-right:auto; margin-bottom:5%;}
.product-ycc span{  display:block;}		
}

@media screen and (min-width:750px) and (max-width:799px) {

.product{ width:98%; margin-left:1%;}
.product-search{ margin-top:5%;}
.product-s{ width:100%;}
.product-search1{ width:70%;}

.product-list{ width:100%; margin-top:5%;}
.product-list ul{ width:100%;}
.product-list ul li{ width:48%; margin-left:1.5%; height:auto; margin-right:auto; margin-bottom:5%;}
.product-ycc span{ display:block;}	


}

@media screen and (min-width:720px) and (max-width:749px) {
.product{ width:98%; margin-left:1%;}
.product-search{ margin-top:5%;}
.product-s{ width:100%;}
.product-search1{ width:70%;}

.product-list{ width:100%; margin-top:5%;}
.product-list ul{ width:100%;}
.product-list ul li{ width:48%; margin-left:1.5%; height:auto; margin-right:auto; margin-bottom:5%;}
.product-ycc span{ display:block;}	
.onl-message{ display:none;}

}

@media screen and (min-width:640px) and (max-width:719px) {
.product{ width:98%; margin-left:1%;}
.product-search{ margin-top:5%;}
.product-s{ width:100%;}
.product-search1{ width:70%;}

.product-list{ width:100%; margin-top:5%;}
.product-list ul{ width:100%;}
.product-list ul li{ width:48%; margin-left:1.5%; height:auto; margin-right:auto; margin-bottom:5%;}
.product-ycc span{ display:block;}	
.onl-message{ display:none;}

}

@media screen and (min-width:415px) and (max-width:639px) {

.product{ width:98%; margin-left:1%;}
.product-search{ margin-top:5%;}
.product-s{ width:100%;}
.product-search1{ width:70%;}

.product-list{ width:100%; margin-top:5%;}
.product-list ul{ width:100%;}
.product-list ul li{ width:48%; margin-left:1.5%; height:auto; margin-right:auto; margin-bottom:5%;}
.product-ycc span{ display:block;}	
.onl-message{ display:none;}

}

@media screen and (min-width:376px) and (max-width:414px) {
.product{ width:98%; margin-left:1%;}
.product-search{ margin-top:5%;}
.product-s{ width:100%;}
.product-search1{ width:70%;}

.product-list{ width:100%; margin-top:5%;}
.product-list ul{ width:100%;}
.product-list ul li{ width:98%; margin-left:1%; height:auto; margin-right:auto; margin-bottom:5%;}
.product-ycc span{ display:block;}	
.onl-message{ display:none;}
}

@media screen and (min-width:320px) and (max-width:375px) {
.product{ width:98%; margin-left:1%;}
.product-search{ margin-top:5%;}
.product-s{ width:100%;}
.product-search1{ width:70%;}

.product-list{ width:100%; margin-top:5%;}
.product-list ul{ width:100%;}
.product-list ul li{ width:98%; margin-left:1%; height:auto; margin-right:auto; margin-bottom:5%;}
.product-ycc span{ display:block;}	
.onl-message{ display:none;}
	

}