@media only screen and (min-width: 240px) and (max-width: 1023px) {
  .desktop-item{display: none}
  .mobile-item{display: block}
  .mobile-item-inline{display: inline}
  
  .margin-60-bottom,.margin-90-bottom{padding-bottom: 30px}
  .margin-30-bottom{padding-bottom: 20px}
  
  h1{font-size: 28px;line-height: 1.2}
  h2{font-size: 26px;line-height: 1.2}
  h4{font-size: 20px;line-height: 1.2;margin-bottom: 0;}


  .inner,.inner-qoute,.inner-graph,.inner-youtube,iframe,.inner-max{max-width: 320px;}
  .inner-youtube{z-index: 2;}
  .inner-graph{margin-bottom: 20px;}
  .margin-80-bottom{padding-bottom: 30px;}
  .inner-qoute h4{font-size: 14px !important;}
  .inner-qoute .qoute{font-size: 23px !important;}
  .section-title-wrap{max-width: 400px;}
  
  p{font-size: 15px;}

  .inner{width: calc(100% - 30px);}
  .menu-container{display: none !important;}
  .subtit-l{font-size: 23px !important;padding: 0 20px;}
  .subtit-l br{display: none;}
  .inner-qoute{max-width: auto;width: calc(100% - 40px);;}

  /* landing */
  #kv{height: auto;}
  #kv h4{font-size: 17px !important;padding-bottom: 20px !important;padding:  0 20px;}
  #kv h4 br{display: none;}
  .hero-text h1{font-size:38px;line-height: 1;margin-bottom: 5px;}
  .hero-text h3{font-size:17px;}
  .kv-object-wrap{width: 100%;padding: 0;margin-bottom: 0;height: 520px;max-width: 400px;}
  .kv-obj1,.kv-obj6,.kv-obj7,.kv-obj8,.kv-obj9,.kv-obj13,.kv-obj3,.kv-obj10{display: none;}
  .hero-text{padding: 0 40px;width: 100%;top:50%;left: 50%;;}
  .kv-obj15{top: 34%;    height: 30.5%;border-radius: 12px}
  .kv-obj15.active {width: calc(100% - 30px);left: 15px;border-radius: 12px}
  .kv-obj2 {width: 41%;height: 33%;left: calc(22% + 25px);    top: 2.2%;}
  .kv-obj3 {left: 20px;top: 11.4%;width: 26%;height: 26%;}
  .kv-obj4 {left: 15px;    width: 22%;    height: 14%;    top: 17.1%;; }
  .kv-obj5 { width: calc(100% - 63% - 50px);  left: calc(63% + 30px);  top: 8%;  height: 28%;  border-radius: 12px;}
  .kv-obj14 {left: calc(23% + 20px);  top: calc(64.2% + 15px);  width: 45%;  z-index: 9;  height: 28.5%;}
  .kv-obj12{left: 15px;    top: calc(64.2% + 15px);    width: 23%;    height: 15%;}
    .kv-obj11 {   left: calc(68% + 25px);      top: calc(64.2% + 15px);      width: 21%;      height: 14.3%;   }
  .kv-obj10{left: calc(52% + 35px);top: 62%;width: calc(100% - 52% - 50px);height: 34%;}
  .kv-obj4 .kv-inner-obj-4{width: 120%;height: 120%;;}
  .kv-obj3 .kv-inner-obj-3{bottom:22%}
  @keyframes car1 {
    0% { transform: translateX(-30%) translateY(-25%);opacity: 1; }
    90% { transform: translateX(25%) translateY(10%);opacity: 1; }
    95% { transform: translateX(25%) translateY(10%);opacity: 0; }
    100% { transform: translateX(-30%) translateY(-25%);opacity: 0; }
  }
  .kv-inner-obj-15{height: 20px;}
  .kv-obj14 .kv-inner-obj-15-inner{background-size: auto 19px;}
  .kv-obj5 .kv-inner-obj-5 {    left: 10%;}

  .kv-obj2 .kv-inner-obj-2{width: 50%;left: 30%;}

  .kv-obj10 .kv-inner-obj-15{background-image: url(../images/hkstp/output_webp/kv/obj/15b.webp);}
  .kv-obj2 .kv-inner-bg{background-image: url(../images/hkstp/output_webp/kv/kv-obj2m.webp);}

  .kv-obj3 .kv-inner-bg{background-image: url(../images/hkstp/output_webp/kv/kv-obj3m.webp);}
  .kv-obj4 .kv-inner-bg{background-image: url(../images/hkstp/output_webp/kv/kv-obj4m.webp);}
  .kv-obj5 .kv-inner-bg{background-image: url(../images/hkstp/output_webp/kv/kv-obj5m.webp);}
  .kv-obj14 .kv-inner-bg{background-image: url(../images/hkstp/output_webp/kv/kv-obj14m.webp);}
  .kv-obj12 .kv-inner-bg{background-image: url(../images/hkstp/output_webp/kv/kv-obj12m.webp);}
  .kv-obj10 .kv-inner-bg{background-image: url(../images/hkstp/output_webp/kv/kv-obj10m.webp);}
  .kv-obj11 .kv-inner-bg {background-image: url(../images/hkstp/output_webp/kv/kv-obj11m.webp);}

  .kv-obj12 .kv-inner-obj-12{bottom: -10%;}
  .kv-obj10 .kv-inner-obj-10{z-index: 2;}

  #kv-wrap{margin-bottom: 60px;}

  .ssi-cloud1{width: 1000px;top:30vw}
  .ssi-cloud2{width: 1000px;}
  .kv-cloud1 {width: 200%;top:-150vw;}
  .ss3-cloud1-wrap{top:5%}
  


  /* intro */
  #section-intro{padding-top: 0;}
  .ssi-graph-1,.ssi-graph-2{transform: scale(0.9)}
  .ssi-graph-1{margin-bottom: 40px;}
  .ssi-graph-1 .info-text-wrapper{left: 5%;}
  .ssi-graph-1 .info-text-wrapper h4{font-size: 15px !important;}
  .ssi-graph-2{margin-bottom: 40px;}
  .ssi-graph-2 .info-text-wrapper h4{font-size: 15px !important;}
  .ssi-graph-2 .info-text-wrapper h3{font-size: 20px !important;}
  .ssi-graph-2 .info-text-wrapper.layer-1-p-h{top:-10%}
  .ssi-graph-2 .info-text-wrapper.layer-2-p-h{bottom: -7%;}


  /* ss3 */
  .section-intro{height: 280px;}
  #section-3 .ss3-section-top{height: 520px;width: auto;}
  #section-3{padding-bottom: 20px;}
  #section-3 .ss3-obj2{width: 80px;}
  #section-3 .section-title-wrap{margin-bottom: 10px;}
  #section-3 .ss3-obj1{width: 140px;right: 10px;bottom: 10px;}
  .ss3-cloud2{top:0%;width: 300%;margin-left: -100%;animation: floatDown 16s cubic-bezier(0.65, 0, 0.35, 1) infinite;}
  .ss3-graph-1 .info-text-wrapper h3{font-size: 17px !important;}
  .ss3-graph-1 .info-text-wrapper{width:332px}
  #section-3 .ss3-obj3 img{height: 200px;}
  #section-3 .ss3-obj3{bottom:0}
  .ss3-graph-1 .layer-2-p-h{width: auto;top: 10px;height: 300px;left: 10px;z-index: 2;}
  .ss3-graph-1 .info-text-wrapper.layer-1-p-h{top:70%}
  .ss3-graph-1 .info-text-wrapper h2{font-size: 28px !important;}
  .ss3-graph-1 .info-text-wrapper{left: 0;}
  .ss3-graph-1 .layer-3-p{width: 180px;height: 26%;}
  .ss3-graph-1 .layer-3-p{top:120px;left: 10px;}
  .ss3-graph-1 .info-text-wrapper.layer-1-p-h{left: 20px;}
  #section-3 .ss3-obj3{right: -1400px}
  .ss3-graph-3{width: calc(100% - 40px);}
  .ss3-obj8{width: 110px;right: -10px;top: -40px;}
  .ss3-graph-2 .info-text-wrapper h3{font-size: 15px;}
  .ss3-graph-2 .info-text-wrapper{left: 0%;top: -15%;}
  .ss3-graph-2 .layer-3-p{right: 20px;width: 140px;left: auto;}
  .ss3-graph-2 .info-text-wrapper h2{font-size: 20px;}
  .ss3-graph-2 .info-text-wrapper.layer-1-p-h{left: auto;right: 150px;}
  #section-3 .ss3-obj4{right:  -500px;;top: -30px;width: 800px;}
  #section-3 .ss3-obj4 img{width: 1000px;}
  #section-3 .ss3-obj5{width: 160px;left: -30px;top: 20px;}
  #section-3 .ss3-section-end{min-width: 0 !important;width: 1790px;}
  .ssi-graph-1-mask img{width: 340px;}
  .ssi-graph-1-mask{overflow: visible;}
  .ssi-graph-1 .layer-3-p {width: 60%;top: 5%;height: 46%;left: 18%;}
  #section-3{background: #58c4ef;}
  .ss3-cloud2-wrap{top:4%}
  #section-2-dots{bottom: 160px;}

  .owl .inner{margin-top: 60px;padding-bottom: 0;}
  .ss3-graph-1-end.info-text-wrapper h3{font-weight: 900;font-size: 18px;line-height: 1.1;color: #4b62dd;position: absolute;bottom: -50px;left: 0;}


  /* section 2 */
  #section-2 .ss2-section-end{left: 44%;}
  .ss2-graph-2 .data-wrap img{width: 100%;}
  #section-2 .ss2-obj1{width: 190px;right: calc(50% - 200px);top: -80px;}
  #section-2 .ss2-obj2{width: 150%;margin-left: -25%;}
  #section-2 .section-title-wrap{margin-bottom: 0;}
  #section-2 .sup-bg .sup-bg-img, #section-2 .sup-bg .sup-bg-img-2{width: 200vw;top:-0%;left: 50%;transform: translateX(-50%);}
  .owl-carousel {width: 900px;left: 50%;transform: translateX(-50%);z-index: 4;}
  .owl::before ,.owl::after {display: none;}
  #section-2 .item{transform: scale(.9);}
  .ss2-graph-1{margin-bottom: 30px;}
  .ss2-graph-1 .info-text-wrapper h3{font-size: 15px !important;}
  .ss2-graph-1 .info-text-wrapper h2{font-size: 20px !important;}
  .ss2-graph-1 .info-text-wrapper.layer-1-p-h{top:0}
  .ss2-graph-1 .info-text-wrapper.layer-3-p-h{bottom: 0;}
  .ss2-graph-1 .layer-3-p{top:28%}
  .ss2-graph-2 .info-text-wrapper h3{font-size: 15px !important;}
  .ss2-graph-2 .info-text-wrapper h2{font-size: 20px !important;}
  .ss2-obj9 {width: 120px;left: -20px;bottom: 0;}
  .ss2-graph-2 .info-text-wrapper.layer-1-p-h{bottom:-2%;width: 80%;}
  @keyframes slowGlow {
    0%, 100% { opacity: 1; filter: brightness(0.8) blur(0); }
    50% { opacity: 1; filter: brightness(1.2) blur(0px); }
  }
  .ss2-slide-b{border-radius: 6px;}
  .ss2-slide-b video{border-radius: 12px;}


  /* section 1*/
  #section-1 .section-intro{background:#78d6fa;;z-index: 9;}
  #section-1 .section-intro img {
    width: 140%;
    margin-left: -20%;
  }
  #section-1 .ss1-obj1 {width: 140px;left: 20px;top: 60px;}
  #section-1 .section-title-wrap{margin-bottom: 20px;}
  .ss1-obj6 {width: 140px;left: -30px;}
  .sup-bg-ss1 .sup-bg-img {width: 180vw;top: 60%;pointer-events: none;}
  .ss1-graph-2 .info-text-wrapper h3,.ss1-graph-1 .info-text-wrapper h3{font-size: 14px !important;}
  .ss1-graph-2 .info-text-wrapper h3 span,.ss1-graph-1 .info-text-wrapper h3 span{font-size: 26px;}
  .ss1-graph-2 .info-text-wrapper h2{font-size: 20px !important;}
  .ss1-graph-2 .info-text-wrapper.layer-1-p{width: 50%;}
  .ss1-graph-2 .info-text-wrapper.layer-1-p h3 br{display: none;}
  .ss1-graph-2 .info-text-wrapper.layer-1-p{bottom: -30%;}
  .sup-bg-ss1{margin-bottom: 80px;}
  .ss1-graph-2 .layer-3-p{width: 180px;height: 34%;}
  .ss1-obj7,.ss1-obj8 {display: none;}
  .ss1-graph-1 .layer-3-p{width: 300px;left: 20px;height: 24%;;}
  #section-1 .ss1-obj2 {width: 560px;right: -260px; top:20px  }
  .inner-youtube iframe{height: 50vw !important;}
  #section-1 .sup-bg{z-index: 9;}

  #section-1 .ss1-graph-1{margin-left: -5%;height: 260px;}
  #section-1 .ss1-obj2{top:150px;right: -60px;width: 420px;}
  .ss1-graph-1 .layer-3-p{top:17%}
  .ss1-graph-1 .info-text-wrapper.layer-1-p-h{top:40%}

  .mobile-creited p{position: relative;border-bottom: 1px solid #000;padding-bottom: 8px;margin-bottom: 8px;}
  .mobile-creited p:nth-child(1){border-top:2px solid #000;padding-top: 20px;}
  .mobile-creited p:nth-child(2) span ,
  .mobile-creited p:nth-child(3) span,
  .mobile-creited p:nth-child(4) span
  {position: absolute;left: 0%;;}
  .mobile-creited p:nth-child(2)  ,
  .mobile-creited p:nth-child(3) ,
  .mobile-creited p:nth-child(4) 
  {padding-left: 45%;}
  .mobile-creited p:nth-child(1) b{font-weight: bold;}
  .mobile-creited p b{font-weight: normal;}
  .ss1-graph-2 .info-text-wrapper.layer-2-p{top:-20%}
  .ss1-graph-2 .info-text-wrapper.layer-1-p{bottom: -40%;}
  .ss1-title-bg{top: 215px;
    width: 100%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
    opacity: .6;
    height: 300px;}


  #section-1 .ss1-cloud1{width: 0%;}
  .ss1-cloud2 {width: 300%;bottom: 0vw;left: -200%;}

  #section-1 .inner-qoute{margin-top: 0;}
    .ss1-graph-2 .layer-1-p-h{left: 10%;}
    .ss1-cloud1{top:0;bottom: auto;}
    .ss1-cloud1-wrap{bottom:auto;top:5%}


    @keyframes floatUp {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-30px); }
    }
    
    @keyframes floatDown {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(30px); }
    }
}
@media only screen and (min-width: 1024px) and (max-width: 1280px) {


}
/*
@media screen and (min-width:320px) and (max-width:768px) and (orientation:landscape) {

.msg-landscape{display: block;}
.msg-landscape {
  position: fixed;
  z-index: 99999999;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.9);
}
.msg-landscape .msg-inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: #fff;
}
.msg-landscape .alert-landscape {
  font-family: Roboto,sans-serif;
  font-weight: 100;
  line-height: 1.4;
  text-align: center;
}
.msg-landscape .alert-phone {
  width: 280px;
  height: 180px;
  margin: 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
.msg-landscape .alert-phone .obj-phone {
  display: block;
  width: 130px;
  height: 70px;
  border: 2px solid #ffffff;
  border-radius: 10px;
  margin: 0 auto;
  overflow: hidden;
  -webkit-animation-name: landscapephone;
  -webkit-animation-duration: 5s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: ease-in-out;
  -moz-animation-name: landscapephone;
  -moz-animation-duration: 5s;
  -moz-animation-iteration-count: infinite;
  -moz-animation-timing-function: ease-in-out;
  -ms-animation-name: landscapephone;
  -ms-animation-duration: 5s;
  -ms-animation-iteration-count: infinite;
  -ms-animation-timing-function: ease-in-out;
  animation-name: landscapephone;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}
.msg-landscape .alert-phone .obj-phone .obj-phone-con {
  width: 100px;
  height: 178px;
  position: absolute;
  top: 50%;
  left: 50%;
  background: url("https://multimedia.scmp.com/native/infographics/article/common/images/landscape.png") center center no-repeat;
    background-size: auto;
  background-size: 100% 100%;
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  -webkit-transform-origin: center center;
  transform-origin: center center;
  -webkit-animation-name: landscapephonecon;
  -webkit-animation-duration: 5s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: ease-in-out;
  -moz-animation-name: landscapephonecon;
  -moz-animation-duration: 5s;
  -moz-animation-iteration-count: infinite;
  -moz-animation-timing-function: ease-in-out;
  -ms-animation-name: landscapephonecon;
  -ms-animation-duration: 5s;
  -ms-animation-iteration-count: infinite;
  -ms-animation-timing-function: ease-in-out;
  animation-name: landscapephonecon;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}
.msg-landscape .alert-phone .obj-phone::after {
  content: "";
  width: 2px;
  height: 30px;
  background-color: #fff;
  border-radius: 5px;
  position: absolute;
  right: 5px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

@keyframes landscapephone {
0% {
  opacity: 0;
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
}
10% {
  opacity: 1;
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
}
30% {
  opacity: 1;
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}
50% {
  opacity: 1;
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}
90% {
  opacity: 1;
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}
100% {
  opacity: 0;
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}
}
@keyframes landscapephonecon {
0% {
  -webkit-transform: translateX(-50%) translateY(-50%) rotate(0deg) scale(1);
  transform: translateX(-50%) translateY(-50%) rotate(0deg) scale(1);
}
40% {
  -webkit-transform: translateX(-50%) translateY(-50%) rotate(0deg) scale(1);
  transform: translateX(-50%) translateY(-50%) rotate(0deg) scale(1);
}
50% {
  -webkit-transform: translateX(-50%) translateY(-50%) rotate(-90deg) scale(0.55);
  transform: translateX(-50%) translateY(-50%) rotate(-90deg) scale(0.55);
}
90% {
  -webkit-transform: translateX(-50%) translateY(-50%) rotate(-90deg) scale(0.55);
  transform: translateX(-50%) translateY(-50%) rotate(-90deg) scale(0.55);
}
100% {
  -webkit-transform: translateX(-50%) translateY(-50%) rotate(-90deg) scale(0.55);
  transform: translateX(-50%) translateY(-50%) rotate(-90deg) scale(0.55);
}
}
}*/

@media screen and (min-width:0) and (max-width:320px) {

  .msg-landscape{display: block;}
  .msg-landscape {
    position: fixed;
    z-index: 99999999;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.9);
  }
  .msg-landscape .msg-inner {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: #fff;
  }
  .msg-landscape .alert-landscape {
    font-family: Roboto,sans-serif;
    font-weight: 100;
    line-height: 1.4;
    text-align: center;
  }
  .msg-landscape .alert-phone {
    width: 280px;
    height: 180px;
    margin: 0 auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
  }
  .msg-landscape .alert-phone .obj-phone {
    display: block;
    width: 130px;
    height: 70px;
    border: 2px solid #ffffff;
    border-radius: 10px;
    margin: 0 auto;
    overflow: hidden;
    -webkit-animation-name: landscapephone;
    -webkit-animation-duration: 5s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease-in-out;
    -moz-animation-name: landscapephone;
    -moz-animation-duration: 5s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: ease-in-out;
    -ms-animation-name: landscapephone;
    -ms-animation-duration: 5s;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: ease-in-out;
    animation-name: landscapephone;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
  }
  .msg-landscape .alert-phone .obj-phone .obj-phone-con {
    width: 100px;
    height: 178px;
    position: absolute;
    top: 50%;
    left: 50%;
    background: url("https://multimedia.scmp.com/native/infographics/article/common/images/landscape.png") center center no-repeat;
      background-size: auto;
    background-size: 100% 100%;
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    -webkit-transform-origin: center center;
    transform-origin: center center;
    -webkit-animation-name: landscapephonecon;
    -webkit-animation-duration: 5s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease-in-out;
    -moz-animation-name: landscapephonecon;
    -moz-animation-duration: 5s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: ease-in-out;
    -ms-animation-name: landscapephonecon;
    -ms-animation-duration: 5s;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: ease-in-out;
    animation-name: landscapephonecon;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
  }
  .msg-landscape .alert-phone .obj-phone::after {
    content: "";
    width: 2px;
    height: 30px;
    background-color: #fff;
    border-radius: 5px;
    position: absolute;
    right: 5px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
  }
  
  @keyframes landscapephone {
  0% {
    opacity: 0;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  10% {
    opacity: 1;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  30% {
    opacity: 1;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
  }
  50% {
    opacity: 1;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
  }
  90% {
    opacity: 1;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
  }
  100% {
    opacity: 0;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
  }
  }
  @keyframes landscapephonecon {
  0% {
    -webkit-transform: translateX(-50%) translateY(-50%) rotate(0deg) scale(1);
    transform: translateX(-50%) translateY(-50%) rotate(0deg) scale(1);
  }
  40% {
    -webkit-transform: translateX(-50%) translateY(-50%) rotate(0deg) scale(1);
    transform: translateX(-50%) translateY(-50%) rotate(0deg) scale(1);
  }
  50% {
    -webkit-transform: translateX(-50%) translateY(-50%) rotate(-90deg) scale(0.55);
    transform: translateX(-50%) translateY(-50%) rotate(-90deg) scale(0.55);
  }
  90% {
    -webkit-transform: translateX(-50%) translateY(-50%) rotate(-90deg) scale(0.55);
    transform: translateX(-50%) translateY(-50%) rotate(-90deg) scale(0.55);
  }
  100% {
    -webkit-transform: translateX(-50%) translateY(-50%) rotate(-90deg) scale(0.55);
    transform: translateX(-50%) translateY(-50%) rotate(-90deg) scale(0.55);
  }
  }
  }