/* common */
.title {
	margin-top: 80px;
  margin-bottom: 30px;
  text-align: center;
}
.wxsuite-title .title{
	margin-top: 50px;
}
.title h5 {
  font-size: 20px;
  position: relative;
  margin-bottom: 15px;
  padding-bottom: 10px;
  padding-bottom: 20px;
  color: #555;
}
.wxsuite-title .title h5{
	margin-bottom: 30px;
	color: #FFF;
}
.title h5:after {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 80px;
  height: 2px;
  margin-left: -40px;
  content: '';
  background-color: #75a0cc;
}
.wxsuite-title .title h5:after{
	background-color: #FFF;
}
.mc-box {
	position: relative;
}

.link-btn {
	display: inline-block;
	width: 200px;
	height: 40px;
	-moz-border-radius: 5px;
	     border-radius: 5px;
}
.link-btn.login-btn{
	background-image: url('../images/wxsuite/link-btns.jpg');
	background-position: 0 0;
}
.link-btn.install-btn{
	background-image: url('../images/wxsuite/link-btns.jpg');
	background-position: 0 -40px;
}
.link-btn.register-btn{
	background-image: url('../images/wxsuite/link-btns.jpg');
	background-position: 0 -80px;
}
.wxsuite-links{
	margin-top: 60px;
	margin-left: -moz-calc(50% - 255px);
	margin-left: calc(50% - 255px);
	width: 515px;
}

/* private */
.wxsuite-wrap {
	position: relative;
	width: 100%;
	background-image: url(../images/wxsuite/wx_bg.jpg);
	background-repeat: no-repeat;
	background-position: top center;
	background-color: #fff;
}
.wxsuite-title {
	position: relative;
	width: 100%;
	height: auto;
	margin: 50px 0 150px;
	color: #fff;
	text-align: center;
	font-family: "微软雅黑", Arial;
}
.wxsuite-title .h2 {
	font-size: 40px;
	margin-bottom: 20px;
}
.wxsuite-title .h3 {
	font-size: 32px;
	margin-bottom: 12px;
}
.wxsuite-title .h6 {
	font-size: 14px;
	margin-bottom: 5px;
}
.wxsuite-list,
.wxsuite-apps-list,
.wxsuite-app-show {
	position: relative;
	text-align: center;
}
.wxsuite-list {
	padding-top: 88px;
}
.wxsuite-list-shadow {
	position: absolute;
    bottom: 72px;
    left: 50%;
    display: inline-block;
    -webkit-transform: translateX(-50%);
       -moz-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
            transform: translateX(-50%);
    width: 1146px;
    height: 124px;
    background-image: url(../images/wxsuite/list_shadow.png);
}
.wxsuite-item,
.wxsuite-app-item {
	position: relative;
	display: inline-block;
	font-size: 0px;
	vertical-align: top;
}
.wxsuite-item {
	width: 140px;
	height: 148px;
	margin: 0 1.2% 10px;
	z-index: 1;
}
.suite-icon {
	width: 125px;
	height: 125px;
	margin-top: -10px;
	-moz-border-radius: 10px;
	     border-radius: 10px;
	opacity: .6;
  	filter: alpha(opacity=60); /* IE8 and lower */
  	zoom: 1; /* Triggers "hasLayout" in IE 7 and lower */
	transform: scale(0.8);
	-ms-transform: scale(0.8);
	-moz-transform: scale(0.8);
	-webkit-transform: scale(0.8);
	-o-transform: scale(0.8);
  	transition: all .1s;
	-moz-transition: all .1s; /* Firefox 4 */
	-webkit-transition: all .1s; /* Safari 和 Chrome */
	-o-transition: all .1s; /* Opera */
}
.suite-name {
	position: absolute;
	bottom: 0;
	width: 100%;
	padding-top: 18px;
	padding-bottom: 18px;
	font-size: 20px;
	color: #9ba9b1;
	background-color: #fff;
}
.wxsuite-item:hover {
	cursor: pointer;
}
.wxsuite-item.active .suite-name,
.wxsuite-item:hover .suite-name {
	color: #58585c;
}
.wxsuite-item.active .suite-icon,
.wxsuite-item:hover .suite-icon {
	margin-top: -30px;
	transform: scale(1);
	-ms-transform: scale(1);
	-moz-transform: scale(1);
	-webkit-transform: scale(1);
	-o-transform: scale(1);
	opacity: 1;
  	filter: alpha(opacity=100); /* IE8 and lower */
  	-webkit-backface-visibility: hidden; /* 设置进行转换的元素的背面在面对用户时是否可见：隐藏 */
	-webkit-transform-style: preserve-3d; /*设置内嵌的元素在 3D 空间如何呈现：保留 3D*/
}
.wxsuite-item.active .shadow-b,
.wxsuite-item:hover .shadow-b {
	-moz-box-shadow: 0 0 10px 1px #475566;
	-webkit-box-shadow: 0 0 10px 1px #475566;
	box-shadow: 0 0 10px 1px #475566;
}
.wxsuite-item.active .shadow-g,
.wxsuite-item:hover .shadow-g {
	-moz-box-shadow: 0 0 10px 1px rgba(4, 150, 163, .26);
	-webkit-box-shadow: 0 0 10px 1px rgba(4, 150, 163, .26);
	box-shadow: 0 0 10px 1px rgba(4, 150, 163, .26);
}
.wxsuite-item.active .shadow-bl,
.wxsuite-item:hover .shadow-bl {
	-moz-box-shadow: 0 0 10px 1px rgba(11, 105, 159, .26);
	-webkit-box-shadow: 0 0 10px 1px rgba(11, 105, 159, .26);
	box-shadow: 0 0 10px 1px rgba(11, 105, 159, .26);
}
.wxsuite-item.active .shadow-p,
.wxsuite-item:hover .shadow-p {
	-moz-box-shadow: 0 0 10px 1px rgba(11, 40, 162, .26);
	-webkit-box-shadow: 0 0 10px 1px rgba(11, 40, 162, .26);
	box-shadow: 0 0 10px 1px rgba(11, 40, 162, .26);
}
.wxsuite-item.active .shadow-br,
.wxsuite-item:hover .shadow-br {
	-moz-box-shadow: 0 0 10px 1px rgba(161, 67, 12, .26);
	-webkit-box-shadow: 0 0 10px 1px rgba(161, 67, 12, .26);
	box-shadow: 0 0 10px 1px rgba(161, 67, 12, .26);
}
.wxsuite-item.active .shadow-y,
.wxsuite-item:hover .shadow-y {
	-moz-box-shadow: 0 0 10px 1px rgba(163, 111, 15, .26);
	-webkit-box-shadow: 0 0 10px 1px rgba(163, 111, 15, .26);
	box-shadow: 0 0 10px 1px rgba(163, 111, 15, .26);
}
.wxsuite-item.disabled .suite-icon,
.wxsuite-item.disabled:hover .suite-icon {
	opacity: .2;
  	filter: alpha(opacity=20); /* IE8 and lower */
}
.wxsuite-item.disabled:hover .suite-icon {
	margin-top: -10px;
	transform: scale(0.8);
	-ms-transform: scale(0.8);
	-moz-transform: scale(0.8);
	-webkit-transform: scale(0.8);
	-o-transform: scale(0.8);
	-webkit-box-shadow: none;
	   -moz-box-shadow: none;
	        box-shadow: none;
}
.wxsuite-item.disabled:hover .suite-name {
	color: #9ba9b1;
}
.wxsuite-item-tip {
	position: relative;
	font-size: 20px;
	text-align: center;
}
.wxsuite-item-tip p {
	width: 78%;
	min-width: 300px;
	margin: 0 auto;
	color: #58585c;
	font-size: 18px;
	line-height: 40px;
}
.btn-wx-auth {
	width: auto;
	margin-top: 30px;
	padding-left: 85px;
	padding-right: 85px;
	color: #fff;
	font-size: 20px;
	line-height: 60px;
}
.wxsuite-apps-list {
	margin-bottom: 20px;
}
.wxsuite-app-item {
	width: 80px;
	height: 100px;
	margin: 0 7% 10px;
	font-size: 16px;
	color: #58585c;
}
.wxsuite-app-item:hover {
	cursor: pointer;
}
.app-icon {
	width: 64px;
	height: 64px;
	margin-bottom: 10px;
}
.wxsuite-app-info {
	position: relative;
	width: 86%;
	min-width: 400px;
	max-width: 1000px;
	min-height: 670px;
	padding: 25px 0;
	margin: 0 auto 100px;
	border: 1px solid #dadfe6;
	-moz-border-radius: 12px;
	     border-radius: 12px;
	font-size: 14px;
	text-align: left;
	background-color: #f5f7f8;
}
.page-arrow {
    width: 15px;
    height: 15px;
    border-right: 1px solid #DADFE6;
    border-top: 1px solid #DADFE6;
    position: absolute;
    -ms-transform: rotate(-45deg);
        transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    background: #F5F7F7;
    top: -9px;
}
.wxsuite-app-info p,
.wxsuite-app-info ol {
	padding: 0 60px;
}
.wxsuite-app-info p {
	margin-bottom: 10px;
	font-size: 16px;
	color: #626366;
}
.wxsuite-app-info ol {
	margin-bottom: 40px;
	color: #8a9aa4;
	line-height: 28px;
	list-style: decimal inside;
}
.app-page {
	position: relative;
	display: inline-block;
	font-size: 0px;
	width: 245px;
	height: 435px;
	margin: 0 3% 20px;
	background-repeat: no-repeat;
	-webkit-box-shadow: 1px 2px 10px 0 #c4c6c6;
	   -moz-box-shadow: 1px 2px 10px 0 #c4c6c6;
	        box-shadow: 1px 2px 10px 0 #c4c6c6;
}
.app-page-1 {
	background-position: -5px 0;
}
.app-page-2 {
	background-position: -255px 0;
}
.app-page-3 {
	background-position: -505px 0;
}
.page-vote .app-page {
	background-image: url('../images/wxsuite/infos/vote.jpg');
}
.page-activity .app-page {
	background-image: url('../images/wxsuite/infos/activity.jpg');
}
.page-article .app-page {
	background-image: url('../images/wxsuite/infos/article.jpg');
}
.page-officialdoc .app-page {
	background-image: url('../images/wxsuite/infos/officialdoc.jpg');
}
.page-assignment .app-page {
	background-image: url('../images/wxsuite/infos/assignment.jpg');
}
.page-contact .app-page {
	background-image: url('../images/wxsuite/infos/contact.jpg');
}
.page-crm .app-page { 
	background-image: url('../images/wxsuite/infos/crm.jpg')
}
.page-crm_client .app-page {
	background-image: url('../images/wxsuite/infos/crm_client.jpg');
}
.page-crm_contact .app-page {
	background-image: url('../images/wxsuite/infos/crm_contact.jpg');
}
.page-crm_event .app-page {
	background-image: url('../images/wxsuite/infos/crm_event.jpg');
}
.page-crm_opportunity .app-page {
	background-image: url('../images/wxsuite/infos/crm_opportunity.jpg');
}
.page-file .app-page {
	background-image: url('../images/wxsuite/infos/file.jpg');
}
.page-diary .app-page {
	background-image: url('../images/wxsuite/infos/diary.jpg');
}

@media only screen and (max-width: 800px) {
    .wxsuite-list-shadow {
    	display: none;
    }
}