@charset "UTF-8";
@layer reset, base, page, custom;
:root {
  --l-H-hero: 580px;
  --l-header: 80px;
  --l-header-: -80px;
  --l-header--mobile: 56px;
  --l-header--mobile-: -56px;
  --l-services-logo: 44px;
  --l-btnH: 36px;
  --l-h-sec-footer: 150px;
  --c-text: #3a3a3d;
  --c-heading: #1e1e1e;
  --c-nav: #494949;
  --c-brand-text: #8b8bac;
  --c-primary: #EA3F9A;
  --c-primary-rgb: 234, 63, 154;
  --c-primary-soft: rgba(var(--c-primary-rgb), 0.05);
  --c-primary-tint: rgba(var(--c-primary-rgb), 0.1);
  --c-primary-tint-strong: rgba(var(--c-primary-rgb), 0.15);
  --c-primary-panel: rgba(var(--c-primary-rgb), 0.92);
  --c-primary-shadow: rgba(var(--c-primary-rgb), 0.35);
  --c-primary-shadow-strong: rgba(var(--c-primary-rgb), 0.45);
  --c-primary-line: rgba(var(--c-primary-rgb), 0.35);
  --c-primary-accent: rgba(var(--c-primary-rgb), 0.7);
  --c-secondary: #1e3659;
  --c-hightlight: #ec4e00;
  --c-primary-start: #f0da98;
  --c-primary-stop: #cfab3b;
  --c-secondary-start: #ffdc23;
  --c-secondary-stop: #ffe972;
  --f-services-title: 18px;
  --f-services-title-lh: 20px;
  --f-services-title--ch: 13px;
  --f-services-title--ch-lh: 16px;
  --z-nav: 10;
  --z-hero: 8;
  --z-main: 9;
  --c-sdg1: #c74140;
  --c-sdg2: #cfa94d;
  --c-sdg3: #6b9e47;
  --c-sdg4: #aa3433;
  --c-sdg5: #df5330;
  --c-sdg6: #71b8e0;
  --c-sdg7: #edc843;
  --c-sdg8: #8d2c44;
  --c-sdg9: #df7538;
  --c-sdg10: #bf3767;
  --c-sdg11: #e6a441;
  --c-sdg12: #b28f40;
  --c-sdg13: #567c4b;
  --c-sdg14: #5794d5;
  --c-sdg15: #7fbc45;
  --c-sdg16: #3d669a;
  --c-sdg17: #2f4768;
  --c-zdg1: #a47903;
  --c-zdg2: #be9115;
  --c-zdg3: #d7aa2d;
}

:root {
  --l-inner: 1024px;
}

@keyframes slide-f-right {
  from {
    opacity: 0;
    transform: translate3d(100%, 0, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
@keyframes slide-f-left {
  from {
    opacity: 0;
    transform: translate3d(-100%, 0, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
@keyframes slide-f-top {
  from {
    opacity: 0;
    transform: translate3d(0, -50px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes reveal-up-20 {
  from {
    opacity: 0;
    transform: translate3d(0, 20px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
@scope (.landing-page) {
  :scope {
    display: flex;
    flex-direction: column;
    min-height: calc(100dvh - var(--l-header));
  }
  .container {
    padding: 0;
    display: grid;
    grid-template-columns: 170px 1fr;
    z-index: var(--z-main);
  }
  @media only screen and (max-width: 860px) {
    .container {
      grid-template-columns: 1fr;
      grid-template-rows: auto auto;
    }
  }
  .container-left {
    grid-column: 1/span 1;
  }
  @media only screen and (max-width: 860px) {
    .container-left {
      grid-column: 1/span 1;
    }
  }
  .container-right {
    grid-column: 2/span 1;
  }
  @media only screen and (max-width: 860px) {
    .container-right {
      grid-column: 1/span 1;
      margin: 10px;
    }
  }
  .header {
    position: relative;
    margin-top: calc(44px + var(--l-header) - var(--l-H-hero));
    z-index: var(--z-main);
    pointer-events: none;
  }
  @media only screen and (max-width: 860px) {
    .header {
      margin-top: 0;
    }
  }
  .header .container-right {
    background: #fff;
    pointer-events: auto;
  }
  @media only screen and (max-width: 860px) {
    .header .container-right {
      margin-bottom: 0;
    }
  }
  .header:has(.image-block) + .content .content-aside {
    padding-top: 20px;
  }
  .content {
    flex: 1 0 auto;
    position: relative;
    height: 100%;
  }
  @media only screen and (max-width: 860px) {
    .content .container {
      grid-template-columns: 1fr;
      grid-template-rows: 1fr auto;
    }
    .content .container-right {
      grid-row: 1/span 1;
    }
    .content .container-left {
      grid-row: 2/span 1;
    }
    .content .container-left .title,
    .content .container-left .menu {
      display: none;
    }
  }
  .content .content-aside {
    padding-top: calc(var(--l-H-hero) - var(--l-header) - 200px + 120px);
    position: relative;
    z-index: 99;
    height: 100%;
  }
  @media only screen and (max-width: 860px) {
    .content .content-aside {
      padding-top: 30px;
    }
  }
  @supports (animation-timeline: view(block)) {
    .content .content-aside {
      animation: slide-f-top ease forwards;
      animation-timeline: view(block);
      animation-range: exit 19% contain 60%;
    }
  }
  .content .content-aside_inner {
    pointer-events: auto;
    position: sticky;
    padding: 0 0 0 10px;
    top: calc(var(--l-header) + 20px);
  }
  .content .content-aside_inner:before {
    content: "";
    position: absolute;
    inset: -30px 0 10px -40px;
    background: rgba(255, 255, 255, 0.8);
    filter: blur(40px);
    transform: scale(1.2);
    z-index: 1;
    pointer-events: none;
  }
  .content .content-aside .title {
    z-index: 3;
    position: relative;
  }
  .content .content-aside .nav {
    margin-block-start: 20px;
    padding-left: 0px;
    list-style: none;
    position: relative;
    z-index: 3;
  }
  .content .content-aside .nav-item.current a {
    padding-inline-start: 5px;
  }
  .content .content-aside .nav-item.current a:before {
    content: "";
    position: absolute;
    inset: 8px auto 8px 0;
    width: 2px;
    background: #3b1376;
  }
  .content .content-aside .nav-item.current a:hover:after {
    display: none;
  }
  .content .content-aside .nav-item__url {
    display: inline-block;
    padding: 8px 0;
    color: #1e3659;
    transition: 0.3s;
    border-radius: 3px;
    position: relative;
  }
  .content .content-aside .nav-item__url:after {
    content: "";
    position: absolute;
    inset: auto 100% 2px 0;
    height: 2px;
    background: #1e3659;
    transition: 0.3s;
  }
  .content .content-aside .nav-item__url:hover:after {
    inset: auto 0 2px 0;
    opacity: 1;
  }
  .content:before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 300px;
    /* 原背景圖 page-bg-r.webp 在舊站也不存在（404），移除引用避免多一次失敗請求，畫面與正式站相同 */
    mask: linear-gradient(to bottom, black 0, rgba(0, 0, 0, 0) 100%);
    z-index: 1;
  }
  .content-body {
    padding: 20px;
    height: 100%;
  }
}
.aside-hot {
  position: relative;
  z-index: 3;
  counter-reset: hot;
}
.aside-hot .heading-left {
  color: #3a3a3d;
  font-size: 1.25rem;
  display: flex;
  align-items: center;
}
.aside-hot .heading-left:after {
  content: "";
  width: 60px;
  height: 1px;
  background: #3b1376;
  margin-inline-start: 6px;
}
.aside-hot .item {
  counter-increment: hot;
  padding-block: 0 16px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  margin-top: 10px;
}
@media only screen and (max-width: 860px) {
  .aside-hot .item {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto 1fr;
  }
}
.aside-hot .item:before {
  content: counter(hot);
  color: rgba(58, 58, 61, 0.3);
  font-size: 2.5rem;
  display: block;
  font-weight: 100;
}
@media only screen and (max-width: 860px) {
  .aside-hot .item:before {
    grid-column: 1/span 1;
    grid-row: 1/span 2;
    padding: 0 20px;
  }
}
.aside-hot .item .url {
  display: block;
  color: #1e3659;
  font-size: 1rem;
  line-height: 180%;
}
@media only screen and (max-width: 860px) {
  .aside-hot .item .url {
    grid-column: 2/span 1;
    grid-row: 1/span 1;
  }
}
.aside-hot .item .url:hover {
  color: #333;
}
.aside-hot .item .date {
  font-size: 0.875rem;
  color: #1e3659;
  margin-block-end: 6px;
  opacity: 0.6;
}
@media only screen and (max-width: 860px) {
  .aside-hot .item .date {
    grid-column: 2/span 1;
    grid-row: 2/span 1;
  }
}

@scope (.landing-page .breadcrumbs) {
  :scope {
    padding: 20px 20px 5px;
  }
  @media only screen and (max-width: 678px) {
    :scope {
      display: none;
    }
  }
  .breadcrumb {
    display: flex;
    list-style: none;
  }
  .breadcrumb-item {
    padding-inline-start: 5px;
    font-size: 0.875rem;
    color: rgba(30, 54, 89, 0.7);
  }
  .breadcrumb-item:after {
    content: "/";
    padding-inline-start: 5px;
  }
  .breadcrumb-item .pathway {
    color: #3b1376;
  }
}
/* ------------------------------------------------------------
 * HERO 區域專用的 Scope（只限制 .landing-page .hero）
 * ------------------------------------------------------------ */
@scope (.landing-page .hero) {
  :scope {
    background-size: cover;
    background-position: center 0;
    z-index: var(--z-hero);
  }
  @media only screen and (max-width: 860px) {
    :scope {
      height: auto;
      padding-top: 0 !important;
    }
  }
  .l-inner {
    position: relative;
    z-index: var(--z-hero);
    height: 100%;
  }
  /* ---------------------------------
   * HERO 內的 Page Title 動畫（右→左）
   * ---------------------------------*/
  .header-main {
    padding: 80px 30px 0;
    display: flex;
    align-items: center;
  }
  .header-main .page-title {
    color: #ffffff;
    font-size: 39px;
    font-weight: 400;
    opacity: 0;
    transform: translateX(55px);
    transition: all 500ms cubic-bezier(0.45, 0, 0.25, 1);
  }
  @media only screen and (max-width: 860px) {
    .header-main .page-title {
      font-size: 29px;
    }
  }
  .header-main .page-title.animate-in {
    opacity: 1;
    transform: translateX(0);
  }
  @media only screen and (max-width: 860px) {
    .header-main {
      padding: 30px 30px 70px;
    }
  }
  /* ---------------------------------
   * HERO Aside（左側 Title）
   * ---------------------------------*/
  .aside {
    grid-column: 1/span 1;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-end;
    padding: 30px 0 39px;
    padding-top: calc(var(--l-header) + 50px);
    /* 正確位置：aside 內的 .title.animate-in（無 container-left） */
  }
  @media only screen and (max-width: 860px) {
    .aside {
      padding-top: var(--l-header);
      justify-content: flex-start;
    }
  }
  @media only screen and (max-width: 768px) {
    .aside {
      padding-top: 55px;
    }
  }
  .aside .title {
    position: relative;
    z-index: 2;
    color: #ffffff;
    font-size: 39px;
    font-weight: 300;
    text-align: right;
    /* 初始動畫狀態 */
    opacity: 0;
    transform: translateX(-30px);
    transition: all 0.7s cubic-bezier(0.55, 0, 0.1, 1);
  }
  @media only screen and (max-width: 860px) {
    .aside .title {
      font-size: 18px;
      display: flex;
      width: 100%;
      height: 50px;
      align-items: center;
      justify-content: flex-end;
      padding-right: 15px;
      font-weight: 400;
    }
  }
  .aside .title.animate-in {
    opacity: 0.5;
    transform: translateX(0);
  }
  @media only screen and (max-width: 768px) {
    .aside .title.animate-in {
      opacity: 1;
    }
  }
  .aside::before {
    content: "";
    position: absolute;
    inset: 0 0 0 -9999px;
    background-color: var(--c-primary);
  }
  @media only screen and (max-width: 860px) {
    .aside::before {
      inset: var(--l-header) 0 0 0;
      height: 50px;
    }
  }
  @media only screen and (max-width: 768px) {
    .aside::before {
      inset: 55px 0 0 0;
    }
  }
}
/* ------------------------------------------------------------
 * 不在 Scope 裡的元件（避免被 Scope 限制）
 * ------------------------------------------------------------ */
.article-hero {
  position: relative;
}
.article-hero::before {
  content: "";
  position: absolute;
  inset: 0 0 0 0;
  background: rgba(92, 92, 92, 0.77);
  backdrop-filter: blur(15px);
}

@scope (.landing-page .content) {
  :scope {
    pointer-events: none;
    position: relative;
    flex: 1 1 100%;
    display: flex;
    flex-direction: column;
  }
  :scope .container {
    flex: 1 1 100%;
  }
  :scope .container-left {
    position: relative;
  }
  :scope .container-left::before {
    content: "";
    position: absolute;
    inset: -50px 0 0 0;
    border-right: 1px solid #e0e0e0;
  }
  :scope .container-right {
    pointer-events: auto;
    position: relative;
    z-index: 2;
    padding: 35px;
    min-width: 250px;
    transform: translateY(-50px);
    padding-left: -100px;
  }
  :scope .container-right::after {
    content: "";
    position: absolute;
    inset: 0 0 -50px -100%;
    background: rgba(255, 255, 255, 0.85);
    box-shadow: 0 10px 25px rgba(58, 58, 61, 0.25);
    z-index: 1;
    backdrop-filter: blur(10px);
  }
  @media only screen and (max-width: 860px) {
    :scope .container-right {
      margin-right: 15px;
      margin-left: 0;
    }
  }
  :scope .container-right .page__cover {
    background: url(/media/templates/site/asp/images/default_cover.png) no-repeat center/cover;
    border-radius: 5px;
    aspect-ratio: 2.5/1;
    overflow: hidden;
    transform: translateY(-25px);
  }
  :scope .container-right .page__cover img {
    object-fit: cover;
    object-position: center center;
    width: 100%;
    height: 100%;
  }
  @media only screen and (max-width: 860px) {
    :scope .container-right .page__cover {
      transform: translateY(0);
      margin: 0 -20px;
      border-radius: 5px 5px 0 0;
    }
  }
  :scope .container-right .page__content {
    color: #3a3a3d;
    padding-top: 15px;
  }
  :scope .container-right .page__content p {
    margin: 0;
  }
  :scope .container-right .page__title {
    font-size: 30px;
    font-weight: 500;
    line-height: 1.3;
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(58, 58, 61, 0.1);
    margin-bottom: 20px;
  }
  :scope .container-right .page__inner {
    display: flex;
    flex-direction: column;
  }
  :scope .container-right .page__img {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }
  :scope .container-right .page__img img {
    object-fit: cover;
    aspect-ratio: 3/2;
  }
  @media only screen and (max-width: 551px) {
    :scope .container-right .page__img {
      grid-template-columns: 1fr;
    }
  }
  :scope .container-right .page__intro {
    padding-top: 20px;
  }
  :scope .container-right .page__desc {
    padding: 25px 0;
  }
  :scope .container-right .page__desc .item {
    padding: 15px 0;
  }
  :scope .container-right .page__desc .item .sec-title {
    color: rgba(58, 58, 61, 0.7);
    font-weight: 400;
    font-size: 15px;
    line-height: 1;
    padding-bottom: 10px;
    margin-bottom: 5px;
    border-bottom: 1px solid rgba(58, 58, 61, 0.15);
  }
  :scope .container-right .page__desc.indoor-play .sec-title {
    color: #5fbc9a;
  }
  :scope .container-right .page__desc.special-meal .sec-title {
    color: #e06d3f;
  }
  :scope .container-right .page__desc.old-clothes .sec-title {
    color: #9c3f17;
  }
  :scope .container-right .page__desc.guide-trip .sec-title {
    color: #53b85b;
  }
  :scope .container-right .page__desc.water-play .sec-title {
    color: #53b6ca;
  }
  :scope .container-right .page__desc.sea-play .sec-title {
    color: #2589ab;
  }
  :scope .container-right .page__desc.hand-made .sec-title {
    color: #a88f3f;
  }
  :scope .container-right .page__desc.extreme-play .sec-title {
    color: #5030af;
  }
  :scope .container-right .page__register {
    margin-top: 15px;
    display: block;
    text-decoration: none;
    width: 100%;
    padding: 5px;
    text-align: center;
    border-radius: 3px;
    color: #fff;
    transition: transform 300ms, box-shadow 300ms;
  }
  :scope .container-right .page__register:hover {
    transform: translate(0, -1px);
  }
  :scope .container-right .page__register.indoor-play {
    background-color: #5fbc9a;
  }
  :scope .container-right .page__register.indoor-play:hover {
    box-shadow: 0 5px 10px rgba(95, 188, 154, 0.3);
  }
  :scope .container-right .page__register.special-meal {
    background-color: #e06d3f;
  }
  :scope .container-right .page__register.special-meal:hover {
    box-shadow: 0 5px 10px rgba(224, 109, 63, 0.3);
  }
  :scope .container-right .page__register.old-clothes {
    background-color: #9c3f17;
  }
  :scope .container-right .page__register.old-clothes:hover {
    box-shadow: 0 5px 10px rgba(156, 63, 23, 0.3);
  }
  :scope .container-right .page__register.guide-trip {
    background-color: #53b85b;
  }
  :scope .container-right .page__register.guide-trip:hover {
    box-shadow: 0 5px 10px rgba(83, 184, 91, 0.3);
  }
  :scope .container-right .page__register.water-play {
    background-color: #53b6ca;
  }
  :scope .container-right .page__register.water-play:hover {
    box-shadow: 0 5px 10px rgba(83, 182, 202, 0.3);
  }
  :scope .container-right .page__register.sea-play {
    background-color: #2589ab;
  }
  :scope .container-right .page__register.sea-play:hover {
    box-shadow: 0 5px 10px rgba(37, 137, 171, 0.3);
  }
  :scope .container-right .page__register.hand-made {
    background-color: #a88f3f;
  }
  :scope .container-right .page__register.hand-made:hover {
    box-shadow: 0 5px 10px rgba(168, 143, 63, 0.3);
  }
  :scope .container-right .page__register.extreme-play {
    background-color: #5030af;
  }
  :scope .container-right .page__register.extreme-play:hover {
    box-shadow: 0 5px 10px rgba(80, 48, 175, 0.3);
  }
  :scope .container-right .page__contact-list {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    padding-top: 20px;
    gap: 10px;
  }
  :scope .container-right .page__tele {
    font-size: 18px;
    padding-top: 15px;
  }
  :scope .container-right .page__tele a {
    text-decoration: none;
    color: #335fe5;
  }
  :scope .container-right .page__contact-item {
    display: inline-block;
    width: 50px;
    height: 50px;
    transition: transform 300ms, box-shadow 300ms;
    border-radius: 50%;
  }
  :scope .container-right .page__contact-item:hover {
    transform: translateY(-2px);
  }
  :scope .container-right .page__contact-item.line {
    background: url(/media/templates/site/asp/images/ic_line.png) no-repeat center/contain;
  }
  :scope .container-right .page__contact-item.line:hover {
    box-shadow: 0 5px 10px rgba(82, 198, 56, 0.3);
  }
  :scope .container-right .page__contact-item.wechat {
    background: url(/media/templates/site/asp/images/ic_wechat.png) no-repeat center/contain;
  }
  :scope .container-right .page__contact-item.wechat:hover {
    box-shadow: 0 5px 10px rgba(47, 193, 28, 0.3);
  }
  :scope .container-right .page__contact-item.fb {
    background: url(/media/templates/site/asp/images/ic_fb.png) no-repeat center/contain;
  }
  :scope .container-right .page__contact-item.fb:hover {
    box-shadow: 0 5px 10px rgba(51, 80, 209, 0.3);
  }
  :scope .container-right .page__contact-item.ig {
    background: url(/media/templates/site/asp/images/ic_ig.png) no-repeat center/contain;
  }
  :scope .container-right .page__contact-item.ig:hover {
    box-shadow: 0 5px 10px rgba(213, 61, 89, 0.3);
  }
  :scope .container-right .page__contact-item.tele {
    background: url(/media/templates/site/asp/images/ic_phone.png) no-repeat center/contain;
  }
  :scope .container-right .page__contact-item.tele:hover {
    box-shadow: 0 5px 10px rgba(82, 198, 56, 0.3);
  }
  :scope .container-right .page__contact-item.mail {
    background: url(/media/templates/site/asp/images/ic_email.png) no-repeat center/contain;
  }
  :scope .container-right .page__contact-item.mail:hover {
    box-shadow: 0 5px 10px rgba(89, 91, 101, 0.3);
  }
  :scope .content-inner {
    position: relative;
    z-index: 5;
  }
  :scope .content-inner .article-prev {
    padding-bottom: 25px;
    display: flex;
    align-items: center;
    gap: 10px;
  }
  :scope .content-inner .article-prev_link {
    font-size: 14px;
    color: #aaa;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: color 300ms;
  }
  :scope .content-inner .article-prev_link:hover {
    color: #555;
  }
  :scope .content-inner .article-prev_link:hover::before {
    transform: translateX(-2px);
    opacity: 1;
  }
  :scope .content-inner .article-prev_link::before {
    content: "";
    width: 13px;
    height: 13px;
    display: block;
    background: url(../images/arrow_left.png) no-repeat center right/contain;
    opacity: 0.5;
    transition: transform 300ms, opacity 300ms;
  }
  :scope .content-inner h3 {
    font-size: 22px;
    position: relative;
  }
  :scope .content-inner h3::before {
    content: "";
    position: absolute;
    width: 3px;
    left: -35px;
    top: 0;
    bottom: 0;
    background: var(--c-primary);
  }
  :scope .content-inner h4 {
    font-size: 15px;
    padding: 25px 0 15px;
    margin-bottom: 15px;
    border-bottom: 1px solid #CFCFCF;
  }
  :scope .content-inner h5 {
    font-size: 13px;
    color: #9A9A9A;
  }
  :scope .content-inner h6 {
    font-size: 22px;
    display: flex;
    align-items: flex-end;
    gap: 15px;
    flex-wrap: wrap;
    font-weight: 400;
  }
  :scope .content-inner h6 .work-era {
    font-size: 15px;
    color: #9A9A9A;
  }
  :scope .content-inner p {
    margin-bottom: 20px;
  }
  @media only screen and (max-width: 551px) {
    :scope .content-inner p {
      font-size: 15px;
    }
  }
  @media only screen and (max-width: 375px) {
    :scope .content-inner p {
      font-size: 13px;
    }
  }
  :scope .content-inner img {
    width: min(100%, 390px);
  }
  :scope .content-inner .work-wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 100px 50px;
    padding-top: 35px;
  }
  :scope .content-inner .work-wrapper .work-item {
    text-decoration: none;
    color: #aaa;
    opacity: 0;
    transform: translateY(15px);
    transition: opacity 350ms ease, transform 500ms ease;
  }
  :scope .content-inner .work-wrapper .work-item.in-view {
    opacity: 1;
    transform: translateY(0);
  }
  :scope .content-inner .work-wrapper .work-item_img {
    width: 100%;
    aspect-ratio: 1/1;
    padding-bottom: 15px;
    overflow: hidden;
    border-radius: 5px;
    transition: box-shadow 600ms;
  }
  :scope .content-inner .work-wrapper .work-item_img img {
    width: 100%;
    aspect-ratio: 1/1;
    object-fit: contain;
    transition: transform 600ms, object-ratio 600ms;
  }
  :scope .content-inner .work-wrapper .work-item_title {
    font-size: 17px;
    color: #000;
    transition: color 300ms;
    padding-top: 15px;
  }
  :scope .content-inner .work-wrapper .work-item_author {
    font-size: 14px;
    color: #7e7e7e;
    padding-top: 3px;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  :scope .content-inner .work-wrapper .work-item_author::after {
    content: "";
    width: 0;
    display: block;
    height: 1px;
    background-color: var(--c-primary);
    transition: width 500ms;
  }
  :scope .content-inner .work-wrapper .work-item_source {
    font-size: 13px;
    color: #a7a7a7;
    padding-top: 9px;
    display: block;
    opacity: 0;
    transform: translateY(-2px);
    transition: opacity 300ms, transform 300ms;
  }
  :scope .content-inner .work-wrapper .work-item_year {
    font-size: 15px;
    color: #a7a7a7;
    padding-top: 3px;
    opacity: 0;
    transform: translateY(-2px);
    transition: opacity 550ms ease-in-out, transform 550ms ease-in-out;
  }
  :scope .content-inner .work-wrapper .work-item:hover .work-item_img {
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.25);
  }
  :scope .content-inner .work-wrapper .work-item:hover .work-item_img img {
    transform: scale(1.85);
  }
  :scope .content-inner .work-wrapper .work-item:hover .work-item_title {
    color: var(--c-primary);
  }
  :scope .content-inner .work-wrapper .work-item:hover .work-item_author::after {
    width: 100%;
  }
  :scope .content-inner .work-wrapper .work-item:hover .work-item_source {
    opacity: 1;
    transform: translateY(0);
  }
  :scope .content-inner .work-wrapper .work-item:hover .work-item_year {
    opacity: 1;
    transform: translateY(0);
  }
}

/*# sourceMappingURL=page.css.map */