/* 1. 프리텐다드 공식 웹폰트 고속 로드 */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.css");

/* 2. 새 GNB 영역 전체의 폰트 및 박스 크기 기준 강제 고정 */
.sun_utility_bar *, .sun_logo_container *, .sun_nav_container * {
    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, Roboto, sans-serif !important;
    box-sizing: border-box !important;
}

html, body {
    margin: 0 !important;
    padding: 0 !important;
}

.skipnavi {
    position: absolute !important;
    top: -1000px !important;
    left: -1000px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    color: #fff !important;
    background: #3a77ca !important;
    font-size: 13px !important;
    font-weight: bold !important;
    text-align: center !important;
    line-height: 40px !important;
    text-decoration: none !important;
}
.skipnavi:focus, .skipnavi:active {
    top: 0 !important;
    left: 0 !important;
    width: 200px !important;
    height: 40px !important;
    z-index: 99999999 !important;
}

/* ==========================================================================
   1층: 최상단 유틸리티 바 영역 (배경색 및 텍스트 색상 강제 부여)
   ========================================================================== */
.sun_utility_bar {
    width: 100% !important;
    background-color: #f3f5f9 !important; /* 회색 바 배경색 */
    border-bottom: 1px solid #e2e6ef !important;
    height: 36px !important;
    margin-top: 0 !important;
    position: relative !important;
    z-index: 9999999 !important;
}
.sun_utility_inner {
    width: 1200px !important;
    margin: 0 auto !important;
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    height: 100% !important;
}
.sun_utility_inner a {
    font-size: 12px !important;
    color: #666 !important; /* 기본 글자색 */
    text-decoration: none !important;
    margin-left: 15px !important;
    position: relative !important;
    transition: color 0.2s !important;
    z-index: 10 !important;
    display: inline-block !important;
}
.sun_utility_inner a:hover { 
    color: #3a77ca !important; /* 마우스 올렸을 때 파란색 */
}
.sun_utility_inner span.bar {
    display: inline-block !important;
    width: 1px !important;
    height: 10px !important;
    background: #ccc !important;
    margin-left: 15px !important;
}

/* ==========================================================================
   2층: 로고 및 메인 링크 영역
   ========================================================================== */
.sun_logo_container {
    width: 1200px !important;
    margin: 0 auto !important;
    height: 110px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    background-color: #fff !important;
    position: relative !important;
    z-index: 9999998 !important;
}
.sun_top_sublinks {
    width: 380px !important;
    display: flex !important;
    align-items: center !important;
    gap: 15px !important;
}
.sun_top_sublinks.left_side { justify-content: flex-start !important; }
.sun_top_sublinks.right_side { justify-content: flex-end !important; }

.sun_text_btn {
    font-size: 14px !important;
    color: #444 !important;
    text-decoration: none !important;
    font-weight: 500 !important;
    transition: all 0.2s !important;
    letter-spacing: -0.5px !important;
    display: inline-block !important;
}
.sun_text_btn:hover { 
    color: #3a77ca !important; 
}

/* 알약 버튼 색상 고정 구문 */
.sun_text_btn.point_btn {
    background: #fff !important;
    border: 1px solid #3a77ca !important;
    color: #3a77ca !important;
    padding: 5px 12px !important;
    border-radius: 20px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
}
.sun_text_btn.point_btn:hover {
    background: #3a77ca !important;
    color: #fff !important;
}

.sun_main_logo {
    width: 340px !important;
    text-align: center !important;
}
.sun_main_logo img {
    height: 52px !important; 
    width: auto !important;
    vertical-align: middle !important;
}

/* ==========================================================================
   3층: GNB 메인 내비게이션 바 베이스 (파란색 배경 강제 적용)
   ========================================================================== */
.sun_nav_container { 
    width: 100% !important; 
    height: 60px !important; 
    background-color: #3a77ca !important; /* ★ GNB 전체 배경 파란색 */
    position: relative !important; 
    z-index: 99999 !important;
}
.sun_gnb_inner { 
    width: 1200px !important; 
    margin: 0 auto !important; 
}
.sun_menu_depth1 { 
    display: flex !important; 
    justify-content: space-between !important; 
    list-style: none !important; 
    margin: 0 !important; 
    padding: 0 !important; 
}

.sun_li_1depth { 
    position: static !important; 
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}
.sun_a_1depth { 
    display: block !important; 
    padding: 0 16px !important; 
    line-height: 60px !important; 
    color: #ffffff !important; /* ★ 1뎁스 기본 글자색 흰색 */
    font-size: 15px !important; 
    font-weight: 700 !important; 
    text-decoration: none !important; 
    transition: 0.15s !important; 
    position: relative !important;
    z-index: 999999 !important; 
}

/* 1뎁스 호버 시 흰색 배경에 글자 파란색 반전 효과 */
.sun_li_1depth:hover > .sun_a_1depth { 
    background-color: #ffffff !important; 
    color: #3a77ca !important; 
}

/* ==========================================================================
   4층: 메가메뉴 2뎁스 풀 와이드 전체 판넬 (배경 하얗게 보정)
   ========================================================================== */
.sun_mega_panel {
    display: none !important; 
    position: absolute !important; 
    left: 0 !important; 
    top: 60px !important; 
    width: 100% !important; 
    background-color: #ffffff !important; /* 메가메뉴 내부 흰색 배경 */
    border-top: none !important; 
    border-bottom: 3px solid #3a77ca !important;
    box-shadow: 0 12px 25px rgba(0,0,0,0.08) !important; 
    z-index: 99999 !important; 
    padding: 35px 0 !important;
    text-align: left !important; 
}
.sun_li_1depth:hover .sun_mega_panel { 
    display: block !important; 
}

.sun_mega_inner_1200 { 
    width: 1200px !important; 
    margin: 0 auto !important; 
    display: flex !important; 
    justify-content: space-between !important; 
    align-items: stretch !important; 
}

.sun_col_1 { 
    width: 230px !important; 
    border-right: 1px solid #eeeeee !important; 
    padding-right: 15px !important; 
}
.col_title { 
    font-size: 22px !important; 
    font-weight: 800 !important; 
    color: #111111 !important; 
    margin: 0 0 10px 0 !important; 
    letter-spacing: -0.5px !important; 
}
.col_desc { 
    font-size: 13px !important; 
    color: #777777 !important; 
    line-height: 1.5 !important; 
    margin: 0 !important; 
}

.sun_col_2 { flex: 1 !important; padding: 0 25px !important; border-right: 1px solid #eeeeee !important; }
.sun_col_3 { flex: 1 !important; padding: 0 25px !important; border-right: 1px solid #eeeeee !important; }
.sun_col_4 { flex: 1 !important; padding: 0 25px !important; }

.disease_list { 
    list-style: none !important; 
    padding: 0 !important; 
    margin: 0 !important; 
}
.disease_list li { 
    margin-bottom: 9px !important; 
    list-style: none !important;
}
.disease_list li a { 
    font-size: 14px !important; 
    color: #444444 !important; /* 서브 질환 글자색 */
    text-decoration: none !important; 
    transition: 0.15s !important; 
    display: block !important; 
}
.disease_list li a:hover { 
    color: #3a77ca !important; 
    font-weight: 700 !important; 
    padding-left: 4px !important; 
}
.disease_list li.board_link a { 
    color: #222222 !important; 
    font-weight: 700 !important; 
    border-bottom: 1px solid #bbbbbb !important; 
    display: inline-block !important; 
    padding-bottom: 2px !important; 
}

.sun_col_5 { width: 240px !important; text-align: right !important; }
.mega_img_wrap { 
    width: 100% !important; 
    height: 160px !important; 
    background: #f8f9fa !important; 
    border: 1px solid #eaeaea !important; 
    position: relative !important; 
    overflow: hidden !important; 
    border-radius: 4px !important;
}
.mega_img_wrap img { 
    width: 100% !important; 
    height: 100% !important; 
    object-fit: cover !important; 
    display: block !important; 
}
.img_label { 
    position: absolute !important; 
    left: 50% !important; 
    top: 50% !important; 
    transform: translate(-50%, -50%) !important; 
    color: #bbbbbb !important; 
    font-size: 12px !important; 
    font-weight: bold !important; 
}

#sub_menu {
	display:none;
	position:relative;
	width:100%;
	height:425px;
	background:#fff;
	z-index:998;
	opacity: 0.93;
	filter:alpha(opacity=93);
	border-bottom:1px solid #ddd;
	padding-top:10px;
	padding-bottom:10px;
	
}
#sub_menu li a{font-size:11px;}

#h_bottom {
	width:100%;
	position:relative;

	z-index:997;
}

#h_conetnet {
	position:relative;
	width:100%;
	margin-right:auto;
	margin-left:auto;
	border:0px solid red
}

#left_menu li {
	padding-top:5px;
	padding-bottom:5px;
	border:0px solid red;
	width:180px;
}

#left_menu li a{
	text-decoration:none;
	color:#8e8e8e;
	letter-spacing:-2px;
}

#left_menu li a:hover{
	text-decoration:none;
	color:#2b6dc6;
}

#left_menu li a:visited{
	text-decoration:none;
}

#left_menu li a:linked{
	text-decoration:none;
}

#sitemap {width:1050px;margin:0 auto}
#sitemap th {width:140px;height:22px;background:#b7b7b7;top;text-align:left;padding-left:10px;color:#fff}
#sitemap th a {color:#fff}
#sitemap td {vertical-align:top;text-align:left}
#sitemap td ul {list-style-type:none;padding-left:10px}
#sitemap td ul li {padding-bottom:5px;color:#fff}
#sitemap td ul li a {padding-bottom:5px;color:#fff}



ul { list-style:none }


/* 레이아웃 */

#gnb { position:relative; height:80px; background:#fffff; margin-bottom:10px; }
#gnb:after { content:""; display:block; clear:both; }
#gnb li { float:left; width:25%; text-align:center; }
#gnb li li { float:left; width:auto; text-align:left; }
#gnb li a { display:block; height:20px; padding-top:10px;color:#fff; }
#gnb li li a { display:inline; height:auto; padding:0; margin:0 10px;color:#fff;  }
#gnb li.g1 { background:#666600 }
#gnb li.g2 { background:#669900 }
#gnb li.g3 { background:#66CC00 }
#gnb li.g4 { background:#FFCC00 }
#gnb ul { position:relative;}
#gnb ul ul { position:absolute; top:38px; display:none; white-space:nowrap; }
#gnb ul#gm1 { left:0; }
#gnb ul#gm2 { left:25%; }
#gnb ul#gm3 { left:50%; }
#gnb ul#gm4 { left:75%; }