@charset "UTF-8";
/* =============================================================================
      ____    __  __  __  _____
    /\  _ _`\/\ \/\ \/\ \/ ____/
    \ \ \  \ \ \ \ \ \ \ \ \_____
     \ \ \  \ \ \ \ \ \ \ \_____ \
      \ \ \__\ \ \ \/  \/ / ____\ \
       \ \_____/\ \______/ /\_____/
        \/____/  \/_____/  \/____/

    Don't Worry Never Crash
   ========================================================================== */
/* =============================================================================
   BASIC
   ========================================================================== */
:root {
	--main-color: #348385;
	--second-color: #467240;
	--text-color: #333;
	--muted-color: #666;
	--light-color: #dbe4d6;
	--white-color: #fff;
	--font-sans: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
	--font-serif: "Noto Serif TC", "Songti TC", serif;
	--font-en: "Lato", Arial, sans-serif;
	--content-width: 1200px;
	--header-height: 110px;
}
*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{ margin: 0; background: var(--light-color); color: var(--text-color); font-family: var(--font-sans); }
body.menu-open{ overflow: hidden; }
body.video-open{ overflow: hidden; }
body.is-loading{ overflow: hidden; }
img{ display: block; max-width: 100%; height: auto; }
a{ color: inherit; text-decoration: none; }
button, input, select, textarea{ font: inherit; }
button{ color: inherit; }
.inner-width{ width: min(var(--content-width), calc(100% - 80px)); margin-inline: auto; }
.skip_link{ position: fixed; z-index: 10000; top: 10px; left: 10px; padding: 10px 14px; background: var(--text-color); color: var(--white-color); transform: translateY(-150%); }
.skip_link:focus{ transform: translateY(0); }
main section[id]{ scroll-margin-top: var(--header-height); }
#content{ --body-bg-height: 3413px; --body-bg-overflow: 720px; --body-parallax-y: 0px; position: relative; z-index: 2; overflow: clip; isolation: isolate; }
#content::before{ position: absolute; z-index: -2; top: 0; right: 0; left: 0; height: calc(var(--body-bg-height) + var(--body-bg-overflow)); background: url("../images/common/body-bg.png") center var(--body-parallax-y)/auto var(--body-bg-height) no-repeat; content: ""; pointer-events: none; }
.subpage #content::after{ position: absolute; z-index: -1; top: 0; right: 0; bottom: 0; left: 0; background: linear-gradient(to top, var(--light-color) 0, rgba(219, 228, 214, 0) 180px), linear-gradient(180deg, rgba(219, 228, 214, .4) 33.668%, var(--light-color) 78.757%); content: ""; pointer-events: none; }
@media only screen and (min-width: 993px) and (max-width: 1920px) {
	#content::before{ background-size: 100% auto; }
}
@media only screen and (min-width: 1921px) {
	#content::before{ background-position: center top; background-size: cover; }
}
#content>section{ padding: 6rem 0; }
#content>.same_bg_box{ padding-top: 0; }
.btn_more{ display: inline-flex; min-height: 40px; align-items: center; gap: 10px; padding: 9px 20px; border-radius: 22px; background: var(--main-color); color: var(--white-color); font: 700 16px/20px var(--font-en); transition: background-color .25s; }
.btn_more::after{ width: 14px; height: 8px; background: url("../images/icons/arrow-right.svg") center/contain no-repeat; content: ""; transition: transform .25s; }
.btn_more:focus-visible{ background: #286b6d; }
.btn_more:focus-visible::after{ transform: translateX(4px); }
.section_title{ width: max-content; margin: 0 auto 40px; padding-bottom: 8px; border-bottom: 1px solid var(--second-color); color: var(--second-color); font: 700 30px/1.4 var(--font-serif); letter-spacing: .2em; }
/*---loading_box---*/
.loading_box{ position: fixed; z-index: 20000; inset: 0; display: grid; overflow: hidden; place-items: center; background: linear-gradient(106deg, #467240 0%, #538350 49.89%, #6a9f6c 100.52%); opacity: 1; visibility: visible; transition: opacity .8s ease, visibility 0s linear .8s; }
.loading_icon{ position: relative; display: block; width: 76px; height: 76px; }
.loading_icon i{ position: absolute; top: 48px; display: block; width: 28px; height: 28px; will-change: transform, opacity; }
.loading_icon .square, .loading_icon .polygon{ left: 4px; }
.loading_icon .circle, .loading_icon .triangle{ right: 4px; }
.loading_icon .square{ border-radius: 3px; background: #f7f4dc; animation: loading-square 3s linear infinite; }
.loading_icon .circle{ border-radius: 50%; background: #d3ed78; animation: loading-circle 3s linear infinite; }
.loading_icon .polygon{ background: #dcebc4; clip-path: polygon(50% 0, 98% 35%, 80% 92%, 20% 92%, 2% 35%); animation: loading-polygon 3s linear infinite; }
.loading_icon .triangle{ top: 45px; right: 1px; width: 34px; height: 34px; background: #a9d58a; clip-path: polygon(50% 0, 100% 86.6%, 0 86.6%); animation: loading-triangle 3s linear infinite; }
.loading_box.is-hidden{ opacity: 0; visibility: hidden; pointer-events: none; }
.loading_box.is-hidden .loading_icon i{ animation-play-state: paused; }
@keyframes loading-square {
	0%{ opacity: 1; transform: translateY(-48px) rotate(-18deg); animation-timing-function: cubic-bezier(.55, .055, .675, .19); }
	30%{ opacity: 1; }
	33.333%, 63.333%{ opacity: 0; transform: translateY(0) rotate(-138deg); }
	66.666%{ opacity: 1; transform: translateY(0) rotate(-258deg); animation-timing-function: cubic-bezier(.215, .61, .355, 1); }
	100%{ opacity: 1; transform: translateY(-48px) rotate(-378deg); }
}
@keyframes loading-circle {
	0%{ opacity: 1; transform: translateY(0) scale(1.08, .8); }
	4%{ transform: translateY(0) scale(.96, 1.08); }
	8%, 12%{ transform: translateY(0) scale(1); animation-timing-function: cubic-bezier(.215, .61, .355, 1); }
	33.333%{ opacity: 1; transform: translateY(-48px) scale(1); animation-timing-function: cubic-bezier(.55, .055, .675, .19); }
	44%{ transform: translateY(-10px) scale(1); }
	47%{ opacity: 1; transform: translateY(0) scale(1.08, .82); }
	49%{ opacity: 1; transform: translateY(0) scale(.97, 1.06); }
	50%, 100%{ opacity: 0; transform: translateY(0) scale(1); }
}
@keyframes loading-polygon {
	0%, 30%{ opacity: 0; transform: translateY(0) rotate(175deg); }
	33.333%{ opacity: 1; transform: translateY(0) rotate(175deg); animation-timing-function: cubic-bezier(.165, .84, .44, 1); }
	50%{ opacity: 1; transform: translateY(-48px) rotate(100deg); animation-timing-function: cubic-bezier(.55, .055, .675, .19); }
	63.333%{ opacity: 1; }
	66.666%, 100%{ opacity: 0; transform: translateY(0) rotate(26deg); }
}
@keyframes loading-triangle {
	0%, 46.666%{ opacity: 0; transform: translateY(0) rotate(131deg); }
	50%{ opacity: 1; transform: translateY(0) rotate(131deg) scale(1.08, .82); }
	54%{ transform: translateY(0) rotate(138deg) scale(.97, 1.06); }
	58%{ transform: translateY(0) rotate(145deg) scale(1); animation-timing-function: cubic-bezier(.215, .61, .355, 1); }
	76.666%{ opacity: 1; transform: translateY(-48px) rotate(180deg); animation-timing-function: cubic-bezier(.55, .055, .675, .19); }
	90%{ transform: translateY(-12px) rotate(218deg) scale(1); }
	93%{ opacity: 1; transform: translateY(0) rotate(227deg) scale(1.08, .82); }
	96.5%{ opacity: 1; transform: translateY(0) rotate(227deg) scale(.97, 1.06); }
	99%{ opacity: 1; transform: translateY(0) rotate(227deg) scale(1); }
	100%{ opacity: 0; transform: translateY(0) rotate(227deg) scale(1); }
}
/*------*/
@media only screen and (max-width: 992px) {
	#content>section{ padding: 4rem 0; }
}
@media only screen and (max-width: 576px) {
	.inner-width{ width: calc(100% - 40px); }
	#content>section{ padding: 3rem 0; }
	.section_title{ margin-bottom: 30px; font-size: 26px; }
}
/* =============================================================================
   BASIC END
   ========================================================================== */
/* =============================================================================
   HEADER
   ========================================================================== */
/*---header---*/
#header{ position: fixed; z-index: 1000; top: 0; left: 0; width: 100%; background: rgba(0, 0, 0, .1); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); transition: background-color .3s, box-shadow .3s; }
#header.is-scrolled{ background: rgba(54, 82, 53, .84); box-shadow: 0 8px 30px rgba(20, 47, 35, .18); }
.header_inner{ display: flex; height: var(--header-height); flex-direction: column; align-items: center; justify-content: flex-start; }
.logo{ display: flex; width: 76px; height: 60px; align-items: center; padding-top: 20px; }
.logo img{ width: 76px; height: 40px; }
.top_menu{ height: 50px; }
.top_menu>ul{ display: flex; margin: 0; padding: 0; list-style: none; }
.top_menu>ul>li>a{ display: flex; height: 50px; align-items: center; padding: 0 20px; color: var(--white-color); font-size: 16px; font-weight: 700; line-height: 20px; }
.top_menu>ul>li>a.cur{ color: #fff9da; }
.top_menu>ul>li>a:focus-visible{ color: #fff9da; }
.menu_btn, .menu_mask{ display: none; }
@media only screen and (max-width: 992px) {
	:root{ --header-height: 76px; }
	#content::before{ background-size: auto var(--body-bg-height); }
	.header_inner{ height: var(--header-height); flex-direction: row; justify-content: space-between; }
	.logo{ height: 54px; padding-top: 0; }
	.menu_btn{ position: relative; z-index: 3; display: block; width: 44px; height: 44px; padding: 10px; border: 0; background: transparent; cursor: pointer; }
	.menu_btn span{ display: block; width: 24px; height: 2px; margin: 5px 0; background: var(--white-color); transition: background-color .3s, transform .3s, opacity .3s; }
	.menu_btn.on span{ background: #7c9080; }
	.menu_btn.on span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
	.menu_btn.on span:nth-child(2){ opacity: 0; }
	.menu_btn.on span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }
	.top_menu{ position: fixed; z-index: 2; top: 0; right: -100%; width: min(360px, 86vw); height: 100dvh; padding: 90px 20px 30px; overflow-y: auto; background: #f3f7ef; transition: right .35s; }
	.top_menu.on{ right: 0; }
	.top_menu>ul{ display: block; }
	.top_menu>ul>li>a{ height: auto; padding: 16px 10px; border-bottom: 1px solid rgba(52, 131, 133, .18); color: var(--text-color); }
	.top_menu>ul>li>a.cur{ color: var(--main-color); }
	.top_menu>ul>li>a:focus-visible{ color: var(--main-color); }
	.menu_mask{ position: fixed; z-index: 1; inset: 0; display: block; width: 100vw; height: 100dvh; border: 0; background: rgba(28, 43, 31, .82); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); opacity: 0; pointer-events: none; transition: opacity .35s; }
	.menu_mask.on{ opacity: 1; pointer-events: auto; }
}
/*------*/
/* =============================================================================
   HEADER END
   ========================================================================== */
/* =============================================================================
   HOME
   ========================================================================== */
/*---hero_box---*/
.hero_box{ position: relative; min-height: 1000px; overflow: hidden; }
#content>.hero_box{ padding-top: calc(6rem + var(--header-height)); }
.hero_box img{ pointer-events: none; -webkit-user-drag: none; user-select: none; }
.hero_inner{ position: relative; z-index: 1; display: flex; min-height: 790px; flex-direction: column; align-items: center; }
.hero_box .title_info{ position: relative; z-index: 2; color: var(--white-color); font-family: var(--font-serif); text-align: center; text-shadow: 0 0 30px rgba(46, 46, 46, .58); }
.hero_box .subtitle{ margin: 0; font-size: 40px; font-weight: 600; letter-spacing: .2em; }
.hero_box .title{ margin: 8px 0 0; color: #fff9da; font-size: 70px; line-height: 1.3; letter-spacing: .02em; }
.product_media{ position: relative; z-index: 1; width: 388px; height: 342px; margin-top: 28px; filter: drop-shadow(0 0 30px rgba(240, 255, 203, .55)); }
.product_media img{ width: 100%; height: 100%; object-fit: contain; }
.hero_list{ display: grid; width: min(800px, 100%); grid-template-columns: repeat(4, 160px); justify-content: space-between; margin: 10px 0 0; padding: 0; list-style: none; }
.hero_item{ width: 160px; height: 160px; overflow: hidden; border: 10px solid var(--white-color); border-radius: 50%; background: var(--white-color); box-shadow: 0 8px 24px rgba(36, 71, 48, .14); }
.hero_item img{ width: 100%; height: 100%; object-fit: cover; }
@media only screen and (max-width: 992px) {
	#content>.hero_box{ padding-top: calc(4rem + var(--header-height)); }
	.hero_box{ min-height: 860px; }
	.hero_inner{ min-height: 680px; }
	.hero_box .subtitle{ font-size: 30px; }
	.hero_box .title{ font-size: 56px; }
	.product_media{ width: 340px; height: 300px; }
	.hero_list{ width: min(680px, 100%); grid-template-columns: repeat(4, minmax(0, 130px)); justify-content: center; gap: clamp(12px, 3vw, 32px); }
	.hero_item{ width: 100%; height: auto; aspect-ratio: 1; border-width: 8px; }
}
@media only screen and (max-width: 576px) {
	#content::before{ background-position: 58% var(--body-parallax-y); background-size: 160% auto; }
	#content>.hero_box{ padding-top: calc(3rem + var(--header-height)); }
	.hero_box{ min-height: 780px; }
	.hero_inner{ min-height: 610px; }
	.hero_box .subtitle{ font-size: clamp(20px, 6vw, 28px); letter-spacing: .12em; }
	.hero_box .title{ font-size: clamp(38px, 11vw, 52px); white-space: nowrap; }
	.product_media{ width: min(320px, 82vw); height: 280px; margin-top: 24px; }
	.hero_list{ width: min(410px, 100%); grid-template-columns: repeat(4, 1fr); gap: 10px; }
	.hero_item{ width: 100%; height: auto; aspect-ratio: 1; border-width: 5px; }
}
/*------*/
/*---about_box---*/
.about_inner{ position: relative; display: grid; min-height: 540px; grid-template-columns: 560px minmax(0, 1fr); align-items: start; }
.about_inner::after{ position: absolute; z-index: 0; top: 0; right: calc((100vw - min(var(--content-width), calc(100vw - 80px))) / -2); left: 350px; height: 540px; border: 1px solid rgba(255, 255, 255, .42); border-right: 0; border-radius: 280px 0 0 280px; background: linear-gradient(115deg, rgba(255, 255, 255, .38) 0%, rgba(255, 255, 255, .2) 55%, rgba(255, 255, 255, .12) 100%); box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .48), 0 18px 50px rgba(55, 91, 59, .08); -webkit-backdrop-filter: blur(18px) saturate(118%); backdrop-filter: blur(18px) saturate(118%); content: ""; }
.about_box .media{ position: relative; z-index: 1; top: calc(20% + 20px); width: 560px; height: 450px; }
.about_box .media img{ width: 100%; height: 100%; object-fit: cover; transform: translate3d(0, var(--about-parallax-y, 0px), 0); will-change: transform; }
.about_box .inner{ position: relative; z-index: 1; padding: 100px 0 0 40px; }
.about_box .subtitle{ margin: 0 0 4px; font: 600 20px/1.45 var(--font-serif); }
.about_box .title{ margin: 0 0 20px; color: var(--second-color); font: 700 40px/1.45 var(--font-serif); letter-spacing: .2em; }
.about_box .con{ max-width: 600px; color: var(--muted-color); font-size: 16px; line-height: 1.875; letter-spacing: .1em; }
.about_box .con p{ margin: 0 0 20px; }
.about_box .btn_more{ margin-top: 6px; }
@media only screen and (min-width: 577px) and (max-width: 1200px) {
	.about_box .media{ height: auto; aspect-ratio: 560/450; overflow: visible; }
	.about_box .media img{ object-fit: contain; }
}
@media only screen and (max-width: 1200px) {
	.about_inner{ grid-template-columns: 46% 54%; }
	.about_box .media{ width: 100%; }
	.about_box .inner{ padding: 70px 0 0 36px; }
}
@media only screen and (min-width: 577px) and (max-width: 992px) {
	.about_inner::after{ left: 20%; }
}
@media only screen and (max-width: 576px) {
	.about_inner{ display: block; }
	.about_inner::after{ top: 130px; right: -20px; bottom: 0; left: 10px; height: auto; border-radius: 40px 0 0 40px; }
	.about_box .media{ width: calc(100% - 20px); height: auto; aspect-ratio: 1.24; }
	.about_box .inner{ padding: 42px 20px 40px 40px; }
	.about_box .title{ font-size: 34px; }
}
/*------*/
/*---news_box---*/
.news_list{ display: grid; grid-template-columns: repeat(3, minmax(0, 360px)); justify-content: space-between; gap: 40px; }
.news_item{ overflow: hidden; border-radius: 40px; background: #fafafa; box-shadow: 0 0 10px rgba(0, 0, 0, .1); transition: transform .3s, box-shadow .3s; }
.news_item .media{ width: 100%; aspect-ratio: 1; overflow: hidden; }
.news_item .media img{ width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.news_info{ padding: 20px; }
.news_info time{ color: var(--main-color); font: 700 16px/1 var(--font-en); }
.news_info .title{ margin: 7px 0 5px; color: #222; font-size: 20px; font-weight: 500; }
.news_info .con{ margin: 0; overflow: hidden; color: var(--text-color); font-size: 16px; line-height: 20px; text-overflow: ellipsis; white-space: nowrap; }
.news_box .btn_more{ display: flex; width: max-content; margin: 40px auto 0; }
@media only screen and (max-width: 1200px) {
	.news_list{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media only screen and (min-width: 577px) and (max-width: 992px) {
	.home .news_list{ display: flex; justify-content: flex-start; gap: 22px; margin: 0 -40px; padding: 0 40px 12px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
	.home .news_list::-webkit-scrollbar{ display: none; }
	.home .news_item{ flex: 0 0 calc((100% - 44px)/2.5); }
	.news_item{ border-radius: 28px; }
}
@media only screen and (max-width: 576px) {
	.home .news_list{ display: flex; justify-content: flex-start; gap: 16px; margin: 0 -20px; padding: 0 20px 12px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
	.home .news_list::-webkit-scrollbar{ display: none; }
	.home .news_item{ flex: 0 0 calc((100% - 16px)/1.5); }
	.news_item{ border-radius: 28px; }
}
/*------*/
/*---video_box---*/
.video_list{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; }
.video_item{ display: block; min-width: 0; padding: 0; border: 0; background: transparent; color: inherit; cursor: pointer; font: inherit; text-align: left; }
.video_item .media{ position: relative; display: block; overflow: hidden; aspect-ratio: 16/9; border-radius: 40px; background: #c5d1c1; }
.video_item .media::before{ position: absolute; z-index: 2; top: 50%; left: 50%; width: 40px; height: 40px; background: url("../images/icons/play.svg") center/contain no-repeat; content: ""; transform: translate(-50%, -50%); transition: transform .25s; }
.video_item .media::after{ position: absolute; inset: 0; background: rgba(0, 0, 0, .2); content: ""; transition: background-color .3s; }
.video_item .media>img{ width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.video_item .title{ display: block; margin: 14px 0 0; font-size: 20px; font-weight: 500; text-align: center; }
.video_item:focus-visible{ outline: 3px solid var(--main-color); outline-offset: 5px; border-radius: 40px; }
@media only screen and (max-width: 992px) {
	.video_list{ gap: 28px 20px; }
	.video_item .media{ border-radius: 24px; }
}
@media only screen and (max-width: 576px) {
	.video_list{ grid-template-columns: 1fr; }
}
/*------*/
/* =============================================================================
   HOME END
   ========================================================================== */
/* =============================================================================
   SUBPAGE
   ========================================================================== */
.subpage #content{ margin-bottom: -30px; padding: calc(var(--header-height) + 100px) 0 30px; }
.page_panel{ overflow: hidden; border-radius: 30px; box-shadow: 0 4px 15px rgba(0, 0, 0, .1); }
.page_hero{ --page-hero-parallax-y: 0px; position: relative; display: grid; height: 359px; place-items: center; overflow: hidden; }
.page_hero::before{ position: absolute; z-index: 0; top: -90px; right: 0; bottom: -90px; left: 0; background-image: var(--page-hero-image); background-position: center var(--page-hero-position, 50%); background-repeat: no-repeat; background-size: cover; content: ""; pointer-events: none; transform: translate3d(0, var(--page-hero-parallax-y), 0); will-change: transform; }
.page_hero::after{ position: absolute; z-index: 1; inset: 0; background: rgba(70, 114, 64, .1); content: ""; pointer-events: none; }
.about_hero{ --page-hero-image: url("../images/pages/about/hero.jpg"); --page-hero-position: 40%; }
.use_hero{ --page-hero-image: url("../images/pages/use/hero.jpg"); --page-hero-position: 44%; }
.faq_hero{ --page-hero-image: url("../images/pages/faq/hero.jpg"); --page-hero-position: 50%; }
.page_title{ position: relative; z-index: 2; padding: 20px; text-align: center; }
.page_title h1{ margin: 0; color: var(--white-color); font: 700 34px/1.4 var(--font-serif); letter-spacing: .2em; }
.page_title p{ margin: 8px 0 0; color: #fff9da; font: 700 16px/1.3 var(--font-en); letter-spacing: .3em; }
/*---editor---*/
.editor{ color: #404040; font-size: 16px; line-height: 30px; letter-spacing: .04em; }
.editor h1, .editor h2, .editor h3, .editor h4, .editor h5, .editor h6{ font-weight: 700; }
.editor h1{ margin: 0 0 24px; color: var(--main-color); font: 700 40px/1.4 var(--font-serif); letter-spacing: .1em; }
.editor h2, .content_title h2{ position: relative; margin: 0 0 20px; padding-bottom: 5px; color: var(--second-color); font: 700 28px/1.4 var(--font-serif); letter-spacing: .05em; }
.editor h2::after, .content_title h2::after{ position: absolute; bottom: 0; left: 0; width: 40px; height: 1px; background: var(--main-color); content: ""; }
.editor h3{ margin: 0 0 20px; color: #3e523b; font-size: 20px; line-height: 1.5; }
.editor h4{ margin: 0 0 18px; color: #3e523b; font-size: 18px; line-height: 1.5; }
.editor h5{ margin: 0 0 16px; color: var(--main-color); font-size: 16px; line-height: 1.5; }
.editor h6{ margin: 0 0 16px; color: var(--muted-color); font-size: 15px; line-height: 1.5; }
.editor p, .editor ul, .editor ol, .editor blockquote{ margin: 0 0 20px; }
.editor p:last-child, .editor ul:last-child, .editor ol:last-child, .editor blockquote:last-child{ margin-bottom: 0; }
.editor ul, .editor ol{ padding-left: 1.5em; }
.editor a{ color: var(--main-color); text-decoration: underline; text-underline-offset: 3px; }
.editor img{ max-width: 100%; height: auto; }
/*------*/
/*---news_page---*/
.news_hero{ --page-hero-image: url("../images/pages/news/hero.jpg"); --page-hero-position: 52%; }
.news_content{ overflow: hidden; padding-bottom: 80px; border-radius: 0 0 30px 30px; background: rgba(255, 255, 255, .7); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.news_categories{ display: flex; min-height: 80px; align-items: center; justify-content: center; gap: 10px; padding: 15px 40px; background: rgba(255, 255, 255, .45); }
.news_categories a{ display: inline-flex; min-width: 112px; min-height: 42px; align-items: center; justify-content: center; padding: 8px 20px; border-radius: 24px; color: #4c6548; font-size: 16px; font-weight: 700; transition: background-color .25s, color .25s; }
.news_categories a.cur, .news_categories a:focus-visible{ background: var(--second-color); color: var(--white-color); }
.news_grid{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 30px; padding: 40px; }
.news_grid .news_item{ min-width: 0; }
.news_grid .news_info{ min-height: 128px; }
.news_grid .news_info .title{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pagination{ display: flex; align-items: center; justify-content: center; gap: 8px; padding: 0 40px; }
.pagination a{ display: grid; width: 36px; height: 36px; place-items: center; border-radius: 50%; color: #566953; font: 700 15px/1 var(--font-en); transition: background-color .25s, color .25s; }
.pagination a.cur, .pagination a:focus-visible{ background: var(--second-color); color: var(--white-color); }
.pagination .fa{ font-size: 20px; line-height: 1; }
/*------*/
/*---news_detail_page---*/
.news_detail_hero{ --page-hero-image: url("../images/pages/news/detail-hero.jpg"); --page-hero-position: 48%; }
.article_content{ overflow: hidden; padding: 80px 60px; border-radius: 0 0 30px 30px; background: rgba(255, 255, 255, .78); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.article_inner{ max-width: 960px; margin-inline: auto; }
.article_meta{ display: flex; align-items: center; gap: 12px; margin-bottom: 12px !important; color: var(--main-color); font-size: 15px; font-weight: 700; }
.article_meta span::after{ margin-left: 12px; color: #aab7a6; content: "/"; }
.article_inner h1{ position: relative; padding-bottom: 5px; font-size: 34px; letter-spacing: .06em; }
.article_inner h1::after{ position: absolute; bottom: 0; left: 0; width: 40px; height: 1px; background: var(--main-color); content: ""; }
.editor>img{ display: block; width: min(600px, 100%); margin: 40px auto; aspect-ratio: 4/3; border-radius: 5px; object-fit: cover; }
.article_lead{ font-weight: 700; }
.editor>strong{ display: block; margin: 0 0 20px; color: var(--second-color); font-size: inherit; font-weight: 700; }
.article_extra{ margin-top: 50px; }
.article_gallery{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.article_gallery_item{ min-width: 0; }
.article_gallery_item>a{ position: relative; display: block; overflow: hidden; aspect-ratio: 1; border-radius: 10px; background: #dce7d8; }
.article_gallery_item>a::after{ position: absolute; z-index: 1; inset: 0; background: rgba(20, 45, 25, .08); content: ""; transition: background-color .3s; }
.article_gallery_item img{ width: 100%; height: 100%; object-fit: cover; transition: transform .45s; }
.article_gallery_item .zoom_icon{ position: absolute; z-index: 2; right: 14px; bottom: 14px; display: grid; width: 42px; height: 42px; border: 1px solid rgba(255, 255, 255, .65); border-radius: 50%; place-items: center; background: rgba(52, 131, 133, .88); color: #fff; box-shadow: 0 5px 16px rgba(29, 72, 55, .18); }
.article_gallery_item .gallery_caption{ display: block; margin: 10px 2px 0; color: #556653; font-size: 14px; line-height: 24px; }
.article_gallery_item>a:focus-visible{ outline: 3px solid var(--main-color); outline-offset: 4px; }
.download_list{ display: grid; gap: 8px; }
.download_list a{ display: grid; min-height: 54px; grid-template-columns: 34px minmax(0, 1fr) 18px; align-items: center; gap: 12px; padding: 8px 14px; border: 1px solid rgba(70, 114, 64, .2); border-radius: 10px; background: rgba(255, 255, 255, .62); color: #3e523b; font-size: 14px; font-weight: 700; line-height: 22px; text-decoration: none; transition: border-color .25s, background-color .25s; }
.download_list .file_icon{ display: grid; width: 34px; height: 34px; place-items: center; border-radius: 50%; background: #e5f2f2; color: var(--main-color); font-size: 16px; }
.download_list .file_icon.pdf{ background: #f7e8e5; color: #b34f43; }
.download_list .file_icon.word{ background: #e5edf7; color: #3d6fa8; }
.download_list .file_icon.excel{ background: #e5f2e8; color: #3f8051; }
.download_list .file_icon.archive{ background: #f2eee2; color: #8a7134; }
.download_list>a>.fa-download{ color: var(--main-color); font-size: 15px; }
.download_list a:focus-visible{ outline: 2px solid var(--main-color); outline-offset: 3px; }
.article_actions{ display: flex; max-width: 960px; flex-direction: column; align-items: flex-start; gap: 15px; margin: 30px auto 0; padding-top: 20px; border-top: 1px solid rgba(70, 114, 64, .25); }
.share_list{ display: flex; align-items: center; gap: 8px; color: #556653; font-size: 14px; }
.share_list b{ margin-right: 5px; }
.share_list a{ display: grid; width: 40px; height: 40px; place-items: center; }
.share_list img{ width: 40px; height: 40px; }
.share_list a:last-child{ border-radius: 50%; background: #65c743; }
.share_list a:last-child img{ width: 20px; height: 20px; }
.btn_back{ display: inline-flex; min-height: 40px; align-items: center; gap: 10px; padding: 9px 20px; border-radius: 22px; background: var(--main-color); color: var(--white-color); font-size: 15px; font-weight: 700; transition: background-color .25s; }
.btn_back::before{ width: 14px; height: 8px; background: url("../images/icons/arrow-right.svg") center/contain no-repeat; content: ""; transform: rotate(180deg); transition: transform .25s; }
.btn_back:focus-visible{ background: #286b6d; }
.btn_back:focus-visible::before{ transform: translateX(-4px) rotate(180deg); }
/*------*/
.about_content{ overflow: hidden; border-radius: 0 0 30px 30px; background: rgba(255, 255, 255, .7); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.about_section{ padding: 80px 60px; }
.sdg_box>h3{ margin: 0 0 20px; color: #3e523b; font-size: 20px; line-height: 1.5; }
.content_title{ margin-bottom: 20px; padding-bottom: 20px; }
.content_title .subtitle{ margin: 0 0 2px; color: var(--muted-color); font-size: 16px; font-weight: 500; line-height: 20px; }
.content_title h2{ margin-bottom: 0; }
.about_media{ overflow: hidden; border-radius: 5px; }
.about_media img{ width: 100%; height: 100%; object-fit: cover; }
.about_brand{ display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 60px; }
.about_media.product{ height: 353px; overflow: visible; }
.about_media.product img{ object-fit: contain; }
.about_philosophy{ display: grid; min-height: 485px; grid-template-columns: 1fr 1fr; align-items: stretch; background: rgba(255, 255, 255, .5); }
.about_philosophy>.about_info{ padding: 80px 60px; }
.about_media.philosophy{ border-radius: 0; }
.about_wellness>.content_title{ margin-bottom: 0; }
.about_row{ display: grid; grid-template-columns: 400px minmax(0, 1fr); gap: 40px; padding-top: 20px; }
.about_row+.about_row{ margin-top: 20px; border-top: 1px solid #ccc; }
.about_media.wellness, .about_media.sustainability{ height: 400px; }
.sustainability_intro{ grid-template-columns: minmax(0, 1fr) 400px; }
.certificate_intro{ grid-template-columns: 300px minmax(0, 1fr); column-gap: 40px; row-gap: 0; }
.certificate_intro>.editor{ grid-column: 1/-1; }
.about_media.certificates{ height: 217px; }
.certificate_list{ display: grid; gap: 20px; }
.certificate_item{ display: flex; min-height: 96px; flex-direction: column; justify-content: center; gap: 10px; padding: 18px 20px; border-radius: 22px; background: #e8f2e5; }
.certificate_item:nth-child(2){ background: #e5f2f2; }
.certificate_item h3{ margin: 0; color: var(--main-color); font-size: 22px; line-height: 25px; }
.certificate_item p{ margin: 0; color: #383838; font-size: 16px; font-weight: 700; line-height: 25px; }
.sdg_box{ padding-top: 40px; }
.sdg_list{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; }
.sdg_item{ overflow: hidden; border-radius: 5px; background: var(--white-color); }
.sdg_item .media{ display: grid; height: 210px; place-items: center; }
.sdg_item .media img{ width: auto; max-width: 210px; height: 200px; object-fit: contain; }
.sdg_12 .media{ background: #c08b2f; }
.sdg_03 .media{ background: #4c9e38; }
.sdg_09 .media{ background: #ec6b06; }
.sdg_item .inner{ display: flex; min-height: 125px; flex-direction: column; gap: 5px; justify-content: center; padding: 20px; color: #383838; font-size: 15px; line-height: 25px; }
.sdg_item h4{ margin: 0; font-size: 22px; }
.sdg_12 h4{ color: #c08b2f; }
.sdg_03 h4{ color: #4c9e38; }
.sdg_09 h4{ color: #ec6b06; }
.sdg_item b, .sdg_item p{ margin: 0; }
.sdg_note{ margin: 20px 0 0; color: #595959; font-size: 15px; line-height: 24px; letter-spacing: .03em; text-align: center; }
/*---use_page---*/
.use_content, .faq_content, .contact_content{ overflow: hidden; border-radius: 0 0 30px 30px; background: rgba(255, 255, 255, .7); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.use_section{ padding: 80px 40px; }
.manual_intro{ margin: 0 0 20px; color: #404040; font-size: 16px; line-height: 30px; }
.manual_list{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.manual_item{ min-width: 0; margin: 0; }
.manual_item .media{ position: relative; display: grid; overflow: hidden; aspect-ratio: 265/187; border-radius: 20px; place-items: center; background: var(--white-color); }
.manual_item .media::after{ position: absolute; z-index: 2; right: 12px; bottom: 12px; display: grid; width: 38px; height: 38px; border: 1px solid rgba(255, 255, 255, .7); border-radius: 50%; place-items: center; background: rgba(52, 131, 133, .88); color: var(--white-color); content: "\f00e"; font: normal normal normal 16px/1 FontAwesome; box-shadow: 0 4px 14px rgba(29, 72, 55, .18); transition: background-color .25s; }
.manual_item img{ width: 100%; height: 100%; object-fit: contain; }
.manual_item figcaption{ margin-top: 12px; color: #348569; font-size: 20px; font-weight: 700; line-height: 25px; }
.manual_item .media:focus-visible{ outline: 3px solid var(--main-color); outline-offset: 4px; }
.manual_box{ padding-bottom: 20px; }
.operation_box{ padding-top: 0; }
.guide_video_list{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.guide_video{ display: flex; min-width: 0; flex-direction: column; align-items: stretch; padding: 0; border: 0; background: transparent; cursor: pointer; text-align: left; }
.guide_video .title{ display: block; margin-bottom: 16px; color: var(--text-color); font-size: 20px; font-weight: 500; line-height: 25px; }
.guide_video .media{ position: relative; display: block; overflow: hidden; aspect-ratio: 360/240; border-radius: 20px; background: #b8c5b5; }
.guide_video .media::before{ position: absolute; z-index: 2; top: 50%; left: 50%; width: 40px; height: 40px; background: url("../images/pages/product/play.svg") center/contain no-repeat; content: ""; transform: translate(-50%, -50%); transition: transform .25s; }
.guide_video .media::after{ position: absolute; z-index: 1; inset: 0; background: rgba(0, 0, 0, .2); content: ""; transition: background-color .3s; }
.guide_video img{ width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.guide_video:focus-visible{ outline: 2px solid var(--main-color); outline-offset: 5px; border-radius: 20px; }
/*---faq_page---*/
.faq_list{ padding: 80px 40px; }
.faq_item{ border-bottom: 1px solid #d1dbd1; }
.faq_item:last-child{ border-bottom: 0; }
.faq_item h2{ margin: 0; }
.faq_question{ display: grid; width: 100%; min-height: 102px; grid-template-columns: 80px minmax(0, 1fr) 24px; align-items: center; gap: 20px; padding: 20px; border: 0; background: transparent; cursor: pointer; text-align: left; }
.faq_question .number{ color: #336e40; font: 400 40px/1 var(--font-serif); letter-spacing: -.03em; }
.faq_question .title{ color: var(--text-color); font-size: 20px; font-weight: 700; line-height: 25px; }
.faq_question .icon{ position: relative; width: 24px; height: 24px; }
.faq_question .icon::before{ position: absolute; top: 7px; left: 7px; width: 8px; height: 8px; border-right: 1px solid var(--second-color); border-bottom: 1px solid var(--second-color); content: ""; transform: rotate(45deg); transition: transform .3s; }
.faq_question:focus-visible{ outline: 2px solid var(--main-color); outline-offset: -4px; }
.faq_answer{ display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s ease; }
.faq_answer>.inner{ min-height: 0; margin: 0 64px 0 120px; overflow: hidden; color: var(--muted-color); transition: padding-bottom .35s ease; }
.faq_item.on .faq_answer{ grid-template-rows: 1fr; }
.faq_item.on .faq_answer>.inner{ padding-bottom: 20px; }
.faq_item.on .faq_question .icon::before{ transform: translateY(4px) rotate(225deg); }
/*---contact_page---*/
.contact_map{ height: 450px; overflow: hidden; }
.contact_map iframe{ display: block; width: 100%; height: 100%; border: 0; }
.contact_box{ padding: 80px; }
.contact_box>.content_title{ width: 100%; }
.contact_box>.content_title h1{ position: relative; margin: 0; padding-bottom: 5px; color: var(--second-color); font: 700 34px/1.4 var(--font-serif); letter-spacing: .1em; }
.contact_box>.content_title h1::after{ position: absolute; bottom: 0; left: 0; width: 40px; height: 1px; background: var(--main-color); content: ""; }
.contact_layout{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 40px; }
.contact_intro{ margin: 0 0 20px; color: #404040; font-size: 16px; line-height: 30px; }
.contact_list{ display: grid; gap: 20px; margin: 0; font-style: normal; }
.contact_item{ display: flex; align-items: flex-start; gap: 16px; }
.contact_item>img{ width: 24px; height: 24px; flex: 0 0 24px; }
.contact_item>.fa{ width: 24px; height: 24px; flex: 0 0 24px; color: var(--main-color); font-size: 22px; line-height: 24px; text-align: center; }
.contact_item>span{ display: flex; min-width: 0; flex-direction: column; color: var(--text-color); font-size: 16px; line-height: 28px; }
.contact_item small{ color: #5c6e5e; font-size: 14px; line-height: 22px; }
.line_info{ display: flex; width: max-content; flex-direction: column; align-items: center; gap: 12px; margin-top: 28px; }
.line_info img{ width: 170px; height: 170px; border-radius: 10px; }
.line_info b{ color: #2f8b85; font-size: 16px; line-height: 28px; }
.contact_form{ display: flex; min-width: 0; flex-direction: column; gap: 20px; }
.contact_form h2, .contact_form h3, .form_group legend{ margin: 0; color: var(--text-color); font-size: 18px; font-weight: 700; line-height: 25px; }
.form_grid{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.form_grid .full{ grid-column: 1/-1; }
.form-floating{ position: relative; }
.form-control{ display: block; width: 100%; height: 58px; padding: 23px 14px 7px; border: 1px solid #ced4d9; border-radius: 6px; background: var(--white-color); color: var(--text-color); font-size: 16px; line-height: 24px; transition: border-color .2s, box-shadow .2s; }
.form-control::placeholder{ color: transparent; }
.form-floating>label{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 16px 14px; overflow: hidden; color: #6c757d; font-size: 16px; line-height: 24px; pointer-events: none; transform-origin: 0 0; transition: opacity .15s ease-in-out, transform .15s ease-in-out; white-space: nowrap; }
.form-floating>.form-control:focus, .form-floating>.form-control:not(:placeholder-shown){ padding-top: 23px; padding-bottom: 7px; }
.form-floating>.form-control:focus~label, .form-floating>.form-control:not(:placeholder-shown)~label{ opacity: .75; transform: scale(.75) translateY(-2px) translateX(4px); }
.form-control:focus{ border-color: #69a2a4; outline: 0; box-shadow: 0 0 0 3px rgba(52, 131, 133, .16); }
.form_group{ min-width: 0; margin: 0; padding: 0; border: 0; }
.form_group legend{ margin-bottom: 20px; }
.check_list{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 20px; }
.check_list label{ display: flex; min-width: 0; align-items: flex-start; gap: 10px; color: #444; font-size: 16px; line-height: 28px; cursor: pointer; }
.check_list label.full{ grid-column: 1/-1; }
.check_list input{ width: 18px; height: 18px; flex: 0 0 18px; margin: 5px 0 0; accent-color: var(--second-color); }
.message_group h3{ margin-bottom: 20px; }
.message_group textarea.form-control{ height: 120px; resize: vertical; }
.contact_submit{ min-height: 40px; padding: 9px 20px; border: 0; border-radius: 22px; background: var(--main-color); color: var(--white-color); font-size: 16px; font-weight: 700; cursor: pointer; transition: background-color .25s; }
.contact_submit:focus-visible{ outline: 2px solid var(--second-color); outline-offset: 3px; }
/*---product_page---*/
.product_hero{ --page-hero-image: url("../images/pages/product/hero.jpg"); --page-hero-position: 55%; }
.product_content{ overflow: hidden; border-radius: 0 0 30px 30px; background: rgba(255, 255, 255, .7); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.product_section{ padding: 80px 40px; }
.product_introduction_inner{ display: grid; grid-template-columns: minmax(0, 1fr) 400px; align-items: center; gap: 40px; }
.product_system_media{ width: 400px; height: 353px; }
.product_system_media img{ width: 100%; height: 100%; object-fit: contain; }
.fit_box{ background: rgba(255, 255, 255, .5); }
.fit_inner{ display: grid; grid-template-columns: 400px minmax(0, 1fr); align-items: start; gap: 40px; }
.fit_list{ display: grid; gap: 24px; margin: 0; padding: 0; list-style: none; }
.fit_list li{ display: flex; flex-direction: column; gap: 6px; padding-left: 18px; border-left: 2px solid var(--main-color); color: var(--muted-color); font-size: 16px; line-height: 1.6; }
.fit_list b{ color: var(--second-color); font-size: 18px; }
.product_video_list{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.product_video{ display: block; min-width: 0; padding: 0; border: 0; background: transparent; cursor: pointer; text-align: left; }
.product_video .media{ position: relative; display: block; overflow: hidden; aspect-ratio: 332/190; border-radius: 20px; background: #b8c5b5; }
.product_video .media::before{ position: absolute; z-index: 2; top: 50%; left: 50%; width: 40px; height: 40px; background: url("../images/pages/product/play.svg") center/contain no-repeat; content: ""; transform: translate(-50%, -50%); transition: transform .25s; }
.product_video .media::after{ position: absolute; z-index: 1; inset: 0; background: rgba(0, 0, 0, .2); content: ""; transition: background-color .3s; }
.product_video .media img{ width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.product_video .title{ display: block; margin-top: 12px; color: var(--text-color); font-size: 16px; font-weight: 500; text-align: center; }
.product_video:focus-visible{ outline: 2px solid var(--main-color); outline-offset: 5px; border-radius: 20px; }
.product_heading, .product_subheading{ margin: 0; color: var(--second-color); font-family: var(--font-serif); font-weight: 700; letter-spacing: .1em; }
.product_heading{ margin-bottom: 20px; font-size: 30px; line-height: 1.5; }
.product_subheading{ margin: 40px 0 20px; font-size: 24px; line-height: 1.5; }
.use_area_list, .other_area_list, .dm_list{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.use_area_item{ min-width: 0; }
.use_area_item .media, .other_area_item, .dm_item{ overflow: hidden; aspect-ratio: 1; border-radius: 20px; background: #eef1e9; }
.use_area_item .media img, .other_area_item img, .dm_item img{ width: 100%; height: 100%; object-fit: cover; }
.use_area_item .media.chest img{ object-fit: contain; }
.use_area_item h3{ margin: 14px 0 0; color: var(--text-color); font-size: 20px; font-weight: 500; text-align: center; }
.dm_box{ padding-top: 0; padding-bottom: 80px; }
.dm_item{ position: relative; display: block; border-radius: 16px; touch-action: manipulation; }
.dm_item::after{ position: absolute; z-index: 2; right: 16px; bottom: 16px; display: grid; width: 42px; height: 42px; border: 1px solid rgba(255, 255, 255, .65); border-radius: 50%; place-items: center; background: rgba(52, 131, 133, .88); color: var(--white-color); content: "\f00e"; font: normal normal normal 17px/1 FontAwesome; box-shadow: 0 5px 16px rgba(29, 72, 55, .18); transition: background-color .25s; }
.dm_item img{ object-position: center top; transition: transform .45s; }
.dm_item:focus-visible{ outline: 3px solid var(--main-color); outline-offset: 4px; }
.pswp-caption-content{ display: none; }
/*---photoswipe---*/
.pswp{ --pswp-bg: #182118; --pswp-placeholder-bg: #2c382c; --pswp-icon-color: #e5efe1; --pswp-icon-color-secondary: #467240; --pswp-icon-stroke-color: #365235; --pswp-preloader-color: rgba(229, 239, 225, .45); --pswp-preloader-color-secondary: #e5efe1; }
.pswp__button{ transition: opacity .25s; }
.pswp__counter{ color: #e5efe1; font-family: var(--font-en); text-shadow: 0 1px 5px rgba(0, 0, 0, .4); }
.pswp__custom-caption{ position: absolute; z-index: 2; right: 20px; bottom: 16px; left: 20px; width: max-content; max-width: calc(100% - 40px); margin-inline: auto; padding: 10px 20px; border: 1px solid rgba(229, 239, 225, .22); border-radius: 24px; background: rgba(54, 82, 53, .78); color: #e5efe1; font-size: 15px; line-height: 24px; letter-spacing: .06em; text-align: center; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.pswp__custom-caption[hidden]{ display: none; }
/*---video_lightbox---*/
.video_lightbox{ position: fixed; z-index: 15000; inset: 0; display: grid; padding: 80px 40px 40px; place-items: center; background: rgba(0, 0, 0, .8); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .3s, visibility 0s linear .3s; }
.video_lightbox.on{ opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s; }
.video_lightbox_inner{ position: relative; width: min(1100px, 100%); }
.video_lightbox_player{ overflow: hidden; width: 100%; aspect-ratio: 16/9; border-radius: 20px; background: #111; box-shadow: 0 24px 70px rgba(0, 0, 0, .35); }
.video_lightbox_player iframe{ display: block; width: 100%; height: 100%; border: 0; }
.video_lightbox_close{ position: absolute; z-index: 1; top: -58px; right: 0; width: 46px; height: 46px; padding: 0; border: 1px solid rgba(229, 239, 225, .55); border-radius: 50%; background: rgba(91, 125, 88, .72); cursor: pointer; transition: background-color .25s; }
.video_lightbox_close span{ position: absolute; top: 50%; left: 50%; width: 22px; height: 2px; border-radius: 2px; background: #e5efe1; }
.video_lightbox_close span:first-child{ transform: translate(-50%, -50%) rotate(45deg); }
.video_lightbox_close span:last-child{ transform: translate(-50%, -50%) rotate(-45deg); }
.video_lightbox_close:focus-visible{ outline: 2px solid #e5efe1; outline-offset: 3px; }
/*---404_page---*/
.error_panel{ background: linear-gradient(125deg, rgba(255, 255, 255, .8), rgba(239, 245, 235, .62)); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.error_box{ position: relative; display: grid; min-height: 620px; grid-template-columns: minmax(0, 1fr) minmax(360px, 480px); align-items: center; gap: 40px; overflow: hidden; padding: 80px; isolation: isolate; }
.error_box::before{ position: absolute; z-index: -1; top: 50%; right: -180px; width: 660px; height: 660px; border: 1px solid rgba(255, 255, 255, .72); border-radius: 50%; background: rgba(255, 255, 255, .2); box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .72), 0 22px 60px rgba(55, 91, 59, .08); content: ""; transform: translateY(-50%); }
.error_inner{ position: relative; z-index: 1; }
.error_code{ margin: 0 0 -24px; color: rgba(70, 114, 64, .15); font: 700 clamp(120px, 13vw, 210px)/.8 var(--font-en); letter-spacing: -.04em; }
.error_inner .subtitle{ margin: 0 0 14px; color: var(--main-color); font: 700 14px/1.4 var(--font-en); letter-spacing: .24em; }
.error_inner h1{ margin: 0; color: var(--second-color); font: 700 clamp(34px, 3.4vw, 52px)/1.35 var(--font-serif); letter-spacing: .08em; }
.error_inner .con{ margin: 24px 0 0; color: var(--muted-color); font-size: 16px; line-height: 30px; letter-spacing: .06em; }
.error_actions{ display: flex; align-items: center; gap: 24px; margin-top: 34px; }
.error_link{ position: relative; color: var(--second-color); font-size: 15px; font-weight: 700; letter-spacing: .08em; }
.error_link::after{ position: absolute; right: 0; bottom: -5px; left: 0; height: 1px; background: currentColor; content: ""; transform: scaleX(0); transform-origin: right; transition: transform .25s; }
.error_link:focus-visible{ outline: 2px solid var(--main-color); outline-offset: 6px; }
.error_media{ position: relative; z-index: 1; align-self: end; }
.error_media img{ width: 100%; height: auto; }
/*------*/
@media only screen and (max-width: 992px) {
	.subpage #content{ padding-top: calc(var(--header-height) + 4rem); }
	.page_hero{ height: 320px; }
	.news_content{ padding-bottom: 4rem; }
	.news_categories{ justify-content: flex-start; padding-inline: 40px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
	.news_categories::-webkit-scrollbar{ display: none; }
	.news_categories a{ flex: 0 0 auto; }
	.news_grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 24px; padding: 40px; }
	.article_content{ padding: 4rem 40px; }
	.article_gallery{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.about_section{ padding: 4rem 40px; }
	.about_brand{ grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 40px; }
	.about_media.product{ height: auto; aspect-ratio: 400/353; }
	.about_philosophy{ grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr)); }
	.about_philosophy>.about_info{ padding: 4rem 40px; }
	.about_media.philosophy{ min-height: 400px; }
	.about_row, .sustainability_intro{ grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 30px; }
	.certificate_intro{ grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
	.about_media.wellness, .about_media.sustainability{ height: auto; aspect-ratio: 1; }
	.about_media.certificates{ height: auto; aspect-ratio: 300/217; }
	.sdg_list{ grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 20px; }
	.sdg_item .media{ height: 180px; }
	.sdg_item .media img{ width: min(170px, 100%); height: auto; max-height: 170px; }
	.use_section{ padding: 4rem 40px; }
	.manual_box{ padding-bottom: 20px; }
	.manual_list{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.operation_box{ padding-top: 0; }
	.guide_video_list{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.faq_list{ padding: 4rem 40px; }
	.contact_map{ height: 360px; }
	.contact_box{ padding: 4rem 40px; }
	.contact_layout{ grid-template-columns: 1fr; gap: 4rem; }
	.line_info{ margin-inline: auto; }
	.product_section{ padding: 4rem 40px; }
	.product_introduction_inner{ grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr)); }
	.product_system_media{ width: min(400px, 100%); height: auto; margin-inline: auto; aspect-ratio: 400/353; }
	.fit_inner{ grid-template-columns: 1fr; gap: 40px; }
	.product_video_list{ gap: 20px; }
	.use_area_list, .other_area_list, .dm_list{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.dm_box{ padding-top: 0; }
	.error_box{ min-height: 560px; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; padding: 4rem 40px; }
	.error_box::before{ right: -240px; width: 580px; height: 580px; }
	.error_code{ margin-bottom: -14px; }
	.error_inner .con br{ display: none; }
}
/* 404 內容在窄平板提前換欄，避免中文標題與內文被圖片壓縮。 */
@media only screen and (max-width: 720px) {
	.error_box{ display: flex; min-height: 680px; flex-direction: column; align-items: stretch; gap: 36px; padding: 4rem 30px 0; text-align: center; }
	.error_box::before{ top: auto; right: 50%; bottom: -280px; width: 580px; height: 580px; transform: translateX(50%); }
	.error_code{ margin-bottom: -8px; font-size: clamp(110px, 28vw, 160px); }
	.error_inner h1{ font-size: clamp(32px, 7vw, 42px); }
	.error_actions{ justify-content: center; }
	.error_media{ width: min(360px, 84%); margin: auto auto 0; }
}
@media only screen and (max-width: 576px) {
	.subpage #content{ padding-top: calc(var(--header-height) + 3rem); }
	.page_panel{ border-radius: 20px; }
	.page_hero{ height: 260px; }
	.page_title h1{ font-size: 30px; }
	.news_content{ padding-bottom: 3rem; border-radius: 0 0 20px 20px; }
	.news_categories{ min-height: 70px; padding-inline: 20px; }
	.news_categories a{ min-width: 100px; min-height: 40px; padding-inline: 16px; font-size: 15px; }
	.news_grid{ grid-template-columns: 1fr; gap: 24px; padding: 30px 20px; }
	.news_grid .news_info{ min-height: 118px; }
	.pagination{ gap: 3px; padding-inline: 20px; }
	.pagination a{ width: 34px; height: 34px; }
	.article_content{ padding: 3rem 20px; border-radius: 0 0 20px 20px; }
	.article_inner h1{ font-size: 28px; }
	.editor>img{ margin-block: 30px; }
	.article_extra{ margin-top: 40px; }
	.article_gallery{ grid-template-columns: 1fr; gap: 24px; }
	.download_list a{ grid-template-columns: 32px minmax(0, 1fr) 16px; gap: 10px; padding-inline: 12px; }
	.download_list .file_icon{ width: 32px; height: 32px; }
	.article_actions{ margin-top: 30px; }
	.about_content{ border-radius: 0 0 20px 20px; }
	.about_section{ padding: 3rem 20px; }
	.editor h1{ font-size: 32px; }
	.editor h2, .content_title h2{ font-size: 28px; letter-spacing: .06em; }
	.content_title .subtitle{ font-size: 14px; }
	.editor{ font-size: 15px; line-height: 28px; }
	.editor h3, .sdg_box>h3{ font-size: 18px; }
	.about_brand, .about_philosophy, .about_row, .sustainability_intro, .certificate_intro{ display: flex; flex-direction: column; gap: 30px; }
	.certificate_intro{ gap: 0; }
	.certificate_intro>.certificate_list{ margin-top: 30px; }
	.about_media.product{ width: 100%; }
	.about_philosophy>.about_info{ padding: 3rem 20px 0; }
	.about_media.philosophy{ min-height: 300px; }
	.about_row+.about_row{ margin-top: 30px; padding-top: 30px; }
	.about_media.wellness, .about_media.sustainability{ width: 100%; aspect-ratio: 1; }
	.about_media.certificates{ width: 100%; aspect-ratio: 300/217; }
	.sdg_list{ grid-template-columns: 1fr; }
	.sdg_item .media{ height: 210px; }
	.sdg_item .media img{ max-width: 200px; height: 200px; }
	.sdg_note br{ display: none; }
	.use_content, .faq_content, .contact_content{ border-radius: 0 0 20px 20px; }
	.use_section{ padding: 3rem 20px; }
	.manual_box{ padding-bottom: 20px; }
	.manual_list{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; }
	.manual_item figcaption{ font-size: 18px; }
	.operation_box{ padding-top: 0; }
	.guide_video_list{ grid-template-columns: 1fr; gap: 30px; }
	.guide_video .media{ border-radius: 16px; }
	.faq_list{ padding: 3rem 20px; }
	.faq_question{ min-height: 86px; grid-template-columns: 54px minmax(0, 1fr) 20px; gap: 10px; padding: 16px 0; }
	.faq_question .number{ font-size: 30px; }
	.faq_question .title{ font-size: 17px; line-height: 26px; }
	.faq_answer>.inner{ margin: 0 30px 0 64px; }
	.contact_map{ height: 260px; }
	.contact_box{ padding: 3rem 20px; }
	.contact_box>.content_title h1{ font-size: 28px; letter-spacing: .06em; }
	.contact_layout{ gap: 3rem; }
	.form_grid, .check_list{ grid-template-columns: 1fr; }
	.form_grid .full, .check_list label.full{ grid-column: auto; }
	.first_purchase{ gap: 12px; }
	.product_content{ border-radius: 0 0 20px 20px; }
	.product_section{ padding: 3rem 20px; }
	.product_introduction_inner{ display: flex; flex-direction: column; gap: 30px; }
	.product_system_media{ width: min(400px, 100%); }
	.fit_inner{ gap: 30px; }
	.product_video_list{ grid-template-columns: 1fr; gap: 24px; }
	.product_video .media{ border-radius: 16px; }
	.product_heading{ font-size: 28px; }
	.product_subheading{ margin-top: 30px; font-size: 22px; }
	.use_area_list, .other_area_list, .dm_list{ grid-template-columns: 1fr; gap: 24px; }
	.use_area_item .media, .other_area_item, .dm_item{ border-radius: 16px; }
	.dm_box{ padding-top: 0; }
	.video_lightbox{ padding: 70px 15px 20px; }
	.video_lightbox_player{ border-radius: 12px; }
	.video_lightbox_close{ top: -52px; width: 42px; height: 42px; }
	.error_box{ display: flex; min-height: 640px; flex-direction: column; align-items: stretch; gap: 30px; padding: 3rem 20px 0; text-align: center; }
	.error_box::before{ top: auto; right: 50%; bottom: -260px; width: 520px; height: 520px; transform: translateX(50%); }
	.error_code{ margin-bottom: -6px; font-size: clamp(100px, 34vw, 140px); }
	.error_inner h1{ font-size: 32px; letter-spacing: .05em; }
	.error_inner .con{ font-size: 15px; line-height: 28px; }
	.error_actions{ flex-direction: column; gap: 20px; margin-top: 28px; }
	.error_media{ width: min(300px, 88%); margin: auto auto 0; }
}
/*------*/
/* =============================================================================
   SUBPAGE END
   ========================================================================== */
/* =============================================================================
   FOOTER
   ========================================================================== */
#footer{ position: relative; z-index: 1; background: var(--light-color); isolation: isolate; }
/*---statement_box---*/
.statement_box{ display: flex; height: 418px; flex-direction: column; align-items: center; padding-top: 100px; text-align: center; }
.statement_box .title{ margin: 0; color: var(--main-color); font-size: 16px; letter-spacing: .2em; }
.statement_box .con{ margin: 16px 0 0; font-size: 14px; line-height: 30px; letter-spacing: .1em; }
.statement_box .media{ width: 189px; height: 145px; margin-top: auto; overflow: hidden; }
.statement_box .media img{ width: 100%; height: 100%; object-fit: cover; object-position: 25% center; }
/*------*/
/*---footer_box---*/
.footer_box{ position: relative; min-height: 600px; overflow: hidden; border-top: 1px solid #6eb9ba; }
.footer_box::before{ position: absolute; inset: 88px 0 0; background: url("../images/common/footer-bg.png") center top/cover no-repeat; content: ""; }
.footer_inner{ position: relative; display: flex; flex-direction: column; align-items: center; padding-top: 58px; }
.footer_logo{ width: 113px; height: 60px; }
.social_list{ display: flex; gap: 4px; margin-top: 30px; }
.social_list a{ display: grid; width: 36px; height: 36px; place-items: center; color: var(--main-color); font: 700 12px var(--font-en); }
.social_list a:first-child{ font-size: 24px; }
.social_list img{ width: 36px; height: 36px; }
.contact_info{ margin-top: 28px; font-style: normal; font-size: 14px; line-height: 30px; letter-spacing: .1em; }
.contact_info p{ margin: 0; }
.designer{ display: flex; align-items: center; gap: 4px; margin: 68px 0 0; font: 400 12px/20px Arial, sans-serif; }
.designer a{ display: flex; align-items: center; gap: 4px; }
.designer img{ width: 14px; height: 14px; }
@media only screen and (max-width: 992px) {
	.footer_box::before{ transform: translateY(10%); }
}
@media only screen and (max-width: 576px) {
	.statement_box{ height: auto; min-height: 390px; padding: 72px 20px 0; }
	.statement_box .con br{ display: none; }
	.footer_box{ min-height: 520px; }
	.footer_box::before{ transform: translateY(20%); }
	.contact_info{ width: 100%; max-width: 320px; margin: 28px auto 0; font-size: 13px; letter-spacing: .04em; }
	.contact_info p{ margin-bottom: 4px; }
	.designer{ margin-top: 50px; }
}
/*------*/
/* =============================================================================
   FOOTER END
   ========================================================================== */
@media only screen and (min-width: 993px) {
	.btn_more:hover{ background: #286b6d; }
	.btn_more:hover::after{ transform: translateX(4px); }
	.top_menu>ul>li>a:hover{ color: #fff9da; }
	.news_item:hover{ transform: translateY(-5px); box-shadow: 0 12px 26px rgba(54, 92, 60, .16); }
	.news_item:hover .media img{ transform: scale(1.04); }
	.video_item:hover .media::after{ background: rgba(0, 0, 0, .06); }
	.video_item:hover .media>img{ transform: scale(1.035); }
	.video_item:hover .media::before{ transform: translate(-50%, -50%) scale(1.12); }
	.news_categories a:hover{ background: rgba(70, 114, 64, .12); color: var(--second-color); }
	.news_categories a.cur:hover{ background: var(--second-color); color: var(--white-color); }
	.pagination a:hover{ background: rgba(70, 114, 64, .12); color: var(--second-color); }
	.pagination a.cur:hover{ background: var(--second-color); color: var(--white-color); }
	.btn_back:hover{ background: #286b6d; }
	.btn_back:hover::before{ transform: translateX(-4px) rotate(180deg); }
	.article_gallery_item>a:hover::after{ background: rgba(20, 45, 25, .18); }
	.article_gallery_item>a:hover img{ transform: scale(1.035); }
	.download_list a:hover{ border-color: rgba(70, 114, 64, .45); background: rgba(232, 242, 229, .82); }
	.manual_item .media:hover::after{ background: rgba(70, 114, 64, .95); }
	.guide_video:hover .media::after{ background: rgba(0, 0, 0, .08); }
	.guide_video:hover img{ transform: scale(1.035); }
	.guide_video:hover .media::before{ transform: translate(-50%, -50%) scale(1.12); }
	.faq_question:hover .title{ color: var(--second-color); }
	.contact_submit:hover{ background: #286b6d; }
	.product_video:hover .media::after{ background: rgba(0, 0, 0, .08); }
	.product_video:hover .media img{ transform: scale(1.035); }
	.product_video:hover .media::before{ transform: translate(-50%, -50%) scale(1.12); }
	.video_lightbox_close:hover{ background: rgba(109, 151, 104, .95); }
	.error_link:hover::after{ transform: scaleX(1); transform-origin: left; }
	.dm_item:hover img{ transform: scale(1.035); }
	.dm_item:hover::after{ background: rgba(70, 114, 64, .95); }
}
img.lazy_fade{ opacity: 0; }
img.lazy_fade.is-loaded{ animation: lazy-fade-in .5s ease both; }
@keyframes lazy-fade-in {
	from{ opacity: 0; }
	to{ opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
	html{ scroll-behavior: auto; }
	*, *::before, *::after{ scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}