@font-face {
  font-family: "SF Pro Text";
  src: url("./font/SFProText-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "SF Pro Text";
  src: url("./font/SFProText-RegularItalic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
}
@font-face {
  font-family: "SF Pro Text";
  src: url("./font/SFProText-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: "SF Pro Text";
  src: url("./font/SFProText-LightItalic.ttf") format("truetype");
  font-weight: 300;
  font-style: italic;
}
@font-face {
  font-family: "SF Pro Text";
  src: url("./font/SFProText-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: "SF Pro Text";
  src: url("./font/SFProText-MediumItalic.ttf") format("truetype");
  font-weight: 500;
  font-style: italic;
}
@font-face {
  font-family: "SF Pro Text";
  src: url("./font/SFProText-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: "SF Pro Text";
  src: url("./font/SFProText-BoldItalic.ttf") format("truetype");
  font-weight: 700;
  font-style: italic;
}
@font-face {
  font-family: "SF Pro Text";
  src: url("./font/SFProText-Semibold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
}
@font-face {
  font-family: "SF Pro Text";
  src: url("./font/SFProText-SemiboldItalic.ttf") format("truetype");
  font-weight: 600;
  font-style: italic;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "PingFang SC", "SF Pro Text", sans-serif;
}

html,
body {
  height: 100%;
  -webkit-touch-callout: none;
  user-select: none;
}

body {
  -webkit-text-size-adjust: none;
  overflow-x: hidden;
}

.img-box img {
  width: 100%;
  display: block;
}

.main {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: url("./img/bg.png") no-repeat center center/100% 100%;
}

.head {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 100rem 0 100rem;
  background: #ffffff;
  z-index: 222;
}
.head .left-box {
  display: flex;
  align-items: center;
  height: 100rem;
}
.head .left-box .logo {
  width: 60rem;
  height: 60rem;
  background: url("./img/logo.png") no-repeat center center/100% 100%;
  margin-right: 10rem;
}
.head .left-box .logo-text {
  font-family: "SF Pro Text";
  font-size: 24rem;
  font-weight: 900;
  color: #063AF0;
}
.head .right-box {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100rem;
  cursor: pointer;
}
.head .right-box .tab {
  color: #666;
  font-family: "SF Pro Text";
  font-size: 24rem;
  font-weight: 400;
  margin-right: 88rem;
  position: relative;
  padding-bottom: 8rem;
}
.head .right-box .tab.active {
  color: #000;
  font-weight: 600;
}
.head .right-box .tab.active::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 4rem;
  background: #2678e1;
  border-radius: 2rem;
}
.head .right-box .tab:hover {
  color: #000;
}

.tab1-container {
  width: 100vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 100rem;
}
.tab1-container .tab1-bg1 {
  width: 1920rem;
  height: 1550rem;
  background: url("./img/tab1_1.png") no-repeat center center/100% 100%;
  position: relative;
  z-index: 2;
}
.tab1-container .tab1-bg2 {
  width: 1920rem;
  height: 1141rem;
  background: url("./img/tab1_2.png") no-repeat center center/100% 100%;
  margin-top: 100rem;
  position: relative;
  z-index: 1;
}
.tab1-container .tab1-bg3 {
  width: 1920rem;
  height: 816rem;
  background: url("./img/tab1_3.png") no-repeat center center/100% 100%;
  margin-top: 100rem;
}
.tab1-container .tab1-bg4 {
  width: 1920rem;
  height: 857rem;
  background: url("./img/tab1_4.png") no-repeat center center/100% 100%;
  position: relative;
  margin-top: 100rem;
}
.tab1-container .tab1-bg5 {
  width: 1920rem;
  height: 1321rem;
  background: url("./img/tab1_5.png") no-repeat center center/100% 100%;
  margin-top: 100rem;
}
.tab1-container .tab1-bg6 {
  width: 1920rem;
  height: 1087rem;
  background: url("./img/tab1_6.png") no-repeat center center/100% 100%;
  margin: 100rem 0;
}
.tab1-container .tab1-bg2,
.tab1-container .tab1-bg3,
.tab1-container .tab1-bg4,
.tab1-container .tab1-bg5,
.tab1-container .tab1-bg6 {
  opacity: 0;
  transition: none;
}
.tab1-container .tab1-bg2.animate {
  animation: slideInFromRight 1s ease-out forwards;
  animation-delay: 0.6s;
}
.tab1-container .tab1-bg3.animate {
  animation: slideInFromLeft 1s ease-out forwards;
  animation-delay: 1.2s;
}
.tab1-container .tab1-bg4.animate {
  animation: slideInFromRight 1s ease-out forwards;
  animation-delay: 1.8s;
}
.tab1-container .tab1-bg5.animate {
  animation: slideInFromLeft 1s ease-out forwards;
  animation-delay: 2.4s;
}
.tab1-container .tab1-bg6.animate {
  animation: slideInFromRight 1s ease-out forwards;
  animation-delay: 3s;
}

.tab2-container {
  width: 100vw;
  display: none;
  flex-direction: column;
  align-items: center;
  padding-top: 100rem;
}
.tab2-container .tab2-bg1 {
  width: 1920rem;
  height: 1550rem;
  background: url("./img/tab2_1.png") no-repeat center center/100% 100%;
  position: relative;
  z-index: 2;
}
.tab2-container .tab2-bg2 {
  width: 1920rem;
  height: 1117rem;
  background: url("./img/tab2_2.png") no-repeat center center/100% 100%;
  margin-top: 100rem;
}
.tab2-container .tab2-bg3 {
  width: 1920rem;
  height: 1620rem;
  background: url("./img/tab2_3.png") no-repeat center center/100% 100%;
  margin: 100rem 0;
}

.tab3-container {
  width: 1920rem;
  height: 100%;
  display: none;
  flex-direction: column;
  align-items: center;
  padding-top: 100rem;
}
.tab3-container .tab3-bg1 {
  width: 1920rem;
  height: 1550rem;
  background: url("./img/tab3_1.png") no-repeat center center/100% 100%;
  position: relative;
}
.tab3-container .product-carousel {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 300rem;
}
.tab3-container .product-cards-container {
  position: relative;
  width: 1519rem;
  height: 1136rem;
}
.tab3-container .product-card {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transform: translateX(100%);
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.tab3-container .product-card.active {
  opacity: 1;
  transform: translateX(0);
  z-index: 2;
}
.tab3-container .product-card.prev {
  transform: translateX(-100%);
}
.tab3-container .product-card.next {
  transform: translateX(100%);
}
.tab3-container .product-carousel .carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 126rem;
  height: 126rem;
  cursor: pointer;
  z-index: 10;
}
.tab3-container .product-carousel .carousel-btn.product-prev {
  left: 38rem;
  background: url("./img/left_arrow.png") no-repeat center center/100% 100%;
}
.tab3-container .product-carousel .carousel-btn.product-next {
  right: 38rem;
  background: url("./img/right_arrow.png") no-repeat center center/100% 100%;
}
.tab3-container .product-indicators {
  display: flex;
  justify-content: center;
  gap: 16rem;
  margin-top: 120rem;
}
.tab3-container .product-indicators .indicator {
  width: 76rem;
  height: 18rem;
  border-radius: 41rem;
  background: #C5C5C5;
  cursor: pointer;
  transition: all 0.3s ease;
}
.tab3-container .product-indicators .indicator.active {
  width: 136rem;
  background: #063AF0;
}
.tab3-container .tab3-bg2 {
  width: 1367.1rem;
  height: 1022.4rem;
  background: url("./img/product_1.png") no-repeat center center/100% 100%;
  position: relative;
}
.tab3-container .tab3-bg2 .service, .tab3-container .tab3-bg2 .privacy, .tab3-container .tab3-bg2 .child-safety-policy {
  bottom: 281rem;
}
.tab3-container .tab3-bg2 .googleplay {
  bottom: -70rem;
}
.tab3-container .tab3-bg3 {
  width: 1367.1rem;
  height: 817.2rem;
  background: url("./img/product_2.png") no-repeat center center/100% 100%;
  position: relative;
}
.tab3-container .tab3-bg4 {
  width: 1367.1rem;
  height: 817.2rem;
  background: url("./img/product_3.png") no-repeat center center/100% 100%;
  position: relative;
}
.tab3-container .tab3-bg5 {
  width: 1367.1rem;
  height: 817.2rem;
  background: url("./img/product_4.png") no-repeat center center/100% 100%;
  position: relative;
}
.tab3-container .tab3-bg6 {
  width: 1367.1rem;
  height: 835.2rem;
  background: url("./img/product_5.png") no-repeat center center/100% 100%;
  position: relative;
}
.tab3-container .privacy {
  position: absolute;
  bottom: 20rem;
  left: 563rem;
  font-family: "SF Pro Text";
  font-weight: 400;
  font-size: 28rem;
  line-height: 28rem;
  color: #777777;
  text-decoration: underline;
  cursor: pointer;
}
.tab3-container .service {
  position: absolute;
  bottom: 20rem;
  left: 830rem;
  font-family: "SF Pro Text";
  font-weight: 400;
  font-size: 28rem;
  line-height: 28rem;
  color: #777777;
  text-decoration: underline;
  cursor: pointer;
}
.tab3-container .child-safety-policy {
  position: absolute;
  bottom: 20rem;
  left: 1140rem;
  font-family: "SF Pro Text";
  font-weight: 400;
  font-size: 28rem;
  line-height: 28rem;
  color: #777777;
  text-decoration: underline;
  cursor: pointer;
  white-space: nowrap;
}
.tab3-container .googleplay {
  width: 408rem;
  height: 158rem;
  background: url("./img/googleplay.png") no-repeat center center/100% 100%;
  position: absolute;
  bottom: -200rem;
  right: 485rem;
  cursor: pointer;
}

.tab4-container {
  width: 100vw;
  display: none;
  flex-direction: column;
  align-items: center;
  padding-top: 100rem;
}
.tab4-container .tab4-bg1 {
  width: 1920rem;
  height: 1550rem;
  background: url("./img/tab4_1.png") no-repeat center center/100% 100%;
  position: relative;
  z-index: 2;
}
.tab4-container .social-carousel {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 300rem;
}
.tab4-container .social-cards-container {
  position: relative;
  width: 1443rem;
  height: 1383rem;
  overflow: hidden;
}
.tab4-container .social-card {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transform: translateX(100%);
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.tab4-container .social-card.active {
  opacity: 1;
  transform: translateX(0);
  z-index: 2;
}
.tab4-container .social-card.prev {
  transform: translateX(-100%);
}
.tab4-container .social-card.next {
  transform: translateX(100%);
}
.tab4-container .social-carousel .carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 126rem;
  height: 126rem;
  cursor: pointer;
  z-index: 10;
}
.tab4-container .social-carousel .carousel-btn.social-prev {
  left: 38rem;
  background: url("./img/left_arrow.png") no-repeat center center/100% 100%;
}
.tab4-container .social-carousel .carousel-btn.social-next {
  right: 38rem;
  background: url("./img/right_arrow.png") no-repeat center center/100% 100%;
}
.tab4-container .social-indicators {
  display: flex;
  justify-content: center;
  gap: 16rem;
  margin-top: 60rem;
}
.tab4-container .social-indicators .indicator {
  width: 76rem;
  height: 18rem;
  border-radius: 41rem;
  background: #C5C5C5;
  cursor: pointer;
  transition: all 0.3s ease;
}
.tab4-container .social-indicators .indicator.active {
  width: 136rem;
  background: #063AF0;
}
.tab4-container .tab4-bg2 {
  width: 1443rem;
  height: 692rem;
  background: url("./img/social_1.png") no-repeat center center/100% 100%;
}
.tab4-container .tab4-bg3 {
  width: 1430rem;
  height: 611rem;
  background: url("./img/social_2.png") no-repeat center center/100% 100%;
  margin: 80rem auto 0;
}
.tab4-container .tab4-bg4 {
  width: 1430rem;
  height: 611rem;
  background: url("./img/social_3.png") no-repeat center center/100% 100%;
}
.tab4-container .tab4-bg5 {
  width: 1430rem;
  height: 611rem;
  background: url("./img/social_4.png") no-repeat center center/100% 100%;
  margin: 80rem auto 0;
}
.tab4-container .tab4-bg6 {
  width: 1430rem;
  height: 611rem;
  background: url("./img/social_5.png") no-repeat center center/100% 100%;
}
.tab4-container .tab4-bg7 {
  width: 1430rem;
  height: 611rem;
  background: url("./img/social_6.png") no-repeat center center/100% 100%;
  margin: 80rem auto 0;
}

.tab5-container {
  width: 100vw;
  display: none;
  flex-direction: column;
  align-items: center;
  padding-top: 100rem;
}
.tab5-container .tab5-bg1 {
  width: 1920rem;
  height: 1550rem;
  background: url("./img/tab5_1.png") no-repeat center center/100% 100%;
  position: relative;
  z-index: 2;
}
.tab5-container .tab5-bg2 {
  width: 145rem;
  height: 2598rem;
  background: url("./img/line.png") no-repeat center center/100% 100%;
  position: relative;
  margin-bottom: 500rem;
}
.tab5-container .line-1 {
  width: 1645rem;
  height: 356rem;
  background: url("./img/line_1.png") no-repeat center center/100% 100%;
  position: absolute;
  top: 200rem;
  left: -686rem;
}
.tab5-container .line-2 {
  width: 1651rem;
  height: 356rem;
  background: url("./img/line_2.png") no-repeat center center/100% 100%;
  position: absolute;
  top: 756rem;
  left: -816rem;
}
.tab5-container .line-3 {
  width: 1645rem;
  height: 356rem;
  background: url("./img/line_3.png") no-repeat center center/100% 100%;
  position: absolute;
  top: 1312rem;
  left: -685rem;
}
.tab5-container .line-4 {
  width: 1651rem;
  height: 356rem;
  background: url("./img/line_4.png") no-repeat center center/100% 100%;
  position: absolute;
  top: 1868rem;
  left: -816rem;
}
.tab5-container .line-5 {
  width: 1645rem;
  height: 356rem;
  background: url("./img/line_5.png") no-repeat center center/100% 100%;
  position: absolute;
  top: 2424rem;
  left: -686rem;
}

.tab6-container {
  width: 100vw;
  display: none;
  flex-direction: column;
  align-items: center;
  padding-top: 100rem;
}
.tab6-container .tab6-bg1 {
  width: 1920rem;
  height: 1550rem;
  background: url("./img/tab6_1.png") no-repeat center center/100% 100%;
  position: relative;
  z-index: 2;
}
.tab6-container .job-carousel {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 300rem;
}
.tab6-container .job-cards-container {
  position: relative;
  width: 1518rem;
  height: 1367rem;
  overflow: hidden;
  border-radius: 20rem;
}
.tab6-container .job-card {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transform: translateX(100%);
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.tab6-container .job-card.active {
  opacity: 1;
  transform: translateX(0);
  z-index: 2;
}
.tab6-container .job-card.prev {
  transform: translateX(-100%);
}
.tab6-container .job-card.next {
  transform: translateX(100%);
}
.tab6-container .job-carousel .carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 126rem;
  height: 126rem;
  cursor: pointer;
  z-index: 10;
}
.tab6-container .job-carousel .carousel-btn.job-prev {
  left: 38rem;
  background: url("./img/left_arrow.png") no-repeat center center/100% 100%;
}
.tab6-container .job-carousel .carousel-btn.job-next {
  right: 38rem;
  background: url("./img/right_arrow.png") no-repeat center center/100% 100%;
}
.tab6-container .job-indicators {
  display: flex;
  justify-content: center;
  gap: 16rem;
  margin-top: 60rem;
}
.tab6-container .job-indicators .indicator {
  width: 76rem;
  height: 18rem;
  border-radius: 41rem;
  background: #C5C5C5;
  cursor: pointer;
  transition: all 0.3s ease;
}
.tab6-container .job-indicators .indicator.active {
  width: 136rem;
  background: #063AF0;
}
.tab6-container .tab6-bg2 {
  width: 1518rem;
  height: 1367rem;
  background: url("./img/join_1.png") no-repeat center center/100% 100%;
  position: relative;
}
.tab6-container .tab6-bg2 .title {
  top: 14rem;
}
.tab6-container .tab6-bg3 {
  width: 1518rem;
  height: 1296rem;
  background: url("./img/join_2.png") no-repeat center center/100% 100%;
  position: relative;
}
.tab6-container .tab6-bg4 {
  width: 1518rem;
  height: 1367rem;
  background: url("./img/join_3.png") no-repeat center center/100% 100%;
  position: relative;
}
.tab6-container .tab6-bg4 .title {
  top: 14rem;
}
.tab6-container .tab6-bg5 {
  width: 1518rem;
  height: 1272rem;
  background: url("./img/join_4.png") no-repeat center center/100% 100%;
  position: relative;
}
.tab6-container .tab6-bg5 .title {
  top: 0rem;
}
.tab6-container .title {
  position: absolute;
  top: 0rem;
  left: 50%;
  transform: translateX(-50%);
  font-weight: 900;
  font-size: 68rem;
  line-height: 1;
  letter-spacing: 0rem;
  text-align: center;
  font-style: italic;
  color: #000000;
  white-space: nowrap;
}
.tab6-container .title span {
  color: #063AF0;
}

.btn1, .btn2, .btn3 {
  width: 340rem;
  height: 80rem;
  cursor: pointer;
}

.btn4 {
  width: 400rem;
  height: 110rem;
  cursor: pointer;
}

.footer {
  width: 1920rem;
  height: 595rem;
  background: url("./img/footer.png") no-repeat center center/100% 100%;
  position: relative;
}

.email {
  position: absolute;
  bottom: 333rem;
  left: 1324rem;
  width: 304rem;
  height: 70rem;
  z-index: 3;
  cursor: pointer;
}

@keyframes float {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
  100% {
    transform: translateY(0);
  }
}
.float {
  animation: float 2s ease-in-out infinite;
}

@keyframes float2 {
  0% {
    transform: translateY(0) rotate(25deg);
  }
  50% {
    transform: translateY(-5px) rotate(25deg);
  }
  100% {
    transform: translateY(0) rotate(25deg);
  }
}
.float2 {
  animation: float2 2s ease-in-out infinite;
}

@keyframes slideInRight {
  0% {
    opacity: 0;
    transform: translateX(300px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes slideInLeft {
  0% {
    opacity: 0;
    transform: translateX(-300px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes slideInUp {
  0% {
    opacity: 0;
    transform: translateY(300px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes slideInDown {
  0% {
    opacity: 0;
    transform: translateY(-300px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes floatAfter {
  0% {
    transform: translateX(0) translateY(0);
  }
  50% {
    transform: translateX(0) translateY(-8px);
  }
  100% {
    transform: translateX(0) translateY(0);
  }
}
@keyframes slideInFromLeft {
  0% {
    opacity: 0;
    transform: translateX(-100%);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes slideInFromRight {
  0% {
    opacity: 0;
    transform: translateX(100%);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
.tab5-container .line-1,
.tab5-container .line-2,
.tab5-container .line-3,
.tab5-container .line-4,
.tab5-container .line-5 {
  opacity: 0;
  transition: none;
}
.tab5-container .line-1.animate.line-1,
.tab5-container .line-2.animate.line-1,
.tab5-container .line-3.animate.line-1,
.tab5-container .line-4.animate.line-1,
.tab5-container .line-5.animate.line-1 {
  animation: slideInFromLeft 1s ease-out forwards;
  animation-delay: 0.6s;
}
.tab5-container .line-1.animate.line-2,
.tab5-container .line-2.animate.line-2,
.tab5-container .line-3.animate.line-2,
.tab5-container .line-4.animate.line-2,
.tab5-container .line-5.animate.line-2 {
  animation: slideInFromRight 1s ease-out forwards;
  animation-delay: 1.2s;
}
.tab5-container .line-1.animate.line-3,
.tab5-container .line-2.animate.line-3,
.tab5-container .line-3.animate.line-3,
.tab5-container .line-4.animate.line-3,
.tab5-container .line-5.animate.line-3 {
  animation: slideInFromLeft 1s ease-out forwards;
  animation-delay: 1.8s;
}
.tab5-container .line-1.animate.line-4,
.tab5-container .line-2.animate.line-4,
.tab5-container .line-3.animate.line-4,
.tab5-container .line-4.animate.line-4,
.tab5-container .line-5.animate.line-4 {
  animation: slideInFromRight 1s ease-out forwards;
  animation-delay: 2.4s;
}
.tab5-container .line-1.animate.line-5,
.tab5-container .line-2.animate.line-5,
.tab5-container .line-3.animate.line-5,
.tab5-container .line-4.animate.line-5,
.tab5-container .line-5.animate.line-5 {
  animation: slideInFromLeft 1s ease-out forwards;
  animation-delay: 3s;
}
.tab5-container .line-1.animate {
  animation: slideInFromLeft 1s ease-out forwards;
  animation-delay: 0.2s;
}
.tab5-container .line-2.animate {
  animation: slideInFromRight 1s ease-out forwards;
  animation-delay: 0.4s;
}
.tab5-container .line-3.animate {
  animation: slideInFromLeft 1s ease-out forwards;
  animation-delay: 0.6s;
}
.tab5-container .line-4.animate {
  animation: slideInFromRight 1s ease-out forwards;
  animation-delay: 0.8s;
}
.tab5-container .line-5.animate {
  animation: slideInFromLeft 1s ease-out forwards;
  animation-delay: 1s;
}

@keyframes slideInFromRightCarousel {
  0% {
    opacity: 0;
    transform: translateX(100%);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes slideInFromLeftCarousel {
  0% {
    opacity: 0;
    transform: translateX(-100%);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes slideOutToLeft {
  0% {
    opacity: 1;
    transform: translateX(0);
  }
  100% {
    opacity: 0;
    transform: translateX(-100%);
  }
}
@keyframes slideOutToRight {
  0% {
    opacity: 1;
    transform: translateX(0);
  }
  100% {
    opacity: 0;
    transform: translateX(100%);
  }
}
@keyframes fadeInScale {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}