html { 
    height: 100vh;
}
img{border:0px;}
body{
    min-height: 100vh;
	margin:0;
	font-size: 16px;
	/* font-size: 1.11vw; */
	
	font-family:Microsoft JhengHei, Ariel;
	overflow-x:hidden;
}

table, th, td {
	border: 0px solid black;

}

.font-small{font-size:0.6em;line-height:1.6em;}
.font-large{font-size:1.3em;line-height:1.3em;}
.h0{font-size: 4.5em;	}
.h1{font-size: 3.750em;	}
.h2{font-size: 1.875em	;line-height: 1.5em;}
.p1{font-size: 2em		;line-height: 1.5em;}
.p2{font-size: 1.5em	;line-height: 1.5em;}
.p3{font-size: 1em		;line-height: 2.5em;}
.pb{font-size: 1.25em;}
.p3btn{font-size:0.8em;line-height:1em;}


.white-text		{color:white;}
.text-center	{text-align: center;}

/* .white-para{font-size:1.3em}
.black-para{font-size:1.7em;color:white;}
.green-para{font-size:1.7em;color:white;} */

.fixed-bg{
 	height: 500px; 
	background-attachment: fixed;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	color:white;
}
.fixed-bg.bg1 	{	background-image: url("../part1/img_0Cover_0.jpg");		}		
.fixed-bg.bg2 	{	background-image: url("../part1/img_0Cover_2.jpg");		}

.fixed-bg.bg3 	{	background-image: url("../part1/img_1Squatter_1.jpg");	}
.fixed-bg.bg4 	{	background-image: url("../part1/img_1Squatter_2.jpg");	}
.fixed-bg.bg5 	{	background-image: url("../part1/img_1Squatter_6.jpg");	}

.fixed-bg.bg6 	{	background-image: url("../part1/img_2Fire_1.jpg");		}
.fixed-bg.bg7 	{	background-image: url("../part1/img_2Fire_2.jpg");		}
.fixed-bg.bg8	{	background-image: url("../part1/img_2Fire_5.jpg");		}

.fixed-bg.bg9	{	background-image: url("../part1/img_3Reset_1.jpg");		}
.fixed-bg.bg10	{	background-image: url("../part1/img_3Reset_2.jpg");		}
.fixed-bg.bg11 	{	background-image: url("../part1/img_3Reset_9.jpg");		}
.fixed-bg.bg12	{	background-image: url("../part1/img_3Reset_5.jpg");		}
.fixed-bg.bg13	{	background-image: url("../part1/img_3Reset_10.jpg");	}
.fixed-bg.bg14	{	background-image: url("../part1/img_3Reset_8.jpg");		}

.bg-map	{
	background-image:url("../part2/UTSR_v0_4_ch_map.svg");
/* 	min-height: 500px; */
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center top;
	width: 100%;
    height: 0;
	padding-bottom: 57%;
}

.part-white {
	background-color: #FFFFFF;
/* 	min-height: 700px; */

}

.part-red {
	background-color: #bf360c;
	min-height: 500px;
}
.part-green {
	background-color: #33691e;
	color:white;
	min-height: 532px;
}
.part-green-en {
	background-color: #33691e;
	color:white;
	min-height: 712px;
}
.part-blue-green {
	background-color: #00838f;
	color:white;
/* 	padding:  auto 80px; */
	min-height: 200px;
}

.part-yellow {
	background-color: #cddc39;
	min-height: 500px;
}

.part-light-blue {
	background-color: #4fc3f7;
	min-height: 500px;
}
.part-white table,
.part-blue-green table,
.part-yellow table,
.part-light-blue table{
	max-width:80%;
	text-align:justify;
}


.part-2 {
	background-color: #00828e;
	min-height: 532px;
}
.part-3 {
	background-color: #0C46A0;
	min-height: 532px;
}
.part-2-en {
	background-color: #00828e;
	min-height: 712px;
}
.part-3-en {
	background-color: #0C46A0;
	min-height: 712px;
}
.blue-7-num{
	margin:0px 0px 0px 5%;
}
.blue-7-word{
	text-align:center;
	margin-bottom:0px;
	margin-top:0px;
}
.blue-7-box-up{
	width:25%;
	max-width:25%;
	padding:15px 10px 20px 10px;
}
.blue-7-box-low{
	padding:15px 10px 20px 10px;
}


.slide {
	width: 100%;
	display: table;
}  

.answer {
    /* background:red; */
	color:red;
}

.table-vcenter {	
	display: table-cell;
	vertical-align: middle;
}
.table-vlow {	
	display: table-cell;
	padding-top:100px;
}
.table-hcenter{
	
	margin: 0px auto;
	
} 
.table-hleft{

	margin-left: 23%;
	max-width: 54%;
} 
.table-hright{
	margin-left: auto;
	text-align: right !important;
	max-width: 54%;
} 

.part3-head{
	margin: 0px auto;
	width: 90%;
	max-width:1200px;
}
.part3-table{
	margin: 0px auto;
}

.greyground{
	background: rgba(25, 25, 25, .75);
	color:white;
}

.blackground{
	background: #726e62;
	color:white;

}
.sp{
	font-size:		1.875em;
	line-height:	1.5em;
	margin-top:		55px;
	margin-bottom:	40px;
	margin-left:	auto;
	margin-right:	auto;
	font-weight:	bold;
}

.header {
	
	/*Opacity start     all to be adjust*/
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	filter: alpha(opacity=100);
	-moz-opacity: 1;
	-khtml-opacity: 1;
	opacity: 1;      
	/*Opacity end*/
	color: white;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%; 
	height: 9%; 
	padding: 0;
	margin: 0;
	
}
.footer{
	margin:auto;
	width:80%;	
	padding-bottom:30px;
 	padding-top:30px;
	font-size:0.8em;
}

#fontsizerChanger a			{color:#FFFFFF;text-decoration:none;}
#fontsizerChanger td		{background-color: #be350b;}
#fontsizerChanger a.active	{color:#be350b;} 
#fontsizerChanger td.active	{background-color: #FFFFFF;}
#fontsizerChanger div.active{color:#be350b;background-color: #FFFFFF;}
#fontsizerChanger td:hover a{color: #be350b;cursor: pointer;}
#fontsizerChanger td:hover	{background-color: #FFFFFF;cursor: pointer;}
#fontsizerChanger div:hover	{color: #be350b;background-color: #FFFFFF;cursor: pointer;}

g#point polygon:hover,
#point polyline:hover,
g#point > g > path:hover,
g#point > g > a > path:hover {
    fill: #ff3c00 !important;
    cursor: pointer;
}

.album-title{color:#606060;}


#menu a{color:#FFFFFF;}
#menu a:hover{color:#be350b;}
#menu li a{width:150px;}
ul#drop-nav>li>a {margin-bottom:3px;}

/*simple pull down table*/
#menu ul {list-style: none;padding: 0px;margin: -3px 0px 0px -2px;border:1px solid transparent;}
#menu ul li {display: block;position: relative;float: left;border:1px solid transparent;}
#menu li ul {display: none;}
#menu ul li a {display: block;background: #be350b;padding: 10px 10px;text-decoration: none;white-space: nowrap;}
#menu ul li a:hover {background: #FFFFFF;color:#be350b;}
#menu li:hover ul {display: block; position: absolute;}
#menu li:hover li {float: none;}
#menu li:hover a {background: #be350b;}
#menu li:hover li a:hover {background: #FFF;}
#drop-nav li ul li {border-top: 0px;}

/********end simple pull down table*/


#ref_list a{color:#FFFFFF;text-decoration:none;background-color: #be350b;}
#ref_list a:hover{color:#be350b;text-decoration:none;background-color: #ffffff;}

#pig3		img:hover,        
#temp3		img:hover,
#fire3		img:hover,
#school3	img:hover,
#farm3		img:hover,
#pig2:hover,  
#temp2:hover,
#fire2:hover,
#school2:hover,
#farm2:hover
{cursor: pointer;}