/* ========== HEADER BASE ========== */
#header{position:relative; -webkit-transition:top 0.5s;-moz-transition:top 0.5s;-o-transition:top 0.5s;-ms-transition:top 0.5s;transition:top 0.5s}
#headerInnerWrap{position:absolute; display:flex; justify-content: space-between; height:140px; top:0; left:0; width:100%; z-index:1000; -webkit-transition:all 0.5s;-moz-transition:all 0.5s;-o-transition:all 0.5s;-ms-transition:all 0.5s;transition:all 0.5s;}

#header .logo{padding-left:70px}
#header .logo a{display:flex; align-items:center; height:100%; width:320px; background-image:url(../img/common/logo.png); background-repeat:no-repeat; background-position:50% 50%; background-size:100% auto; font-size:0;}

#header .nav{position:absolute; height:100%; left:50%; transform:translateX(-45%); top:0}
#header .nav .close{display:none; background:none;}
#header .nav .deps_1{height:100%; display:flex; justify-content:center}
#header .nav .deps_1 > li{height:100%; font-weight:500; position:relative}
#header .nav .deps_1 > li a{padding:0 45px; display:flex; align-items:center; height:100%; white-space:nowrap; color:#fff; position:relative; font-size:25px;}
#header .nav .deps_1 > li a:hover{color:#0CF}

#header .quick-text{display:none}

/* 서브메뉴 기본은 숨김(PC/모바일 공통 기본값) */
#header .nav .deps_1 > li .deps_2{
  display:none; position:absolute; left:50%; top:100%; transform:translate(-50%, -2px);
  width:200px; margin-left:0; background:rgba(0,0,0,.50); opacity:0; overflow:hidden; /* 배경/위치 */
  transition:all .3s; padding:17px 0; visibility:hidden; z-index:1000;
}
#header .nav .deps_1 > li .deps_2 li > a{padding:8px 0; justify-content:center; font-size:17px; color:#fff}

/* 우측 유틸 */
#header .header-util-box{padding-right:70px; display:flex; align-items:center;}
#header .icon-box{height:100%; display:flex; align-items:center;}
#header .icon-box button{padding:25px; font-size:24px; color:#fff}
#header .icon-box button.ham{display:none; background:none;}
#header .fix_btn_box{position:fixed; right:40px; bottom:40px; opacity:1; z-index:5; transition:all .3s}

/* 배경 톤 스위치 */
.facility-header, .totalSearch-header, .medicalInformation-header, .myPage-header, #header.service-header{background-color:#f4f5f7}
.facility-header .nav .deps_1 > li a,
.totalSearch-header .nav .deps_1 > li a,
.myPage-header .nav .deps_1 > li a,
.medicalInformation-header .nav .deps_1 > li a,
#header.service-header .nav .deps_1 > li a{color:#000;}
.facility-header > .icon-box button,
.totalSearch-header > .icon-box button,
.myPage-header > .icon-box button,
.medicalInformation-header > .icon-box button,
#header.service-header > .icon-box button{color:#000}

/* 기타 */
.top_btn_box{width:100px; height:100px; border-radius:50%; box-shadow:2px 1px 25px rgb(0 0 0 / 15%); background-color:#fff; display:flex; align-items:center; justify-content:center; margin-top:30px; overflow:hidden; transition:background .3s}
.top_btn_box .top_btn{font-size:32px; cursor:pointer; width:100%; height:100%;}
.top_btn_box i{transition:.3s}
.footer .top_btn_box{display:none}

#header .fix_btn_box .menu_btn_box{background-color:#28bb9d; width:100px; min-height:100px; border-radius:50px; display:flex; align-items:center; justify-content:center; padding:35px 15px; box-shadow:2px 1px 25px rgb(0 0 0 / 25%); color:#fff; cursor:pointer; position:relative; transition:all .3s}
#header .fix_btn_box .menu_btn_box > i{display:block; font-size:32px; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); transition:all .3s}
#header .fix_btn_box .menu_btn_box ul{max-height:0; overflow:hidden; transition:max-height 500ms, opacity .3s; opacity:0}
#header .fix_btn_box .menu_btn_box ul li a{display:flex; align-items:center; justify-content:center; flex-wrap:wrap}
#header .fix_btn_box .menu_btn_box ul li + li{margin-top:35px}
#header .fix_btn_box .menu_btn_box ul li .icon{width:100%; margin-bottom:15px; color:#fff; font-size:32px; display:flex; align-items:center; justify-content:center; opacity:.4; transition:all .3s}
#header .fix_btn_box .menu_btn_box ul li .icon img{width:35px}
#header .fix_btn_box .menu_btn_box ul li .icon + span{color:#fff; display:block; font-size:13px}

/* 검색 폼 */
.search_form_wrap{opacity:0; pointer-events:none; position:absolute; top:109px; z-index:99; width:100%; transition:.3s}
.search_form_wrap.show{opacity:1; pointer-events:inherit;}
.search_form_wrap .search_box{height:300px; display:flex; align-items:center; justify-content:center; background:#28bb9d;}
.search_form_wrap .search_box > .search_area_close{color:#fff; margin-left:15px; font-size:23px; cursor:pointer; position:relative; z-index:9;}
.search_form_wrap .search_box > .search_area_close i{color:#fff;}
.search_form_wrap .search_box .input_box{width:340px; height:60px; position:relative;}
.search_form_wrap .search_box input{width:100%; height:100%; line-height:60px; font-size:14px; padding:0 70px 0 33px; background:#F5F5F6; border-radius:27.5px; border:none; outline:none;}
.search_form_wrap .search_box button{font-size:0; position:absolute; top:0; right:0; height:100%; padding:0 30px; color:#000}
.search_form_wrap .search_box button i{font-size:20px; color:#000}

/* 로그인 */
.hd_login{display:flex;}
.hd_login li+li{margin-left:10px;}
.hd_login a{font-size:16px; color:#fff;}
.hd_login .hd_btn{border:1px solid rgb(255 255 255 / 0.3); padding:13px 25px; border-radius:25px; font-family:'Paperlogy'; font-weight:500; letter-spacing:2px; font-size:15px; transition:.3s}
.hd_login .hd_btn:hover{background:#0072bc; border:1px solid #0072bc; color:#fff;}

#header .nav .app-btn{display:none;}
#header.fixed .hd_login a{color:#555;}
#header.fixed .hd_login .hd_btn{border:1px solid rgb(0 0 0 / 0.2); color:#555;}
#header.fixed .hd_login .hd_btn:hover{background:#0072bc; border:1px solid #0072bc; color:#fff;}

/* FIXED 스타일 */
#header.fixed #headerInnerWrap{top:0; height:110px; box-shadow:12px 9px 17px #0000001c; background:#fff; border-bottom:0;}
#header.fixed .logo{top:20px;}
#header.fixed .logo a{width:200px; background-image:url(../img/common/logo-fixed.png);}
#header.fixed .nav .deps_1 > li a{color:#333;}

.sns{position:fixed; top:40%; right:50px;}
.sns li+li{margin-top:10px;}
.sns a{display:flex; justify-content:center; align-items:center; width:77px; height:77px; background:#fff; color:#333; border-radius:50%; box-shadow:8px 8px 16px 0 rgba(0,0,0,.08);}
.sns a img{width:40px;}
.sns a i{font-size:40px;}
.thaicon{font-family:'Paperlogy'; font-weight:700; line-height:90%;}

/* ========== RESPONSIVE ========== */
@media (max-width:1920px){
  #headerInnerWrap{height:110px;}
  #header .logo a{width:250px;}
  #header .nav .deps_1 > li{font-size:15px;}
  #header .nav .deps_1 > li a{padding:0 40px; font-size:20px;}
  #header .nav .deps_1 > li .deps_2 li > a{font-size:16px;}
  #header .nav .deps_1 > li .deps_2{width:170px; margin-left:-85px;}

  .hd_login a{font-size:15px;}
  .hd_login .hd_btn{font-size:12px; padding:10px 20px;}
  .app-btn a{padding:10px 20px; font-size:16px;}

  #header.fixed #headerInnerWrap{height:80px;}
  #header.fixed .logo a{width:230px;}

  .sns a{width:57px; height:57px;}
  .sns a img{width:27px;}
  .sns a i{font-size:30px;}
}

@media (max-width:1680px){
  .app-btn:before{display:none;}
  #header .nav{transform:translateX(-50%);} 
  #header .nav .deps_1 > li a{padding:0 30px;}
}

/* ===== 모바일 (오프캔버스) ===== */
@media (max-width:1400px){
  #headerInnerWrap{height:70px;}
  #header .nav .close,
  #header .icon-box button.ham,
  #header .quick-text{display:block}

  #header .logo{padding-left:20px;}
  #header .logo a{width:210px;}
  #header .header-util-box{padding-right:0;}
  #header .nav .close{position:absolute; right:30px; top:20px; color:#fff; font-size:28px}
  #header .nav{
    position:fixed; left:0; right:auto; top:0; width:100%; height:100%; z-index:10;
    background-color:#141d3c; padding:20px 0; overflow:auto;
    display:flex; flex-direction:column; align-items:flex-start;
    /* 통일: transform 기반 오프캔버스 */
    transform:translateX(100%); transition:transform .5s ease-in-out;
  }
  #header.on .nav{ transform:translateX(0); }

  #header .nav .quick-text{display:block; margin-top:40px; width:100%;}
  #header .nav .quick-text > p{font-size:24px; color:#fff; font-weight:700; padding:0 40px;}
  #header .nav .quick-text .navi_bg{padding:0; box-shadow:none; border-radius:0; display:flex; margin-top:20px; border-bottom:10px solid rgba(255,255,255,.2)}
  #header .nav .quick-text .navi_bg li{width:20%; border:1px solid rgba(255,255,255,.2); height:110px; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:0 15px;}
  #header .nav .quick-text .navi_bg li + li{margin-top:0; border-left:none;}
  #header .nav .quick-text .navi_bg .icon_box{height:40px; display:flex; align-items:center; justify-content:center}
  #header .nav .quick-text .navi_bg li .ico_tit{word-break:keep-all;}
  #header .nav .quick-text .navi_bg li .ico_tit br{display:none;}

  #header .nav .bot-text{display:flex; font-size:15px; width:100%; padding-left:40px; padding-top:15px;}
  #header .nav .bot-text ul{display:flex; width:100%;}
  #header .nav .bot-text ul li{border:1px solid rgba(255,255,255,.2); color:#fff; border-radius:50px; padding:0 15px; height:35px; line-height:33px; font-size:13px;}
  #header .nav .bot-text ul li + li{margin-left:15px;}
  #header .nav > ul{display:flex; flex-direction:column; align-items:flex-start; padding:20px 0;}
  #header.on > .right .spe .ham{display:none}
  #header.on > .right .spe .close{display:flex; position:fixed; right:0; top:0; width:80px; height:80px;}
  #header .nav .deps_1{padding:0; margin-top:40px; width:100%; height:auto}
  #header .nav .deps_1 > li{width:100%; height:auto; font-weight:500; padding:0; border-bottom:1px solid rgb(255 255 255 / 0.2)}
  #header .nav .deps_1 > li > a{height:auto; padding:20px 40px; color:#fff !important; display:flex; align-items:center; justify-content:flex-start;}
  #header .nav .deps_1 > li > a::after{
    content:"\e942"; font-family:xeicon; display:none; width:auto; height:auto; font-size:15px;
    transform:translateX(0); vertical-align:middle; line-height:1; margin-left:auto; font-weight:500; transition:all .3s;
  }
  #header .nav .deps_1 > li:first-child a{margin-top:0;}
  #header .nav .deps_1 > li.on{background-color:transparent; color:#fff;}
  #header .nav .deps_1 > li.active > a::after{transform:rotate(180deg);}
#header .nav .deps_1 > li > .deps_2:empty {
  display: none !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}
  /* 모바일에서 서브는 문서 흐름에 따라 펼침 */
  #header .nav .deps_1 > li .deps_2{
    position:static; transform:none; opacity:1; visibility:visible;
    transition:none; display:none; width:100%; margin-left:0;
  }
  #header .nav .deps_1 > li .deps_2 li > a{justify-content:flex-start; padding-left:40px}

  /* 모바일: 메뉴 열린 상태에서 active 항목 서브 보이기 */
  #header.on .nav .deps_1 > li.active > .deps_2{ display:block !important; }

  #header .fix_btn_box .menu_btn_box{display:none}
  #header.fixed .icon-box button{color:#333; background:none;}

  #header .nav .app-btn{display:block;}
  #header .nav .app-btn{text-align:center; margin:15px 0 0; width:100%;}
  #header .nav .app-btn a{display:inline-block;}
}

/* ===== 데스크톱(hover) ===== */
@media (min-width:1400px){
  #header .nav .deps_1 > li:hover a:before{opacity:1; bottom:-5px;}
  /* 데스크톱: hover 시 서브 표시 */
  #header .nav .deps_1 > li:hover .deps_2{
    display:block; opacity:1;
   top: calc(100% - 30px);       /* 바로 밑에서 5px 더 내리고 싶으면 숫자 조절 */
    left: 50%;
    transform: translate(0%, 0);
    visibility:visible; z-index:1000;
  }

  #header .fix_btn_box .top_btn_box:hover{box-shadow:none; background:#000;}
  #header .fix_btn_box .top_btn_box:hover i{color:#fff;}
  #header .fix_btn_box .menu_btn_box:hover ul{max-height:542px; opacity:1}
  #header .fix_btn_box .menu_btn_box:hover > i{opacity:0; visibility:hidden}
  #header .fix_btn_box .menu_btn_box ul li a:hover .icon{opacity:1}
}

@media all and (max-width:640px){
  #header .logo a{width:120px;}
  #header .header-util-box .app-btn{display:none;}
  #header.fixed #headerInnerWrap{height:70px;}
  #header.fixed .logo a{width:120px;}
  .hd_login .hd_btn{padding:10px; font-size:10px;}
  .sns{right:20px;}
  .sns a{width:50px; height:50px;}
  #header .icon-box button{padding:20px;}
  .hd_login li + li{margin-left:5px;}
}





/* ===== 데스크탑: 서브메뉴 위치/배경 커스텀 ===== */

  #header:not(.on) .nav .deps_1 > li:hover > .deps_2{
    display: block !important;
    opacity: 1;
    visibility: visible;
  }
}

  /* 마우스 올리면 보이기 */
  #header:not(.on) .nav .deps_1 > li:hover > .deps_2{
    display: block !important;
    opacity: 1;
    visibility: visible;
  }

  /* 서브 항목 hover 배경(옵션) */
  #header .nav .deps_1 > li .deps_2 li > a:hover{
    background: rgba(255,255,255,.12);
  }

  /* 부모들이 잘라먹지 않도록 */
  #header #headerInnerWrap,
  #header .nav, #header .nav .deps_1, #header .nav .deps_1 > li{
    overflow: visible;
  }
}

/* ===== 모바일: 클릭으로 펼친 서브의 간격/배경 ===== */
@media (max-width: 1400px){
  /* 모바일은 문서 흐름상 아래로 펼쳐지므로 margin-top으로 간격 조절 */
  #header .nav .deps_1 > li .deps_2{
    margin-top: 8px;             /* ▼ 여기 숫자로 모바일에서의 위 간격 조절 */
    background: #183559;         /* ▼ 모바일에서의 서브 배경색 */
  }

  /* active(펼침) 상태에서 확실히 보이도록 */
  #header.on .nav .deps_1 > li.active > .deps_2{
    display: block !important;
  }
}