@charset "utf-8";
@import url("reset.css");
@import url("loading.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; }


/*回上頁*/
.gotop{ position:fixed; bottom:15%; right:5%; z-index:1; display:block; color:#ff7e3e; padding:20px; border:1px solid #ff7e3e; -webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px; text-decoration:none; -webkit-transition: all .4s ease;
 -moz-transition: all .4s ease;
 -o-transition: all .4s ease;
 transition: all .4s ease;
 -ms-transition: all .4s ease }
.gotop:hover{ background:#ff7e3e; color:#ffffff; }

/*網站地圖*/
#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; }
.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; }


.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: 60px;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%; min-height:691px; background:url(../../images/about_bg.png); background-size:cover; }
.index_about_contain {position:relative;text-align:left;max-width:1400px;margin:0 auto;padding:50px 0;color:#797979;font-size:14px;line-height:25px;letter-spacing:1px;}
.index_about_contain .about_box{position:absolute;right:10px;top:0;width:100%;max-width: 650px;padding:0 10px;box-sizing:border-box;overflow:hidden;min-height:500px;text-align:center;color:#fffefe;font-size:16px;letter-spacing:5px;}
.index_about_contain .about_box .slogan{ padding:20px 0 40px 0;}
.index_about_contain .about_box .title{ color:#ffffff; background:#b31010; font-size:30px; letter-spacing:2px; padding:10px; margin-bottom:30px; }
.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;}

@media screen and (max-width: 1400px) {
	.index_about_contain .about_box{ background-color:rgba(0, 0, 0, 0.8); position:inherit; top:0; left: 0; right: 0; margin-left: auto; margin-right: auto;  }
}


/*Service*/
#index_service { width:100%; min-height:736px; background:url(../../images/service_bg.png); background-size:cover; }
.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_contain .title{ max-width:462px; width:100%; min-height:216px; background:url(../../images/service_title.png); background-position:center; }
.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; }

/*服務評價輪播*/
#owl-service .item{
    padding: 30px 5%;
    margin: 5px;
    color: #FFFFFF;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    text-align: center;
}
#owl-service .item .owl-title{ text-align:center; font-size:18px; letter-spacing:3px; padding:10px 0 40px 0; }
#owl-service .item .owl-content{ font-size:14px; text-align:left; }
#owl-service .item .owl-content a{ color:#ffffff; text-decoration:none; }
#owl-service .item .owl-content a:hover{ color:#FFA03B; text-decoration:none; }

@media screen and (max-width: 480px) {
	.index_service_contain .title{ background:none; min-height:inherit; }


}

/* ----------------------------------------------------------------------------------------------------------------*/
/* ------------------------------>>> 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 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);  }
.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 0 0px rgba(0, 0, 0, 0.2);
        transition: 0.3s;
    }
    .transImg:hover{
        transform: translateY(-5px);
        box-shadow: 0 15px 25px rgba(0, 0, 0, 0.15);
    }

@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; }


/*圖片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 }