.clearfix:after,
.container:after,
.tab-nav:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

/* ==========
     Setup Page */
*,
*:before,
*:after {
  box-sizing: border-box;
}
.container {
  position: relative;
  background: white;
  padding: 0.46875rem;
}
.lianjie {
  float: right;
  border-radius: 0.078125rem 0.078125rem 0 0;
  background: #eee;
  font-size: 0.111111rem;
  line-height: 0.25rem;
  letter-spacing: 15%;
  padding: 0 0.125rem;
  text-decoration: none;
  color: grey;
  margin-top: 0.0625rem;
}
.lianjie:hover {
  background: #7239FF;
  color: white;
}

/* ===========
       Tab Styling */
.tab-group {
  position: relative;
  border: 0.007813rem solid #eee;
  margin-top: 0.3125rem;
  border-radius: 0 0 0.078125rem 0.078125rem;
  /* border: 1px solid tomato; */
}
.tab-group section {
  opacity: 0;
  height: 0;
  padding: 0 0.125rem;
  overflow: hidden;
  transition: opacity 0.4s ease, height 0.4s ease;
  /* border: 1px solid #6eb590; */
}
.tab-group section img {
  width: 8.65625rem;
}
.tab-group section.active {
  opacity: 1;
  height: auto;
  overflow: visible;
}

.tab-nav {
  list-style: none;
  margin: -0.3125rem -0.007813rem 0 0;
  padding: 0;
  height: 0.3125rem;
  overflow: hidden;
}
.tab-nav li {
  display: inline;
}
.tab-nav li a {
  top: 0.007813rem;
  position: relative;
  display: block;
  float: left;
  border-radius: 0.078125rem 0.078125rem 0 0;
  background: #eee;
  font-size: 0.111111rem;
  line-height: 0.25rem;
  letter-spacing: .013889rem;
  padding: 0 0.125rem;
  text-decoration: none;
  color: grey;
  margin-top: 0.0625rem;
  margin-right: 0.007813rem;
  transition: background 0.2s ease, line-height 0.2s ease, margin 0.2s ease;
}
.tab-nav li.active a {
  background: #7239FF;
  color: white;
  line-height: 0.3125rem;
  margin-top: 0;
}