@charset "utf-8";
@import url("reset.css");
@import url("loading.css");

/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------------------------------->>> Common <<<------------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

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-y:scroll; overflow-x:hidden; }
body, td, th,select,input {font-size:12px;font-family: /*Arial,*/ "文泉驛正黑", "WenQuanYi Zen Hei", "儷黑 Pro", "Microsoft JhengHei", "新細明體", "PMingLiU", sans-serif;color:#333333;}

/*簡易設定*/
.iframe_ch { display:none }
.middle { vertical-align:middle; }
.center { text-align:center; }
.w100{ width:100%; }
.web-bg{width:100%;overflow:hidden;/* background:url(../../images/bg.png) repeat; *//*background-size:cover;*/}
.web-bg-c{background: #E3DEDA;}

/*修正Safari*/
input, select, textarea { -ms-box-sizing:content-box; -moz-box-sizing:content-box; box-sizing:content-box; -webkit-box-sizing:content-box; }
input[type='text'],input[type='password'],input[type='button'],input[type='submit'],textarea,select { -webkit-appearance: none; }
select{ background:#ffffff;s }

/*分頁*/
.pager{ width:100%; overflow:hidden; margin:50px auto 50px auto; text-align:center; }

/*麵包屑*/
#sitemap{width:100%;box-sizing: border-box;padding: 25px 0 30px 0;}
#sitemap .wrap{width:100%;max-width:1400px;padding: 0 10px 15px 10px;line-height:20px;box-sizing: border-box;font-size:14px;letter-spacing:1px;color:#333333;text-align:right;border-bottom: 1px solid #B38C90;}
#sitemap .wrap a{ color:#333333; text-decoration:none; }
#sitemap .wrap i{ color:#bc8e8e; }

/*Hamburger*/
#nav-icon1,#nav-icon2,#nav-icon3,#nav-icon4{display:none;position:absolute;left: 20px;top: 5px;}

/*全營幕遮罩*/ 
.bg-overlay{display:block;position:fixed;left:0;top:0;background:rgba(0,0,0,0.7);opacity:0;visibility:hidden;width:100%;height:100%;z-index:2;-webkit-transition:.4s;-o-transition:.4s;transition:.4s}
.bg-overlay.visible{opacity:1;visibility:visible} 

/*表格*/
#css_table { display:table; width:100%; }
.css_tr { display: table-row; }
.css_td {display: table-cell;text-align:left;vertical-align:middle;padding: 15px 5px;box-sizing:border-box;letter-spacing:1px;font-size: 14px;color: #4C3434;}

/*編輯器內文*/
.editor{font-size:16px;padding: 15px 10px 50px 10px;clear:both;letter-spacing:1px;line-height:30px;}
.editor a{ color:#bc8e8e; text-decoration:underline; }

/*網頁標題*/
.page-title{text-align: center;letter-spacing: 5px;color: #333333;/* font-weight: bold; */font-size: 22px;line-height:30px;margin: 50px 10px 30px 10px;font-family: Arial, "文泉驛正黑", "WenQuanYi Zen Hei", "儷黑 Pro", "Microsoft JhengHei", "新細明體", "PMingLiU", sans-serif;}
.page-title span{display:block;font-size:22px;letter-spacing: 4px;font-weight: normal;color: #804647; !important;padding: 10px 0 0px 0;margin-bottom:10px;/* font-family: 'Libre Baskerville', serif; */}
.page-title:before{content: url(../../images/common-title.png);}
.page-subtitle{text-align:center;letter-spacing: 2px;color:#000000;font-size: 18px;line-height: 25px;margin: 40px 10px 50px 10px;font-family: Arial, "文泉驛正黑", "WenQuanYi Zen Hei", "儷黑 Pro", "Microsoft JhengHei", "新細明體", "PMingLiU", sans-serif;}
.page-subtitle span{display:block;font-size: 26px;letter-spacing:2px;color: #B38C90; !important;padding: 10px 0 0px 0;margin-bottom:10px;font-family: 'Libre Baskerville', serif;}

/*左右欄的頁面*/
.container{position:relative;max-width:1400px;min-height:500px;margin: 0px auto 0 auto;padding: 0 0 20px 0;}
.container .layout-left{width: 20%; float:left;box-sizing: border-box;padding: 0 10px;}
.container .layout-right{width: 80%;float:left;box-sizing: border-box;padding: 0 10px;}

/*左邊選單1*/
.left-menu{ width:100%; max-width:180px; overflow:hidden; }
.left-menu a{display:block;color:#252525;font-size:14px;letter-spacing:1px;text-decoration:none;padding:10px;margin:0 0 20px 0;box-sizing:border-box;}
.left-menu a:hover{color:#736357;}
.left-menu a.on{background: #804647;color:#ffffff;}

/*底部選單*/
.bottom-menu{ width:100%; overflow:hidden; display:none; margin-top:30px; }
.bottom-menu a{ display:block; color:#000000; background:#ffffff; border:1px solid #ebebeb; text-align:center; font-size:16px; letter-spacing:1px; text-decoration:none; padding:10px; margin:0 0 10px 0; box-sizing:border-box; }
.bottom-menu a:active{color:#ffffff; background:#000000;}
.bottom-menu a.on{ /*background:#000000; color:#ffffff;*/ }

/*左邊選單2*/
.left-menu2{ width:100%; max-width:180px; margin-top:50px; overflow:hidden; }
.left-menu2 a{display:block;color: #736357;font-size:14px;line-height:20px;border: 1px solid #736357;letter-spacing:1px;text-decoration:none;padding:10px;margin:0 0 20px 0;box-sizing:border-box;}
.left-menu2 a:hover{background:#736357;color:#ffffff;
transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-webkit-transition: all 1s ease;
-o-transition: all 1s ease;
}
.left-menu2 a.on{ background:#8e5a5a; color:#ffffff; }


/*內頁Banner*/
#banner_box{ width:100%; overflow:hidden; margin-top:100px; }
#banner{ position:relative; width:100%; height:400px; overflow:hidden;background-size: cover;
transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-webkit-transition: all 1s ease;
-o-transition: all 1s ease;
}
#banner.banner_load {
	transform: scale(1.1);
	
} 

/*商品數量選擇器*/
.btn-cart{width:100%;overflow:hidden;/* max-width:135px; *//* margin:45px 0 20px 0; */}
.btn-cart span{border: 1px solid #804647;background: #804647;color: #ffffff;font-weight:bold;padding: 4px 9px;cursor:hand;cursor:pointer;}
.btn-cart .jq_increase{padding: 4px 7px;}
.btn-cart span:hover{ background:#af7777; -webkit-transition:.6s;-ms-transition:.6s;-moz-transition:.6s; }
.btn-cart input{border: 1px solid #dbdbdb;outline:0;width: 55px;height: 24px;text-align:center;font-size: 16px;color: #000000;background: #ffffff;-webkit-border-radius: 0px;-moz-border-radius: 0px;border-radius: 0px;}

/*網站按鈕*/
.webbtn1{display:inline-block;color: #804647!important;font-size:15px !important;width:200px;padding: 10px 0;margin: 5px 0;line-height: 30px;text-decoration:none;letter-spacing:2px;border: 1px solid #804647;cursor:hand;cursor:pointer;}
.webbtn1 img{ vertical-align:-20%;}
.webbtn1:hover{
 background: #804647;
 color:#ffffff !important;
 border: 1px solid #804647;
 -webkit-transition: all .4s ease;
 -moz-transition: all .4s ease;
 -o-transition: all .4s ease;
 transition: all .4s ease;
 -ms-transition: all .4s ease;
 }
.webbtn1:hover img{ filter: brightness(0) invert(1); }
.webbtn1.on{ background:#bc8e8e; color:#ffffff !important; border: 1px solid #bc8e8e; }

.webbtn2{display:inline-block;color: #989898!important;font-size:15px !important;width:200px;padding: 10px 0;line-height: 30px;text-decoration:none;letter-spacing:2px;border: 1px solid #989898;cursor:hand;cursor:pointer;}
.webbtn2 img{ vertical-align:-20%;  -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */ filter: grayscale(100%);}
.webbtn2:hover{ background:#989898; color:#ffffff !important; border: 1px solid #989898; -webkit-transition: all .4s ease;
 -moz-transition: all .4s ease;
 -o-transition: all .4s ease;
 transition: all .4s ease;
 -ms-transition: all .4s ease}

.webbtn2:hover img{filter: brightness(0) invert(1);}

.webbtn3{display:inline-block;color: #ffffff!important; background:#bc8e8e; font-size:15px !important;width:200px;padding: 10px 0;margin: 5px 0;line-height: 30px;text-decoration:none;letter-spacing:2px;border: 1px solid #bc8e8e;cursor:hand;cursor:pointer; -webkit-border-radius:0px;-moz-border-radius: 0px;border-radius: 0px; }


@media screen and (max-width:768px) {
	.noneM{ display:none; }
	#banner{ height:200px; }
}
@media screen and (max-width:480px) {
	.noneS{ display:none; }	
	.bottom-menu{ display:block; }
	
}

/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------------------------------->>> Layout <<<------------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/


#wrapper{position:relative;width:100%;transition: margin-left .5s;background: #E3DEDA;}
#wrapper .container{width:100%;max-width:1400px;margin: 20px auto;overflow:hidden;}
#wrapper .fix-top{ margin-top:140px;}
#header{position:fixed;left:0;top:0;z-index:2;width:100%;background:url(../../images/header-bg.png) repeat-x;}
#header .wrap{ position:relative; max-width:1400px; height:150px; margin:0 auto; }
#header .wrap .logo-b{position:fixed;top: 15px;/*box-shadow:2px 2px 8px rgba(15%,15%,40%,0.1);*/}
#header .wrap .logo-s{position:absolute;top: 20px;left: 0;right: 0;margin-left: auto;margin-right: auto;height:60px;display:none;}

#header ul{position:absolute;left: 230px;top: 48px;list-style:none;text-align:center;}
#header ul li{position: relative;float:left;padding: 0 10px 30px 10px;margin: 26px 38px 0 38px;font-size:16px;color: #B38C90;letter-spacing: 3px;border-top:1px solid transparent;border-bottom:1px solid transparent;cursor:hand;cursor:pointer;}
#header ul li .line{position:absolute;bottom: 20px;left:0;width:100%;border-bottom:1px solid transparent;}
#header ul li span{display:block;color: #D2CCBF;font-size:12px;letter-spacing:1px;line-height:30px;}

#header ul li:hover{ border-top:1px solid #D2CCBF;
-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 ul li:hover .line{ border-bottom:1px solid #D2CCBF;
-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 ul li img{ opacity:0; position:absolute; top: -34px; left:0;right: 0; margin-left: auto;margin-right: auto; }
#header ul li:hover img{ opacity:1; top: -29px;
-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 nav{position:absolute;right: 20px;top: 10px;}
#header nav div{ position:relative; font-size:13px; color:#2c2928; letter-spacing:2px; }
#header nav div img{ vertical-align:-40%; padding:0 3px; }
#header nav input[type='text']{ background:#f6f0ee; border:0; width:130px; padding:5px 5px 5px 30px; box-sizing:border-box; letter-spacing:1px; outline:0;
transition: all .4s ease;
}
#header nav input[type='text']::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  font-family: /*Arial,*/ "文泉驛正黑", "WenQuanYi Zen Hei", "儷黑 Pro", "Microsoft JhengHei", "新細明體", "PMingLiU", sans-serif;
  color: #B48B93;
  opacity: 0.8; /* Firefox */
}
#header nav input[type='text']:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: #B48B93;
}
#header nav input[type='text']::-ms-input-placeholder { /* Microsoft Edge */
  color:#B48B93;
}

#header nav input[type='text']:focus{ width:150px;}
#header nav input[type='image'],#header nav i{position:absolute;top: 7px;left: 7px;outline:0;color: #B38C90;font-size: 15px; cursor:pointer; }
#header nav .linker{font-size:14px;border-left: 1px solid #807D76;/*border-right:1px solid #efded9;*/padding: 0 0 0 8px;margin:0 8px;color: #D2CCBF;}
#header nav .linker a{color: #D2CCBF;text-decoration:none;}
#header nav .linker a:hover{ text-decoration:underline; }

#header nav span.form_search_m{position:absolute;right: 13px;top: 35px;font-size: 18px;}
#header nav span.form_search_m i{color: #B38C90;}

/*search-bar*/
#search-bar{position:relative;width:100%;height: 100px;background:#ffffff;position:fixed;top:-180px;z-index:999999999;}
#search-bar .close-btn{ position:absolute; top:10px; right:10px; }
#search-bar .search-btn{position:absolute;right: 3%;top: -20px;font-size: 31px;color: #B38C90; cursor:pointer; }
#search-bar input[type='text']{border:0;border-bottom:1px solid #CCC;width: 85%;letter-spacing:1px;outline:0;margin: 55px 2% 2px 2%;padding-right:50px;padding-bottom: 5px;box-sizing:border-box;font-size: 20px;}


/*商品選單*/
#header .menu-product{opacity:0;position:absolute;top:225px;max-width: 1400px;width: 100%;height:0;overflow:hidden;margin: 0 auto;background: #4C3434;margin-top: -82px;z-index: 4 !important;box-shadow:2px 2px 8px rgba(15%,15%,40%,0.2);-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 .menu-product.shows{ opacity:1; height: auto; max-height:540px; }
#header .menu-product .items{ float:left; width:22%; margin:50px 1.5%; cursor:hand; cursor:pointer; }
#header .menu-product .items img{ display:block; }
#header .menu-product .contents{ font-size:24px; letter-spacing:5px; }
#header .menu-product .contents span{ display:block; font-size:14px; letter-spacing:2px; padding:10px 0 50px 0; }
#header .menu-product .items .title{font-size:14px; color:#ffffff; letter-spacing:3px; text-align:center; padding:8px 0;}
#header .menu-product .items .title-en{font-size: 14px;color: #A38E80;letter-spacing:2px;text-align:center;padding: 10px 0 5px 0;}

/*其它選單*/
#header .menu-news{opacity:0;position:absolute;top:225px;max-width: 1400px;width: 100%;height:0;box-sizing:border-box;overflow:hidden;margin: 0 auto;background: #4C3434;margin-top: -82px;z-index: 3 !important;box-shadow:2px 2px 8px rgba(15%,15%,40%,0.2);-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 .menu-news .wrap{ padding:0 100px 30px 100px; }
#header .menu-news .line{width:100%;clear: both;border-bottom: 1px solid #B38C90;}
#header .menu-news.shows{ opacity:1; height: auto; max-height:540px; }
#header .menu-news a{display:block;text-align: center;margin: 25px 0 25px 0;letter-spacing: 5px;float:left;width: 25%;font-size:15px;color:#ffffff;text-decoration:none;}
#header .menu-news a:before{ color:transparent; content:"+"; }
#header .menu-news a:hover::before{ color:#ffffff; }

/*頁尾*/
#footer{ width:100%; /*background:url(../../images/footer-logo.jpg) center center no-repeat;*/ background-color:#232323;  }
#footer .wrap{width:100%;max-width:1400px;overflow:hidden;min-height:200px;margin:0 auto;padding:20px; text-align:right; box-sizing:border-box; }
#footer .wrap .icon a{ color:#ffffff; font-size:35px; }
#footer .wrap .icon a:not(:first-child){ margin-left:10px; }
#footer .wrap .webnav {margin:30px 0 40px 10px;}
#footer .wrap .webnav a{ display:inline-block; color:#ffffff; font-size:14px; line-height:20px; letter-spacing:1px; text-decoration:none; }
#cart{border-left: 1px solid #807D76;padding: 0 0 0 5px;color: #D2CCBF;}

#footer .wrap .webnav a:not(:first-child){ margin-left:20px; }
#footer .wrap .webnav a:hover{ text-decoration:none; }
#footer .wrap .copyright{ color:#787878; letter-spacing:1px; line-height:20px; }
#footer .wrap .copyright:not(:first-child){ margin-left:20px; }
#footer .wrap .copyright a{ color:#787878; text-decoration:underline; }

@media screen and (max-width:1400px) {
	#header ul{top: 55px;}
	#header ul li{margin: 10px 30px 0 25px;}
}
@media screen and (min-width:1001px) {
	#header nav span.form_search_m{ display:none; }
}
@media screen and (max-width:1000px) {
	#wrapper .fix-top{ margin-top:100px;}
	#header{ background-position-y:-50px; height:100px; background:#ffffff; box-shadow:2px 2px 8px rgba(15%,15%,40%,0.1); }
	#header ul{ display:none; }
	#nav-icon1,#nav-icon2,#nav-icon3,#nav-icon4{ display:block; }
	#header .wrap .logo-b{ display:none; }
	#header .wrap .logo-s{ display:block; }	
	#header nav span{ border-left:0; }
	#header nav span.form_search{ display:none; }
	.left-menu, .left-menu2{ display:none; }
	.container .layout-right{ width:100%; }
	#footer{ background-position:center 20px;}
	#footer .wrap{/* padding-top:200px; */text-align:center;}
		
	.none-s{ display:none;}	

}
@media screen and (max-width:480px) {
	#footer .wrap .webnav a{ display:block; margin-left:0 !important; padding:10px 0; }
}

/* ----------------------------------------------------------------------------------------------------------------*/
/* ------------------------------>>> 首頁 <<<----------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

/*最新消息*/
#index-news{ width:100%; overflow:hidden; }
#index-news .items{float:left;width:31%;margin:1%;padding:15px;box-sizing:border-box;border:1px solid #e6e5e5;text-align:center;background: #4C3434;box-shadow: 1px 1px 5px #EBEBEB;}
#index-news .items > .date{color: #B38C90;font-size: 14px;letter-spacing: 1px;padding: 15px 0;}
#index-news .items > .title{color: #ffffff;font-size:16px;letter-spacing: 1px;line-height: 22px;}
#index-news .items > a{display: inline-block;text-decoration:none;margin: 20px 0 5px 0;background: #2E2E2E;font-size: 13px;color: #B38C90;letter-spacing:3px;text-align:center;padding: 10px 15px;transition: all 0.5s ease;}
#index-news .items > a:hover{ background:#1C1C1C; }


/*品牌故事*/
#index-about{width:100%;background:#eee0dd;overflow:hidden;}
#index-about .page-title{
    max-width: 120px;
    margin: 3vw 0px 5vw 0px;
    color: #BD936D;
}
#index-about .page-title{}
#index-about .page-title:before{content: url(../../images/common-title2.png);}
#index-about > .background{position:relative;transition: all 0.5s ease;width: 100%;height: 50vw;min-height: 600px;background: url(../../images/about-bg.jpg) top left no-repeat;background-size: cover;background-position: 100% 100%;}
#index-about > .background:hover{/*transform: scale(1.2);*/
-webkit-transition: all .4s ease;
-moz-transition: all .4s ease;
-o-transition: all .4s ease;
transition: all .4s ease;
-ms-transition: all .4s ease
}
#index-about p{
    padding: 0 10px;
}
#index-about .declare{position:absolute;top: 6vw;left: 55%;width:100%;max-width: 600px;min-height: 600px;font-size: 16px;letter-spacing: 3px;line-height: 28px;text-align: left;padding: 0px 50px;box-sizing:border-box;color: #B8ABA3;/* background:#ffffff; *//* box-shadow: 1px 1px 1px #EBEBEB; */}
#index-about .declare .about-pager{
    display: flex;
    align-items:center;
    justify-content: flex-end;
}
#index-about .declare .about-pager .circle2{
    margin: 30px 0;
}
#index-about .page-title span{ color:#B38C90; }

/*商品介紹*/
#index-product{ width:100%; overflow:hidden; }
#index-product .items{float:left;width: 23%;margin: 50px 1%;text-align: center; }
#index-product .items img{ display:block; }
#index-product .contents{ font-size:24px; letter-spacing:5px; }
#index-product .contents span{ display:block; font-size:14px; letter-spacing:2px; padding:10px 0 50px 0; }
#index-product .items .title{display: inline-block;margin: 30px 0 5px 0;background: #4C3434;font-size:14px;color: #ffffff;letter-spacing:3px;text-align:center;padding: 12px 18px;}
#index-product .items .title-en{font-size: 13px;color: #A0A19A;/* font-weight: bold; */letter-spacing:2px;text-align:center;padding: 5px 0;}

/*服務評價*/
#index-evaluate{position:relative;width:100%;transition: all 0.5s ease;background: url(../../images/evaluate-bg.jpg) top center no-repeat fixed;background-size:cover;}
#index-evaluate .mask{ position:absolute; bottom:0; left:0; }
#index-evaluate .wrap{width:100%;max-width:1200px;overflow:hidden;min-height:900px;margin:0 auto;padding: 0px 20px 100px 20px;box-sizing:border-box;}
#index-evaluate .wrap .items{width:100%;overflow:hidden;background:#ffffff;box-shadow: 1px 0px 1px #ebebeb;display: flex;}
#index-evaluate .wrap .items > .left{position: relative;float:left;width: 35%;background:url(../../images/evaluate-bird.jpg) no-repeat;background-position: center 70%;color: #B8ABA3;font-size:15px;min-height: 600px;padding: 20px 25px;box-sizing:border-box;flex: 1;}
#index-evaluate .wrap .items > .left .slogan{position:absolute;bottom: 0px;left: 0;width: 100%;padding: 0 20px;box-sizing: border-box;}
#index-evaluate .wrap .items > .left img{ padding-bottom:30px; }
#index-evaluate .wrap .items > .left p{line-height: 20px;letter-spacing:3px;font-weight:bold;}
#index-evaluate .wrap .items > .right{float:left;width: 63%;background:#ffffff;padding:20px 50px;box-sizing:border-box;}
#index-evaluate .wrap .items > .right .td-left{ width:100px; border-bottom:1px solid #f5f5f5; text-align:center; }
#index-evaluate .wrap .items > .right .td-right{ border-bottom:1px solid #f5f5f5; }
#index-evaluate .wrap .items > .right .td-right a{ color:#6ca6cb; text-decoration:none; }
#index-evaluate .wrap .items > .right .td-right div{ line-height:20px; font-weight:bold; letter-spacing:1px; }
#index-evaluate .wrap .items > .right .td-right .name{ font-size:14px; color:#375396; }
#index-evaluate .wrap .items > .right .td-right .content{ font-size:13px; color:#2a2a2c; }
#index-evaluate .wrap .items > .right .td-right .date{ color:#808487; }


/*聯絡我們*/
#index-contact .goolgemap{ border:0; box-shadow:2px 2px 8px rgba(15%,15%,40%,0.1); }
#index-contact .td-left{ width:50%; padding:30px 30px; box-sizing:border-box;}
#index-contact .td-right{ width:50%; padding:30px 30px; box-sizing:border-box; vertical-align:bottom; }
#index-contact .td-right .solgan{padding:50px 0;font-size:18px;color: #804647;font-weight: bold;letter-spacing:5px;}
#index-contact .td-right #css_table{ width:auto !important}
#index-contact .td-right #css_table .css_td{ display:table-cell; padding:15px 3px; box-sizing:border-box; line-height:20px; }
#index-contact .contact-service{ width:100%; overflow:hidden; text-align:center; padding:30px 0; border-bottom:1px solid #b7b7b7; }
#index-contact .contact-service span{ display:inline-block; margin:20px 3%; line-height:30px; letter-spacing:3px; font-weight:bold; font-size:14px; cursor:hand; cursor:pointer; }


/*聯絡我們表單*/
.contact_form{ width:100%; max-width:1000px; margin:10px auto; overflow:hidden; padding:0 20px; box-sizing:border-box; }
.contact_form .form_left{ float:left; width:50%; box-sizing:border-box; }
.contact_form .form_right{ float:right; width:50%; padding-left:20px; box-sizing:border-box; }
.contact_form input[type='text']{width:100%;border:0;padding:10px 8px 10px 100px;box-sizing:border-box;letter-spacing:1px;border:1px solid transparent;color: #4C3434;font-size: 14px;margin:8px 0;outline:0;}
.contact_form select{width:100%;border:0;padding:10px 8px 10px 8px;box-sizing:border-box;letter-spacing:1px;border:1px solid transparent;color:#333333;font-size: 14px;margin:8px 0;outline:0;}
.contact_form textarea{ width:100%; border:0; height:200px; padding:40px 8px 10px 15px; box-sizing:border-box; letter-spacing:1px; border:1px solid transparent; color:#333333; font-size:16px; margin:8px 0; outline:0; }
.contact_form input[type='text']:hover ,.contact_form textarea:hover { border:1px solid #c28a7e; transition: all 0.3s ease; }

.contact_form .frame{ position:relative; }
.contact_form .frame:hover span{ font-weight:bold; color:#984634; }
.contact_form .frame span{position:absolute;top: 20px;left: 10px;font-size: 14px;letter-spacing: 1px;color: #4C3434;}
.contact_form .frame .image{ display:inline-block; cursor:pointer; position:absolute;top: 17px;right: 15px; color:#817272; font-size:14px; text-decoration:none; letter-spacing:2px; }



@media screen and (max-width:1600px) {
	#index-about > .background{background-position: 100% 50%;}
}
@media screen and (max-width:1300px) {
	#index-about .declare{right:5%; left:inherit;}
}
@media screen and (max-width: 600px) {
	#index-about .declare{ right:0; left:0; margin-left:auto; margin-right:auto; }
}
@media screen and (max-width:900px) {
	#index-product .contents img{ display:none; }	
	#index-evaluate .wrap .items > .left{ width:40%;}	
	#index-evaluate .wrap .items > .right{ width:60%; padding:20px 20px; }
	#index-contact .td-right{ vertical-align:top; }
	#index-contact .td-right .solgan{ padding:0 0 20px 0; }
	#index-contact #css_table .css_tr{display:inherit;width: 100%;}
	#index-contact #css_table .css_td{display:inherit;}
	#index-contact .td-left{ width:100%; }
	#index-contact .td-right{ width:100%; }

}
@media screen and (max-width:800px) {
	#index-news .items{ width: 46%;margin: 20px 2%; }
	#index-product .items{ width: 46%;margin: 20px 2%; }
	#index-evaluate .wrap .items{ display:inherit; }		
	#index-evaluate .wrap .items > .left{position: relative;float:none;width: 100%;text-align: center;padding: 20px 15px;}	
	#index-evaluate .wrap .items > .right{width: 100%;}		
	.contact_form .verify{ width:100% !important; }
	
}
@media screen and (max-width:480px) {
	#index-news .items{ width: 94%;margin: 20px 3%; }	
	#index-product .items{ width: 94%;margin: 20px 3%; }
	#index-about .declare{ padding:0px 20px; }	
	#index-about .declare .about-pager{justify-content:center;}
	.contact_form .form_left{ float:none; width:100%; padding-right:0; }
	.contact_form .form_right{ float:none; width:100%; padding-left:0; }
	#index-contact #css_table .css_td{ padding:10px 25px; }		
}

/* ----------------------------------------------------------------------------------------------------------------*/
/* ------------------------------>>> 品牌故事 <<<----------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

.story-area{text-align:center; display:inline-block; font-size:14px; font-weight:bold; line-height:50px; }
.sotry-width-fix{ padding-right:20% !important; }

@media screen and (max-width:1000px) {
	.sotry-width-fix{ padding-right:0% !important; }
}

/* ----------------------------------------------------------------------------------------------------------------*/
/* ------------------------------>>> 最新消息 <<<----------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

#news-detail .share{ width:100%; text-align:right; padding:0 10px 15px 10px; box-sizing:border-box; }
#news-detail .date{ font-size:16px; color:#bc8e8e; margin:10px 0; letter-spacing:2px; text-align:center; }
#news-detail .title{ font-size:24px; color:#000000; margin:30px 0 50px 0; letter-spacing:2px; text-align:center; }


/* ----------------------------------------------------------------------------------------------------------------*/
/* ------------------------------>>> 商品列表 <<<----------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/


/*最新消息*/
#product-list{ width:100%; overflow:hidden; }
#product-list .items{display: inline-block;vertical-align: top;width: 31%;margin:1%;box-sizing:border-box;text-align:center;/* background:#ffffff; */}
#product-list .items > .title{display:block;color: #333333;font-size:16px;letter-spacing: 1px;line-height: 22px;padding:20px 0;text-decoration:none;}
#product-list .contents{ display:block;font-size: 16px;letter-spacing: 3px;margin:40px 0; }
#product-list .contents2{position:absolute;top:0;right:0;padding: 7px 20px;font-size: 15px;color:#ffffff;background:#000;}
.product-detail-title{color: #804647;font-size:18px;border-bottom: 1px solid #bc8e8e;margin:30px 0;padding: 0 10px 10px 10px;}

/*客製化商品編輯器自訂*/
/*
.intro-area .caption span:before{content:url(../../images/line.jpg);position:absolute;top: -30%;left: 3vw;}
*/

/*其它商品推薦*/
.owl-carousel .item{ text-align:center; }
.owl-carousel .item img{}
.owl-carousel .item .types{
    color: #323433;
    font-weight: bold;
    font-size: 20px;
    margin: 5px 0 0 0;
    line-height: 25px;
}
.owl-carousel .item .title{
    color: #8b8c87;
    font-size: 16px;
    text-decoration:underline;
    margin: 5px 0 15px 0;
    line-height: 22px;
}
.owl-carousel .item .price{
    color: #323433;
    font-weight: bold;
    font-size: 20px;
}
.owl-carousel .item .price span{font-size: 15px; padding-right:5px; }

/*owl*/
.owl-left{ position:relative; cursor:hand;cursor:pointer; margin-top:-5%; display:flex;align-items:center;justify-content: center;width: 5%; float:left;}
.owl-center{width: 90%;float:left;}
.owl-right{ position:relative; cursor:hand;cursor:pointer; margin-top:-5%; display:flex;align-items:center;justify-content: center;width: 5%; text-align: right;float:left;}

#owl-photography .item{margin:0;padding:10px 0;/*height:140px;*//*overflow:hidden;*//* display:flex; *//* align-items:center; *//* justify-content: center; */width:98%;/* background:#ffffff; */}
#owl-photography .item img{ width:100%; /*margin:5px; box-shadow:2px 2px 8px rgba(15%,15%,40%,0.1);*/  }


@media screen and (max-width:1400px) {
	/*客製化商品編輯器自訂*/
	.product-content2 .lefter{flex:100% !important;}
	.product-content2 .righter{display:block !important;}
	.product-content3{ display:block !important; }
}
@media screen and (max-width:1000px) {
	.intro-area .caption span:before{ content:""; }
}
@media screen and (max-width:800px) {
	#product-list .items{width: 46%;margin: 20px 1.5%;}	
}
@media screen and (max-width:480px) {
	#product-list .items{ width: 94%;margin: 20px 3%; }	
}

/* ----------------------------------------------------------------------------------------------------------------*/
/* ------------------------------>>> 商品詳細內頁 <<<----------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/


#product_detail{width:100%;overflow:hidden;margin:0;background:#faf6f5;display: flex;align-items:center;/* justify-content: center; */}
#product_detail .left{ float:left; width:50%; text-align:center; font-size:20vw; color:#e1e1e1; letter-spacing:2px;}
#product_detail .right{float:left;width:50%;box-sizing:border-box;letter-spacing: 2px;padding:40px 10%;}
#product_detail .right > .title{font-size:24px;color: #333333;}
#product_detail .right .number{color: #333333;padding: 20px 0 30px 0;}
#product_detail .right .number span{ margin-left:5px; }
#product_detail .right .price{color: #804647;font-size:14px;padding:0 0 50px 0;}
#product_detail .right .price span{font-size:24px;color: #804647;padding-right:10px;}
#product_detail .right #css_table .css_td{letter-spacing:1px;line-height:20px;padding: 0 0 15px 0;}
#product_detail .right #css_table .title{ width:90px; vertical-align:top; }
#product_detail .right #css_table .title span{ display:inline-block; width:75px; border-right:1px solid #804647; text-align:justify; }

#product_detail .right .btn-cart .massOrder{border: 1px solid #804647;background: #804647;color: #ffffff;font-weight:normal !important;padding: 7px 10px;cursor:hand;cursor:pointer;}

@media screen and (max-width:1400px) {
	#product_detail .right{ padding:40px 40px 0 40px; }
}
@media screen and (max-width:1000px) {
	#product_detail{ display:inherit; }
	#product_detail .left{width: 70%;float:none;margin: 30px auto;}
	#product_detail .right{width: 70%;float:none;margin: 0 auto;}
}
@media screen and (max-width:650px) {
	#product_detail .left{width: 90%;}
	#product_detail .right{width: 90%; padding:40px 0px 0 0px; }
}

/* ----------------------------------------------------------------------------------------------------------------*/

/* ------------------------------>>> 商品自由配 <<<----------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

.product_freedom{ padding:20px; box-sizing:border-box; line-height:25px; font-size:20px; color:#be9191; letter-spacing:1px; }
#freedom_title{ width:100%; padding:15px 20px; margin:20px 0; box-sizing:border-box; background:#faf6f5; }
#freedom_title span{ color:#974e4e; font-size:30px; }

#freedom_title #css_table .css_td{ color:#000000; font-size:18px; letter-spacing:2px;}
#freedom_title #css_table .css_td:not(:first-child){ text-align:right;}

.pFree-order{width:100%;overflow:hidden;padding:15px 10px;font-size:15px;letter-spacing:1px;box-sizing:border-box;background:#faf6f5;display: flex;align-items: center;justify-content: center;/}
#product_freedom .checkbox{zoom:150%; vertical-align:middle;}
#product_freedom .price{ color:#FF6299; font-weight:bold; font-size:20px;}

@media screen and (max-width:650px) {
	#freedom_title #css_table .css_td{ display:block; }	
	#freedom_title #css_table .css_td:not(:first-child){text-align:left;padding: 20px 0px;}
	#freedom_title span{ font-size:20px; }
}

/* ----------------------------------------------------------------------------------------------------------------*/
/* ------------------------------>>> 購物車 <<<----------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/


#mySidenav .cart-container{padding: 0;box-sizing:border-box;}
#mySidenav .cart-container .title{width:100%;font-size:14px;color: #333333;padding: 8px 0 10px 20px;letter-spacing:1px;line-height:20px;}
#mySidenav .cart-container .title-en{width:100%;font-size:14px;color: #8b8c87;padding: 8px 0 20px 20px;letter-spacing:1px;border-bottom: 1px solid #b19190;}
#mySidenav .cart-container .left{float:left;width: 45%;}
#mySidenav .cart-container .left .product-img{width: 97%;overflow:hidden;border:1px solid #cccccc;box-shadow: 1px 1px 5px #cccccc;margin-right: 3%;}
#mySidenav .cart-container .left .product-img img{ display:block; }
#mySidenav .cart-container .right{float:left;width: 55%;padding:0 8px;box-sizing:border-box;}

#mySidenav .cart-container .right .btn-cart{ width:100%; overflow:hidden; max-width:135px; margin:25px 0 20px 0 }
#mySidenav .cart-container .right .btn-cart span{border: 1px solid #804647;background: #804647;color: #ffffff;font-weight:bold;padding: 8px 10px;cursor:hand;cursor:pointer;}
#mySidenav .cart-container .right .btn-cart .jq_increase{ padding: 8px 10px; }
#mySidenav .cart-container .right .btn-cart span:hover{ background:#804647; -webkit-transition:.6s;-ms-transition:.6s;-moz-transition:.6s; }
#mySidenav .cart-container .right input{border: 1px solid #dbdbdb;outline:0;width: 60px;height: 27px;text-align:center;font-size:18px;color: #000000;background: #ffffff;-webkit-border-radius: 0px;-moz-border-radius: 0px;border-radius: 0px;}
#mySidenav .cart-container .right .subtotal {color: #804647;font-size:16px;letter-spacing:1px;}

#my-cart{width:100%;overflow:auto;padding-left: 10px;padding-right: 15px;box-sizing: border-box;}
.cart-item{width:100%;overflow:hidden;padding:20px 0 35px 0;border-bottom: 1px solid #b19190;}
.cart-btn{position:absoulte;bottom:0;right:0;background: #3e2e2e;color: #c5beb3;letter-spacing: 5px;font-size: 16px;width:100%;padding: 26px 0;text-align:center;cursor:hsnd;cursor:pointer;}
.cart-btn:hover{background: #4E3F3F;
-webkit-transition: all .4s ease;
-moz-transition: all .4s ease;
-o-transition: all .4s ease;
transition: all .4s ease;
-ms-transition: all .4s ease
}


/* ----------------------------------------------------------------------------------------------------------------*/
/* ------------------------------>>> 會員修改資料 <<<----------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

.member-title{ color:#974e4e; font-size:24px; letter-spacing:3px; padding:30px 0; }

#member-info{ width:100%; padding:40px 0; box-sizing:border-box; overflow:hidden; }
#member-info #css_table .css_td:first-child{ width:130px; }
#member-info #css_table .css_td{ vertical-align:top; padding:10px 0; }
#member-info #css_table .css_td p{ font-size:14px; color:#a85841; line-height:22px; }

#member-edit .frame{ position:relative; }
#member-edit .frame:hover span{ font-weight:bold; color:#bc8e8e; }
#member-edit .frame > span{position:absolute;top: 20px;left: 15px;font-size: 14px;letter-spacing: 3px;}
#member-edit .frame input[type='text']{ width:100%; border:0; padding:10px 8px 10px 100px; box-sizing:border-box; letter-spacing:1px; border:1px solid #dbdbdb; color:#333333; font-size:16px; margin:8px 0; outline:0; }
#member-edit .frame input[type='text']:hover { border:1px solid #bc8e8e; transition: all 0.3s ease; }
#member-edit .frame input[type='file']{ width:100%; border:0; background:#ffffff; padding:10px 8px 10px 100px; box-sizing:border-box; letter-spacing:1px; border:1px solid #dbdbdb; color:#333333; font-size:12px; margin:8px 0; outline:0; font-family:"微軟正黑體"; }
#member-edit .frame input[type='file']:hover { border:1px solid #bc8e8e; transition: all 0.3s ease; }
#member-edit .frame .text{width:100%;border:0;padding: 18px 8px 15px 100px;box-sizing:border-box;letter-spacing:1px;/* border:1px solid #dbdbdb; */color:#333333;font-size:16px;margin: 8px 0;outline:0;word-break: break-all;}
#member-edit .frame .content{width:100%;border:0; padding:5px 8px 5px 0px; box-sizing:border-box;letter-spacing:1px;/* border:1px solid #dbdbdb; */color:#333333;font-size:16px;margin: 8px 0;outline:0;word-break: break-all;}
#member-edit .frame select{ width:100%; max-width:170px; border:1px solid #dbdbdb; color:#333333; font-size:14px; padding:10px 8px 10px 8px; outline:0; margin-right:5px; margin-bottom:10px; }
#member-edit .frame .tips{ color:#b55050; font-size:12px; text-align:right; }

#member-edit > #css_table .css_td{padding:0 5% 0 0;box-sizing:border-box;width: 50%;vertical-align: top; }
#member-edit > #css_table .three_col{width: 33.333% !important; }
#member-edit > #css_table .three_col input[type="text"]{ margin:0; padding-left:8px; }

#member-edit .total{ padding:20px 0; color:#121212; font-size:14px; letter-spacing:1px; text-align:right; }
#member-edit .total span{ color:#bc8e8e; margin-right:15px; }

@media screen and (max-width:768px) {
	#member-info{ width:100%; }
	#member-edit > #css_table .css_td{ display:block; }
	#member-edit > #css_table .css_td{ width:100%; }
}
@media screen and (max-width:768px) {
	#member-info #css_table #css_table .css_td{ display:block; }
	#member-edit > #css_table .three_col{ width:100% !important; }
}

/* ----------------------------------------------------------------------------------------------------------------*/
/* ------------------------------>>> 會員訂單 <<<----------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

.p-img-frame{ display:inline-block; width:105px; border:1px solid #CCCCCC; box-shadow: 1px 1px 5px #CCCCCC; vertical-align:middle; margin:0 5px 0 0; }
.p-img-frame img{ width:100%; display:block; }
.calculate-item1{ width:100%;background:#f6f0ee; line-height:20px; padding:20px 40px; margin:0 0 5px 0; text-align:right; box-sizing:border-box; color:#121212; font-size:14px; letter-spacing:2px; }

.calculate-item1 #css_table .css_td{ line-height:25px; }
.calculate-item1 #css_table .css_td label{ padding:0 0 0 10px; }
.calculate-item1 #css_table .css_td .span{display:inline-block;padding:5px 15px;color:#ffffff;background: #4c3434;letter-spacing:1px;}
.calculate-item1 #css_table .td1{width:100px;}
.calculate-item1 #css_table .td2{width:300px; vertical-align:top; }
.calculate-item1 #css_table .td3{width:150px; vertical-align:top; }
.calculate-item1 #css_table .td4{ text-align:right; }

.calculate-item1 > span{display:inline-block;width:120px;line-height: 25px;text-align:right;}
.calculate-item2{width:100%;background: #ada59f;padding:20px 40px;margin:0 0 5px 0;color:#ffffff;font-weight:bold;text-align:right;box-sizing:border-box;font-size:14px;letter-spacing:2px;}
.calculate-item2 span{ display:inline-block; width:120px; text-align:right; color:#ffffff; font-weight:bold; }
.calculate-item2 i{ font-style:normal; }

@media screen and (max-width:1000px) {
	.calculate-item1 #css_table .css_td{ display:block; }
}
@media screen and (max-width:768px) {
	.calculate-item1 > span{ display:block; width:inherit; }
	.calculate-item1 #css_table .td1,
	.calculate-item1 #css_table .td2,

	.calculate-item1 #css_table .td3{ width:inherit; }
}




/* ----------------------------------------------------------------------------------------------------------------*/
/* ------------------------------>>> 會員購物車 <<<----------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/


.cart-table td i{color: #B38C90;font-size:16px;}
.cart-table #css_table{ width:inherit; }
.cart-table #css_table .css_td span{ display:block; color:#974e4e; font-size:14px; line-height:23px; margin:10px 0; }

.cart-buy-table{}
.cart-buy-table .require{ color:#c41919; padding:0 5px; }
.cart-buy-table #css_table{ width:100%; max-width:800px; }
.cart-buy-table #css_table .td1{ width:100px; }
.cart-buy-table #css_table .td2{ max-width:470px; }
.cart-buy-table input[type='text'], .cart-buy-table select{ width:100%; font-size:15px; background:#ffffff; border:1px solid #d7d7d7; padding:5px 10px; box-sizing:border-box; outline:0; }
.cart-buy-table textarea{ font-size:15px; width:100%; height:100px; background:#ffffff; border:1px solid #d7d7d7; padding:5px 10px; box-sizing:border-box; outline:0; }
.cart-buy-table input[type='text']:focus,.cart-buy-table select:focus, .cart-buy-table textarea:focus{ border:1px solid #c28a7e;
-webkit-transition: all .4s ease;
-moz-transition: all .4s ease;
-o-transition: all .4s ease;
transition: all .4s ease;
-ms-transition: all .4s ease
}

.cart-buy-table .sameOrder{ width:100%; overflow:hidden; padding:10px; margin:0 0 20px 0; background:#f2dada; box-sizing:border-box; }
.cart-buy-table i{ font-size:20px; color:#bc8e8e; cursor:hand; cursor:pointer; padding:0 5px; }

@media screen and (max-width:768px) {
	.cart-buy-table #css_table .css_td{ display:block; }
	.cart-buy-table #css_table .css_td #css_table .css_td{padding: 5px 0;}
	.cart-buy-table #css_table .td1{ font-weight:bold; color:#974e4e; }

}
@media screen and (max-width:600px) {
	
}


/* ----------------------------------------------------------------------------------------------------------------*/
/* ------------------------------>>> 會員購買成功 <<<----------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

/*上方流程圖*/
.checkout-flow{ position:relative; padding:150px 0 100px 0; text-align:center; }
.checkout-flow .word{ position:relative; width:100%; height:100px; overflow:hidden; max-width:870px; margin:0 auto; }
.checkout-flow .word div{ color:#676666; font-size:16px; letter-spacing:1px; padding:20px 0; }
.checkout-flow .word div span{ color:#bc8e8e; font-size:30px; }
.checkout-flow .flow1{ position:absolute; left:0;  }
.checkout-flow .flow2{ position:absolute; left:0; right:0; margin-left:auto; margin-right:auto; }
.checkout-flow .flow3{ position:absolute; right:0; }
.checkout-flow .bg1{ width:100%; max-width:784px; margin:0 auto; background:url(../../images/cart-step1.png) no-repeat; height:57px; }
.checkout-flow .bg2{ width:100%; max-width:784px; margin:0 auto; background:url(../../images/cart-step2.png) no-repeat; height:57px; }
.checkout-flow .bg3{ width:100%; max-width:784px; margin:0 auto; background:url(../../images/cart-step3.png) no-repeat; height:57px; }
.checkout-title{color:#974e4e;padding: 0 0 0 10px;box-sizing: border-box;font-size:24px;}

/*購買成功*/
.success-table .css_td{ width:50%; }
.success-table .left{ text-align:center; color:#974e4e; font-size:18px; text-align:center; letter-spacing:2px; }
.success-table .left span{ display:block; padding:20px 0; }
.success-table .left img{ margin-bottom:50px; }
.success-table .right{ vertical-align:top; }
.success-table .right div{ padding-left:10px !important; padding-right:10px !important; box-sizing:border-box; }
.success-table .right .title{
    color: #974e4e;
    font-size: 22px;

    padding: 20px 0;
    letter-spacing: 2px;
}
.success-table .right .title i{
    padding-right: 10px;
    font-size: 40px;
    vertical-align: middle;
}

.success-table .right .info{
    padding: 30px 0 40px 0;
    line-height: 30px;
    font-size: 16px;
    font-weight: bold;
}

.success-table .right .content{
    line-height: 30px;
}


@media screen and (max-width:1000px) {
	.checkout-flow{ padding:50px 0 20px 0; }
	.checkout-flow .none{ display:none; }
	.checkout-flow .show{ left:0; right:0; margin-left:auto; margin-right:auto; }	
	.checkout-flow .posi1{  max-width:56px; background-position:left; }
	.checkout-flow .posi2{  max-width:56px; background-position:50.5%; }	
	.checkout-flow .posi3{  max-width:56px; background-position:right; }
}
@media screen and (max-width:768px) {
	.success-table .css_td{ display:inherit; }
	.success-table .right div{ text-align:center; }
}

/* ----------------------------------------------------------------------------------------------------------------*/
/* ------------------------------>>> 選單 <<<----------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

#ajax-sidenav div{position:relative;width: 100%;border-bottom: 1px solid #ebebeb;color:#181818;padding: 15px 20px; line-height:20px; box-sizing:border-box;cursor: pointer;cursor: hand;font-size: 16px;letter-spacing: 3px;}
#ajax-sidenav div:hover{ color:#736357;}
#ajax-sidenav div span{position:absolute;right:0;top: 0;display:block;padding: 15px 20px;border-left: 1px solid #ebebeb;/* border-right: 1px solid #ebebeb; */}

.submenu-nav { width: 100%; overflow:hidden; display:none; background-color: #FFFFFF; }
.submenu-nav div{ padding:20px 20px !important; }

/* ----------------------------------------------------------------------------------------------------------------*/
/* ------------------------------>>> Swiper Slider <<<----------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/


.swiper-container {
	margin-top:140px;
	width: 100%;
	height: 800px;
	margin-left: auto;
	margin-right: auto;
}
.swiper-slide {
	text-align: center;
	font-size: 18px;

	background: #fff;
	background-size:cover;
	/* Center slide text vertically */
	display: -webkit-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	-webkit-justify-content: center;
	justify-content: center;

	-webkit-box-align: center;
	-ms-flex-align: center;
	-webkit-align-items: center;
	align-items: center;

}
.swiper-mask{ position:absolute; left:0; bottom:-2px; z-index:2; }

@media screen and (max-width:1000px) {
	.swiper-container { margin-top:100px; height:600px; }	
}
@media screen and (max-width:600px) {
	.swiper-container { height:300px; }	
}


/* ----------------------------------------------------------------------------------------------------------------*/
/* ------------------------------>>> 表格 <<<----------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

/*列表頁*/
.zebra td, 
.zebra th {
  padding: 20px;
  font-size: 14px;

  color: #121212;
  text-align: center;
  letter-spacing: 1px;
  /*border-bottom: 1px solid #f2f2f2;*/
}
.zebra a{ color:#a85841; text-decoration:none; }
.zebra a:hover{ text-decoration:underline; }
/*使用:nth-child(even)给表格的奇数行添加背景和阴影效果*/
.zebra .alternate,

.zebra tr:nth-child(odd) {
  background: #f5f5f5;
  box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;
}
.zebra tr:last-child td{ border-bottom:1px solid #c69f9f; }
.zebra th {
  text-align: center;

  font-size: 14px;
  /* text-shadow: 0 1px 0 rgba(255,255,255,.5); */
  /*border-bottom: 1px solid #ccc;*/  
  font-weight:normal;
  color: #974e4e;

  background:#f6f0ee;
  }
/*使用 :first-child设置表格表头第一个单元格左上角为圆角*/
.zebra th:first-child {
  border-radius: 6px 0 0 0;

}
/*使用 :last-child设置表格表头最后一个单元格右上角为圆角*/
.zebra th:last-child {
  border-radius: 0 6px 0 0;

}

/*詳細內頁*/
.zebra2 td, 
.zebra2 th {
  padding: 20px;
  box-sizing:border-box;
  font-size: 14px;
  color: #121212;
  text-align: left;
  letter-spacing: 1px;
  /*border-bottom: 1px solid #f2f2f2;*/
}
.zebra2 td:first-child{ width:150px; }
.zebra2 a{ color:#a85841; text-decoration:none; }
.zebra2 a:hover{ text-decoration:underline; }
.zebra2 p{ font-weight:bold; color:#945b5b; }
/*使用:nth-child(even)给表格的奇数行添加背景和阴影效果*/
.zebra2 .alternate,
.zebra2 tr:not(:last-child) td{ border-bottom:1px dashed #bdbdbd; }
.zebra2 tr:last-child td{border-bottom: 1px solid #B38C90;}
.zebra2 th {
  text-align: left;


  font-size: 14px;
  /* text-shadow: 0 1px 0 rgba(255,255,255,.5); */
  /*border-bottom: 1px solid #ccc;*/
  font-weight:normal;
  color: #974e4e;
  background:#f6f0ee;
  }
/*使用 :first-child设置表格表头第一个单元格左上角为圆角*/
.zebra2 th:first-child {
  border-radius: 0px 0 0 0;
}
/*使用 :last-child设置表格表头最后一个单元格右上角为圆角*/
.zebra2 th:last-child {
  /* border-radius: 0 6px 0 0; */
  font-weight: bold;
  letter-spacing: 3px;
  font-size: 16px;
}

/*收件資訊*/
.zebra3 td, 
.zebra3 th {
  padding: 20px;
  box-sizing:border-box;
  font-size: 14px;
  color: #121212;
  text-align: left;
  letter-spacing: 1px;
  /*border-bottom: 1px solid #f2f2f2;*/
}
.zebra3 td{ background:#f6f0ee; }
.zebra3 td:first-child{width:200px;border-right: 1px solid #bdbdbd;}
.zebra3 a{ color:#a85841; text-decoration:none; }
.zebra3 a:hover{ text-decoration:underline; }
.zebra3 p{ font-weight:bold; color:#945b5b; line-height:28px; letter-spacing:1px; }
/*使用:nth-child(even)给表格的奇数行添加背景和阴影效果*/
.zebra3 .alternate,
.zebra3 tr:not(:last-child) td{ border-bottom:1px solid #bdbdbd; }
.zebra3 tr:last-child td{ /*border-bottom:1px solid #c69f9f;*/ }
.zebra3 th {
  text-align: left;
  font-size: 14px;
  /* text-shadow: 0 1px 0 rgba(255,255,255,.5); */
  /*border-bottom: 1px solid #ccc;*/
  font-weight:normal;
  color: #ffffff;
  background: #ada59f;
  }
/*使用 :first-child设置表格表头第一个单元格左上角为圆角*/
.zebra3 th:first-child {
  /*border-radius: 6px 0 0 0;*/
}
/*使用 :last-child设置表格表头最后一个单元格右上角为圆角*/
.zebra3 th:last-child {
  /* border-radius: 0 6px 0 0; */
  font-weight: bold;
  letter-spacing: 3px;
  font-size: 16px;
}

.rowBG tr:nth-child(odd) {
  background: #f5f5f5;
  box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;
}


@media screen and (max-width : 1024px) {
	.visible-no-b{ display:none; }	
}
@media screen and (max-width : 768px) {
	.visible-no-m{ display:none; }
	.zebra2 td:first-child{ width:100px }
	.zebra3 td{ padding:10px; }
	.zebra3 td:first-child{ width:130px; padding:10px; }
}
@media screen and (max-width : 480px) {
	.zebra2 td, .zebra2 th{ padding:20px 5px;}
	.visible-no-s{ display:none; }
}


/* ----------------------------------------------------------------------------------------------------------------*/
/* ------------------------------>>> 動畫效果 <<<----------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

/*------Zoom--------*/

.scaleZoom {
	-webkit-animation: scaleZoom 2s ease both;
	animation: scaleZoom 2s ease both;
}
@-webkit-keyframes scaleZoom {
	from { opacity: 0; -webkit-transform: scale(1.2); }
}
@keyframes scaleZoom {
	from { opacity: 0; -webkit-transform: scale(1.2); transform: scale(1.2); }
}

/*------區塊跳動效果--------*/
.swiper-scroll{ z-index:999999; }
.swiper-scroll a.scrollDown{
	display:block;
	color:#000;
	text-align:center;
	position:absolute;
	left: 0; 
	right: 0; 
	margin-left: auto; 
	margin-right: auto; 
	margin-bottom:  3%;
	z-index:999;
	}

.swiper-scroll 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;
}

/*------背景圖Zoom In--------*/
@keyframes animateBg{
    from { background-size: 130%; }
    to { background-size: 100%; }
}

/*------上至下效果--------*/
@keyframes dropHeader {
  from {

    transform: translateY(0%);
  }
  to {
    transform: translateY(-10%);
  }
}


/*------image zoom--------*/
.photo-zoom {
  position: relative;
  overflow: hidden;
  width: 100%;
}
.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:15px; box-sizing:border-box; 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; }


/*------image mask2--------*/
.photo-mask2{opacity:1;position:absolute;left:0;bottom:0;color:#000000;width:100%;height:100%;background-color:rgba(255, 255, 255, 0.6);letter-spacing:3px;text-align:center; box-sizing:border-box; line-height:22px;-webkit-transition:.2s;-ms-transition:.2s;-moz-transition:.2s;}
.photo-mask-content2{ position:relative; width:100%; height:100%; }
.gallery:hover .photo-mask2{ 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;
}

/*------Circle Rotate--------*/
.circle {
  display:block;
  width: 100px;
  height: 100px;
  margin-left: 13px;
  position: relative;
  text-align: center;
  margin: 0 auto;
}
.circle .border {
  /* content: ''; */
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: transparent;
  border-radius: 50%;
  border: 2px dashed #ffffff;
  -webkit-animation-name: Rotate;
  -webkit-animation-duration: 6s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  -moz-animation-name: Rotate;
  -moz-animation-duration: 6s;
  -moz-animation-iteration-count: infinite;
  -moz-animation-timing-function: linear;
  -ms-animation-name: Rotate;
  -ms-animation-duration: 6s;
  -ms-animation-iteration-count: infinite;
  -ms-animation-timing-function: linear;
}
.play {
  display:flex;
  align-items:center;
  justify-content: center;

  /*padding: 25px 30px;*/
  padding-top: 30%;
  font-size: 13px;
  letter-spacing: 1px;
  line-height: 20px;
  font-weight: bold;
  text-align:center;
  color: #A0A19A;
}
.play i{ font-size:16px; color:#6a6a6a; }
.stop {
  font-size: 12px;
  padding: 30px;
  text-align: center;
}

.circle2 {
  width: 100px;
  height: 100px;
  margin: 30px auto;
  position: relative;
  cursor:hand;
  cursor:pointer;
}
.circle2 .border {
  /* content: ''; */
  position: absolute;
  top: 0px;
  bottom: 0;
  left: 0px;
  right: 0;
  background: transparent;
  border-radius: 50%;
  border: 2px dotted #A0A19A;
}

.circle2 .border:hover{
  -webkit-animation-name: Rotate;
  -webkit-animation-duration: 10s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  -moz-animation-name: Rotate;
  -moz-animation-duration: 10s;
  -moz-animation-iteration-count: infinite;

  -moz-animation-timing-function: linear;
  -ms-animation-name: Rotate;
  -ms-animation-duration: 10s;
  -ms-animation-iteration-count: infinite;
  -ms-animation-timing-function: linear;	
}


@-webkit-keyframes Rotate {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
  }
}
@-moz-keyframes Rotate {
  from {
    -moz-transform: rotate(0deg);
  }
  to {
    -moz-transform: rotate(360deg);
  }
}
@-ms-keyframes Rotate {
  from {
    -ms-transform: rotate(0deg);
  }
  to {
    -ms-transform: rotate(360deg);
  }
}

/*按鈕背景填滿*/
.trans-btn {
  background: none;
  position: relative;
  transition:color 0.15s ease;
}
.trans-btn::after {
  position: absolute;
  content: '';
  top:0;
  left: 0;
  width: 0;
  height: 100%;
  background-color: #804647;
  transform-origin:left;
  transition:width 0.15s ease;
  z-index:-1;
}

.trans-btn:hover::after {
  width: 100%;
}

@media screen and (max-width:1400px) {
	.circle{ display:none; }
}

/* ----------------------------------------------------------------------------------------------------------------*/
/* ------------------------------>>> Radio/Checkbox <<<----------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

/* Customize the label (the container) */
.container-form {
  display: inline-block;
  /* vertical-align: -28%; */
  position: relative;
  padding-left: 30px;
  margin-left: 10px;
  margin-bottom: 0px;
  cursor: pointer;
  font-size: 16px;
  line-height: 20px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default radio button */
.container-form input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom radio button */
.checkmark {
  position: absolute;
  top: 0px;
  left: 0;
  height: 20px;
  width: 20px;

  background-color: #f9f9f9;
  border: 1px solid #b9b7b7;
  border-radius: 50%;
}

/* On mouse-over, add a grey background color */
.container-form:hover input ~ .checkmark {
  background-color: #ccc;
}

/* When the radio button is checked, add a blue background */
.container-form input:checked ~ .checkmark {
  background-color: #F19B20;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the indicator (dot/circle) when checked */
.container-form input:checked ~ .checkmark:after {
  display: block;
}

/* Style the indicator (dot/circle) */
/*
.container .checkmark:after {
  top: 6px;
  left: 6px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: white;
}
*/
/* Style the checkmark/indicator */
.container-form .checkmark:after {
  left: 6px;
  top: 2px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);

  -ms-transform: rotate(45deg);

  transform: rotate(45deg);
}


@media screen and (max-width : 768px) {
	.container-form { font-size:13px; }
}

/* ----------------------------------------------------------------------------------------------------------------*/
/* ------------------------------>>> Placeholder <<<----------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/


::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  font-family: /*Arial,*/ "文泉驛正黑", "WenQuanYi Zen Hei", "儷黑 Pro", "Microsoft JhengHei", "新細明體", "PMingLiU", sans-serif;
  color: #CCCCCC;
  opacity: 0.8; /* Firefox */
}


:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: #CCCCCC;
}

::-ms-input-placeholder { /* Microsoft Edge */
  color:#CCCCCC;
}

/* ----------------------------------------------------------------------------------------------------------------*/
/* ------------------------------>>> Loadaction <<<----------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

.Loadaction_Box { height: 100%; width: 0%; position: fixed; overflow:auto; top: 0; left: 0; overflow:auto; background-color:rgba(0, 0, 0, 0.5); z-index:100000000 }
.Loadaction {width: 220px;height: 60px;top: 42%; position: fixed; margin-left: auto;margin-right: auto;padding-top: 10px;left: 0;right: 0;background-color:rgba(0, 0, 0, 0.5);-webkit-border-radius: 2px;-moz-border-radius: 2px;border-radius: 2px;}
.Actionupload_Text {font-size:13px;color:#FFFFFF;height: 25px;}


/* ----------------------------------------------------------------------------------------------------------------*/
/* ------------------------------>>> Pager <<<----------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/
.pgis_num{color: #fff;font-family:'Vollkorn',Verdana;font-size:12px;letter-spacing:1px;text-align:center;line-height: 30px;height: 30px;width: 30px;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;background-color: #9B9794;}
.pg_num{color: #fff;font-family:'Vollkorn',Verdana;font-size:12px;letter-spacing:1px;cursor:pointer;text-align:center;line-height: 30px;height: 30px;width: 30px;background-color:#bbb;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;}
.pg_num:hover{background-color:#BC8E8E;transition:1s;}


.cssa { color:#555;font-family:'Vollkorn',Verdana; letter-spacing:1px; font-size:12px; padding-right:2px; padding-left:2px }
.cssb { font-family:'Vollkorn',Verdana; letter-spacing:1px; font-size:12px; padding-right:5px; padding-left:5px }
.cssc { letter-spacing:1px; font-size:15px;height:40px }
.cssd { font-family:'Vollkorn',Verdana; font-size:12px; letter-spacing:2px; height:10px; border:1px solid #FFFFFF }