body {
		background-color: #ebddc0;
		margin: 0;
		font-family: Arial, Helvetica, sans-serif, "微軟正黑體", "蘋果儷中黑","宋体", "华文细黑";
  
	}
		
	a {
		color : #ab0534;
	}
	
	a:link {
		color: #ab0534;
	}

	/* visited link */
	a:visited {
		color:#ab0534;
	}

	/* mouse over link */
	a:hover {
		color: #000000;
		text-decoration: none;
	}


	.debug_msg {
		position: absolute;
		left: 0px;
		top: 0px;
		
	}

	/* Large desktop */
	@media (min-width: 1280px) {  
		.bg_img {			
			background: url('/clc/epthoa/demo/images/landing_exam_1200x560.jpg') no-repeat;
			left:50%;
			top: 50%;
			width: 1200px;
			height: 560px;		
			position: absolute;
			margin: -280px 0 0 -600px;
			border-left: solid 0px transparent; 
			border-right: solid 0px transparent; 
			border-bottom: solid 0px #fff;
			box-shadow: 0 0 20px #333;
		}
		.sys_title {	
			color:#ab0534;
			font-size:18px;
			font-weight:bold;
			position: absolute;
			text-align:center;
			left: 38%;
			top: 28%;

		}
		.req_msg {
			color:#ab0534;
			font-size:10px;
			font-weight:bold;
			position: absolute;
			text-align:center;
			left: 45%;
			top: 90%;			
		}
		.sys_msg {	
			color:#ab0534;
			font-size:16px;
			font-weight:bold;
			position: absolute;
			left: 30%;
			top: 50%;
			
		}
		.sys_msg_table {
			width: 500px;
		}
		ul {
			margin: 0;
			padding: 0;
			-webkit-animation: scrollUp 3.5s .16s infinite forwards;
				  animation: scrollUp 3.5s .16s infinite forwards;
		}
		ul li {
			opacity: 1;
			height: 20px;
			padding: 50px;
			list-style: none;
		}

		@-webkit-keyframes fadeOut {
			from {
				opacity: 1;
			}
			to {
				opacity: 0;
			}
		}

		@keyframes fadeOut {
			from {
				opacity: 1;
			}
			to {
				opacity: 0;
			}
		}
		@-webkit-keyframes scrollUp {
			from {
				-webkit-transform: translateY(0);
						transform: translateY(0);
			}
			to {
				-webkit-transform: translateY(-83.3333333333%);
						transform: translateY(-83.3333333333%);
			}
		}
		@keyframes scrollUp {
			from {
				-webkit-transform: translateY(0);
						transform: translateY(0);
			}
			to {
				-webkit-transform: translateY(-83.3333333333%);
						transform: translateY(-83.3333333333%);
			}
		}		
		
		
		.title {
			font-size:30px;
			position: absolute;
			color: #ab0534;
			font-weight: bold;
			text-align: center;
			right: 50%;
			bottom:340px;	
		}
 		
		.button_panel {
			position: absolute;
			width: 400px;
			height: 100px;
			right:35%;
			bottom:140px;
		}
		
		.bottom_panel {
			position: absolute;
			color: #ab0534;
			font-weight: bold;
			width: 450px;
			height: 30px;
			font-size: 15px;
			right:30%;
			bottom:50px;			
		}	

		.footer_text {
			position: absolute;
			color: #ab0534;
			font-weight: bold;
			width: 500px;
			height: 30px;
			font-size: 14px;
			right:%;
			bottom:10px;			
		}
		
		
		
	}	


	@media (min-width: 1213px) and (max-width: 1279px) { 
		.bg_img {
			background: url('/clc/epthoa/demo/images/landing_exam_1200x560.jpg') no-repeat;
			left:50%;
			top: 50%;
			width: 1200px;
			height: 560px;		
			position: absolute;
			margin: -280px 0 0 -600px;
			border-left: solid 0px transparent; 
			border-right: solid 0px transparent; 
			border-bottom: solid 0px #fff;
			box-shadow: 0 0 20px #333;
		}
		.sys_title {	
			color:#ab0534;
			font-size:18px;
			font-weight:bold;
			position: absolute;
			text-align:center;
			left: 38%;
			top: 28%;
		}
		.req_msg {
			color:#ab0534;
			font-size:10px;
			font-weight:bold;
			position: absolute;
			text-align:center;
			left: 45%;
			top: 90%;			
		}
		.sys_msg {	
			color:#ab0534;
			font-size:14px;
			position: absolute;
			left: 38%;
			top: 50%;

		}
		.sys_msg_table {
			width: 500px;
		}
		.msg_box {
			background: transparent;
			border: 0 none;
			width:600px;
			height: 220px;
			verflow-y: scroll;
		}
		.news {
			color:#ab0534;
			font-size:14px;
			font-weight:bold;
			position: absolute;
			left: 12%;
			top: 45%;
		}
		.box {
			color:#ab0534;
			font-size:14px;
			left: -20%;
			top: 49%;
			width: 500px;
			height: 200px;
			margin: auto;
			overflow: hidden;
			position: relative;
		}
		.box::before {
			top: 0;
			left: 0;
			z-index: 1;
			width: 100%;
			content: '';
			height: 10px;
			position: absolute;
		}
		.box::after {
			left: 0;
			bottom: 0;
			z-index: 1;
			width: 100%;
			content: '';
			height: 10px;
			position: absolute;
		}

		ul {
			margin: 0;
			padding: 0;
			-webkit-animation: scrollUp 3.5s .16s infinite forwards;
				  animation: scrollUp 3.5s .16s infinite forwards;
		}
		ul li {
			opacity: 1;
			height: 20px;
			padding: 50px;
			list-style: none;
		}

		@-webkit-keyframes fadeOut {
			from {
				opacity: 1;
			}
			to {
				opacity: 0;
			}
		}

		@keyframes fadeOut {
			from {
				opacity: 1;
			}
			to {
				opacity: 0;
			}
		}
		@-webkit-keyframes scrollUp {
			from {
				-webkit-transform: translateY(0);
						transform: translateY(0);
			}
			to {
				-webkit-transform: translateY(-83.3333333333%);
						transform: translateY(-83.3333333333%);
			}
		}
		@keyframes scrollUp {
			from {
				-webkit-transform: translateY(0);
						transform: translateY(0);
			}
			to {
				-webkit-transform: translateY(-83.3333333333%);
						transform: translateY(-83.3333333333%);
			}
		}		
		
		.title {
			font-size:30px;
			position: absolute;
			color: #ab0534;
			font-weight: bold;
			right:46%;
			bottom:340px;	
		}
		
		.menu_panel {
			font-size:30px;
			position: absolute;
			right:6%;
			bottom:340px;
		
		}
		.button_panel {
			position: absolute;
			width: 300px;
			right:38%;
			bottom:200px;
		}

		.bottom_panel {
			position: absolute;
			color: #ab0534;
			font-weight: bold;
			font-size: 14px;
			right:16%;
			bottom:50px;			
		}	

		.footer_text {
			position: absolute;
			color: #ab0534;
			font-weight: bold;
			font-size: 12px;
			right:20%;
			bottom:15px;			
		}
	}
	
	
	
	@media (min-width: 982px) and (max-width: 1212px) { 
		.bg_img {
			background: url('/clc/epthoa/demo/images/landing_exam_960x448.jpg') no-repeat;
			left:50%;
			top: 50%;
			width: 960px;
			height: 448px;		
			position: absolute;
			margin: -224px 0 0 -480px; 
			border-left: solid 0px transparent; 
			border-right: solid 0px transparent; 
			border-bottom: solid 0px #fff;
			box-shadow: 0 0 20px #333;
		}
		.sys_title {	
			color:#ab0534;
			font-size:18px;
			font-weight:bold;
			position: absolute;
			text-align:center;
			left: 38%;
			top: 28%;

		}
		.req_msg {
			color:#ab0534;
			font-size:10px;
			font-weight:bold;
			position: absolute;
			text-align:center;
			left: 45%;
			top: 90%;			
		}
		.sys_msg {	
			color:#ab0534;
			font-size:14px;
			position: absolute;
			left: 30%;
			top: 50%;

		}
		.sys_msg_table {
			width: 500px;
		}

		.msg_box {
			background: transparent;
			border: 0 none;
			width:500px;
			height: 220px;
			verflow-y: scroll;
		}
		.news {
			color:#ab0534;
			font-size:14px;
			font-weight:bold;
			position: absolute;
			left: 7%;
			top: 37%;
		}
		.box {
			color:#ab0534;
			font-size:14px;
			left: -17%;
			top: 45%;
			width: 500px;
			height: 200px;
			margin: auto;
			overflow: hidden;
			position: relative;
		}
		.box::before {
			top: 0;
			left: 0;
			z-index: 1;
			width: 100%;
			content: '';
			height: 10px;
			position: absolute;
		}
		.box::after {
			left: 0;
			bottom: 0;
			z-index: 1;
			width: 100%;
			content: '';
			height: 10px;
			position: absolute;
		}

		ul {
			margin: 0;
			padding: 0;
			-webkit-animation: scrollUp 3.5s .16s infinite forwards;
				  animation: scrollUp 3.5s .16s infinite forwards;
		}
		ul li {
			opacity: 1;
			height: 20px;
			padding: 50px;
			list-style: none;
		}

		@-webkit-keyframes fadeOut {
			from {
				opacity: 1;
			}
			to {
				opacity: 0;
			}
		}

		@keyframes fadeOut {
			from {
				opacity: 1;
			}
			to {
				opacity: 0;
			}
		}
		@-webkit-keyframes scrollUp {
			from {
				-webkit-transform: translateY(0);
						transform: translateY(0);
			}
			to {
				-webkit-transform: translateY(-83.3333333333%);
						transform: translateY(-83.3333333333%);
			}
		}
		@keyframes scrollUp {
			from {
				-webkit-transform: translateY(0);
						transform: translateY(0);
			}
			to {
				-webkit-transform: translateY(-83.3333333333%);
						transform: translateY(-83.3333333333%);
			}
		}		
		
		.title {
			font-size:30px;
			position: absolute;
			color: #ab0534;
			font-weight: bold;
			right:46%;
			bottom:300px;	
		}
		
		.menu_panel {
			font-size:30px;
			position: absolute;
			right:2%;
			bottom:300px;
		
		}
		.button_panel {
			position: absolute;
			width: 300px;
			right:30%;
			bottom:100px;
		}

		.bottom_panel {
			position: absolute;
			color: #ab0534;
			font-weight: bold;
			font-size: 14px;
			right:10%;
			bottom:50px;			
		}	

		.footer_text {
			position: absolute;
			color: #ab0534;
			font-weight: bold;
			font-size: 12px;
			right:15%;
			bottom:15px;			
		}
	}
	

	
	@media (min-width: 720px) and (max-width: 981px) { 
		.bg_img {
			background:  url('/clc/epthoa/demo/images/landing_exam_650x896.jpg') no-repeat;

			left:50%;
			top: 0%;
			width: 650px;
			height: 896px;		
			position: absolute;
			margin: 20px 0px 20px -325px; 
			border-left: solid 0px transparent; 
			border-right: solid 0px transparent; 
			border-bottom: solid 0px #fff;
			box-shadow: 0 0 20px #333;
		}
		.sys_title {	
			color:#ab0534;
			font-size:18px;
			font-weight:bold;
			position: absolute;
			text-align:center;
			left: 32%;
			top: 22%;

		}
		.req_msg {
			color:#ab0534;
			font-size:10px;
			font-weight:bold;
			position: absolute;
			text-align:center;
			left: 45%;
			top: 90%;			
		}
		.sys_msg {	
			color:#ab0534;
			font-size:12px;
			position: absolute;
			left: 15%;
			top: 38%;

		}
		.sys_msg_table {
			width: 500px;
		}
		.msg_box {
			background: transparent;
			border: 0 none;
			width:550px;
			height: 200px;
			verflow-y: scroll;
		}
		.news {
			color:#ab0534;
			font-size:14px;
			font-weight:bold;
			position: absolute;
			left: 8%;
			top: 27%;
		}
		.box {
			color:#ab0534;
			font-size:14px;
			left: -5%;
			top: 26%;
			width: 500px;
			height: 200px;
			margin: auto;
			overflow: hidden;
			position: relative;
		}
		.box::before {
			top: 0;
			left: 0;
			z-index: 1;
			width: 100%;
			content: '';
			height: 10px;
			position: absolute;
		}
		.box::after {
			left: 0;
			bottom: 0;
			z-index: 1;
			width: 100%;
			content: '';
			height: 10px;
			position: absolute;
		}
		

		ul {
			margin: 0;
			padding: 0;
			-webkit-animation: scrollUp 3.5s .16s infinite forwards;
				  animation: scrollUp 3.5s .16s infinite forwards;
		}
		ul li {
			opacity: 1;
			height: 20px;
			padding: 50px;
			list-style: none;
		}

		@-webkit-keyframes fadeOut {
			from {
				opacity: 1;
			}
			to {
				opacity: 0;
			}
		}

		@keyframes fadeOut {
			from {
				opacity: 1;
			}
			to {
				opacity: 0;
			}
		}
		@-webkit-keyframes scrollUp {
			from {
				-webkit-transform: translateY(0);
						transform: translateY(0);
			}
			to {
				-webkit-transform: translateY(-83.3333333333%);
						transform: translateY(-83.3333333333%);
			}
		}
		@keyframes scrollUp {
			from {
				-webkit-transform: translateY(0);
						transform: translateY(0);
			}
			to {
				-webkit-transform: translateY(-83.3333333333%);
						transform: translateY(-83.3333333333%);
			}
		}		
		.title {
			font-size:30px;
			position: absolute;
			color: #ab0534;
			font-weight: bold;
			right:27%;
			bottom:750px;	
		}
		.menu_panel {
			font-size:30px;
			position: absolute;
			right:25%;
			bottom:350px;
		
		}
		.button_panel {
			position: absolute;
			width: 300px;
			right:20%;
			bottom:500px;
		}

		.bottom_panel {
			position: absolute;
			color: #ab0534;
			font-weight: bold;
			font-size: 18px;
			right:29%;
			bottom:150px;			
		}	

		.footer_text {
			position: absolute;
			color: #ab0534;
			font-weight: bold;
			font-size: 12px;
			right:40%;
			bottom:80px;			
		}
		
		
	}
	
	
	@media  (max-width: 719px) { 
		.bg_img {
			background:  url('/clc/epthoa/demo/images/landing_exam_340x850.jpg') no-repeat;
			left:0%;
			top: 0%;
			width: 340px;
			height: 850px;		
			position: absolute;
			margin: 10px 10px 10px 10px; 
			border-left: solid 0px transparent; 
			border-right: solid 0px transparent; 
			border-bottom: solid 0px #fff;
			box-shadow: 0 0 20px #333;
		}
		.sys_title {	
			color:#ab0534;
			font-size:18px;
			font-weight:bold;
			position: absolute;
			text-align:center;
			left: 10%;
			top: 18%;

		}
		.req_msg {
			color:#ab0534;
			font-size:10px;
			font-weight:bold;
			position: absolute;
			text-align:center;
			left: 35%;
			top: 90%;			
		}
		.sys_msg {	
			color:#ab0534;
			font-size:14px;
			position: absolute;
			left: 5px;
			top: 35%;
		}
		.sys_msg_table {
			width: 300px;
		}
		.msg_box {
			background: transparent;
			border: 0 none;
			width:308px;
			height: 240px;
			verflow-y: scroll;
		}
		.news {
			color:#ab0534;
			font-size:14px;
			font-weight:bold;
			position: absolute;
			left: 13%;
			top:  28%;
		}
		.box {
			color:#ab0534;
			font-size:14px;
			left: -5%;
			top: 33%;
			width: 250px;
			height: 200px;
			margin: auto;
			overflow: hidden;
			position: relative;
		}
		.box::before {
			top: 0;
			left: 0;
			z-index: 1;
			width: 100%;
			content: '';
			height: 10px;
			position: absolute;
		}
		.box::after {
			left: 0;
			bottom: 0;
			z-index: 1;
			width: 100%;
			content: '';
			height: 10px;
			position: absolute;
		}

		ul {
			margin: 0;
			padding: 0;
			-webkit-animation: scrollUp 3.5s .16s infinite forwards;
				  animation: scrollUp 3.5s .16s infinite forwards;
		}
		ul li {
			opacity: 1;
			height: 20px;
			padding: 50px;
			list-style: none;
		}

		@-webkit-keyframes fadeOut {
			from {
				opacity: 1;
			}
			to {
				opacity: 0;
			}
		}

		@keyframes fadeOut {
			from {
				opacity: 1;
			}
			to {
				opacity: 0;
			}
		}
		@-webkit-keyframes scrollUp {
			from {
				-webkit-transform: translateY(0);
						transform: translateY(0);
			}
			to {
				-webkit-transform: translateY(-83.3333333333%);
						transform: translateY(-83.3333333333%);
			}
		}
		@keyframes scrollUp {
			from {
				-webkit-transform: translateY(0);
						transform: translateY(0);
			}
			to {
				-webkit-transform: translateY(-83.3333333333%);
						transform: translateY(-83.3333333333%);
			}
		}		
		.title {
			font-size:16px;
			position: absolute;
			color: #ab0534;
			font-weight: bold;
			right:11%;
			bottom:700px;	
		}
		.menu_panel {
			font-size:16x;
			position: absolute;
			right:30%;
			bottom:300px;
		
		}
		.button_panel {
			position: absolute;
			width: 250px;
			left: 10%;
			bottom:520px;
		}

		.bottom_panel {
			position: absolute;
			color: #ab0534;
			font-weight: bold;
			font-size: 14px;
			right:20%;
			bottom:100px;			
		}	

		.footer_text {
			position: absolute;
			color: #ab0534;
			font-weight: bold;
			font-size: 12px;
			right:25%;
			bottom:50px;			
		}
	}