@charset "utf-8";
 




#business {overflow:hidden; margin:0 auto;}
/*#business .inwrap {margin:0 -3%;}*/



#business ul {display:table; table-layout:fixed; width:100%;}
#business ul li {overflow:hidden; display:table-cell; position:relative; width:33%; height:500px; -webkit-transition: all 0.4s ease; transition: all 0.4s ease;}
#business ul li {
    transform: skew(-12deg, 0deg);
    -webkit-transform: skew(-12deg, 0deg);
    -moz-transform: skew(-12deg, 0deg);
    -o-transform: skew(-12deg, 0deg);
    -ms-transform: skew(-12deg, 0deg);
}
#business ul li:before, #business ul li:after {overflow:hidden; position:absolute; top:0; width:140%; height:500px; background:no-repeat; content:'';}
#business ul li:before, #business ul li:after {
	transform: skew(12deg, 0deg);
    -webkit-transform: skew(12deg, 0deg);
    -moz-transform: skew(12deg, 0deg);
    -o-transform: skew(12deg, 0deg);
    -ms-transform: skew(12deg, 0deg);
	-webkit-transition: opacity 0.4s ease; transition: opacity 0.4s ease;
}
#business ul li.s01:before {left:-20%; background-image:url('/img/main/v1.jpg'); background-position:right 30% center;}
#business ul li.s02:before {left:-20%; background-image:url('/img/main/v5.jpg'); background-position:right center;}
#business ul li.s03:before {left:-20%; background-image:url('/img/main/v3.jpg'); background-position:right 35% center;}
#business ul li.s04:before {left:-20%; background-image:url('/img/main/v4.jpg'); background-position:left center;}
#business ul li.s01:after {left:-20%; opacity:0; background-image:url('/img/main/v1_on.jpg'); background-position:right 30% center;}
#business ul li.s02:after {left:-20%; opacity:0; background-image:url('/img/main/v5_on.jpg'); background-position:right center;}
#business ul li.s03:after {left:-20%; opacity:0; background-image:url('/img/main/v3_on.jpg'); background-position:right 35% center;}
#business ul li.s04:after {left:-20%; opacity:0; background-image:url('/img/main/v4_on.jpg'); background-position:left center;}
#business ul li div {position:relative; left:0; z-index:100; padding-top:140px; text-align:center; color:#fff; -webkit-transition: left 0.4s ease; transition: left 0.4s ease;}
#business ul li div strong {display:block; font-size:42px; font-weight:500;}
#business ul li div p {max-width:380px; margin:0 auto; padding:12px 0 40px;  font-size:21px; font-weight:400;}


#business ul li div {
	transform: skew(12deg, 0deg);
    -webkit-transform: skew(12deg, 0deg);
    -moz-transform: skew(12deg, 0deg);
    -o-transform: skew(12deg, 0deg);
    -ms-transform: skew(12deg, 0deg);
}
#business ul li.s01 div {left:5%;}
#business ul li.s04 div {left:-10%;}

#business.on ul li {width:30%;}
#business.on ul li.on {width:40%;}
#business.on ul li.on:after {opacity:1;}
#business ul li.on.s01 div {left:12%;}
#business ul li.on.s04 div {left:-17%;}



 
  
/* 바로가기 버튼 */
.mtitle01 {font-size:50px; color:#000000; font-weight:700;}
.mstxt01 {display:block; padding-top:5px; font-size:24px; color:#000000; font-weight:400;}
.btn_more {display:inline-block; position:relative; min-width:120px; border:1px solid #fff; font-size:16px; line-height:38px; color:#fff !important; text-align:center;}
.btn_more * {vertical-align:middle;}
.btn_more:after {position:absolute; top:0; left:0; right:0; bottom:0; background:rgba(255,255,255,0.4); opacity:0; -webkit-transition: opacity 0.4s ease; transition: opacity 0.4s ease; content:'';}
.btn_more:hover:after {opacity:1;}
.btn_more.c_gray {border-color:#222222; color:#222222;}
.btn_more.c_gray:after {background:rgba(34,34,34,0.1);}
.btn_more .arrow {display:inline-block; width:14px; height:12px; margin-left:14px; background:url('../images/main/arrow.png') no-repeat center; background-size:100% auto;}


@media all and (max-width:2000px)
{
	#business .inwrap {margin:0 -7%;height:500px;}
	#business ul li div {max-width:220px; margin:0 auto;}
	#business ul li div strong {font-size:29px;}
	#business ul li div p {padding:8px 0 28px; font-size:15px;}
	#business ul li div p br {display:none;}
	 
}
	
	
@media all and (max-width:1550px)
{
 
	#business .inwrap {margin:0 -7%;}
	#business ul li div {max-width:220px; margin:0 auto;}
	#business ul li div strong {font-size:29px;}
	#business ul li div p {padding:8px 0 28px; font-size:15px;}
	#business ul li div p br {display:none;}
	
	
}



@media all and (max-width:1200px)
{

	#business .inwrap {margin:0 -7%;}
	#business ul li div {max-width:220px; margin:0 auto;}
	#business ul li div strong {font-size:29px;}
	#business ul li div p {padding:8px 0 28px; font-size:15px;}
	#business ul li div p br {display:none;}
	
 
}


@media all and (max-width:767px)
{

	/*#business {width:90%;}*/
	#business {width:100%;}
	#business .inwrap {margin:0 -10%}
	/*#business ul {display:block;}*/
	#business ul {display:block;height:280px;}
	#business ul li {display:block; float:left; width:100%; height:280px;}
	#business ul li.s01 div {left:0%;}
	#business ul li.s04 div {left:0%;}
	#business ul li:before, #business ul li:after {height:280px; background-size:cover;}
	#business ul li div {padding-top:50px;}
	#business ul li div p {padding:5px 0 20px}	
	#business ul li.s01:after, #business ul li.s02:after, #business ul li.s03:after, #business ul li.s04:after {opacity:1;}

	#business ul li, #business ul li:before, #business ul li:after, #business ul li div {
		transform: none;
		-webkit-transform: none;
		-moz-transform: none;
		-o-transform: none;
		-ms-transform: none;
	}



 
}