@charset "utf-8";

#main{	position: relative; z-index: 1;}
#main .mainBox{	position: relative; z-index: 1; background: #fff; overflow: hidden;}

#main .pro-list{
	float: left;
	width: 320px;
	padding: 30px;
	border-right: 1px solid #f1f1f1;
}
.page-title{
	text-align: left;
	padding: 0px;
	background: url(../img/side-pro.jpg) no-repeat;
	position: relative;
	height: 100px;
	margin-bottom: 5px;
}
.page-title h2{
	background-color: rgba(30,105,241,.95);
	color: #fff;
	font-size: 18px;
	height: 36px;
	line-height: 36px;
	position: absolute;
	top: 50px;
	text-align: center;
	left: 0;
	padding: 0 20px;
}
#main .pro-list .list{ display: block; position: relative;overflow: hidden;}
#main .pro-list .list .t{  border-bottom: 1px dotted  #ccc;	padding: 15px 0 15px 30px; background:url(../img/pro-side-bg.png) no-repeat left center;	transition: all 0.2s ease-in-out;}
#main .pro-list .list:hover .t{color: #1E69F1; /* background:url(../img/pro-side-bg.png) no-repeat right center; */}
#main .pro-list .list.cur .t{ color: #1E69F1; /*background:url(../img/pro-side-bg.png) no-repeat right center;*/} 
#main .pro-list .list h1{ font-size: 16px; font-weight: normal; }
#main .pro-list .list:hover h1{color: #1E69F1;}
#main .pro-list .list i{display: block;	font-size: 14px; line-height: 34px;	color: #888; font-style: normal;}



/* 详细页 */
#main .detailCon{border-left: 1px solid #f1f1f1; margin-left: -1px; width: 880px;padding: 30px;float: left; overflow: hidden;}

#main .pro-title{position: relative; border-bottom: 1px solid #f1f1f1; padding-bottom: 8px; margin-bottom: 20px;}
#main .pro-title h1{text-transform: uppercase; font-size: 24px; padding-bottom: 3px; color: #1E69F1;}
#main .pro-title h4{text-transform: uppercase; font-size: 12px; color: #888; font-weight: normal; }
#main .pro-title a{position: absolute; right: 0; top: 50%; height: 36px; margin-top: -18px; line-height: 36px; background: #1E69F1 url(../img/icon-05.png) no-repeat 11px 10px; background-size: 22px; padding-left: 38px; padding-right: 15px; display: inline-block; color: #fff; font-size: 14px; text-transform: uppercase;}
#main .pro-title a:hover{background-color: #015CBA;}

#main .pro-info{overflow: hidden; width: 260px; float: right; margin-top:0px; position: relative;}
#main .pro-info .pic-box{ overflow: hidden; position: relative;transition: all 0.2s ease-in-out;}
#main .pro-info .pic-box img{ width: 100%; display: block;transition: all 0.2s ease-in-out;}
#main .pro-info .title-tips{background-color: #1E69F1; color: #fff; font-size: 12px; width: 8em; border-radius: 1em; height:2em; line-height: 2em; text-align: center; position: absolute; z-index: 9; top: 50%; left: 50%; margin: -1em 0 0 -4em; opacity: 0; transition: all 0.2s ease-in-out;}
#main .pro-info .pic-box:hover .title-tips{opacity: 1;}
#main .pro-info h2{font-size: 14px; margin: 5px 0 10px; font-weight: normal; text-align: center; color: #888; }

#main .prodetail{margin-top: 0px; width: 500px; padding-bottom: 40px; overflow: hidden;}
#main .prodetail h2{font-size: 16px; color: #1E69F1;  margin-top: 0px; margin-bottom: 10px;}
#main .prodetail p{ margin-bottom: 30px;}
#main .prodetail img{max-width: 100%; display: block;}

#main .other .mainBox{padding: 30px;}
#main .other h2{font-size: 16px; color: #1E69F1; margin-top: 30px; margin-bottom: 10px;}
#main .box{padding: 20px 0 0; line-height: 1.8em; margin: 0 -15px; overflow: hidden; }
#main .box .list{ display: block; width: 25%; position: relative; float: left;}
#main .box .list .con{	display: block;	position: relative;	z-index: 0;	width: 90%; margin: 0 auto;}
#main .box .list .pic{	position: relative;	transition: all 0.2s ease-in-out;}
#main .box .list:hover .pic{transform:scale(1.1)}
#main .box .list .pic img{	display: block;	width: 100%;}
#main .box .list .pic div{	position: absolute;	width: 100%; height: 100%; top: 0; left: 0; background-color: rgba(0,0,0,.5); transition: all 0.2s ease-in-out;	opacity: 0;}
#main .box .list:hover .pic div{ opacity: 1;}
#main .box .list .pic span{	position: absolute;	width: 120px; height: 32px;	font-size: 12px; border-radius: 20px; text-align: center; background-color: #fff; color: #0052AE; line-height: 32px; left: 50%;	top: 50%; margin: -16px 0 0 -60px;}
#main .box .list .t{ padding-top: 20px;}
#main .box .list h1{ font-size: 20px; font-weight: normal;}
#main .box .list i{	display: block;	font-size: 14px; line-height: 34px;	color: #888; font-style: normal;}

.pro_pic_window{
	display: block;
	visibility: hidden;
	opacity: 0;
}
.pro_pic_window.open{
	visibility: visible;
	opacity: 1;
}
.pro_pic_window .content{
	width: 700px;
	height: 580px;
	padding: 40px 0px;
	overflow: hidden;
	margin-top: -290px;
	margin-left: -350px;
}
.pro_pic_window .content .con{
	position: relative;
}
.pro_pic_window .content img{
	width: 600px;
	display: block;
	margin: 0 auto;
}
.pro_pic_window .content .swiper-slide span{
	display: block;
	text-align: center;
}
.pro_pic_window .swiper-pagination{
	bottom: -30px;
}

@media screen and (max-width: 768px) {
	#banner{display: none;}
	
	#main .mainBox{background-color: #fff; padding: 0;}
	

	#main .detailCon{border-left: 1px solid #f1f1f1; margin-left:0; width: 100%; padding: 0px;float: none; overflow: hidden;}
	
	#main .pro-title{position: relative; border-bottom: 1px solid #f1f1f1; padding: 10px; margin-bottom: 0px;}	
	#main .pro-title h1{text-transform: uppercase; font-size: 22px; padding-bottom: 3px; color: #1E69F1;}
	#main .pro-title h4{text-transform: uppercase; font-size: 12px; color: #888; font-weight: normal; }
	#main .pro-title a{position: absolute; right: 0; top: 50%; height: 36px; margin-top: -18px; line-height: 36px; background: #1E69F1 url(../img/icon-05.png) no-repeat 11px 10px; background-size: 22px; padding-left: 38px; padding-right: 15px; display: inline-block; color: #fff; font-size: 14px; text-transform: uppercase;}
	#main .pro-title a:hover{background-color: #015CBA;}
	
	#main .prodetail p{ margin-bottom: 15px;}
	
	
/* 	#main .proinfo{overflow: hidden; margin-top: 0px; position: relative;  padding: 10px;}
	#main .proinfo .pic{float: none; width: 100%; border: 0; margin-bottom: 10px;}
	#main .proinfo .pic img{ width: 100%; display: block;}
	#main .proinfo .info{float: none; width: 100%;}
	#main .proinfo .info h1{font-size: 20px; padding-bottom: 5px; font-weight: normal;}
	#main .proinfo .info h4{font-size: 12px; height: auto; color: #888; padding-bottom: 10px; font-weight: normal; margin-bottom: 10px; border-bottom: 1px solid #f1f1f1;}
	#main .proinfo .info>div{color: #666; height: auto; line-height: 1.6em; font-size: 16px;}
	#main .proinfo .info a{position: absolute; bottom: 0px; left: 490px; height: 40px; background: #DB6B4D url(../img/icon-05.png) no-repeat 15px center; padding-left: 50px; padding-right: 20px; line-height: 40px; display: block; color: #fff; font-size: 15px; text-transform: uppercase;} */

	#main .pro-info{overflow: hidden; width: 100%; float: none; margin-top:0px; position: relative;}
	#main .pro-info .pic-box{ overflow: hidden; position: relative;transition: all 0.2s ease-in-out;}
	#main .pro-info .pic-box img{ width: 100%; display: block;transition: all 0.2s ease-in-out;}

	#main .prodetail{margin-top: 0px; border-top: 0; padding: 0 10px 20px; width: 100%; font-size: 14px; line-height: 1.6em;}
	#main .prodetail h2{font-size: 16px; color: #1E69F1; font-weight: bold; margin-top: 20px; margin-bottom:10px;}
	#main .prodetail img{display: block; max-width: 100%; margin: 5px 0;}

	#main .other .mainBox{ border-top: 10px solid #f5f5f5; padding: 10px;}
	#main .other h2{font-size: 18px; color: #1E69F1; font-weight: bold; margin-bottom:10px; margin: 10px 0;}
	#main .box{padding: 10px; line-height: 1.8em; display: flex; flex-wrap: wrap; justify-content: space-between; margin: 0 -15px; overflow: hidden; }
	#main .box .list{ display: block; width: 50%; position: relative; float: none;}
	#main .box .list .con{	display: block;	position: relative;	z-index: 0;	width: 95%; margin: 0 auto;}
	#main .box .list .pic{	position: relative;	transition: all 0.2s ease-in-out;}
	#main .box .list:hover .pic{transform:scale(1.1)}
	#main .box .list .pic img{	display: block;	width: 100%;}
	#main .box .list .pic div{	position: absolute;	width: 100%; height: 100%; top: 0; left: 0; background-color: rgba(0,0,0,.5); transition: all 0.2s ease-in-out;	opacity: 0;}
	#main .box .list:hover .pic div{ opacity: 1;}
	#main .box .list .pic span{	position: absolute;	width: 120px; height: 32px;	font-size: 12px; border-radius: 20px; text-align: center; background-color: #fff; color: #0052AE; line-height: 32px; left: 50%;	top: 50%; margin: -16px 0 0 -60px;}
	#main .box .list .t{ padding-top: 0px; margin-bottom: 10px;}
	#main .box .list h1{ font-size: 16px; font-weight: normal;}
	#main .box .list i{	display: block;	font-size: 12px; line-height: 1.4em;	color: #888; font-style: normal;}
	
	
	
	
}