@charset "utf-8";

:root{
--tit_black: #111;
--text_black: #444;
--white: #fff;
--blue: #1172F1;
--light_blue: #EAF3FF;
--bg_blue: #F3F8FC;
--orange: #E55902;
--tit: 'SUITE';
--line: 1px solid #DDD;
}

/* set */
*{box-sizing: border-box;}
body, input, textarea, select, button, table{font-family: 'SUIT', 'pretendard GOV', 'Dotum', "돋움", sans-serif;color: var(--text_black);}
a{color: var(--tit_black);}
h1, h2{font-family: 'SUITE', 'ROKG', 'Dotum', "돋움", sans-serif;}

/* scroll */
*::-webkit-scrollbar {width:5px;height:5px;}
*::-webkit-scrollbar-track {border-radius:5px;background:#f4f4f4;}
*::-webkit-scrollbar-thumb {background:var(--blue);border-radius: 5px}

/* mobile */
.mbiz header{position: fixed;top: 0;left: 0;width: 100%;background: #fff;/*padding-top: 20px;*/z-index: 8;transition: transform .3s ease;}
.mbiz header.is-hidden:not(.main_header){ transform: translateY(-100%);}

.mbiz .head_top{display: flex;padding: 0 20px;height: 80px;align-items: center;justify-content: space-between;}
.mbiz .head_top h1 a{display: flex;gap: 6px;font-size: 18px;font-weight: 800;}
.mbiz .head_top h1 span{width: 77px;height:30px;font-size: 0;overflow: hidden;background: url("/images/common/logo.png") center /cover;}
.mbiz .head_top .util{display: flex;gap: 10px;align-items: center;}
.mbiz .head_top .util>a{position: absolute;top: 10px;right: 12px;display: flex;gap: 6px;align-items: center;}
.mbiz .head_top .util>a em{color: var(--orange);font-size: 14px;}
.mbiz .head_top .util>a:after{content: ">";font-weight: bold;}
.mbiz .head_top ul{display: flex;gap: 10px;align-items: center;}
.mbiz .head_top li a{display: flex;width: 24px;height: 24px;font-size: 0;background: url("/images/common/common_ico.png") center -24px;}
.mbiz .head_top li.search a{background-position: center -72px;}
.mbiz .head_top li.alert a{background-position: -39px -120px;position: relative;width: 30px;}
.mbiz .head_top li.alert i{position: absolute;top: 0;right: 0;font-size: 11px;line-height: 16px;width: 16px;height: 16px;background: #e41818;color: #fff;font-weight: 700;letter-spacing: -1px;font-style: normal;border-radius: 100%;text-align: center;}
.mbiz .head_top li.join a{background-position: center -834px;}
.mbiz .head_top li.all_menu a{background-position: center -168px;}
.mbiz .head_top li.all_menu{display: none;}
.mbiz .head_top .menu_open{display: inline-flex;width: 24px;height: 24px;font-size: 0;background: url("/images/common/common_ico.png") center -168px;}
.mbiz nav{display: none;position: fixed;top: 100px;bottom: 0;left: 0;right: 0;background: rgba(0,0,0,0.7);backdrop-filter: blur(5px);z-index: 9}
.mbiz nav.on{display: block;}
.mbiz nav .menu{background: var(--bg_blue);height: 100%;max-width: 600px;position: absolute;right: 0;width: 100%;}
.mbiz nav .menu>ul>li>a{display: block;width: 160px;padding: 20px;border-bottom: var(--line);font-size: 18px;}
.mbiz nav .menu>ul>li.on>a{font-weight: 700;color: var(--blue);background: #fff;}
.mbiz .depth_box{display: none;position: absolute;top: 0;bottom: 0;left: 160px;right: 0;background: #fff;}
/* [2026-09-09]hsy-claude : 메가메뉴 전환 - depth_box 가 1뎁스 li 안이 아니라 .menu 직속으로 하나만 남았다 */
.mbiz nav .menu .depth_box.on{display: block;}
.mbiz .depth_box .depth_wrap{padding: 10px 20px;}
/* [2026-09-09]hsy-claude : 모바일은 예전처럼 1뎁스를 눌러야 그 컬럼만 보인다 (PC 는 아래 1024 블록에서 전부 노출) */
.mbiz .depth_box .depth_wrap>ul{display: none;}
.mbiz .depth_box .depth_wrap>ul.on{display: block;}
.mbiz .depth_box .depth_wrap>ul>li>a{display: flex;align-items: center;justify-content: space-between;padding: 10px 0;border-bottom: var(--line);}
.mbiz .depth_box .depth_wrap>ul>li.has_child>a:after{content: "+";font-weight: 700;}
.mbiz .depth_box .depth_wrap>ul>li.on>a{font-weight: 700;border-color: var(--tit_black);}
.mbiz .depth_box .depth_wrap>ul>li.has_child.on>a:after{content: "-";}
.mbiz .depth_box li div{display: none;padding: 10px;border-bottom: var(--line);}
.mbiz .depth_box li.on div{display: block;}
.mbiz .depth_box li li a{display: block;padding: 10px 0;}
.mbiz .depth_box li li.on a{color: var(--orange);}
.mbiz .menu .menu_close{position: absolute;top: -52px;right: 20px;width: 24px;height: 24px;font-size: 0;overflow: hidden;background: url("/images/common/common_ico.png") center -216px #fff;}
@media (max-width: 375px) {
.mbiz .head_top{padding: 0 12px;}
.mbiz .head_top .util, .mbiz .head_top ul{gap: 6px;}
.mbiz .menu .menu_close{right: 12px;}
}

.mbiz .main_header{position: absolute;width: 100%;background: none;}
.mbiz .main_header .head_top h1 a{color: var(--white);}
.mbiz .main_header .head_top h1 span{background-image: url("/images/common/logo_w.png");}
.mbiz .main_header .head_top .util>a, .mbiz .main_header .head_top .util>a em{color: var(--white);}
.mbiz .main_header .head_top li a{background-position: center 0;}
.mbiz .main_header .head_top li.search a{background-position: center -48px;}
.mbiz .main_header .head_top li.alert a{background-position: center -96px;}
.mbiz .main_header .head_top li.join a{background-position: center -810px;}
.mbiz .main_header .head_top li.all_menu a, .mbiz .main_header .head_top .menu_open{background-position: center -144px;}

.mbiz .main_wrap{padding: 0 20px;}

.mbiz footer{background: var(--tit_black);color: rgba(255,255,255,.8);padding: 20px 0;}
.mbiz .f_top .site_link{position: relative;}
.mbiz .f_top .site_link button{display: flex;flex-wrap: wrap;justify-content: space-between;align-items: center;width: 100%;background: #292929;border-radius: 8px;padding: 14px 20px;color: var(--white);width: 100%;height: 60px;cursor: pointer;}
.mbiz .f_top .site_link button span{width: 10px;height: 6px;background: url("/images/common/common_ico.png") center -478px;font-size: 0;}
.mbiz .f_top .site_link div{display: none;position: absolute;background: var(--white);border-radius: 8px;left: 0;right: 0;padding: 12px;max-height: 300px;overflow-y: auto;}
.mbiz .f_top .site_link div::-webkit-scrollbar-thumb{background: var(--orange);width: 3px;border-radius: 3px;}
.mbiz .f_top .site_link div.on{display: block;}
.mbiz .f_top .site_link div li{border-bottom: 1px dashed #ddd;}
.mbiz .f_top .site_link div li a{display: block;padding: 8px 0;font-size: 14px;}
.mbiz .f_top .site_link div button{position: absolute;top: -60px;left: 0;}
.mbiz .f_top .site_link div button span{transform: rotate(180deg);}
.mbiz .f_logo{margin: 40px 0;width: 160px;}
.mbiz .f_logo a{display: flex;gap: 6px;color: var(--white);align-items: center;font-size: 18px;font-family: var(--tit);font-weight: 800;}
.mbiz .f_logo a span{width: 77px;height: 30px;background: url("/images/common/logo_w.png") no-repeat center /cover;font-size: 0;overflow: hidden;}
.mbiz .f_link>ul{display: flex;gap: 10px 20px;flex-wrap: wrap;margin-bottom: 30px;}
.mbiz .f_link li a{display: block;color: rgba(255,255,255,.8);}
.mbiz .f_link li strong{color: var(--white);}
.mbiz .f_call p{margin-bottom: 10px;}
.mbiz .f_call p a{display: block;color: #FF6A0D;font-size: 32px;font-weight: 700;}
.mbiz .f_call ul{display: flex;gap: 0 10px;flex-wrap: wrap;}
.mbiz .f_call li{font-size: 14px;}
.mbiz .f_call li:after{content: "";width: 1px;height: 10px;display: inline-flex;background: rgba(255,255,255,.3);margin-left: 10px;}
.mbiz .f_call li:last-child:after{display: none;}
.mbiz .f_btm{margin-top: 30px;padding-top: 30px;border-top: 1px solid rgba(255,255,255,.3);}
.mbiz .mbiz .f_info ul{display: flex;flex-wrap: wrap;gap: 0 10px;margin-bottom: 30px;}
.mbiz .f_info li:before{content: "";width: 1px;height: 10px;display: inline-flex;background: rgba(255,255,255,.3);margin-right: 10px;}
.mbiz .f_info li:first-child:before{display: none;}
.mbiz .f_btns{margin: 30px 0 0;}
.mbiz .f_btns ul{display: flex;flex-wrap: wrap;gap: 10px;justify-content: center;}
.mbiz .f_btns li a{display: flex;flex-wrap: wrap;gap: 10px;padding: 14px 20px;color: var(--white);border: 1px solid rgba(255,255,255,.3);align-items: center;border-radius: 40px;height: 60px;}
.mbiz .f_btns li a:before{content: "";width: 20px;height: 20px;background: url("/images/common/common_ico.png") center -544px;}
.mbiz .f_btns li:first-child a:before{background-position: center -524px;}
.mbiz .f_btns .top{display: flex;justify-content: flex-end;margin: 30px 0 0;}
.mbiz .f_btns .top a{display: block;width: 60px;height: 60px;background: url("/images/common/common_ico.png") center -564px var(--orange);border-radius: 100%;font-size: 0;overflow: hidden;}

/* sub */
.mbiz .sub_container{padding-top: 100px;}
.mbiz .sub_top{background: var(--bg_blue);padding: 20px;}
.mbiz .sub_title{text-align: center;}
.mbiz .sub_title p{color: var(--orange);}
.mbiz .sub_title h3{font-size: 28px;font-family: var(--tit);color: var(--tit_black);margin-bottom: 10px;}
.mbiz .sub_title .tit ul{display: flex;flex-wrap: wrap;gap: 10px;justify-content: center;}
.mbiz .sub_title .tit li{position: relative;}
.mbiz .sub_title .tit li button{width: 60px;height: 60px;padding: 0;margin: 0;font-size: 0;background: url("/images/common/common_ico.png") var(--white);border: var(--line);border-radius: 100%;}
.mbiz .sub_title .tit li.share>button{background-position: center -624px;}
.mbiz .sub_title .tit li.print>button{background-position: center -684px;}
/* [2026-10-12]hsy-claude : 공유 펼침 영역(카카오톡·링크복사·닫기)에 z-index 가 없어, DOM 상 뒤에 오는 .sub_navi(브레드크럼 "회원사 ▼")가
	모바일에서 카카오톡 공유 버튼 위를 덮어 터치 시 드롭다운이 대신 열렸다(앱 실기기 점검 docs/41 C1).
	.sub_navi li div(z-index:1)보다 위, 고정 헤더(8)·메뉴/탭바(9)보다 아래인 2로 올린다. 속성 순서·한 줄 압축 규칙에 맞춰 함께 정리. */
.mbiz .sub_title .tit li>div{display:none;position:absolute;z-index:2;}
.mbiz .sub_title .tit li.on>div{display: block;}
.mbiz .sub_title .tit div ul{gap: 0;}
.mbiz .sub_title .tit div button{border: none;background-image: url("/images/common/share_open.png");}
.mbiz .sub_title .tit div .kko button{background-color: #F9E000;background-position: center 0;}
.mbiz .sub_title .tit div .fb button{background-color: #0866FF;background-position: center -60px;}
.mbiz .sub_title .tit div .insta button{background-color: #FF0077;background-position: center -120px;}
.mbiz .sub_title .tit div .clip button{background-color: #444;background-position: center -180px;}
.mbiz .sub_title .tit div .close button{background-color: var(--tit_black);background-position: center -240px;}
.mbiz .sub_navi{margin: 20px 0;}
.mbiz .sub_navi>ul{display: flex;flex-wrap: wrap;gap: 10px;justify-content: center;align-items: center;}
.mbiz .sub_navi>ul>li{display: flex;gap: 10px;flex-wrap: wrap;align-items: center;position: relative;}
.mbiz .sub_navi>ul>li:before{content: "";width: 20px;height: 20px;background: url("/images/common/common_ico.png") center -762px;}
.mbiz .sub_navi>ul>li:first-child:before{display: none;}
.mbiz .sub_navi>ul>li button{display: inline-flex;gap: 10px;align-items: center;background: none;padding: 0;cursor: pointer;}
.mbiz .sub_navi>ul>li button:after{display: inline-flex;width: 10px;height: 6px;background: url("/images/common/common_ico.png") center -782px;content: "";}
.mbiz .sub_navi>ul>li:last-child button{color: var(--orange);font-weight: 700;}
.mbiz .sub_navi .home a{display: inline-flex;align-items: center;gap: 4px;}
.mbiz .sub_navi .home a:before{content: "";width: 18px;height: 18px;background: url("/images/common/common_ico.png") center -744px;}
.mbiz .sub_navi li div{position: absolute;top: 24px;left: 0;right: 0;padding: 10px;background: var(--white);border-radius: 12px;box-shadow: 0 5px 10px rgba(0,0,0,.1);z-index: 1;display: none;}
.mbiz .sub_navi li.on div{display: block;}
.mbiz .sub_navi li li{border-bottom: 1px dashed #ddd;text-align: left;}
.mbiz .sub_navi li li a{display: block;padding: 10px 0;font-size: 14px;}
.mbiz .sub_banner{position: relative;max-width: 400px;margin: 0 auto;}
.mbiz .sub_banner .banner_slide li a{display: block;border-radius: 12px;overflow: hidden;font-size: 0;}
.mbiz .sub_banner .banner_slide li a img{width: 100%;}
.mbiz .sub_banner .control{position: absolute;bottom: 10px;width: 100%;}
.mbiz .sub_banner .control p{display: flex;justify-content: center;gap: 6px;}
.mbiz .sub_banner .control button{width: 12px;height: 12px;font-size: 0;padding: 0;margin: 0;background: rgba(255,255,255,.5);border-radius: 100%;cursor: pointer;}
.mbiz .sub_banner .control button.on{background: var(--white);}
.mbiz .content_inner{padding: 40px 20px;}

/* tablet */
@media (min-width: 768px) {
.mbiz .head_top h1 a, .f_logo a{font-size: 24px;}
.mbiz .head_to h1 span, .f_logo a span{width: 102px;height: 40px;}
.mbiz .head_to .util, .mbiz .head_to ul{gap: 20px;}
.mbiz .f_top .site_link{position: absolute;width: 200px;right: 20px;}
.mbiz .f_link li a{font-size: 18px;}
.mbiz .f_btns{display: flex;justify-content: flex-end;gap: 10px;}
.mbiz .f_btns .top{margin: 0;}

.mbiz .sub_top{padding: 40px 20px;}
.mbiz .sub_wrap{display: flex;flex-wrap: wrap;justify-content: space-between;align-items: flex-end;}
.mbiz .sub_title{text-align: left;}
.mbiz .sub_title .tit{display: flex;flex-wrap: wrap;align-items: center;gap: 10px;}
.mbiz .sub_navi>ul{justify-content: flex-start;}
.mbiz .sub_banner{margin: 0 0 0 auto;}
}

/* pc */
@media (min-width: 1024px) {
.mbiz .head_top li.all_menu{display: block;}
.mbiz .head_top .menu_open{display: none;}
.mbiz nav{display: block;position: static;background: none;backdrop-filter: none;}
/* [2026-09-09]hsy-claude : depth_box 를 메뉴 줄 바로 아래(top:100%)에 붙이려면 .menu 가 기준 상자여야 한다.
	static 이면 1024~1439 구간에서 header 를 기준으로 잡아 엉뚱한 위치가 된다 */
.mbiz nav .menu{position: relative;max-width: none;background:none;height: auto;}
/* [2026-09-09]hsy-claude : 1뎁스 줄과 2뎁스 컬럼이 같은 격자를 쓰게 맞춘다.
	ul.depth1 과 .depth_wrap 의 좌우 여백을 같게 두고 자식을 flex:1 로 나누면 컬럼이 버튼 아래로 정확히 떨어진다.
	버튼 폭이 글자 길이대로 제각각이면 맞출 방법이 없어 균등 폭으로 간다. 둘 중 하나만 고치면 어긋나니 항상 같이 볼 것.
	줄이 접히면 정렬이 깨지므로 nowrap 을 준다 */
/* [2026-09-09]hsy-claude : 화면이 넓어도 칸이 헐거워지지 않게 격자 전체 폭을 묶는다.
	가장 긴 2뎁스 "조달·지원사업 정보"(15px 기준 약 133px)에 여유를 둔 칸 165px x 8 = 1320px 기준.
	좌우 여백 20px 을 더해 1360px. .depth_wrap 도 같은 값이라야 컬럼이 버튼 아래로 떨어진다 */
.mbiz nav .menu>ul{display: flex;flex-wrap: nowrap;justify-content: center;max-width: 1360px;margin: 0 auto;padding: 0 20px;}
/* [2026-09-09]hsy-claude : 1뎁스와 2뎁스가 한 칸으로 이어져 보이도록 각 칸 왼쪽에 세로 점선을 넣는다.
	아래 .depth_wrap>ul 의 점선과 같은 x 좌표라 위아래가 한 줄로 이어진다.
	1뎁스만 떠 있을 때는 선이 없어야 해서 평소엔 transparent 로 자리만 잡아두고
	드롭다운이 열릴 때(.menu.on) 색을 준다. 폭은 그대로라 열고 닫을 때 칸이 밀리지 않는다 */
.mbiz nav .menu>ul>li{flex: 1;min-width: 0;border-left: 1px dotted transparent;}
.mbiz nav .menu.on>ul>li{border-left-color: #ddd;}
/* [2026-09-09]hsy-claude : 메뉴 블록 맨 앞에는 선이 서지 않도록 첫 칸만 뺀다 (칸과 칸 사이에만 남는다) */
.mbiz nav .menu>ul>li:first-child{border-left: 0;}
.mbiz nav .menu>ul>li>a{width: auto;border: none;font-size: 16px;font-weight: 700;position: relative;}
.mbiz nav .menu>ul>li.on>a{background: none;}
.mbiz nav .menu>ul>li>a:after{display: none;position: absolute;bottom: 0;left: 0;right: 0;height: 3px;background: var(--blue);content: "";}
.mbiz nav .menu>ul>li.on>a:after{display: block;}
/* [2026-09-09]hsy-claude : 높이 제한 해제 - 컬럼 내용만큼만 내려온다.
	1뎁스와 2뎁스를 가르던 border-top 은 걷어냈다(그림자만으로 패널이 구분된다).
	top 은 고정값(170px/90px)이 아니라 100% 로 둔다. 고정값이면 메뉴 버튼 높이가
	메인/서브에서 달라 사이에 틈이 생기고, 그 틈에 마우스가 닿으면 nav 를 벗어나서
	닫힘 타이머가 돌아 드롭다운이 깜빡였다. 100% 면 항상 메뉴 줄 바로 아래에 붙는다 */
.mbiz .depth_box{left: 0;top: 100%;bottom: auto;background: var(--white);box-shadow: 0 5px 10px rgba(0,0,0,.1);z-index: 9;}
.mbiz .menu .menu_close{display: none;}
/* [2026-09-09]hsy-claude : 한 메뉴의 2뎁스를 4열로 뿌리던 것을 1뎁스별 컬럼 배치로 바꾼다.
	좌우 여백은 위 ul.depth1 과 반드시 같은 값이어야 컬럼이 버튼 아래로 떨어진다 */
/* [2026-09-09]hsy-claude : 세로 여백을 .depth_wrap 이 아니라 컬럼(ul)이 갖는다.
	그래야 점선이 패널 위끝에서 시작해 1뎁스 쪽 점선과 끊김 없이 이어진다.
	align-items 는 기본값(stretch)으로 둬서 항목 수가 달라도 점선 길이가 같다 */
.mbiz .depth_box .depth_wrap{display: flex;max-width: 1360px;margin: 0 auto;padding: 0 20px;}
.mbiz .depth_box .depth_wrap>ul{display: block;flex: 1;min-width: 0;padding: 20px 0;border-left: 1px dotted #ddd;}
.mbiz .depth_box .depth_wrap>ul:first-child{border-left: 0;}
/* [2026-09-09]hsy-claude : 위 1뎁스가 가운데 정렬이라 2뎁스도 가운데로 맞추고, 항목별 밑줄은 걷어낸다
	(모바일은 목록형이라 좌측 정렬과 밑줄을 그대로 둔다) */
.mbiz .depth_box .depth_wrap>ul>li>a{justify-content: center;text-align: center;border-bottom: 0;font-size: 14px;word-break: keep-all;}
.mbiz .f_link li a:hover, .mbiz .f_link li a:focus{text-decoration: underline;}
.mbiz .f_btns li a:hover, .mbiz .f_btns li a:focus{background: rgba(255,255,255,.1)}
.mbiz .f_top .site_link div li a:hover, .mbiz .f_top .site_link div li a:focus{text-decoration: underline;}

.mbiz .main_header nav .menu>ul>li>a{color: var(--white);}

.mbiz .sub_container{padding-top: 170px;}
.mbiz .sub_top{padding: 60px 20px;}
.mbiz .sub_title p{font-size: 24px;}
.mbiz .sub_title h3{font-size: 65px;}
.mbiz .sub_navi .home a, .sub_navi>ul>li button{font-size: 18px;}
.mbiz .sub_navi li div{right: -10px;}
.mbiz .sub_navi li li a{font-size: 16px;}
}

/* wide */
@media (min-width: 1440px) {
.mbiz .head_top{padding: 0 80px;height: 100px;}
.mbiz .head_top h1, .mbiz .head_top .util{position: relative;z-index: 1;}
.mbiz .head_top .util>a{top: -40px;right: 0;}
.mbiz nav .menu{position: absolute;top: 30px;}
/* [2026-09-09]hsy-claude : 이 폭부터 nav 가 head_top 위에 겹쳐 놓이므로 왼쪽은 로고를 피하고
	오른쪽은 사이트맵 아이콘을 피해서, 남는 영역을 8칸이 고르게 나눠 쓴다.
	.depth_wrap 의 좌우 여백도 같은 값으로 맞춰야 컬럼이 버튼 아래에 떨어진다 */
/* [2026-10-12]hsy-claude : 사이트맵 아이콘을 통합검색 줄(유틸바 오른쪽 여백 80px = 로고 왼쪽 여백)에 맞춰 right:80px 로 옮기면서, 오른쪽 여백 80px 로는 마지막 메뉴가 아이콘(80~104px)과 겹치고 메뉴 덩어리도 오른쪽에 치우쳐 보였다. 아이콘 폭 24px + 간격 36px 을 더해 140px 로 늘린다. depth_wrap 도 같은 값이어야 2뎁스 컬럼이 어긋나지 않는다 */
.mbiz nav .menu>ul{max-width: 1740px;padding: 0 160px 0 320px;}
.mbiz .depth_box .depth_wrap{max-width: 1740px;padding: 0 160px 0 320px;}
.mbiz nav .menu>ul>li>a{padding: 30px 10px;}
.mbiz nav .menu>ul>li>a:hover, .mbiz nav .menu>ul>li>a:focus{color: var(--blue);}
.mbiz .depth_box .depth_wrap>ul>li>a:hover, .mbiz .depth_box .depth_wrap>ul>li>a:focus,
.mbiz .depth_box li li a:hover, .mbiz .depth_box li li a:focus{font-weight: 700;}

.mbiz footer{padding: 30px 0 60px;}
.mbiz footer .main_wrap{position: relative;}
.mbiz .f_top .site_link{right: 80px;}
.mbiz .f_link{display: flex;flex-wrap: wrap;justify-content: space-between;}
.mbiz .f_link>ul{flex-direction: column;gap: 20px;margin-bottom: 0;}
.mbiz .f_call{display: flex;flex-direction: column;justify-content: flex-end;align-items: flex-end;}
.mbiz .f_btm{margin-top: 40px;padding-top: 40px;display: flex;flex-wrap: wrap;justify-content: space-between;}
.mbiz .f_info ul{margin-bottom: 10px;display: flex;flex-wrap: wrap;gap: 12px;}
.mbiz .f_btns{margin: 0;}

.mbiz .main_wrap{padding: 0 80px;}

.mbiz .sub_container{padding-top: 140px;}
.mbiz .sub_top{padding: 45px 80px;position: relative;}
.mbiz .sub_top:before{display: block;content: "";position: absolute;top: 0;left: 0;width: 114px;height: 160px;background: url("/images/main/bg_img02.png") no-repeat bottom right /132px;}
.mbiz .sub_top:after{display: block;content: "";position: absolute;bottom: 0;right: 0;width: 230px;height: 248px;background: url("/images/main/bg_img01.png") no-repeat top left /333px;}
.mbiz .sub_wrap{position: relative;z-index: 1;}
.mbiz .content_inner{padding: 80px;}
}
@media (min-width: 1600px) {
header{padding-top: 0;}
.mbiz .head_top .util>a{position: static;}
/* [2026-09-09]hsy-claude : gap 은 .depth_wrap 과 어긋나 컬럼 정렬을 깨뜨려 걷어냈다 (여백은 a 의 padding 으로) */
.mbiz .f_top .site_link{right: 0;}

.mbiz .main_wrap{max-width: 1600px;margin: 0 auto;padding: 0;}

.mbiz .sub_top{padding: 45px 0;}
.mbiz .sub_wrap{max-width: 1600px;margin: 0 auto;}
.mbiz .content_inner{max-width: 1600px;margin: 0 auto;padding: 80px 0;}
}

/* util_new - 상단 유틸리티 바(환영 메시지·통합검색·알림·마이페이지) */
.mbiz .util.new{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;width:100%;padding:8px 20px;border-bottom:var(--line);background:var(--white);color:var(--text_black);position: relative;}
/* [2026-09-08]hsy-claude : util 이 head_top 밖으로 나오면서 ".mbiz .head_top h1, .mbiz .head_top .util{z-index:1}" 규칙을 못 받게 됐다. 1440px 이상에서 nav .menu 가 right:0/width:100%/top:40px 로 head_top 줄 전체를 덮는데 .util.new 가 z-index 없이 뒤에 깔려, 유틸바에서 아래로 내려와 붙는 사이트맵 아이콘(li.all_menu, bottom:-50px)이 메뉴에 가려 클릭/호버가 안 먹었다. */
/* [2026-10-12]hsy-claude : 모바일 메뉴(nav, position:fixed z-index:9)를 연 상태에서 마이페이지·알림 드롭다운을 열면 메뉴 오버레이 밑에 깔려 보였음.
	드롭다운(z-index:5)은 유틸바가 만든 쌓임 맥락(z-index:2) 안에 갇혀 있어 실제로는 2로 쌓이는데, 같은 header 안의 nav 는 9라 항상 위에 그려진다.
	메뉴 오버레이가 쓰이는 1024px 미만에서만 유틸바를 nav 보다 위(10)로 올린다. 유틸바 자체는 nav 시작선(헤더 하단) 위에 있어 메뉴를 가리지 않고 드롭다운만 위로 올라온다. 1024 이상은 아래에서 원래 2로 되돌린다 */
.mbiz .util.new{z-index:10;}
.mbiz .util.new>a{display:flex;align-items:center;}
.mbiz .util.new>a span{display:flex;align-items:center;gap:4px;}
.mbiz .util.new>a strong{font-weight:700;}
.mbiz .util.new>a em{order:-1;font-style:normal;color:var(--orange);}
.mbiz .util.new>ul{display:flex;align-items:center;gap:0 12px;flex-wrap: wrap;justify-content: space-between;margin: 0 0 0 auto;}
.mbiz .util.new>ul>li{position:relative;}
.mbiz .util.new>ul>li:last-child:after{display:none;}
.mbiz .util.new>ul>li>a{display:flex;align-items:center;gap:2px;}
.mbiz .util.new li.alert a{align-items: flex-start;}
/* [2026-09-22]hsy-claude : 알림 배지는 안읽은 알림이 있을 때만 보인다 (header.js 가 i 에 .on 토글, 10건 이상은 9+).
	기존엔 항상 inline-flex 라 0건일 때도 주황 원이 떠서 기본을 none 으로 바꾸고 .on 에서만 띄운다. */
.mbiz .util.new li.alert i{display:none;align-items:center;justify-content:center;width:18px;height:18px;border-radius:100%;background:var(--orange);font-size:12px;font-style:normal;color:var(--white);}
.mbiz .util.new li.alert i.on{display:inline-flex;}
/* [2026-09-22]hsy-claude : 알림함 드롭다운 - 퍼블에 디자인이 없어 마이페이지 드롭다운(li.my>div)의 테두리·그림자·점선 구분을 따랐다.
	모바일에서는 li.alert 가 유틸바 중간에 있어 li 기준으로 띄우면 화면 왼쪽으로 잘린다.
	그래서 li 의 position 을 풀어 유틸바(.util.new, relative) 전체 폭 기준으로 좌우 12px 여백을 두고 펼친다.
	메인 헤더(.main_header)는 유틸바 글자가 흰색이라 상속되지 않게 드롭다운 글자색을 따로 지정한다. */
.mbiz .util.new>ul>li.alert{position:static;}
.mbiz .util.new li.alert>div{display:none;position:absolute;top:100%;left:12px;right:12px;z-index:5;border:var(--line);border-radius:8px;background:var(--white);box-shadow:0 5px 10px rgba(0,0,0,.1);font-size:14px;color:var(--text_black);}
.mbiz .util.new li.alert>div.on{display:block;}
.mbiz .util.new .alert_head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 16px;border-bottom:var(--line);}
.mbiz .util.new .alert_head strong{font-weight:700;color:var(--tit_black);}
/* [2026-09-22]hsy-claude : 모두 읽음 옆에 닫기(X) 버튼 추가. 제목·모두읽음·X 세 개를 space-between 으로 두면
	모두읽음이 가운데로 떠서, 모두읽음에 margin-left:auto 를 줘 X 와 함께 오른쪽에 붙인다. X 모양은 알림 삭제(.alert_del)와 같은 × 글리프. */
.mbiz .util.new .alert_all{margin-left:auto;font-size:13px;color:var(--blue);}
.mbiz .util.new .alert_close{display:inline-flex;flex:none;align-items:center;justify-content:center;width:24px;height:24px;font-size:0;}
.mbiz .util.new .alert_close:before{font-size:22px;line-height:1;color:var(--tit_black);content:"\00d7";}
.mbiz .util.new .alert_list{display:block;overflow-y:auto;max-height:360px;}
.mbiz .util.new .alert_list li{display:flex;align-items:flex-start;gap:8px;padding:12px 16px;border-bottom:1px dashed #ddd;}
.mbiz .util.new .alert_list li:last-child{border-bottom:none;}
.mbiz .util.new .alert_list li.on{background:var(--bg_blue);}
.mbiz .util.new .alert_list a{display:flex;overflow:hidden;flex:1;flex-direction:column;gap:4px;}
.mbiz .util.new .alert_list em{font-size:12px;font-style:normal;color:var(--blue);}
.mbiz .util.new .alert_list strong{font-weight:700;color:var(--tit_black);word-break:keep-all;}
/* [2026-09-22]hsy-claude : 안읽은 알림은 제목 앞에 주황 점을 찍어 배지 색과 맞춘다 */
.mbiz .util.new .alert_list li.on strong:before{display:inline-block;width:6px;height:6px;margin:0 6px 2px 0;border-radius:100%;background:var(--orange);vertical-align:middle;content:"";}
.mbiz .util.new .alert_list p{display:-webkit-box;overflow:hidden;font-size:13px;line-height:1.4;color:#666;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
.mbiz .util.new .alert_list span{font-size:12px;color:#999;}
.mbiz .util.new .alert_del{display:inline-flex;flex:none;align-items:center;justify-content:center;width:20px;height:20px;font-size:0;}
.mbiz .util.new .alert_del:before{font-size:18px;line-height:1;color:#999;content:"\00d7";}
.mbiz .util.new .alert_list li.alert_empty{justify-content:center;padding:30px 16px;background:none;color:#999;}
.mbiz .util.new li.my{position:relative;}
.mbiz .util.new li.my>div{display:none;position:absolute;top:100%;right:0;z-index:5;min-width:160px;padding:10px;border:var(--line);border-radius:8px;background:var(--white);box-shadow:0 5px 10px rgba(0,0,0,.1);}
.mbiz .util.new li.my>div.on{display:block;}
.mbiz .util.new li.my>div li{border-bottom:1px dashed #ddd;}
.mbiz .util.new li.my>div li:last-child{border-bottom:none;}
.mbiz .util.new li.my>div li a{display:block;padding:8px 0;font-size:14px;}
.mbiz .util.new li.my>div li a:hover, .mbiz .util.new li.my>div li a:focus{color: var(--blue);font-weight: 700;}
/* [2026-10-12]hsy-claude : 메뉴를 열면 햄버거(.menu_open)와 닫기 X(.menu_close)가 겹쳐 보였음.
	1) 유틸바가 nav 보다 위(z-index:10)라 햄버거가 X 를 덮는다 → 메뉴 열림 동안 .on 으로 숨김(header.js)
	2) 두 아이콘 위치가 어긋나 있었다. X 는 nav 상단에서 -52px = 헤더 2단(80px) 세로 가운데, 오른쪽은 head_top 여백(20px, 375 이하 12px).
		햄버거는 bottom:-50px 이 유틸바 하단 테두리 1px 을 빼고 계산돼 X 보다 3px 위였고, 376~767px 에서 right:12px 이라 X(20px)와 8px 어긋났다.
		bottom:-53px / 376px 이상 right:20px 로 X 와 같은 자리에 맞춘다 (닫으면 같은 자리에 햄버거가 다시 나타남) */
.mbiz .util.new .menu_open{display:inline-flex;position:absolute;right:12px;bottom:-53px;width:24px;height:24px;background:url("/images/common/common_ico.png") center -168px;font-size:0;}
.mbiz .util.new .menu_open.on{visibility:hidden;}
@media (min-width:376px){
.mbiz .util.new .menu_open{right:20px;}
}
.mbiz .util.new li.all_menu{display: none;}

.mbiz .main_header .util.new{border-color:rgba(255,255,255,.3);background:none;color:var(--white);}
.mbiz .main_header .util.new>a{color:var(--white);}
.mbiz .main_header .util.new>ul>li>a{color:var(--white);}
.mbiz .main_header .util.new .menu_open{background-position:center -144px;}

.mbiz nav .menu>ul>li>a>span{display: none;}

@media (min-width:768px){
.mbiz .util.new .menu_open{right: 20px;}
/* [2026-09-22]hsy-claude : 태블릿 이상은 알림 버튼 아래로 오른쪽 정렬해 붙인다 (폭은 90vw 안에서 360px 상한) */
.mbiz .util.new>ul>li.alert{position:relative;}
.mbiz .util.new li.alert>div{left:auto;right:0;width:90vw;max-width:360px;}
}

@media (min-width:1024px){
.mbiz .util.new .menu_open{display: none;}
/* [2026-10-12]hsy-claude : PC 는 nav 가 오버레이가 아니므로 기존 쌓임 순서(2) 유지 */
.mbiz .util.new{z-index:2;}
.mbiz .util.new li.all_menu{display: block;position: absolute;right: 20px;bottom: -50px;}
.mbiz .util.new li.all_menu a{display: flex;width: 24px;height: 24px;font-size: 0;background: url("/images/common/common_ico.png") center -168px;}
.mbiz .main_header .util.new li.all_menu a{background-position: center -144px;}
/* [2026-09-09]hsy-claude : 8칸으로 나눠 쓰는 폭이라 좌우 여백과 부제 크기를 줄인다 (1600 이상에서 원래 크기로) */
.mbiz nav .menu>ul>li>a{display: flex;flex-direction: column;align-items: center;justify-content: center;padding: 12px 8px;}
.mbiz nav .menu>ul>li>a>span{display: flex;padding: 2px 8px;font-size: 13px;font-weight: 400;border-radius: 4px;/*background: var(--light_blue);color: var(--blue);*/white-space: nowrap;color: #435676;}
/* .mbiz .main_header nav .menu>ul>li>a>span{background: rgba(255,255,255,0.2);color: var(--white);} */
.mbiz .main_header nav .menu>ul>li>a>span{color: rgba(255,255,255,.8);}
}

@media (min-width:1440px){
.mbiz .util.new{padding:8px 80px;}
/* [2026-10-12]hsy-claude : 유틸바 좌우 여백이 80px 로 커지는데 사이트맵 아이콘은 1024 구간의 right:20px 그대로라 통합검색 줄보다 오른쪽으로 튀어나와 있었다. 유틸바 여백(=로고 왼쪽 여백)과 같은 80px 로 맞춘다 */
.mbiz .util.new li.all_menu{right:80px;bottom: -60px;}
.mbiz nav .menu{top: 40px;}
.mbiz nav .menu>ul>li>a{gap: 2px;padding: 30px 10px 20px;}
.mbiz nav .menu>ul>li>a>span{padding: 0 6px;font-size: 14px;}
}

/* [2026-09-09]hsy-claude : 이 폭부터 칸이 150px 로 넉넉해져 글자를 키운다.
	위쪽 util_new 블록(@1440)보다 뒤에 있어야 이긴다 */
@media (min-width:1600px){
.mbiz nav .menu>ul>li>a{font-size: 18px;}
.mbiz .depth_box .depth_wrap>ul>li>a{font-size: 16px;}
}