@charset "utf-8";
/* CSS Document */
@import url("reset.css");
html, body{margin: 0;height: 100%;}
body{height: 100%;width: 100%;margin: 0;padding: 0;font-size: 100%;line-height: 1.5;font-family: "微軟正黑體", 'Century Gothic';color: #424242;position: relative;background: #ff8787;}
a:focus{outline: 0;}
a{text-decoration: none;color: #333;}
a:hover{text-decoration: none;color: #000;}
img{border: 0 none;line-height: 0;display: block;}
form{margin: 0;padding: 0;}
ul, ul li{margin: 0;padding: 0;list-style-type: none;}
dl, dt, dd{margin: 0;padding: 0;}
dl{height: 1%;}
button{border: 0 none;cursor: pointer;padding: 0;margin: 0;background: transparent;}
.clearfix:before, .clearfix:after {content: "";display: table;height: 0;overflow: hidden;}
.clearfix:after {clear: both;}
.clearfix {zoom: 1;}
h1, h2, h3, h4, p {margin: 0;padding: 0;}
map *:focus{outline:none;}
/*-------------------------------------Globe------------------------------------------------*/
.bg, .bg:before {background: url('../images/MainBg.jpg') 50% 0 no-repeat;filter: brightness(100%) contrast(120%) grayscale(15%);}
.bg, .bg:before, .bg:after {position: absolute;width: 100%;height: 100%;top: 0;left: 0;display: block;}
:before, :after {content: '';}
.bg {animation: goBlur 6000ms both infinite alternate;}
.bg:before {animation: goShake 6000ms both infinite alternate;}
.bg:after {animation: goLightning 3600ms both infinite alternate;opacity: 0;z-index: 1;}
.logo a{display: block;width:114px;height: 40px;}
.TopBar{ background-color: #fff; }
.h1{background: url('../images/h1.png') no-repeat; width: 754px; height: 215px; position: absolute; left: 50%; margin: 60px 0 0 -350px; text-indent: -9999px;}
.Wrapper {width: 1200px;margin: auto;position: relative;}
.Web {display: block;}
.Mobile {display: none;}
.Main{height: 1200px;background: url('../images/index.jpg') center top no-repeat;/*	background: url('../images/ghost.jpg') center top no-repeat;*/position: relative;}

.Main .DOING{width:170px;height:280px;position: relative;background-image: url('../images/smoke.png');background-position: 0 0;position: absolute;top: 0px;left: 920px;z-index: 88;-webkit-animation: PLAY 1.2s steps(3) infinite;animation: PLAY 1.2s steps(3) infinite;}


/*小網版畫面-關*/
.MASTHEAD_MOBILE {display: none;}
/*大網跟屁蟲*/
.addmenu01 
{
	position:fixed;
	width:247px;
	height:650px;
	right:0px;
	margin-left:490px;/*控制在版面上的位置*/
	top:150px;
	z-index: 999;
*position: absolute !important;
*top: expression(((document.documentElement.scrollTop || document.body.scrollTop) + (!this.offsetHeight && 0)) + "px");
*left:52%;
*margin-left:480px;
*z-index: 999;
}
/*小網跟屁蟲-關*/
.TOP_SKY{display: none;}

/*大網連結們*/
.Wrapper .web1 a{
	display: block;
	width: 509px;
	height: 356px;
	position: absolute;
	top: 13px;
	left: 4px;
}
.Wrapper .web2 a{
	display: block;
	width: 666px;
	height: 356px;
	position: absolute;
	top: 13px;
	left: 519px;
}
.Wrapper .web3 a{
	display: block;
	width: 508px;
	height: 309px;
	position: absolute;
	top: 374px;
	left: 6px;
}
.Wrapper .web4 a{
	display: block;
	width: 662px;
	height: 312px;
	position: absolute;
	top: 373px;
	left: 520px;
}

.Wrapper .A1 a{
	display: block;
	width: 240px;
	height: 117px;
	position: absolute;
	top: 693px;
	left: 107px;
	}
.Wrapper .A2 a{
	display: block;
	width: 240px;
	height: 117px;
	position: absolute;
	top: 694px;
	left: 351px;
	}
.Wrapper .A3 a{
	display: block;
	width: 240px;
	height: 117px;
	position: absolute;
	top: 693px;
	left: 595px;
	}
.Wrapper .A4 a{
	display: block;
	width: 240px;
	height: 117px;
	position: absolute;
	top: 694px;
	left: 839px;
	}
.Wrapper .COUPON a{
	display: block;
	width: 443px;
	height: 115px;
	position: absolute;
	top: 468px;
	left: 379px;
	z-index: 999;
	}

.Wrapper .B1 a{
	display: block;
	width: 240px;
	height: 117px;
	position: absolute;
	top: 815px;
	left: 107px;
	}
.Wrapper .B2 a{
	display: block;
	width: 240px;
	height: 117px;
	position: absolute;
	top: 815px;
	left: 351px;
	}
.Wrapper .B3 a{
	display: block;
	width: 240px;
	height: 117px;
	position: absolute;
	top: 815px;
	left: 595px;
	}
.Wrapper .B4 a{
	display: block;
	width: 240px;
	height: 117px;
	position: absolute;
	top: 815px;
	left: 839px;
	}
.Wrapper .C1 a{
	display: block;
	width: 492px;
	height: 237px;
	position: absolute;
	top: 953px;
	left: 105px;
	}
.Wrapper .C2 a{
	display: block;
	width: 492px;
	height: 237px;
	position: absolute;
	top: 954px;
	left: 601px;
	}
.Wrapper .COUPON a{
	display: block;
	width: 467px;
	height: 249px;
	position: absolute;
	top: 354px;
	left: 385px;
	z-index: 999;
	}

/* 公版 */
.MiddleBlock {width: 100%;height: auto;background-color:#ff8787;overflow: hidden;}
.WRAPPER{ width:100%; height:auto;}
.PACKAGE{ width:100%; height:auto;overflow:hidden;}

.Information{font-size: 2rem; padding-top: 6%; color: #fff;}


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


	/* 公版 */
	.MASTHEAD_MOBILE {display: block;position: relative;width: 100%}
	.MASTHEAD_MOBILE img {width: 100%; height: auto;}
	.MASTHEAD {display: none;}
	.Wrapper {width: 100%;overflow: hidden;}
	.MASTHEAD .Wrapper{width: 100%;}
	.Theme{width: 100%;background-size: 80%;background-repeat: no-repeat;height: 110px;margin: auto;right: inherit;background-position: center;}
.Main{display:none;}
	.Web {display: none;}
	.Mobile {display: block;}
	
	
	
	.MiddleBlock{padding: 0 0 11%;}
	.channel {display:none;}
	.Web{display: none;}
	.Mobile{display: block;}
	.h1{background: url('../images/h3.png') no-repeat;margin: 0;width: 100%;background-size: cover;background-repeat: no-repeat;height:0;padding-bottom: 27.877%; top: 20%; z-index: 1;left:0;margin-left: 1%;}
	.TimerBlock{left: 5px;}
	.Time{text-align:center;padding: 40% 0 0 0;}
	.LightboxWrap{position:fixed;left: 0%; top:0%;right: 0;bottom: 0;background:url('../images/lightbox.jpg') no-repeat ;background-size: 220%;background-position: center top;width:90%; height:0%;margin: auto; z-index: 101;padding-bottom: 80%;white-space: nowrap;}
		.Time2{text-align:center;padding: 20% 0 0 0;}

	.Information{font-size:2rem;}
	
/*小網浮動選單*/	
.addmenu01 {display: none;}
.TOP_SKY{display: block; width:100%; height:85px; position: fixed;bottom: 0; left:0;background-color: rgba(118,0,65,0.7); z-index:88;padding-top: 8px;}
.TOP_SKY ul{ width:100%; height:82px; margin:0 auto;}
.TOP_SKY ul li a{width:33%;height:35px;text-align:center; color:#FFF; font: bold 1em/1.5em "微軟正黑體";float:left; border-right:1px solid #FFF;white-space:nowrap;margin-bottom: 3%;display:-webkit-flex;display:flex;-webkit-align-items: center;align-items: center;-webkit-justify-content: center;justify-content: center;overflow: hidden;}
.TOP_SKY ul li:last-child a, .TOP_SKY ul li:nth-child(3) a{border-right:none;}
.TOP_SKY ul li a.active{background-color: #422095;}

/*小網連結們*/	
	.clearfix .web1 a{display: block;width:50%;height:26.8%;position:absolute;top:0;left:0;}
	.clearfix .web2 a{display: block;width:50%;height:26.8%;position:absolute;top:0;left:50%;}
	.clearfix .web3 a{display: block;width:50%;height:26.8%;position:absolute;top:26.8%;left:0;}
	.clearfix .web4 a{display: block;width:50%;height:26.8%;position:absolute;top:26.8%;left:50%;}
	.clearfix .A1 a{display: block;width:50%;height:8%;position:absolute;top:53.6%;left:0;}
	.clearfix .A2 a{display: block;width:50%;height:8%;position:absolute;top:53.6%;left:50%;}
	.clearfix .A3 a{display: block;width:50%;height:8%;position:absolute;top:61.6%;left:0;}
	.clearfix .A4 a{display: block;width:50%;height:8%;position:absolute;top:61.6%;left:50%;}
	.clearfix .B1 a{display: block;width:50%;height:8%;position:absolute;top:69.6%;left:0;}
	.clearfix .B2 a{display: block;width:50%;height:8%;position:absolute;top:69.6%;left:50%;}
	.clearfix .B3 a{display: block;width:50%;height:8%;position:absolute;top:77.6%;left:0;}
	.clearfix .B4 a{display: block;width:50%;height:8%;position:absolute;top:77.6%;left:50%;}
	.clearfix .C1 a{display: block;width:50%;height:14%;position:absolute;top:85.6%;left:0;}
	.clearfix .C2 a{display: block;width:50%;height:14%;position:absolute;top:85.6%;left:50%;}
	.clearfix .COUPON a{display: block;width:67%;height:7.2%;position:absolute;top:31%;left:16.4%;z-index: 999;}
}