/* 메디힐 포트폴리오 (테스트) - 클래스는 mh_ 접두어로 기존 사이트 CSS와 충돌 방지
 * 시안을 섹션(1~6)별 이미지로 내보낸 것을 시안 위치/간격 그대로 쌓음. PC 2x(3840) / 모바일 4x(1500)
 * 위치·여백은 시안 px × --u(화면폭/1920, 모바일은 /375) 로 화면 크기에 비례 */
.mh_wrap { --hd: 80px; padding-top: var(--hd); overflow: hidden; background: #fff; container-type: inline-size; }
.mh_wrap * { box-sizing: border-box; margin: 0; padding: 0; }
.mh_wrap picture, .mh_wrap img { display: block; width: 100%; height: auto; }
.mh_wrap section { position: relative; --u: calc(100cqw / 1920); }

/* 섹션 사이 여백: 시안(PC 프레임 12,213 / 모바일 5,435)에서 읽은 값. 3→4→5→6 은 시안에서도 붙어 있음 */
.mh_wrap .mh_feed { margin-top: calc(155 * var(--u)); height: calc(885 * var(--u)); }
.mh_wrap .mh_concept { margin-top: calc(233 * var(--u)); }

/* 01 히어로: 소닉슬립과 같은 규칙 - 헤더 아래 한 화면(PC 100vh-헤더, 태블릿 90vh, 모바일 600px)
 * 시안 이미지(1920x1080 / 375x600)를 --s 배율로 아래 기준 가운데 정렬(cover). 이미지의 원 버튼 자리에 실제 원 버튼+회전 링을 정확히 겹침:
 * 시안 그대로 링 중심 = 아래에서 160px(PC, 링 160px·원 62%) / 100px(모바일, 링 100px) × 배율 → 소닉슬립(bottom 80px+링 160px / bottom 50px+링 100px)과 같은 위치 */
.mh_wrap .mh_hero { --H: max(calc(100vh - var(--hd)), 600px); height: var(--H); overflow: hidden; --s: max(calc(100cqw / 1920), calc(var(--H) / 1080)); }
@supports (height: 100svh) { .mh_wrap .mh_hero { --H: max(calc(100svh - var(--hd)), 600px); } }
.mh_hero_bg { position: absolute; inset: 0; }
.mh_wrap .mh_hero_bg img { position: absolute; bottom: 0; left: calc(50% - 960 * var(--s)); width: calc(1920 * var(--s)); max-width: none; height: auto; }
.mh_scroll_btn { position: absolute; left: 50%; bottom: calc(80 * var(--s)); z-index: 2; width: calc(160 * var(--s)); transform: translateX(-50%); }
.mh_ring { animation: mh_rotate 8s linear infinite; }
.mh_round { position: absolute; top: 50%; left: 50%; width: 62%; height: 62%; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #0095ff; }
.mh_wrap .mh_round img { width: calc(25 * var(--s)); height: auto; }
@keyframes mh_rotate { to { transform: rotate(360deg); } }
.mh_info { background: #110768; }

/* 02 피드(소닉슬립과 같은 슬라이더): 폰 위/아래 조각 + 본체 사이로 카드가 한 장씩 넘어가고 가운데 카드가 폰 화면에 멈춤 (위치는 시안 px × --u) */
.mh_wrap .mh_phone_top, .mh_wrap .mh_phone_bottom { position: absolute; left: 50%; width: calc(421 * var(--u)); transform: translateX(-50%); z-index: 1; }
.mh_wrap .mh_phone_top { top: 0; }
.mh_wrap .mh_phone_bottom { top: calc(689 * var(--u)); }
.mh_phone_body { position: absolute; left: 50%; top: calc(230 * var(--u)); width: calc(411 * var(--u)); height: calc(470 * var(--u)); transform: translateX(-50%); background: #0b0f12; box-shadow: inset calc(5 * var(--u)) 0 0 #3c3e3b, inset calc(-5 * var(--u)) 0 0 #3c3e3b; }  /* 소닉슬립과 같은 폰/카드 위치 */
.mh_slider { position: absolute; left: 0; right: 0; top: calc(241 * var(--u)); z-index: 2; }
.mh_track { display: flex; align-items: center; gap: calc(21 * var(--u)); width: max-content; list-style: none; will-change: transform; }
.mh_track li { flex: none; position: relative; transition: width 1.2s cubic-bezier(.4, 0, .2, 1); }
/* 가운데 카드가 폰 화면(PC 449x575.5)을 가득 채우도록 '크기를 실제로 키움' → 옆 카드를 밀어내서 카드 사이 간격(21)이 그대로 유지됨.
 * Summer 360→459.8 / 캘린더 450→576 (피그마: Summer 360x451, WELCOME 449x576, 캘린더 450x450) (WELCOME 은 이미 폰 화면 크기). JS(script.js)의 카드 크기 값과 같아야 함 */
.mh_track li.is_focus { z-index: 3; }
.mh_track li { width: calc(448 * var(--u)); }  /* 소닉슬립처럼 카드 5장 모두 448x448 정사각형, 가운데로 와도 커지지 않음 */
.mh_track li img { aspect-ratio: 1; object-fit: cover; }
.mh_track.is_moving { transition: transform 1.2s cubic-bezier(.4, 0, .2, 1); }

/* 03 컨셉: 제목 + 컬러칩 4칸 (PC 한 줄, 모바일 2x2) */
.mh_chips { display: flex; }
.mh_chips picture { flex: 0 0 25%; }
/* 칸마다 따로 잘린 이미지라, 화면 배율 때문에 경계가 소수점 픽셀이면 흰 배경이 가는 선으로 비침 → 이웃 칸을 1px 겹침 */
.mh_chips picture + picture { flex-basis: calc(25% + 1px); margin-left: -1px; }
/* 1px 넓어진 칸이 세로로 늘어나 전체 높이가 달라지지 않게 높이를 시안 값으로 고정(PC 585) */
.mh_wrap .mh_chips picture { height: calc(585 * var(--u)); }
.mh_wrap .mh_chips img { height: 100%; object-fit: cover; }

/* 04 / 05 / 06 */
.mh_ad { background: #02060a; }
.mh_shop { background: #f4f4f4; overflow: hidden; }
.mh_more { background: #110768; }
/* 섹션 경계의 가는 선 방지: 이미지 높이가 소수점이면 화면 배율에 따라 흰 배경이 1px 선으로 비침 → 다음 섹션을 1px 위로 올려 덮고,
 * 이미지는 원래 위치에 오도록 같은 만큼 위쪽 여백(섹션 첫 줄 색)을 줌. 아래 섹션 위치는 그대로.
 * SHOPPING LIVE 는 이미지 맨 위에 카드가 붙어 있어 여백을 주면 선이 생기므로 여백 없이 1px 겹치고 아래 여백으로 보정 */
.mh_wrap .mh_ad, .mh_wrap .mh_more { margin-top: -1px; padding-top: 1px; }
.mh_wrap .mh_shop { margin-top: -1px; margin-bottom: 1px; }
/* 06 맨 위 띠 롤링(왼쪽): 한 바퀴 2개분 타일 3장을 이어 붙이고 1/3(타일 1장)만 이동 → 처음과 똑같아 끊김 없음 */
.mh_band { overflow: hidden; background: #110768; }
.mh_band_track { display: flex; width: max-content; animation: mh_band 24s linear infinite; will-change: transform; }
.mh_wrap .mh_band_tile { flex: none; width: calc(1610 * var(--u)); }   /* PC 3220px / 2x */
@keyframes mh_band { to { transform: translateX(-33.3333%); } }

/* 스크롤 모션: JS 가 .mh_motion 을 붙였을 때만 숨김 상태로 시작 (JS 가 꺼져 있어도 내용은 보임) */
.mh_motion [data-mh] { opacity: 0; transition: opacity .9s ease, transform 1s cubic-bezier(.2, .7, .2, 1); }
.mh_motion [data-mh="up"] { transform: translateY(48px); }
.mh_motion [data-mh="zoom"] { transform: scale(1.04); }
.mh_motion [data-mh].is_in { opacity: 1; transform: none; }
/* 컬러칩: 왼쪽부터 차례로 */
.mh_motion .mh_chips[data-mh] { opacity: 1; transform: none; }
.mh_motion .mh_chips picture { clip-path: inset(0 100% 0 0); transition: clip-path 1.1s cubic-bezier(.7, 0, .2, 1); }
.mh_motion .mh_chips picture:nth-child(2) { transition-delay: .15s; }
.mh_motion .mh_chips picture:nth-child(3) { transition-delay: .3s; }
.mh_motion .mh_chips picture:nth-child(4) { transition-delay: .45s; }
.mh_motion .mh_chips.is_in picture { clip-path: inset(0 0 0 0); }
/* 히어로: 열리자마자 배경이 천천히 줄어들고 링은 늦게 나타남 */
/* 이미지에 원 버튼이 박혀 있어 확대하면 실제 버튼과 어긋나므로 확대 없이 밝아지기만 함 */
.mh_motion .mh_hero_bg img { animation: mh_fadein 2.2s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes mh_fadein { from { filter: brightness(.6); } to { filter: none; } }
.mh_motion .mh_scroll_btn { opacity: 0; transition: opacity 1s ease .8s; }
.mh_motion .mh_hero.is_in .mh_scroll_btn { opacity: 1; }

@media (max-width: 767px) {
  /* 모바일: 소닉슬립과 같이 높이 600px (시안 375x600). 링 지름 100px, 원 버튼 아래 50px */
  .mh_wrap .mh_hero { --H: 600px; height: 600px; --s: max(calc(100cqw / 375), 1px); }
  .mh_wrap .mh_hero_bg img { left: calc(50% - 187.5 * var(--s)); width: calc(375 * var(--s)); }
  .mh_scroll_btn { width: calc(100 * var(--s)); bottom: calc(50 * var(--s)); }
  .mh_wrap .mh_round img { width: calc(20 * var(--s)); }
  .mh_wrap section { --u: calc(100cqw / 375); }
  .mh_wrap .mh_feed { margin-top: calc(49 * var(--u)); height: calc(364 * var(--u)); }
  .mh_wrap .mh_concept { margin-top: calc(97 * var(--u)); }
  .mh_ad { background: #0d0d0d; }
  .mh_wrap .mh_phone_top, .mh_wrap .mh_phone_bottom { width: calc(177.25 * var(--u)); }
  .mh_wrap .mh_phone_bottom { top: calc(300.75 * var(--u)); }
  .mh_phone_body { top: calc(109 * var(--u)); width: calc(176 * var(--u)); height: calc(192 * var(--u)); box-shadow: inset calc(2 * var(--u)) 0 0 #3c3e3b, inset calc(-2 * var(--u)) 0 0 #3c3e3b; }
  .mh_slider { top: calc(109 * var(--u)); }
  .mh_track { gap: calc(9.5 * var(--u)); }
  .mh_track li { width: calc(191.5 * var(--u)); }
  .mh_chips { flex-wrap: wrap; }
  .mh_chips picture { flex: 0 0 50%; }
  .mh_chips picture + picture { flex-basis: 50%; margin-left: 0; }
  .mh_chips picture:nth-child(2), .mh_chips picture:nth-child(4) { flex-basis: calc(50% + 1px); margin-left: -1px; }
  .mh_chips picture:nth-child(3), .mh_chips picture:nth-child(4) { margin-top: -1px; }
  .mh_chips picture:nth-child(3) { flex-basis: 50%; }
  .mh_wrap .mh_chips picture { height: calc(170.5 * var(--u)); }   /* 모바일: 2줄 합계 340 (겹침 1px 포함) */
  .mh_wrap .mh_band_tile { width: calc(688 * var(--u)); }                /* 모바일 2752px / 4x */
  .mh_band_track { animation-duration: 14s; }
  .mh_motion [data-mh="up"] { transform: translateY(32px); }
  .mh_motion .mh_chips picture:nth-child(3) { transition-delay: .45s; }   /* 2x2: 위 줄 → 아래 줄 순서 */
  .mh_motion .mh_chips picture:nth-child(2) { transition-delay: .15s; }
  .mh_motion .mh_chips picture:nth-child(4) { transition-delay: .6s; }
}

@media (prefers-reduced-motion: reduce) {
  .mh_ring, .mh_band_track { animation: none; }
  .mh_motion [data-mh], .mh_motion .mh_hero_bg img, .mh_motion .mh_scroll_btn, .mh_motion .mh_chips picture { transition: none; }
}

/* ---------- PC 히어로 (소닉슬립과 같은 방식) ----------
 * 글자·원이 없는 깨끗한 배경(1920x1080)을 화면 가득(cover), 글자는 42% 위치, 원 버튼은 아래 80px·지름 160px 고정.
 * 모바일은 위쪽 규칙(시안 배율) 그대로 */
@keyframes mh_kenburns { from { transform: scale(1.12); filter: brightness(.6); } to { transform: scale(1); filter: none; } }
.mh_wrap .mo_br { display: none; }
@media (min-width: 768px) {
  .mh_wrap .mh_hero_bg img { left: 0; bottom: auto; top: 0; width: 100%; height: 100%; object-fit: cover; }
  .mh_motion .mh_hero_bg img { animation-name: mh_kenburns; }
  .mh_wrap .mh_hero_txt { position: absolute; left: 0; right: 0; top: 42%; z-index: 1; transform: translateY(-50%); padding: 0 20px; text-align: center; color: #fff; font-family: 'Pretendard Variable', Pretendard, -apple-system, 'Apple SD Gothic Neo', sans-serif; letter-spacing: 0; }
  .mh_hero_txt p { font-size: 44px; font-weight: 200; line-height: 1.25; }
  .mh_hero_txt h2 { font-size: 64px; font-weight: 700; line-height: 1.25; }
  .mh_motion .mh_hero_txt p[data-mh] { transition-delay: .5s; }
  .mh_motion .mh_hero_txt h2[data-mh] { transition-delay: .65s; }
  .mh_wrap .mh_scroll_btn { bottom: 80px; width: 160px; }
  .mh_wrap .mh_round img { width: 25px; }
}
@media (min-width: 768px) and (max-width: 1199px) {
  .mh_hero_txt p { font-size: 34px; }
  .mh_hero_txt h2 { font-size: 49px; }
  .mh_wrap .mh_scroll_btn { width: 130px; bottom: 65px; }
}
@media (max-width: 767px) {
  .mh_wrap .mo_br { display: inline; }
  .mh_wrap .mh_hero_txt { display: none; }
}

/* 02 피드 크기: 소닉슬립과 같은 폰 크기 (PC 폰 421px / 모바일 폰 177.25px). 시안 수치 × 배율 */
.mh_wrap .mh_feed { --u: calc(100cqw / 1920); }

/* ---------- 실제 글자 (소닉슬립과 같은 크기/여백) ---------- */
.mh_wrap { font-family: 'Pretendard Variable', Pretendard, -apple-system, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif; letter-spacing: 0; word-break: keep-all; color: #111; }
.mh_wrap .mh_sec_tit { font-weight: 700; font-size: 54px; line-height: 1.2; text-transform: uppercase; }
.mh_wrap .mh_sec_desc { font-size: 20px; line-height: 1.5; letter-spacing: -0.02em; color: #565656; }
.mh_info { color: #fff; }
.mh_info_inner { padding: calc(120 * var(--u)) calc(250 * var(--u)); }
.mh_info_tit { font-size: 54px; font-weight: 700; line-height: 1.2; margin-bottom: 44px; }
.mh_info_meta { display: flex; gap: 30px; font-size: 20px; line-height: 1.2; margin-bottom: 38px; }
.mh_info_meta div { display: flex; gap: 14px; }
.mh_info_meta dt { font-weight: 700; }
.mh_info_lead { font-size: 18px; font-weight: 700; line-height: 1.5; color: #f3f3f3; margin-bottom: 16px; }
.mh_info_desc { font-size: 18px; line-height: 1.5; color: #f3f3f3; margin-bottom: 16px; }
.mh_info_desc:last-child { margin-bottom: 0; }
.mh_concept_head { display: flex; align-items: flex-start; height: calc(128 * var(--u)); padding: 0 calc(80 * var(--u)) 0 calc(270 * var(--u)); }
.mh_concept_head .mh_sec_tit { flex: 0 0 calc(575 * var(--u)); }
.mh_concept_head .mh_sec_desc { margin-top: calc(4 * var(--u)); letter-spacing: 0; }
.mh_colors { display: flex; height: calc(585 * var(--u)); }
.mh_colors li { flex: 0 0 25%; display: flex; flex-direction: column; align-items: flex-end; justify-content: flex-end; gap: 7px; padding: 0 40px 40px 0; font-size: 20px; font-weight: 700; line-height: 1.2; list-style: none; }
.mh_colors .c1 { background: #00ff02; color: #111; box-shadow: 1px 1px 0 0 #00ff02; }
.mh_colors .c2 { background: #110768; color: #fff; box-shadow: 1px 1px 0 0 #110768; }  /* 칸 사이 소수점 픽셀 틈으로 배경이 가는 선처럼 비치는 것 방지 */
.mh_colors .c3 { background: #111; color: #fff; box-shadow: 1px 1px 0 0 #111; }
.mh_colors .c4 { background: #f4f4f4; color: #595959; box-shadow: 1px 1px 0 0 #f4f4f4; }
.mh_wrap .mh_ad, .mh_wrap .mh_shop { position: relative; }
.mh_ad_head { position: absolute; z-index: 2; left: calc(280 * var(--u)); right: calc(270 * var(--u)); top: calc(291 * var(--u)); display: flex; justify-content: space-between; align-items: flex-end; color: #fff; }
.mh_ad_head .mh_sec_desc { color: #fff; }
.mh_label { display: block; font-weight: 500; font-size: 20px; line-height: 1.2; color: #00ff02; margin-bottom: 6px; }
.mh_shop_head { position: absolute; z-index: 2; left: calc(280 * var(--u)); top: calc(199 * var(--u)); }
.mh_shop_head .mh_sec_tit { line-height: 1.3; color: #0c0c0c; }
.mh_shop_head .mh_sec_desc { margin-top: 30px; color: #6e6e6e; }
.mh_wrap .mh_wrap_br { display: none; }
.mh_motion [data-mh="left"] { opacity: 0; transform: translateX(-60px); }
.mh_motion [data-mh="left"].is_in { opacity: 1; transform: none; }
.mh_motion [data-mh-delay="150"] { transition-delay: .15s; }
.mh_motion .mh_colors[data-mh="wipe"] { opacity: 1; transform: none; }
.mh_motion .mh_colors li { clip-path: inset(0 100% 0 0); transition: clip-path 1.1s cubic-bezier(.7, 0, .2, 1); }
.mh_motion .mh_colors li:nth-child(2) { transition-delay: .15s; }
.mh_motion .mh_colors li:nth-child(3) { transition-delay: .3s; }
.mh_motion .mh_colors li:nth-child(4) { transition-delay: .45s; }
.mh_motion .mh_colors.is_in li { clip-path: inset(0 0 0 0); }

@media (max-width: 767px) {
  .mh_wrap .mh_feed { --u: calc(100cqw / 375); }
  .mh_wrap .mh_sec_tit { font-size: 24px; line-height: 1.3; }
  .mh_wrap .mh_sec_desc { font-size: 14px; }
  .mh_info_inner { padding: 60px 20px; }
  .mh_info_tit { font-size: 24px; margin-bottom: 20px; }
  .mh_info_meta { flex-direction: column; gap: 10px; font-size: 16px; margin-bottom: 20px; }
  .mh_info_meta div { gap: 7px; }
  .mh_info_lead, .mh_info_desc { font-size: 14px; margin-bottom: 15px; }
  .mh_info_desc:last-child { margin-bottom: 0; }
  .mh_info br, .mh_concept br, .mh_ad br, .mh_shop br { display: none; }
  .mh_concept_head { flex-direction: column; height: calc(157 * var(--u)); padding: 0 20px; }
  .mh_concept_head .mh_sec_tit { flex: none; }
  .mh_concept_head .mh_sec_desc { margin: 20px 0 0; }
  .mh_colors { flex-wrap: wrap; height: calc(340 * var(--u)); }
  .mh_colors li { flex: 0 0 50%; height: calc(170 * var(--u)); gap: 5px; padding: 0 20px 21px 0; font-size: 14px; }
  .mh_ad_head { left: 20px; right: 20px; top: calc(80 * var(--u)); flex-direction: column; align-items: flex-start; }
  .mh_ad_head .mh_sec_desc { margin-top: 20px; }
  .mh_label { font-size: 12px; margin-bottom: 10px; }
  .mh_shop_head { left: 20px; top: calc(80 * var(--u)); width: 240px; }  /* 4줄(시안 줄바꿈 그대로)이라 이미지에 닿지 않음 */
  .mh_shop_head .mh_sec_desc { margin-top: 20px; }
  .mh_motion [data-mh="left"] { transform: translateX(-30px); }
}
.mh_wrap .mh_concept_head .mh_sec_tit { white-space: nowrap; }

/* 모바일 좌우 20px: AD CREATIVE 배경(mo_04b)과 카드 모음(mo_04c, 폭 335px)을 따로 두고 카드 모음만 좌우 20px 안쪽에 */
.mh_wrap .mh_ad_co { display: none; }
@media (max-width: 767px) {
  .mh_wrap .mh_ad_co { display: block; position: absolute; left: 20px; width: calc(100% - 40px); top: 15.2853%; }
}

/* ---------- 태블릿 (768~1199px): PC 배치를 그대로 쓰되 글자는 화면 폭에 맞춰 줄이고, 이미지 위 제목 블록은 폭을 제한해 이미지와 겹치지 않게 ---------- */
@media (min-width: 768px) and (max-width: 1199px) {
  .mh_wrap .mh_sec_tit { font-size: clamp(26px, calc(54 * var(--u) * 1.5), 54px); }
  .mh_wrap .mh_sec_desc { font-size: clamp(13px, calc(20 * var(--u) * 1.5), 20px); }
  .mh_info_inner { padding: calc(100 * var(--u)) 48px; }
  .mh_info_tit { font-size: clamp(28px, calc(54 * var(--u) * 1.5), 54px); margin-bottom: 28px; }
  .mh_info_meta { font-size: clamp(14px, calc(20 * var(--u) * 1.5), 20px); gap: 20px; margin-bottom: 24px; flex-wrap: wrap; }
  .mh_info_lead, .mh_info_desc { font-size: clamp(14px, calc(18 * var(--u) * 1.5), 18px); }
  .mh_concept_head { flex-direction: column; height: auto; padding: 0 48px calc(24 * var(--u)); }
  .mh_concept_head .mh_sec_tit { flex: none; margin-right: 0; }
  .mh_concept_head .mh_sec_desc { margin: 12px 0 0; }
  .mh_concept br, .mh_ad br, .mh_shop br { display: none; }
  .mh_ad_head { left: 48px; right: 48px; top: calc(200 * var(--u)); flex-direction: column; align-items: flex-start; width: calc(100% - 96px); right: auto; }
  .mh_ad_head .mh_sec_desc { margin-top: 12px; }
  .mh_label { font-size: clamp(13px, calc(20 * var(--u) * 1.5), 20px); }
  .mh_shop_head { left: 48px; top: calc(130 * var(--u)); width: 46%; }
  .mh_shop_head .mh_sec_desc { margin-top: 12px; }
  .mh_colors li { font-size: clamp(14px, calc(20 * var(--u) * 1.5), 20px); padding: 0 20px 20px 0; }
}

/* 컨셉 제목/설명: 화면이 좁아지면 설명이 길어져 칩 아래로 가려지므로 1599px 이하는 위아래로 쌓고 높이를 내용에 맞춤 */
@media (min-width: 768px) and (max-width: 1599px) {
  .mh_concept_head { flex-direction: column; height: auto; padding: 0 calc(80 * var(--u)) calc(40 * var(--u)) calc(270 * var(--u)); }
  .mh_concept_head .mh_sec_tit { flex: none; }
  .mh_concept_head .mh_sec_desc { margin: 14px 0 0; }
  .mh_concept br { display: none; }
}
/* 컬러 칩 줄: 칸 사이 소수점 픽셀 틈(브라우저 축소·확대 때 가는 띠)이 흰 배경이 아니라 칸 색으로 이어지도록 뒤에 같은 색 띠를 깔아 둠 (등장 모션이 끝난 뒤부터) */
@media (min-width: 768px) {
  .mh_colors { background: linear-gradient(to right, #00ff02 0 25%, #110768 25% 50%, #111 50% 75%, #f4f4f4 75% 100%); }
  .mh_motion .mh_colors { background: none; }
  .mh_motion .mh_colors.is_in { animation: mh_colors_bg 0s linear 1.7s forwards; }
}
@keyframes mh_colors_bg { to { background: linear-gradient(to right, #00ff02 0 25%, #110768 25% 50%, #111 50% 75%, #f4f4f4 75% 100%); } }