@charset "utf-8";

/*
* File       : site-custom.css
* Author     : B-WORKER
*      
 * SUMMARY:
 * 0) ROOT
 * 1) WRAP
 * 2) SITE CUSTOM 
    - 사이트 전반적으로 함께 쓰이는 속성
	- 메인, 서브 함께 쓰이는 속성
*/

/* **************************************** *
 * font set
 * **************************************** */
body{padding-top: 90rem; font-size:var(--default);color:var(--b-default);/*font-weight: 300;*/line-height: 1.5;overflow: visible !important;}
body, input, textarea, button, select,
h1, h2, h3, h4, h5, h6,
p, span, a, li, td, th,
label, legend, caption,
blockquote, figcaption {
  font-family: "Pretendard", '맑은 고딕', '돋움', Dotum, '굴림', Gulim, Sans-serif !important;
}
* {word-break: keep-all !important;}

@media (max-width:860px){
	body{font-size:16rem;}
	body,
	p,
	li,
	a{font-family:-apple-system, BlinkMacSystemFont, Sans-serif;}
}

@media (max-width:540px){
	body{letter-spacing: -0.1rem;font-size: 15rem;}
	p {line-height: 1.5;}
	* {letter-spacing: -0.2rem;}
}

/* **************************************** *
 * global root
 * **************************************** */
 :root {
    /* 포인트 */
	--c-primary: #F5464D;
	--c-secondary: rgba(245, 70, 77, .07); 	

    /* title / body */
	--b-01: #222222;
	--b-02: #666666;
	--b-03: #999999;
	--b-title:#231815;
	--b-default:#444;
	--b-light01:rgba(0,0,0,.5);
	--b-light02:#b1b1b1;

	--w: #fff;

	/* border */
	--br-default: #e1e1e1;
	--br-dark: var(--op-b10);

	/* background-color */
	--bg-default: #F8F8F8;
	--bg-light: #FFF8F8;
	--bg-dark: var(--b-title);
	--bg-kakao:#FFDE00;
	--bg-kakao-hover:#FFCC00;

	/* shadow */
	--box-shadow: 20rem 20rem 30rem 0 #FFEAEB;
	--btn-shadow: 5rem 7rem 12rem 0 #FFEAEB;

	--lang-ko:"Pretendard";
	--lang-en:'Paperozi';

	/* 폰트사이즈 */
	--default:17rem;

	--font-45:45rem;
	--font-38:38rem;
    --font-32:32rem;
    --font-27:27rem;
    --font-24:24rem;
	--font-22:22rem;
    --font-19:19rem;
	--font-17:17rem;
	--font-16:16rem;
    --font-15:15rem;
    --font-13:13rem;

	/* 간격 */    
    --space150:150rem;
    --space140:140rem;
    --space130:130rem;
    --space120:120rem;
    --space110:110rem;
    --space100:100rem;
    --space80:80rem;
    --space60:60rem;
    --space50:50rem;

	/* 투명도 블랙 */
    --op-b10:rgba(0,0,0,.1);
    --op-b20:rgba(0,0,0,.2);
    --op-b30:rgba(0,0,0,.3);
    --op-b40:rgba(0,0,0,.4);
    --op-b50:rgba(0,0,0,.5);
    --op-b60:rgba(0,0,0,.6);
    --op-b70:rgba(0,0,0,.7);
    --op-b80:rgba(0,0,0,.8);
    --op-b90:rgba(0,0,0,.9);

	/* 투명도 화이트 */
    --op-w10:rgba(255,255,255,.1);
    --op-w20:rgba(255,255,255,.2);
    --op-w30:rgba(255,255,255,.3);
    --op-w40:rgba(255,255,255,.4);
    --op-w50:rgba(255,255,255,.5);
    --op-w60:rgba(255,255,255,.6);
    --op-w70:rgba(255,255,255,.7);
    --op-w80:rgba(255,255,255,.8);
    --op-w90:rgba(255,255,255,.9);

	/* 게시판용 */
	--border-01: #eee;
	
	/* 트렌지션 */
	--trans-01:all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
	--trans-02:all 1s cubic-bezier(0.215, 0.61, 0.355, 1);
	--trans-03:all 1s cubic-bezier(0.215, 0.61, 0.355, 1);
	--trans-04:all 0.5s ease;
}

/* 영문일때 */
.en {font-family: var(--lang-en) !important;}

/* 타이틀 스타일 */
[data-heading]{font-family: var(--lang-ko); color: var(--b-title); display: block;}
[data-heading="5xl"]{font-size: var(--font-45); line-height: 1.338; font-weight: 700;}
[data-heading="4xl"]{font-size: var(--font-38); line-height: 1.338; font-weight: 700;}
[data-heading="3xl"]{font-size: var(--font-32); line-height: 1.314; font-weight: 700;}
[data-heading="2xl"]{font-size: var(--font-27); line-height: 1.285; font-weight: 700;}
[data-heading="xl"]{font-size: var(--font-24); line-height: 1.5; font-weight: 700;}
[data-heading="lg"]{font-size: var(--font-22); line-height: 1.333; font-weight: 600;}
[data-heading="md"]{font-size: var(--font-19); line-height: 1.375; font-weight: 600;}

/* body font */
.small {font-size: var(--font-15); line-height: 1.5333;}
.xsmall {font-size: var(--font-13);}

/* font-weight */
.semibold {font-weight: 600;}
.bold {font-weight: 700;}

  /* 컬러 기본 셋 */
 [data-color="c1"]{color:var(--c-primary) !important;}
 [data-color="primary"]{color:var(--c-primary) !important;}
 [data-color="c2"]{color:var(--c-secondary) !important;}
 [data-color="title"]{color:var(--b-title) !important;}
 [data-color="light01"]{color:var(--b-light01) !important;}
 [data-color="light02"]{color:var(--b-light02) !important;}

 .c-primary {color:var(--c-primary) !important;}
 .c-secondary {color:var(--c-secondary) !important;}
 .b-title {color:var(--b-title) !important;}
 .b-default {color:var(--b-default) !important;}
 .b-light01 {color:var(--b-light01) !important;}
 .b-light02 {color:var(--b-light02) !important;}

 [data-color="b1"]{color:var(--b-01) !important;}
 [data-color="b2"]{color:var(--b-02) !important;}

 .c-white{color: var(--w) !important;}
 [data-color="w"],
 [data-color="w"] *{color: var(--w);} /* 영역만 글자 흰색 */

 .bg-default, [data-bg="default"]{background-color: var(--bg-default) !important;}
 .bg-light,[data-bg="light"]{background-color: var(--bg-light) !important;}
 .bg-dark, [data-bg="dark"]{background-color: var(--b-title) !important;}

 /* boarder 값 기본 셋 */
 .br-default,[data-border]{border:1px solid var(--br-default);}
 .br-light,[data-border="light"]{border:1px solid var(--br-light);}
 [data-radius]{overflow:hidden !important;}
 [data-radius="10"]{border-radius:max(0.5208vw, 7rem);}
 [data-radius="20"]{border-radius:max(1.0417vw, 10rem);}

 /* 마진 간격 */
 .mt30 {margin-top: 30rem !important;}
 .mt20 {margin-top: 20rem !important;}
 .mt10 {margin-top: 10rem !important;}
 .mt5 {margin-top: 5rem !important;}

 .mb30 {margin-bottom: 30rem !important;}
 .mb20 {margin-bottom: 20rem !important;}
 .mb16 {margin-bottom: 16rem !important;}
 .mb12 {margin-bottom: 12rem !important;}
 .mb10 {margin-bottom: 10rem !important;}
 .mb5 {margin-bottom: 5rem !important;}

@media (max-width:1600px){
    :root{
      
    }
}
@media (max-width:1480px){
    :root {
       
	}
}


@media all and (max-width:1200px){
	:root {
       
	}
}

@media all and (max-width:1023px){
	body {padding-top: calc(90rem + 60rem);}

	:root {
		--font-45:38rem;
		--font-27:24rem;
		--font-22: 20rem;

		--space150:120rem;
		--space130:110rem;
		--space120:100rem;
		--space110:100rem;
		--space100:80rem;
		--space80:60rem;
		--space60:50rem;

		
	}
}

@media (max-width:860px){
	:root {
		--lang-ko:-apple-system, BlinkMacSystemFont, Sans-serif !important;
     
		--font-38:30rem;
	}

	[data-heading="4xl"] {line-height: 1.4;}

	.mt20 {margin-bottom: 15rem !important;}
	.mb20 {margin-bottom: 15rem !important;}
}

@media (max-width: 540px){
	body:not(:has(#coupon)){padding-top: 107rem;}
	body:has(#coupon,#memo_list,#memo_write,#point){padding-top: 0;}

	:root {
		--default:15rem;
		--font-45: 22rem;
		--font-38: 22rem;
		--font-32:22rem;
		--font-27:20rem;
		--font-24:20rem;
		--font-22:18rem;
		--font-19:16rem;
		--font-17:15rem;
		--font-16:14rem;
		--font-15:13rem;
		--font-13:11rem;
		--space150:80rem;
		--space130:60rem;
		--space120:60rem;
		--space110:60rem;
		--space100:50rem;
		--space80:40rem;
		--space60:35rem;
		--space50:30rem;
	}

	[data-heading="lg"] {line-height: 1.45;letter-spacing: -0.2rem;}

	.mb30 {margin-bottom: 20rem !important;}
	.mb20 {margin-bottom: 12rem !important;}
	.mb10 {margin-bottom: 8rem !important;}

	.mt30 {margin-top: 20rem !important;}
	.mt20 {margin-top: 12rem !important;}
	.mt10 {margin-top: 8rem !important;}
}

/* **************************************** *
 * wrapper
 * **************************************** */
 *[class^="wrap"]{position:relative;margin:0 auto;}

 .sub-inner{max-width:1024rem; position:relative;margin:0 auto;}
 .wrap{max-width:1280rem;}
 .wrap-wide{max-width:1440rem;}
 .wrap-narrow{max-width:1206rem;} /* 빼지마세요 */
 
 @media all and (max-width:1919px){
	 .wrap-wide{margin: 0 60rem;	 max-width: none;}
 }
 
 @media all and (max-width:1680px){
	 .wrap{/* margin:0 60rem; *//* max-width:none; */}
 }

  @media all and (max-width:1200px){
	.sub-inner,
	 *[class^="wrap"]{margin:0 60rem;max-width:none;width: auto;}
 }
 
 @media all and (max-width:1023px){
	.sub-inner,
	 *[class^="wrap"]{margin:0 40rem;max-width:none;width: auto;}
 }
 
 @media all and (max-width:540px){
	.sub-inner,
	 *[class^="wrap"]{margin:0 20rem;}
 }

 /* **************************************** *
 * swiper set
 * 
 * 사이트 기본 슬라이드 스타일에 맞게 마음껏 수정하면 됩니다.
 * 특정 페이지에서만 다른 스타일 슬라이드를 사용한다면 부모 클레스 상쇄하여 사용 
 * **************************************** */
 .swiper-controls .wrap *{cursor:pointer;}
 .swiper-container img{width:100%;}
 .swiper-controls > div{cursor: pointer;}
 .button-next.swiper-button-disabled,
 .button-prev.swiper-button-disabled{opacity:0.5;}
 
 .swiper-controls{display:flex; justify-content:center; align-items:center;}
 .swiper-controls *[class^="swiper-btn--"]{position:relative;width:30rem;height:30rem;cursor:pointer;display: flex;align-items: center;margin: 0 25rem;font-size: 16rem; font-weight: 600;}
 .swiper-controls *[class^="swiper-btn--"]::after{content:"";display:block;min-width: 30rem;height: 30rem;background:url(../new/img/layout/arrow-basic.svg) no-repeat 50% 50%;background-size: 8rem;}
 .swiper-controls .swiper-btn--prev{flex-direction: row-reverse;}
 
 .swiper-controls .swiper-btn--next::after{/* transform:rotate(-90deg); */}
 .swiper-controls .swiper-btn--prev::after{transform: rotate(180deg);}
 .swiper-controls .swiper-button-disabled{opacity: 0.5;}
 
 .swiper-pagination-bullet{opacity: 1; width:10rem;height:10rem; margin: 0 !important; background: var(--op-b10);border-radius:100rem;}
 .swiper-pagination{display:flex; gap:14rem; justify-content: center; bottom: auto !important; top: auto !important;}
 .swiper-pagination-bullet-active {width: 25rem; background: var(--c-primary);}

 @media (max-width: 540px){
	 .swiper-pagination {gap: 10rem;}
	.swiper-pagination-bullet {width: 8rem; height: 8rem;}
	 .swiper-pagination-bullet-active {width: 18rem;}
 }


/* **************************************** *
 * site custom
 * **************************************** */
 /* is_moved일때 flex */
[data-flex].is_moved {display: flex;}

.caption {margin-top: 20rem; text-align: right; font-size: var(--font-15); font-weight: 600; color: var(--op-b50);}

/* caption-box */
.caption-box {flex-shrink: 0;display: inline-block;padding:7rem 10rem;font-size: var(--font-13);font-weight: 600;color: var(--c-primary);border-radius: 5rem;background: var(--bg-light);align-self: flex-start;}
.caption-box.round {min-width: 45rem; padding: 3rem 12rem; border-radius: 100rem;}
.caption-box.fill {color: var(--w); background: var(--c-primary);}
.caption-box.line {color: var(--c-primary); background: var(--w); border:1px solid var(--c-primary)}
.caption-box.gray {border: 1px solid var(--b-light02);}

@media (max-width: 540px){
	.caption {margin-top: 15rem;}
	.caption-box {padding: 5rem 8rem; font-weight: 500; border-radius: 3rem;}
}

 /* 닫기 버튼 */
.btn-close {position: relative; width: 22rem; height: 22rem;}
.btn-close span {position: absolute; left: 50%; top: 50%; width: 16rem; height: 2rem; border-radius: 2rem; background: var(--b-title);transform: translate(-50%, -50%) rotate(45deg);}
.btn-close span:last-child {transform: translate(-50%, -50%) rotate(-45deg);}
.btn-close.white span {background: var(--w);}

/* button common */
*.btn-basic{display:inline-flex;justify-content:space-between;align-items:center;position:relative;box-sizing:border-box;padding: 18rem 20rem;background:var(--bg-default);font-weight:600;font-size:var(--font-15);color: var(--b-default);transition: var(--trans-01);border-radius: 100rem;}
*.btn-basic::after{content:"";display:block;height:14rem;margin-left:20rem;background-position:50% 50%;min-width:14rem;background-image:url(../img/layout/arrow-basic.svg);background-repeat:no-repeat;}
*.btn-basic.white {background:var(--w);}
*.btn-basic.dark {color: var(--w); background:var(--bg-dark);}
*.btn-basic.dark::after {background-image:url(../img/layout/arrow-basic_w.svg);}
*.btn-basic:has(i) {gap: 8rem;}
*.btn-basic:has(i)::after {display: none;}
*.btn-basic i {width: 21rem; height: 21rem; transition: var(--trans-01);}

*.btn-long {display: inline-flex; height: 60rem; align-items: center; justify-content: center; gap: 8rem; padding: 0 20rem; text-align: center; font-size: var(--default); font-weight: 600; color: var(--w); border-radius: 10rem; background: var(--c-primary); transition: var(--trans-01);}
*.btn-long.gray {color: var(--b-default); background: var(--bg-default);}
*.btn-long.line {color: var(--c-primary); background: var(--w); border: 1px solid var(--c-primary);}
*.btn-long.line.gray {color: var(--b-light01); background: var(--w); border: 1px solid var(--br-dark);}
*.btn-long--small {display: inline-flex; height: 38rem; align-items: center; justify-content: center; gap: 8rem; padding: 0 12rem; text-align: center; font-size: 14rem; font-weight: 600; color: var(--w); border-radius: 5rem; background: var(--c-primary); transition: var(--trans-01);}

*.btn-kakao {color: var(--b-title); background: var(--bg-kakao);}

/* 복사 버튼 */
*.btn-copy {display: inline-block; padding: 1px 7rem; font-size: var(--font-13); color: var(--b-light01); border-radius: 2rem; border: 1px solid var(--br-default); transition: var(--trans-01);}

/* 폼 안에 들어가는 버튼 */
*.btn-form:not(:disabled){  }
*.btn-form {flex-shrink: 0; display: inline-flex; height: 60rem; align-items: center; justify-content: center; padding: 0 15rem; text-align: center; font-size: var(--font-15); font-weight: 600; color: var(--b-title); border-radius: 7rem; border: 1px solid var(--b-title); transition: var(--trans-01);}
*.btn-form:disabled {cursor: default; color: var(--b-light02); border-color: var(--br-default); background: #ddd;}
.ui-datepicker-trigger.btn-calendar {position: absolute; right: 0; top: 0; display: inline-flex; align-items: center; justify-content: center; width: 60rem; height: 60rem; background:#000; mask:url(../img/sub/ic-calendar.svg) no-repeat center / 14rem;}
input[type="text"]:disabled + *.btn-calendar {background: var(--op-b40);}

@media (hover: hover) and (pointer: fine){
	*.btn-basic:hover{color:#fff !important;background: var(--c-primary);}
	*.btn-basic:hover::after {background-image: url(../img/layout/arrow-basic_w.svg);}

	*.btn-long:hover {background: #EB3A41;}
	*.btn-long.line:hover {color: var(--w); background: var(--c-primary);}
	*.btn-long.gray:hover {color: var(--w); background: var(--bg-dark);}

	*.btn-copy:hover {color: var(--c-primary); background: var(--w); border-color: var(--c-primary);}

	*.btn-form:not(:disabled):hover {color: var(--w); background: var(--b-title);}
	*.btn-kakao:hover {color: var(--b-title) !important; background: var(--bg-kakao-hover);}
}

@media all and (max-width:1200px){
	*.btn-form {height: 55rem;}
}

@media (max-width: 540px){
	*.btn-long {height: 52rem; border-radius: 5rem;}
	*.btn-basic{font-size:13rem;min-width:130rem;padding: 14rem 20rem;}
	*.btn-basic::after {margin-left: 15rem;}
	*.btn-basic i {width: 17rem; height: 17rem; mask-size: contain !important;}

	*.btn-form {height: 46rem; padding: 0 12rem; border-radius: 7rem;}

	*.btn-long--small {height: auto; padding: 6rem 10rem; font-size: 12rem; border-radius: 3rem;}
}

/* 개인정보처리방침 팝업 */
#view_privacy .popup-layer-inner {min-width: auto;padding: 20rem;border-radius: 20rem;} 
#view_privacy .popup-layer-inner * {font-family: var(--lang-ko);}
#view_privacy .popup-layer-inner > div {width: 440rem; max-height: 560rem; padding: 20rem; overflow-x: hidden; overflow-y: scroll;}
#view_privacy .popup-layer-inner h2 {height: auto;padding: 0 0 8rem !important;margin-bottom: 15rem;font-size: 18rem !important;font-weight: 600;color: var(--b-title);}
#view_privacy .popup-layer-inner h2:not(:first-child) {margin-top: 30rem;}
#view_privacy .tap-wrap {width: auto; font-size: var(--font-16);}
#view_privacy .tap-wrap p + p {margin-top: 8rem;}
#view_privacy ul {margin-top: 12rem;}
#view_privacy ul li {position: relative;padding-left: 10rem;font-size: var(--font-15);}
#view_privacy ul li:not(:last-child) {margin-bottom: 6rem;}
#view_privacy ul li::before {position: absolute; left:0; top: 8rem; content:''; width: 3rem; height: 3rem; border-radius: 100%; background: #ccc;}
#view_privacy ul li span:first-child {font-weight: 600; color: var(--b-default);}
#view_privacy ul li,
#view_privacy p{line-height:1.4; font-weight:300; font-size:var(--font-15); color:#666;}
#view_privacy .popup-layer-inner > div::-webkit-scrollbar{width:8rem; background-color:#ebebeb; border-radius:10rem;}

@media (max-width: 540px){
	#view_privacy .popup-layer-inner {padding: 20rem; border-radius: 0;}
	#view_privacy .popup-layer-inner > div {width: 100%; max-height: calc(100% - 80rem); padding: 0;}
	#view_privacy .popup-layer-inner h2 {font-size: var(--font-22) !important;}
}

#captcha {display: flex; align-items: center; width: 100%;}


/* **************************************** *
 * 제품 공통 (메인포함)
 * **************************************** */
.product-list {gap: 24rem;}
.product-item *{font-family: var(--lang-ko);}
.product-item a {display: block; height: 100%; padding: 30rem 30rem 35rem; background: var(--w); transition: var(--trans-01);}
.product-title-wrap {align-items: flex-start; margin-bottom: 20rem;}
.product-title {max-width: 80%; min-height: 60rem;}

.product-thumb {height: 349rem !important;}
.product-thumb img {width: 100%; height: 100%; object-fit: cover; object-position: center;}
.product-color {padding-top: 20rem; padding-bottom: 28rem;}
.product-color p {color: var(--op-b50);}
.product-color ul {margin-top: 8rem; gap: 10rem;}
.product-color ul li {width: 13rem;height: 13rem;border-radius: 100%;border: 1px solid var(--op-b10);}
.product-price-wrap {margin-top: 23rem;}
.product-price-wrap .original-price {flex-direction: row; justify-content: center; align-items: center;}
.product-price-wrap span {display: inline-block; margin-bottom: 0; color: var(--op-b30); text-decoration: line-through;}
.original-price__sale { font-size: var(--font-13); color: var(--c-primary); margin-left: 4rem;}

@media (hover: hover) and (pointer: fine){
	.product-item a:hover {border-color: var(--c-primary); box-shadow: 20rem 20rem 30rem 0 #FFEAEB;}
}

@media (max-width:1023px){
	.product-thumb { height: 219rem !important;}
}

@media (max-width:860px){
	.product-list {grid-template-columns:repeat(2, 1fr);}
	.product-title-wrap {flex-direction: column;}
	.product-title {max-width: 100%;}
	.product-title-wrap .caption-box {margin-top: 12rem;}
	.product-thumb {height: 240rem !important;}
}

@media (max-width:540px){
	.product-list {gap: 32rem 20rem;}
	.product-item > a{position: relative; display:flex;flex-direction:column;padding: 0;border: 0; text-align: center;}
	.product-thumb-wrap{position: initial !important; order:1;}
	.product-thumb {position: initial; height: 169rem !important;}
	.product-title-wrap {order:2; position: initial !important; flex-direction: column-reverse;margin-bottom: 8rem;margin-top: 13rem;}
	.product-title {width: 100%;max-width:100%; min-height: auto;font-weight:500;font-size: 13rem;}
	.product-title-wrap .caption-box {z-index: 1; margin-top: 0;margin: 0 auto;margin-bottom: 4rem;font-size: 11rem;position: absolute;right: 8rem;top: 9rem;background: var(--c-primary);color: #fff !important;padding: 3rem 6rem;}
	.product-title__name {width: 100%; align-items: center; text-align: center; gap: 4rem;}
	.product-title__name > span {gap: 2rem !important; font-size: var(--font-13) !important;}
	.product-title__name strong {font-size: 13rem; font-weight: 500;}
	.product-price-wrap span {margin-bottom: 0 !important;}
	.product-price-wrap .original-price {margin-bottom: 5rem;}
	.product-color ul {gap: 8rem;}
	.product-color ul li {width: 10rem; height: 10rem;}
	.product-price-wrap {order:3; margin-top: 0;}
	.product-price-wrap span {margin-bottom:3rem;}
	.original-price__sale{margin-left: 3rem;font-weight:500;font-size: 12rem;}
	.product-price-wrap > p {font-size: 16rem;}
	.product-color {display: none;}

	.icon-wish {width:8rem !important; height: 7rem !important;}
}

/* 로그인 */
@media (max-width:540px){
	.register {max-width: none; margin-top: 0; margin-bottom: 0; padding: 0 20rem;}
}