@charset "utf-8";

.tit h3.main_tit {display: inline-block; margin-bottom: 25px; padding-right: 30px; color: #333; font-size: 30px; font-weight: 900;}
.tit .sub_tit {position: relative; display: inline-block; color: #b0b0b0; font-weight: 500;}
.tit .sub_tit::before {position: absolute; left: -16px; bottom: 1px; content: ''; display: block; width: 2px; height: 13px; background-color: #b0b0b0;}
.tit .des {font-size: 16px; color: #666;}

/* 메인 비주얼 */
.main_visual_wrap {position: relative;}
.main_visual_wrap .main_visual {width: 100%; height: 932px;}
.main_visual_wrap .main_visual .slick-slide > div::after { content: ''; clear: both; float: none; }
.main_visual_wrap .main_visual .visual { float: left; position: relative; width: 100%; height: 932px;}
.main_visual_wrap .main_visual .visual .img {width:100%; height:932px; background-size:cover; background-position:center;}
.main_visual_wrap .main_visual .visual .click-overlay{position: absolute; inset: 0; z-index: 9999; display: block;}
.main_visual_wrap .main_visual .visual_1 {background: url(../img/main_visual1.jpg) no-repeat center center;}
.main_visual_wrap .main_visual .visual_2 {background: url(../img/main_visual2.jpg) no-repeat center center;}
.main_visual_wrap .main_visual .visual_3 {background: url(../img/main_visual3.jpg) no-repeat center center;}
.main_visual_wrap .main_visual h2 {position: absolute; bottom: 40%; width: 100%; font-size: 34px; color: #fff; text-align: center; line-height: 65px; font-weight: 300;}
.main_visual_wrap .main_visual h2 span {font-size: 54px; font-weight: 700;}
.main_visual .visual .visual-link {display: block;}
.main_visual .visual .visual-link .img {width: 100%; height: 100%;}
.main_visual_wrap .scroll {position: absolute; left: 50%; bottom: 79px; width: 30px; height: 54px; margin-left: -15px;}
.main_visual_wrap .scroll::before {position: absolute; content:''; left: 15px; bottom: -79px; display: block; width: 1px; height: 58px; background-color: #f6f6f6; opacity: 0.5;}
.main_visual_wrap .scroll .img {position: absolute; bottom: 0; -webkit-animation-name: movingScroll;	-webkit-animation-duration: 1.5s; -webkit-animation-iteration-count: infinite; 	animation-name: movingScroll; animation-duration: 1.5s; animation-iteration-count: infinite;}
@keyframes movingScroll {
		from { bottom: 0 }
		to { 	bottom: -15px }
}

.main_visual_wrap .count_wrap {position: absolute; left: 50%; bottom: 260px; margin-left: -610px; text-align: center;}
.main_visual_wrap .count_wrap .main_visual_now {font-size: 22px; margin-bottom: 11px; padding-bottom: 9px; color: #27d095; border-bottom: 1px solid #fff; }
.main_visual_wrap .count_wrap .main_visual_total {font-size: 16px; color: #fefefe; opacity: 0.5;}

.main_visual_wrap .slick-dots {position: absolute; left: 50%; bottom: 360px; margin-left: -600px;}
.main_visual_wrap .slick-dots li {width: 4px; height: 44px; background-color: #fff; margin-bottom: 19px; text-indent: -9999px; overflow: hidden; cursor: pointer;}
.main_visual_wrap .slick-dots li:last-child {margin-bottom: 0;}
.main_visual_wrap .slick-dots li.slick-active {background-color: #27d095;}
.slick-vertical .slick-slide {border: none !important;}

/* 사업분야 */
#main_busi_wrap {height: 915px; padding: 140px 0 167px 0; background: #fff url(../img/main_busi_bg.jpg) no-repeat center left calc(50% + 480px);}
#main_busi_wrap .tit h3 span {color: #f59738;}
#main_busi_wrap .tit .des {margin-bottom: 90px; }

#main_busi_wrap .slide_wrap {position: relative;}
#main_busi_wrap .slide_wrap::before {position: absolute; bottom: 30px; content: ''; display: block; width: 700px; height: 450px; background-color: #f5f5f5;}

#main_busi_wrap .slick-dots {position: absolute; top: -145px; right: 26px ;}
#main_busi_wrap .slick-dots li { float: left; position: relative; width: 132px; height: 50px; border: 1px solid #fff; border-left: none; font-size: 20px;  font-weight: 700; color: #fff; line-height: 50px; text-align: center; cursor: pointer;}
#main_busi_wrap .slick-dots li:first-child { border-left: 1px solid #fff; }
#main_busi_wrap .slick-dots li button { position: absolute; width: 100%; height: 100%; top: 0; left: 0; font-size: 0;}
#main_busi_wrap .slick-dots li:nth-child(1)::after { content: '전기공사'; display: block; width: 100%; height: 50px; text-align: center; }
#main_busi_wrap .slick-dots li:nth-child(2)::after { content: '안전관리'; display: block; width: 100%; height: 50px; text-align: center; }
#main_busi_wrap .slick-dots li:nth-child(3)::after { content: '직무고시'; display: block; width: 100%; height: 50px; text-align: center; }
#main_busi_wrap .slick-dots li:nth-child(4)::after { content: '컨설팅'; display: block; width: 100%; height: 50px; text-align: center; }
#main_busi_wrap .slick-dots li.slick-active {color: #f59738; background-color: #fff;}

#main_busi_wrap .busi_slide {position: relative;}
#main_busi_wrap .busi_slide .img {float: left; margin-left: 30px;}
#main_busi_wrap .busi_slide .text {float: left; margin: 90px 0 0 50px; padding-left: 40px; color: #fff; font-size: 18px; line-height: 150%; overflow: hidden;}
#main_busi_wrap .busi_slide .text .con_tit {line-height: 37px;}
#main_busi_wrap .busi_slide .text .con_tit span {font-size: 40px; font-weight: 700;}
#main_busi_wrap .busi_slide .text .hr {width: 30px; height: 3px; margin: 40px 0; background-color: #fff;}
#main_busi_wrap .busi_slide_next, #main_busi_wrap .busi_slide_prev {position: absolute; top: 50%; margin-top: -12px; cursor: pointer;}
#main_busi_wrap .busi_slide_next {right: -35px;}
#main_busi_wrap .busi_slide_prev {left: -35px;}

#main_busi_wrap .busi_slide .slide .img {transform: translateY(200px); opacity: 0; transition: transform 0.5s, opacity 0.8s; transition-delay: 0.3s;}
#main_busi_wrap .busi_slide .slide .text .con_tit, #main_busi_wrap .busi_slide .slide .text .hr {transform: translateX(-500px); opacity: 0; transition: transform 0.7s, opacity 0.8s; transition-delay: 0.5s;}
#main_busi_wrap .busi_slide .slide .text .cont {transform: translateX(-500px); opacity: 0; transition: transform 0.7s, opacity 0.8s; transition-delay: 1s;}

#main_busi_wrap .busi_slide .slick-active .slide .img {transform: translateY(0); opacity: 1;}
#main_busi_wrap .busi_slide .slick-active .slide .text .con_tit, #main_busi_wrap .busi_slide .slick-active .slide .text .hr {transform: translateX(0); opacity: 1;}
#main_busi_wrap .busi_slide .slick-active .slide .text .cont {transform: translateX(0); opacity: 1;}


/* 홍보영상 */
#main_video_wrap {position: relative; height: 408px; text-align: center;}
#main_video_wrap .video_bg_wrap {width: 100%; height: 408px; overflow: hidden;}
#main_video_wrap .video_bg_wrap .video_bg {width: 1920px; height: 1080px; margin: -200px auto 0 auto; background: url(../img/main_video01.jpg);}
#main_video_wrap .video_dim {position: absolute; left: 50%; top: 0; -webkit-transform: translateX(-50%); transform: translateX(-50%); width: 100%; max-width: 1920px; height: 100%; background-color: #000; opacity: 0.3;}
#main_video_wrap .text {position: absolute; top: 110px; width: 100%; z-index: 9994;}
#main_video_wrap .s_tit {margin-bottom: 75px; color: #fff; line-height: 45px;}
#main_video_wrap .s_tit .sub_tit {font-size: 18px; font-weight: 500;}
#main_video_wrap .s_tit h3 {font-size: 55px; font-weight: 700; text-shadow: 3px 3px 3px rgba(0,0,0,0.3);}
#main_video_wrap .vid_open {display: inline-block; width: 170px; margin-left: 20px; color: #fff; font-weight: 600; text-shadow: 3px 3px 3px rgba(0,0,0,0.3); font-size: 23px; text-align: left;}
#main_video_wrap .vid_open span {display: inline-block; padding-right: 15px; vertical-align: middle; font-weight: 700;}
#main_video_wrap .vid_open img {vertical-align: middle;}
#main_video_wrap .vid_open:hover span {-webkit-animation-name: movingVideo;	-webkit-animation-duration: 1s; -webkit-animation-iteration-count: infinite; 	animation-name: movingVideo; animation-duration: 1s; animation-iteration-count: infinite;}
@keyframes movingVideo {
		from { padding-right: 15px }
		to { 	padding-right: 23px }
}

#main_video_wrap .vid_pop {display: none; z-index: 9999; position: fixed; top: 10%; left: 50%; width: 1240px; height: 715px; margin-left: -620px; z-index: 9998; padding: 20px; background-color: #fff;}
#main_video_wrap .vid_pop .vid_play {position: absolute; width: calc(100% - 40px); height: calc(100% - 40px); left: 20px; top: 20px; background: url("../img/main_video_play.jpg") no-repeat center center; background-size: cover;}
#main_video_wrap .vid_pop .vid_play span {display: block; width: 0; height: 0; text-indent: -9999px; overflow: hidden;}
/* #main_video_wrap .vid_pop .vid_close {position: absolute; top: 0; right: -89px; width: 89px; height: 89px;} */

/* 진행현황 */
#main_pro_wrap {width: 90%; min-width: 1240px; max-width: 1710px; padding: 88px 0 107px 0; margin: 0 auto;}
#main_pro_wrap .pro_receipt, #main_pro_wrap .pro_progress {float: left; width: calc((100% - 30px)/2); max-width: 828px; height: 512px; padding: 30px 20px 20px 20px; border-top-left-radius: 15px; border-top-right-radius: 15px; border: 1px solid #ebebeb; background: #f6f6f6 url(../img/main_pro_border.jpg) no-repeat top 88px center; background-size: contain;}
#main_pro_wrap .pro_receipt {margin-right: 20px;}

#main_pro_wrap .tit_wrap {margin-bottom: 55px;}
#main_pro_wrap .tit_wrap .img {margin: 0 25px 0 20px; vertical-align: middle;}
#main_pro_wrap .tit_wrap .con_tit {font-size: 24px; font-weight: 700; color: #666; vertical-align: middle;}
#main_pro_wrap .tit_wrap a {float: right; display: inline-block; margin: 6px 20px 0 0; font-size: 16px; font-weight: 500; color: #b6b6b6;}
#main_pro_wrap .tit_wrap a span {display: inline-block; margin: 0 15px 1px 0;}
#main_pro_wrap .tit_wrap a img {vertical-align: bottom;}

#main_pro_wrap .cont_wrap { position: relative; border-radius: 15px; background-color: #fff; text-align: center;}
#main_pro_wrap .cont_tit {padding: 12px 20px; border-bottom: 1px solid #ebebeb; font-weight: 700;}
#main_pro_wrap .pro_receipt p, #main_pro_wrap .pro_progress p {display: inline-block; text-align: center; line-height: 28px;}
#main_pro_wrap .pro_receipt .cont_tit p {margin-left: -3px;}
#main_pro_wrap .pro_receipt .cont_tit a:first-of-type p {margin-left: 0;}
#main_pro_wrap .cont_list {height: 320px; padding: 20px; color: #666;  font-weight: 300;}
#main_pro_wrap .date, #main_pro_wrap .company, #main_pro_wrap .kinds, #main_pro_wrap .co_kinds, #main_pro_wrap .name, #main_pro_wrap .locate, #main_pro_wrap .state {width: 24%;}

#main_pro_wrap .cont_list .state {color: #7daf42;}
#main_pro_wrap .cont_list .state.confirm {color: #de7b3d;}

#main_pro_wrap .slick-dots {position: absolute; bottom: -29px; width: 100%; text-align: center;}
#main_pro_wrap .slick-dots li {display: inline-block; width: 12px; height: 12px; margin-left: 14px; border-radius: 6px; background-color: #d7d7d7; text-indent: -9999px; overflow: hidden;}
#main_pro_wrap .slick-dots li:first-child {margin-left: 0;}
#main_pro_wrap .slick-dots li.slick-active {background-color: #959595;}


/* 시공사례 */
#main_gallery_wrap {padding: 100px 0 107px 0;background: url(../img/main_gallery_bg.jpg) no-repeat center center;}
#main_gallery_wrap .tit {padding-bottom: 30px;}
#main_gallery_wrap .tit .main_tit {color: #fff;}
#main_gallery_wrap .slide_wrap {position: relative;}
#main_gallery_wrap .gallery_slide_next, #main_gallery_wrap .gallery_slide_prev {position: absolute; top: 50%; margin-top: -12px; cursor: pointer;}
#main_gallery_wrap .gallery_slide_next {right: -35px;}
#main_gallery_wrap .gallery_slide_prev {left: -35px;}
#main_gallery_wrap .gallery_slide .slick-slide { padding: 10px; }


/* end */