@charset "utf-8";

/*
	#기능: 레이아웃 사용(header, footer 등)
*/
.header {
	border-bottom:1px solid #DCDCDC;
	position: relative;
	z-index: 100;
}
.header-container {
	padding:0 40px;
	display: flex;
	align-items: center;
	position: relative;
	width: 100%;
	height: 60px;
}
.header-gnb-wrap {
	display: inline-flex;
	align-items: center;
	padding-left:40px;
}
.gnb-list-wrap {
	display: inline-flex;
}
.gnb-list {
	padding:0 20px;
	position: relative;
}
.gnb-menu {
	position: absolute;
	left: 50%;
	transform:translateX(-50%);
	height: 0;
	overflow: hidden;
	top:-30%;
	transition: all 0.3s ease-in-out;
	opacity: 0;
}
.gnb-list.active .gnb-menu {
	top:60px;
	height: auto;
	opacity: 1;
	border:1px solid #DCDCDC;
	background: #fff;
}
.gnb-menu-title {
	display: block;
	white-space: nowrap;
	padding:8px 20px;
	text-align: center;
	border-top:1px solid #DCDCDC;
}
.gnb-menu-title:first-child {
	border-top:none;
}
.gnb-menu-title:hover {
	font-weight: 600;
}
.gnb-title {
	display: inline-flex;
	align-items: center;
	height: 60px;
}
.gnb-title .ico-custom {
	font-size: 0.75em;
	margin-left:4px;
	transition: all 0.3s ease-in-out;
	display: inline-block;
	vertical-align: middle;
	margin-top:1px;
}
.gnb-list.active .gnb-title .ico-custom {
	transform:rotate(-180deg);
}
.gnb-title.depth-empty .ico-custom {
	display:none;
}
.header-util {
	position: absolute;
	right:40px;
	top:0;
	display: inline-flex;
	align-items: center;
	height: 100%;
}
.header-util-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding:0 15px;
	height: 28px;
	transition: all 0.2s ease-in-out;
	font-size: 0.95em;
}
.header-util-btn.opt-join {
	background:var(--primary-color);
	color: #fff;
	border-radius: 7px;
}
.header-util-btn.opt-join:hover {
	box-shadow: 3px 3px 2px rgba(0,0,0,0.2);
}
.header-util-btn.opt-search {
	display: none;
}
.m-gnb-open,
.m-gnb-logo,
.m-gnb-util {
	display: none;
}
@media all and (max-width: 1023px) {
	body.opt-gnb-open {
		transition: all 0.3s ease-in-out;
		transform: translateX(-50%);
	}
	.header-container {
		padding:0 20px;
		justify-content: space-between;
	}
	.header-util {
		position: static;
		right: auto;
		top:auto;
		padding-right: 45px;
	}
	.header-util-btn {
		padding:0 10px;
		height: 26px;
		border:1px solid #d5d5d5;
		border-radius: 5px;
		margin-left:5px;
	}
	.header-util-btn.opt-search {
		display: none;
	}
	.header-util-btn.opt-join {
		display: none;
	}
	.m-gnb-open {
		display: block;
		position: absolute;
		right:20px;
		top:50%;
		transform:translateY(-50%);
		font-size: 1.75em;
	}
	.header-gnb-wrap {
		display: block;
		align-items: normal;
		position: relative;
		z-index: 20;
		height: 100%;
		background: #fff;
		overflow-y: auto;
		padding:0;
	}
	.header-gnb-wrap::-webkit-scrollbar {
		width: 5px;
	}
	.header-gnb-wrap::-webkit-scrollbar-thumb {
		background: #B8BBC3;
		border-radius: 5px;
	}
	.header-gnb-wrap::-webkit-scrollbar-track {
		background: #fff;
		border-radius: 5px;
	}
	.header-gnb {
		display: none;
		align-items: normal;
		position: absolute;
		right:0;
		top:0;
		width: 50%;
		height: 100vh;
		padding:0;
		z-index: 100;
	}
	.header-gnb.active {
		display: block;
		transform: translateX(100%);
		border-left: 1px solid #eee;
		box-shadow: 0 0 10px rgba(0,0,0,0.2);
	}
	.header-gnb::after {
		display: block;
		content:"";
		width: 100%;
		height: 100%;
		background:#000;
		position: absolute;
		left:-100%;
		opacity: 0;
		top:0;
		z-index: -1;
	}
	.header-gnb.active::after {
		animation: m-gnb-overlay 0.3s forwards;
		animation-delay: 0.2s;
	}
	@keyframes m-gnb-overlay {
		0% {
			opacity: 0;
		}
		100% {
			opacity: 0.3;
		}
	}
	.gnb-list-wrap {
		display: block;
	}
	.gnb-list {
		padding:0;
	}
	.gnb-title,
	.m-gnb-util-btn {
		display: block;
		align-items: normal;
		height: auto;
		padding:18px 40px;
	}
	.gnb-title .ico-custom {
		margin-top:0;
	}
	.gnb-title.active .ico-custom {
		margin-top:-3px;
		transform: rotate(-180deg);
	}
	.gnb-menu {
		position: static;
		left: auto;
		transform: none;
		height: auto;
		top:auto;
		opacity: 1;
		transition: none;
		background: #f7f7f7;
		display: none;
		padding:10px 0;
	}
	.gnb-menu-title {
		display: block;
		text-align: left;
		border:none;
		padding:10px 40px;
	}
	.m-gnb-logo {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding:0 20px 0 40px;
		height: 60px;
		border-bottom:1px solid #DCDCDC;
		position: sticky;
		left:0;
		top:0;
		width: 100%;
		background: #fff;
		z-index: 5;
	}
	.m-gnb-close {
		font-size: 1.8em;
	}
	.m-gnb-util {
		display: block;
	}
}
@media all and (max-width: 767px) {
	body.opt-gnb-open {
		transform: translateX(-80%);
	}
	.header-container {
		padding:0 10px;
	}
	.header-logo img {
		max-width: 110px;
	}
	.header-util {
		padding-right:35px;
	}
	.header-util-btn {
		font-size: var(--font-size-13);
		margin-left:2px;
		padding:0 7px;
	}
	.m-gnb-open {
		right:10px;
		font-size: var(--font-size-24);
	}
	.header-gnb {
		width: 80%;
	}
	.m-gnb-logo {
		padding:0 20px;
	}
	.m-gnb-logo img {
		max-width: 110px;
	}
	.gnb-title,
	.m-gnb-util-btn {
		padding:12px 20px;
		font-size: 0.95em;
	}
	.gnb-title .ico-custom {
		font-size: 0.7em;
		margin-top:-3px;
	}
	.gnb-menu {
		padding:5px 0;
	}
	.gnb-menu-title {
		font-size: 0.9em;
		padding:10px 20px;
	}
}


.footer {
	border-top:1px solid #DCDCDC;
}
.footer-container {
	max-width: 1500px;
	padding:30px 10px 50px;
	margin:0 auto;
	display: flex;
}
.footer-logo img {
	max-width: 230px;
}
.footer-etc {
	padding-left:50px;
	flex: 1 1 auto;
}
.footer-lnk-list {
	margin-bottom:15px;
}
.footer-lnk {
	display: inline-block;
	vertical-align: top;
	padding-right:10px;
	margin-right:10px;
	position: relative;
	color: #444444;
}
.footer-lnk::before {
	display: block;
	content:"";
	width: 1px;
	height: 12px;
	background: #DCDCDC;
	position:absolute;
	right: -1px;
	top:50%;
	transform:translateY(-50%);
}
.footer-lnk:last-child::before {
	display: none;
}
.footer-lnk.opt-strong {
	font-weight: 600;
}
.footer-info-button {
	display: inline-flex;
	align-items: center;
	font-size: 0.95em;
}
.footer-info-button .ico-custom {
	color: #555;
	margin:2px 0 0 4px;
	transition: all 0.3s ease-in-out;
	display: inline-block;
	vertical-align: middle;
}
.footer-info-button.active .ico-custom {
	display: inline-block;
	transform: rotate(-180deg);
	margin-top:0;
}
.footer-desc {
	display: none;
	font-style: normal;
	margin-top:5px;
}
.footer-desc-item {
	display: inline-block;
	vertical-align: top;
	padding-right:10px;
	margin-right:10px;
	position: relative;
	color: #444444;
	font-size: 0.95em;
}
.footer-desc-item::before {
	display: block;
	content:"";
	width: 1px;
	height: 12px;
	background: #DCDCDC;
	position:absolute;
	right: -1px;
	top:50%;
	transform:translateY(-50%);
}
.footer-desc-item:last-child::before {
	display: none;
}
.footer-copyright {
	margin-top:10px;
	font-size: var(--font-size-14);
	color: #BFBFBF;
}
@media all and (max-width: 1023px) {
	.footer {
		padding:0 20px;
		border-top:none;
	}
	.footer-container {
		border-top:1px solid #DCDCDC;
		display: block;
		padding:15px 0 30px;
	}
	.footer-logo {
		padding:0 10px;
	}
	.footer-logo img {
		max-width: 200px;
	}
	.footer-etc {
		padding-left:0;
		flex:none;
		margin-top:10px;
	}
	.footer-lnk-list {
		margin-bottom:10px;
		padding:0 10px;
	}
	.footer-lnk {
		font-size: 0.9em;
	}
	.footer-lnk.opt-strong {
		color: var(--primary-color);
		font-weight: 500;
	}
	.footer-info {
		padding:0 10px;
	}
	.footer-info-button {
		font-size: 0.9em;
	}
	.footer-info-button .ico-custom {
		margin-top:3px;
	}
	.footer-info-button.active .ico-custom {
		margin-top:0;
	}
	.footer-desc-item {
		font-size: 0.9em;
	}
	.footer-copyright {
		margin-top:15px;
		padding:15px 10px 0;
		border-top:1px solid #DCDCDC;
		font-size: 0.85em;
	}
}
@media all and (max-width: 767px) {
	.footer {
		padding:0 10px;
	}
	.footer-container {
		padding:10px 0 20px;
	}
	.footer-logo img {
		max-width: 150px;
	}
	.footer-lnk-list {
		margin-bottom:3px;
	}
	.footer-lnk {
		color: #999999;
	}
	.footer-lnk,
	.footer-info-button {
		font-size: var(--font-size-13);
	}
	.footer-lnk {
		margin-right:5px;
		padding-right:5px;
	}
	.footer-desc {
		margin-top:2px;
	}
	.footer-desc-item {
		display: block;
		margin:2px 0 0 0;
		padding:0 0 0 7px;
		font-size: var(--font-size-13);
	}
	.footer-desc-item::before {
		width: 2px;
		height: 2px;
		right: auto;
		left: 0;
		top:9px;
		transform:none;
		border-radius: 100%;
		background:#9b9b9b;
	}
	.footer-desc-item:last-child::before {
		display: block;
	}
	.footer-copyright {
		padding-top:10px;
		margin-top:10px;
		font-size:0.75em;
	}
}

/* ## sub container s ## */
.sub-container {
	padding:0 10px;
	max-width: 1500px;
	margin:0 auto;
}
@media all and (max-width: 1023px) {
	.sub-container {
		padding:0 20px;
	}
}
@media all and (max-width: 767px) {
	.sub-container {
		padding:0 10px;
	}
}
/* ## sub container e ## */


/* ## sub top s ## */
.sub-top {
	background:#ECF5FF;
}
.sub-top-box {
	max-width: 1500px;
	padding:30px 10px;
	margin:0 auto;
	display: flex;
	align-items: center;
}
.sub-top-item {
	flex: 1 1 auto;
}
.sub-top.opt-default .sub-top-box {
	min-height: 200px;
	background-image: url("../img/contents/sub-top-bg.png");
	background-repeat: no-repeat;
	background-position: 95% center;
	background-size: 420px;
}
.page-title {
	font-size: 40px;
	font-weight: 700;
}
@media all and (max-width: 1023px) {
	.sub-top-box {
		padding:30px 20px;
	}
}
@media all and (max-width: 767px) {
	.sub-top-box {
		padding:25px 10px;
	}
	.sub-top.opt-default .sub-top-box {
		min-height: 140px;
		background-size: 200px;
	}
	.page-title {
		font-size: var(--font-size-20);
		font-weight: 600;
	}
}
/* ## sub top e ## */