@charset "utf-8";

.card-area{margin:20px auto 0;height:680px;width:100%;position:relative;}
.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:100%;height:70px;background-color:transparent;}
.card-area .card-item .card{transition:all .3s cubic-bezier(.4,0,.2,1),z-index 0s .12s;width:100%;height:100%;background:#fff}
.card-area .card-item .card .card-content{width:100%;}
.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)); display:none;}
.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.content-second li{float:left;width:50%}
.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{transition:all .3s cubic-bezier(.4,0,.2,1),z-index 0s .12s;height:70px;line-height:70px;font-size:14px;top:0;background-repeat:no-repeat; background-position:center; background-size:cover; border-bottom:#fff 1px solid;}
.card-area .card-item .ssaa1 .card-title { background-image:url(../images/flt01.jpg);}
.card-area .card-item .ssaa2 .card-title { background-image:url(../images/flt02.jpg);}
.card-area .card-item .ssaa3 .card-title { background-image:url(../images/flt03.jpg);}
.card-area .card-item .ssaa4 .card-title { background-image:url(../images/flt04.jpg);}
.card-area .card-item .ssaa5 .card-title { background-image:url(../images/flt05.jpg);}
.card-area .card-item .ssaa6 .card-title { background-image:url(../images/flt06.jpg);}
.card-area .card-item .card .card-title .content{position:absolute;top:0;width:100%; z-index:99; opacity:0.9;}
.card-area .card-item .card .card-title .content img { height:40px; margin:15px;}
.card-area .card-item .card .card-title .content img.ss1 { display:inline-block;}.card-area .card-item .card .card-title .content img.ss2 { display:none;}
.card-area .card-item .card .card-title h1{ display:inline-block;font-size:18px;font-weight:700;color:#fff; overflow:hidden;white-space: nowrap;text-overflow: ellipsis;}
.card-area .card-item .card .card-title h1 span { font-size:14px; display:none;}

.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 .bg { width:100%; height:335px; position:absolute; left:0; top:0; z-index:9; background:rgba(0,0,0,.5);}
.card-area .card-item .card .card-title .zq-product-img img{position:absolute;left:0;width:100%; z-index:1;}
.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}
.card-area .card-item .card .card-content{position:absolute;top:0}
.card-area .card-item .card .card-content.content-first .content-first-list{ display:none;width:100%;max-width:250px;font-size:16px;color:#373d41;margin-top:20px;margin-bottom:47px}
.card-area .card-item .card .card-content.content-first .content-first-list li{ font-size:14px; padding:0 10px; line-height:30px;overflow:hidden;white-space: nowrap;text-overflow: ellipsis; text-align:left;}
.card-area .card-item .card .card-content.content-second{width:100%;left:5px;top:100px;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 .card .card-content .other-info{width:100%;overflow:hidden;line-height:20px;font-size:12px}
.card-area .card-item .card .card-content .other-info .other-info-list{width:90%;margin:5px 12px;position:relative}
.card-area .card-item .card .card-content .other-info .other-info-list .tttt { color:#333; font-size:16px; line-height:20px;}
.card-area .card-item .card .card-content .other-info .other-info-list .tttt .abaa {min-height: 80px;font-size: 16px;color: #8a8a8a;line-height: 20px;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 4;
overflow: hidden;}
.card-area .card-item .card .card-content .other-info .other-info-list .tttt span { width:150px; display:inline-block; padding-right:10px;}
.card-area .card-item .card .card-content .other-info .other-info-list .tttt a.mmmm { display:inline-block; font-size:14px; margin-top:5px; padding:0 25px; border:#ccc 1px solid; text-decoration:none; border-radius:35px;}
.card-area .card-item .card .card-content .other-info .other-info-list .tttt a.mmmm:hover { background:#cb252b;border:#cb252b 1px solid; color:#fff; transition:all 500ms; margin-left:15px;}
.card-area .card-item .card .card-content .other-info .other-info-list .pimg { width:100%; height:100px; overflow:hidden;}
.card-area .card-item .card .card-content .other-info .other-info-list img { max-width:100%; height:100px; display:block; margin-top:5px;}
.card-area .card-item .card .card-content .other-info a { text-decoration:none;}
.card-area .card-item .card .card-content .other-info a:hover .other-head { padding-left:10px;color:#fff;background:#3db1ea}
.card-area .card-item .card .card-content .other-info .other-desc{margin-top:2px;font-size:12px;color:#999}
.card-area .card-item.active{z-index:6;box-shadow:0 0 30px rgba(0,0,0,.2);width:100%;height:335px}
.card-area .card-item.active .card .card-title{background:#fff;height:145px;top:0;border:none; line-height:26px;}
.card-area .card-item.active .card .card-title .short-info{color:#9ed8f5}
.card-area .card-item.active .card .card-title h1,.card-area .card-item.active .card .card-title h1 a{color:#cb252b}
.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))}
.card-area .card-item.active .card .card-title .content{bottom:20px; text-align:center;}
.card-area .card-item.active .card .card-title .content img { height:50px; display:inline-block; margin:0; margin-top:20px;}
.card-area .card-item.active .card .card-title .content h1 { display:block; text-align:center;}
.card-area .card-item.active .card .card-title .content img.ss1 { display:none;}.card-area .card-item.active .card .card-title .content img.ss2 { display:inline-block;}
.card-area .card-item.active .card .card-title .zq-product-img { display:none;}
.card-area .card-item.active .card .card-title .bg { display:none;}

@media screen and (max-width: 1024px) and (min-width: 0px){
.card-area .card-item.active .card .card-title h1 { width:100%;}
}