/*** index.css is the style of "index.jsp" ***/
/*
 * The "i" represents "index"
 * The "h" represents "head"
 * The "b" represents "body"
 * The "f" represents "foot"
 * The "nav" represents "navigation"
 * The "u" represents "up"
 * The "d" represents "down"
 * The "s" represents "select"
 */

/* The head of index */      
.i_h{
	width: 100%;
	height: 44px;
	background-color:#FFFFFF;
}
.i_h_nav{
	width: 80%;
	height: 44px;
	line-height: 44px;
	float: left;
}
.i_h_nav_s{
	background-color: rgba(96,96,96,0.08);
}
.i_h_u{
	float: left;
	width: 10%;
	height: 44px;
	line-height: 44px;
}

.i_h_logo{
	width: 10%;
	height: 100%;
	text-align: center;
	float: left;
}
.i_h_logo img{
	cursor: pointer;
	height: 100%;
}
.i_h_nav ul{
	list-style: none;
	padding: 0 0;
	margin:0 10% 0 10%;
	width: 95%;
	height: 100%;
}
.i_h_nav ul li{
	list-style: none;
	float: left;
	width: 10%;
	height: 100%;
	margin: 0 1% 0 1%;
	color: #000000;
	font-size: 18px;
	text-align: center;
	white-space: nowrap;
	cursor:pointer;
}
.i_h_u div{
	float: left;
	width: 40%;
	height: 100%;
	margin: 0 5% 0 5%;
	cursor: pointer;
	text-align: center;
}
.i_h_b{
	width: 100%;
	height: 0.6%;
	background-color: #A7CE39;
}

/* The body of aboutCompany 
 * "i" represents introduce
 * "h" represents history
 * "u" represents up
 * "d" represents down
 * "t" represents triangle
 * "con" represents content
 * */

/* The page of fade in */
@keyframes fadein{
	0%{
		opacity:0;
		background-color: white;
	}
	100%{
		opacity:1;
		background-color: white;
	}
}

.c_fadein{
	animation-name: fadein;
	animation-duration: 3s;
	animation-timing-function: ease-in;
	animation-iteration-count: 1;
}

.c_i{
	width: 100%;
	line-height:34px;
	font-size: 20px;
}

.c_i_u{
	height: 36%;
	width: 100%;
	text-align: center;
}

.c_i_d{
	height: 64%;
	width: 100%;
}

.c_i_d p{
	margin: 2% 14% 2% 14%;
}

.c_h{
	width: 100%;
	line-height:34px;
	font-size: 20px;
}

.c_h_u{
	text-align: center;
}

.c_h_d ul{
	margin: 0 0;
	padding: 0 0;
}

.c_h_d ul li{
	list-style: none;
	margin: 4% 14% 4% 14%;
	padding: 0 0;
}

.c_h_d ul li h2:before{
    content: '';
	width: 0;
    height: 0;
    border-left: 10px solid #A7CE39;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
}

/* The foot of index 
 * "l" represents left
 * "m" represents middle
 * "r" represents right
 * "b" represents bottom
 * */
.i_f{
	width: 70%;
	height: 30%;
	padding:2% 15% 2% 15%;
	background-color:#CCCCCC;
}
.i_f ul{
	list-style: none;
	padding: 0 0;
	width: 100%;
	height: 100%;
}
.i_f ul li{
	list-style: none;
	width: 100%;
	height: 10%;
	margin: 2% 0 2% 0;
	color: #000000;
	cursor:pointer;
}
.i_f_l{
	width: 30%;
	height: 100%;
	float: left;
}
.i_f_m{
	width: 30%;
	height: 100%;
	margin: 0% 5% 0% 5%;
	float: left;
}
.i_f_r{
	width: 30%;
	height: 100%;
	float: left;
}
.i_f_b{
	width: 100%;
	height: 40px;
	line-height: 40px;
	text-align:center;
	float: left;
	background-color:#CCCCCC;
}