@import url('https://fonts.googleapis.com/css?family=Noto+Sans+KR:300,400,500,700&display=swap');
@font-face {
	font-family: 'SeoulNamsanM';
	src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_two@1.0/SeoulNamsanM.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}

/* === CSS reset === */

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, main, summary,
time, mark, audio, video{
	margin:0; padding:0; border:0; outline:0;
    background: transparent;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}
html{
	-webkit-font-smoothing: subpixel-antialiased;
    /*-webkit-text-stroke-width: 0.2px;*/
    -webkit-tap-highlight-color: transparent;
}
body{
    -webkit-text-size-adjust: none;
    overflow-x:hidden;
	overflow-y:scroll;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, main{display:block;}
ul,ol,li{list-style:none;}
a{
	margin:0; padding:0; border:0; outline:0;
	text-decoration:none;
	color:inherit;
}
table{
	border-collapse:collapse;
	border-spacing:0;
}
hr{
	display:block;
	height:1px;
	border:0; 
	border-top:1px solid #f3f4f4;
	margin:1rem 0;
	padding:0;
}
img{border:0; max-width:100%; vertical-align: top;}
em{font-style:normal;}
input, textarea, button{
	-webkit-appearance:none;
	-moz-appearance:none;
	appearance:none;
}
input, textarea, button, select{
	-webkit-border-radius:0;
	-moz-border-radius:0;
	-o-border-radius:0;
	border-radius:0;
}
button{
	border:none;
	outline:none;
	background:none;
	cursor:pointer;
}
input, select{vertical-align:middle;}
input:required, input:invalid{
    border:0 none; outline: 0 none; 
    -webkit-box-shadow:none; 
    -moz-box-shadow:none; 
    -ms-box-shadow:none; 
    -o-box-shadow:none; 
    box-shadow: none;
}
address, cite, dfn, em, var{font-style: normal;}
blockquote, q{quotes: none;}
blockquote:before, blockquote:after, q:before, q:after{content:''; content: none;}
sup{vertical-align: text-top;}
sub{vertical-align: text-bottom;}
embed{ /*for the damn thouder plugin*/
    display:none;
}

/* === form CSS reset cross browsing === */

select::-ms-expand {display:none}
input::-webkit-search-decoration,
input::-webkit-search-cancel-button,
input::-webkit-search-results-button,
input::-webkit-search-results-decoration{display:none;}
input:-moz-submit-invalid{box-shadow: none;}
input:-moz-ui-invalid{box-shadow:none;}

/* === float, clear, margin, align === */

.maC{margin:0 auto;}
.taC{text-align:center;}
.fl{float:left;}
.fr{float:right;}
.cb{clear:both;}
.cf{*zoom:1;}
.cf:after{content:''; display:block; clear:both;}

/* === font style === */

body{
	font-family:'Noto Sans KR', '맑은 고딕', 'Malgun Gothic', 돋움, Dotum, sans-serif;
	font-size:100%;
	letter-spacing:-0.03rem;
}
.hidden{display:none;}
a.shortcut{display:inline-block; font-weight:700; color:#004b8e; border-bottom:1px dashed transparent;}
a.shortcut:hover{color:#0193cf; border-bottom:1px dashed #0193cf;}

/* === color === */

.colorCyan{color:#0193cf;}
.colorBlue{color:#004b8e;}
.colorSilver{color:#8f8e93;}
.colorGold{color:#997d4e;}
.colorDGray{color:#58585a;}
.colorMGray{color:#d1d2d4;}
.colorLGray{color:#e2e2e0;}
.colorBg{background-color:#f3f4f4;}

/* === Mobile App Layout 시작 === */

/* --- splash screen --- */

.splash_page{
	width:100%; height:90vh;
}
.splash_page #splash{
	width:100%; height:100%;
	text-align:center;
	display:flex;
	flex-flow:column wrap;
	align-items:center;
	justify-content:center;
}
.splash_page #splash hgroup{
	width:90%; height:18rem;
}
.splash_page #splash h1{
	margin-bottom:1.5rem;
}
.splash_page #splash h1 img{
	width:13rem;
}
.splash_page #splash h2{
	font-size:1.5rem;
	font-weight:300;
}
.splash_page #splash p:nth-child(2){
	width:90%; height:5rem;
	line-height:5rem;
}
.splash_page #splash p:last-child{
	width:90%; height:7rem;
	font-size:1.25rem;
	font-weight:400;
	line-height:170%;
}
.splash_page #splash p strong{
	font-weight:700;
}

/* --- header --- */

#header{
	width:100%; height:4rem;
	background-color:#ffffff;
	border-bottom:1px solid #e1e1df;
	position:fixed;
	top:0; left:0;
	z-index:10;
}
#header h1{
	display:block;
	width:50%; height:3rem;
	position:absolute;
	top:0.5rem; left:50%;
	margin-left:-25%;
}
#header h1 a,
#header h1 a img{
	display:block;
	width:100%; height:3rem;
	margin:0 auto;
}
#header div{
	display:block;
	width:4rem; height:4rem;
}
#header div.menu_open_btn{
	position:absolute;
	left:0; top:0rem;
}
#header div.login_open_btn{
	position:absolute;
	right:0; top:0rem;
}
#header div a{
	display:block;
	width:4rem; height:4rem;
	font-size:2.5rem;
	line-height:4rem;
	text-align:center;
	color:#004b8e;
}
#header div a:hover{
	color:#0193cf;
}

/* --- nav --- */

#nav{
	width:100%; height:100%;
	position:fixed;
	top:0; left:0;
	z-index:100;
	display:none;
}
#nav:after{
	content:"";
	display:block;
	position:fixed;
	width:100%;
	height:100%;
	z-index:49;
	background:#000000;
	opacity:0.7;
}
#nav .menu_close_btn{
	position:absolute;
	left:80%;
	width:4rem; height:4rem;
	margin-left:-4rem;
	z-index:55;
	display:flex;
	align-items:center;
	justify-content:center;
}
#nav .menu_close_btn a{
	display:block;
	width:3rem; height:3rem;
	border-radius:50%;
	background-color:#ffffff;
	font-size:2rem;
	line-height:3rem;
	text-align:center;
	color:#004b8e;
}
#nav .menu_close_btn a:hover{
	color:#0193cf;
}
#nav .nav_bg{
	position:absolute;
	left:0;
	width:80%; height:100%;
	overflow-y:scroll;
	background:#ffffff;
	z-index:50;
}
#nav .nav_bg .depth1 > li{
	border-bottom:1px solid #8f8f92;
}
#nav .nav_bg .depth1 > li.border{
	margin-top:4rem;
	border-top:1px solid #8f8f92;
}
#nav .nav_bg .depth1 > li > div > a > span{
	display:block;
	float:left;
	height:3.5rem;
	line-height:3.5rem;
	color:#000000;
	font-size:1.3rem;
	font-weight:500;
	padding-left:1.5rem;
	margin-right:1.5rem;
}
#nav .nav_bg .depth1 > li > div > a > i{
	display:block;
	float:right;
	height:3.5rem;
	line-height:3.5rem;
	color:#000000;
	font-size:1.3rem;
	padding-right:1.5rem;
	margin-left:1.5rem;
}
#nav .nav_bg .depth1 > li > div.on > a > span{
	display:block;
	float:left;
	height:3.5rem;
	line-height:3.5rem;
	color:#0193cf;
	font-size:1.3rem;
	font-weight:700;
	padding-left:1.5rem;
	margin-right:1.5rem;
}
#nav .nav_bg .depth1 > li > div.on > a > i{
	display:block;
	float:right;
	height:3.5rem;
	line-height:3.5rem;
	color:#0193cf;
	font-size:1.3rem;
	padding-right:1.5rem;
	margin-left:1.5rem;
}
#nav .nav_bg .depth2 > li > a{
	display:block;
	height:3rem;
	line-height:3rem;
	color:#000000;
	font-size:1.1rem;
	font-weight:400;
	padding-left:1.5rem;
	background-color:#e2e2e0;
	border-top:1px solid #ffffff;
}
#nav .nav_bg .depth2 > li > a:hover{
	background-color:#d1d2d4;
}

/* --- login --- */

#login{
	width:100%; height:100%;
	position:fixed;
	top:0; left:0;
	z-index:100;
	display:none;
}
#login:after{
	content:"";
	display:block;
	position:fixed;
	width:100%;
	height:100%;
	z-index:49;
	background:#000000;
	opacity:0.7;
}
#login .login_close_btn{
	position:absolute;
	right:80%;
	width:4rem; height:4rem;
	margin-right:-4rem;
	z-index:55;
	display:flex;
	align-items:center;
	justify-content:center;
}
#login .login_close_btn a{
	display:block;
	width:3rem; height:3rem;
	border-radius:50%;
	background-color:#ffffff;
	font-size:2rem;
	line-height:3rem;
	text-align:center;
	color:#004b8e;
}
#login .login_close_btn a:hover{
	color:#0193cf;
}
#login .login_bg{
	position:absolute;
	right:0;
	width:80%; height:100%;
	overflow-y:scroll;
	background:#ffffff;
	z-index:50;
}
#login .login_bg .login_wrap{
	width:85%;
	margin:4rem auto;
}
#login p, #login h2, #login .login_bg a{text-align:center;}
#login h2{
	font-size:2rem;
	margin:0.5rem 0;
}

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

.input-box input::-ms-clear,
.input-box input::-ms-reveal{display:none; width:0; height:0;}
.input-box {
	position: relative;
	width:100%; height: 3rem;
	background-color: #e2e2e0;
	border: 1px solid transparent;
	border-radius:1.5rem;
	vertical-align:middle;
	margin:1rem auto;
}
.input-box:hover{
	background-color: #ffffff;
	border: 1px solid #0193cf;
}
.input-box i{
	width: 2.8rem;
	height: 2.8rem;
	border-radius: 50%;
	display:block;
	position:absolute;
	top:0.1rem; right:0.1rem;
	color: #8f8e93;
	line-height:2.8rem;
	text-align:center;
	font-size:1.3rem;
}
.input-box:hover i{
	color: #0193cf;
}
.input-txt{
	text-indent:0.5rem;
	width: 85%; height:1.5rem;
	margin: 0.7rem 1rem;
	border:none;
	background: none;
	outline: none;
	float: left;
	font-size: 1rem;
	line-height:1.5rem;
}

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

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

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

#login form fieldset:nth-child(2){
	text-align:center;
	margin-bottom:2rem;
}
#login label{
	line-height:21px;
	vertical-align:middle;
}
#login form fieldset:nth-child(2) label:last-child{
	margin-left:5%;
}
#login input[type="checkbox"] { /* 실제 체크박스는 화면에서 숨김 */
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip:rect(0,0,0,0); border: 0;
}
#login 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;
}
#login 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;
}
#login input[type="checkbox"]:checked + label{
	color:#0193cf;
}
#login input[type="checkbox"] + label:active:before,
#login input[type="checkbox"]:checked + label:active:before {
	border: 1px solid #0193cf;
	box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1);
}
#login 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 --- */

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

/* --- section --- */

#section{
	width:100%; height:auto;
	margin-top:4rem;
	margin-bottom:4.5rem;
}

/* --- footer --- */

#footer{
	width:100%; height:4.5rem;
	background-color:#ffffff;
	border-top:1px solid #e1e1df;
	position:fixed;
	bottom:0; left:0;
	z-index:10;
}
#footer #foot_icon{
	width:100%;
	display:flex;
	align-items:center;
	justify-content:space-between;
}
#footer #foot_icon li{
	display:block;
	width:20%; height:4.5rem;
}
#footer #foot_icon li a{
	display:block;
	width:90%; height:4.5rem;
	margin:0 auto;
	text-align:center;
	font-size:0.75rem;
	font-weight:700;
	color:#8f8f92;
}
#footer #foot_icon li a .iconImg{
	width:3rem; height:3rem;
	margin:0 auto;
	background-repeat:no-repeat;
	background-position:100% 0%;
	background-size:200%;
}
#footer #foot_icon #foot_seoullib .iconImg{
	background-image:url(../images/icon/library.svg);
}
#footer #foot_icon #foot_search .iconImg{
	background-image:url(../images/icon/search_paper.svg);
}
#footer #foot_icon #foot_ebook .iconImg{
	background-image:url(../images/icon/device.svg);
}
#footer #foot_icon #foot_member .iconImg{
	background-image:url(../images/icon/idcard.svg);
}
#footer #foot_icon #foot_mylib .iconImg{
	background-image:url(../images/icon/books3.svg);
}
#footer #foot_icon li a:hover{
	color:#000000;
}
#footer #foot_icon li a:hover .iconImg{
	background-position:0% 0%;
}
#footer #foot_icon li.on a{
	color:#000000;
}
#footer #foot_icon li.on a .iconImg{
	background-position:0% 0%;
}

/* top */

/*--- top 버튼 ---*/

#moveTop_btn{
	position:fixed;
    right:2vw;
    bottom:2vh;
	width:2.5rem; height:2.5rem;
	border-radius:50%;
	line-height:2.25rem;
	margin-bottom:4rem;
    display:none;
	text-align:center;
	vertical-align:middle;
	font-size:2.5rem;
	color:#ffffff;
	background-color:#0193cf;
    z-index:30;
}