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

/*--------------------------------------------------------------------------------------------------------------------------------------------------------
	index.html
--------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*mvSec*/
#mvSec { max-width: 1960px; margin: 0 auto; z-index: 1; background: url("/parking/recruit/three/images/three_mv_bg_pc.png") no-repeat center 22px; }
#mvSec #mvArea { position: relative; padding: 32px 20px 0; }
#mvSec #mvArea #mvTxtInner { width: 47.5%; }
#mvSec #mvArea #mvTxtInner h1 { max-width: 590px; }
#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: 63.5%; position: absolute; right: -2%; top: 2.5%; max-width: 782px; }
#mvSec #mvText { max-width: 1919px; margin-top: 25px; }

@media screen and (max-width: 1240px) {
	
	#mvSec { background-size: center 1.7vw; }
	#mvSec #mvArea { padding-top: 2.47vw; }
	#mvSec #mvArea #mvTxtInner h2 { font-size: 2.46vw; margin-top: 2.1vw; padding: 0.3vw; }
	#mvSec #mvArea #mvTxtInner p { font-size: 1.7vw; margin-top: 0.65vw; }
	#mvSec #mvText { margin-top: 1.95vw; }
	
}

@media screen and (max-width: 750px) {
	
	#mvSec { background: url("/parking/recruit/three/images/three_mv_bg_sp.png") no-repeat center top; padding: 0; position: relative; }
	#mvSec #mvArea { padding: 0 20px; position: static; }
	#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 { width: 106%; margin-top: 0; top: auto; right: 4%; bottom: -3vw; }
	#mvSec #mvText { margin-top: 90vw; }
	
}

/*solution*/
#solutionSec { background: url("/parking/recruit/common/images/common_contents_bg02.png") repeat center center; padding: 70px 0 75px; }
#solutionSec .contentsTitle { max-width: 832px; width: 59.2vw; text-align: center; margin: 0 auto; }
#solutionSec #solutionList { margin: 20px auto 0; display: flex; justify-content: space-between; flex-wrap: wrap; }
#solutionSec #solutionList li { width: 47.5%; background-color: #fff; border-radius: 30px; box-shadow: 10px 10px 10px rgba(0,0,0,0.3); padding: 3.3% 2.5% 2%; display: flex; flex-direction: column; }
#solutionSec #solutionList li:nth-child(n+3) { margin-top: 50px; }
#solutionSec #solutionList li h3 { border-bottom: solid 2px #3f7bba; padding-bottom: 22px; }
#solutionSec #solutionList li .solutionListArea { display: flex; justify-content: space-between; align-items: center; flex: 1; }
#solutionSec #solutionList li .solutionListArea div { width: 27%; margin-left: 3%; }
#solutionSec #solutionList li .solutionListArea p { font-size: 1.4rem; line-height: 1.9; margin-top: 8px; margin-left: 7%; flex: 1; }

@media screen and (max-width: 1240px) {
	
	#solutionSec { padding: 5.4vw 0; }
	#solutionSec #solutionList { margin-top: 1.5vw; }
	#solutionSec #solutionList li h3 { padding-bottom: 1.7vw; }
	#solutionSec #solutionList li .solutionListArea p { margin-top: 0.6vw; font-size: 1.7vw; }
	#solutionSec #solutionList li:nth-child(n+3) { margin-top: 3.9vw; }

}

@media screen and (max-width: 750px) {
	
	#solutionSec { padding: 10vw 0; }
	#solutionSec .contentsTitle { width: 100%; }
	#solutionSec #solutionList { display: block; }
	#solutionSec #solutionList li { width: 100%; border-radius: 20px; padding: 4vw 4.5% 3vw; min-height: 59vw; }
	#solutionSec #solutionList li h3 { padding-bottom: 3.5vw; }
	#solutionSec #solutionList li .solutionListArea { margin-top: 2vw; flex: 0; }
	#solutionSec #solutionList li .solutionListArea div { margin-left: 3.7%; }
	#solutionSec #solutionList li .solutionListArea p { margin-top: 2vw; font-size: 3.8vw; line-height: 1.5; }
	#solutionSec #solutionList li:nth-child(n+2),
	#solutionSec #solutionList li:nth-child(n+3) { margin-top: 6.5vw; }


}

/*features*/
#featuresSec { background: url("/parking/recruit/three/images/three_features_bg.png") no-repeat center top; padding: 10px 0 145px; position: relative; }
#featuresSec .contentsTitle { max-width: 834px; width: 59.2vw; text-align: center; margin: 0 auto; position: absolute; left: 0; right: 0; top: 70px; }
#featuresSec #featuresPeople { width: 20vw; max-width: 156px; margin-left: auto; margin-right: 2%; }
#featuresSec #featuresList { background-color: #fff; padding: 2.7% 2.5% 2.2%; border-radius: 30px; box-shadow: 10px 10px 10px rgba(0,0,0,0.3); display: flex; flex-wrap: wrap; justify-content: space-between; }
#featuresSec #featuresList li { width: 48.6%; margin-top: 30px; }
#featuresSec #featuresList li.w3Line { width: 31.5%; margin-top: 0; }

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

	#featuresSec { padding: 0.6vw 0 11.1vw; background-size: 165%; background-position: center center; }
	#featuresSec .contentsTitle { top: 5.4vw; }
	#featuresSec #featuresList li { margin-top: 2.3vw; }

}

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

	#featuresSec { padding: 9vw 0 11vw; background: #014fa4; }
	#featuresSec .contentsTitle { position: static; width: 100%; }
	#featuresSec #featuresPeople { display: none; }
	#featuresSec #featuresList { margin-top: 2vw; display: block; padding: 7vw 4vw 7.5vw; }
	#featuresSec #featuresList li,
	#featuresSec #featuresList li.w3Line { width: 100%; }
	#featuresSec #featuresList li,
	#featuresSec #featuresList li + li.w3Line { margin-top: 4vw; }

}


/*service*/
#serviceSec { background: url("/parking/recruit/common/images/common_contents_bg01.png") repeat center center; padding: 70px 0 75px; }
#serviceSec .contentsTitle { max-width: 834px; width: 59.2vw; text-align: center; margin: 0 auto; display: flex; justify-content: space-between; }
#serviceSec #serviceList { display: flex; flex-wrap: wrap; justify-content: space-between; margin-top: 25px; }
#serviceSec #serviceList li { width: 48%; margin-top: 58px; background-color: #ffea01; border: solid 3px #004ea3; border-radius: 35px; box-shadow: 10px 10px 10px rgba(0,0,0,0.3); padding: 2.5% 0 1.5%; }
#serviceSec #serviceList li h3 { margin: 0 8%; }
#serviceSec #serviceList li div { margin: 22px 8% 0; }
#serviceSec #serviceList li p { font-size: 1.46rem; line-height: 1.8; margin: 15px 4.5% 0; }

#serviceSec #serviceList li:first-child { width: 100%; margin-top: 0; overflow: hidden; padding: 2% 2% 1.7% 6%; }
#serviceSec #serviceList li:first-child h3 { float: right; margin: 30px 0 0; text-align: left; width: 51%; }
#serviceSec #serviceList li:first-child h3 img { max-width: 226px; width: 40%; }
#serviceSec #serviceList li:first-child div { float: left; width: 44%; margin: 0; }
#serviceSec #serviceList li:first-child p { float: right; width: 51%; margin: 30px 0 0; }


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

	#serviceSec { padding: 5.4vw 0; }
	#serviceSec #serviceList { margin-top: 1.92vw; }
	#serviceSec #serviceList li { margin-top: 4.4vw; }
	#serviceSec #serviceList li div { margin-top: 0.6vw; }
	#serviceSec #serviceList li p { margin-top: 1.1vw; font-size: 1.8vw; }

}

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

	#serviceSec { background-size: 28%; padding: 9.4vw 0; }
	#serviceSec .contentsTitle { width: 100%; }
	#serviceSec #serviceList { width: 92%; margin: 4vw auto 0; display: block; }
	#serviceSec #serviceList li { border-width: 2px; width: 100%; border-radius: 20px; padding: 2.5vw 0; }
	#serviceSec #serviceList li:first-child div,
	#serviceSec #serviceList li div { margin: 3.5vw 8% 0; }
	#serviceSec #serviceList li:first-child p,
	#serviceSec #serviceList li p { font-size: 4vw; line-height: 1.5; margin: 3vw 4.5% 0; }
	
	#serviceSec #serviceList li:first-child h3,
	#serviceSec #serviceList li:first-child h3 img,
	#serviceSec #serviceList li:first-child div,
	#serviceSec #serviceList li:first-child p { float: none; width: 100%; }
		
	#serviceSec #serviceList li:first-child { padding: 2.5vw 0; }
	#serviceSec #serviceList li:first-child h3 { width: 84%; margin: 0 8%; }
	#serviceSec #serviceList li:first-child h3 img { max-width: 100%; width: 100%; }
	#serviceSec #serviceList li:first-child div { width: 84%; }
	#serviceSec #serviceList li:first-child p { width: 91%; }

}

/*parking*/
#parkingSec { background-color: #1eb4d7; padding: 70px 0 75px; }
#parkingSec #parkingArea { background-color: #fff; border: solid 3px #004ea3; border-radius: 30px; padding: 2% 2.2%; }
#parkingSec #parkingArea #parkingInner { transform: translateY(-4.5%); margin: 0 1.5%; overflow: hidden; }
#parkingSec #parkingArea #parkingInner #parkingTxt { font-size: 1.46rem; line-height: 1.7; margin-top: 10px; float: left; width: 60%; }
#parkingSec #parkingArea #parkingInner #parkingImg { width: 37.5%; margin-left: 2%; float: right; }
#parkingSec #parkingArea #parkingInner #parkingBtn { float: left; width: 60%; margin: 1.5% auto 0; text-align: center; }
#parkingSec #parkingArea #parkingInner #parkingBtn .arrow_btn span { padding-left: 0; padding-right: 10%; text-align: center; }
#parkingSec #parkingArea #parkingInner #parkingBtn .win_btn { background: #014fa4 url("/parking/recruit/common/images/common_icon_win.png") no-repeat center right 12px / 7%; }
#parkingSec #parkingArea #parkingInner #parkingBtn .win_btn span { background: none; }

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

	#parkingSec { padding: 5.4vw 0; }
	#parkingSec #parkingArea #parkingInner #parkingTxt { margin-top: 0.9%; font-size: 1.8vw; }
	#parkingSec #parkingArea #parkingInner #parkingBtn { margin-top: 2.7%; }

}

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

	#parkingSec { padding: 9vw 0; }
	#parkingSec #parkingArea { padding: 5vw 3vw 6vw; border-width: 2px; border-radius: 20px; }
	#parkingSec #parkingArea #parkingInner { display: block; transform: translateY(0); }
	#parkingSec #parkingArea #parkingInner #parkingTxt { font-size: 4vw; line-height: 1.5; margin-top: 0; float: none; width: 100%; }
	#parkingSec #parkingArea #parkingInner #parkingImg { width: 100%; margin: 3vw auto 0; float: none; }
	#parkingSec #parkingArea #parkingInner #parkingBtn { float: none; width: 100%; margin-top: 7vw; }

}


/*--------------------------------------------------------------------------------------------------------------------------------------------------------
	panorama.html
--------------------------------------------------------------------------------------------------------------------------------------------------------*/
#panoramaIframe { position: fixed; width: 100%; height: 100%; }