/* 메인 애니메이션 */

.intro-wrap { position: relative; height: 100vh; width: 100%; overflow: hidden; }
.intro-wrap .txt { letter-spacing: -0.64px; }
.intro-1 .circle {  width: 148px; height: 148px; background: #102261; border-radius: 74px; position: absolute; top: 0; left: 50%; transform: translateX(-148px) translateY(-100%); animation: intro1_circle 2s ease; }
.intro-1 .txt { font-size: 52px; color: #fff; position: absolute; top: 50%; left: 50%; transform: translateY(-50%) translateX(-74px); opacity: 0; animation: intro_txt_opacity 2s ease;}

@keyframes intro1_circle {
  25% { width: 148px; transform: translateX(-148px) translateY(-50%); top: 50%; left: 50%; }
  50%, 75% {width: 100%; transform: translateX(-148px) translateY(-50%); top: 50%; left: 50%; }
  100% { left: unset; width: 148px; top: 50%; right: 0; transform: translateX(200%) translateY(-50%); }
}
@keyframes intro_txt_opacity {
  10%, 90% { opacity: 1; }
}

.intro-2 .circle-1 {  width: calc( 100% + 240px ); height: 120px; background: #eb6401; border-radius: 60px; position: absolute; top: 50%; animation: intro2_circle1 3s ease; animation-delay: 2s; left: unset; transform: translateX(100%) translateY( calc(-50% - 120px - 60px)); }
.intro-2 .circle-2 {  width: calc( 100% + 180px ); height: 90px; background: #da3539; border-radius: 45px; position: absolute; top: 50%; animation: intro2_circle2 3s ease; animation-delay: 2.4s; left: unset; transform: translateX(100%) translateY(-50%); }
.intro-2 .circle-3 {  width: calc( 100% + 180px ); height: 90px; background: #da3539; border-radius: 45px; position: absolute; top: 50%; animation: intro2_circle3 3s ease; animation-delay: 2.8s; left: unset; transform: translateX(100%) translateY( calc(-50% + 90px + 30px)); }

.intro-2 .txt { font-size: 52px; color: #fff; position: absolute; top: 50%; left: 50%; width: 100%; text-align: center; opacity: 0;}
.intro-2 .txt-1 { transform: translateX(-50%) translateY( calc(-50% - 120px - 60px)); animation: intro_txt_opacity 3s ease; animation-delay: 2s; }
.intro-2 .txt-2 { transform: translateX(-50%) translateY(-50%); animation: intro_txt_opacity 3s ease; animation-delay: 2.4s; }
.intro-2 .txt-3 { transform: translateX(-50%) translateY( calc(-50% + 90px + 30px)); animation: intro_txt_opacity 3s ease; animation-delay: 2.8s; }

@keyframes intro2_circle1 {
  0% { transform: translateX(100%) translateY( calc(-50% - 120px - 60px)); right: -60px; left: unset;}
  30%, 70% { transform: translateX(0%) translateY( calc(-50% - 120px - 60px)); right: -60px; left: unset; }
  100% { transform: translateX(-100%) translateY( calc(-50% - 120px - 60px)); right: unset; left: -60px; }
}
@keyframes intro2_circle2 {
  0% { transform: translateX(100%) translateY(-50%); right: -45px; left: unset;}
  30%, 70% { transform: translateX(0%) translateY(-50%); right: -45px; left: unset; }
  100% { transform: translateX(-100%) translateY(-50%); right: unset; left: -45px; }
}
@keyframes intro2_circle3 {
  0% { transform: translateX(100%) translateY( calc(-50% + 90px + 30px)); right: -45px; left: unset;}
  30%, 70% { transform: translateX(0%) translateY( calc(-50% + 90px + 30px)); right: -45px; left: unset; }
  100% { transform: translateX(-100%) translateY( calc(-50% + 90px + 30px)); right: unset; left: -45px; }
}

.intro-3 .circle { width: 0; height: 0; border-radius: 50%; background: #f0b902; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); animation: intro3_circle 2s ease; animation-delay: 6s; }
.intro-3 .txt { font-size: 52px; color: #fff; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -60%); opacity: 0; animation: intro_txt_opacity 2s ease; animation-delay: 6s; text-align: center;}
.intro-3 .img-wrap { width: 80vh; height: 80vh; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); }
.intro-3 .img-1 { width: 30vh; position: absolute; left: -13vh; top: 6.5vh; animation: intro3_img1 1.8s ease; animation-delay: 6.2s; opacity: 0;}
.intro-3 .img-2 { width: 5.5vh; position: absolute; left: 12.5vh; top: 0; transform: translateY(-25%); animation: intro3_img_move1 1.8s ease; animation-delay: 6.2s; opacity: 0;}
.intro-3 .img-3{ width: 30vh; position: absolute; right:-18.5vh; top: 21vh; animation: intro3_img2 1.8s ease; animation-delay: 6.2s; opacity: 0;}
.intro-3 .img-4 { width: 11vh; position: absolute; right:-16.5vh; top: 7.5vh; transform: translateY(0%); animation: intro3_img_move2 1.8s ease; animation-delay: 6.2s; opacity: 0}
.intro-3 .img-5 { width: 70vh; position: absolute; left: 50%; bottom: -10vh; transform: translateX(-50%); animation: intro3_img3 1.8s ease; animation-delay: 6.2s; opacity: 0;}

@keyframes intro3_circle {
  10%, 95% { width: 80vh; height: 80vh; }
}

@keyframes intro3_img1 {
  20%, 95% { opacity: 1;}
}
@keyframes intro3_img2 {
  20%, 95% { opacity: 1;}
}
@keyframes intro3_img3 {
  20%, 95% { opacity: 1;}
}

@keyframes intro3_img_move1 {
  20%, 95% { opacity: 1; transform: translateY(-25%);}
  37.5%, 72.5% { transform: translateY(-0%); }
  55% { transform: translateY(-25%); }
}
@keyframes intro3_img_move2 {
  20%, 95% { opacity: 1; transform: translateY(0%);}
  35%, 75% { transform: translateY(-25%); }
  60% { transform: translateY(0%); }
}

.intro-4 .txt { font-size: 40px; color: #000; position: absolute; top: calc( 50% + 42px ); left: 50%; transform: translate(-50%, -50%); text-align: center; z-index: -1; animation: intro4_txt 9.5s ease;}
.intro-4 .logo { width: 240px; position: absolute; top: calc( 50% - 42px ); left: 50%; transform: translate(-50%, -150%); animation: intro4_logo 10.5s ease; }
.intro-4 .circle-wrap { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.loader { display:block; font-size: 10px; width: 4em; height: 4em; border-radius: 50%; position: absolute; top: 50%; left: 50%; text-indent: -9999em; animation: mulShdSpin 1.5s ease;  animation-delay: 8s; transform: translateZ(0); box-shadow: 0em -39em 0em 0em transparent, 27em -27em 0em 0em transparent, 37.5em 0em 0em 0em transparent, 26.25em 26.25em 0em 0em transparent, 0em 37.5em 0em 0em transparent, -27em 27em 0em 0em transparent, -39em 0em 0em 0em transparent, -27em -27em 0em 0em transparent;}

@keyframes intro4_txt {
  0%, 74% { opacity: 0; }
  75%, 100% { opacity: 1; }
}
@keyframes intro4_logo {
  0%, 90% { opacity: 0; }
  95%, 100% { opacity: 1; }
}

@keyframes mulShdSpin {
  12.5% { box-shadow: 0em -39em 0em 0em #f0b902, 27em -27em 0 0em #118c73, 37.5em 0em 0 0em #6f706d, 26.25em 26.25em 0 0em #102163, 0em 37.5em 0 0em #ef6300, -27em 27em 0 0em #de3139, -39em 0em 0 0em #f0b902, -27em -27em 0 0em #118c73;}
  25% { box-shadow: 0em -39em 0em 0em transparent, 27em -27em 0 0em #118c73, 37.5em 0em 0 0em #6f706d, 26.25em 26.25em 0 0em #102163, 0em 37.5em 0 0em #ef6300, -27em 27em 0 0em #de3139, -39em 0em 0 0em #f0b902, -27em -27em 0 0em #118c73;}
  37.5% { box-shadow: 0em -39em 0em 0em transparent, 27em -27em 0 0em transparent, 37.5em 0em 0 0em #118c73, 26.25em 26.25em 0 0em #6f706d, 0em 37.5em 0 0em #102163, -27em 27em 0 0em #ef6300, -39em 0em 0 0em #de3139, -27em -27em 0 0em #f0b902;}
  50% { box-shadow: 0em -39em 0em 0em transparent, 27em -27em 0 0em transparent, 37.5em 0em 0 0em transparent, 26.25em 26.25em 0 0em #118c73, 0em 37.5em 0 0em #6f706d, -27em 27em 0 0em #102163, -39em 0em 0 0em #ef6300, -27em -27em 0 0em #de3139;}
  62.5% { box-shadow: 0em -39em 0em 0em transparent, 27em -27em 0 0em transparent, 37.5em 0em 0 0em transparent, 26.25em 26.25em 0 0em transparent, 0em 37.5em 0 0em #118c73, -27em 27em 0 0em #6f706d, -39em 0em 0 0em #102163, -27em -27em 0 0em #ef6300;}
  75% { box-shadow: 0em -39em 0em 0em transparent, 27em -27em 0 0em transparent, 37.5em 0em 0 0em transparent, 26.25em 26.25em 0 0em transparent, 0em 37.5em 0 0em transparent, -27em 27em 0 0em transparent, -39em 0em 0 0em #6f706d, -27em -27em 0 0em #102163;}
  87.5% { box-shadow: 0em -39em 0em 0em transparent, 27em -27em 0 0em transparent, 37.5em 0em 0 0em transparent, 26.25em 26.25em 0 0em transparent, 0em 37.5em 0 0em transparent, -27em 27em 0 0em transparent, -39em 0em 0 0em transparent, -27em -27em 0 0em #6f706d;}
  100% { box-shadow: 0em -39em 0em 0em transparent, 27em -27em 0 0em transparent, 37.5em 0em 0 0em transparent, 26.25em 26.25em 0 0em transparent, 0em 37.5em 0 0em transparent, -27em 27em 0 0em transparent, -39em 0em 0 0em transparent, -27em -27em 0 0em transparent;}
}

@media screen and (max-width:1920px) {
  .intro-1 .circle { width: 120px; height: 120px; background: #102261; border-radius: 60px; position: absolute; top: 0; left: 50%; transform: translateX(-120px) translateY(-100%); animation: intro1_circle 2s ease; }
  .intro-1 .txt { font-size: 40px; color: #fff; position: absolute; top: 50%; left: 50%; transform: translateY(-50%) translateX(-60px); opacity: 0; animation: intro_txt_opacity 2s ease;}
  
  @keyframes intro1_circle {
    25% { width: 120px; transform: translateX(-120px) translateY(-50%); top: 50%; left: 50%; }
    50%, 75% {width: 100%; transform: translateX(-120px) translateY(-50%); top: 50%; left: 50%; }
    100% { left: unset; width: 120px; top: 50%; right: 0; transform: translateX(200%) translateY(-50%); }
  }
  @keyframes intro_txt_opacity {
    10%, 90% { opacity: 1; }
  }

  .intro-2 .circle-1 {  width: calc( 100% + 200px ); height: 100px; background: #eb6401; border-radius: 50px; position: absolute; top: 50%; animation: intro2_circle1 3s ease; animation-delay: 2s; left: unset; transform: translateX(100%) translateY( calc(-50% - 100px - 40px)); }
  .intro-2 .circle-2 {  width: calc( 100% + 140px ); height: 70px; background: #da3539; border-radius: 35px; position: absolute; top: 50%; animation: intro2_circle2 3s ease; animation-delay: 2.4s; left: unset; transform: translateX(100%) translateY(-50%); }
  .intro-2 .circle-3 {  width: calc( 100% + 140px ); height: 70px; background: #da3539; border-radius: 35px; position: absolute; top: 50%; animation: intro2_circle3 3s ease; animation-delay: 2.8s; left: unset; transform: translateX(100%) translateY( calc(-50% + 70px + 20px)); }

  .intro-2 .txt { font-size: 40px; color: #fff; position: absolute; top: 50%; left: 50%; width: 100%; text-align: center; opacity: 0;}
  .intro-2 .txt-1 { transform: translateX(-50%) translateY( calc(-50% - 100px - 40px)); animation: intro_txt_opacity 3s ease; animation-delay: 2s; }
  .intro-2 .txt-2 { transform: translateX(-50%) translateY(-50%); animation: intro_txt_opacity 3s ease; animation-delay: 2.4s; }
  .intro-2 .txt-3 { transform: translateX(-50%) translateY( calc(-50% + 70px + 20px)); animation: intro_txt_opacity 3s ease; animation-delay: 2.8s; }

  @keyframes intro2_circle1 {
    0% { transform: translateX(100%) translateY( calc(-50% - 100px - 40px)); right: -40px; left: unset;}
    30%, 70% { transform: translateX(0%) translateY( calc(-50% - 100px - 40px)); right: -40px; left: unset; }
    100% { transform: translateX(-100%) translateY( calc(-50% - 100px - 40px)); right: unset; left: -40px; }
  }
  @keyframes intro2_circle2 {
    0% { transform: translateX(100%) translateY(-50%); right: -35px; left: unset;}
    30%, 70% { transform: translateX(0%) translateY(-50%); right: -35px; left: unset; }
    100% { transform: translateX(-100%) translateY(-50%); right: unset; left: -35px; }
  }
  @keyframes intro2_circle3 {
    0% { transform: translateX(100%) translateY( calc(-50% + 70px + 20px)); right: -35px; left: unset;}
    30%, 70% { transform: translateX(0%) translateY( calc(-50% + 70px + 20px)); right: -35px; left: unset; }
    100% { transform: translateX(-100%) translateY( calc(-50% + 70px + 20px)); right: unset; left: -35px; }
  }

  /* .intro-3 .circle { width: 0; height: 0; border-radius: 50%; background: #f0b902; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); animation: intro3_circle 2s ease; animation-delay: 6s; } */
  .intro-3 .txt { font-size: 40px; color: #fff; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -60%); opacity: 0; animation: intro_txt_opacity 2s ease; animation-delay: 6s; text-align: center;}  /* 
  .intro-3 .img-wrap { width: 80vh; height: 80vh; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); }
  .intro-3 .img-1 { position: absolute; left: -20%; top: 0; transform: translateY(50%) scale(0.6); animation: intro3_img1 1.8s ease; animation-delay: 6.2s; opacity: 0;}
  .intro-3 .img-2 { position: absolute; left: -25%; top: 0; transform: translateX(200%) scale(0.6); animation: intro3_img_move1 1.8s ease; animation-delay: 6.2s; opacity: 0;}
  .intro-3 .img-3{ position: absolute; right:-20%; top: 0; transform: translateY(100%) scale(0.6); animation: intro3_img2 1.8s ease; animation-delay: 6.2s; opacity: 0;}
  .intro-3 .img-4 { position: absolute; right:-10%; top: 0; transform: translateY(150%) scale(0.6); animation: intro3_img_move2 1.8s ease; animation-delay: 6.2s; opacity: 0}
  .intro-3 .img-5 { width: 80%; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%) translateY(30%) scale(0.8); animation: intro3_img3 1.8s ease; animation-delay: 6.2s; opacity: 0;}

  @keyframes intro3_circle {
    10%, 95% { width: 80vh; height: 80vh; }
  }

  @keyframes intro3_img1 {
    10%, 95% { opacity: 1;}
  }
  @keyframes intro3_img2 {
    10% { opacity: 0; }
    20%, 95% { opacity: 1;}
  }
  @keyframes intro3_img3 {
    20% { opacity: 0; }
    30%, 95% { opacity: 1;}
  }

  @keyframes intro3_img_move1 {
    10%, 95% { opacity: 1; transform: translateX(200%) scale(0.6);}
    37.5%, 72.5% { transform: translateX(200%) translateY(-25%) scale(0.6); }
    55% { transform: translateX(200%) translateY(0%) scale(0.6); }
  }
  @keyframes intro3_img_move2 {
    10% { opacity: 0; transform: translateY(150%) scale(0.6);}
    20%, 95% { opacity: 1; transform: translateY(150%) scale(0.6);}
    45%, 75% { transform: translateY(125%) scale(0.6); }
    60% { transform: translateY(150%) scale(0.6); }
  } */

  .intro-4 .txt { font-size: 30px; color: #000; position: absolute; top: calc( 50% + 32px ); left: 50%; transform: translate(-50%, -50%); text-align: center; z-index: -1; animation: intro4_txt 9.5s ease;}
  .intro-4 .logo { width: 200px; position: absolute; top: calc( 50% - 32px ); left: 50%; transform: translate(-50%, -150%); animation: intro4_logo 10.5s ease; }
  .intro-4 .circle-wrap { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
  .loader { display:block; font-size: 10px; width: 3em; height: 3em; border-radius: 50%; position: absolute; top: 50%; left: 50%; text-indent: -9999em; animation: mulShdSpin 1.5s ease;  animation-delay: 8s; transform: translateZ(0); box-shadow: 0em -31.2em 0em 0em transparent, 21.6em -21.6em 0 0em transparent, 30em 0em 0 0em transparent, 21em 21em 0 0em transparent, 0em 30em 0 0em transparent, -21.6em 21.6em 0 0em transparent, -31.2em 0em 0 0em transparent, -21.6em -21.6em 0 0em transparent;
  }
  
  @keyframes intro4_txt {
    0%, 74% { opacity: 0; }
    75%, 100% { opacity: 1; }
  }
  @keyframes intro4_logo {
    0%, 90% { opacity: 0; }
    95%, 100% { opacity: 1; }
  }
  
  @keyframes mulShdSpin {
    12.5% { box-shadow: 0em -31.2em 0em 0em #f0b902, 21.6em -21.6em 0 0em #118c73, 30em 0em 0 0em #6f706d, 21em 21em 0 0em #102163, 0em 30em 0 0em #ef6300, -21.6em 21.6em 0 0em #de3139, -31.2em 0em 0 0em #f0b902, -21.6em -21.6em 0 0em #118c73;}
    25% { box-shadow: 0em -31.2em 0em 0em transparent, 21.6em -21.6em 0 0em #118c73, 30em 0em 0 0em #6f706d, 21em 21em 0 0em #102163, 0em 30em 0 0em #ef6300, -21.6em 21.6em 0 0em #de3139, -31.2em 0em 0 0em #f0b902, -21.6em -21.6em 0 0em #118c73;}
    37.5% { box-shadow: 0em -31.2em 0em 0em transparent, 21.6em -21.6em 0 0em transparent, 30em 0em 0 0em #118c73, 21em 21em 0 0em #6f706d, 0em 30em 0 0em #102163, -21.6em 21.6em 0 0em #ef6300, -31.2em 0em 0 0em #de3139, -21.6em -21.6em 0 0em #f0b902;}
    50% { box-shadow: 0em -31.2em 0em 0em transparent, 21.6em -21.6em 0 0em transparent, 30em 0em 0 0em transparent, 21em 21em 0 0em #118c73, 0em 30em 0 0em #6f706d, -21.6em 21.6em 0 0em #102163, -31.2em 0em 0 0em #ef6300, -21.6em -21.6em 0 0em #de3139;}
    62.5% { box-shadow: 0em -31.2em 0em 0em transparent, 21.6em -21.6em 0 0em transparent, 30em 0em 0 0em transparent, 21em 21em 0 0em transparent, 0em 30em 0 0em #118c73, -21.6em 21.6em 0 0em #6f706d, -31.2em 0em 0 0em #102163, -21.6em -21.6em 0 0em #ef6300;}
    75% { box-shadow: 0em -31.2em 0em 0em transparent, 21.6em -21.6em 0 0em transparent, 30em 0em 0 0em transparent, 21em 21em 0 0em transparent, 0em 30em 0 0em transparent, -21.6em 21.6em 0 0em transparent, -31.2em 0em 0 0em #6f706d, -21.6em -21.6em 0 0em #102163;}
    87.5% { box-shadow: 0em -31.2em 0em 0em transparent, 21.6em -21.6em 0 0em transparent, 30em 0em 0 0em transparent, 21em 21em 0 0em transparent, 0em 30em 0 0em transparent, -21.6em 21.6em 0 0em transparent, -31.2em 0em 0 0em transparent, -21.6em -21.6em 0 0em #6f706d;}
    100% { box-shadow: 0em -31.2em 0em 0em transparent, 21.6em -21.6em 0 0em transparent, 30em 0em 0 0em transparent, 21em 21em 0 0em transparent, 0em 30em 0 0em transparent, -21.6em 21.6em 0 0em transparent, -31.2em 0em 0 0em transparent, -21.6em -21.6em 0 0em transparent;}
  }
}

@media screen and (max-width:1024px) {
  .intro-1 .circle { width: 60px; height: 60px; background: #102261; border-radius: 30px; position: absolute; top: 0; left: 50%; transform: translateX(-120px) translateY(-100%); animation: intro1_circle 2s ease; }
  .intro-1 .txt { font-size: 18px; color: #fff; position: absolute; top: 50%; left: 50%; transform: translateY(-50%) translateX(-60px); opacity: 0; animation: intro_txt_opacity 2s ease; white-space: nowrap;}
  
  @keyframes intro1_circle {
    25% { width: 60px; transform: translateX(-120px) translateY(-50%); top: 50%; left: 50%; }
    50%, 75% {width: 100%; transform: translateX(-120px) translateY(-50%); top: 50%; left: 50%; }
    100% { left: unset; width: 60px; top: 50%; right: 0; transform: translateX(200%) translateY(-50%); }
  }
  @keyframes intro_txt_opacity {
    10%, 90% { opacity: 1; }
  }

  .intro-2 .circle-1 { width: calc( 100% + 100px ); height: 50px; background: #eb6401; border-radius: 25px; position: absolute; top: 50%; animation: intro2_circle1 3s ease; animation-delay: 2s; left: unset; transform: translateX(100%) translateY( calc(-50% - 50px - 20px)); }
  .intro-2 .circle-2 { width: calc( 100% + 70px ); height: 35px; background: #da3539; border-radius: 17.5px; position: absolute; top: 50%; animation: intro2_circle2 3s ease; animation-delay: 2.4s; left: unset; transform: translateX(100%) translateY(-50%); }
  .intro-2 .circle-3 { width: calc( 100% + 70px ); height: 35px; background: #da3539; border-radius: 17.5px; position: absolute; top: 50%; animation: intro2_circle3 3s ease; animation-delay: 2.8s; left: unset; transform: translateX(100%) translateY( calc(-50% + 35px + 15px)); }

  .intro-2 .txt { font-size: 18px; color: #fff; position: absolute; top: 50%; left: 50%; width: 100%; text-align: center; opacity: 0; white-space: nowrap; }
  .intro-2 .txt-1 { transform: translateX(-50%) translateY( calc(-50% - 50px - 20px)); animation: intro_txt_opacity 3s ease; animation-delay: 2s; }
  .intro-2 .txt-2 { transform: translateX(-50%) translateY(-50%); animation: intro_txt_opacity 3s ease; animation-delay: 2.4s; }
  .intro-2 .txt-3 { transform: translateX(-50%) translateY( calc(-50% + 35px + 15px)); animation: intro_txt_opacity 3s ease; animation-delay: 2.8s; }

  @keyframes intro2_circle1 {
    0% { transform: translateX(100%) translateY( calc(-50% - 50px - 20px)); right: -25px; left: unset;}
    30%, 70% { transform: translateX(0%) translateY( calc(-50% - 50px - 20px)); right: -25px; left: unset; }
    100% { transform: translateX(-100%) translateY( calc(-50% - 50px - 20px)); right: unset; left: -25px; }
  }
  @keyframes intro2_circle2 {
    0% { transform: translateX(100%) translateY(-50%); right: -17.5px; left: unset;}
    30%, 70% { transform: translateX(0%) translateY(-50%); right: -17.5px; left: unset; }
    100% { transform: translateX(-100%) translateY(-50%); right: unset; left: -17.5px; }
  }
  @keyframes intro2_circle3 {
    0% { transform: translateX(100%) translateY( calc(-50% + 35px + 15px)); right: -17.5px; left: unset;}
    30%, 70% { transform: translateX(0%) translateY( calc(-50% + 35px + 15px)); right: -17.5px; left: unset; }
    100% { transform: translateX(-100%) translateY( calc(-50% + 35px + 15px)); right: unset; left: -17.5px; }
  }

  .intro-3 .circle { width: 0; height: 0; border-radius: 50%; background: #f0b902; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); animation: intro3_circle 2s ease; animation-delay: 6s; }
  .intro-3 .txt { font-size: 18px; color: #fff; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -60%); opacity: 0; animation: intro_txt_opacity 2s ease; animation-delay: 6s; text-align: center;}
  .intro-3 .img-wrap { width: 300px; height: 300px; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); }
  .intro-3 .img-1 { position: absolute; width: 100px; left: -10%; top: -10%; transform: translateY(50%); animation: intro3_img1 1.8s ease; animation-delay: 6.2s; opacity: 0;}
  .intro-3 .img-2 { position: absolute; width: 30px; left: -10%; top: -10%; transform: translateX(300%); animation: intro3_img_move1 1.8s ease; animation-delay: 6.2s; opacity: 0;}
  .intro-3 .img-3{ position: absolute; width: 90px; right:-10%; top: 0; transform: translateY(100%); animation: intro3_img2 1.8s ease; animation-delay: 6.2s; opacity: 0;}
  .intro-3 .img-4 { position: absolute; width: 20px; right:-10%; top: 0; transform: translateY(100%); animation: intro3_img_move2 1.8s ease; animation-delay: 6.2s; opacity: 0}
  .intro-3 .img-5 { width: 80%; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%) translateY(30%); animation: intro3_img3 1.8s ease; animation-delay: 6.2s; opacity: 0;}

  @keyframes intro3_circle {
    10%, 90% { width: 300px; height: 300px; }
  }

  @keyframes intro3_img1 {
    10%, 95% { opacity: 1;}
  }
  @keyframes intro3_img2 {
    10% { opacity: 0; }
    20%, 95% { opacity: 1;}
  }
  @keyframes intro3_img3 {
    20% { opacity: 0; }
    30%, 95% { opacity: 1;}
  }

  @keyframes intro3_img_move1 {
    10%, 95% { opacity: 1; transform: translateX(300%);}
    37.5%, 72.5% { transform: translateX(300%) translateY(-25%); }
    55% { transform: translateX(300%) translateY(0%); }
  }
  @keyframes intro3_img_move2 {
    10% { opacity: 0; transform: translateY(100%);}
    20%, 95% { opacity: 1; transform: translateY(100%);}
    45%, 75% { transform: translateY(50%); }
    60% { transform: translateY(100%); }
  }

  .intro-4 .txt { font-size: 16px; color: #000; position: absolute; top: calc( 50% + 16px ); left: 50%; transform: translate(-50%, -50%); text-align: center; z-index: -1; animation: intro4_txt 9.5s ease; white-space: nowrap;}
  .intro-4 .logo { width: 120px; position: absolute; top: calc( 50% - 32px ); left: 50%; transform: translate(-50%, -100%); animation: intro4_logo 10.5s ease; }
  .intro-4 .circle-wrap { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
  .loader { display:block; font-size: 10px; width: 1.5em; height: 1.5em; border-radius: 50%; position: absolute; top: 50%; left: 50%; text-indent: -9999em; animation: mulShdSpin 1.5s ease;  animation-delay: 8s; transform: translateZ(0); box-shadow: 0em -15.6em 0em 0em transparent, 10.8em -10.8em 0 0em transparent, 15em 0em 0 0em transparent, 10.5em 10.5em 0 0em transparent, 0em 15em 0 0em transparent, -10.8em 10.8em 0 0em transparent, -15.6em 0em 0 0em transparent, -10.8em -10.8em 0 0em transparent;
  }
  
  @keyframes intro4_txt {
    0%, 74% { opacity: 0; }
    75%, 100% { opacity: 1; }
  }
  @keyframes intro4_logo {
    0%, 90% { opacity: 0; }
    95%, 100% { opacity: 1; }
  }
  
  @keyframes mulShdSpin {
    12.5% { box-shadow: 0em -15.6em 0em 0em #f0b902, 10.8em -10.8em 0 0em #118c73, 15em 0em 0 0em #6f706d, 10.5em 10.5em 0 0em #102163 0em 15em 0 0em #ef6300, -10.8em 10.8em 0 0em #de3139, -15.6em 0em 0 0em #f0b902, -10.8em -10.8em 0 0em #118c73;}
    25% { box-shadow: 0em -15.6em 0em 0em transparent, 10.8em -10.8em 0 0em #118c73, 15em 0em 0 0em #6f706d, 10.5em 10.5em 0 0em #102163, 0em 15em 0 0em #ef6300, -10.8em 10.8em 0 0em #de3139, -15.6em 0em 0 0em #f0b902, -10.8em -10.8em 0 0em #118c73;}
    37.5% { box-shadow: 0em -15.6em 0em 0em transparent, 10.8em -10.8em 0 0em transparent, 15em 0em 0 0em #118c73, 10.5em 10.5em 0 0em #6f706d, 0em 15em 0 0em #102163, -10.8em 10.8em 0 0em #ef6300, -15.6em 0em 0 0em #de3139, -10.8em -10.8em 0 0em #f0b902;}
    50% { box-shadow: 0em -15.6em 0em 0em transparent, 10.8em -10.8em 0 0em transparent, 15em 0em 0 0em transparent, 10.5em 10.5em 0 0em #118c73, 0em 15em 0 0em #6f706d, -10.8em 10.8em 0 0em #102163, -15.6em 0em 0 0em #ef6300, -10.8em -10.8em 0 0em #de3139;}
    62.5% { box-shadow: 0em -15.6em 0em 0em transparent, 10.8em -10.8em 0 0em transparent, 15em 0em 0 0em transparent, 10.5em 10.5em 0 0em transparent, 0em 15em 0 0em #118c73, -10.8em 10.8em 0 0em #6f706d, -15.6em 0em 0 0em #102163, -10.8em -10.8em 0 0em #ef6300;}
    75% { box-shadow: 0em -15.6em 0em 0em transparent, 10.8em -10.8em 0 0em transparent, 15em 0em 0 0em transparent, 10.5em 10.5em 0 0em transparent, 0em 15em 0 0em transparent, -10.8em 10.8em 0 0em transparent, -15.6em 0em 0 0em #6f706d, -10.8em -10.8em 0 0em #102163;}
    87.5% { box-shadow: 0em -15.6em 0em 0em transparent, 10.8em -10.8em 0 0em transparent, 15em 0em 0 0em transparent, 10.5em 10.5em 0 0em transparent, 0em 15em 0 0em transparent, -10.8em 10.8em 0 0em transparent, -15.6em 0em 0 0em transparent, -10.8em -10.8em 0 0em #6f706d;}
    100% { box-shadow: 0em -15.6em 0em 0em transparent, 10.8em -10.8em 0 0em transparent, 15em 0em 0 0em transparent, 10.5em 10.5em 0 0em transparent, 0em 15em 0 0em transparent, -10.8em 10.8em 0 0em transparent, -15.6em 0em 0 0em transparent, -10.8em -10.8em 0 0em transparent;}
  }
}