@charset "utf-8";

/* ****************************************************************************************** *
 * GNUWIZ / wizwic custom
 * header basic type
 * ****************************************************************************************** */
#header{position:relative; box-shadow:0 2px 10px 0 rgba(0,0,0,0.1); z-index:1000;}
.clearfix:before, .clearfix:after{content:""; display:block; clear:both;}


/* gw_utill_container */
.gw_utill_container{height:40px;padding-top:20px; text-align:right; font-size:0; position:relative;}
.gw_utill_container .utill{font-size:0;}
.gw_utill_container .utill > li{display:inline-block; padding-left:28px; font-size:13px; position:relative;}
.gw_utill_container .utill > li:first-child{padding:0}
.gw_utill_container .utill > li:after{content:""; position:absolute; top:8px; right:-16px; width:4px; height:4px; background:#96989c; 
	border-radius:50%;}
.gw_utill_container .utill > li:last-child:after{display:none;}
.gw_utill_container .utill > li a{color:#96989c;}


/* .gw_header_container */
.gw_header_container{width:100%;height:72px; -webkit-transition:all .3s ease; transition:all .3s ease;}
.gw_header_container.fixed{position:fixed; top:0; left:0; height:64px; background:rgba(255,255,255,.95); box-shadow:0 2px 10px 0 rgba(0,0,0,0.1);}
.gw_header_container #logo, .gw_header_container nav{float:left;}
.gw_header_container #logo{width:200px; margin-top:10px;}
.gw_header_container #logo.fixed{margin-top:18px; -webkit-transition:all .3s ease; transition:all .3s ease;}
.gw_header_container #logo img{width:auto; height:40px; -webkit-transition:all .3s ease; transition:all .3s ease;}
.gw_header_container #logo img.fixed{height:32px;}
.gw_header_container .gw_gnb_container{width:calc(100% - 200px); text-align:right;}


/* 1차 메뉴 gnb */
.gnb{float:left; width:calc(100% - 80px); font-size:0}
.gnb > .gnb_item{display:inline-block; padding:0 16px; line-height:72px; font-size:16px; vertical-align:top; position:relative;}
.gnb > .gnb_item.fixed{line-height:64px;}
.gnb > .gnb_item:after{content:""; position:absolute; bottom:0; left:51%; right:51%; height:2px; background:#646873; 
	-webkit-transition:all .3s ease; transition:all .3s ease;}
.gnb > .gnb_item a{color:#646873;}
.gnb > .gnb_item > .lnb{display:none; position:absolute; top:72px; left:50%; margin-left:-90px;; width:180px; background:#fff; 
	text-align:left; box-shadow:0 1px 6px 0 rgba(0,0,0,0.2); -webkit-transition:display .3s; transition:display .3s; z-index:99;}
.gnb > .gnb_item > .lnb.fixed{top:64px}

/* 로고 옆 서브네브 */
.logo_side_nav {display: flex;align-items: center; gap: 15px;float: left; margin-top: 20px; }
.logo_nav_item {font-size: 15px;font-weight: 500;color: #333;text-decoration: none;padding: 5px 8px;transition: color 0.3s;white-space: nowrap;}
.logo_nav_item:hover {color: #63cdff;}
.logo_nav_item.active {color: #63cdff;font-weight: 700;}
.gw_header_container .gw_gnb_container {width: auto;float: right;text-align: right;}
.gnb {float: left;width: auto;font-size: 0;}

/* 모바일에서는 숨김 */
@media screen and (max-width: 1023px) {.logo_side_nav {display: none;}
.gw_header_container .gw_gnb_container {width: calc(100% - 200px);float: left;}}

/* 2차 메뉴 lnb dropdown menu */
.lnb > .lnb_item{line-height:1.5; border-bottom:1px solid #eef1f5; font-size:13px; -webkit-transition:all .3s; transition:all .3s;}
.lnb > .lnb_item:last-child{border-bottom:0;}
.lnb > .lnb_item > a{display:block; width:100%; height:100%; padding:12px 24px; -webkit-transition:all .3s; transition:all .3s;}
.gnb_item:hover .lnb{display:block;}
/* hover */
.gnb_item:hover:after{left:0; right:0;}
.lnb_item:hover{background:#fafafa;}
.lnb_item:hover > a{padding-left:20px; color:#3e4046;}

/* search button */
.search_btn{display:table; float:left; width:40px; height:70px; font-size:20px; text-align:center; cursor:pointer;}
.search_btn.fixed{height:64px;}
.search_icon{display:table-cell; vertical-align:middle;}

/* menu button */
.menu_btn{float:left; width:40px; height:40px; margin-top:20px; position:relative; cursor:pointer;}
.menu_btn.fixed{margin-top:15px;}
.menu_icon{position:absolute; top:50%; right:0; -webkit-transform:translateY(-50%); transform:translateY(-50%); width:24px; height:24px; z-index:999;}
.menu_icon > span{display:block; position:absolute; left:0; width:100%; height:2px; background:#646873; opacity:1;
	-webkit-transform:rotate(0deg); -moz-transform:rotate(0deg); -o-transform:rotate(0deg); transform:rotate(0deg);
	-webkit-transition: .25s ease-in-out; -moz-transition: .25s ease-in-out; -o-transition:.25s ease-in-out; transition:.25s ease-in-out;}
.menu_icon > span:nth-child(1){top:0;}
.menu_icon > span:nth-child(2){top:8px;}
.menu_icon > span:nth-child(3){top:16px;}
.menu_icon > span:nth-child(4){top:8px; opacity:0}

/* gnb all container */
.gnb_all_container{position:fixed; top:0; right:-100%; max-width:320px; width:100%; height:100%;background:#f7f7f7; box-shadow:0 3px 6px 0 rgba(0,0,0,0.1); z-index:8888;}
.gnb_all_container.open{right:0; overflow:auto;}
.gnb_all_inner{position:relative;}

/* gnb all close button */
.gnb_all_close_btn{position:absolute; top:6px; right:12px; width:40px; height:40px; border:none; background:transparent;}
.gnb_all_close_btn > span{width:100%; height:100%; position:relative;}
.gnb_all_close_btn > span:after{content:""; position:absolute; top:0; right:0; width:100%; height:100%; 
	background:url('img/icon_close.svg') no-repeat center center; background-size: 20px auto;
    -webkit-transform: rotate(0) translateZ(0); transform:rotate(0) translateZ(0); 
	-webkit-transition:-webkit-transform .3s; transition: -webkit-transform .3s;
    transition:transform .3s; transition:transform .3s, -webkit-transform .3s;}
.gnb_all_close_btn:hover > span:after{-webkit-transform:rotate(180deg) translateZ(0); transform:rotate(180deg) translateZ(0);}

/* gnb_all_utill */
.gnb_all_utill{margin-bottom:10px; padding:16px 24px; background:#fff; font-size:14px;}
.gnb_all_utill li{display:inline-block; padding-right:20px; position:relative;}
.gnb_all_utill li:after{content:""; position:absolute; top:7px; right:9px; width:1px; height:10px; background:#96989c;}
.gnb_all_utill li:last-child:after{display:none;}

/* gnb all, mobile menu */
.gnb_all{background:#fff;}
.gnb_all_item{font-size:15px; position:relative;}
.gnb_all_item > a{display:block; height:56px; padding:14px 24px; line-height:28px; color:#646873;}
.lnb_op_btn{position:absolute; top:13px; right:18px; width:30px; height:30px; border:0; border-radius:50%; outline:none; 
	background:url('img/select_arrow_bold.svg') no-repeat 50% 60%; background-size:14px auto; background-color:#f7f7f7;}
.lnb_op_btn.active{-webkit-transform:rotate(180deg); transform:rotate(180deg); -webkit-transition:rotate .3s ease; transition:rotate .3s ease;}
.lnb_all{display:none; background:#f7f7f7; padding:10px 24px;}
.lnb_all_item{padding:5px 0; font-size:14px;}
.m_menu.active{position:relative;}
.m_menu.active:after{content:""; position:absolute; bottom:0; left:0; width:100%; height:2px; background:#646873;}

/* gnb all overlay */
.gnb_all_overlay{display:none; position:fixed; top:0; left:0; bottom:0; right:0; background:rgba(0, 0, 0, .8); z-index:5555;}
.gnb_all_overlay.open{display:block;}

/* gw_search */
.gw_search{display:none; position:fixed; top:0; left:0; width:100%;z-index:9999;}
.gw_search_inner{background:#fff; box-shadow:0 10px 10px 0 rgba(0,0,0,0.1); position:relative;}
.gw_search_boundary{max-width:768px; width:100%; margin:auto; padding:120px 0 60px;}
.gw_search_close_btn{position:absolute; top:50px; left:50%; margin-left:-32px; width:64px; height:64px; border:none; background:transparent;}
.gw_search_close_btn span{display:block; width:100%; height:100%; position:relative;}
.gw_search_close_btn span:after{content:""; position:absolute; top:0; left:0; width:100%; height:100%; background:url('img/icon_close.svg') no-repeat center center;
	background-size:28px auto; -webkit-transform:rotate(0) translateZ(0); transform:rotate(0) translateZ(0); -webkit-transition:-webkit-transform .3s;
	transition:-webkit-transform .3s; transition:transform .3s; transition:transform .3s, -webkit-transform .3s}
.gw_search_close_btn:hover span:after{-webkit-transform:rotate(180deg) translateZ(0); transform:rotate(180deg) translateZ(0);}

#gw_search_field{width:100%; height:65px; margin-bottom:24px; position:relative;}
#gw_search_field:after{content:""; position:absolute; bottom:-2px; left:0; width:100%; height:2px; background:#dde0e3;}
#gw_search_field > form{width:100%; height:100%;}
#gw_search_field input.gw_search_input:focus{border:0 !important;}
.gw_search_input{display:block; width:100%; height:100%; padding:0; border:none; outline:none; font-size:24px;}
.gw_search_submit_btn{position:absolute; top:0; right:0; width:48px; height:100%; border:none; outline:none; background:transparent; font-size:24px; color:#acafb9;}





/* ****************************************************************************************** *
 * 1200px
 * ****************************************************************************************** */
@media screen and (max-width:1200px) {
	
	.gw_boundary{padding:0 24px;}
	.gnb > .gnb_item{padding:0 12px;}

}
/* 1200px end */



/* ****************************************************************************************** *
 * 1023px
 * ****************************************************************************************** */
@media screen and (max-width:1023px) {
	
	.gw_header_container{height:64px; position:relative;}
	.gw_header_container #logo{margin-top:18px;}
	.gw_header_container #logo img{height:32px;}

	.search_btn, .menu_btn{display:inherit; float:none; position:absolute; top:0; margin-top:15px;}
	.search_btn{right:60px; height:40px;}
	.menu_btn{right:24px;}
	.search_icon{position:absolute; top:4px; left:50%; -webkit-trasform:translateX(-50%); transform:translateX(-50%)}

	.gw_utill_container, .gnb{display:none;}


}
/* 1023px end */





/* ****************************************************************************************** *
 * 768px
 * ****************************************************************************************** */
@media screen and (max-width:768px) {
	
	.gw_search_boundary{padding:120px 24px 60px}
	.gw_header_container, 
	.gw_header_container.fixed{height:60px;}
	.gw_header_container #logo img, 
	.gw_header_container #logo img.fixed{height:30px;}
	.search_btn, .menu_btn, .menu_btn.fixed{margin-top:13px;}
}
/* 768px end */





/* ****************************************************************************************** *
 * 767px
 * ****************************************************************************************** */
@media screen and (max-width:767px) {
	
	.gw_boundary{padding:0 20px;}
	.gw_header_container #logo{left:20px;}
	.search_btn, .menu_btn{width:32px}
	.search_btn{right:54px;}
	.menu_btn{right:20px;}

	/* gw_search */
	.gw_search_boundary{padding:68px 48px 48px}
	.gw_search_close_btn{top:10px;}
	.gw_search_input{font-size:20px;}
	#gw_search_field{height:52px; margin-bottom:10px;}

}
/* 767px end */





/* ****************************************************************************************** *
 * 480px
 * ****************************************************************************************** */
@media screen and (max-width:480px) {
	
	.gw_header_container, .gw_header_container.fixed{height:54px}
	.gw_header_container #logo{left:15px}
	.gw_header_container #logo img, .gw_header_container  #logo img.fixed{height:24px;}

	.search_btn, .menu_btn, .menu_btn.fixed {margin-top:10px;}
	.search_btn{right:45px;}
	.menu_btn{width:30px; right:15px;}
	.menu_icon{width:22px;; height:22px;}
	.menu_icon > span:nth-child(2){top:7px;}
	.menu_icon > span:nth-child(3){top:14px;}

	.gnb_all_container{max-width:280px;}
	.gnb_all_close_btn.open{right:280px;}

	.gw_search_close_btn{top:5px;}
	.gw_search_boundary{padding:64px 36px 24px;}
	.gw_search_input, .gw_search_submit_btn{font-size:18px;}
	#gw_search_field{height:48px; margin-bottom:5px;}
	#popular li{font-size:12px;}

}
/* 480px end */





/* ****************************************************************************************** *
 * 375px
 * ****************************************************************************************** */
@media screen and (max-width:375px) {
	
	.gw_search_boundary{padding:64px 24px 24px;}
	.gw_search_input, .gw_search_submit_btn{font-size:16px;}
}
/* 375px end */





/* ****************************************************************************************** *
 * 320px
 * ****************************************************************************************** */
@media screen and (max-width:320px) {
	
	.gnb_all_container{max-width:260px;}
	.gnb_all_close_btn.open{right:260px;}

}
/* 320px end */

/* ****************************************************************************************** *
 * 모바일 리뉴얼 헤더 스타일 (1023px 이하)
 * ****************************************************************************************** */

/* 모바일용 마이페이지 버튼 - 기본 숨김 */
.mobile_mypage_btn {
    display: none;
}

/* 모바일용 상단 네비게이션 - 기본 숨김 */
.mobile_top_nav {
    display: none;
}

@media screen and (max-width: 1023px) {

    .gw_header_container { position: fixed !important; top: 0; left: 0; right: 0; z-index: 10001; background: #fff !important; height: 60px !important;}
    .mobile_top_nav { display: block; position: fixed !important; top: 60px; left: 0; right: 0; z-index: 10000; background: #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); border-top: 1px solid #e0e0e0; transition: transform 0.3s ease, opacity 0.3s ease; }
    .mobile_top_nav.hide { transform: translateY(-100%); opacity: 0; }
    /* body padding for fixed header */
    body { padding-top: 110px !important; /* 헤더 60px + topnav 50px */ padding-bottom: 80px !important;}
    #header {box-shadow: none;}
    .mobile_mypage_btn {display: block; position: absolute; left: 20px; top: 50%; transform: translateY(-50%); z-index: 10;}
    .mobile_mypage_btn .mypage_btn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; 
        background: #f5f5f5; color: #333; font-size: 16px; text-decoration: none; transition: all 0.3s ease; }
    .mobile_mypage_btn .mypage_btn:hover { background: #e0e0e0; color: #000; }
    .gw_header_container #logo { position: absolute !important; left: 50% !important; top: 50% !important; transform: translate(-50%, -50%) !important; 
        margin: 0 !important; width: auto !important; float: none !important;}
    .gw_header_container #logo img { height: 30px !important; width: auto !important; transition: height 0.2s ease; }
    .gw_header_container.scrolled #logo img { height: 35px !important;}
    .gw_header_container .gw_boundary { position: relative; min-height: 60px; height: 60px; }
    .search_btn { position: absolute !important; right: 52px !important; top: 50% !important; transform: translateY(-50%) !important; margin: 0 !important; height: 40px !important; float: none !important;}
    .menu_btn { position: absolute !important; right: 15px !important; top: 50% !important; transform: translateY(-50%) !important; margin: 0 !important; float: none !important; }
    .mobile_top_nav_inner { display: flex; justify-content: space-around; align-items: center; height: 50px; max-width: 600px; margin: 0 auto;}
    .top_nav_item { flex: 1;display: flex;align-items: center;justify-content: center;text-decoration: none; color: #666;font-size: 14px;font-weight: 500;
        transition: color 0.3s;padding: 10px 0;height: 100%;}
    .top_nav_item.active {color: #5BB6E2;font-weight: 700;border-bottom: 3px solid #5BB6E2;}
    .top_nav_item:hover {color: #5BB6E2;}
    .top_nav_item span {line-height: 1;display: block;}
    .gnb_all_top {display: flex;flex-direction: column;align-items: flex-start;padding: 15px 20px;background: #fff;position: relative;border-bottom: 1px solid #e0e0e0;}
    .gnb_all_close_btn {position: absolute;top: 15px;right: 20px;width: 30px;height: 30px;background: none;border: none;}
    .gnb_all_close_btn > span:after {background-size: 16px auto;}
    
    .gnb_all_utill {margin-bottom: 0;padding: 0;background: transparent;font-size: 13px;line-height: 1.8;display: flex;flex-wrap: wrap;}
    .gnb_all_utill li {display: inline-block;padding-right: 0; position: relative;}
    .gnb_all_utill li::after {content: '|';color: #ccc;margin: 0 8px;position: static;width: auto;height: auto;background: none;top: auto;right: auto;}
    .gnb_all_utill li:last-child::after {content: '';margin: 0;}
    .gnb_all_utill li a {color: #666;font-size: 13px;text-decoration: none;}
    .gnb_all_utill li a:hover {color: #5BB6E2;}
    
    /* 메뉴 리스트 스타일 */
    .gnb_all {background: #fff;list-style: none;padding: 0;margin: 0;}
    .gnb_all_item {border-bottom: 1px solid #f0f0f0; position: relative;list-style: none;}
    .gnb_all_item > a {display: block;padding: 12px 20px;height: auto;line-height: 1.5;font-size: 15px;color: #333;font-weight: 500;text-decoration: none;}
    .gnb_all_item > a:hover {color: #5BB6E2;}
    .gnb_all_item a.m_menu {padding: 12px 20px;display: block;text-decoration: none;color: #333;font-size: 15px;font-weight: 500;}
    .gnb_all_item a.m_menu:hover {color: #5BB6E2;}

    .lnb_op_btn {position: absolute;right: 20px;top: 8px;width: 30px;height: 30px;background: none !important;border: none;cursor: pointer;border-radius: 0;}
    .lnb_op_btn:before {content: '+';font-size: 20px;color: #999;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);background: none;}
    .lnb_op_btn.active:before {content: '-';}
    .lnb_op_btn.active {transform: none;}
 
    .lnb_all {display: none;background: #f9f9f9;padding: 10px 20px 10px 35px;list-style: none;}
    .lnb_all_item {padding: 8px 0;font-size: 14px;list-style: none;}
    .lnb_all_item a {color: #666;text-decoration: none;}
    .lnb_all_item a:hover {color: #5BB6E2;}
    

    .gnb_all_container {background: #fff;z-index: 10002;}
    .gnb_all_inner {padding: 0;}
    .gnb_all_overlay {z-index: 10001;}
}

@media screen and (max-width: 768px) {
    .gw_header_container,
    .gw_header_container.fixed {height: 60px !important;}
    .mobile_top_nav {top: 60px;}
}

/* @media screen and (max-width: 480px) {
    .gw_header_container,
    .gw_header_container.fixed {height: 54px !important;}
    .mobile_top_nav {top: 54px;}

    body {padding-top: 104px !important;}

    .mobile_mypage_btn {left: 15px;}
    .mobile_mypage_btn .mypage_btn {width: 32px;height: 32px;font-size: 14px;}
    .search_btn {right: 45px !important;}
    .menu_btn {right: 15px !important;}
} */