html,body{
    width:100%;
    height:100%;
    margin:0;
    padding:0;
}

.topBar {
    position: fixed;
    width: 100%;
    height: 5%;
    padding: 0.3% 2%;
    box-sizing: border-box;
    background: rgba(0, 0, 0, 0.6);
    border-bottom: 1px solid #cecece;
    box-shadow: 2px 0px 13px 1px #ccc;
    display: flex;
    align-items: center;
    justify-content: center;
}

.circlemode {
    padding: 1% 2%;
    float: left;
    box-sizing: border-box;
    text-align: center;
    cursor: pointer;
}
.circlemode span {
    vertical-align: middle;
    color: rgb(170, 170, 170);
}
.circlemode i {
    font-size: 25px;
    color: rgb(170, 170, 170);
}

.circlemode:hover span,
.circlemode:hover i {
    color: #fff;
}

span.mob{
  transform: rotate(90deg);
}
.main-container{
    width:100%;
    height:100%;
    background-color: #fff;
    position:absolute;
    top: 0%;
}
.desktop{
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
   bottom: 0;
   right: 0;
   margin: 0 auto;
   overflow: hidden;
   position: absolute;
    
}
.desktop-tab{
   width: 89%;
   height: 50%;
   top: 9.5%;
   left: 0;
   bottom: 0;
   right: 0;
   margin: 0 auto;
   overflow: hidden;
   position: absolute; 
   display:none;
}

.expand{
    width:100%;
    height:100%;
    display:block;
    background-color: black;
}

.desktop .banner{
   width: 100%;
   height: 17.5%;
   position: absolute;
   background:url('../image/collapse-desktop.jpg') 12% 50% no-repeat;
   background-size: cover;
   display:none;
}

.desktop-tab .banner{
   width: 100%;
   height: 20%;
   position: absolute;
    background:url('../image/collapse-tablet.jpg');    
    display:none;
    background-position: left center;
    background-size: 100% auto;
    background-repeat: no-repeat;
    top: -2%;
}

.tabLandscapeBackground1 .desktop-tab .banner {
    width: 100%;
    height: 20%;
    position: absolute;
    background: url('../image/collapse-tablet.jpg');
    display: none;
    background-position: left center;
    background-size: 100% auto;
    background-repeat: no-repeat;
    top: 0%;
}

.desktop-mobile .banner {
    width: 100%;
    height: 12%;
    position: absolute;
    background: url('../image/collapse-mobile.jpg');
    display: none;
    background-size: 100% auto;
    background-repeat: no-repeat;
    display:none;
}

.mobile-landscape .banner {
    width: 100%;
    height: 13%;
    position: absolute;
    background: url('../image/collapse-desktop.jpg');
    display: none;
    background-size: 100% auto;
    background-repeat: no-repeat;
    display:none;
}

.cta {
    width: 13%;
    right: 12%;
    position: absolute;
    /* top: 21%; */
    top: 50%;
    transform: translateY(-50%);
}

.desktop-tab .cta {
    width: 18%;
    right: 12%;
    position: absolute;
    /* top: 21%; */
    top: 50%;
    transform: translateY(-45%);
}

.plus_icon{
    right: 2%;
    width: 5%;
    padding: 8px;
    top: 50%;
    transform: translateY(-50%);
    position: absolute;
}

.desktop-tab .plus_icon{
    width: 6%;
}

.desktop-mobile .plus_icon {
    right: 2%;
    width: 5%;
    padding: 8px;
    top: 50%;
    transform: translateY(-60%);
    position: absolute;
}

.desktop-mobile .cta {
    width: 22%;
    right: 12%;
    position: absolute;
    /* top: 21%; */
    top: 50%;
    transform: translateY(-60%);
}

.plus_icon>img,.cta>img{
    width: 100%;
}

.desktop .header{
    width:100%;
    height:15%;
    position: absolute;
}

.desktop .mainSlider{
    width:100%;
    height:85%;
    background-color:black;
    position:absolute;
    bottom:0;
}

.desktop-tab .header{
    width:100%;
    height:12%;
    position: absolute;
}

.desktop-tab .mainSlider{
    width:100%;
    height:88%;
    background-color:black;
    position:absolute;
    bottom:0;
}

.desktop-mobile .mainSlider{
    width:100%;
    height:100%;
    background-color:black;
    position:absolute;
    bottom:0;
}

.desktop-mobile{
   width: 87%;
   height: 78%;
   top: 12%;
   left: 0;
   bottom: 0;
   right: 0;
   margin: 0 auto;
   overflow: hidden;
   position: absolute;
   display:none;
}

.mobile-landscape{
    width: 76%;
    height: 86%;
    top: 6.6%;
    left: -0.4%;
    bottom: 0;
    right: 0;
    margin: 0 auto;
    overflow: hidden;
    position: absolute;
    display:none; 
}

.footer {
    background-color: #f1f1f1;
    width:100%;
    height:10%;
    position:absolute;
    bottom:0;
    display: flex;
    align-items: center;
    justify-content:center;
}

.port,.tab,.desktop_btn,.landscape,.tab_landscape{    
   width: 10%;
   top: 15%;
   margin:10px;
   float:left;
}
.port>img,.tab>img,.desktop_btn>img,.landscape>img,.tab_landscape>img{
    width:100%;
}

.logo{
    width: 12%;
    left: 2%;
    top: 20%;
    position: absolute
}

.logo>img{
    width:100%;
}

.desktop .tabClick{
    position: absolute;
    top: 25%;
    left: 20%;
    width: 70%;
    height: 55%;
}

.desktop-tab .tabClick {
    position: absolute;
    bottom: 0;
    left: 28%;
    width: 100%;
    height: 45%;
}

.desktop-mobile .tabClick {
    position: absolute;
    bottom: 0;
    left: 28%;
    width: 100%;
    height: 45%;
}

.tab1,.tab2,.tab3,.tab4,.tab5 {
    position: relative;
    float: left;
    width: 20%;
} 

.tab1>img,.tab2>img,.tab3>img,.tab4>img,.tab5>img{
    width:100%;
}

.swiper-pagination-bullet-active{background: #e7e7e7 !important;}
.swiper-pagination-bullet{background: #dedede !important; width: 10px !important; height: 10px !important; pointer-events:auto !important; }
.pre_order_online{ width: 16% !important;}


.swiper-container{width:100%; height:100%;}
.swiper-slide img{ width:100%;}
.swiper-slide{ width:100% !important;}
.swiper-wrapper{
    width:100% !important;
}
.swiper-button-next{
  background-image:url('../image/right_arrow.png') !important;
  right: 1% !important;
  bottom: 50%!important;
  height:50px !important;
  width:50px !important;
  background-size: 100% 100% !important;
  outline:none;
  z-index:999 !important;
  pointer-events:auto !important;
}

.swiper-button-prev{
  background-image:url('../image/left_arrow.png') !important;
  left: 1% !important;
  bottom: 50%!important;
  height:50px !important;
  width:50px !important;
  background-size: 100% 100% !important;
  outline:none;
  z-index:999 !important;
  pointer-events:auto !important;
}

 .img{ display:block;}
 .img-tab, .img-mobile,.common-tab{ display:none;}


.desktop .slide1{
    background:url("../image/desktop_slide1.jpg") no-repeat;
    background-position:bottom center !important;
    background-size:cover !important;
}

.desktop .slide2{
    background:url("../image/desktop_slide2.jpg") no-repeat;
    background-position:bottom center !important;
    background-size:cover !important;
}

.desktop .slide3{
    background:url("../image/desktop_slide3.jpg") no-repeat;
    background-position:bottom center !important;
    background-size:cover !important;
}

.desktop .slide4{
    background:url("../image/desktop_slide4.jpg") no-repeat;
    background-position:bottom center !important;
    background-size:cover !important;
}

.desktop .slide5{
    background:url("../image/desktop_slide5.jpg") no-repeat;
    background-position:bottom center !important;
    background-size:cover !important;
}

.desktop-tab .slide1{
    background:url("../image/tab_slide1.jpg") no-repeat;
    background-position:center center !important;
    background-size:cover !important;
}

.desktop-tab .slide2{
    background:url("../image/tab_slide2.jpg") no-repeat;
    background-position:center center !important;
    background-size:cover !important;
}

.desktop-tab .slide3{
    background:url("../image/tab_slide3.jpg") no-repeat;
    background-position:center center !important;
    background-size:cover !important;
}

.desktop-tab .slide4{
    background:url("../image/tab_slide4.jpg") no-repeat;
    background-position:center center !important;
    background-size:cover !important;
}

.desktop-tab .slide5{
    background:url("../image/tab_slide5.jpg") no-repeat;
    background-position:center center !important;
    background-size:cover !important;
}

.desktop-mobile .slide1{
    background:url("../image/mobile_slide1.jpg") no-repeat;
    background-position:10% center !important;
    background-size:cover !important;
}

.desktop-mobile .slide2{
    background:url("../image/mobile_slide2.jpg") no-repeat;
    background-position:top  center !important;
    background-size:cover !important;
}

.desktop-mobile .slide3{
    background:url("../image/mobile_slide3.jpg") no-repeat;
    background-position:top  center !important;
    background-size:cover !important;
}

.desktop-mobile .slide4{
    background:url("../image/mobile_slide4.jpg") no-repeat;
    background-position:top  center !important;
    background-size:cover !important;
}

.desktop-mobile .slide5{
    background:url("../image/mobile_slide5.jpg") no-repeat;
    background-position:top  center !important;
    background-size:cover !important;
}

.get_tips, .shop_now, .save_time , .pre_order_online{
  bottom: 16%;
  right: 26%;
  z-index: 999;
  position: absolute;
  width: 20% !important;
}

/* .shop_now{
  bottom: 16%;
  right: 10%;
  z-index: 999;
  position: absolute;
  width: 13% !important;
} */

.swiper-container-horizontal > .swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction{ display:none}

.close{
    width: 3%;
    position: absolute;
    right: 0;
    top: 0;
    padding: 30px 12px;
}

.close>img{
    width:100%;
}

.desktop-tab .get_tips {width: 20% !important; bottom: 14% !important; right:0 !important; left: 18% !important;}
.desktop-tab .shop_now{width: 20% !important; bottom: 12% !important; right:0 !important; left: 13% !important;}
.desktop-tab .save_time{width: 20% !important; bottom: 12% !important; right:0 !important;left: 15% !important;}
  
  
.desktop-tab .pre_order_online{width: 24% !important; left: 18% !important;  bottom: 9% !important; right:0 !important;}


.swiper-pagination .swiper-pagination-bullets {  bottom: 6.8% !important;}
.desktop-mobile .swiper-button-prev ,.desktop-mobile .swiper-button-next{  bottom:30px !important;}
  
.desktop-mobile .swiper-button-next{
    right: 16% !important;
    height:35px !important;
    width:35px !important;
    background-size: 100% 100% !important;
}

.desktop-mobile .swiper-button-prev{
  left: 16% !important;
  height:35px !important;
  width:35px !important;
  background-size: 100% 100% !important;
}

.desktop-mobile .get_tips ,  .desktop-mobile .save_time , .desktop-mobile .pre_order_online , .desktop-mobile .shop_now {
  width: 40% !important;
  bottom: 12% !important;
  right: 30% !important;
}
  
.desktop-mobile .close {
    width: 10%;
    position: absolute;
    right: 0;
    top: 0;
    padding: 5px;
    z-index: 9;
}
  
.text{
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%,-50%);
}

/* .phone {
   left: 50%;
    position: absolute;
    top: 75%;
    transform: translate(-50%,-50%);
} */

.phone img{
    width:100%;
}


.TabBackground1{
    width: 31%;
    height: 98%;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
    display: none;
    margin: auto auto;
    position: absolute;
}

.tabLandscapeBackground1{
    width: 1024px;
    height: 768px;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
    display: none;
    margin: auto auto;
    position: absolute;
}

.tabLandscapeBackground1 .desktop-tab {
    width: 61.5%;
    height: 45%;
    top: 19.5%;
    left: -1.8%;
    bottom: 0;
    right: 0;
    margin: 0 auto;
    overflow: hidden;
    position: absolute;
    display: none;
}

.Portbackground1{
    width: 320px;
    height: 640px;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
    display: none;
    margin: auto auto;
    position: absolute;
}

.landscapeBackground1{
    width: 640px;
    height: 320px;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
    display: none;
    margin: auto auto;
    position: absolute;
}

.iPhone{
    width:100%;
}

 .phone {
    position: relative;
    top: 60%;
    width: 3%;
    margin: 0 auto;
    -webkit-animation: rotating 2s cubic-bezier(0.77, 0, 0.175, 1) infinite;
    -moz-animation: rotating 2s cubic-bezier(0.77, 0, 0.175, 1) infinite;
    -ms-animation: rotating 2s cubic-bezier(0.77, 0, 0.175, 1) infinite;
    -o-animation: rotating 2s cubic-bezier(0.77, 0, 0.175, 1) infinite;
    animation: rotating 2s cubic-bezier(0.77, 0, 0.175, 1) infinite;
    -webkit-animation-direction: alternate;
    -moz-animation-direction: alternate;
    -ms-animation-direction: alternate;
    animation-direction: alternate;
    -webkit-animation-delay: 1s;
    -moz-animation-delay: 1s;
    -ms-animation-delay: 1s;
    animation-delay: 1s;
  }

 
@-webkit-keyframes rotating {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(90deg);
  }
}
@-moz-keyframes rotating {
  0% {
    -moz-transform: rotate(0deg);
  }
  100% {
    -moz-transform: rotate(90deg);
  }
}
@-o-keyframes rotating {
  0% {
    -o-transform: rotate(0deg);
  }
  100% {
    -o-transform: rotate(90deg);
  }
}
@keyframes rotating {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(90deg);
  }
}
@-webkit-keyframes btn-rotating {
  0% {
    -webkit-transform: rotate(-45deg) translate3d(0, 0, 0);
  }
  100% {
    -webkit-transform: rotate(90deg) translate3d(0, 0, 0);
  }
}
@-moz-keyframes btn-rotating {
  0% {
    -moz-transform: rotate(-45deg);
  }
  100% {
    -moz-transform: rotate(90deg);
  }
}
@-o-keyframes btn-rotating {
  0% {
    -o-transform: rotate(-45deg);
  }
  100% {
    -o-transform: rotate(90deg);
  }
}
@keyframes btn-rotating {
  0% {
    transform: rotate(-45deg);
  }
  100% {
    transform: rotate(90deg);
  }
}
@-webkit-keyframes btn-opacity {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-moz-keyframes btn-opacity {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-o-keyframes btn-opacity {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes btn-opacity {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
::-webkit-scrollbar { 
    display: none; 
}