@charset "utf-8";
body, ul, ol, span, input, p, dl, dt, dd, table, th, td, div, section, textarea, h1, h2, h3, h4, h5, h6{
	margin:0px; padding:0px; list-style:none;
	font-family: "S-Core Dream","Noto Sans KR", sans-serif;
	letter-spacing:-0.04em;
	font-weight:300;
	word-break:keep-all;
}

body{padding-bottom:260px; top:0px !important;}
@media(max-width:768px){
	body{padding-bottom:410px;}
}

a:link{text-decoration:none;}
ul, ol{margin:0px; padding:0px; list-style:none;}

.layout{width:1380px; margin:auto;}
@media(max-width:1400px){
	.layout{width:100%; overflow:hidden;}
}
/* google trnasfer language */
#google_translate_element{position:absolute; right:10px;}
#google_translate_element > div > div {	position: relative;	min-width: 200px; display:inline; padding:0px 5px; }
iframe.skiptranslate {display: none !important;}
#goog-gt-tt, .goog-te-balloon-frame, [id^="goog-gt"] { display: none !important; }
pre.debug{position:absolute; z-index:999; background:white; padding:20px;}

/*nav*/
#nav .layout{position:relative;}
#nav .menu{display:flex; flex-wrap:wrap; overflow:hidden; position:absolute; z-index:9; top:32px; right:0px;}
#nav .menu li.lang{padding:0px 10px; font-size:10pt; align-content:center; width:120px; cursor:pointer;  color:#194267;}
#nav .menu li.lang > .langBtn >  .bi{font-size:2em;}
#nav .menu li.lang > .langBtn > span{font-weight:600; display:inline-block; position:absolute; margin:10px 0px 0px 5px;}
#nav .menu li.lang > .box{z-index:1; display:none;  visibility: hidden; border:1px solid #194267; border-radius:10px;  background:white; padding:10px 0px; box-shadow:0px 0px 5px rgba(0,0,0,0.1); position:relative; z-index:1; opacity: 0; transition: opacity 0.3s, visibility 0.3s;}
#nav .menu li.lang > .box.active{display:block; visibility: visible; opacity:1; transition:0.3s;}
#nav .menu li.lang > .box:before{content:"";  position:absolute;  top:-10px; left:50%; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 10px solid #194267; transform:translate(-50%,0%);}
#nav .menu li.lang > .box ol.items li{padding:2px 10px; font-weight:600; text-align:center;}
#nav .menu li.lang > .box ol.items li:hover{background:#194267; color:white;}
#globalmenu{position:fixed; right:15px; top:27px; height:34px; z-index:99; color:#111; display:none;}
/* .hamburger .is-active{background-color:white !important; border:1px solid red;} */
#globalmenu.hamburger.main.is-active .hamburger-inner {background-color:#111;}
#globalmenu.hamburger.main.is-active .hamburger-inner::after {background-color:#111;}
#globalmenu.hamburger.main.is-active .hamburger-inner::before {background-color:#111;}
@media(max-width:768px){
	#nav .menu{top:10px; position:fixed; right:40px;}
	#globalmenu{display:block;}
}
/* header */
#header{position:fixed; width:100%; height:100px; top:0px; left:0px; z-index:9;}
#header .logo{position:absolute; z-index:2; margin-top:20px;}
#header:before{content:""; position:absolute; left:0px; top:0px; width:100%; height:101px; background:white; z-index:2; border-bottom: 2px solid #4ba522}
@media(max-width:768px){
	#header{height:65px;}
	#header .logo{margin:10px;}
	#header .logo img{width:100px;}
	#header:before{height:65px; box-shadow:0px 0px 10px rgba(0,0,0,0.5);}
}

/*gnb*/
#gnb{overflow:hidden; padding:0px 0px; height:103px;  position:relative;  transition:0.3s; }
#gnb.active, #gnb.on{height:170px; transition:0.3s}
#gnb .menu{display:flex; flex-wrap:wrap; margin:0px auto 0px auto; padding:0px; width:1000px;}
#gnb .menu > li {flex:1;}
#gnb .menu > li > .mbtn{font-size:16pt; font-weight:600; text-align:center; cursor:pointer; position:relative; z-index:8; font-weight:600; height:100px; line-height:100px;  transition:0.3s; overflow:hidden; height:100px;}
#gnb .menu > li:nth-child(2) > .mbtn{word-spacing: 4px;}

#gnb .menu > li article{position:absolute; width:100%; left:0px; background:#4ba522; height:80px; top:21px;  transition:0.4s; z-index: 0;}
#gnb .menu > li article .smenu{margin:0px 0px 0px 0px; padding:0px; list-style:none; position:absolute; left:50%; width:1380px; transform: translate(-50%, 0px);  top:0px; transition:0.3s; z-index:1; text-align:center; }
#gnb .menu > li.active article{top:100px;  transition:0.4s; z-index: 1;}

#gnb .menu > li.on article{top:100px;  transition:0.4s; z-index: 0;}
#gnb .menu > li.active .smenu, #gnb .menu > li.on .smenu{top:0px; transition:0.3s;}
#gnb .menu > li.active .mbtn, #gnb .menu > li.active .mbtn{color:#319b00; transition:0.3s;}

#gnb .menu > li .mbtn .bulit{display:none;}
#gnb .menu > li .smenu > li{font-size:14pt; padding:0px 0px; font-weight:400; display:inline-block;}
#gnb .menu > li .smenu > li a{font-size:inherit; display:inline-block; width:100%; color:rgba(255,255,255,0.7); padding:20px 30px; transition:0.3s; }
#gnb .menu > li .smenu > li a:hover{color:white; transition:0.3s; }
@media(max-width:768px){
	#gnb{height:65px;}
	#gnb .menu{display:none;}
}

/*slidemenu*/
#slidemenu{background:#eaf5e5; box-shadow:0px 0px 5px rgba(0,0,0,0.5); position:fixed; width:100%; display:none; top:65px; left:-100%; height:calc(100% - 65px); z-index:8;}
#slidemenu .menu .mbtn{font-weight:600; padding:0px 10px; cursor:pointer;}
#slidemenu .menu .mbtn .bulit{float:right;}
#slidemenu .menu .smenu{display:none; transition:unset;}
#slidemenu .menu .smenu li a{color:#111;}
@media(max-width:768px){
	#slidemenu{display:block;}
/* 	#slidemenu.active{left:0%;} */
	#slidemenu .menu{border-bottom:1px solid rgba(91,180,50,0.7);}
	#slidemenu .menu .mbtn{font-size:1.1em; padding:15px 20px; border-bottom:2px solid rgba(91,180,50,0.3); border-top:1px solid rgba(91,180,50,0.7); background:white;}
	#slidemenu .menu .mbtn i.bi{transition:0.3s; transform:rotate(45deg) !important;}
	#slidemenu .menu .smenu{background:#5BB432; padding:0px 0px 0px 0px;}
	#slidemenu .menu .smenu li a{display:inline-block; font-size:0.9em; font-weight:400; width:100%; padding:10px 0px 10px 20px; color:rgba(255,255,255,0.9); border-bottom:1px solid rgba(255,255,255,0.1);}
}
/* Visual */
#visual{position:fixed; top:100px; width:100%; z-index:0; background:white;}
#visual.main{height:650px; color:white;}
#visual.main .menu {position:absolute;}
#visual.main .menu li.slide1 .box{position:relative; background:url('/images/main_img.png') center no-repeat; background-size:cover; width:100%; height:100%;}
#visual.main .menu li.slide2 .box{position:relative; background:url('/images/main_img2.png') center no-repeat; background-size:cover; width:100%; height:100%;}
#visual.main .menu li.slide3 .box{position:relative; background:url('/images/main_img3.png') center no-repeat; background-size:cover; width:100%; height:100%;}
#visual.main .menu li .box .slogan{position:absolute; top:50%; left:10%; transform:translate(0%, -50%);}
#visual.main .menu li .box .slogan .title{font-size:34pt; font-weight:600; letter-spacing:0; color:rgba(255,255,255,0.95);}
#visual.main .menu li .box .slogan .summary{font-size:20pt; margin-top:20px; letter-spacing:0px; color:rgba(255,255,255,0.9);}
#visual.main .menu li .box .slogan .summary p{letter-spacing:inherit;}
#visual.main .visual-swiper .swiper-slide {opacity: 0; transition: opacity 0.6s ease;}
#visual.main .visual-swiper .swiper-slide-active {opacity: 1;}
@keyframes fadeUp {
    0% { opacity: 0; transform: translateY(60px); }
    100% { opacity: 1; }
}
@keyframes fadeDown {
    0% { opacity: 0; transform: translateY(-60px); }
    100% { opacity: 1; }
}
#visual.main .swiper-slide-active .slogan .title {opacity:0; animation: fadeDown 0.8s ease forwards; animation-delay: 0.3s; }
#visual.main .swiper-slide-active .slogan .summary {opacity:0; animation: fadeUp 0.8s ease forwards; animation-delay: 0.3s; }
@media(max-width:768px){
	#visual.main{height:250px; color:white; background-size:100%;}
	#visual.main .menu li .box .slogan{left:5%; transform:translate(0%, -50%);}
	#visual.main .menu li .box .slogan .title{font-size:1.1em;}
	#visual.main .menu li .box .slogan .summary{font-size:0.8em;}
}
	
#visual.sub{background:black; height:400px; color:white; text-align:center;}
#visual.sub h2.title{font-size:38pt; font-weight:700; letter-spacing:0; padding-top:130px; text-align:center; text-shadow:0px 0px 5px rgba(0,0,0,0.3);}
#visual.sub h2.title:before{content:""; font-size:18pt; position:absolute; left:0px; margin-top:-40px; text-align:center; font-weight:400; width:100%; letter-spacing:0.04em;}
#visual.sub1 h2.title:before{content:"Company"}
#visual.sub2 h2.title:before{content:"Product";}
#visual.sub3 h2.title:before{content:"Application";}
#visual.sub4 h2.title:before{content:"Technology";}
#visual.sub5 h2.title:before{content:"Customer";}

#visual.sub1{background:url('/images/sub_img01.png') center no-repeat; background-size:cover;}
#visual.sub2{background:url('/images/sub_img02.png') center no-repeat; background-size:cover;}
#visual.sub3{background:url('/images/sub_img03.png') center no-repeat; background-size:cover;}
#visual.sub4{background:url('/images/sub_img04.png') center no-repeat; background-size:cover;}
#visual.sub5{background:url('/images/sub_img05.png') center no-repeat; background-size:cover;} 
@media(max-width:768px){
	#visual{top:65px;}	
	#visual.sub{height:160px; color:white;}
	#visual.sub h2.title{font-size:1.8em; padding-top:70px;}
	#visual.sub h2.title:before{font-size:0.65em; margin-top:-30px;}
}

/* middler */
#middler{position:relative; z-index:1; padding:0px 0px 0px 0px; margin:0px 0px 0px 0px; background:white;  min-height:500px;}
#middler.main{margin-top:700px; }

#middler.sub{margin-top:400px;  padding:0px 0px 50px 0px;}
#middler.sub .ctn{padding:0px 0px;}
@media(max-width:768px){
	#middler.main{margin-top:315px; }
	#middler.sub{margin-top:225px;  padding:0px 0px 50px 0px;}
}
/* webcon */
#middler #webcon{background:#5BB432;}
#middler #webcon .menu{text-align:center;}
#middler #webcon .menu li{display:inline-block;}
#middler #webcon .menu li a{font-size:16pt; display:inline-block; margin:20px 30px; color:rgba(255,255,255,0.7);  font-weight:400; transition:0.3s;}
#middler #webcon .menu li a:hover{color:rgba(255,255,255,1); transition:0.3s; }
#middler #webcon .menu li.active a{color:white; position:relative;}
#middler #webcon .menu li.active a:before{content:""; position:absolute;  left:0px; top:33px; width:100%; height:2px; background:rgba(255, 255, 255, 0.9);}
@media(max-width:768px){
	#middler.sub #webcon{display:none;}
}
/*mobilecon*/
#mobilecon{display:none;}
@media(max-width:768px){
	#mobilecon{display:flex; flex-wrap:wrap; background:#5BB432; position:absolute; width:100%; top:0px; z-index:7; }
	#mobilecon.active{position:fixed; width:100%; top:65px;  opacity:1;}
	#mobilecon .depth1{width:20%; }
	#mobilecon .depth2{width:40%;}
	#mobilecon .depth3{width:40%; border-right:1px solid rgba(255,255,255,0.3);}
	#mobilecon .depth{float:left; cursor:pointer; padding:5px 10px; border-left:1px solid rgba(255,255,255,0.3); border-bottom:1px solid rgba(255,255,255,0.3); border-top:1px solid rgba(255,255,255,0.3); position:relative; }
	#mobilecon .depth .title{padding:0px 0px; font-weight:400; font-size:0.75em; color:rgba(255,255,255,0.9);}
	#mobilecon .depth .title{overflow:hidden; white-space:normal;  display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient: vertical; line-height:38px;}
	#mobilecon .depth .bulit{position:absolute; right:5px; top:12px; color:rgba(255,255,255,0.9); opacity:1; transition:0.3s; }
	#mobilecon .depth .summary{max-height: 0; border:1px solid #ddd; border-top:none; padding:0px; width:calc(100% + 2px); left:-1px; position:absolute; background:white; top:49px; overflow: hidden; transition: max-height 0.4s ease, opacity 0.4s ease; opacity: 0;}
	#mobilecon .depth.active{background:#49a51f;}
	#mobilecon .depth.active .summary { max-height: 500px; opacity: 1;}
	#mobilecon .depth a, #mobilecon .depth .mbtn{color:#555; padding:8px 5px; display:inline-block; font-size:0.8em; border-bottom:1px solid rgba(0,0,0,0.1); width:100%;}
	#mobilecon .depth a:hover,#mobilecon .depth .mbtn:hover{background:#eaeaea; font-weight:600;}
	#mobilecon .depth2 .menu .smenu{display:none;}
	#mobilecon .depth2 .menu .mbtn .bulit{display:none;}
}


#middler.sub #snb .menu{display:flex; flex-wrap:wrap; margin:30px 0px; border-bottom:1px solid #ddd; border-right:1px solid #ddd; background:#ddd;}
#middler #snb .menu li{flex:1; border-top:1px solid #ddd; border-left:1px solid #ddd; }
#middler #snb .menu li a{font-size:14pt; display:inline-block; width:100%; padding:0px 0px; color:#555;  font-weight:300; text-align:center; background:#F5F6F8;}
#middler #snb .menu li a{overflow:hidden; white-space:normal;  display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient: vertical; line-height:65px;}
#middler #snb .menu li.active a{color:white; font-weight:600; background:#5BB432;}
@media(max-width:768px){
	#middler #snb .menu li{flex:unset; width:calc(100%/3) !important;}
	#middler #snb .menu li a{font-size:0.85em; padding:0px 5px; height:40px; line-height:40px;}
}

#middler.sub h3.title{font-size:1.8em; font-weight:600; margin:50px 0px;}
@media(max-width:768px){
	#middler.sub h3.title{padding:80px 0px 30px 10px; margin:0px; font-size:1.5em; }
}
/* #middler.sub #snb .menu li a{padding:17px 0px; display:inline-block; width:100%;  text-align:center;} */
/*#middler.sub #snb .menu li a.active{}*/

/* footer */
#footer{position:fixed; bottom:0px; width:100%; z-index:-2;}
.footer_bg{width:1px; height:260px; border:1px solid red;}
#footer.active{ z-index:0;}
#footer{text-align:center; background:#0F181F; color:rgba(255,255,255,0.5); overflow:hidden; padding:70px 0px 30px 0px; align-content:center;}
#footer .logo{float:left;}

#footer #fnb{margin-bottom:25px;}
#footer #fnb .menu{display:flex; flex-wrap:wrap;}
#footer #fnb .menu .mbtn{cursor:pointer; padding:0px 40px; font-size:13pt; color:rgba(255,255,255,0.9); font-weight:500;}
#footer #fnb .menu .mbtn .bulit{display:none;}
#footer #fnb .smenu{display:none;}

#footer .info{font-size:10pt; margin-left:40px; float:left; overflow:hidden; }
#footer .info > span{margin:5px 0px; font-weight:400;}
#footer .info a{color:rgba(255,255,255,0.5);}

#footer .info .company{float:left;}
#footer .info .company:before{content:""; font-weight:400;}
#footer .info .company:after{content:"|"; margin:0px 12px; }

#footer .info .ceo{float:left;}
#footer .info .ceo:before{content:"대표이사 : "; font-weight:400;}
#footer .info .ceo:after{content:"|";  margin:0px 12px; }

#footer .info .addr{float:left;}
#footer .info .addr:before{content:""; font-weight:400;}

#footer .info .tel{clear:both; float:left; }
#footer .info .tel:before{content:"Tel : "; font-weight:400;}
#footer .info .tel:after{content:"|";  margin:0px 12px; }

#footer .info .fax{float:left;}
#footer .info .fax:before{content:"Fax : "; font-weight:400;}
#footer .info .fax:after{content:"|";  margin:0px 12px; }

#footer .info .email{float:left;}
#footer .info .email:before{content:"Email : "; font-weight:400;}

#footer .info .time{clear:both; float:left;}
#footer .info .time:before{content:"업무시간 : "; font-weight:400;}

#footer .quick{float:right; margin:30px -5px 0px 0px;}
#footer .quick .menu{display:flex; flex-wrap:wrap;}
#footer .quick .menu li a{display:inline-block; padding:0px 5px;}

#footer .copy{overflow:hidden; width:100%; text-align:right; font-size:10pt; font-weight:400;}
@media(max-width:768px){
	#footer{padding:50px 10px; z-index:-2;}
	#footer .info{margin:0px; width:100%; font-size:0.75em;}
	#footer .info .company{float:unset;}
	#footer .info .ceo{float:unset;}
	#footer .info .ceo:after{display:none;}
	#footer .info .tel{float:unset;}
	#footer .info .fax{float:unset;}
	#footer .info .fax:after{display:none;}
	#footer .info .addr{float:unset; display:block; width:100%;}
	#footer .info .email{float:unset; display:block; width:100%;}
	#footer .info .time{float:unset; display:block; width:100%;}
	#footer .logo{float:unset;}
	#footer .logo img{width:80px;}
	#footer #fnb .menu{margin:20px 0px;}
	#footer #fnb .menu li{flex:1; }
	#footer #fnb .menu li .mbtn{padding:0px; font-size:0.85em;}
	#footer .quick{float:unset; width:100%; margin:0px 0px 0px 0px; clear:both; text-align:center; padding:20px 0px 10px 0px;}
	#footer .quick .menu{display:unset; flex-wrap:unset; width:100%;}
	#footer .quick .menu li{display:inline;}
	#footer .quick .menu li a{display:inline-block; padding:0px 5px; text-align:center;}
	#footer .quick .menu li a img{width:40px;}
	#footer .copy{text-align:center; margin-top:10px; font-size:0.7em;}
}

.popup{display:none;}
.popup .image{margin:0px;}
.popup .foot{ background:#555; overflow:hidden; color:white; font-size:0.85em;}
.popup .foot .text{padding:5px;}