/* SUIT Variable — CDN 원본은 610KB(전체 한글)라 모바일에서도 그대로 내려받고 있었다.
   이 문서가 실제로 쓰는 글자만 남긴 서브셋(약 100KB)을 직접 호스팅한다.
   가변 축(100~900)은 그대로 살아 있다. 카피를 고쳐 새 글자가 들어가면
   tools/subset-suit.py 를 다시 돌려 서브셋을 갱신할 것.
   서브셋에 없는 글자는 style-1.css 의 폴백 체인(Pretendard)으로 떨어진다. */
@font-face {
  font-family: 'SUIT Variable';
  font-weight: 100 900;
  font-display: swap;
  src: url('SUIT-Variable.subset.woff2') format('woff2-variations'),
       url('SUIT-Variable.subset.woff2') format('woff2');
}

/* LOCALMATE overrides — added on top of the original layout styles */

/* 브라우저의 자동 다크 변환 대신 기존 브랜드 색상을 사용한다. */
:root {
  color-scheme: light;
  color-scheme: only light;
}

/* 중간 영상 슬롯: iframe 과 동일한 박스 규칙을 video 에도 적용 */
.con3_video_con video {
  width: 100%;
  height: 113%;
  object-fit: cover;
  pointer-events: unset;
  z-index: 5;
}
@media screen and (max-width: 1023px) {
  .con3_video_con video { width: 100%; height: 100%; }
}

/* keep the project colour chips tidy */
.ps_color_pallet div { box-shadow: inset 0 0 0 1px rgba(0,0,0,.06); }

/* Pretendard Variable / SUIT Variable 은 각 배포처 CDN 에서 불러온다.
   (index.html <head> 의 <link> 참조 — 방문자 PC 에 폰트가 깔려 있는지와 무관하게
    같은 글꼴로 보이도록 하기 위함) */


/* 히어로 영상 톤 보정 (CSS 레벨, 영상 파일은 그대로)
   영상 평균 휘도가 장면에 따라 168~235 로 흔들려 어두운 장면이 과하게 보였다.
   brightness/contrast 로 평균을 207 에 맞추고 장면 간 편차를 눌러준다.
   opacity(0.25) 와 grayscale 은 그대로 둔다.
   선택자를 .main_video_con 로 한정해 모바일 미디어쿼리(.video1)보다 우선하게 한다. */
.main_video_con video.video1 {
  filter: grayscale(1) brightness(1.5) contrast(0.5);
}

/* OUR WORK. — 이미지(ccon1_02.png) 대신 실제 텍스트로 출력해 해상도 손실을 없앤다.
   기존 이미지 렌더 폭을 그대로 재현: 1440 기준 ps_title 341.8px / main_top_1 326.7px,
   390 기준 226px. ("OUR WORK." 는 font-size 100px 에서 폭 568.2px 로 실측) */
.lm_ourwork {
  margin: 0;
  /* 마지막 sans-serif 는 윈도우에서 Arial 로 떨어져 'OUR WORK.' 가 9% 넓어진다.
     그 앞에 폭이 가까운 한글 고딕을 먼저 둬서 대체 글꼴 폭을 묶어둔다. */
  font-family: 'pretendard variable', Pretendard, 'Malgun Gothic', 'Apple SD Gothic Neo', sans-serif;
  font-weight: 800;
  line-height: 1.15;
  white-space: nowrap;
  color: #020202;
  letter-spacing: 0;
}
.lm_ourwork span { color: #008dcc; }
.ps_title .lm_ourwork { font-size: 4.177vw; }
.main_top_1 .lm_ourwork { font-size: 3.993vw; }

/* ==================================================================
   글자만 있는 이미지를 실제 텍스트로.
   style(3).css 의 img{width:100%} 때문에 작은 PNG 가 컨테이너 폭까지
   늘어나 해상도가 깨졌다. 텍스트로 바꾸되 크기는 컨테이너 폭(cqw)에
   맞춰 잡아, 이미지가 차지하던 자리를 그대로 유지한다.
   (vw 가 아니라 cqw 를 쓰는 이유: 스크롤바 폭과 브레이크포인트에
    영향을 받지 않고 어떤 화면 폭에서도 상자 안에 정확히 들어간다.)
   ================================================================== */

/* --- OUR WORK. : 상자 폭에 딱 맞게 ------------------------------- */
.ps_title,
.main_top_1 { container-type: inline-size; }
.ps_title .lm_ourwork,
.main_top_1 .lm_ourwork { font-size: 17.598cqw; }   /* "OUR WORK." = 5.6822em */

/* .main_top_1 은 overflow:hidden 이라 글자가 상자보다 조금이라도 넓으면 바로 잘린다.
   위 17.598cqw 는 Pretendard 기준 폭 100% 로 여유가 0이어서, 웹폰트가 늦게 뜨거나
   CDN 이 막힌 환경의 대체 글꼴(맑은 고딕 +3.2%, 기본 sans-serif +4.6%)에서 잘렸다.
   5% 여유를 둔다. */
.main_top_1 .lm_ourwork { font-size: 16.7cqw; }

/* "SELECTED WORK." 는 "OUR WORK." 보다 5글자 길어 같은 크기면 상자를 144% 넘긴다.
   상자 폭의 약 95% 를 채우도록 맞춘다(계측값 기준).
   선택자를 #price 로 잘못 걸어 두는 바람에 이 규칙이 아무것도 못 잡고 있었다.
   (#price 는 #work 안의 div.ps_250_txt 이고, 제목은 #works 섹션에 있다)
   그래서 제목이 상자를 144% 넘겨 양쪽이 72px 씩 잘린 "LECTED WOR" 로 찍혔다. */
#works .main_top_1 .lm_ourwork { font-size: 10.9cqw; }

/* Text headings need a full line box; image-sized masks cut their glyphs. */
body .main_top_1 { overflow: visible; }
body .ps_title { aspect-ratio: auto; height: auto; }
.lm_ourwork { padding-block: .03em; }

/* --- con4 메뉴 : SERVICE. WORKS. PRICING. CONTACT. ---------------- */
.con4_item { container-type: inline-size; }
.con4_item_top_1,
.con4_item_top_2,
.con4_item_top_3,
.con4_item_top_4 { width: auto; }
.lm_menu {
  margin: 0;
  font-family: 'pretendard variable', Pretendard, sans-serif;
  font-weight: 800;
  line-height: 1.15;
  white-space: nowrap;
  color: #020202;
  font-size: 7.953cqw;
}
.lm_menu span { color: #008dcc; }
@media screen and (max-width: 599px) { .lm_menu { font-size: 14.25cqw; } }

/* --- 푸터 워드마크 LOCALMATE / PHILIPPINES ------------------------ */
.footer_bottom_top { container-type: inline-size; }
.footer_bottom .lm_fmark {
  margin: 0;
  width: 100%;
  text-align: center;
  white-space: nowrap;
  font-family: 'pretendard variable', Pretendard, sans-serif;
}
.footer_bottom .lm_fmark b {
  display: block;
  font-weight: 600;
  font-size: 16.29cqw;
  line-height: 1;
  letter-spacing: 0.005em;
  color: #e3e3e3;
}
.footer_bottom .lm_fmark i {
  display: block;
  font-style: normal;
  font-weight: 600;
  font-size: 9.6cqw;
  line-height: 1;
  letter-spacing: 0.02em;
  color: #6d8fa1;
}

/* --- 푸터 사이트 주소 ●LOCALMATEPH.COM ---------------------------- */
.footer_bottom_top_2nd { container-type: inline-size; }
.footer_bottom .footer_bottom_top_2nd .lm_fsite {
  margin: 0;
  width: max-content;
  display: flex;
  align-items: center;
  gap: 0.35em;
  white-space: nowrap;
  font-family: 'pretendard variable', Pretendard, sans-serif;
  font-weight: 600;
  font-size: 5.185cqw;
  line-height: 1.35;
  letter-spacing: 0.01em;
  color: #f2f2f2;
}
.footer_bottom .footer_bottom_top_2nd .lm_fsite::before {
  content: '';
  flex: none;
  width: 0.62em;
  height: 0.62em;
  border-radius: 50%;
  background: #008dcc;
}
@media screen and (max-width: 599px) { .footer_bottom .footer_bottom_top_2nd .lm_fsite { font-size: 2.923cqw; } }

/* --- 푸터 전화번호 ------------------------------------------------ */
.footer_left_absol_right_bottom_top { container-type: inline-size; }
.lm_ftel {
  margin: 0;
  white-space: nowrap;
  font-family: 'pretendard variable', Pretendard, sans-serif;
  font-weight: 800;
  font-size: 11.1cqw;
  line-height: 1.3;
  color: #020202;
}

/* --- 빠른 상담 폼 전화번호 ---------------------------------------- */
.contact_fixed_left { container-type: inline-size; }
.contact_fixed_left .lm_qtel {
  margin: 0;
  white-space: nowrap;
  font-family: 'pretendard variable', Pretendard, sans-serif;
  font-weight: 800;
  font-size: 1.221cqw;
  line-height: 1.208;
  color: #fff;
  filter: none;
  -webkit-filter: none;
}
@media screen and (max-width: 599px) {
  .contact_fixed_left .lm_qtel { font-size: 3.662cqw; }
}

/* --- 영문 홈페이지 배너 LOCALMATE / ENGLISH ----------------------- */
.fix_banner .lm_img { container-type: inline-size; }
.lm_fixen {
  margin: 0;
  width: 100%;
  text-align: center;
  white-space: nowrap;
  font-family: 'pretendard variable', Pretendard, sans-serif;
}
.lm_fixen b {
  display: block;
  font-weight: 600;
  font-size: 16.96cqw;
  line-height: 0.82;
  color: #e6e6e6;
}
.lm_fixen i {
  display: block;
  font-style: normal;
  font-weight: 600;
  font-size: 12.38cqw;
  line-height: 1.1;
  letter-spacing: 0.02em;
  color: #0080b9;
}

/* ==================================================================
   제작사례 배너: 클릭 영역을 그림 속 버튼 위로 옮긴다.
   style-1.css 의 .con1_port a:nth-of-type(n) 은 링크를 배너 왼쪽 위(PC)
   / 오른쪽 위(모바일) 의 작은 사각형에 둔다. 그런데 "홈페이지 바로가기"
   버튼은 이미지 안 다른 자리에 그려져 있어서, 특히 모바일에서는 보이는
   버튼을 눌러도 아무 일도 일어나지 않았다(링크는 반대쪽 구석의 보이지
   않는 26x29px 칸이었다).
   %는 컨테이너 '폭' 기준인 margin-top/padding-top 으로 잡는다 —
   JS 가 카드 높이를 45vw <-> 68vw 로 바꿔도 버튼과 어긋나지 않는다.
     PC     1519x417 : 알약 x 70~296,  y 290~334
     모바일  782x596 : 알약 x 48~266,  y 522~566
   ================================================================== */
.con1_port.con1_port a.absol,
.con1_port_mobile.con1_port_mobile a.absol {
  right: auto;
  top: 0;
  height: 0;
}
.con1_port.con1_port a.absol {
  left: 4.35%;
  width: 16.2%;
  margin-top: 18.8%;
  padding-top: 3.85%;
}
.con1_port_mobile.con1_port_mobile a.absol {
  left: 5.8%;
  width: 29.6%;
  margin-top: 66.2%;
  padding-top: 7.0%;
}
.con1_port.con1_port a.absol img,
.con1_port_mobile.con1_port_mobile a.absol img { display: none; }

/* ==================================================================
   업종 리스트 한 줄 설명 / 가격 포함 항목 / 진행 과정 / FAQ
   새 디자인을 만들지 않고 기존 값(브랜드 시안 #008dcc, pretendard variable,
   Poppins, 599px 브레이크포인트, 라이트 섹션 .con5)만 사용한다.
   ================================================================== */


/* --- 가격 영역 포함 항목 한 줄 --------------------------------------- */
.lm_price_inc {
  margin: 0.7em 0 0;
  font-family: 'pretendard variable', Pretendard, 'Malgun Gothic', sans-serif;
  font-weight: 400;
  /* 0.4em 은 .ps_sub_twrap 의 vw 글자크기(데스크톱 1.1vw / 모바일 4.2vw)에 곱해져
     실제로 6.3px 로 찍히고 있었다. 폭에 안 휘둘리는 값으로 바꾼다. */
  font-size: clamp(11px, 0.78vw, 14px);
  line-height: 1.5;
  letter-spacing: 0;
  opacity: .62;
}
.lm_price_inc span { color: #008dcc; opacity: 1; font-weight: 600; }

/* --- 진행 과정 01~05 ------------------------------------------------- */
.lm_steps { width: 65%; margin: 3% auto 8%; display: flex; flex-wrap: wrap; align-items: flex-start; }
.lm_step { width: 20%; padding-right: 2%; box-sizing: border-box; }
.lm_step_no {
  margin: 0; font-family: Poppins, serif; font-weight: 700;
  font-size: 1.5vw; line-height: 1; color: #008dcc;
}
.lm_step_t {
  margin: 0 0 0.5em; font-family: 'pretendard variable', Pretendard, sans-serif;
  font-weight: 700; font-size: 1.1vw; line-height: 1.3; color: #020202;
}
.lm_step_t::before {
  content: ''; display: block; width: 100%; height: 1px;
  background: rgba(2,2,2,.14); margin: 0.9em 0;
}
.lm_step_d {
  margin: 0; font-family: 'pretendard variable', Pretendard, sans-serif;
  font-weight: 300; font-size: 0.8vw; line-height: 1.55; color: #020202; opacity: .7;
}

/* --- FAQ ------------------------------------------------------------- */
.lm_faq { width: 65%; margin: 3% auto 8%; }
.lm_faq_item { border-top: 1px solid rgba(2,2,2,.14); padding: 1.7% 0; }
.lm_faq_item:last-child { border-bottom: 1px solid rgba(2,2,2,.14); }
.lm_faq_q {
  margin: 0 0 0.55em; font-family: 'pretendard variable', Pretendard, sans-serif;
  font-weight: 700; font-size: 1.05vw; line-height: 1.4; color: #020202;
}
.lm_faq_q span { color: #008dcc; }
.lm_faq_a {
  margin: 0; font-family: 'pretendard variable', Pretendard, sans-serif;
  font-weight: 300; font-size: 0.85vw; line-height: 1.6; color: #020202; opacity: .72;
}

@media screen and (max-width: 599px) {
  .lm_steps, .lm_faq { width: 84%; margin: 6% auto 14%; }
  .lm_step { width: 50%; padding-right: 5%; margin-bottom: 7%; }
  .lm_step_no { font-size: 4.6vw; }
  .lm_step_t { font-size: 3.6vw; }
  .lm_step_d { font-size: 2.9vw; }
  .lm_faq_item { padding: 4.5% 0; }
  .lm_faq_q { font-size: 3.5vw; }
  .lm_faq_a { font-size: 3vw; }
}

/* --- 제작사례 탭이 기기 목업에 가려지던 문제 -------------------------
   탭이 5개에서 11개로 늘면서 한 줄이 길어져, 오른쪽 기기 목업
   (.ps_ctt_phone, z-index 50) 아래로 9~11번이 들어가 보이지 않았다.
   목업 왼쪽 영역 안에서 두 줄로 접히게 한다. 모바일은 드롭다운이라 해당 없음. */
@media screen and (min-width: 600px) {
  .ps_tab_container .ps_tab_wrap {
    flex-wrap: wrap;
    max-width: 40%;   /* 목업 왼쪽 끝(뷰포트 58%)보다 앞에서 끝나도록 */
    row-gap: 0.9vw;
  }
}

/* ==================================================================
   #service(con2) : 같은 메시지가 세 군데 반복되던 것을 하나로 정리.
   레이아웃·배경·여백·애니메이션은 건드리지 않고 노출만 조정한다.
   ================================================================== */

/* 왼쪽 상단 업종 리스트는 이 섹션에서만 감춘다(마크업·마퀴는 그대로). */
#service .con2_absol_2nd { display: none; }

/* 큰 제목 아래 있던 같은 문장 반복 제거 */
#service .lm_hide_in_service { display: none; }

/* 첫 줄을 작은 영문 라벨로. 위치·정렬은 기존 그대로 두고 크기만 라벨 수준으로. */
#service .con2_top_1st_p.lm_howlabel {
  font-size: 1.02vw;
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: 1.6;
  color: #020202;
  opacity: .5;
}

/* 원 3개의 크기 차이를 없앤다. 가운데가 커 보이던 원인은 지름보다
   '둥근 사각형이라 면적이 더 크던 것'이었고, 그건 원형으로 되돌려 해결했다.
   style-1.css 가 localmate.css 뒤에도 한 번 더 실려서 특이도를 한 단계 올린다. */
.con2_mid_items .con2_mid_item_2 { width: 37.1287%; }

/* 본문 줄이 짧아지면서 가운데 정렬 블록 폭이 407 -> 248 로 좁아졌다.
   원래 블록 폭(부모의 96%)을 유지해 정렬과 덩어리감을 그대로 둔다. */
#service .con2_top_5th_p { width: 96%; }


/* FAQ. 는 글자가 4개뿐이라 같은 크기면 제목 상자의 37% 만 찼다. 상자를 채운다. */
#faq .main_top_1 .lm_ourwork { font-size: 42.5cqw; }

@media screen and (max-width: 599px) {
  #service .con2_top_1st_p.lm_howlabel { font-size: 3vw; }
  .con2_mid_items .con2_mid_item_2 { width: 37.1287%; }
}

/* ==================================================================
   제작사례 배너의 왼쪽 글자를 이미지에서 빼고 실제 텍스트로 올린다.
   이미지에 그려져 있던 픽셀값을 이미지 폭 기준 비율(cqw)로 그대로 옮긴 것이라
   위치·크기·색이 예전과 같고, 확대해도 글자가 뭉개지지 않는다.
     PC     1519x417 : 카테고리 (70,96)22 / 이름 (70,142)62 / 영문 (70,232)24 / 버튼 (70,290)h44
     모바일  782x596 : 카테고리 (48,372)22 / 이름 (48,414)54 / 영문 (48,486)22 / 버튼 (48,522)h44
   색은 원래 배너를 그리던 값 그대로를 각 배너의 --lm-cat / --lm-en 으로 넘긴다.
   ================================================================== */
.con1_port, .con1_port_mobile { container-type: inline-size; }

.lm_bn { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; }
.lm_bn p, .lm_bn span {
  position: absolute; margin: 0; white-space: nowrap;
  font-family: 'pretendard variable', Pretendard, 'Malgun Gothic', sans-serif;
  line-height: 1.32;
}
.lm_bn_ko  { color: #020202; font-weight: 800; }
.lm_bn_cat { color: var(--lm-cat, #6b6b6b); font-weight: 600; letter-spacing: .01em; }
.lm_bn_en  { color: var(--lm-en, #8a8a8a); font-weight: 600; letter-spacing: .07em; }
.lm_bn_btn { color: #fff; background: #020202; border-radius: 99px; line-height: 1; }
.lm_bn_btn i { font-style: normal; }

/* PC 배너 */
.con1_port .lm_bn_cat { left: 4.608cqw; top: 5.86cqw;  font-size: 1.448cqw; }
.con1_port .lm_bn_cat b { font-weight: 600; margin-right: 1.05cqw; }
.con1_port .lm_bn_ko  { left: 4.608cqw; top: 8.75cqw;  font-size: 4.082cqw; }
.con1_port .lm_bn_en  { left: 4.608cqw; top: 14.86cqw; font-size: 1.580cqw; }
.con1_port .lm_bn_btn { left: 4.608cqw; top: 19.09cqw; font-size: 1.448cqw; padding: 0.70cqw 1.448cqw; }
.con1_port .lm_bn_btn i { margin-left: 0.66cqw; }

/* 모바일 카드 */
.con1_port_mobile .lm_bn_cat { left: 6.138cqw; top: 46.9cqw;  font-size: 2.813cqw; }
.con1_port_mobile .lm_bn_cat b { font-weight: 600; margin-right: 2.0cqw; }
.con1_port_mobile .lm_bn_ko  { left: 6.138cqw; top: 52.0cqw;  font-size: 6.905cqw; }
.con1_port_mobile .lm_bn_en  { left: 6.138cqw; top: 61.7cqw;  font-size: 2.813cqw; }
.con1_port_mobile .lm_bn_btn { left: 6.138cqw; top: 66.75cqw; font-size: 2.685cqw; padding: 1.47cqw 2.813cqw; }
.con1_port_mobile .lm_bn_btn i { margin-left: 1.2cqw; }


/* ==================================================================
   정리 패스 — 기존 디자인 유지, 문제만 수정
   ================================================================== */

/* con2 본문 뒤 작은 CTA (본문 중간 목차였던 con4 섹션을 대신한다).
   새 UI 블록을 만들지 않고 기존 본문 타이포 크기·시안색만 쓴다. */
.con2_top_6th.lm_cta {
  width: 96%;
  margin: 2.2% auto 0;
  display: flex; justify-content: center; gap: 2.4em;
}
.con2_top_6th.lm_cta a {
  font-family: 'pretendard variable', Pretendard, sans-serif;
  font-weight: 600; font-size: 0.95vw; line-height: 1.6;
  color: #008dcc; text-decoration: none;
  border-bottom: 1px solid rgba(0,141,204,.45); padding-bottom: 0.15em;
}
.con2_top_6th.lm_cta a:last-child { color: #020202; border-bottom-color: rgba(2,2,2,.35); }

/* 고정 헤더(56px) 때문에 앵커로 이동하면 제목이 가려지던 문제 */
section[id], #price { scroll-margin-top: 100px; }

/* 600~1023px 구간: 제작사례 드롭다운 토글이 꺼져 있어 탭이 6.4px 로 찍혔다.
   드롭다운 구조는 건드리지 않고 이 구간에서만 읽히는 크기로 올린다. */
@media screen and (min-width: 600px) and (max-width: 1023px) {
  .ps_tab { font-size: 12px; }
  .ps_tab_container .ps_tab_wrap { max-width: 46%; row-gap: 12px; }
}

@media screen and (max-width: 599px) {
  section[id], #price { scroll-margin-top: 70px; }
  .con2_top_6th.lm_cta { gap: 1.6em; margin-top: 5%; }
  .con2_top_6th.lm_cta a { font-size: 3.1vw; }

  /* 하단 고정바 전화번호가 상자보다 15px 넓어 잘렸다 */
  .contact_fixed_left .contact_fixed_left_4 { font-size: 3.15vw; }
}


/* 상담폼에 추가한 업종 선택 / 문의 내용 — 기존 입력칸과 같은 모양(밑줄만 있는
   투명 필드, 흰 글자). 새 폼 스타일을 만들지 않는다. */
.lm_form_2nd { justify-content: space-between !important; }
.lm_form_2nd select,
.lm_form_2nd textarea {
  font-family: 'pretendard variable', Pretendard, sans-serif;
  font-weight: 400; font-size: 1vw; color: #fff;
  background: transparent; border: none; border-bottom: 1px solid rgba(255,255,255,.35);
  border-radius: 0; padding-bottom: 0.9vw; outline: none; resize: none;
  -webkit-appearance: none; appearance: none;
}
.lm_form_2nd select { width: 31%; cursor: pointer; }
.lm_form_2nd select option { color: #020202; }
.lm_form_2nd textarea { width: 65%; line-height: 1.5; }
.lm_form_2nd textarea::placeholder { color: rgba(255,255,255,.75); }
@media screen and (max-width: 599px) {
  .lm_form_2nd { flex-wrap: wrap; }
  .lm_form_2nd select, .lm_form_2nd textarea { font-size: 3vw; padding-bottom: 2.6vw; }
  .lm_form_2nd select { width: 100%; margin-bottom: 5%; }
  .lm_form_2nd textarea { width: 100%; }
}


/* 모바일 메뉴가 열려 있는 동안 뒤 배경이 스크롤되던 문제 */
body.nav_open { overflow: hidden; touch-action: none; }

/* 동작을 줄이도록 설정한 사용자에게는 전환을 최소화한다 */
@media (prefers-reduced-motion: reduce) {
  html:root { scroll-behavior: auto; }
  .con1_port, .con1_port_mobile, .con4_item_con, .ps_tab_wrap,
  .lm_bn_btn, .con2_top_6th.lm_cta a { transition-duration: 0.01ms !important; }
}


/* Pretendard-Thin.woff(1.1MB) / Pretendard-Light.woff(1.2MB) 두 파일이 통째로
   내려오고 있었는데, 실제로 쓰는 요소는 20개 남짓이다. 이미 서브셋으로 받고 있는
   Pretendard Variable 로 대체하고, 원래 얼굴과 같은 굵기를 지정해 보이는 건 그대로 둔다. */
.con2_top_1st.con2_top_1st, .con2_top_1st.con2_top_1st p,
.con2_top_2nd.con2_top_2nd, .con2_top_2nd.con2_top_2nd p,
.con2_absol_2nd.con2_absol_2nd, .con2_absol_2nd.con2_absol_2nd p {
  font-family: 'pretendard variable', Pretendard, 'Malgun Gothic', sans-serif;
  font-weight: 100;
}
.header_menu_hamburder.header_menu_hamburder,
.header_menu_hamburder.header_menu_hamburder .header_menu_1,
.main_small_title.main_small_title,
.pj_counter.pj_counter {
  font-family: 'pretendard variable', Pretendard, 'Malgun Gothic', sans-serif;
  font-weight: 300;
}

/* ------------------------------------------------------------------
   배너 이미지 비율 복구
   CLS 방지용으로 img 에 width/height 속성을 넣었더니, 브라우저가 그 값을
   presentational hint 로 height 에 그대로 적용해서 세로로 늘어났다.
   (.con1_port img 에는 width:100% 만 있고 height 규칙이 없었다.)
   속성값은 비율 예약용으로 두고, 실제 높이는 auto 로 돌린다.
------------------------------------------------------------------ */
.con1_port > img,
.con1_port_mobile > img { height: auto; }

/* 푸터 하단 사이트 링크: p -> a 로 바꾸면서 기존 p 스타일을 그대로 쓰게 한다 */
.footer_bottom_top_2nd_bottom a { cursor: pointer; }

/* 화면에는 안 보이지만 스크린리더에는 읽히는 목록.
   고객사 마퀴는 Swiper 루프 복제 때문에 같은 회사가 수십 번 읽혀서 aria-hidden 으로 뺐고,
   대신 이 목록으로 11개 회사를 한 번만 전달한다. */
.lm_sr_only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ------------------------------------------------------------------
   #contact 폼 정렬선 통일
   템플릿에 폭이 제각각 박혀 있었다.
     .con25_mid_top      width: 94% !important   (style-1.css:2449)
     .con25_mid_top_2nd  width: 70% !important   (style-1.css:2393)
     .form_agree         width: 26% + margin-left: 60%  (style-1.css:2509)
   그래서 입력칸 4개 / 내가 추가한 선택 2개 / 동의 문구가 서로 다른 선에
   놓였다(1920 실측 353~1552 / 506~1399 / 1169~1501). 세 행을 같은 선으로 모은다.
   동의 문구는 가운데 정렬로 바꿔 아래 '상담 신청하기' 버튼과 축을 맞추고,
   좁은 상자에서 '합니다.' 만 다음 줄로 떨어지던 것도 함께 해소한다.
------------------------------------------------------------------ */
.con25_mid .con25_mid_top_2nd.lm_form_2nd { width: 94% !important; }
.con25_mid .form_agree.form_agree {
  width: 94%;
  margin-left: 0;
  justify-content: center;
}
.con25_mid .form_agree.form_agree .form_agree_span { word-break: keep-all; }

/* 푸터 배경 — 템플릿 원본은 .footer{background:white}(style-4.css:263) 라서
   검은 #contact 바로 아래에 흰 띠가 152px 생기고(.footer_con margin-top:8%)
   좌우로도 흰 여백이 남아(.footer_con width:80%) 푸터가 뚝 끊겨 보였다.
   위 섹션과 같은 검정으로 이어 붙인다. 안쪽 파란 패널(.footer_right)은 그대로. */
footer.footer.footer { background: #000; }

/* #contact 리드 문구 — 어떤 CSS 규칙도 잡고 있지 않아 기본 좌측 정렬이었다.
   바로 위 제목과 아래 버튼이 모두 가운데라 두 줄이 왼쪽으로 쏠려 보였다. */
#contact .con9_top_2nd { text-align: center; }

@media screen and (max-width: 599px) {
  /* 모바일에선 <source media="(min-width:600px)"> 조건이 안 맞아 영상 소스가 아예 없다
     (networkState 3). 그러면 박스 높이가 poster 비율(1.920)로 잡혀 히어로 띠가
     785px -> 727px 로 58px 짧아졌다. 영상이 있을 때와 같은 16:9 로 고정한다. */
  .main_video_con video.video1 { aspect-ratio: 16 / 9; object-fit: cover; }
  .lm_price_inc.lm_price_inc { font-size: 2.9vw; }

  /* 제작 사례 설명이 상자(89%)보다 길어 문장마다 끝 낱말 하나가 가운데 정렬로
     홀로 떨어졌다(390 기준 4줄 282/81/211/68). 상자를 채우고 글자를 조금 줄여
     문장당 한 줄로 만든다. 375/390/430 에서 각각 325·338·372px 로 확인. */
  .ps_tab_box .ps_tab_box_txt.ps_tab_box_txt {
    width: 100%;
    font-size: 3.5vw;
    word-break: keep-all;
  }
}

/* ------------------------------------------------------------------
   CONTACT — div[role=button] 을 실제 <button type="submit"> 으로 바꿨다.
   보이는 건 한 픽셀도 달라지면 안 되므로 UA 버튼 스타일만 걷어낸다.
   특히 box-sizing: 이 사이트엔 전역 리셋이 없어서 <div> 는 content-box 인데
   <button> 은 UA 기본이 border-box 다. width 32% + padding 1.8% 2% 라
   그대로 두면 버튼이 작아진다.
------------------------------------------------------------------ */
button.form_submit.form_submit {
  box-sizing: content-box;
  border: 0;
  -webkit-appearance: none;
  appearance: none;
}
/* 라벨이 <p> 였는데 <button> 안에서는 허용되지 않는 요소라 <span> 으로 바꿨다.
   기존 .form_submit>p 의 z-index 를 그대로 물려준다. */
.form_submit>span { z-index: 3; }

/* 검증 메시지 — 새 UI 를 만들지 않고 폼 아래 한 줄로만 알린다. */
.lm_form_msg {
  width: 94%;
  margin: 0.6em auto 0;
  min-height: 1em;
  font-family: 'pretendard variable', Pretendard, 'Malgun Gothic', sans-serif;
  font-size: clamp(11px, 0.78vw, 14px);
  line-height: 1.5;
  text-align: center;
  color: #ff8a8a;
}
.lm_form_msg:empty { margin: 0; min-height: 0; }
/* 잘못 입력한 칸만 밑줄 색으로 표시한다(테두리 추가 없음 = 레이아웃 불변) */
.con25_mid .lm_invalid.lm_invalid { border-bottom-color: #ff8a8a; }
.con25_mid .form_agree.lm_invalid .form_agree_span { color: #ff8a8a; }

/* 키보드 초점 — default.css:32 의 전역 outline:none 때문에 탭 이동이 보이지 않았다.
   마우스 클릭에는 안 나오고 키보드에만 나오도록 :focus-visible 로만 건다.
   색은 기존 브랜드 시안을 그대로 쓴다. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid #008dcc;
  outline-offset: 2px;
}
.form_agree_check:focus-visible { outline: 2px solid #008dcc; outline-offset: 3px; }

/* 하단 고정 CTA 와 전화번호를 div/p[role=button] 에서 실제 링크로 바꿨다.
   부모가 flex 라 링크도 블록화되지만, 혹시 모를 인라인 차이를 막아 둔다. */
a.contact_fixed_left_1 { display: block; text-decoration: none; }
a.lm_qtel { text-decoration: none; }

/* FAQ 는 아코디언이 아니라 늘 펼쳐진 Q&A 라 <dl>/<dt>/<dd> 로 바꿨다.
   보조기술에 질문-답변 쌍으로 읽힌다. 보이는 건 그대로 두려고 UA 기본 여백만 지운다. */
dl.lm_faq { margin: 3% auto 8%; }
.lm_faq dt.lm_faq_q, .lm_faq dd.lm_faq_a { margin-left: 0; margin-right: 0; }

/* ------------------------------------------------------------------
   레이아웃 시프트 — 지연 로드 이미지가 자리를 안 잡아 두고 있었다.
   고객사 로고 69장(실제 파일은 340x80)과 .acon1_48(202x61)은 width/height
   속성도 aspect-ratio 도 없어서, 디코드되는 순간 아래 섹션이 통째로 밀렸다
   (실측 마퀴 123px + acon1_48 37px). 지금 렌더되는 비율과 같은 값이라
   보이는 크기는 달라지지 않고 로드 전 높이만 예약된다.
------------------------------------------------------------------ */
.con10_sd_y_img.con10_sd_y_img { aspect-ratio: 340 / 80; height: auto; }
.acon1_48.acon1_48 { aspect-ratio: 202 / 61; height: auto; }

@media screen and (max-width: 599px) {
  /* 닫힌 제작 사례 드롭다운이 opacity:0 일 뿐이라 탭 11개가 포커스를 그대로
     먹었다. 보이지 않는 탭 정지점 11개를 지나야 본문에 닿는다.
     visibility 로 포커스에서 빼되, 열릴 때 곧바로 보이도록 지연은 열 때만 0. */
  .ps_tab_container .ps_tab_wrap {
    visibility: hidden;
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
  }
  .ps_tab_container .ps_tab_wrap.open {
    visibility: visible;
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0s;
  }
}

/* 문의 전송 상태 — 오류는 기존 붉은 색, 접수 완료는 브랜드 시안을 쓴다. */
.lm_form_msg.lm_msg_ok { color: #7fd3f5; }
.con25_mid.lm_sending .form_submit { opacity: .55; pointer-events: none; }

/* 영문 개인정보처리방침의 원문 우선 안내 — 본문보다 한 단계 약하게 */
.lm_policy_note { opacity: .7; font-style: italic; margin-bottom: 1.2em; }
.lm_policy_note a { text-decoration: underline; }

/* ------------------------------------------------------------------
   언어 전환 드롭다운 (헤더 오른쪽)
   햄버거는 position:fixed 로 오른쪽 끝에 있으므로 그 왼쪽에 자리를 잡는다.
   1440 기준 햄버거 left=1339 / 헤더 right=1425, 390 기준 343 / 390.
------------------------------------------------------------------ */
.lm_lang {
  position: absolute;
  top: 63.5%;
  right: 7.8vw;
  transform: translateY(-50%);
  z-index: 100001;
  font-family: 'pretendard variable', Pretendard, 'Malgun Gothic', sans-serif;
}
.lm_lang_btn {
  display: flex;
  align-items: center;
  gap: 0.45em;
  margin: 0;
  padding: 0.35em 0.2em;
  background: none;
  border: 0;
  box-sizing: content-box;
  -webkit-appearance: none;
  appearance: none;
  font-family: inherit;
  font-size: 0.6em;
  font-weight: 500;
  line-height: 1;
  color: #17171b;
  cursor: pointer;
  white-space: nowrap;
}
.lm_lang_btn svg { flex: none; display: block; }
.lm_lang_globe { width: 1.05em; height: 1.05em; }
.lm_lang_caret { width: 0.8em; height: 0.8em; }
.lm_lang_caret { transition: transform 0.2s ease; }
.lm_lang.is_open .lm_lang_caret { transform: rotate(180deg); }

.lm_lang_menu {
  position: absolute;
  top: calc(100% + 0.7em);
  right: 0;
  min-width: 9.5em;
  padding: 0.5em 0;
  background: #fff;
  border: 1px solid rgba(2,2,2,.1);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,.09);
  font-size: 0.6em;
}
/* 닫힘/열림은 class 로 확정한다. hidden 속성만 믿으면 다른 스크립트가 지웠을 때
   로드 직후 열린 채로 보인다(실제로 그랬다). 속성은 보조기술용으로 같이 둔다. */
.lm_lang_menu { display: none; }
.lm_lang.is_open .lm_lang_menu { display: block; }
/* 말풍선 꼭지 */
.lm_lang_menu::before,
.lm_lang_menu::after {
  content: '';
  position: absolute;
  bottom: 100%;
  right: 1.4em;
  border: 7px solid transparent;
}
.lm_lang_menu::before { border-bottom-color: rgba(2,2,2,.12); }
.lm_lang_menu::after  { border-bottom-color: #fff; margin-bottom: -1px; border-width: 6px; right: calc(1.4em + 1px); }

.lm_lang_cur {
  margin: 0;
  padding: 0.5em 1.3em 0.85em;
  font-weight: 500;
  color: #17171b;
  white-space: nowrap;
  border-bottom: 1px solid rgba(2,2,2,.1);
}
.lm_lang_menu a {
  display: block;
  padding: 0.75em 1.3em;
  font-weight: 600;
  color: #17171b;
  text-decoration: none;
  white-space: nowrap;
}
.lm_lang_menu a:hover { background: #eef8fd; color: #0077b3; }
.lm_lang_menu a[aria-current="page"] { background: #eef8fd; color: #0077b3; }
.lm_lang_menu a:first-of-type { margin-top: 0.35em; }

@media screen and (max-width: 599px) {
  .lm_lang { top: 50%; right: 60px; }
  .lm_lang_btn { font-size: 3.1vw; }
  .lm_lang_menu { font-size: 3.1vw; min-width: 8.5em; }
}

/* 본문은 화면 폭에 비례해 지나치게 작아지지 않게 최소 크기를 유지한다. */
:root {
  --lm-body-size: clamp(15px, 1.05vw, 18px);
  --lm-caption-size: clamp(13px, 0.95vw, 15px);
  --lm-accent: #0077b3;
  --lm-ink: #020202;
  --lm-ease: cubic-bezier(0.22, 1, 0.36, 1);
}
#main .main_top_2nd,
#service .con2_top_5th,
#work .ps_tab_box_txt,
.lm_step_d,
.lm_faq_a {
  font-size: var(--lm-body-size);
  line-height: 1.75;
  font-weight: 400;
}
.lm_step_d, .lm_faq_a { opacity: .82; }
#main .main_top_2nd { font-weight: 400; }
#work .lm_price_inc { font-size: var(--lm-caption-size); line-height: 1.65; opacity: .8; }
#work .ps_tab { font-size: 14px; line-height: 1.5; }
#work .ps_tab_label { font-size: 13px; min-height: 28px; padding-inline: 10px; }
#work .ps_tab_box_txt { max-width: 40%; }
#work .ps_tab_box { min-height: 264px; }
#work .ps_tab_wrap { column-gap: 18px; row-gap: 12px; }
#work .ps_phone_ovry { font-size: 14px; background: rgba(0, 0, 0, .22); }
#work .more_view_btn { min-height: 44px; font-size: 14px; }
#work .more_view_img { width: max(64px, 4.01vw); }
#work .more_view_btn:hover .more_vew_arw { animation: none; transform: translateX(3px); }
#work .more_vew_arw { transition: transform .25s var(--lm-ease); }

/* Button labels and arrows stay sharp at every scale. */
#work .more_view_btn, .con5 .con5_mid_absol {
  font-family: 'pretendard variable', Pretendard, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  gap: 20px;
  color: #020202;
  text-decoration: none;
}
.con5 .con5_mid_absol {
  width: auto;
  min-height: 56px;
  padding: 12px 32px;
  box-sizing: border-box;
  border: 1px solid currentColor;
}
.lm_link_arrow { font-size: 28px; line-height: 1; transition: transform .25s var(--lm-ease); }
.more_view_btn:hover .lm_link_arrow, .con5_mid_absol:hover .lm_link_arrow { transform: translateX(4px); }
.more_view_btn:focus-visible, .con5_mid_absol:focus-visible { outline: 3px solid var(--lm-accent); outline-offset: 4px; }

.lm_step_t, .lm_faq_q { font-size: clamp(16px, 1.15vw, 20px); line-height: 1.5; }
.lm_step_no { font-size: clamp(24px, 1.7vw, 32px); }
.lm_steps { gap: 24px; flex-wrap: nowrap; }
.lm_step { flex: 1; width: auto; padding-right: 0; min-width: 0; }
.lm_faq_item { padding: 24px 0; }
#process .main_small_title_suit, #faq .main_small_title_suit,
#client .con6_top_2nd { font-size: clamp(17px, 1.45vw, 24px); line-height: 1.6; }

/* 제목과 도형을 서로 독립된 열에 배치한다. */
#service {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: clamp(32px, 4vw, 80px);
  padding: clamp(72px, 7vw, 120px) 10% clamp(120px, 10vw, 176px);
  box-sizing: border-box;
}
#service .con2_top { grid-column: 1; grid-row: 1; width: 100%; margin: 0; }
#service .con2_top_1st_p.lm_howlabel { font-size: 13px; }
#service .con2_top_2nd { font-size: clamp(26px, 2.6vw, 42px); }
#service .con2_top_3rd { font-size: clamp(32px, 3.65vw, 60px); line-height: 1.2; margin-top: 12px; }
#service .con2_top_5th { margin-top: 28px; white-space: normal; }
#service .con2_top_5th_p { width: 100%; }
#service .con2_top_6th { width: 100%; justify-content: flex-start; margin-top: 24px; gap: 28px; }
#service .con2_top_6th a { font-size: 15px; min-height: 36px; display: inline-flex; align-items: center; }
#service .con2_mid_items { position: relative; grid-column: 2; grid-row: 1; width: 100%; top: auto; right: auto; }
#service .con2_absol { width: 25%; top: 20%; opacity: .8; pointer-events: none; }
#service .con2_bottom_scr {
  position: absolute;
  bottom: 12px;
  left: 0;
  width: 100%;
  scale: 1;
  font-size: clamp(48px, 10.35vw, 210px);
  line-height: 1.15;
  opacity: .7;
}
#service { padding-bottom: max(120px, calc(10.35vw + 32px)); }
#service .con2_bottom_scr_1st p { flex-shrink: 0; }

/* 전체 높이가 바뀌는 호버 대신 버튼 색상과 화살표만 반응시킨다. */
#works .con1_port_con { gap: 20px; }
#works .con1_port { height: auto; width: 100%; min-height: 248px; aspect-ratio: 1440 / 625; }
#works .con1_port > img { display: block; width: 100%; height: 100%; position: absolute; inset: 0; object-fit: cover; object-position: 30% center; }
#works .con1_port .lm_bn {
  left: 4.608%; top: 0; bottom: 0; width: 32%; height: auto;
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 8px;
}
#works .lm_bn p, #works .lm_bn span { position: static; white-space: normal; }
#works .lm_bn .lm_bn_cat { font-size: 13px; line-height: 1.5; }
#works .lm_bn .lm_bn_ko { font-size: clamp(24px, 2.3vw, 38px); line-height: 1.2; word-break: keep-all; }
#works .lm_bn .lm_bn_en { font-size: 13px; line-height: 1.5; letter-spacing: .05em; }
#works .lm_bn .lm_bn_btn {
  font-size: 14px; line-height: 1.4; padding: 10px 16px; margin-top: 8px;
  display: inline-flex; align-items: center; gap: 12px;
  transition: background .25s var(--lm-ease);
}
#works .lm_bn_btn i { margin-left: 0; display: inline-block; transition: transform .25s var(--lm-ease); }
#works .con1_port a.absol, #works .con1_port_mobile a.absol {
  inset: 0; width: 100%; height: 100%; padding: 0; margin: 0; display: block;
}
#works .con1_port, #works .con1_port_mobile { transition: box-shadow .25s var(--lm-ease); }
#works a.absol:focus-visible { outline: 3px solid var(--lm-accent); outline-offset: -3px; }
#works .con1_port:focus-within .lm_bn_btn, #works .con1_port_mobile:focus-within .lm_bn_btn { background: var(--lm-accent); }
@media (hover: hover) and (pointer: fine) {
  #works .con1_port:hover .lm_bn_btn, #works .con1_port_mobile:hover .lm_bn_btn { background: var(--lm-accent); }
  #works .con1_port:hover .lm_bn_btn i, #works .con1_port_mobile:hover .lm_bn_btn i { transform: translateX(3px); }
}

/* 언어 선택은 헤더에 유지하고 우측 배너의 고정 노출을 없앤다. */
body .fix_banner { display: none; }
#contact .con9_top { font-size: clamp(19px, 1.7vw, 28px); line-height: 1.5; }
#contact .con9_top_2nd { font-size: var(--lm-body-size); line-height: 1.7; margin-top: 12px; }
#contact .con25_mid_top { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
#contact .con25_mid_top input { width: 100%; min-width: 0; margin-top: 0; }
#contact .con25_mid_top input,
#contact .lm_form_2nd select,
#contact .lm_form_2nd textarea {
  font-size: 16px; line-height: 1.5; min-height: 44px; box-sizing: border-box; padding: 10px 0;
}
#contact .form_agree { gap: 10px; margin-top: 24px; margin-bottom: 20px; }
#contact .form_agree_span { font-size: 13px; line-height: 1.6; font-weight: 400; text-align: left; }
#contact .form_agree_check { width: 18px; height: 18px; min-width: 18px; margin: 0; position: relative; }
#contact .form_agree_check:checked::after { width: 10px; height: 10px; top: 3px; left: 3px; }
#contact .form_submit { font-size: 16px; min-height: 52px; padding: 12px 24px; box-sizing: border-box; }
#contact .con9_top_3rd { font-size: 13px; opacity: .65; }
#contact .main_scry { opacity: .65; }
#contact .scrY_item { animation-duration: 32s; }
.footer .footer_bottom { font-size: 14px; }
.footer .footer_left_con_p_2, .footer .footer_right_con_p_2 { font-size: 14px; }

@media screen and (min-width: 900px) {
  #works .con1_port_mobile { display: none; }
}
@media screen and (min-width: 600px) {
  #work .ps_tab_container .ps_tab_wrap { box-sizing: border-box; width: 30vw; max-width: none; padding-left: 0; margin-left: 16.1vw; }
}
@media screen and (min-width: 600px) and (max-width: 1023px) {
  #work .ps_tab_container .ps_tab_wrap { max-width: 40%; }
  #work .ps_tab_box { min-height: 320px; }
  #work .ps_sub_twrap { font-size: 15px; }
  #work .ps_250_txt { font-size: 18px; }
  #work .ps_iner { padding-top: 64px; }
  #work .ps_tab_wrap { margin-top: 140px; }
  .lm_steps { flex-wrap: wrap; }
  .lm_step { flex: 0 0 calc(50% - 12px); }
}
@media screen and (max-width: 1023px) {
  #contact .con25_mid { width: 88%; }
  #contact .con25_mid_top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media screen and (max-width: 899px) {
  #service { grid-template-columns: 1fr; row-gap: 36px; padding: 64px 6% 100px; }
  #service .con2_top { max-width: 520px; justify-self: center; }
  #service .con2_top_1st, #service .con2_top_2nd, #service .con2_top_3rd, #service .con2_top_5th { text-align: center; }
  #service .con2_top_3rd { font-size: clamp(36px, 6vw, 52px); }
  #service .con2_top_6th { justify-content: center; }
  #service .con2_mid_items { grid-column: 1; grid-row: 2; max-width: 540px; justify-self: center; }
  #service .con2_absol { display: none; }
  #works .con1_port { display: none !important; }
  #works .con1_port_con { width: 88%; gap: 24px; align-items: stretch; }
  #works .con1_port_mobile { display: block; width: 100%; height: auto; background: #fff; margin: 0; }
  #works .lm_card_visual { width: 100%; aspect-ratio: 782 / 330; overflow: hidden; }
  #works .lm_card_visual > img { display: block; width: 100%; height: auto; }
  #works .con1_port_mobile .lm_bn { position: static; width: auto; height: auto; padding: 22px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
  #works .con1_port_mobile .lm_bn_ko { font-size: 24px; }
  #works .con1_port_mobile .lm_bn_btn { min-height: 24px; }
}
@media screen and (min-width: 600px) and (max-width: 899px) {
  #works .con1_port_mobile { width: calc(50% - 12px); }
  #works .con1_port_con { justify-content: flex-start; }
}
@media screen and (max-width: 599px) {
  #main .main_top_2nd { width: 88%; margin-inline: auto; font-size: 14px; line-height: 1.7; }
  #work .ps_tab_box { min-height: 0; padding: 24px 20px; box-sizing: border-box; }
  #work .ps_tab_box .ps_tab_box_txt { max-width: none; width: 100%; font-size: 15px; line-height: 1.75; }
  #work .ps_tab_label { border-radius: 999px; }
  #work .ps_tab_wrap { gap: 8px; }
  #work .ps_tab_toggle { min-height: 48px; box-sizing: border-box; font-size: 14px; }
  #work .ps_sub_twrap { width: 90%; margin-inline: auto; }
  #work .ps_250_txt { flex-wrap: wrap; font-size: 20px; line-height: 1.5; gap: 4px 8px; }
  #work .ps_250_txt::after { width: 100%; }
  #work .ps_t2 { font-size: 16px; line-height: 1.5; }
  #work .ps_phone_ovry { display: none; }
  .lm_steps { gap: 28px 20px; flex-wrap: wrap; }
  .lm_step { flex: 0 0 calc(50% - 10px); margin: 0; }
  .lm_faq_item { padding: 22px 0; }
  #contact .con9_top, #contact .con9_top_2nd { width: 88%; }
  #contact .con9_top { font-size: 20px; }
  #contact .con9_top_2nd br { display: none; }
  #contact .con25_mid { width: 92%; }
  html[lang|="en"] #contact .con25_mid_top { grid-template-columns: 1fr; }
  #contact .form_submit { width: 100%; max-width: 280px; }
  .contact_fixed .contact_fixed_left_4 { font-size: 14px; }
  .lm_lang .lm_lang_btn, .lm_lang .lm_lang_menu { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  #works .lm_bn_btn, #works .lm_bn_btn i, #work .more_vew_arw { transition: none; }
  #contact .scrY_item, #service .con2_bottom_scr_1st { animation: none; }
}