#content {
  overflow-x: hidden;
}
#hscroll {
  width: 900vw;
  height: 100vh;
  display: flex;
  flex-direction: row;
}
.stage {
  width: 100vw;
  height: 100%;
  display: flex;
 /*  justify-content: center;
  align-items: center; */
  position: relative;
  z-index: 0;
  background-image: url(../img/vi/bg-texture.webp);
  overflow: hidden;
}
.proxy {
  visibility: hidden;
  opacity: 0;
}


@media only screen and (max-width: 991px){
  #hscroll {
    width: 100vw;
    height: auto;
    flex-direction: column;
  }
  .stage {
    width: 100vw;
    height: auto;
    min-height:auto;
  }
}


  /*--BOXPIC
  -------
  --------*/
.box-pic{
  background-repeat:no-repeat ;
  background-size:100% auto;
  width: 100%;
  height: auto;
  position:relative;
  z-index: 0;
}
.box-pic img{height: auto;width: 100vw;}

.box-pic-fill{
  background-repeat:no-repeat ;
  background-size:100% auto;
  width: 100%;
  height: auto;
  position:relative;
  z-index: 0;
}
.box-pic-fill img{height: auto;width: 100%; object-fit: cover;}
.boc-pic-h{
  background-repeat:no-repeat ;
  background-size:100% auto;
  width: 100%;
  height: auto;
  position:relative;
  z-index: 0;
}
.box-pic-h img{min-height:auto;width:100%; object-fit: cover;}


.box-pic-inner{
  height: auto;
}
.btn-pic{position:absolute;z-index: 2;}
.col-picdot{flex:0 0 auto;
width: 50px;}
.picdot{
  width: 50px;
  height:50px;
  display: block;
  background-color: #BD3E1E;
  background-image:url(../img/all/arrow-rigth.svg) ;
  background-repeat:no-repeat ;
  background-size:30px 30px;
  border-radius: 50%;
  background-position: center; 
}
a .btn-boxpic{ color: #ffffff;}
.col-picname{
  text-shadow: black 0em 0em 0.5em
}
.btn-boxpic{
  margin: 2rem 2rem;
  cursor: pointer;
}
.btn-boxpic:hover .picdot,.box-pic-inner:hover .picdot{
  background-color: #FA896C;
}
.btn-boxpic:hover .col-picname,.box-pic-inner:hover .col-picname{
  margin-left: 10px;
}
.btn-boxpic:hover .picdot,.btn-boxpic:hover .col-picname{
 margin-bottom: 0.5rem;
}

.picW .stagew,.picH .stagew,.picB .stagew{
  flex:0 0 auto;
  width: 100%;
}
.lineword{
  width:200px;
  max-width:60%;
  margin-bottom: 1rem;
  margin-top: 2rem;
}
.linedot-top,.linedot-btm{
  width: 100%;
  height: 1px;
  background-color: rgba(255,255,255,0.1);
  display: block;
  position: relative;
  margin: 3rem 0;
}

.linedot-top:after,.linedot-top:before,.linedot-btm:before{
  content: "";
  background-color: #344946;
  width: 10px;
  height: 10px;
  display: block;
}
.linedot-top:after{
  float: right;
  display: none;
}
.linedot-top:before{
  float: left;
}
.linedot-btm:after{
  float: right;
  margin-top: -10px;
  display: none;
}
.linedot-btm:before{
  float: left;
  margin-top: -10px;
}
.linedot-btm:after,.linedot-btm:before{display: none;}
.linedot-btm{
  background-color: rgba(255,255,255,0); 
}
.stagemain-des{
  padding: 1rem 2rem;
}
.deslist li a,.deslist li{
  margin-top: 10px;
  line-height: 1.6;
  display: flex;
  flex-wrap: wrap;
}
.deslist a{color: #ffffff;}
.deslist a:hover{color: #c0c25b;}
@media only screen and (min-width: 1200px){
  .stagemain-des{
    padding: 2rem 8rem;
  }

}
@media only screen and (min-width: 992px){
  .linedot-top:before, .linedot-btm:before{
    display: none;
  }
  .box-pic-h img{min-height:100%;width:auto; object-fit: cover;}
  .lineword{
    width:500px;
    max-width:60%;
    margin-bottom: 2rem;
    margin-top: 3rem;
  }
/*   .linedot-btm:after{display:block;} */
  .linedot-btm{background-color: rgba(255,255,255,0.1); }
  .box-pic{
    background-size:auto 100%;
    width: auto;
    height: 100%;
  }
  .btn-boxpic{
    margin: 4rem 3rem;
  }
  .box-pic img{height: 100vh;width: auto;}
  .box-pic-inner{
    height: 100vh;
  }
  .picW .stagew{
    flex:0 0 auto;
    width: 50%;
  }
  .picH .stagew{
    flex:0 0 auto;
    width: 58%;
  }
  .picB .stagew{
    flex:0 0 auto;
    width: 70%;
  }

}


  /*--wrapper-stage1
  -------
  --------*/
  #stage-1{
  background-color: #93966A;
  color: #ffffff;
 
}
.wrapper-stage1{  width:100%;
overflow: hidden;}
.col-vi{
  background-image: url(../img/vi/vi1.jpg);
  background-size:cover;
  background-repeat:no-repeat ;
  background-position: top right;
}

/*--wrapper-stage2
 -------
  --------*/
  #stage-2{
    background-color: #718E98;
    color: #ffffff;

  }
  .wrapper-stage2{  width:inherit;
    overflow: hidden;}
/*--wrapper-stage3
 -------
  --------*/
  #stage-3{
    background-color: #888574;
    color: #ffffff;
   
  }
  .wrapper-stage3{  width:inherit;
    overflow: hidden;}

/*--wrapper-stage4
 -------
  --------*/
  #stage-4{
    background-color: #8C9380;
    color: #ffffff;
   
  }
  .wrapper-stage4{  width:inherit;
    overflow: hidden;}
/*--wrapper-stage5
 -------
  --------*/
  #stage-5{
    background-color: #8EA593;
    color: #ffffff;
  
  }
  .wrapper-stage5{  width:inherit;
    overflow: hidden;}
/*--wrapper-stage6
 -------
  --------*/
  #stage-6{
    background-color: #888574;
    color: #ffffff;
    
  }
  .wrapper-stage6{  width:inherit;
    overflow: hidden;}
/*--wrapper-stage7
 -------
  --------*/
  #stage-7{
    background-color: #516C79;
    color: #ffffff;
   
  }
  .wrapper-stage7{  width:inherit;
    overflow: hidden;}