@charset "utf-8";

/* ****************************************************************************************** *
 * GNUWIZ / wizwic custom
 * header basic type
 * ****************************************************************************************** */
#header{position:absolute; width: 100%; z-index:1000; -webkit-transition:all .3s ease; transition:all .3s ease; }
#header.fixed{position:fixed; top:0; left:0; width:100%; }
#header:hover:after, #header.fixed:after, #header.sub:after { position: absolute; width: 100%; bottom: 0; border-bottom: 1px solid rgba(255,255,255,0.1);}
.clearfix:before, .clearfix:after{content:""; display:block; clear:both;}
.gw_boundary_wide{ width: 100%; display: block; max-width:1920px; margin:0 auto; padding: 0 140px; }
#header.sub .gnb > .gnb_item { line-height: 62px }
#header.sub .gw_header_container #logo{ height: 60px; }


/* .gw_header_container logo */
.gw_header_container{position:relative; z-index: 9}
.gw_header_container #logo{ float: left; width:297px; height: 90px; margin-right: 80px; }
.gw_header_container #logo a { height: 100%; display: block; }
.gw_header_container #logo a:before { display: inline-block; height: 100%; vertical-align: middle; content: '';}
#header.fixed .gw_header_container #logo{ height: 60px; /*-webkit-transition:all .3s ease; transition:all .3s ease;*/}
.gw_header_container #logo img{ height: 20px; vertical-align: middle; /*-webkit-transition:all .3s ease; transition:all .3s ease;*/}
.gw_header_container #logo img.fixed{}
#header.fixed .gw_header_container #logo img,
#header.sub .gw_header_container #logo img { height: 17px}

/* 1차 메뉴 gnb */
.gw_gnb_container{position:relative; float: left; font-size:0; width:calc(100% - 377px); }
.gnb{float:left; width:calc(100% - 52px); font-size:0}
.gnb > .gnb_item{float:left; display:inline-block; margin: 0 18px; line-height:90px; font-size:16px; font-weight: 500; vertical-align:top;  letter-spacing: -0.5px}
#header.fixed .gnb > .gnb_item { line-height: 62px;}
/*.gnb > .gnb_item:after{content:""; position:absolute; bottom:0; left:51%; right:51%; height:2px; background:#ab9b85; 
	-webkit-transition:all .3s ease; transition:all .3s ease;}*/
.gnb > .gnb_item > a{ position:relative; display:block; height: 100%; color:#ddd; padding: 0 16px; }
.gnb > .gnb_item > a:after{content:""; position:absolute; bottom:0; left:51%; right:51%; height:2px; background:#fff; 
	-webkit-transition:all .3s ease; transition:all .3s ease;}
.gnb > .gnb_item:hover > a {color:#fff;}

.gnb > .gnb_item:nth-child(6),
.gnb > .gnb_item:nth-child(7) { float: right; font-size: 14px; margin: 0 8px;}
/*.gnb > .gnb_item:nth-child(6) > a:before{ position: absolute; left: -10px; top:30px; content: ''; display: block; height: 12px; border-left: #aaa 1px solid}*/

.gnb > .gnb_item > .lnb{opacity:0; visibility:hidden; position:absolute; top:60px; left: 0px; width:100%; padding-top: 20px; text-align:left; 
	-webkit-transition:all .25s ease-out; transition:all .25s ease-out;}
.gnb > .gnb_item > .lnb.on{opacity:1; visibility:visible; top:80px; z-index:99;}
#header.fixed .gnb > .gnb_item > .lnb,
#header.sub .gnb > .gnb_item > .lnb { padding-top: 0}
.gnb > .gnb_item > .lnb h3 {font-size: 22px; font-weight: 500; position: absolute; left: -280px; color: #fff}

.gnb > .gnb_item:first-child > .lnb { top: 180px; left: -300px; width: 300px; display: block}
.gnb > .gnb_item:first-child > .lnb h3 { left: 0; top: -80px;}
.gnb > .gnb_item:first-child > .lnb > .lnb_item { width: 100%; line-height: 1.5; padding: 0; float: left }


/* 2차 메뉴 lnb dropdown menu */
.lnb > .lnb_item{font-size:15px; padding: 0 30px; display: inline-block; -webkit-transition:all .3s; transition:all .3s;}
.lnb > .lnb_item:last-child{border-bottom:0;}
.lnb > .lnb_item > a{position:relative; display:inline-block; padding:10px 0; color:#bbb; line-height:initial; -webkit-transition:all .3s; transition:all .3s;}
.lnb > .lnb_item > a:after {content:""; position:absolute; bottom:8px; left:51%; right:51%; height:1px; background:#fff; 
	-webkit-transition:all .3s ease; transition:all .3s ease;}
.lnb > .lnb_item > a:hover {} 
.lnb_bg {opacity:0; visibility:hidden; position:absolute; top:0px; left:0; width:100%; height:90px; background-color: rgba(0,0,0,0.85); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); ;
	-webkit-transition:all .3s ease-out; transition:all .3s ease-out; z-index: -1 }
.lnb_bg.on{opacity:1; visibility:visible; top:0px; height:500px; border-bottom: 1px solid rgba(255,255,255,0.2)}
#header.fixed .lnb_bg {opacity:1; visibility:visible; height:62px;}
#header.fixed .lnb_bg.on{height:500px; }
#header.sub .lnb_bg {opacity:1; visibility:visible; height:62px; background-color: rgba(0,0,0,0.85); }
#header.sub .lnb_bg.on{ height:200px; }

/* hover */
.gnb_item > a:hover:after{left:0; right:0;}
.lnb_item.active > a,
.lnb_item:hover > a{color:#fff;}
.lnb_item.active > a:after,
.lnb_item:hover > a:hover:after{left:0; right:0;}


/* search button */
.search_btn{ position: relative; float: right; margin-right: -14px; display:inline-block; width:52px; height:90px; font-size:20px; text-align:right; cursor:pointer;}
#header.fixed .search_btn, 
#header.sub .search_btn,
#header.fixed .menu_btn, 
#header.sub .menu_btn {height:62px;}
.search_icon{vertical-align:middle;}

/* gw_utill_container */
.gw_utill_container{position:absolute; top:50%; right:0; margin-top:-14px; text-align:right; font-size:0;}
.gw_utill_container > ul, .gw_utill_container > div{display:inline-block;}
.gw_utill_container .utill{font-size:0;}
.gw_utill_container .utill > li{display:inline-block; padding-left:4px; font-size:12px; position:relative;}
.gw_utill_container .utill > li a{color:#96989c;}
.gw_utill_container .utill > li span{display:block; padding:4px 12px; border:1px solid #96989c; border-radius:14px; -webkit-transition:all .3s ease-out;
	transition:all .3s ease-out;}
.gw_utill_container .utill > li span:hover{background:#5bb6e2; border-color:#5bb6e2; color:#fff;}

/* 로그인 시 admin menu */
.gw_utill_container .utill_admin{position:fixed; top:50%; right:80px; -webkit-transform:translateY(-50%); transform:translateY(-50%); width:120px; 
	background:#fff; box-shadow:0 2px 10px 0 rgba(0,0,0,0.1); text-align:left; font-size:14px;}
.gw_utill_container .utill_admin h5{padding:.75rem 1rem; background:#5bb6e2; color:#fff; font-size:14px;}
.gw_utill_container .utill_admin a{display:block; padding:.75rem 1rem; border-bottom:1px solid #f1f1f1; -webkit-transition:all .3s ease-out;
	transition:all .3s ease-out;}
.gw_utill_container .utill_admin a:hover{background:#f7f7f7;}

/* menu button */
.menu_btn{display:none; position:absolute; top:0; right:0; margin-right: -14px; width:52px; height:90px; cursor:pointer;}
.menu_icon{position:absolute; top:50%; left:50%; -webkit-transform:translateY(-50%, -50%); transform:translate(-50%, -50%); width:24px; height:20px; z-index:999;}
.menu_icon > span{display:block; position:absolute; right:0; width:100%; height:2px; background:#fff; 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;width: 80%}
.menu_icon > span:nth-child(3){top:16px;}
.menu_icon > span:nth-child(4){top:8px; opacity:0}
.search_btn:hover .menu_icon > span:nth-child(2){ width: 100%}
.search_btn:hover .menu_icon > span:nth-child(3){ width: 80%}

/* gnb all container */
.gnb_all_container{position:fixed; top:0; right:-100%; max-width:320px; width:100%; height:100%;background:#000; 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_container.open:after { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.85); /*-webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);*/ z-index: -1}
.gnb_all_inner{position:relative;}

/* gnb all close button */
.gnb_all_close_btn{position:absolute; top:12px; 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_white.svg') no-repeat center center; background-size: 26px 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 .logo img { height: 20px}
.gnb_all_utill{margin-bottom:10px; padding:16px 24px; 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 item 전체메뉴 */
.gnb_all{}
.gnb_all_item{font-size:18px; position:relative;}
.gnb_all_item > a{display:block; height:56px; padding:14px 24px; line-height:28px; color:#fff;}
.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:transparent;}
.lnb_all{display:none; background:#161616; padding:15px 40px 30px;}
.lnb_all_item{padding:2px 0; font-size:15px;}
.lnb_all_item > a { color:#eee; padding:8px 0; width: 100%; display: inline-block}
.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 h1 { position: absolute; top:35px; left: 50%; -webkit-transform:translateX(-50%); transform:translateX(-50%);} 
.gw_search h1 img { width: auto; height: 40px; }
.gw_search_inner{ height: 100vh;  background:#000; box-shadow:0 10px 10px 0 rgba(0,0,0,0.1); position:relative; padding: 0 120px}
.gw_search_boundary{position: relative; width:100%; margin:auto; padding:120px 0 60px;}
.gw_search_close_btn{position:absolute; top:15px; right: 0; 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_white.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%; max-width: 768px; height:65px; margin: 0 auto;margin-bottom:24px; position:relative;}
#gw_search_field:after{content:""; position:absolute; bottom:-2px; left:0; width:100%; height:2px; background:#aaa;}
#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; background: #000; color: #fff}
.gw_search_submit_btn{position:absolute; top:0; right:0; width:48px; height:100%; border:none; outline:none; background:transparent; font-size:24px; color:#fff;}

#popular { max-width: 768px; margin: 15px auto !important; }
#top_sitemap { padding-top: 50px; padding-bottom: 50px;}
#top_sitemap .gw_footer_gnb .gnb_item {padding-bottom: 50px;}
#top_sitemap .gw_footer_gnb .gnb_item a.menu { font-size: 18px}
#top_sitemap .lnb > .lnb_item { font-size: 14px; }

/* 푸터 사이트맵 */
#top_sitemap .gw_footer_gnb_container{margin-bottom:0; padding:60px 0; background-color: #161616 }
#top_sitemap .gw_footer_gnb .f_gnb_item { width: calc((100% / 7) - 4px); display: inline-block; vertical-align: top}
#top_sitemap .gw_footer_gnb .f_gnb_item a.menu { font-size: 16px; color: #fff; padding-bottom: 15px; display: inline-block } 
#top_sitemap .gw_footer_gnb .f_gnb_item ul > li > a { font-size: 13px; color: #a3a3a3 } 
#top_sitemap .gw_footer_gnb .f_lnb > .f_lnb_item > a { padding: 7px 0; display: block}
@media screen and (max-width:768px) {
  #top_sitemap .gw_footer_gnb_container { padding:0;}
  #top_sitemap .gw_footer_gnb .f_gnb_item { width: calc(100% - 4px); border-bottom: #222 1px solid}
  #top_sitemap .gw_footer_gnb .f_gnb_item a.menu { padding: 10px 0 15px }
  #top_sitemap .gw_footer_gnb .f_gnb_item .f_lnb { display: none}
}



/* ****************************************************************************************** *
 * 1919px
 * ****************************************************************************************** */
@media screen and (max-width: 1919px) {
.gw_boundary_wide,
.main_boundary {
    padding: 0 120px;
}
/* 1919px end */



/* ****************************************************************************************** *
 * 1760px
 * ****************************************************************************************** */
@media screen and (max-width:1760px) {
	
	.gw_boundary_wide,
	.main_boundary { padding: 0 50px; }	
	.gw_utill_container{right:24px;}

}
/* 1760px end */





/* ****************************************************************************************** *
 * 1440px
 * ****************************************************************************************** */
@media screen and (max-width:1440px) {
	.gw_header_container #logo{ margin-right: 40px; }
	.gnb > .gnb_item { margin: 0 }

}
/* 1440px end */





/* ****************************************************************************************** *
 * 1200px
 * ****************************************************************************************** */
@media screen and (max-width:1200px) {
	.gw_boundary_wide,
	.main_boundary { max-width: 100%; padding: 0 30px}
  .gw_search_inner { padding: 0 40px}
	.gw_boundary{padding:0 24px;}
	.lnb > .lnb_item{font-size:12px;}
  .menu_btn,
	.search_btn{padding:27px 14px 29px; margin-right: -48px}
	.utill_admin{display:none;}
}
/* 1200px end */





/* ****************************************************************************************** *
 * 1023px
 * ****************************************************************************************** */
@media screen and (max-width:1023px) {
	
	.gw_boundary {padding:0 24px;}
	.gw_header_container{height:70px; position:relative;}
  #header.sub .gw_header_container,
  #header.fixed .gw_header_container { height:60px; }
	.gw_header_container > nav{float:right;}
	.gw_header_container #logo { height:60px; /*position: absolute; top:50%; left: 50%; transform: translate(-50%, -50%); float: none;*/ z-index: 1}
	.menu_btn{display:block; float:none; position:absolute; right:0; margin-right: -10px; width:52px; height:70px;}
	.search_btn{display:none; right:0; margin-right: -10px; width:52px; height:70px; }
	.search_icon{position:absolute; top:50%; left:50%; -webkit-trasform:translate(-50%, -50%); transform:translate(-50%, -50%)}

	.gw_utill_container, .gnb{display:none;}


}
/* 1023px end */





/* ****************************************************************************************** *
 * 768px
 * ****************************************************************************************** */
@media screen and (max-width:768px) {
	.gw_boundary_wide, .main_boundary {padding:0 20px;}
	.gw_search_boundary{padding:120px 24px 60px}
	.gw_header_container{height:60px;}
	.gw_header_container > #logo img{height:20px;}
	.menu_btn{width:40px; height:60px; font-size:18px;}
	.menu_icon{width:25px; height:16px;}
	.menu_icon > span:nth-child(2){top:8px}
	.menu_icon > span:nth-child(3){top:16px;}
	.search_btn{ width:40px; height:60px; font-size:18px;}
	.search_icon{}

	.gw_search{top:0;}
}
/* 768px end */





/* ****************************************************************************************** *
 * 767px
 * ****************************************************************************************** */
@media screen and (max-width:767px) {
	
	.gw_boundary{padding:0 20px;}
	.menu_btn{width:36px;}
	.gw_search_inner { padding:0}
	/* gw_search */
	.gw_search_boundary{padding:120px 48px 48px}
	.gw_search_close_btn{top:0;}
	.gw_search_input{font-size:20px;}
	#gw_search_field{height:52px; margin-bottom:10px;}
	.gw_search h1 { top:60px; }
	.gw_search h1 img { height:30px}
	
	.gw_search_boundary .gw_boundary { padding:0}
	.gw_search_boundary #top_sitemap { padding:30px 0 }
	.gw_search_boundary .gw_footer_gnb .f_gnb_item { border-bottom: #333 1px solid; }
	.gw_search_boundary .gw_footer_gnb .f_gnb_item a.menu { font-size:22px}
	.gw_footer_gnb .f_gnb_item a.menu { width:100%}
	
}
/* 767px end */





/* ****************************************************************************************** *
 * 480px
 * ****************************************************************************************** */
@media screen and (max-width:480px) {
	
	.gw_header_container{height:54px}
	.gw_header_container > #logo img{height:20px;}

	.search_btn, .menu_btn{height:54px;}
	.search_icon{top:48%;}

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

	/* gw_search */
	.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 */
	.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 */
	.gnb_all_container{max-width:260px;}
	.gnb_all_close_btn.open{right:260px;}

}
/* 320px end */