/* BASIC css start */ /* 블랙품고데이 CSS — 중복 정리 / 선택자별 한 줄 */ /* 반응형 및 적용 순서 유지가 필요한 규칙은 분리하여 유지합니다. */ #productPlan .page-body .visual { width:1080px; } #ipoomgoBlackPromo { scroll-behavior:smooth; scroll-padding-top:82px; --pink:#e74174; --black:#080808; display:block; position:relative; margin:0 auto; letter-spacing:-.6px; text-align:left; --content:750px; --gutter:max(22px,calc((100% - 750px)/2)); font-family:Pretendard,"Noto Sans KR","Malgun Gothic",sans-serif; line-height:1.5; box-sizing:border-box; background:#000; color:#fff; --heading-size:55px; --subheading-size:42px; font-size:16px; width:100%; max-width:1080px; margin-inline:auto; overflow:visible; } #ipoomgoBlackPromo summary:focus-visible { outline:3px solid var(--pink); outline-offset:5px; } #ipoomgoBlackPromo .ipo-bf-content-section { padding:85px var(--gutter); box-sizing:border-box; } #ipoomgoBlackPromo p { margin:0; } #ipoomgoBlackPromo .ipo-bf-section-header { margin-bottom:38px; } #ipoomgoBlackPromo .ipo-bf-section-desc { margin:22px 0 0; } #ipoomgoBlackPromo .ipo-bf-hero-inner { display:flex; align-items:center; justify-content:center; text-align:center; flex-direction:column; container-type:inline-size; overflow:hidden; isolation:isolate; max-width:750px; } #ipoomgoBlackPromo .ipo-bf-event-date { margin-top:3cqw; transform:rotate(-2deg); } #ipoomgoBlackPromo .ipo-bf-motion-control { bottom:2cqw; } #ipoomgoBlackPromo .ipo-bf-benefit-card { position:relative; transition:border-color .2s,background .2s; } #ipoomgoBlackPromo .ipo-bf-benefit-card:hover { border-color:var(--pink); background:#000; } #ipoomgoBlackPromo .ipo-bf-benefit-card strong { font:900 36px/1.3 Arial,sans-serif; } #ipoomgoBlackPromo .ipo-bf-benefit-arrow { position:absolute; font-size:19px; color:#fff; } #ipoomgoBlackPromo .ipo-bf-sticky-nav>a { font-size:16px; font-weight:800; white-space:nowrap; display:flex; gap:4px; min-width:0; text-align:center; border-bottom:3px solid transparent; box-sizing:border-box; } #ipoomgoBlackPromo .ipo-bf-sticky-nav>a.ipo-bf-active { border-color:var(--pink); color:#e74174; border-bottom-color:#e74174; } #ipoomgoBlackPromo .ipo-bf-coupon-block { scroll-margin-top:90px; margin-top:24px; } #ipoomgoBlackPromo .ipo-bf-black-button { width:100%; display:flex; align-items:center; padding:20px 24px; font-weight:800; font-size:16px; border-radius:4px; color:#fff; background:#080808; } #ipoomgoBlackPromo .ipo-bf-black-button:hover { background:#292929; } #ipoomgoBlackPromo .ipo-bf-coupon-terms { margin-top:30px; border-top:1px solid #ccc; padding-top:23px; font-size:17px; } #ipoomgoBlackPromo .ipo-bf-coupon-terms summary { cursor:pointer; font-weight:800; display:flex; justify-content:space-between; } #ipoomgoBlackPromo .ipo-bf-coupon-terms ul { color:#999; line-height:1.2; margin-top:20px; } #ipoomgoBlackPromo .ipo-bf-coupon-terms li { margin-bottom:9px; } #ipoomgoBlackPromo .ipo-bf-deal-section { background:#080808; color:#fff; } #ipoomgoBlackPromo .ipo-bf-confirmed-category-grid { display:grid; gap:12px; margin-top:35px; } #ipoomgoBlackPromo .ipo-bf-category-tile { position:relative; display:flex; text-align:left; padding:24px 17px; border:1px solid #ddd; border-radius:5px; min-height:185px; transition:border-color .2s; flex-direction:column; justify-content:flex-start; } #ipoomgoBlackPromo .ipo-bf-category-tile:hover { border-color:#e74174; } #ipoomgoBlackPromo .ipo-bf-category-symbol { display:grid; place-items:center; width:42px; height:42px; margin-bottom:26px; } #ipoomgoBlackPromo .ipo-bf-category-symbol svg { width:40px; height:40px; } #ipoomgoBlackPromo .ipo-bf-mellow-icon { font:bold 28px Georgia; color:#111; } #ipoomgoBlackPromo .ipo-bf-category-tile b { font-size:16px; line-height:1.7; font-weight:800; word-break:keep-all; overflow-wrap:anywhere; } #ipoomgoBlackPromo .ipo-bf-tile-arrow { position:absolute; top:12px; right:12px; font-size:17px; color:#777; } #ipoomgoBlackPromo .ipo-bf-mellow-tile { background:#ffeaf1; border-color:#e9bcc9; } #ipoomgoBlackPromo footer { padding:30px var(--gutter); color:#fff; display:flex; justify-content:space-between; align-items:center; background:#080808; box-sizing:border-box; } #ipoomgoBlackPromo .ipo-bf-logo { font:bold 23px Arial; letter-spacing:-1px; } #ipoomgoBlackPromo footer>span { font-size:16px; color:#aaa; } #ipoomgoBlackPromo .ipo-bf-back-top { right:20px; bottom:20px; place-items:center; background:#fff; width:40px; height:40px; border:1px solid #ddd; border-radius:50%; z-index:30; font-size:20px; } #ipoomgoBlackPromo dialog { border-radius:10px; padding:35px; overflow-y:auto; color:#111; border:0; width:calc(100% - 40px); max-height:85vh; box-shadow:0 20px 80px #0005; box-sizing:border-box; } #ipoomgoBlackPromo dialog .ipo-bf-close { position:absolute; right:10px; top:7px; font-size:25px; background:none; color:#333; padding:5px 10px; } #ipoomgoBlackPromo dialog h2 { font-size:23px; letter-spacing:-1px; line-height:1.5; padding-right:10px; margin-bottom:20px; } #ipoomgoBlackPromo #ipo-bf-modalBody { font-size:16px; line-height:1.9; color:#555; } #ipoomgoBlackPromo dialog .ipo-bf-black-button { margin-top:25px; font-size:16px; justify-content:center; } #ipo-bf-openrun .ipo-bf-content-inner .coupon_download, #ipo-bf-openrun .ipo-bf-content-inner .login { position:absolute; width: 706px; height: 190px; top: 366px; left: 23px; } #ipo-bf-coupons .ipo-bf-content-inner .link { position:absolute; width: 706px; height: 150px; bottom: 191px; left: 23px; } #ipo-bf-category .ipo-bf-content-inner a { position:absolute; width: 337px;height: 163px;} #ipo-bf-category .ipo-bf-content-inner .cate1 { bottom: 696px; left: 29px; } #ipo-bf-category .ipo-bf-content-inner .cate2 { bottom: 696px; left: 380px; } #ipo-bf-category .ipo-bf-content-inner .cate3 { bottom: 516px; left: 29px; } #ipo-bf-category .ipo-bf-content-inner .cate4 { bottom: 516px; left: 380px; } #ipo-bf-category .ipo-bf-content-inner .cate5 { bottom: 338px; left: 29px; } #ipo-bf-category .ipo-bf-content-inner .cate6 { bottom: 338px; left: 380px; } #ipo-bf-category .ipo-bf-content-inner .cate7 { bottom: 158px; left: 29px; } #ipo-bf-category .ipo-bf-content-inner .cate8 { bottom: 158px; left: 380px; } #ipo-bf-welcome .ipo-bf-content-inner .link { position:absolute; width: 706px; height: 130px; bottom: 262px; left: 187px; } #ipo-bf-attendance .ipo-bf-content-inner .link { position:absolute; width: 706px; height: 130px; bottom: 151px; left: 24px; } /* 이미지 위 하얀 영역에 상품 배치 */ #ipoBlackDealProducts { position:relative; width:100%; } #ipoBlackDealProducts, #ipoBlackDealProducts * { box-sizing:border-box; } #ipoBlackDealProducts .ipo-deal-background { display:block; width:100%; height:auto; } #ipoBlackDealProducts .ipo-deal-area { position:absolute; top:45.97%; left:3.73%; width:92.54%; height:43.1%; display:flex; align-items:center; padding:2%; overflow:hidden; background:#fff; container-type:inline-size; } #ipoBlackDealProducts .ipo-deal-swiper { width:100%; min-width:0; overflow:hidden; touch-action:pan-y; } #ipoBlackDealProducts .swiper-wrapper { display:flex; align-items:stretch; } #ipoBlackDealProducts .swiper-slide { flex-shrink:0; height:auto; min-width:0; margin:0; padding:0; } /* 기존 상품 정보를 복사해 사용 */ #ipoBlackDealProducts .tb-left, #ipoBlackDealProducts .info { width:100%; margin:0; padding:0; } #ipoBlackDealProducts .info { list-style:none; text-align:left; } #ipoBlackDealProducts .info > li { margin:0; padding:0; list-style:none; } #ipoBlackDealProducts .thumb { width:100%; aspect-ratio:1; overflow:hidden; background:#f7f7f7; } #ipoBlackDealProducts .thumb a { display:block; width:100%; height:100%; } #ipoBlackDealProducts .thumb img { display:block; width:100%; height:100%; object-fit:contain; } #ipoBlackDealProducts .name { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; height:42px; margin:10px 0 6px !important; padding:0; color:#222; font-size:16px; font-weight:500; line-height:24px; letter-spacing:-0.45px; word-break:break-all; } #ipoBlackDealProducts .name .sub { display:none; } #ipoBlackDealProducts .prd-price { margin:0; padding:0; color:#222; } #ipoBlackDealProducts .price { display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 4px; } #ipoBlackDealProducts .prd-price p { margin:0; padding:0; line-height:23px; } #ipoBlackDealProducts .realP, #ipoBlackDealProducts .prd-price2, #ipoBlackDealProducts .prd-price2-login { color:#111; font-size:19px !important; font-weight:700; } #ipoBlackDealProducts .discount_rate { color:#e74174; font-size:19px; font-weight:700; } #ipoBlackDealProducts .conP, #ipoBlackDealProducts .listPrice, #ipoBlackDealProducts .listPrice strike, #ipoBlackDealProducts .listPrice del { color:#999; font-size:14px; margin-left:5px; } #ipoBlackDealProducts .sold_out { color:#e74174; font-size:19px; } /* 품절 상품: SOLD OUT 도장 */ #ipoBlackDealProducts .thumb.is-soldout { position:relative; isolation:isolate; } #ipoBlackDealProducts .thumb.is-soldout img { filter:grayscale(1); opacity:.65; } #ipoBlackDealProducts .thumb.is-soldout::before { content:""; position:absolute; inset:0; z-index:1; background:rgba(0,0,0,.15); pointer-events:none; } #ipoBlackDealProducts .thumb.is-soldout::after { content:"SOLD OUT"; position:absolute; top:50%; left:50%; z-index:2; width:max-content; max-width:90%; padding:7px 10px; border:3px solid #e74174; border-radius:4px; outline:1px solid #e74174; outline-offset:3px; background:rgba(255,255,255,.88); color:#e74174; font-family:"Arial Black",Arial,sans-serif; font-size:22px; font-weight:900; line-height:1; letter-spacing:1px; white-space:nowrap; text-align:center; text-shadow:none; transform:translate(-50%,-50%) rotate(-14deg); box-shadow:inset 0 0 0 1px #e7417433; pointer-events:none; } @media (max-width:600px) { #ipoBlackDealProducts .thumb.is-soldout::after { padding:5px 7px; border-width:2px; outline-offset:2px; font-size:15px; letter-spacing:.5px; } } /* 9·10번째 분류 제목 및 상품 목록 숨김 */ #productPlan.ipoomgo-plan #cate200, #productPlan.ipoomgo-plan #cate200 + table.plst, #productPlan.ipoomgo-plan #cate201, #productPlan.ipoomgo-plan #cate201 + table.plst { display: none !important; } /* 상단 분류 메뉴에서도 해당 항목 숨김 */ #productPlan.ipoomgo-plan #planCategoryNav li:has(a[href="#cate200"]), #productPlan.ipoomgo-plan #planCategoryNav li:has(a[href="#cate201"]), #productPlan.ipoomgo-plan #planCategoryNav li:nth-child(9), #productPlan.ipoomgo-plan #planCategoryNav li:nth-child(10) { display: none !important; } @media (max-width:750px) { #ipoomgoBlackPromo { scroll-padding-top:66px; } #ipoomgoBlackPromo .ipo-bf-content-section { padding:55px var(--gutter); } #ipoomgoBlackPromo .ipo-bf-section-header { margin-bottom:28px; } #ipoomgoBlackPromo .ipo-bf-section-desc { margin-top:18px; } #ipoomgoBlackPromo .ipo-bf-event-date { margin-top:3cqw; } #ipoomgoBlackPromo .ipo-bf-motion-control { bottom:1.3cqw; } #ipoomgoBlackPromo .ipo-bf-benefit-arrow, #ipoomgoBlackPromo .ipo-bf-sticky-nav>a { font-size:16px; } #ipoomgoBlackPromo .ipo-bf-coupon-block { margin-top:20px; scroll-margin-top:75px; } #ipoomgoBlackPromo .ipo-bf-black-button { padding:17px 16px; font-size:16px; } #ipoomgoBlackPromo .ipo-bf-coupon-terms { font-size:16px; } #ipoomgoBlackPromo .ipo-bf-confirmed-category-grid { gap:10px; margin-top:28px; } #ipoomgoBlackPromo .ipo-bf-category-tile { padding:20px 15px; min-height:160px; } #ipoomgoBlackPromo .ipo-bf-category-symbol { width:35px; height:35px; margin-bottom:20px; } #ipoomgoBlackPromo .ipo-bf-category-symbol svg { width:33px; height:33px; } #ipoomgoBlackPromo .ipo-bf-category-tile b { font-size:16px; } #ipoomgoBlackPromo .ipo-bf-mellow-icon { font-size:26px; } #ipoomgoBlackPromo footer { padding-block:25px; } #ipoomgoBlackPromo .ipo-bf-back-top { right:12px; bottom:15px; width:35px; height:35px; } #ipoomgoBlackPromo dialog { padding:30px 24px; } #ipoomgoBlackPromo dialog h2 { font-size:21px; } #ipoomgoBlackPromo #ipo-bf-modalBody { font-size:16px; } } @media (max-width:360px) { #ipoomgoBlackPromo .ipo-bf-sticky-nav>a { font-size:16px; padding-inline:9px; } #ipoomgoBlackPromo .ipo-bf-category-tile b { font-size:16px; } #ipoomgoBlackPromo .ipo-bf-category-tile { padding-inline:12px; } } @media (prefers-reduced-motion:reduce) { #ipoomgoBlackPromo { scroll-behavior:auto; } #ipoomgoBlackPromo .ipo-bf-benefit-card, #ipoomgoBlackPromo .ipo-bf-category-tile { transition:none; } } #ipoomgoBlackPromo * { box-sizing:border-box; } #ipoomgoBlackPromo button { letter-spacing:inherit; font:inherit; -webkit-tap-highlight-color:transparent; cursor:pointer; text-indent:0; color:inherit; border:0; overflow:visible; } #ipoomgoBlackPromo button:focus-visible, #ipoomgoBlackPromo a:focus-visible { outline:3px solid #c6247c; outline-offset:4px; } #ipoomgoBlackPromo .ipo-bf-hero-grid { grid-template-columns:1fr 1fr; z-index:2; align-items:center; text-align:center; min-height:0; } #ipoomgoBlackPromo .ipo-bf-eyebrow { font-size:16px; font-weight:800; letter-spacing:2px; margin:0 0 20px; display:flex; align-items:center; gap:8px; } #ipoomgoBlackPromo .ipo-bf-hero-kicker { font-weight:500; letter-spacing:0; } #ipoomgoBlackPromo h1 { font-size:89px; line-height:.85; font-weight:900; letter-spacing:-5px; margin:0; position:relative; color:inherit; text-align:center; } #ipoomgoBlackPromo button:hover { filter:brightness(.97); } @media (max-width:700px) { #ipoomgoBlackPromo .ipo-bf-hero-grid { grid-template-columns:1fr; } #ipoomgoBlackPromo h1 { font-size:76px; letter-spacing:-4px; line-height:.88; } } @media (prefers-reduced-motion:reduce) { #ipoomgoBlackPromo * { transition:none !important; } } @media (max-width:375px) { #ipoomgoBlackPromo h1 { font-size:65px; } } #ipoomgoBlackPromo .ipo-bf-hero { position:relative; color:#fff; aspect-ratio:1/1; --hot-pink:#ff48a6; isolation:isolate; container-type:inline-size; } #ipoomgoBlackPromo .ipo-bf-hero-grid { display:block; } #ipoomgoBlackPromo .ipo-bf-hero-copy { position:relative; } #ipoomgoBlackPromo .ipo-bf-hero .ipo-bf-eyebrow { display:inline-flex; justify-content:center; gap:8px; border:1px solid #ff48a66b; border-radius:2px; font:700 16px Arial,sans-serif; margin:0 0 20px; font-size:1.05cqw; letter-spacing:.23cqw; padding:.7cqw 1.4cqw; margin-bottom:1.7cqw; border-color:#c9cad344; color:#dedee5; } #ipoomgoBlackPromo .ipo-bf-hero h1 { z-index:1; text-align:center; letter-spacing:-.65cqw; max-width:none; transform:rotate(-6deg); font-family:Impact,"Arial Black",Arial,sans-serif; font-weight:900; font-style:italic; margin:auto; font-size:16cqw; line-height:.88; } #ipoomgoBlackPromo .ipo-bf-event-date { display:inline-flex; align-items:center; gap:15px; background:var(--hot-pink); color:#101013; padding:13px 22px; font:900 22px Arial,sans-serif; letter-spacing:-.3px; } #ipoomgoBlackPromo .ipo-bf-event-date span { margin:0; color:inherit; } #ipoomgoBlackPromo .ipo-bf-hero-atmosphere { position:absolute; inset:0; pointer-events:none; z-index:0; overflow:hidden; background:radial-gradient(ellipse at 50% 35%,#ff48a613,transparent 66%); } #ipoomgoBlackPromo .ipo-bf-impact-grid { position:absolute; inset:0; background-image:linear-gradient(#ffffff04 1px,transparent 1px),linear-gradient(90deg,#ffffff04 1px,transparent 1px); background-size:54px 54px; transform:perspective(650px) rotateX(20deg) scale(1.15); opacity:.7; } #ipoomgoBlackPromo .ipo-bf-impact-orb { position:absolute; width:380px; height:380px; border:80px solid #ff48a6; right:-235px; top:90px; opacity:.75; transform:rotate(-24deg); border-radius:50%; animation:ipo-bf-orb-float 12s ease-in-out infinite alternate; } #ipoomgoBlackPromo .ipo-bf-motion-ring { position:absolute; width:670px; height:540px; border:1px solid #ff48a62b; border-radius:50%; left:50%; top:30px; transform:translateX(-50%) rotate(-35deg); animation:ipo-bf-ring-drift 16s ease-in-out infinite alternate; } #ipoomgoBlackPromo .ipo-bf-ring-two { width:800px; height:410px; border-color:#ffffff0c; animation-direction:alternate-reverse; } #ipoomgoBlackPromo .ipo-bf-motion-star { position:absolute; line-height:1; } #ipoomgoBlackPromo .ipo-bf-star-one { font-size:90px; left:-20px; top:330px; color:#ff48a622; animation:ipo-bf-impact-spin 40s linear infinite; } #ipoomgoBlackPromo .ipo-bf-star-two { font-size:28px; right:12%; top:140px; color:var(--hot-pink); animation:ipo-bf-impact-spin 26s linear infinite reverse; } #ipoomgoBlackPromo .ipo-bf-light-sweep { position:absolute; width:200px; height:900px; left:-300px; top:-150px; background:linear-gradient(90deg,transparent,#ff8dc508,transparent); transform:rotate(30deg); animation:ipo-bf-light-pass 14s ease-in-out infinite; } #ipoomgoBlackPromo .ipo-bf-motion-control { position:absolute; right:18px; top:18px; z-index:4; border:1px solid #ffffff35; border-radius:30px; background:#101013; color:#a998a4; padding:6px 10px; font-size:16px; display:flex; align-items:center; gap:6px; } #ipoomgoBlackPromo .ipo-bf-motion-ribbons { position:relative; height:110px; margin:10px -90px 0; z-index:1; pointer-events:none; } #ipoomgoBlackPromo .ipo-bf-ribbon { position:absolute; left:-5%; width:110%; overflow:hidden; white-space:nowrap; padding:13px 0; font-family:Arial,sans-serif; font-size:17px; font-weight:900; letter-spacing:1px; line-height:1; } #ipoomgoBlackPromo .ipo-bf-ribbon-pink { top:35px; background:var(--hot-pink); color:#101013; transform:rotate(-3deg); z-index:2; } #ipoomgoBlackPromo .ipo-bf-ribbon-outline { top:37px; background:#19151b; border-block:1px solid #ff48a680; color:#ff8dc5; transform:rotate(3deg); font-size:16px; padding:15px 0; } #ipoomgoBlackPromo .ipo-bf-ribbon-track { display:flex; width:max-content; animation:ipo-bf-ribbon-move 23s linear infinite; } #ipoomgoBlackPromo .ipo-bf-ribbon-outline .ipo-bf-ribbon-track { animation-direction:reverse; animation-duration:29s; } #ipoomgoBlackPromo .ipo-bf-ribbon-track>span { flex-shrink:0; } #ipoomgoBlackPromo .ipo-bf-hero.ipo-bf-motion-paused *, #ipoomgoBlackPromo .ipo-bf-hero.ipo-bf-motion-paused *::before, #ipoomgoBlackPromo .ipo-bf-hero.ipo-bf-motion-paused *::after { animation-play-state:paused !important; } @media (max-width:700px) { #ipoomgoBlackPromo .ipo-bf-event-date { padding:11px 18px; font-size:19px; gap:10px; } #ipoomgoBlackPromo .ipo-bf-motion-control { font-size:16px; top:14px; right:12px; } #ipoomgoBlackPromo .ipo-bf-impact-orb { width:220px; height:220px; border-width:45px; right:-155px; top:130px; opacity:.85; } #ipoomgoBlackPromo .ipo-bf-impact-grid { background-size:36px 36px; } #ipoomgoBlackPromo .ipo-bf-star-one { font-size:65px; left:-31px; top:265px; } #ipoomgoBlackPromo .ipo-bf-star-two { right:8%; top:100px; font-size:17px; } #ipoomgoBlackPromo .ipo-bf-motion-ring { width:400px; height:330px; top:70px; } #ipoomgoBlackPromo .ipo-bf-ring-two { width:450px; height:260px; } #ipoomgoBlackPromo .ipo-bf-motion-ribbons { height:96px; margin:14px -40px 0; } #ipoomgoBlackPromo .ipo-bf-ribbon { font-size:16px; padding:11px 0; } #ipoomgoBlackPromo .ipo-bf-ribbon-pink { transform:rotate(-6deg); } #ipoomgoBlackPromo .ipo-bf-ribbon-outline { font-size:16px; padding:12px 0; transform:rotate(6deg); } } @media (prefers-reduced-motion:reduce) { #ipoomgoBlackPromo .ipo-bf-hero *, #ipoomgoBlackPromo .ipo-bf-hero *::before, #ipoomgoBlackPromo .ipo-bf-hero *::after { filter:none !important; animation:none !important; } #ipoomgoBlackPromo .ipo-bf-motion-control { display:none; } } #ipoomgoBlackPromo .ipo-bf-hero { height:auto; background:#0a0a0d; } #ipoomgoBlackPromo .ipo-bf-hero-grid { position:absolute; inset:7% 5% auto; } #ipoomgoBlackPromo .ipo-bf-hero-copy { padding:0; } #ipoomgoBlackPromo .ipo-bf-hero-kicker { font-size:1.8cqw; margin:0 0 3cqw; color:#d2c9d1; margin-bottom:2cqw; } #ipoomgoBlackPromo .ipo-bf-hero .ipo-bf-event-date { font-size:2.5cqw; background:transparent; border:1px solid #bfc0cd66; border-radius:100px; color:#e9e9f0; transform:none; margin-top:2.5cqw; letter-spacing:.1cqw; } #ipoomgoBlackPromo .ipo-bf-hero .ipo-bf-ribbon-pink { background:#ff75bf; } #ipoomgoBlackPromo .ipo-bf-hero .ipo-bf-ribbon-outline { color:#1c1c26; background:linear-gradient(170deg,#fcfcff,#a4a6b5 35%,#fff 50%,#a2a5b5 75%,#edeef6); border:0; } #ipoomgoBlackPromo .ipo-bf-hero .ipo-bf-motion-control { font-size:1cqw; padding:.65cqw 1cqw; gap:.4cqw; z-index:5; } #ipoomgoBlackPromo .ipo-bf-hero .ipo-bf-impact-orb { background:none; border-width:4cqw; box-shadow:inset 0 0 2cqw #ff6dbf44,0 0 5cqw #ff45a233; } #ipoomgoBlackPromo .ipo-bf-hero .ipo-bf-motion-ring { transform:translateX(-50%) rotate(-35deg); } #ipoomgoBlackPromo .ipo-bf-hero .ipo-bf-star-two { display:none; } #ipoomgoBlackPromo .ipo-bf-chrome-orbit { position:absolute; left:-12cqw; bottom:15cqw; width:33cqw; height:20cqw; border-radius:50%; border:2cqw solid #c5c8d8; background:transparent; box-shadow:inset .4cqw .4cqw .7cqw #fff,inset -.6cqw -.6cqw 1cqw #505566,.3cqw .3cqw .4cqw #fff8,-.5cqw -.7cqw 1cqw #000; transform:rotate(-35deg); animation:ipo-bf-chrome-float 9s ease-in-out infinite alternate; opacity:.85; } #ipoomgoBlackPromo .ipo-bf-chrome-star { position:absolute; z-index:1; font-family:Arial; line-height:1; background:linear-gradient(135deg,#fff,#757a91 35%,#f9faff 48%,#8c91a5 70%,#fff); background-clip:text; -webkit-background-clip:text; color:transparent; filter:drop-shadow(.4cqw .4cqw .3cqw #000a); } #ipoomgoBlackPromo .ipo-bf-chrome-star-one { font-size:12cqw; right:5cqw; top:19cqw; animation:ipo-bf-impact-spin 35s linear infinite; } #ipoomgoBlackPromo .ipo-bf-chrome-star-two { font-size:6cqw; left:8cqw; top:14cqw; animation:ipo-bf-impact-spin 28s linear infinite reverse; } #ipoomgoBlackPromo .ipo-bf-chrome-sphere { position:absolute; width:5cqw; height:5cqw; right:11cqw; bottom:25cqw; border-radius:50%; background:radial-gradient(circle at 29% 24%,white 0%,#c6cbdc 20%,#4b5064 48%,#c6cad7 70%,#242634 90%); box-shadow:1cqw 1cqw 2cqw #000a; animation:ipo-bf-orb-float 8s ease-in-out infinite alternate; } @media (max-width:700px) { #ipoomgoBlackPromo .ipo-bf-hero .ipo-bf-eyebrow { font-size:1.35cqw; padding:.85cqw 1.5cqw; } #ipoomgoBlackPromo .ipo-bf-hero-kicker { font-size:2.2cqw; } #ipoomgoBlackPromo .ipo-bf-hero .ipo-bf-motion-control { font-size:1.5cqw; padding:.9cqw 1.4cqw; } } #ipoomgoBlackPromo .ipo-bf-hero .ipo-bf-hero-grid { top:6%; } #ipoomgoBlackPromo .ipo-bf-hero .ipo-bf-event-date { gap:1cqw; } @media (max-width:700px) { #ipoomgoBlackPromo .ipo-bf-hero .ipo-bf-event-date { font-size:3cqw; margin-top:2.2cqw; } } #ipoomgoBlackPromo .ipo-bf-hero-image-title .ipo-bf-hero-kicker { display:none; } #ipoomgoBlackPromo .ipo-bf-hero-image-title .ipo-bf-eyebrow { margin-bottom:2cqw; } #ipoomgoBlackPromo .ipo-bf-hero-image-title h1.ipo-bf-campaign-image-heading { position:relative; height:58.7cqw; width:100%; margin:0; max-width:none; transform:none; font-size:0; line-height:0; animation:ipo-bf-selected-title-enter 1.15s cubic-bezier(.16,1,.3,1) both; isolation:isolate; } #ipoomgoBlackPromo .ipo-bf-hero-image-title .ipo-bf-campaign-title-image { position:absolute; top:-8.9cqw; left:50%; width:72cqw; height:auto; max-width:none; transform:translateX(-50%); display:block; filter:drop-shadow(0 1cqw 1.3cqw #0009); } #ipoomgoBlackPromo .ipo-bf-hero-image-title .ipo-bf-event-date { margin-top:50px; } #ipoomgoBlackPromo .ipo-bf-hero-image-title .ipo-bf-chrome-star-one { right:4cqw; top:25cqw; font-size:8cqw; } #ipoomgoBlackPromo .ipo-bf-hero-image-title .ipo-bf-chrome-star-two { left:5cqw; top:15cqw; font-size:4.5cqw; } #ipoomgoBlackPromo .ipo-bf-hero-image-title .ipo-bf-impact-orb { opacity:.3; } #ipoomgoBlackPromo .ipo-bf-hero-image-title.ipo-bf-motion-paused h1.ipo-bf-campaign-image-heading { animation:none; opacity:1; transform:none; } @media (prefers-reduced-motion:reduce) { #ipoomgoBlackPromo .ipo-bf-hero-image-title h1.ipo-bf-campaign-image-heading { animation:none !important; opacity:1; transform:none; } } #ipoomgoBlackPromo .ipo-bf-hero.ipo-bf-hero-image-title { width:100%; aspect-ratio:auto; height:auto; padding:0; container-type:inline-size; background:#08080d; isolation:isolate; } #ipoomgoBlackPromo .ipo-bf-hero-inner { position:relative; margin-inline:auto; aspect-ratio:1; } #ipoomgoBlackPromo .ipo-bf-hero-image-title .ipo-bf-hero-grid { top:14%; } #ipoomgoBlackPromo .ipo-bf-hero .ipo-bf-motion-control { top:auto; bottom:12%; right:2cqw; } @media (max-width:700px) { #ipoomgoBlackPromo .ipo-bf-hero-image-title .ipo-bf-hero-grid { top:14%; } } #ipoomgoBlackPromo .ipo-bf-hero .ipo-bf-hero-inner { overflow:visible; z-index:2; background:transparent; isolation:auto; max-width:1080px; aspect-ratio:1/1; } #ipoomgoBlackPromo .ipo-bf-hero .ipo-bf-hero-atmosphere { inset:0; width:100%; height:100%; container-type:inline-size; z-index:0; background:radial-gradient(ellipse at 50% 38%,#39132690 0%,#130c1850 42%,transparent 74%),linear-gradient(150deg,#09090f,#100916 55%,#08080d); } #ipoomgoBlackPromo .ipo-bf-hero .ipo-bf-impact-grid { opacity:.38; background-size:5cqw 5cqw; mask-image:radial-gradient(ellipse at center,#000,transparent 80%); } #ipoomgoBlackPromo .ipo-bf-hero .ipo-bf-impact-orb { width:24cqw; height:24cqw; right:-10cqw; top:20%; opacity:.55; } #ipoomgoBlackPromo .ipo-bf-hero .ipo-bf-chrome-orbit { left:-5cqw; bottom:9%; width:28cqw; height:15cqw; border-width:1.5cqw; opacity:.95; animation:ipo-bf-full-orbit-float 10s ease-in-out infinite alternate; } #ipoomgoBlackPromo .ipo-bf-hero .ipo-bf-motion-ring { width:86cqw; height:48cqw; top:8%; border-color:#f2d6e738; animation:ipo-bf-ring-drift 15s ease-in-out infinite alternate; } #ipoomgoBlackPromo .ipo-bf-hero .ipo-bf-ring-two { width:105cqw; height:40cqw; top:16%; border-color:#f293c327; animation-duration:19s; animation-direction:alternate-reverse; } #ipoomgoBlackPromo .ipo-bf-hero .ipo-bf-chrome-star-one { right:7%; top:22%; font-size:7cqw; animation:ipo-bf-chrome-turn 28s linear infinite; } #ipoomgoBlackPromo .ipo-bf-hero .ipo-bf-chrome-star-two { left:6%; top:13%; font-size:4cqw; animation:ipo-bf-chrome-turn 24s linear infinite reverse; } #ipoomgoBlackPromo .ipo-bf-hero .ipo-bf-chrome-sphere { right:5%; bottom:15%; width:4cqw; height:4cqw; animation:ipo-bf-sphere-drift 8s ease-in-out infinite alternate; } #ipoomgoBlackPromo .ipo-bf-hero .ipo-bf-star-one { left:5%; top:68%; font-size:5cqw; color:#ff8dc54a; animation:ipo-bf-impact-spin 32s linear infinite; } #ipoomgoBlackPromo .ipo-bf-hero .ipo-bf-motion-ribbons { margin:0; position:absolute; pointer-events:none; top:0; left:0; right:0; bottom:auto; width:100%; height:14%; z-index:3; overflow:hidden; } #ipoomgoBlackPromo .ipo-bf-hero .ipo-bf-ribbon { left:-7%; width:114%; top:2cqw; font-size:1.5cqw; padding:1cqw 0; letter-spacing:.1cqw; } #ipoomgoBlackPromo .ipo-bf-hero .ipo-bf-ribbon-pink { transform:rotate(-3deg); box-shadow:0 0 2cqw #ff54ac44; } #ipoomgoBlackPromo .ipo-bf-hero .ipo-bf-ribbon-outline { transform:rotate(3deg); font-size:1.3cqw; padding:1.1cqw 0; } #ipoomgoBlackPromo .ipo-bf-hero .ipo-bf-ribbon-pink .ipo-bf-ribbon-track { animation-duration:21s; } #ipoomgoBlackPromo .ipo-bf-hero .ipo-bf-ribbon-outline .ipo-bf-ribbon-track { animation-duration:27s; } #ipoomgoBlackPromo .ipo-bf-festival-glow { position:absolute; width:65%; height:80%; border-radius:50%; filter:blur(5cqw); mix-blend-mode:screen; pointer-events:none; } #ipoomgoBlackPromo .ipo-bf-glow-left { left:-36%; top:10%; background:radial-gradient(ellipse,#e62c914a,transparent 65%); animation:ipo-bf-glow-travel-left 12s ease-in-out infinite alternate; } #ipoomgoBlackPromo .ipo-bf-glow-right { right:-32%; bottom:-5%; background:radial-gradient(ellipse,#a5adf44a 0%,#f84db629 32%,transparent 66%); animation:ipo-bf-glow-travel-right 14s ease-in-out infinite alternate; } #ipoomgoBlackPromo .ipo-bf-festival-beam { position:absolute; top:-20%; width:19%; height:135%; transform-origin:50% 0; pointer-events:none; mix-blend-mode:screen; opacity:.55; filter:blur(1.2cqw); mask-image:linear-gradient(#000,transparent 90%); } #ipoomgoBlackPromo .ipo-bf-beam-left { left:3%; background:linear-gradient(90deg,transparent,#ff65bc20 30%,#ffd0ee66 49%,#ff58b52b 60%,transparent); transform:rotate(-18deg); animation:ipo-bf-beam-sweep-left 11s ease-in-out infinite alternate; } #ipoomgoBlackPromo .ipo-bf-beam-right { right:5%; background:linear-gradient(90deg,transparent,#e1e5ff22 30%,#e1e5ff80 50%,#d6c0ee33 60%,transparent); transform:rotate(20deg); animation:ipo-bf-beam-sweep-right 13s ease-in-out infinite alternate; } #ipoomgoBlackPromo .ipo-bf-silver-burst { position:absolute; font-family:Arial; line-height:1; background:linear-gradient(135deg,#fff 5%,#828ba8 30%,#fff 48%,#9aa4bc 66%,#fff 90%); background-clip:text; -webkit-background-clip:text; color:transparent; filter:drop-shadow(0 0 .7cqw #e8d5f444); animation:ipo-bf-burst-float 7s ease-in-out infinite alternate; } #ipoomgoBlackPromo .ipo-bf-burst-left { font-size:6cqw; left:9%; top:43%; --burst-rotation:-15deg; } #ipoomgoBlackPromo .ipo-bf-burst-right { font-size:4cqw; right:13%; top:62%; --burst-rotation:17deg; animation-delay:-3s; } #ipoomgoBlackPromo .ipo-bf-burst-small { font-size:2.4cqw; left:21%; bottom:8%; --burst-rotation:-12deg; animation-delay:-1.5s; } #ipoomgoBlackPromo .ipo-bf-festival-particle { position:absolute; left:var(--x); top:var(--y); width:.35cqw; height:.35cqw; min-width:2px; min-height:2px; border-radius:50%; background:#ffabdc; box-shadow:0 0 .8cqw #ff8dcd,0 0 1.3cqw #ff8dcd55; opacity:.6; animation:ipo-bf-particle-rise var(--duration) var(--delay) ease-in-out infinite; } #ipoomgoBlackPromo .ipo-bf-festival-particle:nth-of-type(even) { background:#e9edff; box-shadow:0 0 1cqw #dbe6ff; } @media (max-width:750px) { #ipoomgoBlackPromo .ipo-bf-hero .ipo-bf-ribbon { top:2cqw; font-size:2cqw; padding:1.2cqw 0; } #ipoomgoBlackPromo .ipo-bf-hero .ipo-bf-ribbon-outline { font-size:1.7cqw; padding:1.35cqw 0; } #ipoomgoBlackPromo .ipo-bf-hero .ipo-bf-chrome-orbit { left:-9cqw; bottom:15%; width:29cqw; height:17cqw; } #ipoomgoBlackPromo .ipo-bf-hero .ipo-bf-burst-left { left:2%; top:50%; font-size:4cqw; } #ipoomgoBlackPromo .ipo-bf-hero .ipo-bf-burst-right { right:3%; top:70%; font-size:3cqw; } #ipoomgoBlackPromo .ipo-bf-festival-particle { opacity:.5; } #ipoomgoBlackPromo .ipo-bf-hero .ipo-bf-hero-inner { overflow:visible; } } @media (prefers-reduced-motion:reduce) { #ipoomgoBlackPromo .ipo-bf-festival-particle { opacity:.45; } #ipoomgoBlackPromo .ipo-bf-festival-beam { opacity:.3; } #ipoomgoBlackPromo .ipo-bf-hero h1 { opacity:1; transform:none; } } #ipoomgoBlackPromo .ipo-bf-hero .ipo-bf-hero-korean-tagline { display:inline-flex; align-items:center; justify-content:center; border:1px solid #d8b4ca66; background:#17101c88; color:#fff; border-radius:100px; font-size:clamp(16px,2.8cqw,23px); line-height:1.35; gap:.45em; letter-spacing:-.03em; } #ipoomgoBlackPromo .ipo-bf-hero-korean-tagline>span { font-weight:500; color:#fff; } #ipoomgoBlackPromo .ipo-bf-hero-korean-tagline>b { font-weight:900; color:#ffacd6; } #ipoomgoBlackPromo .ipo-bf-hero .ipo-bf-event-date { padding:1.3cqw 3.6cqw; } #ipoomgoBlackPromo .ipo-bf-promo-main .ipo-bf-hero-inner { display:block; justify-content:normal; align-items:normal; text-align:left; } #ipoomgoBlackPromo img { max-width:100%; vertical-align:middle; } #ipoomgoBlackPromo .ipo-bf-back-top { position:static; display:flex; margin:16px 16px 16px auto; } #ipoomgoBlackPromo [id] { scroll-margin-top:90px; } #ipoomgoBlackPromo dialog { max-width:calc(100vw - 32px); } #ipoomgoBlackPromo .ipo-bf-promo-main { background:#fff; margin:0 auto; --campaign-canvas:1080px; --campaign-content:750px; --campaign-gutter:max(0px,calc((100% - 750px)/2)); width:100%; } #ipoomgoBlackPromo .ipo-bf-content-section { padding-left:max(22px,calc((100% - 750px)/2)); padding-right:max(22px,calc((100% - 750px)/2)); } #ipoomgoBlackPromo .ipo-bf-hero-inner { width:100%; margin:0 auto; } #ipoomgoBlackPromo a { -webkit-tap-highlight-color:transparent; color:inherit; text-decoration:none; font-family:inherit; line-height:inherit; } #ipoomgoBlackPromo h1 { font-family:inherit; } #ipoomgoBlackPromo button { font-family:inherit; line-height:1.5; } #ipoomgoBlackPromo button span { visibility:visible; } #ipoomgoBlackPromo button:disabled { cursor:default; } #ipoomgoBlackPromo .ipo-bf-benefit-card { color:#fff; min-width:0; box-shadow:none; } @media (max-width:600px) { #ipoomgoBlackPromo .ipo-bf-content-section { padding-left:22px; padding-right:22px; } } @media (max-width:360px) { #ipoomgoBlackPromo .ipo-bf-content-section { padding-left:18px; padding-right:18px; } } #ipoomgoBlackPromo .ipo-bf-hero .ipo-bf-hero-korean-tagline { padding:.45em .85em; } #ipoomgoBlackPromo .ipo-bf-hero-korean-tagline span, #ipoomgoBlackPromo .ipo-bf-hero-korean-tagline b { font-size:inherit; line-height:inherit; } #ipoomgoBlackPromo .ipo-bf-sticky-nav { gap:0; align-items:stretch; justify-content:flex-start; margin-inline:auto; padding-inline:0; scrollbar-width:none; z-index:100; width:100%; } #ipoomgoBlackPromo .ipo-bf-sticky-nav>a { flex:1 0 120px; flex-direction:column; justify-content:center; padding:17px 5px 14px; line-height:1.4; color:#111; background:#fff; flex-basis:130px; } #ipoomgoBlackPromo .ipo-bf-tab-sub { display:block; font-weight:500; white-space:nowrap; } #ipoomgoBlackPromo .ipo-bf-tab-name { display:block; font-weight:800; white-space:nowrap; } #ipoomgoBlackPromo .ipo-bf-sticky-nav>a.ipo-bf-active .ipo-bf-tab-sub { color:#e74174; } #ipoomgoBlackPromo .ipo-bf-openrun { border-radius:16px; color:#fff; overflow:hidden; position:relative; box-shadow:none; } #ipoomgoBlackPromo .ipo-bf-pack-block { border:1px solid #e7417440; border-top:5px solid #e74174; border-radius:12px; } #ipoomgoBlackPromo .ipo-bf-welcome-section .ipo-bf-first-order { margin-top:0; } @media (max-width:600px) { #ipoomgoBlackPromo .ipo-bf-sticky-nav>a { padding:12px 5px 10px; } #ipoomgoBlackPromo .ipo-bf-openrun { border-radius:12px; } } #ipoomgoBlackPromo .ipo-bf-content-section>* { max-width:750px; box-sizing:border-box; } #ipoomgoBlackPromo footer { padding-inline:max(18px,calc((100% - 750px)/2)); } #ipoomgoBlackPromo h2 { margin:0; text-align:center; font-family:inherit; font-size:var(--heading-size); font-weight:900; line-height:1.3; letter-spacing:-2px; color:#fff; overflow-wrap:anywhere; } #ipoomgoBlackPromo .ipo-bf-section-header { text-align:center; } #ipoomgoBlackPromo .ipo-bf-content-section { padding-inline:max(30px,calc((100% - 750px)/2 + 30px)); padding-block:60px; } #ipoomgoBlackPromo .ipo-bf-benefit-overview, #ipoomgoBlackPromo .ipo-bf-welcome-section { color:#fff; } #ipoomgoBlackPromo .ipo-bf-category-section { background:#242424; color:#fff; } #ipoomgoBlackPromo .ipo-bf-coupon-section { background:#000; color:#fff; } #ipoomgoBlackPromo .ipo-bf-coupon-block { padding:24px 0; background:transparent; border:0; box-shadow:none; border-radius:0; } #ipoomgoBlackPromo .ipo-bf-openrun { background:#000; border:0; padding:0; } #ipoomgoBlackPromo .ipo-bf-coupon-terms { color:#ddd; } #ipoomgoBlackPromo .ipo-bf-welcome-section { background:#242424; } #ipoomgoBlackPromo .ipo-bf-attendance-section { background:#080808; color:#fff; text-align:center; } #ipoomgoBlackPromo .ipo-bf-attendance-section .ipo-bf-black-button { background:#e74174; color:#fff; } #ipoomgoBlackPromo .ipo-bf-section-desc { color:#ccc; } #ipoomgoBlackPromo .ipo-bf-category-tile { background:#111; color:#fff; border-color:#444; align-items:center; min-width:0; } #ipoomgoBlackPromo .ipo-bf-category-symbol { color:#ff8ab1; } @media (max-width:600px) { #ipoomgoBlackPromo .ipo-bf-content-section { padding-inline:30px; padding-block:42px; } #ipoomgoBlackPromo .ipo-bf-coupon-block { padding:18px 0; } #ipoomgoBlackPromo .ipo-bf-openrun { padding:0; } } #ipoomgoBlackPromo .ipo-bf-benefit-card strong { font-family:inherit; white-space:normal; letter-spacing:-1px; } #ipoomgoBlackPromo .ipo-bf-benefit-card:nth-child(5) strong { font-family:inherit; white-space:normal; font-size:27px; line-height:1.35; letter-spacing:-1px; font-weight:900; color:#fff; margin:0; } #ipoomgoBlackPromo .ipo-bf-confirmed-category-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } #ipoomgoBlackPromo .ipo-bf-category-coupon-note { font-size:16px; color:#bbb; text-align:center; margin-top:12px; } #ipoomgoBlackPromo .ipo-bf-category-tile:after { content:"상품 보기 →"; font-size:16px; color:#ff9cbd; margin-top:16px; } #ipoomgoBlackPromo #ipo-bf-benefitsTitle { font-family:inherit; font-size:var(--heading-size); font-weight:900; line-height:1.3; letter-spacing:-2px; color:#fff; overflow-wrap:anywhere; } #ipoomgoBlackPromo .ipo-bf-unified-sub { display:block; font-size:var(--subheading-size); font-weight:900; line-height:1.35; letter-spacing:-1.5px; color:#e74174; margin-bottom:12px; } #ipoomgoBlackPromo .ipo-bf-benefit-card strong { font-size:27px; line-height:1.35; font-weight:900; color:#fff; margin:0; } #ipoomgoBlackPromo .ipo-bf-black-button { justify-content:center; gap:12px; } #ipoomgoBlackPromo .ipo-bf-section-desc { font-size:18px; line-height:1.7; } #ipoomgoBlackPromo .ipo-bf-hero-korean-tagline { font-size:22px !important; flex-wrap:wrap; } @media (max-width:600px) { #ipoomgoBlackPromo { --heading-size:clamp(28px,7.33vw,44px); --subheading-size:clamp(22px,5.6vw,34px); } #ipoomgoBlackPromo .ipo-bf-benefit-card { padding-inline:4px; overflow-wrap:anywhere; } } #ipoomgoBlackPromo .ipo-bf-benefit-overview { background:#101112; } #ipoomgoBlackPromo .ipo-bf-benefit-arrow { bottom:8px; right:12px; display:none; } #ipoomgoBlackPromo .ipo-bf-empty-section { min-height:100px; scroll-margin-top:110px; } #ipoomgoBlackPromo .ipo-bf-welcome-section { padding-block:0; } #ipoomgoBlackPromo .ipo-bf-attendance-section.ipo-bf-empty-section { padding-block:40px; } #contentWrapper:has(.ipoomgo-plan), #contentWrap:has(.ipoomgo-plan), #content:has(.ipoomgo-plan) { width:100%; max-width:1080px; min-width:0; margin-inline:auto; padding:0; float:none; overflow:visible !important; } #productPlan.ipoomgo-plan { width:100%; max-width:1080px; margin:auto; overflow:visible !important; } .ipoomgo-plan * { box-sizing:border-box; } .ipoomgo-plan .page-body, .ipoomgo-plan .visual { width:100%; margin:0; padding:0; overflow:visible !important; } .ipoomgo-plan .bn_area, .ipoomgo-plan .prd-list { max-width:750px; margin:auto; padding:30px; } .ipoomgo-plan .bn_area:empty { display:none; } .ipoomgo-plan .bn_area img { max-width:100%; height:auto; } @media (max-width:600px) { .ipoomgo-plan .plst td { width:50%; padding-inline:6px; } } #ipoomgoBlackPromo .ipo-bf-promo-main { max-width:1080px; margin-inline:auto; overflow:visible; } /* 섹션 배경색: HTML의 section에 style="--section-bg:색상" 지정 */ #ipoomgoBlackPromo .ipo-bf-section-shell { width:100%; max-width:1080px; background:var(--section-bg,#000) !important; padding:0 !important; margin:0; border:0; box-shadow:none; scroll-margin-top:110px; } #ipoomgoBlackPromo .ipo-bf-content-inner { width:100%; max-width:750px; margin:0 auto; box-sizing:border-box; padding:80px 0; } #ipoomgoBlackPromo .ipo-bf-empty-section .ipo-bf-content-inner { position:relative; min-height:100px; padding-block:40px; } #ipoomgoBlackPromo .ipo-bf-hero { width:100%; max-width:1080px; padding:0; overflow:hidden; } #ipoomgoBlackPromo .ipo-bf-hero .ipo-bf-hero-inner { width:100%; margin:auto; } #ipoomgoBlackPromo .ipo-bf-benefit-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; } #ipoomgoBlackPromo .ipo-bf-benefit-card { align-items:center; justify-content:center; border:0; display:flex; flex-direction:column; gap:8px; min-height:140px; padding:22px 10px; border-radius:22px; background:#333; } #ipoomgoBlackPromo .ipo-bf-benefit-label { font-size:18px; font-weight:800; line-height:1.4; color:#ff7aa8; } #ipoomgoBlackPromo .ipo-bf-sticky-nav { position:sticky; top:var(--ipo-sticky-top,130px); max-width:1080px; margin:0; padding:0; background:#222; display:block; overflow:visible; } #ipoomgoBlackPromo .ipo-bf-tab-inner { display:flex; width:100%; max-width:750px; margin:auto; overflow-x:auto; scrollbar-width:none; } #ipoomgoBlackPromo .ipo-bf-tab-inner>a { flex:1 0 125px; display:flex; flex-direction:column; justify-content:center; gap:5px; padding:18px 6px; border-bottom:3px solid transparent; background:#222; color:#fff; text-decoration:none; font-size:16px; text-align:center; } #ipoomgoBlackPromo .ipo-bf-tab-inner>a.ipo-bf-active { border-color:#e74174; color:#ff7aa8; } #ipoomgoBlackPromo .ipo-bf-tab-sub { font-size:16px; color:inherit; } #ipoomgoBlackPromo .ipo-bf-tab-name { font-size:18px; color:inherit; } @media (max-width:600px) { #ipoomgoBlackPromo .ipo-bf-content-inner { padding:42px 30px; } #ipoomgoBlackPromo .ipo-bf-benefit-grid { gap:8px; } #ipoomgoBlackPromo .ipo-bf-benefit-card { min-height:125px; padding:16px 5px; border-radius:16px; gap:6px; } #ipoomgoBlackPromo .ipo-bf-benefit-label { word-break:keep-all; letter-spacing:-.7px; font-size:16px; overflow-wrap:anywhere; } #ipoomgoBlackPromo .ipo-bf-benefit-card strong, #ipoomgoBlackPromo .ipo-bf-benefit-card:nth-child(5) strong { word-break:keep-all; overflow-wrap:anywhere; font-size:16px; letter-spacing:-.7px; } } /* 애니메이션 */ @keyframes ipo-bf-glow-drift { to { transform:translate(15%,20%); opacity:.35; } } @keyframes ipo-bf-orbit-breathe { to { transform:rotate(-19deg); opacity:.4; } } @keyframes ipo-bf-spark-turn { to { transform:rotate(360deg); } } @keyframes ipo-bf-impact-left { from { opacity:0; transform:translateX(-100px) rotate(-5deg); } to { opacity:1; transform:translateX(0) rotate(0); } } @keyframes ipo-bf-impact-right { from { opacity:0; transform:translateX(100px) rotate(5deg); } to { opacity:1; transform:translateX(0) rotate(0); } } @keyframes ipo-bf-impact-stamp { from { opacity:0; transform:scale(1.3) translateY(20px); } to { opacity:1; transform:scale(1) translateY(0); } } @keyframes ipo-bf-impact-spin { to { transform:rotate(360deg); } } @keyframes ipo-bf-ribbon-move { to { transform:translateX(-50%); } } @keyframes ipo-bf-ring-drift { to { transform:translateX(-50%) rotate(-10deg) scale(1.08); } } @keyframes ipo-bf-orb-float { to { transform:translateY(55px) rotate(12deg); } } @keyframes ipo-bf-light-pass { 0%,20% { left:-300px; } 70%,100% { left:140%; } } @keyframes ipo-bf-clock-seconds { to { transform:rotate(360deg); } } @keyframes ipo-bf-alarm-rock { 0%,68%,100% { transform:rotate(-12deg); } 72% { transform:rotate(-16deg); } 76% { transform:rotate(-8deg); } 80% { transform:rotate(-15deg); } 84% { transform:rotate(-9deg); } 88% { transform:rotate(-12deg); } } @keyframes ipo-bf-chrome-float { to { transform:translateY(-2cqw) rotate(-25deg); } } @keyframes ipo-bf-selected-title-enter { from { opacity:0; transform:translateY(3cqw) scale(.9); } to { opacity:1; transform:translateY(0) scale(1); } } @keyframes ipo-bf-full-orbit-float { from { transform:translateY(0) rotate(-35deg); } to { transform:translateY(-2cqw) rotate(-20deg); } } @keyframes ipo-bf-chrome-turn { to { transform:rotate(360deg); } } @keyframes ipo-bf-sphere-drift { to { transform:translate(-1cqw,-2.5cqw); } } @keyframes ipo-bf-glow-travel-left { to { transform:translate(7%,8%); opacity:.65; } } @keyframes ipo-bf-glow-travel-right { to { transform:translate(-6%,-8%); opacity:.55; } } @keyframes ipo-bf-beam-sweep-left { to { transform:rotate(-2deg); opacity:.35; } } @keyframes ipo-bf-beam-sweep-right { to { transform:rotate(2deg); opacity:.4; } } @keyframes ipo-bf-burst-float { from { transform:translateY(0) rotate(0); } to { transform:translateY(-1.5cqw) rotate(var(--burst-rotation)); } } @keyframes ipo-bf-particle-rise { 0% { transform:translate(0,1cqw); opacity:0; } 20% { opacity:.75; } 80% { opacity:.55; } 100% { transform:translate(1cqw,-6cqw); opacity:0; } } @keyframes ipo-bf-alarm-ring { 0%,65%,100% { transform:rotate(0); } 70%,80% { transform:rotate(-10deg); } 75%,85% { transform:rotate(10deg); } } @keyframes ipo-bf-ticket-shine { 0%,55% { transform:translateX(-120%); } 90%,100% { transform:translateX(120%); } } /* 기존 활성 표시를 초기화하고 현재 분류 표시로 통일 */ #productPlan #planCategoryNav a.on { background: #fff; color: #444; font-weight: 400; } #productPlan #planCategoryNav a:hover, #productPlan #planCategoryNav a.ipo-current-category { background: #222; color: #fff; font-weight: 600; } #ipo-bf-openrun .ipo-bf-content-inner { position:relative; } #ipo-bf-openrun .ipo-coupon-status { position:absolute; z-index:20; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; box-sizing:border-box; padding:16px; background:rgba(0,0,0,.5); color:#fff; text-align:center; border-radius:12px; cursor:default; } #ipo-bf-openrun .ipo-coupon-status[hidden] { display:none !important; } #ipo-bf-openrun .ipo-coupon-status strong { color:#fff; font-size:48px; font-weight:800; line-height:1.1; } #ipo-bf-openrun .ipo-coupon-status span { color:#fff; font-size:20px; line-height:1.4; } @media (max-width:750px) { #ipo-bf-openrun .ipo-coupon-status { gap:8px; padding:12px; } #ipo-bf-openrun .ipo-coupon-status strong { font-size:24px; } #ipo-bf-openrun .ipo-coupon-status span { font-size:16px; } } /* 기존 상품 영역 위치 유지 */ #ipoBlackDealProducts .ipo-deal-area { position: absolute; } /* 오픈 예정: 상품 영역 안에 겹쳐서 표시 */ #ipoBlackDealProducts .ipo-deal-coming { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 10; width: 100%; height: 100%; min-height: 0; margin: 0; padding: 20px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; text-align: center; background: #111111; color: #ffffff; overflow: hidden; } #ipoBlackDealProducts .ipo-deal-coming[hidden] { display: none !important; } #ipoBlackDealProducts .ipo-deal-coming-inner { width: 100%; max-width: 100%; } #ipoBlackDealProducts .ipo-deal-coming-label { display: block; color: #ff4e91; font-size: 15px; font-weight: 800; letter-spacing: 1px; margin-bottom: 20px; } #ipoBlackDealProducts .ipo-deal-coming-title { margin: 0 0 18px; color: #ffffff; font-size: clamp(24px, 4vw, 38px); font-weight: 800; line-height: 1.3; } #ipoBlackDealProducts .ipo-deal-coming-title strong { color: #ff4e91; } #ipoBlackDealProducts .ipo-deal-coming-desc { margin: 0 0 22px; color: #eeeeee; font-size: 17px; line-height: 1.6; } #ipoBlackDealProducts .ipo-deal-coming-countdown { display: inline-block; padding: 13px 25px; background: #292929; border: 1px solid #555555; border-radius: 8px; color: #ffffff; font-size: clamp(22px, 4vw, 32px); font-weight: 800; letter-spacing: 2px; font-variant-numeric: tabular-nums; } @media (max-width: 767px) { #ipoBlackDealProducts .ipo-deal-coming { padding: 15px; } #ipoBlackDealProducts .ipo-deal-coming-label { font-size: 12px; margin-bottom: 12px; } #ipoBlackDealProducts .ipo-deal-coming-desc { font-size: 14px; margin-bottom: 15px; } #ipoBlackDealProducts .ipo-deal-coming-countdown { padding: 10px 15px; } } /* 속도 개선: 지연 로딩 중에도 배너 비율 유지 */ #ipoomgoBlackPromo .ipo-bf-content-inner > img, #ipoBlackDealProducts > .ipo-deal-background { max-width: 100%; height: auto; } /* 큰 블러 레이어의 렌더링 비용 축소 */ #ipoomgoBlackPromo .ipo-bf-festival-glow { filter: blur(2cqw); } #ipoomgoBlackPromo .ipo-bf-festival-beam { filter: blur(.5cqw); } /* 화면 밖에서는 현재 모션 위치에서 일시 정지 */ #ipoomgoBlackPromo .ipo-performance-paused *, #ipoomgoBlackPromo .ipo-performance-paused *::before, #ipoomgoBlackPromo .ipo-performance-paused *::after { animation-play-state: paused !important; } /* BASIC css end */