@charset "utf-8";
 
/* À¥ ÆùÆ® - ³ª´®°íµñ, ³ª´®°íµñ º¼µå */
@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);/*Nanum Gothic*/

@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,900');
@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500'); 
@import url('https://fonts.googleapis.com/css?family=Raleway:700,800,900&display=swap');

@font-face {
    font-family: 'Noto Sans KR';
    font-style: normal;
    font-weight: 400;   
	src: url(../font/NotoSansKR/NotoSansKR-Regular.woff2) format('woff2'), 
         url(../font/NotoSansKR/NotoSansKR-Regular.woff) format('woff'), 
         url(../font/NotoSansKR/NotoSansKR-Regular.otf) format('opentype'); 

  
}

@font-face {
    font-family: 'Noto Sans KR';
    font-style: normal;
    font-weight: 500;
   src: url(../font/NotoSansKR/NotoSansKR-Medium.woff2) format('woff2'), 
         url(../font/NotoSansKR/NotoSansKR-Medium.woff) format('woff'), 
         url(../font/NotoSansKR/NotoSansKR-Medium.otf) format('opentype'); 

  
}


@font-face {
    font-family: 'Noto Sans KR';
    font-style: normal;
    font-weight: 700;
     src: url(../font/NotoSansKR/NotoSansKR-Bold.woff2) format('woff2'), 
         url(../font/NotoSansKR/NotoSansKR-Bold.woff) format('woff'), 
         url(../font/NotoSansKR/NotoSansKR-Bold.otf) format('opentype'); 

  

}

@font-face {
    font-family: 'Noto Sans KR';
    font-style: normal;
    font-weight: 900;
     src: url(../font/NotoSansKR/NotoSansKR-Black.woff2) format('woff2'), 
         url(../font/NotoSansKR/NotoSansKR-Black.woff) format('woff'), 
         url(../font/NotoSansKR/NotoSansKR-Black.otf) format('opentype'); 

}

@font-face {
    font-family: 'Noto Sans KR';
    font-style: normal;
    font-weight: 300;
   src: url(../font/NotoSansKR/NotoSansKR-Light.woff2) format('woff2'), 
         url(../font/NotoSansKR/NotoSansKR-Light.woff) format('woff'), 
         url(../font/NotoSansKR/NotoSansKR-Light.otf) format('opentype'); 

}

@font-face {
    font-family: 'Noto Sans KR';
    font-style: normal;
    font-weight: 100;
   src: url(../font/NotoSansKR/NotoSansKR-Thin.woff2) format('woff2'), 
         url(../font/NotoSansKR/NotoSansKR-Thin.woff) format('woff'), 
         url(../font/NotoSansKR/NotoSansKR-Thin.otf) format('opentype'); 

}
#TOPArea { 
				width:100%; 
				position: relative; 
				padding:0;
}

/*topmenu*/

  .wrap{
	position:relative;
	width:1000px;
	margin:0 auto;
	 
}

 #topmenu{ z-index:2;}

 
#Header {
	position:absolute;
	 
	width:100%;
	top:0;
	margin:0;
	padding:0;
	height:100%;
		z-index:2;
background: url(/image/back_topmenu.png) repeat-x 0 0;
	 
	 
 

}
 
  
#Header .header_inner {
	position:relative;
	 
	margin:0 auto;
	padding:0;
	max-width:1000px;
	 
	-moz-transition: opacity 0.4s ease-in-out;
	-o-transition: opacity 0.4s ease-in-out;
	-webkit-transition: opacity 0.4s ease-in-out;
	transition: opacity 0.4s ease-in-out;
	 
	 
} 
.header_inner h1.logo {
	position:absolute;
	left:10px;
	top:10px;
	width:119px; 
	height:31px;
	padding:0;
	margin:0;
	
	 
	 
}

.header_inner h1 > a {
	display:block;
	overflow:hidden;
	width:100%;
	height:100%;
	text-indent:-99900px;
	background:url(../image/logo.png) 0 0 no-repeat;
	background-size:100%;
}
 
.hader_lang{
	position:absolute;
	right:0;
	text-align:right;
	z-index:3;
	top:20px;
}
.hader_lang ul{
	margin:0;
	padding:0;
}
.hader_lang ul li{
	display:inline-block;
	padding:5px;
	padding-left:10px;
	position:relative;
}
.hader_lang ul li:before{
	content:'';
	display:block;
	position:absolute;
	width:1px;
	height:3px;
	 
	background: rgba(0,0,0,.5);
	top:12px;
	left:0;
}
.hader_lang ul li.first:before{background:none;}

.hader_lang ul li a{
	font-family:'Noto Sans KR', sans-serif;
	font-size:10px;
	font-weight:700;
}


/* gnb */
 
 
#gnb {
	 
	width: 80%;
	margin: 0 0 0 10%;
	padding-top:45px;
	 
	 
}
 

 
#gnb ul,
#gnb ul li,
#gnb ul li a{
		font-family:'Noto Sans KR', sans-serif;
		 
		-webkit-box-sizing:border-box;
		-moz-box-sizing:border-box;
		box-sizing:border-box
}
#gnb ul li a{display:block;}
 
#gnb > ul:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0}
#gnb > ul{margin:0 auto; padding:0;text-align:center;width:100%;}
#gnb > ul > li{ display: inline-block;margin:0 0px;width:19%; position:relative;vertical-align:top; text-align:center;}
#gnb > ul > li > a{display:block;color:#fff;font-size:17px;padding: 20px 0px 10px 0;  letter-spacing:-1px;font-weight:500;position:relative;width:100%;margin:0 auto;}
#gnb > ul > li > a:before{content:'';display:block;position:absolute;top:22px;left:0;width:1px;height:15px;background: #ccc;}
#gnb > ul > li.first a:before{background:none;}
 
 
 
#gnb > ul > li > a:hover, 
#gnb > ul > li.topmenuon > a,
#gnb > ul > li.hover > a{color:#fff;padding: 20px 0px 30px 0; } 
 

 #gnb ul li ul{ 
	display:none;
	height:0;	 
	text-align: left;
	z-index:0;	 
	margin:-13px auto 0 auto;
	position:absolute;
	 transform: translateY(-50em);
	 padding:0 5px 0 5px;
	 background: #fff;
}
 
.pcOn #gnb ul li.topmenuon > ul,
.pcOn #gnb ul li.hover > ul{
	display:block;
	height:25px;
	transform: translateY(0%);
	z-index:2;
	border-radius:5px;
	box-shadow:3px 3px 10px rgba(0,0,0,0.2);
}
#gnb > ul > li.menuA ul{width:500px;	 }
#gnb > ul > li.menuB ul{width:400px;	margin-left:-100px;}
#gnb > ul > li.menuC ul{width:400px;margin-left:-100px;	}
#gnb > ul > li.menuD ul{width:300px;	margin-left:-190px;} 


 
#gnb ul li ul li{ display:inline-block;margin-bottom:1px;opacity:0;text-align: left;transition:all .2s ease-in-out;	-webkit-transition:all .2s ease-in-out;	transform:translateY(5px);	-webkit-transform:translateY(5px); }
#gnb ul li.topmenuon > ul > li,
#gnb ul li.hover > ul > li{opacity:1;	transform:translateY(0);	-webkit-transform:translateY(0);}
#gnb ul li ul li a{font-size:14px;border-bottom:0px solid rgba(255,255,255,0);padding:3px 3px 3px 12px; text-decoration:none;color:#000;font-weight:400;letter-spacing:-0.03em; text-align:center; }
#gnb ul li ul li:last-child > a,
#gnb ul li ul li.last-item > a{border-bottom:0}
#gnb ul li ul li:hover > a,
#gnb ul li ul li a:hover{color:#ff0000}


#gnb ul li.hover > ul > li:nth-child(1){
	transition-delay: .1s;
	-webkit-transition-delay: .1s;

}
#gnb ul li.hover > ul > li:nth-child(2){
	transition-delay: .2s;
	-webkit-transition-delay: .2s;

}
#gnb ul li.hover > ul > li:nth-child(3){
	transition-delay: .3s;
	-webkit-transition-delay: .3s;

}
#gnb ul li.hover > ul > li:nth-child(4){
	transition-delay: .4s;
	-webkit-transition-delay: .4s;

}
#gnb ul li.hover > ul > li:nth-child(5){
	transition-delay: .5s;
	-webkit-transition-delay: .5s;

}
#gnb ul li.hover > ul > li:nth-child(6){
	transition-delay: .6s;
	-webkit-transition-delay: .6s;
 }
#gnb ul li.hover > ul > li:nth-child(7){
	transition-delay: .7s;
	-webkit-transition-delay: .7s;

}
#gnb ul li.hover > ul > li:nth-child(8){
	transition-delay: .8s;
	-webkit-transition-delay: .8s;

}
#gnb ul li.hover > ul > li:nth-child(9){
	transition-delay: .9s;
	-webkit-transition-delay: .9s;

}

#gnb ul li.hover > ul > li{


}


.Mgnb_back{
	display:none;
}
 

 /*topimg*/ 

 .maintopmenu{height:88px;}
 .subtopmenu{height:88px;}

#topimg{position:relative;top:0;}
.main_top{width:100%;position:relative; background: url(/image/back_maintop.jpg) no-repeat center 0;height:530px;}
.main_top .slick-fade{padding:0px;}
.main_top .mainbgA{background: url(../image/mainimg04.jpg) no-repeat center 0;height:484px;}
.main_top .mainbgB{background: url(../image/mainimg05.jpg) no-repeat center 0;height:484px;}

.pro_mainbox {width:100%;padding:50px 0 0 30px}
.pro_mainbox .slick-pro a{
	display:inline-block;
}
.pro_mainbox .slick-pro a div{
	display:inline-block;
}
 

 
 .subtopimg{height:94px;padding-top:0px;text-align:center;}
 .subtopimg span{
		display:block;
		padding-top:20px;
		margin: 0 auto;
		width:1000px;
		text-align:right;
		
  }

  .subbgA{background: url(../image/about/topimg.jpg) no-repeat center 0px;}
  .subbgB{background: url(../image/top_sub2.jpg) no-repeat center 0px;}
  .subbgC{background: url(../image/top_sub3.jpg) no-repeat center 0px;}
  .subbgD{background: url(../image/top_sub4.jpg) no-repeat center 0px;}
  .subbgE{background: url(../image/top_sub5.jpg) no-repeat center 0px;}
  .subbgF{background: url(../image/top_sub6.jpg) no-repeat center 0px;}


  .subtopimg .toptxt{width:100%;text-align:left;margin:0 auto;position:relative;}


  /*left*/
 

  .leftmenuarea{ position:absolute;z-index:1000; top:0;left:0;width:223px;background: url(../image/back_leftmenu.png) no-repeat 0 0; }
  .leftA{background: url(../image/about/lefttxt.png) no-repeat center 30px;}
  .leftB{background: url(../image/pro/lefttxt.png) no-repeat center 30px;}
  .leftC{background: url(../image/fac/lefttxt.png) no-repeat center 30px;}
  .leftD{background: url(../image/customer/lefttxt.png) no-repeat center 30px;}
  .leftE{background: url(../image/support/lefttxt.png) no-repeat center 30px;}

 .leftmenulist{min-height:340px;}
 .leftmenulist ul {
	padding:100px 0 0 0px;
	margin:0;
	width:100%;
   }
    .leftmenulist.leftD ul {
			padding-top:150px;

	}
  .leftmenulist ul li{
		list-style:none;
		display:block;
		padding:0 0 0px 0px;
		margin:0 0 0px 0;
		width:90%; 
		
		
		 
  }
    .leftmenulist > ul > li:after{
		display:block;
		content:'';
		position:relative;
		margin:0 0;
		width:100%;
		height:1px;
		background:rgba(0,0,0,.3)
	}
	 .leftmenulist > ul > li.subOn:after{background:none;}


  .leftmenulist ul li a{color:#333;display:block; font-family:'Noto Sans KR', sans-serif;padding:10px 5px 10px 30px;font-size:14px;font-weight:500;letter-spacing:-0.03em;line-height:1.2; }
  .leftmenulist ul li.subOn a{color:#fff;background: url(../image/icon2.png) no-repeat 5px 10px;}
  .leftmenulist ul li.subOn{background: url(../image/back_left_on.jpg) repeat-x 0 0;}
  .leftmenulist.leftA ul li.subOn > a{}
  .leftmenulist.leftB ul li.subOn > a{ }
  .leftmenulist.leftB ul li.subOn ul li a{color:#ff9f03;}
  .leftmenulist.leftC ul li.subOn > a{ }
  .leftmenulist.leftD ul li.subOn > a{ }


    .leftmenulist ul li ul{
		display:none;

	}

    .leftmenulist ul li.subOn ul{
		display:block;
		padding:10px 0 10px 0;
		background: rgba(255,255,255,.3);
		width:80%;
		margin:0px auto;
		position:relative;

	}
	  .leftmenulist ul li ul li{
		background:none;
		 
		margin:2px 0;
		padding:0 0 0px 0px;
	  }
	  .leftmenulist ul li.subOn ul li a{
		background:none;
		color:#fff;
		font-size:13px;
		word-break:keep-all;
		word-wrap:break-word;
		padding:1px 0px 1px 20px;
		position:relative;
	

	  }
	   .leftmenulist ul li.subOn ul li a:before{
		content:'';
		display:block;
		position:absolute;
		width:3;

		left:10px;
		height:3px;
		top:10px;
		border-radius:100% 100%;
		background:rgba(255,255,255,.9);
		 
	   }

 .toparea{position:relative;}
.contents_area{position:relative;}
.iframeaarea{position:relative;}