@charset "utf-8";

/* sub - common css */
@import url("../sub-common.css");


/* service-info */

.content-container .service-info .info-step {padding: 30px 0}
.content-container .service-info .info-step span.sub-title-name{font-size: 2rem; padding-bottom: 15px; color: #444; font-weight: 600; position: relative; display: inline-block; padding-left: 10px}
.content-container .service-info .info-step span.sub-title-name::after {content:'';position: absolute; left: 0;width: 0; height: 0;border-top: 5px solid transparent;border-bottom: 5px solid transparent;border-left: 5px solid #30b686;top: 3px}
.content-container .service-info .info-step > p {font-size: 1.7rem; line-height: 30px; border-left: 1px solid #c3c3c3;padding-left: 10px}

@media(max-width: 800px) {
		.content-container .service-info .info-step span.sub-title-name {font-size: 1.8rem}
	.content-container .service-info .info-step > p {font-size: 1.6rem}
}

@media(max-width: 500px) {
	.content-container .service-info .info-step span.sub-title-name {font-size: 1.6rem}
	.content-container .service-info .info-step > p {font-size: 1.5rem}
}


/* serivce-info 이용 절차 */
.info-step > ul.service-step > li {float: left; width: calc(16.6% - 10px); text-align: center; margin-right: 10px;}
.info-step > ul.service-step > li:last-child {margin-right: 0}

.info-step .info-notice {font-size: 1.3rem; color: #f93838; margin-left: 5px}

.info-step > ul.service-step > li > .step-wrap {border-radius: 10px; min-height: 130px; width: 100%;position: relative}
.info-step > ul.service-step > li > .step-wrap:not(.last-step)::after {content: ''; position: absolute; bottom: 7px; right: -22px; background: url(../../../img/sub/common/step-img.png) no-repeat center 100%; width: 33px; height: 33px; transform: translateY(-50%); z-index: 1;}

.info-step > ul.service-step > li > .step-wrap .step-tit {background-color: #6aca92; padding: 20px 5px; color: white; font-size: 1.6rem; border-top-left-radius: 10px; border-top-right-radius: 10px; font-weight: 600;}
.info-step > ul.service-step > li > .step-wrap .step-area {padding: 10px 5px; font-size: 1.5rem; word-break: keep-all; line-height: 25px; height: calc(130px - 57px); display: table-cell; vertical-align: middle; width:375px; background-color:#f3f9f6}


/* 아이누리돌봄  */
.info-step.nuri-dolbom ul.service-step > li {width: calc(33.33% - 10px)}
.info-step.nuri-dolbom ul.service-step > li .step-wrap .step-area {width: 593px;}
.info-step.nuri-dolbom ul.service-step > li .step-area > ul > li {float: left; width: calc(33.33% - 10px); margin-right: 15px; position: relative}
.info-step.nuri-dolbom ul.service-step > li .step-area > ul > li:last-child {margin-right: 0}
.info-step.nuri-dolbom ul.service-step > li .step-area > ul > li:not(:first-child)::after {content: ''; width: 8px; height: 8px;border-top: 1px solid #999; border-right: 1px solid #999; display: inline-block; transform: rotate(45deg); position: absolute; top: 17px; left: -11px;}
.info-step.nuri-dolbom ul.service-step > li .step-area > ul > li:nth-child(1),
.info-step.nuri-dolbom ul.service-step > li .step-area > ul > li:nth-child(3) {line-height: 40px}

/* 초등돌봄교실 */
.info-step.school-dolbom ul.service-step > li {width: calc(25% - 10px)}
.info-step.school-dolbom > ul.service-step > li > .step-wrap .step-area {width: 490px;}

/* 아이돌봄 서비스 */
.idolbom-service .table-wrap {margin-top: 10px; border-top: 1px solid #A7A7A7}
.idolbom-service ul.service-step > li {width: calc(25% - 10px)}
.idolbom-service ul.service-step > li:nth-child(4) > .step-wrap::after {background: none}
.idolbom-service ul.service-step > li > .step-wrap {min-height: 80px; margin-bottom: 10px}
.link-service > p {margin-bottom: 10px}
.link-service ul.service-step > li > .step-wrap {min-height: 50px}

@media (max-width: 1200px) {
	.info-step > ul.service-step > li {width: calc(33.3% - 10px); margin-bottom: 10px;}
	.info-step > ul.service-step > li:nth-child(3) > .step-wrap::after {background: none}
	.info-step.nuri-dolbom ul.service-step > li:nth-child(2) > .step-wrap::after {background: none}
	.idolbom-service ul.service-step > li:nth-child(4) > .step-wrap::after {content: ''; position: absolute; bottom: 7px; right: -22px; background: url(../../../img/sub/common/step-img.png) no-repeat center 100%; width: 33px; height: 33px; transform: translateY(-50%); z-index: 1;}
	.idolbom-service ul.service-step > li:nth-child(6) > .step-wrap::after {background: none}
}

@media (max-width: 1024px) {
	.info-step {padding: 15px 0} 
	.info-step span.sub-title-name {font-size: 1.6rem}
	.info-step > p {font-size: 1.4rem}
	.info-step.nuri-dolbom ul.service-step > li {width: calc(50% - 10px)}
	.info-step.school-dolbom ul.service-step > li {width: calc(50% - 10px)}
	.info-step.school-dolbom ul.service-step > li:nth-child(2) > .step-wrap::after {content: none}
	.info-step.school-dolbom ul.service-step > li:nth-child(3) > .step-wrap::after {content: ''; position: absolute; bottom: 7px; right: -22px; background: url(../../../img/sub/common/step-img.png) no-repeat center 100%; width: 33px; height: 33px; transform: translateY(-50%); z-index: 1;}

	
}

@media (max-width: 700px) {
	.info-step > ul.service-step > li {width: calc(50% - 10px)}
	.info-step > ul.service-step > li:nth-child(2) > .step-wrap::after,
	.info-step > ul.service-step > li:nth-child(4) > .step-wrap::after {background: none}
	.info-step > ul.service-step > li:nth-child(3) > .step-wrap::after {content: ''; position: absolute; bottom: 7px; right: -22px; background: url(../../../img/sub/common/step-img.png) no-repeat center 100%; width: 33px; height: 33px; transform: translateY(-50%); z-index: 1;}
	.info-step.nuri-dolbom ul.service-step > li:nth-child(3) > .step-wrap::after {background: none}
}

@media (max-width: 620px) {
	.info-step.nuri-dolbom ul.service-step > li {width: 100%; margin-right: 0}
	.info-step.nuri-dolbom > ul.service-step > li:nth-child(1) > .step-wrap::after {background: none}
	.info-step.nuri-dolbom ul.service-step > li .step-area > ul > li:nth-child(1),
	.info-step.nuri-dolbom ul.service-step > li .step-area > ul > li:nth-child(3) {line-height: 23px}
	.info-step.nuri-dolbom ul.service-step > li .step-area > ul > li:not(:first-child)::after {top: 9px; left: -14px}
}

@media (max-width: 440px) {
	.info-step > ul.service-step > li > .step-wrap .step-tit {font-size: 1.3rem;}
	.info-step > ul.service-step > li > .step-wrap .step-area {font-size: 1.3rem;}
	.info-step.school-dolbom > ul.service-step > li > .step-wrap .step-area {padding: 5px; line-height: 17px}
}


/* 관련 사진 */
.info-step > ul.center-pic li {float: left; width: 32%; margin-right:1%; margin-bottom:10px;}
.info-step > ul.center-pic li .img-box {position: relative; width: 100%; height: 0; padding-bottom: 56.26%; overflow: hidden; text-align: center; border-radius: 10px}
.info-step > ul.center-pic li .img-box img {max-width: 100%; max-height: 100%; position: absolute; top: 50%; left: 50%;-webkit-transform: translate(-50%,-50%);-moz-transform: translate(-50%,-50%);-ms-transform: translate(-50%,-50%);-o-transform: translate(-50%,-50%);transform: translate(-50%,-50%); width: 100%}

@media (max-width: 500px) {
	.info-step > ul.center-pic li {width: 49%; margin-right: 2%; margin-bottom: 2%}
	.info-step > ul.center-pic li:nth-child(2),.info-step > ul.center-pic li:nth-child(4) {margin-right: 0}
}



/* 마을돌봄 공동체 */
.table-style02 table.normal-table { border-top: 1px solid #333; margin-top: 20px;}
.table-style02 table.normal-table tr th,
.table-style02 table.normal-table tr td { border-left:1px solid #dee3eb; text-align: center; width:auto; height:60px; word-break: keep-all; }
.table-style02 table.normal-table tr th:first-child,
.table-style02 table.normal-table tr td:first-child { border-left:0; }
.table-style02 table.normal-table .txt-left { text-align: left !important; }

@media (max-width: 500px) {
	.table-style02 table.normal-table tr th,
	.table-style02 table.normal-table tr td { font-size: 1.2rem; padding:2px;}
}