@import url("basic.css");

/* common */
.container{ position:relative; width:100%; max-width:50rem; margin:0 auto; padding:0 .5rem; }

/* header */
#header{ background: -moz-linear-gradient(right,  #d5e8aa 0%, #9ecdea 100%); background: -webkit-linear-gradient(right,  #d5e8aa 0%,#9ecdea 100%); background: linear-gradient(to right,  #d5e8aa 0%,#9ecdea 100%);  }
#header .container{ padding:1.25rem .5rem !important; }
#header h1{ position:absolute; left:0; top:1.25rem; line-height:3.25rem; }

/* search form */
#totalSearch { margin-left:13.5rem; }
#totalSearch .form{ position:relative; height:3.25rem; padding:.5rem 3.25rem .5rem .5rem; background:#fff; border-radius:3.25rem; }
#totalSearch .form > select,
#totalSearch .form > input[type='text']{ height:2.25rem; line-height:2.25rem; }
#totalSearch .form > select{ width:7rem; font-family: 'SCDream'; font-weight: 600; padding:0 .75rem; border:0; float:left; }
#totalSearch .form > select:focus {border:2px solid #333;}
#totalSearch .form > input[type='text']{ width:calc(100% - 7rem); padding:0 .25rem; border:0; background:none; float:left; }
#totalSearch .form > a { position:absolute; right:0; top:0; width:3.25rem; height:3.25rem; line-height:3.25rem; text-align:center; color:#fff; background:#003270; border-radius:50%; font-size:1rem; transition: all .2s; -webkit-transition: all .2s; -ms-transition: all .2s;}
#totalSearch .form > a:hover,
#totalSearch .form > a:focus{background:#067ec7;}
#totalSearch .keyword{ margin-top:.5rem; font-size:13px; color:#333; } 
#totalSearch .keyword h2{ font-family: 'SCDream'; color:#111; font-size:.8rem; display:inline-block; margin-right:.5rem; }
#totalSearch .keyword ul{ display:inline-block; }
#totalSearch .keyword li{ position:relative; display:inline-block; margin-right:.5rem; padding-right:.5rem; }
#totalSearch .keyword li:after{ content:""; position:absolute; right:0; top:50%; width:1px; height:10px; margin-top:-5px; border-radius:50%; background:rgba(0,0,0,0.2); }
#totalSearch .keyword li:last-child{ margin-right:0; padding-right:0; }
#totalSearch .keyword li:last-child:after{ display:none; }
#totalSearch .keyword a:hover,
#totalSearch .keyword a:focus{text-decoration: underline;}
#totalSearch .search_arrow,
#totalSearch .search_arrow_off {position:relative; width:100%;}
#totalSearch .search_arrow a,
#totalSearch .search_arrow_off a {position:absolute; width:20px; height:20px; top:12px; right:15px;}
#totalSearch .search_arrow a:focus,
#totalSearch .search_arrow_off a:focus {border:2px solid #333;}
#totalSearch .search_arrow i,
#totalSearch .search_arrow_off i {color:#003270; font-size:1rem;}


/* 검색결과 정보 */
#infoWrap{ text-align:center; font-family: 'SCDream'; font-size:1.2rem; padding:.75rem 0; background:#f5f5f5; color:#000; word-break: keep-all;}
#infoWrap .info em { font-weight: 700; }
#infoWrap .info span { display:inline-block; color:#ec0000; font-weight: 700; }

/* 자동완성 */
#rcmdResult{ display:none; }
#rcmdResult {position:absolute; top: 65px; left:5rem; width:calc(100% - 7rem); padding:5px; border:1px solid #ddd; background:#fff; box-shadow:2px 2px 5px rgb(0 0 0 / 15%); z-index:999;}
.autoList li { display:block; padding:3px; font-size:.8em; color:#000; list-style:none; line-height:25px; margin-left:15px;}
.autoList li a { color:#000; font-size:.8rem; }
.autoList li a em { color:#005c94; font-weight:400;}

/* 검색결과 */
.lstBox{margin-top:2rem; word-break: keep-all;}
.lstBox a{transition: all .2s; -webkit-transition: all .2s; -ms-transition: all .2s;}
.lstBox .tit_wrap { position:relative; border-bottom:2px solid #0076ae; padding-bottom:.5rem; padding-right:5rem;}
.lstBox .tit_wrap > h3{display:inline-block; font-family: 'SCDream'; font-size:1.3rem; font-weight: 700; color:#000;}
.lstBox .tit_wrap > p{display:inline-block; padding-left:.25rem; vertical-align: middle; color:#666; font-size:.8rem;}
.lstBox .tit_wrap > p span{color:#0076ae; font-weight: 600;}
.lstBox .tit_wrap > a{ position:absolute; right:0; bottom:.5rem; line-height:1.5rem; padding:0 .75rem; font-size:.75rem; border-radius:1rem; color:#fff; background:#067ec7;}
.lstBox .tit_wrap > a i{padding-left:.25rem;}
.lstBox .tit_wrap > a:hover,
.lstBox .tit_wrap > a:focus{background:#003270;}
.lstBox .result{padding:.5rem 0;}
.lstBox .result li{position:relative; padding:.4rem 0; overflow:hidden; font-size:.8rem;}
.lstBox .result li ~ li{border-top:1px solid #ddd;}
.lstBox .result li a{position:relative; display:block; color:#666; overflow:hidden;}
.lstBox .result li a:hover *,
.lstBox .result li a:focus *{text-decoration: underline;}
.lstBox .result li em{font-weight: 600; color:#005c94;} /* keyword point */
.lstBox .result li h5{font-weight: 600; color:#000; font-size:1rem;}

/* 검색결과 : 홈페이지 메뉴 */
.lstBox .result.menu li{line-height:1.25rem; font-size:.9rem;}
.lstBox .result.menu li p{display:inline-block; vertical-align: top; font-weight: 600; color:#000;}
.lstBox .result.menu li span:before{content:"\e93e"; font-family: 'xeicon'; margin:0 .25rem; font-size:.7rem; vertical-align: middle;}

/* 검색결과 : 콘텐츠 */
.lstBox .result.contents li p{width:calc(100% - 4.5rem); float:left;}
.lstBox .result.contents li span{ position:absolute; right:0; bottom:0; font-size:.75rem; color:#999;}

/* 검색결과 : 자료 및 서식 */
.lstBox .result.files li span{width:calc(100% - 7.5rem); float:left;}
.lstBox .result.files li p{position:absolute; right:0; bottom:0; font-size:.75rem; color:#999;}
.lstBox .result.files li p a{display:inline-block;}
.lstBox .result.files li p a + a{margin-left:.25rem; padding-left:.35rem; }
.lstBox .result.files li p a + a:before{content:""; position:absolute; left:0; top:20%; width:1px; height:60%; background:#ccc;}

/* 검색결과 : 콘텐츠 */
.lstBox .result.board li p{width:calc(100% - 4.5rem); float:left;}
.lstBox .result.board li span{ position:absolute; right:0; bottom:0; font-size:.75rem; color:#999;}

/* paging */
#paging{text-align:center; margin-top:2rem;}
#paging a{display:inline-block; width:2rem; height:2rem; line-height:2rem; text-align:center; border-radius:50%; margin:0 1px; transition: all .2s; -webkit-transition: all .2s; -ms-transition: all .2s;}
#paging > a{border:1px solid #ccc;}
#paging > a.prev{background:url('../images/ico_paging_prev.png') no-repeat center;}
#paging > a.next{background:url('../images/ico_paging_next.png') no-repeat center;}
#paging > a.prev2{background:url('../images/bbs_PAarrL1.png') no-repeat center;}
#paging > a.next2{background:url('../images/bbs_PAarrR1.png') no-repeat center;}
#paging ul,
#paging li {display:inline-block; vertical-align: top;}
#paging li > a.active{ background:#3e4e6f; color:#fff;}
#paging > a:hover,
#paging > a:focus{border-color:#003270;}
#paging li > a:not(.active):hover,
#paging li > a:not(.active):focus{background:#d8dce4;}

/* footer */
#footer{background:#002643; color:#fff; padding:1.5rem 0; margin-top:2rem; font-size:.7rem; letter-spacing: 0; text-transform: capitalize; font-weight: 200; text-align:center;}

@media screen and (max-width: 960px){
	
    /* header */
    #header h1{position:relative; left:auto; top:auto; text-align:center; line-height:1; margin-bottom:1rem;}
    #header h1 img{width:11rem; height:auto;}

    /* search form */
    #totalSearch{margin-left:0;}
    #totalSearch .keyword{position:relative; margin:.5rem .5rem 0;  padding-left:4.5rem;}
    #totalSearch .keyword h2{position:absolute; left:0; top:0;}
    #totalSearch .form > input[type='text']{padding-bottom:14px;  }^M

    /* 검색결과 정보 */
    #infoWrap{font-size:1.1rem;}    

    /* 자동완성 */
    #rcmdResult {top: 3.2rem;}

    /* 검색결과  */
    .lstBox .tit_wrap > h3{font-size:1.1rem;}
    .lstBox .result li h5{font-size:.95rem;}

}

@media screen and (max-width: 640px){	
   
    /* search form */
    #totalSearch .form{height:2.5rem; border-radius:2.5rem; padding:.5rem 2.5rem .5rem .5rem;}
    #totalSearch .form > select,
    #totalSearch .form > input[type='search']{ height:1.5rem; line-height:1.5rem; }
    #totalSearch .form > select{width:6rem;}
    #totalSearch .form > input[type='search']{width:calc(100% - 6rem);}
    #totalSearch .form > a{width:2.5rem; height:2.5rem; line-height:2.5rem;}
    #totalSearch .keyword{margin-top:.75rem;}

    /* 검색결과 : 홈페이지 메뉴 */
    .lstBox .result.menu li{line-height:1.25rem; font-size:.9rem;}
    .lstBox .result.menu li p{display:inline-block; vertical-align: top; font-weight: 600; color:#000;}
    .lstBox .result.menu li span:before{content:"\e93e"; font-family: 'xeicon'; margin:0 .25rem; font-size:.7rem; vertical-align: middle;}

    /* 검색결과 : 콘텐츠, 자료 및 서식, 게시판 */
    .lstBox .result.contents li p,
    .lstBox .result.files li span,
    .lstBox .result.board li p{width:100%; display:block; float:none;}
    .lstBox .result.contents li span,
    .lstBox .result.files li p,    
    .lstBox .result.board li span{ position:relative; right:auto; bottom:auto; margin-top:.25rem; display:block;}

    /* 자동완성 */
    #rcmdResult {top: 2.5rem;}


}
input:focus, select:focus, option:focus, textarea:focus, button:focus{
	outline: none;
}