@media only screen and (min-width: 240px) and (max-width: 768px) {
  #myCanvas{display: none;}
	
  .desktop-item{display: none}
  .mobile-item{display: block}
  .mobile-item-inline{display: inline}
  .mobile-image{display: block;}
  .desktop-image{display: none;}

  .margin-60-bottom{margin-bottom: 30px !important;}
  .margin-80-bottom{margin-bottom: 40px !important;}
  .margin-100-bottom{margin-bottom: 50px !important;}
  .margin-160-bottom,.margin-120-bottom{margin-bottom: 80px !important;}
  .margin-260-bottom{margin-bottom: 80px !important;}



  h1{font-size: 28px;}
  h3{font-size: 24px;}
  h4{font-size: 20px;}
  h6, p{font-size: 14px;}
  h6.caption {font-size: 12px;}
  
  .inner{width: calc(100% - 40px);}
  .inner-graph img{width: calc(100% - 80px); transform: translateX(-50%);margin-left: 50%;}


  .kv-content{width: calc(100% - 40px);}
  .scroll-icon {  width: 20px;  margin-top: 25px;  margin-bottom: 30px;}
  .kv-bg-group {width: 820px;height: 640px;top: 50%;}
  #kv-wrap{height: 580px;}


  /* ss1 */
.ss1-content-wrap{margin-top: 0px;position: relative;z-index: 99;;}
.ss1-bg-img{top:0}

  #section-1 {  padding-top: 60px;margin-top: 0;background-position: top center;} 
  .ss1-section-nav{margin-top: 80px;}
  .ss1-nav-list{width: calc(100% - 40px);max-width: 360px;padding: 8px;gap: 0px;row-gap: 6px;}
  .ss1-nav-item{flex: 0 0 auto;}
  .ss1-nav-link{padding: 6px 10px;font-size: 12px;white-space: nowrap;}
  .ss1-nwww{float: left;display: block;margin-bottom: 60px !important;width: 100%;margin-top: 60px;padding-left: 120px !important;}
  .ss1-nwww::after {width: 100px;height: 100px;left: 0;bottom: 0;}
  
  /* Disable hover effect on mobile - only use click/active state */
  .ss1-nav-link:hover{background: transparent;}
  .ss1-nav-item.active .ss1-nav-link{background: #5af0fe;}
  .map-pin:hover .pin-text{opacity: 0;}
  .map-pin.active .pin-text{opacity: 1;}
  .h-line{display: none;}
  
  #section-1.pinned .ss1-globe-container{bottom: -40vw;}
  .ss1-globe-container{bottom: 0px;height: auto;}
  .pin-text-wrap{height: 100%;margin-top: -180px;}
  .globe-bg img{width: 150%;margin-left: 50%;transform: translateX(-50%);}
  #section-1.pinned .map-pin{width: 20px;height: 20px;;}
  .map-rotate img{width: 1000px !important;}
 .map-rotate{left: 50%;transform: translateX(-50%);width: 1000px;}
 #section-1.pinned .map-rotate{transform: rotateX(52deg) translateY(160px) translateX(-50%) scale(1);}
  .pin-text-wrap .pin-text{width: 320px !important;}
  .globe-bg{height: auto;}
  .v-line {top:100%}
  .pin-text-1 .v-line {right: 59px;}
  .pin-text-2 .v-line {right: 263px;}
  .pin-text-3 .v-line {right: 83px;}
  .pin-text-4 .v-line {right: 22px;}
  .pin-text-5 .v-line {right: 84px;}
  .pin-text-6 .v-line {right: 29px;}
  .pin-text-7 .v-line {right: 97px;}

  .pin-text-1.active .v-line{height: 126px;}
  .pin-text-2.active .v-line{height: 130px;}
  .pin-text-3.active .v-line{height: 122px;}
  .pin-text-4.active .v-line{height: 83px;}
  .pin-text-5.active .v-line{height: 122px;}
  .pin-text-6.active .v-line{height: 154px;}
  .pin-text-7.active .v-line{height: 170px;}

  /* ss2 */
  .section-2-grpah{height: 5558px !important;}
  .ss2-dot-menu::before ,  .ss2-dot-menu::after{display: none;}
  .ss2-right-col{z-index: 9; width: 100vw;height:100vh;background: none;pointer-events: none;}
  .ss2-left-inner p{font-size: 12px;}
  .ss2-left-col{overflow: hidden;}
  .ss2-img-list li{width: 100vw;height: 36vh;top:0;}
  .ss2-img-list{top: 0;}
  .ss2-left-section1{margin-top: 36vh;}
  .ss2-left-col{width: 100%;;}
  .ss2-dot-menu .dot-bg-wrap{left:auto; top: 11px; width: calc(100vw - 100px); height: 14px;}
  .ss2-dot-menu-wrap{left: 0; bottom: 20px; flex-direction: row; width: 100%; height: auto; justify-content: space-evenly;}
  .ss2-left-block{margin: 0 auto;width: calc(100% - 100px);;}
  .ss2-left-gradient{width: 100%;top:36vh}
  .ss2-dot-menu::before,.ss2-dot-menu::after {width: 50px; height: 100%;}
  .ss2-left-inner .ss2-left-block:nth-child(2)::after{height: 40px;top:-40px;}
  .ss2-left-section{height: 650px;}
  .ss2-dot-menu{z-index: 20;}
  .ss2-dot-menu-wrap{top: calc(36vh - 20px);bottom: auto;}
  .ss2-dot-menu .dot-bg-wrap{bottom: auto; top: calc(36vh - 23px); position: absolute;margin-top: 0;width: 100vw;}
  .ss2-dot-menu .dot-bg{height: 15px; width: 9%; left: 50%; transform: translateX(-50%);}
  .ss1-active .ss2-dot-menu .dot-bg {left: 8%; top: 0;}
  .ss2-active .ss2-dot-menu .dot-bg {left: 20%; top: 0;}
  .ss3-active .ss2-dot-menu .dot-bg {left: 32%; top: 0;}
  .ss4-active .ss2-dot-menu .dot-bg {left: 44.1%; top: 0;}
  .ss5-active .ss2-dot-menu .dot-bg {left: 55.9%; top: 0;}
  .ss6-active .ss2-dot-menu .dot-bg {left: 67.6%; top: 0;}
  .ss7-active .ss2-dot-menu .dot-bg {left: 80%; top: 0;}
  .ss8-active .ss2-dot-menu .dot-bg {left: 92%; top: 0;}
  .ss2-img-block{max-width: 270px;}
  .ss2-img-block-2bl img{width: calc(50% - 20px);margin: 0 10px !important;}
    .ss2-img-block-2bl {width: calc(100% - 40px) !important;max-width: 768px;position: relative;overflow: hidden;display: flex;align-items: center;}

  /* ss3 */
  #section-3{padding-bottom: 70px;padding-top: 100px;background-size: 200% auto;z-index: 12;}
  #section-3 .bottom-bg{width: 180%;left: auto;right: 0%;}
  .ss3-benefits-b1, .ss3-benefits-b2{height: 360px;width: 360px;position: relative;}
  .ss3-benefits-b1 h4{left: 0;}
  .ss3-benefits-b2 h4{left: auto;top:0;right: 0}

  .ss3-benefits-b1 .ss3-benefits-list{right: 0}
  .ss3-ball-b1,.ss3-ball-b2{width: 100%;top:0;left: 0;}

  .ss3-benefits-b2 .ss3-benefits-list{padding-left: 20px;left: 0;} 
  .ss3-benefits-b1{margin-bottom: 20px;}
  .ss3-benefits-b1>img{width: 160%;}
  .ss3-ball-1a{width: 80px;top: 100px;left: calc(50% - 200px);transform: translateX(-50%);}
  .ss3-ball-1b {width: 130px;top: 160px;left: calc(50% - 120px);transform: translateX(-50%);}
  .ss3-ball-1c {width: 210px;top: 0px;left: 50%;transform: translateX(-50%);}
  .ss3-benefits-b2>img{width: 160%;margin-left: -60%;}
  .ss3-ball-2a{width: 210px;top: -20px;left: calc(50% - 220px);transform: translateX(-50%);}
  .ss3-ball-2b {width: 120px;top: 120px;left: calc(50% - 20px);transform: translateX(-50%);}
  .ss3-ball-2c {width: 80px;top: 70px;left: calc(50% + 100px);transform: translateX(-50%);}

  /* Horizontal flip for ss3 ball masks */
  .ss3-ball-1mask{transform: scaleX(-1) scale(1.55) ;left: 67%;top:30px}
  .ss3-ball-2mask{transform: scaleX(-1) scale(1.55) ;left: -70%;top:10px}




  .ss3-benefits-b1 .ss3-benefits-list li{margin-bottom: 2px;}

  .ss3-benefits-b3 .ss3-benefits-list, .ss3-benefits-b4 .ss3-benefits-list{width: calc(100% - 20px );}
  .ss3ball-wrap{width: 180px;height: 180px;}
  .ss3ball-wrap .top-ball-wrap{width: 152px;height: 152px;left: 14px;  top: 14px;}
  .ss3-benefits-b3 h4, .ss3-benefits-b4 h4{margin-bottom: 20px;margin-left: 20px;}
  .ss3-benefits-b3, .ss3-benefits-b4{height: auto;padding-top: 60px;}
  .section-4-grpah{min-height: 0;margin-bottom: 60px;}
  .ss4-map-wrapper img,.ss4-button{height: 280px;}
  .ss4-map-wrapper h6{margin-top:-40px}
  .ss3-benefits-b4 .ss3-b3-bg,.ss3-benefits-b3 .ss3-b3-bg{width: calc(100% - 20px);border-radius: 0 0 80px;height: calc(100% - 10px);    top: 20px;}
  .ss3ball-wrap{top:-60px;right: 20px;left: auto;transform: translate(0,0);}


  
  /* ss4 */
  .inner-qoute{padding: 0 20px;}
  .inner-qoute br{display: none;}
  .ss4-slide-item-wrap{width: calc(100% - 40px);margin: 0 auto;border-radius: 20px;}
  .ss4-slide-content{padding-bottom: 0;}
  .ss4-slide-item{width: 100%;overflow: scroll;}
  .ss4-slide-item-wrap > img{height: 100%;}
  .info-box-wrap{display: block;}
  .ss4-button-item{margin-top: -10px;margin-left: -10px;}
  
  .info-box-2-item{margin: 10px 0 !important;}
  .ss4-close-btn{right: 0px;top:20px}

  #section-4{padding-top: 100px;padding-bottom: 260px;    background-size: 800px auto;background-position: bottom left 40%;}
  #section-4 .top-bg{width: 180%;left: -20%;}
  .ss4-map-list{display: none;}
  .ss4-nwww {
  margin-top: 80px;
  padding-left: 130px !important;
  margin-bottom: 30px !important;margin-top: 100px;}
  .ss4-nwww::after {left: 0; bottom: 0;}
}

@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("../images/landscape.webp") 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 only screen and (min-width: 769px) and (max-width: 1280px) {

  h1{font-size: 42px;}
  h3{font-size: 32px;}
  h4{font-size: 24px;}
  h6, p {  font-size: 13px;}

  .margin-260-bottom{margin-bottom: 180px !important;}

  .kv-content{top:calc(50% + 60px)}
  .scroll-icon {  margin-bottom: 10px;}
  #kv-wrap{height: 580px;}
  .kv-bg-group{width: 1180px;  height: 1180px;  top: 45%;}

  /* ss1 */

  .ss1-nav-link{padding: 6px 10px;}
  .ss1-globe-container{bottom: -12vh;}
  .pinned .globe-bg{top:-10vh}
  .map-rotate {  transform: translateY(-8vh) rotateX(0deg) scale(.7);}
  #section-1.pinned .map-pin {  width: 20px;  height: 18px;border: 1px solid rgba(255,255,255,.5);}

  /* ss2 */
  .ss2-left-inner{width: 300px;}
  .ss2-left-inner p{font-size: 13px;}
  .ss2-dot-menu-wrap{left: 20px;}
  .ss2-dot-menu .dot-bg-wrap{left: 16px;}
  .ss2-left-block p{padding: 10px 0;}
  .ss2-left-block-title{margin-bottom: 15px;}
  .ss2-left-block.margin-80-bottom{margin-bottom: 40px !important;} 
  .ss2-left-inner .ss2-left-block:nth-child(2)::after {height: 20px;top:-20px;}
  .ss2-dot-menu::before ,.ss2-dot-menu::after{height: 80px;}

  /* ss3 */
  .ss3ball-wrap {width: 420px;height: 420px;left: 78%;}
  .ss3ball-wrap .top-ball-wrap {  width: 380px;  height: 380px;left: 20px;top:20px;}
  .ss3-benefits-b3, .ss3-benefits-b4{height: 380px;}
  .ss3-benefits-b3 h4, .ss3-benefits-b4 h4{margin-bottom: 20px;margin-left: 40px;}
  .ss3-ball-b2,.ss3-ball-b1{transform: scale(.8);}
  .ss3-benefits-b2 h4{left: 30px;}
  .ss3-benefits-b2 .ss3-benefits-list{left: 100px;}
  .ss3-benefits-b1 .ss3-benefits-list{right: 180px;}

  /* ss4 */
  .ss4-slider .owl-nav{width: 70%;}
  .info-box-wrap p, .ss4-slide-content h5, .ss4-slide-content p{font-size: 12.5px;}
  .ss4-slider.owl-carousel{width: 1000px;}
  #section-4{padding-bottom: 360px;background-size: 120% auto;}
  .inner-qoute{width: 80%;}
  .owl-stage-outer {padding-bottom: 160px;}
  .ss4-map-wrapper img,.ss4-map-wrapper,.ss4-button,.ss4-map-list{height: 520px;}

}




@media only screen and (min-width: 769px) and (max-width: 1980px) and (max-height: 720px) {
  .mobile-720-version{display: block;}
  .desktop-version{display: none;}
  .mobile-720-version{display: block !important;}


}


@media screen and (min-height: 520px) and (max-height: 600px)  {
  
}


@media screen and (min-width: 320px) and (max-width: 768px) and (orientation: landscape) and (max-height: 520px) {


.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("../images/landscape.webp") 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 (max-height: 520px) {


  .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("../images/landscape.webp") 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("../images/landscape.webp") 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);
  }
  }
 
}