/*** 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 
 * "m" represents moblie ecg
 * "b" represents body
 * "i" represents information
 * "con" represents content
 * "img" represents image
 * */

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

.m_b{
	margin: 4% 14% 4% 14%;
	line-height:34px;
	font-size: 20px;
}

.m_b h1{
	text-align: center;
}

.m_b_i{
	margin: 6% 0% 6% 0%;
}

.m_b_i div{
	display: inline-block; 
}

.m_b_i_con{
	width:60%;
}

.m_b_i_img{
	width: 38%;
}

.m_b_i_img img{
	width: 80%;
}

.m_b_h{
	margin: 6% 0% 6% 0%;
}

.m_b_h dl dt 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;
}
.img-group {
  position: relative;
  display: inline-block;
    width: 38%;
} 
.img-group img{
	width: 80%;
}       
.img-tip {
  position:absolute;
  bottom:0;
  background:#333;
  color: #fff;
  opacity:0.6;
  display:none;
}        
.img-group:hover .img-tip {
  display:block;
  width: 100%;
  text-align: center;
}