﻿/*******************

header_type01 입니다.
쓰지 않는 소스는 삭제해주세요

********************/

#header_dim {
	position:fixed; 
	width:100%; 
	height:100%; 
	top:0; 
	left:0; 
	background: rgba(0,0,0,.4); 
	z-index:999; 
	display:none;
}
.open-menu #header_dim {
	display: block;
}
#wrap_header {
	position: fixed; 
	top:0; 
	left:0; 
	width:100%; 
	height:9rem; 
	z-index:99999;   
	display:flex;  
	align-items:Center; 
	-webkit-box-pack: justify; 
	-ms-flex-pack: justify; 
	justify-content: space-between;
	padding:0 4rem;
}
.logo {
	position: relative;
	z-index: 1;
}
.logo img {
	width:10rem;
}
.logo_c {
	display:none;
}
#wrap_header.active .logo .logo_w,
#wrap_header.header_top .logo .logo_w {
	display:none;
}
#wrap_header.active .logo .logo_c,
#wrap_header.header_top .logo .logo_c {
	display:block;
}
#wrap_header.active,
#wrap_header.header_top {
	background:#fff;
}

#wrap_header.header_top {
	box-shadow:0 10px 10px rgba(0,0,0,0.1);
}

.gnb {}
.gnb_depth1 > li {
	display:inline-block;
}
.gnb_depth1 > li > a {
	color:#fff; 
	font-size:2rem; 
	font-weight:600; 
	margin:0 4.8rem; 
	line-height:9rem; 
	cursor:pointer; 
	display:inline-block;
}
#wrap_header.active .gnb_depth1 > li > a,
#wrap_header.header_top .gnb_depth1 > li > a {
	color:#242424; 
	position:relative;
}
#wrap_header.active .gnb_depth1 > li.active > a,
#wrap_header.active .gnb_depth1 > li.on > a,
#wrap_header.header_top .gnb_depth1 > li.active > a,
#wrap_header.header_top .gnb_depth1 > li.on > a{
	color:#1097ff;
	position:relative;
}
#wrap_header.active .gnb_depth1 > li > a::after,
#wrap_header.header_top .gnb_depth1 > li > a::after{
	position:Absolute; 
	left:0; 
	bottom:0;
	width:0; 
	transition:all ease 0.5s; 
	height:0.4rem; 
	background:#1097ff; 
	content:'';
}
#wrap_header.active .gnb_depth1 > li.active > a::after,
#wrap_header.active .gnb_depth1 > li.on > a::after,
#wrap_header.header_top .gnb_depth1 > li.on > a::after {
	width:100%;
}
.gnb_depth2 {
	position:absolute; 
	left:0; 
	width:100%; 
	display:none; 
	background:#fff;
	text-align:center; 
	border-top:0.1rem solid #ddd; 
	padding:4rem 0; 
	box-shadow:0 0.1rem 0.1rem rgba(0,0,0,0.1);
}
.gnb_depth2 > li {
	display:inline-block; 
	vertical-align:top; 
	text-align:left; 
	margin:0 4.5rem;
}
.gnb_depth2 > li > a {
	font-size:2.2rem; 
	color:#222222; 
	font-weight:600; 
	cursor:pointer;
}
.gnb_depth3 {
	margin-top:1rem;
}
.gnb_depth3 > li,.gnb_depth3 > li a {
	cursor:pointer; 
	color:#555; 
	font-size:1.6rem; 
	line-height:2;
}
.gnb_depth3 > li:hover,
.gnb_depth3 > li:hover a {
	color:#1097ff;
}
#m_menu_bar {
	width: 2.5rem;
    height: 2.1rem;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    z-index: 1;
    cursor: pointer;
}
#m_menu_bar .bar {
	width: 100%;
    flex-shrink: 0;
    background-color: #000;
    height: 0.3rem;
    position: relative;
    margin-left: auto;
}
#m_menu_bar .bar1 {
    transition: 0.1s ease;
}
#m_menu_bar .bar2 {
    transition: 0.2s ease;
    transition-delay: 0.1s;
}
#m_menu_bar .bar3 {
    transition: 0.3s cubic-bezier(0, 0.28, 0.5, 1.29);
    transition-delay: 0.1s;
    bottom: 0;
}
.open-menu #m_menu_bar .bar1 {
    width: 0;
}
.open-menu #m_menu_bar .bar2 {
    transform: rotate(45deg);
}
.open-menu #m_menu_bar .bar3 {
    width: 100%;
    bottom: 0.9rem;
    transform: rotate(-225deg);
}
#snb.mobile {
	display: none;
}
#top_btn {
	position:fixed; 
	right:1rem; 
	bottom:5rem; 
	width:5rem; 
	height:5rem; 
	background:rgba(0,0,0,0.5); 
	z-index:9999; 
	border-radius:100%; 
	font-size:0; 
	line-height:0;
}
#top_btn::after {
	content:''; 
	position:absolute; 
	top:50%; 
	left:50%; 
	width:1rem; 
	height:1rem; 
	border:0; 
	border-top:0.2rem solid #fff; 
	border-right:0.2rem solid #fff; 
	transform:rotate(-45deg); 
	margin-top:-0.2rem; 
	margin-left:-0.6rem;
}
/* 띠배너 있을 경우 */
.all_wrap #wrap_header {
	position:absolute; 
	display:flex; 
	align-items:Center;justify-content: 
	space-between; 
	padding:0 6rem;
}
.all_wrap #wrap_header.header_top {
	position:fixed;
}
/* // 띠배너 있을경우 */

/* 미디어쿼리 */
@media screen and (max-width: 1024px) {

}
@media screen and (max-width: 768px) {	
	.logo img {
		width:8rem;
	}
	#wrap_header {
		padding:0 2rem;
		height:7rem;
	}
}