.swiper-container {
        width: 100%;
        height: 100vh;
        margin-left: auto;
        margin-right: auto;
    }

    .swiper-slide {
        text-align: center;
        font-size: 18px;
        background: #fff;
        width: 100vw;
        height:100vh;

        /* Center slide text vertically */
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }

    .swiper-container-img {
      width: 60%;
      height: 300px;
      margin-left: auto;
      margin-right: auto;
  }


    .swiper-slide-img
    {
      width: 300px;
      height:300px;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
    }

    .animate-show{
        animation-fill-mode:both;
        -o-animation-fill-mode: both;
        -webkit-animation-fill-mode: both;
        letter-spacing: 5px;
    }

    html,body{
        overflow-y: hidden;
    }

    .screen-imagebackground1{
        width: 100%;
        height: 100%;
        background-image: url(/images/bg1.jpg);
        background-repeat:no-repeat;
        background-size: 100% 100%;
        background-size: cover;        
    }

    .screen-imagebackground2
    {
        width: 100%;
        height: 100%;
        background-image: url(/images/bg10.jpg);
        background-repeat:no-repeat;
        background-size: 100% 100%;
        background-size: cover;
    }

    .screen-imagebackground3
    {
      width: 100%;
      height: 100%;
      background-image: url(/images/flower-bg.jpg);
      background-repeat:no-repeat;
      background-size: 100% 100%;
      background-size: cover;
    }

    .black-bg{
        position:absolute;
        width: 100%;
        height: 100%;
        z-index: 0;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: rgba(17,17,17,0.70);
    }

    .white-bg{
      position:absolute;
      width: 100%;
      height: 100%;
      z-index: 0;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      background-color: rgba(255,255,255,0.70);
  }


    .screenshow2{
        width: 100%;
        height: 100%;
        background-image: url(/images/i06.jpg);
        background-repeat:no-repeat;
        background-size: 100% 100%;
        background-size: cover;
    }

    .stackone {
        /* float: left; */
        height: 360px; width: 640px;
        margin: 50px;

        position: relative;
    }

    .stack-before {
        content: "";
        height: 360px; width: 640px;
        background: #eff4de;
        border: 6px solid #fff;
         
        position: absolute;
        z-index: 0;
        top: 0px;
        left: -10px;
         
        -webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
        box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
         
        -webkit-transform: rotate(-5deg);
        transform: rotate(-5deg);
    }

    .stack-after {
        content: "";
        height: 360px; width: 640px;
        background: lightblue;
        border: 6px solid #fff;
        position: absolute;
        z-index: 0;
        top: 5px;
        left: 0px;
        -webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
        box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
        -webkit-transform: rotate(4deg);
        transform: rotate(4deg);
    }

    .stack-img{
        border: 6px solid #fff;
        /* float: left; */
        height: 360px; width: 640px;
        position: absolute;
        z-index: 0;
        top: 5px;
        left: 0px;
        -webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
        box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
    }


    .main-content{
        width: 60%;
        position: relative;
        margin: auto;
    }

    .crosswise-space
    {
        width:100px;
    }

    .pull-icon{
        width:30px;
        height: 30px;
        margin-top: 20px;
        -webkit-animation:flash 3s infinite;
                animation:flash 3s infinite;
    }


    .video-icon
    {
        margin-right: 5px;
        width:30px;
        height:30px;
    }

    .icon-item-white
    {
        width:50px;
        height: 50px;
        border: 1px solid #fff;
        padding:5px;
        border-radius: 5px;
    }

    .icon-item
    {
        width:50px;
        height: 50px;
        padding:5px;
        border-radius: 5px;
    }

    .video-bg{
        position: absolute;
        margin: auto;
        width: 800px;
        height:480px;
        z-index: 10;
        background-color: #000;
        top:0;
        bottom: 0;
        left: 0;
        right: 0;
        -webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
                box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
    }

    .video-bg video
    {
      width:800px;
      height:480px;
    }

    video{
        -webkit-tap-highlight-color:rgba(0, 0, 0, 0);
        -webkit-user-modify:read-write-plaintext-only;
        outline:none;
        -webkit-box-shadow:none;
                box-shadow:none;
    }

    .v-close { 
        position: absolute;
        right: 2%;
        top: 5%;
        border-radius: 100%;
        cursor: pointer;
        z-index: 11;
        width: 20px;
        height: 20px;
    }

    .item-text-width50
    {
        color: #fff;
        width: 50px;
        word-wrap: break-word;
        font-size: 20px;
        line-height: 35px;
        letter-spacing: 2px;
    }


    .grid-content
    {
        width: 250px;
        height: 150px;
        color: #000;
        padding: 10px;
    }

    address, caption, cite, code, dfn, em, strong, th, var {
        font-weight: normal;
        font-style: normal;
    }

    .em-data{
        font-size: 55px;
        color: rgb(0,129,254);
        font-weight: 100;
        font-family: "PingFang SC","Microsoft Yahei",sans-serif;
    }

    .em-symbol{
        font-size: 25px;
        color: rgb(0,129,254);
        font-weight: 100;
        font-family: "PingFang SC","Microsoft Yahei",sans-serif;
    }


    .div-circle{
        border:1px solid #ccc;
        border-radius: 100%;
        width: 250px;
        height:250px;
    }


    .img-app
    {
        height:300px;
        -webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
                box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
    }

    .img-qr
    {
        height:150px;
    }

    .img-bed
    {
        height: 200px;
        border: 1px solid #ccc;
        width: 230px;
        border-radius: 5px;
        -webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
                box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
    }

    .border-top{border-top: 1px solid #ccc;}
    .border-bottom{border-bottom: 1px solid #ccc;}
    .border-left{border-left: 1px solid #ccc;}
    .border-right{border-right: 1px solid #ccc;}

    .margin-top{margin-top: 10px;}
    .margin-bottom{margin-bottom: 10px;}
    .margin-left{margin-left: 10px;}
    .margin-right{margin-right: 10px;}

    /* .brand{font-family:"Comic Sans MS","幼圆","黑体",sans-serif;} */
    .fontBlack{color:#000;}
    .fontWhite{color:#fff;}
    .fontSubColor{color:#ccc;}



    /* rain */

    .div-rain
    {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: -webkit-gradient(linear, left top, left bottom, from(#202020), to(#111119));
        background: linear-gradient(to bottom, #202020, #111119);
    }

    .rain {
        position: absolute;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 2;
      }
      
      .rain.back-row {
        display: none;
        z-index: 1;
        bottom: 60px;
        opacity: 0.5;
      }
      
      div.back-row-toggle .rain.back-row {
        display: block;
      }
      
      .drop {
        position: absolute;
        bottom: 100%;
        width: 15px;
        height: 120px;
        pointer-events: none;
        -webkit-animation: drop 0.5s linear infinite;
                animation: drop 0.5s linear infinite;
      }
      
      @-webkit-keyframes drop {
        0% {
          -webkit-transform: translateY(30vh);
                  transform: translateY(30vh);
        }
        75% {
          -webkit-transform: translateY(90vh);
                  transform: translateY(90vh);
        }
        100% {
          -webkit-transform: translateY(90vh);
                  transform: translateY(90vh);
        }
      }
      
      @keyframes drop {
        0% {
          -webkit-transform: translateY(30vh);
                  transform: translateY(30vh);
        }
        75% {
          -webkit-transform: translateY(90vh);
                  transform: translateY(90vh);
        }
        100% {
          -webkit-transform: translateY(90vh);
                  transform: translateY(90vh);
        }
      }
      
      .stem {
        width: 1px;
        height: 60%;
        margin-left: 7px;
        background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0)), to(rgba(255, 255, 255, 0.25)));
        background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.25));
        -webkit-animation: stem 0.5s linear infinite;
                animation: stem 0.5s linear infinite;
      }
      
      @-webkit-keyframes stem {
        0% {
          opacity: 1;
        }
        65% {
          opacity: 1;
        }
        75% {
          opacity: 0;
        }
        100% {
          opacity: 0;
        }
      }
      
      @keyframes stem {
        0% {
          opacity: 1;
        }
        65% {
          opacity: 1;
        }
        75% {
          opacity: 0;
        }
        100% {
          opacity: 0;
        }
      }
      
      .splat {
        width: 15px;
        height: 10px;
        border-top: 2px dotted rgba(255, 255, 255, 0.5);
        border-radius: 50%;
        opacity: 1;
        -webkit-transform: scale(0);
                transform: scale(0);
        -webkit-animation: splat 0.5s linear infinite;
                animation: splat 0.5s linear infinite;
        display: none;
      }
      
      div.splat-toggle .splat {
        display: block;
      }
      
      @-webkit-keyframes splat {
        0% {
          opacity: 1;
          -webkit-transform: scale(0);
                  transform: scale(0);
        }
        80% {
          opacity: 1;
          -webkit-transform: scale(0);
                  transform: scale(0);
        }
        90% {
          opacity: 0.5;
          -webkit-transform: scale(1);
                  transform: scale(1);
        }
        100% {
          opacity: 0;
          -webkit-transform: scale(1.5);
                  transform: scale(1.5);
        }
      }
      
      @keyframes splat {
        0% {
          opacity: 1;
          -webkit-transform: scale(0);
                  transform: scale(0);
        }
        80% {
          opacity: 1;
          -webkit-transform: scale(0);
                  transform: scale(0);
        }
        90% {
          opacity: 0.5;
          -webkit-transform: scale(1);
                  transform: scale(1);
        }
        100% {
          opacity: 0;
          -webkit-transform: scale(1.5);
                  transform: scale(1.5);
        }
      }
      
      .toggles {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 3;
      }
      
      .toggle {
        position: absolute;
        left: 20px;
        width: 50px;
        height: 50px;
        line-height: 51px;
        -webkit-box-sizing: border-box;
                box-sizing: border-box;
        text-align: center;
        font-family: sans-serif;
        font-size: 10px;
        font-weight: bold;
        background-color: rgba(255, 255, 255, 0.2);
        color: rgba(0, 0, 0, 0.5);
        border-radius: 50%;
        cursor: pointer;
        -webkit-transition: background-color 0.3s;
        transition: background-color 0.3s;
      }
      
      .toggle:hover {
        background-color: rgba(255, 255, 255, 0.25);
      }
      
      .toggle:active {
        background-color: rgba(255, 255, 255, 0.3);
      }
      
      .toggle.active {
        background-color: rgba(255, 255, 255, 0.4);
      }
      
      .splat-toggle {
        /* top: 20px; */
      }
      
      .back-row-toggle {
        /* top: 90px; */
        line-height: 12px;
        /* padding-top: 14px; */
      }
      
      .single-toggle {
        top: 160px;
      }
      
      div.single-toggle .drop {
        display: none;
      }
      
      div.single-toggle .drop:nth-child(10) {
        display: block;
      }



    @media only screen and (max-width: 480px) {

      .wrapper
      {
        -webkit-transform:scale(0.8,0.8);
                transform:scale(0.8,0.8);
      }

      .stackone
      {
        margin: 10px;
        -webkit-transform:scale(0.6,0.6);
                transform:scale(0.6,0.6);
      }

      .grid-content
      {
          width: 150px;
          height: 120px;
          color: #000;
          padding: 5px;
      }

      .em-data{
        font-size: 35px;
        color: rgb(0,129,254);
        font-weight: 100;
        font-family: "PingFang SC","Microsoft Yahei",sans-serif;
      }
  
      .em-symbol{
          font-size: 18px;
          color: rgb(0,129,254);
          font-weight: 100;
          font-family: "PingFang SC","Microsoft Yahei",sans-serif;
      }

      .crosswise-space
      {
          width:20px;
      }

      .div-circle{
        border:1px solid #ccc;
        border-radius: 100%;
        width: 150px;
        height:150px;
    }
    .h5
    {
      line-height: 30px;
      letter-spacing: 2px;
    }


      .img-app
      {
          height:200px;
          -webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
                  box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
      }

      .img-bed
      {
        height: 100px;
        width: 130px;
      }


      .item-text-width50 {
        color: #fff;
        width: 50px;
        word-wrap: break-word;
        font-size: 15px;
        line-height: 25px;
        letter-spacing: 2px;
        display: block;
    }

      .icon-item-white {
        width: 30px;
        height: 30px;
        border: 1px solid #fff;
        padding: 5px;
        border-radius: 5px;
    }

    .video-bg{
      position: absolute;
      margin: auto;
      width: 100vw;
      height: 40vh;
      -o-object-fit: fill;
         object-fit: fill;
      z-index: 10;
      background-color: #000;
      top:0;
      bottom: 0;
      left: 0;
      right: 0;
      -webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
              box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
    }

    .video-bg video
    {
      -o-object-fit: fill;
         object-fit: fill;
      width: 100%;
      height:100%;
    }
    }

      
    @media only screen and (min-width: 480px) and (max-width: 720px) {

      .wrapper
      {
        -webkit-transform:scale(0.8,0.8);
                transform:scale(0.8,0.8);
      }

      .stackone
      {
        -webkit-transform:scale(0.8,0.8);
                transform:scale(0.8,0.8);
      }

      .h5
      {
        line-height: 30px;
        letter-spacing: 2px;
      }

      .grid-content
      {
          width: 150px;
          height: 120px;
          color: #000;
          padding: 5px;
      }

      .em-data{
        font-size: 35px;
        color: rgb(0,129,254);
        font-weight: 100;
        font-family: "PingFang SC","Microsoft Yahei",sans-serif;
      }
  
      .em-symbol{
          font-size: 18px;
          color: rgb(0,129,254);
          font-weight: 100;
          font-family: "PingFang SC","Microsoft Yahei",sans-serif;
      }

      .crosswise-space
      {
          width:20px;
      }

      .div-circle{
        border:1px solid #ccc;
        border-radius: 100%;
        width: 150px;
        height:150px;
    }

    .video-bg{
      position: absolute;
      margin: auto;
      width: 100vw;
      height: 40vh;
      -o-object-fit: fill;
         object-fit: fill;
      z-index: 10;
      background-color: #000;
      top:0;
      bottom: 0;
      left: 0;
      right: 0;
      -webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
              box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
    }

    .video-bg video
    {
      -o-object-fit: fill;
         object-fit: fill;
      width: 100%;
      height:100%;
    }


    }
    
    @media only screen and (min-width: 720px) and (max-width: 960px) {


      .grid-content
      {
          width: 200px;
          height: 120px;
          color: #000;
          padding: 5px;
      }

      .div-circle{
        border:1px solid #ccc;
        border-radius: 100%;
        width: 200px;
        height:200px;
    }

    .crosswise-space
    {
        width:50px;
    }

    .em-data{
      font-size: 35px;
      color: rgb(0,129,254);
      font-weight: 100;
      font-family: "PingFang SC","Microsoft Yahei",sans-serif;
    }

    .em-symbol{
        font-size: 18px;
        color: rgb(0,129,254);
        font-weight: 100;
        font-family: "PingFang SC","Microsoft Yahei",sans-serif;
    }

    .video-bg{
      position: absolute;
      margin: auto;
      width: 720px;
      height: 436px;
      -o-object-fit: fill;
         object-fit: fill;
      z-index: 10;
      background-color: #000;
      top:0;
      bottom: 0;
      left: 0;
      right: 0;
      -webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
              box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
    }

    .video-bg video
    {
      -o-object-fit: fill;
         object-fit: fill;
      width: 100%;
      height:100%;
    }

    }