/* pretendard 폰트 */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');





/* ==========================================================================
   1. 기본 및 공통 스타일
   ========================================================================== */
body {
    /* background-color: #f6f7fa; */
}
.home-container {
    /* 스크롤 인터랙션 충돌 방지 */
    /* overflow: hidden;  */
    
    font-family: 'Pretendard', sans-serif;
    color: #111111;
    line-height: 1.4;
}
.home-section {
    padding: 100px 0 0 0;
}
.home-container,
.container {
  background-color: transparent !important;
}
.section-title {
    font-size: 26px;
    font-weight: 600;
    margin-top: 0px;
    margin-bottom: 20px;
}


.home-section#section2 {
    padding: 60px 0 0 0;
}




/* ==========================================================================
   2. 섹션 1: 메인 헤드라인 (상단 고정)
   ========================================================================== */


#section1 {
  position: relative;
  overflow: hidden; /* 가상요소가 밖으로 삐져나오지 않게 */
  overflow: visible !important; /* ✅ 섹션1에서는 보이도록 강제 */

  z-index: 0; /* 배경보다 내용이 위에 오도록 */

  font-family: 'Pretendard', sans-serif;
  color: #111111;
  line-height: 1.4;
  /* height: 500px; */
  height: 450px;
}

#section1::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;     
  /* height: 500px; */
  height: 450px;
  background: linear-gradient(180deg, #F0F4FF 0%, #FFFFFF 100%);
  z-index: -1;        /* 실제 내용 뒤에 배치 */
}


#section1.sticky-header {
    /* position: absolute;  */
    /* top: 0;
    left: 0; */
    width: 100%;
    z-index: 100;
    background: linear-gradient(180deg, #F0F4FF 0%, #FFFFFF 100%);

    /* padding: 80px 0 20px 0; */
    padding: 60px 0 20px 0;
    transition: transform 0.5s ease-in-out;
}
#section1.is-sticky {
    /* position: fixed; 
    transform: translateY(0);
    top: 0;
    left: 0;
    z-index: 100; */
}
/* ▼▼▼ [신규] 상단 고정 헤더가 차지할 공간을 만들어 줄 placeholder 스타일 ▼▼▼ */
.sticky-placeholder {
    display: none; /* 평소에는 숨김 */
}






h1.main-title {
    font-size: 40px;
    text-align: center;
    font-weight: 600;
    margin-top: 0px;
    margin-bottom: 0px;
    line-height: 1.3;
}
.main-title span{
    color: #455BB7;
}

.main-subtitle {
    font-size: 20px;
    text-align: center;
    font-weight: 400;
    /* margin-top: 20px; */
    margin-top: 10px;
    margin-bottom: 3px;
    line-height: 1.4;
}

.main-subtitle span{
    font-weight: 600;
}




.feature-arrow {
    position: absolute;
    top: -70px; /* ▼▼▼ [수정] 박스 위로 더 올리기 위해 값을 조정합니다. */
    left: 50%;
    transform: translateX(-50%);
    width: 24px;
    height: auto;
    opacity: 1;
}

/* ▼▼▼ [핵심] 각 화살표의 각도를 개별적으로 설정 ▼▼▼ */
.feature-box[data-target-section="4"] .feature-arrow{ /* BOOK 화살표 */
    transform: rotate(45deg);
}

.feature-box[data-target-section="3"] .feature-arrow { /* CLINIC 화살표 (중앙) */
    transform: translateX(-50%); /* 회전 없음 */
}

.feature-box[data-target-section="5"] .feature-arrow { /* TOPIC 화살표 */
    transform-origin: bottom left; /* ▼▼▼ 회전 기준점을 왼쪽 아래 꼭짓점으로 변경 ▼▼▼ */
    transform: rotate(-45deg);
}


/* 왼쪽 위치의 박스 내부 화살표 */
.feature-box.position-left .feature-arrow {
    transform: rotate(45deg) !important;
    transform-origin: center !important; /* ▼▼▼ 기본값으로 복원 ▼▼▼ */
}

/* 중앙 위치의 박스 내부 화살표 (활성화 상태) */
.feature-box.position-center .feature-arrow {
    transform: translateX(-50%) !important; /* 회전 없음 */
    transform-origin: center !important; /* ▼▼▼ 기본값으로 복원 ▼▼▼ */
}

/* 오른쪽 위치의 박스 내부 화살표 */
.feature-box.position-right .feature-arrow {
    transform-origin: bottom left !important; /* ▼▼▼ 회전 기준점을 왼쪽 아래 꼭짓점으로 변경 ▼▼▼ */
    transform: rotate(-45deg) !important;
}

/* 활성화 시 짧은 화살표 이미지로 교체 */
.feature-box.active .feature-arrow {
    content: url('https://metamedic.s3.ap-northeast-2.amazonaws.com/home/home_s1_arrow_short.png'); 
    opacity: 1;
    top: -50px;
    left: 50%;
    transform: translateX(-50%) translateY(-10px);
    transform-origin: center;
}

.borderTop{
    position: absolute;
    top: 0px;
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
    height: 6px;
    background-color: #455BB7;
    border-radius: 50px;
    opacity: 1;
}


/* feature-boxes 컨테이너 */
.feature-boxes {
    /* padding-top: calc(72.76px + 4.24px); */
    padding-top: calc(62.76px + 4.24px);

    /* width: 1200px; */

    display: flex;
    justify-content: center;
    /* justify-content: space-between; */
    gap: 24px;
    position: relative;
    /* height: 200px;  */
    align-items: center; /* 세로 정렬 추가 */
    /* height: 350px; */
    height: 280px;
}


/* ▼▼▼ [수정] 고정 대상을 .feature-boxes로 변경합니다. ▼▼▼ */
#section1.is-sticky .feature-boxes {
    position: fixed;
    top: 51.5px; /* 화면 상단에서의 거리 */
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    /* height: 350px; */
    height: 350px;
    z-index: 101;
    padding-top: 0px;
    background: linear-gradient(180deg, #F0F4FF 0%, #FFFFFF 100%);
}




/* ▼▼▼ [핵심] 스크롤 시작 후 absolute로 변경하기 위한 상태 클래스 ▼▼▼ */
.home-section.is-interactive .feature-box {
    position: absolute;
    /* top: calc(72.76px + 4.24px); */
    /* top: calc(62.76px + 4.24px + 51.5px); */
    top: calc(20.76px + 4.24px + 51.5px);
}




/* ▼▼▼ [수정] 플레이스홀더 이름 변경 (선택사항이지만 명확성을 위해 추천) ▼▼▼ */
.feature-boxes-placeholder {
    display: none;
    height: 340px; /* .feature-boxes 높이에 맞춤 */
}




/* feature-box 기본 스타일 */
.feature-box {
    position: relative; /* ▼▼▼ 자식인 화살표의 위치 기준점 */
    /* width: 384px; */
    /* width: calc((100% - 24px - 24px)/3); */
    width: 400px;
    height: 210px;
    border-radius: 20px;
    background-color: #fff;
    /* border: 1px solid #e0e0e0; */
    cursor: pointer;
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 1; /* 초기 상태: 모두 선명 */

    /* padding: 37.5px; */
    padding: 30px;

    display: flex; /* 내부 컨텐츠 정렬을 위해 flex 사용 */
    justify-content: center;
    align-items: center;
    text-align: center;
}




/* ▼▼▼ [핵심] 스크롤 시작 후 적용될 스타일 ▼▼▼ */
.is-interactive .feature-box {
    opacity: 0.5; /* 기본적으로 비활성화 */
}
.is-interactive .feature-box.active {
    /* transform: scale(1.15) translateY(-10px); */
    /* transform: scale(1.15); */

    width: 460px;  /* ▼▼▼ 고정된 확대 너비 ▼▼▼ */
    height: 280px; /* ▼▼▼ 고정된 확대 높이 ▼▼▼ */
    /* ▼▼▼ [수정] 수직 가운데 정렬을 위해 transform을 조정합니다. ▼▼▼ */
    /* top이 0인 상태에서 (280-220)/2 = 30px 만큼 위로 올라가야 수직 가운데 정렬이 됩니다. */
    transform: translateY(-30px); /* 추가 확대량에 맞춰서 조정 */


    opacity: 1; /* 활성화된 박스만 선명하게 */
    z-index: 10;
    /* border-color: #455BB7; */
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}


.is-interactive .feature-box.active .feature-icon{
    width: 46px;
    height: 46px;
    margin-bottom: 4px;
}
.is-interactive .feature-box.active h3{
    font-size: 34px;
}
.is-interactive .feature-box.active .box-desc.box-desc-header{
    font-size: 24px;
}
.is-interactive .feature-box.active .box-desc{
    font-size: 18px;
}



/* ▼▼▼ [신규] 개별 feature-box 색상 및 활성화 시 보더 색상 ▼▼▼ */
.feature-box[data-target-section="4"] { /* BOOK */
    background-color: #EAF8EA; /* 연한 녹색 계열 */
    border-color: #EAF8EA;
}
.feature-box[data-target-section="4"].active {
    border-color: #2B944C; /* BOOK 활성화 색상 (녹색) */
}

.feature-box[data-target-section="4"] h3{
    color: #2B944C;
}
.feature-box[data-target-section="4"] .borderTop{
    background-color: #2B944C;
}

.feature-box[data-target-section="3"] { /* CLINIC */
    background-color: #E3E8F9; /* 연한 파란색 계열 */
    border-color: #E3E8F9;
}
.feature-box[data-target-section="3"].active {
    border-color: #455BB7; /* CLINIC 활성화 색상 (파랑) */
}
.feature-box[data-target-section="3"] h3{
    color: #455BB7;
}
.feature-box[data-target-section="3"] .borderTop{
    background-color: #455BB7;
}


.feature-box[data-target-section="5"] { /* TOPIC */
    background-color: #FDF1E3; /* 연한 주황색 계열 */
    border-color: #FDF1E3;
}
.feature-box[data-target-section="5"].active {
    border-color: #EE730F; /* TOPIC 활성화 색상 (주황) */
}
.feature-box[data-target-section="5"] h3{
    color: #EE730F;
}
.feature-box[data-target-section="5"] .borderTop{
    background-color: #EE730F;
}






/* ▼▼▼ [신규] box-content 내부 스타일 ▼▼▼ */
.feature-box .box-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.feature-box .feature-icon {
    width: 40px; /* 아이콘 크기 */
    height: 40px;
    margin-bottom: 4px; 
}
.feature-box h3 {
    font-size: 30px;
    font-weight: 600;
    margin: 0; 
    color: #455BB7;
    /* margin-bottom: 16px; */
    margin-bottom: 10px;
}
.feature-box .box-desc {
    font-size: 14px;
    color: #767676;
    line-height: 1.4;
    white-space: nowrap; /* 줄바꿈 방지 */

    font-weight: 500;
}

.feature-box .box-desc.box-desc-header {
    /* margin-bottom: 8px; */
    margin-bottom: 4px;
    color: #111111;
    font-size: 20px;
}










/* ▼▼▼ [핵심] 5가지 위치 상태 정의 ▼▼▼ */
.feature-box.position-left {
    transform: translateX(-410px);
    opacity: 0.5;
    z-index: 5;
}
.feature-box.position-center {
    transform: translateX(-50%) scale(1.15);
    opacity: 1;
    z-index: 10;
    border-color: #455BB7;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}
.feature-box.position-right {
    /* transform: translateX(55px) scale(0.9); */
    transform: translateX(410px);
    opacity: 0.5;
    z-index: 5;
}
.feature-box.position-far-left { /* 왼쪽 화면 밖 */
    transform: translateX(-500px) scale(0.8);
    opacity: 0;
}
.feature-box.position-far-right { /* 오른쪽 화면 밖 */
    transform: translateX(500px) scale(0.8);
    opacity: 0;
}
.feature-box.no-transition {
    transition: none; /* 순간이동을 위한 transition 제거 클래스 */
}











/* 활성화된 박스의 스타일 */
.feature-box.active {
    transform: scale(1.15) translateY(-10px);
    opacity: 1;
    z-index: 10;
    /* border-color: #455BB7; */
    /* box-shadow: 0 10px 30px rgba(0,0,0,0.1); */
}

.feature-box.inactive {
    opacity: 0.5;
}



@media (max-width: 1300px){
    .home-section.is-interactive .feature-box{
        width: 350px;
    }
    .is-interactive .feature-box.active{
        width: 400px;
    }

    .feature-box.position-left {
        transform: translateX(-360px);
    }
    .feature-box.position-right {
        transform: translateX(360px);
    }
}
@media (max-width: 1100px){
    .home-section.is-interactive .feature-box{
        width: 330px;
    }
    .is-interactive .feature-box.active{
        width: 380px;
    }
    .feature-box.position-left {
        transform: translateX(-330px);
    }
    .feature-box.position-right {
        transform: translateX(330px);
    }
}
@media (max-width: 1010px){
    #section1, #section1::before{
        height: 400px;
    }

    .home-section.is-interactive .feature-box{
        width: 300px;
        /* height: 210px; */
        height: 180px;
    }
    .is-interactive .feature-box.active{
        width: 350px;
        /* height: 280px; */
        height: 240px;
    }
    #section1.is-sticky .feature-boxes{
        /* height: 350px; */
        height: 310px;
    }
    .feature-box.position-left {
        transform: translateX(-300px);
    }
    .feature-box.position-right {
        transform: translateX(300px);
    }





    .is-interactive .feature-box.active h3{
        font-size: 28px;
    }
    .is-interactive .feature-box.active .box-desc.box-desc-header{
        font-size: 20px;
    }
    .is-interactive .feature-box.active .box-desc{
        font-size: 14px;
    }


    h1.main-title{
        font-size: 30px;
    }
    .main-subtitle{
        font-size: 16px;
    }

    .feature-boxes{
        gap: 12px;
        height: 250px;
    }
    .feature-box{
        width: calc((100% - 12px - 12px)/3);
        height: 180px;
    }
    .borderTop{
        width: 70%;
    }
    .feature-box h3{
        font-size: 24px;
    }
    .feature-box .box-desc.box-desc-header{
        font-size: 16px;
    }
    .feature-box .box-desc{
        font-size: 12px;
    }
}

@media (max-width: 920px){
    .home-section.is-interactive .feature-box{
        width: 28%;
        height: 160px;
    }
    .is-interactive .feature-box.active{
        width: 38%;
        height: 220px;
    }
    #section1.is-sticky .feature-boxes{
        height: 290px;
    }
    .feature-box.position-left {
        transform: translateX(-260px);
    }
    .feature-box.position-right {
        transform: translateX(260px);
    }




}



@media (max-width: 820px){
    .feature-box.position-left {
        transform: translateX(-240px);
    }
    .feature-box.position-right {
        transform: translateX(240px);
    }
}

@media (max-width: 780px){
    #section1, #section1::before{
        height: 370px;
    }
    .feature-boxes{
        padding-top: calc(62.76px + 4.24px - 16px);
        height: 220px;
        gap: 8px;
    }

    .feature-box.active .feature-arrow{
        /* top: -40px; */
    }
    .feature-arrow {
        width: 18px;
        top: -50px;
    }

    .is-interactive .feature-box.active .feature-arrow{
        top: -40px;
    }



    .feature-box{
        height: 160px;
    }
    .feature-box.position-left {
        transform: translateX(-220px);
    }
    .feature-box.position-right {
        transform: translateX(220px);
    }


    .feature-box .feature-icon{
        width: 30px;
        height: 30px;
    }
    .feature-box h3{
        font-size: 20px;
        margin-bottom: 5px;
    }
    .feature-box .box-desc.box-desc-header{
        margin-bottom: 2px;
    }








}


@media (max-width: 768px){


}

@media (max-width: 720px){

    .home-section.is-interactive .feature-box{
        width: 29%;
        height: 160px;
    }
    .is-interactive .feature-box.active{
        width: 285px;
        height: 220px;
    }

    .feature-box.position-left {
        transform: translateX(-220px);
    }
    .feature-box.position-right {
        transform: translateX(220px);
    }

}

@media (max-width: 640px){
    #section1, #section1::before{
        height: 330px;
    }
    #section1.sticky-header{
        padding-top: 50px;
    }
    #section1.is-interactive .feature-boxes{
        height: 250px;
    }
    .feature-boxes{
        padding-top: calc(62.76px + 4.24px - 16px);
        height: 180px;
        gap: 8px;
    }
    h1.main-title{
        font-size: 28px;
    }
    .main-subtitle{
        font-size: 14px;
    }


    .feature-box{
        height: 130px;
    }
    .home-section.is-interactive .feature-box{
        padding: 20px;
        height: 130px;;
    }
    .is-interactive .feature-box.active{
        width: 220px;
        height: 180px;
    }
    .feature-box.position-left {
        transform: translateX(-180px);
    }
    .feature-box.position-right {
        transform: translateX(180px);
    }
    .feature-box .box-desc:not(.box-desc-header){
        display: none;
    }





    
    .is-interactive .feature-box.active .feature-icon{
        width: 40px;
        height: 40px;
    }
    .is-interactive .feature-box.active h3{
        font-size: 24px;
    }
    .is-interactive .feature-box.active .box-desc.box-desc-header{
        font-size: 18px;
    }
    .is-interactive .feature-box.active .box-desc{
        font-size: 12px;
    }






    .is-interactive  .feature-box.active .feature-arrow{
        top: -40px;
    }
    .is-interactive .feature-arrow {
        width: 18px;
        top: -50px;
    }


}






/* @media (max-width: 650px){
    .feature-boxes{
        padding-top: 10px;
        height: 200px;
    }
    .feature-arrow{
        display: none;
    }
} */

@media (max-width: 600px){
    /* #section1{
        height: auto;
    }
    .feature-boxes{
        flex-direction: column;
        justify-content: flex-start;
        height: auto;
    }
     .feature-box{
        width: 100%;
        height: auto;
        padding: 20px 30px;
     }
    h1.main-title {
        font-size: 24px;
    }

    .main-subtitle{
        font-size: 14px;
    } */




/* 
    .feature-box .box-content{
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        gap: 40px;
    }
    .feature-box .box-content .box-img-title{
        width: 71px;
    }
    .feature-box .box-content .box-text-desc{
        width: calc(100% - 40px - 71px);
        text-align: left;
    }

    .feature-box h3{
        margin-bottom: 0px;
    }
    .borderTop{
        display: none;
    } */
    /* .borderTop{
        top: 50%;
        left: 0px;
        transform: translateY(-50%);
        width: 6px;
        height: 70%;
    } */
    /* .feature-box .box-desc.box-desc-header{
        font-size: 20px;
    }
    .feature-box .box-desc{
        font-size: 14px;
    } */
}
@media (max-width: 580px){

}

@media (max-width: 540px){
    #section1.is-interactive .feature-boxes{
        height: 230px;
    }
    .home-section.is-interactive .feature-box{
        padding: 20px;
        height: 110px;
    }
    .is-interactive .feature-box.active{
        width: 220px;
        height: 160px;
    }
    .feature-box.position-left {
        transform: translateX(-170px);
    }
    .feature-box.position-right {
        transform: translateX(170px);
    }

    .is-interactive .feature-box.active .feature-icon{
        width: 40px;
        height: 40px;
    }
    .is-interactive .feature-box.active h3{
        font-size: 20px;
    }
    .is-interactive .feature-box.active .box-desc.box-desc-header, .feature-box.active .box-desc.box-desc-header{
        font-size: 14px;
    }
    .is-interactive .feature-box .box-desc.box-desc-header, .feature-box .box-desc.box-desc-header{
        font-size: 12px;
    }

}
.main-subtitle .mobile-break{
    font-weight: 400;
}
@media (max-width: 510px) {
    .main-subtitle .mobile-break::before {
        content: '\A'; /* 줄바꿈(newline) 문자를 삽입합니다. */
        white-space: pre;  /* 줄바꿈 문자가 실제로 적용되도록 합니다. */
    }
}

@media (max-width: 490px){
    .is-interactive .feature-box.active{
        width: 180px;
        height: 160px;
    }
    .feature-box.position-left {
        transform: translateX(-140px);
    }
    .feature-box.position-right {
        transform: translateX(140px);
    }
}

@media (max-width: 435px){

    #section1, #section1::before{
        height: 295px;
    }
    .feature-boxes {
        padding-top: calc(62.76px + 4.24px - 16px - 11px);
        height: 140px;
    }
    h1.main-title{
        font-size: 24px;
    }

    .feature-arrow {
        width: 14px;
        top: -40px;
    }


    #section1.is-interactive .feature-boxes{
        height: 210px;
    }

    .feature-boxes{
        gap: 4px;
    }
    .feature-box{
        height: 100px;
    }
    .home-section.is-interactive .feature-box{
        width: 125px;
        padding: 20px;
        height: 100px;
        top: calc(20.76px + 4.24px + 51.5px - 10px);
    }
    .is-interactive .feature-box.active{
        top: calc(20.76px + 4.24px + 51.5px);
        width: 160px;
        height: 140px;
    }
    .feature-box.position-left {
        transform: translateX(-120px);
    }
    .feature-box.position-right {
        transform: translateX(120px);
    }




    .feature-box h3{
        font-size: 16px;
    }
    .is-interactive .feature-box.active h3{
        font-size: 18px;
    }
    .is-interactive .feature-box.active .box-desc.box-desc-header, .feature-box.active .box-desc.box-desc-header{
        font-size: 13px;
    }
    .is-interactive .feature-box .box-desc.box-desc-header, .feature-box .box-desc.box-desc-header{
        font-size: 11px;
    }
    .feature-box .feature-icon{
        width: 25px;
        height: 25px;
    }
    .is-interactive .feature-box.active .feature-icon{
        width: 35px;
        height: 35px;
    }

}

@media (max-width: 380px){
    h1.main-title{
        font-size: 22px;
    }
    .home-section.is-interactive .feature-box{
        width: 110px;
    }
    .is-interactive .feature-box.active{
        width: 150px;
    }
    .feature-box.position-left {
        transform: translateX(-110px);
    }
    .feature-box.position-right {
        transform: translateX(110px);
    }


}



/* ==========================================================================
   3. 우측 고정 버튼
   ========================================================================== */
.right-nav {
    position: fixed;
    top: 50%;
    right: 0px;
    transform: translateY(-50%);
    z-index: 101;

    border-radius: 20px 0 0 20px;
    background-color: #FFFFFF;
    box-shadow: -10px 0px 30px rgba(0, 0, 0, 0.06);
    padding: 0px 15px;
}
.right-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.right-nav li {
    border-top: 1px solid #F1F1F5;
}
.right-nav li:first-child{
    border-top: none;
}
.right-nav li a {
    display: block;
    padding: 19px 13.5px ;
    color: #999999;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.3s;
}
.right-nav li a svg{
    width: 40px;
    height: 40px;
    margin-bottom: 2px;
}
.right-nav li a.active {
    color: #111111;
    font-weight: 700;
}

.right-nav a.active svg path {
    stroke: #111111;
}



@media (max-width: 1520px){
    .right-nav {
        display: none;
    }
    
}









/* ==========================================================================
   4. 섹션 2: 수치
   ========================================================================== */

#section2 .section-title{
    margin-bottom: 10px;
}

.stats-boxes {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    padding: 10px; /* ▼▼▼ [핵심] 그림자가 그려질 여유 공간을 추가합니다. ▼▼▼ */
}
.stat-box {
    background-color: #fff;
    padding: 25px;
    border-radius: 16px;
    box-shadow: 10px 10px 30px 0px rgba(0, 0, 0, 0.06);
}

.stat-label {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 4px;
}

.stat-desc { 
    font-size: 16px;
    font-weight: 600;
    color: #767676; 
    margin-bottom: 20px;
}

.stat-number { 
    font-size: 25px; 
    font-weight: 500; 
    margin-bottom: 0px;
}
.stat-number .numberSpan{
    font-size: 50px; 
    font-weight: 400; 
}








/* 홈 화면 - 숫자 통계 박스 내 롤링 배너 스타일 */
.stat-banner-wrap {
    /* 기존 stat-box의 크기와 패딩을 유지하도록 조정 */
    position: relative; /* 자식 슬라이더의 기준점 */
    overflow: hidden; 
    padding: 0; 
    background-color: transparent;

    /* [핵심] 자식 요소가 부모(stat-box)의 높이를 꽉 채우도록 설정 */
    height: 100%; 
    display: flex; /* 내부 슬라이더를 정렬하기 위해 */
}
/* 2. 슬라이드 컨테이너 및 아이템: 높이 100% 상속 */
.banner-slider-container, .slide-item, .slide-item a {
    height: 100%;
    width: 100%;
    display: block;
}

.banner-slider-container {
    /* [수정] transform 관련 transition 제거 */
    display: block; 
    position: relative;
    width: 100%;
    height: 100%;
    /* transform: none; (JS에서 설정하지 않으므로 제거) */
}

/* 3. 이미지 자체: 높이를 부모에 제한하고 비율 유지 */
.stat-banner-img {
    /* [핵심] 높이를 부모 컨테이너(슬라이드 아이템)의 높이에 제한 */
    max-height: 100%; 
    
    /* ▼▼▼ [수정] height: 100% 명시 (높이 상속 강제) ▼▼▼ */
    height: 100%; 
    /* ▲▲▲ [수정 완료] ▲▲▲ */
    
    /* [핵심] 컨테이너 높이에 맞춰지되, 이미지 비율은 유지 */
    /* object-fit: contain;  */

    /* ▼▼▼ [핵심 수정] contain -> cover로 변경 ▼▼▼ */
    /* 이미지가 컨테이너를 채우되, 넘치는 부분(여백)은 잘라냄 */
    object-fit: cover;
    transform: scale(1.4);

    width: 100%; /* 너비는 100%를 유지하며 */
    display: block;
}

.slide-item {
    /* ▼▼▼ [수정] Stacking 및 Fade 효과 적용 ▼▼▼ */
    position: absolute; /* 슬라이드를 겹치게 만듦 */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0; /* 기본적으로 숨김 */
    transition: opacity 0.5s ease-in-out; /* 0.5초 동안 부드럽게 나타남 */

    /* ▼▼▼ [핵심 수정] 숨겨진 슬라이드 클릭 방지 ▼▼▼ */
    pointer-events: none;
}

.slide-item.active { /* 현재 활성화된 슬라이드 */
    opacity: 1; /* 보이게 함 */

    /* ▼▼▼ [추가] 활성화된 슬라이드에만 클릭 허용 ▼▼▼ */
    pointer-events: auto;
}











@media (max-width: 1200px){
    .stats-boxes {
        gap: 20px;
    }
    .stat-number { 
        font-size: 20px; 
    }
    .stat-number .numberSpan{
        font-size: 40px; 
    }
    .stat-banner-img {
        transform: scale(1.2);
    }
}


@media (max-width: 992px){

    .stat-label {
        font-size: 18px;
    }

    .stat-desc { 
        font-size: 14px;
        height: 40px;
        margin-bottom: 10px;
    }



}
@media (max-width: 880px){
    .stat-banner-img {
        transform: scale(1);
    }
}
@media (max-width: 800px){
    .stats-boxes {
        gap: 15px;
    }
    .stat-label {
        font-size: 16px;
    }
    .stat-desc { 
        font-size: 12px;
    }
    .stat-number { 
        font-size: 18px; 
    }
    .stat-number .numberSpan{
        font-size: 30px; 
    }
}


@media (max-width: 775px){
    .stats-boxes {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        padding: 10px; /* ▼▼▼ [핵심] 그림자가 그려질 여유 공간을 추가합니다. ▼▼▼ */
    }

    .stat-box{
        display: flex;
        justify-content: space-between;
        align-items: center;
        box-shadow: 10px 10px 15px 0px rgba(0, 0, 0, 0.06);

        padding: 50px 30px;
    }
    .stat-banner-wrap {
        padding: 0px;
    }

    .stat-desc{
        height: auto;
        margin-bottom: 0px;
    }

    .stat-text{
        width: 116px;
    }
    .stat-number{
        width: calc(100% - 116px - 10px);
        text-align: right;
    }
    .stat-number .numberSpan{
        font-size: 26px;
    }
}

@media (max-width: 630px){

    .stat-box{
        padding: 40px 20px;
    }
    .stat-banner-wrap {
        padding: 0px;
    }

}


@media (max-width: 600px){
    .stat-banner-img {
        transform: scale(1.1);
    }
}

@media (max-width: 565px){
    .stat-box{
        padding: 20px;
        flex-direction: column;
    }
    .stat-banner-wrap {
        padding: 0px;
    }
    .stat-text{
        width: 100%;
    }
    .stat-number{
        margin-top: 10px;
        width: 100%;
    }
}
@media (max-width: 510px){
    .stat-banner-img {
        transform: scale(1.3);
    }
}

@media (max-width: 380px){
    .stat-banner-img {
        transform: scale(1.2);
    }
}
@media (max-width: 360px){
    .stat-banner-img {
        transform: scale(1.1);
    }
}



/* ==========================================================================
   5. 섹션 3: CLINIC
   ========================================================================== */
.clinic-boxes {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    padding: 10px; /* ▼▼▼ [핵심] 그림자가 그려질 여유 공간을 추가합니다. ▼▼▼ */
}
.clinic-box {
    padding: 45px 40px;
    border-radius: 24px;
    box-shadow: 10px 10px 30px 0px rgba(0, 0, 0, 0.06);
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}


.clinic-box:hover {
    cursor: pointer; 
    transform: scale(1.06); /* 제자리에서 3% 확대 */
    color: inherit; 
    text-decoration: none;
}



.clinic-box h4 { 
    font-weight: 600; 
    /* font-size: 20px; */
    font-size: 24px; 
    /* margin-bottom: 12px; */
    margin-bottom: 20px;
    margin-top: 0px;
}
.clinic-box .clinic-box-desc{
    font-size: 15px;
    font-weight: 500;
    height: 105px;
    margin-bottom: 0px;
    color: #767676;
}
.clinic-box .box-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* margin-top: 20px; */
    margin-top: 0px;
}
.clinic-box .btn-link { 
    width: 40px;
    height: 40px;
    background-color: #F7F7FB;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.clinic-box .btn-link img{
    width: 20px;
    height: 20px;
}
.clinic-box .box-img {
    position: relative;
    width: 54px;
    height: 54px;
}
.icon-blur-bg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #455bb7;
  filter: blur(35px);
  opacity: 1;
  z-index: 0;
  width: 30px;
  height: 30px;
}

.clinic-box .box-img img {
    width: 54px;
    height: 54px;
    position: relative;
    z-index: 1;
}
.responsive-br::after {
    content: '\A'; /* CSS에서 줄바꿈을 의미하는 특수 문자 */
    white-space: pre; /* 줄바꿈 문자가 실제로 적용되도록 함 */
}

@media (max-width: 1200px){
    .clinic-box{
        padding: 35px;
    }
    .responsive-br::after {
        content: ' '; /* 줄바꿈 대신 공백으로 처리 */
    }
}
@media (max-width: 880px){
    .clinic-boxes{
        gap: 12px;
    }
    .clinic-box{
        box-shadow: 10px 10px 15px 0 rgba(0, 0, 0, .06);
        padding: 25px;
    }
    .clinic-box h4{
        font-size: 18px;
    }
    .clinic-box .clinic-box-desc{
        font-size: 12px;
    }
    .clinic-box .clinic-box-desc{
        height: 84px;
    }
}
@media (max-width: 768px){
    .clinic-box .btn-link{
        width: 30px;
        height: 30px;
    }
    .clinic-box .box-img img{
        width: 40px;
        height: 40px;
    }
    .clinic-box .box-img{
        width: 40px;
        height: 40px;
    }
}

@media (max-width: 650px){
    .clinic-boxes{
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        gap: 8px;
        padding-top: 0px;
    }
    .clinic-box{
        display: flex;
        justify-content: flex-start; 
        align-items: center;
        width: 100%;
        gap: 20px; 
    }
    .clinic-box .box-content-text {
        order: 2;
    }
    .clinic-box .box-footer {
        order: 1;
    }
    .clinic-box .btn-link{
        display: none;
    }
    .clinic-box .clinic-box-desc{
        height: auto;
    }
    .clinic-box h4{
        margin-bottom: 10px;
    }

}






/* ==========================================================================
   6. 섹션 4 & 5: BOOK / TOPIC
   ========================================================================== */
/* 기존 home.css의 .section_all 관련 스타일 재사용 */
#section4, #section5 {
    /* position: relative; */
}
/* #section4 .arrowDiv, #section5 #topic_list_container {
    position: relative;
}
#section4 .arrow, #section5 .arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    z-index: 10;
}
#section4 .leftArrow, #section5 .leftArrow { left: -40px; }
#section4 .rightArrow, #section5 .rightArrow { right: -40px; } */
#topic_list {
    overflow: hidden;
    height: 353px; /* 2줄 높이에 맞게 조절 */
    margin-bottom: 0px;
    /* padding: 0 20px 0 20px; */
}
#topic_list .topic_ul { transition: transform 0.5s ease-in-out; }

/* 화살표 비활성화 스타일 */
#topic_list_container .arrow.disabled {
    /* opacity: 0.3; */
    cursor: not-allowed;
}



















/* ---------------전체 책 카테고리 + 미출간 책 카테고리: start -----------------*/
section.section_all{
    /* margin-top: 30px; */
}

section.section_notPub{
    margin-top: 70px;
}
@media (max-width: 991px){
    section.section_all{
        /* margin-top: 20px; */
    }
    section.section_notPub{
        margin-top: 40px;
    }
}
@media (max-width: 600px){
    section.section_all{
        /* margin-top: 10px; */
    }
}


section .section_label{
    font-weight: 600;
}


#body .arrowDiv {
    margin: 0px 0px 0px 0px;
	border-radius: 4px;
    display: flex;
	align-items: center;
}

#body .arrowDiv .leftArrow, #body .arrowDiv .rightArrow{
	font-size: 30px;
	color: #424248;
}

#body .arrowDiv .leftArrow:hover, #body .arrowDiv .rightArrow:hover{
	color: grey;
	cursor: pointer;
}


#body .arrowDiv .leftArrow.disabled, #body .arrowDiv .rightArrow.disabled { 
	color: #d6d6d6; 
	cursor: not-allowed;
}


.categoriesImgDiv, .topicsImgDiv{
    display: flex;
    justify-content: space-between;
    align-items: center; 
}
.categoriesImgDiv .arrow, .topicsImgDiv .arrow{
   width: 2%;
}
.categoriesImgDiv .arrow:hover, .topicsImgDiv .arrow:hover{
    color: grey;
    cursor: pointer;
}
#body .arrowDiv {
    width: 92%;
    overflow: hidden;
}


#body .arrowDiv .cate_type{
    color: #828282;
    font-size: 11px;
    margin-top: 5px;
}

#body .arrowDiv .cate_name{
    color: #333333;
    font-size: 13px;
    font-family: Noto Sans KR;
    font-weight: 500;
}



/* --- 대표님폰 s20에서 ul li 불렛으로 표시되면서 flex 미적용되는 오류 -- 디바이스 구별 전에 default값으로 모바일용으로 한번 더 추가해봄: start ------- */

#body .arrowDiv ul {
    margin-bottom: 0px !important;
    padding: 1rem 0;
    width: 100%;

    white-space: nowrap;
    overflow-x: visible;
    -webkit-overflow-scrolling: touch; 
    scroll-snap-type: x mandatory;
    overflow-y: visible;

    display: flex;
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    transform: translate(0, 0);
}

#body .arrowDiv ul li {
    padding-right: 1rem;
    list-style: none;
    user-select: none;
}

#body .arrowDiv ul li .btn {
    display: block;
    -webkit-user-drag: none;
}


#body .arrowDiv ul li .btn img {
    display: block;
    -webkit-user-drag: none;

}

@media (max-width: 900px){
    #body .arrowDiv ul {
        margin-bottom: 0px !important;
        padding: 1rem 0;
        width: 100%;

        white-space: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch; 
        scroll-snap-type: x mandatory;
        overflow-y: hidden;
    }

    #body .arrowDiv ul li .btn {
        padding-right: 6px;
        padding-left: 6px;
    }

    #body .arrowDiv ul li {
        list-style: none;
        display: inline-block;
    }

    #body .arrowDiv ul li .btn img {

    }
}
/* --- 대표님폰 s20에서 ul li 불렛으로 표시되면서 flex 미적용되는 오류 -- 디바이스 구별 전에 default값으로 모바일용으로 한번 더 추가해봄: end ------- */


/* pc */
@media (pointer: fine) {
    #body .arrowDiv ul {
        margin-bottom: 0px !important;
        padding: 1rem 0;
        width: 100%;

        white-space: nowrap;
        overflow-x: visible;
        -webkit-overflow-scrolling: touch; 
        scroll-snap-type: x mandatory;
        overflow-y: visible;

        display: flex;
        -webkit-transform: translate(0, 0);
        -moz-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        -o-transform: translate(0, 0);
        transform: translate(0, 0);
    }

    #body .arrowDiv ul li {
        padding-right: 1rem;
        list-style: none;
        user-select: none;
        display: list-item;
    }

    #body .arrowDiv ul li .btn {
        display: block;
        -webkit-user-drag: none;
    }

    #body .arrowDiv ul li .btn img {
        display: block;
        -webkit-user-drag: none;
    
    }
}






/* 모바일 */
@media only screen and (hover: none) and (pointer: coarse){
    #body .arrowDiv ul {
        margin-bottom: 0px !important;

        white-space: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch; 
        scroll-snap-type: x mandatory;
        overflow-y: hidden;

        padding: 1rem 0;
        width: 100%;
    }

    #body .arrowDiv ul li .btn {
        padding-right: 6px;
        padding-left: 6px;
    }

    #body .arrowDiv ul li {
        list-style: none;
        display: inline-block;

    }
    #body .arrowDiv ul li .btn img {
    }

}

/* pc */
@media (pointer: fine) {
    #body .arrowDiv ul a:hover {
        background-color: #E9E9F4;

    }
}




#body .arrowDiv ul li:first-child {
}


#body .arrowDiv ul li:nth-last-child(1) {
}

#body .arrowDiv ul li a {
	width: 180px;
	height: 235px;
    background-color: #fff;
    color: #333333;
    padding-left: 10px;
    padding-right: 10px;
}

#body .arrowDiv ul li a img {
	margin: 0 auto;
	width: 150px;
	height: 150px;
}
#body .arrowDiv ul li a div.cateInfo {
    white-space:normal;
}


#body .arrowDiv ul li a p {
	position: absolute;
	top: 105px;
	left: 50%;
	transform: translate(-50%);
	width: 110px;
	display: block;
	font-size: 100%;
	white-space: normal;
	font-weight: 500;
	font-family: "Helvetica Neue", "Helvetica", "Arial", "sans-serif";
	/* background-color: blue; */
}

#body .arrowDiv ul a.selectImg {
	border: 2px solid #4582b8;
}
#body .arrowDiv ul::-webkit-scrollbar{
    display: none;
}

@media (max-width: 823px){
    #body .arrowDiv ul li a {
        width: 130px;
        height: 180px;
    }
    #body .arrowDiv ul li a img {
        width: 100px;
        height: 100px;
    }
    #body .arrowDiv .cate_type{
        font-size: 9px;
    }
    #body .arrowDiv .cate_name{
        font-size: 11px;
    }
}
@media (max-width: 610px){

}
@media (max-width: 500px){
    #body .arrowDiv ul li a {
        width: 110px;
        height: 170px;

        padding-left: 7px;
        padding-right: 7px;
    }
    #body .arrowDiv ul li a img {
        width: 90px;
        height: 90px;
    }
    #body .arrowDiv .cate_type{
        font-size: 9px;
    }
    #body .arrowDiv .cate_name{
        font-size: 11px;
    }
}

.arrowDiv li .btn:focus, .arrowDiv li .btn:active, .arrowDiv li .btn.active:focus, .arrowDiv li .btn.focus:focus{
	outline: 0px !important;
	outline-offset: 0px !important;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
}



/* ---------------전체 책 카테고리 + 미출간 책 카테고리: end -----------------*/













/* 책 목록 이미지 로딩 전에 위치 고정 */
.main_row1{
    min-height: 424.04px;
    display: block;
}
.home .allCategories.categoriesImgDiv{
    height: 255px;
}
@media (max-width: 1200px) {
    .main_row1{
        min-height: 392.61px;
    }
}
@media (max-width: 823px) {
    .home .allCategories.categoriesImgDiv{
        height: 200px;
    }
}

@media (max-width: 610px) {
    .main_row1{
        min-height: 232.2px;
    }
}














/* ======== Home Section 3: 책 이미지 + 토픽 이미지 ============ */
section.section_all{
    /* margin-top: 100px; */
    /* margin-bottom: 100px; */
}

.allCategories.categoriesImgDiv{
    all: unset;
    position: relative;
}
.topicsImgDiv{
    position: relative;
}



#body .arrowDiv{
    width: 100%;
}

#body .arrowDiv ul#allCate_ul{
    padding: 0px;
    gap: 24px;

}

.categoriesImgDiv .arrow, .topicsImgDiv .arrow {
    /* all: unset; */
    width: 40px;
    position: absolute;
    top: 180px;
    transform: translateY(-50%);
    cursor: pointer;
    z-index: 10;
    background-color: none;
}
.leftArrow {
    left: -20px;
    /* left: 0px; */
}

.rightArrow {
    right: -20px; 
    /* right: 0px;  */
}
.leftArrow svg,
.rightArrow svg {
    filter: none !important;
}

.leftArrow, .rightArrow{
    background-color: none;
}
.leftArrow svg, .rightArrow svg{
    background-color: none;
    fill: #FFF;
    filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.25));
}


#body .arrowDiv ul li{
    padding-right: 0px;
}

/* .book-item-container: 책 항목 전체를 감싸는 컨테이너 */
.book-item-container,
.book-item-container * {
    box-sizing: border-box;
}

/* .book-item-container: 항목을 감싸는 전체 div */
#body .arrowDiv ul li.book-item-container {
    display: flex;
    flex-direction: column;
    /* gap: 20px; */
    gap: 15px;
    align-items: center;
    justify-content: flex-start;
    width: 282px;
    position: relative;
}

#body .arrowDiv ul li.book-item-container:hover{
    cursor: pointer;
}

/* .book-item-content: 이미지 및 내용을 감싸는 div */
.book-item-content {
    background: #95c4d6;
    border-radius: 24px;
    /* padding: 59px 40px 59px 40px; */
    padding: 40px;
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: center;
    justify-content: flex-start;
    align-self: stretch;
    flex-shrink: 0;
    /* height: 360px; */
    height: 320px;
    position: relative;
}


.book-item-content.bg-color-1 {
    background: #95c4d6;
}
.book-item-content.bg-color-2 {
    background: #66b0b2;
}
.book-item-content.bg-color-3 {
    background: #4d79a0;
}
.book-item-content.bg-color-4 {
    background: #d57651;
}


.book-img-group {
    flex-shrink: 0;
    /* width: 202px; 
    height: 240px;  */
    width: 186px; 
    height: 220px; 
    position: relative; 
    display: flex;
    justify-content: center; 
    align-items: center;
}

img.book-img {
    max-width: 100%; 
    /* max-height: 240px; */
    max-height: 220px;
    height: auto; 
    width: auto;
    object-fit: contain; 
    box-shadow: 10px 10px 15px 0px rgba(0, 0, 0, 0.25); 
}

/* .book-info-container: 책 정보 부분을 감싸는 div */
.book-info-container {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: flex-start;
    justify-content: flex-start;
    width: 100%;
}

/* .book-series: 카테고리 타입 */
.book-series {
    width: 100%;
    color: #767676;
    text-align: center;
    font-size: 14px;
    line-height: 140%;
    letter-spacing: -0.02em;
    font-weight: 600;
    position: relative;
}

/* .book-name: 책 이름 */
.book-name {
    width: 100%;
    color: #111111;
    text-align: center;
    font-size: 16px;
    line-height: 140%;
    letter-spacing: -0.02em;
    font-weight: 400;
    position: relative;


    word-wrap: break-word; /* 긴 단어를 강제로 다음 줄로 넘김 */
    word-break: break-word; /* 텍스트가 박스 너비를 초과하면 줄 바꿈 */
    white-space: normal; /* 줄 바꿈을 허용 */
}











/* new 모바일 반응형(250123) */


@media (max-width: 992px) {

    #body .arrowDiv ul#allCate_ul{
        gap: 12px;
    }
    #body .arrowDiv ul li.book-item-container {
        gap: 8px;
        width: 156px;
    }
    .book-item-content {
        padding: 20px 18px 20px 18px;
        gap: 10px;
        height: 198px;
    }
    .book-img-group {
        flex-shrink: 0;
        width: 120px;
        height: 132px;
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    img.book-img {
        max-width: 100%;
        max-height: 132px;
        height: auto;
        width: auto;
        object-fit: contain;
        box-shadow: 10px 10px 15px 0 rgba(0, 0, 0, .25);
    }
    .section_all .categoriesImgDiv .arrow{
        top: 100px;
    }
    .book-series{
        font-size: 10px;
    }
    .book-name{
        font-size: 12px;
    }

    .home #topic_list{
        margin-top: 50px;
        padding-top: 50px;
        border-top: 4px solid #f6f7fa;
        border-radius: 0;
    }

    .categoriesImgDiv .arrow{
        top: 117px;
    }


}


@media (max-width: 880px) {
    .home .section_2{
        flex-direction: column;
    }
    .home .section_2 .popular-content, .home .section_2 .notice-section{
        width: 100%;
    }
    .home .section_2 .notice-section{
        padding-top: 44px;
        border-top: 4px solid #f6f7fa;
        border-radius: 0;
    }


}

@media (max-width: 768px) {
    #all_category_images {
        flex-direction: row;
    }

    #topic_list{
        /* overflow: hidden;
        height: 183px; */
        height: 100%;
        margin-bottom: 0px;
    }
    
    #topic_list_container .leftArrow, #topic_list_container .rightArrow{
        display: none;
    }

    #body #topic_list .topic_ul {
        padding-top: 10px;
        padding-bottom: 10px;
    }

}


@media (max-width: 560px) {
    #topic_list{
        /* overflow: hidden;
        height: 150px; */
        margin-bottom: 0px;
    }
}


@media (max-width: 480px) {
    .home .section_2{
        margin-top: 32px;
        gap: 0px;
    }
    .home .section_2.section_posts{
        gap: 44px;
        margin-bottom: 60px;
    }
    .home .section_2 .popular-content{
        margin-bottom: 32px;
        padding: 20px 15px;
    }
    .home .section_2 .notice-section{
        padding-top: 26px;
        border-top: 4px solid #f6f7fa;
        border-radius: 0;
    }
    section.section_all{
        /* margin-top: 32px; */
    }
    .content-header{
        margin-bottom: 11px;
    }
    .content-item{
        padding: 8px 18px;
    }

    .content-header, .notice-header a{
        font-size: 16px;
    }
    .content-title, .notice-title, .notice-type{
        font-size: 14px;
    }
    .notice-row{
        padding: 12px 0px;
        gap: 10px;
    }
    .notice-title{
        width: calc(100% - 41px - 70px - 10px - 10px);
    }


    #topic_list {
    }
    .home #topic_list{
        margin-top: 32px;
        padding-top: 32px;
        margin-bottom: 32px;
    }
    .twoBanner{
        margin-top: 32px;
        margin-bottom: 32px;
    }
    .section_contents{
        margin-top: 32px;
        margin-bottom: 32px;
    }
    #body #maincontents #contents{
        margin-top: 12px;
    }
}





/* 이 부분 때문에 팝업창 우측으로 움직였음 (-20px) */

@media (max-width: 880px) {
    .section_all .leftArrow {
        position: absolute;  
        /* left: -20px; */
        /* left: 0px;  */
        top: 50%;
        transform: translateY(-50%); 
    }

    .section_all .rightArrow {
        position: absolute; 
        /* right: -20px; */
        /* right: 0px;  */
        top: 50%;
        transform: translateY(-50%); 
    }

}
















/* ==========================================================================
   7. 섹션 6: 미리보기
   ========================================================================== */
.preview-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}
#body #maincontents #contents{
    margin-top: 0px;
}

#section6 .preview-header .section-title{
    margin-bottom: 0px;
}

.preview-tabs .tab {
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    color: #767676;
}
.preview-tabs .tab.active {
    color: #455BB7;
}
.preview-tabs .tab:hover, .preview-tabs .tab.active:hover{
    color: #111111;
}
.content-preview-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

#body #contents{
    gap: 24px;
    row-gap: 24px;
}

#body #maincontents:not(.isListView) .content .content_data{
    height: 200px;
}

::-webkit-scrollbar { /*  스크롤 전체*/
	-webkit-appearance: none;
	width: 15px;
	height: 15px;
}
#toc::-webkit-scrollbar, .textimg::-webkit-scrollbar {
    display: block !important;
}

#body #contents .content .text .toc_view.texthasimg #toc { 
    scrollbar-width: auto;          /* Firefox 기본값 */
    -ms-overflow-style: auto;       /* IE/Edge 기본값 */
    padding-right: 10px; 
}

#body #contents .content .text .toc_view:not(.texthasimg) #toc {
    scrollbar-width: auto;          /* Firefox 기본값 */
    -ms-overflow-style: auto;       /* IE/Edge 기본값 */
}

/* 크롬/사파리용 (웹킷 기반 브라우저) */
#body #contents .content .text .toc_view:not(.texthasimg) #toc::-webkit-scrollbar {
    display: block;
}





#body #contents #toc {
    height: 176px;
}
#body #contents .content .text .textimg{
    height: 176px;
}
#body #contents #toc, #body #maincontents:not(.isListView) #contents #toc{
    height: 176px;
}
#body #maincontents:not(.isListView) #toc-container {
    height: 176px;
}
#body #contents .content .text .textimg, #body #contents .content .text .textimg, #body #maincontents:not(.isListView) #contents .content .text .textimghasimg{
    height: 176px;
}



@media (max-width: 1200px){
    #body #contents #toc {
        height: 176px;
    }
    #body #contents .content .text .textimg{
        height: 176px;
    }

}
@media (max-width: 992px) {
    .preview-header{
        display: block;
    }
    .preview-tabs{
        margin-top: 10px;
        text-align: right;
    }
}

@media (max-width: 880px) {
    #body #contents #toc, #body #maincontents:not(.isListView) #contents #toc{
        height: 176px;
    }
    #body #contents .content .text .textimg, #body #contents .content .text .textimg, #body #maincontents:not(.isListView) #contents .content .text .textimghasimg{
        height: 176px;
    }

}
@media (max-width: 660px) {
    #body #maincontents:not(.isListView) #toc-container {
        height: 176px;
    }
    #body #contents .content .text .textimg, #body #contents .content .text .textimg, #body #maincontents:not(.isListView) #contents .content .text .textimghasimg{
        height: 176px;
    }

}










#preview-slider-wrapper .arrow {
    display: none;
}


#body #maincontents #contents{
    margin-left: 0px;
    margin-right: 0px;
    /* padding-left: 20px;
    padding-right: 20px; */

    padding-top: 10px;
    padding-bottom: 10px;
}


@media (max-width: 1200px) {


    #preview-slider-wrapper {
        position: relative;
    }

    /* 콘텐츠를 담는 컨테이너 */
    .preview-scroll-container {
        overflow-x: auto; /* 가로 스크롤 활성화 */
        -webkit-overflow-scrolling: touch; /* 모바일에서 부드러운 스크롤 */
        /* IE and Edge  스크롤바 숨김*/
        -ms-overflow-style: none; 
        /* Firefox 스크롤바 숨김 */
        scrollbar-width: none; 
    }
    .preview-scroll-container::-webkit-scrollbar {
        /* Chrome, Safari 스크롤바 숨김 */
        display: none; 
    }

    /* 콘텐츠 트랙: 콘텐츠들을 가로로 나열 */
    #contents.content-preview-track {
        display: flex;
        width: max-content; /* 콘텐츠 너비만큼 자동으로 늘어남 */
        gap: 24px;
    }

    /* 각 콘텐츠 아이템의 너비 고정 */
    #contents.content-preview-track .content {
        width: 360px; /* 원하는 카드 너비로 조절 */
        flex-shrink: 0; /* 카드가 찌그러지지 않도록 함 */
    }

    #body #contents .content, #body #maincontents:not(.isListView) #contents .content{
        width: 360px; 
        flex-shrink: 0;
    }


    /* 화살표 버튼 위치 */
    #preview-slider-wrapper .arrow {
        display: block;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        cursor: pointer;
        z-index: 10;
    }
    #preview-slider-wrapper .left-arrow { left: -20px; }
    #preview-slider-wrapper .right-arrow { right: -20px; }
}

@media (max-width: 880px) {
    #contents.content-preview-track, #body #maincontents:not(.isListView) #contents {
        display: flex;
        width: max-content; /* 콘텐츠 너비만큼 자동으로 늘어남 */
        gap: 24px;
    }

}
@media (max-width: 600px) {
    #contents.content-preview-track .content {
        width: 310px; /* 원하는 카드 너비로 조절 */
        flex-shrink: 0; /* 카드가 찌그러지지 않도록 함 */
    }

    #body #contents .content, #body #maincontents:not(.isListView) #contents .content{
        width: 310px; 
        flex-shrink: 0;
    }
}











/* ==========================================================================
   8. 섹션 7 & 8: 구독하기, 게시판
   ========================================================================== */


/* --------------- 섹션 7: 구독하기 -----------------*/
#section7 {
    padding: 100px 0 0 0;
}

.subscription-slider {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0px;
}

.subscription-wrapper {
    width: 100%;
    /* overflow: hidden; */

    overflow-x: auto; /* [수정] hidden -> auto로 변경하여 가로 스크롤 활성화 */
    overflow-y: hidden;

    /* 네이티브 스크롤바 숨기기 (디자인을 위해) */
     /* IE and Edge */
    -ms-overflow-style: none; 
    /* Firefox */
    scrollbar-width: none;  
}
/* Chrome, Safari, Opera용 스크롤바 숨기기 */
.subscription-wrapper::-webkit-scrollbar {
    display: none;
}

.subscription-track {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    transition: transform 0.5s ease-in-out;
    /* padding: 0px 30px 20px 30px; */
    padding: 0px 0px 20px 0px;

}

.subscription-card {
    /* flex: 0 0 calc(100% / 3 - 24px);  */
    margin: 10px 12px;
    padding: 30px;
    width: 372.66px;
    height: 378px;;
    background-color: white;
    border: 1px solid #DADADA;
    border-radius: 16px;
    box-shadow: 10px 10px 30px 0px rgba(0, 0, 0, 0.06);
    /* text-align: center; */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.subscription-card.highlight {
    border: 2px solid #455BB7;
    box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.06);

    padding: 40px 30px;
    width: 382.66px;
    height: 398px;
    /* transform: scale(1.05); */
    z-index: 5;
}

.card-label {
    display: inline-block;
    text-align: left;
    padding: 6px 12px;
    font-size: 14px;
    font-weight: 500;
    color: #767676;
    background-color: #F1F1F5;
    border-radius: 8px;
    margin-bottom: 12px;
}

.card-title {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 24px;
    margin-top: 0px;
}

.card-features {
    list-style: none;
    padding: 0;
    text-align: left;
    height: 126px;
    box-sizing: border-box;
    margin-bottom: 40px;
}

.card-features li {
    font-size: 15px;
    padding: 10px 0px 10px 30px;
    position: relative;
}

.card-features li::before {
   content: ''; /* content 속성은 비워두지만, 반드시 유지해야 합니다. */

    /* 이미지 아이콘을 위한 스타일 추가 */
    display: inline-block;

    width: 18px;
    height: 18px;

    background-image: url('https://metamedic.s3.ap-northeast-2.amazonaws.com/home/home_s7_check.svg');
    background-size: contain; /* 아이콘이 영역 안에 맞도록 크기 조절 */
    background-repeat: no-repeat;
    background-position: center;

    /* 기존 위치 조절 스타일은 그대로 사용하거나 미세 조정합니다. */
    position: absolute;
    left: 0px; /* li의 padding-left(30px) 안에서 왼쪽 여백을 줍니다. */
    top: 50%;
    transform: translateY(-50%);
}

.card-button {
    display: block;
    width: 100%;
    box-sizing: border-box; /* 이 줄을 추가하세요 */
    padding: 15px;
    font-size: 18px;
    font-weight: 600;
    color: #ffffff;
    background-color: #5E5E5E;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.card-button:hover {
    background-color: #4A4A4A;
}

.subscription-card.highlight .card-button {
    background-color: #455BB7;
    color: #ffffff;
}
.subscription-card.highlight .card-button:hover {
    background-color: #3A4D99;
}


/* 화살표 스타일 */
.sub-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    z-index: 10;
}
.sub-left-arrow {
    left: -20px;
}
.sub-right-arrow {
    right: -20px;
}
.sub-arrow.disabled {
    /* opacity: 0.3; */
    cursor: not-allowed;
}
.subscription-card:first-child{
    margin-left: 0px;
}



.subscription-slider {
    position: relative;
}
.subscription-wrapper {
    display: flex;
    gap: 20px;
    /* overflow: hidden; */
}












/* 반응형 웹 디자인 */
@media (max-width: 1200px) {
    .subscription-card{
        padding: 20px;
        box-shadow: 10px 10px 15px 0 rgba(0, 0, 0, .06);
        width: 300px;
        height: 350px;
    }
    .subscription-card.highlight{
        padding: 20px;
        box-shadow: 10px 10px 15px 0 rgba(0, 0, 0, .06);
        width: 300px;
        height: 350px;
    }

    .card-label{
        font-size: 12px;
    }
    .card-title{
        font-size: 18px;
        height: 39px;
        margin-bottom: 6px;
    }
    .card-features{
        height: 140px;
        margin-bottom: 20px;
    }
    .card-features li{
        font-size: 14px;
        padding: 5px 0 5px 30px;
    }
    .card-button{
        font-size: 14px;
        padding: 12px;
    }
    
    .subscription-card {
        flex-shrink: 0;
    }
    .subscription-card.highlight {
         transform: scale(1); /* 모바일에서는 확대 효과 제거 */
    }
}
@media (max-width: 991px) {

    /* .subscription-track {
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        padding-bottom: 20px; 
    }
    .subscription-track::-webkit-scrollbar {
        display: none;
    } */

}

@media (max-width: 480px) {
    .card-title{
        font-size: 16px;
        height: 39px;
        margin-bottom: 6px;
    }
    .card-features li{
        font-size: 13px;
        padding: 5px 0 5px 30px;
    }
    .subscription-card{
        width: 290px;
        padding: 15px;
    }
    .subscription-card.highlight{
        width: 290px;
        padding: 15px;
    }
}







/* ======== Home Section 2: 인기 콘텐츠 + 공지사항 ============ */

#section8 .board-grid{
    display: flex;
    justify-content: space-between;
    gap: 44px; /* 사이 간격 44px 설정 */

    padding-bottom: 100px;
  }
  

  #community-board{

  }


.board-column .board-title {
    font-size: 20px;
    font-weight: 600;
}
.board-column .board-list {
    list-style: none;
    padding: 0;
    margin-top: 20px;
}



  #community-board,
  .notice-section {
    width: calc(50% - 22px);
    background: #ffffff;
    border-radius: 16px;
    /* padding: 24px 0px; */

  }


  .content-header {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 17px;
    text-align: center;
  }
  
  .content-header .highlight {
    color: #e20000;
  }
  
  .content-list {
    display: flex;
    flex-direction: column;
    /* gap: 10px; */
  }
  
  .content-item {
    display: flex;
    align-items: center;
    /* padding: 10px; */
    padding: 10px 30px;
    background: #f7f8fa;
    border-radius: 16px;
  }
  a.content-item:hover, a.content-item:hover .content-title{
    text-decoration: none;
    color: var(--main-color);
  }

  .content-title{
    color: #111111;
    text-align: left;
    font-size: 16px;
    line-height: 140%;
    letter-spacing: -0.02em;
    font-weight: 400;
    position: relative;
    /* width: 251px; */

    white-space: nowrap; /* 한 줄로 표시 */
    overflow: hidden; /* 넘치는 텍스트 숨김 */
    text-overflow: ellipsis; /* 숨겨진 텍스트를 "..."으로 표시 */
  }





  .rank-wrapper {
    position: relative;
    margin-right: 15px;
  }
  
  .rank {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ebb800;
    color: #ffffff;
    font-size: 24px;
    font-weight: bold;
    border-radius: 50%;
    position: relative;
    z-index: 2; 
  }
  
  .icon {
    position: absolute;
    bottom: -8px; /* 아이콘이 동그라미 아래쪽으로 살짝 보이도록 조정 */
    left: 50%; /* 아이콘을 원의 중앙에 위치시키기 위한 설정 */
    transform: translateX(-50%); /* 가로 중심 맞추기 */
    z-index: 1; /* 동그라미보다 위로 보이도록 설정 */
    width: 14px; /* 아이콘 크기 조정 */
    height: auto;
    pointer-events: none; /* 아이콘에 클릭 이벤트가 전달되지 않도록 설정 */
  }
  
  


  .rank {
    z-index: 2; 
    display: flex;
    justify-content: center;
    align-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    font-weight: bold;
    color: white;
    text-align: center;

    color: var(--white-color);
    text-align: center;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 140%; /* 19.6px */
    letter-spacing: -0.35px;
  }
  
  /* 각각 다른 배경색 */
  .rank-1 {
    background-color: var(--yellow-color-rank); /* CSS 변수 사용 가능 */
  }
  
  .rank-2 {
    background-color: var(--grey-color-rank);
  }
  
  .rank-3 {
    background-color: var(--brown-color-rank);
  }
  
  /* 원 없는 스타일 */
  .rank.no-circle {
    background: none;

    color: var(--main-color);;
    text-align: center;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 140%; /* 19.6px */
    letter-spacing: -0.35px;
  }


  .content-title {
    font-size: 16px;
    color: #111111;
  }
  
  .notice-section {
    flex: 2;
  }
  
  .notice-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
  }

  .notice-header a {
    font-size: 20px;
    font-weight: 600;
    text-decoration: none;
    color: #111111;
    /* margin-bottom: 15px; */
    display: block;

    color: #111111;
    font-size: 20px;
    line-height: 140%;
    letter-spacing: -0.02em;
    font-weight: 500;
    position: relative;
  }



  .notice-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
    align-items: center;
  }
  .notice-buttons button{
    font-size: 16px;
    font-weight: 500;
    line-height: 140%;
    color: #767676;
}

.notice-buttons button.active {
    color: #455BB7;
}
.dil_span{
    color: #767676;
    margin-right: 6px;
    margin-left: 6px;
}
/* 
.btn-all {
    background: #455bb7;
    color: #ffffff;    
}

.btn-event {
    background: #e8ecf8;
    color: #455bb7;
} */

/* .btn-notice {
    background: #e8ecf8;
    color: #455bb7;
    border-radius: 8px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 140%;
    letter-spacing: -0.025em;
    font-weight: 500;
    border: none;
    cursor: pointer;
} */

.notice-buttons button:hover,
.notice-buttons button.active:hover {
    color: #111111;
}

.notice-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
  
/* .notice-item {
    padding: 10px;
    border-bottom: 1px solid #ddd;
    font-size: 14px;
    color: #333333;
}

.notice-item:last-child {
    border-bottom: none;
} */


.notice-item {
    display: flex;
    flex-direction: column;
    /* margin-bottom: 15px; */
}

/* 공지사항 한 줄의 레이아웃 */
.notice-row {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    align-items: center;
    padding: 18px 0px;
    border-bottom: 1px solid var(--grey-border-color2);
}

.notice-row:hover{
    cursor: pointer;
}

.notice-row:hover .notice-title{
    color: var(--main-color);
}

/* 공지사항 유형(이벤트/공지) */
.notice-type {
    width: 41px;
    color: #999999;
    text-align: left;
    font-size: 16px;
    line-height: 140%;
    letter-spacing: -0.02em;
    font-weight: 400;
    position: relative;
}

/* 공지사항 제목 */
.notice-title {
    width: calc(100% - 41px - 70px - 20px - 20px);
    color: #111111;
    text-align: left;
    font-size: 16px;
    line-height: 140%;
    letter-spacing: -0.02em;
    font-weight: 400;
    position: relative;

    white-space: nowrap; /* 한 줄로 표시 */
    overflow: hidden; /* 넘치는 텍스트 숨김 */
    text-overflow: ellipsis; /* 숨겨진 텍스트를 "..."으로 표시 */
}

/* 공지사항 날짜 */
.notice-date {
    width: 70px;
    color: #999999;
    text-align: left;
    font-size: 12px;
    line-height: 140%;
    letter-spacing: -0.02em;
    font-weight: 400;
    position: relative;
}




@media (max-width: 880px) {
    #section8 .board-grid {
        flex-direction: column;
    }
    #community-board, .notice-section{
        width: 100%;
    }
}































/* --------------- 고정 스크롤 navSection --------------- */

/* 1. 평소에는 로고를 숨깁니다. */
.navSection .sticky-logo {
    display: none;
}

.navSection .sticky-logo {
    opacity: 0;
    transition: opacity 0.2s ease-in-out; /* 자연스럽게 나타남 */
}

/* 2. navSection이 고정될 때 적용될 스타일 */
.navSection.is-sticky-nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #FFFFFF;
    /* box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); */
    z-index: 1000;


    font-size: var(--font-size);
    color: var(--black-color);
    line-height: 140%;
    letter-spacing: -.02em;
    font-weight: 500;
    border-bottom: 1px solid var(--grey-border-color2);
}

/* 3. 고정되었을 때, 숨겨둔 로고를 보여줍니다. */
.navSection.is-sticky-nav .sticky-logo {
    display: block;
    opacity: 1;
}




.navSection.is-sticky-nav .sticky-logo img.full_name_logo {
    width: 15.8rem;
    height: 3.3rem;
}
.navSection.is-sticky-nav .sticky-logo img.m_name_logo {
    display: none;
    width: 35px;
    height: 35px;
}
/* 4. 고정되었을 때, 내부 레이아웃을 flex로 조정합니다. */
.navSection.is-sticky-nav .navSection_flex {
    display: flex;
    justify-content: flex-start;
    gap: 70px;
    /* gap: 40px; */
    align-items: center;
    /* padding-left: 10px; */
}


@media (max-width: 768px) {
    .navSection.is-sticky-nav .sticky-logo img.full_name_logo {
        display: none;
    }
    .navSection.is-sticky-nav .sticky-logo img.m_name_logo {
        display: block;
        width: 35px;
        height: 35px;
    }
    .navSection.is-sticky-nav .navSection_flex {
        gap: 25px;
        padding-left: 10px;
    }
    .navSection .sticky-logo{
        width: 40px;
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }
    .navSection.is-sticky-nav .navbarHeader{
        width: calc(100% - 40px - 25px);
    }
    
}



/* 5. 고정되었을 때, 불필요한 오른쪽 메뉴를 숨깁니다. */
.navSection.is-sticky-nav .rightNav {
    display: none !important;
}









  /* 위로가기 버튼 */
  #moveTop{  
    display: none; /* [추가] 처음에는 숨겨둡니다. */

    z-index: 1000 !important;

    position: fixed;
    bottom: 30px;
    right: 30px;

    border-radius: 50px;
    width: 52px;
    height: 52px;
    overflow: hidden;

    fill: #FFF;
    filter: drop-shadow(0px 0px 15px rgba(0, 0, 0, 0.10));
}


@media (max-width: 992px) {
	#moveTop{  
		bottom: 34px;
		right: 20px;
	}
	#memoFixedBtn_div {
		bottom: 34px;
		right: 80px;
	}
}




















@media (max-width: 992px){
    .home-section>.container{
        width: 100% !important;
        margin: 0px;
        padding: 0px;
    }


    .leftArrow, .sub-left-arrow, #preview-slider-wrapper .left-arrow {
        left: -10px;
    }

    .rightArrow, .sub-right-arrow, #preview-slider-wrapper .right-arrow {
        right: -10px; 
    }

    #all_category_images, #topic_list, .subscription-wrapper, .preview-scroll-container {
        padding: 0px 10px 0px 10px;
    }

}






@media (max-width: 768px){
    .home-section .section-title{
        font-size: 20px;
    }
    .home-section#section3 .section-title{
        margin-bottom: 10px;
    }
}

@media (max-width: 600px){
    /* .home-section#section3{
        padding-top: 40px;
    } */
    .home-section#section2{
        padding-top: 40px;
    }
}


@media (max-width: 480px) {
    .navSection.is-sticky-nav #navbar .navbar-nav>li {
        /* padding: 11px 4px 11px 4px;
        margin: 0;
        margin-right: 16px; */

        margin-right: 40px;
        padding: 0px;
        /* padding-bottom: 14px; */
        padding-bottom: 12px;
        /* margin-top: 14px; */
        margin-top: 16px;
    }
}