@media only screen and (min-width:1px) and (max-width:767px) {
	
    .top_wrap { position:fixed; width:100%; height:70px; background:#fff; z-index: 20; border-bottom:1px solid #f8f8f8; /*box-shadow:0px 1px 15px #ddd;*/ }
    .top_wrap .top_logo { float:left; margin:15px 0 0 5%; position: relative; z-index: 9999;}
	.top_wrap .top_logo img { height:40px;  }



    .top_menu_wrap {  display:none;  }
    .menu_bg{ display:none;  }

    .menu_popup{display: none;}
    .popup_on{display: block;}

.top_ri { float:right; margin:18px 80px 0 0;   }
.top_ri ul li { float:left;  }
.top_h { display:none;   }

.top_s { margin:0px 0 0 0;   }

.button_container { position: fixed; top: 23px; right:5%; height: 27px; width: 35px; 
cursor: pointer; z-index: 99999; transition: opacity 0.25s ease;}
.menu_popup_wrap { width:100%; margin:0 auto; padding:50px 0;  }
.menu_popup_con { float:left; width:calc(90%/1);  margin:20px 5%;  }
    }

/*태블릿 : 640 ~ 1399px — 상단 메뉴 그대로 노출(크기만 축소) + 햄버거 병행 */
@media only screen and (min-width:768px) and (max-width:1399px) {

    .top_wrap { position:fixed; top:0; left:0; width:100%; height:100px; background:#fff; z-index: 20; border-bottom:1px solid #eee; }

    /* 로고 : 왼쪽 고정, 페이지 폭에 따라 축소 */
    .top_wrap .top_logo { position:absolute; top:0; left:20px; height:100px; display:flex; align-items:center; z-index: 9999; }
    .top_wrap .top_logo img { height:44px; width:auto; display:block; }

    /* 상단 메뉴 : 로고와 겹치지 않도록 햄버거 왼쪽에 붙여 정렬 */
    .top_menu_wrap {display: none;}

    .menu_popup{display: none;}
    .popup_on{display: block;}

.top_ri { float:right; margin:28px 100px 0 0;   }
.top_ri ul li { float:left;  }
.top_h {  margin:10px 20px 0 0; padding-right:20px;  border-right:1px solid #000;  }
.top_h a { font-size:19px; font-weight:500; color:#000;     }
.top_h a:hover { color:#00a3ac;  }
.top_s { margin:3px 0 0 0;   }

/* 햄버거 : 조금 작게 */
.button_container { position: fixed; top: 38px; right:20px; height: 22px; width: 30px;
cursor: pointer; z-index: 99999; transition: opacity 0.25s ease;}
#toggle span { height:4px; }
#toggle span:nth-of-type(2) { top:9px; }
#toggle span:nth-of-type(3) { top:18px; }
#toggle.active .top { transform: translateY(9px) translateX(0) rotate(45deg); }
#toggle.active .bottom { transform: translateY(-9px) translateX(0) rotate(-45deg); }

.menu_popup_wrap { width:100%; margin:0 auto; padding:100px 0 0 0;  }
.menu_popup_con { float:left; width:calc(90%/2); height:380px;  margin:30px 2.5%;  }
.menu_popup_w { width:80%; margin:0 auto; }
    }




/*PC*/
@media only screen and (min-width:1400px) {

/* ===== 헤더 : 1400px 그리드 기준 ===== */
/* 바(bar)는 화면 전체 폭, 내부 요소(로고/메뉴/전체메뉴 버튼)는 1400px 안쪽에 정렬 */

.top_wrap { position: fixed; top:0; left:0; width:100%; height:100px; background:#fff; z-index: 20; border-bottom:1px solid #eee; /*box-shadow:0px 1px 15px #ddd;*/ }

/* 로고 : 1400px 컨테이너 왼쪽 끝 (창이 1400px에 가까워도 잘리지 않도록 최소 20px 확보) */
.top_wrap .top_logo { position:absolute; top:0; left:50%; margin-left:-700px; height:100px; display:flex; align-items:center; z-index: 9999; }
.top_wrap .top_logo { left:max(20px, calc(50% - 700px)); margin-left:0; }
.top_wrap .top_logo img { height:56px; width:auto; display:block; }

/* 메뉴 : 화면(=컨테이너) 정중앙
   ※ width를 반드시 지정할 것. 미지정 시 absolute 요소의 폭이 '남은 공간(=화면의 50%)'으로
      계산되어 1400~1600px 구간에서 마지막 메뉴가 아랫줄로 떨어짐 (기존 소스의 버그) */
/* 메뉴 위치 : 로고 오른쪽 끝 ~ 햄버거 왼쪽 끝 사이의 정중앙
   로고(폭 250px)가 햄버거(35px)보다 훨씬 넓어서, 화면 정중앙에 두면
   왼쪽은 37px·오른쪽은 234px가 남아 눈으로는 왼쪽으로 치우쳐 보임.
   left  = 로고 오른쪽 끝(중앙-451px) + 10px 여백
   right = 햄버거 왼쪽 끝(중앙+635px) - 10px 여백
   ※ 화면 정중앙으로 되돌리려면 : left:0; right:0; 로만 바꾸면 됨 */
.top_menu_wrap { position:absolute; top:0; left:calc(50% - 440px); right:calc(50% - 625px); width:auto; margin-left:0; text-align:center; }

/* ↓ 메뉴 간격은 이 width 하나로만 조절 (inline-block 이라 폭을 바꿔도 항상 자동 중앙정렬) */
.top_menu>ul { width:auto; margin-left:0; font-size:0; /* inline-block 사이 공백 제거용 */ }
.top_menu>ul>li { display:inline-block; vertical-align:top; float:none; margin:18px 0 0 0; text-align:center; width:180px; }
.top_menu>ul>li>a { display: block;  font-size:19px; font-weight:500; color:#000; padding: 20px 20px 34px 20px; white-space:nowrap; }


.cf:after{content: ""; display: block; clear: both;}

.top_menu li ul.sub{display: none; height:300px; position: relative; z-index: 20;}
/* 서브메뉴 텍스트가 긴 '주요사업소개'만 폭을 넓혀 중앙 정렬 유지
   margin-left = (항목폭 180 - 서브폭 220) / 2 = -20px  ← 항목폭 바꾸면 이 값도 같이 조정 */
.top_menu li ul.sub2 { width:220px; margin-left:-20px; }
/* float 유지 필수 : float을 빼면 첫 번째 li의 margin-top 11px가 부모 ul로
   마진 병합(margin collapsing)되면서 강조 패널(.bg_on)이 11px 아래로 내려가
   메가메뉴 바닥(400px) 밖으로 튀어나온다 */
.top_menu li ul.sub li{float:left; clear: both; width: 100%; margin: 11px 0 0 0;}
.top_menu li ul.sub li a{font-size: 15px; line-height:22px; font-weight:400; color: #333; transition: all ease 0.3s;  }
.top_menu li ul.sub li.pt {margin-top: 10px;} 
.top_menu li ul.sub li a b{font-size: 15px; line-height:22px;color: #333; }
.top_menu li ul.sub li a:hover {color: #00a3ac;}
.top_menu li ul.sub li a b:hover {color: #00a3ac;}


.menu_bg{width: 100%; position: absolute; top:100px; left: 0; height: 300px; border-top: 1px solid #ddd; box-shadow: 0 2px 6px #ddd; overflow: hidden; 
/*background: #e5f6f7;*/ background:url('/images/sub_topmenu_bg3.png') center top no-repeat ;  }
.menu_bg .menu_img{margin: 30px 0 0 2%;}
.menu_bg img{width: 20%; max-width: 260px;}

.bg_on{background-color: #effdfe;  }

.menu_popup{display: none;}
.popup_on{display: block; transition: all 0.5s;}

.top_ri { float:right; margin:28px 100px 0 0;   }
.top_ri ul li { float:left;  }
.top_h {  margin:10px 20px 0 0; padding-right:20px;  border-right:1px solid #000;  }
.top_h a { font-size:19px; font-weight:500; color:#000;     }
.top_h a:hover { color:#00a3ac;  }
.top_s { margin:3px 0 0 0;   }

/* 전체메뉴 버튼 : 1400px 컨테이너 오른쪽 끝에서 30px 안쪽 (700-30=670)
   창이 1400px에 가까울 때도 화면 밖으로 나가지 않도록 최소 30px 확보 */
.button_container { position: fixed; top: 36px; left:auto; right:calc(50% - 670px); height: 27px; width: 35px; 
cursor: pointer; z-index: 99999; transition: opacity 0.25s ease;}
.button_container { right:max(30px, calc(50% - 670px)); }
.menu_popup_wrap { width:100%; margin:0 auto; padding:100px 0 0 0;  }
.menu_popup_con { float:left; width:calc(90%/2); height:380px; margin:30px 2.5%;  }
.menu_popup_w { width:70%; margin:0 auto; }


    }
    

.top_menu ul li .ms {font-size: 12px;}

/*전체메뉴 보기 버튼*/
.button_container:hover {opacity: 0.9;}
.button_container.active .top { transform: translateY(11px) translateX(0) rotate(45deg); background: #fff;}
.button_container.active .middle {opacity: 0;background: #fff;}
.button_container.active .bottom { transform: translateY(-11px) translateX(0) rotate(-45deg); background: #fff;}
.button_container span { background: #000000; border: none; height: 5px; width: 100%; position: absolute; top: 0; left: 0; transition: all 0.35s ease; cursor: pointer;}
.button_container span:nth-of-type(2) { top: 11px;}
.button_container span:nth-of-type(3) { top: 22px;}

.overlay { position: fixed; background: #093e8d; top: 0; left: 0; width: 100%; height: 0%; opacity: 0; visibility: hidden; 
transition: opacity 0.7s, visibility 0.35s, height 0.35s; overflow: hidden; z-index: 999; overflow-y:scroll; }
.overlay.open { opacity: 0.9; visibility: visible; height: 100%;}
.overlay nav { /*position: relative; height: 70%; top: 50%; transform: translateY(-50%); text-align: center; */}


.menu_popup_con .menu_popup_con_tit { width:100%; font-size:25px; font-weight:700; color:#fff; border-bottom:3px solid #00a3ac;  padding:0 0 5px 0; margin:0 0 10px 0; }
.menu_popup_con ul li { float:left; width:100%; padding:10px 0;   }
.menu_popup_con ul li a { font-size:19px; color:#fff;  }
.menu_popup_con ul li .ms {font-size: 20px; color: #fff;}
.menu_popup_con ul li a:hover { color:#00a3ac;   }
.menu_popup_con ul li.pt {margin-top: -10px;}
.menu_popup_con ul li.pt a {font-size: 16px;}