.event-highlight {
  position: relative;
  width: 100%;
  height: auto;
  min-height: 80vw;
}

.event-highlight.mobile {
  display: none;
}

.event-highlight .center {
  position: relative;
  width: 98px;
  height: 100%;
  min-height: 1440px;
  background: #37D200;
  border-radius: 12px;
  margin: 0 auto;
}

.event-highlight .center::after {
  content: "";
  position: absolute;
  width: 2px;
  height: 100%;
  background: #FFFFFF;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

.event-highlight .list {
  position: absolute;
  width: 50%;
  z-index: 100;
  padding-left: 100px;
}

.event-highlight .list.left {
  left: 0;
  top: 5%;
  padding-right: 100px;
  padding-left: 0px;
}

.event-highlight .list.right {
  right: 0;
  top: 0%;
}

.event-highlight .list .year {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.event-highlight .list.left .year {
  flex-direction: row;
  justify-content: flex-end;
}

.event-highlight .list h2 {
  width: 100%;
  position: relative;
  font-size: 2.625rem;
  color: #0473EA;
  font-family: 'SCProsperSans-Bold';
  text-align: left;
}

.event-highlight .list p {
  width: 100%;
  margin: 1vw 0;
  color: #555555;
  font-size: .875rem;
  width: 100%;
  max-width: 400px;
}

.event-highlight .list.left h2,
.event-highlight .list.left p {
  text-align: right;
}

.event-highlight .list p.dot {
  position: absolute;
  width: 80px;
  height: 3px;
  background: #C9C9C9;
  left: -100px;
  top: 36%;
}

.event-highlight .list.left p.dot {
  left: auto;
  right: -100px;
}

.event-highlight .list p.dot::before {
  content: "";
  position: absolute;
  left: -8px;
  top: 50%;
  transform: translateY(-50%);
  background: #B7B7B7;
  border: 2px solid #fff;
  width: 16px;
  height: 16px;
  border-radius: 50%;
}

.event-highlight .list.left p.dot::before {
  right: -8px;
  left: auto;
}

.event-highlight .list.left .photo {
  display: flex;
  justify-content: flex-end;
}

.event-highlight .list.right .photo {
  display: flex;
  justify-content: flex-start;
}

.event-highlight .box:last-child,
.event-highlight .box:nth-last-child(2) {
  margin-top: 20px;
}

ul.photo1,
ul.photo2 {
  width: 100%;
  max-width: 400px;
}

ul.photo1 .slick-arrow,
ul.photo2 .slick-arrow {
  width: 24px;
  height: 24px;
}

ul.photo1 .slick-next,
ul.photo2 .slick-next {
  right: 1vw;
}

ul.photo1 .slick-prev,
ul.photo2 .slick-prev {
  left: 1vw;
}

@media(max-width:1200px) {

  .event-highlight.pc {
    display: none;
  }

  .event-highlight.mobile {
    display: block;
  }

  .event-highlight .center {
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
    width: 72px;
  }

  .event-highlight .list {
    width: calc(100% - 36px);
    position: relative;
    margin-left: 36px;
  }

  ul.photo1,
  ul.photo2 {
    max-width: 500px;
  }

  .event-highlight .box {
    margin-top: 20px;
  }
}

@media(max-width:640px) {
  .event-highlight .list h2 {
    font-size: 1.6rem;
  }

  .event-highlight .center {
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
    width: 50px;
  }

  .event-highlight .list {
    width: calc(100% - 20px);
    margin-left: 20px;
    padding-left: 65px;
  }

  .event-highlight .list p.dot {
    width: 60px;
    left: -60px;
  }

  ul.photo1,
  ul.photo2 {
    max-width: 100%;
  }
}