@charset "UTF-8";
/* =============================================================================
      ____    __  __  __  _____
    /\  _ _`\/\ \/\ \/\ \/ ____/
    \ \ \  \ \ \ \ \ \ \ \ \_____
     \ \ \  \ \ \ \ \ \ \ \_____ \
      \ \ \__\ \ \ \/  \/ / ____\ \
       \ \_____/\ \______/ /\_____/
        \/____/  \/_____/  \/____/
        
    Don't Worry Never Crash
   ========================================================================== */
/* =============================================================================
   BASIC
   ========================================================================== */
:root {
	--main-color: #388F9E;
	--second-color: #67B5B7;
	--third-color: #AFC6CB;
	--fourth-color: #1D4D55;
	--bg-color: #262626;
	--c-black: #000;
	--c-dark: #333;
	--c-gray: #666;
	--c-gray-mid: #999;
	--c-gray-light: #F2F2F2;
	--c-white: #FFF;
}
/*---DEFAULT---*/ 
html, body { height: 100%; -webkit-text-size-adjust: none; text-size-adjust: none;}
body { background: var(--c-white);}
body, th, td, input { font-size: 100%; }
figure{ margin: 0;}
a { text-decoration: none; }
p { font-family: 'Outfit', 'Noto Sans TC', sans-serif; font-size: 14px; line-height: 2em; margin-bottom: 1em; font-weight: 400; color: var(--c-gray);}
li { font-family: 'Outfit', 'Noto Sans TC', sans-serif; font-size: 14px; 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: 'Outfit', 'Noto Sans TC', sans-serif; font-weight: 600;}
h1 { font-size: 2.5em; line-height: 1.1333em; margin-bottom: .2666em; }
h2 { font-size: 1.8em; line-height: 1.1666em; margin-bottom: .4555em; }
h3 { font-size: 1.429em; line-height: 1.4em; margin-bottom: .4em; color: var(--c-dark);}
h4 { font-size: 1.143em; line-height: 1.5em; margin-bottom: .4555em; color: var(--c-dark);}
h5 { font-size: 1em; line-height: 1.5em; margin-bottom: .5em; 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(--main-color); color: var(--c-white);}
	/*SCROLL BAR*/
	body.pc::-webkit-scrollbar{ width:8px; }
	body.pc::-webkit-scrollbar-track{ background:#000;}
	body.pc::-webkit-scrollbar-thumb{ background:var(--main-color); }
	body.pc::-webkit-scrollbar-thumb:hover{ background:var(--second-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: linear-gradient(167deg, #388F9E 6.19%, #67B5B7 95.64%);}
.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---*/
.inner-width { position: relative; max-width:1200px; margin: 0 auto;}
.txt-width { position: relative; max-width:1000px; 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: 576px) {
	.inner-width { max-width: calc(100% - 60px); margin: 0 30px;}
	.txt-width { max-width: calc(100% - 60px); margin: 0 30px;}
}
/*------*/

/*---title_bar---*/
.title_bar{ position: relative; text-align: left; margin: 0; padding: 0;}
.title_bar .title{ position: relative; display: inline-flex; flex-direction: column; padding: 0; margin: 0;}
.title_bar .title b{ display: inline-flex; max-width: fit-content; gap: 10px; align-items: center; font: 600 40px/1.1em 'Outfit', 'Noto Sans TC', sans-serif; color: var(--main-color);}
.title_bar .title span{ display: inline-flex; max-width: fit-content; color: var(--c-dark); font: 700 16px/24px 'Outfit', 'Noto Sans TC', sans-serif;}
.title_bar .title i{ font-size: 24px; line-height: 24px; color: var(--main-color); transition: 200ms ease; padding-left: 5px;}
.title_bar .title:hover i{  transform: translateX(10px);}


.title_bar .sub_title{ position: relative; display: inline-flex; flex-direction: column; padding: 0; margin: 0; gap: 5px;}
.title_bar .sub_title b{ display: inline-flex; max-width: fit-content; gap: 10px; align-items: center; font: 300 30px/1.1em 'Outfit', 'Noto Sans TC', sans-serif; color: var(--c-black);}
.title_bar .sub_title span{ display: inline-flex; max-width: fit-content; color: var(--main-color); font: 400 16px/24px 'Outfit', 'Noto Sans TC', sans-serif;}


.title_bar.w b{ color: var(--c-white);}
.title_bar.w span{ color: var(--c-white);}

@media only screen and (max-width: 992px) {
	.title_bar .title { font-size: 45px; line-height: 1em;}
	.title_bar .sub_title b{ font: 400 20px/1.1em 'Outfit', 'Noto Sans TC', sans-serif; }
	.title_bar .sub_title span{ font: 400 14px/24px 'Outfit', 'Noto Sans TC', sans-serif;}
}
/*------*/

/*---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: 30px; background: var(--main-color); box-sizing: border-box; vertical-align: middle; gap: 10px; border: 0;
	font: 600 16px/40px 'Outfit', sans-serif; overflow: hidden; white-space: nowrap;
	transition: 200ms ease;
}
.btn_more.c2{ background: var(--second-color);}
.btn_more:hover, .btn_more:focus{ color: var(--c-white); background: var(--fourth-color); box-shadow: 0 8px 20px rgba(47,85,212,.25);}

.btn_send{ position: relative; display: flex; color: var(--c-white);  justify-content: space-between; width: 100%; align-items: center; padding: 0 20px; border-radius: 30px; background: var(--second-color); box-sizing: border-box; vertical-align: middle; gap: 10px; border: 0;
	font: 600 16px/40px 'Outfit', sans-serif; overflow: hidden; white-space: nowrap;
	transition: 200ms ease;
}
.btn_send:hover, .btn_send:focus{ color: var(--c-white); background: var(--fourth-color); box-shadow: 0 8px 20px rgba(47,85,212,.25);}


.more_bar{ position: absolute; bottom: 0; right: 0;}
@media only screen and (max-width: 992px) {
	.more_bar{ position: relative; margin-top: 20px;}
}
/*------*/

/*---to_top---*/
.to_top{ position: fixed; cursor: polato; bottom: -60px; right: 0; width: 50px; height: 50px; line-height: 50px; text-align: center; background: var(--main-color); border-radius: 30px 0 0 0; color: var(--c-white); font-size: 20px; z-index: 100; transition: 300ms ease;}
.to_top i{ transform: translateX(2px) translateY(2px);}
.to_top:hover{ background: var(--second-color); color: var(--c-white);}
.to_top.ed{ bottom: 0; }
@media only screen and (max-width: 992px) {
	.to_top i{ transform: translateX(0) translateY(0);}
}
/*------*/

/* =============================================================================
   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:relative; z-index:1000; width: 100%; top: 0; left:0;}

#header.page{ position: fixed;}
/* 進入吸頂狀態 */
#header.is-fixed{ position: fixed; top: 0; left: 0;}

#header .bg{ position: absolute; top: 0; left: 0; z-index: -1; width: 100%; height: 60px; 
	border-radius: 0 0 30px 30px;
	background: rgba(255, 255, 255, 0.90);
	backdrop-filter: blur(30px);
	transition: 300ms ease;
}

/*---logo---*/
#header .logo { position: relative;
	transition: 300ms ease;
}
#header .logo a { position: relative; display: block;}
#header .logo a img{ height: 30px;}
#header .inner-width{ display: flex; justify-content: flex-start; align-items: center; gap: 20px; padding: 15px 0; width: 1200px; margin: auto;}

.top_menu{ position: absolute; top: 0; right: 0;}
.top_menu ul{ display: flex; list-style: none; padding: 0; margin: 0;}
.top_menu>ul>li>a{ display: block; font: 700 14px/20px 'Outfit', sans-serif; color: var(--c-dark); text-align: center; padding: 10px 16px;}

@media only screen and (max-width: 992px) {

}
/*------*/

/*---top_menu---*/
.top_menu{ box-sizing: border-box; z-index: 2; flex: 0 0 auto;
	
}
	.top_menu ul{ list-style:none; margin:0; box-sizing: border-box; display: flex;}
	.top_menu>ul>li{ position: relative; }
	.top_menu>ul>li>a{ position:relative; display:block; font-size: 15px; color: var(--c-dark); padding:0 1em; line-height: 60px;
		transition: 500ms ease;
	}
	.top_menu>ul>li>a::before{
		position: absolute; bottom: -34px; left: calc(50% - 4px); display: block; content: ''; width: 8px; height: 8px; background: var(--main-color); border-radius: 4px; pointer-events: none; opacity: 0;
		transition: 0.6s cubic-bezier(0.68, -0.6, 0.32, 1.6);
	}
	
	.top_menu .submenuhead>a{ cursor: context-menu;}
	.top_menu .submenu{ position: absolute; top: 60px; left: -10px; background:var(--main-color); overflow: hidden; border-radius: 20px; opacity: 0; pointer-events: none;
		transform: translateY(-50px) scale(0.5);
		transition: transform 0.6s cubic-bezier(0.68, -0.6, 0.32, 1.6), opacity 0.6s cubic-bezier(0.68, -0.6, 0.32, 1.6);
	}
		.top_menu .on .submenu{ opacity: 1; pointer-events: all;
			transform: translateY(0px) scale(01);
		}
		.top_menu .submenu ul{ padding: 10px; flex-direction: column;}
		.top_menu .submenu ul>li{ display: block;}
		.top_menu .submenu ul>li + li{  border-top: solid 1px rgba(255, 255, 255, 0.1);}
		.top_menu .submenu a{ position: relative; display: block; color: #FFF; padding: 10px 1em; line-height: 20px; margin:0; font-size: 14px; text-align: center; white-space:nowrap; border-radius: 20px; 
			transition: 500ms ease;
		}

/*lan_menu*/
.lan_menu{ position: relative;}
.lan_menu a{ display: inline-flex; color: var(--main-color); font: 600 12px/22px 'Outfit', sans-serif;  border: solid 1px transparent; padding: 0 10px; border-radius: 12px;}
.lan_menu a.on{ border: solid 1px var(--main-color); color: var(--main-color); pointer-events: none;}

@media only screen and (min-width: 993px) {
	.top_menu>ul>li>a:hover{ color: var(--main-color);}
	.top_menu>ul>li>a:hover::before{bottom: -4px; opacity: 1;}
	.top_menu .submenu a:hover, .top_menu ul.submenu a:focus{ background: #FFF; color: var(--fourth-color);}
}	
.top_menu>ul>li.on>a{ color: var(--main-color); }
.top_menu>ul>li.on>a::before{bottom: -4px; opacity: 1;}
.top_menu>ul>li.cur>a{ color: var(--main-color);}
.top_menu>ul>li.cur>a::before{bottom: -4px; opacity: 1; background-color: var(--fourth-color);}

@media only screen and (max-width: 992px) {
	/*MENU*/
	.menu_btn{ position: absolute; top:0; right:-20px; display:block; width:60px; height:60px; z-index:3000; cursor: pointer;} 
	.menu_btn>div{ position:absolute; width:24px; height:2px; background: var(--main-color); left:17px; transition: 0.2s ease-in; }
	.menu_btn.on{ position: fixed; top: 0; right: 20px;}
	.menu_btn.on>div{ background: var(--c-white);}
	.menu_btn .m1{ top:21px;}
	.menu_btn .m2{ top:29px;}
	.menu_btn .m3{ top:37px;}
	.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 .lan_menu{ position: absolute; top: 17px; left: 20px; }
	.top_menu .lan_menu a{ display: inline-flex; color: var(--c-white); font: 600 12px/22px 'Outfit', sans-serif;  border: solid 1px transparent; padding: 0 10px; border-radius: 12px;}
	.top_menu .lan_menu a.on{ border: solid 1px var(--c-white); color: var(--c-white); pointer-events: none;}


	.top_menu{ background: var(--main-color) url(../images/box_bg2.jpg) center center; background-size: cover;; position:fixed; top:0 !important; left: initial; right:-100% !important; width:240px;  z-index:100; height: 100%; box-sizing: border-box; letter-spacing: 0.1em; overflow: auto; margin-right: 0;
		transition: 500ms ease-in;
		-webkit-backdrop-filter: blur(20px) saturate(150%);
		backdrop-filter: blur(20px) saturate(150%);
	}
	.top_menu ul{ list-style:none; margin:0; width:100%; display:block; box-sizing: border-box;}
	.top_menu ul>li{ display: block; border-left:none; float: none; margin: 0;}

	.top_menu>ul{ padding:70px 10px; transition: 500ms ease-in;}
	.top_menu>ul>li { display: block; float: none; border-top: solid 1px rgba(255, 255, 255, 0.1);}
	.top_menu>ul>li:first-child{ border: none;}
	.top_menu>ul>li>a{ margin: 5px 0 0; padding:10px; line-height: 1.2em; text-align: left; font-size: 15px; color: var(--c-white) !important;}
	.top_menu>ul>li>a:hover::before, .top_menu>ul>li.on>a::before, .top_menu>ul>li.cur>a::before { bottom: 0; }
	.top_menu>ul>li.submenuhead.on { height: auto; }
	.top_menu .submenu{ position: relative; top: 0; left: inherit; right: inherit; max-height: none; height: auto; overflow: auto; margin-bottom: 5px; box-shadow: none; opacity: 1; transform: scale(1); background: transparent; pointer-events: auto;}
	.top_menu .submenu ul { border-bottom: none; padding: 0;}
	.top_menu .submenu li a{ text-align: left; font-size: 14px; padding-left: 20px; color: var(--c-white);}
	.top_menu.on{ right:0 !important; }
	.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 500ms ease-in; }
	.top_menu_mask.on{ left:0; opacity:1; z-index: 2;}
}
@media only screen and (max-width: 572px) {
	.menu_btn.on{ position: fixed; top: 0; right: 10px;}
}

/*------*/
/* =============================================================================
   HEADER END
   ========================================================================== */


/* =============================================================================
   FOOTER
   ========================================================================== */
#footer { position:relative; padding: 3rem 0; margin: auto; width: 100%; background: var(--main-color) url(../images/box_bg2.jpg) center center; background-size: cover;}
#footer .inner-width{ display: flex; flex-direction: column; gap: 10px; }
#footer .foot_logo{ display: flex; justify-content: center;}
#footer .foot_fx{ position: absolute; top: -100px;}
#footer .copyright { color: var(--c-white); text-align: center; font: 400 12px/20px 'Outfit', sans-serif; }
.attention {display: block; text-align: center;}
.attention a{ display: inline-block; width: 40px; height: 40px; line-height: 40px; text-align: center; border-radius: 50%; font-size: 24px; color: var(--c-white); 
	transition: 300ms ease;
}
.attention a img{ display: inline-block; width: 22px; vertical-align: middle; margin-top: -6px; filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(89deg) brightness(109%) contrast(101%);}
.attention a:hover{ color: var(--main-color); background: var(--c-white);}
.attention a:hover img{ filter: invert(43%) sepia(86%) saturate(302%) hue-rotate(141deg) brightness(95%) contrast(91%); }
/* =============================================================================
	FOOTER END
	========================================================================== */


/*---top_bg---*/
.top_bg{ position: fixed; z-index: -1; background: linear-gradient(180deg, #2B4A5A 0%, #262626 100%); top: 0; left: 0; width: 100%; height: 100%;}
.top_bg .pic{ position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.top_bg .pic::before{ content: ''; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(180deg, rgba(38, 38, 38, 0.00) 0%, #262626 100%); z-index: 1;}
.top_bg .pic img{ position: relative; width: 100%; height: 100%; object-fit: cover; opacity: 0.05;}
/*------*/

/*---FX---*/
.fx1{ position: absolute; z-index: -1; top: -50px; right: -30%; width: 1200px; height: 1200px;
	transform-origin: center center;
	opacity: 0.2;
	background: url(../images/fx1.png);
	background-size: cover;
	mix-blend-mode: color-burn;
	animation: fxRotate 240s linear infinite;
}
.fx1.page{ top: 20px; right: -50px; width: 800px; height: 800px;}

@keyframes fxRotate{
	from{transform: rotate(0deg);}
	to{transform: rotate(360deg);}
}

.afx1{ position: absolute; z-index: 1; top: 0; right: -30%; margin-top: -30%;}
.afx1 img{ max-width: 100%;}
.afx2{ position: absolute; z-index: 0; top: 0; right: -34%; margin-top: 25%;}
.afx2 img{ max-width: 100%;}

.afx3{ position: absolute; z-index: 0; top: 0; width: 180%; right: -80%; margin-top: -30%;}
.afx3 img{ max-width: 100%;}

.afx4{ position: absolute; z-index: 0; top: 0; width: 140%; right: -50%; margin-top: -20%;}
.afx4 img{ max-width: 100%;}

.afx5{ position: relative; }
.afx5 img{ max-width: 100%;}

.afx6{ position: relative; margin: 40px 0;}
.afx6 img{ max-width: 100%;}

@media only screen and (max-width: 992px) {
	.fx1{ top: 50px; right: -20%; width: 600px; height: 600px;}

	.afx1{ position: relative; top: 0; right: -50%; margin-top: -60%; width: 700px;}
	.afx2{ display: none;}

	.afx3{ position: relative; top: 0; right: 0; margin-top: -150px; margin-bottom: 40px; width: 100%;}
	.afx4{ position: relative; top: 0; right: 0; margin-top: -150px; margin-bottom: 40px; width: 100%;}
	
}

@media only screen and (max-width: 720px) {
	.fx1{ top: 50px; right: -20%; width: 400px; height: 400px;}

	.afx1{ position: relative;  top: 0; right: -10%; margin-top: -30%; margin-bottom: 50px; width: 110%; z-index: -1;}
	.afx2{ position: relative;  top: 0; right: 0; margin-top: -25%;}

	.afx3{ margin-top: -100px;}
	.afx4{ margin-top: -100px;}
}

/*------*/

/*---top_banner---*/
.top_banner { position: relative; z-index: 10; padding: 200px 0; height: 100vh; min-height: 800px; overflow: hidden;}
.top_banner .bg{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1;}
.top_banner .bg img{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;}
.top_banner .slide{ max-width: 1200px;  margin: 0 100px;}
.top_banner .txt{ position: absolute; top: 10%; left: 0; z-index: 1; padding: 0 10px; font:600 18px/1.1em 'Outfit', 'Noto Sans TC', sans-serif; white-space: nowrap; color: var(--c-dark); letter-spacing: 1px;}
.top_banner .pic{ position: relative; pointer-events: none;}
.top_banner .pic img{ width: 100%;}
.top_banner .swiper-slide{ opacity: 0; display: flex; justify-content: center; align-items: center;
	transition: 500ms ease;
}
.top_banner .swiper-slide.swiper-slide-active{ opacity: 1;}
.top_banner .swiper-pagination { z-index: 100; bottom: 20px !important; }
.top_banner .swiper-pagination-bullet{width:10px;height:10px;background:var(--main-color);opacity:0.5;border-radius:5px;}
.top_banner .swiper-pagination-bullet-active{opacity:1;width:30px;}
.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 { height: 70vh;}
	.top_banner .slide{ margin: 0 50px;}
	.top_banner .txt{ top: 6%; left: -4px;}
}
@media only screen and (max-width: 576px) {
	.top_banner { height: 60vh; min-height: 500px;}
	.top_banner .slide{ margin: 0 20px;}
	.top_banner .txt{ top: 0; left: -8px; font-size: 16px;}
	.top_banner .pic img{ margin-right: -50px; width: calc(100% + 50px);}
}
/*------*/

/*---page_banner---*/
.page_banner { position: relative; overflow: hidden;}
.page_banner .bg{ position: absolute; top: -30%; left: 0; width: 100%; height: 130%; z-index: -1;}
.page_banner .bg img{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;}
.page_banner .txt{flex-direction:column;justify-content:flex-end;display:flex;padding-bottom:20px;min-height:430px;}
.page_banner h1{margin:0;color:var(--c-white);font:600 60px/1.1em 'Outfit','Noto Sans TC',sans-serif;}
.page_banner p{margin:0;color:var(--c-white);font:700 20px/1.1em 'Outfit','Noto Sans TC',sans-serif;}
@media only screen and (max-width: 992px) {
	.page_banner .txt{ padding-bottom:80px; min-height:300px;}
	.page_banner h1{ font:600 40px/1.1em 'Outfit','Noto Sans TC',sans-serif;}
	.page_banner p{ font:700 16px/1.1em 'Outfit','Noto Sans TC',sans-serif;}
}
/*------*/

/*---bg_box---*/
.bg_box{ position: relative; }
.bg_box .bg{ position: absolute; z-index: -2; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden;}
.bg_box .bg .item { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.bg_box .bg .item img{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;}

.bg_box .bg .item2 { position: absolute; top: -400px; left: 0; width: 100%; height: calc(100% + 400px); }
.bg_box .bg .item2 img{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;}

.bg_box .bg2{ position: absolute; z-index: -1; top: 0; left: 0; width: 100%; height: 150%; overflow: hidden;}
.bg_box .bg2 .item { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.bg_box .bg2 .item img{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;}

.bg_box .bg3{ position: absolute; z-index: -2; top: 0; left: 0; width: 100%; height: 200%; overflow: hidden;}
.bg_box .bg3 .item { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.bg_box .bg3 .item img{ position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; object-fit: cover;}

.bg_box .bg4{ position: absolute; z-index: -2; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden;}
.bg_box .bg4 .item { position: absolute; top: 0; left: 0; width: 100%; height: calc(100% + 200px); margin-top: -200px;}
.bg_box .bg4 .item img{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;}

.bg_box.page { position: relative; padding-bottom: 10px;}
.bg_box.page::before{ display: block; content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 10px; background: #67B5B6; z-index: 1;}
.bg_box.page::after{ display: block; content: ''; position: absolute; bottom: 0; left: 0; width: 10%; height: 10px; background: #388F9E; z-index: 2;}
.bg_box .bg_left{ position: absolute; top: 0; left: 0; width: 50%; height: 100%; background-color: #67B5B6; mix-blend-mode: multiply;}

.bg_box.page .inner-width{ display: flex; align-items: center; height: 390px;}


@media only screen and (max-width: 576px) {
	.bg_box .bg_left{ width: 100%; height: 50%; }
	.bg_box.page .inner-width{ height: 400px; padding-bottom: 200px;}
}
/*------*/

/*---ser_box---*/
.ser_box{ position: relative; padding: 6rem 0; }
.ser_box .fx2{ position: absolute; top: -20%; right: -500px;}
.ser_box .swiper-pagination { z-index: 100; }
.ser_box .swiper-pagination-bullet{ background: var(--main-color); width: 10px; height: 10px; opacity: 0.5; transition: 300ms ease;}
.ser_box .swiper-pagination-bullet-active{ width: 30px; border-radius: 5px; opacity: 1;}

.ser_list{ position: relative; display: flex; gap: 40px; margin: 0; padding: 0; list-style: none; flex-wrap: wrap;}
.ser_list ul{ list-style: none; margin: 0; padding: 0; display: flex;}
.ser_list .item{ border-radius: 30px; overflow: hidden;
	transition: transform 300ms ease;
}
.ser_list.page .item{ flex: 0 0 calc( ( 100% - ( 40px * 2) ) / 3 );}

.ser_list .item a{ position: relative; display: flex; flex-direction: column; }
.ser_list .item .pic{ position: relative; display: block; aspect-ratio: 1 / 1;}
.ser_list .item .pic img{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;
	transition: transform 300ms ease;
}
.ser_list .item .txt{ position: absolute; bottom: 0; left: 0; width: 100%; padding: 20px; background: rgba(56, 143, 158, 0.70); display: flex; flex-direction: column; gap: 10px; border-radius: 0 30px 0 0;
	backdrop-filter: blur(10px);
	transition: 300ms ease;
}
.ser_list .item .txt .title{ margin: 0; color:var(--c-white);}
.ser_list .item .txt .title b{  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:1; line-clamp:1; overflow: hidden;
	font: 600 22px/1.4em 'Outfit', 'Noto Sans TC', sans-serif;
}
.ser_list .item .txt .title span{ display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:1; line-clamp:1; overflow: hidden;
	font: 600 16px/1.4em 'Outfit', 'Noto Sans TC', sans-serif;
}
.ser_list .item .txt .desc{ margin: 0; color: var(--c-white);  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2; overflow: hidden;
	font: 400 14px/1.4em 'Outfit', 'Noto Sans TC', sans-serif;
}
@media only screen and (min-width: 993px){
	.ser_list .item:hover { transform: scale(1.05);}
	.ser_list .item:hover .pic img { transform: scale(1.1);}
	.ser_list .item:hover .txt{ background: var(--main-color); border-radius: 0;}
	.ser_list .item:hover .txt .title{ color: var(--c-white);}
	.ser_list .item:hover .txt .desc{ color: var(--c-white);}
}
@media only screen and (max-width: 1400px) {
	.ser_list{ margin-right: 50px;}
}
@media only screen and (max-width: 992px) {
	.ser_box{ padding: 4rem 0;}
	.ser_box .fx2{ top: -10%; right: -200px; width: 600px;}
	.ser_box .fx2 img{ width: 100%;}
}
@media only screen and (max-width: 576px) {
	.ser_box{ padding: 3rem 0;}
	.ser_box .fx2{ top: 0; right: -200px; width: 500px; opacity: 0.4;}

}
/*------*/

/*---about_box---*/
.about_box{ position: relative; padding: 6rem 0; }
.about_box .fx3{ position: absolute; top: -20%; left: -13%; width: 45%;}
.about_box .fx3 img{ width: 100%;}
.about_box .fx4{position:absolute;z-index:-1;top:250px;right:-100px;fill:#739FA7;width:800px;height:800px;transform-origin:center center;opacity:0.2;background:url(../images/fx1.png);background-size:cover;mix-blend-mode:color-burn;animation:fxRotate 240s linear infinite;}
.about_box .txt{ position: relative; z-index: 1; padding-left: 35%; display: flex; gap: 20px; flex-direction: column;}
.about_box .txt h2{ font-size: 16px; line-height: 1.4em; font-weight: 500; color: var(--c-dark);}
.about_box .txt .item_list{ position: relative; list-style: none; margin: 0; padding: 0;}
.about_box .txt .item_list .name{ font: 500 20px/40px 'Outfit', 'Noto Sans TC', sans-serif; color: var(--main-color);}
.about_box .txt .item_list .name b{ font: 600 30px/40px 'Outfit', 'Noto Sans TC', sans-serif; margin-right: 10px;}

@media only screen and (max-width: 992px) {
	.about_box{ padding: 4rem 0;}
	.about_box .txt{ padding-left: 40%;}
	.about_box .fx3{ top: -10%; left: -15%; width: 50%;}
	.about_box .fx3 img{ width: 100%;}
}
@media only screen and (max-width: 576px) {
	.about_box{ padding: 3rem 0;}
	.about_box .fx3{ position: relative; top: -40px; left:inherit; width: 120%; margin-left: -20%; margin-bottom: 70px;}
	.about_box .txt{ padding-left: 0;}
}
/*------*/

/*---case_box---*/
.case_box{ position: relative; padding: 6rem 0; }

.case_box .fx5{ position: relative; width: 100%; padding: 0 0 17% 0; }
.case_box .fx5 .inner{ position: absolute; top: 0; right: -22%; max-width: 90%;}
.case_box .fx5 img{ display: block; width: 100%; }
.case_box .fx5 .swiper-wrapper{ z-index: 0 !important;}


.case_box .fx5 .big{opacity:0; visibility:hidden;}
.case_box.is_ready .fx5 .big{visibility:visible;}

.case_box .fx5 .big{ display: block; font: 700 100px/1em 'Outfit', 'Noto Sans TC', sans-serif; color: rgba(103, 181, 182, 0.80); white-space:nowrap; opacity:0; visibility:hidden; height: 100px; transform: translateX(-2px); z-index: 1;}
.case_box .fx5 .big:nth-child(3){ z-index: -1;}
.case_box .fx5 .big:nth-child(3){ z-index: -1;}
.case_box .fx5 .big b{ display: inline-block; font: 700 100px/1em 'Outfit', 'Noto Sans TC', sans-serif; color: var(--main-color);}
.case_box .fx5 .big .line{ display:block;}
.case_box .fx5 .big.typing:after{content:"";display:inline-block;width:1ch;height:1em;margin-left:0.1em;vertical-align:-0.15em;animation:cursorBlink .8s steps(1) infinite;}
@keyframes cursorBlink{50%{opacity:0;}}
.case_box .fx5 .title_bar.done .big.typing:after{display:none;}
.case_box .swiper-pagination { z-index: 100; }
.case_box .swiper-pagination-bullet{ background: var(--main-color); width: 10px; height: 10px; opacity: 0.5; transition: 300ms ease;}
.case_box .swiper-pagination-bullet-active{ width: 30px; border-radius: 5px; opacity: 1;}

.case_list{ position: relative; display: flex; gap: 40px; margin: 0; padding: 0; list-style: none; flex-wrap: wrap;}
.case_list ul{ list-style: none; margin: 0; padding: 0; display: flex;}
.case_list .item{ border-radius: 20px; overflow: hidden;
	transition: transform 300ms ease;
}
.case_list.add{ margin-top: -200px; z-index: 3;} 
.case_list.page .item{ flex: 0 0 calc( ( 100% - ( 40px * 2) ) / 3 );}
.case_list .item a{ position: relative; display: flex; flex-direction: column; }
.case_list .item .pic{ position: relative; display: block; aspect-ratio: 1 / 1;}
.case_list .item .pic img{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;
	transition: transform 300ms ease;
}
.case_list .item .txt{ position: absolute; bottom: 0; left: 0; width: 100%; padding: 10px 20px; background: rgba(56, 143, 158, 0.8); backdrop-filter: blur(20px); display: flex; flex-direction: column; gap: 10px;}

.case_list .item .txt .title { margin: 0; color:var(--c-white); display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:1; line-clamp:1; overflow: hidden;
	font: 600 16px/1.4em 'Outfit', 'Noto Sans TC', sans-serif;
}
.case_list .tag_list{ position: absolute; top: -36px; left: 10px;}
@media only screen and (min-width: 993px){
	.case_list .item:hover { transform: scale(1.05);}
	.case_list .item:hover .pic img { transform: scale(1.1);}
	.case_list .item:hover .txt{ background: var(--main-color); border-radius: 0;}
	.case_list .item:hover .txt .title{ color: var(--c-white);}
}
@media only screen and (max-width: 1400px) {
	.case_list{ margin-right: 50px;}
	.case_list.page{ margin-right: 0;}
	.case_box .fx5 .big{ font: 700 80px/1em 'Outfit', 'Noto Sans TC', sans-serif; height: 80px; }
	.case_box .fx5 .big b{ font: 700 80px/1em 'Outfit', 'Noto Sans TC', sans-serif; }
}
@media only screen and (max-width: 992px) {
	.case_box{ padding: 4rem 0;}
	.case_list .item .txt{ background: rgba(56, 143, 158, 0.9);}
	.case_box .fx5 .inner{ width: 90%; max-width: none; }
	.case_box .fx5 .big:nth-child(3){ z-index: 1;}
	.case_box .fx5 .big:nth-child(4){ z-index: 1;}
	.case_box .fx5 .big{ font: 700 55px/1em 'Outfit', 'Noto Sans TC', sans-serif; height: 55px; }
	.case_box .fx5 .big b{ font: 700 55px/1em 'Outfit', 'Noto Sans TC', sans-serif; }

	.case_list.page .item{ flex: 0 0 calc( ( 100% - 40px  ) / 2 );}
}
@media only screen and (max-width: 576px) {
	.case_box{ padding: 3rem 0;}
	.case_box .fx5{ margin: 280px 0 0 0; padding: 0 0 10% 0; }
	.case_box .fx5 .inner{ top: -250px; right: -15%; width: 120%; max-width: none; }


	.case_list.page .item{ flex: 0 0 100%;}
}

/*---blog_box---*/
.blog_box{ position: relative; padding: 5rem 0; }
.blog_list{ position: relative; display: flex; gap: 40px; margin: 0; padding: 0; list-style: none; flex-wrap: wrap;}
.blog_list ul{ list-style: none; margin: 0; padding: 0; display: flex;}
.blog_list .item{ display: block; border-radius: 20px; overflow: hidden; flex: 0 0 calc( ( 100% - ( 40px * 2) ) / 3 );
	transition: transform 300ms ease;
}
.blog_list.inx .item{ flex: calc( ( 100% - ( 40px * 2) ) / 3 );}
.blog_list .item a{ position: relative; display: flex; flex-direction: column; }
.blog_list .item .pic{ position: relative; display: block; aspect-ratio: 1 / 1;}
.blog_list .item .pic::before{ content: ''; position: absolute; display: block; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(180deg, rgba(0, 0, 0, 0.50) 0%, rgba(0, 0, 0, 0.00) 100%); z-index: 1;}
.blog_list .item .pic img{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;
	transition: transform 300ms ease;
}
.blog_list .item .author{ position: absolute; top: 10px; left: 10px; z-index: 10; display: flex; gap: 10px; align-items: center;}
.blog_list .item .author .pho{ width: 48px; height: 48px; }
.blog_list .item .author .pho img{ position: relative; width: 100%; height: 100%; object-fit: cover; border-radius: 24px;}
.blog_list .item .author .info{ font: 600 14px/1.2em 'Outfit', 'Noto Sans TC', sans-serif; color: var(--main-color);}
.blog_list .item .tag_list{ position: absolute; top: 70px; left: 10px; z-index: 10;}
.blog_list .item .txt{ position: absolute; bottom: 10px; left: 10px; width: 70%; padding: 20px; background: rgba(85, 85, 85, 0.5); display: flex; flex-direction: column; border-radius: 20px; gap: 4px;
	backdrop-filter: blur(10px);
	transition: 300ms ease;
}
.blog_list .item .txt .title{ margin: 0; color:var(--c-white); display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2; overflow: hidden;
	font: 600 18px/1.2em 'Outfit', 'Noto Sans TC', sans-serif;
}
.blog_list .item .txt .date{ margin: 0; color: var(--main-color);
	font: 500 14px/1.2em 'Outfit', 'Noto Sans TC', sans-serif;
}
@media only screen and (min-width: 993px){
	.blog_list .item:hover { transform: scale(1.05);}
	.blog_list .item:hover .pic img { transform: scale(1.1);}
	.blog_list .item:hover .txt{ background: var(--main-color); }
	.blog_list .item:hover .txt .title{ color: var(--c-dark);}
	.blog_list .item:hover .txt .date{ color: var(--c-dark);}
}
@media only screen and (max-width: 992px) {
	.blog_box{ padding: 4rem 0;}
	.blog_list .item{ flex: calc( ( 100% - ( 40px ) ) / 2 );}
}
@media only screen and (max-width: 576px) {
	.blog_box{ padding: 3rem 0;}
	.blog_list .item{ flex: 100%;}
	.blog_list .item .txt {  width: calc(100% - 20px);}
}
/*------*/

/*---tag_list---*/
.tag_list{ position: relative; display: flex; flex-wrap: wrap; gap: 10px; list-style: none; padding: 0;}
.tag_list>*{ display: block; font: 500 12px/24px 'Outfit', 'Noto Sans TC', sans-serif; padding: 2px 6px; background: var(--c-black); color: var(--c-white); border-radius: 4px;}
.tag_list.big>*{ font: 500 14px/1.2 'Outfit', 'Noto Sans TC', sans-serif; padding: 5px 10px; border-radius: 6px;}
/*------*/

/*---inner_box---*/
.inner_box{ position: relative; padding: 6rem 0;}

.inner_box .fx5{ position: relative; width: 100%; padding: 0 0 17% 0; }
.inner_box .fx5 .inner{ position: absolute; top: 0; right: -35%; max-width: 140%;}
.inner_box .fx5 img{ display: block; width: 100%; }

.inner_box .item_list{ position: relative; list-style: none; margin: 0; padding: 0; }
.inner_box .item_list .name{ font: 500 20px/40px 'Outfit', 'Noto Sans TC', sans-serif; color: var(--c-white);}
.inner_box .item_list .name b{ font: 600 30px/40px 'Outfit', 'Noto Sans TC', sans-serif; margin-right: 10px;}
.inner_box .item_list p{ color: var(--c-white);}

.inner_box .histing_list{ position: relative; list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; row-gap: 20px; column-gap: 20px;}
.inner_box .histing_list img{ max-width: 100%;}


.inner_box .histing_list li{ flex: 0 0 calc( (100% - (20px * 3 )) / 4); padding: 20px; border: solid 1px var(--c-white); display: flex; flex-direction: column; row-gap: 10px; column-gap: 20px; border-radius: 20px;}
.inner_box .histing_list .name{ font: 500 16px/20px 'Outfit', 'Noto Sans TC', sans-serif; color: var(--c-white);}
.inner_box .histing_list .name b{ display: block; font: 600 20px/20px 'Outfit', 'Noto Sans TC', sans-serif; margin-bottom: 5px;}
.inner_box .histing_list p{ color: var(--c-white); line-height: 1.4em; margin-bottom: 0;}



.inner_box .desc.flb p::first-letter{ font-weight: 700;}

.inner_box .desc a{ color: var(--main-color);}
.inner_box .desc p{ text-align: justify;}
.inner_box .desc.w{ color: var(--c-white);} 

.inner_box .desc.w p{ color: var(--c-white);} 
.inner_box .desc.w li{ color: var(--c-white);} 


.inner_box .logo_list{ position: relative; margin: 40px 0; display: flex; flex-wrap: wrap; row-gap: 40px; column-gap: 20px;}
.inner_box .logo_list img{ max-width: 100%;}

.inner_box .cover{ position: relative; aspect-ratio: 4 / 3;}
.inner_box .cover img{ position: absolute; top: 0; left:0; width: 100%; height: 100%; object-fit: cover;}
.inner_box .cover.top{ margin-top: -240px;}

.inner_box .tips_list{ list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; row-gap: 5px; column-gap: 10px;}
.inner_box .tips_list li{ position: relative; padding-left: 20px;}
.inner_box .tips_list li::before{ display: block; content: ''; position: absolute;top: 12px; left: 7px; width: 6px; height: 6px; background: var(--main-color); border-radius: 3px;}


.inner_box .pics{ display: flex; flex-direction: column; gap: 20px; pointer-events: none;}
.inner_box .pics img{ display: block; width: 100%;}

.inner_box .info_list{ list-style: none; margin: 0 0 20px 0; padding: 0; }
.inner_box .info_list li{ position: relative; display: flex; flex-wrap: wrap; row-gap: 5px; column-gap: 5px;}
.inner_box .info_list li .icon{ width: 20px; text-align: center; font-size: 16px; color: var(--second-color);}
.inner_box .info_list li a{ color: var(--second-color);}
.inner_box .tel { color: var(--c-gray); font: 600 18px/20px 'Outfit', 'Noto Sans TC', sans-serif;}

.inner_box .pro_list{ list-style: none; margin: 0 0 20px 0; padding: 0; display: flex; flex-wrap: wrap; gap: 20px; counter-reset: my-counter;}
.inner_box .pro_list li{ position: relative; display: flex; flex-direction: column; gap: 10px; border: solid 1px var(--fourth-color); border-radius: 20px; padding: 40px; counter-increment: my-counter; overflow: hidden;
	flex: 0 0 calc( (100% - (20px * 3)) / 4 );
}
.inner_box .pro_list li.big{
	flex: 0 0 calc( (100% - (20px * 1)) / 2 );
}
.inner_box .pro_list li::before{ content: counter(my-counter); display: block; position: absolute; top: 0; left: 0; width: 40px; height: 40px; text-align: center; font: 600 20px/40px 'Outfit', 'Noto Sans TC', sans-serif; color: var(--c-white); background: var(--fourth-color); border-radius: 0 0 10px 0;}


.inner_box .pro_list li .name b{ display: block; font: 700 28px/1.1 'Outfit', 'Noto Sans TC', sans-serif; color: var(--fourth-color); margin-bottom: 4px;}
.inner_box .pro_list li .name span{ display: block; font: 700 16px/20px 'Outfit', 'Noto Sans TC', sans-serif; color: var(--c-white);}
.inner_box .pro_list li p{ margin: 0; color: var(--c-white);}

.inner_box label{ font-size: 14px; font-weight: 700;}


@media only screen and (max-width: 992px) {
	.inner_box{ padding: 4rem 0; }
	.inner_box .fx5{ position: relative; padding: 0; right: -20%; width: 120%; margin: -50px;}
	.inner_box .fx5 .inner{ position: relative; top: 0; right: 0; max-width: 100%; transform: none !important;}
	.inner_box .histing_list li{ flex: 0 0 calc( ( 100% - 20px ) / 2);}

	.inner_box .cover.top{ margin-top: -150px;}

	.inner_box .pro_list li{ flex: 0 0 calc( (100% - (20px * 1)) / 2 );}
	.inner_box .pro_list li.big{ flex: 0 0 100%;}

	.inner_box .pro_list li .name b{ font: 700 24px/1.2em 'Outfit', 'Noto Sans TC', sans-serif;}
	.inner_box .pro_list li .name span{ font: 700 14px/1.2em 'Outfit', 'Noto Sans TC', sans-serif; }
}
@media only screen and (max-width: 576px) {
	.inner_box{ padding: 3rem 0; }
	.inner_box .histing_list li{ flex: 0 0 100%;}

	.inner_box .cover.top{ margin-top: -120px;}

	.inner_box .pro_list li{ flex: 0 0 100%;}
}
/*------*/

/*---pager_bar---*/
.pager_bar { position: relative; display: flex; justify-content: center; gap: 4px;}
.pager_bar.right { text-align: right; }
.pager_bar.left { text-align: left; }
.pager_bar a { display: flex; justify-content: center; align-items: center; height: 32px; width: 32px; text-align: center; color: var(--c-gray); border-radius: 16px; font: 700 16px/31px 'Outfit', sans-serif;
	transition: 300ms ease;
}
.pager_bar a.arr { font-size: 1.4em;}
.pager_bar a:hover { color: var(--c-white); background: var(--c-gray);}
.pager_bar a.cur { color: var(--c-white); background: var(--main-color);}
/*------*/

/* =============================================================================
   INNER LAYOUT
   ========================================================================== */

/*---EDITOR---*/
.edit p{ text-align: justify;}
.edit h1, .edit h2, .edit h3, .edit h4, .edit h5, .edit h6 { margin-bottom: 20px; color: var(--main-color);}
.edit img{ max-width: 100%; height: auto;}
.edit iframe{ max-width: 100%;}

/*---text img---*/
.pic_br20{ position: relative; display: block; overflow: hidden; border-radius: 20px; aspect-ratio: 1 / 1;}
.pic_br20 figure{ display: none;}
.pic_br20 img{ display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;}
.pic_br20.s43 { aspect-ratio: 4 / 3;}
.pic_br20.s21 { aspect-ratio: 2 / 1;}
/*------*/

/*---video_item img---*/
.video_items{ display: block; position: relative; max-width: 800px; margin: 0 auto 20px;}
.video_item{ display: block; position: relative; width: 100%; border-radius: 20px; overflow: hidden; }
.video_item::before{ display: block; content: ''; padding-bottom: 56.25%;}
.video_item::after{ display: block; content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url(../images/icon_play.svg) rgba(0, 0, 0, 0.2) center center no-repeat;}
.video_item img{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;}
/*------*/


.pa_list{ position: relative; margin: 60px 0 0 0;}
.pa_list a{ display: block;}
.pa_list img{ max-width: 100%;}

/*---pho_list---*/
.pho_list{ position: relative; display: flex; flex-wrap: wrap; gap: 30px;}
.pho_list a{ position: relative; flex: 0 0 calc((100% - (30px * 2)) / 3); overflow: hidden; background: var(--c-dark); border-radius: 16px;}
.pho_list.col4 a{ flex: 0 0 calc((100% - (30px * 3)) / 4); }
.pho_list a figure{ display: none;}
.pho_list a img{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;
	transition: 500ms ease-in-out;
}
.pho_list a::before{ content: ''; display: block; position: relative; color:var(--c-white); opacity: 0; z-index: 2; top: 0%; left:0%; width: 100%; padding-bottom: 100%; background: #333;
	transition: 500ms ease-in-out;	
}
.pho_list a.paper::before{ padding-bottom: 140%;}
.pho_list a::after{ display: block; position: absolute; color:var(--c-white); opacity: 0; z-index: 2; top: 50%; left:50%; margin: -16px 0 0 -16px ; width: 32px; height: 32px; line-height: 32px; text-align: center; font-size: 1.2em;
	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_list a:hover::before{ opacity: 0.4;}
.pho_list a:hover::after{ opacity:1;}
@media only screen and (max-width: 992px) {
	.pho_list a{ position: relative; flex: 0 0 calc((100% - 30px ) / 2); }
	.pho_list.col4 a{ flex: 0 0 calc((100% - (30px * 2)) / 3); }
}
@media only screen and (max-width: 575px) {
	.pho_list{ gap: 20px;}
	.pho_list a{ position: relative; flex: 0 0 calc((100% - 20px ) / 2); }
	.pho_list.col4 a{ flex: 0 0 calc((100% - (20px * 1)) / 2); }
}
/*------*/

/*===POPUP===*/
/*---pop_box---*/
.pop_box{ position:fixed; top:0%; left:0; width:100%; height:100%; overflow:auto; -webkit-overflow-scrolling: touch; z-index:1000; display: none;}
.pop_box.on{ top:0; opacity:1;}
.pop_box .mask{  position: fixed; top:0%; left:0; width:100%; height:100%; z-index:1; background: rgba(0,0,0,.8); opacity:1; transition: 800ms ease;}
.pop_box .view{ position: absolute; top: 0; left: 0; width: 100vw; min-height: 100vh; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; }
	/*txt*/
	.pop_box .txt{ position: relative; max-width:580px; z-index:10; box-sizing: border-box; display: flex; flex-wrap: wrap; align-items: center; background: var(--third-color); padding: 60px 40px; border-radius: 30px;}
	.pop_box .txt .con{ position: relative; }
	.pop_box .txt .con .tips{ font-size: 14px; font-weight: 600; margin-bottom: 20px;}
	.pop_box .txt .con .item_list{ position: relative; margin-bottom: 10px;}
	.pop_box .txt .con .item_list a{ color: #FFF;}
	.pop_box .txt .con .item_list .name{ font: 500 16px/1em 'Outfit', 'Noto Sans TC', sans-serif; margin-bottom: 4px;}
	.pop_box .txt .con .item_list .tel{ font: 700 30px/1.2em 'Outfit', 'Noto Sans TC', sans-serif; }
	.pop_box .txt .con .item_list .meat{ font: 500 20px/1.2em 'Outfit', 'Noto Sans TC', sans-serif; }
	.pop_box .txt .con .talk{ font: 500 14px/1.6em 'Outfit', 'Noto Sans TC', sans-serif; color: #FFF; margin-bottom: 20px;}
	.pop_box .txt .con .attention {  text-align: left; padding: 10px 0;}

@media only screen and (max-width: 1280px) {
	.pop_box .txt{ margin: 40px;}
}
@media only screen and (max-width: 576px) {
	.pop_box .txt{ margin: 20px; }
	.pop_box .txt .cover{ flex: 0 0 100%;}
	.pop_box .txt .con .item_list .meat{ font-size: 18px; }
}
/*------*/

/* =============================================================================
   INNER LAYOUT END
   ========================================================================== */

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