#ad1{max-width: 1000px;
position: relative;
margin-left: auto;
margin-right: auto;}
.vibg{
    background-image: url(../img/index/vi-bg.jpg);
    width: 100%;
    height: 100%;
    background-size:cover ;
    background-position: center top;
    position: fixed;
    z-index: 0;

}
.vibg2{
    width: 100%;
    height: 100%;
    z-index: 1 !important;
    position: fixed;
    background-color: rgba(0,0,0,0.3);
    opacity: 0;
}
.vi-sand{
    width: 90vw;
    position: fixed;
    z-index:4;
   left: 50%;
   top:-5%;
   margin-left: -45vw;
}

.vi-stone{
    width: 100%;
    position: fixed;
    z-index:4;
   left: 0%;
   bottom:-2%;
}
.vi-news{
    width: 25%;
    position: fixed;
    z-index:5;
   left: 15%;
   bottom:-3%;
}

/*
*section1
*/
.section1{
padding-top: 20%;
padding-left: 0%;}
.vi-text{
    flex:0 0 auto;
    width:50%
}
.vi-t{
    flex:0 0 auto;
    width:90%;
    margin-top: 1rem;
   /* width:35% */
}
.section-w{
    flex:0 0 auto;
    width:100%;
    position: relative;
    float: left;
    opacity: 1;
    padding-left: 5%;
    padding-right: 5%;
}
.sw1,.sw2,.sw3{opacity: 1;}
.wrapper-date{
    font-family: 'NotoSerifTC';
    font-size: 2.18rem;
    text-shadow:0em 0em 0.05em #000000 ;
    width: 100%;
}
.wrapper-date div{
    background-color: #3D3830;
    color: #ffffff;
    width: 40px;
    height: 40px;
    line-height: 40px;
    border-radius: 50%;
    text-align: center;
    font-size: 0.6em;
}
.wrapper-date i{
    width: 30px;
    height: 1px;
    background-color: #ffffff;
}
.col-people{
    flex:0 0 auto;
    width: 30%;
    position: relative;
    overflow: visible;
}
.col-subt{
    flex:0 0 auto;
    width: 13%;
    position: relative;
    z-index: 2;
}
.col-maint{
    flex:0 0 auto;
    width: 25%;
    position: relative;
    z-index: 2;
}
.peo{
    width:90%;
    z-index: 2;
    margin-left: -50%;
    margin-top: 5%;
}
.peo img{
    mix-blend-mode: multiply;}
.peolight{
    width:200%;
    position: absolute;
    z-index: 0;
    top: 28%;
    left: 65%;
    margin-left: -50%;
    margin-top: 5%;
    
}
.peolight img{ mix-blend-mode: multiply;}


@media screen and (min-width: 768px) {
    .section1{
        padding-top: 10%;
        padding-left: 10%;}
        .wrapper-date i{
            width: 80px;         
        }
.vi-text{
    width:22%;
    max-width: 22%;
}
.vi-t{
    position: relative;
    left: 0px;
    width:45%
   /* width:35% */
}
.section-w{
    width:50%;
    margin-left: 5%;
    margin-right: 5%;
    float: right;
/*     opacity: 0; */
    text-shadow:0em 0.05em 0.1em #000000 ;   
}
.sw1,.sw2,.sw3{opacity: 0;}
.vi-sand{
    width: 70vw;
   left: 50%;
   top:-15%;
   margin-left: -35vw;
}

.vi-stone{
    width: 100vw;
   left: 0%;
   bottom:-20%;
}
.vi-news{
    width: 25%;
   left: 15%;
   bottom:-15%;
}

}
@media screen and (min-width: 992px) {
.col-people{
    flex:0 0 auto;
    width: 20%;
}
.col-subt{
    width: 8%;
 }
.col-maint{
    width: 20%;
}
}
/*
*section2
*/
.section2{
    width: 100%;
    padding-top: var(--sectionpd);
    padding-left:10%;
    padding-right: 10%;
    overflow: hidden;
}