.PWD{
    position:relative;

}

.pwdicon{
    position:absolute;
    right:15px;
    cursor:pointer;
}

#checkEye {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
}

@-webkit-keyframes slide-in-tl {
    0% {
        -webkit-transform: translateY(-1000px) translateX(-1000px);
        transform: translateY(-1000px) translateX(-1000px);
        opacity: 0;
    }

    100% {
        -webkit-transform: translateY(0) translateX(0);
        transform: translateY(0) translateX(0);
        opacity: 1;
    }
}

@keyframes slide-in-tl {
    0% {
        -webkit-transform: translateY(-1000px) translateX(-1000px);
        transform: translateY(-1000px) translateX(-1000px);
        opacity: 0;
    }

    100% {
        -webkit-transform: translateY(0) translateX(0);
        transform: translateY(0) translateX(0);
        opacity: 1;
    }
}

@-webkit-keyframes slide-in-elliptic-top-fwd {
    0% {
        -webkit-transform: translateY(-600px) rotateX(-30deg) scale(0);
        transform: translateY(-600px) rotateX(-30deg) scale(0);
        -webkit-transform-origin: 50% 100%;
        transform-origin: 50% 100%;
        opacity: 0;
    }

    100% {
        -webkit-transform: translateY(0) rotateX(0) scale(1);
        transform: translateY(0) rotateX(0) scale(1);
        -webkit-transform-origin: 50% 1400px;
        transform-origin: 50% 1400px;
        opacity: 1;
    }
}

@keyframes slide-in-elliptic-top-fwd {
    0% {
        -webkit-transform: translateY(-600px) rotateX(-30deg) scale(0);
        transform: translateY(-600px) rotateX(-30deg) scale(0);
        -webkit-transform-origin: 50% 100%;
        transform-origin: 50% 100%;
        opacity: 0;
    }

    100% {
        -webkit-transform: translateY(0) rotateX(0) scale(1);
        transform: translateY(0) rotateX(0) scale(1);
        -webkit-transform-origin: 50% 1400px;
        transform-origin: 50% 1400px;
        opacity: 1;
    }
}

@-webkit-keyframes scale-in-center {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0);
    }

    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

@keyframes scale-in-center {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0);
    }

    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}


@-webkit-keyframes slide-in-fwd-center {
    0% {
        -webkit-transform: translateZ(-1400px);
        transform: translateZ(-1400px);
        opacity: 0;
    }

    100% {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        opacity: 1;
    }
}

@keyframes slide-in-fwd-center {
    0% {
        -webkit-transform: translateZ(-1400px);
        transform: translateZ(-1400px);
        opacity: 0;
    }

    100% {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        opacity: 1;
    }
}

@-webkit-keyframes balloon {
    0% {
        transform: translateY(20px);
    }

    50% {
        transform: translateY(30px);
    }

    100% {
        transform: translateY(20px);
    }
}

@keyframes balloon {
    0% {
        transform: translateY(20px);
    }

    50% {
        transform: translateY(30px);
    }

    100% {
        transform: translateY(20px);
    }
}

@-webkit-keyframes line-right30-to-left {
    from {
        right: 30vw;
        width: 0
    }
}

@keyframes line-right30-to-left {
    from {
        right: 30vw;
        width: 0
    }
}

@-webkit-keyframes line-left-to-right-01 {
    from {
        right: -30vw;
        width: 0
    }
}

@keyframes line-left-to-right-01 {
    from {
        right: -30vw;
        width: 0
    }
}

@-webkit-keyframes line-left-to-right-02 {
    from {
        right: -46vw;
        width: 0
    }
}

@keyframes line-left-to-right-02 {
    from {
        right: -46vw;
        width: 0
    }
}


@-webkit-keyframes line-left-to-right-03 {
    from {
        right: -30vw;
        width: 0
    }
}

@keyframes line-left-to-right-03 {
    from {
        right: -30vw;
        width: 0
    }
}

@-webkit-keyframes line-top-to-bottom-01 {
    from {
        top: 20vh;
        height: 0
    }
}

@keyframes line-top-to-bottom-01 {
    from {
        top: 20vh;
        height: 0
    }
}

@-webkit-keyframes line-top-to-bottom-02 {
    from {
        top: -10vh;
        height: 0
    }
}

@keyframes line-top-to-bottom-02 {
    from {
        top: -10vh;
        height: 0
    }
}

@-webkit-keyframes line-bottom-to-top {
    from {
        top: -16vh;
        height: 0
    }
}

@keyframes line-bottom-to-top {
    from {
        top: -16vh;
        height: 0
    }
}

@-webkit-keyframes flip-diagonal {
    0% {
        -webkit-transform: rotate3d(1, 1, 0, 0deg);
        transform: rotate3d(1, 1, 0, 0deg);
    }

    33% {
        -webkit-transform: rotate3d(1, 1, 0, 180deg);
        transform: rotate3d(1, 1, 0, 180deg);
    }

    66% {
        -webkit-transform: rotate3d(-1, 1, 0, 180deg);
        transform: rotate3d(-1, 1, 0, 180deg);
    }

    100% {
        -webkit-transform: rotate3d(-1, 1, 0, 0deg);
        transform: rotate3d(-1, 1, 0, 0deg);
    }
}

@keyframes flip-diagonal {
    0% {
        -webkit-transform: rotate3d(1, 1, 0, 0deg);
        transform: rotate3d(1, 1, 0, 0deg);
    }

    33% {
        -webkit-transform: rotate3d(1, 1, 0, 180deg);
        transform: rotate3d(1, 1, 0, 180deg);
    }

    66% {
        -webkit-transform: rotate3d(-1, 1, 0, 180deg);
        transform: rotate3d(-1, 1, 0, 180deg);
    }

    100% {
        -webkit-transform: rotate3d(-1, 1, 0, 0deg);
        transform: rotate3d(-1, 1, 0, 0deg);
    }
}

@-webkit-keyframes pulsate-fwd {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }

    50% {
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
    }

    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

@keyframes pulsate-fwd {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }

    50% {
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
    }

    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}


@-webkit-keyframes rotate-center-01 {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes rotate-center-01 {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@-webkit-keyframes rotate-center-02 {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }

    50% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes rotate-center-02 {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }

    50% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@-webkit-keyframes typing {
    0% {
        width: 0px;
    }

    25% {
        width: 311px;
    }
}

@keyframes typing {
    0% {
        width: 0px;
    }

    25% {
        width: 311px;
    }
}

@-webkit-keyframes caret {
    50% {
        border-right-color: transparent;
    }
}

@keyframes caret {
    50% {
        border-right-color: transparent;
    }
}

:root {
  --light-green: 137, 233, 244, 1; /* #89E9F4 */
  --outer-glow: 93, 163, 175, 0.2; /* #5DA3AF */

}

body {
  overflow: hidden;
  background: center repeat url("/img/Login/bg_line.svg"),
              radial-gradient(
                  at calc(var(--mouse-x, 0) * 100%) calc(var(--mouse-y, 0) * 100%), 
                  #007CB8, /* light */
                  #0A1121 80%/* dark */
              ) no-repeat 0 0;
}

.logo-div {
    width: fit-content;
    height: fit-content;
    -webkit-animation: slide-in-tl 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: slide-in-tl 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
.logo-img {
    width: 20vw;
    min-width: 300px;
}


.login-interface-div {
    width: fit-content;
    height: fit-content;

    -webkit-animation: balloon 15s linear both infinite;
	        animation: balloon 15s linear both infinite;
}
.login-interface {
    width: 35vw;
    min-width: 450px;

    -moz-text-shadow:4px 4px 12px 4px rgba(93,163,175,0.5);
    -webkit-text-shadow:4px 4px 12px 4px rgba(93,163,175,0.5);
    text-shadow:4px 4px 12px rgba(93,163,175,0.5),-4px -4px 12px rgba(93,163,175,0.5);

    -webkit-animation: scale-in-center 0.2s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s both;
	        animation: scale-in-center 0.2s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s both;
}
.login-input-area {
    width: 55%;
    height: fit-content;
}
.login-input-area > ::placeholder {
  color: #CCCCCC;
  opacity: 1; /* Firefox */
}
.login-input-area > input,
.login-input-area > select {
    border:0;
    background: rgba(35, 60, 70, 1); /* 233C46*/
    color: #FFFFFF;

    font-size: 1.3rem;
}
.login-input-area > input:focus,
.login-input-area > select:focus {
    background: rgba(35, 60, 70, .7); /* 233C46*/
    color: #FFFFFF;
}
.login-input-area > button {
    border: 2px solid #5FAEB2;
    background: rgba(60, 140, 150, 1); /* #3C8C96*/
    color: #FFFFFF;

    font-size: 1.3rem;
}
.login-input-area > button:focus {
    border: 2px solid #5FAEB2;
    background: rgba(60, 140, 150, .7); /* #3C8C96*/
    color: #FFFFFF;
}

.login-input-area > .animate-1 {
    -webkit-animation: scale-in-center .2s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s both;
	        animation: scale-in-center .2s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s both;
}
.login-input-area > .animate-2 {
    -webkit-animation: scale-in-center .3s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s both;
	        animation: scale-in-center .3s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s both;
}
.login-input-area > .animate-3 {
    -webkit-animation: scale-in-center .4s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s both;
	        animation: scale-in-center .4s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s both;
}
.login-input-area > .animate-4 {
    -webkit-animation: scale-in-center .5s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s both;
	        animation: scale-in-center .5s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s both;
}

.digital-circle-left-div {
    height: 60vh;
    width: 45vw;

    top: 15%;
    left: -5%;
}
.digital-circle-left-div > img {
    opacity: 0.2;
}
.digital-circle-left-div > img:nth-child(1) {
    width: 28vw;
    top: 30%;
}
 .digital-circle-left-div > img:nth-child(2) {
    width: 30vw;
 }
 .digital-circle-left-div > img:nth-child(3) {
    width: 20vw;
 }
 .digital-circle-left-div > .animate-1 {
    -webkit-animation: scale-in-center 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275) 0.2s both, 
                      rotate-center-01 300s linear reverse infinite 1.2s;
	          animation: scale-in-center 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275) 0.2s both, 
                      rotate-center-01 300s linear reverse infinite 1.2s;
 }
 .digital-circle-left-div > .animate-2 {
    -webkit-animation: scale-in-center 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275) 0.3s both, 
                      rotate-center-01 450s linear infinite 1.2s;
	          animation: scale-in-center 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275) 0.3s both, 
                      rotate-center-01 450s linear infinite 1.2s;
 }
 .digital-circle-left-div > .animate-3 {
    -webkit-animation: scale-in-center 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275) 0.4s both, 
                      rotate-center-01 250s linear reverse infinite 1.2s;
	          animation: scale-in-center 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275) 0.4s both, 
                      rotate-center-01 250s linear reverse infinite 1.2s;
 }
 

.digital-circle-right-div {
    height: 60vh;
    width: 50vw;

    top: 15%;
    right: -5%;
}
.digital-circle-right-div > img {
    opacity: 0.2;
}
.digital-circle-right-div > img:nth-child(1) {
    width: 20vw;    
}
 .digital-circle-right-div > img:nth-child(2) {
    width: 30vw;
    top: 20%;
    left: 10%;
 }
 .digital-circle-right-div > img:nth-child(3) {
    width: 28vw;
 }
 .digital-circle-right-div > .animate-1 {
    -webkit-animation: scale-in-center 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275) 0.7s both, 
                      rotate-center-01 150s linear infinite 1.2s;
	          animation: scale-in-center 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275) 0.7s both, 
                      rotate-center-01 150s linear infinite 1.2s;
 }
 .digital-circle-right-div > .animate-2 {
    -webkit-animation: scale-in-center 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275) 0.6s both, 
                      rotate-center-01 300s linear infinite 1.2s;
	          animation: scale-in-center 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275) 0.6s both, 
                      rotate-center-01 300s linear reverse infinite 1.2s;
 }
 .digital-circle-right-div > .animate-3 {
    -webkit-animation: scale-in-center 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275) 0.5s both, 
                      rotate-center-01 150s linear infinite 1.2s;
            animation: scale-in-center 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275) 0.5s both, 
                      rotate-center-01 150s linear infinite 1.2s;
 }

 .digital-element-01 {
    position:absolute;
    top: 30vh;
    right: 55vw;

    white-space: nowrap;
    overflow: hidden;

    height:100px;
    width: 20vw;
    
    -webkit-animation: line-right-to-left 2s linear both;
	        animation: line-right-to-left 2s linear both;
 }

.horizontal-line {
  position:absolute;
  white-space: nowrap;
  overflow: hidden;
  
  border-top: 1px solid rgba(var(--light-green));
  
  -moz-box-shadow:4px 4px 12px 4px rgba(var(--outer-glow));
  -webkit-box-shadow:4px 4px 12px 4px rgba(var(--outer-glow));
  box-shadow:4px 4px 12px 4px rgba(var(--outer-glow)),-4px -4px 12px 4px rgba(var(--outer-glow));
}
.h-line-01 {
  top: 20vh;
  right: 50vw;
  height:1px;
  width: 20vw;

  -webkit-animation: line-right30-to-left 1s linear both;
          animation: line-right30-to-left 1s linear both;
}
.h-line-02-1 {
  top: -16vh;
  right: -38vw;
  height:1px;
  width: 8vw;

  -webkit-animation: line-left-to-right-01 .5s linear both;
          animation: line-left-to-right-01 .5s linear both;
}
.h-line-02-2 {
  top: calc(-16vh - 500px);
  right: -54vw;
  height:1px;
  width: 8vw;

  -webkit-animation: line-left-to-right-02 .5s linear 1s both;
          animation: line-left-to-right-02 .5s linear 1s both;
}
.h-line-03 {
  top: -10vh;
  right: -45vw;
  height:1px;
  width: 15vw;

  -webkit-animation: line-left-to-right-03 .5s linear 1s both;
          animation: line-left-to-right-03 .5s linear 1s both;
}

.vertical-line {
  position:absolute;
  white-space: nowrap;
  overflow: hidden;

  border-left: 1px solid rgba(var(--light-green));
  
  -moz-box-shadow:4px 4px 12px 4px rgba(var(--outer-glow));
  -webkit-box-shadow:4px 4px 12px 4px rgba(var(--outer-glow));
  box-shadow:4px 4px 12px 4px rgba(var(--outer-glow)),-4px -4px 12px 4px rgba(var(--outer-glow));
}
.v-line-01 {
  top: calc(20vh + 100px);
  right: 70vw;
  height: 100px;
  width: 1px;

  -webkit-animation: line-top-to-bottom-01 1s linear 1s both;
          animation: line-top-to-bottom-01 1s linear 1s both;
}
.v-line-02 {
  top: calc(-16vh - 250px);
  right: -46vw;
  height: 250px;
  width: 1px;

  -webkit-animation: line-bottom-to-top .5s linear .5s both;
          animation: line-bottom-to-top .5s linear .5s both;
}
.v-line-03 {
  top: calc(-10vh + 400px);
  right: -60vw;
  height: 400px;
  width: 1px;

  -webkit-animation: line-top-to-bottom-02 .5s linear 1.5s both;
          animation: line-top-to-bottom-02 .5s linear 1.5s both;
}

.line-dot {
  position:absolute;
  white-space: nowrap;
  overflow: hidden;

  border-radius: 100%;
  background: rgba(var(--light-green));
  
  -moz-box-shadow:4px 4px 12px 4px rgba(var(--outer-glow));
  -webkit-box-shadow:4px 4px 12px 4px rgba(var(--outer-glow));
  box-shadow:4px 4px 12px 4px rgba(var(--outer-glow)),-4px -4px 12px 4px rgba(var(--outer-glow));
}
.dot-01 {
  top: calc(20vh + 200px);
  right: 70vw;
  height: 10px;
  width: 10px;

  -webkit-animation: scale-in-center 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275) 2s both;
	        animation: scale-in-center 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275) 2s both;
}
.dot-02 {
  top: calc(-16vh - 500px);
  right: -62vw;
  height: 10px;
  width: 10px;

  -webkit-animation: scale-in-center 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275) 1.5s both;
	        animation: scale-in-center 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275) 1.5s both;
}
.dot-03 {
  top: calc(-10vh + 800px);
  right: -60vw;
  height: 10px;
  width: 10px;

  -webkit-animation: scale-in-center 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275) 2s both;
	        animation: scale-in-center 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275) 2s both;
}

.circuit-area-01 {
  position:absolute;
  top: calc(70vh);
  right: 70vw;
  height: 250px;
  width: 250px;

  -webkit-animation: scale-in-center 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275) 1s both;
  animation: scale-in-center 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275) 1s both;
}
.circuit-area-01 > .circuit {
  -webkit-animation: flip-diagonal 80s linear infinite both;
	        animation: flip-diagonal 80s linear infinite both;
}

.circuit-area-02 {
  position:absolute;
  top: calc(-16vh - 500px);
  right: -78vw;
  width: 20vw;

  -webkit-animation: scale-in-center 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275) 1.5s both;
	        animation:  scale-in-center 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275) 1.5s both;
}
.circuit-area-02 > .circuit {
  -webkit-animation: pulsate-fwd 10s ease-in-out infinite 1.5s both;
	        animation:  pulsate-fwd 10s ease-in-out infinite 1.5s both;
}

.circuit-area-03 {
  position:absolute;
  top: calc(-10vh + 950px);
  right: -81vw;
  height:fit-content;
  width: 25vw;

  -webkit-animation: scale-in-center 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275) 2s both;
	        animation:  scale-in-center 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275) 2s both;
}
.circuit-area-03 > .circuit-01 {
  width: 100%;

}
.circuit-area-03 > .circuit-02 {
  position:absolute;
  right:8vw;
  bottom: 3vh;
  width: 8vw;

  -webkit-animation: rotate-center-02 80s linear infinite both;
  animation: rotate-center-02 80s linear infinite both;
}

.speech-bubble-area-01 {
  max-width: 500px;
  height: 280px;

  right: 65vw;
  bottom: 30vh;
}
.speech-bubble-area-01 > .bubble-01 {
  width: 40%;
  top: 5%;

  -webkit-animation: scale-in-center 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275) 1.5s both;
  animation: scale-in-center 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275) 1.5s both;
}
.speech-bubble-area-01 > .bubble-02 {
  width: 50%;
  top: 20%;
  left: 25%;
  
  -webkit-animation: scale-in-center 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275) 1.7s both;
  animation: scale-in-center 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275) 1.7s both;
}
.speech-bubble-area-01 > .bubble-03 {
  width: 45%;
  
  -webkit-animation: scale-in-center 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275) 1.6s both;
  animation: scale-in-center 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275) 1.6s both;
}
.speech-bubble-area-01 > .bubble-04 {
  width: 80%;
  
  -webkit-animation: scale-in-center 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275) 1.8s both;
  animation: scale-in-center 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275) 1.8s both;
}
    .speech-bubble-area-01 > .bubble-04 > .typing-text {
        bottom: 18%;
        left: 12%;
        height: fit-content;
        white-space: nowrap;
        overflow: hidden;
        border-right: 5px solid rgba(var(--light-green));
        -webkit-animation: scale-in-center 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275) 1.9s both, typing 3s steps(7) infinite 4s, caret .5s steps(1) infinite 4s;
        animation: scale-in-center 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275) 1.9s both, typing 3s steps(7) infinite 4s, caret .5s steps(1) infinite 4s;
    }
        .speech-bubble-area-01 > .bubble-04 > .typing-text > span {
            font-family: Consolas, Monaco, monospace;
            font-size: 5rem;
            font-weight: 800;
            color: rgba(var(--light-green));
            line-height: 0.8;
            -moz-text-shadow: 4px 4px 12px 4px rgba(var(--outer-glow));
            -webkit-text-shadow: 4px 4px 12px 4px rgba(var(--outer-glow));
            text-shadow: 4px 4px 12px rgba(var(--outer-glow)),-4px -4px 12px rgba(var(--outer-glow));
        }


.speech-bubble-area-02 {
  max-width: 300px;
  height:120px;

  left: 35vw;
  top: 80vh;
}
.speech-bubble-area-02 > .bubble-01 {
  width: 50%;

  -webkit-animation: scale-in-center 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275) 2.4s both;
  animation: scale-in-center 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275) 2.4s both;
}
.speech-bubble-area-02 > .bubble-02 {
  width: 80%;
  
  -webkit-animation: scale-in-center 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275) 2.5s both;
  animation: scale-in-center 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275) 2.5s both;
}


@media screen and (max-width: 1280px) {
    @-webkit-keyframes typing {
        0% {
            width: 0px;
        }

        25% {
            width: 251px;
        }
    }
    @keyframes typing {
        0% {
            width: 0px;
        }

        25% {
            width: 251px;
        }
    }

    .speech-bubble-area-01 > .bubble-04 > .typing-text {
        bottom: 15%;
    }
        .speech-bubble-area-01 > .bubble-04 > .typing-text > span {
            font-size: 4rem;
        }
}


@media screen and (max-width: 1024px) {

    .speech-bubble-area-01 > .bubble-04 > .typing-text {
        display: none;
    }
}