.selectContainer {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  position: relative;
}
.selectContainer .title {
  font-family: "NotoSans-bold", sans-serif;
  font-size: 24px;
  color: #02306e;
}
.selectContainer .selected {
  width: 40%;
  min-width: 293px;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  font-family: "NotoSans-bold", sans-serif;
  font-size: 24px;
  background: #ff5e00;
  border-radius: 10px;
  color: #ffffff;
  transition: background 0.2s;
}
.selectContainer .selected p {
  margin: 0 8px;
  font-size: 16px;
}
.selectContainer .selected img:nth-child(1) {
  width: 41px;
  height: 41px;
}
.selectContainer .selected .more {
  width: 18px;
  height: 15px;
}
.selectContainer .selected div {
  margin-right: auto;
  margin-left: 8px;
}
.selectContainer .list {
  width: 40%;
  min-width: 293px;
  bottom: 0;
  transform: translateY(100%);
  display: none;
  position: absolute;
  color: #000;
  border-radius: 10px;
  z-index: 10;
}
.selectContainer .list .item {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s;
  border: #ffffff 1px solid;
  color: #02306e;
  font-family: "NotoSans-bold", sans-serif;
  font-size: 1.5rem;
  background: #d6d6d6;
  border-radius: 10px;
  padding: 10px 10px;
}
.selectContainer .list .item:hover {
  background-color: #ff9e66;
}
.selectContainer.open .list {
  display: block;
}
.roadContainer {
  margin: 0 auto;
  margin-top: 42px;
  display: flex;
  flex-direction: column;
  width: 87%;
  max-width: 1173px;
  min-width: 375px;
  overflow-x: auto;
  margin-bottom: 30px;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
}
.roadContainer .daybar {
  display: flex;
  flex-direction: row;
  position: relative;
}
.roadContainer .daybar .day {
  width: 165px;
}
.roadContainer .daybar .day p {
  font-family: "NotoSans-bold", sans-serif;
  font-size: 13px;
  color: #ff5e00;
}
.roadContainer .daybar .day:nth-child(2) {
  transform: translateX(990px);
}
.roadContainer .flex-container {
  display: flex;
  padding-bottom: 20px;
}
.roadContainer .flex-container .placeholder {
  display: none;
  flex: 0 0 20px;
  width: 30px;
  height: 300px;
  scroll-snap-align: start;
}
.roadContainer .flex-container .flex-item {
  flex: 0 0 165px;
  /* flex: 0 0 100px 是 flex 属性的简写:
   - flex-grow: 0 - 元素不会在有剩余空间时放大
   - flex-shrink: 0 - 元素不会在空间不足时缩小
   - flex-basis: 100px - 元素的初始宽度为100px
   这样设置使得每个 flex 子元素保持固定的 100px 宽度 */
  height: 300px;
  scroll-snap-align: start;
  /* 每个项目都对齐到容器的起始位置 */
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.roadContainer .flex-container .flex-item .timeContainer .time {
  font-family: "NotoSans-bold", sans-serif;
  font-size: 24px;
  color: #ff5e00;
}
.roadContainer .flex-container .flex-item .timeContainer .timeLine .dot {
  width: 14px;
  height: 14px;
  border-radius: 7px;
  background-color: #ff5e00;
  transform: translateY(50%);
}
.roadContainer .flex-container .flex-item .timeContainer .timeLine .line {
  width: 100%;
  height: 1px;
  background-color: #ff5e00;
}
.roadContainer .flex-container .flex-item .content {
  padding-right: 0.6rem;
  font-family: "NotoSans-regular", sans-serif;
  font-size: 15px;
  color: #02306e;
  margin-top: 10px;
  margin-bottom: auto;
}
.roadContainer .flex-container .flex-item img {
  width: 142px;
  height: 100px;
}
@media (max-width: 768px) {
  .selectContainer .selected {
    font-size: 12px;
  }
  .selectContainer .selected img:nth-child(1) {
    width: 20px;
    height: 20px;
  }
  .selectContainer .selected .more {
    width: 12px;
    height: 9px;
  }
  .selectContainer .list {
    top: 74px;
  }
  .selectContainer .list .item {
    font-size: 12px;
  }
  .selectContainer .title {
    font-size: 14px;
  }
  .roadContainer .daybar {
    margin-left: 20px;
  }
  .roadContainer .flex-container .placeholder {
    display: block;
  }
}
@media screen and (min-width: 768px) and (max-width: 1224px) {
  .selectContainer .selected {
    font-size: 2vw;
  }
  .selectContainer .list .item {
    font-size: 2vw;
  }
}