/* Mobile Pad Weight */
@media (max-width: 1024px) {
  body {
    position: relative;
    &#singlePage {
      .flex-wrapper {
        flex-wrap: nowrap !important;
        > .narrow {
          width: 30% !important;
          display: none !important;
        }
        > .weight {
          width: 100% !important;
          > .flex-wrapper {
            &.page {
              flex-wrap: wrap !important;
              > .weight,
              > .narrow {
                display: block !important;
                width: 100% !important;
              }
            }
          }
          &.smart-wrapper {
            > .listwrapper {
              margin-bottom: unset !important;
              > .c-item {
                > #image-wrap {
                  width: 100%;
                }
              }
            }
          }
        }
      }
    }
    &#searchPage {
      > main {
        &#primary {
          .flex-wrapper {
            &.smart {
              &.common {
                > .narrow {
                  display: block !important;
                }
              }
            }
          }
        }
      }
    }
    &#showPage {
      > main {
        &#primary {
          background-color: var(--secondary-bg-color);
          .c-item {
            border-color: var(--primary-bg-color);
          }
        }
      }
    }
    &#newsPage {
      #smartNavGrid {
        &.news {
          display: flex !important;
        }
        &.single {
          display: none !important;
        }
        &.techInv {
          display: none !important;
        }
      }
    }
  }
  header {
    &#primary {
      padding: 0 calc(var(--spacing-lg) * 1.5);
      > #left {
        &.flex-wrapper {
          > nav#navGrid {
            display: none;
          }
          > .logo {
            display: inline-flex;
            width: 230px;
            align-items: center;
            > img {
              margin: 0 auto;
              height: 100%;
              width: auto !important;
            }
          }
        }
      }
      > #right {
        &.flex-wrapper {
          > form {
            &#searchForm {
              > .search-wrap {
                > input {
                  width: 230px !important;
                }
              }
            }
          }
        }
      }
    }
  }
  main {
    &#primary {
      margin-left: 25%;
      .flex-wrapper {
        flex-wrap: wrap;
        > .narrow {
          width: 100%;
          > #tagWrap {
            > .tagList {
              padding-left: var(--spacing-md);
              padding-right: var(--spacing-md);
            }
          }
        }
        > .weight {
          width: 100%;
          &#commonArticle {
            flex-wrap: nowrap;
            > .narrow {
              .listwrapper {
                columns: 1 !important;
              }
            }
          }
        }
        &#pageGrid {
          > .narrow {
            display: none !important;
          }
          > .weight {
            width: 100% !important;
          }
        }
        .c-item {
          #image-wrap {
            width: 38%;
          }
          #content-wrap {
            width: 62%;
          }
          &.cont {
            > #content-wrap {
              width: 100% !important;
            }
          }
        }
        &.smart {
          flex-wrap: wrap !important;
          > .weight,
          > .narrow {
            width: 100%;
          }
          > .narrow {
            > #tagWrap {
              margin-bottom: unset;
            }
          }
          &.common {
            flex-wrap: nowrap;
            > .narrow {
              display: none !important;
            }
            > #commonArticle {
              width: 100%;
              > .weight,
              > .narrow {
                width: 100%;
                > .smart-wrapper {
                  > .listwrapper {
                    display: block;
                    columns: 2 !important;
                    column-gap: var(--spacing-lg);
                    break-inside: avoid;
                    margin-bottom: calc(var(--spacing-lg) * -1);
                    .c-item {
                      margin-bottom: var(--spacing-lg);
                      > #content-wrap {
                        width: 100% !important;
                      }
                    }
                  }
                }
              }
              .listwrapper {
                .c-item {
                  #image-wrap {
                    width: 40%;
                  }
                  #content-wrap {
                    width: 60%;
                  }
                }
              }
            }
            .air-navbar {
              display: none !important;
            }
            /* #smartNavGrid {
              display: flex !important;
            } */
          }
          > #commonArticle {
            flex-wrap: wrap !important;
            > .weight,
            > .narrow {
              width: 100% !important;
            }
            .c-item {
              > #image-wrap {
                width: 36%;
              }
              > #content-wrap {
                width: 64%;
              }
              &.cont {
                > #content-wrap {
                  width: 100% !important;
                }
              }
            }
          }
        }
        &.smart-grid {
          .weight {
            &.smart-wrapper {
              > .listwrapper {
                margin-bottom: unset !important;
              }
            }
          }
          .listwrapper {
            margin-bottom: unset !important;
            .c-item {
              #image-wrap {
                width: 100%;
              }
            }
          }
        }
      }
      .wrapper {
        &.smart-wrapper {
          > .listwrapper {
            display: block;
            columns: 2;
            column-gap: var(--spacing-lg);
            break-inside: avoid;
            margin-bottom: calc(var(--spacing-lg) * -1) !important;
            .c-item {
              margin-bottom: var(--spacing-lg);
            }
          }
        }
        &#searchTips {
          margin-bottom: var(--spacing-lg) !important;
        }
        &#siterCard {
          > .card {
            display: flex;
            gap: var(--spacing-lg);
            > .card-header {
              height: auto !important;
              width: 40%;
              margin-bottom: unset;
            }
            > .card-body {
              width: 60%;
              > .card-title {
                > * {
                  margin: auto 0;
                }
              }
            }
          }
        }
        &.air-navbar {
          margin-left: calc(var(--spacing-lg) * -2);
          margin-top: calc(var(--spacing-lg) * -6);
          margin-bottom: calc(var(--spacing-lg) * -1.7);
          border: unset;
          border-right: 1px solid var(--color-opacity-primary);
          height: 100vh;
          border-radius: unset;
          position: sticky;
          top: 0;
          bottom: 0;
          padding-top: 100px;
        }
        > .comment-wrap {
          > .grid-wrap {
            columns: unset !important;
          }
        }
        &#pageTitle {
          width: 100% !important;
        }
      }
      .swiper {
        height: auto !important;
      }
    }
  }
  footer {
    &#primary {
      z-index: 999;
      margin-left: 25%;
      > .container {
        > .flex-wrapper {
          flex-wrap: wrap !important;
          > .weight,
          > .narrow {
            width: 100% !important;
          }
          > .narrow {
            margin-top: calc(var(--spacing-md) * 2);
          }
        }
      }
    }
  }
  .container {
    padding: 0 calc(var(--spacing-lg) * 1.5);
  }
  aside {
    &#mobile {
      display: block;
      margin: unset !important;
      margin-top: var(--spacing-lg) !important;
      width: 25%;
      ul#navUl {
        li {
          &.active {
            background-color: unset;
            &::after {
              background-color: var(--primary-color);
            }
            > a {
              color: var(--color-black);
            }
          }
        }
      }
    }
  }
  content {
    padding: var(--spacing-md) !important;
    border: unset !important;
    border-radius: unset !important;
    > #address {
      padding: unset;
      background-color: unset !important;
      border: unset !important;
      border-radius: unset !important;
    }
  }
}
/* Mobile Phone */
@media (max-width: 860px) {
  .container {
    padding: 0 var(--spacing-md);
  }
  body {
    &#showPage {
      header {
        &#mobile {
          margin-bottom: unset !important;
        }
      }
      main {
        &#primary {
          border-top: 1px solid var(--primary-bg-color);
        }
      }
      footer {
        &#primary {
          display: grid;
          border-top: 1px solid var(--color-opacity-primary);
          .narrow {
            > .flex-wrapper {
              padding: var(--spacing-lg) 0;
            }
          }
        }
      }
      .flex-wrapper {
        flex-wrap: wrap;
        > .weight,
        > .narrow {
          width: 100% !important;
          position: relative !important;
          padding: unset !important;
          overflow: unset !important;
          height: unset !important;
        }
      }
      content {
        .info {
          flex-wrap: wrap;
        }
      }
      .c-item {
        border-color: var(--primary-bg-color);
      }
      .wrapper {
        padding: var(--spacing-md);
        &#contentComment {
          .comment-wrap {
            > .grid-wrap {
              column-count: 1 !important;
            }
          }
        }
        .c-item {
          &.cont {
            border-color: var(--primary-bg-color) !important;
          }
        }
      }
    }
    &#singlePage {
      .flex-wrapper {
        > .narrow {
          display: none;
        }
        > .weight {
          width: 100% !important;
          &.smart-wrapper {
            > .listwrapper {
              > .c-item {
                &.cont {
                  padding-left: var(--spacing-xl) !important;
                  padding-right: var(--spacing-xl) !important;
                }
              }
            }
          }
          > #history {
            .c-item {
              img {
                width: 100%;
                margin-bottom: var(--spacing-md);
              }
              .card-content {
                width: 100%;
              }
            }
          }
        }
      }
      footer {
        &#primary {
          margin-top: var(--spacing-md);
          .narrow {
            display: block;
            width: 100% !important;
          }
        }
      }
      #smartNavGrid {
        &.news {
          display: none !important;
        }
        &.techInv {
          display: none !important;
        }
        &.single {
          display: flex !important;
        }
      }
    }
    &#newsPage {
      #smartNavGrid {
        &.news {
          display: flex !important;
        }
        &.techInv {
          display: none !important;
        }
        &.single {
          display: none !important;
        }
      }
    }
    &#searchPage {
      .flex-wrapper {
        &.smart {
          &.common {
            > #commonArticle {
              > .wrapper {
                > .listwrapper {
                  > .c-item {
                    > #content-wrap {
                      width: 100% !important;
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
  header {
    &#primary {
      display: none;
    }
    &#mobile {
      display: flex;
    }
  }
  main {
    &#primary {
      padding: var(--spacing-md) 0;
      margin-left: unset;
      .swiper {
        height: 120px !important;
        .swiper-button-prev,
        .swiper-button-next {
          display: none;
        }
      }
      .wrapper {
        &.smart-wrapper {
          > .listwrapper {
            margin-bottom: unset !important;
            columns: 1 !important;
          }
        }
        &#contentPages {
          padding: unset !important;
          border: 1px solid var(--color-white) !important;
          overflow: hidden;
          > #page {
            width: 100%;
            display: inline-flex !important;
            > a {
              border-radius: unset;
            }
            .listpage,
            .pageinfo,
            .homepage {
              display: none !important;
            }
            .nopage {
              display: block !important;
              color: var(--secondary-color);
            }
            .nopage,
            .prevpage,
            .nextpage {
              line-height: 52px;
              text-align: center;
              width: 50% !important;
              display: block;
            }
            .prevpage,
            .nextpage {
              &:hover {
                background-color: var(--primary-bg-color);
              }
            }
          }
        }
        &#siterCard {
          > .card {
            display: grid;
            > .card-header,
            > .card-body {
              width: 100% !important;
            }
            > .card-body {
              border-radius: unset !important;
              border: unset !important;
            }
          }
        }
        #toper {
          > .listwrapper {
            > .c-item {
              &.cont {
                border-radius: unset !important;
              }
            }
          }
        }
        > .listwrapper {
          margin-bottom: unset !important;
          > .c-item {
            display: block;
            > #image-wrap {
              width: 100%;
              height: max-content;
              margin-bottom: var(--spacing-md);
            }
            #content-wrap {
              width: 100% !important;
              h4 {
                max-height: 50px;
                height: auto;
              }
            }
            &.cont {
              border-color: var(--color-white);
              padding-left: unset;
              padding-right: unset;
              border-top-color: var(--primary-bg-color);
              border-bottom-color: var(--primary-bg-color);
              > #content-wrap {
                > p {
                  display: inline-block;
                }
              }
              &:last-of-type {
                border-bottom-color: var(--color-white);
              }
            }
          }
        }
      }
      .flex-wrapper {
        &#index {
          > .weight {
            display: flex;
            flex-direction: column;
            > .weight {
              order: 0;
            }
            > .narrow {
              order: 999;
            }
          }
          .weight {
            .wrapper {
              .c-item {
                &.cont {
                  border-radius: unset !important;
                }
              }
            }
          }
        }
        &.smart {
          .weight,
          .narrow {
            width: 100%;
          }
          > .narrow {
            order: 2;
            margin-bottom: var(--spacing-lg);
          }
          .listwrapper {
            margin-bottom: calc(var(--spacing-md) * 2) !important;
            .c-item {
              > #image-wrap,
              > #content-wrap {
                width: 100% !important;
              }
              &.cont {
                padding-left: var(--spacing-xl);
                padding-right: var(--spacing-xl);
              }
            }
          }
        }
        &#commonArticle {
          margin-bottom: var(--spacing-md);
          display: grid;
          > .narrow {
            .listwrapper {
              margin-bottom: unset !important;
              gap: var(--spacing-lg);
              display: grid;
              > .c-item {
                margin-bottom: unset !important;
              }
            }
          }
        }
        &#address {
          display: inline-flex;
          position: relative !important;
          background-color: unset !important;
          margin-bottom: var(--spacing-xl) !important;
          padding: unset !important;
          z-index: unset !important;
          p {
            display: inline;
            > * {
              margin-right: var(--spacing-md);
            }
          }
        }
      }
    }
  }
  footer {
    &#primary {
      margin-left: unset !important;
      .flex-wrapper {
        display: block;
        > .weight,
        > .narrow {
          width: 100%;
        }
        #beian {
          gap: unset !important;
          flex-wrap: wrap;
          margin-bottom: var(--spacing-md);
          a {
            margin-right: var(--spacing-md);
          }
        }
        > .narrow {
          > .flex-wrapper {
            display: flex;
          }
        }
      }
    }
  }
  aside {
    &#mobile {
      display: block;
      width: 230px;
      margin-left: -70% !important;
      &.active {
        margin-left: 0 !important;
      }
    }
    &#search {
      display: block;
      width: 100%;
      margin-right: -100%;
      &.active {
        margin-right: 0 !important;
      }
    }
  }
  .air-navbar {
    display: none;
  }
  .flex-wrapper {
    &.smart {
      &.common {
        .weight {
          width: 100% !important;
        }
        .narrow {
          display: none;
        }
      }
    }
    > #commonArticle {
      &.flex-wrapper {
        > .wrapper {
          > .listwrapper {
            > .c-item {
              > #content-wrap {
                width: 100% !important;
              }
            }
          }
        }
      }
    }
  }
}
/* Night Theme */
@media (prefers-color-scheme: dark) {
  :root {
    --color-night-black: #23272a;
    --primary-color: var(--color-light-blue);
    --primary-bg-color: #181c1f;
    --secondary-bg-color: var(--color-night-black);
    --secondary-light-bg-color: var(--color-light-black);
    --text-color: var(--color-light-white);
    --font-color-base: var(--text-color);
    --color-link-hover: var(--color-light-blue);
    --color-first-item: var(--color-dark-red);
    --color-opacity-black: #23272a9a;
  }
  html,
  body {
  }
  img {
    &:hover {
      box-shadow: var(--shadow-default) var(--color-opacity-black);
    }
  }
  a {
    color: var(--font-color-base);
  }
  input[type="text"],
  input[type="search"],
  input[type="email"],
  input[type="password"],
  input[type="tel"],
  input[type="url"],
  input[type="number"],
  textarea {
    background-color: var(--primary-bg-color);
    border: 1px solid var(--primary-bg-color) !important;
    &:hover,
    &:focus {
      border-color: var(--primary-color) !important;
    }
  }
  header {
    border-bottom: 1px solid var(--primary-color);
    backdrop-filter: blur(5px);
    box-shadow: var(--shadow-default) var(--color-opacity-black) !important;
    .logo {
      > img {
        filter: brightness(0) saturate(100%) invert(1);
        -webkit-filter: brightness(0) saturate(100%) invert(1);
        &:hover {
          box-shadow: unset !important;
        }
      }
    }
    a {
      color: var(--secondary-color) !important;
    }
    &#primary {
      > .flex-wrapper {
        &#right {
          .search-wrap {
            overflow: hidden;
            border-radius: var(--radius-sm);
            border: 1px solid var(--primary-bg-color);
            &:hover {
              border-color: var(--primary-color);
            }
            > button {
              border-radius: unset;
              background-color: var(--primary-bg-color);
              > svg {
                color: var(--font-color-base);
              }
            }
            > input {
              color: var(--font-color-base);
              background-color: var(--primary-bg-color);
            }
          }
        }
      }
    }
    &#mobile {
      .open-bars {
        &.active {
          color: var(--primary-color) !important;
        }
      }
    }
  }
  aside {
    &#mobile {
      background-color: var(--color-opacity-black);
      backdrop-filter: blur(4px);
      > ul#navUl {
        > li {
          &.active {
            > a {
              color: var(--color-white);
            }
          }
        }
      }
    }
  }
  main {
    &#primary {
      .wrapper {
        &#tagWrap {
          > .tagList {
            > a {
              > span {
                &:first-of-type {
                  color: var(--font-color-base);
                }
              }
            }
          }
        }
        > .listwrapper {
          > .c-item {
            > #image-wrap {
              > span {
                background-color: var(--color-opacity-black) !important;
                color: var(--font-color-base) !important;
              }
            }
            &:hover {
              > #content-wrap {
                > .info {
                  > p {
                    > svg {
                      color: var(--color-white) !important;
                    }
                  }
                }
              }
            }
            &.cont {
              border-color: var(--primary-bg-color);
              &:hover {
                border-color: var(--color-opacity-primary);
              }
            }
          }
        }
      }
    }
  }
  footer {
    &#primary {
      #beian {
        > a {
          > span {
            color: var(--font-color-base);
          }
        }
      }
    }
  }
  content {
    p#great {
      border: 1px solid var(--color-opacity-primary) !important;
      background-color: var(--color-opacity-black) !important;
    }
    > h2 {
      color: var(--font-color-base) !important;
    }
    .tagList {
      > a {
        > span {
          &:first-of-type {
            color: var(--font-color-base);
          }
        }
      }
    }
  }
  @media screen and (max-width: 860px) {
    .c-item {
      &.cont {
        border-color: var(--secondary-bg-color) !important;
        border-top: 1px solid var(--primary-bg-color) !important;
      }
    }
  }
}
/* Light Theme */
@media (prefers-color-scheme: light) {
  @media screen and (max-width: 860px) {
    body {
      &#showPage {
        background-color: var(--secondary-bg-color);
        > footer {
          &#primary {
            border-top: 1px solid var(--color-opacity-primary);
          }
        }
      }
    }
  }
}
.harmonyOS {
  /* Mobile Pad Weight */
  @media (max-width: 1600px) {
    body {
      position: relative;
      &#singlePage {
        .flex-wrapper {
          flex-wrap: nowrap !important;
          > .narrow {
            width: 30% !important;
            display: none !important;
          }
          > .weight {
            width: 100% !important;
            > .flex-wrapper {
              &.page {
                flex-wrap: wrap !important;
                > .weight,
                > .narrow {
                  display: block !important;
                  width: 100% !important;
                }
              }
            }
            &.smart-wrapper {
              > .listwrapper {
                margin-bottom: unset !important;
                > .c-item {
                  > #image-wrap {
                    width: 100%;
                  }
                }
              }
            }
          }
        }
      }
      &#searchPage {
        > main {
          &#primary {
            .flex-wrapper {
              &.smart {
                &.common {
                  > .narrow {
                    display: block !important;
                  }
                }
              }
            }
          }
        }
      }
      &#showPage {
        > main {
          &#primary {
            background-color: var(--secondary-bg-color);
            .c-item {
              border-color: var(--primary-bg-color);
            }
          }
        }
      }
      &#newsPage {
        #smartNavGrid {
          &.news {
            display: flex !important;
          }
          &.single {
            display: none !important;
          }
          &.techInv {
            display: none !important;
          }
        }
      }
    }
    header {
      &#primary {
        padding: 0 calc(var(--spacing-lg) * 1.5);
        > #left {
          &.flex-wrapper {
            > nav#navGrid {
              display: none;
            }
            > .logo {
              display: inline-flex;
              width: 230px;
              align-items: center;
              > img {
                margin: 0 auto;
                height: 100%;
                width: auto !important;
              }
            }
          }
        }
        > #right {
          &.flex-wrapper {
            > form {
              &#searchForm {
                > .search-wrap {
                  > input {
                    width: 230px !important;
                  }
                }
              }
            }
          }
        }
      }
    }
    main {
      &#primary {
        margin-left: 25%;
        .flex-wrapper {
          flex-wrap: wrap;
          > .narrow {
            width: 100%;
            > #tagWrap {
              > .tagList {
                padding-left: var(--spacing-md);
                padding-right: var(--spacing-md);
              }
            }
          }
          > .weight {
            width: 100%;
            &#commonArticle {
              flex-wrap: nowrap;
              > .narrow {
                .listwrapper {
                  columns: 1 !important;
                }
              }
            }
          }
          &#pageGrid {
            > .narrow {
              display: none !important;
            }
            > .weight {
              width: 100% !important;
            }
          }
          .c-item {
            #image-wrap {
              width: 38%;
            }
            #content-wrap {
              width: 62%;
            }
            &.cont {
              > #content-wrap {
                width: 100% !important;
              }
            }
          }
          &.smart {
            flex-wrap: wrap !important;
            > .weight,
            > .narrow {
              width: 100%;
            }
            > .narrow {
              > #tagWrap {
                margin-bottom: unset;
              }
            }
            &.common {
              flex-wrap: nowrap;
              > .narrow {
                display: none !important;
              }
              > #commonArticle {
                width: 100%;
                > .weight,
                > .narrow {
                  width: 100%;
                  > .smart-wrapper {
                    > .listwrapper {
                      display: block;
                      columns: 2 !important;
                      column-gap: var(--spacing-lg);
                      break-inside: avoid;
                      margin-bottom: calc(var(--spacing-lg) * -1);
                      .c-item {
                        margin-bottom: var(--spacing-lg);
                        > #content-wrap {
                          width: 100% !important;
                        }
                      }
                    }
                  }
                }
                .listwrapper {
                  .c-item {
                    #image-wrap {
                      width: 40%;
                    }
                    #content-wrap {
                      width: 60%;
                    }
                  }
                }
              }
              .air-navbar {
                display: none !important;
              }
              /* #smartNavGrid {
              display: flex !important;
            } */
            }
            > #commonArticle {
              flex-wrap: wrap !important;
              > .weight,
              > .narrow {
                width: 100% !important;
              }
              .c-item {
                > #image-wrap {
                  width: 36%;
                }
                > #content-wrap {
                  width: 64%;
                }
                &.cont {
                  > #content-wrap {
                    width: 100% !important;
                  }
                }
              }
            }
          }
          &.smart-grid {
            .weight {
              &.smart-wrapper {
                > .listwrapper {
                  margin-bottom: unset !important;
                }
              }
            }
            .listwrapper {
              margin-bottom: unset !important;
              .c-item {
                #image-wrap {
                  width: 100%;
                }
              }
            }
          }
        }
        .wrapper {
          &.smart-wrapper {
            > .listwrapper {
              display: block;
              columns: 2;
              column-gap: var(--spacing-lg);
              break-inside: avoid;
              margin-bottom: calc(var(--spacing-lg) * -1) !important;
              .c-item {
                margin-bottom: var(--spacing-lg);
              }
            }
          }
          &#searchTips {
            margin-bottom: var(--spacing-lg) !important;
          }
          &#siterCard {
            > .card {
              display: flex;
              gap: var(--spacing-lg);
              > .card-header {
                height: auto !important;
                width: 40%;
                margin-bottom: unset;
              }
              > .card-body {
                width: 60%;
                > .card-title {
                  > * {
                    margin: auto 0;
                  }
                }
              }
            }
          }
          &.air-navbar {
            margin-left: calc(var(--spacing-lg) * -2);
            margin-top: calc(var(--spacing-lg) * -6);
            margin-bottom: calc(var(--spacing-lg) * -1.7);
            border: unset;
            border-right: 1px solid var(--color-opacity-primary);
            height: 100vh;
            border-radius: unset;
            position: sticky;
            top: 0;
            bottom: 0;
            padding-top: 100px;
          }
          > .comment-wrap {
            > .grid-wrap {
              columns: unset !important;
            }
          }
          &#pageTitle {
            width: 100% !important;
          }
        }
        .swiper {
          height: auto !important;
        }
      }
    }
    footer {
      &#primary {
        z-index: 999;
        margin-left: 25%;
        > .container {
          > .flex-wrapper {
            flex-wrap: wrap !important;
            > .weight,
            > .narrow {
              width: 100% !important;
            }
            > .narrow {
              margin-top: calc(var(--spacing-md) * 2);
            }
          }
        }
      }
    }
    .container {
      padding: 0 calc(var(--spacing-lg) * 1.5);
    }
    aside {
      &#mobile {
        display: block;
        margin: unset !important;
        margin-top: var(--spacing-lg) !important;
        width: 25%;
        ul#navUl {
          li {
            &.active {
              background-color: unset;
              &::after {
                background-color: var(--primary-color);
              }
              > a {
                color: var(--color-black);
              }
            }
          }
        }
      }
    }
    content {
      padding: var(--spacing-md) !important;
      border: unset !important;
      border-radius: unset !important;
      > #address {
        padding: unset;
        background-color: unset !important;
        border: unset !important;
        border-radius: unset !important;
      }
    }
  }
  /* Mobile Phone */
  @media (max-width: 860px) {
    .container {
      padding: 0 var(--spacing-md);
    }
    body {
      &#showPage {
        header {
          &#mobile {
            margin-bottom: unset !important;
          }
        }
        main {
          &#primary {
            border-top: 1px solid var(--primary-bg-color);
          }
        }
        footer {
          &#primary {
            display: grid;
            border-top: 1px solid var(--color-opacity-primary);
            .narrow {
              > .flex-wrapper {
                padding: var(--spacing-lg) 0;
              }
            }
          }
        }
        .flex-wrapper {
          flex-wrap: wrap;
          > .weight,
          > .narrow {
            width: 100% !important;
            position: relative !important;
            padding: unset !important;
            overflow: unset !important;
            height: unset !important;
          }
        }
        content {
          .info {
            flex-wrap: wrap;
          }
        }
        .c-item {
          border-color: var(--primary-bg-color);
        }
        .wrapper {
          padding: var(--spacing-md);
          &#contentComment {
            .comment-wrap {
              > .grid-wrap {
                column-count: 1 !important;
              }
            }
          }
          .c-item {
            &.cont {
              border-color: var(--primary-bg-color) !important;
            }
          }
        }
      }
      &#singlePage {
        .flex-wrapper {
          > .narrow {
            display: none;
          }
          > .weight {
            width: 100% !important;
            &.smart-wrapper {
              > .listwrapper {
                > .c-item {
                  &.cont {
                    padding-left: var(--spacing-xl) !important;
                    padding-right: var(--spacing-xl) !important;
                  }
                }
              }
            }
            > #history {
              .c-item {
                img {
                  width: 100%;
                  margin-bottom: var(--spacing-md);
                }
                .card-content {
                  width: 100%;
                }
              }
            }
          }
        }
        footer {
          &#primary {
            margin-top: var(--spacing-md);
            .narrow {
              display: block;
              width: 100% !important;
            }
          }
        }
        #smartNavGrid {
          &.news {
            display: none !important;
          }
          &.techInv {
            display: none !important;
          }
          &.single {
            display: flex !important;
          }
        }
      }
      &#newsPage {
        #smartNavGrid {
          &.news {
            display: flex !important;
          }
          &.techInv {
            display: none !important;
          }
          &.single {
            display: none !important;
          }
        }
      }
      &#searchPage {
        .flex-wrapper {
          &.smart {
            &.common {
              > #commonArticle {
                > .wrapper {
                  > .listwrapper {
                    > .c-item {
                      > #content-wrap {
                        width: 100% !important;
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
    header {
      &#primary {
        display: none;
      }
      &#mobile {
        display: flex;
      }
    }
    main {
      &#primary {
        padding: var(--spacing-md) 0;
        margin-left: unset;
        .swiper {
          height: 120px !important;
          .swiper-button-prev,
          .swiper-button-next {
            display: none;
          }
        }
        .wrapper {
          &.smart-wrapper {
            > .listwrapper {
              margin-bottom: unset !important;
              columns: 1 !important;
            }
          }
          &#contentPages {
            padding: unset !important;
            border: 1px solid var(--color-white) !important;
            overflow: hidden;
            > #page {
              width: 100%;
              display: inline-flex !important;
              > a {
                border-radius: unset;
              }
              .listpage,
              .pageinfo,
              .homepage {
                display: none !important;
              }
              .nopage {
                display: block !important;
                color: var(--secondary-color);
              }
              .nopage,
              .prevpage,
              .nextpage {
                line-height: 52px;
                text-align: center;
                width: 50% !important;
                display: block;
              }
              .prevpage,
              .nextpage {
                &:hover {
                  background-color: var(--primary-bg-color);
                }
              }
            }
          }
          &#siterCard {
            > .card {
              display: grid;
              > .card-header,
              > .card-body {
                width: 100% !important;
              }
              > .card-body {
                border-radius: unset !important;
                border: unset !important;
              }
            }
          }
          #toper {
            > .listwrapper {
              > .c-item {
                &.cont {
                  border-radius: unset !important;
                }
              }
            }
          }
          > .listwrapper {
            margin-bottom: unset !important;
            > .c-item {
              display: block;
              > #image-wrap {
                width: 100%;
                height: max-content;
                margin-bottom: var(--spacing-md);
              }
              #content-wrap {
                width: 100% !important;
                h4 {
                  max-height: 50px;
                  height: auto;
                }
              }
              &.cont {
                border-color: var(--color-white);
                padding-left: unset;
                padding-right: unset;
                border-top-color: var(--primary-bg-color);
                border-bottom-color: var(--primary-bg-color);
                > #content-wrap {
                  > p {
                    display: inline-block;
                  }
                }
                &:last-of-type {
                  border-bottom-color: var(--color-white);
                }
              }
            }
          }
        }
        .flex-wrapper {
          &#index {
            > .weight {
              display: flex;
              flex-direction: column;
              > .weight {
                order: 0;
              }
              > .narrow {
                order: 999;
              }
            }
            .weight {
              .wrapper {
                .c-item {
                  &.cont {
                    border-radius: unset !important;
                  }
                }
              }
            }
          }
          &.smart {
            .weight,
            .narrow {
              width: 100%;
            }
            > .narrow {
              order: 2;
              margin-bottom: var(--spacing-lg);
            }
            .listwrapper {
              margin-bottom: calc(var(--spacing-md) * 2) !important;
              .c-item {
                > #image-wrap,
                > #content-wrap {
                  width: 100% !important;
                }
                &.cont {
                  padding-left: var(--spacing-xl);
                  padding-right: var(--spacing-xl);
                }
              }
            }
          }
          &#commonArticle {
            margin-bottom: var(--spacing-md);
            display: grid;
            > .narrow {
              .listwrapper {
                margin-bottom: unset !important;
                gap: var(--spacing-lg);
                display: grid;
                > .c-item {
                  margin-bottom: unset !important;
                }
              }
            }
          }
          &#address {
            display: inline-flex;
            position: relative !important;
            background-color: unset !important;
            margin-bottom: var(--spacing-xl) !important;
            padding: unset !important;
            z-index: unset !important;
            p {
              display: inline;
              > * {
                margin-right: var(--spacing-md);
              }
            }
          }
        }
      }
    }
    footer {
      &#primary {
        margin-left: unset !important;
        .flex-wrapper {
          display: block;
          > .weight,
          > .narrow {
            width: 100%;
          }
          #beian {
            gap: unset !important;
            flex-wrap: wrap;
            margin-bottom: var(--spacing-md);
            a {
              margin-right: var(--spacing-md);
            }
          }
          > .narrow {
            > .flex-wrapper {
              display: flex;
            }
          }
        }
      }
    }
    aside {
      &#mobile {
        display: block;
        width: 230px;
        margin-left: -70% !important;
        &.active {
          margin-left: 0 !important;
        }
      }
      &#search {
        display: block;
        width: 100%;
        margin-right: -100%;
        &.active {
          margin-right: 0 !important;
        }
      }
    }
    .air-navbar {
      display: none;
    }
    .flex-wrapper {
      &.smart {
        &.common {
          .weight {
            width: 100% !important;
          }
          .narrow {
            display: none;
          }
        }
      }
      > #commonArticle {
        &.flex-wrapper {
          > .wrapper {
            > .listwrapper {
              > .c-item {
                > #content-wrap {
                  width: 100% !important;
                }
              }
            }
          }
        }
      }
    }
  }
  /* Night Theme */
  @media (prefers-color-scheme: dark) {
    :root {
      --color-night-black: #23272a;
      --primary-color: var(--color-light-blue);
      --primary-bg-color: #181c1f;
      --secondary-bg-color: var(--color-night-black);
      --secondary-light-bg-color: var(--color-light-black);
      --text-color: var(--color-light-white);
      --font-color-base: var(--text-color);
      --color-link-hover: var(--color-light-blue);
      --color-first-item: var(--color-dark-red);
      --color-opacity-black: #23272a9a;
    }
    html,
    body {
    }
    img {
      &:hover {
        box-shadow: var(--shadow-default) var(--color-opacity-black);
      }
    }
    a {
      color: var(--font-color-base);
    }
    input[type="text"],
    input[type="search"],
    input[type="email"],
    input[type="password"],
    input[type="tel"],
    input[type="url"],
    input[type="number"],
    textarea {
      background-color: var(--primary-bg-color);
      border: 1px solid var(--primary-bg-color) !important;
      &:hover,
      &:focus {
        border-color: var(--primary-color) !important;
      }
    }
    header {
      border-bottom: 1px solid var(--primary-color);
      backdrop-filter: blur(5px);
      box-shadow: var(--shadow-default) var(--color-opacity-black) !important;
      .logo {
        > img {
          filter: brightness(0) saturate(100%) invert(1);
          -webkit-filter: brightness(0) saturate(100%) invert(1);
          &:hover {
            box-shadow: unset !important;
          }
        }
      }
      a {
        color: var(--secondary-color) !important;
      }
      &#primary {
        > .flex-wrapper {
          &#right {
            .search-wrap {
              overflow: hidden;
              border-radius: var(--radius-sm);
              border: 1px solid var(--primary-bg-color);
              &:hover {
                border-color: var(--primary-color);
              }
              > button {
                border-radius: unset;
                background-color: var(--primary-bg-color);
                > svg {
                  color: var(--font-color-base);
                }
              }
              > input {
                color: var(--font-color-base);
                background-color: var(--primary-bg-color);
              }
            }
          }
        }
      }
      &#mobile {
        .open-bars {
          &.active {
            color: var(--primary-color) !important;
          }
        }
      }
    }
    aside {
      &#mobile {
        background-color: var(--color-opacity-black);
        backdrop-filter: blur(4px);
        > ul#navUl {
          > li {
            &.active {
              > a {
                color: var(--color-white);
              }
            }
          }
        }
      }
    }
    main {
      &#primary {
        .wrapper {
          &#tagWrap {
            > .tagList {
              > a {
                > span {
                  &:first-of-type {
                    color: var(--font-color-base);
                  }
                }
              }
            }
          }
          > .listwrapper {
            > .c-item {
              > #image-wrap {
                > span {
                  background-color: var(--color-opacity-black) !important;
                  color: var(--font-color-base) !important;
                }
              }
              &:hover {
                > #content-wrap {
                  > .info {
                    > p {
                      > svg {
                        color: var(--color-white) !important;
                      }
                    }
                  }
                }
              }
              &.cont {
                border-color: var(--primary-bg-color);
                &:hover {
                  border-color: var(--color-opacity-primary);
                }
              }
            }
          }
        }
      }
    }
    footer {
      &#primary {
        #beian {
          > a {
            > span {
              color: var(--font-color-base);
            }
          }
        }
      }
    }
    content {
      p#great {
        border: 1px solid var(--color-opacity-primary) !important;
        background-color: var(--color-opacity-black) !important;
      }
      > h2 {
        color: var(--font-color-base) !important;
      }
      .tagList {
        > a {
          > span {
            &:first-of-type {
              color: var(--font-color-base);
            }
          }
        }
      }
    }
    @media screen and (max-width: 860px) {
      .c-item {
        &.cont {
          border-color: var(--secondary-bg-color) !important;
          border-top: 1px solid var(--primary-bg-color) !important;
        }
      }
    }
  }
  /* Light Theme */
  @media (prefers-color-scheme: light) {
    @media screen and (max-width: 860px) {
      body {
        &#showPage {
          background-color: var(--secondary-bg-color);
          > footer {
            &#primary {
              border-top: 1px solid var(--color-opacity-primary);
            }
          }
        }
      }
    }
  }
}