@charset "utf-8";
/* 2026-11-09 메인 모바일 슬로건: 영상(main_scroll_mo_1_n.webm) 대신 코드 애니메이션
   - 글자(SINCE 2000 / 500,000안 / 시력교정 1세대)는 _Skin/1.php 에서 바로 수정 가능
   - 크기는 화면 폭 기준(vw)으로 맞춰 기존 영상과 같은 비율(720:1280) 유지 */
.sc-slogan-mo .slm-stage{position:absolute;inset:0;z-index:0;background:#fff;overflow:hidden}
.sc-slogan-mo .slm-grid{position:absolute;left:4%;right:4%;top:50%;transform:translateY(-50%);display:grid;grid-template-columns:1fr 1fr;gap:2.6vw}
.sc-slogan-mo .slm-tile{position:relative;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center}
.sc-slogan-mo .slm-tile > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.sc-slogan-mo .slm-tile > span{position:relative;z-index:1;color:#fff;font-weight:700;font-size:5.4vw;letter-spacing:-.02em;line-height:1.2;text-align:center;white-space:nowrap;text-shadow:0 1px 6px rgba(0,0,0,.12)}
.sc-slogan-mo .slm-t1{z-index:4}
.sc-slogan-mo .slm-t2{z-index:3}
.sc-slogan-mo .slm-t3{z-index:2;overflow:hidden;clip-path:polygon(50.00% 0.00%, 54.68% 1.31%, 57.99% 4.86%, 60.23% 9.25%, 62.46% 13.63%, 64.69% 18.01%, 66.92% 22.40%, 69.16% 26.78%, 71.39% 31.17%, 73.62% 35.55%, 75.85% 39.93%, 78.09% 44.32%, 80.32% 48.70%, 82.55% 53.09%, 84.78% 57.47%, 87.02% 61.85%, 89.25% 66.24%, 91.48% 70.62%, 93.72% 75.01%, 95.95% 79.39%, 98.18% 83.77%, 99.31% 88.50%, 97.82% 93.13%, 94.15% 96.31%, 89.36% 97.16%, 84.44% 97.16%, 79.52% 97.16%, 74.60% 97.16%, 69.68% 97.16%, 64.76% 97.16%, 59.84% 97.16%, 54.92% 97.16%, 50.00% 97.16%, 45.08% 97.16%, 40.16% 97.16%, 35.24% 97.16%, 30.32% 97.16%, 25.40% 97.16%, 20.48% 97.16%, 15.56% 97.16%, 10.64% 97.16%, 5.85% 96.31%, 2.18% 93.13%, 0.69% 88.50%, 1.82% 83.77%, 4.05% 79.39%, 6.28% 75.01%, 8.52% 70.62%, 10.75% 66.24%, 12.98% 61.85%, 15.22% 57.47%, 17.45% 53.09%, 19.68% 48.70%, 21.91% 44.32%, 24.15% 39.93%, 26.38% 35.55%, 28.61% 31.17%, 30.84% 26.78%, 33.08% 22.40%, 35.31% 18.01%, 37.54% 13.63%, 39.77% 9.25%, 42.01% 4.86%, 45.32% 1.31%)}
.sc-slogan-mo .slm-t4{z-index:1}
.sc-slogan-mo .slm-t3 > img{object-position:50% 70%}
/* 확대되는 사진 (사진 칸 → 화면 전체) */
.sc-slogan-mo .slm-zoom{position:absolute;z-index:5;overflow:hidden;border-radius:11%;opacity:0;pointer-events:none}
.sc-slogan-mo .slm-zoom img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 70%}
.sc-slogan-mo .slm-zoom::after{content:"";position:absolute;inset:0;background:#000;opacity:0;transition:opacity .8s ease}
/* 대기 상태 (스크립트가 준비되면 숨겼다가 재생) */
.sc-slogan-mo .slm-stage.ready .slm-tile{opacity:0}
.sc-slogan-mo .slm-stage.ready .slm-t1{transform:translateX(55%)}
.sc-slogan-mo .slm-stage.ready .slm-t2{transform:translateX(-60%)}
.sc-slogan-mo .slm-stage.ready .slm-t4{transform:translateX(-45%)}
.sc-slogan-mo .slm-stage.ready .slm-t3{transform:translateX(45%)}
/* 재생 */
.sc-slogan-mo .slm-stage.play .slm-tile{opacity:1;transform:none;transition:opacity .5s ease,transform .6s cubic-bezier(.22,.61,.36,1)}
.sc-slogan-mo .slm-stage.play .slm-t1{transition-delay:.35s}
.sc-slogan-mo .slm-stage.play .slm-t2{transition-delay:.85s}
.sc-slogan-mo .slm-stage.play .slm-t4{transition-delay:1.1s}
.sc-slogan-mo .slm-stage.play .slm-t3{transition-delay:1.45s}
.sc-slogan-mo .slm-stage.morph .slm-t3{clip-path:polygon(50.00% 0.00%, 55.95% 0.00%, 61.91% 0.00%, 67.86% 0.00%, 73.82% 0.00%, 79.77% 0.00%, 85.73% 0.00%, 91.66% 0.33%, 96.78% 3.22%, 99.67% 8.34%, 100.00% 14.27%, 100.00% 20.23%, 100.00% 26.18%, 100.00% 32.14%, 100.00% 38.09%, 100.00% 44.05%, 100.00% 50.00%, 100.00% 55.95%, 100.00% 61.91%, 100.00% 67.86%, 100.00% 73.82%, 100.00% 79.77%, 100.00% 85.73%, 99.67% 91.66%, 96.78% 96.78%, 91.66% 99.67%, 85.73% 100.00%, 79.77% 100.00%, 73.82% 100.00%, 67.86% 100.00%, 61.91% 100.00%, 55.95% 100.00%, 50.00% 100.00%, 44.05% 100.00%, 38.09% 100.00%, 32.14% 100.00%, 26.18% 100.00%, 20.23% 100.00%, 14.27% 100.00%, 8.34% 99.67%, 3.22% 96.78%, 0.33% 91.66%, 0.00% 85.73%, 0.00% 79.77%, 0.00% 73.82%, 0.00% 67.86%, 0.00% 61.91%, 0.00% 55.95%, 0.00% 50.00%, 0.00% 44.05%, 0.00% 38.09%, 0.00% 32.14%, 0.00% 26.18%, 0.00% 20.23%, 0.00% 14.27%, 0.33% 8.34%, 3.22% 3.22%, 8.34% 0.33%, 14.27% 0.00%, 20.23% 0.00%, 26.18% 0.00%, 32.14% 0.00%, 38.09% 0.00%, 44.05% 0.00%);transition:opacity .5s ease,transform .6s ease,clip-path .6s cubic-bezier(.65,0,.35,1)}
.sc-slogan-mo .slm-stage.zoom .slm-zoom{opacity:1;transition:left .8s cubic-bezier(.65,0,.35,1),top .8s cubic-bezier(.65,0,.35,1),width .8s cubic-bezier(.65,0,.35,1),height .8s cubic-bezier(.65,0,.35,1),border-radius .8s cubic-bezier(.65,0,.35,1)}
.sc-slogan-mo .slm-stage.full .slm-zoom{left:0 !important;top:0 !important;width:100% !important;height:100% !important;border-radius:0;opacity:1}
.sc-slogan-mo .slm-stage.full .slm-zoom::after{opacity:.35}
/* 끝난 뒤(또는 움직임 줄이기 설정): 마지막 장면만 보여 줌 */
.sc-slogan-mo .slm-stage.done .slm-grid{visibility:hidden}
.sc-slogan-mo .slm-stage.done .slm-zoom{transition:none}
@media (prefers-reduced-motion:reduce){.sc-slogan-mo .slm-stage *{transition:none !important}}

/* 2026-11-09 PC 슬로건 도형 글자 (기존 이미지 속 글자 → 실제 글자). 도형 크기에 맞춰 글자 크기 자동 조절 */
.sc-slogan .img-box:not(.ani-box){container-type:inline-size}
.sc-slogan .img-box .slg-txt{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:3.6rem;font-size:13.2cqw;letter-spacing:-.02em;line-height:1.2;white-space:nowrap;text-shadow:0 1px 6px rgba(0,0,0,.12);pointer-events:none}

/* 2026-11-09 모바일 '당신을 위한 폭넓은 선택'(01~04) 영역 보완
   - 오른쪽 화살표(자세히 보기) 버튼: 하단 고정 메뉴에 가려지던 것을 제목 오른쪽으로 옮기고 남색으로 잘 보이게
   - 아래쪽 흰색으로 바래는 구간을 줄여 흰 여백이 덜 보이게 (76% → 90% 지점부터) */
@media (max-width:768px){
  .sc-service .text-area .title-box{padding-right:6.6rem}
  .sc-service .text-area .link-service{position:absolute;top:0;right:0;margin-top:0;width:5.2rem;height:5.2rem;border:0;background-color:#163348;box-shadow:0 4px 12px rgba(22,51,72,.25)}
  .sc-service .text-area .ico-service{width:2rem;height:2rem}
  .sc-service .bg-area .bg-item:nth-child(1){background:linear-gradient(rgba(255,255,255,0) 90%,#fff 100%),linear-gradient(98deg,#2363b1 2.58%,#5ccac1 50.63%,#f2b155 97.73%)}
  .sc-service .bg-area .bg-item:nth-child(2){background:linear-gradient(rgba(255,255,255,0) 90%,#fff 100%),linear-gradient(97deg,#5a80b5 2.49%,#8185cc 46.73%,#c3af9c 90.96%)}
  .sc-service .bg-area .bg-item:nth-child(3){background:linear-gradient(rgba(255,255,255,0) 90%,#fff 100%),linear-gradient(98deg,#c39f9d 5.74%,#69b4bf 90.91%)}
  .sc-service .bg-area .bg-item:nth-child(4){background:linear-gradient(rgba(255,255,255,0) 90%,#fff 100%),linear-gradient(98deg,#7eafec 5.74%,#e6d2e0 48.32%,#bc6d38 90.91%)}
}