/* 기관소개 인사말 start */
.about-gemc-container {
    max-width: 1400px;
    margin: 0 auto;
    position: relative;
    padding: 0 10px;
}

.gemc-contents-wrap{
    padding: 0 10px;
}

.gemc-title h2{
    font-size: 26px;
    border-bottom: 1px solid #DDDDDD;
    padding: 24px 0 18px 10px;
    font-weight: 600;
    color:#222222;
}


.about-text{
    margin-top: 40px;
    padding: 0;
    position: relative;
}

.about-text h3{
    font-weight: 700;
    line-height: 1.5;
    font-size: 22px;
}

.about-text span{
    color: #E0342F;
}

.about-text-1{
    margin-top: 20px;
    /*font-weight: 600;*/
    font-weight: 550;
    color: #444444;
}

.about-text-1 p,
.about-text-2 p{
    font-size: 20px;
    line-height: 1.6;
}

/*.about-text-1 p:nth-child(2){*/
/*    margin-top: 20px;*/
/*    font-weight: 500;*/
/*}*/

.about-text-2{
    margin-top: 20px;
    padding-bottom: 60px;
    color: #444444;
    font-weight: 600;
    display: inline-block;
}

.about-text-2 p:nth-child(2),
.about-text-2 p:nth-child(3){
    margin-top: 20px;
}

.medical-staff{
    position: absolute;
    bottom: 0;
    right: 0;
    max-width: 640px;
}
.medical-staff img{
    width: clamp(300px, 50vw, 640px);  /* 최소 320px, 뷰포트에 따라 변화, 최대 640px */

    max-width: 100%; /* 부모 요소를 넘지 않도록 제한 */
    height: auto; /* 비율 유지 */
}


/* 기관소개 인사말 end*/

/* 설립 목적 및 연혁 start */
.purpose-container-contents {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 10px;
}

.page-purpose h2 {
    font-size: 26px;
    border-bottom: 1px solid #DDDDDD;
    padding: 24px 0 18px 10px;
    font-weight: 600;
    color:#222222;
}


.purpose-group {
    max-width: 1096px;
    margin: 50px auto;
    display: flex;
    justify-content: space-between;
    padding: 0 20px;
}

/*.purpose-group-1 영역*/
.purpose-group-1{
    border-right: 1px solid #EEEEEE;
    padding-right: 40px;
}

.purpose-title {
    font-size: 26px;
    font-weight: 600;
    color: #222222;
    text-align: center;
    margin-bottom: 40px;
}

.purpose-header {
    border-bottom: 3px solid #DF332E;
    display: flex;
    align-items: center;
    gap: 20px;
    padding-bottom: 15px;
}

.purpose-header h3 {
    font-size: 18px;
    line-height: 1.5;
    color: #E0342F;
    font-weight: 700;
    letter-spacing: -0.1px;
}

.number {
    font-size: 50px;
    font-weight: bold;
    color: #E0342F;
}

.purpose-contents{
    padding: 15px 5px;
}


.purpose-contents ul > li {
    position: relative;
    list-style: none;
    font-size: 16px;
    line-height: 1.4;
    padding-bottom: 10px;
    color: #444444;
    margin-left: 14px;
}

.purpose-contents ul > li:before {
    content: '•';
    position: absolute;
    color: #DF332E;
    font-size: 14px;
    left: -14px;
    top: 0;
}

/*<!--purpose-group-2 영역 -->*/
.purpose-contents-group-2 {
    padding-left: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    justify-content: center;
}

.purpose-header-box {
    padding: 22px 140px;
    font-size: 20px;
    font-weight: 500;
    background-color: #E0342F;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    letter-spacing: 1px;
}

.purpose-card-container{
    display: grid;
    place-content: center;
    gap: 28px;
    grid-template-columns: repeat(auto-fit,minmax(290px,1fr));
}

.purpose-card {
    display: flex;
    align-items: center;
    gap: 20px;
}

.purpose-card-title {
    font-size: 18px;
    font-weight: 600;
    padding: 28px 0;
    width: 279px;
    color: #444444;
    border: 2px solid #dddddd;
    border-radius: 10px;
    text-align: center;
    line-height: 1.4;
}

.purpose-card-contents{
    display: flex;
    flex-direction: column;
}

.purpose-card ul li {
    font-size: 16px;
    line-height: 1.8;
    color: #222222;
    display: block;
    text-indent: -8px;
    white-space: normal;
    word-break: break-word;
    overflow-wrap: break-word;
}

.page-purpose {
    border-bottom: 2px solid black;
}

/* 연혁 스타일 */
/*.month-section-container*/
.history-content-box{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.history-title {
    padding: 34px 0;
    font-size: 26px;
    color: #222222;
    font-weight: bold;
    text-align: center;
    border: none;
}

/* 전체 컨테이너 스타일 */
.history-container{
    width: 100%;
    max-width: 1400px;
    margin: 40px auto;
}

/* 연,월 컨테이너 스타일*/
#history {
    line-height: 1.6;
    color: #333;
    padding: 0 10px;
}



/* 연도 섹션 스타일 */
.history-year {
    border-bottom:1px solid #dddddd;
    display: flex;
    gap: 30px;
    border-top: 1px solid #dddddd;
    padding: 30px 0;
    max-width: 900px;
    margin: 0 auto;
    width: 100%;
}


.history-year:nth-child(2){
    border-top: none;
    border-bottom:1px solid #dddddd;
}

/* 연혁 연도 */
.history-year h2 {
    font-size: 32px;
    font-weight: 600;
    color: #E0342F;
    line-height: 1.1;
}

/* 월 섹션 컨테이너 */

/* 월 리스트 스타일 */
.month-section-container{
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
}
.month-list {
    display: flex;
    gap: 18px;
}

.month-list h3 {
    font-size: 20px;
    font-weight: bold;
    text-align: right;
    color: #444444;
    flex-shrink: 0;
    line-height: 1.4;
    width: 60px;
}

.month-content{
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* 내용 텍스트 스타일 */
.month-list p {
    font-size: 18px;
    color: #444444;
    margin: 0;
    white-space: normal;
    word-break: break-word;
    max-width: 600px;
    display: block;
    margin-bottom: 4px;
}


/*!* 타임라인 컨테이너 *!*/
/*#history {*/
/*    position: relative;*/
/*    width: 50vw;*/
/*    margin: 0 8vw;*/
/*    padding: 1.1vw 0;*/
/*    display: flex;*/
/*    flex-direction: column;*/
/*    justify-content: center;*/
/*    align-items: center;*/
/*}*/
/*!* 타임라인 중앙 선 *!
#history:before {
    content: '';
    position: absolute;
    left: 2.55vw; !* 중앙 선 위치 *!
    top: 0;
    width: 0.15rem;
    height: 100%;
    background-color: #ddd;
    z-index: 1;
}

!* 연도 섹션 *!
.history-year {
    position: relative;
    margin-bottom: 2vw;
    padding-left: 5vw; !* 중앙 선과 연도 간격 *!
    width: 100%; !* 연도가 가로로 꽉 차도록 설정 *!
}

.history-year h2 {
    font-size: 2rem;
    font-weight: bold;
    color: #DF332E;
    margin-bottom: 10px;
    position: relative;
}

.history-year:before {
    content: '';
    position: absolute;
    left: 2.1vw; !* 중앙 선 근처 *!
    top: 0.6vw;
    width: 1.1vw;
    height: 1.1vw;
    background-color: #DF332E;
    border-radius: 50%;
    z-index: 2;
}

!* 월 섹션 *!
.month-section-container {
    margin-left: 5vw; !* 중앙 선과 월 내용 간격 *!
    border-left: 2px dashed #ddd;
    padding-left: 1.1vw;
}

.month-list {
    margin-bottom: 1.1vw;
}

.month-list h3 {
    font-size: 1.2rem;
    font-weight: bold;
    color: #333;
    margin-bottom: 0.3vw;
}

!* 월별 내용 *!
.month-list p {
    font-size: 1rem;
    color: #666;
    margin: 0.3vw 0;
    padding-left: 0.5vw;
    position: relative;
}

.month-list p:before {
    content: '•';
    position: absolute;
    left: -0.5vw; !* 점 위치 조정 *!
    color: #DF332E;
    font-size: 1rem;
    line-height: 1.2;
}*/

/* 설립 목적 및 연혁 end */

/* 조직도 start */
.organization-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 10px;
}

.organization-chart-image h3,
.organization-chart h3 {
    font-size: 26px;
    border-bottom: 1px solid #DDDDDD;
    padding: 24px 0 18px 10px;
    font-weight: 600;
    color: #222222;
}

.chart-image {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 40px auto;
    max-width: 1080px;
    width: 100%;
}

.chart-image img {
    width: 100%;
    height: 100%;
}

/*.chart-table-container {*/
/*    display: flex;*/
/*    justify-content: center;*/
/*    align-items: center;*/
/*}*/

/*.chart-table-contents {*/
/*    width: 1200px;*/
/*}*/


/*!* 테이블 기본 스타일 *!*/
/*.organization-chart-table {*/
/*    border-collapse: collapse;*/
/*    width: 100%;*/
/*    margin: 20px 0;*/
/*    font-family: 'Noto Sans KR', sans-serif;*/
/*    font-size: 14px;*/
/*    text-align: left;*/
/*}*/

/*!* 테이블 헤더 스타일 *!*/
/*.organization-chart-table thead th {*/
/*    background-color: #DF332E;*/
/*    color: #ffffff;*/
/*    padding: 10px;*/
/*    border: 1px solid #dddddd;*/
/*    font-size: 17px;*/
/*    text-align: center;*/
/*}*/

/*!* 테이블 본문 스타일 *!*/
/*.organization-chart-table tbody td {*/
/*    padding: 10px;*/
/*    border: 1px solid #dddddd;*/
/*    vertical-align: middle;*/
/*    text-align: center;*/
/*}*/

/*!* 목록 스타일 *!*/
/*.organization-chart-table .oct-list {*/
/*    list-style-type: disc;*/
/*    margin: 0;*/
/*    padding-left: 20px;*/
/*    text-align: left;*/
/*}*/

/*!* 강조를 위한 클래스 *!*/
/*.organization-chart-table .oct1 {*/
/*    font-weight: bold;*/
/*}*/

/* 조직도 end */


/* 오시는길 start */
/*오시는길 지도*/
.direction-container {
    /*display: flex;*/
    /*justify-content: center;*/
    /*align-items: center;*/
}

.direction {
    max-width: 1400px;
    margin: 0 auto;
    align-items: center;
    padding: 0 10px;
}

.direction h3 {
    font-size: 26px;
    border-bottom: 1px solid #DDDDDD;
    padding: 24px 0 18px 10px;
    font-weight: 600;
    color: #222222;
}

/* 부모 컨테이너 */
.road-map-view {
    /*display: flex;*/
    /*justify-content: center;*/
    /*align-items: center;*/
    width: 100%;
    height: 100%;
    padding: 0 10px;
    margin: 40px 0;
}

/* 카카오맵 컨테이너 */
.root_daum_roughmap {
    width: 100% ;
    height: 100%;
}

.direction-title{
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 12px;
    padding: 0 10px;
    margin-bottom: 60px;
}

.address{
    padding-bottom: 10px;
}

.contact-row {
    display: flex;
    gap: 300px; /* 전화번호-팩스 간격 조정 */
    align-items: flex-start;
}

.contact-item p {
    margin: 0;
    color: #444444;
    font-size: 20px;
    font-weight: 700;
    line-height: 2;
}

.contact-item span {
    color: #444444;
    font-size: 18px;
}

.direction-title p{
    color: #444444;
    font-size: 20px;
    font-weight: 700;
    line-height: 2;
}

.direction-title span{
    color: #444444;
    font-size: 18px;
}

/* CI start */
.ci-container-wrap{
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 10px;
    width: 100%;
}

.ci-container-wrap h3{
    font-size: 26px;
    border-bottom: 1px solid #DDDDDD;
    padding: 24px 0 18px 10px;
    font-weight: 600;
    color: #222222;
}

.ci-container{
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.ci-content-wrap{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    margin-top: 60px;
    width: 100%;
    place-content: center;
    gap: 16px;
}

.ci-content-1, .ci-content-2 {
    width: 100%;
    text-align: center;
}

.ci-img-wrap{
    width: 100%;
    border: 6px solid #F7F7F7;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 342px;
}

.ci-content-1 img {
    width: 100%;
    height: auto;
    max-width: 100%;
    object-fit: contain;
    aspect-ratio: 22 / 9;
}

.ci-content-2 img{
    width: 100%;
    height: auto;
    max-width: 100%;
    object-fit: contain;
    aspect-ratio: 7 / 1;
}


.ci-title{
    color: #444444;
    font-size: 20px;
    margin-bottom: 16px;
    font-weight: 700;
}

.ci-text{
    font-size: 18px;
    color: #444444;
    line-height: 1.4;
    display: flex;
    align-items: flex-start;
    width: 100%;
}

.ci-download-wrap{
    display: flex;
    justify-content: center;
    align-items: center;
    border: 2px solid #DDDDDD;
    background-color: #FAFAFA;
    width: 380px;
    height: 80px;
    margin-bottom: 60px;
    cursor: pointer;
    transition: transform 0.3s ease, background-color 0.3s ease; /* 부드러운 확대 효과 */
    align-self: center;

}


.ci-download-wrap button{
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    color: #444444;
    gap: 16px;
    font-weight: 700;
}

.ci-download-wrap button img{
    width: 20px;
    height: 20px;
}

/* CI 부분 end */

/* 서비스관리 연혁관리 start */
.history-wrap{
    width: 98%;
    display: inline-flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 10px;
    margin-bottom: 92px;
    border-bottom: 1px solid #dddddd;
}

.history-text-wrap{
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-size: 20px;
}

.history-text-wrap img{
    width: 22px;
    height: 22px;
}


.content-wrapper{
    width: 100%;
    gap: 8px;
}

.history-images{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.history-images img:nth-child(1){
    background-color: #EFF5F8;
    padding: 6px;
    border-radius: 4px;
    width: 28px;
    cursor: pointer;
}

.history-images img:nth-child(2){
    background-color: #F4F4F4;
    padding: 6px;
    border-radius: 4px;
    width: 28px;
    cursor: pointer;
}

/* 관리자모드 연혁 등록하기 */
.history-container-2{
    gap: 90px;
    padding: 0 10px;
}

.history-service{
    margin-top: 50px;
}

.history-title-2{
    font-size: 16px;
    padding: 0;
}

.history-content-wrapper{
    display: flex;
    flex-direction: column;
}

.history-item-wrap{
    display: flex;
    justify-content: space-between;
    width: 100%;
    align-items: center;
    gap:6px;
}


.history-year-service{
    max-width: 1000px;
    margin: 0 auto;
    padding-top: 50px;
}

.auto-resize {
    min-height: 38px; /* 부트스트랩의 기본 입력 필드 높이와 비슷하게 설정 */
    resize: none; /* 사용자가 수동으로 크기 조절 못하도록 */
    overflow: hidden; /* 스크롤바 숨김 */
    transition: height 0.3s ease; /* 높이 변화에 부드러운 애니메이션 추가 */
}

.auto-resize:focus {
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); /* 부트스트랩 포커스 스타일 유지 */
}

.history-content-wrap{
    display: flex;
    gap: 16px;
}

.form-contain{
    padding: 10px;
    font-size: 14px;
    text-align: left;
    border-radius: 6px;
    border: 1px solid #dddddd;
    transition: border-color 0.3s ease-in-out;
    width: 100%;
}

#register-year,
#register-month,
#register-day{
    width: 100px;
}

.label-wrap{
    display: flex;
    flex-direction: column;
}

/* 수정하기 모달창 */
.custom-modal .modal-content-wrap{
    width: 280px;
    height: 220px;
    justify-content: center;
    align-items: center;
    border-radius: 22px;
}

.custom-modal .btn-close{
    display: none;
}

.custom-modal .form-title{
    font-size: 18px;
    padding-bottom: 8px;
}

.custom-modal .modal-body-wrap{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
}

.edit-content{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 14px;
}

.edit-btn-wrap{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
}

.delete-btn{
    background-color: #969696;
    width: 100px;
    height: 40px;
    text-align: center;
    color: #FFFFFF;
    border-radius: 8px;
    font-size: 14px;
}

.edit-button , .modify-button{
    background-color: #8D1D22;
    width: 100px;
    height: 40px;
    text-align: center;
    color: #FFFFFF;
    border-radius: 8px;
    font-size: 14px;
}