@charset "utf-8";
/* *******************************************************
 * filename : main.css
 * description : 메인 레이아웃 및 컨텐츠 CSS
 * date : 2018-03-27
******************************************************** */

/* ******************  메인 비주얼 ********************** */
#mainVisual{overflow:hidden; width:100%; height:500px; position:relative;}	/* 비주얼높이값 이미지에맞게 수정 */
#mainVisual.full-height{height:1030px;}
.slick-track,
.slick-list {
	-webkit-perspective: 2000;
	-webkit-backface-visibility: hidden;
}
#mainVisual .main-visual-list-con, 
#mainVisual .main-visual-con, 
#mainVisual .slick-list,  
#mainVisual .slick-track, 
.main-visual-item{
	height:100%;
}
.main-visual-con{z-index:1;}
/* 메인 비주얼 :: 이미지 */
.main-visual-item{position:relative;}
.main-visual-item .main-visual-pc-img{
	width:100%;
	height:100%;
	background-size:cover !important;
}
.main-visual-item .main-visual-m-img{display:none;}

/* 메인 비주얼 :: 텍스트 */
.main-visual-item .main-visual-txt-con{position:absolute; top:50%; left:0px; width:100%; margin-top:-190px; padding:0 40px; box-sizing:border-box}  
.main-visual-item .main-visual-txt-con .main-visual-txt-inner{text-align:left; word-break:keep-all}
.main-visual-item .main-visual-txt-con .main-visual-txt1,
.main-visual-item .main-visual-txt-con .main-visual-txt2,
.main-visual-item .main-visual-txt-con .main-visual-txt3{
	opacity:0; 
}
.main-visual-item .main-visual-txt-con .main-visual-txt1{display:block; font-size:20px; font-weight:700; letter-spacing:0; color:rgba(0,0,0,0.5); margin-bottom:20px; text-transform:uppercase; line-height:1.4;}
.main-visual-item .main-visual-txt-con .main-visual-txt2{font-size:65px; letter-spacing:-0.25px; color:#222; margin-bottom:15px; font-weight:700; line-height:1.07;}
.main-visual-item .main-visual-txt-con .main-visual-txt3{position:relative; font-size:28px; letter-spacing:-0.45px; color:#222; line-height:1.25;  font-weight:400; margin-top:80px}
.main-visual-item .main-visual-txt-con .main-visual-txt3:before{position:absolute; content:""; width:43px; height:5px; background-color:#fe984a; top:-40px; left:0}

/* 메인 비주얼 :: active효과 */
.main-visual-item.active-item .main-visual-txt1,
.main-visual-item.active-item .main-visual-txt2,
.main-visual-item.active-item .main-visual-txt3{
	-webkit-animation: text-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;
	animation: text-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;
}
.main-visual-item.active-item .main-visual-txt-con .main-visual-txt1{ -webkit-animation-delay:0.1s; animation-delay:0.1s;}
.main-visual-item.active-item .main-visual-txt-con .main-visual-txt2{ -webkit-animation-delay:0.3s; animation-delay:0.3s;}
.main-visual-item.active-item .main-visual-txt-con .main-visual-txt3{ -webkit-animation-delay:0.5s; animation-delay:0.5s;}

@keyframes text-active-animation {
	from {
		opacity:0;filter:Alpha(opacity=0);
		-webkit-transform: translateY(50px); 
		transform: translateY(50px); 
	}
	to {
		opacity:1.0;filter:Alpha(opacity=100);
		-webkit-transform: translateY(0); 
		transform: translateY(0); 
	}
}

/* 메인 비주얼 :: 버튼 */
#mainVisual .slick-dots{position:absolute; width:100%; text-align:center; bottom:45px; margin-top:-5px}
#mainVisual .slick-dots li{display:inline-block; margin:0 5px ; }
#mainVisual .slick-dots li button{
	cursor:pointer; margin:0px; padding:0px; background:none; font-size:0; width:10px; height:10px; background-color:rgba(255,255,255,0.3); border:1px solid #fff; 
	-webkit-border-radius:50%;-moz-border-radius:50%;-o-border-radius:50%;border-radius:50%;
}
#mainVisual .slick-dots li.slick-active button{background-color:#fff;}		/* 버튼 active */

/* 메인 비주얼 :: 화살표 */
.main-visual-con .slick-arrow{position:absolute; width:15px; height:30px; top:50%; margin-top:-15px; left:50%; cursor:pointer; border:0; z-index:9; font-size:0;}		/* 버튼이미지에 맞게 크기 수정 */
.main-visual-con .slick-arrow.slick-prev{margin-left:-840px; background:url(/images/button/main_prev_btn.png) no-repeat}
.main-visual-con .slick-arrow.slick-next{margin-left:840px; background:url(/images/button/main_next_btn.png) no-repeat}




/* ******************  메인 컨텐츠 ********************** */
/* -------- 메인 컨텐츠 :: 공통 -------- */
/* 공통 :: 타이틀 */
.main-tit{position:relative; text-align:center; padding-top:30px}
.main-tit:before{position:absolute; display:inline-block; content:""; width:40px; height:5px;  top:0; left:50%; transform:translateX(-50%); background-color:#fe984a}
.main-tit strong{display:block; color:#222; font-size:52px; font-weight:500; letter-spacing:0; text-transform:uppercase}
.main-tit span{display:block; font-weight:400; font-size:18px; letter-spacing:0; color:#999; padding-top:25px; text-transform:uppercase}


/* -------- 메인 컨텐츠 :: 한울건설 -------- */
#mainQuickMenu{background:url("../images/main/main_business_bg.jpg") no-repeat 50% 0; background-size:cover; padding:80px 0 160px}
.main-expertise-list{width:100%; margin-top:70px}
.main-expertise-list > li{float:left; width:188px; text-align:center;}
.main-expertise-list > li a{display:block}
.main-expertise-list > li.expertise-con1{margin-right:calc(50% - 282px)}
.main-expertise-list > li.expertise-con3{margin-left:calc(50% - 282px)}
.expertise-img-thum{position:relative; width:188px; height:188px; background-color:#0b486d; display:table; border-radius:50%; margin-bottom:40px; transition:all 0.3s}
.expertise-img-thum > span{display:table-cell; vertical-align:middle;}
.expertise-img-thum > span img{max-width:100%}
.expertise-tit{font-weight:600; font-size:22px; color:#222; letter-spacing:-0.45px; }
.expertise-sub-tit{display:block; font-weight:400; font-size:15px; letter-spacing:-0.25px;; color:#999; text-transform:uppercase; margin-top:10px}
@media all and ( min-width: 800px ){	
	.main-expertise-list > li a:hover .expertise-img-thum{background-color:#fe984a}
}


/* -------- 메인 컨텐츠 :: Business Portfolio -------- */
#mainPortfolio{padding:80px 0}
.main-works-menu-list{width:100%; margin:80px 0 50px;}
.main-works-menu-list .works-menu-item{float:left; width:20%;}
.works-img-thum{width:100%;}
.works-img-thum > a{display:block; position:relative; padding-top:71.35%;}
.works-img-thum span{position:absolute; top:0; left:0; bottom:0; right:0; overflow:hidden;}
.works-img-thum span img{/*max-width:100%;*/ width:100%; height:100%; position:relative; -webkit-transition:all 0.3s;-moz-transition:all 0.3s;-o-transition:all 0.3s;-ms-transition:all 0.3s;transition:all 0.3s}
.works-cover{position:absolute; top:0; left:0; bottom:0; right:0; background-color:rgba(10,71,115,0.6); opacity:0;filter:Alpha(opacity=0); text-align:center;}
.works-cover-inner{display:table; width:100%; height:100%;}
.works-cover-inner > div{display:table-cell; width:100%; vertical-align:middle;}
.works-cover-inner > div img{display:inline-block}
.works-cover-inner img{position:relative; display:inline-block; margin-bottom:23px; -webkit-transition:all 0.3s;-moz-transition:all 0.3s;-o-transition:all 0.3s;-ms-transition:all 0.3s;transition:all 0.3s}
.works-cover-inner p{font-size:16px; color:#fff; font-weight:500; letter-spacing:2px;}
.works-txt-thum{text-align:center; padding:30px 3% 40px; min-height:52px;}
.works-tit, .works-address{-webkit-transition:all 0.3s;-moz-transition:all 0.3s;-o-transition:all 0.3s;-ms-transition:all 0.3s;transition:all 0.3s; max-width:100%; white-space:nowrap; text-overflow:ellipsis; overflow:hidden;}
.works-tit{font-size:22px; color:#565656; font-weight:500; letter-spacing:-0.45px; margin-bottom:14px;}
.works-address{display:block; font-size:16px; color:#9e9e9e; letter-spacing:-0.45px;}
.works-more-btn{display:block; margin:0px auto; width:193px; height:53px; border:2px solid #ddd; text-align:center; font-size:16px; color:#666; line-height:53px; text-transform:uppercase; border-radius:50px; font-weight:400; letter-spacing:-0.45px}
.works-more-btn span{display:inline-block; padding-left:30px; color:#666; font-weight:600; font-size:22px; vertical-align:bottom; transition:all 0.3s;}
.works-category-tag{position:absolute; top:23px; left:19px; z-index:9; cursor:pointer; padding:0 12px; height:35px; border:2px solid #f99500; background-color:#f99500; font-size:16px; color:#fff; letter-spacing:-0.65px; border-radius:35px; -moz-border-radius:35px; -webkit-border-radius:35px; -o-border-radius:35px; font-weight:400; line-height:35px}
.main-works-menu-list .slick-arrow{position:absolute; top:50%; z-index:9; color:#fff; margin-top:-80px; width:50px; height:60px; background:rgba(0,0,0,0.5); text-align:center}
.main-works-menu-list .slick-arrow i{font-size:30px; position:relative}
.main-works-menu-list .slick-arrow.slick-prev{left:0}
.main-works-menu-list .slick-arrow.slick-prev i{left:-3px}
.main-works-menu-list .slick-arrow.slick-next{right:0}
.main-works-menu-list .slick-arrow.slick-next i{left:3px}

@media all and ( min-width: 801px ){	
	.main-works-menu-list .works-menu-item:hover .works-cover{opacity:1.0;filter:Alpha(opacity=100);}
	.main-works-menu-list .works-menu-item:hover .works-cover-inner img{transform:rotate(180deg);}
	.main-works-menu-list .works-menu-item:hover .works-img-thum span img{transform: scale(1.1) rotate(0.02deg);}
	.main-works-menu-list .works-menu-item:hover{background-color:#f5f5f5;}
	.main-works-menu-list .works-menu-item:hover .works-tit, .main-works-menu-list .works-menu-item:hover .works-address{color:#0a4773;}
	.works-more-btn:hover{background-color:#0a4773; color:#fff; border-color:#0a4773}
	.works-more-btn:hover span{color:#fff}
	.main-works-menu-list .works-menu-item:hover .works-category-tag{background:none; border-color:#fff; }
}


/* -------- 메인 컨텐츠 :: 고객센터 -------- */
#mianCustomer{background:#f5f5f5; padding:80px 0 110px}
.main-customer-con{margin:65px -1% 0}
.main-customer-con > div{float:left; width:31.333%; margin:0 1%}
.main-customer-con .main-customer-link a{display:block; height:100%; width:100%; border:1px solid #e6e6e6; box-sizing:border-box}
.main-customer-tit{color:#232323}
.main-customer-tit span{display:inline-block; font-weight:300; font-size:40px; letter-spacing:-0.45px; margin-right:18px}
.main-customer-tit span strong{font-weight:500}
.main-customer-tit b{display:inline-block; font-weight:400; font-size:18px; letter-spacing:-0.25px; opacity:0.5; color:#222}
.main-notice .main-customer-tit{color:#232323}

.main-notice .main-notice-inner{position:relative; border:1px solid #e6e6e6; background:#fff; padding:60px 10.5% 38px; min-height:364px; max-height:364px;}
.main-notice .main-notice-list{margin-top:37px}
.main-notice .main-notice-list li{border-top:1px solid #ddd}
.main-notice .main-notice-list li a{display:block; padding:22px 0}
.main-notice .main-notice-list li a .main-notice-tit{font-weight:400; font-size:18px; letter-spacing:-0.45px; color:#222; line-height:1.3}
.main-notice .main-notice-list li a .main-notice-sub{margin-top:15px}
.main-notice .main-notice-list li a .main-notice-sub span{display:block; font-weight:400; font-size:15px; letter-spacing:-0.45px; color:#999}
.main-notice .main-notice-list li a .main-notice-sub span i{display:inline-block; vertical-align:middle}
.main-notice .main-notice-list li a .main-notice-sub span strong{font-weight:400; display:inline-block; padding-left:7px; vertical-align:middle}
.main-notice .go-notice-btn{position:absolute; right:0; top:0; margin-top:55px; margin-right:10%;}
.main-notice .go-notice-btn i{font-size:32px; color:#222}

.main-customer-link{height:464px; background-size:cover !important}
.main-customer-link a .customer-link-inner{padding:60px 10.5%}
.main-recruit{background:url("../images/main/main_recruit_bg.jpg") no-repeat 50% 50%;}
.main-partner{background:url("../images/main/main_partner_bg.jpg") no-repeat 50% 50%;}
.main-customer-link .main-customer-tit b{display:block; margin-top:18px}



/* ******************  메인 오른쪽 퀵메뉴 ********************** */
#rightBar{
	position:fixed; top:55%; right:0; z-index:99; margin-top:-170px;
	visibility:visible; opacity:1.0;filter:Alpha(opacity=100);
	transition:all 0.5s cubic-bezier(0.47, 0, 0.745, 0.715); 
	-webkit-transition:all 0.5s cubic-bezier(0.47, 0, 0.745, 0.715);  
	-oz-transition:all 0.5s cubic-bezier(0.47, 0, 0.745, 0.715); 
	-ms-transition:all 0.5s cubic-bezier(0.47, 0, 0.745, 0.715);
}
#rightBar.fixed{visibility:visible; opacity:1.0;filter:Alpha(opacity=100);}
#rightBar > ul {}
#rightBar > ul > li{position:relative; height:60px; display:block}
#rightBar > ul > li > a{position:absolute; top:0; right:0; display:block; width:60px; height:60px; text-align:center; -webkit-transition:all 0.4s;-moz-transition:all 0.4s;-o-transition:all 0.4s;-ms-transition:all 0.4s;transition:all 0.4s}
#rightBar > ul > li > a i{font-size:24px; line-height:60px; line-height:60px; color:#fff; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); transition:all 0.3s}
#rightBar > ul > li > a span{font-weight:500; font-size:16px; letter-spacing:-0.5px; color:rgba(255,255,255,0.8); width:190px; visibility:hidden; position:absolute; top:50%; left:63px; transform:translateY(-50%); text-align:left}

#rightBar.sub{top:35%; transition:top 0s}