@charset "utf-8";

@import url('lib/animated.css');
@import url('lib/jquery-ui-1.10.4.custom.min.css');
@import url('lib/swiper.css');
@import url('lib/slick.css');
@import url('lib/daterangepicker.css');
@import url('lib/jquery.mCustomScrollbar.css');

/*
.txtNL {font-family:'Nixgon L';}
.txtNM {font-family:'Nixgon M';}
.txtNB {font-family:'Nixgon B';}
*/


/* ==============================
 * header
 * ============================== */
#headerWrap { position:fixed; top:0; left:0; right:0; z-index:10; height:120px; transition:all .3s ease; background:#fff;}
#headerWrap:after { content:''; display:block; clear:both;}
#headerWrap:before { content:''; display:block; position:absolute; top:40px; right:0; left:50%; height:80px; background:#111112;}
#headerWrap .logo { float:left;}
#headerWrap .logo a { display:block; width:200px; height:33px; margin-right:30px; margin-top:23px; font-size:0; background:url('../images/common/logo.png') no-repeat;}
#headerWrap .btnMenu { overflow:hidden; position:absolute; right:5px; top:50%; z-index:100; width:50px; height:50px; transform:translateY(-50%); font-size:0;}
#headerWrap .btnMenu span { position:absolute; left:50%; top:50%; width:20px; height:3px; font-size:0; background:#fff; transform:translate(-50%, -50%);}
#headerWrap .btnMenu span:after { content:''; display:block; position:absolute; top:-8px; right:0; width:100%; height:3px; background:#fff; transition:all .3s ease;}
#headerWrap .btnMenu span:before { content:''; display:block; position:absolute; top:8px; left:0; width:100%; height:3px; background:#fff; transition:all .3s ease;}
#headerWrap .btnMenu.on span { background:none; }
#headerWrap .btnMenu.on span:after { top:50%; transform-origin: 50% 50%; transform:translateY(-50%) rotate(45deg); }
#headerWrap .btnMenu.on span:before { top:50%; transform-origin: 50% 50%; transform:translateY(-50%) rotate(-45deg); }
#headerWrap .gnb { margin-top:40px; transition:all .3s ease;}
#headerWrap .gnb .bg { visibility:hidden; opacity:0; position:fixed; top:120px; left:0; width:100%; height:350px; box-shadow:0 3px 5px rgba(0,0,0,0.1); border-top: 1px solid #262627; background:#111112; transition: all .3s ease;}
#headerWrap .gnb.on { visibility:visible; opacity:1;}
#headerWrap .gnb.on nav { right:0%; transition:all .3s ease .3s;}
#headerWrap .gnb.on .rightHeader { opacity:1;}
#headerWrap .gnb.on .view { visibility:visible; opacity:1; position:absolute; top:80px; height:auto; border-top:0; border-bottom:0; background:none;}
#headerWrap .gnb.on .view ul { width:auto; padding-left:0px !important;}
#headerWrap .gnb.on .view ul li { float:none;}
#headerWrap .gnb.on .view ul li + li { margin-left:0;}
#headerWrap .gnb.on .view a { padding:15px 0;}
#headerWrap .gnb.on .view a br { display:block;}
#headerWrap .gnb.on .bg {visibility: visible; opacity: 1; transition: all .3s ease;}

#headerWrap nav { position:relative; display:flex; padding-left:79px; border-radius:20px 0 0 0; align-items:center; background:#111112;}
#headerWrap nav:after { content:''; display:block; position:absolute; bottom:0; width:20px; height:20px; left:-20px; background:url('../images/common/bg_nav_line.png') no-repeat;}
#headerWrap nav > ul { width:500px;}
#headerWrap nav > ul > li { float:left; position:relative; height:80px;}
#headerWrap nav > ul > li + li { margin-left:51px}
#headerWrap nav > ul > li > a { display:table-cell; height:80px; border-bottom:1px solid transparent; vertical-align:middle; text-align:left; font-size:20px; color:#ffffff;}
#headerWrap nav > ul > li.on > a,
#headerWrap nav > ul > li:hover > a { color:#5f80d9;}
#headerWrap nav .view { visibility:hidden; opacity:0; position:fixed; top:120px; left:0; width:100%; height:0; border-top:1px solid #262627; background:#111112;}
#headerWrap nav .view ul { width:1200px; margin:0 auto; padding-left:310px;}
#headerWrap nav .view ul li {float:left; }
#headerWrap nav .view ul li + li { margin-left:33px;}
#headerWrap nav .view a { display:inline-block; padding:20px 0; font-size:14px; color:#999999; font-weight:bold;}
#headerWrap nav .view a.on,
#headerWrap nav .view a:hover { color:#fff;}
#headerWrap nav .view a br { display:none;}
#headerWrap nav li:nth-child(2) .view ul { padding-left:310px;}
#headerWrap nav li:nth-child(3) .view ul { padding-left:602px;}
#headerWrap nav li:nth-child(4) .view ul { padding-left:747px;}
#headerWrap nav li:nth-child(5) .view ul { padding-left:560px;}

#headerWrap nav li.on .view { visibility:visible; opacity:1; height:60px; transition:all .3s ease;}

#headerWrap .topMenu { position:absolute; top:-25px; right:20px;}
#headerWrap .btnShop { display:inline-block; font-size:14px; color:#111111;}
#headerWrap .btnShop:before { content:''; display:inline-block; width:14px; height:16px; margin-top:-3px; margin-right:15px; vertical-align:middle; background:url('../images/common/icon_header_shop.png') no-repeat;}
#headerWrap .btnCatalogue { display:inline-block; position:relative; margin-left:38px; font-size:14px; color:#111111;}
#headerWrap .btnCatalogue:before { content:''; display:inline-block; width:16px; height:16px; margin-top:-3px; margin-right:15px; vertical-align:middle; background:url('../images/common/icon_header_catalogue.png') no-repeat;}
#headerWrap .btnCatalogue:after { content:''; display:block; position:absolute; top:50%;; left:-18px; width:1px; height:20px; margin-top:-10px; background:#e0e0e0;}

#headerWrap .languageBox { position:relative; width:140px; height:40px; margin-left:59px; border:1px solid #d7d7d7; border-radius:18px;}
#headerWrap .languageBox button { position:relative; width:100%; padding-left:20px; text-align:left; line-height:38px; font-size:12px; color:#fff; font-weight:bold;}
#headerWrap .languageBox button:after { content:''; display:block; position:absolute; top:50%; right:15px; width:8px; height:5px; margin-top:-2.5px; background:url('../images/common/icon_language_arrow.png') no-repeat;}
#headerWrap .languageBox button.on:after { transform:rotate(180deg);}
#headerWrap .languageBox .languageView { display:none; overflow:hidden; position:absolute; top:41px; left:0; width:100%; border:1px solid #d7d7d7; border-radius:15px; background:#fff;}
#headerWrap .languageBox .languageView a { display:block; width:100%; padding:10px 0 10px 20px; font-size:14px; color:#999999;}
#headerWrap .languageBox .languageView a:hover { color:#001111; background:#f3f3f3;}

#headerWrap .snsBox { position:relative; width:140px; height:40px; margin-left:4px; border:1px solid #d7d7d7; border-radius:18px;}
#headerWrap .snsBox button { position:relative; width:100%; padding-left:20px; text-align:left; line-height:38px; font-size:12px; color:#fff; font-weight:bold;}
#headerWrap .snsBox button:after { content:''; display:block; position:absolute; top:50%; right:15px; width:8px; height:5px; margin-top:-2.5px; background:url('../images/common/icon_language_arrow.png') no-repeat;}
#headerWrap .snsBox button.on:after { transform:rotate(180deg);}
#headerWrap .snsBox .snsView { display:none; overflow:hidden; position:absolute; top:41px; left:0; width:140px;}
#headerWrap .snsBox .snsView a { display:block; margin-bottom:2px;}

#headerWrap.on nav a { color:#111;}

/* ==============================
 * footer
 * ============================== */
#footerWrap {position:relative; padding:70px 0 70px; color:#fff;background:#28314a;}
#footerWrap .innerBox { padding-left:300px; transition:all .3s ease;}
#footerWrap .logo { position:absolute; top:0px; left:20px; width:150px; height:31px; font-size:0; background:url('../images/common/icon_footer_logo.png') no-repeat;}
#footerWrap .flex { display:flex;}
#footerWrap .texBoxLine { line-height:1.571;}
#footerWrap .texBoxLine span { font-weight:200; color:#fff;}
#footerWrap .texBoxLine strong { font-weight:normal;}
#footerWrap .texBoxLine span + span:before { content:''; display:inline-block; width:1px; height:10px; margin:0 10px; background:#535a6e;}
#footerWrap .texBoxLine .color { color:#9fb8ff;}
#footerWrap .copy { margin-top:45px; font-size:14px;}
#footerWrap .btnTop { position:absolute; bottom:-20px; right:20px; width:45px; height:45px; font-size:0; background:url('../images/common/btn_top.png') no-repeat;}

#footerWrap .snsLink { display:none; position:absolute; bottom:-80px; right:20px; z-index:1; font-size:0;}
#footerWrap .snsLink a { display:inline-block; width:40px; height:40px; font-size:0; margin-left:6px;}
#footerWrap .snsLink .sns1 { background:url('../images/common/btn_sns_1.png') no-repeat; background-size:cover;}
#footerWrap .snsLink .sns2 { background:url('../images/common/btn_sns_2.png') no-repeat; background-size:cover;}
#footerWrap .snsLink .sns3 { background:url('../images/common/btn_sns_3.png') no-repeat; background-size:cover;}
#footerWrap .snsLink .sns4 { background:url('../images/common/btn_sns_4.png') no-repeat; background-size:cover;}
#footerWrap .snsLink .sns5 { background:url('../images/common/btn_sns_5.png') no-repeat; background-size:cover;}
#footerWrap .snsLink .sns1:hover { background:url('../images/common/btn_sns_1_on.png') no-repeat; background-size:cover;}
#footerWrap .snsLink .sns2:hover { background:url('../images/common/btn_sns_2_on.png') no-repeat; background-size:cover;}
#footerWrap .snsLink .sns3:hover { background:url('../images/common/btn_sns_3_on.png') no-repeat; background-size:cover;}
#footerWrap .snsLink .sns4:hover { background:url('../images/common/btn_sns_4_on.png') no-repeat; background-size:cover;}
#footerWrap .snsLink .sns5:hover { background:url('../images/common/btn_sns_5_on.png') no-repeat; background-size:cover;}


@media screen and (max-width:1240px) {
	#headerWrap { height:70px;}
	#headerWrap:before { display:none;}
	#headerWrap .innerBox { height:70px;}
	#headerWrap .logo a { margin-top:15px;}
	#headerWrap .btnMenu { display:block;}
	#headerWrap .btnMenu span,
	#headerWrap .btnMenu span:after,
	#headerWrap .btnMenu span:before { background:#111112;}
	#headerWrap .gnb { margin-top:0;}
	#headerWrap .gnb .bg { visibility:hidden; opacity:0; position:fixed; top:0; left:0; width:100%; height:100% !important; background:rgba(0,0,0,0.8); transition: all .3s ease .3s;}
	#headerWrap .gnb.on .bg {visibility: visible; opacity: 1; transition: all .3s ease;}
	
	#headerWrap nav { overflow-y:auto; display:block; position:fixed; top:0; right:-100%; bottom:0; width:80%; padding-left:50px; padding-top:160px; margin-right:0; background:#fff; transition:all .5s ease;}
	#headerWrap nav > ul { display:none; width:auto; font-size:0;}
	#headerWrap nav > ul > li { float:none; display:inline-block; width:50%; height:auto; margin-bottom:50px; vertical-align: top;}
	#headerWrap nav > ul > li + li { margin-left:0;}
	#headerWrap nav > ul > li > a { display:block; height:auto; padding:5px 0; text-align:left; color:#001111; font-weight:bold;}
	#headerWrap nav .view { display:block !important; position:static; height:auto !important; border-bottom:0; text-align:left;}
	#headerWrap nav .view a.on, #headerWrap nav .view a:hover { color:#111112;}
	
	#headerWrap .gnb.on nav > ul { display:block;} 
	#headerWrap .gnb.on .view { position:static;}
	#headerWrap .gnb.on .view a { display:block; padding:10px 15px;}
	#headerWrap .gnb.on .view a br { display:none;}
	
	
	#headerWrap .topMenu { top:40px; left:50px;}
	#headerWrap .languageBox { position:absolute; top:75px; left:40px; margin-left:0; background:#111112;}
	#headerWrap .snsBox{ position:absolute; top:75px; left:200px; margin-left:0; background:#111112;}
	#headerWrap .snsBox .snsView { width:142px;}
	#headerWrap .snsBox .snsView a { border:1px solid #d7d7d7; border-radius:40px;}
	
	#footerWrap .innerBox { padding-left:200px;}
}

@media screen and (max-width:1024px) {
	#footerWrap .logo { top:-50px}
	#footerWrap .innerBox { padding-left:20px;}
	#footerWrap .btnTop { left:auto; right:20px; top:-60px;}
}

@media screen and (max-width:768px) {
	#headerWrap { height:50px;}
	#headerWrap .innerBox { height:50px;}
	#headerWrap .logo a { width:120px; height:25px; margin-top:18px; background-size:100%;}
	
	#headerWrap nav { padding-left:30px; padding-top:130px;}
	#headerWrap nav > ul > li { margin-bottom:30px;}
	
	#headerWrap .gnb.on .view a { display:block; padding:10px 0px; font-size:12px;}
	
	#headerWrap .languageBox { left:30px; margin-left:0; width:110px;}

	#headerWrap .snsBox { left:150px; width:110px;}
	#headerWrap .snsBox .snsView a { width:110px; box-sizing:border-box;}
	#headerWrap .snsBox .snsView a img { width:100%;}
	


	#headerWrap .btnShop:before { margin-right: 10px;}
	#headerWrap .btnCatalogue:before { margin-right: 10px;}

	

	#footerWrap { padding:50px 0 75px; font-size:12px;}
	#footerWrap .logo { top:-35px; width:100px; height:31px; background-size:100%;}
	#footerWrap .flex { display:block;}
	#footerWrap .texBoxLine { margin-top:30px; line-height:1.571;}
	#footerWrap .texBoxLine span { display:block;}
	#footerWrap .texBoxLine span + span { margin-top:5px;}
	#footerWrap .texBoxLine span + span:before { display:none;}
	#footerWrap .texBoxLine .color { color:#9fb8ff;}
	#footerWrap .copy { margin-top:35px; font-size:12px;}
	#footerWrap .btnTop { top:-60px;}
	#footerWrap .snsLink { position:static; margin-top:25px;}

}

@media screen and (max-width:400px) {
#headerWrap .topMenu { left: 32px;}
}