@charset "utf-8";

/* tab */
.tab-nav{width:100%; display:flex; flex-wrap:wrap; justify-content:space-between;margin-top:20px}
.tab-nav li{width:calc(100%/3 - 3px)}
.tab-nav li a{display:inline-block;width:100%;background:#fff; border:1px solid #ddd;line-height:55px;text-align:center}
.tab-nav li.active a{background:#ed3699; border:1px solid #ed3699; color:#fff}

/*테이블*/
.tbl-basic{border-top:1px solid #ddd; border-left:1px solid #ddd; width:100%;table-layout:fixed;color:#222;color:#555;margin-top:15px}
.tbl-basic thead th{padding:15px 10px;border-bottom:1px solid #ddd; border-right:1px solid #ddd;background:#f6f6f6; color:#000}
.tbl-basic tbody th,.tbl-basic tbody td{padding:15px 10px;border-bottom:1px solid #ddd; border-right:1px solid #ddd;text-align:center;letter-spacing:-.5pt}
.tbl-basic tbody th{background:#f8f8f8; font-weight:500;color:#000}
.tbl-basic tbody td.td-left,.tbl-basic tfoot td.td-left{text-align:left}
.tbl-basic tfoot th, .tbl-basic tfoot td{background:#e7f8e3;padding:15px;border-bottom:1px solid #ddd; border-right:1px solid #ddd;text-align:center;font-size:1.05em;font-weight:500}
.tbl-basic tfoot td span{font-weight:400; font-size:15px}
.tbl-basic tfoot td .dot-list{font-size:15px; font-weight:400}
.sideLine-none{border-left:0}
.sideLine-none thead th:last-child,.sideLine-none tbody td:last-child{border-right:none !important}
.tbl-basic .s-txt{font-size:.9em;margin-top:5px; color:#666; line-height:1.3}
.tbl-basic tbody td .btn-go{display:inline-block; width:80px; height:30px; border-radius:3px; border:1px solid #ddd; text-align:center; line-height:30px; font-size:14px;color:#f83e05;margin-left:10px}
.tbl-basic tbody td strong{font-weight:600;color:#000}

.add-tbl{border:2px solid #eee;border-radius:5px;padding:20px;margin-top:30px;position:relative;padding-top:50px}
.add-tbl .tit{display:inline; background:#eb8509; color:#fff; padding:5px 20px;position:absolute; left:20px; top:-2px}
.add-tbl table{background:#fff}
.add-tbl table tbody td.tbl-sale{background:#ffedda;color:#f83e05;font-weight:700}

/*테이블 안 테이블*/
.in-tbl{border-top:1px solid #ddd;border-left:1px solid #ddd; font-size:13px; width:100%;margin-top:5px }
.in-tbl thead th,.in-tbl tbody th,.in-tbl tbody td{padding:7px 5px}

/*dot-list*/
.dot-list li{padding-left:10px; position:relative;margin-top:5px;text-align:left}
.dot-list li:before{content:'';position:absolute; left:0; top:11px;width:4px; height:4px; background:rgba(0,0,0,.2);border-radius:100%}

/*준비중*/
.coming{margin-top:80px; text-align:center}
.coming img{max-width:80%}


/*가족친화인증기업관 : 협력기관*/
.cooperation-list{margin-top:10px;display:flex; flex-wrap:wrap;border:1px solid #ddd; padding:10px }
.cooperation-list li{width:calc(100%/5);padding:10px}
.cooperation-list li span{position:relative;display:inline-block; width:100%; height:0; padding-bottom:47%;overflow:hidden; vertical-align:bottom}
.cooperation-list li img{position:absolute; top:50%; max-width:100%;max-height:100%;-webkit-transform: translate(-50%,-50%); -moz-transform: translate(-50%,-50%);-ms-transform: translate(-50%,-50%); -o-transform: translate(-50%,-50%); transform: translate(-50%,-50%);}


.img-list{display:flex; flex-wrap:wrap;justify-content:space-between;margin-top:30px}
.img-list li{width:calc(100%/3 - 20px)}
.img-list li img{max-width:100%}

.img-wrap{width:100%;display:table;}
.img-wrap h4,.img-wrap  p{width:100%;}
.img-wrap .con{display:table-cell;width:calc(100% - 450px); vertical-align:top}
.img-wrap .img{display:table-cell;width:450px;padding-left:50px;text-align:center;vertical-align:bottom}
.img-wrap .img img{max-height:100%; max-width:100%}

.box-con{width:100%; background:url(/nanum/site/builder/skin/sample01/img/common/box-linebg.png); padding:10px;margin-top:30px}
.box-con > div{background:#fff;padding:30px;text-align:center; font-size:20px}
.box-con > div strong{color:#ed3699; font-weight:600}


/* 가족친화인증 : 교육신청 */
.edu-type{display:flex; flex-wrap:wrap;background:#f6f6f6; padding:20px 30px; border-radius:15px;margin-top:10px}
.edu-type li{background:url(/nanum/site/builder/skin/sample01/img/common/ico-check.png) no-repeat 0px 2px; background-size:20px;margin:5px 0; width:100%}
.edu-type li span{display:inline-block;padding-left:30px}


.form-btn{margin-top:50px;text-align:center}
.form-btn a{display:inline-block;background:#fff;line-height:55px;min-width:220px;border:1px solid #222; color:#222}
.form-btn a.btn-down{padding:0 60px 0 20px; background:url(/nanum/site/builder/skin/sample01/img/common/ico-down_b.png) no-repeat calc(100% - 20px) 50%; text-align:left}
.ex{margin-top:10px}
.form-btn a:hover{border:1px solid #6bbb3c; background:#6bbb3c url(/nanum/site/builder/skin/sample01/img/common/ico-down.png) no-repeat calc(100% - 20px) 50%; color:#fff}
.form-btn a.btn-more{padding:0 60px 0 20px; background:url(/nanum/site/builder/skin/sample01/img/common/ico-more_b.png) no-repeat calc(100% - 20px) 50%; text-align:left}
.ex{margin-top:10px}
.form-btn a.btn-more:hover{border:1px solid #6bbb3c; background:#6bbb3c url(/nanum/site/builder/skin/sample01/img/common/ico-more_w.png) no-repeat calc(100% - 20px) 50%; color:#fff}


.box-con{width:100%; background:url(/nanum/site/builder/skin/sample01/img/common/box-linebg.png); padding:10px;margin-top:30px}
.box-con > div{background:#fff;padding:30px;text-align:center; font-size:20px}
.box-con > div strong{color:#ed3699; font-weight:600}


@media(max-width:1200px){
	
	.img-list li{width:calc(100%/3 - 10px)}

	/*가족친화인증기업관 : 협력기관*/
	.cooperation-list li{width:calc(100%/4)}
	
}


@media(max-width:1100px){

	/* 가족친화인증 : 가족친화컨설팅 신청 */
	.img-wrap{display:block}
	.img-wrap .con,.img-wrap .img{display:block;width:100%;padding-left:0;vertical-align:middle}
	.img-wrap .img{padding-top:30px;text-align:center;}
}

@media(max-width:1024px){
	
	.tbl-organ,.tbl-basic{font-size:15px}
	.tbl-basic{table-layout:auto}
	.tbl-basic colgroup{display:none}


	/*반응형 테이블*/
	.tbl-responsive,.tbl-responsive thead .tbl-responsive thead tr, .tbl-responsive thead td, .tbl-responsive thead th, .tbl-responsive tbody, .tbl-responsive tbody tr, .tbl-responsive tbody th, .tbl-responsive tbody td{display:block}
	.tbl-responsive thead tr,.tbl-responsive tbody tr{display:flex; flex-wrap:wrap}
	.tbl-responsive thead th, .tbl-responsive tbody th{width:150px;}
	.tbl-responsive thead td, .tbl-responsive tbody td{width:calc(100% - 150px); border-right:0; text-align:left}
	
	
	/*가족친화인증기업관 : 협력기관*/
	.cooperation-list li{width:calc(100%/3)}
	
	.img-list li{width:calc(100%/3 - 5px)}
}



@media(max-width:850px){
	/*dot-list*/
	.dot-list li{padding-left:7px}
	.dot-list li:before{width:3px; height:3px; top:7px;}
	
	/* tab */
	.tab-nav li a{line-height:45px}

	/* 반응형 테이블 */
	.tbl-responsive{margin-top:0}
	.tbl-responsive thead th, .tbl-responsive tbody th{width:100px;}
	.tbl-responsive thead td, .tbl-responsive tbody td{width:calc(100% - 100px); }
	
	.tbl-wrap{position:relative;width:100%;overflow-x:scroll;}
	.tbl-wrap:before{content:'※ 좌우 스크롤하시면 내용확인 가능합니다.';width:100%;color:red; font-size:12px;display:block; margin-top:10px}
	.tbl-wrap table{min-width:800px}
	.tbl-organ,.tbl-basic{font-size:12px; table-layout:auto; margin-top:10px}
	.tbl-organ colgroup{display:none}
	.tbl-organ thead th, .tbl-organ tbody td,.tbl-basic thead th, .tbl-basic tbody th, .tbl-basic tbody td{padding:10px 5px;}
		
	.edu-type li{background-size:15px;}
	.edu-type li span{ padding-left:25px}
	.img-list li{width:100%}
	.img-list li:nth-child(n+2){margin-top:10px}
	
	
	.box-con > div{font-size:15px; padding:20px 10px}
	.box-con > div strong{display:block;}
	
	/*가족친화인증기업관 : 협력기관*/
	.cooperation-list {justify-content:space-between}
	.cooperation-list li{width:calc(100%/2 - 5px); padding:0}
	.cooperation-list li:nth-child(n+3){margin-top:10px}
		

	.add-tbl{width:100%; overflow-x:auto}
	.add-tbl table{min-width:900px}
	.add-tbl:before{content:'※ 좌우 스크롤하시면 내용확인 가능합니다.';width:100%;color:red; font-size:12px;display:block; margin-top:10px}

}