﻿html, body {font-family: 'Pretendard', 'malgun gothic', '맑은고딕', '돋움', 'Sans-serif', arial; -webkit-text-size-adjust: 100%; font-size: 17px;}

body{position:relative; overflow-x:hidden;}
.hide{position:absolute; display:block; overflow:hidden; border:0; width:1px !important; height:1px !important; clip: rect(1px, 1px, 1px, 1px); clip-path:inset(50%);}
.left{text-align:left !important;}
.center{text-align:center !important;}
.right{text-align:right !important;}
a{display:block;}
/*사이트맵*/
.lnb > ul > li {min-height: 640px;}

.red{color:#e9310f !important; }
.blue{color:#2a6de8 !important; }
.bold{font-weight:bold !important; }
.centerBox{width:100%; text-align:center; }
.rightBox{width:100%; text-align:right;}
.imgCenter{margin:0 auto; max-width:100%; display:block;}
.imgMax{max-width:100%; display:block;}
.floatClear:after{content: ''; display: block; clear: both; visibility: hidden;}

input{height:40px; line-height:38px; padding-left:10px; border:1px solid #ccc; vertical-align:middle; font-family: 'Pretendard', 'malgun gothic', '맑은고딕', '돋움', 'Sans-serif', arial;}
input:-ms-input-placeholder { color: #aaa; }
input::-webkit-input-placeholder { color: #aaa; } 
input::-moz-placeholder { color: #aaa; }
input[type=password] { font-family:'Pretendard', 'malgun gothic', '맑은고딕', '돋움', 'Sans-serif', arial; }
/*인풋 기본 스타일*/

#skip_navigation {position:absolute; float:left; top:0px; left:0px; width:200px; font-size:14px; font-weight:bold; padding-left:10px; height:20px; z-index:99999;}
#skip_navigation a { position:absolute; display:block; height:0; overflow:hidden;}
#skip_navigation a:hover, #skip_navigation a:focus, #skip_navigation a:active { height:auto; background:#333; color:#f9f9f9; padding:10px 10px 10px 10px; }
/*스킵네비*/


.headerArea{width:100%; box-sizing:border-box; z-index:9000;}
.headerArea header .maxBox{position:relative;}
.sideNav > ul{display:inline-block;}
.sideNav > ul > li{display:inline-block; margin-left:7px;}
.sideNav > ul > li img {width:16px}
.lnbBtn{margin-left:7px; display:inline-block;}

footer{background:#F8F8F8; padding-bottom:36px; }
.footerList{background:#F0F0F0;}
.footerQlist li {display:inline-block; margin-right:40px; line-height:60px; } 
.footerQlist li a{color:#111; font-size:15px; } 
.footerQlist li:first-of-type a{color:#ff4500; font-weight:bold;} 
.footerBottom{padding-top:36px;} 
.footerBottom > a{float:left; width:281px;}
.footerAddress{color:#111; font-size:15px; line-height:150%; float:left; width:calc(100% - 625px); margin-left:32px;}
.footerAddress address{margin-bottom:72px;}
.footerSiteList{float:left; width:280px; margin-left:32px;}
footer .siteList{margin-bottom:12px;}
footer .siteList:after{content:''; display:block; visibility:hidden; clear:both;}
footer .siteList select{float:left; border:none; height:40px; line-height:40px; font-size:15px; padding:0 10px; width:200px; box-sizing:border-box; border-radius:6px; background:#fff url(/images/uce/commmon/menuArr.png) right 10px center no-repeat; }    
footer .siteList a{float:left; color:#fff; background-color:#555; height:40px; line-height:40px; font-size:15px; width:76px; margin-left:4px; text-align:center; display:block; border-radius:6px;}    
.waMark{width:95px; display:block;}
/*푸터*/

.scrollAc{position:fixed; top:0; background:#fff;}
.breadContent > ul {margin-bottom:30px;}
.breadContent > ul > li{float:left; margin-left:8px;}
.breadContent > ul > li:before{content:''; display:inline-block; width: 12px; height:10px; background:url(/images/uce/commmon/bread.png) left center no-repeat;}
.breadContent > ul > li:first-of-type{ margin-left:0px;}
.breadContent > ul > li:first-of-type:before{display:none;}
.breadContent > ul > li a{color:#777; font-size:15px; line-height:150%; display:inline-block;}
.contentBox > h3{font-size:32px; font-weight:bold; line-height:150%; margin-bottom:30px;}

/*0826 모바일 도서관 바로가기 추가*/
.mob_quick {display: none;}

/*1210 도서관바로가기 수정*/
.topList .left .mobileYes {display: none;}
.lnb > ul > li {min-height:764px}

/*1216 답변추가*/

.reple {color: #777; display: inline-block; margin-left: 8px; font-size: 16px;}
.reple::before {content: '- ';}

@media all and (max-width:1299px) {  
    .topList .maxBox{width:100%}
    .topList{ border-bottom:1px solid #c6c6c6;}
    .topList .left {float:left;}
    .topList .left li{display:inline-block; line-height:42px;}
    .topList .left > li > a{padding:0 20px;}
    .topList .left > li:first-of-type > a{ color:#000; background: #ff4500;}
    .topList .right{ float:right;}
    .topList .right li{padding:5px 4px; display:inline-block; line-height:32px;}         
    /*1210 삭제.topList .left li.libSlist, .topList .right li.moN:last-child{display:none;} /* 0826 모바일에서 eng 포함하기 위해 last-child로 변경 */
    .topList .left li.libSlist, .topList .right li.moN:first-child{margin-right: 20px; font-weight: bold;} /* 0826 모바일에서 eng 추가 */
    /*헤더상단*/

    /*1210 추가*/
    .topList .left .mobileYes {display: block !important;}
    .libSlist{position:relative;}  
    .topList .left > li.libSlist > a{background:url(/images/uce/commmon/menuArr.png) right 0px center no-repeat; padding:0 18px 0 14px; font-size: 14px;}
    .topList .left > li.libSlist.active > a{background:url(/images/uce/commmon/menuArrAc.png) right 0px center no-repeat; }   
    .libSlist > ul{display:none; position:absolute; top:43px; left:0; width:230px; background:#fff; z-index:99; border:1px solid #c6c6c6; border-top:1px solid #fff; padding:15px 20px; box-sizing:border-box;}  
    .libSlist > ul li{display:block; width:100%; }  
    .libSlist > ul li a{display:inline-block; padding:0 10px; line-height:40px;}  
    .libSlist > ul li a:hover{color:#0074e5;}  

    .topList .left li:first-child {display: none;}


    
    .headerBox{height:54px; border-bottom:1px solid #c6c6c6;}
    .headerArea header h1{padding:11px 0; z-index:200; display:inline-block; width:194px;}
    .sideNav{position:absolute; top:16px; right:0; z-index:200;}
    .sideNav > ul, .sideNav > a .moN{display:none;}
	.dep1{display:none;}    
    .lnb {position: fixed; top: 0; bottom:0; right:0; left: 0; display: none; overflow-y: auto; background: #fff4f0;  z-index:9999 !important; box-sizing:border-box;}
    .lnb .pcN {border-bottom:1px solid #ccc; padding:8px 60px 8px 0;}
    .lnb .pcN li{display:inline-block; line-height:24px; margin:5px 0 5px 10px;}
    .lnb .pcN li img{margin:0 5px 3px 0; vertical-align:middle; width: 16px;}
    .lnb .lnbSubList span {position:absolute; top:0px; right:0px; }
    .lnbList{position:relative; height:calc(100% - 51px); }
    .lnbList:after{position:absolute; height:100%; width:1px; content:''; display:block; background:#ccc; top:0; left:150px;}
    .lnbList > li {box-sizing: border-box; font-size: 16px; line-height: 50px; overflow:hidden; width:150px;}
    .lnbList > li > a{ display:block; color:#000; padding-left:15px; background:url(/images/uce/commmon/moBulBR.png) 92% center no-repeat; background-size:15px;}
    .lnbList > li > a.active, .lnbList > li:hover > a{background:url(/images/uce/commmon/moBulR.png) #ff4500 92% center no-repeat; background-size:15px;  color:#fff; font-weight:bold;}
    .lnbList > li > ol { display:none; position:absolute; top:0px; left:150px; width:calc(100% - 150px); bottom:0; background:#fff;}
    .lnbList > li > .active + ol {display:block;}
    .lnbList > li > ol > li > a{font-size:15px; padding-left:15px; color:#000; line-height: 49px; border-top:1px solid #e5e5e5; display:block;}
    .lnbList > li > ol > li > a img{vertical-align:middle; margin-left:5px; padding-bottom:2px; display:inline-block;} 
    .lnbList > li > ol > li:first-of-type > a{ border-top:none; }
    .lnbList > li > ol > li > a.active, .lnbList > li > ol > li:hover > a{color:#ff4500; font-weight:bold;}
    .lnbList > li > ol > li > ol{display:none; background:#fff4f0 ; border-top:1px solid #ddd; padding:10px 0; }
    .lnbList > li > ol > li > a.active + ol{display:block; }
    .lnbList > li > ol > li > ol li{ line-height: 35px;}
    .lnbList > li > ol > li > ol li a{font-size:14px; padding-left:25px; color:#000; position:relative;}    
    .lnbList > li > ol > li > ol li a:before { content:''; position:absolute; top:13px; left:16px; width:6px; height:6px; border-radius:3px; box-sizing:border-box; border:2px solid #666; }
    .lnbList > li > ol > li > ol li a:hover, .lnbList > li > ol > li > ol li a.active{color:#ff4500;}
    .lnbBg { position: fixed; top: 0; bottom:0; right:0; left: 0; z-index: 9990; display: none; background: rgba(0, 0, 0, 0.5);}   
    /*헤더*/
    
    .scrollAc + div{margin-top:100px;}
    .scrollAc .topList{display:none;}

    .subSideNav{display:none;}
    
    .subConBox{margin:64px auto !important;}

    /*0826 모바일 도서관 바로가기 추가*/
    .mob_quick {display: block;}
    
    /*0905 모바일 통합검색 추가*/
    .lnb .msWrap {padding-right: 0;}
    .mobSearch label {margin:0 10px 0 10px;}
    .mobSearch input {width:calc(100% - 170px); border-radius: 4px;}
    .mobSearch button {background:#ff4500; color:#fff; height: 42px; padding:0 16px; border-radius: 4px;}

	/*사이트맵*/
    .lnb > ul > li {min-height: initial;}
}
/*태블릿모바일*/
@media all and (max-width:860px) {
    /* .topList .right li:last-child {display: none;} */
    .maxBox {width:calc(100% - 48px); margin:0 auto;}
       
    #skip_navigation{display:none;}     
    
    footer{padding-bottom:16px;}
    .footerQlist{padding:10px 0;}
    .footerQlist li {margin-right:12px; line-height:32px; } 
    .footerQlist li a{ font-size:14px; } 
    .footerBottom{padding:16px 0 32px;} 
    .footerBottom > a{float:none; width:200px; margin-bottom:10px;}
    .footerAddress{ float:none; width:100%; margin-left:0; position:relative;}
    .footerAddress address{margin-bottom:28px;}
    .footerAddress .copyright{position:absolute; top:250px;}
    
    .footerSiteList{float:none; margin-left:0px;}  
    .waMark{margin-bottom:80px;}
    /*푸터*/
}
/*mobile*/
@media all and (min-width:861px) and (max-width:1299px) {  
    /* .topList .right li:last-child {display: none;} */
    .topList .right li.instano {display: none;} /*1121 sns 추가*/
    .moV{display:none;}

    .maxBox {width:calc(100% - 80px); margin:0 auto;}  
    
    footer{padding-bottom:24px;}
    .footerQlist li {margin-right:24px; line-height:50px; } 
    .footerBottom{padding-top:24px;} 
    .footerBottom > a{width:150px;}
    .footerAddress{ width:calc(100% - 448px); margin-left:24px;}
    .footerAddress address{margin-bottom:56px;}
    .footerSiteList{ width:250px; margin-left:24px;}
    footer .siteList select{width:180px; }    
    footer .siteList a{width:66px; margin-left:4px;}    
    .waMark{width:72px;}
    /*푸터*/
}
/*tablet*/
@media all and (min-width:1300px) {  
    .topList .right li.instano {display: none;} /*1121 sns 추가*/
    .moV{display:none;}

    .maxBox {width:1280px; margin:0 auto;}

    .topList{ border-bottom:1px solid #c6c6c6;}
    .topList li a{font-size:15px; color:#111; font-weight:bold; }
    .topList .left {float:left;}
    .topList .left li{display:inline-block; margin-right:-4px; line-height:54px;}
    .topList .left > li > a{padding:0 30px;}
    .topList .left > li:first-of-type > a{ color:#000; background: #ff6a33;}
    .topList .right{ float:right;}
    .topList .right li{padding:11px 4px; display:inline-block; line-height:32px;}
    .libSlist{position:relative;}  
    .topList .left > li.libSlist > a{background:url(/images/uce/commmon/menuArr.png) right 25px center no-repeat; padding:0 55px 0 30px;}  
    .topList .left > li.libSlist.active > a{background:url(/images/uce/commmon/menuArrAc.png) right 25px center no-repeat; }  
    .libSlist > ul{display:none; position:absolute; top:54px; left:0; width:180px; background:#fff; z-index:99; border:1px solid #c6c6c6; border-top:1px solid #fff; padding:15px 20px; box-sizing:border-box;}  
    .libSlist > ul li{display:block; width:100%; }  
    .libSlist > ul li a{display:inline-block; padding:0 10px; line-height:40px;}  
    .libSlist > ul li a:hover{color:#ff4500;}  
    /*헤더상단*/
    .headerArea header h1{padding:26px 0; z-index:200; display:inline-block;}
    .sideNav{position:absolute; top:26px; right:0; z-index:200;}
    .sideNav > ul > li  a , .sideNav > a {margin:0 10px;}
    .sideNav > ul > li  a img{display:block; margin:0 auto 12px auto;}
    .sideNav > a img{display:block; margin:0 auto 14px auto;}
    .sideNav > a img.pcN{display:none;}

    .lnb {position: fixed; top: 0px; right:0; left: 0; display: none; background:#fff;  background-repeat: no-repeat;  background-position: 10% 90%, 10% 5%; height:100vh; z-index:9999 !important; box-sizing:border-box; padding:80px 10px; overflow-y:auto;}
    .pcN{display:none;}
    .lnb .lnbSubList span {position:absolute; top:10px; right:10px; }    
    .lnb > ul{ width:1280px; margin:0 auto;}
    .lnb > ul:after{content:''; display:block; visibility:hidden; clear:both;}
    .lnb > ul > li {box-sizing: border-box; float:left; width:20%; padding: 0 10px;}
    .lnb > ul > li > a{border:1px solid #ddd; text-align:center; line-height:50px; font-size:18px; box-sizing:border-box; border-radius:6px; background:#fff4f0; margin-bottom:10px;}
    .lnb > .lnbList > li > ol > li > a{ line-height: 40px; font-size:15px; padding-left:10px; border-bottom:1px solid #ddd; color:#666; font-weight:bold; background:rgba(255, 255, 255, 0.75);}
    .lnb > .lnbList > li > ol > li > a:hover{color:#ff4500;}
    .lnb > .lnbList > li > ol > li > ol {border-bottom:1px solid #ddd; padding:5px 7px; background:#fff4f0;}
    .lnb > .lnbList > li > ol > li > ol  li a{font-size:14px; line-height:22px; padding:3px 0 3px 15px; color:#666; display:block; position:relative;}
    .lnb > .lnbList > li > ol > li > ol  li a:hover{color:#ff4500;}
    .lnb > .lnbList > li > ol > li > ol li a:before { content:''; position:absolute; top:11px; left:5px; width:6px; height:6px; border-radius:3px; box-sizing:border-box; border:2px solid #b6b6b6; }
    .lnb-bg { display:none;}
    /*사이트맵*/
    
    .scrollAc .topList{display:none;}  
    .scrollAc .headerBox .maxBox h1{padding:12px 0; width:200px;} 
    .scrollAc .headerBox .sideNav{top:21px;}
    .scrollAc .headerBox .sideNav > ul > li  a img{display:none; }
    .scrollAc .headerBox .sideNav > a img{display:none;}


    .dep1{border-top:1px solid #c6c6c6; border-bottom:1px solid #c6c6c6;}
    .dep1 > ul{position:absolute; top:0; left:50%; margin-left:-640px; width:1280px; z-index:97; height:60px;}
    .dep1 > ul > li{float:left; width:20%; text-align:center;}  
    .dep1 > ul > li > a{line-height:52px; font-size:18px; color:#333; background:url(/images/uce/commmon/menuArr.png) right 10px center no-repeat; display:inline-block; padding:0 30px 0 10px; box-sizing:border-box; border-bottom:4px solid #fff; border-top:4px solid #fff}    
    .dep1 > ul > li.active > a{background:url(/images/uce/sio/subPage/menuArrAcb.png) right 10px center no-repeat; color:#ff4500; border-bottom:4px solid #ff4500;}    
    .dep1 > ul > li > .navBg{display:none; position:absolute; top:61px; left:50%; margin-left: -50vw; height:0; overflow:hidden; width:100vw; z-index:50; box-sizing:border-box; background: #fff;}
    .dep1 > ul > li.active > .navBg{display:block; height:auto; border-bottom:1px solid #c6c6c6;} 
    .dep1 > ul > li > .navBg .headerAreaCenterBox{width:1280px; margin:0 auto; z-index:60; box-sizing:border-box; position:relative; padding-left:290px; background: url(/images/uce/commmon/menuBg.png), url(/images/uce/commmon/menuBgT.png); background-repeat: no-repeat; background-position: left top 146px, left top 20px; background-size:200px;}
    .dep1 > ul > li.active > .navBg .headerAreaCenterBox{height:auto; min-height:320px;}    
    .dep1 > ul > li.active > .navBg .headerAreaCenterBox p{position:absolute; color:#ff4500; font-size:30px; font-weight:900; top:68px; left: 20px; display:inline-block;}   
    .dep1 > ul > li > .navBg > .headerAreaCenterBox > ol{z-index:100; text-align:left; box-sizing:border-box; padding:45px 0 25px 0;}
    .dep1 > ul > li > .navBg > .headerAreaCenterBox > ol > li{margin:0 0 30px 30px; width:220px; display:inline-block; vertical-align:top;}
    .dep1 > ul > li > .navBg > .headerAreaCenterBox > ol > li:nth-of-type(4n+1){margin-left:0;}
    .dep1 > ul > li > .navBg > .headerAreaCenterBox > ol > li > a{display:block; border:1px solid #ddd; text-align:center; line-height:50px; font-size:18px; box-sizing:border-box; border-radius:6px; background:#fff4f0;} 
    .dep1 > ul > li > .navBg > .headerAreaCenterBox > ol > li:hover > a, .dep1 > ul > li > .navBg > .headerAreaCenterBox > ol > li.active > a, .dep1 > ul > li > .navBg > .headerAreaCenterBox > ol > li > a:focus {border:1px solid #ff4500; color:#ff4500; }
    .dep1 > ul > li > .navBg > .headerAreaCenterBox > ol > li > ol{width:220px; padding:12px 0px 0px 12px; box-sizing:border-box;}
    .dep1 > ul > li > .navBg > .headerAreaCenterBox > ol > li > ol li a{display:inline-block;  line-height:32px; padding:0 0 0 14px; box-sizing:border-box; font-size:16px; color:#545454; position:relative;} 
    .dep1 > ul > li > .navBg > .headerAreaCenterBox > ol > li > ol li a::before{content:''; position:absolute; top:12px; left:0; width:6px; height:6px; border-radius:3px; box-sizing:border-box; border:2px solid #b6b6b6;}
    .dep1 > ul > li > .navBg > .headerAreaCenterBox > ol > li > ol li a:hover, .dep1 > ul > li > .navBg > .headerAreaCenterBox > ol > li > ol li a:focus , .dep1 > ul > li > .navBg > .headerAreaCenterBox > ol > li > ol li.active a{color:#ff4500; text-decoration:underline;}

    .dep2 > ul > li {width: 16%;}
    /*헤더메뉴*/      
    
    .scrollAc + div{margin-top:120px;}

    .subConBox{margin:80px auto;}
    .subSideNav{float:left; width:260px; background:#fff4f0; background-size:140px; border-radius:10px; box-sizing:border-box; padding:40px 22px;} 
    .subSideNav h2{font-size:24px; line-height:150%; font-weight:bold; padding-left:24px; margin-bottom:40px;}
    .subSideNav ul > li {margin-bottom:10px;}
    .subSideNav ul > li > a{font-size:17px; line-height:150%; padding:14px 24px; box-sizing:border-box; border-radius:8px;}
    .subSideNav ul > li.active > a, .subSideNav ul > li:hover > a{ font-weight:bold; color:#fff; background:#d53209;  }
    .subSideNav ul > li > a.listOpen:after{content:''; display:inline-block; width: 20px; height:10px; background:url(/images/uce/commmon/menuArr.png) right center no-repeat;}
    .subSideNav ul > li.active > a.listOpen:after,.subSideNav ul > li:hover > a.listOpen:after{background:url(/images/uce/commmon/menuArrAcW.png) right center no-repeat;}
    .subSideNav ul > li > ol{display:none; padding:18px 24px; box-sizing:border-box; border-radius:8px; background:#fff;}
    .subSideNav ul > li.active > ol{display:block; }
    .subSideNav ul > li > ol li a{font-size:15px; line-height:150%; margin-bottom:18px; display:inline-block;  border-bottom:2px solid #fff;}
    .subSideNav ul > li > ol li:last-of-type a{margin-bottom:0px;}
    .subSideNav ul > li > ol li.active a, .subSideNav ul > li > ol li:hover a{ color:#ff4500; font-weight:bold; border-bottom:2px solid #ff4500; }


    .breadContent{float:left; margin-left:80px; width:calc(100% - 340px);}

    /*0102 메뉴 닫기 추가*/
    .dmeunx {position: absolute; right: 24px; bottom:32px; z-index: 999; color: #555;  background: linear-gradient(to bottom, transparent 60%, rgba(236, 141, 78, 0.2) 40%);}
    .dmeunx img {width: 20px;}
}

/*pc*/