@charset "utf-8";
@import url('//cdn.jsdelivr.net/gh/moonspam/NanumSquare@1.0/nanumsquare.css');  /* font-family: 'NanumSquare'; */
@font-face {
    font-family: 'Pretendard';
    src: url('//cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Thin.woff') format('woff');
    font-weight: 100;
    font-style: normal;
}
@font-face {
    font-family: 'Pretendard';
    src: url('//cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
}
@font-face {
    font-family: 'Pretendard';
    src: url('//cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'Pretendard';
    src: url('//cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
}
@font-face {
    font-family: 'Pretendard';
    src: url('//cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-SemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
}
@font-face {
    font-family: 'Pretendard';
    src: url('//cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
}
@font-face {
    font-family: 'Pretendard';
    src: url('//cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-ExtraBold.woff') format('woff');
    font-weight: 800;
    font-style: normal;
}


html,body { font-family:'NanumSquare','Pretendard', "Apple SD Gothic Neo", "Malgun Gothic", Sans-serif; }
body {overflow-y:visible;overflow-x:auto;}
#doc {overflow:hidden;position:relative;background:#fff;min-width:360px; z-index:8999;min-width:360px;opacity:0;-webkit-transition: opacity 0.3s ease-out;-moz-transition: opacity 0.3s ease-out;-o-transition: opacity 0.3s ease-out;transition: opacity 0.3s ease-out;}
#doc.show{ transition-delay:0s; opacity:1;}
	@media only screen and (max-width:1200px){
		
	}
	@media only screen and (max-width:999px){
		
	}
	@media only screen and (max-width:680px){
		
	}
	@media only screen and (max-width:480px){
		
	}	
	

/*=======================================================
  css default
=========================================================*/
.div-cont {text-align:left;margin:0 auto; max-width:1210px; padding:0 20px; box-sizing:border-box;}
.div-cont:after {clear:both;content:"";display:block;}
	@media only screen and (max-width:1210px){
		
	}
	@media only screen and (max-width:999px){
		
	}
	@media only screen and (max-width:680px){
		.div-cont{padding:0 20px;}
	}
	@media only screen and (max-width:480px){
		
	}

.layer-ovclick{position:fixed;z-index:2600;width:100%;height:100%;left:0;top:0;background:rgba(0,0,0,0.8);cursor:pointer }
	@media only screen and (min-width:1000px){
		.layer-ovclick{display:none !Important}
	}



/*=======================================================
    z-index default
=========================================================*/
#header-wrap{position:fixed;z-index:2005;}
#container-wrap{position:relative;z-index:1005;}
#footer-wrap{position:relative;z-index:1007; }


/*=======================================================
    #header-wrap 
=========================================================*/
#header-wrap {left:0; width:100%; top:0; min-width:360px; box-sizing:Border-box;}
#header-wrap:after{position:absolute;left:50%; top:0; width:20000px;margin-left:-10000px;height:100%;background:#fff; box-sizing:border-box;z-index:-1;-webkit-transition: box-shadow 0.5s ease-out, background 0.5s ease-out;-moz-transition: box-shadow 0.5s ease-out, background 0.5s ease-out;-o-transition: box-shadow 0.5s ease-out, background 0.5s ease-out;transition: box-shadow 0.5s ease-out, background 0.5s ease-out;display:block; content:"";}
#header-wrap.fix:after{/* border-bottom:1px solid #dedede;box-shadow: 0 0 8px rgba(0, 0, 0, 0.1)  ; -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.1)  ; -moz-box-shadow: 0 0 8px rgba(0, 0, 0, 0.1)  ; */ }

#header{position:relative; z-index:5001;height:180px;}

#logo{width:152px;height:90px; position:Absolute;  top:0; z-index:2000;}
#logo a{height:100%; display:block;-webkit-transition: all 0s ease-in-out;-moz-transition: all  0s ease-in-out;-o-transition: all  0s ease-in-out;transition: all 0s ease-in-out;}

#header .bt-mnall{position:absolute;z-index:4599; width:42px; height:42px; top:25px; right:20px;border-radius:6px; background:url('/skins/img/layout/bt-mnall.png') no-repeat center center #696969; background-size:90% auto; display:none;}
#header .bt-mnall.active{background-image:url('/skins/img/layout/bt-mnclose.png')}	

#header .bt-allmenu{position:absolute;z-index:4599; width:42px; height:42px; top:25px; right:20px;border-radius:6px; background:url('/skins/img/layout/bt-mnall.png') no-repeat center center #696969; background-size:90% auto;}
#header .bt-allmenu.active{background-image:url('/skins/img/layout/bt-mnclose.png')}	

	
#allmenu-wrap{z-index:4300; position:fixed;width:100%; min-width:320px;left:0;top:0;box-sizing:border-box;height:100%;min-height:768px; display:none; background:#fff}
#allmenu{position:absolute;width:100%; box-sizing:border-box;overflow-y:auto;overflow-x:hidden;left:0;top:0;padding:70px;height:100%;display:flex;align-items: center; justify-content: center;}

.allmenu{width:100%;}
.allmenu:after {display:block;content:"";clear:both;}
.allmenu .mn_l1:nth-child(n+2){margin-top:50px;}
.allmenu .mn_a1 {font-size:60px;line-height:1.2em;width:100%;display:block;color:#111;font-weight:900; padding:0 10px;box-sizing:border-box; letter-spacing:0;text-align:center; text-transform:uppercase; }
.allmenu .mn_a1:hover{color:#696969}
.allmenu .over .mn_a1{color:#696969}
	@media only screen and (max-width:1210px) {
		
	}
	@media only screen and (min-width:1000px) and (max-width:1210px) {
		#header{height:150px;}
		#logo{width:126px;height:76px;}
		#logo a{height:100%; background-size: auto 60%}

		#header .bt-allmenu{top:16px;}
	}
	@media only screen and (max-width:999px) {
		#header-wrap:after{border-bottom:1px solid #dedede;}

		#header{height:70px;}
		#logo{width:110px; height:70px; left:50%; transform:translateX(-50%);}
		#logo a{height:100%; background-size:auto 70%}

		#header .bt-mnall{width:42px;height:42px; top:14px; margin-top:0; border-radius:3px; display:block;}
		#header .bt-allmenu{display:none;}

		#allmenu-wrap{display:none !important;}
	}
	@media only screen and (max-width:680px) {
		#header .bt-mnall{width:34px;height:34px; top:18px;}

		#logo{width:104px; height:70px;}
		#logo a{height:70px; }
	}
	@media only screen and (max-width:480px) {
	
	}
	
	
	
/* ======================================================
   #mainNavi-wrap 
=========================================================*/
	@media only screen and (min-width:1000px) {
		#mainNavi-wrap{position:absolute; left:0; bottom:0; width:100%; z-index:1001; display:block !important;}
		#mainNavi-wrap:after{position:Absolute; left:50%; top:0; height:100%; z-index:-1; border-top:1px solid #dedede; border-bottom:1px solid #dedede; box-sizing:Border-box; width:20000px; margin-left:-10000px; display:block; content:"";}
		
		#topmenu{font-size:0;text-align:center; padding-left:150px;}
		#topmenu li{display:inline-block;vertical-align:top;}
		#topmenu .mn_l1:nth-child(n+2){margin-left:85px;}
		#topmenu .mn_a1{display:block; font-weight:700; color:#111 ;letter-spacing:-0.03em; line-height:90px; font-size:22px;}
		#topmenu .mn_a1 span{display:inline-block;position:relative; vertical-align:top}
		#topmenu .mn_a1 span:after {content:'';position:absolute;bottom:24px;left:0;width:100%;height:0;border-bottom:2px solid #696969;opacity:0;-webkit-transform:scaleX(0);-moz-transform:scaleX(0);transform:scaleX(0);-webkit-transform-origin:100% 50%;-moz-transform-origin:100% 50%;transform-origin:100% 50%;-webkit-transition:-webkit-transform .3s cubic-bezier(.77,0,.175,1),opacity .5s;-moz-transition:-moz-transform .3s cubic-bezier(.77,0,.175,1),opacity .5s;transition:transform .3s cubic-bezier(.77,0,.175,1),opacity .5s}
		#topmenu .mn_a1:hover, #topmenu .over .mn_a1{color:#696969}
		#topmenu .mn_a1:hover span:after, #topmenu .over .mn_a1 span:after {opacity:1;-webkit-transform-origin:0 50%;-moz-transform-origin:0 50%;transform-origin:0 50%;-webkit-transform:scaleX(1);-moz-transform:scaleX(1); transform:scaleX(1);-webkit-transition:-webkit-transform .3s cubic-bezier(.77,0,.175,1),opacity .3s; -moz-transition:-moz-transform .3s cubic-bezier(.77,0,.175,1),opacity .3s;transition:transform .3s cubic-bezier(.77,0,.175,1),opacity .3s}

	}
	@media only screen and (min-width:1000px) and (max-width:1210px) {
		#topmenu{padding-left:130px}
		#topmenu .mn_a1{font-size:20px; line-height:74px; }
		#topmenu .mn_l1:nth-child(n+2){margin-left:70px;}
	}
	@media only screen and (max-width:999px) {
		#mainNavi-wrap{position:relative; z-index:4300; width:100%; min-width:320px;left:0;top:0;box-sizing:border-box;height:0;display:none;}
		#mainNavi{position:fixed;width:300px; background:#efe8ff; box-sizing:border-box;overflow-y:auto;overflow-x:hidden;right:-300px;top:0;padding:30px;min-height:768px;height:100%;display:flex;align-items: center; justify-content: center;-webkit-transition:right .6s cubic-bezier(.77,0,.175,1);-moz-transition:right .6s cubic-bezier(.77,0,.175,1);transition:right .6s cubic-bezier(.77,0,.175,1)}
		#mainNavi.open{right:0}
		.topmenu{width:100%;}
		.topmenu:after {display:block;content:"";clear:both;}
		.topmenu .mn_l1:nth-child(n+2){margin-top:30px;}
		.topmenu .mn_a1 {font-size:24px;line-height:1.2em;width:100%;display:block;color:#333;font-weight:900; padding:0 10px;box-sizing:border-box; letter-spacing:0;text-align:center; text-transform:uppercase; }
		.topmenu .mn_a1:hover{color:#696969}
		.topmenu .over .mn_a1{color:#696969}
	}
	@media only screen and (max-width:680px) {
		.topmenu .mn_a1 {font-size:22px;}
		.topmenu .mn_l1:nth-child(n+2){margin-top:25px;}
	}
	@media only screen and (max-width:480px) {
		.topmenu .mn_a1 {font-size:20px;}
		.topmenu .mn_l1:nth-child(n+2){margin-top:20px;}
	}



	

/* ======================================================
   #container-wrap 
=========================================================*/
#container-wrap{margin-top:180px;}
#container-wrap #contents{ min-height:580px;}
.sub #container-wrap #contents{padding-top:100px;}

.cont-top{text-align:center; margin-bottom:65px;}
.cont-top h2{color:#484849; font-weight:800; letter-spacing:-0.03em;line-height:1.3em; font-size:48px; margin-top:10px;}
.cont-top p{font-size:24px;font-weight:400; color:#484849; line-height:1.3em; letter-spacing:-0.03em; }
	@media only screen and (max-width:1210px) {
		.sub #container-wrap #contents{padding-top:80px;}

		.cont-top{margin-bottom:50px;}
		.cont-top h2{font-size:42px;}
		.cont-top p{font-size:22px;}
	}
	@media only screen and (min-width:1000px) and (max-width:1210px) {
		#container-wrap{margin-top:150px;}
	}
	@media only screen and (max-width:999px) {
		#container-wrap{margin-top:70px;}
		.sub #container-wrap #contents{padding-top:65px;}

		.cont-top{margin-bottom:40px;}
		.cont-top h2{font-size:38px; margin-top:5px;}
		.cont-top p{font-size:20px;}
	}
	@media only screen and (max-width:680px) {
		.sub #container-wrap #contents{padding-top:50px;}

		.cont-top{margin-bottom:30px;}
		.cont-top h2{font-size:34px;}
		.cont-top p{font-size:18px;}
	}
	@media only screen and (max-width:480px) {
		.cont-top h2{font-size:32px;}
		.cont-top p{font-size:16px;}
	}


/* ======================================================
   .top-btn 
=========================================================*/
.top-btn{ z-index:2004;right:-60px;width:60px;height:60px; text-align:center; background:url('/skins/img/layout/top-btn.png') no-repeat center center rgba(0,0,0,0.2);background-size:80% auto; overflow:hidden;border-radius:100%; bottom:20px; text-transform:uppercase; color:#fff; font-size:13px; font-weight:500; position:fixed;-webkit-transition: right 0.3s ease-out;-moz-transition: right 0.3s ease-out;-o-transition: right 0.3s ease-out;transition: right 0.3s ease-out; }
.top-btn.over{right:20px;}
.top-btn:hover{background-color:#333 !important;}
	@media only screen and (max-width:1210px) {
		.top-btn{width:50px;height:50px; right:-50px;}
		.top-btn.over{right:20px;}
	}
	@media only screen and (max-width:999px) {
		.top-btn{width:40px;height:40px; right:-40px; bottom:15px;}
		.top-btn.over{right:15px;}
	}
	@media only screen and (max-width:680px) {
		.top-btn{width:30px;height:30px; right:-30px;}
	}
	@media only screen and (max-width:480px) {

	}



/* ======================================================
    #footer-wrap 
=========================================================*/
#footer-wrap{background:#696969; padding:55px 0; margin-top:70px; }
.sub #footer-wrap{margin-top:120px;}
#footer{position:relative;}

.f-info{line-height:1.3em; font-size:0;}
.f-info p{display:inline-block;vertical-align:top; font-size:14px; color:rgba(255,255,255,0.85); letter-spacing:-0.02em; line-height:1.3em; font-weight:400;}
.f-info p span{font-weight:700; color:#fff;}
.f-info p:nth-child(1){display:block; margin-bottom:5px}
.f-info p:nth-child(n+3){margin-left:12px}

.f-copy{margin-top:15px;font-size:14px; color:rgba(255,255,255,0.85); letter-spacing:-0.02em; line-height:1.3em; font-weight:400;}
.f-copy span{font-weight:700; color:#fff;}

.f-sns{position:absolute;right:20px; top:0}
.f-sns ul:after{display:block; content:"";clear:both;}
.f-sns li{float:left;}
.f-sns li:nth-child(n+2){margin-left:24px;}
.f-sns li a{display:block;width:42px; height:42px; background-size:100% auto !important;}


.f-sns li.kakao a{background:url(/skins/img/layout/f-sns01.png) no-repeat center center;}
.f-sns li.insta a{background:url(/skins/img/layout/f-sns02.png) no-repeat center center;}
.f-sns li.facebook a{background:url(/skins/img/layout/f-sns03.png) no-repeat center center;}
.f-sns li.blog a{background:url(/skins/img/layout/f-sns04.png) no-repeat center center;}
.f-sns li.nshop a{background:url(/res/img/icons/n_shop.png) no-repeat center center;}
	@media only screen and (max-width:1210px) {
		#footer-wrap{margin-top:60px;}
		.sub #footer-wrap{margin-top:100px;}
		#footer{padding-left:120px;}

		#f-logo{width:64px; background-size:100% auto;}
		.f-sns li:nth-child(n+2){margin-left:20px;}
		.f-sns li a{width:38px;height:38px;}

	}
	@media only screen and (max-width:999px) {
		#footer-wrap{margin-top:50px; padding:50px 0}
		.sub #footer-wrap{margin-top:80px;}
		#footer{text-align:center; padding-left:0;}
		
		#f-logo{display:none;}

		.f-sns{position:relative; right:auto; top:auto}
		.f-sns ul{text-align:center; font-size:0;}
		.f-sns li{display:inline-block;vertical-align:top; float:none;}
		.f-sns li:nth-child(n+2){margin-left:16px;}
		.f-sns li a{width:34px;height:34px;}

		.f-info{margin-top:25px;}

		.f-copy{}
	}
	
	@media only screen and (max-width:680px) {
		#footer-wrap{margin-top:40px;padding:40px 0}
		.sub #footer-wrap{margin-top:60px;}

		.f-sns li a{width:30px;height:30px;}

		.f-info p{font-size:13px;}
		.f-info p:nth-child(n+3){margin-left:8px}
		.f-info p:nth-child(4){margin-left:0; display:block; margin-top:5px;}

		.f-copy{font-size:13px; margin-top:15px;}
	}
	@media only screen and (max-width:480px) {
		
	}