@charset "utf-8";
/* CSS Document */
.content {
}
.content ul{
	margin:0 -4px;
	margin-bottom: 0px;
}
.content li {
	width: 25%;
	float: left;
	padding:0 4px;
	display: block;
	list-style: none;
	margin-bottom:30px;
}
.content .list:hover .photo:after,.content .list:hover .photo:before  {
	opacity: 1;
}
.content .list:hover .name {
	color:#355C88;
	border-bottom:#7EA4CD 1px solid;
}
.content .list {
	max-width: 230px;
	position: relative;
	text-align: center;
	margin:0 auto;
}
.content .photo:after {
	content:'';
	position: absolute;
	top:5px;
	left:5px;
	bottom:5px;
	right:5px;
	opacity:0;
	border:#FFF 1px solid;
	background:url(../images/products/ar.png) center bottom no-repeat;
	z-index:2;
	-webkit-transition: all .3s ease;
	-moz-transition: all .3s ease;
	-o-transition: all .3s ease;
	transition: all .3s ease;
}
.content .photo:before {
	content:'';
	position: absolute;
	top:0px;
	left:0px;
	bottom:0px;
	right:0px;
	opacity:0;
	background:rgba(191,223,255,0.5) url(../images/products/top.png) center no-repeat;
	z-index:2;
	-webkit-transition: all .3s ease;
	-moz-transition: all .3s ease;
	-o-transition: all .3s ease;
	transition: all .3s ease;
}
.content .photo {
	max-width: 232px;
	max-height: 232px;
	position: relative;
	text-align: center;
	border:#E8E7EB 1px solid;
}
.content .photo img {
	max-width: 100%;
	height:auto !important;
}
.content .name {
	color:#666666;
	height: 40px;
	overflow: hidden;
	line-height: 40px;
	font-size: 15px;
	display:inline-block;
	text-align: center;
	text-decoration: none;
	min-width:140px;
}
/**************************************************************/
/**************************************************************/
@media (max-width: 700px) {
.content li {
	width: 33.3333333333333333%;
}
}
@media (max-width: 500px) {
.content li {
	width: 50%;
}
}
@media (max-width: 350px) {
.content li {
	width: 100%;
	margin-bottom:30px;
}
}
/**************************************************************/
/**************************************************************/
.content_in{
	margin:0 auto;
	padding-bottom:40px;
	border-bottom:#DDDDDD 1px solid;
	margin-bottom:40px;
}
.content_in .name {
	color:#FFF;
	font-size: 20px;
	line-height: 1.2;
	font-weight: bold;
	padding:5px 10px;
	text-decoration: none;
	position: relative;
	background:#9EBBDA;
	margin-bottom:20px;
	text-align:center;
}
.content_in .photo{
	max-width:680px;
	margin:0 auto;
	margin-bottom:20px;
}
.content_in .photo_b{
	max-width:402px;
	border:#E8E7EB 1px solid;
	float:left;
	position:relative;
	text-align:center;
	margin-bottom:15px;
}
.content_in .photo_b img{
	max-width:100%;
	height:auto !important;
	vertical-align:middle;
}
.content_in .photo_list{
	max-width:265px;
	float:right;
	text-align:center;
	-webkit-transition: all 200ms linear;
	-moz-transition: all 200ms linear;
	-o-transition: all 200ms linear;
	transition: all 200ms linear;
}
.content_in .photo_list li{
	width:50%;
	float:left;
	padding:0 10px 0 10px;
	list-style:none;
	margin-bottom:31px;
	-webkit-transition: all 200ms linear;
	-moz-transition: all 200ms linear;
	-o-transition: all 200ms linear;
	transition: all 200ms linear;
}
.content_in .photo_list li:last-child{
	margin-bottom:0px;
}
.content_in .photo_s{
	text-align:center;
	padding-bottom:1px;
	border:#E8E7EB 1px solid;
	position: relative;
}
.content_in .photo_s a{
	max-width:150px;
	max-height:150px;
	display:block;
	text-align:center;
	position: relative;
}
.content_in .photo_s img{
	max-width:100%;
	height:auto !important;
	vertical-align:middle;
}
.content_in .photo_s a .cover{
	width:100%;
	height:100%;
	display:block;
	position:absolute;
	border:#724599 1px solid;
	background: url(../images/products/top.png) center no-repeat;
	top:0px;
	left:0px;
	filter:alpha(Opacity=0);
	-moz-opacity:0;
	opacity: 0;
	-webkit-transition: all 200ms linear;
	-moz-transition: all 200ms linear;
	-o-transition: all 200ms linear;
	transition: all 200ms linear;
}
.content_in .photo_s:hover a .cover{
	filter:alpha(Opacity=100);
	-moz-opacity:1;
	opacity:1;
}
.content_in .con{
	padding:0px 0 0 0;
	margin:0 auto;
}
.content_in .con img{
	max-width:100%;
	height:auto !important;
}
/**************************************************************/
@media (max-width: 1200px) {
.content_in .photo_b{
	float: none;
	margin:0 auto;
	margin-bottom:10px;
}
.content_in .photo_list{
	max-width:none;
	float: none;
	font-size:0px;
	margin:0 -10px;
}
.content_in .photo_list li{
	width:16.666666666666666666666%;
	padding:0 10px;
	display:inline-block;
	list-style:none;
	margin-bottom:10px;
}
}
@media (max-width: 550px) {
.content_in .photo_list li{
	width:33.33333333333333333333333%;
}
}