@charset "utf-8";
  :root {
  --border-radius: 0.25em;
  --border-width: 2px;
  --border-color: #fff;
  --background-color: #1c1c1c;
  --animation-duration: 500ms;
  --animation-durationB: 300ms;
  --blur: 20px;
}
   
 .main_wrap{
		width:98%;
		margin:0 auto;
		position:relative;
		max-width:1540px;
 		padding:0 10px;
	 
	
}

.section {
  
 
  box-sizing: border-box;
  overflow:hidden;
 
}
  
  /*mainimg slider/*/

  #mainimgContent{
	
	position:relative;
	width:100%;
	height:100%;
	overflow:hidden;
	min-height:780px;
	background:#fff;
	 
}

 
   
   


#mainimgContent_in{
	
	margin: 0px 0;
    position: absolute;
 	width:100%;
	height:100%;
	overflow: hidden;
}


.mainContainer{
	
	padding-top:0px;
	position:relative;
	width:100%;
 	margin:0 auto;
	background:#000;
 	
}
.mainContainer_in{
	width:100%;
	overflow:hidden;
	
}

	 
  

/**/

.main h2{
	 
 	font-size:60px;
	letter-spacing:-2px;
	font-weight:500;
	line-height:1.1;
	word-break:keep-all;
	margin-bottom:10px;
	 
	 
	

}
 
.main h2 strong{ font-weight:800; }

.main h3{
 	font-size:250%;
	letter-spacing:-1px;
	font-weight:500;
	line-height:1.1;
	word-break:keep-all;
	margin-bottom:10px;
	padding-top:10px;
}
.main h3 strong{font-weight:700;}
.main h4{
	 
	font-size:160%;
	letter-spacing:-1px;
	font-weight:600;
	line-height:1.1;
	word-break:keep-all;
	margin-bottom:10px;
	padding-top:10px;
}
 
  @media(max-width:1400px){
	 .main_wrap{
			width:98%;
	 }

  }
 
 @media(max-width:1000px){
	
	

	  #mainimgContent{
		min-height:600px;
	  }
	.main h2{
		font-size:55px;
		letter-spacing:-1px;
	}
	.main h3{
		font-size:240%;
	}
	.main h4{
		font-size:150%;
	}

	 
}

 @media(max-width:780px){
	.main h2{
		font-size:45px;
		letter-spacing:0px;
	}
	.main span.ttile{
		font-size:40px;

	}
	.main h3{
		font-size:200%;
	}
	.main h4{
		font-size:140%;
	}

 
}

@media(max-width:640px){
	.main h3{
		font-size:190%;
	}
	.main h4{
		font-size:130%;
	}
 
	
}

@media(max-width:420px){
	.main h2{
		font-size:25px;
 	}
	.main h3{
		font-size:170%;
		letter-spacing:0;
	}
	.main h4{
		font-size:120%;
	}
 
	
}

/*link button*/

 .btn_link{
	display:block;
	margin:10px auto ;
	position:relative;
	width:140px;
	text-align:	 left;
	border: 2px solid #ccc;
	border-radius:30px;
	padding:7px 7px 5px 20px;
	color:#ccc;
	font-size:13px;
	line-height:1;
	 
}
 .btn_link i{
	 font-size:21px;
	 font-weight:300;
	line-height:1.2;
	vertical-align:middle;
	margin-left:5px;
	margin-top:-2px;
}

.btn_link:hover{
	background: var(--t_majorcolorSkyblueB);
	border: 2px solid var(--t_majorcolorSkyblueB);
	color:#fff;
}
 
  /**/

  /*icon_arrow*/

/**/
a.more_icon{
	display:inline-block;
	 border-radius:50% 50%;
	 border: 1px solid rgba(255,255,255,.5);
	 color:#fff;
	 font-size:100%;
	  vertical-align:middle;
	 width:50px;
	 height:50px; 
	 text-align:center;
	 background-image: linear-gradient(to left,
    transparent,
    transparent 50%,
    rgba(27,125,188,.3) 50%,
    rgba(0,145,80,.3));
   background-position: 100% 0px;
    background-size: 200% 100%;
	 transition: all .25s ease-in;
}
 a.more_icon:hover{
	 
	 border: 1px solid rgba(255,255,255,1);
	 background-position: 0 0;
	  background-image: linear-gradient(to left,
	   transparent,
		transparent 50%,
		rgba(27,125,188,1) 50%,
		rgba(0,145,80,1));

}

 a.more_icon i{display:inline-block;vertical-align:middle;line-height:50px;}

 
 

 .ttitinfo{text-align:left;padding:10px  0px 10px 0;margin:0;}
  .ttitinfo span.s_txt{display:block;font-weight:500;margin-top:20px;margin-bottom:20px;color:var(--t_gray300);}
 
 .ttitinfo h2 span{display:block;}
 .ttitinfo h3 span{display:block;}
 
  .ttitinfo .txt_dec{
	font-size:120%; 
	letter-spacing:-1px;
	font-weight:500;
 }
@media(max-width:1000px){
	.ttitinfo .txt_dec{
		font-size:120%; 
		letter-spacing:0px;
	 }
	  
	 .ttitinfo h3 span{display:inline;}
}
@media(max-width:780px){
	.ttitinfo .txt_dec{
		font-size:110%; 
 	 }
}
 
 



/*유튜브*/
 #_buffering-background {
  position: absolute;
  width: 100%;
  top: 0;
  bottom: 0;
   
   z-index: 1;
}
  #_buffering-background span{
 display:block;
  position: absolute;
  width: 100%; 
  top: 0;
  bottom: 0;
  /*background:url(../image/mainimg01.jpg) no-repeat center 0;
  background-size:cover;*/
  z-index: 2;
}
 #_buffering-backgroundB {
  position: absolute;
  width: 100%;
  top: 0;
  bottom: 0;
  background: #222;
   z-index: 1;
}
  #_youtube-iframe {
position: absolute;
 top: 50%;
  left: 50%;
  height: 300vh;
  width: 120vw;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
 
 
@media (min-aspect-ratio: 16/9) {
  #_youtube-iframe {
    height: 56.25vw;
  }
}
@media (max-aspect-ratio: 16/9) {
  #_youtube-iframe{
    width: 177.78vh;
  }
}
@media(max-width:1000px){
	 #_buffering-background {
		display:none;
	 }
	  #_youtube-iframe {
		display:none;
	  }
}

 

/*businessarea */
.businessarea{
	/* background:url(/image/back_business.jpg) no-repeat center center;
	 background-size:cover;*/
	
  position: relative;
  width: 100%;
  z-index: -99;
	overflow: hidden;
	height: 100vh;
	
}





.video-container{
   display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		position: absolute;
		height: 100%;
}
.video-container:after{
	content:'';
	display:block;
	position:absolute;
	width:100%;
	height:100%;
	background: rgba(24,80,197,.5);
	left:0;
	top:0;
}
 
.video-container iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 120vw;
  height: 300vh;
  transform: translate(-50%, -50%);
  pointer-events: none;

}

.businessarea .ttitinfo{
		padding:50px 0;
		color:#fff;
}

 .businessarea  .ttitinfo .leftcon{
	text-align:center;
}
.businessarea .ttitinfo h4 span{
 	 display:block;
	 opacity:.6;
	/* color:#fff;*/
}
 

.businessarea .ttitinfo .txt_dec{
 	
	align-self: flex-end; 
	display:flex;
	flex-wrap:wrap;
	justify-content: flex-end;
	

	 

	
 
}
.businessarea .ttitinfo .txt_dec span{
	display:block;
	 
}
  .accordion {
  width: 100%;
  max-width: 100%;

  margin: 50px auto;
}

.accordion ul {
  width: 100%;
  display: flex;
 
   justify-content: space-between;
  margin: 0;
  padding: 0;
}

.accordion ul li {
   
  position: relative;
  width: 19%;
  margin:1% 0% 1% 0%;  
  height: 100%;
  border-radius:20px;
  background-repeat: no-repeat;
  background-position: center center;
 
  transition: all 500ms ease;
   overflow: hidden;
}
.accordion ul li:after {
content:'';
	display:block;
	position:absolute;
	width:100%;
	height:100%;
	
	left:0;
	top:0;
}
.accordion ul li:last-child {margin-right:0;}
.accordion ul li .title{
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	text-align:center;
	padding-left:0px;
	padding-top:30px;
	color:#fff;
	font-size:160%;
	opacity:1;
	 background-image: linear-gradient(to top,
	   transparent,
		transparent 50%,
		rgba(0,0,0,0) 50%,
		rgba(0,0,0,1));
}
.accordion ul li:hover .title{
	display:none;
}

.accordion ul li div {
  display: block;
  overflow: hidden;
  width: 100%;

   
}

.accordion ul li div a {
  display:flex;
  flex-wrap:wrap;
	align-items: stretch;
	justify-content: center;
	align-content: flex-start; 
  height: 450px;
  width: 100%;
  position: relative;
  z-index: 3;
  text-align:center;
  padding: 20px 20px;
  box-sizing: border-box;
  color: #fff;
  text-decoration: none;
  background: rgba(0, 0, 0, 0.1); 
  transition: all 300ms ease;
}

.accordion ul li div a * {
  opacity: 0;
  margin: 0;
  width: 100%;
  
  position: relative;
  z-index: 5;
 
  overflow: hidden;
  -webkit-transform: translateX(-20px);
  transform: translateX(-20px);
  -webkit-transition: all 400ms ease;
  transition: all 400ms ease;
}

.accordion ul li div a h3 {
  

  margin-bottom: 20px;

}

.accordion ul li div a p {
 
 font-size:120%;

}
.accordion ul li div a p span{
	display:inline-block;
	line-height:1.2;
 }
.accordion ul li div a .viewmore{
		 display:inline-block;
		border-radius:30px;
		border: 1px solid rgba(255,255,255,.2);
		padding:5px 10px;
		
		width:150px;
		margin-top:20px;
		background: rgba(15,80,152,.3);
	 webkit-backdrop-filter: blur(15px);
	backdrop-filter: blur(15px);  
 
}
.accordion ul li div a .viewmore:hover{
	background: rgba(15,80,152,.8);
}

.accordion ul li:nth-child(1) { background-image: url("/image/mainpro01.jpg");background-size:cover }

.accordion ul li:nth-child(2) { background-image: url("/image/mainpro02.jpg");background-size:cover  }

.accordion ul li:nth-child(3) { background-image: url("/image/mainpro03.jpg");background-size:cover }

.accordion ul li:nth-child(4) { background-image: url("/image/mainpro04.jpg");background-size:cover  }

.accordion ul li:nth-child(5) { background-image: url("/image/mainpro05.jpg");background-size:cover  }

.accordion ul:hover li { margin-right:10px; margin-left:10px;}

.accordion ul:hover li:hover { width: 40%;   }

.accordion ul:hover li:hover a { background: rgba(0, 0, 0, 0.1); }

.accordion ul:hover li:hover a * {
  opacity: 1;
  -webkit-transform: translateX(0);
  transform: translateX(0);

}
.accordion ul:hover li:hover a{
background-image: linear-gradient(to top,
	   transparent,
		transparent 50%,
		rgba(0,0,0,0) 50%,
		rgba(0,0,0,1));

		}

 @media screen and (max-width: 1000px) {
.businessarea{
 	padding-top:30px;
	padding-bottom:30px;
	  z-index: 1;
	overflow: hidden;
	height: auto;
	background:url(/image/back_business.jpg) no-repeat center center;
	 background-size:cover;

}
.video-container{
	display:none;
}

.video-container iframe {display:none;}


.businessarea .ttitinfo h4 span{
 	 display:inline;
	 
}
 .accordion {
 
  margin: 0px auto;
}
 
	.accordion ul {
		flex-wrap:wrap;
	}
	.accordion ul li {
		width:49%;
	}
	accordion ul li,
	.accordion ul li:hover,
	.accordion ul:hover li,
	.accordion ul:hover li:hover {
	  position: relative;
	
	  width: 49%;
	  -webkit-transition: none;
	  transition: none;
	}
	.accordion ul:hover li { margin-right:0; margin-left:0;}
	.accordion ul li div a {
		height:300px;
	}
	.accordion ul li div a h3 {
	  
	 padding-top:20px; 
	}
	.accordion ul li div a p {
 
	 font-size:100%;

	}
	.accordion ul li div a p span{
		display:inline;
	}

}


  @media screen and (max-width: 480px) {

	.accordion ul li {
		width:99%;
	}
	accordion ul li,
	.accordion ul li:hover,
	.accordion ul:hover li,
	.accordion ul:hover li:hover {
	 
	  width: 99%;
	  
	}
  }

 /**/
 .aboutusarea{
	
 }

 .aboutusarea .titlarea{
	padding-top:80px;
	background:#fff;
	text-align:center;
 }
  .aboutusarea .titlarea span{
	font-size:600%;
	font-weight:700;
	line-height:1.1;
	display:block;
  }
  .aboutusarea  .backimg{
	background:url(/image/back_about_2.jpg) no-repeat center center;
	 background-size:cover;
	 min-height:600px;
clip-path:circle(100%);
	filter:blur(0px);
	transform:scale(1);
	 
  }

/* .aboutusarea  .backimg.on-view{
	
}*/

  @media screen and (max-width: 1000px) {
	 .aboutusarea .titlarea{
		padding-top:60px;
		 
	 }
	  .aboutusarea .titlarea span{
		font-size:400%;
	  }
	  .aboutusarea  .backimg{
		min-height:500px;
	  }
  }

  @media screen and (max-width: 640px) {
 .aboutusarea .titlarea{
		padding-top:30px;
		 
	 }
	  .aboutusarea .titlarea span{
		font-size:300%;
	  }
	  .aboutusarea  .backimg{
		min-height:400px;
	  }
  }
  @media screen and (max-width: 420px) {

	  .aboutusarea .titlarea span{
		font-size:200%;
	  }
	   .aboutusarea  .backimg{
		min-height:300px;
	  }
	 
  }

  /**/
.company_box{
	  
	position:absolute;
	top:30%;
	width:100%;
	 
	
		display:flex; 
	    justify-content:center; 
	   align-items:center;
		flex-wrap: nowrap;
}
.company_box .com_iconbox{
	 
	 
	 vertical-align:top;
	 margin-bottom:30px;
	 margin-left:10px;
	background: rgba(0,0,0,.2);
	border: 2px solid rgba(255,255,255,0);
	border-radius:50% 50%; 
	webkit-backdrop-filter: blur(15px);
	backdrop-filter: blur(15px);
	

}
 .company_box .com_iconbox:hover{
	 background: rgba(0,0,0,.3);
	 border: 2px solid rgba(255,255,255,1);
 }

.company_box .com_iconbox .imgicon{
		display:flex; 
	 justify-content:center;	 
	 align-items:center;
	 width:250px;
	 height:250px;
 }
 .company_box .com_iconbox .imgicon a{
	display:flex; 
	 justify-content:center;	 
	 align-items:center;
 }
 
.company_box .com_iconbox .imgicon span.inbox{

	
}

.company_box .com_iconbox  p{
	display:block; 
	color:#fff;
	font-size:140%;
	font-weight:600;
	padding-top:5px;
}


 .linkbox{
	display:block;
	 position:relative;
	margin: 20px auto 0 auto;
	padding:0px; 
	 width:70px;
	 text-align:center;
	 background:red;
	 
}
 
 
 .linkbox span.arrow{
 position:absolute;
  top:0px;
  display: block;
   width: 15px;
	right:0;
	 
   height: 13px;
   border-left: 1px solid #fff;
  z-index:2;
   transform: rotate(135deg);
}

 
 .linkbox span.arrow:after {
	  content: "";
	  display: block;
	  width: 1px;
	  height: 70px;
	  background-color: #fff;
	  transform: rotate(-45deg) translate(24px,  10px);
	  left: 0;
	  top: 0;
}


/**/
@media(max-width:1000px){
	.aboutusarea .titlarea{

	}

	  .company_box{
		 margin-top:20px;
		width:100%; 
	  }

}
 @media(max-width:780px){
	 .company_box .com_iconbox .imgicon{
		width:150px;
		height:150px;
	}
	 .linkbox{
		width:40px;
	 }
	 .linkbox span.arrow:after {
	  content: "";
	  display: block;
	  width: 1px;
	  height: 40px;
	  background-color: #fff;
	  transform: rotate(-45deg) translate(14px,  6px);
	  left: 0;
	  top: 0;
}
	 
 
 
 }

  

 @media(max-width:640px){
	 .company_box .com_iconbox .imgicon{
		width:150px;
		height:150px;
	}
	.company_box .com_iconbox  p{
		font-size:120%;
	}

 
 }



  @media(max-width:480px){
	.company_box .com_iconbox .imgicon{
		width:110px;
		height:110px;
		 
	}
	.company_box .com_iconbox  p{
		font-size:100%;
	}

  }

   @media(max-width:380px){
	.company_box .com_iconbox .imgicon{
		width:90px;
		height:90px;
		 
	}
	.company_box .com_iconbox  p{
		font-size:70%;
	}

  }

  /**/
  

/*설비현황*/
.equarea{
position: relative;
background: url(/image/back_work.jpg) no-repeat center 0;
	background-size: cover; 
 
 
}
.equarea .width_wide_wrap{
	display:flex;
	justify-content: space-between;
}
.nav__info-container {
  position: relative;
  left:0;
  top:0;
  margin:0;
  padding:0; 
  
  height:100%;
  
 
  
}
.nav__info-container .scrollpanels {
  
  position: relative;
  width:100%;
  left:0px;
  top:0;
  z-index: 7;
  padding-top:200px;

  
   
}

.equarea .ttitinfo{
	color:#fff;
	padding-bottom:0px;
}

.equarea .ttitinfo .s_txt{
	margin-bottom:20px;
	color:#fff;
	font-size:20px;
}
.equarea .ttitinfo h2 span{
	display:inline-block;

}


.scrollpanels-content {
	padding-top:200px;
	padding-bottom:200px;
	text-align:center;
}

.scrollpanels-content .gridbox{
	display: grid;
  grid-template-rows: repeat(2, 1fr);
  grid-template-columns: 1fr 1fr ;

  grid-gap: 60px; 
  
}
.scrollpanels-content .equbox{
	
	position:relative; 
 
	 width:400px;
	 border-radius:20px;
	 overflow:hidden;
	 border: 1px solid rgba(255,255,255,1);
	 box-shadow:5px 5px 10px  rgba(0,0,0,0.5);
  
}

 

 
 
.scrollpanels-content .equbox a{
	display:block;
	 overflow:hidden;
	 position:relative;
	 width:100%;
	 height:100%;
}
 

.scrollpanels-content .equbox .equbox_in{
	
	position:absolute;
	bottom:0px;
	width:100%;
}
.scrollpanels-content .equbox .equbox_in span{
	display:block;
	color:#fff;
	width:100%;	
	font-size:100%;
	text-align:center;
	padding:20px 0;
	background: rgba(252,255,255,0.2);
	webkit-backdrop-filter: blur(15px);
	backdrop-filter: blur(15px); 
	-webkit-transition: .6s; 
	transition:.6s;
}

.scrollpanels-content .equbox a:hover .equbox_in span{
	font-size:110%;
	-webkit-transition: .6s; 
	transition:.6s;

}

@media(max-width:1400px){
	.scrollpanels-content .gridbox{
		grid-gap: 30px; 
	}
	.scrollpanels-content .equbox{
		  
		 width:300px;
	}
}


 @media(max-width:1100px){
	.equarea .width_wide_wrap{
		display:block;
	}
	.nav__info-container .scrollpanels {
			padding-top:80px;
	}
	.scrollpanels-content {
		padding-top:50px;
		padding-bottom:50px;
	}
	.scrollpanels-content .gridbox{
			display:flex;
			flex-wrap:wrap;
	}
	.scrollpanels-content .equbox{
		
		margin:10px 1%; 
		 width:45%;
	}
	 

  }

   @media(max-width:640px){
		
		.equarea .ttitinfo h2 span{
			display:inline;
		}
		.scrollpanels-content .equbox{
 			 width:96%;
			 margin:10px 2%; 
			  
		}
			 

   }