@charset "utf-8";

#header {width:100%; height:95px; background:rgba(255,255,255,0.9);}
#header .headerIn {position:relative; margin:0 auto; width:96%; max-width:1200px; }
#header .logo {position:absolute; top:0; left:0;}
#header .logo a {display:block; margin-top:19px; width:157px; height:56px; background:url("../image/common/logo.png") 0 0 no-repeat; font-size:0; line-height:0; background-size:100%;}
/* header : gnb */
#gnb {width:100%; height:95px; text-align:center;}
#gnb > ul > li {position:relative; display:inline-block; /*margin-left:-4px;*/ margin-left:0.5%; /*width:130px;*/ width:11%;  font-weight:600;}
#gnb > ul > li:first-child {margin-left:0;}
#gnb > ul > li > a {display:block; height:95px; line-height:95px; font-size:17px; color:#454545;}
#gnb > ul > li > a > span {display:block; height:95px;}
#gnb > ul > li:hover a {color:#0059a9;}
/* gnb : gnb_2dep */
#gnb > ul > li .gnb_2dep {display:none; position:absolute; top:95px; left:-10%; padding:11% 0; width:120%; text-align:center; background:#0059a9; z-index:999;}
#gnb > ul > li .gnb_2dep li a {display:block; padding:10px; color:#fff; opacity:0.8; font-size:14px; font-weight:300; letter-spacing:-0.25px;}
#gnb > ul > li:hover .gnb_2dep {display:block;}
#gnb > ul > li .gnb_2dep li a:hover {opacity:1;}
/* header : util */
#header .util {position:absolute; top:0; right:0;}
#header .util .link {float:left; padding:12px 48px 12px 20px; margin-top:25px; font-size:13px; color:#999; border:1px solid #ccc; border-radius:4px; background:url("../image/common/ic_slt_arrow.png") center right no-repeat; -webkit-appearance:none;-moz-appearance:none;appearance:none; cursor:pointer;}
#header .util select.link::-ms-expand {display:none;}
#header .util .all_menu {float:right; display:block; margin:21px 0 0 20px ; width:48px; height:48px; background:url("../image/common/bt_allmenu.png") 0 0 no-repeat; font-size:0; background-size:100%; cursor:pointer;}

@media (min-width: 1201px) {
	#gnb > ul > li .gnb_2dep {left:-20%; padding:11% 0; width:140%;}
}
@media (max-width: 1200px) {
	#gnb {width:83%;}
	#gnb > ul > li > a {font-size:16px;}
	#gnb > ul > li .gnb_2dep {left:-50%; padding:11% 0; width:200%;}
	#header .util .link {padding:12px 41px 12px 12px; margin-top:28px; font-size:12px;}
}
@media (max-width: 768px) {
	#header {z-index:1000; position:fixed; top:0; left:0; width:100%; height:60px; background:rgba(255,255,255,1); border-bottom:1px solid #e5e5e5;}
	#header .logo {left:50%; transform:translateX(-40%);}
	#header .logo a {margin-top:10px; width:100px; height:36px;}
	#gnb {display:none;}
	#header .util .link {display:none;}
	#header .util .all_menu {margin:10px 0 0; width:40px; height:40px;}
}



/* header : gnb mobile */
#gnb_m {width:300px; height:100%; position:fixed; top:0px; right:-100%; max-width:550px; background:#fff; z-index:99998; overflow-y:auto; -webkit-transition:all 0.5s;-moz-transition:all 0.5s;-o-transition:all 0.5s;-ms-transition:all 0.5s;transition:all 0.5s}
#gnb_m.on {right:0;}

#gnb_m .nav > ul {width:100%; overflow:hidden;}
#gnb_m .nav > ul > li {position:relative; width:100%; border-bottom:1px solid #ccc;}
#gnb_m .nav > ul > li > a{position:relative; display:block; height:48px; line-height:48px; padding:0 6%; color:#252525; font-size:16px; font-weight:400; letter-spacing:-0.25px;}
#gnb_m .nav > ul > li > a.cover{background:url('../image/common/ic_arrow6.gif') 93% 50% no-repeat;}
#gnb_m .nav > ul > li .gnb_m_2dep {padding:12px 0; background:#142765;}
#gnb_m .nav > ul > li .gnb_m_2dep li a {display:block; color:#fff; font-size:13px; padding:10px 6% 10px 12%;}
#gnb_m .nav .link {margin-top:10px;}
#gnb_m .nav .link li {width:88%; margin:3% 6%; background:#eee; border-radius:4px; text-align:left;}
#gnb_m .nav .link li a {height:40px; line-height:40px; font-size:13px; color:#454545;}
#gnb_m .close {cursor:pointer; display:block; height:58px; line-height:54px; padding:0 4%; border-bottom:1px solid #ccc; text-align:right;}
#gnb_m .close img {vertical-align:middle;}
#gnb_m_bg {position:fixed; top:0; left:0; width:100%; height:100%; cursor:pointer; background:rgba(0,0,0,0.7); z-index:9999;}
.clearfix {clear:both; display:block; content:"";}
/*@media (min-width: 769px){
	#container {margin-top:95px;}
}*/
@media (max-width: 768px){
	#container {margin-top:60px;}
}
@media (max-width: 425px){
	#gnb_m {width:77%;}
}
@media (max-width: 320px){
	#gnb_m .nav .link li a {font-size:12px;}
}




/* sub contents wrap */
.cnt_wrapper{width:1200px; height:auto; padding-bottom:100px; margin:0 auto; /*overflow:hidden;*/}
.cnt_wrapper h3{position:relative; padding:30px 0 4%; font-size:36px; color:#252525; text-align:center;}
.cnt_wrapper h3:after{content:""; position:absolute; left:50%; top:0; margin-left:-30px; width:60px; height:1px; display:inline-block; background:#ea1d25;}
.cnt_wrap{padding-top:80px;}

@media (max-width: 1200px){
	.cnt_wrapper.cnt_wrapper{width:96%; margin:0 2%;}
	.cnt_wrapper h3{padding-top:2%; font-size:32px;}
	.cnt_wrapper h3:after{margin-left:-30px; width:60px;}
}
@media (max-width: 1024px){
	.cnt_wrapper h3{padding-top:3%; font-size:28px;}
	.cnt_wrapper h3:after{margin-left:-26px; width:52px;}
}
@media (max-width: 768px){
	.cnt_wrapper h3{padding-top:4%; font-size:24px;}
	.cnt_wrapper h3:after{margin-left:-23px; width:46px;}
}
@media (max-width: 425px){
	.cnt_wrapper h3{padding-top:3%; font-size:20px;}
	.cnt_wrapper h3:after{margin-left:-19px; width:38px;}
	.cnt_wrap{padding-top:50px;}
}
@media (max-width: 320px){
	.cnt_wrapper h3{padding-top:%; font-size:18px;}
	.cnt_wrapper h3:after{margin-left:-15px; width:30px;}
	.cnt_wrap{padding-top:40px;}
}



/* footer */
#footer {position:relative; clear:both; width:100%; background:#1e1e1e;}
#footer .ft_wrap {overflow:hidden; padding:32px 0; margin:0 auto; width:96%; max-width:1200px;}
#footer .ft_logo {float:left; width:17%;}
#footer .ft_logo span {display:block; width:157px; height:57px; background:url("../image/common/ic_ft_logo.png") 0 0 no-repeat; font-size:0; background-size:100%;}
#footer .ft_info {float:left; width:83%;}
#footer .ft_info address {padding-bottom:20px; margin:0 180px 0 20px; font-size:13px; line-height:17px; color:#a5a5a5; word-break:keep-all;}
#footer .ft_info cite {margin:0 20px; font-size:13px; color:#a5a5a5;}
#footer .ft_info cite a {font-size:13px; color:#a5a5a5}
@media (max-width: 1024px){
	#footer .ft_info address {margin:0 0 0 20px;}
}
@media (max-width: 900px){
	#footer .ft_logo {width:22%;}
	#footer .ft_info {width:78%;}
	#footer .ft_info address {font-size:12px; line-height:16px;}
	#footer .ft_info cite {font-size:12px;}
}
@media (max-width: 768px){
	#footer .ft_logo {width:100%;}
	#footer .ft_logo span {margin:0 auto 20px; transform:translateX(10%); width:124px; height:45px;}
	#footer .ft_info {width:94%; padding:0 3%; text-align:center;}
	#footer .ft_info address {margin:0 20px; font-size:11px; line-height:15px;}
	#footer .ft_info cite {font-size:11px; line-height:12px;}
	#footer .ft_info cite a {display:block;}
}
@media (max-width: 425px){
	#footer .ft_info address {margin:0 24px;}
}
@media (max-width: 320px){
	#footer .ft_info address {margin:0 10px;}
}
/* scrollTop */
#bt_top {position:absolute; left:0; right:0; top:-48px; margin:0 auto; width:96%; max-width:1200px; clear:both;}
#bt_top a{float:right; width:48px; height:48px; font-size:0; background:url("../image/common/bt_scroll_top.png") 0 0 no-repeat; background-size:100%;}

@media (max-width: 768px){
	#bt_top {top:-40px;}
	#bt_top a {width:40px; height:40px;}
}


/* 재고표 */
#stock_pop_wrap { position:fixed; left:0; top:0; right:0; bottom:0; overflow:hidden; z-index:99999;}
.stock_pop_item { position: fixed; left: 50%; margin-left: -384px; width: 768px; background: #fff; top: 8%; z-index: 99999; height: 85%; overflow-y: scroll; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; background-color:#f5f5f5; }
#stock_pop_back { position:fixed; left:0; top:0; right:0; bottom:0; overflow:hidden; z-index:9998; background: rgba(0,0,0,0.7);}

.btn_stock_wrap {position:absolute; right:0; top:0;}
.btn_stock_pop {float:left; font-size:0; width:66px; height:66px; background:url('../image/common/close_btn.png') no-repeat center; background-size:auto;}
.btn_down {float:left; padding:21px 60px 21px 25px; font-size:16px; color:#252525!important; background:url('../image/common/ic_down.gif') no-repeat 90% 50% #ccc; background-size:;}

.stock_pop_tab{overflow:hidden; margin:2% auto; width:96%;}
.stock_pop_tab li{float:left;}
.stock_pop_tab li a{display:inline-block; padding:10px 20px; margin:0 1px 2px; background:#fff; color:#666; font-size:14px; font-weight:400; border:1px solid #ccc; box-sizing:border-box;}
.stock_pop_tab li a.on{font-weight:300; background-color:#142765; color:#fff; border:1px solid #142765;}

.stock_pop_item h3{padding:16px 3%; font-size:22px; font-weight:400; color:#252525; text-align:left; border-bottom:1px solid #ccc; background-color:#fff;}
.stock_table {margin:0 auto 5%; width:96%;border-collapse:collapse;border-spacing:0;box-sizing:border-box;}
.stock_table caption {overflow:hidden;position:absolute;width:0;height:0;line-height:0;text-indent:-9999px}
.stock_table th {padding:6px 0;background-color:#ccc; color:#252525; font-weight:400;border-bottom:1px solid #aaa;border-top:1px solid #aaa;}
.stock_table td {padding:10px 0 10px 10px;background-color:#fff; border-bottom:1px solid #d5d5d5; font-size:14px; font-weight:400;}
.stock_table .stock {text-align:center;}
@media all and (max-width:768px){
	.btn_stock_pop {background-size:30px;}
	.btn_down {width:66px; height:66px; padding:0; font-size:0; background-position:center;}

	.stock_pop_tab li a{padding:8px 16px; margin:0 1px 3px; font-size:12px;}
	.stock_pop_item {top:2%; left:0; right:0; margin:0 auto; width:98%; }
	.stock_table{border-top:1px solid #aaa;}
	.stock_table,
	.stock_table thead,
	.stock_table tbody,
	.stock_table tr,
	.stock_table th,
	.stock_table td {display:block;}
	.stock_table thead tr {position:absolute;left:-9999px;top:-9999px}
	.stock_table tr:after {content:"";display:block;clear:both}
	.stock_table td {position:relative;float:left;width:100%;padding-left:50%;box-sizing:border-box}
	.stock_table td:before {position:absolute;left:10px;top:10px;font-weight:bold; color:#252525;}
	.stock_table .subject:before {content:"표지명"}
	.stock_table .stock:before {content:"재고수량"}
	.stock_table .stock {border-bottom:1px solid #aaa; text-align:left;}
}
@media all and (max-width:425px){
	.btn_down {width:50px; height:50px;}
	.btn_stock_pop {width:50px; height:50px;}

	.stock_pop_item h3 {padding:15px 3%; font-size:14px; font-weight:600;}
	.stock_pop_item {height:96%;}
}