@font-face {
    font-family: 'Noto Sans KR';
    src: url('../assets/NotoSansKR-Regular.otf') format('opentype');
}
.menuFixed { position: fixed; top: 0px; width:100%; background: #fff; z-index:999; }
#navi_box { margin:0; padding:0; z-index: 999; line-height: 70px; }
#nav, #nav ul, #nav li { margin: 0; padding: 0; border: 0; list-style: none; box-sizing: border-box;  }
#nav { text-align:center; position: relative; margin:-5px auto; color: #333;  z-index: 999; height: 20px;font-family: 'Noto Sans KR', sans-serif;}
#nav button {font-size:16px; padding: 20px; }
#nav button:hover {color:#fff;}
#nav ul::after{content: ""; display: block; clear: both;}
#nav li { position: relative;  }
#nav a { text-decoration: none;  display: block; color:#333; font-size: 1.2em; line-height: 40px;}
#nav a:visited {color:#333;}
#nav > ul > li > a { text-align:center; width:200px;  border:1px solid #ffff; }
#nav > ul > li > a:hover, #nav > ul > li > a:focus, #nav > ul > li > a.js-openSubMenu, #nav > ul > li > a:active { color:#0271e1; }
a + ul.on {
    display: block;
}
#nav > ul > li > ul {background: #fff;border:1px solid #ccc; background-color: #fff; border-top:2px solid #0271e1; }
#nav > ul > li:focus ul {display: block;}
#nav > ul, .fa { }
#nav > ul > li {display: inline-block; color: #222; font-size: 16px; border: none;}
#nav > ul > li > a { text-align:center; width:200px;  border:1px solid #ffff; display: block;}
#nav > ul > li > a:hover, #nav > ul > li > a:focus, #nav > ul > li > a.js-openSubMenu, #nav > ul > li > a:active { color:#0271e1; }
/*#nav > ul > li:hover > ul, #nav > ul > li:focus > ul {display: block;}
#nav > ul > li > ul > li:hover ul {display: block;}*/
#nav li:hover > ul { display:block; }
#nav li:focus-within > ul { display:block; }
#nav > ul > li {position: relative; zoom: 1; display: inline-block;}
#nav > ul > li > ul {display: none; position: absolute; left: 0; right: 0;}
#nav > ul > li > ul::after {position: absolute; min-width: 200px; background-color: #f1f1f1; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1;}
#nav > ul > li > ul > li { }
#nav > ul > li > ul > li > a { text-align:center; font-size:1em;  transition: all 0.3s;}
#nav > ul > li > ul > li > a:hover, #nav > ul > li > ul > li > a:focus { background-color: #0271e1; color:#fff; }
#nav > ul > li > ul > li:not(:last-child) a { }
#nav > ul > li > ul > li > ul { position: absolute; margin-left:19px;margin-top:-2px; border:1px solid #ccc; border-top:2px solid #0271e1; text-align: center; width:200px; font-size: 0.9em; background: #ffff;}
#nav > ul > li > ul > li > ul > li {width:200px; }
#nav > ul > li > ul > li > ul > li > a {transition: all 0.3s; font-size:1em; padding: 5px; line-height: 25px;}
#nav > ul > li > ul > li > ul > li > a:hover { background-color: #0271e1; color:#fff; }
#nav > ul > li > ul > li > ul > li > a:focus { background-color: #0271e1; }
#nav .js-hideElement { display: none; }
#nav .js-showElement { display: block; }
html.no-js li:hover > a + ul, html.no-js li:focus > a + ul { display: block; }
.arw_bg {background: url('../img/arrow_right.png')no-repeat 90%;}
.blz {color: #0271e1 !important;}
.blz:hover {color:#fff !important;}

@media all and (min-width: 650px) {
    #nav { display: inline-block;}
    #nav li {text-align: left; width: 200px;}
    #nav a + #nav ul { position: absolute; }
    a + ul:not(.js-showElement) { display: none; }
    #nav > ul > li {float: left; width: auto; }
    #nav > ul > li:not(:last-child) { border-bottom: none;  }
    #nav > ul > li:not(#toggleMenu):not(.js-showElement) { display: inline-block; }
    #nav #toggleMenu { display: none; }
    #nav > ul > li > ul {/*  top: 60px; */ left: 0; }
    #nav > ul > li > ul > li > ul { top: 0; left: 181px; }
    #menu-wrapper {display:none;}
}

@media all and (max-width:1183px)and (orientation : portrait) {
	#navi_box { display: none;}
    #menu-wrapper {display:block;}

    }

@media all and (max-width: 650px) {
	#menuToggle {top:30px !important}
	#tnb {display:none}
	
    .toggleMenu {display: block;}
    .m_menu {display: block;}


    #navi_box {/* position:absolute; right:0; font-size:20px; border:none; */ display: none;}
    #nav { position: relative; right:0;color: #333;}
    #nav li {text-align: center;}
    #nav a {padding: 0 5px;}
    a + ul { position: relative; }
    a + ul:not(.js-hideElement) { display: block; }
    #nav > ul > li { float: none; display: block; }
    #nav > ul > li:not(:last-child) { border-right: none; }
    #nav > ul > li:not(:last-child):not(:first-child) { border-bottom: 1px solid #ccc; }
    #nav > ul > li:not(#toggleMenu):not(.js-showElement) { display: none; }

    #nav #toggleMenu { display: none; width: 100%;}
    #nav #toggleMenu.js-open { border-bottom: 1px solid #ccc; }
    #nav #toggleMenu.js-open .fa-times { display: block; }
    #nav #toggleMenu.js-open .fa-bars { display: none; }
    #nav #toggleMenu.js-open a {color:#333;  }
    #nav #toggleMenu.js-open:focus, #nav #toggleMenu.js-open:active , #nav > ul > li > a:hover, #nav > ul > li > a:focus, #nav > ul > li > a.js-openSubMenu {color:#333; background:#fff;}
    #nav #toggleMenu:not(.js-open) .fa-times { display: none; }
    #nav #toggleMenu:not(.js-open) .fa-bars { display: block; }
    #nav > ul > li > ul { width: 100%; position: absolute; }
    #nav > ul > li > ul:not(.js-showElement) { display: none; }
    #nav > ul > li > ul > li > ul { width: 100%; position: relative; }
    #nav > ul > li > ul > li > ul:not(.js-showElement) { display: none; }
    html.no-js #nav:hover > ul > li:not(#toggleMenu), html.no-js #nav:focus > ul > li:not(#toggleMenu) { display: block; }
    html.no-js #nav:hover li:hover > a + ul, html.no-js #nav:hover li:focus > a + ul, html.no-js #nav:focus li:hover > a + ul, html.no-js #nav:focus li:focus > a + ul { display: block; }
    #nav .arw_bg .dash_line {border-bottom: 1px dashed #000; padding: 10px 0; display: inline-block;}
}

@media all and (max-width:1228px) and (min-width: 651px) {
    #nav {display: none;}
    .toggleMenu {display: block;}
    .m_menu {display: block;}
}
@media all and (max-width:1430px) and (min-width: 1228px){
    #nav > ul > li > a { text-align:center;}
    .toggleMenu {display: none;}
    .m_menu {display: none;}

}
@media all and (min-width: 1431px) {
    .toggleMenu {display: none;}
    .m_menu {display: none;}
}
@media (min-width: 1229px){
	#tnb .top_link_box {width: auto;max-width: 1376px;}
}
/*toggle*/
#menuToggle { position: absolute; top:60px ; left: 10px; z-index: 999; -webkit-user-select: none; user-select: none;  }
#menuToggle a { text-decoration: none; color: #232323; transition: color 0.3s ease; }
#menuToggle a:hover { color: tomato; }
#menuToggle input { display: block; width: 25px; height: 32px; position: absolute; top: -7px; left: -5px; cursor: pointer; opacity: 0; z-index: 2; -webkit-touch-callout: none; display:hidden;}
#menuToggle span { display: block; width: 25px; height: 4px; margin-bottom: 5px; position: relative; background: #353535; border-radius: 3px; z-index: 1; transform-origin: 4px 0px; transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0), background 0.5s cubic-bezier(0.77,0.2,0.05,1.0), opacity 0.55s ease; }
#menuToggle span:first-child { transform-origin: 0% 0%; }
#menuToggle span:nth-last-child(2) { transform-origin: 0% 100%; }
#menuToggle input:checked ~ span { opacity: 1; transform: rotate(45deg) translate(5px, 2px); background: #232323; }
#menuToggle input:checked ~ span:nth-last-child(3) { opacity: 0; transform: rotate(0deg) scale(0.2, 0.2); }
#menuToggle input:checked ~ span:nth-last-child(2) { transform: rotate(-45deg) translate(2px, 3px); }
#menu { position: absolute; width:425px; margin: 20px 0 0 -50px; padding: 0;  list-style-type: none;
 transform-origin: 0% 0%; transform: translate(-100%, 0); transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0); height:700px; background:rgb(255, 255, 255, 0.9); }
#menu li { padding: 10px 0; font-size: 22px; }
#menuToggle input:checked ~ #menu { transform: none; }

/*toggle menu*/
.css-has {background:#426bb2; padding:5px 50px; margin-left:30px;}
.css-has button {border:1px solid #fff; color:#fff; padding:5px 15px; border-radius: 5px; margin:5px 10px;}
#cssmenu, #cssmenu ul, #cssmenu ul li, #cssmenu ul li a { margin: 0; padding: 0; border: 0; list-style: none; line-height: 1; display: block; position: relative; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
#cssmenu { width: 395px; margin-left:30px; color: #ffffff; }
#cssmenu ul ul { display: none; }
#cssmenu > ul > li.active > ul { display: block; }
.align-right { float: right; }
#cssmenu > ul > li > a { padding: 16px 22px; cursor: pointer; z-index: 2; font-size: 16px; text-decoration: none; color: #ffffff; background: #426bb2; -webkit-transition: color .2s ease; -o-transition: color .2s ease; transition: color .2s ease; }
#cssmenu > ul > li > a:hover { color: #d8f3f0; }
#cssmenu ul > li.has-sub > a:after { position: absolute; right: 26px; top: 19px; z-index: 5; display: block; height: 10px; width: 2px; background: #ffffff;
  content: ""; -webkit-transition: all 0.1s ease-out; -moz-transition: all 0.1s ease-out; -ms-transition: all 0.1s ease-out; -o-transition: all 0.1s ease-out; transition: all 0.1s ease-out; }
#cssmenu ul > li.has-sub > a:before { position: absolute; right: 22px; top: 23px; display: block; width: 10px; height: 2px; background: #ffffff; content: "";
  -webkit-transition: all 0.1s ease-out; -moz-transition: all 0.1s ease-out; -ms-transition: all 0.1s ease-out; -o-transition: all 0.1s ease-out; transition: all 0.1s ease-out; }
#cssmenu ul > li.has-sub.open > a:after, #cssmenu ul > li.has-sub.open > a:before { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg); transform: rotate(45deg); }
#cssmenu ul ul li a { padding: 14px 22px; cursor: pointer; z-index: 2; font-size: 14px; text-decoration: none; color: #dddddd; background: #49505a; -webkit-transition: color .2s ease; -o-transition: color .2s ease; transition: color .2s ease; }
#cssmenu ul ul ul li a { padding-left: 32px; background: #656668; }
#cssmenu ul ul li a:hover { color: #ffffff; }
#cssmenu ul ul > li.has-sub > a:after { top: 16px; right: 26px; background: #dddddd; }
#cssmenu ul ul > li.has-sub > a:before { top: 20px; background: #dddddd; }

/*운영시설*/
#tnb {background:#3b4044;line-height:30px;} 
#tnb h3 {position:absolute;font-size:0;line-height:0;overflow:hidden} 
#tnb .tnb_member{margin:0 auto;zoom:1; float: right; font-size: 0;} 
#tnb .tnb_member:after {display:block;visibility:hidden;clear:both;content:""} 
#tnb .tnb_member li{ display: inline-block; padding:0 16px; } 
#tnb .tnb_member li:last-child{ padding-right: 0; } 
#tnb .tnb_member li a{ font-size:14px; color:#fff; line-height: 32px; }
#tnb .tnb_member li a:hover{text-decoration: underline;} 
#tnb .top_link_box{position: relative; display: inline-block; width:1376px; margin:0 auto; padding:0 12px; text-align:left;} 
#tnb .top_family_link {position:relative;display:inline-block} 
#tnb .top_family_link>.target_btn{background-color: #0068b3; width: 152px; color:#fff; font-size: 14px; line-height: 32px; height: 32px; padding-left: 16px; display: inline-block; cursor: pointer; position: relative;text-align:left;}
#tnb .top_family_link>.target_btn:focus{line-height:26px;outline:none;border:3px solid #bb2027;} 
#tnb .top_family_link>.target_btn:after{content:'';display:inline-block;width:14px;height:6px;background-image:url(/resources/img/family_link_arrow.png);background-repeat:no-repeat;background-position:0 0;background-size: 14px 6px; position: absolute; top: calc(50% - 3px); right: 12px;}
#tnb .top_family_link.open>.target_btn:after{transform: rotateZ(180deg);} 
#tnb .top_family_link>.target_btn:hover{background-color: #005999;} 
#tnb .top_family_link ul{ display: block; position: absolute; z-index: 10; width: 210px; border: 1px solid #eee; background-color: #fff; /*box-shadow: 0 0 3px rgba(0,0,0,0.3);*/ display: none;}
#tnb .top_family_link.open{z-index: 1000;} 
#tnb .top_family_link.open ul{display: block;}
#tnb .top_family_link li a{font-size: 13px; display: block; padding:0 10px; color:#646464; line-height:35px}
#tnb .top_family_link li a span:before{content: ' - ';}
#tnb .top_family_link li+li a{border-top: 1px solid #f7f7f7;}
#tnb .top_family_link a:focus, #tnb .top_family_link a:hover {color:#253dbe; background:#fafafa;}
.link_home{display: inline-block; width: 152px;}
.link_home a{color: #fff; background-color: #474c4f; line-height: 32px; font-size: 14px; height: 32px; display: block; text-align: center;}
.link_home a:focus{height:26px;line-height:26px;outline:none;border:3px solid #bb2027;}
.link_home a:hover{background-color: #000;}

@media all and (max-width: 1228px){
	#menuToggle input {}
    #navi_box {display:none;}
    #nav {display: block;}
    #nav #toggleMenu { display: none; width: 100%;}
    #nav #toggleMenu.js-open { border-bottom: 1px solid #ccc; }
    #nav #toggleMenu.js-open .fa-times { display: block; }
    #nav #toggleMenu.js-open .fa-bars { display: none; }
    #nav #toggleMenu.js-open a {color:#333;  }
    #nav #toggleMenu.js-open:focus, #nav #toggleMenu.js-open:active , #nav > ul > li > a:hover, #nav > ul > li > a:focus,
    #nav > ul > li > a.js-openSubMenu {color:#333; background:#fff;}
    #nav #toggleMenu:not(.js-open) .fa-times { display: none; }
    #nav #toggleMenu:not(.js-open) .fa-bars { display: block; }
    /* #nav > ul > li > ul { width: 100%; position: absolute; }
    #nav > ul > li > ul:not(.js-showElement) { display: none; }
    #nav > ul > li > ul > li > ul { width: 100%; position: relative; }
    #nav > ul > li > ul > li > ul:not(.js-showElement) { display: none; } */
    html.no-js #nav:hover > ul > li:not(#toggleMenu), html.no-js #nav:focus > ul > li:not(#toggleMenu) { display: block; }
    html.no-js #nav:hover li:hover > a + ul, html.no-js #nav:hover li:focus > a + ul,
    html.no-js #nav:focus li:hover > a + ul, html.no-js #nav:focus li:focus > a + ul { display: block; }
}