

/* =========================================================================================
 *  메뉴배경컬러와 높이
 * =========================================================================================*/

.header-wrap {
   position: relative;
}

/* 메뉴높이 및 배경컬러 */
.header {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 95px;
   overflow: hidden;
   border-bottom: 1px solid rgba(255,255,255,0.2);
   transition: all 0.5s;
   z-index: 10000;
}

/* 스크롤시 메뉴컬러 */
.header.fixed {
   background: #FFF;
   border-bottom: 1px solid #E0E0E0;
}

/* 펼쳐진 메뉴 배경컬러 */
.header.open {
   background: #FFF;
   border-bottom: 1px solid #E0E0E0;
}

.header.open:before {
   content: '';
   width: 100%;
   height: 1px;
   background: #E0E0E0;
   position: absolute;
   top: 95px;
   left: 0;
   z-index: -1;
}

/* 스크롤 시 메뉴스타일 */
.scroll {
   background: #FFF;
   border-bottom: 1px solid #E0E0E0;
}


	@media (max-width:1200px) {
	  
		.header {
		   height: 65px;
		}

		.header.open {
		   background: none;
		   border-bottom: 0;
		}
	}


	@media (max-width:480px) {

		.header {
		   background: #FFF;
		   height: 60px;
		}
		.header.fixed {
		   border-bottom: 0;
		}
	}


/* =========================================================================================
 *  로고설정
 * =========================================================================================*/

.header .header-logo {
   position: absolute;
   top: 0;
   left: 50px;
   height: 95px;   
   display: flex;
   align-items: center;
}

.header.open .header-logo .logo-off, 
.header.fixed .header-logo .logo-off {
   display: none;
   transition: all 0.3s ease;
}

.header.open .header-logo .logo-on, 
.header.fixed .header-logo .logo-on {
   display: block;
   transition: all 0.3s ease;
}

.scroll .header-logo .logo-off {display: none; transition: all 0.3s ease;}
.scroll .header-logo .logo-on {display: block !important; transition: all 0.3s ease;}
.header .header-logo .logo-on {display: none; transition: all 0.3s ease;}

.header .header-inner {position: relative; text-align: center;}
.header .header-logo img {display: block;}
.header .header-gnb {display: inline-block;}
.header .header-gnb .gnb-depth-1 {display: flex; align-items: center;}
.header .header-gnb .depth-1 {position: relative;}


	@media screen and (max-width: 1680px) {
		
		.header .header-logo {
		   left: 30px;
		}

		/* 로고 가로넓이 */
		.header .header-logo img {
		   width: 180px;
		}
	}

	@media screen and (max-width: 1280px) {
		
		/* 로고 가로넓이 */
		.header .header-logo img {
		   width: 160px;
		}
	}


	@media screen and (max-width: 1200px) {
		
		.header .header-logo {
		   left: 20px;
		   height: 65px;
		   z-index: 10;
		}

		/* 로고 가로넓이 */
		.header .header-logo img {
		   width: 130px;
		}		
	}


	@media screen and (max-width: 480px) {
		
		.header .header-logo {
		   left: 15px;
		   height: 60px;
		}

		/* 로고 가로넓이 */
		.header .header-logo img {
		   width: 120px;
		}
		.header .header-logo .logo-off {
		   display: none;
		}
		.header .header-logo .logo-on {
		   display: block;
		}

	}


	@media screen and (max-width: 319px) {
		
		/* 로고 가로넓이 */
		.header .header-logo img {
		   width: 110px;
		}
	}


/* =========================================================================================
 *  1차 대메뉴 설정
 * =========================================================================================*/

/* 마우스 OFF시 폰트컬러 및 크기 */
.header .header-gnb .depth-1 a {
   color: #FFF;
   font-size: 22px;
   font-weight: 500;
}

/* 마우스 OFF시 스크롤, 전체메뉴 펼쳐졌을때 폰트컬러 */
.header.fixed .header-gnb .depth-1 a,
.header.open .header-gnb .depth-1 a,
.scroll .header-gnb .depth-1 a {
   color: #1E1E1E;  
}

/* 1차메뉴 넓이,간격 (padding값으로 조절해주세요) */
.header .header-gnb .depth-1 > .depth-1-link > span {
   position: relative;
   display: block;
   padding: 0 25px;
   width: 100%;
   height: 95px;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: all 0.3s ease;
}

/* 마우스 on시 1차메뉴 넓이,간격 (padding값으로 조절해주세요) */
.header.open .header-gnb .depth-1 > .depth-1-link > span {
   padding: 0 40px;
   transition: all 0.3s ease;
}

/* 1차 메뉴 마우스 ON 라인 컬러 */
.header .header-gnb .depth-1 > .depth-1-link > span::before {
   background-color: #0F44A1;
   height: 2px;
   bottom: -1px;
   z-index: 10 !important;
}


.header .header-gnb .depth-1 > .depth-1-link > span::before {content: ""; display: block; position: absolute; left: 0; width: 0; 
transition: all 0.5s; transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); z-index: -1;}


	@media screen and (max-width: 1680px) {
	
		.header .header-gnb .depth-1 a {
		   font-size: 18px;
		}
		.header .header-gnb .depth-1 > .depth-1-link > span {
		   padding: 0 25px;
		}
		.header.open .header-gnb .depth-1 > .depth-1-link > span {
		   padding: 0 35px;
		}
	}


	@media screen and (max-width: 1280px) {
	
		.header .header-gnb .depth-1 a {
		   font-size: 17px;
		}
		.header .header-gnb .depth-1 > .depth-1-link > span {
		   padding: 0 20px;
		}
	}

	@media screen and (max-width: 1200px) {
	
		.header .header-gnb .depth-1 a {
		   font-size: 15px;
		}
		.header .header-gnb .depth-1 > .depth-1-link > span {
		   height: 65px;
		}
	}

	@media screen and (max-width: 480px) {
	
		.header .header-gnb .depth-1 > .depth-1-link > span {
		   height: 60px;
		}
	}


/* =========================================================================================
 *  2차 소메뉴 설정
 * =========================================================================================*/

.header .header-gnb .depth-1 .gnb-depth-2 {
   position: absolute; 
   top: 100%; 
   left: 0; 
   width: 100%; 
   padding-top: 15px; 
   padding-bottom: 50px !important;
   visibility: hidden; 
   opacity: 0; 
   transition: all 0.1s;
}

.header.open .header-gnb .depth-1 .gnb-depth-2 {
   visibility: visible; 
   opacity: 1; 
   transition: all 0.5s;   
}

/* 전체메뉴 펼쳐졌을때 2차메뉴영역 마우스 ON 배경컬러 */
.header.open .header-gnb .depth-1:hover .gnb-depth-2 {
   background: #F9F9F9;
}

/* 2차 소메뉴 폰트 및 세로간격 */
.header .header-gnb .depth-2 > .depth-2-link {
   display: block;
   padding: 5px 0;
   color: #787878 !important;
   font-size: 17px !important;  
}

/* 2차 소메뉴 마우스오버 컬러 */
.header .header-gnb .depth-2 > .depth-2-link:hover,
.header .header-gnb .depth-2 > .depth-2-link:focus {
   color: #0F44A1 !important;
   font-weight: 500 !important;
}


	@media screen and (max-width: 1280px) {
		
		.header .header-gnb .depth-2 > .depth-2-link {
		   font-size: 15px !important;  
		}
	}


/* =========================================================================================
 *  로그인 / 회원가입 / 고객상담 버튼 
 * =========================================================================================*/

/* 고객상담 버튼 */
a.qna-btn  {
   color: #FFF;
   font-size: 16px !important;
   font-weight: 500;
   padding: 4px 25px !important;
   border-radius: 50px;
   background: #1F90DF;
   display: inline-block;
}
.scroll a.qna-btn {
   color: #FFF !important;
}

/* 전체메뉴 펼쳐졌을때, 스크롤시 고객상담 버튼 */
.header.open a.qna-btn,
.header.fixed a.qna-btn {
   color: #FFF !important;
}

.member-btn {
   position: absolute;
   top: 0;
   right: 50px;
   width: auto;
}

.member-btn ul {
   height: 95px; 
   display: flex; 
   flex-wrap: wrap; 
   align-items: center; 
   justify-content: flex-end;
}

/* 로그인 회원가입 버튼 폰트스타일 */
.member-btn ul li a {
   color: #FFF;
   font-size: 13px;
   padding: 5px;
}

.member-btn ul li {
   margin-left: 15px;
}
.member-btn ul li:first-child {
   margin-left: 0;
}

.member-btn ul li:first-child:after {
   content: '';
   width: 1px;
   height: 13px;
   background: #FFF;
   position: absolute;
   top: 9px;
   right: -9px;
   opacity: 0.6;
}

/* 마우스 ON 로그인 회원가입 버튼 */
.header.open .member-btn ul li a,
.header.fixed .member-btn ul li a,
.scroll .member-btn ul li a {
   color: #666;
}
.header.open .member-btn ul li:after,
.header.fixed .member-btn ul li:after,
.scroll .member-btn ul li:after {
   background: #666;
}

.member-btn ul li {position: relative; display: flex;}


	@media (max-width: 1680px){
		
		.member-btn {
		   right: 30px;
		}
		.member-btn ul li a {
		   font-size: 12px;
		}
		a.qna-btn  {
		   font-size: 15px !important;
		   padding: 3px 20px !important;
		}
	}


	@media (max-width: 1280px){
		
		.member-btn ul {
		   height: 90px; 
		}
		.member-btn ul li {
		   margin-left: 8px;
		}
		.member-btn ul li:first-child:after {
		   right: -5px;
		}
		a.qna-btn  {
		   font-size: 14px !important;
		   padding: 3px 18px !important;
		}
	}

	@media (max-width: 1200px){
		
		.member-btn {
		   right: 60px;
		}
		.member-btn ul {
		   height: 65px; 
		}
	}

	@media (max-width: 820px){
		
		a.qna-btn  {
		   font-size: 13px !important;
		   padding: 3px 15px !important;
		}
	}

	@media (max-width: 480px){
		
		.member-btn {
		   right: 50px;
		}
		.member-btn ul {
		   height: 60px; 
		}
		.member-btn ul li a,
		.member-btn ul li a {
		   color: #666;
		}
		.member-btn ul li:first-child:after {
		   background: #666;
		}
		a.qna-btn  {
		   display: none !important;
		}
	}


	@media (max-width: 340px){
		
		.member-btn ul li a {
		   font-size: 11px;
		}	
		.member-btn ul li {
		   margin-left: 4px;
		}
		.member-btn ul li:first-child:after {
		   height: 10px;
		   right: -4px;
		}
	}

	@media (max-width: 319px){
		
		.member-btn ul li {
		   display: none;
		}
	}


/* =========================================================================================
 *  모바일 메뉴 설정
 * =========================================================================================*/

/* 모바일 메뉴 배경컬러 */ 
.header .mobile-gnb .sidebar-wrap .sidebar {
   position: absolute;
   top: 0;
   right: 0;
   width: 100%;
   max-width: 375px;
   height: 100%;
   background: #FFF;
   transform: translateX(100%);
   transition: all 0.5s;
}

/* 1차 대메뉴 폰트컬러 및 크기 */ 
.header .mobile-gnb .depth-1 > .depth-1-link {
   padding: 0 60px 0 25px;
   height: 60px;
   color: #000;
   font-size: 17px;
   font-weight: 600;
   border-bottom: 1px solid #EEE;
   display: flex;
   align-items: center;
   position: relative;
}
.header .mobile-gnb .depth-1:first-child > .depth-1-link {
   border-top: 1px solid #EEE;
}

/* 1차 대메뉴 클릭시 폰트컬러 */ 
.header .mobile-gnb .depth-1.open > .depth-1-link > span {
   color: #0F44A1;
}

/* 2차 소메뉴 펼쳐졌을때 배경컬러 */ 
.header .mobile-gnb .gnb-depth-2 {
   background-color: #F0F0F0;
   max-height: 0;
   overflow: hidden;
   padding: 0;
   text-align: left;
   box-sizing: content-box;
   transition: all 0.35s ease-in-out;
}

.header .mobile-gnb .depth-1.open .gnb-depth-2 {
   padding: 10px 0;
}

/* 2차 소메뉴 폰트컬러 및 크기 */
.header .mobile-gnb .depth-2 > .depth-2-link {
   font-size: 14px; 
   padding: 7px 25px;
   font-weight: 500;
   color: #777;
   display: block;
   visibility: hidden;
   opacity: 0;
   transition: all 0.35s;
}
 
/* 2차 소메뉴 클릭시 폰트컬러 */
.header .mobile-gnb .depth-1.open .depth-2 > .depth-2-link:hover,
.header .mobile-gnb .depth-1.open .depth-2 > .depth-2-link:focus {
   color: #000;
}


.header .mobile-gnb .sidebar-btn {display: none;}
.mobile-gnb button {border: 0; background: none;}


	@media (max-width: 1200px){
		
		.header .mobile-gnb .sidebar-btn i {
		   color: #FFF;
		   font-size: 36px;
		}
		.header.open .mobile-gnb.open .sidebar-btn i,
		.header.fixed .mobile-gnb .sidebar-btn i {
		   color: #000;
		}
		.header .mobile-gnb .sidebar-wrap {
		   position: fixed;
		   width: 100%;
		   height: calc(100vh - 65px);
		   top: 65px;
		   left: 0;
		   background-color: rgba(0,0,0,0.4);
		   visibility: hidden;
		   opacity: 0;
		   transition: all 0.5s;
		}
		.header {
		   position: fixed;
		   width: 100%;
		   overflow: visible;
		}
		.header .header-gnb {
		   visibility: hidden;
		   opacity: 0;
		   transition: all 0.3s;
		}
		.header .mobile-gnb {
		   display: block;
		   position: absolute;
		   top: 0;
		   right: 0;
		}

		.header .mobile-gnb .sidebar-btn {
		   display: inline-block;
		}
		.header .mobile-gnb .sidebar-btn {
		   position: relative;
		   width: 65px;
		   height: 65px;
		   z-index: 1;
		   cursor: pointer;
		   display: flex;
		   align-items: center;
		   justify-content: center;
		}
		
		.header .mobile-gnb.open .sidebar-wrap {
		   visibility: visible;
		   opacity: 1;
		}
	}


	@media (max-width: 480px){
		
		.header .mobile-gnb {
		   display: block;
		}
		.header .mobile-gnb .sidebar-wrap .sidebar {
		   max-width: 100%;
		}
		.mobile-gnb .mobile-logo img {
		   width: 120px;
		}
		.header .mobile-gnb .sidebar-btn i {
		   color: #000;
		}		
		.header .mobile-gnb .sidebar-btn {
		 width: 60px;
		 height: 60px;
		}
		.header .mobile-gnb .sidebar-wrap {
		   height: calc(100vh - 60px);
		   top: 60px;
		}
	}


.header .header-gnb .depth-1.current > a > span::before {content: ""; display: block; width: 100%;}
.header.open .header-gnb .depth-1 .gnb-depth-2 {visibility: visible; opacity: 1; transition: all 0.5s;}
.header .header-gnb .depth-2 > .depth-2-link {display: block; transition: color 0.1s;}
.header .mobile-gnb.open .sidebar-wrap .sidebar {transform: translateX(0);}
.header .mobile-gnb .gnb-depth-1 {height: 100%; overflow-y: auto;}
.header .mobile-gnb .depth-1 > .depth-1-link > span {position: relative; display: block; line-height: normal;}
.header .mobile-gnb .depth-1.open > .depth-1-link > span::before {width:calc(100% + 4px);}
.header .mobile-gnb .depth-1.open .depth-2 > .depth-2-link {visibility: visible; opacity: 1;}
.header .mobile-gnb .depth-1 > .depth-1-link:not(:only-child)::before {
   font-family: 'xeicon';
   content: "\e942";
   font-size: 20px;
   display: block;
   position: absolute;
   top: 50%;
   right: 25px;
   transform: translateY(-50%);   
   transition: all 0.3s ease;
}

.header .mobile-gnb .depth-1.open > .depth-1-link:not(:only-child)::before {
   font-family: 'xeicon';
   content: '\e945';
   transition: all 0.3s ease;
}