@charset "utf-8";

/******************************* 메인 비쥬얼 ******************************* /

/* 메인 :: 비주얼 */
#mainVisual {position:relative; width:100%; overflow:hidden;}
#mainVisual .visual-item{position:relative; width:100%; overflow:hidden;}
#mainVisual .visual-item > img{	width:100%;	-ms-transform: scale(1.2,1.2); /* IE 9 */    -o-transform: scale(1.2,1.2); /* IE 9 */    -moz-transform: scale(1.2,1.2); /* IE 9 */    -webkit-transform: scale(1.2,1.2); /* Chrome, Safari, Opera */     transform: scale(1.2,1.2);	-webkit-transition:transform 5000ms  ease-in-out ; /* Safari */	-moz-transition:transform 5000ms ease-in-out ; /* Safari */	-o-transition:transform 5000ms ease-in-out ; /* Safari */	-ms-transition:transform 5000ms ease-in-out ; /* Safari */    transition:transform 5000ms ease-in-out ;}
#mainVisual .visual-item:focus{outline:none;}

#mainVisual .visual-txt {position:absolute; top:0px; left:0px; display:block; width:100%; height:100%; }


/******************************* 메인 이슈 배너 섹션 ******************************* /
/* 메인 :: 사업 종류 */

.m_area{ width:96%; max-width:1720px; margin:0px auto;  padding:0 2%; } /* width 홈페이지 컨텐츠 가로값에 맞게 변경 */

#ProductList {position:Relative; width:100%; height:100%; min-height:100vh; display:Table;}
#ProductList ul {display:table-cell; vertical-align:middle;}
#ProductList ul li { float:left; position:relative; width:calc(33.3% - 120px); margin-left:120px;}
#ProductList ul li.active{	opacity:1.0;filter:Alpha(opacity=100);	top:0%;}
#ProductList ul li a {display:block; position:relative; padding-top:180%;   }
#ProductList ul li .bg-thum{position: absolute; top: 0; left: 0; right: 0; bottom: 0; overflow:hidden;}
#ProductList ul li .bg-thum img{position: absolute; top: 0; left: 0; max-width: 100%; height: 100%; -webkit-transition:all 0.4s; -moz-transition:all 0.4s; -o-transition:all 0.4s; -ms-transition:all 0.4s;transition:all 0.4s}
#ProductList ul li .btn_more {position:absolute; top:260px; left:0px; background-color:#1e1e1e;  z-index:10; padding:13px 25px 15px 20px;  color:#adadad; font-size:13px; line-height:1.3em;}
#ProductList ul li a:hover .btn_more {background-color:#000; color:#eee;  -webkit-transition:all 0.4s; -moz-transition:all 0.4s; -o-transition:all 0.4s; -ms-transition:all 0.4s;transition:all 0.4s}
#ProductList ul li a .btn_more img {margin-left:0px;  -webkit-transition:all 0.4s; -moz-transition:all 0.4s; -o-transition:all 0.4s; -ms-transition:all 0.4s;transition:all 0.4s}
#ProductList ul li a:hover .btn_more img {margin-left:10px;  -webkit-transition:all 0.4s; -moz-transition:all 0.4s; -o-transition:all 0.4s; -ms-transition:all 0.4s;transition:all 0.4s}

#ProductList ul li .business-tit {position:absolute; top:50px; left:-80px; z-index:10; color:#fff;}
#ProductList ul li .business-tit span.num {display:block; font-family: 'NotoKrB'; height:40px; opacity:0.8;filter:Alpha(opacity=80); font-size:20px; line-height:1.4em; margin-bottom:10px;}
#ProductList ul li .business-tit span.num:after {position:absolute; left:30px; top:15px; content:""; display:block; width:100px; height:1px; background-color:#fff; }
#ProductList ul li .business-tit span{display:block; height:40px; opacity:0.8;filter:Alpha(opacity=80); font-size:25px; line-height:1.4em;}
#ProductList ul li .business-tit strong{display:block; font-family: 'NotoKrB'; font-size:58px; line-height:1em; }
#ProductList ul li .over-cover{ position:absolute; top:0px; left:0px; width:100%; height:100%; visibility:hidden; opacity:0;filter:Alpha(opacity=0);	background-color:rgba(124, 10, 10,0.7); z-index:1;  box-sizing:border-box;  	-webkit-transition:all 0.4s; -moz-transition:all 0.4s; -o-transition:all 0.4s; -ms-transition:all 0.4s;transition:all 0.4s}
#ProductList ul li .over-cover img{position:absolute; top:50%; left:50%; margin:-18px 0 0 -18px; transform:rotate(-45deg) scale(0.7);  -moz-transform:rotate(-45deg) scale(0.7); opacity:0;filter:Alpha(opacity=0);	-webkit-transition:all 0.4s 0.1s; -moz-transition:all 0.4s 0.1s; -o-transition:all 0.4s 0.1s; -ms-transition:all 0.4s 0.1s;transition:all 0.4s 0.1s;}
#ProductList ul li a:hover .bg-thum img{ -webkit-transform:scale(1.2); -moz-transform:scale(1.2); transform:scale(1.2);}
#ProductList ul li a:hover .over-cover{visibility:visible; opacity:1.0;filter:Alpha(opacity=100);}s
#ProductList ul li a:hover .over-cover img{transform:rotate(0deg) scale(1.0);  -moz-transform:rotate(0deg) scale(1.0); opacity:1.0;filter:Alpha(opacity=100);}



@media all and (max-height:860px){
	/******************************* 메인 이슈 배너 섹션 ******************************* /
	/* 메인 :: 사업 종류 */

	#ProductList ul li a {display:block; position:relative; padding-top:140%;   }
	#ProductList ul li .bg-thum img{position: absolute; top: 0; left: 0; width: 100%; height: 100%; -webkit-transition:all 0.4s; -moz-transition:all 0.4s; -o-transition:all 0.4s; -ms-transition:all 0.4s;transition:all 0.4s}
}


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

	/******************************* 메인 이슈 배너 섹션 ******************************* /
	/* 메인 :: 사업 종류 */
	#ProductList {position:Relative; width:100%; height:100%; min-height:100vh; display:Table;}
	#ProductList ul {display:table-cell; vertical-align:middle;}
	#ProductList ul li { float:left; position:relative; width:calc(33.3% - 100px); margin-left:100px;}
	#ProductList ul li.active{	opacity:1.0;filter:Alpha(opacity=100);	top:0%;}
	#ProductList ul li a {display:block; position:relative; padding-top:180%;   }
	#ProductList ul li .bg-thum{position: absolute; top: 0; left: 0; right: 0; bottom: 0; overflow:hidden;}
	#ProductList ul li .bg-thum img{position: absolute; top: 0; left: 0; max-width: 100%; height: 100%; -webkit-transition:all 0.4s; -moz-transition:all 0.4s; -o-transition:all 0.4s; -ms-transition:all 0.4s;transition:all 0.4s}
	#ProductList ul li .btn_more {position:absolute; top:215px; left:0px; background-color:#1e1e1e;  z-index:10; padding:13px 25px 15px 20px;  color:#888888; font-size:13px; line-height:1.3em;}
	#ProductList ul li .business-tit {position:absolute; top:50px; left:-50px; z-index:10; color:#fff;}
	#ProductList ul li .business-tit span.num {display:block; font-family: 'NotoKrB'; height:40px; opacity:0.8;filter:Alpha(opacity=80); font-size:15px; line-height:1.4em; margin-bottom:10px;}
	#ProductList ul li .business-tit span.num:after {position:absolute; left:30px; top:15px; content:""; display:block; width:100px; height:1px; background-color:#fff; }
	#ProductList ul li .business-tit span{display:block; height:40px; opacity:0.8;filter:Alpha(opacity=80); font-size:18px; line-height:1.4em;}
	#ProductList ul li .business-tit strong{display:block; font-family: 'NotoKrB'; font-size:45px; line-height:1.1em; }
	#ProductList ul li .over-cover{ position:absolute; top:0px; left:0px; width:100%; height:100%; visibility:hidden; opacity:0;filter:Alpha(opacity=0);	background-color:rgba(124, 10, 10,0.7); z-index:1;  box-sizing:border-box;  	-webkit-transition:all 0.4s; -moz-transition:all 0.4s; -o-transition:all 0.4s; -ms-transition:all 0.4s;transition:all 0.4s}
	#ProductList ul li .over-cover img{position:absolute; top:50%; left:50%; margin:-18px 0 0 -18px; transform:rotate(-45deg) scale(0.7);  -moz-transform:rotate(-45deg) scale(0.7); opacity:0;filter:Alpha(opacity=0);	-webkit-transition:all 0.4s 0.1s; -moz-transition:all 0.4s 0.1s; -o-transition:all 0.4s 0.1s; -ms-transition:all 0.4s 0.1s;transition:all 0.4s 0.1s;}
	#ProductList ul li a:hover .bg-thum img{ -webkit-transform:scale(1.2); -moz-transform:scale(1.2); transform:scale(1.2);}
	#ProductList ul li a:hover .over-cover{visibility:visible; opacity:1.0;filter:Alpha(opacity=100);}s
	#ProductList ul li a:hover .over-cover img{transform:rotate(0deg) scale(1.0);  -moz-transform:rotate(0deg) scale(1.0); opacity:1.0;filter:Alpha(opacity=100);}

}


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

	/******************************* 메인 이슈 배너 섹션 ******************************* /
	/* 메인 :: 사업 종류 */
	#ProductList {position:Relative; width:100%; height:100%; min-height:100vh; display:Table;}
	#ProductList ul {display:table-cell; vertical-align:middle;}
	#ProductList ul li { float:left; position:relative; width:calc(33.3% - 70px); margin-left:70px;}
	#ProductList ul li.active{	opacity:1.0;filter:Alpha(opacity=100);	top:0%;}
	#ProductList ul li a {display:block; position:relative; padding-top:180%;   }
	#ProductList ul li .bg-thum{position: absolute; top: 0; left: 0; right: 0; bottom: 0; overflow:hidden;}
	#ProductList ul li .bg-thum img{position: absolute; top: 0; left: 0; max-width: 100%; height: 100%; -webkit-transition:all 0.4s; -moz-transition:all 0.4s; -o-transition:all 0.4s; -ms-transition:all 0.4s;transition:all 0.4s}
	#ProductList ul li .btn_more {position:absolute; top:175px; left:0px; background-color:#1e1e1e;  z-index:10; padding:13px 25px 15px 20px;  color:#888888; font-size:13px; line-height:1.3em;}
	#ProductList ul li .business-tit {position:absolute; top:30px; left:-40px; z-index:10; color:#fff;}
	#ProductList ul li .business-tit span.num {display:block; font-family: 'NotoKrB'; height:40px; opacity:0.8;filter:Alpha(opacity=80); font-size:15px; line-height:1.4em; margin-bottom:0px;}
	#ProductList ul li .business-tit span.num:after {position:absolute; left:30px; top:15px; content:""; display:block; width:100px; height:1px; background-color:#fff; }
	#ProductList ul li .business-tit span{display:block; height:40px; opacity:0.8;filter:Alpha(opacity=80); font-size:18px; line-height:1.4em;}
	#ProductList ul li .business-tit strong{display:block; font-family: 'NotoKrB'; font-size:40px; line-height:1.1em; }
	#ProductList ul li .over-cover{ position:absolute; top:0px; left:0px; width:100%; height:100%; visibility:hidden; opacity:0;filter:Alpha(opacity=0);	background-color:rgba(124, 10, 10,0.7); z-index:1;  box-sizing:border-box;  	-webkit-transition:all 0.4s; -moz-transition:all 0.4s; -o-transition:all 0.4s; -ms-transition:all 0.4s;transition:all 0.4s}
	#ProductList ul li .over-cover img{position:absolute; top:50%; left:50%; margin:-18px 0 0 -18px; transform:rotate(-45deg) scale(0.7);  -moz-transform:rotate(-45deg) scale(0.7); opacity:0;filter:Alpha(opacity=0);	-webkit-transition:all 0.4s 0.1s; -moz-transition:all 0.4s 0.1s; -o-transition:all 0.4s 0.1s; -ms-transition:all 0.4s 0.1s;transition:all 0.4s 0.1s;}
	#ProductList ul li a:hover .bg-thum img{ -webkit-transform:scale(1.2); -moz-transform:scale(1.2); transform:scale(1.2);}
	#ProductList ul li a:hover .over-cover{visibility:visible; opacity:1.0;filter:Alpha(opacity=100);}s
	#ProductList ul li a:hover .over-cover img{transform:rotate(0deg) scale(1.0);  -moz-transform:rotate(0deg) scale(1.0); opacity:1.0;filter:Alpha(opacity=100);}

}



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


	/******************************* 메인 이슈 배너 섹션 ******************************* /
	/* 메인 :: 사업 종류 */

	.m_area{ width:100%; max-width:1720px; margin:0px auto;  padding:0; } /* width 홈페이지 컨텐츠 가로값에 맞게 변경 */

	#ProductList {position:Relative; width:100%; height:100%; display:block; margin-top:67px;}
	#ProductList ul {position:Relative; display:block; vertical-align:middle; }
	#ProductList ul li { float:none; position:relative; width:100%; margin-left:0px; height:calc(33.33vh - 22px); overflow:hidden; }
	#ProductList ul li.active{	opacity:1.0;filter:Alpha(opacity=100);	top:0%;}
	#ProductList ul li a {display:block; position:relative;  padding-top:0px; height:calc(33.33vh - 22px);  overflow:hidden;}
	#ProductList ul li .bg-thum{position: absolute; top: 0; left: 0; right: 0; bottom: 0; overflow:hidden;}	
	#ProductList ul li .bg-thum img{top:-100%; width:100%; height:auto; display:none;}

	#ProductList ul li .btn_more {position:absolute; top:auto; bottom:30px; left:40px; background-color:#1e1e1e;  z-index:10; padding:13px 25px 15px 20px;  color:#888888; font-size:13px; line-height:1.3em;}

	#ProductList ul li .business-tit {position:absolute; top:30px; left:40px; z-index:10; color:#fff;}
	#ProductList ul li .business-tit span.num {display:block; font-family: 'NotoKrB'; height:40px; opacity:0.8;filter:Alpha(opacity=80); font-size:15px; line-height:1.4em; margin-bottom:0px;}
	#ProductList ul li .business-tit span.num:after {position:absolute; left:30px; top:15px; content:""; display:block; width:100px; height:1px; background-color:#fff; }
	#ProductList ul li .business-tit span{display:block; height:40px; opacity:0.8;filter:Alpha(opacity=80); font-size:18px; line-height:1.4em;}
	#ProductList ul li .business-tit strong{display:block; font-family: 'NotoKrB'; font-size:40px; line-height:1.1em; }
	#ProductList ul li .over-cover{ position:absolute; top:0px; left:0px; width:100%; height:100%; visibility:hidden; opacity:0;filter:Alpha(opacity=0);	background-color:rgba(124, 10, 10,0.7); z-index:1;  box-sizing:border-box;  	-webkit-transition:all 0.4s; -moz-transition:all 0.4s; -o-transition:all 0.4s; -ms-transition:all 0.4s;transition:all 0.4s}
	#ProductList ul li .over-cover img{position:absolute; top:50%; left:50%; margin:-18px 0 0 -18px; transform:rotate(-45deg) scale(0.7);  -moz-transform:rotate(-45deg) scale(0.7); opacity:0;filter:Alpha(opacity=0);	-webkit-transition:all 0.4s 0.1s; -moz-transition:all 0.4s 0.1s; -o-transition:all 0.4s 0.1s; -ms-transition:all 0.4s 0.1s;transition:all 0.4s 0.1s;}
	#ProductList ul li a:hover .bg-thum img{ -webkit-transform:scale(1.2); -moz-transform:scale(1.2); transform:scale(1.2);}
	#ProductList ul li a:hover .over-cover{visibility:visible; opacity:1.0;filter:Alpha(opacity=100);}s
	#ProductList ul li a:hover .over-cover img{transform:rotate(0deg) scale(1.0);  -moz-transform:rotate(0deg) scale(1.0); opacity:1.0;filter:Alpha(opacity=100);}
		

}



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


	/******************************* 메인 이슈 배너 섹션 ******************************* /
	/* 메인 :: 사업 종류 */

	#ProductList {position:Relative; width:100%; height:100%; display:block; margin-top:46px;}
	#ProductList ul {position:Relative; display:block; vertical-align:middle; }
	#ProductList ul li { float:none; position:relative; width:100%; margin-left:0px; height:220px; overflow:hidden; }
	#ProductList ul li.active{	opacity:1.0;filter:Alpha(opacity=100);	top:0%;}
	#ProductList ul li a {display:block; position:relative; padding-top:0%; height:220px; border:0px solid rgba(255, 255, 255, .3); overflow:hidden;}
	#ProductList ul li .bg-thum{position: absolute; top: 0; left: 0; right: 0; bottom: 0; overflow:hidden;}	
	#ProductList ul li .bg-thum img{top:-100%; width:100%; height:auto; display:none;}

	#ProductList ul li .btn_more {position:absolute; top:auto; bottom:30px; left:30px; background-color:#1e1e1e;  z-index:10; padding:8px 15px;  color:#888888; font-size:12px; line-height:1.3em;}
	#ProductList ul li .btn_more  br {display:none;}

	#ProductList ul li a img {display:inline-block; margin-left:5px;  -webkit-transition:all 0.4s; -moz-transition:all 0.4s; -o-transition:all 0.4s; -ms-transition:all 0.4s;transition:all 0.4s}
	#ProductList ul li a:hover img {margin-left:15px;  -webkit-transition:all 0.4s; -moz-transition:all 0.4s; -o-transition:all 0.4s; -ms-transition:all 0.4s;transition:all 0.4s}

	#ProductList ul li .business-tit {position:absolute; top:20px; left:30px; z-index:10; color:#fff;}
	#ProductList ul li .business-tit span.num {display:block; font-family: 'NotoKrB'; height:40px; opacity:0.8;filter:Alpha(opacity=80); font-size:15px; line-height:1.4em; margin-bottom:0px;}
	#ProductList ul li .business-tit span.num:after {position:absolute; left:30px; top:15px; content:""; display:block; width:100px; height:1px; background-color:#fff; }
	#ProductList ul li .business-tit span{display:block; height:40px; opacity:0.8;filter:Alpha(opacity=80); font-size:15px; line-height:1.4em;}
	#ProductList ul li .business-tit strong{display:block; font-family: 'NotoKrB'; font-size:28px; line-height:1.1em; }
	#ProductList ul li .over-cover{ position:absolute; top:0px; left:0px; width:100%; height:100%; visibility:hidden; opacity:0;filter:Alpha(opacity=0);	background-color:rgba(124, 10, 10,0.7); z-index:1;  box-sizing:border-box;  	-webkit-transition:all 0.4s; -moz-transition:all 0.4s; -o-transition:all 0.4s; -ms-transition:all 0.4s;transition:all 0.4s}
	#ProductList ul li .over-cover img{position:absolute; top:50%; left:50%; margin:-18px 0 0 -18px; transform:rotate(-45deg) scale(0.7);  -moz-transform:rotate(-45deg) scale(0.7); opacity:0;filter:Alpha(opacity=0);	-webkit-transition:all 0.4s 0.1s; -moz-transition:all 0.4s 0.1s; -o-transition:all 0.4s 0.1s; -ms-transition:all 0.4s 0.1s;transition:all 0.4s 0.1s;}
	#ProductList ul li a:hover .bg-thum img{ -webkit-transform:scale(1.2); -moz-transform:scale(1.2); transform:scale(1.2);}
	#ProductList ul li a:hover .over-cover{visibility:visible; opacity:1.0;filter:Alpha(opacity=100);}s
	#ProductList ul li a:hover .over-cover img{transform:rotate(0deg) scale(1.0);  -moz-transform:rotate(0deg) scale(1.0); opacity:1.0;filter:Alpha(opacity=100);}


}


@media all and (max-width:640px){
	/******************************* 메인 이슈 배너 섹션 ******************************* /
	/* 메인 :: 사업 종류 */

	#ProductList {position:Relative; width:100%; height:100%; display:block; margin-top:40px;}

}


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