@charset "utf-8";
/* 분관ㆍ본관 메인(프로그램, 신간도서) */

h3{font-family:'SBaggro'; font-size:clamp(2.5rem, 3vw, 3.6rem); color:#222; font-weight:normal;}
/* 공통 */
.libtab{display:flex; gap:2.7rem; margin-bottom:2.5rem; padding-right:4rem;}
.libtab ul{margin-top:.5rem;}
.libtab ul li{display:inline-block; margin:2px 0px}
.libtab ul li a{display:inline-block; text-align:center; padding:.8rem 1.8rem .6rem; min-width:80px; border-radius:100px; font-size:.9em; border:1px solid rgba(0,0,0,.1); text-decoration:none;}
.libtab ul li a[class^="ic_"]:before{vertical-align:middle; margin-right:.3rem; margin-top:-.1rem; content:''}
.libtab ul li a.ic_place:before{display:inline-block; width:13px; height:13px; -webkit-mask:url(/main/img/ic_libtab.svg) no-repeat 50% 50%;  mask:url(/main/img/ic_libtab.svg) no-repeat 50% 50%;  -webkit-mask-size:cover; mask-size:cover; background-color:#333}
.libtab ul li a.ic_hash:before{content:'#'; margin-right:.3rem;}
.libtab ul li.select a{background:var(--color); color:#fff;}
.libtab ul li.select a.ic_place:before{background-color:#fff;}
.libtabcon{display:none}
.libtabcon[id$='00']{display:block;}
/* #main .libtabcon[id$='00'] .btn_libmore{display:none;} */
.btn_libmore{position:absolute; right:0px; top:.5rem;}
.btn_libmore a.more{width:4rem; height:4rem; font-size:0px; color:#666; overflow:hidden}
.btn_libmore a.more{display:block; position: relative; }
.btn_libmore a.more span,
.btn_libmore a.more span:after,
.btn_libmore a.more span:before{display:block; content:''; position:absolute; top:-1px; width:6px; height:6px; border-radius:10px; border:1px solid #666; transition:all ease .5s}
.btn_libmore a.more span{top:50%; left:0px; right:0px; margin:auto; margin-top:-.3rem; }
.btn_libmore a.more span:after{left:.8rem;}
.btn_libmore a.more span:before{right:.8rem;}
.btn_libmore a.more:hover span,
.btn_libmore a.more:hover span:after,
.btn_libmore a.more:hover span:before{background:#333; border-color:#222; transform:rotateY(-180deg)}
.tag_place{font-size:.9em}
.songlim .tag_place{color:var(--songlim);}
.irum .tag_place{color:var(--irum);}
.shsmall .tag_place{color:var(--shsmall);}
.dream .tag_place{color:var(--childeng-txt);}
.kb .tag_place{color:var(--kb-txt);}

/* 프로그램 */
.program{display:flex; clear:both; border-top:3px solid #333; padding:3px 0px 5px; border-bottom:1px solid #ddd; overflow:hidden; }
.program .libtabcon{flex-grow:1; padding: 1rem 0px;}
.program .libtabcon ul.list>li+li{border-top:1px solid #ddd}
.program .libtabcon ul.list>li{display:flex; flex-wrap: wrap; justify-content:space-between; align-items:center; position:relative; padding:2rem 0px}
.program .libtabcon ul.list>li .name{width:57%; letter-spacing:-.12rem;; color: #333;}
.program .libtabcon ul.list>li .name a{display: block; margin-top:.5rem; font-size:1.9rem; text-overflow: ellipsis; white-space: nowrap; overflow:hidden}
.program .libtabcon ul.list ul{flex:0 0 40%; gap:.5px 4%; display:flex; flex-wrap:wrap}
.program .libtabcon ul.list ul>li{display:flex; font-size:.9em}
.program .libtabcon ul.list ul>li p{font-size:1em;}
.program .libtabcon ul.list ul>li p.a{margin-left:1rem; font-family:'SCDream-regular'}
.program [class^='state_']{font-size:.9em;}
.program [class^='state_']{font-size:.9em;}
.program .state_wait{color:#1479D6}
.program .state_ing{color:#DF1824}
.program .state_close{color:#888}
.program .btn_libmore{display:none}
.program .btn_libmore[data-value$='00']{display:block}

/* 신간도서 */
.newbook .libtabcon ul{display:flex; justify-content:space-between}
.newbook .libtabcon ul>li{width:15%; max-width:210px;}
.newbook .libtabcon ul>li p.img{padding:0px}
.newbook .libtabcon ul>li p.img a{display: block; max-height: 305px; min-height:150px; border-radius:5px; overflow:hidden}
.newbook .libtabcon ul>li p.img img{width:100%; border-radius:5px; overflow:hidden}
.newbook .libtabcon ul>li p.name{margin-top:1.2rem; color: #222; line-height: 1.4;}
.newbook .libtabcon ul>li p.info{margin-top:.8rem; line-height: 1.2}
.newbook .libtabcon .info{font-size:.85em; color:#666; font-weight:400;}
.newbook .libtabcon .info span+span{display:inline-block; display: none; position:relative; padding-left:1rem;}
.newbook .libtabcon .info span+span:before{position:absolute; content:'/'; left:0px; top:.2rem;  color: #999;}

/* 모바일회원증 */
.mbCard{display: none;}


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


@media screen and (min-width:821px){
	.program .libtab{flex-shrink:0; flex-direction:column; gap:0rem; padding-top:4rem; width:22.223%; padding-left:1rem;}
	.program .libtab ul{margin-top:2rem;}
	.program .libtab ul li{display:block; margin-top:.5rem;}
	:where(.program) .btn_libmore{position:static; margin-top:.5rem;}
	:where(.program) .btn_libmore a.more{display:inline-block; width:auto; height:auto; padding:.8rem 3rem; padding-left:5.2rem; font-size:.9em; background:var(--subbg, #e4e8ef); border-radius:50px}
	:where(.program) .btn_libmore a.more span{left:3.5rem; right:auto; font-size: 0px;}
	:where(.program) .btn_libmore a.more span,
	:where(.program) .btn_libmore a.more span:before,
	:where(.program) .btn_libmore a.more span:after{width:.4rem; height:.4rem; background:#666; }
	:where(.program) .btn_libmore a.more span:after{left:.6rem;}
	:where(.program) .btn_libmore a.more span:before{right:.6rem;}
}

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

	.libtab{display:block; padding-right:0px}
	.libtab ul{white-space:nowrap; overflow-x:auto; padding-bottom:.5rem}
	/* .libtab ul::-webkit-scrollbar{height:1px;}
	.libtab ul::-webkit-scrollbar-thumb{border-radius:2px; background:#fff;}
	.libtab ul::-webkit-scrollbar-thumb:hover{background:#333;} */
	.libtab ul>li{display:inline-block;}
	.libtab ul li a{min-width:unset;}
	.libtabcon ul::-webkit-scrollbar{height:3px;}
	.libtabcon ul::-webkit-scrollbar-thumb{border-radius:2px; background:#ddd;}
	.libtabcon ul::-webkit-scrollbar-thumb:hover{background:#333;}
	.btn_libmore{top: -.5rem;}
	.btn_libmore a.more span,
	.btn_libmore a.more span:after,
	.btn_libmore a.more span:before{background:#333}

	.program{flex-direction:column; border-top:0px}
	.program .libtabcon{padding: 0px;}
	.program .libtabcon ul.list>li{align-items:flex-start; gap:1rem; border-top:1px solid #ddd}
	.program .libtabcon ul.list>li .name>p{margin-top:.5rem}
	.program .libtabcon ul.list>li .name a{font-size:1.7rem;  white-space: normal}
	.program .libtabcon ul.list ul{flex-direction:column; flex-wrap:nowrap; width:40%; margin-top:2.5rem;}
	.program .libtabcon ul.list ul>li{margin-left:1px; color:#888;}
	.program .libtabcon ul.list ul>li:not(:nth-child(1),:nth-child(2)){display:none;}
	.program .libtabcon ul.list ul>li p.q{flex:0 0 25px;}
	.newbook .libtabcon ul{overflow-x:auto; gap:20px; padding-bottom:.5rem}
	.newbook .libtabcon ul>li{min-width:160px;}
	.newbook .libtabcon ul>li p.name a{font-size: 1.06em;}

	.mbCard{display: flex; flex-direction:column; justify-content: flex-end; position: fixed; left: 0; right:0; bottom: 0px; width: 100%; z-index: 1; transition:background ease .2s}
	.mbCard .btn_mbcard{position: relative; width: 100%; }
	.mbCard .btn_mbcard a{display: block;text-align: center; padding: 2rem; font-size: 1.12em;color: #fff; background:linear-gradient(90deg, var(--color-txt) 10%, var(--color) 70%, var(--color01) 100%); border-radius:1.5rem 1.5rem 0px 0px; box-shadow:0px 2px 10px rgba(0,0,0,.5)}
	.mbCard .btn_mbcard a span{position: relative; padding-right: 3rem}
	.mbCard .btn_mbcard a span:before,
	.mbCard .btn_mbcard a span:after{content: ''; position: absolute; right: 0px;}
	.mbCard .btn_mbcard a span:before{top:-.2rem; width: 2rem; height: 2rem; border-radius:50px; border:2px solid #fff}
	.mbCard .btn_mbcard a span:after{margin-top: .8rem; margin-right: .6rem; width: .8rem; height: .8rem; border:2px solid #fff; border-width:0px 2px 2px 0px; transform:rotate(225deg); box-sizing:border-box; transition:all ease .2s}
	.mbCard .memberCard{display: none; padding:4rem 3rem; background:linear-gradient(180deg, var(--color-txt) 0%, var(--color) 100%); box-shadow:0px 2px 10px rgba(0,0,0,.5)}
	.mbCard .card{padding:3rem 4rem; border-radius:1rem; background-color: #fff; background-size:200% 100%; box-shadow:0px 1px 5px var(--color-txt), 0px 2px 20px var(--color-txt)}
	#songlimLibrary .mbCard .card{background-image:url(/songlim/img/m_bg.png)}
	#irumLibrary .mbCard .card{background-image:url(/erum/img/m_bg.png)}
	#shsmallLibrary .mbCard .card{background-image:url(/shsmall/img/m_bg.png)}
	#childengLibrary .mbCard .card{background-image:url(/childeng/img/m_bg.png)}
	#kbLibrary .mbCard .card{background-image:url(/kb/img/m_bg.png)}
	.mbCard .card *{color: rgba(0,0,0,.7)}
	.mbCard .card .eng{font-size: .8em;}
	.mbCard .card .kor{font-family: 'SBaggro'; font-size: 1.5em; color: var(--color-txt);}
	.mbCard .card .barcode{text-align: center; padding: 2rem; margin: 1rem 0px; background: #fff;  border-radius:5px}
	.mbCard .card .barcode #code{margin: auto;}
	.mbCard .card .memname{color: #222; font-size: 1.05em;}
	.mbCard ul.bl03{margin: 2rem 0px;}
	.mbCard ul.bl03>li{position: relative; padding-left: 1.5rem; color: #fff; text-shadow:0px 0px 1px rgba(0,0,0,.2); font-weight: 300; letter-spacing: -0.05rem; word-break:keep-all}
	.mbCard ul.bl03>li:before{display: block; content: ''; width:.8rem; height: 1px; background: #fff; position: absolute; left: 0px; top: .8rem;}
	.mbCard.open{height: 100%; background:rgba(0,0,0,.6); }
	.mbCard.open .btn_mbcard a span:after{margin-top: .5rem; transform:rotate(45deg)}
	.mbcard_close{position: absolute; left: 0px; top: 0px; bottom: 0px; right: 0px; font-size: 0px; z-index: -1;}
	.mbCard~footer{margin-bottom: 60px;}
}