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

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-image-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, .contentbuilder-css .app-section-title .highlight-line {position: relative;}
.contentbuilder-css .app-banner-title .highlight-line::after, .contentbuilder-css .app-section-title .highlight-line::after {
  content: "";
  position: absolute;
width:100px;
  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.container { margin-top:0; margin-bottom:0; padding-top:60px !important; padding-bottom:60px !important; }
.is-container-sm.is-container.container  { padding-top:30px !important; padding-bottom:30px !important; }
.is-container-md.is-container.container   { padding-top:50px !important; padding-bottom:50px !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.app-section-title-lg { font-size:54px;  }
.app-section-title-container .app-section-title.tw-text-white { color:#fff !important;}

.app-section-member-certs {   display: grid;  grid-template-columns: repeat(2, 1fr);  gap: 120px; }
.app-section-member-certs-description { display:flex; flex-wrap:wrap; gap:40px; padding-top:16px;  align-items:center; }
.app-section-member-certs-description > div {  width:45%; }

.app-section-aboutus-container { padding-top:20px; padding-bottom:30px; }
.app-drop-lists { width:70%; margin-left:auto;  display:flex; flex-direction:column; gap: 20px;  padding-top:20px; }
.app-drop-lists .dropdown { width:100%; }
.contentbuilder-css .app-drop-lists .dropdown .btn { width:100%;  text-align:left; display:flex; justify-content:space-between; }
.contentbuilder-css .app-drop-lists .dropdown .btn.app-btn-white { font-size:24px; font-weight:700; color:var(--app-color-navy);  background-color:#fff; }
.contentbuilder-css .app-drop-lists .dropdown .btn.app-btn-white span:first-child { overflow:hidden; text-overflow: ellipsis; width:calc(100% - 30px);}
.contentbuilder-css .app-drop-lists .dropdown .btn .fa { font-size:32px; color:var(--app-color-red); }
.contentbuilder-css .app-drop-lists .dropdown .btn .fa.fa-minus-circle { display:none; }
.contentbuilder-css .app-drop-lists .dropdown.open .btn .fa.fa-minus-circle { display:inline-block; }
.contentbuilder-css .app-drop-lists .dropdown.open .btn .fa.fa-plus-circle { display:none; }
.contentbuilder-css .app-drop-lists .dropdown .dropdown-menu { background-color:var(--app-navy-color); }

.contentbuilder-css .app-drop-lists .dropdown .dropdown-body-container {padding:20px; font-size:16px; font-weight:500; color:#fff;  }
.contentbuilder-css .app-drop-lists .dropdown .dropdown-body-container div, .contentbuilder-css .app-drop-lists .dropdown .dropdown-body-container p, .contentbuilder-css .app-drop-lists .dropdown .dropdown-body-container li {font-size:16px; color:#fff; font-weight:500;}

.app-section-title-container.app-section-title-container-center { justify-content:center; }
.app-section-title-container.app-section-title-container-center .app-section-title {position:relative;}
.app-section-title-container.app-section-title-container-center .highlight-line { position:absolute; bottom:0; left:50%;}
.app-section-title-container.app-section-title-container-center .highlight-line::after { transform:translateX(-50%); }

#contentarea-safe-compliant { color:#fff; }

.app-banner-heading { font-size:24px; position:relative; color:#fff; text-transform:uppercase; font-weight:700; margin-bottom:20px;}
.app-banner-heading .highlight-line  { bottom:-10px; left:0; width:100px; height:4px; background-color:var(--app-red-color); position:absolute;  }

@media (max-width:1200px) {
.app-section-member-certs {   display: grid;  grid-template-columns: repeat(1, 1fr);  gap: 20px; }
.app-drop-lists { width:80%; }
}

@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;  }
.app-section-title-container .app-section-title.app-section-title-lg { font-size:44px;  }

.is-container.container { margin-top:0; margin-bottom:0; padding-top:50px !important; padding-bottom:50px !important; }
.is-container-sm.is-container.container { padding-top:28px !important; padding-bottom:28px !important;   padding-left: 0px;}
.is-container-md.is-container.container  { padding-top:36px !important; padding-bottom:36px !important; }

.app-section-member-certs-description { flex-direction:column; gap:26px; padding-top:10px;  align-items:flex-start; }
.app-section-member-certs-description > div {  width:100%; align-items:flex-start !important;         justify-content: flex-start !important; gap:20px; }
.app-drop-lists { width:100%; }

.contentbuilder-css .app-drop-lists .dropdown .btn.app-btn-white { font-size:18px;  }
}

@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, .contentbuilder-css .app-section-title .highlight-line::after { width:60px;}
.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;    }
.app-section-title-container .app-section-title.app-section-title-lg { font-size:32px;  }

.app-banner-heading { font-size:20px; }
.app-banner-heading .highlight-line  { bottom:-8px; left:0; width:60px;  }

.is-container.container { margin-top:0; margin-bottom:0; padding-top:40px !important; padding-bottom:40px !important; }
.is-container-sm.is-container.container { padding-top:20px !important; padding-bottom:20px !important; margin-left:10px !important; margin-right:10px !important; padding-left: 0px; }
.is-container-md.is-container.container  {padding-top:26px !important; padding-bottom:26px !important; margin-left:10px !important; margin-right:10px !important; padding-left: 0px; }
.contentbuilder-css .app-drop-lists .dropdown .btn.app-btn-white { font-size:14px;  padding-left:10px; padding-right:10px; }
.contentbuilder-css .app-drop-lists .dropdown .btn .fa { font-size:26px;}
}


/* 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: #eaeaf6 !important;
  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;
}

.app-text-businesshours .table>tbody>tr>td, .app-text-businesshours .table>tbody>tr>th, .app-text-businesshours  .table>tfoot>tr>td, .app-text-businesshours  .table>tfoot>tr>th, .app-text-businesshours  .table>thead>tr>td, .app-text-businesshours  .table>thead>tr>th { border:none; font-size:14px; font-weight:600; padding:4px; 8px;}

.app-text-businesshours table tr:nth-child(odd) {
  background-color: #f2f5f9; /* 원하는 파란빛/회빛 계열 색상 코드 입력 */
}

.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-navy-color, app-color-navy, .app-text-navy, .app-text-navy * {color:var(--app-color-navy);}
.app-bg-primary {background-color:var(--app-primary-color); }
.app-bg-navy {background-color:var(--app-color-navy); }
.app-btn-red, .app-btn-red * { background-color:var(--app-color-red); color:#fff !important; }
.app-btn-red:hover, .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 }

.app-btn-primary-outline { font-weight:600 !important; background-color:transparent; color:var(--app-primary-color) !important; border:solid 1px var(--app-primary-color) !important;}
.app-btn-primary-outline:hover { opaticy:0.8; background-color:rgba(255,255,255,0.15) !important; border:solid 1px var(--app-primary-color) !important; }

.app-btn-navy-outline { font-weight:600 !important; background-color:transparent; color:var(--app-navy-color) !important; border:solid 1px var(--app-navy-color) !important;}
.app-btn-navy-outline:hover { opaticy:0.8; background-color:rgba(255,255,255,0.15) !important; border:solid 1px var(--app-navy-color) !important; }


.btn.app-btn-sm { padding:5px 15px; font-size:14px;}
.app-text-description { font-size:16px;  font-weight:500; } 
.app-text-white, .app-text-white p, .app-text-white div, .app-text-white li { color:#fff; }

.home-section-01::after {
  content: "";
  display: block;
  clear: both;
}

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

.app-flex-servicearea { display:flex; gap:30px; }
.app-map-service-area img { min-width:160px; }
.app-flex-servicearea, app-flex-servicearea * { color:var(--app-color-navy);  font-size:14px; }
.app-flex-servicearea > div {  flex: 1 1 0%; /* Grows equally, shrinks equally, starts at 0 base width */}

.app-text-3  { font-size:24px; font-weight:700; }
.app-text-4  { font-size:18px; font-weight:700; }
.app-text-5 { font-size:24px; font-weight:600; }
.app-text-6 { font-size:28px; font-weight:700; }

.app-grid-3 { display:grid; grid-template-columns: repeat(3, minmax(100px, 1fr)); gap:100px; }
.app-flex-3 { display:flex; gap:100px;  }
.app-flex-3 > div {  flex: 1 1 0%; /* Grows equally, shrinks equally, starts at 0 base width */}

.app-flex-4 { display:flex; gap:60px;  }
.app-flex-4 > div {  flex: 1 1 0%; min-width:240px;}

.app-title-3 { color:var(--app-blue-color); font-weight:700;  position: relative; font-size:20px; }

.app-flex-equal > * { flex: 1 1 0%; /* Grows equally, shrinks equally, starts at 0 base width */}
.
.contentbuilder-css .app-title-3 .highlight-line, .contentbuilder-css .app-title-3 .highlight-line {}
.contentbuilder-css .app-title-3 .highlight-line::after, .contentbuilder-css .app-title-3 .highlight-line::after {
  content: "";
  position: absolute;
width:50px;
  left: 0;
  bottom: -6px; /* Adjust distance below text */
  height: 3px;  /* Thickness of the bar */
  background-color: #ff0000;
}

.is-container a, .contentbuilder-css .is-container a { color:var(--app-primary-color);}

.app-flex-4-safe-compliant { display:flex; flex-wrap:wrap; gap:80px; justify-content:center; row-gap: 20px; }
.app-flex-4-safe-compliant > div { display:flex; gap:20px; align-items:center; }

.app-build-future-btn-container { display:flex; gap:30px; justify-content:space-between; align-items:flex-end; }

.app-banner-34-container { display:flex; gap:30px;  align-items:center; }
.app-banner-34-text { color:#fff; font-weight:700; }
.app-banner-34-text > div { margin-top:20px; margin-bottom:20px;  text-transform:uppercase; }
.app-banner-icons img { max-height:64px; }

.app-position-hire-container { padding-top:10px;  display:flex; flex-direction:column; gap:10px; }
.app-position-hire-container  > div { width:100%; display:flex; gap:30px; align-items:center;  background-color:#e2eaf7;  padding:8px 10px;}

.app-employee-benefit-container  { padding-top:10px;  display:flex; flex-wrap:wrap; gap:10px; }
.app-employee-benefit-container  > div {  flex: 1 1 25%; max-width:100px; display:flex; flex-direction:column; gap:10px; align-items:center;  background-color:#e2eaf7;  padding:16px 4px; text-align:center;  font-size:0.9rem;}


.table-faqs  tr td, .table-faqs  tr th { margin:4px; padding:8px !important; background-color:#384d75;  border-top: 4px solid var(--app-navy-color) !important; border-right: 4px solid var(--app-navy-color) !important; }

@media (max-width: 991px) {
 .app-grid-3 { grid-template-columns: repeat(1, minmax(100px, 1fr)); gap:20px; }
.app-text-3  { font-size:20px; font-weight:700; }
.app-text-4  { font-size:16px; font-weight:700; }
.app-text-5 { font-size:20px; font-weight:600; }
.app-text-6 { font-size:24px; font-weight:700; }
.app-flex-3 { display:flex; gap:50px;  }
.app-flex-4 { display:flex; gap:30px;    }
.app-flex-4 > div {min-width:220px;}
.app-image-container-left { background-position:left center !important; }
}

@media (max-width:767px){
.app-flex-3 {flex-direction: column; gap:30px; } 
.app-flex-4 {flex-direction: column; gap:20px;   } 

.app-flex-4 > div {min-width:220px;}

.app-build-future-btn-container { flex-direction:column; align-items: flex-start;  }
.app-title-3 { font-size:18px; }

.app-flex-servicearea { flex-direction:column; gap:16px; }
.app-drop-lists .dropdown-menu { right:0; }
}

.custom-check-list {
  list-style: none; /* 기본 불릿 제거 */
  padding-left: 0;
  margin: 0;
}

.custom-check-list li {
  position: relative;
  padding-left: 32px; /* 아이콘이 들어갈 공간 확보 */
  margin-bottom: 6px;
  font-size: 16px;
  line-height: 1.5;
  font-weight: 500;
  color: var(--app-color-navy); /* 텍스트 색상 */
}

.custom-check-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  
  /* 이미지 스타일의 파란색 원형 체크 아이콘 (Data URI SVG) */
  background-color: #0023cc;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px 12px;
}