@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Noto+Sans+TC:wght@100..900&display=swap');


/************************************************
  RESET
*************************************************/
html, body { background: #ededed; height: 100%; margin: 0; }
body { display: flex; flex-direction: column; }
body, html, h1, h2, h3, h4, h5, h6, p, a, span, div, input, textarea, select, button, .entry-content, .site-title, .menu, nav {   font-family: "DM Sans",  "Noto Sans TC",sans-serif !important; margin: 0; }
h1, h2, h3, h4, h5, h6, p, a, span { position: relative;  }
.off-canvas-wrapper { flex: 1 0 auto; display: flex; flex-direction: column; }
.off-canvas-content { flex: 1 0 auto; }

.container-fluid{padding-left: 60px;padding-right: 60px}
.work-image{margin-bottom: 20px}
.work-item{margin-bottom: 60px}
#menu-main li:last-child a{padding-right: 0 !important}
.work-title{font-weight: 400 !important}
.taxonomy-label{color: #999 !important}
.mt-3 { margin-top: calc( var(--bs-gutter-x)) !important; } 


/************************************************
  GLOBAL - Typography
*************************************************/
h1, h2, h3, h4, h5, h6 { font-weight: 300; }
h1 { font-size: 3.5rem; line-height: 1.15;letter-spacing: 2px;font-weight: 500 }
h2 { font-size: 2.5rem; line-height: 1.15; letter-spacing: 1px;font-weight: 400}
h3 { font-size: 1.75rem; line-height: 1.2; }
h4 { font-size: 1.8rem; line-height: 1.25; }
h5 { font-size: 1.2rem; line-height: 1.3; }
h6 { font-size: 0.85rem; line-height: 1.3; }
h1.extra-large { font-size: 5.2em;font-weight: 400 }
p { font-weight: 300; line-height: 1.4; font-size: 1.2rem; }
a { text-decoration: none; color: inherit; transition: color 0.3s ease; }
a:hover { color: #969696; }

/************************************************
  GLOBAL - Header
*************************************************/
body { padding-top: 80px; }
.header { padding: 30px 0; position: fixed; top: 0; left: 0; right: 0; width: 100%; z-index: 1000; mix-blend-mode: difference; transition: transform 0.3s ease-in-out; will-change: transform; }
.header.header-hidden { transform: translateY(-100%) !important; }
.header * { color: #fff !important; }
.logo { height: 20px; filter: invert(1); margin-left: 3px}
.main-navigation { float: right; }
.main-navigation .nav-link { color: #000 !important; text-decoration: none; }
.main-navigation .nav-link:hover { color: #333 !important; opacity: 0.8; }
.menu .button, .menu a { padding: 0 1rem; }
.menu .active > a { background-color: transparent; }

/************************************************
  GLOBAL - Work Items Animation
*************************************************/
.work-item { opacity: 1; transition: opacity 0.6s ease-in-out; }
.work-item.fade-in { opacity: 0; animation: fadeInUp 0.6s ease-out forwards; }

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/************************************************
  GLOBAL - Footer
*************************************************/
.footer { flex-shrink: 0; padding: 1rem 0; margin-top: auto; clear: both; }
.footer .row { align-items: flex-end; }

/************************************************
  GLOBAL - Utility
*************************************************/
.margin-10-bottom { margin-bottom: 10px; }
.margin-20-bottom { margin-bottom: 20px; }
.margin-30-bottom { margin-bottom: 30px; }
.margin-40-bottom { margin-bottom: 40px; }
.margin-60-bottom { margin-bottom: 60px; }
.margin-100-bottom { margin-bottom: 100px; }
.margin-120-bottom { margin-bottom: 120px; }
.margin-160-bottom { margin-bottom: 160px; }
.margin-180-bottom { margin-bottom: 180px; }

.margin-240-bottom { margin-bottom: 240px; }
.margin-360-bottom { margin-bottom: 360px; }
.page-inner { padding-top: 120px; }

/************************************************
  GLOBAL - WP Content
*************************************************/
.page-title .vcard { border: 0; padding: 0; }
.byline { color: #999; }
.entry-content img { max-width: 100%; height: auto; }
.entry-content .alignleft, .entry-content img.alignleft { margin-right: 1.5em; display: inline; float: left; }
.entry-content .alignright, .entry-content img.alignright { margin-left: 1.5em; display: inline; float: right; }
.entry-content .aligncenter, .entry-content img.aligncenter { margin-right: auto; margin-left: auto; display: block; clear: both; }
.entry-content video, .entry-content object { max-width: 100%; height: auto; }
.entry-content pre { background: #eee; border: 1px solid #cecece; padding: 10px; }
.wp-caption { max-width: 100%; background: #eee; padding: 5px; }
.wp-caption img { max-width: 100%; margin-bottom: 0; width: 100%; }
.wp-caption p.wp-caption-text { font-size: 0.85em; margin: 4px 0 7px; text-align: center; }
.page-navigation { margin-top: 1rem; }
.sidebar li { list-style: none; }
.widget ul { margin: 0; }
body#tinymce { margin: 20px; }
.gform_body ul { list-style: none outside none; margin: 0; }

/************************************************
  GLOBAL - WP Gallery
*************************************************/
.gallery { max-width: 100%; margin-right: -15px; margin-left: -15px; }
.gallery::before, .gallery::after { content: ' '; display: table; }
.gallery::after { clear: both; }
.gallery.gallery-columns-1 > dl { width: 100%; float: left; padding: 0 0.625rem; }
.gallery.gallery-columns-2 > dl { width: 50%; float: left; padding: 0 0.625rem; }
.gallery.gallery-columns-3 > dl { width: 33.33333%; float: left; padding: 0 0.625rem; }
.gallery.gallery-columns-4 > dl { width: 25%; float: left; padding: 0 0.625rem; }
.gallery.gallery-columns-5 > dl { width: 20%; float: left; padding: 0 0.625rem; }
.gallery.gallery-columns-6 > dl { width: 16.66667%; float: left; padding: 0 0.625rem; }
.gallery.gallery-columns-7 > dl { width: 14.28571%; float: left; padding: 0 0.625rem; }
.gallery.gallery-columns-8 > dl { width: 12.5%; float: left; padding: 0 0.625rem; }
@media print, screen and (min-width: 40em) {
  .gallery [class*="gallery-columns-"] > dl { padding: 0 0.9375rem; }
}
.gallery dl { width: 100%; float: left; padding: 0 0.9375rem; }
.gallery dl:last-child:not(:first-child) { float: right; }

/************************************************
  GLOBAL - Category Tags
*************************************************/
.cat-list { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; }
.cat-tag , .work-cat-tag  h5{ display: inline-block; background: #fff !important; color: #000 !important; padding: 4px 8px; font-size: 0.8rem !important; line-height: 1.3 !important; text-decoration: none; transition: all 0.3s ease; font-weight: 400 !important; cursor: pointer; }
.work-cat-tag h5 { margin: 0; font-weight: 400; }
.cat-tag:hover, .work-cat-tag:hover { background: #f5f5f5; }
.work-cat-tag.active h5 { background: #000; color: #fff; }
.work-categories { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 20px;}

/************************************************
  PAGE - Home
*************************************************/
.banner.fullscreen { height: 100vh; display: flex; align-items: center; justify-content: center; background-color: #1a1a2e; color: #fff; position: relative; overflow: hidden; }
.banner-video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.intro { display: flex; flex-direction: column; align-items: center; justify-content: center; }
.sections-relative-wrapper .section { position: relative; width: 100%; }
.sections-relative-wrapper-block .section { position: relative; width: 100%; margin-bottom: 80px; }
.section-bg { position: relative; width: 100%; height: 0; padding-bottom: 66.67%; overflow: hidden; background-position: center center !important;margin-bottom: 20px }
.overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 1; z-index: 10; pointer-events: none; display: flex; align-items: center; justify-content: center; }
.view-all-projects{display: inline-block; padding-right: 26px; text-decoration: none; position: relative;}
.view-all-projects::after{content: ''; position: absolute; right: 0; top: 0; width: 18px; height: 18px; background: url('../images/icon-arrow.svg') no-repeat center; background-size: 18px; opacity: 1; transition: all 0.3s ease;}
.view-all-projects:hover::after{opacity: 0.35; transform: translate(3px, -3px);}

/************************************************
  PAGE - Work (Filter & View Toggle)
*************************************************/
.filter-list { color: #000; }
.filter-item { text-decoration: none; color: #969696; transition: color 0.3s ease; }
.filter-item:hover { color: #969696; }
.filter-item.active { color: #000; }
.filter-list.all-active .filter-item { color: #000; }
.filter-list.all-active .filter-item:hover { color: #969696; }
.work-list .row.loading { opacity: 0.5; pointer-events: none; transition: opacity 0.3s ease; }
.view-toggle { display: flex; list-style: none; margin: 0; padding: 0; float: right; gap: 1rem; }
.view-toggle li { display: inline-block; }
.view-btn { cursor: pointer; transition: opacity 0.3s ease; }
.view-btn img { width: 24px;  height: 24px; display: block; }
.view-btn:hover { opacity: 0.6; }
.view-btn.active { opacity: 1; }
.flex-direction-nav a{color: #666;}
.flex-direction-nav a::before,
.flex-direction-nav a::after{display: none !important;}
.flex-direction-nav .flex-prev{left: 20px !important;opacity: 1 !important;}
.flex-direction-nav .flex-next{right: 20px !important;opacity: 1 !important;}

/************************************************
  PAGE - Work (Word View)
*************************************************/
.work-list-word { display: none; }
.work-list-title { list-style: none; margin: 0; padding: 0; color: #999; }
.work-list-title .work-list-item {  padding:  0; }
.work-list-title h6 { margin: 0; font-weight: 400; color: #969696; }
.sort-header { cursor: pointer; transition: color 0.3s ease; user-select: none; }
.sort-header:hover { color: #969696; }
.sort-header.active { color: #000;  }
.sort-arrow { display: inline-block; margin-left: 0.25rem; width: 8px; height: 8px; background-image: url('../images/icon-sort.svg'); background-size: contain; background-repeat: no-repeat; background-position: center; opacity: 0; transition: opacity 0.3s ease; }
.sort-arrow.asc { opacity: 1; }
.sort-arrow.desc { opacity: 1; transform: rotate(180deg); }
.work-list-items { list-style: none; margin: 0; padding: 0; }
.work-list-item { padding: 5px 0; }
.work-list-item a { text-decoration: none; color: inherit; display: block; transition: opacity 0.3s ease; }
.work-list-item a:hover { opacity: 0.6; }
.work-list-item .work-name { margin: 0; }
.work-list-item img { max-width: 100%; height: auto; }
.thumbnail-16-9 { position: relative; width: 100%; padding-bottom: 56.25%; overflow: hidden; background: #f0f0f0; }
.thumbnail-16-9 img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.overlay-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #333; z-index: 2; opacity: 1; }
.thumbnail-1670-300 { position: relative; width: 100%; padding-bottom: 14.916%; overflow: hidden; background: #f0f0f0; }
.thumbnail-1670-300 img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.thumbnail-1920-1280 { position: relative; width: 100%; padding-bottom: 66.667%; overflow: hidden; background: #f0f0f0; }
.thumbnail-1920-1280 img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }

/************************************************
  PAGE - Single Work
*************************************************/
.single-work-banner { width: 100%; height: 100vh; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; margin-bottom: 120px}
.hero-media { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.flexslider { margin: 0 !important; background: transparent !important; border: none !important; box-shadow: none; }
.flexslider .slides { margin: 0; padding: 0; }
.flexslider .slides > li { margin: 0; padding: 0; }
.flex-control-nav { bottom: 10px; }
.flex-control-paging li a { background: #fff !important;box-shadow:none !important}
.flex-control-paging li a.flex-active { background: #949494 !important; }
.flex-control-nav{position: absolute !important;;bottom: 10px !important;z-index: 2;;}
.flex-direction-nav { position: absolute; width: 100%; top: 50%; transform: translateY(-50%); z-index: 3; }
.flex-direction-nav a { position: absolute; display: block; text-decoration: none; color: #666 !important; font-size: 0.9rem; opacity: 0.8; transition: opacity 0.3s ease; width: auto !important; height: auto !important; text-indent: 0; overflow: visible; font-size: 1.6rem;text-shadow:  none !important;}
.flex-direction-nav a:before { display: none; }
.flex-direction-nav a:hover { opacity: 1; }
.flex-direction-nav .flex-prev { left: 20px; }
.flex-direction-nav .flex-next { right: 20px; }

/************************************************
  PAGE - About
*************************************************/
.about-hero-banner { width: 100%; height: 100vh; }

/************************************************
  PAGE - Contact
*************************************************/
.social-links { list-style: none; margin: 0; padding: 0; }
.social-links li { display: block; }
.social-links li p { display: inline-block; background: #fff; color: #000; padding: 4px 8px; margin: 0 0 0.25rem 0; font-size: 0.8rem; line-height: 1.3; }
.client-list { list-style: none; margin: 0; padding: 0; }