/* =============================================
- KEYFREAM
================================================ */
/*-----------------------------------------------------------------
  vertical01
----------------------------------------------------------------- */
@keyframes vertical01 {
  0% {
    -webkit-transform: translateY(-15px) translateX(-15px);
    transform: translateY(-15px) translateX(-15px); }
  100% {
    -webkit-transform: translateY(0px) translateX(0px);
    transform: translateY(0px) translateX(0px); } }

@-webkit-keyframes vertical01 {
  0% {
    -webkit-transform: translateY(-15px) translateX(-15px);
    transform: translateY(-15px) translateX(-15px); }
  100% {
    -webkit-transform: translateY(0px) translateX(0px);
    transform: translateY(0px) translateX(0px); } }

/*-----------------------------------------------------------------
  fadeUp/fadeDown
----------------------------------------------------------------- */
@-webkit-keyframes fadeIn {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }

@keyframes fadeIn {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }

@-webkit-keyframes fadeInOut {
  from {
    opacity: 1; }
  to {
    opacity: 0; } }

@keyframes fadeInOut {
  from {
    opacity: 1; }
  to {
    opacity: 0; } }

@-webkit-keyframes fadeUp {
  from {
    opacity: 0;
    -webkit-transform: translateY(8%);
    transform: translateY(8%); }
  to {
    opacity: 1;
    -webkit-transform: translateY(0%);
    transform: translateY(0%); } }

@keyframes fadeUp {
  from {
    opacity: 0;
    -webkit-transform: translateY(8%);
    transform: translateY(8%); }
  to {
    opacity: 1;
    -webkit-transform: translateY(0%);
    transform: translateY(0%); } }

@-webkit-keyframes fadeUp2 {
  from {
    opacity: 0;
    -webkit-transform: translateY(4%);
    transform: translateY(4%); }
  to {
    opacity: 1;
    -webkit-transform: translateY(0%);
    transform: translateY(0%); } }

@keyframes fadeUp2 {
  from {
    opacity: 0;
    -webkit-transform: translateY(4%);
    transform: translateY(4%); }
  to {
    opacity: 1;
    -webkit-transform: translateY(0%);
    transform: translateY(0%); } }

@-webkit-keyframes fadeUp3 {
  from {
    opacity: 0;
    -webkit-transform: translateY(40%);
    transform: translateY(40%); }
  to {
    opacity: 1;
    -webkit-transform: translateY(0%);
    transform: translateY(0%); } }

@keyframes fadeUp3 {
  from {
    opacity: 0;
    -webkit-transform: translateY(40%);
    transform: translateY(40%); }
  to {
    opacity: 1;
    -webkit-transform: translateY(0%);
    transform: translateY(0%); } }

@-webkit-keyframes fadeDown {
  from {
    opacity: 0;
    -webkit-transform: translateY(-8%);
    transform: translateY(-8%); }
  to {
    opacity: 1;
    -webkit-transform: translateY(0%);
    transform: translateY(0%); } }

@keyframes fadeDown {
  from {
    opacity: 0;
    -webkit-transform: translateY(-8%);
    transform: translateY(-8%); }
  to {
    opacity: 1;
    -webkit-transform: translateY(0%);
    transform: translateY(0%); } }

@-webkit-keyframes Down {
  from {
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%); }
  to {
    -webkit-transform: translateY(0%);
    transform: translateY(0%); } }

@keyframes Down {
  from {
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%); }
  to {
    -webkit-transform: translateY(0%);
    transform: translateY(0%); } }

@-webkit-keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(5%, 0, 0);
    transform: translate3d(5%, 0, 0); }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); } }

@keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(5%, 0, 0);
    transform: translate3d(5%, 0, 0); }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); } }

@-webkit-keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-5%, 0, 0);
    transform: translate3d(-5%, 0, 0); }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); } }

@keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-5%, 0, 0);
    transform: translate3d(-5%, 0, 0); }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); } }

/*-----------------------------------------------------------------
  swing
----------------------------------------------------------------- */
@-webkit-keyframes swing {
  20% {
    -webkit-transform: rotate3d(0, 0, 1, 15deg);
    transform: rotate3d(0, 0, 1, 15deg); }
  40% {
    -webkit-transform: rotate3d(0, 0, 1, -10deg);
    transform: rotate3d(0, 0, 1, -10deg); }
  60% {
    -webkit-transform: rotate3d(0, 0, 1, 5deg);
    transform: rotate3d(0, 0, 1, 5deg); }
  80% {
    -webkit-transform: rotate3d(0, 0, 1, -5deg);
    transform: rotate3d(0, 0, 1, -5deg); }
  to {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
    transform: rotate3d(0, 0, 1, 0deg); } }

@keyframes swing {
  20% {
    -webkit-transform: rotate3d(0, 0, 1, 15deg);
    transform: rotate3d(0, 0, 1, 15deg); }
  40% {
    -webkit-transform: rotate3d(0, 0, 1, -10deg);
    transform: rotate3d(0, 0, 1, -10deg); }
  60% {
    -webkit-transform: rotate3d(0, 0, 1, 5deg);
    transform: rotate3d(0, 0, 1, 5deg); }
  80% {
    -webkit-transform: rotate3d(0, 0, 1, -5deg);
    transform: rotate3d(0, 0, 1, -5deg); }
  to {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
    transform: rotate3d(0, 0, 1, 0deg); } }

@-webkit-keyframes swing2 {
  20% {
    -webkit-transform: rotate3d(0, 0, 1, 10deg);
    transform: rotate3d(0, 0, 1, 10deg); }
  40% {
    -webkit-transform: rotate3d(0, 0, 1, -5deg);
    transform: rotate3d(0, 0, 1, -5deg); }
  60% {
    -webkit-transform: rotate3d(0, 0, 1, 3deg);
    transform: rotate3d(0, 0, 1, 3deg); }
  80% {
    -webkit-transform: rotate3d(0, 0, 1, -3deg);
    transform: rotate3d(0, 0, 1, -3deg); }
  to {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
    transform: rotate3d(0, 0, 1, 0deg); } }

@keyframes swing2 {
  20% {
    -webkit-transform: rotate3d(0, 0, 1, 5deg);
    transform: rotate3d(0, 0, 1, 5deg); }
  40% {
    -webkit-transform: rotate3d(0, 0, 1, -5deg);
    transform: rotate3d(0, 0, 1, -5deg); }
  60% {
    -webkit-transform: rotate3d(0, 0, 1, 3deg);
    transform: rotate3d(0, 0, 1, 3deg); }
  80% {
    -webkit-transform: rotate3d(0, 0, 1, -3deg);
    transform: rotate3d(0, 0, 1, -3deg); }
  to {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
    transform: rotate3d(0, 0, 1, 0deg); } }

@-webkit-keyframes swing2_opacity {
  from {
    opacity: 0; }
  20% {
    -webkit-transform: rotate3d(0, 0, 1, 5deg);
    transform: rotate3d(0, 0, 1, 10deg); }
  40% {
    -webkit-transform: rotate3d(0, 0, 1, -5deg);
    transform: rotate3d(0, 0, 1, -5deg); }
  60% {
    -webkit-transform: rotate3d(0, 0, 1, 3deg);
    transform: rotate3d(0, 0, 1, 3deg); }
  80% {
    -webkit-transform: rotate3d(0, 0, 1, -3deg);
    transform: rotate3d(0, 0, 1, -3deg); }
  to {
    opacity: 1;
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
    transform: rotate3d(0, 0, 1, 0deg); } }

@-webkit-keyframes swing_opacity {
  from {
    opacity: 0; }
  20% {
    -webkit-transform: rotate3d(0, 0, 1, 5deg);
    transform: rotate3d(0, 0, 1, 5deg); }
  40% {
    -webkit-transform: rotate3d(0, 0, 1, -5deg);
    transform: rotate3d(0, 0, 1, -5deg); }
  60% {
    -webkit-transform: rotate3d(0, 0, 1, 3deg);
    transform: rotate3d(0, 0, 1, 3deg); }
  80% {
    -webkit-transform: rotate3d(0, 0, 1, -3deg);
    transform: rotate3d(0, 0, 1, -3deg); }
  to {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
    transform: rotate3d(0, 0, 1, 0deg);
    opacity: 1; } }

@keyframes swing_opacity {
  from {
    opacity: 0; }
  20% {
    -webkit-transform: rotate3d(0, 0, 1, 5deg);
    transform: rotate3d(0, 0, 1, 5deg); }
  40% {
    -webkit-transform: rotate3d(0, 0, 1, -5deg);
    transform: rotate3d(0, 0, 1, -5deg); }
  60% {
    -webkit-transform: rotate3d(0, 0, 1, 3deg);
    transform: rotate3d(0, 0, 1, 3deg); }
  80% {
    -webkit-transform: rotate3d(0, 0, 1, -3deg);
    transform: rotate3d(0, 0, 1, -3deg); }
  to {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
    transform: rotate3d(0, 0, 1, 0deg);
    opacity: 1; } }

/*-----------------------------------------------------------------
  bounce
----------------------------------------------------------------- */
@-webkit-keyframes bounce {
  from,
  20%,
  53%,
  80%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); }
  40%,
  43% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -30px, 0);
    transform: translate3d(0, -30px, 0); }
  70% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -15px, 0);
    transform: translate3d(0, -15px, 0); }
  90% {
    -webkit-transform: translate3d(0, -4px, 0);
    transform: translate3d(0, -4px, 0); } }

@keyframes bounce {
  from,
  20%,
  53%,
  80%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); }
  40%,
  43% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -30px, 0);
    transform: translate3d(0, -30px, 0); }
  70% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -15px, 0);
    transform: translate3d(0, -15px, 0); }
  90% {
    -webkit-transform: translate3d(0, -4px, 0);
    transform: translate3d(0, -4px, 0); } }

/*-----------------------------------------------------------------
  scale
----------------------------------------------------------------- */
@-webkit-keyframes scale {
  from {
    opacity: 0;
    -webkit-transform: scale(0.8);
    transform: scale(0.8); }
  to {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1); } }

@keyframes scale {
  from {
    opacity: 0;
    -webkit-transform: scale(0.8);
    transform: scale(0.8); }
  to {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1); } }

/*-----------------------------------------------------------------
  loading
----------------------------------------------------------------- */
@-webkit-keyframes loading {
  from {
    -webkit-transform: translateY(0%);
    transform: translateY(0%);
    opacity: 1;
    visibility: visible; }
  to {
    visibility: hidden;
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%); } }

@keyframes loading {
  from {
    -webkit-transform: translateY(0%);
    transform: translateY(0%);
    opacity: 1;
    visibility: visible; }
  to {
    visibility: hidden;
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%); } }

/*-----------------------------------------------------------------
  loading
----------------------------------------------------------------- */
@-webkit-keyframes grayscale {
  from {
    -webkit-filter: grayscale(100%) blur(0px);
    filter: grayscale(100%) blur(0px); }
  to {
    -webkit-filter: grayscale(0%) blur(0px);
    filter: grayscale(0%) blur(0px); } }

@keyframes grayscale {
  from {
    -webkit-filter: grayscale(100%) blur(0px);
    filter: grayscale(100%) blur(0px); }
  to {
    -webkit-filter: grayscale(0%) blur(0px);
    filter: grayscale(0%) blur(0px); } }

/*-----------------------------------------------------------------
  bounceInLeft
----------------------------------------------------------------- */
@-webkit-keyframes bounceInLeft {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-10%, 0, 0);
    transform: translate3d(-10%, 0, 0); }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(25px, 0, 0);
    transform: translate3d(25px, 0, 0); }
  75% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0); }
  90% {
    -webkit-transform: translate3d(5px, 0, 0);
    transform: translate3d(5px, 0, 0); }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1; } }

@keyframes bounceInLeft {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-10%, 0, 0);
    transform: translate3d(-10%, 0, 0); }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(25px, 0, 0);
    transform: translate3d(25px, 0, 0); }
  75% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0); }
  90% {
    -webkit-transform: translate3d(5px, 0, 0);
    transform: translate3d(5px, 0, 0); }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1; } }

/*-----------------------------------------------------------------
  item
----------------------------------------------------------------- */
@-webkit-keyframes item {
  from {
    opacity: 0;
    -webkit-transform: scale(0.8);
    transform: scale(0.8);
    position: relative;
    top: -40px; }
  to {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
    top: 0px; } }

@keyframes item {
  from {
    opacity: 0;
    -webkit-transform: scale(0.8);
    transform: scale(0.8);
    position: relative;
    top: -40px; }
  to {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
    top: 0px; } }

/*-----------------------------------------------------------------
  fadeUp/fadeDown
----------------------------------------------------------------- */
@-webkit-keyframes background {
  from {
    background-color: rgba(0, 0, 0, 0.9); }
  to {
    background-color: rgba(0, 0, 0, 0.6); } }

@keyframes background {
  from {
    background-color: rgba(0, 0, 0, 0.9); }
  to {
    background-color: rgba(0, 0, 0, 0.6); } }

/*-----------------------------------------------------------------
  Recruit
----------------------------------------------------------------- */
@keyframes Recruit_left {
  0% {
    -webkit-transform: translate(100px, 100px);
    transform: translate(100px, 100px);
    opacity: 0; }
  100% {
    -webkit-transform: translate(0px, 0px);
    transform: translate(0px, 0px);
    opacity: 1; } }

@-webkit-keyframes Recruit_left {
  0% {
    -webkit-transform: translate(100px, 100px);
    transform: translate(100px, 100px);
    opacity: 0; }
  100% {
    -webkit-transform: translate(0px, 0px);
    transform: translate(0px, 0px);
    opacity: 1; } }

@keyframes Recruit_right {
  0% {
    -webkit-transform: translate(-140px, 80px);
    transform: translate(-140px, 80px);
    opacity: 0; }
  100% {
    -webkit-transform: translate(0px, 0px);
    transform: translate(0px, 0px);
    opacity: 1; } }

@-webkit-keyframes Recruit_right {
  0% {
    -webkit-transform: translate(-140px, 80px);
    transform: translate(-140px, 80px);
    opacity: 0; }
  100% {
    -webkit-transform: translate(0px, 0px);
    transform: translate(0px, 0px);
    opacity: 1; } }

/* =============================================
- visual
================================================ */
.home #header .logo {
  opacity: 0;
  visibility: hidden; }
  .home #header .logo.anim {
    opacity: 1;
    visibility: visible;
    -webkit-transition: all 1.5s ease 0s;
    -moz-transition: all 1.5s ease 0s;
    -ms-transition: all 1.5s ease 0s;
    -o-transition: all 1.5s ease 0s;
    transition: all 1.5s ease 0s; }

.home #top_movie .midashi {
  opacity: 0;
  visibility: hidden;
  -webkit-transform: scale(0.95);
  -ms-transform: scale(0.95);
  transform: scale(0.95); }
  .home #top_movie .midashi.anim {
    opacity: 1;
    visibility: visible;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    -webkit-transition: all 1.5s ease 0s;
    -moz-transition: all 1.5s ease 0s;
    -ms-transition: all 1.5s ease 0s;
    -o-transition: all 1.5s ease 0s;
    transition: all 1.5s ease 0s; }

.home #top_movie .start a:before {
  -webkit-transform: scale(0);
  -ms-transform: scale(0);
  transform: scale(0);
  opacity: 0;
  visibility: hidden;
  -webkit-transition-delay: 1.5;
  -o-transition-delay: 1.5;
  transition-delay: 1.5; }

.home #top_movie .start a:after {
  opacity: 0;
  visibility: hidden; }

.home #top_movie .start a span {
  opacity: 0;
  visibility: hidden; }

.home #top_movie .start.anim a:before {
  opacity: 1;
  visibility: visible;
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
  -webkit-transition: all 0.4s ease 0s;
  -moz-transition: all 0.4s ease 0s;
  -ms-transition: all 0.4s ease 0s;
  -o-transition: all 0.4s ease 0s;
  transition: all 0.4s ease 0s; }

.home #top_movie .start.anim a:after,
.home #top_movie .start.anim a span {
  opacity: 1;
  visibility: visible;
  -webkit-transition: all 1s ease 0.5s;
  -moz-transition: all 1s ease 0.5s;
  -ms-transition: all 1s ease 0.5s;
  -o-transition: all 1s ease 0.5s;
  transition: all 1s ease 0.5s; }

.home #top_movie #scroll {
  opacity: 0;
  visibility: hidden; }
  .home #top_movie #scroll.anim {
    opacity: 1;
    visibility: visible;
    -webkit-transition: all 1.5s ease 0s;
    -moz-transition: all 1.5s ease 0s;
    -ms-transition: all 1.5s ease 0s;
    -o-transition: all 1.5s ease 0s;
    transition: all 1.5s ease 0s; }

.home #navigation .links li {
  opacity: 0;
  visibility: hidden; }

.home #navigation .links.anim li {
  opacity: 1;
  visibility: visible;
  -webkit-transition: all 2s ease 0s;
  -moz-transition: all 2s ease 0s;
  -ms-transition: all 2s ease 0s;
  -o-transition: all 2s ease 0s;
  transition: all 2s ease 0s; }
  @media screen and (min-width: 980px) {
    .home #navigation .links.anim li:nth-child(1) {
      -webkit-transition-delay: 0s;
      -o-transition-delay: 0s;
      transition-delay: 0s; }
    .home #navigation .links.anim li:nth-child(2) {
      -webkit-transition-delay: 0.04s;
      -o-transition-delay: 0.04s;
      transition-delay: 0.04s; }
    .home #navigation .links.anim li:nth-child(3) {
      -webkit-transition-delay: 0.08s;
      -o-transition-delay: 0.08s;
      transition-delay: 0.08s; }
    .home #navigation .links.anim li:nth-child(4) {
      -webkit-transition-delay: 0.12s;
      -o-transition-delay: 0.12s;
      transition-delay: 0.12s; }
    .home #navigation .links.anim li:nth-child(5) {
      -webkit-transition-delay: 0.16s;
      -o-transition-delay: 0.16s;
      transition-delay: 0.16s; }
    .home #navigation .links.anim li:nth-child(6) {
      -webkit-transition-delay: 0.2s;
      -o-transition-delay: 0.2s;
      transition-delay: 0.2s; }
    .home #navigation .links.anim li:nth-child(7) {
      -webkit-transition-delay: 0.24s;
      -o-transition-delay: 0.24s;
      transition-delay: 0.24s; }
    .home #navigation .links.anim li:nth-child(8) {
      -webkit-transition-delay: 0.28s;
      -o-transition-delay: 0.28s;
      transition-delay: 0.28s; }
    .home #navigation .links.anim li:nth-child(9) {
      -webkit-transition-delay: 0.32s;
      -o-transition-delay: 0.32s;
      transition-delay: 0.32s; }
    .home #navigation .links.anim li:nth-child(10) {
      -webkit-transition-delay: 0.36s;
      -o-transition-delay: 0.36s;
      transition-delay: 0.36s; } }

.home #navigation .lang li {
  opacity: 0;
  visibility: hidden;
  -webkit-transform: translateX(15px);
  -ms-transform: translateX(15px);
  transform: translateX(15px); }

.home #navigation .lang.anim li {
  opacity: 1;
  visibility: visible;
  -webkit-transform: translateX(0px);
  -ms-transform: translateX(0px);
  transform: translateX(0px);
  -webkit-transition: all 0.5s ease 0s;
  -moz-transition: all 0.5s ease 0s;
  -ms-transition: all 0.5s ease 0s;
  -o-transition: all 0.5s ease 0s;
  transition: all 0.5s ease 0s; }
  .home #navigation .lang.anim li:nth-child(1) {
    -webkit-transition-delay: 0s;
    -o-transition-delay: 0s;
    transition-delay: 0s; }
  .home #navigation .lang.anim li:nth-child(2) {
    -webkit-transition-delay: 0.04s;
    -o-transition-delay: 0.04s;
    transition-delay: 0.04s; }
  .home #navigation .lang.anim li:nth-child(3) {
    -webkit-transition-delay: 0.08s;
    -o-transition-delay: 0.08s;
    transition-delay: 0.08s; }
  .home #navigation .lang.anim li:nth-child(4) {
    -webkit-transition-delay: 0.12s;
    -o-transition-delay: 0.12s;
    transition-delay: 0.12s; }
  .home #navigation .lang.anim li:nth-child(5) {
    -webkit-transition-delay: 0.16s;
    -o-transition-delay: 0.16s;
    transition-delay: 0.16s; }
  .home #navigation .lang.anim li:nth-child(6) {
    -webkit-transition-delay: 0.2s;
    -o-transition-delay: 0.2s;
    transition-delay: 0.2s; }
  .home #navigation .lang.anim li:nth-child(7) {
    -webkit-transition-delay: 0.24s;
    -o-transition-delay: 0.24s;
    transition-delay: 0.24s; }
  .home #navigation .lang.anim li:nth-child(8) {
    -webkit-transition-delay: 0.28s;
    -o-transition-delay: 0.28s;
    transition-delay: 0.28s; }
  .home #navigation .lang.anim li:nth-child(9) {
    -webkit-transition-delay: 0.32s;
    -o-transition-delay: 0.32s;
    transition-delay: 0.32s; }
  .home #navigation .lang.anim li:nth-child(10) {
    -webkit-transition-delay: 0.36s;
    -o-transition-delay: 0.36s;
    transition-delay: 0.36s; }

.home #wrap #top_movie:before {
  -webkit-transform: translate(-100%, -100%);
  -ms-transform: translate(-100%, -100%);
  transform: translate(-100%, -100%); }

.home #wrap #top_movie.anim:before {
  -webkit-transform: translate(0%, 0%);
  -ms-transform: translate(0%, 0%);
  transform: translate(0%, 0%);
  -webkit-transition: all 0.75s ease 1.8s;
  -moz-transition: all 0.75s ease 1.8s;
  -ms-transition: all 0.75s ease 1.8s;
  -o-transition: all 0.75s ease 1.8s;
  transition: all 0.75s ease 1.8s; }

.home #wrap #top_movie.line_position .bg_line span {
  height: 50%;
  -webkit-transition: all 14s ease-in-out 0s;
  -moz-transition: all 14s ease-in-out 0s;
  -ms-transition: all 14s ease-in-out 0s;
  -o-transition: all 14s ease-in-out 0s;
  transition: all 14s ease-in-out 0s; }

.home #wrap #top_movie.line_position.anim .bg_line span {
  height: 1000%; }

.home #wrap #top_movie #player:before {
  background-color: rgba(0, 0, 0, 0.9); }

.home #wrap #top_movie #player.anim:before {
  background-color: rgba(0, 0, 0, 0.5);
  -webkit-transition: all 8s ease-in-out 0s;
  -moz-transition: all 8s ease-in-out 0s;
  -ms-transition: all 8s ease-in-out 0s;
  -o-transition: all 8s ease-in-out 0s;
  transition: all 8s ease-in-out 0s; }
  @media screen and (max-width: 767px) {
    .home #wrap #top_movie #player.anim:before {
      -webkit-transition: all 3.5s ease-in-out 0s;
      -moz-transition: all 3.5s ease-in-out 0s;
      -ms-transition: all 3.5s ease-in-out 0s;
      -o-transition: all 3.5s ease-in-out 0s;
      transition: all 3.5s ease-in-out 0s; } }

/* =============================================
- TOP PAGE
================================================ */
@media screen and (min-width: 980px) {
  #topNews .arvBoxWrap .arvBox {
    opacity: 0; }
  #topNews .leftArea {
    opacity: 0; }
  #topNews.anime .arvBoxWrap .arvBox {
    -webkit-animation: fadeUp 0.4s ease-in-out forwards;
    -moz-animation: fadeUp 0.4s ease-in-out forwards;
    animation: fadeUp 0.4s ease-in-out forwards;
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    animation-fill-mode: both; }
    #topNews.anime .arvBoxWrap .arvBox:nth-child(1) {
      -webkit-animation-delay: 0.65s;
      animation-delay: 0.65s; }
    #topNews.anime .arvBoxWrap .arvBox:nth-child(2) {
      -webkit-animation-delay: 0.9s;
      animation-delay: 0.9s; }
    #topNews.anime .arvBoxWrap .arvBox:nth-child(3) {
      -webkit-animation-delay: 1.15s;
      animation-delay: 1.15s; }
    #topNews.anime .arvBoxWrap .arvBox:nth-child(4) {
      -webkit-animation-delay: 1.4s;
      animation-delay: 1.4s; }
    #topNews.anime .arvBoxWrap .arvBox:nth-child(5) {
      -webkit-animation-delay: 1.65s;
      animation-delay: 1.65s; }
    #topNews.anime .arvBoxWrap .arvBox:nth-child(6) {
      -webkit-animation-delay: 1.9s;
      animation-delay: 1.9s; }
    #topNews.anime .arvBoxWrap .arvBox:nth-child(7) {
      -webkit-animation-delay: 2.15s;
      animation-delay: 2.15s; }
    #topNews.anime .arvBoxWrap .arvBox:nth-child(8) {
      -webkit-animation-delay: 2.4s;
      animation-delay: 2.4s; }
    #topNews.anime .arvBoxWrap .arvBox:nth-child(9) {
      -webkit-animation-delay: 2.65s;
      animation-delay: 2.65s; }
    #topNews.anime .arvBoxWrap .arvBox:nth-child(10) {
      -webkit-animation-delay: 2.9s;
      animation-delay: 2.9s; }
  #topNews.anime .leftArea {
    -webkit-animation: fadeInLeft 0.4s ease-in-out forwards;
    -moz-animation: fadeInLeft 0.4s ease-in-out forwards;
    animation: fadeInLeft 0.4s ease-in-out forwards;
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    animation-fill-mode: both; } }

@media screen and (min-width: 980px) {
  #topContent .boxWrap .leftArea, #topContent .boxWrap .rightArea {
    opacity: 0; }
  #topContent .boxWrap.anime .leftArea {
    -webkit-animation: fadeIn 0.9s ease-in-out forwards;
    -moz-animation: fadeIn 0.9s ease-in-out forwards;
    animation: fadeIn 0.9s ease-in-out forwards;
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-delay: 0.25s;
    animation-delay: 0.25s; }
  #topContent .boxWrap.anime:not(.reverse) .rightArea {
    -webkit-animation: fadeInRight 0.9s ease-in-out forwards;
    -moz-animation: fadeInRight 0.9s ease-in-out forwards;
    animation: fadeInRight 0.9s ease-in-out forwards;
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-delay: 0.4s;
    animation-delay: 0.4s; }
  #topContent .boxWrap.anime.reverse .rightArea {
    -webkit-animation: fadeInLeft 0.9s ease-in-out forwards;
    -moz-animation: fadeInLeft 0.9s ease-in-out forwards;
    animation: fadeInLeft 0.9s ease-in-out forwards;
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-delay: 0.4s;
    animation-delay: 0.4s; } }

/* =============================================
- FEATURE
================================================ */
@media screen and (min-width: 980px) {
  #feature .boxWrap .leftArea, #feature .boxWrap .rightArea {
    opacity: 0; }
  #feature .boxWrap.anime .leftArea {
    -webkit-animation: fadeIn 1s ease-in-out forwards;
    -moz-animation: fadeIn 1s ease-in-out forwards;
    animation: fadeIn 1s ease-in-out forwards;
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    animation-fill-mode: both; }
  #feature .boxWrap.anime:nth-child(odd) .rightArea {
    -webkit-animation: fadeInRight 1s ease-in-out forwards;
    -moz-animation: fadeInRight 1s ease-in-out forwards;
    animation: fadeInRight 1s ease-in-out forwards;
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    animation-fill-mode: both; }
  #feature .boxWrap.anime:nth-child(even) .rightArea {
    -webkit-animation: fadeInLeft 1s ease-in-out forwards;
    -moz-animation: fadeInLeft 1s ease-in-out forwards;
    animation: fadeInLeft 1s ease-in-out forwards;
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    animation-fill-mode: both; }
  #feature .boxWrap.line_position.anime .leftArea {
    -webkit-animation-delay: 0.5s;
    animation-delay: 0.5s; }
  #feature .boxWrap.line_position.anime:nth-child(odd) .rightArea {
    -webkit-animation-delay: 1.0s;
    animation-delay: 1.0s; }
  #feature .boxWrap.line_position.anime:nth-child(even) .rightArea {
    -webkit-animation-delay: 1.0s;
    animation-delay: 1.0s; }
  #feature .boxWrap:nth-child(3).anime .leftArea {
    -webkit-animation-delay: 1.0s;
    animation-delay: 1.0s; }
  #feature .boxWrap:nth-child(3).anime:nth-child(odd) .rightArea {
    -webkit-animation-delay: 1.5s;
    animation-delay: 1.5s; }
  #feature .boxWrap:nth-child(3).anime:nth-child(even) .rightArea {
    -webkit-animation-delay: 1.5s;
    animation-delay: 1.5s; } }

/* =============================================
- Product
================================================ */
@media screen and (min-width: 980px) {
  #product_archives .colLayout06 .leftArea {
    opacity: 0; }
  #product_archives .colLayout06 .rightArea .img {
    opacity: 0; }
  #product_archives .colLayout06 .rightArea:before {
    opacity: 0; }
  #product_archives .colLayout06.anime .rightArea .img {
    -webkit-animation: fadeUp 0.6s ease-in-out forwards;
    -moz-animation: fadeUp 0.6s ease-in-out forwards;
    animation: fadeUp 0.6s ease-in-out forwards;
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-delay: 0.5s;
    animation-delay: 0.5s; }
  #product_archives .colLayout06.anime .rightArea:before {
    -webkit-animation: fadeUp 0.6s ease-in-out forwards;
    -moz-animation: fadeUp 0.6s ease-in-out forwards;
    animation: fadeUp 0.6s ease-in-out forwards;
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-delay: 1.0s;
    animation-delay: 1.0s; }
  #product_archives .colLayout06.anime .leftArea {
    -webkit-animation: fadeIn 0.8s ease-in-out forwards;
    -moz-animation: fadeIn 0.8s ease-in-out forwards;
    animation: fadeIn 0.8s ease-in-out forwards;
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    animation-fill-mode: both; }
  #product_archives .boxLayout06 .box {
    opacity: 0; }
    #product_archives .boxLayout06 .box.anime {
      -webkit-animation: fadeUp 0.8s ease-in-out forwards;
      -moz-animation: fadeUp 0.8s ease-in-out forwards;
      animation: fadeUp 0.8s ease-in-out forwards;
      -webkit-animation-fill-mode: both;
      -moz-animation-fill-mode: both;
      animation-fill-mode: both; }
      #product_archives .boxLayout06 .box.anime:nth-child(3n+2) {
        -webkit-animation-delay: 0.3s;
        animation-delay: 0.3s; }
      #product_archives .boxLayout06 .box.anime:nth-child(3n) {
        -webkit-animation-delay: 0.6s;
        animation-delay: 0.6s; } }

/* =============================================
- technology
================================================ */
@media screen and (min-width: 980px) {
  #technology .headtextArea .titleArea, #technology .headtextArea .textArea {
    opacity: 0; }
  #technology .headtextArea.anime .titleArea {
    -webkit-animation: fadeIn 1s ease-in-out forwards;
    -moz-animation: fadeIn 1s ease-in-out forwards;
    animation: fadeIn 1s ease-in-out forwards;
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    animation-fill-mode: both; }
  #technology .headtextArea.anime .textArea {
    -webkit-animation: fadeInRight 1s ease-in-out forwards;
    -moz-animation: fadeInRight 1s ease-in-out forwards;
    animation: fadeInRight 1s ease-in-out forwards;
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-delay: 0.6s;
    animation-delay: 0.6s; }
  #technology .LinkArea .box {
    opacity: 0; }
    #technology .LinkArea .box.anime {
      -webkit-animation: fadeUp 0.6s ease-in-out forwards;
      -moz-animation: fadeUp 0.6s ease-in-out forwards;
      animation: fadeUp 0.6s ease-in-out forwards;
      -webkit-animation-fill-mode: both;
      -moz-animation-fill-mode: both;
      animation-fill-mode: both; }
      #technology .LinkArea .box.anime:nth-child(1) {
        -webkit-animation-delay: 0.25s;
        animation-delay: 0.25s; }
      #technology .LinkArea .box.anime:nth-child(2) {
        -webkit-animation-delay: 0.5s;
        animation-delay: 0.5s; }
      #technology .LinkArea .box.anime:nth-child(3) {
        -webkit-animation-delay: 0.75s;
        animation-delay: 0.75s; }
      #technology .LinkArea .box.anime:nth-child(4) {
        -webkit-animation-delay: 1s;
        animation-delay: 1s; }
      #technology .LinkArea .box.anime:nth-child(5) {
        -webkit-animation-delay: 1.25s;
        animation-delay: 1.25s; }
      #technology .LinkArea .box.anime:nth-child(6) {
        -webkit-animation-delay: 1.5s;
        animation-delay: 1.5s; }
      #technology .LinkArea .box.anime:nth-child(7) {
        -webkit-animation-delay: 1.75s;
        animation-delay: 1.75s; }
      #technology .LinkArea .box.anime:nth-child(8) {
        -webkit-animation-delay: 2s;
        animation-delay: 2s; }
      #technology .LinkArea .box.anime:nth-child(9) {
        -webkit-animation-delay: 2.25s;
        animation-delay: 2.25s; }
      #technology .LinkArea .box.anime:nth-child(10) {
        -webkit-animation-delay: 2.5s;
        animation-delay: 2.5s; } }

/* =============================================
- recruit
================================================ */
#recruitVisual {
  opacity: 0;
  -webkit-transition: all 1.5s ease-in-out 0s;
  -moz-transition: all 1.5s ease-in-out 0s;
  -ms-transition: all 1.5s ease-in-out 0s;
  -o-transition: all 1.5s ease-in-out 0s;
  transition: all 1.5s ease-in-out 0s; }
  #recruitVisual .textBox .midashi {
    opacity: 0; }
  #recruitVisual .textBox .textArea {
    opacity: 0; }

.onload #recruitVisual {
  opacity: 1; }
  .onload #recruitVisual:before {
    -webkit-animation: background 2s ease-in-out forwards;
    -moz-animation: background 2s ease-in-out forwards;
    animation: background 2s ease-in-out forwards;
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-delay: 0.6s;
    animation-delay: 0.6s; }
  .onload #recruitVisual .textBox .midashi {
    -webkit-animation: fadeUp3 1s ease-in-out forwards;
    -moz-animation: fadeUp3 1s ease-in-out forwards;
    animation: fadeUp3 1s ease-in-out forwards;
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-delay: 2.0s;
    animation-delay: 2.0s; }
  .onload #recruitVisual .textBox .textArea {
    -webkit-animation: fadeIn 1s ease-in-out forwards;
    -moz-animation: fadeIn 1s ease-in-out forwards;
    animation: fadeIn 1s ease-in-out forwards;
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-delay: 2.6s;
    animation-delay: 2.6s; }

.titleStyle07 {
  opacity: 0; }
  .titleStyle07.anime {
    -webkit-animation: fadeUp 1s ease-in-out forwards;
    -moz-animation: fadeUp 1s ease-in-out forwards;
    animation: fadeUp 1s ease-in-out forwards;
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    animation-fill-mode: both; }

#recruit_movie .movie {
  opacity: 0; }
  #recruit_movie .movie.anime {
    -webkit-animation: fadeIn 1s ease-in-out forwards;
    -moz-animation: fadeIn 1s ease-in-out forwards;
    animation: fadeIn 1s ease-in-out forwards;
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    animation-fill-mode: both; }

#recruit_about .boxWrap:not(.reverse) .img {
  -webkit-transform: translate(100px, 100px);
  -ms-transform: translate(100px, 100px);
  transform: translate(100px, 100px);
  opacity: 0; }

#recruit_about .boxWrap:not(.reverse) .textBox {
  -webkit-transform: translate(-140px, 80px);
  -ms-transform: translate(-140px, 80px);
  transform: translate(-140px, 80px);
  opacity: 0; }
  #recruit_about .boxWrap:not(.reverse) .textBox .inbox {
    opacity: 0; }

#recruit_about .boxWrap.reverse .img {
  -webkit-transform: translate(-140px, 80px);
  -ms-transform: translate(-140px, 80px);
  transform: translate(-140px, 80px);
  opacity: 0; }

#recruit_about .boxWrap.reverse .textBox {
  -webkit-transform: translate(100px, 100px);
  -ms-transform: translate(100px, 100px);
  transform: translate(100px, 100px);
  opacity: 0; }
  #recruit_about .boxWrap.reverse .textBox .inbox {
    opacity: 0; }

#recruit_about .boxWrap.anime:not(.reverse) .img {
  -webkit-animation: Recruit_left 0.7s ease-in-out forwards;
  -moz-animation: Recruit_left 0.7s ease-in-out forwards;
  animation: Recruit_left 0.7s ease-in-out forwards;
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  animation-fill-mode: both; }

#recruit_about .boxWrap.anime:not(.reverse) .textBox {
  -webkit-animation: Recruit_right 0.7s ease-in-out forwards;
  -moz-animation: Recruit_right 0.7s ease-in-out forwards;
  animation: Recruit_right 0.7s ease-in-out forwards;
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-delay: 0.4s;
  animation-delay: 0.4s; }
  #recruit_about .boxWrap.anime:not(.reverse) .textBox .inbox {
    -webkit-animation: fadeIn 0.5s ease-in-out forwards;
    -moz-animation: fadeIn 0.5s ease-in-out forwards;
    animation: fadeIn 0.5s ease-in-out forwards;
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-delay: 0.8s;
    animation-delay: 0.8s; }

#recruit_about .boxWrap.anime.reverse .img {
  -webkit-animation: Recruit_right 0.7s ease-in-out forwards;
  -moz-animation: Recruit_right 0.7s ease-in-out forwards;
  animation: Recruit_right 0.7s ease-in-out forwards;
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  animation-fill-mode: both; }

#recruit_about .boxWrap.anime.reverse .textBox {
  -webkit-animation: Recruit_left 0.7s ease-in-out forwards;
  -moz-animation: Recruit_left 0.7s ease-in-out forwards;
  animation: Recruit_left 0.7s ease-in-out forwards;
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-delay: 0.4s;
  animation-delay: 0.4s; }
  #recruit_about .boxWrap.anime.reverse .textBox .inbox {
    -webkit-animation: fadeIn 0.5s ease-in-out forwards;
    -moz-animation: fadeIn 0.5s ease-in-out forwards;
    animation: fadeIn 0.5s ease-in-out forwards;
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-delay: 0.8s;
    animation-delay: 0.8s; }