@charset "UTF-8";

/********** 헤더 **********/
.header {
	display:block;
	width:100%;
	background-color:#fff;
	border-bottom:1px solid #ccc;
	position:fixed;
	left:0;
	top:0;
	z-index:1250;
}

	.header img { vertical-align:top; }

	.header--frame {
		display:block;
		width:100%;
		background-color:#fff;
	}
		.header-logo { display:block; }
		.header-logo .logo { display:block; }
		.header-logo .logo a { display:inline-block; }

		.header-side {
			display:flex;
			justify-content:flex-start;
		}
			.header-side .top-side-item { 
				align-self:center;
				display:block;
				font-size:0.8rem;
				font-weight:600;
				color:rgba(0,0,0,.6);
			}

			/********** 헤더 - 전체메뉴 버튼 **********/
			.header--frame .side-btn-frame { 
				display:block;
				width:50px;
				height:50px;
			}
				.header--frame .side-btn-frame .side-btn-item { display:block; }
		
				.header--frame .all {
					width:100%;
					height:100%;
					position:relative;
					background-color:#fff;
				}
					.header--frame .all .line-mark {
						width:24px;
						height:2px;
						margin-left:-12px;
						position:absolute;
						left:50%;
					}
					.header--frame .all .line-mark.line1 {
						width:15px;
						background-color:#000;
						transition:0.3s all ease-in-out;
						top:16px;
						left:68%;
					}
					
					.header--frame .all .line-mark.line2 {
						background-color:#ac9511;
						transition:0.3s all ease-in-out;
						top:24px;
					}
					
					.header--frame .all .line-mark.line3 {
						background-color:#ac9511;
						transition:0.3s all ease-in-out;
						top:32px;
					}
									
				.header--frame .all:hover,
				.header--frame .all:focus {
					background-color:#977334;
					border-color:#977334;
				}
			
					.header--frame .all:hover .line-mark.line1,
					.header--frame .all:focus .line-mark.line1 {
						width:24px;
						margin-top:-1px;
						background-color:#fff;
						top:50%;
						left:50%;
						transition:0.3s all ease-in-out;
					}
				
					.header--frame .all:hover .line-mark.line2,
					.header--frame .all:focus .line-mark.line2 {
						opacity:0;
						transition:0.3s all ease-in-out;
					}
				
					.header--frame .all:hover .line-mark.line3,
					.header--frame .all:focus .line-mark.line3 {
						margin-top:-1px;
						background-color:#fff;
						top:50%;
						transform:rotate(90deg);
						transition:0.3s all ease-in-out;
					}
			
				.header--frame .all.active { background-color:#000; }
					.header--frame .all.active .line-mark { background-color:#fff; }
					.header--frame .all.active .line-mark.line1 {
						margin-top:-1px; 
						top:50%;
						transform:rotate(135deg);
						transition:0.3s all ease-in-out;
					}
					.header--frame .all.active .line-mark.line2 { display:none; }
					.header--frame .all.active .line-mark.line3 {
						margin-top:-1px; 
						top:50%;
						transform:rotate(-135deg);
						transition:0.3s all ease-in-out;
					} 
			
				.header--frame .all.active:hover,
				.header--frame .all.active:focus { background-color:#25597a; }
			
				.header--frame .all.active:hover .line-mark,
				.header--frame .all.active:focus .line-mark { transition:0.3s all ease-in-out; background-color:#fff; }
			
				.header--frame .all.active:hover .line-mark.line1,
				.header--frame .all.active:focus .line-mark.line1 { transform:rotate(225deg); }
			
				.header--frame .all.active:hover .line-mark.line3,
				.header--frame .all.active:focus .line-mark.line3 { transform:rotate(-45deg); }
			
/********** 사이트 맵 **********/
.site-map { display:none; }
	.site-map .main-category-link .new-window,
	.site-map .sub-category-link .new-window,
	.site-map .tail-category-link .new-window { display:inline-block; }

	.site-map .main-category-link .new-window.big {
		width:18px;
		height:18px;
		margin-left:15px;
		background:url('/res/img/home/common/image_icon_newWindow_big.png') no-repeat center center;
	}
	
	.site-map .sub-category-link .new-window.small {
		width:13px;
		height:13px;
		margin-left:10px;
		background:url('/res/img/home/common/image_icon_newWindow_small.png') no-repeat center center;
	}
	
	.site-map .tail-category-link .new-window.small {
		width:13px;
		height:13px;
		margin-left:10px;
		background:url('/res/img/home/common/image_icon_newWindow_small.png') no-repeat center center;
	}

	.site-map .site-map--close-btn {
		display:block;
		width:40px;
		height:40px;
		position:absolute;
	}
		.site-map .site-map--close-btn .line-mark {
			width:30px;
			height:2px;
			margin-left:-15px;
			background:#000;
			position:absolute;
			left:50%;
		}
		
		.site-map .site-map--close-btn .line-mark.line1 {
			margin-top:-1px;
			top:50%;
			transform:rotate(135deg);
			transition:0.3s all ease-in-out;
		}
		
		.site-map .site-map--close-btn .line-mark.line2 {
			margin-top:-1px;
			top:50%;
			transform:rotate(-135deg);
			transition:0.3s all ease-in-out;
		} 
	
	.site-map .site-map--close-btn:hover,
	.site-map .site-map--close-btn:focus { background-color:#237098; }
	
		.site-map .site-map--close-btn:hover .line-mark,
		.site-map .site-map--close-btn:focus .line-mark { transition:0.3s all ease-in-out; background-color:#fff; }
	
		.site-map .site-map--close-btn:hover .line-mark.line1,
		.site-map .site-map--close-btn:focus .line-mark.line1 { transform:rotate(225deg); }
		
		.site-map .site-map--close-btn:hover .line-mark.line2,
		.site-map .site-map--close-btn:focus .line-mark.line2 { transform:rotate(-45deg); }
	
	.site-map .side-menu {
		display:flex;
		justify-content:flex-start;
		width:100%;
	}
	
		.site-map .side-menu-item {
			display:block;
			align-self:center;
		}
		
		.site-map .side-menu-btn { 
			width:auto;
			font-weight:600;
			font-size:0.85em;
			color:rgba(0,0,0,.7);
		}
		
		.site-map .side-menu-btn:not(:last-of-type) {
			margin-right:10px;
			padding-right:10px;
			border-right:1px solid #ccc;
		}
	
	.site-map .title-box .m-txt {
		padding-top:10px;
		font-family:'SEBANG_Gothic_Bold', sans-serif;
		font-size:2rem;
		letter-spacing:-.9px;
		color:#000;
	}
	
	.site-map .title-box .s-txt {
		font-weight:600;
		word-wrap:break-word;
		word-break:keep-all;
		margin-top:10px;
	}

/********** responsive - start **********/

/* Mobile */
@media screen and (min-width:1px) and (max-width:320px) {
	.header-middle .side-btn-frame { top:42px !important; }
}

/* Mobile */
@media screen and (min-width:1px) and (max-width:639px) {
	/********** 헤더 - 전체메뉴 **********/
	.site-map .title-box .m-txt { font-size:1.4rem; font-weight:600; color:#000; }
	.site-map .title-box .s-txt { font-size:0.85rem; margin-top:10px; color:rgba(0,0,0,.6); }
}

/* Mobile & Tablet */
@media screen and (min-width:1px) and (max-width:1316px) {	
	.header { border-bottom:0px; }

	/********** 헤더 - top **********/
	.header--frame { position:relative; }
		.header--frame .header-top--frame {
			display:block;
			width:100%;
		}
	
		/********** 헤더 - top - logo **********/
		.header-logo { 
			width:100%;
			padding:18px;
		}
			.header-logo img { max-width:100%; }
			.header-logo .logo .pc-logo { display:none !important; }
			
		/********** 헤더 - top - side **********/
		.header-side .top-side-item:not(.side-btn-frame) { display:none; }
		
		/********** 헤더 - 전체메뉴 버튼 **********/
		.header--frame .side-btn-frame { 
			display:block;
			width:50px;
			height:50px;
			position:absolute;
			top:13px;
			right:15px;
		}

		/********** 헤더 - middle - 메뉴 **********/
		.header-middle .menu-frame { display:none; }
		
	/********** 헤더 - 전체메뉴 **********/
	.site-map {
		width:100%;
		height:100vh;
		position:fixed;
		left:0px;
		top:0px;
		z-index:2001;
	}
	
		.site-map .site-map--mask {
			display:block;
			width:100%;
			height:100%;
			background-color:rgba(0,0,0,.3);
		}
	
		.site-map .site-map--frame { 
			width:80%;
			height:100vh;
			padding:30px;
			background-color:#fff;
			position:absolute;
			right:-80%;
			top:0;
			transition:0.3s all ease-in-out;
		}
		.site-map .site-map--frame.open { right:0; }
			.site-map.all-menu-open .site-map--frame { right:0; }
		  
			.site-map .sitemap-menu--frame { height:100%; position:relative; }
		
				.site-map .title-box { display: block; width:100%; padding-bottom:20px; border-bottom:1px solid #ccc; }
	
				.site-map .marker-box {
					display:block;
					position:absolute;
				}
				.site-map .marker {
					display:block;
					width:100%;
					height:100%;
					position:relative;
				}
					.site-map .marker .line {
						display:block;
						height:2px;
						position:absolute;
						background-color:#000;
					}		
						.site-map .marker .line.line1 { 
							transform:rotate(90deg);
							transition:0.3s all ease-in-out;
						}
						.site-map .marker .line.line2 { 
							transform:rotate(0deg);
							transition:0.3s all ease-in-out; 
						} 
	
	.site-map .main-category-box {
		height:calc(100% - 100px);
		overflow-y:auto;
	}
	
		.site-map .main-category-box .main-category-list {
			width:100%;
			border-bottom:1px solid #ccc;
		}
			.site-map .main-category-link {
				display:block;
				width:100%;
				padding:20px 0;
				font-weight:600;
				font-size:1.05em;
				position:relative;
			}
				.site-map .main-category-link .marker-box {
					width:20px;
					height:20px;
					right:0px;
					top:20px;
				}
					.site-map .main-category-link .marker .line {
						width:20px;
						margin-top:-1px;
						margin-left:-10px;
						background-color:#000;
						left:50%;
						top:50%;
					}
	
			.site-map .main-category-link.enter { color:#32a38b; }
			.site-map .main-category-link.enter .marker .line { background-color:#32a38b; }
			.site-map .main-category-link.enter .marker .line.line1 { display:none; }
	
	.site-map .sub-category-box {
		display:none;
		padding:10px;
		padding-bottom:20px;
		padding-top:0px;
	}
	.site-map .sub-category-list:not(:last-of-type) { margin-bottom:10px; }
	
		.site-map .sub-category-link {
			display:block;
			width:100%;
			padding-left:12px;
			background-image:url('/res/img/home/common/img-dot.jpg');
			background-repeat:no-repeat;
			background-position:left 8.69px;
			position:relative;
			font-weight:600;
			font-size:0.91rem;
			line-height:1.4;
		}
	
			.site-map .sub-category-link .marker-box {
				width:14px;
				height:14px;
				right:0px;
				top:2px;
			}
				.site-map .sub-category-link .marker .line {
					width:14px;
					margin-left:-7px;
					margin-top:-1px;
					background-color:#000;
					left:50%;
					top:50%;
				}
	
			.site-map .sub-category-link.active { color:#17739e; }
				.site-map .sub-category-link.active .marker .line { background-color:#17739e; }
				.site-map .sub-category-link.active .marker .line.line1 { display:none; }
	
	.site-map .tt { display:block; width:100%; }
	
	.site-map .site-map--close-btn { top:0; right:0px; }
	
	.site-map .tail-category-box {
		display:none;
		padding-left:15px;
		padding-bottom:15px;
		margin-top:10px;
	}
	.site-map .tail-category-list:not(:last-of-type) { margin-bottom:10px; }
		.site-map .tail-category-link {
			display:block;
			width:100%;
			font-weight:600;
			font-size:0.85rem;
			color:rgba(0,0,0,.8);
		}
}

/* Tablet */
@media screen and (min-width:640px) and (max-width:1316px) {
	/********** 헤더 - 전체메뉴 **********/
	.site-map .title-box .m-txt { font-size:1.8rem; font-weight:600; color:#000; }
}

/* Tablet & Pc */
@media screen and (min-width:640px) {
	
}

/* Pc */
@media screen and (min-width:1317px) {	
	/********** 헤더 - top **********/
	.header--frame { 
		display:flex;
		justify-content:space-between;
		width:100%;
		padding:0 30px;
	}
	.header--frame .header-logo,
	.header--frame .header-middle,
	.header--frame .header-side { align-self:center; }
		
		.header-logo .mob-logo { display:none !important; }
	
	/********** 헤더 - middle - 메뉴 **********/
	.header-middle { 
		display:block;
		width:auto;
		background-color:#fff;
	}
		.header-middle--navi { 
			display:block;
			width:auto;
			margin-left:auto;
			margin-right:auto;
		}
		
			.header-middle .menu-frame {
				display:block;
				width:100%;
			}
				
				.header-middle .main-menu {
					display:flex;
					justify-content:flex-start;
					width:100%;
				}

					.header-middle .main-menu .menu-list { 
						display:block;
						width:auto;
						min-width:150px;
						flex:1;
						background-color:#fff;
						position:relative;
					}
					
					.header-middle .main-menu .menu-list.on { background-color:#fff; }

						.header-middle .main-menu .menu-link { 
							display:block;
							width:100%;
							height:52px;
							padding:40px 15px 50px 15px;
							background-color:#fff;
							background-repeat:no-repeat;
							background-position:right center;
							position:relative;
							text-align:center;
							font-family:'SEBANG_Gothic_Regular', sana-serif;
							font-size:1.2rem;
							letter-spacing:-.6px;
						}
												
						.header-middle .main-menu .menu-link:hover,
						.header-middle .main-menu .menu-link:focus,
						.header-middle .main-menu .menu-link.enter,
						.header-middle .main-menu .menu-link.active { text-decoration:none; }
						
						.header-middle .main-menu .menu-link.enter { color:#977334; }
						
						.header-middle .main-menu .menu-link.active { color:#977334; }
						
						.header-middle .main-menu .menu-link .active-line {
							display:block;
							width:0px;
							height:3px;
							background-color:#977334;
							position:absolute;
							left:50%;
							bottom:-1px;
							transition:0.3s all ease-in-out;
							transform:translateX(-50%);
						}
						
						.header-middle .main-menu .menu-link.enter .active-line,
						.header-middle .main-menu .menu-link.active .active-line { width:100%; }						
						
						.header-middle .main-menu .menu-link.active .active-line { background-color:#977334; }
						
						.header-middle .main-menu .menu-link.active.enter { color:#4a3732; }
						.header-middle .main-menu .menu-link.active.enter .active-line { background-color:#4a3732; }

					.header-middle .sub-nav {
						display:none;
						width:100%;
						padding:15px;
						background-color:#fff;
						border:1px solid #ccc;
						box-shadow:3px 3px 0 rgba(0,0,0,.3);
						position:absolute;
						z-index:105;
					}
					
					.header-middle .sub-nav.active { border-color:#fff; }
					.header-middle .sub-nav .sub-nav-frame { display:block; width:100%; }
					.header-middle .sub-nav .sub-nav-list { display:block; width:100%; }
					.header-middle .sub-nav .sub-nav-list:not(:last-of-type) { margin-bottom:8px; }
					.header-middle .sub-nav .sub-nav-link { 
						display:block;
						width:100%;
						padding:10px;
						font-weight:600;
						font-size:0.91rem;
						color:#000;
						text-align:center;
						transition:0.3s all ease-in-out;
					}
					
					.header-middle .sub-nav .sub-nav-link:hover,
					.header-middle .sub-nav .sub-nav-link:focus { 
						background-color:#9b7738;
						border-radius:5px;
						color:#fff;
						text-decoration:none;
					}

					.header-dropmenu--mask {
						display:none;
						width:100%;
						min-height:100%;
						background-color:rgba(0,0,0,.6);
						border-bottom:1px solid #ccc;
						position:fixed;
						top:0;
						left:0;
						z-index:104;
					}

					.header-middle .main-menu .new-window,
					.header-middle .sub-nav .new-window { display:inline-block; }
				
					.header-middle .main-menu .new-window.big { 
						width:18px;
						height:18px;
						margin-left:15px;
						background:url('/res/img/home/common/image_icon_newWindow_big.png') no-repeat center center;
					}
					
					.header-middle .sub-nav .new-window.small {
						width:13px;
						height:13px;
						margin-left:10px;
						background:url('/res/img/home/common/image_icon_newWindow_small.png') no-repeat center center;
					}
					
					.header-middle .sub-nav-link:hover .new-window.small,
					.header-middle .sub-nav-link:focus .new-window.small { background:url('/res/img/home/common/image_icon_newWindow_small_white.png') no-repeat center center; }

		/********** 헤더 - top - side **********/
		.header-side .top-side-item:not(:last-of-type) { margin-right:20px; }
		
		.header-side .top-side-item.side-btn-frame { margin-left:25px; }
		
		.header-side .top-side-item.all-btn:hover,
		.header-side .top-side-item.all-btn:focus {
			color:#66b4c6;
			text-decoration:none;
		}

	/********** 사이트 맵 **********/
	.site-map { 
		width:100%;
		height:100%;
		background-color:#fff;
		position:fixed;
		left:0;
		top:0;
		z-index:1251;
	}
		.site-map .site-map--mask { display:none; }
	
		.site-map .site-map--frame {
			display:block;
			width:100%;
			max-width:1300px;
			height:100%;
			margin-left:auto;
			margin-right:auto;
			padding:50px 0;
			position:relative;
		}
		
		.site-map .title-box {
			display:block;
			width:100%;
			padding-bottom:65px;
			position:relative;
		}
	
			.site-map .site-map--title {
				display:flex;
				justify-content:flex-start;
				 width:100%;
			}
			.site-map .site-map--title .m-txt { align-self:flex-end; }

		.site-map .site-map--close-btn { top:20px; right:0; }

		.site-map .sitemap-menu-frame { display:block; width:100%; }

			.site-map .main-category-box {
				display:flex;
				justify-content:flex-start;
				flex-wrap:wrap; 
				width:100%;
				max-height:calc(100vh - 248px);
				overflow-y:auto; 
			}
				.site-map .main-category-list { display:block; width:23.5%; }
				.site-map .main-category-list:not(:last-of-type) { margin-right:2%; }
				.site-map .main-category-list:nth-of-type(4n) { margin-right:0; }
				.site-map .main-category-list:nth-of-type(n+5) { margin-top:40px; }
		
					.site-map .main-category-link {
						display:block;
						width:100%;
						transition:0.3s all ease-in-out;
					}
						.site-map .main-category-link .tt {
							display:block;
							padding:10px;
							padding-bottom:20px;
							border-bottom:2px solid #000;
							font-family:'SEBANG_Gothic_Bold', sans-serif;
							font-size:1.21rem;
							letter-spacing:-0.6px;
							color:#000;
							transition:0.3s all ease-in-out;
						}
			
				.site-map .main-category-link:hover,
				.site-map .main-category-link:focus { text-decoration:none; }
				
				.site-map .main-category-link .tt.enter,
				.site-map .main-category-link .tt.enter {
					border-color:#9b7738;
					color:#9b7738;
				}
			
	
			.site-map .sub-category-box {
				display:block !important;
				width:100%;
				padding:21px 10px;
			}
				.site-map .sub-category-list {
					display:block;
					width:100%;
					border-bottom:1px dashed #ccc;
				}
				.site-map .sub-category-list:not(:last-of-type) {
					margin-bottom:15px;
				}
					.site-map .sub-category-link {
						display:block;
						padding-bottom:15px;
						transition:0.3s all ease-in-out;
					}
						.site-map .sub-category-link .tt {
							font-size:0.91rem;
							font-weight:600;
							color:rgba(0,0,0,1);
						}
					
					.site-map .sub-category-link:hover,
					.site-map .sub-category-link:focus { text-decoration:none; }
				
						.site-map .sub-category-link:hover .tt,
						.site-map .sub-category-link:focus .tt { color:#9b7738; }
		
		.site-map .tail-category-box {
			display:block !important;
			width:100%;
			margin-bottom:10px;
			padding-left:10px;
		}
			.site-map .tail-category-list { display:block; width:100%; }
			.site-map .tail-category-list:not(:last-of-type) { margin-bottom:7px; }
				.site-map .tail-category-link {
					display:bloock;
					width:100%;
					font-weight:600;
					font-size:0.85rem;
					color:rgba(0,0,0,.4);
				}
				.site-map .tail-category-link:hover,
				.site-map .tail-category-link:focus { color:rgba(0,0,0,1); }
	
	.site-map .side-menu { margin-top:44px; position:absolute; bottom:50px; left:0; }
}

/********** responsive - end **********/