/****************************************** benefit.css special-offer + 메인(#benefit) 공통 1px = 1rem (html font-size: 1px) ******************************************/ /* 페이지 공통 */ html:has(.benefit-page) #navigation header#header:not(.scrolled) {background: transparent; border-bottom-color: transparent;} main.benefit-page {margin-top: -80rem;} /* benefit-page: common.css 방사형 배경 유지 (단순 linear 덮어쓰지 않음) */ main.benefit-page .bzone-wrap {padding: 180rem 0 140rem;} .main-section2.bzone-wrap {padding: 140rem 0; background: linear-gradient(156deg, #FEDEFF 4.69%, #C9EFFF 95.31%);} main.benefit-page .bzone-wrap > section, main .main-section2.bzone-wrap > section.sec {padding: 0 !important;} main.benefit-page .sec.bzone, .main-section2.bzone-wrap .sec.bzone, main.benefit-page .ev-hero {position: relative; z-index: 1;} /* 메인 페이지 혜택 인트로 (Figma 공통 타이틀) */ .main-section2.bzone-wrap .so-benefit-intro {text-align: center;} .main-section2.bzone-wrap .bzone-intro h2 {font-size: 40rem; font-weight: 700; letter-spacing: -.8rem; line-height: 1.3; color: var(--ink); margin: 0 0 8rem;} .main-section2.bzone-wrap .bzone-intro p {font-size: 22rem; font-weight: 400; color: #333; letter-spacing: -.22rem; line-height: 1.5; margin: 0;} .main-section2.bzone-wrap .bzone-intro p b {display: block; color: #fc1d01; font-weight: 500;} main.benefit-page .sec.bzone + .sec.bzone, .main-section2.bzone-wrap .sec.bzone + .sec.bzone{margin-top: 84rem;} main.benefit-page .panel, .main-section2.bzone-wrap .panel{border-radius: 40rem; padding: 84rem 82rem 60rem; box-shadow: 0 4rem 10rem rgba(0, 0, 0, .12);} main.benefit-page #prize .panel, .main-section2.bzone-wrap #prize .panel{padding: 60rem 106rem 80rem; border-radius: 24rem;} main.benefit-page .panel-sub, .main-section2.bzone-wrap .panel-sub{font-size: 26rem; font-weight: 600; letter-spacing: -.26rem; line-height: 1.5; margin-bottom: 40rem;} main.benefit-page .ptab-mo, .main-section2.bzone-wrap .ptab-mo{display: none;} main.benefit-page .br-mo, .main-section2.bzone-wrap .br-mo{display: none;} /* 배경 플로팅 오브젝트 */ main.benefit-page .bzone-floats .bf {width: auto; top: auto; left: auto; right: auto;} /* 선물영역 (ev-hero) */ main.benefit-page .ev-hero {position: relative; background: transparent; text-align: center; overflow: visible; padding: 0 0 80rem; margin-bottom: 100rem;} main.benefit-page .ev-hero-in {position: relative; max-width: 1248rem; margin: 0 auto;} main.benefit-page .ev-hero h1 {font-size: 40rem; font-weight: 700; letter-spacing: -.8rem; line-height: 1.3; color: var(--ink); margin: 0 0 12rem;} main.benefit-page .ev-lead {font-size: 20rem; font-weight: 400; color: var(--ink); letter-spacing: -.2rem; line-height: 1.5; margin: 0 0 24rem;} main.benefit-page .ev-lead b {color: #fc1d01; font-weight: 400;} main.benefit-page .ev-hero-banner {width: 900rem; max-width: 100%; margin: 0 auto 24rem; display: block;} main.benefit-page .ev-hero-banner * {width: 100%; height: auto; } main.benefit-page .ev-tags {display: flex; flex-wrap: wrap; justify-content: center; gap: 24rem;} main.benefit-page .ev-tag {background: #fff; color: #000; font-weight: 500; font-size: 22rem; letter-spacing: -.22rem; line-height: 1.5; padding: 12rem 24rem; border-radius: var(--rfull); box-shadow: 0 4rem 10rem rgba(0, 0, 0, .12);} /* free4 쿠폰 */ main.benefit-page #free4, .main-section2.bzone-wrap #free4{padding-top: 0;} main.benefit-page .so-coupon-grid, .main-section2.bzone-wrap .so-coupon-grid{display: grid; grid-template-columns: repeat(2, 1fr); gap: 24rem; max-width: 1036rem; margin: 0 auto;} main.benefit-page .so-coupon, .main-section2.bzone-wrap .so-coupon{position: relative; display: flex; align-items: flex-end; justify-content: space-between; gap: 24rem; padding: 40rem; border-radius: 24rem; box-sizing: border-box; min-height: 230rem;} main.benefit-page .so-coupon--cyan, .main-section2.bzone-wrap .so-coupon--cyan{background: #eafaff;} main.benefit-page .so-coupon--lime, .main-section2.bzone-wrap .so-coupon--lime{background: #f8faec;} main.benefit-page .so-coupon__badge, .main-section2.bzone-wrap .so-coupon__badge{position: absolute; top: 16rem; right: 16rem; background: #ff6d12; color: #fff; font-size: 16rem; font-weight: 600; line-height: 1; padding: 6rem 14rem; border-radius: var(--rfull);} main.benefit-page .so-coupon__text, .main-section2.bzone-wrap .so-coupon__text{flex: 1 1 auto; min-width: 0; text-align: left;} main.benefit-page .so-coupon__free, .main-section2.bzone-wrap .so-coupon__free{display: block; font-size: 18rem; font-weight: 700; color: #006bc8; letter-spacing: -.18rem; line-height: 1.5; margin-bottom: 5rem;} main.benefit-page .so-coupon__tit, .main-section2.bzone-wrap .so-coupon__tit{display: block; font-size: 28rem; font-weight: 600; color: #000; letter-spacing: -.28rem; line-height: 1.3;} main.benefit-page .so-ticket, .main-section2.bzone-wrap .so-ticket{flex: 0 0 141rem; width: 141rem; display: flex; flex-direction: column; align-items: stretch; position: relative;} main.benefit-page .so-ticket__body, .main-section2.bzone-wrap .so-ticket__body{display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6rem; height: 100rem; padding: 24rem 8rem 16rem; background: #fff; border-radius: 8rem; box-sizing: border-box;} main.benefit-page .so-ticket__logo, .main-section2.bzone-wrap .so-ticket__logo{display: block; object-fit: contain; width: auto; height: 46rem;} main.benefit-page .so-ticket__label, .main-section2.bzone-wrap .so-ticket__label{margin: 0; width: 100%; font-size: 18rem; font-weight: 400; color: #000; letter-spacing: -.36rem; line-height: 1.3; text-align: center;} main.benefit-page .so-ticket__dash, .main-section2.bzone-wrap .so-ticket__dash{display: block; height: 1rem; margin: 0 16rem; position: relative; z-index: 1; flex: 0 0 auto; background: repeating-linear-gradient(90deg, #c5c5c5 0 4rem, transparent 4rem 8rem);} main.benefit-page .so-ticket__stub, .main-section2.bzone-wrap .so-ticket__stub{display: flex; align-items: center; justify-content: center; height: 30rem; padding: 0 8rem; border-radius: 8rem; font-size: 10rem; font-weight: 400; color: #f5f5f7; letter-spacing: 3rem; line-height: 1.5; text-align: center; box-sizing: border-box;} main.benefit-page .so-ticket--blue .so-ticket__stub, .main-section2.bzone-wrap .so-ticket--blue .so-ticket__stub{background: #0086fa;} main.benefit-page .so-ticket--green .so-ticket__stub, .main-section2.bzone-wrap .so-ticket--green .so-ticket__stub{background: #18a149;} main.benefit-page .so-cta-wrap, .main-section2.bzone-wrap .so-cta-wrap{text-align: center; margin-top: 40rem;} main.benefit-page .so-cta, .main-section2.bzone-wrap .so-cta{display: inline-flex; align-items: center; justify-content: center; gap: 4rem; height: 48rem; padding: 0 24rem; background: #000; color: #fff; font-size: 16rem; font-weight: 700; letter-spacing: -.16rem; line-height: 1.5; border-radius: 8rem; box-sizing: border-box; transition: all 0.2s ease;} main.benefit-page .so-cta:hover, .main-section2.bzone-wrap .so-cta:hover{background-color: #333;} /* winners */ main.benefit-page #winners .panel-sub {display: flex; flex-direction: column; gap: 0; align-items: center;} main.benefit-page .so-winners-tit {display: block; font-size: 26rem; font-weight: 600; letter-spacing: -.26rem; line-height: 1.5;} main.benefit-page .so-winners-sub {display: block; font-size: 26rem; font-weight: 400; letter-spacing: -.26rem; line-height: 1.5;} main.benefit-page #so-winners-swiper {overflow: visible; margin: 0 auto; padding: 0; max-width: 930rem;} /* PC: Swiper 미사용 — grid. transform !important 금지(Swiper wrapper translate 깨짐) */ main.benefit-page #so-winners-swiper:not(.swiper-initialized) .so-winners {display: flex; gap: 24rem; margin: 0 auto;} main.benefit-page #so-winners-swiper:not(.swiper-initialized) .winner-photo {aspect-ratio: 294/389; margin: 0; max-width: calc(100%/3 - 16rem);} main.benefit-page .so-winner-card, .main-section2.bzone-wrap .so-winner-card{display: block; width: 100%; height: 100%; padding: 0; border: 0; background: #f0f0f0; cursor: pointer; font: inherit; color: inherit; text-align: left; border-radius: 12rem; overflow: hidden;} main.benefit-page .so-winner-card img, .main-section2.bzone-wrap .so-winner-card img{width: 100%; height: 100% !important; object-fit: cover; object-position: center; display: block; border-radius: 12rem;} /* Instagram 팝업 (popup.css 이식) */ body.noScroll {overflow: hidden;} .el-hide {position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: polygon(0 0, 0 0, 0 0);} .modal-popup {position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999999; visibility: hidden; opacity: 0; transition: visibility .3s ease, opacity .3s ease; touch-action: none; pointer-events: none;} .modal-popup .inner {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 754rem; max-height: 703rem; height: calc(100dvh - 100rem); z-index: 2; max-width: calc(100% - 32rem); padding: 40rem; background-color: #fff; border-radius: 16rem; isolation: isolate; display: flex; flex-direction: column; box-sizing: border-box;} .modal-popup .inner .btn-close {background-image: url("https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/renewal/common/popup-closeBtn-32.svg"); background-size: contain; background-repeat: no-repeat; background-position: center; width: 32rem; height: 32rem; position: absolute; top: 40rem; right: 40rem; border: 0; padding: 0; cursor: pointer; background-color: transparent;} .modal-popup .dim {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, .8); cursor: pointer;} .modal-popup[data-modal-name=instagram] {visibility: visible; opacity: 1; touch-action: auto; pointer-events: auto;} .modal-popup[data-modal-name=instagram] .inner {width: 612rem; padding: 32rem; max-height: 816rem;} .modal-popup[data-modal-name=instagram] .inner .btn-close {top: -52rem; right: 0; width: 40rem; height: 40rem; background-image: url("https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/renewal/common/popup-closeBtn-white-40.svg");} .modal-popup[data-modal-name=instagram] .inner .instagram-media {min-width: 100% !important;} .modal-popup[data-modal-name=instagram] .inner .scrollWrap {position: relative; overflow: hidden; flex: 1 1 auto;} .modal-popup[data-modal-name=instagram] .inner .scrollWrap .scroll {overflow-y: auto; max-height: 100%; padding-right: 4rem; position: relative;} .modal-popup[data-modal-name=instagram] .inner .scrollWrap .scroll-gradient {position: absolute; bottom: 0; left: 0; width: 100%; height: 75rem; background: linear-gradient(to top, #fff, transparent); touch-action: none; pointer-events: none;} .modal-popup[data-modal-name=instagram] .inner .scrollWrap.scroll-end .scroll-gradient {display: none !important;} /* prize 상담·9대 */ main.benefit-page #prize, .main-section2.bzone-wrap #prize{padding-top: 0;} main.benefit-page .so-prize-banner, .main-section2.bzone-wrap .so-prize-banner{width: 900rem; max-width: 100%; margin: 0 auto 40rem; display: block;} main.benefit-page .so-prize-banner img, .main-section2.bzone-wrap .so-prize-banner img{width: 100%; height: auto;} main.benefit-page .so-prize-banner__mo, .main-section2.bzone-wrap .so-prize-banner__mo{display: none;} main.benefit-page .so-div, .main-section2.bzone-wrap .so-div{display: flex; align-items: center; justify-content: center; gap: 24rem; width: 100%; margin: 0 0 24rem;} main.benefit-page .so-div__line, .main-section2.bzone-wrap .so-div__line{flex: 1 1 auto; height: 0; box-shadow: 0 0 0 1px #e4e8f1; min-width: 0;} main.benefit-page .so-div--consult .so-div__label, .main-section2.bzone-wrap .so-div--consult .so-div__label{flex: 0 0 auto; font-size: 20rem; font-weight: 500; color: #f90d58; letter-spacing: -.2rem; line-height: 1.5; white-space: nowrap;} main.benefit-page .so-div--perk .so-div__label, .main-section2.bzone-wrap .so-div--perk .so-div__label{flex: 0 0 auto; font-size: 20rem; font-weight: 500; color: #610bf6; letter-spacing: -.2rem; line-height: 1.5; white-space: nowrap;} main.benefit-page .so-div--perk .so-div__line, .main-section2.bzone-wrap .so-div--perk .so-div__line{box-shadow: 0 0 0 1px #eae4f3;} main.benefit-page .so-consult-grid, .main-section2.bzone-wrap .so-consult-grid{display: grid; grid-template-columns: repeat(3, 1fr); gap: 24rem; margin: 0 0 40rem;} main.benefit-page .so-consult, .main-section2.bzone-wrap .so-consult{background: #fff8f8; border-radius: 12rem; padding: 24rem 32rem; box-shadow: 0 0 0 1px #f5e5e5; box-sizing: border-box; text-align: left;} main.benefit-page .so-consult__tit, .main-section2.bzone-wrap .so-consult__tit{display: block; font-size: 24rem; font-weight: 700; letter-spacing: -.24rem; line-height: 1.5; margin-bottom: 4rem; background: linear-gradient(90deg, #f90d58, #ff5039); -webkit-background-clip: text; background-clip: text; color: transparent;} main.benefit-page .so-consult__desc, .main-section2.bzone-wrap .so-consult__desc{font-size: 14rem; font-weight: 400; color: #666; letter-spacing: -.14rem; line-height: 1.5;} main.benefit-page .so-perk-grid, .main-section2.bzone-wrap .so-perk-grid{display: grid; grid-template-columns: repeat(3, 1fr); gap: 24rem;} main.benefit-page .so-perk, .main-section2.bzone-wrap .so-perk{background: #f8f6ff; border-radius: 12rem; padding: 24rem; box-shadow: 0 0 0 1px #eae4f3; box-sizing: border-box; text-align: left;} main.benefit-page .so-perk__tit, .main-section2.bzone-wrap .so-perk__tit{display: block; font-size: 24rem; font-weight: 700; letter-spacing: -.24rem; line-height: 1.5; margin-bottom: 4rem; background: linear-gradient(90deg, #610bf6, #ff09c1); -webkit-background-clip: text; background-clip: text; color: transparent;} main.benefit-page .so-perk__desc, .main-section2.bzone-wrap .so-perk__desc{font-size: 14rem; font-weight: 500; color: #666; letter-spacing: -.14rem; line-height: 1.5;} main.benefit-page .so-perk__note, .main-section2.bzone-wrap .so-perk__note{font-size: 14rem; font-weight: 400; color: #666; letter-spacing: -.14rem; line-height: 1.5; margin-top: 8rem;} /* allben 7서비스 */ main.benefit-page #allben, .main-section2.bzone-wrap #allben{padding-top: 0;} main.benefit-page .so-svc-grid, .main-section2.bzone-wrap .so-svc-grid{display: flex; flex-wrap: wrap; gap: 40rem 24rem; max-width: 1036rem; margin: 0 auto; justify-content: center;} main.benefit-page .so-svc, .main-section2.bzone-wrap .so-svc{text-align: center; width: 241rem;} main.benefit-page .so-svc__ic, .main-section2.bzone-wrap .so-svc__ic{display: flex; align-items: center; justify-content: center; width: 100%; height: 125rem; border-radius: 12rem; background: linear-gradient(90deg, #f8f5ff, #eef5ff); margin-bottom: 16rem;} main.benefit-page .so-svc__ic img, .main-section2.bzone-wrap .so-svc__ic img{width: 80rem; height: 80rem; object-fit: contain; display: block;} main.benefit-page .so-svc__nm, .main-section2.bzone-wrap .so-svc__nm{font-size: 18rem; font-weight: 500; color: #000; letter-spacing: -.18rem; line-height: 1.5;} /* 유의사항 (terms) */ main.benefit-page #terms {padding-top: 60rem !important; position: relative; z-index: 2;} main.benefit-page .so-terms__in {display: flex; flex-direction: column; gap: 24rem; max-width: 1248rem; margin: 0 auto; text-align: left; color: var(--t2);} main.benefit-page .so-terms__tit {font-size: 20rem; font-weight: 700; letter-spacing: -.2rem; line-height: 1.5;} main.benefit-page .so-terms__block {display: flex; flex-direction: column; gap: 8rem;} main.benefit-page .so-terms__q {font-size: 16rem; font-weight: 600; letter-spacing: -.16rem; line-height: 1.5;} main.benefit-page .so-terms__body {font-size: 14rem; font-weight: 400; letter-spacing: -.14rem; line-height: 1.5;} main.benefit-page .so-terms__body p + p {margin-top: 0;} main.benefit-page .so-terms__body b {font-weight: 700;} main.benefit-page .so-terms__sub {display: flex; flex-direction: column; gap: 8rem;} main.benefit-page .so-terms__sub-tit {font-size: 14rem; font-weight: 600; letter-spacing: -.14rem; line-height: 1.5;} /* reveal (scroll fade-up) */ main.benefit-page .reveal {transition: opacity .7s var(--ease), transform .7s var(--ease);} main.benefit-page .reveal.armed {opacity: 0; transform: translateY(28rem);} main.benefit-page .reveal.armed.in {opacity: 1; transform: none;} main.benefit-page .reveal.d1 {transition-delay: .08s;} main.benefit-page .reveal.d2 {transition-delay: .16s;} main.benefit-page .reveal.d3 {transition-delay: .24s;} main.benefit-page .reveal.d4 {transition-delay: .32s;} @media (prefers-reduced-motion: reduce) { main.benefit-page .reveal.armed {opacity: 1; transform: none;} } @media screen and (max-width: 1200px) { main.benefit-page .panel, .main-section2.bzone-wrap .panel, main.benefit-page #prize .panel, .main-section2.bzone-wrap #prize .panel{padding-left: 53rem; padding-right: 53rem;} } @media screen and (max-width: 991px) { /* 페이지 공통 */ html:has(.benefit-page) #navigation header#header:not(.scrolled) {background: transparent; border-bottom-color: transparent;} main.benefit-page {margin-top: 0;} main.benefit-page .bzone-wrap {padding: 40rem 0 60rem;} .main-section2.bzone-wrap {padding: 40rem 0 60rem; background: linear-gradient(178deg, #FEDEFF 0.32%, #D9E8FE 15.22%);} main.benefit-page .bzone-floats {z-index: 0 !important;} .main-section2.bzone-wrap .bzone-intro h2 {font-size: 22rem; letter-spacing: -.44rem; margin-bottom: 4rem;} .main-section2.bzone-wrap .bzone-intro p {font-size: 16rem; letter-spacing: -.16rem; color: var(--t2);} .main-section2.bzone-wrap .bzone-intro p b {font-weight: 400;} main.benefit-page .sec.bzone + .sec.bzone, .main-section2.bzone-wrap .sec.bzone + .sec.bzone {margin-top: 40rem;} main.benefit-page .panel, .main-section2.bzone-wrap .panel {border-radius: 24rem; padding: 40rem 16rem; box-shadow: none;} main.benefit-page #prize .panel, .main-section2.bzone-wrap #prize .panel {padding: 40rem 16rem; border-radius: 24rem;} main.benefit-page #allben .panel, .main-section2.bzone-wrap #allben .panel {padding: 40rem 16rem;} main.benefit-page .panel-sub, .main-section2.bzone-wrap .panel-sub {font-size: 18rem; font-weight: 500; letter-spacing: -.18rem; margin-bottom: 24rem;} main.benefit-page .ptab-pc, .main-section2.bzone-wrap .ptab-pc {display: none;} main.benefit-page .ptab-mo, .main-section2.bzone-wrap .ptab-mo {display: inline-flex;} main.benefit-page .br-mo, .main-section2.bzone-wrap .br-mo {display: inline;} /* 배경 플로팅 오브젝트 */ main.benefit-page .bzone-floats .bf {max-width: 46rem !important; height: auto !important;} main.benefit-page .bzone-floats .bf:nth-child(3n) {max-width: 66rem !important;} main.benefit-page .bzone-floats .bf:nth-child(4n) {max-width: 34rem !important;} main.benefit-page .bzone-floats .bf:nth-child(5n) {max-width: 80rem !important;} main.benefit-page .bzone-floats .bf:nth-child(2), main.benefit-page .bzone-floats .bf:nth-child(4), main.benefit-page .bzone-floats .bf:nth-child(6), main.benefit-page .bzone-floats .bf:nth-last-child(-n+4) {display: none !important;} main.benefit-page .bzone-floats .bf[style*="left:"] {margin-left: -6% !important;} main.benefit-page .bzone-floats .bf[style*="right:"] {margin-right: -6% !important;} /* 선물영역 (ev-hero) */ main.benefit-page .ev-hero {padding: 60rem 0 50rem; margin-bottom: 40rem;} main.benefit-page .ev-hero h1 {font-size: 22rem; letter-spacing: -.44rem; margin-bottom: 4rem;} main.benefit-page .ev-lead {font-size: 16rem; letter-spacing: -.16rem; color: var(--t2); margin-bottom: 24rem;} main.benefit-page .ev-hero-banner {width: 296rem; margin-bottom: 0;} main.benefit-page .ev-hero-banner .evb-pc {display: none;} main.benefit-page .ev-hero-banner .evb-mo {display: block;} main.benefit-page .ev-tags {display: none;} /* free4 쿠폰 */ main.benefit-page .so-coupon-grid, .main-section2.bzone-wrap .so-coupon-grid{gap: 16rem;} main.benefit-page .so-coupon, .main-section2.bzone-wrap .so-coupon{padding: 16rem; gap: 16rem; min-height: 0; border-radius: 16rem; align-items: flex-start;} main.benefit-page .so-coupon__badge, .main-section2.bzone-wrap .so-coupon__badge{top: 16rem; right: 16rem; font-size: 12rem; padding: 0 12rem; height: 26rem; line-height: 26rem; } main.benefit-page .so-coupon__text, .main-section2.bzone-wrap .so-coupon__text{padding-top: 14rem;} main.benefit-page .so-ticket, .main-section2.bzone-wrap .so-ticket{flex: 0 0 110rem; width: 110rem; margin-top: 34rem;} main.benefit-page .so-ticket__body, .main-section2.bzone-wrap .so-ticket__body{padding: 15rem 6rem 3rem; gap: 4rem; height: auto; border-radius: 6rem;} main.benefit-page .so-ticket__logo, .main-section2.bzone-wrap .so-ticket__logo{height: 36rem;} main.benefit-page .so-ticket__label, .main-section2.bzone-wrap .so-ticket__label{font-size: 14rem; letter-spacing: -.28rem;} main.benefit-page .so-ticket__dash, .main-section2.bzone-wrap .so-ticket__dash{margin-left: 12rem; margin-right: 12rem;} main.benefit-page .so-ticket__stub, .main-section2.bzone-wrap .so-ticket__stub{height: 24rem; font-size: 7rem; letter-spacing: 3rem; font-weight: 300; border-radius: 6rem;} main.benefit-page .so-coupon__free, .main-section2.bzone-wrap .so-coupon__free{font-size: 16rem; letter-spacing: -.16rem; line-height: 150%;} main.benefit-page .so-coupon__tit, .main-section2.bzone-wrap .so-coupon__tit{font-size: 20rem; letter-spacing: -.2rem; line-height: 130%;} main.benefit-page .so-cta-wrap, .main-section2.bzone-wrap .so-cta-wrap{margin-top: 24rem;} main.benefit-page .so-cta, .main-section2.bzone-wrap .so-cta{height: 40rem; font-size: 15rem; letter-spacing: -.15rem;} /* winners */ main.benefit-page .so-winners-tit {font-size: 18rem; font-weight: 700; letter-spacing: -.18rem;} main.benefit-page .so-winners-sub {font-size: 18rem; font-weight: 400; letter-spacing: -.18rem;} main.benefit-page #so-winners-swiper {overflow: hidden; max-width: none; box-sizing: border-box;} main.benefit-page #so-winners-swiper .so-winners {display: flex; grid-template-columns: none; gap: 0; width: auto; max-width: none; margin: 0;} /* iOS: flex + aspect-ratio 높이 붕괴 → padding-top 비율 + absolute fill */ main.benefit-page #so-winners-swiper .winner-photo, main.benefit-page #so-winners-swiper .swiper-slide {flex: 0 0 auto; width: calc(100%/2 + 6rem) !important; height: auto; position: relative; overflow: hidden; box-sizing: border-box; aspect-ratio: auto;} main.benefit-page #so-winners-swiper .winner-photo::before {content: ''; display: block; padding-top: calc(204 / 154 * 100%);} main.benefit-page #so-winners-swiper .so-winner-card {position: absolute; inset: 0; width: 100%; height: 100%;} /* Instagram 팝업 MO */ .modal-popup.instagram .inner {padding: 16rem; max-height: 80dvh; height: auto;} .modal-popup.instagram .inner .btn-close {top: -52rem; right: 0; width: 32rem; height: 32rem; background-image: url("https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/renewal/common/popup-closeBtn-white-40.svg");} /* prize 상담·9대 */ main.benefit-page .so-prize-banner, .main-section2.bzone-wrap .so-prize-banner{width: 296rem; margin: 0 auto 40rem;} main.benefit-page .so-prize-banner__pc, .main-section2.bzone-wrap .so-prize-banner__pc{display: none;} main.benefit-page .so-prize-banner__mo, .main-section2.bzone-wrap .so-prize-banner__mo{display: block;} main.benefit-page .so-div, .main-section2.bzone-wrap .so-div{gap: 0; margin-bottom: 12rem;} main.benefit-page .so-div--consult .so-div__label, .main-section2.bzone-wrap .so-div--consult .so-div__label{font-size: 18rem; letter-spacing: -.18rem; padding: 0 14rem;} main.benefit-page .so-div--perk .so-div__label, .main-section2.bzone-wrap .so-div--perk .so-div__label{font-size: 18rem; letter-spacing: -.18rem; color: #C645F1; padding: 0 14rem;} main.benefit-page .so-consult-grid, .main-section2.bzone-wrap .so-consult-grid{grid-template-columns: 1fr; gap: 8rem; margin-bottom: 16rem;} main.benefit-page .so-consult, .main-section2.bzone-wrap .so-consult{padding: 16rem 8rem; text-align: center;} main.benefit-page .so-consult__tit, .main-section2.bzone-wrap .so-consult__tit{font-size: 15rem; letter-spacing: -.15rem; line-height: 150%; margin: 0;} main.benefit-page .so-consult__desc, .main-section2.bzone-wrap .so-consult__desc{font-size: 12rem; letter-spacing: -.12rem; line-height: 150%; } main.benefit-page .so-perk-grid, .main-section2.bzone-wrap .so-perk-grid{grid-template-columns: repeat(2, 1fr); gap: 8rem;} main.benefit-page .so-perk, .main-section2.bzone-wrap .so-perk{padding: 16rem 4rem; text-align: center;} main.benefit-page .so-perk:last-child, .main-section2.bzone-wrap .so-perk:last-child{grid-column: 1 / -1;} main.benefit-page .so-perk__tit, .main-section2.bzone-wrap .so-perk__tit{font-size: 15rem; letter-spacing: -.15rem;} main.benefit-page .so-perk__desc, .main-section2.bzone-wrap .so-perk__desc{font-size: 12rem; font-weight: 400; letter-spacing: -.12rem;} main.benefit-page .so-perk__note, .main-section2.bzone-wrap .so-perk__note{font-size: 12rem; letter-spacing: -.12rem; margin-top: 4rem;} /* allben 7서비스 */ main.benefit-page .so-svc-grid, .main-section2.bzone-wrap .so-svc-grid{gap: 16rem 8rem;} main.benefit-page .so-svc, .main-section2.bzone-wrap .so-svc{width: calc(50% - 4rem);} main.benefit-page .so-svc-grid .so-svc:nth-child(5), .main-section2.bzone-wrap .so-svc-grid .so-svc:nth-child(5){grid-column: auto;} main.benefit-page .so-svc-grid .so-svc:nth-child(7), .main-section2.bzone-wrap .so-svc-grid .so-svc:nth-child(7){grid-column: 1 / -1; justify-self: center; width: calc(50% - 4rem);} main.benefit-page .so-svc__ic, .main-section2.bzone-wrap .so-svc__ic{height: 140rem; margin-bottom: 8rem;} main.benefit-page .so-svc__ic img, .main-section2.bzone-wrap .so-svc__ic img{width: 64rem; height: 64rem;} main.benefit-page .so-svc__nm, .main-section2.bzone-wrap .so-svc__nm{font-size: 16rem; letter-spacing: -.16rem;} /* 유의사항 (terms) */ main.benefit-page #terms {padding-top: 40rem !important;} main.benefit-page .so-terms__in {gap: 24rem;} main.benefit-page .so-terms__tit {font-size: 15rem; letter-spacing: -.15rem;} main.benefit-page .so-terms__tit + .so-terms__block{margin-top: -8rem;} main.benefit-page .so-terms__sub-tit {font-weight: 700;} } @media screen and (max-width: 670px) { main.benefit-page .so-coupon-grid, .main-section2.bzone-wrap .so-coupon-grid{grid-template-columns: 1fr; } }