body{
	background-color: #eee;
	-webkit-background-size: auto 100%;
	background-size: auto 100%;
	background-repeat: no-repeat;
	background-position: center top;
	background-attachment: fixed;
	/*background-image: url(login/pc-bg2.jpg);
        -webkit-background-size: 100% auto;
	background-size: 100% auto;*/
    -webkit-background-size: 100% 100%;
	background-size: 100% 100%;
	color: #666;
	font-size: 16px;
}

body,.input,.button{
	font-family: Arial,"微軟正黑體","微软雅黑","黑體-繁","黑体-简";
}

a,a:hover{
	color: inherit;
	text-decoration: none;
}

.button{
	border: none;
	background-color: #ccc;
	font-size: inherit;
	font-size: 21px;
	cursor: pointer;
}

.input{
	font-size: inherit;
	-webkit-appearance: none;
}

b{
	font-weight: bold;
}

small{
	font-size: 12px;
}

.login .block{
	margin-bottom: 10px;
}

/*通用樣式*/

/*結構樣式*/
.block{
	display: block;
}

.inline-block{
	display: inline-block;
}

.relative{
	position: relative;
}

.absolute{
	position: absolute;
}

.left{
	float: left;
}

.right{
	float: right;
}

.text-center{
	text-align: center;
}

.text-left{
	text-align: left;
}

.text-right{
	text-align: right;
}

.btn-block{
	display: block;
}

.margin-center{
	margin: 0 auto;
}

.fullWidth{
	width: 100%;
}

/*外觀樣式*/

.color-primary{
	color: #fa529f
}

.corlor-normal{
	color: #666;
}

.color-light{
	color: #CCC;
}

.color-dark{
	color: #999;
}

.color-b{
	color: #000;
}

.color-w{
	color: #FFF;
}

a.color-primary:hover{
	color: #e44990;
}


a.color-normal:hover{
	color: #444;
}


a.color-light:hover{
	color: #bbb;
}


a.color-dark:hover{
	color: #333;
}


a.color-b:hover{
	color: #111;
}


a.color-w:hover{
	color: rgba(255,255,255,0.6);
}

.bg-primary{
	background-color: #fa529f;
}

.bg-normal{
	background-color: #666;
}

.bg-light{
	background-color: #CCC;
}

.bg-dark{
	background-color: #999;
}

.bg-b{
	background-color: #000;
}

.bg-w{
	background-color: #fff;
}

.bg-facebook{
	background-color: #4267b2;
}

.bg-google{
	background-color: #db4437;
}

.button.bg-primary:hover{
	background-color: #e44990;
}


.button.bg-normal:hover{
	background-color: #444;
}


.button.bg-light:hover{
	background-color: #bbb;
}


.button.bg-dark:hover{
	background-color: #333;
}


.button.bg-b:hover{
	background-color: #111;
}


.button.bg-w:hover{
	background-color: rgba(255,255,255,0.6);
}


.bg-facebook:hover{
	background-color: #3b5ca0;
}


.bg-google:hover{
	background-color: #d23e32;
}

.br-primary{
	border-color: #fa529f;
}

.br-normal{
	border-color: #666;
}

.br-light{
	border-color: #CCC;
}

.br-dark{
	border-color: #999;
}

.br-rounded-s{
	border-radius: 5px;
}

.br-rounded-s-l{
	border-radius: 0 5px 5px 0;
}

.br-rounded-s-r{
	border-radius: 5px 0 0 5px;
}

.br-rounded-m{
	border-radius: 15px;
}

.br-rounded-L{
	border-radius: 50px;
}

.bg-tran-w{
	background-color: rgba(255,255,255,0.7);
}

.transition{
	transition: all 0.3s;
}

/*指定樣式*/

#main{
	width: 95%;
	max-width: 500px;
	/*height: 95%;
	max-height: 670px;*/
	padding: 10px;
	top: 50%;
	left: 50%;
	transform: translateY(-50%) translateX(-50%);
	box-sizing: border-box;
}

#logo img{
	width: 50%;
	height: auto;
}

#logo {
	line-height: 23px;
}

#bg_cover{
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
}

.icon-log{
	background-image: url(login/icon/icon_log.svg);
	background-repeat: no-repeat;
	background-size: 50px auto;
}

.login .fullWidth{
	max-width: 450px;
}

#login_form div{
	height: 100%;
}

#login_form .input{
	padding-left: 5px; 
	height: 100%;
	box-sizing: border-box;
	border-style: solid;
	border-width: 1px;
	margin-left: -1px;
}

.login .button,#login_form label{
	height: 50px;
}

#login_form div{
	width: 50px;
}

#login_form .input{
	width: calc(100% - 50px);
}

div#account_title {
    background-position: top -100px center;
}

div#password_title {
    background-position: top -150px center;
}

button#log_fb{
	background-position: top -54px left 10px;
}

button#log_gg{
	background-position: top left 15px;
}

.sign{
	border-style: solid;
	border-width: 1px;
}

#back{
	font-size: 21px;
	margin-top: 20px;
}

#back p{
	padding: 10px;
}

#back p:hover{
	color: #999;
}

/*行動裝置*/

@media only screen and (min-width: 768px){
	@media screen and (orientation: portrait){
		body{
			background-image: url(login/bg/m-bg2.jpg);
			-webkit-background-size: 100vw auto;
			background-size: 100vw auto;
            background-color: #eee;
		}

        #bg_cover{
	        background-color: rgba(239,239,239,1.0);
        }
	}
	
}

@media only screen and (max-width: 767px){
	body{
		font-size: 15px;
		-webkit-background-size: auto 100vh;
		background-size: auto 100vh;
        background-color: #eee;
	}

    #bg_cover{
	        background-color: rgba(239,239,239,1.0);
        }
	
	#main{
		overflow: scroll;
		max-height: 700px;
	}

	#back p{
		padding: 0;
	}
	@media screen and (orientation: landscape){
		body{
			background-image: url(login/bg/pc-bg.jpg);
			-webkit-background-size: 100vw auto;
			background-size: 100vw auto;
		}
	}

}

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

	.button{
		font-size: 16px;
	}

	#main{
		max-height: 535px;
	}

	#logo p{
		line-height: 18px;
	}

	.icon-log{
		-webkit-background-size: 42px auto;
		background-size: 42px auto;
	}

	.login .block{
		margin-bottom: 2%;
	}

	.login .button,#login_form label{
		height: 42px;
	}

	#login_form div{
		width: 42px;
	}

	#login_form .input{
		width: calc(100% - 42px);
	}

	div#account_title {
	    background-position: top -82px center;
	}

	div#password_title {
	    background-position: top -124px center;
	}

	button#log_fb{
		background-position: top -45px left 5px;
	}

	button#log_gg{
		background-position: top left 10px;
	}

	#back{
		font-size: inherit;
		margin-top: 15px;
	}

}

@media only screen and (max-width: 320px){

	body{
		font-size: 15px;
	}

	small.block{
		margin: 12px 0 13px 0;
	}

	#main{
		max-height: 485px;
	}

	.login .block{
		margin-bottom: 2%;
	}

	#logo p{
		font-size: 13px;
		line-height: 15px;
	}

	.icon-log{
		-webkit-background-size: 35px auto;
		background-size: 35px auto;
		background-position: top left 5px;
	}

	.login .button,#login_form label{
		height: 35px;
	}

	#login_form div{
		width: 35px;
	}

	#login_form .input{
		width: calc(100% - 35px);
	}

	div#account_title {
	    background-position: top -70px center;
	}

	div#password_title {
	    background-position: top -105px center;
	}

	button#log_fb{
		background-position: top -37px left 5px;
	}

}


@media only screen and (min-width: 451px) and (max-width: 768px){


	body{
		font-size: 16px;
	}

	small{
		font-size: 12px;
	}

	.button{
		font-size: 16px;
	}
	
	.login .block{
		margin-bottom: 15px;
	}

	.icon-log{
		-webkit-background-size: 50px auto;
		background-size: 50px auto;
		background-position: top left 5px;
	}

	#main{
		max-height: 535px;
	}

	#back{
		font-size: inherit;
		margin-top: 10px;
	}


}