@charset "UTF-8";

/* ========== 인트로 ========== */
.main-content{overflow:visible!important;}

#solution .intro{ margin-top:160px; }
#solution .intro .wrap{ text-align:center; font-size:18px; }
#solution .intro .oneline-desc{ color:#1C64FF; font-size:18px;}
#solution .intro h2{ font-size:96px; font-weight:700; line-height:1.2}
#solution .intro .solution-summary{ margin-top:40px; font-size:24px; word-break:keep-all; }
#solution .intro .solution-banner{ margin: 77px -288px 0 -288px; }
#solution .intro .solution-banner{
  margin:77px auto;          /* 좌우 마이너스 마진 제거 */
  width:100vw;              /* 브라우저 가로 전체 */
  position:relative;
  left:50%;
  transform:translateX(-50%); /* 가운데 정렬 */
}

#solution .banner, #solution .explantion {
  margin-top:120px;
}
#mainBannerSwiper {
  max-width:1760px;
}
#mainBannerSwiper .swiper-slide {
  max-width: 1760px;
}
#mainBannerSwiper .swiper-slide img {
  width:100%;
  height:100%;
  min-height: 340px;
  object-fit: cover;
}
#mainBannerSwiper .swiper-slide video {
  width:100%;
  height:100%;
}

/* 메인 비주얼 배너 */
#mainBannerSwiper .swiper-pagination-bullet { background-color:#fff; opacity: .7;}
#mainBannerSwiper .swiper-pagination-bullet-active { width:40px; border-radius: 24px; background-color:#fff; opacity: 1;}

#mainBannerSwiper .solution-banner{
  position:relative;
}
#mainBannerSwiper .swiper-pagination {
  margin-bottom:25px;
}
#mainBannerSwiper .swiper-button-prev,
#mainBannerSwiper .swiper-button-next{
  width:58px;
  height:114px;
  top:50%;
  margin-top:-57px;
}
.swiper-button-next:after, .swiper-button-prev:after {
  display:none;
}

#solution .solution-banner .swiper-button-prev{ left:80px; }
#solution .solution-banner .swiper-button-next{ right:80px; }

/* 모바일에서는 버튼 숨김(스와이프만 사용) */
@media (max-width:768px){
  #mainBannerSwiper .swiper-button-prev,
  #mainBannerSwiper .swiper-button-next{
    display:none;
  }
}

#solution .explantion .wrap { display:flex;}
#solution .solution-tags{ flex:1; display:flex; flex-wrap:wrap; gap:16px; align-self:start;max-width:485px;}
#solution .solution-tags .chip{ border-radius:8px; background:#E4E4E4; font-size:18px; font-weight:700; color:#222; padding:8px 16px; border:none; cursor:pointer;transition:transform .18s ease;}
#solution .solution-tags .chip:hover{ transform:translateY(-2px); background-color: #1C64FF; color:#fff;}
#solution .solution-explantion {flex:1; margin-left:90px; word-break:keep-all;font-size:20px;}

/* ========== 본문 2열(좌: LeftNav / 우: 컨텐츠) ========== */
#solution .item-wrap{ display:flex; align-items:flex-start; justify-content:center; margin-top:160px; position:relative; overflow-x:clip; overflow-y:visible; }
#solution .item-wrap .left-wrap{
  width: 226px;
  position:sticky; top:calc(var(--gnb-h,89px) + 24px);
  opacity:0; transform:translateX(-24px);
  transition:opacity .45s ease, transform .45s ease;
  z-index:20; padding-left:16px;
}
#solution .item-wrap .left-wrap.is-visible{ opacity:1; transform:translateX(0) }
#solution .item-wrap .left-wrap.is-leave{ opacity:0; transform:translateX(-24px); transition-duration:.35s }

#solution .item-wrap .left-indicator ul{ list-style:none; margin:0; padding:0 }
#solution .item-wrap .left-indicator li{ position:relative }
#solution .item-wrap .left-indicator li img{ height: 15px; display: inline-block; margin-left: 11px; margin-bottom: 5px }
#solution .item-wrap .left-indicator a{
  position:relative; display:block; width:130px; padding:13px 20px; font-weight:700;
  background:#EEF0F4; color:#222; transition:background-color .2s ease, color .2s ease, width .2s ease, padding .2s ease;
}
#solution.en .item-wrap .left-indicator a{
  width:135px;
}
#solution .item-wrap .left-indicator li:hover a,
#solution .item-wrap .left-indicator li.is-active a{
  width:180px; padding:24px 20px; background:#1C64FF; color:#fff;
}
#solution.en .item-wrap .left-indicator li:hover a,
#solution.en .item-wrap .left-indicator li.is-active a{
  width:180px; padding:24px 60px 24px 20px; background:#1C64FF; color:#fff;
}
/* 좌측 화살표(현재/호버 표시) */
#solution .item-wrap .left-indicator .chev{
  position:absolute; top:45%; right:18px; transform:translateY(-50%);
  display:none;
}
#solution .item-wrap .left-indicator li:hover .chev,
#solution .item-wrap .left-indicator li.is-active .chev{ display:block; }
#solution .item-wrap .left-indicator .chev svg{ width:100%; height:100%; stroke:#fff }

/* Left CTA/SNS */
#solution .left-nav{ margin-top:86px }
#solution .left-nav ul{ list-style:none; margin:0; padding:0 }
#solution .left-nav li + li{ margin-top:8px }
#solution .nav-btn{
  border-radius:8px; width:180px; padding:15px 20px; background:#222; text-align:left; color:#fff; border: none;
  font-size:16px; font-weight:700; display:flex; align-items:center; justify-content:space-between; cursor:pointer;
}
#solution .nav-btn:disabled {cursor:default;opacity: .3;pointer-events: none;}
#solution .nav-btn img {width:26px}
#solution .left-sns{ width:180px; margin:18px 0 34px}
#solution .left-sns p{ padding:20px 0; text-align:center; font-size:14px; color:#666 }
#solution .left-sns ul{ display:flex; justify-content:space-between }
#solution .left-sns ul li img {width:54px}
#solution .item-wrap .left-sns .btn-sns-url {
  width: 54px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: #B5C7ED;
  font-size: 14px;
  color: #fff;
}

#solution .item-content-wrap{ width:990px; padding:0 20px 0 30px; position:relative; z-index:1;
  --notes-clip-left:-10px; --notes-clip-right:-10px; }
#solution .item-content{ }
#solution .item-content + .item-content{ margin-top:120px }
#solution .item-content h3{ font-size:48px; font-weight:700; line-height:1.6; letter-spacing:-3px }
#solution .solution-content{ margin-top:48px }
#solution .solution-content-item h4{ font-size:20px; font-weight:700; line-height:1.3; text-indent:-24px; padding-left:24px }
#solution .solution-content-item .solution-content-text-wrap{
  border-radius:24px; border:1px solid #eee; box-shadow:8px 8px 32px -10px #0000001A; padding:22px 32px; margin-top:18px;
  display:flex; flex-direction:column;
}
#solution .solution-content-item .solution-content-text-wrap p{ line-height:1.6; text-indent:-12px; padding-left:12px }
#solution .solution-content-item .solution-content-text-wrap p + p{ margin-top:12px }
#solution .solution-content-item .solution-content-text-wrap img{ margin:28px 0 12px; align-self:center }
#solution .solution-content-item .solution-content-text-wrap .customers img{ margin:unset; max-height:54px }


#solution .info-wrap { margin-top:57px;display:grid;grid-template-columns:1fr 1fr; gap:32px;}
#solution .info-wrap .info-box { padding:40px;color:#222; background-color:#E5E9F3;}
#solution .info-wrap .info-box:hover { background-color:#1C64FF; color:#fff;}
#solution .info-wrap .info-box .numbering { color:#1C64FF;font-size:20px;font-weight:700;line-height:1;margin-top:5px;}
#solution .info-wrap .info-box:hover .numbering{ color:#fff;}
#solution .info-wrap .info-box .image-wrap { min-height: 220px;margin-top:24px;background-size: cover;background-position: center;background-repeat: no-repeat;display:flex;align-items:center;justify-content:center;}
#solution .info-wrap .info-box .title { font-size:32px;font-weight:700;margin-top:24px;line-height:1.3;}
#solution .info-wrap .info-box .sub-title { font-size:18px;font-weight:700;line-height:1;margin-top:9px;min-height:18px;}
#solution .info-wrap .info-box .info-content { margin-top:30px; font-size:16px;}
#solution .info-wrap .info-box .info-content br { margin-top:16px;}
#solution .info-wrap .info-box .more-btn-wrap { margin-top:16px;}
#solution .info-wrap .info-box .more-btn-wrap a { display:flex;align-items:end;justify-content:end;font-size:18px;text-decoration:underline; text-underline-offset:3px;font-weight:700;letter-spacing:-0.5px;}
#solution .info-wrap .info-box .more-btn-wrap a svg { margin-right:4px;}

#solution .info-wrap.func .info-box .title { margin-top:0;}
#solution .info-wrap.func .info-box .info-content { margin-top:48px; font-size:16px;}

#solution .info-wrap.usecase .info-box .title { margin-top:0;}
#solution .info-wrap.usecase .info-box .info-content { margin-top:24px;}

#solution .info-wrap.extra .info-box .title { margin-top:0;}
#solution .info-wrap.extra .info-box .info-content { margin-top:24px;}

/* 뷰어 툴바/풋터 위치 조정 */
.viewer-toolbar>ul { margin-right:65px;}
.viewer-toolbar>ul>li:before { transform:scale(2);}
.viewer-toolbar >ul>li { width:56px;height:56px;padding:16px!important;}
.viewer-toolbar>ul>li+li { margin-left:8px;}
.viewer-footer { bottom:16px;}
.viewer-button.viewer-close { left:calc(50% + 36px)!important;top:unset!important;right:unset!important;bottom:27px!important;width:56px!important;height:56px!important;background-color:darkgray}
.viewer-button.viewer-close:before { transform:scale(2);bottom:18px!important;left:18px!important;}

/* 우측 컨텐츠 좌/우 마스크(배경 누수 방지) */
#solution .item-content-wrap::before,
#solution .item-content-wrap::after{
  content:""; position:absolute; top:0; bottom:0; z-index:5; pointer-events:none; background:var(--bg-sub, #fff);
}
#solution .item-content-wrap::before{ left:-100vw; right:calc(100% + var(--notes-clip-left,16px)); }
#solution .item-content-wrap::after{ left:calc(100% + var(--notes-clip-right,16px)); right:-100vw; }

/* ========== 섹션별(주요특징/주요기능/적용/산업/고객) ========== */
#solution .feat .list{ display:flex; flex-direction:column; gap:12px }
#solution .feat .item{
  background:#fff; border:1px solid var(--sol-line); border-radius:12px; padding:14px;
  display:grid; grid-template-columns:1fr 260px; gap:18px; align-items:center;
}
#solution .feat .badge{ display:inline-block; background:var(--sol-badge); color:#fff; font-size:12px; padding:2px 8px; border-radius:999px; margin-right:8px }
#solution .feat p{ margin:6px 0 0; color:#53617A; font-size:13px }
#solution .feat .img{ background:#f6f8fc; border:1px solid var(--sol-line); border-radius:8px; overflow:hidden }

#solution .func .grid{ display:grid; grid-template-columns:1fr 1fr; gap:22px }
#solution .func .cell{ padding:16px }
#solution .func .ttl{ font-weight:700; margin-bottom:8px; font-size:14px; color:#3a4a6a }
#solution .func .img{ border:1px solid var(--sol-line); border-radius:12px; overflow:hidden; background:#fff }

#solution .apply .list{ margin-top:10px; color:#53617A; font-size:14px }
#solution .sector .pill{
  height:44px; border:1px solid var(--sol-line); border-radius:12px; display:flex; align-items:center; padding:0 14px; color:#929fb7;
}
#solution .clients .logos{ display:grid; grid-template-columns:repeat(6,1fr); gap:14px }
#solution .clients .logo{ height:48px; background:#fff; border:1px solid var(--sol-line); border-radius:12px; display:flex; align-items:center; justify-content:center }

#solution .solution-content ul{ list-style:none; margin-top:36px; padding:0 }
#solution .solution-content ul li{ font-size:20px; font-weight:700; padding:10px 0; letter-spacing:-1px }
#solution .solution-content ul.customers{ display:flex; flex-wrap:wrap; margin:12px 0; row-gap:10px; column-gap:10px; }
#solution .solution-content ul.customers li{ width:137px; height:56px; border:1px solid #eee; display:flex; justify-content:center }
#solution .solution-content .industrial-classification{ display:flex;flex-wrap:wrap;align-items:center;gap:8px;}
#solution .solution-content .industrial-classification span {
  font-size:16px; border-radius:8px; color:#1C64FF; border: 1px solid #E4EAF5; background-color:#F3F5F9; line-height:23px; padding: 8px 12px;
}
#solution .solution-content .industrial-classification a { display:flex;align-items: center;}
#solution .solution-content .industrial-classification a span:hover{ background-color:#1C64FF;color:#fff;}

/* ========== 기술 노트(카드/메타/스와이퍼) - 중복 정리 버전 ========== */
#solution .notes .solution-content{ position:relative; overflow-x:clip }             /* 페이드 기준 + 넘침 숨김 */
#solution .notes .grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px } /* 모바일에서만 사용됨(아래 media에서 1열로 변경) */
#solution .notes .tcard{
  position:relative; background:#fff; border:1px solid var(--note-line);
  border-radius:var(--note-radius); box-shadow:8px 8px 32px -10px #0000001A;
  padding:38px; min-height:220px; display:flex; flex-direction:column;
  transition:transform .18s ease;
}
#solution .notes .tcard:hover{ transform:translateY(-2px); background-color:#1C64FF; color:#fff; }
#solution .notes .tcard:hover .t-title{ color:#fff;}
#solution .notes .tcard:hover .t-excerpt{ color:#BFD3FF;}
#solution .notes .tcard:hover .badge{ background-color:#FFF;color:#1C64FF;}
#solution .notes .tcard:hover .who{ color:#FFF;}
#solution .notes .tcard:hover .when{ color:#FFF;}

#solution .notes .badges{ display:flex; gap:8px; margin-bottom:16px }
#solution .notes .badge{ display:inline-flex; align-items:center; height:32px; padding:0 20px; border-radius:3px; font-size:14px; background:#1C64FF; color:#fff; }
#solution .notes .t-title{ font-size:20px; line-height:1.45; color:var(--note-title); font-weight:700; letter-spacing:-.2px;
  display: -webkit-box;
  -webkit-box-orient: vertical; /* 텍스트 방향 */
  -webkit-line-clamp: 2; /* 최대 표시할 줄 수 */
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 0;
}
#solution .notes .t-excerpt{
  margin-top:18px; color:var(--note-body); font-size:16px; line-height:1.5;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
  max-width:85vw;
}
#solution .notes .t-excerpt.no-tag{
  -webkit-line-clamp:5!important;
}
#solution .notes .t-tags { margin-top:16px; display:block; white-space:nowrap; overflow:hidden; position:relative; flex-shrink:0;
  -webkit-mask-image: linear-gradient(to right, #000 0%, #000 90%, transparent 100%);
  mask-image: linear-gradient(to right, #000 0%, #000 90%, transparent 100%);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
#solution .notes .t-tags .tag { background-color:#E4E4E4; color:#222; border-radius:8px; padding:5px 8px; display:inline-block; line-height:1.5; font-size:14px;}

/* 메타(2줄 레이아웃) */
#solution .notes .meta{
  display:grid; grid-template-columns:1fr; grid-template-rows:auto auto;
  column-gap:10px; row-gap:4px; align-items:center; margin-top:auto; padding-top:24px;
}
#solution .notes .who{ grid-row:1; font-size:14px; line-height:1.2; color:#0f172a; }
#solution .notes .when{ grid-row:2; font-size:14px; line-height:1.2; color:var(--note-meta) }

/* Swiper 컨테이너(데스크톱만 활성) */
#solution .notes .swiper{ overflow:visible; position:relative }
#solution .notes .swiper-wrapper{ align-items:stretch; padding:6px 0 32px 0 }
#solution .notes .swiper-slide{ height:auto }
#solution .notes .swiper-slide:nth-child(n+6) { display:none; }

/* 좌/우 페이드(데스크톱에서만) */
#solution .notes .solution-content::before,
#solution .notes .solution-content::after{
  content:""; position:absolute; top:0; bottom:0; width:48px; z-index:6; pointer-events:none;
  background:linear-gradient(to right, var(--bg-sub, #fff), rgba(255,255,255,0));
}
#solution .notes .solution-content::before { width:0}
#solution .notes .solution-content::before{ left:0 }
#solution .notes .solution-content::after{ right:0; transform:scaleX(-1) }

#solution .notes .solution-content.no-data::before,
#solution .notes .solution-content.no-data::after{
  background:none;
}

/* 카드 전체 클릭 지원 */
#solution .notes .tcard .card-link{ position:absolute; inset:0; z-index:10; text-indent:-9999px }

/* 하단 CTA/공유 */
.bottom-nav-wrap { margin-top:128px!important }
.bottom-nav-wrap .bottom-nav ul{ display:flex; flex-wrap:wrap; gap:16px }
.bottom-nav-wrap .nav-btn{ width: 100% !important; transition:all .18s ease; }
.bottom-nav-wrap .nav-btn.disabled {cursor:default;opacity: .2;pointer-events: none;}
.bottom-nav-wrap .nav-btn:hover{ background-color:#1C64FF!important; transform:translateY(-3px);}
.bottom-nav-wrap .nav-btn.disabled:hover{ transform:none;}
.bottom-nav-wrap .bottom-sns{ margin-top:20px }
.bottom-nav-wrap .sns-btn{ display:inline-block;transition:all .18s ease;}
.bottom-nav-wrap .sns-btn:hover{ transform:translateY(-3px);}
.bottom-nav-wrap .bottom-sns br { display:none }
.bottom-nav-wrap .bottom-sns ul {
  display: flex;
  justify-content: center;
  column-gap: 16px;
}
.bottom-nav-wrap .bottom-nav li{ flex:1 }
.bottom-nav-wrap .bottom-sns p{ padding:20px 0; text-align:center; font-size:16px; color:#666 }
.bottom-nav-wrap .sns-mobile-url{ width:64px; height:64px; border-radius:50%; background:#B5C7ED; display:flex; align-items:center; justify-content:center; font-size:14px; color:#fff }

/* ========== CTA ========== */
#solution .cta{
  margin:162px 0 0; padding:81px 0;
  background:
    radial-gradient(800px 300px at 60% 20%, rgba(40,120,255,.25), transparent 60%),
    radial-gradient(700px 300px at 30% 70%, rgba(26,198,255,.25), transparent 65%),
    #060b18;
  color:#fff; text-align:center;
}
#solution .cta h3{ font-size:48px; font-weight:700; line-height:56px; letter-spacing:-1px }
#solution .cta .sub-title{ font-size:48px; font-weight:400; line-height:56px; letter-spacing:-1px }
#solution .cta p{ font-size:20px; margin-top:31px }
#solution .cta .contact-info{ font-size:20px; margin-top:4px }
#solution .cta .contact-info .separator{ width:1px; height:14px; background:#fff; display:inline-block; margin:0 20px }
#solution .cta .btn{ margin-top:37px; font-size:16px; border-radius:24px; padding:25px 38px; background:#1C64FF; border:none }

/* ========== 모션(등장 애니메이션) ========== */
/* 기본: 투명 + 아래 대기 */
#solution .fx-reveal{
  opacity:0; transform:translateY(16px);
  transition:opacity .6s ease, transform .6s ease; will-change:opacity, transform;
}
/* 제목: 더 단단한 이징 */
#solution .fx-title{ transition-timing-function:cubic-bezier(.2,.9,.2,1) }
/* 표시 상태 */
#solution .fx-show{ opacity:1; transform:translateY(0) }

/* ========== NAV 3-DEPTH : Select형(PC/모바일 공통) ========== */
.mds-nav3{
  width:100%;
  background:var(--nav3-bg);
  user-select:none;
}

/* 셀렉트 레이아웃 (공통) */
.mds-nav3__mobile{
  display:none;
  gap:16px;
}
.mds-nav3__mobile select{
  width:100%;
  padding:0 20px;
  outline:none;
}

.mds-nav3__mobile .select-depth1-wrap select{
  border:none;
  height:60px;
  background:#EEF0F4;
  border-radius:8px;
  font-size:18px;
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  background:url('/assets/app/img/select-arrow-1.svg') no-repeat center right 24px #EEF0F4;
  padding-right:48px;
}
.mds-nav3__mobile .select-depth2-wrap select{
  border:2px solid #1C64FF;
  height:60px;
  border-radius:8px;
  font-size:16px;
  color:#1C64FF;
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  background:url('/assets/app/img/select-arrow-2.svg') no-repeat center right 24px;
  padding-right:48px;
}
.mds-nav3__mobile .select-depth3-wrap select{
  height:60px;
  background:#EEF0F4;
  border:none;
  border-radius:8px;
  font-size:14px;
  font-weight:700;
  color:#1C64FF;
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  background:url('/assets/app/img/select-arrow-3.svg') no-repeat center right 24px #EEF0F4;
  padding-right:48px;
}

.sr-only{
  position:absolute;
  left:-10000px;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden;
}

/* PC에서 data-desktop-selects="on" → 3단 그리드 */
.mds-nav3[data-desktop-selects="on"] .mds-nav3__mobile{
  display:grid !important;
  grid-template-columns:1fr 1fr 1fr;
  gap:16px;
  max-width:var(--nav3-max);
  margin:0 auto;
  padding-top:32px;
}

/* 모바일에서는 세로로 한 줄씩 */
@media (max-width:768px){
  .mds-nav3__mobile{
    display:grid !important;
    grid-template-columns:1fr;
    gap:16px;
    padding:0 16px;
  }
  .mds-nav3[data-desktop-selects="on"] .mds-nav3__mobile{
    grid-template-columns:1fr;
    padding:0 16px;
  }
}

/* 모바일 전용(NAV 3-DEPTH 셀렉트) */
.mds-nav3__mobile{ display:none; gap:16px }
.mds-nav3__mobile select{ width:100%; padding:0 20px; outline:none }
.mds-nav3__mobile .select-depth1-wrap select{
  border:none; height:60px; background:#EEF0F4; border-radius:8px; font-size:18px;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background:url('/assets/app/img/select-arrow-1.svg') no-repeat center right 24px #EEF0F4;
  padding-right: 48px;
}
/* .mds-nav3__mobile .select-depth2-wrap{ padding:0 16px } */
.mds-nav3__mobile .select-depth2-wrap select{
  border:2px solid #1C64FF; height:60px; border-radius:8px; font-size:16px; color:#1C64FF;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background:url('/assets/app/img/select-arrow-2.svg') no-repeat center right 24px;
  padding-right: 48px;
}
/* .mds-nav3__mobile .select-depth3-wrap{ padding:0 16px } */
.mds-nav3__mobile .select-depth3-wrap select{
  height:60px; background:#EEF0F4; border:none; border-radius:8px; font-size:14px; font-weight:700; color:#1C64FF;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background:url('/assets/app/img/select-arrow-3.svg') no-repeat center right 24px #EEF0F4;
  padding-right: 48px;
}
.sr-only{ position:absolute; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden }

.mds-nav3[data-desktop-selects="on"] .mds-nav3__mobile{
  display:grid !important;    /* 데스크톱에서도 셀렉트 노출 */
  grid-template-columns: 1fr 1fr 1fr;
  gap:16px;
  max-width: var(--nav3-max);
  margin: 0 auto;
  padding-top: 32px;
}
/* 셀렉트들의 높이/타이포를 데스크톱에서도 보기 좋게 약간 보정(선택)
.mds-nav3[data-desktop-selects="on"] .mds-nav3__mobile .select-depth1-wrap select{
  height: 56px;
  font-size: 18px;
}
.mds-nav3[data-desktop-selects="on"] .mds-nav3__mobile .select-depth2-wrap select{
  height: 56px;
  font-size: 16px;
}
.mds-nav3[data-desktop-selects="on"] .mds-nav3__mobile .select-depth3-wrap select{
  height: 48px;
  font-size: 14px;
  font-weight: 700;
}
*/
/* ===================== Custom Select (Depth별 스킨) ===================== */
/* 래퍼 */
.mds-select{ position:relative; width:100% }
.mds-select[aria-expanded="true"]{ z-index: 20 }

/* 토글 버튼(현재 선택값 표시) */
.mds-select__btn{
  width:100%; height:60px; padding:0 24px;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  border:0; outline:0; cursor:pointer;
  border-radius:8px; font-size:16px; font-weight:600;
}

/* 공통 아이콘(▼) */
.mds-select__caret{
  width:12px; height:12px; flex:0 0 11px;
  background-repeat:no-repeat; background-position:center; background-size:contain;
  transition: transform .18s ease;
  /*background-image:url('data:image/svg+xml;utf8,<svg width="18" height="18" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M5 8l5 5 5-5" stroke="%23666" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>'); */
  background-image: url('/assets/app/img/select-arrow-1.svg')!important;
}
.mds-select[aria-expanded="true"] .mds-select__caret{ transform:rotate(180deg) }
.select-depth2-wrap .mds-select__caret {
  /*background-image:url('data:image/svg+xml;utf8,<svg width="18" height="18" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M5 8l5 5 5-5" stroke="%23666" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>');*/
  background-image: url('/assets/app/img/select-arrow-2.svg')!important;
}
.select-depth3-wrap .mds-select__caret {
  /*background-image:url('data:image/svg+xml;utf8,<svg width="18" height="18" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M5 8l5 5 5-5" stroke="%23666" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>');*/
  background-image: url('/assets/app/img/select-arrow-3.svg')!important;
}

/* 옵션 리스트(아래로 펼침) */
/* DELETED
.mds-select__list{
  position:absolute; left:0; right:0;
  max-height:560px; overflow:auto; -webkit-overflow-scrolling:touch;
  display:none;
}
.mds-select[aria-expanded="true"] .mds-select__list{ display:block }
*/
/* 슬라이드 다운 + 페이드 (공통) */
.mds-select__list{
  position:absolute; left:0; right:0;
  /* 원래 있던 top/border/background 등은 그대로 유지됨 (depth별 규칙 아래쪽에 이미 있음) */
  overflow:auto; -webkit-overflow-scrolling:touch;

  /* 애니메이션 핵심 */
  max-height:0;            /* 닫힐 때 0 */
  opacity:0;               /* 닫힐 때 투명 */
  transform:translateY(-6px); /* 살짝 위에서 내려오게 */
  pointer-events:none;

  transition:
    max-height .24s ease,
    opacity .18s ease,
    transform .24s ease;
  scrollbar-width: none;          /* Firefox */
  -ms-overflow-style: none;       /* IE/Edge 레거시 */
}
.mds-select__list::-webkit-scrollbar{
  width: 0; height: 0;            /* WebKit(Chrome/Safari) */
}

/* 열렸을 때의 비주얼 상태(실제 높이는 JS에서 scrollHeight로 세팅) */
.mds-select[aria-expanded="true"] .mds-select__list{
  opacity:1;
  transform:none;
  pointer-events:auto;
}

/* 옵션 */
.mds-select__opt{
  height:60px; display:flex; align-items:center;
  padding:0 24px; font-size:16px; cursor:pointer;
  user-select:none; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.mds-select__opt[aria-selected="true"]{ font-weight:700; }

/* ----------------- Depth 1 (배경 #EEF0F4, hover 파랑) ----------------- */
.mds-select[data-depth="1"] .mds-select__btn{
  background:#EEF0F4; color:#2A2F39; border:2px solid #222;
  border-radius:8px;
}
.mds-select[data-depth="1"] .mds-select__list{
  top:58px;
  background:#fff; border:2px solid #222;
  border-top:none;
  border-bottom-left-radius:8px;
  border-bottom-right-radius:8px;
}
.mds-select[data-depth="1"] .mds-select__opt{
  background:#EEF0F4; color:#2A2F39;
  border-top:1px solid #E1E5EE;
}
.mds-select[data-depth="1"] .mds-select__opt:hover{
  background:#1C64FF; color:#fff;
}
.mds-select[data-depth="1"][aria-expanded=true] .mds-select__btn {
  border-bottom: 2px solid transparent;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

/* ----------------- Depth 2 (박스 전체 둥글게, 파랑 테두리) ----------------- */
.mds-select[data-depth="2"] .mds-select__btn{
  background:#fff; color:#1C64FF; border:2px solid #1C64FF;
}
.mds-select[data-depth="2"] .mds-select__list{
  top:58px;
  background:#fff; border:2px solid #1C64FF;
  border-top:none;
  border-bottom-left-radius:8px;
  border-bottom-right-radius:8px;
}
.mds-select[data-depth="2"] .mds-select__opt{
  background:#fff; color:#1C64FF;
  border-top:1px solid #1C64FF;
}
.mds-select[data-depth="2"] .mds-select__opt:hover{
  background:#1C64FF; color:#fff;
}
.mds-select[data-depth="2"][aria-expanded=true] .mds-select__btn {
  border-bottom: 2px solid transparent;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

/* ----------------- Depth 3 (디폴트 #EEF0F4, hover 파랑) ----------------- */
.mds-select[data-depth="3"] .mds-select__btn{
  background:#EEF0F4; color:#1C64FF; border:0;
}
.mds-select[data-depth="3"] .mds-select__list{
  background:#EEF0F4; border:1px solid #E4EAF5;
}
.mds-select[data-depth="3"] .mds-select__opt{
  background:transparent; color:#1C64FF;
}
.mds-select[data-depth="3"] .mds-select__opt:hover{
  background:#1C64FF; color:#fff;
}
.mds-select[data-depth="3"][aria-expanded=true] .mds-select__btn {
  border-bottom: 1px solid transparent;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.mds-select[data-depth="3"] .mds-select__list {
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}

/* ========== 접근성: 모션 최소화 ========== */
@media (prefers-reduced-motion: reduce){
  .svc-overlay.is-open, .svc-overlay.is-closing{ animation:none!important; transform:none!important; opacity:1 }
  #solution .fx-reveal{ transition:none!important; opacity:1!important; transform:none!important }
  .svc-acc::after{ transition:none }
}

/* ========== 반응형(중간) ========== */
@media (max-width:1200px){
  .svc-grid{ grid-template-columns:repeat(2,1fr) }
  .ind-solutions{ grid-template-columns:repeat(2,1fr) }
}
@media (max-width:640px){
  .svc-grid{ grid-template-columns:1fr }
  .ind-solutions{ grid-template-columns:1fr }
}

/* ========== 데스크톱 전용: 노트 카드 폭 고정 ========== */
@media (min-width:769px){
  #solution .notes .swiper-slide{ width:400px}
}

/* ========== 모바일(<=768px) ========== */
@media (max-width:768px){
  .header { display:none }
  .sub-header { display:block }

  .content-section .hero { display:none }
  .content-section .mds-submenu { display:none }
  .content-section .wrap, .content-section .caption {
    width: 100%;
  }

  #solution .banner{ margin-top:40px}
  #solution .explantion{ margin-top:24px; padding:0 16px;}
  #solution .explantion .wrap { flex-direction: column;}
  #solution .solution-explantion { margin:32px 0 0; font-size:16px;}

  #solution .intro{ margin-top:48px; }
  #solution .intro .oneline-desc{ font-size:14px; line-height: 1.5;padding:0 32px;}
  #solution .intro .solution-summary{ font-size:16px; padding:0 16px; letter-spacing:-1px }
  #solution .intro .solution-banner{ margin-top:22px }
  #solution .intro .solution-explantion { margin-top:22px }
  #solution .intro h2{ font-size:36px; margin-top:8px }
  #solution .solution-tags{ gap:8px;}
  #solution .solution-tags .chip{ font-size:16px; padding:4px 8px;}
  #mainBannerSwiper .swiper-pagination {
    margin-bottom:9px;
  }
  #solution .info-wrap { margin-top:40px;grid-template-columns:1fr;row-gap:16px;}
  #solution .info-wrap .info-box { padding:24px;}
  #solution .info-wrap .info-box .numbering { color:#1C64FF;font-size:20px;font-weight:700;line-height:1;margin-top:5px;}
  #solution .info-wrap .info-box:hover .numbering{ color:#fff;}

  #solution .info-wrap .info-box .title { font-size:32px;font-weight:700;margin-top:46px;line-height:1.3;}
  #solution .info-wrap .info-box .sub-title { font-size:18px;font-weight:700;line-height:1;margin-top:9px;min-height:18px;}
  #solution .info-wrap .info-box .info-content { margin-top:30px; font-size:16px;}
  #solution .info-wrap .info-box .info-content br { margin-top:16px;}

  #solution .info-wrap.func .info-box .title { margin-top:0;}
  #solution .info-wrap.func .info-box .info-content { margin-top:48px; font-size:16px;}

  #solution .info-wrap.usecase .info-box .title { margin-top:0;}
  #solution .info-wrap.usecase .info-box .info-content { margin-top:24px;}

  #solution .info-wrap.extra .info-box .title { margin-top:0;}
  #solution .info-wrap.extra .info-box .info-content { margin-top:24px;}

  /* 섹션 간격/폰트 축소 */
  #solution h2.section-title{ margin:42px 0 12px; font-size:22px }
  #solution .item-wrap{ margin-top:80px }
  #solution .item-content + .item-content{ margin-top:80px }
  #solution .item-content h3{ font-size:32px;}
  #solution .solution-content {margin-top:31px;}
  #solution .solution-content ul li{ font-size:18px }

  /* Left 네비 전체 숨김(모바일) */
  #solution .item-wrap .left-wrap{ display:none!important }
  #solution .item-content-wrap{ padding:0 16px }

  /* 텍스트 박스/이미지: 가로 스크롤 컨테이너 */
  #solution .solution-content-item .solution-content-text-wrap{
    border-radius:16px; padding:14px 16px;
  }
  .m-wide-scroll{ overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; scrollbar-width:auto; margin-bottom:8px; width:calc(100vw - 81px) }
  .m-wide-scroll > img{ display:block; width:auto; max-width:none; height:auto; flex:0 0 auto; margin:0 }

  /* 산업분야 */
  #solution .solution-content .industrial-classification {
    display:flex; flex-wrap:wrap;
  }

  /* 주요고객 */
  #solution .solution-content ul.customers li { width: 48%}

  /* 노트: 세로 리스트 */
  #solution .notes .t-title{ font-size:18px }
  #solution .notes .tcard{ padding:23px 16px }
  #solution .notes .swiper::before,
  #solution .notes .swiper::after{ display:none }
  #solution .notes .swiper-slide{ width:100%; margin:0 0 16px 0 }
  #solution .notes .swiper-wrapper{ display:block } /* 세로로 쌓기 */
  #solution .notes .solution-content::before,
  #solution .notes .solution-content::after{ display:none } /* 페이드 숨김 */

  #solution .notes .badges{ display:flex; gap:8px; margin:0 0 24px -16px; }
  #solution .notes .badge { border-radius:24px; border-top-left-radius:0; border-bottom-left-radius:0;}
  #solution .notes .t-tags { margin-top:16px; display:flex; column-gap:8px; overflow-x:hidden; position:relative; width:80vw;}
  #solution .notes .t-tags .tag { background-color:#E4E4E4; color:#222; border-radius:8px; padding:5px 8px; flex-shrink:0; line-height:1.5; font-size:14px;}

  /* 하단 CTA/공유 */
  .bottom-nav-wrap { margin-top:72px!important }
  .bottom-nav-wrap .bottom-nav ul{ gap:8px }
  .bottom-nav-wrap .bottom-nav li{ flex:48% }
  .bottom-nav-wrap .bottom-sns{ margin-top:18px }
  .bottom-nav-wrap .bottom-sns br { display:block }

  /* CTA 축소 */
  #solution .cta{ margin-top:80px }
  #solution .cta{ padding:63px 0 47px }
  #solution .cta h3, #solution .cta .sub-title{ font-size:32px; line-height:40px }
  #solution .cta p{ padding:0 60px; margin-top:16px; font-size:16px }
  #solution .cta .contact-info{ font-size:16px; display:flex; flex-direction:column; margin-top:16px }
  #solution .cta .contact-info .separator{ display:none }
  #solution .cta .btn{ margin-top:16px }

  .mds-nav3[data-desktop-selects="on"] .mds-nav3__mobile{
    grid-template-columns: 1fr;  /* 모바일은 한 줄씩 쌓임(기존 동작 유지) */
    gap:16px;
    padding: unset;
    display:none!important;
  }
  .mds-nav3__mobile .select-depth1-wrap select{ border-radius:0!important; }
  .mds-nav3__mobile .select-depth2-wrap{ padding:0 16px }
  .mds-nav3__mobile .select-depth3-wrap{ padding:0 16px }
  .mds-nav3__mobile .select-depth3-wrap select{ height:48px; }

  .mds-select[data-depth="1"] .mds-select__btn{
    border: none;
    border-radius: 0;
  }
  .mds-select[data-depth="1"] .mds-select__list{
    border-radius: 0;
    background:#fff; border:1px solid #E8EFFF;
  }
  .mds-select[data-depth="3"] .mds-select__btn{ height:48px; }
  .mds-select[data-depth="3"] .mds-select__opt { height: 48px; }
  .mds-select__list{ max-height:50vh }
}

.more-btn-area {
  margin-top: 18px;
  text-align: center;
}
.more-btn {
  font-size:16px;
  font-weight:700;
}
/* 모바일 미디어 쿼리 */
@media (max-width: 768px) {
  .more-btn {
    padding: 11px 48px;
    border: 1px solid #222;
    border-radius: 24px;
  }
}