@charset "utf-8";
/* CSS Document */
.xm1 { margin:0 auto; text-align:center; padding:5%;}
.xm1 h2{ color:#DD2C58; font-size:30px; padding-bottom:20px; letter-spacing:6px;}
.xm1 p{ color:#333; line-height:30px; font-size:16px;}
.xm2 { overflow:auto; margin:0 auto; width:80%;}
.xm2 h2{ font-weight:normal; font-size:22px;}
.xm2 ul{}
.xm2 li{ float:left; width:31.2%; margin:1%;}
.xm2 img{ width:100%;}
.xm2 p{ line-height:30px;}
@media only screen and (max-width:768px){
.xm2 { overflow:auto; margin:0 auto; width:90%;}
.xm2 li{ width:100%;}
.xm2 p{ line-height:30px;}
}

.product-grid .product-image{
	overflow: hidden;
	position: relative;
	display:block;
}
.product-grid .product-image:before{
	content: "";
	background: rgba(0,0,0,0.02);
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	z-index: 1;
}
.product-grid .product-image img{
	width: 100%;
	height: 100%;
}
.product-grid .pic-1{
	opacity: 1;
	transform: rotateY(0);
	transition: all 0.5s ease-out 0s;
}
.product-grid:hover .pic-1{
	opacity: 0;
	transform: rotateY(-90deg);
}
.product-grid .pic-2{
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
	transform: rotateY(-90deg);
	transition: all 0.5s ease-out 0s;
}
.product-grid:hover .pic-2{
	opacity: 1;
	transform: rotateY(0deg);
}


.xp1 { background:#01B0A9; margin:0 auto; text-align:center; overflow:auto; padding:30px 0;}
.xp1 h1 { font-size:20px; color:#FFF;}
.xp1 span { float:right; margin-right:5%; line-height:40px;}
.xp1 span a{ color:#FFF; font-size:15px;}
.xp1 span img{ vertical-align:middle; margin-left:10px;}
.xp2 { overflow:auto; padding:30px 1%;}
.xp2left { float:left; width:30%;}
.xp2left div{}
.xp2left div img{ width:100%;}
.xp2right { float:left; width:69%; margin-left:1%;}
.img_div {
    position: relative;
    width: 100%;
    height:100%;
}
.mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    color: #ffffff;
    opacity: 0;
}
.img_div a{cursor: pointer;}
.img_div a:hover .mask {opacity: 1;}

@media screen and (max-width:768px) {
	.xp2 {display:flex;flex-direction: column-reverse;}
	.xp2left {width:100%; margin-top:20px;}
	.xp2right {width:100%;margin-left:0;}
}
.xp3 { margin:0 auto; text-align:center; padding:0 10%; overflow:auto;}
@media screen and (max-width:768px) {
.xp3 { margin:0 auto; text-align:center; padding:0 2%; overflow:auto;}
.xp3 img{ width:100%;}
}
.xp4 { padding:2% 0;}

.lanrenzhijia{padding:0 10%; min-height:400px; margin:0 auto;}
.lanrenzhijia .tab{ width:100%; display:table; margin:0 auto; text-align:center;}
.lanrenzhijia .tab a{padding:14px 50px; color:#333; border:1px #CCCCCC solid; margin:0 1%;}
.lanrenzhijia .tab a:hover{ background:#E64E3F; color:#fff;}
.lanrenzhijia .tab a.on{ background:#1E218A; color:#fff;}
.lanrenzhijia .content{ overflow:hidden; padding:50px 0;}
.lanrenzhijia .content li{ display:none;}
@media screen and (max-width:768px) {
.lanrenzhijia{padding:5% 2%; margin:0 auto;}
.lanrenzhijia .tab{ width:100%; display:table; margin:0 auto; text-align:center;}
.lanrenzhijia .tab a{padding:8px 2%; color:#333; border:1px #CCCCCC solid; margin:0 1%;}
.lanrenzhijia .content img{ width:100%;}

}

.xp5 { margin:0 10%; overflow:auto; border:1px #CCCCCC solid; border-left:none; border-right:none; padding:40px 0;}
.xp5a { float:left; font-size:16px;}
.xp5b { float:left;}
.xp5b a{ background:url(pdf.png) no-repeat left; padding-left:20px; margin:0 60px;}
.xp5b a:hover{ text-decoration:underline;}
@media screen and (max-width:768px) {
.xp5 { margin:0 10%; overflow:auto; border:1px #CCCCCC solid; border-left:none; border-right:none; padding:20px 0;}
.xp5a { font-size:16px;}
.xp5b { margin-top:10px; text-align:left;}
.xp5b a{ width:100%; float:left; line-height:35px; background:url(pdf.png) no-repeat left; padding-left:20px;}
}

.xp6 {margin:0 auto; text-align:center; padding:0 10%; overflow:auto;}
.xp6 iframe{min-height:450px;}
.xp6a {padding:40px 0; font-size:15px;}
@media screen and (max-width:768px) {
.xp6 {margin:0 auto; text-align:center; padding:0 2%; overflow:auto;}
.xp6 iframe{min-height:200px;}
.xp6a {padding:20px 0; font-size:15px;}
}



