body {
	margin:0; 
	font-size:12px; 
	line-height:20px; 
	font-family:微軟正黑體,Arial, Helvetica, sans-serif; 
	background: url(../images/body_bckg.gif) repeat-x;
	padding-bottom:100px;
}

.topic
{
	position:relative; 
	top:-15px;
	left:50px;
	color:white;
	text-shadow:3px 3px 6px black;
	font-family:微軟正黑體;
	font-size: 30px;
}

.title
{
	color: #666;
	font-family:微軟正黑體;
	font-size: 18px;
	padding:8px;
	border-radius: 16px;
}
.description
{
	color: #666;
	font-family:微軟正黑體;
	font-size: 12px;
	line-height: 20px;
}
.content
{
	margin-top: 20px;

}
.menu
{
	display:none;
}
.index_img
{
	width: 20%;
	position:relative;
	float:left;
	margin-bottom: 50px;
	margin-right: 20px;
	
}

#sidebar {float:center; padding:0px 0px 0px 0px; }
#sidebar h2 {font-family:"Impact", "Tahoma", Arial, "Geneva", sans-serif; margin:0 0 20px 0; text-transform:uppercase; font-size:18px; font-weight:normal;}
#sidebar ul {margin:0; padding:0;}
#sidebar li {list-style:none; border-bottom:1px solid #ebebeb; padding:3px 2px;}
#sidebar li:hover {background-color:#f3f3f3;}
#sidebar a {text-decoration:none;color:#AAAAAA}

#partner {text-align:left;}
#partner div{float:left;padding:10px}
#partner ul {margin:0; padding:0;width:100%;list-style-type:none;}
#partner li {padding:0px;width:100%; float:left;margin:10px;}
#partner span {font-size:18px;font-family:Segoe UI Black,微軟正黑體;}
#partner img {width: 50px; height:50px;margin:0px;position:relative;float:left}

#roadmap {height:250px;float:left;width:100%;}
#roadmap div{float:left;padding:10px;}
#roadmap ul {margin:0; padding:10px;list-style-type:none;}
#roadmap li {padding:0px;width:25%;float:left;padding-right:20px}
#roadmap span {font-size:18px}
#roadmap a {color:white;}

#contact {float:left;padding:10px;}
/*
#roadmap span {font-size:15px;font-family:Segoe UI Black,微軟正黑體;}
#roadmap img {width: 50px; height:50px;margin:0px;position:relative;float:left}
*/
@media (min-width: 768px) {
	body {
		background: url(../images/bg_right.png) no-repeat, url(../images/bg_left.png) no-repeat, url(../images/body_bckg.gif) repeat-x;
		background-position: calc(50% + 300px) 100px, calc(50% - 300px) 100px, top;
	}
	.topic
	{
		top:-15px;
		font-size: 40px;
	}
	.title
	{
		font-size: 22px;
		padding:10px;
		border-radius: 20px;
	}
	
	.menu
	{
		display:table-cell;
	}
	.description
	{
		font-size: 14px;
		line-height:22px;
	}
	.content
	{
		margin-top: 10px;
	}
	

	#partner {text-align:center;}
	#partner div{background:#b6d3e6;padding:10px;width:100%;text-align:center}
	#partner ul {margin:0; padding:0;width:100%}
	#partner li {border:3px solid #b6d3e6;padding:0px;width:180px; float:left;margin:10px;border-radius: 10px;}
	#partner span {font-size:12px;color:white;font-family:Segoe UI Black,微軟正黑體}
	#partner img {width: 120px; height:120px;margin:20px}
	
	#roadmap {width:500px;}
	#contact {float:right;}
	
}

@media (min-width: 992px) {
  	body {
		background-position: calc(50% + 400px) 100px, calc(50% - 400px) 100px, top;
	}
	.topic
	{
		top:-20px;
		font-size: 50px;
	}
	.title
	{
		font-size: 28px;
		padding:15px;
		border-radius: 30px;
	}
	.description
	{
		font-size: 18px;
		line-height:32px;
	}
	.content
	{
		margin-top: 20px
	}
	.index_img
	{
		width: 100%;
	}
	.sperater 
	{
		display: none;
	}
	#roadmap {width:600px;}
}

@media (min-width: 1200px) {
  	body {
		background-position: calc(50% + 500px) 100px, calc(50% - 500px) 100px, top;
	}
	.topic
	{
		top:-20px;
		font-size: 60px;
	}
	.title
	{
		font-size: 35px;
		padding:20px;
		border-radius: 40px;
	}
	.description
	{
		font-size: 22px;
		line-height:38px;
	}
}

/* Set padding to keep content from hitting the edges */
.body-content {
    padding-left: 15px;
    padding-right: 15px;
}

/* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/
.dl-horizontal dt {
    white-space: normal;
}

/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
    max-width: 280px;
}