@charset "utf-8";

/*-------------------------------------------------------------------------------------*
 *   포세이돈전용                                                                          *
 *-------------------------------------------------------------------------------------*/
.bounce {
  animation-name: bounce;
  -webkit-animation-name: bounce;

  animation-duration: 1.6s;
  -webkit-animation-duration: 1.6s;

  animation-timing-function: ease;
  -webkit-animation-timing-function: ease;

  transform-origin: 50% 100%;
  -ms-transform-origin: 50% 100%;
  -webkit-transform-origin: 50% 100%;
}

@keyframes bounce {
  0% {
    transform: translateY(0%) scaleY(0.6);
  }
  60% {
    transform: translateY(-100%) scaleY(1.1);
  }
  70% {
    transform: translateY(0%) scaleY(0.95) scaleX(1.05);
  }
  80% {
    transform: translateY(0%) scaleY(1.05) scaleX(1);
  }
  90% {
    transform: translateY(0%) scaleY(0.95) scaleX(1);
  }
  100% {
    transform: translateY(0%) scaleY(1) scaleX(1);
  }
}

@-webkit-keyframes bounce {
  0% {
    -webkit-transform: translateY(0%) scaleY(0.6);
  }
  60% {
    -webkit-transform: translateY(-100%) scaleY(1.1);
  }
  70% {
    -webkit-transform: translateY(0%) scaleY(0.95) scaleX(1.05);
  }
  80% {
    -webkit-transform: translateY(0%) scaleY(1.05) scaleX(1);
  }
  90% {
    -webkit-transform: translateY(0%) scaleY(0.95) scaleX(1);
  }
  100% {
    -webkit-transform: translateY(0%) scaleY(1) scaleX(1);
  }
}

.gnb_left li:hover {
  animation-name: gnb_left;
  -webkit-animation-name: gnb_left;

  animation-duration: 0.5s;
  -webkit-animation-duration: 0.5s;

  animation-timing-function: ease-out;
  -webkit-animation-timing-function: ease-out;

  visibility: visible !important;
}
@keyframes gnb_left {
  0% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

.con2 li a img:hover {
  animation-name: con2;
  -webkit-animation-name: con2;

  animation-duration: 0.3s;
  -webkit-animation-duration: 0.3s;

  animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;

  animation-timing-function: linear;
  -webkit-animation-timing-function: linear;
}

@keyframes con2 {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.04);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/*-------------------------------------------------------------------------------------*
 *  일반적인                                                                           *
 *-------------------------------------------------------------------------------------*/
/* mouseover1 */
.mouseover1 {
  animation-name: mouseover1;
  -webkit-animation-name: mouseover1;

  animation-duration: 0.2s;
  -webkit-animation-duration: 0.2s;

  animation-timing-function: ease-out;
  -webkit-animation-timing-function: ease-out;

  visibility: visible !important;
}

@keyframes mouseover1 {
  0% {
    transform: scale(1.03);
  }
  100% {
    transform: scale(1);
  }
}

/* mouseover2 */
.mouseover2 {
  animation-name: mouseover2;
  -webkit-animation-name: mouseover2;

  animation-duration: 0.5s;
  -webkit-animation-duration: 0.5s;

  animation-timing-function: ease-out;
  -webkit-animation-timing-function: ease-out;

  visibility: visible !important;
}

@keyframes mouseover2 {
  0% {
    transform: scale(1.07);
    opacity: 0.1;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/*-------------------------------------------------------------------------------------*
 *  레이어팝업 띄우는 스타일 시작                                                      *
 *-------------------------------------------------------------------------------------*/
/* 한개의 스타일 */
.popup_style01 {
  animation-name: popup_style01;
  -webkit-animation-name: popup_style01;
  animation-duration: 1.1s;
  -webkit-animation-duration: 1.1s;
  animation-timing-function: ease-out;
  -webkit-animation-timing-function: ease-out;
  transform-origin: 50% 0%;
  -ms-transform-origin: 50% 0%;
  -webkit-transform-origin: 50% 0%;
}

@keyframes popup_style01 {
  0% {
    transform: scaleY(0.1);
  }
  40% {
    transform: scaleY(1.02);
  }
  60% {
    transform: scaleY(0.98);
  }
  80% {
    transform: scaleY(1.01);
  }
  100% {
    transform: scaleY(0.98);
  }
  80% {
    transform: scaleY(1.01);
  }
  100% {
    transform: scaleY(1);
  }
}

/* 한개의 스타일 */
.popup_style02 {
  animation-name: popup_style02;
  -webkit-animation-name: popup_style02;
  animation-duration: 0.8s;
  -webkit-animation-duration: 0.8s;
  animation-timing-function: ease-in-out;
  -webkit-animation-timing-function: ease-in-out;
  visibility: visible !important;
}

@keyframes popup_style02 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/* 한개의 스타일 */
.popup_style03 {
  animation-name: popup_style03;
  -webkit-animation-name: popup_style03;
  animation-duration: 1s;
  -webkit-animation-duration: 1s;
  animation-timing-function: ease-out;
  -webkit-animation-timing-function: ease-out;
  transform-origin: 100% 0%;
  -ms-transform-origin: 100% 0%;
  -webkit-transform-origin: 100% 0%;
}

@keyframes popup_style03 {
  0% {
    transform: scaleX(0.3);
  }
  40% {
    transform: scaleX(1.02);
  }
  60% {
    transform: scaleX(0.98);
  }
  80% {
    transform: scaleX(1.01);
  }
  100% {
    transform: scaleX(0.98);
  }
  80% {
    transform: scaleX(1.01);
  }
  100% {
    transform: scaleX(1);
  }
}

/* 한개의 스타일 */
.popup_style04 {
  animation-name: popup_style04;
  -webkit-animation-name: popup_style04;
  animation-duration: 0.7s;
  -webkit-animation-duration: 0.7s;
  animation-timing-function: ease;
  -webkit-animation-timing-function: ease;
  visibility: visible !important;
}

@keyframes popup_style04 {
  0% {
    transform: translateY(-300%);
  }
  100% {
    transform: translateY(0%);
  }
}

/* 한개의 스타일 */
.popup_style05 {
  animation-name: popup_style05;
  -webkit-animation-name: popup_style05;
  animation-duration: 0.5s;
  -webkit-animation-duration: 0.5s;
  animation-timing-function: ease;
  -webkit-animation-timing-function: ease;
  visibility: visible !important;
}

@keyframes popup_style05 {
  0% {
    transform: translateY(-300%) scaleX(4);
  }
  100% {
    transform: translateY(0%) scaleX(1);
  }
}

/* 한개의 스타일 */
.popup_style06 {
  animation-name: popup_style06;
  -webkit-animation-name: popup_style06;
  animation-duration: 1.1s;
  -webkit-animation-duration: 1.1s;
  animation-timing-function: ease;
  -webkit-animation-timing-function: ease;
  visibility: visible !important;
}

@keyframes popup_style06 {
  0% {
    transform: translateY(-300%) scaleX(4);
  }
  50% {
    transform: translateY(2%) scaleX(1.3);
  }
  100% {
    transform: translateY(0%) scaleX(1);
  }
}

/*-------------------------------------------------------------------------------------*
 *  게임 (큰이미지)                                                                    *
 *-------------------------------------------------------------------------------------*/
/* game1 */
.game1 {
  animation-name: game1;
  -webkit-animation-name: game1;

  animation-duration: 0.3s;
  -webkit-animation-duration: 0.3s;

  animation-timing-function: ease-out;
  -webkit-animation-timing-function: ease-out;

  animation-iteration-count: 1;
  -webkit-animation-iteration-count: 1;

  animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;

  visibility: visible !important;
}

@keyframes game1 {
  0% {
    transform: scale(1) scaleX(1);
  }
  50% {
    transform: scale(1.03) scaleX(1.1);
    box-shadow: #fffc00 2px 2px 30px -1px;
  }
  100% {
    transform: scale(1.05) scaleX(1);
    box-shadow: #3e62e1 2px 2px 30px -1px;
  }
}