@charset "utf-8";
@import url("font.css");

/* RESET */
* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, textarea, p, blockquote, th, td, input, select, textarea, button {margin: 0; padding: 0}
fieldset, img {border: 0 none}
dl, ul, ol, menu, li {list-style: none}
blockquote, q {quotes: none}
blockquote:before, blockquote:after, q:before, q:after {content: ''; content: none}
input, select, textarea, button {box-sizing: border-box; vertical-align: middle}
button {border: 0 none; background-color: transparent; cursor: pointer}
table {border-collapse: collapse; border-spacing: 0}
td, th {padding: 0}
body {background: #fff}
p, th, td, input, select, textarea, button, a, h1, h2, h3, li {font-family: "NotoKrR", sans-serif; font-weight: 400; font-style: normal;}
a {text-decoration: none}
address, caption, cite, code, dfn, em, var {font-style: normal; font-weight: normal}

/* LAYOUT */
html, body {width: 100%; height: 100%; overflow-x:hidden; overflow-y:auto;}
.wrap {width: 100%; height: 100%;}
.container {overflow: hidden; position: relative;}

/* UNDER iE6 */
*html .container {height: 100%}
.content {min-height: calc(100vh - 173px);}
.section {overflow: hidden; width: 1000px; margin: 0 auto; padding-bottom: 100px}
.section:after {content: ""; clear: both}
.footer {position: relative;}

/* COMMON */
legend, caption {font-size:0; overflow:hidden; text-indent:-9999px; width:0; height:0; line-height:0;}
.txt_hide {overflow: hidden; position: absolute; top: -5000px; left: -5000px; width: 0.1%; height: 0.1%; line-height: 0.1%; font-size: 0.1%}
.clear:before,
.clear:after {content: " "; display: table; clear: both}
.blind {display: block; overflow: hidden; position: absolute; left: -9999px; width: 1px; height: 1px; font-size: 0.1em; line-height: 0.01em; text-indent: -9999px}

/* margin */
.mgbt_50 {margin-bottom: 50px;}

.notification {
	position: relative;
	top: -1px;
	right: -5px;
	width: 8px;
	height: 8px;
	background-color: #ff0000;
	border-radius: 50%;
	display: none;
	padding: 0;
}

/* width */
.wf150 {width: 150px}
.wf180 {width: 180px}
.wf200 {width: 200px}

.w0 {display: inline-block}
.w13 {width: 13%}
.w25 {width: 25%}
.w30 {width: 30%}
.w35 {width: 35%}
.w48 {width: 48%}
.w49 {width: 49%}
.w50 {width: 50%}
.w62 {width: 62%}
.w74 {width: 74%}
.w75 {width: 75%}
.w90 {width: 94%}
.w100 {width: 100%}

/* align */
.f-l {float: left}
.f-c {float: center}
.f-r {float: right}
.a-l {text-align: left}
.a-c {text-align: center}
.a-r {text-align: right}

/* em */
.em-slight {color: #dadada}
.em-normal {color: #333333}
.em-weight {color: #cc3946}

/* 유튜브 동영상 */
.youtubeWrap {position: relative; width: 100%; padding-bottom: 56.35%; text-align: left}
.youtubeWrap iframe {position: absolute; width: 100%; height: 100%}

/* 안내네비게이션 */
#skip-navi-info {font-size: 0; color: #fff; text-indent: -99999px}

/* 스킵네비게이션 */
#skip-navi {height: 0}
#skip-navi a {position: absolute; top: -9999px; z-index: 20000; width: 100%; height: 30px; background-color: #000; color: #fff; font-weight: 600; text-align: center; line-height: 30px; opacity: 0.6; -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=60)"; filter: alpha(opacity=60)}
#skip-navi a:hover,
#skip-navi a:focus,
#skip-navi a:active {top: 0; color: #fff}

/* 페이징 */
.pagination {text-align:center;position:relative;}
.pagination a {color:#999;display:inline-block;padding:0 5px;text-decoration:none;margin:0 5px;line-height:20px;font-size:0.938rem}
.pagination a.on {color:#0d9173;}
.pagination a:hover:not(.on) {color:#0d9173;}
.pagination a.btn-page {border:1px solid #e8e8e8;width:19px;height:19px;background-size:10px 9px;text-indent: -9999px;vertical-align: middle;margin:0 2.5px 0 2.5px;background-repeat:no-repeat;background-position:center}
.pagination a.btn-page:hover {border-color:#747474}
.pagination a.first {background-image:url('../img/board/ico_page_first.png');}
.pagination a.first:hover {background-image:url('../img/board/ico_page_first_h.png');}
.pagination a.prev {background-image:url('../img/board/ico_page_prev.png');}
.pagination a.prev:hover {background-image:url('../img/board/ico_page_prev_h.png');}
.pagination a.last {background-image:url('../img/board/ico_page_last.png');}
.pagination a.last:hover {background-image:url('../img/board/ico_page_last_h.png');}
.pagination a.next {background-image:url('../img/board/ico_page_next.png');}
.pagination a.next:hover {background-image:url('../img/board/ico_page_next_h.png');}


/* 주메뉴(gnb) */
#header .h_group {overflow: visible; position: fixed; top: 0; left: 0; z-index: 99; width: 100%; height: 100px; background-color: transparent}
#header .h_group:before {content: ""; position: absolute; top: 100px; left: 0px; width: 100%; height: 1px}
#header .h_group > div {margin: 0 auto; height: 100px;}
#header .h_group > div:after {display: block; clear: both; content: ''}
#header .h_group > div h1 {padding: 33px 0 0 80px; width: 370px; display: table-cell; vertical-align: top;}
#header .h_group .top_logo a {background: url(../../resources/img/common/logo.png) no-repeat; width: 154px; height: 26px; background-size: 154px 26px; display: block; font-size: 31px; line-height: 90%; text-indent: -9999px;}

#header .h_group.menu_hover .top_logo a,
#header .h_group.affix .top_logo a,
#header .h_group.sub .top_logo a,
#header .h_group.board .top_logo a {background:url(../../resources/img/common/logo_over.png) no-repeat; width: 154px; height: 26px; background-size: 154px 26px; display: block; font-size: 31px; line-height: 90%; text-indent: -9999px;}

#header .h_group.affix,
#header .h_group.sub {border-bottom: 1px solid #e8e8e8; background: #fff}
#header .h_group.board.affix {border-bottom: 0; background: #fff !important}
#header .h_group.affix #gnb > .box > ul > li > a,
#header .h_group.sub #gnb > .box > ul > li > a {color: #555}

#header .h_group.board {position: fixed; top: 0;}
#header .h_group.board a {color: #555 !important}
#gnb > .box > ul > li > .sub_menu > .inner > ul > li > a:hover {color: #0d9173 !important}

#gnb {width: 1105px; display: table-cell; vertical-align: top;}
#gnb .btn_menu {display: none; overflow: hidden; position: absolute; top: 34px; right: 20px; width: 32px; height: 20px; background-size: 32px 20px; background: url(../../resources/img/common/icon_sitemap.png) no-repeat; text-indent: -9999px;}
.h_group.affix #gnb .btn_menu {background: url(../../resources/img/common/icon_sitemap_over.png) no-repeat;}
.h_group.sub #gnb .btn_menu {background: url(../../resources/img/common/icon_sitemap_over.png) no-repeat;}

#gnb .btn_close {display: none; }
.gnb_m .top_logo_m {display: none}

#gnb > .box {width: 850px; display: table-cell; text-align: center; margin: 0 auto; vertical-align: top; margin-top: 37px;}
#gnb > .box > ul {font-size: 0; line-height: 0; text-align: center;}
#gnb > .box > ul:after {display: block; clear: both; content: ''}
#gnb > .box > ul > li {position: relative; display: inline-block; width: 20%; text-align: center;}
#gnb > .box > ul > li > a {display: block; font-size: 18px; color: #fff; cursor: pointer;  line-height: 100%; text-align: center; position: relative; font-family: "NotoKrM", sans-serif; }
#gnb > .box > ul > li > a:hover {color: #fff;}
#gnb > .box > ul > li > a:before {content: " "; display: inline-block; position: absolute; top: 57px; left: 50%; width: 0; height: 3px; background:#0d9173; -ms-transform: translate(-50%,0); -webkit-transform: translate(-50%,0); transform: translate(-50%,0); transition: .3s ease-in-out;}
#gnb > .box > ul > li > a:hover:before {width: 60%; text-align: center;}
#gnb > .box > ul > li.current > a,
#gnb > .box > ul > li > a:hover,
#gnb > .box > ul > li > a:focus {color: #0d9173}
#gnb > .box > ul > li:nth-last-child(2) a {padding-right: 0}
#gnb > .box > ul > li > .sub_menu {display: none; position: absolute; top: 90px; left: 0px; width: 100%;}
#gnb > .box > ul > li > .sub_menu > .inner > ul {font-size: 0; line-height: 0;}
#gnb > .box > ul > li > .sub_menu > .inner > ul > li {width: 100%; margin-bottom: 10px;}
#gnb > .box > ul > li > .sub_menu > .inner > ul > li > a {display: block; color: #747474; font-size: 15px; font-family: "NotoKrR", sans-serif; line-height: 28px; letter-spacing: -0.1px}
#gnb > .box > ul > li > .sub_menu > .inner > ul > li > a:hover,
#gnb > .box > ul > li > .sub_menu > .inner > ul > li > a:focus {color: #0d9173}

/* 로그인 */
#header .util_menu_m {display: none;}
#header .util_menu_pc {z-index: 10; width: 510px; display: table-cell; text-align: right; padding: 40px 60px 0 0}
#header .util_menu_pc ul {font-size: 0;}
#header .util_menu_pc ul li {display: inline-block; text-align: left; vertical-align: top}
#header .util_menu_pc ul li a {font-size: 13px; color: #fff}
#header .util_menu_pc .login {background: url(../../resources/img/common/icon_login.png) no-repeat; width: 100px; height: 20px; padding-left: 25px;}
#header .util_menu_pc .search {background: url(../../resources/img/common/icon_search.png) no-repeat; width: 100px; height: 20px; padding-left: 25px;}
#header .util_menu_pc .mypage {background: url(../../resources/img/common/icon_mypage.png) no-repeat; width: 100px; height: 20px; padding-left: 25px;}
#header .util_menu_pc .btn_sitemap {margin-left: 20px;}
#header .util_menu_pc .btn_sitemap a {background: url(../../resources/img/common/icon_sitemap.png) no-repeat; width: 36px; height: 20px; display: inline-block; text-indent: -9999px;}
#header .util_menu_pc .btn_sitemap a:hover {background: url(../../resources/img/common/icon_sitemap_over.png) no-repeat; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; transition: all 0.3s ease;}

#header .h_group.menu_hover ul li a,
#header .h_group.affix .util_menu_pc ul li a,
#header .h_group.affix .util_menu_pc ul li a,
#header .h_group.board .util_menu_pc ul li a {color: #444}

#header .h_group.menu_hover .util_menu_pc .login,
#header .h_group.affix .util_menu_pc .login,
#header .h_group.sub .util_menu_pc .login,
#header .h_group.board .util_menu_pc .login {background: url(../../resources/img/common/icon_login_over.png) no-repeat; width: 100px; height: 20px;}

#header .h_group.menu_hover .util_menu_pc .mypage,
#header .h_group.affix .util_menu_pc .mypage,
#header .h_group.sub .util_menu_pc .mypage,
#header .h_group.board .util_menu_pc .mypage {background: url(../../resources/img/common/icon_mypage_over.png) no-repeat; width: 100px; height: 20px; }

#header .h_group.menu_hover .util_menu_pc .search,
#header .h_group.affix .util_menu_pc .search,
#header .h_group.sub .util_menu_pc .search,
#header .h_group.board .util_menu_pc .search {background: url(../../resources/img/common/icon_search_over.png) no-repeat; width: 100px; height: 20px; }

#header .h_group.menu_hover .util_menu_pc .btn_sitemap a,
#header .h_group.affix .util_menu_pc .btn_sitemap a,
#header .h_group.sub .util_menu_pc .btn_sitemap a ,
#header .h_group.board .util_menu_pc .btn_sitemap a {background: url(../../resources/img/common/icon_sitemap_over.png) no-repeat; width: 36px; height: 20px; }

/* 도서검색 */
#popup_search {}
.search_wrap {display: none; z-index: 9999; width: 100%; position: absolute; top: 0 !important; left: 0 !important;}
.search_book {position: relative; background: #fff; width: 100%; height: 365px; width: 100%; padding: 60px 20px 0px;}
.search_book .b-close {width: 26px; height: 26px; background: url(../../resources/img/common/btn_close_search.png) no-repeat center center; position: absolute; right: 60px; top: 40px; text-indent: -9999px;}
.search_book .search_box {max-width: 580px; margin: 0 auto; text-align: center;}
.search_book .search_box .title {font-size: 26px; color: #555; font-family: "NotoKrB", sans-serif; margin-bottom: 40px;}
.search_book .search_box .select_wrap {font-size: 0; line-height: 0}
.search_book .search_box .select_wrap .select_div {display: inline-block; line-height: 45px; height: 45px; width: 275px; position: relative;}
.search_book .search_box .select_wrap .select_div:first-child {margin-right: 14px;}
.search_book .search_box .select_wrap .select_div:last-child {margin-left: 14px;}
.btn_selectUi {display: block; position: relative; width: 275px; padding: 10px; border: 0; border-bottom: 1px solid #0d9173; background: url(../../resources/img/common/fs-down-search.png) center right 10px no-repeat; font-size: 16px; color: #0d9173; text-align: left; border-radius:0; outline:none; -webkit-appearance: none; background-size: 14px 8px;}
.btn_selectUi:focus {background: url(../../resources/img/common/fs-up-search.png) center right 10px no-repeat; background-size: 14px 8px;}
.btn_selectUi.open {display: block; width: 275px; padding: 10px; border: 0; border-bottom: 1px solid #0d9173; background: url(../../resources/img/common/fs-up-search.png) center right 10px no-repeat; font-size: 16px; color: #0d9173}
.selectUi_List {display: none; position: absolute; top: 65px; width: 275px; padding: 10px; background: #fff; border: 1px solid #0d9173; z-index: 100}
.selectUi_List li {line-height: 30px; height: 30px;}
.selectUi_List li a {font-size: 16px; color: #0d9173;}
.input_search {position: relative; width: 100%; margin-top: 55px; line-height: 100%;}
.input_search input {width: 100%; height: 50px; background: #0d9173; border: 0; font-size: 16px; color: #fff; padding-left: 20px;}
.input_search input::placeholder {color: #fff; font-size: 16px;}
.input_search .btn_search {display: inline-block; position: absolute; top: 1px; right: 0; width: 50px; height: 48px; background:url(../../resources/img/common/btn_search.png) no-repeat center center;}

/* 사이트 맵 */
.sitemap_wrap {z-index: 99; width: 0; position: fixed; height: 100%; top: 0; right: 0;  overflow: hidden;}
.sitemap {position: relative; padding-left: 30%; background-color: rgba(0,0,0,0.8); height: 100%;}
.sitemap .closebtn {width: 26px; height: 26px; background: url(../../resources/img/common/btn_close_sitemap.png) no-repeat center center; position: absolute; right: 60px; top: 40px; text-indent: -9999px;}
.sitemap .s_gnb {height: 97px; background: #0d9173; text-align: right; padding-left: 30%; position: relative;}
.sitemap .s_gnb .s_logo {display: inline-block; position: absolute; top: 40px; left: 100px; vertical-align: top}
.sitemap .s_gnb ul.s_util_menu {display: inline-block; margin-right: 170px; vertical-align: top; margin-top: 40px;}
.sitemap .s_gnb ul.s_util_menu li {display: inline-block; margin-left: 30px;}
.sitemap .s_gnb ul.s_util_menu li a {color:#fff; font-size: 15px;}
.sitemap .map_gnb {display: inline-block; vertical-align: top; padding: 155px 0 110px 100px; background: #fff; width: 100%}
.sitemap .map_gnb .map_ui {margin-bottom: 80px;}
.sitemap .map_gnb .map_ui p {display: inline-block; vertical-align: middle; line-height: 100%;}
.sitemap .map_gnb .map_ui p a {font-size: 30px; color: #333; display: inline-block; width: 205px; font-family: "NotoKrM", sans-serif;}
.sitemap .map_gnb .map_ui ul {display: inline-block; vertical-align: middle;}
.sitemap .map_gnb .map_ui ul li {display: inline-block; margin-right: 30px; line-height: 100%;}
.sitemap .map_gnb .map_ui ul li a {font-size: 17px; color: #747474; position: relative; display: inline-block;}
.sitemap .map_gnb .map_ui ul li a:hover {color: #0d9173}
.sitemap .map_gnb .map_ui ul li a:before {content: " "; display: inline-block; position: absolute; top: 25px; left: 50%; width: 0; height: 1px; background:#0d9173; -ms-transform: translate(-50%,0); -webkit-transform: translate(-50%,0); transform: translate(-50%,0); transition: .3s ease-in-out;}
.sitemap .map_gnb .map_ui ul li a:hover:before {width: 110%; text-align: center;}

/* 푸터 */
.footer {padding: 40px 0; color: #acacac; display: block; width: 100%; clear: both;}
.footer_wrap {position: relative; max-width: 1160px; margin: 0 auto}
.footer_wrap .family {position: absolute; top: 0; right: 0;}
.btn_familyView {display: block; position: relative; width: 190px; padding: 7px; border-bottom: 1px solid #c2c2c2; background: url(../../resources/img/common/fs-down.png) center right 10px no-repeat; font-size: 15px; color: #666}
.btn_familyView.open {display: block; width: 190px; padding: 7px; border-bottom: 1px solid #c2c2c2; background: url(../../resources/img/common/fs-up.png) center right 10px no-repeat; font-size: 15px; color: #666}
.list_family {display: none; position: absolute; bottom: 45px; width: 190px; padding: 7px; border: 1px solid #c2c2c2; background: #fff}
.list_family li {line-height: 28px}
.list_family li a {font-size: 14px; color: #666;}
.footer_wrap .info .logo {margin-bottom: 25px;}
.footer_wrap .info ul.add {position: relative; padding: 0 0 20px 0}
.footer_wrap .info ul.add li {display: inline; position: relative; padding: 0 16px; font-size: 14px; font-family: "NotoKrR", sans-serif;}
.footer_wrap .info ul.add li:first-child {padding: 0 16px 0 0}
.footer_wrap .info ul.add li .bar {position: absolute; left: -2px; top: 50%; height: 12px; width: 1px; margin-top: -5px; background-color: #9c9c9c}
.footer_wrap .info ul.add li a {color: #444}
.footer_wrap .info p {font-size: 13px; color: #8e8e8e; font-family: "NotoKrR", sans-serif;}
.footer_wrap .info p.copy {margin-top: 5px;}

/* 상단 바로가기 */
.btn_top {display: none; position: fixed; bottom: -70px; width: 100%; z-index: 2; opacity: 0; -webkit-transition-duration: 0.4s; transition-duration: 0.4s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; right: 7%;}
.btn_top.show {opacity: 1}
.btn_top .inner {position: relative; width: 100%; margin: 0 auto}
.btn_top .inner a {display: block; position: absolute; bottom: 174px; right: 5%; width: 65px; height: 65px; background: #fff url(../../resources/img/common/btn_top.png) center center no-repeat; border-radius: 100px; border: 1px solid #b6b6b6;}
.btn_top span {display: block; text-indent: -9999px}


/* 미디어 쿼리 */

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

	#header .h_group > div h1 {padding: 33px 0 0 40px; width: 300px; }
	#header .util_menu_pc {padding: 40px 40px 0 0;}
	#gnb {width: 900px;}
	#gnb > .box {width: 700px}

} /* 1675 end */

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

	.sitemap .s_gnb .s_logo {left: 70px;}
	.sitemap .map_gnb {padding: 100px 0 50px 70px}

	#gnb {width: 800px;}

} /* 1615 end */

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

	.sitemap .map_gnb .map_ui ul {line-height: 100%; display: block; width: 100%; margin-top: 40px;}
	.sitemap .map_gnb .map_ui ul li {line-height: 120%;}

} /* 1500 end */

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

	#header .h_group > div h1 {width: 270px;}
	#gnb > .box {width: 700px;}
	#gnb {width: 700px;}

	#header .util_menu_pc .login {width: 80px;}
	#header .util_menu_pc .search {width: 80px;}
	#header .util_menu_pc .mypage {width: 100px;}
	#header .util_menu_pc .btn_sitemap {margin-left: 10px;}		

	#header .h_group.menu_hover .util_menu_pc .login,
	#header .h_group.affix .util_menu_pc .login,
	#header .h_group.sub .util_menu_pc .login,
	#header .h_group.board .util_menu_pc .login,
	#header .h_group.menu_hover .util_menu_pc .search,
	#header .h_group.affix .util_menu_pc .search,
	#header .h_group.sub .util_menu_pc .search,
	#header .h_group.board .util_menu_pc .search {width: 80px;}


} /* 1440 end */

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

	/* 주메뉴(gnb) */
	#header .h_group {height: 80px; border-top: 0}
	#header .h_group > div {width: auto; padding: 0 0px; height: 80px;}
	#header .util_menu_pc {display: none;}
	#header .util_menu_m {display: block; width: 100%; background: #0d9173; border-top: 1px solid #bee2da; border-bottom: 1px solid #bee2da;}
	#header .util_menu_m ul {font-size: 0; line-height: 0;}
	#header .util_menu_m ul li {display: inline-block; width: 50%; padding: 20px 0}
	#header .util_menu_m ul.afterLogin li {width: 33.333%;}
	#header .util_menu_m ul li a {display: inline-block; width: 100%; padding: 20px 0; font-size: 14px; color: #fff;}
	#header .util_menu_m ul li span {padding-left: 28px}

	#header .util_menu_m ul li.search, 
	#header .util_menu_m ul li.mypage {position: relative;}

	#header .util_menu_m ul li.search:before, 
	#header .util_menu_m ul li.mypage:before {content: ""; position: absolute; left: 0; top: 30px; background: #42a790; width: 1px; height: 20px;}

	#header .util_menu_m ul li.login span {background: url(../../resources/img/common/icon_login.png) no-repeat left center; width: 95px; height: 25px;}
	#header .util_menu_m ul li.search span {background: url(../../resources/img/common/icon_search.png) no-repeat left center; width: 95px; height: 25px;}
	#header .util_menu_m ul li.mypage span {background: url(../../resources/img/common/icon_mypage.png) no-repeat left center; width: 95px; height: 25px;}
	#header .h_group > div h1 {padding: 27px 0 0 20px;}
    .gnb_m {position: relative;}
    .gnb_m .top_logo_m {display: block; position: absolute; top: 27px; left: 20px; background: url(../../resources/img/common/logo_over.png) no-repeat; width: 154px; height: 26px; background-size: 154px 26px; display: block; font-size: 31px; line-height: 90%; text-indent: -9999px;}
	#gnb {position: static}
	#gnb .btn_menu {display: block; position: absolute; top: 27px; right: 20px; z-index: 1100}
	#gnb .btn_close {display: block; overflow: hidden; position: absolute; top: 25px; right: 20px; z-index: 1000; width: 28px; height: 28px; background: url(../../resources/img/common/btn_close_m.png) no-repeat; background-size: 28px 28px; text-indent: -999em;}
	#gnb > .box {display: none; position: absolute; top: -5px; right: -80%; z-index: 9999 !important; width: 80%; padding-bottom: 2px; margin-top: 0;}
	#gnb > .box > ul {width: 100%; padding-top: 80px; display: inline-block; background: #fff; }
	#gnb > .box > ul > li {float: none; width: 100%; height: auto; background: #fff; border-bottom: 1px solid #e8e8e8}
	#gnb > .box > ul > li:first-child {border-top: 1px solid #d7d7d7}
	#gnb > .box > ul > li > a {padding: 22px 30px; background: url(../../resources/img/common/bul_down.png) no-repeat center right  30px; -webkit-background-size: 16px; background-size: 16px; font-weight: 400; color: #111;}
	#gnb > .box > ul > li.current > a {background: url(../../resources/img/common/bul_up.png) no-repeat  center right  30px; -webkit-background-size: 16px; background-size: 16px; color: #71af42}
	#gnb > .box > ul > li > a:hover,
	#gnb > .box > ul > li > a:focus {color: #cc3946}
	#gnb > .box > ul > li > .sub_menu {position: relative; top: 0px; width: 100%; padding: 0px; border-bottom: none; }
	#gnb > .box > ul > li > .sub_menu > .inner {float: none}
	#gnb > .box > ul > li > .sub_menu > .inner > ul {display: none; float: none; margin-left: 0; padding: 15px 0; background: #f5f5f5}
	#gnb > .box > ul > li > .sub_menu > .inner > ul > li {float: none; width: auto; margin: 0; background: #f5f5f5}
	#gnb > .box > ul > li > .sub_menu > .inner > ul > li:first-child {margin-left: 0}
	#gnb > .box > ul > li > .sub_menu > .inner > ul > li > a {height: 45px; padding-left: 30px; line-height: 45px; font-size: 14px; text-align: left}
	#gnb > .box > ul > li > .sub_menu > .inner > ul > li > a:hover,
	#gnb > .box > ul > li > .sub_menu > .inner > ul > li > a:focus {background: #f5f5f5}
	#gnb > .box > ul > li > .sub_menu > .inner > ul > li > a:hover,
	#gnb > .box > ul > li > .sub_menu > .inner > ul > li > a:focus {color: #0d9173}
	#gnb > .box > ul > li > a {text-align: left; font-family: "NotoKrM", sans-serif;}
	#gnb > .box > ul > li > a:before {display: none}
	#gnb > .box > ul.gnb_m > li > a {color: #444 !important; }
	#header .h_group > div h1 span.top_logo_txt {display: block}
	#header .h_group.affix .util_menu ul li a,
	#header .h_group.sub .util_menu ul li a {color: #fff}
	.sitemap {display: none}

	/* 메인 */
	.header {min-width: 100%}
	.gnb-menu {width: 100%}
	.container {min-width: 100%}

	/* 서브 */
	.article {margin: 30px 10px 0px}
	.article h3:before {display: none}

	/* */
	.section {width: auto; padding-bottom: 70px}

	/* 푸터 */
	.footer {padding: 0 0 50px;}
	.footer_wrap {width: 100%; max-width: initial;}
	.footer_wrap .family {left: 0; border-top: 1px solid #c2c2c2;}
	.footer_wrap .info {float: none; margin-top: 120px; padding: 0 0 0 20px; text-align: center}
	.footer_wrap .info ul.add {width: 100%; margin-top: 20px; padding: 0 18px 18px; text-align: center}
	.footer_wrap .info ul.add li {display: inline-block; width: auto; padding: 0 20px; text-align: center;}
	.footer_wrap .info p {padding: 0 20px; text-align: center}
	.btn_familyView {width: 100%; padding: 20px 30px; background: url(../../resources/img/common/fs-down.png) center right 20px no-repeat}
	.btn_familyView.open {width: 100%; padding: 20px 30px; background: url(../../resources/img/common/fs-up.png) center right 20px no-repeat}
	.list_family {bottom: 55px; width: 100%; padding: 15px 30px; z-index: 777;}
	.footer_wrap .info p.copy {margin-top: 10px;}


} /* 1300 end */

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

	/* 레이어 팝업 */
	.dialog {max-width: 100%}
	#inquiry-dialog {width: auto}
	.modal-header {padding: 15px 20px; background: #f5f5f5}
	.modal-header h3 {font-size: 18px}
	.article-content {margin: 10px; padding: 0 0 10px}
	.mfp-content .mfp-close {top: 22px; right: 25px; width: 15px; height: 15px; background-size: 15px}
	.mfp-close {top: 22px}
	.mfp-close:active {top: 22px}

	.btn_top {right: 1.5%;}
	.btn_top .inner a {right: 1.5%;}

} /* 1024 end */

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

	/* 주메뉴(gnb) */
	#gnb > .box {width: 85%;}
	#header .h_group > div h1 span.top_logo {display: block; position: absolute; top: 32px; left: 0px; width: 54px; height: 19px; background: url(../../resources/img/logo.png) no-repeat; background-size: 54px 19px}
	#header .h_group > div h1 span.top_logo_txt {left: 65px; top: 29px; line-height: 120%}
	#header .util_menu_pc ul li:nth-child(1) {margin: 0 20px 0 30px}
	#header .util_menu_pc ul li:last-child {margin: 0}
	#header .util_menu_m ul li a {letter-spacing:-1px;}

	.search_book .search_box .select_wrap {line-height: 100%}
	.search_book .search_box .title {margin-top: -25px; font-size: 26px;}
	.search_book .search_box .select_wrap .select_div,
	.btn_selectUi,
	.selectUi_List, .btn_selectUi.open {width: 100%}
	.search_book .search_box .select_wrap .select_div:last-child {margin-left: 0; margin-top: 30px;}

	/* */
	.section {padding-bottom: 50px}
	.br_640 {display: block}

    /* 푸터 */
	.footer {padding: 0 0 30px; margin-top: -10px;}
	.footer.footer_sub {padding-bottom: 40px}
	.footer_wrap .info {padding: 15px 0 0 0; margin-top: 85px;}
	.footer_wrap .info ul.add {padding: 0; margin: 0 0 15px 0px;}
	.footer_wrap .info ul.add li {font-size: 12px}
	.footer_wrap .info ul.add li {padding: 0 13px;}
	.footer_wrap .info ul.add li:first-child {padding: 0 13px 0 13px;}
	.footer_wrap .info p {font-size: 12px; word-wrap: break-word; word-break: keep-all; }
	.footer_wrap .info .logo {margin-bottom: 20px;}

} /* 640 end */