@charset "utf-8";
/* ---------------------------------------------------------------------------
 * 반응형 보정 레이어. 반드시 마지막에 로드한다.
 *
 * 원본 CSS 는 한 줄도 고치지 않는다. 여기 있는 규칙은 전부 미디어쿼리 안에 있고,
 * 최상단 브레이크포인트(1469px)는 원본 #layout 의 min-width(1470px) 바로 아래라
 * 1470px 이상에서는 아무것도 적용되지 않는다 — 데스크톱은 원본과 픽셀 단위로 동일하다.
 *
 * 원본 기준값
 *   #layout      min-width: 1470px   (layout.css:3)
 *   .container   width: 1300px       (common.css:161)
 *   .container_md 1000px / .container_sm 750px
 *
 * 고친 것은 전부 "고정 픽셀 폭"이다. 배치를 다시 디자인하지 않고, 폭만 유동으로
 * 바꾸고 나란히 있던 것을 좁은 화면에서 세로로 쌓는 선에서 멈춘다.
 * ------------------------------------------------------------------------- */

/* === 1470px 미만: 고정 최소폭을 푼다 ===================================== */
@media (max-width: 1469px) {
	#layout,
	#main_layout {
		min-width: 0;
		overflow-x: hidden;
	}
	html, body { max-width: 100%; overflow-x: hidden; }
	img, video { max-width: 100%; }
}

/* === 1340px 미만: 고정폭 컨테이너와 블록을 유동으로 ====================== */
@media (max-width: 1339px) {
	.container,
	.container_md,
	.container_sm {
		width: 100%;
		max-width: 100%;
		padding-left: 20px;
		padding-right: 20px;
		box-sizing: border-box;
	}

	/* bxSlider·swiper 는 초기화 시점의 픽셀 폭을 인라인 스타일로 박아 둔다.
	   화면이 줄면 그 값이 남아 가로로 삐져나오므로 되돌린다. */
	.bx-wrapper, .bx-viewport { width: 100% !important; max-width: 100% !important; }
	.swiper-container { width: 100% !important; max-width: 100% !important; }

	/* --- ABOUT ------------------------------------------------------------ */
	.aw_section.sec1 .tit_box,
	.aw_section.sec1 .txt_box { width: 100%; max-width: 100%; float: none; }
	.aw_section.sec2 .video_wrap .about_video { width: 100%; max-width: 100%; }
	.aw_section.sec3 .aw_ogz .ogz_bottom .ogz_group.two { width: 100%; max-width: 100%; }

	/* --- BUSINESS (digital 하위 레이어) ----------------------------------- */
	.bwl_sec.bwl3 .item .box,
	.bwl_sec.bwl4 .rows_box .cnt .thum,
	.bwl_sec.bwl4 .rows_box .cnt .txt { width: 100%; max-width: 100%; float: none; }

	/* .bac_box 는 width:50% 에 padding-left:153px 이 얹혀 있어 box-sizing 없이는
	   두 칸의 합이 늘 화면을 넘는다. 폭 계산에 패딩을 포함시킨다. */
	.bw_layer .blp_content .bac_row .bac_box {
		box-sizing: border-box;
		padding-left: 110px;
		background-position: 10px 20px;
	}
	.bw_layer .blp_content .bac_row .bac_box .dash_list li,
	.bw_layer .blp_content .bac_row .bac_box .dash_list li:nth-child(2n) {
		float: none;
		width: 100%;
	}

	/* --- WORK 목록 --------------------------------------------------------- */
	.work_wrap .work_cate,
	.work_wrap .work_list { width: 100%; max-width: 100%; float: none; }
	.work_wrap .work_cate { margin-bottom: 30px; }
	/* 원본은 목록을 화면 높이에 가둔 뒤(.work_wrap height:100vh + overflow:hidden)
	   안쪽만 스크롤시킨다. 좁은 화면에서는 그 상자에 갇혀 목록이 잘리므로
	   높이 제한을 풀고 페이지 스크롤에 맡긴다. */
	.work_wrap { height: auto; overflow: visible; padding-bottom: 40px; }
	.work_wrap .work_list .wl_area { height: auto; overflow-y: visible; }

	/* --- WORK 상세 --------------------------------------------------------- */
	.wd_cnt .img_box,
	.wd_cnt .video_wrap { width: 100%; max-width: 100%; }
	.wd_cnt .img_box > div { max-width: 100%; }
	.wd_cnt .img_box img { max-width: 100%; height: auto; }

	/* --- 기타 ------------------------------------------------------------- */
	.terms_layer { width: auto; max-width: calc(100% - 40px); }
	.cw_sec .left, .cw_sec .right { width: 100%; max-width: 100%; float: none; }
}

/* === 1024px 미만: 메인의 큰 여백과 큰 글자를 줄인다 ====================== */
@media (max-width: 1023px) {
	/* .layer 는 width:100% 에 padding-left:310px 가 얹혀 있어 box-sizing 없이는
	   합이 화면을 넘는다. 넘침의 실제 원인이라 여기부터 바로잡는다. */
	.main_content .layer.pf,
	.main_content .layer.int {
		box-sizing: border-box;
		padding-left: 120px;
		padding-right: 24px;
	}
	.main_content .layer.pf h2 { font-size: 44px; line-height: 46px; }
	.main_content .layer.int h2 { font-size: 44px; line-height: 54px; }

	.aw_section.sec1 .txt_box .tit span:after { display: none; }

	/* 나란히 놓인 세 낱말(BE / YOUR / COLOR)이 고정폭 274px + 큰 여백으로 짜여 있다.
	   좁은 화면에서는 한 줄씩 쌓는다. */
	.aw_section.sec2 .movie_txt .movie_strong { margin-left: 0; margin-top: 120px; }
	.aw_section.sec2 .movie_txt .movie_strong ul li,
	.aw_section.sec2 .movie_txt .movie_strong ul li + li,
	.aw_section.sec2 .movie_txt .movie_strong ul li:last-child {
		float: none;
		width: 100%;
		margin-left: 0;
	}

	/* 2단으로 짜인 사업영역 박스를 한 단으로 */
	.bw_layer .blp_content .bac_row .bac_box { float: none; width: 100%; }
	.bw_layer .blp_content .bac_row .bac_box + .bac_box { margin-top: 40px; }
	.bw_layer .blp_content .bac_row .bac_box .box_tit { font-size: 24px; line-height: 26px; height: auto; }
}

/* === 768px 미만 ========================================================== */
@media (max-width: 767px) {
	.main_content .layer.pf,
	.main_content .layer.int {
		padding-left: 88px;
		padding-right: 20px;
	}
	.main_content .layer.pf h2 { font-size: 30px; line-height: 34px; }
	.main_content .layer.int h2 { font-size: 30px; line-height: 38px; }
	.main_content .layer.int h3 { font-size: 16px; }

	/* 메인 헤더는 화면 왼쪽에 고정된 세로 메뉴다. 좁은 화면에서 여백만 줄인다. */
	#main_layout #header.main { top: 16px; left: 16px; }
	#main_layout #header.main #hd_wrap #nav { margin-top: 28px; }
	#main_layout #footer .ft_link { left: 16px; bottom: 16px; }
	#main_layout #footer .ft_info { right: 16px; bottom: 16px; }

	.container, .container_md, .container_sm {
		padding-left: 16px;
		padding-right: 16px;
	}

	/* --- 서브 헤더: 로고와 GNB 를 세로로 쌓아 가운데 정렬 -----------------
	   원본은 로고 좌측 / 메뉴 우측 float 에 항목 간격이 66px 이라 좁은 화면에서
	   한 줄에 들어가지 않는다. 겹치지 않게 두 줄로 나누고 간격을 줄인다. */
	#layout #header.sub #hd_wrap { margin-top: 20px; }
	#layout #header.sub #hd_wrap #logo { float: none; text-align: center; }
	#layout #header.sub #hd_wrap #logo a img { height: 30px; width: auto; }
	#layout #header.sub #hd_wrap #nav { float: none; margin-top: 14px; }
	#layout #header.sub #hd_wrap #nav ul {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 8px 18px;
	}
	#layout #header.sub #hd_wrap #nav ul li,
	#layout #header.sub #hd_wrap #nav ul li + li {
		float: none;
		margin-left: 0;
		font-size: 11px;
	}

	/* --- 서브 푸터: 흐름 안으로 -------------------------------------------
	   원본 푸터는 #layout 기준 position:absolute; bottom:0 이다. 데스크톱에서는
	   본문이 화면 높이에 갇혀 있어 겹치지 않지만, 위에서 그 높이 제한을 풀었으므로
	   그대로 두면 마지막 콘텐츠 위를 덮는다. 좁은 화면에서는 흐름에 넣는다. */
	#layout #footer {
		position: static;
		padding-top: 28px;
		padding-bottom: 28px;
	}
	#layout #footer .copy,
	#layout #footer .ft_link { float: none; }
	#layout #footer .copy { text-align: center; margin-bottom: 14px; }
	#layout #footer .ft_link {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
		gap: 12px;
	}
	#layout #footer .ft_link .ft_down { float: none; margin-left: 0; }
	#layout #footer .ft_link .sns_link { float: none; }

	/* WORK 상세 상단 정보는 4칸 float 이라 좁은 화면에서 서로 밀린다. */
	.work_detail .wd_top .wd_info { padding-right: 70px; }
	.work_detail .wd_top .wd_info .item { float: none; width: 100%; padding-right: 0; }
	.work_detail .wd_top .wd_info .item + .item { margin-top: 14px; }
	.work_detail .wd_top .wd_info .item strong { margin-bottom: 6px; }
}

/* === 480px 미만: 가장 좁은 구간 ========================================== */
@media (max-width: 479px) {
	.main_content .layer.pf,
	.main_content .layer.int {
		padding-left: 68px;
		padding-right: 16px;
	}
	.main_content .layer.pf h2 { font-size: 24px; line-height: 28px; }
	.main_content .layer.int h2 { font-size: 24px; line-height: 30px; }
	.main_content .layer.pf .txt .client { font-size: 15px; }

	/* 푸터의 두 고정 블록이 좁은 화면에서 서로 겹치지 않게 한 줄씩 띄운다. */
	#main_layout #footer .ft_info { bottom: 56px; }

	.work_detail .wd_top .wd_info { padding-right: 70px; }
	.work_detail .wd_top .wd_info .item { float: none; width: 100%; padding-right: 0; }
	.work_detail .wd_top .wd_info .item + .item { margin-top: 14px; }
	.work_detail .wd_top .wd_info .item strong { margin-bottom: 6px; }
}