@charset "utf-8";
/*
 * GIDIS 개편 (2026.08) - 기존 화면 색상 재정의
 *
 * base.css / style.css / style_2.css / style_3.css 다음에 읽히도록 Header.jsp 에서
 * 마지막에 링크한다. 기존 셀렉터와 같은 깊이로 작성해 우선순위를 확보하고,
 * !important 는 쓰지 않는다.
 *
 * 남색·청색 계열(#003880 #0d2e8a #3b63eb #24a9fd)을 그린 계열로 바꾸는 것이 목적이며,
 * 경고·필수 표시의 빨강(#e43c41)은 시스템 색으로 그대로 둔다.
 */

/* ===================================================================
 * 헤더 / GNB
 * =================================================================== */
.gnb_area ul.gnb_box li a { color: var(--gd-text-sub); }
.gnb_area ul.gnb_box li a:hover,
.gnb_area ul.gnb_box li a.active { color: var(--gd-primary-strong); }
.gnb_area ul.gnb_box li a:hover:before,
.gnb_area ul.gnb_box li a.active:before { background: var(--gd-primary); }

/* 긴 사업명을 한 줄로 노출한다.
   - gidis-menu.xml 의 name 에는 
(줄바꿈 문자)이 그대로 들어 있다. 전체메뉴 레이어와
     푸터 메뉴는 그 줄바꿈을 살려 2줄로 쓰기 때문이다(아래 .sitemap_dum / .foot_gnb).
     상단바만 white-space:nowrap 으로 두면 CSS 규칙상 줄바꿈 문자가 공백 한 칸으로
     합쳐져 한 줄이 된다. 메뉴명을 고칠 때 XML 을 건드리지 않아도 된다.
   - 항목 폭이 2줄 때보다 두 배 이상 넓어지므로 글자 크기와 항목 간격을 창 너비에 따라
     같이 줄인다. 고정 값 + 중단점으로 짜면 로그인 상태에 따라 항목이 4~6개로 달라져
     (로그인 시 마이페이지, 관리자는 시스템관리까지) 어느 한 경우는 반드시 넘친다.
       글자 : 1308px 이하에서 17px ~ 1693px 이상에서 22px
       간격 : 1273px 이하에서 10px ~ 2364px 이상에서 34px
     간격은 calc 를 끼워 좁은 쪽에서 더 빨리 줄어들게 했다. 글자를 키운 만큼
     항목이 넓어지므로, 간격까지 vw 에 그대로 비례시키면 1300px 근처에서 로고를 덮는다.
     관리자(6개) 기준으로 1290px 에서도 로고·우측 유틸(.sitemap_util)과 각각 58px 남는다.
   - 세로 정렬·활성 표시 점(a:before 의 top:15px)은 개편 전 그대로 line-height:70px 를 쓴다. */
.gnb_area ul.gnb_box {
	/* style.css 는 고정 폭(1045px) + margin-left:24% 로 메뉴를 오른쪽에 치우쳐 놓는다.
	   비율(24%)이라 창 크기에 따라 치우치는 정도가 들쭉날쭉하므로 둘 다 푼다.
	   대신 왼쪽 로고(폭 267px)와 오른쪽 유틸(로그인·햄버거, 폭 91px)의 두께 차이만큼
	   padding-left 로 축을 오른쪽으로 옮겨, 메뉴가 로고 쪽으로 쏠리지 않게 한다.
	   176px = (로고 쪽 여백 − 유틸 쪽 여백)만큼 중심을 옮기는 값. 로고와 유틸의 폭이
	   고정이라 이 값 하나로 1290~2560px 전 구간에서 좌우 여백이 같아진다.
	   항목이 4개든 6개든 중심은 그대로 유지된다. */
	width: auto;
	margin-left: 0;
	margin-right: 0;
	padding-left: 176px;
	display: flex;
	justify-content: center;
	column-gap: clamp(10px, calc(2.2vw - 18px), 34px);
}
/* 간격은 column-gap 이 맡는다. 로그인 상태에서 65px 을 주는 .menu_user 규칙까지 함께 끈다. */
.gnb_area ul.gnb_box li,
.gnb_area.menu_user ul.gnb_box li {
	margin-right: 0;
	flex-shrink: 0;
}
.gnb_area ul.gnb_box li a {
	display: block;
	height: 70px;
	line-height: 70px;
	padding-top: 0;
	font-size: clamp(17px, 1.3vw, 22px);
	white-space: nowrap;
	text-align: center;
}

/* ===================================================================
 * 전체메뉴 레이어
 * =================================================================== */
.sitemap_dum { background-image: none; background-color: var(--gd-primary-strong); }
/* 레이어가 열리면 햄버거(.all_menu)가 흰 X 로 변형돼 '닫기' 버튼과 중복된다.
   버튼 자리는 유지하되 X 만 감춘다. 닫기는 .m_close 가 담당한다. */
.sitemap_util .all_menu.on { visibility: hidden; }
/* Level 3 이 있는 메뉴(범부처 1기)의 그룹 이름 */
.sitemap_dum .depth2 > li.gd-sitemap-group {
	margin-top: 14px;
	font-size: 13px;
	font-weight: 700;
	color: var(--gd-primary-soft);
}
.sitemap_dum .depth2 > li.gd-sitemap-group:first-child { margin-top: 0; }
.sitemap_dum .depth1 > li > a { color: #fff; }
/* 최상위 메뉴명의 
 를 GNB 와 같은 자리에서 줄바꿈한다 (긴 사업명이 한 줄로
   늘어나 옆의 depth2 를 밀어내는 것을 막는다) */
.sitemap_dum .depth1 > li > a { white-space: pre-line; word-break: keep-all; }
/* style.css 는 .depth2 에 padding-left:60px 로 메뉴명과의 간격을 주는데,
   창이 1600px 이하로 내려가면 @media 에서 padding:0 으로 지워 버린다(style.css 604행).
   그래서 노트북 화면에서는 하위 메뉴가 메뉴명에 거의 붙는다.
   특히 '범부처감염병방역체계 고도화R&D사업'은 메뉴명이 min-width(230px)를 넘겨
   242px 을 쓰기 때문에 남는 자리가 3px 뿐이다.
   1400px 이하에서는 하위 메뉴가 메뉴명 아래로 내려가므로(display:block) 그 구간은 두고,
   나란히 놓이는 1401~1600px 구간만 간격을 되살린다. */
@media all and (min-width: 1401px) and (max-width: 1600px) {
	.sitemap_dum .depth2 { padding-left: 40px; }
}
.sitemap_dum .depth1 > li:hover:before { background: var(--gd-primary-soft); }
.sitemap_dum .depth2:hover > li > a { color: #fff; }
.sitemap_dum .depth2 > li > a:hover { color: var(--gd-primary-soft); }
.sitemap_dum .depth1:hover .depth2 > li > a:hover { color: var(--gd-primary-soft); }

/* ===================================================================
 * 푸터
 * =================================================================== */
.footer { background-color: var(--gd-primary-strong); }
.foot_gnb .depth1 > li:hover:before,
.foot_gnb .depth1 > li.menu_on:before { background-color: var(--gd-primary-soft); }
.foot_gnb .depth2 > li > a:hover:after { background-color: var(--gd-primary-soft); }
.foot_gnb .depth2:hover > li > a { color: #b7dfd1; }
/* 마우스를 올렸을 때 열리는 하위 패널(.depth2) 위치.
   원본은 bottom:0 + translateY(50%) 라 부모 항목의 '아래끝'을 기준으로 반쯤 걸치게
   띄운다. 최상위 메뉴가 5개 → 4개로 줄고 메뉴명이 2줄이 되면서 그 기준이 맞지 않아
   패널이 항목보다 아래로 처지고, 하위가 6개인 항목은 COPYRIGHT 줄까지 덮었다.
   기준을 항목의 '윗줄'로 바꾼다. */
.foot_gnb .depth1 > li.menu_on > .depth2 { top: 0; bottom: auto; transform: none; }
/* 3번째(범부처…)는 하위가 6개(194px)라 윗줄에 맞추면 COPYRIGHT 줄을 넘는다.
   메뉴 목록의 아래끝에 맞춰 위로 올린다. 42px = 자료실 높이(26) + 항목 사이 여백(16) */
.foot_gnb .depth1 > li.menu_on:nth-child(3) > .depth2 { top: auto; bottom: -42px; }
/* 4번째(자료실)는 목록 맨 아래라 윗줄에 맞추면 구분선과 6px 밖에 안 남는다. 조금 올린다. */
.foot_gnb .depth1 > li.menu_on:nth-child(4) > .depth2 { top: -14px; }
/* 최상위 메뉴명의 
 를 GNB 와 같은 자리에서 줄바꿈한다. 줄바꿈 위치가 고정이라
   a 의 폭은 min-width(200px) 안에 머물고, 옆에 붙는 depth2(left:200px)와 겹치지 않는다. */
.foot_gnb .depth1 > li > a { white-space: pre-line; word-break: keep-all; line-height: 1.35; }
/* 메뉴명이 2줄짜리라 항목 사이에 여백이 없으면 네 줄이 똑같은 간격으로 늘어서
   어디까지가 한 메뉴인지 구분이 안 된다. 한 메뉴 안의 줄 간격(약 26px)보다
   항목 사이(26 + 16 = 42px)를 확실히 넓혀 묶음이 보이게 한다.
   (하위 패널 .depth2 와 표시 점 :before 는 각 li 기준이라 같이 따라 내려간다) */
.foot_gnb .depth1 > li + li { margin-top: 16px; }
/* copyright 줄과 Family Site 셀렉트 (기존 #3c5fc3 / #0d2e8a) */
.foot_family .copy { color: #b7dfd1; border-top-color: rgba(255, 255, 255, .25); }
.foot_family .m_select { border-color: rgba(255, 255, 255, .4); }
.foot_family .m_select .select_box { background-color: var(--gd-primary); }

/* ===================================================================
 * 서브페이지 : 탭형 서브메뉴 (자료실 등 LNB 를 쓰지 않는 화면)
 * =================================================================== */
h2.board_title { color: var(--gd-primary-strong); }

/* 비활성 탭의 남색 배경(#0d2e8a)과 하늘색 hover(#24a9fd)를 그린 계열로 교체.
   .active 를 :hover 뒤에 두어 선택된 탭에 마우스를 올려도 초록을 유지한다. */
.sub_tab_nav .sub_depth2 .link_menu {
	color: var(--gd-text-sub);
	background-color: var(--gd-surface-gray);
}
.sub_tab_nav .sub_depth2 .link_menu:hover,
.sub_tab_nav .sub_depth2 .link_menu:focus {
	color: var(--gd-primary-strong);
	background-color: var(--gd-surface-mint);
}
.sub_tab_nav .sub_depth2 .link_menu.active {
	color: #fff;
	background-color: var(--gd-primary);
	border-color: var(--gd-primary);
}

/* ===================================================================
 * 성과물 페이지 : 리드 문장 / 서비스 카드 / 바로가기
 *  - 마크업은 그대로 두고 색과 형태만 바꾼다 (콘텐츠 무변경 조건)
 * =================================================================== */
.watch_area .short_cut h4 { color: var(--gd-text-sub); }

.watch_area .watch_items .watch_right .watch_service h3,
.watch_area .watch_items.dsp .watch_service h3,
.watch_area.vaccine .watch_items .watch_service h3 { color: var(--gd-text); }

/* 서비스 영역은 제목도 번호 뱃지도 개편 전처럼 검정을 쓴다. */
.watch_area .watch_items .watch_right .watch_service .service_con h4,
.watch_area.vaccine .watch_items .watch_service .service_con h4 { color: var(--gd-text); }

.watch_area .watch_items .watch_right .watch_service .service_con .service_num,
.watch_area .watch_items .watch_service .service_con .service_num {
	background-color: var(--gd-text);
	color: #fff;
}

.watch_area .page_link a {
	background-color: var(--gd-primary);
	border-color: var(--gd-primary);
	color: #fff;
}
.watch_area .page_link a:hover { background-color: var(--gd-primary-strong); border-color: var(--gd-primary-strong); }

/* ===================================================================
 * 메인 : 기존 카드/공지 영역 (히어로·사업 카드는 gd-components.css)
 * =================================================================== */
h3.content_title { color: var(--gd-text); }
.main_card .main_card_area ul.card_data li .card_con { background-color: var(--gd-surface-warm); }
.main_card .main_card_area ul.card_data li .card_con .data_title { color: var(--gd-warm-text-strong); }
.main_card .main_card_area ul.card_data li .card_con span { color: var(--gd-warm-text); }
.bottom_contents .main_notice .notice_con { background-color: var(--gd-surface-gray); }
.bottom_contents .main_notice .notice_con h3 { color: var(--gd-text); }
.bottom_contents .main_notice .notice_con ul li a { color: var(--gd-text-sub); }
.bottom_contents .main_notice .notice_con ul li a:hover { color: var(--gd-primary); }

/* 사업 섹션 제목 : 사업기간까지 한 줄에 담기므로 기본 24px 보다 키운다.
   아래 '연구 데이터 및 소식' 등 다른 .gd-section-title 은 24px 를 그대로 쓴다.
   keep-all 은 제목이 좁은 화면에서 접힐 때 한글이 글자 단위로 잘리지 않게 한다. */
.gd-sys-head .gd-section-title { font-size: 30px; word-break: keep-all; }

/* ===================================================================
 * 로그인
 * =================================================================== */
.login_area .button_box button.btn_login,
.private_area .button_box button.btn_login {
	background-color: var(--gd-primary);
	border-color: var(--gd-primary);
}
.login_area .button_box button.btn_login:hover,
.private_area .button_box button.btn_login:hover {
	background-color: var(--gd-primary-strong);
	border-color: var(--gd-primary-strong);
}

/* 입력창 포커스 테두리 : 남색(#0d2e8a) → 그린.
   style.css(473행) / style_2.css(245행) 의 :focus-visible 규칙과 같은 깊이로 써서
   !important 없이 우선순위를 확보한다. padding·outline·box-sizing 은 기존 값을
   그대로 두어야 테두리가 2px 로 두꺼워질 때 입력창 크기가 흔들리지 않는다. */
.login_area .form_field .input_box:focus-visible,
.private_area .form_field .input_box:focus-visible {
	border-color: var(--gd-primary);
}

/* 비밀번호 변경 : 항목 이름(현재 비밀번호 / 새 비밀번호 / 새 비밀번호 확인).
   원본 클래스명 오타(chage_pw_form)는 style_2.css 그대로 맞춰 쓴다. */
.form_wrap.chage_pw_form .form_field p {
	color: var(--gd-primary);
}

/* ===================================================================
 * 자료실 게시판 (공지사항 / 감염병 연구 자료 / 매뉴얼 / FAQ / Q&A)
 *  - style_2.css, style_3.css 의 남색·청색을 그린 계열로 교체한다.
 *  - 기존 셀렉터와 같은 깊이로 작성하고 !important 는 쓰지 않는다.
 * =================================================================== */

/* 검색 버튼 (기존 #0d2e8a) */
.m_inner .form_area .ctrl_search .btn_search {
	background-color: var(--gd-primary);
}
.m_inner .form_area .ctrl_search .btn_search:hover {
	background-color: var(--gd-primary-strong);
}

/* 목록 헤더 상단 줄 · 검색결과 없음 안내 상단 줄 (기존 #396cd3)
   FAQ 는 아코디언이라 .list_head 가 없고 style.css 의 ul.faq 가 줄을 그린다. */
.notice_list_wrap .notice_list .list_head,
.qna_list_wrap .qna_list .list_head,
.manual_list_wrap .manual_list .list_head,
.public_list .list_head,
ul.faq,
.board_area.no_result {
	border-top-color: var(--gd-primary);
}

/* 목록 행 hover (기존 연한 하늘색 #e9f6ff) */
.notice_list_wrap .notice_list li:hover,
.qna_list_wrap .qna_list li:hover,
.manual_list_wrap .manual_list li:hover,
.public_list li:hover {
	background-color: var(--gd-surface-mint);
}

/* 페이지 번호 (기존 #2284fd) */
.paging_area > button.active,
.paging_area > .active,
.paging_area > .active:hover,
.paging_area > button:hover,
.paging_area > a:hover,
.paging_area > .first:hover,
.paging_area > .prev:hover,
.paging_area > .next:hover,
.paging_area > .last:hover {
	color: var(--gd-primary);
}

/* 감염병 연구 자료 : 목록형/카드형 보기 전환 버튼 (기존 #24a9fd) */
.btn_active {
	background-color: var(--gd-primary);
}

/* 게시물 상세 : 제목 아래 구분선 (기존 #396cd3) */
.detail_contents .detail_con {
	border-top-color: var(--gd-primary);
}

/* 글쓰기 · 수정 화면 : 제목 아래 입력 표 상단 줄 (기존 #396cd3) */
.form_con .form_table {
	border-top-color: var(--gd-primary);
}

/* 자료 카드 : 마우스를 올리면 나타나는 하단 강조선 (기존 #24a9fd) */
.card_area .card_item:after,
.lookup_data_wrap .lookup_card .card_item:after {
	background: var(--gd-primary);
}

/* FAQ 답변 'A' 아이콘.
   글리프가 PNG 라 CSS 로 색을 못 바꾼다. 원본(icon_a.png, #2284fd)은 그대로 두고
   같은 모양을 그린으로 칠한 icon_a_gd.png 로 배경 이미지만 교체한다. */
ul.faq li p {
	background-image: url("../images/board/icon_a_gd.png");
}

/* ===================================================================
 * hover / focus 로만 나타나는 잔여 청색 정리
 *  - base.css(#3b63eb #003880), style.css·style_2.css(#24a9fd #2284fd #0d2e8a),
 *    연한 하늘색 행 배경(#e9f6ff)을 그린 계열로 맞춘다.
 *  - 원본과 같은 셀렉터·같은 깊이로 쓰고, 바꾸는 속성만 다시 선언한다.
 * =================================================================== */

/* 포커스 표시 (키보드 이동 시 나타나는 테두리) */
:focus-visible {
	outline-color: var(--gd-primary);
}
input[type=file]:focus,
input[type=checkbox]:focus,
input[type=radio]:focus {
	outline-color: var(--gd-primary);
}
input.m_text:focus {
	border-color: var(--gd-primary);
}
.form_con .form_table .form-control:focus,
.form_con .form_table .form-control:hover {
	border-color: var(--gd-primary);
}

/* 테두리만 바뀌는 버튼 */
.m_btn.btn_line_point:hover,
.btn_admin:hover,
button.write:hover,
.modify_btn button:hover,
.detail_contents .bottom_btn_area button:hover,
.lookup_area .bottom_btn_area button:hover {
	border-color: var(--gd-primary);
}
/* 위 규칙보다 셀렉터가 깊은 모바일 전용 규칙(style_2.css 1186·1279행) 대응 */
.detail_contents .bottom_btn_area button.list:hover,
.lookup_area .bottom_btn_area button.list:hover {
	border-color: var(--gd-primary);
}

/* 배경이 채워지는 버튼·아이콘 */
.m_icon.icon_top:hover,
.m_icon.icon_down:hover,
.card_area .m_icon.icon_down:hover,
.lookup_list_wrap .list_title button:hover,
.dropzone_area .dropzone .dropzone_btn:hover,
.detail_contents .detail_con .save_wrap .save_icon:hover {
	background-color: var(--gd-primary);
	border-color: var(--gd-primary);
}
.tab_area > .tab_bar > li > a:hover {
	background-color: var(--gd-primary);
}

/* 글자색만 바뀌는 링크·버튼 */
.m_icon:hover,
.dropdown-menu > li > a:hover,
.btn_area .m_btn.btn_add:hover,
.list_area table tbody td a:hover,
.list_area .list_body .list_row > li a:hover {
	color: var(--gd-primary);
}

/* 표 행 hover 배경 (기존 #e9f6ff) */
.list_area table tbody tr:hover td,
.notice_area table tbody tr:hover td {
	background-color: var(--gd-surface-mint);
}

/* 시스템관리 목록 표 : 헤더 위 강조선 (기존 #396cd3 / #003880)
   사용자관리·권한관리 등 .admin_area 안의 목록이 모두 이 규칙을 쓴다. */
.list_area table thead th,
.notice_area table thead th {
	border-top-color: var(--gd-primary);
}
.list_area .list_head .list_row > li {
	border-top-color: var(--gd-primary);
	border-bottom-color: var(--gd-primary);
}

/* ===================================================================
 * 반응형 : 모바일 규칙(style_2.css @768px)의 잔여 청색 정리
 *  - 위의 데스크톱 규칙이 미디어쿼리 밖이라 모바일까지 덮어쓰므로,
 *    같은 중단점을 다시 열어 모바일 고유의 '밑줄 탭' 형태를 되살린다.
 * =================================================================== */
@media all and (max-width: 768px) {
	h2.board_title { color: var(--gd-primary-strong); }
	/* 모바일 페이지 번호는 원래 검정 계열이다. 위의 데스크톱 규칙이 미디어쿼리
	   밖이라 모바일까지 덮어쓰므로 style_2.css(1322~1326행) 의 값을 되살린다. */
	.paging_area > button.active,
	.paging_area > .active,
	.paging_area > .active:hover,
	.paging_area > button:hover,
	.paging_area > a:hover,
	.paging_area > .first:hover,
	.paging_area > .prev:hover,
	.paging_area > .next:hover,
	.paging_area > .last:hover { color: #000; }
	.sub_tab_nav .sub_depth2 .link_menu {
		color: var(--gd-text);
		background-color: transparent;
	}
	.sub_tab_nav .sub_depth2 .link_menu:hover,
	.sub_tab_nav .sub_depth2 .link_menu:focus,
	.sub_tab_nav .sub_depth2 .link_menu.active {
		color: var(--gd-primary);
		background-color: transparent;
		border-bottom-color: var(--gd-primary);
	}
}

/* ===================================================================
 * 플랫폼 기능 도식 : 100% 배율에서 화살표가 아래로 떨어지는 문제
 *
 * style_2.css 의 이 도식은 float 로 3덩이(좌측 박스 / 화살표 / 우측 휠)를
 * 나란히 두고, 폭은 % 로만 준다. 화살표(icon_platform_arrow.png)는 133px
 * 고정폭인데 % 배분에서 자기 몫이 없어서, 칼럼이 좁아지면 남는 자리가
 * 133px 아래로 내려가는 순간 float 가 줄바꿈되며 화살표만 아래로 떨어진다.
 * 개편 후 이 화면은 LNB(320px)+여백(80px) 안쪽이라 칼럼이 창보다 약 401px
 * 좁고, 그래서 100% 배율에서도 그 구간에 들어간다.
 *
 * 세로 전환(@1280px) '위쪽' 구간만 flex 로 바꿔 해결한다.
 *  - flex 는 기본이 nowrap 이므로 줄바꿈 자체가 일어나지 않는다
 *  - 화살표에 flex:0 0 133px 로 고정 몫을 주고, 박스·휠만 줄어들게 한다
 *  - align-items:center 로 세로 중앙을 맞춰 magic margin(115px/75px)을 없앤다
 *  - max-width 로 원본 크기 이상으로는 확대하지 않는다
 * 1280px 이하(세로 전환)는 style_2.css 954~963행 규칙을 그대로 쓴다.
 * =================================================================== */
@media all and (min-width: 1281px) {
	/* 상단 원 3개도 같은 이유(고정폭 190px + 좌우 40px 마진)로 좁아지면 줄바꿈된다.
	   flex(nowrap)로 두고 이미지가 원본 크기 이내에서 줄어들게만 한다.
	   연결선(:after)은 원 사이 간격(80px) 기준이라 그대로 둔다. */
	.gd-content .platform_wrap .platform_item.top {
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.gd-content .platform_wrap .platform_item.top > div {
		flex: 0 1 auto;
		min-width: 0;
	}
	.gd-content .platform_wrap .platform_item.top > div img {
		width: 100%;
		max-width: 190px;		/* 원본 크기 */
		height: auto;
	}

	.gd-content .platform_wrap .platform_item.bottom {
		display: flex;
		align-items: center;
		justify-content: center;
		overflow: visible;
	}
	.gd-content .platform_wrap .platform_item.bottom > div { float: none; }

	.gd-content .platform_wrap .platform_item.bottom .bottom_img.left {
		display: flex;
		align-items: center;
		flex: 0 1 786px;		/* 653(박스) + 133(화살표) */
		min-width: 0;
		width: auto;
		margin-top: 0;
	}
	.gd-content .platform_wrap .platform_item.bottom .bottom_img.left .left_img {
		float: none;
		flex: 1 1 auto;
		min-width: 0;
		width: auto;
		margin: 0;
	}
	.gd-content .platform_wrap .platform_item.bottom .bottom_img.left .left_img img {
		width: 100%;
		max-width: 653px;		/* 원본 크기. 이보다 키우면 흐려진다 */
		height: auto;
	}
	.gd-content .platform_wrap .platform_item.bottom .bottom_img.left .arrow_wrap {
		float: none;
		flex: 0 0 133px;		/* 화살표 고정 몫. 이 한 줄이 줄바꿈을 막는다 */
	}
	.gd-content .platform_wrap .platform_item.bottom .platform_arrow {
		float: none;
		margin: 0 auto;
	}
	.gd-content .platform_wrap .platform_item.bottom .bottom_img.right {
		flex: 0 1 503px;
		min-width: 0;
		width: auto;
		margin-left: 5px;
	}
	.gd-content .platform_wrap .platform_item.bottom .bottom_img.right img {
		width: 100%;
		max-width: 503px;		/* 원본 크기 */
		height: auto;
	}
}