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

/* 網頁延伸背景 */

body{
	font-family: "微軟正黑體", Arial, sans-serif;
	font-size: 18px;
}

img {
    max-width: 100%;
    height: auto;
}

.wrapper{
	background-image: url(../images/0916_bonus/bg.jpg);
	background-repeat: no-repeat;
	background-position: center 0px;
	background-color: #990002;
	background-size: initial;
	}

.header{
	width:100%;
	}

.header .top {
	height: 0;
	padding-bottom: 36%;
	position: relative;
	text-align:center;
}

.logo-buy{
	background-image: url(../images/0916_bonus/title.png);
	width: 75%;
	height: 93%;
	position: absolute;
	top:29%;
	left:13%;
	background-repeat: no-repeat;
	background-size: contain;
}

/* 圖片置中 */
.img-responsive {
	margin:0px auto;
}

/* 大表格寬度+延伸背景 */

.form {
	width: 100%;
	padding:0px;	
}

.time {
	display:block;
	background:#dd141d;
	width:100%;
	color:#ffffff;
	padding:5px;
	text-align:center;
	font-size:16px;
	font-weight:bolder;
}

.line {
	background-image:url(../images/0916_bonus/line.png);
	background-position:center;
	height:10px;}


/* 活動選單按鈕 
說明: a:hover=滑鼠移過 action=目前頁*/

.menu{
	width: 100%;
	position: relative;
	margin-top:15px;

}
.menu ul.eventbtn {
	width: 100%;
	position: relative;
	display: flex;
	flex-wrap: wrap;
	padding: 0;
	margin: 0;
	justify-content:center;
}

.menu ul.eventbtn li{
	display: block;
	list-style:none;
  	width: 30%;
	height: auto; 
	margin:0px 5px 0px 5px;
}

/*.menu ul.eventbtn li a:hover, .menu ul.eventbtn li.action a {
	background-image: url(../images/0904_bonus/menu02.png);
}*/

.menu ul.eventbtn li a:hover, .menu ul.eventbtn li.action a {
	opacity:.5;
}


.menu ul.eventbtn li a {
	height: 0;
	padding-bottom: 38%;
	background-size: 300% 100%;
	display: block;
	margin: 0 auto;
	background-image: url(../images/0916_bonus/menu.png);

}

.menu ul.eventbtn li.eventbtn1 a{
	background-position-x: 0% !important;
}

.menu ul.eventbtn li.eventbtn2 a{
	background-position-x: -100% !important;
}

.menu ul.eventbtn li.eventbtn3 a{
	background-position-x: -200% !important;
}

.menu ul.eventbtn li.eventbtn4 a{
	background-position-x: -300% !important;
}


/* 社群分享 */
.social {
	display: block;
	width: 220px;
	height: auto;
	margin:auto;
	overflow: hidden;
	border-radius: 5px;
	padding-top: 1%;
	text-align:center;
}
.social ul {
	margin: 0px;
	padding: 0px;
	text-align:center;
}
.social li {
	float: left;
	list-style-type: none;
}
.share-fb,
.share-fb a,
.share-line,
.share-line a {
	display: inline-block;
	background-image: url(../../source/icon-social.png);
	width: 30px;
	height: 30px;
}
.share-fb,
.share-fb a {
	background-position: 0px 0px;
	margin-right: 5px;
}
.share-line,
.share-line a {
	background-position: -30px 0px;
	margin-right: 5px;
}

.form-inside{
	margin: auto;
}


/*內容*/
.desc,
.desc-time {
	width:100%;
	background-color:#6f0000;
	color:#ffffff;
	padding:10px 20px;
	font-weight:bolder;
	border:solid 3px #f42129;
	font-size:20px;
}

.desc-time {
	font-size:20px;
}

.img-responsive {
	margin-bottom:10px;
}


/* 第二重步驟 */

.step-top {
	border-top-left-radius:5px;
	border-top-right-radius:5px;
	background-color:#b14eff;
	width:100%;
	font-size:28px;
	text-align:center;
	color:#ffffff;
}

.step-desc {
	border-bottom-left-radius:5px;
	border-bottom-right-radius:5px;
	background:#ffffff;
	width:100%;
	font-size:18px;
	text-align:center;
	color:#000000;
	padding:10px;
	margin-bottom:10px;
}

.btn-pick {
	font-family: "微軟正黑體", Arial, sans-serif;
	box-shadow: 0px 0px 0px 2px #fc6500;
	background:linear-gradient(to bottom, #ffa40e 5%, #ff5801 100%);
	background-color:#ffa40e;
	border-radius:3px;
	border:1px solid #ffbe64;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-size:24px;
	padding:3px 10px;
	text-decoration:none;
	text-shadow:2px 2px 0px #533727;
	margin:8px 4px;
}
.btn-pick:hover {
	background:linear-gradient(to bottom, #ff5801 5%, #ffa40e 100%);
	background-color:#ff5801;
}
.btn-pick:active {
	position:relative;
	top:1px;
}


/* 注意事項 */
.desc ul  {
	font-size: 16px;
	padding: 0px 0px 0px 30px;
	margin: 0px;
	color:#ffffff;
	list-style-type: decimal;
}
.desc li {
	padding-bottom: 7px;
}

.mark-red{
	font-weight: bolder;
}

.mark-blue{
	font-weight: bolder;
}


@media (max-width: 998px){
.wrapper{
	background-size: 160%;
}

}

@media (max-width: 860px){

body{
	font-size: 16px;
}

.wrapper{
	background-size: 215%;
}

.header .top {
	padding-bottom: 36%;
}

.form {
	/*padding:15px 0px;*/
}

}

@media (min-width: 768px) {
	.step-desc {
		height:240px;
	}
	.menu {
		margin-top:0px;
	}
	.menu ul.eventbtn li{
  	width: 50%;
	margin-bottom:10px;
	}
	.time {
	padding:10px;
	font-size:20px;
}

.sub-notice {
	height:70px;
}




}

@media (min-width: 1024px){
.form {
	padding:0px 20px;
}	

.desc-time {
	font-size:24px;
}
	
/* Line分享隱藏 */
.share-line {
	display:none;
}

.step-desc {
	height:220px;
}
}