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

/* ******************  메인 비주얼 ********************** */
@media all and ( max-width: 1850px ){
	/* 메인 비주얼 :: 화살표 */
	.main-visual-con .slick-arrow.slick-next{margin-left:0; left:auto; right:80px}
}
@media all and ( max-width: 1730px ){
	/* 메인 비주얼 :: 화살표 */
	.main-visual-con .slick-arrow.slick-prev{left:15px; margin-left:0}
}
@media all and ( max-width: 1220px ){	
	.main-visual-con .slick-arrow.slick-next{right:15px}
}
@media all and ( max-width: 800px ){
	/* 메인 비주얼 :: 이미지 */
	.main-visual-item .main-visual-pc-img{display:none;}
	.main-visual-item .main-visual-m-img{display:block; position:relative; height:600px}
	/* 메인 비주얼 :: 텍스트 */
	.main-visual-item .main-visual-txt-con{margin-top:-100px; padding:0 20px}
	.main-visual-item .main-visual-txt-con .main-visual-txt-inner{text-align:center}
	.main-visual-item .main-visual-txt-con .main-visual-txt1{font-size:15px; margin-bottom:10px}
	.main-visual-item .main-visual-txt-con .main-visual-txt2{font-size:40px}
	.main-visual-item .main-visual-txt-con .main-visual-txt3{font-size:19px; margin-top:30px}
	.main-visual-item .main-visual-txt-con .main-visual-txt3:before{height:3px; width:25px; top:-15px; left:50%; transform:translateX(-50%)}
	/* 메인 비주얼 :: 화살표 */
	.main-visual-con .slick-arrow{background-size:contain !important; width:11px; height:24px}
	/* 메인 비주얼 :: 버튼 */
	#mainVisual .slick-dots{bottom:25px}
	#mainVisual .slick-dots li button{width:8px; height:8px}
}

@media all and ( max-width: 480px ){
	/* 메인 비주얼 :: 텍스트 */
	.main-visual-item .main-visual-txt-con .main-visual-txt2{font-size:36px}
	.main-visual-item .main-visual-txt-con .main-visual-txt3{font-size:17px}
}


/* ******************  메인 컨텐츠 ********************** */
/* -------- 메인 컨텐츠 :: 공통 -------- */
@media all and ( max-width: 800px ){
	/* 공통 :: 타이틀 */
	.main-tit{padding-top:20px}
	.main-tit strong{font-size:31px;}
	.main-tit span{font-size:14px; padding-top:10px}
	.main-tit:before{width:30px; height:3px}
}
/* -------- 메인 컨텐츠 :: 한울건설 -------- */
@media all and ( max-width: 800px ){	
	#mainQuickMenu{padding:40px 0 80px}
	.main-expertise-list{margin:35px -2.5% 0; width:auto}
	.main-expertise-list > li{width:28.333%; margin:0 2.5% !important}
	.expertise-img-thum{margin:0 auto 20px; display:block; width:100%; height:0; padding-top:100%}
	.expertise-img-thum > span{display:block; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%)}
	.expertise-img-thum > span img{width:100%}
	.expertise-tit{font-size:15px}
	.expertise-sub-tit{font-size:13px}
}

/* -------- 메인 컨텐츠 :: Business Portfolio -------- */
@media all and ( max-width: 800px ){	
	#mainPortfolio{padding:40px 0}
	#mainWorks{margin-bottom:50px}
	.main-works-menu-list{margin:40px 0 25px}
	.main-works-menu-list .works-menu-item{width:50%;}
	.works-cover-inner img{max-width:38px;}
	.works-cover-inner p{font-size:13px;}
	.works-txt-thum{padding:15px 3%; min-height:42px;}
	.works-tit{font-size:18px; max-width:100%; margin-bottom:10px;}
	.works-address{font-size:13px; max-width:100%; }
	.works-more-btn{width:160px; height:38px; line-height:38px; font-size:14px;}
	.works-category-tag{top:10px; left:10px; font-size:13px;}
	.main-works-menu-list .slick-arrow{width:30px; height:35px; margin-top:-50px}
	.main-works-menu-list .slick-arrow i{font-size:20px}
}

@media all and ( max-width: 480px ){
	.works-cover-inner img{margin-top:30px; margin-bottom:10px; max-width:30px;}
	.works-category-tag{font-size:12px;}
}


/* -------- 메인 컨텐츠 :: 고객센터 -------- */
@media all and (max-width:1024px){	
	.main-customer-tit span{font-size:38px; margin-right:13px}
	.main-customer-tit b{display:block; margin-top:18px; font-size:16px}
	.main-notice .main-notice-list li a .main-notice-tit{font-size:16px}
	.main-notice .main-notice-list li a .main-notice-sub span{font-size:13px; margin-right:15px}
	.main-customer-link{height:485px}
	.main-notice .go-notice-btn i{font-size:28px}
	.main-notice .main-notice-inner{min-height:386px; max-height:386px}
}
@media all and (max-width:940px){		
	.main-customer-con{margin:30px 0 0}
	.main-customer-con > div{float:none; width:100%; margin:0 0 15px}
	.main-notice .main-notice-inner{padding:40px 40px 29px}
	.main-customer-tit b{display:inline-block}
	.main-customer-link{height:400px}
	.main-customer-link a .customer-link-inner{padding:40px}
	.main-notice .main-notice-inner{min-height:auto; max-height:auto}
}
@media all and (max-width:800px){		
	#mianCustomer{padding:40px 0}
	.main-notice .main-notice-inner{padding:30px 30px 19px}
	.main-customer-tit span{font-size:25px; margin-right:10px}
	.main-customer-tit b{font-size:14px;}
	.main-notice .main-notice-list{margin-top:20px}
	.main-notice .main-notice-list li a{padding:12px 0}
	.main-notice .main-notice-list li a .main-notice-tit{font-size:14px;}
	.main-notice .main-notice-list li a .main-notice-sub{margin-top:10px}
	.main-notice .main-notice-list li a .main-notice-sub span{font-size:13px; margin-right:15px}
	.main-notice .go-notice-btn{margin-top:30px; margin-right:30px}
	.main-notice .go-notice-btn i{font-size:22px;}
	.main-customer-link{height:310px}
	.main-customer-link a .customer-link-inner{padding:30px}
}



/* ******************  메인 오른쪽 퀵메뉴 ********************** */
@media all and ( max-width: 1220px ){
	#rightBar{right:-115px;}
	#rightBar.fixed{visibility:hidden;opacity:0;filter:Alpha(opacity=0);}
}
@media all and ( min-width: 800px ){	
	#rightBar > ul > li > a:hover{width:160px}
	#rightBar > ul > li > a:hover i{left:22%}
	#rightBar > ul > li > a:hover span{visibility:visible}
}