@charset "utf-8";
@import url("../common/default.css?v=20240813");
@import url("../common/common.css?v=20240813");
@import url("../common/button.css?v=20240813");
@import url("../common/board.css?v=20240813");
@import url("../common/layoutCommon.css?v=20240813");
@import url("../common/contents.css?v=20240813");
@import url("layout.css?v=20240813");
@import url("../../booksearch/css/new_search.css?v=20240813");
/* 인사말 */
.greetingWrap .innerBox { right: 9.259259%; text-align: right; left: auto;}
.greeting_txt p:nth-of-type(1) {color: #d12567;}
/* 책드림서비스 */
.summaryDesc .icobookDream::before {content:''; left: 25px; top: 0; background: url(/include/image/small/content/ico_bookDream.png) no-repeat center center;}
/* 이동도서관 */
.summaryDesc .icomovelib::before {content:''; left: 2px; top: 0; background: url(/include/image/small/content/ico_movelib.png) no-repeat center center;}
/* 독서동아리 */
.readingList li{border-top: 2px solid #666}
.readingList li .top {padding: 16px 0 16px 20px; border-bottom: 1px solid #ddd}
.readingList li .desc {padding: 20px 0 50px 20px}
.readingList li .top .lib {border: 1px solid #228ed4; border-radius: 15px; width: 100px; display: inline-block; text-align: center; color: #228ed4; margin-right: 10px; font-size: 0.9411764705882353em}
.readingList li .top .tit {font-weight: 600; font-size: 1.0588235294117647em}
.readingList li .desc strong {font-weight: 600}
/* 작은도서관 소개 */
.smBox a {display: block; padding: 30px ; border: 1px solid #ddd; }
.smBox a:hover {border: 1px solid #228ed4; }
.smBox + .smBox {margin-top: 30px}
.smBox .title {font-size: 1.4705882352941178em; font-weight: 600; color: #333}
.smBox strong {width: 105px; display: inline-flex; padding-left: 45px; position: relative; margin-right: 20px; font-weight: 600; color: #333; justify-content: space-between;}
.smBox strong::before {content:''; display: block; position: absolute; left: 0; top: 0; width: 30px; height: 30px; border-radius: 50%;}
.smBox .address::before {background: #eff9fa url(/include/image/small/content/ico_address.png) no-repeat center center;}
.smBox .phone::before {background: #eff9fa url(/include/image/small/content/ico_phone.png) no-repeat center center;}
.smBox .time::before {background: #eff9fa url(/include/image/small/content/ico_time.png) no-repeat center center;}
.smBox .holiday::before {background: #eff9fa url(/include/image/small/content/ico_holiday.png) no-repeat center center; background-size: 16px}
.smBox ul {margin-top: 10px}
.smBox ul li{display: flex}
.smBox ul li + li {margin-top: 10px}
.smBox .desc {width: calc(100% - 125px);}
/* 작은도서관 소개 (상세) */
.guideBox .smBox {position: relative; display: flex; justify-content: space-between; flex-wrap: wrap}
.guideBox .smBox .title {margin-bottom: 15px}
.guideBox .img {width: 480px; height: 285px; position: relative}
.guideBox .img::after {content:''; display: block; position: absolute; left: 20px; top: 20px; width: 100%; height: 100% ; background: url(/include/image/small/content/smallBack.png); z-index: -1}
.guideBox .img img {position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.guideBox .cont {width: calc(100% - 550px); padding-top: 15px}
.guideBox .cont ul li + li {margin-top: 20px}
/* 작은도서관 관련 서식 */
.formation li {display: flex; justify-content: space-between; border: 1px solid #e2e2e2; padding: 15px 10px}
.formation li + li {border-top: 0}
.formation li a {margin-left: 10px}
/* 문화마당_문화강좌신청 */
.cultureSearchWrap {background-color: transparent; margin-bottom: 0; padding: 0 0 35px 0}
.cultureSearchWrap .libTabList li.on button {background-color: #228ed4; color: #fff; border: 0}
.cultureSearchWrap .libTabList li.on a {background-color: #228ed4; color: #fff; border: 0; }
.cultureSearchWrap .libTabList::after {display: none}
/* 문화마당_독서동아리 */
.tab-wrap .event_tab {display: flex; margin-bottom: 25px}
.tab-wrap .event_tab li {width: 20%; border: 1px solid #e2e2e2; box-sizing: border-box;}
.tab-wrap .event_tab li + li {border-left: 0}
.tab-wrap .event_tab li a{width: 100%; height: 45px; display: flex; justify-content: center; align-items: center;}
.tab-wrap .event_tab li.on a {background-color: #228ed4; color: #fff; border: 0}
.tab-wrap > div.on {display:block;}
/* 사립작은도서관_도서관현황 */
.smallSelectWrap2 {padding: 30px; background-color: #daeef5; margin-bottom: 30px}
.smallSelectWrap2 > div {display: flex; justify-content: center; width: 100%; margin: 0 auto; flex-wrap: wrap}
.smallSelectWrap2 select {height: 45px; width: 40%; border: 0}
.smallSelectWrap2 #librarySelect1 {width: 54.28571428571429%}
.smallSelectWrap2 .libdong {width: 15%}
.smallSelectWrap2 #btnSelect {width: 105px; background-color: #73828c; color: #fff;}
/* 정책 및 방침 */
/* 사이트 맵 */
#sitemap #submenuArea {display: none}
#sitemap #smapmenu {display: flex; flex-wrap: wrap}
#smapmenu > li {width: calc(25% - 25px); margin-left: 25px}
#smapmenu > li:nth-child(n+5) {margin-top: 50px}
#smapmenu > li > a {background-color: #228ed4; color: #fff !important; width: 100%; display: flex; justify-content: center; height: 50px; align-items: center; font-size: 1.1764705882352942em}
#smapmenu > li > ul > li > a {display: flex; width: 100%; padding: 15px 0 15px 30px; border-bottom: 1px solid #dddddd; position: relative; font-weight: 600; color: #555}
#smapmenu > li > ul > li > a::before {content:''; display: block; width: 4px; height: 4px; background-color: #777; position: absolute; left: 15px; top: 25px; border-radius: 50%}
#smapmenu .MkSub > li > a {display: block; padding: 2px 0 2px 50px; position: relative; font-size: 15px; color: #999}
#smapmenu .MkSub > li > a::before {content:''; display: block; width: 8px; height: 2px; background-color: #ccc; position: absolute; left: 35px; top: 12px}
#smapmenu .MkTab {display: none}
#smapmenu #smb4_2 > a {border-bottom: 0; padding-bottom: 0}
#smapmenu #smb6_1 > a {border-bottom: 0; padding-bottom: 0}
#smapmenu #smb6_4 > a {border-bottom: 0; padding-bottom: 0}
#smapmenu #smb6_5 > a {border-bottom: 0; padding-bottom: 0}
#smapmenu #smb6_6 > a {border-bottom: 0; padding-bottom: 0}
#smapmenu #smb4_2 .MkSub {border-bottom: 1px solid #ddd; padding-bottom: 10px}
#smapmenu #smb6_1 .MkSub {border-bottom: 1px solid #ddd; padding-bottom: 10px}
#smapmenu #smb6_4 .MkSub {border-bottom: 1px solid #ddd; padding-bottom: 10px}
#smapmenu #smb6_5 .MkSub {border-bottom: 1px solid #ddd; padding-bottom: 10px}
#smapmenu #smb6_6 .MkSub {border-bottom: 1px solid #ddd; padding-bottom: 10px}
/* 개인정보처리방침 */
.policy_small h5.btitle {margin: 40px 0 20px 0}
.policy_small .policyList strong {font-weight: 600; display: block; margin-top: 10px}
.policy_small .policyList > li > ol > li {margin-top:15px;}
.policy_small .policyList > li {margin-top:30px;}
.policy_small .policyList li {margin-top:5px;}
.policy_small .policyList > li > ol > li:first-child {margin-top:5px;}
.policy_small .policyList li li li ol {padding-left:15px;}
.box-area {padding: 29px; border: 1px solid #dfdfdf; background-color: #f5f5f5;}
/* 책마루작은미술관 신청 */
.maruWrap {display: flex; flex-wrap: wrap;}
.maruWrap .leftBox {width: 50%; margin-right: 3.703703703703704%;}
.maruWrap .leftBox .img {width: 100%; padding-top: 70.37037037037037%; background: url(/include/image/jungang/contents/bookmaru.jpg); position: relative; border: 1px solid #e1e1e1; background-size: contain;}
.maruWrap .leftBox .img img {position: absolute; left: 0; top: 0; width: 100%; height: 100%;}
.maruWrap .leftBox .mtit {font-weight: 800; font-size: 1.3529em; color: #222; text-align: center; margin: 25px 0 15px 0;}
.maruWrap .rightBox {width: 46.2962962962963%;}
.maruWrap .rightBox .calInner {justify-content: center;}
.maruWrap .rightBox .btnGroup a {width: calc(50% - 5px);}
.maruWrap .rightBox .btnGroup a + a {margin-left: 5px;}
.maruWrap .rightBox .ptxt {position: relative; padding-left: 90px;}
.maruWrap .rightBox .ptxt strong {position: absolute; left: 10px; top: 0;}
.maruWrap .rightBox .ptxt .times {position: relative; margin-left: 8px; padding-left: 8px;}
.maruWrap .rightBox .ptxt .times::before {content: ''; display: block; position: absolute; left: 0; top: 50%; width: 1px; height: 14px; background-color: #ddd; margin-top: -7px;}
.maruWrap .rightBox .timeList {display: flex; flex-wrap: wrap; margin-left: -8px;}
.maruWrap .rightBox .timeList li {width: 100%; margin-top: 8px; font-weight: 600;}
.maruWrap .rightBox .timeList li .rdoBtn {width: 100%;}
.maruWrap .rightBox .timeList li .rdoBtn label {border-color: #e0e3e6; width: 100%; letter-spacing: -0.075em; font-size: 0.9411em; padding: 0;
line-height: 50px;}
.txt .month {padding-right: 10px; position: relative;}
.txt .month::after {position: absolute; right: 0; top: 50%; width: 1px; height: 14px; background-color: #ddd; display: block; content:''; margin-top: -7px;}
.txt .month + span {margin-left: 8px; position: relative;}
@media screen and (max-width: 1024px){
.guideBox .cont {width: 100%; margin-top: 40px}
.guideBox .img { height: auto; margin: 0 auto}
.guideBox .img img {position: relative; left: 0; top: 0; width: 100%; height: 100%; }
.smallSelectWrap2 .libdong {width: 20%}
/* 사이트맵 */
#smapmenu {margin-left: -25px}
#smapmenu > li {width: calc(50% - 25px); margin-left: 25px}
#smapmenu > li:nth-child(n+3) {margin-top: 50px}
/* 책마루작은미술관 */
.maruWrap > div {width: 100% !important}
.maruWrap > div + div {margin-top: 30px;}
}
/* MOBILE */
@media screen and (max-width: 767px){
.readingList li .top {padding: 10px 0 10px 15px; border-bottom: 1px solid #ddd}
.readingList li .desc {padding: 10px 0 40px 10px}
.smBox strong {width: 101px}
}
@media screen and (max-width: 640px){
.smBox + .smBox {margin-top: 20px}
.smBox strong::before {top: -6px}
.readingList li .desc {padding: 10px 0 30px 10px}
.smallSelectWrap2 > div {width: 100%}
.smallSelectWrap2 #btnSelect {width: 60px}
.smBox strong{width: 94px}
.smallSelectWrap2 .libdong {width: 25%}
.smallSelectWrap2 select {width: 50%}
.txt .month + span {font-size: 12px;}
}
@media screen and (max-width: 480px){
.smBox strong {width: 84px}
.smBox strong {padding-left: 35px;}
.smBox a {padding: 20px 15px}
.smBox .desc {width: calc(100% - 110px)}
.smallSelectWrap2 {padding: 25px 20px}
.smallSelectWrap2 .libdong {width: 30%}
.smallSelectWrap2 select {width: 70%}
.smallSelectWrap2 #btnSelect {width: 100%; line-height: 40px; margin-top: 5px}
.maruWrap .rightBox .ptxt {position: relative; padding-left: 75px;}
.maruWrap .rightBox .ptxt .times {margin-left: 4px; padding-left: 5px;}
.maruWrap .rightBox .ptxt .times::before {height: 10px; margin-top: 3px; top: 0;}
.txt .month::after {display: none;}
.txt .month + span {margin-left: 0;}
.txt .month + span::before {content: '-';}
}
@media screen and (max-width: 375px){
}
/* PC */
@media screen and (min-width: 1025px){
}