@charset "utf-8";

/*======================== 메인 비주얼 ======================== */
.mc_visual {height:800px;}

.visual-txt-inner h2 {font-size:80px;font-weight: 900;letter-spacing: 4px;}
.visual-txt-inner h1 {font-size:23px;font-weight: 400;letter-spacing: 1px;line-height:1.5}
#landingArea .visual.mbg01 { background-image: url(../images/main_visual_1.jpg); background-size:cover; background-position:center center;}
#landingArea .visual.mbg02 { background-image: url(../images/main_visual_2.jpg); background-size:cover; background-position:center center;}

#landingArea {overflow:hidden;height:100% !important;}
#landingArea .navigation{ position: absolute; display: block; z-index:4; list-style: none; line-height: 1; bottom:115px; width:100%; text-align:center;}
#landingArea .navigation li {display:inline-block;  width: 10px;  height: 10px;  margin: 0 5px; border:1px solid #fff;   border-radius:100%;  cursor: pointer;  text-indent:-99999px; overflow:hidden;}
#landingArea .navigation li.current { background:#fff; }

#landingArea, #landingArea .contents {display:block;position:relative}
#landingArea .contents {display:none;}
#landing, #landingArea, #landingArea .contents, #landingArea .slide, #landingArea .wrap  {height:100%;}
#landingArea .slide {background-color:#000;position:relative;overflow:hidden; }
#landingArea .slide.current a, #landingArea .slide.current h2, #landingArea .slide.current p, #landingArea .slide.current span {opacity:1;}
.main_visual {height:100%;background-attachment:fixed !important;}

#landingArea.sliding.transition .contents {-webkit-transition:left 1s ease;-moz-transition:left 1s ease;-ms-transition:left 1s ease;-o-transition:left 1s ease;transition:left 1s ease}

.slideshow.notransition * {
-webkit-transition:all 0s linear!important;
-moz-transition:all 0s linear!important;
-ms-transition:all 0s linear!important;
-o-transition:all 0s linear!important;
transition:all 0s linear!important
}
#landingArea .slide grid-container {top:50%; margin-top:-155px; opacity:1!important;position:absolute;z-index:10; width:100%;}
#landingArea .slide h2 {color:#FFF;font-weight:600; padding-top:10px;font-size:24px; line-height:24px; transition:opacity 0.5s ease 0.8s; padding-bottom:40px;}
#landingArea .slide p {color:#FFF;-webkit-transition:opacity 0.5s ease 0.5s;-moz-transition:opacity 0.5s ease 0.5s;-ms-transition:opacity 0.5s ease 0.5s;-o-transition:opacity 0.5s ease 0.5s;transition:opacity 0.5s ease 0.5s;}
#landingArea .slide .s_text {margin:30px 0 0; font-size:25px; text-decoration:none;color:#fff; line-height:32px; font-weight:300;
-webkit-transition:opacity 0.5s ease 1s;
-moz-transition:opacity 0.5s ease 1s;
-ms-transition:opacity 0.5s ease 1s;
-o-transition:opacity 0.5s ease 1s;
transition:opacity 0.5s ease 1s
}
#landingArea .slide.current .s_text {opacity: 0.8;}
#landingArea .slide a, #landingArea .slide h2, #landingArea .slide p, #landingArea .slide span {opacity:0}
#landingArea .slide.current a, #landingArea .slide.current h2, #landingArea .slide.current p, #landingArea .slide.current span {opacity:1}
#landingArea figure {background-size:cover!important;background-position:right center!important;margin:0;opacity:.7;position:absolute;width:100%;height:100%;top:0;left:0;z-index:1;}
#landingArea .timer {height:10px;position:absolute;bottom:0;width:100%;z-index:90; }
#landingArea .timer div {position:absolute;top:0;left:0;bottom:0;background:#1088d7; opacity:0.9;}

#landingArea .visual {  height: 100%; position: absolute; width: 100%; background-attachment: fixed ;}
#landingArea .visual_area .visual dl { position: relative; top: 50%;  color: #fff; width:1200px; margin:0 auto;  margin-top: -154px; text-align: left;}
#landingArea .visual_area .visual dl dt { font-size: 99px; font-weight: 700;  line-height: 99px;}
#landingArea .visual_area .visual dl dd { font-size: 34px; line-height: 48px; font-weight: 400; }

span.diag { transform: rotate(-60deg); margin: 5px 0px -10px 27px; }

#landingArea .controls {position: absolute; color: #fff; width: 100%; top: 50%; }

#landingArea .controls li {background:url(../images/contents/btn_viual_prev.png) no-repeat; position: absolute; cursor: pointer;}
#landingArea .controls #prev { width:54px; height: 54px; }
#landingArea .controls #next { width:54px; height: 54px;}
#landingArea .controls #progress { display: none;}

#landingArea .slide .star {color:#FFF;display:block;font-weight:400;
-webkit-transition:all 1s ease 1s;
-moz-transition:all 1s ease 1s;
-ms-transition:all 1s ease 1s;
-o-transition:all 1s ease 1s;
transition:all 1s ease 1s
}

#landingArea .navigation { bottom: 170px; }
#landingArea .controls li#prev { left: 50px; }
#landingArea .controls li#next { right: 50px; background: url(../images/contents/btn_viual_next.png) no-repeat}
#landingArea .navigation li {display:inline-block;  width: 32px;  height: 1px;  margin: 0 5px; border-radius: 0;  cursor: pointer;  text-indent:-99999px; overflow:hidden; transform: rotate(-45deg); background: #fff; opacity: 0.7; border: 0; transition: all 0.5s ease; }
#landingArea .navigation li.current { height: 2px; background:#ff0000; transform: rotate(0deg);   opacity: 1; margin: 0 25px 0 25px;  }


div.icon_scroll { position: relative; bottom: 110px; margin-left: -15px; width: 70px; height: 80px; margin: 0 auto; z-index: 998; text-align: center; }
div.icon_scroll a { display: block; height: 100%; }
div.icon_scroll a img { width: 28px; height: 57px; }
div.icon_scroll a span { display: block; font-size: 13px; color: #fff;margin-top: 5px; }

div.icon_scroll { bottom: 115px;}
div.icon_scroll a span { margin-top: 5px; }
/*main2 =====================================================*/
/*==================== 슬라이더 ====================*/
.zs-enabled{position:relative}
.zs-enabled .zs-slideshow,.zs-enabled .zs-slides,.zs-enabled .zs-slide
{position:absolute;z-index:1;top:0;left:0;width:100%;height:100%;overflow:hidden}
.zs-enabled .zs-slideshow .zs-slides .zs-slide{background:transparent none no-repeat 50% 50%;background-size:cover;position:absolute;visibility:hidden;opacity:0;-webkit-transform:scale(1.2, 1.2);-moz-transform:scale(1.2, 1.2);-ms-transform:scale(1.2, 1.2);-o-transform:scale(1.2, 1.2);transform:scale(1.2, 1.2)}
.zs-enabled .zs-slideshow .zs-slides .zs-slide.active{visibility:visible;opacity:1}
.zs-enabled .zs-slideshow .zs-bullets{position:absolute;z-index:4;bottom:20px;left:0;width:100%;text-align:center}
.zs-enabled .zs-slideshow .zs-bullets .zs-bullet{
  display: inline-block;
  cursor: pointer;
  width: 27px;
  height: 3px;
  margin: 3px;
  background-color: #4a4a4a;
}
.zs-enabled .zs-slideshow .zs-bullets .zs-bullet.active{background-color:#0795f3}
.zs-enabled .zs-slideshow:after{content:" ";position:absolute;top:0;left:0;width:100%;height:100%;z-index:3;background:transparent none repeat 0 0}
.zs-enabled.overlay-plain .zs-slideshow:after{background-image:url(plain.png)}
.zs-enabled.overlay-dots .zs-slideshow:after{background-image:url(../images/dots.png)}

#main-visual-slider {
	position: relative;
	overflow: hidden;
	width: 100%;
	min-height: 600px;
	background-color: #999;
	display:flex;
	align-items: center;
	justify-content: center;
	padding-top:70px;
}
.main-visual-inner-content {
	position: relative;
	z-index: 2;
	color: #fff;
	text-align: center;
	font-size: 16px;
}
.visual-txt {text-align:center;}
#main-visual-slider .visual-txt h1 {text-shadow: 0 0 10px rgba(0,0,0,.5);}
.visual-txt h1 {color:#fff;margin-top:28px;margin-bottom:50px;}
.visual-txt h2 img {width:240px;}


.visual-box-wrap {height:172px;display:flex;width:1200px;margin:0 auto;justify-content:center;}
.visual-box-wrap li {
	height:100%;margin:0 1%;margin:5px;width:154px;padding-top:37px;background:#fff;border-radius:20px;color:#000;
	background:rgba(26,31,42,1);border-radius:20px 0 20px 0;border:2px solid #0795f3;transition:all .2s
}
.visual-box-wrap li img {transition:all .2s;}
.visual-box-wrap li h3 {transition:all .2s;font-size:16px;font-weight:600;margin-top:18px;line-height:1.4;letter-spacing:1px;color:#fff;}
.visual-box-wrap li h4 {transition:all .2s;color:#666;margin-top:22px;margin-top:12px;font-size:15px;line-height:1.4}



/*======================== 사업영역 ======================== */
.main-business {padding:80px 0;position:relative;}
.main-business:before {content:'';position:absolute;display:block;background:url('../images/main-business-deco1.jpg');width:275px;height:499px;top:0;right:0;}
.main-business:after {content:'';position:absolute;display:block;background:url('../images/main-business-deco2.jpg');width:205px;height:214px;bottom:0;left:0;z-index:-1}
.main-business h2 {font-size:40px;font-weight:600;color:#222;text-align:center;}
.main-business h3 {font-size:18px;font-weight:400;color:#666;text-align:center;line-height:1.7;margin-top:20px;}
.main-business-cont {display:flex;margin-top:25px;flex-direction:column;}
.left-wrap, .right-wrap {height:100%;}
.b-box {
  position:relative;background:#ccc;justify-content: flex-end;padding:18px;margin:4px;width:calc(33.3333% - 8px);
  display: flex;flex-direction: column;aspect-ratio: 1 / 0.6;border:1px solid #b9b9b9;
}

.right-bottom {display:flex;}
.right-bottom .b-box {width:calc(50% - 8px);margin-top:0}
.right-top, .right-bottom {height:50%}

.left-wrap {display:flex;flex-wrap:wrap;align-items: flex-start;}
.left-wrap .b-box {background:url('../images/b-box1.jpg');background-size: cover;background-position: center;}
.b-box h4 {font-size:17px;font-weight:600;color:#000;position:relative;} */
/* .b-box1 h4 {color:#fff;margin-bottom:21px;} */
.b-box h5 {font-size:18px;font-weight:400;color:#fff;margin-top:5px;}.main-business-cont
/* .b-box h4:after {position:absolute;bottom:-12px;left:2px;content:'';display:block;width:16px;height:2px;background:#fff;} */
.b-box p {font-size:15px;color:#fff;word-break:keep-all;line-height: 1.4;margin-top: 14px;padding-left:3px;}
.b-box a {
  position:absolute;top:10px;right:10px;border:1px solid rgba(255,255,255,.5);width:55px;height:55px;
  display: flex;align-items: center;justify-content: center;transition:all .4s;background:rgba(255,255,255,0)
}
.b-box a:hover {background:rgba(255,255,255,.3)}
.b-box a img {margin-right: 0;transition:all .3s;}
.b-box a:hover img {margin-right: -13px;}
.left-wrap .b-box1 {background:url('/images/아펙스.jpg');background-size:cover;}
.left-wrap .b-box2 {background:url('/images/미쯔비시.jpg');background-size:cover;}
.left-wrap .b-box3 {background:url('/images/삼원액트.jpg');background-size:cover;}
.left-wrap .b-box4 {background:url('/images/영진웜.jpg');background-size:cover;}
.left-wrap .b-box5 {background:url('/images/한국산쿄.jpg');background-size:cover;}
.left-wrap .b-box6 {background:url('/images/프로페이스.jpg');background-size:cover;}

/*======================== 하단바로가기 ======================== */
.main-bottom {display:flex;}
.bt-box-inner {width:600px;height:250px;padding:30px 50px;}
.bt-box1 .bt-box-inner {padding-left:0;}
.bt-box2 .bt-box-inner {padding-right:0;display: flex;flex-direction: column;justify-content: center;}
.bt-box1 {width:50%;background:#ccc;display:flex;justify-content:flex-end}
.bt-box2 {width:50%;background:#999;display:flex;justify-content:flex-start}
.bt-box-inner h2 {font-size: 26px;color: #fff;line-height: 1.35;font-weight: 600;}
.bt-box-inner a {border: 1px solid #fff;width: 180px;display: block;margin-top:20px;height: 48px;text-align: center;color: #fff;font-size: 16px;padding-top: 15px;}





/*======================== innovation ======================== */
.main-inno .inno-top {
	padding-top:75px;height:420px;text-align:center;
	background: rgb(209,215,218);
	background: -moz-linear-gradient(left,  rgba(209,215,218,1) 0%, rgba(239,241,242,1) 25%, rgba(239,241,242,1) 75%, rgba(209,215,218,1) 100%);
	background: -webkit-linear-gradient(left,  rgba(209,215,218,1) 0%,rgba(239,241,242,1) 25%,rgba(239,241,242,1) 75%,rgba(209,215,218,1) 100%);
	background: linear-gradient(to right,  rgba(209,215,218,1) 0%,rgba(239,241,242,1) 25%,rgba(239,241,242,1) 75%,rgba(209,215,218,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d1d7da', endColorstr='#d1d7da',GradientType=1 );
		
}
.main-inno .inno-top h2 {font-size:40px;letter-spacing:1px;font-weight:600;margin-bottom:20px;text-align:center;}
.main-inno .inno-top p {font-size:18px;color:#555;line-height:1.7;text-align:center;}
.main-inno .inno-top .btn {background:#da0e57;padding:5px 15px;font-size:15px;height:auto;color:#fff;font-weight:600;margin:20px auto;display:inline-block;cursor:pointer}
.main-inno .inno-bottom {
	background:url('../images/main-inno-bg.jpg') no-repeat;background-size:cover;display:flex;justify-content:center;height:250px;
}
.main-inno .inno-bottom ul {display:flex;margin-top: -124px;}
.main-inno .inno-bottom ul li {
	display:flex;flex-direction:column;align-items:center;justify-content:center;
	text-align:center;width:248px;height:248px;border-radius:100%;background:#fff;
	margin: 0 5px;box-shadow: 0 0 43px rgba(0,0,0,0.06);
}
.main-inno .inno-bottom ul li h3 {font-size:17px;color:#242424;font-weight:600;margin:12px 0 8px 0}
.main-inno .inno-bottom ul li span {font-size:15px;color:#808080;line-height:1.35}


/*======================== 미디어쿼리 ======================== */
@media all and (max-width:1240px) {
	.visual-box-wrap {width:100%;padding:0 50px;}
	.visual-box-wrap li {width:20%;}
	.visual-txt-inner h2 {font-size:42px;letter-spacing:2px}
	.visual-txt-inner h1 {font-size:18px;}
}
@media all and (max-width:1120px) {
	.main-business:before,
	.main-business:after {display:none;}

	.main-inno .inno-bottom ul li {width:150px;height:150px;}
	.main-inno .inno-bottom ul li img {width:60px;}
	.main-inno .inno-bottom ul li span {font-size:14px;}
}
@media all and (max-width:768px) {

	.visual-txt h2 img {width:200px;}
	.visual-box-wrap {height:120px;}
	.visual-box-wrap li {padding-top:25px;}
	.visual-box-wrap li img {width:35px;}

	.main-business {padding:50px 0;}
	.b-box {padding:15px;}
	.b-box h4 {font-size:16px;}
	.main-business h2 {font-size:34px;}
	.main-business h3 {font-size:16px;line-height:1.5;margin-top:12px;}
}
@media all and (max-width:700px) {
	.visual-box-wrap {flex-wrap:wrap;height:auto}
	.visual-box-wrap li {width: calc(50% - 10px);padding:20px 0}
	.b-box {width:100%}
	.right-bottom {height:auto;}
	.left-wrap, .right-wrap, .right-bottom .b-box {width:100%;}
	.main-business-cont,
	.right-bottom {flex-direction:column}
	.b-box,.right-top,.right-bottom .b-box {height:180px;}
	.right-bottom .b-box {margin:0;}
	.right-bottom .b-box {margin:4px;}
	.main-business-cont {height:auto;}

	.main-inno .inno-bottom ul {flex-wrap:wrap;justify-content: center;padding: 0 100px;}
	.main-inno .inno-bottom ul li {margin:5px;}
	.main-inno .inno-bottom {height:auto;padding-bottom: 50px;}
	.main-inno .inno-top p {font-size:16px;}
	.main-inno .inno-top h2 {font-size:34px;}

	.left-wrap .b-box2,.left-wrap .b-box3,.left-wrap .b-box4,.left-wrap .b-box5,.left-wrap .b-box6,.left-wrap .b-box7,.left-wrap .b-box8 {
		background-size: contain;
		background-repeat: no-repeat;
		background-position: 50%;
	}
}

@media all and (max-width:650px) {
	.main-inno .inno-bottom ul {padding:0 12px;}
	
}
@media all and (max-width:540px) {
	.visual-txt-inner h2 {font-size:35px;letter-spacing:2px}
	.visual-txt-inner h1 {font-size:16px;padding:0 30px;word-break:keep-all;line-height:1.2}
	.visual-txt h1 {margin-top:10px;}
}
@media all and (max-width:480px) {
	#main-visual-slider {min-height:400px;}
	.main-visual-inner-content {padding-top:70px}
	.visual-txt-inner h2 {font-size:25px}
	.main-business h2 {font-size:24px;}
	.main-business h3 {font-size:14px;}

	.main-inno .inno-bottom ul {margin-top:-160px;}
	.main-inno .inno-top {padding-top:40px;}
	.main-inno .inno-bottom ul li {border-radius:0;}
	.main-inno .inno-top h2 {font-size:24px;}
	.main-inno .inno-top p {font-size:14px;padding:0 20px;word-break:keep-all;}
	.main-inno .inno-top p br {display:none;}
	.main-inno .inno-bottom ul li {width:calc(50% - 10px);word-break:keep-all;padding:5px;}
	.main-inno .inno-bottom ul li br {display:none;}
	
}