/* =========================================================
   219 임플란트 - 주요 상황과 원인 인트로
   2026-09-15
   ========================================================= */

 /* 임플란트 주요 상황과 원인 */

 .sub-im-intro {
     padding: 120px 0;
     background-color: #fff;
 }

 .sub-im-intro .con {
     display: block;
 }

 .sub-im-intro .sect-txt {
     margin: 0 auto;
 }

 .sub .sect-tit {
     color: #111;
     font-size: 3rem;
     font-weight: 700;
     line-height: 1.35;
     letter-spacing: -.045em;
 }

 .sub .h4 {
     margin-top: 52px;
     color: #111;
     font-family: 'Pretendard', sans-serif;
     font-size: 1.7rem;
     font-weight: 700;
     line-height: 1.5;
     letter-spacing: -.02em;
 }


 /* 상단 4개 카드 */

 .sub-im-intro .list {
     margin-top: 36px;
 }

 .sub-im-intro .list ul {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 38px;
 }

 .sub-im-intro .list li {
     overflow: hidden;
     background: #f4f4f5;
     border-radius: 18px;
 }

 /* 이미지 */
 .sub-im-intro .list .img-box {
     position: static;
     width: 100%;
     aspect-ratio: 1 / 1;
     overflow: hidden;
     background: #d9d9d9;
 }

 .sub-im-intro .list .img-box img {
     width: 100%;
     height: 100%;
     object-fit: cover;
 }

 /* 하단 문구 */
 .sub-im-intro .list li p {
     display: flex;
     align-items: center;
     justify-content: center;
     height: 70px;
     padding: 0 12px;
     color: #111;
     font-size: 1.25rem;
     font-weight: 600;
     line-height: 1.4;
     letter-spacing: -.035em;
     text-align: center;
     word-break: keep-all;
 }

  .sub-im-intro .list.all li p, .sub-im-intro .list.nav li p {
    height: 90px;
  }



 /* 하단 주요 원인 */

 .sub-im-intro .cause-wrap {
     display: grid;
     grid-template-columns: 230px 1fr;
     gap: 60px;
     margin-top: 110px;
     align-items: start;
 }

 .sub-im-intro .cause-wrap.nav {
    grid-template-columns: 260px 1fr;
 }

 .sub-im-intro .cause-wrap .h4 {
     margin-top: 8px;
 }

 .sub-im-intro .clist ul {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 12px 14px;
 }

 .sub-im-intro .clist li {
     position: relative;
     display: flex;
     align-items: center;
     min-height: 48px;
     padding: 18px 18px 18px 47px;
     background: #f5f6f7;
     border-radius: 10px;
     color: #222;
     font-size: 1.2rem;
     font-weight: 600;
     line-height: 1.4;
     letter-spacing: -.01em;
 }

 .sub-im-intro .clist li::before {
     content: '✓';
     position: absolute;
     left: 18px;
     top: 50%;
     transform: translateY(-50%);
     display: flex;
     align-items: center;
     justify-content: center;
     width: 14px;
     height: 14px;
     border-radius: 50%;
     background: #294585;
     color: #fff;
     font-size: 9px;
     font-weight: 700;
 }








 /* =========================================================
   임플란트 전후사례
   ========================================================= */
.sub.sub-im-bna {
    margin-top: 0;
}

 .sub-im-bna {
     padding: 120px 0 110px;
     background: #edf1fa;
 }

 .sub-im-bna .con {
     display: block;
 }

 /* 제목 */
 .sub-im-bna .sect-tit {
     text-align: center;
 }


 /* 슬라이드 영역 */

 .sub-im-bna .im-bna-sl-box {
     max-width: 1280px;
     width: 100%;
     margin: 70px auto 0;
     padding: 0;
     border: 0;
     border-radius: 0;
     background: none;
     box-shadow: none;
 }

 .sub-im-bna .im-bna-slide {
     position: relative;
     overflow: hidden;
 }

 .sub-im-bna .swiper-slide {
     visibility: visible;
 }

 /* 임시 이미지 박스 */
 .sub-im-bna .img-box {
     position: static;
     width: 100%;
     height: 345px;
     overflow: hidden;
     border-radius: 16px;
 }

 /* 실제 이미지 넣었을 때 */
 .sub-im-bna .img-box img {
     display: block;
     width: 100%;
     height: 100%;
     object-fit: cover;
 }


 /* 페이지네이션 */

 .sub-im-bna .swiper-pagination {
     position: relative;
     left: auto;
     bottom: auto;
     width: 156px;
     height: 4px;
     margin: 58px auto 0;
     background: #cbd0d9;
 }

 /* progress bar */
 .sub-im-bna .swiper-pagination-progressbar-fill {
     background: #111;
 }



 /* =========================================================
   임플란트 비용
   ========================================================= */

 .sub-im-price {
     padding: 7.5rem 0 8.75rem;
     background: #fff;
 }

 .sub-im-price .sect-tit {
     text-align: center;
 }


 /* 전체 가격 영역 */
 .sub-im-price .item-box {
     display: block;
     width: 80rem;
     margin: 4.375rem auto 0;
 }

 .sub-im-price .item-box .item {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 1.25rem 2.5rem;

     width: 100%;
     margin: 0 !important;
 }


 /* 카드 */
 .sub-im-price .item-box .item li {
     display: flex;
     align-items: center;
     justify-content: space-between;

     width: 100%;
     height: 7.875rem;
     min-height: 0;

     margin: 0 !important;
     padding: 0 1.75rem 0 2rem;

     border: 0;
     border-radius: .875rem;

     background: #edf1fa;
     box-shadow: none;

     font-size: inherit;
 }


 /* 기존 CSS 영향 제거 */
 .sub-im-price .item-box .item li+li {
     margin-top: 0;
 }

 .sub-im-price .item-box .item li>div {
     display: flex;
     align-items: center;
 }


 /* =========================
   왼쪽 정보
   ========================= */

 .sub-im-price .info {
     display: flex;
     align-items: center;
     gap: 1.5rem;
 }


 /* 아이콘 흰 원 */
 .sub-im-price .info .icon {
     display: flex;
     align-items: center;
     justify-content: center;

     flex: 0 0 4.625rem;

     width: 4.625rem;
     height: 4.625rem;

     border-radius: 50%;
     background: #fff;
 }


 /* 나중에 PNG 넣을 때 */
 .sub-im-price .info .icon img {
     display: block;
     width: 65%;
     height: 65%;
     object-fit: contain;
 }


 .sub-im-price .info strong {
     color: #111;

     font-size: 1.75rem;
     font-weight: 700;
     line-height: 1.3;
     letter-spacing: -.045em;

     white-space: nowrap;
 }


 /* =========================
   우측 가격
   ========================= */

 .sub-im-price .price {
     display: flex !important;
     flex-direction: column;
     align-items: center !important;
     justify-content: center !important;

     min-width: 10.5rem;
     margin-left: auto !important;

     white-space: nowrap;
 }


 /* 숫자 + 만원 */
 .sub-im-price .price>div {
     display: flex !important;
     align-items: flex-end !important;
     justify-content: center !important;
 }


 /* 숫자 */
 .sub-im-price .price .price-num {
     margin: 0;

     color: #29468d;

     font-size: 3.5rem;
     font-weight: 700;
     line-height: .9;
     letter-spacing: -.055em;
 }


 /* 만원 / 만원부터 */
 .sub-im-price .price .unit {
     position: static;

     display: block;
     margin: 0 0 .18rem .15rem;
     padding: 0;

     color: #29468d;

     font-size: 1.65rem;
     font-weight: 700;
     line-height: 1;
     letter-spacing: -.05em;
 }


 /* 조조 진행 시 / 상악 또는 하악 */
 .sub-im-price .price .price-sub {
     position: static;

     display: inline-flex;
     align-items: center;
     justify-content: center;

     margin-top: .45rem;
     padding: .25rem .7rem;

     border-radius: 2rem;
     background: #fff;

     color: #29468d;

     font-size: .7rem;
     font-weight: 500;
     line-height: 1;
     letter-spacing: -.025em;
 }

 /* =========================================================
   서울브라운치과를 선택하는 이유
   ========================================================= */

 .sub-im-point {
     padding: 7.5rem 0 8.75rem;
     background: #fff;
 }


 /* 제목 */
 .sub-im-point .sect-tit {
     text-align: left;
 }


 /* =========================================================
   슬라이드 전체
   ========================================================= */

 .sub-im-point .im-point-slide {
     position: relative;
     width: 100%;
     margin-top: 4.5rem;
     overflow: hidden;
 }


 /* 각 슬라이드 */
 .sub-im-point .swiper-slide {
     display: grid;
     grid-template-columns: 42rem minmax(0, 1fr);
     gap: 4rem;
     align-items: center;
 }


 /* =========================================================
   왼쪽 이미지
   ========================================================= */

 .sub-im-point .img-box {
     width: 42rem;
     height: 26.5rem;
     overflow: hidden;
     border-radius: 2rem;
     background: #ddd;
 }

 .sub-im-point .img-box img {
     display: block;
     width: 100%;
     height: 100%;
     object-fit: cover;
 }


 /* =========================================================
   오른쪽 콘텐츠
   ========================================================= */

 .sub-im-point .point-cont {
     display: flex;
     align-items: center;
     min-width: 0;
     height: 26.5rem;
 }

 .sub-im-point .point-txt {
     width: 100%;
     margin-top: 3.5rem;
 }


 /* POINT + 제목 */
 .sub-im-point .point-title {
     display: flex;
     align-items: center;
     gap: .9rem;
 }

 .sub-im-point .point-label {
     display: inline-flex;
     align-items: center;
     justify-content: center;

     flex-shrink: 0;

     min-width: 5.4rem;
     height: 2rem;
     padding: 0 .9rem;

     border-radius: 2rem;
     background: #294589;

     color: #fff;
     font-size: 1rem;
     font-weight: 700;
     line-height: 1;
     letter-spacing: -.02em;
 }

 .sub-im-point .point-title h3 {
     color: #111;

     font-family: 'Pretendard', sans-serif;
     font-size: 1.6rem;
     font-weight: 700;
     line-height: 1.35;
     letter-spacing: -.045em;
     word-break: keep-all;
 }


 /* 설명 */
 .sub-im-point .point-txt>p {
     max-width: 34rem;
     margin-top: 1.7rem;

     color: #222;

     font-size: 1.05rem;
     font-weight: 400;
     line-height: 1.8;
     letter-spacing: -.035em;

     word-break: keep-all;
 }


 /* =========================================================
   태그
   ========================================================= */

 .sub-im-point .tag-box {
     display: flex;
     align-items: center;
     gap: .55rem;

     margin-top: 1.5rem;
 }

 .sub-im-point .tag-box span {
     display: inline-flex;
     align-items: center;
     justify-content: center;

     height: 2rem;
     padding: 0 .9rem;

     border: 1px solid #aaa;
     border-radius: 2rem;

     background: #fff;

     color: #555;
     font-size: .85rem;
     font-weight: 400;
     line-height: 1;
     letter-spacing: -.025em;
 }


 /* =========================================================
   고정 페이지네이션 / 이전 다음 버튼
   ========================================================= */

 .sub-im-point .slide-control {
     position: absolute;
     top: 2.2rem;
     left: 46rem;
     z-index: 20;

     display: flex;
     align-items: center;
     gap: .65rem;

     height: 1.8rem;

     font-size: .8rem;
     line-height: 1;
 }


 /* 화살표 */
 .sub-im-point .slide-control button {
     display: flex;
     align-items: center;
     justify-content: center;

     width: 1.5rem;
     height: 1.5rem;

     margin: 0;
     padding: 0;

     border: 0;
     background: none;

     color: #111;
     font-size: 1rem;
     font-weight: 400;
     line-height: 1;

     cursor: pointer;
 }


 /* 현재 번호 */
 .sub-im-point .slide-control .current {
     color: #111;
     font-weight: 700;
 }


 /* 가운데 점 */
 .sub-im-point .slide-control .dot {
     color: #bbb;
 }


 /* 전체 개수 */
 .sub-im-point .slide-control .total {
     color: #aaa;
     font-weight: 500;
 }


 /* =========================================================
   Fade 보정
   ========================================================= */

 .sub-im-point .swiper-wrapper {
     align-items: stretch;
 }

 .sub-im-point .swiper-slide {
     opacity: 0;
 }

 .sub-im-point .swiper-slide-active {
     opacity: 1;
 }




 /* =========================================================
   임플란트 세부 메뉴
   ========================================================= */

 .sub-im-menu {
     padding: 7.5rem 0 7rem;
     overflow: hidden;
     background: #edf1fa;
 }


 /* 제목 */

 .sub-im-menu .sect-tit {
     text-align: center;
 }


 /* =========================================================
   슬라이드
   ========================================================= */

 .sub-im-menu .im-menu-slide {
     position: relative;

     width: 100%;
     margin-top: 4.5rem;

     overflow: hidden;
 }

 .sub-im-menu .swiper-wrapper {
     align-items: stretch;
 }

 .sub-im-menu .swiper-slide {
     width: auto;
     height: auto;
 }


 /* =========================================================
   카드
   ========================================================= */

 .sub-im-menu .menu-card {
     display: flex;
     flex-direction: column;

     width: 100%;
     height: 100%;

     overflow: hidden;

     border-radius: 1.25rem;
     background: #fff;

     transition:
         transform .35s ease,
         box-shadow .35s ease;
 }

 .sub-im-menu .menu-card:hover {
     transform: translateY(-.4rem);
     box-shadow: 0 .8rem 2rem rgba(35, 54, 105, .08);
 }


 /* 이미지 */

 .sub-im-menu .img-box {
     width: 100%;
     height: 12.7rem;

     overflow: hidden;

     background: #d7d7d7;
 }

 .sub-im-menu .img-box img {
     display: block;

     width: 100%;
     height: 100%;

     object-fit: cover;

     transition: transform .5s ease;
 }

 .sub-im-menu .menu-card:hover .img-box img {
     transform: scale(1.03);
 }


 /* =========================================================
   카드 내용
   ========================================================= */

 .sub-im-menu .menu-cont {
     display: flex;
     flex-direction: column;
     flex: 1;

     min-height: 14.3rem;

     padding: 2rem 2rem 1.8rem;
 }


 /* 제목 */

 .sub-im-menu .menu-cont h3 {
     color: #111;

     font-family: 'Pretendard', sans-serif;
     font-size: 1.35rem;
     font-weight: 700;
     line-height: 1.35;
     letter-spacing: -.04em;

     word-break: keep-all;
 }


 /* 설명 */

 .sub-im-menu .menu-cont>p {
     min-height: 3.8rem;
     margin-top: .8rem;

     color: #555;

     font-size: .9rem;
     font-weight: 400;
     line-height: 1.65;
     letter-spacing: -.03em;

     word-break: keep-all;
 }


 /* =========================================================
   태그
   ========================================================= */

 .sub-im-menu .tag-box {
     display: flex;
     flex-wrap: wrap;
     gap: .4rem;

     margin-top: 1rem;
 }

 .sub-im-menu .tag-box span {
     display: inline-flex;
     align-items: center;
     justify-content: center;

     height: 1.55rem;
     padding: 0 .65rem;

     border-radius: 2rem;
     background: #edf1fa;

     color: #6075ad;

     font-size: .7rem;
     font-weight: 500;
     line-height: 1;
 }


 /* =========================================================
   자세히 보기
   ========================================================= */

 .sub-im-menu .more {
     display: flex;
     align-items: center;
     gap: .45rem;

     margin-top: auto;
     padding-top: 1.7rem;

     color: #294589;

     font-size: .82rem;
     font-weight: 700;
     line-height: 1.4;
     letter-spacing: -.03em;
 }

 .sub-im-menu .more i {
     position: relative;
     top: -.03rem;

     font-style: normal;
     font-size: 1.15rem;

     transition: transform .3s ease;
 }

 .sub-im-menu .menu-card:hover .more i {
     transform: translateX(.25rem);
 }


 /* =========================================================
   하단 Progress bar
   ========================================================= */

 .sub-im-menu .swiper-pagination {
     position: relative;
     left: auto;
     bottom: auto;

     width: 23.5rem;
     height: .25rem;

     margin: 4.3rem auto 0;

     background: #cbd1dc;
 }

 .sub-im-menu .swiper-pagination-progressbar-fill {
     background: #111;
 }



 /* =========================================================
   3D 정밀진단
   ========================================================= */

 .sub-im-3d {
     padding: 7.5rem 0 8.75rem;
     background: #fff;
 }


 /* 제목 */

 .sub-im-3d .tit-wrap {
     text-align: center;
 }


 /* =========================================================
   항목
   ========================================================= */

 .sub-im-3d .item-box {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 1.5rem;

     margin-top: 2.5rem;
 }

 .sub-im-3d .item {
     text-align: center;
 }


 /* =========================================================
   이미지 영역
   ========================================================= */

 .sub-im-3d .img-box {
     width: 100%;
     height: 15.5rem;

     overflow: hidden;

     border-radius: 1.5rem;
     background: #d9dce1;
 }


 /* 실제 이미지 넣을 때 */

 .sub-im-3d .img-box img {
     display: block;

     width: 100%;
     height: 100%;

     object-fit: cover;
 }


 /* =========================================================
   항목 제목
   ========================================================= */

 .sub-im-3d .item h3 {
     margin-top: 1.6rem;

     color: #111;

     font-family: 'Pretendard', sans-serif;
     font-size: 1.45rem;
     font-weight: 700;
     line-height: 1.45;
     letter-spacing: -.045em;

     word-break: keep-all;
 }


 /* 핵심 키워드 포인트 */

 .sub-im-3d .item h3 .key {
     position: relative;
     z-index: 1;

     color: #294589;
     font-weight: 700;
 }

 .sub-im-3d .item h3 .key::after {
     content: '';

     position: absolute;
     left: -.18rem;
     right: -.18rem;
     bottom: .05rem;
     z-index: -1;

     height: .5rem;

     border-radius: .2rem;
     background: #e7edfb;
 }


 /* =========================================================
   설명
   ========================================================= */

 .sub-im-3d .item p {
     margin-top: .8rem;

     color: #444;

     font-size: .9rem;
     font-weight: 400;
     line-height: 1.75;
     letter-spacing: -.03em;

     word-break: keep-all;
 }

 /* =========================================================
   맞춤형 임플란트
   ========================================================= */

 .sub-im-custom {
     padding: 7.5rem 0 8.75rem;
     overflow: hidden;
     background: #153975;
     color: #fff;
 }


 /* =========================================================
   제목
   ========================================================= */

 .sub-im-custom .sect-tit {
     color: #fff;
     text-align: center;
 }

 .sub-im-custom .sect-desc {
     margin-top: 1.4rem;
     color: rgba(255, 255, 255, .9);
     font-size: 1.1rem;
     font-weight: 400;
     line-height: 1.6;
     letter-spacing: -.02em;
     text-align: center;
     word-break: keep-all;
 }


 /* =========================================================
   전체 배치
   ========================================================= */

 .sub-im-custom .custom-wrap {
     position: relative;

     width: 76rem;
     height: 40rem;

     margin: 4.5rem auto 0;
 }


 /* =========================================================
   중앙 영역
   ========================================================= */

 .sub-im-custom .custom-center {
     position: absolute;
     top: 0;
     left: 50%;

     width: 30rem;
     height: 40rem;

     transform: translateX(-50%);
 }


 /* =========================================================
   임플란트 파트 공통
   ========================================================= */

 .sub-im-custom .custom-part {
     position: absolute;
     z-index: 4;

     left: 50%;

     display: block;

     margin: 0;
     padding: 0;

     transform: translateX(-50%);

     border: 0;
     background: transparent;

     cursor: pointer;

     opacity: .23;

     transition:
         opacity .5s ease,
         filter .5s ease,
         transform .5s ease;
 }


 /* 실제 이미지 영역 */
 .sub-im-custom .custom-part .part-img {
     display: block;

     width: 100%;
     height: 100%;
 }


 /* PNG 넣을 때 */
 .sub-im-custom .custom-part .part-img img {
     display: block;

     width: 100%;
     height: 100%;

     object-fit: contain;

     pointer-events: none;
 }


 /* 비활성 */
 .sub-im-custom .custom-part {
     filter:
         grayscale(.3) brightness(.75) saturate(.65);
 }


 /* 활성 */
 .sub-im-custom .custom-part.active {
     z-index: 6;

     opacity: 1;

     filter:
         grayscale(0) brightness(1) saturate(1);

     transform:
         translateX(-50%) scale(1.02);
 }


 /* =========================================================
   01 크라운
   ========================================================= */

 .sub-im-custom .part-01 {
     top: 0;

     width: 12rem;
     height: 13rem;
 }


 /* =========================================================
   02 지대주
   ========================================================= */

 .sub-im-custom .part-02 {
     top: 12rem;

     width: 8rem;
     height: 10rem;
 }


 /* =========================================================
   03 픽스처
   ========================================================= */

 .sub-im-custom .part-03 {
     top: 21rem;

     width: 6.5rem;
     height: 17rem;
 }


 /* =========================================================
   임플란트 위 작은 포인트
   ========================================================= */

 .sub-im-custom .part-dot {
     position: absolute;
     top: 50%;
     left: 50%;

     width: .95rem;
     height: .95rem;

     transform: translate(-50%, -50%);

     border-radius: 50%;

     background: #31589a;

     transition:
         background .4s ease,
         box-shadow .4s ease;
 }


 /* 활성 노란 포인트 */
 .sub-im-custom .custom-part.active .part-dot {
     background: #ffd400;

     box-shadow:
         0 0 0 .4rem rgba(255, 212, 0, .22),
         0 0 1.2rem rgba(255, 212, 0, .7);
 }


 /* =========================================================
   01 / 02 / 03 텍스트 포인트
   ========================================================= */

 .sub-im-custom .custom-point {
     position: absolute;
     z-index: 10;

     display: flex;
     flex-direction: column;
     align-items: center;

     margin: 0;
     padding: 0;

     border: 0;
     background: none;

     color: #a5b8da;

     font-family: 'Pretendard', sans-serif;

     cursor: pointer;

     opacity: .7;

     transition:
         color .4s ease,
         opacity .4s ease;
 }


 /* 번호 */
 .sub-im-custom .custom-point .num {
     display: flex;
     align-items: center;
     justify-content: center;

     width: 2.8rem;
     height: 2.8rem;

     border: .12rem solid #7896c6;
     border-radius: 50%;

     background: #a9bee1;

     color: #183b75;

     font-size: 1rem;
     font-weight: 700;
     line-height: 1;

     transition:
         background .4s ease,
         border-color .4s ease,
         color .4s ease,
         box-shadow .4s ease;
 }


 /* 텍스트 */
 .sub-im-custom .custom-point strong {
     margin-top: .8rem;

     font-size: 1.05rem;
     font-weight: 700;
     line-height: 1.45;
     letter-spacing: -.04em;

     text-align: center;

     word-break: keep-all;
 }


 /* 활성 */
 .sub-im-custom .custom-point.active {
     color: #ffd400;
     opacity: 1;
 }

 .sub-im-custom .custom-point.active .num {
     border-color: #ffd400;
     background: #ffd400;

     color: #17386f;

     box-shadow: 0 0 1.4rem rgba(255, 212, 0, .55);
 }


 /* =========================================================
   포인트 위치
   ========================================================= */

 .sub-im-custom .point-01 {
     top: 4.5rem;
     left: -.5rem;
 }

 .sub-im-custom .point-02 {
     top: 15rem;
     right: -1.5rem;
 }

 .sub-im-custom .point-03 {
     top: 26rem;
     left: -.5rem;
 }


 /* =========================================================
   설명 카드
   ========================================================= */

 /* =========================================================
   설명 카드
   ========================================================= */

 .sub-im-custom .custom-card {
     position: absolute;

     width: 20rem;

     overflow: hidden;

     border-radius: .8rem;

     background: #fff;
     color: #111;

     /* 비활성 상태는 완전히 숨김 */
     opacity: 0;
     visibility: hidden;
     pointer-events: none;

     transform: translateY(.5rem);

     transition:
         opacity .45s ease,
         transform .45s ease,
         visibility .45s ease;
 }


 /* 활성 카드만 노출 */
 .sub-im-custom .custom-card.active {
     z-index: 5;

     opacity: 1;
     visibility: visible;
     pointer-events: auto;

     transform: translateY(0);

     box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, .16);
 }


 /* 카드 이미지 */
 .sub-im-custom .card-img {
     width: 100%;
     height: 11rem;

     background: #263f71;
 }

 .sub-im-custom .card-img img {
     display: block;

     width: 100%;
     height: 100%;

     object-fit: cover;
 }


 /* 카드 내용 */
 .sub-im-custom .card-cont {
     padding: 1.55rem 1.65rem 1.7rem;
 }

 .sub-im-custom .custom-card h3 {
     color: #111;

     font-family: 'Pretendard', sans-serif;

     font-size: 1.2rem;
     font-weight: 700;
     line-height: 1.5;
     letter-spacing: -.04em;

     word-break: keep-all;
 }

 .sub-im-custom .custom-card p {
     margin-top: .9rem;

     color: #555;

     font-size: .8rem;
     font-weight: 400;
     line-height: 1.8;
     letter-spacing: -.025em;

     word-break: keep-all;
 }


 /* =========================================================
   카드 위치
   ========================================================= */

 .sub-im-custom .card-01 {
     top: 2rem;
     left: 0;
 }

 .sub-im-custom .card-02 {
     top: 11rem;
     right: 0;
 }

 .sub-im-custom .card-03 {
     bottom: 0;
     left: 0;
 }







 /* =========================================================
   임플란트 치료 과정
   ========================================================= */

 .sub-im-step {
     padding: 7.5rem 0 7rem;

     overflow: hidden;

     background: #fff;
 }


 /* 제목 */

 .sub-im-step .sect-tit {
     text-align: center;
 }


 /* =========================================================
   슬라이드
   ========================================================= */

 .sub-im-step .im-step-slide {
     position: relative;

     width: 100%;
     margin-top: 4.5rem;

     overflow: visible;
 }

 /* =========================================================
   슬라이드 위치 애니메이션
   ========================================================= */

 .sub-im-step .swiper-wrapper {
     align-items: flex-start;
 }

 .sub-im-step .swiper-slide {
     height: auto;

     /* 기본적으로 아래쪽 */
     transform: translateY(4.5rem);

     transition:
         transform .9s cubic-bezier(.22, .61, .36, 1),
         opacity .9s ease;
 }


 /* 현재 중앙 카드 */
 .sub-im-step .swiper-slide.is-center {
     transform: translateY(0);
 }


 /* 중앙 바로 양옆 */
 .sub-im-step .swiper-slide.is-near {
     transform: translateY(4.5rem);
 }


 /* 더 바깥쪽 카드 */
 .sub-im-step .swiper-slide.is-far {
     transform: translateY(7rem);
 }


 /* =========================================================
   카드
   ========================================================= */

 .sub-im-step .step-card {
     width: 100%;

     overflow: hidden;

     border-radius: 1.5rem;

     background: #fff;

     box-shadow:
         0 .4rem 1.5rem rgba(27, 52, 93, .10);
 }


 /* =========================================================
   이미지
   ========================================================= */

 .sub-im-step .img-box {
     width: 100%;
     height: 18.5rem;

     background: #d8dbe0;
 }


 /* 실제 이미지 넣을 때 */

 .sub-im-step .img-box img {
     display: block;

     width: 100%;
     height: 100%;

     object-fit: cover;
 }


 /* =========================================================
   하단 내용
   ========================================================= */

 .sub-im-step .step-cont {
     display: flex;
     align-items: flex-start;
     gap: 1.3rem;

     min-height: 8rem;

     padding: 1.7rem 1.8rem 1.8rem;
 }


 /* 번호 */

 .sub-im-step .num {
     display: flex;
     align-items: center;
     justify-content: center;

     flex: 0 0 2.8rem;

     width: 2.8rem;
     height: 2.8rem;

     border-radius: 50%;

     background: #edf1fa;

     color: #294589;

     font-size: 1rem;
     font-weight: 700;
     line-height: 1;
 }


 /* 텍스트 */

 .sub-im-step .txt {
     min-width: 0;
 }

 .sub-im-step .txt h3 {
     color: #111;

     font-family: 'Pretendard', sans-serif;

     font-size: 1.35rem;
     font-weight: 700;
     line-height: 1.4;
     letter-spacing: -.04em;

     word-break: keep-all;
 }

 .sub-im-step .txt p {
     margin-top: .55rem;

     color: #444;

     font-size: .85rem;
     font-weight: 400;
     line-height: 1.65;
     letter-spacing: -.025em;

     word-break: keep-all;
 }

 /* =========================================================
   progress bar
   ========================================================= */

 .sub-im-step .step-progress {
     position: relative;

     width: 30rem;
     height: .25rem;

     margin: 6rem auto 0;

     overflow: hidden;

     background: #d0d4dd;
 }

 .sub-im-step .step-progress span {
     display: block;

     width: 20%;
     height: 100%;

     background: #111;

     transition: width .45s ease;
 }

 /* =========================================================
   오스템 SOI 임플란트
   ========================================================= */

 .sub-im-soi {
     position: relative;

     padding: 7.5rem 0 8rem;

     overflow: hidden;

     background-color: #edf2fc;


     background-image: url('/img/sub/sub-im-soi-bg.png');

     background-repeat: no-repeat;
     background-position: center center;
     background-size: cover;
 }


 /* =========================================================
   상단
   ========================================================= */

 .sub-im-soi .soi-head {
     position: relative;
     z-index: 2;

     text-align: center;
 }

 .sub-im-soi .sect-tit {
     text-align: center;
 }


 /* 메인 강조문구 */

 .sub-im-soi .soi-main-copy {
     display: inline-flex;
     align-items: center;
     justify-content: center;

     min-width: 35rem;
     min-height: 3.1rem;

     margin-top: 2rem;
     padding: .7rem 2.4rem;

     border-radius: 3rem;

     background: #d9e4fb;

     color: #294589;

     font-size: 1.3rem;
     font-weight: 700;
     line-height: 1.4;
     letter-spacing: -.035em;
 }


 /* 설명 */

 .sub-im-soi .soi-desc {
     margin-top: 1.8rem;

     color: #222;

     font-size: 1.15rem;
     font-weight: 400;
     line-height: 1.6;
     letter-spacing: -.02em;

     text-align: center;
     word-break: keep-all;
 }


 /* =========================================================
   등급 비교 박스
   ========================================================= */

 .sub-im-soi .soi-grade {
     position: relative;
     z-index: 2;

     width: 80rem;

     margin: 3.5rem auto 0;
     padding: 1.2rem 1.2rem;

     border-radius: 1.7rem;

     background: rgba(255, 255, 255, .82);

     box-shadow:
         0 1rem 2.8rem rgba(40, 65, 115, .05);

     backdrop-filter: blur(.15rem);
 }


 /* 5개 */

 .sub-im-soi .grade-list {
     display: grid;
     grid-template-columns: repeat(5, 1fr);

     gap: 1rem;

     align-items: stretch;
 }


 /* 기본 항목 */

 .sub-im-soi .grade-item {
     position: relative;

     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: flex-end;

     min-height: 14rem;

     padding: 1.6rem 1rem 1.3rem;

     border-radius: 1.3rem;
 }

 .sub-im-soi .grade-item:not(.soi) .implant-img img {
     opacity: .35;
     filter: grayscale(.1) brightness(1.08);
 }

 /* SOI만 강조 */

 .sub-im-soi .grade-item.soi {
     background: #dce6fb;
 }


 /* =========================================================
   임플란트 이미지 영역
   ========================================================= */

 .sub-im-soi .grade-item .implant-img {
     display: flex;
     align-items: center;
     justify-content: center;

     width: 6rem;
     height: 8.7rem;
 }


 /* PNG 넣을 때 */

 .sub-im-soi .grade-item .implant-img img {
     display: block;

     width: 100%;
     height: 100%;

     object-fit: contain;
 }


 /* =========================================================
   SA / HA / CA / BA / SOI
   ========================================================= */

 .sub-im-soi .grade-name {
     display: flex;
     align-items: center;
     justify-content: center;

     width: 7.5rem;
     height: 2.7rem;

     margin-top: .8rem;

     border-radius: 3rem;

     background: #9ba6c9;

     color: #fff;

     font-size: 1.75rem;
     font-weight: 500;
     line-height: 1;
     letter-spacing: -.02em;
 }


 /* SOI */

 .sub-im-soi .grade-item.soi .grade-name {
     background: #294589;
 }


 /* =========================================================
   서울브라운치과 사용 말풍선
   ========================================================= */

 .sub-im-soi .use-label {
     position: absolute;

     top: -2.9rem;
     left: 50%;

     display: flex;
     align-items: center;
     justify-content: center;

     min-width: 12.5rem;
     height: 3rem;

     padding: 0 1.4rem;

     transform: translateX(-50%);

     border-radius: 3rem;

     background: #294589;

     color: #fff;

     font-size: 1rem;
     font-weight: 700;
     line-height: 1;

     white-space: nowrap;
 }


 /* 말풍선 꼬리 */

 .sub-im-soi .use-label::after {
     content: '';

     position: absolute;

     left: 50%;
     bottom: -.7rem;

     width: 0;
     height: 0;

     transform: translateX(-50%);

     border-left: .7rem solid transparent;
     border-right: .7rem solid transparent;
     border-top: .8rem solid #294589;
 }


 /* =========================================================
   하단 특징 3개
   ========================================================= */

 .sub-im-soi .soi-feature {
     position: relative;
     z-index: 2;

     display: grid;
     grid-template-columns: repeat(3, 1fr);

     gap: 1.8rem;

     width: 80rem;

     margin: 2rem auto 0;
 }


 /* 카드 */

 .sub-im-soi .feature-card {
     display: grid;

     grid-template-columns: 12rem 1fr;

     min-height: 10rem;

     overflow: hidden;

     border-radius: 1.15rem;

     background: #fff;

     box-shadow:
         0 .6rem 1.8rem rgba(40, 65, 115, .05);
 }


 /* 이미지 */

 .sub-im-soi .feature-card .img-box {
     width: 100%;
     height: 100%;

     min-height: 10rem;

     background: #d5d8dd;
 }


 /* 실제 이미지 */

 .sub-im-soi .feature-card .img-box img {
     display: block;

     width: 100%;
     height: 100%;

     object-fit: cover;
 }


 /* 텍스트 */

 .sub-im-soi .feature-txt {
     display: flex;
     flex-direction: column;
     justify-content: center;

     padding: 1.4rem 1.7rem;
 }

 .sub-im-soi .feature-txt h3 {
     color: #111;

     font-family: 'Pretendard', sans-serif;

     font-size: 1.25rem;
     font-weight: 700;
     line-height: 1.4;
     letter-spacing: -.04em;

     word-break: keep-all;
 }

 .sub-im-soi .feature-txt p {
     margin-top: .7rem;

     color: #222;

     font-size: .95rem;
     font-weight: 400;
     line-height: 1.75;
     letter-spacing: -.025em;

     word-break: keep-all;
 }

 /* =========================================================
       서울브라운의 특별함
       - 처음에는 01만 노출
       - 스크롤할수록 다음 카드가 아래에서 올라와 앞에 겹침
       - 마지막에는 01~05 상단이 계단처럼 남고 06이 전면 노출
       ========================================================= */

 /* =========================================================
       서울브라운의 특별함 - imp-count-sect 방식
       ========================================================= */
 .sub.sub-im-special {
     margin-top: 0;
 }

 .sub-im-special {
     position: relative;
     padding: 12rem 0 10rem;
     background: #293870;
     overflow: clip;
 }

 .sub-im-special .con {
     overflow: visible;
 }

 /* 상단 */
 .sub-im-special .special-head {
     text-align: center;
 }

 .sub-im-special .sect-tit {
     color: #fff;
     text-align: center;
 }

 .sub-im-special .sect-desc {
     margin-top: 2rem;
     color: rgba(255, 255, 255, .9);
     font-size: 1.15rem;
     font-weight: 400;
     line-height: 1.65;
     letter-spacing: -.025em;
     text-align: center;
     word-break: keep-all;
 }

 /* =========================================================
       스크롤 영역
       imp-count-sect처럼 긴 scroll area + sticky stage
       ========================================================= */

 .sub-im-special .special-list {
     position: relative;
     height: 450vh;
     margin: 6rem auto 0;
 }

 .sub-im-special .special-stage {
     position: sticky;

     /* 카드 높이 23rem 기준 정확히 수직 중앙 */
     top: calc(50vh - 11.5rem);

     width: 100%;
     height: 31rem;
     overflow: visible;
     isolation: isolate;
 }

 /* =========================================================
       카드 공통
       ========================================================= */

 .sub-im-special .special-item {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 23rem;
     margin: 0;
     pointer-events: none;
     transform-origin: center top;
 }

 .sub-im-special .special-card {
     display: grid;
     grid-template-columns: 1fr 1fr;
     width: 100%;
     height: 26rem;
     overflow: hidden;
     border-radius: 1.75rem;
     background: #f5f7fc;
     box-shadow: 0 1rem 3rem rgba(7, 20, 55, .18);

     opacity: 0;
     visibility: hidden;
     transform: translateY(4rem) scale(.98);
     transform-origin: center top;
     filter: brightness(1);

     transition:
         opacity .55s ease,
         transform .75s cubic-bezier(.22, .61, .36, 1),
         filter .55s ease,
         box-shadow .55s ease;

     will-change: transform, opacity, filter;
     backface-visibility: hidden;
 }

 /* 현재 카드 */
 .sub-im-special .special-item.is-current {
     z-index: 20;
 }

 .sub-im-special .special-item.is-current .special-card {
     opacity: 1;
     visibility: visible;
     transform: translateY(0) scale(1);
     filter: brightness(1);
     box-shadow: 0 1.2rem 3rem rgba(7, 20, 55, .22);
 }

 /* 지나간 카드 : 뒤로 갈수록 위로, 작게, 어둡게 */
 .sub-im-special .special-item.is-past {
     z-index: var(--past-z, 10);
 }

 .sub-im-special .special-item.is-past .special-card {
     position: relative;
     opacity: var(--past-opacity, .96);
     visibility: visible;
     transform: translateY(var(--past-y, -1.35rem)) scale(var(--past-scale, .975));

     /* 채도는 건드리지 않고 밝기만 낮춤 */
     filter: brightness(var(--past-brightness, .91));

     box-shadow: 0 .8rem 2.2rem rgba(7, 20, 55, .16);
 }

 /* #263f83 네이비 톤을 얹는 오버레이 */
 .sub-im-special .special-item.is-past .special-card::after {
     content: '';
     position: absolute;
     inset: 0;
     z-index: 10;
     border-radius: inherit;
     background: rgba(38, 63, 131, var(--past-tint, .10));
     pointer-events: none;
 }

 /* 아직 나오지 않은 카드 */
 .sub-im-special .special-item.is-future {
     z-index: 1;
 }

 .sub-im-special .special-item.is-future .special-card {
     opacity: 0;
     visibility: hidden;
     transform: translateY(4rem) scale(.98);
     filter: brightness(1);
 }

 /* 이미지 */
 .sub-im-special .img-box {
     width: 100%;
     height: 100%;
     background: #d9dde7;
 }

 .sub-im-special .img-box img {
     display: block;
     width: 100%;
     height: 100%;
     object-fit: cover;
 }

 /* 텍스트 */
 .sub-im-special .special-txt {
     display: flex;
     flex-direction: column;
     justify-content: center;
     min-width: 0;
     padding: 3.8rem 4rem;
     background: #f5f7fc;
 }

 .sub-im-special .num {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     width: 2.6rem;
     height: 2.6rem;
     margin-bottom: 2rem;
     border-radius: 50%;
     background: #293870;
     color: #fff;
     font-size: .95rem;
     font-weight: 700;
     line-height: 1;
 }

 .sub-im-special .special-txt h3 {
     color: #111;
     font-family: 'Pretendard', sans-serif;
     font-size: 1.65rem;
     font-weight: 700;
     line-height: 1.4;
     letter-spacing: -.045em;
     word-break: keep-all;
 }

 .sub-im-special .special-txt p {
     margin-top: 1.3rem;
     color: #333;
     font-size: 1rem;
     font-weight: 400;
     line-height: 1.85;
     letter-spacing: -.025em;
     word-break: keep-all;
 }

 .sub-im-special .special-txt p:empty {
     display: none;
 }


 /* ==================================================
   SUB LOCATION / 오시는길 · 진료시간 공통 섹션
   ================================================== */

 .info-location {
     position: relative;
     padding: 120px 0 150px;
     background: #fff;
     color: #111;
 }

 .info-location .in {
     position: relative;
     width: min(88.54vw, 1700px);
     margin: 0 auto;
 }

 .info-location .sect-txt {
     text-align: center;
 }

 .info-location .sect-title {
     margin-top: 0;
     color: #111;
     font-family: 'Pretendard', sans-serif;
     font-size: 58px;
     line-height: 1.25;
     font-weight: 700;
     letter-spacing: -.055em;
 }

 .info-location .sect-des {
     margin-top: 50px;
     color: #222;
     font-family: 'Pretendard', sans-serif;
     font-size: 20px;
     line-height: 1.65;
     font-weight: 500;
     letter-spacing: -.04em;
 }

 /* ==================================================
   MAP + INFO
   ================================================== */

 .info-location-wrap {
     display: grid;
     grid-template-columns: 1.05fr 1fr;
     gap: 90px;
     width: 1420px;
     max-width: 100%;
     margin: 90px auto 0;
 }

 /* ==================================================
   LEFT MAP
   ================================================== */

 .info-map-wrap {
     width: 100%;
     min-width: 0;
 }

 .info-map {
     position: relative;
     width: 100%;
     height: 500px;
     overflow: hidden;
     border-radius: 28px;
     background: #ddd;
 }

 .info-map>img {
     display: block;
     width: 100%;
     height: 100%;
     object-fit: cover;
 }

 .info-map img {
     max-width: none;
 }

 /* ==================================================
   NAVER MAP CUSTOM MARKER
   ================================================== */

 .sb-map-marker {
     position: relative;
     width: 230px;
     cursor: pointer;
 }

 .sb-map-marker-box {
     display: flex;
     align-items: center;
     width: 230px;
     height: 66px;
     padding: 0 20px;
     background: #0a2961;
     border-radius: 0;
     box-shadow: 0 7px 22px rgba(0, 0, 0, .18);
 }

 .sb-map-marker-logo {
     display: flex;
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
     width: 42px;
     height: 42px;
     border-radius: 0;
     margin-right: 12px;
 }

 .sb-map-marker-logo img {
     display: block;
     width: 100%;
     height: 100%;
     max-width: none;
     object-fit: contain;
 }

 .sb-map-marker-txt {
     display: flex;
     flex-direction: column;
     justify-content: center;
 }

 .sb-map-marker-txt strong {
     color: #fff;
     font-size: 18px;
     line-height: 1.15;
     font-weight: 700;
     letter-spacing: -.04em;
     white-space: nowrap;
 }

 .sb-map-marker-txt span {
     display: block;
     margin-top: 4px;
     color: rgba(255, 255, 255, .65);
     font-size: 8px;
     line-height: 1;
     letter-spacing: .02em;
     white-space: nowrap;
 }

 .sb-map-marker-arrow {
     position: absolute;
     left: 50%;
     bottom: -10px;
     width: 0;
     height: 0;
     transform: translateX(-50%);
     border-left: 10px solid transparent;
     border-right: 10px solid transparent;
     border-top: 11px solid #0a2961;
 }

 /* ==================================================
   지도 바로가기
   ================================================== */

 .info-map-links {
     display: flex;
     gap: 12px;
     margin-top: 22px;
     justify-content: center;
 }

 .info-map-links a {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 9px;
     min-width: 130px;
     height: 48px;
     padding: 0 20px;
     border-radius: 30px;
     background: #f6f6f6;
     color: #111;
     font-size: 15px;
     font-weight: 600;
     letter-spacing: -.03em;
     text-decoration: none;
     transition: background .25s ease, transform .25s ease;
 }

 .info-map-links a:hover {
     background: #eee;
     transform: translateY(-2px);
 }

 .map-icon {
     display: flex;
     align-items: center;
     width: 19px;
     height: 19px;
     flex-shrink: 0;
 }

 .map-icon img {
     display: block;
     width: 100%;
     height: 100%;
     object-fit: contain;
 }

 /* ==================================================
   RIGHT INFO
   ================================================== */

 .info-location-detail {
     display: flex;
     flex-direction: column;
     justify-content: center;
     gap: 42px;
     min-width: 0;
 }

 .info-location-item {
     display: grid;
     grid-template-columns: 42px 1fr;
     gap: 20px;
     align-items: flex-start;
 }

 .info-location-item .info-icon,
 .info-location-item.parking .info-icon {
     display: flex;
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
     width: 42px;
     height: 42px;
     margin: 0;
     background: none;
     border-radius: 0;
     color: inherit;
     font-size: 0;
 }

 .info-location-item .info-icon img,
 .info-location-item.parking .info-icon img {
     display: block;
     width: 34px;
     height: 34px;
     object-fit: contain;
     filter: brightness(0) saturate(100%);
 }

 .info-location-item .info-txt {
     min-width: 0;
     padding-top: 2px;
 }

 .info-location-item .info-txt>strong {
     display: block;
     font-size: 25px;
     line-height: 1.4;
     font-weight: 600;
     letter-spacing: -.04em;
 }

 .info-location-item .phone-num {
     font-size: 42px !important;
     line-height: 1 !important;
     font-weight: 600 !important;
     letter-spacing: -.03em !important;
 }

 .info-location-item.address .point {
     margin-top: 7px;
     color: #1760d0;
     font-size: 26px;
     line-height: 1.4;
     font-weight: 700;
     letter-spacing: -.045em;
 }

 /* ==================================================
   진료시간
   ================================================== */

 .info-location-item.time .info-txt {
     width: 100%;
 }

 .time-row {
     display: grid;
     grid-template-columns: 125px auto 1fr;
     align-items: center;
     column-gap: 8px;
     min-height: 50px;
 }

 .time-row strong {
     font-size: 24px;
     font-weight: 600;
     letter-spacing: -.04em;
 }

 .time-row span {
     font-size: 24px;
     font-weight: 500;
     letter-spacing: -.04em;
 }

 .time-row em {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     justify-self: start;
     height: 28px;
     padding: 0 10px;
     border-radius: 20px;
     background: #277be4;
     color: #fff;
     font-size: 12px;
     line-height: 1;
     font-style: normal;
     font-weight: 600;
     white-space: nowrap;
 }

 /* =========================================================
   임플란트 FAQ
========================================================= */

 .sub.sub-im-faq {
     margin: 0;
 }

 .sub-im-faq {
     padding: 7.5rem 0 8.75rem;
     background: #edf1fa;
 }

 .sub-im-faq .con {
     display: block;
 }

 .sub-im-faq .faq-head {
     margin: 0 auto;
     width: 72rem;
 }

 .sub-im-faq .faq-label {
     display: inline-flex;
     align-items: center;
     justify-content: center;

     height: 2rem;
     padding: 0 1rem;

     border-radius: 2rem;
     background: #dce5f8;

     color: #294589;
     font-size: .8rem;
     font-weight: 700;
     letter-spacing: .04em;
 }

 .sub-im-faq .sect-tit {
     margin-top: 1.2rem;
 }

 .sub-im-faq .sect-desc {
     margin-top: 1.3rem;

     color: #555;
     font-size: 1.15rem;
     font-weight: 400;
     line-height: 1.7;
     letter-spacing: -.025em;

     word-break: keep-all;
 }


 /* FAQ 전체 */

 .sub-im-faq .faq-list {
     width: 72rem;
     margin: 4rem auto 0;
 }


 /* 항목 */

 .sub-im-faq .faq-item {
     overflow: hidden;

     margin-top: .85rem;

     border: 1px solid rgba(41, 69, 137, .08);
     border-radius: 1rem;

     background: #fff;

     transition:
         border-color .3s ease,
         box-shadow .3s ease;
 }

 .sub-im-faq .faq-item:first-child {
     margin-top: 0;
 }

 .sub-im-faq .faq-item[open] {
     border-color: rgba(41, 69, 137, .18);
     box-shadow: 0 .6rem 1.8rem rgba(37, 59, 111, .06);
 }


 /* 질문 */

 .sub-im-faq summary {
     display: grid;
     grid-template-columns: 3.1rem 1fr 2.2rem;
     gap: 1rem;
     align-items: center;

     min-height: 5.7rem;
     padding: 1rem 1.7rem;

     cursor: pointer;
     list-style: none;
 }

 .sub-im-faq summary::-webkit-details-marker {
     display: none;
 }

 .sub-im-faq .faq-num {
     display: flex;
     align-items: center;
     justify-content: center;

     width: 2.8rem;
     height: 2.8rem;

     border-radius: 50%;
     background: #edf1fa;

     color: #294589;
     font-size: .85rem;
     font-weight: 700;
 }

 .sub-im-faq summary strong {
     color: #111;

     font-family: 'Pretendard', sans-serif;
     font-size: 1.18rem;
     font-weight: 700;
     line-height: 1.5;
     letter-spacing: -.035em;

     word-break: keep-all;
 }


 /* + 아이콘 */

 .sub-im-faq .faq-icon {
     position: relative;

     display: block;

     width: 2rem;
     height: 2rem;

     border-radius: 50%;
     background: #f3f5f9;

     transition: background .3s ease;
 }

 .sub-im-faq .faq-icon::before,
 .sub-im-faq .faq-icon::after {
     content: '';

     position: absolute;
     top: 50%;
     left: 50%;

     width: .8rem;
     height: 1px;

     background: #294589;

     transform: translate(-50%, -50%);

     transition: transform .3s ease;
 }

 .sub-im-faq .faq-icon::after {
     transform: translate(-50%, -50%) rotate(90deg);
 }

 .sub-im-faq .faq-item[open] .faq-icon {
     background: #294589;
 }

 .sub-im-faq .faq-item[open] .faq-icon::before,
 .sub-im-faq .faq-item[open] .faq-icon::after {
     background: #fff;
 }

 .sub-im-faq .faq-item[open] .faq-icon::after {
     transform: translate(-50%, -50%) rotate(0);
 }


 /* 답변 */

 .sub-im-faq .faq-answer {
     padding: 0 5rem 2rem 5.8rem;
 }

 .sub-im-faq .faq-answer p {
     padding-top: 1.5rem;

     border-top: 1px solid #edf0f5;

     color: #555;
     font-size: .95rem;
     font-weight: 400;
     line-height: 1.85;
     letter-spacing: -.025em;

     word-break: keep-all;
 }


 /* 하단 안내 */

 .sub-im-faq .faq-notice {
     width: 72rem;
     margin: 1.5rem auto 0;

     color: #999;
     font-size: .75rem;
     line-height: 1.65;
     letter-spacing: -.02em;

     text-align: center;
     word-break: keep-all;
 }



 /* =========================================================
   전체임플란트 - 틀니와 전체임플란트 차이
========================================================= */

 .sub-im-all-diff {
     padding: 7.5rem 0 8.75rem;
     background: #edf1fa;
 }

 .sub-im-all-diff .con {
     display: block;
 }

 .sub-im-all-diff .diff-head {
     text-align: center;
 }

 .sub-im-all-diff .sect-tit {
     text-align: center;
 }

 .sub-im-all-diff .sect-desc {
     max-width: 52rem;
     margin: 1.4rem auto 0;

     color: #555;
     font-size: 1.05rem;
     font-weight: 400;
     line-height: 1.8;
     letter-spacing: -.025em;

     text-align: center;
     word-break: keep-all;
 }

 .sub-im-all-diff .diff-wrap {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 1.5rem;

     width: 80rem;
     margin: 4rem auto 0;
 }

 .sub-im-all-diff .diff-card {
     overflow: hidden;

     border-radius: 1.5rem;
     background: #fff;

     box-shadow: 0 .7rem 2rem rgba(39, 62, 115, .06);
 }

 .sub-im-all-diff .diff-card.implant {
     border: 2px solid rgba(41, 69, 137, .18);
 }

 .sub-im-all-diff .diff-img {
     position: relative;

     width: 100%;
     height: 20rem;

     overflow: hidden;
     background: #d9dce3;
 }

 .sub-im-all-diff .diff-img img {
     display: block;

     width: 100%;
     height: 100%;

     object-fit: cover;
 }

 .sub-im-all-diff .diff-badge {
     position: absolute;
     top: 1.3rem;
     left: 1.3rem;

     display: inline-flex;
     align-items: center;
     justify-content: center;

     height: 2.2rem;
     padding: 0 1rem;

     border-radius: 2rem;
     background: rgba(255, 255, 255, .92);

     color: #444;
     font-size: .8rem;
     font-weight: 700;
     letter-spacing: .02em;
 }

 .sub-im-all-diff .diff-card.implant .diff-badge {
     background: #294589;
     color: #fff;
 }

 .sub-im-all-diff .diff-cont {
     padding: 2rem 2.2rem 2.3rem;
 }

 .sub-im-all-diff .diff-cont h3 {
     color: #111;

     font-family: 'Pretendard', sans-serif;
     font-size: 1.55rem;
     font-weight: 700;
     line-height: 1.4;
     letter-spacing: -.04em;

     word-break: keep-all;
 }

 .sub-im-all-diff .diff-cont>p {
     margin-top: .8rem;

     color: #555;
     font-size: .92rem;
     line-height: 1.75;
     letter-spacing: -.025em;

     word-break: keep-all;
 }

 .sub-im-all-diff .diff-list {
     margin-top: 1.7rem;
     border-top: 1px solid #edf0f5;
 }

 .sub-im-all-diff .diff-list li {
     display: grid;
     grid-template-columns: 7rem 1fr;
     gap: 1rem;

     padding: 1rem 0;

     border-bottom: 1px solid #edf0f5;

     font-size: .9rem;
     line-height: 1.65;
     letter-spacing: -.025em;
 }

 .sub-im-all-diff .diff-list strong {
     color: #294589;
     font-weight: 700;
 }

 .sub-im-all-diff .diff-list span {
     color: #444;
     word-break: keep-all;
 }

 .sub-im-all-diff .diff-notice {
     width: 80rem;
     margin: 1.3rem auto 0;

     color: #999;
     font-size: .75rem;
     line-height: 1.65;
     letter-spacing: -.02em;

     text-align: center;
     word-break: keep-all;
 }


 /* =========================================================
   전체임플란트 - All-on-X
========================================================= */

 .sub-im-all-onx {
     padding: 7.5rem 0 8.75rem;
     background: #fff;
 }

 .sub-im-all-onx .con {
     display: block;
 }

 .sub-im-all-onx .onx-head {
     text-align: center;
 }

 .sub-im-all-onx .onx-label {
     display: inline-flex;
     align-items: center;
     justify-content: center;

     height: 2.1rem;
     padding: 0 1rem;

     border-radius: 2rem;
     background: #edf1fa;

     color: #294589;
     font-size: .8rem;
     font-weight: 700;
     letter-spacing: .05em;
 }

 .sub-im-all-onx .sect-tit {
     margin-top: 1.2rem;
     text-align: center;
 }

 .sub-im-all-onx .sect-desc {
     max-width: 55rem;
     margin: 1.5rem auto 0;

     color: #444;
     font-size: 1.05rem;
     font-weight: 400;
     line-height: 1.85;
     letter-spacing: -.025em;

     text-align: center;
     word-break: keep-all;
 }

 .sub-im-all-onx .onx-main {
     display: grid;
     grid-template-columns: 36rem 1fr;
     gap: 4rem;
     align-items: center;

     width: 80rem;
     margin: 4.5rem auto 0;
 }

 .sub-im-all-onx .onx-img {
     width: 36rem;
     height: 28rem;

     overflow: hidden;

     border-radius: 1.8rem;
     background: #d9dce3;
 }

 .sub-im-all-onx .onx-img img {
     display: block;

     width: 100%;
     height: 100%;

     object-fit: cover;
 }

 .sub-im-all-onx .onx-cont h3 {
     color: #111;

     font-family: 'Pretendard', sans-serif;
     font-size: 1.8rem;
     font-weight: 700;
     line-height: 1.45;
     letter-spacing: -.045em;

     word-break: keep-all;
 }

 .sub-im-all-onx .onx-cont>p {
     margin-top: 1.2rem;

     color: #444;
     font-size: 1rem;
     line-height: 1.8;
     letter-spacing: -.025em;

     word-break: keep-all;
 }

 .sub-im-all-onx .onx-points {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: .8rem;

     margin-top: 2rem;
 }

 .sub-im-all-onx .onx-point {
     min-height: 6rem;
     padding: 1.3rem 1.4rem;

     border-radius: 1rem;
     background: #edf1fa;
 }

 .sub-im-all-onx .onx-point .num {
     display: block;

     color: #294589;
     font-size: .72rem;
     font-weight: 700;
     letter-spacing: .04em;
 }

 .sub-im-all-onx .onx-point strong {
     display: block;
     margin-top: .55rem;

     color: #111;
     font-size: 1rem;
     font-weight: 700;
     line-height: 1.45;
     letter-spacing: -.03em;

     word-break: keep-all;
 }

 .sub-im-all-onx .onx-notice {
     width: 80rem;
     margin: 2rem auto 0;

     color: #999;
     font-size: .75rem;
     line-height: 1.65;
     letter-spacing: -.02em;

     text-align: center;
     word-break: keep-all;
 }


 /* 전체임플란트 인트로 설명 */
 .sub-im-intro .intro-desc {
     max-width: 58rem;
     margin-top: 1.5rem;

     color: #555;
     font-size: 1.05rem;
     font-weight: 400;
     line-height: 1.8;
     letter-spacing: -.025em;

     word-break: keep-all;
 }


/* =========================================================
   내비게이션 임플란트 - 3D CT / 디지털 구강스캔
========================================================= */

 .sub-im-nav-digital {
     padding: 7.5rem 0 8.75rem;
     background: #edf1fa;
 }

 .sub-im-nav-digital .con {
     display: block;
 }

 .sub-im-nav-digital .diff-head {
     text-align: center;
 }

 .sub-im-nav-digital .sect-tit {
     text-align: center;
 }

 .sub-im-nav-digital .sect-desc {
     max-width: 52rem;
     margin: 1.4rem auto 0;

     color: #555;
     font-size: 1.05rem;
     font-weight: 400;
     line-height: 1.8;
     letter-spacing: -.025em;

     text-align: center;
     word-break: keep-all;
 }

 .sub-im-nav-digital .diff-wrap {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 1.5rem;

     width: 80rem;
     margin: 4rem auto 0;
 }

 .sub-im-nav-digital .diff-card {
     overflow: hidden;

     border-radius: 1.5rem;
     background: #fff;

     box-shadow: 0 .7rem 2rem rgba(39, 62, 115, .06);
 }



 .sub-im-nav-digital .diff-img {
     position: relative;

     width: 100%;
     height: 20rem;

     overflow: hidden;
     background: #d9dce3;
 }

 .sub-im-nav-digital .diff-img img {
     display: block;

     width: 100%;
     height: 100%;

     object-fit: cover;
 }

 .sub-im-nav-digital .diff-badge {
     position: absolute;
     top: 1.3rem;
     left: 1.3rem;

     display: inline-flex;
     align-items: center;
     justify-content: center;

     height: 2.2rem;
     padding: 0 1rem;

     border-radius: 2rem;
     background: #294589;
    color: #fff;
     font-size: .8rem;
     font-weight: 700;
     letter-spacing: .02em;
 }

 .sub-im-nav-digital .diff-card.implant .diff-badge {
     background: #294589;
     color: #fff;
 }

 .sub-im-nav-digital .diff-cont {
     padding: 2rem 2.2rem 2.3rem;
 }

 .sub-im-nav-digital .diff-cont h3 {
     color: #111;

     font-family: 'Pretendard', sans-serif;
     font-size: 1.55rem;
     font-weight: 700;
     line-height: 1.4;
     letter-spacing: -.04em;

     word-break: keep-all;
 }

 .sub-im-nav-digital .diff-cont>p {
     margin-top: .8rem;

     color: #555;
     font-size: .92rem;
     line-height: 1.75;
     letter-spacing: -.025em;

     word-break: keep-all;
 }

 .sub-im-nav-digital .diff-list {
     margin-top: 1.7rem;
     border-top: 1px solid #edf0f5;
 }

 .sub-im-nav-digital .diff-list li {
     display: grid;
     grid-template-columns: 7rem 1fr;
     gap: 1rem;

     padding: 1rem 0;

     border-bottom: 1px solid #edf0f5;

     font-size: .9rem;
     line-height: 1.65;
     letter-spacing: -.025em;
 }

 .sub-im-nav-digital .diff-list strong {
     color: #294589;
     font-weight: 700;
 }

 .sub-im-nav-digital .diff-list span {
     color: #444;
     word-break: keep-all;
 }

 .sub-im-nav-digital .diff-notice {
     width: 80rem;
     margin: 1.3rem auto 0;

     color: #999;
     font-size: .75rem;
     line-height: 1.65;
     letter-spacing: -.02em;

     text-align: center;
     word-break: keep-all;
 }


/* =========================================================
   내비게이션 임플란트 - 디지털 수술 가이드 / 무절개
========================================================= */

 .sub-im-nav-guide {
     padding: 7.5rem 0 8.75rem;
     background: #fff;
 }

 .sub-im-nav-guide .con {
     display: block;
 }

 .sub-im-nav-guide .onx-head {
     text-align: center;
 }

 .sub-im-nav-guide .onx-label {
     display: inline-flex;
     align-items: center;
     justify-content: center;

     height: 2.1rem;
     padding: 0 1rem;

     border-radius: 2rem;
     background: #edf1fa;

     color: #294589;
     font-size: .8rem;
     font-weight: 700;
     letter-spacing: .05em;
 }

 .sub-im-nav-guide .sect-tit {
     margin-top: 1.2rem;
     text-align: center;
 }

 .sub-im-nav-guide .sect-desc {
     max-width: 55rem;
     margin: 1.5rem auto 0;

     color: #444;
     font-size: 1.05rem;
     font-weight: 400;
     line-height: 1.85;
     letter-spacing: -.025em;

     text-align: center;
     word-break: keep-all;
 }

 .sub-im-nav-guide .onx-main {
     display: grid;
     grid-template-columns: 36rem 1fr;
     gap: 4rem;
     align-items: center;

     width: 80rem;
     margin: 4.5rem auto 0;
 }

 .sub-im-nav-guide .onx-img {
     width: 36rem;
     height: 28rem;

     overflow: hidden;

     border-radius: 1.8rem;
     background: #d9dce3;
 }

 .sub-im-nav-guide .onx-img img {
     display: block;

     width: 100%;
     height: 100%;

     object-fit: cover;
 }

 .sub-im-nav-guide .onx-cont h3 {
     color: #111;

     font-family: 'Pretendard', sans-serif;
     font-size: 1.8rem;
     font-weight: 700;
     line-height: 1.45;
     letter-spacing: -.045em;

     word-break: keep-all;
 }

 .sub-im-nav-guide .onx-cont>p {
     margin-top: 1.2rem;

     color: #444;
     font-size: 1rem;
     line-height: 1.8;
     letter-spacing: -.025em;

     word-break: keep-all;
 }

 .sub-im-nav-guide .onx-points {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: .8rem;

     margin-top: 2rem;
 }

 .sub-im-nav-guide .onx-point {
     min-height: 6rem;
     padding: 1.3rem 1.4rem;

     border-radius: 1rem;
     background: #edf1fa;
 }

 .sub-im-nav-guide .onx-point .num {
     display: block;

     color: #294589;
     font-size: .72rem;
     font-weight: 700;
     letter-spacing: .04em;
 }

 .sub-im-nav-guide .onx-point strong {
     display: block;
     margin-top: .55rem;

     color: #111;
     font-size: 1rem;
     font-weight: 700;
     line-height: 1.45;
     letter-spacing: -.03em;

     word-break: keep-all;
 }

 .sub-im-nav-guide .onx-notice {
     width: 80rem;
     margin: 2rem auto 0;

     color: #999;
     font-size: .75rem;
     line-height: 1.65;
     letter-spacing: -.02em;

     text-align: center;
     word-break: keep-all;
 }

/* =========================================================
   당일식립 임플란트 - 시술과정
   ========================================================= */

.sub-im-1day {
    padding: 7.5rem 0 7.8rem;
    background: #1c3064;
    color: #fff;
}

.sub-im-1day .one-day-head {
    text-align: center;
}

.sub-im-1day .sect-tit {
    color: #fff;
    text-align: center;
}

.sub-im-1day .sect-desc {
    margin-top: 1.5rem;
    color: rgba(255, 255, 255, .92);
    font-size: 1.05rem;
    font-weight: 400;
    line-height: 1.8;
    letter-spacing: -.03em;
    text-align: center;
    word-break: keep-all;
}

.sub-im-1day .one-day-process {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
    margin-top: 3.4rem;
}

.sub-im-1day .process-item .img-box {
    width: 100%;
    height: 19.3rem;
    background: rgba(255, 255, 255, .08);
        border-radius: 15px;
    overflow: hidden;
}

.sub-im-1day .process-cont {
    min-height: 11rem;
    padding: 1.25rem 1rem 1.8rem;
    text-align: center;
    color: #fff;
}

.sub-im-1day .process-cont .step {
    display: block;
    
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.2;
}

.sub-im-1day .process-cont h3 {
    margin-top: .25rem;
    font-size: 1.55rem;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -.04em;
}

.sub-im-1day .process-cont p {
    margin-top: .9rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.65;
    letter-spacing: -.03em;
}


/* =========================================================
   당일식립 임플란트 - 장점
   ========================================================= */
.sub.sub-im-1day-benefit {
    margin-top: 0;
}
.sub-im-1day-benefit {
    padding: 7.5rem 0 8rem;
    background: #edf1fa;
}

.sub-im-1day-benefit .benefit-head {
    text-align: center;
}

.sub-im-1day-benefit .sect-tit {
    text-align: center;
}

.sub-im-1day-benefit .sect-desc {
    max-width: 48rem;
    margin: 1.4rem auto 0;
    color: #555;
    font-size: 1.05rem;
    line-height: 1.75;
    letter-spacing: -.03em;
    word-break: keep-all;
}

.sub-im-1day-benefit .benefit-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
    margin-top: 4rem;
}

.sub-im-1day-benefit .benefit-item {
    min-height: 19rem;
    padding: 2.2rem 2rem;
    border-radius: 1.25rem;
    background: #fff;
}

.sub-im-1day-benefit .benefit-item .num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.7rem;
    height: 2.7rem;
    border-radius: 50%;
    background: #294589;
    color: #fff;
    font-size: .9rem;
    font-weight: 700;
}

.sub-im-1day-benefit .benefit-item h3 {
    margin-top: 1.6rem;
    color: #111;
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.45;
    letter-spacing: -.04em;
    word-break: keep-all;
}

.sub-im-1day-benefit .benefit-item p {
    margin-top: 1rem;
    color: #555;
    font-size: .9rem;
    line-height: 1.75;
    letter-spacing: -.025em;
    word-break: keep-all;
}


/* =========================================================
   당일식립 임플란트 - 주의사항
   ========================================================= */

.sub-im-1day-caution {
    padding: 7.5rem 0 8rem;
    background: #fff;
}

.sub-im-1day-caution .caution-head {
    text-align: center;
}

.sub-im-1day-caution .sect-tit {
    text-align: center;
}

.sub-im-1day-caution .sect-desc {
    max-width: 50rem;
    margin: 1.4rem auto 0;
    color: #555;
    font-size: 1.05rem;
    line-height: 1.75;
    letter-spacing: -.03em;
    word-break: keep-all;
}

.sub-im-1day-caution .caution-wrap {
    width: 72rem;
    margin: 4rem auto 0;
}

.sub-im-1day-caution .caution-wrap ul {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .9rem 1rem;
}

.sub-im-1day-caution .caution-wrap li {
    position: relative;
    min-height: 8.2rem;
    padding: 1.6rem 1.8rem 1.6rem 4.3rem;
    border: 1px solid #e2e6ef;
    border-radius: 1rem;
    background: #fafbfc;
}

.sub-im-1day-caution .caution-wrap li::before {
    content: '!';
    position: absolute;
    top: 1.55rem;
    left: 1.7rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 50%;
    background: #edf1fa;
    color: #294589;
    font-size: 1rem;
    font-weight: 800;
}

.sub-im-1day-caution .caution-wrap strong {
    display: block;
    color: #111;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: -.035em;
    word-break: keep-all;
}

.sub-im-1day-caution .caution-wrap span {
    display: block;
    margin-top: .55rem;
    color: #666;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: -.025em;
    word-break: keep-all;
}

/* =========================================================
   수면 임플란트 공통 헤더
   ========================================================= */

.sub-im-sleep-compare,
.sub-im-sleep-anesthesia,
.sub-im-sleep-principle,
.sub-im-sleep-step,
.sub-im-sleep-treatment {
    font-family: 'Pretendard', sans-serif;
}

.sub-im-sleep-compare .sleep-head,
.sub-im-sleep-anesthesia .sleep-head,
.sub-im-sleep-principle .sleep-head,
.sub-im-sleep-step .sleep-head {
    text-align: center;
}

.sub-im-sleep-compare .sect-tit,
.sub-im-sleep-anesthesia .sect-tit,
.sub-im-sleep-principle .sect-tit,
.sub-im-sleep-step .sect-tit {
    text-align: center;
}

.sleep-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2rem;
    padding: 0 .95rem;
    border-radius: 2rem;
    background: #294589;
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .03em;
}

.sub-im-sleep-compare .sleep-head .sect-tit,
.sub-im-sleep-anesthesia .sleep-head .sect-tit,
.sub-im-sleep-principle .sleep-head .sect-tit,
.sub-im-sleep-step .sleep-head .sect-tit {
    margin-top: 1.2rem;
}

.sub-im-sleep-compare .sect-desc,
.sub-im-sleep-anesthesia .sect-desc,
.sub-im-sleep-principle .sect-desc,
.sub-im-sleep-step .sect-desc,
.sub-im-sleep-treatment .sect-desc {
    color: #555;
    font-size: 1.05rem;
    font-weight: 400;
    line-height: 1.75;
    letter-spacing: -.03em;
    word-break: keep-all;
}


/* =========================================================
   일반 임플란트 vs 수면 임플란트
   ========================================================= */

.sub-im-sleep-compare {
    padding: 7.5rem 0 8rem;
    background: #fff;
}

.sub-im-sleep-compare .sleep-head .sect-desc {
    max-width: 49rem;
    margin: 1.5rem auto 0;
}

.sub-im-sleep-compare .sleep-compare-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    margin-top: 4rem;
}

.sub-im-sleep-compare .sleep-compare-card {
    overflow: hidden;
    border: 1px solid #e3e7ef;
    border-radius: 1.6rem;
    background: #fff;
}

.sub-im-sleep-compare .sleep-compare-card.sedation {
    border-color: #cbd7ef;
    box-shadow: 0 1rem 2.8rem rgba(41, 69, 137, .08);
}

.sub-im-sleep-compare .img-box {
    width: 100%;
    height: 23rem;
    background: #dadadc;
}

.sub-im-sleep-compare .sleep-compare-card.sedation .img-box {
    background: #d7dfef;
}

.sub-im-sleep-compare .compare-cont {
    padding: 2.2rem 2.3rem 2.4rem;
}

.sub-im-sleep-compare .compare-type {
    color: #7b8392;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .04em;
}

.sub-im-sleep-compare .sedation .compare-type {
    color: #294589;
}

.sub-im-sleep-compare .compare-cont h3 {
    margin-top: .45rem;
    color: #111;
    font-size: 1.65rem;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -.045em;
}

.sub-im-sleep-compare .compare-cont ul {
    margin-top: 1.8rem;
    border-top: 1px solid #e7e9ee;
}

.sub-im-sleep-compare .compare-cont li {
    display: grid;
    grid-template-columns: 7rem 1fr;
    gap: 1rem;
    padding: 1rem 0;
    border-bottom: 1px solid #e7e9ee;
}

.sub-im-sleep-compare .compare-cont li strong {
    color: #294589;
    font-size: .9rem;
    font-weight: 700;
}

.sub-im-sleep-compare .normal .compare-cont li strong {
    color: #555;
}

.sub-im-sleep-compare .compare-cont li span {
    color: #555;
    font-size: .9rem;
    line-height: 1.6;
    word-break: keep-all;
}


/* =========================================================
   전신마취 vs 수면치료
   ========================================================= */

.sub-im-sleep-anesthesia {
    padding: 7.5rem 0 8rem;
    background: #edf1fa;
}

.sub-im-sleep-anesthesia .sleep-head .sect-desc {
    max-width: 52rem;
    margin: 1.5rem auto 0;
}

.sub-im-sleep-anesthesia .anesthesia-compare {
    width: 100%;
    margin-top: 4rem;
}

.sub-im-sleep-anesthesia .anesthesia-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 11rem minmax(0, 1fr);
    gap: .75rem;
    margin-top: .75rem;
}

.sub-im-sleep-anesthesia .anesthesia-row:first-child {
    margin-top: 0;
}

.sub-im-sleep-anesthesia .anesthesia-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 6rem;
    padding: 1.2rem 1.5rem;
    border-radius: .85rem;
    text-align: center;
    word-break: keep-all;
}

.sub-im-sleep-anesthesia .anesthesia-head-row .anesthesia-cell {
    min-height: 4.4rem;
    color: #fff;
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: -.035em;
}

.sub-im-sleep-anesthesia .general-head {
    background: #353535;
}

.sub-im-sleep-anesthesia .category-head {
    background: #c7d0e3;
    color: #555 !important;
}

.sub-im-sleep-anesthesia .sedation-head {
    background: #20396f;
}

.sub-im-sleep-anesthesia .sedation-head span {
    margin-left: .2rem;
    font-size: .9rem;
    font-weight: 600;
}

.sub-im-sleep-anesthesia .general-value {
    background: #fff;
    color: #555;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.65;
    letter-spacing: -.025em;
}

.sub-im-sleep-anesthesia .category {
    background: #d7dfef;
    color: #555;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -.03em;
}

.sub-im-sleep-anesthesia .sedation-value {
    background: #fff;
    color: #20396f;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.65;
    letter-spacing: -.025em;
}

.sub-im-sleep-anesthesia .sleep-note,
.sub-im-sleep-treatment .sleep-note {
    margin-top: 2rem;
    color: #808692;
    font-size: .75rem;
    line-height: 1.6;
    text-align: center;
}


/* =========================================================
   수면치료 4가지 원칙
   ========================================================= */
.sub.sub-im-sleep-principle {
    margin-top: 0;
}   

.sub-im-sleep-principle {
    padding: 7.5rem 0 8rem;
    background: #21386f;
}

.sub-im-sleep-principle .sleep-label {
    background: rgba(255,255,255,.14);
    color: #fff;
}

.sub-im-sleep-principle .sect-tit {
    color: #fff;
}

.sub-im-sleep-principle .sect-desc {
    max-width: 50rem;
    margin: 1.5rem auto 0;
    color: rgba(255,255,255,.78);
}

.sub-im-sleep-principle .principle-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
    margin-top: 4rem;
}

.sub-im-sleep-principle .principle-card {
    display: grid;
    grid-template-columns: 20rem 1fr;
    min-height: 14rem;
    overflow: hidden;
    border-radius: 1.4rem;
    background: #fff;
}

.sub-im-sleep-principle .principle-card .img-box {
    min-height: 14rem;
    background: #dadadc;
}

.sub-im-sleep-principle .principle-cont {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 2rem 2.2rem;
}

.sub-im-sleep-principle .principle-cont .num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: #edf1fa;
    color: #294589;
    font-size: .82rem;
    font-weight: 800;
}

.sub-im-sleep-principle .principle-cont h3 {
    margin-top: 1rem;
    color: #111;
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1.45;
    letter-spacing: -.04em;
    word-break: keep-all;
}

.sub-im-sleep-principle .principle-cont p {
    margin-top: .8rem;
    color: #5b6069;
    font-size: .88rem;
    line-height: 1.7;
    letter-spacing: -.025em;
    word-break: keep-all;
}


/* =========================================================
   수면치료 6단계
   ========================================================= */

.sub-im-sleep-step {
    padding: 7.5rem 0 8rem;
    background: #fff;
}

.sub-im-sleep-step .sleep-head .sect-desc {
    margin-top: 1.5rem;
}

.sub-im-sleep-step .sleep-step-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-top: 4rem;
}

.sub-im-sleep-step .sleep-step-card {
    position: relative;
    min-height: 20rem;
    padding: 2rem 2rem 2.2rem;
    overflow: hidden;
    border: 1px solid #d9dfea;
    border-radius: 1.25rem;
    background: #fff;
}


.sub-im-sleep-step .step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 5rem;
    height: 1.85rem;
    padding: 0 .8rem;
    border-radius: 2rem;
    background: #21386f;
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
}

.sub-im-sleep-step .icon-box {
    width: 5.5rem;
    height: 5.5rem;
    margin-top: 1.7rem;
    border-radius: 50%;
    background: #edf1fa;
        padding: .85rem;
}
.sub-im-sleep-step .icon-box img {
    width: 100%;
    display: block;
}
.sub-im-sleep-step .sleep-step-card h3 {
    margin-top: 1.5rem;
    color: #111;
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: -.04em;
    word-break: keep-all;
}

.sub-im-sleep-step .sleep-step-card p {
    margin-top: .75rem;
    color: #60656e;
    font-size: .85rem;
    line-height: 1.7;
    letter-spacing: -.025em;
    word-break: keep-all;
}


/* =========================================================
   수면치료로 고려할 수 있는 치과치료
   ========================================================= */

.sub-im-sleep-treatment {
    padding: 7.5rem 0 8rem;
}

.sub-im-sleep-treatment .sleep-treatment-wrap {
    display: grid;
    grid-template-columns: 29rem 1fr;
    gap: 5rem;
    align-items: center;
}

.sub-im-sleep-treatment .sleep-treatment-head .sect-tit {
    margin-top: 1.2rem;
}

.sub-im-sleep-treatment .sleep-treatment-head .sect-desc {
    margin-top: 1.5rem;
}

.sub-im-sleep-treatment .sleep-treatment-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .9rem;
}

.sub-im-sleep-treatment .sleep-treatment-list>div {
    display: flex;
    align-items: center;
    gap: .8rem;
    min-height: 5rem;
    padding: 0 1.35rem;
    border-radius: .9rem;
        background: #edf1fa;
    box-shadow: 0 .4rem 1rem rgba(38, 58, 103, .04);
}

.sub-im-sleep-treatment .sleep-treatment-list span {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 1.35rem;
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 50%;
    background: #294589;
    color: #fff;
    font-size: .68rem;
    font-weight: 700;
}

.sub-im-sleep-treatment .sleep-treatment-list strong {
    color: #222;
    font-size: .92rem;
    font-weight: 700;
    line-height: 1.4;
    word-break: keep-all;
}

/* =========================================================
   224 뼈이식 임플란트 - 전용 섹션
   ========================================================= */

.sub-im-intro .list.bone li p {
    height: 5.625rem;
}

.sub-im-intro .cause-wrap.bone {
    grid-template-columns: 16.25rem 1fr;
}


/* =========================================================
   뼈 부족 위치별 치료
   ========================================================= */

.sub-im-bone-type {
    padding: 7.5rem 0 8rem;
    background: #fff;
}

.sub-im-bone-type .bone-head {
    text-align: left;
}

.sub-im-bone-type .sect-desc {
    max-width: 48rem;
    margin-top: 1.5rem;
    color: #555;
    font-size: 1.05rem;
    line-height: 1.75;
    letter-spacing: -.03em;
    word-break: keep-all;
}

.sub-im-bone-type .bone-tab {
    margin-top: 4rem;
}

.sub-im-bone-type .bone-tab > input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

.sub-im-bone-type .bone-tab-nav {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    width: 34rem;
    margin: 0 auto;
    padding: .35rem;
    border-radius: 3rem;
    background: #f2f3f5;
}

.sub-im-bone-type .bone-tab-nav label {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 3rem;
    border-radius: 3rem;
    color: #34415d;
    font-size: .92rem;
    font-weight: 700;
    cursor: pointer;
    transition: .25s ease;
}

#bone-type-1:checked ~ .bone-tab-nav label[for="bone-type-1"],
#bone-type-2:checked ~ .bone-tab-nav label[for="bone-type-2"],
#bone-type-3:checked ~ .bone-tab-nav label[for="bone-type-3"] {
    background: #20396f;
    color: #fff;
}

.sub-im-bone-type .bone-tab-panels {
    margin-top: 2.2rem;
}

.sub-im-bone-type .bone-panel {
    display: none;
    overflow: hidden;
    border-radius: 1.35rem;
    background: #f7f8fa;
}

#bone-type-1:checked ~ .bone-tab-panels .panel-1,
#bone-type-2:checked ~ .bone-tab-panels .panel-2,
#bone-type-3:checked ~ .bone-tab-panels .panel-3 {
    display: grid;
    grid-template-columns: 0.8fr .8fr;
}

.sub-im-bone-type .bone-panel .img-box {
    min-height: 23rem;
    background: #dadadc;
}

.sub-im-bone-type .bone-panel-cont {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 3.4rem 3.5rem;
}

.sub-im-bone-type .bone-panel-cont h3 {
    color: #111;
    font-size: 1.55rem;
    font-weight: 700;
    line-height: 1.45;
    letter-spacing: -.045em;
    word-break: keep-all;
}

.sub-im-bone-type .bone-panel-cont p {
    margin-top: 1.3rem;
    color: #555;
    font-size: .95rem;
    line-height: 1.75;
    letter-spacing: -.03em;
    word-break: keep-all;
}

.sub-im-bone-type .bone-panel-cont ul {
    display: grid;
    gap: .7rem;
    margin-top: 1.7rem;
}

.sub-im-bone-type .bone-panel-cont li {
    position: relative;
    padding-left: 1.4rem;
    color: #333;
    font-size: .88rem;
    line-height: 1.55;
    word-break: keep-all;
}

.sub-im-bone-type .bone-panel-cont li::before {
    content: '✓';
    position: absolute;
    top: 0;
    left: 0;
    color: #294589;
    font-weight: 800;
}


/* =========================================================
   뼈이식 재료
   ========================================================= */

.sub-im-bone-material {
    padding: 7.5rem 0 8rem;
    background: #edf1fa;
}

.sub-im-bone-material .bone-material-head {
    text-align: center;
}

.sub-im-bone-material .bone-material-head .sect-tit {
    text-align: center;
}

.sub-im-bone-material .bone-material-head .sect-desc {
    max-width: 52rem;
    margin: 1.5rem auto 0;
    color: #555;
    font-size: 1.05rem;
    line-height: 1.75;
    letter-spacing: -.03em;
    word-break: keep-all;
}

.sub-im-bone-material .bone-material-visual {
    width: 48rem;
    height: 20rem;
    margin: 3.2rem auto 0;
    border-radius: 1.5rem;
    background: #dadadc;
}

.sub-im-bone-material .bone-material-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-top: 3rem;
}

.sub-im-bone-material .bone-material-list article {
    position: relative;
    min-height: 9.5rem;
    padding: 1.8rem 2rem 1.8rem 5.2rem;
    border-radius: 1rem;
    background: #fff;
}

.sub-im-bone-material .bone-material-list .num {
    position: absolute;
    top: 1.65rem;
    left: 1.7rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.45rem;
    height: 2.45rem;
    border-radius: 50%;
    background: #294589;
    color: #fff;
    font-size: .85rem;
    font-weight: 700;
}

.sub-im-bone-material .bone-material-list h3 {
    color: #111;
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -.04em;
}

.sub-im-bone-material .bone-material-list p {
    margin-top: .6rem;
    color: #666;
    font-size: .84rem;
    line-height: 1.7;
    letter-spacing: -.025em;
    word-break: keep-all;
}

.sub-im-bone-material .bone-note {
    margin-top: 2rem;
    color: #858b96;
    font-size: .75rem;
    line-height: 1.6;
    text-align: center;
}