/*
 * SYSTEX UCOM
 * EDITOR - MIKE LIU
 * mikeliu@systex.com
 */
header { height: 1000px; }

section { padding: 80px 0; clear: both;  color: #333;  }
section .container { margin: 0 11%; }

section h1 , section h2 { text-align: center; font-weight: 600; }
section h1 { line-height: 1.4em }
section h2 { line-height:40px;  }
section h3 , section h4 { font-weight: 600; }
section p { font-size: 16px; text-align: justify; text-justify:inter-ideograph; line-height: 25px; }

section ul li { font-size: 16px; text-align: justify; text-justify:inter-ideograph; }

	@media (max-width: 1600px) {
		section p { line-height: 23px; }
	}

	@media (max-width: 1440px) {
		header { height: 900px; }

	}
	@media (max-width: 1366px) {
		header { height: 768px; }
	}

	@media (max-width: 1280px) {
		header { height: 1000px; }
		section h1 { font-size: 1.9em; }
		section p { font-size: 15px; line-height: 23px; }
	}

	@media (max-width: 600px) {
		section .container { margin: 0 2.2222%; }
		section h1 { font-size: 1.3em; text-align: left;  }
	}

	@media (max-width: 450px) {

		header { height: 580px; }

	}



#Visual { padding-top: 12%; background: url(../images/visual_main.jpg) #EFEFED ; background-position: center; background-size: cover; }
#Visual img { width: 800px; background: rgba(255,255,255,0.5); padding: 10px 15px; border-radius: 20px; position: absolute; top: 33%; left: 13% }
#Visual .info { position: absolute; top: 57.666666%; left: 13.666666%; width: 41%; min-height: 150px; }
#Visual .info h3 { font-weight: 600; color: #C33; text-align: center; }
#Visual .info p { text-align: center; font-size: 16px; line-height: 26px;  }
#Visual .top_BTN { text-align:center; padding-top:18px; }

	@media (max-width: 1600px) {
		#Visual img { width: 760px;  }
		#Visual .info { left: 15.88888%; width: 48%;  left: 13.222222%; }
	}

	@media (max-width: 1440px) {
		#Visual img { width: 680px;  }
		#Visual .info { top: 61.666666%;  width: 56%; left: 9.222222%; }
	}

	@media (max-width: 1280px) {
		#Visual img { width: 690px;  }
		#Visual .info { top: 57.666666%; width: 61%; left: 9.888888%; }
	}

	@media (max-width: 1024px) {
		#Visual img { width: 590px; left: 7.8888888%; background: rgba(255,255,255,0.8);  }
		#Visual .info { left: 16%; width: 65%; left: 8.222222%; }
		#Visual .info h3 { font-size: 1.5em; text-align: left; }
		#Visual .info p { text-align: left; font-size: 15px;   }


	}

	@media (max-width: 960px) {
		#Visual { background: url(../images/visual_main_960.jpg) #EFEFED ; background-position: bottom right; background-size: cover; }
		#Visual img { width: 650px; background: rgba(255,255,255,0.8); padding: 10px 15px; top: 30%; left: 0%; border-radius: 0px; }
		#Visual .info { top: 51.77777%; left: 0%; width: 650px; background: rgba(255,255,255,0.8); padding: 10px 25px; border-radius: 0px; }
		#Visual .info h3 { text-align: center; line-height: 27px; font-size: 1.43em; }
		#Visual .info p { text-align: center; }
	
	}
	@media (max-width: 720px) {
		#Visual img { width: 480px; top: 45%; }
		#Visual .info { top: 60.66666%; left: 0%; width: 480px; }
	}

	@media (max-width: 600px) {
		#Visual { background: url(../images/visual_main_480.jpg) #FFF no-repeat; background-size: 100%;}
		#Visual img { width: 100%; top: 50.666666%; background: rgba(255,255,255,0.4); }
		#Visual .info { width: 100%; padding: 0px 25px; top: initial; bottom: 0; background: rgba(255,255,255,0.6); }
		#Visual .info h3 { font-size: 1.20em; }
	}

	@media (max-width: 480px) {

	}

	@media (max-width: 450px) {
		
		#Visual img { width: 100%; top: 50.666666%; background: rgba(255,255,255,0.4); }
		#Visual .info { width: 100%; padding: 0px 25px; top: initial; bottom: 0; background: rgba(255,255,255,0.6); }
		#Visual .info h3 { font-size: 1.43em; }
		#Visual .top_content { display: none; padding-top:5px;   }


	}


#page_A { background: url(../images/illu_03.png) #EDEBE6 no-repeat fixed; background-size: 60%; background-position: center right }
#page_A img { width: 100%;  }
#page_A p { padding-right: 25px; }
#page_A .top { padding-top: 6%; padding-bottom: 10px; }
#page_A .middle { padding-bottom: 10px; }

	@media (max-width: 1600px) {
		#page_A img { padding-top: 10%; }
		#page_A p { padding-right: 5px; }
	}

	@media (max-width: 1440px) {
		#page_A img { padding-top: 20%; }
	}

	@media (max-width: 1280px) {

	}

	@media (max-width: 960px) {
		#page_A img { padding-top: 0%; }
	}


#page_B { background: url(../images/illu_04.png) #D9E2E2 no-repeat fixed; background-size: 55%; background-position: center left  }
#page_B img {width: 100%;}

#page_B .info {padding-bottom: 10px;}

#page_B .first { padding-top: 6%; }
#page_B .first a { color: #C33; }
#page_B .first a:hover { background: #FC0; color: #000; padding: 8px 12px; border-radius: 3px;  }

#page_B .CPT { clear: both; text-align: center; padding-top: 50px;}
#page_B div#CPT { clear: both; width: 100%; }

	@media (max-width: 1600px) {
		#page_B img { padding-top: 10%; }
		#page_B .info h4 { line-height: 28px; }
	}

	@media (max-width: 1440px) {
		#page_B img { padding-top: 20%; }
	}

	@media (max-width: 960px) {
		#page_B img { padding-top: 6%; }
		#page_B a div { width: 100%; margin: 5px 0; }
		#xs-CPT div { width: 100%; margin: 2px 0; }
	}

#SA_INFO { padding-top: 60px; }
#SA_INFO p { font-weight: 600; color: #C30 }
#SA_INFO ul { margin-left: -20px; }
#SA_INFO ul li { font-size: 15px; line-height: 25px; padding-bottom: 3px; }

.modal-header h4 { text-align: center; background: #096; color: #FFF; padding: 15px 0; border-radius: 5px;   }

.modal-body ul { margin-left: -25px; }
.modal-body ul li { border-bottom: dashed 1px #999; padding: 5px 0; margin: 5px 0; font-weight: 600; }

	@media (max-width: 500px) {
		.modal-body ul { margin-left: -50px; }

	}
.modal-body .JKT { width:90%; }
	@media (max-width: 1440px) {
		.modal-body .JKT { margin-top: -140px; }
	}



#MS_FORM ul li input { border:0px; background: #FFF; font-size: 1.4em; padding: 8px 15px; width: 100%; border-radius: 5px; box-shadow: rgba(0,0,0,.3) 0px 0px 4px 0px;  }
#MS_FORM ul li input:focus { background: #F2E8CC; }
#MS_FORM ul li select { border:0px; background: #FFF; font-size: 1.2em; padding: 8px 15px; width: 100%; border-radius: 5px; box-shadow: rgba(0,0,0,.3) 0px 0px 4px 0px;  }
#MS_FORM ul { list-style: none; margin-left: -40px; }
#MS_FORM ul li { text-align: center; border-bottom: 0px; }
#MS_FORM .send { text-align: center; }
#MS_FORM .send input { width: 50%; font-size: 1.4em; border:0px; padding: 8px 15px; border-radius: 5px; background: #096; color: #FFF; }
#MS_FORM h4 { font-size: 1.5em; }



#submit_INFO { background: #FC0; color: #000; font-size: 1.5em; padding: 10px 15px; padding-top: 20px; width: 400px; text-align: center; position: absolute; right: 10%; top: 14%; font-weight: 600; border-radius: 15px; }
#submit_INFO2 { background: #FC0; color: #000; font-size: 1.5em; padding: 10px 15px; padding-top: 20px; width: 80%; margin: auto; text-align: center; font-weight: 600; border-radius: 15px; }