@charset "utf-8";
/* 기본프로그램 사용자모듈 메뉴 - PC */
.all_m_btn {padding:10px; background:#323337;}
.pro_m_wrap .m_menu {width:200px;}

@media all and (max-width:999px){
	.pro_m_wrap.view {left:0;}
}

/* basic */
.inner{width:100%; max-width:1400px; margin:0 auto; position:relative;}

@media all and (max-width:1400px){
	.inner{width:96%;}
}

/* ========== 헤더 / GNB (header.jsp) ========== */
#header {display:block; position:relative; z-index:100; height:80px; background:#fff; border-bottom:1px solid #e6e3df;}
/* 좌우 정렬을 본문 컨텐츠(1472px + 좌우 여백 40px)와 동일하게 맞춤 (메인은 main_page.css 에서 히어로 문구 시작선에 맞춰 재정의) */
#header .inner {display:flex; align-items:center; justify-content:space-between; width:100%; max-width:1552px; margin:0 auto; height:100%; padding:0 40px; box-sizing:border-box;}

/* 햄버거 버튼 (모바일) */
#header .m_btn {display:none; width:24px; cursor:pointer;}
#header .m_btn i {display:block; width:100%; height:2px; margin:5px 0; background:#222; transition:all 0.3s;}
#header .m_btn i:nth-of-type(2) {width:84%;}
#header .m_btn.on i:nth-of-type(1) {transform:translateY(7px) rotate(-45deg);}
#header .m_btn.on i:nth-of-type(2) {opacity:0;}
#header .m_btn.on i:nth-of-type(3) {transform:translateY(-7px) rotate(45deg);}

/* GNB — 좌측 (워드마크가 정중앙, 유틸이 우측인 3분할) */
#header .gnb_wrap {position:static; height:100%;}
/* 메뉴 텍스트 — 17px / 400(얇게) 으로 시원하게 (헤더 높이 80px 과 연동) */
#header .gnb {display:flex; gap:44px; height:100%; font-size:17px; font-weight:400; letter-spacing:0.03em;}
#header .gnb > li {position:relative;}
#header .gnb > li > a {display:block; line-height:80px; color:#2b2926;}
/* 호버·현재 메뉴 — 브랜드 다크 그린 */
#header .gnb > li > a:hover,
#header .gnb > li > a.on {color:#1f4d36;}
/* 드롭다운: 헤더 아래 끝에 여백 없이 붙고, 호버한 메뉴를 가운데 기준으로 펼침 */
#header .gnb .sub {display:none; position:absolute; left:50%; top:100%; transform:translateX(-50%); flex-direction:column; min-width:120px; background:#fff; border:1px solid #e6e3df; box-shadow:0 4px 10px rgba(0,0,0,0.06);}
#header .gnb > li.has_sub:hover .sub {display:flex;}
#header .gnb .sub li a {display:block; padding:11px 18px; border-bottom:1px solid #f0eeeb; font-size:15px; font-weight:400; color:#2b2926; white-space:nowrap;}
#header .gnb .sub li:last-child a {border-bottom:0;}
#header .gnb .sub li a:hover,
#header .gnb .sub li a.on {color:#1f4d36; background:#f3f7f4;}

/* 워드마크 (정중앙) — 텍스트 로고 SSUKTAN */
#header .logo {position:absolute; left:50%; top:50%; margin:0; transform:translate(-50%,-50%); font-size:0; line-height:0;}
#header .logo a {display:block; font-family:'Poppins', 'Noto Sans KR', sans-serif; font-size:32px; font-weight:700; letter-spacing:0.24em; line-height:1; color:#1f4d36; white-space:nowrap;}

/* 우측 유틸 */
/* align-self:stretch — 드롭다운이 헤더 아래 끝에서 시작하도록 util 이 헤더 높이를 갖게 함 */
#header .util {display:flex; align-items:center; align-self:stretch; gap:22px; font-size:14px; letter-spacing:0.02em;}
#header .util a {color:#2b2926;}
#header .util a:hover {color:#1f4d36;}
#header .util .ico {display:block; line-height:0; transition:opacity 0.2s;}
#header .util .ico img {display:block; width:24px; height:24px;}
#header .util .ico:hover {opacity:0.6;}
/* 마이페이지 아이콘 호버 드롭다운 — 아이콘과 메뉴 사이가 끊기지 않도록 헤더 높이만큼 hover 영역 확보 */
#header .util .util_my {position:relative; display:flex; align-items:center; align-self:stretch;}
#header .util .util_my .sub {display:none; position:absolute; left:50%; top:100%; transform:translateX(-50%); min-width:136px; background:#fff; border:1px solid #e6e3df; box-shadow:0 4px 10px rgba(0,0,0,0.06); z-index:10;}
#header .util .util_my:hover .sub {display:block;}
#header .util .util_my .sub li a {display:block; padding:9px 16px; font-size:13px; color:#2b2926; white-space:nowrap;}
#header .util .util_my .sub li a:hover {background:#f3f7f4; color:#1f4d36;}

/* ========== 헤더 검색 레이어 (header.jsp #search_layer) ==========
   헤더(z-index:100) 보다 아래에 깔아 헤더 뒤에서 아래로 미끄러져 내려오는 연출.
   펼쳐진 높이는 메인 히어로(aspect-ratio 16/9) 의 중간쯤에 해당하는 46vh. */
html.search_open,
body.search_open {overflow:hidden !important; height:100% !important; touch-action:none;}
.search_dim {display:none; position:fixed; left:0; top:0; z-index:88; width:100%; height:100%; background:rgba(0,0,0,0.45); cursor:pointer;}
#search_layer {position:fixed; left:0; top:0; z-index:90; width:100%; height:0; overflow:hidden; background:#fff; transition:height 0.45s cubic-bezier(0.22,0.61,0.36,1);}
#search_layer.on {height:46vh; min-height:340px; max-height:520px; border-bottom:1px solid #e6e3df;}
/* 헤더 높이(80px)만큼 비우고, 남은 영역의 중앙보다 살짝 위에 검색폼이 오도록 -5% 이동 */
#search_layer .search_inner {display:flex; flex-direction:column; justify-content:center; width:100%; max-width:680px; height:100%; margin:0 auto; padding:80px 40px 0; box-sizing:border-box; transform:translateY(-5%);}

#search_layer .search_field {display:flex; align-items:center; gap:14px; padding-bottom:14px; border-bottom:2px solid #2b2926;}
#search_layer .search_input {flex:1; min-width:0; height:40px; border:0; outline:0; background:transparent; font-size:24px; color:#2b2926; letter-spacing:-0.01em;}
#search_layer .search_input::placeholder {color:#b5aea8; font-size:20px;}
#search_layer .btn_submit {flex:0 0 auto; padding:0; border:0; background:transparent; line-height:0; cursor:pointer;}
#search_layer .btn_submit img {display:block; width:26px; height:26px;}

/* 최근 검색어 (검색폼 아래) */
#search_layer .recent_box {margin-top:36px;}
#search_layer .recent_head {display:flex; align-items:center; justify-content:space-between; margin-bottom:14px;}
#search_layer .recent_head strong {font-size:15px; font-weight:600; color:#2b2926;}
#search_layer .btn_clear {padding:0; border:0; background:transparent; font-size:13px; color:#8e8883; text-decoration:underline; cursor:pointer;}
#search_layer .btn_clear:hover {color:#2b2926;}
#search_layer .recent_list {display:flex; flex-wrap:wrap; gap:8px;}
#search_layer .recent_list li {display:flex; align-items:center; height:34px; padding:0 6px 0 14px; border:1px solid #e6e3df; border-radius:0; background:#faf9f7; box-sizing:border-box; transition:border-color 0.2s;}
#search_layer .recent_list li:hover {border-color:#2b2926;}
#search_layer .recent_list li a {max-width:180px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:14px; color:#4a443f;}
#search_layer .recent_list .btn_del {position:relative; width:20px; height:20px; margin-left:6px; padding:0; border:0; background:transparent; cursor:pointer;}
#search_layer .recent_list .btn_del i {position:absolute; left:4px; top:9px; width:12px; height:1px; background:#a8a29d;}
#search_layer .recent_list .btn_del i:first-child {transform:rotate(45deg);}
#search_layer .recent_list .btn_del i:last-child {transform:rotate(-45deg);}
#search_layer .recent_list .btn_del:hover i {background:#2b2926;}
#search_layer .recent_none {font-size:14px; color:#a8a29d;}

#search_layer .search_close {position:absolute; right:40px; top:98px; width:26px; height:26px; padding:0; border:0; background:transparent; cursor:pointer;}
#search_layer .search_close i {position:absolute; left:0; top:12px; width:26px; height:1.5px; background:#2b2926;}
#search_layer .search_close i:first-child {transform:rotate(45deg);}
#search_layer .search_close i:last-child {transform:rotate(-45deg);}

/* ========== 모바일 메뉴 (header.jsp #m_menu) ========== */
.m_menu_bg {z-index:101; position:fixed; left:0; top:0; display:none; width:100%; height:100%; background:rgba(0,0,0,.6); cursor:pointer;}
#m_menu {z-index:102; position:fixed; left:-100%; top:0; width:100%; max-width:280px; height:100%; background:#fff; box-sizing:border-box; transition:left 0.3s; overflow-y:auto;}
#m_menu.on {left:0;}
#m_menu .top_box {position:relative; height:50px; border-bottom:1px solid #e6e3df;}
#m_menu .top_box .close_btn {position:absolute; right:16px; top:calc(50% - 15px); width:30px; height:30px;}
#m_menu .top_box .close_btn i {display:block; width:100%; height:2px; background:#333;}
#m_menu .top_box .close_btn i:first-of-type {transform:rotate(45deg) translate(9px,9px);}
#m_menu .top_box .close_btn i:last-of-type {transform:rotate(-45deg) translate(-7px,8px);}
#m_menu .login_box {display:flex; justify-content:center; gap:0; padding:16px 0; background:#111; text-align:center;}
#m_menu .login_box a {position:relative; padding:0 20px; font-size:14px; color:#fff;}
#m_menu .login_box a + a:before {content:''; position:absolute; left:0; top:calc(50% - 6px); width:1px; height:12px; background:rgba(255,255,255,0.5);}
#m_menu .gnb_box .gnb {margin:0; padding:0;}
#m_menu .gnb_box .gnb > li {border-bottom:1px solid #f0eeeb;}
#m_menu .gnb_box .gnb > li > a {display:flex; align-items:center; justify-content:space-between; padding:14px 20px; font-size:15px; font-weight:600; color:#2b2926;}
#m_menu .gnb_box .gnb > li.has_sub > a:after {content:'\f078'; font-family:'Font Awesome 5 Free'; font-weight:900; font-size:11px; color:#999; transition:transform 0.3s;}
#m_menu .gnb_box .gnb > li.on > a:after {transform:rotate(180deg);}
#m_menu .gnb_box .gnb .sub {display:none; padding:6px 0; background:#faf8f6;}
#m_menu .gnb_box .gnb .sub li a {display:block; padding:9px 20px 9px 32px; font-size:14px; color:#555;}
#m_menu .gnb_box .gnb .sub li a.on {color:#1f4d36;}

@media all and (max-width:1024px){
	#header {height:60px;}
	#header .inner {padding:0 24px;}
	#header .m_btn {display:block;}
	#header .gnb_wrap {display:none;}
	/* 모바일: 햄버거(좌) / 워드마크(중앙) / 아이콘(우) */
	#header .logo a {font-size:24px; letter-spacing:0.20em;}
	#header .util {gap:14px;}
	#header .util .txt {display:none;}
	/* 터치 환경에서는 호버 드롭다운 대신 아이콘 탭 → 마이페이지 이동 */
	#header .util .util_my .sub {display:none !important;}
	/* 검색 레이어: 1열(상단 우측 닫기 버튼) → 2열(검색 입력칸) → 3열(최근 검색어) 세로 수직 배치 */
	#search_layer.on {height:300px !important; min-height:280px !important; max-height:330px !important;}
	#search_layer .search_inner {padding:104px 20px 24px !important; justify-content:flex-start !important; transform:none !important;}
	#search_layer .search_field {padding-right:0 !important;}
	#search_layer .search_input {font-size:18px;}
	#search_layer .search_input::placeholder {font-size:15px;}
	#search_layer .recent_box {margin-top:20px !important;}
	#search_layer .recent_head {margin-bottom:12px !important;}
	#search_layer .search_close {right:20px !important; top:68px !important; width:26px !important; height:26px !important;}
}

/* ========== 푸터 (footer.jsp) ========== */
/* 밝은 오프화이트 톤 — 본문 배경(#fff)과는 상단 라인 + 아주 옅은 베이지로 구분 */
/* 본문(#fff)과 아주 살짝만 구분되는 오프화이트 + 상단 라인 */
:root {--main-gutter:10vw;}

#footer {background:#fff; color:#2b2926; padding:60px 0 50px; border-top:1px solid #ebe8e4; box-sizing:border-box;}
#footer .inner {width:100%; max-width:none; margin:0 auto; padding:0 var(--main-gutter); box-sizing:border-box;}
#footer a {color:inherit;}
#footer .f_grid {display:flex; justify-content:space-between; align-items:flex-start; gap:40px; width:100%;}
#footer .f_col {flex:0 1 auto;}
#footer .f_col_company {max-width:440px;}
#footer .f_logo {display:inline-flex; align-items:center; gap:12px; margin-bottom:20px; text-decoration:none;}
#footer .f_logo .f_brand {font-family:'Poppins', 'Noto Sans KR', sans-serif; font-size:22px; font-weight:700; letter-spacing:0.28em; line-height:1; color:#2b2926;}
#footer .f_logo .f_emblem {display:block; width:44px; height:44px; object-fit:cover; border-radius:50%;}
#footer .f_logo:hover {opacity:0.75;}
#footer .f_sns {display:flex; gap:12px; margin:0; padding:0; list-style:none;}
#footer .f_sns a {display:flex; align-items:center; justify-content:center; width:30px; height:30px; border:1px solid #d9d5d0; border-radius:50%; font-size:13px; color:#2b2926; text-decoration:none; transition:all 0.25s;}
#footer .f_sns a:hover {background:#2b2926; border-color:#2b2926; color:#fff;}
#footer .f_col_tit {font-size:16px; font-weight:700; letter-spacing:0.04em; margin:0 0 20px 0; color:#2b2926; text-transform:uppercase;}
#footer .f_guide_list {list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px; font-size:14px; font-weight:500; color:#2b2926;}
#footer .f_guide_list a {color:#2b2926; text-decoration:none; transition:color 0.2s;}
#footer .f_guide_list a:hover {color:#1f4d36;}
#footer .f_cs_tel {font-size:26px; font-weight:700; letter-spacing:-0.01em; margin:0 0 14px 0; color:#2b2926; line-height:1;}
#footer .f_cs_time {font-size:14px; color:#555; line-height:1.8;}
#footer .f_cs_time p {margin:0 0 4px 0;}
#footer .f_comp_name {font-size:15px; font-weight:700; margin:0 0 10px 0; color:#2b2926;}
#footer .f_comp_info {font-size:14px; color:#555; line-height:1.85;}
#footer .f_comp_info p {margin:3px 0; word-break:keep-all;}
#footer .f_comp_info a {color:#555; text-decoration:underline; text-underline-offset:2px;}
#footer .f_comp_info a:hover {color:#2b2926;}
#footer .f_comp_copy {margin-top:14px; font-size:13px; color:#777;}

@media all and (max-width:1024px){
	#footer {padding:40px 0 36px;}
	#footer .inner {padding:0 24px;}
	#footer .f_grid {display:grid; grid-template-columns:1fr 1fr; gap:36px;}
	#footer .f_col_company {max-width:none;}
}
@media all and (max-width:768px){
	#footer {padding:36px 0 32px;}
	#footer .inner {padding:0 16px;}
	#footer .f_grid {display:grid; grid-template-columns:1fr 1fr; gap:28px 16px;}
	#footer .f_col_logo {grid-column:1 / -1;}
	#footer .f_col_guide {grid-column:1;}
	#footer .f_col_cs {grid-column:2;}
	#footer .f_col_company {grid-column:1 / -1;}

	/* 모바일 푸터 텍스트 사이즈 2px씩 축소 */
	#footer .f_logo .f_brand {font-size:20px;}
	#footer .f_sns a {font-size:11px;}
	#footer .f_col_tit {font-size:14px; margin-bottom:14px;}
	#footer .f_guide_list {font-size:12px; gap:8px;}
	#footer .f_cs_tel {font-size:24px; margin-bottom:10px;}
	#footer .f_cs_time {font-size:12px;}
	#footer .f_comp_name {font-size:13px; margin-bottom:8px;}
	#footer .f_comp_info {font-size:12px;}
	#footer .f_comp_copy {font-size:11px; margin-top:10px;}
}
/* ========== 스크롤 등장 효과 (include/footer.jsp 의 IntersectionObserver 와 한 쌍) ==========
   화면에 들어오면 아래에서 위로 떠오르며 나타난다. JS 가 동작하지 않으면 그냥 보이는 상태로 둔다. */
.scroll_up {opacity:0; transform:translateY(30px); transition:opacity 0.8s cubic-bezier(0.2,0.7,0.3,1), transform 0.8s cubic-bezier(0.2,0.7,0.3,1);}
.scroll_up.in_view {opacity:1; transform:translateY(0);}
/* 모션 최소화를 켠 사용자에게는 효과 없이 바로 표시 */
@media (prefers-reduced-motion: reduce){
	.scroll_up, .scroll_up.in_view {opacity:1; transform:none; transition:none;}
}

/* ========== 맨 위로 버튼 (include/footer.jsp) ========== */
#btn_gotop {position:fixed; right:24px; bottom:24px; z-index:90; display:flex; align-items:center; justify-content:center; width:48px; height:48px; padding:0; border:1px solid #ddd8d2; border-radius:50%; background:#fff; color:#2b2926; font-size:14px; line-height:1; box-shadow:0 4px 12px rgba(0,0,0,0.08); cursor:pointer; opacity:0; visibility:hidden; transform:translateY(8px); transition:opacity 0.3s, transform 0.3s, visibility 0.3s, background 0.2s, color 0.2s;}
#btn_gotop.show {opacity:1; visibility:visible; transform:translateY(0);}
#btn_gotop:hover {background:#2b2926; border-color:#2b2926; color:#fff;}
@media all and (max-width:768px){
	#btn_gotop {right:16px; bottom:16px; width:42px; height:42px; font-size:13px;}
}

/* ========== 퀵메뉴 & TOP 버튼 ========== */
.quick_step_btn_box01 {
	display: flex;
}
.quick_step_btn_box01 > a {
	position: absolute;
	z-index: 2;
}
.quick_step_btn_box01 > a.btn-prev {
	top: 10px;
	left: 50%;
	transform: translateX(-50%);
}
.quick_step_btn_box01 > a.btn-next {
	bottom: 10px;
	left: 50%;
	transform: translateX(-50%);
}

/* PC 퀵메뉴 */
#sideQuick {
	position: fixed;
	right: 30px;
	bottom: 30px;
	z-index: 9999;
	width: 60px;
}
#sideQuick > ul {	
	border-radius: 0;	
	margin-bottom: 20px;
}
#sideQuick ul li .side_quick_menu01 {
	width: 100%;
	aspect-ratio: 1/0.357;
	display: flex;
	align-items: center;
	gap: 5px;
	text-align: center;
	font-size: 14px;
	font-weight: 400;
	color: #222;
	background-color: #fff;
	box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.07);
	border-radius: 0;
	padding: 0 20px;
}
#sideQuick ul li .side_quick_menu01 + .side_quick_menu01 {
	margin-top: 10px;
}
#sideQuick ul li .side_quick_menu01 img {
	width: fit-content;
}
#top_btn {
	margin-top: 10px;
	display: none;
	opacity: 0;
	transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
	position: absolute;
	bottom: 0;
}
#top_btn.show {
	display: flex;
	justify-content: center;
	opacity: 1;
	transform: translateY(0);
}
#sideQuickMoreBtn {
	position: absolute;
	cursor: pointer;
	bottom: 60px;
	z-index: 2;
	transition: all 0.3s ease-in-out;
	display: flex;
	justify-content: center;
}
.sideQuickBtn {
	width: 55px;
	height: 55px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.08);
	background-color: #fff;
}
#sideQuickMoreBtn .sideQuickBtn {
	background-color: var(--color-primary01, #307dd4);
}
#top_btn .sideQuickBtn {
	background-color: transparent;
	box-shadow: none;
	border: 1px solid var(--color-primary01, #307dd4);
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 0;
}
#top_btn .sideQuickBtn .top_arrow {
	display: block;
	width: 11px;
	height: 11px;
	border-left: 2px solid var(--color-primary01, #307dd4);
	border-top: 2px solid var(--color-primary01, #307dd4);
	border-right: none;
	border-bottom: none;
	background: transparent;
	transform: rotate(45deg) !important;
	position: static;
	margin-top: 5px;
}
#top_btn .sideQuickBtn .top_text {
	font-size: 11px;
	font-weight: 600;
	color: var(--color-primary01, #307dd4);
	position: static;
	transform: none;
	background: transparent;
	width: auto;
	height: auto;
	line-height: 1;
	margin-top: 2px;
}
#sideQuickMoreBtn .sideQuickBtn span {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);	
	background-color: #fff;
	transition: transform 0.3s, opacity 0.3s;
}
#sideQuickMoreBtn .sideQuickBtn span:nth-child(1) {
	width: 12px;
	height: 1px;
}
#sideQuickMoreBtn .sideQuickBtn span:nth-child(2) {
	width: 1px;
	height: 12px;
}
#sideQuickMoreBtn.scroll {
	bottom: 120px;
}
#sideQuickMoreBtn.active .sideQuickBtn span:nth-child(1) {
	transform: translate(-50%, -50%) rotate(45deg);
}
#sideQuickMoreBtn.active .sideQuickBtn span:nth-child(2) {
	transform: translate(-50%, -50%) rotate(45deg);
}
#sideQuickMoreBtn .quick {
	position: absolute;
	bottom: 100%;
	margin-bottom: 10px;
	min-width: 140px;
	display: none;
}

/* 최근 본 상품 / 관심 상품 */
.quick ul li.recent_prod {}
.quick ul li.recent_prod > p {
	height: 40px;
	font-size: 15px;
	color: #fff;
	letter-spacing: -0.025em;
	line-height: 40px;
	background-color: var(--color-primary01, #307dd4);
	text-align: center;
}
.prod_no_box {
	width: 114px;
	height: 114px;
	border-radius: 0;
	background: #F5F5F5;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
}
.prod_no_box > p {
	font-size: 11px;
	font-weight: 400;
	color: #999;
	margin-top: 5px;
}
.quick ul li.recent_prod ul {
	padding: 30px 10px;
	box-sizing: border-box;
	margin-bottom: 10px;
	background-color: #fff;
	border-radius: 0;
	position: relative;
}
.quick ul li.recent_prod ul li {
	border: unset;
	border-radius: 0;
	aspect-ratio: 1/1;
	overflow: hidden;
	margin-bottom: 10px;
}
.quick ul li.recent_prod ul li:last-of-type { margin-bottom: 0; }
.quick ul li.recent_prod ul li img { width: 100%; height: 100%; object-fit: cover; }
.quick ul li.recent_prod .quick_pager { margin-top: 0; margin-bottom: 30px; }
.quick ul li.recent_prod .quick_pager a { display: inline-block; vertical-align: middle; width: auto; height: auto; border: 0 none; margin: 0 3px; line-height: 14px; font-size: 14px; color: #b6b6b6; }
.quick ul li.recent_prod .quick_pager a.active { color: #666666; }
.quick ul.zzim { margin-top: 30px; }
.quick ul li.top_btn { width: 100%; height: 40px; background-color: #000; box-sizing: border-box; line-height: 48px; text-align: center; }
.quick ul li.top_btn a { display: block; color: #fff; line-height: 40px; font-size: 15px; letter-spacing: -0.025em; }

/* 모바일에서 퀵메뉴 위치 조정 */
@media all and (max-width:768px) {
	#sideQuick {
		right: 10px;
		bottom: 10px;
		z-index: 10002;
	}

	#sideQuickMoreBtn .quick {
		right: auto;
		left: auto;
		transform: translateX(-30px);
	}
}
/* ========== END 퀵메뉴 & TOP 버튼 ========== */