@charset "utf-8";
*{margin:0;padding:0;list-style-type:none;}
.card-area .card-item .card .card-title a,img{border:0;text-decoration:none;}

.clearfix:after{content:".";display:block;height:0;visibility:hidden}
.clearfix{display:inline-block}
* html .clearfix{height:1%}
.clearfix{display:block}
.clearfix:after,.fix:after{content:".";display:block;height:0;clear:both;visibility:hidden}
.clearfix{zoom:1}

.mr20{margin-right:20px}


.card-area{margin:54px auto 0;height:250px;width:1200px;position:relative;}
.card-area .bg-e8e8e8{background:#ffffff;}
.card-area .bg-e1e1e1{background:#e1e1e1}
.card-area .card-item{z-index:4;transition:all .3s cubic-bezier(.4,0,.2,1),z-index 0s .12s;position:relative;float:left;width:50%;height:250px;background-color:transparent}
.card-area .card-item+.card-item{margin-left:-1px}
.card-area .card-item .card{transition:all .3s cubic-bezier(.4,0,.2,1),z-index 0s .12s;width:100%;height:100%;text-align:center;background:#fff;border: 1px solid #ccc;}
.card-area .card-item .card .card-content{width:100%;line-height:2}
.card-area .card-item .card .card-content.content-first{transition:all .12s cubic-bezier(.4,0,.2,1) .18s;z-index:3;opacity:1;filter:alpha(opacity=100);-ms-filter:progid:DXImageTransform.Microsoft.Alpha(opacity=(100))}
.card-area .card-item .card .card-content.content-second{transition:all .12s cubic-bezier(.4,0,.2,1) 0s;z-index:2;opacity:0;filter:alpha(opacity=0);-ms-filter:progid:DXImageTransform.Microsoft.Alpha(opacity=(0));line-height:2}
.card-area .card-item .card .card-content,.card-area .card-item .card .card-title{position:absolute;left:0;right:0;z-index:1}
.card-area .card-item .card .card-title{padding-top:1px;transition:all .3s cubic-bezier(.4,0,.2,1),z-index 0s .12s;height:65px;line-height:26px;font-size:14px;top:0;}
.card-area .card-item .card .card-title .content{position:absolute;bottom:-2px;width:100%; height:65px;}
.card-area .card-item .card .card-title h1{font-size:22px;color:#d9efff;margin-bottom:0;}
.card-area .card-item .card .card-title .short-info{color:#8dbbdc;font-size:14px;margin-top:0;margin-bottom:20px}
.card-area .card-item .card .card-title .zq-product-img{width:40px;height:40px;margin:10px auto;position:relative}
.card-area .card-item .card .card-title .zq-product-img img{position:absolute;left:0;width:100%}
.card-area .card-item .card .card-title .zq-product-img .un-hover{z-index:1;opacity:1;filter:alpha(opacity=100);-ms-filter:progid:DXImageTransform.Microsoft.Alpha(opacity=(100))}
.card-area .card-item .card .card-title .zq-product-img .with-hover{z-index:2;opacity:0;filter:alpha(opacity=0);-ms-filter:progid:DXImageTransform.Microsoft.Alpha(opacity=(0))}
.card-area .card-item .card .card-title .short-info,.card-area .card-item .card .card-title .zq-product-img img,.card-area .card-item .card .card-title h1{
	transition:all .15s cubic-bezier(.4,0,.2,1) 0s;
	height:65px;
	
	color:#000;
}
.card-area .card-item .card .main-info ul{}
.card-area .card-item .card .main-info ul li{width:100%;height:125px;border-bottom:1px solid #cecece;}
.card-area .card-item .card .main-info ul li:last-child{border-bottom:0;}
.card-area .card-item .card .main-info ul li .left{width:50%;height:100%;float:left;padding-left:25px;}
.card-area .card-item .card .main-info ul li .left p.tit{color:#000; margin-top:25px;}
.card-area .card-item .card .main-info ul li .right{width:30%;height:100%;float:right;}
.card-area .card-item .card .main-info ul li .right button{padding:5px 15px; background:none; border:1px solid #000;color:#000;margin-top:30px;}
.card-area .card-item .card .card-content{height:200px;position:absolute;top:50px}
.card-area .card-item .card .card-content.content-first .content-first-list{width:100%;max-width:250px;font-size:16px;color:#373d41;margin-top:47px;margin-bottom:47px}
.card-area .card-item .card .card-content.content-first .content-first-list li{margin-bottom:30px}
.card-area .card-item .card .card-content.content-second{font-size:14px;color:#a9b0b4;text-align:left;}
.card-area .card-item .card .card-content.content-second .main-head{color:#3db1ea;font-size:18px;line-height:28px;margin-bottom:10px}
.card-area .card-item .card .card-content.content-second p{margin:5px 0}
.card-area .card-item .card .card-content.content-second .main-tip{color:#232933}
.card-area .card-item .card .card-content.content-second .main-desc{color:#8c8c8c;font-size:12px;line-height:22px}
.card-area .card-item .card .card-content.content-second .main-btn{cursor:pointer;width:160px;height:38px;font-size:16px!important;color:#fff;margin-top:22px;margin-bottom:33px;border-radius:19px;background:#3db1ea;border:none;transition:color .3s ease-in-out,background .3s ease-in-out}
.card-area .card-item .card .card-content.content-second .main-btn:hover{color:#fff;background:#1b77b9}
.card-area .card-item .card .card-content.content-second .main-white-btn{cursor:pointer;width:160px;height:36px;border:1px solid #3db1ea;font-size:16px!important;color:#3db1ea;margin-top:22px;margin-bottom:33px;border-radius:19px;background:#fff;transition:color .3s ease-in-out,background .3s ease-in-out}
.card-area .card-item .card .card-content.content-second .main-white-btn:hover{color:#fff;background:#3db1ea}
.card-area .card-item.active{z-index:6;box-shadow:0 0 30px rgba(0,0,0,.2);width:50%;height:250px}
.card-area .card-item.active .card .card-title{background-color:#d70505;height:65px;top:-15px;border:none;}
.card-area .card-item.active .card .card-title .content{border-bottom:0;}
.card-area .card-item.active .card .card-title .short-info{color:#9ed8f5}
.card-area .card-item.active .card .card-title h1{color:#fff; height:100%; }
.card-area .card-item.active .card .card-content.content-first{transition:all .12s cubic-bezier(.4,0,.2,1) 0s;z-index:2;opacity:0;filter:alpha(opacity=0);-ms-filter:progid:DXImageTransform.Microsoft.Alpha(opacity=(0))}
.card-area .card-item.active .card .card-content.content-second{transition:all .12s cubic-bezier(.4,0,.2,1) .18s;z-index:3;opacity:1;filter:alpha(opacity=100);-ms-filter:progid:DXImageTransform.Microsoft.Alpha(opacity=(100))}


/* pop-up
========================================== */


 .dots .dot {
	position: absolute;
	border-radius: 100%;
	
}

 .dots .dot:nth-of-type(1) {
	top: 10px;
	right: 30px;
	width: 20px;
	height: 20px;
	background-color: #689bf6;
	-webkit-animation: float 6s ease-in-out infinite;
	-moz-animation: float 6s ease-in-out infinite;
	-o-animation: float 6s ease-in-out infinite;
	animation: float 6s ease-in-out infinite;
}

@media (min-width: 768px) {
	 .dots .dot:nth-of-type(1) {
		top: -40px;
		right: 20px;
		width: 60px;
		height: 60px;
	}
}

 .dots .dot:nth-of-type(2) {
	bottom: 10px;
	left: 10px;
	width: 40px;
	height: 40px;
	background-color: #f66867;
	-webkit-animation: float 8s ease-in-out infinite;
	-moz-animation: float 8s ease-in-out infinite;
	-o-animation: float 8s ease-in-out infinite;
	animation: float 8s ease-in-out infinite;
}

 .dots .dot:nth-of-type(3) {
	bottom: 10px;
	right: 30px;
	width: 20px;
	height: 20px;
	background-color: #ffd84c;
	-webkit-animation: float 4s ease-in-out infinite;
	-moz-animation: float 4s ease-in-out infinite;
	-o-animation: float 4s ease-in-out infinite;
	animation: float 4s ease-in-out infinite;
}
 .dots .dot:nth-of-type(4) {
	bottom: 200px;
		right: 70px;
		width: 28px;
		height: 28px;
		background-color: #5ab9dd;
 	-webkit-animation: float 4s ease-in-out infinite;
 	-moz-animation: float 4s ease-in-out infinite;
 	-o-animation: float 4s ease-in-out infinite;
 	animation: float 4s ease-in-out infinite;
 }
 .dots .dot:nth-of-type(5) {
	bottom: 190px;
		right: 540px;
		width: 50px;
		height: 50px;
		background-color: #c21697;
 	-webkit-animation: float 4s ease-in-out infinite;
 	-moz-animation: float 4s ease-in-out infinite;
 	-o-animation: float 4s ease-in-out infinite;
 	animation: float 4s ease-in-out infinite;
 }
 
  .dots2 .dot {
  	position: absolute;
  	border-radius: 100%;

  }

  .dots2 .dot:nth-of-type(1) {
  	top: 10px;
  	right: 30px;
  	width: 20px;
  	height: 20px;
  	background-color: #f6a468;
  	-webkit-animation: float 6s ease-in-out infinite;
  	-moz-animation: float 6s ease-in-out infinite;
  	-o-animation: float 6s ease-in-out infinite;
  	animation: float 6s ease-in-out infinite;
  }

  @media (min-width: 768px) {
  	.dots2 .dot:nth-of-type(1) {
  		top: 30px;
  		right: 20px;
  		width: 60px;
  		height: 60px;
  	}
  }

  .dots2 .dot:nth-of-type(2) {
	bottom: 5px;
		left: 20px;
		width: 70px;
		height: 70px;
  	background-color: #05b623;
  	-webkit-animation: float 8s ease-in-out infinite;
  	-moz-animation: float 8s ease-in-out infinite;
  	-o-animation: float 8s ease-in-out infinite;
  	animation: float 8s ease-in-out infinite;
  }

  .dots2 .dot:nth-of-type(3) {
  	bottom: 10px;
  	right: 30px;
  	width: 40px;
  	height: 40px;
  	background-color: #4b07dc;
  	-webkit-animation: float 4s ease-in-out infinite;
  	-moz-animation: float 4s ease-in-out infinite;
  	-o-animation: float 4s ease-in-out infinite;
  	animation: float 4s ease-in-out infinite;
  }

  .dots2 .dot:nth-of-type(4) {
	bottom: 10px;
		right: 500px;
		width: 40px;
		height: 40px;
		background-color: #fff;
  	-webkit-animation: float 4s ease-in-out infinite;
  	-moz-animation: float 4s ease-in-out infinite;
  	-o-animation: float 4s ease-in-out infinite;
  	animation: float 4s ease-in-out infinite;
  }

  .dots2 .dot:nth-of-type(5) {
	bottom: 190px;
		right: 520px;
		width: 35px;
		height: 35px;
		background-color: #0e5bbd;
  	-webkit-animation: float 4s ease-in-out infinite;
  	-moz-animation: float 4s ease-in-out infinite;
  	-o-animation: float 4s ease-in-out infinite;
  	animation: float 4s ease-in-out infinite;
  }
  .dots2 .dot:nth-of-type(6) {
	bottom: 190px;
		right: 490px;
		width: 52px;
		height: 52px;
		background-color: #a4b902;
  	-webkit-animation: float 4s ease-in-out infinite;
  	-moz-animation: float 4s ease-in-out infinite;
  	-o-animation: float 4s ease-in-out infinite;
  	animation: float 4s ease-in-out infinite;
  }