#top-news {
  margin: 0 auto;
  padding: 0 20px;
  padding-bottom: 80px;
  max-width: 2400px;
}

#top-news .ec-newsRole {
  margin: 0 100px;
  padding: 0;
  display: flex;
  justify-content: space-between;
}

#top-news .ec-newsRole .ec-newsRole__news {
  width: 75%;
  border: none;
  padding: 0;
}

#top-news .ec-secHeading {
  font-family: var(--title-sans);
  color: var(--primary-color);
  margin-bottom: 10px;
}

#top-news .ec-secHeading__en {
  font-size: 48px;
  letter-spacing: -1px;
  font-weight: bold;
  text-transform: uppercase;
}

#top-news .uni-heading {
  display: flex;
  justify-content: space-between;
}

#top-news .uni-heading .ttl {
  font-size: 20px;
  font-weight: bold;
  color: var(--primary-color);
}

#top-news .ec-newsRole__newsItem {
  display: block;
  border-bottom: none;
  padding: 16px 20px;
  border: 1px solid #eeeeee;
  border-radius: 10px;
  background-color: #ffffff;
  margin-bottom: 10px;
}

#top-news .ec-newsRole__newsItem:hover {
  opacity: 0.8;
}

#top-news .ec-newsRole__newsHeading {
  display: block;
}

#top-news .ec-newsRole__newsDate {
  font-size: calc(var(--pc-text-size) - 2px);
  color: #666666;
  font-family: var(--title-sans);
  font-weight: 400;
  margin: 0;
  margin-bottom: 5px;
}

#top-news .ec-newsRole__newsTitle {
  width: 100%;
  font-size: var(--pc-text-size);
  font-weight: 400;
  color: #333333;
  margin: 0;
}

#top-news .see-more-content {
  display: flex;
  justify-content: end;
  margin-top: 15px;
}

#top-news .see-more-content.ssp {
  display: none;
}

#top-news .see-more {
  text-align: right;
  cursor: pointer;
  font-size: var(--pc-text-size);
  font-weight: 900;
  padding-right: 13px;
  color: var(--text-color);
  position: relative;
}

#top-news .see-more:before {
  content: '\f054';
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  position: absolute;
  right: 0;
}

#top-news .see-more:hover {
  text-decoration: underline;
}

@media screen and (max-width: 1280.9px) and (min-width: 769px) {
  #top-news {
    padding: 0 1.563vw;
    padding-bottom: 6.25vw;
  }

  #top-news .ec-newsRole {
    margin: 0 3.125vw;
  }

  #top-news .ec-secHeading {
    margin-bottom: 0.781vw;
  }

  #top-news .ec-secHeading__en {
    font-size: 3.75vw;
    letter-spacing: -0.078vw;
  }

  #top-news .uni-heading .ttl {
    font-size: 1.563vw;
  }

  #top-news .ec-newsRole__newsItem {
    padding: 1.25vw 1.563vw;
    border-radius: 0.781vw;
    margin-bottom: 0.781vw;
  }

  #top-news .ec-newsRole__newsDate {
    font-size: calc(var(--tab-text-size) - 0.156vw);
    margin-bottom: 0.391vw;
  }

  #top-news .ec-newsRole__newsTitle {
    font-size: var(--tab-text-size);
  }

  #top-news .see-more-content {
    margin-top: 1.172vw;
  }

  #top-news .see-more {
    font-size: var(--tab-text-size);
    padding-right: 1.016vw;
  }
}

@media screen and (max-width: 768.9px) and (min-width: 521px) {
  #top-news {
    padding: 0 2.605vw;
    padding-bottom: 7.813vw;
  }

  #top-news .ec-newsRole {
    margin: 0 2.604vw;
  }

  #top-news .ec-newsRole .ec-newsRole__news {
    width: 80%;
  }

  #top-news .ec-secHeading {
    margin-bottom: 1.302vw;
  }

  #top-news .ec-secHeading__en {
    font-size: 4.688vw;
    letter-spacing: -0.13vw;
  }

  #top-news .uni-heading .ttl {
    font-size: 2.345vw;
  }

  #top-news .ec-newsRole__newsItem {
    padding: 2.083vw 2.605vw;
    border-radius: 1.302vw;
    margin-bottom: 1.302vw;
  }

  #top-news .ec-newsRole__newsDate {
    font-size: calc(var(--sp-text-size) - 0.781vw);
    margin-bottom: 0.652vw;
  }

  #top-news .ec-newsRole__newsTitle {
    font-size: calc(var(--sp-text-size) - 0.521vw);
  }

  #top-news .see-more-content {
    margin-top: 1.953vw;
  }

  #top-news .see-more {
    font-size: calc(var(--sp-text-size) - 0.521vw);
    padding-right: 1.693vw;
  }
}

@media screen and (max-width: 520.9px) {
  #top-news {
    padding: 0 5.13vw;
    padding-bottom: 10.256vw;
  }

  #top-news .ec-newsRole {
    margin: 0;
    display: block;
  }

  #top-news .ec-newsRole .ec-newsRole__news {
    width: 100%;
  }

  #top-news .ec-secHeading {
    margin-bottom: 2.564vw;
  }

  #top-news .ec-secHeading__en {
    font-size: 9.232vw;
    letter-spacing: -0.256vw;
  }

  #top-news .uni-heading .ttl {
    font-size: 4.618vw;
  }

  #top-news .heading-content {
    margin-bottom: 7.692vw;
  }

  #top-news .ec-newsRole__newsItem {
    padding: 4.102vw 5.13vw;
    border-radius: 2.564vw;
    margin-bottom: 2.564vw;
  }

  #top-news .ec-newsRole__newsDate {
    font-size: 3.59vw;
    margin-bottom: 2.564vw;
  }

  #top-news .ec-newsRole__newsTitle {
    font-size: 3.59vw;
  }

  #top-news .see-more-content {
    margin-top: 5.128vw;
  }

  #top-news .see-more {
    font-size: 3.59vw;
    padding-right: 3.334vw;
  }
}
