@charset "utf-8";
@import url("reset.css");
@import url("loading.css");
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css");
/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------------------------------->>> Main <<<------------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/


html { height:100% }
body { margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; -webkit-text-size-adjust:none; font-size:12px; overflow-x:hidden; overflow-y:scroll }
body, td, th {font-size:12px;font-family: Arial, "文泉驛正黑", "WenQuanYi Zen Hei", "儷黑 Pro", "Microsoft JhengHei", "新細明體", "PMingLiU", sans-serif;color: #333333; letter-spacing:1px; }
.iframe_ch { display:none }
.w100{ width:100%; }
.middle{ vertical-align:middle; }

.btn1{color:#FFF !important;font-size:15px !important;width:auto !important;padding: 15px 60px; text-decoration:none; letter-spacing:2px;border:1px solid #FFF;cursor:hand;cursor:pointer;background:  #99845d;-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px;}
.btn1:hover{ background:#b38935; border:1px solid #a0ddf2; -webkit-transition: all .4s ease;
 -moz-transition: all .4s ease;
 -o-transition: all .4s ease;
 transition: all .4s ease;
 -ms-transition: all .4s ease}
 
.btn2{color: #ff7e3e!important;font-size:15px !important;width:auto !important;padding: 15px 50px; text-decoration:none; letter-spacing:2px;border: 1px solid #ff7e3e; cursor:hand;cursor:pointer;-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px;}
.btn2:hover{ background:#ff7e3e; color:#ffffff !important; border: 1px solid #ff7e3e; -webkit-transition: all .4s ease;
 -moz-transition: all .4s ease;
 -o-transition: all .4s ease;
 transition: all .4s ease;
 -ms-transition: all .4s ease}
 
textarea, input {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}


.p_btn{ width:100%; margin:100px 0 35px 0; text-align:right; }

/*分頁*/
.pager{ position:relative; width:100%; margin:60px auto; text-align:center; } 

/*分頁 - 上方無padding*/
.pager_noh{ position:relative; width:100%; margin: 0px 0px 60px 0px; text-align:center; } 

/*網頁大標題*/
.b-title{text-align:center; letter-spacing:5px; color:#2b2b2b; font-size:18px; line-height:40px; margin: 50px 10px 20px 10px; font-family: Arial, "文泉驛正黑", "WenQuanYi Zen Hei", "儷黑 Pro", "Microsoft JhengHei", "新細明體", "PMingLiU", sans-serif; }
.b-title span{ display:inline-block; font-size:24px; letter-spacing:2px; color:#ff7e3e; !important; font-size:48px; padding:10px 0 20px 0; margin-bottom:10px; font-family: 'Mrs Saint Delafield', cursive; border-bottom:1px solid #ff7e3e; }
.common-title{text-align:center;font-size:16px;letter-spacing:5px;line-height: 25px;padding:40px 10px;}
.common-title2{ text-align:left; font-size:24px; letter-spacing:5px; padding:30px 10px; color:#202020; }


/*回上頁：樣式併入 .side-social-fixed（見檔案末）*/

/*網站地圖*/
#sitemap{ width:100%; margin:30px 0 20px 0; padding:0 10px; font-size:15px; letter-spacing:1px; color:#7e7463; }
#sitemap > .wrap{ max-width:1200px; overflow:hidden; margin:0 auto; padding:15px 0; text-align:right; }
#sitemap > .wrap:before{ content:url(../../images/home.png); padding:0 5px 0 0; vertical-align: -30%; width:21px; }
#sitemap > .wrap a{ color:#7e7463; }

/*字體效果*/
.w-shadow{ text-shadow: 1px 1px 1px #CCC; }
.w-bold{ font-weight:bold; }
.w-fs15{ font-size:15px !important;}

.editor{width:100%;overflow:hidden;line-height: 30px;/*min-height:100px;*/font-size:14px;letter-spacing:1px; text-align:left; color:#606060; right:0;padding:0 5px 30px 5px;box-sizing:border-box;}

@media screen and (min-width: 1024px) {
	/*網頁小標題*/
	.s-title{ text-align:center; font-size:16px; letter-spacing:5px; padding:50px 10px; min-height:130px; }
	.s-title a{ display:inline-block; line-height:30px; color:#000000; text-decoration:none; }
	.s-title a:hover{ color:#eb560c; }
	.s-title .on{  color:#eb560c; }
	.s-title .on a{ color:#eb560c; border-bottom:1px solid #eb560c; padding-bottom:5px; }
	.s-title a{ text-align:center; }
	.s-title span:before{ content:'＋'; padding:0 10px; }
	.s-title span a{padding-bottom: 5px;margin-bottom: 10px;}	
	.s-title span:hover a{border-bottom:1px solid #eb560c;}
	.s-title span:first-child:before{content:'';}
}
@media screen and (max-width: 1024px) {
	
	.s-title{ width:100%; overflow:hidden; text-align:center; margin:0 auto; font-size:16px; letter-spacing:5px; box-shadow: 1px 1px 5px #ebebeb; }
	.s-title a{ display:block; background:#FFDBC9; text-decoration:none; color:#545454;text-shadow: 1px 1px 1px #fff;font-weight: normal;text-align:  center;padding: 10px 5px;font-size:13px;text-transform: uppercase;cursor:hand;cursor:pointer;border-bottom:1px solid #FFA03B;-webkit-transition:.6s;-ms-transition:.6s;-moz-transition:.6s;}
	.s-title a:hover{ color:#000000; border-left:5px solid #FFA03B; }	
	.s-title span{ /*display:none;*/ }
	.s-title .on{ display:block; }
}

@media screen and (max-width: 480px) {
  .b-title{margin:10px 10px 10px 10px;font-size: 16px;}
  .b-title span{ font-size:40px; padding:10px 0 5px 0; margin-bottom:0; }
}

/* ----------------------------------------------------------------------------------------------------------------*/
/* ------------------------------>>> Common <<<----------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

#wrapper{ width:100%; min-height:500px; overflow:hidden; margin:0 auto; background:url(../../images/bg.png) repeat; }
.inner-bg{ background:url(../../images/bg-inner.png) repeat !important; }
.common_wrap{ max-width:1400px; margin: 0px auto 0 auto;padding: 30px 10px; }
.common_wrap_index{ max-width:1400px; margin: 0px auto 0 auto;padding: 0px 0px; }

/* 首頁：banner 下方「包套方案」— 僅外層灰階區塊（項目維持全站原有 .slider_product / .service-img） */
.index-service-band {
	background: rgb(246,246,246);
	padding: 5px 0 32px;
	border-bottom: 1px solid rgba(42, 40, 38, 0.07);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
}
.index-service-band__inner {
	padding-left: 12px;
	padding-right: 12px;
}
.index-service-band__pager-wrap {
	padding-left: 12px;
	padding-right: 12px;
}
.index-service-band__pager {
	margin-bottom: 0;
	margin-top: 8px;
	padding-bottom: 4px;
}

@media screen and (max-width: 768px) {
	.index-service-band {
		padding: 0px 0 0px;
	}
}

.index-feedback-item-head {
	width: 100%;
	overflow: hidden;
	margin: 15px 0;
}
.index-service-band--feedback {
	padding-bottom: 30px;
}

/* 首頁「精選婚紗禮服」：灰底區塊（輪播項目樣式同最新攝影作品，不另覆寫） */
.index-dress-band {
	background: rgb(246,246,246);
	padding: 0px 0 50px;
	border-bottom: 1px solid rgba(42, 40, 38, 0.07);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
}
.index-dress-band__pager {
	margin-bottom: 0;
}

@media screen and (max-width: 768px) {
	.index-dress-band {
		padding: 0 0 60px;
	}
}

.full_wrap{ width:100%; margin: 0px auto 0 auto;padding: 30px 10px; }


/*子選單*/
.submenu1{ display:none; font-size:18px !important;overflow:hidden; background: rgba(0, 0, 0, 0.7); position:absolute;margin-left: -60px;min-width: 225px;text-align: left;/* left: -9px; */padding: 5px;/* top: 130px; */box-shadow: 0 8px 12px rgba(0, 0, 0, 0.25);/* -webkit-border-radius: 10px; */-moz-border-radius: 10px;/* border-radius: 10px; */}
.submenu1 a{
 border-bottom: 1px solid rgba(0, 0, 0, 0);
 font-size:15px !important;
 color:#ffffff !important;
 font-weight:normal !important;
 display:block !important;
 /* border-bottom:1px solid #dedede; */
 padding: 10px 0px 10px 0px;
 margin: 10px 20px;
 -webkit-transition: all .4s ease;
 -moz-transition: all .4s ease;
 -o-transition: all .4s ease;
 transition: all .4s ease;
 -ms-transition: all .4s ease;
 }
.submenu1 a:hover{ color:#ffc0a0 !important; border-bottom: 1px solid #ffc0a0; }



nav { 
 letter-spacing:2px;
 -webkit-transition: all .4s ease;
 -moz-transition: all .4s ease;
 -o-transition: all .4s ease;
 transition: all .4s ease;
 -ms-transition: all .4s ease
}
.header_box { position: fixed; top: 0; left: 0; z-index: 4; padding: 0; width: 100%; background-color: #fff }
.header_box_main { animation: 1s ease-out 0s 1 transiTop20; max-width:1400px; /*overflow: hidden;*/ margin-right: 70px; margin-left: 70px; margin: 15px auto 8px auto; }
.header_box_line { /*padding-bottom: 20px;*/ border-bottom: 1px solid #fff; padding-left:20px; }
.header_box .header_box_main .logo_box {
 position: relative;
 -webkit-transition: all .3s ease;
 -moz-transition: all .3s ease;
 -o-transition: all .3s ease;
 transition: all .3s ease;
 -ms-transition: all .3s ease;
}
.header_box .header_box_main .menu {
 margin-top: 10px;
 margin-bottom: -5px;
 height: 100%;
 line-height: 20px;
 /*text-transform: uppercase;*/
 /* font-weight: 700; */
 font-size: 14px;
 -webkit-transition: all .4s ease;
 -moz-transition: all .4s ease;
 -o-transition: all .4s ease;
 transition: all .4s ease;
 -ms-transition: all .4s ease;
}
.header_box .header_box_main .menu {float: right!important;}
.header_box .header_box_main .menu li {float: left;text-align: center;list-style: none;padding-right: 15px;padding-left: 15px;padding-bottom: 12px;cursor:hand;cursor:pointer;}
.header_box .header_box_main .menu li span{display:block;text-align: center;color: #ffdbc9;letter-spacing: 1px;font-size:12px;}
.header_box .header_box_main .menu li a { }
.header_box .header_box_main .menu li img { padding:0 3px; }
/*原始選單*/
.header_box_scroll1 { background-color: transparent; top:-20px; }
.header_box_scroll1 .menu { margin-top: 35px; margin-bottom: 10px }
.header_box_scroll1 .menu li a {
 color: #ffffff;
 font-size: 16px;
 /* font-weight: bold; */
 letter-spacing: 4px;
 text-decoration:none;
 -webkit-transition: all .2s ease-in-out;
 -moz-transition: all .2s ease-in-out;
 -o-transition: all .2s ease-in-out;
 transition: all .2s ease-in-out;
 -ms-transition: all .2s ease-in-out;
}
.header_box .header_box_main .menu li:hover a{color: #ffdbc9;}

.header_box_scroll1 .logo-big, .header_box_scroll1 .logo-mid {
 position: absolute;
 margin-top: 30px;
 max-width: 558px;
 opacity: 1;
 -webkit-transition: all .4s ease;
 -moz-transition: all .4s ease;
 -o-transition: all .4s ease;
 transition: all .4s ease;
 -ms-transition: all .4s ease;
}
.header_box_scroll1 .logo-small { opacity: 0; -webkit-transition: all .4s ease;
 -moz-transition: all .4s ease;
 -o-transition: all .4s ease;
 transition: all .4s ease;
 -ms-transition: all .4s ease
}
/*捲軸往下的變換選單*/
.header_box_scroll2 { padding:0px 0 15px 0; background: rgba(57, 57, 57, .9); -webkit-box-shadow: 0 1px 4px rgba(4, 77, 102, .15); -moz-box-shadow: 0 1px 4px rgba(4, 77, 102, .15); box-shadow: 0 1px 4px rgba(4, 77, 102, .15) }
.header_box_scroll2 .menu { margin-top: 0; margin-bottom: 0; height: 100% }
.header_box_scroll2 .menu > li > a { color: #fff; -webkit-transition: all .2s ease-in-out;
 -moz-transition: all .2s ease-in-out;
 -o-transition: all .2s ease-in-out;
 transition: all .2s ease-in-out;
 -ms-transition: all .2s ease-in-out
}
.header_box_scroll2 .logo-big, .header_box_scroll2 .logo-mid { display:none; opacity: 0; -webkit-transition: all .4s ease;
 -moz-transition: all .4s ease;
 -o-transition: all .4s ease;
 transition: all .4s ease;
 -ms-transition: all .4s ease
}
.header_box_scroll2 .logo-small {
 position: absolute;
 margin-top: -15px;
 opacity: 1;
 -webkit-transition: all .4s ease;
 -moz-transition: all .4s ease;
 -o-transition: all .4s ease;
 transition: all .4s ease;
 -ms-transition: all .4s ease;
}


/*Nav*/
#nav{ position:absolute; right:30px; top:25px; z-index:9999; color:#ffffff; font-size:15px;
-webkit-transition: all .4s ease;
 -moz-transition: all .4s ease;
 -o-transition: all .4s ease;
 transition: all .4s ease;
 -ms-transition: all .4s ease
}
#nav img{ vertical-align:middle; }
#nav a{ color:#ffffff; text-decoration:none; letter-spacing:2px; }
#nav a:hover{ text-decoration:underline; }
#nav .nav-threads{display:inline-block;width: 27px;height: 26px;line-height: 25px;text-align:center;vertical-align:middle;background:#000000;color:#ffffff;border-radius:50%;letter-spacing:0;}
#nav .nav-threads i{font-size:17px;line-height: 0px;vertical-align:middle;}
#nav .nav-threads:hover{ text-decoration:none; }
#nav .nav-threads .sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }


.overlay1 {/*margin-top:80px;*/height: 100%;width: 0%;position: fixed; top: 0;right: 0;background-color: rgba(25, 25, 25, 0.9); overflow:hidden; transition: 0.5s;z-index: 4;}
.overlay1-content { position: relative; top: 0%; width: 100%; text-align: center; }
.overlay1 a { padding: 8px; text-decoration: none; font-size: 36px; color: #818181; display: block; transition: 0.3s; }
.overlay1 a:hover, .overlay1 a:focus { color: #ffa03b !important; }


.overlay1-title { width:100%; height:50px; margin-top:80px; }
.overlay1-title span { color:#FFF; border-bottom:2px solid #FFF; font-size:20px; letter-spacing:1px; }
.overlay1_options { width:80%; margin:0 auto; }
.overlay1_item { position:relative; text-align:left; padding:15px 5px; color:#EAEAE8; letter-spacing:1px; border-bottom:1px solid #d2d2d2; font-size:15px; letter-spacing:1px; cursor:hand; cursor:pointer; }
.overlay1_item a {font-size:15px;color:#fff;letter-spacing: 2px;font-weight:bold;}
.overlay1_item a:hover { color:#000000; }









.overlay1_item span { position:absolute; right:0; top:25px; padding:0 5px; font-size:25px; }
/*.overlay1_item:hover{ background:#000; -webkit-transition:.6s;-ms-transition:.6s;-moz-transition:.6s; }*/
.overlay1_event {width:100%;display:none;background-color: rgba(25, 25, 25, 0.9);text-align:left;padding:20px;box-sizing:border-box;letter-spacing:1px;}
.overlay1_event a { display:block; font-size:15px; color:#fff; }
.overlay1_event a:hover { color:#d9a159; text-decoration:none; }

.show-1, .show-2, .show-3{ opacity:0; }


/*Footer*/
#footer{ width:100%; background:url(../../images/bg.png) repeat; clear:both; }
#footer .logo{float:left;padding-right: 25px; padding-top:10px; }
.footer_wrap{ position:relative; max-width: 1200px; min-height:215px; padding:0 2%; overflow:hidden; margin:0 auto; font-size:13px; letter-spacing:3px; background-position:20% 20%; }
.footer_left{width: 60%;float:left;padding:40px 0;}
.footer_slogan{ padding:10px 0; font-size:15px; letter-spacing:5px; }
.footer_follow{padding:10px 0;max-width: 470px;width: 100%;font-size:13px;letter-spacing:2px;float: left;}
.footer_follow a{ text-decoration:none; }
.footer_follow a:hover{ color:#ffa03b; }
.footer_right{width: 40%;float:left;padding:40px 0;}
#copyright{ color:#777777; letter-spacing:1px; line-height:22px; text-align:right; padding-bottom:20px; }
#copyright a{ color:#777777; }

#contact_info{ position:relative; max-width:1200px; overflow:hidden; }
.contact_info_area{width:100%;max-width: 470px;overflow:hidden;line-height:25px;padding:5px 0; text-shadow: 1px 1px 1px #CCC;}
.contact_info_title{float:left;width: 40%;min-width:70px;/* max-width:70px; */}
.contact_info_title img{ vertical-align:middle; }
.contact_info_content{float:left;width: 60%;}
.contact_info_content a{ color:#333333; text-decoration:none; }
.contact_info_content a:hover{ color:#333333; }

/*首頁輪播*/
.slick_wrap{ position:absolute; top:60%; max-width:1400px; left:0; right:0; margin-left:auto; margin-right:auto;  -webkit-transition: all .4s ease;
 -moz-transition: all .4s ease;
 -o-transition: all .4s ease;
 transition: all .4s ease;
 -ms-transition: all .4s ease; }
.slick_area{ background:#aa8232; padding:10px 10px; z-index:99999; }
.slick_area .wrap{ max-width:500px; width:100%; padding:0 10px; max-height:56px; overflow:hidden; }
.slick_area .wrap h1{ font-weight: normal;font-size: 16px; text-align:left; letter-spacing: 2px; cursor:hand; cursor:pointer; }
.slick_area .wrap h1 span{ display:inline-block; padding-right:30px; }


/*版面設定*/
.common_grid { width:100%; min-height:900px; background:#ffffff;  }
.common_grid_wrap { text-align:left; position:relative; max-width:1400px; overflow:hidden; margin:0 auto; padding:100px 0; color:#797979; font-size:14px; line-height:25px; letter-spacing:1px; }


@media screen and (max-width: 1400px) {
	.none1400{ display:none; }
}
@media screen and (max-width: 1200px) {
	.none1200{ display:none; }	
	.footer_right{ width:100%; float:none; }
	#copyright{ text-align:left; }
}
@media screen and (max-width: 1024px) {

	#nav{ right:3%; }
	.footer_nav a{ display:none; }	
	.footer_copyright{ text-align:center; padding:0 10px;}
	.footer_info3, .footer_info4{ display:none;}
	
	.footer_info1{ width:100%; text-align:center; }
	.footer_info2{ width:255px; margin:0 auto; float:none; }
	
	.common_grid{ min-height:inherit; }
	.common_grid_wrap{ padding:30px 0;}
	
}

@media screen and (max-width: 768px) {
	.header_box_scroll1 .logo-big{ display:none; }
	.inner_title{margin: 0 0 30px 0;}
	.mark_product{ padding-top:30px; }	
	
	.slick_area .wrap{ max-width:250px; }
	.slick_area .wrap h1 span{ display:none; }
	
	.none768{ display:none; }		
}

@media screen and (min-width: 768px) {
	.header_box_scroll1 .logo-mid{ opacity:0; }
	
}

@media screen and (max-width: 480px) {

	.footer_left{ width:100%; padding:40px 0 10px 0; text-align:center; }
	.contact_info_title{ width:100%; font-weight:bold; }
	.contact_info_content{padding:0;}
	#footer .logo{ float:none; padding:0; }
	.common_title{ font-size:30px; }
	.p_btn{ margin-top:30px; }
	.none480{ display:none; }	
}


/* ----------------------------------------------------------------------------------------------------------------*/
/* ------------------------------>>> Index <<<----------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

.slick-pre{position:absolute;top: 45%;left:0;display:block;z-index:9999;}
.slick-next{position:absolute;top: 45%;right: 35px;display:block;z-index:9999;}

/*Our Product*/
.slider_product{position:relative;/* background:#fef3d8; */-webkit-border-radius: 15px;-moz-border-radius: 15px;border-radius: 15px;}
.slider_product .more{ color:#ffffff; text-align:right; background:#b38935; padding:10px; font-size:18px; cursor:hand; cursor:pointer; letter-spacing:2px;
-webkit-border-bottom-right-radius: 15px;
-webkit-border-bottom-left-radius: 15px;
-moz-border-radius-bottomright: 15px;
-moz-border-radius-bottomleft: 15px;
border-bottom-right-radius: 15px;
border-bottom-left-radius: 15px;
-webkit-transition: all .4s ease;
-moz-transition: all .4s ease;
-o-transition: all .4s ease;
transition: all .4s ease;
-ms-transition: all .4s ease;
}
.slider_product .more:hover{ background:#95794d; }
.slider_product .title{font-size: 16px;letter-spacing:2px;color: #f95f13;line-height: 22px;padding: 30px 20px 5px 20px;}
.slider_product .title a{ font-size:16px; color:#f95f13; text-decoration:none; }
.slider_product .title a:hover{ text-decoration:underline; }
.slider_product .content{font-size: 18px;letter-spacing:2px;color:#393a3a;padding: 0px 20px;margin: 10px 0;text-align:center;min-height: 30px;max-height:60px;overflow:hidden;}
.index_product_more{ width:100%; text-align:right; padding:15px 65px 0 65px; box-sizing:border-box; color:#95794d; font-size:18px; letter-spacing:2px; }
.index_product_more a{ color:#95794d; text-decoration:none; }


/*About*/
#index_about { width:100%; background:#ffffff; }
.index_about_contain { position:relative; text-align:center; max-width:1200px; margin:0 auto; padding:40px 20px 60px; color:#555555; font-size:15px; line-height:1.85; letter-spacing:1px; box-sizing:border-box; }
.index_about_contain .about_box{ position:relative; width:100%; max-width:100%; margin:0 auto; padding:0; box-sizing:border-box; text-align:center; color:#555555; font-size:15px; letter-spacing:1px; }
.index_about_contain .about_box .b-title{ margin-top:20px; }
.index_about_intro {/* max-width:800px; */margin: 30px auto 40px;text-align: center;}
.index_about_intro p{ margin:1.2em 0 1.2em; }
.index_about_pager{ margin:48px auto 0; clear:both; }
.index_about_photos { display:flex; flex-wrap:wrap; justify-content:center; gap:24px; width:100%; margin:0 auto; }
.index_about_photo { flex:1 1 28%; max-width:380px; min-width:200px; text-align:center; }
.index_about_photo a{ display:block; overflow:hidden; }
.index_about_photo img{ display:block; width:100%; height:auto; vertical-align:bottom; object-fit:cover; }
.index_about_photo_title { color:#000000; font-size:16px; padding:12px 0 0; letter-spacing:2px; }
.about_info{ width:100%; overflow:hidden; padding:5px 0; color:#ffffff; font-size:18px; letter-spacing:2px; padding:10px 0; }
.about_info .left{float:left;width: 20%; min-width:90px; }
.about_info .right{float:left;width: 80%; text-align:  left;}

/*最新攝影作品*/
.owl-item .item{ margin:10px;}

/* 首頁精選婚紗禮服：等高圖片 */
#owl-dress .item {
	margin: 10px;
}
#owl-dress .item h4 {
	margin: 0;
	padding: 0;
	font-weight: normal;
}
#owl-dress .item h4 a {
	display: block;
	overflow: hidden;
	aspect-ratio: 2 / 3;
}
#owl-dress .item h4 a img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

@media screen and (max-width: 1024px) {
	.index_about_photo { flex:1 1 45%; max-width:none; }
}
@media screen and (max-width: 480px) {
	.index_about_contain{padding: 30px 15px 60px;}
	.index_about_photo { flex:1 1 100%; min-width:0; }
}

/* 首頁服務評價：灰底區塊 + 沿用 .index_service_contain 舊版標題／slogan + Owl 圖卡 */
#index_service .index_service_contain {
	position: relative;
	text-align: left;
	max-width: 1400px;
	margin: 0 auto;
	padding: 50px 0;
	color: #ffffff;
	font-size: 14px;
	line-height: 25px;
	letter-spacing: 1px;
	display: flex;
	align-items: center;
	justify-content: center;
}
#index_service .index_service_contain .title {
	max-width: 462px;
	width: 100%;
	/*min-height: 216px;*/
	/* background: url(../../images/service_title.png); */
	background-position: center;
}
#index_service .index_service_contain .slogan {
	max-width: 385px;
	width: 100%;
	padding: 4px 10px;
	box-sizing: border-box;
	background: #753016;
	text-align: center;
	color: #ffffff;
	letter-spacing: 10px;
}
#index_service .index_service_contain--carousel {
	display: block;
	padding-left: 12px;
	padding-right: 12px;
	box-sizing: border-box;
}

@media screen and (max-width: 480px) {
	#index_service .index_service_contain .title {
		background: none;
		min-height: inherit;
	}
}

#owl-service .item{
	padding: 8px 10px;
	margin: 5px 0;
	text-align: center;
	color: inherit;
}
#owl-service .item .feedback-item {
	float: none;
	width: 100%;
	max-width: none;
	margin: 0 auto;
	text-align: left;
	display: flex;
	flex-direction: column;
	height: 540px;
	min-height: 540px;
	max-height: 540px;
	box-sizing: border-box;
}
#owl-service .owl-item {
	display: flex;
	align-items: stretch;
}
#owl-service .owl-item > .item {
	display: flex;
	width: 100%;
	align-items: stretch;
}
/* 圖片區高度比照內頁比例（內頁為寬 100%、依縮圖比例顯示；此處欄寬相近故給足高度並 cover） */
#owl-service .feedback-item > a:first-child {
	display: block;
	flex: 0 0 248px;
	height: 248px;
	overflow: hidden;
}
#owl-service .feedback-item > a:first-child img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
#owl-service .feedback-item .index-feedback-item-head {
	flex-shrink: 0;
	overflow: hidden;
}
#owl-service .feedback-item .index-feedback-item-head::after {
	content: "";
	display: table;
	clear: both;
}
#owl-service .feedback-item .editor {
	flex: 0 0 auto;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
	text-overflow: ellipsis;
	word-break: break-word;
	line-height: 1.8;
	font-size: 14px;
	color: #2d2d2d;
	min-height: calc(1.8em * 3);
	max-height: calc(1.8em * 3);
	margin: 0;
}
#owl-service .feedback-item .pager {
	flex-shrink: 0;
	margin-top: auto;
	margin-bottom: 0;
}

@media screen and (max-width: 767px) {
	#owl-service .item .feedback-item {
		height: 500px;
		min-height: 500px;
		max-height: 500px;
	}
	#owl-service .feedback-item > a:first-child {
		flex: 0 0 210px;
		height: 210px;
	}
}

/* ----------------------------------------------------------------------------------------------------------------*/
/* ------------------------------>>> About <<<----------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

.inner-about{ width:100%; }
.about-items{ float:left; width:31%; margin:50px 1%; text-align:center; }
.about-items .title{ color:#000000; font-size:16px; padding:10px 0; }

@media screen and (max-width: 1024px) {
	.about-items{ width:48%; margin:30px 1%; }	
}
@media screen and (max-width: 480px) {
	.about-items{ width:100%; margin:20px 0; }	
}


/* ----------------------------------------------------------------------------------------------------------------*/
/* ------------------------------>>> Service <<<----------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

/*list page*/
.service-area{width:100%;margin: 30px 0;overflow:hidden;}
.service-items{ float:left; width:30%; margin:1% }
.service-img{ box-shadow: 0 4px 8px 0 rgba(0, 0, 0, -0.8), 0 6px 20px 0 rgba(0, 0, 0, 0.19); max-width:440px; }

/*方案簡介*/
.service-btitle{ color:#101010; font-size:15px; padding:10px 0; letter-spacing:6px; text-shadow: 1px 1px 1px #CCC; }
.service-stitle{ color:#706A6C; padding:10px 0; letter-spacing:5px; }
.service-line{ display:inline-block; width:1px; height:50px; border-right:1px solid #333; }

.service-title{font-size: 18px;letter-spacing:5px;color: #f95f13;line-height: 22px;padding: 10px 20px 15px 20px;}
.service-price{font-size: 22px;letter-spacing:2px;color:#393a3a;padding: 0px 20px;margin: 10px 0;text-align:center;min-height: 60px;max-height:60px;overflow:hidden;}

/*行程規劃*/
.planning-area{ width:100%; text-align:center; overflow:hidden; }
.planning-area > .items{display:inline-block;vertical-align: top;max-width:350px;width:100%;margin:2%;padding: 10px 10px;}
.planning-area > .items > .step {
	display:inline-block;
	font-size:18px;
	background:#000;
	color:#FFFFFF;
	padding: 10px 25px;
	margin: 10px 10px 25px 10px;
	line-height: 30px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 50px;
}
.planning-area > .items > .title{ background:#c84300; color:#ffffff; padding:10px; font-size:15px; letter-spacing:1px; }
.planning-area > .items > ul li{text-align:left;list-style-image:url(../../images/diamond.png); list-style-position:inherit; padding: 5px 0px 10px 0; margin: 3px 0 3px 0; line-height: 25px;color: #000000;font-size: 14px;}

/*拍攝景點路線*/
.service-route{ border-bottom:1px dashed #bdbdbd; padding:0 0 20px 0; }
.service-route > .title{ font-size:18px; color:#f5580b; padding:15px 0 0 15px; }
.service-route > .title:before{ content:url(../../images/camera.png); padding:0 5px 0 0; }
.service-route > .step{ color:#3d3d3d; padding:15px 0 0 15px; }
.service-route > .step span a{ display:inline-block; color:#3d3d3d; text-decoration:none; border-bottom:1px solid #aaaaaa; padding-bottom:0px; }
.service-route > .step span a.on{ display:inline-block; color:#f5580b; text-decoration:none; border-bottom:1px solid #f5580b; padding-bottom:0px; }
.service-route > .step span a:hover{ display:inline-block; color:#f5580b; text-decoration:none; border-bottom:1px solid #f5580b; padding-bottom:0px; }
.service-route > .step span{ padding:0; display:inline-block; }
.service-route > .step span:first-child{ /*padding-left:0;*/ }

/*包套內容*/
.package-area{ width:100%; text-align:center; overflow:hidden; font-size:14px; line-height:23px; }
.package-area > .items{display:inline-block;max-width: 620px;text-align: left;width:100%;margin:2%;padding: 10px 10px; border-left:1px solid #cdcdcd; }
.package-area > .items > div{ padding:5px 0 5px 15px; font-size:14px; line-height:25px; }
.package-area > .items > .title{ font-size:18px; color:#f5580b; padding-bottom:15px; }

/*菱形*/
.diamond{
	display: inline-block;
	width:55px;
	height:55px;
	background-color: #000000;
	transform: rotate(45deg);
	margin:15px;
	padding:5px;
	box-sizing:border-box;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
		
}
.diamond div{ border:1px solid #FFFFFF;width:100%; height:100%; display:flex; align-items:center; justify-content: center; }
.diamond div span{
		color:#ffffff;
		font-size: 18px;
		font-style: italic;
		-moz-transform: scale(1) rotate(-45deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
		-webkit-transform: scale(1) rotate(-45deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
		-o-transform: scale(1) rotate(-45deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
		-ms-transform: scale(1) rotate(-45deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
		transform: scale(1) rotate(-45deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
}


@media screen and (max-width: 1024px) {
	.service-items{ width:46%; }
}

@media screen and (max-width: 550px) {
	.service-items{ width:100%;}
	.planning-area > .items{ margin:0; }
}


/* ----------------------------------------------------------------------------------------------------------------*/
/* ------------------------------>>> Attractions <<<----------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

/*list page*/
.attract-area{ width:100%; overflow:hidden; }
.attract-items{ display:inline-block; position: relative;width:31%;margin: 40px 1%;}
.attract-items > .caption{ max-width:300px; width:90%; padding:5px; box-sizing:border-box; line-height:20px; position:absolute; text-align:center; font-size:15px; color:#2b2b2b; bottom:-12px; left:0; right:0; margin:0 auto; background:#FFF; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, -0.8), 0 6px 20px 0 rgba(0, 0, 0, 0.19); cursor:hand; cursor:pointer; }
.attract-items > .caption span{ /* display:block; */ color:#ff6b23; font-size:12px; }
.attract-img{ box-shadow: 0 4px 8px 0 rgba(0, 0, 0, -0.8), 0 6px 20px 0 rgba(0, 0, 0, 0.19); max-width:440px; }


/*image mask*/
.attract-mask{ opacity:1; position:absolute; left:0; bottom:0; color:#ffffff; width:100%; height:100%; background-color:rgba(0, 0, 0, 0); letter-spacing:3px; text-align:center; padding:10px; line-height:22px; -webkit-transition:.2s;-ms-transition:.2s;-moz-transition:.2s; }
.attract-mask-content{ width:100%; height:100%; display:flex; align-items:center; justify-content: center; }
.attract-mask .line{ border:1px solid #FFFFFF; }


@media screen and (max-width: 1024px) {
	.attract-items{ width:46%; }
}

@media screen and (max-width: 768px) {
	.attract-items{ width:100%; margin:30px 0; }
}

/* ----------------------------------------------------------------------------------------------------------------*/
/* ------------------------------>>> Video <<<----------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

.video-row { display: flex; width:100%; height:500px; cursor:hand; cursor:pointer; margin:80px 0; }
.video-col { flex: 1; color:#fefefe; text-align:center; padding:10px; -webkit-transition:.6s;-ms-transition:.6s;-moz-transition:.6s; }
.video-row .bg{ background-color:rgba(51, 51, 51, 1); }
.video-col .title{ font-size:18px; display:block; padding:20px 0 10px 0; border-bottom:1px solid #595959; letter-spacing:3px;}
.video-col .title a{ color:#fefefe; text-decoration:none; -webkit-transition:.6s;-ms-transition:.6s;-moz-transition:.6s;  }
.video-col .date{ color:#7d7d7d; padding:20px 0 0 0; }
.video-col .line{ border:1px solid #ffffff; width:100%; height:100%; display:flex; align-items:center; justify-content: center; }
.video-row:hover .title a{ color:#ff7e3e; }
.video-row:hover .bg{ background:#000; }
.video-row:hover img{ animation: spin ease-out 1s; }
.video-row:hover .video-col{ padding:15px; }

.video-row:hover .video-col.img
{
     /*transform: scale(1.02);*/
}

.fancybox-media{ text-decoration:none; }

/*Rotate*/
@-moz-keyframes spin {
    from { -moz-transform: rotate(0deg); }
    to { -moz-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
    from { -webkit-transform: rotate(0deg); }
    to { -webkit-transform: rotate(360deg); }
}
@keyframes spin {

    from {transform:rotate(0deg);}
    to {transform:rotate(360deg);}
}


@media screen and (max-width: 600px) {
	.video-row { height:auto; margin:30px 0; }
	.video-row .bg{ background-color:rgba(51, 51, 51, 1); }
	.video-row .img{ display:none; }
	.video-col{ height:300px; }
	.video-col .line{ background-color:rgba(51, 51, 51, 0.9); }
}


/* ----------------------------------------------------------------------------------------------------------------*/
/* ------------------------------>>> Feedback <<<----------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

.feedback-item{ width:31%; background:#ffffff; float:left; margin:1%; padding:15px 15px; box-sizing:border-box; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);  }
.feedback-item .types{ float:left; background:#ff7e3e; color:#ffffff; padding:3px 30px; }
.feedback-item .name{ float:right; color:#ff7e3e; font-size:16px; }

    .transImg{

        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
        transition: 0.3s;
    }
    .transImg:hover{
        transform: translateY(-3px);
        box-shadow: 0 6px 14px rgba(0, 0, 0, 0.08);
    }

@media screen and (max-width: 1024px) {
	.feedback-item{ width:46.5%; }
}
@media screen and (max-width: 600px) {
	.feedback-item{ width:100%;  }
}


/* ----------------------------------------------------------------------------------------------------------------*/
/* ------------------------------>>> Faq <<<----------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/


.question{margin: 20px 0;}
.question_bg{/* border:1px solid #017426; */border-bottom:0;padding: 20px 0;cursor:pointer;cursor:hand;}
.question_border{ border-bottom: 1px solid #d7d7d7; }
.padd10{padding:10px;}
.question_title{font-family:'微軟正黑體';color: #e74d00;/* font-weight:bold; */font-size: 16px;font-weight: bold;position:relative;padding: 0 40px 0 0;}
.question_content{color:#2d2d2d;/* background:#ffffff; */padding:15px 35px 25px 35px;position:relative;font-size:15px;line-height:30px;letter-spacing:1px;text-align:left;}
.question_img{ position:absolute; bottom:0px; right: 15px; }
.question_date{/*background: #2d2d2d;*/color: #e74d00;font-size: 16px;font-weight: bold;letter-spacing:2px;}
.question_date span{ display:block; font-size:48px; letter-spacing:2px; }


/* ----------------------------------------------------------------------------------------------------------------*/
/* ------------------------------>>> Contact <<<----------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

.contact-area{ padding:20px 0; margin:0 auto; }
#contact{width: 50%;max-width: 800px;}
#contact tr td{color: #000000;padding:5px 0;font-size: 16px;letter-spacing:1px;line-height:20px;}
#contact .ctitle{font-size:14px;color: #000000;letter-spacing: 2px;/* height:50px; */min-width:60px;max-width: 100px;}
#contact .ctitle span{ color:#979797; display:block; padding:10px 0 0 0; }
#contact .input1
{
	max-width:560px;width:95%;height: 40px;font-size: 14px;letter-spacing: 1px;-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px;border:1px solid #D2D2D2;background: #ffffff;padding-left:10px;color:#333;outline:0;
	font-family: Arial, "文泉驛正黑", "WenQuanYi Zen Hei", "儷黑 Pro", "Microsoft JhengHei", "新細明體", "PMingLiU", sans-serif;
}
#contact .input2{ max-width:150px; width:95%; height:40px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; border:1px solid #D2D2D2;  background:#ffffff; padding-left:10px; color:#333; outline:0;font-size: 14px;letter-spacing: 1px;
font-family: Arial, "文泉驛正黑", "WenQuanYi Zen Hei", "儷黑 Pro", "Microsoft JhengHei", "新細明體", "PMingLiU", sans-serif;}
#contact .textarea{ max-width:560px; width:95%; height:150px; resize:none; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; border:1px solid #D2D2D2; background:#ffffff; padding:10px; color:#333; outline:0;
    -webkit-transition: width 0.4s ease-in-out;
    transition: height 0.4s ease-in-out;
	font-size: 14px;letter-spacing: 1px;
	font-family: Arial, "文泉驛正黑", "WenQuanYi Zen Hei", "儷黑 Pro", "Microsoft JhengHei", "新細明體", "PMingLiU", sans-serif;
}
#contact .textarea:focus {
    height: 300px;
}
#contact input:focus { 
    background-color:#fbfbfb;
}


.contact_info_area2{width:100%;max-width: 400px;letter-spacing: 1px;font-size: 15px;overflow:hidden;line-height: 25px;padding: 10px 0;text-shadow: 1px 1px 1px #CCC;}
.contact_info_title2{float:left;width: 30%;min-width:70px;/* max-width:70px; */}
.contact_info_content2{float:left;width: 70%;/* font-size: 15px; */}

@media screen and (max-width : 1023px) {
	#contact{ width:90%; }
	.contact{ max-width:none; }
	.contact_right{ float:none; width:100%; flex:none; }	
}

@media screen and (max-width : 480px) {
	.contact_info_content{ width:100%; padding:0 10px 0 0px; }
	.contact_info_title2{ float:none; width:100%; font-weight:bold; }
	.contact_info_content2{ width:100%; }	
}


/* ----------------------------------------------------------------------------------------------------------------*/
/* ------------------------------>>> divas Slider <<<----------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

/*
 * Divas Slider main style
 * Do not edit or edit with extreme care!
 * These rules are mandatory for Divas Slider to work correctly
 */
.divas-slider {
	position: relative;
	margin: 0 auto;
	padding: 0;
	width: 100%;
	height: auto;
	overflow: hidden;
}

.divas-slide-container {
	position: relative;
	margin: 0;
	padding: 0;
}

.divas-slide-container:before,
.divas-slider-container:after {
  content: "";
  display: table;
  clear: both;
}

.divas-slide {
	position: relative;
	margin: 0;
	padding: 0;
	float: left;
	overflow: hidden;
}

.divas-slide img {
	display: block;
	margin: 0;
	padding: 0;
	width: 100%;
	height: auto;
	outline: 0 none;
	-webkit-backface-visibility: hidden;
  	-moz-backface-visibility: hidden;
 	-ms-backface-visibility: hidden;
	backface-visibility: hidden;
}

/* ----------------------------------------------------------------------------------------------------------------*/
/* ------------------------------>>> 區塊跳動效果 <<<----------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

.bannerArea{ z-index:999999; }
.bannerArea a.scrollDown{
	display:block;
	color:#000;
	text-align:center;
	position:absolute;
	left: 0; 
	right: 0; 
	margin-left: auto; 
	margin-right: auto; 
	margin-bottom:  2%;
	z-index:999;
	}

.bannerArea a.scrollDown i{
	display:inline-block;
	text-align:center;
	font-size:25px;
	color:#FFF;
	text-align:center;}

/*------css3動畫--------*/
@-webkit-keyframes upDown {
  0%     {bottom:20px; opacity:1;}
  50%   {bottom:28px; opacity:0.5;}
  100% {bottom:20px; opacity:1;}

}
@-moz-keyframes upDown {
  0%     {bottom:20px; opacity:1;}
  50%   {bottom:28px; opacity:0.5;}
  100% {bottom:20px; opacity:1;}
}
@keyframes upDown {
  from     {bottom:20px; opacity:1;}
  50%   {bottom:28px; opacity:0.5;}
  to {bottom:20px; opacity:1;}
}
.upDown{
	-webkit-animation: upDown ease-out 1s infinite;
	-moz-animation: upDown ease-out 1s infinite;

	-o-animation: upDown ease-out 1s infinite;
	animation: upDown ease-out 1s infinite;
}





/* ----------------------------------------------------------------------------------------------------------------*/
/* ------------------------------>>> checkbox/radio template <<<------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/


/* The container */
.container {
    display: inline-block;
    position: relative;
    color: #ffffff;
    letter-spacing: 2px;
    padding-left: 35px;
    padding-right: 20px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 16px;
    font-weight:normal;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Hide the browser's default checkbox */
.container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

/* Create a custom checkbox */
.checkmark {

    position: absolute;
    top: 0;
    left: 0;
    height: 18px;
    width: 18px;
    background-color: #fff;
    border:1px solid #CCC;
}

/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
    background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {
    background-color: #fff;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
    display: block;
}

/* Style the checkmark/indicator */
.container .checkmark:after {
    left: 5px;
    top: 1px;
    width: 5px;
    height: 10px;
    border: solid #179ccb;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}


/* ----------------------------------------------------------------------------------------------------------------*/
/* ------------------------------>>> Swiper Slider <<<----------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

html, body { position: relative; height: 100%; }
.swiper-container { position:relative; width: 100%; height: 100%; }
.swiper-slide { text-align: center; font-size: 48px; color:#fff; letter-spacing:1px; background-size:cover; background-position: center; }
.swiper-mask{ position:absolute; top:0; left:0; background:url(../../images/bg-mask.png); width:100%; height:250px; }
.swiper-word {display:none;width:100%; letter-spacing:5px; max-width: 1400px;position:absolute;left: 0;right: 0;margin-left: auto;margin-right: auto;font-size:2.75vw;/* line-height: 3.5vw; */top: 38%;text-align: left;padding-right:4%;padding-left: 50px;border-left: 1px solid #ffffff;box-sizing:border-box;}
.swiper-word span { font-size:16px; }


/* ----------------------------------------------------------------------------------------------------------------*/
/* ------------------------------>>> CSS Effect <<<----------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/


/*image zoom*/
.photo-zoom {
  position: relative;
  overflow: hidden;
  width: 100%;
  -webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;
}
.photo-zoom img {
  max-width: 100%;
  -moz-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  
}
.photo-zoom:hover img {

  -moz-transform: scale(1.1);
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
  
}

/*image mask*/
.photo-mask{ opacity:0; position:absolute; left:0; bottom:0; color:#ffffff; width:100%; height:100%; background-color:rgba(0, 0, 0, 0.7); letter-spacing:3px; text-align:center; padding:10px; line-height:22px; -webkit-transition:.2s;-ms-transition:.2s;-moz-transition:.2s; }
.photo-mask-content{ width:100%; height:100%; display:flex; align-items:center; justify-content: center; }
.photo-mask .line{ border:1px solid #FFFFFF; }
.gallery:hover .photo-mask{ opacity:1; }

/* 攝影作品列表：封面仍占滿 flexImages 算出的格高；圖層內 overflow:hidden 裁切 hover 放大；標題在格下方 */
.photography-album-list .flex-images .item.flex-images-item--has-caption {
	overflow: visible;
	margin-bottom: 58px;
}

.photography-album-list .flex-images .flex-images-item__link {
	display: block;
	position: relative;
	height: 100%;
	text-decoration: none;
	color: inherit;
}

.photography-album-list .flex-images-item__media {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}

.photography-album-list .flex-images-item__media img {
	display: block;
	margin: 0 auto;
	width: auto;
	height: 100%;
	max-width: none;
}

.photography-album-list .flex-images-item__title {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	margin: 10px 4px 0;
	padding: 0 6px;
	text-align: center;
	font-size: 16px;
	line-height: 1.35;
	letter-spacing: 0.06em;
	color: #333333;
	font-weight: normal;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	word-break: break-word;
}

@media screen and (max-width: 768px) {
	.photography-album-list .flex-images .item.flex-images-item--has-caption {
		margin-bottom: 50px;
	}
	.photography-album-list .flex-images-item__title {
		font-size: 16px;
		margin-top: 8px;
	}
}


/*圖片filter*/
.img-gray { 
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    
    filter: grayscale(100%);
	
    filter: gray;
}


/* ----------------------------------------------------------------------------------------------------------------*/
/* ------------------------------>>> Transition Effect <<<----------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

.infinite_effect{   animation: nudge 5s linear infinite alternate; }

@keyframes nudge {
  0%, 100% {
    transform: translate(0, 0);
  }
  
  50% {
    transform: translate(15px, 0);
  }
  
  50% {
    transform: translate(-15px, 0);
  }
}


@keyframes rotate-btn {
  0% {

    transform: rotate(0);
  }
  100% {
    transform: rotate(-360deg);
  }
}

@keyframes transiTop20 {  0% {
 transform: translateY(-20%);

}
 100% {
 transform: translateY(0);
}
}

/* ----------------------------------------------------------------------------------------------------------------*/
/* ------------------------------>>> Loadaction <<<----------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

.Loadaction_Box { position:relative; height: 100%; width: 0%; position: fixed; overflow:auto; top: 0; left: 0; overflow:auto; background-color:rgba(152, 192, 210, 0.5); z-index:100000000 }
.Loadaction {width: 220px;height: 90px;line-height: 18px;top: 42%;position: absolute;margin-left: auto;margin-right: auto;left: 0;right: 0;padding: 10px;background-color:rgba(152, 192, 210, 0.8);-webkit-border-radius: 2px;-moz-border-radius: 2px;border-radius: 2px;}
.Actionupload_Text {font-size:13px;color:#FFFFFF;/* height:25px; */padding: 8px 0;letter-spacing: 2px;}

/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------------------------------->>> pagelink <<<--------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

.cssa { font-family:Verdana; letter-spacing:1px; font-size:12px; padding-right:10px; padding-left:10px }
.cssb { font-family:Verdana; letter-spacing:1px; font-size:12px; padding-right:5px; padding-left:5px }
.cssc { padding-bottom:3px; letter-spacing:1px; font-size:12px; padding-left:10px; padding-right:10px; height:40px }
.cssd { font-family:Verdana; font-size:12px; letter-spacing:2px; height:10px; border:1px solid #FFFFFF }
a.pagelink_no:link { color: #003399; text-decoration: none; font-family:Verdana; font-size:12px; letter-spacing:1px; }
a.pagelink_no:visited { color: #003399; text-decoration: none; font-family:Verdana; font-size:12px; letter-spacing:1px }
a.pagelink_no:active { color: #003399; text-decoration: none; font-family:Verdana; font-size:12px; letter-spacing:1px }
a.pagelink_no:hover { color: #003399; text-decoration: underline; font-family:Verdana; font-size:12px; letter-spacing:1px }
a.pagelink:link { color: #333333; text-decoration: none; font-family:Verdana; font-size:12px; letter-spacing:1px; }

a.pagelink:visited { color: #333333; text-decoration: none; font-family:Verdana; font-size:12px; letter-spacing:1px }
a.pagelink:active { color: #333333; text-decoration: none; font-family:Verdana; font-size:12px; letter-spacing:1px }
a.pagelink:hover { color: #333333; text-decoration: underline; font-family:Verdana; font-size:12px; letter-spacing:1px }
a.pagelink_ch:link { color: #cc3300; text-decoration: none; font-family:Verdana; font-size:12px; letter-spacing:1px; font-weight:bold }
a.pagelink_ch:visited { color: #cc3300; text-decoration: none; font-family:Verdana; font-size:12px; letter-spacing:1px; font-weight:bold }
a.pagelink_ch:active { color: #cc3300; text-decoration: none; font-family:Verdana; font-size:12px; letter-spacing:1px; font-weight:bold }
a.pagelink_ch:hover { color: #cc3300; text-decoration: underline; font-family:Verdana; font-size:12px; letter-spacing:1px; font-weight:bold }

/* ----------------------------------------------------------------------------------------------------------------*/
/* 手機版底部固定列（灰階）— 顯示於 max-width:1024px */
/* ----------------------------------------------------------------------------------------------------------------*/

.mobile-bottom-bar {
	display: none;
}

/* ----------------------------------------------------------------------------------------------------------------*/
/* 右側固定列：回到頂部 + LINE / WeChat / WhatsApp */
/* ----------------------------------------------------------------------------------------------------------------*/

.side-social-fixed {
	display: block;
	position: fixed;
	right: 0;
	bottom: 8%;
	top: auto;
	transform: none;
	z-index: 10001;
	pointer-events: none;
}

.side-social-fixed__inner {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 5px;
	pointer-events: auto;
}

.side-social-fixed__btn {
	width: 52px;
	height: 52px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 12px 0 0 12px;
	box-shadow: -2px 4px 14px rgba(0, 0, 0, 0.12);
	text-decoration: none;
	color: #fff;
	font-size: 26px;
	line-height: 1;
	transition: box-shadow 0.2s ease, filter 0.2s ease;
	border: none;
	cursor: pointer;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
}

.side-social-fixed__btn:hover,
.side-social-fixed__btn:focus {
	box-shadow: -4px 6px 18px rgba(0, 0, 0, 0.18);
	filter: brightness(1.05);
	color: #fff;
	outline: none;
}

.side-social-fixed__btn:focus-visible {
	box-shadow: -4px 6px 18px rgba(0, 0, 0, 0.18), 0 0 0 3px rgba(255, 255, 255, 0.95);
}

.side-social-fixed__btn--top {
	background: linear-gradient(145deg, #ff9359 0%, #ff7e3e 55%, #e86b2b 100%);
	font-size: 20px;
}

/* 回到頂部：僅淡入淡出，始終佔位以免社群按鈕位移 */
.side-social-fixed__btn.gotop {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.28s ease, visibility 0.28s ease, box-shadow 0.2s ease, filter 0.2s ease;
	flex-shrink: 0;
}

.side-social-fixed__btn.gotop.gotop--visible {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

.side-social-fixed__btn--line {
	background-color: #06c755;
}

.side-social-fixed__btn--wechat {
	background-color: #07c160;
}

.side-social-fixed__btn--whatsapp {
	background-color: #25d366;
}

/* 行動／平板：底部灰階列 + 回到頂部浮塊 */
@media screen and (max-width: 1024px) {
	body {
		padding-bottom: calc(58px + max(10px, env(safe-area-inset-bottom, 0px)));
	}

	#footer {
		padding-bottom: calc(58px + max(10px, env(safe-area-inset-bottom, 0px)));
	}

	.mobile-bottom-bar {
		display: flex;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 2;
		box-sizing: border-box;
		margin: 0;
		padding: 6px 4px max(10px, env(safe-area-inset-bottom, 0px)) 4px;
		background: linear-gradient(180deg, #5f5f63 0%, #4a4a4d 55%, #3e3e41 100%);
		border-top: 1px solid rgba(255, 255, 255, 0.12);
		box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.18);
		justify-content: space-between;
		align-items: stretch;
		gap: 0;
	}

	.mobile-bottom-bar__item {
		flex: 1 1 0;
		min-width: 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 5px;
		padding: 6px 2px;
		text-decoration: none;
		color: #f5f5f7;
		font-size: 10px;
		line-height: 1.2;
		letter-spacing: 0.03em;
		-webkit-tap-highlight-color: transparent;
		transition: color 0.18s ease, background 0.18s ease;
		border-radius: 10px;
	}

	.mobile-bottom-bar__item:hover,
	.mobile-bottom-bar__item:active {
		color: #f5f5f7;
		background: rgba(255, 255, 255, 0.07);
	}

	.mobile-bottom-bar__item:focus {
		outline: none;
	}

	.mobile-bottom-bar__item:focus-visible {
		color: #ffffff;
		background: rgba(255, 255, 255, 0.12);
		box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.35);
	}

	.mobile-bottom-bar__icon {
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 19px;
		line-height: 1;
		color: #f5f5f7;
		transition: color 0.18s ease;
	}

	.mobile-bottom-bar__item:hover .mobile-bottom-bar__icon,
	.mobile-bottom-bar__item:active .mobile-bottom-bar__icon {
		color: #ececf0;
	}

	.mobile-bottom-bar__icon .fa-brands,
	.mobile-bottom-bar__icon .fa-solid {
		filter: grayscale(1);
	}

	.mobile-bottom-bar__text {
		display: block;
		max-width: 100%;
		font-weight: 500;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.side-social-fixed {
		right: 16px;
		bottom: calc(58px + max(10px, env(safe-area-inset-bottom, 0px)) + 12px);
	}

	.side-social-fixed__inner > .side-social-fixed__btn:not(.gotop) {
		display: none;
	}

	.side-social-fixed__btn.gotop {
		border-radius: 14px;
		box-shadow: 0 4px 18px rgba(0, 0, 0, 0.14);
		transition: opacity 0.28s ease, box-shadow 0.2s ease, filter 0.2s ease;
	}

	.side-social-fixed__btn.gotop:not(.gotop--visible) {
		display: none;
	}

	.side-social-fixed__btn.gotop.gotop--visible {
		display: flex;
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
	}

	.side-social-fixed__btn.gotop:hover,
	.side-social-fixed__btn.gotop:focus {
		box-shadow: 0 6px 22px rgba(0, 0, 0, 0.18);
	}

	.side-social-fixed__btn.gotop:focus-visible {
		box-shadow: 0 6px 22px rgba(0, 0, 0, 0.18), 0 0 0 3px rgba(255, 255, 255, 0.95);
	}
}


@media screen and (min-width: 1025px) {
	.side-social-fixed {
		top: auto;
		bottom: max(6vh, 56px);
		transform: none;
	}
}
