SP_Glass/style.scss

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 微軟正黑體;
}

.body{
  background-color: #000 !important;
}

.propertytitle{
  -webkit-text-stroke:0.7px #fff;
  -moz-text-stroke:0.7px #fff;
}

p{
  font-size: 24px;
}

.bgslider{
  position: relative;
  width: 100% !important;
}
ul{
  list-style-type: none;
  width: 100% !important;

}
ul>li{
  position: absolute;
  width: 100% !important;
}

ul>li:nth-child(3){
  animation: li3 12s infinite;
}
ul>li:nth-child(2){
  animation: li2 12s infinite;
}
ul>li:nth-child(1){
  animation: li1 12s infinite;
}



@keyframes li3{
  0%{
    opacity: 1;
  }
  35%{
    opacity: 0;
  }

  75%{
    opacity: 0;
  }
}
@keyframes li2{
  40%{
    opacity: 1;
  }
  80%{
    opacity: 0;
  }
  75%{
    opacity: 0;
  }
}
@keyframes li1{
  80%{
    opacity: 1;
  }
  95%{
    opacity: 0;
  }
}

.bg-item{
  display: none;
  // img{
  //   // opacity: 0;
  //   // animation-name:BgFadein;
  //   // animation-duration: 5s;
  //   // animation-delay: -3s;
  //   // animation-fill-mode:forwards;
  //   // animation-fill-mode:backwards;

  //   // animation-timing-function:ease-out;
    
  // }


}

.bg-item3{
  display: none;
  img{
    animation-name:BgFadein;
    animation-duration: 1s;
    animation-timing-function:ease-out;
    
  }


}

.bg-item2{
  display: none;
  img{
    animation-name:BgFadein;
    animation-duration: 1s;
    animation-timing-function:ease-out;
    
  }


}

.bg-active{
  display: block;
}

@keyframes BgFadein {
  0% {
    opacity: 0.5;
  }
  50% {opacity: 0.8;}
  // 50% {opacity: 1;}
  100%{
    opacity: 1;
  }

}