@charset "utf-8";
/* CSS Document */

.festival-middle{overflow:hidden;padding-left:6%;padding-right:6%}
.festival-middle .f-m-sub{width:25%;float:left;padding-left:10px;padding-right:10px;padding-top:20px;padding-bottom:20px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;text-align:center;color:#333;cursor:pointer;position:relative;text-align:center;}  
.festival-middle .f-m-sub .p1{ font-size:14px; font-weight: normal; padding-top:10px;}

.festival-middle .f-m-sub img{width:100%;margin-bottom:20px;max-height:242px;}
.festival-middle .f-m-cont{overflow:hidden}

.festival-middle .f-m-sub div{position:relative;background-position:center center;-moz-background-size:cover;-o-background-size:cover;background-size:cover;background-repeat:no-repeat}
.festival-middle .f-m-sub:hover .fes-shadow{opacity:.5}
.festival-middle .f-m-sub:hover .fes-boder{opacity:1}
.festival-middle .f-m-sub:hover .p1{opacity:0}
.festival-middle .f-m-sub:hover .p2{opacity:0}
.festival-middle .f-m-sub div .fes-shadow{-webkit-transition:.3s;-o-transition:.3s;-moz-transition:.3s;transition:.3s;position:absolute;background-color:#000;width:100%;height:100%;opacity:0}
.festival-middle .f-m-sub div .fes-boder{-webkit-transition:.3s;-o-transition:.3s;-moz-transition:.3s;transition:.3s;opacity:0;width:90%;height:90%;position:absolute;left:0;right:0;bottom:0;top:0;margin:auto;background:0 0;border:4px solid #cf2d30}
.festival-middle .f-m-sub div .des{color:#fff;background:0 0;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);-moz-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);-o-transform:translate(-50%,-50%);transform:translate(-50%,-50%); text-align:center; }

.festival-middle .f-m-sub div .des h3{margin-bottom:15px; font-size:16px; line-height:35px; font-weight:normal;}
.festival-middle .f-m-sub div .des h4{margin-bottom:20px;font-weight:normal; border:1px solid #ccc; padding:5px; text-align:center; display:block; width:120px; height:26px; line-height:26px; margin:0 auto; font-size:14px;}
.festival-middle .f-m-sub div .des h4:hover{ background:#AE181A; color:#fff;border:1px solid #AE181A;}






@media (min-width: 1024px) and (max-width:1199px ) {

.festival-middle .f-m-sub .p1{ font-size:12px; }
.festival-middle .f-m-sub .p2{ font-size:12px; }
.festival-middle .f-m-sub div .des h3{ font-size:16px;}
.festival-middle .f-m-sub div .des h4{ font-size:13px;}
}



@media (min-width: 640px) and (max-width:1023px ) {

.festival-middle{padding-left:1%;padding-right:1%}
.festival-middle .f-m-sub .p1{ font-size:13px; font-weight: normal;}
.festival-middle .f-m-sub div .des h3{font-size:15px;}
.festival-middle .f-m-sub div .des h4{ width:90px;}
}