@charset "utf-8";

/* 내용관리 */
#ctt {margin:10px 0;padding:20px;background:#fff}
.ctt_admin {text-align:right;display: none !important;}
#ctt header h1 {position:absolute;font-size:0;line-height:0;overflow:hidden}
#ctt_con {padding:10px 0;}
#ctt_con img{max-width:100%;height:auto}
.ctt_img {text-align:center}

/* 인트로 */
.center-introduce .intro-txtbox {
    position: relative;
    padding-bottom: 100px;
    margin-bottom: 77px;
    border-bottom: 1px dashed #EAEAEA;
}

.center-introduce .intro-txtbox .title-box em {
    position: relative;
    display: block;
    margin-top: 12px;
    padding-left: 10px;
    font-size: 15px;
    font-weight: 300;
    line-height: 1.2;
    letter-spacing: 0.2em;
    color: #1986E5;
    opacity: 0.2;
    text-transform: uppercase;
}

.center-introduce .intro-txtbox .title-box em::before {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: calc(100% - 356px);
    height: 1px;
    background-color: #1986E5;
    opacity: 0.4;
}

.center-introduce .intro-txtbox .title-box strong {
    display: block;
    margin: 40px 0 26px;
    font-size: 24px;
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: 0;
    color: #1986E5;
    font-weight: 600;
}

.center-introduce .intro-txtbox .title-box strong b {
    display: block;
    font-size: 38px;
    font-weight: 700;
    color: #222;
    line-height: 1.3;
}


.center-introduce .intro-txtbox .paragraph {
    margin-top: 20px;
}

.center-introduce .intro-txtbox .paragraph p {
    font-size: 18px;
    line-height: 1.5;
    letter-spacing: 0;
    color: #36404A;
}

.center-introduce .intro-txtbox .paragraph p + p {
    margin-top: 35px;
}

/* 공통 스타일 */
.moul_container { padding: 0 0 40px 0; }
.moul_title_box { margin-bottom: 30px; }
.moul_title_box.center { text-align: center; }
.moul_title_box .sub_title { color: #2e59a7; font-weight: 700; margin-bottom: 5px; }
.moul_title_box .main_title { font-size: 2rem; color: #111; font-weight: 800; }
.moul_title_box .main_title strong { color: #2e59a7; }

/* 목적 섹션 */
.moul_intro { margin-bottom: 80px; }
.moul_desc_box { background: #f8f9fb; padding: 40px; border-radius: 20px; border-left: 6px solid #2e59a7; margin-bottom: 30px;  }
.highlight_text { font-size: 1.25rem; font-weight: 600; color: #222; margin-bottom: 25px; word-break: keep-all; }
.moul_list { list-style: none; padding: 0; }
.moul_list li { position: relative; padding-left: 20px; margin-bottom: 12px; font-size: 1.05rem; color: #555; }
.moul_list li::before { content: '•'; position: absolute; left: 0; color: #2e59a7; font-weight: bold; }

/* 비전 섹션 */
.moul_vision { margin-bottom: 80px; text-align: center; }
.vision_top { background: #2e59a7; padding: 50px 20px; border-radius: 20px 20px 0 0; color: #fff; }
.vision_top .badge { display: inline-block; background: rgba(255,255,255,0.2); padding: 4px 15px; border-radius: 30px; font-size: 0.9rem; margin-bottom: 15px; }
.vision_top h4 { font-size: 1.65rem; font-weight: 700; word-break: keep-all; }
.vision_grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: #e1e4e9; border: 1px solid #e1e4e9; border-radius: 0 0 20px 20px; overflow: hidden; margin-bottom: 30px;}
.vision_item { background: #fff; padding: 35px 20px; transition: 0.3s; }
.vision_item:hover { background: #f0f4ff; }
.vision_item .icon { font-size: 1.5rem; font-weight: 900; color: #cbd2db; margin-bottom: 15px; }
.vision_item h5 { font-size: 1.15rem; font-weight: 700; margin-bottom: 10px; color: #111; word-break: keep-all; }
.vision_item p { font-size: 0.95rem; color: #666; word-break: keep-all; }

/* 핵심가치 섹션 */
.value_wrap { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.value_card { background: #fff; border: 1px solid #eee; padding: 40px 20px; border-radius: 15px; text-align: center; box-shadow: 0 10px 20px rgba(0,0,0,0.03); }
.value_card h6 { font-size: 1.4rem; font-weight: 800; color: #2e59a7; margin-bottom: 15px; }
.value_card p { font-size: 1rem; color: #555; font-weight: 500; line-height: 1.4; }

/* 반응형 모바일 */
@media (max-width: 991px) {
    .vision_grid { grid-template-columns: repeat(2, 1fr); }
    .value_wrap { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .vision_grid { grid-template-columns: 1fr; }
    .value_wrap { grid-template-columns: 1fr; }
    .moul_title_box .main_title { font-size: 1.5rem; }
    .vision_top h4 { font-size: 1.3rem; }
}

/* 연혁 섹션 공통 */
.moul_history { padding: 60px 0; max-width: 900px; margin: 0 auto; }
.history_title { text-align: center; margin-bottom: 50px; }
.history_title h3 { font-size: 1.8rem; font-weight: 800; color: #111; margin-bottom: 10px; }
.history_title p { color: #666; font-size: 1rem; }

/* 타임라인 구조 */
.timeline_container { position: relative; padding: 20px 0; }
.timeline_container::before { 
    content: ''; 
    position: absolute; 
    left: 150px; 
    top: 0; 
    width: 2px; 
    height: 100%; 
    background: #e1e4e9; 
}

.timeline_item { 
    position: relative; 
    display: flex; 
    margin-bottom: 50px; 
    align-items: flex-start;
}

/* 타임라인 날짜 영역 */
.timeline_date { 
    width: 150px; 
    padding-right: 40px; 
    text-align: right; 
    flex-shrink: 0; 
    position: relative;
}
.timeline_date .year { display: block; font-size: 0.9rem; color: #999; font-weight: 500; }
.timeline_date .day { display: block; font-size: 1.25rem; color: #2e59a7; font-weight: 800; margin-top: 2px; }

/* 타임라인 점(Dot) */
.timeline_item::after {
    content: '';
    position: absolute;
    left: 146px; /* 선의 중앙에 맞춤 */
    top: 10px;
    width: 10px;
    height: 10px;
    background: #fff;
    border: 3px solid #2e59a7;
    border-radius: 50%;
    z-index: 1;
    transition: 0.3s;
}

/* 타임라인 내용 영역 */
.timeline_content { padding-left: 40px; }
.timeline_content h4 { font-size: 1.25rem; font-weight: 700; color: #222; margin-bottom: 8px; }
.timeline_content p { font-size: 1.05rem; color: #555; line-height: 1.5; word-break: keep-all; }

/* 마지막 항목 강조 */
.timeline_item.highlight::after {
    background: #2e59a7;
    box-shadow: 0 0 0 5px rgba(46, 89, 167, 0.1);
}
.timeline_item.highlight .timeline_content h4 { color: #2e59a7; }

/* 반응형 모바일 */
@media (max-width: 768px) {
    .timeline_container::before { left: 20px; }
    .timeline_item { flex-direction: column; }
    .timeline_date { 
        width: 100%; 
        text-align: left; 
        padding-left: 45px; 
        padding-bottom: 10px; 
    }
    .timeline_item::after { left: 16px; top: 8px; }
    .timeline_content { padding-left: 45px; }
}

.moul_org_container { padding: 0 0 40px 0; text-align: center; }
.org_chart_wrap { min-width: 850px; position: relative; display: inline-block; margin: 0 auto; }

/* 노드 기본 디자인 */
.node {
    display: inline-block;
    padding: 15px 35px;
    border-radius: 4px;
    font-weight: 700;
    font-size: 1.1rem;
    background: #fff;
    border: 1px solid #d1d8e0;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
    z-index: 2;
    position: relative;
}

/* 직급별 색상 */
.head_node { background: #1a2a44; color: #fff; border: none; }
.chairman_node { background: #2e59a7; color: #fff; border: none; }
.ceo_node { background: #fff; border: 2px solid #2e59a7; color: #2e59a7; }
.team_node { background: #fff; border: 1px solid #2e59a7; font-size: 1rem; width: 140px; }

/* 감사 & 운영위원회 사이드 노드 */
.side_node {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    padding: 10px 20px;
    background: #f8f9fb;
    border: 1px dashed #2e59a7;
    border-radius: 4px;
    font-size: 0.95rem;
    font-weight: 600;
    width: 130px;
}
.side_node.left { left: 50px; }
.side_node.right { right: 50px; }

/* 수직 연결선 통합 관리 */
.org_row { position: relative; padding: 25px 0; width: 100%; }

/* 수직 실선 (이사장-사무총장 연결) */
.v_line::after, .v_line_top::before {
    content: '';
    position: absolute;
    left: 50%;
    width: 2px;
    background: #ced4da;
    transform: translateX(-50%);
    z-index: 1;
}
.v_line::after { bottom: -25px; height: 100px; } /* 이사장 아래에서 아래로 쭉 */
.v_line_top::before { top: -25px; height: 25px; } /* 사무총장 위에서 위로 */

/* 감사/운영위원회 가로선 (중앙 수직선에서 뻗어나옴) */
.mid_row { height: 60px; display: flex; justify-content: center; position: relative; }
.mid_row::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 180px;
    right: 180px;
    height: 2px;
    background: #ced4da;
    transform: translateY(-50%);
}

/* 하부 팀 수평 라인 */
.team_row { padding-top: 40px; }
.team_line_wrap {
    display: flex;
    justify-content: center;
    gap: 30px;
    position: relative;
    padding-top: 30px;
}
.team_line_wrap::before {
    content: '';
    position: absolute;
    top: 0;
    left: 85px;
    right: 85px;
    height: 2px;
    background: #ced4da;
}
.team_node::after {
    content: '';
    position: absolute;
    top: -30px;
    left: 50%;
    width: 2px;
    height: 30px;
    background: #ced4da;
    transform: translateX(-50%);
}

/* 사무총장에서 팀 수평선까지 내려오는 선 */
.ceo_node::after {
    content: '';
    position: absolute;
    bottom: -50px;
    left: 50%;
    width: 2px;
    height: 25px;
    background: #ced4da;
    transform: translateX(-50%);
}

.moul_business {
    padding: 0 0 20px 0;
}

/* 각 사업 아이템 박스 */
.biz_item {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    margin-bottom: 40px;
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.03);
    transition: transform 0.3s ease;
}

.biz_item:hover {
    transform: translateY(-5px);
    border-color: #2e59a7;
}

/* 왼쪽 설명 영역 */
.biz_info {
    flex: 1;
    min-width: 300px;
    padding: 40px;
}

.biz_num {
    display: inline-block;
    font-size: 1.2rem;
    font-weight: 800;
    color: #2e59a7;
    margin-bottom: 10px;
    letter-spacing: 0.1em;
}

.biz_title {
    font-size: 1.6rem;
    font-weight: 800;
    color: #111;
    margin-bottom: 20px;
    position: relative;
}

.biz_desc {
    font-size: 1.05rem;
    color: #555;
    word-break: keep-all;
    text-align: justify;
}

/* 오른쪽 주요내용 영역 */
.biz_details {
    width: 350px;
    background: #f8f9fb;
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-left: 1px solid #e9ecef;
}

.details_title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #2e59a7;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
}

.details_title::before {
    content: '';
    width: 15px;
    height: 2px;
    background: #2e59a7;
    margin-right: 10px;
}

.details_list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.details_list li {
    position: relative;
    padding-left: 18px;
    margin-bottom: 10px;
    font-size: 0.95rem;
    color: #444;
    font-weight: 500;
}

.details_list li::before {
    content: '·';
    position: absolute;
    left: 0;
    font-weight: bold;
    color: #2e59a7;
}

/* 반응형 모바일 */
@media (max-width: 768px) {
    .biz_item {
        flex-direction: column;
    }
    .biz_details {
        width: 100%;
        border-left: none;
        border-top: 1px solid #e9ecef;
        padding: 30px 40px;
    }
    .biz_info {
        padding: 30px;
    }
}

.prep_container {
    padding: 100px 20px;
    text-align: center;
    background: #fff;
}

.prep_content {
    max-width: 500px;
    margin: 0 auto;
}

/* 시계/준비 아이콘 애니메이션 */
.prep_icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 30px;
    background: #f0f4ff;
    border-radius: 50%;
    padding: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.prep_icon svg {
    width: 100%;
    height: 100%;
    animation: rotate_clock 2s infinite linear;
}

@keyframes rotate_clock {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.prep_title {
    font-size: 2rem;
    font-weight: 800;
    color: #111;
    margin-bottom: 20px;
    letter-spacing: -0.05em;
}

.prep_text {
    margin-bottom: 40px;
}

.prep_text p {
    font-size: 1.1rem;
    color: #666;
    margin-bottom: 8px;
    word-break: keep-all;
}

.prep_text strong {
    color: #2e59a7;
    font-weight: 700;
}

/* 버튼 스타일 */
.prep_btns {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.prep_btns a {
    display: inline-block;
    padding: 12px 30px;
    border-radius: 5px;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    transition: 0.3s;
}

.btn_home {
    background: #2e59a7;
    color: #fff;
    border: 1px solid #2e59a7;
}

.btn_home:hover {
    background: #1a3e7a;
}

.btn_back {
    background: #fff;
    color: #555;
    border: 1px solid #ddd;
}

.btn_back:hover {
    background: #f8f9fb;
    border-color: #ccc;
}

/* 모바일 대응 */
@media (max-width: 480px) {
    .prep_container { padding: 60px 20px; }
    .prep_title { font-size: 1.6rem; }
    .prep_btns { flex-direction: column; }
    .prep_btns a { width: 100%; }
}