/* color */
/* font */
/* transition */
.linkBox {
  padding: 120px 50px; }
  @media (max-width: 768px) {
    .linkBox {
      padding: 60px 20px; } }
  @media (max-width: 640px) {
    .linkBox {
      padding: 40px 0; } }
  .linkBox .topBox {
    display: grid;
    grid-template-columns: 40% 60%;
    grid-template-rows: repeat(2, 1fr);
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    max-width: 100%;
    overflow: hidden; }
    .linkBox .topBox .linkItem {
      font-size: 0;
      height: 100%;
      overflow: hidden; }
      @media (min-width: 1281px) {
        .linkBox .topBox .linkItem:hover img {
          scale: 1.1; } }
      .linkBox .topBox .linkItem:nth-child(1) {
        grid-area: 1 / 1 / 3 / 2; }
      .linkBox .topBox .linkItem:nth-child(2) {
        grid-area: 1 / 2 / 2 / 3; }
      .linkBox .topBox .linkItem:nth-child(3) {
        grid-area: 2 / 2 / 3 / 3; }
      .linkBox .topBox .linkItem a {
        height: 100%; }
      .linkBox .topBox .linkItem img {
        height: 100%;
        max-width: 100%;
        object-fit: cover;
        width: 100%;
        transition: all 0.5s ease-in-out; }
  .linkBox .bottomBox {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    margin-top: 20px;
    max-width: 100%;
    overflow: hidden; }
    .linkBox .bottomBox .linkItem {
      font-size: 0;
      height: 100%;
      overflow: hidden; }
      @media (min-width: 1281px) {
        .linkBox .bottomBox .linkItem:hover img {
          scale: 1.1; } }
      .linkBox .bottomBox .linkItem:nth-child(1) {
        grid-area: 1 / 1 / 2 / 2; }
      .linkBox .bottomBox .linkItem:nth-child(2) {
        grid-area: 2 / 1 / 3 / 2; }
      .linkBox .bottomBox .linkItem:nth-child(3) {
        grid-area: 1 / 2 / 3 / 3; }
      .linkBox .bottomBox .linkItem a {
        height: 100%; }
      .linkBox .bottomBox .linkItem img {
        height: 100%;
        max-width: 100%;
        object-fit: cover;
        width: 100%;
        transition: all 0.5s ease-in-out; }

.aboutBox {
  position: relative;
  padding-bottom: 40px; }
  @media (max-width: 768px) {
    .aboutBox {
      overflow: hidden; } }
  .aboutBox:after {
    content: "";
    position: absolute;
    background-image: url("../assets/images/aboutBg.png");
    background-size: contain;
    background-position: right bottom;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: -1; }
    @media (max-width: 1024px) {
      .aboutBox:after {
        background-position: 350% bottom;
        opacity: 0.5; } }
    @media (max-width: 640px) {
      .aboutBox:after {
        background-position: center; } }
  .aboutBox .wrap {
    position: relative; }
  .aboutBox .content {
    margin-left: auto;
    max-width: 80%;
    margin-bottom: 80px; }
    @media (max-width: 1024px) {
      .aboutBox .content {
        max-width: 100%; } }
    @media (max-width: 640px) {
      .aboutBox .content {
        margin-bottom: 40px; } }
    .aboutBox .content p.small {
      color: #5daeb1;
      font-size: 18px;
      font-weight: 700;
      line-height: calc(26 / 18); }
      @media (max-width: 640px) {
        .aboutBox .content p.small {
          font-size: 14px; } }
    .aboutBox .content p.large {
      color: #398083;
      font-size: 24px;
      font-weight: 700;
      letter-spacing: 1.44px; }
      @media (max-width: 640px) {
        .aboutBox .content p.large {
          font-size: 20px; } }
  .aboutBox .btnBox {
    text-align: right;
    padding-right: 120px; }
    @media (max-width: 640px) {
      .aboutBox .btnBox {
        padding-right: 0; } }

.aboutLogo {
  position: absolute;
  left: 0;
  top: 10%; }

.productBox {
  padding: 70px 0;
  overflow: hidden; }
  @media (max-width: 640px) {
    .productBox {
      padding: 35px 0; } }

.productList {
  display: grid;
  grid-template-columns: repeat(3, calc(33% - 10px));
  column-gap: 35px;
  row-gap: 60px;
  margin-top: 60px; }
  @media (max-width: 1024px) {
    .productList {
      grid-template-columns: repeat(2, calc(50% - 10px));
      column-gap: 20px;
      row-gap: 40px; } }
  @media (max-width: 640px) {
    .productList {
      grid-template-columns: 100%;
      column-gap: 0;
      row-gap: 20px; } }
  .productList .productTitle h2 {
    font-size: 18px;
    letter-spacing: 1.08px; }
  .productList .productBtn {
    padding: 10px 0; }
    .productList .productBtn img {
      height: 20px;
      width: 20px; }

.productItem {
  align-items: center;
  display: flex;
  flex-direction: column; }
  @media (min-width: 1281px) {
    .productItem:hover a:after {
      content: "";
      position: absolute;
      background-color: #ebf9ff;
      border-top-right-radius: 160px; } }
  .productItem > a {
    align-items: center;
    display: flex;
    flex-direction: column;
    padding-bottom: 25px;
    position: relative;
    width: 100%; }
    .productItem > a:after {
      content: "";
      position: absolute;
      bottom: 0;
      height: 70%;
      left: 0;
      right: 0;
      transition: all 0.5s ease-in-out;
      background-color: #f5f5f5;
      border-top-left-radius: 15px;
      border-top-right-radius: 15px;
      transition: all 0.5s ease-in-out;
      z-index: -1; }

.productTitle h2 {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 1.44px; }

.productBtns {
  display: grid;
  grid-template-columns: repeat(2, 50%);
  width: 100%; }

.productBtn {
  align-items: center;
  display: flex;
  flex-direction: column;
  padding: 15px 0;
  transition: all 0.5s ease-in-out; }
  .productBtn.inquiry {
    background-color: #898989;
    border-bottom-left-radius: 15px; }
    @media (min-width: 1281px) {
      .productBtn.inquiry:hover {
        background-color: #5daeb1; } }
  .productBtn.order {
    background-color: #b0b0b0;
    border-bottom-right-radius: 15px; }
    @media (min-width: 1281px) {
      .productBtn.order:hover {
        background-color: #5daeb1; } }
  .productBtn span {
    font-size: 14px;
    color: #fff;
    letter-spacing: 2.24px; }
  .productBtn img {
    height: 30px;
    width: 30px;
    filter: brightness(0) invert(1);
    margin-bottom: 8px; }

.newsBox {
  padding: 70px 0;
  overflow: hidden; }
  .newsBox .swiper {
    overflow: visible; }
    .newsBox .swiper-container {
      overflow: visible;
      width: 100%; }
    .newsBox .swiper-scrollbar {
      position: relative;
      margin-top: 180px; }
      @media (max-width: 1440px) {
        .newsBox .swiper-scrollbar {
          margin-top: 100px; } }
      @media (max-width: 768px) {
        .newsBox .swiper-scrollbar {
          margin-top: 50px; } }
      .newsBox .swiper-scrollbar-drag {
        background-color: #000; }

@media (max-width: 768px) {
  .newsSwiper {
    margin-top: 50px; } }

.newsItem .date {
  color: #4d8eae;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 1.5px; }

.newsItem .title {
  color: #000;
  font-size: 21px;
  font-weight: 700;
  transition: all 0.5s ease-in-out;
  letter-spacing: 1.26px; }

@media (min-width: 1281px) {
  .newsItem:hover .newsImg img {
    scale: 1.1; }
  .newsItem:hover .title {
    text-decoration: underline; } }

.newsImg {
  overflow: hidden; }
  .newsImg img {
    height: 100%;
    max-width: 100%;
    object-fit: cover;
    width: 100%;
    transition: all 0.5s ease-in-out; }