@charset "utf-8";

.skip-nav {position:absolute; left:0; top:-20rem; width:20rem;}
.skip-nav a {position:fixed; left:0; top:-20rem; display:block; width:20rem; height:5rem; line-height:5rem; color:#fff; background-color:var(--primary); text-align:center; z-index:101;}
.skip-nav a:focus {top:0.6rem;left:0.6rem;}
.skip-nav a:focus-visible {outline:0.3rem dotted #fff; outline-offset: -0.2rem;}
.mobile .skip-nav {display:none;}

#wrap {width:100%;}

#header{height:8rem;}
.header-inner{position:fixed;left:0;right:0;top:0; background-color:#fff;z-index:100; border-bottom:0.1rem solid var(--gray-20); padding:0 2.4rem;}
.header-inner-wrap{width:var(--max-width); max-width:100%; margin:0 auto; height:8rem; display:flex; gap:6rem; align-items: flex-start; padding:1.6rem 0; box-sizing:border-box; position:relative;}
.header-logo{flex-shrink: 0; height:4.8rem;}
.header-logo a{height:100%; display:flex; align-items: center;}
.header-logo img{vertical-align:middle; width:25.9rem;height:4.8rem;}
.gnav{width:100%;}
.gnav-dep1{display:flex; width:100%;}
.gnav-dep1 > li{position:relative; width:20%;}
.gnav-dep1 > li > a{display:flex;align-items: center;justify-content: center; font-size:1.8rem;font-weight:500;color:var(--gray-80); font-family: 'Paperozi'; letter-spacing:-0.02em; height:4.8rem;width:100%;}
.gnav-dep1 > li > a > span{position:relative;}
.gnav-dep1 > li > a > span:after{display:block;content:'';width:0.5rem;height:0.5rem;border-radius:50%;background-color:var(--primary); position:absolute;right:-1rem;top:-0.5rem; opacity:0; transition:all 0.3s;}
.gnav-dep1 > li.active > a{font-weight:700;}
.gnav-dep1 > li:hover > a{font-weight:700;color:var(--primary);}
.gnav-dep1 > li:hover > a > span:after{top:0;opacity:1;}
.gnav-dep2{display:none; text-align:center; padding:2.8rem 0;}
.gnav-dep2 ul{display:flex; flex-direction: column; gap:0.6rem;}
.gnav-dep2 a{display:block; padding:0.8rem 0; font-weight:500;}
.gnav-dep2 a:hover{font-weight:700;}
.gnav-dep2 a:hover span{background:linear-gradient(to bottom, rgba(213, 234, 227, 0) 40%, #D5EAE3);}
.gnav-dep2 a[target="_blank"]{display:inline-flex; align-items: center; gap:0.4rem;}
.gnav-dep2 a[target="_blank"]:after{display:block;content:'';width:1.6rem;height:1.6rem; background:url(/images/animal_2026/layout/ic_blank.svg) center no-repeat; flex-shrink: 0;}

.header-util-member a{display:flex; gap:0.4rem; align-items: center; font-family: 'Paperozi'; color:var(--gray-80);letter-spacing:-0.02em;}
.header-util-member a:before{display:block;content:'';width:1.6rem;height:1.6rem; flex-shrink: 0;}
.header-util-member .login:before{background:url(/images/animal_2026/layout/ic_login.svg) center no-repeat;}
.header-util-member .join:before{background:url(/images/animal_2026/layout/ic_join.svg) center no-repeat;}
.header-util-member .logout:before{background:url(/images/animal_2026/layout/ic_logout.svg) center no-repeat;}
.header-util-member .mypage:before{background:url(/images/animal_2026/layout/ic_mypage.svg) center no-repeat;}

.header-util{margin-left:auto; flex-shrink: 0; height:4.8rem; display:flex; align-items: center;}
.header-util-member{display:flex; gap:1.6rem;}
.header-util-member .login{width:6.2rem;}
.header-util-member .join{width:7.5rem;}
.header-util-member .logout{width:7.5rem;}
.header-util-member .mypage{width:7.5rem;}

#header.active .header-inner{border:none; background-color:rgba(255,255,255,0.72); backdrop-filter: blur(2.4rem); -webkit-backdrop-filter: blur(2.4rem); border-bottom:0.1rem solid rgba(255,255,255,0.3);}
#header.active .header-inner:before{display:block;content:'';position:absolute;left:0;top:0;right:0;bottom:0; height:8rem; background-color:#fff;transition:all 0.3s; }
#header.active .header-inner-wrap{height:auto;}
#header.active .header-logo img{width:18.3rem;height:3.4rem; transition:all 0.3s;}
#header.active .gnav-dep1 > li{transition:all 0.3s;}
#header.active .header-util .header-util-member{gap:1.6rem;}
#header.active .header-util .header-util-member a{width:2.4rem; overflow:hidden; gap:0; transition: all 0.3s;}
#header.active .header-util .header-util-member a:before{width:2.4rem;height:2.4rem;}
#header.active .gnav-dep2{display:block;}

.btn-menu{display:none; width:2.4rem;height:2.4rem; background:url(/images/animal_2026/layout/ic_menu.svg) center no-repeat; margin-left:auto; overflow:hidden; text-indent: -9999rem; align-self:center;}

.m-header{position:fixed;left:0;top:6.7rem;right:0;bottom:0; background-color:#fff; z-index:101; flex-direction: column; display:none;}
.m-header.active{display:flex;}
.btn-mnav-close{position:fixed;top:1.6rem;right:2rem; width:3.2rem;height:3.2rem; text-align:left;text-indent:-9999rem; background:#fff url(/images/animal_2026/layout/ic_close.svg) center no-repeat;}
.m-header-top{padding:2rem; flex-shrink: 0;}
.m-header-top .header-util-member{display:flex; gap:1.2rem;}
.m-header-top .header-util-member a{flex:1; gap:0.4rem; font-family:inherit;}
.m-gnav{height:100%; overflow-y:auto; padding:0 2rem;}

.m-gnav-dep1 > li{border-bottom:0.1rem solid var(--gray-20);}
.m-gnav-dep1 > li > a{display:flex;align-items: center; font-size:2rem;font-weight:700;color:var(--gray-80); letter-spacing:-0.02em; height:6.6rem; padding:0 0.8rem;}
.m-gnav-dep1 > li > a span { pointer-events: none; }
.m-gnav-dep1 .is-sub > a:after{display:block;content:''; width:2.4rem;height:2.4rem;border-radius:50%;background:var(--gray-5) url(/images/animal_2026/layout/arr_mgnav_down.svg) center no-repeat; margin-left:auto;}
.m-gnav-dep2{background-color:var(--gray-5); display:none; padding:1.2rem;}
.m-gnav-dep2 a{display:block; padding:0.8rem; color:#222; line-height:1.2;}
.m-gnav-dep2 a[target="_blank"]{display:flex; align-items: center; gap:0.4rem;}
.m-gnav-dep2 a[target="_blank"]:after{display:block;content:'';width:1.6rem;height:1.6rem; background:url(/images/animal_2026/layout/ic_blank.svg) center no-repeat; flex-shrink: 0;}

.m-gnav-dep1 .is-sub.active .m-gnav-dep2{display:block;}
.m-gnav-dep1 .is-sub.active > a{color:var(--primary);}
.m-gnav-dep1 .is-sub.active > a:after{background:var(--primary) url(/images/animal_2026/layout/arr_mgnav_up.svg) center no-repeat;}

#footer{background-color:var(--gray-70); color:#fff;}
.footer-inner{width:var(--max-width); max-width:calc(100% - 4.8rem); padding:2.4rem 0; display:flex; flex-wrap:wrap; gap:1.6rem 4rem; margin:0 auto;}
.footer-links{display:flex; gap:4.8rem; align-items: center; font-size:var(--body-large);}
.footer-links li + li{position:relative;}
.footer-links li + li:before{display:block;content:'';width:0.1rem;height:1.2rem; position:absolute;left:-2.4rem;top:50%;transform:translateY(-50%); background-color:rgba(255,255,255,0.2);}
.footer-contact{width:100%; border-top:0.1rem solid rgba(255,255,255,0.2); padding-top:2rem;}
.footer-contact address{display:flex; font-size:var(--body-medium);}
.footer-contact address .address:after{content:'/'; padding:0 0.6rem;}
.footer-copyright{font-size:var(--body-small); color:var(--gray-40); margin-top:1.2rem;}

.sub-container{padding:4.8rem;}

.page-top{width:100%;height:34.2rem; border-radius:var(--radius-xlarge); background-color:#F5F4F0; margin-bottom:6rem; position:relative;overflow:hidden;}
.page-top:before{display:block;content:'';height:100%;aspect-ratio: 1/1; position:absolute;left:0;bottom:0; background:url(/images/animal_2026/layout/bg_top.png) center / cover no-repeat;}
.page-top-inner{width:var(--max-width); max-width:calc(100% - 9.6rem); margin:0 auto; height:100%; position:relative; display:flex; justify-content: space-between; gap:2.4rem; box-sizing: border-box;}

.page-top-contents{padding-top:8rem;}
.page-top-visual{flex-shrink: 0; height:100%; aspect-ratio: 494/342; background-position:center; background-repeat:no-repeat; background-size:contain; }
[data-menuNum="1"] .page-top-visual{background-image:url(/images/animal_2026/layout/sub_visual1.png);}
[data-menuNum="2"] .page-top-visual{background-image:url(/images/animal_2026/layout/sub_visual2.png);}
[data-menuNum="3"] .page-top-visual{background-image:url(/images/animal_2026/layout/sub_visual3.png);}
[data-menuNum="4"] .page-top-visual{background-image:url(/images/animal_2026/layout/sub_visual4.png);}
[data-menuNum="5"] .page-top-visual{background-image:url(/images/animal_2026/layout/sub_visual5.png);}

.page-breadcrumb{margin-bottom:4.2rem;}
.page-breadcrumb ol{display:flex; gap:0.4rem; list-style: none; margin:0; padding:0;flex-wrap: wrap;}
.page-breadcrumb li{list-style: none; display:flex; gap:0.8rem; align-items: center; padding:0 0.4rem;}
.page-breadcrumb li:before{display:block;content:'';width:1.6rem;height:1.6rem; background:url(/images/animal_2026/layout/arr_breadcrumb.svg) center no-repeat;}
.page-breadcrumb li.home:before{background-image:url(/images/animal_2026/layout/ic_home.svg);}
.page-breadcrumb a:hover{text-decoration: underline;}
.page-section-title{font-size:4.2rem;line-height:4.9rem;font-weight:700;font-family: 'Paperozi';color:var(--gray-80);}
.page-section-desc{margin-top:2.8rem;font-size:var(--body-xlarge);}

.page-contents-wrap{display:flex; gap:4rem; padding-bottom:2rem; width:var(--max-width); max-width:100%; margin:0 auto; align-items: flex-start;}

.page-snav{width:22rem; flex-shrink: 0;position:sticky; top:10rem;}
.page-snav-top{border-radius:var(--radius-medium) var(--radius-medium) 0 0; color:#fff; height:8.8rem; box-sizing:border-box; padding:0 2.4rem; display:flex; align-items: center; margin-bottom:1rem; background-position:right bottom;
  background-color:var(--gray-70);
  background-size:auto 100%;
  background-repeat:no-repeat;
  background-image:url(/images/animal_2026/layout/bg_snav1.png);
}
.page-snav-top .title{font-size:2.4rem;font-weight:600; font-family: 'Paperozi';}

[data-menuNum="1"] .page-snav-top{background-image:url(/images/animal_2026/layout/bg_snav1.png);}
[data-menuNum="2"] .page-snav-top{background-image:url(/images/animal_2026/layout/bg_snav2.png);}
[data-menuNum="3"] .page-snav-top{background-image:url(/images/animal_2026/layout/bg_snav3.png);}
[data-menuNum="4"] .page-snav-top{background-image:url(/images/animal_2026/layout/bg_snav4.png);}
[data-menuNum="5"] .page-snav-top{background-image:url(/images/animal_2026/layout/bg_snav5.png);}

.snav-dep1 > li > a{display:flex; gap:0.4rem; min-height:5.2rem; padding:0 1.4rem; align-items: center; color:var(--gray-70);font-weight:500; box-sizing:border-box;}
.snav-dep1 > li > a:hover{font-weight:700;}
.snav-dep1 > li > a[target="_blank"]:after{display:block;content:'';width:1.6rem;height:1.6rem; background:url(/images/animal_2026/layout/ic_blank.svg) center no-repeat; flex-shrink: 0;}
.snav-dep1 > li + li{border-top:0.1rem solid var(--gray-20);}
.snav-dep1 > li:last-child{border-bottom:0.1rem solid var(--gray-20);}
.snav-dep1 > li.active,
.snav-dep1 > li.active + li{border-top:none;}
.snav-dep1 > li.active > a{border:0.1rem solid var(--gray-20); background-color:var(--gray-10); border-radius:0.6rem; font-weight:700; color:var(--gray-80);}
.snav-dep1 > li.active > a:after{display:block;content:'';width:2rem;height:2rem; background:url(/images/animal_2026/layout/ic_snav_active.svg) center no-repeat; margin-left:auto; flex-shrink: 0;}
.snav-dep1 > li.active:last-child{border-bottom:none;}

.page-contents{width:100%;}


@media (max-width: 1440px) {
  .sub-container{padding:4.8rem 2.4rem;}
}
@media (max-width: 1280px) {
  .header-inner-wrap{gap:4rem;}
  .gnav-dep1{justify-content: center;}
  .gnav-dep1 > li{position:relative; width:auto; flex:auto;}
}
@media (min-width: 1080px) {
  .m-header.active{display:none !important;}
}
@media (max-width: 1080px) {

  #header,
  .header-inner-wrap{height:6.6rem;}
  .header-logo{height:3.4rem;}
  .header-logo img{height:3.4rem;width:auto;}
  .gnav{display:none;}
  .header-util{display:none;}
  .btn-menu{display:block;}

  .page-top{height:21rem; margin-bottom:2.4rem;}
  .page-top-inner{max-width:calc(100% - 4.8rem);}
  .page-top-contents{padding-top:3.2rem;}
  .page-breadcrumb{margin-bottom:2rem; font-size:var(--body-small);}
  .page-section-title{font-size:2.8rem;line-height:1.2;}
  .page-section-desc{font-size:var(--body-medium); margin-top:1.2rem;}

  .sub-container{padding:2.4rem;}
  .page-snav{display:none;}

  .footer-links{font-size:var(--body-small);gap:2.1rem;}
  .footer-links li + li:before{left:-1rem;}
  .footer-contact address{font-size:var(--body-small);}

}

@media (max-width: 768px) {
  .header-inner{padding:0 1.6rem;}
  .btn-mnav-close{right:1.2rem;}

  .footer-inner{max-width:calc(100% - 3.2rem);gap:1.2rem;padding:2rem 0;}
  .footer-logo{width:100%; text-align:center;}
  .footer-logo img{height:3rem;}
  .footer-links{width:100%; justify-content: center;}
  .footer-contact{text-align:center; padding-top:1.2rem;}
  .footer-contact address{justify-content: center; flex-direction: column;}
  .footer-contact address p{width:100%;}
  .footer-contact address .address:after{display:none;}
  .footer-copyright{margin-top:0.8rem; font-size:1.2rem;}

  .sub-container{padding:1.6rem;}

  .page-top{height:17rem;}
  .page-top-inner {max-width: 100%; gap:0;}
  .page-top-contents{padding:2.4rem 0 0 2.4rem; position:relative; z-index:2; width:100%; box-sizing:border-box;}
  .page-breadcrumb li{padding:0;gap:0.4rem;}
  .page-section-title{font-size:2.4rem;line-height:1.2; width:50%;}
  .page-section-desc{display:none;}

  .page-top-visual{aspect-ratio: 200/170; position:absolute;right:0;bottom:0; background-position:right bottom; }
  [data-menuNum="1"] .page-top-visual{background-image:url(/images/animal_2026/layout/sub_visual1_m.png);}
  [data-menuNum="2"] .page-top-visual{background-image:url(/images/animal_2026/layout/sub_visual2_m.png);}
  [data-menuNum="3"] .page-top-visual{background-image:url(/images/animal_2026/layout/sub_visual3_m.png);}
  [data-menuNum="4"] .page-top-visual{background-image:url(/images/animal_2026/layout/sub_visual4_m.png);}
  [data-menuNum="5"] .page-top-visual{background-image:url(/images/animal_2026/layout/sub_visual5_m.png);}

}

@media (max-width: 430px) {

  .page-top-inner{gap:0;}


}