@charset "UTF-8";
/* ==========================================================================
   Orange Pay - 상단/하단 메인 이미지 교체 대응
   교체된 이미지에 제목·설명·버튼이 이미 그려져 있어,
   겹쳐 보이는 HTML 텍스트를 숨깁니다.
   * 텍스트는 삭제하지 않고 display:none 처리만 했습니다.
     글자 없는 배경 이미지를 받으면 이 파일만 지우면 원래대로 돌아옵니다.
   * 이미지 비율만큼 영역 높이를 잡아 이미지가 잘리지 않게 합니다.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 메인페이지 - 모바일만 교체 (PC는 기존 유지)
      이미지 6-2.png (941x1672)
   -------------------------------------------------------------------------- */
@media screen and (max-width: 767px) {
  .topbg {
    min-height: 0;
    height: auto;
    aspect-ratio: 941 / 1672;
    background-position: center top;
    background-size: 100% auto;
  }

  /* 텍스트 숨김·버튼 유지는 파일 하단에서 처리 */
}

/* --------------------------------------------------------------------------
   2. 회사소개(s01_01) - PC 2-2.png (1672x941) / 모바일 2-1.png (941x1229)
   -------------------------------------------------------------------------- */
.ob-about .ab-hero {
  min-height: 0;
  height: auto;
  padding: 0;
  aspect-ratio: 1672 / 941;
  background-position: center top;
  background-size: 100% auto;
}

/* 히어로 내부 처리(텍스트 숨김·버튼 배치)는 파일 하단
   "회사소개(s01_01) 상단 히어로 버튼" 블록에서 담당합니다. */

@media screen and (max-width: 640px) {
  .ob-about .ab-hero {
    aspect-ratio: 941 / 1229;
  }

  .ab-hero:before {
    background: rgba(0, 0, 0, 0);
  }
}

/* --------------------------------------------------------------------------
   3. 단말기안내(s01_02) - PC 3-2-1.png (1726x911) / 모바일 3-2-2.png (903x1741)
   -------------------------------------------------------------------------- */
.ob-terminal .tm-hero {
  min-height: 0;
  height: auto;
  padding: 0;
  aspect-ratio: 1726 / 911;
  background-position: center top;
  background-size: 100% auto;
}

.ob-terminal .tm-hero .tm-inner {
  display: none;
}

@media screen and (max-width: 640px) {
  .ob-terminal .tm-hero {
    aspect-ratio: 903 / 1741;
  }

  .tm-hero:before {
    background: rgba(0, 0, 0, 0);
  }
}

/* --------------------------------------------------------------------------
   4. 1:1 문의하기(s01_03) - PC 4-2-1.png (1962x801) / 모바일 4-2-2.png (853x1844)
   -------------------------------------------------------------------------- */
.ob-cs .cs-hero {
  min-height: 0;
  height: auto;
  padding: 0;
  aspect-ratio: 1962 / 801;
  background-position: center top;
  background-size: 100% auto;
}

/* 히어로 내부 처리(텍스트 숨김·버튼/전화 클릭영역)는 파일 하단
   PC / 모바일 블록에서 각각 담당합니다. */

@media screen and (max-width: 640px) {
  .ob-cs .cs-hero {
    min-height: 0;
    padding: 0;
    aspect-ratio: 853 / 1844;
  }
}

/* --------------------------------------------------------------------------
   5. 정책자금(s01_04) - 모바일 5-2-2.png (853x1843)
      PC(topbg4.jpg)는 기존 이미지 유지, 잘림 방지만 적용
   -------------------------------------------------------------------------- */
@media screen and (max-width: 640px) {
  .ob-pf .pf-hero {
    position: relative;
    min-height: 0;
    padding: 0;
    aspect-ratio: 853 / 1843;
    background-image: url("/theme/web/img/topbg_5m.jpg");
    background-position: center top;
    background-size: 100% auto;
    /* 어둡게 깔리던 바탕색 제거 */
    background-color: transparent;
  }

  /* 암막 오버레이 제거 */
  .ob-pf .pf-hero:before,
  .ob-pf .pf-hero:after {
    display: none;
    content: none;
  }

  .ob-pf .pf-hero .pf-inner {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   6. 수정5) 정책자금 PC 상단 이미지 잘림 방지
      기존 cover 로 인해 좌우가 잘리던 것을 전체가 보이도록 변경
   -------------------------------------------------------------------------- */
@media screen and (min-width: 641px) {
  .ob-pf .pf-hero {
        background-size: 100%;
        background-position: center;
  }
}

/* --------------------------------------------------------------------------
   7. 수정2-3) 회사소개 하단 CTA - 모바일 이미지 적용 (2-3.jpg 에서 CTA 영역만 잘라냄)
   -------------------------------------------------------------------------- */
@media screen and (max-width: 640px) {
  .ab-cta {
    padding: 0;
    aspect-ratio: 1080 / 812;
    background-image: url("/theme/web/img/bottombg1_m.jpg");
    background-position: center top;
    background-size: 100% auto;
    position: relative;
  }

  /* 텍스트 숨김·버튼 유지는 파일 하단에서 처리 */
  .ab-cta:before {
    background: rgba(0, 0, 0, 0);
  }
}


/* ==========================================================================
   이미지 속 버튼은 클릭이 안 되므로, 실제 버튼만 이미지 아래에 남깁니다.
   (제목·설명은 이미지에 있으니 숨기고, a 태그 버튼만 살림)
   * 전화 상담 등 전환 동선이 끊기지 않게 하기 위한 처리입니다.
   ========================================================================== */

/* 메인페이지 모바일 - 이미지(6-2)에 제목·설명·버튼이 모두 들어 있음
   버튼은 이미지 속 위치에 투명하게 겹쳐 클릭만 되게 함 */
@media screen and (max-width: 767px) {
  .topbg .topbg-inner {
    display: block;
    position: absolute;
    inset: 0;
    padding: 0;
    min-height: 0;
    pointer-events: none;
  }

  /* topbg-actions 는 topbg-text 의 자식이므로 부모를 숨기면 안 됨.
     부모는 남기고 형제 요소만 숨긴다. */
  .topbg .topbg-text {
    display: block;
    position: static;
    margin: 0;
  }

  .topbg .topbg-eyebrow,
  .topbg .topbg-title,
  .topbg .topbg-copy,
  .topbg .topbg-features {
    display: none;
  }

  .topbg .topbg-inner .topbg-actions {
    position: absolute;
    left: 3.93%;
    top: 89.53%;
    width: 92.24%;
    height: 5.98%;
    display: flex;
    gap: 2.23%;
    margin: 0;
    padding: 0;
    pointer-events: none;
  }

  .topbg .topbg-inner .topbg-actions .topbg-btn {
    flex: 1 1 0;
    height: 100%;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: transparent;
    font-size: 0;
    opacity: 0;
    pointer-events: auto;
  }

  .topbg .topbg-inner .topbg-actions .topbg-btn i {
    display: none;
  }
}

/* 회사소개 하단 CTA 모바일 */
@media screen and (max-width: 640px) {
  .ab-cta .ab-inner {
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    opacity: 0;
  }

  .ab-cta .ab-cta-eyebrow,
  .ab-cta .ab-cta-text h3,
  .ab-cta .ab-cta-text p {
    display: none;
  }

  .ab-cta .ab-cta-actions {
    display: flex;
    gap: 8px;
    padding: 14px;
  }
}
/* --------------------------------------------------------------------------
   8. 단말기안내(s01_02) 하단 tm-cta - 이미지 전체 노출
      PC  bottombg3.jpg  (1920x1041) : 제목·설명 포함 (버튼 없음)
      모바일 bottombg_3m.jpg (400x643) : 제목·설명·버튼까지 모두 포함
      두 이미지 모두 글자가 있어 겹치는 HTML 텍스트를 숨깁니다.
   -------------------------------------------------------------------------- */

/* 공통 - 암막 제거 (이미지를 그대로 보여줌) */
.tm-cta {
  position: relative;
  padding: 0;
  background-position: center top;
  background-size: 100% auto;
}

.tm-cta:before {
  display: none;
  content: none;
}

/* 이미지에 있는 문구와 겹치므로 숨김 (삭제 아님) */
.tm-cta .tm-cta-eyebrow,
.tm-cta .tm-cta-text h3,
.tm-cta .tm-cta-text p {
  display: none;
}

/* PC - 이미지에 버튼이 없으므로 버튼은 좌하단에 노출 */
@media screen and (min-width: 641px) {
  .tm-cta {
    aspect-ratio: 1920 / 1041;
  }
  .tm-cta .tm-inner {
    position: absolute;
        left: 13%;
        bottom: 45px;
    width: 100%;
    max-width: none;
    margin: 0;
  }
  .tm-cta .tm-cta-text {
    max-width: none;
    width: 100%;
  }
  .tm-cta .tm-cta-actions {
    margin: 0;
  }
}

/* 모바일 - 이미지에 버튼까지 그려져 있어 전체 숨김.
   대신 이미지 위에 투명 링크를 덮어 버튼이 눌리게 함 */
@media screen and (max-width: 640px) {
  .tm-cta {
    aspect-ratio: 400 / 643;
  }
  .tm-cta .tm-inner {
    position: absolute;
    inset: 0;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
  }
  .tm-cta .tm-cta-text {
    position: absolute;
    inset: 0;
    max-width: none;
    width: 100%;
  }
  /* 이미지 속 버튼 위치(하단 약 82~93%)에 투명 링크 겹치기 */
  .tm-cta .tm-cta-actions {
    position: absolute;
    left: 5%;
    right: 5%;
    bottom: 6.5%;
    display: flex;
    gap: 4%;
    margin: 0;
    height: 8.5%;
  }
  .tm-cta .tm-cta-actions .tm-btn {
    flex: 1 1 0;
    min-height: 0;
    height: 100%;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: transparent;
    font-size: 0;
    box-shadow: none;
  }
  .tm-cta .tm-cta-actions .tm-btn i {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   9. 상단 히어로 암막 제거
      custom.css 는 1023px 이하에서 topbg / ab-hero / tm-hero / pf-hero 에
      검정 70% 암막(:before)을 씌웁니다. 글자 가독성을 위한 처리였는데,
      교체한 이미지에는 글자가 이미 들어 있어 암막이 사진만 어둡게 만듭니다.
      -> 이미지를 쓰는 히어로에서 암막과 어두운 바탕색을 걷어냅니다.
   -------------------------------------------------------------------------- */
@media screen and (max-width: 1023px) {
  .topbg:before,
  .ob-about .ab-hero:before,
  .ob-terminal .tm-hero:before,
  .ob-pf .pf-hero:before {
    display: none;
    content: none;
  }
  .topbg,
  .ob-about .ab-hero,
  .ob-terminal .tm-hero,
  .ob-pf .pf-hero {
    background-color: transparent;
  }
}

/* 하단 CTA 중 글자가 들어간 이미지를 쓰는 곳도 동일 처리
   (ab-cta: 회사소개 / tm-cta: 단말기안내) */
@media screen and (max-width: 1023px) {
  .ab-cta:before,
  .tm-cta:before {
    display: none;
    content: none;
  }
  .ab-cta,
  .tm-cta {
    background-color: transparent;
  }
}

/* --------------------------------------------------------------------------
   10. 메인페이지 하단 ob-flow-cta - 모바일 이미지 전체 노출
       bottombg_1m.jpg (941x926) 에 제목·설명·버튼이 모두 그려져 있음
       1) 암막 제거  2) 내부 텍스트 숨김
       3) 버튼은 opacity:0 으로 투명하게 만들어 이미지 속 버튼 위에 겹침
          (보이지 않지만 실제 클릭·터치는 그대로 동작)
   -------------------------------------------------------------------------- */
@media screen and (max-width: 640px) {
  .ob-flow-cta {
    padding: 0;
    aspect-ratio: 941 / 926;
    background-color: transparent;
    background-position: center top;
    background-size: 100% auto;
  }

  /* 암막 제거 */
  .ob-flow-cta:before,
  .ob-flow-cta:after {
    display: none;
    content: none;
  }

  /* 이미지에 이미 있는 제목·설명 숨김 (삭제 아님) */
  .ob-flow-cta .ob-flow-cta-text h3,
  .ob-flow-cta .ob-flow-cta-text p {
    display: none;
  }

  /* 덮개가 이미지 전체를 가려 다른 클릭을 막지 않도록 통과시킴 */
  .ob-flow-cta .ob-flow-cta-text {
    position: absolute;
    inset: 0;
    max-width: none;
    margin: 0;
    pointer-events: none;
  }

  /* 이미지 속 버튼 위치에 투명 버튼 겹치기 (세로 2단, 좌측 정렬) */
  .ob-flow-cta .ob-flow-cta-actions {
    position: absolute;
    left: 5.5%;
    top: 70%;
    width: 32%;
    height: 20%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 0;
    margin: 0;
    padding: 0;
  }

  .ob-flow-cta .ob-flow-cta-actions .ob-flow-btn {
    width: 100%;
    height: 38%;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 999px;
    opacity: 0;
    /* 투명해도 클릭은 되도록 되살림 */
    pointer-events: auto;
  }
}

/* --------------------------------------------------------------------------
   11. 수정5-3) 정책자금 01 섹션 - 전달받은 선명한 이미지로 교체
       (a) 서비스 카드 4개 : 5-3 에서 카드별로 잘라낸 이미지로 교체
                            카드 안 제목·설명이 이미지에 있으므로 HTML 텍스트는 숨김
       (b) 하단 자금 아이콘 6개 : 밝은색 아이콘으로 교체, 아래 텍스트는 유지
       * 마크업은 그대로 두고 CSS 로만 처리했습니다.
   -------------------------------------------------------------------------- */

/* (a) 서비스 카드 4개 */
.pf-service-card.is-box9 {
  background-image: url("/theme/web/img/pf_card_new9.png");
}

.pf-service-card.is-box10 {
  background-image: url("/theme/web/img/pf_card_new10.png");
}

.pf-service-card.is-box11 {
  background-image: url("/theme/web/img/pf_card_new11.png");
}

.pf-service-card.is-box12 {
  background-image: url("/theme/web/img/pf_card_new12.png");
}

.pf-service-card {
  aspect-ratio: 312 / 405;
  padding: 0;
  background-size: contain;
  background-position: center top;
}

/* 카드 이미지에 글자가 포함되어 있으므로 HTML 텍스트는 숨김 (삭제 아님) */
.pf-service-card strong,
.pf-service-card p {
  display: none;
}

/* (b) 하단 자금 아이콘 6개 - 밝은색으로 교체, 라벨 텍스트는 그대로 유지 */
.pf-funds-list li:nth-child(1) .pf-funds-icon img {
  content: url("/theme/web/img/pf_icon_new1.png");
}

.pf-funds-list li:nth-child(2) .pf-funds-icon img {
  content: url("/theme/web/img/pf_icon_new2.png");
}

.pf-funds-list li:nth-child(3) .pf-funds-icon img {
  content: url("/theme/web/img/pf_icon_new3.png");
}

.pf-funds-list li:nth-child(4) .pf-funds-icon img {
  content: url("/theme/web/img/pf_icon_new4.png");
}

.pf-funds-list li:nth-child(5) .pf-funds-icon img {
  content: url("/theme/web/img/pf_icon_new5.png");
}

.pf-funds-list li:nth-child(6) .pf-funds-icon img {
  content: url("/theme/web/img/pf_icon_new6.png");
}

/* ==========================================================================
   12. 히어로/CTA 이미지 속 버튼 - 투명 클릭 영역 배치
       이미지에 그려진 버튼은 그림이라 눌리지 않습니다.
       숨겨둔 실제 a 태그를 이미지 속 버튼 위치에 겹쳐
       보이지 않지만 클릭·터치는 되도록 만듭니다.
       * 좌표는 각 이미지에서 버튼 위치를 재어 % 로 환산한 값입니다.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1:1 문의하기(s01_03) 상단 - PC 이미지: 자주 묻는 질문 버튼
   -------------------------------------------------------------------------- */
@media screen and (min-width: 641px) {
  .ob-cs .cs-hero {
    position: relative;
  }
  .ob-cs .cs-hero .cs-inner {
    display: block;
    position: absolute;
    inset: 0;
    max-width: none;
    margin: 0;
    padding: 0;
    pointer-events: none;
  }
  .ob-cs .cs-hero .cs-hero-main,
  .ob-cs .cs-hero .cs-hero-text {
    position: static;
    display: block;
  }
  .ob-cs .cs-hero .cs-eyebrow,
  .ob-cs .cs-hero .cs-hero-title,
  .ob-cs .cs-hero .cs-hero-copy,
  .ob-cs .cs-hero .cs-hero-visual,
  .ob-cs .cs-hero .cs-contact {
    display: none;
  }
  .ob-cs .cs-hero .cs-hero-actions {
    position: absolute;
    left: 14.12%;
    top: 59.68%;
    width: 9.84%;
    height: 5.49%;
    margin: 0;
    padding: 0;
    pointer-events: none;
  }
  .ob-cs .cs-hero .cs-hero-actions .cs-btn {
    width: 100%;
    height: 100%;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: transparent;
    font-size: 0;
    opacity: 0;
    pointer-events: auto;
  }
  .ob-cs .cs-hero .cs-hero-actions .cs-btn i {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   정책자금(s01_04) 상단 - 모바일 이미지: 버튼 2개 (가로 배치)
   -------------------------------------------------------------------------- */
@media screen and (max-width: 640px) {
  .ob-pf .pf-hero .pf-inner {
    display: block;
    position: absolute;
    inset: 0;
    max-width: none;
    margin: 0;
    padding: 0;
    pointer-events: none;
  }
  .ob-pf .pf-hero .pf-hero-text {
    position: static;
    display: block;
  }
  .ob-pf .pf-hero .pf-eyebrow,
  .ob-pf .pf-hero .pf-hero-title,
  .ob-pf .pf-hero .pf-hero-copy,
  .ob-pf .pf-hero .pf-hero-visual {
    display: none;
  }
  .ob-pf .pf-hero .pf-hero-actions {
    position: absolute;
    left: 5.28%;
    top: 70.1%;
    width: 89.45%;
    height: 4.56%;
    display: flex;
    gap: 3.05%;
    margin: 0;
    padding: 0;
    pointer-events: none;
  }
  .ob-pf .pf-hero .pf-hero-actions .pf-btn {
    flex: 1 1 0;
    height: 100%;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: transparent;
    font-size: 0;
    opacity: 0;
    pointer-events: auto;
  }
  .ob-pf .pf-hero .pf-hero-actions .pf-btn i {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   1:1 문의하기(s01_03) 상단 - 모바일 이미지(topbg_4m.jpg 853x1844)
   자주 묻는 질문 버튼을 이미지 속 위치에 투명하게 겹칩니다.
   -------------------------------------------------------------------------- */
@media screen and (max-width: 640px) {
  .ob-cs .cs-hero {
    position: relative;
  }
  .ob-cs .cs-hero .cs-inner {
    display: block;
    position: absolute;
    inset: 0;
    max-width: none;
    margin: 0;
    padding: 0;
    pointer-events: none;
  }
  .ob-cs .cs-hero .cs-hero-main,
  .ob-cs .cs-hero .cs-hero-text {
    display: block;
    position: static;
  }
  .ob-cs .cs-hero .cs-eyebrow,
  .ob-cs .cs-hero .cs-hero-title,
  .ob-cs .cs-hero .cs-hero-copy,
  .ob-cs .cs-hero .cs-hero-visual,
  .ob-cs .cs-hero .cs-contact {
    display: none;
  }
  .ob-cs .cs-hero .cs-hero-actions {
    position: absolute;
    left: 5.28%;
    top: 43.49%;
    width: 34.58%;
    height: 4.45%;
    margin: 0;
    padding: 0;
    pointer-events: none;
  }
  .ob-cs .cs-hero .cs-hero-actions .cs-btn {
    width: 100%;
    height: 100%;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: transparent;
    font-size: 0;
    opacity: 0;
    pointer-events: auto;
  }
  .ob-cs .cs-hero .cs-hero-actions .cs-btn i {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   회사소개(s01_01) 상단 히어로 버튼
   PC   subbg1.jpg (1672x941) : 버튼 2개가 이미지에 그려져 있음
                                -> 그 위치에 투명하게 겹쳐 클릭만 되게 함
   모바일 topbg_2m.jpg (941x1229) : 이미지에 버튼이 없음
                                -> 실제 버튼을 이미지 아래에 보이게 노출
   * 버튼 마크업은 mobile/s01_01.php 히어로에 새로 추가했습니다.
   -------------------------------------------------------------------------- */

/* PC - 이미지 속 버튼 위치에 투명 겹치기 */
@media screen and (min-width: 641px) {
  .ob-about .ab-hero {
    position: relative;
  }
  .ob-about .ab-hero .ab-inner {
    display: block;
    position: absolute;
    inset: 0;
    max-width: none;
    margin: 0;
    padding: 0;
    pointer-events: none;
  }
  .ob-about .ab-hero .ab-hero-text {
    display: block;
    position: static;
  }
  .ob-about .ab-hero .ab-eyebrow,
  .ob-about .ab-hero .ab-hero-title,
  .ob-about .ab-hero .ab-hero-lead,
  .ob-about .ab-hero .ab-hero-copy,
  .ob-about .ab-hero .ab-hero-keys,
  .ob-about .ab-hero .ab-hero-visual {
    display: none;
  }
  .ob-about .ab-hero .ab-hero-actions {
    position: absolute;
    left: 6.76%;
    top: 78.32%;
    width: 26.2%;
    height: 6.16%;
    display: flex;
    gap: 0.9%;
    margin: 0;
    padding: 0;
    pointer-events: none;
  }
  .ob-about .ab-hero .ab-hero-actions .ab-btn {
    flex: 1 1 0;
    height: 100%;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: transparent;
    font-size: 0;
    box-shadow: none;
    opacity: 0;
    pointer-events: auto;
  }
  .ob-about .ab-hero .ab-hero-actions .ab-btn i {
    display: none;
  }
}

/* 모바일 - 이미지에 버튼이 없으므로 실제 버튼을 이미지 아래에 노출 */
@media screen and (max-width: 640px) {
  .ob-about .ab-hero {
    position: relative;
  }
  .ob-about .ab-hero .ab-inner {
    display: flex;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    align-items: flex-end;
    max-width: none;
    margin: 0;
    padding: 0 0 5%;
    pointer-events: none;
  }
  .ob-about .ab-hero .ab-hero-text {
    display: block;
    width: 100%;
  }
  .ob-about .ab-hero .ab-eyebrow,
  .ob-about .ab-hero .ab-hero-title,
  .ob-about .ab-hero .ab-hero-lead,
  .ob-about .ab-hero .ab-hero-copy,
  .ob-about .ab-hero .ab-hero-keys,
  .ob-about .ab-hero .ab-hero-visual {
    display: none;
  }
  .ob-about .ab-hero .ab-hero-actions {
    display: flex;
    gap: 8px;
    margin: 0;
    padding: 0 5%;
    pointer-events: none;
  }
  .ob-about .ab-hero .ab-hero-actions .ab-btn {
    flex: 1 1 0;
    min-height: 46px;
    padding: 0 12px;
    font-size: 14px;
    pointer-events: auto;
  }
}

/* --------------------------------------------------------------------------
   회사소개(s01_01) 05 VISION - ab-vision
   bottombg2.jpg = 3-1-2 로 교체 (1357x737, 좌측에 제목·설명 포함)
   PC / 모바일 모두 같은 이미지를 쓰고, 이미지가 잘리지 않게 전체 노출합니다.
   이미지에 글자가 들어 있으므로 겹치는 HTML 텍스트는 숨깁니다. (삭제 아님)
   -------------------------------------------------------------------------- */
.ab-vision {
  padding: 0;
  aspect-ratio: 1357 / 737;
  background-color: transparent;
  background-position: center top;
  background-size: 100% auto;
}

/* 암막 제거 */
.ab-vision:before,
.ab-vision:after {
  display: none;
  content: none;
}

/* 이미지에 있는 문구와 겹치므로 숨김 (삭제 아님) */
.ab-vision .ab-inner {
  display: none;
}

/* 모바일도 PC와 같은 이미지 사용
   (custom.css 가 640px 이하에서 bottombg_2m.jpg 로 바꾸는 것을 되돌림) */
@media screen and (max-width: 640px) {
  .ab-vision {
    background-image: url("/theme/web/img/bottombg_2m.jpg");
    aspect-ratio: 400 / 258;
  }
}

/* ==========================================================================
   13. 상단 이미지에 그려진 전화번호 - 투명 클릭영역
       이미지 속 전화번호는 그림이라 눌러도 반응이 없습니다.
       그 위치에 투명한 tel: 링크를 겹쳐 탭하면 전화가 걸리게 합니다.
       * 링크 마크업은 각 php 히어로에 새로 추가했습니다.
   ========================================================================== */

/* 좌표 기준을 히어로 섹션으로 고정 (중간 래퍼가 기준이 되지 않도록) */
.ob-cs .cs-hero .cs-hero-main,
.ob-cs .cs-hero .cs-hero-text,
.ob-pf .pf-hero .pf-hero-text {
  position: static;
}

.cs-imgtel,
.pf-imgtel {
  position: absolute;
  display: block;
  z-index: 2;
  border-radius: 8px;
  background: transparent;
  font-size: 0;
  line-height: 0;
  color: transparent;
  opacity: 0;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
}

/* --------------------------------------------------------------------------
   1:1 문의하기(s01_03)
   PC   topbg3.jpg   (1962x801)  : 하단 고객센터 띠의 전화번호
   모바일 topbg_4m.jpg (853x1844) : 하단 고객센터 박스의 전화번호
   -------------------------------------------------------------------------- */
@media screen and (min-width: 641px) {
  .ob-cs .cs-hero .cs-imgtel {
    left: 23.19%;
    top: 77.4%;
    width: 13.1%;
    height: 5.99%;
  }
}

@media screen and (max-width: 640px) {
  .ob-cs .cs-hero .cs-imgtel {
    left: 29.31%;
    top: 74.5%;
    width: 34%;
    height: 3.4%;
  }
}

/* --------------------------------------------------------------------------
   정책자금(s01_04) - 모바일 topbg_5m.jpg (853x1843)
   정책자금 상담 / 마케팅 상담 전화번호 2곳
   * PC(topbg4.jpg)에는 전화번호가 없어 모바일에만 적용합니다.
   -------------------------------------------------------------------------- */
@media screen and (max-width: 640px) {
  .ob-pf .pf-hero .pf-imgtel {
    left: 30%;
    width: 42%;
    height: 3%;
  }
  .ob-pf .pf-hero .pf-imgtel1 {
    top: 80.2%;
  }
  .ob-pf .pf-hero .pf-imgtel2 {
    top: 90.9%;
  }
}

@media screen and (min-width: 641px) {
  .ob-pf .pf-hero .pf-imgtel {
    display: none;
  }
}