@charset "utf-8";
 
   
 .main_wrap{
 		width:90%;
		margin:0 auto;
		position:relative;
 }

    
 .wide_wrap{
 		width:100%;
		margin:0 auto;
		position:relative;
		padding:0 0;
 }
  
  /*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:70px;
	letter-spacing:-3px;
	font-weight:600;
	line-height:1.1;
	word-break:keep-all;
	margin-bottom:20px; 

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

.main h3{
 	font-size:300%;
	letter-spacing:-2px;
	font-weight:600;
	line-height:1.1;
	word-break:keep-all;
	margin-bottom:10px;
	padding-top:10px;
}
.main h4{
	 
	font-size:150%;
	letter-spacing:-2px;
	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%;
	 }
	 .main h4{
		font-size:140%;
	 }

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

	  #mainimgContent{
		min-height:600px;
	  }
	.main h2{
		font-size:40px;
		letter-spacing:-1px;
	}
	.main h3{
		font-size:250%;
	}
	.main h4{
		font-size:130%;
	}

	 
}

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

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

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


 .ttitinfo{text-align:center;}
 .ttitinfo b{display:block;margin-bottom:20px;}
 .ttitinfo .txt_dec{
	font-size:130%; 
	letter-spacing:-1px;
	display:block;
	max-width:800px;
 	text-align:center;
	margin:0 auto;
 }

 .ttitinfo .txt_dec strong{
	font-size:170%;
}
  .ttitinfo .txt_dec span{
	display:inline-block;
}

@media(max-width:1000px){
 .ttitinfo .txt_dec{
	font-size:110%;
  } 

   .ttitinfo .txt_dec strong{
		font-size:100%;
	}
}

.more_linke{
	display:block;
 	position:relative;
 	text-align:left;
	width:150px; 
	padding-top:20px;
	line-height:1.5;
	 
 	 

}
.more_linke span.arrow{
	position:absolute;
  top:25px;
  display: block;
   width: 15px;
	right:15px;
   height: 13px;
   border-left: 1px solid #fff;
  z-index:2;
  
  transform: rotate(135deg);
}

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


.more_linke span.rectbox{
	position:absolute;
	width:40px;
	height:40px;
	 background:red;
	right:0px;
	top:10px;
	text-align:center;
	font-size:200%;
	line-height:1.2;

}
 


@media(max-width:640px){
	.more_linke{
	 
		padding-top:15px;
		width:140px; 

	}
	.more_linke span.rectbox{
			width:30px;
		height:30px;
		line-height:1.1;
	}
	.more_linke span.arrow{
		 top:20px;
	}

}


.businessarea{
	background:#fff;
	margin:0 auto;
	max-width:1600px;
	padding-bottom:80px;
}
.businessarea .ttitinfo{
		padding:50px 0;
		 
}

.businessarea .ttitinfo b{
	display:block;
	color:#41b4b2;

}
.businessarea .ttitinfo h2{
	color:#000;
	display:block;
	letter-spacing:-3px;
	
}

.businessarea h4{
	margin:80px auto 30px auto;
	position:relative;
	text-align:center;
	border-radius:20px;
	background:#41b4b2;
	padding:5px 10px;
	color:#fff;
	max-width:350px;


}
 

.accordion{ 
  max-width: 100%;
  height: 470px;
  display: flex;
  overflow: hidden;
  margin: 0px auto;
}

.tab{
 display:inline-block;
  position: relative;
  width: 23%;
  margin:1%;
  height: inherit;
  padding: 0px;
  color: #FFF;
  cursor: pointer;
  transition: width .8s ease;
    z-index:1;
}


.infobox{
 position: absolute;
  z-index: 2;
  top: 0;
  left:0%;
  width:100%;
  height:100%;  
  
  
}

.businessA.tab .infobox{
		background-image: url(../image/business01.png);
		background-repeat:no-repeat;
		background-position: 80% bottom;
		background-size:120%;
		background-color: rgba(0,0,0,.1);
}
.businessB.tab .infobox{
		background: url(../image/business02.png) ;
		background-repeat:no-repeat;
		background-position: 80% bottom;
		background-size:120%;
		background-color: rgba(0,0,0,.1);
}
.businessC.tab .infobox{
		background: url(../image/business03.png) ;
		background-repeat:no-repeat;
		background-position: 120% bottom;
		background-size:120%;
		background-color: rgba(0,0,0,.1);
}
.businessD.tab .infobox{
		background: url(../image/business04.png);
		background-repeat:no-repeat;
		background-position: 80% bottom;
		background-size:120%;
		background-color: rgba(0,0,0,.1);
}

.businessE.tab .infobox{
		background: url(../image/business05.png);
		background-repeat:no-repeat;
		background-position: 80% bottom;
		background-size:120%;
		background-color: rgba(0,0,0,.1);
}

.infobox span{
	position:absolute;
	display:block;
	top:30px;
	left:30px; 
	color:#bfbebe;
	font-size:120%;
	font-weight:600;
}
.tab:hover .infobox span{
	color:#fff;
}

.infobox h4{
	
	width:90%;
	

}

.infobox .busstxt{
  display:none;
  transition: all .8s ease;
  margin: 20px auto; 
  position:relative;
  opacity: 0;
   
}

.infobox .btn_link{
	display:none;
}

/* --- Hover Effects --- */


.tab:hover{
  width: 50%;
  background: #41b4b2;


}

.tab:hover .infobox{
  transition: all .8s ease;
   padding-top:15%;
    
    
}

.businessA.tab:hover .infobox{
		background-image: url(../image/business01_on.png);
		background-repeat:no-repeat;
		background-position: 150% bottom;
		background-size:80%;
		background-color: rgba(0,0,0,.0);
}
.businessB.tab:hover .infobox{
		background: url(../image/business02_on.png);
		background-repeat:no-repeat;
		background-position: 150% bottom;
		background-size:80%;
		background-color: rgba(0,0,0,.0);
}
.businessC.tab:hover .infobox{
		background: url(../image/business03_on.png);
		background-repeat:no-repeat;
		background-position: 150% bottom;
		background-size:80%;
		background-color: rgba(0,0,0,.0);
}
.businessD.tab:hover .infobox{
		background: url(../image/business04_on.png);
		background-repeat:no-repeat;
		background-position: 150% bottom;
		background-size:80%;
		background-color: rgba(0,0,0,.0);
}

.businessE.tab:hover .infobox{
		background: url(../image/business05_on.png);
		background-repeat:no-repeat;
		background-position: 150% bottom;
		background-size:80%;
		background-color: rgba(0,0,0,.0);
}
 
.tab:hover .infobox h4{
	background:#000;
	margin-top:0;
	
}


.tab:hover .infobox .busstxt{
	display:block;
	opacity: 1;
	 transition: all .8s ease;
	 max-width:350px;
	 font-size:130%;
	 letter-spacing:-2px;
	 text-align:center;
	
	  
}

.tab:hover .infobox .btn_link{
	display:block;
	margin:50px auto 0 auto ;
	position:relative;
	width:150px;
	text-align:center;
	border: 1px solid #ccc;
	padding:10px;
	color:#fff;
}
.tab:hover .infobox .btn_link i:after{
	content: "\f105";
	display:block;
	position:absolute;
	top:9px;
	right:0;
	width:30px;
	height:50px;
	font-family: FontAwesome;
	font-style:normal;
	font-size:25px;
	line-height:1.1;

}
.tab:hover .infobox .btn_link i:before{
	content: "";
	display:block;
	position:absolute;
	top:22px;
	right:13px;
	width:15px;
	height:2px;
	background:#fff;
	

}


.tab:hover .infobox .btn_link:hover{
	background:#000;
	border: 1px solid #41b4b2;
}

@media(max-width:1200px){
.accordion{ 
	height: 430px;
}

}
 

 @media(max-width:1000px){
	.infobox,
	.tab:hover .infobox{

		padding-top:10%;
	}
	.tab .infobox h4,
	.tab:hover .infobox h4{
		margin-top:40px;
	}
	.accordion{ 
 	   position: relative;
	  width:100%;
	  height: 100%;
	  display: block;
	   
	}
	.accordion:after{
		clear:both;
		content:'';
		display:block;
	}

	.tab{
 	  width: 48%;
	  height:350px;
	  position: relative;
	  display:block;
	  float:left;
	  overflow:hidden;
 	}
	.tab:hover{
	  width: 48%;
	}
	.tab:hover .infobox{
		padding-top:5%;
	}
 

 
	.tab:hover .infobox .busstxt{
	   display:block;
	  width:95%;	
	  margin: 10px auto;
	   opacity: 1;
	   max-width:350px;
	 font-size:100%;
	 letter-spacing:-1px;
	 text-align:center;
	
	  
	}
	.infobox .busstxt ul{
		 position: relative;
		 width:100%;
		  
	}
	.infobox .busstxt ul li {
		display:block;
		float:left;
		width:48%;
		margin:1%;
		letter-spacing:-1px;
		
	}

	
.tab:hover .infobox .btn_link{
		padding:5px;
		width:130px;
		text-align:left;
		padding-left:15px;
}
.tab:hover .infobox .btn_link i:after{
	top:2px;
	text-align:right;
	right:13px;
}
.tab:hover .infobox .btn_link i:before{
	top:15px;
	text-align:right;
}


}

 

 @media(max-width:420px){

 .tab{
 	  width: 100%;
	  height:300px;
	 
 	}
	.tab:hover{
	  width: 100%;
	}

	.infobox .busstxt ul li.l_txt{
				letter-spacing:-2px;
 
	}


}


/*바로가기*/
.quickarea{
 		position:relative;
		overflow: hidden;
		background: url(../image/back_quick.jpg) no-repeat center 0;
		background-size:cover;
		min-height:800px;
}

.quickarea .ttitinfo{
	margin:50px auto;
	color:#fff;
	position:relative;
	width:100%;
	text-align:center;
}
 
.quickbox{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}
.quickbox:after{
	content:'';
	display:block;
	position:relative;

}

.quickbox .quickbox_in{
	float:left;
	width:33.333%;
	height:100%;
	position:relative;
	padding-top:50px;
}
.quickbox .quickbox_in:after{
content:'';
	display:block;
	position:absolute;

	width:0px;
	height:100%;
	left:0;
	top:0;
	background: rgba(255,255,255,.15);
}
.quickbox .quickbox_in:first-child:after{background: rgba(255,255,255,.0);}

.quickbox .quickbox_in a{
	position:relative;
	display:block;
	margin:20px auto;
	width:100%;
	
	overflow:hidden;
}

.quickbox .quickbox_in .imgarea{
	display:block;
	position:relative;
	margin:20px auto;
	width:350px;
	height:350px;
	 
	border-radius: 10px;
	overflow:hidden;
	text-align:center;
	-webkit-transition: .3s; 
	transition:.3s;
	
}
.quickbox .quickbox_in a .imgarea img{
 -webkit-transition: .3s; 
	transition:.3s;
}
.quickbox .quickbox_in a:hover .imgarea{
	border:3px solid #1755e6;
}
.quickbox .quickbox_in a:hover .imgarea img{

webkit-transform: scale(1.2);
  -ms-transform: scale(1.2);
  -o-transform: scale(1.2);
  transform: scale(1.2);
  -webkit-transition: .3s; 
	transition:.3s;
}
.quickbox .quickbox_in strong{
	display:block;
	position:relative;
	margin:20px auto;
	text-align:center;
	color:#fff;
	font-size:140%;
}


@media(max-width:1180px){
		
		.quickarea{
			min-height:400px;
		}
		.quickbox{position:relative;}
		.quickbox .quickbox_in{
			 
			padding-top:0px;
		}

		.quickbox .quickbox_in a{
			margin:0px auto;
		 }
		.quickbox .quickbox_in:after{
			background:none;
		}
		.quickbox .quickbox_in strong{
			font-size:120%;
		}

		.quickbox .quickbox_in .imgarea{
			width:250px;
			height:250px;
		 }

}

@media(max-width:800px){
		 
		 .quickbox .quickbox_in .imgarea{
			width:180px;
			height:180px;
		 }
		 .quickbox .quickbox_in strong{
			font-size:110%;
		}

}

@media(max-width:600px){
		 
		 .quickbox .quickbox_in .imgarea{
			width:150px;
			height:150px;
		 }
		
}


@media(max-width:480px){

	.quickbox .quickbox_in{
		float:none;
		width:100%;
	}

	 .quickbox .quickbox_in .imgarea{
			width:100%;
			max-width:300px;
			height:auto;
		 }
}