@charset "UTF-8";

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

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

@keyframes scale_up {
  0% { transform: scale(0.8); }
  100% { transform: scale(1); }
}

@keyframes scale_down {
  0% { transform: scale(1); }
  100% { transform: scale(0.8); }
}

@keyframes slide_in {
  0% { transform: translateX(-1.6rem); }
  100% { transform: translateX(0); }
}

@keyframes slide_out {
  0% { transform: translateX(0); }
  100% { transform: translateX(1.6rem); }
}

@keyframes slide_up {
  0% { transform: translateY(1.6rem); }
  100% { transform: translateY(0); }
}

@keyframes slide_down {
  0% { transform: translateY(0); }
  100% { transform: translateY(-1.6rem); }
}

@keyframes rotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}


/*============================================================
  hover
============================================================*/
@media (hover: hover) {
  .btn-link,
  .btn-link .icon,
  .btn-link::before {
    transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .btn-play,
  .btn-play .icon,
  .btn-play::before {
    transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .heading-section a strong::after {
    transition: width 0.2s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .module-slide .group-slide-indicator button {
    transition: all 0.4s cubic-bezier(0.76, 0, 0.24, 1);
  }
}


/*============================================================
  header
============================================================*/
#header {
  transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

#header .title-site .logo {
  transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

#header .link-contact .icon {
  transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

#header .btn-menu::before,
#header .btn-menu::after {
  transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}


/*============================================================
  module-slide
============================================================*/
.module-slide .list-slide > li.in.prev {
  animation: slide_in_prev 0.8s cubic-bezier(0.76, 0, 0.24, 1) both;
}

@keyframes slide_in_prev {
  0% { opacity: 0; transform: translateX(-10%); }
  100% { opacity: 1; transform: translateX(0); }
}

.module-slide .list-slide > li.out.prev {
  animation: slide_out_prev 0.8s cubic-bezier(0.76, 0, 0.24, 1) both;
}

@keyframes slide_out_prev {
  0% { opacity: 1; transform: translateX(0); }
  100% { opacity: 0; transform: translateX(10%); }
}

.module-slide .list-slide > li.in.next {
  animation: slide_in_next 0.8s cubic-bezier(0.76, 0, 0.24, 1) both;
}

@keyframes slide_in_next {
  0% { opacity: 0; transform: translateX(10%); }
  100% { opacity: 1; transform: translateX(0); }
}

.module-slide .list-slide > li.out.next {
  animation: slide_out_next 0.8s cubic-bezier(0.76, 0, 0.24, 1) both;
}

@keyframes slide_out_next {
  0% { opacity: 1; transform: translateX(0); }
  100% { opacity: 0; transform: translateX(-10%); }
}

.module-slide .list-slide > li.return.prev {
  animation: slide_return_prev 0.8s cubic-bezier(0.76, 0, 0.24, 1) both;
}

@keyframes slide_return_prev {
  0% { transform: translateX(0); }
  50% { transform: translateX(4%); }
  100% { transform: translateX(0); }
}

.module-slide .list-slide > li.return.next {
  animation: slide_return_next 0.8s cubic-bezier(0.76, 0, 0.24, 1) both;
}

@keyframes slide_return_next {
  0% { transform: translateX(0); }
  50% { transform: translateX(-4%); }
  100% { transform: translateX(0); }
}


/*============================================================
  module-popup
============================================================*/
@keyframes popup_in {
  0% { opacity: 0; left: -100%; }
  1% { opacity: 0; left: 0; }
  100% { opacity: 1; left: 0; }
}

@keyframes popup_out {
  0% { opacity: 1; left: 0; }
  99% { opacity: 0; left: 0; }
  100% { opacity: 0; left: -100%; }
}

.module-popup.in {
  animation: popup_in 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.module-popup.out {
  animation: popup_out 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.module-popup.in .group-profile {
  animation: slide_in 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.module-popup.out .group-profile {
  animation: slide_out 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}


/*============================================================
  motion
============================================================*/
@keyframes clip_in {
  0% { clip-path: inset(0 100% 0 0); }
  100% { clip-path: inset(0); }
}

@keyframes blur_in {
  0% { filter: blur(8rem); }
  100% { filter: blur(0); }
}

@keyframes trace_in {
  0% { transform: translateX(-101%); }
  40%, 60% { transform: translateX(0); }
  100% { transform: translateX(101%); }
}

.motion-clip {
  clip-path: inset(0 100% 0 0);
  overflow: hidden;
}

.motion-blur {
  filter: blur(8rem);
}

.motion-fade {
  opacity: 0;
}

.motion-trace {
  position: relative;
  z-index: 0;
}

.motion-trace::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background-color: #111;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  transform: translateX(-101%);
}


/*============================================================
  section
============================================================*/
section.section  {
  opacity: 0;
}

section.section.active {
  animation: fade_in 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
}


/*============================================================
  top
============================================================*/
#top.active .group-catch .motion-clip {
  animation: clip_in 0.8s cubic-bezier(0.76, 0, 0.24, 1) both;
}

#top.active .group-catch .motion-trace::before {
  animation: trace_in 0.8s cubic-bezier(0.76, 0, 0.24, 1) both;
}

#top.active .group-catch .text-catch .text-lw .motion-clip:nth-of-type(1),
#top.active .group-catch .text-catch .text-lw .motion-clip:nth-of-type(1)::before {
  animation-delay: 0;
}

#top.active .group-catch .text-catch .text-lw .motion-clip:nth-of-type(2),
#top.active .group-catch .text-catch .text-lw .motion-clip:nth-of-type(2)::before {
  animation-delay: 0.1s;
}

#top.active .group-catch .text-catch .text-lw .motion-clip:nth-of-type(3),
#top.active .group-catch .text-catch .text-lw .motion-clip:nth-of-type(3)::before {
  animation-delay: 0.2s;
}

#top.active .group-catch .text-catch .text-lw .motion-clip:nth-of-type(4),
#top.active .group-catch .text-catch .text-lw .motion-clip:nth-of-type(4)::before {
  animation-delay: 0.3s;
}

#top.active .group-catch .text-catch .text-lw .motion-clip:nth-of-type(5),
#top.active .group-catch .text-catch .text-lw .motion-clip:nth-of-type(5)::before {
  animation-delay: 0.4s;
}

#top.active .group-catch .text-catch .text-sw .motion-clip:nth-of-type(1),
#top.active .group-catch .text-catch .text-sw .motion-clip:nth-of-type(1)::before {
  animation-delay: 0;
}

#top.active .group-catch .text-catch .text-sw .motion-clip:nth-of-type(2),
#top.active .group-catch .text-catch .text-sw .motion-clip:nth-of-type(2)::before {
  animation-delay: 0.08s;
}

#top.active .group-catch .text-catch .text-sw .motion-clip:nth-of-type(3),
#top.active .group-catch .text-catch .text-sw .motion-clip:nth-of-type(3)::before {
  animation-delay: 0.16s;
}

#top.active .group-catch .text-catch .text-sw .motion-clip:nth-of-type(4),
#top.active .group-catch .text-catch .text-sw .motion-clip:nth-of-type(4)::before {
  animation-delay: 0.24s;
}

#top.active .group-catch .text-catch .text-sw .motion-clip:nth-of-type(5),
#top.active .group-catch .text-catch .text-sw .motion-clip:nth-of-type(5)::before {
  animation-delay: 0.28s;
}

#top.active .group-catch .text-catch .text-sw .motion-clip:nth-of-type(6),
#top.active .group-catch .text-catch .text-sw .motion-clip:nth-of-type(6)::before {
  animation-delay: 0.32s;
}

#top.active .group-catch .text-catch .text-sw .motion-clip:nth-of-type(7),
#top.active .group-catch .text-catch .text-sw .motion-clip:nth-of-type(7)::before {
  animation-delay: 0.36s;
}

#top.active .group-catch .text-name {
  animation-delay: 0.4s;
}

#top.active .group-catch .text-keyword {
  animation-delay: 0.6s;
}


/*============================================================
  artwork
============================================================*/
#artwork.active .motion-clip {
  animation: clip_in 0.8s cubic-bezier(0.76, 0, 0.24, 1) both;
}


/*============================================================
  work
============================================================*/
#work .list-work > li.active .motion-clip {
  animation: clip_in 0.8s cubic-bezier(0.76, 0, 0.24, 1) both;
}

#work .list-work > li.active .motion-trace::before {
  animation: trace_in 0.8s cubic-bezier(0.76, 0, 0.24, 1) both;
}

#work .list-work > li.active .group-image .group-image-item-2,
#work .list-work > li.active .group-image .group-image-item-2::before {
  animation-delay: 0.2s;
}

#work .list-work > li.active .group-outline {
  animation-delay: 0.4s;
}


/*============================================================
  message
============================================================*/
#message.active .text-keyword svg.text {
  animation: blur_in 1.6s cubic-bezier(0.76, 0, 0.24, 1) both, fade_in 0.8s cubic-bezier(0.76, 0, 0.24, 1) both;
}

#message .group-message-1.active .motion-clip {
  animation: clip_in 0.8s cubic-bezier(0.76, 0, 0.24, 1) both;
}

#message .group-message-1.active .text-catch-en,
#message .group-message-1.active .text-message {
  animation-delay: 0.2s;
}

#message .group-message-2 .group-point.active .dl-point {
  animation: clip_in 0.8s cubic-bezier(0.76, 0, 0.24, 1) 0.4s both;
}

#message .group-message-2 .group-point.active img.symbol {
  animation: blur_in 0.8s cubic-bezier(0.76, 0, 0.24, 1) both, fade_in 0.8s cubic-bezier(0.76, 0, 0.24, 1) both;
}

#message .group-message-3 .group-outline.active {
  animation: clip_in 0.8s cubic-bezier(0.76, 0, 0.24, 1) 0.4s both;
}


/*============================================================
  mission
============================================================*/
#mission.active .title-section {
  animation: clip_in 0.8s cubic-bezier(0.76, 0, 0.24, 1) both;
}

#mission.active .heading-section .motion-clip {
  animation: clip_in 0.8s cubic-bezier(0.76, 0, 0.24, 1) both;
}

#mission .heading-section .motion-trace {
  display: inline-block;
}

#mission.active .heading-section .motion-trace::before {
  animation: trace_in 0.8s cubic-bezier(0.76, 0, 0.24, 1) both;
}

#mission.active .heading-section a:nth-of-type(2) .motion-clip,
#mission.active .heading-section a:nth-of-type(2) .motion-trace::before {
  animation-delay: 0.2s;
}

#mission .list-mission > li.active .image-mission {
  animation: blur_in 1.6s cubic-bezier(0.76, 0, 0.24, 1) both, fade_in 0.8s cubic-bezier(0.76, 0, 0.24, 1) both;
}

#mission .list-mission > li.active .dl-mission .motion-clip {
  animation: clip_in 0.8s cubic-bezier(0.76, 0, 0.24, 1) 0.8s both;
}

#mission .list-mission > li.active .dl-mission .text-catch {
  animation-delay: 1.0s;
}

#mission #mission-goal.active {
  animation: fade_in 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}

#mission #mission-goal.active .motion-clip {
  animation: clip_in 0.8s cubic-bezier(0.76, 0, 0.24, 1) both;
}

#mission #mission-goal.active .text-body.motion-clip {
  animation-delay: 0.2s;
}

#mission #figure-mission-goal.active {
  animation: fade_in 0.8s cubic-bezier(0.76, 0, 0.24, 1) both;
}


/*============================================================
  service
============================================================*/
#service.active .title-section {
  animation: clip_in 0.8s cubic-bezier(0.76, 0, 0.24, 1) both;
}

#service.active .heading-section .motion-clip {
  animation: clip_in 0.8s cubic-bezier(0.76, 0, 0.24, 1) both;
}

#service .heading-section .motion-trace {
  display: inline-block;
}

#service.active .heading-section .motion-trace::before {
  animation: trace_in 0.8s cubic-bezier(0.76, 0, 0.24, 1) both;
}

#service.active .heading-section a:nth-of-type(2) .motion-clip,
#service.active .heading-section a:nth-of-type(2) .motion-trace::before {
  animation-delay: 0.1s;
}

#service.active .heading-section a:nth-of-type(3) .motion-clip,
#service.active .heading-section a:nth-of-type(3) .motion-trace::before {
  animation-delay: 0.2s;
}

#service.active .heading-section a:nth-of-type(4) .motion-clip,
#service.active .heading-section a:nth-of-type(4) .motion-trace::before {
  animation-delay: 0.3s;
}

#service.active .heading-section a:nth-of-type(5) .motion-clip,
#service.active .heading-section a:nth-of-type(5) .motion-trace::before {
  animation-delay: 0.4s;
}

#service.active .heading-section a:nth-of-type(5) .motion-clip:nth-of-type(2),
#service.active .heading-section a:nth-of-type(5) .motion-trace:nth-of-type(2)::before {
  animation-delay: 0.5s;
}

#service .list-service > li.active .dl-service .motion-clip {
  animation: clip_in 0.8s cubic-bezier(0.76, 0, 0.24, 1) both;
}

#service .list-service > li.active .dl-service .group-text .motion-clip {
  animation-delay: 0.4s;
}

#service #figure-service-step1.active,
#service #figure-service-step2.active,
#service #figure-service-step3.active {
  animation: fade_in 0.8s cubic-bezier(0.76, 0, 0.24, 1) both;
}

#service .group-example.active {
  animation: fade_in 0.8s cubic-bezier(0.76, 0, 0.24, 1) both;
}

#service .group-example.active .list-example-1 .motion-clip {
  animation: clip_in 0.8s cubic-bezier(0.76, 0, 0.24, 1) both;
}

#service .group-example.active .list-example-1 .motion-trace::before {
  animation: trace_in 0.8s cubic-bezier(0.76, 0, 0.24, 1) both;
}

@keyframes icon_in {
  0% { stroke-dashoffset: 100px; }
  100% { stroke-dashoffset: 0px; }
}

#service .group-example .list-example-2 .image-example svg.icon {
  stroke-dasharray: 100px;
  stroke-dashoffset: 100px;
}

#service .group-example.active .list-example-2 .image-example svg.icon {
  animation: icon_in 1.6s cubic-bezier(0.76, 0, 0.24, 1) both;
}

#service .group-example.active .list-example-2 .dl-example {
  animation: clip_in 0.8s cubic-bezier(0.76, 0, 0.24, 1) both;
}

#service #service-stance.active {
  animation: fade_in 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}

#service #service-stance.active .motion-clip {
  animation: clip_in 0.8s cubic-bezier(0.76, 0, 0.24, 1) both;
}

#service #service-stance.active .text-body.motion-clip {
  animation-delay: 0.2s;
}

#service #figure-service-stance.active {
  animation: fade_in 0.8s cubic-bezier(0.76, 0, 0.24, 1) both;
}


/*============================================================
  media
============================================================*/
#media.active .title-section {
  animation: clip_in 0.8s cubic-bezier(0.76, 0, 0.24, 1) both;
}

#media.active .heading-section .motion-clip {
  animation: clip_in 0.8s cubic-bezier(0.76, 0, 0.24, 1) both;
}

#media .heading-section .motion-trace {
  display: inline-block;
}

#media .heading-section .motion-trace::before {
  background-color: #fff;
}

#media.active .heading-section .motion-trace::before {
  animation: trace_in 0.8s cubic-bezier(0.76, 0, 0.24, 1) both;
}

#media #media-insidefocus.active .group-video {
  animation: blur_in 0.8s cubic-bezier(0.76, 0, 0.24, 1) both, fade_in 0.8s cubic-bezier(0.76, 0, 0.24, 1) both;
}

#media #media-insidefocus.active .group-text .motion-clip {
  animation: clip_in 0.8s cubic-bezier(0.76, 0, 0.24, 1) both;
}

#media #media-insidefocus.active .group-text .text-body.motion-clip {
  animation-delay: 0.1s;
}

#media .group-media-article.active {
  animation: fade_in 0.8s cubic-bezier(0.76, 0, 0.24, 1) both;
}

#media .group-media-article.active .list-article > li.current .motion-clip {
  animation: clip_in 0.8s cubic-bezier(0.76, 0, 0.24, 1) both;
}

#media .group-media-article.active .list-article > li.current .group-image-item-2,
#media .group-media-article.active .list-article > li.current .group-image-item-3 {
  animation-delay: 0.2s;
}


/*============================================================
  company
============================================================*/
#company.active .title-section {
  animation: clip_in 0.8s cubic-bezier(0.76, 0, 0.24, 1) both;
}

#company.active .heading-section .motion-clip {
  animation: clip_in 0.8s cubic-bezier(0.76, 0, 0.24, 1) both;
}

#company .heading-section .motion-trace {
  display: inline-block;
}

#company.active .heading-section .motion-trace::before {
  animation: trace_in 0.8s cubic-bezier(0.76, 0, 0.24, 1) both;
}

#company #company-insidefocus.active .group-text .motion-clip {
  animation: clip_in 0.8s cubic-bezier(0.76, 0, 0.24, 1) both;
}

#company .group-company-profile.active .motion-clip {
  animation: clip_in 0.8s cubic-bezier(0.76, 0, 0.24, 1) both;
}

#company #company-roots .group-video.active {
  animation: blur_in 0.8s cubic-bezier(0.76, 0, 0.24, 1) both, fade_in 0.8s cubic-bezier(0.76, 0, 0.24, 1) both;
}

#company #company-roots .group-text.active .motion-clip {
  animation: clip_in 0.8s cubic-bezier(0.76, 0, 0.24, 1) both;
}

#company .group-company-member.active .motion-clip {
  animation: clip_in 0.8s cubic-bezier(0.76, 0, 0.24, 1) both;
}

#company .group-company-member.active .motion-trace::before {
  animation: trace_in 0.8s cubic-bezier(0.76, 0, 0.24, 1) both;
}

#company .group-company-member .list-member > li:nth-of-type(2) .motion-clip,
#company .group-company-member .list-member > li:nth-of-type(2) .motion-trace::before {
  animation-delay: 0.1s;
}

#company .group-company-member .list-member > li:nth-of-type(3) .motion-clip,
#company .group-company-member .list-member > li:nth-of-type(3) .motion-trace::before {
  animation-delay: 0.2s;
}