/* base */
body{display:block;overflow-x:hidden;font-family:var(--font-body);-webkit-font-smoothing:antialiased;}
.main{position:relative;min-height:2000px}

.red_point { color: var(--red, #B71C1C);text-align: center;font-family: "Inter Display"; font-size: 40px;font-style: normal;font-weight: 700;line-height: 136%; /* 54.4px */letter-spacing: -0.6px;}
.red_point br{display:none;}
.ver_pc{display:block;}
.ver_mob{display:none;}
/* section label */
.section_label{font-family: 'Inter Display';color: var(--color-text-dark);text-align: center; font-size: 30px; font-style: normal;font-weight: 800;line-height: 120%;letter-spacing: 0;text-transform: uppercase;}

/* visual */
.visual{display:flex;flex-direction:column;justify-content:center;overflow:hidden;position:relative;padding:100px 0 215px}
.visual_inner{position:relative;margin:60px auto 0; display: flex; flex-direction: column;align-items: center;gap: 13px;}

/* visual head */
.visual_head{position: relative; z-index: 2; max-width: 1000px;margin: 0 auto;font-family: 'Pretendard', sans-serif;text-transform: uppercase;color: var(--color-text-dark);text-align: center; font-size: 32px;font-style: normal;font-weight: 700; line-height: 136%; letter-spacing: -1.2px;}
body.is_locked .visual_head{z-index:1;}

/* visual logo */
.visual_logo{display:flex;position:relative;width:1490px;max-width:100%;margin:60px auto 0;flex-direction:column;}
.visual_logo_labels{display:flex;position:relative;width:100%;height:15px;margin-bottom:15px;font-family:'Inter',sans-serif;font-weight:700;font-size:12px;letter-spacing:0.36px;text-transform:uppercase;color:var(--color-bg-dark);}
.visual_logo_labels li{position:absolute;top:0;}
.visual_logo_labels li:nth-child(1){left:55px;}
.visual_logo_labels li:nth-child(2){left:490px;}
.visual_logo_labels li:nth-child(3){left:925px;}
.visual_logo_labels li:nth-child(4){left:1355px;}
.visual_logo_marquee_track .visual_marquee_dot {display: inline-block;flex-shrink: 0;width: 20px;height: 20px;border-radius: 50%; background: var(--color-text-dark); }

/* visual logo marquee */
.visual_logo_marquee{display:flex;width:100%;margin-top:206px;overflow:hidden;}
.visual_logo_marquee_track{display:flex;align-items:center;width:max-content;min-width:max-content;animation:marquee_loop 90s linear infinite;padding-left:50px;}
.visual_logo_marquee_group{display:flex;align-items:center;flex:none;}
.visual_logo_marquee_item{display:flex;align-items:center;flex:none;}
.visual_logo_marquee_word{display:block;flex:none;white-space:nowrap;font-family:'Zalando Sans Expanded',sans-serif;font-size:162px;font-style:normal;font-weight:900;line-height:.78;letter-spacing:-10px;text-transform:uppercase;color:var(--color-text-dark);}
.visual_logo_marquee .visual_marquee_img_wrap{display:block;flex:none;width:237px;height:132px;overflow:hidden;aspect-ratio:43/24;border-radius:0;margin-left:30px;}
.visual_logo_marquee .visual_marquee_img_wrap img,.visual_marquee_video{display:block;width:100%;height:100%;object-fit:cover;}
.visual_marquee_dot{display:block;flex:none;width:32px;height:32px;margin:0 50px 0 30px;border-radius:50%;background:var(--color-text-dark);}
@keyframes marquee_loop{0%{transform:translateX(0);}100%{transform:translateX(-50%);}}

/* visual marquee */
.visual_marquee{display:flex;overflow:hidden;width:100%;}
.visual_marquee_track{display:flex;align-items:center;width:max-content;animation:marquee_loop 80s linear infinite;}
.visual_marquee_item{font-family:'Zalando Sans Expanded',sans-serif;color:var(--color-text-faint);white-space:nowrap;font-size:100.463px;font-style:normal;font-weight:900;line-height:1;letter-spacing:-5.023px;text-transform:uppercase;}
.visual_marquee_dot{display:inline-block;flex-shrink:0;width:7px;height:7px;margin:0 15px;border-radius:50%;background:var(--color-border);}
.visual_marquee_img_wrap{display:inline-block;overflow:hidden;position:relative;width:130px;height:75px;margin:0 20px;border-radius:5px;flex-shrink:0;}
.visual_marquee_img{display:block;position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;opacity:0;animation:marquee_img_fade 9s ease-in-out infinite;will-change:opacity;}
.visual_marquee_img:nth-child(2){animation-delay:-6s;}
.visual_marquee_img:nth-child(3){animation-delay:-3s;}
.visual_marquee.sub_visual_marquee .visual_marquee_item{font-family:'Zalando Sans Expanded',sans-serif;color:var(--color-text-faint);white-space:nowrap;font-size:53.419px;font-style:normal;font-weight:900;line-height:1;letter-spacing:-2.671px;text-transform:uppercase;}

/* ===== iOS Safari 레이어 분할 (핵심) ===== */
.visual_logo_marquee_word,
.visual_logo_marquee .visual_marquee_img_wrap,
.visual_marquee_track > .visual_marquee_item,
.visual_marquee_track > .visual_marquee_dot{
  transform:translateZ(0);
  -webkit-backface-visibility:hidden;
  backface-visibility:hidden;
}
.visual_logo_marquee,
.visual_marquee{contain:paint;}

/* keyframes */
@keyframes marquee_img_fade{
  0%{opacity:1;}
  22%{opacity:1;}
  28%{opacity:0;}
  72%{opacity:0;}
  78%{opacity:1;}
  100%{opacity:1;}
}

/* service */
.service{position:relative;width:100%;min-height:auto;padding:140px 30px 0;padding-top: 0;}
.service_headline{font-family:'Pretendard',sans-serif;font-weight:700;font-size:36px;line-height:1.25;letter-spacing:-1.08px;color:var(--color-text-dark);text-align:center;}

/* service list */
.service_list_wrap{position:relative;width:100%;margin:0 auto}
.service_list_header{display:flex;position:relative;width:100%;height:90px;justify-content:space-between;align-items:center;}
.service_worker{ display: block;position: absolute;bottom: -110px;right: 100px;width: 215px; height: 287px;object-fit: cover;}
.service_detail_btn{display:flex;width:77px;height:77px;justify-content:center;align-items:center;transition:transform var(--transition-base);}


/* service grid */
.service_grid{display:grid;width:100%;grid-template-columns:repeat(3,1fr);gap:50px 10px;}
.service_card{display:block;position:relative;text-decoration:none;}
.service_card_media{display:flex;overflow:hidden;position:relative;width:100%;aspect-ratio:613/358;padding:25px;border-radius:5px;flex-direction:column;justify-content:space-between;}
.service_card_media::after{content:'';display:block;position:absolute;top:0;left:0;z-index:1;width:100%;height:100%;background:rgba(0,0,0,0.1);pointer-events:none;}
.service_card_thumb{display:block;position:absolute;top:0;left:0;z-index:0;width:100%;height:100%;object-fit:cover;transition:transform var(--transition-slow);}
.service_card_info{display:flex;position:relative;z-index:2;max-width:calc(100% - 100px);flex-direction:column;align-items:flex-start;gap:12px;}
.service_card_name{font-family:'Inter',sans-serif;font-weight:800;font-size:40px;line-height:0.9;color:var(--color-text-primary);letter-spacing:-0.8px;}
.service_card_desc{display:inline-block;padding:5px 10px;border-radius:2px;background:var(--color-accent-red);font-family:'Pretendard',sans-serif;font-weight:700;font-size:20px;line-height:1.2;color:var(--color-text-primary);letter-spacing:-0.6px;text-transform:uppercase;}
.service_card_btn{display:flex;position:absolute;right: 9px; bottom: 20px;z-index:2;width:65px;height:65px;justify-content:center;align-items:center;transition:transform var(--transition-base);}
.service_card_ic{display:block;position:absolute;left:0;bottom:-20px;z-index:2;width:143px;height:143px;border-radius:10px;object-fit:cover;}
.service_card:hover .service_card_thumb{transform:scale(1.05);}
.service_card:hover .service_card_btn{transform: scale(1.05);}
.service_grid_more{display:flex;position:relative;aspect-ratio:613/358;border-radius:5px;
  background:url(/main/images/common/noise_bg.webp) 0% 0% / 54.7466px 54.7466px repeat, hsl(0deg 0% 85% / 40%);background-blend-mode:multiply;justify-content:center;align-items:center;}
.service_grid_more_plus{display:block;position:relative;width:80px;height:80px;transition:transform var(--transition-base);}
.service_grid_more_plus::before,.service_grid_more_plus::after{content:'';display:block;position:absolute;top:50%;left:50%;width:100%;height:2px;background:var(--color-text-muted);transform:translate(-50%,-50%);}
.service_grid_more_plus::after{transform:translate(-50%,-50%) rotate(90deg);}
.service_grid_more:hover .service_grid_more_plus{transform:scale(1.15);}

/* portfolio */
.portfolio_list_header a {display: flex; align-items: center;}
.portfolio{overflow:hidden;position:relative;width:100%;min-height:auto;}
.portfolio_inner{display:flex;position:relative;z-index:1;width:100%;flex-direction:column;align-items:center;justify-content:center;gap:30px;padding:100px 0 264px; }
.portfolio_list_header {display: flex;align-items: center;}

/* portfolio marquee */
.portfolio_marquee{display:flex;overflow:hidden;position:absolute;top:0;left:0;z-index:0;width:100%;pointer-events:none;}
.portfolio_marquee_track{display:flex;align-items:center;width:max-content;animation:marquee_loop 40s linear infinite;will-change:transform;}
.portfolio_marquee_text{font-family: 'Inter Display', sans-serif; color: rgba(34, 34, 34, 0.06);white-space: nowrap;font-size: 439.714px;font-style: normal; font-weight: 900;line-height: 85%; letter-spacing: -17px; text-transform: uppercase;}

/* portfolio project */
.portfolio_project_wrap{display:flex;position:relative;z-index:1;width:100%;max-width:1900px;margin:0 auto;align-items:flex-end;gap:24px;}
.portfolio_swiper{overflow:hidden;position:relative;width:100%;}
.portfolio_slide{display:flex;position:relative;height:600px;align-items:flex-end;gap:24px;}
.portfolio_text{display:flex;width:500px;flex-shrink:0;flex-direction:column;align-items:flex-end;gap:20px;}
.portfolio_tit{width:100%;font-family:'Inter Display';font-weight:800;font-size:80px;line-height:0.85;color:var(--color-text-dark);letter-spacing:-1.2px;text-align:right;text-transform:uppercase;}
.portfolio_subtit_group{display:flex;flex-direction:column;align-items:flex-end;gap:5px;}
.portfolio_subtit{display:inline-block;max-width:100%;padding:5px 15px;    background: var(--color-accent-red); font-family: 'Pretendard', sans-serif;color: var(--color-text-primary);text-transform: uppercase;word-break: keep-all; font-size: 40px;font-style: normal;font-weight: 700; line-height: 120%; letter-spacing: -0.8px;}
.portfolio_desc{width:100%;font-family:'Inter',sans-serif;font-weight:800;font-size:20px;line-height:0.85;color:var(--color-text-dark);text-align:right;text-transform:uppercase;}
.portfolio_image{display:block;overflow:hidden;position:absolute;left:50%;bottom:0;width:776px;max-width:100%;height:594px;border-radius:5px;transform:translateX(-50%);}
.portfolio_image_thumb{display:block;width:100%;height:100%;object-fit:cover;}
.portfolio_detail_btn{display:flex;position:absolute;right:20px;bottom:20px;width:67px;height:67px;
  justify-content:center;align-items:center;}
.portfolio_image:hover .portfolio_detail_btn{transform:scale(1.1) rotate(10deg);}
.portfolio_obj_wrap {display: block;position: absolute;right: 10%; bottom: 0;width: 287px;height: 433px;}
.portfolio_obj_wrap img { width: 100%;height: 100%;object-fit: cover;}
.section_label.port_label{color: var(--color-text-dark);text-align: center;font-size: 70px; font-style: normal; font-weight: 800;line-height: 100%;letter-spacing: -0.7px;text-transform: uppercase;}


/* portfolio breadcrumb */
.portfolio_breadcrumb{display:flex;width:278px;margin-top:58px;align-items:center;gap:19px;}
.portfolio_breadcrumb_nums{display:flex;flex:1 0 0;min-width:0;align-items:center;gap:15px;}
.portfolio_breadcrumb_num{font-family:'Pretendard',sans-serif;font-weight:600;font-size:13px;color:#000;text-align:center;}
.portfolio_breadcrumb_total{opacity:0.66;font-family:'Pretendard',sans-serif;font-weight:600;font-size:13px;color:#000;text-align:center;}
.portfolio_breadcrumb_divider{display:block;overflow:hidden;position:relative;flex:1 0 0;min-width:0;height:1px;background:#D9D9D9;}
.portfolio_breadcrumb_divider_bar{display:block;position:absolute;top:0;left:0;width:100%;height:100%;background:var(--color-accent-red);transform:scaleX(0);transform-origin:left center;}
.portfolio_nav_group{display:flex;flex-shrink:0;align-items:center;gap:4px;}
.portfolio_nav_btn{display:flex;overflow:hidden;position:relative;width:30px;height:30px;justify-content:center;align-items:center;border:0.7px solid #C8C8C8;border-radius:10px;
  background:#efefeb;cursor:pointer;}
.portfolio_nav_prev::before,.portfolio_nav_next::before{content:'';display:block;width:6px;height:6px;border-top:1.4px solid #000;border-right:1.4px solid #000;}
.portfolio_nav_prev::before{margin-left:2px;transform:rotate(-135deg);}
.portfolio_nav_next::before{margin-right:2px;transform:rotate(45deg);}
.portfolio_nav_toggle::before,.portfolio_nav_toggle::after{content:'';display:block;position:absolute;top:50%;width:2px;height:9px;background:#000;transform:translateY(-50%);}
.portfolio_nav_toggle::before{left:12px;}
.portfolio_nav_toggle::after{left:16px;}
.portfolio_nav_toggle.is_paused::before{width:0;height:0;left:50%;top:50%;border-style:solid;border-width:5px 0 5px 8px;border-color:transparent transparent transparent #000;background:none;transform:translate(-50%,-50%);}
.portfolio_nav_toggle.is_paused::after{display:none;}


/* award */
.award{display:flex;position:relative;width:100%;padding:140px 0;margin:0 auto;flex-direction:column;align-items:center;}

/* award header */
.award_header{display:flex;width:1024px;max-width:90%;flex-direction:column;align-items:center;gap:35px;}
.award_headline{color: var(--color-text-dark); text-align: center; word-break: keep-all; font-family: Pretendard; font-size: 36px; font-style: normal;font-weight: 800;line-height: 135%;letter-spacing: -1.08px;}
.award_subheading{width:100%;padding-right:170px;font-family:'Pretendard',sans-serif;font-weight:700;font-size:16px;line-height:1.3;color:var(--color-text-dark);letter-spacing:-0.32px;text-align:right;}
.award .underline::before{height:2px;bottom:5px}

/* award list */
.award_list_wrap{width:100%;padding:0 30px;}
.award_list{position:relative;width:100%;border-bottom:2px solid var(--color-border-strong);}
.award_item{display:grid;position:relative;width:100%;height:70px;grid-template-columns: repeat(5, 1fr);align-items:center;gap:20px;border-top:1px solid var(--color-border);transition:background-color var(--transition-base);text-align:center;}
.award_item:hover{background:var(--color-accent-red);}
.award_item > span{font-family:'Pretendard',sans-serif;font-weight:700;font-size:16px;line-height:1.4;color:var(--color-bg-alt);letter-spacing:-0.32px;text-transition:color var(--transition-base);}
.award_item:hover > span{color:var(--color-white);}
.award_item_badge{display:flex;justify-content:center;align-items:center;}
.award_item:hover .award_item_badge_img{filter:invert(1);}

/* award tooltip */
.award_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);}
.award_tooltip.is_active{opacity:1;visibility:visible;}
.award_tooltip_img{display:block;width:100%;height:100%;object-fit:cover;}

/* award marquee */
.award_marquee{display:flex;overflow:hidden;width:100%;padding-top:30px}
.award_marquee_track{display:flex;align-items:center;width:max-content;height:180px;animation:marquee_loop 40s linear infinite;will-change:transform;transition:background var(--transition-base);}
.award_marquee_link{font-family: 'Inter Display';color: var(--color-text-dark);text-decoration: none;text-transform: uppercase; white-space: nowrap; transition: color var(--transition-base); font-size: 148.451px;font-style: normal; font-weight: 800; line-height: 120%;letter-spacing: -2.969px;}
.award_marquee_arrow{display:block;flex-shrink:0;width: 155px; height: 155px;background:url('/main/images/common/icon_detail_arrow_dark.svg') no-repeat center/contain;transition:background var(--transition-base);}
.award_marquee_track:hover{background:var(--color-accent-red);}
.award_marquee_track:hover .award_marquee_link{color:var(--color-white);}
.award_marquee_track:hover .award_marquee_arrow{background-image:url('/main/images/common/icon_detail_arrow_white.svg');}
.award_marquee_trophy{width: 135.083px;height: 156.19px;object-fit:contain;}


/* red diamond */
/* 배경 전환은 main.js가 GSAP로 background-color를 직접 애니메이션한다(pin+scrub) —
   여기서는 초기(밝은) 배경색만 지정한다 */
.red_diamond{display:flex;position:relative;width:100%;padding:140px 30px 240px;flex-direction:column;align-items:center;gap:300px;background:var(--color-bg);}
.red_diamond_item{display:flex;width:100%;max-width:1400px;align-items:flex-end;gap:85px;}
.red_diamond_item_reverse{flex-direction:row-reverse;}
.red_diamond_media{display:block;overflow:hidden;position:relative;width:820px;max-width:100%;height:550px;flex-shrink:0;border-radius:5px;}
.red_diamond_video{display:block;width:100%;height:100%;object-fit:cover;}
.red_diamond_tint{display:block;position:absolute;top:0;left:0;width:100%;height:100%;background:#9D0000;mix-blend-mode:multiply;}
.red_diamond_gradient{display:block;position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(180deg,rgba(0,0,0,0.15) 0%,rgba(0,0,0,0.03) 50%,rgba(0,0,0,0.15) 100%);}
.red_diamond_noise{display:block;position:absolute;top:0;left:0;width:100%;height:100%;background:url('/main/images/home_main/noise_bg.webp') repeat;background-size:424px 424px;opacity:0.1;mix-blend-mode:multiply;}
/* red_diamond → about_boast 전환: 이 항목의 media가 화면 전체 크기로 커지는 동안 검정으로 덮는 딤 */
.red_diamond_video_dim{display:block;position:absolute;top:0;left:0;z-index:2;width:100%;height:100%;background:#000000;opacity:0;pointer-events:none;}
.red_diamond_text{display:flex;flex-direction:column;align-items:flex-start;gap:40px;}
.red_diamond_tit{font-family:'Zalando Sans Expanded',sans-serif;font-weight:700;font-size:50px;line-height:106%;letter-spacing:-1px;color:var(--color-text-dark);text-transform:capitalize;}
.red_diamond_divider{display:block;width:76px;height:4px;background:var(--color-text-dark);}
.red_diamond_desc{font-family:'Pretendard',sans-serif;font-weight:600;font-size:22px;letter-spacing:-0.44px;color:var(--color-text-dark);}

/* about boast */
.about_boast{position:relative;z-index:21;width:100%;margin-top:-2px;padding:0;background:var(--color-bg-dark);}
/* about_boast_marquee_bg는 sticky 컨테이너인 about_boast의 padding이 아니라, 그 안에 실제로 쌓이는
자식 요소(about_boast_inner)의 높이만큼만 붙어있을 수 있다 — about_boast 자체의 padding-bottom을
늘려도 sticky 해제 지점은 그대로라서(실측 확인), 마지막 about_boast_item이 다 빠져나가기 전에 sticky가
풀리지 않도록 이 안쪽 요소의 하단 padding에 100vh를 더한다 */
.about_boast_inner{display:flex;position:relative;z-index:1;width:100%;margin:0 auto;flex-direction:column;gap:200px;padding:0 30px calc(140px + 100vh);}
.about_boast_item{width:auto;will-change:transform;}
.about_boast_item_inner{display:flex;width:100%;align-items:flex-end;gap:40px;will-change:transform;}
.about_boast_thumb{display:block;overflow:hidden;position:relative;flex-shrink:0;border-radius:2px;}
.about_boast_thumb_img{display:block;width:100%;height:100%;object-fit:cover;filter:grayscale(1);transition:filter 0.6s ease-out;will-change:filter;}
.about_boast_thumb.is_active .about_boast_thumb_img{filter:grayscale(0);}
.about_boast_text{display:flex;flex:1;min-width:0;flex-direction:column;gap:20px;will-change:transform,opacity;}
.about_boast_subheading{font-family:'Zalando Sans Expanded',sans-serif;font-weight:800;font-size:50px;line-height:1.1;letter-spacing:-3px;color:var(--color-text-primary);text-transform:uppercase;}
.about_boast_desc{width:max-content;font-family:'Pretendard',sans-serif;font-weight:500;font-size:26px;line-height:1.5;color:var(--color-text-faint);letter-spacing:-0.52px;}
.about_boast_item1{align-self:flex-start;width:1411px;}
.about_boast_item1 .about_boast_item_inner{transform-origin:left bottom;}
.about_boast_item1 .about_boast_thumb{width:928px;height:565px;}
.about_boast_item2{align-self:flex-end;width:1031px;}
.about_boast_item2 .about_boast_item_inner{flex-direction:row-reverse;transform-origin:right bottom;}
.about_boast_item2 .about_boast_thumb{width:654px;height:480px;}
.about_boast_item2 .about_boast_desc,
.about_boast_item4 .about_boast_desc{align-self:flex-end;}
.about_boast_item2 .about_boast_desc,
.about_boast_item2 .about_boast_subheading,
.about_boast_item4 .about_boast_desc,
.about_boast_item4 .about_boast_subheading{text-align:right;}
.about_boast_item3{align-self:flex-start;width:992px;}
.about_boast_item3 .about_boast_item_inner{transform-origin:left bottom;}
.about_boast_item3 .about_boast_thumb{width:579px;height:580px;}
.about_boast_item3 .about_boast_subheading{text-transform:none;}
.about_boast_item4{align-self:flex-end;width:1084px;}
.about_boast_item4 .about_boast_item_inner{flex-direction:row-reverse;transform-origin:right bottom;}
.about_boast_item4 .about_boast_thumb{width:653px;height:480px;}
.about_boast_item5{align-self:flex-start;width:1237px;}
.about_boast_item5 .about_boast_item_inner{transform-origin:left bottom;}
.about_boast_item5 .about_boast_thumb{width:722px;height:515px;}

/* about boast marquee — position:sticky로 about_boast를 스크롤하는 동안 화면에 고정된다 */
.about_boast_marquee_bg{display:block;overflow:hidden;position:sticky;top:0;z-index:0;width:100%;height:100vh;pointer-events:none;}
.about_boast_marquee_inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;align-content:center;position:relative;width:100%;height:100%;margin:0 auto;}
.about_boast_marquee_fixed{display:flex;overflow:hidden;width:100%;height:145px;align-items:center;}
.about_boast_marquee_fixed_track{display:flex;align-items:center;width:max-content;animation:marquee_loop 20s linear infinite;will-change:transform;}
/* Y·W·R·K처럼 대각선 획이 뾰족하게 만나는 글자는 stroke로 그리면 그 꼭짓점에서 잔상이 생긴다 — 브라우저가
   그리지 않고 Figma에서 내보낸 벡터(패스로 병합된 stroke) 이미지를 그대로 쓴다 */
.about_boast_marquee_fixed_img{display:block;flex-shrink:0;height:145px;width:auto;margin-right:60px;}
.about_boast_marquee_row_keyword{display:flex;position:relative;overflow:hidden;width:100%;height:160px;align-items:center;}
.about_boast_marquee_stack{display:flex;position:absolute;top:0;left:0;width:100%;flex-direction:column;will-change:transform;}
.about_boast_marquee_track{display:flex;align-items:center;width:max-content;font-family:'Inter display',sans-serif;font-weight:800;font-size:200px;line-height:0.8;letter-spacing:-12px;text-transform:uppercase;white-space:nowrap;animation:marquee_loop 80s linear infinite;will-change:transform;}
.about_boast_marquee_track > span{margin-right:60px;}
.about_boast_marquee_keyword{flex-shrink:0;height:160px;color:var(--color-text-primary);opacity:0.2;}
.about_boast_marquee_watermark{font-family:'Inter',sans-serif;font-weight:500;font-size:50px;line-height:1.2;color:var(--color-text-primary);letter-spacing:-3px;opacity:0.1;white-space:nowrap;}

/* 1920px~1025px 구간 — PC 디자인을 1920px 기준 비율 그대로 축소한다. px→vw 변환 대상만 오버라이드하고
   나머지 선언은 위 PC 규칙을 그대로 따른다. 1px·2px 선 두께, border/outline/box-shadow는 비율 축소 대상에서
   제외해 그대로 둔다 */
   @media screen and (min-width:1025px) and (max-width:1920px){
  /* intro */
  .intro_loading{bottom:0.7813vw;gap:0.5208vw;width:calc(100% - 1.5625vw);}
  .intro_loading_num{font-size:0.7292vw;letter-spacing:-0.0146vw;}

  /* underline */
  .underline::before{bottom:0.1563vw;}

  /* section label */
  .section_label{font-size:1.54vw;}

  /* visual */
 
  .visual_inner{max-width:100vw;}

  /* visual head 
  .visual_head{max-width:52.0313vw;font-size:1.7vw;letter-spacing:-0.0625vw;}
  .red_point{max-width:52.0313vw;font-size:2.1vw;letter-spacing:-0.0625vw;}*/

  /* visual logo */
  .visual_logo{width:77.6042vw;margin:3.125vw auto 0;}
  .visual_logo_labels{height:0.7813vw;margin-bottom:0.7813vw;font-size:0.625vw;letter-spacing:0.0188vw;}
  .visual_logo_labels li:nth-child(1){left:2.8646vw;}
  .visual_logo_labels li:nth-child(2){left:25.5208vw;}
  .visual_logo_labels li:nth-child(3){left:48.1771vw;}
  .visual_logo_labels li:nth-child(4){left:70.5729vw;}

  /* visual logo marquee 
  .visual_logo_marquee{margin-top:6.3542vw;}
  .visual_logo_marquee_word{font-size:12.8862vw;letter-spacing:-0.7813vw;}
  .visual_logo_marquee_item .visual_marquee_img_wrap{width:18.8021vw;height:10.4688vw;margin:0 2.0833vw;}*/

  /* visual marquee 
  .visual_marquee_item{font-size:7.9753vw;letter-spacing:-0.3988vw;}
  .visual_marquee_dot{width:0.3646vw;height:0.3646vw;margin:0 0.7813vw;}
  .visual_marquee_img_wrap{width:6.7708vw;height:3.9063vw;margin:0 1.0417vw;border-radius:0.2604vw;}*/

  /* service */
  .service{padding:7.2917vw 1.5625vw 0;padding-top:0;}
  .service_headline{font-size:1.875vw;letter-spacing:-0.0563vw;}

 /* award */
.award_subheading {text-align: center; padding: 0;}
.award_headline { font-size: 1.875vw;}
.award {gap: clamp(20px, 1.953vw, 30px);}


  /* service list */
  .service_list_wrap{margin-top:3.125vw;}
  .service_list_header{height:4.6875vw;}
  .service_worker{right:5.2083vw;bottom:-5.7292vw;width:11.1979vw;height:14.9479vw;}
  .service_detail_btn{width:4.0104vw;height:4.0104vw;}

  /* service grid */
  .service_grid{gap:2.6042vw 0.5208vw;}
  .service_card_media{padding:1.3021vw;border-radius:0.2604vw;}
  .service_card_info{max-width:calc(100% - 5.2083vw);}
  .service_card_name{font-size:2.0833vw;letter-spacing:-0.0417vw;}
  .service_card_desc{padding:0.2604vw 0.5208vw;border-radius:0.1042vw;font-size:1.0417vw;letter-spacing:-0.0313vw;}
  .service_card_btn{right:0.4688vw;bottom:1.0417vw;width:3.3854vw;height:3.3854vw;}
  .service_card_ic{left:0;bottom:-2.0833vw;width:7.4479vw;height:7.4479vw;border-radius:0.5208vw;}
  .service_grid_more{border-radius:0.2604vw;}
  .service_grid_more_plus{width:4.1667vw;height:4.1667vw;}
  .service_grid_more_plus::before,.service_grid_more_plus::after{height:0.1042vw;}


  /* portfolio */
  .portfolio_inner{gap:1.5625vw;padding:5.2083vw 0 13.75vw;}
  .portfolio_marquee_text{font-size:22.9018vw;letter-spacing:-0.9161vw;}

  /* portfolio project */
  .portfolio_project_wrap{max-width:96vw;gap:1.25vw;}
  .portfolio_slide{gap:1.25vw;}
  .portfolio_text{width:26.0417vw;}
  .portfolio_tit{font-size:4.1667vw;letter-spacing:-0.0833vw;}
  .portfolio_subtit_group{gap:0.2604vw;}
  .portfolio_subtit{padding:0.2604vw 0.7813vw;font-size:2.1vw;letter-spacing:-0.0521vw;}
  .portfolio_desc{font-size:1.0417vw;}
  .portfolio_image{width:40.4167vw;height:30.9375vw;border-radius:0.2604vw;bottom: 0;;}
  .portfolio_detail_btn{right:1.0417vw;bottom:1.0417vw;width:3.4896vw;height:3.4896vw;}
  .portfolio_obj{width:14.9479vw;height:22.5521vw;}

  /* red diamond */
  .red_diamond{padding:7.2917vw 1.5625vw 12.5vw;gap:29.297vw;}
  .red_diamond_item{max-width:68.0208vw;gap:4.4271vw;}
  .red_diamond_media{width:42.7083vw;height:28.6458vw;border-radius:0.2604vw;}
  .red_diamond_text{gap:2.0833vw;}
  .red_diamond_tit{font-size:2.6042vw;letter-spacing:-0.0521vw;}
  .red_diamond_divider{width:3.9583vw;height:0.2083vw;}
  .red_diamond_desc{font-size:1.1458vw;letter-spacing:-0.0229vw;}

  /* about boast */
  .about_boast{padding:7.2917vw 0;}
  .about_boast_inner{max-width:100vw;gap:10.4167vw;padding:0 1.5625vw calc(7.2917vw + 100vh);}
  .about_boast_item_inner{gap:2.0833vw;}
  .about_boast_thumb{border-radius:0.1042vw;}
  .about_boast_text{gap:1.0417vw;}
  .about_boast_subheading{font-size:2.6042vw;letter-spacing:-0.1563vw;}
  .about_boast_desc{font-size:1.3542vw;letter-spacing:-0.0271vw;}
  .about_boast_item1{width:73.4896vw;}
  .about_boast_item1 .about_boast_thumb{width:48.3333vw;height:29.4271vw;}
  .about_boast_item2{width:53.6979vw;}
  .about_boast_item2 .about_boast_thumb{width:34.0625vw;height:25vw;}
  .about_boast_item3{width:51.6667vw;}
  .about_boast_item3 .about_boast_thumb{width:30.1563vw;height:30.2083vw;}
  .about_boast_item4{width:56.4583vw;}
  .about_boast_item4 .about_boast_thumb{width:34.0104vw;height:25vw;}
  .about_boast_item5{width:64.4271vw;}
  .about_boast_item5 .about_boast_thumb{width:37.6042vw;height:26.8229vw;}

  /* about boast marquee */
  .about_boast_marquee_fixed{height:7.5521vw;}
  .about_boast_marquee_fixed_img{height:7.5521vw;margin-right:3.125vw;}
  .about_boast_marquee_row_keyword{height:8.3333vw;}
  .about_boast_marquee_track{font-size:10.4167vw;letter-spacing:-0.625vw;}
  .about_boast_marquee_track > span{margin-right:3.125vw;}
  .about_boast_marquee_keyword{height:8.3333vw;}
  .about_boast_marquee_watermark{font-size:2.6042vw;letter-spacing:-0.1563vw;}
}

@media (max-width:1400px){
 .swiper-slide.portfolio_slide {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    gap: 6vw;
    height: auto;
}
.portfolio_obj_wrap {
    display: none;
}
.portfolio_text {
    position: static;
    width: 100%;
    align-items: center;
}

.portfolio_image {
    position: relative;
    width: 100%;
    height: auto;
    /* aspect-ratio: 776 / 594; */
}

.portfolio_breadcrumb {
    order: -1;
    position: relative;
    width: 100%;
    align-self: flex-start;
    justify-content: flex-start;
    gap: 30px;
    margin: 0 auto;
    gap: 4vw;
}

.portfolio_breadcrumb {
    position: static;
    width: 100%;
    align-items: center;
}

p.portfolio_tit {
    position: static;
    width: 100%;
    text-align: center;
    font-size: clamp(38px, 3.711vw, 57px);
    line-height: 0.95;
    letter-spacing: -0.405vw;
}

p.portfolio_tit {
    align-items: center;
    text-align: center;
}

p.portfolio_desc {
    text-align: center;
    font-size: clamp(16px, 1.953vw, 30px);
    line-height: 1.2;
    letter-spacing: -0.08vw;
}

.portfolio_subtit_group {
    align-items: center;
}

.portfolio_obj {
    bottom: -100px;
} 
}




/* mobile (~1024px) */
@media (max-width:1024px){
.visual_logo_marquee_track .visual_marquee_dot {width: 15px;height: 14px;}
.red_point br{display:block;}
span.red_point {font-size: 4vw;line-height: 110%;margin-bottom: 15px;display: inline-block;}
.ver_pc{display:none;}
.ver_mob{display:block;}
  
.visual_inner {text-align: center;gap: 0vw;}
.main section{padding:3vw;padding-bottom: 25vw;}
span.red_point br { display: block;}

  /* section label */
  .section_label{font-size:clamp(15px,4vw,22px);letter-spacing:-0.0693vw;}

  /* visual */
  .main .visual{min-height:auto;padding:10vw 0 0;}
  .visual_head{font-weight:700;font-size:2.6vw;line-height:1.5;letter-spacing:-0.0853vw;}
  .visual_logo{width:94.667vw;margin-top:18.667vw;}
  .visual_logo_labels{height:auto;margin-bottom:1.333vw;justify-content:space-between;font-size:clamp(9px,2.4vw,13.5px);letter-spacing:normal;}
  .visual_logo_labels li{position:static;}

/* visual logo marquee */
  .visual_logo_marquee{margin-top:15vw;}
  .visual_logo_marquee_item{margin-right:0;}
  .visual_logo_marquee_word{font-size:22.49vw;letter-spacing:-1.5738vw;padding-right:.04em;}
  .visual_logo_marquee_item .visual_marquee_img_wrap{width:30.5vw;height:17vw;margin:0 2.5vw;}
  /* visual marquee */
  .visual_marquee{margin-top:1vw;padding:0;}
  .visual_marquee_item{font-size:clamp(42px,5.395vw,67.5px);letter-spacing:-0.0853vw;}
  .visual_marquee_img_wrap{width:24vw;height:13.867vw;margin:0 2.667vw;border-radius:1.333vw;}
  .visual_marquee.sub_visual_marquee .visual_marquee_item{font-size:clamp(30px,3.8vw,112.5px);}

/* service */
.service_headline{font-size:clamp(16px,5vw,24px);letter-spacing:-0.16vw;}
section.service { margin-top: 19.766vw; padding-bottom: 0;}

/* service list */
.service_list_header .section_label{font-size:clamp(13px,7vw,36px);}
.service_list_wrap{margin-top:3vw;}
.service_list_header{height:auto;margin-bottom:5.333vw;justify-content: center}
.service_worker{display:none;}
.service_detail_btn{width:clamp(13px,7vw,36px);height: clamp(13px,7vw,36px);}

/* service grid */
.service_grid{grid-template-columns:1fr;}
.service_card_media{padding:clamp(15px,3.846vw,22.5px);border-radius:clamp(8px,2.051vw,10px);}
.service_card_info{max-width:100%;}
.service_card_name{font-size:clamp(24px,6.4vw,32px);letter-spacing:-0.128vw;}
.service_card_desc{font-size:clamp(13px,3.467vw,15px);letter-spacing:-0.096vw;text-shadow:0 1px 6px rgba(0,0,0,0.45);}
.service_card_btn{right: clamp(10px, 0.977vw, 15px);bottom: clamp(10px, 0.977vw, 15px);width: clamp(45px, 4.395vw, 67.5px);height: clamp(45px, 4.395vw, 67.5px);}
.service_card_ic{ width: clamp(90px, 8.789vw, 135px);height: clamp(90px, 8.789vw, 135px);bottom: clamp(10px, 0.977vw, 15px);}
.service_grid_more{display:none;}


  /* portfolio */
  .portfolio_marquee{margin-top:-460px;}
  .portfolio_marquee_text{font-size:clamp(180px,48vw,270px);letter-spacing:-2.4vw;margin-right:5.317vw;}

  /* portfolio project */
  .portfolio_project_wrap{overflow:visible;}
  .swiper-slide.portfolio_slide{justify-content: flex-end;}
  .portfolio_text{position:static;width:100%;align-items:center;gap:2vw;}
  .portfolio_tit{position:static;width:100%;text-align:center;font-size:clamp(38px, 3.711vw, 57px);line-height:0.95;letter-spacing:-0.405vw;}
  .portfolio_subtit{text-align:center;font-size:clamp(24px, 3.125vw, 48px);line-height:1.07;letter-spacing:-0.133vw;}
  .portfolio_desc{text-align:center;font-size:clamp(16px, 1.953vw, 30px);line-height:1.2;letter-spacing:-0.08vw;}
  .portfolio_image{ position: relative;width:100%;height:auto;aspect-ratio:776/594;}
  .portfolio_image_thumb{width:100%;height:100%;}
  .portfolio_detail_btn{display:none;}
  .portfolio_inner{gap: 20px; padding: clamp(150px, 14.648vw, 225px) 0}



  /* portfolio breadcrumb — portfolio_image 아래, portfolio_text의 마지막 자식으로 정상 흐름에 놓인다 */
   .portfolio_obj_wrap {right: 0; width: 300px; height: 200px;}
  .portfolio_obj_wrap img { object-fit: contain;}
  .portfolio_breadcrumb{order:-1;position:relative; width: 100%;align-self: flex-start; justify-content: flex-start;gap: 30px;margin: 0 auto;}
  .portfolio_breadcrumb span{font-size:clamp(11px,2.933vw,16.5px);letter-spacing:-0.0587vw;}
  .portfolio_breadcrumb_divider{width:110px;}
  .section_label.port_label {font-size: clamp(13px,7vw,36px);}

  /* award */
  .main .award{gap:clamp(50px, 4.883vw, 75px);padding:0 0 25vw;}

  /* award header */
  .award_header{width:94.667vw;max-width:100%;gap:5.333vw;}
  .award_header .section_label{font-size:clamp(13px,3.4667vw,19.5px);}
  .award_headline{font-weight:800;font-size: clamp(24px, 2.344vw, 36px);line-height: 140%;letter-spacing: -0.076vw;}
  .award_subheading{display:none;}

  /* award list */
  .award_list_wrap{padding:0 4vw}
  .award_list{margin-top:0;}
  .award_item{display:flex;position:relative;flex-wrap:wrap;height:auto;padding:clamp(30px, 2.930vw, 45px) 0;gap:clamp(15px,4vw,22.5px) clamp(5px,1.333vw,7.5px);text-align:left;}
  .award_item > span{font-size:clamp(11px,2.933vw,16.5px);letter-spacing:-0.117vw;}
  .award_item .award_item_name{order:1;flex-basis:100%;font-size:clamp(18px,4.8vw,27px);letter-spacing:-0.096vw;color:var(--color-bg-alt);}
  .award_item_year{order:2;color:var(--color-bg-alt);}
  .award_item_client{order:3;position:relative;padding-left:2.667vw;color:var(--color-text-dark);}
  .award_item_client::before{content:'';display:block;position:absolute;top:50%;left:0;width:1px;height:2.133vw;margin-top:-1.067vw;background:#CCCCCC;}
  .award_item .award_item_org{order:4;position:relative;padding-left:2.667vw;color:var(--color-text-muted);}
  .award_item_org::before{content:'';display:block;position:absolute;top:50%;left:0;width:1px;height:2.133vw;margin-top:-1.067vw;background:#CCCCCC;}
  .award_item_badge{order:5;position:absolute;top:50%;right:0;transform:translateY(-50%);}
  .award_item_badge_img{max-width:clamp(37px,9.867vw,55.5px);max-height:clamp(27px,7.2vw,40.5px);width:auto;height:auto;}
  .award_item:hover{background:none;}
  .award_item:hover>span{color:inherit;}
  .award_item:hover .award_item_badge_img{filter:none;}
  .award .underline::before{bottom:2px}
  .award_tooltip{width:50vw;height:50vw}

  /* award marquee */
  .award_marquee{padding:1.33vw 0 0}
  .award_marquee_link{font-size:clamp(60px,16vw,90px);letter-spacing:-0.12vw;}
  .award_marquee_arrow{width:16.533vw;height:16.533vw;}
  .award_marquee_trophy{width:16.8vw;height:16.533vw;}
  .award_marquee_track{height:auto}
  .award_marquee_track:hover{background:none;}
  .award_marquee_track:hover .award_marquee_link{color:var(--color-text-dark);}
  .award_marquee_track:hover .award_marquee_arrow{background-image:url('/main/images/common/icon_detail_arrow_dark.svg');}


  /* red diamond */
  .red_diamond{padding-bottom:27.5vw;gap:16vw;}
  .red_diamond_item,.red_diamond_item_reverse{flex-direction:column;align-items:flex-start;gap:8vw;}
  .red_diamond_media{width:100%;height:56vw;}
  .red_diamond_text{gap:5.333vw;}
  .red_diamond_tit{font-size:clamp(28px,7.467vw,42px);letter-spacing:-0.053vw;}
  .red_diamond_divider{width:10.133vw;height:1.067vw;}
  .red_diamond_desc{font-size:clamp(14px,3.733vw,21px);letter-spacing:-0.0235vw;}

  /* about boast */
  .main .about_boast{padding:21.333vw 0;}
  .about_boast_inner{gap:16vw;padding:0 0 100vh;}
  .about_boast_inner .about_boast_item .about_boast_item_inner{flex-direction:column;gap:4vw;padding:0 4vw;transform-origin:center bottom;}
  .about_boast_inner .about_boast_item{align-self:stretch;width:100%;}
  .about_boast_inner .about_boast_item .about_boast_thumb{width:100%;height:56vw;}
  .about_boast_text{justify-content:center;align-items:center;gap:2.667vw;}
  .about_boast_subheading{font-size:clamp(28px,7.467vw,42px);letter-spacing:-0.24vw;text-align:center;}
  .about_boast_desc{width:auto;font-size:clamp(15px,4vw,22.5px);line-height:1.46;letter-spacing:-0.08vw;text-align:center;word-break:keep-all}
  .about_boast_desc br{display:none}
  .about_boast_item2 .about_boast_desc,.about_boast_item2 .about_boast_subheading,
  .about_boast_item4 .about_boast_desc,.about_boast_item4 .about_boast_subheading{text-align:center;}
.portfolio_subtit_group { align-items: center;}

  /* about boast marquee */
  .about_boast_marquee_fixed{height:15vw;}
  .about_boast_marquee_fixed_track{will-change:transform;}
  .about_boast_marquee_fixed_img{max-width:none;height:13.6vw;margin-right:8vw;content:url(/main/images/home_main/about_boast_marquee_fixed_text_m.svg);}
  .about_boast_marquee_row_keyword{height:15vw;}
  .about_boast_marquee_track{font-size:18.6vw;letter-spacing:-1.12vw;}
  .about_boast_marquee_track > span{margin-right:8vw;}
  .about_boast_marquee_keyword{height:15vw;}
  .about_boast_marquee_watermark{font-size:5.33vw;letter-spacing:-0.32vw;}

}

/* phone 폭(~768px 이하) — portfolio_obj 장식 이미지 크기만 더 촘촘한 vw로 스케일. 텍스트/이미지 레이아웃은 1024px 블록의 정상 흐름을 그대로 이어받는다 */
@media (max-width:768px){
  /* portfolio project */
  .portfolio_marquee{margin-top:0;}
  .portfolio_text{gap: 2vw;}
  .service_list_wrap { margin-top: 12vw;}
  .award_header .section_label {font-size: 5.39vw;margin-bottom: 10px; }
  .award_headline { font-size: 5vw;}
  .award_header {gap: 1.333vw;}
p.portfolio_tit {text-align:center;}
p.portfolio_desc { text-align: center;font-size: 3vw; margin-top: 12px;}
.portfolio_obj_wrap { width: 100px;height: 150px;}
 .portfolio_subtit_group {align-items: center;}
.portfolio_text {display: flex;  align-items: center;}
  

  /* portfolio breadcrumb */
  .portfolio_obj{ bottom: 25px;right: -2vw;width: 13.733vw;height: 38.933vw;}
  .portfolio_breadcrumb{gap:4vw;}
  .portfolio_breadcrumb_divider{width:14.133vw;}
  .service_list_header { margin-bottom: 2.8vw;text-align: center;margin-bottom: 30px;}
  
  span.red_point { font-size: 24px;}
  .visual_head { font-size: 20px;}
  .visual_inner {margin: 90px auto 0;}
  .visual_logo_marquee {margin-top: 100px;}
    }
}

/* 좁은 폰(~550px 이하) — 2열로는 카드가 너무 좁아지는 지점부터 1열로 되돌림 */
@media (max-width:550px){
  /* service grid */
  .service_grid{grid-template-columns:1fr;gap:4vw;}

}

/* mob사이즈 이지만, 세로길이가 더 작을때 */
@media (max-width: 1024px) and (orientation: landscape) {
  .main .portfolio_inner{padding:5vh 0}
  .portfolio_project_wrap{max-height:70vh;overflow-y:auto;}
  .portfolio_obj{display:none}
}