@charset "utf-8";
/* CSS Document */
/* *******************************************************
 * filename : layout.css
 * description : reset / common / sub common CSS
 * date : 2021-07-13
******************************************************** */
@import url('https://fonts.googleapis.com/css?family=Montserrat:400,500,700&display=swap');
body, table, th, td, button, select, input, textarea {
	font-family:'Montserrat','Noto Sans KR', "나눔고딕", NanumGothic, "Nanum Gothic","돋움", Dotum, Arial, sans-serif;
	font-size:13px;
	color:#666;
	-webkit-text-size-adjust:none;
	overflow-x:hidden;
	word-break:keep-all;
	-webkit-word-break:kepp-all;
}
body { background-color:#fff; }
#wrap {overflow:hidden; width:100%; min-width:1920px; position:relative; }
.area{ max-width:1200px; margin:0px auto;}
.area-box{ max-width:1400px; margin:0px auto; }
.area-big{max-width:1388px; margin:0 auto}
::selection {
    background: #222;   
    color: #fff;
}
::-moz-selection {
    background: #222;    
    color: #fff;
}


/* ******************  메인 오른쪽 퀵메뉴 ********************** */
#rightBar{
	position:fixed; top:55%; right:0; z-index:9999; margin-top:-300px;
	visibility:visible; opacity:1.0;filter:Alpha(opacity=100);
	transition:all 0.5s cubic-bezier(0.47, 0, 0.745, 0.715); 
	-webkit-transition:all 0.5s cubic-bezier(0.47, 0, 0.745, 0.715);  
	-oz-transition:all 0.5s cubic-bezier(0.47, 0, 0.745, 0.715); 
	-ms-transition:all 0.5s cubic-bezier(0.47, 0, 0.745, 0.715);
}
#rightBar.fixed{visibility:visible; opacity:1.0;filter:Alpha(opacity=100);}
#rightBar > ul {}
#rightBar > ul > li{position:relative; height:60px; display:block}
#rightBar > ul > li > a{position:absolute; top:0; right:0; display:block; width:60px; height:60px; text-align:center; -webkit-transition:all 0.4s;-moz-transition:all 0.4s;-o-transition:all 0.4s;-ms-transition:all 0.4s;transition:all 0.4s}
#rightBar > ul > li > a i{font-size:24px; line-height:60px; line-height:60px; color:#fff; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); transition:all 0.3s}
#rightBar > ul > li > a span{font-weight:400; font-size:16px; letter-spacing:-0.5px; color:rgba(255,255,255,0.8); width:190px; visibility:hidden; position:absolute; top:50%; left:63px; transform:translateY(-50%); text-align:left}

#rightBar.sub{top:35%; transition:top 0s}


@media all and ( max-width: 1220px ){
	#rightBar{right:-115px;}
	#rightBar.fixed{visibility:hidden;opacity:0;filter:Alpha(opacity=0);}
}
@media all and ( min-width: 800px ){	
	#rightBar > ul > li > a:hover{width:160px}
	#rightBar > ul > li > a:hover i{left:22%}
	#rightBar > ul > li > a:hover span{visibility:visible}
}


#header { width: 100%; position: absolute; z-index: 9999; }
#header:before { width: 100%; height: 60px; position: absolute; top: 0; content: ''; background-color: rgba(0, 0, 0, 0.25); -webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); -webkit-transition: all 0.25s; transition: all 0.25s; opacity: 0; }
#header.headerFixed:before { opacity: 1; }
#header .mask {position: relative;height: 100%; margin: 0px auto;padding: 0 160px;height:115px;background: #fff;}
#header .mask > div{ height:100%; box-sizing:border-box}
#header #logo { width: 306px; height:100%; position: relative; z-index: 10001; float: left; display:table; padding:0}
#header #logo a { display:table-cell; margin: auto; height:100%; vertical-align:middle;}
#header #logo a span { display: block; display: block; width:200px; height:40px; overflow: hidden;background-position: 50%; background-image: url("../img/logo.png"); background-repeat: no-repeat; text-indent: 101%; white-space: nowrap; }
#header #gnb {position: absolute;text-align: center;top: 0; left: 0px;width: 100%;z-index: 99;}
#gnb > ul {display: inline-block; *display: inline;*zoom: 1;}
#header #gnb .gnbList > li { position: relative; float: left; }
#header #gnb .gnbList > li  a > span {display:block; padding: 0 5px;}
#header #gnb .gnbList > li.active a{ color:#2056a6}
/***** 헤더 메뉴 효과 *****/
.nav-on-icon.main-move-line {width:690px; height:2px; position:absolute; left:0;  top:93px; z-index:100;}
.nav-on-icon.main-move-line > span {height:2px; background-color:#2056a6; position:absolute; top:0; left:0; text-align:center;}
#header #gnb .gnbList > li .depth01 { display: block; position: relative; padding:0 40px;font-size:21px; font-weight: 500; border-bottom: 1px solid transparent; text-align:center; color:#111; height:115px; line-height:115px}
#header #gnb .gnbList > li .depth01 .gnb-inner {display:inline-block;}
#header #gnb .gnbList > li .depth01 .icon { display: none; position: absolute; top: 50%; right: 30px; -webkit-transform: translateY(-50%); transform: translateY(-50%); }
#header #gnb .gnbList > li .depth01 .icon span { display: none; }
#header #gnb .gnbList > li .depth02 {  color: #888; margin-top: 10px; letter-spacing: 0.05em; }
#header #gnb .gnbList > li .depth02 a { display: block; /*padding: 15px 0 15px 40px; */ text-align:center; padding:15px 0; font-size: 0.8125rem; }
#header .utilMenu { position: absolute; top: 0px; right:260px; z-index:100; height:100%;display:table;}
#header .utilMenu ul{padding: 11px 0;}
#header .utilMenu ul li{min-width:220px; margin:5px 0}
#header .utilMenu ul li> a{display:table; height:100%;width:100%; text-align:center;}
#header .utilMenu ul li > a span{display:table-cell; vertical-align:middle; background: #2056a6; color: #fff;padding: 7px 21px;border-radius: 7px;font-size:19px;vertical-align: middle; width:100%; box-sizing:border-box;}
#header .utilMenu ul li > a span i{font-size: 25px;vertical-align: middle;display: inline-block;margin-right: 9px;}
#header .utilMenu ul li:last-child a span{background:#c00}
#header.active .mask { height: 560px; background: url("../img/bgHeader.png") -300px -500px no-repeat #fff; }
#header.active #gnb { position: relative; }
#header.active #gnb:before { display: block; width: 1920px; height: 1px; position: absolute; top: 70px; /* left: 40px; */ left:0; content: ''; background-color: #e5e5e5; }
#header.active #gnb .gnbList > li:hover .depth01:before { display: block; }
#header.active #gnb .gnbList > li .depth01 { position: relative; color: #222; }
#header.active #gnb .gnbList > li .depth01:before { display: none; height: 1px; position: absolute; /* right: -40px; bottom: 0; left: 40px; */ right:0; bottom:0; left:0; content: ''; background-color: #222; }
#header.active #language { color: #222; background-color: #eee; }
#header.active #logo a span { background-image: url("../img/logo_over.png"); }
#header #gnb .gnbList > li .depth01:hover{ color:#2056a6}

#section4 {width:100%;padding: 87px 0 30px;background:url(../img/section4_bg.png) center top no-repeat;}
.section4 {width:1200px;margin:0 auto;}
.section4_1 {float:left;width:676px;}
.section4_1_tit {font-size:25px;color:#ffffff;font-weight:bold;line-height:25px;padding-bottom:25px;}
.form-left {float:left;width:330px;height:40px;line-height:40px;background:#FFF;margin-bottom:15px; position:relative}
.form-right {float:right;width:330px;height:40px;line-height:40px;background:#FFF;margin-bottom:15px; position:relative}
.form-center {float:right;width:676px;height:40px;line-height:40px;background:#FFF;margin-bottom:15px; position:relative}
.form-control {	width:315px;height:40px;line-height:40px;background:#FFF;border:0px;padding-left:15px;margin-bottom:15px; position:relative; box-sizing:border-box;}
.filebox input[type="file"] {position: absolute;width: 1px;height: 1px;padding: 0;margin: -1px;overflow: hidden; clip: rect(0,0,0,0); border: 0; height: auto;padding: 10px 0; text-indent: 0;border: 0;}
.filebox label {display: inline-block; padding: 0 16px;vertical-align: top;box-sizing: border-box;color: #fff;background: none;height: 100%;font-size: 12px;background: #777;position: absolute;right: -2px;top: 50%; transform: translateY(-50%);}
.form-control2 {width:661px;height:40px;line-height:40px;background:#FFF;border:0px;padding-left:15px;margin-bottom:12px;}
.privacy a {
	color:#ffffff;
}
.btn-common {background-color:#00a2e2;width:245px;height:46px;line-height:46px;font-size:17px;color:#FFF;margin-top:20px;border:0;cursor:hand; overflow:hidden}
.btn-common:hover {background-color:#0c5fd0;width:245px;height:46px;line-height:46px;font-size:17px;color:#FFF;margin-top:20px;border:0;cursor:hand; overflow:hidden}
.section4_2 {float:right;width:450px;}
.section4_2_txt {line-height:25px;color:#ffffff; font-size:17px}
.section4_2_tel {font-size:30px;line-height:30px;color:#65a2fb;font-weight:bold;	padding-top:20px;}
.section4_2_tel.mobile{ padding-bottom:50px; padding-top:12px}
.section4_2_tel span {font-size:46px;line-height:46px;color:#fff;font-weight:bold;min-width: 360px; display: inline-block;padding: 3px 0 3px 10px;border-radius: 11px;color: #fff; background:#f99500}
.section4_2_tel.mobile span{ background: #65a2fb;}
.section4_2_2 {float:right;width:450px;}
.section4_2_tit {float:left;font-size:25px;color:#ffffff;font-weight:bold;line-height:35px;padding-bottom:25px;}
.blog {width:65px;float:right;padding-right:65px;}
.footer_area {clear:both;width:100%;background:#2e373e;}
.footer {width:100%;height:212px;margin:0 auto;background:#1d1d1f;}
.footer2 {width:1200px;height:212px;margin:0 auto;background:#1d1d1f;}
.footer_logo {float:left;width:280px;height:132px;margin-top:80px;}
.footer_cer {float:right;width:66px;height:138px;margin-top:74px;}
.footer_txt {float:left;margin-top:50px;}
.footer_menu a {font-size:15px;color:#eee;text-decoration:none;}
.footer_menu a:hover {color:#ffffff;text-decoration:none;}
.footer_addr {font-size:15px;line-height:25px;color:#eee;padding-top:25px;}
.footer_addr span{color: #8cd4f0;font-weight: 500;}
.blank {width:805px;height:120px;clear:both;}
.title_blank {width:805px;height:60px;clear:both;}
.title2_blank {width:805px;height:30px;clear:both;}



/* ****************** SUB LAYOUT ********************** */
/*  SUB LAYOUT :: 비주얼 */
#visual{overflow:hidden; position:relative; width:100%; height:406px;}
#visual .visual-txt-con{position:relative; text-align:left; display:table; width:100%; height:100%; letter-spacing:-0.5px; color:#fff; }
#visual .visual-tit{font-weight:600; font-size:50px; margin-top:85px}
#visual .visual-txt{font-size: 40px; font-weight: 100;padding-top: 7px;}
#visual .sub-visual-con{
	position:absolute; top:0px; left:0px; 
	width:100%;
	height:100%;
	background-size:cover !important;
	-ms-transform: scale(1.1,1.1);
    -o-transform: scale(1.1,1.1); 
    -moz-transform: scale(1.1,1.1); 
    -webkit-transform: scale(1.1,1.1); 
     transform: scale(1.1,1.1);
	-webkit-transition:transform 5000ms  ease-in-out ;
	-moz-transition:transform 5000ms ease-in-out ;
	-o-transition:transform 5000ms ease-in-out ;
	-ms-transition:transform 5000ms ease-in-out ;
    transition:transform 5000ms ease-in-out ;	
	background-color:#eee; background-repeat:no-repeat;  background-position:50% 0;
}
#visual .sub-visual-con.sub_visual1 { background-image:url(../img/sub_visual01.png);}
#visual .sub-visual-con.sub_visual2 { background-image:url(../img/sub_visual01.png);}
#visual .sub-visual-con.sub_visual3 { background-image:url(../img/sub_visual01.png);}
#visual .sub-visual-con.sub_visual4 { background-image:url(../img/sub_visual01.png);}
#visual .sub-visual-con.sub_visual5 { background-image:url(../img/sub_visual01.png);}
#visual.active-item .sub-visual-con{
	-ms-transform: scale(1.0,1.0) rotate(0.002deg);
    -o-transform: scale(1.0,1.0) rotate(0.002deg);
    -moz-transform: scale(1.0,1.0) rotate(0.002deg);
    -webkit-transform: scale(1.0,1.0) rotate(0.002deg);
     transform: scale(1.0,1.0) rotate(0.002deg);
}

#visual.sub-visual-company .sub-visual-con{background-position:80% 50% !important;}
#visual.sub-visual-rnd .sub-visual-con{background-position:80% 50% !important;}
#visual.sub-visual-factory .sub-visual-con{background-position:75% 50% !important;}


/*  SUB LAYOUT :: 중단 공통 */
#middleArea{width: 100%;box-sizing: border-box;padding: 30px 0 100px;}
/*  SUB LAYOUT :: 서브메뉴(스타일1) */
#leftmenu_wrap {top:0px;left:0;bottom:0;width:225px;float:left;z-index:10;}
#left_top {width:225px;height:143px;background:#17284d;	}
.left_top_txt1 {font-size:17px;font-weight:normal;color:#ffffff;padding:45px 0 0 22px;}
.left_top_txt2 {font-size:28px;font-weight:bold;color:#ffffff;padding:15px 0 0 22px;}
#left_menu{border-top:1px solid #202020;}
#left_menu a {display:block;height:54px;line-height:54px;border-bottom:1px solid #dfe3e0;color:#525252;padding-left:24px;font-weight:400;text-decoration:none;font-size:17px;}
#left_menu li.on a{display:block;height:54px;	line-height:54px;border-bottom:1px solid #dfe3e0;color:#fff;background:#db0000;padding-left:24px;font-weight:400;text-decoration:none;background:url(../img/left_menu_on.png) no-repeat 0 0;}
#left_menu a:hover  {display:block;height:54px;line-height:54px;border-bottom:1px solid #e7e7e7;color:#fff;background:#db0000;padding-left:24px;font-weight:400;text-decoration:none;background:url(../img/left_menu_on.png) no-repeat 0 0;}

/*  SUB LAYOUT :: 오른쪽 컨텐츠 */
#article_right { float: right;  position: relative;width: calc(100% - 280px); }
#article_top {width:100%;}
#article_top .sub_title{font-size: 33px;color: #161616;padding-bottom: 30px;font-weight: 500;border-bottom: 1px solid #000;margin-bottom: 40px;}


.glow-text-wrapper{
	opacity:0;
	-webkit-transition:all 0.5s;
	-moz-transition:all 0.5s;
	-o-transition:all 0.5s;
	-ms-transition:all 0.5s;
	transition:all 0.5s
}
.active-item .glow-text-wrapper{opacity:1.0;filter:Alpha(opacity=100);}
.glow-text {
  white-space: pre;
}
.glow-text span {display:inline-block;}
.active-item .glow-text span {
  -webkit-animation: letter-glow 0.7s 0s ease both;
          animation: letter-glow 1.2s 0s ease both;
}
@-webkit-keyframes letter-glow {
  0% {
    opacity: 0;
	  transform: translateY(20%) translateX(100%)  rotate(10deg);
  }
  
  77% {
    opacity: 1;
	  transform: translateY(0px) translateX(0%)  rotate(0);
  }
  100% {
    opacity: 1;
	  transform: translateY(0px)  translateX(0%) rotate(0);;
  }
}

@keyframes letter-glow {
   0% {
    opacity: 0;
	 transform: translateY(20%) translateX(100%)  rotate(10deg);
  }
  
  77% {
    opacity: 1;
	  transform: translateY(0px) translateX(0%)  rotate(0);
  }
  100% {
    opacity: 1;
	  transform: translateY(0px) translateX(0%)  rotate(0);
  }
}

/* ****************** MODAL LAYERPOPUP ********************** */
/* modal layer */
.modal-fixed-pop-wrapper{display:none; overflow-y:scroll; overflow-x:hidden;  position:fixed; top:0px; left:0px; width:100%; height:100%; z-index:9999999; background:#000; background:rgba(0,0,0,0.8);}
.modal-fixed-pop-inner{position:absolute; display:table; width:100%; height:100%; text-align:center;}
.modal-inner-box{ position:relative; display:table-cell; vertical-align:middle;}
.modal-loading{position:absolute; top:50%; left:50%; margin:-25px 0 0 -25px; z-index:10000;}
.modal-inner-content{text-align:left;}
.loading {
  display: inline-block;
  width: 50px;
  height: 50px;
  border: 8px solid rgba(255,255,255,.3);
  border-radius: 50%;
  border-top-color: #fff;
  animation: spin 1s ease-in-out infinite;
  -webkit-animation: spin 1s ease-in-out infinite;
}
@keyframes spin {
  to { -webkit-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
  to { -webkit-transform: rotate(360deg); }
}
/* modal layer content */
.footer-modal-content{position:relative; width:96%; max-width:1000px; margin:20px auto; background-color:#fff; }
.footer-modal-content h1{height:60px; line-height:60px; font-size:24px; font-weight:600; letter-spacing:-0.5px; text-align:center; padding:0; background-color:#0f529d; color:#fff;}
.modal-close-btn{position:absolute; top:11px; right:10px; color:#fff; }
.modal-close-btn i{font-size:38px;}
.modal-close-btn i:hover {color:#fff}
.footer-inner-box{padding:30px; }
.footer-inner{height:400px; border:1px solid #ddd; }
.footer-inner textarea{width: 100%;height: 100%;box-sizing: border-box;padding: 20px;border-color: #ddd; font-size: 13px;font-weight: 400; line-height: 1.8;}