/*
 * w421 i-beef - RWD system type-10
 * http://www.i-beef.com.tw/
 *
 * Copyright 2015, evelyn wang
 * 
 * 
 * October 2015
 */


/* +newmember
*----------------------------------------------------------------------------*/
#newmember {
	padding-top: 15px;
	border-top: 2px #93360a solid;
}

#newmember fieldset {
	border: 0;
}

#newmember fieldset p {
	margin-bottom: 3px;
	border-bottom: 1px #e5e5e5 solid;
	line-height: 55px;
	font-size: 16px;
}

#newmember fieldset p:nth-child(even) {
	background: rgba(255,255,255,0.5);
}

#newmember fieldset p label {
	margin-right: 5px;
	width: 130px;
	display: inline-block;
	letter-spacing: 1px;
	text-align: right;
	color: #000;
}

#newmember fieldset p input {
	padding: 0 15px 1px;
	width: 50%;
    height: 39px;
	background-color: #fff;
	border: 1px solid #aeaeae;
	line-height: 15px;	
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
	transition: border linear .2s, box-shadow linear .2s;
    color: #393939;
}

#newmember fieldset p input:focus {
	border-color: #d8d8d8;
}

#newmember fieldset p:last-child input {
	width: 100px;
}

#newmember fieldset p:nth-child(2n) {
	overflow: hidden;
}

#newmember fieldset p span {
	margin: 10px 10px 10px 145px;
	display: block;
	line-height: 170%;
	font-size: 13px;
	color: #93360a;
}

#newmember fieldset.btn {
	margin-top: 0;
	border: 0;
	text-align: center;
}

#newmember fieldset.btn p {
	text-align: center;
}

#newmember fieldset.btn input {
	margin-right: 10px;
	padding: 10px 0;
	width: 45%;
	background: #444;
	border: none;
	display: inline-block;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	text-align: center;
	color: #fff;
}

#newmember fieldset.btn input:first-child {
	background: #d9534f;
}


/* +member login
*----------------------------------------------------------------------------*/
#login > h3 {
	margin: 20px;
	text-align: center;
}

#login span {
	margin: 0 20px;
	display: block;
	text-align: center;
	color: #428bca;
}

#login {
	padding-top: 90px;
	height: 460px;
	background-image: url(../../images/10/article/bg-member.png);
	background-position: right 0;
	background-repeat: no-repeat;
	overflow: hidden;
}

#login #memberlogin {
	width: 60%;
	overflow: hidden;
}

#login #memberlogin .login {
	border: 0;
	float: left;
}

#login fieldset p {
	line-height: 55px;
	font-size: 16px;
}

#login fieldset p label {
	margin-right: 5px;
	width: 130px;
	display: inline-block;
	letter-spacing: 1px;
	text-align: right;
	color: #000;
}

#login fieldset p input {
	padding: 0 15px 1px;
	width: 50%;
    height: 39px;
	background-color: #fff;
	border: 1px solid #aeaeae;
	line-height: 15px;	
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
	transition: border linear .2s, box-shadow linear .2s;
    color: #393939;
}

#login fieldset p input:focus {
	border-color: #d8d8d8;
}

#login fieldset p:last-child input {
	width: 100px;
}

#login fieldset p:nth-child(2n) {
	overflow: hidden;
}

#login fieldset p:nth-child(2n) span {
	margin: 10px 10px 10px 145px;
	display: block;
	line-height: 170%;
	font-size: 13px;
	color: #93360a;
}

#login fieldset.btn {
	margin-top: 0;
	width: 30%;
	border: 0;
	float: right;
}

#login fieldset.btn p {
	width: 100%;
	position: relative;
	text-align: right;
}

#login fieldset.btn input {
	margin-right: 10px;
	padding: 10px 0;
	width: 100%;
	background: #444;
	border: none;
	display: inline-block;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	text-align: center;
	color: #fff;
}

#login fieldset.btn input:first-child {
	width: 100%;
	height: 200px;
	background: #d9534f;
	line-height: 250px;
	font-size: 18px;
}

#login fieldset.btn p i {
	position: absolute;
	left: 41%;
	top: 30%;
	font-size: 60px;
	color: #fff;
}

#login fieldset p:last-child {
	background: none;
	border: none;
}

#login fieldset.ask p label {
	width: 230px;
}

#login fieldset.ask p input {
	width: 50%;
}

#login fieldset.btn p:nth-child(2) {
	text-align: right;
}

#login fieldset.btn p:nth-child(2) a {
	color: #428bca;
}

#login #signup {
	margin: 10px 0 40px;
	width: 60%;
	text-align: center;
}

#login #signup p:first-child {
	padding-bottom: 10px;
	border-bottom: 1px #c2a8a6 solid;
	text-align: center;
}

#login #signup p:first-child a {
	color: #93360a;
}

#login #signup p:last-child {
	padding-top: 10px;
	text-align: right;
}

#login #signup p:last-child a {
	width: 110px;
	height: 35px;
	background: #c2a8a6;
	display: inline-block;
	-webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
	text-align: center;
	line-height: 35px;
	color: #fff;
}

#login #notice {
	margin: 20px;
	padding: 15px;
	background: #f7f7f7;
}

#login #notice h3 {
	margin-bottom: 15px;
}

#login #notice ol {
	list-style: decimal;
	list-style-position: inside;
}

#login #notice ol li {
	margin-bottom: 5px;
	list-style: decimal;
	list-style-position: inside;
	font-size: 15px;
}


/* +width:1024 ↓
*----------------------------------------------------------------------------*/
@media screen and (max-width: 1024px) {
	#login #memberlogin ,
	#login #signup {
		width: 65%;
	}
	
	#login fieldset p label {
		width: 85px;
	}
	
	#login fieldset p:nth-child(2n) span {
		margin-left: 85px;
	}
}


/* +width:768 ↓
*----------------------------------------------------------------------------*/
@media screen and (max-width: 768px) {
	#login {
		height: 500px;
		background-position: right bottom;
	}
	
	#login #memberlogin, 
	#login #signup {
		width: 100%;
	}
}


/* +width:480 ↓
*----------------------------------------------------------------------------*/
@media screen and (max-width: 480px) {
	#login {
		height: auto;
		background: none;
	}
	
	#login #memberlogin .login {
		float: none;
	}
	
	#login fieldset.btn {
		width: 100%;
		float: none;
	}
	
	#login fieldset.btn p {
		float: right;
	}
	
	#login fieldset.btn input:first-child {
		margin: 0;
		width: 30%;
		height: 55px;
		line-height: 35px;
		text-align: center;
	}
	
	#login fieldset.btn p i {
		display: none;
	}
}