.gallery_02 {padding:100px 0;}
.gallery_02 .tit {padding-top:30px;}
.accordion {  width: 802px;   overflow: hidden;  }
.accordion ul { background-color:#f5f5f5 !important; width: 100%;  display: table;  table-layout: fixed;  margin: 0;  padding: 0;}
.accordion ul li {display: table-cell;vertical-align: bottom;  position: relative; border-left:2px solid #fff; 
width: 16.666%;   height: 450px;  background-repeat: no-repeat;  background-color:#000;
background-position: center center; transition: all 700ms ease;}
.accordion ul li div {  display: block;  overflow: hidden;  width: 100%;}
.accordion ul li div a { display: block;  height: 450px;  width: 100%;  position: relative;  z-index: 3;
  vertical-align: bottom;  padding: 15px 20px;  box-sizing: border-box;  color: #fff;  text-decoration: none;  transition: all 200ms ease;}
.accordion ul li div a * {  margin: 0;  width: 100%;  /*text-overflow: ellipsis;  white-space: nowrap; */  
position: relative;  z-index: 5;  overflow: hidden;  -webkit-transform: translateX(0px);  transform: translateX(0px);
  -webkit-transition: all 400ms ease;  transition: all 400ms ease;}
.accordion ul li div a h2 {/*text-shadow:1px 1px 5px rgba(0,0,0,0.5);   text-overflow: clip; */  font-size: 25px;
  text-transform: uppercase;  margin-bottom: 15px; padding:25px 0 0 10px; text-align: left  }
.accordion ul li div a p {  opacity: 0;  font-size: 15px; text-align: left; padding:5px 0 0 10px ;
 -webkit-transform: translateY(20px);  transform: translateY(20px); transition: all 0s;}
.accordion ul li:nth-child(1) {background-image: url("../img/img1.jpg");  }
.accordion ul li:nth-child(2) {background-image: url("../img/img2.jpg");}
.accordion ul li:nth-child(3) {background-image: url("../img/img3.jpg");}
.accordion ul li:nth-child(4) {background-image: url("../img/img4.jpg");}
.accordion ul:hover li {width: 10%;}
.accordion ul:hover li:hover {width: 20%;}
.accordion ul li a {background-image:url("../img/arrow.png"); background-repeat:no-repeat; background-position: center 85%;
 background-color: rgba(0, 0, 0, 0.2);}
.accordion ul:hover li:hover a {background-color: rgba(0, 0, 0, 0.7);}
.accordion ul:hover li:hover a * {  opacity: 1; transition: all 0.5s cubic-bezier(0.32, 0.34, 0, 1) 0.5s;
 -webkit-transform: translateX(0);  transform: translateX(0);}

/*---------------------------------------
  MOBILE RESPONSIVE              
-----------------------------------------*/
@media (max-width: 1023px) {
.gallery_02 {padding:50px 0;}
.gallery_02 .tit {padding-top:0px; padding-bottom:30px;}	
}
@media (max-width: 768px) {
.accordion { width:100%; height: auto; padding: 0px ; margin:0; box-sizing:border-box; }
.accordion ul {background-color:#fff !important; }
.accordion ul li, .accordion ul li:hover, .accordion ul:hover li, .accordion ul:hover li:hover { 
position: relative;  display: table;  table-layout: fixed;  width: 48%; float:left;  margin:1% 1%; box-sizing:border-box;  }
.accordion ul li , .accordion ul li div a {height:160px; background-size:cover; }
.accordion ul li div a h2 {font-size:20px; text-align:center; padding:40px 0 0 0px;}
.accordion ul li div a p {  opacity: 1; display:none;  }
.accordion ul li {border-left:0px; border-right:0px } 
.accordion ul li a {background-image:none;  background-color: rgba(0, 0, 0, 0.3);}
.accordion ul li div a {padding:20px 10px;}
}
@media (max-width: 640px) {
}
@media (max-width: 480px) {
#block_02 section {float:left; width:100%;}
}
@media (max-width: 320px) {
}