[contentEditable] { border:1px solid #cccccc; padding:5px 10px; min-height:50px; border-radius:4px; }

textarea { border:1px solid #ccc; border-radius:4px; }
select:focus, button:focus, .btn:focus, input:focus, textarea:focus, [contenteditable]:focus { 
	outline: 0;
	border:1px solid #66afe9;
	box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
	-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
}

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button {
	-webkit-appearance: none;
	display: none;
}

input[type=time]::-webkit-inner-spin-button,
input[type=date]::-webkit-inner-spin-button {
	-webkit-appearance: none;
	display: none;
}

input[type=time][required]::-webkit-clear-button,
input[type=date][required]::-webkit-clear-button {
	-webkit-appearance: none;
	display: none;
}

input[type=date], input[type=time], input[type=number], input[type=text], input[type=password], textarea { -moz-appearance: textfield; background-clip:padding-box; }

[overflow] { -webkit-overflow-scrolling:touch; overflow:auto; }

.btn-circle { display:inline-block; padding:0px; border:1px solid transparent; background:transparent; color:#3a5a7a; font-weight:300; transition:none; box-shadow:none; -webkit-box-shadow:none; position:relative; border-radius:50%; overflow:hidden; }
.btn-circle:active, .btn-circle:focus, .btn-circle:hover { background:transparent; outline:none; border:1px solid transparent; color:#3a5a7a; box-shadow:none; -webkit-box-shadow:none;
}
.btn-circle > * { width: 50px; height:50px; padding-top:calc(50% - .5em); font-size:18px;  margin:0; line-height:normal; transition:all .3s ease-in-out 0s; color:white;
}

.btn-circle.btn-default > * { background:#e5e9ed; color:#a5b6c7; }
.btn-circle.btn-primary > * { background:#337ab7; }
.btn-circle.btn-success > * { background:#5cb85c; }
.btn-circle.btn-info    > * { background:#5bc0de; }
.btn-circle.btn-warning > * { background:#f4c414; }
.btn-circle.btn-danger  > * { background:#d9534f; }
.btn-circle.btn-inverse > * { background:#555555; }

.mobile .alert .modal-dialog { top:calc(50vh - 160px); }
.mobile .confirm .modal-dialog { top:calc(50vh - 160px); }

.textbox { position:relative; } 
.textbox label { position:absolute; top:3px; left:10px; font-weight:normal; color:#337ab7; }
.textbox label + input { padding:35px 10px 15px 10px; }

button { touch-action: manipulation; }

::placeholder { color:silver; }

.ios input[type=date], 
.ios input[type=time], 
.ios input[type='datetime-local'], 
.ios input[type=number], 
.ios input[type=text], 
.ios input[type=password], 
.ios textarea,
.ios [contentEditable]
{ font-size:16px; }

.table.table-list	thead tr > * { border:0; background:#e9ebee; }
.table.table-list tbody td { vertical-align:middle; border:0; border-bottom:1px solid #ddd; }

body > .bb { display:none; }

/* ***********************************************************
	2024-03-29 : 윤성호
	여기서 부터는 새 디자인 적을 위한 소스 추가 
*********************************************************** */
/* 새 디자인 기본 색상 */
:root {
	--main-color-White: #fff;
	--main-color-Purple: #6A4DE7;
	--main-color-Yellow: #FFF333;
	--main-color-Gray: #E6E6E6;
}

/* 배경 색상 설정 */
.divBodyBackgroundPurple {
	height: calc(100vh) !important;
	background: linear-gradient(to bottom
								, var(--main-color-Purple) 0%, var(--main-color-Purple) 22%
								, var(--main-color-White) 22%, var(--main-color-White) 100%);
	display:flex; flex-flow:column nowrap;
}
/* 배경 화면 위쪽으로 그림자 라인 박스 */
.divBodyShadowBox {
	border:solid 1px white; border-radius:10px 10px 0px 0px;
	width:90%; height:auto;
	background:var(--main-color-White);
	margin-top:20px; margin-left: auto; margin-right: auto; padding-left: 18px; padding-right: 18px;
	box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.1), -5px 5px 10px rgba(0, 0, 0, 0.1);
	justify-content: center; /* 가로 중앙 정렬 */
	flex-wrap: wrap;
	margin-bottom:0px;
}
/* DIV 박스 안쪽 가로세로 중앙 정열 */
.divVHCenter {
	display: flex;
	justify-content: center; /* 가로 중앙 정렬 */
	align-items: center; /* 세로 중앙 정렬 */
}
.divVCenter {display: flex;align-items: center; /* 세로 중앙 정렬 */ }
/* div Group 라인 텍스트 박스 */
.divGroupLabelBox {width:100%; height:30px; position: relative; z-index:2;}
.divGroupInputField {
    width: 100%; height:50px;
    padding: 10px;
    box-sizing: border-box;
    border: 2px solid var(--main-color-Gray);
    border-radius: 10px;
    outline: none;
	text-align:left;
	align-items: center; 
}
.divGroupInputField:focus-within {
	border-color: var(--main-color-Purple); /* 포커스가 있을 때 보라색으로 변경 */
}
.divGroupLabel {
    position: absolute;
    top: -10px;
    left: 18px;
    background-color: white;
    padding: 0 5px;
    color: var(--main-color-Gray);
    font-size:0.9em;
}
.divGroupLabelBox:focus-within .divGroupLabel {
	color: var(--main-color-Purple) !important; /* 포커스가 있을 때 보라색으로 변경 */
}
/* 텍스트박스 하이라이트 효과 삭제 */
.divInputTxt {border:solid 0px;}
.divInputTxt:focus { border:solid 0px; outline: none; -webkit-box-shadow: none; box-shadow: none;}
/* 셀렉트 박스 설정 */
.divInputSelect {border:solid 0px; background:var(--main-color-White);}
.divInputSelect:focus { border:solid 0px; outline: none; -webkit-box-shadow: none; box-shadow: none;}

/****************************************************
	Gmarket Sans 폰트 별도 적용 설정
****************************************************/
@font-face {
	font-family: 'Gmarket Sans';
	font-style: normal;
	font-weight: 700;
	src: local('Gmarket Sans Bold'), local('Gmarket Sans-Bold'),
	url('/lib/assets_mobile/font/GmarketSans/GmarketSansBold.woff2') format('woff2'), /* Super Modern Browsers */
	url('/lib/assets_mobile/font/GmarketSans/GmarketSansBold.woff') format('woff'), /* Modern Browsers */
	url('/lib/assets_mobile/font/GmarketSans/GmarketSansBold.ttf') format('truetype'); /* Safari, Android, iOS */
}
@font-face {
	font-family: 'Gmarket Sans';
	font-style: normal;
	font-weight: 500;
	src: local('Gmarket Sans Mddium'), local('Gmarket Sans-Medium'),
	url('/lib/assets_mobile/font/GmarketSans/GmarketSansMedium.woff2') format('woff2'), /* Super Modern Browsers */
	url('/lib/assets_mobile/font/GmarketSans/GmarketSansMedium.woff') format('woff'), /* Modern Browsers */
	url('/lib/assets_mobile/font/GmarketSans/GmarketSansMedium.ttf') format('truetype'); /* Safari, Android, iOS */
}
@font-face {
	font-family: 'Gmarket Sans';
	font-style: normal;
	font-weight: 300;
	src: local('Gmarket Sans Light'), local('Gmarket Sans-Light'),
	url('/lib/assets_mobile/font/GmarketSans/GmarketSansLight.woff2') format('woff2'), /* Super Modern Browsers */
	url('/lib/assets_mobile/font/GmarketSans/GmarketSansLight.woff') format('woff'), /* Modern Browsers */
	url('/lib/assets_mobile/font/GmarketSans/GmarketSansLight.ttf') format('truetype'); /* Safari, Android, iOS */
}
.txtFontGmarket { font-family: 'Gmarket Sans', 'Nanum Gothic', sans-serif;font-weight:500; }

/****************************************************
	스크롤바 안보이게 숨기기
****************************************************/
html::-webkit-scrollbar-track {background: red;}
html::-webkit-scrollbar-thumb { background: rgba(220, 20, 60); }
html::-webkit-scrollbar-button {display: none;}
/* hover 효과 */
body::-webkit-scrollbar-thumb:hover {
	/*background-color: blue;
	transition: all 0.2s;*/ /* 작동 안 됨 */
}
/* 코너에 라운드 효과 */
body::-webkit-scrollbar-track,
body::-webkit-scrollbar-thumb {border-radius: 5px;}

/* PC 웹 브라우저에서 스크롤바 보이게 하기 */
@media screen and (min-width: 768px) {
	div::-webkit-scrollbar { width: 5px; }
	div::-webkit-scrollbar-thumb { 
		background: #888; 
		border-radius: 5px;
	}
	div::-webkit-scrollbar-thumb:hover { background: #555; }
	div {
		scrollbar-width: thin; scrollbar-color: skyblue #fff; 		
	}
}
/* 모바일에서 스크롤바 안 보이게 하기 */
@media screen and (max-width: 767px) {
	div::-webkit-scrollbar { display: none; }
	div { scrollbar-width: none; -ms-overflow-style: none; }
}
/* 사이즈 작은 폰에서 화면 제조정  */ 
@media (max-width: 390px) {
	.trans-dropdown-menu { left:-40px !important; }
}



/****************************************************
	페이징 처리 기본 스타일 설정
****************************************************/
.pagination {display: inline-block;}
.pagination a {color: black;float: left;padding: 8px 16px;text-decoration: none; transition: background-color .3s;}
.pagination a.active {background-color: #4CAF50;color: white;border-radius: 5px;}
.pagination a:hover:not(.active) {background-color: #ddd;border-radius: 5px;}


/****************************************************
	달력-시간 스타일 설정 
****************************************************/
.datetimepicker {
	display: inline-flex;align-items: center;background-color: #fff;border: 0px solid darkturquoise;border-radius: 8px; width:100%;
	&:focus-within {border-color: teal;}
	input {font: inherit;color: inherit;appearance: none;outline: none;border: 0;background-color: #fff;
		&[type=date] {width: 13rem;padding: 0rem 0 0rem 0rem;border-right-width: 0;background-color: #fff;}		
		&[type=time] {width: 12rem;padding: 0rem 0rem 0rem 0;border-left-width: 0;background-color: #fff;}
	}
	span {height: 1rem; width:10px;margin-right: .25rem;margin-left: .25rem;border-right: 1px solid #ddd;}
}