@charset "utf-8";

.card-area{height:230px;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:20%;height:230px;background-color:transparent}
.card-area .card-item+.card-item{margin-left:-1px; cursor:pointer;}
.card-area .card-item .card{transition:all .3s cubic-bezier(.4,0,.2,1),z-index 0s .12s;width:100%;height:100%;}
.card-item1{background:url(../images/bg03.png) repeat;}
.card-item2{background:url(../images/bg04.png) repeat;}
.card-item3{background:url(../images/bg02.png) repeat;}
.card-item4{background:url(../images/bg05.jpg) repeat;}
.card-item5{background:url(../images/bg01.png) repeat;}
.mask_b{position:absolute;overflow:hidden;width:100%;height:100%;left:0;top:0;background:rgba(0,0,0,.3);_background:#B2B2B2;}
.mask_b-wz{ width:80%; padding:14% 10%; color:#fff; text-align:center;}
.mask_b-wz h3{ padding:5px 0;}
.mask_b-wz h5{ font-size:20px; font-weight:bold;}
.mask_b-wz p{ font-size:14px; line-height:24px;}
.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))}
.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-content.content-second{width:90%;text-align:left; margin-top:-40px;}
.card-area .card-item.active{z-index:6;width:15%;height:230px}
.card-area .card-item.active .card.card-item1 .card-title{ background:url(../images/bg03.png) repeat; height:70px;top:-40px;border:none;}
.card-area .card-item.active .card.card-item2 .card-title{ background:url(../images/bg04.png) repeat; height:70px;top:-40px;border:none;}
.card-area .card-item.active .card.card-item3 .card-title{ background:url(../images/bg02.png) repeat; height:70px;top:-40px;border:none;}
.card-area .card-item.active .card.card-item4 .card-title{ background:url(../images/bg05.jpg) repeat; height:70px;top:-40px;border:none;}
.card-area .card-item.active .card.card-item5 .card-title{ background:url(../images/bg01.png) repeat; height:70px;top:-40px;border:none;}

.card-area .card-item.active .card .card-title .content{border-bottom:0;}
.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))}