@charset "utf-8";
/* TOUN28-AIX Team. YMJ. 2020727 */

/* HTML초기화 */
@import url("2.0_reset.css");

body {-webkit-text-size-adjust:none; -webkit-text-size-adjust:auto; -webkit-text-size-adjust:120%;}
body, html {min-width:320px; min-height:667px; width:100%; height:100%; margin:0; padding:0; color:#1b1b1b; font-family:"Pretendard Variable", "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-weight:400; background:#fff;}

/* page loader */
.page_loader {position:fixed; top:0; left:0; width:100%; height:100%; background:#1b1b1b; z-index:9999;}
.page_loader dl {position:absolute; top:calc(50% - 50px); left:50%;transform:translate(-50%,-50%);}
.page_loader dl dt {display:block; margin:0 0 7px 0; color:#fff; font-size:12px; font-weight:300; text-align:center; letter-spacing:5px;}
.page_loader dl dd {display:block; overflow:hidden; width:200px; height:30px; text-indent:-999px; background:url("https://toun28.s3.ap-northeast-2.amazonaws.com/renew/logo_white.svg") no-repeat center center/auto 100%;}
.page_loader .loader {display:block; position:absolute; top:50%; left:calc(50% - 100px); width:10px; height:10px; margin:15px auto; color:#fff; border-radius:50%; box-sizing:border-box; animation:page_loader 2s linear infinite; transform:translate(-50%,-50%);}
@keyframes page_loader {
0% {box-shadow:0px 0 rgba(255,255,255,0),0px 0 rgba(255,255,255,0),0px 0 rgba(255,255,255,0),0px 0 rgba(255,255,255,0);}
12% {box-shadow:100px 0 white,0px 0 rgba(255,255,255,0),0px 0 rgba(255,255,255,0),0px 0 rgba(255,255,255,0);}
25% {box-shadow:110px 0 white,100px 0 white,0px 0 rgba(255,255,255,0),0px 0 rgba(255,255,255,0);}
36% {box-shadow:120px 0 white,110px 0 white,100px 0 white,0px 0 rgba(255,255,255,0);}
50% {box-shadow:130px 0 white,120px 0 white,110px 0 white,100px 0 white;}
62% {box-shadow:200px 0 rgba(255,255,255,0),130px 0 white,120px 0 white,110px 0 white;}
75% {box-shadow:200px 0 rgba(255,255,255,0),200px 0 rgba(255,255,255,0),130px 0 white,120px 0 white;}
87% {box-shadow:200px 0 rgba(255,255,255,0),200px 0 rgba(255,255,255,0),200px 0 rgba(255,255,255,0),130px 0 white;}
100% {box-shadow:200px 0 rgba(255,255,255,0),200px 0 rgba(255,255,255,0),200px 0 rgba(255,255,255,0),200px 0 rgba(255,255,255,0);}
}

/* skipNav */
.skip a {display:block; overflow:hidden; position:absolute; top:0; left:0; width:1px; height:1px; color:#fff; text-align:center; background:#1b1b1b; z-index:1000;}
.skip a:focus,.skip a:active {position:relative; width:100%; height:auto; padding:10px;}

/* header-sample */
#header.sample_code {position:relative; width:100%; background:#fff;}
#header.sample_code .inner {width:100%;}
#header.sample_code .inner .top_banner {display:flex; overflow:hidden; align-items:center; justify-content:center; width:100%; height:36px; padding:0 20px; box-sizing:border-box; background:#1b1b1b;}
#header.sample_code .inner .top_banner p {overflow:hidden; margin:0; color:#fff; font-size:1rem; font-weight:500; line-height:1; white-space:nowrap; text-overflow:ellipsis;}
#header.sample_code .inner .sta {position:relative; display:flex; align-items:center; justify-content:center; width:100%; height:65px; padding:0 20px; box-sizing:border-box; border-bottom:1px solid #f2f2f2; background:#fff;}
#header.sample_code .inner .sta h1 {display:flex; align-items:center; justify-content:center; width:100px; margin:0;}
#header.sample_code .inner .sta h1 img {display:block; width:100%; height:auto;}
#header.sample_code .inner .sta .gnb {position:absolute; top:50%; left:20px; width:22px; height:22px; transform:translateY(-50%); cursor:pointer;}
#header.sample_code .inner .sta .gnb img {display:block; width:100%; height:100%; object-fit:contain;}
#header.sample_code .inner .sta .util {position:absolute; top:50%; right:20px; width:58px; height:24px; transform:translateY(-50%); cursor:pointer;}
#header.sample_code .inner .sta .util img {display:block; width:100%; height:100%; object-fit:contain;}

/* -------------------- mobile -------------------- */
@media screen and (max-width:780px) {
/* header-sample */
#header.sample_code .inner .top_banner {padding:0 16px;}
#header.sample_code .inner .top_banner p {font-size:0.85rem;}
#header.sample_code .inner .sta {height:55px; padding:0 16px;}
#header.sample_code .inner .sta .gnb {left:16px;}
#header.sample_code .inner .sta .util {right:16px;}
}


/* ──────────────────────────────────────────────────────────────
   담은 뒤 잠깐 떠오르는 하단 장바구니 바
   스토어 목록에서 시작했지만 마이페이지 홈도 같은 것을 쓴다(담당자 지시).
   여러 화면이 함께 쓰는 부품이므로 공통 자리에 둔다 — 한 곳만 고치면 두 화면이 같이 바뀐다.
   맨 아래 게이지는 주문금액 사은품(5ㆍ10ㆍ15만원) 까지 얼마나 왔는지를 보여 준다.
   ────────────────────────────────────────────────────────────── */
/* ===== 담은 뒤 잠깐 떠오르는 하단 바 ===== */
.st_cartbar {position:fixed; left:50%; bottom:0; z-index:1400; width:100%; max-width:640px; border-radius:20px 20px 0 0; background:#ffffff; box-shadow:0 -6px 24px rgba(0,0,0,.10); overflow:hidden; transform:translate(-50%, 110%); visibility:hidden; pointer-events:none; transition:transform .26s cubic-bezier(.22,.61,.36,1), visibility .26s;}
.st_cartbar.is_show {transform:translate(-50%, 0); visibility:visible; pointer-events:auto;}
.st_cartbar_in {padding:clamp(12px,3vw,16px) clamp(14px,3.6vw,20px) calc(clamp(14px,3.4vw,18px) + env(safe-area-inset-bottom));}
.st_cartbar_ship {display:block; margin:0; padding:clamp(10px,2.4vw,13px) 14px; border-radius:10px; background:#f3f3f1; color:#1b1b1b; font-size:clamp(12px,2vw,14px); font-weight:400; text-align:center; word-break:keep-all;}
.st_cartbar_ship b {font-weight:700;}
.st_cartbar_row {display:flex; align-items:center; justify-content:space-between; gap:clamp(12px,3vw,18px); margin-top:clamp(10px,2.6vw,14px);}
.st_cartbar_l {flex:1 1 auto; min-width:0;}
.st_cartbar_price {display:block; color:#1b1b1b; font-size:clamp(21px,4vw,26px); font-weight:800; letter-spacing:-0.02em; line-height:1.2;}
.st_cartbar_note {display:block; margin-top:4px; color:#1b43c8; font-size:clamp(12px,2vw,14px); font-weight:500;}
.btn_st_cartgo {position:relative; flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; height:clamp(48px,8vw,54px); padding:0 clamp(18px,4.4vw,26px); border-radius:10px; background:#1b43c8; color:#ffffff; font-size:clamp(14px,2.3vw,16px); font-weight:700; text-decoration:none;}
.btn_st_cartgo:active {transform:scale(.995);}
.st_cartbar_n {position:absolute; right:-7px; top:-9px; display:inline-flex; align-items:center; justify-content:center; min-width:24px; height:24px; padding:0 6px; border:2px solid #ffffff; border-radius:12px; background:#1b1b1b; color:#ffffff; font-size:12px; font-style:normal; font-weight:700; line-height:1;}
.st_cartbar_gauge {height:4px; background:#e9eaee;}
.st_cartbar_gauge span {display:block; width:0; height:100%; background:#1b43c8; transition:width .3s ease;}
@media (prefers-reduced-motion:reduce) {
  .st_cartbar {transition:none;}
  .st_cartbar_gauge span {transition:none;}
}