@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700&display=swap');

* { margin:0; padding:0; outline:none; box-sizing:border-box; }
html { font-size: 10px; }
body {
line-height:1; font-size:14px; font-weight:400; color:#000; font-family: 'Noto Sans KR', sans-serif; word-wrap: break-word; word-break: keep-all;
overflow-x: hidden;
}
h1, h2, h3, h4, h5, h6 { margin:0; font-family: 'Noto Sans KR', sans-serif; line-height:1; font-size: 1em; }
ul, ol { list-style:none; margin:0; padding: 0; }
a { outline:0; text-decoration:none; color: #000; }
a:focus { outline:none; color: var(--main-color); }
figure,dl,dd,input[type=radio], input[type=checkbox]  { margin: 0; padding: 0; }
img { border:none; outline:none; max-width: 100%; }
p { margin:0; padding:0; word-wrap: break-word; word-break: keep-all;  }
button, input, submit { border: none; background: none; }
dt { font-weight: normal; }

:root {
/* 컨텐츠 너비 */
--containerV1-width : 1400px;

--main-color : #ed75e1; /* mainColor */

}

/* container */
.containerV1 { width: 100%; margin: 0 auto; max-width: var(--containerV1-width); }
@media (max-width:1430px) {
.containerV1 { padding: 0 15px; }
}


/*--------------------------------------------------- 해드세팅 ----------------------------------------------------------------------------*/
.head { --head-transition: 0.3s; }

/* 헤드 - topbar */
#top_bar1 { 
position:sticky; left: 0; top: 0; height: 42px; font-size: 12px; padding: 25px 0 2px; width: 100%; line-height: 1;
transition:var(--head-transition); z-index: 2001;
}
/* 스크롤 */
#top_bar1.scroll { top: -42px; }
#top_bar1 .containerV1 { display:flex; justify-content:space-between; }

#top_bar1 .itemBox { display:flex; align-items:center; float: none; margin-top: 0; text-transform: uppercase; gap:1em; }
#top_bar1 .itemBox > li > a { display: block; padding-bottom: 3px; }
#top_bar1 .itemBox > li > button { vertical-align: baseline;  }
#top_bar1 .itemBox > li > :is(a,button):hover { color: var(--main-color); }

/* topbar - 왼쪽문구 */
#top_bar1 .itemBox.box1 > li.dropdown1 { position: relative; }
#top_bar1 .itemBox.box1 > li.dropdown1 .inner { 
position: absolute; left: 0; top: 100%; padding: 1em; background: #fff; border: 1px solid #ddd; z-index: 100; display: none; 
}
#top_bar1 .itemBox.box1 > li.dropdown1 .inner > li { margin-bottom: 6px; }
#top_bar1 .itemBox.box1 > li.dropdown1 .inner > li:last-child { margin-bottom: 0; }
#top_bar1 .itemBox.box1 > li.dropdown1 .inner > li > a { position: relative; padding-left: 10px; line-height: 1.2; display: block; white-space: nowrap; }
#top_bar1 .itemBox.box1 > li.dropdown1 .inner > li > a:before { content: ''; position: absolute; left: 0; top: 5px; width: 4px; height: 4px; background: #000; border-radius:50%; }
#top_bar1 .itemBox.box1 > li.dropdown1:hover .inner { display: block; }
#top_bar1 .itemBox.box1 > li.dropdown1 .inner > li > a:hover { color: var(--main-color); }

/* topbar - 오른쪽문구 */
#top_bar1 .itemBox.box2 > li > a { display:inline-flex; align-items:center; margin-right: 1em; }
#top_bar1 .itemBox.box2 > li > a:last-child { margin-right: 0; }
#top_bar1 .itemBox.box2 > li > a > i { margin-right: 3px; }


/* 헤드 */
#head_new { 
position:sticky; left: 0; top: 42px; width: 100%; z-index: 2000; transition:var(--head-transition);
font-size: max(15px,0.94vw); 
}
/* 해드 - 스크롤 */
#head_new.scroll {
top: 0; background: #fff; box-shadow:0 0 5px rgba(0,0,0,0.1); 
}

/* 헤드 - 로고 */
#head_new .logo { text-align: center; padding: 1em 0; transition:var(--head-transition); margin: 0 auto; width: 8.5em; }
#head_new .containerV1 { display:grid; justify-content:center; position: relative; }

/* 헤드 - 대메뉴 */
#head_new #menu_first .itemBox { display:flex; gap:2.5em; padding: 1em 0 0; transition:var(--head-transition); }
#head_new #menu_first .itemBox > li { position: relative; }
#head_new #menu_first .itemBox > li > a { color: #555; font-weight: bold; padding-bottom: 10px; display: block; }

/* 헤드 - 소메뉴1 */
#head_new .menu_second { 
position: absolute; left: 0; top:100%; width: 10em; background: rgba(237,117,225,0.8); padding: 1em 0.8em; border-radius:0.5em; border-top-left-radius:0;
opacity: 0; visibility:hidden; transform:translateX(-5%); transition:var(--head-transition); z-index: -1;
}
#head_new .menu_second > li > a { display: block; font-size: 0.9em; font-weight: bold; transition:var(--head-transition); }

/* 헤드 - sns */
#head_new .snsList { position: absolute; right: 0; bottom: 12px; display:flex; align-items:center; height: 1em; font-size: 1.35em; gap:0.8em;  }
#head_new .snsList > li > a { color: var(--main-color); display: flex; align-items:center; height: 1em; }
#head_new .snsList > li > a :is(i,img) { display: block; }

/* hover */
#head_new #menu_first .itemBox > li:hover .menu_second { opacity: 1; visibility: visible; transform:translateX(0); z-index: 1; }
#head_new #menu_first .itemBox .menu_second > li > a:hover { color: #fff; }

@media (min-width:1430px) {/* 1430 이상 */
	/* 해드 - 스크롤 */
	#head_new.scroll .logo { font-size: 0.9em; padding: 0.8em 0; }
	#head_new.scroll #menu_first .itemBox { font-size: 0.9em; padding: 0.8em 0 0; }
}

@media (max-width:1430px) {
	#top_bar1 { padding: 15px 0 14px; border-bottom: 1px solid rgba(255,255,255,0.5); }
	#head_new .containerV1 { grid-template-columns:auto 1fr; gap:2em; padding: 1em 15px 0.5em;  } 
	#head_new .logo { padding: 0; }
	#head_new .mobBox3 { display:grid; justify-content:end; justify-items:end; }
	#head_new .snsList { position: static; order:1; }
	#head_new #menu_first { order:2; }
}
@media (max-width:991px) {
	/* 모바일헤드 - topbar */
	#top_bar1 { display: none; }

	/* 모바일헤드 */
	#head_new { top: 0; background: #fff; box-shadow:0 0 5px rgba(0,0,0,0.1); }
	#head_new .containerV1 { grid-template-columns:auto 1fr auto; align-items:center; padding: 0.5em 15px; }
	#head_new :is(.mobBox1,.mobBox2)  { font-size: 1.6em; }
	#head_new :is(.mobBox1,.mobBox2) > *:not(:last-child) { margin-right: 0.3em; }
	#head_new .logo { width: 40%; min-width: 70px; max-width: 120px; }

	/* 모바일헤드 - 메뉴 */
	#head_new .menuBox { 
	--menuBox-transition:0.4s;
	position: fixed; left: 0; top: 0; width: 100%; height: 100%; opacity: 0; visibility:hidden; z-index: -1; transition:var(--menuBox-transition);
	}
	#head_new .menuBox .bg { 
	position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); opacity: 1; visibility:visible; z-index: 0; 
	transition:var(--menuBox-transition);
	}
	#head_new .menuBox .mobBox3 {
	width: 80%;height: 100%; overflow-x: hidden; overflow-y:auto; position: absolute;  top:0; background: #fff; z-index: 1;
	justify-content:stretch; justify-items:start; align-content:start; padding: 2.5em 1.2em; max-width: 480px; transform:translateX(-100%); 
	transition:var(--menuBox-transition);
	}
	/* 모바일헤드 - 닫기버튼 */
	#head_new .menuBox .btn_closeV1 { position: absolute; right: 0; top: 0; font-size:2.5em; width: 1em; height: 1em; align-items:center; }

	/* 모바일헤드 - 회원가입 & 로그인 */
	#head_new .menuBox .mobBox4 { width: 100%; padding-bottom: 1em; font-size: 0.8em; display:flex !important; }
	#head_new .menuBox .mobBox4 > li { flex:1; }
	#head_new .menuBox .mobBox4 > li > a { display: block; border: 1px solid var(--main-color); text-align: center; padding: 1.3em 0; }
	#head_new .menuBox .mobBox4 > li.color1 > a { color: var(--main-color); }
	#head_new .menuBox .mobBox4 > li.color2 > a { background: var(--main-color); color: #fff; }
	#head_new .menuBox .mobBox4 > li:not(:last-child) > a { border-right: none; }

	/* 모바일헤드 - 관심상품 ... */
	#head_new .menuBox .mobBox5 { width: 100%; border: 1px solid #eee; padding: 1.2em 0; margin-bottom: 1em; font-size: 0.8em; display:flex !important; }
	#head_new .menuBox .mobBox5 > li { flex:1; }
	#head_new .menuBox .mobBox5 > li:not(:last-child) { border-right: 1px dotted #ddd; }
	#head_new .menuBox .mobBox5 > li a { display: block; text-align: center; }

	/* 모바일헤드 - 배너 */
	#head_new .mobBanner { width: 100%; }

	/* 모바일헤드 - 메뉴 */
	#head_new #menu_first { order:0; font-size: 1.3em; width: 100%; }
	#head_new #menu_first .itemBox { flex-wrap:wrap; gap:0.1em; padding: 1em 0; }
	#head_new #menu_first .itemBox > li { width: 100%; }
	#head_new #menu_first .itemBox > li.dropdown1:after { 
	content: '\2b'; font-family: fontAwesome; position: absolute; right: 0; top: 0.025em; font-size: 1.1em; color: var(--main-color);
	}
	#head_new #menu_first .itemBox > li > a { font-weight: normal; padding-bottom: 0; padding: 0.25em 0; }
	#head_new #menu_first .itemBox > li.dropdown1 > a { pointer-events:none; pointer:cursor; }
	#head_new .menu_second { 
	width: 100%; padding:0.4em 0; border-radius:0; position: static;
	transform:translate(0); opacity: 1; visibility: visible;
	border-top: 1px solid rgba(237,117,225,0.3); background: rgba(237,117,225,0.1);
	}
	#head_new .menu_second > li > a { font-size: 0.75em; padding: 0.2em 0.7em; font-weight: normal; }

	/* 모바일헤드 - sns */
	#head_new .snsList { 
	order:0; width: 100%; justify-content:space-around; font-size: 1.45em; gap:0; padding: 1em 0; background: rgba(237,117,225,0.05); 
	margin-bottom: 1em;
	}

	/* 모바일헤드 - about... */
	.mobBox6 { font-size: 1.3em; text-transform: uppercase; width: 100%; }
	.mobBox6 > li:not(:last-child) { margin-bottom: 0.6em; }
	.mobBox6 > li > a { color: #555; display: block; padding: 0.25em 0; }
	.mobBox6 > li.dropdown1 { position: relative; }
	.mobBox6 > li.dropdown1:after { 
	content: '\2b'; font-family: fontAwesome; position: absolute; right: 0; top: 0.025em; font-size: 1.1em; color: var(--main-color);
	}
	.mobBox6 > li.dropdown1 > a { pointer-events:none; pointer:cursor; }
	.mobBox6 > li.dropdown1 .inner { 
	width: 100%; padding:0.4em 0; border-radius:0; position: static;
	transform:translate(0); opacity: 1; visibility: visible;
	border-top: 1px solid rgba(237,117,225,0.3); background: rgba(237,117,225,0.1);
	}
	.mobBox6 > li.dropdown1 .inner > li > a { font-size: 0.75em; padding: 0.4em 0.7em; font-weight: normal; line-height: 1.6; }

	/* hover */
	#head_new #menu_first .itemBox .menu_second > li > a:hover { color: #000; }

    /*	inactive */
	#head_new .menuBox.inactive { opacity: 1; visibility:visible; z-index: 0; }
	#head_new .menuBox.inactive .mobBox3 { transform:translateX(0); }
	#head_new .menuBox .bg.hidden { opacity: 0; visibility:hidden; z-index: -1; }
	

}
/*--------------------------------------------------- 해드세팅 끝 ----------------------------------------------------------------------------*/



/*--------------------------------------------------- 인덱스세팅 ----------------------------------------------------------------------------*/
/* 인덱스 */

/* section */
#shop_index { font-size: min(17.14vw,120px); overflow-x: hidden; }


/* section1 */
#shop_index .section1 { padding: 0.75em 0 0.583em; }
#shop_index .section1 .containerV1 { 
--shop-section1-gap:1.875em;
display:grid; grid-template-columns:repeat(3,1fr); font-size: min(3.43vw,16px); gap:var(--shop-section1-gap); 
}
/*#shop_index .section1 .itemBox { border: 1px solid #000; }*/
#shop_index .section1 .itemBox .inner { display:grid; gap:var(--shop-section1-gap); }
#shop_index .section1 .itemBox .relativeItem { position: relative; display: block; overflow: hidden; }
#shop_index .section1 .itemBox .img { 
position: relative;
background-position: center; background-repeat: no-repeat; background-size: cover;
transition:0.3s ease-in-out;
}
#shop_index .section1 .itemBox .textBox { z-index: 1; position: absolute; left: 0; bottom: 0; color: #333; padding: 2.5em 1.2em; }
#shop_index .section1 .itemBox .textBox .text1 { font-weight: bold; font-size: 1.5625em; line-height: 1.3em; padding-bottom: 0.1em; }
#shop_index .section1 .itemBox .textBox .text2 { font-weight: 300; font-size: 1em; text-transform: uppercase; line-height: 1.4em; }

/* section1 - itemBox3 */
#shop_index .section1 .itemBox3 .inner { grid-template-columns:repeat(2,1fr); }
#shop_index .section1 .itemBox3 .inner > li:last-child { grid-column:1/3; }
#shop_index .section1 .itemBox3 .inner > li:nth-child(1) .textBox { padding:1.2em; }
#shop_index .section1 .itemBox3 .inner > li:nth-child(2) .textBox { padding:1.2em; }

/* section1 - 이미지 */
#shop_index .section1 .itemBox1 .inner > li:nth-child(1) .img { 
background-image: url(img/shopIndex_section1_img1.jpg); 
height: 300px;
}
#shop_index .section1 .itemBox1 .inner > li:nth-child(2) .img { 
background-image: url(img/shopIndex_section1_img2.jpg);
height: 147px; 
}
#shop_index .section1 .itemBox2 .img {
background-image: url(img/shopIndex_section1_img3.jpg); 
height: calc(447px + var(--shop-section1-gap));
}
#shop_index .section1 .itemBox3 .inner > li:nth-child(1) .img { 
background-image: url(img/shopIndex_section1_img4.jpg); 
height: 200px;
}
#shop_index .section1 .itemBox3 .inner > li:nth-child(2) .img { 
background-image: url(img/shopIndex_section1_img5.jpg);
height: 200px;
}
#shop_index .section1 .itemBox3 .inner > li:nth-child(3) .img { 
background-image: url(img/shopIndex_section1_img6.jpg);
height: 247px; 
}

/* section1 - hover */
#shop_index .section1 .itemBox .relativeItem:hover .img { transform:scale(1.05); }

@media (max-width:1400px) {
	#shop_index .section1 .itemBox .textBox .text1 { font-size: 1.25em; }
	#shop_index .section1 .itemBox .textBox .text2 { font-size: 0.85em; }
}
@media (max-width:1200px) {
	#shop_index .section1 .containerV1 { --shop-section1-gap:0.5em; }
	#shop_index .section1 .itemBox .textBox { padding:2em 0.8em; }
	#shop_index .section1 .itemBox .textBox .text1 { font-size: 1.1em; }
	#shop_index .section1 .itemBox .textBox .text2 { font-size: 0.8em; }

	#shop_index .section1 .itemBox3 .inner > li:nth-child(1) .textBox { padding:0.8em; }
	#shop_index .section1 .itemBox3 .inner > li:nth-child(2) .textBox { padding:0.8em; }
}
@media (max-width:991px) {
	#shop_index .section1 .containerV1 { grid-template-columns:repeat(2,1fr); }
	#shop_index .section1 .itemBox2 { order:3; max-width: 477px; grid-column:1/3; width: 100%; justify-self:center; }
	#shop_index .section1 .itemBox1 { order:1; }
	#shop_index .section1 .itemBox3 { order:2; }
}
@media (max-width:768px) {
	#shop_index .section1 .containerV1 { 
	--shop-section1-gap:0.5em;
	grid-template-columns:1fr; max-width: 477px; margin: 0 auto;
	}
	#shop_index .section1 .itemBox2 { order:2; max-width: 477px; grid-column:initial; width: 100%; justify-self:center; }
	#shop_index .section1 .itemBox1 { order:1; }
	#shop_index .section1 .itemBox3 { order:3; }

	#shop_index .section1 .itemBox .textBox .text1 { font-size: 1.28em; }
	#shop_index .section1 .itemBox .textBox .text2 { font-size: 0.95em; }

	/* section1 - 이미지 */
	#shop_index .section1 .itemBox .img { height: 0; }
	#shop_index .section1 .itemBox1 .inner > li:nth-child(1) .img { 
	padding-bottom: 67.17%;
	}
	#shop_index .section1 .itemBox1 .inner > li:nth-child(2) .img { 
	padding-bottom: 32.91%;
	}
	#shop_index .section1 .itemBox2 .img {
	padding-bottom: 106.79%;
	}
	#shop_index .section1 .itemBox3 .inner > li:nth-child(1) .img { 
	padding-bottom: 96%;
	}
	#shop_index .section1 .itemBox3 .inner > li:nth-child(2) .img { 
	padding-bottom: 96%;
	}
	#shop_index .section1 .itemBox3 .inner > li:nth-child(3) .img { 
	padding-bottom: 55.30%;
	}
}

/* section2 */
#shop_index .section2 { padding: 0.583em 0 1.25em; }
@media (max-width:991px) {
	#shop_index .section2 { padding: 0.583em 0; }
}

/* section3 */
#shop_index .section3 { padding: 1.25em 0; }
@media (max-width:991px) {
	#shop_index .section3 { padding: 0.583em 0 1.25em; }
}


/* section6 */
#shop_index .section6 { margin-bottom: 0.75em; }
/*--------------------------------------------------- 인덱스세팅 끝 ----------------------------------------------------------------------------*/



/*--------------------------------------------------- 푸터세팅 ----------------------------------------------------------------------------*/
/* footer*/
footer { 
--footer-color1: #747474; font-size: 15px;
background: #fff; border-top: 1px solid #e0e0e0; 
}

footer > .contents_box { padding: 3.3333em 0; }
footer .contents { display:flex; flex-wrap:wrap; gap:1em; }
footer .item1 { flex:1; }
footer .item2 { flex:2; display:grid; align-content:space-between; }
footer .item2 > div { line-height: 1.7; color: var(--footer-color1); }
footer .item2 > div a { color: inherit;}
footer .item2 .text > span { position: relative; margin-right:1.5em; font-weight: inherit;  }
footer .item2 > .copy { text-transform: uppercase; font-weight: inherit; align-self:end; }



footer .contents .info { 
-ms-display:flex; -ms-flex-wrap:wrap; 
display:flex; flex-wrap:wrap; 
text-align: center;
margin-top: 2em;
}
footer .info > .item { position:relative; }
footer .info > .item:before { 
content:''; position:absolute; right:0.5em; top:50%; transform:translateY(-50%); width:1px; height:1em; background:var(--footer-color1); 
}
footer .info > .item:last-child:before { display:none; }
footer .info > .item > a { 
display:block; color:var(--footer-color1); line-height:1.8; margin-right:1em; font-weight: bold;
}  

@media (max-width:991px) {
	footer .item1 { flex:auto; width: 100%; }
	footer .item2 { flex:auto; width: 100%; }
	footer .item2 .text > span { display: block; margin-right: 0; margin-bottom: 0.1em; }
}
@media (max-width:768px) {
	footer { font-size: 13px; border-color: #1b1b1b; }
	footer > .contents_box { padding: 0; }
	footer > .contents_box .containerV1 { padding: 0; }
	footer .f_logo { display: none; }
	footer .contents { gap:0; }


	footer .contents .info { background: #fff; margin-top: 0; padding: 0.5em 0; border-bottom: 1px solid #777; font-size: 0.9em; }
	footer .info > .item { width:50%; }
	footer .info > .item:nth-child(1) { order:1; }
	footer .info > .item:nth-child(2) { order:4; }
	footer .info > .item:nth-child(3) { order:3; }
	footer .info > .item:nth-child(4) { order:2; }
	footer .info > .item:before { right: 0; }
	footer .info > .item:nth-child(2n):before { display:none; }
	footer .info > .item > a { margin-right: 0; }

	
	footer .item2 > div { padding: 1em; background: #f9f9f9; font-size: 0.85em; }
	footer .item2 .text { display:grid; grid-template-columns:1fr 2fr; }
	footer .item2 .text span:nth-child(odd) { color: #757575; }
	footer .item2 .text span:nth-child(even) { color: #1b1b1b; }

	footer .item2 > .copy { background: #eee; color: #777; text-align: center; font-size: 0.8em; font-weight: bold; padding: 1em 0; }
	footer .item2 > .copy a { color: #777; font-weight: inherit; }
}
/*--------------------------------------------------- 푸터세팅 끝 ----------------------------------------------------------------------------*/








/* 서브페이지 패딩 */
.sub_frame { padding:30px 0 50px; min-height: 80vh; }

/* 게시판 및 게시판헤드 등 기타 버튼들 기본컬러 변경 */
.btn.btn-color {border: 1px solid var(--main-color); background-color: var(--main-color);}
.btn.active.btn-color, .btn.btn-color:hover, .btn.btn-color:focus, .btn.btn-color:active {background-color: var(--main-color);}
.border-color, i.border-color, img.border-color {border-color: var(--main-color);}

/* 모달 */
.modal { z-index: 9999; }
.modal-backdrop { z-index: 9998; }

/*모바일 사이드 헤드*/
.sidebar-head { background-color: var(--main-color) !important; }