﻿/* service 특장점 */
/* 전체 래퍼 */
.service-wrap {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 0px;
}

/* 제목 */
.service-title {
    text-align: center;
    font-size: 30px;
    font-weight: 700;
    margin-bottom: 40px;
}

/* 3×그리드 */
.service-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

/* 박스 스타일 */
.service-box {
    border: 1px solid #b3b3b3;
    border-radius: 8px;
    background: #ffffff;
    padding: 24px;
    min-height: 150px;
    box-sizing: border-box;
}

/* 박스 제목 */
.service-box h3 {
    font-size: 30px;
    font-weight: 800;
    margin-bottom: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* 박스 내용 */
.service-box p {
    margin-top: auto;
    font-size: 20px;
    line-height: 1.5;
    color: #474747;
}


/*주요품목*/
/* 전체 영역 */
.service-items-wrap {
    width: 100%;
    padding: 40px 0;
    text-align: center;
}

.service-items-title {
    text-align: center;
    font-size: 30px;
    font-weight: 700;
    margin-bottom: 20px;
    margin-top: 40px;
}

/* 5등분 영역 */
.service-items {
    width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 24px;
}

/* 카드 박스 */
.service-card {
    border: 1px solid #b3b3b3;
    background-color: #ffffff;
    border-radius: 8px;
    padding: 25px 10px;
    transition: 0.2s;
}


/* 이미지 */
.service-img {
    width: 60px;
    margin-bottom: 15px;
}

/* 제목 */
.service-card h3 {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 12px;
}

/* 내용 텍스트 */
.service-card p {
    font-size: 14px;
    color: #555;
    line-height: 1.5;
}


.service-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:24px;
}

/* 04,05를 감싼 줄 */
.service-inline{
  grid-column: 1 / -1;                 /* 두 번째 줄 전체 차지 */
  display: grid;                       /* 내부도 grid로 */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
    /* ✅ 상단 3칸 중 "2칸 + gap 1개" 만큼만 폭을 가지게 해서 가운데로 */
  width: calc(((100% - 48px) / 3) * 2 + 24px);
  margin: 0 auto;
}

.service-inline .service-box {
 width: auto;
}


/*카드단말기*/
/* 전체 1200px 컨테이너 */
.terminal-wrap {
  width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: center; /* 카드 2개를 가운데 정렬 */
  gap: 40px;               /* 카드 사이 간격 늘리기 */
  padding: 24px 0;
  box-sizing: border-box;
}

.terminal-card {
  flex: 0 0 480px;    /* 카드 폭을 480px로 고정 → 지금보다 확 좁아짐 */
  border: 1px solid #b3b3b3;
  border-radius: 8px;
  padding: 20px;
  background: #fff;
  box-sizing: border-box;
}

    /* 이미지 영역 */
    .terminal-image {
        width: 60%;
        aspect-ratio: 2 / 1;      /* 400x200 비율 */
        border-radius: 4px;
        overflow: hidden;
        display: flex;
        justify-content: center;   /* 가로 가운데 */
        align-items: center;        /* 세로 가운데 */
        background: #f7f7f7;        /* 자리 표시용 */
        margin: 30px auto;
    }



.terminal-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;        /* 이미지가 잘리지 않고 비율 유지 */
  display: block;
}
    /* 로고 */
    .terminal-logo-wrap {
      margin-top: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .terminal-logo {
      width: 220px;
      height: 34px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 700;
      border-radius: 3px;
      margin-bottom: 10px;
    }

    .terminal-model {
      color: #5873fe;
      font-weight: 700;
      font-size: 30px;
      text-decoration: none;
      margin-bottom: 10px;
    }

    /* 설명 */
    .terminal-desc {
      margin-top: 14px;
      margin-left: 30px;
      font-size: 13px;
      color: #333;
      line-height: 1.6;
    }

    .terminal-desc ul {
      margin: 0;
      padding-left: 18px;
    }

    .terminal-desc li {
        font-size: 20px;
        color: #555;
        line-height: 1.6;
    }

    /* 모바일 대응 */
    @media (max-width: 1200px) {
      .terminal-wrap {
        width: 100%;
        flex-direction: column;
        padding: 24px;
      }
      .terminal-card {
        width: 100%;
      }
    }


/* 아래 큰 이미지 박스 — 카드 2개와 동일한 폭 */
.terminal-bottom-wrap {
  width: 1000px;             /* 원하는 고정폭 */
  margin: 40px auto 0;
  padding: 10px;             /* 테두리와 이미지 사이 여백 */
  border: 1px solid #b3b3b3;
  border-radius: 8px;
  background: #f8f8f8;
  box-sizing: border-box;
}

/* 이미지 영역 */
.terminal-bottom-image {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 10px;
}

/* 이미지 비율 유지 + 사이즈 자동 */
.terminal-bottom-image img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* 설명 텍스트 */
.terminal-bottom-desc {
  text-align: center !important;;
  font-size: 20px;
  color: #555;
  line-height: 1.6;
  margin-top: 20px;
}


/* 아래 단독 이미지 박스 — 카드 2개와 동일 폭 */
.terminal-image-only-wrap {
  width: 1000px;           /* 카드 2개 폭과 동일 */
  margin: 40px auto 0;
  padding: 20px;
  border-radius: 8px;
  box-sizing: border-box;
  display: flex;
  justify-content: center; /* 내부 요소 가운데 */
}

/* 이미지 영역 */
.terminal-image-only {
  width: 720px;            /* 이미지 실제 가로 크기 */
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

/* 실제 이미지 */
.terminal-image-only img {
  width: 100%;
  height: auto;
  display: block;
}



.product-inner{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:30px;
}

.product-text{
  flex:1;
}

.product-btn{
  flex-shrink:0;
}

.btn-apply{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 220px;
  height: 48px;
  background-color: #5b6cff;
  color: #fff;
  font-size: 20px;
  font-weight: 600;
  text-decoration: none;
  border: none;
  cursor: pointer;
}

.btn-apply:hover{
   background-color: #4a5bf0;
}