@charset "utf-8";
/* *******************************************************
 * filename : layout.css
 * description : 전체 레이아웃 CSS
 * date : 2018-01-16
******************************************************** */

@import url("font.css");	/* 나눔고딕 */ 
@import url('822c4ded956e4b90825af76f7c4bf93d.css'); /* lato체 */
@import url('63db415bc77146d0b119f8aba478f97b.css'); /* rubik체 */

/* layout */
body, table, th, td, button, select, input, textarea {
	font-family:'Lato', 'Noto Sans KR', "나눔고딕", NanumGothic, "Nanum Gothic","돋움", Dotum, Arial, sans-serif;
	font-size:13px;
	color:#666;
	-webkit-text-size-adjust:none;
}

body { background-color:#fff; }
#wrap {overflow:hidden; width:100%; min-width:320px; position:relative; } /* min-width 홈페이지 컨텐츠 가로값에 맞게 변경 */

.font-rubik{font-family:'Rubik', 'Lato', 'Noto Sans KR', "나눔고딕", NanumGothic, "Nanum Gothic","돋움", Dotum, Arial, sans-serif;}
/* ****************** 공통클래스 ********************** */
.area{ max-width:1100px; margin:0px auto;} /* width 홈페이지 컨텐츠 가로값에 맞게 변경 */
.area-box{ max-width:1376px; margin:0px auto; }
.hdr-area{max-width: 1376px; margin: 0 auto; width: 100%;}
.main-area{max-width:1700px; margin:0px auto;}
.sub-visual-area{max-width:1320px; margin:0px auto;}
.clearfix{*zoom:1;}
.clearfix:after{clear:both; display:block; content:"";}
.blind{overflow:hidden;position:absolute;top:0;left:0;width:1px;height:1px;font-size:0;line-height:0}
.trans200{-webkit-transition:all 0.2s;-moz-transition:all 0.2s;-o-transition:all 0.2s;-ms-transition:all 0.2s;transition:all 0.2s}
.trans300{-webkit-transition:all 0.3s;-moz-transition:all 0.3s;-o-transition:all 0.3s;-ms-transition:all 0.3s;transition:all 0.3s}
.trans400{-webkit-transition:all 0.4s;-moz-transition:all 0.4s;-o-transition:all 0.4s;-ms-transition:all 0.4s;transition:all 0.4s}
.trans500{-webkit-transition:all 0.5s;-moz-transition:all 0.5s;-o-transition:all 0.5s;-ms-transition:all 0.5s;transition:all 0.5s}
.material-icons{line-height:inherit; color:inherit; vertical-align:middle;}
.text-ellipsis{white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.table-layout{display:table; width:100%; height:100%; }
.table-cell-layout{display:table-cell; width:100%; height:100%; vertical-align:middle;}
.over-img{overflow:hidden;}
.over-img img{-webkit-transition:all 0.3s;-moz-transition:all 0.3s;-o-transition:all 0.3s;-ms-transition:all 0.3s;transition:all 0.3s}
a:hover .over-img img{
	-ms-transform: scale(1.1) rotate(0.02deg);
	  -o-transform: scale(1.1) rotate(0.02deg);
	  -moz-transform: scale(1.1) rotate(0.02deg);
	  -webkit-transform: scale(1.1) rotate(0.02deg);
	  transform: scale(1.1) rotate(0.02deg);
}

/* ****************** HEADER ********************** */
#header{position:absolute; width: 100%; height:100px;}
#headerInnerWrap{position:absolute; top:0; left:0; height:100px; width:100%; z-index:99; -webkit-transition:all 0.3s;-moz-transition:all 0.3s;-o-transition:all 0.3s;-ms-transition:all 0.3s;transition:all 0.3s}
#headerInner{position:relative; height:100%; max-width:1775px; margin:0px auto; padding:0 15px; }
#header .logo{position:relative; z-index:100; float:left; padding:0; margin-left: -35px;}		/* padding값 적절히 바꿔주세요 */
#header .logo a{display:block; }
#header .logo img{display:block; vertical-align:top;}

/* -------- Header :: UTIL BOX -------- */
.header-util-box{position:absolute; top:50%; /* right:15px; */right: -10px; margin-top:-16px; z-index:100;}

/* Header :: 언어선택 */
.header-lang {float:left; width:100px; height:30px; z-index:100; margin-top: 1px;}
.header-lang > ul {width:100%; background-color:#fff;}
.header-lang > ul > li{width: 50%; float: left;}
.header-lang > ul > li > a{display:block; background-color: #eee; font-size:12px; line-height: 30px; font-weight: 600; color:#333; letter-spacing: -0.25px; color: #222; text-align: center; -webkit-border-radius: 0 30px 30px 0; -moz-border-radius: 0 30px 30px 0; border-radius: 0 30px 30px 0;}
.header-lang > ul > li:first-child a{-webkit-border-radius: 30px 0 0 30px; -moz-border-radius: 30px 0 0 30px; border-radius: 30px 0 0 30px;}
.header-lang > ul > li > a:hover, .header-lang > ul > li.selected > a{color: #fff;
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#2bb674+0,0ca9b4+100 */
background: rgb(43,182,116); /* Old browsers */
background: -moz-linear-gradient(left,  rgb(43,182,116) 0%, rgb(12,169,180) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left,  rgb(43,182,116) 0%,rgb(12,169,180) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right,  rgb(43,182,116) 0%,rgb(12,169,180) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2bb674', endColorstr='#0ca9b4',GradientType=1 ); /* IE6-9 */
}


/* Header :: 사이트맵(기본형 or 커스텀) */
.sitemap-line-btn{float:left; width:32px; height:32px; margin-left:65px;}
.sitemap-line-btn .line{display:block; width:20px; height:2px; background-color:#999; margin: 4px auto;}

.sub-wrap .sitemap-line-btn .line{background-color: #ddd;}

/* -------- Header :: GNB(PC) -------- */
.gnb-overlay-bg{display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.6); z-index:97;}	/* gnb overlay BG */
#gnbBg{display:none; position:absolute; left:0; top:100px; width:100%; height:230px; background:#fff; border-top:1px solid #eee; z-index:98}	/* gnb 2depth BG */
#gnb{position:absolute; text-align:center; top:0; left:0px; width:100%; z-index:99;}
#gnb > ul{display:inline-block; *display:inline;*zoom:1;}
#gnb > ul > li{position:relative; float:left; }
#gnb > ul > li > a{position:relative; z-index:100; display:block; height:100px; line-height:100px; padding:0 32px; text-align:center; color:#999; font-size:15px; letter-spacing:-0.52px; font-weight:600; -webkit-transition:color 0.3s;-moz-transition:color 0.3s;-o-transition:color 0.3s;-ms-transition:color 0.3s;transition:color 0.3s;}
#gnb > ul > li > a:before{position: absolute; bottom: 0; left: 50%; display: block; content: ''; width: 0; height: 1px; background-color: #222; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s;}
#gnb > ul > li > a:hover, #gnb > ul > li.on > a{color:#222;}
#gnb > ul > li > a:hover:before, #gnb > ul > li.on > a:before{width: 100%; margin-left: -50%;}

/* GNB :: 2차 전체메뉴 */
#gnb.total-menu > ul > li .gnb-2dep{
	display:none; 
	position:absolute; 
	top:100px; 
	left:0px; 
	z-index:99;
	width:100%; 
	height:230px;
	text-align:left; 
}
#gnb.total-menu > ul > li:hover .gnb-2dep{}

#gnb > ul > li .gnb-2dep ul{padding:27px 0px;}
#gnb > ul > li .gnb-2dep ul li{position:relative; padding:10px;}
#gnb > ul > li .gnb-2dep ul li a{ display:block; text-align:center; color:#999; font-size:15px; letter-spacing: -0.25px; font-weight: 400; -webkit-transition:all 0.2s;-moz-transition:all 0.2s;-o-transition:all 0.2s;-ms-transition:all 0.2s;transition:all 0.2s}
#gnb > ul > li .gnb-2dep ul li a:hover{color: #222;}



/* 서브에서 헤더 추가 css */
.sub-wrap #gnb > ul > li > a{color: #ddd;}

/* -------- Header :: GNB(Mobile) -------- */
.nav-open-btn{display:none;}
#gnbM{display:none}

/* -------- Header :: 스타일변경 -------- */
#header.over{}
#header.over #headerInnerWrap{background-color: #fff;}
#header.over #headerInner{position:relative; height:100%; max-width:1775px; margin:0px auto; padding:0 15px;}
/* 서브에서 헤더 추가 css */
.sub-wrap #header.over #gnb > ul > li > a{color: #999;}

/* ****************** FOOTER ********************** */
#footer{background-color:#fff;}
.sub-wrap #footer{background-color:#f2f2f2;}
#footerInner{position:relative; max-width: 1700px; margin: 0 auto;}
.footer-left-con{float:left;}
.footer-right-con{float:right;}

/* Footer :: TOP버튼 */
.to-top-btn{position:absolute; top: -60px; right:0; display:block; width:70px; height:70px; background-color:#222; text-align:center; z-index:99; -webkit-border-radius:50%;-moz-border-radius:50%;-o-border-radius:50%;border-radius:50%;}
.to-top-btn i{font-size: 24px; color: #fff; line-height:70px;}

/* -------- FOOTER :: 상단 -------- */
#footerTop{}
/* Footer :: 푸터메뉴 */
.foot-menu{float:left;}
.foot-menu li{float:left; position:relative; padding-left:30px; line-height:1;}
.foot-menu li:first-child{padding-left:0;}
.foot-menu li a{color:#222; font-size:13px; letter-spacing: 0.25px; font-weight: 400;}
.foot-menu li a b{color:#0ba9b5; font-weight:400;}

/* -------- FOOTER :: 하단 -------- */
/* 공통 */
#footerBottom{padding:35px 0 40px; }
#footerBottom .tit{font-size: 13px; font-weight: 900; letter-spacing: 0.25px; color: #222; margin-bottom: 35px;}
/* INFORMATION */
.footer-infomation{float: left; width: 300px;}
.footer-infomation ul{}
.footer-infomation ul li{margin-top: 15px; position: relative; padding-left: 80px; font-size: 13px; font-weight: 400; letter-spacing: 0.25px; color: #222; line-height: 1.2; -ms-word-break: keep-all; word-break: keep-all;}
.footer-infomation ul li:first-child{margin-top: 0;}
.footer-infomation ul li span{position: absolute; top: 0; left: 0; display: inline-block; color: #aaa;}
/* CONTACT */
.footer-contact{float: left; width: 315px;}
.footer-contact ul{}
.footer-contact ul li{margin-top: 15px; position: relative; padding-left: 30px; font-size: 13px; font-weight: 400; letter-spacing: 0.25px; color: #222; line-height: 1.2; -ms-word-break: keep-all; word-break: keep-all;}
.footer-contact ul li span{position: absolute; top: 0; left: 0; display: inline-block; color: #aaa;}
.footer-contact ul li:first-child{margin-top: 0;}
.footer-contact ul li a{display: inline-block; color: #222;}
/* LOCATION */
.footer-location{float: left; width: 1085px;}
.footer-location ul{}
.footer-location ul li{margin-top: 15px; position: relative; padding-left: 115px; font-size: 13px; font-weight: 400; letter-spacing: 0.25px; color: #222; line-height: 1.2; -ms-word-break: keep-all; word-break: keep-all;}
.footer-location ul li:first-child{margin-top: 0;}
.footer-location ul li span{position: absolute; top: 0; left: 0; display: inline-block; color: #aaa;}
/* 무단복제 금지 */
.footer-copyright{margin-top: 55px; font-size:13px; font-weight: 400; letter-spacing: 0.25px; color: #222; font-weight: 400;}
.footer-copyright b{color:#0ba9b5; font-weight: 400;}


/* ****************** SUB LAYOUT ********************** */
/*  SUB LAYOUT :: 비주얼 */
#visual{width:100%; height:480px; background-size:cover !important;}
#visual .visual-txt-con{position:relative; text-align:left; display:table; width:100%; height:100%; color:#fff;}
#visual .visual-txt-con .table-cell-layout{padding-top: 100px;}
#visual .visual-sub-txt{font-size:15px; letter-spacing: 7px; font-weight:500; padding-bottom:25px;}
#visual .visual-tit{font-weight:900; font-size:80px; letter-spacing: 0.5px;}
.location{overflow:hidden; padding-top:50px;}
.location li{display:inline-block; vertical-align:middle; color:#fff; font-size:15px; font-weight: 400;}
.location li a{color:inherit;}
.location li i{font-size:18px;}
.location li:before{display:inline-block; content:">"; vertical-align:middle; margin:0px 18px 0 20px; font-family:"나눔고딕", NanumGothic, "Nanum Gothic","돋움", Dotum, Arial, sans-serif; color:#fff; font-size:12px;}
.location li:first-child:before{display:none;}


/*  SUB LAYOUT :: 서브메뉴 */
#sideMenuM{display:none}
#sideMenu{width:100%;height:60px;}
#sideMenu .side-menu-inner{text-align:right;}
#sideMenu .side-menu-inner > ul{display:inline-block; *display:inline;*zoom:1; padding-right: 10%;}
#sideMenu .side-menu-inner > ul.add-css{padding-right: 0;}	
#sideMenu .side-menu-inner > ul > li{float:left; max-width:200px; margin: 0 20px;} /* max-width 자유롭게 수정 */
#sideMenu .side-menu-inner > ul > li > a{
	display:block; display:table; height:60px; line-height:1.2; color:#222; font-size:20px; letter-spacing:-0.5px; font-weight:400; padding:0 14px; border-bottom:2px solid transparent;
	-webkit-transition:all 0.4s;-moz-transition:all 0.4s;-o-transition:all 0.4s;-ms-transition:all 0.4s;transition:all 0.4s;
}
#sideMenu .side-menu-inner > ul > li > a > span{display:table-cell; vertical-align:middle; text-align:center;}
#sideMenu .side-menu-inner > ul > li > a:hover, #sideMenu .side-menu-inner > ul > li.on > a{ color:#0ba9b5; border-bottom-color:#0ba9b5;}

/*  SUB LAYOUT :: 컨텐츠 레이아웃 */
#content{padding-bottom:100px; background: #fff url("../images/sub_con_cm_bg.jpg") center bottom no-repeat; -webkit-background-size: contain; background-size: contain;}

/* ****************** 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:9999; 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:#0ba9b5; 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{padding:20px; height:400px; overflow-y:auto; overflow-x:hidden; border:1px solid #ddd; }

/* 사이트맵 */
.sitemap-wrapper{padding:30px;}
.sitemap-wrapper > ul{overflow:hidden;}
.sitemap-wrapper > ul > li{float:left; width:20%; text-align:center;}	/* 메뉴 갯수에 맞게 %로 계산, 두줄로 들어갈 경우 height값 설정 */
.sitemap-wrapper.menu4 > ul > li{width:25%;}
.sitemap-wrapper.menu6 > ul > li{width:16.6%;}
.sitemap-wrapper.menu7 > ul > li{width:14.2%;}
.sitemap-wrapper > ul > li > h2{color:#191919; margin:0 2% 20px 2%; padding-bottom:20px; font-size:16px; border-bottom:1px solid #888; letter-spacing:-1.0px; margin-bottom:20px; font-weight:500;}
.sitemap-wrapper > ul > li .sitemap-2dep {padding:0 5%;}
.sitemap-wrapper > ul > li .sitemap-2dep a{display:block; padding:10px 0; color:#666; font-size:13px; font-weight:400; line-height:1.2em;}
.sitemap-wrapper > ul > li .sitemap-2dep a:hover{color:#000; text-decoration:underline;}







/* ********** content contact us ********** */
.sub-contact-con{max-width: 530px; margin: 0 auto;}
.main-contact-tit{text-align: center; font-size: 30px; font-weight: 600; letter-spacing: -0.75px; color: #222;}
.main-contact-inner{margin-top: 50px;}


/* 정보입력 */
.sub-contact-con .main-contact-inner .info{width: 49%; margin-right: 1%; float: left; height: 340px; position: relative; width: 100%; margin-right:0; float: none; height: auto; position: static;}
.sub-contact-con .main-contact-inner .info ul{}
.sub-contact-con .main-contact-inner .info ul li{margin-top: 25px; border-bottom: 1px solid #ddd;}
.sub-contact-con .main-contact-inner .info ul li:first-child{margin-top: 0;}
.sub-contact-con .main-contact-inner .info ul li > div{}
.sub-contact-con .main-contact-inner .info ul li .tit{display: inline-block; width: 125px; vertical-align: middle; font-size: 15px; font-weight: 400; color: #222;}

/* 문의내용 */
.sub-contact-con .main-contact-inner .qna{margin-top: 35px; width: 100%; margin-left: 0; float: none; height: auto; position: static;}
.sub-contact-con .main-contact-inner .qna .tit{font-size: 15px; font-weight: 400; color: #222; padding-bottom: 15px;}
.sub-contact-con .main-contact-inner .qna .contact-btn{position: static; margin-top: 5px; width: 100%; height: 60px; font-size: 15px; font-weight: 400; color: #fff; background-color: #222;}

/* 개인정보처리방침 버튼 */
.sub-contact-con .main-contact-inner .contact-privacy-con{margin-top: 10px; position: static; left: 0; bottom: 0; width: 100%; height: 60px; line-height: 60px; display: block;}
.sub-contact-con .main-contact-inner .contact-privacy-con .contact-view-btn{float: left; margin-left: 0; margin-top: 10px; display: block; width: 148px; height: 38px; border: 1px solid #222; font-size: 13px; line-height: 38px; font-weight: 400; text-align: center; color: #222;}
.sub-contact-con .main-contact-inne .contact-privacy-con .contact-view-btn i{display: inline-block; padding-left: 12px; line-height: 38px; font-size: 16px; color: #222;}
.sub-contact-con .main-contact-inner .contact-privacy-con .contact-check-btn{float: right; margin-right: 0;}

.sub-contact-con .contact-check-btn .checkbox-item{display:inline-block; vertical-align:middle;}
.sub-contact-con .contact-check-btn .checkbox-item input[type="checkbox"]{display:none;}
.sub-contact-con .contact-check-btn .checkbox-item label{display:inline-block; position:relative; color:#222; font-size:15px; font-weight: 400;}
.sub-contact-con .contact-check-btn .checkbox-item label i{display: inline-block; margin-left: 10px; font-size:24px; color:inherit; vertical-align:middle; margin-top:-2px;}    
.sub-contact-con .contact-check-btn .checkbox-item input[type="checkbox"]:checked + label{color:#0ba9b5;}

.sub-contact-con .contact-textarea {background-color: #f2f2f2;}
@media all and (max-width:1024px){
	.sub-contact-con .main-contact-inner .qna .tit{line-height: 1;}
}
@media all and (max-width:800px){
	.sub-contact-con .main-contact-inner .info ul li {margin-top: 15px;}
	.sub-contact-con .main-contact-inner .info ul li .tit {width: 80px; font-size: 13px;}
	.sub-contact-con .main-contact-inner .qna {margin-top: 15px;}
	.sub-contact-con .main-contact-inner .qna .tit {font-size: 13px; line-height: 30px; padding-bottom: 0;}
	.sub-contact-con .main-contact-inner .qna .contact-btn {margin-top: 15px; height: 45px; font-size: 13px;}

	/* 개인정보처리방침 버튼 */
	.sub-contact-con .main-contact-inner .contact-privacy-con{margin-top: 15px; height: 20px; line-height: 20px;}
	.sub-contact-con .main-contact-inner .contact-privacy-con .contact-view-btn{display: none;}
	.sub-contact-con .main-contact-inner .contact-privacy-con .contact-check-btn{margin-right: 0;}

	.sub-contact-con .contact-check-btn .checkbox-item label{font-size:13px;}
	.sub-contact-con .contact-check-btn .checkbox-item label i{margin-left: 7px; font-size:20px; margin-top:-2px;}  
}
@media all and (max-width:560px){
	.sub-contact-con{padding: 0 15px;}
}





/* ********** content 사업영역 - 제품개발 생산 ********** */
.sub-page.production-page{padding-bottom: 350px;}

/* 상단 3단 영역 */
.production-con01{}
ul.production-up-list{margin: 0 -2%;}
ul.production-up-list > li{float: left;	width: 29.33%; margin: 0 2%;}
.production-up-inner{}
.production-up-inner .img-con{text-align: center;}
.production-up-inner .img-con img{display: inline-block; width: 251px; height: auto;}
.production-up-inner .txt-con{width: 240px; margin: 35px auto 0;}
.production-up-inner .txt-con .tit{text-align: center; font-size: 20px; font-weight: 400; letter-spacing: -0.5px; color: #333;}
.production-up-inner .txt-con .txt{margin-top: 25px;}
.production-up-inner .txt-con .txt li{padding: 8px 0; border-bottom: 1px solid #ddd;}
.production-up-inner .txt-con .txt li:first-child{border-top: 1px solid #ddd;}
.production-up-inner .txt-con .txt li p{position: relative; padding-left: 25px; font-size: 18px; line-height: 1.2; font-weight: 400; letter-spacing: -0.5px; color: #999; -ms-word-break: keep-all; word-break: keep-all;}
.production-up-inner .txt-con .txt li p:before{position: absolute; top: 9px; left: 10px; display: block; content: ''; width: 3px; height: 3px; background-color: #0ba9b5;}

@media (max-width: 1120px){
	.production-up-inner .img-con img{width: 70%;}
	.production-up-inner .txt-con {width: 80%; margin: 35px auto 0;}
}
@media (max-width: 800px){
	ul.production-up-list{margin: -25px -1%;}
	ul.production-up-list > li{float: left;	width: 98%; margin: 25px 1%;}
	.production-up-inner .img-con{width: 48%; display: inline-block; vertical-align: middle;}
	.production-up-inner .img-con img{width: 70%;}
	.production-up-inner .txt-con {width: 50%; margin: 0; display: inline-block; vertical-align: middle;}
	.production-up-inner .txt-con .tit{font-size: 15px; text-align: left;}
	.production-up-inner .txt-con .txt{margin-top: 15px;}
	.production-up-inner .txt-con .txt li{padding: 8px 0;}
	.production-up-inner .txt-con .txt li p{padding-left: 15px; font-size: 14px; line-height: 1.2;}
	.production-up-inner .txt-con .txt li p:before{position: absolute; top: 6px; left: 6px;}
}
@media (max-width: 480px){
	.production-up-inner .img-con img{width: 80%;}
}


/* 프로세스 */
.production-con02{margin-top: 120px;}
.production-line-con{position: relative; width: 100%; height: 719px; background: url("../images/production_line.jpg") 0 0 no-repeat;}
ul.production-down-list{}
ul.production-down-list li{position: absolute; width: 33.33%;}
ul.production-down-list li > div{position:relative; width: 100%; text-align:center;}

/* 위치 조정 */
ul.production-down-list li.li-01{top: 0; left: 15px;}
ul.production-down-list li.li-02{top: 0; left: 33.33%;}
ul.production-down-list li.li-03{top: 0; left: 66.66%;}
ul.production-down-list li.li-04{top: 359px; left: 15px;}
ul.production-down-list li.li-05{top: 359px; left: 33.33%;}
ul.production-down-list li.li-06{top: 359px; left: 66.66%;}
ul.production-down-list li.li-07{top: 718px; left: 15px;}
ul.production-down-list li.li-08{top: 718px; left: 33.33%;}

/* num */
.production-down-list li .num{position:absolute; top:-36px; left: 0; display:inline-block; text-align: center; width: 100%; width: 100%; font-size: 20px; color: #222; letter-spacing: -0.5px; -moz-transition: color 0.5s ease-out; -ms-transition: color 0.5s ease-out; -o-transition: color 0.5s ease-out; transition: color 0.5s ease-out;}

/* dot */
.production-down-list li .dot{
	display:block; position:absolute; top:0; margin-top: -4.5px; left:50%; width:9px; height:9px; margin-left:-4.5px; background-color: #ddd; border-radius:50%; -webkit-transition: all 0.5s ease-out; -moz-transition: all 0.5s ease-out; -ms-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; transition: all 0.5s ease-out;}
.production-down-list li .dot:before{position: absolute; top: 50%; margin-top: -9.5px; left: 50%; margin-left: -9.5px; display: block; content: ''; width: 15px; height: 15px; border: 2px solid #22b1bc; border-radius:50%; opacity: 0; -webkit-transition: all 0.5s ease-out; -moz-transition: all 0.5s ease-out; -ms-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; transition: all 0.5s ease-out;}

/* dot밑 텍스트영역 */
.production-down-list li .txt-con{padding-top: 40px;}
.production-down-list li .m-txt-con{display: none;}

/* 아이콘 */
.production-down-list li .icon{display: inline-block; height: 47px;}
.production-down-list li .icon img{height: 100%;}

/* 텍스트 */
.production-down-list li .tit{padding-top: 40px; width: 100%; text-align: center; font-weight:400; bottom: 0; left: 0; color:#222; font-size:24px; letter-spacing:-0.5px;}
.production-down-list li .txt{padding-top: 10px; font-size: 15px; line-height: 25px; font-weight: 300; letter-spacing: -0.5px; color: #666;}

/* active */
.production-down-list li.active .dot{background-color:#0ba9b5;}
.production-down-list li.active .dot:before{opacity: 1;}

@media (max-width: 1120px){
	.sub-page.production-page{padding-bottom: 150px;}
	
	.production-line-con{position: static; margin-left: 25px; width: calc(100% - 25px); height: auto; background: none;}
	ul.production-down-list li{position: relative; width: 100%;}
	ul.production-down-list li:before{position: absolute; top: 0; left: 0; display: block; content: ''; width: 1px; height: 100%; background-color: #ddd;}
	ul.production-down-list li > div{padding: 0 0 60px; position:static; width: 100%;}

	/* 위치 조정 */
	ul.production-down-list li.li-01, ul.production-down-list li.li-02, ul.production-down-list li.li-03, ul.production-down-list li.li-04, ul.production-down-list li.li-05, ul.production-down-list li.li-06, ul.production-down-list li.li-07, ul.production-down-list li.li-08{top: 0; left: 0;}

	/* dot */
	.production-down-list li .dot{display:block; position:absolute; top:0; margin-top: 0; left:0; width:9px; height:9px; margin-left:-4.5px;}

	/* dot밑 텍스트영역 */
	.production-down-list li .txt-con{display: none;}
	.production-down-list li .m-txt-con{display: block;}

	/* num */
	.num-icon{display: inline-block; width: 120px; vertical-align: top;}
	.production-down-list li .num.pc-num{display: none;}
	.production-down-list li .num{position:static; display:inline-block; text-align: center; padding-bottom: 25px;}

	/* 아이콘 */
	.production-down-list li .icon{display: inline-block; width: 120px; height: 47px;}

	/* 텍스트 */
	.tit-txt{display: inline-block; width: calc(100% - 150px); padding-left: 20px; vertical-align: top; text-align: left;}
	.production-down-list li .tit{padding-top: 0; width: 100%; text-align: left;}
	.production-down-list li .txt{padding-top: 10px; font-size: 15px; line-height: 25px; -ms-word-break: keep-all; word-break: keep-all;}
	.production-down-list li .txt br{display: none;}

	.production-down-list li.active .num{color:#0ba9b5;}
}
@media (max-width: 800px){
	.sub-page.production-page{padding-bottom: 100px;}
	.production-con02 {margin-top: 110px;}

	.production-line-con{margin-left: 10px; width: calc(100% - 10px);}

	/* dot */
	.production-down-list li .dot{width:6px; height:6px; margin-left:-3px;}
	.production-down-list li .dot:before{margin-top: -7px; margin-left: -7px; width: 10px; height: 10px;}

	/* num */
	.num-icon{width: 110px;}
	.production-down-list li .num{font-size: 15px; padding-bottom: 15px;}

	/* 아이콘 */
	.production-down-list li .icon{width: 110px;}

	/* 텍스트 */
	.tit-txt{display: inline-block; width: calc(100% - 120px); padding-left: 0;}
	.production-down-list li .tit{font-size:17px;}
	.production-down-list li .txt{padding-top: 10px; font-size: 13px; line-height: 1.6;}
}






/* ********** content 사업영역 - 원천기술 개발 ********** */
#developCon{}
/* 탭공통 */
.m-develop-tab-list{display: none;}
.develop-tab-list{position:relative; padding-top:80px;}
.develop-tab-list ul{text-align:center; *zoom:1;}
.develop-tab-list ul:after{clear:both; content:""; display:block;}
.develop-tab-list ul li{float:left; width:25%; position:relative; margin-left:-1px;}
.develop-tab-list ul li:first-child{margin-left:1px;}
.develop-tab-list ul li a{display:block; height:78px; line-height: 1.2; color:#222; font-size:16px; letter-spacing:-0.5px; text-align:center; border:1px solid #c2c2c2; border-bottom:1px solid #0ba9b5; background-color:#fff; -ms-word-break: keep-all; word-break: keep-all;}
.develop-tab-list ul li:first-child a{border-left:1px solid #ddd;}
.develop-tab-list ul li a span{display: table; width: 100%; height: 78px;}
.develop-tab-list ul li a span em{display: table-cell; vertical-align: middle;}

.develop-tab-list ul li.on{z-index:1;}
.develop-tab-list ul li.on a{border-color:#0ba9b5; border-bottom-color:#fff;}


/* 탭 fixed */
.develop-tab{position:absolute; top:0; left:0; right:0; width:100%; max-width:1100px; margin:0 auto; overflow:hidden; z-index:10;}
.develop-tab.fixed{position:fixed; top:0; max-width:none; overflow: visible; background-color: #fff; border-bottom: 1px solid #0ba9b5;}
.develop-tab.fixed ul{max-width:1100px; margin:0 auto;}
.develop-tab.fixed ul li{margin-left:0;}
.develop-tab.fixed ul li a{position: relative; border-left: none; border-right: none; border-bottom:none;}
.develop-tab.fixed ul li a:before{position: absolute; top: 0; left: 0; display: block; content: ''; width: calc(100% - 1px); height: 100%; border: 1px solid #ddd; border-top: none; border-bottom-color: #0ba9b5;}
.develop-tab.fixed ul li.on a:before{border-color: #0ba9b5; z-index: 1; border-bottom-color: #fff;}

@media (max-width: 1120px){
	.develop-tab.fixed ul{padding: 0 15px;}
}

@media all and ( max-width: 1220px ){
	.develop-tab.fixed {top: 80px;}
}

@media all and ( max-width: 800px ){
	/* 탭공통 */
	.develop-tab-list{display: none;}
	.m-develop-tab-list{display: block; position: relative; padding-top: 50px;}
	.m-develop-tab{position:absolute; top:0; left:0; right:0;width:100%; z-index:99;}
	.m-develop-tab.fixed{position:fixed; top:75px; width: calc(100% - 30px); margin: 0 auto;}

	.m-mn-open-btn{position:relative; width: calc(100% - 32px); padding: 0 15px; height:48px; display:inline-block; vertical-align: middle; line-height:48px; color:#222; background-color: #fff; font-weight:400; font-size:13px; border: 1px solid #0ba9b5;}
	.m-mn-open-btn .arrow{float: right; position: absolute; top: 15px; right: 15px; font-size: 20px; color:#222;}
	.m-develop-tab-list .tab-list-wrapper{display: none; overflow:hidden; margin: 0; width:100%; position:absolute; top:49px; left:0; border:1px solid #0ba9b5; border-top-color: #f4f4f4; background-color:#f4f4f4; z-index:11; padding: 17.5px 0;}
	.m-develop-tab-list li{float:none; width:100%;margin: 0}
	.m-develop-tab-list li > a{display:block; line-height: 1; border:none; display:block; padding: 7.5px 15px; color:#222; font-weight:400; font-size:13px; height: auto;}
	.m-develop-tab-list li > a span{display: inline-block;}
	.m-develop-tab-list li.selected > a{border:none; color:#3a3a3a; background:#f4f4f4;}
}

/* 공통 */
.develop-content{}
.develop-tit{text-align: center; letter-spacing: -0.5px; color: #222; padding-bottom: 50px;}
.develop-tit .tit01{font-size: 20px; font-weight: 300; padding-bottom: 15px;}
.develop-tit .tit02{position: relative;	display: inline-block; font-size: 42px; line-height: 1.2; font-weight: 500; -ms-word-break: keep-all; word-break: keep-all;}
.develop-tit .dot{position: absolute; top: -8px; right: -15px; display: block; width: 8px; height: 8px; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%;}
.develop-tit .dot.red{background-color: #f0362a;}
.develop-tit .dot.green{background-color: #39722e;}
.develop-tit .dot.blue{background-color: #8190e5;}


@media all and ( max-width: 800px ){
	.develop-content{padding-top: 0;}
	.develop-tit{padding-bottom: 25px;}
	.develop-tit .tit01{font-size: 15px; padding-bottom: 5px;}
	.develop-tit .tit02{font-size: 26px; line-height: 1.2;}
	.develop-tit .dot{top: -4px; right: -7px; width: 4px; height: 4px;}
}


/* UV Led를 활용한 살균기 */
.develop-con01-01{padding-top: 120px;}
.develop-con01-01 .develop-video{position: relative; max-width: 100%; padding-bottom: 56%; height: 0;}
.develop-con01-01 .develop-video iframe{position: absolute; position: absolute; top: 0; left: 0; width: 100%; height: 100%;}

.develop-con01-02{margin-top: -150px; min-height: 1000px; background: #fff url("../images/develop_con01_bg.png") center top no-repeat;}
.develop-con01-02 .area{padding-top: 280px;}
.develop-con01-02 .develop-product{position: relative; display: block; max-width: 953px; width: 100%; height: 0; padding-top: 65%;/* height: 624px; */ margin: 0 auto; }
.develop-con01-02 .develop-product .tit-group{position: absolute; top: -25px; left: -15px; letter-spacing: -0.5px; }
.develop-con01-02 .develop-product .en-tit{font-size: 16px; font-weight: 400; color: rgba(34,34,34,0.4);}
.develop-con01-02 .develop-product .kr-tit{padding-top: 10px; font-size: 36px; font-weight: 600; color: #f0362a;}
.develop-con01-02 .develop-product .img{display: block; width: 100%; height: auto; position: absolute; top: 0; left: 0;}
.develop-con01-02 .develop-product .img img{width: 100%; height: 100%;}

@media all and ( max-width: 1120px ){
	.develop-con01-01.area{padding-top: 120px;}
}
@media all and ( max-width: 1024px ){
	.develop-con01-02 .develop-product .tit-group{left: 0;}
}
@media all and ( max-width: 800px ){
	.develop-con01-01.area{padding-top: 90px;}
	.develop-con01-02{margin-top: 0; min-height: 300px; background: #fff url("../images/develop_con01_bg.png") center 50% no-repeat;}
	.develop-con01-02 .area{padding-top: 60px;}
	.develop-con01-02 .develop-product{position: static; padding-top: 0; height: auto;}
	.develop-con01-02 .develop-product .tit-group{position: static;}
	.develop-con01-02 .develop-product .en-tit{font-size: 13px;}
	.develop-con01-02 .develop-product .kr-tit{padding-top: 10px; font-size: 23px;}
	.develop-con01-02 .develop-product .img{margin-top: 50px; position: static;}
}


#develop2Con{padding-top: 120px; margin-top: -150px;}
.develop-con02 .half-img{}
.develop-con02 .half-img span{float: left; width: 50%; display: block; height: auto;}
.develop-con02 .half-img span img{width: 100%; height: 100%;}

.develop-con02 .step-con{margin-top: 60px;}
.develop-con02 .step-con ul{/* margin: 0 -1%; */margin-left: -2%;}
.develop-con02 .step-con ul li{float: left; /* width: 31.33%; margin: 0 1%; */}
.develop-con02 .step-con ul li.step01{width: 29.33%; margin-left: 2%; margin-right: 2%;}
.develop-con02 .step-con ul li.step02{width: 29.33%; margin: 0 1%; padding-left: 2%;}
.develop-con02 .step-con ul li.step03{width: 29.33%; margin-left: 2%; padding-left: 2%;}

.develop-con02 .step-con ul li .num{display: inline-block; font-style: italic; width: 60px; line-height: 160px; float: left; font-size: 75px; font-weight: 600; letter-spacing: -0.5px;}
.develop-con02 .step-con ul li.step01 .num{color: rgba(57,114,46,0.2);}
.develop-con02 .step-con ul li.step02 .num{color: rgba(57,114,46,0.6);}
.develop-con02 .step-con ul li.step03 .num{color: rgba(57,114,46,1);}

.develop-con02 .step-con ul li .line-txt{float: left; position: relative; display: inline-block; /* width: 248px; */width: calc(100% - 67px); border: 1px solid #e7e7e7; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px;}
.develop-con02 .step-con ul li .line-txt .inner{display: table; width: 100%;}
.develop-con02 .step-con ul li .line-txt .inner p{display: table-cell; vertical-align: middle; padding: 40px; font-size: 18px; line-height: 1.6; font-weight: 400; letter-spacing: -0.5px; color: #222; -ms-word-break: keep-all; word-break: keep-all;}

.develop-con02 .step-con ul li.step01 .line-txt:before, .develop-con02 .step-con ul li.step02 .line-txt:before{position: absolute; top: 80px; right: -20%; content: ''; width: 20%; height: 1px; background-color: #e7e7e7;}

@media all and (max-width:1120px){
	.develop-con02 .step-con ul li .line-txt .inner p br{display: none;}
	.develop-con02 .step-con ul li .line-txt .inner p{padding: 30px;}
}
@media all and (max-width:1024px){
	.develop-con02 .step-con ul{margin-left: -1%;}
	.develop-con02 .step-con ul li.step01{width: 30.33%; margin-left: 1%; margin-right: 2%;}
	.develop-con02 .step-con ul li.step02{width: 30.33%; margin: 0 1%; padding-left: 1%;}
	.develop-con02 .step-con ul li.step03{width: 30.33%; margin-left: 2%; padding-left: 1%;}
}
@media all and (max-width:800px){
	#develop2Con{padding-top: 90px; margin-top: -80px;}
	.develop-con02 .half-img{margin: 0 -15px;}
	.develop-con02 .half-img span{float: left; width: 100%;}
	
	.develop-con02 .step-con{margin-top: 25px;}
	.develop-con02 .step-con ul li .num{display: inline-block; vertical-align: middle; width: 45px; line-height: 1; float: none; font-size: 37px;}
	.develop-con02 .step-con ul{margin-left: 0%;}
	.develop-con02 .step-con ul li.step01{width: 100%; margin-left: 0; margin-right: 0;}
	.develop-con02 .step-con ul li.step02{width: 100%; margin: 0; padding-left: 0; margin-top: 35px;}
	.develop-con02 .step-con ul li.step03{width: 100%; margin-left: 0; padding-left: 0; margin-top: 35px;}
	.develop-con02 .step-con ul li .line-txt{vertical-align: middle; float: none; position: static; width: calc(100% - 80px);}
	.develop-con02 .step-con ul li .line-txt .inner p{padding: 25px; font-size: 14px;}

	.develop-con02 .step-con ul li.step01 .line-txt:before, .develop-con02 .step-con ul li.step02 .line-txt:before{display: none;}
}


#develop3Con{padding-top: 120px;}
.develop-con03{position: relative; width: 100%; height: 745px; background: url("../images/develop_con03_bg.jpg") center center no-repeat; -webkit-background-size: cover; background-size: cover;}
.develop-con03 .img{position: absolute; top: 50%; margin-top: -316px; left: 50%; margin-left: -550px; display: block; max-width: 1100px; width: 100%; height: 632px;}
.develop-con03 .img img{width: 100%; height: 100%;}
.develop-con03 .img .m-img{display: none;}

@media all and ( max-width: 1120px ){
	.develop-con03{position: static; height: auto; padding: 60px 0;}
	.develop-con03 .img{position: static; padding: 0 15px; width: calc(100% - 30px); top: 10%; left: 0; margin-top: 0; margin-left: 0; height: auto;}
}
@media all and ( max-width: 800px ){
	#develop3Con{padding-top: 90px;}
	.develop-con03{padding: 30px 0;}
	.develop-con03 .img .pc-img{display: none;}
	.develop-con03 .img .m-img{display: block;}
}


#develop4Con{padding-top: 120px;}
.develop-sub-txt{font-size: 30px; font-weight: 500; letter-spacing: -0.5px; color: #222;}
.develop-sub-txt.pd-css{padding-top: 30px; padding-bottom: 80px;}
.develop-con04-01{}
.develop-con04-01 .long-img{width: 100%; height: auto;}
.develop-con04-01 .long-img img{width: 100%; height: 100%;}
.develop-con04-01 .slice-img{margin: 30px -15px 0;}
.develop-con04-01 .slice-img span{display: block; /* width: calc(50% - 30px) ; */width: 645px; margin: 0 15px; height: auto; float: left;}
.develop-con04-01 .slice-img span:first-child{width: 425px;}
.develop-con04-01 .slice-img span img{width: 100%; height: 100%;}

.develop-con04-02{padding-top: 75px;}
.develop-con04-02 .img{margin-top: 30px; position: relative; width: 100%; height: 801px;}
.develop-con04-02 .img img{position: absolute; top: 0; left: 50%; margin-left: -960px; width: 1920px; height: 100%;}
.develop-con04-02 .img .pc-img{}
.develop-con04-02 .img .m-img{display: none;}

@media all and ( max-width: 1130px ){
	.develop-con04-02 .img{position: static; width: 100%; height: auto;}
	.develop-con04-02 .img img{position: static; margin-left: 0; width: 100%; height: 100%;}
	.develop-con04-02 .img .pc-img{display: none;}
	.develop-con04-02 .img .m-img{display: block;}
}
@media all and ( max-width: 1120px ){
	.develop-con04-01 .slice-img{margin: 1% -1% 0;}
	.develop-con04-01 .slice-img span{position: relative; width: 58%; margin: 0 1%; height: 0; padding-top: 48%;}
	.develop-con04-01 .slice-img span:first-child{width: 38%; padding-top: 48%;}
	.develop-con04-01 .slice-img span img{position: absolute; top: 0; left: 0;}
}
@media all and ( max-width: 800px ){
	#develop4Con{padding-top: 90px;}
	.develop-sub-txt{font-size: 20px;}
	.develop-sub-txt.pd-css{padding-top: 5px; padding-bottom: 35px;}
	.develop-con04-02{padding-top: 60px;}
}



/* 제품 뷰페이지 추가 css */
.product-img-editor{margin-top: 130px;}
.product-img-editor img{max-width: 100%; height: auto; margin: 0 auto;}

@media all and ( max-width: 800px ){
	.product-img-editor{margin-top: 65px;}
}