@charset "UTF-8";

.layout-header {
	width:100%;
	top:0;
	left:0;
	z-index:256;
}
	.layout-header .header-frame { width:100%; }

		.layout-header .logo {
			width:134px;
			height:59px;
		}
			.layout-header .logo a {
				display:block;
				width:100%;
				height:100%;
			}

	/* header end */
	
	.header-top .header-top--list .myservice-btn:hover,
	.header-top .header-top--list .myservice-btn:focus { text-decoration:none; }
	
	.entrie-menu {
		display:none;
		width:100%;
		min-height:100%;
		background-color:rgba(0,0,0,.95);
		position:fixed;
		top:0;
		left:0;
		z-index:300;
	}
		.entrie-menu .entrie-menu-frame {
			display:block;
			width:100%;
			position:relative;
		}
			.entrie-menu .entrie-menu-box {
				height:100vh;
				padding:100px 40px;
				background-color:rgba(255,255,255,1);
				position:absolute;
				top:0px;
				transition:0.3s all ease-in-out;
			}
			.entrie-menu .entrie-menu-box.open { right:0px; }
	
			.entrie-menu .entrie-main-menu {
				display:block;
				width:100%;
				height:calc(100% - 12.8px);
				overflow-y:auto;
			}
			
			.entrie-menu .entrie-menu-list {
				width:100%;
				display:block;
			}
			.entrie-menu .entrie-menu-list:not(:last-of-type) {
				margin-bottom:45px;
			}
				.entrie-menu .entrie-menu-link {
					display:flex;
					justify-content:space-between;
					align-items:center;
					font-family:'SEBANG_Gothic_Regular', sans-serif;
					font-weight:300;
					color:#000;
					letter-spacing:-.9px;
					transition:0.3s all ease-in-out;
					position:relative;
				}
				
				.entrie-menu .entrie-menu-link:hover,
				.entrie-menu .entrie-menu-link:focus { text-decoration:none; }
				
				.entrie-menu .entrie-menu-link:hover .tt,
				.entrie-menu .entrie-menu-link:focus .tt { color:#00a2a2; }
				
				.entrie-menu .entrie-menu-link.enter .tt,
				.entrie-menu .entrie-menu-link.active .tt { color:#00a2a2; }
		
					.entrie-menu .entrie-menu-link .tt {
						
						font-family:'SEBANG_Gothic_Regular', sans-serif;
					}
		
					.entrie-menu .entrie-menu-link .marker-box {
						width:28px;
						height:28px;
					}
						.entrie-menu .entrie-menu-link .marker {
							display:block;
							width:100%;
							height:100%;
							position:relative;
						}
						
						.entrie-menu .entrie-menu-link .marker .line {
							width:28px;
							display:block;
							height:2px;
							margin-top:-1px;
							margin-left:-14px;
							background-color:#000;
							position:absolute;
							left:50%;
							top:50%;
						}
						
						.entrie-menu .entrie-menu-link .marker .line.line1 { 
							transform:rotate(90deg);
							transition:0.3s all ease-in-out;
						}
						
						.entrie-menu .entrie-menu-link .marker .line.line2 { 
							transform:rotate(0deg);
							transition:0.3s all ease-in-out; 
						} 
		
						.entrie-menu .entrie-menu-link.enter { color:#196740; }
						.entrie-menu .entrie-menu-link.enter .marker .line { background-color:#196740; }
						.entrie-menu .entrie-menu-link.enter .marker .line.line1 { display:none; }
	
	
				.entrie-menu .entrie-sub-nav-frame {
					display:none;
					margin-top:20px;
					background-color:#fff;
					border-radius:5px;
					overflow:hidden;
				}
				
				.entrie-menu .entrie-sub-nav-list:not(:last-of-type) { border-bottom:1px dashed #ccc; }
				
					.entrie-menu .entrie-sub-nav-link {
						display:block;
						padding:15px;
						font-weight:600;
						color:#000;
						font-size:0.85em;
						transition:0.3s all ease-in-out;
					}
					
					.entrie-menu .entrie-sub-nav-linkfocus,
					.entrie-menu .entrie-sub-nav-link:hover {
						background-color:#eee;
						color:#000;
						text-decoration:none;
					}
	
		.entrie-menu .close-btn-box {
			display:block;
			position:absolute;
			right:30px;
			top:30px;
		}
		
			.entrie-menu .close-btn {
				display:block;
				width:45px;
				height:45px;
				position:relative;
			}
		
				.entrie-menu .active-line {
					width:45px;
					height:2px;
					position:absolute;
					left:0px;
					background-color:#000;
					transition:0.3s all ease-in-out;
				}
				
				.entrie-menu .active-line1 {
					top:21px;
					opacity:1;
					transform:rotate(225deg);
				}
				
				.entrie-menu .active-line2 {
					top:21px;
					opacity:1;
					transform:rotate(-45deg);
				}
		
				.entrie-menu .close-btn:hover .active-line1,
				.entrie-menu .close-btn:focus .active-line1 {
					transform:rotate(315deg);
					transition:0.3s all ease-in-out;
				}
				
				.entrie-menu .close-btn:hover .active-line2,
				.entrie-menu .close-btn:focus .active-line2 {
					transform:rotate(45deg);
					transition:0.3s all ease-in-out;
				}


/*** Mobile ***/
@media screen and (min-width:1px) and (max-width:639px) {
	.layout-header .header-frame { padding:15px 0; }
	
		.layout-header .logo {
			display:inline-block;
			width:134px;
			padding-left:15px;
		}
			.layout-header .logo a {
				background:url('/res/home/img/common/image_logo.png') no-repeat left center;
				background-size:contain;
			}
		
		
	
	/* 헤더탑 */
	.header-top { background-color:#fff; }
	
		.header-top .header-top--frame {
			display:flex;
			justify-content:center;
			margin:0 auto;
		}		
			.header-top .header-top--frame .link {
				display:block;
				width:100%;
				padding:6px 5px;
				font-size:.67em;
				text-align:center;
			}
			
			.header-top .header-top--frame .link:focus,
			.header-top .header-top--frame .link:hover {
				background-color:#757575;
				color:#fff;
			}

		.layout-header .all { top:15.5px; }
			
		.header-top .header-top--list .link.myservice-btn { top:27.6px; }

	.entrie-menu .entrie-menu-link {
		font-size:1.3em; 
		ont-weight:800;
	}
}

/*** Mobile & Tablet ***/
@media screen and (min-width:1px) and (max-width:1216px) {
	.layout-header {
		position:fixed;
		background-color:rgba(255, 255, 255, 1);
		border-bottom:1px solid rgba(0,0, 0, 0.3);
	}
		.layout-header .header-frame {
			overflow:hidden;
			position:relative;
		}
	
		.header-top .header-top--frame .header-top--list:not(.platform-login) { display:none; }
		
			.header-top .header-top--list .link.myservice-btn {
				width:auto;
				padding:11px 20px;
				background-color:#fff;
				border:1px solid rgba(0,0,0,.6);
				color:rgba(0,0,0,.6);
				font-size:0.8rem;
				font-weight:600;
				position:absolute;
				right:92px;
				transition:0.3s all ease-in-out;
			}
				.header-top .header-top--list .link.myservice-btn:hover,
				.header-top .header-top--list .link.myservice-btn:focus {
					background-color:#00a2a2;
					border-color:#00a2a2;
					color:#fff;
				}
		
			.layout-header .nav-box .main-menu { display:none; }
			
				.layout-header .all {
					position:absolute;
					right:15px;
				}
			
					.layout-header .all .all-btn {
						display:block;
						width:62px;
						height:59px;
						position:relative;
					}
					
					.layout-header .all .all-btn:hover,
					.layout-header .all .all-btn:focus{ background-color:#235f83; }
					
						.layout-header .active-line {
							width:24px;
							height:2px;
							position:absolute;
							right:50%;
							margin-right:-12px;
							background-color:#235f83;
							transition:0.3s all ease-in-out;
						}
							.layout-header .active-line1 {
								top:20px;
								opacity:1;
								transform:rotate(0deg);
								width:18px;
							}
							
							.layout-header .active-line2 {
								top:28px;
								opacity:1;
								transform:rotate(0deg);
								width:24px;
							}
							
							.layout-header .active-line3 {
								top:36px;
								opacity:1;
								transform:rotate(0deg);
								width:25%;
							}
					
							.layout-header .all-btn:hover .active-line,
							.layout-header .all-btn:focus .active-line {
								width:24px;
								background-color:#fff;
							}
							.layout-header .all-btn:hover .active-line1 { transition:0.3s all ease-in-out; }
							.layout-header .all-btn:hover .active-line2 { transition:0.3s all ease-in-out; }
							.layout-header .all-btn:hover .active-line3 { transition:0.3s all ease-in-out; }
							
							.layout-header .all-btn:focus .active-line1 { transition:0.3s all ease-in-out; }
							.layout-header .all-btn:focus .active-line2 { transition:0.3s all ease-in-out; }
							.layout-header .all-btn:focus .active-line3 { transition:0.3s all ease-in-out; }
							
			.sitemap-login--frame {
				display:flex;
				justify-content:flex-start;
				align-items:center;
				width:100%;
			}
				.sitemap-login--frame .login-btn--list {
					display:block;
					width:auto;
				}
				
				.sitemap-login--frame .login-btn--list:not(:last-of-type) { margin-right:10px; }
				
					.sitemap-login--frame .login-btn--list .link {
						display:block;
						width:100%;
						font-size:0.8rem;
						font-weight:600;
						color:#000;
					}
					
		.entrie-menu .entrie-menu-box {
			width:100%;
			right:-100%;
		}		
}

/*** Tablet ***/
@media screen and (min-width:640px) and (max-width:1216px) {
	.layout-header .header-frame { padding:25px; }
	
		.header-left--frame { padding-left:15px; }
			.layout-header .logo a {
				background:url('/res/home/img/common/logo_color.png') no-repeat center center;
				background-size:contain;
			}
			
			.layout-header .all { top:23.5px; }
	
			.header-top .header-top--list .link.myservice-btn { top:35px; }
	
		.entrie-menu .entrie-menu-link { font-size:1.5rem; }
}

/*** Tablet & Desktop ***/
@media screen and (min-width:640px) {
	.layout-header .logo { display:block; }
	
		.layout-header .logo a {
			display:block;
			background:url('/res/home/img/common/image_logo.png') no-repeat center center;
		}
	
	/* 헤더탑 */	
	.header-top .header-top--frame { 
		display:flex;
		justify-content:flex-end;
	}
	
		.header-top .header-top--frame .link {
			width:100%;
			display:block;
			font-size:.7em;
			text-align:center;
			padding:8px; 
			}
			
		.header-top .header-top--frame .link:focus,
		.header-top .header-top--frame .link:hover { color:#eaaa50; }	
}

/*** Desktop ***/
@media screen and (min-width:1217px) {
	.layout-header {
		background-color:rgba(255, 255, 255, 1);
		position:fixed;
	}
		.layout-header .drop-menu--background {
			display:none;
			width:100%;
			padding-top:45px;
			background-color:#2c3539;
			position:absolute;
			left:0;
			top:100px;
		}
		
		.layout-header .drop-menu--background.on { display:block; }
	
		.layout-header .header-frame {
			display:flex;
			justify-content:space-between;
			align-items:center;
			padding:0 32px;
		}
	
				.layout-header .header-frame .logo { margin-right:30px; }

					.layout-header .nav-box .main-menu {
						display:flex;
						justify-content:flex-start;
						margin-right:0px;
					}
						.layout-header .nav-box .main-menu .menu-list {
							display:block;
							min-width:140px;
							position:relative;
						}
							.layout-header .nav-box .main-menu .menu-link {
								display:flex;
								justify-content:center;
								align-items:center;
								width:100%;
								height:100px;
								padding-left:15px;
								padding-right:15px;
								font-family:'SEBANG_Gothic_Regular', sans-serif;
								font-size:1.15rem;
								font-weight:300;
								text-align:center;
								color:#000;
								transition:0.3s all ease-in-out;
								position:relative;
							}
                           
                          	.layout-header .nav-box .main-menu .menu-link .effect-line {
								display:block;
								width:0;
								height:5px;
								background-color:#ffd700;
								position:absolute;
								left:50%;
								bottom:0px;
								transform:translateX(-50%);
								transition:all 0.3s ease-in-out;
							}
                           
							.layout-header .nav-box .main-menu .menu-link:focus,
							.layout-header .nav-box .main-menu .menu-link:hover {
								color:#800020;
								text-decoration:none;
							}
							
							.layout-header .nav-box .main-menu .menu-link:focus .effect-line,
							.layout-header .nav-box .main-menu .menu-link:hover .effect-line { width:100%; }
							
							.layout-header .nav-box .main-menu .menu-link.enter { color:#2c3539; }							
							.layout-header .nav-box .main-menu .menu-link.active { color:#2c3539; }
							.layout-header .nav-box .main-menu .menu-link.active .effect-line {
								width:100%;
								background-color:#2c3539;	
							}
							
							.layout-header .nav-box .main-menu .menu-link.enter .effect-line {
								width:100%;
								background-color:#ffd700;	
							}
							
							.layout-header .nav-box .main-menu .menu-link.active:hover .effect-line,
							.layout-header .nav-box .main-menu .menu-link.active:focus .effect-line {
								background-color:#ffd700;
							}

					.layout-header .sub-nav {
						display:none;
						width:100%;
						position:absolute;
						left:50%;
						bottom:-45px;
						transform:translateX(-50%);
						z-indeX:2;
					}
	
						.layout-header .sub-nav-menu {
							display:block;
							width:auto;
						} 
						
							.layout-header .sub-nav-menu .sub-nav-frame {
								display:flex;
								justify-content:center;
								align-items:center;
								width:100%;
							}
							
							.layout-header .sub-nav-menu .sub-nav-frame .sub-nav-list {
								display:block;
								width:auto;
							}

								.layout-header .sub-nav-menu .sub-nav-frame .sub-nav-link {
									display:flex;
									justify-content:center;
									align-items:center;
									width:100%;
									min-height:45px;
									padding-left:15px;
									padding-right:15px;
									font-size:0.85em;
									text-align:center;
									font-weight:600;
									color:#fff;
									white-space:nowrap;
								}
								.layout-header .sub-nav-menu .sub-nav-frame .sub-nav-link:focus,
								.layout-header .sub-nav-menu .sub-nav-frame .sub-nav-link:hover {
									color:#ffd700;
									text-decoration:none;
								}
		
	.header-top {
		display:flex;
		justify-content:flex-start;
		align-items:center;
	}
  				
  		.header-top .header-top--frame { align-items:center; }
  				
			.header-top .header-top--frame .link { color:#000; font-weight:600; }
		
		.header-top .all { display:none; }
	
	
	
		.entrie-menu .entrie-menu-box { width:30%; right:-30%; }
			.entrie-menu .entrie-menu-link { font-size:1.8em; font-weight:600; }
	
	.header-top .header-top--frame {  }
		.header-top .header-top--list:not(:last-of-type) { margin-right:10px; }
	 		
		.header-top .header-top--list .myservice-btn {
			padding:11px 20px;
			background-color:#2c3539;
			border-radius:5px;
			color:#fff;
		}
		
		.sitemap-login--frame { display:none; }
}