.header a{transition: all ease-in .2s;}
.header > div{display:flex;}
body.menu_on::before{content:'';display:block; background-color: rgba(0,0,0,.4); position:fixed; bottom:0; left:0; right: 0; width: 100%; height:calc(100vh - 210px); z-index:2;}
body {line-height: 1 !important;padding: 0 !important;}
/* TOP 네비게이션 */
.header .top_nav {max-width: var(--head-con-w); margin:10px auto 14px; justify-content: space-between;}
.header .top_nav ul,
.header .top_nav li{display:flex; align-items: center; }
.header .top_nav a{color:var(--color-4); display: flex; font-weight: 500;}
.header .top_nav .nav_bar a:hover {opacity: .7;}

.top_nav .nav_bar,
.top_nav .nav_bar li{gap:12px;color: #0473cd;font-weight: 600;}
.top_nav .nav_bar li a{color: #0473cd;font-weight: 600;font-size:1.2rem;}
.top_nav .nav_bar li:not(:last-child)::after,
.side_menu_wrap .nav_btn li:not(:last-child)::after{content:""; width:1px; height:13px; display: block; background-color: #ECECEC;}

.header .top_nav .nav_btn {gap:12px;}
.header .top_nav .nav_btn a{display: flex; justify-content: center; align-items: center; gap: 4px; border:1px solid var(--color-6); padding:6px 20px; border-radius: 100px;}
.header .top_nav .nav_btn a:hover {background-color: rgb(249, 249, 249);}

.header .main_header{max-width: var(--head-con-w); margin:0 auto; justify-content: space-between; align-items: center;}

.header .main_header .logo_wrap .menu_btn,
.side_menu_wrap .close_btn{font-size: 0;}

.header .main_header .search_area{position:relative; background: linear-gradient(91deg, #0081C8 0.31%, #00943B 171.14%); height:56px; border-radius: 100px;}
.header .main_header .search_area input{position:absolute; background-color: var(--color-wht); color: var(--color-1); font-weight: 500; text-overflow: ellipsis; top:2px; bottom:2px; left:2px; right:2px; border-radius: 100px; border:none; padding:0 50px 0 30px;}
.header .main_header .search_area input::placeholder{color:var(--color-3);}
.header .main_header .search_area .search_btn{position:absolute; top:50%; transform:translateY(-50%); right:8px; font-size: 0; background-color: var(--color-point); width:40px; height:40px; border-radius: 100%; cursor: pointer; transition: all ease .2s;}
.header .main_header .search_area .search_btn:hover{opacity: .8;}
.header .main_header .search_area .search_btn img{margin:0 auto;}
.header .slogan{font-weight: 300; line-height: 140%; text-align: center; font-size: 17px; color:var(--color-blk);}
.header .slogan .blue{font-weight: 500; color:#0081C8;}
.header .slogan .green{font-weight: 500; color:#00943B;}

.header .menu_wrap{display: flex; border-top:1px solid var(--color-line2); border-bottom:1px solid var(--color-line2); position:relative;}
.header .menu_wrap .inner{ max-width: var(--head-con-w); width:100%; margin: 5px auto; display: flex; justify-content: space-between;}
.header .menu_wrap .menu_list,
.header .menu_wrap .today,
.header .menu_wrap .weather {display: flex; align-items: center;}

.header .menu_wrap .menu_list a{color:var(--color-1); font-weight: 600; display: flex; align-items: center;}

.menu_wrap .all_menu{opacity: 0; visibility: hidden; overflow: hidden; z-index:3; border-top:1px solid var(--color-6); box-sizing:border-box;}
.menu_wrap .all_menu .list{ margin:0 auto; display: flex; justify-content: center; position:relative; z-index:1;}

.menu_wrap .all_menu .sub_menu a{color: #565656; font-weight: 400;}

.header .menu_wrap .today .weather{gap:4px; }
.header .menu_wrap .today .weather b{font-weight: 700; color: var(--color-2);}
.header .menu_wrap .today .weather span{font-weight: 500; color: var(--color-4);}
.header .menu_wrap .today .bar{display:block; width:1px; height:12px; background-color: var(--color-6); margin:0 10px;}
.header .menu_wrap .today .day{display:flex; align-items:center; color: var(--color-4); font-weight: 500; gap:6px;}
.header .menu_wrap .today .day .dust{display:flex; gap:4px;}
.header .menu_wrap .today .day .dust b{color:var(--color-point); font-weight: 700;}

.side_menu_wrap{opacity: 0; overflow-y: scroll; visibility: hidden; position: absolute; top:0; left:0; right: 0; bottom: 0; margin-right:-100%; background-color: #fff; width:100%; height: 100dvh;}
.side_menu_wrap.on{position: fixed; margin-right: 0; z-index: 99; opacity: 1; visibility: visible;}

.side_menu_wrap .top_nav {background-color: var(--color-point); padding-top:14px;}
.side_menu_wrap .top_nav .close_wrap{ text-align: right; padding:0 20px; }
.side_menu_wrap .top_nav .nav_btn,
.side_menu_wrap .nav_btn li,
.side_menu_wrap .top_nav .nav_btn a,
.side_menu_wrap .top_nav .nav_bar,
.side_menu_wrap .top_nav .nav_bar li{display: flex; align-items: center;}

.side_menu_wrap .top_nav .nav_btn {padding:14px 20px;}
.side_menu_wrap .top_nav .nav_btn,
.side_menu_wrap .top_nav .nav_btn li{gap:14px;}
.side_menu_wrap .top_nav .nav_btn a{gap:4px; color:var(--color-wht); }
.side_menu_wrap .top_nav .nav_btn a img{filter: invert(1) brightness(2);}
.side_menu_wrap .top_nav .nav_btn li:not(:last-child)::after{background-color: rgba(255,255,255,.2);}
.side_menu_wrap .top_nav .nav_bar {padding:14px 20px; background-color: var(--color-wht);}
.side_menu_wrap .top_nav .nav_bar a{color: var(--color-4);}

.side_menu_wrap .divider{height:10px; background-color: #F6F7F9;}

.side_menu_wrap .all_menu{padding:16px 20px; font-size: 16px; font-weight: 500;}
.side_menu_wrap .all_menu .menu01{display:flex; align-items: center; justify-content: space-between; height: 56px; color:var(--color-4);}
.side_menu_wrap .all_menu .menu01.on {color:var(--color-point); border-bottom:1px solid var(--color-6);}
.side_menu_wrap .all_menu .menu01.on img{transform: rotate(180deg);}

.side_menu_wrap .all_menu .sub_menu{opacity: 0; visibility: hidden; height: 0; transition: all ease .2s;}
.side_menu_wrap .all_menu .menu01.on + .sub_menu{opacity: 1; height: auto; visibility: visible; padding:16px 0;}
.side_menu_wrap .all_menu .list > li {border-bottom:1px solid var(--color-6);}
.side_menu_wrap .all_menu .list .sub_menu li{padding:0 20px;}
.side_menu_wrap .all_menu .list .sub_menu a{color:#565656; font-weight: 400; line-height: 180%; }


@media screen and (min-width: 1201px){
  .btn_m_menu{display: none;}

  .header .top_nav, 
  .header .main_header,
  .header .menu_wrap .inner { padding:0 40px; }

  .header .top_nav a,
  .header .top_nav .nav_btn a{font-size:var(--fs-base-pc);}

  .header .main_header{padding:8px 0 16px;}
  .header .main_header .logo_wrap .menu_btn{display: none;}

  .header .main_header .search_area{width:484px;}
  .header .main_header .search_area input{font-size: var(--fs-base-pc);}

  .header .menu_wrap{align-items: center;}
  .header .menu_wrap a,
  .header .menu_wrap .all_menu span {font-size:18px;}
  .header .menu_wrap .all_menu span {font-weight: 600;}

  .header .menu_wrap .menu_list a{ height:56px; padding:0 16px;}
  .header .menu_wrap .menu_list a:hover,
  .menu_wrap .all_menu a.menu01:hover{color:var(--color-point); }
  .menu_wrap .all_menu .sub_menu a:hover{text-decoration: underline;}

  .menu_wrap .all_menu{height:0; position: absolute; left:0; right:0;}
  .menu_wrap .menu:hover .all_menu{opacity: 1; visibility: visible; height:auto;}
  .menu_wrap .all_menu .list {padding: 28px 0; text-align: center; background-color: #fff;}
  .menu_wrap .all_menu .list > li{width:190px; position: relative;}
  .menu_wrap .all_menu .list > li:not(:last-child)::after{content: ''; position: absolute; right:0; top:0; display: block; width:1px; height:100%; background-color: #D9D9D9;}
  .menu_wrap .all_menu .menu01{font-weight: 600; color:var(--color-1);}
  .menu_wrap .all_menu .sub_menu{line-height: 200%; margin-top:10px; }


  .header .menu_wrap .today .weather,
  .header .menu_wrap .today .day{font-size:var(--fs-base-pc);}

  .side_menu_wrap{display: none;}
}

@media screen and (max-width: 1200px){
  .header {background-color: #F6F7F9; padding:0 20px; overflow: hidden;}
  .header > .top_nav,
  .header > .menu_wrap {display: none;}


  .header .main_header { flex-direction: column;}
  .header .main_header .logo_wrap{ width:100%; display: flex; align-items: center; justify-content: space-between; padding:20px 0 28px;}
  .header .main_header .logo_wrap .logo{width:214px;}
  .header .main_header .logo_wrap .logo img{width:100%;}

  .header .main_header .search_area{width:100%; max-width: 558px;}
  .header .main_header .search_area input{font-size: var(--fs-base-mo);}

  .header .slogan{padding:20px 0 32px;}
  .side_menu_wrap .top_nav {font-size: var(--fs-base-mo); font-weight: 500;}

  .top_nav .nav_bar li{gap:12px;color: #0473cd;font-weight: 600;}
  .top_nav .nav_bar li a{color: #0473cd !important;font-weight: 600;font-size:0.9rem;}
}