@charset "utf-8";

.zq-icon{display:inline-block;background:url(../Images/icon.png) no-repeat;}
.icon40x40{width:40px;height:40px}
.crad-area-icon1{background-position:0 0}
.crad-area-icon2{background-position:-40px 0}
.crad-area-icon3{background-position:-80px 0}
.crad-area-icon4{background-position:-120px 0}

.card-area{margin:30px auto 0;height:680px;width:1300px;position:relative;}
.card-area .bg-e8e8e8{background:#e8e8e8}
.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:12.8%;height:651px;background-color:transparent; 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}
.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)); 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{padding-top:1px;transition:all .3s cubic-bezier(.4,0,.2,1),z-index 0s .12s;height:620px;line-height:26px;font-size:14px;top:0;background:#1b77b9;border-left:0px solid #3285c0; background-repeat:no-repeat; background-position:left center; background-size:cover;}
.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:40%;width:100%; z-index:99; opacity:0.9;}
.card-area .card-item.active .card .card-title .content { top:30%;}
.card-area .card-item .card .card-title .content img { height:50px; margin-bottom:10px;}
.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{font-size:22px;font-weight:700;margin-bottom:0;color:#fff;}
.card-area .card-item .card .card-title h1 span { font-family:Arial; font-size:14px; display:block; line-height:20px; font-weight:400; padding-top:6px;}
.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:620px; 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{height:476px;position:absolute;top:145px}
.card-area .card-item .card .card-content.content-first .content-first-list{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:90%;left:25px;font-size:14px;color:#a9b0b4;text-align:left;padding-top:26px}
.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:105%;overflow:hidden;line-height:22px;font-size:12px}
.card-area .card-item .card .card-content .other-info .other-info-list{width:90%;margin:10px 12px;position:relative}
.card-area .card-item .card .card-content .other-info .other-info-list .tttt { color:#333; font-size:14px; padding-top:40px; line-height:24px;}
.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:20px; 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 img { max-height:180px; width:auto !important; width:100%; display:block; margin-top:10px;}
.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:166px; overflow:hidden;}
.card-area .card-item .card .card-content .other-info .other-info-list img { width:100%; height:166px;}
.card-area .card-item .card .card-content .other-info .other-info-list .c-a-arrow{position:absolute;right:10px;top:15px;background-position:-200px 0}
.card-area .card-item .card .card-content .other-info .other-info-list:hover{}.card-area .card-item .card .card-content .other-info .other-info-list:hover .c-a-arrow{background-position:-200px -17px}
.card-area .card-item .card .card-content .other-info .other-info-list:hover .other-desc,.card-area .card-item .card .card-content .other-info .other-info-list:hover .other-head{color:#fff}
.card-area .card-item .card .card-content .other-info .other-info-list .list-context{color:#00c1de}
.card-area .card-item .card .card-content .other-info .other-head{font-size:14px;font-weight:400;color:#000;margin:6px 0 0 0;overflow:hidden;white-space: nowrap;text-overflow: ellipsis;}
.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:#cb252b}
.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:35%;height:635px}
.card-area .card-item.active .card .card-title{background:#fff;height:259px;top:-15px;border:none; }
.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;}
.card-area .card-item.active .card .card-title .content img { height:80px;}
.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){
}