@charset "UTF-8";
/* * * * * * * * * * * * * * * * * *
 animation.css
* * * * * * * * * * * * * * * * * */
/* mainVisual
--------------------------------- */
ul.bxslider li .txts > * {
  filter: alpha(opacity=0);
  -moz-opacity: 0;
  opacity: 0;
  padding-top: 50px;
}

ul.bxslider li.active .txts > p.logo {
  -moz-animation-name: mvActive;
  -moz-animation-duration: .5s;
  -moz-animation-timing-function: ease;
  -moz-animation-delay: .7s;
  -moz-animation-fill-mode: forwards;
  -webkit-animation-name: mvActive;
  -webkit-animation-duration: .7s;
  -webkit-animation-timing-function: ease;
  -webkit-animation-delay: .7s;
  -webkit-animation-fill-mode: forwards;
  animation-name: mvActive;
  animation-duration: .7s;
  animation-timing-function: ease;
  animation-delay: .7s;
  animation-fill-mode: forwards;
}

ul.bxslider li.active .txts > p.txt {
  -moz-animation-name: mvActive;
  -moz-animation-duration: .5s;
  -moz-animation-timing-function: ease;
  -moz-animation-delay: .85s;
  -moz-animation-fill-mode: forwards;
  -webkit-animation-name: mvActive;
  -webkit-animation-duration: .5s;
  -webkit-animation-timing-function: ease;
  -webkit-animation-delay: .85s;
  -webkit-animation-fill-mode: forwards;
  animation-name: mvActive;
  animation-duration: .5s;
  animation-timing-function: ease;
  animation-delay: .85s;
  animation-fill-mode: forwards;
}

ul.bxslider li.active .txts > p.btn_view {
  -moz-animation-name: mvActive;
  -moz-animation-duration: .5s;
  -moz-animation-timing-function: ease;
  -moz-animation-delay: 1s;
  -moz-animation-fill-mode: forwards;
  -webkit-animation-name: mvActive;
  -webkit-animation-duration: .5s;
  -webkit-animation-timing-function: ease;
  -webkit-animation-delay: 1s;
  -webkit-animation-fill-mode: forwards;
  animation-name: mvActive;
  animation-duration: .5s;
  animation-timing-function: ease;
  animation-delay: 1s;
  animation-fill-mode: forwards;
}

@-moz-keyframes mvActive {
  0% {
    filter: alpha(opacity=0);
    -moz-opacity: 0;
    opacity: 0;
    padding-top: 50px;
  }
  30% {
    filter: alpha(opacity=0);
    -moz-opacity: 0;
    opacity: 0;
  }
  100% {
    filter: alpha(opacity=100);
    -moz-opacity: 1.0;
    opacity: 1.0;
    padding-top: 0;
  }
}
@-webkit-keyframes mvActive {
  0% {
    filter: alpha(opacity=0);
    -moz-opacity: 0;
    opacity: 0;
    padding-top: 50px;
  }
  30% {
    filter: alpha(opacity=0);
    -moz-opacity: 0;
    opacity: 0;
  }
  100% {
    filter: alpha(opacity=100);
    -moz-opacity: 1.0;
    opacity: 1.0;
    padding-top: 0;
  }
}
@keyframes mvActive {
  0% {
    filter: alpha(opacity=0);
    -moz-opacity: 0;
    opacity: 0;
    padding-top: 50px;
  }
  30% {
    filter: alpha(opacity=0);
    -moz-opacity: 0;
    opacity: 0;
  }
  100% {
    filter: alpha(opacity=100);
    -moz-opacity: 1.0;
    opacity: 1.0;
    padding-top: 0;
  }
}
@-webkit-keyframes fadeIn {
  0% {
    filter: alpha(opacity=0);
    -moz-opacity: 0;
    opacity: 0;
  }
  100% {
    filter: alpha(opacity=100);
    -moz-opacity: 1.0;
    opacity: 1.0;
  }
}
@-moz-keyframes fadeIn {
  0% {
    filter: alpha(opacity=0);
    -moz-opacity: 0;
    opacity: 0;
  }
  100% {
    filter: alpha(opacity=100);
    -moz-opacity: 1.0;
    opacity: 1.0;
  }
}
@keyframes fadeIn {
  0% {
    filter: alpha(opacity=0);
    -moz-opacity: 0;
    opacity: 0;
  }
  100% {
    filter: alpha(opacity=100);
    -moz-opacity: 1.0;
    opacity: 1.0;
  }
}
/* entrance
--------------------------------- */
#entrance > ul > li > a:hover > span.bg {
  animation: ani_01 2.5s;
  animation-fill-mode: forwards;
  -moz-animation: ani_01 2.5s;
  -moz-animation-fill-mode: forwards;
  -webkit-animation: ani_01 2.5s;
  -webkit-animation-fill-mode: forwards;
  -o-animation: ani_01 2.5s;
  -o-animation-fill-mode: forwards;
  -ms-animation: ani_01 2.5s;
  -ms-animation-fill-mode: forwards;
}

@-webkit-keyframes ani_01 {
  0% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }
  100% {
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -o-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.2);
  }
}
@keyframes ani_01 {
  0% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }
  100% {
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -o-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.2);
  }
}
#entrance > ul > li > a:hover > .date:before,
#entrance > ul > li > a:hover > .date:after {
  animation: ani_02 1s;
  animation-fill-mode: forwards;
  -moz-animation: ani_02 1s;
  -moz-animation-fill-mode: forwards;
  -webkit-animation: ani_02 1s;
  -webkit-animation-fill-mode: forwards;
  -o-animation: ani_02 1s;
  -o-animation-fill-mode: forwards;
  -ms-animation: ani_02 1s;
  -ms-animation-fill-mode: forwards;
}

@-webkit-keyframes ani_02 {
  0% {
    width: 40px;
    background-color: rgba(255, 255, 255, 0.3);
  }
  100% {
    width: 60px;
    background-color: rgba(255, 255, 255, 0.5);
  }
}
@-moz-keyframes ani_02 {
  0% {
    width: 40px;
    background-color: rgba(255, 255, 255, 0.3);
  }
  100% {
    width: 60px;
    background-color: rgba(255, 255, 255, 0.5);
  }
}
@keyframes ani_02 {
  0% {
    width: 40px;
    background-color: rgba(255, 255, 255, 0.3);
  }
  100% {
    width: 60px;
    background-color: rgba(255, 255, 255, 0.5);
  }
}