* {
  padding: 0;
  margin: 0;
}

a {
  text-decoration: none;
}

html {
  background: #f5f5f5;
}

.avatar-container {
  display: flex;
  height: 3.8125rem;
  background: #fff url(../image/wave.png) 0 bottom no-repeat;
  background-size: 100%;
  border-bottom: 1px solid #e3e6ea;
}

.avatar-container>div {
  flex: 1;
}

.name-sex {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: .375rem;
}

.name-sex>h4,
.name-sex>h5 {
  width: 2.578125rem;
  line-height: .9375rem;
  color: #666;
}

.name-sex>h4>span {
  font-size: .46875rem;
  color: #007aff;
}

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

.avatar>img {
  display: block;
  width: 3.00000rem;
  height: 3.35625rem;
  border: .171875rem solid #f8f8f8;
}

.input-container {
  margin-bottom: .3125rem;
  border-bottom: 1px solid #e3e6ea;
  background: #fff;
}

.input-row {
  display: flex;
  align-items: center;
  margin-left: .609375rem;
  border-bottom: 1px solid #dddce0;
}

.input-row:last-child {
  border-bottom: none;
}

.input-row>label {
  display: block;
  width: 2.9375rem;
  font-size: .46875rem;
  color: #808080;
}

.input-row>p {
  flex: 1;
  padding: .25rem .3rem;
  line-height: .5rem;
  font-size: .46875rem;
  color: #333;
  border: none;
}

.query-link {
  position: relative;
  margin-bottom: .3125rem;
  height: 1.375rem;
  border-top: 1px solid #e3e6ea;
  border-bottom: 1px solid #e3e6ea;
  background: #fff url(../image/link.png) .65625rem center no-repeat;
  background-size: .5625rem;
}

.query-link:after {
  position: absolute;
  top: .5rem;
  right: .5rem;
  content: '';
  display: block;
  width: .234375rem;
  height: .234375rem;
  border-top: .046875rem solid #b3b3b3;
  border-right: .046875rem solid #b3b3b3;
  transform: rotate(45deg);
}

.query-link>a {
  display: block;
  height: 100%;
  line-height: 1.375rem;
  font-size: .46875rem;
  color: #666;
  padding-left: 1.5rem;
}

.query-link>a:active {
  background: #e4e4e4;
}

.slide-container {
  border-top: 1px solid #e3e6ea;
  border-bottom: 1px solid #e3e6ea;
  background: #fff;
}

.change-title {
  position: relative;
  padding-left: .65625rem;
  line-height: 1.375rem;
  font-size: .46875rem;
  color: #007aff;
}

.change-title:active {
  background: #e4e4e4;
}

.change-title:after {
  position: absolute;
  top: 50%;
  right: .5rem;
  margin-top: -.117188rem;
  content: '';
  display: block;
  width: .234375rem;
  height: .234375rem;
  border-top: .046875rem solid #b3b3b3;
  border-right: .046875rem solid #b3b3b3;
  transform: rotate(135deg);
  transition: all .2s;
}

.change-title.open:after {
  transform: rotate(315deg);
}

.change-items {
  overflow: hidden;
  height: 0;
}

.change-items.show {
  height: auto;
}


.items-container {
  justify-content: center;
  align-items: center;
  border-top: 1px solid #e3e6ea;
  border-bottom: 1px solid #e3e6ea;
  overflow: hidden;
}

.info-item {
  display: flex;
  flex-direction: column;
  border-left: .3125rem solid #7bb7fb;
  border-bottom: 1px solid #e6e6e6;
}

.info-item:nth-child(2n) {
  border-left-color: #fbde7b;
}

.list-row {
  display: flex;
  margin-left: .3125rem;
  padding: .28125rem 0;
  line-height: .75rem;
  font-size: .46875rem;
  border-bottom: 1px solid #e6e6e6;
}

.list-row:last-child {
  border-bottom: none;
}

.list-row>label {
  width: 2.203125rem;
}

.list-row>span {
  flex: 1;
}