@charset "utf-8";
/*==============================================

    ----------------------------------------------------------------
	* Date			:	2023.07.21
	* Modify		:
	* Name			:	form.css
	----------------------------------------------------------------

==============================================*/



/* ===========================
	입력
=========================== */
input[type=text],
input[type=number],
input[type=email],
input[type=tel],
input[type=url],
input[type=search],
input[type=date],
input[type=datetime-local],
input[type=month],
input[type=time],
input[type=week],
input[type=file],
input[type=password] {
	position:relative;
	display:inline-block;
	min-width:120px;
	width:100%;
	height:56px;
	padding:0 32px;
    font-family:'Pretendard', 'Malgun Gothic';
	color:#252525;
	font-weight:500;
	font-size:16px;
	line-height:54px; 
	border:1px solid #c9c9c9;
    border-radius:12px;
	background-color:#fff;
	box-sizing:border-box;
    outline:none;
	z-index:0;
}
input[type=file] {
	line-height:50px;
}
textarea {
	position:relative;
	display:inline-block;
	min-width:120px;
	width:100%;
	height:160px;
	padding:24px 32px; 
	color:#252525;
	font-weight:500;
	font-size:15px;
	text-align:left;
	line-height:1.5;
	border:1px solid #c9c9c9;
    border-radius:12px;
	background-color:#fff;
	overflow:auto;
	resize:none;
	box-sizing:border-box;
	z-index:0;
}
select {
	position:relative;
	display:inline-block;
	min-width:120px;
	width:100%;
	height:56px;
	padding:0 32px;
	color:#a5a5a5;
	font-weight:500;
	font-size:16px;
	line-height:54px; 
	border:1px solid #C9C9C9;
    border-radius:12px;
	background-image:url('../images/icon/icon-form-select-arrow.png');
	background-position:right 24px center;
	background-repeat:no-repeat;
	background-color:#fff;
	background-size:24px 24px;
	box-sizing:border-box;
	z-index:0;
}

/* focus */
input[type=text]:focus,
input[type=number]:focus,
input[type=email]:focus,
input[type=tel]:focus,
input[type=url]:focus,
input[type=time]:focus,
input[type=password]:focus {}
textarea:focus {}
select:focus {}

/* Readonly */
input[type=text]:read-only,
input[type=number]:read-only,
input[type=email]:read-only,
input[type=tel]:read-only,
input[type=url]:read-only,
input[type=time]:read-only,
input[type=password]:read-only,
textarea:read-only {color:#a5a5a5; background-color:#f6f6f6;}

/* Disabled */
input[type=text]:disabled,
input[type=number]:disabled,
input[type=email]:disabled,
input[type=tel]:disabled,
input[type=url]:disabled,
input[type=time]:disabled,
input[type=password]:disabled,
select:disabled,
textarea:disabled {color:#a5a5a5; background-color:#f6f6f6;}

/* fill */
input[type=text].fill,
input[type=number].fill,
input[type=email].fill,
input[type=tel].fill,
input[type=url].fill,
input[type=time].fill,
input[type=password].fill,
select.fill,
textarea.fill {}

/* placeholder */
input::placeholder {
    color:#a5a5a5;
}
textarea::placeholder {
    color:#a5a5a5;
}

/* input[type=number] */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
}
input[type=number] {/* Firefox */
    -moz-appearance: textfield !important;
  }


/* ===========================
	선택
=========================== */
/* 체크박스 & 라디오박스 */
.form-check-box {position:relative; display:inline-flex; line-height:24px; padding:4px 0;}
.form-check-box input {position:absolute; top:0; left:0; display:block; width:100%; height:100%; opacity:0; cursor:pointer;}
.form-check-box .form-check-icon {position:relative; display:block;}
.form-check-box .form-check-icon:before,
.form-check-box .form-check-icon:after {content:''; position:absolute; top:0; left:0; display:block;}
.form-check-box .form-check-icon:before {z-index:0;}
.form-check-box .form-check-icon:after {z-index:1;}

/* 체크박스 */
.form-check-box.check input:checked + .form-check-icon:before{background:url(../images/icon/icon-input-checkbox-blue.png)center center no-repeat; background-size:auto 100%; border:0;}
.form-check-box.check .form-check-icon {min-width:24px; min-height:24px;}
.form-check-box.check .form-check-icon:before {width:24px; height:24px; border:2px solid #c9c9c9; border-radius:6px; background-color:#fff; box-sizing:border-box;}
.form-check-box.check .form-check-icon em {display:inline-flex; padding-left:32px; font-size:16px; color:#252525; font-weight:400;}

/* 라디오박스 */
.form-check-box.radio input:checked + .form-check-icon:before{background:url(../images/icon/icon-input-radiobox-blue.png)center center no-repeat; background-size:auto 100%; border:0;}
.form-check-box.radio .form-check-icon {min-width:24px; min-height:24px;}
.form-check-box.radio .form-check-icon:before {width:24px; height:24px; background:url(../images/icon/icon-input-radiobox.png) center center no-repeat; background-size:24px;}
.form-check-box.radio .form-check-icon em {display:inline-flex; padding-left:32px; font-size:16px; color:#252525; font-weight:400;}

/* 라디오박스 > radio-100 */
.form-check-box.radio-100 .form-check-icon {min-width:24px; min-height:24px;}
.form-check-box.radio-100 .form-check-icon:before {width:20px; height:20px; margin:2px 0 0 2px; border:2px solid #a5a5a5; border-radius:50%; background-color:#fff; box-sizing:border-box;}
.form-check-box.radio-100 .form-check-icon:after {width:8px; height:8px; margin:8px 0 0 8px; background-color:#3361cd; border-radius:50%; opacity:0;}
.form-check-box.radio-100 input:checked + .form-check-icon:before {border-color:#3361cd;}
.form-check-box.radio-100 input:checked + .form-check-icon:after {opacity:1;}
.form-check-box.radio-100 .form-check-icon em {display:inline-flex; padding-left:32px; font-size:16px; color:#252525; font-weight:400;}


/* 그룹 */
.form-check-group .form-check-box {padding:0;}
.form-group .form-check-group .grid-layout-inner,
.form-check-group .grid-layout-inner {margin:-10px -20px;}
.form-group .form-check-group .grid-layout-cell,
.form-check-group .grid-layout-cell {padding:10px 20px;}
.form-check-group .grid-layout {overflow:hidden;}

.form-beige-box {background:#f6f6f6; border-radius:12px;}
.form-beige-box .form-check-group {padding:24px 40px;}

.form-purple-box {background:#f2f5fc; border-radius:12px;}
.form-purple-box .form-check-group {padding:24px 40px;}



/* 상태 */
.form-check-box input:disabled + span {opacity:40%;}
 
/* 카드 타입 */
.form-check-box.card-type {width:100%; padding:0;}
.form-check-box.card-type .form-check-icon {display:flex; align-items:center; flex-direction:column; width:100%; padding:38px 20px 24px; border-radius:24px; border:1px solid #c9c9c9; background-color:#fff; box-sizing:border-box;}

.form-check-box.card-type .form-check-icon:before, .form-check-box.card-type .form-check-icon:after {top:99px; left:240px;}

.form-check-box.card-type .form-check-icon .form-icon {position:relative; width:40px; height:40px;}
.form-check-box.card-type .form-check-icon .form-icon:before {content:''; position:absolute; top:0; left:50%; width:40px; height:40px; background-repeat:no-repeat; background-position:center center; background-size:40px; transform:translateX(-50%); opacity:1;}
.form-check-box.card-type .form-check-icon .form-icon:after {content:''; position:absolute; top:0; left:50%; width:40px; height:40px; background-repeat:no-repeat; background-position:center center; background-size:40px; transform:translateX(-50%); opacity:0;}
.form-check-box.card-type .form-check-icon .form-icon.personal:before {background-image:url(../images/icon/icon-personal-gray.png);}
.form-check-box.card-type .form-check-icon .form-icon.personal:after {background-image:url(../images/icon/icon-personal-blue.png);}
.form-check-box.card-type .form-check-icon .form-icon.company:before {background-image:url(../images/icon/icon-company-gray.png);}
.form-check-box.card-type .form-check-icon .form-icon.company:after {background-image:url(../images/icon/icon-company-blue.png);}
.form-check-box.card-type .form-check-icon .form-icon + em {margin-top:18px}
.form-check-box.card-type .form-check-icon em {display:inline-block; font-size:20px; font-weight:600; color:#666666; line-height:30px;}
.form-check-box.card-type .form-check-icon em + .form-info {margin-top:14px}
.form-check-box.card-type .form-check-icon .form-info {display:inline-block; font-size:16px; font-weight:400; color:#666666;}

.form-check-box.card-type input:checked + .form-check-icon {border:1px solid #b3c4ed; background-color:#f2f5fc;}
.form-check-box.card-type input:checked + .form-check-icon .form-icon:before {opacity:0;}
.form-check-box.card-type input:checked + .form-check-icon .form-icon:after {opacity:1;}

/* 카드 타입 100 */
.form-check-box.card-type-100 {width:100%; height:100%; padding:0;}
.form-check-box.card-type-100 .form-check-icon {position:relative; width:100%; min-height:72px; padding:24px 80px 24px 32px; border-radius:12px; border:1px solid #c9c9c9; background-color:#fff; box-sizing:border-box;}

.form-check-box.card-type-100 .form-check-icon:before {right:24px; top:23px; left:auto; width:24px; height:24px; background-position:center center; background-size:24px auto; background-repeat:no-repeat; background-image:url(../images/icon/icon-checkbox-gray.png); opacity:1;}
.form-check-box.card-type-100 .form-check-icon:after {right:24px; top:23px; left:auto; width:24px; height:24px; background-position:center center; background-size:24px auto; background-repeat:no-repeat; background-image:url(../images/icon/icon-checkbox-blue.png); opacity:0;}

.form-check-box.card-type-100 .form-check-icon .icon {position:relative; width:24px; height:24px; display:inline-flex; margin-right:8px;}
.form-check-box.card-type-100 .form-check-icon .icon:after {content:''; position:absolute; top:0; left:0; width:100%; height:100%; background-repeat:no-repeat; background-position:center center; background-size:24px auto; opacity:0;}
.form-check-box.card-type-100 .form-check-icon .icon:before {content:''; position:absolute; top:0; left:0; width:100%; height:100%; background-repeat:no-repeat; background-position:center center; background-size:24px auto; opacity:1;}

.form-check-box.card-type-100 .form-check-icon .icon-counsel-solution:after {background-image:url(../images/icon/icon-counsel-solution-blue.png);}
.form-check-box.card-type-100 .form-check-icon .icon-counsel-solution:before {background-image:url(../images/icon/icon-counsel-solution-gray.png);}
.form-check-box.card-type-100 .form-check-icon .icon-counsel-buying:after {background-image:url(../images/icon/icon-counsel-buying-blue.png);}
.form-check-box.card-type-100 .form-check-icon .icon-counsel-buying:before {background-image:url(../images/icon/icon-counsel-buying-gray.png);}
.form-check-box.card-type-100 .form-check-icon .icon-counsel-partner:after {background-image:url(../images/icon/icon-counsel-partner-blue.png);}
.form-check-box.card-type-100 .form-check-icon .icon-counsel-partner:before {background-image:url(../images/icon/icon-counsel-partner-gray.png);}

.form-check-box.card-type-100 .form-check-icon .text {display:inline-flex; font-size:18px; font-weight:500; color:#333333;}

.form-check-box.card-type-100 input:checked + .form-check-icon {border:1px solid #b3c4ed; background-color:#f2f5fc;}
.form-check-box.card-type-100 input:checked + .form-check-icon:before {opacity:0;}
.form-check-box.card-type-100 input:checked + .form-check-icon:after {opacity:1;}
.form-check-box.card-type-100 input:checked + .form-check-icon .icon:before {opacity:0;}
.form-check-box.card-type-100 input:checked + .form-check-icon .icon:after {opacity:1;}

/* select */
.select-size-md select {width:240px; height:48px; padding:0 24px; line-height:46px; background-position:right 16px center;}
.select-size-sm select {width:auto; min-width:160px; height:48px; padding:0 24px; /*color:#4d4d4d;*/ line-height:46px; background-position:right 16px center;}
select.form-vaildity.error {border-color: var(--color-200);}

/* textarea editor */
.textarea-editor {position:relative;}
.textarea-editor-ui {height:48px; width:100%; text-align:center; color:#fff; font-weight:400; line-height:47px; border-radius:12px 12px 0 0; background-color:#5e5e5e; box-sizing:border-box;}
.textarea-editor textarea {border-radius:0 0 12px 12px; border-top:none;}
.textarea-editor.form-vaildity.error .textarea-editor-ui, .textarea-editor.form-vaildity.error textarea {border-color: var(--color-200);}


/* ===========================
	그룹
=========================== */
/* 입력 기본 그룹  */
.form-input-label {font-size:18px; font-weight:500; line-height:28px;}
.form-input-items .item-header {position:relative; display:flex;}
.form-input-items .item-header .item-header-right {display:flex; margin-left:auto;}
.form-input-items .item-header .item-header-right .item-cell {}

.form-input-items .item-header + .item-body {margin-top:16px;}
.form-input-items .item-body + .item-body {margin-top:32px;}
.form-input-items .item-body.grid-2 {padding-right:24px; box-sizing:border-box;}
.form-input-items .item-header + .item-body.grid-layout-inner {margin-top:0px;}
.form-input-items .item-detail {position:relative; min-height:56px;}

.font-color-util-needs {display:inline-flex; width:4px; height:4px; margin:5px 0 0 4px; font-size:0px; border-radius:50%; background-color:var(--color-200);}

.form-input-items .item-detail + .item-detail-info {margin-top:6px;}
.form-input-items .item-detail > .item-detail-info {margin-top:6px;}
.form-input-items .item-detail + .item-detail-ui {margin-top:20px;}
.form-input-items .item-detail + .item-detail-ui .info-cell {margin-top:6px;}
.form-input-items .item-detail-info {position:relative; display:flex; align-items:flex-start; font-size:14px;}
.form-input-items .item-detail-info .item-left {}
.form-input-items .item-detail-info .item-right {margin-left:auto;}
.form-input-items .item-detail-info .item-input-info {font-size:14px; line-height:22px; color:#808080;}
.form-input-items .item-detail-info .item-input-info .info-cell {position:relative; padding-left:12px;}
.form-input-items .item-detail-info .item-input-info .info-cell:before {content:''; position:absolute; top:10px; left:0; width:3px; height:3px; margin-top:0; border-radius:50%; background-color:#808080;}

.form-input-items.horizontal {display:flex; align-items:center;}
.form-input-items.horizontal > .item-header {flex:0 0 auto; width:10%;}
.form-input-items.horizontal > .item-header .item-header-label .form-input-label + .header-btn {min-height:32px; margin-top:16px;}
.form-input-items.horizontal > .item-body {width:100%; margin:0;}

/* 입력 기본 그룹 > 레이아웃 */
.form-data-cell + .form-data-cell {margin-top:32px;}
.form-input-view {display:flex; align-items:center; flex-wrap:wrap; min-height:56px;}

/* 입력별 색상 */
.form-input-items .item-detail-info .font-color-util-success {display:flex; color:var(--color-100); line-height:23px;}
.form-input-items .item-detail-info .font-color-util-error {display:flex; color:var(--color-200); line-height:23px;}
.form-input-items .item-detail-info .font-color-util-error .icon-util-error-red {margin-right:8px;}
.form-vaildity.error {border-color:var(--color-200);}
.form-vaildity.success {border-color:var(--color-100);}

/* 입력 + 기능 */
.form-input-items .input-value.cover {position:relative;}
.form-input-items .input-value.cover .form-input {padding-right:15%;}
.input-function-group {position:absolute; top:0; right:0; display:flex; align-items:center; height:56px; padding-right:24px;}
.input-function-group.textarea {top:auto; bottom:0; height:auto; margin:0 0px 24px 0;}

.form-icon-input {position:relative;}
.form-icon-input .form-input {padding-left:58px;}
.form-icon-input .form-input.fill + .form-label-icon .icons .off {opacity:0;}
.form-icon-input .form-input.fill + .form-label-icon .icons .on {opacity:1;}

.form-label-icon {position:absolute; top:0; left:0; display:flex; height:56px; align-items:center; justify-content:center; z-index:15;}
.form-label-icon .icons {position:relative;display:block; width:24px; height:24px; margin-left:32px;}
.form-label-icon .icons .off {position:absolute; top:0; left:0; width:100%; height:100%; opacity:1; transition:opacity 0.2s ease; z-index:0;}
.form-label-icon .icons .on {position:absolute; top:0; left:0; width:100%; height:100%; opacity:0; transition:opacity 0.2s ease; z-index:1;}

/* 입력 + 라벨형 */
.input-limit-text {display:flex;}
.form-text-label {}

/* 입력 + 버튼형 */
.input-function-group .input-limit-text + .input-ui {margin-left:8px;}

.item-detail .btn-visibility .icon-visibility-off-gray {display:block;}
.item-detail .btn-visibility .icon-visibility-gray {display:none;}
.item-detail.pw-visible .btn-visibility .icon-visibility-off-gray {display:none;}
.item-detail.pw-visible .btn-visibility .icon-visibility-gray {display:block;}

.item-detail .item-detail-data {position:relative;}

/* 검색 인풋박스 */
.form-input-search {position:relative;}
.form-input-search .input-value {width:100%;}
.form-input-search .input-value input {height:64px; padding:0 34px 0 0; border-bottom:2px solid #252525; border-radius:0; border-top:none; border-right:none; border-left:none;}
.form-input-search .input-ui {position:absolute; right:0; top:0; height:100%;}
.form-input-search .input-ui button {height:100%;}

.form-input-search .input-value.actived input {border-bottom-color:#3361cd;}

/* 입력 영역 그룹 */
.form-wrap + .form-wrap {margin-top:48px;}
.form-data-header {display:flex;}
.form-data-header > .item-right {margin-left:auto;}
.form-data-header .form-data-info + .form-data-title {margin-top:32px;}
.form-data-header .form-data-info .font-color-util-needs {margin:5px 4px 0 0;}
.form-data-header h3.form-data-title {font-size:24px; font-weight:700;}
.form-data-header h3.form-data-title + .form-data-info {margin-top:16px;}

.form-data-header + .form-data-body {margin-top:32px;}
.form-data-body + .form-data-footer {margin-top:20px;}

/* 입력 영역 그룹 > 그리드 */
.form-group .grid-layout-inner {margin:-16px -24px;}
.form-group .grid-layout-cell {padding:16px 24px;}
.form-group .grid-layout-cell .item-body.align-center {display:flex; align-items:center; min-height:56px;}

/* 데이트 피커 */
.form-range-group {display:flex; align-items:center;}
.form-range-group .form-range-input input:read-only {background-color:#fff;}
.form-range-group .form-cell-char {margin:0 4px;}

.form-range-input {position:relative; display:flex; align-items:center;}
.form-range-input > input {padding-right:50px;}
.form-range-input > input:read-only {background-color:#fff; color:#666; border-color:#c9c9c9;}
.form-range-input > img {position:absolute; top:0; right:0; width:24px; height:24px; margin:16px 16px 0 0; cursor:pointer; z-index:15;}
.form-range-input > .input {position:relative; width:100%;}
.form-range-input > input.v-datepicker{background:url(../images/icon/icon-datepicker-ui-thumb.png) right 13px top 13px no-repeat; background-size:24px auto;}
.form-date-cell.form-date-sm {flex:0 0 auto; width:194px;}

/* 데이트 피커 */
.form-date-input {position:relative; display:flex; align-items:center;}
.form-date-input > input {padding-right:50px;}
.form-date-input > img {position:absolute; top:0; right:0; width:24px; height:24px; margin:13px 13px 0 0; cursor:pointer; z-index:15;}
.form-date-input > .input {position:relative; width:100%;}
.form-date-input > input.v-datepicker{background:url(../images/icon/icon-datepicker-ui-thumb.png) right 13px top 13px no-repeat; background-size:24px auto;}


/* 데이트 피커 > small */
.form-range-group.small .form-range-input > input {height:48px; padding:0 45px 0 25px;}
.form-range-group.small .form-range-input > img {margin:12px 15px 0 0;}

/* 달력 > 제이쿼리 > 입력박스형(기본) */
.ui-widget {font-family:'Pretendard' , sans-serif;}
.ui-datepicker {position:relative; min-width:264px; padding:70px 20px 20px; margin:8px 0 0; text-align:center; background:#fff;border:1px solid #C9C9C9; border-radius:12px; box-shadow:0px 8px 8px 0 rgba(0, 0, 0, 0.05); box-sizing:border-box; z-index:100 !important;}
.ui-datepicker .ui-datepicker-header {position:absolute; top:0; left:0; display:flex; width:100%; height:56px; margin:0; padding:0 74px; border:none; border-bottom:2px solid #f6f6f6; background:none;  box-sizing:border-box;  border-radius:0;}
.ui-datepicker .ui-datepicker-title {display:flex; align-items:center; justify-content:center; width:100%; margin:0; font-size:15px; color:#252525; font-weight:500; line-height:1.5;}
.ui-datepicker .ui-datepicker-title .ui-datepicker-year,
.ui-datepicker .ui-datepicker-title .ui-datepicker-month {display:inline-flex;}
.ui-datepicker .ui-datepicker-title select.ui-datepicker-year {width:auto; height:auto; padding:0 24px 0 0; margin:0; border:none; background-position:right center;}
.ui-datepicker .ui-widget-header .ui-icon {background:none;font-size:0}
.ui-datepicker .ui-datepicker-prev {position:absolute; top:0; left:0; width:74px; height:100%; display:flex; align-items:center; justify-content:center; background:none; outline:none; border:none;}
.ui-datepicker .ui-datepicker-prev > .ui-icon {position:relative; top:auto; left:auto; right:auto; bottom:auto; display:block; margin:0; width:24px; height:24px; font-size:0; background:url(../images/icon/icon-datepicker-ui-prev.png) center center no-repeat; background-size:24px auto;}
.ui-datepicker .ui-datepicker-next {position:absolute; top:0; right:0; width:74px; height:100%; display:flex; align-items:center; justify-content:center; background:none; outline:none; border:none;}
.ui-datepicker .ui-datepicker-next > .ui-icon {position:relative; top:auto; left:auto; right:auto; bottom:auto; display:block; margin:0; width:24px; height:24px; font-size:0; background:url(../images/icon/icon-datepicker-ui-next.png) center center no-repeat; background-size:24px auto;}
.ui-datepicker table.ui-datepicker-calendar {margin:0; font-size:0; table-layout:fixed;}
.ui-datepicker table.ui-datepicker-calendar > thead + tbody {margin-top:8px;}
.ui-datepicker table.ui-datepicker-calendar > thead > tr > th {padding:4px; height:24px; font-size:13px; font-weight:500; color:#252525; line-height:1; vertical-align:middle;}
.ui-datepicker table.ui-datepicker-calendar > tbody > tr > td {padding:4px; height:24px; font-size:13px; font-weight:500; color:#000; line-height:1; vertical-align:middle;}
.ui-datepicker .ui-state-disabled .ui-state-default {color:#A5A5A5; opacity:1;}
.ui-datepicker .ui-state-default{display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; padding:0 !important; margin:auto; font-size:13px; color:#000; text-align:center !important; line-height:1; border-radius:50%; border:none !important; background:#fff !important;}
.ui-datepicker table.ui-datepicker-calendar > tbody > tr:nth-of-type(1) > td > .ui-state-default {margin-top:8px;}
.ui-datepicker .ui-datepicker-current-day .ui-state-default{background:#3361cd !important; color:#fff !important; font-weight:500 !important;}
.ui-datepicker .ui-datepicker-today .ui-state-default{background:#f2f5fc !important; color:#000000 !important; font-weight:500 !important;}

/* form-mulity-check-group */
.form-mulity-check-group .form-mulity-check-items + .form-mulity-check-items {margin-top:16px;}
.form-mulity-check-group .form-mulity-check-items .form-check-box + .form-check-group {margin-top:8px;}

.form-check-group.check-card-type .grid-layout-inner {margin:-16px -24px;}
.form-check-group.check-card-type .grid-layout-cell {padding:16px 24px;}

/* ===========================
	컨텐츠
=========================== */
/* form-agree-group */
.grid-layout + .form-agree-group {margin-top:48px;}
.form-agree-group h4 {font-size:24px; font-weight:700; line-height:36px;}
.form-agree-group h4 + .form-agree-detail {margin-top:24px;}
.form-agree-detail {padding:24px 30px; color:#c9c9c9; border:1px solid #c9c9c9; border-radius:12px; background-color:#fff;}
.form-agree-detail .detail {color:#808080; font-weight:400;}
.form-agree-detail .detail .text + .text {margin-top:24px;}
.form-agree-detail .detail + .info-table-wrap {margin-top:16px;}
.form-agree-detail .info-table-wrap .info-table-body .table-data table > thead > tr > th {background-color:#f6f6f6;}
.form-agree-detail .info-table-wrap + .symbol-text-list {margin-top:16px;}
.form-agree-detail + .form-agree-check {margin-top:16px;}
.form-agree-check .form-agree-item {display:flex; align-items:center;}
.form-agree-check .form-agree-item .item-title {flex:0 0 auto; font-size:18px; font-weight:600;}
.form-agree-check .form-agree-item .item-ui {margin-left:auto; font-size:18px; font-weight:500; line-height:22px; color:#333;}
.form-agree-group .font-color-util-error {display:flex; font-size:14px; color:var(--color-200); line-height:23px;}
.form-agree-group .font-color-util-error .icon-util-error-red {margin-right:8px;}

.form-agree-group .form-agree-info .symbol-text-list {margin-top:6px;}
.form-agree-group .form-agree-info .symbol-text-list .symbol-text-item {font-size:14px; line-height:22px; color:#808080;}
.form-agree-group .form-agree-info .symbol-text-list .symbol-text-item.circle:before {width:3px; height:3px; background-color: #808080;}
.form-agree-group .item-input-valid {margin-top:6px;}

/* dropzone */
.dropzone-file-area .dropzone {position:relative; min-height:0; border:none; padding:0; border:1px dashed #c9c9c9; border-radius:12px;}
.dropzone-file-area .dropzone.dz-max-files-reached {background:#fafafa;}
.dropzone-file-area .dropzone.dz-max-files-reached .dz-full-message {display:flex;}
.dropzone-file-area .dropzone.dz-max-files-reached .dz-message {display:none;}

.dropzone-file-area .dropzone .dz-message {margin:0;}
.dropzone-file-area .dropzone .dz-full-message {display:none; width:100%; align-items:center; justify-content:center; flex-direction:column; padding:20px; text-align:center; font-size:16px; min-height:80px; color:#999;}
.dropzone-file-area .dropzone .dz-message .dz-button {position:relative; display:inline-flex; width:100%; height:80px; align-items:center; justify-content:center; text-align:center; color:#666;}
.dropzone-file-area .dropzone .dz-message .dz-button:before {content:''; position:absolute; left:auto; top:50%; width:24px; height:24px; background:url(../images/icon/icon-add-circle-outline-gray.png) no-repeat center center; background-size:24px; transform:translate(-176px ,-50%);}
.dropzone-file-info {margin-top:8px; font-size:14px; color:#666;}
.dropzone-file-preview {}

.dropzone-file-row {width:100%; margin-top:24px;}
.dropzone-file-row + .dropzone-file-row {margin-top:4px;}
.dropzone-file-items {position:relative; display:flex; align-items:center; width:100%; padding:12px 24px 12px 56px; font-size:15px; line-height:24px; color:#a5a5a5; border-radius:12px; background-color:#f6f6f6; box-sizing:border-box;}
.dropzone-file-items:before {content:''; position:absolute; left:0; display:block; width:24px; height:24px; margin-left:24px; background:url(../images/icon/icon-attach-file-gray.png) no-repeat left center; background-size:24px; opacity:1;}
.dropzone-file-items:after {content:''; position:absolute; left:0; display:block; width:24px; height:24px; margin-left:24px; background:url(../images/icon/icon-attach-file-blue.png) no-repeat left center; background-size:24px; opacity:0;}
.dropzone-file-items .item-thumb {}
.dropzone-file-items .item-info {display:inline-flex; align-items:center;}
.dropzone-file-items .item-info .item-name {display:inline-block; max-width:800px; text-overflow:ellipsis; overflow:hidden; white-space:nowrap;}
.dropzone-file-items .item-info .item-size {position:relative; margin-left:12px; padding-left:12px; white-space:nowrap; color:#a5a5a5;}
.dropzone-file-items .item-info .item-size:before {content:''; position:absolute; left:0; top:50%; width:1px; height:16px; margin-top:-8px; background-color:#a5a5a5;}
.dropzone-file-items .item-info .item-download {padding-left:8px; color:#6993FF} 
.dropzone-file-items .item-ui {flex:0 0 auto; margin-left:auto;}
.dropzone-file-items .btn-file-remove {width:24px; height:24px; font-size:0px; border:0; background:url(../images/icon/icon-clear-gray-24.png) no-repeat center center; background-color:transparent; background-size:24px auto;}

.dropzone-file-items:hover {color:#808080; background-color:#e6ecf9;}
.dropzone-file-items:hover:before {opacity:0;}
.dropzone-file-items:hover:after {opacity:1;}
.dropzone-file-items:hover .item-size {color:#808080;}

.table-horizontal .dropzone-file-items {color:#4d4d4d;}
.table-horizontal .dropzone-file-items .item-download {color:#4d4d4d;}

/* board-search-wrap */
.board-search-wrap {padding:52px 48px; border:1px solid #c9c9c9; border-radius:12px; box-sizing:border-box;}
.board-search-wrap .form-group .grid-layout-inner {margin:-16px -24px;}
.board-search-wrap .form-group .grid-layout-cell {padding:16px 24px;}
.board-search-wrap .form-input-items .item-header {width:100px;}
.board-search-wrap .form-input-items .item-body .input-value select {height:48px; line-height:46px;}
.board-search-wrap .form-input-items.horizontal .form-btns-input {display:flex; align-items:center;}
.board-search-wrap .form-input-items.horizontal .form-btns-input .input-value {flex:auto;}
.board-search-wrap .form-input-items.horizontal .form-btns-input .input-value + .input-ui {flex:0 0 auto; margin-left:8px;}

.board-search-wrap.size-lg {padding:8px 0px;}
.board-search-wrap.size-lg .form-input-items .item-header {width:118px;}
.board-search-wrap.size-lg .form-group > .form-data-body > .grid-layout > .grid-layout-inner {margin:0;}
.board-search-wrap.size-lg .form-group > .form-data-body > .grid-layout > .grid-layout-inner > .grid-layout-cell {padding:24px 48px;}
.board-search-wrap.size-lg .form-group > .form-data-body > .grid-layout > .grid-layout-inner > .grid-layout-cell + .grid-layout-cell {border-top:1px solid #ededed;}
.board-search-wrap.size-lg .form-input-items.horizontal {align-items:flex-start;}
.board-search-wrap.size-lg .form-input-items.horizontal > .item-body {display:flex;}
.board-search-wrap.size-lg .form-input-items.horizontal > .item-body .item-detail + .item-detail {margin-left:8px;}
.board-search-wrap.size-lg .form-input-items .item-detail {min-height:0;}
.board-search-wrap.size-lg .form-group .form-check-group .grid-layout-inner {margin:-10px -16px;}
.board-search-wrap.size-lg .form-group .form-check-group .grid-layout-cell {padding:10px 16px;}