@font-face {
    font-family: 'Heir of Light'; /* 중요: 여기 적힌 이름을 꼭 확인하세요 */
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-07@1.0/Heir of Light.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'HeirofLightBold';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-07@1.0/HeirofLightBold.woff') format('woff');
    font-weight: 700;
    font-display: swap;
}
/**** 공통 ****/
body {
    -webkit-font-smoothing: antialiased;  /* 크롬, 사파리, 엣지 등 */
    -moz-osx-font-smoothing: grayscale;   /* 파이어폭스 */
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}
#full {background: url('/images/background.jpg') no-repeat center top; min-height: 5000px; min-width: 1920px; }

/**** header ****/
header {position: fixed; width: 100%; max-width: 870px; top: 100px; left: 50%; transform: translateX(-50%); z-index: 100;}
header ul {margin-top: 10px;}
header ul li {display: inline-block;}
header ul li a {font-size: 14px; font-weight: 700; color: white; margin-left: 20px; letter-spacing: 0;}


/**** section_1 ****/
#section_1 {position: relative; width: 100%; height: 1000px;}
#section_1 .ch_1 {position: absolute; top: 75%; left: 35%;}/* 고슴도치 */
#section_1 .ch_2 {position: absolute; top: 25%; right: 30%;}/* 호랑이 */
#section_1 .ch_3 {position: absolute; top: 28%; right: 13%;}/* 글자비 */
#section_1 .ch_4 {position: absolute; top: 60%; right: 35%;}/* 참새 */
#section_1 .ch_5 {position: absolute; top: 52%; right: 52%;}/* 물방울 */
#section_1 .ch_6 {position: absolute; top: 35%; left: -11%;}/* 마녀 */
#section_1 .ch_7 {position: absolute; top: 48%; right: 46%;}/* 새싹 */
#section_1 .ch_8 {position: absolute; top: 7%; left: 18%;}/* 반딧불 */
#section_1 .scroll {position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); z-index: 20;}

#section_2 {padding-top: 100px;}
#section_2 .paper {width: 500px; height: 550px; margin: 0 auto; background: url('/images/section_2_5.png') no-repeat bottom; }
#section_2 .paper li {position: absolute;}
#section_2 .paper li.paper_1 {top: 5%; left: 5%;}
#section_2 .paper li.paper_2 {top: 10%; right: 0%;}
#section_2 .paper li.paper_3 {bottom: 10%; left: 28%;}
#section_2 .whale {position: absolute; right: 20%; bottom: 2%;}

#section_3 {padding-top: 100px;}
#section_3 ul {padding-top: 60px; width: 550px; height: 1000px; margin: 0 auto; position: relative; z-index: 10;}
#section_3 ul li {position: absolute;}
#section_3 ul li.bubble_1 {}
#section_3 ul li.bubble_2 {top: 20%; right: 0;}
#section_3 ul li.bubble_3 {top: 35%; left: 5%;}
#section_3 ul li.bubble_4 {right: 0%; bottom: 20%;}
#section_3 ul li.bubble_5 {left: 0%; bottom: 5%;}

#section_4 {padding-top: 200px;}
#section_4 .counter_wrap {margin-top: 50px;}
#section_4 .counter_wrap li {display: inline-block; position: relative; margin: 0 10px;}
#section_4 .counter_wrap li .text {position: absolute; left: 50%; transform: translateX(-50%); bottom: 90px;}
#section_4 .counter_wrap li .text p {font-size: 13px; color: white;}
#section_4 .counter_wrap li .text h3 {font-size: 24px; color: white; font-family: 'Pretendard-Bold';}
#section_4 .counter_wrap li .text h3 span {color: #4bb9cb;}
#section_4 .map_wrap {margin-top: 60px; position: relative; display: inline-block;}

#section_4 .map_wrap .chr {position: absolute;}
#section_4 .map_wrap .chr.point_1 {bottom: 34%; left: 39%;}
#section_4 .map_wrap .chr.point_2 {bottom: 36%; left: 49%;}
#section_4 .map_wrap .chr.point_3 {bottom: 32%; left: 32%;}
#section_4 .map_wrap .chr.point_4 {bottom: 18%; right: 37%;}

#section_5 {padding-top: 100px; padding-bottom: 150px;}
#section_5 img {display: inline-block;}
#section_5 .video_book {margin: -300px 0 -250px;}
.video_size {position: absolute; width: 360px; left: 50%; transform: translateX(-50%); bottom: 40%;}
.video {position: relative; width: 100%; height: 0; overflow: hidden; padding-bottom: 56.26%;}
.video iframe {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
#section_5 .tabs {margin: 30px 0 20px;}
#section_5 .tabs li {display: inline-block; vertical-align: top; margin: 0 20px; cursor: pointer; opacity: 0.6;}
#section_5 .tabs li.active {opacity: 1;}
#section_5 .tab_container {min-height: 640px;}
#section_5 .gallery-top {max-width: 600px; margin-left: auto; margin-right: auto; position: relative;}
#section_5 .gallery-top img {width: 500px;}
#section_5 .gallery-thumbs {max-width: 600px; margin-top: 30px;  margin-left: auto; margin-right: auto; background: rgba(0,0,0,0.3); border-radius: 20px; padding: 20px 30px; overflow: hidden;}
#section_5 .gallery-thumbs .swiper-slide { width: auto; height: 100%;}
#section_5 .gallery-thumbs img {width: 60px; cursor: pointer; filter: saturate(0.2);}
#section_5 .gallery-thumbs .swiper-slide.active img {filter: saturate(1);}
.swiper-button-next:after, .swiper-button-prev:after {display: none;}
.swiper-button-next, .swiper-button-prev {width: 17px; height: 22px;}


#section_7 {padding-top: 100px;}
.gallery_slide_wrap {max-width: 650px; margin: 50px auto 0;}
.gallery_slide {max-width: 650px;  overflow: hidden; padding: 0 50px;}
.gallery_slide .swiper-slide { width: auto; height: 100%;}
.gallery_slide .swiper-slide img {max-width: 165px;}

.blocker {z-index: 100;}
.modal {max-width: 700px;}


#section_8 {padding: 120px 0;}
#section_9 {padding: 20px 0 50px;}







/* 툴팁 기본 스타일 (숨김 상태) */
.tooltip {
    position: absolute;
    bottom: 100%; /* 이미지 위쪽으로 배치 */
    left: 50%;
    transform: translateX(-50%) translateY(10px); /* 가로 중앙 정렬 + 약간 아래(애니메이션용) */
    
    /* 디자인 */
    background-color: rgba(0, 0, 0, 0.8);
    color: #fff;
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 13px;
    white-space: nowrap; /* 줄바꿈 방지 */
    z-index: 10;
    pointer-events: none; /* 툴팁이 마우스 이벤트를 방해하지 않도록 설정 */
    
    /* 숨김 처리 및 애니메이션 */
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    margin-bottom: 10px; /* 이미지와의 간격 */
}

/* 툴팁 아래 화살표 (선택사항) */
.tooltip::after {
    content: '';
    position: absolute;
    top: 100%; /* 툴팁 바닥 */
    left: 50%;
    transform: translateX(-50%);
    border-width: 6px;
    border-style: solid;
    border-color: rgba(0, 0, 0, 0.8) transparent transparent transparent;
}

/* a 태그에 마우스가 올라가면(+ 인접 형제 선택자) 툴팁 표시 */
.chr_wrap a:hover + .tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0); /* 제자리로 올라오는 효과 */
}