@charset "utf-8";

/*-----------------------------------------------------------------------------------
	충남도서관 다국어 common Style    
	Last : 2018.04.12
-----------------------------------------------------------------------------------*/
@font-face{
	font-family:'NanumBG';
	src:url('../font/encn/NanumBarunGothicWeb.eot');
    src:url('../font/encn/NanumBarunGothicWeb.eot?#iefix') format('embedded-opentype'), 
    	url('../font/encn/NanumBarunGothicWeb.woff') format('woff');  
}
@font-face{
	font-family:'NanumG';
		src:url('../font/encn/NanumGothic.eot');
    src:url('../font/encn/NanumGothic.eot?#iefix') format('embedded-opentype'), 
    		url('../font/encn/NanumGothic.woff') format('woff'),
    		url('../font/encn/NanumGothic.ttf') format('truetype');  
}
@font-face{
	font-family:'NanumGB';
		src:url('../font/encn/NanumGothicB.eot');
    src:url('../font/encn/NanumGothicB.eot?#iefix') format('embedded-opentype'), 
    		url('../font/encn/NanumGothicB.woff') format('woff'),
    		url('../font/encn/NanumGothicB.ttf') format('truetype');  
}



html, body, div,  p, span, em, i, h1, h2, h3, h4, h5, h6, dl, dt, dd, ol, ul, li, blockquote, pre, button, fieldset, form, legend,
table, caption, tbody, tfoot, thead, tr, th, td, iframe, article, aside, canvas, details, address,
figure, figcaption, header, footer, menu, nav, section, summary, audio, video {margin:0; padding:0; border:0; font-size:inherit; font-family:inherit; font-style:normal; vertical-align:baseline}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {display:block}

html {height:100%; overflow-x:hidden; text-size-adjust:none; -webkit-text-size-adjust:none; -moz-text-size-adjust:none; -ms-text-size-adjust:none}
body * {box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; word-break:break-all}
body {height:100%; line-height:20px; font-size:13px; line-height:1.6em; color:#555; font-family:'NanumG', Arial, 'applegothic', 'AppleSDGothicNeo', sans-serif; letter-spacing:0; word-spacing:0}
/*
:lang(en), .en {font-size:13px; font-family:Verdana , Arial, 'Helvetica Neue', Helvetica, sans-serif}
:lang(zh-cn), .zh {font-size:14px; font-family:'Microsoft Yahei', 'Verdana', 'SimSun', STXihei, sans-serif }
*/
a {text-decoration:none}
table {border-collapse:collapse; border-spacing:0}
caption {overflow:hidden; width:0; height:0; margin-top:-1px; font-size:0; line-height:0; text-indent:-9999px; color:transparent; background:none}
table th {font-weight:normal; font-size:13px; vertical-align:middle}
table td {vertical-align:middle}
label {cursor:pointer}
legend {position:absolute; width:1px; height:1px; background:none; font-size:3px; color:transparent; line-height:0;}
hr {visibility:hidden; overflow:hidden; position:absolute; height:0; width:0; font-size:0}
img {border:none; vertical-align:middle; -ms-interpolation-mode:bicubic}
ol, ul, li {list-style:none;}
h1, h2, h3, h4, h5, h6 {font-weight:normal}
button {text-transform:none; vertical-align:middle; cursor:pointer}
button, [type="button"], [type="reset"], [type="submit"] {background-color:transparent}

::selection {color:#fff; background:#252525; text-shadow:none; filter:alpha(opacity=50) !important; -khtml-opacity:0.5 !important; -moz-opacity:0.5 !important; opacity:0.5 !important;}

.clfix:after {display:block; visibility:hidden; overflow:hidden; clear:both; height:0; content:''}
.clfix {display:block}

.skip {overflow:hidden; position:absolute; width:1px; height:1px; margin:0; padding:0; background:none; font-size:0; line-height:0;}

.disNone   {display:none;}
.disBlock  {display:block;}
.disInline {display:inline-block;}

.fl {float:left !important}
.fr {float:right !important}
.al {text-align:left !important}
.ac {text-align:center !important}
.ar {text-align:right !important}



/*========== ========== Skip Navigation ========== ==========*/
#skip_nav {width:100%; height:0}
#skip_nav a {display:block; position:absolute; top:-1000em; left:0; padding:10px; text-align:center; font-family:'NanumG'; color:#fff; background-color:#000; z-index:100; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; filter:alpha(opacity=60)}
#skip_nav a:focus, #skip_nav a:hover, #skip_nav a:active {position:relative; top:0;}



/*========== ========== Layout ========== ==========*/
#wrapper {position:relative; overflow:hidden; width:100%; margin:0 auto}
.wrap {position:relative; width:1200px; margin:0 auto}


/*========== Top ==========*/
#header {position:relative; width:100%; height:80px; margin:0 auto}
#header .gnb {overflow:hidden}
#header .gnb ul {float:right; margin-right:10px}
#header .gnb li {float:left; margin:0 5px}
#header .gnb li a {display:block; padding:5px; font-size:12px; color:#555; font-family:'NanumBG'}
#header .gnb li.on a, #header .gnb li a:hover, #header .gnb li a:focus {color:#f7941e}
#header .logo {position:absolute; top:4px; left:37px; width:166px; height:64px}
#header .logo a {display:block; width:100%; height:100%; font-size:0; background:url('../../images/encn/common/logo.png') no-repeat 0 0}

.lnb_m_nav, .mask, #lnb .gnb_m, .lnb_close, #lnb ul li a .more {display:none}
#lnb a {display:block}
#lnb > ul {float:right}
#lnb > ul > li {float:left; margin:13px 20px 0 50px}
#lnb > ul > li > a {padding:0 0 15px 0; font-size:20px; color:#333;  font-family:'NanumGB'}
#lnb > ul > li > a.on {color:#f7951f; background:url('../../images/encn/common/lnb_dep_on.gif') no-repeat 50% bottom}
#lnb .lnbDep2bg {display:none; position:absolute; top:74px; left:0; width:100%; height:46px; background-color:#fff; border:3px solid #f7951f; border-radius:30px; z-index:100}
#lnb > ul div.depth2 {display:none}
#lnb > ul div.top2m {display:none; position:absolute; top:74px; width:auto; z-index:200}
#lnb > ul div.depth2 ul {margin:0}
#lnb > ul div.depth2 li {float:left; margin:0 25px} 
#lnb > ul div.depth2 li a {padding:12px 0; font-size:14px; font-weight:200; color:#444}
#lnb > ul div.depth2 li a:hover,#lnb > ul div.depth2 li a:focus {color:#f26522; text-decoration:underline}
#lnb > ul li.dep1 .depth2.top2m{left:500px}
#lnb > ul li.dep2 .depth2.top2m{left:700px}
#lnb > ul li.dep3 .depth2.top2m{left:800px}


/*========== Container ==========*/
#container {position:relative; width:100%; min-width:1200px; margin:0 auto}
#container:after {content:""; display:block; clear:both}


/*========== Bottom ==========*/
#footer {position:relative; width:100%; min-width:120px; margin:0 auto; background-color:#e1e1e1; z-index:20}
#footer .wrap {padding:20px 0}
#footer dl {overflow:hidden; margin:0 0 30px 50px; line-height:22px}
#footer dt {float:left; margin-right:20px; font-family:'NanumGB'; font-size:14px; color:#444}
#footer dd {float:left; font-family:'NanumG'}
#footer dd .call {padding-left:15px; margin-bottom:8px; background:url('../../images/encn/common/ico_foot_call.png') no-repeat 0 5px}
#footer dd address {padding-left:15px; background:url('../../images/encn/common/ico_foot_location.png') no-repeat 0 5px}
#footer .copy {padding:20px 0; text-align:center; font-size:12px; color:#949494; border-top:1px solid #cdcdcd}



@media screen and (max-width:1200px){
	.wrap {width:100%}
	#container {min-width:100%}

	#lnb > ul > li {margin-left:40px}
}



@media screen and (max-width:1024px){
	#lnb > ul > li {margin-left:30px}
	#lnb > ul li.dep1 .depth2.top2m{left:200px}
	#lnb > ul li.dep2 .depth2.top2m{left:180px}
	#lnb > ul li.dep3 .depth2.top2m{left:460px}

	/*========== Bottom ==========*/
	#footer dl {margin:0 30px 30px}
}



@media screen and (max-width:800px){
	#header {height:60px; -webkit-transition:all 0.3s ease; -moz-transition:all 0.3s ease; -ms-transition:all 0.3s ease; transition:all 0.3s ease}
	#header .gnb {display:none}
	#header .logo {position:relative; top:0; left:0; width:220px; height:60px; padding:10px }
	#header .logo a {background:url('../../images/encn/common/logo_m.png') no-repeat 0 0}

	.lnb_m_nav{display:block; position:absolute; right:10px; top:10px}
	.lnb_m_nav button {position:relative; width:40px; height:40px; padding:0; z-index:100; transform:rotate(0deg); transition:.5s ease-in-out}
	.lnb_m_nav button {background:url('../../images/encn/common/icon_st.png') no-repeat 0 -32px}
	.lnb_m_nav button.open {left:-40px; background-position:right -32px}
	.mask {position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.6); z-index:110}
	#lnb {overflow-y:scroll; position:fixed; top:0; right:-320px; left:inherit; width:300px; height:100%; background-color:#fff; z-index:110}
	#lnb .lnbDep2bg {display:none !important}
	#lnb .gnb_m {display:block; background:url('../../images/encn/common/depth2_bg.gif') repeat 0 0; border-bottom:1px solid #ddd}
	#lnb .gnb_m ul {padding:10px}
	#lnb .gnb_m ul li {float:left; margin:0 5px; padding:0; border:0; background:none}
	#lnb .gnb_m ul li a {display:block; padding:6px 8px; margin:0; font-size:14px; color:#555; font-family:'NotoR'}
	#lnb .gnb_m ul li.on {background-color:#fff; border:1px solid #ddd; border-radius:30px}
	#lnb .gnb_m ul li a:hover {text-decoration:underline}
	#lnb > ul {float:none}
	#lnb > ul > li {display:block; float:none; margin:0; background-color:#f7941e; border-bottom:solid 1px #dd8419}
	#lnb > ul > li.last {border-color:#ddd;}
	#lnb > ul > li > a {padding:20px 10px; color:#fff}
	#lnb > ul > li > a:hover, #lnb > ul > li > a.active {background-color:#f26522}
	#lnb > ul div.top2m {position:static; padding:10px 0; height:100%; background:url('../../images/encn/common/depth2_bg.gif') repeat 0 0 }
	#lnb > ul div.depth2 ul {overflow:hidden; padding:0}
	#lnb > ul div.depth2 li {float:none; margin:8px 10px 0 15px; border-bottom:1px solid #ddd}
	#lnb > ul div.depth2 li.last {border-bottom:0}
	#lnb > ul div.depth2 li a {padding:8px 0}
	

	/*========== Bottom ==========*/
	#footer dl {margin:0 3% 3%}
	#footer dt {float:none; margin:0 0 10px 0}
	#footer dd {float:none; margin-bottom:4px}
}



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

}



@media screen and (max-width:640px){
	/*========== Bottom ==========*/
	#footer dl {margin:0 5% 3%}
	#footer .copy {padding:20px}
}



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

}



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

}