@charset "utf-8";

/* 컨테이너 및 비주얼 섹션 */
#container {
}

/* .visual {
  width: 100%;
  height: 100vh;
  background: no-repeat center / cover url(../images/main/visual_bg.png);
} */
.visual {
  position: relative;
  width: 100%;
  height: 100vh;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background-color: var(--black); /* 영상 로드 전 배경색 */
  display: flex;
  justify-content: center;
  align-items: center;
  @media (max-width: 767px) {
    height: 68rem;
  }

  .video-wrap {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    video {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .video-mo {
      display: none;
    } /* 기본 PC형 */

    @media (max-width: 767px) {
      .video-pc {
        display: none;
      }
      .video-mo {
        display: block;
      }
    }
  }
  /* 텍스트 중앙 배치 */
  .visual-text {
    display: none;
    @media (max-width: 767px) {
      display: block;
    }
    position: relative;
    z-index: 10;
    text-align: center;
    width: 100%;
    padding-inline: 20px;

    h2 {
      font-size: 8rem;
      font-weight: 700;
      color: var(--white);
      letter-spacing: 0.2em;
      margin-bottom: 2rem;

      @media (max-width: 680px) {
        font-size: 4.5rem;
        letter-spacing: -0.02em;
      }
    }

    p {
      font-size: 3rem;
      font-weight: 300;
      color: var(--white);
      word-break: keep-all;

      @media (max-width: 680px) {
        font-size: 2.2rem;
      }
    }
  }
  /* 영상 위 어두운 막 (텍스트 가독성) */
  .overlay {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3); /* 30% 어둡게 */
    z-index: 5;
  }
}
/* 비즈니스 섹션 메인 컨테이너 */
.businessWrap,
.newsWrap,
.linesolutionWrap {
  padding-block: 14rem 13rem;
  @media screen and (max-width: 1023px) {
    padding-block: 12rem 11rem;
  }

  /* 헤더 영역 */
  .h2Wrap {
    display: flex;
    align-items: flex-start;
    @media screen and (max-width: 1023px) {
      flex-direction: column;
    }

    h2 {
      margin-right: 19rem;
      font-size: 2.4rem;
      font-weight: 400;
      color: var(--black);
      @media screen and (max-width: 1023px) {
        margin-bottom: 2.4rem;
        margin-right: 0;
        font-size: 2rem;
      }
    }

    p {
      font-size: 5.2rem;
      font-weight: 700;
      color: var(--black);
      @media screen and (max-width: 1023px) {
        font-size: 3.6rem;
        line-height: 1.4;
      }
    }
  }
}
/* 비즈니스 그리드 리스트 */
.business {
  width: 100%;
  margin-top: 8rem;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  position: relative;
  z-index: 1;

  @media screen and (max-width: 1023px) {
    grid-template-columns: 1fr;
  }

  /* 카드 래퍼 */
  .card_wrap {
    width: 100%;
  }

  /* 3D 플립 카드 본체 */
  .card {
    width: 100%;
    aspect-ratio: 143 / 120;
    border-radius: 1.6rem;
    position: relative;
    perspective: 1000px;
    cursor: pointer;
    @media screen and (max-width: 1023px) {
      aspect-ratio: unset;
      width: 100%;
      height: 440px;
    }

    img {
      max-width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 1.6rem;
      @media screen and (max-width: 1023px) {
        width: 100%;
        height: 440px;
      }
    }

    /* 앞/뒷면 공통 레이어 */
    & > div {
      width: 100%;
      height: 100%;
      border-radius: 1.6rem;
      position: absolute;
      top: 0;
      left: 0;
      transition: 0.6s cubic-bezier(0.4, 0, 0.2, 1);
      backface-visibility: hidden;
    }

    /* 카드 앞면 */
    .front {
      z-index: 2;
      transform: rotateY(0deg);

      p {
        font-size: 4.8rem;
        font-weight: 700;
        color: var(--white);
        position: absolute;
        left: 80px;
        top: 95px;
        @media screen and (max-width: 1023px) {
          left: 60px;
          top: 65px;
        }
        @media screen and (max-width: 600px) {
          left: 40px;
          top: 65px;
        }
      }
    }

    /* 카드 뒷면 */
    .back {
      background: var(--primary) url("../images/main/business_bg.png") no-repeat
        right -110px bottom -290px / 80.2rem;
      height: 100%;
      padding-top: 80px;
      padding-left: 95px;
      color: var(--white);
      transform: rotateY(-180deg);
      &.color02 {
        background: #00bb84 url("../images/main/business_bg.png") no-repeat
          right -110px bottom -290px / 80.2rem;
      }
      &.color03 {
        background: #5c6ebe url("../images/main/business_bg.png") no-repeat
          right -110px bottom -290px / 80.2rem;
      }
      &.color04 {
        background: #4c5061 url("../images/main/business_bg.png") no-repeat
          right -110px bottom -290px / 80.2rem;
      }
      @media screen and (max-width: 1023px) {
        padding-top: 65px;
        padding-left: 60px;
      }
      @media screen and (max-width: 600px) {
        padding-top: 65px;
        padding-left: 40px;
        padding-right: 40px;
      }

      p {
        font-size: 4.8rem;
        font-weight: 700;
        color: var(--white);
      }

      em {
        font-size: 2rem;
        font-weight: 300;
        color: var(--white);
        line-height: 1.4;
        margin-top: 4.5rem;
        display: block;
      }
    }
    /* 카드 호버 시 3D 회전 트리거 */
    &:hover {
      .front {
        transform: rotateY(180deg);
      }
      .back {
        transform: rotateY(0);
      }
    }
    .btn_more {
      margin-top: 7rem;
    }
  }
}
/* 더보기 버튼 애니메이션 */
.btn_more {
  display: block;
  width: 14rem;
  border-radius: 19rem;
  border: 1px solid var(--white);
  position: relative;
  overflow: hidden;
  transition: background 0.3s;

  span {
    display: block;
    font-size: 1.6rem;
    color: var(--white);
    line-height: 3.7rem;
    padding-left: 1.5rem;
    transition: transform 0.3s;
  }

  &::after {
    content: "";
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: #dbdbdb url(../images/main/arrow_right.svg) center / 1.5rem
      no-repeat;
    position: absolute;
    right: 2px;
    top: 50%;
    transform: translateY(-50%);
  }

  &:hover {
    background: rgba(255, 255, 255, 0.1);

    &::after {
      animation: arrowSlide 0.5s ease-in-out forwards;
    }

    span {
      transform: translateX(5px);
    }
  }
}

/* 화살표 애니메이션 정의 */
@keyframes arrowSlide {
  0% {
    transform: translateY(-50%) translateX(0);
    opacity: 1;
  }
  40% {
    transform: translateY(-50%) translateX(40px);
    opacity: 0;
  }
  45% {
    transform: translateY(-50%) translateX(-110px);
    opacity: 0;
  }
  100% {
    transform: translateY(-50%) translateX(0);
    opacity: 1;
  }
}

/* news */

.newsWrap {
  padding-bottom: 0;
  background: url(../images/main/news_bg.png) center / cover no-repeat;
  .h2Wrap {
    h2,
    p {
      color: var(--white);
    }
  }
  .linkWrap {
    margin-top: 60px;
    padding-bottom: 140px;
    background-color: rgba(0, 32, 51, 0.8);
    .linkItem {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 7.5rem 4rem 4.5rem;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
      /* &:last-child {
        border-bottom: none;
      } */
      @media screen and (max-width: 767px) {
        flex-direction: column;
        gap: 4rem;
      }
      .text {
        h3 {
          /* font-size: 3.6rem; */
          font-size: 4.4rem;
          font-weight: 400;
          color: var(--white);
          margin-bottom: 1.6rem;
        }
        p {
          /* font-size: 1.8rem; */
          font-size: 2rem;
          font-weight: 300;
          color: var(--white);
        }
      }
    }
  }
  .btn_more {
    width: 19rem;
    height: 5.5rem;
    background-color: rgba(51, 66, 79, 0.9);
    border: transparent;
    span {
      line-height: 5.5rem;
      padding-left: 3.5rem;
    }
    &:after {
      width: 4.6rem;
      height: 4.6rem;
      right: 4px;
      background: #485561 url(../images/main/arrow_right_white.svg) center /
        2.3rem no-repeat;
    }
  }
}

/* linesolution */

.linesolutionWrap {
  background: var(--white);
  /* background: linear-gradient(
    325deg,
    rgba(70, 70, 70, 1) 55%,
    rgba(82, 69, 104, 1) 100%
  ); */
  .h2Wrap {
    h2,
    p {
      color: var(--black);
    }
  }
}

/* --- SVG 마스크 데이터 정의 (Data URI) --- */
/* svg-mask-normal: 일반적인 둥근 사각형
  svg-mask-hover: 우측 상단이 안으로 파인 형태 (제공된 이미지 기반)
  브라우저 호환성을 위해 URL 인코딩된 SVG 데이터를 사용합니다.
*/
:root {
  --svg-mask-normal: url("../images/main/svg_front.svg");
  --svg-mask-hover: url("../images/main/svg_back.svg");
}

.linesolutionItem {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  margin-top: 8rem;

  /* 1023px 이하 반응형 세로 배열 */
  @media (max-width: 1023px) {
    grid-template-columns: 1fr;
    padding: 20px;
    width: 100%;
  }

  .card {
    position: relative;
    width: 100%;
    height: auto;
    max-height: 600px;
    aspect-ratio: 3/4;
    padding-inline: 60px;
    padding-block: 100px;
    cursor: pointer;
    background-color: transparent;
    -webkit-mask-image: none;
    mask-image: none;
    /* 부드러운 전환을 위한 트랜지션 설정 (마스크 이미지 포함) */
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    /* [추가] 배경과 마스크 역할을 담당할 가상 요소 */
    &::before {
      content: "";
      position: absolute;
      inset: 0; /* 카드의 전체 영역을 채움 */
      background-color: #4a4a58;
      -webkit-mask-image: var(--svg-mask-normal);
      mask-image: var(--svg-mask-normal);
      -webkit-mask-size: 100% 100%;
      mask-size: 100% 100%;
      -webkit-mask-repeat: no-repeat;
      mask-repeat: no-repeat;
      transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
      z-index: 0;
    }

    &:hover {
      /* [수정] 호버 시 가상 요소의 배경과 마스크 변경 */
      &::before {
        background-color: #8b00ff;
        -webkit-mask-image: var(--svg-mask-hover);
        mask-image: var(--svg-mask-hover);
      }

      .btn-more {
        opacity: 1;
        transform: translate(0, 0) rotate(0deg);
      }
    }

    .btn-more {
      position: absolute;
      top: 0.8rem;
      right: 0.8rem;
      width: 5.9rem;
      height: 5.9rem;
      /* 디자인에 따라 버튼 배경색을 흰색(#fff)으로 변경하면 더 잘 보입니다. */
      background-color: #8b00ff;
      border: none;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--white);
      opacity: 0;
      transform: translate(15px, -15px) rotate(-45deg);
      transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
      z-index: 2; /* 배경보다 위에 오도록 설정 */

      svg {
        width: 24px;
        height: 24px;
      }
    }

    .card-content {
      position: relative;
      z-index: 1;
      .title {
        /* font-size: 3.6rem; */
        font-size: 4.8rem;
        font-weight: 400;
        color: #fff;
        margin-bottom: 8px;
        letter-spacing: -0.5px;
      }
      .sub-title {
        font-size: 2rem;
        /* font-size: 1.8rem; */
        /* opacity: 0.8; */
        font-weight: 300;
        color: #fff;
      }
    }

    .icon-box {
      position: absolute;
      bottom: 6rem;
      left: 50%;
      transform: translateX(-50%);
      width: 16.7rem;
      height: 16.7rem;
      border-radius: 50%;
      /* 아이콘 배치를 위한 임시 스타일 */
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #fff;
      @media (max-width: 479px) {
        width: 14.7rem;
        height: 14.7rem;
      }
      .icon {
        &.megaphone {
          width: 86px;
          height: 86px;
          background: no-repeat center / 100%
            url(../images/main/linesolution_icon01.svg);
        }
        &.document {
          width: 86px;
          height: 86px;
          background: no-repeat center / 100%
            url(../images/main/linesolution_icon02.svg);
        }
        &.location {
          width: 67px;
          height: 97px;
          background: no-repeat center / 100%
            url(../images/main/linesolution_icon01.svg);
        }
      }
    }

    /* 반응형 카드 크기 조정 */
    @media (max-width: 1023px) {
      width: 100%;
      max-height: unset;
      /* height: auto; */
      aspect-ratio: 3 / 4; /* 비율 유지 */
    }
    @media (max-width: 479px) {
      padding: 40px;
    }
  }
}