@charset "utf-8"; 
/*
  Project _ CSS Init
  FileName _ main.css - (메인레이아웃)
  Author _ 쮸양~★
  Date _ 2023. 06. 05
  Last _ 
*/


/******************************************************************************************************************************************
	font CSS (글꼴 스타일 설정) - 쮸양~★
*******************************************************************************************************************************************/
.s_dot1 {padding:0 0 0 0; background:none;}
.s_dot1 > li {position:relative; padding-left:15px; list-style:none; font-size:17px; line-height:160%; color:#555; background:none;}
.s_dot1 > li:before {content:''; position:absolute; top:10px; left:0; width:5px; height:5px; border-radius:50%; background:#959595;}



/******************************************************************************************************************************************
	visual CSS (메인비주얼 스타일 설정) - 쮸양~★
*******************************************************************************************************************************************/
.mainVisual {position:relative; overflow:hidden; width:100%; padding:50px 0px; z-index:0; background:#f2fcf4 url('../images/main/mainV_bg.png') no-repeat left bottom;}


/******************************************************************************************************************************************
	mainQuickBn CSS (빠른서비스 스타일 설정) - 쮸양~★
*******************************************************************************************************************************************/
.mainQuickBn {position:relative; width:40%;}
.quickTap {position:relative; width:100%; display:inline-block;}
.quickTap li {width:50%; float:left; background:#f9f9f9; text-align:center;}
.quickTap li a {display:block; width:100%; height:100%; padding:10px 20px; border-radius:20px 20px 0px 0px; font-size:1.2em;}
.quickTap li a.on {background:#50824D; color:#fff;}

.quickList {position:absolute; top:48px; left:0px; display:inline-block; width:100%; min-height:300px; background:#fff; border-radius:0px 0px 20px 20px; padding:30px 30px; border:1px solid #eee;}
.quickList > .list {display:none;}
.quickList > .list.on {display:block;}
.quickList > .list > li {float:left; text-align:center; width:18%; margin-right:2%; margin-bottom:2%; display:inline-block;}
.quickList > .list > li:nth-child(5),
.quickList > .list > li:nth-child(10) {margin-right:0px;}
.quickList > .list > li a { font-size:1.0em; color:#333;}

.quickList > .list > li .iconBox {padding:20px 10px; display:block; border:1px solid #eee; border-radius:10px; margin-bottom:10px;}

.quickList > .list > li i {width:100%; height:50px; display:block;}
.quickList > .list > li i.ic_bn01_1 {background:url(../images/main/ic_bn01_1.gif) no-repeat center 0px; background-size:contain;}
.quickList > .list > li i.ic_bn01_2 {background:url(../images/main/ic_bn01_2.gif) no-repeat center 0px; background-size:contain;}
.quickList > .list > li i.ic_bn01_3 {background:url(../images/main/ic_bn01_3.gif) no-repeat center 0px; background-size:contain;}
.quickList > .list > li i.ic_bn01_4 {background:url(../images/main/ic_bn01_4.gif) no-repeat center 0px; background-size:contain;}
.quickList > .list > li i.ic_bn01_5 {background:url(../images/main/ic_bn01_5.gif) no-repeat center 0px; background-size:contain;}
.quickList > .list > li i.ic_bn01_6 {background:url(../images/main/ic_bn01_6.gif) no-repeat center 0px; background-size:contain;}
.quickList > .list > li i.ic_bn01_7 {background:url(../images/main/ic_bn01_7.gif) no-repeat center 0px; background-size:contain;}
.quickList > .list > li i.ic_bn01_8 {background:url(../images/main/ic_bn01_8.gif) no-repeat center 0px; background-size:contain;}

.quickList > .list > li i.ic_bn01_9 {background:url(../images/main/ic_bn01_9.gif) no-repeat center 0px; background-size:contain;}
.quickList > .list > li i.ic_bn01_10 {background:url(../images/main/ic_bn01_10.gif) no-repeat center 0px; background-size:contain;}


.quickList > .list > li i.ic_bn02_1 {background:url(../images/main/ic_bn02_1.gif) no-repeat center 0px; background-size:contain;}
.quickList > .list > li i.ic_bn02_2 {background:url(../images/main/ic_bn02_2.gif) no-repeat center 0px; background-size:contain;}
.quickList > .list > li i.ic_bn02_3 {background:url(../images/main/ic_bn02_3.gif) no-repeat center 0px; background-size:contain;}
.quickList > .list > li i.ic_bn02_4 {background:url(../images/main/ic_bn02_4.gif) no-repeat center 0px; background-size:contain;}
.quickList > .list > li i.ic_bn02_5 {background:url(../images/main/ic_bn02_5.gif) no-repeat center 0px; background-size:contain;}
.quickList > .list > li i.ic_bn02_6 {background:url(../images/main/ic_bn02_6.gif) no-repeat center 0px; background-size:contain;}
.quickList > .list > li i.ic_bn02_7 {background:url(../images/main/ic_bn02_7.gif) no-repeat center 0px; background-size:contain;}
.quickList > .list > li i.ic_bn02_8 {background:url(../images/main/ic_bn02_8.gif) no-repeat center 0px; background-size:contain;}

@media all and (max-width:1090px) {
	.quickList {height:330px; overflow-y:scroll;}
	.quickList > .list > li {float:left; text-align:center; width:32%; margin-right:2%; margin-bottom:2%; display:inline-block;}
	.quickList > .list > li:nth-child(3),
	.quickList > .list > li:nth-child(6) {margin-right:0px;}
}


@media all and (max-width:760px) {
	.mainVisual .inner.fc {display:inline-block;}
	.mainQuickBn {width:100%; height:400px;}
	.quickList > .list > li {width:15%;}
	.quickList > .list > li:nth-child(3), .quickList > .list > li:nth-child(4) {margin-right:2%;}
	.quickList > .list > li:nth-child(6) {margin-right:0px;}
}

@media all and (max-width:500px) {
	.mainQuickBn {width:100%; height:400px;}
	.quickList > .list > li {width:32%;}
	.quickList > .list > li:nth-child(3), .quickList > .list > li:nth-child(6) {margin-right:0%;}
	.quickTap li a {font-size:1.0em;}
	.quickList > .list > li a {font-size:0.9em;}
	.quickList {padding:15px 15px;}
}



/******************************************************************************************************************************************
	popup CSS (팝업존 스타일 설정) - 쮸양~★
*******************************************************************************************************************************************/
/* popup_box */
.popupBox {position:relative; background:#f4f7ff; display:inline-block; width:55%; height:370px; border-radius:20px; border:1px solid #eee; box-sizing:border-box;}
.popupList {position:relative; width:100%; height:370px; overflow:hidden; border-radius:20px; }
.popupList ul {position:relative; width:100%;}
.popupList li.popup {position:absolute; top:0px; left:0px; padding:0px 0px; width:100%; height:370px; display:none;}

.popupList .popup li a img {width:100%; height:100%; border-radius:20px; background:#fff;}

.popupList li.popup.on {display:block;}
.popupList li.popup a {text-decoration:none;}
.popupList li.popup .txtNo { text-indent:-1000em;}
.popupList li p.pic {position:absolute; top:0px; left:0px; width:100%; height:100%; display:block;}
.popupList li p.pic img {border:1px solid #eee; width:100%; height:100%; border-radius:20px; background:#fff;}

.popupBox .btnBox {position:absolute; bottom:40px; left:18%;}
.popupBox .btnBox li {text-indent:-1000em; display:inline-block; float:left; margin-right:10px;}
.popupBox .btnBox li:last-child {margin-right:0px;}
.popupBox .btnBox li a {width:12px; height:12px; display:block; border-radius:100px; background:#c7c7c7;}

.popupBox .btnBox a.on {background:#50824D;}

.swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction {bottom:20px !important;} 
.swiper-pagination-bullet {width:12px !important; height:12px !important;}


@media all and (max-width:760px) {
	.popupBox {position:relative; background:#f4f7ff; display:inline-block; width:100%; height:370px; border-radius:20px; border:1px solid #eee; box-sizing:border-box;}
}

@media all and (max-width:500px) {
	.popupBox, .popupList {height:auto;}
	.popupList li.popup {height:260px;}
}


/******************************************************************************************************************************************
	mainContents CSS (메인컨텐츠 스타일 설정) - 쮸양~★
*******************************************************************************************************************************************/
.mainContents {position:relative; width:100%; display:inline-block; padding:50px 0px 0px 0px;}
.mainContents h2 {position:relative; font-size:2.2em; color:#000; font-weight:400; margin-bottom:20px;}
.mainContents h2 a.ic_more {position:absolute; top:0px; right:0px; width:40px; height:40px; background:#eeeeee url(../images/common/ic_more.gif) no-repeat center center; display:inline-block; border-radius:100px; text-indent:-1000em;}
.mainContents h2 i.bg {content:""; position:absolute; top:0px; right:0px; width:109px; height:58px; display:block; background:url(../images/main/h2_bg.gif) no-repeat 0px 0px;}


@media all and (max-width:1170px) {
	.mainContents > .inner.fc {display:inline-block;}
	.inner {padding:0px 15px;}
}

@media all and (max-width:500px) {
	.mainContents {padding:30px 0px 0px 0px;}
	.mainContents h2 {font-size:1.5em;}
	
	.inner {padding:0px 10px;}	
}



/******************************************************************************************************************************************
	calender_wrap CSS (메인달력 스타일 설정) - 쮸양~★
*******************************************************************************************************************************************/
/* 게시판 탭 */
.boardTap {position:relative; width:100%; display:inline-block;}
.boardTap.line {border-bottom:1px solid #eee;}
.boardTap li {float:left;}
.boardTap li a {display:block; width:100%; height:100%; padding:7px 20px; border-radius:5px 5px 0px 0px; font-size:1.1em;}
.boardTap li a.on {background:#50824D; color:#fff;}

/* 달력 */
.calender_wrap {overflow:hidden; /* 3개일경우 width:30%; */ width:45%; position:relative; margin-bottom:50px; background:#fff;}
.calender_wrap::after {clear:both; content:''; display:block;}
.calender_wrap .calender {width:100%; text-align:center;}
.calender_wrap .calender h3 {background:#f9f9f9; color:#333; font-size:1.2em; padding:15px 10px; border-radius:10px 10px 0 0; line-height:1; margin-left:0px; text-align:center; font-weight:500;}
.calender_wrap .calender h3 span {font-size:15px; color:rgba(255, 255, 255, 0.8);}

/* calender 달력형 */
.calender_wrap .year {position:relative; text-align:center;}
.calender_wrap .year a {display:block; font-size:1.0em; margin-top:-3px;}
.calender_wrap .year a i {display:inline-block; width:20px; height:20px; border:1px solid #dedede; border-radius:50%; vertical-align:middle;}
.calender_wrap .year a span {display:inline-block;}
.calender_wrap .year .prev {position:absolute; top:15px; left:20px; z-index:10;}
.calender_wrap .year .prev i {margin-right:10px; background:#fff url('../images/common/year_prev.png') no-repeat 50%; background-size:10px;}
.calender_wrap .year .next {position:absolute; top:15px; right:20px; z-index:10;}
.calender_wrap .year .next i {margin-left:10px; background:#fff url('../images/common/year_next.png') no-repeat 50%; background-size:10px;}
.calender_wrap .year strong {font-size:2.4em; color:#004ea2;}

/* 달력표 */
.calender_wrap .calender table thead th {padding:5px 5px; text-align:center; color:#333; background:#e5e1d8; font-size:1.0em;}
.calender_wrap .calender table thead th.point {background:#ed7070; font-size:1.1em; color:#fff;}
.calender_wrap .calender table tbody td {padding:8px 5px; background:#f9f9f9; font-size:1.1em; border:1px solid #eee;}
.calender_wrap .calender table tbody tr:last-child td:first-child {border-radius:0 0 0 10px;}
.calender_wrap .calender table tbody tr:last-child td:last-child {border-radius:0 0 10px 0;}
.calender_wrap .calender table tbody span {display:inline-block;}
.calender_wrap .calender table tbody .today {position:relative; color:#029de6;}
.calender_wrap .calender table tbody .today::after {content:''; display:block; position:absolute; left:50%; bottom:-5px; width:20px; height:2px; background:#029de6; margin-left:-10px;}
.calender_wrap .calender table tbody .event {position:relative; color:#ff4d55;}
.calender_wrap .calender table tbody .event::after {content:''; display:block; position:absolute; left:50%; bottom:-5px; width:20px; height:2px; background:#ff4d55; margin-left:-10px;}
.calender_wrap .calender table tbody .gray {color:#ccc;}

.calender_wrap .calenTxt {padding:10px 10px; border-bottom:2px dotted #eee;}
.calender_wrap .calenTxt p {position:relative; width:100%; display:inline-block; line-height:30px;}
.calender_wrap .calenTxt p span.txt {width:30%; padding-left:10px; display:inline-block; color:#333; text-align:left;}
.calender_wrap .calenTxt p span.txt:before {content:""; position:absolute; top:15px; left:0px; width:3px; height:1px; display:block; background:#333;}
.calender_wrap .calenTxt p span.day {width:70%; display:inline-block; color:#F00; text-align:right;}
.calender_wrap .calenTxt p span.day02 {width:70%; display:inline-block; color:#06F; text-align:right;}


@media all and (max-width:1170px) {
	.calender_wrap {width:100%;}
	/* 게시판 탭 */
	.boardTap {display:flex; justify-content:flex-start; border-bottom:1px solid #eee; margin-bottom:10px;}
	.boardTap.line {border-bottom:1px solid #eee;}
	.boardTap li {width:25%; float:none; margin-right:5px;}
	.boardTap li a { background:#f9f9f9; text-align:center;}
	.boardTap li a.on {background:#50824D; color:#fff;}
}


@media all and (max-width:760px) {
	.calender_wrap {margin-bottom:30px;}
}

@media all and (max-width:500px) {
	.boardTap {display:inline-block;}
	.boardTap li {width:48%; float:left; margin-bottom:5px;}
	.boardTap li a {font-size:1.0em;}
	
	.calender_wrap .calenTxt p span.txt {width:40%;}
	.calender_wrap .calenTxt p span.day {width:60%;}
	
}

/******************************************************************************************************************************************
	board_wrap CSS (공지사항 스타일 설정) - 쮸양~★
*******************************************************************************************************************************************/
.board_wrap {position:relative;  /* 3개일경우 width:40%; */ width:50%; margin-bottom:50px; background:#fff;}
.board_wrap .list {display:none;position:relative;padding:10px;margin:0;height:220px}

.main_boardList {}
.main_boardList li {width:100%; border-bottom:1px solid #eee; padding:10px 0px; display:inline-block;}
.main_boardList li a {align-items:center;}
.main_boardList li .point {width:10%; min-width:100px; height:30px; line-height:30px; color:#fff; border-radius:50px; text-align:center; padding:0px 10px; vertical-align:middle;}
.main_boardList li .boardTxt {width:80%; display:inline-block;}
.main_boardList li .boardTitle {width:100%; display:block; font-size:1.2em; color:#333; line-height:30px; height:30px; overflow:hidden; display:-webkit-box; word-wrap: break-word; -webkit-line-clamp:1; -webkit-box-orient: vertical; overflow:hidden; text-overflow:ellipsis;}
.main_boardList li .boardDay {display:block; color:#959595; font-weight:400;}


@media all and (max-width:1170px) {
	.board_wrap {position:relative; overflow:hidden; /* 3개일경우 float:left; width:70%; padding-right:50px; */ float:none; width:100%; padding-right:0px; margin-bottom:50px; background:#fff;}
	
}

@media all and (max-width:760px) {
	.board_wrap {position:relative; float:none; overflow:hidden; width:100%; margin-bottom:30px; padding-right:0px; background:#fff;}
}

@media all and (max-width:500px) {
	.boardTap.line {margin-bottom:0px;}
	.boardTap li a {padding:7px 10px;}
	.main_boardList li .boardTxt {width:100%;}
	.main_boardList li .boardTitle {font-size:1em;}
	.main_boardList li .boardDay {font-size:0.9em;}
	.board_wrap .list {padding:0px; height:200px;}
}

@media all and (max-width:270px) {
}


/******************************************************************************************************************************************
	book_wrap CSS (북큐레이션 스타일 설정) - 쮸양~★
*******************************************************************************************************************************************/
.book_wrap {position:relative; overflow:hidden; width:304px; margin-bottom:50px; background:#fff; display:none;}
.bookList {position:relative; display:inline-block; width:100%; height:452px;}
.bookList ul {position:relative; width:100%;}
.bookList li.book {position:absolute; top:0px; left:0px; padding:0px 0px; width:100%; height:452px; display:none;}
.bookList li.book.on {display:block;}
.bookList li.book a {text-decoration:none;}
.bookList li.book .txtNo {text-indent:-1000em;}
.bookList li p.pic {position:absolute; top:0px; left:0px; width:100%; height:100%; display:block;}
.bookList li p.pic img {border:1px solid #eee; width:100%; height:100%; border-radius:20px; background:#fff;}

.bookList li p.topTxt {position:absolute; top:0px; left:0px; width:100%; display:inline-block; background:#026b42; padding:10px 10px; color:#fff; text-align:center;}

.bookList .btnBox {position:absolute; bottom:30px; left:0px; display:flex; justify-content: center;}
.bookList .btnBox li {text-indent:-1000em; display:inline-block; float:left; margin-right:10px;}
.bookList .btnBox li:last-child {margin-right:0px;}
.bookList .btnBox li a {width:12px; height:12px; display:block; border-radius:100px; background:#d5d5d5;}

.bookList .btnBox a.on {background:#026b42;}
.mask01, .mask02, .mask03 {position:absolute;top:0;left:0;display:block;z-index:1;width:51px;height:36px;text-indent:-99999px}
.mask01{background:url('/groups/library/images/main/mask01.png') no-repeat 0 50%}
.mask02{background:url('/groups/library/images/main/mask02.png') no-repeat 0 50%}
.mask03{background:url('/groups/library/images/main/mask03.png') no-repeat 0 50%}


@media all and (max-width:1170px) {
	.book_wrap {position:relative; overflow:hidden; width:30%; float:right; margin-bottom:50px; background:#fff;}
}

@media all and (max-width:760px) {
	.book_wrap {position:relative; overflow:hidden; width:100%; float:none; margin-bottom:30px; background:#fff;}
}


/******************************************************************************************************************************************
	mainConBg CSS (문화강좌 스타일 설정) - 쮸양~★
*******************************************************************************************************************************************/
.mainConBg {position:relative; width:100%; display:inline-block; padding:50px 0px; background:#ede1d9 url(../images/main/mainC_bg01.png) no-repeat center top;}

.mainConBg .mainTap01 {position:relative; width:100%; display:flex; justify-content: center; margin-bottom:30px;}
.mainConBg .mainTap01 li {margin-right:5px; color:#000; font-size:1.2em;}
.mainConBg .mainTap01 li:last-child {margin-right:0px;}
.mainConBg .mainTap01 li a {color:#000; display:block; background:#f9f9f9; padding:10px 30px; border-radius:10px;}
.mainConBg .mainTap01 li a.on {background:#50824D; color:#fff;}

.mainConBg .mainCourse {position:relative; width:100%; display:flex; justify-content: center; margin-bottom:30px;}
.mainConBg .mainCourse > li {position:relative; width:25%; margin-right:40px;}
.mainConBg .mainCourse li h3 {position:relative; width:100%; padding:10px 10px; text-align:center; display:inline-block; border-radius:0px 50px 0px 0px; color:#fff; font-weight:500;}
.mainConBg .mainCourse li:last-child {margin-right:0px;}
.mainConBg .mainCourse li h4 {background:#fff; color:#000; text-align:center; padding:30px 50px 0px 50px; margin-bottom:20px; font-weight:400; font-size:1.5em; height:100px; overflow:hidden; display:-webkit-box; word-wrap: break-word; -webkit-line-clamp:2; -webkit-box-orient: vertical; overflow:hidden; text-overflow:ellipsis;}
.mainConBg .mainCourse li .txtList {background:#fff; border-radius:0px 0px 0px 50px; padding:0px 20px 20px 20px;}
.mainConBg .mainCourse li .txtList ul li {text-align:center; display:block; line-height:25px;}

.mainConBg .mainCourse li > a .btn_gray {width:110px; margin:0px auto; border-radius:50px; padding:5px 20px; background:#999; color:#fff; display:block; text-align:center;}
.mainConBg .mainCourse li > a .btn_blue {width:110px; margin:0px auto; border-radius:50px; padding:5px 20px; background:#50824D; color:#fff; display:block; text-align:center;}

.mainConBg .listbox {position:relative;}

.mainConBg .btnBox {position:absolute; top:40%; left:0px; width:100%; z-index:100;}
.mainConBg .btnBox a.btn_prev {position:absolute; left:-100px; background:#fff url(../images/main/ic_prev.gif) no-repeat center center; border-radius:100%; width:68px; height:68px; display:block; text-indent:-1000em; cursor:pointer; border:1px solid #eee;}
.mainConBg .btnBox a.btn_next {position:absolute; right:-100px; background:#fff url(../images/main/ic_next.gif) no-repeat center center; border-radius:100%; width:68px; height:68px; display:block; text-indent:-1000em; cursor:pointer; border:1px solid #eee;}

@media all and (max-width:1170px) {
	.mainConBg .mainCourse li h4 {padding:20px 20px;}
	.mainConBg .mainCourse > li {margin-right:20px;}
	
	.mainConBg .btnBox a.btn_prev {left:0px;}
	.mainConBg .btnBox a.btn_next {right:0px;}
}


@media all and (max-width:760px) {
	.mainConBg {padding:30px 0px;}
	.mainConBg .mainCourse {display:inline-block; margin-bottom:0px;}
	.mainConBg .mainCourse > li {width:49%; float:left; margin-right:2%; display:inline-block; margin-bottom:20px;}
	.mainConBg .mainCourse > li:nth-child(2),
	.mainConBg .mainCourse > li:nth-child(4) {margin-right:0px;}
	.mainConBg .mainCourse li .txtList {height:310px;}
}

@media all and (max-width:690px) {
	.mainConBg .mainTap01 li {font-size:1.0em;}
	.mainConBg .mainTap01 li a {padding:10px 10px;}
}

@media all and (max-width:500px) {
	.mainConBg .mainTap01 {display:inline-block; margin-bottom:10px;}
	.mainConBg .mainTap01 li {margin-bottom:5px; float:left; width:31.3%; text-align:center;}
	.mainConBg .mainCourse > li {width:100%; float:none; margin-right:0px;}
	.mainConBg .mainCourse li h4 {height:50px; font-size:1.3em;}
	.mainConBg .mainCourse li .txtList { min-height:220px; height:auto;}
	
	.mainConBg .btnBox {position:absolute; top:55%; left:0px; width:100%; z-index:100;}
	.mainConBg .btnBox a.btn_prev {left:0px; width:30px; height:30px; background-size:30%;}
	.mainConBg .btnBox a.btn_next {right:0px; width:30px; height:30px; background-size:30%;}
}

/******************************************************************************************************************************************
	mainConBg CSS (영화감상 스타일 설정) - 쮸양~★
*******************************************************************************************************************************************/
.mainConBg02 {position:relative; width:100%; display:inline-block; padding:50px 0px; background:#d9e5ed url(../images/main/mainC_bg02.png) no-repeat center top;}
.mainConBg02 .inner > .mainTap01 {position:relative; width:100%; display:flex; justify-content: center; margin-bottom:30px;}
.mainConBg02 .inner > .mainTap01 li {color:#000; font-size:1.2em; background:#f9f9f9;}
.mainConBg02 .inner > .mainTap01 li a {color:#000; display:block; padding:10px 40px;}
.mainConBg02 .inner > .mainTap01 li:nth-child(1) {border-radius:50px 0px 0px 50px;}
.mainConBg02 .inner > .mainTap01 li:nth-child(3) {margin-right:0px; border-radius:0px 50px 50px 0px;}
.mainConBg02 .inner > .mainTap01 li a.on {background:#026b42; color:#fff; border-radius:50px;}

.mainConBg02 .mainBooks {position:relative; width:100%; display:flex; justify-content: center; margin-bottom:30px;}
.mainConBg02 .mainBooks > li {position:relative; width:25%; margin-right:40px; border:1px solid #eee; background:#fff; padding:20px 20px; border-radius:20px;}
.mainConBg02 .mainBooks > li p.pic {width:100%; height:280px; display:inline-block; margin-bottom:20px;}
.mainConBg02 .mainBooks > li p.pic img {width:100%; height:100%;}
.mainConBg02 .mainBooks li h3 {position:relative; width:100%; display:inline-block; color:#000; font-weight:500;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
.mainConBg02 .mainBooks li:last-child {margin-right:0px;}
.mainConBg02 .mainBooks li .day {color:#959595; margin-top:10px;}

.mainConBg02 .mainBooks li > a .btn_gray {width:110px; margin:0px auto; border-radius:50px; padding:5px 20px; background:#999; color:#fff; display:block; text-align:center;}
.mainConBg02 .mainBooks li > a .btn_blue {width:110px; margin:0px auto; border-radius:50px; padding:5px 20px; background:#50824D; color:#fff; display:block; text-align:center;}


.mainConBg02 .booklist {position:relative;}

.mainConBg02 .btnBox {position:absolute; top:40%; left:0px; width:100%; z-index:100;}
.mainConBg02 .btnBox a.btn_prev {position:absolute; left:-100px; background:#fff url(../images/main/ic_prev.gif) no-repeat center center; border-radius:100%; width:68px; height:68px; display:block; text-indent:-1000em; cursor:pointer; border:1px solid #eee;}
.mainConBg02 .btnBox a.btn_next {position:absolute; right:-100px; background:#fff url(../images/main/ic_next.gif) no-repeat center center; border-radius:100%; width:68px; height:68px; display:block; text-indent:-1000em; cursor:pointer; border:1px solid #eee;}


@media all and (max-width:1170px) {
	.mainConBg02 .mainBooks > li {margin-right:20px;}
	.mainConBg02 .mainBooks > li p.pic {height:200px;}
	
	.mainConBg02 .btnBox a.btn_prev {left:0px;}
	.mainConBg02 .btnBox a.btn_next {right:0px;}
}

@media all and (max-width:760px) {
	.mainConBg02 {padding:30px 0px;}
	.mainConBg02 .mainBooks {display:inline-block; margin-bottom:0px;}
	.mainConBg02 .mainBooks > li {width:49%; float:left; display:inline-block; margin-right:2%; margin-bottom:20px;}
	.mainConBg02 .mainBooks > li:nth-child(2),
	.mainConBg02 .mainBooks > li:nth-child(4) {margin-right:0px;}
}

@media all and (max-width:690px) {
	.mainConBg02 .inner > .mainTap01 li {font-size:1.0em;}
	.mainConBg02 .inner > .mainTap01 li a {padding:10px 20px;}
}

@media all and (max-width:500px) {
	.mainConBg02 .inner > .mainTap01 {margin-bottom:10px;}
	.mainConBg02 .inner > .mainTap01 li {margin-right:5px;}
	.mainConBg02 .inner > .mainTap01 li a {padding:10px 10px;}
	.mainConBg02 .inner > .mainTap01 li:nth-child(1),
	.mainConBg02 .inner > .mainTap01 li:nth-child(3) {border-radius:50px;}
	.mainConBg02 .inner > .mainTap01 li {border-radius:50px; margin-bottom:5px;}
	.mainConBg02 .mainBooks > li p.pic {margin-bottom:10px;}
	.mainConBg02 .mainBooks li h3 {font-size:1.0em; height:20px; overflow:hidden; display:-webkit-box; word-wrap:break-word; -webkit-line-clamp:1; -webkit-box-orient:vertical; text-overflow:ellipsis;}
	.mainConBg02 .mainBooks > li p {height:20px; overflow:hidden; display:-webkit-box; word-wrap:break-word; -webkit-line-clamp:1; -webkit-box-orient:vertical; text-overflow:ellipsis;}
	
	.mainConBg02 .btnBox a.btn_prev {left:0px; width:30px; height:30px; background-size:30%;}
	.mainConBg02 .btnBox a.btn_next {right:0px; width:30px; height:30px; background-size:30%;}
	
	.bx-wrapper {margin-bottom:0px !important;}
	
	.table_guide {display:block;position:relative;overflow:hidden;overflow-x:auto;padding-bottom:45px;margin-bottom:50px}
	.table_guide::before {content:'좌우로 스크롤해주세요!'; display:block; position:absolute; right:50px; bottom:10px; font-size:1.2em}
	.table_guide::after {content:''; display:block; position:absolute; right:0; bottom:3px; width:39px; height:33px; z-index:10; background:url('/groups/www/images/comm/table_scroll_hint2.png') no-repeat left top; background-size:cover; text-indent:-157px; font-size:15px}
	.table_guide table {width:1000px;margin-bottom:0}
	
	.fc {display:inline-block;}
}


/******************************************************************************************************************************************
	bannerList CSS (하단배너 스타일 설정) - 쮸양~★
************************************************
.*******************************************************************************************/
.footBanner {padding:30px 0px; display:inline-block; width:100%;}
.bannerList {position:relative; width:98%; height:50px; display:inline-block; overflow:hidden;}
.bannerList h2 {line-height:50px; font-weight:400;}
.bannerList ul {position:absolute; top:0px; left:150px; width:1200; height:50px;}
.bannerList ul li {margin-left:10px; width:188px; height:48px; display:block; border:1px solid #eee; height:48px;}
.bannerList ul li a img {width:100%; height:100%;}

a.prev {position:absolute; top:10px; left:120px; width:13px; height:23px; display:block; background:url(../images/common/bn_prev.gif) no-repeat 0px 0px; text-indent:-1000em; z-index:10;}
a.next {position:absolute; top:10px; right:0px; width:13px; height:23px; display:block; background:url(../images/common/bn_next.gif) no-repeat 0px 0px; text-indent:-1000em; z-index:10;}

@media all and (max-width:500px) {
	.footBanner { display:none;}
}

/* banner_box */
.banner_box {clear:both;padding:20px 0;height:90px;background:fff;border-top:1px solid #d9d9d9;border-bottom:1px solid #d9d9d9}
.banner_box::after {display:block;clear:both;content:''}
.banner_box .controls {position:relative;padding-left:10px}
.banner_box .controls h2 {font-size:16px;color:#222}
.banner_box .controls .btn-controls {position:absolute;top:25px}
.banner_box .controls .btn-controls button {float:left;display:block;text-indent:-9999px;width:27px;height:28px;background:url('/groups/library/images/main/mbanner_control.png') no-repeat}
.banner_box .controls .btn-controls button.prev {background-position:0 0;width:28px}
.banner_box .controls .btn-controls button.stop {background-position:-28px 0}
.banner_box .controls .btn-controls button.next {background-position:-55px 0}
.banner_box .controls .btn-controls button.play {background-position:-82px 0}
.banner_box .controls .btn-controls button.more {background-position:-109px 0}
.banner {position:absolute;left:20%;top:0;overflow:hidden;width:85%;height:50px;text-align:center}
.banner ul.blist {position:relative;width:3000px}
.banner ul.blist li {float:left;display:table;text-align:center;word-break:keep-all; margin-right:3px; background-color:#efefef}
.banner ul.blist li a span {display:table-cell;padding:0 20px;font-size:14px;line-height:25px;height:50px;vertical-align:middle; border:1px solid #ccc; border-radius:10px;}
/*.banner ul.blist li a:hover span {background:url('/groups/library/images/comm/board/ico_new.gif') no-repeat right 50%}*/
@media all and (max-width:768px){
.banner_box {height:110px}
.banner_box .controls {width:100%;height:28px}
.banner_box .controls h2 {}
.banner_box .controls .btn-controls {position:absolute;top:-10px;right:10px}
.banner {left:2%;top:25px;width:95%}
}


/*비주얼배너 버튼*/
.btn_out_Box { position: absolute; width: auto; display: flex; flex-wrap: nowrap;  bottom: 0;right: 0; padding: 12px 5px 12px 40px; background-color: rgb(0 0 0 / 60%);z-index: 99; border-radius: 20px 0 20px 0; justify-content: space-between;}
.btn_out_Box div { position: relative !important; top: 0;  }
.btn_out_Box div.prev, .btn_out_Box div.stop, .btn_out_Box div.next {text-indent: -9999px; background-size: contain; height: auto !important; margin-top: 0 !important; width:40px !important;}
.btn_out_Box div.prev {background: url("../images/main/bbs_prev_w.png")no-repeat center;}
.btn_out_Box div.stop {background: url("../images/main/bbs_pause_w.png")no-repeat center; cursor: pointer;}
.btn_out_Box div.next {background: url("../images/main/bbs_next_w.png")no-repeat center; }
.btn_out_Box div.on {background: url("../images/main/bbs_play_w.png")no-repeat center;}

.btn_out_Box div.btnBox {left:0 !important; font-size: 18px; color: #fff; width:auto !important; margin-right:20px;}

@media all and (max-width:360px){
	.btn_out_Box {padding: 7px 0px 7px 25px;}
	.btn_out_Box div.btnBox {  font-size: 15px;  margin-right: 5px;}
	.btn_out_Box div.prev, .btn_out_Box div.stop, .btn_out_Box div.next {width: 35px !important;}
	
}