@charset "utf-8";

img{
  width: 100%;
  vertical-align: top;
}

.hover{
  transition: 0.6s;
}

.hover:hover{
  opacity: 0.7;
}

.box{
  width: 100%;
}

.box .inner{
  max-width: 1000px;
  margin: 0 auto;
}

.gif_box,
.btnBox01,
.btnBox02,
.btnBox03,
.btnBox04 {
  position: relative;
}

.item-btn,
.item-arrow {
  position: absolute;
}

.btnBox01 .item-arrow{
  bottom: 13.5%;
  left: 5%;
  width: 12.2%;
  z-index: 1;
  animation: btn_arr_01 0.6s ease-in-out infinite alternate;
}

.btnBox02 .item-arrow{
  bottom: 5%;
  left: 5%;
  width: 12.2%;
  z-index: 1;
  animation: btn_arr_01 0.6s ease-in-out infinite alternate;
}

.btnBox03 .item-arrow{
  bottom: 5%;
  left: 5%;
  width: 12.2%;
  z-index: 1;
  animation: btn_arr_01 0.6s ease-in-out infinite alternate;
}

.btnBox04 .item-arrow{
  bottom: 7.5%;
  left: 5%;
  width: 12.2%;
  z-index: 1;
  animation: btn_arr_01 0.6s ease-in-out infinite alternate;
}

@keyframes btn_arr_01 {
  0% {left: 5%;}
  100% {left: 3%;}
}


.btnBox01 .item-btn{
  bottom: 7%;
  left: 0;
  right: 0;
  margin: auto;
  width: 89.9%;
  animation: btn01 2.3s linear infinite;
}

.btnBox02 .item-btn{
  bottom: 1.5%;
  left: 0;
  right: 0;
  margin: auto;
  width: 89.9%;
  animation: btn01 2.3s linear infinite;
}

.btnBox03 .item-btn{
  bottom: 1.5%;
  left: 0;
  right: 0;
  margin: auto;
  width: 89.9%;
  animation: btn01 2.3s linear infinite;
}

.btnBox04 .item-btn{
  bottom: 1.5%;
  left: 0;
  right: 0;
  margin: auto;
  width: 89.9%;
  animation: btn01 2.3s linear infinite;
}

@keyframes btn01 {
  0% {transform: skew(0deg, 0deg);}
  5% {transform: skew(5deg, 4.2deg);}
  10% {transform: skew(-4deg, -3deg);}
  15% {transform: skew(3deg, 2.2deg);}
  20% {transform: skew(-2deg, -1.5deg);}
  25% {transform: skew(0.9deg, 0.9deg);}
  30% {transform: skew(-0.6deg, -0.6deg);}
  35% {transform: skew(0.3deg, 0.3deg);}
  40% {transform: skew(-0.2deg, -0.2deg);}
  45% {transform: skew(0.1deg, 0.1deg);}  
  50% {transform: skew(0deg, 0deg);}
}


.gif_box .gif_img {
    position: absolute;
    bottom: 6%;
    left: 50%;
    transform: translateX(-50%);
    width: 81.4%;
}

footer .inner{
    background-image: url(../images/bk_img.jpg);
    background-repeat: repeat-y;
    background-size: auto;
  text-align: center;
  padding: 2% 0;
}

footer .footer_nav {
    list-style: none;
    width: 100%;
    padding: 5% 0;
}

footer .footer_nav li {
    display: inline-block;
    width: 25%;
}

footer .footer_nav li a {
    display: block;
    width: 100%;
    /* padding: 0 10%;s */
    color: #fff;
    font-size: 18px;
    font-weight: bold;
    text-decoration: none;
    transition: .3s;
}


footer .footer_nav li a:hover {
    opacity: .8;
}

footer .footer_nav li a span {
    display: inline-block;
    margin-right: 10px;
}

footer small{
  color: #fff;
  font-size: 12px;
}


@media screen and (max-width: 979px) {

}

@media screen and (max-width: 767px) {

  footer small{
    font-size: 10px;
  }

  footer .footer_nav li a {
      font-size: 2.5vw;
  }

}