@charset "UTF-8";
/* CSS Document */

/*--------------------------------------------------------------------------------------------------------------------------------------------------------
	index.html
--------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*mvSec*/
#mvSec { max-width: 1960px; margin: 0 auto; padding: 0 20px 50px; z-index: 1; background: url("/parking/recruit/business/images/business_mv_bg_pc.png") no-repeat center bottom -5px; }
#mvSec #mvArea { padding: 45px 0 0; display: flex; justify-content: space-between; }
#mvSec #mvArea #mvTxtInner { width: 47.5%; margin-top: 1%; }
#mvSec #mvArea #mvTxtInner h1 { max-width: 586px; }
#mvSec #mvArea #mvTxtInner h2 { font-size: 2rem; font-weight: bold; background-color: #ffea01; color: #004da7; border: solid 3px #004da7; border-radius: 40px; margin-top: 28px; padding: 4px; text-align: center; }
#mvSec #mvArea #mvTxtInner p { font-size: 1.4rem; line-height: 1.9; margin-top: 8px; }
#mvSec #mvImg { width: 48.5%; position: static; max-width: 600px; }

/*work*/
#workSec { background: url("/parking/recruit/common/images/common_contents_bg02.png") repeat center center; padding: 45px 0 0; position: relative; }
#workSec #workArea { position: relative; padding-bottom: 217px; }
#workSec .contentsTitle { max-width: 670px; width: 54vw; text-align: center; margin: 0 auto; }
#workSec #workArea #workPeople { position: absolute; right: 0; bottom: 0; max-width: 176px; z-index: 2; }
#workSec #mvText { max-width: 1919px; position: absolute; bottom: 0; margin: 0 auto; left: 0; right: 0; }

@media screen and (max-width: 1960px) {
	
	#workSec #workArea { padding-bottom: 11vw; }
	#workSec #workArea #workPeople { width: 9vw; }
	
}

@media screen and (max-width: 1240px) {
	
	#mvSec { padding-bottom: 5vw; background-size: 140%; }
	#mvSec #mvArea { padding-top: 4.4vw; }
	#mvSec #mvArea #mvTxtInner h2 { font-size: 2.58vw; margin-top: 2.1vw; padding: 0.3vw; }
	#mvSec #mvArea #mvTxtInner p { font-size: 1.8vw; margin-top: 0.65vw; }
	
	#workSec { padding-top: 3.6vw; }
	#workSec #workArea #workImg { margin-top: 0.2vw; }
	#workSec #workArea #workPeople { width: 11vw; }

}

@media screen and (max-width: 750px) {
	
	#mvSec { background: url("/parking/recruit/business/images/business_mv_bg_sp.png") no-repeat center bottom / 100%; padding: 5vw 0 12vw; }
	#mvSec #mvArea { padding: 0 20px; display: block; }
	#mvSec #mvArea #mvTxtInner { width: 100%; }
	#mvSec #mvArea #mvTxtInner h1 { width: 94%; margin: 0 auto; }
	#mvSec #mvArea #mvTxtInner h2 { font-size: 4.1vw; margin: 4vw 6% 0; border-width: 2px; padding: 0.5vw; }
	#mvSec #mvArea #mvTxtInner p { font-size: 4vw; margin-top: 3.5vw; line-height: 1.6; text-align: center; }
	#mvSec #mvImg { margin: 2.8vw auto 0; width: 90%; }
	
	#workSec { padding-top: 6.6vw; }
	#workSec #workArea { padding: 0 0 15vw; }
	#workSec #workArea .contentsTitle { width: 100%; padding: 0 20px; }
	#workSec #workArea #workImg { margin-top: 3vw; }
	#workSec #workArea #workPeople { width: 23.5vw; right: 1vw; }

}


/*maintenance*/
#maintenanceWrap { background: url("/parking/recruit/business/images/business_prevention_bg_pc.png") no-repeat center top; padding: 70px 0 140px; }

#maintenanceWrap #ifSec .contentsTitle { max-width: 832px; width: 67vw; text-align: center; margin: 0 auto; }

#maintenanceWrap #preventionSec #preventionTitleArea { display: flex; justify-content: space-between; position: relative; }
#maintenanceWrap #preventionSec #preventionTitleArea .contentsTitle { position: absolute; top: 26%; left: 0; right: 0; margin: 0 auto; text-align: center; max-width: 1004px; width: 84%; }
#maintenanceWrap #preventionSec #preventionTitleArea #preventionPeople01 { max-width: 188px; width: 15.7%; margin-top: 0.5%; margin-left: 1.1%; position: relative; }
#maintenanceWrap #preventionSec #preventionTitleArea #preventionPeople02 { max-width: 192px; width: 16%; position: absolute; top: 0; right: 2%; }
#maintenanceWrap #preventionSec #preventionList { display: flex; justify-content: space-between; flex-wrap: wrap; position: relative; z-index: 1; }
#maintenanceWrap #preventionSec #preventionList li { width: 48.5%; background-color: #fff9b3; border: solid 3px #004da7; border-radius: 30px; box-shadow: 10px 10px 10px rgba(0,0,0,0.3); padding: 2.2% 1.5% 2%; }
#maintenanceWrap #preventionSec #preventionList li h3 { width: 72%; margin: 0 auto; }
#maintenanceWrap #preventionSec #preventionList li > div { display: flex; justify-content: space-between; margin-top: 4%; }
#maintenanceWrap #preventionSec #preventionList li > div div { width: 34%; max-width: 182px; margin-left: 3%; }
#maintenanceWrap #preventionSec #preventionList li > div p { flex: 1; font-size: 1.46rem; line-height: 1.4; margin-left: 3%; }
#maintenanceWrap #preventionSec #preventionList li:last-child { width: 57%; margin: 25px auto 0; align-items: center; }
#maintenanceWrap #preventionSec #preventionList li:last-child h3 { width: 60%; }
#maintenanceWrap #preventionSec #preventionList li:last-child > div div { width: 22%; margin-left: 1.1%; }

#maintenanceWrap #preventionSec #missionArea { width: 86%; margin: 60px auto 0; background-color: #fff; border: solid 2px #004da7; border-radius: 20px; padding: 3.5% 2.5% 1.5%; font-size: 1.5rem; line-height: 1.6; position: relative; }
#maintenanceWrap #preventionSec #missionArea::after { content: ""; width: 2px; height: 105px; background-color: #004da7; position: absolute; top: calc(50% + 20px); transform: translateY(-50%); left: 0; right: 0; margin: 0 auto; }
#maintenanceWrap #preventionSec #missionArea h3 { width: 48%; margin: 0 auto; position: absolute; left: 0; right: 0; top: -30px; }
#maintenanceWrap #preventionSec #missionArea ol { display: flex; justify-content: space-between; }
#maintenanceWrap #preventionSec #missionArea ol li { display: flex; align-items: center; width: 47.5%; }
#maintenanceWrap #preventionSec #missionArea ol li img { max-width: 51px; }
#maintenanceWrap #preventionSec #missionArea ol li span { flex: 1; }

@media screen and (max-width: 1240px) {

	#maintenanceWrap { padding: 5.6vw 0 11vw; background-size: 166%; background-position: center center; }
	#maintenanceWrap #ifSec #ifList { margin-top: 5vw; }
	#maintenanceWrap #ifSec #ifList li .ifListIcon { top: -3.5vw; }
	#maintenanceWrap #ifSec #ifList li .ifListImg { margin-top: 3vw; }
	#maintenanceWrap #ifSec #ifList li p { margin-top: 1.5vw; font-size: 1.88vw; }
	
	#maintenanceWrap #preventionSec #preventionList li:last-child { margin-top: 2.3vw; }
	#maintenanceWrap #preventionSec #preventionList li > div p { font-size: 1.88vw; }
	#maintenanceWrap #preventionSec #preventionTxt { margin-top: 3.5vw; font-size: 1.95vw; }

	#maintenanceWrap #preventionSec #missionArea { font-size: 1.85vw; }
	#maintenanceWrap #preventionSec #missionArea::after { height: 8vw; top: calc(50% + 1.5vw); }
	#maintenanceWrap #preventionSec #missionArea ol li img { width: 6%; }
}

@media screen and (max-width: 750px) {

	#maintenanceWrap { background: #014fa4 url("/parking/recruit/business/images/business_prevention_bg_sp.png") no-repeat center center / 100%; padding: 17vw 0 7vw; }
	
	#maintenanceWrap #preventionSec #preventionTitleArea { display: block; padding-bottom: 4vw; }
	#maintenanceWrap #preventionSec #preventionTitleArea .contentsTitle { position: static; width: 100%; }
	#maintenanceWrap #preventionSec #preventionTitleArea #preventionPeople01 { position: absolute; left: -0.5vw; bottom: 0; width: 21vw; }
	#maintenanceWrap #preventionSec #preventionTitleArea #preventionPeople02 { top: auto; right: 0.5vw; bottom: 0; width: 21vw; }
	
	#maintenanceWrap #preventionSec #preventionList { width: 92%; margin: 0 auto; }
	#maintenanceWrap #preventionSec #preventionList li { width: 100%; border-width: 2px; border-radius: 15px; margin-top: 6vw; padding: 4vw 3vw; }
	#maintenanceWrap #preventionSec #preventionList li > div { margin-top: 4vw; }
	#maintenanceWrap #preventionSec #preventionList li > div div { width: 26vw; margin-left: 1.5vw; }
	#maintenanceWrap #preventionSec #preventionList li > div p { font-size: 3.4vw; margin-left: 2vw; }
	
	#maintenanceWrap #preventionSec #preventionList li:first-child { margin-top: 0; }
	#maintenanceWrap #preventionSec #preventionList li:first-child > div { position: relative; }
	#maintenanceWrap #preventionSec #preventionList li:first-child > div div { position: absolute; top: -8vw; }
	#maintenanceWrap #preventionSec #preventionList li:first-child > div p { width: 50vw; flex: 0 auto; margin-left: auto; }
	#maintenanceWrap #preventionSec #preventionList li:last-child { width: 100%; margin-top: 6vw; }
	#maintenanceWrap #preventionSec #preventionList li:last-child h3 { width: 72%; }
	#maintenanceWrap #preventionSec #preventionList li:last-child > div div { width: 21vw; margin-left: 1.5vw; }
	
	#maintenanceWrap #preventionSec #missionArea { width: 92%; border-width: 1px; border-radius: 12px; margin-top: 9vw; font-size: 3.5vw; padding: 6vw 5vw 6vw 4vw; }
	#maintenanceWrap #preventionSec #missionArea::after { display: none; }
	#maintenanceWrap #preventionSec #missionArea h3 { width: 80%; top: -3.5vw; }
	#maintenanceWrap #preventionSec #missionArea ol { display: block; }
	#maintenanceWrap #preventionSec #missionArea ol li { width: 100%; }
	#maintenanceWrap #preventionSec #missionArea ol li:nth-child(n+2) { border-top: solid 1px #004da7; margin-top: 2vw; padding-top: 2vw; }
	#maintenanceWrap #preventionSec #missionArea ol li img { width: 8%; }

}

/*flow*/
#flowSec { background: url("/parking/recruit/common/images/common_contents_bg01.png") repeat center center; padding: 125px 0 75px; }
#flowSec #flowArea { position: relative; background: #ffea01 url("/parking/recruit/business/images/business_flow_img06.png") no-repeat right 1.4% bottom 5.4% / 34%; border: solid 3px #004da7; border-radius: 20px; padding: 2.8% 2.2% 2.3%;  }
#flowSec #flowArea .contentsTitle { max-width: 832px; width: 67vw; text-align: center; margin: 0 auto; position: absolute; left: 0; right: 0; transform: translateY(-65%); }
#flowSec #flowArea #flowList { display: flex; flex-wrap: wrap; margin-top: 6%; background: url("/parking/recruit/business/images/business_flow_arrow.png") no-repeat center center / 72%; }
#flowSec #flowArea #flowList li { width: 32%; position: relative; margin-left: 2%; }
#flowSec #flowArea #flowList li:nth-child(n+4) { margin-top: 6.5%; }
#flowSec #flowArea #flowList li:first-child,
#flowSec #flowArea #flowList li:nth-child(4) { margin-left: 0; }
#flowSec #flowArea #flowList li::after { content: ""; position: absolute; left: -3%; top: 39%; width: 9%; height: 13%; clip-path: polygon(0 0, 100% 50%, 0 100%); background-color: #014fa4; }
#flowSec #flowArea #flowList li:first-child::after,
#flowSec #flowArea #flowList li:nth-child(4)::after { display: none; }
#flowSec #flowArea #flowList li span { display: block; margin-top: 2%; font-size: 1.12rem; line-height: 1.4; }

@media screen and (max-width: 1240px) {

	#flowSec { padding: 10.4vw 0 6vw; }
	#flowSec #flowArea #flowList { margin-top: 5vw; }
	#flowSec #flowArea #flowList li span { font-size: 1.4vw; }
	#flowSec #flowArea #flowList li:nth-child(n+4) { margin-top: 6vw; }


}

@media screen and (max-width: 750px) {

	#flowSec { background-size: 28%; padding: 18.5vw 0 8vw; }
	#flowSec #flowArea { border: none; padding: 4vw 4vw 92vw; background-size: 92%; background-position: center bottom 6vw; }
	#flowSec #flowArea .contentsTitle { width: 92%; transform: translateY(-12vw); }
	#flowSec #flowArea #flowList { display: block; margin-top: 14vw; }
	#flowSec #flowArea #flowList li { width: 100%; margin: 4vw 0 0; padding-top: 9vw; }
	#flowSec #flowArea #flowList li:first-child { margin-top: 0; padding-top: 0; }
	#flowSec #flowArea #flowList li::after,
	#flowSec #flowArea #flowList li:nth-child(4)::after { display: block; left: 0; right: 0; margin: 0 auto; top: 0; clip-path: polygon(0 0, 50% 100%, 100% 0); width: 9vw; height: 6vw; }
	#flowSec #flowArea #flowList li span { display: block; font-size: 4.5vw; margin-top: 2vw; text-align: center; }

}