@import url(../font/pretendard.css);

*{
	box-sizing: border-box;
}

body{
	font-family: 'Pretendard';
	font-weight: 400;
	margin: 0;
	padding: 0;
	color: #171717;
	&.left-menu-off{
		.dworkNav{
			width: 0px;
		}
	}
}

body.iframeOpen{
	.dworkPopupBackground{
		opacity: 1;
		pointer-events: all;
		z-index: 95;
	}
	#tab-content{
		z-index: 99;
	}
}

.dworkPopupBackground{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.7);
	z-index: -1;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease;
}

button{
	cursor: pointer;
	&.front{
		font-size: 11px;
		font-weight: 700;
		line-height: 140%;
		letter-spacing: -0.02em;
		display: flex;
		align-items: center;
		width: fit-content;
		gap: 4px;
		height: 23px;
		padding: 0 12px;
		border-radius: 4px;
	}
	&.front.btn-common-submit{
		font-size: 11px;
		font-weight: 700;
		line-height: 140%;
		letter-spacing: -0.02em;
		display: flex;
		align-items: center;
		width: fit-content;
		gap: 4px;
		height: 23px;
		padding: 0 12px;
		border-radius: 4px;
		background-color: #2454A0;
		min-width: 0;					
	}
}

a{
	font: inherit;
	color: inherit;
	text-decoration: none;
}

.dworkGridLayout{
	display: grid !important;
	gap: 8px;
	width: 100%;
	&[data-column='1'] {
		grid-template-columns: repeat(1, minmax(0, 1fr));
	}

	&[data-column='2'] {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	&[data-column='3'] {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	&[data-column='4'] {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	&[data-column='5'] {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}

	&[data-column='6'] {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}

	&[data-column='7'] {
		grid-template-columns: repeat(7, minmax(0, 1fr));
	}

	&[data-column='8'] {
		grid-template-columns: repeat(8, minmax(0, 1fr));
	}

	&[data-column='9'] {
		grid-template-columns: repeat(9, minmax(0, 1fr));
	}

	&[data-column='10'] {
		grid-template-columns: repeat(10, minmax(0, 1fr));
	}

	&[data-column='11'] {
		grid-template-columns: repeat(11, minmax(0, 1fr));
	}

	&[data-column='12'] {
		grid-template-columns: repeat(12, minmax(0, 1fr));
	}
	
	&[data-row ='1'] {
		grid-template-rows: repeat(1, minmax(0, 1fr));
	}

	&[data-row ='2'] {
		grid-template-rows: repeat(2, minmax(0, 1fr));
	}

	&[data-row ='3'] {
		grid-template-rows: repeat(3, minmax(0, 1fr));
	}

	&[data-row ='4'] {
		grid-template-rows: repeat(4, minmax(0, 1fr));
	}

	&[data-row ='5'] {
		grid-template-rows: repeat(5, minmax(0, 1fr));
	}

	&[data-row ='6'] {
		grid-template-rows: repeat(6, minmax(0, 1fr));
	}

	&[data-row ='7'] {
		grid-template-rows: repeat(7, minmax(0, 1fr));
	}

	&[data-row ='8'] {
		grid-template-rows: repeat(8, minmax(0, 1fr));
	}

	&[data-row ='9'] {
		grid-template-rows: repeat(9, minmax(0, 1fr));
	}

	&[data-row ='10'] {
		grid-template-rows: repeat(10, minmax(0, 1fr));
	}

	&[data-row ='11'] {
		grid-template-rows: repeat(11, minmax(0, 1fr));
	}

	&[data-row ='12'] {
		grid-template-rows: repeat(12, minmax(0, 1fr));
	}	
	
	& + .dworkGridLayout{
		margin-top: 8px;
	}
	
	*[data-colspan='2'] {
		grid-column: span 2;
	}

	*[data-colspan='3'] {
		grid-column: span 3;
	}

	*[data-colspan='4'] {
		grid-column: span 4;
	}

	*[data-colspan='5'] {
		grid-column: span 5;
	}

	*[data-colspan='6'] {
		grid-column: span 6;
	}

	*[data-colspan='7'] {
		grid-column: span 7;
	}

	*[data-colspan='8'] {
		grid-column: span 8;
	}

	*[data-colspan='9'] {
		grid-column: span 9;
	}

	*[data-colspan='10'] {
		grid-column: span 10;
	}

	*[data-colspan='11'] {
		grid-column: span 11;
	}

	*[data-colspan='12'] {
		grid-column: span 12;
	}
}

.visibilityHidden{
	visibility: hidden;
}

.dworkFlexBox{
	display: flex;
	align-items: center;
}

.worldWrap{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	display: flex;
	align-items: stretch;
	background-color: #232325;
	padding: 12px;
	box-sizing: border-box;
}

.dworkNav{
	flex-shrink: 0;
	background: #232325;
	box-sizing: border-box;
	overflow: hidden;
	width: 230px;
	height: 100%;
	transition: width 0.3s ease;
}

.dworkNavContainer{
	display: flex;
	flex-direction: column;
	gap: 16px;
	width: 230px;
	height: 100%; 
}

.dworkNavTop{
	display: flex;
	flex-direction: column;
	gap: 14px;
	flex-shrink: 0;
	width: 100%;
	.logo{
		display: flex;
		align-items: center;
		width: 100%;
		height: 60px;
		box-sizing: border-box;
		padding-left: 8px; 
		img{
			width: 104.29px;
		}
	}
}

.dworkNavSwitch{
	display: flex;
	width: 100%;
	box-sizing: border-box;
	padding-left: 18.8px;
	.container{
		position: relative;
		display: flex;
		width: fit-content;
		box-sizing: border-box;
		padding: 5.2px;
		border-radius: 65.9px;
		background-color: #16171c;
		& > button{
			display: flex;
			justify-content: center;
			align-items: center;
			width: 80px;
			height: 40px;
			font-size: 13.87px;
			font-weight: 700;
			color: rgba(255,255,255,0.6);
			line-height: 100%;
			background: none;
			margin: 0;
			padding: 0;
			border: 0;
			z-index: 2;
			transition: color 0.2s ease;
			&.on{
				color: #FFF;
			}
		}
		&::after{
			content: '';
			position: absolute;
			top: 5.2px;
			left: 5.2px;
			z-index: 1;
			width: 80px;
			height: 40px;
			border-radius: 20px;
			background-color: #4C6FFF;
			border: solid 1px #6A87FF;
			transition: left 0.2s ease;
		}
		&:has(.import.on){
			&::after{
				left: 85.2px;
			}
		}
	}
	
}

.dworkNavMenus{
	display: flex;
	flex-direction: column;
	gap: 8px;
	width: 100%;
	flex-grow: 1;
	flex-basis: 0;
	overflow-y: hidden;
	scrollbar-color: black #232325;
	&:hover{
		overflow-y: auto;
	}
}

.dworkNavBottom{
	display: flex;
	flex-direction: column;
	gap: 24px;
	flex-shrink: 0;
	width: 100%;
	padding-right: 16px;
	box-sizing: border-box;
	.options{
		display: flex;
		flex-direction: column;
		gap: 4px;
		width: 100%;
		padding: 8px;
		box-sizing: border-box;
	}
}

.dworkNavBottomButton{
	display: flex;
	align-items: center;
	width: 100%;
	height: 44px;
	border-radius: 8px;
	gap: 12px;
	background-color: #3A3A3E;
	padding: 0 14px;
	margin: 0;
	border: 0;
	.dworkNavBottomButtonIcon{
		flex-shrink: 0;
		width: 19px;
	}
	.text{
		font-size: 14px;
		font-weight: 600;
		letter-spacing: -0.02em;
		line-height: 100%;
		color: #909090;
		flex-grow: 1;
		text-align: left;
	}
	.dworkNavBottomButtonArrow{
		width: 24px;
		height: 24px;
		flex-shrink: 0;
		cursor: pointer;
		background-image: url(../image/dworkIconArrowRight.svg);
		background-size: cover;
	}
	.icon{
		width: 19px;
		height: 19px;
		flex-shrink: 0;
		background-size: cover;
	}
	&.dworkBookmarkButton{
		.icon{
			background-image: url(../image/dworkIconStar.svg);
		}
		&.active{
			.icon{
				background-image: url(../image/dworkIconStarActive.svg);
			}
		}
	}
	&.dworkSettingButton{
		.icon{
				background-image: url(../image/dworkIconSetting.svg);
			}
			&.active{
				.icon{
					background-image: url(../image/dworkIconSettingActive.svg);
				}
			}
	}
	&.dworkAlarmButton{
		.icon{
				background-image: url(../image/dworkIconAlarm.svg);
			}
			&.active{
				.icon{
					background-image: url(../image/dworkIconAlarmActive.svg);
				}
			}
	}
}

.dworkNavBottomInfo{
	display: flex;
	flex-direction: column;
	width: 100%;
	box-sizing: border-box;
	padding: 0 12px;
	gap: 10px;
	
	.texts{
		display: flex;
		flex-direction: column;
		gap: 4px;
		width: 100%;
		.text01{
			font-size: 11px;
			font-weight: 500;
			line-height: 140%;
			letter-spacing: -0.02em;
			color: #FFF;
		}
		.copyright{
			font-size: 7px;
			font-weight: 400;
			line-height: 100%;
			letter-spacing: -0.02em;
			color: #909090;
		}
	}
}

.dworkNavBottomInfoTerms{
	font-size: 14px;
	font-weight: 600;
	line-height: 100%;
	letter-spacing: -0.02em;
	color: #909090;
	margin: 0;
	padding: 0;
	text-decoration: none;
}


.dworkNavMenusHome{
	margin: 0;
	text-decoration: none;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	height: 48px;
	box-sizing: border-box;
	padding: 10px 24px 10px 13px;
	
	.icon{
		flex-shrink: 0;
		width: 28px;
		height: 28px;
		background-size: cover;
		background-image: url(../image/Home.svg);
	}
	
	.name{
		flex-grow: 1;
		font-size: 14px;
		font-weight: 600;
		color: #FFF;
		line-height: 100%;
	}
	
	.arrow{
		width: 10px;
		height: 5px;
		background-image: url(../image/dworkNavArrow.svg);
		background-size: cover;
		transition: transform 0.3s ease;
	}
	&.current{
		height: 50px;
		background-color: #F7F7F7 !important;
		border-radius: 25px 0px 0px 25px;
		padding: 14px 24px 14px 16px;
		
		.icon{
			background-image: url(../image/HomeCurrent.svg);
		}
		
		.name{
			font-size: 16px;
			font-weight: 700;
			letter-spacing: -0.02em;
			color: #27282F;
		}
		
		.arrow{
			background-image: url(../image/dworkNavArrowBlack.svg);
		}
	}
}

.nav-dl{
	border-bottom: 0;
	
	&.open{
		.nav-dt{
			.arrow{
				transform: rotate(180deg);
			}
		}
	}
	
	&.active{
		.nav-dt{
			height: 50px;
			background-color: #F7F7F7 !important;
			border-radius: 25px 0px 0px 25px;
			padding: 14px 24px 14px 16px;
			
			.name{
				font-size: 16px;
				font-weight: 700;
				letter-spacing: -0.02em;
				color: #27282F;
			}
			
			.arrow{
				background-image: url(../image/dworkNavArrowBlack.svg);
			}
			
			&[data-code='M100']{
				.icon{
					background-image: url(../image/dworkNavIconM100Current.svg);
				}
			}
			&[data-code='M130']{
				.icon{
					background-image: url(../image/dworkNavIconM130Current.svg);
				}
			}
			&[data-code='M140']{
				.icon{
					background-image: url(../image/dworkNavIconM140Current.svg);
				}
			}
			&[data-code='M110']{
					.icon{
						background-image: url(../image/dworkNavIconM110Current.svg);
					}
				}
			&[data-code='M120']{
					.icon{
						background-image: url(../image/dworkNavIconM120Current.svg);
					}
				}
			&[data-code='M200']{
				.icon{
					background-image: url(../image/dworkNavIconM200Current.svg);
				}
			}
			&[data-code='M210']{
				.icon{
					background-image: url(../image/dworkNavIconM210Current.svg);
				}
			}
			&[data-code='M201']{
				.icon{
					background-image: url(../image/dworkNavIconM201Current.svg);
				}
			}
			&[data-code='M250']{
				.icon{
					background-image: url(../image/dworkNavIconM250Current.svg);
				}
			}
			&[data-code='M270']{
				.icon{
					background-image: url(../image/dworkNavIconM250Current.svg);
				}
			}
			&[data-code='M300']{
				.icon{
					background-image: url(../image/dworkNavIconM250Current.svg);
				}
			}
			&[data-code='M301']{
				.icon{
					background-image: url(../image/dworkNavIconM250Current.svg);
				}
			}
			&[data-code='M302']{
				.icon{
					background-image: url(../image/dworkNavIconM250Current.svg);
				}
			}
			&[data-code='M303']{
				.icon{
					background-image: url(../image/dworkNavIconM250Current.svg);
				}
			}
		}
	}
}

.nav-dt{
	
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	height: 48px;
	box-sizing: border-box;
	padding: 10px 24px 10px 13px;
	
	.icon{
		flex-shrink: 0;
		width: 28px;
		height: 28px;
		background-size: cover;
	}
	
	.name{
		flex-grow: 1;
		font-size: 14px;
		font-weight: 600;
		color: #FFF;
		line-height: 100%;
	}
	
	.arrow{
		width: 10px;
		height: 5px;
		background-image: url(../image/dworkNavArrow.svg);
		background-size: cover;
		transition: transform 0.3s ease;
	}
	
	&::before{
		display: none;
	}
	&[data-code='M100']{
		.icon{
			background-image: url(../image/dworkNavIconM100.svg);
		}
	}
	&[data-code='M130']{
		.icon{
			background-image: url(../image/dworkNavIconM130.svg);
		}
	}
	&[data-code='M140']{
		.icon{
			background-image: url(../image/dworkNavIconM140.svg);
		}
	}
	&[data-code='M110']{
			.icon{
				background-image: url(../image/dworkNavIconM110.svg);
			}
		}
	&[data-code='M120']{
			.icon{
				background-image: url(../image/dworkNavIconM120.svg);
			}
		}
	&[data-code='M200']{
		.icon{
			background-image: url(../image/dworkNavIconM200.svg);
		}
	}
	&[data-code='M210']{
		.icon{
			background-image: url(../image/dworkNavIconM210.svg);
		}
	}
	&[data-code='M201']{
		.icon{
			background-image: url(../image/dworkNavIconM201.svg);
		}
	}
	&[data-code='M250']{
		.icon{
			background-image: url(../image/dworkNavIconM250.svg);
		}
	}
	&[data-code='M270']{
		.icon{
			background-image: url(../image/dworkNavIconM250.svg);
		}
	}
	&[data-code='M300']{
		.icon{
			background-image: url(../image/dworkNavIconM250.svg);
		}
	}
	&[data-code='M301']{
		.icon{
			background-image: url(../image/dworkNavIconM250.svg);
		}
	}
	&[data-code='M302']{
		.icon{
			background-image: url(../image/dworkNavIconM250.svg);
		}
	}
	&[data-code='M303']{
		.icon{
			background-image: url(../image/dworkNavIconM250.svg);
		}
	}

}

.nav-dd{
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	box-sizing: border-box;
	padding: 6px 20px 6px 10px;	
	a{
		display: flex;
		align-items: center;
		gap: 0;
		flex-grow: 1;
		font-size: 14px;
		font-weight: 500;
		line-height: 100%;
		letter-spacing: -0.02em;
		color: #8b8b8b;
		height: auto;
		padding: 0;
		background: none;
		&::before{
			content: '';
			display: block;
			width: 20px;
			height: 20px;
			background-image: url(../image/navDdDot.svg);
			background-size: 40px 20px;
			background-position: left center;
		} 
		&.active{
			background: none;
			font-weight: 700;
			color: #52B4FF;
			&::before{
				background-position: right center;
			}
		}
		&:hover{
			background: none;
			font-weight: 700;
			color: #52B4FF;
			&::before{
				background-position: right center;
			}
		}
	}
	.navFavorite{
		width: 16px;
		height: 16px;
		overflow: hidden;
		margin: 0;
		padding: 0;
		border: 0;
		background: none;
		background-image: url(../image/navFavorit.svg);
		background-size: 32px 16px;
		background-position: left center;
		&.on{
			background-position: right center;
		}
	}
}

.dworkMain{
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
}
.dworkHeader{
	flex-shrink: 0;
	display: flex;
	align-items: center;
	width: 100%;
	height: 46px;
	border-radius: 16px 0px 0px 0px;
}

.headerLeft{
	display: flex;
	align-items: center;
	flex-grow: 1;
	height: 100%;
	background-color: #FFF;
	border-radius: 16px 0px 0px 0px;
	overflow: hidden;
}

.headerLeftHome{
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	text-decoration: none;
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 0 20px;
	height: 46px;
	font-size: 13px;
	font-weight: 500;
	color: #747474;
	letter-spacing: -0.02em;
	line-height: 100%;
	border-right: solid 1px #DEDEDE;
	&::before{
		content: '';
		display: block;
		width: 18px;
		height: 18px;
		background-image: url(../image/iconHome.svg);
		background-size: cover;
	}
	&.current{
		font-weight: 600;
		color: #171717;
		&::before{
			background-image: url(../image/iconHomeBlack.svg);
		}
	}
}

.headerLeftMenus{
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 0px 24px;
	height: 46px;
	font-size: 15px;
	font-weight: 500;
	color: #747474;
	line-height: 100%;
	letter-spacing: -0.02em;
	box-sizing: border-box;
	background-color: #FFF;
	border-right: solid 1px #DEDEDE;
	cursor: default;
	&.current{
		background-color: #DBEDFF;
		color: #4372FF;
		font-weight: 700;
		box-shadow: inset(0px 2px 0px 0px #0080FF);
	}
}

.headerLeftMenuColse{
	display: block;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	width: 14px;
	height: 14px;
	overflow: hidden;
	background-image: url(../image/headerLeftMenuClose.svg);
	background-repeat: no-repeat;
	background-size: 28px 14px;
	background-position: left center;
	&:hover{
		background-position: right center;
	}
}

.headerRight{
	position: relative;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 10px;
	height: 100%;
	background-image: url(../image/headerRightBg.svg);
	background-repeat: no-repeat;
	background-size: 400px 46px;
	background-position: left center;
	padding-left: 101px;
	box-sizing: border-box;
	&::after{
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: -1;
		background:	linear-gradient(90deg, #FFF, #FFF 50%, #222224 51%, #222224);
	}
}

.headerUserName{
	font-size: 15px;
	font-weight: 500;
	line-height: 130%;
	letter-spacing: -0.02em;
	color: #ACACAC;
	span{
		font-weight: 700;
		color: #FFF;
		display: block;
		margin-bottom: 4px;
	}
	text-align: right;
}

.headerLogout{
	font-family: inherit;
	margin: 0;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	width: fit-content;
	height: 24px;
	border-radius: 4px;
	padding: 0 8px;
	background-color: #FFF;
	font-size: 11px;
	font-weight: 600;
	line-height: 100%;
	letter-spacing: -0.02em;
	color: #111;
	border: 0;
}

button.front.btn-left-menu{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 46px;
	background-color: #e5e5e5;
	border: solid 1px #DEDEDE;
	background-image: none;
	&::before{
		content: '';
		display: block;
		width: 24px;
		height: 24px;
		overflow: hidden;
		background-image: url(../image/navInOut.svg);
		background-size: 48px 24px;
		background-position: right center;
	}
	&.expand{
		&::before{
			background-position: left center;
		}
	}
}

.contentsAreaWrap{
	flex-grow: 1;
	width: 100%;
	background-color: #FFF;
	padding: 24px;
	border-radius: 0px 12px 8px 8px;
	box-sizing: border-box;	
	border-top: solid 1px #c6c6c6;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	& > div{
		margin: 0;
		padding: 0;
		width: 100%;
	}
	
	.dworkBreadcrumbRow{
		flex-grow: 1;
		display: flex;
		align-items: center;
		margin-bottom: 8px;
		
		&::before{
			content: '';
			display: block;
			width: 3px;
			height: 16px;
			flex-shrink: 0;
			background-color: #0080FF;
			margin-right: 8px;
		}
		
		& > div{
			&:not(.dworkBreadcrumbArrow){
				font-size: 18px;
				font-weight: 700;
				line-height: 140%;
				letter-spacing: -0.02em;
				color: #262626;
			}
			&:last-of-type{
				color: #0080FF;
			}
		}
	}
	
	.dworkBreadcrumbArrow{
		flex-shrink: 0;
		width: 16px;
		height: 16px;
		background-image: url(../image/dworkBreadcrumbArrow.svg);
		background-size: cover;
	}
	
	.dworkContentSortTop{
		flex-shrink: 0;
		display: flex;
		align-items: center;
		gap: 16px;
		width: 100%;
		.buttonRow{
			display: flex;
			align-items: center;
			justify-content: flex-end;
			gap: 4px;
			margin-left: auto;
		}
	}
	
	.content-sort-wrap{
		flex-shrink: 0;
		margin-bottom: 16px;
		.content-sort{
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: 4px 16px;
			padding: 8px;
			background-color: #f0f5f9;
			border: solid 1px #DEDEDE;
			border-radius: 6px;
			width: 100%;
			.input-col{
				width: 100%;
				height: 31px;
				display: grid;
				grid-template-columns: 140px 1fr;
				background: none;
				border: solid 1px #D4D4D4;
				margin: 0;
				padding: 0;
				border-radius: 6px;
				overflow: hidden;
				label.front{
					display: flex;
					align-items: center;
					width: 100%;
					height: 100%;
					margin: 0;
					padding: 0 14px;
					background-color: #566270;
					border-right: solid 1px rgba(169,184,213,0.3);
					font-size: 12px;
					font-weight: 600;
					line-height: 140%;
					white-space: normal;
					color: #fcfcfc;
					min-width: 0;
					border-radius: 0px;
				}
				input.front,
				select.front{
					margin: 0;
					width: 100%;
					height: 100%;
					border: 0;
				}
			}
		}
	}
	.content-sort-bottom-btn-container{
		position: relative;
		top: auto;
		left: auto;
		bottom: auto;
		transform: translate(0,0);
		display: flex;
		justify-content: center;
		width: 100%;
		height: 16px;
		border-top: solid 1px #DEDEDE;
		&:has(.btn-sort-section.less){
			border-top: 0;
		}
	}
	button.front.btn-sort-section{
		margin: 0;
		width: 44px;
		height: 16px;
		border-radius: 0px 0px 4px 4px;
		background-color: #5C799B;
		display: flex;
		align-items: center;
		justify-content: center;
		&::before{
			content: '';
			display: block;
			width: 10px;
			height: 10px;
			overflow: hidden;
			background-image: url(../image/btnSortSectionArrow.svg);
			background-repeat: no-repeat;
			background-size: 20px;
			background-position: right center;
		}
		&.less{
			&::before{
				background-position: left center;
			}
		}
	}
	
	#tab-content{
		width: 100%;
		flex-grow: 1;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		.tab-pane{
			width: 100%;
			flex-grow: 1;
			overflow: hidden;
			padding: 0;
		}
		iframe{
			width: 100%;
			height: 100%;
			overflow: hidden;
		}
		
	}
}

.front.content-wrap{
	width: 100%;
	flex-grow: 1;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	
	& > .grid-column{
		height: 100%;
		overflow: hidden;
	}
}

.sbgrid-wrap{
	display: flex;
	flex-direction: column;
	gap: 8px;
	height: 100%;
	.res-header-row{
		flex-shrink: 0;
		margin-bottom: 0;
	}
	.sbgrid-area{
		width: 100%;
		& > .sbgrid-grid{
			width: 100%;
		}
	}
}

.dworkDashboard{
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows:minmax(0, 1fr) minmax(0, 1fr) max-content;
	gap: 16px;
	width: 100%;
	height: 100%;
	overflow-y: auto;
	&.bankAuthority{
		grid-template-rows:2fr max-content 1fr;
		.notBank{
			display: none;
		}
		.largeNotice{
			display: flex;
		}
	}
	.largeNotice{
		display: none;
	}
}

.dworkDashboardBox{
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	width: 100%;
	height: 100%;
	border-radius: 16px;
	padding: 20px;
	border: solid 1px #CECECE;
	overflow-y: auto;
	&.messageBox{
		grid-column: span 2;
	}
	&.largeNotice{
		grid-column: span 2;
		.dworkDashboardNotice{
			display: grid;
			grid-template-columns: repeat(2, minmax(0, 1fr));
			gap: 0 16px;
			width: 100%;
			flex-basis: fit-content;
			.li{
				.listTitle{
					line-height: 100%;
				}
				&.first{
					grid-column: span 2;
					.listTitle{
						line-height: 140%;
					}
				}
				&:nth-last-of-type(-n + 2){
					border-bottom: 0;
				}
			}
		}
	}
}

.dworkDashboardTitleRow{
	display: flex;
	align-items: center;
	width: 100%;
}

.dworkDashboardTitle{
	display: flex;
	align-items: center;
	gap: 10px;
	width: fit-content;
	font-size: 16px;
	font-weight: 700;
	line-height: 120%;
	letter-spacing: -0.02em;
	
	&::before{
		content: '';
		display: block;
		width: 4px;
		height: 16px;
		flex-shrink: 0;
		background-color: #0080FF;
		margin-right: 8px;
	}
	
	&::after{
		content: '';
		flex-shrink: 0;
		display: block;
		width: 22px;
		height: 22px;
		background-image: url(../image/dworkDashboardTitleArrow.svg);
		background-size: cover;
	}
	/* no-arrow 클래스가 붙어있으면 화살표와 간격을 없앱니다 */
    &.no-arrow {
        gap: 0; /* 간격 제거 */
        &::after {
     	   display: none; /* 화살표 숨김 */
    	}
	}
}

.dworkDashboardTitleDate{
	margin-left: auto;
	font-size: 12px;
	line-height: 140%;
	letter-spacing: -0.02em;
	text-align: right;
	color: #787878;
}

.dworkDashboardBoxContents{
	width: 100%;
	flex-grow: 1;
	flex-basis: 0;
	overflow-y: auto;
}

.dworkFxCardGrid{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
	gap: 8px;
	width: 100%;
	height: 100%;
	.fx-card{
		height: 100% !important;
	}
}

.dworkDashboardTableContainer{
	width: 100%;
	height: 100%;
	border-radius: 6px;
	overflow: hidden;
	overflow-y: auto;
	border: solid 1px #DFE0E4;
}

table.dworkDashboardTable{
	width: 100%;
	height: 100%;
	border-collapse: collapse;
	table-layout: fixed;
	colgroup{
		col{
			&.rate{
				width: 12%;
			}
			&.type{
				width: 15%;
			}
		}
	}
	th, td{
		vertical-align: middle;
		padding: 8px 12px;
		letter-spacing: -0.02em;
		line-height: 140%;
		border: solid 1px #DFE0E4;
	}
	th{
		background-color: #d3e0f75e;
		font-size: 12px;
		font-weight: 600;
	}
	td{
		font-size: 14px;
		font-weight: 500;
		color: #000;
		text-align: left;
		&.bgBlue{
			background-color: #d3e0f75e;			
			font-weight: 600;
		}
		&.center{
			text-align: center;
		}
		&.country{
			.box{
				display: flex;
				align-items: center;
				width: 100%;
				gap: 8px;
				font: inherit;
				img{
					display: block;
				}
				font-size: 12px;
			}
		}
	}
	tr{
		&:first-of-type{
			position: sticky;
			top: 0;
		}
		th, td{
			&:first-of-type{
				border-left: 0;
			}
			&:last-of-type{
				border-right: 0;
			}
		}
		&:first-of-type{
			th, td{
				border-top: 0;
			}
		}
		&:last-of-type{
			th, td{
				border-bottom: 0;
			}
		}
	}
}

.dworkDashboardNotice{
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	gap: 0;
	width: 100%;
	flex-grow: 1;
	flex-basis: 0;
	overflow-y: auto;
	.li{
		display: flex;
		align-items: center;
		gap: 16px;
		width: 100%;
		padding: 12px 0px;
		width: 100%;
		overflow: hidden;
		border-bottom: solid 1px  #DDD;
		flex-shrink: 0;
		.listTitle{
			font-size: 13px;
			font-weight: 600;
			color: #171717;
			letter-spacing: -0.02em;
			flex-grow: 1;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
		.listDate{
			flex-shrink: 0;
			width: fit-content;
			white-space: nowrap;
			font-size: 13px;
			letter-spacing: -0.02em;
			text-align: right;
			color: #878787;
		}
		&:last-of-type{
			border-bottom: 0;
			padding-bottom: 0;
		}
		&.first{
			flex-direction: column;
			align-items: flex-start;
			padding-top: 4px;
			padding-bottom: 16px;
			gap: 0;
			.listTitle{
				font-size: 20px;
				font-weight: 700;
				color: #171717;
				white-space: normal;
				line-height: 140%;
			}
			.listContent{
				width: 100%;
				font-size: 14px;
				line-height: 140%;
				letter-spacing: -0.02em;
				color: #575757;
				padding-top: 8px;
				padding-bottom: 12px;
			}
			.listDate{
				  font-size: 14px;
				  text-align: left;
			}
		}
	}
}

.dworkDashboardMessageStat{
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 7.11px;
	width: fit-content;
	margin-left: auto;
	.box{
		display: flex;
		align-items: center;
		gap: 7px;
		width: fit-content;
		height: 36px;
		border-radius: 6px;
		padding: 0px 12px;
		.icon{
			flex-shrink: 0;
			width: 24px;
			height: 24px;
			background-size: cover;
		}
		.label{
			font-size: 14px;
			font-weight: 500;
			letter-spacing: -0.03em;
			line-height: 100%;
			color: #878787;
		}
		.data{
			font-size: 14px;
			font-weight: 700;
			letter-spacing: -0.02em;
			line-height: 100%;
		}
		&.all{
			background-color: #E5F7FF;
			border: solid 1px #B9EAFF;
			.icon{
				background-image: url(../image/dworkMessage.svg);
			}
			.data{
				color: #185DE2;
			}
		}
		&.unread{
			background-color: #FFF5E6;
			border: solid 1px #F5E2C6;
			.icon{
				background-image: url(../image/dworkMessageUnread.svg);
			}
			.data{
				color: #FF6518;
			}
		}
		&.today{
			background-color: #DDF7D9;
			border: solid 1px #D5E9D2;
			.icon{
				background-image: url(../image/dworkMessageToday.svg);
			}
			.data{
				color: #169F2B;
			}
		}
	}
}

.dworkDashboardMessageList{
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
	width: 100%;
	.message{
		display: flex;
		align-items: center;
		gap: 16px;
		width: 100%;
		height: 48px;
		padding: 0 20px;
		border-radius: 8px;
		border: solid 1px #CECECE;
		overflow: hidden;
		.icon{
			width: 32px;
			height: 32px;
			border-radius: 16px;
			flex-shrink: 0;
			background-size: 20px;
			background-repeat: no-repeat;
			background-position: center;
			background-image: url(../image/dworkMessage.svg);
			background-color: #D1E9F4;
			&.unread{
				background-image: url(../image/dworkMessageUnread.svg);
				background-color: #FFF5E6;  
			}
		}
		.senderName{
			font-size: 14px;
			font-weight: 500;
			letter-spacing: -0.02em;
			line-height: 100%;
			flex-shrink: 0;
		}
		.bar{
			width: 1px;
			height: 20px;
			background-color: #B7B7B7;
			flex-shrink: 0;
		}
		.sendText{
			font-size: 14px;
			font-weight: 500;
			letter-spacing: -0.5px;
			line-height: 100%;
			flex-grow: 1;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			color: #000;
		}
		.sendDate{
			display: flex;
			align-items: center;
			width: fit-content;
			height: 32px;
			border-radius: 16px;
			background-color: #dddfe6;
			padding: 0 12px;
			font-size: 14px;
			font-weight: 500;
			line-height: 100%;
			text-align: right;
			color: #999999;
			flex-shrink: 0;
		}
		&:has(.icon.unread){
			.sendText{
				font-weight: 700;
				color: #3484D4;
			}
		}
	}
}

.layer-wrap{
	top: 58px;
	height: calc(100% - 70px);
	background-color: #F9F9F9;
	border-left: solid 1px #C8C8C8;
	border-radius: 16px 0px 0px 16px;
	overflow: hidden;
	.title-row{
		border-color: #C8C8C8;
		font-size: 15px;
		font-weight: 600;
		line-height: 100%;
		color:white;
		background-color:#232325;
	}
	
	&.on ~ .layer-wrap-before{
		display: block;
		pointer-events: all;
	}
}

.layer-wrap-before{
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 90;
	background-color: rgba(255,255,255,0.001);
	display: none;
	pointer-events: none;
}

.dworkSettingContents{
	display: flex;
	flex-direction: column;
	gap: 8px;
	width: 100%;
	height: 100%;
	overflow-y: auto;
	padding: 12px;
	.row{
		display: flex;
		align-items: center;
		gap: 16px;
		padding: 8px 16px;
		background-color: #FFF;
		border-radius: 6px;
		width: 100%;
		.label{
			font-size: 14px;
			flex-grow: 1;
		}
	}
}

.dworkSettingConfirm{
	font-size: 12px;
	color: #FFF;
	background-color: #3484D4;
	border-radius: 4px;
	padding: 3px 6px;
	margin: 0;
	border: 0;
	font-weight: 300;
}

.input-col-row{
	display: flex;
	align-items: center;
	gap: 4px;
	width: 100%;
	height: 100%;
}


/* 어떤 환경에서도 디자인이 유지되는 완전 독립형 CSS */
.dworkMenuContainer {
	display: flex !important;
	flex-direction: column !important;
	gap: 6px !important;
	width: 100% !important;
	padding: 12px 14px !important;
	box-sizing: border-box !important;
	background-color: #f6f6f6 !important; /* 전체 구역 배경 */
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;

	/* 1. 외부 라이브러리의 강제 여백 주입을 원천 봉쇄 */
	* {
		box-sizing: border-box !important;
		margin: 0 !important;
		padding: 0 !important;
	}

	.dw-menu-item {
		display: block !important;
		width: 100% !important;
		margin-bottom: 6px !important;
		border-radius: 8px !important;
		background-color: #2D2D31 !important; /* 1뎁스 기본 어두운 배경 */
		overflow: hidden !important;
		transition: background-color 0.2s ease-in-out !important;

		/* 2. 1뎁스 버튼 스타일 (강력한 초기화 및 강제 지정) */
		.dw-depth1-btn {
			display: flex !important;
			align-items: center !important;
			justify-content: flex-start !important;
			gap: 8px;
			width: 100% !important;
			height: 48px !important;
			padding: 0 16px !important;
			background: transparent !important;
			border: 0 !important;
			outline: none !important;
			box-shadow: none !important;
			cursor: pointer !important;
			text-align: left !important;
			-webkit-appearance: none !important;
			appearance: none !important;
			
			.icon{
				width: 24px;
				height: 24px;
				flex-shrink: 0;
				background-size: cover;
				background-position: center;
				opacity: 0.6;
			}

			span {
				font-size: 14px !important;
				font-weight: 600 !important;
				letter-spacing: -0.02em !important;
				line-height: 100% !important;
				color: #C5C5C7 !important;
				transition: color 0.2s ease !important;
				
				&.label{
					display: block;
					flex-grow: 1;
				}
			}

			/* 오른쪽 화살표 아이콘 */
			.dw-menu-arrow {
				flex-shrink: 0;
				display: block !important;
				width: 16px !important;
				height: 16px !important;
				background-image: url(../image/dworkIconArrowRight.svg) !important;
				background-size: cover !important;
				background-position: center !important;
				background-repeat: no-repeat !important;
				opacity: 0.5 !important;
				transform: rotate(90deg) !important; /* 아래 방향 */
				transition: transform 0.2s ease, opacity 0.2s ease !important;
			}
		}

		/* 3. 활성화(active) 되었을 때의 확실한 스타일 교체 */
		&.active {
			background-color: #3A3A3E !important; /* 네비 버튼과 동일 톤 */

			.dw-depth1-btn {
				.icon{
					opacity: 1;
				}
				span {
					color: #FFFFFF !important;
				}
				.dw-menu-arrow {
					opacity: 1 !important;
					transform: rotate(-90deg) !important; /* 위 방향 */
				}
			}
		}

		/* 4. 2뎁스 메뉴 리스트 레이아웃 */
		.dw-depth2-list {
			display: none; /* jQuery 슬라이드가 제어하므로 !important 제외 */
			list-style: none !important;
			padding: 6px 8px 12px 12px !important;
			margin: 0 !important;
			background-color: #242427 !important; /* 더 깊은 다크 톤 */

			li {
				display: block !important;
				position: relative !important;
				padding: 0 !important;
				margin: 0 !important;
				list-style: none !important;

				/* 링크 스타일 완전 고정 */
				a {
					display: flex !important;
					align-items: center;
					gap: 8px;
					padding: 10px 12px !important;
					font-size: 13px !important;
					font-weight: 500 !important;
					line-height: 120% !important;
					color: #909090 !important;
					text-decoration: none !important;
					border-radius: 6px !important;
					transition: all 0.2s ease-in-out !important;
					box-shadow: none !important;
					border: 0 !important;
					
					&::before{
						content: '';
						width: 5px;
						height: 5px;
						border-radius: 2.5px;
						background-color: #909090;
						flex-shrink: 0;
						transition: all 0.2s ease-in-out;
					}

					/* 마우스 호버 및 선택된 상태 효과 */
					&:hover, &.on {
						color: #FFFFFF !important;
						background-color: rgba(255, 255, 255, 0.06) !important;
						padding-left: 18px !important; /* 부드럽게 들여쓰기 모션 */
						&::before{
							background-color: #FFF;
						}
					}
				}
			}
		}
		
		&[data-menu-role-cd="M100"]{
			.dw-depth1-btn{
				.icon{
					background-image: url(../image/systemSettingIconPreferences.svg);
				}
			}
		}
		&[data-menu-role-cd="M130"]{
			.dw-depth1-btn{
				.icon{
					background-image: url(../image/systemSettingIconHistory.svg);
				}
			}
		}
		&[data-menu-role-cd="M140"]{
			.dw-depth1-btn{
				.icon{
					background-image: url(../image/systemSettingIconStatistics.svg);
				}
			}
		}
		&[data-menu-role-cd="M110"]{
			.dw-depth1-btn{
				.icon{
					background-image: url(../image/systemSettingIconTerms.svg);
				}
			}
		}
		&[data-menu-role-cd="M120"]{
			.dw-depth1-btn{
				.icon{
					background-image: url(../image/systemSettingBankSet.svg);
				}
			}
		}
		&[data-menu-role-cd="M999"]{
			.dw-depth1-btn{
				.icon{
					background-image: url(../image/systemSettingIconMngSet.svg);
				}
			}
		}
	}
}

.front.popup-wrap{
	transition: background-color 0.2s ease;
	.popup-body{
		display: flex;
		flex-direction: column;
		gap: 8px;
		width: 100%;
	}
	.popup-section-wrap{
		display: flex;
		flex-direction: column;
		gap: 8px;
		width: 100%;
	}
	.popup-input-row{
		display: block;
		width: 100%;
		border: 0;
		margin: 0;
		padding: 0;
	}
	.popup-input-col{
		gap: 4px;
		width: 100%;
		min-height: 28px;
		label.popup-input-label{
			flex-basis: 130px;
			border-radius: 6px;
			background-color: #646778;
			color: #FFF;
		}
		input, select{
			margin: 0;
			flex-grow: 1;
			flex-shrink: 0;
			width: auto;
		}
		.popup-input-data{
			width: auto;
			margin: 0;
			flex-grow: 1;
			flex-shrink: 0;
			border-radius: 6px;
			background-color: #F1F3F8;
		}
		.popup-editor{
			flex-grow: 1;
		}
		.iconLabel{
			display: flex;
			align-items: center;
			gap: 8px;
		}
	}
}

.popup .popup-body form{
	display: flex;
	flex-direction: column;
	gap: 8px;
	width: 100%;
}

.dual-grid-popup-container{
	display: grid;
	grid-template-columns: 1fr max-content 1fr;
	gap: 8px;
	width: 100%;
	.dual-grid-popup-button{
		margin: 0;
		padding: 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 8px;
		width: 100%;
		.dual-grid-popup-move-button{
			margin: 0;
		}
	}
}

.popup[style*="display: block"] ~ form .popup[style*="display: block"]{
	.popup-wrap{
		background-color: rgba(0,0,0,0);
	}
}

.popup[style*="display: block"] ~ .popup[style*="display: block"]{
	.popup-wrap{
		background-color: rgba(0,0,0,0);
	}
}

.sbgrid-grid{
	border-radius: 12px;
	overflow: hidden;
	border: solid 1.5px #D7D7D7;
}
.sbgrid-panel.sbgrid-scroll{
	border: 0;
}
.sbgrid-caption .sbgrid-thead{
	background-color: var(--caption-bg);
}
.sbgrid-panel.sbgrid-caption .sbgrid-row .sbgrid-col{
	color: #6C7684;
}
.sbgrid-row > .sbgrid-col{
	box-shadow: none;
	/*border-bottom: solid 1px var(--col-outline);*/
}

.sbgrid-row{
	box-shadow: inset 0px -1px 0px 0px var(--col-outline);
}

.sbgrid-caption .sbgrid-thead .sbgrid-row > .sbgrid-col{
	box-shadow: none;
}

.sbgrid-caption .sbgrid-thead .sbgrid-row{
	box-shadow: none;
}

.sbgrid-panel.sbgrid-pager{
	box-shadow: inset 0px 1px 0px 0px var(--col-outline);
}

body:has(.dworkLogin){
	margin: 0;
	padding: 0;
	background-color: #000;
}

.dworkLogin{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	&.intro{
		.dworkLoginImage{
			width: 100%;
			height: 100%;
			top: 0;
			right: 0;
			border-radius: 0;
		}
		.dworkLoginForm{
			opacity: 0;
			transform: translate(0, -20%);
			pointer-events: none;
		}
		.dworkLoginOverlay{
			opacity: 1;
		}
	}
}

.dworkLoginImage{
	position: absolute;
	top: 16px;
	right: 16px;
	z-index: 2;
	width: calc(100% - 16px - 360px);
	height: calc(100% - 32px - 156px);
	background-image: url(../image/dworkLoginImage.jpg);
	background-size: cover;
	background-position: top center;
	transition: all 2s ease;
	border-radius: 16px;
}

.dworkLoginOverlay{
	opacity: 0;
	pointer-events: none;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 3;
	width: 100%;
	height: 100%;
	background-image: url(../image/dworkLoginOverlay.svg);
	background-size: cover;
	background-position: left top;
	transition: all 2s ease;
}

.dworkLoginForm{
	opacity: 1;
	transform: translate(0, 0);
	pointer-events: all;
	flex-grow: 1;
	display: flex;
	flex-direction: column;
	padding-bottom: 156px;
	transition: all 1s ease;
	transition-delay: 1.5s;
	.dworkLoginPoscoLogo{
		width: 200px;
	}
	
	.dworkLoginDworkLogo{
		width: 240px;
	}
	
	.container{
		flex-grow: 1;
		width: 100%;
		max-width: 360px;
		padding: 24px 16px;
		display: flex;
		flex-direction: column;
		gap: 64px;
	}
	
	.formContainer{
		width: 100%;
		padding: 24px;
		background-color: rgba(255,255,255,0.1);
	}
	
	.greeting{
	    display: flex;
	    flex-direction: column;
	    gap: 4px;
	    width: 100%;
		h1{
			margin: 0;
		    padding: 0;
		    font-size: 18px;
		    font-weight: 600;
		    color: #FFF;
		}
		p{
			margin: 0;
		    padding: 0;
		    font-size: 10px;
		    font-weight: 300;
		    color: #FFF;
		}
	}
	
	.loginUi{
		display: flex;
		flex-direction: column;
		gap: 6px;
		width: 100%;
		margin-top: 16px;
		input[type='text'],
		input[type='password']{
			margin: 0;
			padding: 0 16px;
			width: 100%;
			height: 36px;
			border-radius: 4px;
			background-color: #FFF;
			border: 0;
			font: inherit;
			font-size: 14px;
			font-weight: 400;
		}
		.loginUiRow{
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 100%;
			.idRemember{
				display: flex;
				align-items: center;
				font-size: 10px;
				color: #FFF;
			}
			.findIdpw{
				display: flex;
				align-items: center;
				gap: 4px;
				.bar{
					width: 1px;
					height: 10px;
					background-color: #FFF;
				}
				button{
					margin: 0;
					padding: 0;
					border: 0;
					background: none;
					font: inherit;
					font-size: 10px;
					color: #FFF;
					line-height: 100%;
				}
			}
		}
	}
	
	.verificationUi{
		display: flex;
		flex-direction: column;
		gap: 8px;
		width: 100%;
		margin-top: 32px;
		padding-top: 32px;
		border-top: solid 1px #FFF;
		.titleRow{
			display: flex;
			align-items: center;
			gap: 8px;
			.title{
				flex-grow: 1;
				font-size: 14px;
				font-weight: 600;
				color: #FFF;
			}
			.radioUi{
				input[type='radio']{
					position: absolute;
					width: 0;
					height: 0;
					z-index: -1;
					visibility: hidden;
				}
				label{
					font: inherit;
					font-size: 10px;
					font-weight: 400;
					color: #FFF;
					line-height: 100%;
					cursor: pointer;
					display: flex;
					align-items: center;
					gap: 4px;
					&::before{
						content: '';
						display: block;
						width: 16px;
						height: 16px;
						background-image: url(../image/dworkRadioIcon.svg);
						background-repeat: no-repeat;
						background-size: 32px 16px;
						background-position: left center;
						overflow: hidden;
					}
				}
				&:has(input[type='radio']:checked){
					label{
						&::before{
							background-position: right center;
						}
					}
				}
			}
		}
	}
	.verificationInputRow{
		display: flex;
		width: 100%;
		gap: 2px;
		.verificationInput{
			flex-grow: 1;
			display: flex;
			align-items: center;
			gap: 8px;
			height: 32px;
			background-color: #FFF;
			border-radius: 4px;
			padding: 8px 16px;
			input{
				margin: 0;
				padding: 0;
				border: 0;
				background: none;
				font: inherit;
				font-size: 14px;
				font-weight: 600;
				flex-grow: 1;
				width: 80px;
				&::placeholder{
					font-weight: 400;
					font-size: 10px;
				}
			}
			.verificationTimer{
				text-align: right;
				font-size: 14px;
				font-weight: 700;
				color: rgb(200, 58, 17);
			}
		}
		button{
			margin: 0;
			padding: 0 12px;
			border: 0;
			background-color: #33A7FB;
			border-radius: 4px;
			height: 32px;
			font: inherit;
			font-size: 12px;
			font-weight: 500;
			color: #FFF;
			flex-shrink: 0;
		}
	}
	.verificationMessage{
		font-size: 12px;
		font-weight: 500;
		color: #FFF;
		line-height: 100%;
		&.red{
			color: #ff8b8b;
		}
		&.blue{
			color: #8addff;
		}
	}
	.dworkLoginSubmitButton{
		margin: 0;
		border: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		padding: 0 12px;
		border-radius: 4px;
		background-color: #1A4DDA;
		font: inherit;
		font-size: 12px;
		font-weight: 600;
		color: #FFF;
		line-height: 100%;
		height: 32px;
		margin-top: 8px;
	}
}

.dworkLoginBottom{
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: 5;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 156px;
	flex-shrink: 0;
	padding: 0 18px;
	background: linear-gradient(190deg,rgba(51, 63, 80, 0.7) 0%, rgba(51, 63, 80, 1) 100%);
	.container{
		display: flex;
		justify-content: center;
		align-items: stretch;
		width: 100%;
		max-width: 1080px;
	}
	.dworkLoginBottomLi{
		width: 100%;
		padding: 32px 16px;
		border-right: solid 1px #FFF;
		font-size: 14px;
		font-weight: 400;
		color: #FFF;
		line-height: 130%;
		text-align: center;
		&:last-of-type{
			border-right: 0;
		}
	}
}

/*체크박스 클릭시 하이라이트 스타일*/
.sbgrid-row.sbgrid-checked > .sbgrid-col {
    background-color: #b0fdcd !important;
}	
.sbgrid-grid .sbgrid-icon.sbgrid-checked::before {
	color: #0e0e0e !important;
}

@media(max-height: 860px){
	.dworkLoginForm{
		.container{
			gap: 16px;
		}
	}
}

@media(max-height: 760px){
	.dworkLoginForm{
		.container{
			.dworkLoginPoscoLogo{
				width: 100px;
			}
			.dworkLoginDworkLogo{
				width: 160px;
			}
		}
	}
}

@media(max-height: 759px){
	.dworkLoginForm{
		.container{
			flex-basis: 0;
			overflow-y: auto;
		}
	}
}

#dworkLoading{
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 99999999;
	.dworkLoadingContainer{
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 100%;
		background-color: rgba(255,255,255,0.8);
	}
	.dworkLoadingUi{
		position: relative;
		width: 120px;
		height: 120px;
		&::before{
			content: '';
			display: block;
			width: 120px;
			height: 120px;
			border: solid 16px lavender;
			border-radius: 60px;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 1;
			box-sizing: border-box;
		}
		svg{
			display: block;
			width: 114px;
			height: 114px;
			top: 3px;
			left: 3px;
			border-radius: 57px;
			position: absolute;
			z-index: 2;
			path{
				fill: #0057FF;
			}
			animation: dworkLoadingUiAnimation 1s ease infinite;
		}
	}
}

@keyframes dworkLoadingUiAnimation{
	0%{
		transform: rotate(0deg);
	}
	100%{
		transform: rotate(360deg);
	}
}