/* 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_right_card .about_service_card_wrap{display:flex;}
.about_service_card_wrap>div+div{margin-left:17px;}
.about_service_tit{font-family:'Pretendard',sans-serif;font-weight:800;font-size:56px;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 tag — Startup/Growth Stage 카드 안에 얹는 컬러 pill 라벨 */
span.service_tag{display:inline-block;margin-bottom:36px;padding:8px 12px;font-family:'Inter',sans-serif;font-weight:700;font-size:24px;font-style:normal;line-height:1;letter-spacing:-0.3px;color:#ffffff;background:#c0835d;}
span.service_tag.yellow{background:#c9b17f;}

.about_service_grid::before{content:'';position:absolute;top:70px;left:0;width:100%;height:1px;background:#aaaaaa;}
.about_service_grid{display:flex;position:relative;padding-top:14px;gap:21px;}
.about_service_grid>.about_service_card:first-child{padding-right:21px;}
.about_service_grid_divider{display:block;position:relative;align-self:stretch;flex-shrink:0;width:1px;margin-top:-14px;background:#dedede;font-size:0;color:transparent;text-indent:-99999px;}
.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_chip{display:inline-flex;position:absolute;top:0;align-items:center;justify-content:center;padding:10px;font-family:'Inter',sans-serif;font-weight:700;font-size:24px;letter-spacing:-0.96px;color:var(--color-white);}
.about_service_chip.is_platform{left:0;background:var(--color-label-platform);}
.about_service_chip.is_digital{left:630px;background:var(--color-label-digital);}
.about_service_line{display:block;position:absolute;top:54px;left:0;width:100%;height:1px;background:#aaaaaa;}
.about_service_vline{display:block;position:absolute;top:0;bottom:0;left:615px;width:1px;background:#dedede;}
.about_service_dot{display:block;position:absolute;top:54px;left:615px;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{min-height:200px;padding:40px 30px;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;color:var(--color-service-desc);word-break:keep-all;}

/* 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:20px;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:#111111;}
.about_award_tit{font-family:'Pretendard',sans-serif;font-weight:800;font-size:50px;letter-spacing:-4%;color:#111111;}
.about_award_desc{max-width:734px;font-family:'Pretendard',sans-serif;font-weight:500;font-size:18px;line-height:1.5;letter-spacing:-0.36px;color:var(--color-text-secondary);word-break:keep-all;}

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

/* about_award_grid는 데스크탑에서는 일반 그리드로 동작하고, 1024px 이하(모바일)에서만 스와이퍼로 전환된다.
   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:#A17412;}
.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:15px;line-height:1.25;letter-spacing:-0.48px;color:var(--color-text-secondary);}

/* about web award */
.about_webaward_section{display:flex;width:100%;padding:180px 30px 0;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;border-top:1px solid #111;}
.about_webaward_item{display:flex;width:100%;padding:13px 0;align-items:center;justify-content:space-between;gap:20px;border-bottom:1px solid #dddddd;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;align-items: flex-start;padding-left: 10px;}
.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);white-space:nowrap;line-height: 250%;}
.about_webaward_item_badge{display:flex;flex-shrink:0;align-items:center;justify-content:center;width:80px;height:80px;}
.about_webaward_item_badge img{display:block;width:100%;height:100%;object-fit:contain;}
.about_webaward_item.is_active .about_webaward_item_year, .about_webaward_item:hover .about_webaward_item_year { color: var(--color-text-dark);}


/* 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{display:block;position:absolute;left:0;width:100%;height:1px;background:#aaaaaa;font-size: 0;color: transparent;text-indent: -99999px;}
.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;background:var(--color-bg); font-size: 0; color: transparent; text-indent: -99999px;}
.about_cert_dot.is_bottom{top:100%;}
.about_cert_divider{display:block;align-self:stretch;flex-shrink:0;width:1px;background:#aaaaaa; font-size: 0; color: transparent; text-indent: -99999px;}
.about_cert_divider.is_light{background:#dedede;}
.about_cert_item{display:flex;width:25%;flex-direction:column;align-items:center;gap:25px;padding:33px 0;}
.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:120px;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:50px;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_cert_item + .about_cert_item {position: relative;}
.about_cert_item + .about_cert_item::before {content: "";width: 1px;height: 100%;position: absolute;background: #AAA; left: -14px;top: 0;}

/* PC 비율 축소 (1025px~1920px) — 1920 디자인 기준 px를 vw로 변환해 레이아웃 재배치 없이 비율만 축소한다. 계산식: vw = px / 1920 * 100
   award.html이 쓰는 섹션(award · webaward · cert · clients)만 변환했다. about service 섹션은 award.html에서 쓰지 않아 대상에서 제외했다.
   font-size는 RESPONSIVE-VW-GUIDE.md에 따라 1025px 구간에서 12px 아래로 내려가지 않게 max(12px, Nvw) 하한을 건다 */
@media screen and (min-width:1025px) and (max-width:1920px){
  /* about award */
  .about_award_section{padding:8.3333vw 1.5625vw;gap:4.4271vw;}
  .about_award_head{gap:1.0417vw;}
  .about_award_label{font-size:max(12px,1.0417vw);}
  .about_award_tit{font-size:max(12px,2.6042vw);}
  .about_award_desc{max-width:38.2292vw;font-size:max(12px,0.9375vw);}

  /* about award grid */
  .about_award_grid{max-width:62.7083vw;gap:7.2917vw;}
  .about_award_card{gap:1.8229vw;}
  .about_award_card_image{height:22.6042vw;border-radius:0.2604vw;}
  .about_award_card_info{gap:0.5208vw;}
  .about_award_laurel{width:2.0833vw;height:4.8958vw;}
  .about_award_card_text{gap:0.7813vw;}
  .about_award_badge{font-size:max(12px,0.7292vw);}
  .about_award_name{font-size:max(12px,1.0417vw);}
  .about_award_desc_small{font-size:max(12px,0.7813vw);}

  /* about web award */
  .about_webaward_section{padding:9.375vw 1.5625vw 0;gap:3.125vw;}
  .about_webaward_top{gap:1.8229vw;}
  .about_webaward_label{font-size:max(12px,1.0417vw);}
  .about_webaward_trophy{width:6.9271vw;height:6.25vw;}

  /* about web award list */
  .about_webaward_list{max-width:78.125vw;}
  .about_webaward_item{padding:0.6771vw 0;gap:1.0417vw;}
  .about_webaward_item_row{padding-left:0.5208vw;gap:0.625vw;}
  .about_webaward_item_name{font-size:max(12px,2.6042vw);}
  .about_webaward_item_year{font-size:max(12px,1.0417vw);}
  .about_webaward_item_badge{width:4.1667vw;height:4.1667vw;}
  .about_webaward_tooltip{width:18.75vw;height:18.2292vw;}

  /* about cert */
  .about_cert_section{padding:8.3333vw 1.5625vw;gap:5.4688vw;}
  .about_cert_head{max-width:52.3958vw;gap:1.8229vw;}
  .about_cert_label{font-size:max(12px,1.0417vw);}
  .about_cert_tit{font-size:max(12px,2.9167vw);}

  /* about cert grid */
  .about_cert_grid{padding:0 2.8646vw;gap:2.8646vw;}
  .about_cert_dot{width:0.4688vw;height:0.4688vw;margin:-0.2344vw 0 0 -0.2344vw;}
  .about_cert_item{padding:1.7188vw 0;gap:1.3021vw;}
  .about_cert_item+.about_cert_item::before{left:-0.7292vw;}
  .about_cert_text{gap:0.4167vw;}
  .about_cert_name{font-size:max(12px,1.0417vw);}
  .about_cert_org{font-size:max(12px,0.7813vw);}

  /* about clients */
  .about_clients_section{padding:8.3333vw 1.5625vw;gap:6.25vw;}
  .about_clients_head{gap:1.8229vw;}
  .about_clients_label{font-size:max(12px,1.0417vw);}
  .about_clients_tit{font-size:max(12px,2.9167vw);}
  .about_clients_logos{max-width:96.875vw;}
}

/* about award — mobile swiper. 브레이크포인트는 sub.js의 aboutAwardMobileQuery(max-width:1024px)와 반드시 같이 움직여야 한다.
   한쪽만 바뀌면 그 구간에서 Swiper는 초기화되는데 wrapper가 display:contents로 남아 슬라이드 이동이 안 먹는다 */
@media only screen and (max-width:1024px){
  .about_award_grid{gap:20px;overflow:hidden;}
  .about_award_card_image{aspect-ratio: 119 / 171;height:auto;}
  .about_award_section{padding: clamp(75px,17vw,160px) 15px;gap:60px;}
  .about_award_label{font-size:clamp(14px,2.2vw,20px);}
  .about_award_tit{font-size:clamp(26px,4.8vw,50px);}
  .about_award_desc{font-size:clamp(14px,2vw,18px);}
  .about_award_card_text{gap:10px;}
  .about_award_badge{font-size:12px;}
  .about_award_name{font-size:16px;}
  .about_award_desc_small{font-size:10px;}
  .about_award_laurel{width:33px;height:76px;}
  
  .about_webaward_section{padding:100px 15px 0;gap:40px;}
  .about_webaward_top{gap:25px;}
  .about_webaward_label{font-size:clamp(14px,2.2vw,20px);letter-spacing: -1.1px;}
  .about_webaward_trophy {width: clamp(77px,13vw,133px); height: clamp(69px,12vw,120px);}
  .about_webaward_item_row{flex-direction:column-reverse;gap:10px;}
  .about_webaward_item{padding:11px 0;}
  .about_webaward_item_year{font-size:clamp(11px,2.1vw,20px);line-height:1;}
  .about_webaward_item_name{font-size:clamp(20px,5vw,50px);line-height:125%;letter-spacing:-0.8px;white-space: normal;}
  .about_webaward_item_badge{display:none;}
  
  .about_clients_tit {font-size: clamp(28px, 4vw, 40px);word-break: keep-all;}
}

@media only screen and (max-width:760px){
  .about_award_grid .swiper-wrapper{display:flex;}
  .about_award_card{flex-shrink:0;}
  .about_award_card_image{aspect-ratio: 98 / 120;}
  .about_award_card_info{opacity:0;transition:all 0.5s;}
  .about_award_card.swiper-slide-active .about_award_card_image {aspect-ratio: 119 / 171;}
  .about_award_card.swiper-slide-active .about_award_card_info {opacity:1;}
}