html,
body {
  margin: 0;
}
.cx-time-main {
  padding: 20px 0;
}
ul {
  /* white-space:nowrap; */
  margin: 0;
  padding: 0;
}
ul li {
  outline: none;
  list-style-type: none;
  margin: 0px;
}
.cx-time-main {
  width: 100%;
  height: auto;
}
.cx-time-box {
  position: relative;
  width: 100%;
  height: auto;
}
.cx-time-main ul li {
  position: relative;
  padding: 10px 0;
  height: auto;
}
.cx-time-main ul li:nth-child(2n + 1) {
  padding-left: 52%;
  text-align: left;
  position: relative;
}
.cx-time-main ul li:nth-child(2n) {
  padding-right: 52%;
  text-align: right;
  position: relative;
}
.cx-time-main ul li:nth-child(1)::before {
  display: none;
}
.cx-main-box::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  margin: -11px 0 0 -11px;
  border-radius: 50%;
  z-index: 2;
  background: url(../images/brand/point.png) no-repeat center;
  background-size: cover;
}
.cx-main-box::after {
  content: '';
  position: absolute;
  top: calc(50% - 1px);
  left: calc(50% + 6px);
  width: calc(4% - 6px);
}
.cx-time-main ul li:nth-child(2n + 1) .cx-main-box::after {
  left: auto;
  right: calc(50% + 6px);
}
.active::before {
  background: #26a69a;
  border: 2px solid #26a69a;
}
.cx-time-main ul li::before,
.cx-time-main ul li::after {
  content: '';
  position: absolute;
  top: 0;
  width: 2px;
  height: calc(55% - 8px);
  left: 50%;
  background: #26a69a;
  margin-left: -2px;
}
.cx-time-main ul li::after {
  top: auto;
  bottom: 0;
}
.cx-main-box {
  display: inline-block;
  min-width: 40%;
  min-height: 40px;
  border-radius: 4px;
  padding: 0px 20px;
  cursor: pointer;
  padding-top: 40px;
}