/*設定視窗邊界為0*/
* {
	border: 0;
	margin: 0;
	padding: 0;
}

/*設定字型及捲軸*/
body {
	font-family: 'Noto Sans TC','Arial';
	overflow-y: scroll;
	overflow-x: hidden;
}

/* bg */
.header{
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
	background-position:50% 35%;
    background-image: url(../images/bg.jpg);
    background-repeat: no-repeat;
	background-size: 100%;
    z-index: -100;
}

/*主標*/
.startitle {
	position: relative;
	width: 50%;
	height: 100vh;
	margin: 0 auto;
}

/*Responsive Images*/
.responsive {
  max-width: 100%;
  height: auto;
}

/*主標圖*/
.titleimg {
	margin-top: 75%;
}

/*次標*/
.sectitle {
	position: relative;
	width: 30%;
	height: 100vh;
	margin: 0 auto;
}

/*次標圖*/
.sectitleimg {
	margin-top: 20%;
}

/*主文*/
.main {
    width: 100%;
    height: auto;
    position: relative;
	background-position:50% 35%;
    /*background-image: url(../images/pic1.jpg);*/
    background-repeat: no-repeat;
	background-size: 100%;
	margin-top: 10rem;
	display:flex;
	justify-content: center;
	align-items: center;
}

/*主文紅框區*/
.mainredarea {
    width: 50%;
    position: relative;
	padding: 2rem 0;
	background: rgb(229,53,140,0.8);
}

/*主文紅框區－字*/
.mainredarea p {
	font-size: 2.5rem;
	font-weight: 500;
	line-height: 180%;
	text-align: center;
	color: #FFF;
}
.mainredarea h3 {
	font-size: 2rem;
	font-weight: 500;
	line-height: 180%;
	text-align: center;
	color: #FFF;
}
.mainredarea h4 {
	font-size: 1.2rem;
	font-weight: 500;
	line-height: 180%;
	text-align: center;
	color: #FFF;
}

/*主文紅框區－圖*/
.mainicon {
	width: 35%;
	margin:2rem auto;
}
/*主文紅框區－贈品*/
.mainprice {
	width: 20%;
	margin:2rem auto 0;
}

/*題目區*/
.mainmem {
    width: 100%;
    height: auto;
    position: relative;
}

.memarea {
    width: 50%;
    position: relative;
	padding: 4rem 0 2rem ;
	background: rgb(229,53,140,0.8);
	margin:0 auto;
}

/*會員表單*/
	.memberform {
		width: 90%;
		height: auto;
		padding: 1rem;
		font-size: 1.5rem;
		font-weight: 700;
		color: #FFF;
		margin:0 auto;
	}

.question {
	width: 70%;
	height: auto;
	margin:0 auto;
	color: #FFF;
}

.qs {
	font-size: 1.5rem;
	font-weight: 700;
}

/*表格*/
.mytable {
	width: 100%;
}

/*表單元*/
input[type=radio] {
    /* your style goes here */
    height: 20px;
    width: 20px;
	margin: 5px;
	vertical-align: middle;
}

.form-control2 {
  padding: 10px;
  margin: 5px;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  vertical-align:top;
  width: 50%;
}

.myButton {
  display: inline-block;
  font-size: 18pt;
  font-weight: 700;
  padding: 0.5em 1em;
  margin-top: 30px;
  margin-bottom: 30px;
  -webkit-appearance: none;
  appearance: none;
  background-color: #009d82;
  color: #FFF;
  border-radius: 10px;
  border: 0px solid #009d82;
  cursor: pointer;
  position: relative;
  transition: transform ease-in 0.1s, box-shadow ease-in 0.25s;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
.myButton:focus {
  outline: 0;
}

/* footer */
.myfooter {
  width: 100%;
  position: relative;
  color:#FFF;
  font-size: 1rem;
  width: 100%;
  text-align:center;
}

.sicon {
	margin: 10px; font-size: 60px; color: #FFF;
}


		/*燈箱*/
		#lightbox {
		  position: fixed;
		  bottom: 0;
		  left: 0;
		  width: 100%;
		  height: 100vh;
		  display: flex;
		  justify-content: center;
		  align-items: center;
		  background-color: rgb(0,0,0,0.6);
		  z-index: -1;
		  opacity: 0;
		}
		#close {
		  position: absolute;
		  right: 10px;
		  top: 10px;
		  color: #FFF;
		  font-size: 2rem;
		  font-weight: 900;
		  z-index: 900;
		}
		#answer_red {
			width: 50%;
			height: 100vh;
			position: relative;
			display:flex;
			justify-content: center;
			align-items: center;
			background-position:50%;
			background-repeat: no-repeat;
			background-size:60%;
		}
		#answer_body {
		width: 50%;
		margin:0 auto;
		  text-align: center;
		  color: #FFF;
		  background-color: rgb(211,30,88,0.5);
		  padding: 50px 20px;
		  border-radius: 20px;
		}
	  #answer_body h2 {
		  color: #FFF;
		  font-size: 2rem;
		  font-weight: 700;
		  margin-bottom: 30px;
	  }
	  #answer_body h3 {
		  color: #FFF;
		  font-size: 1.5rem;
		  font-weight: 400;
	  }

@media screen and  (min-width: 2000px) {
}

@media screen and  (min-width: 1024px) and (max-width: 1367px) {
  .header {
	background-position:50% 35%;
	background-size: cover;
	}
	/*會員表單*/
	.memberform {
		width: 90%;
		height: auto;
		padding: 1rem;
		font-size: 1.5rem;
		font-weight: 700;
		color: #FFF;
		margin:0 auto;
	}
	.question {
		width: 80%;
		height: auto;
		margin:0 auto;
		color: #FFF;
	}
}

@media (min-width: 768px) and  (max-width: 1023px) {

  .header {
	background-position:50% 35%;
	background-size: cover;
	}
}

@media (min-width: 320px) and  (max-width: 767px) {

  .header {
	background-position:50% 35%;
	background-size: cover;
	}
	
	/*主標*/
	.startitle {
		position: relative;
		width: 90%;
		height: 100vh;
		margin: 0 auto;
	}
	/*主標圖*/
	.titleimg {
		margin-top: 70vh;
	}
	/*次標*/
	.sectitle {
		position: relative;
		width: 70%;
		height: 50vh;
		margin: 0 auto;
	}

	/*次標圖*/
	.sectitleimg {
		margin-top: 0;
	}
	
	/*主文*/
	.main {
		width: 100%;
		position: relative;
		background-position:50% 35%;
		/*background-image: url(../images/pic1.jpg);*/
		background-repeat: no-repeat;
		background-size: 100%;
		margin-top: 5rem;
		display:flex;
		justify-content: center;
		align-items: center;
	}

	/*主文紅框區*/
	.mainredarea {
		width: 90%;
		position: relative;
		padding: 30px 10px;
		background: rgb(229,53,140,0.8);
	}
	/*主文紅框區－字*/
	.mainredarea p {
		font-size: 1.5rem;
		font-weight: 500;
		line-height: 180%;
		text-align: center;
		color: #FFF;
	}
	.mainredarea h3 {
		font-size: 1.3rem;
		font-weight: 500;
		line-height: 180%;
		text-align: center;
		color: #FFF;
	}
	.mainredarea h4 {
		font-size: 1rem;
		font-weight: 500;
		line-height: 180%;
		text-align: center;
		color: #FFF;
	}
	/*主文紅框區－贈品*/
	.mainprice {
		width: 40%;
		margin:2rem auto 0;
	}

	/*會員表單*/
	.memberform {
		width: 90%;
		height: auto;
		padding: 1rem;
		font-size: 1.5rem;
		font-weight: 700;
		color: #FFF;
		margin:0 auto;
	}
	.qs {
		font-size: 1.2rem;
		font-weight: 700;
	}

		#answer_red {
			width: 90%;
			height: 100vh;
			position: relative;
			display:flex;
			justify-content: center;
			align-items: center;
			background-position:50%;
			background-repeat: no-repeat;
			background-size:90%;
		}
		#answer_body {
		width: 100%;
		margin:0 auto;
		  text-align: center;
		  color: #FFF;
		  background-color: rgb(211,30,88,0.5);
		  padding: 30px 10px;
		  border-radius: 10px;
		}
	  #answer_body h2 {
		  color: #FFF;
		  font-size: 1.5rem;
		  font-weight: 700;
		  margin-bottom: 30px;
	  }
	  #answer_body h3 {
		  color: #FFF;
		  font-size: 1rem;
		  font-weight: 400;
	  }
	.form-control2 {
	  padding: 10px;
	  margin: 5px;
	  display: inline-block;
	  border: 1px solid #ccc;
	  border-radius: 4px;
	  box-sizing: border-box;
	  vertical-align:top;
	  width: 80%;
	}
	.question {
		width: 90%;
		height: auto;
		margin:0 auto;
		color: #FFF;
	}
}