/* ==========================================================================
   membership/Intro.jsp (PC) - 2026 디자인 개편
   ========================================================================== */

.membership.intro .contents.contArea {width: 1345px;}
.mi26 {padding-top: 150px;}

/* ---------- 히어로 ---------- */
.mi26-hero-area {width: 100%; margin-top: 30px; padding: 68px 0 0 0; background: #FEFAFA;}
.mi26-hero {max-width: 1360px; margin: 0 auto; background: url(/assets/spmt/images/membership2026/hero_product.png) no-repeat right center; background-size: 647px;}
.mi26-heroText {max-width:702px; padding: 97.5px 0;}
.mi26-heroTitle {margin: 50px 0; font-size: 48px; font-weight: 800; line-height: 1.15; color: #0B0B0B; text-align: center;}
.mi26-heroLead {margin: 0 0 16px 0; font-size: 24px; font-weight: 400; line-height: 34px; color: #0B0B0B;}
.mi26-heroStat {display: flex; align-items: center; margin: 0 0 8px 0; font-size: 22px; font-weight: 700; line-height: 64px; color: #0B0B0B;}
.mi26-heroStat strong {margin-right:10px; font-size: 48px; font-weight: 700; line-height: 64px; color: #0B0B0B;}
.mi26-heroStat strong em {font-size: inherit; font-weight: inherit; line-height: 64px; color: #FF1313;}
.mi26-heroStatRow {position: relative;}
.mi26-heroSub {display: flex; align-items: center; justify-content: space-between; margin: 0 0 36px 0; font-size: 20px; font-weight: 400; line-height: 34px; color: #444;}
.mi26-heroSub strong {font-weight: 700; color: #FF1313;}
.mi26-heroBadge {position: absolute; top: -100px; right: 0; display: flex; flex: 0 0 auto; flex-direction: column; justify-content: center; width: 156px; height: 156px; border-radius: 50%; line-height: 1.3; color: #fff; background: #E0002A;}
.mi26-heroBadge:after {position: absolute; left: 21px; bottom: 2px; content:''; display: block; width:24px; height: 15px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='15' viewBox='0 0 24 15' fill='none'%3E%3Cpath d='M0 14.1234C3.90508 14.1234 4.5 3 8.13559 0L24 5.24583C22.0475 12.6707 5.69491 16.9481 0 14.1234Z' fill='%23E0002A'/%3E%3C/svg%3E");}
.mi26-heroBadge span {padding-left: 38px; font-size: 13px; font-weight: 400;}
.mi26-heroBadge strong {font-size: 28px; font-weight: 800; text-align: center;}
.mi26-heroStatRow {display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px;}
.mi26-heroFee {display: flex; flex-direction: column; gap: 4px; margin-bottom: 30px;}
.mi26-heroFee span {font-size: 20px; font-weight: 400; line-height: 34px; color: #0B0B0B;}
.mi26-heroFee strong {font-size: 36px; font-weight: 800; line-height: 34px; color: #0B0B0B;}
.mi26-heroBox {margin-bottom: 30px; padding: 20px 12px; border-radius: 16px; background: #fff;}
.mi26-heroBox ul {display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none;}
.mi26-heroBox li {display: flex; align-items: center; justify-content: space-between; gap: 20px; font-size: 20px; font-weight: 400; color: #0B0B0B;}
.mi26-heroBox li span.mi26-heroBox-subject {position: relative; display: flex; align-items: center;}
.mi26-heroBox li span.mi26-heroBox-subject:before {content:''; display: block; width: 4px; height: 4px; margin: 0 12px; border-radius: 50%; background-color: #0B0B0B;}
.mi26-heroBox li em {padding-left: 8px; font-size: inherit; font-weight: inherit; line-height: inherit; color: #FF1313;}
.mi26-heroBox li strong {font-weight: 700; color: #0B0B0B; white-space: nowrap;}
.mi26-heroNote {display: flex; align-items: center; gap: 6px; font-size: inherit; font-weight: inherit; line-height: inherit; color: #666;}
.mi26-heroNote sup {position: relative; top: 5px;}
.mi26-heroBtns {margin: 0;}
.mi26-heroImg {flex: 0 0 auto;}
.mi26-heroImg img {display: block; max-width: 420px; width: 100%; height: auto; border-radius: 20px;}

/* ---------- 섹션 공통 ---------- */
.mi26-sectionTitle {margin: 0 0 60px; font-size: 40px; font-weight: 800; line-height: 46px; color: #0B0B0B;}

/* ---------- 서비스 혜택 목록 ---------- */
.mi26-benefits {margin-bottom: 60px;}
.mi26-benefitList {margin: 0; padding: 0; list-style: none;}
.mi26-benefitItem {display: flex; align-items: center; justify-content: space-between; gap: 50px; padding: 40px 0; border-bottom: 1px solid #EEEEEE;}
.mi26-benefitItem:first-child {padding-top: 0;}
.mi26-benefitInfo {display: flex; gap: 28px; flex: 1 1 auto; min-width: 0;}
.mi26-icon {flex: 0 0 auto; width: 174px; height: 174px;}
.mi26-icon img {display: block; width: 100%; height: 100%; object-fit: contain;}
.mi26-benefitText {flex: 1 1 auto; min-width: 0;}
.mi26-benefitTitle {margin: 0 0 8px; font-size: 30px; font-weight: 700; line-height: 40px; color: #333;}
.mi26-benefitTitle em {position: relative; bottom: -4px; margin-bottom: -2px; font-size: 16px; font-weight: 400;  color: #444;}
.mi26-benefitSubBar {margin: 0 0 18px; color: #0B0B0B; font-size: 16px; font-weight: 400; line-height: 30px;}
.mi26-benefitPrice {margin: 0 0 10px; font-size: 30px; font-weight: 700; line-height: 46px; color: #333;}
.mi26-benefitPrice em {position: relative; bottom: -2px; font-size: 16px; font-weight: 400;  color: #444;}
.mi26-benefitDesc {margin: 0 0 4px; font-size: 18px; line-height: 26px; color: #0B0B0B;}
.mi26-benefitCycle {margin: 0; font-size: 18px; color: #666666;}
.mi26-benefitSub {margin: 0 0 5px; color: #0B0B0B; font-size: 16px; font-weight: 400; line-height: 30px;}
.mi26-benefitSub li {margin-bottom: 5px; font-size: 16px; font-weight: 400; line-height: 130%; color: #333;}
.mi26-benefitSub li:last-child {margin-bottom: 0;}
.mi26-benefitSub strong {display: inline-block; width: 50px; font-size: 16px; font-weight: 700; line-height: 30px; color: #0B0B0B;}
.mi26-benefitSub li.mi26-benefitSubCont {padding-left: 50px;}
.mi26-benefitMemo {margin: 0 0 0; font-size: 14px; line-height: 130%; color: #666;}
.mi26-benefitHead {display: flex; align-items: flex-start; justify-content: flex-start; gap: 0; margin-bottom: 24px;}
.mi26-benefitHead.al-c {align-items: center;}
.mi26-benefitMain {flex: 0 0 252px;}
.mi26-benefitHead > .mi26-benefitSubGroup {flex: 0 1 295px; min-width: 0;}
.mi26-benefitMain .mi26-benefitTitle,
.mi26-benefitMain .mi26-benefitPrice {margin-bottom: 0;}
.mi26-benefitMain .mi26-benefitPrice {margin-top: 8px;}
.mi26-benefitHead > .mi26-benefitSub {flex: 1 1 auto; min-width: 0; margin: 0;}

/* 가격 비교 카드 */
.mi26-priceCard {flex: 0 0 496px;}
.mi26-priceTag {margin: 0 0 6px; font-size: 16px; line-height: 130%; color: #666666; text-align: right;}
.mi26-priceTable {border: 1px solid #8D8D8D; overflow: hidden; background: #fff;}
.mi26-priceHead, .mi26-priceRow {display: grid; grid-template-columns: 1fr repeat(3, 1fr); gap: 20px; padding: 9px 12px; text-align: center;}
.mi26-priceRow {border-bottom: 1px solid #DDDDDD;}
.mi26-priceHead {font-size: 15px; font-weight: 800; line-height: 24px; color: #0B0B0B; background: #F8F8F8;}
.mi26-priceRow {font-size: 15px; font-weight: 400; line-height: 24px; color: #000;}
.mi26-priceRow span:first-child {font-size: 15px; font-weight: 700; color: #0B0B0B;}
.mi26-priceRow strong {font-weight: 400;}
.mi26-priceRow.mi26-priceFinal {border-bottom: 0; color: #E0002A;}
.mi26-priceRow.mi26-priceFinal span:first-child {font-weight: 700; color: #E0002A;}
.mi26-priceRow.mi26-priceFinal strong {font-weight: 700;}
.mi26-priceNote {margin: 10px 0 0; padding-left: 1em; font-size: 16px; line-height: 140%; color: #0B0B0B; text-indent: -1em;}
.mi26-priceFree {padding: 20px 0; font-size: 15px; color: #666666; text-align: center;}
.mi26-disclaimer {margin-top: 60px; padding:30px 53px; border-radius: 5px; background: #F8F8F8;}
.mi26-disclaimer > li {font-size: 16px; line-height: 32px; color: #0B0B0B;}
.mi26-disclaimer > li:not(:first-child) {margin-top: 10px;}
.mi26-disclaimer > li:before {background: #0B0B0B !important;}
.mi26-disclaimerSub {margin-top: 2px; padding-left: 13px;}
.mi26-disclaimerSub > li {padding-left: 14px !important; font-size: 16px; line-height: 32px; color: #0B0B0B;}
.mi26-disclaimerSub > li:before {content: "\2013" !important; color: #0B0B0B;}
.mi26-disclaimerSub > li:not(:first-child) {margin-top: 2px;}

/* ---------- 인천공항 할인 (신규 디자인, 국산차 페이지 전용) ---------- */
.mi26-airport {margin: 140px 0;}
.mi26-airportHead {display: flex; align-items: center; gap: 35px; margin-bottom: 54px;}
.mi26-airportTitle {display: flex; align-items: center; gap: 13px; margin: 0; font-size: 34px; font-weight: 800; line-height: 46px; color: #0B0B0B;}
.mi26-airportTitle .mi26-divider {width: 1px; height: 24px; background: #999;}
.mi26-airportTitle img {height: 28px; width: auto;}
.mi26-airportTitle em {font-size: 20px; font-weight: 400;  line-height: 30px; color: #333333;}
.mi26-airportBtn {flex: 0 0 auto; height: 46px; padding: 0 20px; border-radius: 300px; font-size: 20px; font-weight: 400; line-height: 23px; color: #fff; background: #333333;}
.mi26-airportList {display: flex; align-items: stretch; justify-content: center; gap: 100px; margin: 0; padding: 0; list-style: none;}
.mi26-airportList > li {flex: 0 0 326px; padding: 16px 12px 35px; border: 1px solid #EFEFEF; border-radius: 8px; text-align: center;}
.mi26-airportList figure {margin: 0 0 30px; background: #fff;}
.mi26-airportList > li:nth-child(2) img {mix-blend-mode: difference;}
.mi26-airportList figure img {display: block; max-width: 100%; height: 180px; margin: 0 auto; object-fit: contain;}
.mi26-airportName {display: flex; align-items: center; justify-content: center; margin: 0 0 4px; font-size: 28px; font-weight: 700; line-height: 40px; color: #333333; word-break: keep-all;}
.mi26-airportName em {font-size: 20px; font-weight: 400;  color: #333333;}
.mi26-airportDiscount {margin: 0 0 18px; font-size: 28px; font-weight: 700; line-height: 40px; color: #333333;}
.mi26-airportDiscount .point01 {color: #E0002A;}
.mi26-airportNote {margin: 0; font-size: 18px; line-height: 30px; color: #333333;}

/* ---------- 팝업:정비할인혜택 ---------- */
.popDiscount table.info tr > td:nth-last-child(3) {font-weight: 700; background: #fff;}
.popDiscount table.info tr > td.bg-skyblue {font-weight: 700; background: #F1F6FB !important;}
.popDiscount table.info.st02.em02 th,
.popDiscount table.info.st02.em02 td {padding: 5px 12px;}
.popDiscount ul.note.st06 {margin-top: 0;}
.popDiscount ul.note.st06 li:not(:first-child) {margin-top: 0;}