@charset "utf-8";
@import url("reset.css");
@import url("loading.css");
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@900&display=swap');


/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------------------------------->>> Main <<<------------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; letter-spacing:1px; }
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%; }
.fix-top{ margin-top:95px !important; }

/*fix safari*/
input, select, textarea{ -ms-box-sizing:content-box; -moz-box-sizing:content-box; box-sizing:content-box; -webkit-box-sizing:content-box; }
select{ border-radius: 0; }
input[type='text'],input[type='password'],input[type='button'],input[type='submit'],textarea{  -webkit-appearance: none; border-radius: 0; }

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

/*編輯器*/
.editor{padding: 50px 10px 50px 10px;font-size:16px;line-height:30px;}

/*連結*/
a{color: #333333;text-decoration:none;}
a:hover{ color:#506267; }

.radius{-webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;}

/*表格*/
.css-table { display:table; }
.css-tr {display: table-row;}
.css-td {display: table-cell;text-align:left;vertical-align:middle;padding: 0px 10px;box-sizing:border-box;letter-spacing:1px;font-size: 14px;color:#121212;}

/*全營幕遮罩*/ 
.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:9999; transition: all 0.2s linear; }
.bg-overlay.visible { opacity:1; visibility:visible }

/*麵包屑*/
#sitemap{width:100%;box-sizing: border-box;padding: 30px 15px;}
#sitemap .wrap{width:100%;max-width: 1300px;margin:0 auto;font-size:14px;letter-spacing:1px; color:#727272; line-height:25px; }
#sitemap .wrap a{ color:#757575; text-decoration:underline; }

/*網頁大標題*/
.common-title{text-align: center;font-size: 20px;color: #a3a3a3;/* font-weight:bold; */letter-spacing: 2px;font-weight: bold;line-height: 30px;padding: 0px 10px 0px 10px;margin: 30px 0 50px 0;}
.common-title span{display: block;font-size: 34px;font-weight: bold;padding-bottom: 15px;color: #4d4d4d;letter-spacing: 8px;font-family: 'Noto Sans TC', sans-serif;}
.common-title > .line{background: #9c885e;width: 80px;height: 5px;margin: 15px auto 0 auto;animation:1s ease-in-out 0.8s 1 widthGroup-1;}

/*網頁小標題*/
.common-title2{width:100%;overflow:hidden;border-top: 1px solid #e0e0e0;padding: 40px 10px 0 10px;}
.common-title2 span{color:#9c885e;border-left:3px solid #9c885e;padding: 0 20px 0 20px;font-size: 16px;letter-spacing: 3px;}


/*網站按鈕*/
.webbtn1{display:inline-block;color: #ffffff!important;font-size:15px !important; padding: 10px 40px;text-align: center;margin: 5px 0;line-height: 30px;text-decoration:none;letter-spacing:2px;border: 1px solid #9c885e;background: #9c885e;cursor:hand;cursor:pointer;}
.webbtn1 img{vertical-align:-20%;padding-right: 10px;}
.webbtn1:hover{ background:#8b7546; color:#ffffff !important; border: 1px solid #bc8e8e; -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; }
.webbtn1.incart{ background:#000000 !important; color:#ffffff !important; border: 1px solid #000000; }


.btn1{display: inline-block;color: #9c885e;font-size:14px;width:auto;padding: 15px 50px;text-decoration:none;letter-spacing:2px;cursor:pointer;background: #ffffff;border: 1px solid #9c885e;}
.btn1:hover{ background:#9c885e; color:#ffffff; transition: all 0.3s ease; }

.btn2{display: inline-block; background: #9c885e; color:#ffffff; font-size:14px;width:auto;padding: 15px 50px;text-decoration:none;letter-spacing:2px;cursor:pointer;border: 1px solid #9c885e;}
.btn2:hover{ background:#856a30; color:#ffffff; transition: all 0.3s ease; }

.button1{color:#fff;background: #9c885e;font-size:14px;padding:7px 25px;letter-spacing:1px;cursor:hand;cursor:pointer;}
.button1:hover{ background:#B06F40; -webkit-transition:.6s;-ms-transition:.6s;-moz-transition:.6s; }
.button2{ color:#fff; background:#7f7f7c; font-size:14px; padding:7px 25px; letter-spacing:1px; cursor:hand; cursor:pointer; }
.button2:hover{ background:#999; -webkit-transition:.6s;-ms-transition:.6s;-moz-transition:.6s; }

/*圖片裁切*/
.img-demo {height:315px;overflow:hidden;/*border:1px solid #ccc;*/line-height: 315px;background: #ebebeb;}
.img-demo img{ vertical-align:middle;}


/*youtube*/
.youtube-area {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
}
.youtube-area .video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

@media screen and (max-width: 468px) {
	.common-title{ margin-bottom:20px; }
	.common-title span{ font-size:30px; }
	.none-s{ display:none; }
	
	
}

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

#wrapper{width:100%;overflow:hidden;background: #f6f6f6;}
#header{width:100%;position: fixed;z-index: 9;}
#header.bg{ background:#000000; }
#header .wrap{ display:flex; position:relative; width:100%; max-width:1300px; height:95px; margin:0 auto; color:#ffffff; }
#header .wrap .left{flex: 1;display:flex;align-items:center;}
#header .wrap .right{flex:2;display: flex;align-items:center;}

#header .logo{/*position:absolute;top: 20px;left:10px;*/display:flex;cursor:pointer;color:#ffffff;}
#header .logo img{ padding-right:15px; }
#header .logo div span{font-size: 22.5px;padding-bottom: 7px;margin-bottom: 5px;letter-spacing: 2px;display:block;font-family: 'Noto Sans TC', sans-serif;}
#header .logo > .word{font-size: 17px;display:flex;align-items:center;justify-content: center;}
#header .logo > .word div{font-size: 12px;letter-spacing: 2px;text-transform: uppercase;}
#header .logo > .word div i{ font-style:inherit; }

#menu{width:100%;display:flex;justify-content: space-between; border-bottom:1px solid #808080; }
#menu .menu-nav{display:flex;align-items:center;justify-content: center;}
#menu .menu-nav > div{float:left;color: #ffffff;font-size: 16px;letter-spacing: 3px;text-align: center;padding: 0px 25px; cursor:pointer; border-bottom:2px solid transparent;}
#menu .menu-nav > div span{display:block;font-size: 12px;color: #d7c7a0;padding: 10px 0;}
#menu .menu-nav > div:hover{ border-bottom:2px solid #ffffff;transition: all 0.5s ease; }

#menu nav{ display:flex; align-items:center; justify-content: center; padding-bottom:10px; padding-right:10px; }
#menu nav span{ padding:0 10px; font-size:12px; cursor:pointer; }
#menu nav span i{ font-style:normal; }
#menu nav span img{ vertical-align: -50%; padding-right: 5px; }
#menu nav span:not(:last-child){ color:#f4deaf; }
#menu nav span:last-child{ color:#ffffff; padding:3px 10px; background:#9c885e; -webkit-border-radius: 15px;-moz-border-radius: 15px;border-radius: 15px; cursor:pointer; }

#menu-bar {display: none;color: #ffffff;font-size: 30px;cursor:pointer;position: absolute;top: 30px;right: 14px;}

/*商品子選單*/
#submenu{ display:none; position:fixed; top:75px; left:0; width:100%; margin:0 auto; max-height:90%; overflow:hidden; background-color:rgba(0, 0, 0, 0.9); z-index:999999; }
#submenu .submenu_wrap{ max-width:1300px; overflow:hidden; margin:0 auto; color:#fff; font-size:15px; letter-spacing:1px; padding:50px 20px;  }
#submenu .submenu_item{width: 20%;margin:0 3% 50px 0;overflow:hidden;display: inline-block;vertical-align: top;/* float:left; */text-align:left;}
#submenu .submenu_item .subtitle{border-bottom: 1px solid #cfbc94;margin-bottom:12px;font-size:17px;padding-bottom: 15px;letter-spacing: 3px;color:#cfbc94;text-decoration:none;}
#submenu .submenu_item a{display:block;padding:5px 0;color: #ffffff; line-height:20px; text-decoration:none;letter-spacing: 2px;}
#submenu .submenu_item a:hover{ color:#ffffff; text-decoration:underline; }
#submenu .submenu_wrap .jq-submenu-close{position:absolute; top:20px; right:20px; font-size:25px; cursor:pointer; }
#submenu span{display:inline-block;margin:5px 0;color:#fff;color: #f4dcb6;letter-spacing:2px;font-size: 22px !important;padding: 10px 200px;border:2px solid #978d7d;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;cursor:hand;cursor:pointer;}
#submenu span:hover{ color:#edd6b2; background:#5d5959; -webkit-transition:.6s;-ms-transition:.6s;-moz-transition:.6s; }


/*子選單*/
.sub-menu{width:290px;overflow:hidden;background: #000000; text-align:left; color: #ffffff;border: 1px solid #cccccc;border-top: 0;position:absolute;top: 73px;box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);}
.sub-menu a{
 color: #ffffff!important;
 font-weight:normal !important;
 display:block !important;
 /* border-bottom:1px solid #dedede; */
 margin:15px 15px;
 padding: 10px 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;
 }
.sub-menu a:hover{ color:#c9b27e !important;}


/*內頁banner*/
#banner-box{  width:100%; overflow:hidden; background:#110102; }
#banner-inner{position:relative;height:640px; display:flex;align-items:center;justify-content: center; }
#banner-inner .title{opacity:0;text-align:center;color:#ffffff;font-size: 24px;letter-spacing: 10px;}
#banner-inner .title span{font-size:40px;font-family: 'Lato', sans-serif;display: inline-block;font-weight: bold;margin-bottom: 20px;letter-spacing: 5px;font-family:inherit;}


.container{width:100%;max-width: 1400px;margin: 30px auto 0 auto;overflow: hidden;}

/*左右欄的頁面*/
.container .layout-left{width: 25%;float:left;box-sizing: border-box;padding: 0 30px 0 10px;}
.container .layout-right{width: 73%;float:left;box-sizing: border-box;padding: 0px 10px;}
.container .layout-full{width: 100%;float:left;box-sizing: border-box;padding: 0 10px 0 10px;}

/*左邊選單*/
.layout-left > ul{list-style:none;margin:0;padding:0;border-top: 5px solid #9C885E;border-bottom: 5px solid #9C885E;}
.layout-left > ul > li{width: 100%;font-size:16px;border-bottom: 1px dashed #cccccc;}
.layout-left > ul > li em{ font-style:inherit; width:20px; display:inline-block; }
.layout-left > ul > li > a{position:relative;color:#000000;text-decoration:none;display: block;letter-spacing: 3px;padding: 23px 30px 23px 10px;}
.layout-left > ul > li:hover{ /*background:#bbd2ed; transition: all 0.5s ease;*/ }
.layout-left > ul > li ul{ display:none; height:0; list-style:none; margin:0; padding:0; }
.layout-left > ul > li ul li{width:100%;padding: 20px 0px;font-size:16px;border-top:1px dotted #cccccc;}
.layout-left > ul > li ul li:last-child{ border-bottom:0; }
.layout-left > ul > li ul li:hover{ /*background:#e1ebf2; transition: all 0.5s ease;*/ }
.layout-left > ul > li ul li a{color:#000000;text-decoration:none;display: block;padding: 0px 10px 0 30px;}
.layout-left > ul li:hover ul{ display:block; height:inherit; transition: all 0.5s ease; }

/*search-bar*/
#search-bar{position:relative;width:100%;height: 130px;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:2%;top:-40px; }
#search-bar input[type='text']{border:0;border-bottom:1px solid #CCC;width:95%;letter-spacing:1px;outline:0;margin: 50px 2% 0 2%;padding-right:50px;box-sizing:border-box;font-size:40px;}

/*頁尾*/
#footer{position: relative;width:100%;min-height: 200px;background:url(../../images/footer-bg.jpg) top left no-repeat;background-color: #111111;}
#footer .gotop{position:absolute;top: -35px;left:0;right: 0;margin-right: auto;margin-left: auto; cursor:pointer; }
#footer .wrap{max-width: 1400px;margin:0 auto;display:flex;padding: 10px 20px 30px 20px;color:#ffffff;}
#footer .wrap .left{flex:1;position:relative;display: flex;margin: 30px 0 0 0;}
#footer .wrap .left .main-content{max-width: 450px;overflow:hidden;display: flex;flex-flow: column;}
#footer .wrap .left .viewer{position:absolute;left: 0px;bottom: 0px;color: #d3b880;font-size:14px;line-height:20px;}
#footer .wrap .left .viewer a{color: #d3b880;text-decoration:underline;}
#footer .wrap .right{flex:1;min-height: 200px;padding: 30px 0 0 10px;}
#footer .wrap .right .slogan{font-size:14px;padding-bottom: 15px;}
#footer .wrap .right .pay img{ padding-right:7px; }
#footer .wrap .right .css-table{padding: 20px 0 0px 0;width: 100%;}
#footer .wrap .right .css-tr:first-child .css-td{border-top:1px dotted #999999;line-height: 20px;}
#footer .wrap .right .css-tr:first-child .css-td a{ color:#ffffff; }
#footer .wrap .right .css-td:last-child{ color:#ffffff; }
#footer .wrap .right .css-td{color:#dabe84;padding: 10px 5px;border-bottom:1px dotted #999999;}

#footer .wrap .logo{display:flex;text-decoration:none;padding: 0 0 25px 0;}
#footer .wrap .logo > a{ padding-right:15px; }
#footer .wrap .logo img{padding-right: 15px;}
#footer .wrap .logo div span{color: #ffffff;font-size: 24px;padding-bottom: 7px;margin-bottom: 5px;letter-spacing: 1px;display:block;font-weight: normal;font-family: 'Noto Sans TC', sans-serif;}
#footer .wrap .logo div span i{font-style:normal;color: #ffffff;font-size: 21px;padding-left: 20px;}
#footer .wrap .logo > .word{color: #ffffff;font-size: 14px;display:flex;align-items:center;justify-content: center;}
#footer .wrap .logo > .word div{letter-spacing: 1px;padding: 10px 0;text-transform: uppercase;}

#copyright{ background:#271241;  }
#copyright .wrap{max-width:1400px;padding: 10px 10px;margin:0 auto;color: #685184;text-align: right;}
#copyright .wrap a{ color:#685184; }


@media screen and (max-width: 1300px) {
	#menu .menu-nav div{ padding:0px 15px; }
	#menu nav span{padding:0 2px; }
	.fancy-search i{ display:none; }
}
@media screen and (max-width: 1000px) {
	
	#header .logo div span{ font-size:15px; }
	#header .wrap .right{ flex:none;}
	#menu{ /*display:none;*/ border-bottom:0; }
	#menu nav{padding-bottom:0;padding-right: 50px;}
	#menu nav span i{ display:none; }
	#menu .menu-nav{ display:none; }
	#menu-bar { display:block; }
	#search-bar input[type='text']{ font-size:22px;}
	#search-bar .search-btn{ width:30px; top:-15px; }
	
	.container .layout-left{ display:none; }
	.container .layout-right{ width: 100%; }	
	
	#footer .wrap{ display:block; }
	#footer .wrap .logo{padding:0; }
	#footer .wrap .left{ position:inherit; margin-top:20px; display:block; }
	#footer .wrap .left .viewer{ position:static; }
	#footer .wrap .right{ padding:30px 0px 0 0px; }
	
	#copyright .wrap{ text-align:center; }
}
@media screen and (max-width: 468px) {
	#header .logo img{ padding-right:5px; }
	#header .logo > .word div{ letter-spacing:0; }
	#header .logo > .word div i{ display:none; }
	#header .logo div span{padding-bottom:0;margin-bottom:0;font-weight: bold; letter-spacing:1px; }
	
	#footer .wrap .logo{ display:block; text-align:center; }
	#footer .wrap .logo > a{ padding-right:0; }
	#footer .wrap .left .main-content{ max-width:none; width:100%; }
	#footer .wrap .left .viewer{text-align:center; border-bottom:1px dotted #999999; padding-bottom:10px; }
	#footer .wrap .right .slogan{ text-align:center; }
	#footer .wrap .right .pay{ text-align:center; }
	#footer .wrap .right .css-td:nth-child(2){ display:none;}

}

@media screen and (max-width: 350px) {
	#header .logo > .word div{ display:none; }

}


/* ----------------------------------------------------------------------------------------------------------------*/
/* ------------------------------>>> 網頁表單 <<<----------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/


.enrolment-form{width:100%;background:#ffffff;padding:30px;box-shadow: 1px 1px 5px #ebebeb;}
.enrolment-form .form1{ width:100%; display:flex; }
.enrolment-form .form1 .left{flex:1;padding: 0 10px;}
.enrolment-form .form1 .right{ flex:1; display:flex; }
.enrolment-form .form1 .row{width:100%;display: flex;overflow: hidden;border-bottom: 1px dashed #cccccc;}
.enrolment-form .form1 .title{flex:1;display: flex;align-items:center;/*justify-content: flex-end;*/padding:10px; line-height:20px;font-size:16px;color:#282828;}
.enrolment-form .form1 .title img{ width:100%; }
.enrolment-form .form1 i{ color:#F00; padding-right:5px; }

/*內容欄位分配*/
.enrolment-form .form1 img{ vertical-align:middle; }
.enrolment-form .form1 .content{ flex:3; padding:10px; font-size:15px; line-height:22px; }
.enrolment-form .form1 .content2{ flex:7; padding:10px; font-size:15px; line-height:22px; }
.enrolment-form .form1 .content3{ flex:1.5; padding:10px; font-size:15px; line-height:22px; }
.enrolment-form .form1 .content4{ flex:7.5; padding:10px; font-size:15px; line-height:22px; }
.enrolment-form .form1 .tips{ background:#FFC; }

.enrolment-form .form1 input{ vertical-align:middle; }
.enrolment-form .form1 input[type='text'],.enrolment-form .form1 input[type='password'],
.enrolment-form .form1 input[type='file'],
.enrolment-form .form1 select,
.enrolment-form .form1 textarea
{width:100%;border:1px solid #dadada;background:#f5f5f5;padding: 8px 8px; margin:5px 0; box-sizing:border-box;}
.enrolment-form .form1 select{ max-width:300px; padding: 5px 8px; }

.align-start{ align-items:flex-start !important; }

.enrolment-caption{ width:100%; padding:15px 10px; color:#FFFFFF; font-size:15px; background:#329ED0; margin:20px 0 10px 0; }
.enrolment-border{ border:1px solid #EBEBEB; padding:10px; margin:20px 0; letter-spacing:1px; font-size:15px; line-height:22px; }
.enrolment-border i{ color:#F00; }

@media screen and (max-width : 1024px) {
	.enrolment-form .form1{ display:block; }
	.enrolment-form .form1 .row{ display:block; border-bottom:0; }
	.enrolment-form .form1 .title{justify-content: flex-start;font-weight: bold;color: #9c885e;}
	
}

@media screen and (max-width : 768px) {
	.enrolment-step{ /*display:block;*/ }	
	.enrolment-step span{ width:100%; }
}

@media screen and (max-width : 480px) {
	.enrolment-form{padding: 20px 10px;}
	.enrolment-form .form1 .right{ display:block; }
}


/* ----------------------------------------------------------------------------------------------------------------*/
/* ------------------------------>>> Index <<<----------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/


/*最新消息*/
#index-news{width:100%; max-width:1400px; overflow:hidden; margin:0 auto;}
#index-news .news-area {display: flex;flex-wrap: wrap;width:100%;overflow:hidden;}
#index-news .news-area > .items{position:relative;width: 31%;margin: 15px 10px;padding: 20px 20px 20px 20px;justify-content:space-between;background:#ffffff;box-shadow: 1px 1px 5px #dfe4e7;}
#index-news .news-area > .items .border{width: 4px;height: 100%;position:absolute;top:0;left:0;background: #9c885e;}
#index-news .news-area > .items .date{background: #efebe1;color: #a3a3a3;font-size: 13px;display: inline-block;padding: 5px 8px;margin: 10px 0 0 0;}
#index-news .news-area > .items .title{width:100%;min-height: 70px;}
#index-news .news-area > .items .title a{padding: 20px 0 0px 0;color: #282828;font-size: 16px;font-weight: bold;line-height: 25px;min-height: 70px;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;}
#index-news .news-area > .items a.more{float:right;color: #9c885e;font-size:14px;margin-top: 10px;}
#index-news .news-area > .items a.more i{font-size: 25px;vertical-align: -15%;}

#index-news .news-area > .items:hover{ background:#9B885E; transition: all 0.5s ease; }
#index-news .news-area > .items:hover .title a{ color:#ffffff; }
#index-news .news-area > .items:hover .date{ background:#59482C; color:#918986; }
#index-news .news-area > .items:hover a.more{ color:#ffffff; }
#index-news .news-area > .items:hover a.more i{ color:#ffffff; }



@media screen and (max-width : 1024px) {
	#index-news .news-area > .items{ width:100% !important; margin:20px 10px; }
}

/*關於我們*/
#index-about {width:100%;background:url(../../images/about-bg.jpg) no-repeat;background-position: center bottom;background-size: cover;/*background-attachment: fixed;*/}
#index-about .about-contain { position:relative; max-width:1400px; /*min-height:770px;*/ margin:0 auto; color:#797979; font-size:14px; line-height:25px; letter-spacing:1px; }
#index-about .about-box{width: 50%;padding:150px 20px;box-sizing:border-box;}
#index-about .about-box .content{color:#ffffff;font-size:16px;padding: 20px 0;line-height:35px;}
#index-about .about-box .content span{display:block;font-size:24px;text-decoration:underline;font-style:italic;margin: 0 0 40px 0;}
#index-about .common-title{color:#9c885e;text-align: left;margin-bottom: 20px;border-left: 4px solid; padding-left:30px; }
#index-about .common-title span{ color:#d7c7a0; }
#index-about .common-title > .line{color:#9c885e;margin: 15px 0 0 0;}

@media screen and (max-width: 1400px) {	
	#index-about .about-box{ width:60%; padding:100px 20px; }
}

@media screen and (max-width: 1024px) {	
	#index-about .about-box{ width:80%; }	
}
@media screen and (max-width: 768px) {	
	#index-about .about-box{width:100%;padding:50px 20px;background-color: rgba(255, 255, 255, 0.1);}
}

/*公司特色*/
#index-feature {position: relative;width:100%;background:url(../../images/feature-bg.jpg) no-repeat;background-position: top center;}
#index-feature .common-title{color:#9c885e;text-align: left;margin-bottom: 20px;border-left: 4px solid;padding-left:30px;position: absolute;right: 30%;top: 5%;}
#index-feature .common-title span{ color:#d7c7a0; }
#index-feature .common-title > .line{color:#9c885e;margin: 15px 0 0 0;}
#index-feature .item-area{position:relative;display:flex;flex-wrap: wrap;width:100%;max-width:1400px;margin: 0px auto 0 auto;padding: 250px 0 0 0;color: #5f5f5f;font-size: 16px;line-height: 25px;}
#index-feature .item-area .items{width: 23%;margin: 0 1% 30px 1%;text-align: center;}
#index-feature .item-area .items div{ position: relative; }
#index-feature .item-area .items .img{
	width:100%;
    border: 3px solid #ffffff;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    border-radius: 25px;
    box-shadow: 2px 2px 8px rgba(15%,15%,40%,0.1);
}
#index-feature .item-area .items .positive{ position:absolute; top:20px; left:20px; }
#index-feature .item-area .items .negative{ position:absolute; bottom:20px; right:20px; transform:scale(-1); }
#index-feature .item-area .items .title{padding:0 30px;color: #9c885e;font-size: 18px;padding: 20px 0;font-weight: bold;font-family: 'Noto Sans TC', sans-serif;}
#index-feature .item-area .items .content{ text-align:left; padding:0 10%; }


@media screen and (max-width: 1024px) {	
	#index-feature .item-area .items{width: 48%;}	
}

@media screen and (max-width: 480px) {	
	#index-feature .common-title{left: 20px;top: 50px;}
	#index-feature .item-area .items{width: 90%; margin:0 4% 30px 5%; }	
	
}


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

#wrapper.story-wrap{ background:#000000 !important; }
#story{position:relative;background: url(../../images/story-bg1.jpg) center no-repeat;background-size:cover;}
#story #sitemap .wrap{ color:#c3c3c3; }
#story #sitemap .wrap a{ color:#c3c3c3; }
#story .slogan{
    width: 100%;
    text-align: center;
    font-size: 36px;
    line-height: 60px;
    font-weight: bold;
    color: #ffffff;
    margin: 30px 0 0 0;
    padding: 0 10px;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-shadow: 3px 3px 3px #5a6b94;
}
#story .slogan i{font-style:inherit;letter-spacing: 2px;font-size: 48px;display: block;}
#story .content{margin: 450px auto 0 auto; padding:20px 20px; max-width:900px;width:100%;color:#ffffff;line-height: 40px;font-size:16px;}
#story .common-title{ color:#9c885e; }
#story .common-title span{ color:#9c885e; }
#story .common-title > .line{color:#9c885e;}

#story-feature{min-height:600px;background: url(../../images/story-bg2.jpg) top center no-repeat;}
#story-feature .common-title{ color:#9c885e; padding-top:250px; }
#story-feature .common-title span{ color:#d7c7a0; }
#story-feature .common-title > .line{color:#9c885e;}


/*公司特色*/
#inner-feature {position: relative;width:100%;}
#inner-feature .item-area{position:relative;display:flex;flex-wrap: wrap;width:100%;max-width:1400px;margin: 0px auto 0 auto;padding: 50px 0 0 0;color: #5f5f5f;font-size: 16px;line-height: 25px;}
#inner-feature .item-area .items{width: 23%;margin: 0 1% 30px 1%;text-align: center;}
#inner-feature .item-area .items div{ position: relative; }
#inner-feature .item-area .items .img{
	width:100%;
    border: 3px solid #ffffff;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    border-radius: 25px;
    box-shadow: 2px 2px 8px rgba(15%,15%,40%,0.1);
}
#inner-feature .item-area .items .positive{ position:absolute; top:20px; left:20px; }
#inner-feature .item-area .items .negative{ position:absolute; bottom:20px; right:20px; transform:scale(-1); }
#inner-feature .item-area .items .title{padding:0 30px;color: #ffffff;font-size: 18px;padding: 20px 0;font-weight: bold;font-family: 'Noto Sans TC', sans-serif;}
#inner-feature .item-area .items .content{color: #d7c7a0;text-align:left;padding:0 10%;}

/*付款方式*/
#story-payment{width:100%;min-height:989px;background:url(../../images/story-bg3.jpg) center no-repeat;background-size:cover;}
#story-payment .common-title{ padding-top:50px; color:#d7c7a0; }
#story-payment .common-title span{ color:#9c885e; margin-top:10px; }
#story-payment .common-title > .line{color:#9c885e;}
#story-payment .slogan{ color:#ffffff; font-size:16px; text-align:center; }
#story-payment .payment-area{display:flex;flex-wrap: wrap;max-width:1400px;margin:50px auto;width:100%;overflow:hidden;}
#story-payment .payment-area .items{flex: 0 20%;min-height: 165px;border-left: 1px solid #9c885e; margin-bottom:30px; display: flex;align-items:center;justify-content: center;}
#story-payment .payment-area .items:last-child{border-right: 1px solid #9c885e;}
#story-payment .payment-area .items div .items-top{min-height: 50px;margin-bottom: 20px;display: flex;align-items: end;justify-content: center;}
#story-payment .payment-area .items div .items-top img{}
#story-payment .payment-area .items div .items-bottom{}
#story-payment .payment-area .items span{display:block;color: #ffffff;font-size: 16px;line-height: 30px;text-align: center;}
#story-payment .special-area{ width:100%; max-width:1200px; margin:0 auto; display:flex; padding:20px; }
#story-payment .special-area .left{flex:1;display: flex;align-items:center;justify-content: center;}
#story-payment .special-area .left img{ max-width:472px; width:100%; }
#story-payment .special-area .right{ flex:2; }
#story-payment .special-area .right img{ max-width:662px; width:100%; }
#story-payment .special-area .right ul li{list-style:none;color:#ffffff;font-size:16px;line-height: 25px;margin: 20px 0;font-weight:bold;font-family: 'Noto Sans TC', sans-serif;}
#story-payment .special-area .right ul li:before {
   content:url(../../images/story-icon.png);
   display: inline-block;
   vertical-align: middle;
   margin-right: .5em;
}

/*運送方式*/
#story-method{width:100%;padding: 0 20px; overflow:hidden; background:url(../../images/story-bg4.jpg) repeat;}
#story-method .common-title{padding-top:50px;color:#d7c7a0; margin-top:0; }
#story-method .common-title span{ color:#9c885e; margin-top:10px; }
#story-method .common-title > .line{color:#9c885e;}
#story-method .slogan{color: #434343;font-size:16px;text-align:center;line-height: 25px;}

#story-method .method-area{display:flex;flex-wrap:wrap;align-items: center;max-width: 1000px;margin: 40px auto;width:100%;overflow:hidden;}
#story-method .method-area .items{
    flex: 0 30%;
    text-align: center;
    margin: 0 15px;
    font-size: 18px;
}
#story-method .method-area .items img{ width:100%; max-width:250px; }
#story-method .method-area .items span{ display:block; }

@media screen and (max-width: 1024px) {	
	#story .slogan{font-size: 22px;line-height:40px;}
	#story .slogan i{font-size: 28px;}
	#story .content{background-color:rgba(255, 255, 255, 0.8); margin:50px auto 0 auto; color:#333333; }
	#story-feature .common-title{ padding:50px 0 0 0; }
	#story-payment .payment-area .items{ flex:0 33%; }
	#story-payment .special-area{ display:block; }
	#story-payment .special-area .right ul{ padding:0; }	
	#inner-feature .item-area .items{width: 48%;}
	
}

@media screen and (max-width: 768px) {	
	#story-payment .payment-area .items{ flex:0 50%; }
	#story-method .method-area .items{flex: 0 40%;}
}

@media screen and (max-width: 480px) {	
	#inner-feature .common-title{left: 20px;top: 50px;}
	#inner-feature .item-area .items{width: 90%; margin:0 4% 30px 5%; }	
	#story-payment .payment-area .items{ border:0 !important; }
	#story-method .method-area .items{flex: 0 100%;}
	
}


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

/*列表頁*/
#index-news .news-inner > .items{ width:48%; }

/*詳細內頁*/
#news-frame{position:relative;width: 100%;margin: 15px 0px;padding: 20px 20px 70px 20px;justify-content:space-between;background:#ffffff;box-shadow: 1px 1px 5px #dfe4e7;}
#news-frame .caption{ display:flex; align-items:center; justify-content: center; width:100%; position:relative; min-height:190px; border-bottom:3px solid #dfca9d; text-align:center; }
#news-frame .caption:before{ position:absolute; top:0; left:0; content:url(../../images/news-frame.png); }
#news-frame .caption:after{position:absolute;top:0;right:0;content:url(../../images/news-frame.png);transform: scaleX(-1);}
#news-frame .caption{color:#363636;font-size:24px;font-weight:bold;font-family: 'Noto Sans TC', sans-serif;}
#news-frame .caption{padding: 0 30px;}
#news-frame .caption .content span{color:#a3a3a3;font-size:14px;background:#efebe1;font-weight:normal;padding: 3px 10px;display: inline-block;margin: 15px 0;}
#news-frame .operator{position:absolute;bottom: -15px;left: 0;width:100%;min-height:80px;background:#272727;display:flex;align-items:center;justify-content: center;}
#news-frame .operator a{color:#9c885e;text-decoration:none;padding: 0 30px;font-size: 14px;}
#news-frame .operator i{ font-size: 25px; vertical-align: middle; }

@media screen and (max-width: 480px) {	
	#news-frame .operator a{ padding:0 10px; }
}

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



#product-list{ width:100%; overflow:hidden; }
#product-list .items{display: inline-block;vertical-align: top;width: 22.5%;margin: 0 1% 5vw 1%;box-sizing:border-box;text-align:center;}
#product-list .items > .title{ display:block; color:#000000;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:10px 0; }
#product-list .contents2{position:absolute;top:0;right:0;padding: 7px 20px;font-size: 15px;color:#ffffff;background:#000;}
#product-list .intro-area{ display:flex; margin:10px 0 0 0; }
#product-list .intro-area .left{ flex:2; text-align:left; }
#product-list .intro-area .center{ /*flex:1;*/ text-align:center; }
#product-list .intro-area .right{ /*flex:1;*/ text-align:right; }
#product-list .intro-area .types{
    font-size: 16px;
    color: #7d7d7d;
}
#product-list .intro-area .price{
    font-size: 14px;
    font-weight: bold;
    color: #920000;
    display: flex;
    align-items:center;
    /* justify-content: center; */
}
#product-list .intro-area .title{
    font-size: 16px;
    line-height: 22px;
    color: #373737;
}
#product-list .intro-area .title a{ color: #373737; text-decoration:none; }

@media screen and (max-width:1000px) {
	#product-list .items{width: 46%;margin: 20px 1.5%;}	
}
@media screen and (max-width:480px) {
	#product-list .items{ /*width: 94%;margin: 20px 3%;*/ }	
	#product-list .intro-area .title{ font-size:14px; line-height:20px; }
}

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


#product-detail{/*display:flex;*/width:100%;overflow:hidden;margin: 5vw 0 50px 0;padding-bottom: 50px;}
#product-detail .left{float:left;width:50%;padding: 0 0 30px 0px;text-align:center;}
#product-detail .right{ float:left; width:50%; padding:0 30px; }
#product-detail .right > .title{
    font-size: 36px;
    letter-spacing: 5px;
    margin-bottom: 30px;
}
#product-detail .right .types{

    font-size: 16px;
    color: #7d7d7d;
    margin-bottom: 30px;
}
#product-detail .right .price{
    margin-bottom: 30px;
    font-size: 20px;
    color: #920000;
}
#product-detail .right .intro{
    border-top: 1px solid #ebebeb;
    border-bottom: 1px solid #ebebeb;
    padding: 20px 0;
    font-size: 15px;
    line-height: 25px;
    min-height: 200px;
}
#product-detail .right .intro .title{
    color: #9c885e;
    font-size: 18px;
    padding: 20px 0;
}


#product-detail .product_cart{width:100%;overflow:hidden;text-align:right;margin: 40px 0 40px 0;color: #9c885e;font-size: 16px;}
#product-detail .product_cart span{border: 1px solid #dbdbdb;background: #9c885e;color: #ffffff;font-weight:bold;padding: 10px 15px;cursor:hand;cursor:pointer;}
#product-detail .product_cart span:hover{ background:#bfa138; -webkit-transition:.6s;-ms-transition:.6s;-moz-transition:.6s; }
#product-detail .product_input{border: 1px solid #dbdbdb;border-left:0;border-right:0;width:70px;height: 29px;text-align:center;font-size: 12px;background: #ffffff;outline: 0;}

#product-detail .product_button{ display:flex; justify-content:space-between; }
#product-detail .product_button .webbtn1{ width:45%; }

/*owl*/
#product-detail .owl-left{cursor:hand;cursor:pointer;display:flex;align-items:center;justify-content: center;width: 10%;float:left;}
#product-detail .owl-center{width: 80%;float:left;}
#product-detail .owl-right{cursor:hand;cursor:pointer;display:flex;align-items:center;justify-content: center;width: 10%;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; }

.video-area{display:flex;flex-wrap: wrap;width: 100%;}
.video-items{flex: 0 48%;margin: 0 1%30px 1%;}

@media screen and (max-width: 1000px) {
	#product-detail .left{ float:none; width:100%; }
	#product-detail .right{ width:100%; }
}
@media screen and (max-width: 600px) {
	.video-items{flex: 0 100%;}
	#product-detail .right > .title{ font-size:24px; line-height:30px; }
}
@media screen and (max-width: 480px) {

	#product-detail .product_button{ display:block; justify-content:initial; }
	#product-detail .product_button .webbtn1{ width:100%; }
}

/* ----------------------------------------------------------------------------------------------------------------*/
/* ------------------------------>>> 聯絡我們 <<<----------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/


.main-title{font-size:20px;letter-spacing:1px;padding: 35px 0 25px 0;color: #9C885E;}
.main-title i{ vertical-align:middle; padding-right:7px;width: 30px;}

/*聯絡資訊*/
#contact_info{ position:relative; max-width:1200px; overflow:hidden; }
#contact_info .contact_info_left{float:left;width: 50%;margin: 20px 0 30px 0;}
#contact_info .contact_info_right{float:left;/* max-width:400px; */width: 50%;font-size:15px;padding: 10px 0 0 30px;box-sizing: border-box;letter-spacing:1px;color:#4f4f4f;line-height:30px;}
#contact_info .slogan{ background:url(../../images/about_line.png) top center no-repeat; padding:90px 0 0 0; position:absolute; top:0; right:0; }
.contact_info_btitle{ width:100%; border-bottom:1px solid #6d6b64; }
.contact_info_area{width:100%;overflow:hidden;line-height:25px;padding: 5px 0;/* border-bottom:1px dashed #a7a7a4; */}
.contact_info_title{float:left;width:20%;color: #9C885E;/* background:#c6e0a8; */text-align:center;margin:0 5% 0 0;padding:0 5px;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;}
.contact_info_content{ float:left; width:70%; }

@media screen and (max-width : 1024px) {
	#contact_info .contact_info_left{ float:none; width:100%; }
	#contact_info .contact_info_right{ float:none; width:100%; padding:10px 0 0 0 }
	.contact_info_title{ text-align:left; max-width:100px; }	
}



/* ----------------------------------------------------------------------------------------------------------------*/
/* ------------------------------>>> 實體店面 <<<----------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

#inner-store{ width:100%; overflow:hidden; }
#inner-store .slogan{font-size:16px;color:#191918;border-bottom:1px solid #d1d1d1;font-weight: bold;padding: 40px 10px;text-align: center;}
#inner-store .store-items{width:100%;overflow:hidden;display:flex;flex-wrap: wrap;margin:4vw 0;}
#inner-store .store-items .left{flex: 50%;display: flex;justify-content: center;padding:0 20px;}
#inner-store .store-items .left .map{ width:100%; display:inline-block; border:1px solid #cccccc; }
#inner-store .store-items .right{flex: 50%;padding:0 20px;}
#inner-store .store-items .right .caption{font-size:24px;color:#9c885e; margin-bottom:30px; font-weight:bold;font-family:'Noto Sans TC', sans-serif;}
#inner-store .store-items .right .caption:before{ content:url(../../images/sotre-icon.png); vertical-align:middle; padding-right:10px; }
#inner-store .store-items .right .info-area{ width:100%; overflow:hidden; border:1px solid #cccccc; }
#inner-store .store-items .right .info-area .items{
    border-left: 4px solid #9c885e;
    display: flex;
    align-items: center;
    min-height: 55px;
    font-size: 16px;
}
#inner-store .store-items .right .info-area .items:not(:last-child){ border-bottom: 1px solid #cccccc; background:url(../../images/store-info-bg.jpg) repeat-x; background-size-y:100%; }
#inner-store .store-items .right .info-area .items .info-img{
    padding: 0 10px;
    color: #9c885e;
    flex: 0.5;

}
#inner-store .store-items .right .info-area .items .info-title{
    color: #9c885e;
    flex: 2;
    min-width: 90px;
}
#inner-store .store-items .right .info-area .items .info-content{
    flex: 10;
    line-height: 20px;
    padding: 10px 10px;
}
#inner-store .store-items .right .info-area .items .info-content a{ text-decoration:underline; }


@media screen and (max-width: 1024px) {
	#inner-store .store-items .left{ flex:100%; }
	#inner-store .store-items .right{ flex:100%; margin-bottom:20px; }
	#inner-store .store-items .right{order:-1;}
}

/* ----------------------------------------------------------------------------------------------------------------*/
/* ------------------------------>>> Login <<<----------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/


.login_area{ width:100%; overflow:hidden; margin:0 0 30px 0; }
.login_area_left{ float:left; width:50%; }
.login_area_right{ float:left; width:50%; text-align:center; }
.login_frame{ box-sizing:border-box; border:1px solid #EAE9E4; background:#FFF; width:100%; margin:20px auto; }
.login_frame_title{ width:100%; background:#41763E; color:#fff; font-size:16px; letter-spacing:1px; padding:8px 10px; box-sizing: border-box; }
.login_frame_content{ box-sizing: border-box; background:#FFF; }
.login_frame_content table th{ background:#ebebeb; padding: 15px 0 15px 20px; font-size:14px; }
.login_frame_content table td{ border:1px solid #f5f4f0; padding: 15px 0 15px 20px; font-size:14px; word-break:break-all; }
.login_frame_content table td input[type="text"]{ border:1px solid #e9e8e8; width:80%; height:25px; -webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px; padding:5px 10px; font-size:14px; font:14px/18px 'Rosarivo', '微軟正黑體', sans-serif; color:#646464; }
.login_frame_content table td input[type="password"]{ border:1px solid #e9e8e8; width:80%; height:25px; -webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px; padding:5px 10px; font-size:14px; font:14px/18px 'Rosarivo', '微軟正黑體', sans-serif; color:#646464; }
.login_frame_content table td textarea{ border:1px solid #e9e8e8; width:80%; height:125px; -webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px; padding:5px 10px; }
.login_frame_content table td a{ text-decoration:underline; color:#0067b7; }
.memberbuy_title{background:#9C885E; color:#fff;}

.login_title{ color:#333333; font-size:14px; padding-left:20px; width:70px; }
.login_title_en{ width:100px; color:#9e9e9e; font-size:14px; padding-left:20px; width:80px; }
.login_area_right img{ width:100%; max-width:364px; }


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

	.login_area_left{ float:none; margin:0 auto; width:80%; }	
	.login_area_right{ margin-top:30px;  width:100%; margin:30px 0; }	
	.login_area_right img{ display:block; text-align:center; margin:0 auto; padding-bottom:20px; }

}

@media screen and (max-width: 768px) {
	
	.login_area_left{ width:95%; }	
	.login_title_en{ display:none; }
	.login_frame_content table td{ padding: 15px 0 15px 5px; }

}

/* ----------------------------------------------------------------------------------------------------------------*/
/* ------------------------------>>> Login <<<----------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/


.login-area{ width:100%; overflow:hidden; margin:30px 0; }
.login-title{ display:flex; width:100%; padding:15px 30px; background:#46C5EA; color:#ffffff; border:2px solid #46C5EA; font-size:24px;
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.login-title .left{ padding-right:30px; }
.login-title .right{ display:flex; border-left:1px dashed #ffffff; padding-left:30px; align-items:center; justify-content: center;}
.login-content{width:100%;padding:15px 10px;font-size:16px;color:#222222;line-height:30px;background:#ffffff;-webkit-border-bottom-right-radius: 10px;-webkit-border-bottom-left-radius: 10px;-moz-border-radius-bottomright: 10px;-moz-border-radius-bottomleft: 10px;border-bottom-right-radius: 10px;border-bottom-left-radius: 10px;}

#login-area{ width:100%; margin:0px auto; overflow:hidden; padding:0 10px; box-sizing:border-box; }
#login-area .input{ cursor:hand; cursor:pointer; background:#f3f3f3;border:1px solid #d6d6d6;max-width:450px; color:#323232; font-size:16px; letter-spacing:2px; margin: 30px auto; padding:10px 30px; -webkit-border-radius: 25px;-moz-border-radius: 25px;border-radius: 25px; }
#login-area .input input[type=text],#login-area .input input[type=password]{ border:0; background:#F3F3F3; width:60%; outline:0; font-size:14px; letter-spacing:1px; color:#333; }

.login-submit{ display:inline-block; border:1px solid #dadada; margin:30px auto; padding:12px 28px; letter-spacing:1px; color:#585858; font-size:16px; text-decoration:none; background:#ffffff; }

@media (max-width: 480px) {
	.hide480{ display:none; }	
}


/* ----------------------------------------------------------------------------------------------------------------*/
/* ------------------------------>>> Cart <<<----------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

#cart_num_area span{/* border: 1px solid #dbdbdb; */background: #9c885e;color: #ffffff;font-weight:bold;padding: 5px 10px;cursor:hand;cursor:pointer;}
#cart_num_area span:hover{ background:#bfa138; -webkit-transition:.6s;-ms-transition:.6s;-moz-transition:.6s; }
#cart_num_area input[name='text']{border: 1px solid #dbdbdb;border-left:0;border-right:0;width:70px;height: 29px;text-align:center;font-size: 12px;background: #ffffff;outline: 0;}


.cart_step_area_m{ display:none; color:#888787; font-size:16px; letter-spacing:1px; text-align:center; margin:0 0 50px 0; }
.cart_step_area{ text-align:center; margin:0 0 50px 0;}
.cart_step{display:inline-block;width:32px;height:32px;line-height:32px;text-align:center;color:#FFF;font-size:15px;background: #9c885e;-webkit-border-radius:25px;-moz-border-radius:25px;border-radius:25px;}

#product_table{border-top: 3px solid #9c885e;}

#product_table th{border-bottom: 1px solid #9C885D;text-align:center;text-shadow:1px 1px #EBEBEB;color: #9C885E;font-size:16px;font-weight:bold;letter-spacing:1px;padding:10px 0;}
#product_table td{ text-align:center; padding:10px 0; color:#505050; letter-spacing:1px; font-size:15px; border-bottom:1px solid #ebebeb; }
#product_table td img{ margin:0 10px 0 0;}
#product_table input[type=text]{width:50px;height: 25px;border:0;text-align:center;font-size: 15px;outline:0;}

.product_fee_area{width:100%;overflow:hidden;background: #E8DFCA;color:#505050;font-size:15px;letter-spacing:1px;padding:20px 30px;border: 1px solid #9c885e;box-sizing:border-box;}
.product_fee_area_left{ float:left; width:40%; text-align:left; line-height:25px; }
.product_fee_area_right{ float:left; width:100%; text-align:right; line-height:30px; }
.cart_number{ font-size:18px; color:#ff345a; font-weight:bold; }
.cart_price{  color:#FF345A; font-size:20px; font-weight:bold; }
.cart_tips{ display:inline-block; padding:3px 7px; background:#09a2e9; color:#fff; }

.cart_title{ display:inline-block; color:#09a2e9; text-shadow:1px 1px #EBEBEB; font-size:24px; letter-spacing:1px; font-weight:bold; margin:100px 0 20px 0; }
.cart_stitle{ font-size:16px; color:#585858; margin-left:40px; letter-spacing:1px; text-shadow:1px 1px #EBEBEB; }
.cart_fullby_title{ display:inline-block; color:#585858; background:#f3f3f3; padding:5px 8px; margin:0px 0 0 0; letter-spacing:1px;}
.cart_fullby_price1{ font-size:16px; color:#ff345a; letter-spacing:1px; font-family:"微軟正黑體"; height:20px; line-height:20px; }
.cart_fullby_price1:before { content:url(../../images/cart_add1.png); vertical-align:middle; padding-right:5px; }

.cart_fullby_price2{ font-size:16px; color:#ABABAB; letter-spacing:1px; font-family:"微軟正黑體"; height:20px; line-height:20px; }
.cart_fullby_price2:before { content:url(../../images/cart_add2.png); vertical-align:middle; padding-right:5px; }
.cart_fullby_title2{ color:#585858; font-size:14px; letter-spacing:1px; margin:10px 0; line-height:25px; padding-right:10px; text-align:left;}
.cart_fullby_title4{ color:#ababab; font-size:16px; letter-spacing:1px; padding-left:10px;}
.cart_select1{ box-sizing:border-box; margin:0 0 10px 0; padding:10px; }
.cart_select2{ box-shadow:4px 4px 12px -2px rgba(20%,20%,40%,0.5); background:#FFF; border:1px solid #EBEBEB; box-sizing:border-box; padding:10px; -webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px; margin:0 0 10px 0; }
.cart_fullby_bg1{ color:#09a2e9; font-size:16px; letter-spacing:1px; padding-left:10px; }
.cart_fullby_bg2{ background:#ff345a; padding-left:10px; -webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px; color:#fff; font-size:16px; letter-spacing:1px; }
.cart_coupon{ width:100%; overflow:hidden; background:#f5fdff; border:1px solid #bbbbbb; box-sizing:border-box; }
.cart_coupon_title{ color:#585858; letter-spacing:1px; margin:10px 0; font-size:14px;}
.cart_coupon_title a{ color:#09a2e9;}
.cart_coupon_title2{ color:#585858; letter-spacing:1px; font-size:14px; padding:6px 0; line-height:22px; }
.cart_coupon_price{ color:#FF345A; font-weight:bold;}
.cart_coupon_date{ color:#989898; }
.cart_coupon input[type=text]{ border:1px solid #CCC; width:150px; height:24px; padding:0 5px;}
.cart_coupon_discount{ background:#b5eaf7; color:#585858; text-align:right; font-size:16px; letter-spacing:1px; padding:10px; }
.cart_coupon_discount span{ font-weight:bold; color:#ff345a; font-size:20px;}
.cart_coupon_btn{ padding:20px 0; text-align:right; }
#cart_receiver_table{ width:100%; font-size:13px; letter-spacing:1px; background:#CCC; }
#cart_receiver_table td{ padding:2px; line-height:23px; }
#cart_receiver_table td i{ font-style:inherit; color:#F00; font-weight:bold; }
#cart_receiver_table p { margin:20px 0; line-height:25px;}
#member_info_2{ display:inline-block; overflow:hidden; background:#EBEBEB; margin:5px; padding:8px; line-height:22px; letter-spacing:1px; -webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px; }


.cart_pay_option{/*float:left;*/line-height: 45px;font-weight: bold;}
.cart_pay_option img{ vertical-align:middle; max-height:30px; }

/*收件者資料*/
.shopping_input_checkout1 { line-height:22px; height:22px; border:1px solid #D6D3D3; width:90%; max-width:300px; padding-left:10px; padding-right:10px; letter-spacing:1px; ; color:#000000; font-size:12px; }
.shopping_input_checkout2 { line-height:22px; height:22px; border:1px solid #D6D3D3; width:90%; max-width:150px; padding-left:10px; padding-right:10px; letter-spacing:1px; ; color:#000000; font-size:12px; }
.shopping_input_checkout3 { line-height:22px; height:22px; border:1px solid #D6D3D3; width:90%; max-width:80px; padding-left:10px; padding-right:10px; letter-spacing:1px; ; color:#000000; font-size:12px; }
.shopping_input_checkout4 { line-height:22px; height:50px; border:1px solid #D6D3D3; width:90%; max-width:500px; margin-top:5px; margin-bottom:5px; padding-left:10px; padding-right:10px; letter-spacing:1px; ; color:#000000; font-size:12px; }
.member_inputbox_150 { width:150px; border:1px solid #D6D3D3; height:25px; line-height:25px; padding-left:5px; color:#666; font-size:12px; }
.shopping_txt15 { padding-left:10px; }
.shopping_txt16 { padding-left:10px; }
.shopping_txt17 { padding-left:10px; }
.member_select_type2 { border:1px solid #D6D3D3; height:27px; line-height:27px; padding:1px; margin-top:7px; font-size:12px; }
.member_inputbox { width:300px; border:1px solid #D6D3D3; height:25px; line-height:25px; padding-left:5px; color:#666; font-size:12px; }
.member_inputbox_150 { width:150px; border:1px solid #D6D3D3; height:25px; line-height:25px; padding-left:5px; color:#666; font-size:12px; }
.member_inputbox_50 { width:50px; border:0px solid #D6D3D3; height:27px; line-height:27px; padding-left:5px; color:#666; font-size:12px; background-color:transparent }
.member_inputbox_40 { width:50px; border:1px solid #D6D3D3; height:20px; text-align:center; line-height:20px; padding-left:5px; color:#666; font-size:12px; background-color:transparent }
.member_form_select { border:1px solid #D6D3D3; height:27px; line-height:27px; padding:1px; margin-top:7px; font-size:12px; }
.member_form_min { width:50px; border:0px solid #D6D3D3; height:27px; line-height:27px; padding-left:5px; color:#666; font-size:12px; background-color:transparent }
.fancybox_login_form_select { line-height:25px; height:25px; padding:3px; border:1px solid #D6D3D3; letter-spacing:1px; font-size:13px; margin-left:0px; }
.order_checkout_title{ letter-spacing:1px; font-size:13px; line-height:30px;}

.slider input[type=checkbox]
{
  /* Double-sized Checkboxes */
  -ms-transform: scale(2); /* IE */
  -moz-transform: scale(2); /* FF */
  -webkit-transform: scale(2); /* Safari and Chrome */
  -o-transform: scale(2); /* Opera */
  padding: 10px;
  color:#FF345A;
}
 

.slider_border{ border-top:1px solid #c4c4c4;}
.slick-pre{ position:absolute; top:50%; left:0px; display:block; z-index:8; }
.slick-next{ position:absolute; top:50%; right:0px; display:block; z-index:8; }

/*運費*/
.fee_area{width:100%; background:#EBEBEB; font-size:16px; letter-spacing:1px; padding:10px; box-sizing:border-box; line-height:22px;}
.total_area{ width:100%; background:#C0B494; border-top:1px solid #bbbbbb; font-size:18px; color:#ffffff; padding:30px 0; letter-spacing:1px; line-height:22px; text-align:center; }

@media screen and (max-width: 1000px) {
	.cart_none{ display:none;}
}
@media screen and (max-width: 768px) {

	.cart_title{ margin:50px 0 20px 0;}
	.cart_step_area_m{ display:block; margin:0 0 20px 0; }
	.cart_step_area{ display:none; }	

	
	#product_table td{ font-size:13px; }
	#product_table select{ width:53px; }
	
	.product_fee_area_left{ float:none; text-align:center; width:100%; font-size:13px; }
	.product_fee_area_right{ float:none; text-align:left; text-align:center; width:100%; font-size:13px; }
	
	.cart_pay_option{ float:none; }		
	
}

@media screen and (max-width: 600px) {
	.cartype_left{ float:none; width:100%; text-align:center; }
}

@media screen and (max-width: 480px) {
	
	.cart_select2{ box-shadow:none; border:0; }	
	.cart_receive_none{ display:none;}
	
}



/* ----------------------------------------------------------------------------------------------------------------*/
/* ------------------------------>>> Bxslider <<<----------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

ul.bxslider { margin:0; padding:0; }
#home_banner {	
  /*  display: inline-block;  會多一個空白*/
  /*max-width: 1400px;*/
  width:100%;
  max-height: 740px;
  overflow: hidden;

  position: relative;
  margin:0px auto 0 auto;
  background:#000000;
}
#home_banner li { width: 100%; background-repeat: no-repeat; background-size:cover; background-position: center;  height:740px;
 -webkit-transition:transform .5s ease;
 -moz-transition:transform .5s ease;
 -o-transition:transform .5s ease;
 -ms-transition:transform .5s ease;
 transition:transform .5s ease;
}
#home_banner img {display: none;}
#home_banner .bxslider { opacity: 0; }
#home_banner .bx-wrapper .bx-pager.bx-default-pager a:hover, #home_banner .bx-wrapper .bx-pager.bx-default-pager a.active { background: #9c885e;border:2px solid transparent;}
#home_banner .bx-wrapper .bx-pager.bx-default-pager a {
 background-color: #ffffff;
 border:2px solid white;
 width: 12px;
 height: 12px;
 margin: 0 5px;
 border-radius: 50%;
 -webkit-transition: all .5s ease;
 -moz-transition: all .5s ease;
 -o-transition: all .5s ease;
 -ms-transition: all .5s ease;
 transition: all .5s ease;
}
#home_banner .bx-wrapper .bx-pager {bottom:10%;opacity: 0;}
#home_banner .bx-wrapper .bx-controls-direction{ opacity: 0; }
#home_banner .word { font-size: 15px; position: absolute; margin-left: -187px; margin-top: -116px; left: 50%; top: 50%; color: #673D3A; letter-spacing: 25px; opacity: 0.2; }
#home_banner .word b { font-weight: bold; }
#home_banner .down { position: absolute; right: 30px; bottom: 32px; width: 34px; height: 28px; z-index: 99; cursor: pointer; opacity: 0; }
#home_banner .down img { display: block; }
#home_banner .bx-prev{ left:5%; }
#home_banner .bx-next{ right:5%; }


/*------Scroll--------*/
.swiper-scroll{ z-index:999999; }
.swiper-scroll a.scrollDown{
	display:block;
	color:#000;
	text-align:center;
	position:absolute;
	bottom: 20px;
	left: 0;
	right: 0;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 0%;
	z-index:1;
	display: flex;
	align-items:center;
	justify-content: center;
	}

.swiper-scroll a.scrollDown i{
	display:inline-block;
	text-align:center;
	font-size:25px;
	color:#FFF;
	text-align:center;}


@media screen and (max-width : 1024px) {
	
	#home_banner .bx-controls-direction
	{
		display:none;	
	}
	
	#home_banner .bx-wrapper .bx-pager.bx-default-pager a {
		width: 15px;
		height: 15px;
	}
	#home_banner, #home_banner li {
		max-height: 600px;
		height: 600px;		
		margin-top: 45px;
	}
}

@media screen and (max-width : 480px) {
	#home_banner .bx-wrapper .bx-pager{ display:none; }
}

/* ----------------------------------------------------------------------------------------------------------------*/
/* ------------------------------>>> Mobile Menu <<<----------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/


body { transition: background-color .2s; }
#wrapper { transition: margin-left .2s; }
.sidenav {height: 100%;overflow:hidden;width: 0;position: fixed;z-index: 9999;top: 0;right: 0;background-color: rgba(0, 0, 0, 0.9);overflow-x: hidden;transition: 0.2s;/*padding-top: 60px;*/box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);}
.sidenav a:hover {color: #ffffff;}
.sidenav .closebtn {font-size: 36px;position: absolute;top: 13px;right: 10px;color: #ffffff;}
.sidenav .head {width:100%;position: relative;overflow:hidden;text-align: center;padding: 8px 0 8px 0;border-top: 5px solid #9c885e;border-bottom: 1px solid #ebebeb;background: #000000;}

@media screen and (max-height: 450px) {
 .sidenav {padding-top: 15px;}
 .sidenav a {font-size: 18px;}
}
/*選單 - 選項*/
#ajax-sidenav > div {position:relative;width: 100%;border-bottom: 1px solid #ebebeb;color: #ffffff;padding: 15px 20px;line-height:20px;box-sizing:border-box;cursor: pointer;cursor: hand;font-size: 16px;letter-spacing: 3px;}
#ajax-sidenav > div:before {content:url(../../images/menu-icon.png);vertical-align: -35%;padding-right:10px;color: #9C885E;}
#ajax-sidenav > div i { position:absolute; right: 15px; top: 17px; }
#ajax-sidenav > div.title { background: #b19bb5; color: #ffffff; }
#ajax-sidenav > div:hover { /*color:#57708e;*/ }
#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; */ }
#ajax-sidenav > div.nav { background:#ECECEC; border-bottom: 1px solid #CDCDCD; }
#ajax-sidenav > div.nav:before { content:""; padding-right:0px; }
#ajax-sidenav > div img { vertical-align:middle; padding-right:8px; }
.submenu-nav { width: 100%; overflow:hidden; display:none; background-color: #FFFFFF; }
.submenu-nav div {position:relative;font-size:14px;background: #000000;border-bottom: 1px dashed #A2A2A2!important;padding: 20px 20px 20px 55px !important;cursor:pointer;}
.submenu-nav div a{ color:#fff !important; }
.submenu-nav div:before {/*font-family: "Font Awesome 5 Free"; font-weight: 900;  content: "\f0da";font-size: 14px; padding-right:5px; */ }
.submenu-nav div i{ position:absolute; top:20px; right:15px; color:#ffffff; }

@media screen and (max-height: 450px) {
 .sidenav { padding-top: 15px;}
 .sidenav a { font-size: 18px;}
}

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

/*--------- line ---------*/
@keyframes widthGroup-1 {
    0% { width: 0; }	
    100%   { width: 80px; }
}

/*------image zoom--------*/
.photo-zoom {
  position: relative;
  overflow: hidden;
  width: 100%;
}
.photo-zoom .pimg {
  max-width: 100%;
  -moz-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  
}
.photo-zoom:hover .pimg {

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

@media screen and (max-width: 480px) {
	.gallery:hover .photo-mask{ opacity:0 !important; }
}

/*------Zoom--------*/
.scaleZoom {

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

	
/*------區塊跳動效果--------*/
@-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;
}

/*------區塊位移效果--------*/
.transImg{
	transition: 0.3s;
}
.transImg:hover{
	transform: translateY(-20px);
}



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

.Loadaction_Box { position:relative; 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: absolute;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;}

/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------------------------------->>> pagelink <<<--------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

.pageselect{border:1px solid #CCCCCC;padding: 4px 5px;font-size:12px;}
.pageselect:hover{ background:#ebebeb; }
a.pagelink_no{color:#333333;text-decoration:none;border: 1px solid #cccccc;padding: 7px 5px;display: inline-block;margin: 5px 0;}
a.pagelink_no:hover{ background:#ebebeb; }
a.pagelink{color:#333333;text-decoration:none;border: 1px solid #CCCCCC;padding: 5px 10px;}
a.pagelink:hover{ background:#ebebeb; }
a.pagelink_ch{color:#333333;padding: 5px 10px;border: 1px solid #cccccc;background: #ebebeb;text-decoration:none;}

/*Youtube*/
.video-container {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 30px;
	height: 0;
	overflow: hidden;
}
.video-container iframe, .video-container object, .video-container embed {
	position: absolute;
	top: 0;left: 0;
	width: 100%;
	height: 100%;
}