@import url(http://fonts.googleapis.com/earlyaccess/notosanskr.css);

/* CSS 초기화 */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
fieldset,img{border:0;}
address,caption,cite,code,dfn,em,var{font-style:normal;font-weight:normal;}
li{list-style:none;}
caption{text-align:left;}
q:before,q:after{content:'';}
abbr,acronym{border:0;font-variant:normal;}
sup{vertical-align:text-top;}
sub{vertical-align:text-bottom;}
input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;}
input,textarea,select{font-size:100%;}
legend{color:#000;}
del,ins{text-decoration:none;}

/* 기본 */
body {margin:0;padding:0;}
BODY,DIV,TABLE,TH,TD,INPUT,SELECT,TEXTAREA {font-size:12px; font-family:'Noto Sans KR', sans-serif; color:#333;}
.float-clear {display:block;float:none;clear:both;height:0 !important;width:100%;font-size:0 !important;line-height:0 !important;overflow:hidden;margin:0 !important;padding:0 !important;}
div:focus { outline:none; }
html, body {width:100%; height:100%;}
A:link, A:visited {color:#333; text-decoration:none;}
A:hover, A:active {color:#333; text-decoration:underline;}

label.checkbox-style {position:relative; display:inline-block; margin-bottom: 15px; padding-left: 25px; cursor: pointer;}
label.checkbox-style input {position:absolute; z-index:-1; opacity:0;}
label.checkbox-style > div.checkbox-indicator {position: absolute; top:2px; left:0; width:20px; height:20px; background-color:#fff; background-position:0 0; background-repeat:no-repeat; background-image:url('/images/bg_checkbox_off.png');}
label.checkbox-style input:checked ~ div.checkbox-indicator {background-image:url('/images/bg_checkbox_on.png');}

/* Input Tag */
select {margin:0; padding:0; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}
select::-ms-expand { display: none; }	/*익스플로어에서도 select박스 기본화살표가 안보이고 이미지화살표만 보이게 하기 위해서*/
input {-webkit-appearance:none; -moz-appearance:none; outline:none;}
textarea {-webkit-appearance:none; -moz-appearance:none; outline:none;}

/* Form Style */
select.select-style {height:28px;padding-left:5px;padding-right:30px;border:1px solid #aaa;background-color:#fff;outline-style:none;color:#6e6f71;/* margin-left:10px; */}
select.select-style {background:#fff url('../images/ic_selectbox_indicator.png') no-repeat 100% 50%; border-radius:0; -webkit-border-radius:0; -moz-border-radius:0;}
select.select-style {-webkit-appearance:none; -moz-appearance:none; outline:none;}

select.select-style2 {height:28px;padding-left:5px;padding-right:30px;border:1px solid #aaa;background-color:#fff;outline-style:none;color:#6e6f71;/* margin-left:10px; */}
select.select-style2 {background:#fff url('../images/ic_selectbox_indicator.png') no-repeat 100% 50%; border-radius:0; -webkit-border-radius:0; -moz-border-radius:0;}
select.select-style2 {-webkit-appearance:none; -moz-appearance:none; outline:none;}

input.input-style {width:calc(100% - 10px - 2px); height:28px; padding-left:5px; padding-right:5px; border:1px solid #aaa; color:#6e6f71;}
input.input-style {-webkit-appearance:none; -moz-appearance:none; outline:none;}
input.input-style.right {text-align:right;}
input.date-style {width:90px; min-width:80px; height:28px; padding-left:5px; padding-right:30px; border:1px solid #aaa; background-color:#fff; background-image:url('../images/ic_input_calendar.png'); background-repeat:no-repeat; background-position:100% 50%; color:#6e6f71;}
input.date-style {-webkit-appearance:none; -moz-appearance:none; outline:none;}
input.date-style:hover {cursor:pointer;}
input.search-style {width:calc(100% - 35px - 2px); height:28px; padding-left:5px; padding-right:30px; border:1px solid #aaa; background-color:#fff; background-image:url('../images/ic_input_search.png'); background-repeat:no-repeat; background-position:100% 50%; color:#6e6f71;}
input.search-style {-webkit-appearance:none; -moz-appearance:none; outline:none;}
input.select-style {height:28px; padding-left:5px; padding-right:30px; border:1px solid #aaa; background-color:#fff; color:#6e6f71;}
input.select-style {background:#fff url('../images/layout/ic_group_field_select.png') no-repeat 100% 50%; border-radius:0; -webkit-border-radius:0; -moz-border-radius:0;}
input.select-style {-webkit-appearance:none; -moz-appearance:none; outline:none;}
textarea.textarea-style {padding:5px; width:100%; height:calc(100% - 14px); border:1px solid #aaa; line-height:1.5em; color:#6e6f71; resize:none; overflow-y:auto; vertical-align: middle;}
textarea.textarea-style {border-radius:0; -webkit-border-radius:0; -moz-border-radius:0;}
textarea.textarea-style {-webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}
textarea.textarea-style {-webkit-appearance:none; -moz-appearance:none; outline:none;}

select.select-style:disabled,
input.input-style:disabled,
input.date-style:disabled,
input.search-style:disabled,
textarea.textarea-style:disabled {background-color:#efefef !important;}

/* Button Style */
button.button-style {padding-left:19px; padding-right:19px; height:28px; line-height:28px; vertical-align:middle; font-size:13px; font-weight:bold; cursor:pointer;}
/*button.button-style {border-radius:5px; -webkit-border-radius:5px; -moz-border-radius:5px;}*/
button.button-style {-webkit-appearance:none; -moz-appearance:none; outline-style:none; border-style:none; cursor:pointer;}
button.button-style.blue {background-color:#3597d9; color:#fff;}
button.button-style.black {background-color:#333333; color:#fff;}
button.button-style.gray {background-color:#7b7f99; color:#fff;}
button.button-style.red {background-color:#c30037; color:#fff;}
button.button-style.white {border:1px solid #c30037; background-color:#fff; color:#c30037;}
button.button-style.whiteGray {border:1px solid #888; background-color:#fff; color:#888;}
button.button-style.green {background-color:#0db456; color:#fff;}
button.button-style.next {padding-right:39px; background-image:url('../images/ic_button_next.png'); background-position:100% 50%; background-repeat:no-repeat;}
button.button-style.search {padding-left:34px; background-image:url('../images/ic_search_button.png'); background-position:15px 50%; background-repeat:no-repeat;}
button.button-style.export {padding-right:43px; border:1px solid #c30037; background-color:#fff; background-image:url('../images/ic_export_button.svg'); background-position:100% 50%; background-repeat:no-repeat; color:#c30037;}
button.button-style.favorite {padding-right:36px; background-color:#888; background-image:url('../images/ic_favorite_button.png'); background-position:100% 50%; background-repeat:no-repeat; color:#fff;}
button.button-style.plus {padding-left:9px; padding-right:9px; background-image:url('../images/ic_plus.png'); background-position:50% 50%; background-repeat:no-repeat;}
button.button-style.minus {padding-left:9px; padding-right:9px; background-image:url('../images/ic_minus.png'); background-position:50% 50%; background-repeat:no-repeat;}
button.button-style.disable {background-color:#cdcdcd; color:#999;}
button.search-square {width:33px; height:30px; margin-left:10px; background:#fff url(../images/posm/ic_search_button_gray.png) no-repeat center; background-size:15px 15px; text-align:center; vertical-align:middle;border: 1px solid #888!important}
button.search-square {border-radius:5px; -webkit-border-radius:5px; -moz-border-radius:5px;}
button.search-square {-webkit-appearance:none; -moz-appearance:none; outline-style:none; border-style:none; cursor:pointer;}

/* Checkbox */
label.checkbox {display:inline-block; width:auto;}
label.checkbox input {display: none!important;}
label.checkbox span {width:17px; height:17px; display:inline-block; background: url("../images/bg_checkbox_off.png"); background-size:100%; vertical-align:middle;}
label.checkbox input:checked + span {background: url("../images/bg_checkbox_on.png"); background-size:100%;}
label.checkbox input:checked {-webkit-appearance:none; -moz-appearance:none;}
label.checkbox em.lbl {display:inline-block; line-height:17px; vertical-align:middle; }

/* Radio */
label.radio {display:inline-block; width:auto;}
label.radio input {display: none!important;}
label.radio span {width:17px; height:17px; display:inline-block; background: url("../images/bg_radio_off.png"); background-size:100%; vertical-align:middle;}
label.radio input:checked + span {background: url("../images/bg_radio_on.png"); background-size:100%;}
label.radio input:checked {-webkit-appearance:none; -moz-appearance:none;}
label.radio em.lbl {display:inline-block; line-height:17px; vertical-align:middle;}

/* Loading Box */
#__Loading_Box {z-index:80000; position:fixed; top:0; left:0; width:100%; height:100%;}
#__Loading_Box > div.inner-box {position:relative; display:table; width:100%; height:100%; background-color:rgba(0, 0, 0, 0.7);}
#__Loading_Box > div.inner-box > div.message-box {display:table-cell; vertical-align:middle; text-align:center; font-size:14px; color:#fff;}
#__Loading_Box > div.inner-box > div.message-box div.icon-box {height:60px;}
#__Loading_Box > div.inner-box > div.message-box span.icon {display: inline-block; width: 15px; height: 15px; background-color: #fcdc29; border-radius: 50%; animation: loading 1s infinite;  transform-origin: bottom center;  position: relative;}
#__Loading_Box > div.inner-box > div.message-box span.icon1 {animation-delay: 0.1s;}
#__Loading_Box > div.inner-box > div.message-box span.icon2 {animation-delay: 0.2s;}
#__Loading_Box > div.inner-box > div.message-box span.icon3 {animation-delay: 0.3s;}
#__Loading_Box > div.inner-box > div.message-box span.icon4 {animation-delay: 0.4s;}
#__Loading_Box > div.inner-box > div.message-box span.icon5 {animation-delay: 0.5s;}
#__Loading_Box > div.inner-box > div.message-box p.message {font-size:16px;}

@keyframes loading {
	0%{
		transform: translateY(0px);
		background-color: #fcdc29;
	}
	50%{
		transform: translateY(30px);
		background-color: #ef584a;
	}
	100%{
		transform: translateY(0px);
		background-color: #fcdc29;
	}
}

/* Layer Popup Style */
#LayerPopupBox > div.layer-popup-box {position:absolute; top:0; left:0; width:100%; height:100%;}
#LayerPopupBox > div.layer-popup-box div.disabled-box {position:fixed; top:0; left:0; width:100%; height:100%; min-width:1280px; background-color:rgba(0, 0, 0, 0.5);}
#LayerPopupBox > div.layer-popup-box div.layer-popup {position:absolute; top:0; left:0; border:2px solid #000;}
#LayerPopupBox > div.layer-popup-box div.layer-popup {box-shadow:3px 3px 7px 0 rgba(0,0,0,0.35); -webkit-box-shadow:3px 3px 7px 0 rgba(0,0,0,0.35); -moz-box-shadow:3px 3px 7px 0 rgba(0,0,0,0.35)}
#LayerPopupBox > div.layer-popup-box div.title-bar {position:relative; height:65px; background-color:#333;}
#LayerPopupBox > div.layer-popup-box div.title-bar h3 {height:65px; line-height:65px; padding-left:14px; font-size:18px; font-weight:bold; color:#fff;}
#LayerPopupBox > div.layer-popup-box div.title-bar p.btn-close {position:absolute; top:19px; right:14px; width:26px; height:26px; background:url('../images/ic_popup_close.png') no-repeat 0 0; background-size:26px 26px;}
#LayerPopupBox > div.layer-popup-box div.title-bar p.btn-close:hover {cursor:pointer;}
#LayerPopupBox > div.layer-popup-box div.contents {overflow:auto; position:relative; width:100%; height:calc(100% - 65px); background-color:#fff;}
#LayerPopupBox > div.layer-popup-box div.contents div.page-loading {height:60px; line-height:60px; text-align:center; font-size:14px;}
#LayerPopupBox > div.layer-popup-box div.contents div.page-loading img {vertical-align:middle;}

/* Fixed Header Table */
div.scroll-table {width:100%; height:calc(100% - 34px);}
div.scroll-table > div.header {}
div.scroll-table > div.body {overflow-x:hidden; overflow-y:scroll; border-left:1px solid #ddd; border-right:1px solid #ddd; border-bottom:1px solid #ddd;}
div.scroll-table > div.body table {margin-top:-1px; border-style:none;}
div.scroll-table > div.body table tr > *:first-child {border-left-style:none;}

/* Auto Complete */
div.auto-complete-list-box {z-index:5000; overflow:hidden; position:relative; top:0; left:0; border:1px solid #000; background-color:#fff;}
div.auto-complete-list-box {border-radius:5px; -webkit-border-radius:5px; -moz-border-radius:5px;}
div.auto-complete-list-box {box-shadow:3px 3px 7px 0 rgba(0,0,0,0.35); -webkit-box-shadow:3px 3px 7px 0 rgba(0,0,0,0.35); -moz-box-shadow:3px 3px 7px 0 rgba(0,0,0,0.35);}
div.auto-complete-list-box > div.container {overflow-x:hidden; overflow-y:scroll; width:300px; height:155px;}
div.auto-complete-list-box > div.container > dl {float:left; width:calc(100% - 10px); height:30px; padding-left:5px; padding-right:5px; border-top:1px solid #ccc;}
div.auto-complete-list-box > div.container > dl {cursor:pointer;}
div.auto-complete-list-box > div.container > dl.selected {background-color:#f0f0f0;}
div.auto-complete-list-box > div.container > dl:hover {background-color:#f5f5f5;}
div.auto-complete-list-box > div.container > dl:first-child {border-top-style:none;}
/* div.auto-complete-list-box > div.container > dl dt {overflow:hidden; float:left; width:calc(100% - 70px); height:30px; line-height:30px; text-align:left; color: #000000; font-size:12px; font-weight:bold; text-overflow:ellipsis; white-space:nowrap;} */
div.auto-complete-list-box > div.container > dl dt {overflow:hidden; float:left; width:calc(100% - 70px); height:30px; line-height:30px; text-align:left; color: #888; font-size:12px; font-weight:normal; text-overflow:ellipsis; white-space:nowrap;}
div.auto-complete-list-box > div.container > dl dd {float:right; width:70px; height:30px; line-height:30px; text-align:right; color:#999; font-size:11px;}

/* Select Multi Item */
div.select-multi-item {z-index:5000; overflow:hidden; position:absolute; top:0; left:0; width:229px; border:1px solid #000000; background-color: #ffffff; box-sizing:border-box;}
div.select-multi-item {border-radius:5px; -webkit-border-radius:5px; -moz-border-radius:5px;}
div.select-multi-item {box-shadow:3px 3px 7px 0 rgba(0,0,0,0.35); -webkit-box-shadow:3px 3px 7px 0 rgba(0,0,0,0.35); -moz-box-shadow:3px 3px 7px 0 rgba(0,0,0,0.35);}
div.select-multi-item * {box-sizing:border-box;}
div.select-multi-item > div.button {display:table; width:100%;}
div.select-multi-item > div.button > p {display:table-cell; width:100%; height:35px; padding:0 10px; font-size:12px; color: #6e6f71; vertical-align:middle;}
div.select-multi-item > div.button.top {border-bottom:1px solid #ddd;}
div.select-multi-item > div.button.bottom {border-top:1px solid #ddd;}
div.select-multi-item > div.button.bottom > p {text-align:right;}
div.select-multi-item > ul {overflow:auto; width:100%; height:150px;}
div.select-multi-item > ul li {width:100%; height:30px; line-height:30px; padding:0 10px;}
div.select-multi-item > ul li:hover {background-color: #f5f5f5;}
div.select-multi-item > ul li label.checkbox {width:100%; height:100%;}
div.select-multi-item label.checkbox em {display:inline-block; margin-left:5px;}

/* Scrollbar Style */
::-webkit-scrollbar {width:7px; height:7px;}
::-webkit-scrollbar-track {background:#f1f1f1;}
::-webkit-scrollbar-thumb {background:#888;}
::-webkit-scrollbar-thumb:hover {background:#555;}
.popup-Setting{ width: 850px !important; }
.popup-MessageSend{ width: 850px !important; }

@media screen and (max-width: 1600px) {
	/* body{ transform: scale( 0.8 )!important; width: calc(125%)!important; height: calc(125%)!important; left: -12.5%!important; top: -12.5%!important; position: fixed!important;}
	.layer-popup{width: calc(100% - 26px) !important;}
	.popup-Setting{width: 850px !important; left:calc(50% - 425px) !important; top:calc(50% - 190px) !important;}
	.popup-MessageSend{width: 850px !important; left:calc(50% - 425px) !important; top:calc(50% - 368px) !important;}
	.popup-Sell-out{width: 424px !important; left:calc(50% - 212px) !important; top:calc(50% - 310px) !important;}
	.popup-FavoritePOP{width: 499px !important; left:calc(50% - 249.5px) !important; top:calc(50% - 218.5px) !important;}
	.popup-StockOutList{ width:804px !important; height:527px; top:calc(50% - 263px) !important; left:calc(50% - 402px) !important; }
	.popup-StockReturnList{ width:804px !important; height:527px; top:calc(50% - 263px) !important; left:calc(50% - 402px) !important; }
	#AutoCompleteArea{ left:300px !important; }
	#AutoCompleteArea > *{ left:200px !important; } */
}


/* 모든 jsTree 아이콘에 대해 적용 */
.jstree-icon.jstree-themeicon.jstree-themeicon-custom {
	background-size: contain !important; /* 박스 크기에 맞게 이미지 크기를 조절 */
	width:16px !important; /* 원하는 크기로 설정 */
	height:24px !important;
}

	 /* 열려있을 때 아이콘 */
 #j1_1.jstree-open > .jstree-ocl {
	 background: url("/images/icon_grayMinus.svg") no-repeat center center !important;
	 background-size: contain !important;
	 width: 16px !important; /* 원하는 크기로 설정 */
	 height: 24px !important;
 }

/* 닫혀있을 때 아이콘 */
#j1_1.jstree-closed > .jstree-ocl {
	background: url("/images/icon_grayPlus.svg") no-repeat center center !important;
	background-size: contain !important;
	width:16px !important; /* 원하는 크기로 설정 */
	height:24px !important;
}

.jstree-node.jstree-leaf.jstree-closed > .jstree-ocl{
	background: url("/images/icon_grayMinus.svg") no-repeat center center !important;
	background-size: contain !important;
	width:16px !important; /* 원하는 크기로 설정 */
	height:24px !important;
}

/* 열려있을 때 아이콘 */
.jstree-node.jstree-open > .jstree-ocl {
	background: url("/images/icon_grayMinus.svg") no-repeat center center !important;
	background-size: contain !important;
	width:16px !important; /* 원하는 크기로 설정 */
	height:24px !important;
}

/* 닫혀있을 때 아이콘 */
.jstree-node.jstree-closed > .jstree-ocl {
	background: url("/images/icon_grayPlus.svg") no-repeat center center !important;
	background-size: contain !important;
	width:16px !important; /* 원하는 크기로 설정 */
	height:24px !important;
}



/* 체크박스가 체크되지 않았을 때 */
.jstree .jstree-checkbox {
	background: url('/images/ico_favorite_off.svg') no-repeat center center !important;
	background-size: contain !important;
}

/* 체크박스가 체크되었을 때 */
.jstree-default.jstree-checkbox-selection .jstree-clicked>.jstree-checkbox, .jstree-default .jstree-checked>.jstree-checkbox {
	background: url('/images/ico_favorite_on.svg') no-repeat center center !important;
	background-size:contain !important;
}

.jstree-anchor.no_checkbox i.jstree-icon.jstree-checkbox {
	display:none !important;
}



	/* 기본 아이콘 제거 */
.jstree-ocl {
	background-image: none;
}

.jstree-default .jstree-node,.jstree-default{
	background-image: none !important;
}

.jstree-anchor{
	margin-left: 3px !important;
}
.jstree-default .jstree-clicked {
	background: none !important;
	box-shadow: none !important;
	color: #c30037 !important;
	font-weight: bold;
}

/* 프로그레스바 컨테이너 */
.progress-container {
	width: 100%;
	height: 30px; /* 높이 설정 */
	background-color: #f3f3f3; /* 배경 색상 */
	border-radius: 15px; /* 둥근 모서리 */
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 그라데이션 효과 */
	margin-top: 20px;
	margin-bottom: 20px;
}

/* 프로그레스바 */
progress {
	width: 100%; /* 너비를 100%로 설정 */
	height: 30px; /* 높이를 설정하여 크기 조정 */
	border-radius: 15px; /* 둥근 모서리 */
	appearance: none; /* 기본 스타일 제거 */
	background: #ddd;
}

/* 프로그레스바 내부 */
progress::-webkit-progress-bar {
	background-color: #f3f3f3;
	border-radius: 15px;
}

/* 프로그레스바 진행 상태 */
progress::-webkit-progress-value {
	background-color: #4caf50; /* 녹색 */
	border-radius: 15px;
}

#progress-div{
	width: 500px;
	position: absolute;
	z-index: 1;
	padding: 100px;
	background: white;
	top: 30%;
	display: none;
}



/************ ml 새 디자인 적용 공통요소들 2026.03 ************/

/* 레이아웃 */
html {font-size:62.5%}
.new-design.wrap-box {height:100%; padding:2.1rem; background-color:#fff; box-sizing: border-box}
.new-design.wrap-box .wrap-header {display:flex; align-items: flex-end; gap:0.8rem; margin:2.7rem 0 2rem; justify-content: space-between}
.new-design.wrap-box .file-upDown {display:flex; flex-wrap: wrap; align-items: center; gap:0.7rem; }

.new-design .btn-group {display:flex; align-items: center; gap:0.7rem;}
.new-design .row {display:flex; align-items: center}
.new-design .align-left {margin-right:auto}
.new-design .margin-left {margin-left:auto !important;}
.new-design .align-right {justify-content: flex-end}
.new-design .align-slide {justify-content:space-between}

/* 폼 요소들과 기타요소들 */
.new-design p {color:#314158;}
.new-design select.select-style {height:3.2rem; width:11.3rem; padding:0.6rem 1rem; border-radius:0.7rem; color:#0A0A0A; font-size:1.2rem; font-weight: 500; background:#F3F3F5 url("../images/select_arrow.svg") no-repeat calc(100% - 1rem) 1rem / 1.4rem 1.4rem; border:0; }
.new-design input {height:3.2rem; width:100%; padding:0.6rem 1rem; border-radius:0.7rem; color:#0A0A0A; font-size:1.2rem; font-weight:500; background-color:#F3F3F5; border:0; cursor:pointer; box-sizing: border-box}
.new-design input.input-style {height:3.2rem; width:11.3rem; }
.new-design input[readonly] {opacity:0.5 }
.new-design input[type="file"] {padding:0; background-color: #fff;}
.new-design input[type="file"]::file-selector-button {width: 0; padding: 0; border: 0; overflow: hidden; background: none; }
.new-design input[type="file"]::-webkit-file-upload-button {width: 0; padding: 0; border: 0; overflow: hidden; background: none; }
.new-design input[type="file"]::before {content: "File"; display:inline-flex; align-items: center; height:3.2rem; margin-right:0.7rem; padding:0.2rem 1.2rem; border:1px solid #E6E6E6; background:#fff; color:#0A0A0A; border-radius:0.7rem; cursor:pointer; box-sizing:border-box }
.new-design.pop select, .new-design.pop input, .new-design {width:100%}
.new-design textarea {padding:0.6rem 1rem; resize:none; box-sizing: border-box}

.new-design .list-wrap input {width:100%}
.new-design .green {color:#00A63E !important}
.new-design .red {color: #E7000B !important}
.new-design .required {color:#FB2C36; font-weight:600}
.new-design .red-badge {padding:0.5rem 0.8rem; background-color:#C41E3A; color:#fff; border-radius:1.5rem}

/* 버튼 */
.new-design button {display:flex; align-items: center; gap:0.6rem; height:3.2rem !important; padding:0.6rem 1.2rem !important; border-radius:0.7rem; font-size: 1.2rem; font-weight: 500; cursor: pointer }
.new-design button.disabled {background:#90A1B9; border-color:#90A1B9; pointer-events: none}
.new-design button.disabled2 {opacity:0.5; cursor:default; pointer-events: none;}
.new-design button.big {height:3.5rem !important;}
.new-design button.small {height:2.4rem !important;}
.new-design button.btn-icon {display: inline-flex !important; gap:0.7rem}
.new-design button.btn-icon img {width:1.4rem; height:1.4rem;}
.new-design button.btn-default {background:#fff; border:1px solid #CAD5E2}
.new-design button.btn-default:hover {background:#E9EBEF }
.new-design button.btn-black {background:#2C2C2C; border:1px solid #2C2C2C; color:#FFFFFF}
.new-design button.btn-blue {background:#155DFC; border:1px solid #155DFC; color:#FFFFFF}
.new-design button.btn-green {background:#00A63E; border:1px solid #00A63E; color:#FFFFFF}
.new-design button.btn-red {background:#C41E3A; border:1px solid #C41E3A; color:#FFFFFF; margin:0}
.new-design button.btn-red:hover {background:#AC3343 }
.new-design button.btn-light {background:#90A1B9; border:1px solid #90A1B9; color:#FFFFFF; white-space: nowrap}
.new-design button.btn-light:hover {background:#62748E; border-color:#62748E;}
.new-design button.btn-yellow {background:#FDC700; border:1px solid #FDC700; color:#111; margin:0}
.new-design button.btn-yellow:hover {background:#F0B100 }
.new-design button.btn-del {flex:none; width:3.2rem; height:2.8rem; background:transparent url("../images/ico_redX.svg") no-repeat center center; border:none; color:#FFFFFF; font-size:0; }
.new-design button.btn-del:hover {background-color:#FEF2F2}
.new-design button.btn-close {height:3rem; width:4rem; border-radius: 0.6rem; background:#030213 url("../images/ico_closeX.svg") no-repeat center center; font-size: 0}

/* 타이틀 */
.new-design .section-title {font-size:1.6rem; color:#0A0A0A; font-weight:700}
.new-design .card-title {font-size:1.3rem; color:#0A0A0A; font-weight:700}

/* 목록 & 필드 */
.new-design .list-wrap {display:flex; flex-direction:column; gap:1.4rem;}
.new-design .field {display:flex; flex-direction: column; gap:0.7rem;}
.new-design .field dt {color:#0A0A0A; font-size:1.2rem; font-weight:600}

.new-design.pop .form-group {width:100%; gap:1.4rem}
.new-design.pop .form-group .item .row {gap:0.7rem}
.new-design .form-group-box {display:flex; flex-direction: column; gap:1.4rem; padding:1.4rem; border:1px solid #E6E6E6; border-radius:0.7rem}

/* 박스 */
.new-design .guide {padding:1.2rem; border:1px solid #CAD5E2; background-color:#F1F5F9; border-radius:0.4rem}
.new-design .guide p {color:#45556C; font-size: 1.1rem;}
.new-design .guide p span {color:#45556C;}
.new-design .guide .card-title {color:#0A0A0A; font-size: 1.2rem; font-weight: 600}

.new-design .lightGray-box {padding:1.4rem; background-color: #F8FAFC; border:1px solid #e6e6e6; border-radius:0.4rem}

.new-design .button-box {display:flex; align-items:center; justify-content: flex-end; gap:1rem; margin:2rem -2rem 0; padding:1.4rem 2rem 0; border-top:1px solid #E6E6E6}
.new-design .button-box.bg {margin-bottom:-2rem; padding-bottom: 2rem; background-color:#F8FAFC}

.new-design .box-list {display:flex; flex-direction:column; gap:2rem;}
.new-design .box-list .section-title {padding:0.3rem 0; }
.new-design .box-list .section-title.line {border-bottom:1px solid #E6E6E6}
.new-design .column-2 {display:grid ;grid-template-columns:1fr 1fr; grid-gap:1.4rem;}
.new-design .add-field {height:9rem; padding:1.4rem; background-color:#F8FAFC; border-radius:0.4rem; border:1px dashed #E6E6E6; align-content:center}
.new-design .add-field .section-title {font-size: 1.2rem;}
.new-design .add-field p {color:#62748E; font-size:1.1rem; text-align: center}

/* 토스트 메세지 */
.new-design .toast-msg {padding:1rem 1.4rem; color:#9F0712; background-color: #FEF2F2; border:1px solid #FF6467; border-radius:0.8rem}
.new-design .toast-msg .title {display: flex; align-items: center; gap:0.6rem; font-weight: 700; }
.new-design .toast-msg p {margin-bottom:0.4rem; color:#9F0712}
.new-design .toast-msg.blue {background-color:#EFF6FF; border-color:#BEDBFF; color:#193CB8}
.new-design .toast-msg.blue p {color:#193CB8}
.new-design .toast-msg .strong {font-weight: bold}

/* 팝업 */
#LayerPopupBox > div.layer-popup-box div.layer-popup.new-design {border-radius:0.8rem; overflow:hidden; border:0}
#LayerPopupBox > div.layer-popup-box div.layer-popup.new-design div.title-bar {position:relative; height:5.2rem; background-color:#C41E3A }
#LayerPopupBox > div.layer-popup-box div.layer-popup.new-design div.title-bar p.btn-close {top:50%; transform:translateY(-50%); background-position: center center; background-size: 1.8rem 1.8rem;}
#LayerPopupBox > div.layer-popup-box div.layer-popup.new-design div.title-bar h3 {padding-left:2rem; font-size: 1.7rem; line-height:5.2rem}
#LayerPopupBox > div.layer-popup-box div.layer-popup.new-design div.contents {height:calc(100% - 5.2rem)}