@charset "utf-8";
/* CSS Document */


/*------共用--區塊_all------*/
.WRAPPER {position:relative; display:inline-block; margin:0; padding:0; overflow:hidden; width:100%;}
.WRAPPER * {-webkit-box-sizing:border-box; box-sizing:border-box;}
.WRAPPER img {  width:100%;  height:auto;}
.mainKv{max-width: 1220px; margin: 0 auto; position: relative;}

.forWeb{display: block;}
.forPhone {display:none;}
@media screen and (max-width:767px){ 
	.WRAPPER{background-size:100%;} 
	.forWeb{display: none;}
	.forPhone {display: block;}
	.mobile{ display: block; }
	.mainKv { width: 100%;}
	.mainKv img {max-width:100%;height:auto !important;}
}


/* --------------------------------------
 *                背景
 * -------------------------------------- */
/*PC背景*/
.bg1240{ position: relative; background: url() no-repeat top center; }
.bg01 { position: relative; background:url("../../images/bg_01.jpg") no-repeat  center 50px #020100;padding-top: 50px;}
.bg02 { position: relative; background:url("../../images/bg_02.jpg") repeat-y top center #020100; padding-bottom: 50px;}


.sectionBg{/*底下套版背景*/
	text-align:center;
	padding: 0 0 0px;
	background: url(../../images/bg_03.jpg) #0f0950 repeat top center ;
}

/*Phone背景*/
@media screen and (max-width:767px){ 
	.bg01{ 
		background-image:none ;
		padding-top: 42px;
		padding-bottom: 20px;
	}
	
	.bg02{ 
		background-image:none ;
		background-size:100%;
    	background-position: top center;
    	background-color: #020100;
	}

}



/* 招牌動畫 */
/*閃光*/
.lightSweepa {  pointer-events: none;
	-webkit-filter: brightness(1.5);
	-webkit-mask-size: 300% 200%;
	-webkit-mask-image: -webkit-linear-gradient( -45deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 60%);
	-webkit-transition: -webkit-mask-position;
	-webkit-animation-timing-function: linear;
	-webkit-transform: translate3d(0, 0, 0);
	-moz-filter: brightness(1.3);
	-moz-mask-size: 300% 200%;
	-moz-mask-image: -webkit-linear-gradient( -45deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 60%);
	-moz-transition: -webkit-mask-position;
	-moz-animation-timing-function: linear;
	-moz-transform: translate3d(0, 0, 0);
	-o-filter: brightness(1.5);
	-o-mask-size: 300% 200%;
	-o-mask-image: -webkit-linear-gradient( -45deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 60%);
	-o-transition: -webkit-mask-position;
	-o-animation-timing-function: linear;
	-o-transform: translate3d(0, 0, 0);
	filter: brightness(1.9);
	mask-size: 300% 200%;
	mask-image: -webkit-linear-gradient( -45deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 60%);
	transition: -webkit-mask-position;
	animation-timing-function: linear;
	transform: translate3d(0, 0, 0);
	transition-duration: 3s;
	animation: move 2s ease-out infinite;
  }

.lightSweepa2 {  pointer-events: none;display: 1s;
	-webkit-filter: brightness(1.5);
	-webkit-mask-size: 300% 200%;
	-webkit-mask-image: -webkit-linear-gradient( -45deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 60%);
	-webkit-transition: -webkit-mask-position;
	-webkit-animation-timing-function: linear;
	-webkit-transform: translate3d(0, 0, 0);
	-moz-filter: brightness(1.3);
	-moz-mask-size: 300% 200%;
	-moz-mask-image: -webkit-linear-gradient( -45deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 60%);
	-moz-transition: -webkit-mask-position;
	-moz-animation-timing-function: linear;
	-moz-transform: translate3d(0, 0, 0);
	-o-filter: brightness(1.5);
	-o-mask-size: 300% 200%;
	-o-mask-image: -webkit-linear-gradient( -45deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 60%);
	-o-transition: -webkit-mask-position;
	-o-animation-timing-function: linear;
	-o-transform: translate3d(0, 0, 0);
	filter: brightness(1.9);
	mask-size: 300% 200%;
	mask-image: -webkit-linear-gradient( -45deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 60%);
	transition: -webkit-mask-position;
	animation-timing-function: linear;
	transform: translate3d(0, 0, 0);
	transition-duration: 3s;
	animation: move 2s ease-out infinite;
  }
  
  @keyframes move {
	from {
	  -webkit-mask-position: 150% 0px;
	  -moz-mask-position: 150% 0px;
	  -o-mask-position: 150% 0px;
	  mask-position: 150% 0px;
	}
	to {
	  -webkit-mask-position: 0% 0px;
	  -moz-mask-position: 0% 0px;
	  -o-mask-position: 0% 0px;
	  mask-position: 0% 0px;
	}
  }



.keepout { background:url("../../images/rb.png") rgb(0,0,0,0.7) no-repeat top center; position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 20;}
@media screen and (max-width:767px){ 
.keepout { background:url("../../images/rb.png") rgb(0,0,0,0.7) no-repeat 80% 20%; position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 20; background-size: 350%;}
}


.popoutBg { position: absolute; top: 4.5%; left: 50%; transform: translate(-50%);  z-index: 30; text-align: center;}
.popout { position: relative;}
.popout .p1 { text-align: left;}
.popout .p1 .linkButton {  margin-top: -78px;}
.popout .p1 .linkButton span {display: inline-block; cursor: pointer; }
.popout .p2 { margin-top: 2%; background: url("../../images/popBg.png") no-repeat top center;}
.popout .p2 .activeArea { position: absolute; width: 100%; top: 155px; padding-right: 10px;}
.popout .p2 .activeArea #answerInput { font-size: 36px; line-height: 60px; width: 340px; margin-right: 20px; border: 2px solid #9b9b9b; text-indent: 10px; position: relative; top: -22px;}
.popout .p2 .activeArea #errorText { color: #ffda78; font-size: 20px; line-height: 30px; text-align: left;width: 40%; margin-left: 120px; font-weight: normal; margin-top: -16px;}
.popout .p2 .activeArea span { cursor: pointer; display: inline-block;}
.popout .p2 .linkButton { font-size: 20px; font-weight: bold; padding:2px 0px; letter-spacing: 1px; position: relative; bottom: 87px; width: 110px; display: inline-block; color: #fff; }
.popout .p2 .linkButton01 {left: -23%; transform: translateX(-50%); cursor: pointer;}
.popout .p2 .linkButton02 {left: 39%; transform: translateX(-50%);}
@media screen and (max-width:767px){ 
	.popoutBg { width: 100%; top: 2%;}
	.popout .p1 .linkButton { width: 100%; margin-top: -9vh;}
	.popout .p1 .linkButton span { width:50%;}
	.popout .p1 .linkButton span img { width: 100%;}
	.popout .p2 {background: url("../../images/popBgM.png") no-repeat top center; background-size: 100%;}
	.popout .p2 .activeArea { padding-right: 0px; margin-top: 0em; top:36%; padding:  0 20%;}
	.popout .p2 .activeArea #answerInput { font-size:3.5vh; line-height: 1.5em; width: 100%; margin-right: 0px; text-indent: 10px; margin-top: 5px; display: block; top: 0px;}
	.popout .p2 .activeArea #errorText { text-align: center;  margin-left: 0px; font-size: 2vh; line-height: 2.4vh; letter-spacing: 2px; width: 100%; margin-top:-11vh;}
	.popout .p2 .activeArea span { display: inline-block; width: 18vh; margin-top: 3.5vh;}
	.popout .p2 .linkButton {font-size: 2.3vh;  bottom: 6vh; width: 14vh; padding: 1px 0;}
	.popout .p2 .linkButton01 {left: 5vh;}
	.popout .p2 .linkButton02 {left: 9vh; }
}



#mainTitle { background:  url(../../images/index_02.png) no-repeat top center;}

@media screen and (max-width:767px){ 
.mainTitle { background:  url(../../images/index_m_01.jpg) no-repeat top center; background-size: cover;}
#mainTitle { background:  url(../../images/index_m_01.png) no-repeat top center; background-size: cover;}

}

.coupon { background:  url(../../images/couponbg.png) no-repeat top center; position: relative;}
.coupon .coupons { position: relative; }
.coupon .coupons .couponss { position: absolute; background:  url(../../images/index___05.png) no-repeat top center;}
.coupon #ruleButton {position: absolute; right: 70px; bottom: 70px;}
@media screen and (max-width:767px){ 
.coupon { background:none;}
	.coupon .coupons .couponss {background:  url(../../images/index2_m_03.png) no-repeat top center;  background-size: cover;}

}
.ruleBg { background-color:#392711;  text-align: center;}
.ruleBg #lookButton { margin-top: -120px;}
@media screen and (max-width:767px){ 
#footer { margin-top: 0;}
}

.noShow { display: none;}