.product {
  width: 12rem;
}

.product>* {
  float: left;
  width: 12rem;
  height: 12rem;
}

.product-item {
  display: flex;
  cursor: pointer;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  background-color: #fafcff;
}

.product-icon {
  max-width: 4rem;
  max-height: 4rem;
}

.product-name {
  color: #3e3e3e;
  white-space: nowrap;
  margin-top: 1.3rem;
}

.help-container {

  margin-bottom: 3rem;
}

.help-container .container>div {
  margin-top: 3rem;
}

.product-item.active {
  z-index: 3;
  position: relative;
  background-color: #ffffff;
  box-shadow: 0rem 0rem 1rem 0rem rgba(0, 46, 105, 0.2);
}

.help-content {
  flex-grow: 1;
  /* margin-left: 3rem; */
}

.right {
  margin-left: 120px;
}

.help-item {

  background-color: #ffffff;
}

.help-head {
  cursor: pointer;
  padding: 3rem 0;
  margin: 0 3rem 0 0;
  border-bottom: 1px solid #e8e8e8;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
}

.help-arrow {
  width: 1.07rem;
  height: 1.07rem;
  transform: rotate(-45deg);
  transition: all .3s ease;
  border-right: 1px solid #42494f;
  border-bottom: 1px solid #42494f;
}

.expand .help-head {
  border-bottom: none;
}

.help-item:last-child .help-head {
  border-bottom: none;
}

.expand .help-arrow {
  transform: rotate(45deg) translateY(-25%);
}

.help-content-detail {
  /* max-height: 0; */
  display: none;
  overflow: hidden;
  transition: max-height .3s ease;
  background-color: #f2f7ff;
}

/* 
.expand .help-content-detail {
  max-height: 1000px;
} */

.help-detail-container {
  padding: 0 5.5rem 3rem 5.5rem;
}