@charset "UTF-8";


.flexBox{
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.flexList{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

/*----------------------------------------------sec-gallery-----*/

.upper{
  background: url(../../img/index/bg-main.jpg) top center repeat;
  position: relative;
  z-index: 2;
  padding: 200px 0 160px;
}

.upper .flex-big-img{
  justify-content: space-between;
  margin-bottom: 150px;
}

.upper .flex-big-img .big-left{
  width: 50%;
}

.upper .flex-big-img .big-right{
  margin-top: 75px; 
  margin-right: 5%;
  width: 35%;
}

.flex-3-left{
  margin: 0 15% 90px 5%; 
}

.flex-3-right{
  margin: 0 5% 90px 15%; 
}

.flex-3-left.last{
  margin: 0 15% 0 5%; 
}

.flex-3-left.right{
  margin: 0 5% 0 15%; 
}


.flex-3-left,
.flex-3-right{
  justify-content: space-between;
}

.flex-3-left li,
.flex-3-right li{
  width: 30%;
}

.middle-wrap{
  height: 500px;
}

.middle{
  position: relative;
  opacity: 0;
}

.middle.change {
  opacity: 1;
  transition:all 1s ease;
}

.middle:before {
  content:"";
  display:block;
  position:fixed;
  top:50%;
  left:50%;
  z-index:-1;
  width:100%;
  height:100vh;
  background-repeat:no-repeat;
  background-position: center center;
  background-image:url(../../img/gallery/gallery_bg.jpg);
  background-size:cover;
  transform: translate(-50%,-50%);
}

.bottom{
  background: url(../../img/index/bg-main.jpg) top center repeat;
  position: relative;
  z-index: 2;
  padding: 150px 0 200px;
}

.bottom .flex-big-img{
  justify-content: space-between;
  margin-bottom: 150px;
}

.bottom .flex-big-img .big-left{
  width: 55%;
}

.bottom .flex-big-img .big-right{
  margin-top: 80px; 
  margin-right: 6%;
  width: 30%;
}

@media screen and (max-width: 834px){
.upper {
    padding: 80px 0 80px;
}

.upper .flex-big-img,
.bottom .flex-big-img{
    margin-bottom: 60px;
    position: relative;
}

.upper .flex-big-img .big-left,
.bottom .flex-big-img .big-left  {
    width: 80%;
}

.upper .flex-big-img .big-right, 
.bottom .flex-big-img .big-right {
    width: 45%;
    position: absolute;
    left: 90%;
}

.flex-3-left, .flex-3-right {
    display: block;
}

.flex-3-right {
    margin: 0 5% 70px 35%;
}

.flex-3-left{
    margin: 0 35% 70px 5%;
}

.flex-3-right.last {
    margin: 0 5% 0 35%;
}

.flex-3-left.last{
    margin: 0 35% 0 5%;
}

.flex-3-left li, 
.flex-3-right li {
    width: 100%;
    margin-bottom: 15%;
}

.flex-3-left li:nth-of-type(2) {
    margin: 0px 0 15% 50%;
}

.flex-3-right li:nth-of-type(2){
    margin: 0px 0 15% -50%;
}

.middle-wrap {
    height: 250px;
}

.bottom {
    padding: 80px 0 80px;
}

}