@charset "UTF-8"; 

@import url("../../ulib/css/317.css"); /* 검색 */

/********************************
 01 자료검색
 *******************************/
 
 /*검색목록 - 01자료검색, 03신착자료, 05대출베스트  */
.srch_infolist {}
.srch_infolist > ul {display:flex; flex-wrap:wrap; gap:20px;}
.srch_infolist .item {position:relative; padding:35px 30px 30px ; width:100%; transition:all 0.3s; border:1px solid #ddd; border-radius:15px;}
.srch_infolist .item:hover,
.srch_infolist .item:focus,
.srch_infolist .item:active {border-color:#246BB9; box-shadow:0 1px 10px 0 rgba(0,50,128,0.1);}

.srch_infolist .item a {display:flex; flex-direction:column; justify-content:space-between; /* height:100%; */ gap:10px;}
.srch_infolist .item a:hover,
.srch_infolist .item a:focus,
.srch_infolist .item a:active {text-decoration:none;}

.srch_infolist .item .up {display:flex; gap:30px;}
.srch_infolist .item .up .book_img {width:180px; height:244px; border:1px solid #ddd;}
.srch_infolist .item .up .book_img img {width:100%; height:100%;}

.srch_infolist .item .up .info_box {width:calc(100% - 210px); display:flex; flex-direction:column; gap:10px;}

.srch_infolist .item .up .info_box .book_title {}
.srch_infolist .item .up .info_box .book_title .tit {overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; margin-bottom:5px; font-size:2.4rem; font-weight:500; color:#222; line-height:1.2;}
.srch_infolist .item .up .info_box .book_title ul {display:flex; flex-wrap:wrap;}
.srch_infolist .item .up .info_box .book_title li {position:relative; padding:0 10px; font-size:1.5rem;}
.srch_infolist .item .up .info_box .book_title li:before {content:''; position:absolute; left:0; top:5px; width:1px; height:10px; background-color:#aaa;}
.srch_infolist .item .up .info_box .book_title li:first-child {padding-left:0;}
.srch_infolist .item .up .info_box .book_title li:first-child:before {display:none;}

.srch_infolist .item .up .info_box .book_data ul {display:flex; flex-wrap:wrap; gap:5px;}
.srch_infolist .item .up .info_box .book_data li:nth-child(odd) {width:calc(55% - 3px);}
.srch_infolist .item .up .info_box .book_data li:nth-child(even) {width:calc(45% - 3px);}
.srch_infolist .item .up .info_box .book_data li dl {display:flex; flex-wrap:wrap; align-items:center; align-items:flex-start;}
.srch_infolist .item .up .info_box .book_data li dt {font-size:1.6rem; padding:1px 10px; min-width:90px; text-align:center; border:1px solid #aaa; border-radius:15px;}
.srch_infolist .item .up .info_box .book_data li dd {padding-left:8px; width:calc(100% - 90px); font-size:1.8rem;}
.srch_infolist .item .up .info_box .book_data li dd.booking.cl01 {color:#138719; font-weight:600;}
.srch_infolist .item .up .info_box .book_data li dd.booking.cl02 {color:#C44116; font-weight:600;}
.srch_infolist .item .up .info_box .book_data li dd.booking .return {color:#333; font-weight:400; font-size:1.6rem;}

.srch_infolist .item .down {padding:15px; border-radius:10px; background-color:#f9f9f9;}
.srch_infolist .item .down span {overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical;}

/*전자책 태그*/
.elib_tag {position:absolute; top:0px; left:20px; padding:20px 15px; background-color:#624396; color:#fff; border-radius:0 0 20px 20px; font-size:1.4rem;}


/*관심도서담기-상세*/
.zzim_book {display:flex; position:relative; gap:10px;}
.zzim_book button {display:flex; align-items:center; padding:9px 15px; color:#bd2563; border:1px solid #bd2563; background-color:#fff; border-radius:30px; line-height:1; text-align:center;}
.zzim_book button.icon_apply {background-color:#1774ae; border:1px solid #1774ae; color:#fff; font-weight:500;}
.zzim_book button i {display:block; width:22px; height:22px;}
.zzim_book button i.icon_zzim {background:url(../images/sub/01/iconZzim.png) 0 0 no-repeat;}
.zzim_book button i.icon_apply {background:url(../images/minicon_ir.png) -48px -24px no-repeat;}
.zzim_book button span {margin-left:5px;}

/*관심도서담기, 보존서고자료 -목록*/
.zzim_list {justify-content:flex-end; margin-top:15px;}



/*04추천도서*/
.srch_infolist > ul.recommendList {justify-content:space-between;}
.srch_infolist > ul.recommendList li.item  {width:calc(50% - 10px);}
.srch_infolist > ul.recommendList li.item .up .info_box .book_data ul {flex-direction:column;}
.srch_infolist > ul.recommendList li.item .up .info_box .book_data li:nth-child(odd),
.srch_infolist > ul.recommendList li.item .up .info_box .book_data li:nth-child(even) {width:100%;}
.srch_infolist > ul.recommendList li.nolist {padding:20px; width:100%; border:1px solid #ddd; border-radius:20px; text-align:center;}


 /* media query */
@media screen and (max-width:1400px){
	/*04추천도서*/
	.srch_infolist > ul.recommendList li.item .up {flex-direction:column;}
	.srch_infolist > ul.recommendList li.item .up .book_img {margin:0 auto;}
	.srch_infolist > ul.recommendList li.item .up .info_box {width:100%;}
}

@media screen and (max-width:1240px){
	.srch_infolist .item .up .info_box .book_data li:nth-child(odd) {width:100%;}
	.srch_infolist .item .up .info_box .book_data li:nth-child(even) {width:100%;}
}

@media screen and (max-width:1024px){
}

@media screen and (max-width:920px){
	.srch_infolist .item {padding:30px 25px 25px;}
	.srch_infolist .item .up {gap:20px;}
	.srch_infolist .item .up .book_img {width:160px; height:217px;}

	.srch_infolist .item .up .info_box {width:calc(100% - 160px);}
	.srch_infolist .item .up .info_box .book_data li dd {font-size:1.6rem;}
}

@media screen and (max-width:767px){
	.srch_infolist .item .up {flex-direction:column;}

	.srch_infolist .item .up .book_img {margin:0 auto; width:200px; height:271px;}

	.srch_infolist .item .up .info_box {width:100%;}
	.srch_infolist .item .up .info_box .book_title .tit {font-size:2.2rem;}
	
	
	/*04추천도서*/
	.srch_infolist > ul.recommendList li.item  {width:100%;}
	.srch_infolist > ul.recommendList li.item .up .info_box .book_data li dl {flex-direction:unset;}
	.srch_infolist > ul.recommendList li.item .up .info_box .book_data li dd {width:calc(100% - 90px);}
}

@media screen and (max-width:640px){
	.srch_infolist .item {padding:25px 20px;}
	.srch_infolist .item .up .info_box .book_title .tit {font-size:2.0rem;}

	.srch_infolist .item .up .info_box .book_data li:nth-child(odd),
	.srch_infolist .item .up .info_box .book_data li:nth-child(even) {width:100%;}
	.srch_infolist .item .up .info_box .book_data li dt {font-size:1.4rem;}
	.srch_infolist .item .up .info_box .book_data li dd.booking .return {font-size:1.4rem;}
	
	
	/*관심도서담기-상세*/
	.zzim_book {justify-content:flex-end;}
}

@media screen and (max-width:480px){
	/*관심도서담기-상세*/
	.zzim_book {flex-direction:column;}
}


/*01자료검색 - 검색 상세페이지 */
.view_top {display:flex; gap:30px; margin-bottom:30px;}
.view_top .book_img {width:200px; height:271px; border:1px solid #ddd;}
.view_top .book_img img {width:100%; height:100%;}

.view_top .book_info {display:flex; flex-direction:column; justify-content:space-between; padding-top:15px; width:calc(100% - 230px);}
.view_top .book_info .book_title {display:flex; flex-direction:column; gap:30px;}
.view_top .book_info .book_title .tit {overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; font-size:2.8rem; font-family:'SBAggro'; color:#111; line-height:1.2;}
.view_top .book_info .book_title ul {display:flex; flex-wrap:wrap; flex-direction:column; gap:10px;}
.view_top .book_info .book_title ul li dl {display:flex; flex-wrap:wrap; align-items:center;}
.view_top .book_info .book_title ul li dt {min-width:85px; font-weight:500; color:#222;}
.view_top .book_info .book_title ul li dd {padding-left:8px; width:calc(100% - 85px); color:#555;}

.view_mid .txt {overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical;}

.view_btm .info_list {display:flex; flex-wrap:wrap; margin:20px 0; border-top:1px solid #444;}
.view_btm .info_list div {display:flex; justify-content:flex-start; align-items:stretch; border-bottom:1px solid #ddd;}
.view_btm .info_list div:nth-child(odd) {width:45%;}
.view_btm .info_list div:nth-child(even) {width:55%;}
.view_btm .info_list div dl {display:flex; align-items:stretch; width:100%;}
.view_btm .info_list div dt {padding:15px; width:100px; min-width:100px; display:flex; flex-direction:column; justify-content:center; align-items:center; background-color:#f7f7f7; color:#333; text-align:center;}
.view_btm .info_list div dd {padding:15px; width:calc(100% - 100px); display:flex; flex-wrap:wrap; justify-content:flex-start; align-items:center;}
.view_btm .info_list div dd button,
.view_btm .info_list div dd span.btn_del2 {padding:0 15px; line-height:38px;}
.view_btm .info_list div dd button.btn_print {margin-right:0; margin-left:10px;}
.view_btm .info_list div dd button.btn_rsrvt {border-color:#1673d4; background-color:#1673d4; color:#fff;}



  /* media query */
@media screen and (max-width:1200px){
}

@media screen and (max-width:1024px){
	/*.view_btm .info_list div dd {justify-content:space-between;}*/
}

@media screen and (max-width:920px){
	.view_top .book_info .book_title .tit {font-size:2.4rem;}
}

@media screen and (max-width:768px){
	.view_btm .info_list div:nth-child(odd),
	.view_btm .info_list div:nth-child(even) {width:100%;}
	.view_btm .info_list div dt {padding:10px; width:120px; min-width:120px;}
 	.view_btm .info_list div dd {padding:10px; width:calc(100% - 120px);}

}

@media screen and (max-width:640px){
	.view_top {flex-direction:column; gap:20px; margin-bottom:30px;}
	.view_top .book_img {margin:0 auto;}

	.view_top .book_info {padding-top:0; width:100%;}
	.view_top .book_info .book_title {gap:15px;}
	.view_top .book_info .book_title .tit {font-size:2.2rem;}
}

@media screen and (max-width:480px){
	.view_top {margin-bottom:20px;}
	.view_top .book_info .book_title {gap:10px;}
	.view_top .book_info .book_title .tit {font-size:2.0rem;}

	.view_btm .info_list div dt {width:100px; min-width:100px;}
 	.view_btm .info_list div dd {width:calc(100% - 100px); flex-direction:column; align-content:flex-start; align-items:flex-start;}
 	.view_btm .info_list div dd button,
 	.view_btm .info_list div dd span.btn_del2 {margin-right:0; line-height:33px;}
 	.view_btm .info_list div dd button.btn_print {margin-left:0; margin-top:5px;}
 	.view_btm .info_list div dd button.btn_rsrvt,
 	.view_btm .info_list div dd span.btn_del2 {margin-bottom:5px;}
}

@media screen and (max-width:360px){
 	.view_btm .info_list div dd button,
 	.view_btm .info_list div dd span.btn_del2 {width:100%;}
 	.view_btm .info_list div dd span.btn_del2 {text-align:center;}
}


/* 05희망도서신청 */
.hpbkAplct_list {/* position:relative; */ display:block; margin-top:10px; border-top:1px solid #222;}
.hpbkAplct_list:after {content:''; display:block; visibility:hidden; clear:both;}
.hpbkAplct_list > ul {display:block;}
.hpbkAplct_list > ul:after {content:''; display:block; visibility:hidden; clear:both;}
.hpbkAplct_list > ul > li {display:block; padding:10px 0; border-bottom:1px solid #ddd;}
.hpbkAplct_list > ul > li:after {content:''; display:block; visibility:hidden; clear:both;}
.hpbkAplct_list > ul > li.list_thead {background-color:#f7f7fc; border-bottom-color:#bbb; font-weight:500;}
.hpbkAplct_list > ul > li.list_thead li {text-align:center !important;}

.hpbkAplct_list .inner_list {position:relative; display:flex; flex-wrap:wrap; align-content:center; justify-content:space-around; align-items:center;}
.hpbkAplct_list .inner_list > li {padding:0 5px; text-align:center; line-height:1.3;}
.hpbkAplct_list .inner_list > li .btn_hope {margin-top:5px; padding:8px 5px; width:100%; font-size:1.5rem; line-height:inherit;}
.hpbkAplct_list .inner_list > li .btn_hope:first-child {margin-top:0;}

.hpbkAplct_list .inner_list > li:nth-child(1) {width:8%;}
.hpbkAplct_list .inner_list > li:nth-child(2) {width:25%; text-align:left;}
.hpbkAplct_list .inner_list > li:nth-child(3) {width:15%;}
.hpbkAplct_list .inner_list > li:nth-child(4) {width:13%;}
.hpbkAplct_list .inner_list > li:nth-child(5) {width:10%;}
.hpbkAplct_list .inner_list > li:nth-child(6) {width:19%;}
.hpbkAplct_list .inner_list > li:nth-child(7) {width:10%;}

.hpbkAplct_list .inner_list > li dt {overflow:hidden; position:absolute; top:-99999px; width:0; height:0; line-height:0; text-indent:-99999px;}
.hpbkAplct_list .inner_list > li dd {word-break:break-all;}



 /* media query */
@media screen and (max-width:1200px){
}

@media screen and (max-width:1024px){
}

@media screen and (max-width:920px){
}

@media screen and (max-width:860px){
	.hpbkAplct_list {position:relative;}
	.hpbkAplct_list > ul > li {margin-bottom:20px; padding:20px; border:1px solid #ddd;}
	.hpbkAplct_list > ul > li.list_thead {display:none;}
	.hpbkAplct_list .inner_list {align-items:stretch; justify-content:flex-end;}
	.hpbkAplct_list .inner_list > li {display:block; text-align:left; padding:0;}
	.hpbkAplct_list .inner_list > li:last-child {border-bottom:0;}

	.hpbkAplct_list .inner_list > li:nth-child(1) {display:none;}
	.hpbkAplct_list .inner_list > li:nth-child(2) {width:100%; font-size:2.0rem; font-weight:600;}
	.hpbkAplct_list .inner_list > li:nth-child(7) {width:150px;}

	.hpbkAplct_list .inner_list > li:nth-child(3),
	.hpbkAplct_list .inner_list > li:nth-child(4),
	.hpbkAplct_list .inner_list > li:nth-child(5),
	.hpbkAplct_list .inner_list > li:nth-child(6) {position:relative; width:50%; padding:0 0 10px 8px;}

	.hpbkAplct_list .inner_list > li:nth-child(3):before,
	.hpbkAplct_list .inner_list > li:nth-child(4):before,
	.hpbkAplct_list .inner_list > li:nth-child(5):before,
	.hpbkAplct_list .inner_list > li:nth-child(6):before {content:''; position:absolute; left:0; top:9px; width:4px; height:4px; background-color:#666; border-radius:5px;}

	.hpbkAplct_list .inner_list > li dl {display:flex; align-items:stretch;}
	.hpbkAplct_list .inner_list > li dt {overflow:unset; position:unset; top:unset; width:75px; height:unset; line-height:unset; text-indent:unset; text-align:left;}
	.hpbkAplct_list .inner_list > li dt.none_dt {overflow:hidden; position:absolute; top:-99999px; width:0; height:0; line-height:0; text-indent:-99999px;}

	.hpbkAplct_list .inner_list > li dd {width:calc(100% - 75px);}
	.hpbkAplct_list .inner_list > li:nth-child(1) dd {font-size:1.6rem; width:100%;}
	.hpbkAplct_list .inner_list > li:nth-child(2) dd {margin-bottom:10px; padding-bottom:10px; width:100%; border-bottom:1px dashed #ddd;}
	.hpbkAplct_list .inner_list > li:nth-child(7) dd {width:100%;}
	.hpbkAplct_list .inner_list > li dd .mini_txt {display:inline-block;}

	.hpbkAplct_list .inner_list > li .btn_myonln {margin-top:0; margin-left:10px; padding:8px 5px; width:20%;}
	.hpbkAplct_list .inner_list > li .btn_myonln:first-child {margin-left:0;}
}

@media screen and (max-width:767px){
	.hpbkAplct_list .inner_list > li:nth-child(2) {font-size:1.8rem;}
	.hpbkAplct_list .inner_list > li:nth-child(3):before,
	.hpbkAplct_list .inner_list > li:nth-child(4):before,
	.hpbkAplct_list .inner_list > li:nth-child(5):before,
	.hpbkAplct_list .inner_list > li:nth-child(6):before {top:6px;}
}

@media screen and (max-width:640px){
}

@media screen and (max-width:480px){
	.hpbkAplct_list .inner_list > li:nth-child(3),
	.hpbkAplct_list .inner_list > li:nth-child(4),
	.hpbkAplct_list .inner_list > li:nth-child(5),
	.hpbkAplct_list .inner_list > li:nth-child(6) {width:100%;}
	.hpbkAplct_list .inner_list > li:nth-child(7) {padding-top:10px;}
}

/* 희망도서신청 - 레이어팝업 */
.bokHp_layer {display:none;}
.layer_inner {position:absolute; left:50%; top:5%; width:800px; height:auto; margin-left:-400px; padding:20px; background-color:#eff3f6; border:4px solid #167fbd; border-radius:15px; text-align:center; z-index:150;}

.layer_inner .tit {margin:10px 0 20px; font-size:2.4rem; font-weight:600;}
 
.layer_list {}
.layer_list .check_box {display:flex; flex-direction:column; align-items:flex-start; padding:20px; margin-bottom:20px; background-color:#fff; border-radius:12px;}
.layer_list .check_head {margin-bottom:5px; padding-bottom:5px; width:100%; border-bottom:1px dashed #ddd; text-align:left;}
.layer_list .check_box p.tip {text-align:left;}
.layer_list .check_box .radio_check {margin-right:10px;}
.layer_list > ul {display:block; padding:20px; background-color:#fff; border-radius:12px;}
.layer_list > ul:after {content:''; display:block; visibility:hidden; clear:both;}
.layer_list > ul > li {display:block; text-align:left;}
.layer_list > ul > li:after {content:''; display:block; visibility:hidden; clear:both;}
.layer_list > ul > li dl {display:flex; flex-wrap:wrap; align-items:stretch;}
.layer_list > ul > li dl:after {content:''; display:block; visibility:hidden; clear:both;}
.layer_list > ul > li dt {position:relative; padding:5px; width:85px;}
.layer_list > ul > li dt:before {content:''; position:absolute; right:0; top:12px; width:1px; height:14px; background-color:#aaa;}
.layer_list > ul > li dd {padding:5px 5px 5px 15px; width:calc(100% - 85px);}
.layer_list > ul > li dd textarea {min-height:100px; border-radius:8px;}

.layer_inner .layer_btn {margin-top:20px;}
.layer_inner .layer_btn .btn_close {background-color:#fff;}

.layer_bg {display:block; position:fixed; left:0; right:0; top:0; bottom:0; background-color:rgba(0,0,0,0.5); z-index:100;}


/* media query */
@media screen and (max-width:1200px){
	.layer_inner {margin-left:-350px; width:700px;}
}

@media screen and (max-width:1024px){
}

@media screen and (max-width:860px){
}

@media screen and (max-width:800px){
	.layer_inner {left:0; margin-left:0; width:100%;}
}

@media screen and (max-width:767px){
	.layer_inner .tit {margin:5px 0 15px; font-size:2.2rem;}

	.layer_list > ul >li dt {width:75px;}
	.layer_list > ul >li dt:before {top:8px;}
	.layer_list > ul >li dd {width:calc(100% - 75px);}
}

@media screen and (max-width:640px){
	.layer_list > ul > li:last-child dt,
	.layer_list > ul > li:last-child dd {width:100%;}
	.layer_list > ul > li:last-child dt:before {display:none;}
	.layer_list > ul > li:last-child dd {padding-left:5px;}
}

@media screen and (max-width:480px){
	.layer_list > ul {padding:10px;}
	.layer_list > ul >li dd {word-break:break-all;}
}


/* 04 도서대출베스트 */
.srch_infolist.best_box .item {position:relative;}
.srch_infolist.best_box .item .best_num {position:absolute; left:17px; top:-7px; width:50px; height:50px; line-height:50px; border-radius:7px 7px 30px 30px; text-align:center; background-color:#f15b4e; color:#fff; font-family:'SBAggro';}



@media screen and (max-width:600px){
	.linkBox {margin-bottom:20px; justify-content: flex-start;}
	.linkBox .txtArea {position:relative;; left:unset; margin-bottom:10px; width:100%;}
}
 


/********************************
 02 이용안내
 *******************************/
 
 /* 05 사이트맵 */
.siteMap {display:flex; flex-wrap:wrap; gap:40px;}
.sitemap_box {display:flex; flex-wrap:wrap; flex-direction:column; width:calc(33.3333% - 27px); border:1px solid #ddd; border-radius:15px;}
.sitemap_box .tit {padding:13px 0 7px; font-family:'SBAggro'; font-size:2.0rem; text-align:center; color:#fff; background-color:#3c62c0; border-radius:15px 15px 0 0;}
.sitemap_box .sitemap_list {padding:15px 20px;}
.sitemap_box .sitemap_list > li {position:relative; padding-left:10px;}
.sitemap_box .sitemap_list > li:before {content:''; position:absolute; left:0; top:10px; width:3px; height:3px; background:#666;}
.sitemap_box .sitemap_list > li > a {}
.sitemap_box .sitemap_list > li:hover > a,
.sitemap_box .sitemap_list > li:focus > a,
.sitemap_box .sitemap_list > li:active > a {}


.list_inner {}
.list_inner li {}
.list_inner li a {}


 /* media query */
@media screen and (max-width:1600px){
}

@media screen and (max-width:1520px){
}

@media screen and (max-width:1340px){
	.siteMap {gap:30px;}
	.sitemap_box {width:calc(33.3333% - 20px);}
}

@media screen and (max-width:1200px){
}

@media screen and (max-width:920px){ 
}

@media screen and (max-width:767px){
	.siteMap {gap:20px;}
	.sitemap_box .tit {font-size:1.8rem;}
	.sitemap_box {width:calc(50% - 10px);}
}

@media screen and (max-width:640px){
}

@media screen and (max-width:480px){
	.sitemap_box {width:100%;}
}





/********************************
 06 회원
 *******************************/

/*01로그인, 05아이디,비밀번호 찾기 결과화면*/
.loginBox {border:1px solid #ddd; border-radius:20px; text-align:center;}
.loginBox .login_inner {margin:0 auto; padding:10% 25%;}
/* .loginBox .login_inner .iconbox {display:block; margin:0 auto 50px; width:380px; height:47px; background:url(../images/top_logo.png) 0 0 no-repeat; background-size:100%;} 로고출력*/
.loginBox .login_inner .tbox {margin:10px 0 20px;}
.loginBox .login_inner .tbox .tit {font-size:3.5rem; font-family:'SBAggro'; color:#3c62c0; line-height:1.4;}


.idpw_box .login {display:flex; justify-content:space-between; flex-wrap:wrap; position:relative;}
.idpw_box .login + .login {margin-top:20px;}
.idpw_box .login label,
.idpw_box .login .tit {margin-bottom:5px; width:100%; color:#222; font-weight:600;}
.idpw_box .login .txt {position:relative; padding:0 10px; width:calc(100% - 60px); border:1px solid #ddd; background-color:#fff; border-radius:0 8px 8px 0; line-height:58px;}
.idpw_box .login input.bd_input {position:relative; padding:0 10px; width:100%; height:60px; border-radius:8px; line-height:60px;}

.idpw_box .login input:-webkit-autofill {-webkit-box-shadow:0 0 0 1000px white inset; box-shadow: 0 0 0 1000px white inset;}

.idpw_box button {margin-top:30px; padding:5px; width:100%; border-radius:10px; line-height:50px; background-color:#333; border:none; color:#fff;}

.idpw_box .find_box {display:flex; justify-content:space-between; margin-top:20px;}
.idpw_box .find_box a {color:#333;}

/*비밀번호 표시*/
.idpw_box .login input.bd_input.input_pw {padding-right:60px;}
.idpw_box .login button.btn_view {position:absolute; right:1px; top:1px; width:58px; height:58px; margin-top:0; padding:0; line-height:unset; background-color:#fff;}
.idpw_box .login button.btn_view .icon_view {display:block; margin:0 auto; width:20px; height:20px; background:url(../images/sub/icon_seeon.png) 0 0 no-repeat; background-size:100%;}
.idpw_box .login button.btn_view.hide .icon_view {background-image:url(../images/sub/icon_seeoff.png);}




/*아이디,비밀번호 찾기 결과*/
.result_box {margin-top:20px; padding:5% 10px;}
.result_box strong {font-size:2.0rem; color:#e1416c;}



/* media query */
@media screen and (max-width:1600px){
}

@media screen and (max-width:1520px){
}

@media screen and (max-width:1320px){
	.loginBox .login_inner .tbox .tit {font-size:3.0rem;}
}

@media screen and (max-width:1200px){
	.loginBox .login_inner {padding:10% 25%;}
}

@media screen and (max-width:1024px){
	.loginBox .login_inner {padding:10% 20%;}
	.loginBox .login_inner .iconbox {margin:0 auto 30px;}
}

@media screen and (max-width:920px){ 
	.loginBox .login_inner .tbox .tit {font-size:2.6rem;}
}

@media screen and (max-width:767px){
	.loginBox .login_inner {padding:10% 15%;}
}

@media screen and (max-width:640px){
	.loginBox .login_inner {padding:10%;}
	.loginBox .login_inner .iconbox {margin:0 auto 20px; width:320px; height:40px;}
	.loginBox .login_inner .tbox .tit {font-size:2.2rem;}
	
	.idpw_box .login input.bd_input {height:45px; line-height:45px;}
	
	.idpw_box button {margin-top:20px; padding:0 5px; line-height:45px;}
	
	/*비밀번호 표시*/
	.idpw_box .login input.bd_input.input_pw {padding-right:45px;}
	.idpw_box .login button.btn_view {width:43px; height:43px;}
	.idpw_box .login button.btn_view .icon_view {width:15px; height:15px;}
}

@media screen and (max-width:480px){
	.loginBox .login_inner {padding:11% 8%;}
	.loginBox .login_inner .iconbox {width:280px; height:35px;}
	.loginBox .login_inner .tbox .tit {font-size:2.0rem;}
}



/* 아이디/비밀번호찾기 */
.idpw_search {display:flex; gap:40px;}
.idpw_search .idpw_Srhbox {padding:7% 5%; width:50%; border:1px solid #ddd; border-radius:20px; text-align:center;}
.idpw_search .idpw_Srhbox .icon {display:block; margin:0 auto 20px; width:140px; height:140px; background-color:#e6eeff; border-radius:50%; background-position:0 0; background-repeat:no-repeat; background-size:100%;}
.idpw_search .idpw_Srhbox .icon.srhId {background-image:url(../images/sub/06/icon_id.png);}
.idpw_search .idpw_Srhbox .icon.srhPw {background-image:url(../images/sub/06/icon_pw.png);}
.idpw_search .idpw_Srhbox .bd_btn {margin-top:10px; padding:5px; width:70%; color:#fff; border:none;}
.idpw_search .idpw_Srhbox .bd_btn.btn_srhId {background-color:#1d64b1;}
.idpw_search .idpw_Srhbox .bd_btn.btn_srhPw {background-color:#268553;}





/* media query */
@media screen and (max-width:1520px){
}

@media screen and (max-width:1200px){
	.idpw_search .idpw_Srhbox .icon {width:120px; height:120px;}
}

@media screen and (max-width:1024px){
}

@media screen and (max-width:920px){ 
	.idpw_search .idpw_Srhbox .icon {width:100px; height:100px;}
}

@media screen and (max-width:767px){
	.idpw_search {flex-direction:column; gap:25px;}
	.idpw_search .idpw_Srhbox {padding:10% 5%; width:100%;}
}

@media screen and (max-width:640px){
}




/* 02회원가입 */
.certifyBox {}
.certifyBox {border:1px solid #ddd; border-radius:20px; text-align:center;}
.certifyBox .login_inner {margin:0 auto; padding:10% 30%;}
.certifyBox .login_inner .tbox {margin:10px 0 20px;}
.certifyBox .login_inner .tbox .tit {font-size:3.5rem; font-family:'SBAggro'; color:#246bb9; line-height:1.4;}

.certify_box .certify_icon {display:block; margin:0 auto; width:500px; height:401px; background:url(../images/sub/06/certify_icon.png) center center no-repeat; background-size:100%;}
.certify_box button {margin-top:30px; padding:5px; width:100%; border-radius:10px; line-height:50px; background-color:#333; border:none; color:#fff;}

/*다음 버튼*/
.citizen_btnbox {margin-top:30px; padding-top:30px; text-align:center; border-top:1px dashed #ddd;}
.citizen_btnbox .btn_config {min-width:25%;}


/* media query */
@media screen and (max-width:1800px){
}

@media screen and (max-width:1320px){
	.certifyBox .login_inner .tbox .tit {font-size:3.0rem;}
}

@media screen and (max-width:1200px){
	.certifyBox .login_inner {padding:10% 25%;}
}

@media screen and (max-width:1024px){
	.certifyBox .login_inner {padding:10% 20%;}
}

@media screen and (max-width:920px){
	.certifyBox .login_inner .tbox .tit {font-size:2.6rem;}
	.certify_box .certify_icon {width:420px; height:337px;}
}

@media screen and (max-width:767px){
	.certifyBox .login_inner {padding:10% 15%;}
}

@media screen and (max-width:640px){
	.certifyBox .login_inner {padding:10%;}
	.certifyBox .login_inner .tbox .tit {font-size:2.2rem;}
	.certify_box .certify_icon {width:320px; height:257px;}
}

@media screen and (max-width:480px){
	.certifyBox .login_inner {padding:13% 7% 11%;}
	.certifyBox .login_inner .tbox .tit {font-size:2.0rem;}
	.certify_box .certify_icon {width:280px; height:225px;}
	
	
	.citizen_btnbox {margin-top:35px; padding-top:25px;}
	.citizen_btnbox .btn_config {min-width:50%;}
}


/********************************
 04 책방소개
 *******************************/
/* 01책방안내 */
.introBox {position:relative; display:flex; padding:5%; background:url(../images/main/main_img.jpg) 0 0 no-repeat; border-radius:10px;}
.introBox:before {content:''; position:absolute; right:0; bottom:0; width:400px; height:267px; background:url(../images/sub/04/img_intro.png) 0 0 no-repeat; background-size:100%;}
.introBox .intro_tbox {padding:15% 11%; background:rgba(255,255,255,0.9); border-radius:30px;}
.introBox .intro_tbox p {font-family:'SBAggro'; font-size:2.4rem;}
.introBox .intro_tbox p + p {margin-top:20px;}

/* media query */
@media screen and (max-width:1600px){
	.introBox:before {width:350px; height:234px;}
}

@media screen and (max-width:1024px){
	.introBox:before {width:300px; height:200px;}
	.introBox .intro_tbox {padding:10% 10% 15%;}
}

@media screen and (max-width:920px){
	.introBox .intro_tbox {padding:8% 8% 20%;}
	.introBox .intro_tbox p {font-size:2.0rem;}
}

@media screen and (max-width:767px){
	.introBox:before {width:250px; height:167px;}
	.introBox .intro_tbox {padding:5% 5% 120px;}
}

@media screen and (max-width:640px){
	.introBox .intro_tbox {padding:30px 30px 120px;}
}



/********************************
 05 My Library
 *******************************/

/* 01모바일 회원증 */
.loginBox.barcod_box {padding:10% 15%; background:url(../images/img_joinBg.png) top right no-repeat; background-color:#303757; border:none;}
.barcode_wrap {/* overflow:hidden; */ position:relative; margin:0 auto; max-width:700px; background-color:#edeffe; border-radius:30px; box-shadow:2px 4px 9px rgba(85,108,144,0.12);}
.top_box p {display:block; padding:20px; background-color:#3c62c0; color:#fff; text-align:center; font-size:2.4rem; border-radius:30px 30px 0 0;}
.top_box .stop {position:absolute; top:10px; left:20px; display:flex; flex-direction:column; justify-content:center; align-items:center; width:150px; height:70px; background-color:#f24331; color:#fff; border-radius:10px; font-size:1.6rem; z-index:1;}

.member_cardbox {position:relative; padding:30px 30px 30px 250px;}
.member_cardbox:before {content:''; display:block; position:absolute; top:50%; margin-top:-22px; left:30px; width:200px; height:45px; background:url(../images/logo.png) center no-repeat; background-size:100%;}

.member_cardbox .body_box {padding:20px 0;}
.member_cardbox .body_box ul {padding:0 30px;}
.member_cardbox .body_box li {padding-top:5px;}
.member_cardbox .body_box li:first-child {padding-top:0;}
.member_cardbox .body_box li dl {display:flex; gap:10px;}
.member_cardbox .body_box li dl dt span.spacing {letter-spacing:33px;}
.member_cardbox .body_box .barcode_out {margin:10px 30px; padding:15px 0; background-color:#fff;}
.member_cardbox .body_box .barcode {margin:0 auto; text-align:center;}
.member_cardbox .body_box .out_date {padding:0 30px; text-align:left; font-weight:500;}

.loan_state {display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px; padding:15px 35px 35px 35px; border-top:1px dashed #ddd;}
.loan_state dl {font-size:1.6rem; text-align:left;}
.loan_state dl dt {color:#333;}
.loan_state dl dd {position:relative; padding-left:10px;}
.loan_state dl dd:before {content:''; display:inline-block; position:absolute; top:9px; left:0; border-radius:3px; width:5px; height:5px; background-color:#ccc;}



/* media query */
@media screen and (max-width:1200px){
	.loginBox.barcod_box {padding:10%;}
	.member_cardbox {padding:30px 20px 30px 200px;}
	.member_cardbox:before {left:40px; margin-top:-17px; width:150px; height:34px;}
}

@media screen and (max-width:1024px){
}

@media screen and (max-width:920px){
	.member_cardbox .body_box li dl dt span.spacing {letter-spacing:31px;}
}

@media screen and (max-width:767px){
	.top_box p {font-size:2.0rem;}
	.top_box .stop {left:-10px; width:130px; font-size:1.5rem;}
	.member_cardbox {padding:30px 20px 30px 180px;}
	.member_cardbox:before {left:35px; width:120px; height:27px; margin-top:-34px; background-size:100%;}
	.member_cardbox .body_box {padding:15px 0;}
	.member_cardbox .body_box .barcode_out {margin:10px 20px;}
	.member_cardbox .body_box ul {padding:0 20px;}
}

@media screen and (max-width:650px){
	.loginBox.barcod_box {padding:5%;}
	.member_cardbox {padding:35px;}
	.member_cardbox:before {position:static; margin:0 auto 20px; width:214px; height:48px;}
	.member_cardbox .body_box ul {padding:0 10px;}
	.loan_state {padding:15px 30px 35px 30px;}
	.loan_state dl {font-size:1.5rem;}
}

@media screen and (max-width:640px){
	.member_cardbox .body_box li dl dt span.spacing {letter-spacing:26.5px;}
}

@media screen and (max-width:480px){
	.top_box .stop {left:0; top:50px;}
	.member_cardbox {padding:30px 10px;}
	.loginBox.barcod_box {padding:10% 10px;}
	.member_cardbox .body_box .barcode_out {margin:10px 5px; padding:10px 0;}
	.loan_state {padding:15px 20px 35px 20px;}
}



/* 02도서대출 및 예약현황 */
.tbl_bd_list.tb_mypage {text-align:center;}
.tbl_bd_list.tb_mypage tbody {font-size:1.6rem;}
.tbl_bd_list.tb_mypage tbody td .th {display:none;}
.tbl_bd_list.tb_mypage tbody td:first-child {text-align:left;}
.tbl_bd_list.tb_mypage tbody td:first-child,
.tbl_bd_list.tb_mypage tbody td:nth-child(2),
.tbl_bd_list.tb_mypage.tb_bookloan tbody td:nth-child(3) {word-break:break-all;}
.tbl_bd_list.tb_mypage tbody td .bd_btn {padding:5px 7px; line-height:inherit; word-break:break-all; font-size:1.3rem;}


/*05희망도서신청조회*/
.tbl_bd_list.tb_mypage.hope tbody td:nth-child(5) {word-break:break-all;}




 /* media query */
@media screen and (max-width:1200px){
	.tbl_bd_list.tb_mypage thead {font-size:1.5rem;}
	.tbl_bd_list.tb_mypage tbody {font-size:1.4rem;}
}

@media screen and (max-width:920px){
	.tbl_bd_list.tb_mypage {text-align:left;}
	.tbl_bd_list.tb_mypage colgroup,
	.tbl_bd_list.tb_mypage thead {display:none;}
	.tbl_bd_list.tb_mypage tbody tr {display:flex; flex-wrap:wrap; margin-bottom:20px; border-top:2px solid #446db5;}
	.tbl_bd_list.tb_mypage tbody tr:first-child {border-top:none;}
	.tbl_bd_list.tb_mypage tbody td {position:relative; padding-left:130px; width:100%; min-height:19px;}
	.tbl_bd_list.tb_mypage tbody td:first-child {padding-left:5px; font-size:2.0rem; font-weight:600;}
	.tbl_bd_list.tb_mypage tbody td.bigData_td {padding:15px 5px 15px 130px;}
	.tbl_bd_list.tb_mypage tbody td .th {display:block; position:absolute; left:0; top:0; padding:14px 10px 5px; width:110px; height:100%; background-color:#f6faff; border-right:1px solid #ddd;}
	.tbl_bd_list.tb_mypage tbody td .th.bigData_th {line-height:1.2;}


	/*상호대차 - 테이블*/
	.tbl_bd_list.tb_mypage.mutual tbody td {padding-left:175px;}
	.tbl_bd_list.tb_mypage.mutual tbody td .th {width:155px;}
	.tbl_bd_list.tb_mypage.mutual tbody td:first-child {padding-left:0;}
	.tbl_bd_list.tb_mypage.mutual tbody td:nth-child(5) {line-height:45px;}
	.tbl_bd_list.tb_mypage.mutual tbody td:nth-child(5) .th {line-height:1.2;}

}
@media screen and (max-width:767px){
	.tbl_bd_list.tb_mypage tbody td {padding-left:110px;}
	.tbl_bd_list.tb_mypage tbody td:first-child {font-size:1.8rem;}
	.tbl_bd_list.tb_mypage tbody td.bigData_td {padding:12px 5px 12px 110px;}
	.tbl_bd_list.tb_mypage tbody td .th {width:95px;}
	.tbl_bd_list.tb_mypage tbody td .bd_btn.btn_bigdata {font-size:1.4rem;}
	


	/*상호대차 - 테이블*/
	.tbl_bd_list.tb_mypage.mutual tbody td {padding-left:140px;}
	.tbl_bd_list.tb_mypage.mutual tbody td .th {width:130px;}
	.tbl_bd_list.tb_mypage.mutual tbody td:nth-child(5) {line-height:45px;}
}

@media screen and (max-width:640px){
}

@media screen and (max-width:480px){
}



/*06아이디,비밀번호 찾기 결과*/
.result_box {margin-top:20px; padding:5% 10px;}
.result_box strong {font-size:2.0rem; color:#246bb9;}


/* 07회원탈퇴 */
.outuser_infoList {margin:0 aut0; width:70%;}
.outuser_infoList li {}
.outuser_infoList li dl {display:flex; flex-wrap:nowrap; justify-content:flex-start; gap:10px;}
.outuser_infoList li dl dt {}
.outuser_infoList li dl dt span.spacing {letter-spacing: 31px;}
.outuser_infoList li dl dd {}


 /* media query */
@media screen and (max-width:767px){
	.outuser_infoList {width:100%; padding:0 20px;}
	.outuser_infoList li dl dt span.spacing {letter-spacing:28px;}
}


@media screen and (max-width:640px){
}

@media screen and (max-width:480px){
}


@media screen and (max-width:360px){
}



/********************************
 06 도서관회원
 *******************************/

/* 02통합회원가입 */
.loginBox.join_intro .login_inner {padding:10% 15%;}

.join_intro .join_stepList {display:flex; gap:50px;}
.join_intro .join_stepList li {padding:7% 5%; width:50%; background-color:#eceeff; border-radius:20px; text-align:center;}
.join_intro .join_stepList li .icon {display:block; margin:0 auto 20px; width:140px; height:140px; background-color:#fff; border-radius:50%; background-position:0 0; background-repeat:no-repeat; background-size:100%;}
.join_intro .join_stepList li .icon.icon01 {background-image:url(../images/sub/06/icon_AD.png);}
.join_intro .join_stepList li .icon.icon02 {background-image:url(../images/sub/06/icon_CR.png);}
.join_intro .join_stepList li .bd_btn {margin-top:10px; padding:5px; width:70%; color:#fff; border:none;}
.join_intro .join_stepList li .bd_btn.btn_AD {background-color:#1d64b1;}
.join_intro .join_stepList li .bd_btn.btn_CR {background-color:#268553;}


/* media query */
@media screen and (max-width:1800px){
}

@media screen and (max-width:1520px){
}

@media screen and (max-width:1200px){
	.join_intro .join_stepList li .icon {width:120px; height:120px;}
}

@media screen and (max-width:1024px){
}

@media screen and (max-width:920px){ 
	.join_intro .join_stepList li .icon {width:100px; height:100px;}
}

@media screen and (max-width:767px){
	.join_intro .join_stepList {flex-direction:column; gap:25px;}
	.join_intro .join_stepList li {padding:10% 5%; width:100%;}
}





/*회원가입 작성폼*/
.join_form {}
.join_form .join_info {display:flex; flex-wrap:wrap; border-top:2px solid #222;}
.join_form .join_info div {width:50%; display:flex; justify-content:flex-start; align-items:stretch; border-bottom:1px solid #ddd;}
.join_form .join_info div dl {display:flex; align-items:stretch; width:100%;}
.join_form .join_info div dt {padding:15px; width:150px; min-width:150px; display:flex; flex-direction:column; justify-content:center; align-items:center; background-color:#f9f7fc; color:#333; text-align:center;}
.join_form .join_info div dd {padding:15px; width:calc(100% - 150px); display:flex; flex-wrap:wrap; justify-content:flex-start; align-items:center;}

.join_form .join_info div dd select {position:relative; padding:0 30px 0 12px; min-width:160px; background:#fbfbfb url(../images/select_arrow.png) 90% center no-repeat; border-radius:8px;}
.join_form .join_info div dd input {border-radius:8px; background-color:#fbfbfb;}

.join_form .join_info div dd.id_tbox {justify-content:space-between;}
.join_form .join_info div dd.id_tbox input {width:calc(100% - 160px);}

.join_form .join_info div dd.addr_tbox {justify-content:space-between;}
.join_form .join_info div dd.addr_tbox input {width:calc(100% - 110px);}

.join_form .join_info div dd.addr_tbox2 {align-items:flex-start; flex-direction:column;}
.join_form .join_info div dd.addr_tbox2 span {display:flex; flex-wrap:wrap; gap:10px; width:100%;}
.join_form .join_info div dd.addr_tbox2 span.ip_box1 input {width:150px;}

.join_form .join_info div dd.addr_tbox2 span.ip_box2 {margin-top:10px;}
.join_form .join_info div dd.addr_tbox2 span.ip_box2 input {width:100%;}

/* .view_info div안에 dl리스트 여러개일때 */
.join_form .join_info div.sch_info > dl > dd {padding:0;}
.join_form .join_info div.sch_info dd ul {width:100%; display:flex; flex-wrap:wrap; align-items:center;}
.join_form .join_info div.sch_info dd ul li {width:50%; border-top:1px solid #ddd;}
.join_form .join_info div.sch_info dd ul li:nth-child(-n+2) {border-top:0;}
.join_form .join_info div.sch_info dd ul li dt {width:100px; min-width:100px; background-color:#fbfbfb;}
.join_form .join_info div.sch_info dd ul li dd {width:calc(100% - 100px);}

.join_form .join_info div.sch_info dd ul li dl.h_75 {min-height:75px;}

  /* media query */
@media screen and (max-width:1200px){
	.join_form .join_info div.sch_info dd ul li dl.h_75 {min-height:85px;}
}

@media screen and (max-width:1024px){
}

@media screen and (max-width:920px){
}

@media screen and (max-width:800px){
	.join_form .join_info div.sch_info dd ul li dl.h_75 {min-height:110px;}
}

@media screen and (max-width:767px){
	.join_form .view_title {font-size:2.4rem;}

	.join_form .join_info div {width:100%;}
	.join_form .join_info div dt {padding:10px; width:120px; min-width:120px;}
 	.join_form .join_info div dd {padding:10px; width:calc(100% - 120px);}

	.join_form .join_info div.sch_info > dl {display:block; width:100%;}
	.join_form .join_info div.sch_info > dl > dt {width:100%; min-width:unset;}
	.join_form .join_info div.sch_info > dl > dd {width:100%;}
	.join_form .join_info div dd.id_tbox input {width:calc(100% - 145px);}

	.join_form .join_info div.sch_info dd ul li dl.h_75 {min-height:65px;}

}

@media screen and (max-width:640px){
	.join_form .join_info div.sch_info dd ul li dl.h_75 {min-height:92px;}
}

@media screen and (max-width:480px){
	.join_form .view_title {font-size:2.2rem;}

	.join_form .join_info div dt {width:100px; min-width:100px;}
 	.join_form .join_info div dd {width:calc(100% - 100px);}

	.join_form .join_info div.sch_info dd ul li {width:100%;}
	.join_form .join_info div.sch_info dd ul li:nth-child(2) {border-top:1px solid #ddd;}

	.join_form .join_info div dd select,
	.join_form .join_info div dd button {width:100%;}
	.join_form .join_info div dd.id_tbox input {width:100%; margin-bottom:10px;}
	.join_form .join_info div dd.addr_tbox input {width:100%; margin-bottom:10px;}

	.join_form .join_info div.sch_info dd ul li dl.h_75 {min-height:inherit;}

	.join_form .join_info div dd.addr_tbox2 span {justify-content:center;}
	.join_form .join_info div dd.addr_tbox2 span.ip_box1 input {width:100%;}
}