.about_service_card{display:flex;flex-direction:column;}
.sub_hero_inner{height:615px;}
.about_company_hero_bg_text{display:block;position:absolute;left:0;bottom:0;width:100%;}
section.about_company_hero{position:relative;padding-bottom:0;}
.about_company_hero_tagline{position:absolute;right:30px;bottom:10px;font-family:'Zalando Sans Expanded',sans-serif;font-weight:700;font-size:29.9px;font-style:normal;line-height:46px;letter-spacing:-1px;text-align:end;color:var(--color-text-dark);}
.sub_hero.about_company_hero .sub_hero_mascot{position:absolute;top:auto;right:auto;bottom:0;left:50%;width:385px;height:532px;aspect-ratio:55/76;transform:translateX(-50%);}
.sub_hero.about_company_hero .sub_hero_mascot img{width:100%;height:100%;object-fit:cover;}

/* about pin section */
.about_pin_section{display:flex;overflow:hidden;position:relative;width:100%;height:100vh;justify-content:center;align-items:center;background:#000000;}
.about_pin_bg{display:block;overflow:hidden;position:absolute;top:0;left:0;width:100%;height:100%;}
.about_pin_video{display:block;position:absolute;top:-9%;left:0;width:100%;height:118%;object-fit:cover;will-change:transform;}
.about_pin_overlay{display:block;position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(to bottom,rgba(0,0,0,0.35) 0%,rgba(0,0,0,0.1) 50%,rgba(0,0,0,0.4) 100%);}
/* about pin panels — .about_pin_panel은 중앙 정렬(top/left/transform:translate(-50%,-50%))만 맡고,
   실제 스크롤 패럴럭스(yPercent)는 안쪽 .about_pin_panel_inner에 건다. 같은 요소에 센터링용 transform과
   GSAP yPercent를 같이 걸면 GSAP가 인라인 transform을 새로 써서 translate(-50%,-50%)가 깨지기 때문 */
.about_pin_panel{display:block;position:absolute;top:50%;left:50%;width:100%;max-width:1242px;padding:0 30px;transform:translate(-50%,-50%);text-align:center;opacity:0;}
.about_pin_panel.is_active{opacity:1;}
.about_pin_panel_inner{display:flex;flex-direction:column;align-items:center;gap:35px;will-change:transform;}
.about_pin_label{font-family:'Inter',sans-serif;font-weight:800;font-size:20px;line-height:1.4;letter-spacing:0;text-transform:uppercase;color:var(--color-white);}
.about_pin_tit{font-family:'Pretendard',sans-serif;text-align: center;font-family: Pretendard;font-size: 56px;font-style: normal;font-weight: 800;line-height: 130%; /* 78px */letter-spacing: -4%;color:var(--color-white);}
.about_pin_panel[data-panel="technology"] .about_pin_panel_inner{gap:20px;}


/* about mission vision — pin 섹션 다음에 오는 일반 스크롤 섹션. mission은 사진-텍스트, vision은 텍스트-사진 순으로 좌우 배치한다 */
.about_mv_section{display:flex;width:100%;padding:254px 0 270px;background:var(--color-bg);flex-direction:column;gap:286px;}
.about_mv_panel{display:flex;overflow:hidden;width:100%;justify-content:center;align-items:center;gap:100px;}
.about_mv_photo{display:flex;overflow:hidden;position:relative;border-radius:2px;flex-shrink:0;}
.about_mv_photo img{width:100%;height:100%;object-fit:cover;object-position: 65% 40%;}
.about_mv_panel[data-panel="mission"] .about_mv_photo{width: 586px;height: 632px;}
.about_mv_panel[data-panel="vision"] .about_mv_photo{width: 790px;height: 527px;aspect-ratio: 787/525;}
.about_mv_content{display:flex;max-width:580px;flex-direction:column;align-items:flex-start;gap:20px;margin-top:200px;}
.about_mv_tit{font-family:'Zalando Sans Expanded',sans-serif;font-weight:800;font-size:60px;line-height:1.4;text-transform:uppercase;color:var(--color-text-dark);}
.about_mv_divider{width:75px;height:4px;background:var(--color-white);mix-blend-mode:difference;}
.about_mv_desc{font-family:'Pretendard',sans-serif;font-weight:600;font-size:30px;line-height:1.4;letter-spacing:-0.04em;text-align:left;color:var(--color-text-dark);}

/* growth story */
.growth_story_section{display:flex;width:100%;padding:0 30px 160px;flex-direction:column;align-items:center;gap:100px;background:var(--color-bg);}

.growth_story_head{display:flex;flex-direction:column;align-items:center;gap:35px;text-align:center;}

.growth_story_label{font-family:'Inter',sans-serif;font-weight:800;font-size:20px;line-height:1;letter-spacing:-0.8px;text-transform:uppercase;color:var(--color-text-dark);}

.growth_story_tit{font-family:'Pretendard',sans-serif;font-weight:800;font-size:50px;font-style:normal;line-height:1.3;letter-spacing:-1.68px;color:var(--color-text-dark);}

.growth_story_desc{font-family:'Pretendard',sans-serif;font-weight:600;font-size:18px;font-style:normal;line-height:1.35;letter-spacing:-0.54px;color:var(--color-text-secondary);}

/* growth diagram — service.css의 .why_diagram(web_app_dev.html why_section)과 동일한 절대배치 타임라인 패턴을 4단계로 재사용한다.
   growth_step(검은 라벨 pill)은 왼쪽→오른쪽으로 갈수록 top이 낮아져 계단식으로 올라가고, growth_step_tree(나무 아이콘)도
   같은 순서로 커지면서 위로 올라간다. growth_step_text(설명)는 모든 컬럼이 같은 top에서 시작해 가로로 나란히 배치된다.
   좌표는 Figma 1860px 프레임(why_contents) 기준이다. 축(v_line)이 프레임 y=4에 있어 그 지점을 다이어그램 top:0으로 삼았고,
   따라서 아래 모든 y값은 Figma 좌표에서 4px을 뺀 값이다. x(left/width)는 컨테이너 폭 대비 %로, y(top)는 계단 높이라 px로 고정한다.
   pill과 컬럼은 Figma에서 서로 다른 그리드를 쓴다(pill 428.26px 간격 / 컬럼 430px 간격). pill이 컬럼의 자식이라
   컬럼 기준으로 밀어야 해서 growth_step의 left를 컬럼 폭 대비 음수 %로 컬럼마다 따로 보정했다 */
.growth_diagram{position:relative;width:100%;max-width:1860px;height:692px;}
.growth_axis{position:absolute;top:0;left:1.6129%;width:96.4247%;height:1px;background:var(--color-axis-line);}
.growth_axis::after{content:'';position:absolute;top:50%;right:-5px;width:0;height:0;border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:9px solid var(--color-axis-line);transform:translateY(-50%);}
.growth_axis_dot{display:block;position:absolute;top:0;z-index:6;width:8px;height:8px;border:1px solid #67635F;background:var(--color-bg);transform:translate(-50%,-50%);}
.growth_line_col_1{left:3.2796%;}
.growth_line_col_2{left:26.3978%;}
.growth_line_col_3{left:49.5161%;}
.growth_line_col_4{left:72.6344%;}
.growth_col{position:absolute;top:0;width:17.3118%;}
.growth_col::before{content:'';display:block;position:absolute;top:4px;left:4px;z-index:1;width:0;height:400px;border-left: 1px dashed var(--color-accent-red);transform:translateX(-50%);}
.growth_col::after{content:'';display:block;position:absolute;top:404px;left:4px;width:7px;height:7px;border-radius:50%;background:var(--color-accent-red);transform:translate(-50%,-50%);}
.growth_step{display:flex;position:absolute;z-index:2;width:146.9617%;height:54px;padding:0 15px;border-radius:2px;background:var(--color-text-dark);justify-content:flex-start;align-items:center;gap:7px;}
.growth_step_num{display:flex;width:22px;height:22px;border-radius:50%;background:var(--color-bg);font-family:'Inter',sans-serif;font-weight:800;font-size:17px;letter-spacing:-0.04em;color:var(--color-text-dark);justify-content:center;align-items:center;}
.growth_step_tit{font-family:'Inter',sans-serif;font-weight:600;font-size:22px;letter-spacing:-0.04em;color:var(--color-bg);}
.growth_step_tree{display:flex;position:absolute;z-index:3;justify-content:center;align-items:flex-end;}
.growth_step_tree img{display:block;width:100%;height:100%;object-fit:contain;}
.growth_step_text{position:absolute;top:388px;left:22px;width:100%;word-break:keep-all;overflow-wrap:break-word;}
.growth_step_text_tit{margin-bottom:15px;font-family:'Pretendard',sans-serif;font-weight:700;font-size:30px;font-style:normal;line-height:99%;letter-spacing:-1.5px;color:#222;}
.growth_step_text_list{padding-left:20px;}
.growth_step_text_list li{font-weight:500;font-size:15px;line-height:1.4;letter-spacing:-0.04em;text-indent:-10px;color:#67635F;opacity:0.8;}
.growth_step_text_list li + li{margin-top:10px;}
.growth_step_text_list li::before{content:'';display:inline-block;width:4px;height:4px;margin-top:-2px;margin-right:7px;border-radius:100%;background:var(--color-axis-line);vertical-align:middle;}

.growth_step_col_1{left:3.0645%;z-index:5;}
.growth_step_col_1 .growth_step{top:296px;left:-6.5217%;}
.growth_step_col_1 .growth_step_tree{top:135px;left:92.236%;width:38.8199%;aspect-ratio:25/37;}
.growth_step_col_2{left:26.1828%;z-index:4;}
.growth_step_col_2 .growth_step{top:232px;left:-7.0621%;}
.growth_step_col_2 .growth_step_tree{top:72px;left:86.9565%;width:38.8199%;aspect-ratio:25/37;}
.growth_step_col_3{left:49.3011%;z-index:3;}
.growth_step_col_3 .growth_step{top:168px;left:-7.6025%;}
.growth_step_col_3 .growth_step_tree{top:12px;left:82.2981%;width:38.8199%;aspect-ratio:25/37;}
.growth_step_col_4{left:72.4194%;z-index:2;}
.growth_step_col_4 .growth_step{top:104px;left:-8.1429%;}
.growth_step_col_4 .growth_step_tree{top:-75px;left:89.1304%;width:45.3416%;aspect-ratio:73/105;}


/* about history section — 위쪽 intro(카피+흩어진 사진)와 아래쪽 pin(연혁 리스트)으로 구성된다 */
.about_history_section{display:block;position:relative;width:100%;background:#111111;}

/* about history intro — 카피 전용 100vh 섹션. 사진 배경은 더 이상 이 안에 갇혀있지 않고
   position:sticky인 photo viewport가 맡아서, intro가 스크롤로 빠져나가는 동안에도 배경은 화면에
   계속 붙어있다가 about_history_pin이 그 위로 올라오면서 자연스럽게 다음 섹션으로 이어진다 */
.about_history_intro{display:grid;position:relative;z-index:2;width:100%;/*height:100vh;margin-top:-100vh;*/place-items:center;margin-bottom: 40px;}

/* about history photo viewport — urbanblue-fitness.com aboutUs "life_style" 섹션과 동일한 구조로,
   img_wrap(300vh) 안에 완전히 같은 이미지 묶음(g1/g2/g3, 각 100vh)을 3번 이어 붙여두고 그 wrap 전체를
   -200vh만큼 등속으로 계속 올렸다가(무한 repeat) 처음으로 되감는다 — 되감기 전후 화면 내용이 완전히
   같아서 이어붙인 티가 나지 않는다(가로 마퀴 루프를 세로로 뒤집은 것과 같은 원리).
   position:sticky로 화면에 붙어있고, 자기 흐름 공간 반납은 자신의 margin이 아니라 바로 다음 형제인
   about_history_intro의 margin-top:-100vh가 맡는다 */
.about_history_photo_viewport{display:block;overflow:hidden;position:sticky;top:0;left:0;z-index:1;width:100%;height:100vh;pointer-events:none;}
.about_history_photo_viewport::after{content:'';display:block;position:absolute;inset:0;z-index:2;background:linear-gradient(to bottom,#111111 0%,rgba(17,17,17,0) 35%,rgba(17,17,17,0) 65%,#111111 100%);pointer-events:none;}
.about_history_photo_wrap{display:block;position:absolute;inset:0;height:300vh;}
.about_history_photo_box{display:block;position:absolute;inset:0;height:100vh;}
.about_history_photo_box.is_g2{top:100vh;}
.about_history_photo_box.is_g3{top:200vh;}
.about_history_photo{display:block;position:absolute;width:clamp(80px,12vw,160px);aspect-ratio:160/218;object-fit:cover;opacity:0.3;transform:translateZ(0);will-change:transform;}
.about_history_photo.is_01{top:-3vh;left:32.6vw;}
.about_history_photo.is_02{top:16.5vh;right:28vw;}
.about_history_photo.is_03{top:26.5vh;left:15.5vw;}
.about_history_photo.is_04{top:42vh;left:35.5vw;}
.about_history_photo.is_05{bottom:14.8vh;left:10.4vw;}
.about_history_photo.is_06{bottom:27.8vh;right:10.3vw;}
.about_history_photo.is_07{bottom:3vh;right:31.3vw;}
.about_history_intro_text{display:flex;position:relative;z-index:3;flex-direction:column;align-items:center;text-align:center;gap:35px;}
.about_history_intro_kr{font-family:'Pretendard',sans-serif;font-weight:700;font-size:50px;font-style:normal;line-height:1.3;letter-spacing:-2.4px;color:var(--color-white);}
.about_history_intro_en{font-family:'Pretendard',sans-serif;font-weight:500;font-size:18px;font-style:normal;line-height:1.35;letter-spacing:-0.54px;color:var(--color-white);}
/* about history pin — sticky 사진 배경 위로 올라오는 연혁 콘텐츠. 더 이상 pin/scrub로 항목을 하나씩
   전환하지 않고, 연대(decade)별로 그룹핑된 타임라인이 일반 스크롤 흐름으로 이어진다 */
.about_history_pin{display:flex;position:relative;z-index:2;width:100%;padding:120px 0 160px;flex-direction:column;align-items:center;}

.about_history_label{display:block;position:relative;/*margin-bottom:60px;*/font-family:'Inter',sans-serif;font-weight:800;font-size:20px;line-height:1.2;letter-spacing:0;text-transform:uppercase;color:var(--color-white);}

/* about history decades */
.about_history_decades{display:flex;width:100%;max-width:1542px;padding:0 30px;flex-direction:column;gap:50px;}

.about_history_decade{display:flex;width:100%;flex-direction:column;align-items:center;gap:30px;}

.about_history_decade_label{display:flex;font-family:'Zalando Sans Expanded',sans-serif;font-weight:800;font-size:70px;font-style:normal;line-height:1.2;letter-spacing:-2px;text-align:center;text-transform:uppercase;color:var(--color-white);align-items:baseline;justify-content:center;}

.about_history_decade_label_suffix{font-size:42px;letter-spacing:-1px;}

/* about history timeline — 연대 하나(예: 2020's)에 속한 항목들을 세로로 이어주는 라인.
   line은 실제 DOM 요소라 추후 스크럽 애니메이션(길이가 자라나는 연출)을 붙이기도 쉽다 */
.about_history_decade_body{display:flex;position:relative;width:100%;padding:40px 0;flex-direction:column;gap:60px;}

.about_history_decade_line{display:block;position:absolute;top:0;left:50%;width:1px;height:100%;background:#212121;transform:translateX(-50%);}

.about_history_decade_line::after{content:'';display:block;position:absolute;bottom:0;left:50%;width:10px;height:10px;border:1px solid #3a3a3a;background:#000000;transform:translate(-50%,50%);}

/* about history row — 화면 중앙(연대 라인)을 기준으로 항목이 번갈아 좌/우에 온다. grid 2단(1fr 1fr)에서
   justify-self로 좌/우를 나누고, 연도 그룹의 dot이 항상 라인 쪽 끝에 오도록 is_right는 [dot-dash-year-dash] →
   설명, is_left는 설명 → [dash-year-dash-dot] 순서로 마크업한다 */
.about_history_row{display:grid;position:relative;width:100%;grid-template-columns:1fr 1fr;}

.about_history_row_inner{display:flex;align-items:center;gap:30px;}

.about_history_row.is_right .about_history_row_inner{grid-column:2;justify-self:start;}

.about_history_row.is_left .about_history_row_inner{grid-column:1;justify-self:end;}

.about_history_year_group{display:flex;align-items:center;gap:10px;}

.about_history_dash{display:block;width:40px;height:1px;background:#3a3a3a;}

.about_history_dot{display:block;width:10px;height:10px;border:1px solid #3a3a3a;background:#000000;}

.about_history_year{display:flex;align-items:center;justify-content:center;width:85px;font-family:'Inter',sans-serif;font-weight:700;font-size:32px;line-height:1.1;letter-spacing:-1px;color:var(--color-white);}

.about_history_desc_list{display:flex;width:550px;max-width:100%;flex-direction:column;gap:18px;}

.about_history_desc_item{display:block;position:relative;padding-left:15px;font-family:'Pretendard',sans-serif;font-weight:600;font-size:18px;line-height:1.3;letter-spacing:-0.5px;color:var(--color-white);}

.about_history_desc_item::before{content:'';display:block;position:absolute;top:8px;left:0;width:5px;height:5px;border-radius:50%;background:var(--color-white);}

span.service_tag{display:inline-block;margin-bottom:36px;padding:5px 12px;font-family:Inter;font-size:24px;font-style:normal;font-weight:600;line-height:1;letter-spacing:-0.4px;color:#FFF;background:#C0835D;}

span.service_tag.yellow{background:#C9B17F;}

/* about service */
.about_service_section{display:flex;width:100%;padding:160px 30px;flex-direction:column;align-items:center;gap:110px;background:var(--color-bg);}

.about_service_head{display:flex;flex-direction:column;align-items:center;gap:35px;text-align:center;}

.about_service_label{font-family:'Inter',sans-serif;font-weight:800;font-size:20px;line-height:1;letter-spacing:-0.8px;text-transform:uppercase;color:var(--color-text-dark);}

.about_service_right_card{display:flex;gap:17px;}

.about_service_tit{font-family:'Pretendard',sans-serif;font-weight:800;font-size:50px;font-style:normal;line-height:1.3;letter-spacing:-1.68px;color:var(--color-text-dark);}

.about_service_desc{font-family:'Pretendard',sans-serif;font-weight:600;font-size:18px;font-style:normal;line-height:1.35;letter-spacing:-0.54px;color:var(--color-text-secondary);}

.about_service_grid::before{content:'';position:absolute;top:70px;left:0;width:100%;height:1px;background:#AAA;}

.about_service_grid{display:flex;position:relative;padding-top:14px;gap:21px;}

.about_service_grid_divider{display:block;position:relative;width:1px;margin-top:-14px;flex-shrink:0;align-self:stretch;font-size:0;text-indent:-99999px;color:transparent;background:#dedede;}

.about_service_grid_divider::before{content:'';display:block;position:absolute;top:70px;left:50%;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border:1px solid #aaaaaa;background:var(--color-bg);}

/* about service card */
.about_service_card_image{display:block;overflow:hidden;position:relative;width:100%;height:400px;border-radius:2px;}

.about_service_card_image img{display:block;width:100%;height:100%;object-fit:cover;}

.about_service_card_arrow{display:block;position:absolute;right:0;bottom:0;width:95px;height:95px;background:url('../images/common/icon_detail_arrow_white.svg') no-repeat center/contain;transition:transform var(--transition-base);}

.about_service_card_image:hover .about_service_card_arrow{transform:scale(1.1) rotate(10deg);}

.about_service_card_text{padding:35px 25px 40px 30px;min-height:190px;border-radius:2px;background:var(--color-white);}

.about_service_card_tit{font-family:'Inter',sans-serif;font-weight:800;font-size:30px;letter-spacing:-1px;color:var(--color-text-dark);}

.about_service_card_desc{max-width:490px;margin-top:20px;font-family:'Pretendard',sans-serif;font-weight:500;font-size:18px;line-height:1.5;letter-spacing:-0.54px;word-break:keep-all;color:var(--color-service-desc);}

/* about award */
.about_award_section{display:flex;overflow:hidden;position:relative;width:100%;padding:160px 30px;flex-direction:column;align-items:center;gap:85px;background:var(--color-bg);}

.about_award_bg{display:block;position:absolute;top:0;left:0;width:100%;height:100%;opacity:0.8;pointer-events:none;}

.about_award_bg img{display:block;width:100%;height:100%;object-fit:cover;}

.about_award_head{display:flex;position:relative;z-index:1;flex-direction:column;align-items:center;gap:30px;text-align:center;}

.about_award_label{font-family:'Inter',sans-serif;font-weight:700;font-size:20px;line-height:1.2;text-transform:uppercase;color:var(--color-award-navy);}

.about_award_tit{font-family:'Pretendard',sans-serif;font-weight:700;font-size:50px;letter-spacing:-2px;color:var(--color-award-navy);}

.about_award_desc{max-width:975px;font-family:'Pretendard',sans-serif;font-weight:500;font-size:16px;line-height:1.5;letter-spacing:-0.48px;color:var(--color-text-secondary);}

/* about award grid */
.about_award_grid{display:grid;overflow:visible;position:relative;z-index:1;width:100%;max-width:1060px;grid-template-columns:repeat(3,1fr);gap:70px;}

/* about_award_grid는 데스크탑에서는 일반 그리드로 동작하고, 760px 이하(모바일)에서만 스와이퍼로 전환된다.
   swiper-wrapper를 display:contents로 지워서 데스크탑에서는 about_award_card가 그리드의 직접 자식처럼
   동작하게 하고, 모바일 구간에서만 이 규칙을 풀어 원래 swiper 레이아웃(flex)이 살아나게 한다 */
.about_award_grid .swiper-wrapper{display:contents;}

.about_award_card{display:flex;flex-direction:column;align-items:center;gap:35px;}

.about_award_card_image{display:block;overflow:hidden;width:100%;height:434px;border-radius:5px;}

.about_award_card_image img{display:block;width:100%;height:100%;object-fit:cover;}

.about_award_card_info{display:flex;width:100%;align-items:center;justify-content:space-between;gap:10px;}

.about_award_laurel{display:block;width:40px;height:94px;flex-shrink:0;}

.about_award_card_text{display:flex;flex-direction:column;align-items:center;gap:15px;text-align:center;}

.about_award_badge{font-family:'Pretendard',sans-serif;font-weight:700;font-size:14px;line-height:1;letter-spacing:-0.28px;color:var(--color-award-gold);}

.about_award_name{font-family:'Inter',sans-serif;font-weight:700;font-size:20px;line-height:1;letter-spacing:-0.8px;color:var(--color-text-dark);}

.about_award_desc_small{font-family:'Pretendard',sans-serif;font-weight:500;font-size:12px;line-height:1.25;letter-spacing:-0.48px;color:var(--color-text-secondary);}

/* about web award */
.about_webaward_section{display:flex;width:100%;padding:160px 30px;flex-direction:column;align-items:center;gap:60px;background:var(--color-bg);}
.about_webaward_top{display:flex;flex-direction:column;align-items:center;gap:35px;}
.about_webaward_label{font-family:'Inter',sans-serif;font-weight:800;font-size:20px;line-height:1.2;text-transform:uppercase;color:var(--color-text-dark);}
.about_webaward_trophy{display:block;width:133px;height:120px;object-fit:contain;mix-blend-mode:darken;}

/* about web award list */
.about_webaward_list{display:flex;width:100%;max-width:1500px;flex-direction:column;gap:24px;border-bottom:1px solid #dddddd;}
.about_webaward_item{display:flex;width:100%;padding-top:24px;border-top:1px solid #dddddd;align-items:center;justify-content:space-between;gap:20px;opacity:0.5;transition:opacity var(--transition-base);}
.about_webaward_item.is_active,.about_webaward_item:hover{opacity:1;}
.about_webaward_item_row{display:flex;align-items:baseline;gap:12px;}
.about_webaward_item_name{font-family:'Pretendard',sans-serif;font-weight:700;font-size:50px;letter-spacing:-4px;color:var(--color-text-dark);white-space:nowrap;}
.about_webaward_item_year{font-family:'Inter',sans-serif;font-weight:500;font-size:20px;letter-spacing:-2px;color:var(--color-text-dark);mix-blend-mode:difference;white-space:nowrap;}
.about_webaward_item_badge{display:flex;width:40px;height:40px;align-items:center;justify-content:center;flex-shrink:0;}
.about_webaward_item_badge img{display:block;width:100%;height:100%;object-fit:contain;}

/* about web award tooltip — 목록 밖에 하나만 둔 공용 썸네일 미리보기(마우스를 따라다닌다). about_award(글로벌 어워드)의
   .about_award_bg 등과 겹치지 않도록 z-index를 넉넉히 준다 */
.about_webaward_tooltip{display:block;position:fixed;top:0;left:0;z-index:100;width:360px;height:350px;opacity:0;visibility:hidden;pointer-events:none;transform-origin:center center;transition:opacity var(--transition-base),visibility var(--transition-base);}
.about_webaward_tooltip.is_active{opacity:1;visibility:visible;}
.about_webaward_tooltip_img{display:block;width:100%;height:100%;object-fit:cover;}
/* about cert */
.about_cert_section{display:flex;width:100%;padding:160px 30px;flex-direction:column;align-items:center;gap:105px;background:var(--color-bg);}
.about_cert_head{display:flex;max-width:1006px;flex-direction:column;align-items:center;gap:35px;text-align:center;}
.about_cert_label{font-family:'Inter',sans-serif;font-weight:800;font-size:20px;line-height:1.2;text-transform:uppercase;color:var(--color-text-dark);}
.about_cert_tit{font-family:'Pretendard',sans-serif;font-weight:800;font-size:56px;line-height:1.35;letter-spacing:-1.68px;color:var(--color-text-dark);}
/* about cert grid */
.about_cert_grid{display:flex;position:relative;width:100%;padding:0 55px;gap:55px;}
/* about_cert_line/about_cert_dot/about_cert_divider — 순수 장식용 빈 span이라 CMS에 올리면 내용 없는 태그로 인식돼
   자동으로 제거되는 문제가 있었다(.about_service_grid_divider와 동일한 문제). 그래서 안에 더미 텍스트를 넣어 채우고,
   font-size:0/color:transparent/text-indent로 화면에는 보이지 않게 숨긴다 */
.about_cert_line{display:block;position:absolute;left:0;width:100%;height:1px;font-size:0;text-indent:-99999px;color:transparent;background:#aaaaaa;}
.about_cert_line.is_top{top:0;}
.about_cert_line.is_bottom{bottom:0;}
.about_cert_dot{display:block;position:absolute;top:0;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border:1px solid #aaaaaa;font-size:0;text-indent:-99999px;color:transparent;background:var(--color-bg);}
.about_cert_dot.is_bottom{top:100%;}
.about_cert_divider{display:block;width:1px;flex-shrink:0;align-self:stretch;font-size:0;text-indent:-99999px;color:transparent;background:#aaaaaa;}
.about_cert_divider.is_light{background:#dedede;}
.about_cert_item{display:flex;width:25%;padding:33px 0;flex-direction:column;align-items:center;gap:25px;}
.about_cert_image{display:block;overflow:hidden;width:100%;aspect-ratio:346/484;}
.about_cert_image img{display:block;width:100%;height:100%;object-fit:cover;}
.about_cert_text{display:flex;flex-direction:column;align-items:center;gap:8px;}
.about_cert_name{font-family:'Pretendard',sans-serif;font-weight:800;font-size:20px;line-height:1.35;letter-spacing:-0.4px;text-align:center;color:var(--color-text-dark);white-space:nowrap;}
.about_cert_org{font-family:'Pretendard',sans-serif;font-weight:600;font-size:15px;line-height:1;letter-spacing:-0.45px;color:var(--color-text-secondary);white-space:nowrap;}

/* about clients */
.about_clients_section{display:flex;width:100%;padding:160px 30px;flex-direction:column;align-items:center;gap:60px;background:var(--color-bg);}
.about_clients_head{display:flex;flex-direction:column;align-items:center;gap:35px;text-align:center;}
.about_clients_label{font-family:'Inter',sans-serif;font-weight:800;font-size:20px;line-height:1.2;text-transform:uppercase;color:var(--color-text-dark);}
.about_clients_tit{font-family:'Pretendard',sans-serif;font-weight:800;font-size:56px;line-height:1.3;letter-spacing:-1.68px;color:var(--color-text-dark);}
.about_clients_logos{display:block;width:100%;max-width:1860px;height:auto;}
/* about_01_new.html — mobile (about_hero(구버전)·about_award/webaward/cert/clients는 이 페이지에서 쓰지 않아 제외) */

/* PC 비율 축소 (1025px~1920px) — 1920 디자인 기준 px를 vw로 변환해 레이아웃 재배치 없이 비율만 축소한다. 계산식: vw = px / 1920 * 100
   font-size는 RESPONSIVE-VW-GUIDE.md의 12px 하한 규칙에 따라 max(12px, Nvw)로 감싼다(1025px에서 20px 이하 폰트가 11px 밑으로 내려가는 것을 막는다).
   company.html이 쓰는 섹션(hero · pin · mission/vision · growth · history · service_tag · service)만 대상으로 한다 —
   같은 파일의 about_award/webaward/cert/clients는 company.html에서 쓰지 않아 제외했다 */
@media screen and (min-width:1025px) and (max-width:1920px){
    /* about company hero */
    .sub_hero_inner{height:32.0313vw;}
    .sub_hero.about_company_hero .sub_hero_mascot{width:20.0521vw;height:27.7083vw;}
    .about_company_hero_tagline{right:1.5625vw;bottom:0.5208vw;font-size:max(12px,1.5573vw);line-height:2.3958vw;letter-spacing:-0.0521vw;}

    /* about pin section */
    .about_pin_panel{max-width:64.6875vw;padding:0 1.5625vw;}
    .about_pin_panel_inner{gap:1.8229vw;}
    .about_pin_tit{font-size:max(12px,2.9167vw);letter-spacing:-0.125vw;}
    .about_pin_panel[data-panel="technology"] .about_pin_panel_inner{gap:1.0417vw;}

    /* about mission vision */
    .about_mv_section{padding:13.2292vw 0 14.0625vw;gap:14.8958vw;}
    .about_mv_panel{gap:5.2083vw;}
    .about_mv_panel[data-panel="mission"] .about_mv_photo{width:30.5208vw;height:32.9167vw;}
    .about_mv_panel[data-panel="vision"] .about_mv_photo{width:41.1458vw;height:27.4479vw;}
    .about_mv_content{max-width:30.2083vw;margin-top:10.4167vw;gap:1.0417vw;}
    .about_mv_tit{font-size:max(12px,3.125vw);}
    .about_mv_divider{width:3.9063vw;height:0.2083vw;}
    .about_mv_desc{font-size:max(12px,1.5625vw);}

    /* growth story */
    .growth_story_section{padding:0 1.5625vw 8.3333vw;gap:5.2083vw;}
    .growth_story_head{gap:1.8229vw;}
    .growth_story_label{font-size:max(12px,1.0417vw);letter-spacing:-0.0417vw;}
    .growth_story_tit{font-size:max(12px,2.6042vw);letter-spacing:-0.0875vw;}

    /* growth diagram */
    .growth_diagram{max-width:96.875vw;height:max(450px,36.042vw);}
    .growth_axis_dot{width:0.4167vw;height:0.4167vw;}
    .growth_col::before{height:20.8333vw;}
    .growth_col::after{top:21.042vw;left:0.208vw;width:0.365vw;height:0.365vw;}
    .growth_step{height:2.8125vw;padding:0 0.7813vw;gap:0.3646vw;}
    .growth_step_num{width:1.1458vw;height:1.1458vw;font-size:max(12px,0.8854vw);}
    .growth_step_tit{font-size:max(12px,1.1458vw);}
    .growth_step_tree{right:1.8229vw;}
    .growth_step_text{top:20.2083vw;left:0.9375vw;}
    .growth_step_text_tit{margin-bottom:0.7813vw;font-size:max(12px,1.5625vw);letter-spacing:-0.0781vw;}
    .growth_step_text_list{padding-left:1.0417vw;}
    .growth_step_text_list li{font-size:max(12px,0.7813vw);text-indent:-0.5208vw;}
    .growth_step_text_list li+li{margin-top:0.5208vw;}
    .growth_step_text_list li::before{width:0.2083vw;height:0.2083vw;margin-top:-0.1042vw;margin-right:0.3646vw;}
    .growth_step_col_1 .growth_step{top:12.5vw;}
    .growth_step_col_1 .growth_step_tree{top:7.0313vw;width:6.5104vw;height:9.6354vw;}
    .growth_step_col_2 .growth_step{top:9.375vw;}
    .growth_step_col_2 .growth_step_tree{top:4.1667vw;width:6.5104vw;height:9.6354vw;}
    .growth_step_col_3 .growth_step{top:6.25vw;}
    .growth_step_col_3 .growth_step_tree{top:1.0417vw;width:6.5104vw;height:9.6354vw;}
    .growth_step_col_4 .growth_step{top:3.125vw;}
    .growth_step_col_4 .growth_step_tree{top:-2.6042vw;width:7.8125vw;height:10.9375vw;}

    /* about history intro */
    .about_history_intro_text{gap:2.0833vw;}
    .about_history_intro_kr{font-size:max(12px,2.6042vw);letter-spacing:-0.125vw;}
    .about_history_intro_en{font-size:max(12px,0.9375vw);letter-spacing:-0.0281vw;}

    /* about history pin */
    .about_history_pin{padding:6.25vw 0 8.3333vw;}
    .about_history_label{margin-bottom:3.125vw;font-size:max(12px,1.0417vw);}

    /* about history decades */
    .about_history_decades{max-width:84.3125vw;padding:0 1.5625vw;gap:2.6042vw;}
    .about_history_decade{gap:1.5625vw;}
    .about_history_decade_label{font-size:max(12px,3.6458vw);letter-spacing:-0.1042vw;}
    .about_history_decade_label_suffix{font-size:max(12px,2.1875vw);letter-spacing:-0.0521vw;}
    .about_history_decade_body{padding:2.0833vw 0;gap:3.125vw;}
    .about_history_decade_line::after{width:0.5208vw;height:0.5208vw;}

    /* about history row */
    .about_history_row_inner{gap:1.5625vw;}
    .about_history_year_group{gap:0.5208vw;}
    .about_history_dash{width:2.0833vw;}
    .about_history_dot{width:0.5208vw;height:0.5208vw;}
    .about_history_year{width:4.4271vw;font-size:max(12px,1.6667vw);letter-spacing:-0.0521vw;}
    .about_history_desc_list{width:28.6458vw;gap:0.9375vw;}
    .about_history_desc_item{padding-left:0.7813vw;font-size:max(12px,0.9375vw);letter-spacing:-0.026vw;}
    .about_history_desc_item::before{top:0.4167vw;width:0.2604vw;height:0.2604vw;}

    /* about service tag */
    span.service_tag{margin-bottom:1.875vw;padding:0.2604vw 0.625vw;font-size:max(12px,1.25vw);letter-spacing:-0.0208vw;}

    /* about service */
    .about_service_section{padding:8.3333vw 1.5625vw;gap:5.7292vw;}
    .about_service_head{gap:1.8229vw;}
    .about_service_label{font-size:max(12px,1.0417vw);letter-spacing:-0.0417vw;}
    .about_service_tit{font-size:max(12px,2.6042vw);letter-spacing:-0.0875vw;}
    .about_service_desc{font-size:max(12px,0.9375vw);letter-spacing:-0.0281vw;}
    .about_service_right_card{gap:0.8854vw;}
    .about_service_card_wrap>div+div{margin-left:0.8854vw;}
    .about_service_grid::before{top:3.6458vw;}
    .about_service_grid{padding-top:0.7292vw;gap:1.0938vw;}
    .about_service_grid>.about_service_card:first-child{padding-right:1.0938vw;}
    .about_service_grid_divider{margin-top:-0.7292vw;}
    .about_service_grid_divider::before{top:3.6458vw;width:0.4688vw;height:0.4688vw;margin:-0.2344vw 0 0 -0.2344vw;}

    /* about service card */
    .about_service_card_image{height:20.8333vw;}
    .about_service_card_arrow{width:4.9479vw;height:4.9479vw;}
    .about_service_card_text{min-height:9.8958vw;padding:1.8229vw 1.3021vw 2.0833vw 1.5625vw;}
    .about_service_card_tit{font-size:max(12px,1.5625vw);letter-spacing:-0.0521vw;}
    .about_service_card_desc{max-width:25.5208vw;margin-top:1.0417vw;font-size:max(12px,0.9375vw);letter-spacing:-0.0281vw;}
}

@media (max-width:1024px){
    /* about company hero */
    .about_company_hero .sub_hero_tit_inner{font-size:clamp(36px, 4.31vw, 64px);}
    .about_company_hero_bg_text{font-size:clamp(60px, 15.41vw, 160px);}
    .about_company_hero_tagline{font-size: 19.754px;font-style: normal; font-weight: 700;line-height: 100%;letter-spacing: -0.823px;}
    .sub_hero_inner {height: clamp(400px, 68vw, 615px);}
    .sub_hero.about_company_hero .sub_hero_mascot{width:clamp(177px, 30vw, 280px);height:clamp(245px, 42vw, 400px);display:block;}

    /* about pin */
    .about_pin_section{max-height:720px;}
    .about_pin_label{font-size:clamp(12px, 0.31vw, 14px);}
    .about_pin_tit{font-size: 26px;font-style: normal;font-weight: 800;line-height: 135%; /* 35.1px */letter-spacing: -1.12px;word-break: keep-all;}
    .about_pin_panel{padding:0 clamp(16px, 0.62vw, 20px);}
    .about_pin_panel_inner{gap:clamp(16px, 0.62vw, 20px);}

    /* about mission vision */
    .about_mv_section{padding:clamp(40px, 8vw, 80px) 15px;gap: 60px;}
    .about_mv_panel {gap:20px;align-items: flex-end;}
    .about_mv_content{flex:1;max-width:none;margin: auto 0;}
    .about_mv_panel[data-panel="mission"] .about_mv_photo {width:50%;height:auto;aspect-ratio: 345 / 400;}
    .about_mv_tit{font-size:clamp(28px,4vw,38px);}
    .about_mv_divider{width:50px;height:3px;}
    .about_mv_desc{font-size:clamp(15px,2.2vw,20px);}
    .about_mv_panel[data-panel="vision"] .about_mv_photo {aspect-ratio: 3/2;width:55%;height:auto;}

    /* growth story */
    .growth_story_section{padding:clamp(60px, 3.08vw, 80px) clamp(16px, 0.62vw, 20px);gap:clamp(40px, 1.54vw, 50px);}
    .growth_story_tit{font-size:clamp(26px, 0.92vw, 32px);}
    .growth_story_label{font-size:clamp(14px, 0.31vw, 14px);}
    .growth_story_head{gap:clamp(16px, 0.62vw, 20px);}

    /* growth diagram — 세로 스택 */
    .growth_col{position:relative;left:0 !important;width:100%;}
    .growth_step{position:relative;top:0 !important;height:clamp(40px, 0.62vw, 44px);}
    .growth_step_col_1 .growth_step_tree{top: -51px;left: auto;right: 0;width: 64px;}
    .growth_step_col_2 .growth_step_tree{top: -51px;left: auto;right: 0;width: 64px;}
    .growth_step_col_3 .growth_step_tree{top: -51px;left: auto;right: 0;width: 64px;}
    .growth_step_col_4 .growth_step_tree{top: -51px;left: auto;right: 0;width: 64px;}
    
    .why_inner{padding: 0 15px;}
    .growth_diagram{display:flex;position:static;height:auto;border-bottom:0;flex-direction:column;gap:40px;}
    .growth_axis,.growth_axis_dot{display:none;}
    .growth_col{position:relative;top:auto;left:auto;width:100%;padding-left:20px;}
    .growth_col::before{top:18px;bottom:-58px;left:0;height:auto;}
    .growth_col:last-child::before{display:none;}
    .growth_col::after{top:18px;left:0;width:7px;height:7px;transform:translate(-50%,-50%);}

    /* why step (pill) — PC는 높이 고정 absolute pill, 모바일은 padding으로 높이가 잡히는 흐름 요소.
    번호 배지도 채움형(밝은 배경 + 어두운 숫자)에서 테두리형(투명 배경 + 흰 숫자)으로 바뀐다 */
    .growth_step{position:static;height:auto;padding:10px;gap:7px;width:100%;}
    .growth_step_num{width:16px;height:16px;font-size:10px;}
    .growth_step_tit{font-weight:500;font-size:15px;line-height:1;}

    /* why step text — PC는 pill과 떨어진 absolute 텍스트, 모바일은 pill 바로 아래에 붙는 흐름 요소. 줄바꿈은 PC 기준으로 넣은 <br>이라 모바일에선 자연 줄바꿈에 맡긴다 */
    .growth_step_text{position:static;top:auto;left:auto;width:100%;margin-top:15px;padding-left:10px;}
    .growth_step_text_tit{margin-bottom:10px;font-size:16px;line-height:0.99;letter-spacing:-0.05em;}
    .growth_step_text_list{padding-left:12px;}
    .growth_step_text_list>li{font-size:13px;line-height:1.4;letter-spacing:-0.05em;opacity:0.8;}
    .why_step_text_desc br{display:none;}

    /* about history */
    .about_history_pin{padding:clamp(60px, 1.54vw, 70px) 0 clamp(80px, 3.08vw, 100px);}
    .about_history_decades{padding:0 clamp(16px, 0.62vw, 20px);gap:clamp(30px, 1.54vw, 40px);}
    .about_history_decade{gap:clamp(16px, 0.62vw, 20px);}
    .about_history_decade_label{font-size:clamp(32px, 1.85vw, 44px);}
    .about_history_decade_body{padding:clamp(24px, 0.92vw, 30px) 0;gap:clamp(24px, 0.92vw, 30px);}
    .about_history_decade_line{display:none;}
    .about_history_row{grid-template-columns:1fr;}
    .about_history_row.is_right .about_history_row_inner,
    .about_history_row.is_left .about_history_row_inner{grid-column:1;justify-self:stretch;flex-direction:column;align-items:flex-start;width:100%;gap:clamp(8px, 0.31vw, 10px);}
    .about_history_year_group{order:-1;}
    .about_history_dash,.about_history_dot{display:none;}
    .about_history_desc_list{width:100%;}
    .about_history_desc_item{font-size:clamp(12px, 0.15vw, 15px);}
    .about_history_intro_kr{font-size:clamp(24px, 0.62vw, 28px);}
    .about_history_intro_en{font-size:clamp(13px, 0.15vw, 14px);}

    /* about service */
    .about_service_section{padding:clamp(60px, 3.08vw, 80px) clamp(16px, 0.62vw, 20px);gap:clamp(40px, 1.54vw, 50px);}
    .about_service_label{font-size:clamp(12px, 0.31vw, 14px);}
    .about_service_tit{font-size:clamp(26px, 0.92vw, 32px);}
    .about_service_desc{font-size:clamp(13px, 0.15vw, 14px);}
    .about_service_grid{flex-direction:column;gap:clamp(24px, 0.92vw, 30px);padding-top:0;}
    .about_service_grid::before{display:none;}
    .about_service_grid_divider{display:none;}
    .about_service_right_card{flex-direction:column;gap:clamp(24px, 0.92vw, 30px);}
    .about_service_card_image{height:auto;}
    .about_service_card_arrow{width:clamp(50px, 1.54vw, 60px);height:clamp(50px, 1.54vw, 60px);}
    .about_service_card_text{padding:clamp(20px, 0.62vw, 24px) clamp(16px, 0.62vw, 20px);min-height:auto;}
    .about_service_card_tit{font-size:clamp(18px, 0.62vw, 22px);}
    .about_service_card_desc{font-size:clamp(13px, 0.15vw, 14px);margin-top:clamp(8px, 0.31vw, 10px);}
    span.service_tag{font-size:clamp(13px, 0.31vw, 15px);margin-bottom:clamp(12px, 0.62vw, 16px);padding:clamp(5px, 0.15vw, 6px) clamp(8px, 0.31vw, 10px);}
    .about_history_decade_label_suffix {font-size: 16px;letter-spacing: -1px;margin-left: 3px;}
}
@media (max-width:800px){
    .about_company_hero_tagline{max-width: 140px;}
}
@media (max-width:768px){
    .growth_story_tit {font-size: 26px; font-style: normal;font-weight: 800;line-height: 130%; letter-spacing: -0.78px;} 
    .growth_story_label {font-size: 14px;font-weight: 600; line-height: 130%; /* 18.2px */letter-spacing: -0.7px; text-transform: uppercase;}
    .growth_story_head {gap: 20px;}
    .growth_story_section { gap: 50px;}
    .growth_step_text_list { text-align: left;}
    .growth_step_text_list li {color: #67635F;font-family: Pretendard;font-size: 13px;font-style: normal;font-weight: 500;line-height: 145%; /* 18.85px */letter-spacing: -0.65px;}
    .growth_step_text_list li + li { margin-top: 3px;}
    p.growth_step_text_tit { color: #222; font-family: Pretendard;font-size: 16px;font-style: normal;font-weight: 700;line-height: 99%; /* 15.84px */letter-spacing: -0.8px;text-align: left; margin-bottom: 10px;}
    .growth_step_tit {font-size: 15px; font-style: normal; font-weight: 500;line-height: 150%; /* 22.5px */letter-spacing: -0.6px;}
    span.growth_step_num {font-size: 10px;font-style: normal;font-weight: 800;line-height: 150%; /* 15px */letter-spacing: -0.4px;width: 16px; height: 16px;}


    .about_mv_panel {flex-direction:column;}
    .about_mv_panel:nth-child(2){flex-direction: column-reverse;}
    .about_mv_panel[data-panel="mission"] .about_mv_photo,.about_mv_panel[data-panel="vision"] .about_mv_photo {width:100%;max-width: 400px;}
    .about_mv_content{width:100%;gap:12px;}
    .about_mv_divider{width:40px;height:2px;}
    .about_mv_panel:nth-child(2) .about_mv_content{width: 80%;align-items: flex-end;}
    .about_mv_panel:nth-child(2) .about_mv_desc{text-align:right;}
}