header { width: 100%; position: fixed; left: 0; right: 0; top: 0; z-index: 100; display: flex; justify-content: center; align-items: center; height: 85px; border-bottom: 1px solid #E6E6E6; background: #FFF; }
header nav { width: 80%; margin: 0 auto; }
header nav ul { width: 100%; display: flex; justify-content: center; align-items: center; }
header nav ul li { width: 20%; margin: 0 auto; text-align: center; color: #3D3D3D; font-family: Inter; font-size: 16px; font-style: normal; font-weight: 500; line-height: normal; }
header nav ul li:nth-child(1) { text-align: left; }

.hd-logo { width: 166px; height: 71px; }
.secondpage, .thirdpage, .fourthpage, .fifthpage { margin-top: 85px; height: calc(100vh - 85px); }

/* firstpage - Scrollable */
.firstpage {
    margin-top: 85px;
    height: calc(100vh - 85px);
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
}

.firstpage-scroll-content {
    width: 100%;
    min-height: calc(100vh + 100px);
    padding-bottom: 60px;
}

.top-banner { display: flex; align-items: center; height: 350px; background-image: url(../img/img_section_1_back.png); background-repeat: no-repeat; background-size: cover; background-position: center center; }
.top-banner-in { width: 70%; margin: 0 auto; padding: 20px 0; }
.company-nm { color: #3D3D3D; font-family: Pretendard; font-size: 28px; font-style: normal; font-weight: 400; line-height: normal; margin-bottom: 8px; }
.company-nm-in { color: #3D3D3D; font-size: 42px; font-style: normal; font-weight: 600; line-height: normal; margin-bottom: 0; }
.red { color: #C1393D; font-weight: 600; }
.black { color: #3D3D3D; font-weight: 600; }

.btm-banner-in { width: 100%; padding: 40px 5%; box-sizing: border-box; }
.btm-banner-in p { text-align: center; }
.btm-banner-title { color: var(--gray, #b81c24); text-align: center; font-family: Inter; font-size: 16px; font-style: normal; font-weight: 700; line-height: normal; margin-bottom: 14px; }
.btm-banner-dtl { color: var(--font-color, #3D3D3D); text-align: center; font-family: Inter; font-size: 30px; font-style: normal; font-weight: 500; line-height: 150%; }
.hongik-intorduce > .btm-banner-dtl{font-size: 24px;}
.btm-banner-process { width: 50%; margin: 0 auto; margin-top: 30px; display: flex; justify-content: center; align-items: center; }
.img-process-wrap { margin: 0 auto; }
.img-process { margin: 0 auto; display: flex; justify-content: center; align-items: center; width: 120px; height: 120px; border-radius: 20px; background: #D1888A; }
.img-process-wrap p { margin-top: 12px; color: var(--font-color, #3D3D3D); text-align: center; font-family: Inter; font-size: 16px; font-style: normal; font-weight: 600; line-height: 150%; }

/* Company Info Section (btm-banner 내부) */
.company-vision { color: #3D3D3D; font-family: Pretendard; font-size: 16px; font-style: normal; font-weight: 400; line-height: 155%; text-align: center; margin-top: 0; margin-bottom: 30px;}

/* CEO Greeting Section (btm-banner 내부) */
/* .ceo-greeting-section { margin: 50px auto 0; max-width: 900px; background: linear-gradient(135deg, #D1888A14 100%); border: 4px solid #686868; padding: 50px 40px; border-radius: 20px; } */
.ceo-greeting-section { margin: 50px auto 0; max-width: 900px; padding: 50px 40px; border-radius: 20px; }
.ceo-greeting-title { color: #3D3D3D; text-align: center; font-family: Pretendard; font-size: 28px; font-style: normal; font-weight: 700; line-height: normal; margin-bottom: 40px; }
.ceo-greeting-content { width: 100%; max-width: 100%; margin: 0 auto; display: flex; align-items: flex-start; gap: 50px; }
.ceo-photo-wrapper { flex-shrink: 0; }
.ceo-photo { width: 250px; height: 300px; object-fit: cover; border-radius: 15px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15); }
.ceo-greeting-text { flex: 1; text-align: left; }
.btm-banner-in .ceo-greeting-main { color: #3D3D3D; font-family: Pretendard; font-size: 18px; font-style: normal; font-weight: 600; line-height: 160%; margin-bottom: 25px; text-align: left; }
.btm-banner-in .ceo-greeting-body { color: #3D3D3D; font-family: Pretendard; font-size: 16px; font-style: normal; font-weight: 400; line-height: 170%; margin-bottom: 35px; text-align: left; }
.btm-banner-in .ceo-greeting-signature { text-align: right; margin-top: 40px; /*padding-right: 50px;*/ }
.ceo-name { color: #3D3D3D; font-family: Pretendard; font-size: 18px; font-style: normal; font-weight: 700; line-height: normal; }

/* Innovation Section (btm-banner 내부) */
.innovation-section { margin-top: 30px; padding-top: 30px; }
.innovation-title {padding: 28px 0; text-align: center; font-family: Inter; font-size: 30px; font-style: normal; font-weight: 700; line-height: normal; margin-bottom: 10px; }
.open-innovation{padding-bottom: 20px; font-family: Inter; font-size: 18px; font-style: normal;}
.innovation-subtitle { color: #3D3D3D; text-align: center; font-family: Pretendard; font-size: 18px; font-style: normal; font-weight: 600; line-height: normal;margin-top: 40px;  margin-bottom: 25px; }
.innovation-description { margin-bottom: 50px; color: #3D3D3D; text-align: center; font-family: Pretendard; font-size: 18px; font-style: normal; font-weight: 500; line-height: 160%; margin-top: 50px; }
.core-values { width: 70%; margin: 0 auto; display: flex; justify-content: center; align-items: center; gap: 40px; }
.core-value-item { display: flex; flex-direction: column; align-items: center; position: relative; }
.core-value-circle { display: flex; justify-content: center; align-items: center; width: 110px; height: 110px; border-radius: 50%; background: linear-gradient(135deg, #f9d671 0%, #e8b84a 100%); border: 3px solid #d4a347; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); position: relative; z-index: 2; }
.core-value-circle::before {
    content: '';
    position: absolute;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(249, 214, 113, 0.3) 0%, rgba(232, 184, 74, 0.3) 100%);
    z-index: -1;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.core-value-circle span { color: #3D3D3D; text-align: center; font-family: Pretendard; font-size: 16px; font-style: normal; font-weight: 700; line-height: 140%; }

.hongik-intorduce{margin-top: 60px; padding-top: 30px; /*border-top: 1px solid #E6E6E6;*/}



/* secondpage */
.secondpage { position: relative; }
.top-solution {
    height: 253px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fff;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;
    transition: opacity 0.3s ease, transform 0.3s ease;
}
.top-solution.hidden { opacity: 0; transform: translateY(-20px); pointer-events: none; }
.btm-solution {
    height: calc(100vh - 85px);
    /*background-image: url(../img/img_section_2_back.png);*/
    background-color: #f5f5f5;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    background-attachment: fixed;
    position: relative;
}
.solution-in { width: 60%; margin: 0 auto; display: flex; justify-content: center; align-items: center; }
.solution-in:nth-child(1) { margin-bottom: 28px; }
.img-solution { width: 460px; height: 222px; margin-right: 64px; }
.solution-title-wrap { margin-bottom: 25px; }
.solution-title { margin-right: 12px; }
.solution-sub-title { font-size: 16px; }
.solution-in p { color: #EFEFEF; font-family: Pretendard; font-size: 20px; font-style: normal; font-weight: 600; line-height: 150%; }

/* scrollable solution */
.scrollable-solution {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    padding-top: 253px;
    box-sizing: border-box;
}
.solution-scroll-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 60px 5% 60px 5%;
    width: 100%;
    box-sizing: border-box;
}
.solution-scroll-content img {
    width: auto;
    max-width: 85%;
    height: auto;
    max-height: 800px;
    margin: 60px 0;
    object-fit: contain;
    cursor: pointer;
    box-shadow: 0px 8px 15px 3px rgba(0, 0, 0, 0.3);
}

.solution-scroll-content img:last-child {
    margin-bottom: 60px;
}

/* thirdpage */
.thirdpage {
    background-image: url(../img/img_section_3_back.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    display: flex;
    flex-direction: column;
}
.thirdpage .top-solution {
    position: relative;
    flex-shrink: 0;
}
.solution-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 20px 0;
}
.solution-wrapper img{
    margin: 40px 0;
}
.solution-wrapper p {
    /*margin-top: 18px;*/
    /*padding-bottom: 18px;*/
    color: #3D3D3D;
    text-align: center;
    font-family: Pretendard;
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    margin: 10px 0  80px;
}

/* construction case (Section 5) */
.construction-case {
    display: flex;
    justify-content: center;
    align-items: flex-start;
}
.list-dtl-wrap {
    width: 50%;
    max-width: 1200px;
    margin: 0 auto;
    border-collapse: separate;
    border-spacing: 0;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}
.list-dtl-wrap table {
    width: 100%;
    margin: 0 auto;
    border-collapse: collapse;
}

 .list-dtl-wrap table tbody tr th {
    height: 60px;
    background: #b81c24;
    color: #ffffff;
    font-family: normal;
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: 22px;
    letter-spacing: -0.1px;
}
.list-dtl-wrap table tbody tr td {
    padding: 12px 10px;
    height: 60px;
    text-align: center;
    color: var(--font-color, #3e3e3e);
    font-family: normal;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 150%;
}

.list-dtl-wrap table tbody tr td:first-child{
    font-weight: 700;
}

.list-dtl-wrap table tbody tr {
    background: #ffffff;
    /*border-bottom: 1px solid #e8e9e9;*/
    transition: background 0.2s ease;
}


.list-dtl-wrap table tbody tr:nth-child(even) {
            background: #fafafa;
        }


/* fp-auto-height */
/*.fifthpage { display: flex; align-items: center; height: 262px; background: #F5F5F5; }
.footer-wrap { width: 90%; margin: 0 auto; }
.footer-wrap p { color: #3D3D3D; font-family: Inter; font-size: 14px; font-style: normal; font-weight: 500; }
.footer-wrap span { padding-right: 10px; margin-right: 10px; border-right: 1px solid #3D3D3D; }
.footer-wrap span:nth-last-child(1) { border-right: none; }
.footer-wrap .footer-company { color: #3D3D3D; font-family: Inter; font-size: 25px; font-style: normal; font-weight: 700; line-height: 160%; }*/


/* fp-auto-height */
.fifthpage {display: flex;align-items: center;height: 262px;background: #b81c24;}
.footer-wrap { width: 90%; height: 55%; margin: 0 auto; }
.footer-wrap p { color: #ffffff; font-family: Inter; font-size: 14px; font-style: normal; font-weight: 500; }
.footer-wrap span { padding-right: 10px; margin-right: 10px; border-right: 1px solid #ffffff; }
.footer-wrap span:nth-last-child(1) { border-right: none; }
.footer-wrap .footer-company { color: #ffffff; font-family: Inter; font-size: 30px; font-style: normal; font-weight: 700; line-height: 220%; }


/*섹션 1, 2, 3 내부 스크롤 디자인*/
.firstpage::-webkit-scrollbar,
.scrollable-solution::-webkit-scrollbar {
    width: 12px;
  }
  .firstpage::-webkit-scrollbar-thumb,
  .scrollable-solution::-webkit-scrollbar-thumb {
    background-color: #636363;
    border-radius: 8px;
    background-clip: padding-box;
    border: 0.8px solid transparent;
  }
  .firstpage::-webkit-scrollbar-track,
  .scrollable-solution::-webkit-scrollbar-track {
    background-color: rgb(245 206 206 / 0%);
    border-radius: 10px;
  }
/* .scrollable-solution::-webkit-scrollbar-button
{
    width: 10px;
    height: 10px;
}

.scrollable-solution::-webkit-scrollbar-button:vertical:start {
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 10px solid #ffffff;
}

.scrollable-solution::-webkit-scrollbar-button:vertical:end {
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 10px solid #ffffff;
    border-radius: 10px;
    
} */

/*오른쪽 네비게이션*/
#fp-nav ul li,
.fp-slidesNav ul li {
    height: 14px;
}

#fp-nav ul li a.active span,
.fp-slidesNav ul li a.active span,
#fp-nav ul li:hover a.active span,
.fp-slidesNav ul li:hover a.active span{
    height: 12px;
    width: 12px;
    margin: -6px 0 0-12px;
    border-radius: 100%;
        background: #545454;
 }
#fp-nav ul li a span,
.fp-slidesNav ul li a span {
    height: 8px;
    width: 8px;
    background: #00000054;
    margin: -5px 0 0 -10px;
}

#fp-nav ul li:hover a span,
.fp-slidesNav ul li:hover a span{
    width: 12px;
    height: 12px;
    margin: -6px 0px 0px -11px;
}

/* ============================================
   반응형 미디어 쿼리
   ============================================ */

/* 태블릿 (1024px 이하) */
@media screen and (max-width: 1024px) {
    /* 헤더 */
    header nav { width: 95%; }
    header nav ul li { font-size: 14px; }
    .hd-logo { width: 140px; height: 60px; }

    /* 섹션1 */
    .top-banner { background-position: center center; height: 350px; }
    .company-nm { font-size: clamp(20px, 3vw, 24px); }
    .company-nm-in { font-size: clamp(28px, 4vw, 36px); }
    .firstpage-scroll-content { min-height: calc(100vh + 100px); padding-bottom: 40px; }
    .btm-banner-in { padding: 30px 5%; }
    .btm-banner-process { width: 70%; }
    .img-process { width: 100px; height: 100px; }
    .img-process-wrap p { font-size: 14px; }

    /* Company Info Section - 태블릿 */
    .company-info-section { margin-top: 40px; padding-top: 30px; }
    .company-slogan { font-size: 14px; margin-bottom: 10px; }
    .company-vision { font-size: 14px; margin-bottom: 25px; }

    /* CEO Greeting Section - 태블릿 */
    .ceo-greeting-section { margin: 40px auto 0; max-width: 750px; padding: 40px 30px; }
    .ceo-greeting-title { font-size: 24px; margin-bottom: 30px; }
    .ceo-greeting-content { max-width: 100%; gap: 30px; flex-direction: column; align-items: center; }
    .ceo-photo { width: 200px; height: 240px; border-radius: 12px; }
    .ceo-greeting-text { text-align: center; }
    .btm-banner-in .ceo-greeting-main { font-size: 16px; margin-bottom: 20px; text-align: center; }
    .btm-banner-in .ceo-greeting-body { font-size: 14px; margin-bottom: 30px; text-align: center; }
    .btm-banner-in .ceo-greeting-signature { margin-top: 35px; text-align: center; padding-right: 0; }
    .ceo-name { font-size: 16px; }

    /* Innovation Section - 태블릿 */
    .innovation-section { margin-top: 25px; padding-top: 30px; }
    .innovation-title { font-size: 24px; padding: 20px 0; }
    .open-innovation { font-size: 16px; }
    .innovation-subtitle { font-size: 16px; margin-top: 30px; margin-bottom: 20px; }
    .innovation-description { font-size: 16px; margin-top: 40px; margin-bottom: 40px; }

    /* hongik-intorduce - 태블릿 */
    .hongik-intorduce { margin-top: 40px; padding-top: 30px; }
    .hongik-intorduce > .btm-banner-dtl { font-size: 20px; }
    .core-values { width: 80%; gap: 30px; }
    .core-value-circle { width: 95px; height: 95px; }
    .core-value-circle::before { width: 120px; height: 120px; }
    .core-value-circle span { font-size: 14px; }

    /* 섹션2, 3 */
    .btm-banner-title { font-size: 14px; }
    .btm-banner-dtl { font-size: 24px; }
    .solution-scroll-content img { max-height: 700px; max-width: 90%; }

    /* 섹션5 테이블 */
    .list-dtl-wrap { width: 80%; }
    .list-dtl-wrap table tbody tr th { font-size: 16px; }
    .list-dtl-wrap table tbody tr td { font-size: 14px; padding: 10px 8px; }
}

/* 모바일 (768px 이하) - 아이폰 SE 등 */
@media screen and (max-width: 768px) {
    /* 헤더 - 2줄 레이아웃 */
    header { height: auto !important; min-height: 85px; padding: 8px 0; }
    header nav { width: 100%; }
    header nav ul { flex-wrap: wrap; justify-content: center; align-items: center; gap: 5px; }
    header nav ul li { width: auto; font-size: 11px; padding: 5px 8px; margin: 0; }
    header nav ul li:nth-child(1) { width: 100%; text-align: center; margin-bottom: 8px; }
    .hd-logo { width: 100px; height: 43px; }

    /* 섹션 전체 높이 조정 */
    .firstpage, .secondpage, .thirdpage, .fourthpage, .fifthpage { margin-top: 85px !important; height: calc(100vh - 85px) !important; }

    /* 섹션1 - 아이폰 SE 최적화 */
    .top-banner {
        height: 42vh !important;
        min-height: 220px !important;
        max-height: 280px !important;
        background-size: cover;
        background-position: center center;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .top-banner-in { width: 90%; padding: 10px 0; }
    .company-nm { font-size: clamp(12px, 3.2vw, 15px) !important; margin-bottom: 5px; }
    .company-nm-in { font-size: clamp(17px, 4.5vw, 21px) !important; line-height: 120%; margin-bottom: 0; }
    .firstpage-scroll-content { min-height: calc(100vh + 80px); padding-bottom: 30px; }
    .btm-banner-in { padding: 20px 3%; }
    .btm-banner-title { font-size: clamp(11px, 3vw, 13px); margin-bottom: 6px; }
    .btm-banner-dtl { font-size: clamp(16px, 4.5vw, 20px); line-height: 130%; }
    .btm-banner-process { width: 90%; flex-direction: column; margin-top: 12px; }
    .img-process-wrap { margin: 6px 0; }
    .img-process { width: 65px; height: 65px; }
    .img-process img { width: 55% !important; height: auto !important; }
    .img-process-wrap p { font-size: clamp(11px, 3vw, 13px); margin-top: 5px; line-height: 125%; }

    /* Company Info Section - 모바일 */
    .company-info-section { margin-top: 25px; padding-top: 20px; }
    .company-slogan { font-size: clamp(11px, 3vw, 13px) !important; margin-bottom: 8px; }
    .company-vision { font-size: clamp(12px, 3.5vw, 14px) !important; line-height: 145%; margin-bottom: 20px; }

    /* CEO Greeting Section - 모바일 */
    .ceo-greeting-section { margin: 25px auto 0; max-width: 90%; padding: 30px 20px; }
    .ceo-greeting-title { font-size: clamp(18px, 5vw, 22px) !important; margin-bottom: 20px; }
    .ceo-greeting-content { max-width: 100%; flex-direction: column; align-items: center; gap: 25px; }
    .ceo-photo { width: 180px; height: 220px; border-radius: 10px; }
    .ceo-greeting-text { text-align: center; }
    .btm-banner-in .ceo-greeting-main { font-size: clamp(13px, 3.8vw, 15px) !important; margin-bottom: 15px; line-height: 150%; text-align: center; }
    .btm-banner-in .ceo-greeting-body { font-size: clamp(12px, 3.5vw, 14px) !important; margin-bottom: 25px; line-height: 155%; text-align: center; }
    .btm-banner-in .ceo-greeting-signature { margin-top: 20px; text-align: center; padding-right: 0; }
    .ceo-name { font-size: clamp(13px, 3.8vw, 15px) !important; }

    /* Innovation Section - 모바일 */
    .innovation-section { margin-top: 25px; padding-top: 25px; }
    .innovation-title { font-size: clamp(18px, 5vw, 22px) !important; padding: 16px 0; }
    .open-innovation { font-size: clamp(14px, 3.8vw, 16px); }
    .innovation-subtitle { font-size: clamp(12px, 3.5vw, 14px) !important; margin-top: 25px; margin-bottom: 12px; }
    .innovation-description { font-size: clamp(12px, 3.5vw, 14px) !important; margin-top: 30px; margin-bottom: 35px; line-height: 145%; }

    /* hongik-intorduce - 모바일 */
    .hongik-intorduce { margin-top: 30px; padding-top: 25px; }
    .hongik-intorduce > .btm-banner-dtl { font-size: clamp(16px, 4.5vw, 20px) !important; }
    .core-values { width: 95%; flex-wrap: wrap; gap: 18px; }
    .core-value-circle { width: 70px; height: 70px; border: 2px solid #d4a347; }
    .core-value-circle::before { width: 90px; height: 90px; }
    .core-value-circle span { font-size: clamp(10px, 2.8vw, 12px); line-height: 130%; }

    /* 섹션2, 3 */
    .top-solution { height: 180px; }
    .btm-banner-dtl { font-size: 18px; }
    .scrollable-solution { padding-top: 180px; }
    .solution-scroll-content { padding: 30px 3% 30px 3%; }
    .solution-scroll-content img { max-height: 500px; max-width: 95%; margin: 30px 0; }
    .solution-scroll-content img:last-child { margin-bottom: 30px; }

    /* 섹션4 */
    .solution-wrapper p { font-size: 18px; margin: 10px 0 40px; }

    /* 섹션5 테이블 */
    .list-dtl-wrap { width: 95%; overflow-x: auto; }
    .list-dtl-wrap table { min-width: 600px; }
    .list-dtl-wrap table tbody tr th { font-size: 13px; height: 50px; padding: 8px 5px; }
    .list-dtl-wrap table tbody tr td { font-size: 12px; height: auto; padding: 10px 5px; line-height: 140%; }

    /* 푸터 */
    .fifthpage { height: auto; min-height: 180px; padding: 25px 0; }
    .footer-wrap { width: 95%; height: auto; }
    .footer-wrap .footer-company { font-size: 18px; line-height: 150%; margin-bottom: 10px; }
    .footer-wrap p { font-size: 11px; line-height: 150%; margin: 5px 0; word-wrap: break-word; white-space: normal; overflow: visible; text-overflow: clip; }
    .footer-wrap span { display: block; border: none; margin: 3px 0; padding: 0; }

    /* 라이트박스 */
    .lightbox img { max-width: 95vw; max-height: 90vh; }
    .close-btn { font-size: 28px; right: 15px; }

    /* fullpage 네비게이션 숨김 (모바일에서) */
    #fp-nav { display: none; }
}

/* 작은 모바일 (480px 이하) - 더 작은 폰 */
@media screen and (max-width: 480px) {
    /* 헤더 */
    header { min-height: 80px !important; padding: 6px 0; }
    header nav ul li { font-size: 10px; padding: 4px 6px; }
    header nav ul li:nth-child(1) { margin-bottom: 5px; }
    .hd-logo { width: 80px; height: 34px; }

    /* 섹션1 - 더 작은 화면 */
    .top-banner { height: 38vh !important; min-height: 200px !important; max-height: 240px !important; }
    .company-nm { font-size: clamp(11px, 3vw, 13px) !important; margin-bottom: 4px; }
    .company-nm-in { font-size: clamp(15px, 4vw, 18px) !important; line-height: 115%; margin-bottom: 0; }
    .firstpage-scroll-content { min-height: calc(100vh + 60px); padding-bottom: 25px; }
    .btm-banner-in { padding: 15px 3%; }
    .btm-banner-dtl { font-size: clamp(14px, 4vw, 17px) !important; }
    .img-process { width: 60px; height: 60px; }
    .img-process-wrap p { font-size: clamp(10px, 2.8vw, 12px) !important; }

    /* Company Info Section - 소형 모바일 */
    .company-info-section { margin-top: 20px; padding-top: 15px; }
    .company-slogan { font-size: clamp(10px, 2.8vw, 12px) !important; margin-bottom: 6px; }
    .company-vision { font-size: clamp(11px, 3vw, 13px) !important; line-height: 140%; margin-bottom: 18px; }

    /* CEO Greeting Section - 소형 모바일 */
    .ceo-greeting-section { margin: 20px auto 0; max-width: 92%; padding: 25px 15px; }
    .ceo-greeting-title { font-size: clamp(16px, 4.5vw, 20px) !important; margin-bottom: 15px; }
    .ceo-greeting-content { max-width: 100%; flex-direction: column; gap: 20px; }
    .ceo-photo { width: 150px; height: 180px; border-radius: 8px; }
    .ceo-greeting-text { text-align: center; }
    .btm-banner-in .ceo-greeting-main { font-size: clamp(12px, 3.5vw, 14px) !important; margin-bottom: 12px; line-height: 145%; text-align: center; }
    .btm-banner-in .ceo-greeting-body { font-size: clamp(11px, 3vw, 13px) !important; margin-bottom: 20px; line-height: 150%; text-align: center; }
    .btm-banner-in .ceo-greeting-signature { margin-top: 18px; text-align: center; padding-right: 0; }
    .ceo-name { font-size: clamp(12px, 3.5vw, 14px) !important; }

    /* Innovation Section - 소형 모바일 */
    .innovation-section { margin-top: 20px; padding-top: 20px; }
    .innovation-title { font-size: clamp(16px, 4.5vw, 20px) !important; padding: 14px 0; }
    .open-innovation { font-size: clamp(13px, 3.5vw, 15px); }
    .innovation-subtitle { font-size: clamp(11px, 3vw, 13px) !important; margin-top: 20px; margin-bottom: 10px; }
    .innovation-description { font-size: clamp(11px, 3vw, 13px) !important; margin-top: 25px; margin-bottom: 30px; }

    /* hongik-intorduce - 소형 모바일 */
    .hongik-intorduce { margin-top: 25px; padding-top: 20px; }
    .hongik-intorduce > .btm-banner-dtl { font-size: clamp(14px, 4vw, 18px) !important; }
    .core-values { width: 98%; gap: 15px; }
    .core-value-circle { width: 65px; height: 65px; }
    .core-value-circle::before { width: 85px; height: 85px; }
    .core-value-circle span { font-size: clamp(9px, 2.5vw, 11px); }

    /* 섹션2, 3 */
    .top-solution { height: 150px; }
    .scrollable-solution { padding-top: 150px; }
    .btm-banner-title { font-size: 11px; }
    .btm-banner-dtl { font-size: 16px; }
    .solution-scroll-content img { max-height: 400px; margin: 20px 0; }

    /* 섹션4 */
    .solution-wrapper p { font-size: 16px; }

    /* 섹션5 테이블 */
    .list-dtl-wrap table tbody tr th { font-size: 11px; }
    .list-dtl-wrap table tbody tr td { font-size: 11px; padding: 8px 3px; }

    /* 푸터 */
    .fifthpage { min-height: 160px; }
    .footer-wrap .footer-company { font-size: 16px; line-height: 140%; }
    .footer-wrap p { font-size: 10px; line-height: 140%; }
}

/* 세로 높이가 작을 때 (800px 이하) - 가로가 넓은 데스크톱/노트북 */
@media screen and (min-width: 769px) and (max-height: 800px) {
    /* 헤더 높이 축소 */
    header { height: 70px; }
    .hd-logo { width: 140px; height: 60px; }

    /* 섹션 높이 재조정 */
    .firstpage, .secondpage, .thirdpage, .fourthpage, .fifthpage {
        margin-top: 70px;
        height: calc(100vh - 70px);
    }

    /* 섹션1 - 비율 조정 */
    .top-banner { height: 40vh; min-height: 250px; max-height: 320px; display: flex; align-items: center; }
    .company-nm { font-size: 22px; margin-bottom: 6px; }
    .company-nm-in { font-size: 34px; margin-bottom: 0; }
    .firstpage-scroll-content { min-height: calc(100vh + 100px); padding-bottom: 40px; }
    .btm-banner-in { padding: 30px 5%; }
    .btm-banner-title { font-size: 14px; }
    .btm-banner-dtl { font-size: 24px; }
    .btm-banner-process { width: 60%; margin-top: 20px; }
    .img-process { width: 100px; height: 100px; }
    .img-process-wrap p { font-size: 15px; }

    /* Company Info Section - 높이 800px 이하 */
    .company-info-section { margin-top: 30px; padding-top: 25px; }
    .company-slogan { font-size: 14px; margin-bottom: 10px; }
    .company-vision { font-size: 14px; margin-bottom: 25px; }

    /* CEO Greeting Section - 높이 800px 이하 */
    .ceo-greeting-section { margin: 30px auto 0; max-width: 750px; padding: 35px 30px; }
    .ceo-greeting-title { font-size: 24px; margin-bottom: 28px; }
    .ceo-greeting-content { max-width: 100%; gap: 28px; flex-direction: column; align-items: center; }
    .ceo-photo { width: 180px; height: 220px; border-radius: 12px; }
    .ceo-greeting-text { text-align: center; }
    .btm-banner-in .ceo-greeting-main { font-size: 16px; margin-bottom: 18px; text-align: center; }
    .btm-banner-in .ceo-greeting-body { font-size: 14px; margin-bottom: 28px; text-align: center; }
    .btm-banner-in .ceo-greeting-signature { margin-top: 30px; text-align: center; padding-right: 0; }
    .ceo-name { font-size: 16px; }

    /* Innovation Section - 높이 800px 이하 */
    .innovation-section { margin-top: 25px; padding-top: 25px; }
    .innovation-title { font-size: 24px; padding: 20px 0; }
    .open-innovation { font-size: 16px; }
    .innovation-subtitle { font-size: 15px; margin-top: 30px; margin-bottom: 15px; }
    .innovation-description { font-size: 15px; margin-top: 35px; margin-bottom: 40px; }

    /* hongik-intorduce - 높이 800px 이하 */
    .hongik-intorduce { margin-top: 35px; padding-top: 30px; }
    .hongik-intorduce > .btm-banner-dtl { font-size: 20px; }
    .core-values { width: 75%; gap: 35px; }
    .core-value-circle { width: 90px; height: 90px; }
    .core-value-circle::before { width: 115px; height: 115px; }
    .core-value-circle span { font-size: 14px; }

    /* 섹션2, 3 */
    .top-solution { height: 200px; }
    .scrollable-solution { padding-top: 200px; }
    .btm-banner-title { font-size: 14px; }
    .btm-banner-dtl { font-size: 22px; }
    .solution-scroll-content { padding: 40px 5%; }
    .solution-scroll-content img { max-height: 600px; margin: 40px 0; }

    /* 섹션4 */
    .solution-wrapper p { font-size: 20px; }

    /* 섹션5 테이블 */
    .list-dtl-wrap { width: 70%; }
    .list-dtl-wrap table tbody tr th { font-size: 15px; height: 50px; }
    .list-dtl-wrap table tbody tr td { font-size: 14px; height: 50px; padding: 10px 8px; }

    /* 푸터 */
    .fifthpage { height: auto; min-height: 150px; padding: 20px 0; }
    .footer-wrap { height: auto; }
    .footer-wrap .footer-company { font-size: 20px; line-height: 150%; }
    .footer-wrap p { font-size: 13px; line-height: 140%; }
}

/* 세로 높이가 매우 작을 때 (600px 이하) - 가로가 넓은 경우 */
@media screen and (min-width: 769px) and (max-height: 600px) {
    /* 헤더 */
    header { height: 60px; }
    header nav ul li { font-size: 14px; }
    .hd-logo { width: 130px; height: 56px; }

    /* 섹션 높이 재조정 */
    .firstpage, .secondpage, .thirdpage, .fourthpage, .fifthpage {
        margin-top: 60px;
        height: calc(100vh - 60px);
    }

    /* 섹션1 - 가로 배치 */
    .top-banner { height: 30vh; min-height: 150px; max-height: 200px; display: flex; align-items: center; }
    .company-nm { font-size: 20px; }
    .company-nm-in { font-size: 32px; line-height: 120%; }
    .firstpage-scroll-content { min-height: calc(100vh + 80px); padding-bottom: 30px; }
    .btm-banner-in { padding: 20px 5%; }
    .btm-banner-title { font-size: 13px; margin-bottom: 6px; }
    .btm-banner-dtl { font-size: 20px; line-height: 130%; }
    .btm-banner-process { width: 70%; margin-top: 12px; flex-direction: row; }
    .img-process { width: 80px; height: 80px; }
    .img-process img { max-width: 60px !important; max-height: 60px !important; }
    .img-process-wrap p { font-size: 13px; margin-top: 8px; }

    /* Company Info Section - 높이 600px 이하 */
    .company-info-section { margin-top: 20px; padding-top: 20px; }
    .company-slogan { font-size: 13px; margin-bottom: 8px; }
    .company-vision { font-size: 13px; line-height: 140%; margin-bottom: 20px; }

    /* CEO Greeting Section - 높이 600px 이하 */
    .ceo-greeting-section { margin: 20px auto 0; max-width: 700px; padding: 30px 25px; }
    .ceo-greeting-title { font-size: 20px; margin-bottom: 22px; }
    .ceo-greeting-content { max-width: 100%; gap: 22px; flex-direction: column; align-items: center; }
    .ceo-photo { width: 150px; height: 180px; border-radius: 10px; }
    .ceo-greeting-text { text-align: center; }
    .btm-banner-in .ceo-greeting-main { font-size: 14px; margin-bottom: 15px; line-height: 150%; text-align: center; }
    .btm-banner-in .ceo-greeting-body { font-size: 13px; margin-bottom: 22px; line-height: 155%; text-align: center; }
    .btm-banner-in .ceo-greeting-signature { margin-top: 25px; text-align: center; padding-right: 0; }
    .ceo-name { font-size: 14px; }

    /* Innovation Section - 높이 600px 이하 */
    .innovation-section { margin-top: 20px; padding-top: 20px; }
    .innovation-title { font-size: 20px; padding: 16px 0; }
    .open-innovation { font-size: 14px; }
    .innovation-subtitle { font-size: 13px; margin-top: 25px; margin-bottom: 10px; }
    .innovation-description { font-size: 13px; margin-top: 28px; margin-bottom: 32px; }

    /* hongik-intorduce - 높이 600px 이하 */
    .hongik-intorduce { margin-top: 28px; padding-top: 25px; }
    .hongik-intorduce > .btm-banner-dtl { font-size: 18px; }
    .core-values { width: 85%; gap: 25px; flex-wrap: wrap; }
    .core-value-circle { width: 75px; height: 75px; }
    .core-value-circle::before { width: 95px; height: 95px; }
    .core-value-circle span { font-size: 12px; }

    /* 섹션2, 3 */
    .top-solution { height: 150px; }
    .scrollable-solution { padding-top: 150px; }
    .btm-banner-title { font-size: 12px; }
    .btm-banner-dtl { font-size: 18px; }
    .solution-scroll-content { padding: 30px 5%; }
    .solution-scroll-content img { max-height: 450px; margin: 30px 0; }

    /* 섹션4 */
    .solution-wrapper p { font-size: 18px; margin: 8px 0 30px; }

    /* 섹션5 테이블 */
    .list-dtl-wrap { width: 80%; }
    .list-dtl-wrap table tbody tr th { font-size: 13px; height: 45px; }
    .list-dtl-wrap table tbody tr td { font-size: 12px; height: auto; padding: 8px 6px; }

    /* 푸터 */
    .fifthpage { height: auto; min-height: 130px; padding: 15px 0; }
    .footer-wrap { height: auto; }
    .footer-wrap .footer-company { font-size: 18px; line-height: 140%; }
    .footer-wrap p { font-size: 12px; line-height: 130%; }
    .footer-wrap span { padding-right: 8px; margin-right: 8px; }
}

/* 가로와 세로 모두 작을 때 (모바일 가로모드 등) */
@media screen and (max-width: 768px) and (max-height: 600px) {
    /* 헤더 */
    header { height: 45px; }
    header nav ul li { font-size: 10px; padding: 0 3px; }
    .hd-logo { width: 80px; height: 35px; }

    /* 섹션 높이 */
    .firstpage, .secondpage, .thirdpage, .fourthpage, .fifthpage {
        margin-top: 45px;
        height: calc(100vh - 45px);
    }

    /* 섹션1 */
    .top-banner { height: 150px; display: flex; align-items: center; }
    .company-nm { font-size: 14px; }
    .company-nm-in { font-size: 20px; }
    .firstpage-scroll-content { min-height: calc(100vh + 60px); padding-bottom: 20px; }
    .btm-banner-in { padding: 15px 3%; }
    .btm-banner-process { flex-direction: row; width: 95%; }
    .img-process { width: 60px; height: 60px; }
    .img-process img { max-width: 40px !important; max-height: 40px !important; }
    .img-process-wrap p { font-size: 10px; }

    /* Company Info Section - 모바일 가로모드 */
    .company-info-section { margin-top: 15px; padding-top: 15px; }
    .company-slogan { font-size: 11px; margin-bottom: 6px; }
    .company-vision { font-size: 11px; line-height: 135%; margin-bottom: 15px; }

    /* CEO Greeting Section - 모바일 가로모드 */
    .ceo-greeting-section { margin: 15px auto 0; max-width: 92%; padding: 25px 18px; }
    .ceo-greeting-title { font-size: 16px; margin-bottom: 15px; }
    .ceo-greeting-content { max-width: 100%; gap: 20px; }
    .ceo-photo { width: 120px; height: 150px; border-radius: 8px; }
    .ceo-greeting-text { text-align: center; }
    .btm-banner-in .ceo-greeting-main { font-size: 12px; margin-bottom: 10px; line-height: 140%; text-align: center; }
    .btm-banner-in .ceo-greeting-body { font-size: 11px; margin-bottom: 18px; line-height: 145%; text-align: center; }
    .btm-banner-in .ceo-greeting-signature { margin-top: 18px; text-align: center; padding-right: 0; }
    .ceo-name { font-size: 12px; }

    /* Innovation Section - 모바일 가로모드 */
    .innovation-section { margin-top: 20px; padding-top: 20px; }
    .innovation-title { font-size: 18px; padding: 12px 0; }
    .open-innovation { font-size: 13px; }
    .innovation-subtitle { font-size: 11px; margin-top: 18px; margin-bottom: 8px; }
    .innovation-description { font-size: 11px; margin-top: 20px; margin-bottom: 25px; line-height: 135%; }

    /* hongik-intorduce - 모바일 가로모드 */
    .hongik-intorduce { margin-top: 20px; padding-top: 18px; }
    .hongik-intorduce > .btm-banner-dtl { font-size: 16px; }
    .core-values { width: 95%; gap: 12px; flex-wrap: wrap; }
    .core-value-circle { width: 55px; height: 55px; }
    .core-value-circle::before { width: 70px; height: 70px; }
    .core-value-circle span { font-size: 9px; }

    /* 섹션2, 3 */
    .top-solution { height: 120px; }
    .scrollable-solution { padding-top: 120px; }
    .btm-banner-title { font-size: 10px; }
    .btm-banner-dtl { font-size: 14px; }
    .solution-scroll-content { padding: 20px 3%; }
    .solution-scroll-content img { max-height: 350px; margin: 20px 0; }

    /* 섹션4 */
    .solution-wrapper p { font-size: 14px; margin: 5px 0 20px; }

    /* 섹션5 테이블 */
    .list-dtl-wrap { width: 95%; }
    .list-dtl-wrap table tbody tr th { font-size: 10px; height: 40px; }
    .list-dtl-wrap table tbody tr td { font-size: 10px; padding: 6px 4px; }

    /* 푸터 */
    .fifthpage { height: auto; min-height: 120px; padding: 20px 0; }
    .footer-wrap .footer-company { font-size: 16px; }
    .footer-wrap p { font-size: 10px; }
}

