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;}
#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: 48%;
    float: left;
    margin-right: 2%;
    margin-bottom: 2%;
 }
 a.post:nth-of-type(2n){margin-right:0}
 a.post iframe{height:280px;pointer-events: none;}
a{pointer-events: auto;}
.mfp-container{padding:0;}
.mfp-iframe-holder .mfp-content {width: 100vw;max-width: 100vw;}
.mfp-iframe{height: 100% !important;width: 100vw!important;border: 2px solid #01d2ea !important;z-index: 9999999999;}
.mfp-iframe-holder .mfp-close{
    height: 45px;
    color: rgba(1, 210, 234, 0.9);
    right: 0;
    left: 0;
    top: -45px;
    text-align: right;
    padding-right: 15px;
    width: 100%;
    background-color: rgba(0,62,67,0.63);
    opacity: 1;
    margin: 0 auto;
    transform: translate3D(0, 0, 0);
    border: 2px solid #01d2ea;
    border-bottom: 0;
}
.mfp-iframe-holder .mfp-close:before{
    content: '<';
    display: block;
    position: absolute;
    left: 10px;
    top: 0;
    color: rgba(1, 210, 234, 0.9);
    transform: scale3d(0.6, 1.3, 1);
}
.mfp-bg{background: #000000;
    opacity: 0.85;}

@media (min-width: 1500px){
a.post iframe {height: 320px;}
.mfp-iframe-scaler{padding-top: 62.25%;}
.mfp-iframe-scaler iframe.mfp-iframe{top: 45px;height: 90% !important;max-height: calc(100vh - 50px);}
.mfp-iframe-holder .mfp-close{top:0;}
}
@media(min-width: 768px) and (max-width:992px){
.scroll-container {padding: 0 5%;}
a.post iframe {height: 200px;}
}
@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: 100%;margin-right: 0;margin-bottom: 5%;}
a.post iframe {height: 200px;}
}