@charset "UTF-8";
/*------------------------------------*\
  RESET
\*------------------------------------*/
/* http://meyerweb.com/eric/tools/css/reset/
   v2.0b1 | 201101
   NOTE:WORK IN PROGRESS
   USE WITH CAUTION AND TEST WITH ABANDON */

html,body,div,span,applet,object,iframe,
h1,h2,h3,h4,h5,h6,p,blockquote,pre,
a,abbr,acronym,address,big,cite,code,
del,dfn,em,img,ins,kbd,q,s,samp,
small,strike,strong,sub,sup,tt,var,
b,u,i,center,
dl,dt,dd,ol,ul,li,
fieldset,form,label,legend,
table,caption,tbody,tfoot,thead,tr,th,td,
article,aside,canvas,details,figcaption,figure,
footer,header,hgroup,menu,nav,section,summary,
time,mark,audio,video{
  margin:0;
  padding:0;
  border:0;
  outline:0;
  font-size:100%;
  font:inherit;
  vertical-align:baseline;
}
/* HTML5 display-role reset for older browsers */
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section{
  display:block;
}
body{
  line-height:1;
}
ol,ul{
  list-style:none;
}
blockquote,q{
  quotes:none;
}
blockquote:before,blockquote:after,
q:before,q:after{
  content:'';
  content:none;
}
/* remember to define visible focus styles!
:focus{
  outline:?????;
} */

/* remember to highlight inserts somehow! */
ins{
  text-decoration:none;
}
del{
  text-decoration:line-through;
}

table{
  border-collapse:collapse;
  border-spacing:0;
}

/*------------------------------------*\
  MAIN
\*------------------------------------*/
a{
	color:#625e5e;
	text-decoration:none;
}

body{
	min-width:320px;
	background:#d9d5d5;
	font:14px/20px Arial,Helvetica,"黑体",sans-serif;
	color:#625e5e;
}

#container{
	min-width:320px;
	max-width:960px;
	margin:0 auto;
	-webkit-box-shadow:0 0 5px #000000;
	   -moz-box-shadow:0 0 5px #000000;
			box-shadow:0 0 5px #000000;
	padding-top:25px;
}

header{
	width:100%;
}
#lang{
	position:fixed;
	height:20px;
	padding:3px 0 2px;
	text-align:right;
	background:url(../images/lang_bg.jpg) left top no-repeat transparent;
	z-index:100;
	top:0;
	max-width:960px;
	width:100%;
}
#lang .zh{
	margin-right:25px;
}
#banner{
	display:block;
	width:100%;
	min-height:190px;
	background:#ffffff;
	position:relative;
	overflow:hidden;
}
#logo{
	padding:5% 2% 5% 3%;
}
#slogan{
	position:relative;
	top:-100px;
}
#lin{
	position:absolute;
	right:0; top:0;
}

#body{
	width:100%;
}
.redline{
	width:100%;
	height:6px;
	background:url(../images/red_line.jpg) left top no-repeat transparent;
}

.pages{
	padding:25px 0;
}
.page{
	display:none;
}

#homepage{
	background:#560202;
}
.home_boxes{
	padding:25px 2%;
	width:96%;
}
.home_box{
	display:block;
	float:left;
	width:29%;
	margin:0 2%;
	height:400px;
	overflow:hidden;
	position:relative;
	-webkit-box-shadow:1px 2px 3px #000000;
	   -moz-box-shadow:1px 2px 3px #000000;
			box-shadow:1px 2px 3px #000000;
}
.home_box .top{
	height:340px; width:100%;
	text-align:center;
}
.home_box .top img{
	display:none;
}
.home_box .bottom{
	height:25px; width:90%;
	padding:20px 5% 15px;
	position:absolute;
	right:0; bottom:0;
	background:url(../images/home_button.jpg) right top no-repeat transparent;
	color:#ffffff;
	font-size:16px;
	opacity:0.8;
	filter:alpha(opacity=80);
}
.home_box:hover .bottom{
	opacity:1;
	filter:alpha(opacity=100);
}

#story, #turning-point, #reason{
	background:#ffffff;
	padding:2% 0;
}

.feature{
	width:92%; height:auto;
	margin:0 4% 20px;
	background:url(../images/feature_bg.jpg) right bottom repeat-x #ffffff;
	-webkit-box-shadow:1px 2px 3px #000000;
	   -moz-box-shadow:1px 2px 3px #000000;
			box-shadow:1px 2px 3px #000000;
	position:relative;
}
.feature_img{
	width:275px;
	/* width:30%; height:100%; */
	float:left;
	line-height:0;
	position:relative;
	overflow:hidden;
}
.feature_img img{
	/* height:100%; */
}
.feature_text{
	/* width:62%; */
	/* float:right; */
	padding: 3% 4%;
	font-size:20px;
	line-height:26px;
	position:absolute;
	left:275px; top:0; right:0; bottom:0;
}
.feature h1{
	color:#000000;
	font-size:34px;
	line-height:1.5;
	margin-bottom:20px;
}
.feature h2{
	font-size:25px;
	color:#c80000;
}

.two-column{
	width:92%;
	padding:0 4%;
}
.column{
	width:48%;
	padding:0 1%;
	float:left;
}
.column h3{
	color:#c80000;
	font-size:22px;
	line-height:30px;
	margin-bottom:5px;
}
.column p{
	margin-bottom:15px;
}

.pager{
	width:92%;
	padding:20px 2%;
}
.pager_item{
	display:block;
	float:left;
	width:29%; height:25px;
	padding:20px 0 15px;
	margin:0 2%;
	text-align:center;
	color:#ffffff;
	overflow:hidden;
	background:url(../images/home_button.jpg) left top no-repeat #560202;
}
.pager_item:hover,
.pager_item.on{
	opacity:0.9;
	filter:alpha(opacity=90);
}


footer{
	background:#ffffff;
	padding:20px 0;
	background:url(../images/footer_bg.jpg) left top no-repeat #ffffff;
}
.links, .quote{
	text-align:center;
}
.links{
	margin-bottom:15px;
}
.links a{
	color:#b32226;
}
.quote{
	color:#4c4344;
}

.popup{
	background:url(../images/feature_bg.jpg) left bottom no-repeat #ffffff;
}
.popup .header{
	padding:30px 5% 20px;
	background:url(../images/feature_bg.jpg) left bottom no-repeat #ffffff;
}
.popup h3{
	font-size:17px;
	color:#d40101;
	margin-bottom:5px;
}
.popup h2{
	font-size:22px;
}
.popup .row{
	border-bottom:1px solid #feaeae;
}
.popup .cell{
	float:left;
	display:block;
	width:45%;
	padding:20px 2% 20px 3%; 
}
.popup .cell.center{
	float:none;
	width:90%;
	text-align:center;
}

.popup_pages{
	position:relative;
}
.popup_page{
	width:90%;
	padding:20px 5% 40px;
	display:none;
}

#thanks .row{
	padding:20px 5%;
}

/*------------------------------------*\
  HELPER CLASSES
\*------------------------------------*/
.clear{ clear:both; }
.red{ color:#d40101; }