<meta charset="utf-8"><!-- 아트배송 이용 가이드 (PC 전용 · 1200px) : 에디터 소스 입력용 PC 1200px · MO 767px 이하 유동형(660px 기준) / JS 미사용, CSS 애니메이션만 사용 PC 화면 = PC 목업만, MO 화면 = MO 목업만 노출 (.g-only-pc / .g-only-mo) 색상 = 기존 아트배송 안내 퍼블 기준 (sky #00A0F0 · navy #2B57A3 · yellow #FFD200 · ink #1B1F27) 목업 개인정보 : 홍길동 · 010-0000-0000 · [배송가능지역 주소] 형식으로 마스킹 탭 상단 고정 : 3개 사이트 공통 — 가장 높은 GNB(A-RT, 약 96px) 아래에 고정. 탭 윗부분이 GNB에 가리면 --tab-top 값을 키우고, 탭 위 흰 띠가 너무 두꺼우면 줄이세요 --><style type="text/css">.artg{--tab-top:100px;--blue:#2B57A3;--blue2:#2B57A3;--navy:#1B1F27;--sky:#00A0F0;--art:#2B57A3;--yellow:#FFD200;--ink:#1B1F27;--txt:#333;--sub:#666;--line:#E3E5EA;--red:#E5252A;--hl:#00A0F0; max-width:1200px;margin:0 auto;font-family:'Pretendard','Noto Sans KR','Noto Sans CJK KR','Malgun Gothic',sans-serif;color:var(--txt);letter-spacing:-0.03em;word-break:keep-all;line-height:1.4;background:#fff;overflow:visible}.artg *{box-sizing:border-box;margin:0;padding:0}.artg ul{list-style:none}.artg a{text-decoration:none;color:inherit}.artg [id]{scroll-margin-top:calc(64px + var(--tab-top))}.artg .blind{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}/* ---------------- 탭 상단 고정 ---------------- *//* 상위 박스에 overflow:hidden(특히 전체폭 래퍼의 overflow-x:hidden)이 있으면 sticky 가 풀림 → 가이드를 감싼 모든 상위 박스는 visible 로 열고, 가로 넘침은 body 에서 clip 으로만 막음 (전체폭 배경 유지) */body *:has(.artg){overflow:visible!important}body:has(.artg){overflow-x:clip!important}/* 탭 고정 위치 : 3개 사이트(그랜드스테이지·ABC마트·A-RT) GNB 높이가 달라, 가장 높은 GNB(96px) 기준으로 고정. GNB가 더 낮은 사이트에서 생기는 GNB~탭 사이 틈은 흰색 띠로 채워 아래 내용이 비치지 않게 함 (GNB가 탭보다 위에 노출) */.artg .g-tab::before{content:"";position:absolute;left:calc(50% - 50vw);width:100vw;bottom:100%;height:var(--tab-top);background:#fff;pointer-events:none}/* ---------------- HERO ---------------- */.g-hero{position:relative;z-index:11;overflow:hidden;padding:104px 40px 100px;text-align:center;color:var(--ink); background:linear-gradient(180deg,#B7E0F8 0%,#D3ECFA 70%,#DDEFFA 100%)}.g-hero__eyebrow{display:inline-block;padding:6px 18px;border-radius:999px;background:#fff;box-shadow:0 4px 12px rgba(0,0,0,.10);color:var(--art);font-size:17px;font-weight:800;animation:g-up .7s ease-out both}.g-logo{margin-top:16px;font-size:92px;font-weight:900;font-style:italic;line-height:1.05;letter-spacing:-0.06em; -webkit-text-stroke:4px var(--navy);paint-order:stroke fill;text-shadow:4px 6px 0 var(--navy);animation:g-up .7s .1s ease-out both}.g-logo .y{color:var(--yellow)} .g-logo .w{color:#fff}.g-hero__title{margin-top:10px;font-size:44px;font-weight:800;color:var(--ink);animation:g-up .7s .2s ease-out both}.g-hero__txt{position:relative;z-index:1}/* 메인 이미지 주변 장식 그래픽 (가운데 텍스트 기준 좌우 배치) */.g-hero__deco{position:absolute;inset:0;pointer-events:none}.g-hero__deco .d{position:absolute;display:block}.g-hero__deco svg{display:block;width:100%;height:auto}.d-box{right:14%;top:50%;width:150px;margin-top:-62px;animation:g-dash 2.6s cubic-bezier(.2,.8,.2,1) infinite}.d-box .spd{transform-box:fill-box;animation:g-lines 2.6s ease-out infinite}.d-bolt{left:16%;top:50%;width:96px;margin-top:-52px;animation:g-zap 2.6s cubic-bezier(.2,.8,.2,1) 1.3s infinite}.d-sp{width:18px;animation:g-pop 3.2s ease-in-out infinite}.d-sp.s1{left:27%;top:16%}.d-sp.s2{left:8%;bottom:18%;width:14px;animation-delay:.6s}.d-sp.s3{right:29%;top:14%;width:15px;animation-delay:1.2s}.d-sp.s4{right:6%;bottom:18%;width:20px;animation-delay:1.8s}.d-sp.s5{left:9%;top:16%;width:12px;animation-delay:2.4s}.d-sp.s6{right:32%;bottom:14%;width:13px;animation-delay:2.9s}.g-band{position:relative;z-index:11;padding:30px 20px;background:#fff;text-align:center}.g-band strong{display:block;font-size:22px;font-weight:800;color:var(--ink)}.g-band strong em{font-style:normal;color:var(--sky)}.g-band p{margin-top:6px;font-size:17px;color:var(--sub)}.artg .g-tab{position:-webkit-sticky;position:sticky;top:var(--tab-top);z-index:10;display:flex;background:var(--art)}.g-tab a{position:relative;flex:1;padding:20px 8px;text-align:center;font-size:18px;font-weight:700;color:#fff}.g-tab a + a::before{content:"";position:absolute;left:0;top:50%;height:16px;margin-top:-8px;border-left:1px solid rgba(255,255,255,.35)}.g-tab a:hover{background:#23498C}/* ---------------- SECTION ---------------- */.g-sec{padding:90px 60px 100px}.artg .g-only-mo{display:none}.g-sec--gray{background:#EEF1F6}.g-sec--blue{background:#fff}.g-sec--gray2{background:#fff}.g-h{text-align:center;font-size:36px;font-weight:800;color:var(--blue2)}.g-sub{margin-top:10px;text-align:center;font-size:18px;color:#555}/* 소개 카드 */.g-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:44px}.g-card{padding:30px 20px 28px;border-radius:14px;background:#fff;text-align:center}.artg .g-card__ic{display:block;width:72px;height:72px;margin:0 auto 14px;padding:0;line-height:0}.artg .g-card__ic svg{display:block;width:100%;height:100%}.artg .g-card__t{display:block;margin:0;padding:0;font-size:20px;font-weight:800;line-height:1.3;color:var(--ink)}.artg .g-card__d{margin:8px 0 0;padding:0;font-size:15px;color:#555;line-height:1.55}.artg .g-card__d small{display:block;margin-top:4px;font-size:13px;color:#999}.g-when{margin-top:20px;padding:30px 36px;border-radius:14px;background:#fff}.g-when h4{font-size:19px;font-weight:800;color:var(--ink)}.g-when ul{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:16px}.g-when li{padding:20px 22px;border-radius:10px;background:#F3F5F9}.g-when li span{display:block;font-size:15px;color:#666}.g-when li strong{display:block;margin-top:6px;font-size:21px;font-weight:800}.g-when li.t1{background:#E5F5FE} .g-when li.t1 strong{color:var(--sky)}.g-when li.t2{background:#E8EDF8} .g-when li.t2 strong{color:var(--art)}.g-when li.t3 strong{color:#444}.g-when p{margin-top:14px;font-size:14px;color:#888}/* STEP */.g-step{margin-top:70px}.g-step:first-of-type{margin-top:50px}.g-step__hd{text-align:center}.g-pill{display:inline-block;padding:6px 18px;border-radius:999px;background:var(--blue);color:#fff;font-size:16px;font-weight:800;letter-spacing:0}.g-step__tit{margin-top:12px;font-size:26px;font-weight:800;color:var(--ink)}.g-step__desc{margin-top:8px;font-size:17px;color:#555;line-height:1.55}.g-step__desc em{font-style:normal;font-weight:700;color:var(--blue)}.g-tip{display:inline-flex;align-items:center;gap:6px;margin-top:12px;padding:7px 14px;border-radius:999px;background:#FFF0F0;font-size:14px;font-weight:700;color:var(--red)}.g-tip svg{width:16px;height:16px;flex:none}.g-step__body{display:flex;justify-content:center;align-items:stretch;gap:28px;margin-top:30px}.g-col{flex:1;max-width:520px;min-width:0;display:flex;flex-direction:column}.g-col > .m-pc{flex:1}.g-col--one{max-width:640px}.g-step__body--mo{gap:60px}.g-step__body--mo .g-col{flex:none;width:330px}.m-phone{font-size:16px}.g-col__cap{margin-bottom:12px;text-align:center;font-size:16px;font-weight:800;color:var(--ink)}.g-col__sub{margin:-4px 0 12px;text-align:center;font-size:14px;color:#666}.g-col__sub b{color:var(--ink);margin-right:2px}.g-col__cap--gap{margin:56px 0 0}.g-step__body--tight{margin-top:16px}.g-flow{flex:none;align-self:center;width:44px;height:44px;margin-top:30px}.m-mk{position:absolute;right:.7em;top:50%;width:1.6em;height:1.6em;margin-top:-.8em;border-radius:50%;background:var(--ink);color:#fff;font-size:.8em;font-weight:800;line-height:1.6em;text-align:center}.m-drop__add.hl{border-radius:.2em;background:#fff}.g-step__body--stack{flex-direction:column;align-items:center;gap:44px}.g-step__body--stack .g-col{width:100%}.g-col__cap b{display:inline-block;min-width:22px;height:22px;margin-right:6px;border-radius:50%;background:var(--ink);color:#fff;font-size:13px;line-height:22px;text-align:center;vertical-align:1px}.g-res{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:999px;font-size:16px;font-weight:800;color:#fff}.g-res--ok{background:var(--sky)} .g-res--no{background:var(--red)}.g-res svg{width:16px;height:16px}.g-col__note{margin-top:14px;text-align:center;font-size:15px;color:#555;line-height:1.55}.g-col__note strong{color:var(--ink)}.artg .g-mt{margin-top:36px}.artg .g-mo-br{display:none}.g-col__case{display:inline-block;margin-bottom:4px;font-weight:700;color:var(--ink)}.g-arrow{display:block;width:34px;height:34px;margin:40px auto -30px}/* ---------------- MOCKUP 공통 ---------------- */.m{font-size:15px;color:#222;text-align:left;letter-spacing:-0.02em}/* 강조 : 하늘색 테두리 + 아래 그림자로 살짝 떠 있는 효과 (정적) */.hl{position:relative;z-index:1;border-radius:.5em;background:#fff;box-shadow:0 0 0 2px var(--hl),0 8px 16px -2px rgba(0,0,0,.18);transform:translateY(-2px)}.rd{display:inline-block;width:1.15em;height:1.15em;border:1px solid #ccc;border-radius:50%;background:#fff;vertical-align:-.2em;flex:none}.rd.on{border:.33em solid #111}.rd.off{background:#e6e6e6;border-color:#ddd}.q{display:inline-flex;align-items:center;justify-content:center;width:1.2em;height:1.2em;border:1px solid #333;border-radius:50%;font-size:.8em;font-weight:700;flex:none}.artlogo{font-weight:900;color:#1E3B9E;letter-spacing:-0.04em}.artlogo i{display:inline-block;width:.45em;height:.8em;margin:0 .02em;vertical-align:-.05em;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 18'%3E%3Cpath d='M7 0 1 10h4l-2 8 7-11H6l1-7z' fill='%23FFC400'/%3E%3C/svg%3E") no-repeat center/contain}.bub{display:inline-flex;align-items:center;padding:.45em .9em;border:1px solid #ccc;border-radius:999px;background:#fff;font-size:.88em;white-space:nowrap}.bub b{color:var(--red);font-weight:700}.sel{position:relative;display:block;padding:.75em 2.4em .75em .9em;border:1px solid #ccc;background:#fff;font-size:.92em;color:#999;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sel::after{content:"";position:absolute;right:1em;top:50%;margin-top:-.2em;border:.32em solid transparent;border-top:.4em solid #222;border-bottom:0}.sel.val{color:#222}.err{display:block;margin-top:.35em;font-size:.86em;color:var(--red)}.mask{color:var(--art);font-weight:600}/* PC 목업 */.m-pc{border-radius:12px;background:#fff;border:1px solid #E3E8EF;box-shadow:0 10px 30px rgba(0,0,0,.08);overflow:hidden}.m-pc__bar{display:flex;gap:.4em;padding:.7em 1em;background:#F1F2F5}.m-pc__bar i{width:.6em;height:.6em;border-radius:50%;background:#D5D8DE}.m-pc__body{position:relative;padding:1.1em 1.6em 1.4em}.m-pc__body.fade::before{content:"";position:absolute;left:0;right:0;top:0;height:1.4em;background:linear-gradient(#fff,rgba(255,255,255,0))}.m-row{display:flex;gap:1em;padding:.9em 0}.m-row + .m-row{border-top:1px solid #F0F0F0}.m-row > dt{width:6.4em;flex:none;font-size:.95em;font-weight:600;color:#222;padding-top:.1em}.m-row > dd{flex:1;min-width:0}.m-opt{display:flex;align-items:center;flex-wrap:wrap;gap:.45em;margin-bottom:.7em;font-size:.95em}.m-opt:last-child{margin-bottom:0}.m-opt .dim{font-size:.88em;color:#999}.m-opt.hl{margin:-.3em -.4em .4em;padding:.3em .4em}.m-sizes{display:flex;flex-wrap:wrap;gap:.3em}.m-sizes span{width:3.6em;padding:.35em 0;border:1px solid #ddd;text-align:center;font-size:.86em;color:#777}.m-sizes span.on{border-color:#111;color:#111}.m-btns{display:flex;gap:.5em;margin-top:1em}.m-btns span{flex:1;padding:.85em 0;text-align:center;color:#fff;font-weight:700;font-size:.95em;background:#111}.m-btns span:first-child{background:#666}.sel.open{border-color:#111}.sel.open::after{border-top:0;border-bottom:.4em solid #222;margin-top:-.25em}.m-drop{position:relative;margin-top:-1px;padding-right:1.1em;border:1px solid #111;border-top:0;background:#fff;font-size:.92em}.m-drop li{padding:.8em 1em;background:#F7F7F7;border-top:1px solid #E3E3E3;color:#333;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.m-drop li:first-child{border-top:0}.m-drop li.hl{border-radius:.2em;background:#fff}.m-drop__add{padding:.8em 0;border-top:1px solid #E3E3E3;background:#F7F7F7;text-align:center;font-weight:700;color:#111}.m-drop__bar{position:absolute;right:.3em;top:.6em;width:.45em;height:55%;border-radius:1em;background:#9A9A9A}/* PC 팝업 목업 */.m-pop--dim{position:relative}.m-dimmed{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:1em;background:rgba(0,0,0,.45)}.m-alert{width:86%;max-width:21em;padding:1.4em 1.2em 1.1em;border-radius:.8em;background:#fff;color:var(--ink);text-align:center;box-shadow:0 8px 24px rgba(0,0,0,.2)}.m-alert__txt{font-size:.95em;font-weight:600;color:var(--ink)}.m-dimmed--mo{background:rgba(120,120,120,.45);padding:1.2em}.m-ios{width:88%;padding:1.3em 1em 1em;border-radius:1em;background:#fff;text-align:center;box-shadow:0 10px 30px rgba(0,0,0,.18)}.m-ios p{font-size:1em;font-weight:600;color:var(--ink)}.m-ios span{display:block;margin-top:1em;padding:.7em 0;border-radius:.5em;background:var(--sky);font-size:1em;font-weight:700;color:#fff}.m-full{position:relative}.g-col__sub--gap{margin-top:36px!important}.m-alert__ok{display:block;margin:1.1em 0 0;padding:.65em 0;border-radius:.4em;background:var(--sky);color:#fff;text-align:center;font-size:.9em;font-weight:700}.m-pop{padding:1.4em 1.6em 1.6em}.m-pop__hd{display:flex;justify-content:space-between;align-items:center;padding-bottom:.9em;border-bottom:2px solid #111;font-size:1.15em;font-weight:700}.m-pop__hd i{font-style:normal;font-size:1.2em;font-weight:300}.m-field{display:flex;gap:.8em;margin-top:.9em;align-items:flex-start}.m-field > b{width:6em;flex:none;padding-top:.6em;font-size:.9em;font-weight:600;white-space:nowrap}.m-field > b::after{content:"*";margin-left:.1em;color:var(--red)}.m-field > div{flex:1;min-width:0;display:flex;flex-direction:column;gap:.35em}.m-in{display:flex;gap:.35em}.m-in span{flex:1;padding:.6em .8em;border:1px solid #ddd;font-size:.88em;color:#222;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.m-in span.gr{background:#F5F5F5;color:#888}.m-in em{flex:none;padding:.6em .8em;border:1px solid #111;font-style:normal;font-size:.85em;font-weight:700;white-space:nowrap}.m-save{display:block;width:9em;margin:1.4em auto 0;padding:.75em 0;background:#111;color:#fff;text-align:center;font-weight:700;font-size:.95em}/* MO 폰 목업 */.m-phone{width:19em;margin:0 auto;padding:.55em;border-radius:2.4em;background:#D3D8DF}.m-scr{position:relative;height:36em;border-radius:1.9em;background:#fff;overflow:hidden;display:flex;flex-direction:column;font-size:.86em}.m-top{display:flex;align-items:center;justify-content:space-between;padding:1.6em 1.1em .8em;background:#A9AEB5}.m-top svg{width:1.4em;height:1.4em}.m-top .r{display:flex;gap:1em}.m-dim{height:5.5em;background:#B3B8BF}.m-sheet{flex:1;position:relative;margin-top:-1.4em;padding:.6em 1.1em 0;border-radius:1.2em 1.2em 0 0;background:#fff;display:flex;flex-direction:column}.m-sheet::before{content:"";display:block;width:3em;height:.3em;margin:0 auto .8em;border-radius:1em;background:#ccc}.m-sheet h5{font-size:1em;font-weight:700;margin-bottom:.6em}.m-sheet .m-opt{font-size:.95em;margin-bottom:.55em}.m-addr{display:flex;align-items:center;justify-content:space-between;gap:.5em;margin:.2em 0 .7em}.m-addr p{font-size:.92em;color:#444;min-width:0}.m-addr em{flex:none;padding:.5em .7em;border:1px solid #111;font-style:normal;font-size:.85em;font-weight:600}.m-addr.hl{margin:-.3em -.4em .5em;padding:.3em .4em}.m-hr{border-top:1px solid #eee;margin:.6em 0 .7em}.m-grid{display:grid;grid-template-columns:repeat(5,1fr);border-left:1px solid #e3e3e3;border-top:1px solid #e3e3e3;margin-top:.4em}.m-grid span{padding:.55em 0;border-right:1px solid #e3e3e3;border-bottom:1px solid #e3e3e3;text-align:center;font-size:.86em;color:#777}.m-grid span.on{box-shadow:inset 0 0 0 2px #111;color:#111}.m-foot{margin:auto -1.1em 0;border-top:2px solid #111}.m-scr--auto{height:auto}.m-scr--auto .m-foot{margin-top:1.2em}.m-foot .t{display:flex;justify-content:space-between;align-items:center;padding:.75em 1.1em;font-weight:700;font-size:.95em}.m-foot .t b{color:var(--red);font-size:1.25em;font-weight:800}.m-foot .t b small{font-size:.65em;color:#111;font-weight:500}.m-foot .m-btns{margin:0;padding:0 1.1em 1.1em;gap:.4em}.m-foot .m-btns span{padding:.8em 0}/* 배송지 변경 화면 */.m-full{flex:1;display:flex;flex-direction:column;padding:1.7em 1.1em 1.1em}.m-full__hd{display:flex;justify-content:space-between;align-items:center;font-size:1.1em;font-weight:700;padding-bottom:.8em}.m-full__hd i{font-style:normal;font-size:1.3em;font-weight:300}.m-tabs{display:flex;margin-bottom:.2em;border-bottom:2px solid #111}.m-tabs span{flex:1;padding:.7em 0;border:1px solid #ddd;border-bottom:0;text-align:center;font-size:.92em;color:#888}.m-tabs span.on{margin-bottom:-2px;padding-bottom:calc(.7em + 2px);border:2px solid #111;border-bottom:0;background:#fff;color:#111;font-weight:700}.m-req{margin:.5em 0 -.3em;text-align:right;font-size:.78em;color:var(--red)}.m-list li{display:flex;gap:.6em;padding:.85em 0;border-bottom:1px solid #eee}.m-list li .rd{margin-top:.1em}.m-list li div{min-width:0;font-size:.9em;line-height:1.55;color:#666}.m-list li div b{display:block;color:#111;font-size:1.05em}.m-list li div b em{font-style:normal;color:var(--red);margin-right:.2em}.m-list li.dis div{color:#aaa} .m-list li.dis div b{color:#aaa}.m-list li.hl{margin:.3em -.4em 0;padding:.6em .4em;border-bottom:0}.m-black{display:block;margin-top:auto;padding:.85em 0;background:#111;color:#fff;text-align:center;font-weight:700}.m-form .m-field{display:block;margin-top:.8em}.m-form .m-field > b{display:block;width:auto;padding:0 0 .35em}/* ---------------- 유의사항 ---------------- */.g-notice{padding:60px 60px 70px;background:#F7F7F7;border-top:1px solid #E2E2E2;color:#555}.g-notice h3{display:flex;align-items:center;gap:8px;font-size:21px;font-weight:700;color:var(--ink)}.g-notice h3 svg{width:22px;height:22px}.g-notice ul{margin-top:18px}.g-notice li{position:relative;padding-left:14px;font-size:15px;line-height:1.8}.g-notice li::before{content:"·";position:absolute;left:2px;font-weight:700}.g-notice li.pt{color:var(--red);font-weight:700}/* ---------------- 애니메이션 ---------------- */@keyframes g-up{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}@keyframes g-dash{0%{transform:translateX(-26px) skewX(-10deg);opacity:.4}16%{transform:translateX(8px) skewX(6deg);opacity:1}26%{transform:translateX(-2px) skewX(-1deg)}34%,100%{transform:translateX(0) skewX(0);opacity:1}}@keyframes g-lines{0%{transform:translateX(26px);opacity:0}14%{transform:translateX(-4px);opacity:.9}50%{transform:translateX(-14px);opacity:0}100%{opacity:0}}@keyframes g-zap{0%{transform:translate(18px,-18px) scale(.85);opacity:.3;filter:brightness(1)}14%{transform:translate(-3px,3px) scale(1.1);opacity:1;filter:brightness(1.25)}24%{transform:translate(1px,-1px) scale(.98);filter:brightness(1)}32%,100%{transform:none;opacity:1}}@keyframes g-pop{0%{transform:scale(0);opacity:0}12%{transform:scale(1.2);opacity:1}20%{transform:scale(1);opacity:1}78%{transform:scale(1);opacity:1}90%,100%{transform:scale(0);opacity:0}}/* ========================================================= MO (767px 이하) — 660px 기준 유동형 ========================================================= *//* PC : 섹션 배경을 화면 좌우 끝까지 확장 (내용·목업 위치는 그대로) */@media (min-width:768px){ .artg{overflow:visible;background:transparent} .g-hero{border-image:linear-gradient(180deg,#B7E0F8 0%,#D3ECFA 70%,#DDEFFA 100%) fill 0 / 0 / 0 100vw} .g-band{border-image:linear-gradient(#fff,#fff) fill 0 / 0 / 0 100vw} .g-tab{border-image:linear-gradient(#2B57A3,#2B57A3) fill 0 / 0 / 0 100vw} .g-sec--gray{border-image:linear-gradient(#EEF1F6,#EEF1F6) fill 0 / 0 / 0 100vw} .g-sec--blue,.g-sec--gray2{border-image:linear-gradient(#fff,#fff) fill 0 / 0 / 0 100vw} .g-notice{border-top:0;border-image:linear-gradient(#E2E2E2 0,#E2E2E2 1px,#F7F7F7 1px) fill 0 / 0 / 0 100vw}}/* 태블릿 폭(768~1100px) : 메인 그래픽이 문구와 겹치지 않도록 */@media (min-width:768px) and (max-width:1100px){.d-box{right:3%;width:118px;margin-top:-50px}.d-bolt{left:4%;width:78px;margin-top:-42px}}</style><div class="artg" lang="ko"><!-- ===== HERO ===== --><div class="g-hero"><div aria-hidden="true" class="g-hero__deco"><span class="d d-box"><svg viewbox="0 30 245 190"> <g class="spd" opacity=".3" stroke="#2B57A3" stroke-linecap="round" stroke-width="6"><line x1="14" x2="58" y1="112" y2="112"></line><line x1="30" x2="62" y1="134" y2="134"></line><line x1="8" x2="56" y1="156" y2="156"></line></g> <polygon fill="#FFE780" points="150,36 236,79 150,122 64,79"></polygon> <polygon fill="#FFC400" points="64,79 150,122 150,196 64,153"></polygon> <polygon fill="#E8A600" points="150,122 236,79 236,153 150,196"></polygon> <polygon fill="#fff" opacity=".55" points="99,53 185,96 201,88 115,45"></polygon> <polygon fill="#fff" opacity=".3" points="185,96 201,88 201,162 185,170"></polygon> <polygon fill="#fff" opacity=".85" points="86,128 112,141 112,160 86,147"></polygon> </svg></span> <span class="d d-bolt"><svg viewbox="0 0 120 124"> <path d="M73 10 23 70h45l-5 40 50-60H68l5-40z" fill="#E8A600"></path> <path d="M66 4 16 64h45l-5 40 50-60H61l5-40z" fill="#FFC400"></path> <path d="M66 4 16 64h14L68 12z" fill="#FFE780"></path> <path d="M61 44h14L58 66l3-22z" fill="#FFE780" opacity=".7"></path> </svg></span> <span class="d d-sp s1"><svg viewbox="0 0 20 20"><path d="M10 0C11 7 13 9 20 10 13 11 11 13 10 20 9 13 7 11 0 10 7 9 9 7 10 0z" fill="#FFD200"></path></svg></span> <span class="d d-sp s2"><svg viewbox="0 0 20 20"><path d="M10 0C11 7 13 9 20 10 13 11 11 13 10 20 9 13 7 11 0 10 7 9 9 7 10 0z" fill="#fff"></path></svg></span> <span class="d d-sp s3"><svg viewbox="0 0 20 20"><path d="M10 0C11 7 13 9 20 10 13 11 11 13 10 20 9 13 7 11 0 10 7 9 9 7 10 0z" fill="#fff"></path></svg></span> <span class="d d-sp s4"><svg viewbox="0 0 20 20"><path d="M10 0C11 7 13 9 20 10 13 11 11 13 10 20 9 13 7 11 0 10 7 9 9 7 10 0z" fill="#FFD200"></path></svg></span> <span class="d d-sp s5"><svg viewbox="0 0 20 20"><path d="M10 0C11 7 13 9 20 10 13 11 11 13 10 20 9 13 7 11 0 10 7 9 9 7 10 0z" fill="#fff"></path></svg></span> <span class="d d-sp s6"><svg viewbox="0 0 20 20"><path d="M10 0C11 7 13 9 20 10 13 11 11 13 10 20 9 13 7 11 0 10 7 9 9 7 10 0z" fill="#FFD200"></path></svg></span></div><div class="g-hero__txt"><p class="g-hero__eyebrow">오늘 주문, 오늘 도착</p><h2 class="g-logo"><span class="y">아트</span><span class="w">배송</span></h2><p class="g-hero__title">이용 가이드</p></div></div><div class="g-band"><strong>오전 11시까지 주문하면 <em>오늘 저녁 도착!</em></strong><p>멤버십 회원 전용 빠른배송, 이용 방법까지 한눈에 확인하세요</p></div><nav class="g-tab"><a href="#artg-about">아트배송이란</a> <a class="g-only-pc" href="#artg-pc">이용 방법</a> <a href="#artg-notice">유의사항</a></nav><!-- ===== 1. 아트배송이란 ===== --><div class="g-sec g-sec--gray" id="artg-about"><h3 class="g-h">아트배송이란</h3><p class="g-sub">기다림 없이 오늘 받는<br class="g-mo-br" />멤버십 회원 전용 빠른배송 서비스예요</p><ul class="g-cards"> <li class="g-card"><span class="g-card__ic"><svg aria-hidden="true" viewbox="0 0 72 72"><circle cx="36" cy="36" fill="#E5F5FE" r="30"></circle><circle cx="36" cy="36" fill="#fff" r="19" stroke="#00A0F0" stroke-width="4"></circle><path d="M36 25v12l8 5" fill="none" stroke="#1B1F27" stroke-linecap="round" stroke-linejoin="round" stroke-width="4"></path></svg></span><strong class="g-card__t">오늘 저녁 도착</strong> <p class="g-card__d">월~금 오전 11시까지<br /> 주문하면 당일 도착</p> </li> <li class="g-card"><span class="g-card__ic"><svg aria-hidden="true" viewbox="0 0 72 72"><circle cx="36" cy="36" fill="#FFF6CC" r="30"></circle><path d="M36 16c-8.3 0-15 6.5-15 14.6C21 41.5 36 56 36 56s15-14.5 15-25.4C51 22.5 44.3 16 36 16z" fill="#FFD200" stroke="#1B1F27" stroke-linejoin="round" stroke-width="3.5"></path><circle cx="36" cy="31" fill="#fff" r="5.5" stroke="#1B1F27" stroke-width="3"></circle></svg></span><strong class="g-card__t">배송 가능 지역</strong> <p class="g-card__d">서울 · 경기 · 인천 · 충청 · 세종<small>*일부 지역 제외</small></p> </li> <li class="g-card"><span class="g-card__ic"><svg aria-hidden="true" viewbox="0 0 72 72"><circle cx="36" cy="36" fill="#E8EDF8" r="30"></circle><path d="M18 30 36 21l18 9v18l-18 9-18-9z" fill="#fff" stroke="#2B57A3" stroke-linejoin="round" stroke-width="3.5"></path><path d="M18 30l18 9 18-9M36 39v18" fill="none" stroke="#2B57A3" stroke-linejoin="round" stroke-width="3.5"></path><path d="M27 25.5l18 9" stroke="#FFD200" stroke-width="4"></path></svg></span><strong class="g-card__t">배송비 3,000원</strong> <p class="g-card__d">1회 주문 시<br /> 1개 상품 주문 가능</p> </li> <li class="g-card"><span class="g-card__ic"><svg aria-hidden="true" viewbox="0 0 72 72"><circle cx="36" cy="36" fill="#FFE9EA" r="30"></circle><circle cx="36" cy="29" fill="#fff" r="8" stroke="#1B1F27" stroke-width="3.5"></circle><path d="M22 52c1.5-8 7-12 14-12s12.5 4 14 12" fill="#fff" stroke="#1B1F27" stroke-linecap="round" stroke-width="3.5"></path><circle cx="50" cy="22" fill="#E5252A" r="8"></circle><path d="M46.5 22l2.5 2.5 4.5-5" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5"></path></svg></span><strong class="g-card__t">멤버십 회원 전용</strong> <p class="g-card__d">통합 멤버십 회원<br /> 로그인 후 이용 가능</p> </li></ul><div class="g-when"><h4>주문 시간별 도착 예정일</h4><ul> <li class="t1"><span>월~금 00시 ~ 오전 11시 주문</span><strong>오늘 저녁 도착</strong></li> <li class="t2"><span>월~목 오전 11시 이후 주문</span><strong>내일 도착</strong></li> <li class="t3"><span>금 오전 11시 이후 및 주말 주문</span><strong>월요일 도착</strong></li></ul><p>*주문 수량 마감 또는 기상 상태에 따라 발송이 지연되거나 배송이 불가할 수 있습니다.</p></div></div><!-- ===== 2. 이용방법 (PC 전용 : 768px 이상에서만 노출) ===== --><div class="g-sec g-sec--blue g-only-pc" id="artg-pc"><h3 class="g-h">아트배송 이용 방법</h3><p class="g-sub">상품 상세페이지에서 아트배송을 선택하고, 배송지만 등록하면 끝!</p><!-- STEP 1 --><div class="g-step"><div class="g-step__hd"><span class="g-pill">STEP 1</span><p class="g-step__tit">배송방법에서 아트배송 선택</p><p class="g-step__desc">상품 상세페이지 > 배송방법에서 <em>아트배송</em>을 선택해 주세요.</p><p class="g-tip"><svg viewbox="0 0 16 16"><circle cx="8" cy="8" fill="#E5252A" r="7"></circle><path d="M8 4.2v4.6" stroke="#fff" stroke-linecap="round" stroke-width="1.8"></path><circle cx="8" cy="11.4" fill="#fff" r="1"></circle></svg>통합 멤버십 회원 전용 서비스로, 로그인 후 이용할 수 있어요</p></div><div class="g-step__body"><div class="g-col g-col--one"><div class="m m-pc"><div class="m-pc__bar"><i></i><i></i><i></i></div><div class="m-pc__body fade"><dl class="m-row"> <dt>카드혜택</dt> <dd>무이자 할부 ›</dd></dl><dl class="m-row"> <dt>배송방법</dt> <dd> <p class="m-opt"><span class="rd"></span>일반배송 <span class="dim">(무료배송)</span></p> <p class="m-opt hl"><span class="rd on"></span><span class="artlogo">아트<i></i>배송</span><span class="q">?</span><span class="bub">지금 주문하면 <b>오늘</b> 도착</span></p> <span class="sel">배송지주소를 선택해주세요.</span> <p class="m-opt" style="margin-top:.7em"><span class="rd"></span>매장픽업</p> </dd></dl><dl class="m-row"> <dt>사이즈</dt> <dd> <div class="m-sizes"><span>240</span><span>250</span><span>255</span><span>260</span><span>265</span><span>270</span></div> </dd></dl></div></div></div></div></div><svg aria-hidden="true" class="g-arrow" viewbox="0 0 34 34"><circle cx="17" cy="17" fill="#2B57A3" r="17"></circle><path d="M11 14l6 6 6-6" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"></path></svg> <!-- STEP 2 --><div class="g-step"><div class="g-step__hd"><span class="g-pill">STEP 2</span><p class="g-step__tit">배송지 등록</p><p class="g-step__desc">등록된 배송지를 <em>목록에서 바로 선택</em>하거나,<br /><em>신규 배송지를 등록</em>해 주세요.</p></div><div class="g-step__body"><div class="g-col"><p class="g-col__cap"><b>A</b>등록된 배송지 선택</p><div class="m m-pc"><div class="m-pc__bar"><i></i><i></i><i></i></div><div class="m-pc__body"><dl class="m-row"> <dt>배송방법</dt> <dd> <p class="m-opt"><span class="rd on"></span><span class="artlogo">아트<i></i>배송</span><span class="q">?</span><span class="bub">지금 주문하면 <b>오늘</b> 도착</span></p> <span class="sel val open">배송지주소를 선택해주세요.</span> <div class="m-drop"> <ul> <li class="hl">[기본] 배송주소 1</li> <li>배송주소 2</li> <li>배송주소 3</li> </ul> <p class="m-drop__add hl">+ 신규 배송지 등록</p> <i class="m-drop__bar"></i></div> </dd></dl></div></div><p class="g-col__note">등록된 배송지를 바로 선택하거나,<br />신규 배송지를 등록하세요.</p></div><svg aria-hidden="true" class="g-flow" viewbox="0 0 44 44"><circle cx="22" cy="22" fill="#2B57A3" r="22"></circle><path d="M18 14l8 8-8 8" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="3.2"></path></svg><div class="g-col"><p class="g-col__cap"><b>B</b>신규 배송지 등록</p><div class="m m-pc"><div class="m-pc__bar"><i></i><i></i><i></i></div><div class="m-pop"><p class="m-pop__hd">신규 배송지 추가 <i>?</i></p><div class="m-field"><b>수령인</b><div><p class="m-in"><span>홍길동</span></p></div></div><div class="m-field"><b>휴대폰 번호</b><div><p class="m-in"><span>010-0000-0000</span></p></div></div><div class="m-field"><b>주소</b><div><p class="m-in"><span class="gr">우편번호</span><em>우편번호 찾기</em></p><p class="m-in"><span class="gr"> </span></p><p class="m-in"><span> </span></p></div></div><span class="m-save hl">저장</span></div></div><p class="g-col__note"><strong>신규 배송지 등록</strong> 클릭 시 팝업이 열려요.<br />새로운 배송지 정보를 입력하고 저장해 주세요.</p></div></div></div><svg aria-hidden="true" class="g-arrow" viewbox="0 0 34 34"><circle cx="17" cy="17" fill="#2B57A3" r="17"></circle><path d="M11 14l6 6 6-6" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"></path></svg> <!-- STEP 3 --><div class="g-step"><div class="g-step__hd"><span class="g-pill">STEP 3</span><p class="g-step__tit">배송 가능 지역 확인 후 주문</p><p class="g-step__desc">선택한 배송지가 <em>아트배송 가능 지역</em>인지 바로 확인할 수 있어요.</p></div><div class="g-step__body"><div class="g-col g-col--one"><p class="g-col__cap"><span class="g-res g-res--ok"><svg viewbox="0 0 16 16"><path d="M3.5 8.5l3 3 6-7" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.4"></path></svg>배송 가능 지역</span></p><div class="m m-pc"><div class="m-pc__bar"><i></i><i></i><i></i></div><div class="m-pc__body"><dl class="m-row"> <dt>배송방법</dt> <dd> <p class="m-opt"><span class="rd on"></span><span class="artlogo">아트<i></i>배송</span><span class="q">?</span><span class="bub hl">지금 주문하면 <b>오늘</b> 도착</span></p> <span class="sel val"><span class="mask">[배송가능지역 주소]</span></span> <p class="m-opt" style="margin-top:.7em"><span class="rd"></span>매장픽업</p> </dd></dl><dl class="m-row"> <dt>사이즈</dt> <dd> <div class="m-sizes"><span>240</span><span class="on">250</span><span>255</span><span>260</span><span>265</span><span>270</span></div> </dd></dl></div></div><p class="g-col__note">도착 예정일을 확인하고<br /><strong>장바구니 또는 바로구매</strong>로 주문하세요.</p></div></div><p class="g-col__cap g-col__cap--gap"><span class="g-res g-res--no"><svg viewbox="0 0 16 16"><path d="M4.5 4.5l7 7M11.5 4.5l-7 7" stroke="#fff" stroke-linecap="round" stroke-width="2.4"></path></svg>배송 불가 지역</span></p><div class="g-step__body g-step__body--tight g-step__body--stack"><div class="g-col g-col--one"><div class="m m-pc"><div class="m-pc__bar"><i></i><i></i><i></i></div><div class="m-pc__body"><dl class="m-row"> <dt>배송방법</dt> <dd> <p class="m-opt"><span class="rd on"></span><span class="artlogo">아트<i></i>배송</span><span class="q">?</span><span class="bub">지금 주문하면 <b>오늘</b> 도착</span></p> <span class="sel val"><span class="mask">[배송불가지역 주소]</span></span> <p class="m-opt hl" style="margin:.5em -.4em .6em"><span class="err" style="margin:0">아트배송 서비스가 불가한 지역입니다.</span></p> <p class="m-opt"><span class="rd"></span>매장픽업</p> </dd></dl><dl class="m-row"> <dt>사이즈</dt> <dd> <div class="m-sizes"><span>240</span><span class="on">250</span><span>255</span><span>260</span><span>265</span><span>270</span></div> </dd></dl></div></div><p class="g-col__note"><b class="g-col__case">① 등록된 배송지가 아트배송 불가 지역에 해당하는 경우</b><br />서비스 이용 불가 안내 문구가 노출돼요.</p></div><div class="g-col g-col--one"><div class="m m-pc"><div class="m-pc__bar"><i></i><i></i><i></i></div><div class="m-pop m-pop--dim"><p class="m-pop__hd">신규 배송지 추가 <i>?</i></p><div class="m-field"><b>수령인</b><div><p class="m-in"><span>홍길동</span></p></div></div><div class="m-field"><b>휴대폰 번호</b><div><p class="m-in"><span>010-0000-0000</span></p></div></div><div class="m-field"><b>주소</b><div><p class="m-in"><span class="gr">우편번호</span><em>우편번호 찾기</em></p><p class="m-in"><span class="gr">[배송불가지역 주소]</span></p><p class="m-in"><span>[상세주소]</span></p></div></div><span class="m-save">저장</span><div class="m-dimmed"><div class="m-alert hl"><p class="m-alert__txt">아트배송이 불가능한 주소입니다.</p><span class="m-alert__ok">확인</span></div></div></div></div><p class="g-col__note"><b class="g-col__case">② 신규 배송지를 등록했으나 아트배송 불가 지역에 해당하는 경우</b><br />위 안내가 뜨며 배송지 등록이 불가능해요.</p></div></div></div></div><!-- ===== 유의사항 ===== --><div class="g-notice" id="artg-notice"><h3><svg aria-hidden="true" viewbox="0 0 22 22"><circle cx="11" cy="11" fill="none" r="9.5" stroke="#1B1F27" stroke-width="1.8"></circle><path d="M11 6v6.5" stroke="#1B1F27" stroke-linecap="round" stroke-width="2.2"></path><circle cx="11" cy="15.8" fill="#1B1F27" r="1.3"></circle></svg>아트배송 서비스 유의사항</h3><ul> <li class="pt">아트배송은 통합 멤버십 회원 전용 서비스입니다.</li> <li class="pt">배송 가능 지역(서울, 경기, 인천, 충청, 세종) 중 일부 지역은 배송이 불가할 수 있으며, 정확한 서비스 가능 여부는 배송지 등록을 통해 확인할 수 있습니다.</li> <li>아트배송이 가능한 주문 수량이 마감되는 경우 또는 기상 상태에 따라 발송이 지연되거나 배송이 불가할 수 있습니다.</li> <li>당사 사정에 따라 아트배송 서비스가 불가한 날이 있을 수 있으며, 사전에 공지드립니다.</li> <li>아트배송은 1회 주문 시 한 개의 상품만 주문이 가능하며, 두 개 이상의 상품을 구매하실 경우 한 상품씩 개별로 주문하여 주시기 바랍니다.</li> <li>아트배송 주문 시 무통장 입금 또는 편의점 결제는 주문이 불가하며, 일반 무료배송 쿠폰은 적용이 불가합니다.</li> <li>아트배송 주문완료 후에는 상품 옵션 및 배송지 정보 변경이 불가합니다.</li> <li>상품을 보관하기 어려운 배송지의 경우 자동 반송 처리될 수 있으며, 반송 시 배송비는 고객 부담으로 처리됩니다. (기숙사, 상가 등 출입 제한 또는 분실 우려가 있는 경우 배송 불가)</li> <li>선물하기 주문 시에는 아트배송이 불가합니다.</li> <li>배송 완료 후 교환/반품은 일반배송과 동일한 방식으로 진행되며, 온라인/오프라인 매장 구분 없이 교환/반품/AS 접수가 가능합니다.</li></ul></div></div>
