/*聯名卡申請表*/
@charset "utf-8";
/*--eventpage__start
#qq {
	
}
#qq.blockF .checkboxtd {float: left; font-size: 18px}
#qq.blockF input {font-family: "微軟正黑體", Arial, Helvetica, sans-serif; letter-spacing: 1px}
#qq.blockF input[type="checkbox"] {width: 20px; height: 20px;}
#qq.blockF table {background-color: unset; width: 80%; margin: 0 auto;}
#qq.blockF .event td {padding: 5px; font-size: 15px; vertical-align: middle; }
#qq.blockF .customerStatus td {padding: 5px; font-size: 15px; vertical-align: middle; border: 1px solid black}
#qq.blockF .loginArea td {padding: 5px; font-size: 15px; vertical-align: middle; border: 1px solid black}
#qq.blockF table td input[type="text"], #qq.block table td input[type="email"] {width: 90%; border:none; background: unset; 
	background: #eee; padding: 5px 10px; font-size: 15px; color: #333}
#qq.blockF table td input::placeholder {color: #aaa}
#qq.blockF table td select {background-color: #eee; border: thin solid white; border-radius: 0; display: inline-block; font: inherit;
  line-height: 1.5em; padding: 0.5em 3.5em 0.5em 1em; margin: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box;
  box-sizing: border-box; -webkit-appearance: none; -moz-appearance: none; float: left; margin: 0 10px 0 3px; margin-left: }
#qq.blockF table td select.classic {background-image: linear-gradient(45deg, transparent 50%, #333 50%),
 linear-gradient(135deg, #333 50%, transparent 50%), linear-gradient(to right, white, white); background-position: calc(100% - 20px) 
 calc(1em + 2px), calc(100% - 15px) calc(1em + 2px), 100% 0; background-size: 5px 5px, 5px 5px, 2.5em 2.5em; background-repeat: no-repeat;}
#qq.blockF table td select.classic:focus {background-image: linear-gradient(45deg, white 50%, transparent 50%), 
	linear-gradient(135deg, transparent 50%, white 50%), linear-gradient(to right, gray, gray); background-position:
    calc(100% - 15px) 1em, calc(100% - 20px) 1em, 100% 0; background-size: 5px 5px, 5px 5px, 2.5em 2.5em; background-repeat: no-repeat;
  border-color: grey; outline: 0;}
#qq.blockF #birthDisplay {padding: 10px 0}

.event td {
	border-bottom:1px solid black;
}

.event table td {
	border:0px #eee solid;	
	padding:3% 3%;
	text-align:right;
}--*/

/*--=====================對話框__start=====================--*/	
/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
	z-index:999;
}

/* Modal Content */
.modal-content {
    position: relative;
    background-color: #fefefe;
    margin: auto;
    padding: 0;
    border: 1px solid #888;
    width: 80%;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    -webkit-animation-name: animatetop;
    -webkit-animation-duration: 0.4s;
    animation-name: animatetop;
    animation-duration: 0.4s
}

/* Add Animation */
@-webkit-keyframes animatetop {
    from {top:-300px; opacity:0} 
    to {top:0; opacity:1}
}

@keyframes animatetop {
    from {top:-300px; opacity:0}
    to {top:0; opacity:1}
}

/* The Close Button */
.close {
    color: #afafaf;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

.modal-header {
    padding: 2px 16px;
    background-color: #fff;
    color: #afafaf;
}

.modal-body {padding: 2px 16px;}

.modal-footer {
    padding: 2px 16px;
    background-color: #fff;
    color: #afafaf;
	text-align: center;
}

#myBtn {
	display: none;
}

.buttonYes {
	width:30%;height:30px;border:0px;background-color:#825938;color:#fff;
}
.buttonNo {
	width:37%;height:30px;border:0px;background-color:#825938;color:#fff;
}
/*--=====================對話框__end=====================--*/	

#qq .hrLogin {
	margin:2%;
}

div .blockG {
	height: 160%;z-index:999;

}

.st1 {
	padding: 20px;
}

#qq .containG .st1 hr {
	margin: 1%;

}

#qq .containG .st1 .birthDayHr {
	/*margin:6%;*/

}

.blockG .containG {
	text-align:center;
	z-index:997;
}


/*.boxG {
	width:70%;
	height:100%;
	float:left;
	background-color:#fff;
	color:#333;
	margin-bottom:0px;
	display:table-cell;
	vertical-align:middle;
}*/
.containG{
	width:990px;
	margin:0 auto;
	position:relative;
	top:50%;
    /*transform:translateY(-50%);*/
    padding-top: 80px;
}

.containG h2{
	padding:8px;
}


.titleDiv {
	padding: 10px;
}
.titleDiv label {
	font-family: "微軟正黑體", Arial, Helvetica, sans-serif;
	font-size:18px;
	color: #666;
	padding: 10px;
}


.section , .sectionBirthday {
	margin:2%;
}	

	
.section label ,.sectionBirthday label {
	font-family: "微軟正黑體", Arial, Helvetica, sans-serif;
	margin-left:12%;
	float: left;
	padding:8px;
	font-size:15px;
	color: #666;
}
	
.st1 div input[type="text"], .st1 div input[type="email"] {width: 70%; border:1px solid #adadad; background: unset; 
	background: #fff; padding: 5px 10px; font-size: 15px; color: #333;}
.st1 div input::placeholder {color: #aaa}	
	
.inputBox {
	margin-left:10%;
	width:70%;
}	
	
.st1 .sectionBirthday .selectBox .selectBoxComplex select {background-color: #e0e0e0; border: 1px solid #afafaf; border-radius: 0; display: inline-block; font: inherit;
  float: left; margin: 0 2px 0 3px; margin-left: 4.5%;height:30px;width:13%;}	
	
.selectBox {
	height: 31px;
}	
/*--eventpage__end--*/



/*--會員資料區塊__titleMem_start--*/
.st {
	margin: 1%;
}
.st .section .titleMem {
	font-size: 24px;
	font-family: "微軟正黑體", Arial, Helvetica, sans-serif;
/*	margin-left:12%;
	float: left;*/
	padding:8px;
	color: #666;
	font-weight: bold;
}
.st .section .titleMem2 {
	font-size: 16px;
	font-family: "微軟正黑體", Arial, Helvetica, sans-serif;
/*	text-align: left;
	margin-left: 28%;*/
	color: #666;
	padding-top:1%;
}

/*--會員資料區塊__titleMem_end--*/


/*--會員登入狀況區塊__start--*/

.customerStatus {
	width: 100%;
	display: none;
	color: #333;
	border: 0px solid #aaa;
	padding:10px;
}

.customerStatus .customerAccTd {
	width: 100%;
}

.customerStatus .customerAccTd label {
	font-size: 24px;
	font-family: "微軟正黑體", Arial, Helvetica, sans-serif;
	/*margin-left: 13.5%;*/
	/*text-align: left;*/
	padding:8px;
	color: #666;
	width: 100%;
	font-weight: bold;
}
/*.customerDataTd .titleMem2 {
	font-size: 16px;
	font-family: "微軟正黑體", Arial, Helvetica, sans-serif;
	text-align: left;
	float: left;
	margin-left: 14.5%;
	padding-top: 10px;
	color: #666;
}*/
.customerDataTd label {
	font-family: "微軟正黑體", Arial, Helvetica, sans-serif;
	margin-left:13.5%;
	float: left;
	padding:13px;
	font-size:15px;
	color: #666;
}

/*
.customerAccTd {
	display: none;
}.customerDataTd {
	display: none;
}
.clearCustomerData {
	display: none;
}*/
.customerDataTd div input[type="text"] {width: 30%; border:0px solid #adadad; background: unset; 
	background: #fff; padding: 5px 10px; font-size: 15px; color: #333;margin:6px;margin-left:-45%;}
.customerDataTd div input::placeholder {color: #aaa}	

.clearCustomerData {
	width: 100%;
}

.clearCustomerData label {
	font-family: "微軟正黑體", Arial, Helvetica, sans-serif;
	float:left;
	text-align:left;
	padding:6px;
	font-size:15px;
	color: #666;
	margin-left:-9%;
}
.clearCustomerDataButton button {
	float: left;
}

/*--會員登入狀況區塊__end--*/


/*--登入區塊__start--*/
.loginArea {
	width: 100%;
	display: block;/*block none*/
	color: #333;
	border: 0px solid #aaa;
	padding:10px;
}
/*.loginArea td {
	text-align: center;
}*/

.loginArea div input[type="text"], .loginArea div input[type="password"] {width: 40%; border:1px solid #adadad; background: unset; 
	background: #fff; padding: 5px 10px; font-size: 15px; color: #333;margin:6px;}
.loginArea div input::placeholder {color: #aaa}	
	
#messageArea {
	display: none;
}

#confirmButton {
	height:30px;border:0px;background-color:#825938;color:#fff;
}
#nextButtonUp {
	height:30px;border:0px;background-color:#825938;color:#fff;
}


.loginButtonIn {
	width:10%;
	display: inline-block;
	
	padding:10px;
	
}
#confirmButton {
	width:100%;
}
.nextButtonUpClass {
	width: 20%;
	display: inline-block;
	
	padding:10px;
}
#nextButtonUp {
	width: 100%;
}
/*.loginArea .section .titleMem {
	font-size: 24px;
	font-family: "微軟正黑體", Arial, Helvetica, sans-serif;
	margin-left:12%;
	float: left;
	padding:8px;
	color: #666;
}
.loginArea .section .titleMem2 {
	font-size: 16px;
	font-family: "微軟正黑體", Arial, Helvetica, sans-serif;
	text-align: left;
	margin-left: 28%;
	color: #666;
	padding-top:1.4%;
}*/
.loginArea .section .titleMem {
	font-size: 24px;
	font-family: "微軟正黑體", Arial, Helvetica, sans-serif;
	font-weight: bold;
	text-align:center;
	padding:8px;
	color: #666;
}
.loginArea .section .titleMem2 {
	font-size: 16px;
	font-family: "微軟正黑體", Arial, Helvetica, sans-serif;
	text-align:center;
	color: #666;
	padding-top:1.4%;
}
/*--登入區塊__end--*/



/*--checkbox區塊__start--*/
.checkboxtd {
	display: table;
	width: 70%;
}
.checkboxtd label {
	font-family: "微軟正黑體", Arial, Helvetica, sans-serif;
	margin-left:19%;
	float: left;
	padding:8px;
	font-size:15px;
	color: #666;
}

.checkboxtd input[type="checkbox"] {width: 20px; height: 20px;}
/*--checkbox區塊__end--*/


/*--立即申辦按鈕--*/	
/*.btNowEvent {
	display:block;
	width:160px;
	height:50px;
	background-color:#eee;
	color:#000;
	font-weight:bold;
	border-radius:20%;
	text-align:center;
	padding-top:2px;
	position:relative;
	top:-5%;
	right:0%;
	left:73%;
	bottom:60px;
	font-size:16px;
	font-weight:bold;
	}
.btNowEvent b {
	display:block;
}	*/
.nextButtonDown {
	margin-top:0%;
	padding-bottom:5%;
}
#nextButton {
	width:20%;height:40px;border:0px;background-color:#825938;color:#fff;font-size:23px;
}
	


	



@media (max-width: 1199px)/* 當視窗寬度小於1199px時執行 */
{
	.containG{
		padding-top: 40px;
		width:100%;
		margin:0 auto;
		position:relative;
		top:50%;
		/*transform:translateY(-50%);*/
	}
	
	.clearCustomerData label { margin-left:-8.5%; }

}

@media (max-width: 1024px)/* 當視窗寬度小於1024px時執行 */
{
	.st1 .sectionBirthday .selectBox .selectBoxComplex select {margin-left: 4%;}
	.clearCustomerData label {margin-left:-9.5%;}
}

@media (max-width: 990px)/* 當視窗寬度小於990px時執行 */
{
	
}

@media (max-width: 989px)/* 當視窗寬度小於989px時執行 */
{
	.loginButtonIn {
		width:40%;

		margin:0px auto;
	}
	.loginButtonIn {
		width:10%;
	}
	#confirmButton ,#nextButtonUp {
		width:100%;
	}
	.nextButtonUpClass {
		width: 20%;
	}
	
	.customerDataTd div input[type="text"] {margin-left:-40%;}
	
	.st1 .sectionBirthday .selectBox .selectBoxComplex select {margin-left: 3%;}
}


@media (max-width: 850px)/* 當視窗寬度小於768px時執行 */
{
	/*.loginArea .section .titleMem {
		margin-left: 11%;
	}*/
	.clearCustomerData label {margin-left:-11%;}
	.st {margin: 1%;}
	
	#qq .hrLogin {
		margin:3%;
	}
	
	.containG{
		padding-top: 30px;
	}
}

@media (max-width: 768px)/* 當視窗寬度小於768px時執行 */
{
	.loginButtonIn {
		width:20%;
	}
	#confirmButton ,#nextButtonUp {
		width:100%;
	}
	.nextButtonUpClass {
		width: 30%;
	}
	
	/*.loginArea .section .titleMem {
		margin-left: 11%;
	}*/
	.clearCustomerData label { margin-left:-12%; }
	
	.containG{
		padding-top: 20px;
	}
}

@media (max-width: 767px)/* 當視窗寬度小於767px時執行 */
{
	.st1 .sectionBirthday .selectBox .selectBoxComplex select {margin-left: 2%;}
}

@media (max-width: 717px)/* 當視窗寬度小於717px時執行 */
{
	.clearCustomerData label { margin-left:-13%; }

}

@media (max-width: 700px)/* 當視窗寬度小於700px時執行 */
{
	.customerDataTd div input[type="text"] {margin-left:-35%;}
	
	.st1 .sectionBirthday .selectBox .selectBoxComplex select {margin-left: 1%;}
}

@media (max-width: 650px)/* 當視窗寬度小於650px時執行 */
{
	/*.sectionBirthday label {
		float: left;
		text-align: left;
		width: 100%;
		height: 30%;
		margin-left: 12%;

	}*/
	.sectionBirthday label {
		float: left;
		text-align: left;
		width: 70%;
		height: 30%;
		margin-left: 12%;

	}
	
	.st1 .sectionBirthday {
		height: 130px;
	}
	.selectBox {

	}
	.st1 .sectionBirthday .selectBox .selectBoxComplex select {padding:3px; height:15%;margin-left:14%;width:55%;}
	.inputBox {
		margin-left:16%;

	}
	.clearCustomerData label { margin-left:-15%; }
}

@media (max-width: 600px)/* 當視窗寬度小於650px時執行 */
{
	#qq .hrLogin {
		margin:6%;
	}
	.nextButtonDown {
		margin-top:0%;
		padding-bottom:5%;
	}
	#nextButton {
		width:70%;height:40px;
	}
	.inputBox {
		margin-left:16%;

	}
	.checkboxtd {
		width: 80%;
	}
	.checkboxtd label {
		margin-left:16%;
	}
	.clearCustomerData label { margin-left:-17%; }
}

@media (max-width: 530px)/* 當視窗寬度小於530px時執行 */
{
	.section , .sectionBirthday {
		margin:1%;
	}	
	
	.loginButtonIn {
		width:70%;
		
		
		padding:10px;
	
	}
	#confirmButton {
		width:68%;
	}
	.nextButtonUpClass {
		width: 70%;
		
		
		padding:10px;
	}
	#nextButtonUp {
		width: 68%;
	}
	
	.customerDataTd div input[type="text"] {margin-left:-30%;}
	
	/*.loginArea .section .titleMem {
		margin-left: 10%;
	}*/
	.clearCustomerData label { margin-left:-19%; }
	
}

@media (max-width: 516px)/* 當視窗寬度小於450px時執行 */
{
	/*.loginArea .section .titleMem {
		margin-left: -34%;
	}*/
	.st {margin: 1%;}
}

@media (max-width: 450px)/* 當視窗寬度小於450px時執行 */
{
	/*.loginArea .section .titleMem {
		margin-left: -40%;
	}*/
	#qq .hrLogin {
		margin:6%;
	}
	.inputBox {
		margin-left:6%;
	}
	.checkboxtd {
		width: 90%;
	}
	.checkboxtd label {
		margin-left:13%;
	}
	.clearCustomerData label { margin-left:-21%; }
}

@media (max-width: 426px)/* 當視窗寬度小於426px時執行 */
{
	.nextButtonDown {
		margin-top:-10%;
	}
	.nextButtonDown {
		margin-top:0%;
		padding-bottom:5%;
	}
	#nextButton {
		width:70%;height:40px;
	}
	#qq .hrLogin {
		margin:6%;
	}
	.clearCustomerData label { margin-left:-22%; }
}

@media (max-width: 414px)/* 當視窗寬度小於414px時執行 */
{
	.customerDataTd div input[type="text"] {margin-left:-26%;}
	/*.loginArea .section .titleMem {
		margin-left: -46%;
	}*/
	.st {
		margin: 1%;
	}
	.nextButtonDown {
		margin-top:0%;
		padding-bottom:10%;
	}
	.checkboxtd label {
		margin-left:12%;
	}
	.clearCustomerData label { margin-left:-23%; }

}

@media (max-width: 376px)/* 當視窗寬度小於375px時執行 */
{
	/*.loginArea .section .titleMem {
		margin-left: -48%;
	}*/
	#qq .hrLogin {
		margin:6%;
	}
	.nextButtonDown {
		margin-top:0%;
		padding-bottom:10%;
	}
	.checkboxtd label {
		margin-left:9.6%;
	}
	.clearCustomerData label { margin-left:-25%; }
}

@media (max-width: 360px)/* 當視窗寬度小於360px時執行 */
{
	.customerDataTd div input[type="text"] {margin-left:-22%;}
	#qq .hrLogin {
		margin:8%;
	}
	.clearCustomerData label { margin-left:-26%; }
}
@media (max-width: 340px)/* 當視窗寬度小於340px時執行 */
{
	.clearCustomerData label { margin-left:-27%; }
}
@media (max-width: 320px)/* 當視窗寬度小於320px時執行 */
{
	/*.loginArea .section .titleMem {
		margin-left: 6%;
	}*/
	.clearCustomerData label { margin-left:-30%; }
}




header, nav, section, article, footer {
         display: block;
}
header, nav, section, article, footer {
         color: white;
}
header, footer {
         text-align: center;
         width: 100%;
}
header {
         background-color: red;
         font-size: 36px;
         font-weight: bold;
}
nav {
         position: fixed;
         top: 40px;
         right: 25px;
         background-color: blue;
         width: 100px;
}
section {
         width: 86%;
         background-color: gray;
         padding: 20px;
         margin: 20px;
}
footer {
         #background-color: green;
         font-size: 10px;
}