@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@300;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@300;500;700;900&family=Noto+Serif+TC:wght@300;500;700;900&display=swap');

.swiper {
	width: 100%;
	height: 100vh;
}

table{
    color: white;
    font: normal 300 15px/2 'Noto Sans TC',Microsoft JhengHei,Heiti TC,sans-serif;
    padding-left: 15px;
    text-align: justify;
    border: 1px rgba(255, 255, 255, 0.4) solid;
    background-color: rgb(42 47 58);
    margin: 20px 0;
}
td{text-align: center;}

p,html,h1,h2,h3,h4,h5,span{font-family: 'Noto Sans TC', sans-serif;}

div,p{transition: all 0.15s linear;}

body {overflow-x: hidden;}
a,a:active,a:visited,a:focus{ color:rgb(255, 255, 255); text-decoration:none; display: contents;}
a,a:active {
	outline: none; /* for Firefox Google Chrome  */
	behavior:expression(this.onFocus=this.blur()); /* for IE */
}
a:hover{ color:#ffea00;text-decoration: none;}
input:focus{outline:none}

.carousel-control.right,.carousel-control.left {
    background-image: -webkit-linear-gradient(left,rgba(0,0,0,.0001) 0,rgba(0,0,0,0) 100%);
    background-image: -o-linear-gradient(left,rgba(0,0,0,.0001) 0,rgba(0,0,0,0) 100%);
    background-image: -webkit-gradient(linear,left top,right top,from(rgba(0,0,0,0)),to(rgba(0,0,0,.5))); 
    background-image: linear-gradient(to right,rgba(0,0,0,.0001) 0,rgba(0,0,0,0) 100%); 
}
.shadow {
    -webkit-filter: drop-shadow(0px 2px 0px rgba(255, 255, 255, 0.7));
	filter:drop-shadow(0px 2px 0px rgba(255, 255, 255, 0.7));
}
.gray { 
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
    filter: gray;
}
.btn.active, .btn:active {
    -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0);
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0);
}
/*LOAD*/
.load {
    position: fixed;
    background: #fff url(../images/bg_area00.jpg) no-repeat center;
    background-size: cover;
    width: 100%;
    height: 100vh;
    z-index: 99999;
    top: 0;
    left: 0;
}
.loader {
    width: 309px;
    height: 189px;
    position: absolute;
    background: url(../images/load.png) no-repeat center;
    background-size: auto;
    /* top: 0; */
    right: 0;
    bottom: 5%;
    left: 0;
    margin: auto;
}

.load p{
	text-align: center;
    color: #828282;
    font-size: 12px;
    line-height: 25;
    letter-spacing: 6px;
}
/*scrollbar優化*/
::-webkit-scrollbar { width: 0px;} 
::-webkit-scrollbar-track { background-color: rgba(0,0,0,0.3); height:0px;} /* 滑軌背景色 */
::-webkit-scrollbar-thumb { background-color: rgba(0, 0, 0, 0.5);} /* 滑塊顏色 */
::-webkit-scrollbar-button { background-color: rgba(0,0,0,0.3);} /* 滑軌兩頭監聽按鈕色 */
::-webkit-scrollbar-corner { background-color: black;} /* 橫向滾動條和縱向滾動條相交處尖角的顏色*/

/*影片全螢幕*/
.video-background {
    background: #32324e;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -99;
    height: 104vh;
}
.video-foreground,.video-background iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
/*video { width: 100%; top: -120px; position: absolute;}*/
@media (max-aspect-ratio: 16/9) {
  .video-foreground { width: 100%; height: auto; }
}
/*rwdvideo*/
.video-container {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 30px;
	height: 0;
	overflow: hidden;
}
.video-container iframe, .video-container object, .video-container embed {
	position: absolute;
	top: 0;left: 0;
	width: 100%;
	height: 100%;
}

/*50%黑頻*/
header {
    width: 100%;
    position: relative;
    height: 100vh;
}
header:after{ opacity:.5}

/*logo*/
.logol{
    filter: drop-shadow(2px 14px 0px rgba(0, 0, 0, 0.4));
    left: 20rem;
    top: 20rem;
    position: absolute;
}
.logo{ 
    background: url(../images/slogan.png) no-repeat;
    width: 62rem;
    height: 40rem;
    padding: 48rem 0 0 3rem;
}
.btn-join{
	background: url(../images/btn_join.png) no-repeat;
	background-size: contain;
	width: 41rem;
	height: 15rem;
	margin: -10rem 0 0 13rem;
	cursor: pointer;
}
.dot{
	background: url(../images/dot.png) no-repeat;
	background-size: contain;
	width: 12rem;
	height: 12rem;
	right: 0;
	top: 3.5rem;
	right: -42rem;
	position: relative;	
}

.col-sm-12.btnbottom{
    width: 100%;
    padding: 0 23%;
}
/*kvbtn*/
.btn_play{ 
    cursor: pointer;
	margin: 0% auto 3%;
	width: 55%;
    -webkit-animation: btn_playmove 1s infinite;
    -moz-animation: btn_playmove 1s infinite;
}
	@keyframes btn_playmove {
	0% {-webkit-transform: scale(1);filter: drop-shadow(0px 0px 60px rgba(255, 197, 0, 1));}
	50% {-webkit-transform: scale(.96);filter: drop-shadow(0px 0px 30px rgba(255, 197, 0, 0.5));}
	100% {-webkit-transform: scale(1);filter: drop-shadow(0px 0px 60px rgba(255, 197, 0, 1));}
	}

.btn_play:hover{
	filter: drop-shadow(0px 0px 15px rgba(255, 255, 255, 0.8));

}
/*飛船*/
.benefit__content-left-ship{
    background: url(../media/shipWin.png) no-repeat top center;
    background-size: contain;
    width: 50%;
    height: 60rem;
    animation: shipmove 2s infinite ease;
}
/*.benefit__content-left-ship video {
    width: 85rem;
    height: 85rem;
    object-fit: cover;
    margin-top: 4rem;
    left: 14%;
		position: absolute;
}*/
@keyframes shipmove{
		0% { transform:translateY(6px);}
	50% { transform:translateY(0px);}
	100% {transform:translateY(6px);}			   
}
audio, canvas, video { display: inline-block;}
.animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}
/*footer*/
#footer {
    width: 100%;
    background-color: #202020;
    z-index: 99;
    bottom: 96px;
    position: relative;
}
#footer .cube {
    margin: 0 auto;
    width: 1085px;
    height: 96px;
	background:url(../images/footer.jpg) no-repeat;
}

.fbbtn{
    position: absolute;
    margin-top: 45px;
    margin-left: 50px;
}
.fbbtns{ display:none;}
/*-----------------------------------
			lightbox
-----------------------------------*/

.modal-backdrop.in {
    filter: alpha(opacity=75);
    opacity: .8;
}
.modal-content {
    -webkit-box-shadow: 0 5px 15px rgba(0,0,0,.5);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0);
}
.modal-content {
    position: relative;
    background-color: #fff0;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    border: 0px solid #999;
    border: 0px solid rgba(0,0,0,.2);
    border-radius: 6px;
    outline: 0;
    -webkit-box-shadow: 0 3px 9px rgba(0,0,0,0);
    box-shadow: 0 3px 9px rgba(0,0,0,0);
}
.modal-header {
    border-bottom: 0px solid #e5e5e5;
}

.pic521{ width:521px; margin-top: 6%;}
.pic568{ margin-top: 6%; width: 530px;}
.pic619{ width:619px; margin-top: 6%;}
.pic630{ width:630px; margin-top: 6%;}
.modal-content .close { 
	background: url(../images/close.png) no-repeat;
	background-size: 100%;
	width: 42px;
	height: 42px;
	top: -10px;
	right: -10px;
	opacity: 1;
	cursor: pointer;
	z-index: 9999;
	position: absolute;
}
/*序號查詢*/
.serialbox01 .form-control{
	font-size: 17px;
	top: 178px;
	position: relative;
	border-radius: 0;
	height: 39px;
	width: 257px;
	padding: 1px 12px 0;
	right: -23px;
}
.serialbox02 .form-control {
	font-size: 20px;
	position: relative;
	border-radius: 0;
	padding: 1px 7px 0;
	font-family: 'Noto Sans TC',微軟正黑體;
	color: #a6a6a6;
	margin-bottom: 6px;
}
.check{
    position: relative;
    padding: 0 1rem;
    color: white;
    display: ruby-text;
    font: normal 500 24px / 1.2 'Noto Sans TC', Microsoft JhengHei, Heiti TC, sans-serif;
}
input[type=radio] {
    width: 2.5rem;
    height: 2.5rem;
}
.serial_btn {
    background: url(../images/lightbox_03btn.png) no-repeat center top;
    background-size: 100%;
    position: relative;
    width: 120px;
    height: 51px;
    top: 150px;
    left: 79px;
    cursor: pointer;
}
.serial_btn:hover {
	-webkit-filter: drop-shadow(0px 0px 10px rgb(15, 128, 254));
    filter: drop-shadow(0px 0px 10px rgb(15, 128, 254));
}

/*mouse*/
.scroll {
	position: relative;
	margin: 0 auto;
	top: -80px;
	width: 50px;
	height: 25px;
	background: url(../images/scroll.png) no-repeat center top;
	background-size: 100%;
	-webkit-animation: sdrop 1s ease-out infinite;
	-moz-animation: sdrop 1s ease-out infinite;
	animation: sdrop 2s ease-out infinite;
}
@keyframes sdrop{
0%{opacity:0;transform: translate(0px,-20px);}
50%{opacity:1;}
100%{opacity:0;transform: translate(0px,0px);}
}
/*-----------------------------------------------------
　　　　　　　　　　　　　　jun編輯
-------------------------------------------------------*/
/*bg*/
#section0,#section1,#section2,#section3,#section4,#section5{ width:100%; height: 100%; }
#section0{ }
#section1{ background:url(../images/bg_area01.jpg) no-repeat center top; background-size: cover;}
#section2{ background:url(../images/bg_area02.jpg) no-repeat center top; background-size: cover;}
#section3{ background:url(../images/bg_area03.jpg) no-repeat center top; background-size: cover;}

.container{
    width: 100%;
    height: 100vh;
    padding: 7%;
    z-index: 99;
    position: relative;
}
.kv{
    -moz-transform: scale(1);
    -webkit-transform: scale(1);
    -o-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    top: 0;
    position: relative;
    margin-top: 5%;
}

/*標題*/
.tittle{ 
	margin: 2% auto;
    transform: translateX(33%);
}

.tittle02 {
	background: url(../images/tittle02.png) no-repeat center top;
	background-size: contain;
	width: 100%;
	height: 11rem;
	cursor: pointer;
}
.tittle03 {
    margin-bottom: 1.5rem;
    width: 100%;
    filter: drop-shadow(0 0 10px rgba(0, 0, 0, .8));
}

.tittle04{ 
	background: url(../images/tittle04.png) no-repeat left top;
	background-size: contain;
	width: 31rem;
	height: 9rem;
	margin-bottom: 3%;
}
/*按鈕*/
.btn_apply,.btn_join{
    background: url(../images/btn.png) no-repeat center top;
    background-size: 100%;
    filter: drop-shadow(0px 0px 0px rgba(0, 0, 0, .1));
    width: 30rem;
    height: 9rem;
    margin: 0rem 0 0 13rem;
    border: 0;
}
.btn_join{
    background: url(../images/btnb.png) no-repeat center top;
    background-size: 100%;
    margin: 2.5% auto 0;
    position: relative;
}
.btn_apply:hover,.btn_join:hover{
	animation:btnmove .3s;
}
@keyframes btnmove{
	0% { transform: scale(1);  filter: brightness(100%);}
	50% {transform: scale(.98); filter: brightness(130%);}
	100% {transform: scale(1); filter: brightness(100%);}
}

.btn_apply:active,.btn_join:active{
	transform: scale(.98);
}
/*block*/
.block1,.block2,.block3,.block4 {
    position: absolute;
    width: 40px;
    height: 40px;
    background: #fff;
    opacity: 0.5;
}
.block1 {
    bottom: 108px;
    left: 34%;
    -webkit-animation: breath 1s linear infinite;
    animation: breath 1s linear infinite;
}
.block2 {
    bottom: 225px;
    left: 39%;
    -webkit-animation: breath 2s linear infinite;
    animation: breath 2s linear infinite;
}
.block3 {
    bottom: 208px;
    left: 56%;
    -webkit-animation: breath 1.5s linear infinite;
    animation: breath 1.5s linear infinite;
}
.block4 {
    bottom: 157px;
    left: 63%;
    -webkit-animation: breath 2.5s linear infinite;
    animation: breath 2.5s linear infinite;
}
@keyframes breath {
    0% {
        -webkit-transform: rotate(45deg) scale(1);
        transform: rotate(45deg) scale(1);
    }
    50% {
        -webkit-transform: rotate(45deg) scale(0.6);
        transform: rotate(45deg) scale(0.6);
    }
    to {
        -webkit-transform: rotate(45deg) scale(1);
        transform: rotate(45deg) scale(1);
    }
}
/*becenter*/
.flexbox{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 0 7%;
}

.capital.checkbox {
    left: 3px;
    position: relative;
    margin: 0px 0 2rem;
    display: inline-block;
    font: normal 300 16px / 2 'Noto Sans TC', Microsoft JhengHei, Heiti TC, sans-serif;
}

.checkbox label, .radio label {
    min-height: 20px;
    padding-left: 20px;
    margin: 1rem 0 0 1rem;
    cursor: pointer;
    color: aliceblue;
    font-size: 20px;
    font-weight: 300;
    letter-spacing: 1px;
}

.capital.checkbox input[type=checkbox], .capital.checkbox-inline input[type=checkbox], .capital.radio input[type=radio], .capital.radio-inline input[type=radio] {
    width: 25px;
    height: 25px;
    margin-right: 10px;
    top: 3px;
    position: relative;
}

/*-------------------------------
			事前登錄
--------------------------------*/
.page-one .kv-bg {
    display: block;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center center;
    object-position: center center;
}
.page-one .all-screen, .page-one .mask-bg {
    width: 100%;
    height: 100%;
}
.all-screen{
    width: 100vw;
    object-fit: cover;
    background-color: black;
    top: -8rem;
    position: absolute;
}
.area02kv{
    width: 55rem;
    height: 50rem;
    top: -5rem;
    left: -10rem;
    position: relative;
}
.area02kv a:hover, .area02kv a:visited, .area02kv a:link, .area02kv a:active{text-decoration: underline; color: #ffea00;}
.area02kv p{
	color: #ffffff;
	font: normal 700 1.6rem / 0 'Noto Sans TC', Microsoft JhengHei, Heiti TC, sans-serif;
	font-weight: 300;
	left: -2px;
	position: relative;
}
.step{
	font: normal 300 14px/1.2 'Noto Serif TC',Microsoft JhengHei,Heiti TC,sans-serif;
	color: #fff47f;
	margin: 6px 0 0PX;
	text-align: left;
}
.steptle{
    background: url(../images/steptle.png) no-repeat center top;
    width: 100%;
    height: 30rem;
    background-size: contain;
    padding: 12rem 2rem 0 12rem;
}

/*雙平台*/
.radiobox{ margin: -15px 0 74px;}
.device_selection .checkbox, .radio {
    float: left;
    width: 30px;
    height: 30px;
}
.checkbox+.checkbox, .radio+.radio {
    margin-top: 10px;
}
.device_selection .checkbox, .radio { width: 33px; height: 33px;}
#optionsRadios1, #optionsRadios2 { width: 33px; height: 33px;}

.col-sm-4 p{ 
    left: 20px;
    color: white;
    position: relative;
    font: normal 400 2.5rem/1.5 'Noto Sans TC',Microsoft JhengHei,Heiti TC,sans-serif;
}
label{ 
    margin-right: 2rem;
    font-weight: 300;
    font-size: 2.2rem;
}

/*手機*/
.form-control{ 
    border-radius: 0;
    font: normal 100 20px / 1 'Noto Serif TC', Microsoft JhengHei, Heiti TC, sans-serif;
    height: 4.2rem;
    margin-bottom: 2rem;
    float: right;
}
.form-group { background-color: #fff0; margin-bottom:5px;}

.area02kv .col-sm-4{
    padding-right: 0px;
    padding-left: 19px;
}
.area02kv .col-sm-8{
    padding-left: 6px;
}

/*-------------------------------
		支援投票
--------------------------------*/
.explanation{ 
    z-index: 999;
    position: relative;
    width: 280px;
    margin: 0 auto;
}
.explanation P{
    font: normal 700 18px/1 'Noto Serif TC',Microsoft JhengHei,Heiti TC,sans-serif;
    text-align: center;
    line-height: 1.8;
    letter-spacing: 3px;
    color: #ffffff;
	filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, 1)) drop-shadow(0px 0px 10px rgba(0, 0, 0, .3)) drop-shadow(0px 0px 10px rgba(0, 0, 0, .6));
}
.explanation .btn{ margin: 0 30px;}

.vs_kvbg{
    background: url(../images/area04_kvbg.png) no-repeat center top;
    background-size: 100%;
    width: 851px;
    height: 256px;
    position: relative;
    z-index: 10;
    margin: 0 auto;
}
.girlarea{
    width: 1000px;
    margin: 0;
    bottom: 16%;
    position: absolute;
}

.vs_kvbg .left{ float:left; width:50%; position:relative;}
.vs_kvbg .right{ float:right; width:50%; position:relative;}
.vs_kvbg .left .btn,.vs_kvbg .right .btn{ top: 200px; left: 22%; position: absolute; margin-top: 10px;}
.vs_kvbg .right .btn{ left: 31%;}

.left .progress { top: 166px; left: 53px;}
.left .progress-bar-warning { background-color: #ff5400;}

.right .progress { top: 166px; left: 95px;}
.right .progress-bar-warning { background-color: #ff5400;}

.progress {
    height: 16px;
    overflow: hidden;
    background-color: #182641;
    border-radius: 0px;
    -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.0);
    box-shadow: inset 0 1px 2px rgba(0,0,0,.0);
    width: 223px;
    position: relative;
}
/*-------------------------------
			預約達成
--------------------------------*/
.prearea{
	position: absolute;
	padding: 4% 7%;
	transform: scale(.96);
}

.area03_left{ 
	left: 0;
	top: 0;
	z-index: 9;
	position: relative;
	z-index: 9999;
}
.giftb{ 
	transform: scale(.98);
	width: 100%;
}
.gift{
    margin: 0 1.56%;
    width: 30%;
    animation: giftmove 2s infinite ease;
}
@keyframes giftmove{
		0% { transform:translateY(6px);}
	50% { transform:translateY(0px);}
	100% {transform:translateY(6px);}			   
}
.gift.mo2{
	animation:giftmove2 2s infinite ease;
}
@keyframes giftmove2{
	    0% { transform:translateY(0px);}
	  50% { transform:translateY(6px);}
	  100% {transform:translateY(0px);}			   
}
/*-------------------------------
			注意事項
--------------------------------*/
.rulebg{ 
    color: rgba(255, 251, 203, 0.8);
    background-size: 100%;
    width: 600px;
    font: normal 100 14px/1 '微軟正黑體',Microsoft JhengHei,Heiti TC,sans-serif;
    line-height: 1.8;
    text-align: justify;
    padding: 20px 30px;
    filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, 1));
}
.rule{
    width: 560px;
    margin: 0 auto;

}
.contant_up {
	padding:1% 0;
    margin: 0 auto;
    background: url(../images/contant_up.png) no-repeat center top;
    background-size: 100%;
}
.contant_mid {
    margin: 0 auto;
    /*background: url(../images/contant_mid.png) repeat-y center top;*/
    background-size: 100%;
    padding: 1px 30px;
    font: normal 100 15px/1 '微軟正黑體',Microsoft JhengHei,Heiti TC,sans-serif;
    line-height: 1.6;
    text-align: justify;
    color: #fff9dc;
}
.contant_down {
	padding:1% 0;
    padding-top: 3%;
    margin: 0 auto;
    background: url(../images/contant_down.png) no-repeat center top;
    background-size: 100%;
}
/*-------------------------------
			lightbox
--------------------------------*/
/*加碼獎勵*/
.serialbox01{
    width: 530px;
    height: 613px;
    position: relative;
    background: url(../images/lightbox_01.png) no-repeat;
    background-size: 100%;
    padding: 533px 0;
}
/*-------------------------------
			rwd
--------------------------------*/
@media(max-width: 1600px){
	
.logol {transform: scale(.9);}
.flexbox { padding: 0; }
.carousel-inner{
    transform: scale(1.2);
    top: 20%; 
    position: absolute;
	}
.prearea { transform: scale(.92);}
}
	
@media(max-width: 1366px){

.logol{transform: scale(.83);}
.benefit__content-left-ship{
	left: -20%;
	}

.navarea_right{transform: scale(.9);}

.benefit__content-left-ship video {
    width: 70rem;
    height: 70rem;
    margin-top: 12rem;
    left: 20%;
}
}
@media(max-width: 800px){

}