/**************************************************************************
 * index.css 2016/10/19
 * Copyright (c) 2015, Ga All Rights Reserved.
===========================================================================
 * [前台] 前台用 css
===========================================================================
 * @copyright 2015
 * @author Ga
 * @version 3.2
***************************************************************************/

/**************************************************************************
 一. 基本設定
***************************************************************************/
@charset "UTF-8";

/* reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,select,p,blockquote,th,td{margin:0;padding:0}table{border-spacing:0}fieldset,img{border:0}address,button,caption,cite,code,dfn,em,input,optgroup,option,select,strong,textarea,th,var{font:inherit}del,ins{text-decoration:none}li{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}abbr,acronym{border:0;font-variant:normal}sup,sub{vertical-align:baseline}legend{color:#000}
/* base */
h1{font-size:138.5%}h2{font-size:123.1%}h3{font-size:108%}h1,h2,h3{margin:1em 0}h1,h2,h3,h4,h5,h6,strong,dt{font-weight:bold}optgroup{font-weight:normal}abbr,acronym{border-bottom:1px dotted#000;cursor:help}em{font-style:italic}del{text-decoration:line-through}blockquote,ul,ol,dl{margin:1em}ol,ul,dl{margin-left:2em}ol{list-style:decimal outside}ul{list-style:disc outside}dl dd{margin-left:1em}th,td{padding:.5em}th{font-weight:bold;text-align:center}caption{margin-bottom:.5em;text-align:center}sup{vertical-align:super}sub{vertical-align:sub}p,fieldset,table,pre{margin-bottom:1em}button,input[type="checkbox"],input[type="radio"],input[type="reset"],input[type="submit"]{padding:1px}img{-ms-interpolation-mode:bicubic}
/* fonts */
body{font:12px/24px 'Microsoft JhengHei','PMingLiU',arial,helvetica,clean,sans-serif;*font-size:small;*font:x-small}select,input,textarea,button{font:99%'Microsoft JhengHei',arial,helvetica,clean,sans-serif}table{font-size:inherit;font:100%}pre,code,kbd,samp,tt{font-family:monospace;*font-size:108%;line-height:100%}

body{
	color:#000;
	background-color:#ddd;
}

a:link{
	color:#fff;
	opacity: 0.5;
	text-decoration:none;
	-webkit-transition: 0.3s ease-in-out;
			transition: 0.3s ease-in-out;
}
a:visited{
	color:#fff;
	opacity: 0.5;
	text-decoration:none;
}
a:hover{
	color:#fff;
	opacity: 1;
	text-decoration:none;
}
a:active{
	color:#fff;
	opacity: 1;
	text-decoration:underline;
}

img{
	-webkit-transition: 0.3s ease-in-out;
			transition: 0.3s ease-in-out;
}
input{
	outline: none;
}

/**************************************************************************
 二. 內容設定
***************************************************************************/
/* 區塊設定 */
body{
	background: url(../imgs/bg.jpg);
	background-attachment: fixed !important;
    background-position: center top 0;
    background-size: cover;
}
.cbody{
	margin: 0 auto;
	width: 320px;
}
/* header */
#header{
	background-color:#000;
}
	#header_block{
		margin: 0 auto;
		width: 100%;
		height: 100px;
		max-width: 1200px;
		min-width: 320px;
		color: #fff;
	}
		#menu_btn{
			position: absolute;
			left: 20px;
			top: 20px;
			cursor: pointer;
			width: 45px;
		}
		#header_logo{
			margin: 0 auto;
			padding-top: 15px;
			width: 90px;
		}
		#header_menu{
			width: 100%;
		}
			#header_menu_min{
				display: none;
			}
			#header_menu_main{
				display: none;
				position: relative;
				z-index: 500;
				margin-top: 15px;
			}
				.menu_main{
					background-color: #222;
					font-size: 18px;
					line-height: 44px;
					text-align: center;
				}

/* main */
#main{
}
	#main_block{
		margin: 0 auto;
		width: 100%;
		max-width: 1200px;
		min-width: 320px;
		min-height:390px;
	}
		#item_list{
			padding-top: 20px;
			margin: 0 20px 0;
		}
			.item{
				float: left;
				width: 100%;
				height: 150px;
				margin: 0 0 25px 0;
				overflow: hidden;
				border: 1px solid #000;
				background-color:#ccc;
			}

/* footer */
#footer{
	clear: both;
	background-color:#000;
}
	#footer_block{
		margin: 0 auto;
		width: 100%;
		height: 64px;
		max-width: 1200px;
		min-width: 320px;
		color: #fff;
		font-weight: bold;
		text-align: right;
	}
		#copyright_text{
			padding: 20px;
		}

/* 單元設定 */
.loginBlock{
	width: 85%;
	margin: 0 auto;
	padding-top: 107px;
	text-align: center;
}
	.loginBlock table{
		width: 100%;
	}
	.loginBlock table.login{
		margin: 35px auto 0;
		font-size: 15px;
		border-radius: 5px;
		color: #fff;
		border: 1px rgba(255,255,255,0.1) solid;
		background-color: rgba(255,255,255,0.1);
		text-align: left;
	}
	.loginBlock table td{
		padding: 0;
	}
	.loginBlock input{
		width: 100%;
		border: 0;
		padding: 10px;
		background-color: transparent;
		-webkit-box-sizing: padding-box;
				box-sizing: padding-box;
		color:  rgba(255,255,255,1);
	}
	.loginBlock input{
		width: 83%;
	}
	input#ID{
		border-bottom: 1px rgba(255,255,255,0.1) solid;
		padding-top: 20px;
		padding-left: 2.5em;
		background: url(../imgs/ID.png) no-repeat left 8px top 14px;
	}
	input#password{
		padding-top: 15px;
		padding-left: 2.5em;
		background: url(../imgs/passwoed.png) no-repeat left 8px top 10px;
	}
table.codes{
	margin-top: 20px;
}
	table.codes td{
		text-align: left;
		font-size: 15px;
		color: #fff;
	}
	table.codes td.right{
		text-align: right;
	}
	input#checking{
		font-size: 15px;
		border-radius: 5px;
		color: #fff;
		border: 1px rgba(255,255,255,0.1) solid;
		background-color: rgba(255,255,255,0.1);
		width: 105px;
		-webkit-width: 105px;
		padding-right: 30px;
		background: rgba(255,255,255,0.1) url(../imgs/check.png) no-repeat right 8px top 12px;
	}
    tr.top20 td{
		padding-top: 15px;
	}
	tr.top20 td.right{
		text-align: right;
	}
	    #btn_defult input[type="checkbox"] {
	        display:none;
	    }
	        #btn_defult input[type="checkbox"] + label span {
	            cursor: pointer;
	            position: relative;
	            top: 4px;
	            display:inline-block;
	            width:23px;
	            height:21px;
	            background:url('../imgs/checking.png') no-repeat;
	            background-position: 0 0 ;
	        }
	        #btn_defult input[type="checkbox"]:checked + label span {
	            background-position: 0 -21px ;
	        }
	    #CheckboxGroup2_0{
	        width: 25px;
	        height: 25px;
	        left: 3px;
	        opacity: 0.8;
	        position: absolute;
	        top: 2px;
	    }
	    .codes input#submit,.codes input#getPassword{
	    	background: #67B62E;
			border-radius: 5px;
			font-size: 17px;
			margin-top: 15px;
			cursor: pointer;
			-webkit-transition: 0.3s ease-in-out;
					transition: 0.3s ease-in-out;
	    }
	    .codes input#submit:hover,.codes input#getPassword:hover{
	    	background: #3EAC34;
	    }
	    .codes input#submit{width: 100%;}

	    /*忘記密碼*/
	    input#email{
			padding-top: 15px;
			padding-left: 2.5em;
			background: url(../imgs/) no-repeat left 8px top 10px;
		}
	    #backTo{
	    	background: #606060;
			border-radius: 5px;
			font-size: 17px;
			margin-top: 15px;
			cursor: pointer;
			-webkit-transition: 0.3s ease-in-out;
					transition: 0.3s ease-in-out;
	    }
	    #backTo:hover{
	    	opacity: 0.8;
	    }
	    #getPassword,#backTo{
	    	width: 49%;
	    }

/**************************************************************************
 三. RWD 設定
***************************************************************************/
/* Mobile */
@media screen and (max-width: 767px){
	#main_block{
		background-color: #db2828;
	}
}

/* >=768px 共用 */
@media screen and (min-width: 768px){
		#header_logo{
			float: left;
			width: 9.15%;
			margin: 15px 0 0 2.85%;
			padding-top: 0;
			width: 90px;
		}
		#menu_btn{
			display: none;
		}
		#header_menu{
			float: right;
			width: 83%;
		}
			#header_menu_min{
				display: block;
				float: right;
				width: 100%;
				margin: 23px 3% 0 0;
				text-align: right;
			}
				.menu_min{
					display: inline-block;
					width: 60px;
					padding-left: 4.66%;
				}
			#header_menu_main{
				display: block;
				float: right;
				width: 100%;
				margin: 18px 3% 0 0;
				text-align: right;
			}
				.menu_main{
					display: inline-block;
					width: 60px;
					padding-left: 4.66%;
					background-color: #000;
					font-size: 12px;
					line-height: 24px;
					text-align: right;
				}
}
/**************************************************************************
四. 瀏覽器 設定
***************************************************************************/
@media screen and (-webkit-min-device-pixel-ratio:0){
	.loginBlock input{
		width: 83%;
	}
	input#checking{
		width: 105px;
	}
	.codes input#submit{
		width: 100%;
	}
}