@charset "UTF-8";


/*----------------------------------------------------------------------------------*/
/* 0-1. FONT
/*----------------------------------------------------------------------------------*/
/****** YouandiNewKR ******/
@font-face {
	font-family: 'YouandiNewKR';
	src:
		url('/comm/fonts/YouandiNewKrTitle-Light.woff2'),
		url('/comm/fonts/YouandiNewKrTitle-Light.woff');
	font-weight: 300;
	font-style: normal;
}
@font-face {
	font-family: 'YouandiNewKR';
	src:
		url('/comm/fonts/YouandiNewKrTitle-Reqular.woff2'),
		url('/comm/fonts/YouandiNewKrTitle-Reqular.woff');
	font-weight: 400;
	font-style: normal;
}
@font-face {
	font-family: 'YouandiNewKR';
	src:
		url('/comm/fonts/YouandiNewKrTitle-Medium.woff2'),
		url('/comm/fonts/YouandiNewKrTitle-Medium.woff');
	font-weight: 500;
	font-style: normal;
}
@font-face {
	font-family: 'YouandiNewKR';
	src:
		url('/comm/fonts/YouandiNewKrTitle-Bold.woff2'),
		url('/comm/fonts/YouandiNewKrTitle-Bold.woff');
	font-weight: 600;
	font-style: normal;
}
@font-face {
	font-family: 'YouandiNewKR';
	src:
		url('/comm/fonts/YouandiNewKrTitle-ExtraBold.woff2'),
		url('/comm/fonts/YouandiNewKrTitle-ExtraBold.woff');
	font-weight: 700;
	font-style: normal;
}


:root {
	--inner1200 : 1240px;
	
		/* color */
	--BK: #000000;
	--BK_a80: rgba(0,0,0,0.8);
	--BK_a64: rgba(0,0,0,0.64);
	--BK_a48: rgba(0,0,0,0.48);
	--BK_a40: rgba(0,0,0,0.4);
	--BK_a20: rgba(0,0,0,0.2);
	--BK_a16: rgba(0,0,0,0.16);
	--BK_a12: rgba(0,0,0,0.12);
	--BK_a8: rgba(0,0,0,0.08);
	--BK_a4: rgba(0,0,0,0.04);
	--BK_a2: rgba(0,0,0,0.02);
	
	--BK_80: #333333;
	--BK_64: #5C5C5C;
	--BK_48: #858585;
	--BK_40: #949494;
	--BK_20: #cccccc;
	--BK_16: #d6d6d6;
	--BK_12: #eoeoeo;
	--BK_8: #ebebeb;
	--BK_4: #f5f5f5;
	--BK_2: #fafafa;
	
	--WT: #ffffff;
	--WT_a80: rgba(255, 255, 255, 0.8);
	--WT_a64: rgba(255, 255, 255, 0.64);
	--WT_a48: rgba(255, 255, 255, 0.48);
	--WT_a40: rgba(255, 255, 255, 0.4);
	--WT_a20: rgba(255, 255, 255, 0.2);
	--WT_a16: rgba(255, 255, 255, 0.16);
	--WT_a12: rgba(255, 255, 255, 0.12);
	--WT_a8: rgba(255, 255, 255, 0.08);
	--WT_a4: rgba(255, 255, 255, 0.04);
	--WT_a2: rgba(255, 255, 255, 0.02);

	--WT: #ffffff;
	--WT_80 :#cccccc;
	--WT_64 :#a3a3a3;
	--WT_48 :#7a7a7a;
	--WT_40 :#666666;
	--WT_20 :#333333;
	--WT_16 :#292929;
	--WT_12 :#1f1f1f;
	--WT_8 :#141414;
	--WT_4 :#oaoaoa;
	--WT_2 :#050505;
	
	--Primary_a2: rgba(0, 150, 234, 0.08);
	--Point: #0070f0;
	--Auto : #3D5BDC;
	--M3_Main: #005CB9;
	--Alert: #FF0000;
	--Red_Main: #E3001F;
	--costco_Red: #c8102E;
	
	
	--boxshadow:0 2px 4px rgba(0,0,0,0.08);
}

html {font-size: 62.5%;}

/* 전체 스크롤 */
*::-webkit-scrollbar {width: 4px;}
*::-webkit-scrollbar-track {background-color: transparent;}
*::-webkit-scrollbar-thumb {background-color: #dbdbdb; border-radius: 10px; }

/* button */
.layer.me .ico { 
	width: 3.2rem; height: 3.2rem;
	background-repeat: no-repeat; background-size: contain;
	cursor: pointer; opacity: 1 !important;
}
.layer .layer-head .ico.close {background-image: url("/comm/img/ico_close.svg");}

.check-wrap input {
	-webkit-appearance: none;
	width: 3.2rem; height: 3.2rem;
	margin: 0;
	background-repeat: no-repeat; background-position: center; background-size: contain;
	cursor: pointer;
	transition: background-image 0.2s ease;
}
.check-wrap input.w24 {width: 2.4rem; height: 2.4rem;}

/* WT checkbox */
.check-wrap.WT input[type="checkbox"]{background-image: url("/comm/img/ico_check_WT.svg");position: unset;}
.check-wrap.WT input[type="checkbox"]:checked {background-image: url("/comm/img/ico_checked_WT.svg");}
.check-wrap.WT input[type="checkbox"]:disabled,
.check-wrap.WT input[type="checkbox"]:disabled:active,
.check-wrap.WT input[type="checkbox"]:disabled:focus {
	background-image: url("/comm/img/ico_checkDis_WT.svg") !important;
	cursor: none; pointer-events: none;
}
.check-wrap.WT input + label {color: #fff; font-size: 1.6rem; line-height: 2.2rem; padding-top: 5px; cursor: pointer;height: 100%;padding-left: 1.2rem;display: inline-flex;align-items: center;}


/*----------------------------------------------------------------------------------*/
/* 0-6. Footer
/*----------------------------------------------------------------------------------*/
#footer {
	width: 100%; height: 36.2rem;
	background-color: var(--WT);
	border-top: 1px solid var(--BK_40);
	font-size: 1.2rem; font-weight: 500; line-height: 1.6rem;
}
#footer .inner {
	max-width: var(--inner1200); padding: 0 2rem;
	margin: auto; padding-top: 3.6rem;
	display: flex; align-items: flex-start; justify-content: space-between;
}
#footer .inner > * {width: calc(100% / 4); flex:1}
#footer .inner ul {width: 100%; display: flex; flex-direction: column; gap: 8px;} 
#footer .inner ul li {font-size: 12px; font-weight: 500; line-height: 1.3; color: var(--BK);}
#footer .inner ul li > b {font-weight: 700; display: inline-block; width: 9.7rem;}
#footer .inner ul:first-of-type li:nth-child(2) {margin-bottom: 2rem; color: var(--BK_64);}
#footer .inner ul:nth-child(3) {margin-top: 2.4rem}
#footer .inner ul li.bold {font-weight: 700;}
footer .inner ul li button {font-size: 1.2rem; padding: 0;}
#footer .inner ul li a {display: inline-block;}

#footer .f-col ul {flex-direction: row; font-weight: 700;}
#footer .f-col .desc {margin-top: 4rem}
#footer .f-col .desc p{font-size: 12px; font-weight: 500; line-height: 1.8rem;}
#footer .flogo-wrap {display: flex; align-items: center; gap: 2.4rem; margin-top: 2rem;}


/*----------------------------------------------------------------------------------*/
/* 20251229
/*----------------------------------------------------------------------------------*/
.login .login_desc {padding-top: 8rem;}

/********** 푸터 : 1024*566 **********/
.layer {
	width: 100%; min-height: 100vh;
	position: fixed; inset: 0; z-index: 100;
	display: flex; align-items: center; justify-content: center;
	display: none;
}
.layer.on {display: flex;}
.layer-dimmed {
	width: 100%; min-height: 100vh;
	background-color: var(--BK_a80);
	position: relative; z-index: -1;
}
.layer-wrap {
	width: 68.8rem; 
	height: 63.7rem;
	position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 100;
	background-color: var(--WT); border-radius: 2.4rem;
}
.layer-head {
	width: 100%; 
	padding: 4rem 4rem 0 4rem;
	display: flex; align-items: center; justify-content: space-between; gap: 2rem;
}
.layer-head strong {font: 700 2.4rem / 3.2rem;}
.layer-cont {padding: 4rem; }

.layer.w1024 .layer-wrap {width: 102.4rem; height: 56.6rem;}
.layer.w1024 .layer-wrap .layer-cont {height: 49.4rem; overflow-y: scroll;}
.layer.w1024 dt.familysite__title {font-size: 2.4rem; font-weight: 700; line-height: 3.2rem;}
.layer.w1024 .familysite__box--list{ 
	position: relative;
	margin-top: 1.2rem; margin-bottom: 8rem; 
	display: flex;flex-wrap: wrap;
	padding: 2rem 2.4rem;
}
.layer.w1024 .familysite__box--list::before {content: '';
  position: absolute; top: 0; left: 0;
  width: 100%; height: 1px;
  background-color: #000;
  opacity: 0.12;
}
.layer.w1024 .familysite__box--list.family_group {display: flex; flex-wrap: wrap; padding: 2rem 2.4rem;}
.layer.w1024 .familysite__box--list.family_group li {
  width: calc(100% / 3);
  font-size: 1.6rem; line-height: 2.2rem;
  margin-bottom: 1.2rem;
  transition: all 0.3s ease;
}
.layer.w1024 .familysite__box--list.family_group li:hover a,
.layer.w1024 .familysite__box--list.group__com > li dd:hover a {
	text-decoration: underline; text-decoration-color: var(--BK);
	text-underline-offset: 2px;
}
.layer.w1024 .familysite__box:last-child {margin-bottom: 0;}
.layer.w1024 .familysite__box--list.w25p > li {width: 25%;}
.layer.w1024 .familysite__box--list.group__com > li {margin-bottom: 5.6rem;}
.layer.w1024 .familysite__box--list.group__com > li dt, 
.layer.w1024 .familysite__box--list.group__com > li dd a{
	font-size: 1.6rem; line-height: 2.2rem;
  	margin-bottom: 1.2rem;
 }
.layer.w1024 .familysite__box--list.group__com > li dt {font-weight: 700;}

/********** 가맹점 : 688*360-600 **********/
.layer.me .layer-wrap{ min-height: 36rem; height: auto; width: 68.8rem;}
.layer.me .layer-head {padding: 3.2rem 4rem 0 4rem; width: auto;}
.layer.me .layer-head button {margin-left: auto;}
.layer.me .layer-cont {padding: 1.6rem 0.8rem 4.8rem 0.8rem;}
.layer.me .auto-grow {
	min-height: 23.2rem; max-height: 52rem; overflow-y: scroll; padding: 0 7.6rem;
	outline: 0; font-size: 1.6rem;
}
.layer.me .auto-grow:hover,
.layer.me .auto-grow:active,
.layer.me .auto-grow:focus {outline: 0;}
.layer.me .check-wrap.WT {display: inline-flex; align-items: center; position: absolute; bottom: -4.2rem; left: 2rem;}

/* 주소검색 : Q12165 임시 작성 css */
#layerAdd .layer-head {width: unset;}
#layerAdd .layerClose {right: 24px;top: 24px;width: 32px;height: 32px;padding: 0;background: url(/docfiles/store/images/common/ico_light_pressed.png) 50% 50% no-repeat;background-size: 32px 32px;}
#layerAdd .soundOnly {width: 0;height: 0;position: absolute;top: 0;left: -9999px;overflow: hidden;}
#layerAdd .layer-cont .itWrap {width: 100%;height: 5.6rem;position: relative;display: flex;align-items: center;justify-content: space-between;}
#layerAdd .layer-cont .itWrap .it.srch {width: 100%;padding-left: 0;outline: 0;border: 0;border-radius: 0;border-bottom: 2px solid var(--BK_a20);font-size: 2rem;line-height: 2.6rem;font-weight: 700;color: var(--BK);position: absolute;right: 0;}
#layerAdd .layer-cont .itWrap .ico.srch {position: absolute;right: 0;width: 3.2rem;height: 3.2rem;background-repeat: no-repeat;background-size: contain;cursor: pointer;opacity: 1 !important;background-image: url(/comm/img/ico_search.svg);}
#layerAdd .layer-cont .txtWrap {width: 100%;margin-top: 2.4rem;display: flex;flex-direction: column;align-items: flex-start;gap: 8px;}
#layerAdd .layer-cont .txtWrap strong {font: 600 1.8rem / 2.2rem;}
#layerAdd .layer-cont .txtWrap ul li {font: 500 1.4rem/2rem;color: var(--BK_48);color: var(--BK_48);}
#layerAdd .layer-cont .addWrap {cursor: pointer;}
#layerAdd .layer-cont .btnBox {gap: 1rem;position: absolute;bottom: 4rem;left: 50%;transform: translateX(-50%);width: 100%;display: flex;align-items: center;justify-content: center;}
#layerAdd .layer-cont .btnBox .BK-btn {width: 14.8rem;height: 4.8rem;font-size: 2rem;font-weight: 700;line-height: 2.6rem;background-color: var(--BK);color: var(--WT);border-radius: 8px;display: flex;align-items: center;justify-content: center;transition: background-color 0.2s ease;border: 0;    font: 700 1.6rem/2.2rem;}
#layerAdd .layer-cont .btnBox .BK-btn.pale {background-color: var(--BK_a4);color: var(--BK);}
#layerAdd .btn:hover
	, #layerAdd .BK-btn.pale:hover {background-color: var(--BK_a12);}
	
	
/********** 가맹점 : 688*360-600 **********/