@charset "UTF-8";
/* =============================================================================
      ____    __  __  __  _____
    /\  _ _`\/\ \/\ \/\ \/ ____/
    \ \ \  \ \ \ \ \ \ \ \ \_____
     \ \ \  \ \ \ \ \ \ \ \_____ \
      \ \ \__\ \ \ \/  \/ / ____\ \
       \ \_____/\ \______/ /\_____/
        \/____/  \/_____/  \/____/
        
    Don't Worry Never Crash
   ========================================================================== */
/* =============================================================================
   BASIC
   ========================================================================== */
:root {
	--main-color: #CB9F61;
	--second-color: #222f65;
	--c3rd-color: #001f3e;
	--bg-color: #001c34;
	--c-black: #000;
	--c-dark: #333;
	--c-gray: #555;
	--c-gray-mid: #CCC;
	--c-gray-light: #F2F2F2;
	--c-white: #FFF;
}
.btn-primary {
    --bs-btn-bg: var( --main-color );
    --bs-btn-border-color: var( --main-color );
    --bs-btn-hover-bg: var(--second-color);
    --bs-btn-hover-border-color: var(--second-color);
    --bs-btn-active-bg: var(--second-color);
    --bs-btn-active-border-color: var(--second-color);
    --bs-btn-disabled-bg: var( --main-color );
    --bs-btn-disabled-border-color: var( --main-color );
}
/*---DEFAULT---*/ 
html, body { height: 100%; -webkit-text-size-adjust: none; text-size-adjust: none;}
body{ background: url( ../images/bg.jpg);}
body.bg2{ background: url( ../images/bg2.jpg);}
body, th, td, input { font-size: 100%; font-family: 'Lato', sans-serif; }
figure{ margin: 0;}
a { text-decoration: none; font-family: 'Lato', sans-serif;}
p { font-family: 'Lato', sans-serif; font-size: 15px; line-height: 2em; margin-bottom: 1em; font-weight: 400; color: var(--c-gray);}
li { font-family: 'Lato', sans-serif; font-size: 15px; line-height: 2em; font-weight: 400; color: var(--c-gray);}
q{ font-size: 14px; color: var(--c-gray-mid);}
h1, h2, h3, h4, h5, h6 { font-family: 'Lato', 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;}
::selection { background: var(--second-color); color: var(--c-white);}
.grecaptcha-badge{ display: none !important;}
	/*SCROLL BAR*/
	body.pc::-webkit-scrollbar{ width:16px; }
	body.pc::-webkit-scrollbar-track{ background:#f2f2f2;}
	body.pc::-webkit-scrollbar-thumb{ background:var(--main-color); }
	body.pc::-webkit-scrollbar-thumb:hover{ background:var(--fourth-color); }
/*------*/

/*---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(--second-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
   ========================================================================== */
.g-5,.gx-5{--bs-gutter-x:2rem;}
.g-5,.gy-5{--bs-gutter-y:2rem;}
/*---page width---*/
.inner-width { position: relative; max-width:1200px; margin: 0 auto;}
.txt-width { position: relative; max-width:1000px; margin: 0 auto;}
.lg-width { position: relative; max-width:800px; margin: 0 auto;}
.sm-width { position: relative; max-width:520px; 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: 1080px) {
	.txt-width { max-width: calc(100% - 80px); margin: 0 auto;}
}
@media only screen and (max-width: 880px) {
	.lg-width { max-width: calc(100% - 80px); margin: 0 auto;}
}
@media only screen and (max-width: 600px) {
	.sm-width { max-width: calc(100% - 80px); margin: 0 auto;}
}
@media only screen and (max-width: 576px) {
	.inner-width { max-width: calc(100% - 40px); margin: 0 20px;}
	.txt-width { max-width: calc(100% - 40px); margin: 0 20px;}
	.lg-width { max-width: calc(100% - 40px); margin: 0 20px;}
	.sm-width { max-width: calc(100% - 40px); margin: 0 20px;}
}
/*------*/

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

/*---button---*/
.btn_more{ display: inline-block; color: #cb9f61; padding: 2px 25px; border-radius: 30px; font-weight: 700; font-size: 14px; font-family: 'Lato', sans-serif;
	background: linear-gradient(41deg, #f1e5d3 41%, #f1e5d3 60%); 
	transition: 500ms ease-in-out;
}
.btn_more:hover{ transform: scale(1.05); color: #FFF;
	background: linear-gradient(41deg, #BF8D4F 41%, #D3AC73 60%); 
}
.more_bar{ position: relative; z-index: 100; padding: 20px 0 0; text-align: left;}
.more_bar.center{ text-align: center;}
.more_bar a{ display: inline-block;
	transition: transform 500ms cubic-bezier(0.680, -0.550, 0.265, 1.550), opacity 500ms ease-in-out;
}
.more_bar a:hover{ transform: scale(1.1);}
/*------*/

/*---to_top---*/
.to_top{ position: fixed; cursor: polato; 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:hover{ background: var(--second-color); color: var(--c-white);}
.to_top.ed{ bottom: 20px; }
@media only screen and (max-width: 992px) {
	.to_top i{ transform: translateX(0) translateY(0);}
}
/*------*/

/*---lan---*/
.lan { position: absolute; z-index: 1; top: 20px; right: 20px; }
.lan a { display: flex; gap: 10px; color: var(--c-white); font: 500 14px/20px 'Lato', 'Noto Sans TC', sans-serif; align-items: center;}
/*------*/

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

/* =============================================================================
   BLOCK
   ========================================================================== */
#wrapper { position: relative; top: 0;  z-index: 1; width: 100%; margin: auto; overflow: hidden; }
#content { position: relative; }
@media only screen and (max-width: 992px) {
	#content.page{ padding-top: 60px;}
}

/* =============================================================================
   BLOCK END
   ========================================================================== */

/* =============================================================================
   HEADER
   ========================================================================== */
#header { position:fixed; z-index:1000; width:100%; padding: 20px 0 0 0; left:0;
    transition: 500ms ease;
}
#header .bg{ position: absolute; top: 0; left: 0; width: 100%; background: rgba(0,28,52,0); height: 130px;
	backdrop-filter: blur(0); -webkit-backdrop-filter: blur(0);
	transition: 700ms ease;
}
/*---logo---*/
#header .logo { position: relative; z-index: 100;
	
    transition: 500ms ease;
}
#header .logo a{ display: flex; flex-direction: column; align-items: center; gap: 8px;}
#header .logo img { display: block;
    transition: 500ms ease;
}
#header .logo img.s1{ width: 65px;}
#header .logo img.s2{ display: block; width: 110px;}
#header.ed .bg{ background: rgba(0,28,52,0.90); height: 130px;
	backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
}
#header.ed .logo{ transform: scale(0.7) translateY(-30px);}
#header.ed .logo .s2{ opacity: 0;}
#header.ed .top_menu{ top:60px;}
@media only screen and (max-width: 992px) {
	#header .logo { transform: scale(0.5) translateY(-68px);}
	#header .bg{ height: 60px; }
	#header.ed .top_menu{ top:0;}
	#header.ed .bg{ height: 60px;}
	#header.ed .logo { transform: scale(0.5) translateY(-68px);}
	#header .logo img.s2{ display: none;}
}
/*------*/

/*---top_menu---*/
.top_menu{ position: absolute; left: 0; top: 120px; width:100%; z-index: 100;
	transition: 300ms ease;
}
.top_menu ul{ list-style:none; margin:0; padding:0; display:flex; justify-content: center;
	transition: 300ms ease;
}
.top_menu ul li{ position: relative; margin:2px 10px;}
.top_menu ul>li>a{ position:relative; display:block; font-size:15px; font-weight: 400; color:#FFF; padding:8px 15px; margin: 0; 
	transition: 300ms ease;
}
.top_menu ul>li>a::before{ display: block; content: ''; width: 0; height: 0; background: #cb9f61; position: absolute; top: 100px; left: 50%; border-radius: 2px;
	transition: 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
}

.top_menu ul>li>a:hover::before, .top_menu ul>li.cur>a::before,  .top_menu ul>li.on>a::before{ width: 4px; height: 4px; position: absolute; top: 35px;}
.top_menu ul>li:hover>a, .top_menu ul li.cur>a{ color: #cb9f61; }

.top_menu ul.submenu{ position: absolute; top: 45px; left:50%; display: flex; flex-direction: column; margin: 0 0 0 -70px; max-height: 0; overflow: hidden; background: #cb9f61; width: 140px; border-radius: 5px;
	transition: 500ms ease-in-out;
}
.top_menu .on ul.submenu{ max-height: 400px;}
.top_menu ul.submenu li{ display: block; margin: 4px; }
.top_menu ul.submenu li:first-child { border:none; }
.top_menu ul.submenu a{ display: block; color: var(--c-white); padding: 5px; line-height: 18px; font-size: 14px; text-align: center;}
.top_menu ul.submenu a:hover{ background: var(--c3rd-color); color: var(--c-white);}
@media only screen and (max-width: 992px) {

	/*MOBILE MENU*/
	.menu_btn{ position: absolute; top:0; left:0; display:block; width:60px; height:60px; z-index:1000; cursor: pointer;} 
	.menu_btn>div{ position:absolute; width:24px; height:2px; background:var(--main-color); left:12px;
		transition: 300ms ease;
	}
	.menu_btn.on>div{ background: var(--c-white);}
	.menu_btn .m1{ top:20px;}
	.menu_btn .m2{ top:28px;}
	.menu_btn .m3{ top:36px; }
	.menu_btn:hover .m1,.menu_btn:hover .m2,.menu_btn:hover .m3{ width:24px;}
	.menu_btn.on .m1{ top:29px; width: 24px; transform: rotateZ(45deg);}
	.menu_btn.on .m2{opacity:0;width:0;left:50%;}
	.menu_btn.on .m3{top:29px;width:24px;transform:rotateZ(-45deg);}

	.top_menu{ padding: 60px 0 0 0;  background: var(--main-color); position:fixed; top:0; left:-100%; width:270px; z-index:100; height: 100%;}
	.top_menu ul{ list-style:none; margin:0; padding:0 20px; width:100%; display:block; box-sizing: border-box;}
	.top_menu ul>li{ display: inline; margin: 0;}
	.top_menu ul>li>a{ color: var(--c-white) !important; padding:20px; text-align: left; border-top:solid 1px var(--c-white); font-size: 15px;}
	.top_menu ul>li>a::before{ display: none;}
	.top_menu ul>li:first-child>a{ border: none;}
	.top_menu ul>li>a.cur, .top_menu ul>li>a:hover{ color: var(--c-white) !important;}

	.top_menu ul.submenu { max-height: 400px; position: relative; top: 0; left: 0; margin: 0 auto; width: auto; padding: 0 0 20px 0; border-radius: 0;}
	.top_menu ul.submenu a{ border-color: rgba(255, 255, 255, 0.2); text-align: left; padding: 10px 20px;}
	.top_menu ul.submenu a:hover{ background: transparent;}
	.top_menu.on{ left:0; overflow:auto; -webkit-overflow-scrolling: touch;}
	.top_menu_mask{ display:block; position:fixed; top:0; left:100%;; width:100%; height:100%; z-index:0; opacity:0; background: rgba(0,0,0,0.8);
		transition: opacity 400ms ease-in;
	}
	.top_menu_mask.on{ left:0; opacity:1;}
}
/*------*/
/* =============================================================================
   HEADER END
   ========================================================================== */

/* =============================================================================
   FOOTER
   ========================================================================== */
#footer { padding: 40px 0;}
#footer .copyright { display: flex; gap: 20px; justify-content: center; font: 500 14px/20px 'Lato', sans-serif; padding-top:20px; margin-top: 20px; color:var(--c-dark);}
.attention { display: flex; gap: 4px; justify-content: center;}
.attention a{ display: flex; width: 40px; height: 40px; justify-content: center; align-items: center; border-radius: 50%; font-size: 24px; color: var(--second-color);
	transition: 300ms ease;
}
.attention a>img{ display: inline-flex; width: 24px; height: 24px; filter: invert(14%) sepia(55%) saturate(1627%) hue-rotate(208deg) brightness(96%) contrast(94%);}
.attention a:hover{ color: var(--main-color); }
.attention a:hover img{ filter: invert(84%) sepia(81%) saturate(5122%) hue-rotate(308deg) brightness(85%) contrast(84%);}
@media only screen and (max-width: 576px) {
	#footer .copyright { font-size: 13px; padding: 0 0 20px;}
}

/* =============================================================================
	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; aspect-ratio: 2 / 1; }
.top_banner::before{ display: block; content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 70%; background: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.00) 100%); z-index: 100; pointer-events: none;}
.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; flex-direction: column; justify-content: center; align-items: center; z-index: 1; gap: 20px; padding-top: 100px;}
.top_banner .txt img{ display: inline-block;}
.top_banner .txt .title{ color:var(--c-white); text-shadow: 0 0 10px rgba(0,0,0,0.3); letter-spacing: 0.1em; font: 500 74px/1.1em 'Noto Serif TC', serif; text-align: center;}
.top_banner .txt .con{ color:var(--c-white); text-shadow: 0 0 10px rgba(0,0,0,0.3); font: 400 18px/2em 'Lato', sans-serif; text-align: center;}
.top_banner .swiper-pagination { z-index: 100; bottom: 20 !important; }
.top_banner .swiper-pagination-bullet{width:8px;height:8px;background:var(--main-color);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;
    }
}
/*mobile*/
.top_banner.mob .pic{ aspect-ratio:inherit; height: 100vh; min-height: 600px;}
.tip_arrow{ display: none;}

@media only screen and (min-width: 1920px) {
	.top_banner .pic{ aspect-ratio: 3 / 1; }
}
@media only screen and (max-width: 1200px) {
	.top_banner .pic{ aspect-ratio: 4 / 3; }
	.top_banner .txt .title{ font-size: 60px;}
	.top_banner .txt .con{ font-size: 16px;}
}
@media only screen and (max-width: 992px) {
	.top_banner .txt{ padding-top: 0;}
	.top_banner .txt .title{ font-size: 50px;}
	.top_banner .txt .con{ font-size: 14px;}
}

@media only screen and (max-width: 576px) {
	.tip_arrow{ display: block; position: fixed; bottom: 10%; left: 0; right: 0; text-align: center; font-size: 32px; color: #cb9f61; z-index: 1000;
		animation: arrowud 1.5s infinite ease-in;
	}
	@keyframes arrowud{
		0%{transform:translate3d(0,0,0) scale(1);}
		40%{transform:translate3d(0,-20px,0) scale(1.1);}
		70%{transform:translate3d(0,0,0) scale(1);}
		80%{transform:translate3d(0,0,0) scale(0.95);}
		100%{transform:translate3d(0,0,0) scale(1);}
	}
	.tip_arrow.ed { display: none;}
}
/*------*/

/*---page_banner---*/
.page_banner { position: relative; overflow: hidden; background-color: var(--c3rd-color);}
.page_banner .item{ position: relative; display: block; height: 310px;}
.page_banner .pic{ position: absolute; top: 0; left: 0;  width: 100%; height: 100%; z-index: 1; pointer-events: none;}
.page_banner .pic img{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none;}
.page_banner .txt{ position: absolute; width: 100%; height: auto; text-align: center; z-index: 100; box-sizing: border-box; padding: 225px 0 0 0; }
.page_banner .txt .title{ color:var(--c-white); margin: 10px 0; text-shadow: 0 0 5px rgba(0,0,0,0.5); font: 500 40px/1.1em 'Noto Serif TC', serif;  text-align: center; letter-spacing: 0.1em;}

.page_banner.s2 { overflow: inherit;}
.page_banner.s2 .item { height: 500px; }
.page_banner.s2 .txt p{ color: var(--c-white); margin: 30px 0; }
.rb_2{ position: absolute; left: 50%; top: 470px; width: 48px; height: 40px; background: var(--second-color); z-index: 100; transform: translateX(-50%);}
.rb_2::before{ display: block; content: ''; position: absolute; bottom: -12px; left:0;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 12px 24px 0 0;
	border-color: var(--second-color) transparent transparent transparent;
}
.rb_2::after{ display: block; content: ''; position: absolute; bottom: -12px; right:0;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 24px 12px 0;
	border-color: transparent var(--second-color) transparent transparent;
}
@media only screen and (max-width: 992px) {
	.page_banner .item { height: 200px; }
	.page_banner .txt{ padding: 100px 0 0 0;}
	.page_banner.s2 .item { height: 350px; }
	.rb_2{ top: 320px;}
}
@media only screen and (max-width: 576px) {
	.page_banner .item { height: 160px;}
	.page_banner .txt{ padding: 80px 0 0 0;}
	.page_banner .txt .title{ font-size: 30px;}
	.page_banner.s2 .txt p{ font-size: 14px; }
}

/*------*/

/*---pro_banner---*/
.pro_banner { position: relative; background: var(--c3rd-color);}
.pro_banner .bg{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; overflow: hidden;}
.pro_banner .bg img{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;}
.pro_banner .txt{ position: relative; width: 50%; padding: 300px 0 150px; z-index: 2;}
.pro_banner .txt .title{ color:var(--c-white); margin: 0 0 20px; font: 500 50px/1.4em 'Noto Serif TC', serif;  letter-spacing: 0.1em;}
.pro_banner .txt .sub_title{ color:#BF8D4F; margin: 0 0 20px; font: 400 24px/1.4em 'Noto Serif TC', serif; }
.pro_banner .txt .con{ color:var(--c-white); text-shadow: 0 0 5px rgba(0,0,0,0.5); font-size:14px;}
.pro_banner .pho{ position: absolute; width: 480px; height: 576px; z-index: 100; box-sizing: border-box; bottom:-250px; right:50px;}
.pro_banner .pho img{ width: 100%;}
@media only screen and (max-width: 992px) {
	.pro_banner .txt{ padding: 150px 0; width: 60%;}
	.pro_banner .txt .title{ font-size: 40px;}
	.pro_banner .txt .sub_title{ font-size: 20px; }
	.pro_banner .pho{ width: 400px; height: 480px; bottom:-200px; right:50px;}
}
@media only screen and (max-width: 720px) {
	.pro_banner .txt{ padding: 100px 0; }
	.pro_banner .pho{ width: 300px; height: 360px; bottom:-160px; right:40px;}
}
@media only screen and (max-width: 576px) {
	.pro_banner .txt{ width: 100%; padding: 100px 0 20px; }
	.pro_banner .txt .title{ font-size: 30px;}
	.pro_banner .pho{ position: relative; width: 360px; height: 432px; margin-top: -200px; margin-right: 180px; bottom:-200px; right:25%;}
}
/*------*/

/*---title_box---*/
.title_box{ position: relative; margin:0 0 3rem; }
.title_box .title{ color: var(--second-color); font: 600 74px/1.1em 'Noto Serif TC', serif; text-align: center;}
.title_box .title b{ font-weight: 600;}
.title_box .title span{ font-size: 40px; line-height: 1em; font-weight: 400; display: block;}
.title_box.w .title{ color: var(--c-white);}
@media only screen and (max-width: 992px) {
	.title_box .title b{ font-size: 60px; line-height: 1em;}
	.title_box .title span{ font-size: 30px; }
}
/*------*/

/*---inx_pro_box---*/
.inx_pro_box{ position: relative; padding: 6rem 0;}
/* .inx_pro_box ul{ position: relative; display: flex; flex-wrap: wrap; list-style: none; margin: 0; padding: 0;}
.inx_pro_box ul li{ flex: 0 0 calc(100%/4); text-align: center;} */
.inx_pro_box .inx_pro_list{ padding-bottom: 40px;}
.inx_pro_box .swiper-slide{ text-align: center; width: 300px;}
.inx_pro_box .pic{ max-width: 100%;}
.inx_pro_box .pic img{ max-width: 100%;}
.inx_pro_box .txt{ position: relative; padding: 0 30px;}
.inx_pro_box .txt .name{
	position: relative; color:var(--c-dark); letter-spacing: 0.1em; margin: 0 0 1em;
	font: 700 17px/20px 'Lato', sans-serif;
	display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:1; line-clamp:1; overflow: hidden;
}
.inx_pro_box .txt .con{ 
	position: relative; color:var(--c-gray); letter-spacing: 0.15em; margin: 0 0 2em; 
	font: 400 15px/20px 'Lato', sans-serif; min-height: 60px;
	display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; line-clamp:3; overflow: hidden;
}

.inx_pro_box .swiper-pagination { z-index: 100; bottom: 0 !important; }
.inx_pro_box .swiper-pagination-bullet{width:8px;height:8px;background:var(--main-color);opacity:0.5;border-radius:5px;}
.inx_pro_box .swiper-pagination-bullet-active{opacity:1;width:20px;}
.inx_pro_box .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;
    }
}
@media only screen and (max-width: 992px) {
	.inx_pro_box{ padding: 4rem 0;}
	/* .inx_pro_box ul li{ flex: 0 0 calc(100%/2); margin-bottom: 40px;} */
	.inx_pro_box .txt{ padding: 0 10px;}
	.inx_pro_box .txt .name{ font-size: 16px;}
	.inx_pro_box .txt .con{ font-size: 14px;}
	.inx_pro_box .swiper-slide{ width: 40%;}
}
@media only screen and (max-width: 576px) {
	.inx_pro_box{ padding: 3rem 0;}
	.inx_pro_box .txt .name{ font-size: 14px;}
	.inx_pro_box .txt .con{ display: none;}
	.inx_pro_box .swiper-slide{ width: 150px;}
}
/*------*/

/*---inx about---*/
.inx_about_box{ position: relative; padding: 6rem 0 300px; overflow: hidden;}
.inx_about_box .bg{ position: absolute; top: -30%; left: 0; width: 100%; height: 130%; background: no-repeat center; background-size: cover; }
.inx_about_box .txt{ max-width: 550px; margin: auto; text-align: center; padding: 0 10px;}
.inx_about_box .txt .name{ position: relative; font: 600 24px/1.1em 'Noto Serif TC', serif; margin:0 0 20px 0; z-index: 1; color: var(--c-white); letter-spacing: 0.1em;}
.inx_about_box .txt .con{ position: relative; font-size: 15px; text-align: center; z-index: 1; color: var(--c-white);}
.inx_about_box.dl{ position: relative; padding: 300px 0; overflow: hidden;}
.inx_about_box.dl .txt .name{ color: var(--c-dark);}
.inx_about_box.dl .txt .con{ color: var(--c-gray);}
.inx_about_box.qu{ position: relative; padding: 300px 0 6rem; overflow: hidden;}
.photos{ position: relative; max-width: 1200px; z-index: 100; display: flex; margin: -200px auto ;}
.photos a{ position: relative; display: block; width: 50%; height: 400px;}
.photos a img{ position: absolute; top: 0; left: 0; object-fit: cover; width: 100%; height: 100%;}
.photos a figure{ display: none;}
@media only screen and (max-width: 992px) {
	.inx_about_box{ padding: 4rem 0 250px;}
	.inx_about_box.dl{ padding: 250px 0;}
	.inx_about_box.qu{ padding: 250px 0 4rem;}
	.photos{ margin: -150px 0;}
	.photos a{ height: 300px;}
	.inx_about_box .txt .con{ text-align: justify;}
}
@media only screen and (max-width: 576px) {
	.inx_about_box{ padding: 3rem 0 120px;}
	.inx_about_box{ padding: 3rem 0 120px;}
	.inx_about_box.dl{ padding: 120px 0;}
	.inx_about_box.qu{ padding: 120px 0 3rem;}
	.photos{ margin: -60px 0;}
	.photos a{ height: 120px;}
}
/*------*/

/*---PRODUCTS---*/
.pro_box{ position: relative; z-index: 100; margin: 0; padding: 120px 0 0; box-sizing: border-box; overflow: hidden;}
.pro_box .title{ position: relative; margin:80px 0 60px; z-index: 1; color: var(--second-color); font-size: 74px; line-height: 1.1em; font-weight: 600; text-align: center;}
.pro_box .title span{ font-size: 40px; line-height: 1em; font-weight: 400; display: block;}
.pro_box ul{ position: relative; display: flex; flex-wrap: wrap; list-style: none; margin: 0; padding: 0;}
.pro_box ul li{ flex: 0 0 calc( 100% / 3); text-align: center;}
.pro_box .pic{ position: relative; max-width: 100%;}
.pro_box .pic img{ max-width: 100%;}
.pro_box .pic .icon{ position: absolute; bottom: 15px; right: 20%;}
.pro_box .txt{ margin: 0; padding: 0 30px 20px;}
.pro_box .txt .name{ font-size: 17px; margin: 0 0 1em; letter-spacing: 1px;}
.pro_box .txt .con{ position: relative; line-height: 20px; height: 60px; color:var(--c-dark); overflow: hidden; letter-spacing: 0.1em;}

@media only screen and (max-width: 992px) {
	.pro_box ul li { flex: 0 0 calc( 100% / 2);}
	.pro_box .txt{ padding:0 10px 20px;}
	.pro_box .txt p{ display: none;}
}
/*------*/

/*---news_box---*/
.news_box{ position: relative; padding: 6rem 0;}
.news_box .list{ position: relative; display: flex; flex-direction: column; gap: 50px;}
.news_box .list .item{ position: relative; display: flex;  background: var(--c-white);
	transition: 500ms ease-in-out;
}
.news_box .list .item::before{ display: block; content: ''; width: 80%; height: 30px; box-shadow: 0 0 0px rgba(0,0,0,0); position: absolute; bottom: 20px; left:10%; transform:rotate(-2deg); z-index: -1;
	transition: 500ms ease-in-out;
}
.news_box .list .item::after{ display: block; content: ''; width: 80%; height: 30px; box-shadow: 0 0 0px rgba(0,0,0,0); position: absolute; bottom: 20px; left:10%; transform:rotate(2deg); z-index: -1;
	transition: 500ms ease-in-out;
}
.news_box .list .item .pic{ position: relative; aspect-ratio: 16 / 9; height: 240px;}
.news_box .list .item .pic img{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;}
.news_box .list .item .txt{ flex: 1 1 auto; padding: 30px 40px;}
.news_box .list .item .txt .date{ font: 600 14px/1.1em 'Noto Serif TC', serif; color: var(--second-color);
	transition: color 500ms ease-in-out;
}
.news_box .list .item .txt .title{ font: 400 24px/1.1em 'Noto Serif TC', serif; color: var(--c-black); display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:1; line-clamp:1; overflow: hidden;
	transition: color 500ms ease-in-out;
}
.news_box .list .item .txt .con{ border-top:solid 1px var(--c-gray-light); padding-top: 10px; line-height: 22px; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; line-clamp:3; overflow: hidden;
	transition: color 500ms ease-in-out;
}
.news_box .list .item .txt .more{ float: right; color: #cb9f61; padding: 2px 25px; border-radius: 30px; font-weight: 700; font-size: 14px; font-family: 'Lato', sans-serif; background: #f1e5d3; 
	transition: color 500ms ease-in-out;
}
.news_box .list .item:hover { background: var(--main-color);}
.news_box .list .item:hover .txt .date{ color: var(--c-white); }
.news_box .list .item:hover .txt .title{ color: var(--c-white); }
.news_box .list .item:hover .txt .con{ color: var(--c-white); }
.news_box .list .item:hover .txt .more{ color: #BF8D4F; background: var(--c-white); }
.news_box .list .item:hover::before{ box-shadow: 0 0 50px rgba(0,0,0,0.9);}
.news_box .list .item:hover::after{ box-shadow: 0 0 50px rgba(0,0,0,0.9); }
.news_box .view{ position: relative;}
.news_box .view .cover{ position: relative; aspect-ratio: 2 / 1;}
.news_box .view .cover img{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;}
.news_box .view .txt{  padding: 40px 0;}
.news_box .view .txt .date{ font: 600 14px/1.1em 'Noto Serif TC', serif; color: var(--second-color);}
.news_box .view .txt .title{ font: 400 24px/1.1em 'Noto Serif TC', serif; color: var(--c-black); border-bottom:solid 1px var(--c-gray-mid); padding: 0 0 10px; margin: 0 0 10px;}
.news_box .view .txt .edit{ display: flex; flex-direction: column; gap: 20px;}
.news_box .view .txt .edit a{ color: var(--main-color);}
.news_box .view .txt .edit img{ max-width: 100%;}
.news_box .view .txt .edit .pic{ position: relative; aspect-ratio: 16 / 9;}
.news_box .view .txt .edit .pic.v{ aspect-ratio: 9 / 16;}
.news_box .view .txt .edit .pic img{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;}
.news_box .view .txt .edit a.phoshow{ display: block;}
.news_box .view .txt .edit h1,.news_box .view .txt .edit h2,.news_box .view .txt .edit h3,.news_box .view .txt .edit h4,.news_box .view .txt .edit h5,.news_box .view .txt .edit h6{ margin: 10px 0 0 0; font-family: 'Noto Serif TC', serif;;}
.news_box .view .txt .edit .row>* h1,.news_box .view .txt .edit .row>*  h2,.news_box .view .txt .edit .row>*  h3,.news_box .view .txt .edit .row>*  h4,.news_box .view .txt .edit .row>*  h5,.news_box .view .txt .edit .row>*  h6{ margin: 10px 0 0 0;}
.news_box .view .txt .edit .row>* p,.news_box .view .txt .edit .row>* li{ margin-bottom: 20px;}
.news_box .view .txt .edit p{ font-size: 15px; margin: 0;}
.news_box .view .txt .edit li{ font-size: 15px; margin: 0;}
.news_box .view .txt .edit a{ text-decoration: underline;}
.news_box .view .txt .edit a>*{ text-decoration: underline;}
@media only screen and (max-width: 992px) {
	.news_box{ padding: 4rem 0;}
	.news_box .list .item .txt{ padding: 20px;}
	.news_box .list .item .txt .title{ font-size: 18px;}
	.news_box .list .item .pic{ height: 210px;}
}
@media only screen and (max-width: 720px) {
	.news_box .list .item{ flex-direction: column;}
	.news_box .list .item .pic{ height: auto;}
}
@media only screen and (max-width: 576px) {
	.news_box{ padding: 3rem 0;}
}
/*------*/

/*---store_box---*/
.store_box{ position: relative; padding: 6rem 0;}
.store_box .list{ position: relative; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 40px;}
.store_box .list li{ border-bottom: solid 1px var(--c-gray-mid); padding-bottom: 40px;}
.store_box .list li:last-child{ border: none;}
.store_box .list .item{ position: relative; background: var(--c-white); display: flex; }
.store_box .list .item::before{ display: block; content: ''; width: 80%; height: 30px; box-shadow: 0 0 0px rgba(0,0,0,0); position: absolute; bottom: 20px; left:10%; transform:rotate(-2deg); z-index: -1;
	transition: 500ms ease-in-out;
}
.store_box .list .item::after{ display: block; content: ''; width: 80%; height: 30px; box-shadow: 0 0 0px rgba(0,0,0,0); position: absolute; bottom: 20px; left:10%; transform:rotate(2deg);
z-index: -1;
	transition: 500ms ease-in-out;
}
.store_box .list .item .pic{ position: relative; flex: 0 0 50%; height: 250px;}
.store_box .list .item .pic img{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;}
.store_box .list .item .pic .map{ position: absolute; top:0; left:0; width: 100%; height: 100%; opacity: 0;
	transition: opacity 500ms ease-in-out;
}
.store_box .list .item .pic .map iframe{ position: absolute; top:0; left:0; width: 100%; height: 100%;}
.store_box .list .item .txt{ flex: 0 0 50%; height: 250px; padding: 35px; display: flex; flex-direction: column; justify-content: center;}
.store_box .list .item .txt .title{ font: 400 30px/1.1em 'Noto Serif TC', serif; color: var(--second-color); margin: 0 0 10px;}

.store_box .list .item .txt .con{ line-height: 24px; }
.store_box .list .item .links a{ display: inline-block; font-size: 24px; line-height: 24px; width: 32px; text-align: center; color: #BF8D4F; margin: 0 2px 0 0;
	transition: 500ms ease-in-out;
}
.store_box .list .item:hover h4{ color: #001f3e;}
.store_box .list .item:hover::before{ box-shadow: 0 0 50px rgba(0,0,0,0.9);}
.store_box .list .item:hover::after{ box-shadow: 0 0 50px rgba(0,0,0,0.9); }
.store_box .list .item .links a:hover{
	transform: scale(1.05);
}
.store_box .item:hover .pic .map{ opacity: 1;}
@media only screen and (max-width: 992px) {
	.store_box{ padding: 4rem 0;}
	.store_box .list .item .txt .title{ font-size: 24px;}
}
@media only screen and (max-width: 720px) {
	.store_box .list li{ padding-bottom: 0;}
	.store_box .list .item{ flex-wrap: wrap;}
	.store_box .list .item .pic{ flex: 0 0 100%; height: 250px;}
	.store_box .list .item .txt{ flex: 0 0 100%; height: auto; padding: 20px;}
}
@media only screen and (max-width: 576px) {
	.store_box{ padding: 3rem 0;}
}
/*------*/

/*---photos---*/
.pho_box{ position: relative; padding: 6rem 0;}
.pho_box .txt { position: relative;}
.pho_box .txt .title{ font: 400 30px/1.1em 'Noto Serif TC', serif; letter-spacing: 0.1em; color: var(--second-color); margin-bottom: 20px;}
.pho_box .txt .sub_title{ font: 500 24px/1.1em 'Noto Serif TC', serif; letter-spacing: 0.1em; color: var(--c-dark); margin-bottom: 20px;}
.pho_box .pho-gallery{ width: 100%; display: flex; gap: 10px; flex-wrap: wrap;}
.pho_box a{ position: relative; overflow: hidden; flex: 0 0 calc( (100% - (10px * 3)) / 4); aspect-ratio: 1 / 1;}
.pho_box a:nth-child(6n-5){ flex: 0 0 calc( (100% - 10px) / 2); aspect-ratio: 2 / 1;}
.pho_box a:nth-child(6n){ flex: 0 0 calc( (100% - 10px) / 2); aspect-ratio: 2 / 1;}
.pho_box a img{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;}
.pho_box a::before{ display: block; content: ''; position: absolute; background: #cb9f61; opacity: 0; z-index: 1; width: 100%; height: 100%;
	transition: 500ms ease-in-out;
}
.pho_box a::after{ display: flex; justify-content: center; align-items: center; position: absolute; color:#FFF; opacity: 0; z-index: 2; width: 100%; height: 100%; font-size: 24px;
	font-family: "FontAwesome"; content: "\f00e";
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
	transition: 500ms ease-in-out;	
	text-shadow: 0 0 0 10px rgba(0,0,0,0.2);
}
.pho_box.s1 .pho-gallery{ gap: 0; }
.pho_box.s1 a{ flex: 0 0 calc( 100% / 4); aspect-ratio: 4 / 3;}
.pho_box.s2 .pho-gallery{ gap: 20px; }
.pho_box.s2 .item{ position: relative;  flex: 0 0 calc( (100% - (20px * 3)) / 4); overflow: hidden; aspect-ratio: 1 / 1;}
.pho_box.s2 .item img{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;}
.pho_box a:hover::before{ opacity: 0.7;}
.pho_box a:hover::after{ opacity: 1;}

@media only screen and (max-width: 992px) {
	.pho_box{ padding: 4rem 0;}
}
@media only screen and (max-width: 720px) {
	.pho_box a{ position: relative; overflow: hidden; flex: 0 0 calc( (100% - (10px )) / 2); aspect-ratio: 1 / 1;}
	.pho_box a:nth-child(6n-5){ flex: 0 0 100%; aspect-ratio: 2 / 1;}
	.pho_box a:nth-child(6n){ flex: 0 0 100%; aspect-ratio: 2 / 1;}
	.pho_box.s1 a{ flex: 0 0 calc( 100% / 2);}
	.pho_box.s2 .item{ flex: 0 0 calc( (100% - (20px)) / 2);}
}
@media only screen and (max-width: 576px) {
	.pho_box{ padding: 3rem 0;}
}
/*------*/

/*---inner_box---*/
.inner_box{ position: relative; padding: 6rem 0;}
.inner_box .cover{ display: block; position: relative; height: 100%; overflow: hidden; }
.inner_box .cover img{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;}
.inner_box .bg{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-repeat: no-repeat; background-position: center; background-size: cover; background-attachment: fixed;}
.inner_box .pic{ display: block; position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
.inner_box .pic img{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;}
.inner_box .txt { position: relative;}
.inner_box .txt .title{ font: 500 30px/1.1em 'Noto Serif TC', serif; letter-spacing: 0.1em; color: var(--second-color); margin-bottom: 20px;}
.inner_box .txt .sub_title{ font: 500 20px/1.1em 'Noto Serif TC', serif; letter-spacing: 0.1em; color: var(--second-color); margin-bottom: 20px;}
.inner_box .txt .creator{ display: block;}
.inner_box .txt .sign{ display: block; text-align: right;}
.inner_box .txt.w .title{ color: var(--c-white);}
.inner_box .txt.w .sub_title{ color: var(--c-white);}
.inner_box .txt.w .desc{ color: var(--c-white);}
.inner_box .txt.w .desc p{ color: var(--c-white);}
.inner_box .txt.w .desc li{ color: var(--c-white);}
.inner_box .desc{ display: flex; flex-direction: column; gap: 20px;}
.inner_box .desc a{ color: var(--main-color);}
.inner_box .desc h1,.inner_box .desc h2,.inner_box .desc h3,.inner_box .desc h4,.inner_box .desc h5,.inner_box .desc h6{ margin: 10px 0 0 0;}
.inner_box .desc .row>* h1,.inner_box .desc .row>*  h2,.inner_box .desc .row>*  h3,.inner_box .desc .row>*  h4,.inner_box .desc .row>*  h5,.inner_box .desc .row>*  h6{ margin: 10px 0 0 0;}
.inner_box .desc .row>* p,.inner_box .desc .row>* li{ margin-bottom: 20px;}
.inner_box .desc h3{ position: relative; padding-left: 10px;}
.inner_box .desc h3::before{ content: ''; display: block; position: absolute; top:0; left: 0; width: 4px; height: 1.4em; background: var(--fourth-color);}
.inner_box .desc h4{ position: relative; padding-left: 10px; color: var(--second-color);;}
.inner_box .desc h4::before{ content: ''; display: block; position: absolute; top:0; left: 0; width: 4px; height: 1.4em; background: var(--second-color);}
.inner_box .desc p{ font-size: 15px; margin: 0;}
.inner_box .desc li{ font-size: 15px; margin: 0;}
.inner_box .desc a{ text-decoration: underline;}
.inner_box .desc a>*{ text-decoration: underline;}
.rb_1{ position: absolute; left: 20px; top: 25px; width: 48px; height: 40px; background: var(--second-color); z-index: 100; }
.rb_1::before{ display: block; content: ''; position: absolute; bottom: -12px; left:0;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 12px 24px 0 0;
	border-color: var(--second-color) transparent transparent transparent;
}
.rb_1::after{ display: block; content: ''; position: absolute; bottom: -12px; right:0;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 24px 12px 0;
	border-color: transparent var(--second-color) transparent transparent;
}
@media only screen and (max-width: 992px) {
	.inner_box { padding: 4rem 0; }
	.inner_box .txt .title{ font-size: 22px;}
	.inner_box .txt .sub_title{ font-size: 18px;}
}
@media only screen and (max-width: 720px) {
	.inner_box .cover{ aspect-ratio: 16 / 9;}
	.inner_box .bg{ background-attachment: inherit;}
}
@media only screen and (max-width: 576px) {
	.inner_box { padding: 3rem 0; }
}		
/*------*/

/*---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; }
}