/* sub page — 서브페이지 공통 <main> 래퍼. service.html, managed_services.html, web_app_dev.html이 모두 공유하는 스타일이라 service.css에 중복 선언하지 않고 여기 하나로 통합했다 */
.sub_page{display:block;font-family:var(--font-body);-webkit-font-smoothing:antialiased;min-height:auto !important;}
.footer_section{padding-top:32px}

/* sub page fade-in — 히어로/리스트가 GSAP으로 숨김 처리되기 전 원래 모습 그대로 잠깐 보였다가 갑자기
   사라지는 깜빡임(FOUC)을 막기 위해 body 전체를 살짝 가려뒀다가, sub.js가 리빌 시작 상태를 전부
   세팅한 직후 한 번에 부드럽게 페이드인한다. js가 느리게 로드되거나 실패해도 페이지가 영영 안 보이지
   않도록, 1.2s 뒤에는 CSS 애니메이션만으로 강제로 다시 보이게 하는 안전장치를 함께 둔다.
   body 자신의 클래스가 아니라 html의 클래스 하나만 기준으로 삼는다 — body/html에 각각 따로
   클래스를 붙이던 예전 방식은 하나라도 어긋나면(예: html만 붙고 body는 안 붙음) 페이지가 영영
   안 보이는 상태로 남는 문제가 있었다 */
body{animation:sub_page_fade_in_fallback 0.01s 1.2s forwards;opacity:0;}
html.is_ready body{animation:none;opacity:1;transition:opacity 0.4s ease-out;}
@keyframes sub_page_fade_in_fallback{
  0%{opacity:0;}
  100%{opacity:1;}
}

/* page loading indicator — body가 opacity:0인 동안은 그 안의 무엇을 넣어도 함께 가려지므로,
   body가 아니라 그 부모인 html에 스피너를 건다(html::after는 body의 opacity 영향을 받지 않는다).
   sub.js가 html에 is_ready를 붙이면 :not(.is_ready) 조건이 깨지면서 사라진다. js가 실패해도
   1.3s 뒤엔 CSS만으로 페이드아웃되도록 안전장치를 같이 둔다. 마크업 추가 없이 순수 CSS로 동작한다 */
html:not(.is_ready)::after{content:'';display:block;position:fixed;top:50%;left:50%;z-index:9999;width:32px;height:32px;margin:-16px 0 0 -16px;border:3px solid rgba(34,34,34,0.15);border-top-color:var(--color-accent);border-radius:50%;pointer-events:none;animation:sub_page_loader_spin 0.7s linear infinite,sub_page_loader_fade_out 0.01s 1.3s forwards;}
@keyframes sub_page_loader_spin{
  0%{transform:rotate(0deg);}
  100%{transform:rotate(360deg);}
}
@keyframes sub_page_loader_fade_out{
  0%{opacity:1;}
  100%{opacity:0;}
}

/* image skeleton shimmer — 실제 사진(webp/jpg/png)이 로드되는 동안 회색 시머 배경을 보여준다.
   아이콘·선형 일러스트는 CLAUDE.md 규칙상 항상 svg라서 :not([src$=".svg"])로 자동 제외된다.
   sub.js가 각 이미지의 load 이벤트를 감지해 is_loaded를 붙이면 애니메이션이 멈추고 사라진다 —
   마크업에 클래스를 추가할 필요 없이 모든 서브페이지의 모든 사진에 공통으로 적용된다 */
img:not([src$=".svg"]){background:linear-gradient(100deg,#e8e8e4 30%,#f5f5f2 45%,#e8e8e4 60%);background-size:200% 100%;animation:img_skeleton_shimmer 1.4s ease-in-out infinite;}
img.is_loaded{background:none;animation:none;}
@keyframes img_skeleton_shimmer{
  0%{background-position:200% 0;}
  100%{background-position:-200% 0;}
}
.sub_hero.none_line{background:none;}
.sub_hero.none_line::before,.sub_hero.none_line::after{content:none;}
/* sub hero — 서브페이지 공통 히어로(브레드크럼 + 타이틀 + 설명 + 우측 이미지). service.html, managed_services.html, web_app_dev.html 모두에서 공통으로 사용한다 */
/* sub hero divider(Figma) — 좌우 사각 마커(::before/::after)와 그 사이를 잇는 라인. .sub_hero 자체는
   좌우 padding이 없어서 border-bottom을 쓰면 마커 위치(30px 안쪽)보다 라인이 바깥으로 더 나가버리므로,
   라인을 배경 그라디언트로 그려 마커와 정확히 같은 좌우 30px 지점 사이에서만 보이게 한다 */
.sub_hero{width:100%;padding:100px 0;position:relative;background:linear-gradient(#D9D9D9,#D9D9D9) no-repeat left 30px bottom 0/calc(100% - 60px) 1px;}
/* sub hero divider corner marker — 라인 양쪽 끝에 걸리는 작은 사각 장식. .sub_hero_inner의 좌우 padding(30px)과
   같은 위치에 맞춘다 */
.sub_hero::before,.sub_hero::after{content:'';display:block;position:absolute;bottom:-4px;width:8px;height:8px;background:#F3F3EF;border:1px solid #67635F;}
.sub_hero::before{left:30px;}
.sub_hero::after{right:30px;}
.sub_hero_inner{position:relative;/*max-width:1920px;*/margin:0 auto;padding:0 100px 0 30px;}

/* sub breadcrumb — 빨간 알약(pill) 안에 링크·구분 아이콘·현재 위치가 함께 들어간다 */
.sub_breadcrumb{display:flex;width:fit-content;margin-bottom:25px;padding:7px 13px;border-radius:3px;background:var(--color-accent-red);align-items:center;gap:6px;}
.sub_breadcrumb a{font-family:'Inter',sans-serif;font-weight:700;font-size:14px;line-height:1.4;letter-spacing:0;text-transform:capitalize;color:var(--color-white);}
.sub_breadcrumb_current{font-family:'Inter',sans-serif;font-weight:700;font-size:14px;line-height:1.4;letter-spacing:0;text-transform:capitalize;color:var(--color-white);}

/* sub hero title */
.sub_hero_tit{display:block;overflow:hidden;}
.sub_hero_tit_line{display:block;overflow:hidden;}
.sub_hero_tit_inner{display:block;font-family:'Zalando Sans Expanded',sans-serif;font-weight:800;font-size:100px;font-style:normal;line-height:130%;letter-spacing:-2%;color:var(--color-text-dark);will-change:transform;}

/* sub hero desc */
.sub_hero_desc{max-width:800px;margin-top:20px;}
.sub_hero_desc_en{font-family:'Inter',sans-serif;font-weight:600;font-size:30px;line-height:1.15;letter-spacing:-0.05em;color:var(--color-text-dark);}
.sub_hero_desc_kr{font-weight:700;font-size:36px;font-style:normal;line-height:130%;letter-spacing:-5%;color:var(--color-text-dark);word-break: keep-all;}

/* sub hero mascot */
.sub_hero_mascot{position:absolute;top:80px;right:150px;width:clamp(300px,24.5vw,354px);}
.sub_hero_mascot_main{display:block;width:100%;height:100%;object-fit:contain;}

/* sub section title — Why SYWORKS / Our Difference / Explore Our Projects가 공통으로 쓰는 큰 타이틀 */
.why_tit,.difference_tit,.explore_tit{font-size:40px;font-family: Pretendard;line-height: 130%;letter-spacing: -1.2px;font-weight: 800;color:var(--color-text-dark);text-align:center;}
/* explore our projects — managed_services.html, web_app_dev.html이 공통으로 쓰는 프로젝트 미리보기 섹션 */
.explore_section{width:100%;padding:100px 0 300px;}
.explore_inner{max-width:1920px;margin:0 auto;padding:0 30px;}
.explore_list{display:flex;width:100%;margin-bottom:35px;gap:15px;margin-top:30px;}

/* explore card — 실제 프로젝트 사진 에셋이 없어 라벨을 얹은 플레이스홀더 박스로 대체한다 */
.explore_card{overflow:hidden;border-radius:2px;background:var(--color-white);flex:1;}
.explore_card_thumb{display:flex;overflow:hidden;position:relative;width:100%;height:280px;background:var(--color-surface);justify-content:center;align-items:center;}
.explore_card_thumb img{display:block;width:100%;height:100%;object-fit:cover;}
.explore_card_thumb_label{font-family:'Pretendard',sans-serif;font-weight:600;font-size:22px;letter-spacing:-0.02em;color:rgba(255,255,255,0.5);}
.explore_card_body{padding:20px;}
.explore_card_tit{margin-bottom:12px;font-family:'Pretendard',sans-serif;font-weight:700;font-size:20px;letter-spacing:-0.03em;color:var(--color-text-dark);}
.explore_card_desc{width:90%;margin-bottom:20px;font-family:'Pretendard',sans-serif;font-style:normal;font-weight:600;font-size:16px;line-height:1.5;letter-spacing:-0.02em;color:var(--color-text-secondary);word-break:keep-all;overflow-wrap:break-word;}
.explore_card_tags{display:flex;flex-wrap:wrap;gap:6px;}
.explore_card_tags li{font-family:'Pretendard',sans-serif;font-style:normal;font-weight:600;font-size:13px;line-height:140%;letter-spacing:-0.13px;color:#AFABA2;}

/* explore all button */
.explore_all_btn{display:flex;width:100%;height:auto;padding:20px 30px;border-radius:2px;background:var(--color-accent-red);font-family:'Pretendard',sans-serif;font-weight:600;font-size:30px;letter-spacing:-0.02em;color:var(--color-white);transition:opacity var(--transition-base);justify-content:space-between;align-items:center;}
.explore_all_btn:hover{opacity:0.85;}
.explore_all_btn img{display:block;width:44px;height:42px;}

/* pill filter btn — service.html(solution_jump)와 project.html(all_project_filter)이 공통으로 쓰는 필터/점프 버튼. 두 곳 모두 동일한 스타일을 쓴다 */
.pill_filter_btn{display:flex;width:fit-content;padding:4px 12px;border-radius:2px;background:var(--color-white);font-family:'Inter',sans-serif;font-weight:700;font-size:20px;letter-spacing:-0.04em;color:#353533;transition:background-color var(--transition-base),color var(--transition-base);justify-content:center;align-items:center;gap:12px;cursor:pointer;}
.pill_filter_btn:hover{background:var(--color-border);}
.pill_filter_btn.is_active{background:var(--color-accent-red);color:var(--color-white);}
.pill_filter_btn.is_active:hover{background:var(--color-accent-red);}
.pill_filter_count{display:inline-flex;min-width:34px;height:24px;padding:0 6px;border-radius:20px;background:var(--color-bg-alt);color:#FFF;font-family:Inter;font-size:14px;font-style:normal;font-weight:600;line-height:150%;letter-spacing:-0.56px;text-align:center;align-items:center;justify-content:center;}
.pill_filter_btn.is_active .pill_filter_count{background:var(--color-white);color:var(--color-accent-red);}

/* all project head — project.html "All Projects" 타이틀 + 필터 탭 줄 */
.all_project_head{display:flex;width:100%;justify-content:space-between;align-items:flex-end;}
.all_project_head_tit{font-family:'Inter',sans-serif;font-weight:800;font-size:30px;line-height:120%;letter-spacing:-0.04em;color:var(--color-text-dark);}
.all_project_filter{display:flex;gap:6px;}

/* process list — web_app_dev.html, managed_services.html, careers.html이 공통으로 쓰는 아코디언 리스트. 원래 service.css에 있었으나 careers.html에서도 그대로 쓰게 되어 이 파일로 옮겼다 */
.process_list{display:flex;flex-direction:column;}
.process_item{position:relative;padding:30px 0 0;border-top:1px solid var(--color-border);}
.process_item_row {display:none;position: absolute;left: 50%;top: 5px;width: 1px;background: #d9d5d2;bottom: -30px;}
.process_item + .process_item{margin-top:25px;}
.process_item:last-child{padding-bottom:30px;border-bottom:1px solid var(--color-border);}
.process_item:last-child::after{content:'';display:block;position:absolute;bottom:-5px;left:50%;width:10px;height:10px;background:var(--color-bg);border:1px solid var(--color-text-muted);transform:translateX(-50%);}

/* process item 구분선 코너 장식 — main.css "How We Work" 스타일의 작은 사각 마커를 재사용한다. 모든 아이템에 동일하게 적용된다 */
.process_item::before{content:'';display:block;position:absolute;top:-5px;left:50%;width:10px;height:10px;background:var(--color-bg);border:1px solid var(--color-text-muted);transform:translateX(-50%);}

/* process item head — 닫혀 있을 때만 번호+제목+한글명 한 줄로 보이고, 열리면 아래 콘텐츠에 자리를 내주고 숨는다 */
.process_item.is_active .process_item_head{display:none;}
.process_item.is_active .process_item_row {display:block;}
.process_item_head{display:grid;grid-template-columns:1fr auto 1fr;width:100%;align-items:center;gap:20px;border:0;background:none;cursor:pointer;}
.process_item_num{justify-self:start;font-family:'Inter',sans-serif;font-weight:600;font-size:16px;letter-spacing:-0.02em;color:var(--color-text-muted);}
.process_item_tit{font-family:'Inter',sans-serif;font-weight:700;font-size:28px;letter-spacing:-0.03em;text-align:center;color:var(--color-text-dark);}
.process_item_kr{justify-self:end;font-family:'Pretendard',sans-serif;font-weight:600;font-size:16px;letter-spacing:-0.02em;color:var(--color-text-muted);}

/* process item body — grid-template-rows 0fr/1fr 트릭으로 부드럽게 펼쳐진다.
   높이(grid-template-rows)와 콘텐츠 opacity를 함께 트랜지션해서 기계적인 높이 스냅 대신
   자연스럽게 커지며 나타나는 느낌을 준다. 이징은 common.js에 등록된 'smooth'(부드러운 감속) GSAP
   이징과 같은 커브를 사용한다 */
.process_item_body{display:grid;overflow:hidden;grid-template-rows:minmax(0,0fr);transition:grid-template-rows 0.7s cubic-bezier(0.16,1,0.3,1);}
.process_item.is_active .process_item_body{grid-template-rows:minmax(0,1fr);}
.process_item_body > div{box-sizing:border-box;overflow:hidden;min-height:0;}
.process_item_content{display:flex;gap:60px;opacity:0;transition:opacity 0.4s ease-out;}
.process_item.is_active .process_item_content{opacity:1;transition:opacity 0.5s ease-out 0.15s;}
.process_item_media img {display: block;position: absolute; top: 0; left: 0;width: 100%;height: 100%; object-fit: cover;}
.process_item_media_label {position: relative;z-index: 1; font-family: 'Zalando Sans Expanded', sans-serif;font-weight: 800;font-size: 60px; letter-spacing: -0.04em;color: var(--color-white);background-blend-mode: hard-light;/*mix-blend-mode: difference;*/text-align: center;line-height: 110%;}

/* process item media — 실제 사진 에셋이 없어 라벨을 얹은 플레이스홀더 박스로 대체한다 */
.process_item_media{display:flex;overflow:hidden;position:relative;flex:1;/*width: 559px;*/ height: 498px;flex-shrink:0;border-radius:2px;background:var(--color-surface);justify-content:center;align-items:center;}


/* process item text */
.process_item_text{display:flex;flex:1;flex-direction:column;justify-content:center;align-items:center;gap:30px;text-align:center;}
.process_item_num_big{font-family:'Inter',sans-serif;font-weight:700;font-size:24px;letter-spacing:-0.02em;color: #fff;border-radius: 50%;width: 50px;background: #B71C1C;height: 50px;display: flex;align-items: center;justify-content: center;}
.process_item_tit_big{font-family:'Pretendard',sans-serif;font-weight:800;font-size:30px;letter-spacing:-0.03em;color:var(--color-text-dark);}
.process_item_desc{max-width:460px;margin-top:-20px;font-family:'Pretendard',sans-serif;font-weight:500;font-size:16px;line-height:1.5;letter-spacing:-0.04em;color:var(--color-text-dark);}
.process_item_tags{display: flex; width: 100%; flex-direction: column; gap: 5px;max-width: 432px;}
.process_item_tags li{padding:10px 30px;border-radius:2px;background:var(--color-bg-alt);font-family:'Pretendard',sans-serif;font-style:normal;font-weight:700;font-size:20px;line-height:150%;letter-spacing:-0.8px;text-align:center;color:var(--color-text-primary);}

/* form components — careers.css(apply_panel)와 common.css(start_project_panel)가 같은 모양의 폼 요소를 각자
   구현하고 있어서 겹치는 선언을 여기로 모았다. 정렬·폰트크기처럼 페이지마다 다른 값은 각 CSS의 클래스에 남겨두고
   오버라이드한다. 클래스명은 각 페이지 것을 그대로 그룹 셀렉터로 묶는다 (HTML은 안 건드림) */
.apply_input,.start_project_input{display:flex;width:100%;height:50px;padding:12px;border:1px solid var(--color-border);background:var(--color-white);font-family:'Pretendard',sans-serif;font-weight:600;font-size:16px;letter-spacing:-0.02em;color:var(--color-text-dark);}
.apply_input::placeholder,.start_project_input::placeholder{color:var(--color-text-muted);}

/* input group — 인풋 안에 버튼/단위 텍스트가 같이 들어가는 래퍼 */
.apply_input_with_btn,.start_project_input_with_suffix{display:flex;height:50px;padding:12px;border:1px solid var(--color-border);background:var(--color-white);align-items:center;}
.apply_input_with_btn .apply_input,.start_project_input_with_suffix .start_project_input{width:100%;height:auto;padding:0;border:0;}

/* attach bar — 첨부파일 바. 배경색(rgba(188,182,170,0.15))은 두 곳 다 동일 */
.apply_attach_row,.start_project_attach{display:flex;width:100%;background:rgba(188,182,170,0.15);justify-content:space-between;align-items:center;}
.apply_attach_label,.start_project_attach_label{display:flex;font-family:'Pretendard',sans-serif;letter-spacing:-0.02em;color:var(--color-text-dark);align-items:center;gap:20px;}
.apply_attach_file,.start_project_attach_file{display:flex;align-items:center;gap:8px;}
.apply_attach_delete,.start_project_attach_delete{display:flex;width:14px;height:14px;border:0;background:none;cursor:pointer;}
.apply_attach_delete img,.start_project_attach_delete img{display:block;width:100%;height:100%;}

/* dark inline btn — "Check e-mail", "Select file"처럼 어두운 배경의 작은 인라인 버튼 */
.apply_inline_btn,.start_project_inline_btn{display:flex;width:fit-content;flex-shrink:0;align-items:center;border:0;background:#222222;color:var(--color-white);white-space:nowrap;cursor:pointer;}

/* check input — 원형 다중선택 체크박스의 공통 상태(테두리·배경·트랜지션). 예전엔 옆의 빈 span을 체크박스
   모양으로 썼는데, 회사 CMS에 올리면 내용 없는 빈 span 태그가 자동 제거돼 체크박스가 사라지는 문제가 있어서
   별도 span 없이 input 자체를 appearance:none으로 초기화해 체크박스처럼 스타일링한다.
   체크됐을 때 배경/체크마크 아이콘 크기는 페이지마다 살짝 달라서(14x10 / 11x8) 그 규칙은 각 CSS에 그대로 둔다 */
.apply_check_input,.start_project_chip_input{appearance:none;-webkit-appearance:none;display:block;margin:0;border:1px solid #cccccc;border-radius:50%;background:var(--color-white);flex-shrink:0;cursor:pointer;transition:background-color var(--transition-base),border-color var(--transition-base);}

/* cta btn — 패널 하단 대형 액션 버튼. 배경색·폰트크기는 페이지에서 오버라이드 */
.apply_btn,.start_project_submit_btn{display:flex;width:100%;height:62px;padding:20px 25px 20px 30px;border:0;border-radius:2px;font-family:'Pretendard',sans-serif;letter-spacing:-0.02em;transition:opacity var(--transition-base);justify-content:center;align-items:center;cursor:pointer;}
.apply_btn:hover,.start_project_submit_btn:hover{opacity:0.85;}

.apply_agree_content{  display:grid;  grid-template-rows:0fr;  overflow:hidden; transition:grid-template-rows .4s ease;}
.apply_agree_content_inner{  min-height:0;  overflow:hidden;}
.apply_agree_item.is_active .apply_agree_content{grid-template-rows:1fr;}
.apply_agree_note img{ transition:transform .3s ease;}
.apply_agree_item.is_active .apply_agree_note img{  transform:rotate(180deg);}
.apply_agree_content_inner{display:flex;flex-direction:column;gap:16px;}
.apply_agree_content_lead{font-family:'Pretendard',sans-serif;font-weight:700;font-size:14px;line-height:1.5;letter-spacing:-0.7px;color:var(--color-text-dark);word-break:keep-all;overflow-wrap:break-word;}
.apply_agree_content_list{display:flex;flex-direction:column;gap:16px;font-family:'Pretendard',sans-serif;font-weight:500;font-size:14px;line-height:1.5;letter-spacing:-0.7px;color:#444444;list-style:decimal;word-break:keep-all;overflow-wrap:break-word;}
.apply_agree_content_list strong{font-weight:700;color:var(--color-text-dark);}
.apply_agree_item.is_active .apply_agree_content {border-bottom: 1px solid #ddd;padding-bottom: 16px;}
.apply_agree_item .apply_agree_content { padding: 21px 10px;padding-bottom: 16px;padding-right: 0;}

/* PC 비율 축소 (1025px~1920px) — 1920 디자인 기준 px를 vw로 변환해 레이아웃 재배치 없이 비율만 축소한다. 계산식: vw = px / 1920 * 100 */
@media screen and (min-width:1025px) and (max-width:1920px){
  .footer_section{padding-top:1.6667vw;}
  .sub_hero{padding:5.2083vw 0;background:linear-gradient(#D9D9D9,#D9D9D9) no-repeat left 1.5625vw bottom 0/calc(100% - 3.125vw) 1px;}
  .sub_hero::before,.sub_hero::after{bottom:-0.2083vw;width:0.4167vw;height:0.4167vw;}
  .sub_hero::before{left:1.5625vw;}
  .sub_hero::after{right:1.5625vw;}
  .sub_hero_inner{padding:0 1.5625vw;}
  .sub_breadcrumb{margin-bottom:1.3vw;padding:0.3646vw 0.6771vw;border-radius:0.1563vw;gap:0.3125vw;}
  .sub_breadcrumb a,.sub_breadcrumb_current{font-size:0.7292vw;}
  .sub_hero_tit_inner{font-size:5.3vw;}
  .sub_hero_desc{max-width:41.6667vw;margin-top:1.0417vw;}
  .sub_hero_desc_en{font-size:1.5625vw;}
  .sub_hero_desc_kr{font-size:1.89vw;}
  .sub_hero_mascot{top:4.1667vw;right:7.8125vw;}
  .why_tit,.difference_tit,.explore_tit{font-size:2.083vw;}
  .explore_section{padding:5.2083vw 0 15.625vw;}
  .explore_inner{padding:0 1.5625vw;}
  .explore_list{margin-bottom:1.8229vw;gap:0.7813vw;margin-top:1.5625vw;}
  .explore_card{border-radius:0.1042vw;}
  .explore_card_thumb{height:14.5833vw;}
  .explore_card_thumb_label{font-size:1.1458vw;}
  .explore_card_body{padding:1.1458vw;}
  .explore_card_tit{margin-bottom:0.625vw;font-size:1.25vw;}
  .explore_card_desc{margin-bottom:1.0417vw;font-size:0.8333vw;}
  .explore_card_tags{gap:0.3125vw;}
  .explore_card_tags li{font-size:0.6771vw;}
  .explore_all_btn{padding:1.0417vw 1.5625vw;border-radius:0.1042vw;font-size:1.5625vw;}
  .explore_all_btn img{width:2.2917vw;height:2.1875vw;}
  .pill_filter_btn{padding:0.2083vw 0.625vw;border-radius:0.1042vw;font-size:1.0417vw;gap:0.625vw;}
  .pill_filter_count{min-width:1.7708vw;height:1.25vw;padding:0 0.3125vw;border-radius:1.0417vw;font-size:0.7292vw;}
  .all_project_head_tit{font-size:1.5625vw;}
  .all_project_filter{gap:0.3125vw;}
  .process_item{padding:1.5625vw 0 0;}
  .process_item + .process_item{margin-top:1.3021vw;}
  .process_item:last-child{padding-bottom:1.5625vw;}
  .process_item:last-child::after{bottom:-0.2604vw;width:0.5208vw;height:0.5208vw;}
  .process_item::before{top:-0.2604vw;width:0.5208vw;height:0.5208vw;}
  .process_item_head{gap:1.0417vw;}
  .process_item_num{font-size:0.8333vw;}
  .process_item_tit{font-size:1.4583vw;}
  .process_item_kr{font-size:0.8333vw;}
  .process_item_content{gap:3.125vw;}
  .process_item_media_label{font-size:3.125vw;}
  .process_item_media{width:29.1146vw;height:25.9375vw;border-radius:0.1042vw;}
  .process_item_text{gap:1.5625vw;}
  .process_item_num_big{font-size:1.25vw;width:2.604vw;height:2.604vw;}
  .process_item_tit_big{font-size:1.5625vw;}
  .process_item_desc{max-width:23.9583vw;font-size:0.9375vw;}
  .process_item_tags{gap:0.2604vw;max-width:22.5vw;}
  .process_item_tags li{padding:0.5208vw 1.525vw;border-radius:0.1042vw;font-size:1.0417vw;}
  .process_item_row{bottom: -1.5625vw;top: 0.26vw;}
  .apply_input,.start_project_input{height:2.6042vw;padding:0.625vw;font-size:0.8333vw;}
  .apply_input_with_btn,.start_project_input_with_suffix{height:2.6042vw;padding:0.625vw;}
  .apply_attach_label,.start_project_attach_label{gap:1.0417vw;}
  .apply_attach_file,.start_project_attach_file{gap:0.4167vw;}
  .apply_attach_delete,.start_project_attach_delete{width:0.7292vw;height:0.7292vw;}
  .apply_btn,.start_project_submit_btn{height:3.2292vw;padding:1.0417vw 1.3021vw 1.0417vw 1.5625vw;border-radius:0.1042vw;}
  .apply_agree_content_inner{gap:0.8333vw;}
  .apply_agree_content_lead{font-size:0.7292vw;}
  .apply_agree_content_list{gap:0.8333vw;font-size:0.7292vw;}
  .apply_agree_item.is_active .apply_agree_content{padding-bottom:0.8333vw;}
  .apply_agree_item .apply_agree_content{padding:1.0938vw 0.5208vw;padding-bottom:0.8333vw;padding-right:0;}
}


@media only screen and (max-width:1024px){
  .sub_breadcrumb {padding:5px 10px;margin-bottom: 20px;}
  .sub_breadcrumb a,.sub_breadcrumb_current {font-size:11px;}
  .sub_hero {padding:clamp(86px,12vw,100px) 0 clamp(50px,10vw,100px);background: linear-gradient(#D9D9D9, #D9D9D9) no-repeat left 15px bottom 0 / calc(100% - 30px) 1px;}
  .sub_hero::before{left:15px;}
  .sub_hero::after{right:15px;}
  .sub_hero.none_line {border-bottom:1px solid rgb(221, 221, 221);}
  .sub_hero_inner {padding:0 15px;}
  .sub_hero_tit_inner {font-size:clamp(36px, 11vw, 90px);line-height:1.2;}
  .sub_hero_desc_kr {font-size:clamp(14px,2.5vw,24px);letter-spacing:-0.75px;}
  .sub_hero_mascot {display:none;}
  .insight_view_actions { display: none!important;}
  .insight_view_body{display:flex;overflow-x:auto;width:100%;flex-direction:column;gap:20px;}
  .insight_view_inner { max-width: 100%!important; width: 100%!important;}
  
  .why_tit, .difference_tit{font-size:clamp(30px,4vw,40px)}
  
  .process_item{padding: 20px 0 0;}
  .process_item::before{display:none;}
  .process_item_text{gap:20px;}
  .process_item_desc{font-size:clamp(14px,2vw,18px);margin-top:-15px;}
  .process_item_content {flex-direction: column;gap: 30px;}
  .process_item_media {margin: 0 auto;aspect-ratio: 345 / 246;width: 100%;max-width: 500px;}
  .process_item_media_label{font-size:clamp(28px,5vw,50px)}
  .process_item_tags li{font-size:clamp(14px,2.2vw,20px);}
  .process_item_num,.process_item_kr{font-size:14px;}
  .process_item.is_active .process_item_row{display:none;}
  .process_item_text{gap:20px;}
  
  .explore_inner{padding:0 15px;}
  .explore_section{padding-bottom:100px;}
  .explore_list {display:grid;grid-template-columns: 1fr 1fr;}
  .explore_card_thumb{aspect-ratio: 345 / 276;height:auto;}
  .explore_card_thumb>*{width:100%;height:100%;}
  .explore_card_body{padding:20px;}
  .explore_card_tit{font-size:20px;}
  .explore_card_tags li{font-size:12px;}
  .explore_all_btn{font-size:20px;padding:14px 15px;}
  .explore_all_btn img{width:26px;height:24px;}
}
@media only screen and (max-width:768px){
  .all_project_filter{flex-direction:column;padding-bottom:10px;}
  .pill_filter_btn {padding:0 5px;}
  .process_item_num,.process_item_kr{font-size:12px;}
  
  .explore_list{grid-template-columns: 1fr;gap:10px;}
  .explore_card_tit{font-size:18px;}
}