/* 공통 */
.bt-border-section .in-bottom-border {
  width: 0;
  max-width: 0;
  opacity: 0;
}

.bt-border-section .in-bottom-border.active {
  opacity: 1;
  width: 80%;
  transition: 4.2s;
  transition-timing-function: cubic-bezier(0.65, 0, 0.076, 1);
}

.common-image-wrap .in-element,
.common-image-wrap .in-element-group,
.common-image-wrap .in-element-img {
  opacity: 0;
}

.common-image-wrap.active .in-element,
.common-image-wrap.active .in-element-group,
.common-image-wrap.active .in-element-img {
  opacity: 1;
}
/* END 공통 */

/* intro 섹션 */
.main-section .section-bg .in-angle-element {
  opacity: 0;
  transform: translateX(-200px);

  animation: mainBgShow 0.4s 1 cubic-bezier(0.67, 0.01, 0.15, 0.98) 1s both;
}

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

.main-image-wrap .in-element-img {
  opacity: 0;
  transform: translateX(-80px);

  animation: mainEleMove 0.8s cubic-bezier(0.51, 0.92, 0.24, 1.15) 0.8s both;
}

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

.main-center-typo-wrap {
  animation: fadeIn 1s 1 1s both;
}

.main-center-typo-wrap .in-typo-list {
  animation: typoAni 0.8s cubic-bezier(0.67, 0.01, 0.15, 0.98) 1 2s both;
}

@keyframes typoAni {
  0% {
    background-size: 0 100%;
  }
  100% {
    background-size: 220% 100%;
  }
}

.main-center-typo-wrap .in-typo-list:nth-of-type(2):before {
  width: 0%;

  animation: labelAni 0.8s cubic-bezier(0.67, 0.01, 0.15, 0.98) 3s both;
}

@keyframes labelAni {
  100% {
    width: 84.2%;
  }
}

.main-center-typo-wrap .in-typo-group.type-spare {
  animation: spareTypoAni 1s 1 2.8s both;
}

@keyframes spareTypoAni {
  100% {
    opacity: 1;
  }
}

.main-other-typo-wrap .in-duru-cash {
  animation: custom_fadeInRight 0.7s 1 cubic-bezier(0.51, 0.92, 0.24, 1.15) 2.7s
    both;
}

.main-other-typo-wrap .in-other-typo-group {
  animation: custom_fadeInRight 0.7s 1 cubic-bezier(0.51, 0.92, 0.24, 1.15) 2.7s
    both;
}

@keyframes custom_fadeInRight {
  0% {
    opacity: 0;
    transform: translateX(40px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

.main-other-typo-wrap .in-other-typo-group:after {
  animation: otherTypoAfter 1.2s 1 cubic-bezier(0.51, 0.92, 0.24, 1.15) 3s both;
}

@keyframes otherTypoAfter {
  100% {
    opacity: 1;
    height: 30px;
  }
}

.main-other-typo-wrap .in-other-typo-group .bold-word.first {
  animation: boldWordAni 0.8s 3.4s 1;
}

.main-other-typo-wrap .in-other-typo-group .bold-word.second {
  animation: boldWordAni 0.8s 4s 1;
}

@keyframes boldWordAni {
  0% {
    transform: scale(1);
  }

  33% {
    transform: scale(1.15);
  }
  100% {
    transform: scale(1);
  }
}

.main-other-typo-wrap .in-paragraph {
  animation: custom_fadeInRight 1s 1 cubic-bezier(0.51, 0.92, 0.24, 1.15) 3.5s
    both;
}
/* END intro 섹션 */

/* 두루캐시 section */
.cash-image-wrap .in-element-view-group {
  opacity: 0;
  transform: translateY(1000px);
}

.cash-image-wrap.active .in-element-view-group {
  opacity: 1;
  animation: custom_bounceInUp 1s 1 both;
}

.cash-image-wrap.active .in-element,
.cash-image-wrap.active .in-element-img,
.cash-image-wrap.active .in-element-group {
  animation-name: patternAni01, patternAni02;
  animation-duration: 1.8s, 2s;
  animation-delay: 0s, 2s;
  animation-direction: alternate, alternate-reverse;
  animation-iteration-count: 1, infinite;
}

.cash-image-wrap.active .in-xs-circle {
  animation-name: patternAni01, patternAni03;
  animation-duration: 1.8s, 1.5s;
  animation-delay: 0s, 1.8s;
}

.cash-image-wrap.active .in-sm-circle {
  animation-name: patternAni01, patternAni02;
  animation-duration: 1.8s, 1.7s;
  animation-delay: 0s, 1.8s;
}

.cash-image-wrap.active .in-md-circle {
  animation-name: patternAni01, patternAni04;
  animation-duration: 2.1s, 2s;
  animation-delay: 0s, 2.1s;
}

.cash-image-wrap.active .in-bubble {
  animation-name: patternAni01, patternAni03;
  animation-duration: 2.5s, 2s;
  animation-delay: 0s, 2.5s;
}

.cash-image-wrap.active .in-xs-bubble-rvs {
  animation-name: patternAni01, patternAni03;
  animation-duration: 2.3s, 1.8s;
  animation-delay: 0s, 2.3s;
}

@keyframes custom_bounceInUp {
  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);
  }

  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 1000px, 0);
    transform: translate3d(0, 1000px, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -70%, 0);
  }

  75% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, -48%, 0);
  }

  90% {
    -webkit-transform: translate3d(0, -5px, 0);
    transform: translate3d(0, -55%, 0);
  }

  to {
    -webkit-transform: translate3d(0, -50%, 0);
    transform: translate3d(0, -50%, 0);
  }
}

@keyframes patternAni01 {
  0% {
    opacity: 0;
    transform: translateY(100px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes patternAni02 {
  0% {
    transform: translateY(5px);
  }
  50% {
    transform: translateY(15px);
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes patternAni03 {
  0% {
    transform: translateY(10px);
  }
  50% {
    transform: translateY(30px);
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes patternAni04 {
  0% {
    transform: translateY(-10px);
  }
  50% {
    transform: translateY(20px);
  }
  100% {
    transform: translateY(0);
  }
}

/* END 두루캐시 section */

/* SNS 섹션 */
.talk-image-wrap.active .in-element-img {
  opacity: 1;
  animation-name: patternAni01, patternAni02;
  animation-duration: 1.8s, 2s;
  animation-delay: 0s, 2s;
  animation-direction: alternate, alternate-reverse;
  animation-iteration-count: 1, infinite;
}

.talk-image-wrap.active .in-element,
.talk-image-wrap.active .in-element-group {
  opacity: 1;
  animation-name: zoomIn, patternAni02;
  animation-duration: 1.4s, 1.8s;
  animation-delay: 0s, 1.6s;
  animation-direction: alternate, alternate-reverse;
  animation-iteration-count: 1, infinite;
}

.talk-image-wrap.active .in-md-circle {
  animation-name: zoomIn, patternAni03;
  animation-duration: 2s, 2.2s;
  animation-delay: 0s, 2s;
}

.talk-image-wrap.active .in-element-group .in-md-circle {
  animation-name: zoomIn, patternAni02;
  animation-duration: 1.6s, 2.1s;
  animation-delay: 0s, 1.8s;
}

.talk-image-wrap.active .in-element-group {
  animation-duration: 2s, 1.8s;
  animation-delay: 0s, 2s;
}

.talk-image-wrap .in-view {
  opacity: 0;
  transform: translateY(80px);
}

.talk-image-wrap.active .in-view {
  transform: translateY(0);
  opacity: 1;
  transition: 1s;
  transition-timing-function: cubic-bezier(0.51, 0.92, 0.24, 1.15);
}
/* END SNS 섹션 */

/* 두루박스 섹션 */
.durubox-image-wrap .in-view {
  opacity: 0;
  transform: translateY(-30%);
}

.durubox-image-wrap.active .in-view {
  transform: translateY(-50%);
  opacity: 1;
  transition: 1s;
  transition-timing-function: cubic-bezier(0.51, 0.92, 0.24, 1.15);
}

.common-image-wrap.active .in-flash-line:before {
  animation: explosion 3.5s ease-in-out infinite;
}

@keyframes explosion {
  0% {
    top: 100%;
  }
  33%,
  100% {
    top: -50%;
  }
}

.durubox-image-wrap.active .size-xs .in-flash-line:before {
  animation: explosion 4s ease-in-out infinite;
  animation-delay: 0.3s;
}

.durubox-image-wrap.active .size-sm .in-flash-line:before {
  animation: explosion 3.5s ease-in-out infinite;
  animation-delay: 0.6s;
}

.durubox-image-wrap.active .size-md .in-flash-line:before {
  animation: explosion 3s ease-in-out infinite;
  animation-delay: 0.4s;
}

.durubox-image-wrap.active .size-other-sm .in-flash-line:before {
  animation: explosion 3s ease-in-out infinite;
  animation-delay: 1.8s;
}

.durubox-image-wrap.active .size-other-md .in-flash-line:before {
  animation: explosion 3s ease-in-out infinite;
  animation-delay: 1.5s;
}

.durubox-image-wrap.active .size-other-xs .in-flash-line:before {
  animation: explosion 3.5s ease-in-out infinite;
  animation-delay: 1.9s;
}

.durubox-image-wrap.active .size-other-lg .in-flash-line:before {
  animation-delay: 2.3s;
}

.durubox-image-wrap.active .in-sm-circle {
  animation-name: zoomIn, custom_pulse;
  animation-duration: 1s, 1s;
  animation-delay: 0s, 1.1s;
  animation-direction: alternate, alternate-reverse;
  animation-iteration-count: 1, infinite;
}

.durubox-image-wrap.active .in-md-circle {
  animation-name: zoomIn, custom_pulse;
  animation-duration: 1s, 1.2s;
  animation-delay: 0s, 1.1s;
  animation-direction: alternate, alternate-reverse;
  animation-iteration-count: 1, infinite;
}

@keyframes custom_pulse {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  50% {
    -webkit-transform: scale3d(1.15, 1.15, 1.15);
    transform: scale3d(1.15, 1.15, 1.15);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

/* END 두루박스 섹션 */

/* get-it-section */
.get-it-section {
  color: white;
}

.get-it-section:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  display: inline-block;
  width: 100%;
  height: 0%;
  background-color: #ffd500;
}

.get-it-section.active:before {
  height: 100%;
  transition: 1.4s;
  transition-delay: 0.7s;
  transition-timing-function: cubic-bezier(0.65, 0, 0.076, 1);
}

.get-it-section .in-icon-img {
  opacity: 0;
}

.get-it-section.active .in-icon-img {
  opacity: 1;
  animation-name: custom_jackInTheBox;
  animation-duration: 1s;
  animation-delay: 0s;
  animation-iteration-count: 1;
}

@keyframes custom_fadeInUp {
  0% {
    opacity: 0;
    transform: translate(-50%, 20px);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

@keyframes custom_jackInTheBox {
  from {
    opacity: 0;
    -webkit-transform: translateX(-50%) scale(0.1) rotate(30deg);
    transform: translateX(-50%) scale(0.1) rotate(30deg);
    /* -webkit-transform-origin: center bottom;
    transform-origin: center bottom; */
  }

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

  70% {
    -webkit-transform: translateX(-50%) rotate(3deg);
    transform: translateX(-50%) rotate(3deg);
  }

  to {
    opacity: 1;
    -webkit-transform: translateX(-50%) scale(1);
    transform: translateX(-50%) scale(1);
  }
}

.get-it-section .download-button {
  opacity: 0;
  transform: translateY(80px);
  display: inline-block;
}

.get-it-section.active .download-button {
  transform: translateY(0);
  opacity: 1;
  transition: 0.8s;
  transition-delay: 1.2s;
  transition-timing-function: cubic-bezier(0.51, 0.92, 0.24, 1.15);
}
/* END get-it-section */

/* 모바일 interaction */

/* 공통 */

@media all and (max-width: 768px) {
  @keyframes otherTypoAfter {
    100% {
      opacity: 1;
      height: 25px;
    }
  }
}

@media all and (max-width: 576px) {
  .bt-border-section .in-bottom-border {
    width: 0;
    max-width: 0;
  }

  .bt-border-section .in-bottom-border.active {
    width: 80%;
    max-width: 230px;
    transition: 2.3s;
    transition-timing-function: cubic-bezier(0.65, 0, 0.076, 1);
  }
}

.mobile-section-bg .in-element,
.mobile-section-bg .in-element-group,
.mobile-section-bg .in-element-img {
  opacity: 0;
}

.mobile-section-bg.active .in-element,
.mobile-section-bg.active .in-element-group,
.mobile-section-bg.active .in-element-img {
  opacity: 1;
}

/* END 공통 */

/* 두루캐시 section */
.common-title-group .cash-mobile-image-wrap .in-msg {
  opacity: 0;
  transform: translateY(30px);
}

.common-title-group.active .cash-mobile-image-wrap .in-msg {
  opacity: 1;
  transform: translateY(0);
  transition: 0.8s;

  transition-timing-function: cubic-bezier(0.51, 0.92, 0.24, 1.15);
  transition-delay: 0.9s;
}

.cash-section .mobile-section-bg.active .in-element,
.cash-section .mobile-section-bg.active .in-element-img {
  animation-name: patternAni01, patternAni02;
  animation-duration: 1.8s, 2s;
  animation-delay: 0s, 2s;
  animation-direction: alternate, alternate-reverse;
  animation-iteration-count: 1, infinite;
}

.cash-section .mobile-section-bg.active .in-xs-circle {
  animation-name: patternAni01, patternAni03;
  animation-duration: 1.8s, 1.5s;
  animation-delay: 0s, 1.8s;
}

.cash-section .mobile-section-bg.active .in-sm-circle {
  animation-name: patternAni01, patternAni02;
  animation-duration: 1.8s, 1.7s;
  animation-delay: 0s, 1.8s;
}

.cash-section .mobile-section-bg.active .in-other-md-circle {
  animation-name: patternAni01, patternAni03;
  animation-duration: 2s, 2.3s;
  animation-delay: 0s, 2s;
}

.cash-section .mobile-section-bg.active .in-md-circle {
  animation-name: patternAni01, patternAni04;
  animation-duration: 2.1s, 2s;
  animation-delay: 0s, 2.1s;
}

.cash-section .mobile-section-bg.active .in-bubble {
  animation-name: patternAni01, patternAni03;
  animation-duration: 2.5s, 2s;
  animation-delay: 0s, 2.5s;
}

.cash-section .mobile-section-bg.active .in-bubble-mini {
  animation-name: patternAni01, patternAni03;
  animation-duration: 2.3s, 1.8s;
  animation-delay: 0s, 2.3s;
}

.cash-section .mobile-section-bg.active .in-element-group {
  animation-name: custom_patternAni01, custom_patternAni02;
  animation-duration: 1.8s, 2s;
  animation-delay: 0s, 2s;
  animation-direction: alternate, alternate-reverse;
  animation-iteration-count: 1, infinite;
}

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

@keyframes custom_patternAni02 {
  0% {
    transform: translate(-50%, 5px);
  }
  50% {
    transform: translate(-50%, 15px);
  }
  100% {
    transform: translate(-50%, 0);
  }
}

/* END 두루캐시섹션 */

/* SNS 섹션 */
.talk-section .mobile-section-bg.active .in-element-img {
  opacity: 1;
  animation-name: patternAni01, patternAni02;
  animation-duration: 1.8s, 2s;
  animation-delay: 0s, 2s;
  animation-direction: alternate, alternate-reverse;
  animation-iteration-count: 1, infinite;
}

.talk-section .mobile-section-bg.active .in-element,
.talk-section .mobile-section-bg.active .in-element-group {
  opacity: 1;
  animation-name: zoomIn, patternAni02;
  animation-duration: 1.4s, 1.8s;
  animation-delay: 0s, 1.6s;
  animation-direction: alternate, alternate-reverse;
  animation-iteration-count: 1, infinite;
}

.talk-section .mobile-section-bg.active .in-md-circle {
  animation-name: zoomIn, patternAni03;
  animation-duration: 2s, 2.2s;
  animation-delay: 0s, 2s;
}

.talk-section .mobile-section-bg.active .in-element-group .in-md-circle {
  animation-name: zoomIn, patternAni02;
  animation-duration: 1.6s, 2.1s;
  animation-delay: 0s, 1.8s;
}

.talk-section .mobile-section-bg.active .in-element-group {
  animation-duration: 2s, 1.8s;
  animation-delay: 0s, 2s;
}

.talk-section .mobile-section-bg .in-view {
  opacity: 0;
  transform: translateY(80px);
}

.talk-section .mobile-section-bg.active .in-view {
  transform: translateY(0);
  opacity: 1;
  transition: 1s;
  transition-timing-function: cubic-bezier(0.51, 0.92, 0.24, 1.15);
}
/* END SNS 섹션 */

/* 두루박스 섹션 */
.durubox-mobile-image-wrap .in-view {
  opacity: 0;
  transform: translateY(2rem);
}

.durubox-mobile-image-wrap.active .in-view {
  transform: translateY(0);
  opacity: 1;
  transition: 1s;
  transition-timing-function: cubic-bezier(0.51, 0.92, 0.24, 1.15);
}

.durubox-section .mobile-section-bg.active .in-flash-line:before {
  animation: explosion 3.5s ease-in-out infinite;
}

.durubox-section .mobile-section-bg.active .size-xs .in-flash-line:before {
  animation: explosion 4s ease-in-out infinite;
  animation-delay: 0.3s;
}

.durubox-section
  .mobile-section-bg.active
  .size-other-xs
  .in-flash-line:before {
  animation: explosion 2.7s ease-in-out infinite;
  animation-delay: 1.6s;
}

.durubox-section .mobile-section-bg.active .size-sm .in-flash-line:before {
  animation: explosion 4s ease-in-out infinite;
  animation-delay: 0.3s;
}

.durubox-section
  .mobile-section-bg.active
  .size-other-sm
  .in-flash-line:before {
  animation: explosion 3.2s ease-in-out infinite;
  animation-delay: 2.15s;
}

.durubox-section .mobile-section-bg.active .size-md .in-flash-line:before {
  animation: explosion 3s ease-in-out infinite;
  animation-delay: 0.4s;
}

.durubox-section
  .mobile-section-bg.active
  .size-other-md
  .in-flash-line:before {
  animation: explosion 3s ease-in-out infinite;
  animation-delay: 2s;
}

.durubox-section .mobile-section-bg.active .size-lg .in-flash-line:before {
  animation: explosion 3s ease-in-out infinite;
  animation-delay: 0.4s;
}

.durubox-section
  .mobile-section-bg.active
  .size-other-lg
  .in-flash-line:before {
  animation: explosion 2.5s ease-in-out infinite;
  animation-delay: 2s;
}

@keyframes explosion {
  0% {
    top: 100%;
  }
  33%,
  100% {
    top: -50%;
  }
}

.durubox-section .mobile-section-bg.active .in-sm-circle {
  animation-name: zoomIn, custom_pulse;
  animation-duration: 1s, 1s;
  animation-delay: 0s, 1.1s;
  animation-direction: alternate, alternate-reverse;
  animation-iteration-count: 1, infinite;
}

.durubox-section .mobile-section-bg.active .in-md-circle {
  animation-name: zoomIn, custom_pulse;
  animation-duration: 1s, 1.2s;
  animation-delay: 0s, 1.1s;
  animation-direction: alternate, alternate-reverse;
  animation-iteration-count: 1, infinite;
}

@keyframes custom_pulse {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  50% {
    -webkit-transform: scale3d(1.15, 1.15, 1.15);
    transform: scale3d(1.15, 1.15, 1.15);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
/* END 두루박스 섹션 */

/* END 모바일 interaction */