/* --- section --- */

section{
	width:1275px;
	margin:0 auto;
	position:relative;
}

/* --- main title --- */

#mainTit{
	width:1275px; height:120px;
	padding:0 40px;
	border-bottom:3px double #d1d2d4;
	position:relative;
}
#mainTit h2{
	width:590px; height:120px;
	color:#000000;
	font-family: 'SeoulNamsanM', 'Noto Sans KR', '맑은 고딕', 'Malgun Gothic', 돋움, Dotum, sans-serif;
	padding:30px 0;
	line-height:3.5rem;
	vertical-align:middle;
	float:left;
}

/* --- article --- */

#articleWrap{
	width:740px; height:430px;
	margin:60px auto;
}
article{
	height:430px;
	padding:40px;
	position:relative;
}
article#article{
	width:440px;
	float:left;
	border: 1px solid #d1d2d4;
}
article#image{
	width:300px; 
	float:right;
	background-color:#e2e2e0;
	background-image:url(../images/seoul_lib_login.jpg);
	background-repeat:no-repeat;
	background-position:center center;
}

/* --- article login --- */

#article p, #article h3, #article a{text-align:center;}
#article h3{margin:10px 0;}

/* --- article login input --- */

.input-box input::-ms-clear,
.input-box input::-ms-reveal{display:none; width:0; height:0;}
.input-box {
	position: relative;
	width: 270px;
	height: 40px;
	background-color: #e2e2e0;
	border: 1px solid transparent;
	border-radius:20px;
	vertical-align:middle;
	margin:15px auto;
}
.input-box:hover{
	background-color: #ffffff;
	border: 1px solid #0193cf;
}
.input-box i{
	width: 30px;
	height: 30px;
	border-radius: 50%;
	display:block;
	position:absolute;
	top:4px; right:5px;
	color: #8f8e93;
	padding-top:5px;
	text-align:center;
	font-size:1.3rem;
}
.input-box:hover i{
	color: #0193cf;
}
.input-txt{
	display: flex;
	align-items: center;
	text-indent:0.5rem;
	width: 220px; height:40px;
	margin: 0 10px;
	border:none;
	background: none;
	outline: none;
	float: left;
	font-size: 0.9rem;
	line-height: 40px;
}

/* --- article login button --- */

#article button[type="submit"]{
	width: 270px;
	height: 40px;
	font-family:'Noto Sans KR', '맑은 고딕', 'Malgun Gothic', 돋움, Dotum, sans-serif;
	font-weight:500;
	font-size:1rem;
	line-height:1;
	color:#ffffff;
	background-color: #0193cf;
	border: 1px solid #0193cf;
	border-radius:20px;
	vertical-align:middle;
	display:block;
	margin:15px auto;
}
#article button[type="submit"]:hover{
	text-shadow:2px 2px 1px rgba(0,0,0,0.5);
}

/* --- article login checkbox --- */

#article form fieldset:nth-child(2){
	text-align:center;
	margin-bottom:30px;
}
#article label{
	line-height:21px;
	vertical-align:middle;
}
#article form fieldset:nth-child(2) label:last-child{
	margin-left:30px;
}
#article input[type="checkbox"] { /* 실제 체크박스는 화면에서 숨김 */
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip:rect(0,0,0,0); border: 0;
}
#article input[type="checkbox"] + label {
	display: inline-block;
	position: relative;
	padding-left: 30px; /* 글자와 체크박스 사이의 간격을 변경 */
	cursor: pointer;
	-webkit-user-select: none; -moz-user-select: none; -ms-user-select: none;
}
#article input[type="checkbox"] + label:before { /* 가짜 체크박스 */
	content: '';
	position: absolute;
	left: 0; top: 0px; /* 이 값을 변경해서 글자와의 정렬 */
	width: 21px; /* 체크박스의 너비를 지정 */
	height: 21px; /* 체크박스의 높이를 지정 */
	line-height: 21px; /* 세로정렬을 위해 높이값과 일치 */
	text-align: center;
	background: #ffffff; border: 1px solid #d1d2d4; border-radius : 3px;
}
#article input[type="checkbox"]:checked + label{
	color:#0193cf;
}
#article input[type="checkbox"] + label:active:before,
#article input[type="checkbox"]:checked + label:active:before {
	border: 1px solid #997d4e;
	box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1);
}
#article input[type="checkbox"]:checked + label:before { /* 체크박스를 체크했을때 */ 
	content: '\2714'; /* 체크표시 유니코드 사용 */
	color: #ffffff; text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
	background: #0193cf; border-color: #0193cf;
}

/* --- article login join --- */

#article #join{
	width:270px;
	margin:0 auto;
	display:flex;
	align-items:center;
	justify-content:space-between;
}
#article #join a{
	display:inline-block;
	padding:2px 0;
	border-bottom:1px solid transparent;
}
#article #join a:last-child{
	color:#0193cf;
	border-bottom:1px dashed #0193cf;
}
#article #join a:hover{
	border-bottom:1px solid #0193cf;
}