@media only screen and (min-width: 240px) and (max-width: 768px) {
.pinned-element {
  will-change: transform;
  transform: translateZ(0); /* forces GPU acceleration */
}	
	
  .desktop-item{display: none}
  .mobile-item{display: block}
  .mobile-item-inline{display: inline}
  .mobile-image{display: block;}
  .desktop-image{display: none;}

   html,body{width: 100vw;overflow-x: hidden;}
  .margin-60-bottom,.margin-90-bottom{margin-bottom: 30px !important}
  .margin-40-bottom{margin-bottom: 20px !important}
  .margin-80-bottom{margin-bottom: 30px !important}
  
  h1{font-size: 60px;line-height: 1}
  h2,.subtit-l,h3{font-size: 24px;line-height: 1}
  h4{font-size: 20px;line-height: 1.2;margin-bottom: 0;}
  h6{font-size: 10px;line-height: 1.2;}

  .kv-text h2{font-size: 32px;line-height: 1.2;}
  .kv-text h4{font-size: 20px;line-height: 1.2;}

  p{font-size: 15px;}

  .ss2-infographic-sub{font-size: 11px;}

  .inner,.inner-qoute,.inner-graph,.inner-youtube,iframe,.inner-max{padding: 0 15px !important;max-width: 420px;}

  .nav-top-bar .nav-title{display: none !important;}
  .ros-banner{width: calc(100% - 30px);margin: 0 15px;}
  .nav-listing li{width: 20px !important;height: 20px !important;line-height:16px !important;margin: 0 2px;}
  .nav-listing li.active{background: #6b3486 !important;padding: 0  !important;}

  .section-1-city img.ss1-city-bg, .ss1-obj-downcity{width: 140vw !important;left: 44%;}


  /* intro */
  .kv-text{top:48%}
  .kv-text{width: 100%;}
  .kv-tunnel img{width: 100vw;height: 100vh !important;}
  .kv-bg{background: url(../images/imda/City-mb.webp) center center no-repeat;background-size: cover;}

  .kv-bg img.kv-city{width: 110% !important ;height: 100vh !important;margin-left: -5%;margin-top: -10%;}
  .kv-info{bottom: 10%;}
  .kv-bg::before {height:50px;bottom: -50px;;display: none}

  .kv-block-1{top: 26%;left: calc( 50% - 22vh);width: 8vh;}
  .kv-block-2 {top: calc(50% + 20vh);left: calc(50% - 22vh);width: 10vh;}
  .kv-block-3 {top: calc(50% + 9.5vh);left: calc(50% - -22vh);width: 8vh;}

  .kv-object-2{top: 20px; right: -30px;width: 150px;}
  .kv-object-1 {bottom: calc(50% - 140px);left: -30px;width: 100px;}

  .kv-info .inner{max-width: 300px;}

  /* ss1 */
  .section-1-leadin{display: block;}
  .ss1-obj-wrap{position: relative !important;width: 100%;height: 80vw;;}
  .ss1-content{opacity: 1 !important;}
  .section-1-city{top:60px;z-index: 9;}
  #section-1{padding-top: 0;}
  #section-1 .ss1-obj1{top: 42%;left: 41%;width: 200px;}
  #section-1 .ss1-obj2{top: 50%;left: 70%;width: 200px;}

  #section-1 .ss1-obj1.active {
    top: 40%;
    left: calc( 40% - 30px);
  }

  #section-1 .ss1-obj2.active {
    top: 50%;
    left: calc( 60% + 60px);
  }

  /* ss2 */

  .ss2-symbol-block{width: 160%;}
  .ss2-folder-grah-wrap{height: auto;}
  .ss2-folder-grah-float{top:60px}
  .ss2-folder-inner,.ss3-folder-inner{width: 100%;height: auto !important;}
  .ss2-folder-grah{width:  100%;padding: 60px 15px;left: 0;;}
  .ss2-folder-inner-block,.ss2-folder-qoute{position: relative;left: 0;height: auto;top:auto;transform: translateY(0);width: 100%;padding:0 15px;float: none;margin: 0 auto;}
  .ss2-folder-qoute{padding: 0 15px;margin: 100px 0;}
  .ss2-qoute{display: block;width: 100vw;height: 160vw;display: block;position: relative;float: left;}

  .section-2-intro{background: url(../images/imda/ss2-bg.webp) bottom center repeat-x;background-size: 100% 100%;}
  .ss2-block-item-1,.ss2-block-item-2,.ss2-block-item-3{opacity: 0;top:50%;transform: translate(-50%,-100%);transition: all 1s cubic-bezier(0.83, 0, 0.17, 1);position: absolute;}
  .ss2-block-item-1.active,.ss2-block-item-2.active,.ss2-block-item-3.active{opacity: 1;transform: translate(-50%,-50%);}

  .ss2-qoute .inner{position: absolute;top:40%;left: 50%;transform: translate(-50%, -50%);width: calc(100% - 60px);;}
  .ss2-qoute .inner h4{position: absolute;left: 50%;transform: translate(-50%, -50%);top:50%;width: 80%;font-size: 15px;line-height: 1.4;letter-spacing: -.4px;font-weight: 700;}
  .ss2-folder-item1 {margin-top: 0;}
  .ss2-folder-item2,.ss2-folder-item3,.ss3-folder-item2,.ss3-folder-item3{top:-60px}
  .ss2-folder-item3,.ss3-folder-item3{top:-120px}

  .ss-2-bg{top: -60px;height: 160px;}
  .section-2-bg{display: none;}

  .ss2-folder-inner,.ss3-folder-inner{position: relative;}
  .section-2-folder,.section-3-folder{height: auto;margin-bottom:-120px;}
  .ss2-folder-bg{display: none;}
.ss2-folder-item1{background: url(../images/imda/ss2-f1-bg-mb.webp) top center no-repeat;background-size: 160% auto;}
.ss2-folder-item2{background: url(../images/imda/ss2-f2-bg-mb.webp) top center no-repeat;background-size: 160% auto;}
.ss2-folder-item3{background: url(../images/imda/ss2-f3-bg-mb.webp) top center no-repeat;background-size: 160% auto;}

  .ss2-zoomcontent-wrap{width: 100vw;position: relative;left: 50%;top:50%;transform: translate(-50%,-50%);height:520px;margin-top: 0;}
  .ss2-zoomcontent-wrap{background-size: 100% 520px ;}
  .ss2-zoom-content-block{height: auto;}

/*.ss2-step-3 .ss2-zoom-content-inner {transform: translateY(-520px);}
.ss2-step-4 .ss2-zoom-content-inner {transform: translateY(-1040px);}
.ss2-step-5 .ss2-zoom-content-inner {transform: translateY(-1560px);}
.ss2-step-6 .ss2-zoom-content-inner {transform: translateY(-2080px);}
.ss2-step-7 .ss2-zoom-content-inner {transform: translateY(-2600px);}
.ss2-step-8 .ss2-zoom-content-inner {transform: translateY(-3120px);}
.ss2-step-9 .ss2-zoom-content-inner {transform: translateY(-3640px);}
.ss2-step-10 .ss2-zoom-content-inner {transform: translateY(-4160px);}
.ss2-step-11 .ss2-zoom-content-inner {transform: translateY(-4680px);}
.ss2-step-12 .ss2-zoom-content-inner {transform: translateY(-5200px);}*/


  .ss2-frame1{bottom: calc(50% - 300px);top:auto;transform: translate(0);left: 160px;width: 160px;}
  .ss2-frame1-content{width: 140px;height: 90px;top: 35px;left: 10px;}
  .ss2-frame1-inner-content{width: 140px;}
  .ss2-frame2-content{height: 85px;}

  .ss2-frame2{width: 160px;left: auto;right: 160px;top:calc(50% - 300px);transform: translate(0);}
  .ss2-frame2-content{width: 142px;top:15px}

  .ss2-frame2-inner-content{width: 142px;}
  .ss2-content-wrap .inner{margin-bottom: 40px;display: inline-block;width: auto;min-width: 280px;z-index: 6;}
  .ss2-zoom-content-block-bg1 {z-index: 1;}
  .ss2-zoom-content-block{margin-bottom: 60px !important;padding-bottom: 60px;}
  .ss2-frame1-inner,  .ss2-frame2-inner{transition: all .6s cubic-bezier(0.83, 0, 0.17, 1);}
  .ss2-folder-item1 .ss2-qoute .inner::after{content:"　";position: absolute;right: 0%;bottom: 15%;width: 48px;height: 48px;background: url(../images/imda/pp1.webp) center center no-repeat;background-size: cover;border-radius: 100%}
  .ss2-folder-item2 .ss2-qoute .inner::after{content:"　";position: absolute;right: 0%;bottom: 15%;width: 48px;height: 48px;background: url(../images/imda/pp2.webp) center center no-repeat;background-size: cover;border-radius: 100%}

  .ss2-folder-item3 .ss2-qoute .inner::after{content:"　";position: absolute;right: 0%;bottom: 8%;width: 48px;height: 48px;background: url(../images/imda/pp3.webp) center center no-repeat;background-size: cover;border-radius: 100%}

  .ss2-zoom-content-inner .ss2-zoom-content-block:nth-child(1){padding-top: 240px;}

  .ss2-zoomcontent-wrap {

    background: none
  }
  .ss2-zoomcontent::before {
    content: "　";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(../images/imda/ss2-text-box.webp) center center no-repeat;
    background-size:  calc(100vw - 20px)  550px;
  }

  .data-3-block{margin-bottom: 20px !important;}

  .ss2-zoomcontent p{font-size: 14px;}

  .ss2-step-3 .ss2-frame1-inner{transform: translateX(0px);}
  .ss2-step-4 .ss2-frame1-inner,.ss2-step-5 .ss2-frame1-inner{transform: translateX(-140px);}
  .ss2-step-6 .ss2-frame1-inner{transform: translateX(-280px);}
  .ss2-step-7 .ss2-frame1-inner{transform: translateX(-420px);}
  .ss2-step-8 .ss2-frame1-inner{transform: translateX(-560px);}
  .ss2-step-9 .ss2-frame1-inner,.ss2-step-10 .ss2-frame1-inner,  .ss2-step-11 .ss2-frame1-inner{transform: translateX(-700px);}
.ss2-step-12 .ss2-frame1-inner{transform: translateX(-840px);}
  


  .ss2-step-3 .ss2-frame2-inner{transform: translateX(0px);}
  .ss2-step-4 .ss2-frame2-inner,  .ss2-step-5 .ss2-frame2-inner{transform: translateX(-142px);}
  .ss2-step-6 .ss2-frame2-inner{transform: translateX(-284px);}
  .ss2-step-7 .ss2-frame2-inner{transform: translateX(-426px);}
  .ss2-step-8 .ss2-frame2-inner{transform: translateX(-568px);}
  .ss2-step-9 .ss2-frame2-inner,.ss2-step-10 .ss2-frame2-inner, .ss2-step-11 .ss2-frame2-inner{transform: translateX(-710px);}
 .ss2-step-12 .ss2-frame2-inner{transform: translateX(-852px);}


 .ss2-step-3 .ss2-zoombg-1,.ss2-step-4 .ss2-zoombg-1,.ss2-step-5 .ss2-zoombg-1{opacity: 1;}
 .ss2-step-7 .ss2-zoombg-2,.ss2-step-8 .ss2-zoombg-2{opacity: 1;}
 .ss2-step-9 .ss2-zoombg-3,.ss2-step-10 .ss2-zoombg-3{opacity: 1;}
 .ss2-step-11 .ss2-zoombg-4,.ss2-step-12 .ss2-zoombg-4{opacity: 1;}


  .ss2-infographic-data h3{font-size: 24px;}
  .ss2-zoom-content-block .inner{padding: 0 !important;}

  .data-1 h3{left: -52px;bottom: 8px;}
  .data-2 h3{left: 74px;bottom: 8px;}
  .data-2 span{width: 56px !important;}
  .data-3 h3.dd3{left: 105px;;}
  .data-3 h3.dd2 {left: 231px;top: 28px;width: 106px;}
  .data-3 h3.dd1 {left: 105px;top:28px;width: 134px;}

  .data-5 h1{padding-left: 65px;}
  .data-5 h3.dd2{top:24px}
  .data-5 h3.dd1 {left: 113px;
    bottom: -26px;}

  .data-4 h3.dd1{top:26px}
  .data-4 h3.dd4 {right: 149px;top: 26px;}
  .data-4 h3.dd2 {right: 85px;bottom: 34px;}
  .data-4 h3.dd5 {right: -10px;bottom: 35px;}
  .dh1 {padding-right: 184px;}
  .dh2{padding-right: 25px;}

  .data-5{margin-bottom: 30px;}

  .ss2-zoom-content-block-bg1 {right: 0;top: 0;width: 240px;}
  .ss2-zoom-content-block-bg2 {left: 0px;bottom: 20px;width: 240px;}

  .ss2-zoom-content-block{width: calc(100% - 80px);;padding: 0 ;margin: 0 auto;}

  #section-2 .section-2-intro .scroll-down-button{bottom: 40px;}
  .section-2-intro .margin-120-top{margin-top: 40px !important;}


  /** ss3 **/

  .section-3-intro{position: relative;}
  .section-3-intro-obj1,.section-3-intro-obj2,.section-3-intro-obj3,.section-3-intro-obj4{opacity: 0;transform: translateY(200%);transition: all 1s cubic-bezier(0.83, 0, 0.17, 1);}
  .section-3-intro-obj1.active,.section-3-intro-obj2.active,.section-3-intro-obj3.active,.section-3-intro-obj4.active{opacity: 1;transform: translateY(0%);}

  .section-3-intro-obj{width: 200px;}

  .section-3-intro .section-3-intro-bg-back,.ss3-folder-inner-bg{background-size: cover;position: absolute !important;opacity: 1 !important;}
  .ss3-folder-inner{width: 100%;height: auto !important;}
  .ss3-bc-1{position: relative;}
  .section-3-intro .section-3-intro-bg,.section-3-intro .section-3-intro-bg-back{background: url(../images/imda/ss3-bg-mb.webp) bottom center repeat-x;background-size: cover;}
  
  .section-3-intro .section-3-intro-bg-back{background-size: cover;}
  .section-3-intro-bg{display: none !important;}


  .ss3-folder-item2{top:94%}
  .ss3-folder-item3{top:96%}
  .section-3-intro-bg-back{display: none !important;}

  .section-3-intro-obj{width: 240px;}
  .section-3-intro-obj1{left: -40px;top:10%;}
  .section-3-intro-obj2{right: -40px;top:18%;}
  .section-3-intro-obj3{left: -40px;bottom:10%;top:auto}
  .section-3-intro-obj4{right: -40px;bottom:2%;top:auto}
  
  .ss3-bc-1,.ss3-bc-2{position: relative;left: auto;right: auto;top: auto;transform:translate(0);;width: 100%;;max-width:100%;padding: 40px 30px;background: url(../images/imda/ss3-f1-border.webp) center center repeat-y;background-size: 100% auto;}
  .ss3-bc-1 p,.ss3-bc-2 p{max-width: 420px;margin: 0 auto;}
  .ss3-folder-bg1{display: none;}
  .ss3-folder-bg1-mobile{display: block;position: absolute;top:5vw;left: -30%;width: 160%;;;}

  .ss3-folder-item2 .ss3-bc-1,.ss3-folder-item2 .ss3-bc-2{background: url(../images/imda/ss3-f2-border.webp) center center repeat-y;background-size: 100% auto;}
  .ss3-folder-item3 .ss3-bc-1,.ss3-folder-item3 .ss3-bc-2{background: url(../images/imda/ss3-f3-border.webp) center center repeat-y;background-size: 100% auto;}


  .ss3-qoute{display: block;width: 100vw;height: 150vw;display: block;position: relative;;}
  .ss3-pp{display:block;width: 100%;position: relative;}
  .ss3-pp{margin-top: -5vw;}
  .ss3-folder-item1 .ss3-pp{margin-top: 0;}
  .section-3-folder{margin-top: -5vw;margin-bottom: 0;}
  .ss3-folder-item1{top:0}
  .ss3-folder-inner-bg{display: none;}

  .scroll-down-button{position: absolute;bottom: 30vw;left: 50%;transform: translateX(-50%);text-align: center;padding-bottom: 10px;background: url(../images/imda/scroll.webp) bottom center no-repeat;background-size: 13px auto;}
  .scroll-down-button h6{color:#FFF}  
  .scroll-down-button{display: block;}

  .ss3-qoute .inner{position: absolute;top:40%;left: 50%;;transform: translate(-50%, -50%);width: calc(100% - 60px);;}
  .ss3-qoute .inner h4{position: absolute;left: 50%;transform: translate(-50%, -50%);top:50%;width: 80%;font-size: 15px;;letter-spacing: -.4px;font-weight: 700;text-align: right;}
  .ending-bg{width: 120%;margin-left: -10%;}
  .ros-banner{width: calc(100% - 90px);;}

  #section-3-ending .inner{width: calc(100% - 60px);}
  #section-3-ending p br{display: none;}
  .credit-list li p span{left: 130px;}

  .ss2-zoom-content-inner{transition: none;}


}

@media only screen and (min-width: 769px) and (max-width: 1023px) {
p{font-size: 14px !important;}
.ss2-bc-1{width: 560px ;max-width:  560px;margin: 0 !important;top:50%;left: 97vh;}

}

@media only screen and (min-width: 1024px) and (max-width: 1280px) {


}




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


  p{font-size: 15px !important;}


  h3 {font-size: 32px;line-height: 1; }
  .inner-responsive-700{max-width: 680px;}

  .kv-bg img.kv-city{height:110vh ;width: auto !important ;}
  .kv-tunnel img{height: 110vh;position: absolute;left: 50%;transform: translateX(-50%);width: auto;}
  .kv-text{position: absolute;width: 50%;top:56%;left: 50%;transform: translate(-50%, -50%);text-align: center;pointer-events: auto;}


  .kv-info p{opacity: 0;color: #FFF;}
  .kv-block-3 {top: calc(50% + 30.5vh);left: calc(50% - -36vh);width: 6vh;}

  .kv-block-1{left: calc( 50% - 38vh);}
  .kv-block-2 {top: calc(50% + 40vh);left: calc(50% - 38vh);}
  .kv-bg{height: 110%;}

  /* ss1 */
  .ss1-content{margin-top: 80px;}
  #section-1 .ss1-obj1.active{left: calc( 40% - 380px);}
  #section-1 .ss1-obj2.active{left: calc( 60% + 380px);}
  #section-1 .ss1-obj1{top:25%}
  #section-1 .ss1-obj1.active{top:20%}

  #section-1 .ss1-obj2{top:26%;left: 60%;}
  #section-1 .ss1-obj2.active{top:20%}


  /* ss2 */

  .ss2-folder-inner{width: calc(300vh + 50vw);}
  .ss2-folder-grah-wrap{width: 100vw;height: 100vh;}
  .ss2-folder-grah{left: 50%;transform: translateX(-50%);}


  .ss2-folder-bg{left: 0;right: auto;z-index: -2;}
  .ss2-folder-bg2{left: auto;right: 0;display: block;}

  .ss2-bc-1{left: calc(50vw + 25vh + 100px);max-width: 1280px;width: 1280px;height: auto;;}
  .ss2-bc-1 .inner{opacity: 0;transition: opacity .6s cubic-bezier(0.83, 0, 0.17, 1);}
  .on .ss2-bc-1 .inner{opacity: 1;}
  .ss2-bc-1 .inner:nth-child(2){transition-delay: 0.5s;}
  .ss2-bc-1 .inner{float: left;margin-right: 40px;}
  .ss2-folder-qoute{right: 20vh;left: auto;}
  
  .ss2-folder-qoute h4{font-size: 16px;}
  .ss2-infographic-data h3{font-size: 26px;}
  .ss2-infographic-data h1{font-size: 64px;}

  .ss2-frame2{top: calc(50% - 160px);}
  .ss2-frame1{top: calc(50% + 110px);}

  .ss2-zoomcontent{top: calc(50% + 30px);}

  .ss2-zoomcontent-wrap{height: 80vh;background: url(../images/imda/ss2-text-box.webp) center center no-repeat;background-size: auto;background-size: 100% 100%;margin-top: 85px;}
  .ss2-content-wrap .margin-80-bottom{margin-bottom: 40px !important;}
  .ss2-content-wrap .margin-40-bottom{margin-bottom: 20px !important;}

  .ss2-zoom-content-block{width: 100%;height: 80vh;position:relative;padding: 18px 26px; }
  .ss2-zoom-content-inner{transition: transform 1.2s cubic-bezier(0.83, 0, 0.17, 1);;}
  .ss2-step-3 .ss2-zoom-content-inner {transform: translateY(-80vh);}
  .ss2-step-4 .ss2-zoom-content-inner {transform: translateY(-160vh);}
  .ss2-step-5 .ss2-zoom-content-inner {transform: translateY(-240vh);}
  .ss2-step-6 .ss2-zoom-content-inner {transform: translateY(-320vh);}
  .ss2-step-7 .ss2-zoom-content-inner {transform: translateY(-400vh);}
  .ss2-step-8 .ss2-zoom-content-inner {transform: translateY(-480vh);}

  .ss2-frame1{left: calc(50% - 400px);}
  .ss2-frame1{width: 220px;}
  .ss2-frame1-content{top: 54px;width: 200px;height: 120px;}
  .ss2-frame1-inner-content{width: 200px;}

  .ss2-block-item-1,.ss2-block-item-2,.ss2-block-item-3{top:100%}
  .ss2-block-item{height: 100%;}

.ss2-step-3 .ss2-frame1-inner{transform: translateX(-232px);}
.ss2-step-4 .ss2-frame1-inner{transform: translateX(-464px);}
.ss2-step-5 .ss2-frame1-inner{transform: translateX(-696px);}
.ss2-step-6 .ss2-frame1-inner{transform: translateX(-928px);}
.ss2-step-7 .ss2-frame1-inner{transform: translateX(-1160px);}
.ss2-step-8 .ss2-frame1-inner{transform: translateX(-1392px);}

  /* ss3 */
  /*.ss3-bc-1{width: 116vh ;margin: 0 !important;top:50%;left: 113vh;}
  .ss3-bc-2{width: 116vh ;margin: 0 !important;top:60%;left: 253vh;}*/
  
  .data-1 h3{left: -53px;}
  .data-2 h3{left: 86px;bottom:6px}

  .data-3 h3.dd1{left: 130px;    top: 25px;width: 143px;}
  .data-3 h3.dd2 {left: 268px;top: 26px;width: 143px;}
  .data-3 h3.dd3{left: 130px;}

  .data-5 h3.dd2{top:27px}
  .data-5 h1{padding-left: 75px;}
  .data-5 h3.dd1{left: 240px;bottom: 7px;}

  .dh1{padding-right: 195px;}
  .dh2{padding-right: 30px;}
  .data-4 h3.dd1{top:27px}
  .data-4 h3.dd2 {  right: 106px;bottom: 35px;}
  .data-4 h3.dd5{bottom:37px}
  .data-4 h3.dd4 {right: 159px;top: 27px;}

  .ss2-bc-1 .inner{max-width: 426px;;}
  .ss3-bc-1 .inner,.ss3-bc-2 .inner{max-width: 320px;;}


  .ss3-bc-1{left:115vh;max-width: 1280px;width: 1280px;height: auto;;}
  .ss3-bc-2{left:255vh;max-width: 1280px;width: 1280px;height: auto;;}

  .ss3-bc-1 .inner:nth-child(2),.ss3-bc-2 .inner:nth-child(2){transition-delay: 0.5s;}
  .ss3-bc-1 .inner,.ss3-bc-2 .inner{float: left;margin-right: 40px;}


}


@media screen and (min-height: 520px) and (max-height: 600px)  {
  .kv-info{bottom: -80px;}
  
}


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