body .nav-wrap{
  background-color: #3091f2;
}
.page-wrap{
  position: absolute;
  top: 0.9rem;
  left: 0;
  bottom: 0;
  width: 100%;
  overflow: hidden;
}
.title{
  position: relative;
  height: 0.6rem;
  line-height: 0.6rem;
  font-size: 0.24rem;
  text-align: center;
  z-index: 3;
}
.title > p{
  position: relative;
  background: #fff;
  font-weight: 600;
  z-index: 2;
}
.category-mask{
  position: absolute;
  top: .6rem;
  left: 0;
  display: none;
  width: 100%;
  bottom: 0;
  background: rgba(0, 0, 0, .4);
  z-index: 2;
}
.title .category-arrow{
  position: relative;
  font-style: normal;
  margin: 0 0.1rem;
  width: .15rem;
  height: .15rem;
  -webkit-transform: rotate(-180deg);
          transform: rotate(-180deg);
  -webkit-transform-origin: center;
          transform-origin: center;
  -webkit-transition: -webkit-transform .3s ease;
  transition: -webkit-transform .3s ease;
  transition: transform .3s ease;
  transition: transform .3s ease, -webkit-transform .3s ease;
}
.title .category-arrow.up{
  -webkit-transform: rotate(0);
          transform: rotate(0);
}
.category-list{
  position: absolute;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  padding-bottom: 0.2rem;
  width: 100%;
  background: #fff;
  -webkit-transform: translateY(-100%);
          transform: translateY(-100%);
  -webkit-transition: -webkit-transform .3s ease;
  transition: -webkit-transform .3s ease;
  transition: transform .3s ease;
  transition: transform .3s ease, -webkit-transform .3s ease;
  z-index: 1;
}
.category-list.active{
  -webkit-transform: translateY(0);
          transform: translateY(0);
}
.category-item{
  width: 25%;
}
.category-item a{
  padding: 0.1rem 0.2rem;
  border-radius: 0.05rem;
}
.category-item a.active{
  color: #fff;
  background: #3091f2;
}
.scroll-area{
  position: absolute;
  top: 0.6rem;
  left: 0;
  bottom: 0;
  width: 100%;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
.webapp-list{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 0.1rem;
  background: #fafafa;
}
.webapp-item{
  display: block;
  margin: 0.1rem 0.05rem;
  width: 2.99rem;
  height: 3.74rem;
  border-top-left-radius: 0.08rem;
  border-top-right-radius: 0.08rem;
  overflow: hidden;
  background: #fff;
}
.webapp-item .img-wrap{
  position: relative;
  width: 100%;
  height: 2.99rem;
  overflow: hidden;
}
.img-wrap img{
  width: 100%;
  height: 100%;
}
.webapp-item .item-name{
  height: 0.75rem;
  text-align: center;
  font-size: 0.28rem;
  line-height: 0.75rem;
  color: #303445;
}
.pagination{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  justify-content: space-between;
  padding: 0 .8rem;
  padding-top: 0.55rem;
}
.pagination span{
  display: block;
  height: 0.4rem;
  font-size: 0.26rem;
  line-height: .4rem;
  text-align: center;
  color: #303445;
}
.pagination span.current-page{
  color: #9fa5bb;
}
.pagination span a{
  display: block;
  padding: 0 .15rem;
  border-radius: 2px;
  border: 1px solid #d5d5d5;
  line-height: .38rem;
  color: #303445;
}
.pagination span a.no-more{
  color: #9fa5bb;
}

.webapp-img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.webapp-mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, .7);
  opacity: 0;
  transition: opacity .3s ease;
}
.webapp-item.show-mask .webapp-mask{
  opacity: 1;
  z-index: 2;
}
.webapp-mask .buttons > span {
  display: block;
  margin: 20px 0;
  padding: 5px 20px;
  border: 1px solid #fff;
  border-radius: 5px;
  font-size: .24rem;
  color: #fff;
}
.img-wrap .webapp-mask img{
  width: 80%;
  height: 80%;
}
.dialog-modal-wrap {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: none;
  justify-content: center;
  align-items: center;
  z-index: -1;
  opacity: 0;
  background: rgba(0,0,0,.7);
  transition: opacity .5s linear;
}
.dialog-modal-wrap .authority-qrcode-modal,
.dialog-modal-wrap .note-openinweixin-modal {
  width: 4.8rem;
  text-align: center;
  font-size: .26rem;
  color: #000;
  background: #fff;
  border-radius: .15rem;
  overflow: hidden;
}
.dialog-modal-wrap .authority-qrcode-modal .header,
.dialog-modal-wrap .note-openinweixin-modal .header {
  text-align: left;
}
.dialog-modal-wrap .authority-qrcode-modal img {
  width: 200px;
}
.dialog-modal-wrap .authority-qrcode-modal .long-tap {
  margin-bottom: 20px;
  font-size: .34rem;
}
.dialog-modal-wrap.show-opwx-tip,
.dialog-modal-wrap.show-small-program,
.dialog-modal-wrap.show-qrcode,
.dialog-modal-wrap.show-success {
  display: flex;
  opacity: 1;
  z-index: 99999;
}
.dialog-modal-wrap.show-opwx-tip .note-openinweixin-modal {
  display: block;
  width: 5.4rem;
}
.dialog-modal-wrap.show-opwx-tip > div:not(.note-openinweixin-modal) {
  display: none;
}
.dialog-modal-wrap.show-small-program .small-program-container {
  display: block;
}
.dialog-modal-wrap.show-small-program > div:not(.small-program-container) {
  display: none;
}
.dialog-modal-wrap.show-qrcode .authority-qrcode-modal {
  display: block;
}
.dialog-modal-wrap.show-qrcode > div:not(.authority-qrcode-modal) {
  display: none;
}
.dialog-modal-wrap.show-success .authority-success-modal {
  display: block;
}
.dialog-modal-wrap.show-success > div:not(.authority-success-modal) {
  display: none;
}
.authority-qrcode-modal .footer {
  padding: 10px 0;
  background: #eee;
  font-size: 12px;
}
.authority-success-modal {
  position: relative;
  display: none;
  width: 5.4rem;
  border-radius: .05rem;
  background: #fff;
}
.authority-success-modal .header {
  position: absolute;
  left: -0.3rem;
  top: -1.9rem;
  width: 6.4rem;
}
.dialog-modal-wrap .close-modal {
  position: relative;
  float: right;
  width: .3rem;
  height: .3rem;
}
.dialog-modal-wrap .close-modal::before,
.dialog-modal-wrap .close-modal::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: .24rem;
  height: 0.04rem;
  background: #666;
}
.dialog-modal-wrap .close-modal::before {
  transform: translateX(-50%) translateY(-50%) rotate(45deg);
}
.dialog-modal-wrap .close-modal::after {
  transform: translateX(-50%) translateY(-50%) rotate(-45deg);
}
.note-openinweixin-modal .content p:first-child {
  padding-top: .15rem;
}
.note-openinweixin-modal .content p {
  margin-bottom: .15rem;
  color: #666;
}
.note-openinweixin-modal .footer {
  padding-top: .3rem;
  padding-bottom: .6rem;
}
.note-openinweixin-modal .footer .button {
  margin: auto;
  padding: .1rem 0;
  width: 2.4rem;
  background: #3091f2;
  color: #fff;
  border-radius: 3px;
}
.authority-success-modal .content {
  position: relative;
  left: -10%;
  width: 120%;
  padding: .3rem .1rem;
  padding-bottom: .1rem;
  text-align: center;
  font-size: .24rem;
}
.authority-success-modal  img {
  width: 100%;
}
.authority-success-modal .success-tip {
  padding-bottom: .3rem;
  font-size: .24rem;
  text-align: center;
  color: #999;
}
.authority-success-modal .button {
  margin: 0 auto .7rem;
  padding: .18rem 0;
  font-size: .24rem;
  width: 4.4rem;
  text-align: center;
  border: 1px solid #3091f2;
  background: #3091f2;
  color: #fff;
}
/* small-program */
.small-program-container select {
  -webkit-appearance: none;
}
.small-program-container {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  box-sizing: border-box;
  width: 85%;
  background: #fff;
  font-size: .2rem;
  border: 1px solid #fff;
  border-radius: .15rem;
}
.small-program-container .header,
.authority-qrcode-modal .header, 
.note-openinweixin-modal .header {
  background: #eee;
  padding: .25rem;
  margin-bottom: .4rem;
  border-radius: .15rem .15rem 0 0;
  color: #666;
}
.small-program-container .con > div {
  width: 80%;
  margin: 0 auto .2rem;
}
.small-program-container input {
  padding: 0 7px;
  box-sizing: border-box;
  width: 100%;
  height: 34px;
  border: 1px solid #eee;
  color: #999;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
  color: #999; opacity:1;
}

::-moz-placeholder { /* Mozilla Firefox 19+ */
  color: #999;opacity:1;
}

.small-program-container input:-ms-input-placeholder {
  color: #999;opacity:1;
}

.small-program-container input::-webkit-input-placeholder {
  color: #999;opacity:1;
}
.small-program-container .region {
  display: flex;
  justify-content: space-between;
}
.small-program-container .region>div {
  position:relative;
  width:32%;
  height:34px;
}
.small-program-container .region select {
  padding: 0 7px;
  width: 100%;
  height: 34px;
  line-height: 34px;
  background: #fff;
  color: #999;
  border-color: #eee;
  outline: none;
}
.small-program-container .industry select {
  padding: 0 7px;
  width: 100%;
  height: 34px;
  background: #fff;
  border-color: #eee;
  color: #999;
  outline: none;
}
.small-program-container .footer {
  width: 80%;
  height: 34px;
  color: #fff;
  margin: 0 auto;
  line-height: 34px;
  text-align: center;
  font-size: .26rem;
  background: #3091f2;
  margin: .3rem auto .5rem;
}
.small-program-container .next-step {
  color: #fff;
  background:#3091f2;
  border: none;
  width: 100%;
  height: 100%;
}
.goto-continue {
  position: absolute;
  right: .5rem;
  bottom: .2rem;
  color: #169bd5;
  font-size: .20rem;
}
.goto-continue > span {
  display: inline-block;
  margin-left: .1rem;
  width: .22rem;
  height: .22rem;
  border: 1px solid #ea9518;
  text-align: center;
  line-height: .26rem;
  border-radius: 50%;
  color: #ea9518;
}