/* main.css */
/*@import url(//spoqa.github.io/spoqa-han-sans/css/SpoqaHanSansNeo.css);*/

@font-face {
    font-family: 'Spoqa Han Sans Neo';
    font-weight: 400;
    src: url('../fonts/SpoqaHanSansNeo-Regular.woff2') format('woff2');
}

@font-face {
    font-family: 'Spoqa Han Sans Neo';
    font-weight: 500;
    src: url('../fonts/SpoqaHanSansNeo-Medium.woff2') format('woff2');
}

@font-face {
    font-family: 'Spoqa Han Sans Neo';
    font-weight: 700;
    src: url('../fonts/SpoqaHanSansNeo-Bold.woff2') format('woff2');
}

/* 전체 페이지에 폰트 적용 */
html, body {
    height: 100%;
    margin: 0;
    font-family: "Spoqa Han Sans Neo", sans-serif;
    font-weight: 400;
    font-size: 16px;  /* 기본 폰트 사이즈 설정 */
    line-height: 1.5;  /* 줄 간격 설정 */
}

/* Common */
.title {
    text-align: center;
    font-size: 36px;  /* 폰트 사이즈 조정 */
    font-weight: 700;
    margin-top: 120px;
    margin-bottom: 31px;
}

/* Layout */
.container {
    width: 1280px;
    margin: 0 auto;
}


.container2 {
    width: 900px;
    margin: 0 auto;
}


.right_content {
    width: 1280px;
    margin: 0 auto;
}

/* 공통 섹션 스타일 */
.full-width-section {
    width: 100%;
    position: relative;
    /*padding: 80px 0;*/
}

/* 모바일 first 섹션 */
.mobile-only-section {
    display: none; /* 기본적으로 숨김 */
}

/* 기본적으로 모바일 뷰는 숨김 */
.mobile-view {
    display: none;
}

.mobile-notice-table {
    width: 100%;
    border-collapse: collapse;
}

.mobile-notice-table tr {
    border-bottom: 1px solid #eee;
    cursor: pointer;
}

.mobile-notice-table td {
    padding: 12px 8px;
}

.image-section {
    position: relative;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1; /* 이미지 영역이 남은 공간을 모두 차지하도록 설정 */
    text-align: right; /* 이미지 우측 정렬 */
}

.image-section img {
    max-width: 100%; /* 컨테이너 너비에 맞춰 이미지 최대 너비 설정 */
    height: auto;     /* 가로세로 비율 유지 */
    display: block;    /* 이미지 아래 불필요한 공백 제거 */
}

.category-label {
    color: #666;
    font-size: 14px;
}

.mobile-title {
    font-size: 14px;
}

.section-container picture {
    width: 100%;
    display: block;
    height: 100%;
    object-fit: cover;
}

/* 각 섹션별 이미지 영역 */
/*.image-section-1 {*/
/*    width: 1200px;*/
/*    height: 482px;*/
/*    position: relative;*/
/*    background-position: center;*/
/*    background-size: cover;*/
/*    background-repeat: no-repeat;*/
/*    display: flex;*/
/*    align-items: center;*/
/*    justify-content: center;*/
/*}*/

.image-section-1 {
    position: relative;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
}

.image-section-1 img {
    max-width: 100%; /* 컨테이너 너비에 맞춰 이미지 최대 너비 설정 */
    height: auto;     /* 가로세로 비율 유지 */
    display: block;    /* 이미지 아래 불필요한 공백 제거 */
}

/*.image-section-2 {*/
/*    width: 1167px;*/
/*    height: 470px;*/
/*    position: relative;*/
/*    background-position: center;*/
/*    background-size: cover;*/
/*    background-repeat: no-repeat;*/
/*    display: flex;*/
/*    align-items: center;*/
/*    justify-content: center;*/
/*}*/

.image-section-2 {
    position: relative;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
}

.image-section-2 img {
    max-width: 100%; /* 컨테이너 너비에 맞춰 이미지 최대 너비 설정 */
    height: auto;     /* 가로세로 비율 유지 */
    display: block;    /* 이미지 아래 불필요한 공백 제거 */
}

/*.image-section-3 {*/
/*    width: 1191px;*/
/*    height: 609px;*/
/*    position: relative;*/
/*    background-position: center;*/
/*    background-size: cover;*/
/*    background-repeat: no-repeat;*/
/*    display: flex;*/
/*    align-items: center;*/
/*    justify-content: center;*/
/*}*/
.image-section-3 {
    position: relative;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
}

.image-section-3 img {
    max-width: 100%; /* 컨테이너 너비에 맞춰 이미지 최대 너비 설정 */
    height: auto;     /* 가로세로 비율 유지 */
    display: block;    /* 이미지 아래 불필요한 공백 제거 */
}
/*.image-section-4 {*/
/*    width: 1240px;*/
/*    height: 524px;*/
/*    position: relative;*/
/*    background-position: center;*/
/*    background-size: cover;*/
/*    background-repeat: no-repeat;*/
/*    display: flex;*/
/*    align-items: center;*/
/*    justify-content: center;*/
/*}*/
.image-section-4 {
    position: relative;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
}

.image-section-4 img {
    max-width: 100%; /* 컨테이너 너비에 맞춰 이미지 최대 너비 설정 */
    height: auto;     /* 가로세로 비율 유지 */
    display: block;    /* 이미지 아래 불필요한 공백 제거 */
}

.card-grey-box {
    background: #f1f1f1;
    backdrop-filter: blur(10px);
    border: 1px solid #f1f1f1;
    border-radius: 25px;
    padding: 40px 30px;
    width: 100%;
    max-width: 1280px;
    text-align: center;
    flex-shrink: 0;
}

.card-body {
    width: 100%;
    max-width: 1280px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.card-title-box {
    background: rgba(49, 62, 142, 1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(49, 62, 142, 1);
    border-radius: 25px;
    padding: 40px 30px;
    width: 360px;
    text-align: start;
    flex-shrink: 0;
}

.card-title-box h1 {
    font-size: 40px;
    font-weight: bold;
    margin-bottom: 8px;
    letter-spacing: -2px;
    color: white;
}

.card-title-box .subtitle {
    font-size: 18px;
    line-height: 1.4;
    opacity: 0.9;
    font-weight: 300;
    color: white;
}
.card-content-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.card-content-item {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    font-size: 16px;
    line-height: 1.1;
}

.card-bullet {
    color: white;
    font-size: 20px;
    margin-top: 2px;
    flex-shrink: 0;
}

.card-content-text {
    font-size: 20px;
    flex: 1;
    color: white;
}


.card-content-text-1 {
    font-size: 16px;
    flex: 1;
    color: white;
}

.grid {
    display: grid;
    grid-template-columns: 30% 70%;
    grid-template-rows: repeat(3, 1fr);
    gap: 10px;
    width: 100%;
    max-width: 800px;
    height: auto;
    border: 2px solid #ccc;
}

.cell {
    border: 1px solid #999;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    writing-mode: vertical-rl;
    text-align: center;
}


.section-company1 {
    /*width: 100%;*/
    /*height: 524px;*/
    /*position: relative;*/
    /*background-position: center;*/
    /*background-size: cover;*/
    /*background-repeat: no-repeat;*/
    /*display: flex;*/
    /*align-items: center;*/
    /*justify-content: center;*/
    background-color: #ffffff;
    padding-top: 100px;
    padding-bottom: 100px;
}
.section-company2 {
    /*width: 100%;*/
    /*height: 524px;*/
    /*position: relative;*/
    /*background-position: center;*/
    /*background-size: cover;*/
    /*background-repeat: no-repeat;*/
    /*display: flex;*/
    /*align-items: center;*/
    /*justify-content: center;*/
    background-color: #3A48A6;
    padding-top: 100px;
    padding-bottom: 100px;
}
.section-company3 {
    /*width: 100%;*/
    /*height: 524px;*/
    /*position: relative;*/
    /*background-position: center;*/
    /*background-size: cover;*/
    /*background-repeat: no-repeat;*/
    /*display: flex;*/
    /*align-items: center;*/
    /*justify-content: center;*/
    background-color: #ECEEFF;
    padding-top: 100px;
    padding-bottom: 100px;
}
.section-company4 {
    /*width: 100%;*/
    /*height: 524px;*/
    /*position: relative;*/
    /*background-position: center;*/
    /*background-size: cover;*/
    /*background-repeat: no-repeat;*/
    /*display: flex;*/
    /*align-items: center;*/
    /*justify-content: center;*/
    background-color: #F5F5F5;
    padding-top: 100px;
    padding-bottom: 100px;
}

picture {
    width: 100%;
    display: block;
}

picture img {
    width: 100%;
    height: auto;
}

/* Sections */
.section-01 {
    /*background: black url("../images/img_01.png") no-repeat center center / cover;*/

    padding: 200px 0;
    /* 배경색을 먼저 테스트해서 selector가 제대로 적용되는지 확인 */
    background-color: black;
    /* 이미지만 따로 설정 */
    background-image: url("../images/img_01.png");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;

}

.section-01 > div > div {
    display: flex;
    flex-direction: column;
    gap: 23px;
    color: #fff;
    width: 50%;
    text-align: left;
}

.section-01 > div > div > div {
    display: flex;
    flex-direction: column;
    gap: 7px;
    font-size: 40px;
}

.section-01 > div > div > p {
    font-size: 18px;
}

.section-1 {
    background-color: #ffffff;
    padding-top: 20px;
    padding-bottom: 20px;
}

.section-2 {
    background-color: #F1F4FF;
    padding-top: 50px;
    padding-bottom: 50px;
}

/* 섹션 내부 컨텐츠 컨테이너 */
.section-container {
    max-width: 1280px;
    height: auto;
    margin: 0 auto;
    display: flex;
    align-items: center; /* 세로 중앙 정렬 */
    gap: 40px;
}
.section-container-1 {
    max-width: 1280px;
    height: auto;
    margin: 0 auto;
    display: flex;
    gap: 40px;
}
.section-container-rel {
    max-width: 1280px;
    margin: 0 auto;
}

.teeg-title {
    text-align: center;
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 60px;
    letter-spacing: 1px;
    color: white;
}

.teeg-title span {
    color: #79ABFF;
}

.teeg-cards-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    max-width: 1280px;
    margin: 0 auto;
}

.teeg-card {
    background: #313E8E;
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 30px 25px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.teeg-card-icon {
    width: 200px;
    height: 200px;
    margin: 0 auto 20px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    position: relative;
}
.teeg-card-title {
    font-size: 1.1rem;
    font-weight: bold;
    margin-top: 24px;
    margin-bottom: 15px;
    text-align: start;
    color: white;
}

.teeg-card-content {
    font-size: 0.9rem;
    line-height: 1.1;
    opacity: 0.9;
}

.teeg-card-content ul {
    padding: 0;
}

.teeg-card-content li {
    margin-bottom: 8px;
    padding-left: 15px;
    position: relative;
    color: white;
}
.card-section-container {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    display: flex;
    align-items: center; /* 세로 중앙 정렬 */
    gap: 40px;
    margin-bottom: 40px;
}
.key-features-header {
    display: flex;
    align-items: baseline; /* 베이스라인 정렬 */
    gap: 10px; /* 간격 */
}

.key-features-subtitle {
    font-size: 18px;
    color: #666;
    font-weight: normal;
}
.features-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px;
    background-color: #ffffff;
    border-radius: 12px;
    overflow: hidden;
}

.feature-item {
    background-color: #ECF5FF;
    padding: 30px;
    display: flex;
    align-items: center;
    gap: 30px;
    min-height: 200px;
}

.feature-title {
    font-size: 1.3rem;
    font-weight: bold;
    color: #455877;
    min-width: 100px;
    flex-shrink: 0;
}

.feature-content {
    flex: 1;
}

.feature-list {
    padding: 0;
    margin: 0;
}

.feature-list li {
    color: #2F2F2F;
    font-size: 20px;
    margin-bottom: 12px;
    padding-left: 15px;
    position: relative;
    line-height: 1.5;
}
.egis-title-section .large-title-text {
    font-size: 64px; /* 모바일에서 크기 조정 */
    line-height: 1.2;
    text-align: left;
}

.egis-title-section .large64-title-text {
    font-size: 48px; /* 모바일에서 크기 조정 */
    line-height: 1.3;
    text-align: left;
    margin-bottom: 20px;
    color: #666;
    font-weight: 400;
}
.section-left {
    flex: 0 0 55%;
}

.section-right {
    flex: 0 0 45%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.section-left3 {
    flex: 0 0 30%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.section-left4 {
    flex: 0 0 40%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.section-left5 {
    flex: 0 0 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.section-left5-1 {
    flex: 0 0 50%;
    display: flex;
    justify-content: start;
    align-items: start;
}
.section-left6 {
    flex: 0 0 60%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.section-left7 {
    flex: 0 0 70%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.section-left10 {
    flex: 0 0 100%;
    display: flex;
    justify-content: start;
    align-items: center;
}
.section-left10-1 {
    flex: 0 0 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}
.section-left10-1 .text-section {
    width: 100%;
    max-width: 100%;
    padding: 0 20px; /* 좌우 여백 추가 */
    box-sizing: border-box;
}

.section-left10-1 ul {
    margin: 0;
    padding-left: 20px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    list-style-type: disc;
}

.section-left10-1 li {
    margin-bottom: 12px;
    line-height: 1.5;
    font-size: 16px;
    word-wrap: break-word; /* 긴 텍스트 줄바꿈 */
    overflow-wrap: break-word; /* 추가 줄바꿈 지원 */
}

/* pre 태그 스타일 조정 */
.section-left10-1 pre {
    white-space: pre-wrap; /* 줄바꿈 허용 */
    word-wrap: break-word;
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    max-width: 100%;
    overflow-x: auto; /* 가로 스크롤 허용 */
}
.section-right3 {
    flex: 0 0 40%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.section-right4 {
    flex: 0 0 40%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.section-right5 {
    flex: 0 0 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.section-right5-1 {
    flex: 0 0 50%;
    display: flex;
    justify-content: start;
    align-items: start;
}
.section-right5-2 {
    flex: 0 0 50%;
    display: flex;
    justify-content: start;
    align-items: start;
}
.section-right6 {
    flex: 0 0 60%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.section-right7 {
    flex: 0 0 70%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.mobile-break {
    display: none;
}

.egis-main,
.egis-sub {
    display: inline;
}
/* 로고 스타일 */
.logo {
    width: 600px;
    height: auto;
}

/* 텍스트 스타일 */
.main-title-text {
    font-size: 40px;
    line-height: 1.4;
    color: #2f2f2f;
    margin-top: 20px;
    margin-bottom: 40px;
    font-weight: 400;
}
.large-title-text{
    font-size: 96px;
    line-height: 1.0;
    color: #363636;
    margin-top: 10px;
    margin-bottom: 10px;
    font-weight:600;
}

.large64-title-text{
    font-size: 64px;
    line-height: 1.0;
    color: #363636;
    margin-top: 10px;
    margin-bottom: 10px;
    font-weight:600;
}
.medium-title-text{
    font-size: 32px;
    line-height: 1.0;
    color: #363636;
    margin-top: 10px;
    margin-bottom: 10px;
    font-weight: 600;
}

.section-left10 .medium-title-text .title{
    font-size: 40px;
    line-height: 1.0;
    color: #363636;
    margin-top: 10px;
    margin-bottom: 10px;
    font-weight: 600;
}

.small-title-text{
    font-size: 24px;
    line-height: 1.0;
    color: #363636;
    font-weight: 400;
}
.xsmall-title-text{
    font-size: 18px;
    line-height: 1.2;
    color: #363636;
    font-weight: 400;
}
.sub-title-text {
    font-size: 40px;
    line-height: 1.0;
    color: #6B90E2;
    margin-top: 10px;
    font-weight: 500;
}
.highlight {
    color: #3498db;
}

/* 버튼 스타일 */
.cta-button {
    display: inline-block;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 16px 40px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    font-size: 18px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
}

.cta-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 35px rgba(102, 126, 234, 0.4);
}

/* 3D 일러스트레이션 영역 */


/* section-board */
.section-board {
    background-color: #f6f9ff;
    padding-bottom: 50px;
    padding-top: 20px;
}
.section-board .title {
    margin-bottom: 20px;
}
.section-board .new-swiper-wrapper {
    position: relative;
    width: 966px;
    margin: 0 auto;
}

.section-board .swiper .swiper-wrapper .swiper-slide {
    width: 300px;
    margin-right: 33px;
}

.section-board .swiper .swiper-wrapper .swiper-slide > div {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 14px;
}

.section-board .swiper .swiper-wrapper .swiper-slide img {
    width: 100%;
    margin-bottom: 10px;
}

.section-board .new-swiper-wrapper .swiper-button-prev,
.section-board .new-swiper-wrapper .swiper-button-next {
    text-indent: 99999em;
    width: 38px;
    height: 76px;
    top: 50%;
    transform: translateY(-50%);
}

.section-board .new-swiper-wrapper .swiper-button-next {
    background: url("../images/new_prev.png") no-repeat center center / 100% 100%;
    right: -68px;
}
.section-board .new-swiper-wrapper .swiper-button-prev {
    background: url("../images/new_next.png") no-repeat center center / 100% 100%;
    left: -68px;
}

/*.board-file-download {*/
/*    width: 1280px;*/
/*    margin-top: 10px;*/
/*    margin-bottom: 10px;*/
/*    text-align: right;  !* 우측 정렬 *!*/
/*}*/

.board-file-download {
    width: 100%;
    margin-top: 20px;
    margin-bottom: 20px;
    margin-right: 50px;
    display: flex;
    flex-direction: column;
    text-align: right;
    align-items: end;
}

.board-file-download a {
    display: inline-block;
    padding: 5px 15px;
    color: #666;
    text-decoration: none;
}

.section-board .swiper-slide {
    cursor: pointer;  /* 클릭 가능함을 표시 */
}

/* --- section-board --- */


/* Technology Section */

.section-tech {
    width: 1280px;
    margin: 0 auto 100px;
    align-items: center;
    /* margin-bottom: 100px; */
    padding: 20px 0 42px;
}
.section-tech .title {
}
.section-tech .sub_title {
    margin-top: 50px;
    margin-bottom: 50px;
    text-align: left;
    font-size: 20px;
    font-weight: 700;
}

.section-tech .sub_desc {
    text-align: center;
    font-size: 25px;
    font-weight: 700;
}

.section-tech .sub_contents {
    display: flex;
    text-align: left;
    flex-direction: column; /* 자식 요소들을 세로로 나열 */
    gap: 1px;
    margin-left: 50px;
}

.section-tech .desc {
    text-align: center;
    margin-top: 50px;
    margin-bottom: 42px;
    font-size: 15px;
    font-weight: 400;
    line-height: 19px;
}

.section-tech .contents {
    display: flex;
    text-align: center;
    /* gap: 43px; */
}

.section-tech .contents img {
    width: 350px;
}
.section-tech .tech_container {
    /* display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 20px; */
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 20px;
}

.section-tech .item1 {
    flex-basis: calc(33.33% - 20px);
    position: relative; /* 배치 기준점 설정 */
    height: auto;  /* 높이를 자동으로 조정 */
    min-height: 300px;  /* 최소 높이 설정 */
    display: flex;
    align-items: start; /* 수직 중앙 정렬 */
    justify-content: start; /* 수평 중앙 정렬 */
    padding-top: 20px; /* 오른쪽 패딩 */
    padding-left: 25px;
    color: black; /* 텍스트 색상 */
    font-size: 16px; /* 폰트 크기 */
    text-align: left; /* 텍스트 정렬 */
}

.section-tech pre {
    font-size: 16px;  /* pre 태그 폰트 사이즈 조정 */
    white-space: pre-wrap;  /* 긴 텍스트 줄바꿈 처리 */
    font-family: "Spoqa Han Sans Neo", sans-serif;  /* 폰트 통일 */
}

.section-tech h2 {
    font-size: 18px;  /* h2 태그 폰트 사이즈 조정 */
    margin-bottom: 15px;
}

.section-tech .item1::before {
    content: ""; /* 가상 요소 콘텐츠 */
    position: absolute; /* 절대 위치 */
    top: 0; /* 상단에서부터 */
    left: 0; /* 왼쪽에서부터 */
    width: 100%; /* 너비 설정 */
    height: 100%; /* 높이 설정 */

}


.section-tech .item-1::before {
    width: 130px;
    height: 130px;
    background-image: url('../images/tech01.png');
    background-size: contain; /* 배경 크기 조정 */
    background-position: left center; /* 배경 위치 조정 */
    background-repeat: no-repeat; /* 배경 반복 방지 */
    z-index: -1; /* z-index 설정으로 레이어 배치 */
}

.section-tech .item-2::before {
    width: 130px;
    height: 130px;
    background-image: url('../images/tech03.png');
    background-size: contain; /* 배경 크기 조정 */
    background-position: left center; /* 배경 위치 조정 */
    background-repeat: no-repeat; /* 배경 반복 방지 */
    z-index: -1; /* z-index 설정으로 레이어 배치 */
}

.section-tech .item-3::before {
    width: 130px;
    height: 130px;
    background-image: url('../images/tech02.png');
    background-size: contain; /* 배경 크기 조정 */
    background-position: left center; /* 배경 위치 조정 */
    background-repeat: no-repeat; /* 배경 반복 방지 */
    z-index: -1; /* z-index 설정으로 레이어 배치 */
}

.section-tech .item-4::before {
    width: 130px;
    height: 130px;
    background-image: url('../images/tech04.png');
    background-size: contain; /* 배경 크기 조정 */
    background-position: left center; /* 배경 위치 조정 */
    background-repeat: no-repeat; /* 배경 반복 방지 */
    z-index: -1; /* z-index 설정으로 레이어 배치 */
}

.section-tech .tech_container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 20px;
}


.section-tech .tech_container0 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 20px;
    padding: 0 20px;  /* 좌우 여백 추가 */
}


.section-tech .tech_container_h {
    width: 100%;
    display: flex;
    gap: 20px;
    padding: 0 20px;  /* 좌우 여백 추가 */
}

.section-tech .item_h {
    position: relative; /* 배치 기준점 설정 */
    height: auto;  /* 높이를 자동으로 조정 */
    min-height: 300px;  /* 최소 높이 설정 */
    display: flex;
    align-items: start; /* 수직 중앙 정렬 */
    justify-content: start; /* 수평 중앙 정렬 */
    padding-top: 20px; /* 오른쪽 패딩 */
    padding-left: 25px;
    color: black; /* 텍스트 색상 */
    font-size: 16px; /* 폰트 크기 */
    text-align: left; /* 텍스트 정렬 */
}

.section-tech .item_h::before {
    content: ""; /* 가상 요소 콘텐츠 */
    position: absolute; /* 절대 위치 */
    top: 0; /* 상단에서부터 */
    left: 0; /* 왼쪽에서부터 */
    width: 100%; /* 너비 설정 */
    height: 100%; /* 높이 설정 */

}

.section-tech .item_h-1::before {
    width: 130px;
    height: 130px;
    background-image: url('../images/tech01.png');
    background-size: contain; /* 배경 크기 조정 */
    background-position: left center; /* 배경 위치 조정 */
    background-repeat: no-repeat; /* 배경 반복 방지 */
    z-index: -1; /* z-index 설정으로 레이어 배치 */
}

.section-tech .item_h-3::before {
    width: 130px;
    height: 130px;
    background-image: url('../images/tech03.png');
    background-size: contain; /* 배경 크기 조정 */
    background-position: left center; /* 배경 위치 조정 */
    background-repeat: no-repeat; /* 배경 반복 방지 */
    z-index: -1; /* z-index 설정으로 레이어 배치 */
}

.section-tech .item_h-1 {
    flex: 3;
}

.section-tech .item_h-2 {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: start;
}

.section-tech .item_h-2 img {
    max-width: 100%;
    max-height: 100%;
}

.section-tech .item_h-3 {
    flex: 3;
}

.section-tech .divider_line {
    width: 1280px;
    height: 2px;
    border-bottom: 1px solid #a1add8;
}

.section-tech .item_h-4::before {
    width: 130px;
    height: 130px;
    background-image: url('../images/tech02.png');
    background-size: contain; /* 배경 크기 조정 */
    background-position: left center; /* 배경 위치 조정 */
    background-repeat: no-repeat; /* 배경 반복 방지 */
    z-index: -1; /* z-index 설정으로 레이어 배치 */
}

.section-tech .item_h-6::before {
    width: 130px;
    height: 130px;
    background-image: url('../images/tech04.png');
    background-size: contain; /* 배경 크기 조정 */
    background-position: left center; /* 배경 위치 조정 */
    background-repeat: no-repeat; /* 배경 반복 방지 */
    z-index: -1; /* z-index 설정으로 레이어 배치 */
}

.section-tech .item_h-4 {
    flex: 3;
}

.section-tech .item_h-5 {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: start;
}

.section-tech .item_h-5 img {
    max-width: 100%;
    max-height: 100%;
}

.section-tech .item_h-6 {
    flex: 3;
}

/* 보유기술특허 */

section.section-technology {
    padding: 20px 0 150px;
    background: url("../images/img_03.png") no-repeat center center / cover;
    color: #ffffff;
}

section.section-technology .title {
    /* margin-bottom: 70px; */
}

section.section-technology .desc {
    text-align: center;
    margin-bottom: 42px;
    font-size: 15px;
    font-weight: 400;
    line-height: 30px;
}

.technology-tabs {
    display: flex;
    /* justify-content: space-around; */
    justify-content: center;
    /* background-color: #1a47a8; 배경색을 설정합니다. */
    padding: 10px;
    border-radius: 10px; /* 컨테이너의 모서리를 둥글게 합니다. */
}

.technology-tab {
    width: 300px;
    height: 50px;
    margin-left: 10px;
    margin-right: 10px;
    padding: 0px 20px 0px 20px;
    border-radius: 25px; /* 탭 모서리를 둥글게 합니다. */
    background-color: #ffffff1a; /* 탭 배경색을 설정합니다. */
    color: white; /* 탭 텍스트 색상을 흰색으로 설정합니다. */
    cursor: pointer;
    position: relative; /* 하단 막대를 위한 상대적 위치 설정 */
    transition: background-color 0.3s ease; /* 부드러운 배경 색상 변화 */
    line-height: 50px; /* 텍스트를 수직 가운데에 배치합니다. */
    text-align: center; /* 텍스트를 수평 가운데에 배치합니다. */
}

.technology-tab.active {
    background-color: #1a47a8; /* 활성 탭의 배경색을 다르게 설정합니다. */
}

.technology-tab.active::after {
    content: "";
    position: absolute;
    bottom: -10px; /* 막대의 위치를 탭 하단 아래로 설정합니다. */
    left: 50%;
    transform: translateX(-50%);
    width: 50%; /* 막대의 너비를 설정합니다. */
    height: 4px; /* 막대의 높이를 설정합니다. */
    /*background-color: white;*/ /* 막대의 색상을 흰색으로 설정합니다. */
    border-radius: 2px; /* 막대 모서리를 둥글게 합니다. */
}

.technology-tab-content {
    display: flex;
    justify-content: center;
    text-align: center;
    margin-bottom: 30px;
}

.technology-tab-content-desc {
    width: 900px;
    text-align: left;
    display: none;
    font-size: 15px;
    font-weight: 400;
    line-height: 25px;
}

.technology-tab-content-desc.active {
    width: 900px;
    text-align: left;
    display: block;
    font-size: 15px;
    font-weight: 400;
    line-height: 25px;
}



/* --- section-service --- */
section.section-service {
    /* width: 1280px; */
    /* padding: 20px 0px 0 0px; */
    padding: 20px 0 162px;
    align-items: center;
    /* margin-bottom: 100px; */
}
section.section-service .title {
}
section.section-service .sub_title {
    margin-top: 50px;
    margin-bottom: 50px;
    text-align: center;
    font-size: 25px;
    font-weight: 700;
}

section.section-service .sub_desc {
    text-align: center;
    font-size: 25px;
    font-weight: 700;
}

section.section-service .sub_contents {
    display: flex;
    text-align: left;
    flex-direction: column; /* 자식 요소들을 세로로 나열 */
    gap: 1px;
    margin-left: 50px;
}

section.section-service .desc {
    text-align: center;
    margin-top: 50px;
    margin-bottom: 42px;
    font-size: 15px;
    font-weight: 400;
    line-height: 19px;
}

section.section-service .contents {
    display: flex;
    text-align: center;
    /* gap: 43px; */
}

section.section-service .contents img {
    width: 350px;
}

section.section-service .contents .logoimg {
    width: 200px;
}

section.section-service .contents > div {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.ttgreen_container {
    /* width: 100%; */
    height: 500px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.a_layer {
    width: 100%;
    display: table;
}
.a_layer_inner {
    display: table-cell;
    text-align: center;
}
.a_content {
    display: inline-block;
    text-align: center;
}


.ttgreen_container .left {
    /* width: 70%; */
    /* float: left;
    text-align: center;
    margin: auto; */
    float: left;
}

.ttgreen_container .right {
    width: 300px;
    /* width: 30%; */
    /* float: left; */
    /* margin: auto; */
    margin-left: 20px;
    float: left;
}

.ttgreen_container.ttgreen_desc {
    width: 100%;
    text-align: left;
    font-size: 24px;
}
.ttgreen_container .right > img {
    width: 300px;
    height: auto;
}

.ttgreen_container .item1_logo {
    display: flex;
    align-items: center; /* 세로 중앙 정렬 */
    justify-content: center; /* 가로 중앙 정렬 (text-align과 중복될 수 있음) */
    margin-bottom: 20px;
}

.ttgreen_flex-container {
    display: flex;
    flex-direction: column;
}
.ttgreen_flex-container > div {
    flex: 1; /* 모든 자식 div가 동일한 비율로 넓이를 가짐 */
}

.ttgreen_grid_container {
    display: grid;
    grid-template-columns: repeat(5, 1fr); /* 3개의 열을 만들고, 각 열은 사용 가능한 공간을 균등하게 차지 */
    grid-template-rows: repeat(8, 100px); /* 3개의 행을 만들고, 각 행의 높이를 100px로 설정 */
    gap: 0px; /* 그리드 아이템 사이의 간격을 10px로 설정 */
}

.ttgreen-item {
    background-color: #ffffff;
    border: 0px solid #ccc;
    display: flex;
    justify-content: center;
    align-items: center;
}
.store-buttons {
    display: flex;
    align-items: center; /* 세로 중앙 정렬 */
    justify-content: center; /* 가로 중앙 정렬 (text-align과 중복될 수 있음) */
}

.slider {
    width: 100%;
    height: 80%;
    /* margin: auto; */
}
.slick-slide {
    margin: 0 10px;
}
.slick-slide img {
    width: 100%;
}
.slick-prev:before,
.slick-next:before {
    color: black;
}

/* --- section-service --- */

section.section-people {
    padding: 20px 0 162px;
    background: #1f3667;
}

section.section-people .title {
    color: #ffffff;
}

.people-tabs {
    display: flex;
    /* justify-content: space-around; */
    justify-content: center;
    /* background-color: #1a47a8; 배경색을 설정합니다. */
    padding: 10px;
    border-radius: 10px; /* 컨테이너의 모서리를 둥글게 합니다. */
}

.people-tab {
    width: 250px;
    height: 60px;
    font-size: 20px;
    font-weight: 700;
    text-align: center;
    margin-left: 5px;
    margin-right: 5px;
    margin-bottom: 20px;
    padding: 10px 10px 10px 10px;
    border-radius: 60px; /* 탭 모서리를 둥글게 합니다. */
    background-color: #334875; /* 탭 배경색을 설정합니다. */
    color: white; /* 탭 텍스트 색상을 흰색으로 설정합니다. */
    cursor: pointer;
    position: relative; /* 하단 막대를 위한 상대적 위치 설정 */
    transition: background-color 0.3s ease; /* 부드러운 배경 색상 변화 */
    display: flex; /* Flexbox 사용 */
    align-items: center; /* 세로 중앙 정렬 */
    justify-content: center; /* 가로 중앙 정렬 (text-align과 중복될 수 있음) */
}

.people-tab.active {
    background-color: #112143; /* 활성 탭의 배경색을 다르게 설정합니다. */
}

.people-tab-content {
    display: flex;
    justify-content: center;
    text-align: center;
    margin-bottom: 42px;
}

.people-tab-content-desc {
    text-align: left;
    display: none;
    font-size: 15px;
    font-weight: 200;
    line-height: 19px;
    color: #ffffff;
}

.people-tab-content-desc.active {
    text-align: left;
    display: block;
    font-size: 15px;
    font-weight: 200;
    line-height: 19px;
    color: #ffffff;
}

.people-tab-content-container {
    display: flex;
    width: 100%;
    text-align: left;
}
.people-tab-content-column {
    flex: 1;
    padding: 10px;
    border-right: 1px solid #ffffff1a; /* White vertical line */
}
.people-tab-content-column:first-child {
    /* border-right: none; */
    flex: 1;
    padding: 10px;
    border-left: 1px solid #ffffff1a;
}


section.section-partner {
    padding: 10px 0 160px;
    background: #ecf0f8;
    color: #000000;
}

section.section-partner .content {
    display: flex;
    gap: 15px;
}

section.section-partner .content > div {
    display: flex;
    gap: 15px;
}

section.section-partner .content > div > div {
    flex: 1;
    width: 220px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border-radius: 10px;
}

section.section-partner .content > div > div > a > img {
    width: 50%;
    overflow: hidden;
    display: block; /* Make the image a block-level element */
    margin-left: auto; /* Center the image */
    margin-right: auto; /* Center the image */
}

section.section-partner .content > div > div.deepbrain-ai > a > img {
    width: 70%;
    display: block; /* Make sure this remains a block-level element */
    margin-left: auto; /* Center the image */
    margin-right: auto; /* Center the image */
}

/* section-contact */
section.section-contact {
    padding: 20px 0 100px;
    background: #000;
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
}

section.section-contact .title {
    text-align: center;
    margin-top: 50px; /* 기본 상단 여백 축소 */
    margin-bottom: 20px;
}

section.section-contact .email {
    text-align: center;
    margin-bottom: 30px;
}

section.section-contact .gform {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;  /* 중앙 정렬을 위해 추가 */
}

section.section-contact .content.container2 {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;  /* 너비 설정 추가 */
}

section.section-contact .name-email-wrap {
    display: flex;
    justify-content: space-between;  /* 수정 */
    width: 100%;  /* 너비 설정 */
    margin-bottom: 20px;  /* 여백 추가 */
}

section.section-contact .name-email-wrap > div {
    width: 48%;  /* 너비 설정 */
}

section.section-contact .name-email-wrap input {
    width: 100%;  /* input 너비 설정 */
    padding: 10px;  /* padding 추가 */
}

section.section-contact .message-wrap {
    width: 100%;
    margin-bottom: 20px;  /* 여백 추가 */
}

section.section-contact .message-wrap textarea {
    width: 100%;  /* textarea 너비 설정 */
    padding: 10px;  /* padding 추가 */
}

section.section-contact .g-recaptcha {
    margin: 20px 0;
    display: flex;
    justify-content: center;
}

section.section-contact .button-wrap {
    text-align: center;
    width: 100%;  /* 너비 설정 */
    margin-top: 20px;  /* 여백 추가 */
}

section.section-contact button {
    padding: 10px 30px;  /* 버튼 padding 추가 */
    border: none;
    border-radius: 4px;
    cursor: pointer;
}




/* Section Board 반응형 스타일 */
.board-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 20px;
}

.home-board-title {
    font-weight: 700;
    font-size: 34px;
    margin-top: 120px;
    text-align: center;
}

.board-description {
    font-size: 16px;
    text-align: center;
    color: #666;
    margin-top: 10px;
    margin-bottom: 20px;
}

.news-wrapper {
    width: 100%;
    position: relative;
}

.more-link {
    width: 100%;
    text-align: right;
    margin: 10px 0;
}

.notice-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.notice-image img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

.notice-info {
    display: flex;
    gap: 10px;
    align-items: center;
    font-size: 14px;
}


/* 메인 컨텐츠 영역이 남은 공간을 채우도록 설정 */
.main-content {
    flex: 1 0 auto;
}


.board-body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.board-table {
    width: 100%;
    border-collapse: collapse;
}

.board-date {
    text-align: center;
    width: 120px;
}

.board-title a {
    text-decoration: none;
    color: #333;
    font-size: 20px;
    display: block;
    padding: 10px 0;
}


/* 모든 th 및 td 요소에 대한 스타일 */
th, td {
    padding: 8px;
    text-align: left;
    border-bottom: 1px solid #ddd; /* 가운데 가는 선 */
}

/* 첫 번째 row (헤더)의 바닥 테두리 스타일 */
th {
    border-bottom: 2px solid #444; /* 상단의 굵은 선 */
}

/* 마지막 row의 바닥 테두리 스타일 */
tr:last-child td {
    border-bottom: 2px solid #444; /* 하단의 굵은 선 */
}

section.section-board-list-sub-title {
    width: 100%;
    height: auto;
    font-size: 20px;
}
section.section-board-list-sub-title > div  {
    display: flex;
    flex-direction: column;
    margin-top: 20px;
    color: #000;
    width: 100%;
    justify-content: center;
    text-align: center;
}

section.section-board-list {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    align-items: center;
    width: 100%;
    margin-bottom: 20px;
}



section.section-board-detail {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    align-items: center;
    width: 100%;
}

section.section-board-detail .board-detail {
    width: 50%;
    margin-top: 40px;
    margin-bottom: 40px;

}

.board-detail-title {
    border-top: 2px solid #444;
    border-bottom: 1px solid #ddd;
    padding: 15px;
    display: flex;
    flex-direction: column;
}

.board-detail-title pre {
    width: 100%;
    margin: 0;
    white-space: pre-wrap;
    font-family: inherit;
    text-align: left !important;
}

.board-detail-title .title-date {
    font-size: 14px;
    color: #666;
    margin-bottom: 10px;
}

.board-detail-title .title-text {
    font-size: 20px;
    font-weight: 500;
}

.board-detail-content {
    width: 100%;
    padding: 20px 15px;
    box-sizing: border-box;
    text-align: left;
}

.board-detail-img {
    width: 100%;
    max-width: 1280px;
    margin: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.board-detail-bottom {
    border-top: 2px solid #444;
    width: 50%;
    margin-top: 20px;
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    text-align: right;
    align-items: end;
}

#wrap {
    min-height: 100vh;
}

.map {
    width: 100%;
    height: 400px;
    margin-top: 30px;
    margin-bottom: 30px;
    position: relative;
}

#google-map {
    width: 800px;
    height: 400px;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}

.company-container {
    max-width: 1280px;
    display: flex;
    align-items: flex-start; /* 상단 정렬 */
}

.company-title-container {
    max-width: 1280px;
    margin: 0 auto;
    text-align: left; /* 데스크탑에서 좌측 정렬 */
    padding-bottom: 40px;
    padding-left: 0px; /* 좌측 여백 추가 */
}

.text-section {
    flex: 1; /* 텍스트 영역이 남은 공간을 모두 차지하도록 설정 */
}

.text-section h1 {
    font-size: 96px;
}

.text-section p {
    font-size: 40px;
}

.text-section h2 {
    font-size: 36px;
}

.text-section li {
    font-size: 24px;
}


.sub_title1 {

}

/* 모바일 대응 */
@media screen and (max-width: 768px) {

    .mobile-only-section {
        display: block; /* 모바일에서만 보임 */
    }

    .desktop-view {
        display: none;  /* PC용 Swiper 숨김 */
    }

    .mobile-view {
        display: block;  /* 모바일용 테이블 표시 */
    }

    .mobile-notice-table tr:hover {
        background-color: #f8f9fa;
    }

    .container {
        width: 100%;
        margin: 0 auto;
    }


    .section-company1 {
        background-color: #ffffff;
        padding-top: 20px;
        padding-bottom: 20px;
    }
    .section-company2 {
        background-color: #3A48A6;
        padding-top: 20px;
        padding-bottom: 20px;
    }
    .section-company3 {
        background-color: #ECEEFF;
        padding-top: 20px;
        padding-bottom: 20px;
    }
    .section-company4 {
        background-color: #F5F5F5;
        padding-top: 20px;
        padding-bottom: 20px;
    }

    .section-1 {
        background-color: #ffffff;
        padding-top: 0;
        padding-bottom: 0;
    }

    .section-2 {
        background-color: #F1F4FF;
        padding-top: 0;
        padding-bottom: 0;
    }

    .text-section {
        max-width: 90%;
        flex: 1; /* 텍스트 영역이 남은 공간을 모두 차지하도록 설정 */
        text-align: left;
    }

    .text-section h1 {
        font-size: 96px;
    }

    .text-section p {
        font-size: 24px;
    }

    .text-section h2 {
        font-size: 20px;
    }

    .text-section li {
        font-size: 16px;
    }

    .image-section-1 {
        max-width: 80%;
    }
    .image-section-2 {
        max-width: 80%;
    }
    .image-section-3 {
        max-width: 80%;
    }
    .image-section-4 {
        max-width: 80%;
    }

    .image-section img {
        max-width: 80%; /* 컨테이너 너비에 맞춰 이미지 최대 너비 설정 */
        height: auto;     /* 가로세로 비율 유지 */
        display: block;    /* 이미지 아래 불필요한 공백 제거 */
    }

    .section-container {
        flex-direction: column;
        text-align: center;
        max-width: 90%;
        overflow-x: hidden;
    }
    .section-container-1 {
        flex-direction: column;
        max-width: 100%;
        height: auto;
        margin: 0 auto;
    }

    .section-container-rel {
        max-width: 100%;
        margin: 0 auto;
    }

    .section-left, .section-right {
        flex: none;
        width: 100%;
        padding-right: 0;
    }

    /* 모바일에서 이미지가 텍스트보다 위에 오도록 설정 */
    .section-left6 {
        order: 2; /* 텍스트 영역을 아래로 */
    }

    .section-right4 {
        order: 1; /* 이미지 영역을 위로 */
        margin-bottom: 20px; /* 이미지와 텍스트 사이 간격 */
    }

    .section-left5-1, .section-right5-1 {
        flex: none;
        width: 100%;
    }

    /* 이미지가 텍스트보다 위에 오도록 order 설정 */
    .section-right5-1 {
        order: 1; /* 이미지를 위로 */
        margin-bottom: 20px;
    }

    .section-left5-1 {
        order: 2; /* 텍스트를 아래로 */
    }

    .card-grey-box {
        background: #f1f1f1;
        backdrop-filter: blur(10px);
        border: 1px solid #f1f1f1;
        border-radius: 25px;
        width: 80%;
        text-align: center;
        flex-shrink: 0;
    }

    .card-grey-box img{
        width: 100%;
    }

    .teeg-cards-container {
        grid-template-columns: 1fr;
        gap: 20px;
        justify-items: center; /* 하위 요소들을 가운데 정렬 */
    }
    .teeg-card {
        width: 90%;
        display: flex;
        flex-direction: row; /* 가로 배치 */
        align-items: flex-start; /* 상단 정렬 */
        padding: 20px 15px;
        gap: 15px; /* 아이콘과 텍스트 사이 간격 */
        background: transparent; /* 모바일에서 카드 배경 제거 */
    }

    .teeg-card-icon {
        width: 100px; /* 고정 너비 */
        height: 100px; /* 고정 높이로 정사각형 만들기 */
        margin: 0; /* 기존 margin 제거 */
        border-radius: 15px;
        background: #313E8E; /* 아이콘 영역에만 배경색 적용 */
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        flex-shrink: 0; /* 크기 고정 */
        padding: 10px; /* 내부 여백 */
    }

    .teeg-card-icon img {
        width: 100%;
        height: auto;
        object-fit: contain;
        max-width: 100px; /* 이미지 최대 크기 제한 */
        max-height: 100px;
    }
    /* 텍스트 영역을 감싸는 컨테이너 */
    .teeg-card-content-wrapper {
        display: flex;
        flex-direction: column;
        flex: 1; /* 남은 공간 모두 차지 */
        gap: 10px;
    }

    .teeg-card-title {
        font-size: 1rem;
        font-weight: bold;
        margin: 0 0 0 0; /* 상하 여백만 설정 */
        text-align: left;
        color: white;
    }

    .card-content-area {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .card-content-item {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        font-size: 14px;
        line-height: 1.1;
    }

    .card-bullet {
        color: white;
        font-size: 16px;
        margin-top: 2px;
        flex-shrink: 0;
    }

    .card-content-text-1 {
        font-size: 14px;
        flex: 1;
        color: white;
        line-height: 1.0;
    }
    .key-features-header {
        display: flex;
        flex-direction: column; /* 세로 배치 */
        align-items: center; /* 중앙 정렬 */
        gap: 5px;
        text-align: center;
    }
    .key-features-subtitle {
        font-size: 16px;
        color: #666;
        font-weight: normal;
        margin-top: 5px;
    }
    .features-grid {
        grid-template-columns: 1fr;
        gap: 1px;
    }

    .feature-item {
        padding: 20px 15px;
        flex-direction: row; /* 가로 배치 */
        gap: 15px;
        align-items: flex-start;
        min-height: auto;
        margin-bottom: 10px;
    }

    .feature-title {
        font-size: 1rem;
        font-weight: bold;
        color: #455877;
        min-width: auto; /* 최소 너비 자동 */
        flex: 1; /* 1의 비율 */
        flex-shrink: 0; /* 크기 고정 */
        text-align: center; /* 모바일에서 중앙 정렬 */
        display: flex;
        align-items: center; /* 세로 중앙 정렬 */
        justify-content: center; /* 가로 중앙 정렬 */
    }

    .feature-content {
        flex: 2; /* 2의 비율 */
        display: flex;
        align-items: center; /* 세로 중앙 정렬 */
        text-align: left; /* 가로 좌측 정렬 */
    }

    .feature-list li {
        color: #2F2F2F;
        font-size: 14px; /* 모바일에서 폰트 크기 축소 */
        margin-bottom: 8px;
        padding-left: 12px;
        position: relative;
        line-height: 1.4;
    }
    .egis-title-section .large-title-text {
        font-size: 30px; /* 모바일에서 크기 조정 */
        line-height: 1.2;
        text-align: center;
    }

    .egis-title-section .large64-title-text {
        font-size: 20px; /* 모바일에서 크기 조정 */
        line-height: 1.3;
        text-align: center;
        margin-bottom: 20px;
        color: #666;
        font-weight: 400;
    }
    .large64-title-text {
        font-size: 30px; /* 모바일에서 크기 조정 */
        line-height: 1.3;
        text-align: center;
        margin-bottom: 20px;
        color: #666;
        font-weight: 400;
    }
    /* 모바일에서만 줄바꿈 표시 */
    .mobile-break {
        display: block;
    }

    .egis-main {
        display: block;
        font-weight: 700;
    }

    .egis-sub {
        display: block;
        font-size: 0.8em; /* EGIS보다 약간 작게 */
        margin-top: 5px;
    }
    .logo {
        width: 80%;
        max-width: 300px;
        font-size: 36px;
        margin: 20px auto 30px auto;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .main-title-text {
        font-size: 16px;
        margin-bottom: 30px;
        line-height: 1.4;
        color: #363636;
        margin-top: 20px;
        font-weight: 400;
    }
    .large-title-text{
        font-size: 30px;
        line-height: 1.4;
        color: #363636;
        margin-top: 20px;
        margin-bottom: 20px;
        font-weight:600;
    }
    .medium-title-text{
        font-size: 20px;
        line-height: 1.4;
        color: #363636;
        margin-top: 10px;
        margin-bottom: 10px;
        text-align: left;
        font-weight: 600;
    }
    .small-title-text{
        font-size: 14px;
        line-height: 1.4;
        color: #363636;
        margin-top: 10px;
        margin-bottom: 10px;
        font-weight: 400;
    }
    .sub-title-text {
        font-size: 14px;
        line-height: 1.4;
        color: #6B90E2;
        margin-top: 20px;
        margin-bottom: 20px;
        font-weight: 500;
    }
    section.section-contact {
        padding: 20px 15px 60px; /* 좌우 패딩 추가, 하단 패딩 축소 */
    }

    section.section-contact .title {
        margin-top: 30px; /* 모바일에서는 더 작은 여백 */
        margin-bottom: 15px;
        font-size: 24px; /* 모바일에서 폰트 크기도 조정 */
    }

    section.section-contact .content.container2 {
        padding: 0 15px;
        width: 100%;
        box-sizing: border-box;
    }

    section.section-contact .name-email-wrap {
        padding: 0;
        width: 100%;
    }

    section.section-contact .message-wrap {
        padding: 0;
        width: 100%;
    }

    section.section-contact .g-recaptcha {
        transform: scale(0.9);
        transform-origin: center;
        margin: 15px 0;
    }

    section.section-contact .button-wrap {
        padding: 0;
        width: 100%;
    }

    .board-container {
        padding: 0 15px;
    }

    .home-board-title {
        font-size: 24px;
        margin-top: 10px;
    }

    .notice-info {
        font-size: 12px;
    }

    .swiper-slide {
        width: 100% !important;
    }

    .map {
        width: 100%;
        height: 200px;
        margin-top: 20px;
        margin-bottom: 20px;
        position: relative;
    }
    #google-map {
        width: 300px;
        height: 200px;
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
    }

    .section-board-list {
        margin-top: 0; /* 상단 여백 제거 */
    }

    .board-table,
    .board-table tbody,
    .board-table tr {
        display: block;
        width: 100%;
    }

    .board-table th,
    .board-table td {
        padding: 0;
        border: none; /* 기본 테이블 border 제거 */
    }

    .board-row {
        display: flex;
        flex-direction: column;
        padding: 15px 0;
        border-bottom: 1px solid #ddd;
    }

    /* 마지막 row 스타일 재정의 */
    .board-row:last-child {
        border-bottom: 2px solid #444; /* 마지막 row에만 하단 테두리 적용 */
    }

    /* 마지막 row의 td border 제거 */
    .board-row:last-child td {
        border-bottom: none;
    }

    .board-title,
    .board-date {
        border: none !important; /* 모든 border 강제 제거 */
    }

    .board-title,
    .board-date {
        display: block;
        width: 100%;
        text-align: left;
        border: none; /* 셀 사이의 모든 border 제거 */
    }

    .board-title {
        order: 1;
        margin-bottom: 5px;
    }

    .board-title a {
        font-size: 16px;
        padding: 0;
        margin: 0;
        line-height: 1.4;
        color: #333;
        text-decoration: none;
    }

    .board-date {
        order: 2;
        font-size: 13px;
        color: #666;
        padding: 0;
        margin: 0;
    }

    /* 마지막 항목의 하단 border 제거 원할 경우 */
    /*.board-row:last-child {*/
    /*    border-bottom: none;*/
    /*}*/

    section.section-board-detail {
        width: 100%;
        box-sizing: border-box;
    }

    section.section-board-detail .board-detail {
        width: 100%;
        max-width: 800px;
        margin: 40px auto;
    }

    .board-detail-title {
        padding: 15px 10px;
    }

    .board-detail-title pre {
        margin: 0;
        white-space: pre-wrap;
        font-family: inherit;
    }

    .board-detail-title .title-date {
        font-size: 12px;
        margin-bottom: 3px;
        text-align: left;          /* 좌측 정렬 추가 */
        padding-left: 0;           /* 왼쪽 패딩 제거 */
        display: block;            /* 블록 레벨 요소로 변경 */
        width: 100%;              /* 전체 너비 사용 */
    }

    .board-detail-title .title-text {
        font-size: 18px;
        text-align: left;          /* 좌측 정렬 추가 */
        padding-left: 0;           /* 왼쪽 패딩 제거 */
        display: block;            /* 블록 레벨 요소로 변경 */
        width: 100%;              /* 전체 너비 사용 */
    }

    .board-detail-content {
        /*padding: 15px 0;*/
    }

    .board-file-download {
        width: 100%;
        margin: 20px 0;
        padding: 0 15px;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
    }


    .board-detail-img {
        width: 80%;
        box-sizing: border-box;
        display: block; /* 블록 요소여야 auto 중앙 정렬 가능 */
        margin: 0 auto; /* 좌우 여백을 자동으로 설정하여 가운데 정렬 */
    }

    .board-detail-img img {
        max-width: 100%;
        height: auto;
    }

    .board-detail-bottom {
        width: 90%;
        border-top: 2px solid #444;
        margin-top: 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    /* card-section-container 모바일 대응 추가 */
    .card-section-container {
        flex-direction: column;
        gap: 20px;
        margin-bottom: 30px;
        padding: 0 20px;
    }

    .section-left3, .section-left4, .section-left5, .section-left6, .section-left7,
    .section-right3, .section-right4, .section-right5, .section-right6, .section-right7 {
        flex: none;
        width: 100%;
    }
    .section-left10 {
        width: 90%;
        text-align: center; /* 모바일에서 중앙 정렬 */
        justify-content: center; /* 중앙 정렬 */
        align-items: center;
    }
    .section-left10-1 {
        width: 100%;
        justify-content: center;
        align-items: center;
        padding: 0 10px; /* 모바일에서 좌우 패딩 추가 */
    }

    .section-left10-1 .text-section {
        width: 100%;
        max-width: 100%;
        padding: 0 15px;
        text-align: left;
    }

    .section-left10-1 ul {
        padding-left: 16px;
        margin: 0;
    }

    .section-left10-1 li {
        font-size: 14px;
        line-height: 1.4;
        margin-bottom: 10px;
        word-break: keep-all; /* 한글 단어 단위로 줄바꿈 */
        overflow-wrap: break-word;
    }

    .section-left10-1 pre {
        font-size: 12px;
        line-height: 1.3;
        padding: 5px 0;
    }
    .section-left5-1 {
        order: 2; /* 텍스트를 아래로 */
    }
    .section-left5-1 img {
        width: 100%;
    }
    .section-right5-1 .text-section {
        width: 90%;
        margin: 0 auto; /* 요소를 가운데 정렬 */
        text-align: center;
    }
    .section-right5-2 .text-section {
        width: 90%;
        margin: 0 auto; /* 요소를 가운데 정렬 */
        text-align: left;
    }
    .section-left5-1 .text-section {
        width: 90%;
        margin: 0 auto; /* 가운데 정렬 */
    }

    .section-left5-1 .medium-title-text {
        text-align: center; /* 제목 중앙 정렬 */
        margin-bottom: 20px;
    }

    .section-left5-1 ul {
        text-align: left; /* ul 좌측 정렬 */
        padding-left: 20px;
    }

    .section-left5-1 li {
        text-align: left; /* li 좌측 정렬 */
        margin-bottom: 8px;
        line-height: 1.4;
    }

    .section-right5-2 ul {
        text-align: left; /* ul 좌측 정렬 */
        padding-left: 20px;
    }

    .section-right5-2 li {
        text-align: left; /* li 좌측 정렬 */
        margin-bottom: 8px;
        line-height: 1.4;
    }


    .section-left10 .text-section {
        width: 100%;
        margin: 0 auto; /* 요소를 가운데 정렬 */
        text-align: center;
    }
    .section-left10 .medium-title-text {
        margin: 0 auto; /* 요소를 가운데 정렬 */
        text-align: center;
        font-size: 18px;
    }
    .section-left10 .medium-title-text .title{
        margin: 0 auto; /* 요소를 가운데 정렬 */
        text-align: center;
        font-size: 24px;
    }
    .section-left10 .medium-title-text h3{
        font-size: 16px;
    }
    .section-right5-1 .text-section .small-title-text {
        font-size: 16px;
        line-height: 1.0;
        color: #363636;
        font-weight: 400;
        text-align: center;
    }

    .section-right5-1 .text-section li{
        text-align: left;
        font-size: 14px;
        line-height: 1.1;
    }

    .section-left10 h2 {
        max-width: 80%;
        margin: 0 auto; /* 요소를 가운데 정렬 */
        color: #3A48A6;
        font-size: 22px;
        text-align: left;
    }
    .card-title-box {
        width: 100%;
        padding: 30px 20px;
        text-align: center;
    }

    .card-title-box h1 {
        font-size: 32px;
    }

    .card-title-box .subtitle {
        font-size: 16px;
    }

    .card-content-text {
        font-size: 16px;
    }

    .teeg-title {
        text-align: center;
        font-size: 20px;
        font-weight: 700;
        margin-top: 10px;
        margin-bottom: 10px;
        letter-spacing: 1px;
        color: white;
    }

    .company-title-container {
        text-align: center; /* 모바일에서 가운데 정렬 */
        padding-left: 0; /* 모바일에서 좌측 패딩 제거 */
        padding-bottom: 10px;
    }


}