@charset "utf-8";
/* 
=========================================================
* fileName     : element.css
* project      : 2025-deltaindex-homepage
* author       : 빈다예
* description  : -
----------------------------------------------------------
* DATE          AUTHOR      DESCRIPTION
* 2025.01.01	빈다예		최초 생성
* 2025.05.09	이채연		버튼 호버 스타일 추가
* 2025.06.26	이채연		reset style 이동
=========================================================
*/

/*======== color variation ========*/
:root {
	--main-color-200: #2FC1FF;
	--main-color-300: #1994CD;
	--main-color-500: #2E377C;
	--main-color-600: #1D2036;
	
	--main-color-red: #EC3E4C;
	--main-color-yellow: #FFC659;
	
	--status-success: #40CE90;
	--status-warning: #FFA033;
	--status-error: #F82C53;
	
	--color-white : #ffffff;
	--color-gray : #eaeaea;
	--color-black: #222222;
	
	/*유지보수를 위해 보더컬러 분리 */
	--border-color-100: #828282; 
	
	--font-color-100: #828282; /* default */
	--font-color-200: #333333
}

/*flex*/
.flex{display: -webkit-box;display: -moz-box;display: -ms-flexbox;display: flex;}
.flex-row{-webkit-box-orient: horizontal;-moz-flex-direction: row;-ms-flex-direction: row;flex-direction: row;}
.flex-column{-webkit-box-orient: vertical;-moz-flex-direction: column;-ms-flex-direction: column;flex-direction: column;}
.flex-wrap{-webkit-box-lines: multiple;-moz-flex-wrap: wrap;-ms-flex-wrap: wrap;flex-wrap: wrap;}
.flex-nowrap {-ms-flex-wrap: nowrap !important;flex-wrap: nowrap !important;}
.justify-content-center {-ms-flex-pack: center !important;justify-content: center !important;}
.justify-content-between {-ms-flex-pack: justify !important;justify-content: space-between !important;}
.align-items-center {-ms-flex-align: center !important;align-items: center !important;}
.flex + .flex {margin-top: 12px;}

/* font */
.font--pre{
    font-family: 'Pretendard';
}

/* button */
[class^="btn"], .btn, div.btn, button.btn{
	width: fit-content;
	background-color: transparent;
	border: none;
	font-weight: 400;
	text-align: center;
	line-height: 100%;
	margin-left: 6px;
	float: left;
	transition: 0.15s;
	cursor: pointer; 
}
.btn span{
	display: inline-block;
	font-weight: inherit;
	vertical-align: middle;
	font-size: inherit;
	color: inherit;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
.page-button{
	width: 100%;
	text-align: center;
	display: inline-block;
	margin: 6px 0;
	position: relative;
}
.page-button-left{float: left;}
.page-button-right{float: right;}
.page-button-center{width: fit-content; margin: 0 auto;}
:where(.page-button-left, .page-button-right, .page-button-center) > .btn:first-child{margin-left: 0;}

.btn--large{
    font-size: 2.2rem;
    padding: 2.2rem 2.4rem;
    min-width: 14.4rem; /* 모바일 기준까지 합쳐서 */
    height: 7rem;
	font-weight: 600 !important;
}
.btn--medium{
    font-size: 2rem;
    padding: 2rem 1.6rem;
    min-width: 10rem; /* 모바일 기준까지 합쳐서 */
    height: 6rem;
	font-weight: 600 !important;
}
@media all and (max-width: 480px){
	.btn--large{
		font-size: 3.2rem;
		padding: 2rem 3rem;
		min-width: 20rem;
		height: 8rem;
	}
	.btn--medium{
		font-size: 3.2rem;
		padding: 2rem 3rem;
		min-width: 20rem;
		height: 9rem;
	}
}

.btn.btn--main{
	background-color: var(--color-black);
	color: var(--color-white);
}
.btn.btn--sub{
	background-color: var(--main-color-200);
	color: var(--color-white);
}
.btn.btn--sub:hover{
	background-color: var(--main-color-300);
}
.btn.btn--sub2{
	background-color: var(--main-color-600);
	color: var(--color-white);
}
.btn.btn--sub3{
	border: 1px solid var(--color-black);
    color: var(--font-color-200);
}
.btn.btn--sub3:hover{
	background-color: var(--color-gray);
}
.btn.btn--sub4{
	background-color: var(--main-color-500);
    color: var(--color-white);
}
.btn.btn--red {
	background-color: var(--main-color-red);
	color: var(--color-white);
}

/* field */
input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button{
	-webkit-appearance: none;
	margin: 0;
}
input[type="number"]{
    appearance: textfield;
	-moz-appearance: textfield;
}
.input-field, textarea{
	width: 100%;
	border: 1px solid #D9D9D9;
	color: #000;
	font-size: 1.8rem;
	padding: 1.2rem;
	margin: 6px 0;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
textarea{
	height: 40.2rem;
	resize: vertical;
}
.input-field::placeholder, textarea::placeholder{
	color: #828282;
}
.input-field:focus, textarea:focus{
	outline: none;
	border: 1px solid #1994CD;
}
.input-field:read-only, textarea:read-only{
	border: 1px solid #828282;
	background: #e5e5e5;
	color: #000;
}
select{
	width: 12rem;
	min-width: fit-content;
	border: 1px solid #D9D9D9;
	font-size: 1.8rem;
	padding: 1.2rem;
	margin: 6px 0;
}
select:focus{
	outline: none;
	border: 1px solid #1994CD;
}
option[value="option-holder"][disabled]{
	display: none;
	color: lightgray;
}
select{
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	background: url('../../../image/delta/app/select_button-1.png') no-repeat top 50% right 1.2rem / 1.8rem #FFF;	/* 주석 참고 : 이미지 url 경로 확인 */
	/* 화살표의 right margin = select 박스의 right padding. 이미지 크기는 select의 폰트 사이즈 */
	font-family: 'SCoreDream';
	font-size: 1.6rem;
}

/* 파일 첨부 api */
.k-upload.k-header{
    width: 100%;
    height: calc(3.6rem + 1rem + 15rem);
    border: 0;
    position: relative;
}
.k-upload .k-upload-button{
    width: 100%;
    height: 100%;
    display: block;
    border: 0;
    padding: 0;
    position: absolute;
    top: 0;
    left: 0;
}
.k-upload .k-upload-button:hover{
    background-color: transparent;
    background-image: none;
}
.dropZoneElement{
    width: 100%;
    height: 15rem;
    background-color: #F7F8FF;
    border: 1px solid #D9D9D9;
    display: block;
    position: absolute;
    top: 4.6rem;
    margin-top: 20px;
    margin-bottom: 20px;
}
.dropZoneElement::after{
    display: block;
    content: '여기에 파일을 드래그 앤 드롭하세요.';
    position: absolute;
    font-size: 1.6rem;
    color: #828282;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.att_dropZoneElement{
    width: 100%;
    height: 15rem;
    background-color: #F7F8FF;
    border: 1px solid #D9D9D9;
    display: block;
    position: absolute;
    top: 4.6rem;
    margin-top: 20px;
    margin-bottom: 20px;
}
.att_dropZoneElement::after{
    display: block;
    content: '여기에 파일을 드래그 앤 드롭하세요.';
    position: absolute;
    font-size: 1.6rem;
    color: #828282;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.popup_dropZoneElement{
    width: 100%;
    height: 15rem;
    background-color: #F7F8FF;
    border: 1px solid #D9D9D9;
    display: block;
    position: absolute;
    top: 4.6rem;
    margin-top: 20px;
    margin-bottom: 20px;
}
.popup_dropZoneElement::after{
    display: block;
    content: '여기에 파일을 드래그 앤 드롭하세요.';
    position: absolute;
    font-size: 1.6rem;
    color: #828282;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.k-upload-button input{
    width: 100%;
    height: 100%;
}
:where([id*="-upload-field"], [id*="_file_id"]) + span{
    display: block;
    width: 11.2rem;
    height: 3.6rem;
    background-color: #2FC1FF;
    font-size: 1.6rem;
    font-weight: 500;
    color: #FFFFFF;
    line-height: 100%;
    padding: 10px 2.4rem;
    position: absolute;
    top: 0;
    left: 0;
}
.fileupload-guide-text{
    font-size: 1.6rem;
    color: #828282;
    position: absolute;
    top: calc(1.8rem - 1.1rem);
    left: 12.4rem;
}
.k-upload .k-upload-files{
    width: 100%;
    height: calc(100% - 3.6rem - 1rem);
    border: 1px solid #D9D9D9;
    padding: 10px;
    overflow-y: auto;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 1;
}
.k-upload .k-upload-files::-webkit-scrollbar-track{
	background-color: #D9D9D9;
}
.k-upload .k-upload-files::-webkit-scrollbar{
	width: 6px; 
}
.k-upload .k-upload-files::-webkit-scrollbar-thumb{
	height: auto;
	background-color: #929292;
	border-radius: 3px;
}
.k-upload .k-upload-files .k-file{
    height: 4rem;
    background-color: #F6F6F6;
    padding: 5px 10px;
    border: 1px solid #D9D9D9;
    margin: 5px 0;
}
.k-upload .k-upload-files .k-file-extension-wrapper{
    width: 3rem;
    height: unset;
    background: url('../../../image/delta/app/file.png') no-repeat center / 100%;
    aspect-ratio: 1 / 1;
    border: 0;
    margin: 0;
}.k-upload .k-upload-files .k-file-extension-wrapper::before, .k-upload .k-upload-files .k-file-extension{
    display: none;
}
.k-upload .k-upload-files .k-file-extension-wrapper, .k-upload-status{
    position: unset;
}
.k-upload .k-upload-files .k-file-name-size-wrapper{
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-left: 6px;
    margin-right: 3rem;
}
.k-upload .k-upload-files .k-file-name{
    font-size: 1.6rem;
}
.k-upload .k-upload-files .k-file-size{
    font-size: 1.2rem;
    color: #5394C4;
}
.k-upload .k-upload-files .k-upload-status{
    width: 1.8rem;
    height: unset;
    aspect-ratio: 1 / 1;
    position: unset;
}
.k-upload .k-upload-files .k-upload-status .k-button{
    width: 100%;
    margin: 0;
}
.k-upload .k-upload-files .k-upload-status .k-icon{
    width: 100%;
    position: relative;
}
.k-i-x::before{
    display: block;
    content: '';
    width: 100%;
    aspect-ratio: 1 / 1;
    background: url('../../../image/delta/app/file_delete.png') no-repeat center / 100%;
    position: absolute;
    top: 0;
    left: 0;
    cursor: pointer;
}

/* table */
.table{
	width: 100%;
	border-top: 1px solid #D9D9D9;
    border-bottom: 1px solid #D9D9D9;
}
.row{
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}
.row th{
	border-bottom: 1px solid #EEEEEE;
	display: flex;
	align-items: center;
}
.row td{
	border-bottom: 1px solid #EEEEEE;
}
.row.border-none th, 
.row.border-none td {
	border-bottom: 0;
}
.row:last-of-type :where(th, td){
	border-bottom: 0;
}
[class*="col-"]{
    position: relative;
    width: 100%;
}
.col-1{
    -ms-flex: 0 0 8.333333%;
    flex: 0 0 8.333333%;
    max-width: 8.333333%;
}
.col-2{
    -ms-flex: 0 0 16.666667%;
    flex: 0 0 16.666667%;
    max-width: 16.666667%;
}
.col-3{
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
}
.col-4{
    -ms-flex: 0 0 33.333333%;
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
}
.col-5{
    -ms-flex: 0 0 41.666667%;
    flex: 0 0 41.666667%;
    max-width: 41.666667%;
}
.col-6{
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
}
.col-7{
    -ms-flex: 0 0 58.333333%;
    flex: 0 0 58.333333%;
    max-width: 58.333333%;
}
.col-8{
    -ms-flex: 0 0 66.666667%;
    flex: 0 0 66.666667%;
    max-width: 66.666667%;
}
.col-9{
    -ms-flex: 0 0 75%;
    flex: 0 0 75%;
    max-width: 75%;
}
.col-10{
    -ms-flex: 0 0 83.333333%;
    flex: 0 0 83.333333%;
    max-width: 83.333333%;
}
.col-11{
    -ms-flex: 0 0 91.666667%;
    flex: 0 0 91.666667%;
    max-width: 91.666667%;
}
.col-12{
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
}



/* column type table */
/* 표 전체 영역 상하 선 */
.k-grid{
	border: 0;
}
/* 표 헤더 배경 및 우측 패딩 삭제 */
.k-grid-header{ 
	background-color: #2E377C;
	padding-right: 0 !important;
}

.k-grid-footer-wrap, .k-grid-header-wrap{ border-width: 0; }
.k-grid-header thead th:not(:nth-of-type(3)){ text-align: center; }
.k-grid-header thead th:nth-of-type(3){ padding-left: 2.4rem; }

.k-grid-header th{
	font-size: 2rem;
	font-weight: 500;
	color: #FFFFFF;
}

.k-grid-header thead th:not(:first-of-type){
	border-left-width: 2px;
	border-left-color: rgba(255, 255, 255, 0.20);
}

/* 편집 가능 테이블 내부 입력 박스 UI */
.k-grid-edit-row .k-button, .k-grid-edit-row .k-input.k-textbox, .k-grid-edit-row .k-textbox, .k-grid-edit-row .k-widget {
    font-size: 1.6rem;
    height: 4.8rem;
    width: 100%;
}

/* td, th 스타일 변경 */
.k-grid td, .k-grid th {
    padding: 9px 16px;
    font-size: 1.8rem;
}
.k-grid td {
    color: #333;
}
.k-grid-header .k-header>.k-link {
    font-size: inherit;
}

/* 표 전체 열 경계선 색상 */
.k-filter-row>td, .k-filter-row>th, .k-grid td, .k-grid-content-locked, .k-grid-footer, .k-grid-footer-locked, 
.k-grid-footer-wrap, .k-grid-header, .k-grid-header-locked, .k-grid-header-wrap, .k-grouping-header, 
.k-grouping-header .k-group-indicator, .k-header{
	border-color: rgba(46, 55, 124, 0.30);
}
.k-grid tbody td{
	border-left: 0;
}
/* 표 내용 영역 배경색 및 우측 스크롤 영역 삭제 */
.k-grid-content{ 
	background-color: #ffffff;	/* 짝수행 배경색과 일치 */
	overflow-y: auto;
}
/* 짝수행 배경색 */
.k-grid tr.k-alt{ background-color: #ffffff; }
/* 오름차순 내림차순 정렬 시에도 배경색 유지 */
col.k-sorted{ background-color: #ffffff; }

/* 행 구분선 */
.k-grid tbody tr:not(:last-of-type) td{
	border-bottom: 1px solid rgba(46, 55, 124, 0.30);
}
/* 행에 호버 시 행 배경색 변경 */
.k-grid tbody tr:hover{
	background-color: #F1F2FF;
}

/* 체크/선택된 행의 배경색 변경 */
.k-grid tr.k-state-selected>td{
	background-color: #D9DCF5;
	color: #121212;
}

/* 제목 셀들의 여백 */
.k-grid-content tbody td:nth-of-type(3){
	padding-left: 2.4rem;
}

/* 표 페이징 스타일 */
.k-pager-wrap{
	background-color: #FFFFFF;
	border-top-color: #2E377C;
	justify-content: center;
	padding-top: 3rem;
}
.k-pager-numbers .k-state-selected{
	background-color: transparent;
	color: #121212;
	border: 1px solid #2E377C;
	border-radius: 2px;
}
.k-pager-numbers .k-link{ color: #121212; }
.k-pager-numbers .k-link:hover{
	color: #121212;
}
.k-pager-wrap .k-pager-info{
	display: none;
}


/* common_style (2025.01.23 추가 (beendy))*/
.visual__contents-inner{
	overflow: hidden;
}
.one-link::after {
	display: none;
}

/* guide */
.guide-text { line-height: 140%; }
.guide-text * { vertical-align: baseline; }
.guide-text b { font-weight: 600; }
.guide-text em { font-weight: 600;color: #EC3E4C; }

/* checkbox & radio */
.checkbox-field, .radio-field {
    display: inline-block;
    position: relative;
    margin-right: 3.6rem;
    margin-bottom: 0.3rem;
    margin-top: 0.3rem;
}
.checkbox-field:last-child, .radio-field:last-child{
	margin-right: 0;
}
input[type="checkbox"].checkbox, input[type="radio"].radio {
    appearance: none;
    width: 0;
    height: 0;
    position: absolute;
    top: 0;
    left: 0;
}
.checkbox-shape, .radio-shape{
	position: relative;
	display: inline-block;
	vertical-align: middle;
	width: 18px;
	height: 18px;
	border: 1px solid #000;
	background: #fff;
	margin-right: 0.6rem;
}
.checkbox-shape{
	border-radius: 3px;
}
.radio-shape{
	border-radius: 50%;
}
.checkbox:checked + .checkbox-shape,
.radio:checked + .radio-shape {
    border: 1px solid transparent;
    background: #1994CD;
}
.checkbox:checked + .checkbox-shape::before,
.checkbox:checked + .checkbox-shape::after,
.radio:checked + .radio-shape::before,
.radio:checked + .radio-shape::after{
	content: '';
	display: block;
	background: #fff;
	position: absolute;
}
.checkbox:checked + .checkbox-shape::before,
.radio:checked + .radio-shape::before {
	width: 3px;
	height: 7px;
	border-radius: 7px;
	transform: rotate(-40deg);
	top: 6px;
	left: 4px;
}
.checkbox:checked + .checkbox-shape::after,
.radio:checked + .radio-shape::after {
    width: 3px;
    height: 10px;
    border-radius: 10px;
    transform: rotate(40deg);
    top: 3px;
    right: 5px;
}
.checkbox-label_nm, .radio-label_nm{ user-select: none; }
.checkbox-field .guide-text, .radio-field .guide-text {
    color: #828282;
    display: inline-block;
    vertical-align: baseline;
    margin: 6px 20px;
}

/* modal */
.k-window {
    border-color: transparent;
    color: #333;
    border-radius: 10px;
}
.k-window .k-header.k-window-titlebar {
    background: #2e377c;
    color: #fff;
    padding: 1.2rem 2.4rem;
    border-radius: 10px 10px 0 0;
}
.k-window .k-header .k-window-title {
    font-size: 2rem;
    font-weight: 500;
    line-height: 150%;
}
.k-window .k-header .k-button {
    border: none;
    box-shadow: none;
    padding: 0;
    color: #fff;
    background: transparent;
}
.k-window .k-header .k-button.k-state-hover {
    background: transparent;
    color: #EC3E4C;
}
.k-window .k-header .k-button .k-i-close {
    font-size: 2.4rem;
    color: inherit;
}
.k-window-content {
    padding: 0;
}
.modal-body {
    padding: 2.4rem;
}
.modal-footer {
    padding: 2rem 2.4rem;
    border-top: 1px solid #d9d9d9;
}
.modal-footer .btn {
    min-width: 12rem;
}

/* search form */
.search-form{
    display: flex;
    align-items: center;
}
.search-form_select{
    margin-right: 6px;
}
.search-form_wrap{
    width: 48rem;
    height: 5.067rem;
    margin: 6px 0;
    position: relative;
}
.search-form_wrap > *{
    position: absolute;
}
.search-form_wrap .search-form_search{
    margin: 0;
}
input::-ms-clear, input::-ms-reveal{
	display:none;
    width:0;
    height:0;
}
input::-webkit-search-decoration,
input::-webkit-search-cancel-button,
input::-webkit-search-results-button,
input::-webkit-search-results-decoration{
	display:none;
}
.search-line{
    width: 2px;
    height: 20px;
    background-color: #828282;
    top: 50%;
    transform: translateY(-50%);
    right: 4.8rem;
}
.search-icon{
    width: 2.4rem;
    aspect-ratio: 1 / 1;
    background: url('../../../image/delta/app/search-1.png') no-repeat center / 100%;
    top: 50%;
    transform: translateY(-50%);
    right: 1.2rem;
}
.search-form_search:focus + .search-line{
    background-color: #1994CD;
}
.search-form_search:focus ~ .search-icon{
    background: url('../../../image/delta/app/search-2.png') no-repeat center / 100%;
}
.section_table-top .search-form ~ .page-button{
    width: auto;
}

/* 250526 leecy */
/* guide텍스트와 함께 사용하는 input-form */
.input-form.with-guide {
	display: flex;
	flex-direction: column;
}
.input-guide {
	display: none; /*default*/
	font-size: 1.2rem;
	font-weight: 500;
	line-height: 1;
}
.input-guide.is-error {
	color: var(--status-error);
}
.input-guide.is-success {
	color: var(--status-success);
}
.input-guide::before {
	content: '';
	display: inline-block;
	width: 1.6rem;
	height: 1.6rem;
	margin-right: .2rem;
	vertical-align: sub;
}
.input-guide.is-error::before {
	background: url('../../../image/delta/app/ico-error.png')no-repeat center/ cover;
}
.input-guide.is-success::before {
	background: url('../../../image/delta/app/ico-success.png')no-repeat center/ cover;
}
fieldset + .input-guide {
	margin-top: 1.2rem;
}