@charset 'utf-8';
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');
@import url('https://cdn.jsdelivr.net/gh/moonspam/NanumSquare@1.0/nanumsquare.css');

/* base */
body, button, dd, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, input, legend, li, ol, p, select, table, td, textarea, th, ul { margin: 0; padding: 0; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
ol, ul, li { list-style: none; }
blockquote, q { quotes: none; }
table { border-collapse: collapse; border-spacing: 0; }
input, textarea, button, select { -webkit-appearance:none; -webkit-border-radius:0; border-radius:0; background:none; }
input:focus, textarea:focus { outline-style:none; } 
textarea::placeholder, input::placeholder { color:#323232; opacity: 0.5; }
img { max-width:100%; height:auto; vertical-align:middle; border:0; }
a { text-decoration:none; color:#323232; }
i, em { font-style:normal; }
body, button, h1, h2, h3, h4, h5, input, select, table, textarea { font-family: 'Noto Sans KR', 'Malgun Gothic', serif; color:#000; font-weight:400; font-size:14px; line-height:1.45; }
button { outline:none; cursor:pointer; border:0; }

html, body {  }

/* 스크롤시 */
body.scroll #hd { box-shadow:0 0 5px #aaa; }
body.scroll #hd .search-box { display:flex; }


/* wrap */
.wrap { min-width:290px; }

/* header */
#hd { position:relative; background-color:#fff; z-index:101; }
#hd .head { position:relative; max-width:1000px; height:140px; margin:0 auto; box-sizing:border-box; text-align:center; overflow:hidden; padding:0 20px; }
#hd .head h1 { display:inline-block; width:120px; overflow:hidden; padding-top:25px; }

#hd #unit { position:absolute; right:23px; top:50%; transform:translateY(-50%); }
#hd #unit .btn { position:relative; display:inline-block; float:left; width:44px; height:44px; cursor:pointer; background-repeat:no-repeat; background-position:center; margin-right:4px; }
#hd #unit .btn:last-child { margin-right:0; }
#hd #unit .btn .alert { position:absolute; right:6px; top:-8px; display:block; width:24px; height:24px; line-height:24px; text-align:center; font-size:12px; background-color:#fc053f; color:#fff; border-radius:50px; }
#hd #unit .notice { background-image:url('../img/icons/ic_notice.png'); }
#hd #unit .cart { background-image:url('../img/icons/ic_cart.png'); }
#hd #unit .cart .alert { right:0; }
#hd #unit .mypage { background-image:url('../img/icons/ic_member.png'); }

#hd .nav-wr { border-top: 1px solid #e1e1e1; }

#hd .nav-top { position:relative; height:70px; display:none; }
#hd .nav-top .bar { background-color:#fff; }

#nav { max-width:1000px; margin:0 auto; }
#nav ul { display:flex; align-items:center; justify-content:center; }
#nav ul li { font-size:19px; font-weight:500; }
#nav ul li a { display:flex; align-items:center; justify-content:center; padding:0 20px; height:60px; }

#ft { background-color: #f2f4f5; padding:0 20px; }


 /* 기본 버튼 스타일 초기화 */
.btn-nav {
	position: absolute; left:20px; top:50%; transform:translateY(-50%); 
	width: 40px;
	height: 50px;
	background: none;
	border: none;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	padding: 8px 5px; /* 내부 여백 조절 */
	z-index: 10;
	display:none;
}
/* 각 막대(bar) 스타일 */
.btn-nav .bar {
	display: block;
	width: 100%;
	height: 2px; /* 막대 두께 */
	background-color: #333; /* 막대 색상 */
	border-radius: 2px;
	/* 모든 변형에 부드러운 전환 효과 적용 */
	transition: all 0.3s ease-in-out;
	transform-origin: center; /* 회전 기준점을 중심으로 설정 */
}

/* -------------------------------------- */
/* 'open' 클래스가 추가되었을 때의 X자 변형 스타일 */
/* -------------------------------------- */

/* 1. 상단 막대 (Top Bar) */
#btn-nav-close .top {
	/* 중앙으로 이동 (8px는 초기 버튼 패딩과 바 간격에 따라 조절됨) */
	transform: translateY(11px) rotate(45deg);
}

/* 2. 중앙 막대 (Middle Bar) */
#btn-nav-close .middle {
	/* 중앙 막대 숨기기 */
	opacity: 0;
	transform: scaleX(0); /* 수평으로 사라지게 하는 애니메이션 추가 */
}

/* 3. 하단 막대 (Bottom Bar) */
#btn-nav-close .bottom {
	/* 중앙으로 이동 */
	transform: translateY(-11px) rotate(-45deg);
}


























/* search-box */
.search-box { position:relative; display:flex; align-items:center; justify-content:center; background-color:#f2f2f2; width:240px; height:40px; border-radius:6px; padding: 0 36px 0 15px; box-sizing:border-box; }
.search-box .fr-input { display:block; width:100%; background-color:transparent; border:0; cursor:pointer; height:30px; }
.search-box .btn-search { position: absolute; top: 50%; right:10px; display:flex; width:24px; height:24px; background-repeat:no-repeat; background-position:center; background-size:cover; cursor:pointer; outline:none; border:0; background-image:url('../img/icons/ic_search@x2.png'); transform: translateY(-50%); }

#hd .search-box { display:none; }

/* util-menu */
#hd .util-menu { display:flex; align-items:center; justify-content:space-between; gap:20px; }
#hd .util-menu .btn { position:relative; display:flex; align-items:center; justify-content:center; cursor:pointer;  }
#hd .util-menu .btn-cart svg { width:24px; height:24px; }
#hd .util-menu .btn-cart .count { position:absolute; right:-5px; top:-3px; display:flex; align-items:center; justify-content:center; background-color:#ff5452; width:16px; height:16px; border-radius:16px; color:#fff; font-size:11px; }

#hd .util-menu .btn-icons { display:flex; width:24px; height:24px; background-repeat:no-repeat; background-position:center; background-size:cover; cursor:pointer; outline:none; border:0; } 
#hd .util-menu .btn-icons.btn-menu { background-image:url('../img/icons/ic_menu@2x.png'); }


/* footer */
#ft { border-top: 1px solid #e1e1e1; }
#ft .foot { position:relative; max-width:1000px; margin:0 auto; padding:30px 0; font-size:13px; box-sizing:border-box; }
#ft  .content-list { display:flex; gap:30px; }
#ft  .content-list a { display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:500;  }
#ft  .content-list a:hover { color:#1490b7; }

#ft .text { margin-top:20px; word-break:keep-all; }
#ft address { display:flex; flex-wrap:wrap; gap:0 10px; font-style:normal; margin-top:15px; }
#ft address span { }
#ft .copyright { margin-top:15px;  }

.pagination {
	display: inline-block;
	padding-left: 0;
	margin: 30px 0 20px;
	border-radius: 4px;
}
.pagination > li { display:inline; }
.pagination>.active>a, .pagination>.active>a:focus, .pagination>.active>a:hover, .pagination>.active>span, .pagination>.active>span:focus, .pagination>.active>span:hover {
	z-index: 3;
	color: #fff;
	cursor: default;
	background-color: #6e6857;
	border-color: #1E1E1E;
}
.pagination>li>a, .pagination>li>span {
	position: relative;
	float: left;
	padding: 6px 12px;
	margin-left: -1px;
	line-height: 1.42857143;
	color: #1E1E1E;
	text-decoration: none;
	background-color: #fff;
	border: 1px solid #ddd;
}