.sec-bg {
  pointer-events: none;
  position: fixed;
  left: 0;
  top: 0;
  opacity: 0.6;
  width: 100%;
  height: 100vh; }
  .sec-bg img {
    position: absolute; }
    .sec-bg img:first-child {
      left: 0;
      bottom: 0; }
    .sec-bg img:last-child {
      right: 0; }

.title {
  padding: 0 5vw;
  padding-top: 18.53659rem; }

.news-section {
  padding: 0 5vw;
  margin: 0 auto;
  overflow: hidden; }

.thumb-wrapper {
  position: relative;
  padding-right: 3.90244rem;
  padding-top: 7.80488rem; }
  .thumb-wrapper .number {
    position: absolute;
    top: 4.87805rem;
    right: -2.92683rem;
    font-size: 11.70732rem;
    color: rgba(255, 255, 255, 0.1);
    font-family: "Trajan", sans-serif;
    line-height: 1; }
  .thumb-wrapper .date {
    -webkit-writing-mode: vertical-rl;
        -ms-writing-mode: tb-rl;
            writing-mode: vertical-rl;
    text-orientation: mixed;
    position: absolute;
    display: block;
    height: 12.19512rem;
    bottom: 0;
    right: 0;
    font-size: 1.56098rem; }

.news-list {
  padding-bottom: 9.7561rem; }
  .news-list .news-item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    width: 100%; }
    .news-list .news-item:nth-child(even) {
      -webkit-box-pack: end;
          -ms-flex-pack: end;
              justify-content: flex-end; }
      .news-list .news-item:nth-child(even) .content {
        padding-left: 3.90244rem; }
      .news-list .news-item:nth-child(even) .thumb-wrapper {
        padding-right: 0;
        padding-left: 3.90244rem; }
        .news-list .news-item:nth-child(even) .thumb-wrapper .number {
          right: unset;
          left: -0.97561rem; }
        .news-list .news-item:nth-child(even) .thumb-wrapper .date {
          -webkit-writing-mode: vertical-rl;
              -ms-writing-mode: tb-rl;
                  writing-mode: vertical-rl;
          text-orientation: mixed;
          bottom: 0;
          left: 0;
          right: unset; }
    .news-list .news-item .inner {
      display: block;
      width: 60%;
      max-width: 69.7561rem; }
    .news-list .news-item .thumb {
      overflow: hidden;
      aspect-ratio: 4/3;
      width: 100%; }
    .news-list .news-item .content {
      padding: 3.60976rem 4.87805rem 3.60976rem 0; }
    .news-list .news-item img {
      width: 100%;
      height: 100%;
      -o-object-fit: cover;
         object-fit: cover; }
    .news-list .news-item .ttl {
      font-size: 3.90244rem; }
    .news-list .news-item .desc {
      margin: 1.95122rem 0; }
    .news-list .news-item .btn-explore-more {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center; }
      .news-list .news-item .btn-explore-more span {
        margin-left: 0.97561rem; }

.nav-paging {
  padding-bottom: 19.5122rem; }

.pagination {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-item-align: center;
      align-self: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center; }
  .pagination li {
    margin: 0 0.4878rem;
    color: #000;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-item-align: center;
        align-self: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    height: 3.90244rem;
    width: 3.90244rem;
    line-height: 40px; }
    .pagination li.active {
      background-color: #fff; }

@media (max-width: 1024px) {
  .title {
    padding-top: 4.87805rem;
    margin-bottom: 1.95122rem; }
  .thumb-wrapper {
    padding-right: 0; }
    .thumb-wrapper .number {
      font-size: 6.82927rem; }
    .thumb-wrapper .date {
      font-size: 1.36585rem;
      height: 9.7561rem; }
  .news-list .news-item {
    right: unset; }
    .news-list .news-item .ttl {
      font-size: 1.95122rem; }
    .news-list .news-item .inner {
      width: 100%; }
    .news-list .news-item:nth-child(even) .thumb-wrapper .number {
      left: -0.97561rem; }
    .news-list .news-item .thumb-wrapper {
      padding-right: 0;
      padding-left: 0 !important; }
      .news-list .news-item .thumb-wrapper .number {
        left: 0;
        right: unset;
        top: 30px; }
    .news-list .news-item .content {
      padding: 2.92683rem 0 !important; }
  .sec-bg {
    position: absolute;
    height: 100%; }
    .sec-bg img:last-child {
      max-width: 70%; } }