body{
    position: relative;
    background-image: url(../images/bg-middle.jpg);
    background-size: 100%;
    background-position: center;
    background-repeat: repeat;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}
h3{
    font-family:'Noto Sans TC', serif;
    font-size: 22px;
    letter-spacing: 2px;
    display: flex;
    justify-content: center;
    padding-top: 25px;
    margin-bottom: 20px;
}

#wrapper{
   background-size: 100%;
    background-position: center top;
    background-repeat: no-repeat;
}
#wrapper:before{
   content: '';
   position: absolute;
   display: block;
   top:0;
   left:0;
   width: 100%;
   height: 100%;
   background-image: url(../images/bg-up.jpg);
   background-size: 100%;
    background-position: center top;
    background-repeat: no-repeat;
    z-index: 1;

}
#wrapper:after{
   content: '';
   position: absolute;
   display: block;
   top:0;
   left:0;
   width: 100%;
   height: 100%;
   background-image: url(../images/bg-down.jpg);
   background-size: 100%;
    background-position: center bottom;
    background-repeat: no-repeat;
    z-index: 1;

}
#slider{
    justify-content: center;
    align-items: center;
    overflow-y: hidden;
    height: 100vh;
    margin: 0 auto;
    padding: 15vh 0;
}
h2{
   letter-spacing: 2px;
    position: absolute;
    top: 5.5vh;
    z-index: 2;
    left: 0;
    right: 0;
    text-shadow: 0 0 16px black;
 }
.col-md-12 .col-md-10{margin:0 auto;text-align: justify;padding: 0 5%;}
#slider a.button.col-md-3 {
    background-color: rgba(0,36,62,0.49) !important;
    border: 1.5px solid rgba(255,255,255,0.5);
    padding: 23px 0;
    font-size: 18px !important;
    margin: 20px 30px;
  }
#slider a.button.col-md-3:hover,#slider a.button.col-md-3:focus {
      border-color: #e7fe02;
    color: #e7fe02;
  }
.scroll-container{
   margin: 0 auto;
    position: relative;
    height: 100%;
    overflow-Y: scroll;
    padding:0 10%;
    z-index: 2;
}
.scroll-container::-webkit-scrollbar {
  width: 10px;
  background-color: rgba(255,255,255,0.3);
    border-radius: 5px;
}
  
.scroll-container::-webkit-scrollbar-thumb {
    background-color: rgba(255,255,255,0.8);
    border-radius: 5px;
}
a.post{
   display: flex;
    width: 16%;
    padding-top: 16%;
    float: left;
    margin-right: 0.65%;
    margin-bottom: 0.65%;
    box-shadow: 0 0 5px rgba(255,255,255,0.5);
 }
a.post img{
      display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    object-fit: cover;
    object-position: center;
}

.scroller-status {
  display: none;
  padding: 20px 0;
}

.scroller-status__message {
  text-align: center;
  color: #777;
}

.loader-ellips {
  font-size: 20px;
  position: relative;
  width: 4em;
  height: 1em;
  margin: 10px auto;
}

.loader-ellips__dot {
  display: block;
  width: 1em;
  height: 1em;
  border-radius: 0.5em;
  background: #555;
  position: absolute;
  animation-duration: 0.5s;
  animation-timing-function: ease;
  animation-iteration-count: infinite;
}

.loader-ellips__dot:nth-child(1),
.loader-ellips__dot:nth-child(2) {
  left: 0;
}
.loader-ellips__dot:nth-child(3) { left: 1.5em; }
.loader-ellips__dot:nth-child(4) { left: 3em; }

@keyframes reveal {
  from { transform: scale(0.001); }
  to { transform: scale(1); }
}

@keyframes slide {
  to { transform: translateX(1.5em); }
}

.loader-ellips__dot:nth-child(1) {
  animation-name: reveal;
}

.loader-ellips__dot:nth-child(2),
.loader-ellips__dot:nth-child(3) {
  animation-name: slide;
}

/* stylelint-disable-next-line no-duplicate-selectors */
.loader-ellips__dot:nth-child(4) {
  animation-name: reveal;
  animation-direction: reverse;
}

@media(min-width: 768px) and (max-width:992px){
a.post {
    width: 19%;
    padding-top: 19%;
    margin-right: 1%;
    margin-bottom: 1%;
}
}

@media(max-width: 767px) {
#wrapper:after{background-position: center bottom;}
#slider {height: 100vh;margin: 0 auto;padding:10vh 0 18vh 0;}
h2 {top: 4.5vh;}
.scroll-container {padding: 0 5%;
background: rgba(0,0,0,0);
background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.22) 11%, rgba(0,0,0,0.55) 60%, rgba(0,0,0,0.19) 89%, rgba(0,0,0,0) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(0,0,0,0)), color-stop(11%, rgba(0,0,0,0.22)), color-stop(60%, rgba(0,0,0,0.55)), color-stop(89%, rgba(0,0,0,0.19)), color-stop(100%, rgba(0,0,0,0)));
background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.22) 11%, rgba(0,0,0,0.55) 60%, rgba(0,0,0,0.19) 89%, rgba(0,0,0,0) 100%);
background: -o-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.22) 11%, rgba(0,0,0,0.55) 60%, rgba(0,0,0,0.19) 89%, rgba(0,0,0,0) 100%);
background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.22) 11%, rgba(0,0,0,0.55) 60%, rgba(0,0,0,0.19) 89%, rgba(0,0,0,0) 100%);
background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.22) 11%, rgba(0,0,0,0.55) 60%, rgba(0,0,0,0.19) 89%, rgba(0,0,0,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#000000', GradientType=0 );}
a.post {
    width: 31.8%;
    padding-top: 31.8%;
    margin-right: 1.5%;
    margin-bottom: 1.5%;
}
h3.text-center.mt-3.col-md-12 {font-size: 16px;width: 100%;}
h3.text-center.mt-3.col-md-12:first-child {padding-top: 0;}

}