#index .banner {
  background: #501556;
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  display: flex;
  align-items: start;
  justify-content: center;
}

#index .banner .text {
  text-align: center;
  margin-top: 3rem;
}

#index .banner .text h1 {
  color: #fff;
  font-size: 4rem;
  font-family: ttcbold;
}

#index .banner .text .btn {
  background: #df5066;
  padding: 0.4rem 2rem;
  border-radius: 1rem;
  color: #fff;
  font-family: ttcmedium;
  margin-top: 2.5rem;
}

#index .banner .shape1 {
  position: absolute;
  top: 23%;
  left: 10%;
  width: 250px;
}

#index .banner .shape2 {
  position: absolute;
  top: 48%;
  left: 25%;
  width: 200px;
}

#index .banner .shape3 {
  position: absolute;
  bottom: 0;
  right: 20%;
  width: 250px;
}

#index .banner .shape4 {
  position: absolute;
  top: 35%;
  right: 14%;
  width: 270px;
}

#index .banner .shape5 {
  position: absolute;
  top: 12%;
  right: 5%;
  width: 100px;
}

#index .banner .shape6 {
  position: absolute;
  bottom: 25%;
  right: 2%;
  width: 150px;
}

#index .banner .char1 {
  width: 350px;
  height: auto;
  position: absolute;
  left: -2%;
  bottom: 10%;
  rotate: -10deg;
}

#index .banner .char2 {
  width: 280px;
  height: auto;
  position: absolute;
  left: 0;
  top: 7%;
  rotate: -33deg;
}

#index .banner .char3 {
  width: 300px;
  height: auto;
  position: absolute;
  left: 21%;
  top: 37%;
  rotate: 0deg;
}

#index .banner .char4 {
  width: 350px;
  height: auto;
  position: absolute;
  right: 2%;
  bottom: 11%;
  rotate: 11deg;
}

#index .banner .char5 {
  width: 250px;
  height: auto;
  position: absolute;
  right: 21%;
  top: 24%;
  rotate: 11deg;
}

#index .banner .char6 {
  width: 250px;
  height: auto;
  position: absolute;
  right: 3%;
  top: -3%;
  rotate: 210deg;
}

#index .about {
  padding: 3rem 0;
}
#index .about .items {
}
#index .about .items .item{
  color: #fff;
  font-size: 1rem;
  font-family: ttcregular;
  line-height: 1rem;
  margin-top: 30px;
}
#index .about .items .item > div {
  background-color: #000;
  padding:2rem;
  border-radius: 2rem;
  height: 100%;
}
#index .about .items .item .ratio{
  /* padding:0 25% */
}
#index .about .items .item img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom center;
}
#index .about .items .item .img{
  max-width: 18%;
  margin:0 auto
}
#index .about .items .item p{
  width: 100%;
  margin-top: 1rem;
}
#index .about .items .item:nth-child(1) > div{
  background-color: #425CC6;
}
#index .about .items .item:nth-child(2) > div{
  background-color: #B230C4;
}
#index .about .items .item:nth-child(3) > div{
  background-color: #501556;
}

#index .about .left h1 {
  color: #B230C4;
  font-family: ttcbold;
  font-size: 3rem;
}

#index .about .left p {
  color: #501556;
  font-family: ttcmedium;
  font-size: 1rem;
  margin-top: 1rem;
}

#index .about .right .char {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#index .about .items .item p {
  color: #fff;
  font-family: ttcmedium;
  font-size: 1rem;
  margin-top: 1rem;
  text-align: center;
}

#index .whereweare {
  background: #ffe3de;
  position: relative;
  overflow: hidden;
  /* display: flex; */
  /* align-items: start; */
  /* justify-content: center; */
}
#index .whereweare .btn{
  background: #52005b;
  padding: 0.4rem 2rem;
  border-radius: 1rem;
  color: #fff;
  font-family: ttcmedium;
  margin-top: 30px;
}

#index .whereweare .btnModal{
  display: none;
}
#index .whereweare .text {
  text-align: center;
  margin-top: 3rem;
}

#index .whereweare .text h1 {
  color: #580b59;
  font-size: 4rem;
  font-family: ttcbold;
  text-transform: capitalize;
}

#index .whereweare .text p {
  color: #52005b;
  font-size: 1rem;
  font-family: ttcmedium;
  position: relative;
  z-index: 1;
}

#index .whereweare .swiper-globe {
  margin-top: 3rem;
  position: relative;
  width: 800px;
}

#index .whereweare .swiper-globe p {
  text-align: center;
  margin-top: 15px;
}


#index .whereweare .swiper-globe .arrow-swiper .button-prev,
#index .whereweare .swiper-globe .arrow-swiper .button-next {
  background: #fff;
  width: 50px;
  height: 50px;
  line-height: 50px;
  display: flex;
  text-align: center;
  border-radius: 50%;
  z-index: 1;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0
}

#index .whereweare .swiper-globe .arrow-swiper .button-prev {
  left: 50%;
  margin-left: 150px;
}

#index .whereweare .swiper-globe .arrow-swiper .button-next {
  right: 50%;
  margin-right: 150px;
}


#index .whereweare .swiper-globe .arrow-swiper .button-prev svg,
#index .whereweare .swiper-globe .arrow-swiper .button-next svg {
  width: 25px;
  height: 25px;
  color: #000;
}

#index .whereweare .swiper-globe .swiper-slide h3 {
  color: #af4fc3;
  font-size: 1.2rem;
  background: #fff;
  text-align: center;
  border-radius: 30px;
  padding: 0.8rem 1rem;
  width: 200px;
  margin: 0 auto;
  font-family: ttcregular;
}
#index .whereweare .swiper-globe .swiper-slide h3.active {
  background-color: #501556;
  color:#fff
}

#index .whereweare .globeCtn {
  height: 40vh;
  overflow: hidden;
  position: relative;
  cursor: pointer;
}

#index .whereweare .globeCtnInner {
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
}

#index .whereweare .globe {
  width: 100%;
  object-fit: cover;
  position: relative;
  /* z-index: 3; */
  transition: all .5s;
  /* margin-top: -20vh; */
}

#index .whereweare .items {
  margin-top: 3rem;
}

#index .whereweare .items .item {
  text-align: center;
}

#index .whereweare .items .item img {
  width: 100%;
  transform: rotate(-10deg);
  border-radius: 60px;
}

#index .whereweare .items .item p {
  font-size: 1.2rem;
  margin-top: 1rem;
  font-family: ttcmedium;
  color: #501556;
}

#index .whereweare .cloud1 {
  position: absolute;
  top: 2%;
  left: 0;
  width: 100%;
}

#index .whereweare .cloud2 {
  position: absolute;
  top: 3%;
  left: 0;
  width: 100%;
}

#index .whereweare .cloud3 {
  position: absolute;
  top: 25%;
  left: 50%;
  width: 50%;
  transform: translateX(-50%) !important;
}

#index .whereweare .cloud1,
#index .whereweare .cloud2,
#index .whereweare .cloud3 {
  transition: transform 0.2s ease-out;
}

#index .ourvalues {
  background: #dcdff7;
  padding: 3rem 0;
}

#index .ourvalues .text {
  text-align: center;
}

#index .ourvalues .text h1 {
  color: #580b59;
  font-size: 3rem;
  font-family: ttcbold;
}

#index .ourvalues .text p {
  color: #52005b;
  font-size: 1rem;
  font-family: ttcmedium;
}

#index .ourvalues .items {
  margin-top: 3rem;
}

#index .ourvalues .items .item {
  text-align: center;
  padding: 2rem;
  border-radius: 2rem;
  cursor: pointer;
  height: 100%;
  transition: all .5s;
}

#index .ourvalues .items .item lottie-player {
  width: 100%;
  height: 100%;
}

#index .ourvalues .items .item:hover {
  transform: scale(1.1);
}

#index .ourvalues .items .item .btn {
  border-radius: 2rem;
  color: #501556;
  font-size: 1rem;
  font-family: ttcmedium;
  text-align: center;
  padding: .3rem 1.5rem;
  border: 1px solid transparent;
  background-color: #fff;
  opacity: 0;
  transition: all .5s;
  margin-top: 15px;
}

#index .ourvalues .items .item:hover .btn {
  opacity: 1;
}

#index .ourvalues .items .item.item1 {
  background: #a357bd;
}

#index .ourvalues .items .item.item2 {
  background: #e18064;
}

#index .ourvalues .items .item.item3 {
  background: #501556;
}

#index .ourvalues .items .item.item4 {
  background: #425cc6;
}

#index .ourvalues .items .item.item1 .btn {
  color: #a357bd;
}

#index .ourvalues .items .item.item2 .btn {
  color: #e18064;
}

#index .ourvalues .items .item.item3 .btn {
  color: #501556;
}

#index .ourvalues .items .item.item4 .btn {
  color: #425cc6;
}

#index .ourvalues .items .item img {
  width: 100%;
  height: 200px;
  object-fit: contain;
}

#index .ourvalues .items .item h2 {
  color: #fff;
  font-size: 1.5rem;
  font-family: ttcbold;
  margin-top: 1rem;
}

#index .ourvalues .items .item p {
  color: #fff;
  font-size: 1rem;
  font-family: ttcregular;
  margin-top: 1rem;
  line-height: 1rem;
}

#index .ourculture {
  background: #eeebe6;
  padding: 3rem 0;
}

#index .ourculture .text {
  text-align: center;
}

#index .ourculture .text h1 {
  color: #580b59;
  font-size: 3rem;
  font-family: ttcbold;
}

#index .ourculture .text p {
  color: #52005b;
  font-size: 1rem;
  font-family: ttcmedium;
}

#index .ourculture .items {
  margin-top: 3rem;
}

#index .ourculture .items>div {
  margin-bottom: 2rem;
}

#index .ourculture .items .item {
  padding: 2rem;
  border-radius: 2rem;
  cursor: pointer;
  height: 100%;
}

#index .ourculture .items .item.item1 {
  background: #a3b6e9;
}

#index .ourculture .items .item.item2 {
  background: #501556;
}

#index .ourculture .items .item.item3 {
  background: #da9fe9;
}

#index .ourculture .items .item.item4 {
  background: #e18064;
}

#index .ourculture .items .item h2 {
  color: #fff;
  font-size: 1.5rem;
  font-family: ttcbold;
  text-transform: capitalize;
}

#index .ourculture .items .item p {
  color: #fff;
  font-size: 1rem;
  font-family: ttcregular;
  margin-top: 1rem;
  line-height: 1rem;
}

#index .ourculture .items .item>div .right img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

#index .leaders {
  background: #e6e6e6;
  padding: 3rem 0;
}

#index .leaders h1 {
  color: #580b59;
  font-size: 3rem;
  font-family: ttcbold;
}

#index .leaders .items {
  margin-top: 1rem;
}

#index .leaders .left p {
  color: #52005b;
  font-size: 1rem;
  font-family: ttcmedium;
  width: 80%;
}

#index .leaders .left ul {
  margin-top: 5rem;
  list-style-type: none;
  padding: 0;
  width: 80%;
}

#index .leaders .left ul li {
  color: #501556;
  cursor: pointer;
  font-size: 1rem;
  font-family: ttcmedium;
  text-align: center;
  margin-bottom: 1rem;
  padding: 0.6rem 3rem;
  border: 1px solid transparent;
}

.visible {
  opacity:0
}
#index .leaders .left ul li.active {
  background: #52005b;
  padding: 0.6rem 3rem;
  border-radius: 2rem;
  color:#fff
  /* border: 1px solid #501556; */
}

#index .leaders .left .char {
  width: 70%;
}

#index .leaders .right {
  /* height: 100vh; */
  overflow-y: scroll;
  overflow-x: hidden;
  padding-right: 30px;
}

#index .leaders .right a {
  text-decoration: none;
}

#index .leaders .right .top {
  text-align: center;
}

#index .leaders .right .img {
  position: relative;
  transform: scale(0.8);
  transition: transform 0.3s ease;
}

#index .leaders .right a:hover .img {
  transform: scale(1);
}

#index .leaders .right .img img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60%;
}

#index .leaders .right .ctn {
  margin-top: 1rem;
}

#index .leaders .right>div {
  border-bottom: 1px solid #501556;
  padding-bottom: 4rem;
}
#index .leaders .right>div:last-child{
  border-bottom: none;
}

#index .leaders .right .ctn .top {
  margin-bottom: 1rem;
}

#index .leaders .right div:not(:first-child) h2 {
  margin-top: 2rem;
}

#index .leaders .right h2 {
  color: #501556;
  font-size: 1rem;
  font-family: ttcbold;
}

#index .leaders .right h5 {
  color: #501556;
  margin: 0 -55px;
  margin-top: 15px;
  font-size: 1rem;
  font-family: ttcregular;
}

#index .leaders .right h5 span {
  font-family: ttcbold;
  font-size: 1.2rem;
}

#index .milestone {
  background: #432399;
  position: relative;
  overflow: hidden;
  padding: 3rem 0 0;
}

#index .milestone h1 {
  color: #fff;
  font-size: 3rem;
  font-family: ttcbold;
  text-align: center;
}

#index .milestone .bg1 {
  width: 50%;
  position: absolute;
  top: -15%;
  left: 5%;
  opacity: 0.1;
  transition: transform 0.2s ease-out;
}

#index .milestone .bg2 {
  width: 60%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-30%, -50%);
  opacity: 0.1;
  transition: transform 0.2s ease-out;
}

#index .milestone .bg3 {
  width: 30%;
  position: absolute;
  right: 5%;
  opacity: 0.1;
  top: 50%;
  transition: transform 0.2s ease-out;
}

#index .milestone .swiper-milestone {
  margin-top: 3rem;
}

#index .milestone .swiper-milestone .left h3 {
  background: #f0a68c;
  font-size: 2rem;
  font-family: ttcregular;
  color: #fff;
  padding: 0.4rem 1rem;
  border-radius: 30px;
  text-align: center;
}

#index .milestone .swiper-milestone .right h3 {
  font-size: 4rem;
  font-family: ttcbold;
  color: #fff;
}
#index .milestone .swiper-milestone .right h4 {
  font-size: 1rem;
  font-family: ttcbold;
  color: #fff;
}
#index .milestone .swiper-milestone .mid img {
  width: 100%;
}

#index .milestone .swiper-milestone .right h2 {
  color: #f0a68c;
  font-size: 3rem;
  font-family: ttcbold;
}

#index .milestone .swiper-milestone .right h4 {
  font-size: 1.2rem;
  margin-bottom: 15px;
  /* color: #fff;
  font-size: 2rem;
  font-family: ttcmedium;
  margin-top: 2rem; */
}

#index .milestone .swiper-milestone .right p {
  color: #fff;
  font-size: 1rem;
  font-family: ttcregular;
}
#index .milestone .swiper-milestone .right ul{
  list-style: none;
  padding:0
}
#index .milestone .swiper-milestone .right li {
  color: #fff;
  font-size: 1rem;
  font-family: ttcregular;
}
#index .milestone .swiper-milestone .right li svg{
  float: left;
  transform: translateY(3px);
}
#index .milestone .swiper-milestone .right li span{
  padding-left: 30px;
  display: block;
}
#index .milestone .swiper-milestone .right.withbox > div {
  background-color: #f0a68c;
  padding:2rem;
  border-radius: 2rem;
}
#index .milestone .swiper-milestone .right.withbox h3 {
  color:#52005b
}
#index .milestone .swiper-milestone .right.withbox h4 {
  color:#52005b
}

#index .milestone .swiper-milestone .right.withbox li {
  color:#52005b
}

#index .milestone .swiper-milestone .mid {
  padding: 0 30px;
}

#index .milestone .swiper-milestone .arrow-swiper {
  margin-top: 1rem;
  display: flex;
  align-items: center;
  justify-content: end;
}

/* #index .milestone .swiper-milestone  .button-next {
  margin-right: 1rem;
} */

#index .milestone .swiper-milestone .button-prev,
#index .milestone .swiper-milestone .button-next {
  border: 1px solid #fff;
  width: 50px;
  height: 50px;
  line-height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-radius: 50%;
  position: absolute;
  top:50%;
  left:0;
  transform: translateY(-50%);
  z-index: 100;
}

#index .milestone .swiper-milestone .button-prev {
  left:auto;
  right: 0;
}
#index .milestone .swiper-milestone .button-prev svg,
#index .milestone .swiper-milestone  .button-next svg {
  width: 25px;
  height: 25px;
  color: #fff;
}

.modal .modal-lg{
  width: 650px;
}
.modal .modal-content{
  background: #a357bd;
  border: none;
  border-radius: 2rem;
}
#modalValue.modal .modal-content {
  background: #a357bd;
}

#modalValue2.modal .modal-content {
  background: #e18064;
}

#modalValue3.modal .modal-content {
  background: #501556;
}
#modalValue4.modal .modal-content {
  background: #425cc6;
}

.modal .btnClose {
  position: absolute;
  top: 0;
  right: 0;
  transform: translate(100%, -100%);
  color: #fff;
  font-size: 2rem;
}

.modal .modal-body {
  padding: 3rem 5rem;
}

.modal .modal-body .text {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1rem;
}

.modal .modal-body .text h2 {
  color: #fff;
  font-size: 1.5rem;
  font-family: ttcbold;
  width: 100%;
  text-align: center;
}

.modal .modal-body .text p {
  color: #fff;
  font-size: 1rem;
  font-family: ttcregular;
  line-height: 1rem;
  width: 100%;
}

.modal .modal-body .swiper {
  position: relative;
}


.modal .modal-body .img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.modal .modal-body .img img.contain{
  object-fit: contain;
}

.modal .modal-body .swiper .swiper-slide img {
  width: 100%;
  border-radius: 2rem;
}

.modal .modal-body .arrow-swiper .button-prev {
  position: absolute;
  right: 2%;
  top: 50%;
  transform: translateY(-50%);
}

.modal .modal-body .arrow-swiper .button-next {
  position: absolute;
  left: 2%;
  top: 50%;
  transform: translateY(-50%);
}

.modal .modal-body .arrow-swiper .button-prev,
.modal .modal-body .arrow-swiper .button-next {
  border: 1px solid #fff;
  width: 50px;
  height: 50px;
  line-height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-radius: 50%;
}

.modal .modal-body .arrow-swiper .button-prev svg,
.modal .modal-body .arrow-swiper .button-next svg {
  width: 25px;
  height: 25px;
  color: #fff;
}

@media (orientation: portrait) {
  #index .banner .text {
    margin-top: 2rem;
  }

  #index .banner .text h1 {
    font-size: 2rem;
  }

  #index .banner .text .btn {
    margin-top: 1rem;
  }

  #index .banner .char1 {
    width: 250px;
    bottom: 17%;
    left: -10%;
  }

  #index .banner .char2 {
    width: 200px;
    top: 21%;
  }

  #index .banner .char3 {
    width: 200px;
    left: 21%;
    top: 41%;
  }

  #index .banner .char4 {
    width: 270px;
    right: -5%;
    bottom: 10%;
  }

  #index .banner .char5 {
    width: 150px;
    right: -2%;
    top: 38%;
  }

  #index .banner .char6 {
    width: 200px;
    right: -3%;
    top: 19%;
  }

  #index .banner .shape1 {
    top: 28%;
    left: 23%;
    width: 100px;
  }

  #index .banner .shape2 {
    width: 100px;
  }

  #index .banner .shape2 {
    width: 100px;
  }

  #index .banner .shape3 {
    width: 150px;
  }

  #index .banner .shape4 {
    width: 100px;
    top: 41%;
    right: 4%;
  }

  #index .banner .shape5 {
    width: 100px;
    top: 22%;
  }

  #index .banner .shape6 {
    width: 100px;
  }

  #index .about .left h1 {
    font-size: 2rem;
  }
  #index .about .items .item p {
    font-size: 0.8rem;
  }

  #index .about .left p {
    margin-top: 1rem;
  }

  #index .about .right {
    margin-top: 2rem;
  }

  #index .whereweare .text h1 {
    font-size: 3rem;
  }

  #index .ourvalues .text h1 {
    font-size: 2rem;
  }

  #index .ourvalues .items {
    margin-top: 2rem;
  }

  #index .ourvalues .items>div {
    margin-bottom: 1rem;
  }

  #index .ourvalues .items .item {
    padding: 1rem;
    border-radius: 1rem;
  }

  #index .ourvalues .items .item h2 {
    font-size: 1.2rem;
    line-height: 1.2rem;
  }

  #index .ourvalues .items .item p {
    height: auto;
    font-size: 0.8rem;
  }

  #index .ourculture .text h1 {
    font-size: 2rem;
  }

  #index .ourculture .items .item {
    padding: 1rem;
    border-radius: 1rem;
  }

  #index .ourculture .items .item h2 {
    font-size: 1.2rem;
    height: auto;
    margin-top: 0;
  }

  #index .ourculture .items .item p {
    font-size: 0.8rem;
  }


  #index .whereweare .swiper-globe {
    width: 100%;
  }

  #index .whereweare .globeCtn {
    height: 30vh;
  }

  #index .whereweare .globeCtnInner {
    width: 180%;
  }

  #index .whereweare .swiper-globe .arrow-swiper .button-next {
    width: 35px;
    height: 35px;
    margin-right: 0;
    left: 0;
    right: auto;
    top: 6px
  }

  #index .whereweare .swiper-globe .arrow-swiper .button-prev {
    margin-left: 0;
    left: auto;
    right: 0;
    width: 35px;
    height: 35px;
    top: 6px
  }

  #index .whereweare .swiper-globe .arrow-swiper .button-prev svg,
  #index .whereweare .swiper-globe .arrow-swiper .button-next svg {
    width: 15px;
    height: 15px;
  }

  #index .whereweare .items .item {
    margin-bottom: 15px;
  }

  #index .whereweare .cloud1 {
    height: 100%;
    object-fit: cover;
  }

  #index .whereweare .cloud2 {
    height: 100%;
    object-fit: cover;
  }

  #index .whereweare .cloud3 {
    width: 100%;
  }

  #index .leaders .left h1 {
    font-size: 2rem;
  }

  #index .leaders .left p {
    width: 100%;
  }

  #index .leaders .left ul {
    margin: 3rem auto 0;
  }

  #index .leaders .left .char {
    margin: 0 auto;
  }

  #index .leaders .right>div:first-child {
    margin-top: 0;
  }

  #index .leaders .right>div {
    margin-top: 2rem;
  }

  #index .leaders .right {
    margin-top: 2rem;
  }

  #index .milestone h1 {
    font-size: 2rem;
  }

  
#index .milestone .swiper-milestone .button-prev,
#index .milestone .swiper-milestone .button-next {
  top:0;
  transform:unset;
  width: 42px;
  height: 42px;
}


  #index .milestone .swiper-milestone .left h3 {
    width: 50%;
    margin: 0 auto;
    font-size: 1.5rem;
  }

  #index .milestone .swiper-milestone .right h2 {
    margin-top: 1rem;
    font-size: 2rem;
  }

  #index .milestone .swiper-milestone .right h4 {
    font-size: 1.5rem;
    margin-top: 1rem;
  }

  #index .milestone .swiper-milestone .right p {
    margin-top: 1rem;
  }

#index .milestone .swiper-milestone .mid {
  padding: 0 100px;
}
  .modal .btnClose {
    transform: translate(0%, -100%);
  }

  .modal .modal-body {
    padding: 1rem;
  }

  .modal .modal-body .arrow-swiper {
    text-align: center;
    display: flex;
    justify-content: center;
  }

  .modal .modal-body .arrow-swiper .button-prev,
  .modal .modal-body .arrow-swiper .button-next {
    width: 35px;
    height: 35px;
    line-height: 35px;
  }

  .modal .modal-body .arrow-swiper .button-next {
    position: relative;
    left: 0;
    top: 0;
    transform: none;
    margin-right: 1rem;
  }

  .modal .modal-body .arrow-swiper .button-prev {
    position: relative;
    right: 0;
    top: 0;
    transform: none;
  }

  .modal .modal-body .arrow-swiper .button-prev svg,
  .modal .modal-body .arrow-swiper .button-next svg {
    width: 15px;
    height: 15px;
  }

  .modal .modal-body .text {
    padding: 0 1rem 1rem;
    flex-direction: column;
  }

  .modal .modal-body .text h2 {
    font-size: 1.2rem;
  }

  .modal .modal-body .text p {
    margin-top: 0.5rem;
  }

  .modal .modal-body .swiper .arrow-swiper {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 1rem;
  }

  .modal .modal-body .swiper .arrow-swiper .button-next {
    position: relative;
    left: 0;
    top: 0;
    margin-right: 0.5rem;
  }

  .modal .modal-body .swiper .arrow-swiper .button-prev {
    position: relative;
    right: 0;
    top: 0;
  }

  #index .milestone .swiper-milestone .arrow-swiper {
    justify-content: center;
  }

  #index .milestone .swiper-milestone .arrow-swiper .button-prev,
  #index .milestone .swiper-milestone .arrow-swiper .button-next {
    width: 35px;
    height: 35px;
    line-height: 35px;
  }

  #index .milestone .swiper-milestone .arrow-swiper .button-prev svg,
  #index .milestone .swiper-milestone .arrow-swiper .button-next svg {
    width: 15px;
    height: 15px;
  }
}

html,body{
}
#index .banner2{
  height: calc(100vh - 60px);
  background: #501556;
  position:relative
}
#index .banner2 .strip,
#index .banner2 .strip h3,
#index .banner2 {
     overflow: hidden;
 }


#index .banner2 .main {
     height: 100%;
     min-height: 100%;
 }

#index .banner2 .strip,
#index .banner2 .strip:before {
     position: absolute;
     box-sizing: border-box;
     border-radius: 24px;
 }

#index .banner2 .strip:before {
     width: 100%;
     height: 100%;
 }

#index .banner2 .strip {
     z-index: 0;
     cursor: pointer;
     padding: 12px 16px;
 }

#index .banner2 .strip:before {
     content: "";
     left: 0;
     top: 0;
     z-index: 10;
 }



#index .banner2 .char1 {
     width: 200px;
     height: 200px;
 }

#index .banner2 .char2 {
     width: 200px;
     height: 200px;
 }

#index .banner2 .char3 {
     width: 200px;
     height: 200px;
 }

#index .banner2 .char4 {
     width: 200px;
     height: 200px;
 }

#index .banner2 .char5 {
     width: 200px;
     height: 200px;
 }

#index .banner2 .char6 {
     width: 200px;
     height: 200px;
 }

#index .banner2 .shape img {
     width: 100%;
 }

#index .banner2 .shape1 {
     width: 200px;
 }

#index .banner2 .shape2 {
     width: 200px;
 }

#index .banner2 .shape3 {
     width: 200px;
 }

#index .banner2 .shape4 {
     width: 200px;
 }

#index .banner2 .shape5 {
     width: 200px;
 }

#index .banner2 .shape6 {
     width: 200px;
 }

#index .banner2 #debug {
     position: absolute;
     top: 0;
     left: 0;
     z-index: 1;
     width: 100%;
     height: 100%;
     opacity: 0;
 }

#index .banner2 #toggle-debug {
     z-index: 100;
     bottom: 32px;
     right: 32px;
     width: 64px;
     border-radius: 24px;
     border: 1px solid #000;
     display: none;
 }

#index .banner2 .disturber {
     position: absolute;
     width: 32px;
     height: 32px;
     box-sizing: border-box;
     border-radius: 16px;
 }

#index .banner2 .text {
  text-align: center;
  margin-top: 3rem;
  position: absolute;
  top:0;
  left:50%;
  transform: translateX(-50%);
  z-index: 100;
}

#index .banner2 .text h1 {
  color: #fff;
  font-size: 4rem;
  font-family: ttcbold;
}

#index .banner2 .text .btn {
  background: #df5066;
  padding: 0.4rem 2rem;
  border-radius: 1rem;
  color: #fff;
  font-family: ttcmedium;
  margin-top: 2.5rem;
}