@charset "utf-8";
/* *******************************************************
 * filename : content_responsive.css
 * description : 서브페이지 컨텐츠 반응형 CSS
 * date : 2018-01-16
******************************************************** */


/* ************* 회사소개 ************** */
/* ------------- 인사말 ---------------- */
@media all and (max-width:800px){	
	.greeting-titlebox{margin-bottom:25px}
	.greeting-titlebox h4{font-size:24px;}
	.greeting-titlebox h4 span, .greeting-txt .greeting-ceo{font-size:14px;}
	.greeting-txt .txt{font-size:13px;}
	.greeting-txt .greeting-sign img{width:69.3px; margin-top:2px;}
}

/* ------------- 회사소개 ---------------- */
@media all and (max-width:800px){
	.table-list dt, .table-list dd{font-size:13px;}
	.table-list{display:block; width:100%;}
	.table-list dt, .table-list dd{display:block; float:left; height:100%;}
}

/* ------------- 오시는 길 ---------------- */
@media all and ( max-width:800px ){	
	.location-tit{font-size:20px; padding:0}
    /* 오시는길 :: 하단정보1 */
    .map-tbl th,.map-tbl td{padding:15px 10px; font-size:13px; vertical-align:top;}
    .map-tbl th{width:60px}
} 
                         


/* ****************** 주요실적 ********************** */
/* -------- 주요실적 :: LIST -------- */
@media all and ( max-width: 800px ){
	.main-works-menu-list.works .works-menu-item{width:50%;}
}
/* -------- 주요실적 :: VIEW -------- */
@media all and ( max-width: 800px ){
	.view-con-inner{margin:0}
	.view-con-inner > div{float:none; width:100%; margin:0}
	.view-con-inner > div.rt-info{margin-top:30px}
	.view-con-inner > div.rt-info .view-tit{font-size:16px}
	.view-con-inner > div.rt-info .info-list li{padding:10px 0}
	.view-con-inner > div.rt-info .info-list li strong, 
	.view-con-inner > div.rt-info .info-list li p{font-size:13px;}
	.view-con-inner > div.rt-info .info-list li strong{width:100px}
	.list-btn a{font-size:13px; width:200px; height:40px; line-height:40px; margin-top:50px;}
	.info-list-detail{margin-top:30px}
	.info-list-detail strong{font-size:14px;}
}

@media all and ( max-width: 480px ){	
	.view-con-inner > div.lf-img .main-img .slick-arrow{width:33px; height:35px; font-size:19px}
	.view-con-inner > div.lf-img .main-img .slick-arrow i{margin-top:6px}
}


/* ************* 협력업체 ************** */
@media all and (max-width:800px){	
	/* 상단배너 */
	.cooperation-top{display:block; height:auto}
	.cooperation-top > div{display:block}
	.cooperation-top .lf-img{padding-top:50%}
	.cooperation-top .rt-txt{width:100%; padding:5%}
	.cooperation-top .rt-txt h3{font-size:24px}
	.cooperation-top .rt-txt p{font-size:14px; margin-top:30px}
	.cooperation-top .rt-txt p:before{width:20px; height:2px; top:-18px}
}



/* ************* 채용정보 ************** */
/* --------------- 인재상&인사제도 --------------- */
@media all and (max-width:1120px){	
	/* 상단 */
	.talent-top{padding:4.5% 2%}
	.talent-top .telent-item li.ps-ab p br{display:none}
}
@media all and (max-width:800px){		
	/* 상단 */
	.talent-top{padding:7% 5% 8%}
	.talent-top .top-inner{display:flex; flex-direction:column-reverse}
	.talent-top .telent-item li{max-width:430px; margin:25px auto 0}
	.talent-top .telent-item li:first-child{margin-top:4%}
	.talent-top .telent-item li.ps-ab{position:relative; bottom:auto}
	.talent-top .telent-item li.item02,
	.talent-top .telent-item li.item03{width:100%; text-align:center}
	.talent-top .telent-item li strong{font-size:15px}
	.talent-top .telent-item li p{font-size:13px}
	.talent-top .telent-item li p br{display:none}
	.talent-top .talent-img{width:100%; margin:0; display:block;}
	/* 하단 */
	.talent-detail{margin-top:40px}
	.talent-detail .detil-item{padding:20px 0}
	.talent-detail .detil-item .lf-tit{float:none; width:100%; font-size:20px; margin-bottom:20px; display:block}
	.talent-detail .detil-item .rt-inner{float:none; width:100%}
	/* 하단 :: 직급체계 */
	.talent-detail .detil-item .position-con .position-circle{margin:0 -7px}
	.talent-detail .detil-item .position-con .position-circle li{margin:0 7px; width:calc(14.28% - 17px); padding-top:calc(14.28% - 17px)}
	.talent-detail .detil-item .position-con .position-circle li:after{border:0; right:-22px}
	.talent-detail .detil-item .position-con .position-circle li span{font-size:14px}
	.talent-detail .detil-item .position-con .gr-box-txt{font-size:13px; padding:10px; margin-top:15px}
	/* 하단 :: 보상제도 */
	.talent-detail .detil-item .compensation-con .txt{font-size:15px}
	.talent-detail .detil-item .compensation-con .box-list{display:block; margin:15px 0 0}
	.talent-detail .detil-item .compensation-con .box-list li{width:100%; margin:0 0 10px}
	.talent-detail .detil-item .compensation-con .box-list li .inner{padding:15px}
	.talent-detail .detil-item .compensation-con .box-list li .inner dt{font-size:14px; margin-bottom:10px; padding-bottom:6px}
	.talent-detail .detil-item .compensation-con .box-list li .inner dd{font-size:13px}
	.talent-detail .detil-item .compensation-con .box-list li .inner dd br{display:none}
}
@media all and (max-width:480px){		
	/* 하단 :: 직급체계 */
	.talent-detail .detil-item .position-con .position-circle{text-align:center}
	.talent-detail .detil-item .position-con .position-circle li{width:calc(25% - 17px); padding-top:calc(25% - 17px)}
}


/* --------------- 채용안내 --------------- */
@media all and (max-width:800px){   
	/* 채용안내 */
	.notice-table .table-sec .txt, .notice-table .table-sec .txt .list li{font-size:13px}
	.notice-table h5{font-size:20px; margin-bottom:15px}
	.table-recruit th, .table-recruit td{font-size:13px;}
	.recruit-banner p{font-size:15px;}
	.table-recruit td .table-list-inner li:before{top:10px;}
	.notice-table .table-sec .tit{width:150px}
	.notice-table .table-sec .txt dl{margin-bottom:10px}
	.notice-table .table-sec .txt dt{width:100%; float:none}
	.notice-table .table-sec .txt dd{float:none; width:100%; margin-top:5px}
	.notice-table .table-sec .txt dd p{margin-bottom:5px}
	.notice-table .table-sec .txt .inner-box li{width:100%;}
	.notice-table .table-sec .download a{padding:6px 10px; margin-top:10px}
	/* 채용안내 :: 배너 */
	.recruit-banner{background-size:106px; background-position:right 10px bottom -10px;}
    /* -------- 채용절차 :: step box -------- */
    .recruit-process .list {display:flex; width:100%; flex-wrap:wrap; justify-content:flex-end; margin:-2% -2.1%; }
    .recruit-process .list li {width: 29%; margin: 2% 2.1%; }
	.recruit-process .list li:nth-child(4){order:5;}
    .recruit-process .list li:before {margin-right:-57.5%; border:none;}
	.recruit-process .list li:nth-child(3):before{transform:translateX(50%) rotate(90deg); margin-right:0; top:auto; bottom:-25px;}
	.recruit-process .list li:nth-child(4):before{transform:translateX(50%) rotate(180deg); margin-right:57.5%;}
    .recruit-process .list .list-inner {padding: 15px 0;}
    .recruit-process .list .list-inner dt img {height: 33.6px; }
    .recruit-process .list .list-inner dl dd .txt-box {height:50px; margin-top:5px;}
    .recruit-process .list .list-inner dl dd .txt-box .bg-num {font-size:50px;}
    .recruit-process .list .list-inner dl dd .txt-box .txt {font-size:13px;}
    /* -------- 채용절차 :: step 디테일 -------- */
    .recruit-process .step {margin-top:20px;}
    .recruit-process .step li dl {padding:15px;}
    .recruit-process .step li dl dt .num {font-size:14px;}
    .recruit-process .step li dl dd p {font-size:13px;}
    .recruit-process .step li dl dd p span {padding-left: 7px;}
    .recruit-process .step li dl dd p em {padding-left:20px; display:block; margin-top:5px;}
}
@media all and (max-width:480px){   
	/* 채용안내 */
	.notice-table .table-sec{display:block; padding:20px 0}
	.notice-table .table-sec .tit{display:block; width:100%}
	.notice-table .table-sec .txt{display:block; width:100%; margin-top:15px}
	.notice-table h5 br{display:none}
    /* -------- 채용절차 :: step box -------- */
    .recruit-process .list {display:block; margin: 0;}
    .recruit-process .list li {float:none; width: 100%; margin: 2% 0; }
	.recruit-process .list li:before{display:none;}
    /* -------- 채용절차 :: step 디테일 -------- */
    .recruit-process .step li dl dt{width:75px}
    .recruit-process .step li dl dd{width:calc(100% - 75px)}
}   



/* --------------- 복리후생 --------------- */
@media all and (max-width:960px){		
	/* 리스트 */
	.welfare-list li .txt-con dd br{display:none}
}
@media all and (max-width:800px){		
	/* 배너 */
	.welfare-top{height:200px}
	.welfare-top .txt{font-size:20px}
	/* 리스트 */
	.welfare-list{margin-top:40px}
	.welfare-list li{width:48%}
	.welfare-list li .txt-con{margin-top:10px}
	.welfare-list li .txt-con dt{font-size:16px; padding-bottom:10px}
	.welfare-list li .txt-con dt .num{font-size:18px}
	.welfare-list li .txt-con dd{font-size:13px; margin-top:10px}
}
@media all and (max-width:480px){		
	/* 배너 */
	.welfare-top .txt{padding-right:20%}
	.welfare-top .txt br{display:none}
}


/* ************* 사업소개 ************** */
/* --------------- 상단탭 --------------- */
@media all and (max-width:800px){
	.business-list-page .main-works-menu-list.works .works-menu-item{width:50%;}
	/* 상단탭 */
	.gray-tab-list-wrap li a{font-size:13px;}
	.gray-tab-m{position: relative; display:block; height:34px; background:#f2f2f2; font-size:13px; line-height:34px; letter-spacing:-0.5px; color:#777; font-weight:400; vertical-align:middle; padding:0 15px; }
	.gray-tab-m i{position: absolute; top:50%; right:15px; transform:translateY(-50%);}
	.gray-tab-m.selected i{transform:translateY(-50%) rotate(180deg);}
	.gray-tab-list-wrap .gray-tab-list{position: absolute; display:none; z-index:9;}
	.gray-tab-list-wrap li{width:100%; margin-bottom:0; margin-left:0; height:34px; border:1px solid #ddd; border-bottom:0; box-sizing:border-box;}
	.gray-tab-list-wrap li:last-child{border-bottom:1px solid #ddd;}
	.gray-tab-list-wrap li a{line-height:34px; text-align:left; padding:0 15px; height:100%;}
	/* 리스트형 게시판 :: 리스트 03 */
	.bbs-list-tbl{border-top:1px solid #d7d7d7;}
	.bbs-list-style03 .bbs-list-item,
	.bbs-list-style03 .bbs-list-item a,
	.bbs-list-row-item,
	.bbs-list-row-item .column{display:block;}
	.bbs-list-style03 .bbs-list-item a{width:auto; padding:12px 15px;}
	.bbs-list-row-item .column{clear:both; border-bottom:0; text-align:left; padding:3px 0; font-size:12px;}
	.bbs-list-row-item .column i{top:0px;}
	.bbs-list-row-item .column.bbs-no-data{display:none;}
	.bbs-list-row-item .column.bbs-block{clear:both; width:100%;}
	.bbs-list-row-item .column.bbs-inline{display:inline-block; width:auto; margin-right:4%;}

	.bbs-list-row-item .bbs-subject-txt .category .category-box{width:100px;}
}


/* ************* 홍보고객센터 ************** */
	.ir-page .notice-table .table-sec .tit{width:100%;}
	/* -------- 한울CI -------- */
	@media all and (max-width:1024px){
		/* CI소개 :: 레이아웃 */
		.ci-detail-wrapper .ci-detail-tit,
		.ci-detail-wrapper .ci-detail-container {float:none; width:auto}
		.ci-detail-wrapper .ci-detail-tit{margin-bottom:25px; }
		.ci-detail-wrapper .ci-detail-tit span{display:inline-block; margin-left:10px}
		/* CI 소개 :: 컬러시스템 */
		.ci-logo-color-system ul li dl dt{float:none; margin-bottom:5px; margin-right:0}
		.ci-logo-color-system ul li dl dd{float:none ;width:auto;}

		.pc-br{display:none;}
	}
	@media all and (max-width:800px){
		/* CI소개 :: 레이아웃 */
		.ci-detail-wrapper .ci-detail-tit{font-size:22px}
		/* CI 소개 :: 워드마크 */
		.ci-logo-txt{font-size:15px;}
		.ci-logo-download-con ul{margin:0 -1%;}
		.ci-logo-download-con ul li,
		.ci-logo-download-con ul li:first-child{width:31.33%; margin:0 1%;}
		.ci-logo-download-con ul li a{padding:15px 0;}
		.ci-logo-download-con ul li p{font-size:12px;}
		/* CI 소개 :: 컬러시스템 */
		.ci-logo-color-system .ci-logo-color-system-tit {font-size:15px; }
		.ci-logo-color-system ul li dl dt{width:100%; max-width:120px; height:50px; } 
		.ci-logo-color-system ul li dl dd .color-system-txt {font-size:15px; }
		.ci-logo-color-system ul li dl dd .color-system-txt span {font-size:12px; }
		/* CI 소개 :: 심볼마크 */
		.logo-cannot-con .logo-cannot-con-tit{font-size:15px;}
		.ci-logo-img span{display:block; width:100%;}
		.ci-logo-img span:first-child{margin-bottom:70px;}
		.ci-logo-img span.wid100:first-child{margin-bottom:0px;}
	}
	@media all and (max-width:480px){
		/* CI 소개 :: 심볼마크 */
		.logo-cannot-con ul{margin:0}
		.logo-cannot-con ul li{float:none; width:auto; margin:0 0 5% 0}
	}

	/* -------- 한울BI -------- */
	@media all and (max-width:1024px){
		/* BI소개 :: 레이아웃 */
		.bi-detail-wrapper .bi-detail-tit,
		.bi-detail-wrapper .bi-detail-container {float:none; width:auto}
		.bi-detail-wrapper .bi-detail-tit{margin-bottom:25px; }
		.bi-detail-wrapper .bi-detail-tit span{display:inline-block; margin-left:10px}
		/* BI 소개 :: 컬러시스템 */
		.bi-logo-color-system ul li dl dt{float:none; margin-bottom:5px; margin-right:0; width:100%}
		.bi-logo-color-system ul li dl dd{float:none ;width:100%;}
		

		.pc-br{display:none;}
	}
	@media all and (max-width:800px){
		/* BI소개 :: 레이아웃 */
		.bi-detail-wrapper .bi-detail-tit{font-size:22px}
		/* BI 소개 :: 워드마크 */
		.bi-logo-txt{font-size:15px;}
		.bi-logo-download-con ul{margin:0 -1%;}
		.bi-logo-download-con ul li,
		.bi-logo-download-con ul li:first-child{width:31.33%; margin:0 1%;}
		.bi-logo-download-con ul li a{padding:15px 0;}
		.bi-logo-download-con ul li p{font-size:12px;}
		/* BI 소개 :: 컬러시스템 */
		.bi-logo-color-system .bi-logo-color-system-tit {font-size:15px; }
		.bi-logo-color-system ul li dl dt{width:100%; /*max-width:120px; */height:50px; } 
		.bi-logo-color-system ul li dl dd .color-system-txt {font-size:15px; }
		.bi-logo-color-system ul li dl dd .color-system-txt span {font-size:12px; }
		/* BI 소개 :: 심볼마크 */
		.logo-cannot-con .logo-cannot-con-tit{font-size:15px;}
		.bi-logo-img span{display:block; width:100%;}
		.bi-logo-img span:first-child{margin-bottom:70px;}
		.bi-logo-img span.wid100:first-child{margin-bottom:0px;}
		
	}
	@media all and (max-width:480px){
		/* BI 소개 :: 심볼마크 */
		.logo-cannot-con ul{margin:0}
		.logo-cannot-con ul li{float:none; width:auto; margin:0 0 5% 0}
		.bi-logo-color-system ul li {width: 48%;}
		.bi-logo-color-system ul li.gradient{float:none; width:100%}
		/* BI 소개 :: 컬러바레이션 */
		 .color-variation {width: 80%;}
	}
	/* -------- 자료실 -------- */
	@media all and (max-width:1024px){	 
		.download-list-con-style01 .download-item{display:block; border:1px solid #e4e4e4; margin-bottom:5px; padding:10px 15px;}
		.download-list-con-style01 .download-item .download-tit{float:none; width:auto; color:#222; }
		.download-list-con-style01 .download-item .download-controls{float:none; width:auto; text-align:left; margin-top:10px; padding-top:10px; padding-left:25px; font-size:13px; border-top:1px dotted #eee;}
	}
	@media all and (max-width:480px){
		.download-list-con-style01 .download-item{position:relative;}
		.download-list-con-style01 .download-item .download-tit{padding-right:35px; font-size:13px;}
		.download-list-con-style01 .download-item .download-controls{position:relative; font-size:12px; }
		.download-list-con-style01 .download-item .download-btn{position:absolute; top:-20px; right:-5px; text-align:center; width:35px; border-radius:50%; padding:0; }
		.download-list-con-style01 .download-item .download-btn span{display:none;}
		.download-list-con-style01 .download-item .download-btn i{float:none; line-height:20px; top:-2px; }
	}
	/* -------- 고객문의 -------- */
	@media all and (max-width:800px){
		.kind-fieldset .label-fieldset{width:49%;}
	}
	/* -------- 사업제안 -------- */
	@media all and (max-width:1024px){
		.pc-br{display:none;}
	}
	@media all and (max-width:800px){
		.proposal-img .proposal-icon dd{font-size:15px;}
		.proposal-img .hanul-logo .txt{font-size:14px;}
		.suggestion-tit{font-size:20px;}

		.proposal-img{padding-bottom:40px; margin-bottom:40px;}
		.proposal-img:before{display:none;}
		.proposal-img .proposal-icon{margin:0 8.09% 30px !important;}
		.proposal-img .proposal-icon .icon{width:86.1px; height:86.1px; background-size:41.3px;}
		.proposal-img .proposal-icon .icon:before{width:105px; height:105px;}
		.proposal-img .hanul-logo img{width:168px;}
	}


/* ******* 에디터 표 스타일 ********* */
@media all and (max-width:800px){
	.editor .solution-box .solution-list-container{display:block;}
	.editor .solution-box .solution-list-container > li, .editor .solution-box .solution-list-container.menu3 > li{display:block; width:100%; border-left:1px solid #ddd; border-bottom:0;}
	.editor .solution-box .solution-list-container > li:last-child, .solution-list-container.menu3 > li:last-child{border-bottom:1px solid #ddd;}
	.editor .solution-box .solution-list-container > li dt{padding:1% 0; display:block;}
	.editor .solution-box .solution-list-container > li dt h4{display:block;}
	.editor .solution-box .solution-list-container > li dd{padding:3%;}
	.editor .solution-box .solution-list-container > li dd p{line-height:24px; margin-bottom:2%;}
	.editor .solution-box .solution-list-container > li dd p:last-child{margin-bottom:0;}
}
/* ******* 안전보건경영 ********* */
@media all and (max-width:1024px){
	.system-gray-box{display: flex; flex-wrap:wrap; width:100%; padding:30px 15px;}
	.system-gray-box .img-box{margin-bottom:40px;}
	.system-gray-box .txt-con{position: relative; width:100% !important; margin-left:0 !important; margin-top:0 !important; transform:translate(0,0); top:auto; left:auto; margin-bottom:30px;}
	.system-gray-box .txt-con:last-child{margin-bottom:0;}


	.system-gray-box .txt-con{min-height:50px; padding:0 20%;}
	.system-gray-box .txt-con dt{position: absolute; top:-4px; left:30%; width:150px;}
	.system-gray-box .txt-con dt strong{position: absolute; top:0; left:0;}
	.system-gray-box .txt-con dt span{display: inline-block; padding-left:35px; margin-top:6px;}
	.system-gray-box .txt-con.txt-con-03 dt{top:auto; left:30%;}
	.system-gray-box .txt-con dd{margin-left:250px;}
	.system-gray-box .txt-con.txt-con-03 dd{margin-left:250px;}
}
@media all and (max-width:800px){
	.system-tit{font-size:20px; margin-bottom:0;}
	.policy-con-box .system-txt-box .txt, .system-gray-box .txt-con dd span{font-size:15px}
	.policy-con-box .system-txt-box dl .num{font-size:12px;}
	.system-gray-box .txt-con dt span{font-size:18px}
	.system-gray-box .txt-con dt strong{font-size:20px;}

	.system-top-box{margin-bottom:15px;}
	.system-gray-box:before{width:83.5px; height:83px; background-size:cover; left:15px;}
	.policy-con-box{display: block; padding-bottom:20px; margin-bottom:20px;}
	.policy-con-box .system-tit{display: block; width:100%;}
	.policy-con-box .system-txt-box{display: block; width:100%;}
	.policy-con-box .system-txt-box > .txt{margin-bottom:10px;}
	.policy-con-box .system-txt-box dl{margin-bottom:10px;}
	.policy-con-box .system-txt-box dl .num{width:25px; height:25px; line-height:25px;}
	.policy-con-box .system-txt-box dl dd{padding-left:30px;}

	.system-gray-box .txt-con{padding:0 15%; margin-bottom:20px;}
	.system-gray-box .txt-con dt{left:25%;}
	.system-gray-box .txt-con.txt-con-03 dt{left:25%;}

	.system-gray-box .txt-con dd span:before{top:10px;}
}
@media all and (max-width:640px){
	.system-gray-box .img-box{margin-bottom:30px;}
	.system-gray-box .txt-con{padding:0;}
	.system-gray-box .txt-con dt{left:0% !important; width:130px;}
	.system-gray-box .txt-con dd{margin-left:150px !important;}
}

/********** 24-07-19 인사말 유지보수 **********/
@media all and (max-width:800px){
	.greeting-txt .txt{font-size:14px; margin-bottom:15px;}
	.greeting-txt .greeting-ceo{font-size:14px;}
	.greeting-txt .greeting-sign{margin-left:30px;}
}
@media all and (max-width:640px){
	.greeting-bottom{display: block; padding:0;}
	.greeting-bottom .greeting-ceo-img{width:100%; margin-right:auto; max-width:212px; margin:0 auto 30px;}
	.greeting-bottom .greeting-txt{width:100%;}

}