:root {
--app-primary-color: #2f3293;
--app-color-navy: #012d6e;
--app-color-red:#d82026;
}

body{ 
 font-family: "Open Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
font-size:16px;
}

.outer-container { max-width:2600px; margin:0 auto; }

.is-container-wide, .is-box.is-container.is-container-wide { max-width:2000px !important; margin:0 auto;  width:100%; }
.app-container { max-width:2000px;margin:0 auto;  width:100%; }
.app-banner-container { background-size:cover; background-position:center; }
.app-banner-content { padding:60px 20px;  }
.contentbuilder-css .app-banner-title { color:#fff; font-size:56px; font-weight:700; margin:0; }
.contentbuilder-css .app-banner-subtitle { font-size:32px; color:#fff; font-weight:700; margin:10px 0 0;  }
.contentbuilder-css .app-banner-text{ font-size:22px; color:#fff; font-weight:500; margin: 0; max-width:780px;  }
.contentbuilder-css .app-banner-btn-container { margin-top:20px; display:flex; gap:20px; flex-wrap:wrap;  }
.contentbuilder-css .app-banner-icons { margin-top:20px; display:flex; gap:20px; flex-wrap:wrap;  }
.contentbuilder-css .app-banner-title .highlight-line {position: relative;}
.contentbuilder-css .app-banner-title .highlight-line::after {
  content: "";
  position: absolute;
width:40%;
  left: 0;
  bottom: -6px; /* Adjust distance below text */
  height: 4px;  /* Thickness of the bar */
  background-color: #ff0000;
}
.trustedorganizations-container { gap:26px; align-items:center;     justify-content: space-around !important; }
.trustedorganizations-container div:first-child { max-width:360px; }
.app-primary-color {color:var(--app-primary-color); }

.is-container-sm { margin-top:30px !important; margin-bottom:30px !important; }

.app-section-title-container { display:flex; gap:20px; align-items:center; font-size:22px;  padding-bottom:20px;  }
.app-section-title-container .app-section-title { margin:0 !important; font-size:46px; font-weight:700; }
.app-section-title-container .app-section-title.tw-text-white { color:#fff !important;}

@media (max-width:991px) {
.app-banner-content { padding:40px 20px;   max-width:70%; }
.contentbuilder-css .app-banner-title { color:#fff; font-size:46px; }
.contentbuilder-css .app-banner-subtitle { font-size:28px; color:#fff; font-weight:700; margin:10px 0 0;  }
.contentbuilder-css .app-banner-text{ font-size:20px; color:#fff; font-weight:500; margin: 0; max-width:700px;  }
.trustedorganizations-container { gap:16px; flex-wrap:wrap; }
.trustedorganizations-container div:first-child { max-width:260px; }
.trustedorganizations-container  img {height:100px;}

.app-section-title-container { display:flex; gap:0px; align-items:flex-start; font-size:18px;  flex-direction:column; }
.app-section-title-container .app-section-title { font-size:38px;  }

.is-container-sm { margin-top:20px !important; margin-bottom:20px !important; margin-top:20px !important; margin-bottom:20px !important;  padding-left: 0px;}
}

@media (max-width:767px) {
.app-banner-content { padding:40px 20px;   max-width:85%; }
.contentbuilder-css .app-banner-title { color:#fff; font-size:30px; }
.contentbuilder-css .app-banner-subtitle { font-size:22px;  }
.contentbuilder-css .app-banner-text{ font-size:18px;   }
.contentbuilder-css .app-banner-title .highlight-line::after { width:30%;}
.contentbuilder-css .app-banner-btn-container { margin-top:16px; display:flex; gap:10px; flex-wrap:wrap;  }
.contentbuilder-css .app-banner-icons { margin-top:16px; display:flex; gap:10px; flex-wrap:wrap;  }

.trustedorganizations-container { gap:0px; flex-wrap:wrap; }
.trustedorganizations-container div:first-child { max-width:480px; padding-bottom;10px; text-align;center; }
.trustedorganizations-container  img {height:80px;}

.app-section-title-container { display:flex; gap:0px; flex-direction:column; align-items:flex-start; font-size:18px;  }
.app-section-title-container .app-section-title { font-size:26px;   padding-bottom:0px;    }

.is-container-sm { margin-top:10px !important; margin-bottom:10px !important; margin-left:10px !important; margin-right:10px !important; padding-left: 0px; }
}

/* 1. 부모 컨테이너 (Flexbox 설정) */
.app-service-flex {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: flex-start;
  width: 100%;
  box-sizing: border-box;
}

/* 2. 개별 서비스 카드 아이템 (기본: PC 화면 6개 배분) */
.app-service-item {
  width: calc((100% - (16px * 5)) / 6); 
  background-color: #ffffff;
  border: 1px solid #cce0ff;
  border-radius: 8px;
  overflow: visible; /* 중요: 아이콘이 삐져나올 수 있도록 설정 */
  position: relative; /* 아이콘 배치의 기준점 */
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  box-sizing: border-box;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
overflow:hidden;
}

/* 3. 상단 이미지 영역 */
.app-service-image {
position:relative;
  width: 100%;
  height: auto;
  border-radius: 7px 7px 0 0;
  /* 핵심: margin-bottom을 주지 않고 이미지 자체의 흐름을 유지합니다 */
}

.app-service-image img {
  width: 100%;
  height: auto;
  display: block;
}

/* 4. 중앙 원형 아이콘 영역 (완벽한 중앙 배치 정렬) */
.app-service-icon {
  position: absolute;
  /* top을 이미지와 텍스트의 실제 경계선(정중앙)이 아닌, 
     HTML 구조상 '상단 이미지의 실제 높이만큼' 자동으로 내려오도록 지정합니다. */

  left: 50%;
  /* 
     1) transform의 첫 번째 -50%는 좌우 중앙 정렬
     2) 두 번째 -50%는 자신의 높이 절반만큼 위로 올려 경계선에 딱 걸치게 만듭니다.
     3) 이미지의 하단 끝자락에 위치하게 하기 위해 부모 기준(top)에서 이미지 높이만큼 밀어내 겹치게 합니다.
  */
  transform: translate(-50%, calc(-50% + var(--img-height, 0px))); 
  
  /* 아이콘 크기 키움 (기존 50px -> 64px로 확대하여 시인성 확보) */
  width: 64px;
  height: 64px;
  background-color: #f1f6f9; /* 파란색 배경 */
  border: 4px solid #f1f6f9; /* 흰색 테두리 두껍게 */
  border-radius: 50%; /* 원형 만들기 */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  box-shadow: 0 2px 5px rgba(0,0,0,0.15); /* 입체감 추가 */
}

/* 만약 CSS 변수(--img-height) 계산이 까다롭다면, 아래 '가장 확실한 대안법' 구조가 안전합니다. */
/* 일단 순수 CSS로 가장 완벽하게 맞추는 정석은 다음과 같이 구조적 마진을 사용하는 방법입니다: */

.app-service-icon {
  position: absolute; /* absolute 대신 relative 사용 */
  width: 64px;        /* 크기 대폭 확대 */
  height: 64px;

  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.app-service-icon img {
  width: 100%; /* 원 내부에서 아이콘 그래픽 크기 조절 */
  height: auto;
}

/* 5. 텍스트 영역 스타일 */
.app-service-title {
margin-top:40px; 
  font-size: 16px;
  font-weight: 700;
  color: #0b1a30;
  padding: 0 16px;
  margin-bottom: 12px;
  line-height: 1.3;
}

.app-service-description {
  font-size: 13px;
  color: #4a5568;
  padding: 0 16px 24px 16px; /* 하단 여백 포함 */
  line-height: 1.4;
}

/* ==========================================================================
   📱 반응형 미디어 쿼리 (Media Queries)
   ========================================================================== */
@media (max-width: 1400px) {
  .app-service-item { width: calc((100% - (16px * 3)) / 4); }
}

@media (max-width: 991px) {
  .app-service-item { width: calc((100% - (16px * 3)) / 3); }
}
@media (max-width:767px) {
  .app-service-item { width: calc((100% - (16px * 3)) / 2); }
}

@media (max-width: 576px) {
  .app-service-item { width: 100%; }
}


.page-1574 .section-header, .page-1574 .section-banner, .page-1574 .section-footer {
    display: none !important;
}

.btn  { font-family: "Open Sans", sans-serif !important;}

.contentbuilder-css, .contentbuilder-css p { font-weight:500; }

h1, .h1, .contentbuilder-css h1, h2, .h2, .contentbuilder-css h2, h3, .h3, .contentbuilder-css h3, h4, .h4, .contentbuilder-css h4, h5, .h5, .contentbuilder-css h5, h6, .h6, .contentbuilder-css h6 { font-family: "Open Sans", sans-serif !important;}

.app-bg-primary {background-color:var(--app-primary-color); }
.app-bg-navy {background-color:var(--app-color-navy); }
.app-btn-red { background-color:var(--app-color-red); color:#fff !important; }
.app-btn-red:hover { opaticy:0.8; }

.app-btn-white-outline { background-color:transparent; color:#fff !important; border:solid 1px #fff !important; }
.app-btn-white-outline:hover { opaticy:0.8; background-color:rgba(255,255,255,0.15) !important }


a:focus, a:hover, a:active {outline:none !important; }