@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&display=swap');
/* Noto 한글,영문,숫자,특문(약관에서만)*/
@font-face {
	font-family:'Noto Sans CJK KR_tos';
	src:url('../font/NotoSansCJKkr-Regular.otf') format('opentype');
	unicode-range: U+AC00-D7A3, U+0030-0039, U+0021-007E, U+0041-007A;
}

/* hotpods 영문,숫자,특문 / Noto 한글*/
@font-face {
	font-family:'hotpods';
	src:url('../font/hotpods.woff') format('woff'),
		url('../font/hotpods.ttf') format('truetype');
	unicode-range: U+0041-007A, U+0030-0039, U+0021-007E;
}
@font-face {
	font-family:'hotpods_bold';
	src:url('../font/hotpods_bold.woff') format('woff'),
		url('../font/hotpods_bold.ttf') format('truetype');
	unicode-range: U+0041-007A, U+0030-0039, U+0021-007E;
}
@font-face {
	font-family:'hotpods_light';
	src:url('../font/hotpods_light.woff') format('woff'),
		url('../font/hotpods_light.ttf') format('truetype');
	unicode-range: U+0041-007A, U+0030-0039, U+0021-007E;
}
@font-face {
	font-family:'hotpods_regular';
	src:url('../font/hotpods_regular.woff') format('woff'),
		url('../font/hotpods_regular.ttf') format('truetype');
	unicode-range: U+0041-007A, U+0030-0039, U+0021-007E;
}

@font-face {
	font-family:'Noto Sans CJK KR_bold';
	src:url('../font/NotoSansCJKkr-Bold.otf') format('opentype');
	unicode-range: U+AC00-D7A3;
}
@font-face {
	font-family:'Noto Sans CJK KR';
	src:url('../font/NotoSansCJKkr-Regular.otf') format('opentype');
	unicode-range: U+AC00-D7A3;
}
@font-face {
	font-family:'Noto Sans CJK KR_med';
	src:url('../font/NotoSansCJKkr-Medium.otf') format('opentype');
	unicode-range: U+AC00-D7A3;
}
/* ANI */
@keyframes rotate-axis {
	from	{ transform:perspective(400px) rotateY(0deg);	}
	to	{ transform:perspective(400px) rotateY(360deg);	}
}

html, body { width:100%; height:100%; margin:0; padding:0; }
body { font-size:12px; }
* { margin:0; padding:0; box-sizing:border-box; text-decoration:none; }
input, select, textarea, body, code, button { font-family:'hotpods_regular', 'Noto Sans CJK KR', sans-serif; }
ul, ol, li { list-style:none; }
a,
a:link,
a:visited { text-decoration:none; color:inherit; }
img { border-style:none; border:0; }
select { padding:0 30px 0 15px; height:40px; border:1px solid #e0e0e0; background:#fff url(../images/ico_select.png) no-repeat right 10px center; background-size:14px 8px; font-size:14px; appearance:none; }
table { width:100%; border:0; border-spacing:0; border-collapse:collapse; }
input[type="text"], input[type="password"] { padding:2px 4px 2px 15px; height:40px; line-height:40px; border:1px solid #e0e0e0; color:#000; font-size:14px; outline:1px; }
input[type="text"], input[type="password"]:hover { border:1px solid #000; }
input[type="radio"] { width:15px; height:15px; border:0; background:url(../images/ico_radio.png) no-repeat 0 0; background-size:18px 18px; vertical-align:middle; cursor:pointer; outline:0; appearance:none; }
input[type="radio"]:checked { background-image:url(../images/ico_radio_on.png); -webkit-transition:.2s ease-out; transition:.2s ease-out; }
input[type="radio"] + label { margin:0 15px 0 10px; vertical-align:middle; }
/*input[type="radio"] + label, input[type="checkbox"] + label { margin:0 15px 0 10px; vertical-align:middle; }*/
input[type="checkbox"] { width:24px; height:24px; border:1px solid #d9d9d9; background:url(../images/ico_checkbox.svg) no-repeat center; vertical-align:middle; cursor:pointer; outline:0; appearance:none; }
input[type="checkbox"]:checked { background:url(../images/ico_checkbox_on.svg) no-repeat center; border:1px solid #d9d9d9; transition:none; }
input[type="button"], button { color:#000; }
input[type="date"] { appearance:none; -webkit-appearance:none; -moz-appearance:none; color:#000; }

.mob_show,
.mob_flex { display:none !important; }
.mob_hide { }
.w_full { width:100%; }
.ellipsis { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; word-break:break-all; }
.overlay_on_wrap { z-index:12 !important; }
.overlay { display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:#00000022; z-index:11; }
.overlay.on { display:block; }
.overlay.nodark { display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:unset; z-index:11; }
.overlay.nodark.on { display:block; }
.backdrop { display:none; position:fixed; top:0; left:0; width:100%; height:100%; backdrop-filter:blur(4px); z-index:11; }
.backdrop.on { display:block; }
.white_circle { margin-top:4px; margin-left:2px; width:10px; height:10px; background:#fff; border:0.5px solid #000; border-radius:10px; }

.emo_wrap { width:100%; height:calc(100vh - 320px); text-align:center; }
.emo_wrap .emo_half { padding:20px; height:50%; }
.emo_wrap .emo_half img { height:100%; opacity:0.4; }
.emo_wrap .emo_half:last-child img { transform:scaleX(-1); }

.scale_line_box { position:relative; border:2px solid #000; width:fit-content; padding:8px; }
.scale_line_box.txt_only { border:0; }
.scale_line_box.line_only .slb_txt { visibility:hidden; }
.scale_line_box.txt_only .slb_outline { visibility:hidden; }
.scale_line_box .slb_rect { position:absolute; width:10px; height:10px; border:2px solid #000; background:#fff; }
.scale_line_box .slb_rect.tl { top:-6px; left:-6px;  }
.scale_line_box .slb_rect.tc { top:-6px; left:calc(50% - 5px); }
.scale_line_box .slb_rect.tr { top:-6px; right:-6px; }
.scale_line_box .slb_rect.cl { top:calc(50% - 5px); left:-6px;  }
.scale_line_box .slb_rect.cr { top:calc(50% - 5px); right:-6px; }
.scale_line_box .slb_rect.bl { bottom:-6px; left:-6px;  }
.scale_line_box .slb_rect.bc { bottom:-6px; left:calc(50% - 5px); }
.scale_line_box .slb_rect.br { bottom:-6px; right:-6px; }

.line_radio { width:100%; }
.line_radio .lines { width:100%; border:0.5px solid gray; }
.line_radio .radios { margin-top:-12px; width:100%; display: grid; grid-template-columns: 10% 19% 19% 19% 19% 14%; }
/*
.line_radio .radios { margin-top:-12px; width:100%; display:flex; }
*/
.line_radio .radios input[type="radio"],
.line_radio .radios input[type="radio"]:checked { background:#EDECE8; border:0.5px solid gray; border-radius:50%; position:relative; }
.line_radio .radios input[type="radio"]:checked::after { content:''; display:block; top:50%; left:50%; transform: translate(-50%, -50%); width:7.5px; height:7.5px; background:#000; border-radius:8px; position:absolute; }
.line_radio .radios > div { flex:1; position:relative; width:100%; text-align:center; }
.line_radio .radios > div:first-child { text-align:left; }
.line_radio .radios > div:last-child { text-align:right; }
/*
.line_radio .radios > div:nth-child(2) { text-align:left; }
.line_radio .radios > div:nth-last-child(2) { text-align:left; }
.line_radio .radios > div:nth-child(2) > div { padding-left:20%; }
.line_radio .radios > div:nth-last-child(2) > div { padding-left:60%; }
*/

.chk_layer {
	position:fixed; top:0; left:0; width:100%; height:100%;
	background-color:#fff; background-position:0 0, 10px 10px; background-size:20px 20px; font-size:13px;
	background-image:repeating-linear-gradient(45deg, #ededed 25%, transparent 25%, transparent 75%, #ededed 75%, #ededed), repeating-linear-gradient(45deg, #ededed 25%, #fff 25%, #fff 75%, #ededed 75%, #ededed);
}
.bold_font { font-family:'hotpods_bold'; }
.kr_font { font-family:'Noto Sans CJK KR'; }
.kr_font_bold { font-family:'Noto Sans CJK KR_bold'; }
.reg_font { font-family:'hotpods_regular'; }
.light_font { font-family:'hotpods_light'; }
.reg_kr { font-family:'Hotpods_regular','Noto Sans CJK KR'; }
.reg_kr_bold { font-family:'Hotpods_regular','Noto Sans CJK KR_bold'; }
.light_kr { font-family:'Hotpods_light','Noto Sans CJK KR'; }
.light_kr_bold { font-family:'Hotpods_light','Noto Sans CJK KR_bold'; }

.clear { clear:both; }
.cursor { cursor:pointer; }
.bottom_space { margin-bottom:40px; }
.c_title_area { clear:both; width:100%; color:#1a1a1a; font-size:30px; font-weight:700; text-align:center; word-break:keep-all; word-wrap:break-word; }
.p_title { position:absolute; top:90px; right:170px; font-family:'hotpods_regular', 'Noto Sans CJK KR'; }
.path ol { float:right; padding-right:12px; padding-bottom:30px; }
.path li { display:inline-block; }
.path li a { color:#7d7d7d; font-size:12px; }
.path li:not(:first-child):before { content:"/"; margin:0 8px 0 4px; vertical-align:top; }
.path li:last-child a { color:#000; }
.step { margin:40px auto 50px auto; width:92%; text-align:center; }
.step li { display:inline-block; color:#8a8a8a; font-size:14px; font-weight:bold; }
.step li.selected { color:#1a1a1a; }
.step li:not(:last-child):after { content:""; margin:-2px 30px 0; display:inline-block; width:8px; height:8px; vertical-align:middle; border-left:1px solid #e0e0e0; border-bottom:1px solid #e0e0e0; transform:rotate(-135deg); }
.menu { position:relative; width:100%; margin-bottom:20px; background:#fff; /*border-bottom:1px solid #1a1a1a; box-shadow:0 -1px 0 0 #1a1a1a inset; */ }
.menu ul li { float:left; margin-left:15px; }
.menu ul li a { position:relative; display:inline-block; padding:16px 20px; background:#fff; font-size:20px; color:#8a8a8a; text-align:center; }
.menu ul li.on a { border:1px solid #1a1a1a; border-bottom:1px solid #fff; color:#000; font-weight:400; }
.menu .menu_desc { position:absolute; top:8px; right:10px; color:#909090; line-height:24px; }
.help { margin-top:40px; }
.help .help_title { display:block; margin-bottom:20px; font-size:16px; color:#000; }
.help .help_desc { padding:20px; border:1px solid #e5e5e5; border-top:2px solid #1a1a1a; }
.help .help_desc .help_desc_title { margin:22px 0 12px; color:#000; font-size:12px; }
.help .help_desc .help_desc_content { color:#6d6d6d; font-size:12px; line-height:21px; }
.no_data { padding:56px 0; color:#6d6d6d; text-align:center; }
.rect { margin-bottom:4px; padding:2px 6px; width:fit-content; max-width:100%; background:#ffffff; border:0.5px solid #000; line-height: 1; font-size: 12px; }
.rect_s { margin-bottom:4px; padding:2px 6px; width:fit-content; max-width:100%; background:#ffffff; border:0.5px solid #000; line-height: 1; font-size: 10px; }
.round { padding:0px 6px; width:fit-content; max-width:100%; background:#ffffff; border:0.5px solid #000; border-radius:15px; height:30px; line-height:30px; }
.g_info .round, .g_info .rect_s { height:15px; margin-bottom: 5px; padding: 0 10px; display: flex; align-items: center; }
.g_info .rect { height: 15px; margin-bottom: 5px; padding: 2px 10px; }
.rect.height { font-size:12px; height: 20px; line-height:20px; padding: 0 6px; margin-bottom:10px; }
.rect.adjust { line-height:14px; height:fit-content; }
.round.height { line-height: 20px; font-size: 12px; height: 20px; margin-bottom:10px; }
.circle_num { display:flex; align-items:center; justify-content:center; border:0.5px solid black; border-radius:16px; width:15px; height:15px; background:#fff; font-size:8px; }

.guide_line { position:fixed; top:0; left:0; width:100%; height:100%; box-sizing:border-box; pointer-events:none; }
.guide_line  * { box-sizing:border-box; }
.guide_line .guide_top_line { position:absolute; top:0; left:0; width:100%; height:80px; border-bottom:0.5px solid #969696; }
.guide_line .guide_lft_line { position:absolute; top:0; left:0; width:80px; height:100%; border-right:0.5px solid #969696; }
.guide_line .guide_rgt_line { position:absolute; top:0; right:0; width:80px; height:100%; border-left:0.5px solid #969696; }
.guide_line .guide_btm_line { position:absolute; bottom:0; left:0; width:100%; height:80px; border-top:0.5px solid #969696; }
.guide_line .guide_tl_rect { position:absolute; top:79px; left:79px; width:80px; height:80px; }
.guide_line .guide_tl_rect:before { content:''; position:absolute; top:0; right:0; width:0.5px; height:calc(100% - 10px); background:#969696; z-index:1; }
.guide_line .guide_tl_rect:after { content:''; position:absolute; bottom:0; left:0; height:0.5px; width:calc(100% - 10px); background:#969696; z-index:1; }
.guide_line .guide_tr_rect { position:absolute; top:79px;right:79px; width:80px; height:80px; }
.guide_line .guide_tr_rect:before { content:''; position:absolute; top:0; left:0; width:0.5px; height:calc(100% - 10px); background:#969696; z-index:1; }
.guide_line .guide_tr_rect:after { content:''; position:absolute; bottom:0; right:0; height:0.5px; width:calc(100% - 10px); background:#969696; z-index:1; }
.guide_line .guide_bl_rect { position:absolute; bottom:79px; left:79px; width:80px; height:80px; }
.guide_line .guide_bl_rect:before { content:''; position:absolute; top:0; left:0; height:0.5px; width:calc(100% - 10px); background:#969696; z-index:1; }
.guide_line .guide_bl_rect:after { content:''; position:absolute; top:10px; right:0; width:0.5px; height:calc(100% - 10px); background:#969696; z-index:1; }
.guide_line .guide_br_rect { position:absolute; bottom:79px;right:79px; width:80px; height:80px; }
.guide_line .guide_br_rect:before { content:''; position:absolute; top:0; left:10px; height:0.5px; width:calc(100% - 10px); background:#969696; z-index:1; }
.guide_line .guide_br_rect:after { content:''; position:absolute; top:10px; left:0; width:0.5px; height:calc(100% - 10px); background:#969696; z-index:1; }
.guide_line .guide_vert1 { position:absolute; top:0; left:0; width:calc(25% + 80px); height:100%; border-right:0.5px solid #969696; }
.guide_line .guide_vert2 { position:absolute; top:0; left:0; width:50%; height:100%; border-right:0.5px solid #969696; }
.guide_line .guide_vert3 { position:absolute; top:0; left:0; width:calc(75% - 80px); height:100%; border-right:0.5px solid #969696; }
.guide_line .guide_top_center_circle { position:absolute; top:calc(120px - 10px); left:calc(50% - 10px); width:20px; height:20px; border-radius:50%; border:0.5px solid #969696; }
.guide_line .guide_top_center_circle .gl { position:absolute; top:50%; left:-10px; width:calc(100% + 20px); border-bottom:0.5px solid #969696; }
.guide_line .guide_btm_center_circle { position:absolute; bottom:calc(120px - 10px); left:calc(50% - 10px); width:20px; height:20px; border-radius:50%; border:0.5px solid #969696; }
.guide_line .guide_btm_center_circle .gl { position:absolute; top:50%; left:-10px; width:calc(100% + 20px); border-bottom:0.5px solid #969696; }
/* 가이드라인 원복용 */
.guide_line .guide_hor1 { position:absolute; top:0; left:0; width:100%; height:50%; border-bottom:0.5px solid #969696; }
.guide_line .guide_center_circle { position:absolute; top:calc(50% - 100px); left:calc(50% - 100px); width:200px; height:200px; border-radius:50%; border:0.5px solid #969696; }
.guide_line .guide_lft_center_circle { position:absolute; top:calc(50% - 10px); left:calc(120px - 10px); width:20px; height:20px; border-radius:50%; border:0.5px solid #969696; }
.guide_line .guide_lft_center_circle .gl { position:absolute; left:50%; top:-10px; height:calc(100% + 20px); border-right:0.5px solid #969696; }
.guide_line .guide_rgt_center_circle { position:absolute; top:calc(50% - 10px); right:calc(120px - 10px); width:20px; height:20px; border-radius:50%; border:0.5px solid #969696; }
.guide_line .guide_rgt_center_circle .gl { position:absolute; left:50%; top:-10px; height:calc(100% + 20px); border-right:0.5px solid #969696; }
/* 가이드라인 원복용 */
/*
.guide_line .guide_center_circle { position:absolute; top:calc(50% - 100px); left:calc(50% - 100px); width:200px; height:200px; border-radius:50%; border:0.5px solid #969696; }
.guide_line .guide_hor1 { position:absolute; top:0; left:0; width:100%; height:50%; border-bottom:0.5px solid #969696; }
.guide_line.landing .guide_lft_center_circle { position:absolute; top:calc(50% - 10px); left:calc(120px - 10px); width:20px; height:20px; border-radius:50%; border:0.5px solid #969696; }
.guide_line.landing .guide_lft_center_circle .gl { position:absolute; left:50%; top:-10px; height:calc(100% + 20px); border-right:0.5px solid #969696; }
.guide_line.landing .guide_rgt_center_circle { position:absolute; top:calc(50% - 10px); right:calc(120px - 10px); width:20px; height:20px; border-radius:50%; border:0.5px solid #969696; }
.guide_line.landing .guide_rgt_center_circle .gl { position:absolute; left:50%; top:-10px; height:calc(100% + 20px); border-right:0.5px solid #969696; }
*/
.guide_line.line3 .guide_vert1 { width:calc(((100% - 320px) * 0.333) + 160px); }
.guide_line.line3 .guide_vert2 { width:calc(((100% - 320px) * 0.333) * 2 + 160px); }
.guide_line.line3 .guide_vert3 { display:none; }
.guide_line.line3 .guide_center_circle { left:calc(((100% - 320px) * 0.333) + 160px - 100px); }
.guide_line.line3 .guide_top_center_circle { left:calc(((100% - 320px) * 0.333) + 160px - 10px); }
.guide_line.line3 .guide_btm_center_circle { left:calc(((100% - 320px) * 0.333) + 160px - 10px); }


.contents { width:100%; max-width:1230px; margin:0 auto; }
/* 로그인페이지 */
.login_form { margin-left:auto; margin-right:auto; width:90%; max-width:420px; text-align:center; font-weight:bold; }
.login_form .login_input { display:block; margin-bottom:8px; padding:0 20px; width:100%; height:48px; line-height:48px; border:1px solid #e3e3e3; font-weight:bold; }
.login_form .btns_wrap { margin-top:32px; }
.login_form .btns_wrap .btn_black { width:100%; height:56px; line-height:56px; font-size:16px; font-weight:bold; background:#1a1a1a; color:#fff; text-align:center; }
.login_form .find_wrap { display:flex; justify-content:center; text-align:center; }
.login_form .find_wrap div { margin:20px 0 0; padding:0 10px; font-size:14px; }
.login_form .join_wrap { margin:40px auto 0 auto; display:flex; flex-direction:column; justify-content:center; width:100%; border:1px solid #e3e3e3; text-align:center; }
.login_form .join_wrap > div:nth-child(1) { font-size:18px; color:#1a1a1a; }
.login_form .join_wrap > div:nth-child(2) { margin:8px 0 23px 0; font-size:14px; color:#8a8a8a; }
.login_form .join_wrap > div:nth-child(3) { margin:0 auto; width:152px; height:56px; border:1px solid #d6d6d6; }
.login_form .ord_title { margin:40px 0 8px; color:#1a1a1a; font-size:16px; font-weight:700; }
.login_form .ord_desc { margin:0px 0 24px; color:#8a8a8a; font-size:14px; line-height:22px; }

/* 가입 / 동의 페이지 */
.join_form { margin:0 auto; width:90%; max-width:720px; }
.join_form .agree_all { margin:0 0 24px; padding:0 0 24px; border-bottom:1px solid #e8e8e8; font-size:16px; }
.join_form .agree_all h3 { margin:0 0 24px; padding:0 0 16px; border-bottom:3px solid #1a1a1a; color:#1a1a1a; font-size:16px; }
.join_form .agree_desc { margin:4px 0 0 38px; color:#939393; font-size:14px; font-weight:bold; }
.join_form .agree_box { }
.join_form .agree_box .agree { position:relative; margin-bottom:40px; font-size:16px; }
.join_form .agree_box .agree_txt { display:none; margin-top:20px; padding:20px; width:100%; height:152px; color:#6d6d6d; font-size:12px; font-weight:bold; line-height:20px; border:1px solid #e5e5e5; word-wrap:break-word; overflow:hidden; overflow-y:scroll; }
.join_form .agree_box .agree_txt.on { display:block; }
.join_form .agree_box .chk_inline { padding: 24px 0 0 16px; font-size:14px; }
.join_form .agree_box .chk_inline li { display:inline-block; margin:2px 40px 2px 0; }
.join_form .agree_box .chk_inline li:last-child { margin-right:0; }
.join_form .agree_box .arrow { position:absolute; right:10px; display:inline-block; width:8px; height:8px; border-left:1px solid #000; border-bottom:1px solid #000; text-indent:120%; white-space:nowrap; cursor:pointer; transition:.3s ease-out; }
.join_form .agree_box .arrow.down { transform:rotate(-45deg); }
.join_form .agree_box .arrow.up { transform:rotate(135deg); }
.join_form .btns_wrap { display:flex; margin-top:40px; }
.join_form .btns_wrap .btn_l { flex:1; height:56px; line-height:56px; font-size:16px; background:#ffffff; color:#000000; border:1px solid #d6d6d6; }
.join_form .btns_wrap .btn_r { flex:1; height:56px; line-height:56px; font-size:16px; background:#1a1a1a; color:#ffffff; border:1px solid transparent; margin-left:10px; }

.join_table { border-top:2px solid #1a1a1a; }
.join_table th { padding-left:10px; width:24%; background-color:#f6f6f6; border-bottom:1px solid #e5e5e5; color:#1a1a1a; font-size:14px; font-weight:700; text-align:left; }
.join_table td { padding:10px 20px; width:76%; }
.join_table .ico { display:inline-block; margin-right:8px; vertical-align:middle; }
.join_table .join_input { display:block; padding:2px 4px 2px 15px; width:100%; height:40px; line-height:40px; border:1px solid #e0e0e0; color:#000; font-size:13px; font-weight:bold; }
.join_table .txt_info { color:#868686; font-size:12px; line-height:22px; }
.join_table .mob { color:#7f7f7f; font-size:20px; }
.join_table .mob_wrap { display:grid; grid-template-columns:4fr 1fr 4fr 1fr 4fr; width:100%; text-align:center; }
.join_table .mob select { width:100%; }
.join_table .mob input { width:100%; }
.join_table .btns_wrap .btn_l { flex:1; height:56px; line-height:56px; font-size:16px; background:#ffffff; color:#000000; border:1px solid #d6d6d6; }
.join_table .btns_wrap .btn_r { flex:1; height:56px; line-height:56px; font-size:16px; background:#1a1a1a; color:#ffffff; border:1px solid transparent; margin-left:10px; }

.input.join_on::placeholder, .sel_txt.join_on::placeholder { color:#C61919; }
.join_red.join_on, .input.light_kr.join_on, .dis_flex .input.join_on, .input.this_color.join_on, .this_label.join_on { color:#C61919 !important; }
label.this_label { cursor:pointer !important;}

/* 아이디/비밀번호 찾기 */
.find_form { margin-left:auto; margin-right:auto; width:90%; max-width:420px; font-weight:bold; }
.find_form .find_title { width:100%; color:#1a1a1a; font-size:30px; font-weight:700; text-align:center; }
.find_form .find_desc { margin:20px 0 0; text-align:center; }
.find_form .find_desc li { margin-bottom:5px; color:#6d6d6d; font-size:14px; line-height:21px; }
.find_form .find_sel_wrap { width:100%; }
.find_form .find_sel_wrap .find_sel_title { display:block; margin:0 0 2px; padding:0 4px 0 0; width:100%; line-height:22px; }
.find_form .find_sel_wrap .find_sel { margin:5px 0 20px; line-height:22px; }
.find_form .find_sel_wrap .find_sel select { width:100%; height:40px; }
.find_form .find_sel_wrap .find_sel .chk_wrap { margin-top:10px; }
.find_form .find_input { width:100%; }
.find_form .btns_wrap { margin-top:32px; }
.find_form .btn_black { width:100%; height:56px; line-height:56px; font-size:16px; font-weight:bold; background:#1a1a1a; color:#fff; text-align:center; }

/* 좌상단 메뉴 */
.btn_left_menu { position:fixed; display:flex; justify-content:center; align-items:center; top:0; left:0; width:80px; height:80px; cursor:pointer; z-index:6; }
.btn_left_menu > img { width:40px; height:auto; }
/* 우상단 메뉴 */
.btn_right_menu { position:fixed; display:flex; justify-content:center; align-items:center; top:0; right:0; width:80px; height:80px; cursor:pointer; z-index:6; }
.btn_right_login { position:fixed; display:flex; justify-content:center; align-items:center; top:0; right:120px; width:40px; height:90px; cursor:pointer; z-index:6; padding: 0 5px;}
.btn_right_cart { position:fixed; display:flex; justify-content:center; align-items:center; top:0; right:80px; width:40px; height:90px; cursor:pointer; z-index:6; padding: 0 5px; }
.btn_right_menu .ico { animation:rotate-axis 4s linear infinite; transform-style:preserve-3d; }
.btn_right_menu > img { width:40px; height:auto; }
/* 우하단 메뉴*/
.btn_btm_right_menu { position:fixed; display:flex; justify-content:center; align-items:center; bottom:0; right:0; width:80px; height:80px; cursor:pointer; z-index:6; }
.btn_btm_right_menu > img { width:40px; height:auto; }

/* 모바일 사이트네임 */
.mb_site_name { display:none; position:fixed; top:10px; left: 140px; width: calc(100% - 280px); z-index:12; text-align:center; font-family: 'hotpods_regular', 'Noto Sans CJK KR'; }
.mb_site_name_one { border: 0.5px solid black; border-radius: 16px; background: #fff; padding: 0 10px; display: block; width: 140px; height: 30px; font-size: 14px; position: relative; top: 5px; line-height: 30px; cursor:pointer; transition: all .5s ease; }
.mb_site_name_one.on { padding:10px; height:145px; }
.mb_site_name_sub { border: 0.5px solid #000000; border-radius: 16px; background: #fff; width: 122px; height: 25px; margin: 5px auto; font-size: 13px; display: flex; align-items: center; justify-content: center; }
.mb_site_name_sub.on { background: #C1C5C7; }
.mb_site_name_list { opacity: 0; visibility: hidden; height:0; position: absolute; top: 35px; left: calc((100% / 2) - 61px); } 
.mb_site_name_list.on { opacity: 1; visibility: visible; height:auto; transition: all 2s ease; }
/* 상단메뉴 */
.top_menu_wrap { position:fixed; top:28px; width:calc(100% - 160px); left:80px; display:flex; justify-content:center; z-index:3; }
.top_menu_wrap * { font-family:'hotpods_bold'; }
.top_menu_wrap .top_menu { position:relative; margin:0 5px; display:flex; line-height:30px; justify-content: center; width:140px; height:30px; background:#ffffffff; border:0.5px solid #000000ff; border-radius:20px; color:#000; font-size:14px; white-space:nowrap; overflow:hidden; cursor:pointer; transition:all .5s ease; }
.top_menu_wrap .top_menu .top_submenu { padding-left:30px; display:none; }
.top_menu_wrap .top_menu .top_submenu a { padding:0px 16px; margin-right:1%; background:#fff; color:#000; border:0.5px solid #000; border-radius:14px; font-size:14px; transition:all .5s ease; height: 21px; line-height: 21px; }
.top_menu_wrap .top_menu .top_submenu .on { background:#C1C5C7; color:#000; }

.top_menu_wrap .top_menu.on > div { display:flex; align-items: center; }

.top_menu_wrap .top_menu.hotpod.on { width:470px; }
.top_menu_wrap .top_menu.hotpodx.on { width:700px; }
.top_menu_wrap .top_menu.on .top_submenu a { display:inline-block; opacity:1; visibility:visible; }
.top_menu_wrap .top_menu.on .top_submenu a:hover { background:#C1C5C7; color:#000; }

.top_menu_wrap .top_menu.drop.on { background:#fff; color:#000; width:436px; }
.top_menu_wrap .top_menu.shop.on { background:#fff; color:#000; width:850px; }

.top_menu_wrap.line3 { left:-40px; width:calc(((100% - 320px) * 0.333) * 2 + 400px); }

.body_container { position:relative; padding-top:160px; z-index:1; }
.body_container.maker { padding-top:120px; }
.body_container .body_contents { width:calc(100% - 160px); margin:0 auto; }

/* 좌측 슬라이드메뉴 */
.left_menu { position:fixed; display:block; top:0; left:-142px; top:100px; width:142px; height:100%; z-index:5; transition:left 0.3s ease-in-out; }
.left_menu.on { left:0; }
.left_menu .btn_top_area { width:100%; height:90px; }
.left_menu .btn_top_area .btn_top { position:absolute; display:flex; justify-content:center; align-items:center; top:0; left:90px; width:90px; height:90px; }
.left_menu .btn_top_area .btn_top:nth-child(2) { left:180px; }
.left_menu .dropdown_area { position:relative; width:100%; height:calc(100vh - 90px); overflow-x:hidden; overflow-y:scroll; }
.left_menu .dropdown_area [type="checkbox"]:checked,
.left_menu .dropdown_area [type="checkbox"]:not(:checked) { position:absolute; left:-9999px; opacity:0; pointer-events:none; }
.left_menu .menu { margin-left:10px; margin-bottom:5px; line-height:30px; font-family:'hotpods_bold'; font-size:18px; background:#ffffff; border:0.5px solid #000000ff; padding:6px 10px 0 10px; width:fit-content; cursor:pointer; display: flex; height: 30px; align-items: center; }
.left_menu .submenu { margin-left:20px; margin-bottom:5px; height:20px; line-height:20px; font-family:'hotpods_bold'; font-size:14px; background:#ffffff80; border:0.5px solid #000; padding:5px 10px 0 10px; width:fit-content; box-sizing:content-box; }
.left_menu .submenu.on { background:#B0B5B7b3; }
.left_menu .on,
.left_menu .menu:hover,
.left_menu .submenu:hover { background:#C1C5C7; }
.left_menu .dip_menu { display:none; }

/* 드롭다운 */
.dropdown { position:relative; display:block; width:100%; font-size:20px; }
.dropdown a { position:relative; padding:10px 15px 10px 20px; margin:2px 0; display:flex; align-items:center; justify-content:space-between; color:#000; font-size:20px; transition:all 200ms linear; }
.dropdown label:before { content:"▶"; margin-right:5px; display:inline-block; color:gray; transform:scale(0.7); }
.cb_dropdown:checked + label:before { content:"▼"; }
.cb_dropdown:checked + label,
.cb_dropdown:not(:checked) + label { position:relative; padding:10px 15px 10px 20px; display:block; color:#000; font-size:20px; cursor:pointer; transition:all 200ms linear; }
.dropdown a:hover,
.cb_dropdown:checked + label:hover,
.cb_dropdown:not(:checked) + label:hover { background-color:#ddd; }
.dropdown-sub { position:relative; display:block; width:100%; opacity:0; max-height:0; padding-left:10px; padding-right:3px; overflow:hidden; transition:all 200ms linear; }
.cb_dropdown:checked + label + .dropdown-sub { max-height:999px; opacity:1; }

/* 메인페이지 */
.content { width:100%; overflow:hidden; }
section.section { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; width:100%; height:100vh; text-align:center; overflow:hidden; }
.section { width:100%; height:100%; }
.section.bg1 { background:url('../images/bg_main.png'); background-size:cover; background-position:center center; background-repeat:no-repeat; }
.section .bot { position:absolute; bottom:20px; display:block; width: calc(100% - 140px); }
.section .bot div:nth-child(1) { float:left; margin-left:100px; line-height:12px; }
.section .bot div:nth-child(2) { float:right; margin-right:100px; width:150px; text-align:right; line-height:12px; }
.section .bot div:nth-child(3) { width: fit-content; margin: 0 auto; }
.section .scroll_hint { position:absolute; padding:0; top:75%; left:calc(50% - 50px); width:100px; height:30px; line-height:30px; font-size:10px; border:0.5px solid #00000066; border-radius:14.803px; }

.section .top_left { position:absolute; top:180px; left:180px; font-family: 'Hotpods_regular', 'Noto Sans CJK KR_bold'; }
.section .top_left > div { text-align:left; }
.section .btm_right { position:absolute; bottom:180px; right:180px; text-align:left; font-family: 'Hotpods_regular', 'Noto Sans CJK KR_bold'; }
.section .btm_right > div { text-align:center; }
.section .bold { font-family:'hotpods_bold', 'Noto Sans CJK KR'; }
.section .txt_large { font-family:'hotpods_regular', 'Noto Sans CJK KR'; font-size:130px; }
.section .txt { font-size:36px; }
.section .center_img { width:auto; height:100%; max-height:750px; }
.section .c_title { font-family:'hotpods_bold'; font-size:200px; transform:translateZ(0); } /* 강제 하드웨어 가속 */
.section .t_title { margin-bottom:20px; font-family:'hotpods_regular', 'Noto Sans CJK KR'; font-size:100px; line-height:120px; transform:translateZ(0); }
.section .txt_wrap { margin-top:70px; line-height:50px; padding: 0 30px; font-family: 'Hotpods_regular', 'Noto Sans CJK KR_bold'; }
.section .w1 { width:730px; }

.section .news_wrap { width:calc(100% - 240px); margin:20px auto; padding:50px; background:#C0C5C9b2; border:0.5px solid #000000; border-radius:16px; backdrop-filter:blur(3px); }
.section .news_title { text-align:left; padding-bottom:50px; font-family: 'hotpods_regular', 'Noto Sans CJK KR'; }
.section .news_wrap .grid2 { display:grid; grid-template-columns:1fr 1fr; gap:20px; width:100%; margin-bottom:100px; }
.section .news_wrap .grid2 > div { position:relative; display:flex; align-items:flex-end; background-size:cover; background-position:center center; background-repeat:no-repeat; aspect-ratio:1; border-radius:14.803px; border: 0.5px solid #707070; box-shadow: 0px 0.1px 1px 0px; }
.section .news_wrap .grid2 .g_info { text-align:left; margin-left:40px; z-index:1; }
.section .news_wrap .grid2 .g_info .g_title { font-size:24px; color:#fff; font-family:'hotpods_regular', 'Noto Sans CJK KR_bold'; }
.section .news_wrap .grid2 .g_info .g_desc { font-size:14px; color:#fff; font-family:'hotpods_light', 'Noto Sans CJK KR'; }
.section .news_wrap .grid2 .g_info .g_btn { font-family: 'Noto Sans CJK KR_med'; margin-top:16px; margin-bottom:40px; padding:10px 20px; width:fit-content; height:30px; background:#ffffff; color:#000; font-size:14px; font-weight:bold; border:0.5px solid #000; border-radius:14.803px; cursor:pointer; display: flex; align-items: center; }
.section .news_wrap .grid4 { display:grid; grid-template-columns:1fr 1fr 1fr 1fr; gap:20px; width:100%; margin-bottom:100px; }
.section .news_wrap .grid4 > div { position:relative; }
.section .news_wrap .grid4 .g_item_img { width:78%; }
.section .news_wrap .grid4 .g_info { position:absolute; top:0; left:0; width:100%; text-align:left; font-size:10px; }
.section .news_wrap .grid4 .g_info .rect_s { font-family:'hotpods_light', 'Noto Sans CJK KR'; }
.section .news_wrap .grid4 .g_info .round { font-family:'hotpods_regular', 'Noto Sans CJK KR'; }

.menu_bottom { display:grid; grid-template-columns:1fr 2.5fr 3.5fr 2fr; margin:0 auto; width:60%; text-decoration:underline; }
.menu_bottom a { font-size:13px; }
.menu_bottom a:hover { color:gray; }
.company { width: fit-content; font-size: 12px; display: flex; gap: 30px; position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); white-space: nowrap; align-items: center; font-family: 'Hotpods_regular','Noto Sans CJK KR_bold' !important; }
.company_two_line { width: calc(100% - 340px); display: flex; justify-content: center; margin: 0 auto; height: 40px; gap:2.5%; }
/*.company { margin:0 auto; margin-bottom:16px; display:grid; grid-template-columns:2.5fr 3.5fr 2fr 1.2fr 4fr 3.5fr 2fr; width:88%; font-size:12px; font-weight:bold; }*/
.company li { }

.nav { position:fixed; top:50%; right:20px; display:flex; flex-direction:column; transform:translateY(-50%); z-index:3; }
.nav.on { z-index:0; }
.nav button { position:relative; margin-bottom:5px; width:30px; height:30px; background:#fff; font-family:'hotpods_regular', 'Noto Sans CJK KR' !important; border:none; border:0.5px solid #000; transition:color 0.3s, border-radius 0.3s; }
.nav button::before { content:attr(data-section-name); position:absolute; right:60px; bottom:4px; font-size:12px; color:black; white-space:nowrap; visibility:hidden; }
.nav.on button:not(.active)::before { visibility:visible; color:gray; }
/*.nav button:hover { background:#C1C5C7; }*/
.nav button.active { color:black; background:#C1C5C7; border-radius:10px; }
/*.nav button:hover::before,*/ .nav button.active::before { visibility:visible; }
.button1 { background-color: #e93323; }
.button2 { background-color: #eeeeea; }
.button3 { background-color: black; }
.button4 { background-color: #ec722f; }
.button5 { background-color: #ffde00; }
.button6 { background-color: #fcf0ec; }
.center-button {
	position:absolute; top:50%; left:50%; display:flex; align-items:center; justify-content:center; text-align:center;
	width:200px; height:200px; background:#ffffff99; border:0.5px solid #96969699; border-radius:50%;
	color:black; font-size:14px; line-height:1.2; text-decoration:none; transform:translate(-50%, -50%); transition:all 0.5s ease;
	z-index:3; font-family:'hotpods_regular', 'Noto Sans CJK KR_med'; font-weight: bold;
}

.footer_area { width:100%; min-height:50vh; font-family: 'hotpods_regular', 'Noto Sans CJK KR'; }
/*.footer_area { width:100%; min-height:50vh; background:#00000022; font-family: 'hotpods_regular', 'Noto Sans CJK KR'; }*/
/*.footer_area { font-family: 'hotpods_regular', 'Noto Sans CJK KR'; width:100%; min-height:50vh; background:#00000022; background-position: 10px 0, 0 9px; background-size: 20px 20px; background-image: repeating-linear-gradient(45deg, #d0d0d0 25%, transparent 30%, transparent 70%, #d0d0d0 75%, #d0d0d0), repeating-linear-gradient(45deg, #d0d0d0 25%, #fff 25%, #fff 75%, #d0d0d0 75%, #d0d0d0); }*/
.footer { display:flex; flex-flow:row wrap; margin:0 auto; padding-top:90px; padding-bottom:16px; width:calc(100% - 320px); font-size:12px; }
.footer > * { flex:1 100%; }
.footer .nav_title { font-size:12px; text-align:left; }
.footer ul { padding-left:0; }
.footer li { line-height:20px; text-align:left; }
.footer li h2 { margin-bottom:20px; }
.footer .footer_nav { display:flex; }
.footer .footer_nav > * { flex:1 0 12.5%; padding-left:8px; }
.footer .footer_nav > *:last-child { flex:1 0 25%; }
.footer input[type=text] { margin-bottom:8px; padding:8px; height:28px; background:transparent; border:0.5px solid #000000; border-radius:16px; font-size:11px; }
.footer input[type=button] { background:#fff; padding:0 4px; height:28px; border:0.5px solid #000000; border-radius:8px; vertical-align:middle; }
.brand { width:100%; margin-bottom:80px; text-align:center; }
.brand li { display:inline-block; margin-left:8px; }
.brand li:first-child { margin-left:0; }
.brand img { width:50px; height:auto; }

.footer_m { width:100%; padding:20px 30px; font-size:10px; font-family: 'hotpods_regular', 'Noto Sans CJK KR';}
.footer_m_menu { position:relative; margin-bottom:6px; padding:0 16px; width:100%; max-height:30px; line-height:30px; text-align:left; background:#fff; border:0.5px solid #000; border-radius:16px; overflow:hidden; cursor:pointer; transition:all 0.4s; }
.footer_m_menu.on { max-height:100vh; }
.footer_m_menu .m_title { color:#000; }
.footer_m_menu.on .m_title { color:gray; }
.footer_m_menu .m_close { position:absolute; right:10px; top:10px; width:10px; height:10px; transition:all 0.4s; }
.footer_m_menu .m_close::before,
.footer_m_menu .m_close::after { content:''; position:absolute; top:50%; left:0; margin-top:-1px; width:100%; height:1px; background:#707070; }
.footer_m_menu .m_close::before	{ transform:rotate(0deg);	}
.footer_m_menu .m_close::after	{ transform:rotate(90deg);	}
.footer_m_menu.on .m_close		{ transform:rotate(-135deg);}
.footer_newsletter { margin-top:32px; text-align:left; font-family: 'Hotpods_light','Noto Sans CJK KR'; }
.footer_newsletter p { margin-bottom:4px; font-family: 'hotpods_regular', 'Noto Sans CJK KR_bold'; }
.footer_newsletter .div_table_th_round { font-family: 'hotpods_regular', 'Noto Sans CJK KR_bold'; }
.footer_newsletter input[type='text'] { margin:3px 0; padding:8px 16px; width:100%; height:30px; border:0.5px solid #000000; border-radius:16px; color: #666666; background:#ffffff; font-family: 'Hotpods_light', 'Noto Sans CJK KR' !important; }
.footer_newsletter input[type='button'] { width:100%; height:30px; background:#fff; font-size:12px; border:0.5px solid #000000; border-radius:16px; font-family: 'Noto Sans CJK KR' !important; background: #C1C5C7; line-height: 30px; }
.footer_newsletter .newsletter_btn_area { display:flex; align-items:center; margin-top:3px; }
.footer_newsletter .newsletter_btn_area > div:nth-child(1) { width:50%; }
.footer_newsletter .newsletter_btn_area > div:nth-child(2) { width:100%; }
.footer_newsletter .newsletter_btn_area span { margin-left:10px; }
.footer_m .m_desc { margin-bottom:40px; text-align:center; pointer-events:none; font-family: 'hotpods_regular', 'Noto Sans CJK KR_bold'; }
.newsletter_btn_area input[type="checkbox"] { width: 20px; height: 20px; border: 0.5px solid #000000; background: #ffffff; vertical-align: middle; cursor: pointer; outline: 0;  appearance: none; }
.newsletter_btn_area input[type="checkbox"]:checked { background: linear-gradient(to top right, transparent 48%, #000000 49%, #000000 51%, transparent 52%), linear-gradient(to bottom right, transparent 48%, #000000 49%, #000000 51%, transparent 52%); background-color: #ffffff; }

/* 카테고리 페이지 */
.container { margin:0 auto; width:100%; font-size:14px; }
/*.container { margin:0 auto; padding-bottom:60px; width:100%; }*/
.container.inner_width { width:calc(100% - 160px); }
.container.line3 { padding-bottom:0px; }
.container_title { margin:20px 20px 40px 30px; font-size:50px; font-weight:400; text-align:left; }
.container_desc { margin:20px 0 80px 30px; font-size:25px; font-weight:500; line-height:30px; }
.section_title { margin-top:30px; margin-bottom:16px; font-size:35px; text-align:center; }
.image_box { display:grid; grid-template-columns:1fr 1fr 1fr 1fr; }
.image_item { position:relative; text-align:center; cursor:pointer; font-family: 'hotpods_regular', 'Noto Sans CJK KR_bold'; }
.image_item .img_info { position:absolute; top:20px; left:20px; text-align: left; width: 86%; }
.image_item .img { position: relative; padding:40px 20px; }
.image_item img { width:70%; height:100%; object-fit:cover; transition:all 0.3s ease; }
.image_item:hover img { transform:scale(1.05); }
.image_item p { margin-top:12px; width:100%; font-size:15px; font-weight:500; }
.image_item a { color:black; text-decoration:none; }
.detail_layer { position:fixed; top:100%; left:0px; width:100%; height: calc(100vh - 240px); border:0; transition:all 0.5s ease; z-index:2; overflow:hidden; }
/*.detail_layer { position:fixed; top:100%; left:120px; width:calc(100% - 240px); height:calc(100vh - 240px); border:0; transition:all 0.5s ease; z-index:2; overflow:hidden; backdrop-filter:blur(5px); }*/
.detail_layer.on { top:120px; }
.detail_layer_hidden.on { top:120px; }

/* 카테고리 > 아이템 */
.item_area { position:relative; width:100%; font-size:0; line-height:0; }
.item_area .img_area { display:inline-block; width:calc(100% - 650px); }
.item_area .info_area { display:inline-block; margin:0 0 0 50px; width:600px; font-size:13px; line-height:1; vertical-align:top; }
.item_area .img_area .thumbnail { position:relative; display:block; width:100%; overflow:hidden; }
.item_area .img_area .thumbnail .item { transition:transform .5s ease-out; }
.item_area .img_area .thumbnail img { width:100%; }
.item_area .img_area .thumbnail .help { position:relative; display:block; margin:0 auto; top:-27px; width:170px; }
.item_area .img_area .thumbnail .wish img { position:absolute; top:10px; left:10px; width:auto; border:0; cursor:pointer; z-index:1; }
.item_area .item_same { position:relative; margin:24px 0 0; padding:0 40px; width:100%; height:94px; }
.item_area .item_same li { display:inline-block; margin:0 6px; width:94px; width:80px; font-size:12px; line-height:14px; vertical-align:top; }
.item_area .item_same li img { width:100%; cursor:pointer; }
.magnifier { display:none; position:absolute; width:160px; height:160px; border-radius:100%; box-shadow:0 0 0 3px rgba(255, 255, 255, 0.85), 0 0 3px 3px rgba(0, 0, 0, 0.25); pointer-events:none; }

.item_area .info_area .item_title_wrap { padding:20px 0; border-top:2px solid #000; }
.item_area .info_area .item_title_wrap .icon { margin-bottom:15px; }
.item_area .info_area .item_title_wrap .item_title { font-size:28px; line-height:30px; font-weight:400; }
.item_area .info_area .txt { font-size:12px; color:#555; }
.item_area .info_area .txt.highlight { color:#008bcc; font-weight:bold; }

.item_area .info_area .info_table { margin-top:20px; font-size:13px; line-height:18px; border:0; table-layout:fixed; }
.item_area .info_area .info_table th { padding:7px 5px 6px 0; width:106px; font-weight:normal; text-align:left; vertical-align:top; }
.item_area .info_area .info_table td { padding:7px 6px 8px 0; vertical-align:middle; }
.item_area .info_area .guide_wrap { margin:10px 0; }
.item_area .info_area .guide_wrap p { color:#9a9a9a; }
.item_area .info_area .qtt_wrap { margin-top:20px; }
.item_area .info_area .qtt_wrap .qtt_table { table-layout:fixed; }
.item_area .info_area .qtt_wrap .qtt_table td:first-child { padding:30px 10px 30px 0; line-height:18px; border-top:1px solid #e5e5e5; vertical-align:middle; word-wrap:break-word; word-break:break-all; }
.item_area .info_area .qtt_wrap .qtt { position:relative; display:inline-block; padding:0 30px; width:104px; vertical-align:top; }
.item_area .info_area .qtt_wrap .qtt a { width:30px; height:30px; border:1px solid #e5e5e5; color:transparent; font-size:1px; line-height:1px; white-space:nowrap; text-indent:150%; overflow:hidden; }
.item_area .info_area .qtt_wrap .qtt a:before { content:''; position:absolute; left:10px; top:50%; width:9px; height:1px; background:#000; }
.item_area .info_area .qtt_wrap .qtt a.down { position:absolute; left:0; top:0; }
.item_area .info_area .qtt_wrap .qtt a.up { position:absolute; right:0; top:0; }
.item_area .info_area .qtt_wrap .qtt a.up:after { content:''; position:absolute; left:50%; top:50%; margin:-4px 0 0 0; width:1px; height:9px; background:#000; }
.item_area .info_area .qtt_wrap .qtt input { margin-left:-1px; width:45px; height:30px; line-height:28px; border:1px solid #e5e5e5; text-align:center; }
.item_area .info_area .price_wrap { display:flex; padding:27px 4px 26px; justify-content:space-between; background:#fff; border-top:1px solid #e5e5e5; font-size:15px; vertical-align:middle; }
.item_area .info_area .price_wrap .qtt { color:#7d7d7d; font-weight:normal; }
.item_area .info_area .price_wrap .price { color:#7d7d7d; font-size:13px; }
.item_area .info_area .price_wrap .price > span { color:#000; font-size:20px; }
.item_area .info_area .btns_wrap { display:flex; margin-top:8px; }
.item_area .info_area .btns_wrap .sold_out { flex:1; background-color:#000; color:#fff; font-size:16px; line-height:66px; font-weight:400; text-align:center; }
.item_area .info_area .btns_wrap .btn_r { flex:1; margin-left:20px; background-color:#fff; border:1px solid #d6d6d6; color:#000; font-size:16px; line-height:66px; font-weight:400; }

.detail_tab { clear:both; display:grid; grid-template-columns:1fr 1fr 1fr 1fr; margin:0 auto 40px; width:100%; font-size:0; }
.detail_tab div { display:block; vertical-align:top; border-top:1px solid #f0f0f0; border-bottom:1px solid #111; border-left:1px solid #f0f0f0; box-sizing:border-box; cursor:pointer; }
.detail_tab div:last-child { border-right:1px solid #f0f0f0; }
.detail_tab div a { display:block; height:60px; line-height:60px; color:#9a9a9a; font-size:14px; font-weight:500; text-align:center; }
.detail_tab div.on { border:1px solid #111; border-bottom:2px solid #fff; }
.detail_tab_contents { padding:8px; }

.prd_board_top_wrap { display:flex; justify-content:space-between; align-items:center; margin:0 0 40px 0; }
.prd_board_top_wrap h2 { font-size:20px; font-weight:700; }
.prd_board_top_wrap .btn_white { display:inline-block; padding:12px 20px; height:40px; background-color: #fff; border:1px solid #d6d6d6; color:#000; font-size:13px; text-align:center; word-spacing:-0.5px; white-space:nowrap; word-break:keep-all; word-wrap:break-word; }

.prd_notice { display:grid; grid-template-columns:1fr 1fr; }
.prd_notice_title { margin:4px; padding:18px 0; font-size:18px; }
.prd_notice_desc { margin:4px; padding:4px; background:#fff; color:#6d6d6d; line-height:22px; }

/* 메이커 상세레이어 */
.maker_overlay { position:absolute; top:0; left:0; width:100%; height:100%; z-index:0; pointer-events:none; }
.maker_layer { position:relative; padding: 50px 10px 50px 50px; height: 100%; background:#C1C5C780; border-radius:20px; z-index:1; border:0.5px solid black; top:0px; left: 120px; width: calc(100% - 240px); backdrop-filter: blur(5px); }
/*.maker_layer { position:relative; padding: 50px 10px 50px 50px; width:100%; height:100%; background:#C1C5C780; border-radius:20px; z-index:1; border:0.5px solid black; }*/
.maker_layer .maker_layer_wrap { width:100%; height:100%; }
.maker_layer .maker_layer_wrap.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:40px; }
.maker_layer .maker_g_stand { display:grid; grid-template-columns:1fr 1fr; gap:40px; font-size:14px; margin-bottom:30px; }
.maker_layer .btn_close { position:absolute; top:15px; left:15px; width:15px; height:15px; background:#000; border:0.5px solid #000; border-radius:50%; box-shadow: 0 0 0 4px #C1C5C7 inset; cursor:pointer; z-index:1; }
.maker_layer .m_title { font-size:14px;  position: absolute; top: 15px; right: 45px; }
.maker_layer .maker_left { float:left; width:50%; }
.maker_layer .maker_right { float:right; width:50%; }
.maker_layer .maker_left .maker_left,
.maker_layer .maker_right .maker_left { padding:0 10px 0 0; }
.maker_layer .maker_left .maker_right,
.maker_layer .maker_right .maker_right { padding:0 0 0 10px; }

.maker_layer .maker_scroll { width:100%; height:calc(100vh - 132px); overflow-y:scroll; padding-right:32px; display:grid; }
.maker_layer .maker_scroll.left::-webkit-scrollbar-thumb { background: transparent; }
.maker_layer .maker_scroll .scroll_hint { position:absolute; bottom:40px; padding:4px 8px; border:0.5px solid #222; border-radius:16px; white-space:nowrap; font-family:"hotpods_regular","Noto Sans CJK KR";}
.maker_layer .maker_scroll .img { width:100%; height:100%; display:flex; justify-content:center; align-items:center; }
.maker_g_left .scroll_hint { position: absolute; bottom: 40px; padding: 0 8px; border: 0.5px solid rgb(34, 34, 34); border-radius: 16px; white-space: nowrap; font-family: hotpods_regular, "Noto Sans CJK KR"; top: calc(100vh - 132px); left: calc((100% / 2) - 55px); display: block; line-height:30px; height:30px; }

.maker_layer .maker_top { display:none; width:100%; }
.maker_layer .maker_top_order { display:none; width:100%; }
.maker_layer .maker_top img { width:60%; margin:0 auto; }
.maker_layer .maker_scroll .img img { width:80%; }
.maker_layer .size_table th,
.maker_layer .size_table td { text-align:center; }
.maker_layer .item_name { font-size:18px; margin-bottom:20px; }
.maker_layer .item_price { font-size:18px; margin-bottom:10px; }
.maker_layer .item_color_list { margin-bottom:20px; font-size:0; }
.maker_layer .item_color_list .item_color { position:relative; display:inline-block; margin-right:10px; margin-top:5px; width:24px; height:24px; border:0.5px solid #000; border-radius:50%; cursor:pointer; }
.maker_layer .item_color_list .item_color:last-child { margin-right:0; }
/*.maker_layer .item_color_list .item_color.on { box-shadow:0 0 0 3px #000 inset; }*/
.maker_layer .item_color_list .item_color.on::after { content:''; position:absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width:10px; height:10px; border-radius:50%; background:#000; }
.maker_layer .item_color_list .item_color.on.ww::after { background:#fff; }

.maker_layer .item_simple_desc { margin-bottom:20px; font-size:14px; }
.maker_layer .item_desc1 { }
.maker_layer .item_desc2 { margin-top:16px; }
.maker_layer .size_img { width:80%; margin:0 10%; margin-top:40px; }
.maker_layer .btn_maker { clear:both; width:calc(100% - 40px); background:#fff; color:#000; text-align:center; border:0.5px solid #000; border-radius:16px; cursor:pointer; height:30px; font-size:14px; line-height:30px; }
.maker_layer .color_chk_name, .maker_layer .item_price_desc { font-size:12px; }

/* 드롭샵 */
.bottom_wrap { position:fixed; bottom:20px; left: calc(50% - 190px); width: 380px; text-align:center; z-index:3; }
.bottom_btn { display:inline-block; margin:0 4px; width:180px; height: 30px; cursor:pointer; background:#ffffffff; border: 0.5px solid black; font-weight: bolder; }
.filter_layer { position:fixed; bottom:-508px; padding:10px; left:calc(50% - 390px); width:780px; height:508px; background:#c0c5c9b2; border:0.5px solid #000; border-radius:20px; z-index:12; transition:all .5s ease; }
.filter_layer.none { position:unset; padding:unset; width:unset; height:unset; background:unset; border:unset; backdrop-filter:unset; border-radius:unset; transition:unset; overflow:unset; }
.filter_layer.overlay_on { bottom:90px; }
.filter_layer .btn_close { position:sticky; top:0; left:0; width:15px; height:15px; background:#000; border:1px solid #000; border-radius:50%; box-shadow:0 0 0 3.8px #bbb inset; cursor:pointer; }
.filter_layer .filter_title { position:relative; margin-top:16px; margin-left:20px; margin-bottom:16px; }
.filter_layer .filter_content { display:inline-flex; flex-flow:column wrap; width:100%; height:280px; padding-top:8px; padding-left:20px; }
.filter_layer .filter_content > div { width:16%; }
.filter_layer .filter_content > div:first-child { width:20%; }
/* .filter_layer .chk_wrap { line-height:20px; } */
.filter_layer .chk_wrap * { box-sizing:border-box; }
.filter_layer .chk_wrap.emty:nth-child(17n) { height:0; }
input[type="checkbox"].filter { width:10px; height:10px; background:none; border:0.5px solid #000; cursor:pointer; outline:0; appearance:none; }
input[type="checkbox"].filter:checked { background:#000; }
/*input[type="checkbox"].filter:checked { background:#000; box-shadow:0 0 0 2.8px #bbb inset; }*/
input[type="checkbox"].filter + label { margin:0 0 0 7%; font-size:14px; cursor:pointer; }
.filter_layer .filter_colors { margin-top:8px; display:grid; grid-template-columns:1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; gap:8px 4%; width:calc(100% - 40px); }
.filter_layer .filter_color { padding:4px 0; width:100%; height:20px; border-radius:10px; cursor:pointer; }
/*
.filter_layer .filter_color { display:inline-block; margin-right:8px; width:80%; height:20px; border-radius:10px; cursor:pointer; }
.filter_layer .filter_color.black { background:#000; }
.filter_layer .filter_color.white { background:#f9f9f9; }
.filter_layer .filter_color.light_gray { background:#d6d6d4; }
.filter_layer .filter_color.gray { background:#999a99; }
.filter_layer .filter_color.blue { background:#588fbe; }
.filter_layer .filter_color.green { background:#94b562; }
.filter_layer .filter_color.brown { background:#853f21; }
.filter_layer .filter_color.orange { background:#e6a14f; }
.filter_layer .filter_color.lemon { background:#fffe73; }
.filter_layer .filter_color.purple { background:#6b2278; }
.filter_layer .filter_color.red { background:#d74532; }
.filter_layer .filter_color.pink { background:#d84cef; }
.filter_layer .filter_color.light_brown { background:#9e8e6d; }
.filter_layer .filter_color.rainbow { background:linear-gradient(to right, red, orange, yellow, green, blue, navy, purple); }
*/
.filter_layer .filter_color.on::after { content:''; display: inline-block; width: 10px; height: 10px; background: #000; border-radius: 50%; position: absolute; top:50%; left: 50%; transform: translate(-50%, -50%); }
.filter_layer .filter_color.on_black::after { content:''; display: inline-block; width: 10px; height: 10px; background: #fff; border-radius: 50%; position: absolute; top:50%; left: 50%; transform: translate(-50%, -50%); }
.filter_layer .filter_color:first-child.on { border:2px solid #eee; }
.filter_layer .filter_btn_wrap { display: flex; margin-top: 16px; margin-left: 20px; gap: 2%; }
.filter_layer .filter_btn { border: 1px solid black; border-radius: 16px; width: 50%; background: #fff; text-align: center; padding: 3px; font-weight: bold; cursor:pointer; }

.search_layer { position:fixed; bottom:-115px; padding:10px; left:calc(50% - 230px); width:460px; height:115px; background:#c0c5c9b2; border:0.5px solid #000; backdrop-filter:blur(25px); border-radius:20px; z-index:12; transition:all .5s ease; }
.search_layer.overlay_on { bottom:90px; }
.search_layer .btn_close { position:absolute; top:8px; left:8px; width:12px; height:12px; background:#000; border:1px solid #000; border-radius:50%; box-shadow:0 0 0 2.8px #bbb inset; cursor:pointer; }
.search_layer .search_title { position:relative; margin-top:16px; font-size:14px; font-weight:bold; }
.search_layer .input_search { position:relative; margin-top:8px; width:300px; height:30px; line-height:32px; border:0.5px solid #000; border-radius:14.803px; background: #ffffffb3; font-size:11px; }
.search_layer .btn_search { position:relative; margin-top:8px; margin-left:2%; width:90px; height:30px; line-height:32px; border:0.5px solid #000; border-radius:14.8044px;  background: #ffffffb3; cursor:pointer; }

.none_click { display:block; height:0; }

/* board */
.bg_center { width:calc(100% - 80px); margin:0 auto; }
.board_content_wrap { background:#fff; margin-bottom:140px; border: 1px solid gray; border-radius: 16px; }
.board_content_wrap .board_content { padding:40px; }
.board_content .image { margin:0; padding:0; }
.board_content td { padding:20px; }
.absolute { position:absolute !important; top:0; left:0; }
.full_size { position:relative; width:100%; height:100vh; }
.full_size .img_bg_cover { position:absolute; top:0; left:0; width:100%; height:100%; min-width:100%; min-height:100%; object-fit:cover; object-position:top center; }
.full_size .txt_wrap { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; width:100%; height:100vh; text-align:center; overflow:hidden; }
.full_size .txt_wrap .t_title { font-size:130px; color:#fff; line-height: 1.1; }
.full_size .txt_wrap .t_desc { margin-top:20px; font-size:36px; color:#fff; }
.full_size .txt_wrap .t_desc.small { font-size:24px; color:#fff; }
.grid_title { margin-bottom:20px; }
.grid_title.gap_large { margin-left:20px; }
.grid { width:100%; display:grid; margin-bottom:40px; }
.grid.grid4 { grid-template-columns:1fr 1fr 1fr 1fr; gap:20px; }
.grid.grid4.gap_large { gap:40px; width:calc(100% - 40px); margin:0 auto; margin-bottom:90px; }
.grid > div { background-size:cover; background-position:center center; aspect-ratio:1; border-radius:16px; }
.grid .txt_title { padding:15px; font-size:13px; color:#fff; cursor:pointer; }
.grid .txt_title:before { content:"⦁ "; }
.grid .grid_info { position:sticky; top:100%; padding-left:5%; padding-bottom:10px; }
.grid .grid_info .grid_title { font-size:18px; color:#fff; }
.grid > div .grid_info .grid_desc { font-size:12px; color:#fff; max-height:0; overflow:hidden; transition:all .2s ease-out; }
.grid > div:hover .grid_info .grid_desc { height:auto; max-height:200px; }
.grid .grid_info .grid_btn { margin-top: 16px; padding: 0 20px; width: fit-content; background: #ffffffb2; color: #000; font-size: 12px; font-weight: bold; border: 1px solid #000; border-radius: 14.803px; cursor: pointer; }


/* spotlight + article + misiion + topic */
.page_wrap .main_bg { width: 100%; height: 100vh; position: absolute; top: 0; left: 0; display: flex; justify-content: center; align-items: center; flex-direction: column; text-align: center; }
.page_wrap .main_bg .main_title { font-size: 130px; color: #ffffff; line-height: 1.1; padding-bottom: 50px; }
.page_wrap .main_bg .main_txt { font-size: 36px; color: #ffffff; }

/*.page_wrap .temp_etc { padding-top: 100vh; }*/
.page_wrap .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; width: 100%; padding: 5% 0; }
.page_wrap .grid4 { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 40px; width: 100%; margin-bottom: 90px; }
.page_wrap .temp > div { background-size: cover; background-position: center center; background-repeat: no-repeat; aspect-ratio: 1; border-radius: 8px; }
.page_wrap .top { font-size: 13px; color: #fff; padding:15px; cursor:pointer; }
.page_wrap .top::before { content:"⦁ "; }

.page_wrap.page { width: calc(100% - 110px); background:#ffffff; padding:0 50px; }
.page_wrap .item_image { background-size: cover; background-position: center center; aspect-ratio: 1; }
.page_wrap .item_image.without_aspect  {aspect-ratio:0; }
.page_wrap .item_image:hover .description { height:auto; opacity:1; transition-duration: .2s; }
.page_wrap .desc { word-break: keep-all; }
.page_wrap .desc .title { font-size:36px; font-weight: bold; line-height: 1.1; padding-bottom: 40px; padding-right:50px; }
.page_wrap .desc .txt { font-size:14px; padding-right:20px; }
.page_wrap .desc .txt_bold { font-size:14px; font-weight:bold; }
.page_wrap .desc .ab_box { float: right; position: relative; top: 30%; font-size: 14px;}
.page_wrap .grid2_1 { display: grid; grid-template-columns: 3fr 1fr; gap: 20px; width: 100%; padding:5% 0;}

.pding_btm40 { padding-bottom: 40px; }
.pding_btm20 { padding-bottom: 20px; }

.page_wrap .info.big { position: sticky; top: 100%; margin-left: 40px; margin-bottom:40px; }
.page_wrap .info.small { position: sticky; top: 100%; margin-left: 5%; margin-bottom:10px; }
.page_wrap .info .title { font-size: 18px; color: #fff; }
.page_wrap .info .description { font-size: 12px; color: #fff; height:0; opacity:0; }
.page_wrap .info .button { margin-top: 16px; padding: 0 20px; width: fit-content; background: #ffffffb2; color: #000; font-size: 12px; font-weight: bold; border: 1px solid #000; border-radius: 14.803px; cursor: pointer; }
.page_wrap .item_image:hover .description { height:auto; opacity:1; transition-duration: .2s; }
.page_wrap .margin10 { margin-bottom:20px;}
.page_wrap.page_grid { margin-top: 140px; width: calc(100% - 110px); padding: 0 50px; }

.page_wrap .description { word-break: keep-all; }
.page_wrap .description .title { font-size:36px; font-weight: bold; line-height: 1.1; padding-bottom: 40px; padding-right:50px; }
.page_wrap .description .content { font-size:14px; padding-right:20px; }
.page_wrap .description .txt_bold { font-size:80px; font-weight:bold; }
.page_wrap .description .ab_box { float: right; position: relative; top: 20%; font-size: 14px;}
.page_wrap .description .txt { font-size:21px; font-weight:bold; padding: 10px 0;}

.page_wrap .item_image.sub_main { background-size: cover; background-position: center center; display: grid; align-items: center; justify-content: center; text-align: center; aspect-ratio:0; }
.page_wrap .item_image .ms_sub_title { font-size: 120px; color: #000; line-height: 1.1; margin: 10% 0; font-weight:bold; }
.page_wrap .item_image .ms_sub_txt { font-size: 24px; color: #000; font-weight:bold; margin-bottom: 10%; }

.page_wrap .grid1 { display: grid; grid-template-columns: 1fr; gap: 40px; width: 100%; margin-bottom: 40px; }
.page_wrap .grid2.end { margin-bottom:40px;}
.page_wrap .grid2 .sub_grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; width: 100%; margin:40px 0;}
.page_wrap .grid2 .sub_title { font-size:21px; margin-bottom:10px; }
.page_wrap .grid2 .sub_txt { font-size:14px;}
.page_wrap .description.padding { padding-left:20px; } 

.page_wrap .product_item { position:relative; }
.page_wrap .image_info { position: absolute; top: 0px; left: 0px; text-align: left; font-size: 10px; }
.page_wrap .image_info .height { line-height: 8px; font-size: 10px; }

.maker_wrap.maker { width: calc((100% - 180px)); padding-top:10px; height:calc(100% - 168px); }
.maker_wrap .canvas_wrapper canvas { width:600px; height:600px; }
.maker_wrap .canvas_wrapper canvas.save { width:600px; height:600px; }
.konvajs-content { width:600px; height:600px; }

/*.maker_layer .maker_scroll::-webkit-scrollbar { width:0; height:0; }*/


::-webkit-scrollbar { width:8px; }
::-webkit-scrollbar-thumb { background:#C1C5C7; border-radius:8px; }
::-webkit-scrollbar-track { background: transparent; }
body::-webkit-scrollbar { display:none; }
body::-webkit-scrollbar-thumb, 
.maker_right_menu::-webkit-scrollbar-thumb, 
.maker_r_layer::-webkit-scrollbar-thumb, 
.maker_vert3.addition::-webkit-scrollbar-thumb { background: transparent; }
.show_scrollbar::-webkit-scrollbar-thumb { 	background-color: rgba(0, 0, 0, 0.4) !important; transition: background-color 0.3s; }

.filter_content::-webkit-scrollbar { height:8px; }
.filter_content::-webkit-scrollbar-thumb { background:#bbb; border-radius:8px; }
.filter_content::-webkit-scrollbar-track { background:#ddd; border-radius:8px; }

.scrollbar_toggle { position: fixed; right: 5px; top: 0; width: 8px; height: 0; background: rgba(0,0,0,0.4); border-radius: 3px; opacity: 0; transition: opacity 0.3s; pointer-events: none; }
.scrollbar_toggle_slide { position: fixed; right: 5px; top: 0; width: 8px; height: 0; background: rgba(0,0,0,0.4); border-radius: 3px; opacity: 0; transition: opacity 0.3s; pointer-events: none; }