.culture-view {
  background-image: url(/r/cms/hg/default/images/culture_bg.png);
  background-size: cover;
  width: 100%;
  padding: 40px 60px;
  margin-bottom: 50px
}

.left-content {
  background-color: rgba(230, 230, 230, 0.5);
  color: #fff !important;
  padding: 16px 20px;
  display: none;
}

.left-content-title {
  font-size: 22px;
  margin-bottom: 10px;
}

.left-content .desc {
  font-size: 14px
}

.left-content .desc span,
.left-content .desc p {
  color: #fff !important;
}

.right-list {
  color: #9DD9F6
}

.right-list ul {
  padding-left: 40px
}

.right-list li {
  cursor: pointer;
  background-color: #005AB2;
  padding: 6px 20px;
  margin-bottom: 10px
}

.right-list li.active {
  background-color: #CDEEFD;
  color: #3E3938;
  position: relative
}

.right-list li.active::before {
  content: ' ';
  background-image: url(/r/cms/hg/default/images/left_arrow.png);
  background-size: contain;
  background-repeat: no-repeat;
  width: 12px;
  height: 12px;
  position: absolute;
  left: -20px;
  top: 14px
}

.right-list li:hover {
  background-color: #CDEEFD;
  color: #3E3938
}

.right-list li:last-child {
  margin-bottom: 0px
}


@media screen and (max-width: 736px) {
  .culture-view {
    padding: 16px;
  }

  .left-content {
    display: block;
  }

  .right-list {
    display: none;
  }

  .left-content .desc span, .left-content .desc p span {
    font-size: 14px !important;
  }

}