* {
  box-sizing: border-box;
}
body,html{
    width:100%;
    height:100%;
    padding:0;
    margin:0;
}
.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;
  z-index: 999;
}

.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, .active span, .active span i {
  color: #fff;
}
.desktop{
    width: 100%;
    height: 95%;
    top: 5%;
    left: 0;
    bottom: 0;
    right: 0;
    margin: 0 auto;
    overflow: hidden;
    position: absolute;
}

.mainBg{
  width:100%;
  height:100%;
  background : url('image/bg.jpg');
  background-repeat:no-repeat;
  background-size : cover;
  cursor : pointer;

}
  .slide1{
    position: relative;
    float: left;
    width:33.3333333333%;
    height:90%;
    border-right:1px solid #fff;
    transform: translateX(-2000px);
    background:url('image/slide1.jpg');
    background-repeat:no-repeat;
    background-size:100% 100%;
    overflow : hidden;
    z-index:4;
  }
  .slide2{
    position: relative;
    float: left;
    width:33.3333333333%;
    height:90%;
    background: url('image/slide2_landscape.png') no-repeat;
    background-size: 100% auto ;
    border-right:1px solid #fff;
    transform: translateX(-2000px);
    z-index:2;
   
  }
  .slide3{
    position: relative;
    float: left;
    width:33.3333333333%;
    height:90%;
    transform: translateX(-2000px);
    background:url('image/slide3_landscape.jpg');
    background-repeat:no-repeat;
    background-size:100% 100%;
    overflow : hidden;
  }

  .slide1-doctor {
    position: absolute;
    width: 100%;
    bottom: -0.6%;
    text-align : center;
    right : auto;
}
  
  .slide1-doctor >img{
    width: 40%;
  }
  
  .slide3-doctor {
    position: absolute;
    width: 95%;
    bottom: -1.3%;
    z-index: -1;
    right: -3%;
  }
.slide3-doctor>img{
width:100%;
}
.slide1Hover,.slide2Hover,.slide3Hover{
  background-color:rgba(107,0,13,0.8);
  width:100%;
  height:100%;
  position:absolute;
}
  .cta1, .cta2{
    position: absolute;
    top: 40%;
    width: 45%;
    left: 50%;
    transform: translateX(-50%);
}
.cta3 {
    position: absolute;
    top: 40%;
    width: 32%;
    left: 50%;
    transform: translateX(-50%);
}
  .cta1Hover{
    position: absolute;
    top:45%;
    width :45%;
    left: 50%;
    transform: translateX(-50%);
  }
  
  .cta2Hover{
    position: absolute;
    top:51%;
    width :45%;
    left: 50%;
    transform: translateX(-50%);
  }
  
  .cta3Hover{
    position: absolute;
    top:48%;
    width :32%;
    left: 50%;
    transform: translateX(-50%);
  }
  .cta1>img, .cta2>img,.cta1Hover>img ,.cta2Hover>img{
  width : 100%;
}
  .cta3>img,.cta3Hover>img {
  width : 100%;
}
.bottom-bar{
    position: absolute;
    float: left;
    background-color: #fff;
    width: 100%;
    height: 10%;
    z-index: 7;
    border-top: 1px solid #fff;
    bottom: 0;
}
  .logo {
    position: absolute;
    width: 25%;
    text-align: center;
    left: 50%;
    top: 5%;
    transform: translateX(-50%);
}
  
  .logo>img {
    width: 100%;
}
  .text1,.text2, .text3{
    position: absolute;
    top: 10%;
    width: 100%;
    text-align: center;
}
  
  .text1>img,.text2>img, .text3>img{
    width : 90%;
  }
  .text1Hover,.text3Hover{
    position: absolute;
    width: 70%;
    top: 8%;
    left :50%;
    transform:translateX(-50%);
    right:auto;
}

  .text2Hover{
    position: absolute;
    width: 70%;
    top: 8%;
    left :50%;
    transform:translateX(-50%);
    right:auto;
}

  
.text1Hover>img,.text2Hover>img,.text3Hover>img{
   width:100%
}

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

.p_mobile{
    width: 87%;
    height: 77.5%;
    top: 12%;
    left: 0;
    bottom: 0;
    right: 0;
    margin: 0 auto;
    overflow: hidden;
    position: absolute;
}
.ls_mobile{    
    width: 76.1%;
    height: 86%;
    top: 6.8%;
    left: 0;
    bottom: 0;
    right: 0;
    margin: 0 auto;
    overflow: hidden;
    position: absolute;
}
.tablet_image{
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto auto;
    position: absolute;
    width: 450px;
    height: 600px;
    display:none;
    
}
.tablet_image img {
    width: 100%;
}
img.p_tab_image {
  width: 450px;
  float: right;
}
.p_tablet{
    width: 89%;
    height: 95%;
    top: 10%;
    left: 0;
    bottom: 0;
    right: 0;
    margin: 0 auto;
    overflow: hidden;
    position: absolute;
}
.p_tablet {
  width: 90%;
  height: 90%;
}
.ls_tablet{    
    width: 83%;
    height: 80%;
    top: 10%;
    left: 0;
    bottom: 0;
    right: 0;
    margin: 0 auto;
    overflow: hidden;
    position: absolute;
}
 .close{
    position: absolute;
    top: 0;
    right: 0;
    width: 6.25%;
    padding: 0px 2px 50px 50px;
    z-index: 9999;

}  
.p_mobile .close{
    width: 27%;
}  
.ls_mobile .close{
    width: 15%;
}
.p_tablet .close{
    width: 15%;
    padding: 0px 2px 30px 30px;
}  
.ls_tablet .close{
    width: 12%;
}
.close img{width:100%;}

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