*{margin:0;padding:0;box-sizing: border-box;}
*::after, *::before { box-sizing: border-box;}
html{font-size: 12px;color: #6b6d6e;}
ul,li,ol{ list-style:none;}
a { text-decoration:none; outline:none;-webkit-tap-highlight-color:transparent;}
.fix:after{content: '';display: table;clear: both;}
.fix{zoom: 1;}
.p-rel {position:relative;}
.g-link {position:absolute;top:0;left:0;width:100%;height:100%;z-index: 1}
.g-link a {display:block;width:100%;height:100%;font-size: 15px}
.hide{display: none;}
.left{float: left}
.right{float: right}
.margin-top-10 {margin-top: 10px}
.margin-top-15 {margin-top: 15px}
.margin-left-15 {margin-left: 15px!important}
.margin-left-10 {margin-left: 10px}
.margin-left-5 {margin-left: 5px}
.padding-10 {padding: 10px}

.font-size-12 {font-size: 12px;}
.font-size-15 {font-size: 15px;}
.font-size-18 {font-size: 18px;}
.font-size-20 {font-size: 20px;}
.font-size-22 {font-size: 22px;}
.font-size-30 {font-size: 30px;}
.font-color-title {color: #373737!important}
.font-color-bule {color: #4eaffc}
.font-color-white {color: #ffffff}
.font-color-red {color: #fe5722}
.font-color-gray {color: #aaa}
.font-color-gray-zhihu {color: #999999}

body {
    line-height: 1.6;
    font-family: Helvetica Neue,Helvetica,Arial,sans-serif;
}
.blue {  color: #4eaffc}
.bg-blue {background: #e5e5e5}
.bg-yellow {background: #ffd200!important}
.bg-orange {background: #ffa200!important}
.bg-pink { background-color: #fff6e5; }
.bg-blue-gray {background: #eaf7ff}
.button {background: #4eaffc;width: calc(100% - 30px);line-height: 45px;text-align: center;font-size: 18px;color: #fff;margin: auto;border-radius: 5px;margin-top: 15px;}
.button-fix-bottom {background: #4eaffc;width:100%;line-height: 45px;text-align: center;font-size: 18px;color: #fff;position: fixed;bottom: 0px}
.border-bottom-gray {border-bottom: 1px solid #e5e5e5}
.border-top-gray {border-top: 1px solid #e5e5e5}
.border-none {border: none;}

/* index */
.top-title-img {width: 229px;height: 229px;margin: auto;}
.volunteer-top {position: relative;height: 470px; overflow: hidden;background: url("./images/top-bg.jpg");background-repeat: no-repeat;background-size: auto 100%;padding-bottom: 20px}
.volunteer-top-title {font-size: 25px; text-align: center;color: #373737; margin-top: 30px;}
.volunteer-top-count {position: fixed;background: #fff;height: 25px;color: #ffb359;font-size: 15px;top: 20px;padding: 3px 10px 3px 3px;border-radius: 0px 20px 20px 0px;}
.kw-logo {}
.kw-logo-2 {width: 140px; height: 32px}
.link {text-align: center;margin-top: 15px;}
.rank-top {text-align: center;margin-top: 20px;}
.rank-list {margin: auto;}
.rank-list-item {line-height: 30px}
.rank-list-item span {width: 32%; text-align: center;display: inline-block;}
.head-body {text-align: center;margin-top: -35px}
.head-body img {width: 60px; height: 60px; border-radius: 30px;border: 1px solid #e5e5e5}
.head-body .count {font-size: 32px;color: #ffb359}
.volunteer .info {background: #51bbeb;padding: 15px;}
.volunteer .title {text-align: center;margin-top: 20px}
.volunteer .title-img {width: 264px;height: 17px;margin: auto;}
.volunteer .desc {background: #fff; border-radius: 5px;padding: 10px;margin-top: 10px;}
.volunteer .desc p {font-size: 14px;color: #6b6d6e}
.join-code-small {width: 100px; height: 100px}

/* submit */
.submit {background: #f5f4f9; height: 100%;overflow-y: auto;}
.submit .banner {width: 100%;vertical-align: middle;}
.submit .banner-text {font-size: 15px; color: #ffa200; padding: 15px;text-align: center}
.submit .input-body {background: #fff;height: 45px;padding: 0px 10px; font-size: 14px; color: #6b6d6e}
.submit .body-left {width: 90px;}
.submit .input-body input {border: none;font-size: 14px;color: #6b6d6e}
.radio-box {margin-left: 40px;}
.submit form {padding-bottom: 40px; margin-top: 10px}

/* modal */
.modal {position: fixed;z-index: 99; width: 100%; height: 100%; background: rgba(0,0,0,0.5); top:0px; padding: 20px;text-align: center;}
.modal .modal-box {text-align: center;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}
.modal .modal-box-content {background: #ffffff; border-radius: 5px;padding: 10px;font-size: 13px;}
.join-code {width: 230px; height: 230px;}
.modal .close-logo {width: 35px; height: 35px;margin-top: 20px;}
.modal .share-tips {color: #ffffff; font-size: 15px; padding: 10px;text-align: right;}
/*布局*/
.flex {
  display: flex;
}

.flex-row {
  display: flex;
  flex-direction: row;
}

.flex-column {
  display: flex;
  flex-direction: column;
}

.flex-row-center {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.flex-row-center-center {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

/*横排居中*/
.flex-row-center-between {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.flex-row-center-around {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
}

.flex-row-center-left {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.flex-row-center-right {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
}

.flex-row-top-between {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
}

.flex-row-top-center {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: center;
}

/*横排置顶两边放无间距*/
.flex-row-top-left {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
}

/*横排置顶靠左放*/
.flex-row-top-around {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-around;
}

/*横排置顶两边放有间距*/
.flex-column-center {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.flex-column-center-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.flex-column-center-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: left;
}

.flex-column-left-center {
  display: flex;
  flex-direction: column;
  align-items: left;
  justify-content: center;
}

.flex-column-right-center {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-end;
}


/* borderRadius */
.border-gray {
  border:  1px solid #e5e5e5;
}

.border-no {
  border: none
}



/* button */
.button {
  background: #41affc;
  text-align: center;
  color: #fff;
  border-radius: 5px;
  line-height: 40px;
  text-align: center;
  padding: 2px 5px;
}

.button-default {
  font-size: 15px;
  background: #fff;
  text-align: center;
  color: #41affc;
  border: 1px solid #41affc;
  border-radius: 5px;
  line-height: 35px;
  padding: 2px 5px;
}

.button-kw {
  background: #41affc;
  text-align: center;
  color: #fff;
  border-radius: 5px;
  line-height: 35px;
  text-align: center;
  padding: 2px 5px;
}

.button-min {
  background: #41affc;
  text-align: center;
  color: #fff;
  border-radius: 5px;
  line-height: 25px;
  padding: 2px 5px;
}

.button-min-default {
  background: #fff;
  text-align: center;
  color: #41affc;
  border: 1px solid #41affc;
  border-radius: 5px;
  line-height: 20px;
  padding: 2px 5px;
}

.button-min-default-gray {
  background: #fff;
  text-align: center;
  color: #e5e5e5;
  border: 1px solid #e5e5e5;
  border-radius: 5px;
  line-height: 20px;
  padding: 2px 5px;
}

.submit-button {
  width: 80%;
  height: 30px;
  background: #41affc;
  text-align: center;
  color: #fff;
  margin: auto;
  border-radius: 5px;
}

/* 知乎 */
.zhihu-guanzhu-button {
  background: #0084ff;
  color: #fff;
  font-size: 15px;
  padding: 4px 14px;
  border-radius: 5px;
}

.zhihu-guanzhu-button-default {
  background: #f6f6f6;
  color: #999;
  text-align: center;
  line-height: 25px;
}

.list-head {
  width: 45px;
  height: 45px;
  border-radius: 22px
}

.rich_media {
  max-width: 600px;
  margin: auto;
}

.open-button-posi {
  position: absolute;
  width: 50%;
  bottom: 5px;
  right: 10px;
}

.open-button {
  line-height: 25px;
  border: 1px solid #41affc;
  border-radius: 5px;
  color: #41affc;
  padding: 0px 10px;
  margin-top: 10px;
}