/*
	(/images -> (/images 변경되어야함
*/
@charset "utf-8";

/*@import url("/lib/css/base.css");*/
@import url("base.css");

@import url(http://fonts.googleapis.com/earlyaccess/notosanskr.css);

/*
@font-face{
	font-family:"NanumSquare";
	src:url('/font/NanumSquare.eot');
	src:url('/font/NanumSquare.eot?#iefix') format('embedded-opentype'),
		url('/font/NanumSquare.woff') format('woff'),
		url('/font/NanumSquare.ttf') format('truetype'),
		url('/font/NanumSquare.ttf') format('truetype'),
		url('/font/NanumSquare.svg#NanumSquare') format('svg');
	src:local(※), url('/font/NanumSquare.woff') format('woff');
}

@font-face{
	font-family:"NanumSquareB";
	src:url('/font/NanumSquareB.eot');
	src:url('/font/NanumSquareB.eot?#iefix') format('embedded-opentype'),
		url('/font/NanumSquareB.woff') format('woff'),
		url('/font/NanumSquareB.ttf') format('truetype'),
		url('/font/NanumSquareB.ttf') format('truetype'),
		url('/font/NanumSquareB.svg#NanumSquareB') format('svg');
	src:local(※), url('/font/NanumSquareB.woff') format('woff');
}

@font-face{
	font-weight:300;
	src:url('/font/NanumBarunGothic.eot');
	src:url('/font/NanumBarunGothic.eot?#iefix') format('embedded-opentype'),
		url('/font/NanumBarunGothic.woff') format('woff'),
		url('/font/NanumBarunGothic.ttf') format('truetype'),
		url('/font/NanumBarunGothic.ttf') format('truetype'),
		url('/font/NanumBarunGothic.svg#NanumBarunGothic') format('svg');
	src:local(※), url('/font/NanumBarunGothic.woff') format('woff');
}
@font-face{
	font-weight:normal;
	src:url('/font/NanumBarunGothicBold.eot');
	src:url('/font/NanumBarunGothicBold.eot?#iefix') format('embedded-opentype'),
		url('/font/NanumBarunGothicBold.woff') format('woff'),
		url('/font/NanumBarunGothicBold.ttf') format('truetype'),
		url('/font/NanumBarunGothicBold.ttf') format('truetype'),
		url('/font/NanumBarunGothicBold.svg#NanumBarunGothicBold') format('svg');
	src:local(※), url('/font/NanumBarunGothicBold.woff') format('woff');
}
*/

#skipNavi{position:absolute; margin:0 auto; width:998px; list-style:none; font-size:1.15em; top:-10.5em; left:0; z-index:2000; background:#eee; border:1px solid #ccc;}
#skipNavi a:active, #skipNavi a:focus{ position: absolute; padding-top: 0.5em; width: 998px; height: 2em; top: 10.5em; text-align: center; color: #000; font-weight:bold; background: #eee; border: 1px solid #ccc; outline: 0;}

.hide{position:absolute; overflow:hidden; width:0; height:0; font-size:0;}

/* header */
#header{position:relative;}
.h_wrap{height:131px;}
.h_wrap:after{display:block; content:""; clear:both;}
.h_wrap .h_logo{position:relative; margin:0 auto; width:1200px;}
.h_wrap h1{position:absolute; top:71px; left:0; z-index:1510;}
.h_navi{height:45px; background:#546b82;}
.h_navi .utill{margin:0 auto; width:1200px;}
.h_navi .utill::after{display:block; content:""; clear:both;}
.utill_menu{float:right; overflow:hidden;}
.utill_menu li{float:left; border-right:1px solid #76899b; line-height:45px; transition:all 0.5s ease;}
.utill_menu li:first-child{border-left:1px solid #76899b;}
.utill_menu li:hover{background:#3f576e;}
.utill_menu li a{display:block; padding:0 20px; color:#fafafa; font-size:13px;}
.utill_menu .top_search{font-size: 0;padding: 0 10px;}
.utill_menu .top_search input[type=text]{height: 28px;padding: 0 10px;margin-right: 10px;display: inline-block;vertical-align: middle;}
.utill_menu .top_search button{display: inline-block;vertical-align: middle;}
.utill_menu .top_search img{vertical-align: middle;}
.m_krihs{display:none; overflow:hidden; position:absolute;}
.m_krihs a{display:inline-block; position:relative; float:right; z-index:1505; text-indent:-9999px; width:115px; height:36px; background:url(/images/header/krihs.png) no-repeat 16px 7px #fafafa; border:1px solid #d3d3d3; border-radius:2px; box-sizing:border-box;right:42px;margin-left:10px;}
.m_krihs a.logo{width:134px; height:38px; background-image:url(/images/header/unopen.png);background-position: left top;border: none;}

.side_menu{display:none;}
.m_option{display:none;}

.lnb{overflow:hidden; position:absolute; top:45px; left:0; width:100%; height:86px; z-index:1500;}
.lnb_bg{display:none; position:absolute; top:86px; left:0; width:100%; height:310px; background:#fcfcfc; border-top:1px solid #d9d9d9; border-bottom:1px solid #d9d9d9;}
.lnb > ul{position:relative; width:1200px; height:398px; margin:0 auto; z-index:500;}
.lnb > ul > li{float:left; margin:0; padding:0; height:398px;}
.lnb > ul > li:first-child{margin-left:265px;}
.lnb > ul > li > a{display:block; position:relative; padding:32px 0px; margin:0 16px; text-align:center; color:#333; font-size:22px; font-weight:500; line-height:22px;}
.lnb > ul > li > a::after{content:""; position:absolute; left:0; bottom:26px; width:0; height:2px; background:#555; transition:width 0.5s ease;}
.lnb > ul > li > a + p{position:absolute; top:75px; z-index:1; text-align:center; padding-bottom:15px; margin-top:35px; width:300px; font-size:18px; font-weight:500;}
.lnb > ul > li > a + p a{color:#224875;}
.lnb > ul > li.l_title1 > a + p{left:0;}
.lnb > ul > li.l_title2 > a + p{left:25%;}
.lnb > ul > li.l_title3 > a + p{left:50%;}
.lnb > ul > li.l_title4 > a + p{left:75%;}
.lnb > ul > li > a + p::after{content:""; position:absolute; bottom:0; left:50%; margin-left:-15px; width:30px; height:2px; background:#224875;}
.lnb > ul > li:hover > a::after{width:100%;}
.lnb > ul > li > a span{margin-right:5px; color:#898b1c; font-size:15px;}
.lnb > ul > li > ul{display:none; position:absolute; top:87px; padding-top:85px; width:300px; height:310px; border-right:1px solid #dbdbdb; box-sizing:border-box; transition:all 0.5s ease;}
.lnb > ul > li:first-child ul{border-left:1px solid #dbdbdb;}
.lnb > ul > li > ul.l_list_1{left:0}
.lnb > ul > li > ul.l_list_2{left:25%;}
.lnb > ul > li > ul.l_list_3{left:50%;}
.lnb > ul > li > ul.l_list_4{left:75%;}
.lnb > ul > li:hover > ul{background:#f5f5f5;}
.lnb > ul > li > ul > li{position:relative; padding-left:12px; margin:0 35px;}
.lnb > ul > li > ul > li::after{content:""; position:absolute; top:15px; left:0; width:4px; height:4px; background:#888; border-radius:2px;}
.lnb > ul > li > ul > li a{display:block; text-align:left; padding:7px 0px; color:#333; font-size:15px; line-height:17px;}
.lnb > ul > li > ul > li a:hover{color:#494949; text-decoration:underline;}

.krihs{overflow:hidden; position:absolute; bottom:25px; left:50%; margin-left:-600px; width:1200px;}
.krihs a{position:relative; float:right; z-index:1505; text-indent:-9999px; width:115px; height:36px; background:url(/images/header/krihs.png) no-repeat 16px 7px #fafafa; border:1px solid #d3d3d3; border-radius:2px; box-sizing:border-box;}
.krihs a.logo{width:134px;height:38px;background:url(/images/header/unopen.png) no-repeat 0px 0px #fff;border:0px;margin-left:26px;}

/* footer */
#footer{background:#4c535b;}
.f_wrap{overflow:hidden; padding:40px 0; width:1200px; margin:0 auto;}
.f_logo{float:left; margin:20px 55px 0 0;}
.f_sns{overflow:hidden; float:right;}
.f_sns li{float:left; margin-left:10px;}
.f_sns a{display:block;}
.f_txt{float:left;}
.f_txt p{margin-bottom:5px; color:#9da3aa;}
.f_txt p:first-child{margin-bottom:10px;}
.f_txt p b{color:#d9d9d9; font-weight:normal;}

/* drawer */
.dmm{position:fixed; top:0; left:0; right:0; height:10000px; background-color:rgba(0, 0, 0, 0.7); z-index:6000}
#naviMenu{position:fixed; top:0; right:-1000px; z-index:7000; width:100%; max-width:260px; min-height:800px; background:#fff;}
#naviMenu > div{overflow:auto; position:absolute; top:0; left:0; width:100%;}
#naviMenu ul.menuCtg{}
#naviMenu ul.menuCtg li.top_menu{overflow:hidden; width:100%; background:#546b82;}
#naviMenu ul.menuCtg li.top_menu p{float:left;}
#naviMenu ul.menuCtg li.top_menu p.gnbHome{padding:20px 4px 8px 20px;}
#naviMenu ul.menuCtg li.top_menu p.sitemap{padding:20px 20px 8px 4px;}
#naviMenu ul.menuCtg li.top_menu .top_search{font-size: 0;padding: 0 20px 20px;}
#naviMenu ul.menuCtg li.top_menu .top_search input[type=text]{height: 28px;padding: 0 10px;margin-right: 8px;display: inline-block;vertical-align: middle;width: 160px;}
#naviMenu ul.menuCtg li.top_menu .top_search button{display: inline-block;vertical-align: middle;}
#naviMenu ul.menuCtg li.top_menu .top_search img{vertical-align: middle;}
#naviMenu ul.menuCtg li.top_menu p a{display:block; text-align:center; margin:0 auto; width:105px; border:1px solid rgba(255, 255, 255, 0.5); color:#fff; font-size:13px; font-weight:300; line-height:14px; box-sizing:border-box;}
#naviMenu li.top_menu .gnbHome a{padding:7px 0 7px 18px; background:url(/images/common/gnbhome.png) no-repeat 26px center;}
#naviMenu li.top_menu .sitemap a{padding:7px 0 7px 16px; background:url(/images/common/sitemap.png) no-repeat 18px center;}
#naviMenu li.on > ul{}
#naviMenu li.on > ul > li{border-bottom:1px solid #d9d9d9;}
#naviMenu li.on > ul > li .t_a_line{overflow:hidden;}
#naviMenu li.on > ul > li .t_a_line .mnTit{float:left; overflow:hidden; padding:25px 20px; width:208px; color:#494949; font-size:16px; font-weight:normal; text-overflow:ellipsis; white-space:nowrap; line-height:16px; box-sizing:border-box;}
#naviMenu li.on > ul > li .t_a_line span.arrow{position:relative; cursor:pointer; float:left; padding:33px 0; width:52px;}
#naviMenu li.on > ul > li .t_a_line span.arrow::before{content:""; position:absolute; top:32px; right:20px; width:12px; height:2px; background:#aaa; transition:all 0.5s;}
#naviMenu li.on > ul > li .t_a_line span.arrow::after{content:""; position:absolute; top:27px; right:25px; width:2px; height:12px; background:#aaa; transition:all 0.5s;}
#naviMenu li.on > ul > li.on{border-top:1px solid #c4cbd6;}
#naviMenu li.on > ul > li.on .t_a_line{background-color:#304e71;}
#naviMenu li.on > ul > li.on .t_a_line .mnTit{color:#fff;}
#naviMenu li.on > ul > li.on .t_a_line span.arrow{}
#naviMenu li.on > ul > li.on .t_a_line span.arrow::before{background:#fff; transform:rotate(180deg);}
#naviMenu li.on > ul > li.on .t_a_line span.arrow::after{opacity:0; transform:rotate(180deg);}
#naviMenu li.on > ul > li > ul.side_sub{display:none; padding:10px 0; background:#f4f4f4; border-top:none}
#naviMenu li.on > ul > li > ul.side_sub > li{border-bottom:none;}
#naviMenu li.on > ul > li.on > .side_sub{display:block;}
#naviMenu .side_sub > li > a{display:block; position:relative; padding:10px 10px 10px 30px; color:#494949; font-size:14px; line-height:14px;}
#naviMenu .side_sub > li > a:hover{color:#1a5580; text-decoration:underline;}
#naviMenu .side_sub > li > a::before{content:""; position:absolute; top:16px; left:17px; width:5px; height:5px; background:#aaa;}
#naviMenu .side_sub > li > a:hover::before{background:#1a5580;}
#naviMenu .side_sub > li > ul > li:last-child{margin-bottom:10px;}
#naviMenu .side_sub > li > ul > li a{display:inline-block; position:relative; padding:4px 10px 4px 40px; font-size:13px;}
#naviMenu .side_sub > li > ul > li a::before{content:''; position:absolute; top:13px; left:28px; width:6px; height:2px; background:#aaa;}
#naviMenu .closeArea{position:absolute; top:20px; left:-42px;}
/*#naviMenu .closeArea .close{display:block; position:relative; width:30px; height:29px; background:url('/images/common/bg_btn.png') no-repeat 0 0; z-index:6001;}*/
#naviMenu .closeArea .close{display:block; position:relative; width:30px; height:29px; background:url('/images/common/bg_btn.png') no-repeat 0 0; z-index:6001;}
#naviMenu .select_box_1 {text-align:center; font-size:15px;}
#naviMenu .select_box_1 select{width:180px; height:28px; border:1px solid #d7d7d7;}
#naviMenu .select_box_1 span a{display:inline-block; padding:6px 8px; color:#fff; font-size:14px; background:#2996cc;}

.select_box_1 {padding:12px 0 12px 20px;}
.select_box_1 span.select select {width:72%; height:28px; border:1px solid #d7d7d7;}
.select_box_1 p {margin-bottom:7px;}

/*모달팝업*/
.modalpopup{display:none;position:fixed;z-index:1510;top:50px;background-color:#fff;}
.modalpopup.zip{width:550px;top:100px;margin:0 0 0 -275px;}
.modalpopup .close{position:absolute;right:0;top:0;width:35px;height:35px;background:#20252b url('/images/common/fileboxclose.png') center center no-repeat;}
.modalpopup.zip .close{background:#840F10 url('/images/common/fileboxclose.png') center center no-repeat;}
.modalpopup > .w{position:relative;border:3px solid #393f49;}
.modalpopup.zip > .w{border-color:#b41112;}
.modalpopup .tit{height:35px;line-height:35px;text-align:center;background-color:#393f49;color:#fff;font-size:16px;font-weight: 500; cursor: move;}
.modalpopup.zip .tit{background-color:#b41112;}
.modalpopup .bot{padding:10px 0 5px 0;text-align:right;background-color:#393f49;color:#ccc;font-size:11px;position: absolute;  bottom: 0px; width: 100%;}
.modalpopup .bot label{margin-right:5px;}
.modalpopup .bot input{margin-top:0;position: static;width: auto;height: auto;}
.modalpopup .content{font-size:12px;}
.modalpopup.zip .content{padding:10px;}
.modalpopup.zip #zip1{}
.modalpopup.zip #zip2{display:none;}
.modalpopup ul.detailList{font-size:11px;}
.modalpopup ul.detailList > li{display:inline-block;height:28px;line-height:28px;margin-right:15px;}
.modalpopup ul.detailList > li img{vertical-align:middle;}
.modalpopup .scrollWrap{max-height:280px;overflow-y:scroll;-webkit-overflow-scrolling:touch;}
.modalpopup .zipTab{position:relative;overflow:hidden;font-size:13px;font-weight: 500;text-align:center;}
.modalpopup .zipTab li{float:left;width:120px}
.modalpopup .zipTab li.last{margin-right:0;}
.modalpopup .zipTab > li > a{display:block;height:34px;line-height:34px;border:1px solid #cdcdcd;border-right:none;background-color:#fff;}
.modalpopup .zipTab > li.last > a{border-right:1px solid #cdcdcd;}
.modalpopup .zipTab > li.active{position:relative;z-index:1;}
.modalpopup .zipTab > li.active > a{color:#fff;border-color:#b41112;background-color:#b41112;}
.modalpopup .solo{width:96%;max-width:360px;}
.modalpopup .zipMsg{margin-bottom:10px;padding:20px 10px;line-height:1.5em;background:#f7f7f7}
.modalpopup .ipw100{position:relative;padding-right:62px;}
.modalpopup .ipw100 input{width:100%;height:26px;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box}
.modalpopup .ipw100 > button{position:absolute;right:0;top:0;height:26px;}
.rgba {
	background: rgba(0, 0, 0, 0.5);
	/*
		IE8이하는 rgba가 동작하지 않기 때문에 배경 투명도 적용을 위해 filter의 gradient을 대체 이용한다.
		컬러값 60000000의 8자리 숫자의 의미: 앞 60 불투명도, 나머지 6자리 컬러값.
		startColorstr와 endColorstr의 색을 같게 하여 배경 투명도 처리를 하는것.
		하지만 원래는 그라데이션 처리하는 기법이기 때문에 같은 60% 투명도라고 해도 약간의 차이는 있다.
	*/
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#60000000,endColorstr=#60000000);
	zoom: 1; /* 일반적이진 않지만 ie6, 7 에서 적용 안되는경우 선언. */
}
.opacity { background: #000; opacity: 0.5; filter: alpha(opacity=50); }
.blind{display:block;overflow:hidden;top:-10000em;position:absolute;}



@media only screen and (max-width:1100px) {

	#header{border-top:solid 3px #546b82;}
	.h_wrap{position:relative; margin:0 auto; width:750px; height:65px;}
	.h_wrap .h_logo{width:auto;}
	.h_wrap h1{top:19px; left:50%; margin-left:-95px;}
	.h_wrap h1 img{height:28px;}
	.h_navi{display:none;}
	.lnb{display:none;}
	.krihs{display:none;}
	.m_krihs{display:block; width:300px; margin-left:0; left:0; bottom:13px;}
	.side_menu{display:block; position:absolute; bottom:22px; right:0;}

	.f_wrap{position:relative; width:750px;}
	.f_sns{position:absolute; top:40px; right:0;}
}


@media only screen and (max-width:768px) {

	#header{padding:0 2%;}
	.h_wrap{width:auto;}
	.h_wrap h1{left:0; margin-left:0px;}
	.m_krihs{display:none;}

	#footer{padding:0 2%;}
	.f_wrap{width:auto;}
	.f_logo{float:none; margin:0px 0px 30px 0;}
	.f_txt{float:none;}

}