@charset "utf-8";
/* CSS Document */
html, body { position: relative; height: 100%; }
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, a, img, strong, small, dl, dt, dd, ol, ul, li, fieldset, form, input, button, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; font-size: 100%; }
img, fieldset, button { border: 0; }
body { background: #000; font-family: "微軟正黑體", Helvetica, Arial, sans-serif; font-size: 16px; color: #000; margin: 0; padding: 0; overflow: hidden; }
.clearFix:after { clear: both; display: block; content: ''; }
.sBubble { color: #eee; padding: 4px 5px; font-size: 15px; font-weight: bold; text-shadow: 0px 0px 0px #000; font-family: Helvetica, Arial, sans-serif, "微軟正黑體"; }
.sBubble, .sBubbleArw { line-height: 30px; }
.sBubble.yellow { background: #FF0; border-color: #FF0; box-shadow: 0 0 8px rgba(0,0,0,.25); }
.sBubbleArw.top.yellow { border-top-color: #FF0; }
.sBubbleArw.bottom.yellow { border-bottom-color: #FF0; }
.sBubbleArw.left.yellow { border-left-color: #FF0; }
.sBubbleArw.right.yellow { border-right-color: #FF0; }
ul.tabs { position: absolute; z-index: 70; top: 50%; left: 50%; width: 900px; height: 220px; margin-left: -450px; margin-top: 220px; }
ul.tabs li { float: left; }
ul.tabs li a { display: block; width: 250px; height: 125px; text-indent: -9999px; margin-top: 95px; transition: margin-top .6s; background-position: center top; }
ul.tabs li:nth-child(1) a { background-image: url(../images/tabs_01.png); }
ul.tabs li:nth-child(2) a { background-image: url(../images/tabs_02.png); }
ul.tabs li:nth-child(3) a { background-image: url(../images/tabs_03.png); }
ul.tabs li.active a { width: 400px; height: 220px; margin-top: 0px; background-position-y: -125px; }
ul.custom { position: absolute; text-align: center; -webkit-transition: .3s; -moz-transition: .3s; -o-transition: .3s; transition: .3s; -webkit-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); z-index: 10; right: 10px; top: 50%; -webkit-transform: translate3d(0, -50%, 0); -moz-transform: translate3d(0, -50%, 0); -o-transform: translate(0, -50%); -ms-transform: translate3d(0, -50%, 0); transform: translate3d(0, -50%, 0); }
.swiper-pagination { width: 100px; }
.swiper-pagination-bullet { opacity: .5; background: #fff; width: 12px; height: 12px; }
.swiper-pagination-bullet-active { opacity: 1; }
.swiper-container-vertical>.swiper-pagination-bullets { right: 26px; transform: translateY(-42%); background-repeat: no-repeat; background-position: 0 0; }
a.gotop:hover { opacity: .99; }
li.swiper-pagination-switch { cursor: pointer; display: inline-block; width: 75px; border: 1px solid #CCC; background: #E0DEDE }
li.swiper-pagination-switch.active { background-color: pink }
.swiper-container { width: 100%; height: 100%; margin-left: auto; margin-right: auto; }
.swiper-slide { text-align: center; background-color: transparent; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; background-position: center top; }
.swiper-container-vertical>.swiper-pagination-bullets .swiper-pagination-bullet { margin: 0px; border-radius: 0; border-width: 0; background-color: transparent; height: 60px; width: 100%; display: inline-block; opacity: 1; box-shadow: 0px 0px 0px #888888; }
.swiper-pagination-v .swiper-pagination-bullet-active { background: #FFF; }
.swiper-pagination-v .swiper-pagination-bullet { border-color: transparent; background-image: url(../images/pagination-bullet-custom.png); }
.swiper-pagination-v .swiper-pagination-bullet:nth-child(2) { background-position-y: -60px }
.swiper-pagination-v .swiper-pagination-bullet:nth-child(3) { background-position-y: -120px }
.swiper-pagination-v .swiper-pagination-bullet:nth-child(4) { display: none; }
.swiper-pagination-v .swiper-pagination-bullet:hover, .swiper-pagination-v .swiper-pagination-bullet-active { background-color: transparent; background-position-x: -100%; }
.swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction { bottom: 40px; }
.swiper-button-next, .swiper-button-prev { position: absolute; top: 50%; width: 100px; height: 155px; margin-top: 0px; -moz-background-size: auto; -webkit-background-size: auto; background-size: auto; background-image: url(../images/pagination.png); opacity: .65; }
.swiper-button-next:hover, .swiper-button-prev:hover { opacity: .99; }
.swiper-button-prev { left: 50%; right: auto; background-position: left top; margin-left: -770px; }
.swiper-button-next { right: 50%; left: auto; background-position: right top; margin-right: -770px; }
#page1 { background-image: url(../images/bg_01.jpg); z-index: 1; }
#page2 { background-image: url(../images/bg_02.jpg); z-index: 9; }
#page3 { background-image: url(../images/bg_03.jpg); }
#slide1 { /*background-image: url(../images/bg_page1_02.jpg);*/ }
#slide2 { /*background-image: url(../images/bg_page1_02_02.jpg);*/ }
#slide3 { background-image: url(../images/bg_page2_2_3.jpg); }
#slide4 { background-image: url(../images/bg_page2_3_1.jpg); }
#slide5 { background-image: url(../images/bg_page2_3_2.jpg); }
#slide6 { background-image: url(../images/bg_page2_3_3.jpg); }
#page9 { background-image: url(../images/bg_page3_1.jpg); }
#page10 { background-image: url(../images/bg_page3_2.jpg); }
.copyright { opacity: .5; }
.layerPop { z-index: 300; position: fixed; left: 50%; top: 50%; display: none; }
.layerPop { z-index: 20000000; margin: -312px 0 0 -550px; width: 1090px; height: 614px; border: 0px solid #ccc; background: #000; }
.layerPop .close { position: absolute; right: -1px; top: -50px; }
.layerPop .close button { display: block; text-indent: -9999px; width: 49px; height: 49px; background: url(../images/btn_close_movie.jpg) no-repeat; filter: grayscale(100%); cursor: pointer; }
.overlay { z-index: 200; position: fixed; left: 0; top: 0; width: 100%; height: 100%; background: #000; opacity: 0.75; display: none; }
#bgplayer { position: absolute; z-index: 0; top: 0; left: 0; }
.playermask { width: 100%; height: 950px; /*background-image: url(../images/bg_page1_01.png);*/ background-position: center top; position: absolute; z-index: 1; top: 0; left: 0; }
.btn_play { background-image: url(../images/btn_play.png); z-index: 50; position: absolute; top: 50%; left: 50%; cursor: pointer; background-color: transparent; margin-top: -200px; height: 25px; width: 19px; }
.btn_play:hover { animation: pulse2 1s infinite; }
.btn_play.btn_play1 { margin-left: -577px; }
.btn_play.btn_play2 { margin-left: -441px; margin-top: -135px; }
.btn_play.btn_play3 { margin-left: -349px; margin-top: -196px; }
.btn_play.btn_play4 { margin-left: -266px; margin-top: -254px; }
.btn_play.btn_play5 { margin-left: -156px; margin-top: -148px; }
.btn_play.btn_play6 { margin-left: -80px; margin-top: -226px; }
.btn_play.btn_play7 { margin-left: 58px; margin-top: 26px; }
.btn_play.btn_play8 { margin-left: 451px; margin-top: -278px; }
.btn_play.btn_play9 { margin-left: 531px; margin-top: -228px; }
.btn_play.btn_play10 { margin-left: 461px; margin-top: 77px; }
.btn_play.btn_play11 { margin-left: -61px; margin-top: 326px; background-image: url(../images/btn_play_b.png); height: 63px; width: 48px; }
.btn_play.btn_play11:hover { animation: pulse 1.5s infinite; }
ul.qlink { position: fixed; top: 50%; margin-top: -230px; left: 0; z-index: 199; }
ul.qlink li { margin-bottom: 10px; }
ul.qlink li a { text-indent: -9999px; background-image: url(https://landing.mangot5.com/template/closers/event/170817/images/qlink.jpg); display: block; width: 160px; height: 90px; /*transition: all ease .3s; margin-left: -140px;*/ background-repeat: no-repeat; }
ul.qlink li.ev1 a { background-position: right top; }
ul.qlink li.ev2 a { background-position: left bottom; }
ul.qlink li a:hover { background-position-x: left; }

.fog { position: fixed; left: -320px; bottom:0; width: 99999px; height: 470px; z-index:111;	}
.fog img { display:block;}

 @keyframes pulse { 0% {
 transform: scale(1);
 opacity: 1;
}
 100% {
 transform: scale(1.5);
 opacity: 0;
}
}
@keyframes pulse2 { 0% {
 transform: scale(1);
 opacity: 1;
}
 100% {
 transform: scale(2);
 opacity: 0;
}
}
.evt { z-index: 50; position: absolute; top: 50%; left: 50%; cursor: pointer; background-image: url(../images/evt.png); height: 44px; }
.evt img:hover { animation: pulse 2s infinite; }
.evt.evt1 { margin-top: -28px; margin-left: 13px; }
.evt.evt2 { margin-top: 204px; margin-left: 122px; }
.text { padding: .5em; text-align: left; line-height: 1.4em; overflow-x: hidden; overflow-y: scroll; position: absolute; width: 580px; height: 550px; top: 270px; left: 373px; color: #b5f9fa }
.text p { margin-bottom: 1em; text-indent: 2em; }
.text::-webkit-scrollbar {
 width: 15px;
}
	::-webkit-scrollbar-track {
 background-color:inherit;
}
 .text::-webkit-scrollbar-thumb {
 background-color: rgba(255, 255, 255, .25);
}
 .text::-webkit-scrollbar-button {
 background-color: rgba(255, 255, 255, .85);
}
 .text::-webkit-scrollbar-corner {
 background-color: black;
}
#page2 .swiper-container-horizontal>.swiper-pagination-bullets { bottom: auto; top: 166px; left: 420px; text-align: left; width: auto; }
#page2 .swiper-pagination-bullet { background-color: transparent; opacity: 1; width: 156px; height: 60px; border-radius: 0; margin: 0; background-image: url(../images/pagination_bar.png); }
#page2 .swiper-pagination-bullet:nth-child(1) { background-position-y: -60px }
#page2 .swiper-pagination-bullet:nth-child(2) { background-position-x: -156px }
#page2 .swiper-pagination-bullet-active:nth-child(1) { background-position-y: 0px }
#page2 .swiper-pagination-bullet-active:nth-child(2) { background-position-y: -60px }
#page2 .swiper-pagination-bullet-active { opacity: 1; }
#page5 { height: 80px; }