@import url('./s768/news-detail.css');

#header {
  --header-bg: var(--header-bg-none);
  --nav-color: var(--nav-color-dark);
}

#news_d_main {
  background-image: url('../images/news/banner_news.jpg');
  background-color: #f0f4f5;
  background-repeat: no-repeat;
  background-size: 100% auto;
  padding-top: var(--header-height);
  min-height: 100vh;

  .content {
    --w: 1000px;
    width: var(--w);
    margin: 80px auto;
    background-color: #ffffff;
    position: relative;
    min-height: 500px;
    display: grid;

    .goback {
      --s: 80px;
      position: absolute;
      top: 40px;
      left: calc(0px - var(--s));
      width: var(--s);
      height: var(--s);
      background-color: #52b64d;
      font-size: 18px;
      border-radius: 10px 0 0 10px;

      a {
        text-decoration: none;
        color: #f0f4f5;
        width: 100%;
        height: 100%;

        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
      }

      &:hover {
        background-color: #00705c;
      }
    }

    .view {
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      padding: 40px 80px;
      width: var(--w);
      box-sizing: border-box;

      .view-content {
        flex-grow: 1;

        p {
          box-sizing: border-box;
        }

        p > img,
        p > span > img {
          max-width: 100%;
          object-fit: contain;
        }

        p:has(img) {
          text-align: center;
        }
      }

      .view-title {
        font-size: 30px;
        font-weight: bold;
        text-align: center;
        margin: 40px 0;
      }

      .view-footer {
        --color: #999999;
        display: flex;
        justify-content: space-between;
        padding: 40px 0;
        border-top: 1px solid var(--color);
        color: var(--color);
      }
    }
  }
}