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



/* ******************  서브공통 ********************** */
@media all and (max-width:800px){
	/* -------- 공통 탭  -------- */
	.sub-cm-tab-container ul.menu3 {margin-right:-4px}
}
@media all and (max-width:480px){
	/* -------- 공통 탭  -------- */
	.sub-cm-tab-container{height:auto;border:0;}
	.sub-cm-tab-container ul.menu3 {margin-right:-3px}
	.sub-cm-tab-container ul li:first-child{margin-left:0;}
	.sub-cm-tab-container ul.menu3 li{width:40%; margin-left:-1px;}
	.sub-cm-tab-container ul li a{font-size: 1.1rem;letter-spacing:-1px;}
}

/* ******************  회사소개 ********************** */
@media all and (max-width:1600px) {

	/* -------- 브랜드 -------- */
	.color-system-box-2 {
		width: 90%;
	}
}

@media all and (max-width:1440px) {
	.ceo-greeting-txt .ceo-txt{font-size:18px;}
	.ceo-photo-con{
		width:40%;
	}
	.ceo-greeting-con{
		width:60%;
	}

	/* -------- 브랜드 -------- */
	.color-variation-container>img {
		max-width: 313px;
	}
	.color-system-box-2 {
		grid-template-columns:344px 344px;
		height:600px;
	}
	.blank {
		width:100%;
		height:630px;
		margin-bottom:100px;
	}
}
@media all and (max-width:1220px){
    /* -------- 인사말 -------- */
	.ceo-greeting-con, .ceo-photo-con{width:50%;}
    .ceo-photo-info span{font-size:16px;}
    .ceo-photo-info strong{font-size:20px;}
    .ceo-txt-top{font-size:20px;}
    .ceo-greeting-txt .ceo-txt, .lab-para{font-size: 15px;line-height: 24px;text-align:left;}
	.ceo-photo {
		width: 300px;
		height: 300px;
		margin: 50px 0 0 22.5%;
	}
	.ceo-photo-info {
		padding-top: 50px;
		padding-left: 12.5%;
	}

	/* -------- 브랜드 -------- */
	.color-variation-container>img {
		max-width: 30%;
	}
}

@media all and (max-width:975px){
	/* -------- 브랜드 -------- */
	.color-system-box-1 {
		background-image:unset;
		flex-direction: column;
		align-items: center;
		row-gap:40px;
	}

	.color-system-box-1>span>.system-box-1-color-name {
        width: 40%;
		margin-top:unset;
		height: 140px;
		background-color:#003087;
		border-radius: 20px;
		padding-left: 30px;
        padding-top: 30px;
        box-sizing: border-box;
	}

	.color-system-box-1>span:last-child>.system-box-1-color-name {
		background-color:#00AD1D;
	}

	.color-system-box-1>span>.system-box-1-color {
		position:absolute;
		margin-left: 30px;
        margin-top: 50px;
	}

	.color-system-box-1>span {
		width:100%;
		display:flex;
		flex-direction:unset;
		position:relative;
	}

	.color-system-box-1>span>div {
		flex: 1;
        margin-left: 30px;
		margin-top: 0;
        height: 140px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
	}

	.color-system-box-2 {
		gap:40px;
		width: 100%;
		height: 550px;
		position:unset;
		transform:unset;
		grid-template-columns: 1fr 1fr;
        border: none;
        border-top: 2px solid #e2e2e2;
        border-radius: 0;
	}

	.blank {
		display:none;
	}
}

@media all and (max-width:800px){
    /* -------- 인사말 -------- */
	.ceo-photo-con, .ceo-greeting-txt
	 {
		float: inherit;
		width: 100%;
		padding:0;
	}

	.content-tit-right { text-align:unset; }
	.ceo-txt-top { padding-left:unset !important; margin-top:20px; }

	.ceo-photo{
		width:200px;
		height:200px;
		margin:0 auto;
	}
	.ceo-photo-con .ceo-photo-info {
		text-align: center;
		padding-top: 20px;
		padding-left:0;
	}
	.ceo-greeting-con, .ceo-greeting-con-en{
		width:100%;
		text-align:left;
	}

	/* -------- 브랜드 -------- */
	.color-variation-container {
		flex-direction:column;
	}

	.color-variation-container>img {
		max-width: 100%;
	}

	.color-system-box-1>span>.system-box-1-color-name {
		padding-left:0;
		display:flex;
		justify-content:center;
		width: 300px;
		height: 110px;
		padding-top: 20px;
		border-radius:15px;
		font-size:35px;
	}

	.color-system-box-1>span>.system-box-1-color {
		margin-left:0;
		margin-top: 67px;
		font-size:17px;
	}

	.color-system-box-1>span {
		flex-direction: column;
	}

	.color-system-box-1>span>div {
		margin-left:0;
	}

	.color-system-box-1>span>div>span {
		font-size:23px;
	}

	.color-system-box-1>span>div>p {
		margin-top:0;
		font-size: 16px;
	}

	.color-system-box-2 {
         grid-template-columns: 1fr;
		 gap: 25px;
		 height: 690px;
	}

	.color-system-box-2>div>span {
		font-size: 17px;
		line-height: 20px;
		padding: 17px;
		max-width:200px;
	}

	.color-system-box-2>div>p {
		font-size: 14px;
		line-height: 20px;
	}

	.color-system-box-2>div {
		height: 100px;
		justify-content: center;
	}
}
 
@media all and (max-width:480px){
	  /* -------- 인사말 -------- */
    .ceo-photo-info span,
    .ceo-photo-info strong{
        display:block; 
        margin-left:0;
        line-height:30px;
    }
    .business-detail-box .detail-tit strong{font-size:20px;}
    .org-sec{padding:15px;}
    .mb-org{display:inline-block;}
    .pc-org{display:none;}
}

/* -------- 회사소개 :: 경영이념 -------- */
@media all and ( max-width:800px ){
	.philosophy-list {margin-top: 35px;}
	.philosophy-imgwrap{
		width:100%;
	}
	.philosophy-list li {width: 100%; margin-top: 15px; margin-left: 0; padding: 17px 3.4%;}
	.philosophy-tit {font-size: 16px; margin-bottom: 10px;}
	.philosophy-list li .philosophy-para {font-size: 13px;}
	.philosophy-para:before {width: 4px; height: 4px;}
}

@media all and ( max-width:480px ){
	.philosophy-list {margin-top: 20px;}
}

/* -------- 회사소개 :: 연혁 -------- */
@media all and ( max-width:1220px ){
	.history-year-list{margin-bottom:9%;}
    .history-year-list > li{margin:0 4%;}
    .history-list-box > ul li h4{font-size:25px;}
    .history-list-box > ul li h4:after{left:90px; width:40px;}
    .history-list-box > ul li dl dt strong{font-size:20px;}
    .history-list-box > ul li dl dd p strong,.history-list-box > ul li dl dd p span{font-size:13px}
}
@media all and ( max-width:800px ){
    .history-con-top-list ul{text-align:center;}
    .history-con-top-list ul li{float:none; display:inline-block; width:31.5%;	 margin:0.5% !important;}
	.history-year-list > li > a {font-size: 14px;}
    #historyCon{padding-bottom:30px;margin-top:30px;}
	.history-list-box > ul li dl dt strong {font-size: 14px;}
    .history-list-box > ul li h4{float:none; width:100%; font-size: 17px;}
    .history-list-box > ul li h4:after{position:static; display:block; margin:10px 0 20px;}
    .history-list-box > ul li .history-list-con {float:none; width:100%;max-height:380px;}
    .history-list-box > ul li dl dt {width:25%; text-indent:10px;}
    .history-list-box > ul li dl dd {width:69%;}
    .history-list-box > ul li dl dd p strong {width:15%;}
}

/* -------- 회사소개 :: 찾아오시는길 -------- */
@media all and (max-width:1220px){
	.mapWrapper {height: 300px;box-sizing:border-box;}
	.map-tbl-con:first-of-type {margin-bottom: 50px;}
}
@media all and (max-width:800px){
	.map-tbl td:first-child:before {width: 4px; height: 4px;}
	.map-tbl-con .notice-tit .map-btn {float: none; margin: 10px 0 5px;}
	.map-tbl-con .notice-tit .map-btn a {width: 115px; line-height: 35px;}
	.map-tbl-con .notice-tit .map-btn a i {margin-left: 10px; font-size: 16px}
	.map-tbl tr {}
	.map-tbl td {font-size: 13px;}
	.map-tbl-con .notice-tit .map-btn a {font-size: 13px;}

}
@media all and (max-width:509px){
	.map-tbl tr.first-row td {vertical-align: top;}
}

/* ******************   사업분야  ********************** */
@media all and (max-width:1220px){
	/* -------- 제품소개 -------- */
	.sub-cm-tab-container ul li{ min-width:167px; }

	.business-prd-list-con{margin:0 -1%;}
	.business-prd-list-con li{width:31.33%; margin:1%;}
	.business{
		padding-top:30px;
	}
	.businessCon1 #content, .businessCon2 #content, .businessCon3 #content, .businessCon4 #content, .welfare-con #content {
		position: relative;
		padding-top: 100px;
	}
	.sub-cm-tab-container {
		position: absolute;
		width: 100%;
		top: 0;
		left: 0;
	}
	.sub-cm-tab-container ul li {
		width: 25%;
		float:left;
		margin: 0;
	}
	.sub-cm-tab-container ul li a{
		/*
		border-right:0;    
			*/
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
		padding:0 10px;
	}

	/* 전기차 충전기 */
	.ev-flex { flex-direction:column-reverse; align-items:unset; }
	.ev-flex>.fuel-cell-table-wrap { width:100%; margin-right:0; }
	.ev-flex>div:nth-child(2)>img { margin-top:50px; margin-bottom:20px; max-width:300px; }
}

@media all and (max-width:800px) {
	/* 전기차 충전기 */
	.ev-flex .fuel-cell-table-wrap .fuel-cell-table .fuel-cell-tbl { width:100%; }

	.ev-certificate-wrap { display:grid; grid-template-columns:1fr 1fr; }
	.ev-certificate { margin:0px 27px; margin-bottom:20px; }
	.ev-certificate:nth-child(2n-1) { margin-left:0px; }
	.ev-certificate:nth-child(2n) { margin-right:0; }
	.ev-certificate>span { height:20px; }
	.ev-sample-wrap-1 { flex-direction:column; margin-bottom:40px; }
	.ev-sample-wrap-1>div { width:100%; }
	.ev-sample-wrap-1>div>span { width:50%; margin-bottom:20px; }

	.ev-sample-wrap-2 { display:grid; grid-template-columns:1fr 1fr; gap: 30px; }
	.ev-sample-wrap-2>span { margin:0; }
}

@media all and ( max-width:930px ){
	.ups-process-wrap { grid-template-columns:1fr 1fr; grid-row-gap:40px; }
}

@media all and ( max-width:1060px ){
	.ups-process>div { height:235px; }
	.ups-process>div>span { font-size:13px; }
}

@media all and ( max-width:500px ){
	.ups-process-wrap { grid-template-columns:1fr; }
	.ups-process>div { height:fit-content; }
}

@media all and ( max-width:1440px ){
	.ev-sample-wrap { flex-direction:column; }
	.ev-sample-wrap-1 { display:flex; column-gap:30px; }
	.ev-sample-wrap-2 { margin-left:0; }

	.ups-process>svg:nth-child(1) { width:100%; }
	.ups-process>p:nth-child(2) { margin-left:-80px; }
}

/* UPS */
@media all and (max-width:1220px){
	.ups-sample-model-wrap { grid-column-gap:20px; }
}

@media all and (max-width:800px){
	.ups-sample-model-wrap { grid-template-columns:1fr 1fr; grid-row-gap:20px; }
	.ups-logo-wrap { grid-template-columns:1fr 1fr 1fr; gap:20px; }
}

@media all and (max-width:480px){
	.ups-logo-wrap>span { height:60px; }
}




@media all and (max-width:480px){
	/* -------- 제품설명 -------- */
	.business-detail-box .detail-tit strong:after{width:5px; height:5px; margin-left:5px;}
	/* 고효율 에너지 */
	.hign-energy-term dt{margin-bottom:5px;font-size:18px;}
	/* -------- 제품소개 -------- */
	.business-prd-list-con li{width:48%;;}
	.business-detail-box .detail-txt, .detail-term-orange, .hign-energy-term dd, .businessText h4 span {
		font-size: 16px;
	}
	.business #contentInfoCon{padding:0;}
	.businessList li {
		width: 100%;
		margin: 20px 0%;
	}
	.businessImg{
		height:200px;
	}
	.businessText h4{
		font-size:20px;
	}
	.businessText{
		height:105px;
	}
	.businessText p {
		margin-top: 30px;
	}
}

/* ******************   연구개발  ********************** */
@media all and (max-width:800px){
	/* -------- 기술현황 -------- */
	.tech-list-con > ul li{width:31.33%;}

    /* -------- 인증서 -------- */
	.property-list-con > ul li{width:31.33%;}
    .property-gallery-tit{height:30px; line-height:30px; font-size:15px; padding-top:10px;} 

}
@media all and (max-width:480px){
	/* -------- 기술현황 -------- */
	.tech-list-con > ul li{width:31.33%;}
	.gallery-tit-box .gallery-tit{margin-bottom:0px; font-size:13px;}
	.gallery-tit-box .gallery-date{font-size:11px;}

    /* -------- 인증서 -------- */
	.property-list-con > ul li{width:48%;}
}

/* -------- 연구개발 :: 연구소 소개 -------- */
@media all and ( max-width:1440px ){
	.lab-img-wrap img {
		width: 100%;
	}
	.lab-para{
		font-size:18px;
	}
}
@media all and ( max-width:1220px ){
	.lab-img-wrap img {width: 95%;}
}
@media all and ( max-width:800px ){
	.lab-img-wrap img {width: 95%;}
	.lab-img-wrap {margin-top: 60px;}
}
@media all and ( max-width:480px ){
	.lab-para{margin-top: 20px;}
	.lab-img-wrap {margin-top: 40px;}
}


/* ******************   채용정보  ********************** */

/* -------- 채용정보 :: 인재상 -------- */
@media all and (max-width:1220px) {
	li.welfare-con-inner{width: 48%; margin-top: 9px;}
	/* 채용정보 :: 복리후생*/
	ul.welfare-con{margin-top: 0;}
	.welfare-con-inner .welfare-txt-group .welfare-tit{font-size:15px;}
	.welfare-con-inner .welfare-txt-group .welfare-txt{font-size: 13px; line-height:20px;}
	/* 인재상 */
	.welfare-info-group-inner{padding: 15px 0;}
	.welfare-info-icon img{height: 70%;}
	.welfare-info-txt .tit{font-size: 15px;}
	.welfare-info-txt .txt{padding-top: 10px; font-size: 13px; line-height: 1.75em;}
}
@media all and (max-width:480px){
	/* 채용정보 :: 복리후생*/
	li.welfare-con-inner{width: 100%; height: 146px; margin: 9px 0 0; overflow:hidden; float: none; height:auto; }
	.welfare-con-inner .welfare-icon{width: 30%; height: 100%; padding: 0; margin: 0; float: left; text-align: center;}
	.welfare-con-inner .welfare-icon img{width: 70px; display: inline-block; margin-top:25px;}
	.welfare-con-inner .welfare-txt-group{width: 70%; text-align: left; float: left; padding: 15px 0;}
	.welfare-con-inner .welfare-txt-group .welfare-txt{min-height:40px;}
	/* 인재상 */
	.welfare-info-icon{width: 30%;}
	.welfare-info-icon img{height: 55%;}
}

/* -------- 채용정보 :: 채용공고 -------- */
@media all and (max-width:800px){
	.notice-tit {margin-bottom: 11px;}
	.notice-tit>h4 {font-size: 14px; float: none; line-height: 20px;}
	.notice-para.mgt {display: block; margin-top: 5px;}
	.resume-down {font-size: 12px;}
	.notice-txt-wrap {display: block;}
	.notice-tit>h4:before {width: 3px; height: 16px;}
	.notice-para {font-size: 13px;}
	.txt-bx { font-size: 13px;}
	.txt-bx.e-mail {margin-top: 10px; margin-bottom: 5px;}
	.notice-bx.float-l .notice-para {float: none;}
	.notice-bx.float-l .notice-tit {float: none;}
	.recurit-tit {font-size: 14px;}
	.recurit-tit:before {width: 3px; height: 16px;}
}


/* ******************   고객센터  ********************** */
@media all and (max-width:800px){
	/* -------- 고객센터 :: 고객문의  -------- */
	p.contact-con-tit{font-size: 17px;}
	.contact-con-tit:after{width: 4px;height: 4px;right: -10px;}
	.contact-01-con .contact-con-txt01 {margin: 11px 0 15px;}
	.contact-01-con .contact-con-txt01 p{font-size: 13px; line-height: 20px;}
	.contact-01-con .contact-con-txt01 p:before{width: 4px;height: 4px; top: 8px;}
	.contact-02-con .contact-con-bnr {margin: 15px 0 20px;}
	.contact-03-con .contact-con-txt02 .contact-con-txt-tit{font-size: 14px; margin-top: 15px;}
	.contact-03-con .contact-con-txt02 p{font-size: 13px; line-height: 20px;}
	.contact-03-con .contact-con-txt02 p.txt-line:before{top: 9.5px;}
    #service{margin:30px 5px;}
    #service ul {margin:0;}
    #service li, #service li:nth-child(1){width:50%;height:220px;float: left;}
    #service li:nth-child(2){display:none;}
    #service li a:hover .service-tit p {display:inline-block; font-size:26px;  -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); -ms-transform: translateY(-100%); -o-transform: translateY(-100%); transform: translateY(-100%);} 
    #service li:nth-child(1) .service-tit{left:8%;}
    .service-tit p {font-size:23px; }
    .service-tit label {width:130px; height:35px; line-height: 35px; }
}
}
@media all and (max-width:1220px){
    #service {padding:65px 15px;}
}
@media all and (max-width:480px){
	#service{margin:20px 0;}
    #service li, #service li:nth-child(1){float:none; width:100%;height: 150px;float: left;border:0; border-bottom: 6px solid #fff;}
    #service li:nth-child(2n){margin-left: 0px;}
    #service li a:hover .service-tit p {font-size:20px;    transform: translateY(-60%);}
    .service-tit p {font-size:17px; }
    .service-tit label {font-size:13px;}
    #service li a:hover .service-tit label{transform: translateY(-50%);}
}





/* ******************  keb 191023 ********************** */
/* ***************사업분야***************** */
/* ------------PMS Portal------------ */
@media all and (max-width:1440px){
	.businessWrap { width:1000px; }
	.businessList-arrow[data-direction="left"] { margin-left:-80px; }
	.businessList-arrow[data-direction="right"] { margin-right:-80px; }
	.businessList li { width: 313px; }
}

@media all and (max-width:1220px){
	.businessList-arrow { display:none; }
	.businessWrap { padding:0; width: 100%; }
	.businessList { width:100% !important; margin-left:0 !important; }
	.businessList li { width: calc(50% - 20px); margin: 20px 20px; }
	.businessList li:nth-child(2n) { margin-right:0; }
	.businessList li:nth-child(2n+1) { margin-left:0; }
	#businessContent { padding-top: 30px; margin-top: 0; }
	.business-list-con { padding-top:80px; }
}

@media all and (max-width:800px){	
	.businessList li {
		width: calc(100%);
		margin: 20px 0px;
	}
}
@media all and (max-width:480px){	
	.pms-img-box .pms-img-box-inner .pms-box-pc,
	.pms-img-box .pms-img-box-inner .pms-box-mobile{float:none;width:100%}
	.pms-img-box .pms-img-box-inner .pms-box-tit{font-size:16px;height:45px;line-height:45px;}
	.pms-img-box .pms-img-box-inner .pms-box-img{padding:43px 10% 24.5px;}
	.pms-img-box .pms-img-box-inner .pms-box-pc .pms-box-img{border-right:0}
}

/* ------------연료전지시스템------------ */
@media all and (max-width:800px){
	.fuel-cell-table-wrap .fuel-cell-table .fuel-cell-tbl {max-width:none;width:800px; table-layout:fixed;}
	.fuel-cell-sub .fuel-cell-sub-txt span:before{top:12px;}
}
@media all and (max-width:480px){
	.fuel-cell-sub{padding-top:22px}
	.fuel-cell-sub .fuel-cell-sub-tit{padding-bottom:3px}
	.fuel-cell-sub .fuel-cell-sub-txt span{padding-left:7px}
	.fuel-cell-sub .fuel-cell-sub-txt span:before{width:3px;height:3px;top:9px;}
	.fuel-cell-table-wrap{padding-top:8px}
	.fuel-cell-table-wrap .fuel-cell-table .fuel-cell-tbl tr td{height:47px;}
	.fuel-cell-table-wrap .fuel-cell-table-bottom{padding-bottom:6px}
}

/* ------------태양광 발전사업------------ */
@media all and (max-width:640px){	
	.sunlight-develop-con{margin:0}
	.sunlight-develop-con .sunlight-develop-inner{float:none;width:100%;margin:0;}
}
@media all and (max-width:480px){	
	.solution-top-img{margin:28px 0 41.5px}
	.solution-bottom-img p{padding-top:13px;}
	.solution-bottom-img-wrap{margin-top:17px}
	.solution-bottom-img-wrap .solution-bottom-img{width:100%}
	.solution-bottom-img-wrap .solution-bottom-img.solution-left-img,
	.solution-bottom-img-wrap .solution-bottom-img.solution-right-img{float:none}
	.solution-bottom-img-wrap .solution-bottom-img.solution-left-img{margin-bottom:20px}
}