/*** 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 aboutPatent 
 * "p" represents patent
 * "b" represents body
 * "t" represents title
 * "c" represents content
 * "img" represents image
 * "th" represents thesis
 * */


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

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

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

.p_b_t{
	text-align: center;
}

.p_b_c{
    margin: 4% 14% 4% 14%;
}

.p_b_img{
	text-align: center;
    margin: 4% 4% 4% 4%;
	height: 80%;
}

.p_b_img img{
	width: 18%;
	height: 40%;
}

.p_b_th h1{
	text-align: center;
}

.p_b_th dl{
    margin: 4% 14% 4% 14%;
}

.p_b_th dl dt{
	font-weight: bolder;
	margin-top: 2%;
}



/* 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;
}