@charset "utf-8";
/* CSS Document */
/* ---reset.css--- */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}

/* ---reset.css--- */
html, body{	
	font-family:'Noto Serif TC', "微軟正黑體","Microsoft JhengHei",Helvetica,Verdana, Arial, sans-serif;
	-webkit-text-size-adjust:none;
}

html{
	
}
body{ /*background:url("../images/bg.jpg") top center repeat;*/
	background: #ab2c3d;
	
}

* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
	      line-height:1;
}

:focus { outline: 0; }

li{ list-style:none;} 
a { text-decoration:none;}



/* 滑鼠動態效果 */
.container button { 
	-webkit-transition-duration:.3s;
	        transition-duration:.3s;
	-webkit-transition-property:transform;
	        transition-property:transform;
	-webkit-transition-timing-function:ease-out;
	        transition-timing-function:ease-out}
.container button:hover{
	-webkit-transform:translateY(5px);
		    transform:translateY(5px);
	box-shadow: 0px 0px 0px #5c1f26;
}



/* PC */
.WRAPPER{ position:relative; width:100%; min-width:1200px; margin:0 auto; overflow:hidden;}
.kv_pc {width: 100%;  position: relative; text-align:center; background:url("../images/kv.jpg") top center no-repeat;}
.kv_pc img { display: block; text-align: center; }
.kv_m { display: none; }
.kv_m img { display: block; }
.kv_m a {font-size: 0; display: block; }
.for_pc{ display: block; }
.for_m { display: none; }

	/* m */
	@media screen and ( max-width: 640px ){
		.WRAPPER{ min-width:100%;}
		.kv_m { display: block; width: 100%; }
		.kv_m img {  width: 100%; }
		.kv_pc { display: none; }
		.container {width: 100%; min-width: auto; }
		.for_pc{ display: none; }
		.for_m { display: block; }
	}

/* PC 主視覺 */
.container { overflow: hidden; }
.topbox { position: relative; width: 1200px; margin: auto;}
.title01{ top: 206px; left: 498px; position: absolute; } /** z-index: 5; */
.title02{ top: 270px; left: 448px; position: absolute; } /** z-index: 5; */
.circle{ top: 10px; left: 218px; position: absolute; animation: rotate1 80s linear infinite;} /** z-index: 5; */
.cube01{ top: 530px; left: 877px; position: absolute; animation:float 4s ease-in-out infinite;} /** z-index: 5; */
.cube02{ top: 44px; left: 736px; position: absolute; animation:float2 3.7s ease-in-out infinite;} /** z-index: 5; */
.cube03{ top: 304px; left: -100px; position: absolute; animation:float2 3s ease-in-out infinite;} /** z-index: 5; */


/* 轉盤 */
.lottery{width: 1200px; margin: auto;position: relative;top: -1100px;}
.roulette{ top: 472px; left: 290px; position: absolute; animation: rotate1 6s linear infinite;} /** z-index: 5; animation: rotate1 4.2s linear infinite; */
.stop_rotate { animation: none; }
.roulette_top{ top: 472px; left: 290px; position: absolute; } /** z-index: 6; */
.lottery_btn{ top: 710px; left: 525px; position: absolute; animation: lottery_btn 0.6s linear infinite;} /**  z-index: 10; */

/* 活動說明 */
.caption{top: 483px; left: 96px; position: absolute;width: 238px; text-align: left;} /** z-index: 5; */
.caption h3{font-size: 28px;color: #fffdec;line-height: 46px;}
.caption p{font-size: 15px;color: #fffdec;line-height: 26px;}
	@media screen and ( max-width: 640px ){
		/* m_轉盤 */
		.lottery{width: 100%;position: relative;margin-top: -45vw;  top:0;}
		.lottery img{width: 100%;}
		.roulette{ top: 0px; left: 0px; position: absolute;} /** z-index: 5; */
		.roulette_top{ top: 0px; left: 0px; position: relative; } /** z-index: 6; */
		.lottery_btn{ top: 0px; left: 0px; position: absolute; padding: 35vw;} /** z-index: 10; */
		
		/* m_活動說明 */
		.caption{top: 0; left: 0; position: relative;width: 90vw; margin: 0 auto 5vw;}
		.caption h3{font-size: 1.2rem;line-height: 2rem;text-align: center;}
		.caption p{font-size: 0.8rem;line-height: 1.2rem;}
	}

	@keyframes rotate1 {
					from {transform: rotate(0deg);}
					to {transform: rotate(360deg);}
				}
	@keyframes lottery_btn {
					0% {transform: scale(1);}
					50% {transform: scale(0.9);}
				}
	@keyframes float  {
		0% { transform: translateY(10px);}
		50% {transform: translateY(-10px);}
		100% {transform: translateY(10px);}
	}
	@keyframes float2  {
		0% { transform: translateY(5px);}
		50% {transform: translateY(-5px);}
		100% {transform: translateY(5px);}
	}

/* 抽獎紀錄查詢 */
.inquire {
	width: 350px;
    height: 72px;
	padding: 10px;
	border-radius: 10px;
    border: 3px solid #c7926c;
    color: #2c451d;
    font-size: 46px;
    font-family: 'Noto Serif TC';
    font-weight: bold;
    background-color: #fffdeb;
	margin: 0 auto 6px auto;
	display: block;
	box-shadow: 0px 5px 0px #5c1f26;

}
.detail{ 
	width: 1200px; 
	min-width: 1200px; 
	margin: auto;
	padding: 12px 12px 30px;
	}
.detail h2{ 
	margin:10px 0;
	font-size:36px;
	line-height: 46px;
	text-align: center;
	color: #fffdec;
	}
.detail table{ 
	font-size:16px;
	text-align:center;
	border-collapse:collapse;
	width: 94%; 
	margin: auto;
	border:1px solid #000; 
	}
.detail table th{ 
	font-size: 26px;
	background: #2c451d; 
	color: #fff; 
	border:1px solid #000; 
	padding: 6px;}
.detail table td{ 
	font-size: 20px;
	line-height: 24px;
	padding: 10px; 
	border:1px solid #000;
	background: #fffdec;
	}
	@media screen and ( max-width: 640px ){
		.inquire {
			width: 80vw;
			height: 20vw;
			padding: 10px;
			font-size: 2rem;

		}
		
		.detail{ 
			width: 96vw;
			min-width: 96vw;
			padding: 2vw 0;
		}
		.detail h2{ 
			margin: 0;
			font-size:1.2rem;
			line-height: 2rem;
		}
		.detail table{ 
			font-size:16px;
			width: 94%; 
		}
		.detail table th{
			font-size: 1rem; 
			line-height: 1.6rem;
		}
		.detail table td{ 
			font-size: 0.8rem;
			line-height: 1rem;
			padding: 2vw;
		}
	}



/* precaution */
.precaution { width: 1000px; margin: 20px auto 60px; padding:0 90px;}
.precaution h3 {font-size:30px; font-weight:bold; color: #fffdec; margin: 0 0 10px;}
.precaution h4 { font-size:22px; font-weight:bold; color: #f0c6a9; margin: 0 0 10px;}
.precaution table{ font-size:16px;text-align:center;border-collapse:collapse;width: 100%; margin: 0 auto 20px;border:1px solid #000; }
.precaution table th{ font-size: 20px;background: #5b1f23; color: #fffdec; border:1px solid #000; padding: 6px; width: 120px;}
.precaution table td{ font-size: 18px;line-height: 30px;padding: 20px; border:1px solid #000;background: #fffdec;color: #3c3939;text-align: left;}
.precaution ol { padding: 0 0 0 20px;}
.precaution ol li { list-style: decimal; float: none;font-size:18px; line-height: 28px; margin: 0; }
.precaution ol li ol li { list-style: square;  }
.precaution .inner { margin: 0; width: 78%; border: none;display: flex;}
.precaution .inner tr { }
.precaution .inner th { background: #e6e6e6;color: #3c3939; }
.precaution .inner td { background: none; padding: 0; border: none; width: auto; }
	@media screen and ( max-width: 640px ){
		.precaution { width: 100%; margin: 2vw 0; padding:4vw 4vw 0;}
		.precaution h3 {font-size:1.2rem;margin: 0 0 2vw;}
		.precaution h4 {font-size:1rem;margin: 0 0 2vw;}		
		.precaution table{ margin: 0 auto 6vw; }
		.precaution table th{font-size: 1rem; line-height: 1.6rem;width: 2.2rem;padding: 2vw 1vw;}
		.precaution table td{font-size: 0.8rem;line-height: 1.5rem;padding: 3vw;}
		.precaution ol { padding: 0 ;padding: 0vw 0vw 0vw 4vw;}
		.precaution ol li { font-size:0.8rem; line-height: 1.2rem;margin: 2vw 0;}
		.precaution ol li ol li { list-style: square; padding: 0; }
		.precaution .inner {  width: 100%; }
		.precaution .inner td {  }

		
	}
	
	
	

/* AD */
.AD {width: 1200px; min-width: 1200px;}
.AD { margin: 0 auto 0px auto; padding: 20px 90px 20px 90px;}
.AD ul li { margin: 10px 6px; float: left;}
.AD ul li img { width: 494px; }
	@media screen and ( max-width: 640px ){	
		.AD { margin: 0; padding: 2%;width: 100%; min-width: 100%;}
		.AD ul li { float: none; }
		.AD ul li {width: 96%; margin: 2%; }
		.AD ul li img {width: 100%; }
	}


/*--goto top--*/
#gotop {
	display: inline-block;
	background-color: #000;
	opacity:0.3;
	width: 40px;
	height: 40px;
	text-align: center;
	border-radius: 100%;
	position: fixed;
	bottom: 0px;
	right: 0px;
	transition: 
		background-color .3s, 
		opacity .5s, 
		visibility .5s;
	visibility: hidden;
	z-index: 1000;
	margin: 30px;
}
@media screen and ( max-width: 640px ){
	#gotop {
		bottom: 2vw;
		right: 0;
		margin: 2vw;	
		}
}

#gotop::after {
	font-family: FontAwesome;
	content:'　';
	font-weight: normal;
	font-style: normal;
	font-size: 2em;
	line-height: 50px;
	color: #fff;
	opacity:0.5;
	background: url(../images/top.png) center no-repeat; background-size:50%;background-position:50% 20%;
}
#gotop:hover {
	cursor: pointer;
	background-color: #666;
}
#gotop:active {
	background-color: #666;
}
#gotop.show {
	opacity: 0.4;
	visibility: visible;
}

a#roulette-close {
	color: #ab2c3d;
}