@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');

:root {
	--font10: clamp(0.6rem, 2vw, 0.625rem);
	--font11: clamp(0.6875rem, 2vw, 0.6875rem);
	--font12: clamp(0.75rem, 2vw, 0.813rem); /* 12-> 13*/
	--font13: clamp(0.8rem, 2vw, 0.875rem); /* 13-> 14*/
	--font14: clamp(0.8rem, 2vw, 0.875rem);
	--font15: clamp(0.813rem, 2vw, 0.938rem); /* basic */
	--font16: clamp(0.875rem, 2vw, 1rem);
	--font18: clamp(1rem, 2vw, 1.125rem);
	--font20: clamp(1.125rem, 2vw, 1.25rem); /* icon */
	--font22: clamp(1.25rem, 2vw, 1.375rem);
	--font24: clamp(1.375rem, 2vw, 1.5rem);
	--font28: clamp(1.563rem, 2vw, 1.75rem);
	--font30: clamp(1.688rem, 2vw, 1.875rem);
	--font32: clamp(1.813rem, 2vw, 2rem);
	--font40: clamp(2.313rem, 2vw, 2.5rem);
	--font50: clamp(2.5rem, 2vw, 3.125rem);

	--font400: 400;
	--font500: 500;
	--font600: 600;
	--font800: 800;

	--basic-bg: #ffff;
	--black: #000;
	/*--gray01: #0d0d0d;*/
	--gray02: #1a1a1a; /* basic */
	--gray03: #333;
	--gray04: #55565b;
	--gray05: #75767b;
	--gray06: #828388;
	--gray07: #919297;
	--gray08: #adaeb3;
	--gray09: #c1c2c7;
	--gray10: #dedfe4;
	--gray11: #ebebeb;
	--gray12: #f2f2f2;
	--gray13: #f5f5f5;
	--white: #ffff;
	--red: #e94949;
	--primary : #BE3455;
	--primary_op6 : #FBF3F6;
	--primary_op8 : rgba(190,52,85,0.8);
	--mark : #EC3B67;
	--success : #3dbf4e;
	--subprimary : #3d54dc;

	--radius10 : 10px;
	--radius16 : clamp(12px, 2vw, 16px);
	--radius20 : clamp(15px, 2vw, 20px);
	--radius30 : clamp(20px, 2vw, 30px);
}


/************ COMMON ************/
body { min-width: 320px; font-family: 'Pretendard','Malgun Gothic','맑은 고딕',Dotum,'돋움',sans-serif; font-size: var(--font14); line-height: 1.35; color: var(--gray02); background-color: var(--basic-bg); display: flex; flex-direction: column; justify-content: space-between; height: 100vh; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; border: 0; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); word-break: initial; word-wrap: initial; }
.sr-only-inline { position: relative; display: inline-block; width: 1px; height: 1px; padding: 0; margin: -1px; border: 0; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);word-break: initial; word-wrap: initial; z-index: -1; }
.hide { display: none !important; }
.unable { pointer-events: none; }
.cursor { cursor: pointer; }
.flex-side { display: flex; justify-content: space-between; align-items: center; }
.flex-initial { flex: initial !important; }
.view-mb { display: none; }

.mg-t5 { margin-top: 5px !important; }
.mg-t10 { margin-top: 10px !important; }
.mg-t25 { margin-top: 25px !important; }
.mg-t30 { margin-top: 30px !important; }
.mg-b5 { margin-bottom: 5px !important; }
.mg-b10 { margin-bottom: 10px !important; }
.mg-b16 { margin-bottom: 16px !important; }
.mg-b20 { margin-bottom: 20px !important; }
.mg-b30 { margin-bottom: 30px !important; }
.w100p {width:100% !important; max-width:100% !important;}

.border-t0 { border-top: none !important; }
.border-b0 { border-bottom: none !important; }

@media all and ( max-width : 960px ) {
	.view-mb { display: block; }
}

@media all and ( max-width : 640px ) {
	.sr-only-mb { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; border: 0; overflow: hidden; clip: rect(0,0,0,0); }
	.hide-mb { display: none !important; }

}

/* link */
a,
a:link,
a:visited { color: inherit; }
a:hover {}
a:active {}
a:focus {}


/* font */

.font14 { font-size: var(--font14); }

.font-primary { color: var(--primary); }

.txt-c { text-align: center !important; }
.txt-l { text-align: left !important; }
.txt-r { text-align: right !important; }
.txt-b { font-weight: var(--font600); } /* 600 */
.txt-h { font-weight: var(--font800); } /* 800 */
.txt-ellipsis { display: inline-block; max-width: 100%; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; vertical-align: middle; }
.txt-ellipsis-line {overflow: hidden; text-overflow: ellipsis;display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}

/* button */
button img { vertical-align: baseline; }
.btn-disable { pointer-events: none; user-select : none; }
.btn-black-color, a.btn-black-color { color: var(--white); background-color: var(--black);  }
.btn-black-color:hover { box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.16); }
.btn-black-color.btn-disable { opacity: 0.2; }
.btn-black-line, a.btn-black-line { color: var(--black) !important;; background-color: var(--white); border: 1px solid var(--black) !important; }
/*.btn-black-line:hover { box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.16); }*/
.btn-black-line.btn-disable { opacity: 0.2; }
.btn-gray9-color, a.btn-gray9-color { color: var(--white); background-color: var(--gray09); }
.btn-gray9-color:hover { }
.btn-gray9-color.on { background-color: var(--gray02); }
.btn-gray9-color.btn-disable { opacity: 0.5; }
.btn-gray7-color, a.btn-gray9-color { color: var(--white); background-color: var(--gray07); }
.btn-gray7-color:hover { }
.btn-gray7-color.on { background-color: var(--gray07); }
.btn-gray7-color.btn-disable { opacity: 0.5; }
.btn-gray9-line { color: var(--gray05); background-color: var(--white); border: 1px solid var(--gray09); }
.btn-gray9-line:hover { }
.btn-gray9-line.on { color: var(--gray02); border-color: var(--gray02); }
.btn-gray9-line.btn-disable { opacity: 0.5; }
.btn-gray4-color, a.btn-gray4-color { color: var(--white); background-color: var(--gray04); }
.btn-gray4-color:hover { }
.btn-gray4-color.on { background-color: var(--gray04); }
.btn-gray4-color.btn-disable { opacity: 0.5; }
.btn-gray12-color { color: var(--black); background-color: var(--gray12); }
.btn-gray12-color:hover { background-color: var(--gray11); }
.btn-gray12-color.btn-disable { opacity: 0.7; }
.btn-dimgray-color { background-color: #a8a8a8; color: var(--white); }
.btn-white-color { color: var(--black); background-color: var(--white);  }
.btn-white-color:hover { background-color: var(--gray13); }
.btn-white-color.btn-disable { opacity: 0.2; }
.btn-white-line, a.btn-white-line { color: var(--white); background-color: transparent; border: 1px solid var(--white); }
.btn-white-line:hover { box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.16); }
.btn-white-line.btn-disable { opacity: 0.2; }
.btn-primary-color, a.btn-primary-color { color: var(--white); background-color: var(--primary);  }
.btn-primary-color:hover { background-color: var(--primary); }
.btn-primary-color.btn-disable { opacity: 0.2; }
.btn-subprimary-color, a.btn-subprimary-color { color: var(--white); background-color: var(--subprimary);  }
.btn-subprimary-color:hover { background-color: var(--subprimary); }
.btn-subprimary-color.btn-disable { opacity: 0.2; }
.btn-follow {display:flex; align-items: center; gap:4px; padding:0 12px; height: 30px; line-height: 30px; font-size: var(--font13); text-align: center; vertical-align: top; margin-left: 2px; border-radius: var(--radius20); }
.btn-follow i img {vertical-align: middle}
.btn-heart i { width: 20px; height: 20px; background: url('/assets/img/common/icon-heart-empty.svg') no-repeat center left; }
.btn-heart.active i { background: url('/assets/img/common/icon-heart-full.svg') no-repeat center center;  }
.btn-icon { height: 48px; line-height: 48px; width:48px; font-size: var(--font16); text-align: center; border-radius: var(--radius16); }
.btn-small { height: 38px; line-height: 38px; font-size: var(--font14); text-align: center; padding: 0 15px; border-radius: var(--radius16); }
.btn-medium { height: 40px; line-height: 40px; font-size: var(--font14); text-align: center; padding: 0 20px; border-radius: var(--radius16); }
.btn-big { height: 48px; line-height: 48px; font-size: var(--font16); text-align: center; padding: 0 20px; border-radius: var(--radius16); }
.btn-big56 { height: 56px; line-height: 56px; font-size: var(--font16); text-align: center; padding: 0 20px; border-radius: var(--radius20); }

.btn-medium i.btn_icon {margin-left:20px;}
.btn-medium i img {vertical-align: middle}

.btn-box,
.btn-wrap,
.btn-flex { display: flex; justify-content: center; align-items: center; gap:10px; }
.btn-box,
.btn-wrap { margin-top: 30px; }
.btn-box .btn { width: 100%; }
.btn-wrap .btn { flex: 1 1 0; max-width: 255px; }


@media screen and (max-width: 768px) {
	/*.btn-big { height: 53px; line-height: 53px; padding: 0 15px; border-radius: var(--radius20); }*/
	.btn-big { font-size: var(--font14); }
}

@media screen and (max-width: 640px) {
	.btn-box .btn { width: 100%; }
	.btn-box,
	.btn-wrap { margin-top: 20px; }
	/*.btn-wrap .btn { max-width: 100%; }*/
	/*.btn-follow { width: 70px; height: 28px; }*/
	.btn-small { height: 32px; line-height: 32px; padding: 0 7px; }
	.btn-medium,
	.btn-big { padding: 0 8px; }

}

@media screen and (max-width: 320px) {
	.btn-wrap { flex-direction: column; }
	.btn-wrap .btn { width: 100%; }
}


/* checkbox button */
.checkbox-btn { display: flex; flex-wrap: wrap; }
.checkbox-btn label { font-size: var(--font14); letter-spacing: -0.2px; padding: 14px; margin: 2px; border-radius: var(--radius20); background-color: var(--gray12); cursor: pointer; user-select: none; }
.checkbox-btn label:hover { background-color: var(--gray11); }
.checkbox-btn input[type=checkbox]:checked + label { color: var(--white); background-color: var(--gray02); }



.input-basic { width: 100%; }
.input-basic input,
.input-basic input:-webkit-autofill { width: 100%; height: 40px; line-height: 40px; font-size: var(--font14); padding:0 11px; border: 1px solid var(--gray10); border-radius: var(--radius16); background-color: var(--gray13); /*box-shadow: 0 0 0 1000px var(--gray13) inset; -webkit-box-shadow: 0 0 0 1000px var(--gray13) inset;*/ -webkit-text-fill-color: inherit; }
.input-basic input:hover,
.input-basic input:-webkit-autofill:hover { border-color: var(--gray10); }
.input-basic input:focus,
.input-basic input:-webkit-autofill:focus { border-color: var(--gray02); -webkit-text-fill-color: inherit; }
.input-basic input::placeholder { font-size: var(--font14); color: var(--gray08); }
.input-disable input {border:1px solid #ebebeb !important; background:#ebebeb !important;}
.input-basic input:disabled,
.input-basic input.disable {background:var(--gray11) !important; border:1px solid #dedede !important; box-shadow: none; pointer-events: none; user-select : none; }
.input-basic input.disable + span{color: var(--gray08); opacity: 0.5}
.input-basic input.err { border-color: var(--red); /*background-color: var(--white);*/ }
.input-basic input.h40 {height: 40px!important; line-height: 40px!important; }
.input-basic input.bg-white { border-color: var(--white); background-color: var(--white); box-shadow: 0 0 0 1000px var(--white) inset; -webkit-box-shadow: 0 0 0 1000px var(--white) inset;  }
.input-basic input.bg-white:hover,
.input-basic input.bg-white:-webkit-autofill:hover { border-color: var(--gray09); }
.input-disable,
.input-basic input.bg-white:disabled,
.input-basic input.bg-white.disable { color: var(--gray06); pointer-events: none; user-select : none; }
.input-validation { position: relative; margin: 3px 0 8px; }
.input-validation span { position: relative; font-size: var(--font13); color: var(--gray07); padding-left: 18px; }
.input-validation span::before { position: absolute; top: -1px; left: 0; display: inline-block; color: var(--gray07); font-size: var(--font16); }
.input-validation.invalid span { display: inline-block; color: var(--red); }
.input-validation.invalid span::before { content:"\e9ab"; font-family: 'xeicon'; color: var(--red); } /* ! */
.input-validation.valid span { display: inline-block; color: var(--gray07); margin-right: 5px; }
.input-validation.valid span::before { content:"\e928"; font-family: 'xeicon'; color: var(--gray07); } /* v */
.input-validation.valid span.pass { color: var(--success); }
.input-validation.valid span.pass::before { color: var(--success); }
.input-basic.pw-box { position:relative; }
.input-basic.pw-box input { padding-right: 50px; }
.input-basic.pw-box button { position: absolute; right: 20px; top: 16px; }
.input-basic.pw-box button i { font-size: var(--font20); color: var(--gray08); }
.input-basic.pw-box .hide { display: none; }
.input-basic.pw-box.pw-hide .hide { display: block !important; }
.input-basic.pw-box.pw-hide .show { display: none !important; }
.input-basic + .input-basic { margin-top: 5px; }
.input-basic.input-flex { display: flex; justify-content: center; align-items: center; gap: 5px; }
.input-basic.input-flex input { flex: 1 1 0; }
.input-basic.input-flex button { }
.input-basic.input-flex .bootstrap-select { max-width: 150px; }
.input-basic:has(textarea) { border-radius: var(--radius20); overflow: hidden; }
.input-basic.input-flex-three { display: flex; justify-content: center; align-items: center; gap: 5px; }
.input-basic.input-flex-three input { flex: 1 1 0; }
.input-basic.input-mint-count { display: flex; justify-content: center; align-items: center; gap: 5px; }
.input-basic.input-mint-count input { flex: 1 1 0; }


@media all and (max-width : 640px)  {
	.input-basic input, .input-basic input:-webkit-autofill { padding: 10px 12px; }
	.input-basic.input-mint-count { flex-direction: column; }
}


textarea { width:calc(100% - 2px); min-height: 102px; font-size: var(--font14); line-height: 1.71; padding: 15px; margin: 1px; border: 1px solid var(--gray10); border-radius: var(--radius16); background-color: var(--gray13); }
textarea:hover { border-color: var(--gray10); }
textarea:active { }
textarea:focus { }
textarea:disabled,
textarea.disable { background:var(--gray11) !important; border:1px solid #dedede !important; box-shadow: none; pointer-events: none; user-select : none; }
textarea.err { border-color: var(--red); }
textarea::placeholder { font-size: var(--font14); color: var(--gray08); }


@media all and (max-width : 768px)  {
	textarea { padding: 11px; }
}

@media all and (max-width : 480px)  {
	.commu_box .input-basic.input-flex { flex-direction: column; }
	.commu_box .input-basic.input-flex .bootstrap-select { max-width: 100%; }

}




/* search */
.search-wrap {}
.search-wrap .search-flex { position:relative; display: flex; justify-content: center; align-items: center; }
.search-wrap:has(.btn-search) .search-flex input[type="search"] { padding: 10px 13px 10px 40px; }
.search-wrap .search-flex input[type="search"]::-webkit-search-cancel-button { height: 20px; width: 20px; background: url("/assets/img/common/icon_search_delete.svg") no-repeat center center; background-size: 20px; }
.search-wrap .search-flex button { position: absolute; left: 10px; width: 20px; height: 20px;  background: url("/assets/img/common/icon_search.svg") no-repeat center center; }
.search-wrap .search-flex.search-high input { padding: 14px 13px 14px 40px; }


/* selectpicker BS */
.input-flex-three .select-wrap {width:100%; }
.bootstrap-select { width: 100%; }
.bootstrap-select .dropdown-toggle { position: relative; width: 100%; text-align: left; padding: 11px 35px 11px 15px; border: 1px solid var(--gray10); border-radius: var(--radius16); /* white-space: nowrap;*/ background-color:#f5f5f5; z-index: 1; }
.bootstrap-select .dropdown-toggle .caret {}
.bootstrap-select .dropdown-toggle .caret::after { position: absolute; top: 10px; right: 10px; display: block; content: "\e942"; font-size: var(--font20); color: var(--black); vertical-align: middle; font-family: 'xeicon'; }
.bootstrap-select.open .dropdown-toggle .caret::after{transform: rotate(180deg)}
.bootstrap-select .dropdown-toggle.bs-placeholder,
.bootstrap-select .dropdown-toggle.bs-placeholder:hover,
.bootstrap-select .dropdown-toggle.bs-placeholder:focus,
.bootstrap-select .dropdown-toggle.bs-placeholder:active { font-size: var(--font16); }
.bootstrap-select .dropdown-toggle .filter-option { position: static; top: 0; left: 0; width: 100%; height: 100%;	}
.bootstrap-select .dropdown-toggle .filter-option-inner-inner { width: calc(100% - 20px); font-size: var(--font14); white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.bootstrap-select .dropdown-toggle .filter-option-inner-inner .text-muted { font-size: var(--font12); color: var(--gray05); }
.bootstrap-select.bg-white .dropdown-toggle { background-color: var(--white); }
/*.bootstrap-select .dropdown-toggle .filter-option-inner-inner .text-muted::before { content:""; display: inline-block; width: 1px; height: 10px; margin: 0 10px; background-color: var(--gray09); }*/
.bootstrap-select select { position: absolute; bottom: 0; left: 50%; display: block !important; width: 1px !important; height: 100% !important; opacity: 0 !important; border: none; }

.bootstrap-select .dropdown-menu { position:absolute; top:100%; left:0; right: 0; display:none; background:var(--white); width:calc(100% - 2px); max-height: 230px !important; margin:0 1px; border-radius:16px; overflow: auto; box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1); z-index:50; }
.bootstrap-select > .dropdown-menu {border:1px solid var(--gray02);}
.bootstrap-select .dropdown-menu > li { position: relative; }
.bootstrap-select .dropdown-menu > li > a {display: block; padding:7px 0; border-radius: var(--radius20); font-size: var(--font13); user-select: none; cursor: pointer;}
.bootstrap-select .dropdown-menu > li > a:focus,
.bootstrap-select .dropdown-menu > li > a.selected,
.bootstrap-select .dropdown-menu > li > a:hover {color:var(--primary); font-weight: bold}
.bootstrap-select .dropdown-menu > .disabled > a,
.bootstrap-select .dropdown-menu > .disabled > a:focus,
.bootstrap-select .dropdown-menu > .disabled > a:hover { opacity: 0.5; pointer-events: none; user-select : none; }
.bootstrap-select .dropdown-menu li a span.check-mark { display: none; }
.bootstrap-select .dropdown-menu li a span.check-mark:after { content: "\e928"; display: block; width: 16px; height: 16px; font-weight: var(--font600); font-family: 'xeicon'; }
.bootstrap-select .dropdown-menu li small { position: relative; padding-left: 3px; font-size: var(--font12); color: var(--gray05); }
/*.bootstrap-select .dropdown-menu li small::before { content:""; display: inline-block; width: 1px; height: 10px; margin: 0 10px; background-color: var(--gray09); }*/
.bootstrap-select .dropdown-menu li.selected span.text { font-weight: var(--font600); }
.bootstrap-select .dropdown-menu.inner { position: static; padding: 16px; }

.bootstrap-select.disable,
.bootstrap-select > .disabled {	pointer-events: none; user-select : none; }
.bootstrap-select.disable > button { color: var(--gray08); opacity: 0.5; }
/*.bootstrap-select.show-tick .dropdown-menu .selected span.check-mark { position: absolute; display: inline-block; top: calc((100% - 20px)/2); right: 8px; }*/

.bootstrap-select:not(.show-tick) .dropdown-toggle .filter-option-inner-inner { width: 100%; }
/*.bootstrap-select:not(.show-tick) .dropdown-menu > li > a { padding: 14px; }*/

.invalid .bootstrap-select .dropdown-toggle,
.error .bootstrap-select .dropdown-toggle,
.bootstrap-select.is-invalid .dropdown-toggle,
.was-validated .bootstrap-select .selectpicker:invalid + .dropdown-toggle {	border-color:var(--red); }
.open > .dropdown-menu { display:block; }

@media all and (max-width : 768px)  {
	.bootstrap-select .dropdown-menu > li > a { padding: 12px 25px 12px 8px; }
	.bootstrap-select:not(show-tick) .dropdown-menu > li > a { padding: 9px; }
}

@media all and (max-width : 480px) {
	.bootstrap-select .dropdown-toggle { padding: 15px 10px; }
	.bootstrap-select .dropdown-toggle .caret::after { top: 13px; right: 6px; }
	.bootstrap-select .dropdown-toggle .filter-option-inner-inner .text-muted { display: none; }
	.bootstrap-select .dropdown-menu > li > a { padding: 12px 7px; font-size: var(--font12); }
	.bootstrap-select:not(show-tick) .dropdown-menu > li > a { padding: 7px; }
	.bootstrap-select .dropdown-menu li small { display: block; padding: 0; }
	.bootstrap-select.show-tick .dropdown-menu .selected span.check-mark { display: none; }
}

.bs-searchbox { margin: 10px 10px 0; }
.bs-searchbox .form-control { }


/* dropdown BS */
.dropdown { position: relative; }
.dropdown-toggle { white-space: nowrap; }
.dropdown-menu { position: absolute; z-index: 9; display: none; /*min-width:;*/ background-color: #D0D0D0; }
.dropdown-menu[data-bs-popper] { top: 100%;	left: 0; /*margin-top:;*/
}
.dropdown-item { display: block; width: 100%; }
.dropdown-item:hover, .dropdown-item:focus { }
.dropdown-item.active, .dropdown-item:active {}
.dropdown-item.disabled, .dropdown-item:disabled { pointer-events: none; }
.dropdown-menu.show { display: block; }

/* accordion */
.accordion-item { border-bottom: 1px solid var(--gray11); transition: all 0.3s; }
.accordion-head { position: relative; font-size: 16px; font-weight: var(--font600); padding: 21px 0; cursor: pointer; }
.accordion-head p { max-width: calc(100% - 30px); }
.accordion-head p::after { display: block; content: "\e941"; position: absolute; top: 20px; right: 0; width: 19px; height: 19px; line-height: 19px; font-size: var(--font13); color: var(--gray07); font-family: 'xeicon'; text-align: center; transition: all 0.3s; }
.accordion-body { height: 0; overflow: hidden; transition: all 0.3s; }
.accordion-body-cnt { padding-bottom: 20px; }
.accordion-item.active .accordion-head p::after { transform: rotate(-180deg); }
.accordion-item.active .accordion-body { height: auto; }
.accordion-item:last-child .accordion-body-cnt { border: none; }
.accordion.topline-g11 { border-top: 1px solid var(--gray11); }

@media all and (max-width : 640px) {
	.accordion-head { font-size: 15px; }
}

/* toggle box */
.hidden-click-box { position: relative; }
.hidden-click-box .btn-show-box { }
.hidden-click-box .hidden-box {position:absolute; visibility: hidden; opacity: 0; transition: all 0.45s; z-index: 150; border-radius: 0 16px 16px 16px; background:#fff; }
#header .hidden-click-box .hidden-box { border:1px solid #1a1a1a;}
.hidden-click-box .hidden-box.active { visibility: visible; opacity: 1; }
.hidden-click-box .hidden-box.unsoft { display: none; }
.hidden-click-box .hidden-box.unsoft.active { display: block; }
.hidden-click-box .hidden-box .btn_hidden_box_close {width:24px; height:24px; background:url("/assets/img/common/icon-close-s.svg")no-repeat center; background-size:23px 23px;}

/* toggle box - select menu */
.hidden-click-box .hidden-box.sel-menu { right: 0; width: 155px; padding: 10px; margin-top: 10px; border-radius: var(--radius20); background-color: #fff; overflow: auto; box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1); /*display: none; */}
.hidden-click-box .hidden-box.sel-menu ul li .menu-item { display: block; font-size: var(--font14); padding: 12px 16px; border-radius: var(--radius20); user-select: none; cursor: pointer; }
.hidden-click-box .hidden-box.sel-menu ul li .menu-item:hover { background-color: var(--gray13); }

/* Count view more */
.js-cnt-box { height: 100%; overflow: hidden; }
.js-cnt-box.view-all { max-height: 100%  !important; }
.js-btn-more {}
.js-btn-more.clicked {}

/* tab page */
ul.tab-list-wrap.tab-btn { list-style: none; display: flex;}
ul.tab-list-wrap.tab-btn li,
ul.tab-list-wrap.tab-btn li a {width:100%; height:50px; line-height: 50px; text-align: center; display: inline-block; cursor:pointer; }
ul.tab-list-wrap.tab-btn li a {border-bottom:1px solid #dedfe4;}
ul.tab-list-wrap.tab-btn li.current,
ul.tab-list-wrap.tab-btn li.current a {border-bottom:2px solid black;}

.tab-cnt-wrap .tab-cnt{ display: none; }
.tab-cnt-wrap .tab-cnt.current{ display: block; }

ul.tab-list-wrap.tab-bullet { display: flex; justify-content: flex-start; gap: 24px; margin-bottom: 10px; }
ul.tab-list-wrap.tab-bullet li { padding-left: 28px; line-height: 20px; }
ul.tab-list-wrap.tab-bullet li::before { display: inline-block; content:""; width: 20px; height: 20px; line-height: 20px; vertical-align: middle; background: url("/assets/img/common/radio_default.svg") no-repeat 0 0; background-size: 20px; }
ul.tab-list-wrap.tab-bullet li.current::before { background: url("/assets/img/common/radio_chcked.svg") no-repeat 0 0; background-size: 20px; }
ul.tab-list-wrap.tab-bullet li.disable { opacity: 0.5; user-select: none; pointer-events: none; }

@media all and (max-width : 640px) {
	ul.tab-list-wrap.tab-bullet { gap: 15px; }
}


/* list */
.list-bullet li { padding-left: 10px; line-height: 1.33; }
.list-bullet li::before { content: "·"; display: inline-block; position: absolute; left: 0; }


/* table */
.respTable table { width: 100%; table-layout: fixed; }
.respTable table tr { border-bottom: 1px solid var(--gray11); }
.respTable table th { color: var(--black); font-size: var(--font14); font-weight: var(--font400); padding: 15px 5px;
}
.respTable table td { padding: 15px 5px; }


.respTable.table-row { overflow: auto; }
.respTable.table-row table { }
.respTable.table-row table td { word-break: break-all; }

.respTable.topline-g10 table { border-top: 1px solid var(--gray09); }
.respTable.topline-bk table { border-top: 1px solid var(--black); }
.respTable table th .reorder { display: inline-flex; align-items: center; }
.respTable table th .reorder span { display: inline-flex; flex-direction: column; }
.respTable table th .reorder i { font-size: var(--font12); cursor: pointer; user-select: none; }
.respTable table th .reorder i:last-child { margin-top: -5px; }
.respTable table tr.no-data td { padding: 1px !important; }

.respTable.table-line table,
.respTable.table-line table th,
.respTable.table-line table td { border: 1px solid var(--gray10); }
.respTable.table-line table th { background-color: var(--gray13); }

.table-top { display: flex; justify-content: space-between; align-items: center; gap: 4px; margin-bottom: 10px; }
.table-top .flex-side { flex: 1 1 0; justify-content: flex-end; gap: 10px; }
.table-top .bootstrap-select { max-width: 180px;  }






@media all and (max-width : 640px)  {
	.respTable.table-row table td { padding: 10px 5px; }
	.respTable.table-col table thead { display: none; }
	.respTable.table-col table tr { display: block; width:100%; padding: 10px 0; }
	.respTable.table-col table td { position: relative; display: block; width:100%; padding:1px; border:none; text-align: left; }
	.respTable.table-col table td::before { content: attr(data-label); position: absolute; display:inline-block; left: 0;  }
	.respTable.table-col table td[data-label="No"] { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; border: 0; overflow: hidden; box-sizing: border-box; clip: rect(0,0,0,0); }

	.respTable.table-top { gap: 0 2px; margin-bottom: 4px; }
}

/* calendar */
.ui-datepicker { display: none; padding: 10px; border-radius: var(--radius20); background-color: var(--white); box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1);  }
.ui-datepicker .ui-datepicker-header { position:relative; margin: 5px 0 10px; }
.ui-datepicker .ui-datepicker-header .ui-corner-all { position: absolute; top: 4px; width: 12px; height: 12px; background:url('/assets/img/common/icon_arr.svg') 0 0 no-repeat; background-size: 20px; }
.ui-datepicker .ui-datepicker-header .ui-corner-all span { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; border: 0; clip: rect(0,0,0,0); }
.ui-datepicker .ui-datepicker-header .ui-datepicker-prev { left:0; background-position:0 0; }
.ui-datepicker .ui-datepicker-header .ui-datepicker-next { right:0; background-position:-12px 0; }
.ui-datepicker .ui-datepicker-header .ui-datepicker-title { font-size: var(--font16); font-weight: var(--font800); text-align: center; }
.ui-datepicker .ui-datepicker-calendar { width:100%; text-align: center; }
.ui-datepicker .ui-datepicker-calendar th { font-weight: var(--font500); }
.ui-datepicker .ui-datepicker-calendar td { }
.ui-datepicker .ui-datepicker-calendar td.ui-state-disabled { color: var(--gray06);}
.ui-datepicker .ui-datepicker-calendar td a,
.ui-datepicker .ui-datepicker-calendar td span { display: inline-block; width: 25px; height: 25px; line-height: 25px; font-size: var(--font13); border-radius: 50%; }
.ui-datepicker .ui-datepicker-calendar td a.ui-state-highlight { background-color: var(--gray11); }
.ui-datepicker .ui-datepicker-calendar td a.ui-state-hover,
.ui-datepicker .ui-datepicker-calendar td a.ui-state-active { color: var(--white); background-color: var(--primary); }

.ui-timepicker-div { margin-top: 5px; padding-top: 10px; border-top: 1px solid var(--gray10); }
.ui-timepicker-div dl { display: flex; justify-content: space-between; }
.ui-timepicker-div dl dt { }
.ui-timepicker-div dl dd { }
.ui-timepicker-div .ui_tpicker_unit_hide { display: none; }
.ui-timepicker-div .ui_tpicker_time .ui_tpicker_time_input { background: none; }
.ui-timepicker-div.ui-timepicker-oneLine .ui_tpicker_time { display: none; }
.ui-timepicker-div.ui-timepicker-oneLine .ui_tpicker_time_label { display: block; }
.ui-timepicker-div.ui-timepicker-oneLine dl { }
.ui-timepicker-div.ui-timepicker-oneLine dl dt { display: none; }
.ui-timepicker-div.ui-timepicker-oneLine dl dd,
.ui-timepicker-div.ui-timepicker-oneLine dl dd > div { display:inline-block;  }
.ui-timepicker-div.ui-timepicker-oneLine dl dd .ui-timepicker-select { padding: 0 10px; margin: 0 4px; appearance: none; border: 1px solid var(--gray10); font-size: var(--font13); color: var(--gray02); }
.ui-timepicker-div.ui-timepicker-oneLine dl dd.ui_tpicker_hour { margin-left: auto; }
.ui-timepicker-div.ui-timepicker-oneLine dl dd.ui_tpicker_minute:before { content:':'; display:inline-block; }
.ui-timepicker-div.ui-timepicker-oneLine .ui_tpicker_unit_hide,
.ui-timepicker-div.ui-timepicker-oneLine .ui_tpicker_unit_hide:before{ display: none; }
.ui-datepicker .ui-datepicker-buttonpane { text-align: center; }
.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current { display: none; }
.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-close { width: 100%; padding: 7px 0; margin-top: 10px; border-radius: var(--radius20); font-size: var(--font13); color: var(--black); background-color: var(--gray12); }

/* no-data */
.no-data p { /*color: var(--gray07);*/ text-align: center; margin: 150px auto; user-select: none; }
/*.no-data p::before { display: block; content: "\e9ab"; width: 40px; height: 40px; line-height: 40px; font-size: var(--font40); font-family: 'xeicon'; color: var(--gray10); margin: 0 auto 10px; } !* ! *!*/

/* pagination */
.pagination { margin: 20px auto 0; text-align: center; }
.pagination a { width: 38px; height: 38px; line-height: 38px; color: var(--gray07); margin: 0 2px; border: 1px solid transparent; border-radius: 50%; background: var(--white); overflow: hidden; }
.pagination a.active { color: var(--white); background-color: var(--gray02); }
.pagination a.start { border-color: var(--gray10); background:url('/assets/img/common/icon_page.svg') no-repeat 6px 6px; }
.pagination a.before { border-color: var(--gray10); background:url('/assets/img/common/icon_page.svg') no-repeat -17px 6px; }
.pagination a.next { border-color: var(--gray10); background:url('/assets/img/common/icon_page.svg') no-repeat -67px 6px; }
.pagination a.end { border-color: var(--gray10); background:url('/assets/img/common/icon_page.svg') no-repeat -42px 6px; }

@media all and (max-width : 480px)  {
	.pagination a { width: 24px; height: 24px; line-height: 24px; margin: 0; }
	.pagination a.start { background-size: 70px; background-position:3px 3px; }
	.pagination a.before { background-size: 70px; background-position:-15px 3px; }
	.pagination a.next { background-size: 70px; background-position:-51px 3px; }
	.pagination a.end { background-size: 70px; background-position:-33px 3px; }

}


/* lightbox */
.lightbox { position: fixed; top: 0; left: 0; display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.7); z-index: 1000; }
.lightbox i { display: inline-block; position: absolute; top: 10px; right: 10px; width: 34px; height: 34px; line-height: 34px; cursor: pointer; font-size: var(--font24); color: var(--white); }
.lightbox canvas + i { color: var(--gray02); }
.lightbox img { max-width: 90vw; max-height: 90vh; background-color: var(--white); }


/* toast */
#toast { position: fixed; top: 50%;	left: 50%; width: max-content; max-width: 90%; color: var(--white); padding: 20px 80px; border-radius: var(--radius20); transform: translate(-50%, -40%); background: rgba(0, 0, 0, 0.9); overflow: hidden; opacity: 0; visibility: hidden; transition: all 0.5s; user-select: none; z-index: 1000; }
#toast.reveal {	transform: translate(-50%, -60%); opacity: 1; visibility: visible; }

@media all and (max-width : 768px)  {
	#toast { padding: 20px 12%; }

}
@media all and (max-width : 480px)  {
	#toast { padding: 20px 8%; }

}

/* modal */
.modal-wrap { display: none; justify-content:center; align-items:center; position:fixed; top: 0; left: 0; width: 100%; height: 100%; /*transform:translate(-50%,-50%);*/ background: rgba(0, 0, 0, 0.35); transition: 0.5s; visibility: hidden; opacity: 0; z-index:1000; }

.modal { position: relative; width: 90%; max-width: 494px; padding:0 0 20px 0; border-radius: 20px; background-color: var(--white); word-break: keep-all; overflow: hidden; }
.modal.modal-s {max-width: 320px;}
.modal-head {background:#1a1a1a; height:56px; line-height: 56px; padding: 0 20px; border-radius: 20px 20px 0 0; }
.modal-head h4 {color:var(--white); font-size: var(--font16); font-weight: var(--font600); text-align: left; }
.modal-head .modal-close { position: absolute; top: 15px; right: 15px; filter: brightness(10); }
.modal-head .modal-close::before { display:block; content:"\e921"; width: 24px;	height: 24px; line-height: 24px;font-size: var(--font20); font-family: 'xeicon'; } /* x */
.modal-body { max-height: calc(85vh - 170px); font-size: var(--font14); padding: 20px 20px 0; overflow: auto; }

.modal-body h6 { font-size: var(--font14); padding-bottom: 16px; }
.modal-body .form-basic,
.modal-body .btn-box { margin:0; }
.modal-body .form-basic + .form-basic { margin-top: 20px; }
.modal-body .form-basic + .btn-box { margin-top: 20px; }
.modal-body .input-validation.invalid span { font-size: var(--font13); }
.modal-body .dl-wrap dl dd { word-break: break-all; }
.modal-body .respTable table td { padding: 10px 5px; }
.modal-body .gray-box { padding: 20px; margin: 10px 0; border-radius: var(--radius20); background-color: var(--gray11); }
.modal-body .gray-txt04 { color: var(--gray04); }
.modal-body .gray-txt04 p + p { margin-top: 10px; }
.modal-body .textarea-output { max-height: 150px; overflow-y: auto; }
.modal-body .modal-scroll {}
.modal:has(.inner-fix .bootstrap-select.open) { overflow: initial; }
.modal-body:has(.inner-fix .bootstrap-select.open) { overflow: initial; }
.modal-body .respTable.table-row {border-top:1px solid #c1c2c7;}
.modal-body .respTable.table-row {}
.modal-body .respTable.table-row {}
.modal-body:has(.area-hidden.open) { overflow: initial; }
.modal:has(.area-outArea.open) .modal-body { overflow: initial; }

.modal-foot {display:flex; gap:8px; padding: 24px 20px 0; }
.modal-foot .btn { width: 100%; }

.modal.modal320 { max-width: 320px; }
.modal.modal370 { max-width: 370px; }
.modal.modal600 { max-width: 600px; }
.modal.modal600 .modal-body .table-row table { min-width: 495px; }
.modal.modal750 { max-width: 750px; }
.modal.modal800 { max-width: 800px; }
.modal.modal1100 { max-width: 1100px; }
.modal.modal-warning .modal-body { text-align: center; }
.modal.modal-warning .modal-body p.err { font-size: var(--font15); color: var(--red); }
.modal.modal-warning .modal-body p.err::before { display: block; content: "\e9ab"; width: 40px; height: 40px; line-height: 40px; font-size: var(--font40); font-family: 'xeicon'; color: var(--gray07); margin: 0 auto 10px; } /* ! */
.modal.modal-complete .modal-body .i-check i { width: 65px; height: 65px; line-height: 65px; font-size: var(--font28); color: var(--success); text-align: center; border-radius: 50%; background-color: rgba(61, 191, 78, 0.1); }
.modal.modal-complete .modal-body .i-check p { font-size: var(--font22); text-align: center; margin-bottom:25px; }
.modal.modal-complete .modal-body .i-check p span { display: block; font-size: var(--font15); color: var(--gray07); }
.modal-view { visibility: visible; opacity: 1; display: flex;}
.not-scroll { height: 100vh; overflow: hidden; touch-action: none; }


@media all and (max-width : 768px)  {
	.modal-body:has(.bootstrap-select.open) { overflow: auto; }
}

@media all and (max-width : 640px)  {
	.modal-head { padding: 0 25px; }
	.modal-head .modal-close { top: 16px; right: 10px; }
	.modal-body { max-height: calc(80vh - 150px); padding: 13px 25px 0; }
	.modal-body .body-fix {}
	.modal-body .body-scroll { max-height: calc(85vh - 150px); }
	.modal-body .respTable table td { padding: 6px 5px; }
	.modal-body .bootstrap-select .dropdown-menu { max-height: 160px !important; min-height: auto !important; }
	.modal-foot { padding: 20px 25px 0; }
	.modal-foot .btn { width: 100%; }
}


/* modal popup */
.modal-popup { align-items: flex-start; }
.modal-popup .modal { display: flex; justify-content: center; gap: 10px; max-width: none; padding: 7% 0 0 0; margin: 0 auto; border-radius: 0; background-color: transparent; }
.modal-popup .modal .modal-box { max-width: 580px; }
.modal-popup .modal-body { padding: 0; }
.modal-popup .modal-body p a,
.modal-popup .modal-body p img { width: 100%; }
.modal-popup .modal-foot { padding: 0; }
.modal-popup .modal-foot .btn-wrap { gap: 0; margin: 0; align-items: stretch; }
.modal-popup .modal-foot .btn-wrap .btn { width: 100%; font-size: var(--font14); padding: 14px 10px; margin: 0; text-align: left; }
.modal-popup .modal-foot .btn-wrap .close_today { max-width: 100%; }
.modal-popup .modal-foot .btn-wrap .close-popup { flex: 0 0 120px; text-align: right; }

@media all and (max-width : 768px)  {
	.modal-popup .modal { padding: 0; }
	.modal-popup .modal .modal-box { position: fixed; top: 10%; left: 10%; right: 10%; }
	.modal-popup .modal .modal-box2 { margin-top: 50px; }
	.modal-popup .modal .modal-box3 { margin-top: 100px; }

}

@media all and (max-width : 320px)  {
	.modal-popup .modal-foot .btn-wrap { flex-direction: row; }
	.modal-popup .modal-foot .btn-wrap .btn { font-size: 11px; padding: 12px 8px; }
	.modal-popup .modal-foot .btn-wrap .close-popup { flex: 0 0 80px; }

}




/* swiper-progressbar */
.swiper-pagination-progressbar { background: rgba(0,0,0,0.1); position: absolute; border-radius: 10px; overflow: hidden; }
.swiper-pagination-progressbar .swiper-pagination-progressbar-fill { background: var(--black); position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 10px; transform: scale(0); transform-origin: left top; }
.swiper-horizontal > .swiper-pagination-progressbar,
.swiper-pagination-progressbar.swiper-pagination-horizontal,
.swiper-vertical > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,
.swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite { width: 100%; height: 3px; top: auto; bottom: 0; left: 0; border-radius: var(--radius20); }
::-webkit-scrollbar-button { background-color: transparent; }

/* scrollbar */
.swiper-scrollbar { position: relative; background-color: var(--gray10) !important; -ms-touch-action: none; }
.swiper-scrollbar-drag { background-color: var(--gray07) !important; }
.swiper-horizontal > .swiper-scrollbar, .swiper-scrollbar.swiper-scrollbar-horizontal { left: 0; width: 100%; height: 10px; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { border-radius: 5px; background-color: var(--gray09); }
::-webkit-scrollbar-track { background-color: var(--white) !important; }
body::-webkit-scrollbar-thumb { height:20%; max-height: 102px; border-radius: 10px; background-color: var(--gray10) !important; }
body::-webkit-scrollbar {width:13px !important; height:13px !important;}
textarea::-webkit-scrollbar-track { background-color: transparent !important; }
::-webkit-scrollbar-button { display: none; }

/* loading */
/*.loading {display:none; background: rgba(0,0,0,0.8); position:fixed; top:0; height:100%; width:100%; z-index: 11;}*/
/*.loader { position: absolute; left: 50%; top: 50%; z-index: 1;color:#fff;font-size:50px }*/
.load_wrap { text-align: center; }
.load_wrap .loading_box { position: relative; width: 64px; height: 64px; border-radius: 50%; background-color: #fff; }
.load_wrap .loading_box img { position: absolute; top: 0; left: 0; animation: fade 0.5s step-end infinite; -webkit-animation: fade 0.5s step-end infinite; -moz-animation: fade 0.5s step-end infinite; -o-animation: fade 0.5s step-end infinite; transform: scale(1.018); }
.load_wrap p { font-size: 16px; margin-top: 5px; user-select: none; }

@keyframes fade {
	50% { opacity: 0.8; }
}
@-webkit-keyframes fade {
	50% { opacity: 0.8; }
}
@-moz-keyframes fade {
	50% { opacity: 0.8; }
}
@-o-keyframes fade {
	50% { opacity: 0.8; }
}

.mt-10 {margin-top:10px;}