/* /74 WEBSITE & ONLINE DESIGN */

/* hero */
.w74-hero { --overlay: transparent; background-position: center 30%; }
.w74-hero__title { font-weight: 400; font-size: clamp(40px, 6.7vw, 96px); letter-spacing: -1px; color: #fff; }
.w74-hero__line { width: 40%; max-width: none; background: #fff; margin-top: 30px; }

/* shared label ("CBC그룹의 온라인 디자인 & 웹 개발 서비스") */
.w74-label { font-size: 22px; line-height: 1.4; letter-spacing: 5px; color: #ababab; }
.w74-big { margin-top: 34px; font-size: clamp(32px, 4.2vw, 60px); line-height: 1.25; font-weight: 700; color: #131313; letter-spacing: 0; }

/* intro (pink) */
.w74-intro { background: #f2dbe1; padding: 135px 0 130px; }
.w74-intro__eyebrow { font-family: var(--font-en); font-weight: 700; font-size: 24px; line-height: 1.2; color: #fff; }
.w74-intro__title { margin-top: 20px; font-size: clamp(32px, 3.9vw, 56px); line-height: 1.5; font-weight: 700; color: #010101; }
.w74-intro__text { margin-top: 32px; font-size: clamp(17px, 1.67vw, 24px); line-height: 1.6; color: #212121; }
.w74-intro__text p + p { margin-top: 1.6em; }

/* service blocks (white) */
.w74-svc { background: #fff; padding: 155px 0 47px; }
.w74-svc__title { margin-top: 30px; font-size: clamp(34px, 4.2vw, 60px); line-height: 1.3; font-weight: 700; letter-spacing: -1px; color: #010101; }
.w74-svc__sub { margin-top: 30px; font-size: clamp(19px, 2.1vw, 30px); line-height: 1.45; color: #212121; }
.w74-svc__list { margin-top: 60px; border-top: 2px solid #000; border-bottom: 1px solid #000; padding: 36px 0 30px; }
.w74-svc__list li { display: flex; align-items: center; gap: 8px; min-height: 64px; font-size: clamp(16px, 1.67vw, 24px); line-height: 1.4; color: #212121; }
.w74-svc__list li img { flex: none; width: 30px; height: auto; }

/* dark service blocks */
.w74-dark { background: #2d2e2f; color: #fff; padding: 76px 0 156px; }
.w74-dark--first { padding-top: 155px; }
.w74-dark__line { border: 0; border-top: 1px solid #ffb5cb; margin: 30px 0 0; }
.w74-dark__title { margin-top: 36px; font-size: clamp(34px, 4.2vw, 60px); line-height: 1.1; font-weight: 700; color: #ffb5cb; }
.w74-dark__sub { margin-top: 24px; font-size: clamp(22px, 2.5vw, 36px); line-height: 1.4; letter-spacing: -1px; color: #ffb5cb; }
.w74-dark__check { margin-top: 18px; display: flex; align-items: center; gap: 8px; font-size: clamp(16px, 1.67vw, 24px); line-height: 1.5; color: #ffb5cb; }
.w74-dark__check img { flex: none; width: 25px; height: auto; }
.w74-boxes { margin-top: 70px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; }
.w74-box { border: 1px solid #ffb5cb; min-height: 153px; padding: 24px 16px; display: flex; align-items: center; justify-content: center; text-align: center; font-size: 22px; line-height: 1.45; color: #fefefe; }
.w74-box small { font-size: 16px; }

/* successful cases */
.w74-cases { background: #fff; padding: 151px 0 126px; }
.w74-cases__rows { margin: 74px 0 0 32%; border-top: 2px solid #000; }
.w74-case { padding: 32px 0 30px 27px; border-bottom: 1px solid #000; }
.w74-case__title { font-size: clamp(22px, 2.1vw, 30px); line-height: 1.2; font-weight: 700; color: #131313; }
.w74-case__list { margin-top: 30px; list-style: disc; padding-left: 40px; font-size: clamp(16px, 1.4vw, 20px); line-height: 2; }

/* benefits (black) */
.w74-benefits { background: #131313; color: #fff; padding: 129px 0; }
.w74-benefits__eyebrow { color: #646464; }
.w74-benefits .w74-big { color: #fff; }
.w74-benefits__lead { margin-top: 30px; font-size: clamp(19px, 1.8vw, 26px); line-height: 1.4; padding-bottom: 30px; border-bottom: 2px solid #fff; }
.w74-benefits__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 30px; padding: 32px 0 30px; border-bottom: 1px solid #fff; }
.w74-benefit h3 { display: flex; align-items: center; gap: 4px; font-size: clamp(20px, 1.8vw, 26px); line-height: 1.5; font-weight: 700; color: #fcfcfc; }
.w74-benefit h3 img { flex: none; width: 35px; height: auto; }
.w74-benefit p { margin-top: 10px; font-size: 16px; line-height: 1.5; color: #fff; }
.w74-benefits__cta { display: flex; justify-content: flex-end; margin-top: 78px; }
.w74-pill { display: inline-flex; align-items: center; justify-content: center; width: 262px; height: 57px; border-radius: 9999px; background: #fff; border: 1px solid rgba(0,0,0,.2); color: var(--accent); font-family: var(--font-en); font-size: 21px; transition: background .25s, color .25s; }
.w74-pill:hover { background: var(--accent); color: #fff; }

/* portfolio */
.w74-portfolio { background: #fff; padding: 122px 0 110px; }
.w74-portfolio__title { text-align: center; font-family: var(--font-en); font-weight: 700; font-size: 20px; line-height: 1.25; letter-spacing: 5px; color: #3d3d3d; margin-bottom: 80px; }
.w74-cat + .w74-cat { margin-top: 90px; }
.w74-cat__name { display: inline-block; font-size: 20px; line-height: 1.25; font-weight: 700; color: #b0b7c1; padding-bottom: 14px; position: relative; }
.w74-cat__name::after { content: ''; position: absolute; left: 0; bottom: 0; width: 120px; height: 2px; background: #b0b7c1; }
.w74-pf-grid { margin-top: 80px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 74px 30px; }
.w74-pf__img { overflow: hidden; aspect-ratio: 610 / 437; background: #eee; }
.w74-pf__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.w74-pf:hover .w74-pf__img img { transform: scale(1.05); }
.w74-pf__name { margin-top: 25px; display: flex; align-items: center; gap: 22px; font-size: 18px; line-height: 1.3; font-weight: 400; color: #212121; }
.w74-pf__name img { flex: none; width: 50px; height: 50px; object-fit: contain; }
.w74-pf__desc { margin-top: 2px; padding-left: 58px; font-size: 16px; line-height: 1.15; color: #848484; }

/* responsive */
@media (max-width: 960px) {
  .w74-intro { padding: 90px 0; }
  .w74-svc { padding: 90px 0 30px; }
  .w74-dark { padding: 60px 0 90px; }
  .w74-dark--first { padding-top: 90px; }
  .w74-boxes { grid-template-columns: 1fr; gap: 16px; margin-top: 40px; }
  .w74-box { min-height: 0; font-size: 19px; line-height: 1.8; }
  .w74-cases { padding: 90px 0; }
  .w74-cases__rows { margin-left: 0; margin-top: 50px; }
  .w74-case { padding-left: 0; }
  .w74-benefits { padding: 90px 0; }
  .w74-portfolio { padding: 90px 0 70px; }
}
@media (max-width: 640px) {
  .w74-label { font-size: 15px; letter-spacing: 3px; }
  .w74-intro__eyebrow { font-size: 18px; }
  .w74-intro__title { line-height: 1.4; }
  .w74-intro__text br { display: none; }
  .w74-svc__list { margin-top: 36px; padding: 20px 0; }
  .w74-svc__list li { min-height: 0; padding: 10px 0; align-items: flex-start; }
  .w74-svc__list li img { width: 24px; margin-top: 1px; }
  .w74-case__list { padding-left: 22px; line-height: 1.7; }
  .w74-case__list li + li { margin-top: 6px; }
  .w74-benefits__grid { grid-template-columns: 1fr; }
  .w74-benefits__cta { justify-content: center; margin-top: 48px; }
  .w74-pf-grid { grid-template-columns: 1fr; gap: 48px; margin-top: 40px; }
  .w74-cat + .w74-cat { margin-top: 70px; }
  .w74-portfolio__title { margin-bottom: 50px; }
  .w74-pf__name { margin-top: 18px; gap: 12px; font-size: 17px; }
  .w74-pf__name img { width: 44px; height: 44px; }
  .w74-pf__desc { margin-top: 6px; padding-left: 56px; font-size: 15px; line-height: 1.5; }
}