
/*product*/
.product > div.wrap{
	width:85%;
	justify-content: flex-start;-webkit-justify-content:flex-start;
}
.product > div.wrap > div:first-child{
	display: flex;display: -webkit-flex;width:15%;
	flex-direction: column;-webkit-flex-direction:column;
}
.product > div.wrap > div:first-child > h2{
	font-size:1.2rem;color:#1d69d0;font-weight: normal;
	margin:15px 0;text-align: center;
}

#micr-nav{
	list-style: none;padding:0;background-color:#e8f0fa;
	display: flex;display: -webkit-flex;margin:0;
	flex-direction: column;-webkit-flex-direction:column;
}
#micr-nav > li{
	display: flex;display: -webkit-flex;
	flex-direction: column;-webkit-flex-direction:column;
	cursor: pointer;-webkit-cursor:pointer;
}
#micr-nav > li > div:hover{
	background-color:#1d69d0;color:white;
}
#micr-nav > li > div{
	display: flex;display: -webkit-flex;color:#1d69d0;
	align-items: center;-webkit-align-items:center;
	margin:0;padding:0;color: #1d69d0;
	-webkit-transition: all .4s;
	-moz-transition: all .4s;
	-ms-transition: all .4s;
	-o-transition: all .4s;
	transition: all .4s;
}
#micr-nav > li > div > a{
	/*padding:15px 45px 15px 65px;*/
	padding:15px 0;padding-left:15px;
	width:100%;text-align: center;color:inherit;
	text-decoration: none;font-size:.8rem;/*padding-left: 20px;*/
}
#micr-nav > li > div > a::after{font-size:.6rem;}
#micr-nav > li{ border-bottom:1px solid #a2b2de; }

/*#micr-nav > li > div > span{ font-size:.6rem; }*/
.micr-nav-list{
	padding:0;list-style: none;
	display: flex;display: -webkit-flex;
	flex-direction: column;-webkit-flex-direction:column;
	justify-content: center;-webkit-align-items:center;
	display: none;
}
.micr-nav-list > li{ 
	padding:5px 0;color:#444;
	width:100%;text-align: center;
	-webkit-transition: all .4s;
	-moz-transition: all .4s;
	-ms-transition: all .4s;
	-o-transition: all .4s;
	transition: all .4s;
}

.micr-nav-list > li > a{ display:block;text-decoration: none;font-size:.7rem;color:inherit; }
/*.micr-nav-list > li.active{color:#1d69d0 !important;}*/
.micr-nav-list > li:hover{
	background-color:#77b6e2;color:white !important;
}
#micr-nav > li.active > div > a{padding-left:0 !important;}
#micr-nav > li.active > div{
	flex-direction: column;-webkit-flex-direction:column;
	justify-content: center;-webkit-justify-content:center;
	background-color:#1d69d0;color:white;
}
/*#micr-nav > li.active  > div > a{ padding:15px 60px 8px 60px; }*/
#micr-nav > li.active  > div > a::after{
	display: flex;display: -webkit-flex;
	justify-content: center;-webkit-justify-content:center;
	align-items: center;-webkit-align-items:center;
}
#micr-nav > li.active > .micr-nav-list{display: flex;display: -webkit-flex;}

.product > div.wrap > div:last-child{
	display: flex;display: -webkit-flex;margin-left:40px;
	flex-direction: column;-webkit-flex-direction:column;
	width:85%;
}
.product > div.wrap > div:last-child > div:first-child{
	display: flex;display: -webkit-flex;padding:17px 0;
	justify-content: flex-start;-webkit-justify-content:flex-start;
	align-items: center;-webkit-align-items:center;
	border-bottom:1px dotted #77b6e2;
}
.product > div.wrap > div:last-child > div:first-child > span.iconfont{
	font-size:.5rem;color:white;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	-ms-border-radius: 50%;
	-o-border-radius: 50%;
	border-radius: 50%;
	background-color:#2d7ce4;
	padding:2px 2.5px 2.5px 3.8px;
	/*width:16px;height: 16px;*/
	display: flex;display: -webkit-flex;
	justify-content: center;-webkit-justify-content:center;
	align-items: center;-webkit-align-items:center;
}
.product > div.wrap > div:last-child > div:first-child > h3{
	font-size:1rem;color:#1d69d0;
	margin:0 5px;
}
.line-Y{
	height: 25px;width:1px;background-color:#1d69d0;margin:0 5px;
}

/*product list*/
#pro-list{
	padding:0;list-style: none;border:1px solid #e7e7e7;
	display: flex;display: -webkit-flex;
	flex-wrap: wrap;-webkit-flex-wrap:wrap;
	justify-content: flex-start;-webkit-justify-content:flex-start;
	align-items: stretch;-webkit-align-items:stretch;
}
#pro-list > li{
	display: flex;display: -webkit-flex;width:30%;margin:30px 0;
	justify-content: center;-webkit-justify-content:center;
	border-right:1px solid #d1d1d1;padding:0 1.6%;
	-webkit-border-image:-webkit-linear-gradient( white,#d1d1d1,#d1d1d1,white) 1 1;
	-moz-border-image:-moz-linear-gradient( white,#d1d1d1,#d1d1d1,white) 1 1;
	-ms-border-image:-ms-linear-gradient( white,#d1d1d1,#d1d1d1,white) 1 1;
	-o-border-image:-o-linear-gradient( white,#d1d1d1,#d1d1d1,white) 1 1;
	border-image:linear-gradient( white,#d1d1d1,#d1d1d1,white) 1 1;
}
#pro-list > li:nth-child(3),#pro-list > li:nth-child(6),#pro-list > li:nth-child(9){ border:none; }
#pro-list > li > div:first-child{
	text-align: center;width:47%;
	display: flex;display: -webkit-flex;
	align-items: flex-end;-webkit-align-items:flex-end;
	justify-content: center;-webkit-justify-content:center;
}
#pro-list > li > div:first-child img{ display: block;border:1px solid #c9c9c9; }
#pro-list > li > div:last-child{
	width:45%;
	display: flex;display: -webkit-flex;
	flex-direction: column;-webkit-flex-direction:column;
	justify-content: space-between;-webkit-justify-content:space-between;
}
#pro-list > li > div:last-child > div{
	display: flex;display: -webkit-flex;width:100%;
	flex-direction: column;-webkit-flex-direction:column;
	align-items: flex-end;-webkit-align-items:flex-end;
	justify-content: flex-end;-webkit-justify-content:flex-end;
}
#pro-list > li h4{
	font-weight: normal;font-size:.8rem;color:#1d69d0;
	margin:0;
}
#pro-list > li h4 > a{ text-decoration: none;font-size:inherit;color:inherit; }
#pro-list > li h5{
	font-weight: normal;color:#444;font-size:.6rem;
	margin:0;text-align: right;padding:3px 0;width:90%;
}
#pro-list > li p{
	font-size:.75rem;color:#444;text-align: right;
}

#mobile-pointer{
	position: fixed;
	z-index: 9990;
	left:-25px;
	top:50%;
	width:50px;height: 50px;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	-ms-border-radius: 50%;
	-o-border-radius: 50%;
	border-radius: 50%;
	background-color:rgb(31,103,209);
	-webkit-box-shadow: 0 0 10px rgb(60,60,60);
	-moz-box-shadow: 0 0 10px rgb(60,60,60);
	-ms-box-shadow: 0 0 10px rgb(60,60,60);
	-o-box-shadow: 0 0 10px rgb(60,60,60);
	box-shadow: 0 0 10px rgb(60,60,60);
	font-size:1rem;color:white;
	cursor: pointer;-webkit-cursor:pointer;
	display: none;
}


@media screen and (min-width: 300px) and (max-width: 767px){
	.slick-slide a{
		background-position: 75% !important;
		height: 180px;
	}
	.product > div.wrap > div:last-child > div:first-child > span.iconfont{
		padding:2px 2.6px 1.9px 3.5px;
	}
	.placeholder{display: none;}
	.product > div.wrap{ width:100%; }
	.product > div.wrap > div:first-child{
		position: fixed;z-index: 999;
		left:-180px;top:60px;bottom:0;
		width:150px;height: 100%;
		background-color:rgba(20,20,20,.8);
		-webkit-box-shadow: 0 0 10px rgb(20,20,20);
		-moz-box-shadow: 0 0 10px rgb(20,20,20);
		-ms-box-shadow: 0 0 10px rgb(20,20,20);
		-o-box-shadow: 0 0 10px rgb(20,20,20);
		box-shadow: 0 0 10px rgb(20,20,20);
	}
	.product > div.wrap > div:first-child > h2{ 
		color:white;
		-webkit-text-shadow: 0 0 1px white;	
		-moz-text-shadow: 0 0 1px white;
		-ms-text-shadow: 0 0 1px white;
		-o-text-shadow: 0 0 1px white;
		text-shadow: 0 0 1px white;
	}
	#micr-nav > li.active > div{ background-color: #1f67d1;color:white; }
	#micr-nav{ background-color: transparent; }
	#micr-nav > li > div{ color:white; }
	.product > div.wrap > div:last-child{ width:90%;margin: 0 auto; }
	.product > div.wrap > div:last-child > div:first-child{ padding:15px 0; }
	.product > div.wrap > div:last-child > div:first-child > h3{ font-size:.7rem; }
	#mobile-pointer{display: block;}
	#mobile-pointer::after{
		margin:0;height: 100%;padding-right: 3px;
		display: flex;display: -webkit-flex;
		justify-content: center;-webkit-justify-content:center;
		align-items: center;-webkit-align-items:center;
	}
	.micr-nav-list > li{ color:#f1f1f1; }
	.micr-nav-list > li.active{ color:white; }
	.micr-nav-list > li.active:hover{ color:white ; }
	#pro-list > li,#pro-list > li:nth-child(3),#pro-list > li:nth-child(6) { 
		width:90%;border-right:none;
		border-bottom:none !important; padding:30px 0;margin:0 auto;
		border-image: none;
	}
	#micr-nav > li{ border-bottom:1px solid rgba(255,255,255,.3); }
	#pro-list > li > div:last-child{ width: 50%; }
	#pro-list > li > div:last-child > div{
		align-items: flex-end;-webkit-align-items:flex-end;
	}
	#pro-list > li p { margin:8px 0;font-size: .65rem; }
}

@media screen and (min-width: 768px) and (max-width: 1023px){
	#mobile-pointer{display: none !important;}
	.product > div.wrap > div:first-child{ width:20%; }
	.product > div.wrap > div:last-child{ width: 80%;margin-left:20px; }
	#pro-list > li{ 
		width:46%;border-right: 1px solid #d1d1d1 !important; 
		-webkit-border-image: -webkit-linear-gradient( white,#d1d1d1,#d1d1d1,white) 1 1;
		-moz-border-image: -moz-linear-gradient( white,#d1d1d1,#d1d1d1,white) 1 1;
		-ms-border-image: -ms-linear-gradient( white,#d1d1d1,#d1d1d1,white) 1 1;
		-o-border-image: -o-linear-gradient( white,#d1d1d1,#d1d1d1,white) 1 1;
		border-image: linear-gradient( white,#d1d1d1,#d1d1d1,white) 1 1;
	}
	#pro-list > li:nth-child(2),#pro-list > li:nth-child(4),#pro-list > li:nth-child(6),#pro-list > li:nth-child(8),#pro-list > li:nth-child(9){ border:none !important; }
	#pro-list > li h4{ font-size: .8rem; }
	#pro-list > li h5{ font-size:.5rem; }
	#pro-list > li p{ font-size:.65rem; }
	#micr-nav > li > div > a{ font-size: .7rem; }
}

@media screen and (min-width: 1200px) and (max-width: 1550px){
	#pro-list > li > div:last-child{ width:50%; }
	#pro-list > li > div:first-child{ width:50%; }
	#pro-list > li p{ font-size:.65rem;margin:8px 0; }
	#pro-list > li h4{ font-size:.8rem; }
}