@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.96); }
  100% { transform: scale(1); }
}

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

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

@keyframes slide_out_x {
  0% { transform: translateX(0); opacity: 1; }
  100% { transform: translateX(1.6rem); opacity: 0; }
}

@keyframes slide_in_y {
  0% { transform: translateY(1.6rem); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

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

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

@keyframes clip_in_x {
  0% { clip-path: inset(0 100% 0 0); }
  100% { clip-path: inset(0); }
}

@keyframes clip_in_x_center {
  0% { clip-path: inset(0 100% 0 100%); }
  100% { clip-path: inset(0); }
}

@keyframes clip_in_y {
  0% { clip-path: inset(0 0 100% 0); }
  100% { clip-path: inset(0); }
}

@keyframes clip_in_y_center {
  0% { clip-path: inset(100% 0 100% 0); }
  100% { clip-path: inset(0); }
}

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

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

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

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

@keyframes arrow_triangle_in_x_to_right {
  0% { transform: translateX(-0.8rem); opacity: 0; }
  100% { transform: translateX(0); opacity: 1; }
}

@keyframes arrow_triangle_in_x_to_left {
  0% { transform: translateX(0.8rem); opacity: 0; }
  100% { transform: translateX(0); opacity: 1; }
}

@keyframes arrow_triangle_in_y_to_up {
  0% { transform: translateY(0.8rem); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

@keyframes arrow_triangle_in_y_to_down {
  0% { transform: translateY(-0.8rem); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}


/*============================================================
  motion
============================================================*/
.motion-in-clip-x {
  clip-path: inset(0 100% 0 0);
  overflow: hidden;
}

.motion-in-clip-x.active {
  animation: clip_in_x 0.8s cubic-bezier(0.83, 0, 0.17, 1) both;
}

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

.motion-in-clip-x-center.active {
  animation: clip_in_x_center 0.8s cubic-bezier(0.83, 0, 0.17, 1) both;
}

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

.motion-in-clip-y.active {
  animation: clip_in_y 0.8s cubic-bezier(0.83, 0, 0.17, 1) both;
}

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

.motion-in-clip-y-center.active {
  animation: clip_in_y_center 0.8s cubic-bezier(0.83, 0, 0.17, 1) both;
}

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

.motion-in-blur.active {
  animation: fade_in 0.4s cubic-bezier(0.83, 0, 0.17, 1) both, blur_in 0.8s cubic-bezier(0.83, 0, 0.17, 1) both;
}

.motion-in-fade {
  opacity: 0;
}

.motion-in-fade.active {
  animation: fade_in 0.8s cubic-bezier(0.83, 0, 0.17, 1) both;
}

.motion-in-fade-scale {
  opacity: 0;
  transform: scale(0.96);
}

.motion-in-fade-scale.active {
  animation: fade_in 0.8s cubic-bezier(0.83, 0, 0.17, 1) both, scale_up 0.8s cubic-bezier(0.83, 0, 0.17, 1) both;
}

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

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

.motion-in-trace-x.active::before {
  animation: trace_in_x 0.8s cubic-bezier(0.83, 0, 0.17, 1) both;
}

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

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

.motion-in-trace-y.active::before {
  animation: trace_in_y 0.8s cubic-bezier(0.83, 0, 0.17, 1) both;
}


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

  .btn-link:hover .icon {
    transform: translateX(16%);
  }

  .text-link {
    transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  }

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


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

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


/*============================================================
  module-slide
============================================================*/
@keyframes slide_out {
  0% { width: 100%; }
  100% { width: 0; }
}

.module-slide .group-slide-body .list-slide > li.out {
  animation: slide_out 0.8s cubic-bezier(0.83, 0, 0.17, 1) both;
}
/*
@keyframes slide_item_out_next {
  0% { transform: translateX(0); }
  100% { transform: translateX(16%); }
}

.module-slide .group-slide-body .list-slide > li.out.next .group-slide-item {
  animation: slide_item_out_next 0.8s cubic-bezier(0.65, 0, 0.35, 1) both;
}

@keyframes slide_item_out_prev {
  0% { transform: translateX(0); }
  100% { transform: translateX(-16%); }
}

.module-slide .group-slide-body .list-slide > li.out.prev .group-slide-item {
  animation: slide_item_out_prev 0.8s cubic-bezier(0.65, 0, 0.35, 1) both;
}
*/

/*============================================================
  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-popup {
  animation: scale_up 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}

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


/*============================================================
  loading
============================================================*/
body {
  overflow: hidden;
}

body.active {
  overflow: auto;
}

body:not(#front) {
  opacity: 0;
}

body.active:not(#front) {
  animation: fade_in 0.8s cubic-bezier(0.83, 0, 0.17, 1) both;
}

body.active #loading {
  animation: loading_out 0.4s cubic-bezier(0.22, 1, 0.36, 1) 1.6s both;
}

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

body.active #loading .loader {
  display: none;
}

#loading .text-catch {
  opacity: 0;
}

body.active #loading .text-catch {
  opacity: 1;
}

body.active #loading .text-catch > span {
  animation: loading_letter_out 2s cubic-bezier(0.83, 0, 0.17, 1) both;
}

@keyframes loading_letter_out {
  0%, 16% { opacity: 1; max-width: 1em; }
  64%, 100% { opacity: 0; max-width: 0; }
}


/*============================================================
  top
============================================================*/
#top.active .curve {
  animation: clip_in_x 0.8s cubic-bezier(0.83, 0, 0.17, 1) 1.2s both;
}

#top.active .group-support .list-support .title {
  animation: clip_in_y 0.8s cubic-bezier(0.83, 0, 0.17, 1) both;
}

#top.active .group-support .list-support > li:nth-of-type(1) .title {
  animation-delay: 0s;
}

#top.active .group-support .list-support > li:nth-of-type(2) .title {
  animation-delay: 0.2s;
}

#top.active .group-support .list-support > li:nth-of-type(3) .title {
  animation-delay: 0.4s;
}

#top.active .group-support .list-support > li:nth-of-type(4) .title {
  animation-delay: 0.6s;
}

#top .group-support .list-support .illust {
  opacity: 0;
}

#top.active .group-support .list-support .illust {
  animation: slide_in_x 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
}

#top.active .group-support .list-support > li:nth-of-type(1) .illust {
  animation-delay: 0.2s;
}

#top.active .group-support .list-support > li:nth-of-type(2) .illust {
  animation-delay: 0.4s;
}

#top.active .group-support .list-support > li:nth-of-type(3) .illust {
  animation-delay: 0.6s;
}

#top.active .group-support .list-support > li:nth-of-type(4) .illust {
  animation-delay: 0.8s;
}

#top .group-support .list-support .arrow .line {
  stroke-dasharray: 64;
  stroke-dashoffset: 64;
}

#top.active .group-support .list-support .arrow .line {
  animation: arrow_line_stroke_in 0.8s cubic-bezier(0.83, 0, 0.17, 1) 1.2s both;
}

#top .group-support .list-support .arrow .triangle {
  opacity: 0;
}

#top.active .group-support .list-support .arrow .triangle {
  animation: arrow_triangle_in_x_to_right 0.6s cubic-bezier(0.83, 0, 0.17, 1) 1.4s both;
}

#top.active .group-catch .text-catch-fsto,
#top.active .group-catch .text-catch-message {
  animation: clip_in_x 0.8s cubic-bezier(0.83, 0, 0.17, 1) 1.2s both;
}


/*============================================================
  message
============================================================*/
#message .group-text.active .text-message {
  animation: clip_in_x 0.8s cubic-bezier(0.83, 0, 0.17, 1) both;
}

#message .group-image.active .group-eye .group-item {
  animation: fade_out 0.8s cubic-bezier(0.83, 0, 0.17, 1) 1.2s both, slide_out_y 0.8s cubic-bezier(0.83, 0, 0.17, 1) 1.2s both;
}

#message .group-image .group-word .group-item {
  opacity: 0;
}

@keyframes message_word_in_out {
  0% { transform: translateY(1.6rem); opacity: 0; }
  5%, 30% { transform: translateY(0); opacity: 1; }
  35%, 100% { transform: translateY(-1.6rem); opacity: 0; }
}

#message .group-image.active .group-word .group-item {
  animation: message_word_in_out 4.8s cubic-bezier(0.83, 0, 0.17, 1) 0.4s infinite;
}

#message .group-image.active .group-word .group-item:nth-of-type(1) {
  animation-delay: 1.6s;
}

#message .group-image.active .group-word .group-item:nth-of-type(2) {
  animation-delay: 3.2s;
}

#message .group-image.active .group-word .group-item:nth-of-type(3) {
  animation-delay: 4.8s;
}


/*============================================================
  taigi
============================================================*/
#taigi .group-image.active .figure-taigi .dl-taigi > dt {
  animation: fade_in 0.8s cubic-bezier(0.83, 0, 0.17, 1) both, scale_up 0.8s cubic-bezier(0.83, 0, 0.17, 1) both;
}

#taigi .group-image.active .figure-taigi .dl-taigi > dd {
  animation: fade_in 0.8s cubic-bezier(0.83, 0, 0.17, 1) 0.4s both;
}

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

#taigi .group-image .figure-taigi .ring {
  stroke-dasharray: 2480;
  stroke-dashoffset: 2480;
}

#taigi .group-image.active .figure-taigi .ring {
  animation: taigi_ring_stroke_in 0.8s cubic-bezier(0.83, 0, 0.17, 1) 0.8s both;
}

#taigi .group-image.active .figure-taigi .illust-1 {
  animation: fade_in 0.8s cubic-bezier(0.83, 0, 0.17, 1) both, scale_up 0.8s cubic-bezier(0.83, 0, 0.17, 1) both;
}

@keyframes taigi_illust2_stroke_in_to_right_bottom {
  0% { transform: translate(-0.48rem, -0.8rem); opacity: 0; }
  100% { transform: translate(0, 0); opacity: 1; }
}

@keyframes taigi_illust2_stroke_in_to_left_bottom {
  0% { transform: translate(0.48rem, -0.8rem); opacity: 0; }
  100% { transform: translate(0, 0); opacity: 1; }
}

#taigi .group-image.active .figure-taigi .illust-2 {
  animation: taigi_illust2_stroke_in_to_right_bottom 1.6s cubic-bezier(0.22, 1, 0.36, 1) 1.4s both;
}

@media (max-width: 768px) and (orientation: portrait) {
  #taigi .group-image.active .figure-taigi .illust-2 {
    animation-name: taigi_illust2_stroke_in_to_left_bottom;
  }
}

#taigi .group-image .figure-taigi .dl-taigi > dd .arrow .line {
  stroke-dasharray: 64;
  stroke-dashoffset: 64;
}

#taigi .group-image.active .figure-taigi .dl-taigi > dd .arrow .line {
  animation: arrow_line_stroke_in 0.8s cubic-bezier(0.83, 0, 0.17, 1) 0.8s both;
}

#taigi .group-image .figure-taigi .dl-taigi > dd .arrow .triangle {
  opacity: 0;
}

#taigi .group-image.active .figure-taigi .dl-taigi > dd .arrow .triangle {
  animation: arrow_triangle_in_x_to_right 0.6s cubic-bezier(0.83, 0, 0.17, 1) 1s both;
}


/*============================================================
  style
============================================================*/
#style .group-image.active .group-strategy .illust-1 {
  animation: fade_in 0.8s cubic-bezier(0.83, 0, 0.17, 1) both, scale_up 0.8s cubic-bezier(0.83, 0, 0.17, 1) both;
}

#style .group-image.active .group-strategy .dl-style {
  animation: clip_in_x 0.8s cubic-bezier(0.83, 0, 0.17, 1) 0.4s both;
}

#style .group-image.active .group-operations .illust-2 {
  animation: fade_in 0.8s cubic-bezier(0.83, 0, 0.17, 1) both, scale_up 0.8s cubic-bezier(0.83, 0, 0.17, 1) both;
}

#style .group-image.active .group-operations .dl-style {
  animation: clip_in_x 0.8s cubic-bezier(0.83, 0, 0.17, 1) 0.4s both;
}

#style .group-image.active .multiply {
  animation: fade_in 0.8s cubic-bezier(0.83, 0, 0.17, 1) 0.4s both, scale_up 0.8s cubic-bezier(0.83, 0, 0.17, 1) 0.4s both;
}

#style .group-image .arrow .line {
  stroke-dasharray: 64;
  stroke-dashoffset: 64;
}

#style .group-image.active .arrow .line {
  animation: arrow_line_stroke_in 0.8s cubic-bezier(0.83, 0, 0.17, 1) 0.4s both;
}

#style .group-image .arrow .triangle {
  opacity: 0;
}

#style .group-image.active .arrow .triangle {
  animation: arrow_triangle_in_x_to_right 0.6s cubic-bezier(0.83, 0, 0.17, 1) 0.6s both;
}

#style .group-image.active .result {
  animation: fade_in 0.8s cubic-bezier(0.83, 0, 0.17, 1) 0.8s both, scale_up 0.8s cubic-bezier(0.83, 0, 0.17, 1) 0.4s both;
}


/*============================================================
  service
============================================================*/
#service .list-step > li.active .group-text {
  animation: clip_in_x 0.8s cubic-bezier(0.83, 0, 0.17, 1) both;
}

#service .list-step > li.step1.active .group-image.active .figure-service-flow .illust-1 {
  animation: fade_in 0.8s cubic-bezier(0.83, 0, 0.17, 1) both, scale_up 0.8s cubic-bezier(0.83, 0, 0.17, 1) both;
}

#service .list-step > li.step1.active .group-image.active .figure-service-flow .illust-2 {
  animation: fade_in 0.8s cubic-bezier(0.83, 0, 0.17, 1) 0.4s both, scale_up 0.8s cubic-bezier(0.83, 0, 0.17, 1) 0.4s both;
}

@keyframes service_step1_arrow1_line_stroke_in {
  0% { stroke-dashoffset: 400; }
  100% { stroke-dashoffset: 0; }
}

#service .list-step > li.step1 .group-image .figure-service-flow .figure-service-flow .arrow-1 .line {
  stroke-dasharray: 400;
  stroke-dashoffset: 400;
}

#service .list-step > li.step1.active .group-image.active .figure-service-flow .arrow-1 .line {
  animation: service_step1_arrow1_line_stroke_in 0.8s cubic-bezier(0.83, 0, 0.17, 1) 0.2s both;
}

#service .list-step > li.step1 .group-image .figure-service-flow .arrow-1 .triangle {
  opacity: 0;
}

#service .list-step > li.step1.active .group-image.active .figure-service-flow .arrow-1 .triangle-1 {
  animation: arrow_triangle_in_x_to_left 0.6s cubic-bezier(0.83, 0, 0.17, 1) 0.4s both;
}

#service .list-step > li.step1.active .group-image.active .figure-service-flow .arrow-1 .triangle-2 {
  animation: arrow_triangle_in_x_to_right 0.6s cubic-bezier(0.83, 0, 0.17, 1) 0.4s both;
}

@keyframes service_step1_arrow2_line_stroke_in {
  0% { stroke-dashoffset: 80; }
  100% { stroke-dashoffset: 0; }
}

#service .list-step > li.step1 .group-image .figure-service-flow .arrow-2 .line {
  stroke-dasharray: 80;
  stroke-dashoffset: 80;
}

#service .list-step > li.step1.active .group-image.active .figure-service-flow .arrow-2 .line {
  animation: service_step1_arrow2_line_stroke_in 0.8s cubic-bezier(0.83, 0, 0.17, 1) 0.2s both;
}

#service .list-step > li.step1 .group-image .figure-service-flow .arrow-2 .triangle {
  opacity: 0;
}

#service .list-step > li.step1.active .group-image.active .figure-service-flow .arrow-2 .triangle {
  animation: arrow_triangle_in_y_to_down 0.6s cubic-bezier(0.83, 0, 0.17, 1) 0.4s both;
}

#service .list-step > li.step1.active .group-image.active .figure-service-flow .dl-flow {
  animation: fade_in 0.8s cubic-bezier(0.83, 0, 0.17, 1) 0.4s both;
}

#service .list-step > li.step1.active .group-image.active .figure-service-flow .text-outcome {
  animation: fade_in 0.8s cubic-bezier(0.83, 0, 0.17, 1) 0.4s both, scale_up 0.8s cubic-bezier(0.83, 0, 0.17, 1) 0.4s both;
}

#service .list-step > li.step2.active .group-image.active .figure-service-flow .arrow {
  animation: clip_in_x 0.8s cubic-bezier(0.83, 0, 0.17, 1) both;
}

@keyframes service_step2_arrow_line_stroke_in {
  0% { stroke-dashoffset: 860; }
  100% { stroke-dashoffset: 0; }
}

#service .list-step > li.step2 .group-image .figure-service-flow .arrow .line {
  stroke-dasharray: 860;
  stroke-dashoffset: 860;
}

#service .list-step > li.step2.active .group-image.active .figure-service-flow .arrow .line {
  animation: service_step2_arrow_line_stroke_in 0.8s cubic-bezier(0.83, 0, 0.17, 1) 0.2s both;
}

#service .list-step > li.step2 .group-image .figure-service-flow .arrow .triangle {
  opacity: 0;
}

#service .list-step > li.step2.active .group-image.active .figure-service-flow .arrow .triangle {
  animation: arrow_triangle_in_x_to_right 0.6s cubic-bezier(0.83, 0, 0.17, 1) 0.4s both;
}

#service .list-step > li.step2.active .group-image.active .figure-service-flow .illust-1,
#service .list-step > li.step2.active .group-image.active .figure-service-flow .illust-2,
#service .list-step > li.step2.active .group-image.active .figure-service-flow .illust-3 {
  animation: fade_in 0.8s cubic-bezier(0.83, 0, 0.17, 1) both, scale_up 0.8s cubic-bezier(0.83, 0, 0.17, 1) both;
}

#service .list-step > li.step2.active .group-image.active .figure-service-flow .list-flow > li {
  animation: fade_in 0.8s cubic-bezier(0.83, 0, 0.17, 1) 0.6s both;
}

@keyframes service_step3_arrow_line_stroke_in {
  0% { stroke-dashoffset: 800; }
  100% { stroke-dashoffset: 0; }
}

#service .list-step > li.step3 .group-image .figure-service-flow .arrow .line {
  stroke-dasharray: 800;
  stroke-dashoffset: 800;
}

#service .list-step > li.step3.active .group-image.active .figure-service-flow .arrow .line {
  animation: service_step3_arrow_line_stroke_in 0.8s cubic-bezier(0.83, 0, 0.17, 1) 0.6s both;
}

#service .list-step > li.step3 .group-image .figure-service-flow .arrow .triangle {
  opacity: 0;
}

#service .list-step > li.step3.active .group-image.active .figure-service-flow .arrow-1 .triangle,
#service .list-step > li.step3.active .group-image.active .figure-service-flow .arrow-3 .triangle {
  animation: arrow_triangle_in_x_to_right 0.6s cubic-bezier(0.83, 0, 0.17, 1) 0.8s both;
}

#service .list-step > li.step3.active .group-image.active .figure-service-flow .arrow-2 .triangle {
  animation: arrow_triangle_in_x_to_left 0.6s cubic-bezier(0.83, 0, 0.17, 1) 0.8s both;
}

#service .list-step > li.step3.active .group-image.active .figure-service-flow .illust-1,
#service .list-step > li.step3.active .group-image.active .figure-service-flow .illust-2,
#service .list-step > li.step3.active .group-image.active .figure-service-flow .illust-3 {
  animation: fade_in 0.8s cubic-bezier(0.83, 0, 0.17, 1) both, scale_up 0.8s cubic-bezier(0.83, 0, 0.17, 1) both;
}

#service .list-step > li.step3.active .group-image.active .figure-service-flow .illust-2 {
  animation-delay: 0.4s;
}

#service .list-step > li.step3.active .group-image.active .figure-service-flow .illust-3 {
  animation-delay: 0.4s;
}

#service .list-step > li.step3.active .group-image.active .figure-service-flow .list-flow > li {
  animation: fade_in 0.8s cubic-bezier(0.83, 0, 0.17, 1) 0.6s both;
}


/*============================================================
  contact
============================================================*/
#contact {
  opacity: 0;
}

#contact.active {
  animation: fade_in 0.4s cubic-bezier(0.83, 0, 0.17, 1) both, blur_in 0.8s cubic-bezier(0.83, 0, 0.17, 1) both;
}


/*============================================================
  company
============================================================*/
#company .group-profile.active .dl-profile > dt,
#company .group-profile.active .dl-profile > dd {
  animation: clip_in_x 0.8s cubic-bezier(0.83, 0, 0.17, 1) both;
}


/*============================================================
  person
============================================================*/
#person .section-person.active .photo {
  animation: fade_in 0.8s cubic-bezier(0.83, 0, 0.17, 1) both, blur_in 0.8s cubic-bezier(0.83, 0, 0.17, 1) both;
}

#person .section-person.active .dl-profile {
  animation: clip_in_x 0.8s cubic-bezier(0.83, 0, 0.17, 1) both;
}

#person .section-person.active .text-career {
  animation: clip_in_x 0.8s cubic-bezier(0.83, 0, 0.17, 1) both;
}