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

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

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

}


* { margin:0; padding:0; outline:none; box-sizing:border-box; }

/* 인트로 */
html {font-size:20px; font-family: 'NEXON Lv1 Gothic OTF';}
body {
word-wrap: break-word; /* 넘친 단어 줄 바꿈 */
word-break: keep-all;/* 줄나눔 기준 공백(띄어쓰기, 하이픈'-') */
font-family: 'Noto Sans KR', sans-serif !important;
}
h1, h2, h3, h4, h5, h6 { font-family: 'Noto Sans KR', sans-serif !important; }
ul, ol,figure { margin:0; padding: 0; list-style:none; }
a { outline:0; text-decoration:none; color: #000; }
a:is(:focus,:hover) { outline:none; text-decoration:none; color: var(--main-color); }
img { border:none; outline:none; max-width: 100%; }
p {
word-wrap: break-word; /* 넘친 단어 줄 바꿈 */
word-break: keep-all;/* 줄나눔 기준 공백(띄어쓰기, 하이픈'-') */
}
input,button { border: none; background: none; color: #000; }



/* 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 5px; width: 100%; line-height: 1;
transition:var(--head-transition); z-index: 1000;
}
/* 스크롤 */
#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:0.5em; }
#top_bar1 .itemBox > li > button { vertical-align: baseline;  }
#top_bar1 .itemBox > li > :is(a,button):hover { color: var(--main-color); }

#top_bar1 .itemBox.box2 > li > .item { display:inline-flex; align-items:center; margin-right: 0.5em; }
#top_bar1 .itemBox.box2 > li > .item.last { margin-right: 0; }
#top_bar1 .itemBox.box2 > li > .item > i { margin-right: 3px; }


/* 헤드 */
#head_new { 
position:sticky; left: 0; top: 42px; width: 100%; z-index: 9999; 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; }
	#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: 0.8em 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: 0.7em 0; margin-bottom: 1em; font-size: 0.8em; }
	#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 #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: 0.9em; color: var(--main-color);
	}
	#head_new #menu_first .itemBox > li > a { font-weight: normal; padding-bottom: 0; padding: 0.15em 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; }
	.mobBox6 > li:not(:last-child) { margin-bottom: 0.3em; }
	.mobBox6 > li > a { color: #555; display: block; }

	/* 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 .inner > li { background: #ddd; }
#shop_index .section1 .itemBox .relativeItem { position: relative; display: block; overflow: hidden; }
#shop_index .section1 .itemBox .img { 
background: #ccc; 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:1em;
	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; }
}

/* section2 */
#shop_index .section2 { padding: 0.583em 0 1.25em; }

/* section3 */
#shop_index .section3 { padding: 1.25em 0; }


/* 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:480px) {
	footer { font-size: 13px; }
	footer .contents .info { background: #f4f4f4; margin-top: 1.5em; padding: 0.5em 0; }
	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; }
}
/*--------------------------------------------------- 푸터세팅 끝 ----------------------------------------------------------------------------*/


/* 메인페이지 및 서브페이지 세팅 초기화 및 변경 */
#container { padding-right: 0 !important; }
#wrapper_title { text-align: center; }
#container_inner.container { width: 100% !important; max-width: var(--containerV1-width); padding: 0 !important; }
@media (max-width:1430px) {
	#container_inner.container { padding: 0 15px !important; }
}