@charset "UTF-8";
#menu>li .icon-arrow,#menu>li.active .icon-arrow,.icon-navf0,.icon-navf1,.icon-navf2,.icon-navf3,.icon-navf4,.icon-navf5,.icon-navf6,.icon-navf7,.icon-navf8,.icon-navf9,.icon-navn1,.icon-navn2 {
	display: inline-block;
}

.dt-hd-navs li i{width: 3.5em; height: 3.5em;border-radius:50%;}

.icon-navf0 {background-color:#01a67b;}
.icon-navf1 {background-color:#f5c132;}
.icon-navf2 {background-color:#fc8d33;}
.icon-navf3 {background-color:#6bc042;}
.icon-navf4 {background-color:#41bce7;}
.icon-navf5 {background-color:#ff555b;}
.icon-navf6 {background-color:#01b2b2;}
.icon-navf7 {background-color:#7b7ad7;}
.icon-navf8 {background-color:#fe8864;}

.icon-home:before {
	content: "\e900";
	color:#fff; font-size:1.5em;
	vertical-align: middle; line-height:2.2em;
}
.icon-stack:before {
	content: "\e92e";
	color:#fff; font-size:1.5em;
	vertical-align: middle; line-height:2.2em;
}
.icon-stethoscope:before {
	content: "\f0f1";
	color:#fff; font-size:1.7em;
	vertical-align: middle; line-height:2em;
}

.icon-medkit:before {
	content: "\f0fa";
	color:#fff; font-size:1.5em;
	vertical-align: middle; line-height:2.2em;
}

.icon-flag-o:before {
	content: "\f11d";
	color:#fff; font-size:1.5em;
	vertical-align: middle; line-height:2.2em;
}

.icon-map:before {
	content: "\e94b";
	color:#fff; font-size:1.5em;
	vertical-align: middle; line-height:2.3em;
}
.icon-drawer:before {
	content: "\e95c";
	color:#fff; font-size:1.5em;
	vertical-align: middle; line-height:2em;
}

.icon-profile:before {
	content: "\e923";
	color:#fff; font-size:1.4em;
	vertical-align: middle; line-height:2.5em;
}
.icon-calendar:before {
	content: "\e953";
	color:#fff; font-size:1.5em;
	vertical-align: middle; line-height:2.4em;
}
/*圆圈*/
.f_nav{ max-width:640px; margin:0 auto;}
#dt-hd-nav .icon-dt-hd {
	width: 3em;
	height: 3em;
	border:1px solid #ededed;
	border-radius:3em;
	position:fixed;
	left: 8px;
	bottom: 60px;
	background-color:#fff;
}
#dt-hd-nav .icon-dt-hd span{
	width:2.6em; height:2.6em; display:block; background:#246dbf; border-radius:2.6em; margin:0.2em;
	text-align:center;
	}
.icon-menu:before {
	content: "\e600";
	color:#fff; font-size:1.8em; line-height:1.5em; 
}

#dt-hd-nav.dt-hd-active .icon-dt-hd {
	position: absolute;
	left: 8px;
	bottom: 60px;
}


/*圆圈 end*/





.hide {
	display: none;
}





#dt-hd-navs-wrap {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color:#fff;
	z-index: 120;
	max-width:640px; margin:0 auto; 
}

#dt-hd-navs-wrap .dt-hd-navs {
	overflow: hidden;
	position: absolute;
	top: 50%;
	width: 100%;
	margin-top: -131.5px;
}

#dt-hd-navs-wrap .dt-hd-navs li {
	text-align: center;
	width: 33.33333%;
	box-sizing: border-box;
	float: left;
}

#dt-hd-navs-wrap .dt-hd-navs li i {
	margin: 0 auto;
	display: block;
}

#dt-hd-navs-wrap .dt-hd-navs li p {
	margin: 14px 0 20px;
	line-height: 1;
	font-size: 12px;
	color: #000;
}

#dt-hd-navs-wrap .dt-hd-navs li a {
	display: block;
}

@-webkit-keyframes menuin {
	0% {
		-webkit-transform: scale(3);
		-moz-transform: scale(3);
		-ms-transform: scale(3);
		-o-transform: scale(3);
		transform: scale(3);
		opacity: 0;
	}

	100% {
		-webkit-transform: scale(1);
		-moz-transform: scale(1);
		-ms-transform: scale(1);
		-o-transform: scale(1);
		transform: scale(1);
		opacity: 1;
	}
}

@-moz-keyframes menuin {
	0% {
		-webkit-transform: scale(3);
		-moz-transform: scale(3);
		-ms-transform: scale(3);
		-o-transform: scale(3);
		transform: scale(3);
		opacity: 0;
	}

	100% {
		-webkit-transform: scale(1);
		-moz-transform: scale(1);
		-ms-transform: scale(1);
		-o-transform: scale(1);
		transform: scale(1);
		opacity: 1;
	}
}

@-o-keyframes menuin {
	0% {
		-webkit-transform: scale(3);
		-moz-transform: scale(3);
		-ms-transform: scale(3);
		-o-transform: scale(3);
		transform: scale(3);
		opacity: 0;
	}

	100% {
		-webkit-transform: scale(1);
		-moz-transform: scale(1);
		-ms-transform: scale(1);
		-o-transform: scale(1);
		transform: scale(1);
		opacity: 1;
	}
}

@-ms-keyframes menuin {
	0% {
		-webkit-transform: scale(3);
		-moz-transform: scale(3);
		-ms-transform: scale(3);
		-o-transform: scale(3);
		transform: scale(3);
		opacity: 0;
	}

	100% {
		-webkit-transform: scale(1);
		-moz-transform: scale(1);
		-ms-transform: scale(1);
		-o-transform: scale(1);
		transform: scale(1);
		opacity: 1;
	}
}

@keyframes menuin {
	0% {
		-webkit-transform: scale(3);
		-moz-transform: scale(3);
		-ms-transform: scale(3);
		-o-transform: scale(3);
		transform: scale(3);
		opacity: 0;
	}

	100% {
		-webkit-transform: scale(1);
		-moz-transform: scale(1);
		-ms-transform: scale(1);
		-o-transform: scale(1);
		transform: scale(1);
		opacity: 1;
	}
}

@-webkit-keyframes menuout {
	0% {
		-webkit-transform: scale(1);
		-moz-transform: scale(1);
		-ms-transform: scale(1);
		-o-transform: scale(1);
		transform: scale(1);
		opacity: 1;
	}

	100% {
		-webkit-transform: scale(3);
		-moz-transform: scale(3);
		-ms-transform: scale(3);
		-o-transform: scale(3);
		transform: scale(3);
		opacity: 0;
	}
}

@-moz-keyframes menuout {
	0% {
		-webkit-transform: scale(1);
		-moz-transform: scale(1);
		-ms-transform: scale(1);
		-o-transform: scale(1);
		transform: scale(1);
		opacity: 1;
	}

	100% {
		-webkit-transform: scale(3);
		-moz-transform: scale(3);
		-ms-transform: scale(3);
		-o-transform: scale(3);
		transform: scale(3);
		opacity: 0;
	}
}

@-o-keyframes menuout {
	0% {
		-webkit-transform: scale(1);
		-moz-transform: scale(1);
		-ms-transform: scale(1);
		-o-transform: scale(1);
		transform: scale(1);
		opacity: 1;
	}

	100% {
		-webkit-transform: scale(3);
		-moz-transform: scale(3);
		-ms-transform: scale(3);
		-o-transform: scale(3);
		transform: scale(3);
		opacity: 0;
	}
}

@-ms-keyframes menuout {
	0% {
		-webkit-transform: scale(1);
		-moz-transform: scale(1);
		-ms-transform: scale(1);
		-o-transform: scale(1);
		transform: scale(1);
		opacity: 1;
	}

	100% {
		-webkit-transform: scale(3);
		-moz-transform: scale(3);
		-ms-transform: scale(3);
		-o-transform: scale(3);
		transform: scale(3);
		opacity: 0;
	}
}

@keyframes menuout {
	0% {
		-webkit-transform: scale(1);
		-moz-transform: scale(1);
		-ms-transform: scale(1);
		-o-transform: scale(1);
		transform: scale(1);
		opacity: 1;
	}

	100% {
		-webkit-transform: scale(3);
		-moz-transform: scale(3);
		-ms-transform: scale(3);
		-o-transform: scale(3);
		transform: scale(3);
		opacity: 0;
	}
}

.menuin {
	display: block;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
	-webkit-animation-duration: 300ms;
	animation-duration: 300ms;
	-webkit-animation-name: menuin;
	animation-name: menuin;
	-webkit-transform-origin: 50% 50%;
}

.menuout {
	display: block;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
	-webkit-animation-duration: 300ms;
	animation-duration: 300ms;
	-webkit-animation-name: menuout;
	animation-name: menuout;
	-webkit-transform-origin: 50% 50%;
}