.media-wrap { 
  margin-top: 110px; position: relative; width: 100%;
  .newsletter-area {
    float: right; position: relative; width: 410px; 
    .newsletter {
      position: relative; padding-bottom: 68%; width: 100%;
      background-image: url("../../img/main/newsletter_img.webp");
      background-position: center;
      background-repeat: no-repeat;
      background-size: 100%;
      &:before { content: ''; position: absolute; top:15px; left: 15px; width: calc(100% - 30px); height: calc(100% - 30px); border: 5px solid rgba(255,255,255,0.4); }
      .text-wrap {
        @include alignCenter; text-align: center; color: #fff; width: 100%;
        .title { 
          position: relative; font-size: 3.3rem; font-weight: 900; padding-bottom: 20px; margin-bottom: 20px; letter-spacing: 0; text-shadow: 2px 2px 5px rgba(0,0,0,0.5);
          &:before { content: ''; position: absolute; left: 50%; transform: translateX(-50%); bottom:-2px; width: 30px; height: 3px; background:rgba(255,255,255,0.5); }
        }
        .date {font-size: 2rem; font-weight: 600; text-shadow: 2px 2px 5px rgba(0,0,0,0.5);}
      }
    }
  }
  .press-area {
    float: left; width: calc(100% - 440px); position: relative;
    .press-board {
      position: relative; 
      ul {
        border-top: 1px solid #000;
        li {
          position: relative; padding: 15px 0; cursor: pointer; border-bottom: 1px solid var(--line-color);
          &:hover {
            .title { text-decoration: underline; }
          }
          .info {
            span { 
              position: relative; display: inline-block; font-size: 1.2rem; font-weight: 500; color: #aaa; 
              &:first-child {
                padding-right: 20px;
                &:before { content: ''; position: absolute; top:5px; right:6px; width: 4px; height: 4px; border-radius: 5px; background: #c1c1c1; }
              }
            }
          }
          &.first-post {
            position: relative;
            .img-area {
              float: left; width: 285px; height: 150px; overflow: hidden; 
              > img { width: 100%; height: inherit; }
            }
            .txt-area {
              float: right; width: calc(100% - 305px); padding-top: 5px;
              .title { font-size: 1.5rem; padding-top:15px; color: #333; font-weight: 600; line-height: 1.9; overflow: hidden; display: -webkit-box; white-space: normal; word-wrap: break-word; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
              .text { font-size: 1.3rem; padding-top:5px; color: #6b6b6b; font-weight: 500; line-height: 1.9; overflow: hidden; display: -webkit-box; white-space: normal; word-wrap: break-word; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
            }
          }
          &.item {
            .title { @include ellipsis; float: left; width: calc(100% - 140px); font-size: 1.4rem; font-weight: 500; color: #333; }
            .info { position: absolute; bottom:15px; right:0; width: 140px; text-align: right;}
          }
        }
      }
    }
  }
}

@media (max-width: 1200px) {
  .media-wrap {
    margin-top: 90px;
    .press-area {
      .press-board {
        ul {
          li {
            &.first-post {
              .img-area {width: 250px; padding-bottom: 26%; }
              .txt-area {
                width: calc(100% - 265px);
                .title { font-size: 1.4rem; line-height: 1.7; }
                .text { font-size: 1.2rem; line-height: 1.7; }
              }
            }
            &.item {
              .title { font-size: 1.3rem; }
            }
          }
        }
      }
    }
  }
}

@media (max-width: 1024px) {
  .media-wrap {
    .press-area {
      float: none; width: 100%; margin-bottom: 40px;
      .press-board {
        ul {
          li {
            &.first-post {
              .img-area {padding-bottom: 12%;}
            }
          }
        }
      }
    }
    .newsletter-area {
      float: none; width: 100%;
      .newsletter { 
        padding-bottom: 0; height: 190px;
        .text-wrap {
          .title { font-size: 2.5rem;}
          .date { font-size: 1.6rem; }
        }
      }
    }
  }
}

@media (max-width: 768px) {
  .media-wrap {
    .press-area {
      .press-board {
        ul {
          li {
            &.first-post {
              .img-area { width: 150px; height: 110px; padding-bottom: 0; }
              .txt-area { 
                width: calc(100% - 165px); 
                .title { padding-top: 7px; font-size: 1.3rem;}
                .text { font-size: 1.1rem;}
              }
            }
          }
        }
      }
    }
  }
}

@media (max-width: 400px) {
  .media-wrap {
    .press-area {
      .press-board {
        ul {
          li {
            &.first-post {
              .img-area { float: none; width: 100%; height: 140px;}
              .txt-area { float: none; width: 100%; padding-top: 15px;}
            }
          }
        }
      }
    }
  }
}