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

html, body, #wrap{height:auto!important;}

#group{padding-top:60px;}

.blo1,.blo2,.blo3,.blo4,.blo5,.blo6{position:relative;/*width:20%;*/width:16.6666666667%;height:280px;float:left;margin-top:30px;margin-bottom:60px;}

#group figcaption{
    position: absolute;
    text-align: center;
    bottom: 0;
    margin: auto;
	left:0;
	bottom:-60px;
	z-index: 2;
    width: 100%;
    height: 90px;
    overflow: hidden;
    -moz-transition: all 0.2s ease-in-out 0s;
    -o-transition: all 0.2s ease-in-out 0s;
    -webkit-transition: all 0.2s ease-in-out;
    -webkit-transition-delay: 0s;padding:0 12px;box-sizing:border-box;
}

#group figure img{width:100%;height:auto;}

#group figcaption p{color:#fff;}

#group figcaption h3{font-size:30px;color:#fff;    margin-bottom: 40px;}

#group figure:hover figcaption{
height: 60%;text-align:center;
		}

#group figcaption div{padding:20px 0;
    padding-bottom: 40px;}

#group .blo6:hover figcaption{background:#b31c2c;}
#group .blo2:hover figcaption{background:#008cbb}
#group .blo3:hover figcaption{background:#e7346e}
#group .blo4:hover figcaption{background:#004ea2}
#group .blo5:hover figcaption{background:#f08300}
#group .blo1:hover figcaption{background:#e60013;}

#group h4{font-size:16px;}
#group span{font-size:12px;line-height: 18px;
    display: block;}

	a  figcaption{color:#fff;}
.blo6 figcaption{background:#b31c2c;}
.blo2 figcaption{background:#008cbb}
.blo3 figcaption{background:#e7346e}
.blo4 figcaption{background:#004ea2}
.blo5 figcaption{background:#f08300}
.blo1 figcaption{background:#e60013;}

.blo1{background:url(../img/group1_2022.jpg) no-repeat 100% 50%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-position:60%;}
.blo2{background:url(../img/group2_2022.jpg) no-repeat 50% 50%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;}
.blo3{background:url(../img/group3_2022.jpg) no-repeat 50% 50%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-position: 50% 20%;}
.blo4{background:url(../img/group4.jpg) no-repeat 100% 50%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;}
.blo5{background:url(../img/group5_2022.jpg) no-repeat 50% 50%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-position: 40%;}
.blo6{background:url(../img/group6.jpg) no-repeat 50% 0%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;}


@media (min-width: 1400px) {
#group figure:hover figcaption{height: 60%;}
#group figcaption{height:90px;}
}


@media (max-width: 1350px) {
#group figure:hover figcaption{height: 70%;}
#group figcaption{height:100px;}
}

/*
@media (max-width: 1100px) {

#group figure:hover figcaption{height: 80%;}
#group figcaption{height:100px;}


}*/

@media (max-width: 1300px) {

.blo1,.blo2,.blo3,.blo4,.blo5,.blo6{position:relative;/*width:20%;*/width:33.3333333333%;height:280px;float:left;margin-top:16px;margin-bottom:80px;}

#group figure:hover figcaption{height: 60%;}
#group figcaption{height:80px;bottom: -80px;}
}

	@media (max-width: 750px) {
		
.blo1, .blo2, .blo3, .blo4, .blo5, .blo6{height:200px;margin-bottom:80px; width: 50%;}   

	#group figure:hover figcaption{	    height: 70%;}
		
	}
	
	@media (max-width: 700px) {
		
.blo1, .blo2, .blo3, .blo4, .blo5, .blo6{height:200px;margin-bottom:100px;}
	#group figure:hover figcaption{	    height: 80%;}
		#group figcaption {
    height: 100px;
    bottom: -100px;
}
		
		
	}

@media (max-width: 500px) {

.blo1,.blo2,.blo3,.blo4,.blo5,.blo6{position:relative;/*width:20%;*/width:100%;height:280px;float:left;margin-top:30px;margin-bottom:60px;}

#group figure:hover figcaption{height: 80%;}
#group figcaption{height:80px;bottom: -80px;}
	

	
.blo1, .blo2, .blo3, .blo4, .blo5, .blo6 {
    margin-top: 0px;
/*    margin-bottom: 0px;*/
	margin-bottom: 85px;
}
#group figcaption {
   /* height: 80px;*/
	    height: 105px;
bottom: -85px;
}
	#group figure:hover figcaption{	    height: 105px;}
#group figcaption div {
    padding: 20px 0;
    padding-bottom: 45px;
}

}