@charset "UTF-8";
/* =============================================================================
      ____    __  __  __  _____
    /\  _ _`\/\ \/\ \/\ \/ ____/
    \ \ \  \ \ \ \ \ \ \ \ \_____
     \ \ \  \ \ \ \ \ \ \ \_____ \
      \ \ \__\ \ \ \/  \/ / ____\ \
       \ \_____/\ \______/ /\_____/
        \/____/  \/_____/  \/____/
        
    Don't Worry Never Crash
   ========================================================================== */
/* =============================================================================
   BASIC
   ========================================================================== */
:root {
	--main-color: #4A3F35;
	--second-color: #8B8378;
	--c3rd-color: #8B2E20;
	--c-black: #000;
	--c-dark: #333;
	--c-gray: #555;
	--c-gray-mid: #CCC;
	--c-gray-light: #F2F2F2;
	--c-white: #FFF;
}
/*---DEFAULT---*/ 
html, body { height: 100%; -webkit-text-size-adjust: none; text-size-adjust: none;}
body{ background: #F5F2EC;}
body, th, td, input { font-size: 100%; font-family: 'Inter', sans-serif; }
a { text-decoration: none; font-family: 'Inter', sans-serif;}
p { font-family: 'Inter', sans-serif; font-size: 15px; line-height: 1.6em; margin-bottom: 1em; font-weight: 400; color: var(--c-gray);}
li { font-family: 'Inter', sans-serif; font-size: 15px; line-height: 1.6em; font-weight: 400; color: var(--c-gray);}
h1, h2, h3, h4, h5, h6 { font-family: 'Inter', sans-serif; font-weight: 600;}
h1 { font-size: 2.5em; line-height: 1.1333em; margin-bottom: .2666em; }
h2 { font-size: 1.429em; line-height: 1.4em; margin-bottom: .4555em; }
h3 { font-size: 1.143em; line-height: 1.5em; margin-bottom: .4em; color: var(--c-dark);}
h4 { font-size: 1em; line-height: 1.5em; margin-bottom: .4555em; color: var(--c-dark);}
h5 { font-size: 0.9em; line-height: 1.5em; margin-bottom: .4555em; color: var(--c-dark);}
h6 { font-size: 0.857em; line-height: 1.5em; margin-bottom: .4555em; color: var(--c-dark);}
a:link, a:visited { text-decoration: none;}
img{ pointer-events: none;}
figure{ margin: 0;}
::selection { background: var(--main-color); color: var(--c-white);}
.grecaptcha-badge{ display: none !important;}
	/*SCROLL BAR*/
	body.pc::-webkit-scrollbar{ width:8px; }
	body.pc::-webkit-scrollbar-track{ background:var(--second-color);}
	body.pc::-webkit-scrollbar-thumb{ background:var(--main-color); }
	body.pc::-webkit-scrollbar-thumb:hover{ background:var(--c-dark); }
/*------*/

/*---loading_box---*/
.loading_box{ position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; z-index: 9999; background: var(--main-color);}
.loading_box::after{ display: block; content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2;  background: url(../images/loading.gif) no-repeat center center; background-size: 60px; }
.loading_box::before{ display: block; content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; }
.loading_box .icon{ width: 40px; }
.loading_box .icon img{ display: block; width: 100%;}
/*------*/

/* =============================================================================
   BASIC END
   ========================================================================== */


/* =============================================================================
   MODULE
   ========================================================================== */

/*---page width---*/
.head-width { position: relative; max-width:1400px; margin: 0 auto;}
.inner-width { position: relative; max-width:1200px; margin: 0 auto;}

@media only screen and (min-width: 1921px) {
	.inner-width { max-width:1600px;}
	.head-width { max-width:1600px;}
}
@media only screen and (max-width: 1480px) {
	.head-width { max-width: calc(100% - 80px); margin: 0 auto;}
}
@media only screen and (max-width: 1280px) {
	.inner-width { max-width: calc(100% - 80px); margin: 0 auto;}
}
@media only screen and (max-width: 576px) {
	.head-width { max-width: calc(100% - 40px); margin: 0 20px;}
	.inner-width { max-width: calc(100% - 40px); margin: 0 20px;}
}
/*------*/

/*---desc---*/
.desc{ position: relative; }
/*------*/

/*---button---*/
.btn_more{ position: relative; display: inline-flex; color: var(--c-white);  justify-content: center; align-items: center; padding: 0 20px; border-radius: 5px; background: var(--c3rd-color); box-sizing: border-box; vertical-align: middle; gap: 10px; border: 0;
	font: 600 16px/40px 'Inter', sans-serif; overflow: hidden; white-space: nowrap;
	transition: 200ms ease;
}
@media only screen and (min-width: 993px) {
	.btn_more:hover, .btn_more:focus{ filter: brightness(1.2); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);}
}
/*------*/

/*---to_top---*/
.to_top{ position: fixed; cursor: poInter; bottom: -40px; right: 20px; width: 40px; height: 40px; display: flex; justify-content: center; align-items: center; background: var(--main-color); border-radius: 25px; color: var(--c-white); font-size: 16px; z-index: 100; transition: 300ms ease;}
.to_top.ed{ bottom: 20px; }
@media only screen and (min-width: 993px) {
	.to_top:hover{ background: var(--second-color); color: var(--c-white);}
}
@media only screen and (max-width: 992px) {
	.to_top i{ transform: translateX(0) translateY(-2px);}
}
/*------*/

/* =============================================================================
   MODULE END
   ========================================================================== */

/* =============================================================================
   BLOCK
   ========================================================================== */
#wrapper { position: relative; top: 0;  z-index: 1; width: 100%; margin: auto; overflow: hidden; }
#content { position: relative; }
/* =============================================================================
   BLOCK END
   ========================================================================== */

/* =============================================================================
   HEADER
   ========================================================================== */
#header { position:fixed; z-index:1000; width:100%; left:0;
    transition: 500ms ease;
}
#header .bg{ position: absolute; top: 0; left: 0; width: 100%; background: rgba(26, 26, 26, 0.2); height: 60px;
	backdrop-filter: blur(40px); -webkit-backdrop-filter: blur(20px);
	transition: 500ms ease;
}
#header .head-width{ display: flex; justify-content: space-between; width: 100%; height: 60px; align-items: center;}

/*---logo---*/
#header .logo { position: relative; display: flex; 
    transition: 500ms ease;
}
#header .logo a{ display: flex; gap: 10px;}
#header .logo img { display: block; height: 16px;
    transition: 500ms ease;
}
#header .logo>a>span{ display: none;}
#header.ed .bg{ background: rgba(26, 26, 26, 0.6);}
/*------*/

/*---top_menu---*/
.top_menu{ position: relative; z-index: 100;
	transition: 300ms ease;
}
.top_menu a{ position:relative; display:flex; gap: 6px; align-items: center; font-size:15px; line-height: 20px; font-weight: 400; color:#FFF; padding:10px 20px; margin: 0; 
	transition: 300ms ease;
}
@media only screen and (min-width: 993px) {
	.top_menu a:hover{ color: #fff7d1; text-shadow: 0 8px 10px rgba(0,0,0,0.1);}
}
/*------*/
/* =============================================================================
   HEADER END
   ========================================================================== */

/* =============================================================================
   FOOTER
   ========================================================================== */
#footer { padding: 100px 0; background: var(--main-color) url(../images/box_bg4.jpg); background-size: cover;}
#footer .foot_logo{ display: flex; flex-direction: column; align-items: center; gap: 20px;}
#footer .foot_logo img { display: block; height: 16px;}
#footer .info{ color:var(--c-white); display: flex; flex-direction: column; justify-content: center; text-align: center; gap: 10px; margin: 20px 0;}
#footer .info .name{ font: 700 14px/20px 'Inter', 'Noto Serif TC', sans-serif; }
#footer .info .con{ font: 400 14px/20px 'Inter', 'Noto Serif TC', sans-serif;}
#footer .info .con a{ color: var(--c-white);}
#footer .store{ color:var(--c-white); display: flex; flex-direction: column; justify-content: center; text-align: center; gap: 10px; margin: 20px 0;}
#footer .store .name{ font: 700 13px/20px 'Inter', 'Noto Serif TC', sans-serif; }
#footer .store .con{ font: 400 13px/20px 'Inter', 'Noto Serif TC', sans-serif;}
#footer .copyright { display: flex; gap: 20px; justify-content: center; font: 500 14px/20px 'Inter', sans-serif; color:var(--c-white);}
@media only screen and (max-width: 576px) {
	#footer { padding: 60px 0;}
}
/* =============================================================================
	FOOTER END
	========================================================================== */

/*---top_banner---*/
.top_banner { position: relative; z-index: 10; overflow: hidden;}
.top_banner .pic{ display: block; position: relative; pointer-events: none; overflow: hidden; height: 100vh; }
.top_banner .pic img{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;}
.top_banner .txt{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: flex-start; align-items: center; z-index: 1; gap: 20px; padding-top: 60px;}
.top_banner .txt .inner-width{ flex: 0 0 100%;}
.top_banner .txt .title{ color:var(--c-white); display: flex; flex-direction: column; text-align: center;}
.top_banner .txt .title span{ font: 400 20px/1.2em 'Inter', sans-serif; margin-bottom: 10px;}
.top_banner .txt .title b{ font: 600 60px/1.2em 'Inter', sans-serif; }
.top_banner .swiper-pagination { z-index: 100; bottom: 20 !important; }
.top_banner .swiper-pagination-bullet{width:8px;height:8px;background:var(--c-white);opacity:0.5;border-radius:5px;}
.top_banner .swiper-pagination-bullet-active{opacity:1;width:20px;}
.top_banner .swiper-horizontal > .swiper-pagination-bullets, .top_banner .swiper-pagination-horizontal.swiper-pagination-bullets {
    .swiper-pagination-bullet {
        margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 4px);
		transition: width 300ms ease;
    }
}
.top_banner .hand{position:absolute;bottom:70px;left:50%;width:24px;height:24px;z-index:10;background:url(../images/hand.svg);background-size:cover;opacity:0.9;animation:handFloat 1.8s ease-in-out infinite;transition:opacity .4s ease,transform .4s ease;}
@keyframes handFloat{
  0%   { transform:translate(-50%,0) scale(1.1); }
  50%  { transform:translate(-50%,15px) scale(1); }
  100% { transform:translate(-50%,0) scale(1.1); }
}
/* 隱藏狀態 */
.top_banner .hand.is_hide{
  opacity:0;
  pointer-events:none;
}
@media only screen and (max-width: 992px) {
	.top_banner .txt .title b{ font-size: 36px;}
	.top_banner .txt .con{ font-size: 15px;}
}
@media only screen and (max-width: 576px) {
	.top_banner .txt .title b{ font-size: 30px;}
	.top_banner .txt .title span{ font-size: 15px;}
}
/*------*/

/*---hero_banner---*/
.hero_banner { position: relative; z-index: 10; overflow: hidden;}
.hero_banner .pic{ display: block; position: relative; pointer-events: none; overflow: hidden; height: 900px; }
.hero_banner .pic img{ position: absolute; top: -30%; left: 0; width: 100%; height: 130%; object-fit: cover;}
.hero_banner .txt{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: flex-start; align-items: center; z-index: 1; gap: 20px;}
.hero_banner .txt .inner-width{ flex: 0 0 100%;}
.hero_banner .txt .title{ color:var(--c-white); display: flex; flex-direction: column; margin: 0;}
.hero_banner .txt .title.right{ text-align: right;}
.hero_banner .txt .title b{ font: 600 40px/1.2em 'Inter', sans-serif; margin-bottom: 10px;}
.hero_banner .txt .title span{ font: 400 20px/1.2em 'Inter', sans-serif; }
.hero_banner .swiper-pagination { z-index: 100; bottom: 20 !important; }
.hero_banner .swiper-pagination-bullet{width:8px;height:8px;background:var(--c-white);opacity:0.5;border-radius:5px;}
.hero_banner .swiper-pagination-bullet-active{opacity:1;width:20px;}
.hero_banner .swiper-horizontal > .swiper-pagination-bullets, .hero_banner .swiper-pagination-horizontal.swiper-pagination-bullets {
    .swiper-pagination-bullet {
        margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 4px);
		transition: width 300ms ease;
    }
}
@media only screen and (max-width: 992px) {
	.hero_banner .pic{ height: 700px; }
	.hero_banner .txt .title b{ font-size: 36px;}
	.hero_banner .txt .con{ font-size: 15px;}
}
@media only screen and (max-width: 576px) {

	.hero_banner .txt .title.right{ text-align: left;}


	.hero_banner .txt .title b{ font-size: 28px;}
	.hero_banner .txt .title span{ font-size: 14px;}
}
/*------*/

/*---title_bar---*/
.title_bar{ position: relative; display: flex; flex-direction: column; gap: 10px;}
.title_bar .title{ position: relative; display: flex; flex-direction: column; margin: 0; gap: 20px;}
.title_bar .title b{ color: var(--main-color); font: 600 90px/1.1em 'Inter','Noto Sans TC', sans-serif; letter-spacing: 0.1em;}
.title_bar .title span{ color: var(--second-color); font: 700 16px/1.2em 'Inter','Noto Sans TC', sans-serif; letter-spacing: 0.1em;}
.title_bar .con{ color: var(--second-color); font: 400 13px/1.8em 'Inter', 'Noto Sans TC', sans-serif; letter-spacing: 10%;}
.title_bar .con2{ color: var(--main-color); font: 700 20px/1em 'Inter', 'Noto Sans TC', sans-serif; letter-spacing: 10%;}
.title_bar .super{ color: var(--main-color); font: 600 100px/90px 'Inter','Noto Sans TC', sans-serif; margin: 20px 0;}
.title_bar .super span{ color: var(--c3rd-color);}
.title_bar .md{ color: var(--main-color); font: 600 80px/80px 'Inter','Noto Sans TC', sans-serif;}
.title_bar .md.w{ color: var(--c-white); }
.title_bar.w .title b{ color: var(--c-white);}
.title_bar.w .title span{ color: var(--c-white);}
@media only screen and (max-width: 992px) {
	.title_bar .super{ font: 600 80px/1em 'Inter','Noto Sans TC', sans-serif;}
	.title_bar .md{ font: 600 60px/1em 'Inter','Noto Sans TC', sans-serif;}
}
@media only screen and (max-width: 572px) {
	.title_bar .super{ font: 600 50px/1em 'Inter','Noto Sans TC', sans-serif;}
	.title_bar .md{ font: 600 40px/1em 'Inter','Noto Sans TC', sans-serif;}
}
/*------*/

/*---inner_box---*/
.inner_box{ position: relative; overflow: hidden;}
.inner_box .bg{ position: absolute; top: -30%; left: 0; width: 100%; height: 130%; background: no-repeat center; background-size: cover; }
.inner_box .inner-width{ display: flex; width: 100%; height: 100%; flex-direction: column; justify-content: center; min-height: 900px;}
.inner_box .txt { position: relative; display: flex; flex-direction: column; gap: 20px; max-width: 410px;}
.inner_box .desc p{ color: var(--second-color); font: 400 16px/1.8em 'Inter', 'Noto Sans TC', sans-serif; letter-spacing: 0.1em;}
.inner_box .desc2 p{ color: var(--main-color); font: 400 14px/1.8em 'Inter', 'Noto Sans TC', sans-serif; letter-spacing: 0.1em;}
.inner_box .inner-width.right{ flex-direction: column; align-items: flex-end;}
.inner_box .inner-width.right .txt { max-width: calc( 50% - 40px);}
@media only screen and (max-width: 992px) {
	.inner_box .inner-width{ min-height: 700px;}
	.inner_box .bg{ background: no-repeat 80% center; }
	.inner_box .inner-width.right .txt { max-width: 90%;}
}
@media only screen and (max-width: 576px) {
	.inner_box .inner-width{ min-height: 600px;}
}		
/*------*/

/*---ct_box---*/
.ct_box{ position: relative; overflow: hidden; min-height: 900px; z-index: 1;}
.ct_box .list{ position: absolute; width: 100%; height: 100%; z-index: 0; display: flex;}
.ct_box .list .item{ position: relative; flex: 0 0 calc( 100% / 3); display: flex; flex-direction: column; justify-content: flex-end; align-items: center; padding: 160px 0;
	transition: 300ms ease;
}
.ct_box .list .item .bg{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden;}
.ct_box .list .item .bg::before{ display: block; content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(245, 242, 236, 0.8); z-index: 1;
	transition: 500ms ease;
}
.ct_box .list .item .bg img{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; object-fit: cover; pointer-events: none;
	transition: 1000ms ease;
}

.ct_box .list .item .name{ position: relative; display: block; z-index: 2; color: var(--main-color); font: 400 16px/1.8em 'Inter', 'Noto Sans TC', sans-serif; border: solid 1px var(--main-color); border-radius: 4px; padding: 4px 10px;
	transition: 300ms ease;
}
.ct_box .list .item.on{ position: relative; flex: 0 0 50%;}
.ct_box .list .item.on .bg::before{ background: rgba(245, 242, 236, 0.2);}
.ct_box .list .item.on .bg img{ transform: scale(1.1);}
.ct_box .list .item.on .name{ background: var(--main-color); color: var(--c-white);}
.ct_box .list .item.off{ position: relative; flex: 0 0 calc( 100% / 4);}
.ct_box .inner-width{ pointer-events: none;}
.ct_box .title_bar{ padding-top: 160px;}
@media only screen and (max-width: 992px) {
	.ct_box{ min-height: 700px;}
}
@media only screen and (max-width: 572px) {
	.ct_box{ min-height: 500px;}
	.ct_box .list .item{ padding: 60px 0;}
}
/*------*/

/*---col_box---*/
.col_box{ position: relative;}
.col_box .header{ position: relative; background: var(--main-color); padding: 160px 0;}
.col_box .header .bg{ position: absolute; top: -30%; left: 0; width: 100%; height: 130%; background: no-repeat center; background-size: cover; }
.col_box .list{ position: relative; display: flex; flex-wrap: wrap; width: 100%; background: var(--main-color);}
.col_box .list .item{ position: relative; overflow: hidden;
	transition: 500ms ease;
}
.col_box .list .item .pic{ position: relative;
	transition: 500ms ease;
}
.col_box .list .item .pic::before{ display: block; content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.2); z-index: 1; border: solid 2px var(--main-color);
	transition: 500ms ease;
}
.col_box .list .item .pic img{ position: relative;
	transition: 500ms ease;
}
.col_box .list .item:hover .pic img{ transform: scale(1.1);}
.col_box .list .item:hover .pic::before{ background: rgba(0, 0, 0, 0); }
.col_box .list .item.sm{ flex: 0 0 25%; }
.col_box .list .item.sm .pic{ aspect-ratio: 1 / 1.16;}
.col_box .list .item.sm:nth-child(6n-3){ flex: 0 0 50%;}
.col_box .list .item.sm:nth-child(6n-3) .pic{ aspect-ratio: 2 / 1.16;}
.col_box .list .item.sm:nth-child(6n-2){ flex: 0 0 50%;}
.col_box .list .item.sm:nth-child(6n-2) .pic{ aspect-ratio: 2 / 1.16;}
.col_box .list .item.xl{ flex: 0 0 50%;}
.col_box .list .item.xl .pic{ aspect-ratio: 2 / 1.16;}
.col_box .list .item .pic img{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;}
.col_box .list .item .txt{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; padding: 20px; display: flex; flex-direction: column; justify-content: space-between;}
.col_box .list .item .txt .title{ color: var(--c-white); text-align: right;}
.col_box .list .item .txt .title b{ display: block; font: 600 30px/30px 'Inter', 'Noto Sans TC', sans-serif;}
.col_box .list .item .txt .title span{ font: 500 14px/20px 'Inter', 'Noto Sans TC', sans-serif;}
.col_box .list .item .txt .sn{ font: 400 20px/20px 'Teko', sans-serif; letter-spacing: 10%;}
.col_box .list .item .txt .sn{ color: var(--c-white); text-align: right;}
@media only screen and (max-width: 992px) {
	.col_box .header{ padding: 100px 0;}
	.col_box .list .item .txt .title b{font: 600 24px/1em 'Inter', 'Noto Sans TC', sans-serif;}
	.col_box .list .item .txt .title span{ font: 500 12px/1em 'Inter', 'Noto Sans TC', sans-serif;}
	.col_box .list .item .txt .sn{ font: 400 16px/1em 'Teko', sans-serif;}
}
@media only screen and (max-width: 572px) {
	.col_box .header{ padding: 60px 0;}
	.col_box .list .item.xl{ flex: 0 0 100%;}
	.col_box .list .item.sm{ flex: 0 0 50%; }
	.col_box .list .item.sm .pic{ aspect-ratio: 1 / 1.16;}
	.col_box .list .item.sm:nth-child(6n-3){ flex: 0 0 100%;}
	.col_box .list .item.sm:nth-child(6n-3) .pic{ aspect-ratio: 2 / 1.16;}
	.col_box .list .item.sm:nth-child(6n-2){ flex: 0 0 100%;}
	.col_box .list .item.sm:nth-child(6n-2) .pic{ aspect-ratio: 2 / 1.16;}
	.col_box .list .item .txt .title b{font: 600 20px/1em 'Inter', 'Noto Sans TC', sans-serif;}
}

/*---aw_box---*/
.aw_box{ position: relative; padding: 100px 0;}
.aw_box .list{ display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 40px;}
@media only screen and (max-width: 992px) {
	.aw_box{ padding: 60px 0;}
	.aw_box .list{ justify-content: center;}
	.aw_box .list .item img{ width: auto; height: 60px;}
}
@media only screen and (max-width: 992px) {
	.aw_box{ padding: 40px 0;}
	.aw_box .list .item img{ width: auto; height: 40px;}
}

/*---pswp-caption-conten---*/
.pswp__dynamic-caption{color:var(--c-white);position:absolute;width:100%;left:0;top:0;transition:opacity 120ms linear !important;}
.pswp-caption-content{display:none;}
.pswp__dynamic-caption a{color:var(--c-white);}
.pswp__dynamic-caption--faded{opacity:0 !important;}
.pswp__dynamic-caption--aside{width:auto;max-width:300px;padding:20px 15px 20px 20px;margin-top:70px;}
.pswp__dynamic-caption--below{width:auto;max-width:700px;padding:15px 0 0;}
.pswp__dynamic-caption--on-hor-edge{padding-left:15px;padding-right:15px;}
.pswp__dynamic-caption--mobile{width:100%;background:rgba(0,0,0,0.5);padding:10px 15px;right:0;bottom:0;top:auto !important;left:0 !important;}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
  .animate, .gsap-elm { animation: none !important; transition: none !important; }
}