html, body {
	height: 100%;
	margin: 0;
	font-family: 'Noto Sans KR', sans-serif, 'Nanum Gothic', Malgun Gothic !important;
  font-size: 16px;
	color: #555;
}

body {
	background: #f8f8f8;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}


header {
	background: #fff;
}

main {
	flex: 1;	
	padding: 50px 10px;
}

section {
	width: 100%; max-width: 1300px;
	margin: 0 auto;
}





.mainWrap {max-width: 1280px; margin: 0 auto;}



h1 {font-size: 1.7rem; margin: 0; padding: 0 0 5px 0; font-weight: bold;}
h2 {font-size: 1.5rem; margin: 0; padding: 0 0 15px 0; font-weight: normal;}
h3 {font-size: 1.25rem; margin: 0; padding: 0 0 15px 0; font-weight: normal;}
h4 {font-size: 1.2rem;margin: 0; padding: 0 0 15px 0; font-weight: normal;}
h5 {font-size: 1.1rem;margin: 0; padding: 0 0 15px 0; font-weight: normal;}

.btn {border-radius: 0;}

.sidebarIcon {font-size: 1.1rem; margin-bottom: 8px;}


.form-select, .form-control {
    font-size: 1em;
}


table .active {background: var(--color-main-light);}
.table {
  --bs-table-hover-bg: #f8f8f8;
}


/*
.btn-menu {
		width: 100%;
		border: 1px solid #e0e0e0; border-radius: 0;
		background-color: white;
		color: black;
		font-size: 1em;
		padding: 17px 10px;
}

.btn-menu.active {
		background-color: var(--color-main);
		border: 1px solid var(--color-main);
		color: white;
}

.btn-menu:not(.active):hover {
		background-color: var(--color-main-light);
		border: 1px solid #e0e0e0; border-radius: 0;
}

.dropdown-toggle {
		background-color: var(--color-main);
		color: white;
		width: 100%;
		padding: 17px 10px;
		text-align: center;
		border-radius: 0;
}
.dropdown-toggle:hover {
		background-color: var(--color-main);
		color: white;
}
.dropdown-toggle:focus {
		background-color: var(--color-main);
		color: white;
		box-shadow: none;  Removes the focus outline 
}
.dropdown-menu {
		width: 100%;
		text-align: center;
		border-radius: 0;
		line-height: 200%;
}
.dropdown-item.active {
		color: var(--color-main);
		font-weight: left;
	  background: none;
}

*/


	.badgeToggleSwitchDiv {
		border: 1px solid #ddd; border-radius: 7px; padding: 20px;
	}
	

/* 태그 버튼 스타일 */
	.tag {
			display: inline-block;
			background-color: var(--color-main);;
			color: white;
			padding: 5px 10px;
			border-radius: 20px;
			margin: 5px;
			font-size: 14px;
	}
	.tag .close {
			margin-left: 10px;
			cursor: pointer;
	}
	.tag-container {
			margin-top: 10px;
	}

.tag input {border: none; background: transparent; color:#fff; font-size: inherit; outline: none; flex-grow: 1;}





.bgDiv {background: var(--color-grey-light); padding: 20px 20px 10px 20px; border-radius: 10px;}

textarea {
		resize: none;
		white-space: pre-line;
}

input::placeholder,
textarea::placeholder {
		color: #999 !important; 
}

.no-badge {opacity: 0.5;}

.subEn {color: #999; font-size: 0.85em;}

.qaMyComment {
	padding: 15px;
	background: var(--color-grey-light);
	border-radius : 15px 0 15px 15px;
	text-align: left;
	margin: 0 0 30px 30px;
}

.qaOhersComment {
	padding: 15px;
	background: var(--color-main-light);
	border-radius: 0 15px 15px 15px;
	margin: 0 30px 30px 0;
}


.no-bg {background-color: transparent !important;}
.no-bg td {background-color: transparent !important;}
.no-bg th {background-color: transparent !important;}

/******** footer *******/

footer {
	background: var(--color-main);
	color: var(--color-main-light);
	font-size: 0.75rem;	
	padding: 30px 0;
	margin-top: 50px;
}


.footerLinks {
	padding-left: 0;
	margin: 0;
}

.footerLinks li {
	display: inline;
	margin: 0 10px;
	list-style: none;
}

.footerLinks a {
  color: inherit;
}

.footerLinks a:hover {
  color: var(--color-sub);
	text-decoration: none;
}


/*PC*/

@media (min-width: 768px) {	
	
	.mainColored {background: #f8f8f8;}
	
	.mainTitle {text-align: center; padding: 100px 10px 170px 10px; text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);}
	.mainTitle p {font-style: italic; color: #89cb1d; font-weight: bold; margin-bottom: 5px; font-size: 1.1rem;}
	.mainTitle h1 {color: #fff; font-size: 3rem;}

	
	.inMainBlock-title {
		padding: 15px;
		background: #f8f9fa; border: 1px solid #ddd; border-bottom: none; border-radius: 7px 7px 0 0;
	}

	.inMainBlock-bt {
		background: #fff; border: 1px solid #ddd; border-radius: 0 0 7px 7px;
		padding: 20px;
		margin-bottom: 30px;
	}

	.inMainBlock {
		background: #fff; border: 1px solid #ddd; border-radius: 7px;
		padding: 20px;
		margin-bottom: 30px;
	}
	
	.inMainBlock_my {
		background: #fff; border: 1px solid #ddd; border-radius: 7px;
		padding: 20px 40px 10px 40px;
		margin-bottom: 30px;
	}
	
	
}



/*Mobile*/
@media (max-width: 768px) {	
	
	.mainTitle {text-align: center; padding: 50px 10px 60px 10px; text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);}
	.mainTitle p {font-style: italic; color: #89cb1d; font-weight: bold; margin-bottom: 5px; font-size: 0.9rem;}
	.mainTitle h1 {color: #fff; font-size: 1.8rem;}

	.inMainBlock {
		background: #fff; border: 1px solid #ddd; border-radius: 7px;
		padding: 10px;
		margin-bottom: 30px;
	}
	
	.inMainBlock_my {
		background: #fff; border: 1px solid #ddd; border-radius: 7px;
		padding: 20px 30px 10px 30px;
		margin-bottom: 30px;
	}
	
	.no-inMainBlock {
	background: transparent; border: none; border-radius: 0;
	padding: 0px;
	margin-bottom: 0;
}
	
	.inMainBlock-title {padding-bottom: 40px;}
}