@media only screen and (min-width: 240px) and (max-width: 768px) {

	
  .desktop-item{display: none}
  .mobile-item{display: block}
  .mobile-item-inline{display: inline}
  .mobile-image{display: block;}
  .desktop-image{display: none;}

  /* ROC Banner - show mobile, hide desktop */
  .roc-banner-desktop{display: none !important;}
  .roc-banner-mobile{display: block !important;}

  .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;}
  .m-margin-80-bottom{margin-bottom: 80px !important;}

  h6.caption{padding: 0;}
   h6.caption.cta-btn{padding-right: 30px;
  padding-top: 10px;
  padding-bottom: 10px;}
  .carousel-block h6{font-size: 7px;bottom: 0px;width: 100%;left: 5px;text-align: left;}

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


  .graph-title span {   top: 5px;  left: 3px;  width: calc(100% + 1px);  height: calc(100% - 1px); }

  /* KV */
  .kv-wrap p.merriweather {    font-size: 12px;  }
  .kv-title h1{font-size: 42px;}
  .kv-title h4{font-size:14px;}
  #kv-wrap{padding-top: 270px;min-height: 0;}
  .kv-layer-1{width: 240px;height: 170px;;z-index: 2;top: 250px;}
  .kv-layer-2 {  width: 220px;  height: 280px;  top: 150px;  left: calc(50% + 240px)}
  .kv-layer-3 {width: 20px;height: 165px;top: 250px;left:  calc(50% - 125px);z-index: 1;}
  .kv-layer-4{width: 160px;    height: 120px;    top: 155px;left: calc(50% - 150px);}
  .kv-layer-5 {  width: 340px;  height: 180px;top: 265px;  left: calc(50% - 302px);z-index: 0;}
  .scroll-btn{margin: 20px auto;}




  /* ss1 */
  #section-1{padding-bottom: 30px;}
  .ss1-graph{width: 140vw;margin-left: -31vw;margin-top: -15vw;z-index: 1;}
  .ss1-graph.active{margin-top: -30vw;}
  .ss1-graph-obj h5, .ss3-graph-obj h5,.ss2-graph-obj h5, .ss4-info-box h5{font-size: 9px;line-height: 1.33;}
  .ss1-graph-obj .ss1-icon,.ss3-graph-obj .ss3-icon{width: 24px;height: 24px;;}
  .ss1-graph-obj-5{width: 100px;}
  .ss1-graph-obj .ss1-icon{margin-bottom: 3px;}
  .ss1-graph-obj span{padding: 0 4px;}
  .ss1-graph-b-infolist .inner{padding: 20px 3px;}
  .ss1-graph-b-info,.ss1-overdiv{pointer-events: none;}
  .ss1-graph .cloud-4.cssb {  bottom: -330px;  width: 560px;}
  .ss1-graph .cloud-2.cssb {  bottom: -360px;    width: 420px;}
  .ss1-graph .cloud-3.cssb {  bottom: -60px;  left: -110px;  width: 420px;}
  .cloud-bg{width: 50%;}
  .cloud-14{display: none;}
  .cloud-11{width: 100%;left:0%;bottom: 0;}
  .cloud-4 img{width: 100%;}
  .cloud-5{z-index: 2;}
  .cloud-5 img{width: 100%;}

  .ss1-graph-obj-6.active::after,.ss1-graph-obj-6.active::before  {bottom: 30px;}

  /* ss2 */
  .ss2-owl-slider::before ,.ss2-owl-slider::after{display: none;}
  .ss2-skyline-layer{min-width:760px;-webkit-transform: translateX(-50%) translateZ(0);transform: translateX(-50%) translateZ(0);}
  .ss2-graph-b {  width: 200vw;  margin-left: -35vw;margin-top: -45vw;}
  .ss2-graph-b.active{margin-top: -60vw;}
  #section-2 .section-title{display: inline-block;    float: none;    left: 50%;    transform: translateX(-50%);margin-left: 0;}
  #section-2 .section-title h4{margin-left: 0;}
  #section-2 .section-title .title-bg-a{width: 260px;  height: 55px;left: -20px;  top: -10px;}
  #section-2 .section-title .title-bg-b{right: -20px;width: 225px;  height: 70px;bottom: -5px;}
  #section-2 .section-title{margin-bottom: 40px;}
  .ss2-owl-slider .owl-nav{top:28%}
  .owl-theme .owl-nav [class*="owl-"]{width: 30px !important;height: 30px !important;font-size: 25px;  line-height: .7;;}
  .ss2-carousel-caption{padding: 0 40px;}
  .ss2-graph-a .context{bottom: 12%;}
  .ss2-graph-a::before{background: #e7e0da; content: ''; position: absolute; top: 10%; left: 0; width: 100%; height: 80%; z-index: 0;border: 30px;filter: blur(15px);}

  .ss2-graph-a .bottom-cloud{top:18%}
  .ss2-graph-a .cloud-3.cssb{top:0;bottom: auto;}

  .ss2-zoom-c-img,.ss3-zoom-c-img{height: 80vw;}
  .ss2-graph-obj-3.active::after ,.ss2-graph-obj-3.active::before{bottom: 13px;}
  .ss2-graph-obj-1::after{display: none;}

  /* ss3 */
  #section-3 .section-title{margin-left: -30px;}
  #section-3 .section-title{display: inline-block;float: none;left: 50%;transform: translateX(-50%);position: relative;}
  .ss3-ai-layer{height: 85%;    left: -30%;    width: 130%;top:50%;transform: translateY(-50%);}
  #section-3 .section-title h4{margin-left: 0;}
  .inner-graph img{width: calc(100vw - 40px);}
  #section-3 .section-title .title-bg-b{width: 270px;  height: 80px;right:-50px;}
  #section-3 .section-title .title-bg-b .border-1 {left: 0;  top: 30px;  width: 4px;  height: 50px;}
  #section-3 .section-title .title-bg-b .border-2 {right: 0;  top: 0;  width: 4px;  height: 80px;}
  #section-3 .section-title .title-bg-b .border-3 {right: 0;  top: 0;  width: 120px;  height: 4px;}
  #section-3 .section-title .title-bg-a{width: 255px;  height: 55px;left: -16px;  top: -10px;}
  #section-3 .section-title .title-bg-a .border-1{left: -4px;  top: 10px;  width: 5px;  height: 46px;}

  .ss3-inner-graph-icon{right: 10px;  width: 90px !important;  top: 0;z-index: 2;}
  .ss3-graph-b-infolist .inner,.ss2-graph-b-infolist .inner{padding: 20px 0 ;}

  .ss3-graph-a .context{bottom: 8%;}
  .ss3-graph-a::before{background: #e7e0da; content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0;border: 30px;filter: blur(25px);}
  .cloud-2.cssb{bottom: -360px;}
  .ai-watermark{position: absolute;  right: 0;  top: 10%;  width: 160px;}
  .ss3-graph-b.active{margin-top: -160px;}
  .ss3-graph-obj-1::after, .ss3-graph-obj-2::after, .ss3-graph-obj-3::after, .ss3-graph-obj-4::after {display: none;}
  .ss3-graph-c::after,.ss2-graph-c::after  {display: none;}


  /* ss4 */
  #section-4 ,#section-3{padding-top: 60px;}
  .ss4-bg4,.ss4-bg5{display: none;}
  #section-4 .section-title{display: inline-block;float: none;left: 50%;transform: translateX(-50%);position: relative;margin-left: 0;margin-bottom: 40px;}
  #section-4 .section-title .title-bg-a{width: 270px;  height: 55px;left: -40px;  top: -8px;}
  #section-4 .section-title .title-bg-b{width: 270px;  height: 40px;right: -35px;  bottom: -5px;}
  #section-4 .section-title .title-bg-b .border-1 {   right: -2px;  top: 10px;  width: 4px;  height: 30px;} 
  #section-4 .section-title .title-bg-a .border-1{left: -3px;  top: 10px;  width: 4px;  height: 45px;}
  #section-4 .section-title .title-bg-a .border-2 {left: 0;  bottom: 0;  width: 20px;  height: 4px;}
  .ss4-graph-bg > img,.ss4-graph{height: 460px;    width: 100%;position: absolute;top:25%;z-index: 1;}
  .ss4-graph-bg > img{position: absolute;top:50%;transform: translateY(-50%);}

  .ss4-graph-wrap::before{background: #e7e0da; content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0;border: 30px;filter: blur(25px);}
  .ss4-img-info{width: 340px;left: 50%;top:50%;transform: translate(-50%, -50%);position: absolute;}
  .ss4-img-info .inner{padding: 20px 0;width: calc(100% - 20px);}
  .ss4-img-info-3 img{width: 80px;}
  .ss4-img-info-3{padding-left: 100px;}
  .ss4-img-info-1 img{width: 120px;}
  .ss4-img-info-2 img{width: 120px;}
  .ss4-info-box::before ,.ss4-info-box::after{display: none;}
  .ss4-img-overlay-object img {    position: absolute;    height: 100%;    left: 1%;    bottom: 0%;width: auto;}
  .ss4-img-info p{font-size: 12px;}
  .ss4-graph-bg{height: 460px;top:25%;background: url('../images/dsg/ss4-graph.jpg') left -50px  center no-repeat;background-size: auto 100%;}
  .ss4-graph-bg img{display: none;}
  .ss4-img-overlay-object{left: -52px ;}
  .ss4-img-info-4 img{display: none;}
  .ss4-owl-slider::before ,.ss4-owl-slider::after,.ss4-bg6{display: none;}

  .ss4-scroll-hints{top:100px;width: 100%;}
  .ss4-scroll-hints h6{color: #000;text-shadow: none;}
  .ss4-scroll-down{width: 15px;}

  .ss4-scroll-hints.active{transform: translateX(-50%) translateY(20px);transition: transform 0.5s ease;background: url('../images/dsg/ss4-scroll-mobile.png') bottom center no-repeat;background-size: 14px auto;}
  .ss4-scroll-hints.active h6{color: #000;text-shadow: none;}

  .ss4-img-info-4  {top:auto;bottom: 40px;transform: translateY(0%) translateX(-50%);}
  .ss4-img-info-3 ,.ss4-img-info-1 {top:auto;top: 40px;transform: translateY(0%) translateX(-50%);}
  .ss4-img-info-2  {top:45%;overflow: visible;}

  .ss4-info-box-4{bottom: 53%;}

 .ss4-img-info-2 .mobile-copule {    display: block;    position: absolute;  left: 300px;    top: 9px;    width: 89px;  }    
  .ss4-graph-bg,.ss4-graph,.ss4-graph-bg{overflow: hidden;left: 50%;transform: translateX(-50%);width: 400px}
  .mobile-copule img{width: 100% !important;}
  .scroll-hints-before{padding-bottom: 0 !important;margin-bottom: 0 !important;margin-top: 25px;}
}

@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: 1800px) and (max-width: 4000px) {

  .ss2-graph-obj-4.active::after,.ss3-graph-obj-4.active::after{width: 30vw;}
  .ss2-graph-obj-3.active::after{width: 12vw;}
  .ss2-graph-obj-3.active::before {left: calc( 50% + 12vw);}
}





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