@charset "utf-8";

@import url('../../svg/svg.css');

/**************************************************front common**************************************************/
body ::-webkit-scrollbar {width: 10px; height: 10px; border-radius: 5px;}
body ::-webkit-scrollbar-track {background-color: #fff; border-radius: 5px;}
body ::-webkit-scrollbar-thumb {background-color: #EAECF0; border-radius: 5px;}

.popCont-scroll ::-webkit-scrollbar,
body #contents ::-webkit-scrollbar {width: 6px; height: 6px; border-radius: 5px;}

body #contents .page-tab:has( > .tabtype1) ::-webkit-scrollbar {width: 2px; height: 2px;}

.miniPop ::-webkit-scrollbar,
.form-selectDiv ::-webkit-scrollbar,
body.lnbOpen .page-body.type-hasLnb .area-lnb ::-webkit-scrollbar {width: 12px !important; height: 12px !important; border-radius: 10px !important;}
.miniPop ::-webkit-scrollbar-thumb,
.form-selectDiv ::-webkit-scrollbar-thumb,
body.lnbOpen .page-body.type-hasLnb .area-lnb ::-webkit-scrollbar-thumb {border: 4px solid transparent; background-clip: padding-box;}

body .filter-area .filter-main + .filter-sub ::-webkit-scrollbar {width: 6px !important; height: 6px !important; border-radius: 3px !important;}
body.lnbOpen .page-body.type-hasLnb .area-lnb ::-webkit-scrollbar-track,
body .filter-area .filter-main + .filter-sub ::-webkit-scrollbar-track {background-color: transparent;}
body .filter-area .filter-main + .filter-sub ::-webkit-scrollbar-thumb {border-width: 0;}

.scroll-y {overflow-x: hidden; overflow-y: auto;}
.scroll-x {overflow-x: auto; overflow-y: hidden}
.scrollbox {overflow: auto; position: relative; width: 100%; min-height: 90px;}
.scrollbox > .scroll {position: absolute; top: 0; left: 0; width: 100%;}

.flex-col.ta-l {align-items: flex-start !important;}
.flex-col.ta-r {align-items: flex-end !important;}
.flex-col.va-t {justify-content: flex-start !important;}
.flex-col.va-b {justify-content: flex-end !important;}


/*loading*/
.loader-box, .loaderSVG-box {/*display: flex; flex-direction: column; justify-content: center; align-items: center;*/ text-align: center;}

.loader-box {
	--size: 120px; --size-stroke: 14px; --color-s: 255, 148, 22; --color-e: 217,217,217;
	--fs-text: 48px; --fs-desc: 16px; --fw-text: 700; --fx-desc: 16px; --fw-desc: 500;
	/*width: var(--size); height: var(--size);*/
	position: relative;
}
.loader-box .loader {width: var(--size); height: var(--size);
	position: relative; display: inline-block; border-radius: 50%;
	background-color: #fff; border-radius: 50%; /*box-shadow: 1px 1px 6.2px 0 rgba(0, 0, 0, 0.15);*/
	background: conic-gradient(from 180deg at 50% 50%, rgba(var(--color-s),1) 0deg, rgba(var(--color-e),0) 360deg);
	animation: spin 1.2s linear infinite;
}
.loader-box .loader::before,
.loader-box .loader::after {content: ''; display: block; border-radius: 50%; position: absolute; left: 50%;}
.loader-box .loader::before {width: var(--size-stroke); height: var(--size-stroke); background-color: rgba(var(--color-s), 1); bottom: 0; margin-left: calc((var(--size-stroke) / 2) * -1);}
.loader-box .loader::after {width: calc(var(--size) - (var(--size-stroke) * 2)); height: calc(var(--size) - (var(--size-stroke) * 2)); background-color: #fff; top: 50%; transform: translate(-50%, -50%);}
.loader-box .text {color: #333; font-size: var(--fs-text); font-weight: var(--fw-text); line-height: calc(var(--fs-text) + 4px); margin: 20px 0;}
.loader-box .desc {color: #666; font-size: var(--fs-desc); font-weight: var(--fw-desc); line-height: calc(var(--fs-desc) + 4px);}
.loader-box .loader-per-box {position: relative;}
.loader-box .loader-per-box .per {width: calc(var(--size) - (var(--size-stroke) * 2)); height: calc(var(--size) - (var(--size-stroke) * 2)); display: flex; justify-content: center; align-items: center;
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 1;
    margin: 0; color: var(--HK_or); text-align: center; font-size: var(--fs-body); font-weight: var(--fw-b); line-height: 26px;
}

.loaderSVG-box {--size: 44px; --stroke-track: #F3F4F6; --stroke-bar: var(--HK_or); --stroke-width: 4; --fs-size: 16px; --fw-size: 500;
	/*display: flex; flex-direction: column; align-items: center; justify-content: flex-end;*/
}
.loaderSVG-box .loaderSVG {width: var(--size); height: var(--size);	display: inline-block; transform: rotate(-90deg);}
.loaderSVG-box .loader-svg {width: 100%; height: 100%; transform-origin: center; animation: rotate4 2s linear infinite;}
.loaderSVG-box .loader-track {fill: none; stroke: var(--stroke-track); stroke-width: var(--stroke-width); stroke-linecap: round;}
.loaderSVG-box .loader-bar {fill: none; stroke: var(--stroke-bar); stroke-width: var(--stroke-width); stroke-linecap: round; stroke-dasharray: 1, 200; stroke-dashoffset: 0; animation: dash4 1.5s ease-in-out infinite;}
.loaderSVG-box .text {color: #1F2937; text-align: center; font-family: 'Inter', sans-serif; font-size: var(--fs-size); font-weight: var(--fw-size); line-height: calc(var(--fs-size) + 4px); letter-spacing: 0.06px;}

@keyframes spin {
	to { transform: rotate(360deg); }
}

@keyframes rotate4 {
	100% { transform: rotate(360deg); }
}
@keyframes dash4 {
	0%   { stroke-dasharray: 1, 200; stroke-dashoffset: 0; }
	50%  { stroke-dasharray: 90, 200; stroke-dashoffset: -35px; }
	100% { stroke-dashoffset: -125px; }
}

.loader-box.style1 .loader {--color-s: 37, 99, 235;}
.loader-box.sizeXS {--size: 100px;}
.loader-box.sizeS {--size: 200px;}
.loader-box.sizeL {--size: 400px;}

.loaderSVG-box.style1 .loader-bar {--stroke-bar: #2563EB;}
.loaderSVG-box.sizeXS {--size: 20px; --fs-size: 12px;}
.loaderSVG-box.sizeS {--size: 36px; --fs-size: 14px;}
.loaderSVG-box.sizeL {--size: 64px; --fs-size: 18px;}

.loader-area {display: flex; justify-content: center; align-items: center; }
.type-fullPage {width: 100%; /* height: 100%; */ flex: 1;}

.fillsu {width: 12px; min-height: 14px; display: inline-block; vertical-align: middle; font-size: 0.5px; line-height: 0.5px; color: transparent; overflow: hidden;}
.fillsu::before {content: '*'; display: block; font-size: var(--fs-body); color: var(--HK_or); line-height: 1;}

.badge.time,
.badge {--myIcoSize: 12px; display: flex; height: 22px; padding: 2px 8px 2px 4px; justify-content: center; align-items: center; gap: 4px; border-radius: 16px; background: rgba(0, 0, 0, 0.50);}
.badge.time .txt,
.badge .txt {color: #FFF; font-family: 'Inter', sans-serif; font-size: 12px; font-weight: var(--fw-m); line-height: 18px;}
.badge.time .ico,
.badge .ico {min-width: var(--myIcoSize); width: var(--myIcoSize); height: var(--myIcoSize);}
.badge.time .ico::before,
.badge .ico::before {--svg-color: var(--filterColor-fff)}

/*chk-box, ra-box 통합 ver*/
.rc-box {--size: 20px;
	position: relative; display: inline-flex; align-items: center; /*margin-right: 10px;*/ gap: 5px;
}
.rc-box.type-col {flex-direction: column;}

.rc-group {gap: 10px;}
.rc-group.type-rcList {display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap; gap: 12px;}

.rc-group.rcbox-list .gubun-line {border-top: 1px solid var(--Form_border);}

.rc-box input[type='radio'], .rc-box input[type='checkbox'] {appearance: none; width:var(--size); min-width:var(--size); height:var(--size); /*position: absolute; top: 0; left: 0;*/ border: 1px solid var(--Form_rc); border-radius: 6px; background-color: var(--Form_rc_bg); position: relative;}
.rc-box input[type='radio'], .rc-box[class*="type-check"] input[type='checkbox'] {border-radius: 50%;}

.rc-box .label {cursor: pointer; position: relative; /*padding-left: calc(var(--size) + 5px);*/ font-size: var(--fs-body); line-height: var(--lh-body); min-height: var(--size); color: #333; font-weight: normal; display: inline-flex; justify-content: flex-start; align-items: flex-start; padding-top: 2px; text-align: left;}

.rc-box input[type='radio']::before,
.rc-box input[type='checkbox']::before {content:''; display: inline-flex; position: absolute; left: 50%; top: 50%; --svg-color: var(--filterColor-fff); transform: translate(-50%, -50%);}
.rc-box:not([class*="type-check"]) input[type='radio']::before {min-width: 10px; width: 10px; height: 10px; border-radius: 50%; /*margin-top: -5px; margin-left: -5px;*/ background-color: #fff;}
.rc-box input[type='checkbox']::before,
.rc-box[class*="type-check"] input[type='radio']::before {min-width: 20px; width: 20px; height: 20px; /*margin-top: -6px; margin-left: -6px;*/ opacity: 0; background-size: 50% auto;}

.rc-box input[type='radio']:hover,
.rc-box input[type='checkbox']:hover {border-color: #000;}

.rc-box:has( input[type='radio']:hover) .label,
.rc-box:has( input[type='checkbox']:hover) .label {color: var(--HK_blue); color: var(--Form_color);}
.rc-box:has( input[type='radio']:disabled) .label,
.rc-box:has( input[type='checkbox']:disabled) .label {cursor: default; pointer-events: none;}

.rc-box:has( input[type='radio']:checked) .label,
.rc-box:has( input[type='checkbox']:checked) .label { color: var(--HK_blue); color: var(--Form_color)}

.rc-box input[type='radio']:disabled,
.rc-box input[type='checkbox']:disabled,
.rc-box:has( input[type='radio']:disabled) ~ .disabled,
.rc-box:has( input[type='checkbox']:disabled) ~ .disabled {border-color: #C0C0C0 !important;}

.rc-box input[type='checkbox']:disabled::before,
.rc-box[class*="type-check"] input[type='radio']:disabled::before {--svg-color: var(--filterColor-C0C0C0) !important}

.rc-box:has( input[type='radio']:disabled) .label,
.rc-box:has( input[type='checkbox']:disabled) .label,
.rc-box:has( input[type='radio']:disabled) ~ .disabled *,
.rc-box:has( input[type='checkbox']:disabled) ~ .disabled * {color: #C0C0C0 !important;}

.rc-box[class*="type-check"] input[type='radio']:checked:disabled,
.rc-box[class*="type-check"] input[type='checkbox']:checked:disabled {background-color: #C0C0C0 !important; border-color: #C0C0C0 !important;}
.rc-box input[type='checkbox']:checked:disabled::before,
.rc-box[class*="type-check"] input[type='radio']:checked:disabled::before {--svg-color: var(--filterColor-fff) !important;}

.rc-box input[type='radio']:disabled ~ .form-text,
.rc-box input[type='radio']:disabled ~ .form-input,
.rc-box input[type='checkbox']:disabled ~ .form-text,
.rc-box input[type='checkbox']:disabled ~ .form-input {opacity: .8;}

/*check type*/
.rc-box[class*="type-check"] input[type='radio'],
.rc-box[class*="type-check"] input[type='checkbox'] {border-color: #666; border-width: 2px;}
.rc-box[class*="type-check"] input[type='radio']::before,
.rc-box[class*="type-check"] input[type='checkbox']::before {opacity: 1; --svg-color: var(--filterColor-666);}

.rc-box[class*="type-check"] input[type='radio']:checked,
.rc-box[class*="type-check"] input[type='checkbox']:checked {background-color: #1C1B1F; border-color: #1C1B1F;}
.rc-box[class*="type-check"] input[type='radio']:checked::before,
.rc-box[class*="type-check"] input[type='checkbox']:checked::before {opacity: 1; --svg-color: var(--filterColor-fff);}

.rc-box input[type='radio']:checked::before,
.rc-box input[type='checkbox']:checked::before {opacity: 1; --svg-color: var(--filterColor-333);}

/*color 기본, check-style*/
.rc-box.type-check-style input[type='radio']::before,
.rc-box.type-check-style input[type='checkbox']::before{opacity: 0;}

/*color style1 : blue*/
.rc-box.style1 input[type='radio'],
.rc-box.style1 input[type='checkbox'],
.rc-box.type-check-style1 input[type='radio'],
.rc-box.type-check-style1 input[type='checkbox'],
.rc-box.type-check-style1 input[type='radio']:checked,
.rc-box.type-check-style1 input[type='checkbox']:checked {border-color: var(--HK_blue);}
.rc-box.style1 .label,
.rc-box.type-check-style1 .label {color: var(--HK_blue); font-weight: var(--fw-sb);}
.rc-box.style1:has( input[type='radio']:hover) .label,
.rc-box.style1:has( input[type='checkbox']:hover) .label,
.rc-box.type-check-style1:has( input[type='radio']:hover) .label,
.rc-box.type-check-style1:has( input[type='checkbox']:hover) .label {color: var(--HK_blue_over);}
.rc-box.style1 input[type='radio']:checked,
.rc-box.style1 input[type='checkbox']:checked,
.rc-box.type-check-style1 input[type='radio']:checked,
.rc-box.type-check-style1 input[type='checkbox']:checked {background-color: var(--HK_blue); background-color: var(--White);}
.rc-box.style1:has( input[type='radio']:checked) .label,
.rc-box.style1:has( input[type='checkbox']:checked) .label,
.rc-box.type-check-style1:has( input[type='radio']:checked) .label,
.rc-box.type-check-style1:has( input[type='checkbox']:checked) .label {color: var(--HK_blue);}

.rc-box.type-check-style1 input[type='radio']:not(:checked)::before,
.rc-box.type-check-style1 input[type='checkbox']:not(:checked)::before {opacity: 0;}
.rc-box.type-check-style1 input[type='radio']:checked::before,
.rc-box.type-check-style1 input[type='checkbox']:checked::before {opacity: 1;}

.rc-box.style1 input[type='radio']:checked::before,
.rc-box.style1 input[type='checkbox']:checked::before,
.rc-box.type-check-style1 input[type='radio']:checked::before,
.rc-box.type-check-style1 input[type='checkbox']:checked::before {--svg-color: var(--filter-HK_blue); /*--svg-color: var(--filterColor-fff);*/}

/*color style1 : blue > .txt blue 적용안함(checked에도 적용안함)*/
.rc-box.style1 .label.asis {color: inherit !important;}



/*label값 숨기고 input만 보이는 타입*/
.rc-box.solo { --size: 18px; /*width: 18px; height: 18px;*/ margin: 0; overflow: hidden;}
.rc-box.solo:has( input[type='radio']) .label,
.rc-box.solo:has( input[type='checkbox']) .label {text-indent: -9999em; padding-left: var(--size); height: var(--size); position: absolute; left: 0; top: 0; opacity: 0;}
.rc-box.solo:has( input[type='radio']) .label:before,
.rc-box.solo:has( input[type='checkbox']) .label:before {top: 0; margin-top: 0;}

/*type-box1*/
.rc-box[class*="type-box1"] {--size: 40px; --myR: 8px; --myGap: 4px; --pd: 5px; --checkPD: 32px; --checkPosLR: 9px; --checkPosTB: 12px;}
.rc-box[class*="type-box1"] input[type='radio'],
.rc-box[class*="type-box1"] input[type='checkbox'] {width: 0; height: 0; opacity: 1; position: absolute; left: 0; top: 0; border: 0 none;}
.rc-box[class*="type-box1"] input[type='radio']::before,
.rc-box[class*="type-box1"] input[type='checkbox']::before,
.rc-box[class*="type-box1"] input[type='checkbox']::after {content: none;}
.rc-box[class*="type-box1"] input[type='radio'] + .label,
.rc-box[class*="type-box1"] input[type='checkbox'] + .label {display: flex; justify-content: center; align-items: center; width: 100%; min-width: var(--size); min-height: var(--size); padding: var(--pd) calc(var(--pd) * 2); gap: var(--myGap); border-radius: var(--myR);
	color: var(--Gray_666); font-size: var(--fs-caption); line-height: var(--lh-caption);
	background-color: #FFF; box-shadow: 1px 1px 6.2px 0 rgba(0, 0, 0, 0.08);
}
.rc-box[class*="type-box1"] input[type='radio'] + .label .ico + .txt,
.rc-box[class*="type-box1"] input[type='checkbox'] + .label .ico + .txt {font-size: var(--fs-body); line-height: var(--lh-body);}

.rc-box[class*="type-box1"] input[type='radio']:checked + .label,
.rc-box[class*="type-box1"] input[type='checkbox']:checked + .label {background-color: var(--HK_blue); color: #fff; font-weight: var(--fw-m); /*position: relative; padding-left: var(--checkPD);*/}
.rc-box[class*="type-box1"] input[type='radio']:checked + .label::before,
.rc-box[class*="type-box1"] input[type='checkbox']:checked + .label::before,
.rc-box[class*="type-box1"].type-select input[type='radio'] + .label::after,
.rc-box[class*="type-box1"].type-select input[type='checkbox'] + .label::after,
.rc-box[class*="type-box1"].type-checkR input[type='radio']:checked + .label::after,
.rc-box[class*="type-box1"].type-checkR input[type='checkbox']:checked + .label::after { display: inline-block; width: 18px; height: 18px;
    /*background: url(../images/ico/ico-sel-3.svg) center center no-repeat;*/ background-position: center center; background-repeat: no-repeat; background-size: 11px auto;
    /*position: absolute; left: var(--checkPosLR); top: 50%; transform: translateY(-50%);*/
	--svg-color: var(--filterColor-fff); filter: var(--svg-color);
}
.rc-box[class*="type-box1"] input[type='radio']:checked + .label::before,
.rc-box[class*="type-box1"] input[type='checkbox']:checked + .label::before,
.rc-box[class*="type-box1"].type-checkR input[type='radio']:checked + .label::after,
.rc-box[class*="type-box1"].type-checkR input[type='checkbox']:checked + .label::after {content: '';}
.rc-box[class*="type-box1"] input[type='radio']:checked + .label .ico,
.rc-box[class*="type-box1"] input[type='checkbox']:checked + .label .ico {filter: brightness(0) saturate(100%) invert(95%) sepia(100%) saturate(0%) hue-rotate(74deg) brightness(103%) contrast(106%);}

/*.rc-box[class*="type-box1"] input[type='radio']:checked + .label::before,
.rc-box[class*="type-box1"] input[type='checkbox']:checked + .label::before {--svg-color: var(--filterColor-fff);}*/

.rc-box[class*="type-box1"] + .rc-box input[type='radio']:checked + .label,
.rc-box[class*="type-box1"] + .rc-box input[type='checkbox']:checked + .label {font-weight: var(--fw-m);}


/*type-box2*/
.rc-box[class*="type-box2"] input[type='radio'],
.rc-box[class*="type-box2"] input[type='checkbox'] {width: 0; height: 0; opacity: 1; position: absolute; left: 0; top: 0; border: 0 none;}
.rc-box[class*="type-box2"] input[type='radio']::before,
.rc-box[class*="type-box2"] input[type='checkbox']::before,
.rc-box[class*="type-box2"] input[type='checkbox']::after {content: none;}
.rc-box[class*="type-box2"] input[type='radio'] + .label,
.rc-box[class*="type-box2"] input[type='checkbox'] + .label {display: flex; justify-content: center; align-items: center; width: 100%; min-width: 40px; min-height: 40px; padding: 5px 16px; gap: 4px;
	color: #666; font-size: var(--fs-body); line-height: 20px; line-height: var(--lh-body); font-weight: var(--fw-m);
	border-radius: 30px; border: 1px solid #F5F5F5; background: #F5F5F5;
	box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05);
}
.rc-box[class*="type-box2"] input[type='radio'] + .label .ico + .txt,
.rc-box[class*="type-box2"] input[type='checkbox'] + .label .ico + .txt {font-size: var(--fs-body); line-height: var(--lh-body);}
.rc-box[class*="type-box2"] input[type='radio']:checked + .label,
.rc-box[class*="type-box2"] input[type='checkbox']:checked + .label {background-color: var(--HK_blue); color: #fff; font-weight: var(--fw-m);}
.rc-box[class*="type-box2"] input[type='radio']:checked + .label .ico,
.rc-box[class*="type-box2"] input[type='checkbox']:checked + .label .ico {filter: brightness(0) saturate(100%) invert(95%) sepia(100%) saturate(0%) hue-rotate(74deg) brightness(103%) contrast(106%);}

/*type-box2형태의 다른 스타일1*/
.rc-box.type-box2-style1 input[type='radio'] + .label,
.rc-box.type-box2-style1 input[type='checkbox'] + .label {box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05); background-color: #fff; border-color: var(--Form_border); padding: 5px 24px;}
.rc-box.type-box2-style1 input[type='radio']:hover + .label,
.rc-box.type-box2-style1 input[type='checkbox']:hover + .label {background-color: #f5f5f5;}
.rc-box.type-box2-style1 input[type='radio']:checked + .label,
.rc-box.type-box2-style1 input[type='checkbox']:checked + .label {background-color: var(--HK_or);}

/*type-box2형태의 다른 스타일2*/
.rc-box.type-box2-style2 input[type='radio'] + .label,
.rc-box.type-box2-style2 input[type='checkbox'] + .label {background-color: var(--Gray_E5); border-color: var(--Gray_E5); padding: 5px 24px;}
.rc-box.type-box2-style2 input[type='radio']:hover + .label,
.rc-box.type-box2-style2 input[type='checkbox']:hover + .label {background-color: var(--Gray_DDD);}
.rc-box.type-box2-style2 input[type='radio']:checked + .label,
.rc-box.type-box2-style2 input[type='checkbox']:checked + .label {background-color: var(--HK_blue);}

/*type-box2형태의 다른 스타일3
.rc-box.type-box2-style3 input[type='radio'] + .label,
.rc-box.type-box2-style3 input[type='checkbox'] + .label {background-color: #DBDEE3; border-color: #DBDEE3; padding: 5px 24px; color: #fff; font-weight: var(--fw-sb);}
.rc-box.type-box2-style3 input[type='radio']:hover + .label,
.rc-box.type-box2-style3 input[type='checkbox']:hover + .label {color: var(--HK_or); color: var(--Gray_666);}
.rc-box.type-box2-style3 input[type='radio']:checked + .label,
.rc-box.type-box2-style3 input[type='checkbox']:checked + .label {background-color: #F7FAFF; border-color: #F7FAFF; color: var(--HK_or); font-weight: var(--fw-b);}
.rc-box.type-box2-style3 input[type='radio']:checked + .label::after,
.rc-box.type-box2-style3 input[type='checkbox']:checked + .label::after {content: ''; display: inline-block; width: 10px; height: 10px; aspect-ratio: 1/1; border-radius: 50%; background-color: var(--HK_or); vertical-align: middle; margin: 0 2px; margin-left: 10px;}*/

/*type-box2형태의 다른 스타일3*/
.rc-box.type-box2-style3 input[type='radio'] + .label,
.rc-box.type-box2-style3 input[type='checkbox'] + .label {background-color: #DBDEE3; border-color: #DBDEE3; padding: 5px 24px; color: #fff; font-weight: var(--fw-sb);}
.rc-box.type-box2-style3 input[type='radio']:hover + .label,
.rc-box.type-box2-style3 input[type='checkbox']:hover + .label {color: var(--HK_or); color: var(--Gray_666);}
.rc-box.type-box2-style3 input[type='radio']:checked + .label,
.rc-box.type-box2-style3 input[type='checkbox']:checked + .label {background-color: var(--HK_or); border-color: var(--HK_or); color: #fff; font-weight: var(--fw-b);}
.rc-box.type-box2-style3 input[type='radio']:checked + .label::after,
.rc-box.type-box2-style3 input[type='checkbox']:checked + .label::after {content: ''; display: inline-block; width: 10px; height: 10px; aspect-ratio: 1/1; border-radius: 50%; background-color: #fff; vertical-align: middle; margin: 0 2px; margin-left: 10px;}


/*rcbox-group*/
.rcbox-group {--myR: 30px; /*--baseBG: #a2a2a2; --hoverBG: #DFE1E6; --activeBG: var(--HK_blue); --disabledBG: #F2F4F7;*/ border-radius: 30px; width: auto; height: 30px; overflow: hidden; display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; justify-items: stretch;}
.rcbox-group.type-wAuto {grid-auto-columns: auto;}
.rcbox-group .rc-box {margin-right: 0; height: 100%;}
.rcbox-group .rc-box input + .label {border-radius: 0 !important; height: 100%; min-height: unset !important;}
.rcbox-group .rc-box input:hover + .label,
.rcbox-group .rc-box input:checked + .label {border-radius: var(--myR) !important;}

.rcbox-group:has( .rc-box[class*="type-box2"]) {gap: 0 !important;}
.rcbox-group:has( .rc-box.type-box2-style2) {background-color: var(--Gray_E5); }
.rcbox-group:has( .rc-box.type-box2-style3) {background-color: #dbdee3;}


/*박스형 체크 오른쪽타입*/
.rc-box[class*="type-box1"].type-select input[type='radio'] + .label::before,
.rc-box[class*="type-box1"].type-select input[type='checkbox'] + .label::before,
.rc-box[class*="type-box1"].type-checkR input[type='radio']:checked + .label::before,
.rc-box[class*="type-box1"].type-checkR input[type='checkbox']:checked + .label::before {content: none;}

.rc-box[class*="type-box1"].type-select input[type='radio'] + .label::after,
.rc-box[class*="type-box1"].type-select input[type='checkbox'] + .label::after {/*background-image: url(../images/ico/ico-sel-1.svg);*/ --svg-color: var(--Gray_666);}
.rc-box[class*="type-box1"].type-select input[type='radio']:checked + .label::after,
.rc-box[class*="type-box1"].type-select input[type='checkbox']:checked + .label::after{--svg-color: var(--filterColor-fff);}


/*추적해야함*/
.type-depSel .rc-box:not(.dep1) {display: none;}
.type-depSel .rc-box.dep1:has( input[type='radio']:checked, input[type='checkbox']:checked) + .rc-box[class*="dep"] {display: inline-flex;}


/*checkbox, radio 리스트형식1*/
[class*="rcbox-list"] .rc-box {--size:0; margin-right: 0; display: flex; justify-content: flex-start; align-items: center; width: 100%; min-height: 40px; padding: 5px 20px; position: relative;}
[class*="rcbox-list"] .rc-box .ico-check {opacity: 0; min-width: 13px; width: 13px; height: 13px; position: absolute; right: 15px; top: 50%; margin-top: -7px;}
[class*="rcbox-list"] input[type='radio'],
[class*="rcbox-list"] input[type='checkbox'] {/*width: 0; height: 0;*/ opacity: 0;}
[class*="rcbox-list"] input[type='radio'] + .label,
[class*="rcbox-list"] input[type='checkbox'] + .label {padding-left: 0; width: 100%; display: flex; justify-content: flex-start; align-items: center;}
[class*="rcbox-list"] input[type='radio']:checked ~ .ico-check,
[class*="rcbox-list"] input[type='checkbox']:checked ~ .ico-check {opacity: 1;}
[class*="rcbox-list"] .rc-box:hover,
[class*="rcbox-list"] .rc-box:has( input[type='radio']:checked, input[type='checkbox']:checked) {background-color: #f5f5f5;}

/*check,radio 오른쪽*/
.rc-box.ta-r {flex-direction: row-reverse;}
.rc-box.ta-r .label {flex: 1 1 0; gap: 6px;}


/*on/off label 안(없을땐 속성자체 없이)*/
.toggle-switch{ position: relative; min-width: 55px; cursor: pointer; --color: var(--Gray_333); --colorP: var(--White);}
.toggle-switch input[type='radio'],
.toggle-switch input[type='checkbox']{ position: absolute; top: 0; left: 0px; width: 0; height: 0;}
.toggle-switch .label{ background-color: var(--colorP); min-width: 55px; height: 29px; font-size: 10px; color: var(--color); border: 4px solid var(--color); font-weight: var(--fw-sb); line-height: 21px; padding: 0 24px 0 10px; border-radius: 15px; vertical-align: top; position: relative; transition: padding .2s;}
.toggle-switch .label::before { width: 15px; height: 15px; background-color: var(--color); content: ''; border-radius: 50%; position: absolute; top: 3px; left: calc(100% - 18px); transition: left .2s;}
.toggle-switch [class*="txt-"] {transition: opacity .2s;}
.toggle-switch .on, .toggle-switch .off {width: max-content;}
.toggle-switch .off { display: inline-block; opacity: 1;}
.toggle-switch .on { display: none; opacity: 0;}
.toggle-switch .txtbox {font-size: 10px; color: var(--color); font-weight: var(--fw-sb); }
.toggle-switch input:checked ~ .label { padding: 0 10px 0 24px;}
.toggle-switch input:checked ~ .label::before {left: 3px;}
.toggle-switch input:checked ~ .label .off,
.toggle-switch input:checked ~ .txtbox .off { display: none; opacity: 0;}
.toggle-switch input:checked ~ .label .on,
.toggle-switch input:checked ~ .txtbox .on { display: inline-block; opacity: 1;}
.toggle-switch input ~ .txtbox .off,
.toggle-switch input ~ .label .off {color: var(--Gray_C0);}
.toggle-switch-out-txt {font-size: 12px; font-weight: var(--fw-sb); color: var(--Grey_555);}

/*on/off 밖*/
.toggle-switch:has( .label + .txtbox) {display: inline-flex; justify-content: space-between; align-items: center; min-width: unset; gap: 10px;}
.toggle-switch:has( .label + .txtbox) .txtbox {padding: 8px 7px;}
.toggle-switch:has( .label + .txtbox) .txtbox .on,
.toggle-switch:has( .label + .txtbox) .txtbox .off {font-size: var(--fs-h5); font-weight: var(--fw-m); line-height: 20px;}
.toggle-switch:has( .label + .txtbox) + .desc {font-size: 12px; line-height: 20px; font-weight: var(--fw-m);  color: var(--Grey_666);}

/*style : 배경꽉*/
.toggle-switch.style1 {}
.toggle-switch.style1 .label {background-color: var(--Gray_C0); border-color: var(--Gray_C0); color: var(--colorP); min-width: 52px; height: 27px;}
.toggle-switch.style1 .label::before {background-color: var(--colorP); top: 2px;}
.toggle-switch.style1 input:checked ~ .label {background-color: var(--color); border-color: var(--color);}
.toggle-switch.style1 input ~ .label .off,
.toggle-switch.style1 input ~ .txtbox .off {color: var(--Gray_666);}

.toggle-switch.style1:has( .label + .txtbox) {align-items: flex-end;}
.toggle-switch.style1:has( .label + .txtbox) .txtbox {padding: 0;}
.toggle-switch.style1:has( .label + .txtbox) .txtbox .on,
.toggle-switch.style1:has( .label + .txtbox) .txtbox .off {font-size: initial; line-height: initial; font-weight: initial;}

/*type-r : on/off 반대*/
.toggle-switch.type-r .label {padding: 0 10px 0 24px;}
.toggle-switch.type-r .label::before {left: 3px;}
.toggle-switch.type-r input:checked ~ .label { padding: 0 24px 0 10px;}
.toggle-switch.type-r input:checked ~ .label::before{left: calc(100% - 18px);}


::placeholder {color: #ccc; font-weight: normal;}

input:focus, select:focus, textarea:focus, button:focus {outline: none;}
input[type=text]::-ms-clear{display: none;}

/*44기준 : size-m / size-s 36 /size-b */
/*40기준 : size-m / size-s 36 /size-b */
.form-select, .form-textarea, .form-input, .inForm-box .search-box .inputbox {--myPD: 16px;}
.form-select, .form-textarea, .form-input, .form-selectDiv {--mySize: 44px;}
.form-selectDiv .selectDiv-label.form-input,
.form-selectDiv .selectDiv-label.form-select {--mySize: inherit;}

.form-select, .form-textarea, .form-input,
.inForm-box .search-box .inputbox,
.select2-container--default .select2-selection--single { outline: 0 none; width: auto; height: var(--mySize); padding: calc(var(--myPD) / 4) var(--myPD); border: 1px solid var(--Form_border); background-color: #FFF; border-radius: calc(var(--mySize) / 2); color: #333; font-size: var(--fs-body); font-weight: var(--fw-r); line-height: 1.1;}

.form-select, .form-textarea, .form-input {min-width: 210px;}
.inForm-box {--mySize: 44px; transition: width 0.3s ease;}

.inForm-box {--mySize: 44px; width: 210px;}
.inForm-box .search-box .inputbox {padding-top: calc(var(--myPD) / 4); padding-bottom: calc(var(--myPD) / 4);}

.form-select {cursor: pointer; padding-right: 40px;
	-webkit-appearance: none; -moz-appearance: none; appearance: none;
	background-color: transparent; background-image: url(../images/ico/ico-sel.png); background-repeat: no-repeat; background-position: calc(100% - var(--myPD)) 50%;
}
.form-select::-ms-expand {display: none;}
/*.form-select option:checked {color: #000; font-weight: var(--fw-m); color: #777;}
.form-select:has( :checked:not(:first-child)) {color: #777;}*/
.form-select option:checked {font-weight: var(--fw-m);}

.form-select[class*="type-box1"] {box-shadow: 1px 1px 6.2px 0 rgba(0, 0, 0, 0.08); border-radius: 8px; border-width: 0; text-align: center; background-color: #fff;}
/*.form-select[class*="type-box1"] option:checked {color: #fff;}*/


/*select2 custom*/
.select2-container--default > .selection {width: 100%;}
.select2-container--default .selection > .select2-selection--single {min-width: unset; width: 100%;}
.select2-container .select2-selection--single .select2-selection__rendered {padding-left: 0; padding-right: 0;}
.select2-container--default .select2-selection--single .select2-selection__arrow {background-color: transparent; background-image: url(../images/ico/ico-sel.png); background-repeat: no-repeat; background-size: 14px auto; background-position: center center; height: 24px; width: 24px; top: 50%; right: 14px; width: 20px; transform: translateY(-50%);}
.select2-container--default .select2-selection--single .select2-selection__arrow b {display: none;}

.select2-container--open[style*="position"][style*="absolute"] .select2-dropdown--below {border-radius: 0 0 16px 16px; overflow: hidden; padding-bottom: 10px; border-color: var(--Form_border);}
.select2-container--open[style*="position"][style*="absolute"] .select2-dropdown--below .select2-search {padding-left: 16px; padding-right: 16px;}
.select2-container--open[style*="position"][style*="absolute"] .select2-dropdown--below .select2-search .select2-search__field {padding-left: 4px; padding-right: 4px; border-color: var(--Form_border2);}
.select2-container--open[style*="position"][style*="absolute"] .select2-dropdown--below .select2-results .select2-results__option {padding-left: 16px; padding-right: 16px;}
.select2-container--default .select2-results__option {position: relative; padding-right: 30px;}
.select2-container--default .select2-results__option::after {display: block; width: 24px; height: 24px; /*background: url(../images/ico/ico-check-rc.svg) center center no-repeat;*/ background-position: center center; background-repeat: no-repeat; background-size: 40% auto; position: absolute; right: 6px; top: 50%; transform: translateY(-50%); opacity: .4;}
.select2-container--default .select2-results__option--highlighted[aria-selected] {background-color: #f5f5f5; color: #333; }
.select2-container--default .select2-results__option--highlighted[aria-selected]::after {content: '';}

.form-input.datepicker {width: 145px; letter-spacing: 0.03em; padding-left: 12px; padding-right: 38px;
	background-image: url(../images/ico/ico-cal.png); background-position: calc(100% - 16px) center; background-repeat: no-repeat; background-size: 24px auto;
}
.form-input.type-cal2 {background-image: url(../images/ico/ico-cal-1C1B1F.png);}

.form-input[class*="time"] {background-image: none !important; position: relative;}
.form-input[class*="time"]::-webkit-calendar-picker-indicator {cursor: pointer; width: 100%; height: 24px; background-image: url(../images/ico/ico-timeSel.png); background-position: calc(100% - 26px) center; background-repeat: no-repeat; position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%);}
.form-input.type-time2::-webkit-calendar-picker-indicator {background-image: url(../images/ico/ico-timeSel-1C1B1F.png);}

/*input 스타일 + text, styleX는 아래*/
/*단독 쓰일때는 없음, 상황별로 지정.form-text {}*/
.form-input.form-text {display: flex; justify-content: flex-start; align-items: center; min-width: unset; }
.form-input.form-text:not(.type2) {border-color: var(--Form_border) !important;}
.form-text.inner-type1 {align-items: flex-end; padding-top: 13px; padding-bottom: 13px; gap: 5px;}
.form-text.inner-type1 .txt,
.form-text.inner-type1 .cnt {line-height: var(--lh-body); font-weight: var(--fw-m);}
.form-text.inner-type1 .txt {font-size: var(--fs-caption);}
.form-text.inner-type1 .cnt {font-size: var(--fs-body); }

.inForm-box {position: relative; display: inline-flex; flex-direction: column;}
.inForm-box .search-list {display: none; position: absolute; left: 0;  margin-top: 5px;  max-height: 300px;}
.inForm-box.open .search-list {display: block; z-index: 1;}

.inForm-box .search-box .btn {display: inline-flex; justify-content: center; align-items: center; border-radius: calc(var(--mySize) / 2); width: var(--mySize); min-width: var(--mySize); height: var(--mySize); border: 1px solid var(--Form_border); text-indent: -999px; overflow: hidden; background-color: #fff;}
.inForm-box .search-box .btn:hover {background-color: rgba(0,0,0,.1);}

.inForm-box .search-box .btn.clear {border-color: var(--HK_blue); background-color: var(--HK_blue);}
.inForm-box .search-box .btn.clear .ico::before {--svg-color: var(--filterColor-fff);}
.inForm-box .search-box .btn.clear:hover {background-color: var(--HK_blue_over);}

.inForm-box .search-box .inputbox .btn.search {border-color: transparent;}
.inForm-box .search-box .btn.search .ico::before {--svg-color: var(--filterColor-333);}

.inForm-box .search-box .btn.clear {display: none;}
.inForm-box .search-box .inputbox {flex: 1 1 0; display: flex; justify-content: space-between; align-items: center; column-gap: var(--gab); padding-right: 10px; }
.inForm-box .search-box .inputbox > .input {height: 100%; border-radius: 14px;}
.inForm-box .search-box .inputbox > .btn {--mySizeFix: 24px; min-width: var(--mySizeFix); width: var(--mySizeFix); height: var(--mySizeFix); border-radius: calc(var(--mySizeFix) / 2);}
.inForm-box.size-xs .search-box .inputbox > .btn {--mySizeFix: 20px;}
.inForm-box .search-box .inputbox .input {flex: 1 1 0; background-color: transparent;}

.inForm-box .search-box {display: flex; justify-content: space-between; align-items: center; column-gap: var(--gab); width: 100%;}
.inForm-box .search-box .inputbox {display: inline-flex;}

/*.inForm-box.type-style1 : 분리시 참고 class*/
.inForm-box .search-box .selectDiv-label.form-select {border-color: transparent;}

.inForm-box .search-list .no-list,
.inForm-box .search-list .list-box {background-color: #fff; border: 1px solid var(--Form_border); border-radius: calc(var(--mySize) / 2); padding: 0; box-shadow: 1px 1px 6.2px 0 rgba(0, 0, 0, 0.15);}
.inForm-box .search-list .list-box {display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: flex-start; max-height: 300px; overflow: auto;}

.inForm-box .search-list .list-box .list {display: flex; justify-content: space-between; align-items: center;}
.inForm-box .search-list .no-list,
.inForm-box .search-list .list-box .list .link {flex: 1; display: flex; justify-content: flex-start; align-items: center; padding: 5px 20px; font-size: var(--fs-h5); color: #666;}
.inForm-box .search-list .list-box .list:hover {background-color: rgba(0,0,0,.05);}
.inForm-box .search-list .list-box .list .link .txt1 {flex: 1;}
.inForm-box .search-list .list-box .list .link .txt2 {font-size: var(--fs-body);}
.inForm-box .search-list .list-box .list .btn-del {font-size: 0; width: 40px; height: 30px; background: url(../images/ico/ico-del1.png) center center no-repeat;}
.inForm-box .search-list .list-box .list .btn-del:hover {background-color: rgba(0,0,0,.1);}

.inForm-box .search-list .list-box .list:first-child {margin-top: 10px;}
.inForm-box .search-list .list-box .list:last-child {margin-bottom: 10px;}
.inForm-box .search-list .no-list {padding-top: 10px; padding-bottom: 10px;}

.inForm-box .inputbox.showClear .btn.clear {display: inline-flex;}
.inForm-box .inputbox.showClear .input {padding-right: 10px !important;}

/*.inForm-box .search-list {border-radius: 30px; background-color: #FFF; box-shadow: 1px 1px 6.2px 0 rgba(0, 0, 0, 0.15);
	padding: 0; border-radius: 20px;
}*/
.inForm-box .search-list .listClose {position: absolute; top: 0; right: 0; background-color: rgba(0, 0, 0, 0.05);}

.inForm-box .result-box {display: flex; justify-content: space-between; align-items: flex-start;}
.inForm-box .result-list {}
.inForm-box .best-list {}

.form-selectDiv {position: relative; display: inline-block; --myR: calc(var(--mySize) / 2)}
.form-selectDiv .selectDiv-label .inner-hidden {display: none;}
.form-selectDiv .selectDiv-list {/*--myR: 30px;*/ border-radius: var(--myR); background-color: #FFF; box-shadow: 1px 1px 6.2px 0 rgba(0, 0, 0, 0.15); display: none; position: absolute; left: 0; z-index: 1}
.form-selectDiv .selectDiv-list .selectDiv-btn {padding: 5px 20px; white-space: nowrap; width: 100%; height: 100%;}
.form-selectDiv .selectDiv-list .selectDiv-btn.selected {background-color: #f5f5f5;}
.form-selectDiv .sel-label {display: flex; justify-content: flex-start; align-items: center; gap: inherit;}

.form-selectDiv.open .selectDiv-list { display: block; min-width: 100%; max-height: 395px; overflow-x: hidden; overflow-y: auto; overflow: visible; min-width: 210px; padding: calc(var(--mySize) / 2) 0 calc(var(--mySize) / 2) 0;}
.form-selectDiv.open .selectDiv-list::-webkit-scrollbar {width: 6px; height: 6px;  border-radius: 3px;}
.form-selectDiv.open .selectDiv-list::-webkit-scrollbar-track {background-color: #fff; border-radius: 3px;}
.form-selectDiv.open .selectDiv-list::-webkit-scrollbar-thumb {background-color: #EAECF0; border-radius: 3px;}
.form-selectDiv.open .selectDiv-list > .scroll-y {max-height: 355px; width: 100%;}
.form-selectDiv.open .selectDiv-list > .type-fix + .scroll-y {max-height: 264px;}

.form-selectDiv .selectDiv-item {position: relative; height: var(--mySize); width: 100%;}
.form-selectDiv .selectDiv-item.group-divider {border-top: 1px solid var(--Form_border);}
.form-selectDiv .selectDiv-item .inner-list { display: none; position: absolute; top: 0; min-width: max-content;}
.form-selectDiv .selectDiv-item.sub-open .inner-list { display: block; }

.form-selectDiv .inner-list { position: absolute; left: 100%; top: 0; }
.form-selectDiv .inner-list.posLeft { left: auto; right: 100%; }

.form-selectDiv .selectDiv-list .list.type-line-b > .selectDiv-item {border-bottom: 1px solid var(--Form_border2);}
.form-selectDiv .selectDiv-list .list.type-line-b > .selectDiv-item:last-child {border-bottom: 0 none;}

.form-selectDiv .selectDiv-list.type-style1 > .scroll-y {max-height: calc(100vh - 140px); min-height: 150px}
.form-selectDiv .selectDiv-list.type-style1 { max-height: none; width: 210px; height: auto; padding: 20px 0 15px 0; flex-direction: column; top: 42px; left: auto; right: -25px;}
.form-selectDiv .selectDiv-list.type-style1 .list-tit {color: #32343A; font-size: var(--fs-h4); font-weight: var(--fw-sb); line-height: 28px; line-height: var(--lh-h4); letter-spacing: -0.09px; padding-bottom: 15px;}
.form-selectDiv .selectDiv-list.type-style1 .selectDiv-item.only-txt{ min-height: 40px; padding: 5px 20px; display: flex; align-items: center;}
.form-selectDiv .selectDiv-list.type-style1 .selectDiv-item.only-txt p{ font-weight: var(--fw-r); font-size: var(--fs-caption); color: #A2A2A2; line-height: 1.2;}

/*.form-selectDiv.type-filter .rc-box input[type='radio'] + .label,
.form-selectDiv.type-filter .rc-box input[type='checkbox'] + .label {padding-left: 31px;}*/
.form-selectDiv.type-filter .rc-box {gap: 10px;}
.form-selectDiv.type-filter .selectDiv-list {min-width: 210px; padding: 20px 0;}
.form-selectDiv.type-filter .selectDiv-list .list {display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 18px;}
.form-selectDiv.type-filter .selectDiv-list .item {text-align: left; width: 100%; padding: 0 20px;}

/*miniPop*/
.miniPop-wrap,
[class*="miniPop-wrap-"]:not(.miniPop-wrap-mo) {--myR: 30px;
	border-radius: var(--myR); background-color: #FFF;box-shadow: 1px 1px 6.2px 0 rgba(0, 0, 0, 0.15); position: absolute; left: 0; z-index: 3; margin-top: 5px;}
.miniPop-wrap.open > .miniPop,
[class*="miniPop-wrap-"]:not(.miniPop-wrap-mo).open > .miniPop {background-color: #fff; display: block; min-width: 100%; max-height: 595px; overflow-x: hidden; overflow-y: auto; overflow: visible; min-width: 210px; padding: 20px 0; border-radius: inherit;}
[class*="miniPop-wrap-"]:not(.miniPop-wrap-mo):not(.open) {display: none;}
/*.miniPop-wrap.open > .miniPop:has( .fg-item-group),
[class*="miniPop-wrap-"]:not(.miniPop-wrap-mo).open > .miniPop:has( .fg-item-group) {max-height: 425px;}*/

.miniPop-wrap.open > .miniPop > ul,
.miniPop-wrap.open > .miniPop > div,
[class*="miniPop-wrap-"]:not(.miniPop-wrap-mo).open > .miniPop > ul,
[class*="miniPop-wrap-"]:not(.miniPop-wrap-mo).open > .miniPop > div {height: 100%; overflow-y: auto; max-height: calc(100vh - 340px);}

.miniPop-wrap.open > .miniPop > ul.flex-col,
.miniPop-wrap.open > .miniPop > div.flex-col,
[class*="miniPop-wrap-"]:not(.miniPop-wrap-mo).open > .miniPop > ul.flex-col,
[class*="miniPop-wrap-"]:not(.miniPop-wrap-mo).open > .miniPop > div.flex-col { flex-wrap: nowrap; justify-content: flex-start;}

/*data-mini-xxx + .miniPop-wrap / -*/
[data-mini-id] {left: 50%; top: 50%; display: none;}
[data-mini-id].open {display: block;}

.miniPop-wrap.type-sizeS1.open,
[class*="miniPop-wrap-"]:not(.miniPop-wrap-mo).type-sizeS1.open { width: 400px; max-width: calc(100% - (var(--pdLR) * 2));}
.miniPop-wrap.type-sizeS1.open > .miniPop,
[class*="miniPop-wrap-"]:not(.miniPop-wrap-mo).type-sizeS1.open > .miniPop {min-width: unset; width: 100%;}

.form-textarea {/*resize: none; border: 1px solid #bbb; width: 100%; padding: 8px 21px; box-sizing: border-box; resize: none; color: #777; font-size: var(--fs-body); line-height: 20px; line-height: var(--lh-body); font-weight: var(--fw-m); border-radius: 2px; min-height: 56px; height: auto;*/
	resize: none; border-radius: 8px; min-height: 56px; height: auto;
}
.form-textarea:not(.flex-1, .flex1) {width: 100%;}

div.form-input {display: inline-flex; align-items: center; justify-content: flex-start; }
div.form-input.disabled {background-color: rgba(0,0,0,.05);}

div.form-input:has( > .input, > .form-box > .input) {padding-top: 4px; padding-bottom: 4px;}
div.form-input:has( > .input, > .form-box > .input) > .input,
div.form-input:has( > .input, > .form-box > .input) > .form-box,
div.form-input:has( > .input, > .form-box > .input) > .form-box .input {height: 100%;}
div.form-input:has( > .input) .btn-ix.del .ico::before {--svg-color: var(--filterColor-333);}
div.form-input > .input,
div.form-input:has( > .input, > .form-box > .input) > .form-box .input {height: 100%; background-color: transparent; flex: 1 1 0;}

[contentEditable=true]:empty:not(:focus):before{content:attr(data-text); color: #ccc; border-radius: 2px;}

div.form-input:has( > .input:hover, > .form-box > .input:hover),
.select2-hidden-accessible:not(.form-select) + .select2-container:hover .select2-selection--single,
.form-input:not(div, p, span):hover,
.form-select:hover,
.form-textarea:hover,
.inForm-box.hover .inputbox,
.inForm-box.hover .search-list {border-color: #444;}
div.form-input:has( > .input:focus, > .form-box > .input:focus),
.form-input:not(div, p, span):focus,
.form-select:focus,
.form-textarea:focus,
.inForm-box.focus .inputbox,
.inForm-box.focus .search-list {border-color: #f36f21; border-color: #07F;}

.form-select[disabled], .form-select[readonly],
.form-input[disabled], .form-input[readonly],
.form-textarea[disabled], .form-textarea[readonly] {opacity: 1; border-color: var(--Form_dis_border) !important;}

.ui-datepicker.ui-widget-content {z-index: 15 !important;}
.ui-timepicker .ui-state-default {padding: 3px;}

/*style1 / style1-sel : 선택한곳만 style1*/
.form-select.style1-sel:has(option:checked:not(.labeltype, [value=""])),
.form-text.style1,
.form-select.style1:has(option:checked:not(.labeltype, [value=""])),
.form-textarea.style1,
.form-input.style1, .inForm-box.style1 .search-box .inputbox {border-color: var(--HK_blue); color: var(--HK_blue);}

.form-select.style1:has(option:checked:not(.labeltype, [value=""])),
.form-select.style1-sel:has(option:checked:not(.labeltype, [value=""])) {background-image: url(../images/ico/ico-sel-style1.png);}

.form-select[class*="style1"][disabled], .form-select[class*="style1"][readonly],
.form-input[class*="style1"][disabled], .form-input[class*="style1"][readonly],
.form-textarea[class*="style1"][disabled], .form-textarea[class*="style1"][readonly] {border-color: var(--Form_border) !important; color: var(--Gray_666) !important;}

.form-select[class*="style1"][disabled], .form-select[class*="style1"][readonly] {background-image: url(../images/ico/ico-sel.png) !important;}

/*.form-select.style1-sel:not([disabled], [readonly]):has(option:checked.labeltype)*/
.form-select.style1-sel[disabled], .form-select.style1-sel[readonly] {border-color: var(--Form_dis_border) !important; background-image: url(../images/ico/ico-sel-dis.png) !important; color: var(--Form_dis_color) !important;}

/*.form-select.type-box1-style1:not([disabled], [readonly]):has(option:checked:not(.labeltype)) */
.form-select.type-box1-style1:not([disabled], [readonly]):has(option:checked:not(.labeltype, [value=""])) {background-color: var(--HK_blue); color: var(--White); background-image: url(../images/ico/ico-sel-w.png);}


/*style2*/
.form-select.style2::placeholder,
.form-textarea.style2::placeholder,
.form-input.style2::placeholder,
.inForm-box.style2 .search-box .inputbox::placeholder {color: #aaa;}
.inForm-box.style2 .search-box .inputbox::-webkit-input-placeholder {color: #aaa;}
.inForm-box.style2 .search-box .inputbox::-moz-placeholder {color: #aaa;}
.inForm-box.style2 .search-box .inputbox:-ms-input-placeholder {color: #aaa;}
.inForm-box.style2 .search-box .inputbox::-ms-input-placeholder {color: #aaa;}

.form-text[class*="style2"],
.form-select[class*="style2"], .form-textarea[class*="style2"],
.form-input[class*="style2"], .inForm-box[class*="style2"] .search-box .inputbox {background-color: #f5f5f5;}
.form-textarea[class*="style2"] {min-height: 170px; padding: 14px 20px;}

.form-input.type-r8, .form-select.type-r8, .form-textarea.type-r8, .inForm-box.style2 .search-box .inputbox,
[class*="style2-"][class*="-r8"] {border-radius: 8px;}

.form-select[class*="styleT"] {border: 0 none; min-width: 140px; color: #A2A2A2;}

/*or*/
.inForm-box.style3 .search-box .inputbox {border-color: var(--HK_or);}
.inForm-box.style3 .search-box .btn.clear {background-color: var(--HK_or); border-color: var(--HK_or);}

/*etc*/
.pdf-prev-btn, .pdf-next-btn {--mySize: 50px; width: var(--mySize) !important; height: var(--mySize); background-color: rgba(0, 0, 0, 0.03); border-radius: calc(var(--mySize) / 2) !important; font-size: 0; text-indent: -999px; overflow: hidden; display: flex; justify-content: center; align-items: center;
	position: absolute; top: 50%; margin-top: calc(-1 * (var(--mySize) / 2)) !important; z-index: 100;
}
.pdf-prev-btn {left: var(--pdLR) !important;}
.pdf-next-btn {right: var(--pdLR) !important;}
.pdf-prev-btn::before,
.pdf-next-btn::before {content: ''; --svg-color: var(--filterColor-333);}
div:has( > .pdf-prev-btn, > .pdf-next-btn) {position: relative;}

/*ico*/

/*촉이 있는 방향 right(next) 기본 : 관련 클래스 없이 사용*/
.pdf-prev-btn,
i.prev, .btn-ix.prev i, i.back, .btn-ix.back > i,
.paging .btn-pprev::before, .paging  .btn-prev::before {transform: rotate(180deg);}

.btn-filter.on .ico.ico-arrow,
i.up, .btn-ix.up i {transform: rotate(-90deg);}

.btn-filter .ico.ico-arrow,
i.down, .btn-ix.down i {transform: rotate(90deg);}

i.topRight, .btn-ix.topRight i {transform: rotate(-45deg);}
i.bottomRight, .btn-ix.bottomRight i {transform: rotate(45deg);}

i.topLeft, .btn-ix.topLeft i {transform: rotate(-135deg);}
i.bottomLeft, .btn-ix.bottomLeft i {transform: rotate(135deg);}

/*컨텐츠 아이콘*/
/*svg.css에서 url 관리 기타 설정만 여기*/
.ico.ico-clear::before,
.ico.ico-close::before,
.ico.ico-delete-1::before {background-size: 38% auto !important;}
.ico.ico-delete-2::before {background-size: 38% auto !important;}

.ico.ico-search-check::before {background-size: 73% auto !important;}

.ico.ico-new::before {--svg-color: var(--filterColor-EC6608);}

.ico[class*="ico-error"]::before {--svg-color: var(--filterColor-ccc);}
.ico[class*="ico-error"]::after {--svg-color: var(--filterColor-F08539);
    width: 40%; height: 40%; background-size: 100% auto;
    position: absolute; top: auto; left: auto; right: 0; bottom: 0;}
.ico.ico-error-img::before { background-position: calc(50% - 1px) calc(50% - 2px);}
.error-file::after,
.ico.ico-error-file::after {right: 3px; bottom: 3px;}

/*이미지 없는데 없다는 표시 없을때 대비용 :
.img-box:not(:has(>img)):not(:has(>[class*="ico-error-"], >.ico-empty))
.item-img:not(:has(>img)):not(:has(>[class*="ico-error-"], >.ico-empty))
*/
.ico.ico-empty {height: 100%; max-height: 80px; width: auto;} /*.img-box 안에 img, file 없을때 기준*/
.ico.ico-empty::before,
.img-box:not(:has(>img)):not(:has(>[class*="ico-error-"], >.ico-empty))::before,
.item-img:not(:has(>img)):not(:has(>[class*="ico-error-"], >.ico-empty))::before {--svg-color: var(--filterColor-fff); --svg-color: var(--filterColor-ccc); background-size: 100% auto;}

.img-box:has( > .ico-empty),
.img-box:not(:has(>img)):not(:has(>[class*="ico-error-"], >.ico-empty)),
.item-img:not(:has(>img)):not(:has(>[class*="ico-error-"], >.ico-empty)) {display: flex; align-items: center; justify-content: center; flex-direction: column;}
.img-box:not(:has(>img)):not(:has(>[class*="ico-error-"], >.ico-empty)),
.item-img:not(:has(>img)):not(:has(>[class*="ico-error-"], >.ico-empty)) {border: 1px solid var(--Form_border2); background: #f5f5f5;}

.img-box:not(:has(>img)):not(:has(>[class*="ico-error-"], >.ico-empty))::before,
.item-img:not(:has(>img)):not(:has(>[class*="ico-error-"], >.ico-empty))::before {content: ''; display: block; height: 100%; max-height: 100px; width: auto; aspect-ratio: 1 / 1; object-fit: cover;}

.imgFile-item.fix-imgitem .item-img#cropBoxSize:not(:has(>img))::before {position: absolute; --svg-color: var(--filterColor-C0C0C0); content: none;}/*크롭영역에서는 이미지없음 표시 삭제*/

.img-box:has( > img[src*="temp-img.png"]) {background-color: #f5f5f5 !important;}
.img-box:has( > img[src*="temp-img.png"])::before {background-size: auto 80px; --svg-color: var(--filterColor-ccc);}
.img-box:has( > img[src*="temp-img.png"]) > img {display: none;}

.sort .ico, .ico-sort {border-radius: 50%; overflow: hidden;}
.sort .ico::before, .ico-sort::before {--svg-color: var(--filterColor-333) !important; z-index: 1; background-size: 89% auto;}
.sort.down .ico::after {right: 46%; top: 18%;}

/*bi*/
/*svg.css에서 url 관리 기타 설정만 여기, size는 svg.css에서*/
/*.btn-ix .ico[class*="ico-bi"] {aspect-ratio: unset; max-height: 80%; max-width: 80%;}
.btn-ix .ico[class*="ico-bi"]::before {background-size: auto 80%;}*/
.ico[class*="ico-bi"] {object-fit: contain; --myISize: unset; aspect-ratio: unset; max-width: 100%;}
.ico[class*="ico-bi"]::before {background-size: auto 100%;}

/*svg, img 등록형태*/
.ico.ico-bi {--biSize: 60%; width: var(--biSize); height: var(--biSize); max-width: var(--biSize); max-height: var(--biSize);}
.ico.ico-bi::before {--svg: var(--svgUrl); background-size: contain;}

/*ico-bi-name 제공형태*/
.ico.ico-bi-Ventus {width: 122.7px; height: 16.07px; aspect-ratio: 122.7 / 16.07}
.ico.ico-bi-iON {width: 56.64px; height: 22.21px; aspect-ratio: 56.64 / 22.21;}
.ico.ico-bi-Dynapro {width: 176px; height: 20px; aspect-ratio: 176 / 20;}
.ico.ico-bi-Kinergy {width: 128px; height: 24px; aspect-ratio: 128 / 24;}
.ico.ico-bi-Weatherflex {width: 172px; height: 16px; aspect-ratio: 172 / 16;}
.ico.ico-bi-Wintericept {width: 174px; height: 22px; aspect-ratio: 174 / 22;}
.ico.ico-bi-Winteripike {width: 176px; height: 18px; aspect-ratio: 176 / 18;}
.ico.ico-bi-SMART {width: 112px; height: 16px; aspect-ratio: 112 / 16;}
.ico.ico-bi-eSMART {width: 139px; height: 17px; aspect-ratio: 139 / 17;}
.ico.ico-bi-VANTRA {width: 122px; height: 16px; aspect-ratio: 122 / 16;}
.ico.ico-bi-eVANTRA {width: 148px; height: 17px; aspect-ratio: 148 / 17;}
.ico.ico-bi-Circuit {width: 75.76px; height: 19.2px; aspect-ratio: 75.76 / 19.2;}
.ico.ico-bi-Rally {width: 85.88px; height: 23.69px; aspect-ratio: 85.88 / 23.69;}
.ico.ico-bi-SemiRacing {width: 142.8px; height: 24.26px; aspect-ratio: 142.8 / 24.26;}
.ico.ico-bi-IFIT {width: 81px; height: 17px; aspect-ratio: 81 / 17;}
.ico.ico-bi-GFIT {width: 93px; height: 17px; aspect-ratio:  93/ 17;}
.ico.ico-bi-SFIT {width: 95px; height: 17px; aspect-ratio: 95 / 17;}
.ico.ico-bi-XFIT {width: 105px; height: 16px; aspect-ratio: 105 / 16;}
.ico.ico-bi-ZFIT {width: 96px; height: 17px; aspect-ratio: 96 / 17;}
.ico.ico-bi-LF {width: 50px; height: 17px; aspect-ratio: 50 / 17;}
.ico.ico-bi-LR {width: 52px; height: 17px; aspect-ratio: 52 / 17;}
.ico.ico-bi-LZ {width: 52px; height: 17px; aspect-ratio: 52 / 17;}
.ico.ico-bi-GT {width: 49px; height: 17px; aspect-ratio: 49 / 17;}
.ico.ico-bi-Touring {width: 118px; height: 17px; aspect-ratio: 118 / 17;}
.ico.ico-bi-AllWeather {width: 168px; height: 17px; aspect-ratio: 168 / 17;}
.ico.ico-bi-GTAS {width: 94px; height: 17px; aspect-ratio: 94 / 17;}
.ico.ico-bi-TouringAS {width: 168px; height: 17px; aspect-ratio: 168 / 17;}
.ico.ico-bi-SUV {width: 78px; height: 17px; aspect-ratio: 78 / 17;}
.ico.ico-bi-WinterGT {width: 149px; height: 17px; aspect-ratio: 149 / 17;}

/*ico color*/
.ico.c333::before {--svg-color: var(--filterColor-333);}
.ico.cFirst::before {--svg-color: var(--filterColor-EC6608);}

/*
.btn-ix : 기본 셋팅
.btn-ix.downtxt : 상하 : .btn-ix == .btn-ix.downtxt .ico
.btn-ix.typeX : 타입별 버튼
.btn-ix.nobtn : 버튼스타일이용할 div,span
*/
.btn-ix {--mySize: 24px; --myR: 8px; --myFC: var(--Gray_333); --myFCOn: #fff; --myBC: transparent; --myBG: transparent; --myBGOver: rgba(0, 0, 0, 0.1); --myBGOn: rgba(0, 0, 0, 0.3); --myBGOnOver: rgba(0, 0, 0, 0.6);
	display: inline-flex; justify-content: center; align-items: center;
    transition: .2s;
}
.btn-ix:not([class*="type"], .downtxt) {padding: 4px;}

.btn-ix:not(.downtxt) {width: auto; height: auto; min-width: var(--mySize); min-height: var(--mySize); column-gap: calc(var(--gab) * 2);}

.btn-ix:not(.downtxt),
.btn-ix.downtxt .ico {background-color: var(--myBG); border: 1px solid var(--myBC); border-radius: var(--myR);}
.btn-ix.downtxt .txt {text-align: center;}

.btn-ix .ico {font-size: 0;}
.btn-ix:not(.downtxt) .ico {}
.btn-ix.downtxt .ico {width: var(--mySize);}

.btn-ix .txt {min-width: var(--mySize); font-size: var(--fs-body); font-weight: var(--fw-m); line-height: var(--lh-body); color: var(--myFC); white-space: nowrap; text-align: center;}
.btn-ix .txt.type1 {font-size: var(--fs-h5); line-height: var(--lh-body); font-weight: var(--fw-sb);}
.btn-ix .txt.cnt {min-width: 22px; height: 22px; padding: 1px 4px; text-align: center; border-radius: 11px; background-color: var(--HK_or); font-size: 12px; line-height: 20px; font-weight: var(--fw-sb); color: #fff;}
.btn-ix .txt.cnt-style1 {font-size: inherit; line-height: inherit; color: inherit; font-weight: inherit;}
.btn-ix .txt .cnt {color: var(--HK_or);}

.btn-ix:has( .txt) .ico[class*="ico-arrow"]::before {background-size: 66% auto;}
.btn-ix .txt.size-minw1 {min-width: 176px !important;}

/*.btn-ix - downtxt*/
.btn-ix:not(.downtxt) {}
.btn-ix:not(.downtxt) .txt {color: var(--myFC);}
.btn-ix:not(.downtxt):hover .txt,
.btn-ix:not(.downtxt).on .txt {color: var(--myFCOn);}

/*.btn-ix + downtxt 만*/
.btn-ix.downtxt {padding: 0; flex-direction: column; justify-content: flex-start; align-items: center; gap: calc(var(--gab) * 2);}
.btn-ix.downtxt .txt {}
.btn-ix.downtxt .ico::before {background-size: 50% auto !important;}
.btn-ix.downtxt.on .txt {color: var(--myFC);}

/*hover, on*/
.btn-ix:not(.downtxt, [class*="type"]):hover .txt {color: var(--myFC);}
.btn-ix:not(.downtxt, [class*="type"]).on .txt,
.btn-ix:not(.downtxt, [class*="type"]).on:hover .txt {color: var(--myFCOn);}
.btn-ix:not(.downtxt):hover, .btn-ix.downtxt:hover .ico {background-color: var(--myBGOver);}
.btn-ix:not(.downtxt).on:hover, .btn-ix.downtxt.on:hover .ico,
.btn-ix:not(.downtxt).ontype:hover, .btn-ix.downtxt.ontype:hover .ico {background-color: var(--myBGOnOver);}
.btn-ix:not(.downtxt).on, .btn-ix.downtxt.on .ico,
.btn-ix:not(.downtxt).ontype, .btn-ix.downtxt.ontype .ico {background-color: var(--myBGOn); border-color: var(--myBGOn);}

/*.btn-ix + downtxt - typeX*/
.btn-ix.downtxt:not([class*="type"]) {--myFC: #49454f; --myFC: #333; --myBGOn: var(--HK_or); --myBGOnOver: var(--HK_or_over);}
.btn-ix.downtxt:not([class*="type"]) .ico {box-shadow: 1px 1px 6.2px rgba(0,0,0,.15); border-radius: 8px;}
.btn-ix.downtxt:not([class*="type"]) .txt,
.btn-ix.downtxt:not([class*="type"]).on .txt {color: var(--myFC);}

/*.btn-ix + typeX - downtxt*/
.btn-ix[class*="type"]:not(.downtxt) {--myR: 22px; --myPD: 4px;}
.btn-ix[class*="type"]:not(.downtxt):not([class*="size-"]) {--mySize: 44px;}
.btn-ix[class*="type"]:not(.downtxt):has( > .txt) {padding: 4px 24px; padding: var(--myPD) calc(var(--myPD) * 6);}
.btn-ix[class*="type"]:not(.downtxt) .txt {}

.btn-ix[class*="type"] {--myR: 22px; --myPD: 4px; }
.btn-ix[class*="type"]:not([class*="size-"]) {--mySize: 44px;}
.btn-ix[class*="type"]:has( > .txt) {padding: 4px 24px; padding: var(--myPD) calc(var(--myPD) * 6);}

.btn-ix.type1 {--myBC: var(--Form_border); --myBG: #fff; --myBGOver: #f5f5f5; --myBGOn: var(--HK_or); --myBGOnOver: var(--HK_or_over);}
.btn-ix.type1:not(.on):hover .txt {color: var(--myFC);}

.btn-ix.type2 {--myFC: #fff; --myFCOn: #fff; --myBC: var(--Gray_333); --myBG: #333; --myBGOver: #000; --myBGOn: #000; --myBGOnOver: #333;}
.form-input.form-text.type2 {border-color: #333; background-color: #333; color: #fff;}
.btn-ix.type2.downtxt .txt {color: var(--myBC);}

.btn-ix.type3 {--myFC: var(--HK_blue); --myFCOn: #fff; --myBC: #f5f5f5; --myBG: #f5f5f5; --myBGOver: var(--HK_blue); --myBGOn: var(--HK_blue); --myBGOnOver: var(--HK_blue_over);}
.btn-ix.type3:has( .ico[class*="ico-keep"]) {--myBGOver: rgba(0, 0, 0, 0.4); --myBGOn: var(--myBG);  --myBGOnOver: var(--myBGOver);}
.btn-ix.type3.ontype:not(.downtxt) .txt {color: var(--myFCOn);}

.btn-ix.type4 {--myFC: #fff; --myFCOn: #fff; --myBC: var(--HK_or); --myBG: var(--HK_or); --myBGOver: var(--HK_or_over); --myBGOn: var(--HK_or_over); --myBGOnOver: var(--HK_or);}
.btn-ix.type4.downtxt .txt {color: var(--HK_or);}

.btn-ix.type5 {--myFC: var(--HK_blue); --myFCOn: var(--HK_blue); --myBC: var(--Form_border); --myBG: #fff; --myBGOver: #f5f5f5; --myBGOn:#f5f5f5; --myBGOnOver: #ebebeb;}

.btn-ix.type6 {--myFC: #fff; --myFCOn: #fff; --myBC: #0B7712; --myBG: #0B7712; --myBGOver: #015306; --myBGOn: #015306; --myBGOnOver: #0B7712;}
.btn-ix.type6.downtxt .txt {color: #0B7712;}

/*btn-ix icon color : white*/
/*.btn-ix:not([class*="type"], .downtxt, .nobtn).on .ico::before,*/
.btn-ix.on:not(.type5):hover .ico::before,
.btn-filter.on .ico::before,
.form-selectDiv.open .btn-filter .ico::before,
.btn-ix.downtxt.on:not([class*="type"]) .ico::before,
.btn-ix.type1.on .ico::before,
.btn-ix.type2 .ico::before,
.btn-ix.type3:hover .ico::before,
.btn-ix.type3.ontype .ico::before,
.btn-ix.type3.on .ico:not([class*="ico-keep"])::before,
.btn-ix.type3.on:hover .ico[class*="ico-keep"]::before,
.btn-ix.type4 .ico::before,
.btn-ix.type6 .ico::before {--svg-color: var(--filterColor-fff);}
.btn-ix.type2 .ico-notice2::after {background-color: #fff;}

/*btn-ix.on icon color : #0077FF var(--HK_blue) 블루*/
/*.btn-ix.downtxt:not([type*="type"]).on .ico::before,*/
.btn-ix.type5 .ico::before,
.btn-ix.type3:not(.downtxt):not(:hover, .on, .ontype) .ico:not([class*="ico-keep"])::before {--svg-color: var(--filterColor-0077FF);}

/*btn-ix.on icon color : #EC6608 hk 오렌지*/
.btn-ix.type3.on .ico[class*="ico-keep"]::before {--svg-color: var(--filterColor-EC6608);}

/*btn-ix.on icon color : #000*/
/*.btn-ix.type2.downtxt .ico::before {--svg-color: var(--filterColor-000);}*/


.size-xs {--mySize: 24px !important; --myR: 12px !important;}
.size-xs .btn-ix, .btn-ix.size-xs {padding: 2px; padding-top: 1px !important; padding-bottom: 1px !important;}
.size-xs .btn-ix .ico, .btn-ix.size-xs .ico {width: calc(var(--mySize) * .78); border-radius: 8px;}

.size-ss {--mySize: 30px !important; --myR: 15px !important;}
.size-ss.btn-ix[class*="type"]:has( > .txt),
.size-ss .btn-ix[class*="type"]:has( > .txt) {padding-left: calc(var(--myPD) * 2); padding-right: calc(var(--myPD) * 2);}

.size-s {--mySize: 36px !important; --myR: 18px !important;}

.size-sm {--mySize: 40px !important; --myR: 20px !important;}
/*.size-sm,
.size-sm .btn-ix,
.size-sm .form-select,
.size-sm .form-input,
.size-sm .inForm-box .search-box .inputbox,
.size-sm .select2-container--default .select2-selection--single {--mySize: 40px !important; --myR: 20px !important;}*/

/*44px 기준*/
.size-base {--mySize: 44px !important; --myR: 22px !important;}

.size-m {--mySize: 48px !important; --myR: 24px !important;}

.size-b {--mySize: 72px !important; --myR: 36px !important;}
.size-b .btn-ix .ico, .btn-ix.size-b .ico { width: calc(var(--mySize) * .8335);}
.size-b .btn-ix .ico::before, .btn-ix.size-b .ico::before {background-size: 66% auto;}

/* 1 : 1*/
.btn-ix:not(:has( .txt)) {aspect-ratio: 1 / 1;}


.btn-ix.type-r8,
.inner-box:has( > [class*="-r8"]):not(:has( > .btn-ix[class*=" type"])) + .inner-box > .btn-ix:not([class*=" type"]),
.form-select[class*="-r8"] + .btn-ix:not([class*=" type"]),
.form-input[class*="-r8"] + .btn-ix:not([class*=" type"]) {border-radius: 8px;}

/* 게시 결제 순 요청전 > 결재 중 ing > 결재 완료 cfm(1st > 2nd) > 결재 완료 rej(반려/부결) > 결재 완료 게시 end */
.st-cfm .ico, .st-rej .ico, .st-fin .ico {filter: var(--filterColor-fff) !important;}

.st-step {--myGap: 1px; flex-direction: column; gap: 1px;}
.st-step > .step {--myGap: 2px; display: flex; justify-content: center; align-items: center; width: 100%; gap: var(--myGap);}
.st-step > .step > i {--mySize: 6px; min-width: var(--mySize); width: var(--mySize); height: var(--mySize); background-color: var(--White); border-radius: 50%;}
.st-step[data-step="1"] > .step > i:first-child,
.st-step[data-step="2"] > .step > i:nth-child(-n+2),
.st-step[data-step="3"] > .step > i:nth-child(-n+3),
.st-step[data-step="4"] > .step > i:nth-child(-n+4) {background-color: var(--HK_blue);}

.st-base {background-color: var(--Gray_F5) !important; border-color: var(--Gray_F5) !important;}
.st-base:not(div, span, p):hover {background-color: var(--HK_blue) !important; border-color: var(--HK_blue) !important;}
.st-base .ico {filter: var(--filter-HK_blue) !important;}
.st-base:not(div, span, p):hover .ico {filter: var(--filterColor-fff) !important;}
.st-cfm {background-color: var(--HK_Green) !important; border-color: var(--HK_Green) !important;}
.st-cfm:not(div, span, p):hover {background-color: var(--HK_Green_over) !important; border-color: var(--HK_Green_over) !important;}
.st-rej {background-color: var(--HK_red) !important; border-color: var(--HK_red) !important;}
.st-rej:not(div, span, p):hover {background-color: var(--HK_red_over) !important; border-color: var(--HK_red_over) !important;}
.accItem-head .st-rej {background-color: var(--HK_red2) !important; border-color: var(--HK_red2) !important;}
.accItem-head .st-rej:not(div, span, p):hover {background-color: var(--HK_red2_over) !important; border-color: var(--HK_red2_over) !important;}
.st-fin {background-color: var(--HK_blue) !important; border-color: var(--HK_blue) !important;}
.st-fin:not(div, span, p):hover {background-color: var(--HK_blue_over) !important; border-color: var(--HK_blue_over) !important;}


.btn-filter {display: flex; padding: 10px 8px 10px 10px; align-items: center; gap: 4px; min-width: 40px; min-height: 40px; border-radius: 8px; background-color: #FFF; box-shadow: 1px 1px 6.2px 0 rgba(0, 0, 0, 0.08); }
.btn-filter:has( > .txt) {padding-left: 10px; padding-right: 10px;}
.btn-filter .txt {min-width: 28px; font-size: 12px; line-height: 16px;}
.btn-filter .ico {width: 18px; min-width: 18px; height: 18px; border-radius: 4px;}
.btn-filter .ico[class*="ico-arrow"] {width: 8px; min-width: 8px; height: 8px;}
.filter-area .btn-filter .txt {max-width: 110px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}

.btn-filter:hover,
.form-selectDiv .btn-filter:hover {background-color: #F5F5F5;}

.btn-filter.on,
.form-selectDiv.open .btn-filter {background-color: var(--HK_or) !important; border-color: var(--HK_or) !important;}
.btn-filter.on .txt,
.form-selectDiv.open .btn-filter .txt {color: #fff;}

.btn-filter .ico.mode-selectd {display: none;}
.btn-filter.on .ico.mode-selectd {display: inline-flex;}

.filter-main .btn-filter {min-width: 86px; min-height: 32px; border-radius: 8px; padding: 6px 6px 6px 10px; margin-bottom: 6px;}

.btn-ix[disabled], .btn-ix[readonly] {opacity: 1; border-color: #C0C0C0 !important; background-color: #C0C0C0 !important;}
.btn-ix[disabled] .txt, .btn-ix[readonly] .txt {color: #fff !important;}

.btn-ix.type1[disabled], .btn-ix.type1[readonly],
.btn-ix.type5[disabled], .btn-ix.type5[readonly] {border-color: #EBEBEB !important; background-color: #fff !important;}
.btn-ix[disabled] .ico::before, .btn-ix[readonly] .ico::before {--svg-color: var(--filterColor-fff) !important}
.btn-ix.type1[disabled] .txt, .btn-ix.type1[readonly] .txt,
.btn-ix.type5[disabled] .txt, .btn-ix.type5[readonly] .txt {color: #C0C0C0 !important;}
.btn-ix.type1[disabled] .ico::before, .btn-ix.type1[readonly] .ico::before,
.btn-ix.type5[disabled] .ico::before, .btn-ix.type5[readonly] .ico::before {--svg-color: var(--filterColor-C0C0C0) !important}

/*btn on/off에 따라 .txt, ico 각각 보임*/
.btn-ix.type-showChange,
.btn-ix.type-showChange:has( > .txt) {padding: 5px 10px !important;}
.btn-ix.type-showChange .ico,
.btn-ix.type-showChange.on .txt,
.btn-ix.type-showChange[style*="background-color"] .txt {display: none;}
.btn-ix.type-showChange .txt,
.btn-ix.type-showChange.on .ico,
.btn-ix.type-showChange[style*="background-color"] .ico {display: flex; text-align: center; justify-content: center;}
.btn-ix.type-showChange[style*="background-color"] .ico-bi::before {content: none;}
.btn-ix.type-showChange[style*="background-color"] .ico-bi img {max-width: 100%; max-height: 100%;}

/*박스형 타입 1*/
.btn-ix.type-box1 {border-radius: 6px; border-color: var(--Form_border2); background-color: #FFF;}
.btn-ix.type-box1 .txt {font-size: var(--fs-h5); line-height: var(--ls-h5);}

.btn-ix.type-box1:not(.on):hover {border-color: var(--myBGOn); background-color: #fff;}
.btn-ix.type-box1:not(.on):hover .txt {color: inherit;}
.btn-ix.type-box1.on {background-color: var(--HK_or); border-color: var(--Form_border2);}
.btn-ix.type-box1.on .ico::before {--svg-color: var(--filterColor-fff);}

.btn-ix.type-box1.on:has( [class*="-Ventus"]) {background-color: var(--HK_or);}
.btn-ix.type-box1.on:has( [class*="-iON"]) {background-color: #00B3C4;}
.btn-ix.type-box1.on:has( [class*="-Dynapro"]) {background-color: #CCA414;}
.btn-ix.type-box1.on:has( [class*="-Kinergy"]) {background-color: #70B538;}
.btn-ix.type-box1.on:has( [class*="-Weatherflex"]) {background-color: #14903B;}
.btn-ix.type-box1.on:has( [class*="-Winter"]) {background-color: #0075C9;}
.btn-ix.type-box1.on:has( [class*="-SMART"]),
.btn-ix.type-box1.on:has( [class*="-VANTRA"]) {background-color: #102C49;}
.btn-ix.type-box1.on:has( [class*="-eSMART"]),
.btn-ix.type-box1.on:has( [class*="-eVANTRA"]) {background-color: #00BED5;}
.btn-ix.type-box1.on:has( [class*="-Circuit"]),
.btn-ix.type-box1.on:has( [class*="-Rally"]),
.btn-ix.type-box1.on:has( [class*="-SemiRacing"]) {background-color: #333333;}
.brand-Laufenn .btn-ix.type-box1.on:has( [class*="ico-bi-"]) {background-color: #44187F;}
.brand-Optimo .btn-ix.type-box1.on:has( [class*="ico-bi-"]) {background-color: #003DA6;}

.btn-ix.email {column-gap: 12px; padding-left: 0; padding-right: 0;}
.btn-ix.email .txt {text-decoration: underline; color: #333; font-size: var(--fs-h5); font-weight: var(--fw-m); line-height: var(--lh-h5);}
.btn-ix.email:hover {background-color: transparent;}
.btn-ix.email:hover .txt {color: var(--HK_or);}

/*.btn-ix.nobtn:hover {background-color: initial !important; border-color: initial !important;}*/

.type-dash {padding-left: 10px; position: relative;}
.type-dash::before {content: '-'; display: block; position: absolute; left: 0; font-size: inherit; line-height: inherit; color: inherit; font-weight: inherit;}

.flex-auto > div,
.flex-1 {flex: 1 1 0;}
.inner-box.flex-1 ~ .inner-box:not(.flex-1),
.form-box:not(.flex-col) .flex-1 ~ .btn-ix {flex: 0 0 auto;}
.form-box:not(.flex-col):has( > .flex-1 ~ .btn-ix) {flex-wrap: wrap}
.form-box:has( > .flex-1):not(.flex-col) {display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 5px;}
.form-box > .inner-box {display: inline-flex; justify-content: space-between; align-items: center; gap: 16px;}

.flex-auto.cont-body:has( > .cont-view > table.table.view),
.flex-auto.cont-body:has( > .cont-view > table.table.view) > .cont-view {align-items: stretch;}

.group-box {display: flex; gap: 26px;}
.group-box > .form-box {gap: 4px;}
.group-inner {display: flex; justify-content: flex-start; align-items: flex-start;}
.group-inner.flex-col > *,
.group-box.flex-col > .group-inner {width: 100%;}
.group-box.flex-col > .group-inner.img-temp-box,
.group-box.flex-col > .group-inner.form-box.img-temp-box {padding: 0;}

.group-box.group-style {gap: 0;}

.gubun-box {border-top: 1px solid var(--Form_border2); border-bottom: 1px solid var(--Form_border2); padding: 15px 0; display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap;}
dl.gubun-box > dt {position: relative; padding-right: 12px;}
dl.gubun-box > dt::after {content: ':'; font-size: inherit; line-height: 1; color: inherit; position: absolute; right: 4px; top: 50%; transform: translateY(-50%)}

/*안의 요소 넓이 같게*/
.form-box.type-wSame:not(.flex-col) {display: grid !important; grid-auto-columns: 1fr;  grid-auto-flow: column; justify-content: center; width: auto;}
.form-box.type-wSame:not(.flex-col) > * {width: 100%; display: flex; justify-content: center; align-items: center;}
/*grid-auto-columns: minmax(max-content, 1fr); 제일 큰거를 기준으로 넓이 같게 하기 속성, 추후 사용*/

/*input type="file" set*/
.fileSet-box {display: flex; align-items: center; gap: 5px;}
.fileSet-box .btn-ix:not(.del) {cursor: pointer;  padding: 5px 10px; }
.fileSet-box .btn-ix:not(.del, .type1) {background-color: #eee; border: 1px solid var(--Form_border);}
.fileSet-box .btn-ix.del {padding: 0;}
.fileSet-box .btn-ix [type="file"] { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0;}
.fileSet-box .btn-ix:not(:has( i[class*="ico-file"])) [type="file"] ~ .txt::before {content: none; width: 20px; height: 20px;}


/*파일버튼+삭제버튼*/
.fileSet-box.size-ss .btn-ix:has( > .txt) {padding-left: 16px; padding-right: 16px; gap: 1px;}
.fileSet-box.size-ss .btn-ix .ico,
.fileSet-box.size-ss .btn-ix:has( .txt) .ico:not([class*="ico-bi-"])::before {background-size: 66% auto;}
.fileSet-box.size-ss .btn-ix .ico[class*="ico-del"]::before {background-size: 50% auto;}
.fileSet-box.size-ss .btn-ix .txt {font-size: 12px; line-height: 16px;}

.fileSet-box,
.form-box.fileSet-box {flex-wrap: wrap; row-gap: 8px;}
.fileSet-box .inner-box,
.fileSet-box .fileSet-item {display: inline-flex; justify-content: flex-start; align-items: center; flex-wrap: nowrap; max-width: 100%; gap: 4px;}
.fileSet-box .fileSet-item .btn-ix.file {text-align: left;}
.fileSet-box .fileSet-item .btn-ix.file .txt {flex: 1 1 0; text-align: left;
     display: inline-block; text-overflow: ellipsis; overflow: hidden;
}
.fileSet-box .inner-box:has( > .count-box),
.fileSet-box .fileSet-item

/*.formbox-type1 > fileSetbox-type1*/
.form-box.formbox-type1 {flex-wrap: wrap;}
.form-box.formbox-type1 > .box-inner-form {flex: 1; min-width: 500px;}
.form-box.formbox-type1 > .box-inner-form > .inner-box {justify-content: space-between;}


[class*="link-type"] {--gabCnt: 4; --gabCnt-c: 4; --listCnt: 4; display: flex; justify-content: center; align-items: center; gap: calc(var(--gab) * var(--gabCnt)); column-gap: calc(var(--gab) * var(--gabCnt-c)); width: 100%;}
[class*="link-type"] > .list {display: inline-flex; justify-content: center; align-items: center; align-items: flex-start;}
[class*="link-type"] > .list > .sub-list {display: none;}
/*기본 btn-ix를 따름[class*="link-type"] > .list > .btn-ix {}*/
[class*="link-type"].ta-l {justify-content: flex-start;}

[class*="link-type"] .badge.time {position: absolute;right: 10px;top: 14px;}
[class*="link-type"] .badge.time .ico-play {min-width: 12px; width: 12px; height: 12px;}

[class*="link-type"] .img-box:has( > .ico-play, > .btn-full) {position: relative;}
[class*="link-type"] .img-box .btn-full,
[class*="link-type"] .img-box > .ico-play {position: absolute; z-index: 1;}
[class*="link-type"] .img-box .btn-full {top: 0; left: 0; right: 0; bottom: 0;}
[class*="link-type"] .img-box > .ico-play {top: 50%; left: 50%; transform: translate(-50%, -50%);}
[class*="link-type"] .img-box .ico-play {min-width: 52px; width: 52px; height: 52px;}
[class*="link-type"] .img-box .ico-play::before {--svg-color: var(--filterColor-fff)}
[class*="link-type"] .btn-full:hover {background-color: rgba(0, 0, 0, .4);}

[class*="link-type"] .link-full {width: 100%; display: flex; justify-content: space-between; align-items: flex-start;}
[class*="link-type"] .link-full.flex-col {justify-content: space-between; align-items: stretch;}
[class*="link-type"] .link-full:not(div) .img-box img {transition: .2s;}
[class*="link-type"] .link-full:not(div):hover .img-box img {transform: scale(1.2);}
[class*="link-type"].type-cover .img-box img,
[class*="link-type"] .ico-play ~ img {object-fit: cover !important;}
[class*="link-type"] .rc-box:has(+ .link-full) {z-index: 1;}

[class*="link-type"] .over-box {--myGap: 10px; --myPD: 10px; --myBtnSize: 44px; --myIcoSize: 20px;
	display: flex; justify-content: flex-end; align-items: flex-start; flex-wrap: wrap; gap: var(--myGap);
	padding: 0 var(--myPD); margin-top: calc(var(--myPD) * -1);
    width: 100%; max-width: 100%;
}
[class*="link-type"] .over-box .btn-ix {min-width: var(--myBtnSize); min-height: var(--myBtnSize); border-radius: calc(var(--myBtnSize) / 2);}
[class*="link-type"] .over-box .btn-ix .ico {min-width: var(--myIcoSize); width: var(--myIcoSize); height: var(--myIcoSize);}

[class*="link-type"] .over-box .btn-ix.over-type1 {background-color: #F5F5F5; border-color: #F5F5F5;}
[class*="link-type"] .over-box .btn-ix.over-type1 .ico::before {--svg-color: var(--filterColor-0077FF);}
[class*="link-type"] .over-box .btn-ix.over-type1:not(.on):hover,
[class*="link-type"] .over-box .btn-ix.over-type1.on {background-color: var(--HK_blue); border-color: var(--HK_blue);}
[class*="link-type"] .over-box .btn-ix.over-type1:not(.on):hover .ico::before,
[class*="link-type"] .over-box .btn-ix.over-type1.on .ico::before {--svg-color: var(--filterColor-fff);}

[class*="link-type"] .over-box .btn-ix.over-type2 {background-color: rgba(0, 0, 0, 0.5); border-color: #F5F5F5;}
[class*="link-type"] .over-box .btn-ix.over-type2 .ico::before {--svg-color: var(--filterColor-fff);}
[class*="link-type"] .over-box .btn-ix.over-type2:not(.on):hover {background-color: rgba(0, 0, 0, 0.7);}
[class*="link-type"] .over-box .btn-ix.over-type2.on .ico::before {--svg-color: var(--filterColor-EC6608);}

[class*="link-type"] .over-box .btn-ix.over-type3 {background-color: #888; border-color: #888;}
[class*="link-type"] .over-box .btn-ix.over-type3 .ico::before {--svg-color: var(--filterColor-fff);}
[class*="link-type"] .over-box .btn-ix.over-type3:not(.on):hover {background-color: #555; border-color: #555;}

[class*="link-type"] .over-box {position: absolute; top: calc(var(--myImgH) - var(--myBtnSize)); left: 0; width: 0; opacity: 0; pointer-events: none; transition: opacity .18s .2s ease;}
[class*="link-type"] .list:hover .over-box {opacity: 1; pointer-events: auto;}
[class*="link-type"] .over-box:not([style*="width:"]) {min-width: max-content;}

/* VIDEO: 호버 미리보기 + 썸네일 클릭(상세) + over-box(수정/삭제) 동시 지원 */
[class*="link-type"] > .list.item-video .over-box {z-index: 20;}
[class*="link-type"] > .list.item-video .img-box .player-container,
[class*="link-type"] > .list.item-video .img-box > video,
[class*="link-type"] > .list.item-video .img-box .item-video-click-layer {
	position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1;
}
[class*="link-type"] > .list.item-video .img-box .player-container iframe {pointer-events: none;}
[class*="link-type"] > .list.item-video .img-box > video {pointer-events: none;}

[class*="link-type"] .over-box[class*="posi-left-"] {justify-content: flex-start;}
[class*="link-type"] .over-box[class*="posi-center-"] {justify-content: center;}

[class*="link-type"] .over-box[class*="posi-"][class*="-top"],
[class*="link-type"] .over-box[class*="posi-"][class*="-center"] {margin-top: 0;}

/*web에서 반응형 모드 볼때*/
html:not(.webtype) [class*="link-type"] .over-box {opacity: 1;}

/*검색결과 > 아이콘+텍스트 .downtxt 타입*/
[class*="link-type"]:not(.flex-col):has( .btn-ix.downtxt) {display: grid; grid-auto-columns: minmax(max-content, 1fr);  grid-auto-flow: column; justify-content: center; width: auto;}
[class*="link-type"]:not(.flex-col):has( .btn-ix.downtxt) .list {width: 100%; display: flex; justify-content: center; align-items: center;}

/*이미지박스 높이*/
[style*="--myImgH"][class*="link-type"] .img-box,
[style*="--myImgH"] [class*="link-type"] .img-box {height: var(--myImgH);}

/*[class*="link-type"] .link-full:not(.flex-col) .img-box {max-width: 325px; width: 34.52%;}*//*세로마다 다른 유형이 나타나면 [imgFixH] 마다 추가*/
[class*="link-type"] .link-full:not(.flex-col) .img-box img {object-fit: cover;}

.imgBG-style1[class*="link-type"] .img-box,
.imgBG-style1 [class*="link-type"] .img-box {background-color: #fff;}

.link-type1 > .list > .link {--gabCnt: 2; flex-direction: column; justify-content: flex-start; align-items: center; /*gap: calc(var(--gab) * 2);*/ min-width: 72px; min-height: 72px;}
.link-type1.flex-col {}


/*js여부 상관없이 사용*/
.link-type2 {--Form_rc: var(--Gray_DDD);}
.link-type2 .list {gap: 8px; cursor: pointer;}
.link-type2 .list .link-full {gap: 8px;}
.link-type2 .list .link-full:not(.flex-col) {align-items: stretch;}

.link-type2 .list > .btn-ix:has( [class*="ico-delete"]),
.link-type2 .rc-box.solo,
.depsList-area .rc-box.solo {position: absolute; top: 13px; left: 13px;}
.link-type2 .list > .btn-ix:has( [class*="ico-delete"]) {left: auto; right: 6px; top: 6px;}
.link-type2 .rc-box input[type='radio'],
.link-type2 .rc-box input[type='checkbox'],
.depsList-area .rc-box input[type='radio'],
.depsList-area .rc-box input[type='checkbox'] {background-color: rgba(255, 255, 255, .4); border-radius: 2px;}

.link-type2 .rc-box input[type='radio']:hover,
.link-type2 .rc-box input[type='checkbox']:hover,
.depsList-area .rc-box input[type='radio']:hover,
.depsList-area .rc-box input[type='checkbox']:hover {border-color: var(--Form_rc); background-color: rgba(51, 51, 51, 0.15);}

.link-type2 .rc-box input[type='radio']:checked,
.link-type2 .rc-box input[type='checkbox']:checked,
.depsList-area .rc-box input[type='radio']:checked,
.depsList-area .rc-box input[type='checkbox']:checked {background-color: var(--HK_or); border-color: var(--HK_or);}
.link-type2 .rc-box input[type='radio']:checked::before,
.link-type2 .rc-box input[type='checkbox']:checked::before,
.depsList-area .rc-box input[type='radio']:checked::before,
.depsList-area .rc-box input[type='checkbox']:checked::before {--svg-color: var(--filterColor-fff);}

.accItem-head:has( .left .rc-box.solo) {position: relative;}
.accItem-head:has( .left .rc-box.solo) .rc-box.solo {left: 15px; top: 50%; transform: translateY(-50%);}

.depsList-area .accItem-head:has( .left .rc-box.solo) .rc-box.solo {top: 33px; transform: none; opacity: .3;}
.depsList-area .accItem-head:has( .left .rc-box.solo) .rc-box.solo:has( :hover),
.depsList-area .accItem-head:has( .left .rc-box.solo) .rc-box.solo:has( :checked) {opacity: 1;}

.link-type2 .list:has( .rc-box :disabled) .img-box {position: relative;}
.link-type2 .list:has( .rc-box :disabled) .img-box::before {content: ''; display: block; border-radius: 7px;
background: rgba(0, 0, 0, 0.30); position: absolute; top: 0; left: 0; right: 0; bottom: 0;}

.link-type2 .img-box {width: 100%; height: 100%; min-height: 100px; /*min-height: 180px; display: flex; align-items: center; justify-content: center; flex: 1 1 0;*/ background-color: #F5F5F5;  border: 1px solid var(--Form_border2); border-radius: 8px; overflow: hidden;}
.link-type2 .img-box img {/*max-width: 100%; max-height: 100%;*/
	/*width: 100%; height: 100%;*/ object-fit: contain; object-position: center; display: block;
	margin-left: auto; margin-right: auto;
	max-width: unset; max-height: unset; width: 100%; height: 100%;
}
.link-type2.type-cover .img-box img {object-fit: cover;}
[style="--myImgH: 110px;"] .link-type2 .img-box {display: flex; justify-content: center; align-items: center;}
[style="--myImgH: 110px;"] .link-type2 .img-box img {width: auto; height: auto; max-width: 60%; max-height: 100%;}

.link-type2 .img-box.no-data {background-color: #f5f5f5;}

.preview-area .link-type2 .img-box {background-color: transparent;}

.link-type2 .txt-box {width: 100%; display: flex;}
.link-type2 .txt-box:not(.flex-col) {justify-content: space-between; align-items: center;}
.link-type2 .txt-box .tit {--myLH: 26px; --myLH: var(--lh-h2B); color: #000; font-size: var(--fs-h4); font-weight: var(--fw-sb); line-height: var(--myLH);}
.link-type2 .txt-box .txt {color: #333; /*--myLH: 22px;*/ line-height: 22px;}
.link-type2 .txt-box .btn-ix .txt {color: var(--myFC);}
.link-type2 .txt-box .desc {color: #A3A3A3; font-size: var(--fs-caption); line-height: normal;}
.txt-type-bar,
.link-type2 .txt-box .desc span {position: relative; padding-right: 10px;}
.txt-type-bar::after,
.link-type2 .txt-box .desc span::after {content: '/'; font-size: inherit; line-height: inherit; color: inherit; font-weight: var(--fw-r); position: absolute; right: 0; top: 0;}
.txt-type-bar:last-child::after,
.link-type2 .txt-box .desc span:last-child::after {content: none;}

/*현재 기준 .desc > .new, 추후 tit 등에 new있을시 별도 대응 필요*/
.link-type2 .txt-box .new {color: var(--HK_or); font-size: 12px; font-weight: var(--fw-b); line-height: normal;}

.link-type2 .txt-box .desc:has( .location ~ .new) span.location:has( ~ .new) {padding-right: 8px;}
.link-type2 .txt-box .desc:has( .location ~ .new) span.location:has( ~ .new)::after {content: '|';}

.link-type2 .txt-box .tit {display: block; width: 100%;}
.link-type2 .txt-box .tit:not([class*="ellipsis"], .fulltxt) {overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}

.link-type2 .txt-box.flex-col {justify-content: space-between; /*align-items: flex-start;*/}
.link-type2 .txt-box.flex-col:has( > .flex-1) {row-gap: 20px;}
/*.link-type2 .txt-box.flex-col:has( > .flex-1) .tit[class*="ellipsis"] {height: calc(var(--myLine) * var(--myLH));}*/
/*.link-type2 .txt-box.flex-col > .flex-1 {flex: 1 1 0;} 상단 flex-1 공통처리*/
.link-type2 .txt-box.flex-col:has( > .txtbox-inner ) {}

.link-type2 .txt-box .tit.ellipsis2 {height: calc(var(--myLine) * var(--myLH));}
.link-type2:not(.flex-col) .txt-box .tit.ellipsis2 {--myLine: 1 !important;}
.link-type2 > .list:first-child:last-child .txt-box .tit.ellipsis2 {height: auto; max-height: calc(var(--myLine) * var(--myLH));}

/*.link-type2 .list > .btn-ix {display: flex; flex-direction: column; justify-content: space-between; align-items: stretch; width: 100%; border: 0 none; background-color: transparent;}
.link-type2 .list > .btn-ix .img-box img {transition: .2s;}
.link-type2 .list > .btn-ix:hover .img-box img {transform: scale(1.2);}*/

/*js없이 순수 사용시*/
.link-type2:not(.listH_JS) {--myGap: 20px;
	display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap; align-content: flex-start; gap: var(--myGap);
}
.link-type2:not(.listH_JS) > .list {position: relative;}

.link-type2:not(.listH_JS, [class*="listview-"]):not(.flex-col) > .list,
.link-type2:not(.listH_JS, [class*="listview-"]).flex-col > .list > .link-full:not(.flex-col) .img-box { width: calc((100% - (var(--myGap) * (var(--listCnt) - 1))) / var(--listCnt));}
.link-type2:not(.listH_JS, [class*="listview-"]).flex-col > .list > .link-full:not(.flex-col) .img-box + .txt-box {width: calc(100% - ((100% - (var(--myGap) * (var(--listCnt) - 1))) / var(--listCnt))); padding-left: var(--myGap);}
.link-type2:not(.listH_JS, [class*="listview-"]).flex-col > .list > .link-full:not(.flex-col) {column-gap: 0;}

/*.link-type2:not(.listH_JS).flex-col {justify-content: flex-start; align-items: flex-start;}*/
.link-type2:not(.listH_JS).flex-col > .list {width: 100%;}
.link-type2:not(.listH_JS).flex-col > .list .over-box {max-width: calc((100% - (var(--myGap) * (var(--listCnt) - 1))) / var(--listCnt) - var(--myGap));}


/*이미지 높이에 따라, li 탑 달라짐 : js 연동됨*/
/*ul.listH_JS {position: relative; list-style: none; margin: 0; padding: 0;}
ul.listH_JS > li {position: absolute; box-sizing: border-box; transition: transform .28s ease, opacity .28s ease;}
ul.listH_JS.masonry-ready > li {opacity: 1;}
ul.listH_JS .skeleton {background: #e3e3e3; border-radius: 8px;}*/
ul.listH_JS {position: relative; list-style: none; padding: 0; margin: 0; list-style: none;}
ul.listH_JS > li {position: absolute; box-sizing: border-box; will-change: transform, top, left;}
ul.listH_JS.listH-ready-base > li {opacity: 1;}
ul.listH_JS.listH-ready {opacity: 1;}
ul.listH_JS .img-box {height: auto;}
/*ul.listH_JS .img-box {position: relative; width: 100%; overflow: hidden;}
ul.listH_JS .img-box img {width: 100%; height: 100%; object-fit: cover; object-position: center; display: block;}*/
ul.listH_JS .listH-skeleton {position: absolute; inset: 0; background: linear-gradient(90deg, #eee 0%, #f5f5f5 50%, #eee 100%); background-size: 200% 100%; animation: listH-skel 1.2s infinite; pointer-events: none;}
ul.listH_JS li.listH-loaded .listH-skeleton {opacity: 0; transition: opacity .25s ease;}
@keyframes listH-skel { 0%   { background-position: 200% 0; } 100% { background-position: -200% 0; }}

ul.listH_JS .img-box {display: flex; align-items: center; justify-content: center; /*min-height: 180px;*/ /*max-height: 380px;*/}/*추후 상황상 link-type2로 가거나 class로 다른 min/max제외하는거 만들어야할수도*/


/*메일링 컨텐츠 등록용*/
.type-mailpreview .link-type2.flex-col {width: 512px; min-width: 512px; flex-direction: column !important; --myGap: 20px !important;}
.type-mailpreview .link-type2.flex-col .link-full {flex-direction: row !important;}
.type-mailpreview .link-type2.flex-col .list {--myPD: 24px; --myR: 12px; width: 100% !important; border-radius: var(--myR); padding: var(--myPD); background-color: #F5F5F5;}
.type-mailpreview[style*="--myImgH"] .link-type2.flex-col .img-box,
.type-mailpreview [style*="--myImgH"].link-type2.flex-col .img-box {width: var(--myImgH) !important; height: calc(var(--myImgH) * .871) !important; background-color: #fff;}
.type-mailpreview .link-type2.flex-col .img-box img {object-fit: contain !important;}
.type-mailpreview .link-type2.flex-col .img-box + .txt-box {width: calc(100% - var(--myImgH)) !important; }


/*paging*/
.cont-paging {margin-top: 30px; margin-bottom: 30px; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 5px; width: 100%;}

.paging {padding: 8px 12px; width: 100%;}
.paging, .paging .linkbox, .paging .btnbox {display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 5px;}
.paging .linkbox, .paging .btnbox {display: inline-flex;}
.paging .linkbox > .link {font-size: 13px; vertical-align: middle;}
.paging .btnbox [class*="btn-"],
.paging .linkbox .link {display: inline-flex; justify-content: center; align-items: center; vertical-align: middle; min-width: 40px; height: 40px; border-radius: 20px;}
.paging .linkbox .link {text-align: center; font-size: var(--fs-caption); line-height: 15px; line-height: var(--lh-caption); color: #333; padding: 5px; background-color: #fff;}
.paging .linkbox strong.link {color: var(--HK_or); font-weight: var(--fw-sb);}
.paging .linkbox [class*="btn-"] + [class*="btn-"] {margin-left: 5px;}
.paging .linkbox [class*="btn-"] + .link {margin-left: 18px;}
.paging .linkbox .link + [class*="btn-"] {margin-left: 20px;}
.paging .linkbox > * + .tag {margin-left: 10px;}

.paging .btnbox [class*="btn-"] {width: 40px; border: 1px solid var(--Form_border2); background-color: #FFF; text-indent: -999px; overflow: hidden;}
.paging .btnbox [class*="btn-"]::before {content: ''; width: 16px; height: 16px; background-size: 62% auto;}

.paging.mode-mo {padding-left: 0; padding-right: 0;}
.paging .btn-ix.more {width: auto; padding-left: 100px; padding-right: 100px;}
.paging:has([class*="mode-"][class*="-mo"]) .btn-ix.more {width: 100%; padding-left: 14px; padding-right: 14px;}
.paging .btn-ix.more .ico::before {background-size: 62% auto;}

.paging .linkbox .link {border: 1px solid transparent; background-color: #fff;}
.paging .btnbox [class*="btn-"] {border: 1px solid var(--Form_border2); background-color: #fff;}

.paging .linkbox .link:not(strong):hover,
.paging .btnbox [class*="btn-"]:not([disabled], [readonly]):hover {background-color: #f5f5f5; border-color: var(--Form_border2);}

.paging .linkbox strong.link,
.paging .linkbox .link:not(strong):focus,
.paging .btnbox [class*="btn-"]:not([disabled], [readonly]):focus {border-color: var(--Form_border2); background-color: #333; color: #fff;}
.paging .btnbox [class*="btn-"]:not([disabled], [readonly]):focus::before {--svg-color: var(--filterColor-fff);}

.paging .btnbox [class*="btn-"][disabled],
.paging .btnbox [class*="btn-"][readonly] {}
.paging .btnbox [class*="btn-"][disabled]::before,
.paging .btnbox [class*="btn-"][readonly]::before {opacity: .5;}

.paging .select {cursor: pointer; width: auto; height: 30px; padding: 0 34px 0 10px; border: 1px solid var(--Form_border2); color: #999; border-radius: 2px; box-sizing: border-box; font-weight: var(--fw-l); word-spacing: -0.06em; -webkit-appearance: none; -moz-appearance: none;appearance: none; background-color: transparent; background-image: url(../images/ico/ico-sel1.png); background-repeat: no-repeat; background-position: right 50%;}
.paging .select::-ms-expand {display: none;}


/*swpier custom*/
.detail-slider [class*="swiper-button-"] {width: 50px; height: 50px; border-radius: 25px; /*background-color: rgba(255,255,255,.1);*/ }
.detail-slider [class*="swiper-button-"] svg {filter: var(--filterColor-333); width: 50%; height: 50%;}
/*.detail-slider [class*="swiper-button-"].swiper-button-disabled {opacity: 1;}
.detail-slider [class*="swiper-button-"].swiper-button-disabled svg {opacity: .35;}*/
.detail-slider .detail-item {border-radius: 8px; border: 1px solid var(--Form_border2); height: 500px; overflow: hidden;}
.detail-slider .detail-item .item {display: flex; justify-content: center; align-items: center; width: 100%; height: 498px; border-radius: inherit;}
.detail-slider .detail-item .item > *:not(img) {width: 100%; height: 100%;}
.detail-slider .detail-item .item img {width: 100%; height: 100%; object-fit: contain; object-position: center; display: block;}
.detail-slider .detail-item img {margin-left: auto; margin-right: auto; display: block;}
.detail-slider {width: 100%;}
.popup .detail-slider {max-height: 500px;}
.popup .detail-slider iframe {
    min-height: 500px;
}

.detail-slider [data-play-ref].btn-ix {padding: 0; --mySize: 80px; --myR: 50%;}
.detail-slider [data-play-ref].btn-ix .ico[class*="ico-play"] {width: calc(var(--mySize) * .825);}
.detail-slider .ico[class*="ico-play"]:has( ~ video) {width: 66px;}
.detail-slider [data-play-ref],
.detail-slider .ico[class*="ico-play"]:has( ~ video) {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2;}
.detail-slider [data-play-ref] .ico.ico-play-r::before,
.detail-slider .ico[class*="ico-play"]:has( ~ video)::before {--svg-color: var(--filterColor-FF3B30);}
[data-play-ref].is-playing {display: none;}

.fixed-right {position: fixed; right: var(--pdLR); right: 50%; margin-right: calc(-1 * (var(--maxW) / 2 - var(--pdLR)));  bottom: 120px; z-index: 2; transition: .4s;}
.fixed-right .btn-ix.size-b {/*--mySize: 67px !important;*/ --myR: 8px; --myPD: 5px;
	min-width: var(--fixRSize); min-width: calc(var(--fixRSize) * 3.1344); min-height: var(--fixRSize);
	/*min-width: 67px; min-height: 67px; border-radius: 34px; padding-left: 30px; padding-right: 30px;*/
}
.fixed-right .btn-ix.size-b,
.fixed-right .btn-ix.size-b.on {background-color: var(--HK_blue); border-color: var(--HK_blue);}
.fixed-right .btn-ix.size-b:hover {background-color: #0062d1; border-color: #0062d1 !important;}
.fixed-right .inner-list {position: absolute; bottom: 79px; bottom: calc(var(--fixRSize) + 7px); right: 0; display: none; border-radius: 20px; padding: 20px 0; background-color: #fff; box-shadow: 1px 1px 6.2px 0 rgba(0, 0, 0, 0.15);}
.fixed-right .upload-typeList {font-size: var(--fs-body); line-height: 18px; line-height: var(--lh-body); color: #333; background-color: #fff;}
.fixed-right .upload-typeList .type-title {color: #a2a2a2; display: flex; justify-content: flex-start; align-items: center;}
.fixed-right .upload-typeList .btn-ix {width: 100%; border-radius: 0; justify-content: flex-start; }
.fixed-right .upload-typeList .btn-ix .txt {color: inherit; white-space: nowrap;}
.fixed-right .upload-typeList .type-title,
.fixed-right .upload-typeList .btn-ix {min-height: 40px; padding: 5px 20px;}
.fixed-right:has( .btn-ix.size-b.on) {z-index: 4;}

html:has( .btn-topmove.show) .fixed-right {right: calc(50% + var(--topBtSize) + 10px);}
html:has( .moPopStyle.open) .fixed-right {z-index: 1;}

/*tabs*/
.tab-head,
[data-tab]:not([class]),
[class*="tabtype"] {display: flex; justify-content: flex-start; align-items: center; align-items: stretch; gap: 12px;}
/*text tabs*/
.tabtype1 {gap: 34px; overflow-y: hidden; overflow-x: auto; padding-right: 34px; margin-bottom: 1px;}
.tabtype1 li {display: inline-flex; justify-content: flex-start; align-items: center;}
[data-tab]:not([class]) .tab,
.tabtype1 .tab {min-height: 38px; padding-bottom: 12px; font-size: var(--fs-body); line-height: 140%; line-height: var(--lh-body); font-weight: var(--fw-m); color: #333;  position: relative; white-space: nowrap; border-bottom: 1px solid transparent;}
.tabtype1 .tab:hover {border-bottom-color: var(--Gray_333);}
.tabtype1 .tab.on {color: var(--HK_or); font-weight: var(--fw-sb); border-bottom-color: var(--HK_or);}
/*.tabtype1 .tab::after {content: ''; width: auto; height: 1px; background-color: var(--HK_or); background-color: #333; position: absolute; left: 0; right: 100%; bottom: -1px; z-index: 1; transition: right .2s;}
.tabtype1 .tab:hover::after, .tabtype1 .tab.on::after {right: 0; z-index: 3;}
.tabtype1 .tab:hover::after {background-color: #333;}
.tabtype1 .tab.on::after {z-index: 3; background-color: var(--HK_or);}*/

.tabtype2 {gap: 10px;}

.tab-head {margin-bottom: 10px;}
[class*="tabtype"] .btn-filter {white-space: nowrap;}


/*box tabs : checkbox,radio boxX-styleX class 규칙 맞춤
.rc-box.type-boxX == .tabtype-boxX
.rc-box.type-boxX-styleX == .tabtype-box-styleX
*/
[class*="tabtype-box"] {gap: 10px; overflow-y: hidden; overflow-x: auto; padding-right: 34px;}
[class*="tabtype-box"] li {display: inline-flex; justify-content: flex-start; align-items: center;}

[class*="tabtype-box1"] .tab {display: flex; justify-content: center; align-items: center; width: 100%; min-width: 40px; min-height: 40px; padding: 5px 10px; gap: 4px; border-radius: 8px; color: #666; font-size: var(--fs-caption); font-size: var(--lh-h5); line-height: var(--lh-caption); /* font-weight: var(--fw-m); */ background-color: #FFF; box-shadow: 1px 1px 6.2px 0 rgba(0, 0, 0, 0.08);}

[class*="tabtype-box2"] .tab {display: flex; justify-content: center; align-items: center; width: 100%; min-width: 40px; min-height: 40px; padding: 5px 16px; gap: 4px; color: #666; font-size: var(--fs-body); line-height: 20px; line-height: var(--lh-body); font-weight: var(--fw-m); border-radius: 30px; border: 1px solid #F5F5F5; background: #F5F5F5; box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05);}
[class*="tabtype-box2"] .tab.on {background-color: var(--HK_blue); color: #fff; font-weight: var(--fw-m);}

.tabtype-box2-style1 .tab {box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05); background-color: #fff; border-color: var(--Form_border); padding: 5px 24px;}
.tabtype-box2-style1 .tab.on {background-color: var(--HK_or);}

/*tabs wrap*/
.page-tab {margin-top: 14px; margin: 14px var(--pdLR) 0; padding-left: 0; padding-right: 0;}

.page-head + .page-tab {margin-top: 20px;}
.page-tab:has( .tabtype1),
.filter-main:has( .tabtype1) {padding-bottom: 1px; position: relative;}
.page-tab:has( .tabtype1)::after,
.filter-main:has( .tabtype1)::after {content: ''; display: block; width: auto; height: 1px; background-color: #ccc; position: absolute; left: 0; bottom: 1px; right: 0; z-index: 2;}
.content-section > .page-tab:has( .tabtype1)::after {left: var(--pdLR); right: var(--pdLR);}

/*.page-tab:has( .tabtype1)::before {content: ''; display: block; width: 54px; height: calc(100% - 7px); background: #fff; background: linear-gradient(
to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 60%); position: absolute; right: 0; top: 0;
z-index: 2;
}*/

/*좌우 그라데이션 흰-투명 : style.css에서 Universal Auto Scroll System 전용 CSS로 대체*/
.page-tab.type-lrW {--per: 60%;
	position: relative; width: 100%; margin-left: 0; margin-right: 0; min-height: 46px; overflow: hidden;
	width: calc(670px + (var(--pdLR) * 2)); margin: 5px auto 0;
}
/*.page-tab.type-lrW::before,
.page-tab.type-lrW::after {content: ''; display: block; background: #fff; position: absolute; top: 0; bottom: 6px; height: auto; width: 18%; z-index: 1; width: calc(var(--pdLR) * 2);}
.page-tab.type-lrW::before {background: linear-gradient(90deg, #FFF var(--per), rgba(255, 255, 255, 0) 100%); left: 9%; left: calc(var(--pdLR) * -1);}
.page-tab.type-lrW::after {background: linear-gradient(270deg, #FFF var(--per), rgba(255, 255, 255, 0) 100%); right: 9%; right: calc(var(--pdLR) * -1);}*/

.page-tab.type-lrW .rc-group,
.page-tab.type-lrW [class*="tabtype"] {display: flex; white-space: nowrap; overflow-x: auto; overflow-y: hidden; /*position: absolute; top: 0; width: auto; left: 0; right: 0;*/
}
.page-tab.type-lrW .scroll-shadow { width: calc(var(--pdLR) * 2);}

/*.webType .page-tab.type-lrW:not(.is-scrolled) .rc-group,
.webType .page-tab.type-lrW:not(.is-scrolled) [class*="tabtype"] {justify-content: center;}*/

/*.page-tab.type-lrW [class*="tabtype"] {padding: 0;}
.page-tab.type-lrW .rc-group > .rc-box,
.page-tab.type-lrW [class*="tabtype"] > * {margin-right: 5px; margin-left: 5px;}
.page-tab.type-lrW .rc-group > .rc-box:first-child,
.page-tab.type-lrW [class*="tabtype"] > *:first-child {margin-left: 5%;}
.page-tab.type-lrW .rc-group > .rc-box:last-child,
.page-tab.type-lrW [class*="tabtype"] > *:last-child {margin-right: 5%;}*/

/* [Component Layout Control]
.page-tab.type-lrW { position: relative; width: calc(670px + (var(--pdLR) * 2)); min-height: 46px; margin: 5px auto 0; overflow-y: hidden;  overflow-x: auto;}
.page-tab.type-lrW .rc-group,
.page-tab.type-lrW [class*="tabtype"] { height: 46px; align-items: center; padding: 0; }
.page-tab.type-lrW .rc-group {display: block; white-space: nowrap;}
.page-tab.type-lrW [class*="tabtype"] {padding: 0;}*/


/*filter*/
.filter-area {width: 100%; margin-top: 15px; display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch;}
.filter-area .filter-main,
.filter-area .filter-sub {display: flex; justify-content: flex-start; align-items: center; flex-wrap: nowrap;}
.filter-area .filter-main {padding-top: 15px;}
/*.filter-area .filter-scroll {flex: 1; overflow-y: hidden; overflow-x: auto; padding-right: 10px;}*/
.filter-area .filter-scroll {display: block; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; margin-right: 10px;}
.filter-area .filter-scroll .tabtype1 {display: inline-flex; white-space: nowrap; flex-wrap: nowrap; overflow: unset;}

.filter-area .filter-main:has( > .btn-filter) {justify-content: space-between;}
.filter-area .filter-main:has( .tabtype1) .tabtype1 .tab {padding-top: 6px; padding-bottom: 6px; z-index: 1}
.filter-area .filter-main:has( .tabtype1) {padding-top: 11px;}
.filter-area .filter-sub {gap: 12px;}

[data-tab-group],
[data-tab-group] [data-tab-tab] {width: 100%;}

/*상단 고정*/
html:has( .filter-area) #contents {position: relative;}
.filter-area,
.page-body > .tab-area,
html:has( .filter-area) .page-head:has( > .page-tab .rc-group .rc-box[class*="type-box"]) {position: sticky; top: var(--headerH); background-color: #fff; z-index: 3; margin-top: 0; padding-top: 15px;}
html:has( .filter-area):has( .page-head > .page-tab .rc-group .rc-box[class*="type-box"]) .filter-area {top: calc(var(--headerH) + var(--pageHeadH, 0px));}
.filter-area {padding-top: 0;}
.page-body > .tab-area {z-index: 2;}

/*테이블에서 사용했으나 공통인것같은거*/
/*파일 형식*/
.link.file .file-name + .file-type {padding-left: 13px; position: relative;}
.link.file .file-name + .file-type::before {content: '|'; display: block; position: absolute; left: 3px; top: 50%; transform: translateY(-50%);}

.link.file .file-name,
.link.file .file-type,
.link.file .file-cnt {display: inline-block; vertical-align: middle;}
.link.file .file-cnt {color: #666;}

.link.file:has( .file-type) .file-name {max-width: calc(100% - 54px);}
.link.file:has( .file-type):has( .file-cnt) .file-name {max-width: calc(100% - 80px);}

.link.file:has( .file-type.mode-mo) .file-name {max-width: 100%;}
.link.file:has( .file-type.mode-mo):has( .file-cnt) .file-name {max-width: calc(100% - 48px);}


[class*="filetype-"] {width: 48px; min-width: max-content; height: 18px; padding: 0 8px; display: flex; justify-content: center; align-items: center; gap: 6px; border-radius: 9px; padding-left: 22px; position: relative;
	font-size: 10px; line-height: 14px; font-weight: var(--fw-sb);
	width: 60px; background-color: #E6F4FF; color: #007AFF;
}
[class*="filetype-"]::before {content: ''; display: block; width: 8px; height: 8px; border-radius: 4px; position: absolute; left: 6px; top: 50%; margin-top: -4px;
	background-color: #007AFF;
}
.filetype-ai {background-color: #EBEBEB;; color: #D77D00;}
.filetype-ai::before {background-color: #D77D00;}

.filetype-eps {background-color: #F3e6FF; color: #8330FF;}
.filetype-eps::before {background-color: #8330FF;}

.filetype-pdf, .filetype-pptx, .filetype-ppt, .filetype-indd {background-color: #FFE6D4; color: #FF3B30;}
.filetype-pdf::before, .filetype-pptx::before, .filetype-ppt::before, .filetype-indd::before {background-color: #FF3B30;}

.filetype-mov, .filetype-mp4 {background-color: #E6FFF5; color: #00C7BE;}
.filetype-mov::before, .filetype-mp4::before {background-color: #00C7BE;}

.filetype-zip {background-color: #F0F0F0; color: #A2845E;}
.filetype-zip::before {background-color: #A2845E;}


[class*="statetype-"] {display: flex; width: 120px; height: 24px; padding: 2px 8px 2px 6px; justify-content: center; align-items: center; gap: 6px; flex-shrink: 0;
	color: #333; font-family: 'Inter', sans-serif; font-size: var(--fs-caption);  font-weight: var(--fw-m); line-height: 18px; line-height: var(--lh-caption);
	border-radius: 16px; background: #F5F5F5;
}
[class*="statetype-"]::before {content: ''; display: inline-block; vertical-align: middle; min-width: 8px; width: 8px; height: 8px; border-radius: 4px;
	background-color: #FF6900;
}
.statetype-yes {background-color: #ECFDF3; color: #037847;}
.statetype-yes::before {background-color: #14BA6D;}

[class*="statetype-"][class*="-green"] {color: #34C759;}
[class*="statetype-"][class*="-green"]::before {background-color: #34C759;}
[class*="statetype-"][class*="-blue"] {color: #007AFF;}
[class*="statetype-"][class*="-blue"]::before {background-color: #007AFF;}

.inner-style1 [class*="statetype-"] {background-color: transparent; width: auto; padding: 0 8px; font-weight: var(--fw-b);}
.inner-style1 .statetype-yes {color: #34C759;}
.inner-style1 .statetype-yes::before {background-color: #34C759;}
.inner-style1 .statetype-no {color: #FF3B30;}
.inner-style1 .statetype-no::before {background-color: #FF3B30;}
.inner-style1 .statetype-return {color: #FF3B30;}
.inner-style1 .statetype-return::before {background-color: #FF3B30;}

.inner-style2 [class*="statetype-"] {background-color: transparent; width: auto; height: auto; padding: 0; font-weight: var(--fw-b);}
.inner-style2 [class*="statetype-"]::before {content: none;}
.inner-style2 [class*="statetype-"] ~ .date {color: #888;}

[class*="statetype-"].ta-l {text-align: left; justify-content: flex-start;}

.ta-l > .flex-col > [class*="statetype-"] {justify-content: flex-start;}

/* 텍스트 컬러는 style.css : fc-r, fc-b, fc-error등으로 대체
[class*="statetype-txt-"] {padding: 0; margin: 0; background-color: transparent;}
[class*="statetype-txt-"]::before {content: none;}
.statetype-txt-no {color: #FF3B30;}
.statetype-txt-no2 {color: #B3261E;}
.statetype-txt-yes {color: #007AFF;}

.table.view > * > tr > *:not(.ta-c) [class*="statetype-txt-"] {text-align: left; justify-content: flex-start; font-size: inherit; line-height: inherit;}
.table.view > * > tr > *.ta-r [class*="statetype-txt-"] {text-align: center; justify-content: flex-end;}*/

/*썸네일 이미지 리스트*/
.imgThum-list:not([id*="swiper"]),
.imgThum-list:not(.swiper-wrapper) {display: inline-block; vertical-align: middle; text-align: right;}
.btn-imgThum, .img-plus,
.imgThum-list .imgThum { width: 147px; min-width: 147px; max-width: 147px; height: 60px; padding: 7px 16px; display: inline-block; vertical-align: middle; border-radius: 10px; border: 1px solid var(--Form_border2); background: #FFF; box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05); text-align: center; margin: 0 4px;
	background-position: center center; background-repeat: no-repeat; background-size: contain;
    cursor: pointer;
}
.btn-imgThum .ico,
.img-plus .btn-ix,
.imgThum-list .imgThum .btn-ix {width: 44px; height: 44px; padding: 10px 16px; border-radius: 22px;}
.img-plus .btn-ix:has( > .ico:first-child:last-child) {padding: 10px; }
.btn-imgThum .ico::before,
.img-plus .btn-ix .ico::before,
.imgThum-list .imgThum .btn-ix .ico::before {--svg-color: var(--filterColor-0077FF);}
.btn-imgThum .ico::before {background-size: 38% auto;}
/*.btn-ix.btn-imgThum:hover {background-color: #fff;}
.btn-ix.btn-imgThum:hover .ico,
.imgThum-list .imgThum .btn-ix:hover {background-color: #f5f5f5;}*/
.img-plus .btn-ix,
.imgThum-list .imgThum .btn-ix {background-color: #F5F5F5;}
.imgThum-list .imgThum.swiper-slide {margin-left: 0; margin-right: 0;}
.imgThum-list .imgThum .btn-ix:has( [class*="ico-delete"]) {display: none;}
.imgThum-list .imgThum:hover .btn-ix:has( [class*="ico-delete"]) {display: inline-flex; }
.img-plus .btn-ix:hover,
.imgThum-list .imgThum .btn-ix:hover {background-color: #fff;}

.btn-ix.btn-imgThum {border-radius: 10px;}
/*.img-plus .btn-ix {margin-top: 7px;}
.imgThum img {max-width: 100%; max-height: 100%;}
.imgThum .btn-box {display: none; display: inline-block; position: absolute; bottom: 0; left: 0; width: 100%; height: 54px; padding-bottom: 10px;}
.imgThum:hover .btn-box {display: inline-block;}*/


/*필터그룹*/
.fg-item-group,
.fg-item,
.fg-item-head,
.fg-item-body {display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; gap: 15px;}
.fg-item-group.flex-col,
.fg-item.flex-col,
.fg-item-head.flex-col,
.fg-item-body.flex-col {/*align-items: flex-start;*/ justify-content: center;}
.fg-item-group .fg-item {}
.fg-item-group .fg-item .fg-item-head {}
.fg-item-group .fg-item .fg-item-body {}
.fg-item-group.flex-col .fg-item-head + .fg-item-body {padding: 0 20px;}

.fg-item-group.flex-col > .fg-item + .fg-item {padding-top: 20px; border-top: 1px solid var(--Form_border2)}
.fg-item-group .rc-box .label {padding-top: 0;}

.fg-item.type-foot {margin-top: 20px; margin-bottom: 13px;}
.fg-item.type-foot > .btn-ix {flex: 1 1 0;}

[class*="fg-item"].flex-col > *,
[class*="fg-item"] .flex-col > * {width: 100%;}
.miniPop .fg-item-group {padding: 0 20px; max-width: 360px;}

.fg-form-box,
.fg-form-box .box-inner {display: flex; justify-content: flex-start; align-items: center; gap: 6px; gap: 15px;}
.fg-form-box .box-inner {flex: 1 1 0; gap: 6px;}
.fg-form-box .form-text {padding: 0 4px;}


/*문제시 fg-안으로 넣기*/
.inForm-box .search-box,
.inForm-box .search-box .inputbox,
*:has( > .flex1, > .flex-1) {min-width: 0;}
.inForm-box .search-box .inputbox,
.inForm-box .search-box .inputbox .input,
.form-input.flex1, .form-select.flex1, .form-textarea.flex1,
.form-input.flex-1, .form-select.flex-1, .form-textarea.flex-1 {min-width: 0 !important; width: 100%;}


/*table*/
table[class*="table"] .ico.ico-new {width: 16px; min-width: 16px; height: 16px;}

table[class*="table"] {table-layout: fixed; width: 100%;}
table[class*="table"] th, table[class*="table"] td {padding: 5px 10px; text-align: left; border-bottom: 1px solid var(--Form_border2);}
table[class*="table"] th, table[class*="table"] td,
table[class*="table"] .th, table[class*="table"] .td {font-size: var(--fs-body); line-height: 19px; line-height: var(--lh-body); font-weight: var(--fw-m); color: #333;}
table[class*="table"] thead th,
table[class*="table"] thead .th {color: #666; font-weight: var(--fw-sb); font-size: var(--fs-caption); line-height: var(--lh-caption);/*border-bottom: 1px solid #333;*/}

table[class*="table"] th, table[class*="table"] td {background-color: transparent; word-break: break-word; text-align: left;}
table[class*="table"] th > *, table[class*="table"] td > * {vertical-align: middle;}

table[class*="table"] .editor-box {min-height: 250px;}

table[class*="table"] .link {width: 100%; display: inline-block;}
table[class*="table"] .link.type-udLine,
table[class*="table"] .link:hover {text-decoration: underline;}
table[class*="table"] .link.type-udLine:hover {color: #000; text-shadow: 0 0 0 #000;}

.page-region table[class*="table"] .link.title {color: var(--HK_blue); text-decoration: underline;}
.page-region table[class*="table"] .link.title:hover {color: var(--HK_blue_over);}

table[class*="table"] .form-selectDiv + .th {text-decoration: underline;}
table[class*="table"] .th:has( + .sort) {margin-right: 5px;}

table[class*="table"] tr > *:has( > .ico.ico-new) .title,
table[class*="table"] tr > *:has( > .ico.ico-new) .link {width: auto; max-width: calc(100% - 20px); display: inline-block;}

table[class*="table"] .title:not(.txtFull),
table[class*="table"] .link:not(.file),
table[class*="table"] .link.file .file-name {text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}

table[class*="table"] th.ta-c, table[class*="table"] td.ta-c {padding-left: 10px; padding-right: 10px;}

table[class*="table"] img {width: 100%; height: 100%; object-fit: contain;}
table[class*="table"] img.img-mainVisual {}

.line-l, table[class*="table"] .line-l {border-left: 1px solid var(--Form_border2);}
.line-t, table[class*="table"] .line-t {border-top: 1px solid var(--Form_border2);}

/*table list/view*/
.table.view,
.table.list {background-color: #fff;}
.table.view th, .table.view td,
.table.list th, .table.list td {padding-left: 20px; padding-right: 20px; height: 60px;}


/*table list*/
.table.list .btn-ix:has( > .txt):not(.size-s, .size-b) {padding: 7px 14px;}

/*sticky 사용전 여러상황 봐야함*/
.table.list thead {position: relative;}
.table.list thead tr:first-child > * {border-top: 1px solid #333;}
.table.list thead + tbody tr:first-child > * {border-top: 2px solid #333;}

.table.list tbody td .btn-ix .ico::before {--svg-color: var(--filterColor-1C1B1F);}

.table.list th[data-type="rc-box"],
.table.list th[data-type^="btn"],
.table.list td[data-type="rc-box"],
.table.list td[data-type^="btn"] {padding-left: 5px; padding-right: 5px;}

/*.table.list th[data-type^="btn"] .btn-ix,
.table.list td[data-type^="btn"] .btn-ix {margin-left: 10px; margin-right: 10px;}*/

.table.list tr:has( .rc-box input[type="checkbox"]:checked, .rc-box input[type="radio"]:checked) .title {font-weight: var(--fw-b);}

.table.list.list-fs1 {font-size: 12px; line-height: 16px;}
.table.list.list-fs1 * {font-size: inherit; line-height: inherit;}

.type-list-table:has( .table-listbox[style*="min-width"]) {width: 100%; /*overflow: auto; flex: 1 1 0; min-height: 130px; min-height: 340px;*/}
/*.type-list-table:has( .table .form-selectDiv) {min-height: 340px;}*/
.type-list-table:has( .table-listbox[style*="min-width"]):not([class*="scroll"]) {overflow: auto; flex: 1 1 0; min-height: 130px; min-height: 340px;}


.type-list-table:has( tbody#oeList),
.type-list-table.mode-all-scroll {overflow: auto; position: relative;}
.type-list-table:has( tbody#oeList) > .table-listbox ,
.type-list-table.mode-all-scroll > .table-listbox {overflow: visible;}
.type-list-table:has( tbody#oeList) table thead,
.type-list-table.mode-all-scroll table thead {position: sticky; top: 0; background-color: #fff; z-index: 1;}


/*OE table*/
.type-list-table:has( tbody#oeList) table thead::before {content: ''; display: block; width: auto; height: 1px; background-color: #333; position: absolute; left: 0; right: 0; top: 0;}
.type-list-table:has( tbody#oeList) table thead::after {content: ''; display: block; width: auto; height: 2px; background-color: #333; position: absolute; left: 0; right: 0; bottom: 0;}
.type-list-table:has( tbody#oeList) .table.list thead tr:first-child > * {border-top: 0 none;}
.type-list-table:has( tbody#oeList) .table.list thead + tbody tr:first-child > * {border-top: 0 none;}


.popup .type-list-table.mode-all-scroll {/*max-height: calc(100vh - var(--popHeadH) - var(--popFootH) - var(--pdLR));*/ min-height: var(--minH);}
.popup .pop-cont:has( > .type-list-table.mode-all-scroll ) {display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch;}


/*table view*/
.table.view {border: 1px solid var(--Form_border); border-bottom: 0px none}
.table.view th, .table.view td {padding: 14px 16px; border-color: var(--Form_border);}
/*.table.view thead tr:first-child > *,
.table.view tbody tr:first-child > * {border-top: 1px solid var(--Form_border);}
.table.view thead + tbody */
.table.view th {background-color: #F5F5F5; border-right: 1px solid var(--Form_border);}
.table.view tr > *:last-child {border-right: 0 none;}
.table.view .count-box {padding: 10px;}

.table.view.style1 {border-left: 0 none; border-right: 0 none;}



/*table style2*/
div:has( > table.table2) {overflow: hidden;}
table.table2 {/*border-collapse: separate; border-spacing: 8px; margin: -8px -8px 0 -8px; width: calc(100% + 16px);*/}
table.table2 th,
table.table2 td,
table.table2 thead th {padding: 14px 4px; color: #333; font-weight: var(--fw-m); line-height: 19px; letter-spacing: -0.07px; height: 48px; border: 0 none; vertical-align: top;}
table.table2 thead th {padding: 18px 4px; padding: 4px 4px 12px; height: 62px; vertical-align: bottom; font-size: var(--fs-h5); font-weight: var(--fw-sb);}
table.table2 .ico[class*="ico-"]::before {--svg-color: var(--filterColor-333);}
table.table2 > thead > tr > *,
table.table2 > tbody > tr > * {position: relative;}
table.table2 > thead > tr > *::before,
table.table2 > thead > tr > *::after,
table.table2 > tbody > tr > *::after {content: ''; display: block; width: auto; height: 2px; background-color: #333; position: absolute; left: 4px; right: 4px;}
table.table2 > thead > tr > *::before {top: 0;}
table.table2 > thead > tr > *::after,
table.table2 > tbody > tr > *::after {bottom: 0;}
table.table2 > thead > tr > *:first-child::before,
table.table2 > thead > tr > *:first-child::after,
table.table2 > tbody > tr > *:first-child::after {left: 0;}
table.table2 > thead > tr > *:last-child::before,
table.table2 > thead > tr > *:last-child::after,
table.table2 > tbody > tr > *:last-child::after {right: 0;}
table.table2 > thead > tr > *::before,
table.table2 > thead > tr > *::after {height: 4px;}

table.table2 > thead > tr > [colspan]::after {content: none;}
table.table2 > thead:has( > tr:nth-child(2)) > tr > th {padding: 8px; vertical-align: middle;}


/*sticky*/
/*table[class*="table"][class*=" list"] > thead {position: sticky; top: 0; left: 0; z-index: 1; right: 0;}
table[class*="table"][class*=" list"] > thead::before,
table[class*="table"][class*=" list"] > thead::after {content: ''; display: block; position: absolute; left: 0; right: 0; height: 2px; width: auto; background-color: #333; z-index: 1;}
table[class*="table"][class*=" list"] > thead::before {top: 0;}
table[class*="table"][class*=" list"] > thead::after {bottom: 0;}
table[class*="table"][class*=" list"] > thead > tr > th {background-color: #fff;}*/

/*sticky 추후 .mode-all-scroll > .table-listbox > table[class*="table"][class*=" list"] {position: sticky; top: 0; left: 0; z-index: 1; right: 0;}*/

/* data-scroll 컨테이너 내부의 테이블 설정 */
[data-scroll] table {border-collapse: separate; border-spacing: 0;}
[data-scroll] thead {position: -webkit-sticky !important; position: sticky !important; top: 0; z-index: 10; background-color: #fff; transform: translateZ(0); -webkit-transform: translateZ(0);}
[data-scroll] thead th {background-color: #fff;}

[data-scroll] .table.list thead::after {content: ''; display: block; width: auto; height: 2px; background-color: #333; position: absolute; bottom: 0; left: 0; right: 0;}
[data-scroll] .table.list thead + tbody tr:first-child > * {border-top-width: 0;}


/*list cell width*/
[class*="listview-"] {display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: flex-start; align-content: flex-start; width: 100%; --gab: 16px; gap: var(--gab);}
[class*="listview-"] > li {display: inline-flex; justify-content: space-between; align-items: center; width: 100%;}
.listview-2 > li {width: calc((100% - (var(--gab) * 1)) / 2);}
.listview-3 > li {width: calc((100% - (var(--gab) * 2)) / 3);}
.listview-4 > li {width: calc((100% - (var(--gab) * 3)) / 4);}
.listview-5 > li {width: calc((100% - (var(--gab) * 4)) / 5);}
.listview-6 > li {width: calc((100% - (var(--gab) * 5)) / 6);}
.listview-7 > li {width: calc((100% - (var(--gab) * 6)) / 7);}

/*brand, bi 메뉴 선택
.page-body.type-fullX:has( > .typeList-area) {padding-left: 0 !important; padding-right: 0 !important;}*/

.typeList-area,
.typeList-block,
.typeList-inner-block,
.typeList-listbox {display: flex; justify-content: flex-start; align-items: center; width: 100%;}

.typeList-area.flex-col,
.typeList-block.flex-col,
.typeList-inner-block.flex-col,
.typeList-listbox.flex-col {/*align-items: flex-start;*/}

.typeList-area.flex-col > *,
.typeList-block.flex-col > *,
.typeList-inner-block.flex-col > *,
.typeList-listbox.flex-col > * {width: 100%;}

.typeList-area {padding: 60px 0;}

.typeList-block {gap: 33px; /*padding-left: var(--pdLR); padding-right: var(--pdLR);*/}
.typeList-block + .typeList-block {border-top: 8px solid #EDEFF0; margin-top: 46px; padding-top: 40px;}

.typeList-inner-block {gap: 12px;}
.typeList-inner-block + .typeList-inner-block {border-top: 1px solid #E4E6E7; margin-top: 34px; padding-top: 15px;}

.typeList-listbox {}

.typeListInner-list {row-gap: 19px;}

.boxtype-item > .btn-ix {justify-content: flex-start; flex-wrap: wrap; width: 100%; padding: 10px 40px 10px 20px; border-radius: 0; gap: 4px;}
.boxtype-item > .btn-ix .txt {color: #666; font-size: 1.0625rem; font-style: normal; font-weight: var(--fw-r); line-height: 1.3125rem; text-align: left;}
.boxtype-item > .btn-ix .txt.product {font-weight: var(--fw-sb);}
.boxtype-item > .btn-ix .txt.pattern {}
.boxtype-item > .btn-ix .txt.new {color: #F00;}

.typeListInner-list[class*="listview-"] > .typeListInner-item {display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start;}
.typeListInner-item > .btn-ix {width: 100%; height: var(--mySize); flex-shrink: 0;}
.typeListInner-disclaimer {display: block; width: 100%; margin-top: 6px; padding: 0 2px; color: #666; font-size: 0.75rem; font-weight: var(--fw-r); line-height: 1.3; letter-spacing: 0; text-align: center; white-space: normal; word-break: keep-all;}
.typeListInner-item > .btn-ix:not([class*="size-"]) {--mySize: 54px !important;}
.typeListInner-item > .btn-ix .txt {color: #000; font-size: var(--fs-h5); font-weight: var(--fw-sb); line-height: var(--lh-h5); letter-spacing: 0.5px; text-align: center; justify-content: center;}
.typeListInner-item > .btn-ix .ico {}

.typeList-title {}
.typeList-title .title {color: var(--HK_or); font-size: var(--fs-h1); font-weight: var(--fw-sb); line-height: var(--lh-h1); letter-spacing: -0.14px;}

.typeListInner-title {color: #666; font-size: var(--fs-h5); font-weight: var(--fw-m); line-height: var(--lh-h5); letter-spacing: 0.5px;}

.typeListInner-listbox {}
.typeList-inner-block {}

.brand-Hankook .typeList-title .title.type-dep1 {color: var(--HK_or);}
.brand-Laufenn .typeList-title .title.type-dep1 {color: #44187F;}
.brand-Optimo .typeList-title .title.type-dep1 {color: #024487;}


.boxtype-listbox { --item:8; --itemH: 44px; --bg: #fff; --bd-color: #C0C0C0; --bd-width: 1px; --shadow: 0 0 10px rgba(0,0,0,.15); --tail-width: 15px; --tail-height: 12px; --tail-offset: 60px; --tail-offset: 40px; --arrowTop: 16px;
  background: var(--bg); border: var(--bd-width) solid var(--bd-color); border-radius: 8px; filter: drop-shadow(var(--shadow));  margin-top: var(--arrowTop);
  position: absolute; top: var(--itemH); left: 0; display: inline-block; padding: 28px 10px; min-width: 100%; display: none;
}
.boxtype-listbox[class*="arrow-"][class*="bottom"] {margin-top: calc(-1 * var(--arrowTop)); margin-bottom: 0;}
.boxtype-listbox .boxtype-list {background: var(--bg); border: var(--bd); border-radius: 0px; width: max-content; height: auto; max-width: calc(100vw - (var(--pdLR) * 2)); min-height: calc(1 * var(--itemH)); max-height: calc(var(--item) * var(--itemH)); max-height: calc(45vh - (var(--pdLR) * 2)); overflow-x: hidden; overflow-y: auto;}
.boxtype-listbox::before,
.boxtype-listbox::after {content: ''; position: absolute; width: 0; height: 0; z-index: 1;}
.boxtype-listbox::after{
  top: calc(-1 * var(--tail-height));
  left: var(--tail-offset);
  border-left: calc(var(--tail-width) / 2) solid transparent;
  border-right: calc(var(--tail-width) / 2) solid transparent;
  border-bottom: var(--tail-height) solid var(--bg);
  z-index: 2;
}
/* 꼬리(테두리) – 살짝 크게 깔아 테두리처럼 보이게 */
.boxtype-listbox::before{
  top: calc(-1 * var(--tail-height) - var(--bd-width));
  left: calc(var(--tail-offset) - var(--bd-width));
  border-left: calc(var(--tail-width) / 2 + var(--bd-width)) solid transparent;
  border-right: calc(var(--tail-width) / 2 + var(--bd-width)) solid transparent;
  border-bottom: calc(var(--tail-height) + var(--bd-width)) solid var(--bd-color);
}
.boxtype-listbox[class*="arrow-"][class*="bottom"]::after,
.boxtype-listbox[class*="arrow-"][class*="bottom"]::before {transform: rotate(180deg);}
.boxtype-listbox[class*="arrow-"][class*="bottom"]::after {top: auto; bottom: calc(-1 * var(--tail-height));}
.boxtype-listbox[class*="arrow-"][class*="bottom"]::before {top: auto; bottom: calc(-1 * var(--tail-height) - var(--bd-width));}
.boxtype-listbox[class*="arrow-"][class*="right"]::after {left: auto; right: var(--tail-offset);}
.boxtype-listbox[class*="arrow-"][class*="right"]::before {left: auto; right: calc(var(--tail-offset) - var(--bd-width));}

.itemListSH:has( .boxtype-listbox.open) {position: relative;}
.itemListSH .boxtype-listbox.open {display: flex; z-index: 1;}


.textarea-editer {min-height: 200px;}


/*border/bg style*/
.box-style1 {background-color: #f9f9f9 !important; border-radius: 10px;}
.box-style1 .box-style-inner {background-color: #fff; border-radius: 20px; padding: 50px 60px;}
.box-style2 {border: 1px solid var(--Form_border2); border-radius: 20px;}
.box-style3 {background-color: #FFF; border-radius: 10px; box-shadow: 0 10px 30px 0 rgba(0, 0, 0, 0.05); box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.03);}
.box-style4 {border: 1px solid var(--Form_border); border-radius: 10px;}
.box-style5 {background-color: #f5f5f5 !important; border-radius: 10px;}


.accItem-textbox {display: flex; justify-content: flex-start; align-items: center;}
.accItem-textbox .textbox {display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 5px;}
.accItem-textbox .txt {font-size: var(--fs-body); line-height: 20px; line-height: var(--lh-body); color: #666;}
.accItem-textbox .tit {color: #333; font-weight: var(--fw-sb); font-size: var(--fs-h4);}
.accItem-textbox.ing-mode .state,
.accItem-textbox.end-mode .state {color: #07F; font-weight: var(--fw-m); text-shadow: 0 0 #07F;}
.accItem-textbox.end-mode .state {color: #C0C0C0; text-shadow: 0 0 #C0C0C0;}

/*아코디언 스타일 1 + 기능 없어도 스타일같으면 사용*/
.acc-area {position: relative;}
.acc-area::before {content: ''; display: block; width: auto; height: 1px; background-color: #fff; position: absolute; top: -1px; left: 0; right: 0;}

.desc-box .ico[class*="ico-info-"],
.rcSec-row .dl-formbox .before-mode .ico[class*="ico-info-"],
.info-box .ico[class*="ico-info-"] {width: 60px; height: 60px;}

.dragDrap-box .ico[class*="ico-info-"]::before,
.item-file .ico[class*="ico-info-"]::before {--svg-color: var(--filter-dis);}
.dragDrap-box .info-desc,
.item-file .info-desc {color: var(--Form_dis_color);}

.item-file:has( > .info-box) {position: relative}
.item-file:has( > .info-box) > .info-box {position: absolute; bottom: 20px; left: 0; right: 0; min-height: 88px;}
.item-file:has( > .info-box) .file-list {position: relative; z-index: 1;}

.file-list:has( > .info-box) {position: relative;}
.file-list:has( > .info-box) > .info-box {position: absolute; left: 0; right: 0; top: 0; bottom: 0; width: 100%;}

.acc-area, .acc-list {width: 100%; display: flex; flex-direction: column; gap: 4px;}
.acc-list:has( > .box-style1) {gap: 8px;}

.acc-item {display: flex; flex-direction: column; width: 100%;}

.accItem-head {min-height: 44px; padding: 20px 30px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; column-gap: 16px; row-gap: 8px;}
.page-search ~ .acc-area .accItem-head {padding-left: var(--pdLR); padding-right: var(--pdLR);}
.accItem-textbox .textbox .txt.tit,
.accItem-head .tit {font-size: var(--fs-h3B); line-height: 28px; line-height: var(--lh-h3B); color: #333; font-weight: var(--fw-sb); text-align: left;}

.accItem-body {padding: 20px 30px;}
.accItem-body[data-id] {display: none;}
.accItem-body .accItemBody-inner ~ .etc-inner {margin-top: 20px;}
.accItem-body .accItemBody-inner:last-child {margin-bottom: 10px;}
.accItem-body .accItemBody-inner:has( .boxInner-pos1) {position: relative;}
.accItem-body .accItemBody-inner .boxInner-pos1 {position: absolute; left: 50%; bottom: calc((var(--mySize) * -1) / 2); transform: translateX(-50%);}

.accItem-body[style*="display"][style*="block"] {display: flex !important; flex-direction: column; justify-content: flex-start; align-items: flex-start; width: 100%;}
.accItem-body > div {width: 100%;}

.accItem-body .boxLoading {z-index: unset;}

.accItem-btn {position: relative; padding: 8px 0; min-height: 44px; display: inline-flex; justify-content: flex-start; align-items: center;}
.accItem-btn[data-ref] {padding: 8px 44px;}
.accItem-btn[data-ref]::before {content: ''; display: block; width: 44px; height: 44px; background: url(../images/ico/ico-arrow2.png) center center no-repeat; position: absolute; left: 0; top: 0; transform: rotate(180deg); transition: transform .4s;}
.accItem-btn[data-ref].on::before {transform: rotate(0deg);}

.accItem-foot {display: flex; justify-content: space-between; align-items: center; width: 100%; gap: 12px; padding: 23px 20px;}
.accItem-foot .accItemFoot-inner {display: inline-flex; justify-content: flex-start; align-items: center; max-width: 100%; gap: 12px;}
.accItem-foot .left {justify-content: flex-start;}
.accItem-foot .center {justify-content: center;}
.accItem-foot .right {justify-content: flex-end}
.accItem-foot > .accItemFoot-inner:first-child:last-child {flex: 1;}

.dl-formbox > .form > .left,
.accItem-head .left,
.dl-formbox > .form > .right,
.accItem-head .right {display: inline-flex; justify-content: flex-start; align-items: center; flex-wrap: wrap; column-gap: 16px; row-gap: 6px; max-width: 100%;}
.dl-formbox > .form > .left:not( .right),
.accItem-head .left:not( .right){ flex: 1;}
.dl-formbox > .form > .right,
.accItem-head .right {justify-content: flex-end;}
.dl-formbox > .form > .center,
.accItem-head .center {justify-content: center;}

.dl-formbox > .form:has( > .left, > .right, .center),
.accItem-head .accItemHead-inner {display: flex; justify-content: space-between; align-items: center; gap: 10px;}
.accItem-head.flex-col .accItemHead-inner {width: 100%;}
.accItem-head .right:has( .imgThum-list) {width: 50%; max-width: 50%; /*position: relative;*/}

.accItem-head .right:has( .imgThum-list) .imgThum-list {/*width: 376px;*//*justify-content: flex-end; overflow: hidden; overflow-x: auto;*/ position: relative;}
.accItem-head .right:has( .imgThum-list)::before {content: ''; width: 42px; height: 100%; background: #FFFFFF; background: linear-gradient(90deg, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 100%); position: absolute; left: 0; top: 0; z-index: 1; content: none;}

.accItem-head:has(> .accItemHead-inner.box-style1) {padding: 0;}
.accItem-head:has(> .accItemHead-inner.box-style1) .accItemHead-inner {min-height: 83px; }
.accItem-head:has(> .accItemHead-inner.box-style1) .accItemHead-inner.box-style1 {padding: 10px 30px;}

.dl-formbox > .label,
.form-box .box-inner-label,
.acc-area .form-box .box-inner-label,
.accItem-label {font-size: var(--fs-h5); font-weight: var(--fw-m); line-height: 24px; line-height: var(--lh-h5); color: var(--Gray_666);}

.form-box .box-inner-form,
.acc-area .form-box .box-inner-form,
.accItem-form {display: inline-flex; justify-content: flex-start; align-items: center; gap: 10px; width: 800px; max-width: 80%;}
.accItem-form.dl-formbox,
.form-box .box-inner-form,
.acc-area .form-box .box-inner-form {width: auto; max-width: unset; flex: 1 1 0;}

.accItem-form .form-input {width: calc(100% - 100px); font-weight: var(--fw-m);}
.form-box .box-inner-form .form-input,
.acc-area .form-box .box-inner-form .form-input {width: 100%;}

.dl-formbox > .form.type2,
.accItem-form2{ width: auto; display: inline-flex; flex: 1 1 0; justify-content: flex-start; align-items: center; gap: 10px;}
.dl-formbox > .form.type2 .form-input,
.dl-formbox > .form.type2 .form-select,
.accItem-form2 .form-input,
.dl-formbox > .form.type2 > .inner-group:not(.rc-group) { width: auto; flex: 1 1 0;}
.dis-style1:read-only,
.accItem-form2 .form-input:read-only{ background-color: #f5f5f5 !important;}

.dl-formbox > .form:has( > .inner-group),
.form:has( > .inner-form),
[class*="accItem-form"]:has( > .inner-group) {flex-wrap: wrap; row-gap: 5px;}
.dl-formbox > .form .inner-form,
.dl-formbox > .form .inner-group,
[class*="accItem-form"] > .inner-group {display: inline-flex; flex-wrap: nowrap; justify-content: flex-start; align-items: center; gap: 10px; row-gap: 5px;}

/*.dl-formbox > .form > .inner-group:not(.rc-group),*/
[class*="accItem-form"] > .inner-group:not(.rc-group) {flex: 1 1 0;}

.acc-style1 .accItem-head {padding: 0; min-height: unset;}
.acc-style1 .accItem-btn[data-ref] {width: 100%; padding: 4px 30px; min-height: 22px;}
.acc-style1 .accItem-btn[data-ref]::before {width: 20px; height: 20px; background-size: 12px auto; top: 4px;}
.acc-style1 .accItem-btn[data-ref].on {min-height: 28px;}
.acc-style1 .accItem-btn.type-r[data-ref]::before {left: auto; right: 0;}
.acc-style1 .acc-item:has( .accItem-btn.on) {background-color: #F5F5F5;margin-bottom: 2px;}
.acc-style1 .acc-item {row-gap: 5px;}
.acc-style1 .accItem-body {padding: 0;}

/*show/hide 액션없이 단순 디자인*/
.page-body > .acc-area.type-style1,
.page-body > .acc-area ~ .page-search {margin-top: 8px;}
.page-body > .acc-area .accItem-foot {}
/*.rcSec-cell > .form > .accItem-body,
.acc-area.type-style1 .acc-item > .accItem-body {display: block; display: flex;}*/
.rcSec-cell > .form > .accItem-body,
.rcSec-cell > .form > .accItem-body > .accItemBody-inner,
.acc-area.type-style1 .acc-item > .accItem-body > .accItemBody-inner {width: 100%;}

/*.dl-formbox > .form .accItem-body:not([data-id]),*/
.rcSec-cell .form:not(.before-mode) .accItem-body:not([data-id]) {display: flex;}

.acc-area.type-style1.file-list,
.page-body > .acc-area.type-style1:has( .acc-item.imgFile-item) {padding: 20px 30px; max-height: 740px; overflow-x: hidden; overflow-y: auto; background-color: rgba(249, 249, 249, 1); border-radius: 10px; row-gap: 20px;}

.box-style2 .acc-area.type-style1.file-list {background-color: transparent;}

/*box-style2 패딩0 : border타입*/
.accItem-body.box-style2 {padding: 0;}

.before-mode .accItem-body {min-height: 300px; display: flex; justify-content: center; align-items: center; align-items: stretch;}
.before-mode .accItem-body > .accItemBody-inner {display: flex; align-items: center; justify-content: center; flex-direction: column; row-gap: 20px; column-gap: 10px; width: 100%;}

/*플러그인 영역*/
.accItem-body.plugin-body {min-height: 778px; width:100%; display: flex; align-items: stretch; justify-content: space-between;}
.accItem-body.plugin-body > .accItemBody-inner {width: 100%; height: 100%;}
.accItem-head + .accItem-body.plugin-body {margin-top: 20px;}

.accItem-body.textarea-mode {padding-top: 0;}
.textarea-mode .form-textarea {width: 100%; border-radius: 10px; min-height: 100px; padding: 20px;}/*.accItem-body.textarea-mode .form-textarea*/
.textarea-mode .form-textarea:not(:hover, :focus) {border-color: #fff;}
.textarea-mode .count-box {width: 100%; margin-top: 5px; gap: 5px;}/*.accItem-body.textarea-mode .count-box*/
.textarea-mode .count-box .total::before {margin-right: 5px;} /*.accItem-body.textarea-mode .count-box .total::before*/

.accItem-body.plugin-body ~ .accItem-foot .btn-ix {box-shadow: 1px 1px 6.2px 0 rgba(0, 0, 0, 0.15);}

.detail-area .file-list .file-item .btn-box .btn-ix,
.acc-area .mode-btn-hs .btn-ix.target {display: none;}
html:not(.pcMode.webType) .acc-area .mode-btn-hs .btn-ix.target,
html:not(.pcMode.webType) .detail-area .file-list .file-item .btn-box .btn-ix,
.detail-area .file-list .file-item:hover .btn-box .btn-ix,
.acc-area .mode-btn-hs:hover .btn-ix.target {display: flex;}

.accItem-head .right:has( > .imgThum-list[id*="swiper"]) {max-width: 70%; gap: 0;}
.accItem-head .right > .imgThum-list[id*="swiper"] { min-width: 156px; max-width: calc(100% - 268px);}
.accItem-head .right > .imgThum-list[id*="swiper"] ~ * {margin-left: 16px;}
.accItem-head .right > .imgThum-list[id*="swiper"] ~ .img-plus {margin-left: 10px;}

.imgFile-item {display: flex; flex-direction: row; justify-content: space-between; align-items: stretch; width: 100%;}
.imgFile-item .item-img {display: flex; align-items: flex-end; align-items: stretch; justify-content: center; position: relative;}
.imgFile-item .item-img .img {background-position: center center; background-repeat: no-repeat; background-size: cover; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: inherit; overflow: hidden;}
.imgFile-item .item-img .desc-box {padding: 20px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 12px; position: relative; z-index: 1; color: #666;}
.imgFile-item .item-img .desc-box .text.flex-col {align-items: center;}
.imgFile-item .item-img .desc-box .innder-desc {color: #a2a2a2; font-size: var(--fs-caption);}
.imgFile-item .item-img .desc-box .btn-ix:last-child {margin-bottom: 15px; margin-top: 15px;}
.imgFile-item .item-file {padding: 20px; flex: 1; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 20px;}
.imgFile-item .item-file .file-box {max-width: calc(100% - 40px);}
.imgFile-item .item-file .btn-box {margin-right: -7px;}

.imgFile-item .item-img .img {flex-direction: column;}

.imgFile-item .item-img .image-controls-overlay { width: auto; height: auto; padding: 10px; min-height: 44px; display: flex; justify-content: flex-end; align-items: center; position: absolute; top: 0; /*left: 0;*/ right: 0;}

/*.imgFile-item .item-img .overlay-controls {display: flex; justify-content: flex-end; align-items: center; gap: 6px;}*/
.imgFile-item .item-img .image-controls-overlay {position: absolute; top: 0; right: 0; width: auto; height: auto; padding: 10px; min-height: 44px; display: flex; justify-content: flex-end; align-items: center;}
.imgFile-item .item-img .image-controls-overlay .icon-btn {width: 44px; height: 44px; background-color: var(--HK_blue); border-radius: 22px;}
.imgFile-item .item-img .image-controls-overlay .icon-btn:hover {transform: scale(1);}
.imgFile-item .item-img .image-controls-overlay .icon-btn {color: var(--filterColor-fff)}
.imgFile-item .item-img .image-controls-overlay .icon-btn .ico::before {--svg-color: var(--filterColor-fff)}
.imgFile-item .item-img .image-controls-overlay .icon-btn:hover {background-color: #004faa;}
.imgFile-item .item-img .image-controls-overlay .overlay-controls {display: flex; align-items: center; gap: 8px; background: rgba(0, 0, 0, 0.7); border-radius: 24px; padding: 6px; transition: all 0.3s ease;
	border-radius: 26px; padding: 0; gap: 0; background: transparent;
}
.imgFile-item .item-img .image-controls-overlay .overlay-controls:has( .action-buttons.expanded) {gap: 6px;}
.imgFile-item .item-img .image-controls-overlay .action-buttons {display: flex; gap: 8px; width: 0; overflow: hidden; opacity: 0; transition: all 0.3s ease; pointer-events: none;}
.imgFile-item .item-img .image-controls-overlay .action-buttons.expanded {width: auto; opacity: 1; pointer-events: auto; }

.imgFile-item .file-list { width: 100%; --gab: 20px;
	height: 100%; overflow: hidden; overflow-y: auto;
	height: auto; flex: 1 1 0;
}
.dragDrap-box .dragDrap-scollbox::-webkit-scrollbar,
.imgFile-item .file-list::-webkit-scrollbar {width: 6px; height: 6px;}

.dragDrap-box {overflow: hidden; width: 100%;}
.dragDrap-box .dragDrap-scollbox {position: absolute; left: 0; right: 0; top: 0; bottom: 0; overflow: auto; z-index: 1;}
.dragDrap-box .dragDrap-scollbox .file-list {overflow: unset;}

.dragDrap-box {--max-height: 740px; max-height: var(--max-height); }
.dragDrap-box .file-list {max-height: unset;}

.dragDrap-box:not(.type-layout) {flex: 1 1 0;}
.dragDrap-box:not(.type-layout) {position: relative;}
.dragDrap-box:not(.type-layout) > .info-box {position: absolute; left: 0; right: 0; top: 0; bottom: 0; width: 100%;}

.dragDrap-box.type-layout .dragDrap {width: 100%; min-height: 120px; display: flex; align-items: center; justify-content: center;}
.dragDrap-box.type-layout .dragDrap:has( + .dragDrap-result) {align-items: flex-end;}

.file-list > .file-item,
.imgFile-item .file-item { display: flex; justify-content: space-between; align-items: center; padding: 8px 20px; background-color: #fafafa; border-radius: 20px;}
.file-list > .file-item .file-nt,
.imgFile-item .file-item .file-nt {font-weight: var(--fw-sb); line-height: 20px; word-break: break-all;}
.file-list > .file-item .file-size,
.imgFile-item .file-item .file-size { font-size: var(--fs-caption); line-height: 18px; line-height: var(--lh-caption); color: #666;}
.file-list > .file-item .file-nt + .file-size,
.imgFile-item .file-item .file-nt + .file-size {margin-top: 7px;}

.file-list > .file-item .file-box {width: 100%; cursor: pointer;}
/*.file-list > .file-item .file-box .file-nt {display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 100%;}*/

.imgFile-item .form-box {display: flex; justify-content: space-between; align-items: center; width: 100%; gap: 10px;}
.imgFile-item .form-box [class*="box-inner-"] {display: inline-flex; justify-content: flex-start; align-items: center; gap: 10px;}
.imgFile-item .form-box [class*="box-inner-"].count-box {gap: 3px;}
.imgFile-item .form-box [class*="box-inner-"].count-box .total::before {margin-right: 3px;}
.imgFile-item .form-box [class*="box-inner-"]:last-of-type {justify-content: flex-end;}
.imgFile-item .form-box .box-inner-label {min-width: 40px;}
.imgFile-item .form-box .box-inner-label .rc-box {gap: 10px;}
.imgFile-item .form-box.url-box .box-inner-form {flex: 1; padding-right: 10px;}
.imgFile-item .form-box.ta-c {justify-content: center;}
.imgFile-item .form-box.ta-l {justify-content: flex-start;}
.imgFile-item .form-box.ta-r {justify-content: flex-end;}

.imgFile-item .form-box:has( > .box-inner-label) {flex-wrap: wrap;}

.imgFile-item.fix-imgitem .item-img,
.imgFile-item.fix-imgitem .item-file {min-height: 300px; background-color: #fff;}
.imgFile-item.fix-imgitem .item-img {width: 327px; min-width: 325px; height: auto; min-height: 300px;}
.imgFile-item.fix-imgitem .item-img + .item-file {max-width: calc(100% - 345px);}

.imgFile-item-style1 {--minus: 100px;}
.imgFile-item-style1 .item-img,
.imgFile-item-style1 .item-file {border-radius: 10px;}
.imgFile-item-style1 .item-img {width: 120px !important; height: 80px; border: 1px solid var(--Form_border); opacity: 0.7; overflow: hidden;}
.imgFile-item-style1 .item-img img {width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; margin-left: auto; margin-right: auto;}
.imgFile-item-style1 .item-img + .item-file {width: calc(100% - 140px);}
.imgFile-item-style1 .item-file {display: flex; padding: 8px 20px; align-items: center; gap: 10px; flex-shrink: 0; background-color: #FAFAFA;}
.imgFile-item-style1:hover .item-img {opacity: 1;}

.imgFile-item-style1 .item-btn,
.imgFile-item-style1 .item-form {display: inline-flex; justify-content: flex-start; align-items: center;}

.imgFile-item-style1 .item-form {width: calc(50% - var(--minus));}
.imgFile-item-style1 .item-file {width: calc(45% - var(--minus));}

.imgFile-item-style1 .item-form {gap: 10px;}
.imgFile-item-style1 .item-form .item-inner-label {color: var(--Grey_666); font-size: var(--fs-h5); font-weight: var(--fw-sb); line-height: var(--lh-h5)}
.imgFile-item-style1 .item-form .item-inner-form {flex: 1 1 0;}
.imgFile-item-style1 .item-form .item-inner-form > .form-input,
.imgFile-item-style1 .item-form .item-inner-form > .form-select {width: 100%;}

/*.acc-area.type-style1.file-list .acc-item 따로 다른곳 사용시 같이 해당되게 넣어주기*/
.acc-area.type-style1.file-list .acc-item:not([class*="imgFile-item-style"]),
.imgFile-item-style1 {flex-direction: row; gap: 20px;
    width: 100%; display: flex; justify-content: space-between; align-items: stretch;
}
.imgFile-item-style1:has( .item-form) {justify-content: flex-start;}

.acc-area.type-style1.file-list {padding-bottom: 0;}
.acc-area.type-style1.file-list > .acc-list.file-item {border-radius: 10px; border: 1px solid var(--Form_border); background-color: #ffffff; padding: 20px;}
.acc-area.type-style1.file-list > .acc-list.file-item:last-child {margin-bottom: 20px;}


.count-box {display: inline-flex; justify-content: flex-start; align-items: center; flex-wrap: nowrap; min-height: 17px; --fc-txt:#71747B; --fc-bar:#71747B; --fc-cnt: #C0C0C0;}
.count-box .ico {min-width: 16px; width: 16px; height: 16px; margin-top: 1px;}
.count-box .ico::before {background-size: contain; --svg-color: var(--filterColor-71747B)}
.count-box .txt {color: var(--fc-txt);}
.count-box .count {color: var(--fc-cnt);}
.count-box .total::before {content: '/'; color: var(--fc-bar);}
.count-box .ico:has( + .txt) {margin-right: 6px;}
.count-box .ico ~ .count + .total {padding-left: 3px;}
.count-box .ico ~ .count + .total::before {margin-left: -2px; margin-right: 2px;}

.count-box.style1 .txt {font-size: var(--fs-h5); line-height: var(--lh-h5);}
.count-box.style1 .total {color: var(--fc-cnt);}
.count-box.style1 .total::before {margin-left: 4px; margin-right: 4px;}

.count-box.style-rev {--fc-txt:#C0C0C0; --fc-cnt: #71747B;}

.count-box:has( + .acc-area.type-style1.file-list) {padding-left: 30px; padding-right: 30px;}
.count-box.file-total,
.box-style2 .count-box.file-total {--fc-txt:#333; --fc-cnt: var(--HK_blue); gap: 4px;}


/*edit-mode*/
.rcSec-row .count-box,
.dl-formbox .count-box,
.acc-area .count-box {justify-content: flex-end; gap: 4px; --fc-txt: #C0C0C0; --fc-bar:#333; --fc-cnt: var(--HK_blue);}
.rcSec-row .count-box .txt,
.dl-formbox .count-box .txt,
.acc-area .count-box .txt {/*color: #C0C0C0;*/ font-size: var(--fs-h5); font-weight: var(--fw-m); line-height: 24px; line-height: var(--lh-h5); }
/*.rcSec-row .count-box .count,
.dl-formbox .count-box .count,
.acc-area .count-box .count {color: #07F;}*/
.rcSec-row .count-box .total::before,
.dl-formbox .count-box .total::before,
.acc-area .count-box .total::before { /*color: #333;*/ margin-right: 4px;}

.acc-area .acc-item.edit-mode > .accItem-head > .left {column-gap: 0; width: 100%;}
.acc-area .acc-tiem .accItem-form,
.acc-area .acc-item.edit-mode > .accItem-head > .right,
.acc-area .acc-item.edit-mode .accItem-btn .tit {display: none;}
.acc-area .acc-item.edit-mode .accItem-btn {padding-right: 0;}

.acc-area .acc-item.edit-mode .accItemBody-inner {display: flex; flex-direction: column; align-items: center; justify-content: center; row-gap: 20px; column-gap: 10px; min-height: 580px;}

/*pdf import custom*/
.accItem-body .positMapPdfViewer {position: relative;}
.accItem-body .positMapPdfViewer div:has( > canvas) {border-radius: 10px; background-color: transparent !important; padding: 0 5px !important;}

.acc-area .swiper-button-next,
.acc-area .swiper-button-prev,
.accItem-body .positMapPdfViewer button { z-index: 3; width: 50px; height: 50px; background-color: rgba(0, 0, 0, 0.03); border-radius: 25px; position: absolute; top: 50%; margin-top: -25px; font-size: 0; text-indent: -999px; overflow: hidden; display: flex; justify-content: center; align-items: center;}
.acc-area .swiper-button-next:hover,
.acc-area .swiper-button-prev:hover,
.accItem-body .positMapPdfViewer button:hover {background-color: rgba(0, 0, 0, 0.1);}
.accItem-body .positMapPdfViewer button::before {content: ''; display: inline-block; vertical-align: middle; width: 25px; height: 25px; --svg-color: var(--filterColor-000);}
.accItem-body .positMapPdfViewer button:has( + div) {left: 5px;}
.accItem-body .positMapPdfViewer button:has( + div)::before {transform: rotate(180deg);}
.accItem-body .positMapPdfViewer div + button {right: 5px;}

.pdf-prev-btn::before,
.accItem-body .positMapPdfViewer button.pdf-prev-btn:has( + div)::before {transform: rotate(0deg);}

.acc-area .swiper-button-next,
.acc-area .swiper-button-prev {color: #000;}
.acc-area .swiper-button-next svg,
.acc-area .swiper-button-prev svg {width: 25px; height: 25px;}

.acc-area .accItem-body:has( .boxLoading) {position: relative;}
.acc-area .accItem-body:has( .boxLoading) .boxLoading {position: absolute; top: 20px; left: 30px; right: 30px; bottom: 20px; width: auto; height: auto;}


/*label+form layout*/
.rowCell-section {display: flex; flex-direction: column; gap: 12px; width: 100%; margin-top: 12px; margin-bottom: 12px;}
.rcSec-row {min-height: 44px; padding: 20px 30px; padding: 4px 0; display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap; column-gap: 16px; row-gap: 8px; width: 100%; margin-top: 6px; margin-bottom: 6px;}
.rcSec-cell {display: inline-flex; justify-content: flex-start; align-items: center; flex-wrap: wrap; column-gap: 16px; row-gap: 6px; max-width: 100%;}
.rcSec-row > .rcSec-cell:first-child:last-child {width: 100%;}
.rowCell-section .rcSec-row {margin-top: 0; margin-bottom: 0;}
/*.rcSec-cell.dl-formbox .label {font-size: var(--fs-h5); font-weight: var(--fw-m); line-height: 24px; line-height: var(--lh-h5); color: #666; text-shadow: 0 0 #666;}
.rcSec-cell.dl-formbox .form {}*/
.rcSec-row[class*="box-style"],
.rowCell-section[class*="box-style"] {padding: 20px 30px;}
.rowCell-section[class*="box-style"] .rcSec-row {padding: 0;}

.rcSec-cell.flex-col {row-gap: 12px;}
.rcSec-cell.flex-col > .form {flex: 1 1 0;}

.rcSec-row ~ * { margin-top: 6px; margin-bottom: 6px;}
.rcSec-row.box-style1 ~ * {border-radius: 10px;}
.box-style1 .box-style2 {border-radius: 10px; background-color: #fff; border-width: 0;}

.rcSec-cell .form-box[class*="box-style"] {padding: 10px 20px;}

/*qna (table style) + acc기능*/
.tablestyle-listbox {width: 100%;}
.tablestyle-list {border-top: 1px solid #333; line-height: 20px; width: 100%;}

.tablestyle-list .list-item,
.tablestyle-list .qna-item {border-bottom: 1px solid #333;}
.tablestyle-list .qna-item .btn-ix {min-height: 30px; min-width: 30px;}
.tablestyle-list .qna-item .btn-ix[class*="type"]:has( > .txt) {padding: 3px 16px;}
.tablestyle-list .list-item .btn-ix .ico,
.tablestyle-list .qna-item .btn-ix .ico {min-width: 20px; width: 20px; height: 20px;}
.tablestyle-list .qna-item .btn-ix .ico::before {--svg-color: var(--filterColor-333);}
.tablestyle-list .qna-item .btn-ix .txt {font-size: var(--fs-caption); font-weight: var(--fw-m);}

.tablestyle-list .list-item .inner-day,
.tablestyle-list .qna-item .qna-inner-day {font-size: var(--fs-caption); line-height: 24px; font-weight: var(--fw-m);}
.tablestyle-list .list-item .inner-tit,
.tablestyle-list .qna-item .qna-inner-tit {line-height: 24px; word-break: keep-all;}
.tablestyle-list .list-item .inner-tit {font-size: var(--fs-h5); line-height: 20px; line-height: var(--lh-h5); }
.tablestyle-list .list-item .inner-cont,
.tablestyle-list .qna-item .qna-inner-cont {line-height: 26px;}
.tablestyle-list .list-item .inner-cont p {margin: 8px 0;}
.tablestyle-list .list-item .inner-cont img {max-width: 100%; margin: 16px 0;}
.tablestyle-list .list-item .inner-cont img + img {margin-top: 0px;}

.tablestyle-list .list-item .inner-tit .ico-noti {margin-top: -1px;}
.tablestyle-list .list-item .inner-tit .ico-noti::before {background-size: 100% auto; transform: scale(.6);}

.tablestyle-list .list-item:has(.listItem-body[data-id]) .ico-noti::before {opacity: .6;}
.tablestyle-list .list-item:has(.listItem-body[data-id][style*="display"][style*="block"]) .ico-noti::before {opacity: 1; --svg-color: var(--filterColor-000);}

.tablestyle-list .list-item .listItem-head .btn-ix .ico::before,
.tablestyle-list .qna-item .qnaItem-head .btn-ix .ico::before {--svg-color: var(--filterColor-1C1B1F);}
.tablestyle-list .qna-item .qnaItem-body .qna-inner-day,
.tablestyle-list .qna-item .qnaItem-head:has( .qnaItem-btn.on) .qna-inner-day {color: #888;}
.tablestyle-list .qna-item .qnaItem-head:has( .qnaItem-btn.on) .qna-inner-tit {line-height: 26px;}
.tablestyle-list .list-item .listItem-head:has( .listItem-btn.on) .inner-tit {font-weight: var(--fw-sb);}

/*.tablestyle-list .list-item [class*="-box"],*/
.tablestyle-list .list-item .cont-box,
.tablestyle-list .list-item .etc-box,
.tablestyle-list .qna-item [class*="qna-"][class*="-box"] {display: inline-flex; flex-direction: column; justify-content: center; align-items: flex-start; column-gap: 32px; row-gap: 0; padding: 10px 12px;}
.tablestyle-list .list-item [class*="-box"].right,
.tablestyle-list .qna-item [class*="qna-"][class*="-box"].right {justify-content: flex-end;}
.tablestyle-list .list-item .listItem-body .cont-box,
.tablestyle-list .qna-item .qnaItem-body .qna-cont-box {padding-top: 0; padding-bottom: 0;}
.tablestyle-list .list-item .listItem-head .tit-box {padding-left: 24px;}

.tablestyle-list .list-item .listItem-body [class*="-box"] [class*="inner-"],
.tablestyle-list .qna-item > .qnaItem-body .qna-inner {flex-direction: column; justify-content: center; align-items: flex-start; padding-top: 0; padding-bottom: 0;}

.tablestyle-list .list-item .listItem-head [class*="-box"],
.tablestyle-list .qna-item .qnaItem-head [class*="qna-"][class*="-box"] {row-gap: 1px;}

.tablestyle-list .list-item .listItem-head .btn-box,
.tablestyle-list .qna-item .qnaItem-head .qna-btn-box {flex-direction: row; align-items: center; justify-content: flex-start; flex-wrap: nowrap; column-gap: 58px;}
.tablestyle-list .list-item .listItem-head .inner-btn,
.tablestyle-list .qna-item .qnaItem-body .qna-inner-btn {padding-top: 17px; padding-bottom: 3px;}

.tablestyle-list .list-item .listItem-head,
.tablestyle-list .list-item .listItem-body,
.tablestyle-list .qna-item > .qnaItem-head,
.tablestyle-list .qna-item > .qnaItem-body {display: flex; justify-content: space-between; align-items: center; column-gap: 16px; row-gap: 6px;}
.tablestyle-list .list-item .listItem-head,
.tablestyle-list .qna-item > .qnaItem-head {padding: 2px 0;}
.tablestyle-list .qna-item > .qnaItem-body { padding: 10px; border-top: 1px solid var(--Form_border2); background-color: #f5f5f5;}
.tablestyle-list .qna-item > .qnaItem-body[data-id] {display: none;}
.tablestyle-list .qna-item > .qnaItem-head,
.tablestyle-list .qna-item > .qnaItem-body {padding-left: 114px; min-height: 100px; position: relative;}
.tablestyle-list .qna-item > .qnaItem-head::before,
.tablestyle-list .qna-item > .qnaItem-body::before {content: ''; display: flex; align-items: center; justify-content: center; width: 60px; height: auto; font-size: var(--fs-h3); line-height: 20px; line-height: var(--lh-h3);  font-weight: var(--fw-b); text-align: center; position: absolute; left: 0; top: 0; bottom: 0;}
.tablestyle-list .qna-item > .qnaItem-head::before {content: 'Q';}
.tablestyle-list .qna-item > .qnaItem-body::before {content: 'A';}

.tablestyle-list .list-item .listItem-head,
.tablestyle-list .list-item .listItem-body {min-height: 100px;}
.tablestyle-list .list-item .listItem-head {position: relative;}
.tablestyle-list .list-item .listItem-head + .listItem-body { padding: 0; border-top: 1px solid var(--Form_border2);}
.tablestyle-list .list-item .listItem-body[data-id] {display: none;}
.tablestyle-list .list-item .listItem-body .cont-box {background-color: #f5f5f5; padding: 10px 24px;}
.tablestyle-list .list-item .listItem-body .etc-box {padding: 32px 24px;}
.tablestyle-list .list-item .listItem-body .cont-box + .etc-box {border-top: 1px solid var(--Form_border2);}
.tablestyle-list .list-item .listItem-body .etc-box {display: flex; justify-content: space-between; align-items: center; flex-direction: row;}
.tablestyle-list .list-item .listItem-body .etc-box .left,
.tablestyle-list .list-item .listItem-body .etc-box .right {display: inline-flex; justify-content: flex-start; align-items: center; gap: 18px;}
.tablestyle-list .list-item .listItem-body .etc-box .right {justify-content: flex-end;}

.tablestyle-list .list-item .listItem-body .cont-box,
.tablestyle-list .list-item .listItem-body .etc-box {width: 100%;}

.tablestyle-list .list-item .listItem-btn,
.tablestyle-list .qna-item .qnaItem-btn {position: relative; padding: 8px 22px; min-height: 44px; display: inline-flex; justify-content: flex-start; align-items: center;}
.tablestyle-list .list-item .listItem-btn::before,
.tablestyle-list .qna-item .qnaItem-btn::before {content: ''; display: block; width: 44px; height: 44px; background: url(../images/ico/ico-arrow2.png) center center no-repeat; position: absolute; left: 0; top: 0; transform: rotate(180deg); transition: transform .4s;}
.tablestyle-list .list-item .listItem-btn.on::before,
.tablestyle-list .qna-item .qnaItem-btn.on::before {transform: rotate(0deg);}

.tablestyle-list .list-item > .listItem-body:not([data-id]),
.tablestyle-list .qna-item > .qnaItem-body:not([data-id]) {display: flex;}

.tablestyle-list.list-style1 .list-item:not(:last-child) {border-bottom-color: var(--Gray_DDD);}
.tablestyle-list.list-style1 .list-item:not(.mode-abled) {background-color: #f5f5f5;}
.tablestyle-list.list-style1 .list-item:not(.mode-abled) .cont-etc .btn-ctrl {display: none;}
.tablestyle-list.list-style1 .list-item.mode-abled .cont-etc .btn-ctrl {display: inline-flex;}

.cont-form .tablestyle-list.list-style1 .list-item {background-color: #fff;}
.cont-form .tablestyle-list,
.cont-form .tablestyle-list .list-item {border-color: var(--Gray_DDD);}
.cont-form .tablestyle-list .list-item {background-color: #fff;}

/*.listItem-body 안의 컨텐츠 */
.item-previewType {display: flex; justify-content: space-between; align-items: stretch !important; min-height: unset !important; padding: 10px 16px !important; flex-wrap: wrap; gap: 24px !important;}
.item-previewType .cont-preview,
.item-previewType .cont-info,
.item-previewType .cont-etc {display: flex; justify-content: flex-start; align-items: center; gap: 18px;}
.item-previewType .cont-etc {gap: 10px; justify-content: flex-end; flex: 1 1 0;}
.item-previewType .cont-preview {width: 440px; max-width: 44%; min-width: 200px;}
.item-previewType .cont-info {flex: 1 1 0;}
.item-previewType .descBox-tit {white-space: nowrap;}
.item-previewType .cont-info .desc-box.style1.fs-style1 {row-gap: 8px; }
.item-previewType .cont-info .desc-box.style1 .descBox-tit:has( + dd, .descBox-txt) {margin-right: 16px;}
/*.item-previewType .cont-info .desc-box,
.item-previewType .cont-info .desc-box.flex-col > .desc-inbox {width: 100%;}
.item-previewType .cont-info .desc-box.flex-col > .desc-inbox {justify-content: flex-start;}
.item-previewType .cont-info .desc-box.flex-col > .desc-inbox > .descBox-txt {flex: 1 1 0;}
.item-previewType .cont-info .rc-group .rc-box {}*/
.item-previewType .cont-info .desc-box.style1 .desc-inbox {align-items: center; justify-content: flex-start;}

.item-previewType .va-t ~ .cont-info .desc-box.style1.fs-style1 {padding-top: 5px; padding-bottom: 5px;}

.cont-form .rc-group {display: flex; justify-content: flex-start; align-items: center; gap: 0;}
.cont-form .rc-group > .rc-box {margin: 0 10px;}
.cont-form .item-previewType {padding: 16px !important;}
.cont-form .desc-box.flex-col,
.cont-form .desc-box.flex-col .desc-inbox,
.cont-form .desc-box.flex-col .descBox-txt {width: 100%;}
.cont-form .group-box {gap: 10px; width: 100%;}
.cont-form .group-inner {align-items: center; gap: 10px;}
.cont-form .group-inner.form-box:not(.btn-box) {flex: 1 1 0;}
.cont-form .group-inner.form-box > [class*="form-"]:not(div,span,p) {flex: 1 1 0;}
.cont-form .group-box.count-box,
.cont-form .group-inner.count-box {gap: 0;}
.cont-form .count-box {--fc-txt: #666; --fc-bar: #666; --fc-cnt: #666;}
.cont-form .desc-box.flex-col .desc-inbox {--minH: 44px; min-height: var(--minH);}
.cont-form .desc-box.flex-col .desc-inbox .descBox-txt,
.cont-form .desc-box.flex-col .desc-inbox .descBox-tit {min-height: var(--minH); display: inline-flex; align-items: center; justify-content: flex-start;}


/*모바일만 해당시 옮기기*/
.tablestyle-list .list-item .listItem-head:has( .listItem-btn:not(.on)) .inner-tit,
.tablestyle-list .qna-item .qnaItem-head:has( .qnaItem-btn:not(.on)) .qna-inner-tit {
	display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 100%;
	white-space: normal; text-align: left; word-wrap: break-word; display: -webkit-inline-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
}


/*title*/
.page-top {margin-bottom: 12px;}
.page-top:has( [class*="link-type"]:not(.flex-col)) {text-align: center;}
.page-top [class*="link-type"]:not(.flex-col):has( .btn-ix.downtxt) {display: inline-grid;}

.page-top + .page-title {margin-top: 20px;}

.page-head .page-top {margin-bottom: 14px; margin-top: 17px;}
.page-head > .page-title:last-child {margin-bottom: 13px;}

.title.type-dep1,
.area-head .title,/*페이지 타이틀 없는 화면의 페이지타이틀*/
.page-title .title {font-size: var(--fs-h1); line-height: var(--lh-h1); color: var(--Gray_333);}
.title[class*="type-dep2"] {font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: var(--fw-b);}
.title[class*="type-dep2"].type-dep2-style1 {font-size: var(--fs-h2); line-height: var(--lh-h2); font-weight: var(--fw-sb);}

.title.title-bi {padding: 5px 0;}
.title.title-bi img,
.title.title-bi .title-img-bi {height: 20px;}

.desc {color: #666; line-height: var(--lh-body);}

.textGubun-type1 {display: inline-flex; justify-content: flex-start; align-items: center; flex-wrap: wrap;}
.textGubun-type1 > .text {padding-right: 39px; position: relative; color: var(--Gray_888); font-size: 12px; font-weight: var(--fw-m); line-height: 16px; letter-spacing: 0.06px;}
.textGubun-type1 > .text::after {content: '/'; display: block; color: var(--Gray_CCC); font-size: var(--fs-body); font-weight: var(--fw-r); line-height: 20px; letter-spacing: 0; position: absolute; right: 16px; top: -2px;}
.textGubun-type1 > .text:has( + .last)::after {content: '>';}
.textGubun-type1 > .text:first-child {color: var(--Gray_666);}
.textGubun-type1 > .text:last-child {padding-right: 2px;}
.textGubun-type1 > .text:last-child::after {content: none;}

.total-box {color: #666; line-height: var(--lh-body);}
.total-box .total {font-weight: var(--fw-sb);}
.total-box:not(.style1) .total {color: var(--HK_or);}

.total-box.style2 {color: #666; font-size: var(--fs-body); font-weight: var(--fw-r); line-height: 20px;}
.total-box.style2 .total {color: inherit; padding: 0;}

.cont-top, .cont-foot,
.area-head, .area-foot,
.page-title {display: flex; justify-content: space-between; align-items: center; margin-top: 20px; margin-bottom: 20px; width: 100%;}

.cont-top {gap: 10px;}
.page-title {margin-top: 10px; margin-bottom: 10px;}
.page-head + .page-search {margin-top: 14px;}

.page-title.type-style1 {margin-bottom: 0; padding-bottom: 22px; border-bottom: 1px solid var(--Form_border);}

.cont-top.type-lineT {margin: 0; margin-top: 10px; padding-top: 20px; padding-bottom: 20px; border-top: 1px solid var(--Form_border);}
.cont-top.type-lineB {border-bottom: 1px solid var(--Form_border); padding-top: 20px; padding-bottom: 20px;}
.area-body > .cont-top.type-lineB {padding-top: 0;}

.page-search.cont-search-style1 {margin-bottom: 23px;}
.page-search.cont-search-style1 + .cont-top {margin: 20px 0;}

[class*="tit-tip"],
.area-head .total,
.page-title .total {background-color: #F7FAFF; border-radius: 16px; padding: 2px 8px; font-size: var(--fs-caption); line-height: 18px; line-height: var(--lh-caption);  color: #333; display: inline-flex; align-items: center; justify-content: center; column-gap: var(--gab); min-height: 22px;}
.area-head .title.dep2,
.page-title .total .cnt {color: var(--HK_or);}
.area-head .title.dep2-style1 {color: var(--Gray_333);}

.tit-tip-more {}
.tit-tip-more .ico-arrow {--myISize: 20px; /*width: 14px; min-width: 14px; height: 14px;*/}
.tit-tip-more .ico-arrow::before {--svg-color: var(--filterColor-EC6608); background-size: 50% auto;}
.tit-tip-more:not(div, p, span):hover {background-color: #e5efff;}

.tit-tip-style1 {border-radius: 30px; min-width: 32px; min-height: 20px; padding: 10px 24px; color: var(--HK_or); font-size: var(--fs-body); font-weight: var(--fw-b); line-height: 20px;}

.cont-top .left, .cont-top .center, .cont-top .right,
.cont-foot .left, .cont-foot .center, .cont-foot .right,
.area-head .left, .area-head .center, .area-head .right,
.area-foot .left, .area-foot .center, .area-foot .right,
.page-title .left, .page-title .center, .page-title .right {display: inline-flex; justify-content: flex-start; align-items: center; column-gap: 10px; row-gap: 5px;}
.cont-top .right, .cont-foot .right, .area-head .right, .area-foot .right, .page-title .right {justify-content: flex-end;}
.cont-top .center, .cont-foot .center, .area-head .center, .area-foot .center, .page-title .center {justify-content: center;}
.cont-top > div:first-child:last-child,
.cont-foot > div:first-child:last-child,
.area-head > div:first-child:last-child,
.area-foot > div:first-child:last-child,
.page-title > div:first-child:last-child {flex: 1;}

.cont-top .left, .cont-top .center, .cont-top .right {column-gap: 16px; row-gap: 8px;}

.cont-top .left.flex-col, .cont-foot .left.flex-col, .area-head .left.flex-col, .area-foot .left.flex-col, .page-title .left.flex-col,
.cont-top .right.flex-col, .cont-foot .right.flex-col, .area-head .right.flex-col, .area-foot .right.flex-col, .page-title .right.flex-col {justify-content: center;}

.cont-top .left.flex-col, .cont-foot .left.flex-col, .area-head .left.flex-col, .area-foot .left.flex-col, .page-title .left.flex-col {align-items: flex-start;}
.cont-top .right.flex-col, .cont-foot .right.flex-col, .area-head .right.flex-col, .area-foot .right.flex-col, .page-title .right.flex-col {align-items: flex-end;}

.cont-foot .left, .cont-foot .center, .cont-foot .right,
.area-foot .left, .area-foot .center, .area-foot .right {column-gap: 16px; row-gap: 8px;}

.area-foot.style1 .btn-ix[class*=" type"],
.cont-foot.style1 .btn-ix[class*=" type"],
.cont-body.type-view ~ .cont-foot .btn-ix[class*=" type"] {min-width: 210px;}

.cont-area, .cont-inner-area {display: flex; flex-direction: row;}

.cont-body[class*="type-gab"],
.cont-view {display: flex; justify-content: flex-start; align-items: flex-start;}

.page-body {flex: 1 1 0; display: flex; align-items: flex-start; justify-content: flex-start; flex-direction: column; /*padding-bottom: 50px;*/}


/*lnb + content*/
.area-location {padding: 20px 5px; display: flex; justify-content: flex-start; align-items: center; gap: 8px; /*border-bottom: 1px solid var(--Form_border2);*/ margin-bottom: 24px; width: 100%; position: relative;
}
.area-location::after {content: ''; display: block; width: auto; height: 1px; background-color: var(--Form_border2); position: absolute; left: 0; right: 0; bottom: 0;}
.area-location .location {display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap; gap: 8px;
color: #666; font-family: 'Inter', sans-serif; min-height: 28px;}
.area-location .location li {padding: 0 8px; padding-right: 22px; display: inline-flex; justify-content: flex-start; align-items: center; position: relative;}
.area-location .location li::after {content: '/'; color: #ccc; position: absolute; right: 0; top: 0; transform: rotate(7deg);}
.area-location .location li:last-child {color: #000;}
.area-location .location li:last-child::after {content: none;}

.area-lnb {padding: 16px 0;}
.area-lnb .lnb {color: #333; position: sticky; top: 16px; top: calc(var(--headerH) + 20px);}
.area-lnb .lnb .lnb-box,
.area-lnb .lnb .lnb-box .lnb-list,
.area-lnb .lnb .lnb-box .lnb-list .lnb-menu,
.area-lnb .lnb .lnb-box .lnb-list .lnb-menu .link,
.area-lnb .lnb .lnb-box .lnb-list .lnb-menu .lnb-menu-tit {width: 100%;}
.area-lnb .lnb .lnb-box .lnb-list {display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 25px;}
.area-lnb .lnb .lnb-box .lnb-list .lnb-menu {display: flex; flex-direction: column; justify-content: flex-start; align-items: center; gap: 4px;}
.area-lnb .lnb .lnb-box .lnb-list .lnb-menu .link {padding: 8px; position: relative; padding-left: 28px;}
.area-lnb .lnb .lnb-box .lnb-list .lnb-menu .link::before {content: ''; width: 24px; height: 24px; --svg-color: var(--filterColor-ccc); background-size: 40% auto; position: absolute; left: 4px; top: 5px;}
.area-lnb .lnb .lnb-box .lnb-list .lnb-menu .link:hover,
.area-lnb .lnb .lnb-box .lnb-list .lnb-menu .link.active {background-color: #f5f5f5;}
.area-lnb .lnb .lnb-box .lnb-list .lnb-menu .link.active {padding-left: 36px;}
.area-lnb .lnb .lnb-box .lnb-list .lnb-menu .link.active::before {--svg-color: var(--filterColor-333); background-size: 70% auto; left: 6px;}
.area-lnb .lnb .lnb-box .lnb-list .lnb-menu .lnb-menu-tit {padding: 4px 12px; font-weight: var(--fw-sb); margin-bottom: 4px;}
.area-lnb .lnb .lnb-box .lnb-list .lnb-menu .lnb-list {gap: 7px;}
.area-lnb .lnb .lnb-box .lnb-list .lnb-menu .lnb-list .lnb-menu {}
.area-lnb .lnb .lnb-box .lnb-list .lnb-menu.overview .link {font-family: 'Inter', sans-serif;}

.page-body.type-hasLnb {/*border-top: 1px solid var(--Form_border); margin: 20px var(--pdLR) 0;*/margin-top: 20px; position: relative;}
.page-body.type-hasLnb::before {content: ''; display: block; width: auto; height: 1px; background-color: var(--Form_border); position: absolute; top: 0; left: var(--pdLR); right: var(--pdLR); z-index: 2;}
.page-body.type-hasLnb .btn-lnb-close {display: none; position: absolute; right: 10px; top: 18px;}
.page-body.type-hasLnb [class*="btn-lnb"] .ico::before {--svg-color: var(--filterColor-333)}
.page-body.type-hasLnb [class*="btn-lnb"] {overflow: hidden;}
.page-body.type-hasLnb [class*="btn-lnb"] .txt {text-indent: -999px; opacity: 0;}
.page-body.type-hasLnb {display: flex; justify-content: space-between; align-items: stretch; flex-direction: row; flex-wrap: nowrap; /*overflow: hidden;*/}
.page-body.type-hasLnb .area-lnb {width: 208px; border-right: 1px solid #d8d8d8; background-color: #fff; transition: left .2s; margin-left: -280px;
    opacity: 0; visibility: hidden; transition: all .2s;
}
.page-body.type-hasLnb .area-content {width: calc(100% - 208px); transition: width .2s; width: 100%;
	display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start;}

/*body.lnbOpen .page-body.type-hasLnb {overflow: unset;}*/
body.lnbOpen .page-body.type-hasLnb .area-lnb {margin-left: 0; opacity: 1; visibility: unset;}
body.lnbOpen .page-body.type-hasLnb .area-content {width: calc(100% - 208px); padding-left: 23px;}

/*location
body.lnbOpen .page-body.type-hasLnb .area-lnb {z-index: 16;}
html:not(.is-scroll-top) .page-body.type-hasLnb::before {content: none;}*/

html:not(.is-scroll-top) .area-location {position: sticky; top: calc(var(--headerH) - 1px); z-index: 2; background-color: #fff; border-top: 1px solid var(--Form_border);}
html:not(.is-scroll-top).lnbOpen-all .area-location {z-index: 1;}
/*html.is-scroll-middle .page-body.type-hasLnb::before {content: none;}*/

/*mode-xxx*/
.cont-top .left > [class*="mode-"]:not(.btn-ix) {display: inherit; flex-direction: inherit; justify-content: inherit; align-items: inherit; gap: inherit; column-gap: inherit; row-gap: inherit;}


/*file upload*/
.filebox-textbox,
.filebox-btnbox {display: flex; justify-content: center; align-items: center; padding: 15px;}
.filebox-textbox,
.filebox-btnbox {gap: 12px;}
.filebox-area:not(:has( .dhx_vault)) {border-radius: 10px; border: 1px solid var(--Form_border); background-color: #FFF; min-height: 300px; padding: 30px;}
.filebox-area,
.filebox-area .filebox-textbox {flex-direction: column;}
.filebox-area {margin-top: 20px; margin-bottom: 20px; width: 100%;}
.filebox-area .ico-info-2 {width: 60px; height: 60px;}

/*vault custom*/
.filebox-area .dhx_vault {border-radius: 10px; border: 1px solid #FFF; background-color: #FFF; padding: 30px; min-height: 400px; height: auto !important;}
.filebox-area .dhx_vault .dhx-dropable-area {background-color: transparent !important; border: 0 none !important;}
.file-desc, .info-desc,
.filebox-area .dhx_vault .dhx-dropable-area .drop-area-bold-text {color: #666; text-align: center; font-size: var(--fs-body); font-weight: var(--fw-m); line-height: 20px; line-height: var(--lh-body); }
.filebox-area .dhx_vault .button-group {margin-top: 25px !important;}
.filebox-area .dhx_vault .button-group .dhx_button {display: inline-flex; justify-content: center; align-items: center; width: auto; height: auto; padding: 0; background-color: transparent; border: 1px solid transparent; min-width: 24px; min-height: 24px; border-radius: 8px;
	border-color: var(--Form_border); background-color: #fff; min-width: 44px; min-height: 44px; border-radius: 22px;
	line-height: 18px; color: #333; font-size: var(--fs-body); line-height: var(--lh-body);  font-weight: var(--fw-m);
	padding: 5px 24px;
}
.filebox-area .dhx_vault .dhx_layout-cell {display: flex; justify-content: center; align-items: center;}

.filebox-area .dhx_vault .dhx-dropable-area .dhx-big-icon-block {width: auto; height: auto; font-size: unset;}
.filebox-area .dhx_vault .dhx-dropable-area .dhx-big-icon-block .dxi:before {width: 60px; height: 60px; font-size: 60px; line-height: 60px; content: '';/*dhx 리셋, svg.css에서 src관리*/}
.filebox-area .dhx_vault .dhx-dropable-area .dhx-big-icon-block + .drop-area-bold-text {margin-top: 15px;}

.filebox-area .dhx_vault .url-form-container {display: flex; justify-content: center; align-items: center; background-color: transparent !important; font-family: 'HankookTire', 'Noto Sans KR', sans-serif !important; color: #333; width: 600px; max-width: 74%;}
.filebox-area .dhx_vault .url-form-container .url-form-card,
.filebox-area .dhx_vault .url-form-container > div {background: transparent !important;  box-shadow: none !important;  padding: 0 !important;  max-width: 100% !important;  width: 100% !important; display: flex; justify-content: center; align-items: center; flex-direction: column;}
.filebox-area .dhx_vault .url-form-container .url-form-card-inner,
.filebox-area .dhx_vault .url-form-container > div > div {margin: 10px 0 !important; width: 100%; display: flex; align-items: center; justify-content: center;}
.filebox-area .dhx_vault .url-form-container .form-input,
.filebox-area .dhx_vault .url-form-container input[type="text"] {display: flex; flex-direction: column; align-items: flex-start; gap: 10px; align-self: stretch; height: 44px; padding: 8px 16px !important; border-radius: 50px !important; border: 1px solid var(--Form_border) !important; background: #FFF; line-height: 28px;}
.filebox-area .dhx_vault .url-form-container .btn-apply,
.filebox-area .dhx_vault .url-form-container button {display: flex; justify-content: center; align-items: center; gap: 8px; padding: 10px 24px !important; border-radius: 30px !important; background: #333 !important; color: #fff !important;}
.filebox-area .dhx_vault .url-form-container .form-text,
.filebox-area .dhx_vault .url-form-container button + div {color: inherit !important; font-family: inherit !important; font-size: var(--fs-body); font-weight: var(--fw-m); line-height: 20px; line-height: var(--lh-body);}

/*admin hasDel-list > custom*/
.hasDel-list {display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: flex-start; gap: 12px;}
.hasDel-list .item {display: inline-flex; min-height: 40px; padding: 6px 16px; justify-content: space-between; align-items: center; gap: 8px; min-width: 90px; border-radius: 30px; border: 1px solid #F5F5F5; background-color: #FFF; box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05);}
.hasDel-list .item [class*="btn"] {padding: 0 !important; border-radius: 50%; min-width: 22px; min-height: 22px;}
.hasDel-list .item [class*="btn"] .ico[class*="ico-del"] {width: 22px; height: 22px; min-width: 22px;}
.hasDel-list .item [class*="btn"] .ico[class*="ico-del"]::before {background-size: 40% auto;}
.hasDel-list .item [class*="btn"]:hover {background-color: rgba(0,0,0,.05);}

.hasDel-list .item:not(:has( [class*="btn"])) {justify-content: center;}

.hasDel-list.type-style1 .item {color: #07F;}
.hasDel-list.type-style2 .item {border-color: var(--Form_border2); box-shadow: none;}
.hasDel-list.type-style3 .item {border-color: var(--Form_border); box-shadow: none; color: #07F; font-weight: var(--fw-m);}


/*.page-search > * >>>> .dl-formbox > **/
.dl-formbox .btn-search{ width: 44px; height: 44px; background-color: #fff; display: flex; align-items: center; justify-content: center; border: 1px solid var(--Form_border); border-radius: 22px;}
.dl-formbox .btn-search .txt{ text-indent: -9999px; display: inline-block;}
.dl-formbox .btn-search:hover{ border-color: #000;}

.dl-formbox .form-input,
.dl-formbox .form-select {background-color: #fff;}

.dl-formbox .form-input:not([class*="size-"]) {}
.dl-formbox .btn-ix:not([class*="size-"]),
.dl-formbox .form-select:not([class*="size-"]) {--mySize: 40px;}

/*.agree-check-box .rc-box:not([class*="type-box"]),
.dl-formbox .rc-box:not([class*="type-box"]) {column-gap: 12px;}*/

/*.dl-formbox > .form .rc-group,*/
.dl-formbox > .form .btn-group {display: flex; justify-content: flex-start; align-items: center; width: 100%; gap: 12px; flex-wrap: wrap;}

.dl-formbox:not(:has( > .label)) > .form {width: 100%;}

/*.dl-formbox > .form .rc-box {margin-right: 0;}*/

.dl-formbox > .form .btn-group {column-gap: 16px;}
.dl-formbox > .form .btn-group.center {justify-content: center;}
.dl-formbox > .form.flex-col .rc-group + .btn-group {margin-top: 8px;}

.dl-formbox > .label,
.dl-formbox > .tit {min-width: max-content; font-weight: var(--fw-m);}
.dl-formbox > .label,
.dl-formbox > .tit,
.dl-formbox > .form,
.dl-formbox > .form > [class*="form-"]:not(select, input, textarea, .form-select-custom) {display: inline-flex; justify-content: flex-start; align-items: center; column-gap: 12px; row-gap: 12px;}
.dl-formbox > .tit .txt {color: #666; font-size: var(--fs-caption); line-height: var(--lh-caption);}
.dl-formbox:not(.celltype-col *) > .label{ min-height: 44px; display: inline-flex; align-self: flex-start; align-items: center;}
.dl-formbox > .form {flex-wrap: wrap; flex: 1 1 0;}
.dl-formbox > .form.flex-col {flex: 1;}
.dl-formbox > .form:has( .rc-group + .form-date) {flex-wrap: unset;}

.dl-formbox:not(.celltype-col *) > .label .rc-box:not([class*="type-box"]) .label {font-size: inherit;}

.dl-formbox > .label.flex-col,
.dl-formbox > .tit.flex-col,
.dl-formbox > .form.flex-col,
.dl-formbox > .form > [class*="form-"].flex-col:not(select, input, textarea, .form-select-custom) {justify-content: center; align-items: flex-start;}
.dl-formbox > .form.between {justify-content: space-between;}

.dl-formbox > .form.flex-col > .inner-form,
.dl-formbox > .form .add-form{ width: 100%; display: flex; justify-content: flex-start; align-items: center; column-gap: 12px; row-gap: 12px; flex-wrap: wrap;}

.dl-formbox .form.form-style1 {border-radius: 10px; background-color: #FFF; padding: 18px; border: 1px solid transparent;}
.dl-formbox .form.form-style1 .form-textarea {border-width: 0px; padding: 0; min-height: 62px;}
.dl-formbox .form.form-style1.flex-col .form-textarea {padding: 18px;}
.dl-formbox .form.form-style1:has( .form-textarea:hover):not(:has( .dragDrap-box)) {border-color: #444;}
.dl-formbox .form.form-style1:has( .form-textarea:focus):not(:has( .dragDrap-box)) {border-color: #07F;}
.dl-formbox .form.form-style1 > .form-box {width: 100%;}
/*2026 03 12 cu-full로 수정하기 */

.dl-formbox.flex-col > .tit,
.dl-formbox.flex-col > dt.label,
.dl-formbox.flex-col > .form {width: 100%;}

.dl-formbox > .label:not(.flex-col):has( > .inner-left, > .inner-right),
.dl-formbox > .tit:not(.flex-col):has( > .inner-left, > .inner-right) {justify-content: space-between;}

.dl-formbox > .label .rc-box {gap: 12px;}

.dl-formbox .type-total {padding: 0 20px; color: #333; font-size: var(--fs-h3); font-weight: var(--fw-m); line-height: 28px; line-height: var(--lh-h3); }
.dl-formbox .type-total.tit {column-gap: 6px;}
.dl-formbox .type-total .total{ font-weight: var(--fw-r); font-size: var(--fs-h3); color: #666;}
.dl-formbox .type-total .cnt,
.dl-formbox .type-total .count {color: #07F; }
.dl-formbox .type-total .cnt {font-weight: var(--fw-sb);}
.dl-formbox.flex-col .type-total {padding: 20px 0;}

.dl-formbox .type-total2{ padding: 0; color: #333; font-size: var(--fs-h3); font-weight: var(--fw-m); line-height: 28px; line-height: var(--lh-h3); gap: 5px; }
.dl-formbox .type-total2 span{ font-weight: var(--fw-r); font-size: var(--fs-h5); color: #666;}
.dl-formbox .type-total2 .txt{ font-weight: var(--fw-m); font-size: var(--fs-h3); color: #333;}
.dl-formbox .type-total2 .cnt,
.dl-formbox .type-total2 .count {  font-size: var(--fs-h3); color: #07F;}
.dl-formbox .type-total2 .cnt {font-weight: var(--fw-sb);}
.dl-formbox .type-total2 .total{ font-weight: var(--fw-r); font-size: var(--fs-h3); color: #666;}

.dl-formbox .flex-col:has( .type-total) {column-gap: 12px; row-gap: 12px;}

.dl-formbox .form-select {width: 175px; width: 210px; min-width: 210px;}
.dl-formbox .form-input {width: 210px; min-width: 210px;}
.dl-formbox .form-select {width: 175px; width: 180px;; min-width: 180px;}
.dl-formbox .form-input {width: 210px;; min-width: 210px;}
.dl-formbox .formSize1 {width: 100px; min-width: 100px;}

.form-wsize1 .rc-box[class*="type-box"],
.form-wsize1 .form-select,
.form-wsize1 .form-input,
.page-search .form-wsize1 .rc-box[class*="type-box"],
.page-search .form-wsize1 .form-select,
.page-search .form-wsize1 .form-input {min-width: 200px; width: auto; flex: unset}

td > .form-input,
td > .form-select,
td > .rc-box[class*="type-box"] {min-width: unset; max-width: 100%;}

.flex1 {flex: 1 1 0% !important;}

/*.dl-formbox > .label.bold {font-weight: var(--fw-m) !important;}*/

/*admin search css > custom*/
.page-search{ background-color: #f5f5f5; padding: 20px var(--pdLR); border-radius: 10px; width: 100%;}

.page-search .inner{ display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 15px;}

.page-search .search-cell {display: flex; justify-content: flex-start; align-items: center; gap: 10px;}
.page-search .search-cell.gap29{ gap: 29px;}
.page-search .search-cell.flex-col {align-items: flex-start; justify-content: center;}

.page-search .search-cell.flex1 {flex-grow: 1;}
.page-search .search-cell > .form:first-child:last-child {width: 100%;}

.page-search .search-cell:has( .tit > .rc-box) {column-gap: 12px;}
.page-search .search-cell:has( .tit > .rc-box) > .tit {padding: 8px 0;}

.page-search .search-tr {display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: center; width: 100%; gap: 12px;}
.page-search .search-tr:has( > .search-row) {display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: flex-start; align-items: flex-start;}

.page-search .search-row {display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: center; width: 100%; gap: 12px}
/*.page-search .search-tr .search-cell {padding: 4px 0;}*/

.page-search .search-tr.flex-row {flex-direction: row; align-items: center; justify-content: flex-start; gap: 24px;}
.page-search .search-tr.flex-row > .search-row {width: auto; gap: 10px; flex-wrap: unset;}

.page-search .search-row.ta-c {justify-content: center;}
.page-search .search-row.between {justify-content: space-between;}
.page-search .search-row.celltype-col {gap: 15px;}
.page-search .search-row.celltype-col .search-cell,
.page-search .search-row.celltype-col .dl-formbox {flex-direction: column; align-items: flex-start; justify-content: flex-start;}
.page-search .search-row.box-style3 {padding: 20px 40px;}
.page-search .search-row.box-style3:has( .scrollbox) {padding: 20px 5px;}
.page-search .search-row.box-style3:has( .scrollbox) .scrollbox {padding: 0 30px;}
.page-search .search-row.box-style3:has( .scrollbox) .scrollbox > .scroll {left: 30px; right: 30px; width: auto;}
.page-search .search-row.box-style3 .rc-group {padding: 0 16px;}
.page-search .search-row.box-style3 .rc-group.scroll {padding-left: 12px; padding-right: 12px;}
.page-search .search-row.box-style3 .rc-group.scroll .rc-box {margin: 4px;}
.page-search .search-row.box-style3:has( .scrollbox .rc-group.scroll) {padding-top: 16px; padding-bottom: 16px;}

.page-search .search-cell.dl-formbox > .form .inner-form {flex-wrap: wrap;}

.page-search .search-row > .search-cell:first-child:last-child {width: 100%;}

.page-search .search-row.between > .search-cell.dl-formbox[style*="width"] > .form > * {width: 100%;}

.page-search.type-tagSel,
.page-search.type-filter {background-color: #F9F9F9;}
.page-head .page-search {/*border-top: 1px solid var(--Form_border);*/ border-radius: 0 0 10px 10px;}/*.type-filter*/
/*.page-head .page-title + .page-search {border-top: 0 none; margin-top: -10px;}*/
.page-head .page-search.type-filter {border-top: 1px solid var(--Form_border);}
.page-head .page-title + .page-search {margin-top: 30px;}

.dl-formbox:has(+ .search-cell.type-mix),
.page-search .search-cell.dl-formbox:has(+ .search-cell.type-mix) {padding-right: 12px;}

.page-search[class*="cont-search"] {border-bottom: 1px solid var(--Form_border2); background-color: #F5F5F5; border-radius: 0; padding-left: 24px; padding-right: 24px;}/*.type-style1*/
.page-search.type-style1 dl.search-cell:has( + dl.search-cell) {margin-right: 30px;}
.page-search.cont-search-style1 {border-bottom: 0 none; padding: 20px 40px; }

.area-body > .cont-top + .page-search[class*="cont-search"] {margin-top: -12px;}

.page-search.type-scrollX {padding: 0; min-height: 64px;}
.page-search.type-scrollX .type-fullX {width: 100%; height: 100%; padding: 20px 0; overflow-y: hidden; overflow-x: auto;}
.page-search.type-scrollX .type-fullX .dl-formbox > .form {column-gap: 12px;}
.page-search.type-scrollX .type-fullX .dl-formbox > .form > * {white-space: nowrap;}
.page-search.type-scrollX .type-fullX .dl-formbox > .form > *:first-child {margin-left: 40px;}
.page-search.type-scrollX .type-fullX .dl-formbox > .form > *:last-child {margin-right: 40px;}

/*.page-search.type-fullX {padding-left: var(--pdLR); padding-right: var(--pdLR);
    width: 100vw; border-radius: 0; position: relative; left: 50%; transform: translateX(-50%);
}*/
.page-search.type-fullX {border-radius: 0;}
.page-search.type-fullX .dl-formbox > .tit .txt { font-weight: var(--fw-sb); color: #000;}
.page-search.type-fullX .ico-search::before {--svg-color: var(--filterColor-333)}
.page-search.type-fullX .page-search .search-row {gap: 10px;}
.page-search.type-fullX .page-search .search-row .search-cell.dl-formbox:has(+ .search-cell.type-mix) {padding-right: 14px;}


/********************************************sub********************************************/
/*다른페이지도 쓰면 앞에 .page-region 붙이기, gap같으면 패스*/
.area-content .area-body {width: 100%; display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch; row-gap: calc(var(--gab) * 6); flex: 1 1 0;}
.area-content .area-body .cont-area:not(.flex-col):has( > .cont-inner-area) {column-gap: calc(var(--gab) * 7);}
.area-content .area-body .cont-area.flex-col:has( > .cont-inner-area) {row-gap: calc(var(--gab) * 7);}

.page-body.type-hasLnb:has( .area-body.cu-body) {flex: unset;}
.area-content .area-body.cu-body > .cont-area + .cont-area {padding-top: 40px; border-top: 1px solid rgba(204, 204, 204, 1);}

.area-content .cont-area,
.area-content .cont-inner-area {column-gap: calc(var(--gab) * 4); row-gap: calc(var(--gab) * 4);}
.area-content .area-body .cont-top {margin: 0; padding: 4px 0; padding: 7px 0;}
.area-content .area-body .cont-view,
.area-content .area-body .cont-view > .boxBg-area {column-gap: calc(var(--gab) * 7); row-gap: calc(var(--gab) * 7);}

.area-content .area-body .cont-top.type-style1 {padding-top: 20px; padding-bottom: 20px;}
.area-content .area-body .cont-area .cont-top.type-style1 + .cont-body {margin-top: -16px;}

.area-content .area-body .cont-top.type-style2 {padding-top: 4px; padding-bottom: 4px;}

/*.area-content .area-body > .cont-area.flex-col {flex: 1 1 0;}*/

.area-content .area-body .cont-top .left.flex-col .desc {padding: 12px 24px; width: 100%;;}
.area-content .area-body .cont-top:has( .left.flex-col .desc) + .cont-body {margin-top: -22px;}

.area-content table[class*="table"].view th {font-size: var(--fs-h5); line-height: var(--lh-h5);}
.area-content table[class*="table"].view th.type1 {font-size: var(--fs-body); line-height: var(--lh-body);}

.link-go {--minSize: 24px; padding-right: var(--minSize); position: relative; min-height: var(--minSize);}
.link-go .txt {font-weight: var(--fw-sb); min-height: var(--minSize); padding: 2px 0; margin-right: 10px;}
.link-go .inner-text {font-weight: var(--fw-r);}
.link-go .txt .inner-text {margin-left: 5px;}
.link-go .ico {position: absolute; right: 0; top: 0;}
.link-go .ico::before {background-size: 60% auto; background-size: 40% auto;}

[class^="dayPN-set"] {display: inline-flex; justify-content: space-between; align-items: center; font-size: var(--fs-caption); line-height: 15px; line-height: var(--lh-caption);  column-gap: var(--gab);}
[class^="dayPN-set"] .ico[class*="ico-arrow"] {min-width: 10px; width: 10px; height: 10px;}
[class^="dayPN-set"] .btn-ix {width: 20px; height: 20px;}

[class^="dayPN-set"][class*="-formtype"] {column-gap: 12px;}
[class^="dayPN-set"][class*="-formtype"] .btn-ix {width: 34px; height: 48px; border-radius: 8px; border: 1px solid var(--Form_border); background-color: #FFF;}
[class^="dayPN-set"][class*="-formtype"] .ico[class*="ico-arrow"] {min-width: 14px; width: 14px; height: 14px;}
[class^="dayPN-set"][class*="-formtype"] .day {display: inline-flex; justify-content: center; align-items: center; column-gap: 12px;}
[class^="dayPN-set"][class*="-formtype"] .day .form-text {min-width: 22px; padding: 4px; text-align: center;}

.dayPNSet-box .form-text {font-size: var(--fs-h5); line-height: 20px;}
.dayPNSet-box .form-select {width: 230px;}

.cont-top > div.dayPNSet-box {column-gap: 36px;}

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

.type-gab10 {gap: 10px !important;}
.type-gab12 {gap: 12px !important;}
.type-gab15 {gap: 15px !important;}
.type-gab20 {gap: 20px !important;}
.type-gab26 {gap: 26px !important;}
.type-gab45 {gap: 45px !important;}

.boxBg-bg0 {background-color: rgba(249, 249, 250, 1) !important;}
.boxBg-bg0-1 {background-color: rgba(0, 0, 0, 0.1) !important;}
.boxBg-bg1 {background-color: #FFF0E6 !important;}
.boxBg-bg2 {background-color: #FCFCED !important;}
.boxBg-bg3 {background-color: #E9F2E6 !important;}
.boxBg-bg3-1 {background-color: rgba(0, 119, 255, 0.1) !important;}

.minH-style1 {min-height: 280px;}

.area-content .cont-chart {height: 240px; padding: 24px; border-radius: 24px;}
.area-content .cont-chart .chart-area {width: 100%; height: 100%;}

.boxBg-area {column-gap: calc(var(--gab) * 5); row-gap: calc(var(--gab) * 5); display: flex; justify-content: space-between; align-items: stretch; width: 100%;}
.boxBg-area .item {width: 100%; padding: 24px; border-radius: 16px; display: inline-flex; justify-content: center; align-items: center; row-gap: calc(var(--gab) * 2); column-gap: calc(var(--gab) * 2);}

.boxBg-area .item-txt {display: flex; align-items: center; justify-content: center; text-align: center; column-gap: calc(var(--gab) * 2); row-gap: calc(var(--gab) * 2);}
.boxBg-area .item-txt.txt,
.boxBg-area .item-txt.cnt {font-size: var(--fs-h2); font-weight: var(--fw-sb); line-height: 1; min-height: 36px; padding: 3px 0;}
.boxBg-area .item-txt .type1 {color: var(--HK_or) !important;}
.boxBg-area .item-txt.txt1 {font-size: var(--fs-caption); font-weight: normal; line-height: 1;}
.boxBg-area .item-txt .ico[class*="ico-fr-"] {width: 18px; height: 18px; min-width: 18px;}
.boxBg-area .item-txt .ico[class*="ico-fr-"]::before {--svg-color: #666; --svg-color: var(--filterColor-666);}
.boxBg-area .item-txt:has( > .ico[class*="ico-fr-"]) {column-gap: calc(var(--gab) * 2);}

.boxBg-area .item-img {width: 100%; max-height: 200px; text-align: center; justify-content: center !important;}
.boxBg-area .item-img img {max-width: 100%; max-height: 200px;}

.boxBg-area .item-txt:has( > [class*="ellipsis"]) {position: relative; width: 100%;}
.boxBg-area .item-txt:has( > [class*="ellipsis"]) > [class*="ellipsis"] {position: absolute; left: 0; right: 0; top: 0; bottom: 0; text-align: left;}

.boxBg-area .item-head,
.boxBg-area .item-body {width: 100%; display: flex; align-items: center; justify-content: center; column-gap: calc(var(--gab) * 2); row-gap: calc(var(--gab) * 2);}
.boxBg-area .item-head.flex-col .item-txt,
.boxBg-area .item-body.flex-col .item-txt {width: 100%;}
.boxBg-area .item-head.flex-col .item-txt + .item-txt.desc,
.boxBg-area .item-body.flex-col .item-txt + .item-txt.desc {margin-top: -2px;}
.boxBg-area .item-head {padding-top: 3px; padding-bottom: 1px}

/*center/center 기준 이외 정렬 추가해서 사용*/
.boxBg-area .item.ta-l {justify-content: flex-start;}
.boxBg-area .item.ta-l .item-head,
.boxBg-area .item.ta-l .item-body {justify-content: flex-start;}
.boxBg-area .item.flex-col.ta-l {align-items: flex-start;}

.boxBg-area .item-head.ta-c,
.boxBg-area .item-body.ta-c {justify-content: center !important;}

.boxBg-area .item-head.between,
.boxBg-area .item-body.between {justify-content: space-between !important; flex-wrap: wrap;}

.cont-area:not(.flex-col):has( > .cont-inner-area:nth-child(2):last-child) .cont-inner-area,
.boxBg-area:has( > *:not(.flex-col) > .item:nth-child(2):last-child) .item {width: calc((100% - 28px) / 2);}
.cont-area:not(.flex-col):has( > .cont-inner-area:nth-child(3):last-child) .cont-inner-area,
.boxBg-area:has( > *:not(.flex-col) > .item:nth-child(3):last-child) .item {width: calc((100% - 56px) / 3);}
.cont-area:not(.flex-col):has( > .cont-inner-area:nth-child(4):last-child) .cont-inner-area,
.boxBg-area:has( > *:not(.flex-col) > .item:nth-child(4):last-child) .item {width: calc((100% - 84px) / 4);}
.cont-area:not(.flex-col):has( > .cont-inner-area:nth-child(5):last-child) .cont-inner-area,
.boxBg-area:has( > *:not(.flex-col) > .item:nth-child(5):last-child) .item {width: calc((100% - 112px) / 5);}
.cont-area:not(.flex-col):has( > .cont-inner-area:nth-child(6):last-child) .cont-inner-area,
.boxBg-area:has( > *:not(.flex-col) > .item:nth-child(6):last-child) .item {width: calc((100% - 140px) / 6);}


.boxBg-area[class*="minH-"] > .item {min-height: 100%;}
.boxBg-area[class*="minH-"] > .item > .item-body {flex: 1; align-items: stretch;}
.boxBg-area[class*="minH-"] .item-lank .item-list {padding: 8px 0;}
.boxBg-area[class*="minH-"] .item-lank .item-list.flex-col {min-height: 100%; justify-content: space-between; align-items: stretch;}

.boxBg-area.itemNth-2 > .item {width: calc(100% / 2);}
.boxBg-area.itemNth-3 > .item {width: calc(100% / 3);}
.boxBg-area.itemNth-4 > .item {width: calc(100% / 4);}

.cont-area,
.item-lank .item-list, .item-lank .item-list.flex-col > .listitem {width: 100%;}

.boxBg-area .item.item-lank {gap: calc(var(--gab) * 4);}
.item-lank .item-list, .item-lank .item-list.flex-col > .listitem {gap: 10px;}
.item-lank .item-list {margin: 8px 0;}
.item-lank .item-list .listitem {display: flex; justify-content: space-between; align-items: center; gap: 16px;}
.item-lank .item-list .listitem .item-txt,
.item-lank .item-list .listitem .item-cnt {display: inline-flex; justify-content: flex-start; align-items: center; gap: 16px;}
.item-lank .item-list .listitem .item-txt {}
.item-lank .item-list .listitem .item-txt .mark,
.item-lank .item-list .listitem .item-cnt {font-weight: var(--fw-sb);}
.item-lank .item-list .listitem .item-cnt {min-width: 12%; justify-content: flex-end;}
.item-lank .item-head .item-tit {font-weight: var(--fw-sb);}

/*region menu*/
.page-region {}
.page-body.page-region {flex: unset;}
#contents:has( .page-region) .page-title {min-height: 40px; /*margin-top: 0;*/ margin-bottom: 0;}
#contents:has( .page-region) .page-title .title {font-size: var(--fs-h2); line-height: 27px; line-height: var(--lh-h2);  color: #0A0400;}

.no-data, [class*="no-data-style"] {background-color: #f9f9f9; width: 100%; height: 160px; display: flex; justify-content: center; align-items: center; border-radius: 10px; gap: 6px;}
/*.no-data {width: 100%; min-height: 215px; border-radius: 8px; border: 1px solid var(--Form_border2); background: #f5f5f5;}*/
[class*="no-data"].ico .ico {--mySize: 30px; min-width: var(--mySize); width: var(--mySize); height: var(--mySize);}

.info-box.type-icoDesc,
:has( > img[src*="no-pdf.png"]),
:has( > .ico[class*="ico-error"] ) {display: flex; justify-content: center; align-items: center; border-radius: 8px; border: 1px solid var(--Form_border2); background: #f5f5f5;}
.no-data .ico[class*="ico-error"] {--mySize: 44px; min-width: var(--mySize); width: var(--mySize); height: var(--mySize);}

.accItemBody-inner:has( > img[src*="no-pdf.png"]) {border: 0 none; background-color: #fefdf9;}

.info-box.type-icoDesc {background-color: transparent; border: 0 none; gap: 12px;}
.info-box.type-icoDesc.flex-col .file-desc + .btn-ix,
.info-box.type-icoDesc.flex-col .info-desc + .btn-ix {margin-top: 25px;}


.no-data-style1 {background-color: transparent; flex-direction: column; gap: 20px; height: auto; padding: 10px 0;}
.no-data-style1 .ico {--mySize: 80px; min-width: var(--mySize); width: var(--mySize); height: var(--mySize);}
.no-data-style1 .ico::before {--svg-color: var(--filterColor-F08539);}
.no-data-style1 .text,
.no-data-style1 .desc {text-align: center;}
.no-data-style1 .text {color: #333; font-size: var(--fs-h2); font-weight: var(--fw-sb); line-height: 120%; letter-spacing: -0.48px; text-transform: capitalize;}
.no-data-style1 .desc {color: #666; font-size: var(--fs-h5); font-weight: var(--fw-r); line-height: 120%; letter-spacing: 0.16px;}

.tablestyle-list .no-data {border-radius: 0 0 10px 10px;}

.depsList-area {display: flex; justify-content: space-between; align-items: center; width: 100%; gap: 12px;}
.depsList-area .area-head,
.depsList-area .area-body {display: flex; justify-content: space-between; align-items: center; width: 100%}
.depsList-area .area-head {margin: 0;}
.depsList-area .area-title {display: flex; justify-content: flex-start; align-items: center; gap: 8px; width: 100%;}
.depsList-area .area-title [class*="title"] {color: var(--Gray_333); font-size: var(--fs-h3); font-weight: var(--fw-b); line-height: normal;}
.depsList-area .area-title .desc {color: var(--Grey_A2); font-size: var(--fs-h4); font-weight: var(--fw-m); line-height: normal;}
.depsList-area .area-title .btn-ix.back [class*="ico-arrow"]::before {--svg-color: var(--filterColor-1C1B1F);}

.depsList-area .area-title:has( .title-style1) {gap: 23px;}
.depsList-area .area-title .title-style1 {color: var(--HK_or); font-size: var(--fs-h1);}
.depsList-area .area-title .title-style1 .desc {font-size: 25px;}
.depsList-area .area-title .title-style2 {font-size: var(--fs-h3);}


.depsList-area .area-head {padding: 20px 0;}
.depsList-area .area-head .left,
.depsList-area .area-head .center,
.depsList-area .area-head .right {gap: 0;}
.depsList-area .area-body {width: 100%; padding-bottom: 30px;}

.depsList-area .block-area {width: 100%;}

/*.depsList-area .btn-ix.type3:not(.downtxt):hover {background-color: var(--HK_blue);}
.depsList-area .btn-ix.type3:not(.downtxt):hover .txt {color: #fff;}
.depsList-area .btn-ix.type3:not(.downtxt):hover .ico::before {--svg-color: var(--filterColor-fff);}*/

.depsList-area.flex-col,
.depsList-area .area-head.flex-col,
.depsList-area .area-body.flex-col { justify-content: flex-start; align-items: flex-start;}
/*.depsList-area.flex-col > *:not([class*="pos-"]),
.depsList-area .area-head.flex-col > *:not([class*="pos-"]),
.depsList-area .area-body.flex-col > *:not([class*="pos-"]) {width: 100%;}*/

.filter-area .filter-main + .filter-sub {margin-top: 20px;
	/*width: calc(100% + (var(--pdLR) * 2)); margin-left: calc(-1 * var(--pdLR)); margin-right: calc(-1 * var(--pdLR));*/ background-color: #F5F5F5; margin-top: 0; padding: 10px calc(var(--pdLR) - 5px);
}
.filter-area .filter-main + .filter-sub .tab-head {margin-bottom: 0; align-items: center;}
/*.filter-area + .depsList-area {margin-top: 20px}*/

/*.depsList-area .depsList-dep2 .area-head {padding-top: 0;}*/
/*.depsList-area .depsList-dep2 + .depsList-dep2*/
.depsList-area .depsList-dep2 {/*padding-bottom: 30px; margin-bottom: 18px;*/ border-bottom: 1px solid var(--Form_border2);}

.depsList-area:has( .pos-type1) .depsList-dep1 .area-title {min-height: 44px;}
.depsList-area:has( .pos-type1) .depsList-dep1 .empty {min-width: 220px;}

[data-tab-group] + .depsList-area {margin-top: 26px;}
[data-tab-group] + .depsList-area .depsList-dep2:not(:has( ~ .depsList-dep2)) {border-bottom: 0 none; }

.depsList-area:has( > [class*="no-data"]) {margin-top: var(--pdLR);}
/*.depsList-area > [class*="no-data"] {margin-top: var(--pdLR);}
.depsList-area > .block-area ~ [class*="no-data"] {margin-top: 0;}*/

.depsList-area [class*="link-type"] {--gabCnt-c:6; /*column-gap: calc(var(--gab) * var(--gabCnt-c));*/}
.depsList-area [class*="link-type"] .btn-ix.downtxt:not([class*="type"]) {--myFC: #49454f}
.depsList-area [class*="link-type"] .btn-ix.downtxt:not([class*="type"]) .txt {font-size: 13px; line-height: 16px; font-weight: var(--fw-m);}

/*floting 모음*/
[class*="pos-type"] {transition: top 0.25s ease-out;}
.pos-type1 {position: fixed; right: var(--pdLR); top: auto; z-index: 1; transition: top .2s; z-index: 2;
	/*max w 1440*/ right: 50%; margin-right: calc(-1 * ((var(--maxW) / 2) - var(--pdLR)));
	transition: .5s;
}

html:has( .filter-sub.open) .pos-type1 {z-index: 3;}
html:has( .filter-sub.open):not(.is-scroll-bottom) .pos-type1 {margin-right: calc(-1 * ((var(--maxW) / 2) - (var(--pdLR) * 2))); }
/*html.is-scroll-bottom .pos-type1 {right: 0; left: 0; margin: 0; text-align: center;}*/
/*html.is-scroll-bottom:not(.is-scroll-top) .pos-type1 {text-align: center; width: auto; left: auto; right: auto; left: 50%; transform: translateX(-50%); padding: 0; margin-bottom: 12px;}*/
html.is-scroll-bottom:not(.is-scroll-top) .pos-type1 {margin-right: 0; transform: translateX(50%); margin-bottom: 14px;}

.detail-area {display: flex; justify-content: space-between; align-items: center; gap: 34px;}
.detail-area.flex-col {justify-content: center; align-items: flex-start;}
.detail-area .file-list > .file-item {padding-top: 10px; padding-bottom: 10px; align-items: stretch;}
.detail-area .file-list > .file-item .file-nt {line-height: 22px;}
.detail-area .file-list > .file-item .file-nt + .file-size {line-height: 18px;}

.detail-area .file-list,
.detail-area .file-list[class*="listview-"] {align-content: flex-start; align-items: stretch;}

.infotype-text,
.infotype-text .inner-box,
.infotype-dl,
.infotype-dl .dl-inbox {display: flex; justify-content: flex-start; align-items: center;}
.infotype-text,
.infotype-dl,
.infotype-dl:has( > .dl-inbox) {column-gap: 20px; row-gap: 12px;}
.infotype-text {row-gap: 32px;}
.infotype-text .inner-box {row-gap: 8px;}
.infotype-text.flex-col,
.infotype-text .inner-box.flex-col,
.infotype-dl.flex-col {justify-content: center; align-items: flex-start;}
.infotype-text,
.infotype-dl dt,
.infotype-dl dd {color: #666;}
.infotype-text strong,
.infotype-dl dt {font-size: var(--fs-h3); font-weight: var(--fw-b); line-height: 24px; line-height: calc(var(--ls-h3) + 4px);}
.infotype-text,
.infotype-dl dd {font-size: var(--fs-body); font-weight: var(--fw-m); line-height: 20px; line-height: calc(var(--ls-body) + 2px);}
.infotype-text strong {font-size: 15px; line-height: 18px;}
.infotype-text {font-size: 13px; line-height: 18px;}

.infotype-dl.type-sc {column-gap: 0;}
.infotype-dl.type-sc dt {font-size: var(--fs-body); line-height: calc(var(--ls-body) + 2px);}
.infotype-dl.type-sc dt::after {content: ':'; display: inline-block; margin: 0 2px 0 3px;}
.infotype-dl.type-sc dd {font-weight: var(--fw-r);}

.infotype-dl.type-sc {column-gap: 0;}
.infotype-dl.type-sc2 dt,
.infotype-dl.type-sc2 dd {color: #888; font-size: var(--fs-body); font-weight: var(--fw-m); line-height: var(--ls-body);}
.infotype-dl.type-sc2 dt::after {content: ':'; display: inline-block; margin: 0 2px 0 3px;}
.infotype-dl.type-sc2 dd {color: #333;}

.detail-info {display: flex; gap: 20px;}

.detail-area img {border-radius: 8px;}
.detail-cont {display: flex; justify-content: space-between; align-items: center; gap: 30px;}
.detail-cont .detail-img,
.detail-cont .detail-text {width: 100%; text-align: left;}
.detail-cont .detail-img {text-align: center;}

/*agree, privacy policy... / column이 기본!*/
.agree-ul {display: flex; justify-content: flex-start; align-items: flex-start; }
.agree-ul.type-decimal {margin-left: 20px; width: calc(100% - 30px);}

.agree-box { padding: 10px; border-radius: 6px; border: 1px solid var(--Form_border2); font-size: 12px; line-height: 20px; font-weight: normal; height: 150px;}
.agree-box .agree-detail {height: 100%; overflow: auto;}

.ul-list-style1 .agree-ul {font-size: 12px; line-height: 20px;}


/*mode-nthChange-box : pc,table/mo 위치 체인지, .type-fileSlider 기준, 다른게 생성시 분리해 추가사용 // .detail-area의 gab과 동일하게, 다른곳 갭 다를경우 분리해 추가사용 */
.mode-nthChange-box {display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch; width: 100%; gap : 34px;}


/********************************************media********************************************/
@media screen and (max-width: 1920px){
}

/*********************************************popup*********************************************/
.popup-wrap:not(.windowtype) {position: fixed; top: 0; left: 0; right: 0; bottom: 0; align-items: center; justify-content: center; overflow: hidden; display: none;}
.popup-wrap:not(.windowtype):after {content:''; position:fixed; top:0; left:0; right:0; bottom: 0; background-color: rgba(23,23,23,.53); width:auto; height: auto; z-index:9;}

.popup {background-color: #fff; align-items: stretch; justify-content: center; position: relative; z-index: 10; padding: 40px; display: flex; flex-direction: column; border-radius: 30px; padding: 40px;}

.popup-wrap:not(.windowtype, .toast) .popup {width: 800px; max-width: calc(100vw - 40px); max-height: calc(100vh - 40px);}
.popup-wrap:not(.windowtype) .popup.type-alert {width: 600px; height: auto;}

.popup-wrap .popup[class*="type-detail"] {max-width: 1300px; width: calc(100vw - 40px);}
.popup-wrap .popup[class*="type-detail"]:not([class*="-style1"]) {padding: 30px;}

.popup-wrap .popup.type-sizeS1,
.popup-wrap .popup[class*="type-sizeS"] {width: 440px;}
.popup-wrap .popup[class*="type-sizeS2"] {width: 670px;}
.popup-wrap .popup[class*="type-sizeS3"] {width: 600px;}
.popup-wrap .popup.type-sizeS {border-radius: 10px;}
.popup-wrap .popup.type-sizFull {height: calc(100vh - 40px); width: calc(100vw - 40px);}

.popup-wrap .popup[class*="type-sizeS"][class*="-style"] {}/*style1 기본*/

.popup .pop-head {min-height: 35px; min-height: max-content; display: flex; justify-content: space-between; align-items: center; padding-bottom: 7px;}
.popup .pop-head .tit {font-size: var(--fs-h2); line-height: 28px; line-height: var(--lh-h2);  color: #32343A; font-weight: var(--fw-sb); font-weight: var(--fw-b); padding-bottom: 1px;}
.popup .pop-head .desc {color: #A3A3A3;}
.popup:not(.type-alert) .pop-cont {position: relative; padding: 15px 0; box-sizing: border-box; overflow-y: auto; overflow-wrap: break-word; flex: 1;}
.popup .pop-cont {width: 100%;}

.popup .pop-foot {padding: 20px 0 0; display: flex; align-items: center; justify-content: center; column-gap: 16px;}
.popup .pop-head > .left, .popup .pop-head > .right,
.popup .pop-foot .left, .popup .pop-foot .right, .popup .pop-foot .center {display: inline-flex; justify-content: center; align-items: center; column-gap: 16px;}
.popup .pop-head > .left, .popup .pop-foot .left {justify-content: flex-start;}
.popup .pop-head > .right, .popup .pop-foot .right {justify-content: flex-end;}
.popup .pop-foot .btn-ix {min-width: 210px; min-height: 48px;}
.popup .pop-foot.type-sizeR .btn-ix {min-width: unset; min-height: 44px;}
.popup .pop-foot.type-sizeR .btn-ix .ico-close::before {background-size: 60% auto;}

.popup .pop-head.flex-col,
.popup .pop-head > .left.flex-col,
.popup .pop-head > .center.flex-col,
.popup .pop-head > .left.flex-col {justify-content: center; align-items: flex-start; row-gap: 6px;}

.popup-wrap.windowtype .popup {}
.popup-wrap.windowtype .popup .pop-cont {display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; padding: 0;}

.popup .system-text {font-size: var(--fs-body); line-height: 18px; line-height: var(--lh-body); color: #000; display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; row-gap: 6px; min-height: 130px; padding: 10px 0;}
.popup .system-text .tit {font-weight: var(--fw-sb); color: var(--Gray_666);}
.popup .system-text .txt.type1 {font-size: var(--fs-h4); line-height: 22px;line-height: var(--lh-h4); color: #333; font-weight: var(--fw-m);}

.popup.type-alert2 .system-text {row-gap: 10px;}
.popup.type-alert2 .txt {font-size: 12px;}

.popup-wrap:not(.windowtype, .toast) .popup.type-alert2 {width: 250px; padding: 16px 30px; border-radius: 15px;}
.popup-wrap:not(.windowtype, .toast) .popup.type-alert2 .pop-cont {flex: unset; padding: 0;}
.popup-wrap:not(.windowtype, .toast) .popup.type-alert2 .pop-cont .system-text {padding: 0; min-height: unset;}

.popup.type-alert .pop-head {margin-bottom: 32px;}
.popup.type-alert .pop-foot {margin-top: 12px;}

.popup[class*="type-sizeS"] .pop-cont {padding-top: 10px;}
.pop-foot.type-btn-full > div,
.popup[class*="type-sizeS"] .pop-foot > div.center:has( .btn-ix:nth-child(2)) {width: 100%;}
.pop-foot.type-btn-full .btn-ix,
.popup[class*="type-sizeS"] .pop-foot .btn-ix {min-width: unset; flex: 1 1 0;}

.popup.type-sizeS-style1 .pop-head {padding-bottom: 10px;}
.popup.type-sizeS-style1 .pop-cont {padding-top: 15px;}

/*toast 팝업*/
.popup-wrap.toast .popup {padding: 16px 30px; width: 250px; border-radius: 10px;}
.popup-wrap.toast .popup .pop-cont {padding: 0;}

.toast-title {color: #666; text-align: center; font-size: var(--fs-body); font-weight: var(--fw-sb); line-height: normal;}
.toast-text {color: #666; text-align: center; font-size: 12px; font-weight: var(--fw-r); line-height: normal;}
.toast-text .cnt {color: var(--HK_or);}
.toast-info {display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 10px;}
.toast-info.flex-col {align-items: center; justify-content: center;}

.desc-inbox,
.desc-box { display: flex; justify-content: space-between; align-items: flex-start; }
.desc-box {line-height: 22px; column-gap: 10px; row-gap: 0;}
.desc-box .descBox-tit {font-weight: var(--fw-b);}
.desc-inbox {justify-content: flex-start;}
.desc-inbox.flex-col,
.desc-box.flex-col {justify-content: flex-start; align-items: flex-start;}
.desc-inbox.ta-l,
.desc-box.ta-l {justify-content: flex-start;}
.desc-inbox.ta-r,
.desc-box.ta-r {justify-content: flex-end;}
.desc-inbox.ta-c,
.desc-box.ta-c {justify-content: center;}
.desc-box:not(.flex-col):has( > .desc-inbox) {flex-direction: row;}

.desc-box.answer {color: #333; font-weight: var(--fw-sb);}
div:has( .desc-box.answer) .desc-box:not(.answer) {color: #888;}

.desc-box.style1 {color: #333; /*font-size: var(--fs-body);*/ font-weight: var(--fw-m); line-height: 26px; gap: 0;}
.desc-box.style1 .desc-inbox {gap: 0;}
.desc-box.style1 .descBox-tit {font-weight: var(--fw-m);}
.desc-box.style1 .descBox-tit:has( + dd, .descBox-txt) {padding-right: 6px; /*margin-right: 3px; */ position: relative;}
.desc-box.style1 .descBox-tit:has( + dd, .descBox-txt)::after {content: ':'; /*position: absolute; right: 0; top: 50%; transform: translateY(-50%);*/ display: inline-block; margin-left: 2px;}

.desc-box.style1.fs-style1 {font-size: var(--fs-h5); font-weight: var(--fw-r);}
.desc-box.style1.fs-style1 .descBox-tit {font-weight: inherit;}

.desc-box.style2 {color: #333; font-family: 'Inter', sans-serif; font-size: var(--fs-h4); font-weight: var(--fw-m); line-height: normal;}
.desc-box.style2 .descBox-tit {font-weight: var(--fw-m);}

.form-box.mix-formbox {display: flex; justify-content: flex-start; align-items: center; gap: 16px; column-gap: 23px;}
.form-box.mix-formbox .mix-inner {display: inline-flex; justify-content: flex-start; align-items: center; gap: 7px; row-gap: 7px !important;}
.form-box.mix-formbox .mix-item {display: inline-flex; justify-content: flex-start; align-items: center; gap: 16px;}
td > .form-box.mix-formbox .mix-inner {flex-wrap: wrap;}

.form-box.mix-formbox .mix-item,
.form-box.mix-formbox .mix-inner > .desc,
.form-box.mix-formbox .rc-group > .rc-box {margin: 10px;}
.form-box.mix-formbox .rc-box {column-gap: 10px; margin-right: 0;}
.form-box.mix-formbox .rc-box-after {display: inline-flex; justify-content: flex-start; align-items: center; gap: 2px;}
.form-box.mix-formbox .mix-item .bar,
.form-box.mix-formbox .rc-box-after .bar {font-size: var(--fs-h5); line-height: var(--lh-h5); padding: 0 2px;}
.form-box.mix-formbox .rc-box-after.type1 {font-size: 12px; line-height: 20px; color: var(--Gray_666);}

dl.form-group .formGroup-dd .fc-error {font-size: 12px; line-height: 20px;}

dl.form-group {display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap; gap: 16px; width: 100%;}
dl.form-group.flex-col {align-items: flex-start;}
dl.form-group .form-box {display: inline-flex; justify-content: flex-start; align-items: center; gap: 16px;}
dl.form-group .form-box.center {justify-content: center;}
dl.form-group.flex-col .formGroup-dd > .form-box {display: flex; width: 100%;}
dl.form-group.flex-col > .formGroup-dt,
dl.form-group.flex-col > .formGroup-dd {width: 100%;}

.form-group .formGroup-dt {font-size: var(--fs-h5); line-height: 24px; line-height: var(--lh-h4); color: #333; font-weight: var(--fw-b);}

.group-box-style1 {gap: 22px;}
.group-box-style1.flex-col > dl {width: 100%;}
.popup .group-box-style1 dl.form-group,
.group-box-style1 dl.form-group {gap: 6px;}
.group-box-style1 dl.form-group .formGroup-dt {font-size: initial; line-height: inherit;}
.group-box-style1 dl.form-group .formGroup-dd {gap: 10px;}

.group-box-style2 {gap: 40px;}
.group-box-style2 .group-inner {gap: 20px;}

.popup .desc-box {margin-bottom: 20px;}
.popup .group-box-style1.flex-col > .desc-box {margin-bottom: 0;}

.popup .form-group {display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap; gap: 16px; width: 100%;}
.popup dl.form-group {row-gap: 10px;}
.popup .form-box {display: inline-flex; justify-content: flex-start; align-items: center; gap: 16px;}
.popup .form-box.center {justify-content: center;}
.popup .form-box > .form-input,
.popup .form-box > .form-select {min-width: 162px;}
.popup .form-group.flex-col > .form-box {display: flex; width: 100%;}
.popup .form-group.flex-col {align-items: flex-start;}
.popup .form-box.flex-col,
.popup .form-box.flex-col > .count-box,
.popup .form-group.flex-col > .form-box {width: 100%;}
.popup .form-box.flex-col:has( > .count-box) {row-gap: 10px;}

.form-box.type-wSame:not(.flex-col) > .form-input,
.form-box.type-wSame:not(.flex-col) > .form-select,
.popup .form-box.type-wSame:not(.flex-col) > .form-input,
.popup .form-box.type-wSame:not(.flex-col) > .form-select {min-width: unset; flex: 1 1 0;}

/*url 입력 style important는 border, bg 이런것만 하기 */
html .link-overlay,
html .selection-indicator {border-radius: 5px; border: 1px solid #07F !important; background: rgba(217, 217, 217, 0.50) !important; box-shadow: none !important;}
html .link-input-panel {display: flex; width: 374px; padding: 20px; flex-direction: column; align-items: center; gap: 20px; flex-shrink: 0; border-radius: 15px; border: 1px solid var(--Form_border2); background: #FFF;
box-shadow: 1px 1px 6px 0 rgba(0, 0, 0, 0.08); background: white; padding: 20px; min-width: 300px; animation: 0.2s ease-out 0s 1 normal none running slideUp;}
html .link-input-panel .group-box.btn-box {gap: 20px;}
html .link-input-panel .form-group .formGroup-dt {color: var(--Grey_666, #666); font-size: var(--fs-h5); font-weight: var(--fw-sb); line-height: 24px;}
html .link-overlay {cursor: move; user-select: none; padding: 8px 12px; display: flex; flex-direction: column; justify-content: center; transition: transform 0.2s, box-shadow 0.2s; opacity: 1;}
html .link-overlay .url-display {font-size: 0.75em; color: rgb(51, 51, 51); word-break: break-all; line-height: 1.3; font-weight: var(--fw-m); text-overflow: ellipsis; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: nowrap;}
html .link-overlay .delete-btn {position: absolute; top: -10px; right: -10px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: var(--fs-body); font-weight: var(--fw-sb); box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 6px; opacity: 0; transition: 0.2s; z-index: 20;}
html .link-overlay .resize-handle {width: 12px; height: 12px; background: rgb(102, 126, 234); border: 2px solid white; border-radius: 50%; bottom: -6px; right: -6px; cursor: se-resize; opacity: 0; transition: opacity 0.2s; cursor: se-resize;}
html .link-overlay.editing,
html .link-overlay:hover {box-shadow: rgba(0, 0, 0, 0.15) 0px 4px 8px, rgba(0, 0, 0, 0.1) 0px 1px 2px !important; transform: translateY(-2px);}
html .link-overlay.editing .delete-btn,
html .link-overlay.editing .resize-handle,
html .link-overlay:hover .delete-btn,
html .link-overlay:hover .resize-handle {opacity: 1;}

.fileDesc-box {display: flex; justify-content: flex-start; align-items: center; width: 100%;}
.fileDesc-box, .group-box > .form-box.fileDesc-box {gap: 12px;}

.img-temp-box .img-box.size1,
.img-temp-box .img-box.size3 {aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center;}
.img-temp-box .img-box.size1 {width: 234px;height: 234px;}
.img-temp-box .img-box.size2 {width: 100%;height: 260px;}
.img-temp-box .img-box.size3 {width: 72px;height: 72px;}

.img-temp-box .img-box.style1 {border-radius: 0; border-width: 0px;}
.img-temp-box .img-box.style2 {border-radius: 0; border-width: 0; background-color: #f5f5f5; padding: 4px; width: 80px;height: 80px;}

.img-temp-box,
.form-box.img-temp-box {display: flex; justify-content: center; align-items: center; padding: 22px 0;}
.img-temp-box .img-box {border-radius: 10px; border: 1px solid var(--Form_border2); background-color: var(--bg-F5, #F5F5F5); display: flex; justify-content: center; align-items: center;}
.img-temp-box .img-box:has( img) {background-color: #fff;}

.img-box:has( img) {width: 100%;}
.img-box:has( img) img {max-width: 100%; max-height: 100%; object-position: center; display: block; margin-left: auto; margin-right: auto;}

/*등록 > 메인비쥬얼 등록 부분*/
.type-mainVisual .fileSet-box {gap: 26px;}
.type-mainVisual .fileSet-box .btn-ix {background-color: #fff;}
.type-mainVisual .img-box {overflow: hidden; width: 100%; height: 100%; border-radius: 0; border: 0 none; height: 260px;}
.type-mainVisual .img-box img {width: 100%; height: 100%; object-fit: contain;}

.group-box.flex-col > .form-box.img-temp-box {padding: 0;}


/*ul.item-list > li.item > ... (or ul.rc-group.item-list > li.item > label.rc-box )*/
.item-list {}
.item-list .item {}


/*440px*/
.popup.type-sizeS .form-textarea {min-height: 150px;}
.popup.type-sizeS .form-textarea.h-half {min-height: 80px;}
.popup.type-sizeS .desc-box {margin-bottom: 0;}


/*Page Not Found*/
.notFound-code {text-align: center;}
.notFound-code span {color: #888; font-family: 'Inter', sans-serif; font-size: 128px; font-weight: var(--fw-sb); line-height: 100%; letter-spacing: -1.85rem; text-shadow: 7px 0 0 #888;}
.notFound-code .point {color: var(--HK_or); text-shadow: 7px 0 0 var(--HK_or);}
.notFound-tit {}
.notFound-desc {}

.notFound-body {}
.notFound-area {width: 100%; text-align: center;}


.grid-col-auto {gap: 15px;}
.grid-col-auto:has( .inner-type-searchRsult):has( .inner-type-sel) {grid-auto-rows: 1.1fr 0.9fr;}
.grid-col-auto:has( [class*="inner-type-search"]):has( .inner-type-sel) .flex-col {gap: 15px;}
.grid-col-auto:has( > .inner-box) > .flex-col + .flex-col,
.grid-col-auto:has( [class*="inner-type-search"]):has( .inner-type-sel) > .flex-col + .flex-col {border-top: 1px solid var(--Form_border2);}

.grid-col-auto:has( .inner-type-search):has( .inner-type-sel),
.grid-col-auto:has( .inner-type-searchRsult .no-data:not([style*="display"][style*="none"])):has( .inner-type-sel) {grid-template-rows: auto 1fr; grid-auto-rows: unset;}
.grid-col-auto:has( .inner-type-search):has( .inner-type-sel) .inner-type-sel,
.grid-col-auto:has( .inner-type-searchRsult .no-data:not([style*="display"][style*="none"])):has( .inner-type-sel) .inner-type-sel {flex: 1 1 0;}

.inner-type-sel .cont-top {margin-bottom: 0;}
[class*="inner-type-search"] .no-data {background-color: transparent; height: 55px;}


.iframe-mailCode {width: 100%; min-height: calc(100vh - 200px)}

/**************************************** MAIN ***************************************/
.main-area.type-menu {width: 100%; text-align: center; padding: var(--pdLR);}
.mainItem-list {display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap; gap: 20px;  margin: 0 auto;}
.mainItem-list .mainItem {border-radius: 15px; background: linear-gradient(0deg, #FFF 0%, #FFF 100%), #FFF; box-shadow: 0 4px 30px 0 rgba(0, 0, 0, 0.10); }

.mainItem-list .btn-ix {display: flex; justify-content: space-between; align-items: stretch; width: 100%; min-height: 120px; padding: 10px 20px; position: relative;}
.mainItem-list .btn-ix:hover {background-color: transparent;}

.mainItem-list .mainItem .txt {position: relative; z-index: 2; var(--Gray_111); font-size: var(--fs-h3B); font-weight: var(--fw-sb); line-height: normal; padding: 0.5625rem 0.6875rem; text-align: left; transition: .2s;}
.mainItem-list .mainItem .img {--mySize: 80px; width: var(--mySize); height: var(--mySize); position: absolute; bottom: 10px; right: 20px; transition: transform .2s; aspect-ratio: 1 / 1;}
.mainItem-list .mainItem .img .ico {/*width: 100%; min-width: 100%; height: 100%;*/ position: absolute; bottom: 0; right: 0; transition: background-image .2s;}
.mainItem-list .mainItem .img .ico[class*="ico-main-"] {z-index: 1;}
.mainItem-list .mainItem .img .ico[class*="ico-main-"]::before {filter: none;}
.mainItem-list .mainItem .img .ico[class*="ico-main-"]:not([class*="-point"])::before {background-size: 100% auto !important;}
.mainItem-list .mainItem .img img,
.mainItem-list .mainItem .img .ico {width: 100%; height: 100%; object-fit: cover; aspect-ratio: 1 / 1;}
.mainItem-list .mainItem .btn-ix:hover .img {transform: scale(1.18);}
.mainItem-list .mainItem .btn-ix:hover .txt {font-size: var(--fs-h2B);}

.mainItem-list .mainItem .ico.ico-main-04 ~ .point {position: absolute; width: 30px; height: 10px; right: 11px; top: 21px;}
.mainItem-list .mainItem .ico.ico-main-04 ~ .point [class*="ico-main-04-point"] {min-width: unset; height: 8px; position: absolute; top: 0;}
.mainItem-list .mainItem .ico.ico-main-04 ~ .point [class*="ico-main-04-point"]::before {background-size: auto 100% !important;}
.mainItem-list .mainItem .ico.ico-main-04-point-01 {width: 7px; left: 0;}
.mainItem-list .mainItem .ico.ico-main-04-point-02 {width: 6px; left: 7px;}
.mainItem-list .mainItem .ico.ico-main-04-point-03 {width: 10px; left: 13px;}
.mainItem-list .mainItem .ico.ico-main-04-point-04 {width: 5px; left: 24px;}

.mainItem-list .mainItem .ico.ico-main-06 ~ .point {width: 20px; height: 20px; position: absolute; left: 4px; top: 5px;}
.mainItem-list .mainItem .ico.ico-main-06 ~ .point [class*="ico-main-06-point"] {min-width: unset; width: 100%; height: 100%; position: absolute; top: 0; top: 0;}
.mainItem-list .mainItem .ico.ico-main-06 ~ .point [class*="ico-main-06-point"]::before {background-size: 100% auto !important;}

.mainItem-list .mainItem  [class*="ico-main"][class*="-point"] {opacity: 0; transition: opacity 0.3s ease !important;}
.mainItem-list .mainItem .btn-ix:hover [class*="ico-main"][class*="-point"] {opacity: 1 ;}

.mainItem-list .mainItem .btn-ix:hover .point .ico-main-04-point-01 { animation: time4-01 4s linear infinite; }
.mainItem-list .mainItem .btn-ix:hover .point .ico-main-04-point-02 { animation: time4-02 4s linear infinite; }
.mainItem-list .mainItem .btn-ix:hover .point .ico-main-04-point-03 { animation: time4-03 4s linear infinite; }
.mainItem-list .mainItem .btn-ix:hover .point .ico-main-04-point-04 { animation: time4-04 4s linear infinite; }

.mainItem-list .mainItem .btn-ix:hover .point .ico-main-06-point-01 { animation: time3-01 4s linear infinite; }
.mainItem-list .mainItem .btn-ix:hover .point .ico-main-06-point-02 { animation: time3-02 4s linear infinite; }
.mainItem-list .mainItem .btn-ix:hover .point .ico-main-06-point-03 { animation: time3-03 4s linear infinite; }

.mainItem-list .mainItem .point {display: none;}

@keyframes time4-01 { 0%, 10% { opacity: 0; } 15%, 90% { opacity: 1; } 100% { opacity: 0; } }
@keyframes time4-02 { 0%, 20% { opacity: 0; } 25%, 90% { opacity: 1; } 100% { opacity: 0; } }
@keyframes time4-03 { 0%, 30% { opacity: 0; } 35%, 90% { opacity: 1; } 100% { opacity: 0; } }
@keyframes time4-04 { 0%, 40% { opacity: 0; } 45%, 90% { opacity: 1; } }

@keyframes time3-01 { 0%, 10% { opacity: 0; } 15%, 90% { opacity: 1; } 100% { opacity: 0; } }
@keyframes time3-02 { 0%, 25% { opacity: 0; } 30%, 90% { opacity: 1; } 100% { opacity: 0; } }
@keyframes time3-03 { 0%, 40% { opacity: 0; } 45%, 90% { opacity: 1; } 100% { opacity: 0; } }

/*.mainItem-list:not(.type-preview) {max-width: calc((440px * 3) + (20px * 2)); max-width: 1362px;}*/
.mainItem-list:not(.type-preview) .mainItem {width: calc((100% - 40px) / 3);}

.mainItem-list.type-preview,
.mainItem-list.type-preview .mainItem {width: 100%;}

/*슬라이드*/

/*메인 슬라이드*/
.main-body .mainSlider-area {width: 100vw; height: 442px; background-color: rgba(0, 0, 0, .5); display: flex; align-items: center; position: relative; overflow: hidden; transition: height .2s;}
.main-body .swiper {width: 100%; height: 100%;}
.main-body .swiper-slide {text-align: center; font-size: var(--fs-h4); /*background: #fff;*/ display: flex; justify-content: center; align-items: center;}

.detail-item:has( video) {position: relative;}

.detail-item video,
.main-body .swiper-slide > img,
.main-body .swiper-slide video {position: absolute; top: 0; left: 0; z-index: 1;}
.main-body .swiper-slide img {display: block; width: 100%; height: 100%; object-fit: cover;}
.detail-item video,
.main-body .swiper-slide video {width: 100%; height: 100%; object-fit: cover;}

.main-body .autoplay-progress {position: absolute; right: 16px; bottom: 16px; z-index: 10; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; font-weight: var(--fw-sb); color: #fff;}
.main-body .autoplay-progress svg { --progress: 0;  z-index: 10; width: 90%; height: 90%; stroke-width: 4px; stroke: #fff; fill: none; stroke-dashoffset: calc(125.6px * (1 - var(--progress))); stroke-dasharray: 125.6; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%) rotate(-90deg);}
.main-body .autoplay-progress span {font-size: 0.8rem;}

.mainVisualslider-area .swiper-button-next,
.mainVisualslider-area .swiper-button-prev,
.main-body .swiper-button-next,
.main-body .swiper-button-prev {color: #fff; width: 50px; height: 50px; border-radius: 25px; background-color: rgba(0, 0, 0, 0.03);}
.mainVisualslider-area .swiper-button-next,
.mainVisualslider-area .swiper-button-prev {z-index: 1;}
.mainVisualslider-area .swiper-button-next svg,
.mainVisualslider-area .swiper-button-prev svg,
.main-body .swiper-button-next svg,
.main-body .swiper-button-prev svg {width: 40%; height: 40%; aspect-ratio: 1 / 1;}
.mainVisualslider-area .swiper-button-next svg,
.main-body .swiper-button-next svg {margin-right: -2px;}
.mainVisualslider-area .swiper-button-prev svg,
.main-body .swiper-button-prev svg {margin-left: -2px;}
.mainVisualslider-area .swiper-button-next,
.mainVisualslider-area .swiper-horizontal .swiper-button-next,
.main-body .swiper-button-next,
.main-body .swiper-horizontal .swiper-button-next {right: var(--pdLR); right: 50%; margin-right: calc((1362px / 2) * -1); margin-right: calc((var(--maxW) / 2 - 20px) * -1);}
.mainVisualslider-area .swiper-button-prev,
.mainVisualslider-area .swiper-horizontal .swiper-button-prev,
.main-body .swiper-button-prev,
.main-body .swiper-horizontal .swiper-button-prev {left: var(--pdLR); left: 50%; margin-left: calc((1362px / 2) * -1); margin-left: calc((var(--maxW) / 2 - 20px) * -1);}
.mainVisualslider-area .swiper-button-next:hover,
.mainVisualslider-area .swiper-button-prev:hover,
.main-body .swiper-button-next:hover,
.main-body .swiper-button-prev:hover {background-color: rgba(0, 0, 0, 0.6);}

.main-body .swiper-pagination {bottom: 20px !important;}
.main-body .swiper-pagination-bullet {width: 10px; height: 10px; border-radius: 50%; transition: all 0.3s ease; opacity: 1; background: #ddd;}
.main-body .swiper-pagination-bullet-active {width: 40px; height: 10px; background: #f84301; border-radius: 10px;}

/*RM 슬라이드*/
/*.mainVisualslider-area,
.mainVisualslider-area .mainVisualSwiper {width: 100%;}
.mainVisualslider-area .mainVisualSwiper .swiper-slide {height: 200px; position: relative;}*/
.mainVisualslider-area .mainVisualSwiper .swiper-slide img,
.mainVisualslider-area .mainVisualSwiper .swiper-slide video {width: 100%; height: 100%; object-fit: cover;
	position: absolute; top: 0; left: 0; z-index: 1;
}
.mainVisualslider-area {width: 100%; height: 248px; padding: 24px; display: flex; align-items: center; position: relative; overflow: hidden; transition: height .2s;}
.mainVisualslider-area .swiper {width: 100%; height: 100%;}
.mainVisualslider-area .swiper-slide {text-align: center; font-size: var(--fs-h4); /*background: #fff;*/ display: flex; justify-content: center; align-items: center;}
.mainVisualslider-area .swiper-button-next,
.mainVisualslider-area .swiper-horizontal .swiper-button-next,
.mainVisualslider-area .swiper-button-prev,
.mainVisualslider-area .swiper-horizontal .swiper-button-prev {margin-left: 0; margin-right: 0;}
.mainVisualslider-area .swiper-button-next,
.mainVisualslider-area .swiper-horizontal .swiper-button-next {right: 0;}
.mainVisualslider-area .swiper-button-prev,
.mainVisualslider-area .swiper-horizontal .swiper-button-prev {left: 0;}
.mainVisualslider-area .swiper-button-next svg,
.mainVisualslider-area .swiper-button-prev svg {filter: var(--filterColor-333); width: 16px; height: 16px;}
.mainVisualslider-area .swiper-button-next:hover svg,
.mainVisualslider-area .swiper-button-prev:hover svg {filter: var(--filterColor-fff);}
.mainVisualslider-area .swiper-button-prev .swiper-navigation-icon {transform: rotate(180deg);}

/*.boxBg-area:has( > .mainVisualslider-area) .mainVisualslider-area .swiper-button-next,
.boxBg-area:has( > .mainVisualslider-area) .mainVisualslider-area .swiper-horizontal .swiper-button-next {right: -24px;}
.boxBg-area:has( > .mainVisualslider-area) .mainVisualslider-area .swiper-button-prev,
.boxBg-area:has( > .mainVisualslider-area) .mainVisualslider-area .swiper-horizontal .swiper-button-prev {left: -24px;}*/

.main-body .inner-box {position: relative; z-index: 2; color: #fff; line-height: normal; letter-spacing: -0.5px; width: 100%; height: 100%; display: flex; justify-content: center; align-items: flex-start; flex-direction: column; row-gap: 36px; padding: 40px calc(var(--pdLR) * 4); /*background: linear-gradient(90deg, #000 10%, rgba(0, 0, 0, 0.00) 40%);*/ /*padding: 40px 150px; max-width: 1362px;*/ padding: var(--pdLR) calc(var(--pdLR) * 3.75);}
.main-body .swiper-slide::before {content: ''; display: block; position: absolute; left: 0; top: 0; right: 0; bottom: 0; z-index: 2;background: linear-gradient(0deg, rgba(0, 0, 0, 0.29) 0%, rgba(0, 0, 0, 0.29) 100%);}
.main-body .text-box,
.main-body .btn-box {width: 100%; margin: 0 auto; text-align: left; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; row-gap: 8px;}
.main-body .text-box {text-align: left; }
.main-body .text-box * {color: inherit; line-height: inherit; letter-spacing: inherit;}
.main-body .text-box .title {font-size: 38px; font-weight: var(--fw-sb); line-height: 42px;}
.main-body .text-box .desc {font-size: 1rem; line-height: 1.4375rem; font-weight: var(--fw-m);}
.main-body .text-box .new {color: var(--HK_or); font-size: var(--fs-h2); line-height: var(--lh-h2); font-weight: var(--fw-sb);}
.main-body .text-box .new + * {margin-top: -6px;}
.main-body .btn-box .btn-ix {display: flex; width: auto; height: 32px; padding: 4px 14px; justify-content: center; align-items: flex-end; gap: 5.776px; flex-shrink: 0; border-radius: 21.658px; border: 0.722px solid #F5F5F5; background-color: rgba(0, 0, 0, 0.40); box-shadow: 0 0.722px 1.444px 0 rgba(16, 24, 40, 0.05);}
.main-body .btn-box .btn-ix:hover {background-color: rgba(255, 255, 255, 0.2);}
.main-body .btn-box .btn-ix .txt {color: #FFF; font-size: 15px; font-weight: var(--fw-sb); line-height: 23px;}

/*.main-body .mainSlider-area {overflow: hidden;}
.main-body .mainSlider-area::before,
.main-body .mainSlider-area::after {content: ''; display: block; position: absolute; z-index: 2; height: 100%; top: 0;}
.main-body .mainSlider-area::before { width: 460px; width: 30vw; left: 0; background: linear-gradient(90deg, #000 68.89%, rgba(0, 0, 0, 0.00) 99.67%); transition: margin-left .2s; }
.main-body .mainSlider-area::after{width: 70vw; right: 0; background: linear-gradient(0deg, rgba(0, 0, 0, 0.29) 0%, rgba(0, 0, 0, 0.29) 100%), url(<path-to-image>) lightgray 50% / cover no-repeat;}*/

.main-body {padding-left: 0; padding-right: 0;}
.main-body > div:not(.mainSlider-area) {padding-left: var(--pdLR); padding-right: var(--pdLR);}

/*슬라이드가 1개일때*/
.main-box .mainSlider-area:has( .swiper-button-lock) .inner-box {padding-left: var(--pdLR) !important; padding-right: var(--pdLR) !important;}

/**************************************** max-width : 1440px *****************************************/
.header-top,
#footer .inner,
.content-section > .page-tab,
.content-section > .page-top,
.content-section > .page-head,
.page-body:not(.main-body),
.main-body .inner-box,
.main-area.type-menu {width: 100%; max-width: var(--maxW); margin-left: auto; margin-right: auto; padding-left: var(--pdLR); padding-right: var(--pdLR);}


/**************************************** Size *****************************************/
[data-rc] {
  width: var(--W, 100%);
  /*flex: 1 1 0%; min-width: 0; box-sizing: border-box;*/
}
[data-rc][style*="--WMin"][style*="--WMax"] {
  width: clamp(var(--WMin), var(--W, 412px), var(--WMax)) !important;
}
.moMode [data-rc][style*="--moW"] {width: var(--moW, 100%) !important; max-width: none !important;}
.moMode [data-rc][style*="--moWSet"] {width: var(--moWSet) !important; min-width: var(--moWSet) !important; max-width: none !important;}

.mode-mo-col[data-rc] {flex-wrap: wrap;}
.moMode .mode-mo-col[data-rc] {}

/*floting 영향 모음*/
.tab-head {width: 100%;}
.tab-head .etc-flex {/*max-width: 412px; flex: 1 1 0;*/ width: 412px; max-width: 25%; min-width: 100px;}

[class*="has-pos-type"] {transition: width 0.2s ease-in-out;}
.tab-head.has-pos-type1 {width: 100%; padding-right: 10px;}

.tab-head:has( [class*="tabtype"] + .etc-flex) [class*="tabtype"] {/*max-width: calc(100% - 220px);*/ max-width: calc(75% - 10px); overflow-x: auto; padding: 5px;}

/*mail preview*/
.mailPreView-area {display: flex; flex-direction: column; gap: 40px;}
.mailPreView-body {display: flex; flex-direction: column; gap: 24px; padding-bottom: 24px;}
.mailPreView-foot {display: flex; justify-content: center;}
.mailPreView-title {color: #333; font-size: var(--fs-h1); font-weight: var(--fw-b); line-height: var(--lh-h1); letter-spacing: -0.14px;}
.mailPreView-desc {color: var(--Content-Primary, #0E0F0C); font-weight: var(--fw-m);}
.mailPreView-area .link-type2 .list .link-full,
.mailPreView-area .link-type2:not(.listH_JS, [class*="listview-"]).flex-col > .list > .link-full:not(.flex-col) {gap: 24px;}
.mailPreView-area .link-type2 .list .link-full .img-box + .txt-box,
.mailPreView-area .link-type2:not(.listH_JS, [class*="listview-"]).flex-col > .list > .link-full:not(.flex-col) .img-box + .txt-box {padding-left: 0;}

.popup .mailPreView-area {width: 520px; max-width: 100%; margin: 0 auto;}

/**************************************** media *****************************************/

/*pc*/
@media (min-width: 1024px) {
	.boxtype-listbox .boxtype-list {max-width: 385px;}
	/*.file-list > .file-item .file-box .file-nt {display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 100%;}*/
}
@media (min-width: 1450px) {
	.page-search.type-fullX .search-row {justify-content: center;}
}

@media (max-width: 1600px) {
	.page-search .search-cell > .form:first-child:last-child > .inForm-box[style*="width"],
	.page-search .search-cell > .form:first-child:last-child > [style*="width"]:first-child:last-child {width: 75% !important;}
}

/*@media (min-width: 1441px) {
	.fixed-right {right: 50%; margin-right: calc(-1 * (var(--maxW) / 2 - var(--pdLR)));}
	html:has( .btn-topmove.show) .fixed-right {right: calc(50% + var(--topBtSize) + 10px);}
}*/

@media (min-width: 1441px) {
	.main-body .inner-box {padding-left: calc(var(--pdLR) * 2); padding-right: calc(var(--pdLR) * 9);}
}
@media (max-width: 1440px) {
	.fixed-right {right: var(--pdLR); margin-right: 0;}
	html:has( .btn-topmove.show) .fixed-right {right: calc(var(--pdLR) + var(--topBtSize) + 10px);}

	.pos-type1 {right: var(--pdLR); margin-right: 0;}
	html.is-scroll-bottom:not(.is-scroll-top) .pos-type1 {right: 50%; transform: translateX(50%);}

	.main-body .inner-box {max-width: unset; width: 100%; background: linear-gradient(90deg, #000 10%, rgba(0, 0, 0, 0.00) 40%);}
}
@media (max-width: 1439px) {
	/*.pos-type1 {right: var(--pdLR); margin-right: 0;}*/
	/*html:has( .filter-sub.open) .pos-type1 {margin-right: var(--pdLR);}*/
	html:has( .filter-sub.open):not(.is-scroll-bottom) .pos-type1 {margin-right: var(--pdLR);}
}
@media (max-width: 1366px) {
	.main-body .inner-box {padding-left: calc(var(--pdLR) * 2); padding-right: calc(var(--pdLR) * 2);}
	.main-body .swiper-button-next, .main-body .swiper-horizontal .swiper-button-next,
	.main-body .swiper-button-prev,	.main-body .swiper-horizontal .swiper-button-prev {width: 40px; height: 40px;}
	.main-body .swiper-button-next, .main-body .swiper-horizontal .swiper-button-next {right: 10px; margin-right: 0;}
	.main-body .swiper-button-prev,	.main-body .swiper-horizontal .swiper-button-prev {left: 10px; margin-left: 0;}
}

@media (max-width: 1440px) and (min-width: 1367px) {
	.main-body .mainSlider-area {height: 400px;}
}
@media (max-width: 1366px) and (min-width: 1024px) {
	.main-body .mainSlider-area {height: 470px;}
}

@media (max-width: 1300px) {
	[class*="link-type"] .over-box {--myBtnSize: 36px;}
}
/*@media (max-width: 1299px) and (min-width: 768px) {
	.popup-wrap .popup[class*="type-detail"] {width: calc(100vw - 24px) !important; height: calc(100vh - 24px) !important; max-width: calc(100vw - 24px) !important; max-height: calc(100vh - 24px) !important;}
}*/
@media (max-width: 1200px) {
	/*FO-DB*/
	.area-content .area-body .cont-view,
	.area-content .area-body .cont-view > .boxBg-area,
	.area-content .area-body .cont-area:not(.flex-col):has( > .cont-inner-area) {column-gap: calc(var(--gab) * 4); row-gap: calc(var(--gab) * 4);}
}

@media (max-width: 1140px) and (min-width: 1024px) {
	[class*="link-type"] .over-box {--myBtnSize: 30px;}
}
@media (max-width: 1080px) and (min-width: 768px) {
	.form-box.formbox-type1 {justify-content: flex-start !important;}
	.form-box.formbox-type1 > .box-inner-form {min-width: 100%;}

	.fileSet-box.fileSetbox-type1 {flex-direction: column; align-items: flex-start !important;}
	.fileSet-box.fileSetbox-type1 > .form-input.flex1 {flex: unset !important;}
	.fileSet-box.fileSetbox-type1 > .inner-box {width: 100%; flex-wrap: wrap;}
}

@media (max-width: 1024px) {
	.main-body .inner-box {padding-left: 55px; padding-right: 55px;}
}
/*@media (min-width: 1024px) {
	html:has( .page-body.main-body) .page-body.main-body {padding-bottom: 0;}
}*/

/*모바일 ~ 태블릿*/
@media (max-width: 1023.98px) {

	.pdf-prev-btn, .pdf-next-btn {--mySize: 40px;}
	.pdf-prev-btn::before, .pdf-next-btn::before {--myISize: calc(var(--mySize) / 2);}

	[class*="no-data"].ico .ico {}
	.no-data .ico[class*="ico-error"] {--mySize: 34px;}
	.no-data-style1 .ico {--mySize: 60px;}
	.no-data-style1 .text {font-size: var(--fs-h3);}

	.cont-paging:has( > .paging.mode-mo) {margin-top: 0; margin-bottom: 0;}

	.loader-box:not([class*="size"]) {--size: 90px; --size-stroke: 10px; --fs-text: 22px; --fs-desc: 13px;}
	.loader-box .text {margin: 8px 0;}

	/*table*/
	.table.view th, .table.view td,
	.table.list th, .table.list td {padding-left: 6px; padding-right: 6px;}
	/*.type-list-table:has( .table-listbox[style*="min-width"]) .table-listbox[style*="min-width"] {min-width: unset !important; width: 100%;}*/

	/*popup*/
	.popup {padding: 24px;}

	/*lnb + content*/
	/*region archive layout*/
	/*.page-body.type-hasLnb .area-lnb {display: none;}
	.page-body.type-hasLnb .area-content {width: 100%;}*/
	body.lnbOpen .page-body.type-hasLnb {position: relative;}
	body.lnbOpen .page-body.type-hasLnb .btn-lnb-close {display: block; z-index: 1;}
	body.lnbOpen .page-body.type-hasLnb .area-lnb {position: fixed; left: 0; top: var(--headerH); bottom: 0; padding-left: var(--pdLR); width: calc(var(--pdLR) + 208px); z-index: 2; overflow: auto;}
	body.lnbOpen .page-body.type-hasLnb .area-lnb .lnb {position: unset;}
	body.lnbOpen .page-body.type-hasLnb .area-content {width: 100%; padding-left: 0;}
	.is-scroll-bottom body.lnbOpen .page-body.type-hasLnb .area-lnb {bottom: var(--footerH);}

	/*FO-DB*/
	.boxBg-area[class*="itemNth"] {flex-wrap: wrap;}
	.boxBg-area.itemNth-2 > .item,
	.boxBg-area.itemNth-3 > .item,
	.boxBg-area.itemNth-4 > .item {width: calc((100% / 2) - (var(--gab) * 2));}

	.listview-2 > li,
	.acc-area .file-list.listview-2 > li {width: 100%;}

	.listview-3 > li, .listview-4 > li {width: calc((100% - (var(--gab) * 1)) / 2);}
	.listview-5 > li, .listview-6 > li, .listview-7 > li {width: calc((100% - (var(--gab) * 3)) / 4);}

	.flex-auto:has( > div.table-view) {flex-direction: column; align-items: flex-start !important;}
	.flex-auto:has( > div.table-view) > div {width: 100%;}
	.flex-auto:has( > div.table-view) .table.view th,
	.flex-auto:has( > div.table-view) .table.view td {padding: 10px; height: auto;}

	/*별도*/
	.detail-area .file-list > .file-item,
	.detail-area .file-list[class*="listview-"] > .file-item {width: 100%; gap: 12px; border-radius: 5px;}
	/*.detail-area .file-list > .file-item .file-box {display: flex; justify-content: flex-start; align-items: center; gap: 12px;}*/
	.detail-area .file-list > .file-item .file-box {position: relative;}
	.detail-area .file-list > .file-item .file-box > * {display: inline-block; vertical-align: middle; margin: 0 12px 0 0;}
	.detail-area .file-list > .file-item .file-box > *:last-child {margin-right: 0;}
	.detail-area .file-list > .file-item .file-box .file-nt {width: auto; max-width: calc(100% - 120px); padding-right: 12px;}
	.detail-area .file-list > .file-item .file-nt + .file-size {position: absolute; top: 50%; transform: translateY(-50%);}
	.detail-area .file-list > .file-item [class*="filetype-"] {width: 48px; line-height: 15px;}

	[class*="link-type"] {--listCnt: 3;}

	[style*="--myImgH"][class*="link-type"] .img-box, [style*="--myImgH"] [class*="link-type"] .img-box {height: calc((var(--myImgH) / 5) * 3);}

	/*.link-type2:not(.listH_JS, [class*="listview-"]):not(.flex-col) > .list,
	.link-type2:not(.listH_JS, [class*="listview-"]).flex-col > .list > .link-full:not(.flex-col) .img-box { width: calc((100% - (var(--myGap) * 2)) / 3);}*/

	.link-type2:not(.listH_JS, [class*="listview-"]).flex-col > .list > .link-full:not(.flex-col) .img-box + .txt-box {/*width: calc(100% - ((100% - (var(--myGap) * 2)) / 3));*/ padding-left: var(--myGap);}
	[class*="link-type"] > .list:has( > .over-box) {flex-direction: column; display: flex; justify-content: flex-start; align-items: flex-start;}

	[class*="link-type"] .over-box {opacity: 1; --myBtnSize: 40px; justify-content: flex-start;}
	/*[class*="link-type"] .over-box .btn-ix.over-type2 {background-color: #F5F5F5; border-color: #F5F5F5;}
	[class*="link-type"] .over-box .btn-ix.over-type2 .ico::before {--svg-color: var(--filterColor-0077FF);}
	[class*="link-type"] .over-box .btn-ix.over-type1 {background-color: rgba(0, 0, 0, 0.50); border-color: #F5F5F5;}
	[class*="link-type"] .over-box .btn-ix.over-type1 .ico::before {--svg-color: var(--filterColor-fff);}*/

	[class*="link-type"] .over-box .btn-ix.over-type1 {background-color: rgba(0, 0, 0, 0.50); border-color: #F5F5F5;}
	[class*="link-type"] .over-box .btn-ix.over-type1 .ico::before {--svg-color: var(--filterColor-fff);}

	[class*="link-type"] .over-box .btn-ix.over-type2 {background-color: #F5F5F5; border-color: #F5F5F5;}
	[class*="link-type"] .over-box .btn-ix.over-type2 .ico::before {--svg-color: var(--filterColor-666);}
	[class*="link-type"] .over-box .btn-ix.over-type2.on .ico::before {--svg-color: var(--filterColor-EC6608);}
	[class*="link-type"] .over-box .btn-ix.over-type2:not(.on):hover .ico::before {--svg-color: var(--filterColor-fff);}

	[class*="link-type"] .over-box[data-over="pc"] {position: unset; pointer-events: auto; width: auto; padding: 0; margin-top: 0;}
	[class*="link-type"] .over-box[data-over="pc"],
	[class*="link-type"] .over-box:not([style*="width:"]) {min-width: unset; width: 100%; justify-content: flex-start;}

	.dl-formbox > .form > p[class*="form-"]
	.dl-formbox > .form > div[class*="form-"],
	.dl-formbox > .form > span[class*="form-"] {flex-wrap: wrap;}
	.page-search .search-cell > .form:first-child:last-child > .inForm-box[style*="width"],
	.page-search .search-cell > .form:first-child:last-child > [style*="width"]:first-child:last-child {width: 100% !important;}
	/*.page-search.type-fullX {padding-left: var(--pdLR-modeT); padding-right: var(--pdLR-modeT);}*/

	.dl-formbox > .form:has( .rc-group + .form-date) {flex-wrap: wrap;}
	.dl-formbox:has( .form > .rc-group + .form-date) {flex-direction: column; align-items: flex-start;}

	.page-search .search-row.box-style3 .rc-group {padding: 0 4px;}
	.page-search .search-row.box-style3:has( .scrollbox) .scrollbox {padding: 10px;}
	.page-search .search-row.box-style3:has( .scrollbox) .scrollbox > .scroll {left: 10px; right: 10px;}

	.page-search .search-row.box-style3 .rc-group.scroll,
	.page-search .search-row.box-style3:has( .scrollbox) .scrollbox > .rc-group.scroll {left: 4px; right: 4px; padding-left: 4px; padding-right: 4px;}
	.page-search .search-row.box-style3 .rc-group.scroll .rc-box {margin: 4px !important;}

	/*좌우 여백 :: --pdLR*/
	/*margin*/
	.page-tab { margin-left: var(--pdLR-modeT); margin-right: var(--pdLR-modeT); margin-left: var(--pdLR); margin-right: var(--pdLR);}

	/*padding*/
	/*.page-search, .typeList-block {padding-left: var(--pdLR-modeT); padding-right: var(--pdLR-modeT); padding-left: var(--pdLR); padding-right: var(--pdLR);}*/

	.typeList-area {padding-top: var(--pdLR-modeT); padding-bottom: var(--pdLR-modeT); padding-top: var(--pdLR); padding-bottom: var(--pdLR);}
	.typeList-block + .typeList-block {margin-top: 26px; padding-top: 20px; border-top-color: transparent}

	/*column 처리 모음*/
	.acc-area .acc-item:not(.imgFile-item),
	.cont-top, .area-head, .area-foot, .page-title,
	.acc-area .acc-item:not(.imgFile-item) .accItem-head .accItemHead-inner {flex-direction: column; row-gap: 12px;}
	.cont-top:has( > .left .total-box:last-child) {flex-direction: row; flex-wrap: wrap;}
	.cont-top:has( > .left .total-box:last-child) > * {width: auto;}

	.accItem-head {row-gap: 10px;}
	.accItem-head .left .accItem-btn + .accItem-form.dl-formbox > .label {min-height: unset;}
	.accItem-head .left .accItem-btn + .accItem-form.dl-formbox > .form {flex-direction: column; align-items: flex-start; row-gap: 10px;}
	.accItem-head .left .accItem-btn + .accItem-form.dl-formbox > .form > div {width: 100%;}

	.acc-area .acc-item:not(.imgFile-item) > *,
	.acc-area .acc-item:not(.imgFile-item) .accItem-head > *,
	.cont-top > *, .area-head > *, .area-foot > *, .page-title > *,
	.acc-area .acc-item:not(.imgFile-item) .accItem-head .accItemHead-inner > * {width: 100%;}

	.cont-foot > div,
	.area-foot > div {flex-wrap: wrap;}

	.acc-area .acc-item:not(.imgFile-item) .accItem-head .right:has( > .imgThum-list[id*="swiper"]) {max-width: 100%;}

	.acc-area .acc-item:not(.imgFile-item):has( .item-img ~ .item-btn > .btn-ix:first-child:last-child) {position: relative;}
	.acc-area .acc-item:not(.imgFile-item):has( .item-img ~ .item-btn > .btn-ix:first-child:last-child) .item-btn {width: auto; position: absolute; right: 0; top: 0;}

	.imgFile-item .form-box {flex-wrap: wrap; justify-content: flex-end;}/*공통화*/
	.imgFile-item .form-box.formbox-type1 {justify-content: flex-start;}

	/*tab*/
	.page-tab.type-lrW {width: 100%; max-width: unset; }
	/*.page-tab.type-lrW::before, .page-tab.type-lrW::after {width: calc(var(--pdLR-modeT) * 2);}
	.page-tab.type-lrW::before {left: calc(var(--pdLR-modeT) * -1);}
	.page-tab.type-lrW::after {right: calc(var(--pdLR-modeT) * -1);}*/
	.page-head:has( .page-tab.type-lrW) {padding-right: 0;}
	.page-head:has( .page-tab.type-lrW) .page-tab.type-lrW > .is-scrolled > .hasScrollBox,
	.page-head:has( .page-tab.type-lrW) .page-tab.type-lrW > [class*="tabtype"],
	.page-head:has( .page-tab.type-lrW) .page-tab.type-lrW > .rc-group {padding-right: var(--pdLR);}

	/*.filter-main .tabtype1 .tab {min-height: unset;}*/

	.cont-top > div.dayPNSet-box {flex-wrap: wrap;}
	.cont-top > div.dayPNSet-box:first-child:last-child {justify-content: center;}

	.type-gab45 {row-gap: 10px !important;}

	.form-box.mix-formbox,
	.form-box.mix-formbox > .mix-inner:not(.rc-group) {flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 0;}
	.form-box.mix-formbox > .mix-inner {width: 100%;}
	.form-box.mix-formbox > .mix-inner > .mix-item {flex-wrap: wrap;}
	.form-box.mix-formbox > .mix-inner.rc-group:has( .rc-box + *:not(.rc-box)) {flex-direction: column; justify-content: flex-start; align-items: flex-start;}

	/*.fixed-right {right: var(--pdLR); right: auto; left: var(--pdLR);}*/

	/*html:has( .fixed-right) .page-body {padding-bottom: 100px;}*/

	.rcSec-row .rcSec-cell.dl-formbox {flex-direction: column; align-items: flex-start;}
	.rcSec-row .rcSec-cell.dl-formbox:not(.celltype-col *) > .label {min-height: auto;}
	.rcSec-row .rcSec-cell.dl-formbox > .form {gap: 6px; width: 100%;}

	.area-content .area-body {row-gap: calc(var(--gab) * 3);}

	/******* MAIN ******/
	.main-body .mainSlider-area {height: 254px;}
	.main-body .mainSlider-area::before {margin-left: -15vw;}
	.main-body .inner-box {justify-content: center;}
	.main-body .inner-box .title {--myLine: 2; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 100%;
	white-space: normal; text-align: left; word-wrap: break-word; display: -webkit-inline-box; -webkit-line-clamp: var(--myLine); -webkit-box-orient: vertical;}
	.main-body .inner-box .title br {display: none;}
	.main-body .inner-box .desc {display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 100%;}
	.main-body .text-box .title {font-size: 26px; line-height: 30px;}
	.main-body .swiper-button-next, .main-body .swiper-button-prev {display: none;}

	.main-body > div:not(.mainSlider-area) {padding-top: calc((var(--pdLR) * 2) * 0.8); padding-bottom: calc((var(--pdLR) * 2) * 0.8);}

	.mainItem-list:not(.type-preview) .mainItem {width: calc((100% - 20px) / 2);}
	.mainItem-list {gap: 16px;}
}

/*태블릿*/
@media (min-width: 768px) and (max-width: 1023.98px) {

	.tablestyle-list .qna-item > .qnaItem-head,
	.tablestyle-list .qna-item > .qnaItem-body {padding-left: 40px; column-gap: 8px;}
	.tablestyle-list .qna-item > .qnaItem-head::before,
	.tablestyle-list .qna-item > .qnaItem-body::before {width: 40px;}
	.tablestyle-list .qna-item .qnaItem-head .qna-btn-box {column-gap: 12px;}
	.tablestyle-list .qna-item .qnaItem-head .qna-btn-box.right {max-width: 30%; flex-wrap: wrap; justify-content: center;}


	.filter-area .btn-filter .txt {max-width: 80px;}
}

/*모바일*/
@media (max-width: 767.98px) {
	[class*="no-data"].ico .ico {}
	.no-data .ico[class*="ico-error"] {}
	.no-data-style1 .ico {--mySize: 50px;}

	[class*="mode-mo-col"] {flex-direction: column;}
	.mode-mo-col-rev {flex-direction: column-reverse;}

	[style*="--mo-wSet"] {width: var(--mo-wSet);}
	[style*="--mo-wSet"] {max-width: var(--mo-wSet);}

	.mode-mo-icon.btn-ix {padding-left: 0 !important; padding-right: 0 !important;}

	/*pc에서 mode상관없이 제외 : .webType*/
	html:not(.webType) .page-tab:not(.type-lrW) ::-webkit-scrollbar {width: 2px; height: 2px;}
	html:not(.webType) .page-tab:not(.type-lrW) ::-webkit-scrollbar-thumb {background-color: var(--HK_or);}

	/*.size-b .btn-ix, .btn-ix.size-b {min-width: 48px; min-height: 48px; border-radius: 24px;}
	.size-b .btn-ix .ico, .btn-ix.size-b .ico {width: 40px; min-width: 40px; height: 40px; border-radius: 20px;}*/
	.size-b .btn-ix, .btn-ix.size-b {--mySize: 50px;}
	.size-b .btn-ix .ico, .btn-ix.size-b .ico {}

	.btn-ix.downtxt .ico::before {background-size: 70% auto !important;}
	.btn-ix.downtxt .ico-list::before {background-size: 60% auto !important;}
	.btn-ix.downtxt .txt {display: none;}

	.loader-box:not([class*="size"]) {--size: 75px; --size-stroke: 10px; --fs-text: 20px;}
	.loaderSVG-box:not([class*="size"]) {--fs-text: 14px;}
	.loaderSVG-box.sizeS {--fs-text: 13px;}
	.loaderSVG-box.sizeL {--fs-text: 16px;}

	.listview-5 > li, .listview-6 > li, .listview-7 > li {width: calc((100% - (var(--gab) * 1)) / 2);}

	[class*="link-type"] {--listCnt: 2;}
	/*.link-type2:not(.listH_JS, [class*="listview-"]):not(.flex-col) > .list,
	.link-type2:not(.listH_JS, [class*="listview-"]).flex-col > .list > .link-full:not(.flex-col) .img-box { width: calc((100% - (var(--myGap) * 1)) / 2);}*/
	.link-type2:not(.listH_JS, [class*="listview-"]).flex-col > .list > .link-full:not(.flex-col) .img-box + .txt-box {width: calc(100% - ((100% - (var(--myGap) * (var(--listCnt) - 1))) / var(--listCnt))); padding-left: var(--myGap);}

	.mode-nthChange-box {flex-direction: column-reverse;}

	.fileSet-box .btn-ix:has( > [type="file"]) {padding: 5px; background-color: #fff;}
	.fileSet-box .btn-ix:not(:has( i[class*="ico-file"])) [type="file"] ~ .txt {width: 20px; height: 20px; min-width: 20px; font-size: 0; position: relative;}
	.fileSet-box .btn-ix:not(:has( i[class*="ico-file"])) [type="file"] ~ .txt::before {content: '';}

	.form-box.formbox-type1 > .box-inner-form {min-width: 100%}

	.dl-formbox .form-input,
	.dl-formbox .form-select,
	.dl-formbox .form-textarea,
	.dl-formbox .inForm-box .search-box .inputbox {width: auto; min-width: unset;
		flex: 1 1 0;/*전체 페이지 테스트 후 확정하기*/
	}
	.page-search .search-cell {flex-wrap: wrap;}
	.page-search.type-style1 dl.search-cell:has( + dl.search-cell) {margin-right: 0;}

	.form.flex-col.textarea-mode > .form-textarea {width: 100%;}

	/*.dl-formbox > .form {flex: unset;}
	.dl-formbox > .form .inner-form,
	.dl-formbox > .form .inner-group,
	[class*="accItem-form"] > .inner-group {flex-wrap: wrap;}*/

	.dl-formbox:has( > .tit.mode-pc-tablet),
	.dl-formbox > .tit.mode-pc-tablet ~ .form {width: 100%;}
	.dl-formbox > .tit.mode-pc-tablet ~ .form > *,
	.dl-formbox > .form > [class*="form-"].form-date {width: 100% !important;}
	.dl-formbox > .form > [class*="form-"].form-date .bar {display: none;}
	.dl-formbox > .form > [class*="form-"].form-date .form-input {width: 100%;}
	.dl-formbox > .tit.mode-pc-tablet ~ .form > .rc-group .rc-box[class*="type-box"] {margin-bottom: 4px;}

	.dl-formbox:has(+ .search-cell.type-mix):has( > .tit.mode-pc-tablet),
	.page-search .search-cell.dl-formbox:has(+ .search-cell.type-mix):has( > .tit.mode-pc-tablet) {padding-right: 0;}

	.cont-form .desc-inbox {flex-wrap: wrap;}
	.cont-form .group-box:not(.form-input) {flex-wrap: wrap;}

	.cont-form .desc-box.flex-col .desc-inbox:not(:has( [class*="form-"]:not(div, p, span), .inForm-box, .group-box, .rc-group)) {--minH: unset;}

	.tablestyle-list .list-item .listItem-body {flex-direction: column;}
	.item-previewType .cont-info .desc-box.style1 .desc-inbox {align-items: flex-start;}

	.rcSec-row .rcSec-cell.dl-formbox > .form .inner-group:has( > [class*="form-"] + .form-text) {flex-wrap: wrap;}
	.rcSec-row .rcSec-cell.dl-formbox > .form .inner-group:has( > [class*="form-"] + .form-text) > [class*="form-"] {flex: unset;}
	.rcSec-row .rcSec-cell.dl-formbox > .form .inner-group:has( > [class*="form-"] + .form-text) > [class*="form-"]:not(.form-text, div, p, span) {width: 100px;}

	.form-wsize1 .rc-box[class*="type-box"],
	.form-wsize1 .form-select,
	.form-wsize1 .form-input {}
	.page-search .form-wsize1 .rc-box[class*="type-box"],
	.page-search .form-wsize1 .form-select,
	.page-search .form-wsize1 .form-input {width: calc(50% - 10px); min-width: unset;}
	.page-search .form-wsize1 > .inner-form:has( > *:nth-child(2)) {width: 100%;}

	.dl-formbox .form:has( > .dragDrap-box),
	.rcSec-row,
	.rcSec-row .rcSec-cell.dl-formbox > .form:has( > .inner-group + .inner-group) {flex-direction: column; align-items: flex-start;}

	.dl-formbox .form:has( > .dragDrap-box) > .form-textarea {width: 100%;}

	.rcSec-row[class*="box-style"], .rowCell-section[class*="box-style"] {padding: 15px;}
	.dl-formbox .form.form-style1 {padding: 15px;}

	.page-body > .page-search {padding: 15px;}

	.dl-formbox > .form .inner-form, .dl-formbox > .form .inner-group, [class*="accItem-form"] > .inner-group {flex-wrap: wrap;}

	.acc-area.type-style1.file-list > .acc-list.file-item,
	.acc-area.type-style1.file-list,
	.page-body > .acc-area.type-style1:has( .acc-item.imgFile-item) {padding-left: var(--pdLR); padding-right: var(--pdLR); padding-left: 10px; padding-right: 10px;}

	.boxBg-area .item {padding: calc(var(--pdLR) * .7);}
	.boxBg-area .item-txt.txt,
	.boxBg-area .item-txt.cnt {font-size: var(--fs-h5); line-height: var(--lh-h5); min-height: calc(var(--lh-h5) + 2px);}

	/*form-selectDIV open 공통*/
	.form-selectDiv.open, [class*="miniPop-wrap"].open {z-index: 10;}
	.selectDiv-close,
	[data-mini-id].open::before,
	.form-selectDiv.open::before {display: block; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(4, 4, 4, 0.30); z-index: 1;}
	[data-mini-id].open::before,
	.form-selectDiv.open:not(:has( .selectDiv-close))::before {content: ''; }
	.form-selectDiv.open .selectDiv-list {border-radius: 30px 30px 0 0; position: fixed; top: auto; bottom: 0; left: 0; right: 0; width: auto; z-index: 5; padding: 20px; min-width: 100vw;}
	.form-selectDiv.open .selectDiv-list:has( > .scroll-y) {display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start;}
	.form-selectDiv.open .selectDiv-list .selectDiv-btn {padding-left: 10px; padding-right: 10px; position: relative;}
	.form-selectDiv.open .selectDiv-list .selectDiv-btn.selected {padding-right: 40px; background-color: #f5f5f5;}
	.form-selectDiv.open .selectDiv-list .selectDiv-btn.selected::after {content: ''; display: block;  background-size: 47% auto; position: absolute; right: 10px; top: 50%; margin-top: -11px;}
	.form-selectDiv.open .selectDiv-list .ico + .txt{ margin-left: 10px;}
	.form-selectDiv.open .selectDiv-list > .scroll-y {max-height: calc(100vh - 100px);}
	.form-selectDiv.open .selectDiv-list.type-style1 > .scroll-y{min-height: 30vh; }
	.form-selectDiv.open .selectDiv-list:has( > .scroll-y) > .scroll-y {flex: 1;}

	/*miniPop*/
	[class*="miniPop-wrap"][data-tab-id].open,
	[class*="miniPop-wrap"].moPopStyle {display: flex; align-items: flex-start; flex-direction: column; justify-content: flex-end;
		position: fixed; top: 100%; left: 0; right: 0; bottom: 0;
	}
	.filter-area .filter-main + .filter-sub[class*="miniPop-wrap"].moPopStyle {left: calc(-1 * (var(--pdLR) - 5px)); right: calc(-1 * (var(--pdLR) - 5px));}

	/*
	기본 탭
	[data-tab-group][data-open="pop"] : .miniPop
		[data-tab-id][class*="miniPop-wrap"].open

	버튼 > div show/hide > 탭
	[data-showhide-id][class*="miniPop-wrap"].moPopStyle.open
		[data-tab-group].miniPop
			[data-tab-id][class*="miniPop-wrap"] : open
	*/

	.miniPop-wrap.open > .miniPop,
	[class*="miniPop-wrap-"]:not(.miniPop-wrap-mo).open > .miniPop,
	[class*="miniPop-wrap"].moPopStyle > .miniPop {--myR: 30px; background-color: #fff; border-radius: var(--myR) var(--myR) 0 0; z-index: 5; padding: var(--pdLR); max-height: unset; width: 100%;}
	[class*="miniPop-wrap"].moPopStyle > .miniPop-close {display: flex; align-items: stretch; justify-content: space-between; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(4, 4, 4, 0.30); transition: top .2s;}
	[class*="miniPop-wrap"].moPopStyle > .miniPop-close .ico {opacity: 0;}

	[class*="miniPop-wrap"].moPopStyle.open {top: 0;}

	/*data-mini-xxx*/
	[data-mini-id] {box-shadow: none; background-color: transparent;}
	[data-mini-id].open {position: fixed; left: 0; top: auto; right: 0; bottom: 0; max-height: calc(100vh - (var(--pdLR) * 2));}
	[data-mini-id].open .miniPop {z-index: 1; position: relative; height: 100%; max-height: unset;}
	[data-mini-id][data-mini-pos] {max-height: unset; height: auto; width: auto !important; max-width: unset !important;}
	[data-mini-id][data-mini-pos].open::before {position: absolute; top: -10px;}
	[data-mini-id][data-mini-pos].open .miniPop	{height: calc(100% - 10px); max-height: unset; margin-top: 10px; border-radius: var(--myR) var(--myR) 0 0;}
	[data-mini-id].util-box, .util-box.form-selectDiv.open .selectDiv-list {min-width: unset;}

	.miniPop-wrap.open > .miniPop > ul,
	.miniPop-wrap.open > .miniPop > div,
	[class*="miniPop-wrap-"]:not(.miniPop-wrap-mo).open > .miniPop > ul,
	[class*="miniPop-wrap-"]:not(.miniPop-wrap-mo).open > .miniPop > div,
	[data-mini-id].util-box .inner-size1, .util-box.form-selectDiv.open .selectDiv-list .inner-size1 {max-width: unset;}

	[data-mini-id][data-mini-pos] > .miniPop > div {min-height: 100%;}


	.miniPop .fg-item-group {max-width: 100%; padding: var(--pdLR) 0;}
	.miniPop-wrap.open > .miniPop:has( .fg-item-group.flex-col .fg-item.type-foot),
	[class*="miniPop-wrap-"]:not(.miniPop-wrap-mo).open > .miniPop:has( .fg-item-group.flex-col .fg-item.type-foot) {padding-bottom: 64px; position: relative;}
	.miniPop .fg-item-group.flex-col .fg-item.type-foot {position: fixed; bottom: var(--pdLR); left: var(--pdLR); right: var(--pdLR); width: auto; background-color: #fff; margin-bottom: 0; padding-top: 10px; margin-top: 10px;}

	[class*="miniPop-wrap"].filter-sub.moPopStyle.open > .miniPop {border-radius: var(--myR) var(--myR) 0 0;}

	.miniPop > .miniPop-close + .tab-head {padding-right: 20px;}

	.filter-area .filter-main + .filter-sub[class*="miniPop-wrap"] {margin-top: 0;}
	.filter-area .filter-main + .filter-sub {background-color: transparent; padding-top: 0; padding-bottom: 0;}

	.tab-head:has( [class*="tabtype"] + .etc-flex) [class*="tabtype"] {max-width: 100%; width: 100%; padding: 0; /*padding: 0 calc(var(--myW) / 2);*/}


	/*data-tab : miniPop 기본*/
	/*data-showHide-id */
	.miniPop-wrap.moPopStyle {background-color: transparent;}

	/*data-showHide-id > data-tab ([data-showhide-id].open) */
	[data-showhide-id].open [class*="miniPop-wrap-"]:not(.miniPop-wrap-mo):not(.moPopStyle) {position: unset; box-shadow: none; border-radius: unset; width: 100%;}
	[data-showhide-id].open [class*="miniPop-wrap-"]:not(.miniPop-wrap-mo):not(.moPopStyle) > .miniPop {width: 100%; padding: 0; overflow-x: hidden; overflow-y: auto; max-height: calc(70vh - var(--pdLR)) !important; border-radius: 0;}

	/*[data-showhide-id].open 안에 .tab-area*/
	[data-showhide-id].open > .tab-area.miniPop [class*="tabtype"] {/*flex-wrap: wrap;*/ overflow-x: auto; max-width: 100%;}
	[data-showhide-id].open > .tab-area.miniPop [class*="tabtype"] .btn-filter {box-shadow: none; padding: 5px; padding: 0 5px;}
	[data-showhide-id].open > .tab-area.miniPop [class*="tabtype"] .btn-filter .ico-arrow {display: none !important;}
	[data-showhide-id].open > .tab-area.miniPop [class*="tabtype"] .btn-filter .ico-filter::before {--svg-color: var(--filterColor-EC6608)}
	[data-showhide-id].open > .tab-area.miniPop [class*="tabtype"] .btn-filter.on {background-color: #fff !important;}
	[data-showhide-id].open > .tab-area.miniPop [class*="tabtype"] .btn-filter.on .txt {color: var(--HK_or);}


	/*hasScrollBox 발생될곳 스타일별 모음, 통일*/
	/*[data-showhide-id].open > .tab-area.miniPop:has( > [class*="tabtype"], > .tab-head) [class*="tabtype"] > li {white-space: nowrap;}
	[data-showhide-id].open > .tab-area.miniPop:has( > [class*="tabtype"], > .tab-head) {position: relative; --myW: 30px; --per: 50%; --myR: 30px;}
	[data-showhide-id].open > .tab-area.miniPop:has( > [class*="tabtype"], > .tab-head)::before,
	[data-showhide-id].open > .tab-area.miniPop:has( > [class*="tabtype"], > .tab-head)::after {content: ''; display: block; background: #fff;
    position: absolute; top: 20px; height: 40px; width: var(--myW); z-index: 1;}
	[data-showhide-id].open > .tab-area.miniPop:has( > [class*="tabtype"], > .tab-head)::before {left: 4px; background: linear-gradient(90deg, #FFF var(--per), rgba(255, 255, 255, 0) 100%)}
	[data-showhide-id].open > .tab-area.miniPop:has( > [class*="tabtype"], > .tab-head)::after {right: 4px; background: linear-gradient(270deg, #FFF var(--per), rgba(255, 255, 255, 0) 100%);}
	*/
	/*div:has( > [class*="tabtype"].hasScrollBox-x) {position: relative; --myW: 30px; --per: 50%; --myR: 30px;}
	div:has( > [class*="tabtype"].hasScrollBox-x)::before,
	div:has( > [class*="tabtype"].hasScrollBox-x)::after {content: ''; display: block; background: #fff;
    position: absolute; top: 0; height: 40px; width: var(--myW); z-index: 1;}
	div:has( > [class*="tabtype"].hasScrollBox-x)::before {left: calc(-1 * (var(--myW) / 2)); background: linear-gradient(90deg, #FFF var(--per), rgba(255, 255, 255, 0) 100%)}
	div:has( > [class*="tabtype"].hasScrollBox-x)::after {right: calc(-1 * (var(--myW) / 2)); background: linear-gradient(270deg, #FFF var(--per), rgba(255, 255, 255, 0) 100%);}
	[class*="tabtype"].hasScrollBox-x {padding-left: calc(var(--myW) / 2) !important; padding-right: calc(var(--myW) / 2) !important;}*/

	/*.tab-area.miniPop[data-tab-group] [class*="miniPop-wrap"].open::before {content: ''; display: flex;
        align-items: stretch; justify-content: space-between; position: fixed; top: 100%; left: 0; right: 0; bottom: 0; background-color: rgba(4, 4, 4, 0.30); transition: top .2s;}
	.tab-area.miniPop[data-tab-group] [class*="miniPop-wrap"].open::before {top: 0;}
	[data-showhide-id].open .tab-area.miniPop[data-tab-group] [class*="miniPop-wrap"].open::before {content: none !important;}*/

	[class*="miniPop-wrap"].moPopStyle:has( > .miniPop-close) {background-color: transparent;}


	.tab-head {row-gap: 6px;}
	.tab-head.has-pos-type1 {width: 100%; padding-right: 0;}
	.tab-head .etc-flex {max-width: 100%;}
	.miniPop .tab-head .etc-flex {max-width: unset; /*width: calc(100% - var(--myW)); margin-left: calc(var(--myW) / 2); margin-right: calc(var(--myW) / 2);*/ width: 100%; flex: unset;}
	div:has( > [class*="tabtype"].hasScrollBox-x) > .hasScrollBox-x ~ * {z-index: 3;}


	[class*="miniPop-wrap"] [class*="rcbox-list"] .rc-box {padding-left: 0; padding-right: 0; border-bottom: 1px solid var(--Form_border2);}
	/*[class*="rcbox-list"] .rc-box .ico-check {right: 0;}*/

	[class*="link-type"] {flex-wrap: wrap; gap: calc(var(--gab) * 1);}
	/*[class*="link-type"] > .list .btn-ix.downtxt .txt {display: none;}*/

	[class*="link-type"] .over-box {--myBtnSize: 30px; --myIcoSize: 18px;}

	[class*="link-type"]:not(.flex-col):has( .btn-ix.downtxt),
	.page-top [class*="link-type"],
	.page-head [class*="link-type"] {gap: calc(var(--gab) * 4);}


	.filebox-area .dhx_vault .button-group {flex-wrap: wrap; justify-content: center; align-items: center;}

	.cont-top {min-height: 40px; margin-top: 12px; margin-bottom: 12px;}

	.title.type-dep1, .area-head .title, .page-title .title {font-size: var(--fs-h4); line-height: 22px; line-height: var(--lh-h4); }
	/*.page-title {margin-bottom: 5px;}*/
	.page-title.type-style1 {padding-bottom: 0; border-bottom: 0 none;}
	.page-head .page-title.type-style1 + .page-search,
	.page-head .page-title + .page-search {margin-top: 10px; border-top: 1px solid var(--Form_border);}
	.acc-area {margin-top: 10px;}

	.page-head:has(.page-title.mode-pc-tablet) + .page-search,
	.page-head.mode-pc-tablet + .page-search {border-top: 1px solid var(--Form_border); margin-top: 0;}

	/*좌우 여백 :: --pdLR*/
	/*margin*/
	/*.page-body > .acc-area,
	.page-body > .page-search {margin-left: var(--pdLR-modeM) !important; margin-right: var(--pdLR-modeM) !important; width: calc(100% - (var(--pdLR-modeM) * 2)) !important;
		left: var(--pdLR) !important; margin-right: var(--pdLR) !important; width: calc(100% - (var(--pdLR) * 2)) !important;
	}*/

	/*padding*/
	/*.typeList-block,
	.page-head, .page-tab,
	.page-body > .cont-top,
	.page-body > .cont-foot,
	.page-body > .cont-body,
	.page-body > .cont-area > .cont-top,
	.page-body > .cont-area > .cont-body,
	.page-body > .cont-area > .cont-foot,
	.page-body > .cont-paging,
	.page-body > .filebox-area,
	.page-body.type-hasLnb .area-body,
	.page-body.type-hasLnb .area-location {padding-left: var(--pdLR-modeM); padding-right: var(--pdLR-modeM); padding-left: var(--pdLR); padding-right: var(--pdLR);}*/

	.page-body > .cont-top,
	.page-body > .cont-body {width: 100%;}
	.page-body > .cont-foot > div {flex-direction: column;}
	.page-body > .cont-foot .btn-ix {width: 100%;}

	/*.page-body > .cont-body.tablestyle-listbox {padding-left: 0; padding-right: 0;}*/

	.typeList-area {padding-top: var(--pdLR); padding-bottom: var(--pdLR);}
	.typeList-block {gap: 16px;}

	/*region*/
	/*.area-location, .area-content .area-body {padding-left: var(--pdLR); padding-right: var(--pdLR);}
	.area-location::after {left: var(--pdLR); right: var(--pdLR);}*/

	/*게시판유형 ul, table / .content-section > .page-tab*/
	.page-body:has( .cont-list.tablestyle-list, .cont-list.table-listbox):not(.type-hasLnb) {padding-left: 0; padding-right: 0;}
	.page-body:has( .cont-list.tablestyle-list, .cont-list.table-listbox):not(.type-hasLnb) > .cont-area.flex-col > .cont-top > div:first-child,
	.page-body:has( .cont-list.tablestyle-list, .cont-list.table-listbox):not(.type-hasLnb) > .cont-top > div:first-child {padding-left: var(--pdLR);}
	.page-body:has( .cont-list.tablestyle-list, .cont-list.table-listbox):not(.type-hasLnb) > .cont-area.flex-col > .cont-top > div:last-child,
	.page-body:has( .cont-list.tablestyle-list, .cont-list.table-listbox):not(.type-hasLnb) > .cont-top > div:last-child {padding-right: var(--pdLR);}
	.page-body:has( .cont-list.tablestyle-list, .cont-list.table-listbox):not(.type-hasLnb) > .cont-area.flex-col > .cont-top,
	.page-body:has( .cont-list.tablestyle-list, .cont-list.table-listbox):not(.type-hasLnb) > .cont-top {flex-direction: row; flex-wrap: wrap;}
	.page-body:has( .cont-list.tablestyle-list, .cont-list.table-listbox):not(.type-hasLnb) > .cont-area.flex-col > .cont-top > .left,
	.page-body:has( .cont-list.tablestyle-list, .cont-list.table-listbox):not(.type-hasLnb) > .cont-area.flex-col > .cont-top > .right,
	.page-body:has( .cont-list.tablestyle-list, .cont-list.table-listbox):not(.type-hasLnb) > .cont-top > .left,
	.page-body:has( .cont-list.tablestyle-list, .cont-list.table-listbox):not(.type-hasLnb) > .cont-top > .right {width: auto;}
	.content-section > .page-tab:has( .tabtype1)::after {left: 0; right: 0;}
	.content-section > .page-tab .tabtype1 {min-height: 34px;}

	.page-body:has( .cont-list.tablestyle-list, .cont-list.table-listbox):not(.type-hasLnb) .cont-list.table-listbox > table.list {margin-left: var(--pdLR); margin-right: var(--pdLR); width: calc(100% - (var(--pdLR) * 2));}

	/*FO-DB*/
	.boxBg-area.itemNth-2 > .item,
	.boxBg-area.itemNth-4 > .item {width: 100%;}

	.infotype-text, .infotype-text .inner-box, .infotype-dl, .infotype-dl .dl-inbox {flex-wrap: wrap;}


	.cont-top .left.flex-col > .mode-mo:has( .rc-box + .total-box) {flex-direction: row; align-items: center; justify-content: flex-start; flex-wrap: wrap; gap: 10px;}
	.cont-top:has( + .cont-body.type-list-table) .left.flex-col > .mode-mo:has( .rc-box) {margin-left: 11px;}
	.cont-top:has( + .cont-body.type-list-table) .left.flex-col > .mode-pc-tablet + .mode-mo:has( .rc-box) {margin-left: 0;}

	.cont-paging {margin-top: 10px; margin-bottom: 15px;}

	.page-tab {padding-right: 0;}
	.page-tab {margin-top: 5px;}
	.page-head + .page-tab {margin-top: 5px;}

	.page-tab {margin-left: 0; margin-right: 0;}

	.tabtype1 .tab {min-height: 100%; padding-top: 4px; padding-bottom: 4px; line-height: 26px;}

	/*.page-tab.type-lrW .rc-group, .page-tab.type-lrW [class*="tabtype"] {left: 0; right: 0;}
	.page-tab.type-lrW::before, .page-tab.type-lrW::after {content: none;}*/
	/*.page-tab.type-lrW .rc-group > .rc-box:first-child,
	.page-tab.type-lrW [class*="tabtype"] > *:first-child {margin-left: var(--pdLR);}
	.page-tab.type-lrW .rc-group > .rc-box:last-child,
	.page-tab.type-lrW [class*="tabtype"] > *:last-child {margin-right: var(--pdLR);}*/

	html:not(.webType) .tabtype1 .tab::after {content: none;}

	.filter-area {margin-left: calc(var(--pdLR) * -1); margin-right: calc(var(--pdLR) * -1); width: calc(100% + (var(--pdLR) * 2));}
	.filter-area .filter-scroll {padding-right: 0; margin-right: 0;}
	.filter-main {padding-left: calc(var(--pdLR)); padding-right: calc(var(--pdLR));}
	.filter-main:has( .btn-filter) {padding-left: calc(var(--pdLR) + 44px);}
	.filter-main .btn-filter {position: absolute; left: var(--pdLR); top: 10px; padding: 0; top: 2px; margin-bottom: 0; min-width: 32px;}
	.filter-main .btn-filter .ico-arrow,
	.filter-main .btn-filter .txt {display: none;}
	.filter-main .btn-filter .ico-filter {display: block;}
	.filter-area .filter-main:has( .tabtype1) .btn-filter {box-shadow: none; margin-top: 0; margin-bottom: 0;}
	.filter-area .filter-main:has( .tabtype1) {padding-top: 0; padding-bottom: 0; min-height: 42px; align-items: center;}
	.filter-main .tabtype1 .tab {min-height: 32px;}

	.accItem-form2,
	.dl-formbox > .tit, .dl-formbox > .form, .dl-formbox > .form > [class*="form-"] {flex-wrap: wrap;}

	.page-body > .page-search .search-cell,
	.accItem-head .accItemHead-inner > .left:has( > .accItem-label + .accItem-form2) {flex-direction: column; align-items: flex-start;}
	.page-body > .page-search .dl-formbox:not(.celltype-col *) > .label {min-height: unset;}

	.accItem-head:has(> .accItemHead-inner.box-style1) .accItemHead-inner {min-height: unset;}

	.accItem-btn[data-ref] {padding-right: 10px;}
	.rc-box.solo + .accItem-btn[data-ref] {padding-left: 64px;}
	.rc-box.solo + .accItem-btn[data-ref]::before {left: 20px;}

	/*여백 모음*/
	.accItem-body {padding: 12px;}
	.accItem-body.plugin-body > .accItemBody-inner {padding: 10px !important;}
	.accItem-head,
	.accItem-head:has(> .accItemHead-inner.box-style1) .accItemHead-inner.box-style1 {padding-left: 12px; padding-right: 12px; padding-left: 15px; padding-right: 15px;}

	.accItem-head:has(> .accItemHead-inner.box-style1) .accItemHead-inner.box-style1 {padding: 15px;}

	.page-search ~ .acc-area .accItem-head,
	.page-search ~ .acc-area .accItem-head:has(> .accItemHead-inner.box-style1) .accItemHead-inner.box-style1 {padding-left: var(--pdLR); padding-right: var(--pdLR);}

	.acc-area .form-box .box-inner-form, .accItem-form {flex-wrap: wrap;}
	.accItem-head .right > .imgThum-list[id*="swiper"] {max-width: unset; width: 100%;}

	/*.form-box .box-inner-form,*/
	.accItem-head .accItem-form {max-width: unset; width: 100%;}
	.accItem-head .accItem-form .form-input {flex: 1 1 0;}
	.accItem-head .accItem-btn + .accItem-form {width: calc(100% - 56px);}

	.accItem-head .left .accItem-btn + .accItem-form.dl-formbox > .form > .inner-group:not(.rc-group) {flex-direction: column; align-items: flex-start; row-gap: 10px;}
	.accItem-head .left .accItem-btn + .accItem-form.dl-formbox > .form > .inner-group:not(.rc-group) > .flex1 {width: 100%;}

	.acc-item.imgFile-item {flex-direction: column; align-items: center; row-gap: 10px;}
	.acc-item.imgFile-item .item-file,
	.imgFile-item.fix-imgitem .item-img + .item-file {width: 100%; max-width: 100%;}

	.dl-formbox.flex-col .type-total {padding: 10px 0;}

	.page-search {border-radius: 0;}
	.page-body > .page-search {border-radius: 10px;}

	.page-search.type-fullX {padding-left: var(--pdLR-modeM); padding-right: var(--pdLR-modeM); padding-left: var(--pdLR); padding-right: var(--pdLR);}

	.page-search.cont-search-style1 {padding: 12px 24px;}
	.page-search .search-tr.flex-row {flex-direction: column; justify-content: center; align-items: flex-start; gap: 12px;}
	.page-search .search-tr.flex-row > .search-row {width: 100%;}
	.page-search .search-tr.flex-row > .search-row > .search-cell {flex: 1 1 0;}
	.page-search .search-tr.flex-row > .search-row > .search-cell > .form:not(:has( + dd.btn)) {flex: 1 1 0;}
	.page-search .search-tr.flex-row > .search-row > .search-cell > .form:not(:has( + dd.btn)) > .form-input,
	.page-search .search-tr.flex-row > .search-row > .search-cell > .form:not(:has( + dd.btn)) > .form-select {flex: 1 1 0;}


	.link.file:has( .file-type.mode-mo) .file-name {max-width: calc(100% - 54px);}
	.link.file:has( .file-type.mode-mo):has( .file-cnt) .file-name {max-width: calc(100% - 92px);}


	.title.type-dep2 {font-size: var(--fs-h5); line-height: var(--lh-h5);  font-weight: var(--fw-sb);}


	.cont-body.type-list-table:not(.mode-all-scroll) {border-top: 1px solid #333; border-bottom: 1px solid #333;
	flex: unset; min-height: unset;}
	/*.cont-body.type-list-table:has( .table tbody tr > [data-label]) {border-bottom: 1px solid #333;}*/
	.cont-body.type-list-table:not(.mode-all-scroll):has( > .cont-list.table-listbox) {border-bottom-color: var(--Form_border2);}


	.type-list-table:not(.mode-all-scroll):has( .table-listbox[style*="min-width"]) .table-listbox[style*="min-width"] {min-width: unset !important; width: 100%;}

	/*table*/
	.table th, .table td {padding: 1px 3px;}
	.table th:not( .title), .table td:not( .title) {font-size: var(--fs-caption); line-height: var(--lh-caption);}
	.table .mode-mo-fs1 {font-size: 11px; line-height: 15px;}
	.table th .title, .table td .title {font-size: var(--fs-body); line-height: 18px; font-weight: var(--fw-sb);}

	.table .link:not(.file) {text-decoration: underline;}
	.table .link.type-udLine {text-decoration: none;}

	.table.view th, .table.view td, .table.list th, .table.list td {height: auto;}

	/*table list*/
	/*data-label*/
	.table.list colgroup,
	.table:has( tbody tr > [data-label]) colgroup {display: none;}
	.table.list thead,
	.table:has( tbody tr > [data-label]) thead {display: none;}

	.table.list tr,
	.table:has( tbody tr > [data-label]) tr {width: 100%; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: 12px; row-gap: 6px;}
	.table.list tr [data-label],
	.table:has( tbody tr > [data-label]) tr td,
	.table:has( tbody tr > [data-label]) tr [data-label] {width: 100%; height: auto; display: flex; flex-direction: row; align-items: center; justify-content: flex-start !important; flex-wrap: wrap; /*padding: 0;*/ padding: 2px 0; column-gap: 12px; row-gap: 0; text-align: left !important;}
	.table.list tr [data-label]::before,
	.table:has( tbody tr > [data-label]) tr [data-label]::before {content: attr(data-label); display: inline-block; vertical-align: middle; font-weight: var(--fw-sb);}

	.table.list tr [data-label]:has( > .group-box.flex-col) {align-items: flex-start;}

	.table.list tr [data-type="img"] {flex-direction: column !important; justify-content: flex-start !important; align-items: flex-start !important;}
	.table.list tr [data-type="img"] img {width: auto; height: auto; max-width: 100%; max-height: 100px;}

	.table:has( tbody tr > [data-label]) tr td > .flex-col {flex-direction: row; gap: 5px; flex-wrap: wrap;}

	.table.list tr [data-label] ~ *:has( .title) {padding: 5px 0;}
	.table.list td:has( .ellipsis1) {max-width: 100%;}

	.table tbody {}
	.cont-body:not(.flex-auto) .table tbody {display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; padding: 13px 0; width: 100%;}

	/*data-pos and data-type*/
	.table:has( tbody tr > [data-pos]) tr {width: 100%; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; border-bottom: 1px solid var(--Form_border2); position: relative; padding: 8px 0;}
	.table:has( tbody tr > [data-pos]) tr:last-child {border-bottom: 0 none;}
	.table:has( tbody tr > [data-pos]) tr > * {display: flex; justify-content: flex-start; align-items: center; width: 100%; height: unset;}
	.table:has( tbody tr > [data-pos]) tr > *.ta-c {justify-content: center;}
	.table:has( tbody tr > [data-pos]) tr > *.ta-r {justify-content: right;}
	.table:has( tbody tr > [data-pos]) [data-pos] {position: absolute; width: auto; height: auto; top: 0; bottom: 0;}
	.table:has( tbody tr > [data-pos]) [data-pos="top"] {top: 5px; bottom: auto; width: 100%;}
	.table:has( tbody tr > [data-pos]) [data-pos="bottom"] {top: auto; bottom: 5px; width: 100%;}
	.table:has( tbody tr > [data-pos]) [data-pos="left"] {left: 0;}
	.table:has( tbody tr > [data-pos]) [data-pos="right"] {right: 0;}
	.table:has( tbody tr > [data-pos]) [data-type="rcbox"],
	.table:has( tbody tr > [data-pos]) [data-type="btn"] {width: 34px; padding: 0;}
	.table:has( tbody tr > [data-pos]) [data-type^="btn"] {display: flex; align-items: center; justify-content: center; gap: 5px;}
	.table:has( tbody tr > [data-pos]) tr:has( [data-pos="top"]) {padding-top: 34px;}
	.table:has( tbody tr > [data-pos]) tr:has( [data-pos="bottom"]) {padding-bottom: 34px;}
	.table:has( tbody tr > [data-pos]) tr:has( [data-pos="left"][data-type="rcbox"]) {padding-left: 34px;}
	.table:has( tbody tr > [data-pos]) tr:has( [data-pos="right"][data-type="btn"]) {padding-right: 34px;}
	.table:has( tbody tr > [data-pos]) tr:has( [data-pos="right"][data-type="btn2"]) {padding-right: calc((34px * 2) + (5px * 2));}
	.table:has( tbody tr > [data-pos]) tr:has( [data-pos="right"][data-type="btn3"]) {padding-right: calc((34px * 3) + (5px * 3));}

	.table:has( tbody tr > [data-pos]) th[data-type^="btn"] .btn-ix,
	.table:has( tbody tr > [data-pos]) td[data-type^="btn"] .btn-ix {margin: 0; min-width: 34px; min-height: 34px;}

	.table.list tr > *,
	.table.list tr:first-child > * {border-top: 0 none; border-bottom: 0 none;}
	.table.list thead + tbody tr:first-child > * {border-top: 0 none;}

	.table.list tr + tr {border-top: 1px solid var(--Form_border2);}

	/*테이블형 리스트에서 버튼 삭제*/
	.table.list tr [data-type^="btn"]:not([data-pos]) {display: none !important;}

	/*테이블형 리스트에서 bar타입*/
	.table:has( tbody tr > [data-bar]):has( tbody tr > [data-pos]) tr > *:not([data-pos="top"],[data-pos="bottom"]) {width: auto; min-width: max-content;}

	.table:has( tbody tr > [data-bar]) tr {flex-direction: row; justify-content: flex-start; align-items: center; flex-wrap: wrap;}
	.table:has( tbody tr > [data-bar]) tr > [data-bar="yes"],
	.table:has( tbody tr > [data-bar]) tr > [data-bar="yes"] ~ *:not([data-bar="no"]) {position: relative; padding-right: 8px;}
	.table:has( tbody tr > [data-bar]) tr > [data-bar="yes"]:after,
	.table:has( tbody tr > [data-bar]) tr >[data-bar="yes"] ~ *:not([data-bar="no"])::after {content: '|'; display: block; color: inherit; position: absolute; right: 0; top: 50%; transform: translateY(-50%);}

	.table:has( tbody tr > [data-bar]) tr > [data-bar="yes"].bar-style1,
	.table:has( tbody tr > [data-bar]) tr >[data-bar="yes"].bar-style1 ~ *:not([data-bar="no"]) {padding-right: 8px;}
	.table:has( tbody tr > [data-bar]) tr >[data-bar="yes"].bar-style1 ~ *:not([data-bar="no"]) {padding-left: 3px;}
	.table:has( tbody tr > [data-bar]) tr > [data-bar="yes"].bar-style1:after,
	.table:has( tbody tr > [data-bar]) tr >[data-bar="yes"].bar-style1 ~ *:not([data-bar="no"])::after {content: '/'; font-size: inherit;}
	.table .mode-mo-fs1.bar-style1::after {font-size: 10px !important;}

	.table:has( tbody tr > [data-bar]) tr >[data-bar="yes"] ~ *:has( + [data-bar="no"] + .break)::after,
	.table:has( tbody tr > [data-bar]) tr >[data-bar="yes"] ~ *:last-child::after,
	.table:has( tbody tr > [data-bar]) tr >[data-bar="yes"] ~ *:has(+ .break)::after,
	.table:has( tbody tr > [data-bar]) tr >[data-bar="yes"] ~ *:has(+ [data-bar="yes"])::after {content: none !important;}

	/*줄바꿈용 break 전후 리셋*/
	.table tr > *.mode-mo.break {width: 100% !important; height: 1px !important; padding: 0 !important;}
	/*.table tr > *.mode-mo.break ~ *:not(:first-child),
	.table tr > * + *.mode-mo.break {margin-top: -6px;}*/

	.table .inner-style1 [class*="statetype-"] {height: auto;}


	/*.tablestyle-list .list-item [class*="-box"],*/
	.tablestyle-list .list-item .cont-box,
	.tablestyle-list .list-item .etc-box,
	.tablestyle-list .qna-item [class*="qna-"][class*="-box"] {padding-top: 0; padding-bottom: 0;}
	.tablestyle-list .qna-item > .qnaItem-head,
	.tablestyle-list .qna-item > .qnaItem-body {padding-left: 50px; padding-right: 20px; row-gap: 6px;}
	.tablestyle-list .list-item > .listItem-head,
	.tablestyle-list .list-item > .listItem-head {row-gap: 6px;}
	.tablestyle-list .qna-item > .qnaItem-head::before,
	.tablestyle-list .qna-item > .qnaItem-body::before {width: 30px; left: 20px;}
	.tablestyle-list .qna-item > .qnaItem-head {flex-direction: column; align-items: flex-start; padding-top: 12px; padding-bottom: 12px;}
	.tablestyle-list .qna-item .qnaItem-head [class*="qna-"][class*="-box"] { row-gap: 6px;}
	.tablestyle-list .list-item .listItem-head .listItem-btn.mode-mo-full,
	.tablestyle-list .qna-item .qnaItem-head .qnaItem-btn.mode-mo-full {position: absolute; top: 0; right: 0; bottom: 0; left: 0;}
	.tablestyle-list .list-item .listItem-head .listItem-btn.mode-mo-full::before,
	.tablestyle-list .qna-item .qnaItem-head .qnaItem-btn.mode-mo-full::before {content: none;}
	.tablestyle-list .qna-item .qnaItem-body .qna-inner-btn {padding-top: 4px;}

	.tablestyle-list .list-item .listItem-body .etc-box {flex-direction: column; gap: 16px; padding-top: 0; padding-bottom: 0; padding-top: 8px; padding-bottom: 16px;}
	.tablestyle-list .list-item .listItem-body .etc-box .left,
	.tablestyle-list .list-item .listItem-body .etc-box .right {width: 100%;}
	.tablestyle-list .list-item .listItem-body .etc-box .mode-mo-left {justify-content: flex-start;}
	.tablestyle-list .list-item .listItem-body .etc-box .mode-mo-center {justify-content: center;}
	.tablestyle-list .list-item .listItem-body .etc-box .mode-mo-right {justify-content: flex-end;}

	.tablestyle-list .list-item > .listItem-head {}
	.tablestyle-list .list-item > .listItem-body { padding-bottom: 24px;}
	.tablestyle-list .list-item > .listItem-body:not(.item-previewType) {background-color: #f5f5f5;}
	.tablestyle-list .list-item .listItem-body .cont-box + .etc-box {border-top: 0 none;}

	/*table view*/
	.table.view tbody {}
	.table.view, .table.view tr {}
	.table.view tr {}
	.table.view th, .table.view td { }
	.table.view th {font-weight: var(--fw-sb);}

	.cont-body:not(.flex-auto) .table.view tbody {gap: 13px; padding: 0;}
	.cont-body:not(.flex-auto) .table.view,
	.cont-body:not(.flex-auto) .table.view tr {border: 0 none; display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch;  width: 100%;}
	.cont-body:not(.flex-auto) .table.view th,
	.cont-body:not(.flex-auto) .table.view td {border: 0 none; height: auto; background-color: transparent; padding: 3px 0;}

	.cont-top .left, .cont-top .center, .cont-top .right {column-gap: 12px; row-gap: 6px;}
	.cont-top.type-lineT:has( + .cont-body) {border-top: 0 none; margin-top: 0; padding-top: 10px; padding-bottom: 10px;}
	.cont-top.type-lineT:has( + .cont-body) .title.type-dep2-style1 {font-size: var(--fs-h4);}
	.cont-top.type-lineT:has( + .cont-body) + .cont-body.type-view {margin-top: 10px;}

	.cont-top.type-lineB {border-bottom: 0 none; padding-top: 5px; padding-bottom: 5px;}

	/*table style2*/
	table.table2 > thead > tr > *::before {background-color: var(--HK_or);}
	.mode-all-scroll > .table-listbox > table.table2 > thead > tr > *::before {background-color: #333;}

	.type-list-table:has( .table-listbox[style*="min-width"]):not([class*="scroll"]) {min-height: max-content;}


	/*popup*/
	.popup {padding: 20px;}
	.popup-wrap:not(.windowtype):not(:has( .popup.type-alert2)) {align-items: flex-end;}
	.popup-wrap:not(.windowtype) .popup:not(.type-alert2) {width: 100%; border-radius: 30px 30px 0 0; max-width: unset; padding: var(--pdLR);}
	.popup-wrap:not(.windowtype) .popup.type-alert2 {}

	.popup:has( .type-list-table.mode-all-scroll ) {height: calc(100vh - 40px);}
	.popup:has( .type-list-table.mode-all-scroll ) .pop-cont {display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start;}

	.popup .form-box {gap: 8px;}
	.form-select, .form-textarea, .form-input, .inForm-box .search-box .inputbox {min-width: unset;}
	.form-select[style*="width"], .form-textarea[style*="width"], .form-input[style*="width"], .inForm-box .search-box .inputbox[style*="width"] {max-width: 100%; width: auto !important;}
	.form-select[style*="width"]:has( + .count-box),
	.form-textarea[style*="width"]:has( + .count-box),
	.form-input[style*="width"]:has( + .count-box),
	.inForm-box:has( .search-box .inputbox[style*="width"]):has( + .count-box) {width: calc(100% - 100px) !important;}

	.popup .form-group.flex-col > .form-box.center {flex-wrap: wrap;}


	/*#contents .content-section > .page-head > [class^="page-"]:not(.page-search, .page-tab.type-lrW) {padding-left: var(--pdLR-modeM); padding-right: var(--pdLR-modeM); padding-left: var(--pdLR); padding-right: var(--pdLR);}*/

	/*#contents .content-section > .page-head > [class^="page-"]:not(.page-search) {padding-left: var(--pdLR-modeM); padding-right: var(--pdLR-modeM);}*/

	.depsList-area .area-title {flex-wrap: wrap;}

	/*SE-03/04 popup*/
	.infotype-dl dt {font-size: var(--fs-body);}

	.detail-info {flex-direction: column; gap: 4px; width: 100%;}

	.detail-slider .detail-item {width: 100%; height: auto; aspect-ratio: .6 / .4;}
	/*.detail-slider .detail-item,
	.detail-slider .detail-item .item {height: auto;}*/
	.detail-slider .swiper-slide.detail-item .item {min-height: 100%; height: auto;}

	.detail-area, .mode-nthChange-box {gap: 20px;}

	.detail-area div:has( > .hasDel-list) {overflow-x: auto; overflow-y: hidden; width: 100%;}
	.detail-area div:has( > .hasDel-list) > .hasDel-list {flex-wrap: nowrap;}
	.detail-area div:has( > .hasDel-list) > .hasDel-list .text {white-space: nowrap;}
	.popup .detail-slider {max-height: unset;}

	/*.popup-wrap .popup[class*="type-detail"]:not([class*="-style1"]) {--myLR: 20px; padding: calc(var(--myLR));}*/
	/*.popup-wrap .popup[class*="type-detail"]:has( .pop-head .right) {height: calc(100vh - (var(--myLR) * 2)); padding-bottom: 75px;}*/
	/*.popup-wrap .popup[class*="type-detail"]:has( .pop-head .right) .pop-head .right {width: auto; height: calc(var(--myLR) * 2); position: absolute; bottom: var(--myLR); left: var(--myLR); right: var(--myLR);  z-index: 2; left: auto;}*/
	/*.popup-wrap .popup[class*="type-detail"]:has( .pop-head .right) .pop-head .right .btn-ix:has( .ico-download) {flex: 1;}
	.popup-wrap .popup[class*="type-detail"]:has( .pop-head .right) .pop-cont {padding-bottom: calc(var(--myLR) * 2);}
	.popup-wrap .popup[class*="type-detail"]:has( .pop-head .right) .pop-foot > div .btn-ix:has( .ico-close),
	.popup-wrap .popup[class*="type-detail"]:has( .pop-head .right) .pop-foot {position: fixed; top: 0; height: calc(var(--myLR) * 2); left: 0; width: auto; right: 0; padding: 0;}
	.popup-wrap .popup[class*="type-detail"]:has( .pop-head .right) .pop-foot > div {padding: 0;}
	.popup-wrap .popup[class*="type-detail"]:has( .pop-head .right) .pop-foot > div .btn-ix {background-color: transparent; border-color: transparent;}
	.popup-wrap .popup[class*="type-detail"]:has( .pop-head .right) .pop-foot > div .btn-ix .txt {opacity: 0; font-size: 0;}
	.popup-wrap .popup[class*="type-detail"]:has( .pop-head .right) .pop-foot > div .btn-ix .ico {display: none;}*/

	/*foot에 ico-close를 가진 .btn-ix가 딱 한개인 상황 : type-footOnlyClose*/
	.popup-wrap.type-footOnlyClose .pop-foot {padding: 0;}
	.popup-wrap.type-footOnlyClose .pop-foot > div .btn-ix {position: fixed; top: 0; height: calc(var(--myLR) * 2); left: 0; width: auto; right: 0; padding: 0;}
	.popup-wrap.type-footOnlyClose .pop-foot > div .btn-ix {background-color: transparent; border-color: transparent;}
	.popup-wrap.type-footOnlyClose .pop-foot > div .btn-ix .txt {opacity: 0; font-size: 0;}
	.popup-wrap.type-footOnlyClose .pop-foot > div .btn-ix .ico {display: none;}

	/*위상황 + pop-head right에 여러 버튼 있는 경우*/
	.popup-wrap.type-footOnlyClose.type-hasRight .popup {padding-bottom: calc(var(--popHeadRightH) + 20px) !important;}
	.popup-wrap.type-footOnlyClose.type-hasRight .popup .pop-head > .right {position: absolute; bottom: 10px; left: 0; right: 0; justify-content: center;}

	/*foot에 여러개 있으면 type-footOnlyClose 아님 / right 한개 있으면 .type-footOnlyClose.type-hasRight 둘다 안생김*/

	.dayPNSet-box {flex-direction: column;}
	.dayPNSet-box > div,
	.dayPNSet-box > .form-input:not(.datepicker),
	.dayPNSet-box > .form-select {width: 100%;}
	.dayPNSet-box [class^="dayPN-set"] .day {flex: 1; column-gap: 4px;}
	.dayPNSet-box [class^="dayPN-set"] .day .form-input {flex: 1; width: calc(50% - 15px);}
	[class^="dayPN-set"][class*="-formtype"] {gap: 5px;}
	[class^="dayPN-set"][class*="-formtype"] .btn-ix {width: 30px;}
	.dayPNSet-box .form-input.datepicker {background-position-x: calc(100% - 6px); padding-right: 30px;}

	.area-content .area-body {row-gap: calc(var(--gab) * 3);}
	.area-location {margin-bottom: 15px;}
	.area-content .area-body > .cont-area.flex-col {flex: unset;}

	.boxBg-area[class*="minH-"] > .item {min-height: unset;}

	.detail-img img, .detail-item video,
	.main-body .swiper-slide > img, .main-body .swiper-slide video {display: block; width: 100%; height: 100%; max-width: unset; object-fit: cover; aspect-ratio: .6 / .4;}

	/*다운로드 + pos 스크립트에서 제어
	.pos-type1 {left: var(--pdLR); right: var(--pdLR);  bottom: calc(var(--footerH) + 4px); width: auto;}
	.pos-type1 .btn-ix {width: 100%;}*/
	/*.pos-type1 {text-align: center; margin-bottom: 10px; width: 100%; padding-left: var(--pdLR); padding-right: var(--pdLR); left: 0; right: 0; bottom: 21px;}*/
	.pos-type1 {bottom: 30px; right: 50%;  transform: translateX(50%);}
	html:has( .filter-sub.open) .pos-type1 {z-index: 1;}
	html.no-scroll-state .pos-type1,
	html.is-scroll-bottom .pos-type1 {bottom: calc(var(--footerH) + 10px);}
	html.no-scroll-state .pos-type1,
	html.is-scroll-bottom .pos-type1,
	html.is-scroll-bottom:not(.is-scroll-top) .pos-type1 {margin-bottom: 14px;}


	/******* MAIN ******/
	.main-body .mainSlider-area {height: 214px;}
	.main-body .inner-box {padding-left: var(--pdLR); padding-right: var(--pdLR); row-gap: 18px;}
	.main-body .inner-box .title {font-size: var(--fs-h3); line-height: var(--lh-h3);}
	.main-body .inner-box .desc {font-size: 12px;}
	.main-body .swiper-button-next, .main-body .swiper-button-prev {display: none;}
	.main-body .swiper-pagination {bottom: 10px !important;}
	.mainItem-list {max-width: unset; width: 100%;}
	.mainItem-list:not(.type-preview) .mainItem {}
	.mainItem-list .btn-ix {padding: 10px;}
	.mainItem-list .mainItem .txt {width: 100%; font-size: 13px; line-height: 17px;}
	.mainItem-list .mainItem .btn-ix:hover .txt {font-size: 15px; line-height: 19px;}
	/*.mainItem-list .mainItem .txt {font-size: 13px; padding: 0px;}*/
}

/*480이하*/
@media (max-width: 480px) {
	.pdf-prev-btn, .pdf-next-btn {--mySize: 34px;}
	.pdf-prev-btn {left: 5px !important;}
	.pdf-next-btn {right: 5px!important;}

	.form-box.mix-formbox {flex-direction: column;}
	.form-box.mix-formbox > .mix-inner {flex-direction: column; align-items: flex-start; width: 100%;}
	.form-box.mix-formbox .mix-item,
	.form-box.mix-formbox .rc-group > .rc-box {margin-top: 5px; margin-bottom: 5px; flex-wrap: wrap; gap: 8px;}
	.form-box.mix-formbox > .mix-inner[class*="type-gab"] {gap: 8px !important}

	.img-temp-box .img-box.size1 {max-width: 100%; height: auto; padding: 10px;}

	.cont-form .rc-group {flex-wrap: wrap; row-gap: 14px;}
	.cont-form .rc-box .label {white-space: nowrap;}

	.form-box.formbox-type1 > .box-inner-form {flex-direction: column;}
	.form-box.formbox-type1 > .box-inner-form > .flex1 {flex: unset !important;}
	.form-box.formbox-type1 > .box-inner-form > .form-input,
	.form-box.formbox-type1 > .box-inner-form > .inner-box {width: 100%; flex-wrap: wrap;}

	/*popup*/
	.popup .pop-foot,
	.popup .pop-foot .left,
	.popup .pop-foot .right,
	.popup .pop-foot .center {flex-direction: column; row-gap: 20px; width: 100%;}
	.popup .pop-foot .left,
	.popup .pop-foot .right,
	.popup .pop-foot .btn-ix {width: 100%;}
	.popup .pop-foot .btn-ix .ico-close {display: none;}

	.popup .form-group.flex-col > .form-box.center > .form-text,
	.popup .form-group.flex-col > .form-box.center > .form-input,
	.popup .form-group.flex-col > .form-box.center > .form-select,
	.popup .form-group.flex-col > .form-box.center > .form-textarea {flex: 1 1 0%}

	.popup .desc-box.style1 {line-height: 1.2; gap: 8px;}

	/*.popup .pop-foot > div:first-child:last-child {flex: 1 1 0;}
	.popup .pop-foot .btn-ix {flex: 1 1 0;}*/

	/*SE-03-available sizes 기준, 다른곳 아닐시 기준 재정의 필요*/
	.popup:has( .type-list-table.mode-all-scroll ) {padding-left: 0; padding-right: 0; --LR: 24px;}
	.popup:has( .type-list-table.mode-all-scroll ) .pop-head,
	.popup:has( .type-list-table.mode-all-scroll ) .pop-foot {padding-left: var(--LR); padding-right: var(--LR);}
	.popup:has( .type-list-table.mode-all-scroll ) .pop-cont > div[class*="cont-"]:not(.page-search) {margin-left: var(--LR); width: calc(100% - var(--LR));}
	.popup:has( .type-list-table.mode-all-scroll ) .pop-cont .type-list-table.mode-all-scroll table.table2 {margin-right: 24px; width: calc(100% - var(--LR));}

	.page-search.cont-search-style1 {margin-bottom: 24px;}
	.page-search.cont-search-style1 + .cont-top {margin: 12px 0;}
	.title.title-bi img, .title.title-bi .title-img-bi {height: 15px;}

	.cont-area:not(.flex-col):has(> .cont-inner-area) {flex-direction: column;}
	.cont-area:not(.flex-col):has(> .cont-inner-area) > .cont-inner-area,
	.cont-area:not(.flex-col):has( > .cont-inner-area:nth-child(2):last-child) .cont-inner-area, .boxBg-area:has( > *:not(.flex-col) > .item:nth-child(2):last-child) .item {width: 100%;}
	.area-content .cont-area, .area-content .cont-inner-area {row-gap: calc(var(--gab) * 2);}

	/*listtype2 TP-02 767로 이동
	.pos-type1 {left: var(--pdLR); right: var(--pdLR);  bottom: calc(var(--footerH) + 4px); width: auto;}
	.pos-type1 .btn-ix {width: 100%;}*/

	.link-type2:not(.flex-col):not(.listH_JS) .txt-box .tit.ellipsis2 {--myLine: 2 !important}
	.link-type2.flex-col .txt-box .tit.ellipsis2 {--myLine: 4 !important}

	.imgFixH-110px[class*="link-type"] .img-box, .imgFixH-110px [class*="link-type"] .img-box {height: 44px;}
	.imgFixH-215px[class*="link-type"] .img-box, .imgFixH-215px [class*="link-type"] .img-box {height: 78px;}
	.imgFixH-250px[class*="link-type"] .img-box, .imgFixH-250px [class*="link-type"] .img-box {height: 82px;}
	.imgFixH-325px[class*="link-type"] .img-box, .imgFixH-325px [class*="link-type"] .img-box {height: 174px;}

	ul.listH_JS .img-box {min-height: 98px; /*max-height: 160px;*/}

	.link-type2:not(.listH_JS).flex-col {flex-direction: row;}
	.link-type2:not(.listH_JS).flex-col > .list {width: calc((100% - (var(--myGap) * 1)) / 2);}
	.link-type2:not(.listH_JS).flex-col > .list .link-full:not(.flex-col) {flex-direction: column;}
	.link-type2:not(.listH_JS).flex-col > .list .link-full:not(.flex-col) .txt-box.flex-col:has( > .flex-1) .tit {padding-bottom: 0;}
	.link-type2:not(.listH_JS).flex-col > .list .link-full:not(.flex-col) .txt-box.flex-col:has( > .flex-1) > .flex-1 {flex: unset;}
	.link-type2:not(.listH_JS).flex-col > .list .link-full:not(.flex-col) .txt-box.flex-col:has( > .flex-1) > .flex-1 [class*="ellipsis"]:not(.ellipsis1) {--myLine: 8 !important;}
	.link-type2:not(.listH_JS, [class*="listview-"]).flex-col > .list > .link-full:not(.flex-col) .img-box {width: 100%;}
	.link-type2:not(.listH_JS, [class*="listview-"]).flex-col > .list > .link-full:not(.flex-col) .img-box + .txt-box {--myGap: 0; row-gap: 0; width: 100%;}

	.form-box.type-wSame:not(.flex-col) {display: flex !important; flex-wrap: wrap;}
	.form-box.type-wSame:not(.flex-col) > .form-input,
	.form-box.type-wSame:not(.flex-col) > .form-select,
	.popup .form-box.type-wSame:not(.flex-col) > .form-input,
	.popup .form-box.type-wSame:not(.flex-col) > .form-select {flex: unset;}

	.grid-col-auto,
	.grid-col-auto:has( [class*="inner-type-search"]):has( .inner-type-sel) .flex-col {gap: 8px;}
	.grid-col-auto .cont-top {min-height: unset;}

	.cont-form .cont-info .desc-inbox,
	.item-previewType .cont-info .desc-box.style1 .desc-inbox {flex-direction: column; align-items: flex-start;}
	.cont-form .desc-box.flex-col .desc-inbox {--minH: unset; gap: 4px;}
	.cont-form .cont-info .desc-box,
	.item-previewType .cont-info .desc-box.style1.fs-style1 {row-gap: 15px;}


	.mainItem-list {align-items: stretch;}
	.mainItem-list .btn-ix {width: 100%; height: 100%; justify-content: center; flex-direction: column; align-items: center; justify-content: space-between;}
	.mainItem-list .mainItem .txt {white-space: normal; line-height: 1; padding: 0;}
	.mainItem-list .mainItem .img {display: flex; align-items: flex-end; justify-content: center;
	    right: 50%; margin-right: calc((var(--mySize) / 2) * -1);
	}
	.mainItem-list .mainItem .img img,
	.mainItem-list .mainItem .img .ico {width: 80%; height: 80%;}
	.mainItem-list .mainItem .img .ico {position: relative; right: auto;}
	.mainItem-list .mainItem .img .point {display: none;}


	body.lnbOpen {overflow: hidden;}
	body.lnbOpen #header {z-index: 1;}
	body .page-body.type-hasLnb .area-lnb,
	body.lnbOpen .page-body.type-hasLnb .area-lnb {position: fixed; bottom: 0; top: 0; left: 0; right: 0; width: auto; border: 0 none; padding: 0; margin: 0; display: flex; flex-direction: column; justify-content: space-between;  align-items: stretch; background-color: rgba(0, 0, 0, .4);}
	body .page-body.type-hasLnb .area-lnb {top: 100%;}
	body.lnbOpen .page-body.type-hasLnb .area-lnb {top: 0;}
	body.lnbOpen .page-body.type-hasLnb .area-lnb .lnb {z-index: 4; background-color: #fff; padding: var(--pdLR); border-radius: 15px 15px 0 0; position: unset; max-height: calc(100vh - (var(--pdLR) * 3)); overflow-x: hidden; overflow-y: auto;}
	body.lnbOpen .page-body.type-hasLnb .btn-lnb-close {z-index: 1; flex: 1 1 0; position: unset; display: flex; justify-content: flex-end; align-items: flex-end; padding: var(--pdLR);}
	body.lnbOpen .page-body.type-hasLnb .btn-lnb-close .ico {--myISize: 34px; background-color: #fff; border-radius: 50%;}
	body.lnbOpen .page-body.type-hasLnb .btn-lnb-close .ico::before {background-size: calc(var(--myISize) / 2) auto;}
}

/*420이하*/
@media (max-width: 420px) {
	/*.page-body.type-hasLnb .area-body, .page-body.type-hasLnb .area-location {padding-left: 0; padding-right: 0;}*/

	.imgFile-item.fix-imgitem .item-img {min-width: unset; max-width: 100%;}
}

@media (max-width: 390px) {
	.boxtype-listbox {padding: 10px;}
	.boxtype-listbox .boxtype-list {--itemH: 40px}
	.boxtype-item > .btn-ix {padding: 10px;}
	.ico[class*="ico-bi"] {max-width: 60%;}
	.ico[class*="ico-bi"]::before {background-size: contain;}
}

/*380이하*/
@media (max-width: 380px) {
	.dayPNSet-box [class^="dayPN-set"] .day {flex-wrap: wrap; gap: 4px;}
	.dayPNSet-box [class^="dayPN-set"] .day .form-input {flex: unset; width: 100%;}
	.dayPNSet-box [class^="dayPN-set"] .day .form-input + .form-text {display: none;}

	.mainItem-list .mainItem .txt { word-break: break-all;}

	.popup .detail-area .file-list > .file-item {padding: 10px;}
	.popup .detail-area .file-list > .file-item .file-box {width: 100%; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start;}
	.popup .detail-area .file-list > .file-item .file-box .file-nt {max-width: unset; padding-right: 0; width: 100%; margin-right: 0;}
	.popup .detail-area .file-list > .file-item .file-nt + .file-size {top: 0; right: 0; transform: none;}

	[class*="link-type"]:not(.flex-col):has( .btn-ix.downtxt) {width: 100%;}
	[class*="link-type"]:not(.flex-col):has( .btn-ix.downtxt) .btn-ix,
	[class*="link-type"]:not(.flex-col):has( .btn-ix.downtxt) .btn-ix[class*="size-"] {max-width: var(--mySize); width: 100%;}
	[class*="link-type"]:not(.flex-col):has( .btn-ix.downtxt) .btn-ix .ico,
	[class*="link-type"]:not(.flex-col):has( .btn-ix.downtxt) .btn-ix[class*="size-"] .ico {        max-width: calc(var(--mySize) * .8335); width: 100%;}
	#contents .content-section > .page-head > [class^="page-top"] {padding-left: 0 !important; padding-right: 0 !important;}

	.page-search .form-wsize1 {justify-content: center;}
	.page-search .form-wsize1 .rc-box[class*="type-box"],
	.page-search .form-wsize1 .form-select,
	.page-search .form-wsize1 .form-input {width: 100%;}
}

/*360이하*/
@media (max-width: 360px) {
	.page-search .search-tr.flex-row > .search-row {flex-direction: column;}
	.page-search .search-tr.flex-row > .search-row > .search-cell {width: 100%;}

	.popup .desc-inbox {flex-direction: column;}
	.popup .desc-box.style1 .descBox-tit:has( + dd, .descBox-txt)::after {content: none;}

	.popup .group-box {flex-wrap: wrap;}
	.popup .group-box.type-gab15 {gap: 8px !important;}
	.popup .group-box:has( > .btn-box) {justify-content: space-around;}

	.cont-body.flex-auto .table tbody {display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; padding: 0; width: 100%;}
	.cont-body.flex-auto tbody {gap: 8px; padding: 0;}
	.cont-body.flex-auto .table.view,
	.cont-body.flex-auto .table.view tr {border: 0 none; display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch;  width: 100%;}
	.cont-body.flex-auto .table.view th,
	.cont-body.flex-auto .table.view td {border: 0 none; height: auto; background-color: transparent; padding: 3px 0;}
	.flex-auto:has( > div.table-view) .table.view th,
	.flex-auto:has( > div.table-view) .table.view td {padding: 6px 2px;}
	.cont-body.flex-auto.type-gab20 {row-gap: 0 !important;}
	.cont-body.flex-auto.type-gab20 > div + div {border-top: 1px solid var(--Form_border); margin-top: 10px; padding-top: 10px;}
}

@media (max-width: 320px) {
	.pos-type1 .btn-ix {width: 100%;}

	.dl-formbox > .label, .dl-formbox > .tit {min-width: unset;}
}

/*320이하*/
@media (max-width: 319px) {
	.cont-top .left, .cont-top .center, .cont-top .right {column-gap: 8px; row-gap: 4px;}

	.table:has( tbody tr > [data-pos]) tr:has( [data-pos="left"][data-type="rcbox"]) {padding-left: 0;}
	.table:has( tbody tr > [data-pos]) [data-pos="left"][data-type="rcbox"] {bottom: auto; top: 8px; top: 10px;}
	.table:has( tbody tr > [data-pos]) [data-pos="left"][data-type="rcbox"]:has( + * .link),
	.table:has( tbody tr > [data-pos]) [data-pos="left"][data-type="rcbox"]:has( + * .title) {top: 13px;}
	.table:has( tbody tr > [data-pos]) [data-pos="left"][data-type="rcbox"] + *,
	.table:has( tbody tr > [data-pos]) [data-pos="left"][data-type="rcbox"] + .mode-pc-tablet + * {padding-left: 36px; min-height: 22px;}

	.table.list tr:has( [data-pos="left"]):has( [data-pos="right"]) {padding-left: 0; padding-right: 0;}
	.table.list tr:has( [data-pos="left"]):has( [data-pos="right"]):has( [data-type^="btn"]) {padding-top: 44px;}

	.table.list tr:has( [data-pos="left"]):has( [data-pos="right"]):not( [data-pos="top"]) [data-pos="left"],
	.table.list tr:has( [data-pos="left"]):has( [data-pos="right"]):not( [data-pos="top"]) [data-pos="right"] {bottom: auto; top: 8px;}

	.table.list tr:has( [data-pos="left"]):has( [data-pos="right"]):has( [data-type^="btn"]) [data-type^="btn"] {top: 0;}

	.fixed-right .btn-ix.size-b {min-width: 54px; min-height: 54px; padding: 10px;}
	.fixed-right .btn-ix.size-b .txt {font-weight: var(--fw-r);}

	.page-region .table:has( tbody tr > [data-pos]) tr:has( [data-pos="left"][data-type="rcbox"]) {padding-left: 8px; padding-right: 8px;}
	.page-region .table:has( tbody tr > [data-pos]) [data-pos="left"][data-type="rcbox"] + .mode-pc-tablet + * {padding-left: 26px;}

	.desc-inbox, .desc-box {flex-wrap: wrap;}

	/*.popup-wrap.type-footOnlyClose.type-hasRight .popup .pop-head > .right {gap: 3px;}*/
	.popup-wrap.type-footOnlyClose.type-hasRight .popup .pop-head > .right > .btn-ix:has( > .ico) > .txt {display: none;}

	div.form-input:has( .count-box) {position: relative; margin-bottom: 1.5rem;}
	div.form-input:has( .count-box) .count-box {position: absolute; top: calc(100% + 0.4rem); left: 0; right: 0; justify-content: flex-end;}
}

/*높이가 400이하*/
@media (max-height: 400px) {
	.popup-wrap:not(.windowtype) .popup{max-height: calc(100vh - 20px) !important}
	.popup-wrap:not(.windowtype) .popup .pop-cont {max-height: calc(-40px + 100vh); max-height: unset !important; overflow: auto;}
	.popup .form-textarea.style2 {min-height: 100px;}

	.popup.type-alert .pop-head {margin-bottom: 20px;}
	.popup.type-alert .pop-foot {margin-top: 0;}
	.popup .system-text {min-height: unset;}
}


/********************************************* Password policy checklist *********************************************/
.pwd-rule-list {
	margin: 8px 0 0;
	padding: 0;
	list-style: none;
}
.pwd-rule-list li {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	line-height: 1.6;
}
.pwd-rule-list .rule-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	font-weight: 700;
}
.pwd-rule-list li.is-pass {
	color: #1a7f37;
}
.pwd-rule-list li.is-pass .rule-icon {
	color: #1a7f37;
}
.pwd-rule-list li.is-fail {
	color: #c62828;
}
.pwd-rule-list li.is-fail .rule-icon {
	color: #c62828;
}

/*********************************************Main*********************************************/

/******************************************Main media******************************************/
@media screen and (max-width: 1920px){}