@charset "UTF-8";
.headerWrap{position:fixed; height:80px; top:0; left:50%;  z-index:1000; width:100%; z-index:99999999;  transform:translateX(-50%)}
.headerWrap .inner{position:relative;}
.logo{position:absolute; z-index:9999999;left:3%; transition:all 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940); top:50%; transform:translateY(-50%)}
.logo a{display:block;}
.logo img{max-width:100%; transition:all 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940);}
.m_logo{display:none;}

.headerWrap_sub{background:#fff !important; z-index:99999999999999; border-bottom:1px solid #ddd; transition:all 0.4s;}

.headerWrap_active{background:rgba(1,11,20,0.5) !important; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);}
.headerWrap__active{background:rgba(1,11,20,0.5)  !important; height:80px; transition:all 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940);backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);}
.logo_active{position:absolute; left:0; transform:translateY(5px); transition:all 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940);  z-index:9999999999;}
.logo_active img{width:90px; transition:all 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940);}

.top_section{position:absolute; right:3%; transform:translateY(-50%); top:50%; z-index:9999999;}
.top_section a{display:flex; align-items:center; background:#151922; border-radius:50px; padding:8px 10px;transition:all 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940);}
.top_section a span{padding-left:5px; color:#fff; font-size:15px; flex-grow:1; padding-right:5px;}
.top_section a img{max-width:100%; width:25px;}
.top_section a:hover{background:#d34c0a; box-shadow:0 0 15px rgba(255,112,49,0.5)}

.nav {position:relative; z-index:99999999; width:100%; height:80px; transition:all 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940);}
.nav__active{height:80px; transition:all 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940);}
.nav__active .nav-list{left:auto; right:-550px; transform:translateX(0); text-align:right;  transition:all 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940); z-index:999999;}
.nav__active .nav-list > li > a {font-size:16px; transition:all 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940);}

.nav .inner{position:relative; }
.nav-list{padding:0; list-style: none; width:100%; position:absolute;left:0;bottom:0; font-size:0; text-align:center; z-index:999999;}
.nav-list a {display: block; position: relative; zoom: 1; }
.nav-list > li {display:inline-block; position:relative; width:auto; padding:0; position: relative; z-index:9999;}
.nav-list > li > a {position:relative; font-size:16px; color:#fff; line-height:80px; padding:0 35px; min-width:80px; text-align:center; text-transform:uppercase; font-weight:500}
.nav-list > li:hover > a {color:#d34c0a !important;}
.nav-list > li:hover > a:after{position:absolute; content:""; width:100%; height:1px; background:#d34c0a; bottom:0; left:0}

/*** 2deths ***/
.nav-list ul {display: none; position: absolute; width: 100%;  top: 100%; left: 0; z-index:99999;}
.nav-list > li > ul{box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; padding:35px 0 15px 0px; min-height:430px; text-align:center;}
.nav-list > li > ul > li > a{line-height:20px;  font-size:16px; color:#222; margin:0 0 15px 0; letter-spacing: -1px; word-break: keep-all;}
.nav-list li ul li a:hover {color:#d34c0a; opacity:1}

#smenu_bar{position:absolute; top:-520px; width:100%; min-width:1200px; min-height:520px; z-index:9; background:rgba(255,255,255,0.9); transition:all 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940);  box-shadow:0px 1px 10px -3px rgba(0,0,0,0.2); overflow:hidden;}
#smenu_bar:after{position:absolute; content:""; width:100%; height:1px; background:#ddd; top:78px; left:0;}
.smenu_bar_active{min-height:520px !important;}

/* Mobile Menu Core Style*/
#mobile_menu{clear:both;}
.slicknav_menu {display:none; position:absolute; top:25px; width:100%; z-index:2;}
.slicknav_btn {position: relative; display: block; vertical-align: middle; float: right; padding:0; cursor: pointer; margin:0 20px 0 0;}
.slicknav_menu .slicknav_icon { float: left; margin:0;}
.slicknav_menu .slicknav_no-text { margin: 0 }
.slicknav_menu .slicknav_icon-bar {display: block; width:30px; height:2px; background-color: #fff;}
.slicknav_icon-bar_active{background-color: #ff7031 !important;}
.slicknav_menu .slicknav_icon-bar + .slicknav_icon-bar{width:15px}
.slicknav_btn .slicknav_icon-bar + .slicknav_icon-bar { margin-top:7px;}
.slicknav_nav {position: relative; top:35px; color:#fff; margin:0; padding:0; font-size:16px; clear: both; padding-top:0px;}
.slicknav_nav, 
.slicknav_nav ul {list-style: none; overflow:hidden; background:#f9f9f9;}
.slicknav_nav ul,
.slicknav_nav li { display: block; border-bottom:1px solid rgba(0,0,0,0.1); }
.slicknav_nav li > a{position:relative; text-transform:uppercase; font-weight:400}
.slicknav_nav li ul{border:0; background:#f4f4f4; padding:10px 0;}
.slicknav_nav li ul li{border-bottom:0;}
.slicknav_nav ul li a{ color:#888;}

.slicknav_nav > li > ul > li > a,
.slicknav_nav li ul li a.slicknav_item{font-size:16px; padding:10px 30px; }

.slicknav_nav .slicknav_item { display: block; cursor: pointer; }
.slicknav_nav .slicknav_item a {padding:0; margin:0;}
.slicknav_nav a { display: block ; color:#222; padding:20px 30px;}
.slicknav_menu:before,
.slicknav_menu:after { content: " "; display: table; }
.slicknav_menu:after { clear: both }

/* Button Text */
.slicknav_menu  .slicknav_menutxt {display: block; line-height: 1.188em; float: left;  color: #FFF; font-weight: bold; text-shadow: 0 1px 3px #000; display:none;}
.slicknav_nav .slicknav_txtnode {margin-left:15px;}

/*더보기 + 버튼*/
.slicknav_nav .slicknav_arrow {font-size: 0px; position: absolute; right: 0;  top:50%; width:10px;}
.slicknav_nav .slicknav_collapsed .slicknav_item span.slicknav_arrow::before{position: absolute; content: '+'; font-size:21px; opacity: 0.6; width: 10px; height: 10px;  line-height: 8px; margin-top:-5px; right:30px; color:#222}
.slicknav_nav .slicknav_open .slicknav_item span.slicknav_arrow::before{position: absolute; content: '-'; font-size:21px; opacity: 0.6; width: 10px; height: 5px;  line-height: 0; margin-top:-3px; right:29px;color:#222}

/*3deths*/
.slicknav_nav li ul li ul{background:#e4e4e4;}
.slicknav_nav li ul li ul li a{padding:10px 40px 7px 40px; font-size:13px;}

/*hover*/
.slicknav_nav > li:hover > a{background:#8195b7;}
.slicknav_nav > li:hover > a > a{color:#fff;}
.slicknav_nav > li:hover .slicknav_arrow {color:#fff;}
.slicknav_nav > li:hover ul .slicknav_arrow{color:#000;}

.slicknav_nav li ul li a:hover,
.slicknav_nav li ul li a.slicknav_item:hover a{color:#8195b7;}

.m_logo_active{}

#official_sns{display:none;}

/**************************************************************************************************************************************************************************/

/*responsive*/
@media screen and (max-width:1440px) {
    .logo{left:2%;}
	.top_section{right:2%;}
	.nav-list > li > a{padding:0 20px;}
}

@media screen and (max-width:1200px) {
	.logo img{width:150px;}
	.nav-list > li > a{padding:0 14px;}
}


@media screen and (max-width:1024px) {
    .headerWrap{position:absolute;  height:80px !important; line-height:80px !important; background:transparent; min-width:100%;}
    #mobile_menu h1{display:block;}
    .nav{display:none;}
	#gnb {display:none;}
	.slicknav_menu {display:block;}
	.pn-ProductNav_Wrapper {display:block;}
	
	.m_logo{display:block;}
	.m_logo a{display:block; max-width:100%; width:150px; position:relative; top:20px; left:20px; z-index:999999;}
	.m_logo img{width:100%;}

	.nav-list{transform:translateX(-50%); width:auto}

	#official_sns{display:black;}
}
@media screen and (max-width:480px){
    .slicknav_menu .slicknav_icon-bar {width:25px;}
    .slicknav_menu .slicknav_icon-bar + .slicknav_icon-bar{width:17px}
    .slicknav_btn .slicknav_icon-bar + .slicknav_icon-bar { margin-top:5px;}
}
@media screen and (max-width:430px){
    .m_logo a{width:130px;}
}