@charset "utf-8";

/* 가족친화인증 : 인증제도안내  */
.effect-wrap{text-align:center}
.effect-wrap > img{margin:40px auto; max-width:100%}
.cert-effect{display:flex; flex-wrap:wrap; justify-content:space-between; width:100%; max-width:1200px; margin:0 auto}
.cert-effect > div{width:calc(100%/3);overflow:hidden;border-right:1px solid #ddd;padding:0 20px}
.cert-effect > div:first-child{border-left:1px solid #ddd}
.cert-effect > div .tit{text-align:center; font-size:1.3em;color:#222;background:#eb8509; line-height:50px; color:#fff}
.cert-effect > div:nth-child(2) .tit{background:#6bbb3c}
.cert-effect > div:nth-child(3) .tit{background:#ed3699}
.cert-effect > div .tit img{display:block; margin:0 auto}
.cert-effect > div ul{position:relative;padding:20px}
.cert-effect > div li{padding-left:12px; position:relative;text-align:left;}
.cert-effect > div li:before{content:''; position:absolute; top:10px;width:3px; height:3px; background:rgba(0,0,0,.2); left:0}
.effect-wrap .form-btn{text-align:center}

/* 가족친화인증 : 인증제도안내 : 지도*/
.company-map{display:flex;flex-wrap:wrap;border:1px solid #ddd;padding:50px; text-align:center}
.company-map > div.map-svg{width:70%;}
.company-map > div.map-svg > div{position:relative;width:100%; max-width:700px;margin:0 auto;}
.company-map svg > g{cursor:pointer}
.company-map svg .map-area{fill:#f6f6f6;stroke:#666;stroke-miterlimit:10;stroke-width:0.5px;}
.company-map svg .active .map-area{fill:#5472d3;}
.company-map svg .txt{isolation:isolate;font-size:1.1em;fill:#222;}
.company-map svg .active .txt{fill:#fff}
.company-map svg .box1{fill:#cc8b00;}
.company-map svg .num-txt{font-size:.8em;fill:#fff;}
.company-map svg .box2{fill:#6bbb3c}
.company-map svg .box3{fill:#ed3699;}
.company-map svg .box4{fill:#555;}
.company-map > div.map-status{position:relative;width:calc(30% - 10px);background:#f6f6f6;padding:30px;margin-left:10px}
.company-map > div.map-status span{display:inline-block;color:#222;margin:0 5px}
.company-map > div.map-status span em{display:inline-block; width:18px; height:18px; background:#cc8b00;border-radius:3px;vertical-align:middle;margin-right:5px}
.company-map > div.map-status span em.color2{ background:#6bbb3c;}
.company-map > div.map-status span em.color3{ background:#ed3699;}
.company-map > div.map-status span em.color4{ background:#555;}
.company-map > div.map-status .total-num{position:absolute;width:100%;left:0;padding:0 20px; top:50%;text-align:center;text-align:center;font-family: 'GongGothicMedium'; color:#222;-webkit-transform: translateY(-50%); -moz-transform: translateY(-50%);-ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%);}
.company-map > div.map-status .total-num span{display:block; text-align:center; font-size:40px; color:#222}
.company-map > div.map-status .total-num span strong{font-family: 'GongGothicBold';color:#eb8509}
.company-map > div.map-status img{display:block;margin:0 auto 15px auto}

.cert-company{display:flex; flex-wrap:wrap; justify-content:space-between}
.cert-company li{overflow:hidden;padding:40px 0; display:table;border-bottom:1px dashed #ddd; width:calc(50% - 15px)}
.cert-company li >  div{display:table-cell;vertical-align:middle}
.cert-company li .logo-img{position:relative;width:300px;height:150px;border:1px solid #ddd}
.cert-company li .logo-img img{position:absolute;width:100%;left:0; top:50%;-webkit-transform: translateY(-50%); -moz-transform: translateY(-50%);-ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); }
.cert-company li .con{width:calc(100% - 300px);padding-left:30px}
.cert-company li .con .tit{font-size:22px;font-weight:600; color:#222;}
.cert-company li .con dl{display:flex; flex-wrap:wrap}
.cert-company li .con dt{position:relative;width:80px;font-weight:500;margin-top:10px;margin-top:10px}
.cert-company li .con dt:after{content:''; position:absolute; width:1px; height:12px;background:#ddd; right:10px; top:50%; margin-top:-5px}
.cert-company li .con dd{width:calc(100% - 80px);margin-top:10px}
.part-status > div.map-svg{width:60%;margin:0 auto}
.part-status svg .off{fill:#F2F2F2;stroke:#666;stroke-miterlimit:10;}
.part-status svg .part{font-size:1em}
.part-status svg circle{fill:#FFFFFF;}
.part-status svg .num{font-size:1em; font-weight:600; fill:#8063ff}
.part-status svg .on {fill:#c6c1e5;stroke:#666;}
.total-status{margin-top:20px; padding-top:20px;border-top:1px dashed #ddd; font-weight:300;}
.total-status > div{line-height:30px; color:#666; font-weight:300}
.total-status strong{font-weight:700; color:#222}


/* 가족친화인증 : 가족친화컨설팅 신청 */
.consulting-type{padding:20px 30px; border-radius:15px;margin-top:10px;background:#f6f6f6;width:100% }
.consulting-type li{position:relative; background:url(/nanum/site/builder/dir/main/img/menu2585/ico-check.png) no-repeat 0px 2px; background-size:20px;margin:5px 0}
.consulting-type li span{display:inline-block;padding-left:30px}
.consulting-step{display:flex; flex-wrap:wrap;justify-content:space-between;margin:10px 0}
.consulting-step li{position:relative;width:calc(100%/3 - 50px); border:3px solid #ddd; border-radius:20px; padding:20px}
.consulting-step li{text-align:center}
.consulting-step li > div{display:inline-block;padding-left:20px; font-size:20px;vertical-align:middle}
.consulting-step li > div.img{width:100px;padding-left:0}
.consulting-step li > div span{display:block; color:#6bbb3c; font-weight:600; font-size:17px;text-align:left}
.consulting-step li:before{content:''; position:absolute; width:40px; height:40px;top:50%; margin-top:-20px; right:-60px;background:#ddd; border-radius:100%}
.consulting-step li:after{content:'';position:absolute; width:40px; height:40px; top:50%; margin-top:-20px;right:-60px;background:url(/nanum/site/builder/dir/main/img/menu2585/step-arrow.png) no-repeat 0 0;background-size:cover}
.consulting-step li:last-child:before,.consulting-step li:last-child:after{display:none}

.consulting-box{width:100%; background:#f6f6f6; padding:30px; border-radius:10px; margin-top:10px}
.consulting-box dt{background:url(/nanum/site/builder/dir/main/img/menu2585/ico-check.png) no-repeat 0px 2px; background-size:20px;padding-left:30px; font-size:18px; color:#222; font-weight:500; margin-bottom:5px}
.consulting-box dd{padding-left:30px}
.consulting-box dl:last-child{margin-top:20px}

.mem-card{display:flex; flex-wrap:wrap;justify-content:space-between;margin-top:30px}
.mem-card .img{width:320px}
.mem-card .con{width:calc(100% - 350px)}
.mem-card .con .tit{font-size:1.2em; color:#000; font-weight:600}

@media(max-width:1700px){
	/* 가족친화인증 : 인증제도안내 : 지도*/
	.company-map > div.map-status .company-color{display:flex;flex-wrap:wrap; justify-content:space-between}
	.company-map > div.map-status .company-color > span{display:inline-block;width:calc(50% - 10px);text-align:left;}
	.part-status > div.map-svg{width:70%}
}


@media(max-width:1500px){
	
	/* 가족친화인증 : 가족친화 직장교육 신청*/
	.consulting-step li > div{padding-left:0px;font-size:17px}
	.consulting-step li > div.img{width:80px;padding-left:0}
	.consulting-step li > div.img img{max-width:100%}

}

@media(max-width:1200px){

/* 가족친화인증 : 인증제도안내 : 지도*/
.company-map{padding:30px}
.company-map > div.map-status .company-color > span{width:100%}
.company-map > div.map-status .total-num span{font-size:35px}
.part-status > div.map-svg{width:80%}

/*가족친화인증기업관 : 가족친화인증기업 소개*/
.company-list li{width:calc(100%/3 - 10px); margin-right:15px}
.company-list li:nth-child(4n){margin-right:15px}
.company-list li:nth-child(3n){margin-right:0}
.company-list li:nth-child(n+4){margin-top:15px}

.consulting-step li{padding:15px}
.consulting-step li > div{font-size:17px; width:100%; text-align:center;padding:0}
.consulting-step li > div.img{display:block; margin:0 auto;width:80px}
.consulting-step li > div.img img{width:100%}
.consulting-step li > div span{text-align:center}

}
@media(max-width:1024px){

/* 가족친화인증 : 인증제도안내  */
.cert-effect > div .tit{font-size:17px}
.cert-effect > div ul{padding:20px 0; font-size:15px}

.company-list ul{justify-content:space-between}
.company-list li{width:calc(100%/2 - 10px); margin-right:0}
.company-list li:nth-child(3n),.company-list li:nth-child(4n){margin-right:0}
.company-list li:nth-child(n+3){margin-top:20px}

/* 가족친화인증 : 인증제도안내 :지도  */
.company-map > div.map-svg{width:100%;order:2; margin-top:30px}
.company-map > div.map-status{width:100%; margin-left:0;padding:30px 30px 50px 30px}
.company-map > div.map-status .company-color {display:inline-block;text-align:left;font-size:14px; padding-bottom:10px;}
.company-map > div.map-status .company-color > span{display:inline-block; width:auto}
.company-map > div.map-status .total-num{position:relative;padding:0}
.company-map > div.map-status .total-num p{display:inline-block;vertical-align:middle}
.company-map > div.map-status .total-num img{margin-bottom:0;}
.company-map > div.map-status .total-num p:last-child{text-align:left;padding-left:15px}
.company-map > div.map-status .total-num span{text-align:left;margin:0}
.part-status > div.map-svg{width:90%;}
.total-status > div{display:inline-block; padding:0 30px}

/* 가족친화인증 : 가족친화컨설팅, 직장교육  */
.consulting-type li{width:100%}
.consulting-step li > div{font-size:16px; width:100%;text-align:center; padding:0}
.consulting-step li > div.img{width:100%}
.consulting-step li > div.img img{max-width:60px}


}

@media(max-width:850px){

/* 가족친화인증 : 인증제도안내  */
.effect-wrap > img{margin:20px 0}
.cert-effect > div{width:100%; padding:0;border:none }
.cert-effect > div:first-child{border-left:none}
.cert-effect > div .tit{font-size:15px}
.cert-effect > div ul{padding:20px 0; font-size:12px}

/* 가족친화인증 : 인증제도안내 : 지도  */
.company-map > div.map-status{padding:20px 10px 40px 10px}
.company-map > div.map-status .company-color{font-size:12px}
.company-map > div.map-status .total-num img{max-width:60px}
.company-map > div.map-status .total-num p:last-child{font-size:12px}
.company-map > div.map-status .total-num span{font-size:24px}
.company-num {font-size:11px}
.company-num span{width:15px;height:15px; font-size:7px; line-height:15px;}
.company-map{padding:0; border:0; margin:20px 0}
.company-map svg .txt{font-size:1.25em}
.company-map svg .num-txt{font-size:1em;fill:#fff;}
.part-status{margin:0}
.part-status > div.map-svg{width:100%}
.part-status svg .part{font-size:1.6em}
.part-status svg .num{font-size:1.5em}
.total-status > div{display:inline-block; padding:0; width:100%}

/* 가족친화인증 : 가족친화컨설팅, 직장교육  */
.edu-type,.consulting-type{padding:20px}
.consulting-type li{background-size:15px;}
.consulting-type li span{ padding-left:20px}
.consulting-step li{width:100%;}
.consulting-step li:nth-child(n+2){margin-top:40px}
.consulting-step li:after{width:20px;height:20px;right:auto; left:50%; margin-left:-15px;top:auto; bottom:-33px; transform:rotate(90deg)}
.consulting-step li:before{width:20px; height:20px;right:auto; left:50%; margin-left:-15px;top:auto; bottom:-33px}
.consulting-step li > div{ font-size:14px}
.consulting-step li > div span{font-size:12px;text-align:center}
.consulting-box{padding:20px}
.consulting-box dt{background-size: 15px;background-position:0 4px; padding-left:20px; font-size:16px}
.consulting-box dd{padding-left:20px}

/* 가족친화인증기업관 : 인증기업소개 */
.company-list li{width:100%}

.mem-card .img{width:250px; text-align:center}
.mem-card .img img{max-width:100%}
.mem-card .con{width:calc(100% - 260px)}

}

@media(max-width:768px){

.mem-card .img{width:100%}
.mem-card .con{width:100%}

.tbl-basic img{max-width:100px}
}