@charset "UTF-8";
/* =========================================================
   OSA MMA 상세페이지 (0304 코골이·수면무호흡) - 모든 선택자 .mma 범위 한정
   - PC  : PC 시안 기준 (2500px 캔버스 → 1/2 = 1250px)
   - MO  : 모바일 시안 기준 (1206px 캔버스 → 1/3 = 402px), 767px 이하
   ========================================================= */

/* ---------- reset ---------- */
.mma,.mma *,.mma *::before,.mma *::after{box-sizing:border-box}
.mma h1,.mma h2,.mma h3,.mma h4,.mma p,.mma ul,.mma ol,.mma dl,.mma dd,.mma figure{margin:0;padding:0}
.mma ul,.mma ol{list-style:none}
.mma img{display:block;max-width:100%;height:auto;border:0}
.mma em,.mma i{font-style:normal}

.mma{
  --blue:#197ba1;
  --gold:#cbb193;
  --cream:#f8ebd0;
  font-family:"Pretendard",-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  color:#222;
  word-break:keep-all;
  overflow:hidden;
}
.mma section{position:relative}

/* PC / MO 전용 노출 */
.mma .mo{display:none}
.mma br.mo{display:none}

/* 공통 타이틀 */
.mma .eyebrow{font-size:15.5px;font-weight:500;line-height:1.3;color:#454545;text-align:center}
.mma .h2{margin-top:10px;font-size:26.5px;font-weight:700;line-height:38px;color:#000;text-align:center;letter-spacing:-.005em}

/* =========================================================
   01 HERO
   ========================================================= */
.mma .s01{height:655px;background:#deeef4}
.mma .s01 > picture{position:absolute;left:50%;top:0;width:1250px;margin-left:-625px}
.mma .s01-bg{width:1250px;max-width:none;height:655px}
.mma .s01-inner{position:relative;width:1250px;height:100%;margin:0 auto;left:50%;margin-left:-625px}
.mma .s01-txt{position:absolute;left:675px;top:261px;padding-left:24px;border-left:2px solid #9cc0cd}
.mma .s01-sub{font-size:14.3px;font-weight:500;line-height:1.2;color:#454545}
.mma .s01-tit{margin-top:14px;font-size:32.5px;font-weight:700;line-height:42.5px;color:#454545}
.mma .s01-tit em{color:#34829f}
.mma .s01-desc{margin-top:16px;font-size:13px;line-height:19px;color:#454545}

/* HERO 애니메이션 - 기존 서브페이지 #subvisual 과 동일 (css/sub.css)
   js/commonScript.js 가 화면에 보이는 <section> 에 .active 를 붙이면 동작한다.
   - 배경 : 1.1배에서 1배로 14초간 천천히 줄어듦 (#subvisual.active .bg)
   - 문구 : 흐림·투명 상태에서 오른쪽→왼쪽으로 들어옴 (#subvisual.active .maintxt) */
.mma .s01{overflow:hidden}
.mma .s01.active > picture{animation:mma_herobg 14s cubic-bezier(0.25,1,0.5,1) both 0.3s}
@keyframes mma_herobg{
  0%{transform:scale(1.1);transform-origin:50% 50%}
  100%{transform:scale(1);transform-origin:50% 50%}
}
.mma .s01-txt{opacity:0;filter:blur(6px);transform:translateX(6vw);transition:all 1.4s cubic-bezier(0.25,1,0.5,1) 0.5s}
.mma .s01.active .s01-txt{opacity:1;filter:blur(0);transform:translateX(0);transition:all 1.6s cubic-bezier(0.25,1,0.5,1) 0.8s}
/* - 하단 "MACS OMFS" : 위에서 흐림·투명 상태로 내려옴 (#subvisual.active .maintxt2 div)
     배경 이미지에서 글자를 빼고 별도 PNG 로 분리했다 (PSD 01 그룹 "MACS OMFS" 레이어).
     위치·높이는 PSD 기준 비율 (PC 1025~1241 / 1310, 모바일 1172~1311 / 1426) */
.mma .s01-macs{position:absolute;left:50%;top:78.24%;width:1250px;height:16.49%;margin-left:-625px;overflow:hidden;pointer-events:none}
.mma .s01-macs picture{display:block;width:100%;height:100%}
.mma .s01-macs img{width:100%;max-width:none;height:100%;opacity:0;filter:blur(6px);transform:translateY(-100%);transition:all 1.4s cubic-bezier(0.25,1,0.5,1) 0.5s}
.mma .s01.active .s01-macs img{opacity:1;filter:blur(0);transform:translateY(0);transition:all 1.4s cubic-bezier(0.25,1,0.5,1) 1.2s}

/* =========================================================
   02 FEATURES
   ========================================================= */
.mma .s02{padding:84px 0 84px}

.mma .clinic{margin-top:46px;text-align:center}
.mma .clinic .emblem{position:relative;width:130px;height:130px;margin:0 auto}
.mma .clinic .emblem img{width:100%}
.mma .clinic .emblem span{position:absolute;top:0;left:0;width:100%;height:100%;animation:rotate_image 56s linear infinite;transform-origin:50% 50%}
@keyframes rotate_image{100%{transform:rotate(360deg)}}
.mma .clinic p{margin-top:10px;font-size:14.3px;font-weight:600;line-height:20px;color:#1f272f}

.mma .stats{display:flex;justify-content:center;margin-top:38px}
.mma .stats > div{padding:0 32px;border-left:1px solid #eee;text-align:center}
.mma .stats > div:first-child{border-left:0}
.mma .stats dt{font-size:10.4px;line-height:14px;color:#4f4f4f}
.mma .stats dd{margin-top:5px;font-size:18.45px;font-weight:700;line-height:20px;letter-spacing:-.005em;color:#000}

/* =========================================================
   03 양악전진술(MMA)이란?
   ========================================================= */
.mma .s03{display:block;padding:96px 0 106px;background:#eff8fc}
.mma .s03 .inner{display:flex;flex-direction:column;align-items:center}
.mma .s03-fig.pc{width:867px;margin-top:34px;border-radius:20px;overflow:hidden;background:#fff}
.mma .s03-fig.pc img{width:100%}
.mma .s03-desc{margin-top:32px;font-size:15.65px;line-height:30px;color:#222;text-align:center}
.mma .s03-desc strong{font-weight:700;color:#000}

/* =========================================================
   04 수면무호흡증
   ========================================================= */
.mma .s04{padding:90px 0 132px;background:#e7eef0 url(/page_KR0/03_sub/images/0304/pc_bg04.jpg) center top/cover no-repeat}
.mma .s04 .inner{width:867px;margin:0 auto}
.mma .s04 .h2 em{color:#187ca1}

.mma .airway{margin-top:39px;padding-bottom:31.5px;border-radius:20px;overflow:hidden;background:#fff}
.mma .airway img{width:100%}
.mma .airway-tags{position:relative;height:32.5px;margin-top:7.5px}
.mma .tag{display:inline-flex;align-items:center;justify-content:center;height:32.5px;padding:0 19px;border:1.5px solid #5ba2bd;border-radius:999px;
  background:#fff;font-size:15px;line-height:1;color:#454545;white-space:nowrap}
.mma .tag.t-osa{border-color:#f090a1;letter-spacing:-.035em}
.mma .airway-tags .tag{position:absolute;top:0;transform:translateX(-50%)}
.mma .airway-tags .t-normal{left:26.8%}
.mma .airway-tags .t-osa{left:73.5%}

.mma .apnea{position:relative;margin-top:63px;padding-left:103.5px}
.mma .apnea::before{content:"";position:absolute;left:39.5px;top:-5px;width:2px;height:238px;background:#a9c4cd}
.mma .apnea-logo{width:382.5px}
.mma .apnea-q{margin-top:15px;font-size:23px;font-weight:700;line-height:34px;color:var(--blue)}
.mma .apnea-txt{margin-top:32px;font-size:15.25px;line-height:24px;color:#222}
.mma .apnea-txt p + p{margin-top:16px}
.mma .apnea-txt p:first-child + p{margin-top:16px}
.mma .apnea-txt strong{font-weight:700;color:#000}

.mma .symptom{display:flex;align-items:flex-start;margin-top:100px;padding-left:42px}
.mma .symptom picture{flex:none}
.mma .symptom-img{width:284.5px;height:329px;object-fit:cover;border-radius:142.25px 142.25px 0 0}
.mma .symptom-txt{width:423.5px;margin:68.5px 0 0 59.5px;padding-top:42px;border-top:2.5px solid #a5c0c9}
.mma .symptom-txt h3{font-size:23px;font-weight:700;line-height:34px;color:#000}
.mma .symptom-txt p{margin-top:17px;font-size:15.25px;line-height:28.5px;color:#222;letter-spacing:-.005em}
.mma .symptom-txt strong{font-weight:600;color:#000}

.mma .daynight{display:grid;grid-template-columns:repeat(2,420.5px);gap:26px;margin-top:139.5px}
.mma .dn{position:relative;min-height:329.5px;padding:52px 47px 40px;border-radius:20px;background:#fff}
.mma .dn-ico{position:absolute;right:35.5px;top:-48px;width:130px;height:130px;border-radius:50%}
.mma .dn picture{display:contents}
.mma .dn-en{font-size:13.5px;font-weight:700;line-height:20px;letter-spacing:.05em;color:#b1b1b1}
.mma .dn h4{margin-top:13px;font-size:23px;font-weight:700;line-height:34px;color:var(--blue)}
.mma .dn ul{margin-top:12px;font-size:15px;line-height:30px;color:#222}
.mma .dn li::before{content:"· "}

/* =========================================================
   05 방치하면
   ========================================================= */
.mma .s05{padding:104px 0 112px;background:#384d57 url(/page_KR0/03_sub/images/0304/pc_bg05.jpg) center/cover no-repeat;color:#fff;text-align:center}
.mma .s05 .h2{margin:0;color:#fff}
.mma .s05 .h2 em{color:var(--cream)}
.mma .s05-txt{margin-top:37px;font-size:15.25px;line-height:30px}
.mma .s05-txt p + p{margin-top:12.5px}
.mma .risk{display:flex;flex-wrap:wrap;justify-content:center;margin:54px auto -21.5px;max-width:1100px}
.mma .risk li{display:inline-flex;align-items:center;height:39px;margin:0 6.75px 21.5px;padding:0 25.5px;border-radius:999px;
  font-size:13.5px;line-height:1;white-space:nowrap}
.mma .risk li.d{background:#22292c;color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.45)}
.mma .risk li.l{background:var(--cream);color:#000}
.mma .risk li.br{flex-basis:100%;height:0;margin:0;padding:0}
.mma .risk li.mo-br{display:none}
.mma .risk li.pc-br{display:block}

/* =========================================================
   06 이런 분들이
   ========================================================= */
.mma .s06{padding:104px 0 111.5px;background:#f4f4f4}
.mma .s06 .h2{margin:0}
.mma .s06 .h2 em{color:#3d859f}
.mma .who{display:grid;grid-template-columns:repeat(2,464px);column-gap:13.5px;row-gap:24px;justify-content:center;margin-top:36px}
.mma .who li{border-radius:20px;overflow:hidden;background:#fff}
.mma .who img{width:100%}
.mma .who-body{padding:14px 41.5px 24px}
.mma .who .num{display:flex;align-items:center;font-size:13.5px;font-weight:700;line-height:20px;letter-spacing:.05em;color:#a0a0a0}
.mma .who .num::after{content:"";width:301.5px;height:2px;margin-left:8px;background:#e7e7e7}
.mma .who p{margin-top:6px;font-size:15.25px;font-weight:500;line-height:23px;color:#222}

/* =========================================================
   07 장점
   ========================================================= */
.mma .s07{padding:113.5px 0 169px;background:#202830 url(/page_KR0/03_sub/images/0304/pc_bg07.jpg) center/cover no-repeat}
.mma .s07 .eyebrow{color:#fff}
.mma .s07 .h2{color:#fff}
.mma .s07 .h2 em{color:var(--gold)}
.mma .merit{width:655px;margin:36px auto 0}
.mma .merit li{padding:41px 43px 46px;border-radius:22px;background:rgba(255,255,255,.17);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.mma .merit li + li{margin-top:26.5px}
.mma .merit h3{font-size:23px;font-weight:700;line-height:34px;color:#fff}
.mma .merit h3 span{margin-right:7px;letter-spacing:.03em;color:var(--gold)}
.mma .merit p{margin-top:12px;font-size:15.25px;line-height:29px;color:#fff}

/* =========================================================
   08 수술 과정 / 주의 사항
   ========================================================= */
.mma .s08{padding:111px 0 95px;background:#f0f4fb}
.mma .step{display:grid;grid-template-columns:repeat(4,251px);gap:13px;justify-content:center;margin-top:34px}
.mma .step li{position:relative;min-height:469px;padding-bottom:28px;border-radius:20px;overflow:hidden;background:#fff;text-align:center}
.mma .step img{width:100%}
.mma .step-img{position:relative}
.mma .step-num{position:absolute;left:50%;bottom:-21.75px;display:flex;align-items:center;justify-content:center;width:43.5px;height:43.5px;margin-left:-21.75px;
  border-radius:50%;background:#1d2c4b;font-size:19.6px;font-weight:600;line-height:1;color:#fff}
.mma .step h3{margin-top:41px;font-size:18px;font-weight:700;line-height:22.5px}
.mma .step h3.blue{color:#6c78b2}
.mma .step h3.brown{color:#b48f7a}
.mma .step p{margin-top:8px;font-size:15.25px;font-weight:500;line-height:22px;color:#000}

.mma .notice{display:flex;width:1043px;margin:54.5px auto 0;padding:55px 0 0 128px;border-top:2px solid #d8dbe1}
.mma .notice-head{width:276px;flex:none}
.mma .notice .eyebrow{color:#000;font-weight:400;text-align:left}
.mma .notice h2{margin-top:6px;font-size:26.5px;font-weight:700;line-height:34px;color:#000}
.mma .notice ul{margin-top:-4px;font-size:15.5px;line-height:35.5px;color:#000}
.mma .notice li::before{content:"· "}

/* =========================================================
   PC 크기 (768px 이상) - 기존 페이지(0301·0303) 기준
   시안 CSS 는 2500px 캔버스를 1/2 로 코딩되어 기존 페이지보다 약 2/3 크기였다.
   (기존 h2 40px / 본문 23px  ↔  시안 26.5px / 15.25px)
   위 기본값(모바일이 상속)은 그대로 두고, PC 에서만 px 값을 1.5배로 덮어쓴다.
   이 블록은 기본값에서 자동 생성했다. 기본값을 고치면 여기도 같이 고친다.
   ========================================================= */
@media (min-width:768px){
  .mma .eyebrow{font-size:23px}
  .mma .h2{margin-top:15px;font-size:40px;line-height:57px}
  /* HERO 는 기존 서브페이지 #subvisual(css/sub.css)처럼 화면 꽉 차게:
     높이 100vh + 배경 cover(위 기준), 문구는 세로 가운데,
     "MACS OMFS" 는 하단 5% · 1429px 가운데 (#subvisual .maintxt2 와 같은 크기) */
  .mma .s01{height:100vh}
  .mma .s01 > picture{left:0;width:100%;height:100%;margin-left:0}
  .mma .s01-bg{width:100%;height:100%;object-fit:cover;object-position:50% 0}
  .mma .s01-inner{width:100%;left:0;margin-left:0}
  .mma .s01-txt{left:54%;top:50%;padding-left:36px;border-left:3px solid #9cc0cd;transform:translate(6vw,-50%)}
  .mma .s01.active .s01-txt{transform:translate(0,-50%)}
  .mma .s01-macs{top:auto;bottom:5%;width:1429px;height:166px;margin-left:-714.5px}
  .mma .s01-sub{font-size:21.5px}
  .mma .s01-tit{margin-top:21px;font-size:49px;line-height:64px}
  .mma .s01-desc{margin-top:24px;font-size:19.5px;line-height:28.5px}
  .mma .s02{padding:126px 0 126px}
  .mma .clinic{margin-top:69px}
  .mma .clinic .emblem{width:184px;height:184px}  /* 기존 페이지 엠블럼과 동일 */
  .mma .clinic p{margin-top:15px;font-size:21.5px;line-height:30px}
  .mma .stats{margin-top:57px}
  .mma .stats > div{padding:0 48px;border-left:1px solid #eee}
  .mma .stats dt{font-size:15.5px;line-height:21px}
  .mma .stats dd{margin-top:7.5px;font-size:27.5px;line-height:30px}
  .mma .s03{padding:144px 0 159px}
  .mma .s03-fig.pc{width:1300.5px;margin-top:51px;border-radius:30px}
  .mma .s03-desc{margin-top:48px;font-size:23.5px;line-height:45px}
  .mma .s04{padding:135px 0 198px}
  .mma .s04 .inner{width:1300.5px}
  .mma .airway{margin-top:58.5px;padding-bottom:47px;border-radius:30px}
  .mma .airway-tags{height:49px;margin-top:11px}
  .mma .tag{height:49px;padding:0 28.5px;border:1.5px solid #5ba2bd;border-radius:1498.5px;font-size:22.5px}
  .mma .apnea{margin-top:94.5px;padding-left:155px}
  .mma .apnea::before{left:59px;top:-7.5px;width:3px;height:357px}
  .mma .apnea-logo{width:574px}
  .mma .apnea-q{margin-top:22.5px;font-size:34.5px;line-height:51px}
  .mma .apnea-txt{margin-top:48px;font-size:23px;line-height:36px}
  .mma .apnea-txt p + p{margin-top:24px}
  .mma .apnea-txt p:first-child + p{margin-top:24px}
  .mma .symptom{margin-top:150px;padding-left:63px}
  .mma .symptom-img{width:427px;height:493.5px;border-radius:213.5px 213.5px 0 0}
  .mma .symptom-txt{width:635px;margin:103px 0 0 89px;padding-top:63px;border-top:4px solid #a5c0c9}
  .mma .symptom-txt h3{font-size:34.5px;line-height:51px}
  .mma .symptom-txt p{margin-top:25.5px;font-size:23px;line-height:43px}
  .mma .daynight{grid-template-columns:repeat(2,631px);gap:39px;margin-top:209px}
  .mma .dn{min-height:494px;padding:78px 70.5px 60px;border-radius:30px}
  .mma .dn-ico{right:53px;top:-72px;width:195px;height:195px}
  .mma .dn-en{font-size:20px;line-height:30px}
  .mma .dn h4{margin-top:19.5px;font-size:34.5px;line-height:51px}
  .mma .dn ul{margin-top:18px;font-size:22.5px;line-height:45px}
  .mma .s05{padding:156px 0 168px}
  .mma .s05-txt{margin-top:55.5px;font-size:23px;line-height:45px}
  .mma .s05-txt p + p{margin-top:19px}
  .mma .risk{margin:81px auto -32px;max-width:1650px}
  .mma .risk li{height:58.5px;margin:0 10px 32px;padding:0 38px;border-radius:1498.5px;font-size:20px}
  .mma .risk li.d{box-shadow:inset 0 0 0 1px rgba(255,255,255,.45)}
  .mma .s06{padding:156px 0 167px}
  .mma .who{grid-template-columns:repeat(2,696px);column-gap:20px;row-gap:36px;margin-top:54px}
  .mma .who li{border-radius:30px}
  .mma .who-body{padding:21px 62px 36px}
  .mma .who .num{font-size:20px;line-height:30px}
  .mma .who .num::after{width:452px;height:3px;margin-left:12px}
  .mma .who p{margin-top:9px;font-size:23px;line-height:34.5px}
  .mma .s07{padding:170px 0 253.5px}
  .mma .merit{width:982.5px;margin:54px auto 0}
  .mma .merit li{padding:61.5px 64.5px 69px;border-radius:33px;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
  .mma .merit li + li{margin-top:40px}
  .mma .merit h3{font-size:34.5px;line-height:51px}
  .mma .merit h3 span{margin-right:10.5px}
  .mma .merit p{margin-top:18px;font-size:23px;line-height:43.5px}
  .mma .s08{padding:166.5px 0 142.5px}
  .mma .step{grid-template-columns:repeat(4,376.5px);gap:19.5px;margin-top:51px}
  .mma .step li{min-height:703.5px;padding-bottom:42px;border-radius:30px}
  .mma .step-num{bottom:-32.5px;width:65px;height:65px;margin-left:-32.5px;font-size:29.5px}
  .mma .step h3{margin-top:61.5px;font-size:27px;line-height:34px}
  .mma .step p{margin-top:12px;font-size:23px;line-height:33px}
  .mma .notice{width:1564.5px;margin:82px auto 0;padding:82.5px 0 0 192px;border-top:3px solid #d8dbe1}
  .mma .notice-head{width:414px}
  .mma .notice h2{margin-top:9px;font-size:40px;line-height:51px}
  .mma .notice ul{margin-top:-6px;font-size:23px;line-height:53px}

  /* 넓어진 폭을 기존 페이지처럼 화면 90%, 최대 1380px 안으로 */
  .mma .who{grid-template-columns:repeat(2,minmax(0,1fr));width:90%;max-width:1380px;margin-left:auto;margin-right:auto}
  .mma .who .num::after{flex:1;width:auto;margin-right:20%}
  .mma .notice{width:90%;max-width:1380px}
  .mma .s04 .inner,.mma .s03-fig.pc{width:90%;max-width:1300px}
  .mma .daynight{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mma .symptom-txt{flex:1;width:auto;max-width:635px}
  .mma .merit{width:90%;max-width:982px}
  .mma .risk{width:90%;max-width:1380px}
}

/* =========================================================
   PC 해상도 축소 대응 (768~1100)
   ========================================================= */
@media (min-width:768px) and (max-width:1100px){
  .mma .step{grid-template-columns:repeat(4,minmax(0,1fr));padding:0 20px}
  .mma .notice{width:auto;margin-left:20px;margin-right:20px;padding-left:40px}
  .mma .who{grid-template-columns:repeat(2,minmax(0,1fr));padding:0 20px}
  .mma .who .num::after{flex:1;width:auto;margin-right:20%}
  .mma .s04 .inner,.mma .s03-fig.pc{width:auto;max-width:1300px;margin-left:20px;margin-right:20px}
  .mma .s04 .inner{margin-left:auto;margin-right:auto;padding:0 20px}
  .mma .daynight{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mma .symptom{padding-left:0}
  .mma .s01-txt{left:48%}
  .mma .s01-macs{width:90%;height:auto;aspect-ratio:1857/216;margin-left:-45%}
}

/* =========================================================
   MOBILE (모바일 시안 기준 · 402px, 767px 이하)
   ========================================================= */
@media (max-width:767px){
  .mma .pc{display:none}
  .mma br.pc{display:none}
  .mma .mo{display:block}
  .mma br.mo{display:inline}
  .mma span.mo,.mma i.mo{display:inline}

  .mma .eyebrow{font-size:12.7px}
  .mma .h2{margin-top:6px;font-size:26px;line-height:33.7px}
  .mma .h2:first-child{margin-top:0}

  /* 01 */
  .mma .s01{height:auto;background:#deeef4}
  .mma .s01 > picture{position:static;width:100%;margin:0}
  .mma .s01-macs{left:0;top:82.19%;width:100%;height:9.75%;margin:0}
  .mma .s01-bg{width:100%;height:auto}
  .mma .s01-inner{position:absolute;inset:0;width:auto;height:auto;left:0;margin:0}
  .mma .s01-txt{left:46.9%;top:28%;padding:0;border:0}
  .mma .s01-sub{font-size:3.48vw;font-weight:600;letter-spacing:-.01em}
  .mma .s01-tit{margin-top:2.6vw;font-size:4.88vw;line-height:6.38vw}
  .mma .s01-desc{margin-top:2.4vw;font-size:3.23vw;line-height:4.8vw;letter-spacing:-.015em}
  /* HERO 애니메이션 (모바일) - 기존 서브페이지 모바일(css/sub800.css #subvisual .maintxt)과 동일:
     문구가 왼쪽에서 오른쪽으로 화면 폭 22% 만큼 이동하며 나타난다 (PC 는 오른쪽→왼쪽).
     배경 축소 애니메이션은 PC 와 같은 규칙을 그대로 쓴다. */
  .mma .s01-txt{transform:translateX(-22vw)}

  /* 02 */
  .mma .s02{padding:60px 0 67px}
  .mma .clinic{margin-top:50px}
  .mma .clinic .emblem{width:122px;height:122px}
  .mma .clinic p{margin-top:12px;font-size:22px;line-height:30px}
  .mma .stats{flex-wrap:wrap;width:90.2%;margin:30px auto 0;row-gap:19.7px}
  .mma .stats > div{width:33.333%;padding:0;border-left:0}
  .mma .stats > div:nth-child(2),.mma .stats > div:nth-child(3),.mma .stats > div:nth-child(5){border-left:1.7px solid #e6e6e6}
  .mma .stats dt{font-size:11px;line-height:14px}
  .mma .stats dd{margin-top:4px;font-size:13px;line-height:14px;letter-spacing:0}

  /* 03 */
  .mma .s03{padding:69px 0 70px}
  .mma .s03 .eyebrow{display:inline-flex;align-items:center;justify-content:center;height:34.7px;padding:0 21px;border-radius:999px;background:#d9e5ea;
    font-size:16px;font-weight:600;color:#454545}
  .mma .s03 .h2{margin-top:12px}
  .mma .s03-desc{order:3;margin-top:12px;font-size:13.8px;line-height:21px;letter-spacing:-.01em;color:#414546}
  .mma .s03-desc strong{color:#414546}
  .mma .s03-fig.mo{order:4;position:relative;width:76.2%;margin-top:24px}
  .mma .s03-fig.mo img{width:100%;border-radius:13px}
  .mma .s03-fig.mo img + .s03-arrow + img{margin-top:14.3px}
  .mma .s03-arrow{position:absolute;left:50%;top:50%;width:28.7px;height:28.7px;margin:-14.35px 0 0 -14.35px;border-radius:50%;background:#fff;z-index:1;
    box-shadow:0 1px 4px rgba(0,0,0,.06)}
  /* PSD(모바일 수정본)와 동일: Pretendard SemiBold ">" 를 90도 돌려 "v" 모양 */
  .mma .s03-arrow::before{content:">";position:absolute;left:50%;top:50%;font-size:16.7px;font-weight:600;line-height:1;color:#7e7e7e;
    transform:translate(-50%,-50%) rotate(90deg)}

  /* 04 */
  .mma .s04{padding:64px 0 71.3px;background:#e7eef0 url(/page_KR0/03_sub/images/0304/mo_bg04.jpg) center top/cover no-repeat}
  .mma .s04 .inner{width:auto}
  .mma .airway-mo{width:76.2%;margin:22px auto 0}
  .mma .airway-mo figure{padding-bottom:12.7px;border-radius:13px;overflow:hidden;background:#fff;text-align:center}
  .mma .airway-mo figure + figure{margin-top:13.7px}
  .mma .airway-mo img{width:100%}
  .mma .airway-mo .tag{height:23.7px;margin-top:11.3px;padding:0 13px;border-width:1px;font-size:12px;letter-spacing:-.035em}
  .mma .airway-mo .t-normal{color:#6b6b6b}
  .mma .airway-mo .t-osa{color:#000}

  .mma .apnea{margin-top:43px;padding:0 20px 0 10.3%}
  .mma .apnea::before{left:5.15%;top:-1px;height:196.7px;width:1.7px;background:#a1bfc8}
  .mma .apnea-logo{width:185.3px}
  .mma .apnea-q{margin-top:15px;font-size:22.7px;line-height:31px}
  .mma .apnea-txt{margin-top:8px;font-size:13.8px;line-height:21px;letter-spacing:-.02em;color:#414546}
  .mma .apnea-txt p + p,.mma .apnea-txt p:first-child + p{margin-top:13.3px}

  .mma .symptom{display:block;margin-top:45px;padding:0}
  .mma .symptom-img{width:76.2%;height:auto;aspect-ratio:306.3/336;margin:0 auto;border-radius:50% 50% 0 0 / 45.5% 45.5% 0 0}
  .mma .symptom-txt{width:auto;margin:30px 0 0;padding:0 15px 0 10%;border:0}
  .mma .symptom-txt h3{font-size:22.7px;line-height:31px;letter-spacing:-.02em;color:#1b1b1b}
  .mma .symptom-txt p{margin-top:10px;font-size:13.8px;line-height:21.3px;letter-spacing:-.02em;color:#414546}
  .mma .symptom-txt strong{color:#414546}

  .mma .daynight{display:block;width:76.2%;margin:63px auto 0}
  .mma .dn{min-height:219.7px;padding:29px 20px 19px 45.6px;border-radius:13px}
  .mma .dn + .dn{margin-top:32px}
  .mma .dn-ico{right:32.7px;top:-17px;width:86.7px;height:86.7px}
  .mma .dn-en{font-size:11.3px;line-height:16px}
  .mma .dn h4{margin-top:4px;font-size:18px;line-height:24px}
  .mma .dn ul{margin-top:8px;font-size:13.8px;font-weight:600;line-height:22.7px;color:#414546}

  /* 05 */
  .mma .s05{padding:64px 0 70.7px;background:#384d57 url(/page_KR0/03_sub/images/0304/mo_bg05.jpg) center/cover no-repeat;text-align:left}
  .mma .s05 .inner{padding:0 10.5%}
  .mma .s05 .h2{font-size:26px;line-height:33.7px;letter-spacing:-.02em;text-align:left}
  .mma .s05-txt{margin-top:12px;font-size:13.8px;line-height:21px;letter-spacing:-.02em}
  .mma .s05-txt p + p{margin-top:10.7px}
  .mma .risk{width:calc(100vw - 40px);max-width:none;margin:32px 0 -14.7px 50%;transform:translateX(-50%)}
  .mma .risk li{order:var(--o);height:30px;margin:0 2px 14.7px;padding:0 15.3px;font-size:12px;letter-spacing:-.035em}
  .mma .risk li.pc-br{display:none}
  .mma .risk li.mo-br{display:block}

  /* 06 */
  .mma .s06{padding:65px 0 70px}
  .mma .who{display:block;width:76.2%;margin:22px auto 0}
  .mma .who li{border-radius:13px}
  .mma .who li + li{margin-top:16.3px}
  .mma .who-body{padding:8px 23px 9px}
  .mma .who .num{font-size:11.3px;line-height:16px}
  .mma .who .num::after{flex:1;width:auto;height:1.7px;margin:0 21% 0 6px}
  .mma .who p{margin-top:3px;font-size:13.8px;font-weight:600;line-height:17.7px;color:#414546}

  /* 07 */
  .mma .s07{padding:75px 0 70.7px;background:#202830 url(/page_KR0/03_sub/images/0304/mo_bg07.jpg) center/cover no-repeat}
  .mma .s07 .eyebrow{color:#a7a7a7}
  .mma .s07 .h2{margin-top:8px}
  .mma .merit{width:76.2%;margin-top:25px}
  .mma .merit li{padding:18px 15px 18px 23.7px;border-radius:13px}
  .mma .merit li + li{margin-top:16.7px}
  .mma .merit h3{font-size:18px;line-height:23px}
  .mma .merit h3 span{margin-right:5px}
  .mma .merit p{margin-top:7.5px;font-size:12px;line-height:17.7px;color:#e5e5e5}

  /* 08 */
  .mma .s08{padding:72px 0 72px}
  .mma .s08 .h2{margin-top:6px}
  .mma .step{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:14.3px;row-gap:13px;width:90.2%;margin:18px auto 0;padding:0}
  .mma .step li{min-height:297.7px;padding-bottom:16px;border-radius:0 0 13px 13px}
  .mma .step img{aspect-ratio:523/494;object-fit:cover}
  .mma .step-num{bottom:-20.35px;width:40.7px;height:40.7px;margin-left:-20.35px;font-size:15.9px}
  .mma .step h3{margin-top:33px;font-size:18px;line-height:22px}
  .mma .step h3.brown{color:#b58f79}
  .mma .step p{margin-top:6px;font-size:13.8px;line-height:18.3px;color:#414546}

  .mma .notice{display:block;width:auto;margin:54px 0 0;padding:0 7px 0 5.2%;border:0}
  .mma .notice-head{width:auto}
  .mma .notice .eyebrow{font-size:18px;font-weight:500;color:#454545}
  .mma .notice h2{margin-top:4px;font-size:26px;line-height:34px}
  .mma .notice ul{margin-top:14px;font-size:15px;line-height:25px;color:#454545}
}