@charset "UTF-8";
@import url('font.css');
@import url('default.css');


/*
=====================
1: Base Setting
2: Common Setting
	2-1: Basic
	2-2: Layout
3: Main
4: Contents
5: Popup
=====================
*/


/* 1: Base Setting
=========================================================================================== */
.hidden {display:none;}
.blind {visibility:hidden;}


.cursor {cursor:pointer;}
.non-cursor {cursor:default;}

.ta-r {text-align:right !important;}
.ta-l {text-align:left !important;}
.ta-c {text-align:center !important;}

.va-t {vertical-align:top !important;}
.va-m {vertical-align:middle !important;}
.va-b {vertical-align:bottom !important;}

.clearfix {}
.clearfix:after {content:""; clear:both; display:table; height: 0;}
.fl-l {float:left;}
.fl-r {float:right;}


.blind {display:none;}
.clear {clear:both; height:0;}


.c-black {color:#000 !important;}
.c-red {color:rgb(255, 0, 0) !important;}
.c-gray {color:#8f8d8d !important;}
.c-blue {color:#4664FF !important;}

.c-down {color: #FA4646 !important;}
.c-up {color: #00C882 !important;}


.d-b {display: block;}
.d-ib {display: inline-block;}

.d-t {display: table;}
.d-tc {display: table-cell; vertical-align: middle;}


.pa-b1 {padding-bottom:120px;}
.pa-b2 {padding-bottom:100px;}

.ma-b1 {margin-bottom:120px;}
.ma-b2 {margin-bottom:100px;}


.f-en {font-family: serif; font-weight: 600;}


iframe[name='google_conversion_frame'] {border:0; width:0; height:0; padding:0; margin:0; position:absolute; z-index:-1; visibility:hidden;}

.t-dot-solo {overflow:hidden; white-space:nowrap; text-overflow: ellipsis;}


 /* 2: Common Setting
=========================================================================================== */

/* 2-1: Basic
=========================== */
html {width:100%; font-size:62.5%;}
body {
	width:100%; height: 100vh; 
	font-family:'Pretendard', sans-serif; color:#5a5a5a; font-weight: 300; font-size:24px; font-size:1.25‬vw; line-height:1.2; -webkit-text-size-adjust: 100%; 
	background-image: url(../images/bg.jpg); background-repeat: no-repeat; background-position: center center; background-size: cover;
}


/*버튼*/
.btn-pk {
	display:inline-block; *display:inline-block; *zoom:1; padding:8px 10px; 
	color:#fff; font-size:24px; font-size:1.25‬vw; text-align: center;
	-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
	border: 1px solid #cdcdcd;
	-webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0;
	transition:all .3s ease; -webkit-transition:all .3s ease; -moz-transition:all .3s ease; -o-transition:all .3s ease;
}
.btn-pk.bdrs {}

.btn-pk.n {min-width:80px; padding:35px 20px; padding:1.82vw 1.04vw; font-size:24px; font-size:1.25‬vw;}
.btn-pk.b {min-width:80px; padding:45px 20px; padding:2.34‬vw 1.04vw; font-size:30px; font-size:1.56‬vw;}

a.btn-pk {line-height: 1.5;}

.btn-pk.green {border-color: #28C864; color: #fff; background-color: #28C864;}
.btn-pk.blue {border-color: #071642; color: #fff; background-color: #071642;}




/*테이블*/
.tbl_basic {font-size: 24px; font-size: 1.25vw; color: #000; }
.tbl_basic table {table-layout:fixed;}
.tbl_basic td {padding: 10px; padding: 0.52vw; height: 60px; height: 3.125‬vw; text-align: left;}
.tbl_basic th {padding: 10px; padding: 0.52vw; height: 60px; height: 3.125‬vw; font-weight: normal; text-align: center;}

.tbl_basic col.hash {width: 84px; width: 4.375‬vw;}
.tbl_basic col.number {width: 200px; width: 10.41‬vw;}
.tbl_basic col.day {width: 220px; width: 11.45833vw;}
.tbl_basic col.state {width: 130px; width: 6.7708333vw;}
.tbl_basic col.del {width: 110px; width: 5.729166vw;}



.tbl_basic table.list {table-layout:fixed; text-align: center;}
.tbl_basic table.list th {background-color: #F0F0F0;}
.tbl_basic table.list td {text-align: center;}
.tbl_basic table.list td.subject {text-align: left;}
.tbl_basic table.list tr:nth-child(2n) td {background-color: #F8F8F8; }
.tbl_basic table.list td:last-child {padding-right: 20px; padding-right: 1.04166vw;}
.tbl_basic table.list tr.non td {color: #000; opacity:.4;}
.tbl_basic table.list tr.non td.last {opacity:1;}



.btn_del {font-size: 0; position: relative; width: 40px; width: 2.08333vw; height: 40px; height: 2.08333vw; border: 0; text-align: center;}
.btn_del span {position: absolute; left: 50%; margin-left: -12px; margin-left: -0.625‬vw; width: 24px; width: 1.25‬vw; height: 2px; background-color: #000; transform:rotate(45deg);}
.btn_del span:after {content:""; position: absolute; left: 50%; margin-left: -12px; margin-left: -0.625‬vw; width: 24px; width: 1.25‬vw; height: 2px; background-color: #000; transform:rotate(90deg);}

.btn_wrong {
	border: 0; width: 40px; width: 2.08vw; height: 40px; height: 2.08vw; font-size: 0;
	background-image: url(../images/ico_error.svg); background-position: center center; background-repeat: no-repeat; background-size: 32px auto;
}





.tlt_tbl {padding: 45px 35px 25px; padding: 2.34‬vw 1.82vw 1.30vw; font-size: 24px; font-size: 1.25‬vw;}
.tlt_tbl .h_tit1 {display: inline-block; vertical-align: top; margin-bottom: 0; color: #071642;}
.tlt_tbl .rgh {float: right;}
.tlt_tbl .rgh strong {color: #3C3C3C;}
.tlt_tbl .rgh p {font-size: 24px; font-size: 1.25‬vw;}


.scrollY {overflow-y:auto; }
.scrollY.size1 {max-height: calc(100vh - 230px); max-height: calc(100vh - 11.98vw);}



/* 2-2: Layout
=========================== */
#wrap {overflow:hidden; word-break:keep-all; word-wrap:break-word;}

#header {
	z-index:10; overflow:hidden; position: relative; padding: 0 35px; padding: 0 1.83vw; 
	line-height: 48px; line-height: 2.5vw; background-color: #28C864; 
	transition:all .3s; -webkit-transition:all .3s; -moz-transition:all .3s; -o-transition:all .3s;
}
#header .logo {float: left;}
#header .logo img {vertical-align: top; margin-top: 15px; margin-top: 0.78vw; max-height:18px; max-height:0.9375‬vw;}
#header .copy {float: right; font-size: 12px; font-size: 0.625‬vw; color: #fff;}
#header .copy > span {position: relative; display: inline-block; vertical-align: top; padding-left: 1em; margin-left: 1em;}
#header .copy > span:after {content:""; position: absolute; left: 0; top: 50%; margin-top: -.5em; width: 1px; height: 1em; background-color: rgba(255,255,255,.7);}
#header .copy > span:first-child:after {content:none;}


#container {position: relative; height: calc(100vh - 2.5vw); padding-right: 360px;}
#container:after {
	content:""; position: absolute; left: 0; top: 0; width: 100%; height: 30px; 
	background: rgb(255,255,255);
	background: -moz-linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(0,0,0,1) 100%);
	background: -webkit-linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(0,0,0,1) 100%);
	background: linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(0,0,0,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff",endColorstr="#000000",GradientType=1);
	opacity:.1;
}
#container .sidebar {position: absolute; right: 0; top: 0; width: 360px; width: 18.75‬vw; height: 100%; color:#fff; padding:45px 25px; padding: 2.34vw 1.30vw; box-sizing:border-box;}
#container .sidebar .botm {position: absolute; left: 0; bottom: 0; width: 100%;}
#container .sidebar .botm .btn-pk {width: 100%;}
#container .sidebar .gnb {font-size: 20px; font-size: 1.04vw;}
#container .sidebar .gnb li {position: relative; padding-left: 40px; display: flex; margin-bottom: 30px; margin-bottom: 1.56vw; justify-content: space-between; font-weight: 500;}
#container .sidebar .gnb li:after {
	content:""; position: absolute; left: 0; top: 50%; margin-top: -14px; margin-top: -0.729166vw;
	width: 28px; width: 1.46vw; height: 28px; height: 1.46vw; 
	background-repeat: no-repeat; background-position: 0 center; background-size: cover;
}
#container .sidebar .gnb li.g1:after {background-image: url(../images/ico_gnb1.svg);}
#container .sidebar .gnb li.g2:after {background-image: url(../images/ico_gnb2.svg);}
#container .sidebar .gnb li.g3:after {background-image: url(../images/ico_gnb3.svg);}
#container .sidebar .gnb li.g4:after {background-image: url(../images/ico_gnb4.svg);}
#container .sidebar .gnb li.g5:after {background-image: url(../images/ico_gnb5.svg);}

#container .contents {position: relative; background-color: #fff; height: 100%;}





.h_tit1 {margin-bottom: 30px;  margin-bottom: 1.56vw; font-size: 24px; font-size: 1.25vw; font-weight: 800;}


/*********************/
.area_loginbox {position: absolute; left: 50%; top: 50%; width: 440px; width: 22.91vw; transform:translate(-50%,-50%);}
.area_loginbox .inner {background-color: #fff; padding-top: 90px; padding-top: 4.6875vw; box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.12);}
.area_loginbox .inner .in {padding: 0 40px 50px; padding: 0 2.0833vw 2.604166vw; }
.area_loginbox .logo {text-align: center; margin-bottom: 40px; margin-bottom: 2.0833vw;}
.area_loginbox .logo img {width: 180px; width: 9.375vw;}
.area_loginbox .btn-pk {width: 100%;}
.area_loginbox .copy {margin-top: 20px; margin-top: 1.0416vw; font-size: 20px; font-size: 1.0416vw; color: #fff; line-height: .8; text-align: center;}
.area_loginbox .copy > span {display: inline-block; vertical-align: middle; padding: 0 0.5em; border-left: 1px solid #fff;}
.area_loginbox .copy > span:first-child {border-left: 0;}

.area_loginbox div.inp_txt {position: relative; margin-bottom: 20px; margin-bottom: 1.0416vw; -webkit-border-radius: 0.625vw; -moz-border-radius: 0.625vw; border-radius: 0.625vw;}
.area_loginbox div.inp_txt p {position: absolute; left: 16px; left: 0.83vw; top: -10px; top: -0.53vw; padding: 0 .2em; font-size: 16px; font-size: 0.83vw; font-weight: 700; background-color: #fff; color: #969696;}
.area_loginbox div.inp_txt input {width: 100%; -webkit-border-radius: 0.625vw; -moz-border-radius: 0.625vw; border-radius: 0.625vw;}
.area_loginbox div.inp_txt input:focus + p {color: #000;}
.area_loginbox .inp {text-align: right;}
.area_loginbox .inp_checkbox {vertical-align: top;}




.layerPopup {z-index: 1; display: none; position: absolute; left: 50%; top: 50%; transform:translate(-50%,-50%); box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.12);}
.layerPopup .inner {padding: 60px 40px; padding: 3.125‬vw 2.08333vw; background-color: #fff; font-size:24px; font-size: 1.25vw; color:#5A5A5A;}


.popup_dim {
	position: fixed; left: 0; top: 0; width: 100%; height: 100%;
	background: rgba(180, 180, 180, 0.6);
	background-blend-mode: multiply;
	backdrop-filter: blur(20px);
}

/* if backdrop support: very transparent and blurred */
@supports ((-webkit-backdrop-filter: none) or (backdrop-filter: none)) {
	.popup_dim {
		background: rgba(180, 180, 180, 0.6);
		background-blend-mode: multiply;
		backdrop-filter: blur(20px);
	}
}


.mbtn_ty1 {display: flex;}
.mbtn_ty1 > * {flex:1;}



/*서비스선택*/
.layerPopup.pop1 {display: block; width: 1000px; width: 52.08333vw; text-align: center;}
.layerPopup.pop1 .logo {margin-bottom: 35px; margin-bottom: 1.8229166vw;}


/*책반납,회원증*/
.layerPopup.pop2 {display: block; width: 560px; width: 29.16666vw; text-align: center;}
.layerPopup.pop2 .img {margin-bottom: 1em;}
.layerPopup.pop2 .inner {padding-top: 150px; padding-top: 7.81vw; padding-bottom: 150px; padding-bottom:7.81‬vw;}


/*도서*/
.layerPopup.pop_book1 {width: 560px; width: 29.16666vw; text-align: center; line-height: 1.5;}
.layerPopup.pop_book1 .inner {padding: 90px 40px 80px; padding: 4.69vw 2.083vw 4.16vw;}
.layerPopup.pop_book1 .icon {margin-bottom: 1em;}
.layerPopup.pop_book1 .icon img {width: 52px; width: 2.70833vw;}
.layerPopup.pop_book1 .t1 b {color: #3c3c3c;}



/*도서대출완료*/
.layerPopup.pop_book2 {display: block; width: 560px; width: 29.16666vw; text-align: center; line-height: 1.5;}
.layerPopup.pop_book2 .icon {margin-bottom: .5em;}
.layerPopup.pop_book2 .icon img {width: 28px; width: 1.458vw;}


/*회원아닐때*/
.layerPopup.pop_member {display: block; width: 560px; width: 29.16666vw; text-align: center; line-height: 1.5;}
.layerPopup.pop_member .inner {padding: 90px 40px 80px; padding: 4.6875vw 2.083vw 4.166vw;}
.layerPopup.pop_member .icon {margin-bottom: 1em;}
.layerPopup.pop_member .icon img {width: 52px; width: 2.708vw;}



/**/
.notx_img {position: absolute; left: 50%; top: 50%; transform:translate(-50%,-50%); text-align: center;}
.notx_img p {font-weight: 500; margin-top: 1em;}




/******************************************************************************************/

/*backdrop-filter not support*/
@supports (backdrop-filter: none) {
	
}


/**/
@supports (-ms-ime-align:auto) {
	html {overflow: hidden;	height: 100%; }
	body {overflow: auto;	height: 100%;	position: relative;	}
}
 
/*Ie 10/11*/
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
	html {overflow: hidden;	height: 100%; }
	body{overflow: auto; height: 100%; position: relative;}
}