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

.background{
    
    width:100%;
    HEIGHT:100%;
    background-color: #61064f;
    position: absolute;
    overflow: hidden;
}

.circlemode.active span, .circlemode.active i {
    color: #fff;
}
.viewPortBtns {
    height: 35px;
    text-align: center;
    padding: 0px;
    z-index:9999;
    position: relative;
}
.topBar {
    position: fixed;
    width: 100%;
    height: 35px;
    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;
    font-family: arial;
  }
  
  .circlemode {
    padding: 8px 16px;
    float: left;
    box-sizing: border-box;
    text-align: center;
    cursor: pointer;
  }
  .Landscape span:first-child {
    transform: rotate(90deg);
  }
  
  .circlemode span {
    vertical-align: middle;
    color: rgb(170, 170, 170);
    font-size: 16px;
  }
        .circlemode i {
            font-size: 25px;
            color: rgb(170, 170, 170);

        }

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

span.mob{
    
    transform: rotate(90deg);
}


.main{
    
    width:100%;
    height:calc(100% - 35px);
    position: absolute;
    overflow: hidden;
    top:35px;
}

.logo{
    
    width:100%;
    text-align:center;
    bottom: 3%;
    position: absolute;
}

.logo>img{
    width:20%;
    
}

.moveTxt{
    position: absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    width:45%;
}

.moveTxt>img,.port>img,.imgFrame>img,.deviceSetImg>img{
    width:100%;
}

.imgFrame{
   position: absolute;
    width: 42%;
    top: -20%;
    right: 5%;
}

.deviceSetImg{
    position: absolute;
    width: 30%;
    top: -7%;
    right: 11%;
}

.shape1,.shape2,.shape3,.shape4,.shape5{
    position:absolute;
     background-color: #61064f;
    width:40%;
    height:40%;
}

.shape1{
   top: 0;
    right: 38%;
    transform: rotate(-5deg);
     height: 100%;
}
.shape2{
    top: 0%;
    right: -5%;
    transform: rotate(10deg);
    width: 20%;
    height: 94%;
}
.shape3{
       bottom: 0;
    right: 16%;
width:45%;
}

.background .shape3 {
    height: 25%;
}
.shape4{
       width: 18%;
    bottom: -5%;
    right: 0%;
}

.shape5{
    top:-10%;
}

.bulletTxt01{
    width:35%;
    position:relative;
    margin-left: 10%;
    margin-top: 5%;
}

.bulletTxt02{
   width:35%;
    position:relative;
   margin-left: 10%;
}
.bulletTxt03{
   width:35%;
    position:relative;
   margin-left: 10%;
}
.bulletTxt04{
   width:35%;
    position:relative;
    margin-left: 10%;
}


.bulletTxt01>img,.bulletTxt02>img,.bulletTxt03>img,.bulletTxt04>img,.background .meetTxt>img,.background .departmentTxt>img,.animTech>img,.common>img,.close>img{
    width:100%;
}

.animFrame{
      width: 26%;
    height: 16%;
    border: 2px solid #fff;
    top: 0;
    left: 0;
    right:0;
    bottom:0;
    position: absolute;
    margin:auto auto;
    
}

.boxShape{
      width: 40%;
    height: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    position: absolute;
     background-color: #61064f;
}


.background .meetTxt{
   width: 29%;
   position: relative;
    top: 50%;
    transform: translateY(-50%);
}

.background .departmentTxt{
    top: 6%;
    width: 30%;
    position: absolute;
    right:  -1%;
    position: absolute;
    top: 50%;
    transform: translateY(-45%);

}

.thirdFrame {
    position: absolute;
    width: 65%;
    height: 16%;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

.background .common{
    width: 23%;
    top: 0;
    left: 0;
    position: absolute;
    height: 14%;
    bottom: 0;
    right: 0;
    margin: auto auto;
}

.background .introWorkonomy,.landscapeBackground .introWorkonomy{
    top: 0;
    position: absolute;
    bottom: 0;
    left: 0;
    margin: auto auto;
    right: 0;
    width: 36%;
    height: 30%;
}

.introWorkonomy>img{
    width:100%;
}
.learnMore{
    width:100%;
    text-align:center;
    bottom:5%;
    position:absolute;
}

.background .learnMore>img{
    width:15%;
}

.Portbackground .learnMore>img{
    width:40%;
}    

.TabBackground .learnMore>img{
   width: 35%;
} 

.close{
    position: absolute;
    width:6%;
    top:0;
    right:0;
}

.Portbackground{
       top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto auto;
    overflow: hidden;
    position: absolute;
    background-color: #61064f;
   width: 87%;
    height: 76.5%;
    
}

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

.TabBackground1{
    width: 30%;
    height: 90%;
    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;
}

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

.iPhone{
    width:100%;
    height:100%;
    
}

.Portbackground .common {
    width: 30%;
    top: 0;
    left: 0;
    position: absolute;
    height: 5%;
    bottom: 0;
    right: 0;
    margin: auto auto;
}

.Portbackground .introWorkonomy {
    top: 0;
    position: absolute;
    bottom: 0;
    left: 0;
    margin: auto auto;
    right: 0;
    width: 68%;
    height: 12%;
}

.Portbackground .meetTxt{
    width: 100%;
    position: absolute;
    text-align: left;
    
    top: 30%;
}

.Portbackground .departmentTxt {
   width: 100%;
    position: absolute;
    text-align: right;
    left: auto;
    top: 30%;

}

.Portbackground .departmentTxt>img{
    width:27%;
}

.Portbackground .meetTxt>img{
    width:26%;
}

.TabBackground{
      width: 89%;
    height: 80%;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto auto;
    overflow: hidden;
    position: absolute;
    background-color: #61064f;
}

.TabBackground .common {
    width: 30%;
    top: 0;
    left: 0;
    position: absolute;
    height: 6%;
    bottom: 0;
    right: 0;
    margin: auto auto;
}

.TabBackground .introWorkonomy {
    top: 0;
    position: absolute;
    bottom: 0;
    left: 0;
    margin: auto auto;
    right: 0;
    width: 68%;
    height: 12%;
}

.TabBackground .meetTxt{
    width: 100%;
    position: absolute;
    text-align: left;
    
    top: 26%;
}

.TabBackground .departmentTxt {
   width: 100%;
    position: absolute;
    text-align: right;
    left: auto;
    top: 26%;

}

.TabBackground .departmentTxt>img{
    width:27%;
}

.TabBackground .meetTxt>img{
    width:26%;
}

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

.landscapeBackground{
       width: 77%;
    height: 87%;
    left:50%;
    top:0;
    left:0;
    bottom:0;
    right:0;
    margin:auto auto;
    overflow:hidden;
    position:absolute;
    background-color: #61064f;
    
}

.landscapeBackground .common{
    width: 25%;
    top: 0;
    left: 0;
    position: absolute;
    height: 13%;
    bottom: 0;
    right: 0;
    margin: auto auto;
}

.landscapeBackground .learnMore>img{
    width:25%;
}

.landscapeBackground .shape3 {
    height: 40%;
}

.landscapeBackground .meetTxt{
    width: 100%;
    position: absolute;
    text-align: left;
    
    top: 29%;
}

.landscapeBackground .departmentTxt {
   width: 100%;
    position: absolute;
    text-align: right;
    left: auto;
    top: 29%;

}

.landscapeBackground .departmentTxt>img{
    width:27%;
}

.landscapeBackground .meetTxt>img{
    width:26%;
}

.tabLandscapeBackground{
   width: 62%;
    height: 62.8%;
    top: 0;
    left: -1.4%;
    bottom: 0;
    right: 0;
    margin: auto auto;
    overflow: hidden;
    position: absolute;
    background-color: #61064f;
}

.tabLandscapeBackground .common{
    width: 25%;
    top: 0;
    left: 0;
    position: absolute;
    height: 12%;
    bottom: 0;
    right: 0;
    margin: auto auto;
}

.tabLandscapeBackground .introWorkonomy {
    top: 0;
    position: absolute;
    bottom: 0;
    left: 0;
    margin: auto auto;
    right: 0;
    width: 60%;
    height: 32%;
}

.tabLandscapeBackground .learnMore>img{
    width:20%;
}

.tabLandscapeBackground .shape3 {
    height: 60%;
    right: 10%;
}
.tabLandscapeBackground .meetTxt{
    width: 100%;
    position: absolute;
    text-align: left;
    
    top: 28%;
}

.tabLandscapeBackground .departmentTxt {
   width: 100%;
    position: absolute;
    text-align: right;
    left: auto;
    top: 28%;

}

.tabLandscapeBackground .departmentTxt>img{
    width:29%;
}

.tabLandscapeBackground .meetTxt>img{
    width:28%;
}


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

::-webkit-scrollbar { 
    display: none; 
}