/* layout.html에서 실제 사용되는 홈 스타일만 유지 */
.area_homebox { display: none; margin: 0; padding: 0; box-sizing: border-box; } 
.area_homebox .container { width: 100%; max-width: 1260px; padding: 0; margin: 0 auto; display: flex; justify-content: center; flex-direction: column; } 
html { scroll-behavior: smooth; } 
body { font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif; font-weight: 400; } 
#tt-body-index { background-color: #F9F2ED; } 
.area_homebox.homebox1 { display: block; } 
.area_homebox.homebox1 .container { justify-content: center; padding: 105px 0 0 0; } 
.hero_home { display: flex; flex-direction: column; justify-content: space-between; box-sizing: border-box; padding-top: clamp(32px, 6vw, 56px); padding-bottom: clamp(40px, 8vw, 72px); padding-left: clamp(20px, 4vw, 48px); padding-right: clamp(20px, 4vw, 48px); font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif; } 
.area_homebox.homegallery { display: block; } 
.area_homebox.homegallery .container { padding:35px 0 0px 0; } 
.area_homebox.homedonation { display: block; } 
.contact_container { display: flex; flex-direction: row; gap: 40px; align-items: center; justify-content: flex-start; width: 100%; box-sizing: border-box; } 
.area_homebox h2 { font-weight: 500; font-size: clamp(26px, 3vw, 32px); margin: 0px 0 20px 0; } 
.area_homebox h2 > a i { font-size: 26px; margin-left: 10px; } 
.area_homebox h2 > a {display: inline-flex; align-items: center; color: #9c7062; line-height: 1;} 
.area_homebox h2 > a:hover { color: #bf7540; } 
.box_header { display: flex; width: 100%; max-width: 1260px; margin: 0 auto; position: absolute; top: 0; left: 0; right: 0; height: 100px; align-items: center; justify-content: space-between; } 
.box_header .title_logo { position: relative; top: 0; display: flex; -ms-display: flexbox; padding-left: 5px; display: -webkit-flex; flex-direction: column; justify-content: center; width: 30%; height: 60px; margin: 0; } 
.box_header .btn_instagram { position: absolute; top: 50%; right: 49px; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px;
   margin-top: -17px; color: #666; font-size: 21px; line-height: 1; text-decoration: none; transition: color .2s ease-out; } 
.box_header .btn_instagram:hover { color: #333; } 
.white .box_header .btn_instagram { color: #fff; transition: opacity .2s ease-out; } 
.white .box_header .btn_instagram:hover { color: #fff; } 
.homegallery h2 a, .contact_container h2 a { font-size: 22px; font-weight: 600; letter-spacing: -0.5px; } 
.homegallery .more { display: flex; align-items: center; justify-content: center; width: fit-content; min-width: 108px; height: 42px; 
 margin: 0px auto; padding: 0 30px; border: 1px solid #cfc7bf; border-radius: 999px; background-color: transparent; color: #5f5549; font-size: 14px; font-weight: 400; line-height: 1; text-decoration: none; transition: all 0.2s } 
.homegallery .more:hover { border-color: #a17c57; color: #a17c57; } 






#section-home .hero_home.col3-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 22px; align-items: stretch; } 
#section-home .home-card { position: relative; border-radius: 20px; box-shadow:0 5px 15px rgb(135 64 45 / 20%); padding: 42px 35px; overflow: hidden; font-size: 16px; color: #ffffff; 
 height: 340px; display: flex; flex-direction: column; justify-content: space-between; } 
#section-home .home-card h3 { margin: 0; font-size: 21px; font-weight: 500; line-height: 1.2; } 
#section-home .home-card h3 a { display: inline-flex; align-items: center; gap: 8px; color: inherit; text-decoration: none; font-size: 21px; font-weight: 500; } 
#section-home .home-card h3 a i { font-size: 20px; line-height: 1; } 
#section-home .home-card p { margin: 0; font-size: 16px; line-height: 1.5; } 
#section-home .home-card-intro { background: #588AE6; padding-left: 45px;} 
#section-home .home-card-intro .intro_text { position: relative; z-index: 2; padding-bottom: 25px; } 
#section-home .home-card-intro .intro_img_wrap { position: absolute; right: 8%; top: 50%; transform: translateY(-40%); width: 46%; max-width: 249px; z-index: 1; } 
#section-home .home-card-intro .intro_img_wrap > img:first-of-type { position: relative; display: block; width: 100%; height: auto; z-index: 1; } 
#section-home .home-card-intro .intro_img_wrap img.h1,
#section-home .home-card-intro .intro_img_wrap img.h2 { position: absolute; display: block; width: 20px; height: auto; z-index: 2; transform-origin: bottom right; pointer-events: none; opacity: 0; animation-duration: 3.2s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-fill-mode: backwards; } 
#section-home .home-card-intro .intro_img_wrap img.h1 { left: 43%; top: 0px; animation-delay: 0s; animation-name: introHeartRiseH1; } 
#section-home .home-card-intro .intro_img_wrap img.h2 { left: 49%; top: -5px; animation-delay: 0.28s; animation-name: introHeartRiseH2; } 
#section-home .home-card-notice { background: #55B06E; } 
#section-home .home-card-notice .type_notice { margin: 15px 0 0 0 !important } 
#section-home .home-card-notice .list_type_notice { margin: 0; padding: 0; list-style: none; } 
#section-home .home-card-notice .item_notice { margin: 0; } 
#section-home .home-card-notice .link_notice { display: block; color: #ffffff; text-decoration: none; font-size: 16px; line-height: 1.65;border-bottom: 1px dotted rgba(255, 255, 255, 0.6); } 
#section-home .home-card-notice ul li:last-child .link_notice {border-bottom: 0 !important;}
#section-home .home-card-notice .link_notice strong { display: block; font-size: 16px; font-weight: 400; line-height: 1.4; -webkit-line-clamp: 2;
  text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical;} 
#section-home .home-card-notice .link_notice:hover strong { color: #ffec9d; } 
#section-home .home-card-notice .notice_img { position: relative; display: block; margin: 0px auto; width: 127px; height: 85px; }
#section-home .home-card-notice .notice_img img { position: absolute; top: 0; left: 0; display: block; }
#section-home .home-card-notice .notice_img img:nth-child(1) {  z-index: 1;left: inherit; right: 0;animation: noticeCatTail 2.4s ease-in-out infinite; transform-origin: bottom left;}
#section-home .home-card-notice .notice_img img:nth-child(2) { animation: noticeCatHip 2.4s ease-in-out infinite; z-index: 2;transform-origin: bottom left;}
#section-home .home-card-notice .notice_img img:nth-child(3) {  z-index: 3;animation: noticeCatBox 3s ease-in-out infinite;} 
#section-home .home-card-host { display: flex; flex-direction: column; align-items: center; text-align: center; background: #F4D96B; color: #3b3328; } 
#section-home .home-card-host h3 { width: 100%; text-align: left; color: #4b3a23; } 
#section-home .home-card-host h3 a { color: #4b3a23; } 
#section-home .home-card-host .face_img { width: 160px; height: 160px; object-fit: cover; 
border-radius: 50%; overflow: hidden; } 
#section-home .home-card-host .host_text { font-size: 19px; line-height: 1.6; color: #71532a; font-weight: 500; } 
#section-home .home-card-host .name { margin-right: 2px; font-weight: 400; font-size: 14px; } 

.root_daum_roughmap .cont{display: none !important;}


/* 공지 카드 고양이: box(5px), hip(7px) X축 슬라이드 / tail 5도 회전 — homeDonationEmojiFloat 패턴 동일 */
@keyframes noticeCatBox {
  0%       { transform: translateX(0);    animation-timing-function: ease-in-out; }
  33.333%  { transform: translateX(2px);  animation-timing-function: linear; }
  66.666%  { transform: translateX(2px);  animation-timing-function: ease-in-out; }
  100%     { transform: translateX(0); }
}
@keyframes noticeCatHip {
  0%       { transform: translateX(0);    animation-timing-function: ease-in-out; }
  33.333%  { transform: translateX(7px);  animation-timing-function: linear; }
  66.666%  { transform: translateX(7px);  animation-timing-function: ease-in-out; }
  100%     { transform: translateX(0); }
}
@keyframes noticeCatTail {
  0% {
    transform: rotate(0deg) translateX(0) translateY(-6px);
    animation-timing-function: ease-in-out;
}

33.333% {
    transform: rotate(-5deg) translateX(7px) translateY(-4px);
    animation-timing-function: linear;
}

66.666% {
    transform: rotate(-5deg) translateX(7px) translateY(-4px);
    animation-timing-function: ease-in-out;
}

100% {
    transform: rotate(0deg) translateX(0) translateY(-6px);
}
}

/* 소개 카드 하트: 타이밍은 동일, 사라질 때 translate만 h1/h2 각각 다르게 */
@keyframes introHeartRiseH1 {
  0% { opacity: 0; transform: translate(0, 0) scale(0.88); animation-timing-function: linear; }
  6% { opacity: 0; transform: translate(0, 0) scale(0.88); animation-timing-function: ease-out; }
  16% { opacity: 1; transform: translate(0, 0) scale(1); animation-timing-function: ease-in-out; }
  34% { opacity: 1; transform: translate(0, 0) scale(1); animation-timing-function: ease-in; }
  52% { opacity: 0; transform: translate(-15px, -15px) scale(1.2); animation-timing-function: ease-in; }
  54% { opacity: 0; transform: translate(0, 0) scale(1); animation-timing-function: linear; }
  100% { opacity: 0; transform: translate(0, 0) scale(0.88); animation-timing-function: linear; }
}
@keyframes introHeartRiseH2 {
  0% { opacity: 0; transform: translate(0, 0) scale(0.7) rotate(30deg); animation-timing-function: linear; }
  6% { opacity: 0; transform: translate(0, 0) scale(0.7) rotate(30deg); animation-timing-function: ease-out; }
  16% { opacity: 1; transform: translate(0, 0) scale(1) rotate(30deg); animation-timing-function: ease-in-out; }
  34% { opacity: 1; transform: translate(0, 0) scale(1) rotate(30deg); animation-timing-function: ease-in; }
  52% { opacity: 0; transform: translate(10px, -15px) scale(1.2) rotate(30deg); animation-timing-function: ease-in; }
  54% { opacity: 0; transform: translate(0, 0) scale(1) rotate(30deg); animation-timing-function: linear; }
  100% { opacity: 0; transform: translate(0, 0) scale(0.7) rotate(30deg); animation-timing-function: linear; }
}
@media (prefers-reduced-motion: reduce) {
  #section-home .home-card-intro .intro_img_wrap img.h1,
  #section-home .home-card-intro .intro_img_wrap img.h2 { animation: none; opacity: 1; transform: none; }
}

/* 기부 이모지: 3초 주기 — 1초 상승, 1초 정지, 1초 하강(루프 끊김 없음). 구간별 easing으로 가속 느낌 정리 */
@keyframes homeDonationEmojiFloat {
  0% { transform: translateY(0); animation-timing-function: ease-in-out; }
  33.333% { transform: translateY(-10px); animation-timing-function: linear; }
  66.666% { transform: translateY(-10px); animation-timing-function: ease-in-out; }
  100% { transform: translateY(0); }
}

#section-contact .contact_container { display: block; width: 100%; } 
.contact_container h2 { margin: 0 0 22px 0; } 
#section-contact .col-donaion3 { display: grid; grid-template-columns: 1.3fr 1.7fr 1fr; gap: 22px; width: 100%; } 
#section-contact .col-donaion3 > div { position: relative; border-radius: 20px; box-shadow:0 5px 15px rgb(135 64 45 / 20%); padding: 42px 35px; overflow: hidden; font-size: 16px; color: #ffffff; 
 height: 340px; display: flex; flex-direction: column; justify-content: space-between; } 
#section-contact .donation_box1 { background: #65615E; color: #fff; padding: 34px 35px; display: flex; flex-direction: column; justify-content: space-between; } 
#section-contact .donation_box1_title { display: flex; justify-content: space-between; align-items: flex-start; } 
#section-contact .donation_box1_title p { margin: 0; font-size: 23px; line-height: 1.3; font-weight: 500; letter-spacing: -0.3px; color: #ffffff; } 
#section-contact .donation_box1_title i { font-size: 23px; margin-left: 4px; vertical-align: middle; } 
#section-contact .donation_box1_emoji { position: absolute; right: 7%; top: 13%; animation: homeDonationEmojiFloat 2.5s infinite; }
@media (prefers-reduced-motion: reduce) { #section-contact .donation_box1_emoji { animation: none; } }
#section-contact .donation_box1_desc { margin: 18px 0 0 0; color: #ffffff; font-size: 15px; line-height: 1.45; font-weight: 300; }
#section-contact .donation_account { margin-top: 20px; border-radius: 12px; background: #fff; padding: 16px 18px; color: #504741; } 
#section-contact .donation_account strong { display: block; margin-bottom: 5px; color: #F55B62; font-size: 16px; line-height: 1.1; font-weight: 600; } 
#section-contact .donation_account p { margin: 0; font-size: 15px; line-height: 1.45; font-weight: 500; } 
#section-contact .donation_box2 { background: #ffffff; padding: 0px !important; position: relative; overflow: hidden; } 
#section-contact .donation_box2 .type_banner { width: 100% !important; height: 100%; margin: 0; padding: 0; display: flex; align-items: center; justify-content: center; 
 flex-direction: column; color: #666; } 
#section-contact .donation_box2 .type_banner .title_section { margin: 0 0 10px 0; color: #29B35E; font-size: 16px;text-align: left !important; line-height: 1.2; font-weight: 600; } 
#section-contact .donation_box2 .list_type_banner { margin: 0; padding: 0; list-style: none;     width: 100%; height: 100%;} 
#section-contact .donation_box2 .item_banner {  width: 100%; height: 100%; } 
#section-contact .donation_box2 .link_banner { display: block; position: relative; width: 100%; height: 100%; 
 overflow: hidden; background-image: none !important; background: transparent !important; } 
#section-contact .donation_box2 .banner_thumbnail { display: block;  position: absolute; width: auto;  max-height: 100%;
    object-fit: cover; right: 8%;  top: 50%; transform: translateY(-60%); } 
#section-contact .donation_box2 .box_content { position: relative; z-index: 1; width: 100%; height: 100%; padding: 40px; 
  min-height: inherit;    display: flex; flex-direction: column; justify-content: center; } 
#section-contact .donation_box2 .box_content strong { display: block; margin: 0 0 10px 0; color: #666; font-size: 50px; line-height: 1; font-weight: 700; } 
#section-contact .donation_box2 .box_content .text { margin: 0 !important;
  color: #5e5e5e;font-size: 14px; line-height: 1.4; font-weight: 400;word-break: keep-all;
  height: max-content;  display: block !important;  max-height: inherit;} 
#section-contact .donation_box2 .btn_go { margin-top: 16px; border: 1px solid #c6c6c6; border-radius: 999px; min-width: 130px; height: 38px; background: #fff; color: #333; font-size: 14px; font-weight: 500; } 
#section-contact .donation_box3 { background: #ffffff; align-items: start; } 
#section-contact .donation_box3_title { display: inline-flex; 
 align-items: center; gap: 8px; color: #685048; text-decoration: none; font-size: 21px; margin: 0; font-weight: 500; } 
#section-contact .donation_box3_title a { color: #685048; } 
#section-contact .donation_box3_title a:hover { color: #aa5f3f; } 
#section-contact .donation_box3_title i { font-size: 20px; line-height: 1; } 



#section-contact .donation_box3_thumb { width: 160px; height: 160px; border-radius: 50%; overflow: hidden; display: block; margin: 0 auto; } 
#section-contact .donation_box3_thumb img { display: block; width: auto; min-height: 100%; max-width: 100%; object-fit: cover; } 
#section-contact .donation_box3_address { margin: 0 auto; color: #817872; font-size: 15px; line-height: 1.45; text-align: center; word-break: keep-all; } 

@media screen and (max-width: 1023px) { 
  .area_homebox.homegallery .container { padding: 35px 15px 0px 15px;}
  .area_homebox .container { padding: 10px 15px; } 
  .area_homebox.homebox1 .container { padding: 75px 15px 0 15px;}
 #section-contact .col-donaion3 { grid-template-columns: 1fr; } 
 #section-contact .col-donaion3 > div { min-height: auto; } 
 #section-contact .donation_box3 { align-items: flex-start; } 
 #section-contact .donation_box3_address { text-align: left; } 
.box_header { height: 70px; } 
.box_header .title_logo { margin: 0 0 0 10px !important; font-size: 20px; padding-top: 4px; width: 60% !important; } 
.box_header .btn_menu, .box_header .btn_search { width: 22px; background-size: 22px auto; } 
.box_header .btn_instagram { right: 52px; width: 22px; height: 22px; margin-top: -11px; font-size: 22px; } 
.box_header .btn_menu { right: 24px; } 
.box_header .btn_search { right: 60px; } 
} 
 
 @media screen and (max-width: 768px) { 
  .box_header .btn_instagram{right: 62px}
  #section-home .hero_home.col3-grid { grid-template-columns: 1fr; } 
  #section-home .home-card { min-height: auto; } 
  #section-home .home-card-intro .intro_img_wrap { top: 35%; transform: translateY(-40%); width: 55%; } 
  .box_header .link_logo img{max-width: 180px;}
  #section-home .home-card-notice { padding-bottom: 38px; } 
  #section-home .home-card-intro .intro_text{padding-bottom: 0;}
  .article_view { margin-top: 40px; padding: 0 !important; } 
  #container { margin-top: 70px; } 
  .article_content { padding: 0 !important; } 
  .article_view iframe { width: 100%; height: 56vw; -ms-height: 56vmax; } 
  
  .contact_container { flex-direction: column; } 
  .area_homebox h2 { text-align: center; } 
  .area_homebox h2 > a { justify-content: center; } 
  .area_homebox.homebox1 .container { display: flex; justify-content: space-between; padding-bottom: 10px; } 

  #section-contact .donation_box2 .banner_thumbnail{max-width: 35%;}
  #section-home .home-card-intro{padding-left: 30px;}
  #section-home .home-card{padding: 40px 30px;}
  }