@charset "utf-8";
/* ------------------------------------------
* Filename:base.css
* Description: 현대엘리베이터 개통상태 조회
* Author:nwtns
------------------------------------------ */

@import url(http://fonts.googleapis.com/earlyaccess/notosanskr.css);

/* reset
------------------------------------------ */
body,p,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,table,th,td,form,fieldset,legend,input,textarea,button,select,img,div{margin:0; padding:0}
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section{display:block}
img,fieldset{border:0}
ul,ol{list-style:none}
img,input,select{vertical-align:middle}
em,address{font-style:normal}
table{width:100%; border-collapse:collapse; border-spacing:0px; empty-cells:show; /*table-layout:fixed*/}
caption{visibility:hidden; width:0; height:0; margin:0; padding:0; font-size:0; line-height:0}
*{box-sizing:border-box}

/* basic
------------------------------------------ */
body, input, select, textarea{font-family:'verdana', 'Noto Sans KR', 'Malgun Gothic', '맑은 고딕', sans-serif; /* font-family:'verdana', 'Malgun Gothic', '맑은 고딕', sans-serif; */ font-size:14px}
body{color:#555; -webkit-text-size-adjust:none; /* background-color:#E0E0E0 */}
input, select, textarea{color:#333}
a:link, a:visited{text-decoration:none; color:#333}
a:hover{text-decoration:underline; color:#333}
a:active{text-decoration:none; color:#333}
.blind{position:absolute; z-index:-1; color:rgba(255,255,255,0)}
.underline{text-decoration:underline}
.dim{position:fixed; top:0; left:0; z-index:99; width:100%; height:100%; background-color:rgba(0,0,0,.7)}
.en{letter-spacing:0 !important}

/* layout 
------------------------------------------ */
html, body,.open_status_inquiry{height:100%;}
body{background:#f8f8f8}
.open_status_inquiry{display:flex; flex-direction: column}
/* .open_status_inquiry{max-width:980px; margin:0 auto; background-color:#fff} */
.open_status_inquiry .osi_header{flex:none;height:60px; line-height:55px; text-align:center; background-color:#1d4262}
.osi_container{flex:auto; display:flex; justify-content: center; align-items:center;}
.osi_container .inside{width:980px}
.osi_container .info_box{
	padding:60px 40px; 
	border-radius:3px; 
	background-color:#fff; 
	display:flex; 
	flex-direction:row-reverse; 
	justify-content:space-between;
	align-items:center}

.osi_container .input_box{
	flex:0 0 45%;
	margin-right:30px;
	width:100%;
}
.osi_container .input_box input{
	width:100%;
	height:50px;
	border:1px solid #eee;
	border-radius:3px;
	padding:0 20px;
	color:#333;
	font-size:17px;
	text-align:center;
	background-color:#f9f9f9;
}
button.button_normal{
	border:none;
	outline:none;
	margin-top:20px;
	width:100%;
	height:50px;
	line-height:50px;
	text-align:center;
	border-radius:3px;
	color:#fff;
	font-size:19px;
	background-color:#00a651;
	font-weight:bold;
	cursor:pointer;
}
.osi_container .guide_box{
	padding-left:20px;
	border-left:1px solid #ddd;
}
.osi_container .guide_box p, .guide_text{
	padding-left:40px;
	background:url('../img/icon_check.png') 0 4px no-repeat;
	background-size:20px auto;
	color:#666;
	font-size:15px;
	line-height:1.5;
	letter-spacing:-.05em;
	text-align:left;
}
.osi_container .guide_box p+p{
	margin-top:16px;
}
.osi_container .guide_box span, .guide_text span{
	color:#222;
	font-size:16px;
	/* text-decoration:underline; */
}
.osi_container .result_box h2{
	padding:40px 0 15px 40px;
	color:#222;
	font-size:23px;
	font-weight:normal;
}
.osi_container .result_box .txt_box{
	background-color:#fff;
	padding:40px;
	text-align:center;
	border-radius:3px;
	letter-spacing:-.05em;
} 
.osi_container .result_box p{
	color:#333;
	font-size:15px;
	line-height:1.9;
}
.osi_container .result_box p.guide_text{
	line-height:1.5
}
.osi_container .result_box p.guide_text + p.guide_text{
	margin-top:20px
}
.osi_container .result_box p span{
	color:#00a651;
	font-size:17px;
}
.osi_container .table_wrap{
	margin-top:20px;
}
.osi_container .normal_table thead th{
	background-color:#666;
	color:#fff;
	font-size:13px;
	padding:8px 5px;
	font-weight:normal;
}
.osi_container .normal_table td{
	padding:8px 5px;
	border-bottom:1px solid #666;
	font-size:14px
}

@media only screen and (max-width:980px){
	.osi_container{
		padding:10px;
		background-color:#fff;
		align-items: flex-start;
	}
	.osi_container .inside{
		width:100%;
	}
	.osi_container .info_box{
		flex-direction: column-reverse;
		padding:40px 20px;
	}
	.osi_container .input_box{
		margin-right:0;
	}
	button.button_normal{
		margin-top:10px;
	}
	.osi_container .guide_box{
		margin-top:20px;
		border-left:0;
		padding-left:0;
	}
	.osi_container .guide_box p br{
		display:none;
	}
	.osi_container .result_box h2{
		padding:15px 0 15px 20px;
		background-color:#f8f8f8;
	}
	.osi_container .result_box .txt_box{
		padding:30px 10px;
		border-bottom:1px solid #f8f8f8;
	}
	.osi_container .result_box .txt_box br{
		display:none;
	}
	.osi_container .result_box .txt_box span{
		display:block;
	}
}