/* BASIC css start */ /* 기본 레이아웃 */ #contents { position:relative; margin-top:0; padding-top:5rem; box-sizing:border-box; } .plan { position:relative; width:100%; } .plan img { width:100%; } /* 상단 헤더 */ #fix_shop_op { position:fixed; top:0; left:0; width:100%; height:5rem; background:#fff; z-index:10; } .common_title { display:inline-block; width:100%; height:5rem; border-bottom:1px solid #eee; text-align:center; box-sizing:border-box; } .common_title h3 { display:inline-block; height:5rem; margin:0; color:#000; font-size:1.7rem; font-weight:500; line-height:5.3rem; letter-spacing:-0.03rem; } .home { position:absolute; top:1.4rem; left:4.6rem; width:2rem; height:2rem; cursor:pointer; background:url(/design/kichmom/10276/m/common/icon_home.png) 0 0 no-repeat; background-size:2rem; } .share { position:absolute; top:1.7rem; right:1.5rem; width:1.8rem; height:1.8rem; cursor:pointer; background:url(/design/kichmom/10276/ico_share.svg) 0 0 no-repeat; background-size:1.8rem; } .share a { display:block; width:100%; height:100%; } .bt_goBack { position:absolute; top:1.5rem; left:1.5rem; } .bt_goBack .goBack { display:inline-block; width:2rem; height:3rem; background:url(/design/kichmom/10276/m/common/icon_back.png) no-repeat; background-size:1.8rem auto; vertical-align:top; } /* 기획전 이미지 링크 */ .link { position:relative; width:100%; margin:0; padding:0; overflow:hidden; } .link .link-stage { position:relative; width:100%; margin:0; padding:0; } .link .link-stage>img { display:block; width:100%; height:auto; max-width:none; margin:0; padding:0; } .link .link-stage>a { position:absolute; display:block; right:auto; z-index:2; } /* 750px 원본 기준 좌표. 기존 800px 좌표에 750/800을 곱한 값 */ .link .link01 {width: 368px;height: 83px;bottom: 59px;left: 30px;} .link .link02 {width: 368px;height: 83px;bottom: 59px;left: 404px;} /* 이벤트 배너: 모바일 1줄 1개 */ .bn_area { display:flex; flex-wrap:wrap; gap:0.5rem; padding:2em 1.5rem 3.5rem 1.5rem; } .bn_area>a,.bn_area>img { display:block; flex:0 0 100%; width:100%; max-width:100%; box-sizing:border-box; } .bn_area>a img { display:block; width:100%; height:auto; border-radius:0.5rem; } /* 상품 목록 */ .list_shopping2x { padding-top:2rem; } .list_shopping2x li .img_wrap { position:relative; width:100%; height:0; padding-top:100%; overflow:hidden; border-radius:0.6rem; background:rgba(0,0,0,0.01); } .list_shopping2x li .img_wrap img.listPic { position:absolute; top:0; right:0; bottom:0; left:0; width:100%; height:100%; border:0; object-fit:cover; mix-blend-mode:multiply; } .discount_rate { float:left; margin-right:0.5rem; color:#e74174; font-size:1.6rem; font-weight:600; letter-spacing:-0.1rem; } /* 품절 상품: 썸네일 문구 및 가격 대체 */ .plan .list_shopping2x li .img_wrap .plan-soldout-overlay { position:absolute; inset:0; z-index:1; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,0.35); color:#fff; font-size:clamp(1.4rem, 5vw, 2.4rem); font-weight:700; line-height:1.2; letter-spacing:0.06em; } .plan .list_shopping2x .plan-soldout-price .plan-soldout-text { margin:0; color:#999; font-size:1.6rem; font-weight:600; line-height:1.5; } /* 상품 분류 드롭다운: 고정 시 기존 헤더 덮음 */ .plan-category-nav { position:sticky; top:0; z-index:30; width:100%; /*margin:2rem 0 0;*/ padding:0.8rem 1.5rem; background:#fff; box-sizing:border-box; } .plan-category-nav .category-select { position:relative; width:100%; height:4.4rem; padding:0 4rem 0 1.4rem; border:1px solid #ddd; color:#111; background:#fff; font-size:1.5rem; font-weight:500; line-height:4.2rem; text-align:left; box-sizing:border-box; } .plan-category-nav .category-select::after { content:""; position:absolute; top:50%; right:1.5rem; width:0.8rem; height:0.8rem; margin-top:-0.6rem; border-right:1px solid #222; border-bottom:1px solid #222; transform:rotate(45deg); transition:transform 0.2s; } .plan-category-nav.on .category-select::after { margin-top:-0.2rem; transform:rotate(225deg); } .plan-category-nav ul { display:none; position:absolute; top:calc(100% - 0.8rem); left:1.5rem; z-index:31; width:calc(100% - 3rem); max-height:50vh; margin:0; padding:0; overflow-y:auto; border:1px solid #222; border-top:0; background:#fff; list-style:none; box-sizing:border-box; } .plan-category-nav li { margin:0; padding:0; border-bottom:1px solid #eee; } .plan-category-nav li:last-child { border-bottom:0; } .plan-category-nav a { display:block; min-height:4.2rem; padding:0 1.4rem; color:#333; background:#fff; font-size:1.4rem; line-height:4.2rem; text-align:left; text-decoration:none; box-sizing:border-box; } .plan-category-nav a.on { color:#e74174; background:#fafafa; font-weight:600; } /* 상품 분류 제목 */ .p-hd { width:calc(100% - 3rem); margin:4rem 1.5rem 0; padding:1.6rem 0 0; border-top:1px solid #222; text-align:left; box-sizing:border-box; } .p-hd h1 { margin:0; color:#111; font-size:1.7rem; font-weight:500; line-height:1.45; letter-spacing:-0.05rem; } /* 모바일 블랙품고데이 예고 */ #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 .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-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-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; } @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; }} @media (prefers-reduced-motion:reduce) {#ipoomgoBlackPromo { scroll-behavior:auto; } #ipoomgoBlackPromo .ipo-bf-benefit-card { transition:none; }} #ipoomgoBlackPromo * { box-sizing:border-box; } #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 h1 { font-size:89px; line-height:.85; font-weight:900; letter-spacing:-5px; margin:0; position:relative; color:inherit; text-align:center; } @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-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-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; } @media (max-width:700px) {#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-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 .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-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 .ipo-bf-hero-grid { top:6%; } #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-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; } @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%; } @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-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 [id] { scroll-margin-top:90px; } #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 h1 { font-family:inherit; } #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-content-section>* { max-width:750px; box-sizing:border-box; } #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 { color:#fff; } @media (max-width:600px) {#ipoomgoBlackPromo .ipo-bf-content-section { padding-inline:30px; padding-block:42px; }} #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-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-benefit-card strong { font-size:27px; line-height:1.35; font-weight:900; color:#fff; margin:0; } #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-promo-main { max-width:1080px; margin-inline:auto; overflow:visible; } #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-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; } @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%); } } #ipoomgoBlackPromo .ipo-preview { background:radial-gradient(ellipse at 50% 0, #35101e 0, #080808 65%); text-align:center; } #ipoomgoBlackPromo .ipo-preview-inner { max-width:750px; margin:auto; padding:75px 30px 85px; box-sizing:border-box; } #ipoomgoBlackPromo .ipo-preview-tag { color:#fff; font-size:24px; font-weight:700; } #ipoomgoBlackPromo .ipo-preview h2 { margin:18px 0 30px; color:#fff; font-size:54px; font-weight:900; line-height:1.35; text-align:center; } #ipoomgoBlackPromo .ipo-preview h2 em { color:#ff75a4; font-style:normal; } #ipoomgoBlackPromo .ipo-preview-date { border-top:1px solid #444; border-bottom:1px solid #444; padding:20px 0; font-size:25px; font-weight:800; color:#fff; } #ipoomgoBlackPromo #ipo-countdown-label { margin:38px 0 18px; color:#ddd; font-size:20px; } #ipoomgoBlackPromo .ipo-countdown { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; } #ipoomgoBlackPromo .ipo-countdown>div { border:1px solid #4a2834; background:#21151a; border-radius:12px; padding:18px 4px; } #ipoomgoBlackPromo .ipo-countdown strong { display:block; font-size:64px; font-weight:900; color:#fff; line-height:1.2; font-variant-numeric:tabular-nums; } #ipoomgoBlackPromo .ipo-countdown span { display:block; font-size:18px; color:#ffa3c2; margin-top:6px; } #ipoomgoBlackPromo #ipo-preview-status { margin:24px 0 0; font-size:18px; color:#ccc; } #ipoomgoBlackPromo .ipo-bf-benefit-card { cursor:default; transform:none; } #ipoomgoBlackPromo .ipo-bf-content-inner { max-width:750px; padding-left:30px; padding-right:30px; box-sizing:border-box; } @media(max-width:750px) { #ipoomgoBlackPromo .ipo-preview h2 { font-size:clamp(30px,7vw,54px); } #ipoomgoBlackPromo .ipo-countdown strong { font-size:clamp(28px,7vw,64px); } #ipoomgoBlackPromo .ipo-countdown { gap:6px; } #ipoomgoBlackPromo .ipo-countdown span { font-size:16px; } #ipoomgoBlackPromo .ipo-preview-date { font-size:20px; } } @media(prefers-reduced-motion:reduce) { #ipoomgoBlackPromo *, #ipoomgoBlackPromo *::before, #ipoomgoBlackPromo *::after { animation:none!important; transition:none!important; } } /* 인트로 고정 높이 해제 */ #ipoomgoBlackPromo .ipo-bf-hero .ipo-bf-hero-inner { aspect-ratio:auto; height:auto; min-height:0; } /* 타이틀 영역을 실제 콘텐츠 높이에 맞춤 */ #ipoomgoBlackPromo .ipo-bf-hero.ipo-bf-hero-image-title .ipo-bf-hero-grid { position:relative; inset:auto; width:100%; box-sizing:border-box; padding:100px 5% 0; } #ipoomgoBlackPromo .ipo-bf-hero-image-title h1.ipo-bf-campaign-image-heading { height:64cqw; margin:0; } /* 인트로 하단 배경을 다음 영역과 연결 */ #ipoomgoBlackPromo .ipo-bf-hero.ipo-bf-hero-image-title, #ipoomgoBlackPromo .ipo-preview { background:#08080d; } #ipoomgoBlackPromo .ipo-bf-hero::after { content:""; position:absolute; right:0; bottom:0; left:0; height:90px; background:linear-gradient(to bottom, transparent, #08080d); pointer-events:none; z-index:1; } /* 예고 문구와 카운트다운을 위로 당김 */ #ipoomgoBlackPromo .ipo-preview-inner { padding:8px 30px 60px; } #ipoomgoBlackPromo .ipo-preview h2 { margin:12px 0 24px; } #ipoomgoBlackPromo #ipo-countdown-label { margin:24px 0 16px; } /* 하단 안내 문구 확대 */ #ipoomgoBlackPromo #ipo-preview-status { margin:26px 0 0; font-size:26px; font-weight:700; line-height:1.5; color:#fff; word-break:keep-all; } @media (max-width:750px) { #ipoomgoBlackPromo .ipo-bf-hero.ipo-bf-hero-image-title .ipo-bf-hero-grid { padding-top:42px; } #ipoomgoBlackPromo .ipo-preview-inner { padding:8px 30px 45px; } #ipoomgoBlackPromo #ipo-preview-status { font-size:20px; } } .plan .plan-title.ipo-mobile-preview { display:block; width:100%; max-width:100%; padding:0; margin:0; overflow:hidden; background:#08080d; } .plan-title #ipoomgoBlackPromo, .plan-title #ipoomgoBlackPromo .ipo-bf-promo-main { width:100%; max-width:100%; margin:0; box-sizing:border-box; } .plan-title #ipoomgoBlackPromo *, .plan-title #ipoomgoBlackPromo *::before, .plan-title #ipoomgoBlackPromo *::after { box-sizing:border-box; } .plan-title #ipoomgoBlackPromo h1, .plan-title #ipoomgoBlackPromo h2, .plan-title #ipoomgoBlackPromo p { text-align:center; } .plan-title #ipoomgoBlackPromo .ipo-bf-hero .ipo-bf-hero-inner { width:100%; max-width:100%; height:auto; min-height:0; aspect-ratio:auto; } .plan-title #ipoomgoBlackPromo .ipo-bf-hero.ipo-bf-hero-image-title .ipo-bf-hero-grid { position:relative; inset:auto; width:100%; padding:46px 5% 0; } .plan-title #ipoomgoBlackPromo .ipo-bf-hero-image-title h1.ipo-bf-campaign-image-heading { height:64cqw; margin:0; } .plan-title #ipoomgoBlackPromo .ipo-bf-hero-korean-tagline { font-size:16px!important; line-height:1.4; flex-wrap:wrap; justify-content:center; } .plan-title #ipoomgoBlackPromo .ipo-preview-inner { width:100%; max-width:750px; padding:10px 30px 36px; margin:auto; } .plan-title #ipoomgoBlackPromo .ipo-preview-tag { font-size:18px; } .plan-title #ipoomgoBlackPromo .ipo-preview h2 { font-size:clamp(28px,6.5vw,48px); line-height:1.35; margin:12px 0 24px; word-break:keep-all; } .plan-title #ipoomgoBlackPromo #ipo-countdown-label { font-size:18px; margin:22px 0 14px; } .plan-title #ipoomgoBlackPromo .ipo-countdown { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; } .plan-title #ipoomgoBlackPromo .ipo-countdown>div { min-width:0; padding:14px 2px; } .plan-title #ipoomgoBlackPromo .ipo-countdown strong { font-size:clamp(28px,8vw,52px); line-height:1.2; } .plan-title #ipoomgoBlackPromo .ipo-countdown span { font-size:16px; } .plan-title #ipoomgoBlackPromo #ipo-preview-status { font-size:20px; line-height:1.5; word-break:keep-all; } .plan-title #ipoomgoBlackPromo .ipo-bf-content-inner { width:100%; max-width:750px; margin:auto; padding:36px 30px; } .plan-title #ipoomgoBlackPromo #ipo-bf-benefitsTitle { font-size:clamp(26px,6vw,42px); line-height:1.3; word-break:keep-all; } .plan-title #ipoomgoBlackPromo .ipo-bf-section-header { margin-bottom:22px; } .plan-title #ipoomgoBlackPromo .ipo-bf-benefit-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; } .plan-title #ipoomgoBlackPromo .ipo-bf-benefit-card { min-width:0; min-height:110px; height:auto; padding:14px 5px; border-radius:12px; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; } .plan-title #ipoomgoBlackPromo .ipo-bf-benefit-card span, .plan-title #ipoomgoBlackPromo .ipo-bf-benefit-card strong { font-size:16px; line-height:1.4; white-space:normal; word-break:keep-all; overflow-wrap:anywhere; } @media(prefers-reduced-motion:reduce) { .plan-title #ipoomgoBlackPromo *, .plan-title #ipoomgoBlackPromo *::before, .plan-title #ipoomgoBlackPromo *::after { animation:none!important; transition:none!important; } } /* BASIC css end */