body{
    font-family: 微软雅黑;
    font-size: 12px;
}


#section01 img{
	position: relative;
	top: 300px;
	opacity: 0;
	transform: scale(0.8, 0.8);
	transition: all 1s;
}

#section01.active img{
	top: 0;
	opacity: 1;
	transition-delay: 0.3s;
	transform: scale(1, 1);
}

#section02 img{
	position: relative;
	top: -100px;
	opacity: 0;
	transition: all 1s;
}

#section02.active img{
	top: 0;
	opacity: 1;
	transition-delay: 0.3s;
}

#section03 img{
	position: relative;
	bottom:300px;
	opacity: 0;
	transform: scale(0.8, 0.8);
	transition: all 1s;
}

#section03.active img{
	bottom:0;
	opacity: 1;
	transition-delay: 0.1s;
  	transform: scale(1, 1);
}

#section04 img{
	position: relative;
	top:300px;
	opacity: 0;
	transform: scale(0.8, 0.8);
	transition: all 1s;
}

#section04.active img{
	top:0;
	opacity: 1;
	transition-delay: 0.2s;
  	transform: scale(1, 1);
}

#section05 img{
	position: relative;
	left:200px;
	opacity: 0;
	transition: all 1s;
}

#section05.active img{
	left:0;
	opacity: 1;
	transition-delay: 0.2s;
  	transform: scale(1, 1);
}

#section06 img{
	position: relative;
	bottom:200px;
	opacity: 0;
	transition: all 1s;
}

#section06.active img{
	bottom:0;
	opacity: 1;
	transition-delay: 0.2s;
  	transform: scale(1, 1);
}


#section07 img{
	position: relative;
	bottom:200px;
	left: 200px;
	opacity: 0;
	transition: all 1s;
}

#section07.active img{
	bottom:0;
	left:0px;
	opacity: 1;
	transition-delay: 0.2s;
  	transform: scale(1, 1);
}


#section08 img{
	position: relative;
	top:200px;
	right: 200px;
	opacity: 0;
	transition: all 1s;
}

#section08.active img{
	top:0;
	right:0px;
	opacity: 1;
	transition-delay: 0.2s;
  	transform: scale(1, 1);
}


#section09 img{
	position: relative;
	bottom:200px;
	right: 200px;
	opacity: 0;
	transition: all 1s;
}

#section09.active img{
	bottom:0;
	right:0px;
	opacity: 1;
	transition-delay: 0.2s;
  	transform: scale(1, 1);
}
   body {
    background-image: url('../img/new/bg_mobi.png');
	background-attachment: fixed;
   }

#content {
  text-align: center;
  padding-top: 70px;
}

.folderContent .jaf-close {
  right: 6px;
}

#content a {
  color: #fff;
  text-decoration: none;
}

.clear {
  clear: both;
}

.folder {
  float: left;
  position: relative;
}

.jaf-row {
  margin: 0 auto;
  width: 540px;
}

.item {
  width: 100px;
  height: 50px;
  line-height: 50px;
  font-size: 14px;
  margin: 3px 3px;
  text-align: left;
  padding-left: 35px;
  background-repeat: no-repeat;
  background-position: 10px 50%;
}

.item2 {
  width: 171px;
  height: 171px;
  line-height: 171px;
  font-size: 24px;
  margin: 3px;
  text-align: left;
  padding-left: 60px;
  background-repeat: no-repeat;
  background-position: 30px 50%;
}

.folderContent{
  width: 830px;
   margin: auto;
}

.mexpandcontent{

}

.jaf-row.front1 .item {
  background-color: #33BE0D;
}

.jaf-row.front1 .item:hover, .jaf-row.front1 .active-tool .item {
  background-color: #26b5b6;
}

.jaf-row.front2 .item {
  background-color: #5E84C8;
}

.jaf-row.front2 .item:hover, .jaf-row.front2 .active-tool .item {
  background-color: #45a4e6;
}

.jaf-row.front3 .item {
  background-color: #B8AE12;
}

.jaf-row.front3 .item:hover, .jaf-row.front3 .active-tool .item {
  background-color: #edae33;
}

.jaf-row.front4 .item {
  background-color: #916640;
}

.jaf-row.front4 .item:hover, .jaf-row.front4 .active-tool .item {
  background-color: #d07421;
}

#model .item2,#search .item2 {
  background-color:#5E84C8;
}

#model .item2:hover, #model.active-tool .item2 ,#search .item2:hover, #search.active-tool .item2{
  background-color:#45a4e6;
}

#browse .item2 {
  background-color:#33BE0D;
}

#browse .item2:hover, #browse.active-tool .item2 {
  background-color:#26b5b6;
}

#approve .item2 {
  background-color:#585848;
}

#approve .item2:hover, #approve.active-tool .item2 {
  background-color:#93937e;
}

#mcontent .item2 {
  background-color:#B8AE12;
}

#mcontent .item2:hover, #mcontent.active-tool .item2 {
  background-color:#edae33;
}

#safe .item2 {
  background-color:#916640;
}

#safe .item2:hover, #safe.active-tool .item2 {
  background-color:#d07421;
}

#component .item2 {
  background-color:#5E84C8;
}

#component .item2:hover, #component.active-tool .item2 {
  background-color:#45a4e6;
}

.qtitle{

width: 67px;
height: 219px;
/* position: absolute; */
border: 1px solid #ccc;
background: #325D90;
color: #fff;
padding-top: 5px;
text-align: left;
padding-left: 9px;
padding-top: 15px;
font-size: 17px;
float: left;
margin-top: 3px;

}

.htitle{

width: 67px;
height: 171px;
/* position: absolute; */
border: 1px solid #ccc;
background: #325D90;
color: #fff;
padding-top: 5px;
text-align: left;
padding-left: 9px;
padding-top: 45px;
font-size: 17px;
float: left;
margin-top: 3px;

}


.weaver_btn {
display: inline-block;
padding: 5px 42px;
border-radius: 3px;
border: 2px solid #588add;
color: #a1b4db;
cursor: pointer;
}

#app-folders-container{
  margin-bottom: 20px;
  width: 825px;
  margin: 0 auto;
  position: relative;
}
  .mobile_frame_wrapper{
      position: absolute;
      top:70px;
      height: 685px;
      width: 825px;
      display: none;
	  z-index:99;
  }
   .mobile_curtain{
     width: 0px;
     overflow: hidden;
     position: absolute;
     transition-property: left,right,top,bottom;
     transition-duration: .5s;
   }
  .mobile_frame{
    width: 825px;
    height: 648px;
    border: none;
  }

#addr .item {background-image: url('../img/mobile/addr.png');}
#approve .item {background-image: url('../img/mobile/approve.png');}
#attendance .item {background-image: url('../img/mobile/attendance.png');}
#blog .item {background-image: url('../img/mobile/blog.png');}
#checkin .item {background-image: url('../img/mobile/checkin.png');}
#component .item2 {background-image: url('../img/mobile/component.png');}
#customer .item {background-image: url('../img/mobile/customer.png');}
#doc .item {background-image: url('../img/mobile/doc.png');}
#drive .item {background-image: url('../img/mobile/drive.png');}
#echat .item {background-image: url('../img/mobile/echat.png');}
#sign  .item {background-image: url('../img/mobile/echat.png');}
#home .item {background-image: url('../img/mobile/home.png');}
#mail .item {background-image: url('../img/mobile/mail.png');}
#mcontent .item2 {background-image: url('../img/mobile/mcontent.png');}
#memo .item {background-image: url('../img/mobile/memo.png');}
#approve .item2 {background-image: url('../img/mobile/mhome.png');}
#model .item2,#search .item2 {background-image: url('../img/mobile/model.png');}
#news .item {background-image: url('../img/mobile/news.png');}
#offdoc .item {background-image: url('../img/mobile/offdoc.png');}
#perf .item {background-image: url('../img/mobile/perf.png');}
#project .item {background-image: url('../img/mobile/project.png');}
#report .item {background-image: url('../img/mobile/report.png');}
#safe .item2 {background-image: url('../img/mobile/safe.png');}
#schedule .item {background-image: url('../img/mobile/schedule.png');}
#site .item {background-image: url('../img/mobile/site.png');}
#task .item {background-image: url('../img/mobile/task.png');}
#browse .item2 {background-image: url('../img/mobile/workflow.png');}

   .applyfloat{
     position: absolute;
     right: -35px;
     top: 230px;
     width: 37px;
     height: 105px;
     cursor: pointer;
     display: none;
     z-index: 1000;
     border: 2px solid #f8f8f8;
     padding-top: 5px;
     border-radius: 5px;
     color: #e8e8e8;
	 background-color: #0c71c0;
     -webkit-transition: all 0.3s;
     -o-transition: all 0.3s;
     transition: all 0.3s;
     font-family: 微软雅黑;
     font-size: 14px;
   }
   .applyfloat:hover{
      color: #fff;
      background-color: #2755a9;
	  border: 2px solid #ffffff;
   }

   .applyfloat span{
     display: inline-block;
     width: 27px;
     text-align: center;
     line-height: 16px;
     padding-left: 3px;
     padding-top: 13px;
   }