body {
  background-color: white;
  color: #333;
}
.container {
  width: 100vw;
  height:95vh;
  overflow:auto;
  -webkit-overflow-scrolling:touch;
  box-sizing:border-box;
} 

button {
  background: initial;
}

button:focus{
  outline: 0;
}

button::after{
  border: none;
}



view,image{
    display:block;
    position:relative;
}

.userinfo, .uploader, .tunnel {
  margin-top: 20px;
  height: 70px;
  width: 100%;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-left: none;
  border-right: none;
  display: flex;
  flex-direction: row;
  align-items: center;
  transition: all 300ms ease;
}

.userinfo-avatar {
  width: 50px;
  height: 50px;
  margin: 10px;
  border-radius: 50%;
  background-size: cover;
  background-color: white;
}

.userinfo-avatar:after {
  border: none;
}

.userinfo-nickname {
  font-size: 16px;
  color: #007aff;
  background-color: white;
  background-size: cover;
}

.userinfo-nickname::after {
  border: none;
}

.uploader, .tunnel {
  height: auto;
  padding: 0 0 0 20px;
  flex-direction: column;
  align-items: flex-start;
  box-sizing: border-box;
}

.uploader-text, .tunnel-text {
  width: 100%;
  line-height: 26px;
  font-size: 17px;
  color: #007aff;
}

.uploader-container {
  width: 100%;
  height: 200px;
  padding: 10px 10px 10px 0;
  display: flex;
  align-content: center;
  justify-content: center;
  box-sizing: border-box;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.uploader-image {
  width: 100%;
  height: 180px;
}

.tunnel {
  padding: 0 0 0 20px;
}

.tunnel-text {
  position: relative;
  color: #222;
  display: flex;
  flex-direction: row;
  align-content: center;
  justify-content: space-between;
  box-sizing: border-box;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.tunnel-text:first-child {
  border-top: none;
}

.tunnel-switch {
  position: absolute;
  right: 10px;
  top: -1px;
}

.disable {
  color: #888;
}

.service {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: linear-gradient(#007aff, #0063ce);
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.3);
  display: flex;
  align-content: center;
  justify-content: center;
  transition: all 300ms ease;
}

.service-button {
  position: absolute;
  top: 20px;
}

.service:active {
  box-shadow: none;
}

.request-text {
  padding: 10px 0;
  font-size: 12px;
  line-height: 18px;
  word-break: break-all;
}


/*  LOGO   /////////////////////////////////////////////*/

.logobar{
  background-color: rgb(239,249,241);
  z-index: 1;
}
.logo-bg{
  width: 100vw;
  height:45vw;
  z-index: 2;
  background-image:url('../content/IMG/BG/bg_logo.png');
  background-size:100% auto;
  background-repeat:no-repeat;
  background-position:top center;
}
.logo-img{
  width: 95vw;
  height:auto;
  margin: auto;
  padding: 40px 0;
  position: absolute;
  top:0;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  z-index: 2;
}
.logo-img img{
  width: 60vw;
  height:auto;
}
.logo-txt{
  width:94vw;
  color: rgb(22,140,65);
  letter-spacing: 2px;
  padding: 5px 0;
}


/* navbar  /////////////////////////////////////////////////////////////////////////*/

.navbar{
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 99;
  
  
}
.navbox{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100vw;
  height: 50px;
  background-color: rgb(249,253,252);
  border-top:solid 1px #e9e9e9;
}
.navbox .l1{
  width: 25vw;
  text-align: center;
  font-size:11px;
  font-family:"Microsoft YaHei";
  color:#333;
}
.navbox .l1>image,.navbox .l1>img{
  width: 26px;
  height: 26px;
  margin: auto;
}

.nav-btn{
  position: absolute ;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 75px;
  height:75px;
  background-color: rgb(97,192,162);
  border-radius: 50%;
  border: solid 1px white;
  z-index: 100;
}

.nav-btn image,.nav-btn img{
  width: 47px;
  height:47px;
  margin: 7px auto -1px auto;
}

.nav-sub{
  position: absolute;
  width: 70px;
  height:70px;
  background-color: rgb(97,192,162);
  border: solid 1px white;
  border-radius: 50%;
  z-index: 98;
  transition: 300ms;
  text-align: center;
  margin: 0 2px;
}
.nav-sub img{
  width: 50px;
  height: 50px;
  margin: 3px auto -10px auto;
}

.nav-sub.d1,.nav-sub.d2,.nav-sub.d3,.nav-sub.d4,.nav-sub.d5{
  bottom: 5px;
  left:50%;
  transform: translate(-50%,0);
}

.nav-sub.d2{
  transition-delay: 50ms;
}
.nav-sub.d3{
  transition-delay: 100ms;
}
.nav-sub.d4{
  transition-delay: 150ms;
}
.nav-sub.d5{
  transition-delay: 200ms;
}
.nav-sub.s1{
  bottom: 65px;
  left:0;
  transform: translate(0,0);
}

.nav-sub.s2{
  bottom: 80px;
  left:20vw;
  transform: translate(0,0);
  transition-delay: 50ms;
}
.nav-sub.s3{
  bottom: 90px;
  left:40vw;
  transform: translate(0,0);
  transition-delay: 100ms;
}
.nav-sub.s4{
  bottom: 80px;
  left:60vw;
  transform: translate(0,0);
  transition-delay: 150ms;
}
.nav-sub.s5{
  bottom: 65px;
  left:80vw;
  transform: translate(0,0);
  transition-delay: 200ms;
}