@charset "utf-8";
@import url('font.css');

/******************** COMMON STYLE ********************
- 작성자 : 황희진(grigo0704@naver.com)
- 최종수정일 : 2025-02-28
- 버전 : 1.9
*/



/******************** RESET ********************/

* { padding: 0; margin: 0; border: 0; outline: 0; box-sizing: border-box; vertical-align: baseline; }
::before, ::after { box-sizing: border-box; }
html { width: 100%; height: 100%; font-size: 16px; -webkit-text-size-adjust: none; }
body { width: 100%; height: 100%; overflow: overlay; color: var(--color-bk); font-family: var(--font-family); font-weight: normal; line-height: 1.6;  word-break: break-all; -webkit-overflow-scrolling: touch; }
body::-webkit-scrollbar { width: 0; height: 0; }
h1, h2, h3, h4, h5, h6 { display: inline-block; font-weight: normal; }
i, em, address { font-style: normal; }
input, select, textarea { font-family: var(--font-family) !important; vertical-align: middle; outline: none; -webkit-appearance: none; appearance: none; }
input[type="password"] { font-family: 'Verdana', sans-serif; }
input[type=file]::file-selector-button { font-family: var(--font-family) !important; }
input:-webkit-autofill,
input:-webkit-autofill:focus { transition: background-color 900000s 0s, color 900000s 0s; }			   
textarea { resize: none; }
label { cursor: pointer; }
fieldset, img, iframe { border: none; }
img { max-width: 100%; outline: none; }
video { max-width: 100%; }
a, a:hover, a:active, a:visited { color: inherit; text-decoration: none; }
menu, li { list-style: none; }
button { font-family: var(--font-family); cursor: pointer; vertical-align: middle; background: none; }
caption { width: 0; height: 0; font-size: 0; line-height: 0; overflow: hidden; visibility: hidden; }
hr { display: none; }
table { border-spacing: 0; border-collapse: collapse; }
th, td { text-align: left; vertical-align: middle; }
mark { background: none; }
canvas { display: block; width: 100%; height: 100%; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; }
b { font-weight: 500; }
strong { font-weight: 600; }







/******************** COMMON ********************/

.container { display: block; overflow-x: hidden; overflow-y: auto; width: 100%; height: 100%; min-height: 840px; scroll-behavior: smooth; }
.container::-webkit-scrollbar-track { background-color: var(--color-bk-tint05); }
.container::-webkit-scrollbar-track:horizontal { background-color: var(--color-wh); }

.template { position: relative; display: flex; flex-direction: column; width: 100%; min-height: 100%; }

.inner { display: block; width: 100%; max-width: 1280px; padding: 0 var(--inner-padding-min); margin: 0 auto; }





/* VAR */
:root {
	
	/* font */
	--font-family: 'Malgun Gothic', 'Dotum', sans-serif;
	--font-family-code: 'Consolas', 'Malgun Gothic', 'Dotum', sans-serif;
	
	
	/* Primary #4a63e1 */
	--color-primary: rgb(74,99,225);
	--color-primary-tint03: rgba(74,99,225,0.03);
	--color-primary-tint05: rgba(74,99,225,0.05);
	--color-primary-tint07: rgba(74,99,225,0.07);
	--color-primary-tint10: rgba(74,99,225,0.1);
	--color-primary-tint20: rgba(74,99,225,0.2);
	--color-primary-tint30: rgba(74,99,225,0.3);
	--color-primary-tint40: rgba(74,99,225,0.4);
	--color-primary-tint50: rgba(74,99,225,0.5);
	--color-primary-tint60: rgba(74,99,225,0.6);
	--color-primary-tint70: rgba(74,99,225,0.7);
	--color-primary-tint80: rgba(74,99,225,0.8);
	--color-primary-tint90: rgba(74,99,225,0.9);
	
	
	/* Secondary #002a64 */
	--color-secondary: rgb(0,42,100);
	--color-secondary-tint03: rgba(0,42,100,0.03);
	--color-secondary-tint05: rgba(0,42,100,0.05);
	--color-secondary-tint07: rgba(0,42,100,0.07);
	--color-secondary-tint10: rgba(0,42,100,0.1);
	--color-secondary-tint20: rgba(0,42,100,0.2);
	--color-secondary-tint30: rgba(0,42,100,0.3);
	--color-secondary-tint40: rgba(0,42,100,0.4);
	--color-secondary-tint50: rgba(0,42,100,0.5);
	--color-secondary-tint60: rgba(0,42,100,0.6);
	--color-secondary-tint70: rgba(0,42,100,0.7);
	--color-secondary-tint80: rgba(0,42,100,0.8);
	--color-secondary-tint90: rgba(0,42,100,0.9);
	
	
	/* Point #ff5000 */
	--color-point: rgb(255,80,0);
	--color-point-tint03: rgba(255,80,0,0.03);
	--color-point-tint05: rgba(255,80,0,0.05);
	--color-point-tint07: rgba(255,80,0,0.07);
	--color-point-tint10: rgba(255,80,0,0.1);
	--color-point-tint20: rgba(255,80,0,0.2);
	--color-point-tint30: rgba(255,80,0,0.3);
	--color-point-tint40: rgba(255,80,0,0.4);
	--color-point-tint50: rgba(255,80,0,0.5);
	--color-point-tint60: rgba(255,80,0,0.6);
	--color-point-tint70: rgba(255,80,0,0.7);
	--color-point-tint80: rgba(255,80,0,0.8);
	--color-point-tint90: rgba(255,80,0,0.9);
	
	
	/* Gray */
	--color-gray: #2e3643;
	--color-gray-tint03: rgba(46,54,67,0.03);
	--color-gray-tint05: rgba(46,54,67,0.05);
	--color-gray-tint07: rgba(46,54,67,0.07);
	--color-gray-tint10: rgba(46,54,67,0.1);
	--color-gray-tint20: rgba(46,54,67,0.2);
	--color-gray-tint30: rgba(46,54,67,0.3);
	--color-gray-tint40: rgba(46,54,67,0.4);
	--color-gray-tint50: rgba(46,54,67,0.5);
	--color-gray-tint60: rgba(46,54,67,0.6);
	--color-gray-tint70: rgba(46,54,67,0.7);
	--color-gray-tint80: rgba(46,54,67,0.8);
	--color-gray-tint90: rgba(46,54,67,0.9);
	
	
	/* white */
	--color-wh: #fff;
	--color-wh-tint03: rgba(256,256,256,0.03);
	--color-wh-tint05: rgba(256,256,256,0.05);
	--color-wh-tint07: rgba(256,256,256,0.07);
	--color-wh-tint10: rgba(256,256,256,0.1);
	--color-wh-tint20: rgba(256,256,256,0.2);
	--color-wh-tint30: rgba(256,256,256,0.3);
	--color-wh-tint40: rgba(256,256,256,0.4);
	--color-wh-tint50: rgba(256,256,256,0.5);
	--color-wh-tint60: rgba(256,256,256,0.6);
	--color-wh-tint70: rgba(256,256,256,0.7);
	--color-wh-tint80: rgba(256,256,256,0.8);
	--color-wh-tint90: rgba(256,256,256,0.9);
	
	
	/* black */
	--color-bk: #000;
	--color-bk-tint03: rgba(0,0,0,0.03);
	--color-bk-tint05: rgba(0,0,0,0.05);
	--color-bk-tint07: rgba(0,0,0,0.07);
	--color-bk-tint10: rgba(0,0,0,0.1);
	--color-bk-tint20: rgba(0,0,0,0.2);
	--color-bk-tint30: rgba(0,0,0,0.3);
	--color-bk-tint40: rgba(0,0,0,0.4);
	--color-bk-tint50: rgba(0,0,0,0.5);
	--color-bk-tint60: rgba(0,0,0,0.6);
	--color-bk-tint70: rgba(0,0,0,0.7);
	--color-bk-tint80: rgba(0,0,0,0.8);
	--color-bk-tint90: rgba(0,0,0,0.9);
	
	
	/* etc */
	--style-marker: 0 -8px var(--color-point-tint20) inset;
	
	--inner-padding: 40px;
	
	--inner-padding-min: 2.083vw; /* 40px */
	--inner-padding-max: 4.167vw; /* 80px */
	
	--radius-component: 2px;
	
	--radius-box-min: 4px;
	--radius-box-max: 8px;
	
	--shadow-box-min: 0 0 4px var(--color-bk-tint10);
	--shadow-box-max: 0 0 8px var(--color-bk-tint10);
	
	--process-gap: 80px;

}


/* PLACEHOLDER */
::-webkit-input-placeholder { font-size: 0.75rem; font-weight: 500; color: var(--color-bk-tint60); font-style: normal; text-transform: none; }
 :-moz-placeholder { font-size: 0.75rem; font-weight: 500; color: var(--color-bk-tint60); font-style: normal; text-transform: none; opacity: 1; filter: alpha(opacity=100); }
::-moz-placeholder { font-size: 0.75rem; font-weight: 500; color: var(--color-bk-tint60); font-style: normal; text-transform: none; opacity: 1; filter: alpha(opacity=100); }
 :-ms-input-placeholder { font-size: 0.75rem; font-weight: 500; color: var(--color-bk-tint60); font-style: normal; text-transform: none; }


/* SCROLLBAR */
::-webkit-scrollbar { width: 16px; height: 16px; }
::-webkit-scrollbar-track { border: 0; background-color: transparent; }
::-webkit-scrollbar-track-piece { background-color: transparent; }
::-webkit-scrollbar-thumb { min-height: 40px; border: 5px solid transparent; border-radius: 8px; background-color: var(--color-bk-tint10); background-clip: padding-box; }  
::-webkit-scrollbar-thumb:hover { background-color: var(--color-bk-tint20); }
::-webkit-scrollbar-button { display: none; }
::-webkit-scrollbar-corner { border: 0; background-color: transparent; }


/* FOCUS */
:focus { outline: var(--style-focus); }



/* IMPORTANT */
.br { width: 100% !important; }
.hide { display: none !important; }
.blind { position: fixed !important; top: -9999px !important; left: -9999px !important; opacity: 0 !important; }

.fix { flex: none !important; width: auto !important; }

.fl { float: left !important; }
.fr { float: right !important; }
.cb { clear: both !important; }

.tr { text-align: right !important; }
.tl { text-align: left !important; }
.tc { text-align: center !important; }

.mr { margin-right: auto !important; }
.ml { margin-left: auto !important; }

.fs { justify-content: flex-start !important; }
.fe { justify-content: flex-end !important; }
.fc { justify-content: center !important; }
.fb { justify-content: space-between !important; }

.noF { float: none !important; }
.noB { border: none !important; }
.noO { outline: none !important; }
.noP { padding: 0 !important; }
.noM { margin: 0 !important; }
.noG { gap: 0 !important; }

.xxs { width: 80px !important; }
.xs { width: 100px !important; }
.sm { width: 120px !important; }
.md { width: 160px !important; }
.lg { width: 200px !important; }
.xl { width: 240px !important; }
.xxl { width: 280px !important; }








/******************** OVERRIDE ********************/

.ui-front { z-index: 300; }

.ui-widget { font: 500 0.75rem/1 var(--font-family); }



/* slider */
.ui-widget.ui-widget-content.ui-slider { border: 1px solid var(--color-gray-tint10); border-radius: var(--radius-component); background: var(--color-gray-tint05); }
.ui-widget.ui-widget-content.ui-slider .ui-slider-handle { width: 16px; height: 16px; border: 1px solid var(--color-gray-tint30); border-radius: 50%; background: var(--color-wh); box-shadow: var(--shadow-box-min); }
.ui-widget.ui-widget-content.ui-slider .ui-slider-handle.ui-state-hover { border-color: var(--color-gray-tint50); box-shadow: var(--shadow-box-min), var(--shadow-box-max); }
.ui-widget.ui-widget-content.ui-slider .ui-slider-handle.ui-state-active { background: var(--color-primary); box-shadow: none; }

.ui-widget.ui-widget-content.ui-slider.ui-slider-horizontal { height: 8px; }
.ui-widget.ui-widget-content.ui-slider.ui-slider-horizontal .ui-slider-handle { top: 50%; transform: translate(-50%, -50%); margin: 0; }

.ui-widget.ui-widget-content.ui-slider.ui-slider-vertical { width: 8px; }
.ui-widget.ui-widget-content.ui-slider.ui-slider-vertical .ui-slider-handle { left: 50%; transform: translate(-50%, 50%); margin: 0; }
.ui-widget.ui-widget-content.ui-slider.ui-slider-vertical .ui-slider-handle span { display: none; }
.ui-widget.ui-widget-content.ui-slider.ui-slider-vertical .ui-slider-handle.ui-state-active span { display: inline-flex; }



/* datepicker */
.ui-widget.ui-widget-content.ui-datepicker { width: 260px; z-index: 300 !important; color: var(--color-bk); border: 1px solid var(--color-gray-tint50); border-radius: var(--radius-component); background: var(--color-wh); padding: 8px; box-shadow: var(--shadow-box-min); }
.ui-widget.ui-widget-content.ui-datepicker .ui-datepicker-header { padding: 0; }

.ui-widget-header { position: relative; height: 40px; line-height: 40px; text-align: center; border-radius: 0; border: 0; border-bottom: 1px solid var(--color-gray-tint10); background: none; margin-bottom: 8px; }
.ui-widget-header .ui-datepicker-title { display: flex; justify-content: center; align-items: center; height: 32px; font-size: 0.875rem; line-height: 1; }
.ui-widget-header .ui-datepicker-month::before { content: "."; }
.ui-widget-header .ui-datepicker-prev { top: 0; left: 0; display: inline-flex; justify-content: center; align-items: center; width: 32px; height: 32px; font-size: 0; border-radius: 50%; }
.ui-widget-header .ui-datepicker-prev::before { position: static; content: ""; display: block; width: 6px; height: 6px; border-top: 1px solid var(--color-bk); border-right: 1px solid var(--color-bk); transform: rotate(-135deg); }
.ui-widget-header .ui-datepicker-next { top: 0; right: 0; display: inline-flex; justify-content: center; align-items: center; width: 32px; height: 32px; font-size: 0; border-radius: 50%; }
.ui-widget-header .ui-datepicker-next::before { position: static; content: ""; display: block; width: 6px; height: 6px; border-top: 1px solid var(--color-bk); border-right: 1px solid var(--color-bk); transform: rotate(45deg); }

.ui-datepicker select.ui-datepicker-month,
.ui-datepicker select.ui-datepicker-year { width: auto; height: 32px; font-size: 0.75rem; font-weight: 500; line-height: 32px; text-align: center; border-radius: var(--radius-component); background: var(--color-gray-tint05) url("../img/ico_select.svg") calc(100% - 8px) 50%/16px no-repeat; padding: 0 32px 0 16px; margin: 0 2px; }
.ui-datepicker select.ui-datepicker-month option,
.ui-datepicker select.ui-datepicker-year option { color: var(--color-bk); text-align: left; background: var(--color-wh); }
.ui-datepicker select.ui-datepicker-month:hover,
.ui-datepicker select.ui-datepicker-year:hover { color: var(--color-primary); background-color: var(--color-primary-tint10); }

.ui-widget-header .ui-datepicker-prev.ui-state-hover,
.ui-widget-header .ui-datepicker-next.ui-state-hover { border: 0; cursor: pointer; }

.ui-datepicker th { color: var(--color-bk-tint60); text-align: center; font-size: 0.75rem; font-weight: 500; }
.ui-datepicker th.ui-datepicker-week-end { color: blue; }
.ui-datepicker th.ui-datepicker-week-end:first-of-type { color: red; }
.ui-datepicker td { text-align: center; padding: 0; }
.ui-datepicker td a { padding: 0; }
.ui-datepicker td .ui-state-default { display: flex; justify-content: center; align-items: center; width: 32px; height: 32px; color: var(--color-bk-tint60); font-size: 0.75rem; font-weight: 500; line-height: 1; text-align: center; border: 0; border-radius: 50%; background: none; padding: 0; margin: auto; }
.ui-datepicker td .ui-state-default:hover,
.ui-datepicker td .ui-state-default:active { color: var(--color-primary); font-weight: 500; background-color: var(--color-primary-tint10); }
.ui-datepicker td .ui-state-default.ui-state-highlight { color: var(--color-bk); font-weight: 500; text-decoration: underline; }
.ui-datepicker td .ui-state-default.ui-state-active { color: var(--color-wh); background-color: var(--color-primary); }

.ui-datepicker-unselectable,
.ui-state-disabled { opacity: 0.3; }


/* calendar *
.calendar .ui-widget.ui-widget-content.ui-datepicker { width: 100%; box-shadow: none; margin-top: 0; }



/* autocomplete */
.ui-widget.ui-widget-content.ui-autocomplete { overflow-x: hidden; overflow-y: scroll; max-height: 160px; color: var(--color-bk); border: 1px solid var(--color-gray-tint50); border-radius: var(--radius-component); background-color: var(--color-wh); padding: 8px; box-shadow: var(--shadow-box-min); }

.ui-menu .ui-menu-item { list-style: none; }
.ui-menu .ui-menu-item-wrapper { padding: 8px; margin: 0; }
.ui-menu .ui-menu-item-wrapper.ui-state-active { color: var(--color-primary); font-weight: 500; border: 0; border-radius: var(--radius-component); background: var(--color-primary-tint10); }



/* slick */
.slick-slider,
.slick-list,
.slick-slide { width: 100%; height: 100%; }
.slick-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; font-size: 0; border-radius: var(--radius-component); z-index: 1; }
.slick-prev { right: 100%; background: url("../img/ico_page_prev_w.svg") center 50%/100% no-repeat; }
.slick-next { left: 100%; background: url("../img/ico_page_next_w.svg") center 50%/100% no-repeat; }




/* syntaxhighlighter */
.syntaxhighlighter a, .syntaxhighlighter div, .syntaxhighlighter code, .syntaxhighlighter table, .syntaxhighlighter table td, .syntaxhighlighter table tr, .syntaxhighlighter table tbody, .syntaxhighlighter table thead, .syntaxhighlighter table caption, .syntaxhighlighter textarea {  font-family: 'Consolas' !important; font-size: 0.75rem !important; line-height: 1.4 !important; }
.syntaxhighlighter .toolbar { display: none; }




/* minicolors */
.minicolors-theme-default.minicolors { flex: none; width: 32px; height: 32px; border: 1px solid var(--color-bk-tint20); border-radius: var(--radius-component); background-color: var(--color-wh); }
.minicolors-theme-default .minicolors-swatch { position: static; width: 100%; height: 100%; overflow: hidden; border-radius: 2px; }
.minicolors input[type=hidden] + .minicolors-swatch { position: absolute; top: 4px; bottom: 4px; left: 4px; right: 4px; width: auto; height: auto; background-color: var(--color-wh); }

.minicolors .minicolors-grid { top: 100%; }

.minicolors-position-bottom .minicolors-panel { top: 100%; }














/******************** BUTTON ********************/

.bt { position: relative; display: inline-flex; justify-content: center; align-items: center; height: 32px; color: var(--color-bk); font-size: 0.75rem; font-weight: 600; white-space: nowrap; line-height: 1; text-align: center; border-radius: var(--radius-component); padding: 0 16px; }
.bt input[type="file"] { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1; opacity: 0; }
.bt input[type="file"]::file-selector-button:hover,
.bt input[type="file"]:hover { cursor: pointer; }
.bt b { color: var(--color-primary); font-weight: 600; margin: 0 2px; }
.bt:disabled { opacity: 0.3; cursor: default; }
/*
.bt:not(:disabled,.only):hover { background-color: var(--color-gray-tint05); }
*/
.bt.bg { color: var(--color-wh); text-shadow: 0 0 2px var(--color-bk-tint70); background-color: var(--color-gray-tint80); }
.bt.bg b { color: var(--color-wh); }
.bt.bg:not(:disabled):hover { background-color: var(--color-gray); }
.bt.bg.primary { background-color: var(--color-primary); }
.bt.bg.primary:not(:disabled):hover { background-color: var(--color-primary-tint80); }
.bt.bg.secondary { background-color: var(--color-secondary); }
.bt.bg.secondary:not(:disabled):hover { background-color: var(--color-secondary-tint80); }


.bt.bd { color: var(--color-gray); border: 1px solid var(--color-gray-tint20); background-color: var(--color-wh); }
.bt.bd b { color: var(--color-primary); }
.bt.bd:not(:disabled):hover { border-color: var(--color-gray-tint40); }
.bt.bd.primary { color: var(--color-primary); border-color: var(--color-primary); }
.bt.bd.primary b { color: var(--color-point); }
.bt.bd.primary:not(:disabled):hover { border-color: var(--color-primary); background-color: var(--color-primary-tint05); }
.bt.bd.secondary { color: var(--color-secondary); border-color: var(--color-secondary); }
.bt.bd.secondary b { color: var(--color-point); }
.bt.bd.secondary:not(:disabled):hover { border-color: var(--color-secondary); background-color: var(--color-secondary-tint05); }


.bt.rd { border-radius: 100px !important; }

.bt.min { height: 24px; font-size: 0.6875rem; line-height: 24px; border-radius: calc(var(--radius-component) - 1px); padding: 0 8px; }
.bt.max { height: 40px; font-size: 0.875rem; padding: 0 24px; }

.bt.col { flex-direction: column; }




.bt.ico { padding: 0 12px 0 8px; }
.bt.ico::before { flex: none; content: ""; display: inline-block; width: 24px; height: 24px; font-size: 0; background-size: 20px; background-position: center 50%; background-repeat: no-repeat; }
.bt.ico.bg::before,
.bt.ico.bg::after { filter: invert(100%); }
.bt.ico.bd { color: var(--color-bk); }

.bt.ico.new::after { top: 4px; right: 4px; }

.bt.ico.min::before,
.bt.ico.min::after { width: 16px; height: 16px; background-size: 16px !important; }
.bt.ico.max::before,
.bt.ico.max::after { width: 32px; height: 32px; }

.bt.ico.col { flex-direction: column; }

.bt.ico.only { min-width: 32px; font-size: 0 !important; padding: 0 !important; }
.bt.ico.only.min { min-width: 24px; }
.bt.ico.only.max { min-width: 40px; }



.bt.ico.x::before { background-image: url("../img/ico_x.svg"); }

.bt.ico.out::before { background-image: url("../img/ico_out.svg"); }

.bt.ico.pop::before { background-image: url("../img/ico_pop.svg"); background-size: 14px; }
.bt.ico.pop.min::before { background-size: 12px !important; }

.bt.ico.pen::before { background-image: url("../img/ico_pen.svg"); background-position: center -2px; }
.bt.ico.pen.on { color: var(--color-wh); border-color: var(--color-gray); background-color: var(--color-gray); }
.bt.ico.pen.on::before { filter: invert(100%); }

.bt.ico.eye::before { background-image: url("../img/ico_eye.svg"); }
.bt.ico.eye::after { content: "켜짐"; position: fixed; left: -9999px; font-size: 0; opacity: 0; }
.bt.ico.eye.on { color: var(--color-bk-tint20); }
.bt.ico.eye.on::before { background-image: url("../img/ico_eye_x.svg"); opacity: 0.3; }
.bt.ico.eye.on::after { content: "꺼짐"; }

.bt.ico.menu::before { background-image: url("../img/ico_menu.svg"); }
.bt.ico.find::before { background-image: url("../img/ico_find.svg"); }
.bt.ico.lock::before { background-image: url("../img/ico_lock.svg"); background-size: 20px; }
.bt.ico.home::before { background-image: url("../img/ico_home.svg"); }
.bt.ico.copy::before { background-image: url("../img/ico_copy.svg"); background-size: 16px; }
.bt.ico.back::before { background-image: url("../img/ico_back.svg"); background-size: 22px; }
.bt.ico.bell::before { background-image: url("../img/ico_bell.svg"); background-size: 18px; }
.bt.ico.mail::before { background-image: url("../img/ico_mail.svg"); background-size: 18px; }
.bt.ico.call::before { background-image: url("../img/ico_call.svg"); background-size: 18px; }


.bt.ico.download::before { background-image: url("../img/ico_download.svg"); }
.bt.ico.download.ex { background-color: #0F7840; }
.bt.ico.upload::before { background-image: url("../img/ico_download.svg"); transform: rotate(180deg); }
.bt.ico.upload.ex { background-color: #0F7840; }


.bt.ico.plus::before { background-image: url("../img/ico_plus.svg"); }
.bt.ico.minus::before { background-image: url("../img/ico_minus.svg"); }


.bt.ico.user::before { background-image: url("../img/ico_user.svg"); background-size: 22px; }
.bt.ico.user.new { position: relative; }
.bt.ico.user.new::after { position: absolute; top: 4px; right: 4px; z-index: 1; content: ""; display: block; width: 5px; height: 5px; border-radius: 50%; background-color: #ff0000; }


.bt.ico.image::before { background-image: url("../img/ico_image.svg"); background-size: 22px; }
.bt.ico.print::before { background-image: url("../img/ico_print.svg"); }
.bt.ico.share::before { background-image: url("../img/ico_share.svg"); background-size: 18px; }
.bt.ico.reset::before { background-image: url("../img/ico_reset.svg"); }


.bt.ico.delete::before { background-image: url("../img/ico_delete.svg"); background-size: 16px; }
.bt.ico.setting::before { background-image: url("../img/ico_setting.svg"); }
.bt.ico.refresh::before { background-image: url("../img/ico_refresh.svg"); }


.bt.ico.play::before { background-image: url("../img/ico_stop.svg"); background-size: 16px; }
.bt.ico.play.on::before { background-image: url("../img/ico_play.svg"); background-size: 24px; }


.bt.ico.close::before { background-image: url("../img/ico_x.svg"); opacity: 0.5; transition: all 0.3s; }
.bt.ico.close:hover::before { opacity: 1; transform: rotate(180deg); }


.bt.ico.prev::before { background-image: url("../img/ico_page_prev.svg"); }
.bt.ico.prev.end::before { background-image: url("../img/ico_page_first.svg"); }

.bt.ico.next { padding: 0 8px 0 16px; }
.bt.ico.next::after { flex: none; content: ""; display: inline-block; width: 24px; height: 24px; font-size: 0; background: url("../img/ico_page_next.svg") center 50%/20px no-repeat; }
.bt.ico.next::before { display: none; }
.bt.ico.next.end::after { background-image: url("../img/ico_page_last.svg"); }




.bt.ico.arrow::before { background-image: url("../img/ico_toggle.svg"); transition: all 0.3s; }
.bt.ico.arrow:not(.only) { padding: 0 4px 0 12px; }
.bt.ico.arrow:not(.only)::before { order: 10; }
.bt.ico.arrow.on::before { transform: rotate(180deg); }





.bt.ico.sns::before { border-radius: 50%; background-size: cover; }
.bt.ico.sns.t::before { background-image: url("../img/sns_x.png"); }
.bt.ico.sns.f::before { background-image: url("../img/sns_f.png"); }
.bt.ico.sns.k::before { background-image: url("../img/sns_k.png"); }
.bt.ico.sns.i::before { background-image: url("../img/sns_i.png"); }
.bt.ico.sns:hover::before { transform: translateY(-2px); box-shadow: var(--shadow-box-min); }

.bt.ico.sns.min::before,
.bt.ico.sns.min::after { width: 24px; height: 24px; background-size: cover !important; }




.bt.ico.location::before { background-image: url("../img/ico_location.svg"); }


.bt.ico.info::before { background-image: url("../img/ico_info.svg"); }
.bt.ico.filter::before { background-image: url("../img/ico_filter.svg"); }
.bt.ico.filter.on { background-color: var(--color-primary); }
.bt.ico.filter.on::before { filter: invert(100%); }



.bt.ico.private.bg { background-color: var(--color-gray); }
.bt.ico.private::before { background-image: url("../img/ico_lock.svg"); background-size: 16px; }



.bt.ico.cart::before { width: 32px; height: 32px; background-image: url("../img/ico_agent_cart.svg"); background-size: 100%; }
.bt.ico.order::before { width: 32px; height: 32px; background-image: url("../img/ico_agent_order.svg"); background-size: 100%; }
.bt.ico.partner::before { width: 32px; height: 32px; background-image: url("../img/ico_agent_partner.svg"); background-size: 100%; }





/******************** COMPONENT ********************/

/* TEXTAREA */
.textarea { display: block; overflow: auto; width: 100%; height: 160px; color: var(--color-bk); font-size: 0.75rem; font-weight: 600; line-height: 1.8; text-align: left; border: 1px solid var(--color-gray-tint30); border-radius: var(--radius-component); background-color: var(--color-wh); padding: 16px; }
.textarea:read-only { background-color: var(--color-gray-tint05); }
.textarea:disabled { background-color: var(--color-gray-tint10); opacity: 0.3; }
.textarea:not(:read-only,:disabled):hover, 
.textarea:not(:read-only,:disabled):focus { border-color: var(--color-gray-tint50); box-shadow: var(--shadow-box-max); }

.textarea.min { height: 48px; line-height: 1.4; padding: 8px 16px; }
.textarea.max { height: 360px; }




/* INPUT */
.input { display: inline-block; overflow: hidden; width: 100%; height: 32px; line-height: 32px; color: var(--color-bk); font-size: 0.75rem; font-weight: 600; text-overflow: ellipsis; border: 1px solid var(--color-gray-tint30); border-radius: var(--radius-component); background-color: var(--color-wh); padding: 0 16px; }
.input:read-only { background-color: var(--color-gray-tint05); }
.input:disabled { background-color: var(--color-gray-tint10); opacity: 0.3; }
.input:not(:read-only,:disabled):hover, 
.input:not(:read-only,:disabled):focus { border-color: var(--color-gray-tint50); box-shadow: var(--shadow-box-max); }

.input.id { height: 40px; line-height: 40px; background: #fff url("../img/ico_id.svg") 8px 50%/24px no-repeat; padding-left: 40px; }
.input.pw { height: 40px; line-height: 40px; background: #fff url("../img/ico_pw.svg") 8px 50%/24px no-repeat; padding-left: 40px; }

.input.date { width: 140px; background: #fff url("../img/ico_date.svg") calc(100% - 8px) 50%/16px no-repeat; padding-right: 32px; }

.input.num { font-family: var(--font-family-code); text-align: center; padding: 0; }
.input.num[type="number"]::-webkit-inner-spin-button,
.input.num[type="number"]::-webkit-outer-spin-button { -webkit-appearance: inner-spin-button; opacity: 1; }

.input.code { font-family: var(--font-family-code); text-align: center; }

.input.money { font-family: var(--font-family-code); text-align: right; }




/* SELECT */
.select { display: inline-block; overflow: hidden; width: 100%; height: 32px; line-height: 30px; text-align: left; color: var(--color-bk); font-size: 0.75rem; font-weight: 600; text-overflow: ellipsis; border: 1px solid var(--color-gray-tint30); border-radius: var(--radius-component); background: var(--color-wh) url("../img/ico_select.svg") calc(100% - 4px) 50%/16px no-repeat; padding: 0 24px 0 16px; }
.select option { color: var(--color-bk); background-color: var(--color-wh); }
.select:disabled { background-color: var(--color-gray-tint10); opacity: 0.3; }
.select:not(:disabled):hover, 
.select:not(:disabled):focus { border-color: var(--color-gray-tint50); box-shadow: var(--shadow-box-max); }

.select[size] { overflow-y: scroll; height: auto; background: var(--color-wh); padding: 8px; }
.select[size] option { border-radius: var(--radius-component); padding: 4px; }



/* CHECK & RADIO */
.check { position: relative; display: inline-block; font-size: 0; margin-right: 24px; }
.check label { display: flex; align-items: center; gap: 4px; height: 32px; color: var(--color-bk); font-size: 0.75rem; font-weight: 600; line-height: 1.2; text-align: left; }
.check label::before { flex: none; content: ""; display: block; width: 16px; height: 16px; border: 1px solid var(--color-bk-tint10); border-radius: calc(var(--radius-component) / 2); background: var(--color-gray-tint30) url("../img/ico_check.svg") center 50%/18px no-repeat; opacity: 0.5; }
.check label b { color: var(--color-point); font-weight: 500; vertical-align: baseline; }
.check input { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 10; display: block; width: 100%; height: 100%; opacity: 0; }
.check input[type="radio"] + label::before { border-radius: 50%; }
.check input:checked ~ label { font-weight: 600; }
.check input:checked ~ label::before { background-color: var(--color-primary); opacity: 1; }
.check input:checked:disabled ~ label::before { background-color: var(--color-primary); }

.check input:disabled ~ label { opacity: 0.3; }
.check input:disabled ~ label::before { background-color: var(--color-gray-tint50); }

.check input:not(:checked,:disabled):hover ~ label::before { opacity: 1; }

.check input:not(:disabled):hover { cursor: pointer; }
.check input:not(:disabled):focus ~ label { outline: var(--style-focus); }

.check.min label { height: 24px; }
.check.min.only label { width: 24px; }

.check.only { margin: 0; }
.check.only label { justify-content: center; gap: 0; width: 32px; font-size: 0; }



.check.pic { margin-right: 0; }
.check.pic label { flex-direction: column; gap: 4px; height: auto; text-align: center; border: 1px solid var(--color-gray-tint30); border-radius: var(--radius-component); background-color: var(--color-wh); padding: 4px; }
.check.pic label::before { display: none; }
.check.pic label img { display: block; opacity: 0.3; }
.check.pic input:not(:checked,:disabled):hover ~ label { border-color: var(--color-gray-tint50); box-shadow: var(--shadow-box-max); }
.check.pic input:not(:checked,:disabled):hover ~ label img { opacity: 1; }
.check.pic input:checked ~ label { border-color: var(--color-primary); }
.check.pic input:checked ~ label img { opacity: 1; }



.check.switch label { position: relative; }
.check.switch label::before { width: 32px; height: 16px; border-radius: 8px; background-image: none; }
.check.switch label::after { position: absolute; left: 2px; top: 50%; transform: translateY(-50%); content: ""; display: block; width: 12px; height: 12px; border-radius: 50%; background-color: var(--color-wh); box-shadow: 0 0 3px rgba(0,0,0,0.4); transition: left 0.1s ease; }
.check.switch input[type="radio"] ~ label::before { border-radius: 8px; }
.check.switch input:checked ~ label::before { background: var(--color-primary-tint20); }
.check.switch input:checked ~ label::after { left: 18px; background-color: var(--color-primary); }

.check.switch.fr { margin-right: 0; }
.check.switch.fr label { flex-direction: row-reverse; }
.check.switch.fr label::after { left: auto; right: 18px; transition: right 0.1s ease; }
.check.switch.fr input:checked ~ label::after { left: auto; right: 2px; }



/* COLOR */
.color { position: relative; display: inline-block; width: 100px; height: 32px; font-size: 0; }
.color input { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 3; width: 100%; height: 100%; opacity: 0; }
.color label { flex: none; display: flex; align-items: center; width: 100%; height: 100%; color: var(--color-bk); font-size: 0.75rem; font-weight: 600; line-height: 1; text-align: left; text-transform: uppercase; border-radius: var(--radius-component); padding-left: 40px; }
.color label::after { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 2; content: ""; display: block; width: 32px; height: 32px; border: 1px solid var(--color-gray-tint30); border-radius: var(--radius-component); }
.color span { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; display: block; width: 32px; height: 32px; border-radius: var(--radius-component); background-color: #ffd966; background-clip: padding-box; box-shadow: 0 0 0 5px var(--color-wh) inset; }

.color input:disabled ~ label { opacity: 0.3; }
.color input:disabled ~ label::after { border-color: var(--color-gray-tint10); }
.color input:disabled ~ span { opacity: 0.3; }
.color input:not(:disabled):hover { cursor: pointer; }
.color input:not(:disabled):hover ~ label::after, 
.color input:not(:disabled):focus ~ label::after { border-color: var(--color-gray-tint50); box-shadow: var(--shadow-box-max); }



/* ATTACH */
.attach { position: relative; display: inline-block; font-size: 0; width: 100%; }
.attach .bt.ico.x { position: absolute; right: 0; top: 50%; transform: translateY(-50%); z-index: 20; }
.attach .bt.ico.x::before { width: 16px; height: 16px; border-radius: 50%; background-color: var(--color-gray-tint10); background-size: 12px; }
.attach .bt.ico.x ~ label { padding-right: 32px; }
.attach .bt.ico.x:hover::before { background-color: var(--color-wh-tint60); filter: invert(100%); }
.attach label { position: relative; display: block; overflow: hidden; width: 100%; height: 32px; line-height: 31px; color: var(--color-bk); font-size: 0.75rem; font-weight: 500; white-space: nowrap; text-overflow: ellipsis; border: 1px solid var(--color-gray-tint30); border-radius: var(--radius-component); background-color: var(--color-wh); padding: 0 8px 0 72px; }
.attach label::before { position: absolute; left: 4px; top: 4px; bottom: 4px; z-index: 0; content: "파일선택"; display: inline-flex; justify-content: center; align-items: center; width: 64px; height: auto; color: var(--color-wh); font-size: 0.75rem; font-weight: 400; line-height: 1; text-align: center; border-radius: calc(var(--radius-component) / 2); background-color: var(--color-gray-tint60); }
.attach input { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 10; display: block; width: 100%; height: 100%; opacity: 0; }

.attach input:disabled ~ label { background-color: var(--color-gray-tint10); opacity: 0.3; }
.attach input:disabled ~ .bt.ico.x { display: none; }
.attach input:not(:disabled):hover ~ label, 
.attach input:not(:disabled):focus ~ label { border-color: var(--color-gray-tint50); box-shadow: var(--shadow-box-max); }	
.attach input:not(:disabled):focus ~ label { outline: var(--style-focus); }
.attach .set { flex-direction: column; }












/******************** COMPONENT SET ********************/

.set { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px; width: 100%; color: var(--color-bk-tint70); font-size: 0.75rem; font-weight: 500; line-height: 1; white-space: nowrap; }
.set > * { flex: auto; }
.set > .bt { flex: none; }
.set > .check { flex: none; }
.set > .check:last-child { margin: 0; }
.set.row { flex-wrap: nowrap; }


/* FIND */
.set.find { position: relative; }
.set.find .input { padding-right: 32px; }
.set.find .bt.ico { position: absolute; right: 0; bottom: 0; }



/* RADIO */
.set.radio { flex-wrap: nowrap; gap: 0; }
.set.radio .check { margin: 0; }
.set.radio .check label { color: var(--color-bk-tint60); line-height: 30px; border: 1px solid var(--color-bk-tint10); border-right: 0; background-color: var(--color-wh); padding: 0 16px; }
.set.radio .check label::before,
.set.radio .check label::after { display: none; }
.set.radio .check:first-of-type label { border-radius: var(--radius-component) 0 0 var(--radius-component); }
.set.radio .check:last-of-type label { border-radius: 0 var(--radius-component) var(--radius-component) 0; border-right: 1px solid var(--color-bk-tint10); }
.set.radio .check:hover label { color: var(--color-bk); border-color: var(--color-bk-tint20); background-color: var(--color-bk-tint05); }
.set.radio .check:hover + .check label { border-left-color: var(--color-bk-tint20); }
.set.radio .check input:checked + label { color: var(--color-primary); border: 1px solid var(--color-primary); background-color: var(--color-primary-tint05); }



/* ID/PW */
.set.id { position: relative; }
.set.id::before { position: absolute; left: 8px; top: 50%; transform: translateY(-50%); content: ""; display: block; width: 24px; height: 24px; background: url("../img/ico_id.svg") center 50%/16px no-repeat; }
.set.id .input { height: 40px; line-height: 40px; padding-left: 32px; }

.set.pw { position: relative; }
.set.pw::before { position: absolute; left: 8px; top: 50%; transform: translateY(-50%); content: ""; display: block; width: 24px; height: 24px; background: url("../img/ico_pw.svg") center 50%/16px no-repeat; }
.set.pw .input { height: 40px; line-height: 40px; padding-left: 32px; }



/* EMAIL */
.set.mail { flex-wrap: wrap; }
.set.mail .input { flex: auto; width: auto; }
.set.mail .select { flex: none; width: auto; }
.set.mail.col .input:last-child { width: 100%; }



/* ADDRESS */
.set.address .bt { width: 80px; }
.set.address .input:nth-of-type(1) { flex: none; width: 100px; text-align: center; }
.set.address .input:nth-of-type(2) { flex: none; width: 320px; }
.set.address .input:nth-of-type(3) { flex: auto; width: auto; }
.set.address.col .input:nth-of-type(2) { flex: auto; width: auto; }
.set.address.col .input:nth-of-type(3) { width: 100%; }


/* CHARGE */
.set.charge { flex: none; flex-wrap: nowrap; width: auto; }
.set.charge .select { flex: none; }
.set.charge .input { width: auto; }


/* PRODUCT */
.set.product { flex-wrap: nowrap; }
.set.product .input { flex: none; width: 120px; }
.set.product .input ~ .input { width: 240px; }
.set.product .bt { margin-left: auto; }


/* SERIAL */
.set.serial { flex-wrap: nowrap; width: auto; max-width: 440px; }
.set.serial .input { flex: 1; }


/* NUMBER */
.set.number { position: relative; flex: none; flex-wrap: nowrap; width: 120px; }
.set.number .input { width: 100%; text-align: center; padding: 0 32px; }
.set.number .bt.ico { position: absolute; top: 50%; transform: translateY(-50%); }
.set.number .bt.ico.minus { left: 0; }
.set.number .bt.ico.plus { right: 0; }












/******************** OBJECT ********************/


/* LOGO */
.logo { position: relative; height: 40px; }
.logo span { display: inline-flex; align-items: flex-end; height: 100%; font-size: 0; }
.logo span::before { flex: none; content: ""; display: inline-block; width: 100px; height: 100%; font-size: 0; background: url("../img/logo.png") 0 50%/100% no-repeat; }
.logo span::after { flex: none; content: "Service"; display: inline-block; color: var(--color-wh); font-size: 0.75rem; font-weight: 400; letter-spacing: 1px; line-height: 1; text-align: left; border-radius: 100px; background-color: var(--color-primary); padding: 2px 6px 3px 6px; margin-bottom: 3px; transform: translateX(-6px); }
.logo a { position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 1; display: block; width: 100%; height: 100%; font-size: 0; opacity: 0; }
.logo a:hover ~ span { opacity: 0.5; }


/* REQUIRED */
.rq::after { flex: none; content: ""; display: inline-block; width: 3px; height: 3px; font-size: 0; border-radius: 50%; background-color: var(--color-point); vertical-align: text-top; margin: 2px; }


/* CODE TEXT */
.codetxt { font: 600 0.75rem/1 var(--font-family-code); vertical-align: baseline; }
.codetxt.bg { color: var(--color-wh); border-radius: var(--radius-component); background-color: var(--color-primary); padding: 2px 4px; }


/* INFO TEXT */
.infotxt { display: inline-block; color: var(--color-gray-tint70); font-size: 0.6875rem; font-weight: 500; line-height: 1.4; text-align: left; white-space: normal; padding: 4px 0; }
.infotxt::before { content: ""; display: inline-block; width: 16px; height: 16px; font-size: 0; background: url("../img/ico_info.svg") center 50%/contain no-repeat; opacity: 0.5; vertical-align: top; margin-right: 4px; }
.infotxt strong { color: var(--color-gray); font-weight: 600; vertical-align: baseline; }
.infotxt b { color: var(--color-bk); vertical-align: baseline; }
.infotxt.bold { color: var(--color-bk); }
.infotxt.bold::before { opacity: 1; }
.infotxt.red { color: #FF0000; }
.infotxt.red::before { background-image: url("../img/ico_info_red.svg"); opacity: 1; }
.infotxt.bg { border-radius: var(--radius-box-max); background-color: var(--color-gray-tint03); padding: 16px; }
.infotxt.br { width: 100%; }

.infotxt.msg { display: block; font-size: 0.75rem; line-height: 1.6; text-align: center; padding: 0; margin: 16px auto; }
.infotxt.msg .title { display: block; width: 100%; color: var(--color-bk); font-size: 0.875rem; font-weight: 600; padding: 8px 0; }
.infotxt.msg .btns { width: 100%; margin-top: 16px; }
.infotxt.msg::before { display: block; width: 48px; height: 48px; border-radius: 50%; background: url("../img/bg_msg.svg") center 50%/100% no-repeat; opacity: 0.2; margin: 0 auto; }
.infotxt.msg.bg { background-color: var(--color-gray-tint05); padding: 40px 24px; }

.infotxt.msg.ok::before { background-image: url("../img/bg_msg_ok.svg"); opacity: 1; }
.infotxt.msg.ok.bg { background-color: var(--color-primary-tint05); }
.infotxt.msg.no::before { background-image: url("../img/bg_msg_no.svg"); opacity: 1; }

.infotxt.msg.mail::before { background-image: url("../img/ico_mail.svg"); transform: none; }



/* LINK TEXT */
.linktxt { display: inline-block; color: var(--color-bk); font-size: 0.75rem; font-weight: 400; line-height: 1.4; text-align: left; text-decoration: underline solid var(--color-bk); text-underline-position: under; text-decoration-skip-ink: none; vertical-align: baseline; }
.linktxt b { font-weight: 600; vertical-align: baseline; }
.linktxt:hover { color: var(--color-primary) !important; text-decoration: underline solid var(--color-primary); cursor: pointer; }
.linktxt.crop { overflow: hidden; max-width: 100%; line-height: 1; white-space: nowrap; text-overflow: ellipsis; }
.linktxt.down::before { content: ""; display: inline-block; width: 16px; height: 16px; font-size: 0; border-radius: 50%; background: var(--color-gray-tint10) url("../img/ico_download.svg") center -1px/16px no-repeat; vertical-align: middle; margin-right: 4px; }



/* STATE */
.state { display: inline-flex; align-items: center; gap: 4px; color: var(--color-bk-tint50); font-size: 0.75rem; font-weight: 600; line-height: 1; white-space: nowrap; }
.state b { color: var(--color-bk); font-weight: 600; }
.state::before { flex: none; content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background-color: var(--color-gray-tint20); } /* 기본상태, 접수중, 미답변 */
.state.in::before { background-color: var(--color-gray); } /* 확인중, 검토중, 대기 */
.state.on::before { background-color: #0072bc; } /* 개선중, 진행중, 작업중 */
.state.ok::before { background-color: #00a651; } /* 개선완료, 답변완료, 성공 */
.state.no::before { background-color: #ed1c24; } /* 개선불가, 실패 */

.state.step1::before { background-color: var(--color-gray-tint20); } /* 수리의뢰 */
.state.step2::before { background-color: var(--color-primary-tint40); } /* 접수등록 */
.state.step3::before { background-color: #fbaf5d; } /* 견적등록 */
.state.step4::before { background-color: #00a651; } /* 수리진행 */
.state.step5::before { background-color: var(--color-gray); } /* 조치완료 */

.state.ck { gap: 0; color: #00a651; } /* 확인완료, 인증완료 */
.state.ck::before { width: 16px; height: 16px; background: url("../img/ico_check_g.svg") center 50%/24px no-repeat; }




/* NOTE */
.note { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; width: 100%; font-size: 0; margin: 8px 0; }
.note > strong { display: block; width: 100%; color: var(--color-secondary); font-size: 0.75rem; font-weight: 600; }

.note li { color: var(--color-gray); font-size: 0.75rem; font-weight: 400; line-height: 1.4; white-space: normal; }
.note li * { vertical-align: baseline; }
.note li b { flex: none; display: inline-block; font-weight: bold; }
.note li b:first-child { margin-right: 8px; }
.note li strong { display: inline; color: var(--color-bk); font-weight: 600; }
.note li .path { align-self: center; }

.note li.dot { position: relative; padding-left: 8px; }
.note li.dot::before { position: absolute; top: 7px; left: 0; content: ""; width: 2px; height: 2px; background-color: var(--color-gray); }
.note li.br { flex-wrap: wrap; }
.note li.br b { display: block; width: 100%; margin-right: 0; }
.note li.br:last-child { border-top: 1px solid var(--color-gray-tint05); padding-top: 8px; margin-top: 8px; }

.note ul { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.note ul.bd { border-top: 1px solid var(--color-gray-tint05); padding-top: 12px; }
.note ul.bd:first-child { border: 0; padding-top: 0; }
.note ul.bd + ul.bd { margin-top: 4px; }

.note ul.bar { gap: 0; border-left: 4px solid var(--color-gray-tint05); padding-left: 8px; }
.note ul.bar > li ~ li { margin-top: 8px; }

.note ul.half { display: inline-flex; align-self: flex-start; width: calc(50% - 4px); }

.note.bd { border: 1px solid var(--color-gray-tint10); }
.note.bg { background-color: var(--color-gray-tint03); }

.note:is(.bd,.bg) { border-radius: var(--radius-box-min); padding: 16px; }




/* PATH */
.path { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; color: var(--color-bk-tint40); font-size: 0.6875rem; font-weight: 600; line-height: 1; vertical-align: baseline; }
.path span { position: relative; display: flex; align-items: center; gap: 8px; }
.path span ~ span::before { flex: none; content: ""; display: block; width: 7px; height: 7px; border-top: 1px solid var(--color-bk-tint20); border-right: 1px solid var(--color-bk-tint20); transform: rotate(45deg); }
.path b { color: var(--color-bk); font-size: 0.75rem; margin: 0 4px; }





/* BADGE */
.badge { flex: none; display: inline-block; overflow: hidden; max-width: 100%; height: 32px; line-height: 32px; color: var(--color-bk); font-size: 0.75rem; font-weight: 600; white-space: nowrap; text-align: center; text-overflow: ellipsis; border-radius: 100px; background-color: var(--color-gray-tint05); padding: 0 16px; vertical-align: middle; }
.badge i { display: inline-flex; justify-content: center; align-items: center; gap: 2px; color: var(--color-bk-tint40); vertical-align: baseline; }
.badge b { display: inline-flex; justify-content: center; align-items: center; gap: 2px; color: var(--color-primary); font-weight: 600; vertical-align: baseline; }
.badge.min { height: 22px; line-height: 22px; font-size: 0.75rem; padding: 0 12px; }
.badge.max { height: 40px; line-height: 40px; padding: 0 20px; }

.badge.type0 { color: #fba05d; background-color: #feeedb; }
.badge.type1 { color: #448ccb; background-color: #e5edf7; }
.badge.type2 { color: #1cbbb4; background-color: #e4f5f4; }

.badge.x { gap: 0; padding-right: 8px; }
.badge.x::after { content: ""; width: 24px; height: 24px; background: url("../img/ico_x.svg") center 50%/12px no-repeat; }
.badge.x:hover { background-color: var(--color-gray-tint10); }

.badge[href]:hover { color: var(--color-primary); }


.badge.ok { color: var(--color-primary-tint60); background-color: var(--color-primary-tint10); }
.badge.no { color: rgba(255,0,0,0.6); background-color: rgba(255,0,0,0.08); }




/* TAG */
.tag { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.tag .bt.ico.reset { flex: none; border-radius: 50%; background-color: var(--color-bk-tint05); }
.tag .bt.ico.reset:hover { background-color: var(--color-bk-tint10); }
.tag .badge { flex: none; }

.tag.pick .badge { color: var(--color-bk-tint60); border: 1px solid var(--color-gray-tint10); background-color: var(--color-wh); }
.tag.pick .badge:hover { color: var(--color-bk); border-color: var(--color-gray-tint30); cursor: pointer; }
.tag.pick .badge.on { color: var(--color-wh); background-color: var(--color-gray); }







/* COUNT */
.count { display: inline-flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px; color: var(--color-bk-tint50); font-size: 0.75rem; font-weight: 400; line-height: 1; }
.count b { color: var(--color-bk); font-weight: 600; vertical-align: baseline; }






/* TOGGLE */
.toggle { position: relative; }

.toggle .dropbox { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); z-index: 10; display: none; font-size: 0; border-radius: var(--radius-box-min); background-color: var(--color-wh); box-shadow: var(--shadow-box-max); padding: 16px; }
.toggle .dropbox.lt { left: 0; transform: none; }

.toggle .slipbox { display: none; width: 100%; }
.toggle .slipbox.bg { background-color: var(--color-gray-tint03); padding: 8px; }

.toggle.hover:hover .dropbox { display: block; }







/* TAB */
.tabs { display: block; overflow-y: hidden; overflow-x: auto; width: 100%; font-size: 0; margin: 8px 0; }
.tabs > ul { display: inline-flex; align-items: stretch; width: auto; border-radius: var(--radius-box-min); background-color: var(--color-gray-tint05); padding: var(--radius-box-min); }
.tabs > ul > li { display: inline-flex; align-items: center; }
.tabs .tab { display: flex; justify-content: center; align-items: center; gap: 4px; width: 100%; height: 32px; color: var(--color-bk-tint50); font-size: 0.75rem; font-weight: 600; line-height: 1; white-space: nowrap; border-radius: var(--radius-box-min); padding: 0 24px; }
.tabs .tab b { flex: none; display: inline-block; color: var(--color-point); font-size: 0.75rem; font-weight: 500; line-height: 1; letter-spacing: 0; }
.tabs .tab:hover { color: var(--color-bk); cursor: pointer; }
.tabs .tab.on { color: var(--color-primary); font-weight: 600; background-color: var(--color-wh); box-shadow: var(--shadow-box-min); }
.tabs .tab.on b { color: var(--color-point); }





/* STEP */
.steps { display: flex; justify-content: center; align-items: flex-start; width: 100%; margin: 8px 0; }
.steps .step { flex: none; display: inline-flex; justify-content: center; align-items: center; gap: 4px; height: 24px; color: var(--color-gray-tint50); font-size: 0.75rem; font-weight: 600; text-align: center; line-height: 1; }
.steps .step b { flex: none; display: inline-block; color: var(--color-point); font-size: 0.75rem; font-weight: 600; line-height: 1; letter-spacing: 0; }
.steps .step[href] { height: 32px; }
.steps .step[href]:hover { color: var(--color-gray); cursor: pointer; }
.steps .step[href]:hover::before { background-color: var(--color-gray-tint40); }

.steps > ol { counter-reset: step; display: inline-flex; align-items: stretch; gap: 16px; }
.steps > ol > li { counter-increment: step; display: inline-flex; justify-content: center; align-items: center; gap: 12px; }
.steps > ol > li::after { flex: none; content: ""; display: inline-block; width: 8px; height: 8px; border-top: 2px solid var(--color-gray-tint20); border-right: 2px solid var(--color-gray-tint20); transform: rotate(45deg); }
.steps > ol > li:last-of-type::after { display: none; }
.steps > ol > li.on .step { color: var(--color-gray); }
.steps > ol > li.on .step::before { background-color: var(--color-primary); }

.steps.num .step::before { content: counter(step); flex: none; display: inline-flex; justify-content: center; align-items: center; width: 20px; height: 20px; color: var(--color-wh); font-size: 0.75rem; font-weight: 600; text-align: center; line-height: 1; border-radius: 50%; background-color: var(--color-gray-tint20); }

.steps.col .step { flex-direction: column; gap: 8px; height: auto; }











/* BTNS */
.btns { display: inline-flex; justify-content: center; align-items: center; gap: 8px; }
.btns * { flex: none; width: auto; }

.btns.col { flex-direction: column; }
.btns.col .bt { width: 100%; }








/* ITEM */
.item { position: relative; display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; gap: 8px; width: 100%; }

.item .tit { flex: auto; display: block; max-width: 100%; color: var(--color-bk); font-size: 0.875rem; font-weight: 600; line-height: 1.4; text-align: left; word-break: break-all; }
.item .tit.min { font-size: 0.75rem; }
.item .tit.max { font-size: 1rem; }
.item .tit.fix { padding-right: 16px; }
.item .tit.fix + .txt { flex: none; max-width: 100%; }

.item .txt { flex: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; max-width: 100%; color: var(--color-bk-tint50); font-size: 0.75rem; font-weight: 400; line-height: 1.4; }
.item .txt > span { display: inline-flex; flex-wrap: wrap; gap: 4px; line-height: 1.4; white-space: nowrap; }
.item .txt > span b { color: var(--color-bk-tint70); font-weight: 600; white-space: normal; }
.item .txt > span b.point { color: var(--color-point); }
.item .txt > span i { white-space: normal; }
.item .txt > span::after { flex: none; align-self: center; content: ""; display: block; width: 1px; height: 10px; background-color: var(--color-bk); opacity: 0.2; margin: 0 8px 0 4px; }
.item .txt > span:last-of-type::after { display: none; }
.item .txt > span.mr::after { display: none; }
.item .txt.br { color: var(--color-bk-tint70); }

.item .pic { display: block; overflow: hidden; width: 100%; height: auto; aspect-ratio: 16 / 9; font-size: 0; background: var(--color-secondary-tint03) url("../img/noimg.svg") center 50%/48px no-repeat; }
.item .pic :is(img,embed) { display: block; width: 100%; height: 100%; object-fit: cover; }
.item .pic[type]:hover { cursor: pointer; opacity: 0.5; }
.item .pic.min { width: 48px; }

.item .less { flex: auto; display: flex; align-items: center; gap: 8px; overflow: hidden; }
.item .less * { flex: none; }
.item .less .tit { flex: auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.item.q::before { content: "Q"; flex: none; display: inline-flex; justify-content: center; align-items: center; width: 24px; height: 24px; color: var(--color-wh); text-align: center; line-height: 1; border-radius: 50%; background-color: var(--color-secondary-tint50); margin-right: 8px; }
.item.a { background-color: var(--color-gray-tint03); padding: 16px; }
.item.a::before { content: "A"; flex: none; display: inline-flex; justify-content: center; align-items: center; width: 24px; height: 24px; color: var(--color-wh); text-align: center; line-height: 1; border-radius: 50%; background-color: var(--color-gray-tint50); margin-right: 8px; }

.item.row { flex-direction: row; flex-wrap: nowrap; gap: 4px 8px; }
.item.row .tit { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item.row .less { width: 100%; }

.item:is(.bd,.bg) { border-radius: var(--radius-box-max); padding: 16px; margin: 8px 0; }
.item.bd { border: 1px solid var(--color-secondary-tint10); }
.item.bg { background-color: var(--color-secondary-tint03); }








/* search */
.search { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end; gap: 8px 40px; width: 100%; border: 1px solid var(--color-secondary-tint05); border-radius: var(--radius-box-min); background-color: var(--color-secondary-tint03); padding: 16px; margin: 8px 0; }
.search .field { justify-content: flex-start; width: auto; margin: 0; }
.search .field .set { flex-wrap: nowrap; }
.search .field .select { flex: none; width: auto; }
.search .btns { flex: none; justify-content: flex-end; margin-left: auto; }
.search .btns.br { border-top: 1px solid var(--color-gray-tint05); padding-top: 8px; }








/* headline */
.headline { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; width: 100%; }
.headline .title { display: inline-flex; align-items: center; height: 32px; gap: 4px; }
.headline .count { min-height: 32px; }
.headline .count b { color: var(--color-primary); }
.headline .count ~ .check { margin: 0; }
.headline .set { width: auto; }
.headline .item { position: relative; border-top: 4px solid var(--color-gray-tint05); border-bottom: 4px solid var(--color-gray-tint05); padding: 24px 56px 24px 16px; }
.headline .item > .bt.back { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); }





/* LIST */
.list { display: block; width: 100%; margin: 8px 0; }

.list > :is(ol,ul) { display: flex; flex-wrap: wrap; align-items: flex-start; }
.list > :is(ol,ul) > li { flex: none; position: relative; display: flex; flex-wrap: wrap; align-items: center; width: 100%; }
.list > :is(ol,ul) > li > .item { flex: auto; padding: 16px; }
.list > :is(ol,ul) > li.nodata { justify-content: center; border-color: var(--color-bk-tint05); background-color: var(--color-bk-tint03); padding: 16px; }
.list > :is(ol,ul) > li.toggle > .item { max-width: calc(100% - 48px); }
/*.list > :is(ol,ul) > li.toggle > .slipbox { background-color: var(--color-wh); }*/

.list > ol { counter-reset: rank; }
.list > ol > li { counter-increment: rank; gap: 8px; padding: 16px; }
.list > ol > li::before { content: counter(rank); flex: none; display: inline-flex; justify-content: center; align-items: center; align-self: flex-start; width: 24px; height: 24px; color: var(--color-wh); font-size: 0.625rem; font-weight: 600; text-align: center; line-height: 1; border-radius: 50%; background-color: var(--color-gray-tint50); margin: 4px 0; }
.list > ol > li > .item { max-width: calc(100% - 32px); padding: 0; }
.list > ol > li.nodata::before { display: none; }
.list > ol > li.toggle > .item { max-width: calc(100% - 72px); }
.list > ol > li.toggle > .slipbox { width: calc(100% - 32px); margin-left: 32px; }


.list.bd > :is(ol,ul) { border-top: 1px solid var(--color-secondary-tint10); }
.list.bd > :is(ol,ul) > li { border-bottom: 1px solid var(--color-secondary-tint10); }
.list.bd.box > :is(ol,ul) { border-radius: var(--radius-box-min); border: 1px solid var(--color-secondary-tint20); background-color: var(--color-wh); }
.list.bd.box > :is(ol,ul) > li:last-of-type { border-bottom: 0; }
.list.bd.gap > :is(ol,ul) { border: 0; gap: 8px; }
.list.bd.gap > :is(ol,ul) > li { border-radius: var(--radius-box-min); border: 1px solid var(--color-bk-tint07); }
.list.bd.gap.bg > :is(ol,ul) > li { background-color: var(--color-bk-tint03); }

.list.bd.hover > :is(ol,ul) > li:not(.on,.nodata):hover { background-color: var(--color-primary-tint03); }
.list.bd.hover > :is(ol,ul) > li:not(.on,.nodata):hover > .item .tit { color: var(--color-primary); }
.list.bd.hover > :is(ol,ul) > li.on:not(.nodata) > .item .tit { color: var(--color-primary); }

.list.card .item { align-content: flex-start; width: 100%; height: 100%; padding: 16px; }
.list.card .item .path,
.list.card .item .less { width: 100%; }
.list.card > :is(ol,ul) { align-items: stretch; gap: 16px; }
.list.card > :is(ol,ul) > li { width: calc((100% - (16px * 4)) / 5); border-radius: var(--radius-box-min); border: 1px solid var(--color-secondary-tint20); background-color: var(--color-wh); box-shadow: var(--shadow-box-min); }
.list.card > :is(ol,ul) > li.nodata { width: 100%; border: 0; background-color: var(--color-bk-tint03); box-shadow: none; }
.list.card.hover > :is(ol,ul) > li:not(.nodata):hover { border-color: var(--color-secondary-tint30); box-shadow: var(--shadow-box-min), var(--shadow-box-max); }


.list.stay > ul > li { padding: 8px 0 8px 24px; }
.list.stay > ul > li::before { position: absolute; left: 10px; top: 0; bottom: 0; content: ""; display: block; width: 4px; height: auto; font-size: 0; background-color: var(--color-bk-tint05); }
.list.stay > ul > li:first-of-type::before { top: 24px; }
.list.stay > ul > li:last-of-type::before { bottom: auto; height: 24px; }
.list.stay > ul > li::after { position: absolute; left: 0; top: 20px; content: ""; display: inline-flex; justify-content: center; align-items: center; align-self: flex-start; width: 24px; height: 24px; font-size: 0; border-radius: 50%; border: 2px solid var(--color-wh); background: #ddd url("../img/ico_check.svg") center 50%/22px no-repeat;; box-shadow: 0 0 8px var(--color-bk-tint20); }
.list.stay > ul > li.toggle > .slipbox { padding: 0 16px 16px 16px; }
.list.stay > ul > li.toggle > .slipbox > .note:first-child { margin-top: 0; }
.list.stay > ul > li.ing > .slipbox { display: block; }
.list.stay > ul > li.ing::after { background-color: var(--color-primary); }
.list.stay > ul > li.ing ~ li .title { opacity: 0.3; }





/* GRID */
.grid { display: block; width: 100%; margin: 8px 0; }

.grid table { min-width: 100%; border-top: 2px solid var(--color-secondary-tint50); border-collapse: separate; }
.grid table ~ table { border-top: 1px solid var(--color-secondary-tint30); margin-top: 8px; }
.grid table ~ .textarea { margin-top: 8px; }

.grid :is(th,td) { height: 32px; font-size: 0.75rem; text-align: center; line-height: 1.2; padding: 4px; }

.grid td { color: var(--color-bk); text-align: center; border-right: 1px solid var(--color-gray-tint10); border-bottom: 1px solid var(--color-gray-tint10); }
.grid td:last-child { border-right: 0; }
.grid td.bold { font-weight: 600; }
.grid td.bold.point { color: var(--color-point); }

.grid td.won { text-align: right; }
.grid td.won::after { content: "원"; margin: 0 8px; }

.grid td.per::after { content: "%"; color: var(--color-bk-tint30); margin-left: 4px; }

.grid td.scroll { padding: 0; }
.grid td.scroll > div { height: 100%; overflow-y: scroll; padding: 8px; }


.grid th { color: var(--color-gray); font-weight: 600; white-space: nowrap; border-right: 1px solid var(--color-secondary-tint10); border-bottom: 1px solid var(--color-secondary-tint10); background-color: var(--color-secondary-tint03); }
.grid th:not(.ex):last-child { border-right: 0; }

.grid tr.bd td { border-top: 1px solid var(--color-secondary-tint20); }
.grid tr.bd:first-child td { border-top: 0; }

.grid tr.nodata td { padding: 8px; }
.grid tr.nodata td .infotxt { opacity: 0.5; }
.grid tr.nodata td .btns { margin-top: 16px; }
.grid tr.nodata.max td { height: 160px; }
.grid tr.nodata.max td .infotxt::before { display: block; width: 24px; height: 24px; margin: 0 auto; opacity: 0.5; }

.grid thead th { text-align: center; border-bottom-color: var(--color-secondary-tint20); }

.grid tbody th { height: 40px; text-align: left; padding: 4px 16px; }
.grid tbody th ~ td { height: 40px; text-align: left; padding: 4px 16px; }

.grid tfoot :is(th,td) { border-bottom: 0; border-top: 1px solid var(--color-secondary-tint20); border-right-color: var(--color-secondary-tint10); background-color: var(--color-secondary-tint05); }

.grid.total table { border-top: 1px solid var(--color-gray); border-bottom: 1px solid var(--color-gray); }
.grid.total :is(th,td) { border: 0; }
.grid.total tbody th { background-color: var(--color-gray-tint03); }
.grid.total tbody th.plus { text-align: right; }
.grid.total tbody th.plus::before { content: ""; display: inline-block; float: left; width: 16px; height: 16px; font-size: 0; background: var(--color-primary-tint10) url("../img/ico_plus.svg") center 50%/15px no-repeat; }
.grid.total tbody th.plus + td { font-weight: 600; text-align: right; }
.grid.total tbody th.plus + td::after { content: "원"; margin: 0 8px; }
.grid.total tbody th.plus.no::before { display: none; }

.grid.total table { border-top: 1px solid var(--color-gray); border-bottom: 1px solid var(--color-gray); }
.grid.total tbody th.minus { text-align: right; }
.grid.total tbody th.minus::before { content: ""; display: inline-block; float: left; width: 16px; height: 16px; font-size: 0; background: var(--color-primary-tint10) url("../img/ico_minus.svg") center 50%/15px no-repeat; }
.grid.total tbody th.minus + td { font-weight: 600; text-align: right; }
.grid.total tbody th.minus + td::after { content: "원"; margin: 0 8px; }

.grid.total tbody th.equal { color: var(--color-point); text-align: right; }
.grid.total tbody th.equal::before { content: ""; display: inline-block; float: left; width: 16px; height: 16px; font-size: 0; background: var(--color-primary-tint10) url("../img/ico_equal.svg") center 50%/14px no-repeat; }
.grid.total tbody th.equal + td { font-size: 0.875rem; font-weight: 600; text-align: right; }
.grid.total tbody th.equal + td::after { content: "원"; margin: 0 8px; }


.grid.box table { border: 1px solid var(--color-secondary-tint20); border-radius: var(--radius-box-min); background-color: var(--color-wh); }
.grid.box tbody tr:last-child :is(th,td) { border-bottom: 0; }

.grid.scroll { overflow: auto; height: 100%; border: 1px solid var(--color-secondary-tint20); border-radius: var(--radius-box-min); }
.grid.scroll::-webkit-scrollbar-track:vertical { border-left: 1px solid var(--color-gray-tint10); }
.grid.scroll::-webkit-scrollbar-track:horizontal { border-top: 1px solid var(--color-gray-tint10); }
.grid.scroll table { border: 0; }
.grid.scroll thead { position: sticky; top: 0; left: 0; z-index: 1; background-color: var(--color-wh); }
.grid.scroll tbody tr:not(.nodata):hover { background-color: var(--color-primary-tint03); }
.grid.scroll tfoot { position: sticky; bottom: 0; left: 0; z-index: 0; background-color: var(--color-wh); }

.grid.scroll tr.fix { position: sticky; top: 32px; left: 0; z-index: 0; background-color: var(--color-wh); }
.grid.scroll tr.fix td { background-color: var(--color-gray-tint03); }

.grid.scroll.x td { white-space: nowrap; }

.grid.pick tbody tr:not(.nodata):hover { cursor: pointer; }
.grid.pick tbody tr:not(.nodata).on { background-color: var(--color-primary-tint10); }
.grid.pick tbody tr:not(.nodata).on td:not(.point) { color: var(--color-primary); }




/* PAGES */
.pages { clear: both; display: flex; justify-content: center; align-items: center; gap: 8px; width: 100%; margin: 8px 0; }
.pages .bt.ico:focus,
.pages .bt.ico:hover { background-color: var(--color-bk-tint05); }
.pages .bt.ico:disabled { background-color: transparent; }

.pages .pg { display: inline-flex; justify-content: center; align-items: center; width: 32px; height: 32px; color: var(--color-bk); font-size: 0.6875rem; line-height: 1; text-align: center; border-radius: var(--radius-component); }
.pages .pg:not(.num):focus,
.pages .pg:not(.num):hover { background-color: var(--color-bk-tint05); }
.pages .pg.on { color: var(--color-primary); font-weight: 600; text-decoration: underline; opacity: 1; }

.pages .pg.num { width: auto; gap: 4px; }
.pages .pg.num b { color: var(--color-primary); font-weight: 600; }
.pages .pg.num:hover { cursor: default; }

.pages .pg.num.only { color: var(--color-bk-tint50); border: 1px solid var(--color-primary-tint05); border-radius: 100px; background-color: var(--color-primary-tint05); padding: 0 24px; }
.pages .pg.num.only i { display: inline-flex; justify-content: center; align-items: center; gap: 4px; }
.pages .pg.num.only i::before { content: "/"; color: var(--color-bk-tint20); }
.pages .pg.num.only:hover { border-color: var(--color-primary-tint10); background-color: var(--color-primary-tint10); cursor: pointer; }







/* FIELD */
.field { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 24px; width: 100%; color: var(--color-bk-tint70); font-size: 0.75rem; font-weight: 500; text-align: left; line-height: 1.2; margin: 8px 0; }
.field > ul { display: inline-flex; flex-wrap: wrap; align-items: stretch; gap: 8px 40px; }
.field > ul > li { display: inline-flex; justify-content: flex-start; align-items: center; gap: 4px; }

.field > dl { display: flex; flex-wrap: wrap; align-items: stretch; gap: 16px; width: 100%; }
.field > dl > :is(dt,dd) { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; min-height: 32px; }
.field > dl > dt { flex: none; display: inline-block; width: 160px; color: var(--color-bk); font-size: 0.75rem; font-weight: 600; padding: 8px 0; }
.field > dl > dt > b { color: var(--color-point); font-size: 0.625rem; }
.field > dl > dt.rq { position: relative; }
.field > dl > dt.rq::after { position: absolute; top: 14px; left: 14px; }

.field > dl > dt.min { width: 100px; }
.field > dl > dt.min + dd { width: calc(100% - 100px - 16px); }
.field > dl > dt.max { width: 200px; }
.field > dl > dt.max + dd { width: calc(100% - 200px - 16px); }

.field > dl > dd { flex: auto; width: calc(100% - 160px - 16px); }
.field > dl > dd.hf { width: calc(50% - 160px - 8px); }
.field > dl > dd.hf + dd { width: calc(50% - 32px); }

.field > dl.br > dt { width: 100%; min-height: 24px; }
.field > dl.br > dt.rq::after { top: 6px; left: 6px; }

.field.bd > :is(ul,dl) { gap: 0; border-bottom: 1px solid var(--color-secondary-tint10); }
.field.bd > dl > :is(dt,dd) { border-top: 1px solid var(--color-secondary-tint10); padding: 8px; }
.field.bd > ul { width: 100%; }
.field.bd > ul > li { width: 100%; padding: 8px; }
.field.bd > ul > li ~ li { border-top: 1px solid var(--color-secondary-tint10); }

.field.bd.bg > dl { background-color: var(--color-wh); }
.field.bd.bg > dl > dt { background-color: var(--color-secondary-tint03); padding: 16px 24px; }
.field.bd.bg > dl.br > dt { min-height: 0; padding: 8px 16px; }
.field.bd.bg > dl.br > dd { border: 0; }

.field.box > :is(ul,dl) { border: 1px solid var(--color-secondary-tint20); border-radius: var(--radius-box-min); }
.field.box > dl > dt { padding: 8px 24px; }
.field.box > dl > :is(dt,dd):first-of-type { border: 0; }
.field.box > dl > dd.hf:first-of-type + dt,
.field.box > dl > dd.hf:first-of-type + dt + dd.hf { border: 0; }

.field.data { gap: 32px; padding: 16px; margin: 16px 0; }
.field.data .item { gap: 32px 8px; }





/* EDITOR */
.editor { display: block; width: 100%; }



/* MAP */
.map { display: block; width: 100%; height: 320px; border-radius: var(--radius-box-min); border: 1px solid var(--color-bk-tint10); }




/* DOCUMENT */
.document { color: var(--color-gray-tint80); font-size: 0.75rem; font-weight: 500; text-align: left; }
.document .title { display: block; width: 100%; line-height: 1.2; margin-bottom: 8px; margin-top: var(--inner-padding-min); }
.document .title:first-child { margin-top: 0; }
.document b { font-weight: 600; vertical-align: baseline; }
.document p { margin-bottom: 8px; }
.document li { position: relative; display: block; }
.document li::before { position: absolute; left: 0; top: 0; content: ""; display: block; }
.document li ~ li { margin-top: 8px; }

.document ol { counter-reset: number; display: block; margin-bottom: 8px; }
.document ol > li { counter-increment: number; padding-left: 24px; }
.document ol > li::before { content: counter(number)"."; width: 24px; }
.document ol > li > ul,
.document ol > li > ol { margin-bottom: 0; margin-top: 4px; }
.document ol > li > ol > li::before { content: counter(number)")"; }
.document ol > li > ol > li > ol > li:nth-of-type(1)::before { content: "①"; }
.document ol > li > ol > li > ol > li:nth-of-type(2)::before { content: "②"; }
.document ol > li > ol > li > ol > li:nth-of-type(3)::before { content: "③"; }
.document ol > li > ol > li > ol > li:nth-of-type(4)::before { content: "④"; }
.document ol > li > ol > li > ol > li:nth-of-type(5)::before { content: "⑤"; }

.document ul { display: block; margin-bottom: 8px; }
.document ul > li { padding-left: 8px; }
.document ul > li::before { width: 2px; height: 2px; background-color: var(--color-bk); margin-top: 8px; }
.document ul > li > ol,
.document ul > li > ul { margin-bottom: 0; margin-top: 4px; }
.document ul > li > ul > li::before { width: 4px; height: 1px; }

.document table { width: 100%; border-collapse: collapse; border-top: 1px solid var(--color-gray-tint10); margin: 4px 0 8px 0; }
.document th { color: var(--color-bk); text-align: center; vertical-align: middle; border-right: 1px solid var(--color-gray-tint05); border-bottom: 1px solid var(--color-gray-tint10); background-color: var(--color-gray-tint03); padding: 8px 16px; }
.document th:last-child { border-right: 0; }
.document td { text-align: center; vertical-align: middle; border-right: 1px solid var(--color-gray-tint05); border-bottom: 1px solid var(--color-gray-tint10); padding: 8px 16px; }
.document td:last-child { border-right: 0; }

.document tbody th { text-align: left; }
.document tbody th ~ td { text-align: left; }
				   






/* PROCESS */
.process { display: block; width: 100%; max-width: 720px; font-size: 0; margin: 0 auto; }
.process .item { align-items: flex-start; height: 100%; border-radius: var(--radius-box-max); border: 1px solid var(--color-primary-tint10); background-color: var(--color-primary-tint05); padding: 16px; }
.process .item::before { content: counter(step); display: inline-flex; justify-content: center; align-items: center; width: 16px; height: 16px; color: var(--color-wh); font: bold 0.75rem/1 var(--font-family-code); text-align: center; border-radius: 2px; background-color: var(--color-primary); }
.process .item .txt { width: 100%; }
.process .item .note { margin: 0; }
.process .item .note ul { gap: 4px; }
.process ol { counter-reset: step; display: flex; flex-wrap: wrap; gap: 0 var(--process-gap); }
.process ol > li { counter-increment: step; position: relative; display: flex; flex-direction: column; justify-content: center; align-items: stretch; width: calc((100% - var(--process-gap)) / 2); }
.process ol > li::after { flex: none; content: ""; display: block; width: 100%; height: 24px; background: url("../img/process_arrow_dw.svg") center 50%/auto 100% no-repeat; }
.process ol > li.nsk .item { border-color: var(--color-gray-tint10); background-color: var(--color-gray-tint03); }
.process ol > li.nsk .item::before { background-color: var(--color-gray); }
.process ol > li:nth-of-type(1) { order: 1; width: 100%; padding-right: calc((100% + var(--process-gap)) / 2); }
.process ol > li:nth-of-type(1)::before { flex: none; content: "수리의뢰고객"; display: flex; justify-content: center; align-items: center; width: 100px; height: 32px; color: var(--color-wh); font-size: 0.75rem; font-weight: bold; text-align: center; border-radius: 100px; background-color: var(--color-secondary); margin: 0 auto 8px auto; }
.process ol > li:nth-of-type(1) .item::after { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); content: ""; display: block; width: 0; height: 0; border: 5px solid transparent; border-top-color: var(--color-secondary); }
.process ol > li:nth-of-type(2) { order: 2; width: 100%; padding-right: calc((100% + var(--process-gap)) / 2); }
.process ol > li:nth-of-type(3) { order: 3; }
.process ol > li:nth-of-type(3)::before { position: absolute; top: 0; bottom: 24px; left: 100%; content: ""; display: block; width: var(--process-gap); height: auto; background: url("../img/process_arrow_rt.svg") center 50%/24px no-repeat; }
.process ol > li:nth-of-type(3)::after { background: none; }
.process ol > li:nth-of-type(4) { order: 4; }
.process ol > li:nth-of-type(4)::before { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); content: ""; display: block; width: 100px; height: 32px; font-size: 0; border-radius: 100px; background: #ddd url("../img/logo.png") center 50%/auto 18px no-repeat; margin-bottom: 8px; }
.process ol > li:nth-of-type(4) .item::after { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); content: ""; display: block; width: 0; height: 0; border: 5px solid transparent; border-top-color: #ddd; }
.process ol > li:nth-of-type(5) { order: 6; }
.process ol > li:nth-of-type(5)::after { background: none; }
.process ol > li:nth-of-type(6) { order: 5; }
.process ol > li:nth-of-type(6)::before { position: absolute; top: 0; bottom: 24px; left: 100%; content: ""; display: block; width: var(--process-gap); height: auto; background: url("../img/process_arrow_lt.svg") center 50%/24px no-repeat; }
.process ol > li:nth-of-type(7) { order: 7; }
.process ol > li:nth-of-type(7)::before { position: absolute; top: 0; bottom: 24px; left: 100%; content: ""; display: block; width: var(--process-gap); height: auto; background: url("../img/process_arrow_rt.svg") center 50%/24px no-repeat; }
.process ol > li:nth-of-type(7)::after { background: none; }
.process ol > li:nth-of-type(8) { order: 8; }
.process ol > li:nth-of-type(9) { order: 9; width: 100%; padding-left: calc((100% + var(--process-gap)) / 2); }
.process ol > li:nth-of-type(9)::after { display: none; }







/* CONTENT BOX */
.contbox { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: stretch; width: 100%; }
.contbox .conhead { flex: none; display: flex; justify-content: flex-start; align-items: center; }
.contbox .conbody { flex: auto; overflow-x: hidden; overflow-y: auto; height: 100%; }
.contbox .confoot { flex: none; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.contbox .confoot > .bt:not(.only) { flex: 1; }
.contbox .confoot > .btns { flex: none; justify-content: flex-start; }
.contbox .confoot > .btns ~ .btns { justify-content: flex-end; }
.contbox .confoot > .btns:only-child { flex: auto; justify-content: center; }
.contbox .confoot > .pages { width: 100%; padding: 0; }






/* PAPER */
.paper { position: relative; display: flex; flex-direction: column; gap: 8px; width: 820px; height: 1160px; background-color: var(--color-wh); }
.paper .headline { margin-top: 32px; }
.paper .headline .title { height: 24px; }
.paper .headline.top { background-color: var(--color-primary-tint10); padding: 8px 16px; margin: 0; }
.paper .headline.top::after { content: "www.nskdental.co.kr"; display: inline-block; height: 40px; color: var(--color-primary-tint60); font-size: 11px; line-height: 18px; letter-spacing: 0.5px; background: url("../img/logo.png") right 0/66px no-repeat; padding-top: 24px; margin-top: 4px; margin-left: auto; }
.paper .headline.top .title { height: auto; font-size: 1rem; margin: 0 8px; }

.paper .grid { flex: none; margin: 0; }
.paper .grid table { table-layout: auto !important; }
.paper .grid :is(th,td) { height: 32px; border-color: var(--color-bk-tint10); }
.paper .grid th { background-color: var(--color-bk-tint03); }
.paper .grid td.memo { line-height: 1.6; vertical-align: top; padding: 8px 16px; }
.paper .grid td.memo.size { height: 144px; }
.paper .grid td.memo.size.min { height: 88px; }
.paper .grid td.memo > .grid { margin: 4px 0; }
.paper .grid td.memo > .grid table { border: 0; border-top: 1px solid var(--color-bk); border-bottom: 1px solid var(--color-bk); }
.paper .grid td.memo > .grid :is(th,td) { height: 24px; }
.paper .grid td.memo > .grid th { text-align: center; border-right: 1px solid var(--color-bk-tint10); }
.paper .grid td.memo > .grid th:last-of-type { border-right: 0; }
.paper .grid td.memo > img { display: inline-block; width: 45%; margin: 4px 0; }
.paper .grid tbody th { border-right: 0; }
.paper .grid tbody th ~ td { border-right: 0; }

.paper .grid.box table { border-radius: 0; border: 1px solid var(--color-bk); }
.paper .grid.box tr:last-of-type :is(th,td) { border-bottom: 0; }

.paper .grid.border table { border: 0; border-top: 2px solid var(--color-bk); border-bottom: 2px solid var(--color-bk); }
.paper .grid.border tr:last-of-type :is(th,td) { border-bottom: 0; }

.paper .grid.total { margin-top: 0; }
.paper .grid.total table { border: 0; border-top: 2px solid var(--color-bk); border-bottom: 2px solid var(--color-bk); }

.paper .list { margin: 0; }
.paper .list > ol > li::before { background-color: var(--color-bk); }
.paper .list.bd.gap.bg > :is(ol,ul) > li { gap: 8px; border-color: var(--color-primary-tint10); background-color: var(--color-primary-tint05); padding: 16px; }

.paper .codetxt.bg { color: var(--color-bk); background-color: var(--color-bk-tint10); }

.paper .check { margin-right: 16px; }
.paper .check label { height: 20px; }
.paper .check input:checked ~ label::before { background-color: var(--color-bk); }
.paper .check input:disabled ~ label { opacity: 1; }
.paper .check input:disabled ~ label::before { background-color: var(--color-bk-tint20); }

.paper .pages { position: absolute; bottom: 0; left: 0; right: 0; transform: translateY(120%); }
.paper .pages .pg.num.only { border: 0; background-color: var(--color-bk-tint05); }
.paper .pages .pg.num.only b { color: var(--color-bk); }

.paper .note > strong { color: var(--color-bk); }
.paper .note.bg { padding: 16px; margin: 40px 0 0 0; }

.paper > .item { flex: auto; align-items: flex-start; }
.paper > .item .txt { color: var(--color-bk); border: 1px solid var(--color-bk); background-color: var(--color-bk-tint03); padding: 16px; }

.paper ~ .paper { margin-top: 24px; }







/* POPUP */
.popup { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 9999; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: var(--inner-padding-min); width: 100%; height: 100%; background-color: var(--color-bk-tint50); padding: var(--inner-padding-max); }
.popup > .contbox { width: 100%; min-width: 280px; max-width: 640px; max-height: 100%; border-radius: var(--radius-box-max); background-color: var(--color-wh); box-shadow: var(--shadow-box-max); animation: pop 0.3s ease forwards; }
@keyframes pop { from { margin-top: 100px; } to { margin-top: 0; } }
.popup.min > .contbox { max-width: 360px; }
.popup.max > .contbox { max-width: 960px; }
.popup.full > .contbox { min-width: 100%; max-width: 100%; height: 100%; }
.popup.alert { z-index: 100000; }
.popup.alert > .contbox { width: 240px; min-width: auto; max-width: auto; }

.popup > .bt.ico.close { border-radius: 50%; background-color: var(--color-bk-tint50); }
.popup > .bt.ico.close::before { filter: invert(100%); }
.popup > .contbox > .conhead { padding: 16px 24px 0 24px; }
.popup > .contbox > .conhead .title ~ .item::before { flex: none; align-self: center; content: ""; display: block; width: 1px; height: 10px; background-color: var(--color-bk); opacity: 0.2; margin-left: 8px; }
.popup > .contbox > .conhead > .bt.ico.close { margin-left: auto; }
.popup > .contbox > .conhead ~ .conbody { padding-top: 8px; }
.popup > .contbox > .conbody { overflow-y: auto; font-size: 0.875rem; line-height: 1.8; padding: 24px; }
.popup > .contbox > .conbody .infotxt.msg { margin: 0; }
.popup > .contbox > .conbody .infotxt.msg + .btns.br { margin-top: 16px; }
.popup > .contbox > .conbody > img { display: block; margin: 0 auto; }
.popup > .contbox > .confoot { padding: 8px 24px 16px 24px; }


.popup.print { background-color: var(--color-bk-tint60); backdrop-filter: blur(5px); padding: 0; }
.popup.print > .contbox { width: 100%; max-width: 100%; height: 100%; border-radius: 0; background: none; box-shadow: none; animation: fade 0.3s ease forwards; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.popup.print > .contbox > .conhead { border-bottom: 1px solid var(--color-bk-tint20); padding: 8px 24px; }
.popup.print > .contbox > .conhead .title { color: var(--color-wh); }
.popup.print > .contbox > .conbody { overflow-x: auto; min-width: 100%; padding: 24px; }
.popup.print .paper { height: auto; min-height: 1160px; padding: 16px; margin: 0 auto; }
.popup.print .paper .grid td.memo.size { height: 128px; }
.popup.print .paper .grid td.memo.size.min { height: 88px; }
.popup.print .paper .pages { bottom: 8px; transform: none; }
.popup.print .paper ~ .paper { margin-top: 40px; }






/* LOADING */
.loading { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 500; display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; height: 100%; background-color: var(--color-wh-tint50); backdrop-filter: blur(10px); }
.loading::before { position: absolute; top: 50%; left: 50%; margin: -40px 0 0 -40px; content: ""; display: block; width: 80px; height: 80px; border: 4px solid var(--color-wh); border-top: 4px solid var(--color-primary); border-radius: 50%; box-shadow: 0 0 16px var(--color-bk-tint10), 0 0 4px var(--color-bk-tint10), 0 0 16px var(--color-bk-tint10) inset, 0 0 4px var(--color-bk-tint10) inset; animation: loading 1s ease infinite; }
@keyframes loading { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.loading span { display: inline-flex; justify-content: center; align-items: center; gap: 4px; font-size: 0.75rem; font-weight: bold; text-align: center; line-height: 1; }
.loading span::after { content: "%"; color: var(--color-bk-tint30); font-weight: normal; }






/******************** SEMANTIC ********************/

/* HEADING */
h1.logo { display: inline-flex; }
h2.title { font-size: 1.25rem; }
h3.title { font-size: 1rem; }
h4.title { font-size: 1rem; }
h5.title { font-size: 0.875rem; }
h6.title { font-size: 0.75rem; }

:is(h2,h3,h4,h5,h6).title { color: var(--color-bk); font-weight: 600; line-height: 1; }
:is(h2,h3,h4,h5,h6).title b { color: var(--color-primary); font-weight: 600; vertical-align: baseline; }
:is(h2,h3,h4,h5,h6).title strong { color: var(--color-point); font-weight: 600; vertical-align: baseline; }



/* MARK */
mark.marker { color: var(--color-bk); font-weight: 600; box-shadow: var(--style-marker); vertical-align: baseline; }
mark.point { color: var(--color-point); vertical-align: baseline; }




/* NAV */
nav.nav { display: inline-block; font-size: 0; }
nav.nav .menu { display: flex; justify-content: center; align-items: center; width: 100%; height: 32px; color: var(--color-bk-tint60); font-size: 0.75rem; line-height: 1; text-align: left; white-space: nowrap; }
nav.nav .menu strong { font-weight: 600; }
nav.nav .menu[target="_blank"]::after { content: ""; display: inline-block; width: 16px; height: 16px; font-size: 0; background: url("../img/ico_pop.svg") center 2px/14px no-repeat; opacity: 0.5; }
nav.nav .menu:hover { color: var(--color-bk); cursor: pointer; }
nav.nav ul { display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; }
nav.nav li { position: relative; flex: none; display: inline-flex; align-items: center; gap: 8px; }
nav.nav li::after { flex: none; content: ""; display: block; width: 1px; height: 10px; background-color: var(--color-bk); opacity: 0.2; }
nav.nav li:last-of-type::after { display: none; }

nav.nav.dot > ul li::after { width: 2px; height: 2px; border-radius: 50%; opacity: 0.3; }






/* GNB */
nav.gnb { display: inline-flex; align-items: center; }
nav.gnb .menu { display: flex; align-items: center; width: 100%; height: 100%; color: var(--color-bk-tint80); font-size: 1rem; font-weight: 600; line-height: 1; letter-spacing: -1px; white-space: nowrap; border-bottom: 3px solid transparent; padding-top: 3px; }
nav.gnb .menu.on { color: var(--color-primary); border-bottom-color: var(--color-primary); }

nav.gnb .menu[href]:hover { color: var(--color-primary); cursor: pointer; }

nav.gnb .dropbox { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); display: none; width: 180px; height: auto; border: 1px solid var(--color-primary); border-radius: var(--radius-box-min); background-color: var(--color-wh); padding: 8px; box-shadow: var(--shadow-box-max); }
nav.gnb .dropbox .menu { justify-content: flex-start; height: 24px; font-size: 0.75rem; border-radius: var(--radius-box-min); border: 0; padding: 0 8px; }
nav.gnb .dropbox li { display: block; }
nav.gnb .dropbox li ~ li { margin-top: 4px; }
nav.gnb .dropbox .btns { gap: 4px; width: 100%; background-color: var(--color-bk-tint05); }

nav.gnb > ul { flex: auto; display: inline-flex; align-items: stretch; gap: 32px; height: 100%; }
nav.gnb > ul > li { position: relative; display: inline-flex; align-items: center; height: 100%; }
nav.gnb > ul > li:hover .menu { border-bottom-color: var(--color-primary); }
nav.gnb > ul > li:hover .dropbox { display: block; }
nav.gnb > ul > li.my { margin-left: auto; margin-right: 8px; }
nav.gnb > ul > li.my > .menu { height: 32px; font-size: 0.75rem; border: 0; color: var(--color-wh); background-color: var(--color-primary); padding: 0 16px; }
nav.gnb > ul > li.my > .menu[href]:hover { color: var(--color-wh); }
nav.gnb > ul > li.my .dropbox::before { position: absolute; top: -4.5px; left: 50%; z-index: 10; content: ""; display: block; width: 8px; height: 8px; border: 1px solid transparent; border-top-color: var(--color-primary); border-left-color: var(--color-primary); background-color: var(--color-wh); transform: rotate(45deg); margin-left: -4.5px; }
nav.gnb > ul > li.my .dropbox::after { position: absolute; top: 0; left: 50%; z-index: 20; content: ""; display: block; width: 24px; height: 8px; background-color: var(--color-wh); transform: translateX(-50%); }




/* LNB */
nav.lnb { position: sticky; top: 64px; left: 0; right: 0; z-index: 200; display: block; overflow-y: hidden; overflow-x: auto; width: 100%; background-color: var(--color-secondary); }
nav.lnb .menu { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; color: var(--color-wh-tint80); font-size: 0.875rem; font-weight: 600; line-height: 1; letter-spacing: -1px; white-space: nowrap; text-align: center; border-bottom: 3px solid transparent; padding: 3px var(--inner-padding-min) 0 var(--inner-padding-min); }
nav.lnb .menu.on { color: var(--color-wh); border-bottom-color: var(--color-primary); }

nav.lnb .menu[href]:hover { color: var(--color-wh); background-color: var(--color-primary-tint10); cursor: pointer; }

nav.lnb ul { display: block; width: 100%; font-size: 0; white-space: nowrap; text-align: center; }
nav.lnb li { position: relative; display: inline-flex; align-items: stretch; height: 48px; }
nav.lnb li::after { position: absolute; right: 0; top: 50%; transform: translateY(-50%); content: ""; display: block; width: 1px; height: 10px; background-color: var(--color-wh); opacity: 0.3; }
nav.lnb li:last-of-type::after { display: none; }



/* HEADER */
header.header { position: sticky; left: 0 !important; top: 0; right: 0; z-index: 300; flex: none; display: flex; align-items: center; height: 80px; border-bottom: 1px solid var(--color-bk-tint10); background-color: var(--color-wh); transition: all 0.3s; }
header.header .inner { display: flex; align-items: center; gap: var(--inner-padding-min); height: 100%; }
header.header .logo { flex: none; }
header.header .gnb { flex: auto; height: 100%; transition: all 0.2s; }
header.header .bt.user { flex: none; padding: 0; }
header.header .bt.home,
header.header .bt.menu { flex: none; display: none; }
header.header .btns { margin-left: auto; }
header.header .btns.fb { display: none; }
header.header .nav { display: none; }

header.header.fix { height: 64px; box-shadow: var(--shadow-box-min); }







/* FOOTER */
footer.footer { flex: none; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 24px; width: 100%; background-color: var(--color-gray); padding: 24px 0; }
footer.footer .inner { display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; gap: 16px; }
footer.footer .nav .menu { color: var(--color-wh-tint40); }
footer.footer .nav .menu strong { color: #fff799; opacity: 0.8; }
footer.footer .nav .menu:hover { color: var(--color-wh); }
footer.footer .nav .menu:hover strong { opacity: 1; }
footer.footer .nav .menu[target="_blank"]::after { filter: invert(100%); }
footer.footer .nav ul { gap: 0 16px; }
footer.footer .nav li { gap: 16px; }
footer.footer .nav li::after { background-color: var(--color-wh); opacity: 0.1; }

footer.footer .address { display: inline-flex; flex-wrap: wrap; align-items: flex-start; gap: 4px 24px; }
footer.footer .address::before { content: "엔에스케이덴탈코리아 주식회사"; width: 100%; color: var(--color-wh); font-size: 0.75rem; font-weight: 600; }
footer.footer .address span { display: inline-block; color: var(--color-wh-tint80); font-size: 0.75rem; }

footer.footer .copyright { color: var(--color-wh-tint30); font-size: 0.75rem; line-height: 1.4; letter-spacing: 1px; text-align: left; }





/* SECTION */
section.section { flex: auto; display: flex; flex-direction: column; align-items: stretch; width: 100%; margin: 0 !important; }
section.section > .headline { flex: none; }
section.section > .headline .inner { display: flex; align-items: center; gap: 24px; }
section.section > .inner { flex: auto; padding: var(--inner-padding-min); }
section.section > .inner > .headline { margin-top: var(--inner-padding-max); }
section.section > .inner > .search + .headline { margin-top: 8px; }
section.section > .inner > .btns.br { margin: var(--inner-padding-min) 0; }
section.section > .inner > .steps { margin: 0; }
section.section > .inner > .pages { margin-top: var(--inner-padding-min); }


/* 에러 */
section.section.error > .inner { display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%; }

/* 로그인 */
section.section.login > .inner { display: flex; flex-direction: column; justify-content: center; align-items: center; }
section.section.login .field { max-width: 320px; margin: 0; }
section.section.login .field.box { max-width: 400px; }

/* 회원가입 */
section.section.join > .headline { padding-top: var(--inner-padding-min); }
section.section.join > .headline .inner { flex-direction: column; justify-content: center; align-items: center; gap: 8px; }
section.section.join > .inner { max-width: 640px; }
section.section.join .field { margin: 0; }
section.section.join .infotxt.msg.ok { border-radius: var(--radius-box-max); background-color: var(--color-primary-tint05); padding: var(--inner-padding-min); margin: 0; }
section.section.join .infotxt.msg.ok::before { opacity: 1; }

/* 이용약관,개인정보처리방침,자주묻는질문 */
section.section.etc > .inner { display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%; }
section.section.etc > .headline { background-color: var(--color-gray-tint03); padding: var(--inner-padding-min) 0; }
section.section.etc > .headline .inner { flex-direction: column; justify-content: center; align-items: center; gap: 8px; }
section.section.etc > .headline .inner::after { display: none; }
section.section.etc > .headline ~ .inner { justify-content: flex-start; }


/* 메인 */
section.section.main .visual { background: url("../img/bg_user_main.jpg") center bottom no-repeat; padding: var(--inner-padding-max) 0; }
section.section.main .visual .inner { max-width: 480px; text-align: center; }
section.section.main .visual .title { color: var(--color-wh); font-size: 1.25rem; font-weight: normal; letter-spacing: -1.5px; padding: 16px 0; text-shadow: var(--shadow-box-min) }
section.section.main .visual .linktxt { color: var(--color-wh-tint60); text-decoration-color: var(--color-wh-tint60); }
section.section.main .visual .linktxt:hover { color: var(--color-wh) !important; text-decoration-color: var(--color-wh); }
section.section.main .visual .set.find { margin: 8px 0; }
section.section.main .visual .set.find .input { height: 48px; border: 2px solid var(--color-primary); border-radius: 100px; padding-right: 48px; background-color: var(--color-wh); box-shadow: var(--shadow-box-min); }
section.section.main .visual .set.find .bt.ico { top: 8px; right: 8px; border-radius: 50%; }

section.section.main .quick { font-size: 0; padding-top: var(--inner-padding-min); }
section.section.main .quick { display: block; overflow-y: hidden; overflow-x: auto; width: 100%; font-size: 0; text-align: center; white-space: nowrap; }
section.section.main .quick li { display: inline-block; font-size: 0; padding: 0 16px; }
section.section.main .quick a { display: block; width: 100%; font-size: 0.75rem; font-weight: bold; line-height: 1.2; text-align: center; }
section.section.main .quick a > br { display: none; }
section.section.main .quick a::before { content: ""; display: block; width: 80px; height: 80px; border-radius: 8px; border: 1px solid var(--color-secondary-tint05); margin: 0 auto 8px auto; transition: all 0.3s; }
section.section.main .quick a.icon1::before { background: var(--color-secondary-tint05) url("../img/quick01.png") center 50%/56px no-repeat; }
section.section.main .quick a.icon2::before { background: var(--color-secondary-tint05) url("../img/quick02.png") center 50%/56px no-repeat; }
section.section.main .quick a.icon3::before { background: var(--color-secondary-tint05) url("../img/quick03.png") center 50%/56px no-repeat; }
section.section.main .quick a.icon4::before { background: var(--color-secondary-tint05) url("../img/quick04.png") center 50%/56px no-repeat; }
section.section.main .quick a.icon5::before { background: var(--color-secondary-tint05) url("../img/quick05.png") center 50%/56px no-repeat; }
section.section.main .quick a.icon6::before { background: var(--color-secondary-tint05) url("../img/quick06.png") center 50%/56px no-repeat; }
section.section.main .quick a.icon7::before { background: var(--color-secondary-tint05) url("../img/quick07.png") center 50%/56px no-repeat; }
section.section.main .quick a:hover::before { border-color: var(--color-primary-tint20); background-color: var(--color-wh); box-shadow: var(--shadow-box-max); transform: scale(1.1); }

section.section.main .banner { font-size: 0; padding: var(--inner-padding-min) 0; }
section.section.main .banner .inner { display: flex; align-items: stretch; }
section.section.main .banner .item { position: relative; flex: 1; }
section.section.main .banner .item .pic { aspect-ratio: 0; }
section.section.main .banner .item .tit { flex: none; display: inline-flex; justify-content: center; align-items: center; color: var(--color-wh); letter-spacing: 1px; text-align: center; text-shadow: 0 0 8px var(--color-bk); border-radius: 100px; padding: 8px 16px; }
section.section.main .banner .item .tit::after { content: ""; display: inline-block; width: 16px; height: 16px; font-size: 0; background: url("../img/ico_pop.svg") center 2px/14px no-repeat; filter: invert(100%); margin-left: 4px; }
section.section.main .banner .item .wrap { position: absolute; top: 0; bottom: 0; left: 0; right: 0; display: flex; justify-content: center; align-items: center; background-color: var(--color-bk-tint30); backdrop-filter: blur(3px); transition: all 0.3s; }
section.section.main .banner .item:hover .wrap { background-color: transparent; backdrop-filter: none; }
section.section.main .banner .item:hover .tit { background-color: var(--color-bk-tint40); }

section.section.main .agent { background-color: var(--color-primary-tint07); padding: var(--inner-padding-min) 0; }
section.section.main .agent .inner { display: flex; flex-direction: row-reverse; justify-content: center; align-items: center; gap: 40px; }
section.section.main .agent .headline { display: inline-block; width: auto; }
section.section.main .agent .note ul.bar { border-color: var(--color-primary-tint10); padding-left: 16px; }
section.section.main .agent .btns { gap: 16px; }
section.section.main .agent .bt { flex-direction: column; width: 100px; height: 100px; border-radius: 50%; }
section.section.main .agent .bt.ico { padding: 0; }
section.section.main .agent .bt.ico::before { transform: translateY(-8px); }


section.section.main .notice { font-size: 0; padding: var(--inner-padding-min) 0; }
section.section.main .notice .list.card { overflow-x: auto; }
section.section.main .notice .list.card > :is(ol,ul) { flex-wrap: nowrap; }
section.section.main .notice .list.card > :is(ol,ul) > li { min-width: 160px; }
section.section.main .notice .list.card.hover > :is(ol,ul) > li:not(.nodata):hover { border-color: var(--color-primary); }
section.section.main .notice .item .less .tit { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; height: 36px; white-space: normal; }



/* 서브 */
section.section.sub > .headline { background: url("../img/bg_user_sub.jpg") center bottom no-repeat; padding: var(--inner-padding-min) 0; }
section.section.sub > .headline .inner { flex-direction: column; justify-content: center; align-items: center; gap: 8px; }

/* 서브 : 수리접수 */
section.section.sub.as .steps { margin-bottom: var(--inner-padding-min); }
section.section.sub.as .tabcon > .btns.br { margin-top: var(--inner-padding-min); }

/* 서브 : 구매접수 */
section.section.sub.buy .steps { margin-bottom: var(--inner-padding-min); }
section.section.sub.buy .tabcon > .btns.br { margin-top: var(--inner-padding-min); }

/* 서브 : 찾아오시는 길 */
section.section.sub.contact .list.card { margin-top: 16px; }
section.section.sub.contact .list.card > :is(ol,ul) > li { width: calc((100% - (16px * 3)) / 4); border: 0; background-color: var(--color-primary-tint05); box-shadow: none; }
section.section.sub.contact .list.card > :is(ol,ul) > li .badge { color: var(--color-wh) ; background-color: var(--color-secondary); }
section.section.sub.contact .list:not(.card) .item .txt > span { white-space: normal; }


/* 마이페이지 */
section.section.my > .headline { background: url("../img/bg_user_my.jpg") center 0 no-repeat; padding: var(--inner-padding-min) 0; }
section.section.my > .headline .inner { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 16px; }
section.section.my > .headline .badge { border: 1px solid var(--color-wh); background-color: var(--color-wh-tint30); backdrop-filter: blur(3px); box-shadow: var(--shadow-box-min); }
section.section.my > .headline .title { text-shadow: 0 1px 1px var(--color-wh), -1px 0 1px var(--color-wh), 0 0 4px var(--color-wh); }
section.section.my > .headline .tabs > ul { width: 100%; }
/*
section.section.my .block { display: flex; flex-wrap: wrap; align-items: stretch; gap: var(--inner-padding-min); }
section.section.my .block > .contbox { flex: none; width: calc((100% - var(--inner-padding-min)) / 2); height: 256px; border-radius: var(--radius-box-min); border: 1px solid var(--color-secondary-tint20); background-color: var(--color-wh); box-shadow: var(--shadow-box-min); }
section.section.my .block > .contbox .conhead { padding: 8px 16px; }
section.section.my .block > .contbox.bg { width: 100%; height: auto; border: 0; background-color: var(--color-primary-tint05); box-shadow: none; padding: 16px 24px; }
section.section.my .block > .contbox.bg > .item { gap: 0 24px; }
section.section.my .block > .contbox.bg > .item .bt.user { color: var(--color-bk-tint50); font-weight: 400; }
section.section.my .block > .contbox.bg > .item .bt.user b { color: var(--color-bk); font-weight: 600; }
section.section.my .block > .contbox.bg > .item .nav .menu { font-weight: 600; }
section.section.my .block > .contbox.bg > .item .nav .menu:hover { color: var(--color-primary); }
section.section.my .block > .contbox.bg ~ .contbox.bg { background-color: var(--color-gray-tint05); padding: 0; }
section.section.my .block > .contbox.bg ~ .contbox.bg .conbody { overflow-x: auto; }
section.section.my .block .list { margin: 0; }
section.section.my .block .list:not(.card) { height: 100%; }
section.section.my .block .list:not(.card) > :is(ol,ul) { flex-direction: column; height: 100%; }
section.section.my .block .list:not(.card) > :is(ol,ul) > li > .item { height: 40px; padding: 8px 16px; }
section.section.my .block .list:not(.card) > :is(ol,ul) > li.nodata { height: 100%; border: 0; }
section.section.my .block .list.card { padding: 0 16px 16px 16px; }
*/
section.section.my .set.mail { align-self: flex-start; }

section.section.my .tabs > ul { background-color: var(--color-secondary-tint10); }

section.section.my .list > ol > li.toggle > .slipbox .headline { margin-top: 8px; }
section.section.my .list > ol > li.toggle > .slipbox :is(.field,.grid,.note,.list) { margin: 0; }






/* desktop */
@media all and (max-width: 1600px) {
	
}
@media all and (max-width: 1440px) {
	
}


/* tablet */
@media all and (max-width: 1280px) {
	
	
	.mHide { display: none !important; }
	
	.container { min-height: 100%; }
	.container::-webkit-scrollbar { width: 0; height: 0; }
	.inner { padding: 0 var(--inner-padding-max); }
	
	
	
	
	
	.logo span::before { width: 80px; }
	.logo span::after { margin-bottom: 6px; }
	
	.set.address .input:nth-of-type(2) { flex: auto; width: auto; }
	
	
	.list.card > :is(ol,ul) > li { width: calc((100% - (16px * 3)) / 4); }
	
	
	
	
	
	
	
	
	
	nav.gnb { flex-direction: column; background-color: var(--color-wh); padding: 16px; }
	nav.gnb .menu { height: 40px; font-size: 0.875rem; border: 0; padding: 0; }
	nav.gnb .dropbox { position: static; display: block; width: 100%; border: 0; border-radius: 0 0 var(--radius-box-min) var(--radius-box-min); background-color: var(--color-gray-tint05); transform: none; box-shadow: none; margin: 0; }
	nav.gnb .dropbox .menu { height: 32px; }
	nav.gnb > ul { flex: auto; flex-direction: column; gap: 0; align-items: flex-start; width: 100%; height: auto; border-top: 1px dashed var(--color-gray-tint10); padding-top: 16px; margin-top: 8px; }
	nav.gnb > ul > li { display: block; width: 100%; height: auto; }
	nav.gnb > ul > li.my { display: block; border-top: 1px dashed var(--color-gray-tint10); padding: 0; padding-top: 16px; margin-top: 16px; }
	nav.gnb > ul > li.my > .menu { border-radius: var(--radius-box-min) var(--radius-box-min) 0 0; background-color: var(--color-gray-tint50); }
	nav.gnb > ul > li.my .dropbox::before,
	nav.gnb > ul > li.my .dropbox::after { display: none; }
	
	
	nav.lnb { top: 48px; }
	nav.lnb .inner { padding: 0; }
	
	header.header { height: 56px; }
	header.header .gnb { position: fixed; top: 0; bottom: 0; left: -240px; z-index: 400; width: 240px; height: 100%; box-shadow: var(--shadow-box-max); }
	header.header .bt.user { display: inline-flex; }
	header.header .bt.home { display: inline-flex; }
	header.header .bt.menu { order: 1; display: inline-flex; margin-left: auto; }
	header.header .bt.menu.on::before { background-image: url("../img/ico_x.svg"); }
	header.header .btns { width: 100%; }
	header.header .btns .bt:not(.ico) { flex: 1; }
	header.header .btns .bt.out { width: 100%; border: 1px solid var(--color-gray-tint20); }
	header.header .btns .toggle { display: none; }
	header.header .btns.fb { display: flex; }
	header.header .nav { display: block; width: 100%; }
	header.header .nav ul { flex-wrap: nowrap; width: 100%; }
	header.header .nav li { flex: 1; }
	header.header.fix { height: 48px; }
	
	
	
	
	section.section > .inner { padding: var(--inner-padding-max); }
	section.section > .inner > .tabs { width: calc(100% + (var(--inner-padding-max) * 2)); transform: translateX(calc(var(--inner-padding-max) * -1)); padding: 0 var(--inner-padding-max); }
	
	section.section.etc > .inner > .tabs { transform: none; }
	
	
	section.section.main .visual { background-size: auto 100%; }
	
	section.section.main .banner .item .wrap { background-color: var(--color-bk-tint10); backdrop-filter: blur(1px); }
	section.section.main .banner .item .tit { background-color: var(--color-bk-tint40); }
	
	section.section.main .notice .list.card { width: calc(100% + (var(--inner-padding-max) * 2)); transform: translateX(calc(var(--inner-padding-max) * -1)); padding: 0 var(--inner-padding-max); }
	section.section.main .notice .list.card > :is(ol,ul) { display: block; font-size: 0; white-space: nowrap; }
	section.section.main .notice .list.card > :is(ol,ul) > li { display: inline-flex; width: 240px; margin-right: 8px; }
	section.section.main .notice .list.card > :is(ol,ul) > li:last-of-type { margin-right: var(--inner-padding-max); }
	
	
	
	
	section.section.my > .headline { background-position: center 50%; }
	section.section.my > .headline .inner { gap: 8px; }
	section.section.my > .headline .badge { height: 28px; line-height: 28px; }
	section.section.my .list:not(.hover) > ul > li .item:not(.row) .less.fix { order: 1; }
	section.section.my .list:not(.hover) > ul > li .item:not(.row) .less.fix .tit { width: auto !important; }
	section.section.my .list:not(.hover) > ul > li .item:not(.row) .bt.ico { order: 3; }
	section.section.my .list:not(.hover) > ul > li .item:not(.row) .txt.fe { order: 2; }
	section.section.my .list:not(.hover) > ul > li .item:not(.row) .txt:not(.fe) { order: 4; width: 100%; }
	
	section.section.my .list.stay .list > ol > li .item .txt.fix b { width: auto !important; }
	section.section.my .list.stay .list > ol > li .item .set { order: 5; }
	
	
}
@media all and (max-width: 1080px) {
	
	
	section.section.my .list.stay .list > ol > li .item { gap: 0; }
	section.section.my .list.stay .list > ol > li .item .less { width: 100%; min-height: 32px; }
	section.section.my .list.stay .list > ol > li .item .state { margin-left: auto; }
	section.section.my .list.stay .list > ol > li .item .set { margin-left: auto; margin-top: 8px; }
	
	
}
@media all and (max-width: 960px) {
	
	
	.logo span::before { width: 60px; }
	.logo span::after { margin-bottom: 10px; }
	
	.set.charge { flex-wrap: wrap; width: 100%; }

	

	
	.headline .item { padding: 16px 48px 16px 8px; }
	.headline .item > .bt.back { right: 6px; }
	
	
	
	.field > dl > dd.hf { width: calc(100% - 160px - 8px); }
	.field.box > dl > dd.hf:first-of-type + dt,
	.field.box > dl > dd.hf:first-of-type + dt + dd.hf { border-top: 1px solid var(--color-secondary-tint10); }
	
	.list.card > :is(ol,ul) > li { width: calc((100% - (16px * 2)) / 3); }
	
	
	.map { height: 240px; margin-top: 0; }
	
	
	
	
	
	h2.title { font-size: 1rem; }
	h3.title { font-size: 0.875rem; }
	h4.title { font-size: 0.875rem; }
	h5.title { font-size: 0.75rem; }
	
	
	
	nav.lnb .menu { padding: 3px 24px 0 24px; }
	
	
	
	
	section.section.sub > .headline { background: url("../img/bg_user_sub_m.jpg") right top no-repeat; padding: var(--inner-padding-max) 0; }
	section.section.sub > .headline .inner { align-items: flex-start; }
	section.section.sub > .headline .title { height: auto; }
	
	
	section.section.sub.contact .list.card > :is(ol,ul) > li { width: calc((100% - (16px * 1)) / 2); }
	section.section.sub.contact .item.row { flex-wrap: wrap; }
	section.section.sub.contact .item.row .txt { width: 100%; }
	
	
	section.section.sub.buy .list > ol > li > .item { gap: 0 8px; }
	section.section.sub.buy .list > ol > li > .item .txt { min-height: 32px; }
	section.section.sub.buy .list > ol > li > .item .txt > span { white-space: normal; }
	section.section.sub.buy .list > ol > li > .item .txt.fe { position: absolute; left: 0; bottom: 0; }
	section.section.sub.buy .list > ol > li > .item .btns { flex-direction: row-reverse; justify-content: flex-start; width: 100%; }
	
	
	section.section.main .quick a:is(.icon1,.icon2,.icon3,.icon4,.icon5,.icon6,.icon7)::before { background-size: 48px; }
	section.section.main .agent .inner { flex-direction: column; gap: 16px; }
	section.section.main .notice .list.card > :is(ol,ul) > li { width: 200px; }
	
	
	section.section.my > .headline { padding: var(--inner-padding-max) 0; }
	section.section.my > .headline .inner { gap: 0; }
	section.section.my > .headline .badge { height: 24px; line-height: 24px; }
	section.section.my .list.hover > ul > li .item:not(.row) .txt:last-child { justify-content: flex-start !important; width: 100% !important; }
	section.section.my .list.hover > ul > li .item:not(.row) .txt > span:nth-last-of-type(2)::after { display: none; }
	section.section.my .list.hover > ul > li .item:not(.row) .txt > span.state { margin-left: auto; }
	
	section.section.my .list > ol > li.toggle > .item { padding-right: 40px; margin: 4px 0; }
	section.section.my .list > ol > li.toggle > .item .tit.fix { padding-right: 0; }
	section.section.my .list > ol > li.toggle > .item .txt { width: 100% !important; }
	section.section.my .list > ol > li.toggle > .item .state { position: absolute; right: 0; top: 50%; transform: translateY(-50%); }
	
	section.section.my .list.stay .list > ol > li .item .less { padding-right: 0; }
	section.section.my .list.stay .list > ol > li .item .btns.fix { width: 100% !important; justify-content: flex-start; }
	
	section.section.my .list.stay > ul > li.toggle > .slipbox > .item.bg .bt { order: 2; margin-left: auto; }
	section.section.my .list.stay > ul > li.toggle > .slipbox > .item.bg .txt { order: 1; width: 100%; justify-content: flex-start !important; }
	section.section.my .list.stay > ul > li.toggle > .slipbox > .item.bg .txt > span:last-of-type { margin-left: auto; }
	section.section.my .list.stay > ul > li.toggle > .slipbox > .item.bg .txt > span:nth-last-of-type(2)::after { display: none; }
	
	section.section.my .list.bd.gap.bg > ol > li > .item .txt.fix { width: 100% !important; }
	
	section.section.my .tabcon ~ .btns.br { margin-top: var(--inner-padding-max); padding-top: var(--inner-padding-max); }
	
}
@media all and (max-width: 840px) {
	
	section.section.main .quick li { padding: 0 8px; }
	section.section.main .quick li:first-of-type { padding-left: 0; }
	section.section.main .quick li:last-of-type { padding-right: 0; margin-right: var(--inner-padding-max); }
	
}
@media all and (max-width: 720px) {
	
	:root { --process-gap: 56px; }
	
}


/* mobile */
@media all and (max-width: 640px) {	
	
	:root { --process-gap: 48px; }
	
	.xxs { width: auto !important; }
	.xs { width: auto !important; }
	.sm { width: auto !important; }
	.md { width: auto !important; }
	.lg { width: auto !important; }
	.xl { width: auto !important; }
	.xxl { width: auto !important; }
	
	

	.set.product .input ~ .input { flex: auto; width: auto; }
	.set.product .bt { margin-left: 0; }
	
	
	.badge { font-size: 0.75rem; }
	.badge.min { font-size: 0.6875rem; }
	
	
	
	.item.row { flex-wrap: wrap; }
	
	
	
	
	.tabs .tab { padding:  0 16px; }
	
	
	
	.field > dl > dt { width: 100%; min-height: 0; }
	.field > dl > dt > br { display: none; }
	.field > dl > dt.rq::after { top: 6px; left: 6px; }
	.field > dl > dd { width: 100%; }
	
	.field.bd > dl > dd { border: 0; }
	.field.bd.bg > dl > dt { padding: 8px 16px; }
	
	.list > :is(ol,ul) > li > .item { padding: 16px 8px; }
	.list.bd.gap.bg > :is(ol,ul) > li > .item { padding: 0; }
	
	.list.card .item { padding: 8px; }
	
	.list.stay > ul > li.toggle > .slipbox { padding: 0 0 16px 8px; }
	
	
	
	
	
	
	
	nav.lnb .menu { padding: 3px 16px 0 16px; }
	
	
	
	section.section.main .visual .inner { max-width: 360px; }
	
	section.section.main .quick a:is(.icon1,.icon2,.icon3,.icon4,.icon5,.icon6,.icon7)::before { background-size: 40px; }
	
	section.section.main .agent .bt { width: 80px; height: 80px; }
	section.section.main .agent .bt.ico::before { transform: translateY(-4px); }
	
	section.section.main .notice .list.card > :is(ol,ul) > li { width: 160px; }
	section.section.main .notice .item .less .tit { height: 32px; line-height: 1.4; }
	
	
	
	section.section.my > .headline .inner { gap: 0; } 
	section.section.my .list.stay .list > :is(ol,ul) > li > .item { padding: 0; }
	
	
	section.section.sub.buy .list > ol > li > .item .tit.fix { margin-right: auto; }
	section.section.sub.buy .list > ol > li > .item .txt:not(.fe) { width: 100%; }
	
	
	section.section.sub.contact .item.row .txt { gap: 0; }
	section.section.sub.contact .item.row .txt > span:last-of-type { width: 100%; }
	section.section.sub.contact .item.row .txt > span:nth-last-of-type(2)::after { display: none; }
	
	
}
@media all and (max-width: 560px) {
	
	:root { --process-gap: 32px; }
	
	
	.item { gap: 4px; }

	
	.list > :is(ol,ul) > li > .item { padding: 8px; }
	
	.list.card > :is(ol,ul) > li { width: calc((100% - (16px * 1)) / 2); }
	

	.process .item { gap: 4px 8px; padding: 8px; }
	.process ol > li::after { height: 16px; }
	.process ol > li:nth-of-type(3)::before,
	.process ol > li:nth-of-type(6)::before,
	.process ol > li:nth-of-type(7)::before { background-size: 16px; }
	
	
	
	
	.search .field,
	.search .field > ul,
	.search .field > ul > li { width: 100%; }
	.search .field > ul > li { flex-wrap: wrap; }
	.search .field > ul > li .input { flex: auto; }
	.search .field > ul > li .input.date { flex: 1; width: 100%; }
	
	
	
	
	
	section.section > .inner > .headline { margin-top: 32px; }
	section.section > .inner > .btns.br .bt.max,
	section.section .tabcon > .btns.br .bt.max { flex: 1; }
	
	
	
	section.section.main .banner .inner { flex-direction: column; }
	section.section.main .banner .item .pic { height: 80px; object-fit: cover; object-position: center; }
	
	
	
	
	
	
	
	
	section.section.sub:is(.as,.buy) .steps { margin-bottom: var(--inner-padding-max); }
	section.section.sub:is(.as,.buy) .tabcon > .btns.br { position: sticky; left: 0; right: 0; bottom: 0; z-index: 200; background-color: var(--color-wh); padding-bottom: 8px; }
	
	
	section.section.sub.contact .headline .count { margin-left: auto; }
	section.section.sub.contact .headline .set.find { width: 100%; }
	section.section.sub.contact .list:not(.card) .item .tit.fix { margin: 0; }
	section.section.sub.contact .list:not(.card) .item .txt { gap: 0; width: 100%; }
	section.section.sub.contact .list:not(.card) .item .txt span:last-child { width: 100%; }
	
	section.section.my .tabs { position: sticky; top: 96px; left: 0; right: 0; z-index: 200; background-color: var(--color-wh); padding-top: 8px; }
	section.section.my .tabs > ul { width: 100%; }
	section.section.my .tabs > ul > li { flex: 1; }
	
	
	
}
@media all and (max-width: 480px) {
	
	:root { --process-gap: 24px; }
	
	.set.product { flex-wrap: wrap; }
	.set.product .input { order: 1; }
	.set.product .input ~ .input { order: 3; width: 100%; }
	.set.product .bt { order: 2; margin-left: auto; }
	
	
	
	.tabs .tab { padding:  0 8px; }
	
	.item { gap: 4px 8px; }
	.item.row { gap: 4px 8px; }
	
	.item.q::before { margin-right: 0; }
	
	
	
	.list > ol > li { gap: 4px; padding: 8px; }
	.list > ol > li > .item { max-width: calc(100% - 28px); }
	.list > ol > li.toggle > .slipbox { width: calc(100% - 28px); margin-left: 28px; }
	
	.list.card > :is(ol,ul) { gap: 8px; }
	.list.card > :is(ol,ul) > li { width: calc((100% - (8px * 1)) / 2); }
	
	.list.stay > ul > li::after { top: 16px; }
	.list.stay > ul > li.toggle > .slipbox { padding: 0 0 16px 0; }
	
	
	.headline .item { padding: 8px 40px 8px 0; }
	.headline .item > .bt.back { right: 0; }
	
	
	
	
	
	footer.footer { padding-top: 16px; }
	footer.footer .inner { gap: 16px; }
	footer.footer .nav ul { gap: 0 8px; }
	footer.footer .nav li { gap: 8px; }
	
	
	
	section.section.join .steps .step { flex-direction: column; height: auto; }
	
	
	
	section.section.sub.contact .list.card > :is(ol,ul) > li { width: 100%; }
	
	
	
	section.section.main .visual .set.find .input { height: 40px; padding-right: 40px; }
	section.section.main .visual .set.find .bt.ico { top: 4px; right: 4px; }
	
	section.section.main .agent { padding: var(--inner-padding-max) 0; }
	section.section.main .agent .inner { gap: 0; }
	section.section.main .agent .btns { gap: 8px; }
	section.section.main .agent .bt.ico::before { background-size: 24px !important; }
	
	section.section.main .quick { padding: var(--inner-padding-max) 0; }
	section.section.main .quick a::before { width: 64px; height: 64px; }
	section.section.main .quick a > br { display: block; }
	section.section.main .quick li { padding: 0 4px; }
	section.section.main .quick li:first-of-type { padding-left: 0; }
	section.section.main .quick li:last-of-type { padding-right: 0; margin-right: var(--inner-padding-max); }
	section.section.main .quick li:last-of-type:nth-of-type(4) { margin-right: 0; }
	
	section.section.main .banner { padding: var(--inner-padding-max) 0; }
	
	section.section.main .notice { padding: var(--inner-padding-max) 0; }
	
	
	section.section.my .list.stay > ul > li.toggle > .item { padding: 0 8px; }
	section.section.my .list.stay > ul > li.toggle > .item .txt.fe { width: 100%; justify-content: flex-start !important; }
	
}


/* ex) Garaxy fold cover */
@media all and (max-width: 360px) {
	
}


@media (pointer:coarse) {
    
	::-webkit-scrollbar { width: 0; height: 0; }
	
}