/*公版bg*/
.fireworksbg3{  background: url(../images/fireworks_bg3_1-2.jpg) #fff top center no-repeat;padding: 4% 0;}
.fireworksbg4{  background: url(../images/fireworks_bg4.jpg) #fff top center no-repeat; }
.fireworksbg5{  background: url(../images/fireworks_bg5.jpg) #bfebf6 top center no-repeat; }
.fireworksbg6{  background: url(../images/fireworks_bg6.jpg) #bfebf6 top center no-repeat; }
.fireworksbg7{  background: url(../images/fireworks_bg7.jpg) #f7f5ec top center no-repeat; }





/*fixBase8
.fixBase { position: fixed; bottom:20%;left: 20px; width: auto; height: auto; z-index: 20;}*/
.fixBase { position: fixed; bottom:10%;left: 5px; width: auto; height: auto; z-index: 20;opacity: 0.94;transition: opacity .5s ease-out;   }
.fixBase ul { list-style: none; }
.fixBase ul li { margin-bottom:3% ;  padding: 0.5em 0.6em 0.5em 1.7em;  border-radius: 99em; background:#340382;  border: solid 2px #6f81e7;   }
.fixBase ul li a::before{ content: "" ; position: absolute; left: 6px; width: 19px; height: 19px; background: url(../images/start_f.png); }
.fixBase ul li a {  font: 16px "微軟正黑體"; color: #fff; text-align: center;}
.fixBase ul li:hover { background:#5147ca; border: solid 2px #10b7bf; }
.fixBase ul li:hover a { color: #91fff0; }
.fixBase ul li.on { background:#5147ca; border: solid 2px #10b7bf; }


/*花火節介紹*/
.wrapper2 {
    position: relative;
    width: 100%; max-width: 1000px;
    margin: 0 auto;
    text-align: center;
}



/*video*/
.video{position: relative; letter-spacing: 0.1em; background: url(../images/fireworks_bg2-2.jpg) #08112e center top no-repeat ; }
/*.video:before{content: ''; position: absolute; left: 0; bottom: 0; background: #e5e5e5; width: 100%;   height: 37%;}*/
.video .wrapper2{display: flex; align-items:flex-start;padding: 60px 10px 40px 10px;}
.video .info2{width: 45%; margin: 0px auto;  text-align: left;}
.video .info2 h2{font: bold 26px/1.8"微軟正黑體" ; color: #e5ff80; display: block; padding: 2% 0; }
.video .info2 small{font:  18px/1.8"微軟正黑體" ; color:#e5ff80;}
.video .info2 hr{    margin: 2em 0; }
.video .info2 p{  font:  16px/1.8"微軟正黑體" ; color: #fff; display: block; }
.video .info2 a{ display: inline-block; font:  20px/1.8"微軟正黑體" ; background:#0197a9; color: white;  padding: 0.5em 1em; border-radius: 20em;margin:20px 0px;}
.video .info2 a.bright{animation:bright 0.5s infinite alternate ;background: #e4007f;-webkit-animation:bright 0.5s infinite alternate ;margin:20px 10px;}
.video .info2 a:hover{  color: #e5ff80; }
.video .info2 a.bright:hover{animation:none;-webkit-animation:none;}
.video .youtube{width: 45%; position: relative; border: 2px solid #FFF;}
.video .youtube iframe{position: absolute; width: 100%; height: 100%; left: 0; top:0;}
.video .youtube img{max-width: 600px;width:100%; }
.huang{font:18px/1.8"微軟正黑體" ; color: #FFF;}
.huang img{max-width:130px; transform: translate(3px,-10px); }



@keyframes bright{
  0%{
    filter: brightness(1);
  }
  50%{
    filter: brightness(1.3);
  }
  100%{
    filter: brightness(1);
  }
}





@media screen and (max-width:1220px) {

}

@media screen and (max-width:980px) {
    .video .wrapper2 {}
    .image img { width: 100%; overflow: hidden; }
}


@media only screen and (max-width: 950px) {

.fixBase{display: none;}
}




@media only screen and (max-width: 860px) {
.video .wrapper2{display: block;}
.video .info2{width: 90%;margin:0 auto;text-align: center; }
.video .youtube{width: 90%;margin:0 auto;text-align: center; }
.video .youtube img{max-width: 900px;}
}

@media only screen and (max-width:490px) {

    .video .info2 a{margin: 20px 5px;font:16px/1.8 "微軟正黑體";padding: 5px 10px;}
    .video .info2 a, .video .info2 a.bright{margin: 20px 5px;}
        .video .info2 p{text-align: left;font:15px/1.6 "微軟正黑體";}

    .huang{font:16px/1.6 "微軟正黑體" ; color: #FFF;}

}