/***************** 상단 bg *****************/
#topAreaDummy { padding-bottom:80px; }
.top-area {
	z-index:10000;
	overflow:hidden;
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:80px;
	-webkit-box-sizing:content-box;
    -moz-box-sizing:content-box;
    box-sizing:content-box;
	box-shadow:0 1px 8px rgba(0,0,0,0.10);
}
.top-area-over { }
.top-area-box {
	height:80px;
	position:relative;
	z-index:101;
	padding:0;
	background:rgba(255, 255, 255, 1);
}
.top-area-scrolling {
	position:fixed;
	top:0;
	width:100%;
	z-index:300;
}
.top-area-bg {
	position:absolute;
	bottom:0;
	left:50%;
	margin-left:-520px;
	opacity:0;
	transition:all 0.3s ease-out; 
}
.top-area-over {
	background:rgba(255, 255, 255, 1);
}
.top-area-over .top-area-box { 
	border-bottom:1px solid #ebebeb; 
}
.top-area-box .boundary { 
	position:relative; 
}

/*
 * 반응형
*/

@media screen and (max-width:1200px) {
	.top-area, 
	.top-area-box {
		overflow:visible;
	}
}

@media screen and (max-width:768px) {
	.top-area, 
	.top-area-box {
		height:66px;
	}
	#topAreaDummy { padding-bottom:66px; }
}




/***************** 로고 영역 *****************/
.top-area .logo {
	position:absolute; 
	left:0;
	top:0;
	z-index:9998;
	height:80px;
}
.top-area .logo > a {
	display:block;
	line-height:80px; 
}
.top-area .logo > a img {
	width:auto;
	max-height:50px; 
}

.logo_m { display:none; } 


@media screen and (max-width:768px) {
	.top-area .logo > a { line-height:66px; }
	.top-area .logo > a img {
		width:auto;
		max-height:38px; 
	}
}




/***************** 메뉴 + 로그인 그룹 영역 *****************/

/*
 * 기본 스타일
*/

.top-navs {
	line-height:80px;
}

/*
 * 반응형 스타일
*/

@media screen and (max-width:1200px) {
	.top-navs {
		position:fixed;
		overflow-y:auto;
		z-index:9999;
		top:0;
		right:-100%;
		bottom:0;
		width:640px;
		padding-top:90px;
		background-color:#fff;
		line-height:1.5;
		transition:right 0.5s ease-in-out;
	}

	.top-navs-curtain {
		visibility:hidden;
		opacity:0;
		position:fixed;
		z-index:-1;
		top:0; right:0; bottom:0; left:0;
		background-color:rgba(0, 0, 0, 0.32);
		transition:opacity 0.35s ease-in-out;
	}
}

@media screen and (max-width:768px) {
	.top-navs {
		width:320px;
	}
}



/***************** 메뉴 영역 *****************/
.top-area .gnb {
	width:100%;
	text-align:right;
}

.gnb-hidden {
	display:none;
}

#gnb-list {
	z-index:101;
}
#gnb-list .gnb-item {
	display:inline-block;
	position:relative;
}
#gnb-list .gnb-item:before {
	content:"";
	position:absolute;
	left:0;
	right:100%;
	bottom:0;
	height:2px;
	opacity:0;
	background-color:#363636;
	-webkit-transition:all 0.3s;
	-moz-transition:all 0.3s;
	-ms-transition:all 0.3s;
	-o-transition:all 0.3s;
	transition:all 0.3s;
}
#gnb-list .gnb-item:hover:before {
	left:25px;
	right:25px;
	opacity:1;
}
#gnb-list .gnb-item1 {
	padding:0px;
}
#gnb-list .gnb-item8 {
	display:none;
	padding:0px;
}
#gnb-list .gnb-link {
	display:block;
	padding:0 25px;
 	font-size:17px;
	color:#565656;
	letter-spacing:-0.02em;
}

/* 중메뉴 */
#gnb-list .gnb-dep1 {    
	position:absolute;
	width:100%;
	line-height:1.6;
}
#gnb-list .gnb-d1-list {
	bottom:1em;
	padding-top:15px;
	text-align:center;
}
#gnb-list .gnb-d1-item {
	padding:3px 0;
}
#gnb-list .gnb-d1-item:last-of-type {
	padding-bottom:25px;
}
#gnb-list .gnb-d1-link {
	color:#777;
	font-size:15px;
	letter-spacing:-0.03em;
	position:relative; 
}
#gnb-list .gnb-d1-link:hover { 
	color:#284889; 
	padding-left:4px; 
	text-decoration:underline; 
}

/*
 * 반응형 스타일
*/

@media screen and (max-width:1200px) {
	.logo_m { display:block; position:absolute; top:0; left:0; padding-left:20px; padding-top:26px; }
	.logo_m a { display:block; }

	.top-area .gnb {
		width:auto;
		padding:0 20px;
		text-align:left;
		margin-left:0;
	}
	#gnb-list .gnb-item {
		display:block;
		margin-bottom:15px;
		padding-bottom:15px;
		border-bottom:1px solid #ebebeb;
	}
	#gnb-list .gnb-item:before {
		content:"";
		display:none;
	}
	#gnb-list .gnb-item:hover:before {
		display:none;
	}
	#gnb-list .gnb-link {
		padding:0;
		font-size:15px;
	}
	#gnb-list .gnb-dep1 {
		position:static;
		width:auto;
	}
	#gnb-list .gnb-d1-list {
		display:none;
		margin:5px 0;
		padding:10px;
		text-align:left; 
		background:#f7f7f7;
		-webkit-border-radius:10px; 
		-moz-border-radius:10px; 
		border-radius:10px;
	}
	#gnb-list .gnb-d1-item {
		padding:2px 0;
		font-size:14px;
	}
	#gnb-list .gnb-d1-item:last-of-type {
		padding:0;
	}
}




/***************** 메뉴 열고 닫는 버튼 *****************/

/*
 * 기본 스타일
*/

.top-nav-btn {
	position:absolute;
	z-index:10000;
	top:26px;
	right:-2%;
	width:40px;
	height:27px;
	margin-right:20px;
}
.top-nav-btn .pnb-bar {
	position:absolute;
	box-sizing:content-box;
	display:block;
	width:100%;
	height:3px;
	top:50%;
	margin-top:-1.5px;
	background-color:#363636;
	transition:background-color 0.35s ease-out;
}
.top-nav-btn .pnb-bar-top {
	margin-top:3px;
}
.top-nav-btn .pnb-bar-btm {
	margin-top:21px;
}

.top-nav-btn .pnb-bar-top,
.top-nav-btn .pnb-bar-btm {
	top:0;
	transition:top 0.35s ease-out, margin-top 0.35s ease-out, transform 0.35s ease-in 0.35s;
}

/*
 * 반응형 스타일
*/

@media screen and (min-width:1200px) {
	.top-nav-btn { display:none; }
}

@media screen and (max-width:768px) {
	.top-nav-btn { top:20px; }
}



/***************** 서브 메뉴 열고 닫는 버튼 *****************/

.gnb-dep1-toggle {
	position:absolute;
	top:0;
	right:0;
	width:30px;
	height:20px;
	background-color:transparent;
	border:0;
}
.gnb-dep1-toggle::before,
.gnb-dep1-toggle::after {
	content:'';
	position:absolute;
	width:50%;
	height:2px;
	background-color:#858585;
	transition:transform 0.35s ease-in-out;
}

.gnb-dep1-toggle::before {
	left:3px;
	transform:rotate(45deg);
}

.gnb-dep1-toggle::after {
	right:3px;
	transform:rotate(-45deg);
}

.gnb-dep1-toggle.close::before {
	transform:rotate(-45deg);
}

.gnb-dep1-toggle.close::after {
	transform:rotate(45deg);
}

/*
 * 반응형 스타일
*/

@media screen and (min-width:1200px) {
	.gnb-dep1-toggle { display:none; }
}


/***************** 메뉴 열렸을때 관련 스타일 모음 *****************/

.top-navs--open {
	position:relative;
	z-index:1;
	overflow-y:hidden;
	height:100%;
	height:100vh;
}
	
.top-navs--open .top-navs {
	right:0;
	height:100%;
}

.top-navs--open .top-navs-curtain {
	visibility:visible;
	opacity:1;
	z-index:9998;
}

.top-navs--open .top-nav-btn .pnb-bar {
	opacity:0;
	background-color:#363636;
}
.top-navs--open .top-nav-btn .pnb-bar-top,
.top-navs--open .top-nav-btn .pnb-bar-btm {
	top:50%;
	margin-top:-1.5px;
	opacity:1;
}
.top-navs--open .top-nav-btn .pnb-bar-top {
	-webkit-transform:rotate(45deg);
	-ms-transform:rotate(45deg);
	transform:rotate(45deg);
}
.top-navs--open .top-nav-btn .pnb-bar-btm {
	-webkit-transform:rotate(-45deg);
	-ms-transform:rotate(-45deg);
	transform:rotate(-45deg);
}