.content {
  display: flex;
  flex-direction: column;
  padding: 70px 0 150px 0;
  position: relative;
}
.fund-detail {
  display: flex;
  width: 1400px;
  min-height: 476px;
  margin: auto;
}
.fund-detail-left {
  display: flex;
  flex-direction: column;
  width: 520px;
  border-right: 1px solid #eee;
}
.fund-detail-left .fund-name {
  font-size: 30px;
  font-weight: bold;
  color: #222;
  line-height: 42px;
}
.fund-detail-left .fund-code {
  font-size: 16px;
  font-weight: 400;
  color: #222;
  margin: 10px 0 40px 0;
}
.fund-detail-left .ratio-nav {
  display: flex;
  flex-direction: column;
  margin: 0 0 30px auto;
  width: 100%;
}
.ratio-nav-item {
  /* flex: 1; */
  display: flex;
  font-size: 18px;
  font-weight: 400;
  color: #222;
  /* min-height: 38px; */
}
.ratio-nav-item:not(:last-of-type) {
  margin: 0 0 18px 0;
}
.ratio-nav-item:nth-of-type(3) {
  margin: 0 0 8px 0;
}
.ratio-nav-item > div:first-of-type {
  min-width: 30%;
}
.ratio-nav-item:first-of-type > div:last-of-type, .ratio-nav-item:nth-of-type(2) > div:last-of-type {
  font-weight: bold;
  line-height: 27px;
}
.fund-detail-left .ratio-nav .data {
  font-size: 30px;
  font-weight: 500;
}
.fund-detail-left .since-box {
  display: flex;
  flex-wrap: wrap;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
  padding: 8px 0;
  width: 470px;
  height: 172px;
}
.fund-detail-left .since-box .item {
  display: flex;
  width: 33.33%;
  margin: 12px 0 0 0;
}
.fund-detail-left .since-box .item .circular {
  width: 8px;
  max-width: 8px;
  height: 8px;
  max-height: 8px;
  border: 2px solid #bbb;
  border-radius: 50%;
  margin: 6px 12px 0 0;
}
.fund-detail-left .since-box .item .text {
  display: flex;
  flex-direction: column;
  font-size: 16px;
}
.fund-detail-left .since-box .item .text .key {
  font-weight: 400;
  color: #666;
}
.fund-detail-left .since-box .item .text .value {
  font-weight: 500;
  margin: 10px 0;
}
.fund-detail-right {
  width: 824px;
  height: 100%;
}

.fund-detail-right {
  display: flex;
  flex-direction: column;
  margin: 0 0 0 auto;
}
.fund-detail-right .tabs {
  display: flex;
  margin: 0 0 20px 0;
  border-bottom: 1px solid #eee;
}
.fund-detail-right .tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 30px 0 0;
  cursor: pointer;
  font-size: 16px;
  font-weight: 400;
  color: #222;
  width: 180px;
}
.fund-detail-right .tab.active, .fund-detail-right .tab:hover {
  font-size: 16px;
  font-weight: bold;
  color: #004098;
}
.fund-detail-right .tab.active span, .fund-detail-right .tab:hover span {
  width: 30px;
  height: 3px;
  background: #004098;
  border-radius: 3px;
  margin: 20px 0 0 0;
}

.fund-detail-right .btns-bar {
  display: flex;
  margin: auto auto 0 auto;
  height: 36px;
}
.fund-detail-right .btns-bar a {
  font-size: 16px;
  font-weight: 400;
  color: #222;
}
body .fund-detail-right .btns-bar a.btn.active {
  color: #fff;
  background: #004098;
  border: 1px solid #004098;
}
body a.btn-default.active:hover {
  background: rgba(34, 117, 232, 1)!important;
  border: 1px solid rgba(34, 117, 232, 1)!important;
}
.fund-detail-right .btns-bar a.btn-default:hover{
  background: rgba(0, 64, 152, 1);
  border: 1px solid #fff;
  color: #fff;
  border: 1px solid #004098;
}
.fund-detail-right .btns {
  display: flex;
}
.fund-detail-right .btns-bar .btns a {
  width: 128px;
  height: 36px;
  background: #fff;
  border: 1px solid #eee;
  border-left: none;
  border-radius: 0;
}
.fund-detail-right .btns-bar .btns a:first-of-type {
  border: 1px solid #eee;
  border-radius: 4px 0 0 4px;
}
.fund-detail-right .btns-bar .btns a:last-of-type {
  border: 1px solid #eee;
  border-radius: 0 4px 4px 0;
}
.fund-detail-right .btns-bar .btns a:hover {
  border: 1px solid #004098;
}
.echarts {
  height: 426px;
  margin: 0 0 15px 0;
}

.detail-box {
  display: flex;
  flex-wrap: wrap;
  width: 1400px;
  margin: 90px auto 0 auto;
  border-top: 1px solid #bbb;
  border-left: 1px solid #bbb;
}
.detail-box .item {
  flex: 1;
  display: flex;
  width: 50%;
  min-width: 50%;
  min-height: 80px;
}
.detail-box .item .detail-box-title {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 500;
  color: #222;
  background: #F1F6F9;
  width: 260px;
  border-right: 1px solid #bbb;
  border-bottom: 1px solid #bbb;
}
.detail-box .item .detail-box-desc {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 400;
  color: #222;
  border-bottom: 1px solid #bbb;
  border-right: 1px solid #bbb;
  width: 440px;
  padding: 20px;
}