@charset "utf-8";

/* 공지사항 */
.notice_bg {background:rgba(0,0,0,0.4); padding:15px; position:absolute; top:98px; width:100%; z-index:1;}
.notice_bar {width:100%; max-width:1200px; display:block; margin:0 auto;}
.notice_icon {vertical-align:middle; display:inline-block; margin:0 15px;}
.notice_tit {vertical-align:middle; display:inline-block; font-size:18px; color:#fff; padding-right:40px; background:url('/_img/notice_bar.png') no-repeat right center; margin-right:40px;}
.notice_subject {vertical-align:middle; display:inline-block; font-size:16px; color:#fff; width:calc( 100% - 300px ); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.notice_date {vertical-align:middle; display:inline-block; font-size:16px; color:#fff; float:right;}

@media screen and (max-width:1230px) {
	.notice_bg {top:90px;}
}

/* 메인 비주얼 */
html,body {height:100%;}
.main_vis {position:relative; padding-top:98px; height:100%;}
.main_vis .banner_01{background:url(/_img/main_vis_01.jpg) no-repeat center top; background-color:#fff6e3; height:100%;}
.main_vis .banner_02{background:url(/_img/main_vis_02.jpg) no-repeat center top; background-color:#fff6e3; height:100%;}
.main_vis .banner_03{background:url(/_img/main_vis_03.jpg) no-repeat center top; background-color:#fff6e3; height:100%;}
.main_vis .banner_04{background:url(/_img/main_vis_04.jpg) no-repeat center top; background-color:#fff6e3; height:100%;}
.main_txt{width:100%; max-width:1200px; margin:0 auto; padding:95px 0px;}
.main_txt > img {width:100%; max-width:600px;}

@media screen and (max-width:1230px) {
	.main_vis {padding-top:90px;}
}

/* 메인 비주얼 - 슬라이드 */
#s_banner_wrap {position:relative; height:100%;}
#s_banner_wrap > .bx-wrapper {margin:0; height:100%;}
#s_banner_wrap > .bx-wrapper > .bx-viewport {height:100% !important;}
#s_banner_wrap > .bx-wrapper > .bx-viewport > ul {height:100% !important;}
#s_banner_wrap > .bx-wrapper .bx-controls-direction a {top:0%; margin-top:-210px;}
#s_banner_wrap > .bx-wrapper .bx-controls {max-width:1200px; width:100%; margin:0 auto; margin-top:-40px; position:relative;}
#s_banner_wrap > .bx-wrapper .bx-controls-auto {left:auto; display:inline-block; width:auto; bottom:40px; position:relative; top:auto; margin-left:132px; z-index:1;}

/* 메인 비주얼 - 페이징 */
#bx-pager {right:0; width:150px; height:167px; z-index:0; position:absolute; background:#0092dd; padding:30px; display:inline-block; top:32%;}
#bx-pager > a {color:#fff; text-align:left; display:inline-block; font-size:12px; background:url('/_img/main_pg_bg.png') no-repeat left center; padding-left:8px; font-weight:bold; margin-bottom:10px; width:100%;}
#bx-pager > a:hover, #bx-pager > a.active {background:url('/_img/main_pg_bg_on.png') no-repeat left center; padding-left:8px;}

@media screen and (max-width:1230px) {
	#bx-pager {display:none;}
}


/* 메인 비주얼 - 슬라이드(사용X) */
.slide{height:1210px;overflow:hidden;}
.slide ul{position:relative;height:100%;}
.slide li{position:absolute;left:0;right:0;top:0;bottom:0;opacity:0;animation:fade 15s infinite;}
.slide li:nth-child(1){background:url('/_img/main_vis_01.png') no-repeat center center; animation-delay:0s}
.slide li:nth-child(2){background:url('/_img/main_vis_02.png') no-repeat center center; animation-delay:5s} 
.slide li:nth-child(3){background:url('/_img/main_vis_03.png') no-repeat center center; animation-delay:10s}

.slide li div {width:100%; max-width:1200px; margin:0 auto;}
.slide li img {padding-top:95px; padding-left:45px;}
 /* 100 / 8 = 12.5 */

@keyframes fade {
  0% {opacity:0;}
  5% {opacity:1;}
  33% {opacity:1;}
  38% {opacity:0;}
  100% {opacity:0;}
}

/* 공사실적 */
.business_wrap {position:relative; background:#fff; padding:20px; width:100%; max-width:1200px; margin:-262px auto 0 auto;}
.business_tit {font-size:20px; color:#222; font-weight:bold;margin-bottom:15px;}
.business_more {color:#222; font-size:16px; position:absolute; left:calc( 100% - 84px ); top:20px;}
.business_ul {}
.business_ul > li {border:1px solid #fff; overflow:hidden;}
.business_ul > li > a {}
.business_ul > li > a > img {transform: scale(1.0); transition: transform .5s;}
.business_ul > li > a > img:hover {transform: scale(1.3); transition: transform .5s;}

@media screen and (max-width:1200px) {
	.business_wrap {width:890px;}
}
@media screen and (max-width:900px) {
	.business_wrap {width:580px;}
}