@charset "UTF-8";

#hd * { box-sizing: border-box; }
.blind  { display:none; }
#gnb_menu { width:800px; margin-left:118px; float:left;}
#gnb_menu #topnav li a { border: 0; }
ul#topnav { display: flex; justify-content: space-around; position: relative; max-width: 800px; padding: 0;margin: 0; margin-left: auto; font-size: 1.2em;	list-style: none; }
ul#topnav li {display: block; position:relative; padding: 0; }
ul#topnav li a { display: flex; justify-content: center; align-items: center; height: 90px; padding-top:0; font-size:18px; font-weight:bold; color: #444; text-align:center; text-decoration: none; }
ul#topnav li a:hover { font-weight:bold; color: #003B90;}
ul#topnav li span {display: none; position:absolute; bottom: 0; left: 50%; transform: translate(-50%, 100%); width: 1100px; padding: 10px 0 10px 0; margin:auto; text-align: center; float: left;}
ul#topnav li span a { padding:10px; font-size:14px; font-weight:bold; color: #fff; }
ul#topnav li span a:hover { width:200px; height:35px; font-weight:bold;color: #fff;}
ul#topnav li span a { display: inline; color: #fff; }

.allmenu_btn, #allmenu {display: none;}

/* 230804 수정작업 */
@media (max-width: 1440px) {
  ul#topnav li span.left4 { left: auto; right: 0; transform: translate(0, 100%); text-align: right; }
}

@media (max-width: 1024px) {
  #hd_wrapper { padding-right: 14px; }
  #logo {margin-left: 20px;}
  #logo_right, #navi_sb {display: none;}
  .allmenu_btn {display: inline-flex; flex-direction: column; justify-content: space-between; align-items: center; width: 28px; height: 23px; border: none; background-color: inherit; outline: none; }
  .allmenu_btn span {display: inline-block; width: 100%; height: 3px; background-color: #222; transition: .3s;}
  .allmenu_btn.on span:nth-child(1) { transform: translateY(10px) rotate(45deg); }
  .allmenu_btn.on span:nth-child(2) { opacity: 0; }
  .allmenu_btn.on span:nth-child(3) { transform: translateY(-10px) rotate(-45deg); }

  #allmenu { position: absolute; top: 90px; right: 0; background-color: #fff; width: 100%; z-index: 10; border-top: 1px solid #e5e5e5; height: calc(100vh - 0px); height: calc(var(--vh, 1vh) * 100 - 0px); overflow: auto;  scrollbar-width: none; }
  #allmenu::-webkit-scrollbar { display: none; }
  #allmenu ul { padding-bottom: 120px; }
  #allmenu a { display: block; }
  #allmenu li { border-bottom: 1px solid #e5e5e5; }
  #allmenu li:last-child { border-bottom: none; }
  #allmenu li > a { padding: 20px 20px 14px; font-size: 18px; font-weight: bold; }
  #allmenu li div { padding-bottom: 12px; }
  #allmenu li div > a { padding: 10px 20px; font-size: 16px; }
  #allmenu li div > a.active { text-decoration: underline; text-underline-position: under; }
}

@media (max-width: 768px) {
  #logo {width: 180px; margin-left: 10px;}
  #allmenu {top: 80px;}
}

@media (max-width: 640px) {
  #tnb { display: none; }
}