@charset "utf-8";
/* CSS Document */
.public-head { 
	position:fixed;
	z-index:8;
	top:0;
	left:0;
	width:100%;
	/*min-width:960px;*/
}
.fixed-width {
	/*width:960px;*/
	margin:0 auto;
}
.public-head .head-top-toolbar {
	height:32px;
	/*padding:0 60px;*/
}


.head-top-line {
	margin:0 22px;
	line-height:32px;
}
.head-tel { 
	background:url(../../images/head_tel.png) left center no-repeat;
	padding-left:18px;
	color:#fff;
	line-height:32px;
	margin-left:12px;
}
.head-email { 
	background:url(../../images/head_email.png) left center no-repeat;
	padding-left:21px;
	color:#fff;
	line-height:32px;
	margin-left:26px;
}
.public-color-type { 
	background:url(../../images/color_type_ico.png) left center no-repeat;
	padding-left:24px;
}
.public-esc {
	background:url(../../images/head_esc.png) left center no-repeat;
	padding-left:24px;
	margin-right:12px;
	margin-left:26px;
}
.public-paint {
	background: url(../../images/head/head-paint.png) left center no-repeat;
	background-size: 20px; 
	padding-left:24px;
	margin-right:0px;
}
.common-top-c { 
	cursor:pointer;
}
.common-top-c span {
	line-height:32px;
	color:#fff;
}
.user-photo { 
	border-radius:50%;
	margin-top:6px;
	margin-right:6px;
}
.common-top-order { 
	position:relative;
}
.common-top-order span { 
	background:url(../../images/xia_arrow.png) right center no-repeat;
	padding-right:16px;
	
}
/*user*/
.public-user-toolbar {
	position:absolute;
	z-index:7;
	top:62px;
	right:-16px;
	background:#fff;
	width:160px;
	opacity:0;
	visibility:hidden;
	border:1px solid #ccc;
	transition:top 0.5s,opacity 0.5s,visibility 0.5s;
	-moz-transition:0.5s,opacity 0.5s,visibility 0.5s; /* Firefox 4 */
	-webkit-transition:top 0.5s,opacity 0.5s,visibility 0.5s; /* Safari and Chrome */
	-o-transition:top 0.5s,opacity 0.5s,visibility 0.5s; /* Opera */
}
.public-user:hover .public-user-toolbar {
	top:32px;
	opacity:1;
	z-index:8;
	visibility:visible;
}
.public-user-toolbar li {
	border-bottom:1px solid #ddd;
	line-height:42px;
	padding-left:42px;
}
.public-user-toolbar li:last-child {
	border:none;
}
.public-user-toolbar li:hover {
	background-color:#f8f8f8;
}
.user-toolbar-photo {
	background:url(../../images/photo_ico.png) 12px center no-repeat;
}
.user-toolbar-pwd {
	background:url(../../images/pwd_ico.png) 12px center no-repeat;
}
.user-toolbar-edit {
	background:url(../../images/edit_ico.png) 12px center no-repeat;
}
/*color-type*/
.public-color-toolbar {
	position:absolute;
	z-index:7;
	top:62px;
	right:-16px;
	background:#fff;
	width:160px;
	opacity:0;
	visibility:hidden;
	border:1px solid #ccc;
	transition:top 0.5s,opacity 0.5s,visibility 0.5s;
	-moz-transition:0.5s,opacity 0.5s,visibility 0.5s; /* Firefox 4 */
	-webkit-transition:top 0.5s,opacity 0.5s,visibility 0.5s; /* Safari and Chrome */
	-o-transition:top 0.5s,opacity 0.5s,visibility 0.5s; /* Opera */
}
.public-color-type:hover .public-color-toolbar {
	top:42px;
	opacity:1;
	z-index:8;
	visibility:visible;
}
.public-color-toolbar li {
	border-bottom:1px solid #ddd;
	line-height:50px;
	padding-left:12px;
}
.public-color-toolbar li:hover {
	background-color:#f8f8f8;
}

.language-img {
	margin-top:7px;
	margin-right:6px;
}
.common-color-type {
	width:16px;
	height:16px;
	margin-top:14px;
	border:1px solid #ddd;
}
.color-type-green {
	background-color:#CF0;
}
.color-type-orange {
	background-color:#F60;
}

.color-type-blue {
	background-color:#4dc2e6;
}
.color-type-text {
	color:#3e3e3e!important;
	margin-left:6px;
}
.language-img-list {
	margin-top:12px;
	border:1px solid #ddd;
}


/*language-type*/
.public-language-toolbar {
	top:32px;
	position:absolute;
	background-color:#fff;
	z-index:7;
	opacity: 0;
	width:160px;
	right:-16px;
	border:1px solid #ccc;
	visibility: hidden;
	transform-origin:100% 0;
	transform: rotate(-90deg) skew(-50deg,0) scale(0.1);
	transition:all 0.5s;
}
.public-paint-toolbar {
	top:32px;
	position:absolute;
	background-color:#fff;
	z-index:7;
	opacity: 0;
	width:160px;
	right:-16px;
	border:1px solid #ccc;
	visibility: hidden;
	transform-origin:100% 0;
	transform: rotate(90deg) skew(-50deg,0) scale(0.1);
	transition:all 0.5s;
}
/*颜色风格*/
.public-paint:hover .public-paint-toolbar {
	top:32px;
	opacity:1;
	z-index:8;
	visibility:visible;
	transform: rotate(0deg) skew(0deg,0)scale(1);
}
.public-language:hover .public-language-toolbar {
	top:32px;
	opacity:1;
	z-index:8;
	visibility:visible;
	transform: rotate(0deg) skew(0deg,0) scale(1);
}
.public-paint-toolbar li {
	border-bottom:1px solid #ddd;
	height:42px;
	padding-left:12px;
}
.public-paint-toolbar li:hover {
	background-color:#f8f8f8;
}
.public-language-toolbar li {
	border-bottom:1px solid #ddd;
	height:42px;
	padding-left:12px;
}
.public-language-toolbar li:last-child,.public-paint-toolbar li:last-child {
	border:none;
}
.public-language-toolbar li span,.public-paint-toolbar li span {
	line-height: 42px;
}
.public-language-toolbar li:hover {
	background-color:#f8f8f8;
}





.public-logo-nav {
	height:89px;
	background:rgba(255,255,255,1);
	border-bottom:5px solid #f1f1f1;
	/*padding:0 60px;*/
}
.public-logo-nav-close {
	transform-origin:0 0;
	opacity: 0;
	transform:rotate(90deg);
	transition: all 0.5s;
}
.public-logo { 
	background:url(../../images/logo.png) 12px 16px no-repeat;
	padding-left:73px;
	font-size:25px;
	color:#3e3e3e;
	line-height:89px;
	height:89px;
	white-space: nowrap;
}
.public-logo-hb { 
	background:url(../../images/logo_hb.png) 12px 16px no-repeat;
	padding-left:73px;
	font-size:25px;
	color:#3e3e3e;
	line-height:89px;
	height:89px;
	white-space: nowrap;
}

.public-logo-size {
	padding-left:63px;
	background-position:12px 23px;
	padding-left:63px;
	background-size: 42px auto;
}
.public-user {
	
}
.public-nav {
	position: relative;
}
.scroll-bottom-border {
	position: absolute;
	z-index: 6;
	bottom:-5px;
	left:0;
	height: 5px;
	width: 80px;
}
.nav-li {
	min-width:88px;
	height: 84px;
	position:relative;
	cursor:pointer;
	border-left:1px solid #ddd;
	-webkit-perspective: 1700px;
	-moz-perspective: 1700px;
	perspective: 1700px;
	-webkit-perspective-origin: 0 70%;
	-moz-perspective-origin: 0 70%;
	perspective-origin: 0 70%;
}
.nav-li:hover {
	border-radius:4px;
}
.nav-ico {
	margin-top:7px;
	float:left;
}
.nav-li dt {
	text-align: center;
}
.nav-li dd {
	text-align: center;
	padding:0 6px;
}
.nav-li dt {
	height:48px;
}
.nav-li dt img {
	margin-top:13px;
	-webkit-box-reflect:below 0 -webkit-linear-gradient(transparent,transparent 50%,rgba(255,255,255,.3));
}

.nav-li dt img.mac {
	margin-top:16px;
}
.nav-text {
	font-size:15px;
	line-height:33px;
	color:#414751;
	transition:color 0.2s;
	-moz-transition:color 0.2s; /* Firefox 4 */
	-webkit-transition:color 0.2s; /* Safari and Chrome */
	-o-transition:color 0.2s; /* Opera */
	transition: all .3s;
}
.nav-li:hover  .nav-text {
	color:#3e3e3e;
	text-decoration:none;
}
/*翻页*/
.page-menu {
	background-color: #333333 ;
	height: 100%;
	width: 100%;
	opacity: 0;
	position: absolute;
	top: 0px;
	left: 0px;
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-transform-origin: 0 0;
	-moz-transform-origin: 0 0;
	transform-origin: 0 0;
	-webkit-transform: rotateY(-90deg);
	-moz-transform: rotateY(-90deg);
	transform: rotateY(-90deg);
	-webkit-transition: -webkit-transform 0.4s, opacity 0.1s 0.3s;
	-moz-transition: -moz-transform 0.4s, opacity 0.1s 0.3s;
	transition: transform 0.4s, opacity 0.1s 0.3s;	
}
.nav-li:hover .page-menu {
	opacity: 1;
	-webkit-transform: rotateY(0deg);
	-moz-transform: rotateY(0deg);
	transform: rotateY(0deg);
	-webkit-transition: -webkit-transform 0.4s, opacity 0.1s;
	-moz-transition: -moz-transform 0.4s, opacity 0.1s;
	transition: transform 0.4s, opacity 0.1s;
}
.page-menu .nav-text {
	color:#fff;
}
.nav-li:hover .page-menu .nav-text {
	color:#fff;
}


.nav-li-bottom {
	-webkit-transition: -webkit-transform 0.4s;
	-moz-transition: -moz-transform 0.4s;
	transition: transform 0.4s;
}
.nav-li:hover .nav-li-bottom
{
	-webkit-transform: translateX(100%);
	-moz-transform: translateX(100%);
	-ms-transform: translateX(100%);
	transform: translateX(100%);
}
.nav-li:hover img {
	animation: jitter 1.5s 0s linear infinite;
}
/*添加主菜单经过状态图标抖动动画*/
@keyframes jitter {
	0%  {transform: skew(0deg); }
	49% { transform: skew(0deg);}
	60% {
		transform: skew(10deg);
	}
	70%  { 
		transform: skew(-10deg);
	}
	80%  { 
		transform: skew(10deg);
	}
	90% {
		transform: skew(-10deg);
	}
	100%  { 
		transform: skew(10deg);
	}
}
.secondary-menu {
	opacity:0;
	visibility:hidden;
	position:absolute;
	z-index:7;
	top:120px;
	right:0;
	width:180px;
	background:#fff;
	border:1px solid #ccc;
	transition:all 0.5s ease-in-out;
	-moz-transition:all 0.5s ease-in-out; /* Firefox 4 */
	-webkit-transition:all 0.5s ease-in-out; /* Safari and Chrome */
	-o-transition:all 0.5s ease-in-out; /* Opera */
}
.nav-li:hover .secondary-menu {
	opacity:1;
	top:89px;
	visibility:visible;
	z-index:8;
}
.secondary-menu-li {
	border-bottom:1px solid #ddd;
}
.secondary-menu-li:hover {
	background-color:#f8f8f8;
}
.nav-li .secondary-menu-a {
	line-height:50px;
	padding-left:12px;
	color:#414751;
	font-size:14px;
}
.nav-li:hover .secondary-menu-a {
	text-decoration:none;
}

.user-photo-box {
	text-align: center;
}
.user-photo {
	border-radius: 50%;
	margin:0;
	margin-top:4px;
	margin-right:8px;
}



table,td,th {
	border:1px solid #ddd;
	border-collapse: collapse;
}
/*2016-07-29 add - 色彩风格*/
.fang-common {
	width: 16px;
	height:16px;
	margin-top:13px;
	margin-right:2px;
}
.fang-blue {
	background-color:#008aff;
}
.fang-green {
	background-color:#6dd200;
}
.fang-orange {
	background-color:#ff5a00;
}
/*2016-07-27 add*/
/*头部工具栏*/
.head-toolbar-1100 {
	display:none;
}
.moa-menu {
	visibility: hidden;
	opacity: 0;
	margin-top:-300px;
	float:right;
	margin-right:12px;
	cursor: pointer;
}
.nav-li-1100 {
	display: none;
}
@media screen and (max-width: 1100px) {
	.public-nav {
		opacity: 0;
		height:0;
		overflow:hidden;
		position: fixed;
		z-index:6;
		top:0;
		left:0;
		width:100%;
		background: rgba(255,255,255,.9);
		transition: all .5s;
	}
	.public-nav-animation {
		height:100%;
		width:82%;
		opacity: 1;
		border-right:1px solid #ddd;
		overflow:auto;
	}
	.scroll-bottom-border {
		display:none;
	}
	.nav-li {
		width:50%;
		perspective:none;
		perspective-origin: 0 0;
		border-bottom: 1px solid #ddd;
	}
	.nav-li:nth-child(odd) {
		border-left:none;
	}
	/*.nav-li:last-child {
		border-right:1px solid #ddd;
	}*/
	.page-menu {
		
	} 
	.moa-menu {
		visibility: visible;
		opacity: 1;
		transition: all .2s;
		margin-top:24px;
		transition:all .3s;
	}
	.moa-menu-animation {
		transform: rotate(90deg);
	}
	/*头部工具栏*/
	.public-user {
		margin-right:12px;
	}
	.head-toolbar-1100 {
		display:block;
		background: #3e3e3e;
		padding-left:12px!important;
		height: 42px;
	}
	.head-toolbar-1100:hover{
		background: #4dc2e6!important;
	}
	.head-top-line,.public-paint,.public-language {
		display: none;
	}
	.head-toolbar-1100 .public-paint,.head-toolbar-1100 .public-language {
		display: block;
		width:100%;
		padding-top:6px;
	}
	.head-toolbar-1100 .public-paint {
		
	}
	.public-paint-toolbar {
		right:0;
		top:0;
		
	}
	.public-paint:hover .public-paint-toolbar {
		top:-87px;
		transform-origin:100% 100%;
		transform: rotate(-90deg) skew(-50deg,0) scale(0.1);
		-webkit-transform: rotate(-90deg) skew(-50deg,0) scale(0.1);
		transform: translateX(0px);
	}
	.public-language-toolbar {
		right:0;
	}
	.head-email {
		display: none;
	}
	.nav-li-1100 {
		display: block;
	}
	
	.foot_content {
		width:100%!important;
	}	
}