@charset "utf-8";


/*공통*/
html {overflow-x: hidden;}
body, html, #wrap {height: 100%;}
body {background: #edf0f5;}
.inner {padding-right:15px; padding-left: 15px;}

#wrap {display: flex; flex-direction: column;  margin: 0;min-height: 100vh;}
.content { height:100%; flex: 1; overflow: auto;position: relative;    margin-bottom: 181px;}


/***nav-top***/
.nav-top {display: table; table-layout: fixed;  height: 58px; width: 100%; background: #5e6472; }
.nav-top a {display: table-cell;text-align: center; vertical-align: middle; font-size: 24px; color: #fff;border-bottom: 1px solid transparent; }
.nav-top a:not(:last-of-type) {border-right: 1px solid #8e939d;}
.nav-top a.active:not(:last-of-type),
.nav-top a:not(:last-of-type):hover, 
.nav-top a:not(:last-of-type):focus {border-right: 1px solid rgba(0, 0, 0, 0.22);}
.nav-top .active, 
.nav-top a:hover, 
.nav-top a:focus {border-bottom: 1px solid rgba(0, 0, 0, 0.22);}



/***header***/
.header .inner {padding: 17px 30px;}
.header .logo-wrap {position: relative; }
.header .logo-wrap, .header .logo-wrap h1,.header .logo-wrap h1 a {display: inline-block; vertical-align: middle; }
.header .logo-wrap h1 {width: 90px;}
.header .logo-wrap .tit {display: inline-block;position: absolute;top: 50%;margin-top: -9px;margin-left: 14px;font-size: 26px; color: #fff;white-space: nowrap;}
.header .util {float: right;padding-top: 8px;}
.header .util  .item {display: inline-block; margin-left: 20px;}






/***sidemenu modal***/
#mMenu{display:none;position:absolute;right:-100%;top:0;bottom:0;width:541px;z-index:999;background:#fff}
#mMenu .mMenu_top{position:relative;width:100%;height: 100px; background: #edf0f5; }
#mMenu .mMenu_top .mMenu_logo{position: absolute; top: 50%;transform: translate(0px, -50%);left: 30px;font-size: 23px;}
#mMenu .mMenu_top .mMenu_logo .icon { display: inline-block;width: 60px;height: 60px; margin-right: 19px; vertical-align: middle;background: #fff;border-radius: 600px; position: relative; }
#mMenu .mMenu_top .mMenu_logo .icon:after {position: absolute;left: 50%;  top: 12px; margin-left: -17px; content: "";display: block; width: 35px; height: 35px;background: url(../images/sitemap-icon01.png) no-repeat center;}
#mMenu .mMenu_mem{background:#3a4ca6;border-top:1px solid #5e6472;border-bottom:1px solid #5e6472;}
#mMenu .mMenu_mem ul{overflow:hidden}
#mMenu .mMenu_mem ul li{float:left;width:calc((100% - 2px) / 2);text-align:center;border-left: 1px solid rgba(0, 0, 0, 0.12)}
#mMenu .mMenu_mem ul li:first-child{border-left:0}
#mMenu .mMenu_mem ul li a{display:block;padding:28px 0;color:#fff;font-size: 23px;}
#mMenu .mMenu_list{height:calc(100% - 119px);overflow-y:auto;background:#fff;
-ms-overflow-style: none;  /* IE and Edge */scrollbar-width: none;  /* Firefox */}
#mMenu .mMenu_list::-webkit-scrollbar {display: none;}
#mMenu .mMenu_list>li{border-bottom:1px solid #e2e2e2}
#mMenu .mMenu_list>li>a{position:relative;display:block;padding:33px 30px 33px;}
.green-layout #mMenu .mMenu_list>li>a.on {color: #1f9c40;}
.blue-layout #mMenu .mMenu_list>li>a.on {color: #4285f4;}
#mMenu .mMenu_list>li>a:after{content: "";display: block; position: absolute; right: 15px; top: 50%;margin-top: -4px; width: 30px; height: 19px; background: url(../images/bul_menu_arrow.png) no-repeat;background-size: 28px;transition: all .3s;}
#mMenu .mMenu_list>li>a.on:after{transform:rotate(180deg)}
#mMenu .mMenu_list>li>ul{display:none;padding:0;border-top:1px solid #e2e2e2}
.green-layout #mMenu .mMenu_list>li>ul {background:rgba(31, 156, 64, 0.06);}
.blue-layout #mMenu .mMenu_list>li>ul {background:#eef1fb;}
#mMenu .mMenu_list>li>ul>li{}
#mMenu .mMenu_list>li>ul>li:first-child{margin-top:0}
#mMenu .mMenu_list>li>ul>li>a{position:relative;padding:25px 49px 25px;display:block;background:url(../images/bg_allM_plus.png) right 15px center no-repeat;transition:none;border-top:1px solid #ddd;font-size: 1.8rem;background-size: 28px !important;}
#mMenu .mMenu_list>li>ul>li:first-child>a{border-top:0}
#mMenu .mMenu_list>li>ul>li>a.on{background:url(../images/bg_allM_min.png) right 15px center no-repeat;}
.green-layout #mMenu .mMenu_list>li>ul>li>a.on {color:#1f9c40;}
.blue-layout #mMenu .mMenu_list>li>ul>li>a.on{color:#4285f4;}
#mMenu .mMenu_list>li>ul>li>a.empty,
#mMenu .mMenu_list>li>ul>li>a.on.empty{background:none}
#mMenu .mMenu_list>li>ul>li>a:before{content:"";display:block; width: 9px; height: 9px; position: absolute;left: 27px; top: 30px;border-radius: 600px;}
#mMenu .mMenu_list>li>ul>li>ul{display:none;background:#fff;padding:7px 0 7px 45px;border-top:1px solid #ddd}
#mMenu .mMenu_list>li>ul>li>ul>li>a{position:relative;display:block;padding: 19px 0 19px 21px;font-size: 1.7rem;}
#mMenu .mMenu_list>li>ul>li>ul>li>a.on{color:#586dc4;text-decoration:underline}
#mMenu .mMenu_list>li>ul>li>ul>li>a:before{content:"";display:block;    width: 9px; height: 9px; position: absolute;left: 0;top: 50%;margin-top: -6px;border-left:1px solid #6170b9;border-bottom:1px solid #6170b9} .mMenu_close{display:block;width:30px;height:30px;background:url(../images/btn_menu_close.png) no-repeat; position: absolute;top: 33px;right: 24px;text-indent:-9999px}






/***통합검색***/
.search-wrap {display: inline-block;}
#header_search { width: 100%;margin: 0 auto;position: absolute;left: 0;background: #fff; top: 190px;z-index: 99;box-shadow: 0 100vh 0 100vh rgba(0, 0, 0, 0.5), 0 5px 5px rgba(0, 0, 0, 0.5);}
#header_search .search_top_wrap .dropdown .dropdown-menu {transition: all 0.3s;}
#header_search .search_header {margin: 0 auto;padding:18px 15px 28px;border-top: 1px solid rgba(255, 255, 255, 0.26);}
#header_search label {font-size: 2.133rem;display: inline-block;color: #2a47d1;font-weight: 900;margin-right: 20px;padding-top: 12px;}
#header_search input[type=text] {width: calc(100% - 81px);display: inline-block;border-radius: 0;border:0 none;vertical-align: top;height: 101px;box-shadow: 0 0 0;font-size: 2rem;background: transparent;color: #fff; padding: 0 15px;}
#header_search input::placeholder { color: #fff; font-size: 1.8rem;}
#header_search input[type=text]::-webkit-input-placeholder,
#header_search input[type=text]::-moz-placeholder,
#header_search input[type=text]:-ms-input-placeholder {color: #fff;font-size: 1.8rem;}
#header_search input[type=text]:focus { outline: 0; box-shadow: 0 0 0 0.2rem rgba(255,255,255,.25);}
#header_search input[type=submit] {padding: 0; margin-top: 0; position: absolute; right: 15px;top: 50%; transform: translate(0px, -50%);height: 57px;margin-left: -58px;vertical-align: top; display: inline-block;border: 0 none;background: url(../images/search.png) no-repeat 50% 50%; background-size: 100%;}
.searchHeader_inner {display: inline-block; vertical-align: top; text-align: left; position: relative; width: 100%;border-bottom: 3px solid #fff;}
.green-layout #header_search .search_header{ background: #1f9c40;}
.blue-layout #header_search .search_header{ background: #4285f4;}
.search-wrap .btn { height: 45px;width: 43px;background: url(../images/search-close.png) no-repeat 50% 50%; background-size: 100%; }
.search-wrap .btn.collapsed {background: url(../images/search.png) no-repeat 50% 50%;background-size: 100%; margin-top: -5px;}
.ui-menu.ui-autocomplete {display: none !important;}



/*sidemenu modal*/
.modal {position: fixed;top: 0;right: 0;bottom: 0; left: 0;z-index: 1050;display: none; overflow: hidden;outline: 0}
.modal-open {overflow: hidden}
.modal-open .modal { overflow-x: hidden;overflow-y: auto}
.modal-dialog {position: relative;width: auto;margin: .5rem; pointer-events: none}
.modal.fade .modal-dialog {transition: -webkit-transform .3s ease-out;transition: transform .3s ease-out; transition: transform .3s ease-out, -webkit-transform .3s ease-out; -webkit-transform: translate(0, -25%); transform: translate(0, -25%)}
.modal.in .modal-dialog { -webkit-transform: translate(0, 0); transform: translate(0, 0)}
.modal-dialog-centered { display: -webkit-box;display: -ms-flexbox;display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center;min-height: calc(100% - (.5rem * 2))}
.modal-content {position: relative; display: -webkit-box;display: -ms-flexbox; display: flex; -webkit-box-orient: vertical;-webkit-box-direction: normal; -ms-flex-direction: column;flex-direction: column;width: 100%;pointer-events: auto;background-color: #fff;background-clip: padding-box;border: 1px solid rgba(0, 0, 0, .2);border-radius: .3rem;outline: 0;height: 100%;}
.modal-backdrop {position: fixed; top: 0; right: 0;bottom: 0;left: 0;z-index: 1040;background-color: #000;}
.fade { opacity: 0;transition: opacity .15s linear}
.fade.in { opacity: 1}
.modal-backdrop.in {opacity: .7;}
#mMenu_modal .modal-dialog {-webkit-transform: translate(25%,0); transform: translate(25%,0); margin: 0; width: 250px;max-width: 250px;float: right;height: 100%;}
#mMenu_modal.in .modal-dialog {-webkit-transform: translate(0,0); transform: translate(0,0);}
/*아코디언*/
.collapse { display: none}
.collapse.in {display: block}
.collapsing {position: relative;height: 0;overflow: hidden; transition: height .35s ease}



/***nav-bottom***/
.nav-bottom { display: table; table-layout: fixed;  width: 100%; height: 150px; background: #fff; border-top: 1px solid #b9bbbf;z-index: 9;  
    position: fixed;
    bottom: 0;
  

}
.nav-bottom a {display: table-cell; vertical-align: middle; text-align: center;}
.nav-bottom .icon { position: absolute;top: 0; left: 50%;transform: translate(-50%, 0px); display: inline-block;width: 42px;height: 42px;background: url(../images/nav-bottom.png) no-repeat;}
.nav-bottom .center .icon {top: 50%; transform: translate(-50%, -50%);height: 54px;}
.nav-bottom .icon.icon01 {background-position: 0 0;}
.nav-bottom .icon.icon02 {background-position: -120px 0;}
.nav-bottom .icon.icon03 {background-position: -240px 0;}
.nav-bottom .icon.icon04 {background-position: -358px 0;}
.nav-bottom .icon.icon05 {background-position: -478px 0;}
.nav-bottom a > span { padding-top: 55px;display: inline-block; position: relative;color: #444; font-size: 1.7rem;}
.nav-bottom .active > span {border-radius: 600px; width: 67px; height: 26px; color: #fff;}
.nav-bottom .center > span {width: 102px;height: 102px;padding-top: 0;} 
.nav-bottom .active .icon {background-position-y: -69px;}
@media(max-width: 390px) {
    .nav-bottom .icon {transform: translate(-50%, 0px) scale(0.7);top: -2px;}
    .nav-bottom a > span {font-size: 0.9rem;padding-top: 34px;}
        
}




/*공통컬러*/
.green-layout .header,
.green-layout .nav-top .active, 
.green-layout .nav-top a:hover, 
.green-layout .nav-top a:focus,
.green-layout .nav-bottom .active > span,
.green-layout #mMenu .mMenu_mem,
.green-layout #mMenu .mMenu_list>li>ul>li>a:before {background: #1f9c40;}

.blue-layout .header,
.blue-layout .nav-top .active, 
.blue-layout .nav-top a:hover, 
.blue-layout .nav-top a:focus,
.blue-layout .nav-bottom .active > span,
.blue-layout #mMenu .mMenu_mem,
.blue-layout #mMenu .mMenu_list>li>ul>li>a:before {background: #4285f4;}







@media (max-width: 1024px) and (max-height: 1850px) {

/***nav-top***/
.nav-top {height: 10vw;}
.nav-top a { font-size: 3.7500vw; }

/***header***/
.header .inner {padding: 3.5vw 30px;}
.header .logo-wrap h1 {width: 14.0625vw;}
.header .logo-wrap .tit {font-size: 4.0625vw;}

/***nav-bottom***/


    #mMenu .mMenu_mem ul li a {font-size: 1.8rem;}
    #mMenu .mMenu_list>li>a {font-size: 2rem;}
    #mMenu .mMenu_top .mMenu_logo {font-size: 3.5vw;}
    
    
    
    .header .util .user {width: 5vw;}
    .header .util .mMenu_btn,
    .search-wrap .btn {width: 6vw;}
    .search-wrap .btn,
    #header_search input[type=submit] {height: 6vw;}
    #header_search input[type=text] {    height: 11vw;}
    input#searchWordHeader::placeholder { font-size: 3.8vw; }
    #header_search input[type=text]::-webkit-input-placeholder,
    #header_search input[type=text]::-moz-placeholder,
    #header_search input[type=text]:-ms-input-placeholder {font-size: 3.8vw;}



	
}