@charset "UTF-8"; 

/********************************
 메인페이지 - 헤더 설정
 *******************************/
#top_layout {z-index:2;}
.mainHead .logo {margin-top:30px;}
.mainHead .logo a:before {background-image:url(../images/uslogo.png);}

.mainHead .view_m {display:none;}

.main_infobox {display:none; position:relative;}

.mainHead .main_infobox .m_loginbtn {position:relative; left:unset; top:unset;}
.mainHead .main_infobox .m_loginbtn a {position:relative; display:block; padding-left:30px; color:#fff; font-size:1.5rem;}
.mainHead .main_infobox .m_loginbtn a:hover,
.mainHead .main_infobox .m_loginbtn a:active,
.mainHead .main_infobox .m_loginbtn a:focus {text-decoration:none;}


@media screen and (max-width:1024px) {
	.mainHead .logo {margin-top:0;}
	.mainHead .main_infobox {display:block;}
}

@media screen and (max-width:640px) {
	.mainHead .main_infobox .m_loginbtn a {font-size:1.3rem;}
}

@media screen and (max-width:480px) {
	.mainHead .main_infobox .m_loginbtn a {padding-left:0; font-size:1.2rem;}
	.mainHead .main_infobox .m_loginbtn a:before {display:block; position:relative; left:unset; top:unset; margin:0 auto;}
}

 
/********************************
 section01
 *******************************/
.section01 {overflow:hidden; position:relative; display:block; margin-top:-100px; padding-top:100px; height:1000px;}
.section01 .inner {z-index:1;}

 
/*메인이미지*/
.mainImg {position:absolute; left:0; right:0; top:0; width:100%;}
.main_img {overflow:hidden;}
.main_img li {position:relative; width:100%; height:1000px; background-size:cover; background-repeat:no-repeat; background-position:center center;}
.main_img li.list01 {background-image:url(../images/main/main_img01.jpg);}




/*메인이미지 문구*/
.main_tbox {position:relative; display:block; margin:100px auto 50px; text-align:center;}
.main_tbox li {display:block;}
.main_tbox li p {display:inline-block; font-size:5.0rem; font-weight:300; color:#fff; /* overflow:hidden; text-overflow:ellipsis; white-space:nowrap; */ opacity:0; transform:translateY(50px); transition:1000ms opacity, 1000ms transform;}
.main_tbox li p.twotxt {padding:70px 0 0;}
.main_tbox li p .break {display:block; font-family:'OneMobile'; font-size:6.0rem;}


.main_tbox li.slick-current p, 
.main_tbox li.slick-active p {opacity:1; transform:translateY(0); transition-delay:1000ms;}



 
/* media query */
@media screen and (max-width:1800px){
	.section01 .inner {padding:0 20px;}
}

@media screen and (max-width:1520px){
	.main_tbox li p {font-size:4.0rem;}
	.main_tbox li p .break {font-size:5.0rem;}
}

@media screen and (max-width:1240px){
	.section01 {height:900px;}
	
	.main_tbox {margin:40px auto 20px;}
}

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

@media screen and (max-width:1024px){
	.section01 {height:850px;}

  	.main_img li {height:850px;}

	.main_tbox li p {font-size:3.5rem;}
	.main_tbox li p .break {font-size:4.0rem;}
}

@media screen and (max-width:920px){
	.main_tbox {margin:20px auto;}
	
	.main_tbox li p.twotxt {line-height:1.4;}
}

@media screen and (max-width:767px){
	.section01 {height:800px;}

  	.main_img li {height:800px;}

	
	.main_tbox li p {font-size:3.0rem;}
	.main_tbox li p .break {font-size:3.5rem;}
}

@media screen and (max-width:640px){
	.section01 {height:750px;}

  	.main_img li {height:750px;}

	
	.main_tbox li p {font-size:2.2rem;}
	.main_tbox li p .break {font-size:3.0rem;}
}

@media screen and (max-width:480px){
	.main_tbox li p {font-size:2.0rem;}
	.main_tbox li p .break {font-size:2.4rem;}
}
 


 /*검색창*/
.search_box {position:relative; display:block; width:100%;}
.search_box form {position:relative; margin:0 auto; width:68%;}
.search_box .searchInner {position:relative;}
.search_box .srch_txt {position:relative; display:flex; align-items:center; border-radius:150px; background:rgba(255,255,255,0.92);}

.search_box .srchSelect {padding:0 30px 0 12px; margin-left:50px; width:180px; height:150px; border:none; background:url(../images/main/select_Marrow.png) right 11px center no-repeat; color:#222; font-weight:500; font-size:2.0rem;}
.search_box .srch_txt input {position:relative; padding:0 140px 0 20px; width:calc(100% - 180px); height:150px; line-height:40px; border-radius:0 150px 150px 0; border:none; font-weight:500; color:#555; background:none; font-size:2.0rem;}
.search_box .srch_txt input:-webkit-autofill {background:rgba(255,255,255,0.9);}

.search_box .btn_sch {position:absolute; right:20px; top:20px; width:100px; height:100px; background-color:#e0380f; border-radius:50px;}
.search_box .btn_sch:before {content:''; position:absolute; left:50%; top:50%; margin:-25px 0 0 -25px; width:51px; height:51px; background:url(../images/main/icon_search.png) 0 0 no-repeat; background-size:100%;}

/*스크롤다운*/
.scrolldown {margin-top:100px; color:#fff; text-align:center; animation:tong 1.2s ease-in-out infinite alternate;}
.scrolldown i {display:inline-block; width:27px; height:39px; background:url(../images/main/icon_scroll.png) 0 0 no-repeat;}


@keyframes tong {
	0% {transform:translate(0, -3px);}
	25% {transform:translate(0, 2px);}
	50% {transform:translate(0, -3px);}
	100% {transform:translate(0, 2px);}
}


 /* media query */
@media screen and (max-width:1520px){
	.search_box form {width:76%;}
	
}

@media screen and (max-width:1240px){
	.search_box form {padding:0 40px; width:100%;}
}

@media screen and (max-width:1024px){
	.search_box .srchSelect {height:120px; font-size:1.8rem; background-position:right 6px center;}
	.search_box .srch_txt input {padding:0 120px 0 20px; height:120px; font-size:1.8rem;}
	.search_box .btn_sch {width:80px; height:80px;}
	.search_box .btn_sch:before {margin:-20px 0 0 -20px; width:41px; height:41px;}
}

@media screen and (max-width:920px){
	.search_box .srch_txt {flex-direction:column; border-radius:30px;}
	.search_box .srchSelect {margin-left:0; padding:0 60px 0 40px; width:100%; height:80px; border-bottom:1px dashed #aaa; background-position:right 40px center; border-radius:30px 30px 0 0;}
	.search_box .srch_txt input {padding:0 90px 0 30px; width:100%; height:80px; border-radius:0 0 30px 30px;}
	.search_box .btn_sch {top:unset; bottom:10px; width:60px; height:60px;}
	.search_box .btn_sch:before {margin:-15px 0 0 -15px; width:31px; height:31px;}
		
}

@media screen and (max-width:767px){
	.search_box form {padding:0;}
}

@media screen and (max-width:640px){
	.search_box .srch_txt input {font-size:1.5rem;}
}

@media screen and (max-width:480px){
	.search_box .srchSelect {padding:0 50px 0 20px; background-position:right 20px center;}
	.search_box .srch_txt input {padding:0 80px 0 20px;}
	.search_box .btn_sch {bottom:15px; width:50px; height:50px;}
	.search_box .btn_sch:before {margin:-13px 0 0 -13px; width:26px; height:26px;}
}










/********************************
 section02 공지사항
 *******************************/

/*공지사항 레이아웃*/ 
.section02 {position:relative;}
.section02 .inner {display:flex; flex-wrap:wrap; justify-content:space-between; gap:50px; padding:80px 0 50px;}
.section02 .inner .item {transition:.3s; min-height:450px; width:100%;}
 
 
 
 
/* media query */
@media screen and (max-width:1800px){
	.section02 {padding:0 20px;}
}

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

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

@media screen and (max-width:1240px){
	.section02 .inner {padding:60px 0 70px;}
}

@media screen and (max-width:1024px){	
	.section02:before {width:100%; border-radius:0;}
	.section02 .inner {flex-direction:column; padding:50px 0 60px;}
	.section02 .inner .item {min-height:inherit;}
}

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

@media screen and (max-width:767px){
	.section02 .inner {padding:40px 0 50px;}
}

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

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



 
/*공지사항*/ 
.mainBoard {position:relative; width:100%;}
.mainBoard .head_tit {font-size:4.0rem; font-family:'SBAggro';}

.notice_list li a.tab_tit {position:absolute; top:0; padding:0 20px; height:65px; min-width:110px; line-height:65px; font-family:'OneMobile'; font-size:1.9rem; text-align:center; border-radius:50px; border:1px dashed #bfbfbf; background-color:#fff; box-sizing: border-box;}
.notice_list li a.tab_tit.tit01 {right:997px;} /*울산*/
.notice_list li a.tab_tit.tit02 {right:735px;} /*어청도*/
.notice_list li a.tab_tit.tit03 {right:605px;} /*중구*/
.notice_list li a.tab_tit.tit04 {right:475px;} /*남구*/
.notice_list li a.tab_tit.tit05 {right:345px;} /*동구*/
.notice_list li a.tab_tit.tit06 {right:215px;} /*북구*/
.notice_list li a.tab_tit.tit07 {right:85px;} /*울주군*/

.notice_list li a.tab_tit.on {color:#fff; background-color:#469968; border-color:#469968;}



.notice_list li .list_box {display:none;}
.noticeList {display:block; margin-left:-41px;}
.noticeList li {position:relative; display:inline-block; float:left; padding:20px 1px 1px 40px; width:25%;}
.noticeList li a {overflow:hidden; position:relative; display:block; padding:30px; border:1px solid #dee1e2; background-color:#fff; border-radius:30px; color:#333;}
.noticeList li a:hover {text-decoration:none;}
.noticeList li a:hover,
.noticeList li a:active,
.noticeList li a:focus {border-color:#333;}
.noticeList li a .tit {overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; line-height:1.5; font-size:2.1rem; font-family:'OneMobile'; color:#262626; height:63px; margin:10px 0;}
.noticeList li a .tit .new {position:absolute; right:15px; top:15px; display:inline-block; width:23px; height:23px; line-height:26px; font-size:1.2rem; background-color:#d93024; border-radius:12px 12px 12px 0; color:#fff; text-align:center;}

.noticeList li a .txt {overflow:hidden; height:116px; margin-bottom:15px; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical;}
.noticeList li a .date {position:relative; display:block; padding-left:25px; font-weight:500; color:#666;}
.noticeList li a .date:before {content:''; position:absolute; left:0; top:7px; width:16px; height:16px; background:url(../images/main/icon_date.png) 0 0 no-repeat;}



.mainBoard .listNone {display:flex; align-items:center; justify-content:center; margin-top:20px; padding:0; width:100%; min-height:360px; background-color:#fff; border:1px solid #ddd; border-radius:30px; text-align:center;}



/*컨트롤버튼*/
.noticeCtrl {display:flex; position:absolute; right:0; top:0;}
.noticeCtrl dl {display:flex;}
.noticeCtrl dd {position:relative; display:inline-block; margin-right:10px;}
.noticeCtrl dd a {position:relative; display:block; width:65px; height:65px; border-radius:50%; border:1px solid #ddd; background-color:#fff; box-sizing:border-box;}
.noticeCtrl dd a:before {content:''; position:absolute; left:50%; top:50%; margin:-8px 0 0 -9px; width:18px; height:18px; background:url(../images/main/main_ctrl.svg) 0 0 no-repeat; background-size:auto 100px;}
.noticeCtrl dd a.ctrl_prev:before {background-position:-9px -41px;}
.noticeCtrl dd a.ctrl_stop:before {background-position:-108px -41px;}
.noticeCtrl dd a.ctrl_next:before {background-position:-40px -41px;}
.noticeCtrl dd a.ctrl_play:before {background-position:-140px -41px;}

.noticeCtrl a.more {display:inline-block; position:relative; width:65px; height:65px; line-height:65px; background-color:#eaecef; border-radius:50px; box-sizing:border-box;}
.noticeCtrl a.more:before {content:''; position:absolute; right:calc(50% - 7px); top:calc(50% - 7px); width:14px; height:14px; background:url(../images/main/btn_more.png) 0 0 no-repeat; background-size:100%;}



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

@media screen and (max-width:1520px){
	.notice_list li a.tab_tit {padding:0 20px; height:55px; min-width:100px; line-height:55px; font-size:1.7rem;}
	.notice_list li a.tab_tit.tit01 {right:846px;} /*울산*/
	.notice_list li a.tab_tit.tit02 {right:615px;} /*어청도*/
	.notice_list li a.tab_tit.tit03 {right:505px;} /*중구*/
	.notice_list li a.tab_tit.tit04 {right:395px;} /*남구*/
	.notice_list li a.tab_tit.tit05 {right:285px;} /*동구*/
	.notice_list li a.tab_tit.tit06 {right:175px;} /*북구*/
	.notice_list li a.tab_tit.tit07 {right:65px;} /*울주군*/
	
	
	.noticeCtrl dd a {width:55px; height:55px;}
	.noticeCtrl a.more {width:55px; height:55px; line-height:55px;}
}

@media screen and (max-width:1240px){
	.mainBoard .head_tit {padding-bottom:50px;}
	.notice_list li a.tab_tit {top:unset; bottom:0; min-width:95px;}
	.notice_list li a.tab_tit.tit01 {right:756px;} /*울산*/
	.notice_list li a.tab_tit.tit02 {right:525px;} /*어청도*/
	.notice_list li a.tab_tit.tit03 {right:420px;} /*중구*/
	.notice_list li a.tab_tit.tit04 {right:315px;} /*남구*/
	.notice_list li a.tab_tit.tit05 {right:210px;} /*동구*/
	.notice_list li a.tab_tit.tit06 {right:105px;} /*북구*/
	.notice_list li a.tab_tit.tit07 {right:0;} /*울주군*/
	
		
	.noticeList {margin-left:-31px;}
	.noticeList li {padding:20px 1px 1px 30px;}
}

@media screen and (max-width:1200px){
	.mainBoard .head_tit {padding-bottom:60px; font-size:3.6rem;}
	
	.noticeList {margin-left:-21px;}
	.noticeList li {padding:20px 1px 1px 20px; width:50%;}
}

@media screen and (max-width:1024px){	
	.noticeList li {padding:20px 2px 1px 20px;}
	.noticeList li a {min-height:inherit;}
	
	.notice_list li a.tab_tit {height:45px; line-height:45px;}
	
	.noticeCtrl dd a {width:45px; height:45px;}
	.noticeCtrl dd a:before {margin:-7px 0 0 -7px; width:14px; height:16px; background-size:auto 80px;}
	.noticeCtrl dd a.ctrl_prev:before {background-position:-7px -32px;}
	.noticeCtrl dd a.ctrl_stop:before {background-position:-86px -32px;}
	.noticeCtrl dd a.ctrl_next:before {background-position:-32px -32px;}
	.noticeCtrl dd a.ctrl_play:before {background-position:-112px -32px;}
	
	.noticeCtrl a.more {width:45px; height:45px; line-height:45px;}
	.noticeCtrl a.more:before {right:calc(50% - 6px); top:calc(50% - 6px); width:12px; height:12px;}
	
	.mainBoard .listNone {margin-top:10px; padding:50px 10px; min-height:inherit;}
}

@media screen and (max-width:920px){
	.mainBoard .head_tit {padding-bottom:100px;}
	.notice_list li a.tab_tit {min-width:unset;}
	.notice_list li a.tab_tit.tit01 {bottom:55px; right:unset; left:0; width:32%;} /*울산*/
	.notice_list li a.tab_tit.tit02 {bottom:55px; right:calc(50% - 16%); width:32%;} /*어청도*/
	.notice_list li a.tab_tit.tit03 {bottom:55px; right:0; width:32%;} /*중구*/
	.notice_list li a.tab_tit.tit04 {right:unset; left:0; width:24%;} /*남구*/
	.notice_list li a.tab_tit.tit05 {right:unset; left:25%; width:24%;} /*동구*/
	.notice_list li a.tab_tit.tit06 {right:25%; width:24%;} /*북구*/
	.notice_list li a.tab_tit.tit07 {right:0; width:24%;} /*울주군*/
	
}

@media screen and (max-width:767px){
	.mainBoard .head_tit {font-size:3.0rem; text-align:center;}
	
	.notice_list li a.tab_tit {padding:0; text-align:center; height:40px; line-height:40px; font-size:1.6rem;}
	
	.noticeList {margin-left:0;}
	.noticeList li {padding:20px 0 0;}
	.noticeList li a .tit .new {right:25px; top:40px;}
	
	.noticeList li {width:100%;}
	.noticeList li:nth-child(3) {display:block;}
	.noticeList li a {padding:20px;}
	.noticeList li a .tit {margin-top:0; padding-right:30px; font-size:1.8rem; height:inherit; -webkit-line-clamp:1;}
	.noticeList li a .txt {margin-bottom:10px; height:inherit; -webkit-line-clamp:2;}
	.noticeList li a .tit .new {position:absolute; right:20px; top:20px; display:inline-block; width:23px; height:23px; line-height:26px; font-size:1.2rem; background-color:#d93024; border-radius:12px 12px 12px 0; color:#fff; text-align:center;}
	.noticeList li a .date:before {top:5px;}
	
	.noticeCtrl dd a {width:40px; height:40px;}
	.noticeCtrl dd a:before {margin:-7px 0 0 -6px; width:12px; height:14px; background-size:auto 60px;}
	.noticeCtrl dd a.ctrl_prev:before {background-position:-5px -23px;}
	.noticeCtrl dd a.ctrl_stop:before {background-position:-64px -23px;}
	.noticeCtrl dd a.ctrl_next:before {background-position:-23px -23px;}
	.noticeCtrl dd a.ctrl_play:before {background-position:-83px -23px;}
	
	.noticeCtrl a.more {padding:0; width:40px; height:40px; line-height:40px;}
}

@media screen and (max-width:640px){
	.notice_list li a.tab_tit.tit01 {width:26%;} /*울산*/
	.notice_list li a.tab_tit.tit02 {right:calc(50% - 23%); width:46%;} /*어청도*/
	.notice_list li a.tab_tit.tit03 {width:26%;} /*중구*/
}

@media screen and (max-width:480px){
	.notice_list li a.tab_tit {font-size:1.5rem;}
	
	.noticeList li {padding-top:10px;}
	
	.noticeCtrl {top:0;}
	.noticeCtrl dd {margin-right:5px;}
}



/********************************
 section04 도서관찾기
 *******************************/
.section04 {background-color:#cee4f3;}
.section04 .inner {padding:4% 0;} 
.section04 .head_tit {margin-bottom:20px; font-size:4.0rem; font-family:'SBAggro'; line-height:1;}

.libwrap {display:flex; align-items:center; justify-content:space-between;}

.info_area {position:relative; padding:50px 100px 100px 0; width:calc(100% - 650px); background-color:#fff8f8;border-radius:0 0 200px 0;}
.info_area:before {content:''; position:absolute; left:-100%; top:0; height:100%; width:100%; background-color:#fff8f8;} 

/*작은도서관 버튼*/
.info_area .small_lib {position:absolute; right:0; top:-83px; padding:10px 30px 13px; text-align:center; color:#333; font-size:1.8rem; font-family:'OneMobile'; background-color:#fff; color:#1642b1; border:1px dashed #1642b1; border-radius:50px; box-sizing:border-box;}


/*구군 탭*/
.libwrap .tab_area {margin-bottom:20px; padding-bottom:20px; border-bottom:1px solid #ddd;}
.libwrap .tab_area ul {display:flex; justify-content:flex-start; gap:20px;}
.libwrap .tab_area ul li .btn_tab {position:relative; width:110px; height:60px; text-align:center; line-height:60px; color:#333; font-size:1.9rem; font-family:'OneMobile'; background-color:#fff; border:1px dashed #bfbfbf; border-radius:50px; box-sizing:border-box;}
.libwrap .tab_area ul li.active .btn_tab {color:#fff; background-color:#469968; border-color:#469968;}

/*구군 리스트*/
.libBox.tab-box .tab-inner {display:none;}
.libBox.tab-box .tab-inner.on {display:block;}

.lib_tool {display:flex; justify-content:space-between; align-items:center;}

.tool_right {display:flex; gap:15px;}
.iconInfo {display:flex; align-items:center; gap:5px;}
.iconInfo i {position:relative; width:35px; height:35px; border-radius:30px;}
.iconInfo i.home {background-color:#ef523f;}
.iconInfo i.map {background-color:#333;}
.iconInfo i:before {content:''; position:absolute; left:6px; top:6px; width:23px; height:23px;} 
.iconInfo i.home:before {background:url(../images/main/icon_home.png) 0 0 no-repeat; background-size:100%;}
.iconInfo i.map:before {background:url(../images/main/icon_map.png) 0 0 no-repeat; background-size:100%;}

.lib_list {margin-top:20px;}
.lib_list ul {display:flex; flex-wrap:wrap; align-items:flex-start; align-content:flex-start; gap:10px; padding-right:15px; height:195px; overflow-y:auto; overscroll-behavior:auto;}
.lib_list .listItem {display:flex; justify-content:space-between; align-items:center; gap:10px; padding:10px 15px; width:calc(50% - 5px); min-height:57px; background-color:#fff; border-radius:10px; border:1px solid #ddd;}
.lib_list .listItem .tbox {display:flex; align-items:center; gap:15px; font-size:1.6rem; line-height:1.2;}
.lib_list .listItem .tbox .libtype {font-weight:500;}
.lib_list .listItem .tbox .libtype.type1 {color:#01923c;}
.lib_list .listItem .tbox .libtype.type2 {color:#1642b1;}

.lib_list .listItem .tbox .libname {overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;}


.lib_list ul::-webkit-scrollbar {width:8px;}
.lib_list ul::-webkit-scrollbar-thumb {border:2px solid #fff8f8; border-radius:50px; background:#ddd;}
.lib_list ul::-webkit-scrollbar-track {background:rgba(255,255,255,0);}

.lib_list .listItem .iconlink {display:flex; gap:8px;}

.lib_list .nolist {display:flex; align-items:center; justify-content:center; height:195px; border-radius:10px; border:1px solid #ddd; background:rgba(255, 255, 255, 0.5);}



/***지도***/
.img_area {position:relative; width:650px; height:500px;}
.img_area:before {content:''; position:absolute; left:calc(50% - 290px); top:0; width:550px; height:493px; background:url(../images/main/mapBg.png) 0 0 no-repeat; background-size:100%;}

.countBox {position:relative; margin-top:-20px; margin-left:30px; display:flex; justify-content:center; align-items:center; align-content:center; flex-wrap:wrap; height:100%; text-align:center; z-index:1;}
.count_area {padding:15px 30px;}
.count_area:nth-child(3) {width:100%;}
.count_area p {font-family:'OneMobile'; color:#fff; line-height:1.2;}
.count_area p.tit {position:relative; margin-bottom:10px; padding:0 10px; font-size:2.2rem;}
.count_area p.tit:before {content:''; position:absolute; left:calc(50% - 68px); bottom:-5px; width:136px; height:2px; background:#fff;}
.count_area p.count_num {font-size:5.5rem;}




/* media query */
@media screen and (max-width:1800px){
	.section04 {padding:0 20px;} 
	.section04 .inner {padding:100px 0;} 
	
	.info_area {width:calc(100% - 550px);}
	
	.img_area {width:550px; height:500px;}
	.img_area:before {left:calc(50% - 260px); width:520px; height:466px;}
	 
}

@media screen and (max-width:1640px){
	.info_area {padding:50px 80px 80px 0;}
}


@media screen and (max-width:1520px){
	.info_area {padding:40px 60px 60px 0; width:calc(100% - 500px); border-radius:0 0 150px 0;}
	
	/*구군 탭*/
	.libwrap .tab_area ul {gap:10px;}
	.libwrap .tab_area ul li .btn_tab {height:55px; width:100px; line-height:55px; font-size:1.7rem;}
	
	
	.img_area {width:500px; height:430px;}
	.img_area:before {left:calc(50% - 235px); width:470px; height:421px;}
	.countBox {margin-top:-10px;}
	.count_area {padding:10px 25px;}
	.count_area p.tit {font-size:2.0rem;}
	.count_area p.tit:before {left:calc(50% - 63px); width:126px;}
	.count_area p.count_num {font-size:5.0rem;}
}


@media screen and (max-width:1400px){	
	.libwrap .tab_area {margin-bottom:20px; padding-bottom:20px;}
	.lib_list .listItem .tbox {font-size:1.5rem;}	
}

@media screen and (max-width:1340px){
	/*구군 탭*/
	.libwrap .tab_area ul li {display:block; width:100%;} 
	.libwrap .tab_area ul li .btn_tab {width:100%;}
	
	
	.lib_tool {flex-direction:column; align-items:stretch;}
	.tool_right {justify-content:flex-end;}
	
	.lib_list .listItem {width:100%;}
}

@media screen and (max-width:1200px){
	.section04 .inner {padding:80px 0;} 
	.section04 .head_tit {font-size:3.6rem;}
	
	.info_area {width:calc(100% - 450px);}
	
	.img_area {width:450px; height:400px;}
	.img_area:before {left:calc(50% - 210px); width:420px; height:376px;}
	.count_area p.tit {font-size:1.8rem;}
	.count_area p.count_num {font-size:4.0rem;}
	
	
}

@media screen and (max-width:1024px){
	.section04 .head_tit {margin-bottom:15px;}
	
	.info_area {padding:30px 0 40px; width:100%; z-index:1;}
	.info_area:before {left:-10%; right:-10%; width:120%; z-index:-1;}
	
	.info_area .small_lib {top:-75px; padding:10px 20px 13px;}
	.info_area .small_lib img {width:90%;}
	
	.libwrap .tab_area ul li .btn_tab {height:45px; line-height:45px;}
	
	.img_area {display:none;}
	.img_area:before {display:none;}
	
}

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

@media screen and (max-width:767px){
	.section04 .head_tit {margin-bottom:80px; font-size:3.0rem; text-align:center;}
	
	.info_area .small_lib {top:-65px; padding:5px 10px 8px;}
	.info_area .small_lib img {width:85%;}
	
	.libwrap .tab_area ul {flex-wrap:wrap;}
	.libwrap .tab_area ul li {width:calc(33.3333% - 7px);}
	.libwrap .tab_area ul li .btn_tab {height:40px; line-height:40px; font-size:1.6rem;}
	
	.lib_list ul {height:185px;}
	.lib_list .listItem {min-height:52px;}
	
	.iconInfo i {width:30px; height:30px;}
	.iconInfo i:before {width:18px; height:18px;}
	
}

@media screen and (max-width:640px){
	.section04 .inner {padding:60px 0;}  
	
}

@media screen and (max-width:480px){
	.lib_tool {flex-direction:column; align-items:flex-start; gap:5px;}
	
	.lib_list {margin-top:10px;}
	.lib_list ul {padding-right:10px; height:210px;}
	.lib_list .listItem .tbox {flex-wrap:wrap; flex-direction:column; align-items:flex-start; gap:5px;}
	.lib_list .listItem .tbox .libname {overflow:unset; text-overflow:clip; display:block; -webkit-line-clamp:unset;}
	
	.tool_right {justify-content:flex-end; width:100%;}
	
}


/* 라디오버튼 */ 
.radio_check .keep_text:before, 
.radio_check input:checked+.keep_text:before {background-image: url(../images/checkIr.png); background-position:3px 5px;}
.radio_check {position:relative; display:inline-block; padding-left:22px; padding-right:10px;}
.radio_check .input_keep {position:absolute; top:8px; left:3px; width:15px; height:15px;}
.radio_check .keep_text {display:inline-block; margin-left:5px;}
.radio_check input {-webkit-appearance: none; -moz-appearance: none;}
.radio_check .keep_text:before {content: ''; position: absolute; top:5px; left:0; background-repeat: no-repeat; width:20px; height:20px; background-repeat: no-repeat; background-color:#fff; border:1px solid #9ba1a3; border-radius:50%; box-sizing:border-box;}
.radio_check input:checked+.keep_text:before {background-position:-12px 5px; background-color:#246BB9; border-color:#246BB9;}

.radio_check input:disabled ~ .keep_text:before {background-image:none; border-color:#c6c6c6; background-color:#e4e4e4;}
.radio_check input:checked:disabled ~ .keep_text:before {background-image: url(../images/checkIr.png); background-position:-27px 5px;}


/* 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:767px){	
	/*라디오버튼*/
	.radio_check .keep_text {margin-left:2px;}
	.radio_check .keep_text:before {top:4px; width:18px; height:18px;}
	.radio_check .keep_text:before, .radio_check input:checked+.keep_text:before {background-position:2px 4px;}
	.radio_check .input_keep {top:6px; left:2px;}
	.radio_check {padding-left:20px;}
	.radio_check input:checked+.keep_text:before {background-position:-13px 4px;}
	.radio_check input:checked:disabled ~ .keep_text:before {background-position:-28px 4px;}
}

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

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



/********************************
 section05 도서관행사
 *******************************/
.section05 {background:linear-gradient(8deg, #fff 0%, #fff7f9 40%);}
.section05 .inner {padding:70px 0;}


.eventBox {position:relative;}
.eventBox .title {font-size:4.0rem; font-family:'SBAggro';}

.event_list li a.tab_tit {position:absolute; top:0; padding:0 20px; min-width:110px; height:65px; line-height:65px; text-align:center; font-family:'OneMobile'; font-size:1.9rem; border-radius:50px; border:1px dashed #bfbfbf; background-color:#fff; box-sizing: border-box;}
.event_list li a.tab_tit.tit01 {right:997px;} /*울산*/
.event_list li a.tab_tit.tit02 {right:735px;} /*어청도*/
.event_list li a.tab_tit.tit03 {right:605px;} /*중구*/
.event_list li a.tab_tit.tit04 {right:475px;} /*남구*/
.event_list li a.tab_tit.tit05 {right:345px;} /*동구*/
.event_list li a.tab_tit.tit06 {right:215px;} /*북구*/
.event_list li a.tab_tit.tit07 {right:85px;} /*울주군*/
.event_list li a.tab_tit.on {color:#fff; background-color:#469968; border-color:#469968;}

.event_list li .list_box {display:none; padding-bottom:100px;}


.eventList {display:block; margin-left:-41px;}
.eventList:after {content:''; display:block; visibility:hidden; clear:both;}

.eventList .slick-track {display:inline-block;}

.eventList li {position:relative; display:inline-block; float:left; padding:30px 3px 1px 40px; width:25%;}
.eventList li a {overflow:hidden; display:block; padding:50px 40px 70px; border:1px solid #dee1e2; background-color:#fff; border-radius:30px; color:#333;}
.eventList li:hover a {text-decoration:none;}
.eventList li:hover a,
.eventList li:active a,
.eventList li:focus a {border-color:#333;}

.eventList li a .sub {color:#ef523f;}
.eventList li a .tit {overflow:hidden; font-size:2.2rem; font-weight:500; height:66px; line-height:1.5; margin-bottom:30px; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;}

.eventList li a .date_box {}
.eventList li a .date_box dl + dl {margin-top:20px;}
.eventList li a .date_box dt {position:relative; padding-left:30px; font-size:1.8rem;}
.eventList li a .date_box dt:before {content:''; position:absolute; left:0; top:2px; width:23px; height:23px; background:url(../images/minicon_ir.png) 0 0 no-repeat;} 
.eventList li a .date_box dt.time:before {background-position:-240px 0;}
.eventList li a .date_box dt.person:before {background-position:-384px 0;}

.eventList li a .date_box dd {overflow:hidden; height:48px; line-height:1.4; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;}

.eventList li a .state {position:absolute; right:3px; bottom:1px; width:130px; height:50px; line-height:50px; border-radius:30px 0 30px 0; text-align:center; color:#fff; background-color:#097ac9;}
.eventList li a .state.ing {background-color:#ef523f;}
.eventList li a .state.end {background-color:#666;}



/*컨트롤버튼*/
.eventCtrl {position:absolute; right:calc(50% - 107px); bottom:0;}
.eventCtrl dl {display:flex; gap:10px;}
.eventCtrl dd {position:relative; display:inline-block;}
.eventCtrl dd a {position:relative; display:block; width:65px; height:65px; border-radius:50%; border:1px solid #ddd; background-color:#fff; box-sizing:border-box;}
.eventCtrl dd a:before {content:''; position:absolute; left:50%; top:50%; margin:-10px 0 0 -7px; width:15px; height:20px; background:url(../images/main/main_Bctrl.png) 0 0 no-repeat;}
.eventCtrl dd a.ctrl_prev:before {background-position:0 0;}
.eventCtrl dd a.ctrl_stop:before {background-position:-16px 0;}
.eventCtrl dd a.ctrl_next:before {background-position:-32px 0;}
.eventCtrl dd a.ctrl_play:before {background-position:-48px 0;}

/*더보기*/
.eventMore {position:absolute; right:0; top:0;}
.eventMore a.more {display:inline-block; position:relative; width:65px; height:65px; line-height:65px; background-color:#eaecef; border-radius:50px; box-sizing:border-box;}
.eventMore a.more:before {content:''; position:absolute; right:calc(50% - 7px); top:calc(50% - 7px); width:14px; height:14px; background:url(../images/main/btn_more.png) 0 0 no-repeat; background-size:100%;}


/*리스트 없을때*/
.section05 .listNone {display:block; margin-top:20px; padding:130px 20px; text-align:center; border:1px solid #ddd; border-radius:20px;}


/* media query */
@media screen and (max-width:1800px){
	.section05 .inner {padding:90px 20px;}
}

@media screen and (max-width:1520px){
	.eventList {margin-left:-31px;}
	.eventList li {padding:30px 3px 1px 30px;}
	.eventList li a {padding:40px 30px 60px;}
	
	.event_list li a.tab_tit {height:55px; min-width:100px; line-height:55px; font-size:1.7rem;}
	.event_list li a.tab_tit.tit01 {right:846px;} /*울산*/
	.event_list li a.tab_tit.tit02 {right:615px;} /*어청도*/
	.event_list li a.tab_tit.tit03 {right:505px;} /*중구*/
	.event_list li a.tab_tit.tit04 {right:395px;} /*남구*/
	.event_list li a.tab_tit.tit05 {right:285px;} /*동구*/
	.event_list li a.tab_tit.tit06 {right:175px;} /*북구*/
	.event_list li a.tab_tit.tit07 {right:65px;} /*울주군*/
	
	
	/*컨트롤버튼*/
	.eventMore a.more {width:55px; height:55px; line-height:55px;}
}

@media screen and (max-width:1400px){
	.eventList li a .tit {margin-bottom:20px; height:60px; font-size:2.0rem;}
}

@media screen and (max-width:1240px){
	.section05 .inner {padding:70px 20px;}
	
	.eventBox .title {padding-bottom:50px;}
	.event_list li a.tab_tit {top:73px; min-width:95px;}
	.event_list li a.tab_tit.tit01 {right:756px;} /*울산*/
	.event_list li a.tab_tit.tit02 {right:525px;} /*어청도*/
	.event_list li a.tab_tit.tit03 {right:423px;} /*중구*/
	.event_list li a.tab_tit.tit04 {right:315px;} /*남구*/
	.event_list li a.tab_tit.tit05 {right:210px;} /*동구*/
	.event_list li a.tab_tit.tit06 {right:105px;} /*북구*/
	.event_list li a.tab_tit.tit07 {right:0px;} /*울주군*/
	
}


@media screen and (max-width:1200px){
	.eventBox .title {padding-bottom:60px; font-size:3.6rem;}
	
	.eventList {margin-left:-21px;}
	.eventList li {padding:30px 3px 1px 20px; width:50%;}
	.eventList li a {padding:30px 30px 55px;}
	.eventList li a .date_box dl + dl {margin-top:10px;}
	
	.event_list li .list_box {padding-bottom:80px;}
	
	/*컨트롤버튼*/
	.eventCtrl {right:calc(50% - 92px);}
	.eventCtrl dd a {width:55px; height:55px;}
}

@media screen and (max-width:1024px){
	.section05 .inner {padding:50px 20px;}
	
	.eventBox .title {padding-bottom:50px;}
	.event_list li a.tab_tit {height:45px; line-height:45px;}
		
	
	/*컨트롤버튼*/
	.eventMore a.more {width:45px; height:45px; line-height:45px;}
}

@media screen and (max-width:920px){
	.eventBox .title {padding-bottom:100px;}
	.event_list li a.tab_tit {min-width:unset; line-height:45px; font-size:1.7rem;}
	.event_list li a.tab_tit.tit01 {bottom:55px; right:unset; left:0; width:32%;} /*울산*/
	.event_list li a.tab_tit.tit02 {bottom:55px; right:calc(50% - 16%); width:32%;} /*어청도*/
	.event_list li a.tab_tit.tit03 {bottom:55px; right:0; width:32%;} /*중구*/
	.event_list li a.tab_tit.tit04 {top:128px; right:unset; left:0; width:24%;} /*남구*/
	.event_list li a.tab_tit.tit05 {top:128px; right:unset; left:25%; width:24%;} /*동구*/
	.event_list li a.tab_tit.tit06 {top:128px; right:25%; width:24%;} /*북구*/
	.event_list li a.tab_tit.tit07 {top:128px; right:0; width:24%;} /*울주군*/
	
	.eventList li a .state {width:100px; height:45px; line-height:45px;}
		
}

@media screen and (max-width:767px){
	.eventBox .title {font-size:3.0rem; text-align:center;}
		
	.event_list li a.tab_tit {top:63px; padding:0; height:40px; line-height:40px;}
	.event_list li a.tab_tit.tit04 {top:115px;} /*남구*/
	.event_list li a.tab_tit.tit05 {top:115px;} /*동구*/
	.event_list li a.tab_tit.tit06 {top:115px;} /*북구*/
	.event_list li a.tab_tit.tit07 {top:115px;} /*울주군*/
	
	.eventList li a .tit {margin-bottom:15px; font-size:1.8rem; height:54px;}
	.eventList li a .date_box dt {font-size:1.7rem;}
	.eventList li a .date_box dd {height:42px;}
	
	
	/*컨트롤버튼*/	
	.eventMore {top:2px;}
	.eventMore a.more {width:40px; height:40px; line-height:40px;}
	.eventMore a.more:before {right:calc(50% - 6px); top:calc(50% - 6px); width:12px; height:12px;}
	
	/*리스트 없을때*/
	.section05 .listNone {margin-top:40px;}
}

@media screen and (max-width:640px){
	.section05 .inner {padding:40px 20px;}
	
	.event_list li a.tab_tit.tit01 {width:26%;} /*울산*/
	.event_list li a.tab_tit.tit02 {right:calc(50% - 23%); width:46%;} /*어청도*/
	.event_list li a.tab_tit.tit03 {width:26%;} /*중구*/
	
	.eventList {margin-left:0;}
	.eventList li {padding:30px 1px 1px; width:100%;}
	.eventList li a {padding:30px 30px 55px;}
	.eventList li a .state {right:1px;}
}

@media screen and (max-width:480px){
	.eventBox .title {padding-bottom:90px;}
	.event_list li a.tab_tit {font-size:1.5rem;}
	
	.event_list li .list_box {padding-bottom:70px;}
	
	/*컨트롤버튼*/
	.eventCtrl {right:calc(50% - 82px);}
	.eventCtrl dd a {width:45px; height:45px;}
	.eventCtrl dd a:before {margin:-6px 0 0 -6px; width:12px; height:12px; background:url(../images/main/main_ctrl_bl.png) 0 0 no-repeat;}
	.eventCtrl dd a.ctrl_prev:before {background-position:0 0;}
	.eventCtrl dd a.ctrl_stop:before {background-position:-12px 0; margin:-6px 0 0 -7px;}
	.eventCtrl dd a.ctrl_next:before {background-position:-26px 0;}
	.eventCtrl dd a.ctrl_play:before {background-position:-38px 0;}
}





/********************************
 section06 배너모음
 *******************************/
.section06 {border-top:1px solid #ddd; background-color:#fff;}
.section06 .inner {padding:20px 0;}

.bannerBox {display:flex; align-items:center;}
.bannerBox .ctrl_area .tit {font-size:2.0rem; font-weight:500; letter-spacing:-0.5px;}
.bannerBox .ctrl_area {display:flex; align-items:center; gap:20px; width:212px;}

/*컨트롤*/
.ctrl_area .control {}
.ctrl_area .control > dl {}
.ctrl_area .control > dl dd {position:relative; display:inline-block; float:left; margin-left:-1px; color:#fff;}
.ctrl_area .control > dl dd .ctrl_cont,
.ctrl_area .control > dl dd a {position:relative; display:block; width:40px; height:40px; box-sizing:border-box;}
.ctrl_area .control > dl dd:last-child a {border-right:0;}
.ctrl_area .control > dl dd a:before {content:''; position:absolute; left:50%; top:50%; margin:-6px 0 0 -6px; width:12px; height:12px; background:url(../images/main/main_ctrl_bl.png) 0 0 no-repeat;}
.ctrl_area .control > dl dd a.ctrl_prev:before {background-position:0 0;}
.ctrl_area .control > dl dd a.ctrl_stop:before {background-position:-12px 0;}
.ctrl_area .control > dl dd a.ctrl_next:before {background-position:-26px 0;}
.ctrl_area .control > dl dd a.ctrl_play:before {background-position:-38px 0;}

.ctrl_area .control > dl dd span.ctrl_cont {display:inline-flex; width:70px; justify-content:center; align-items:center; line-height:39px; color:rgba(255,255,255,0.8); font-weight:600; font-size:1.6rem;}
.ctrl_area .control > dl dd span.ctrl_cont strong {padding-right:3px; font-weight:600; color:#fff;}
.ctrl_area .control > dl dd span.ctrl_cont .dash {padding:0 3px;}

/*배너리스트*/
.banner_area {width:calc(100% - 212px);} 
.banner_area li {margin:0 15px; padding:2px 0;}
.banner_area li a {display:block; padding:6px; font-size:1.6rem; text-decoration:none; border:2px solid #ddd; border-radius:30px; text-align:center;}

 
/* media query */
@media screen and (max-width:1800px){
	.section06 .inner {padding:20px;}
}

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

@media screen and (max-width:1240px){
	
	.bannerBox .ctrl_area {width:201px;}
	.bannerBox .ctrl_area .tit {font-size:1.7rem;}
	
	/*배너리스트*/
	.banner_area {width:calc(100% - 201px);} 
	.banner_area li {margin:0 2px 0 18px;}
}

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

@media screen and (max-width:920px){
	.bannerBox .ctrl_area {width:147px;}
	.bannerBox .ctrl_area .tit {overflow:hidden; position:absolute; top:-99999px; width:0; height:0; line-height:0; text-indent:-99999px;}
	.ctrl_area .control > dl dd a {margin:5px; background-color:#f6f6f6; border-radius:10px;}
	
	/*배너리스트*/
	.banner_area {width:calc(100% - 147px);}
	.banner_area li a {font-size:1.5rem;}
}

@media screen and (max-width:767px){
	.bannerBox .ctrl_area {width:132px;}
	
	/*배너리스트*/
	.banner_area {width:calc(100% - 132px);}
	.banner_area li a {font-size:1.4rem;}
	/*컨트롤*/
	.ctrl_area .control > dl dd .ctrl_cont,
	.ctrl_area .control > dl dd a {height:35px; width:35px;}
}

@media screen and (max-width:640px){
	.section06 .inner {padding:20px;}
}

@media screen and (max-width:530px){
	.bannerBox .ctrl_area {gap:10px;}
}