@charset "utf-8";
/* CSS Document */

*, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
body{ font-family:'Noto Sans TC Medium','Roboto','sans-serif','微軟正黑體','Microsoft JhengHei'; -webkit-text-size-adjust: none; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; }
a { color: #444; text-decoration: none; }
a.svg{
  position: relative;
  display: inline-block; }
a.svg:after {
  content: ""; 
  position: absolute; 
  top: 0; 
  right: 0; 
  bottom: 0; 
  left: 0; }
ul { list-style: none; margin: 0; padding: 0; }
.slowAnimation { -webkit-transition: ease .4s; -moz-transition: ease .4s; -ms-transition: ease .4s; -o-transition: ease .4s; transition: ease .4s; }
.star { padding: 3px; display: inline-block; width: 13px; }
.red { color: #DD652B; }
.center { max-width: 1200px; width: 100%; margin: 0 auto; }
#content { width: 100%;background-image: url(../images/bh_bg001.jpg);background-size: cover;}
#content_main { width: 100%; overflow: hidden; z-index: 60; position: relative; margin-top: 100vh;
background: -moz-linear-gradient(top, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0.9) 30%, rgba(255,255,255,1) 100%);
background: -webkit-linear-gradient(top, rgba(255,255,255,0.8) 0%,rgba(255,255,255,0.9) 30%,rgba(255,255,255,1) 100%); 
background: linear-gradient(to bottom, rgba(255,255,255,0.8) 0%,rgba(255,255,255,0.9) 30%,rgba(255,255,255,1) 100%); 
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 ); }

.show_content {width: 100%;margin: auto;}
.contact_content { width: 98%; margin: auto; padding: 50px 0;}
.form_content { width: 96%; max-width: 970px; margin: auto; padding: 50px 0; font-size: 15px; color: #444; }
.path { width: 96%; margin: auto; font-size: 13px; color: #444; text-align: right; border-bottom: 1px solid #ccc;display: none;}
.path p { position: relative; width: auto; display: inline-block; padding-left: 5px; line-height: 24px; margin-bottom: -1px; border-bottom: 1px solid #000; max-width: 210px; }
.path p:after { content: ''; position: absolute; display: block; width: 5px; height: 5px; background: #000; border-radius: 5px; left: 0; bottom: -3px; }
.page { margin: 40px; font-size: 16px; color: #545454; text-align: center; }
.page li { display: inline-block; margin: 5px; }

.activeN{background-color: #7E5C40;color: #FFF;width: 25px;height: 25px;border-radius: 50%;}

.page li a{display: block;width: 25px;height: 25px;line-height: 25px; }
.page li:hover a { opacity: 0.9; }
.page li.prev a { background: url(../left_btn.png) center center no-repeat; }
.page li.next a { background: url(../right_btn.png) center center no-repeat; }
.page strong,
.page a { display:inline-block; width: 25px;height: 25px;text-align:center; line-height:29px;border:1px #ccc solid; border-radius: 50%;}
.page strong,
.page a:hover { background:#444; color:#fff;}


#page #menu, #nav-toggle, .search_box.for_mobile { display: none; }
.pageIndex #header { position: fixed; }

#header { background: #fff; font-size: 16px; padding: 25px 0; height: 150px; width: 100%; top: 0; z-index: 9999; }
#header .logo { display: block; float: left; position: relative; z-index: 99; }
#header .logo h1 { text-indent: -9999px; height: 1px; line-height: 1px; margin: 0; }

#menuTop { width: 100%; padding-left: 230px; text-align: right; }
#menuTop ul { position: relative; margin-top: 25px; }
#menuTop ul:before { content: ''; border-top: 1px solid #ddd; position: absolute; right: 0; top: 0; max-width: 880px; width: 100%; }
#menuTop li { display: inline-block; position: relative; margin-top: 5px; background: transparent; }
#menuTop li a { display: block; padding: 15px; line-height: 26px; color: #391911; }
#menuTop li ul { display: none; position: absolute; border: 1px solid #391911; background-color: #fff; left: -30%; right: -30%; width: auto; margin-top: 0; z-index: 51; }
#menuTop li li { display: block; width: 100%; margin-top: 0; }
#menuTop li li:first-child { padding-top: 5px; }
#menuTop li li a { padding: 5px; font-size: 15px; text-align: center; }
#menuTop li:hover ul { display: inline; }

.topTop { font-size: 14px; color: #391911; letter-spacing: 0.1em; line-height: 30px; position: relative; }
.topTop a i { padding-right: 5px; color: #391911;; }

.search_link a { display: none; margin-right: 30px; color: #391911; }
.search_box { display: inline-block; width: 230px; height: 30px; vertical-align: middle; position: relative; }
.search_txt { width: 100%; border: 1px solid #391b11; padding: 5px; }
.search_btn { width: 28px; height: 28px; position: absolute; right: 0; top: 0; padding: 5px; margin: 1px; background: none; }
.search_txt + .fa { position: absolute; right: 5px; top: 8px; color: #391b11; }

.round_link { display :block; float: right; line-height: 0; }
.round_link a { margin: 0 0 0 10px; vertical-align: middle; display: inline-block; }
.round_link a .White { display: none; }
.footer { padding: 30px 0 0; font-size: 14px; background:#f9f9f9; position: relative; z-index:99;}
.footer_center{
  max-width: 1000px;
  margin: 0 auto;
}

/* 20210111 updata */
/**/
.box_link { float: right; padding-right:10px;}
.box_link a { display:inline-block; border:1px #ccc solid; border-radius:5px; padding:5px;}
.box_link a:before { content:''; display:block; background:no-repeat center center; width:30px; height:30px;}
.box_link a.me_ft_fb:before { background-image:url(../images/facebook-f.svg);}
.box_link a.me_ft_line:before { background-image:url(../images/line.svg);}

.footer_info li p {font-size: 16px;color: #7E5B3F;line-height: 160%;margin-top: 5px;}
.footer_info li p:before { margin: 0 5px 0 0; background: no-repeat left center;}
.footer_info li p.tel:before { content:'電話：';}
.footer_info li p.tel2:before { content:'電話：';}
.footer_info li p.phone:before { content:'手機：';}
.footer_info li p.fax:before { content:'傳真：';}
.footer_info li p.taxid:before { content:'統編：';}
.footer_info li p.mail:before { content:'信箱：';}
.footer_info li p.add:before { content:'地址：';}
.footer_info li p.add2:before { content:'地址：';}



.total_view {}

#to_top {
	display: none; position: fixed; bottom: 10px; left: 10px;    
    z-index: 600; 
    width: 50px; height: 50px; 
    padding-top: 10px; font-size: 12px; color: #111; text-align: center; text-decoration: none; 
    background: #fff; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3); border-radius:100%; }
#to_top i { position: relative; display: block; margin: auto; backface-visibility: hidden; }
#to_top i:before,
#to_top i:after { content: ""; display: block; position: absolute; border-radius: 100px; background: #111; transition: all 100ms ease-in-out; }
#to_top i:before { transform: rotate(-40deg); }
#to_top i:after { transform: rotate(40deg); }
#to_top i.top { width: 20px; height: 20px; }
#to_top i.top:before, #to_top i.top:after { height: 15px; width: 1px; top: 0; left: 50%; }
#to_top i.top:before, #to_top i.top:after { transform-origin: 50% 0%; }

#bottom_menu { display:none; position: fixed; bottom: 0; left: 0; width:100%; z-index: 500; background: #fff; padding: 0; text-align: center; -webkit-box-shadow: 0 -2px 15px 0 rgba(0,0,0,0.2); box-shadow: 0 -2px 15px 0 rgba(0,0,0,0.2); }

#bottom_menu li:first-child:nth-last-child(1),
#bottom_menu li:first-child:nth-last-child(1) ~ li {
	width: 100%;  display: block; float: left;  border-right: 1px solid #ddd;
}
#bottom_menu li:first-child:nth-last-child(2),
#bottom_menu li:first-child:nth-last-child(2) ~ li {
	width: 50%;  display: block; float: left;  border-right: 1px solid #ddd;
}
#bottom_menu li:first-child:nth-last-child(3),
#bottom_menu li:first-child:nth-last-child(3) ~ li {
	width: 33.3333%;  display: block; float: left;  border-right: 1px solid #ddd;
}
#bottom_menu li:first-child:nth-last-child(4),
#bottom_menu li:first-child:nth-last-child(4) ~ li {
	width: 25;  display: block; float: left;  border-right: 1px solid #ddd;
}

#bottom_menu li:nth-child(3) { border:none;}
#bottom_menu li a{ line-height: 26px; display: block; font-size: 13px; padding: 9px 5px; }
#bottom_menu li .fa { display: block; }
.keywords { width: 100%; display: block; height: 2px; overflow: hidden; color: #072457; text-indent: 100%; white-space: nowrap; -webkit-text-size-adjust: none; position: absolute; bottom: 0; }

/*  首頁  */
.news_part { width: 100%; max-width: 1200px; margin: auto; padding-left: 250px; padding-top: 50px; padding-bottom: 50px; }
.title_box { font-family: 'Josefin Sans','sans-serif','微軟正黑體'; font-size: 24px; color: #212121; text-align: center; display: inline-block; vertical-align: top; width: 245px; }
.news_part .title_box { margin-left: -250px; padding: 15px 0; }
.title_box span { font-family: 'sans-serif','微軟正黑體'; font-size: 20px; color: #202020; }
.news_list { display: inline-block; vertical-align: top; width: 100%; }
.news_list ul li { letter-spacing: 1px; padding: 15px 0; display: block; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; border-bottom:1px #ccc solid; }
.news_list ul li span { font-size: 15px; color: #a6a6a6; width: 150px; padding-left: 15px; display: inline-block; }
.news_list ul li:hover { box-shadow: 0px 0px 10px rgba(0,0,0,0.3); border:none; }
.pageIndex .main_part { border-top: 1px solid #ccc; }
.main_part { width: 100%; max-width: 1400px; margin: auto; padding: 90px 20px;}
.products-list .title_box { width: 100%; }

.products-list{display: flex;flex-wrap: wrap;}
.products-list .item {width: calc(25% - 20px);display:inline-block;vertical-align:top;margin: 35px 10px;}
.products-list .item a{display: block;margin: 0 auto;position: relative; }
.products-list .pic{display: block;position: relative;border-radius: 8px;text-align: center;padding-bottom:100%;height:0;overflow: hidden;}
.products-list .pic:after{
  content: "";
  position: absolute;
  background-color: rgba(255,255,255,0.8);
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  opacity: 0;
  transition: 0.5s;
}

.products-list .pic:before{
  content: "";
  position: absolute;
  background-image: url(../images/bh_img015.png);
  background-size: contain;
  background-repeat: no-repeat;
  width: 3vw;
  height: 5vw;
  left: 50%;
  bottom: -100px;
  opacity: 0;
  transition: 0.5s;
  transform: translate(-50% , 50%);
  z-index: 5;
}

.products-list .pic:hover:after{opacity: 1;}
.products-list .pic:hover:before{opacity: 1;bottom: 50%;}

.products-list .pic img {
  width: 100%;
  min-height: 330px;
  object-fit: cover;
  
}

.item.show:nth-child(odd) a { animation-name: zoomIn; animation-duration: 2s; animation-delay: 0.2s; }
.item.show:nth-child(even) a { animation-name: zoomIn; animation-duration: 2s; animation-delay: 0.2s; }

/* other pages */
.banner { font-size: 40px; padding: 65px 0; text-align:center; background:repeat center center #f9f9f9;}
.banA {background-image: url(../images/smallBanner1.png);}
.banB {background-image: url(../images/smallBanner2.png);}
.banC {background-image: url(../images/smallBanner3.png);}
.banD {background-image: url(../images/smallBanner4.png);}
.banE {background-image: url(../images/smallBanner5.png);}
.banF {background-image: url(../images/smallBanner6.png);}


/* products */
.product-layer-two { margin: 20px 0;text-align: center;}
.product-layer-two li { display: inline-block; margin: 10px;padding: 5px 0;position: relative; }
.product-layer-two li a { position: relative;background: #fff; padding: 5px 14px; display: block; font-size: 16px; color: #391911; }
.product-layer-two li.active a { font-weight: bold; }
.product-layer-two li.active li a { font-weight: normal; }
.product-layer-two li a:after { position: absolute; content: ''; display: block; right: 0; top: 0; width: 0; height: 0; border-style: solid; border-width: 0 20px 15px 0; border-color: transparent #391911 transparent transparent; }
.product-layer-two li ul { position: absolute; z-index: 100;top: 100%;width: 110%;margin: 0;padding: 0;list-style: none;border: none !important;outline: none;box-shadow: none;}
.product-layer-two li li { display: none;margin: 0; }
.product-layer-two li li a { background: #fff; border: none; font-size: 14px; padding: 4px 8px; }
.product-layer-two li:hover ul { border: 2px solid #391911; }
.product-layer-two li:hover li { display: block; }
.product-layer-two li li a:after { display: none; }

.product-wrapper { margin: 0 auto; position: relative;margin-top: 6vw;}
.fixedsticky { top:110px; }
.mobile_product_name { display: none; margin-bottom: 20px; }
.product_main { padding: 0 10px; display: inline-block; width: 71%; vertical-align: top; }
.sidebarBtn { padding: 15px; display: inline-block; width: 28%; vertical-align:top; border:5px #ddd solid; background:#fff;}
.sidebarBtn h2{color: #583F2D;font-size: 24px;font-weight: normal;}
.sidebarBtn .price { color: #7B583F; font-size: 22px; font-weight: bold; padding: 10px 0 30px 0; border-bottom: 1px solid #ECE1D9; letter-spacing: 1px; }
.sidebarBtn .sp_price { color: #7B583F; font-size: 22px; font-weight: bold; }
.sidebarBtn .price span { font-size: 16px; }
.product_info { margin: 20px 0; }
.product_info li {display: flex;flex-wrap: wrap;margin-bottom:25px; }
.product_info li span {width: 100%;display: inline-block; vertical-align: top; width: 85px;font-size: 14px; color: #7E5C40; }
.product_info li .txt_box {width: 100%;display: inline-block;vertical-align: top;font-size: 16px;color: #555; }
fieldset { border: none; padding: 0; margin: 0; }
.radio-inline__input { clip: rect(1px, 1px, 1px, 1px); position: absolute !important; }
.radio-inline__label {width: 100%;display: inline-block;padding: 2px 8px;margin-top: 10px;border-radius: 5px;transition: all .2s; color: #7E5C40;border: 1px solid #ccc; }
.radio-inline__input:checked + .radio-inline__label { background: #fff; border: 1px solid #F2B312; }
.amountNum { width: 100%;padding: 2px 8px; border: 1px solid #F2B312;border-radius: 5px;line-height: 28px;color: #7E5C40;margin-top: 10px;}
.action-button { width: 100%; border-radius: 50px; background-color: #7E5C40;color: #fff; text-align: center; line-height: 50px; }
.action-button:hover{background: #f8b71f;}
/*20190415 inquirycar*/
.inquiry_a1 { width: 47%; border-radius: 5px; background: #f7655b; color: #fff; text-align: center; line-height: 50px; margin-top:10px; }
.inquiry_a2 { border-radius: 5px; background: #83acec; color: #fff; display: inline-block; width: 47%; text-align: center; line-height:50px; margin-left: 7px; }

.toShare { border-top: 1px solid #e6e6e6; margin-top: 25px; padding-top: 20px; }
.toShare b{display: block;width: 100%;font-size: 15px;color: #7B583F;margin-bottom: 15px;font-weight: normal;}
.toShare a { display: inline-block; margin-right: 10px; }

.product_pic { padding-bottom: 20px;position: relative; }
.product_pic #bx-pager{display: flex;flex-wrap: wrap;width: 100%;padding: 0;font-size: 12px;color:#391911;position: relative;top: 0;left:0;margin-top: 15px;}
.product_pic #bx-pager .block { margin-left: 3px; margin-top: 10px; margin-bottom: 10px; }
.product_pic #bx-pager a{display: block;width: 120px;height: 120px;margin-right: 15px;}
.product_pic #bx-pager a img { width: 100%; }
.product_pic .bx-wrapper{display: inline-block;vertical-align: top;width: 100%;max-width: 500px;padding: 0 10px;margin: 0;}
.product_pic .bx-wrapper .bx-viewport {}

.accordion { margin: 1rem 0; padding: 0; list-style: none; border-top: 1px solid #e5e5e5; }
.accordion-item { border-bottom: 1px solid #e5e5e5; }
.accordion-thumb { margin: 0; padding: .8rem 0; cursor: pointer; font-weight: normal; position: relative; font-size: 18px; }
.accordion-thumb::before { position: absolute; right: 0; content: ''; display: inline-block; height: 7px; width: 7px; margin-right: 1rem; margin-top: .5rem; vertical-align: middle; border-right: 1px solid; border-bottom: 1px solid; -webkit-transform: rotate(-45deg);       transform: rotate(-45deg); -webkit-transition: -webkit-transform .2s ease-out; transition: -webkit-transform .2s ease-out; transition: transform .2s ease-out; transition: transform .2s ease-out, -webkit-transform .2s ease-out; }
.accordion-panel { margin: 0; padding-bottom: .8rem; display: none; }
.accordion-item.is-active .accordion-thumb::before { -webkit-transform: rotate(45deg);transform: rotate(45deg);}
.accordion-panel img { max-width: 100%; }

.qalist { border: 1px solid #f5f5f5; width: 100%; margin: 20px auto; background: #fafafa; }
.qalist .infomation-left { width: 25%; float: left; font-size: 13px; color: #666; padding: 15px 10px; border: 1px solid #f5f5f5; border-bottom: none; margin: -1px 0 0 -1px; line-height: 18px; }
.qalist .infomation-left span { color: #b9b9b9; display: block; }
.qalist .infomation-right { width: 75%; float: left; background: #fff; font-size: 15px; color: #444; border-bottom: 1px solid #f5f5f5; }

.quest, .answer { position: relative; padding-left: 40px; margin: 15px; }
.quest:before, .answer:before { position: absolute; display: block; width: 40px; height: 100%; left: 0; font-family: 'Josefin Sans','sans-serif','微軟正黑體'; padding:5px; }
.quest:before {content:'Q';color: #ada17e;}
.answer:before {content:'A';color: #cc0000;}
.qaform { margin: 20px auto; font-size: 15px; color: #545454; line-height: 26px; }

.half_box { width:50%; float:left; padding-right: 10px; }
.half_box li { margin: 10px 0; }
.half_box li.btn_blankTop { margin-top: 120px; }

.breakF { border: 1px solid #ddd; display: block; width: 100%; padding: 5px; }
.productBtn { width: 100%; line-height: 50px; font-size: 15px; padding-left: 15%; background-repeat: no-repeat; border: none; margin-top: 10px; text-align: left; }
.lastaction { color: #aaa; background-color: #e8e4d8; background-image: url(../images/last_AC.png); background-position: right top; }
.nextaction { color: #fff; background-color: #ada17e; background-image: url(../images/next_AC.png); background-position: right bottom; }
.lastPage {border-radius: 50px; font-size: 16px; color: #fff; background: #ADA17E; padding: 10px 20px; display: block; margin: 40px auto; width: 220px; text-align: center; }

.stepImg { display: block; margin: 40px auto; max-width: 500px; width: 98%; }
.stepImg span { font-size: 15px; display: inline-block; text-align: center; color: #545454;letter-spacing: 1px;width: 33.3%; }
.stepImg span.active {font-weight: bold;}
.stepImg span.one { text-align: left; }
.stepImg span.three { text-align: right; }
.stepImg img { display: block; margin: auto; max-width: 100%; }

.shopping-cart { width: 100%; margin: 15px auto; padding: 0; width: 100%; overflow: hidden; font-size: 16px; }
.shopping-cart.check { margin: 10px auto; }
.shopping-cart .cart_head { background: #7E5C40; color: #fff; }
.shopping-cart .row { position: relative; height: auto; margin: 25px 0; clear: both; }
.shopping-cart.check .row { margin-top: 0; }
.shopping-cart .cart_content .row {border-bottom: 1px dashed #ccc; }
.shopping-cart .cell { padding: 10px; text-align: center; width: 20%; float: left; vertical-align: top; font-size: 16px; letter-spacing: 1px; padding: 5px; } 
.shopping-cart .cell.product_name { width: 44%; text-align: left; padding-left: 90px; position: relative; min-height: 76px;}
.shopping-cart.check .cell { width: 25%; }
.shopping-cart.check .cell.product_name { width: 42%; }
.shopping-cart .cell.product_name span { font-size: 15px; font-weight: normal; display: block; color: #7E593F; margin-top: 5px; }
.shopping-cart .cell.amount { width: 8%; }
.shopping-cart .cart_head .cell.product_name { min-height: initial; }

.small_pic { position: absolute; width: 75px; height: 75px; top: 0; margin-left:-90px; display: inline-block; vertical-align: top; overflow: hidden; }
.small_pic img { max-width: 100%; }
.payment { margin: 30px; float: left; }
.payment li { margin: 15px; }
.total_amount { width: 350px; margin-top: 30px; margin-left: auto; margin-right: 5px; color: #7E5B3F; }
.total_amount ul { border: 1px solid #ECE1D9; position: relative; padding: 20px; margin-bottom: 30px; }
/* .total_amount ul:after { display: block; position: absolute; content: ''; width: 100%; height: 100%; top: 5px; right: -5px; border-right: 1px dashed #ddd; border-bottom: 1px dashed #ddd; } */
.total_amount li { margin: 10px 0;padding: 0 0 10px 0;border-bottom: 1px dashed #CCC;}
.total_amount li:last-child{border-bottom: none;}
.total_amount li span { float: right; }
.total_amount .rewrite_simple, .total_amount .send_simple { width: 150px; margin-right: 0; }
.total_amount .send_simple { float: right; }

.car_page .list_before.account:before { content: ''; position: absolute; width: 45px; height: 1px; background: #444; bottom: -30px; }
.car_page .list_before.info:before { display: none; }
.car_page .list_before li.btn { padding: 0; padding-top: 20px;display: none;}
.declaration { background: #eee; line-height: 40px; padding: 5px 15px; }

.notetext { margin: 20px 0 40px; padding: 0 20px; color: #444; line-height: 30px; }



/* workshow */
.lb-data .lb-caption { font-weight: normal; }
.subalbum-menu { margin: 30px 0; padding: 0 15px; }
.subalbum-menu h2 { font-size: 20px; color: #391911; display: inline-block; vertical-align: middle; float: left; }
.block { display: inline-block; width: 6px; height: 6px; margin: 0 10px; background: #391911; vertical-align: middle; }

.other_subalbum { display: block; overflow: hidden; }
.other_subalbum li { display: inline-block; background: #fff; width:31%; margin:10px 1%; border:none !important; }
.other_subalbum li a { line-height:0;}
.other_subalbum li a img { max-width:100%; }
.other_subalbum li.active {}
.other_subalbum li.active a {}

.other_album { position: relative; }
.other_album:before { display: block; position: absolute; content: ''; width: 100%; height: 1px; background: #ccc; top: 10px; }
.album_fixed_title { font-size: 20px; color: #666; margin-top: -15px; padding-right: 30px; display: inline-block; position: relative; background: #fff; }
.album_fixed_title embed { vertical-align: middle; margin-right: 10px; }
.other_album_choice { margin: 30px 0; }
.other_album_choice li { margin-top: 15px; margin-bottom: 5px; margin-right: 10px; background: #ADA17E; font-size: 15px; display: inline-block; border-radius: 18px; padding: 7px 20px; }
.other_album_choice li a { color: #fff; }
.other_album_choice li .fa { height: 14px; overflow: hidden; margin-left: 10px; margin-right: 10px; vertical-align: top; }

.pic-list .item { width: 31%; display:inline-block; vertical-align:top; padding: 0 10px; margin:10px 1%;}
.pic-list .item a { display: block; margin: 0 auto; }
.pic-list .show_pic { display: block; position: relative; overflow: hidden; text-align: center; line-height:0; height:0; padding-bottom:75%; /* 50%=2:1 75%=4:3 100%=1:1 */ }
.pic-list .show_pic img { max-width: 100%; display: inline-block; }
.pic-list .item h6 { font-size:16px; color:#666; padding:5px;}


.show-list .item { width: 31%; display:inline-block; vertical-align:top; padding: 0 10px; margin:20px 1%; }
.show-list .item a { display: block; max-width: 100%; margin: 0 auto; position: relative; }
.show-list .show_pic { display: block; position: relative; overflow: hidden; text-align: center; line-height:0; height:0; padding-bottom:75%; /* 50%=2:1 75%=4:3 100%=1:1 */ }
.show-list .show_pic img { max-width: 100%; display: inline-block; }
.show-list .show_name { font-size: 17px; color: #333; letter-spacing: 0.15em; line-height: 1.5; margin-top: 10px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; height: 26px; }
.show-list .item:hover .show_name { color: #f8b720; }
.overlay { position: absolute; content: ''; width: 100%; height: 100%; display: block; background: rgba(0,0,0,.3); left: 0; top: 0; opacity: 0; -webkit-transform: scale(0); transform: scale(0); transition: all .4s 100ms cubic-bezier(.42,0,.58,1); }
.show-list .item:hover .overlay{ opacity: 1; -webkit-transform:  scale(1); transform: scale(1); }


/* dropdown page */
.promotion_title { font-size: 13px; color: #666; border-bottom: 1px solid #ADA17E; }
.promotion_title span { font-size: 13px; color: #666; }

.time { letter-spacing: 0.25em; font-size: 24px; color: #666; }
.promotion_title h2 { font-size: 24px; color: #101010; font-weight: normal; border-bottom: 2px solid #ADA17E; padding-bottom: 5px; margin-bottom: 1px; }

.other_promotion li { width: 30.3%; float: left; padding: 5px 15px; margin: 20px 1.5%; border-top: 1px solid #e5e5e5; font-size: 13px; line-height: 20px; color: #666; }
.other_promotion .pmtTime { font-size: 22px; margin: 10px 0; }
.other_promotion .pmtTime span { float: right; font-size: 13px; }
.other_promotion .pmtTitle h3{ font-size: 16px; color: #444; margin-top: 20px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; height: 45px; font-weight: normal; }
.other_promotion li:hover { border-top: 1px solid #111; }
.other_promotion li:hover h3 { text-decoration: underline; font-weight: bold; }

.edit { width: 96%; margin: 0 auto; padding: 20px 0; }
.edit img { max-width:100%; height:auto !important;}

.information_left iframe{width: 100%;height: 400px;margin-bottom: 35px;}

.blank_letter{font-family: 'Noto Serif TC Medium';font-size: 30px;color: #7E593F;margin-bottom: 2.5vw;font-weight: normal;}

.list_before { margin-top: 30px; margin-bottom: 20px; font-size: 15px; color: #444; display: block; width: 100%; position: relative; }
.list_before li {margin: 5px 0;position: relative;line-height: 1.5;color: #666;font-weight: 500;}
.list_before.info li{ padding-left: 50px;}
.list_before.account li{ padding-left: 65px;}
.list_before li.btn { padding: 0; padding-bottom: 30px;display: none;}
.list_before li.btn .animated-arrow { margin: 30px 0; width: 100%;}

.TEL:before,
.TEL2:before,
.PHONE:before,
.FAX:before,
.TAXID:before,
.MAIL:before,
.ADD:before,
.ADD2:before,.LINE:before { position: absolute; display: block; width: 35px; left: 0; font-size: 14px;letter-spacing: -1px; }

.TEL:before {content: "電話";}
.TEL2:before {content: "電話";}
.PHONE:before {content: "手機";}
.LINE:before {content: "LINE";}
.FAX:before {content: "傳真";}
.TAXID:before {content: "統編";}
.MAIL:before {content: "信箱";}
.ADD:before {content: "地址";}
.ADD2:before {content: "地址";}

.ACCN1:before, .ACCN2:before, .ACCN3:before, .ACCN4:before { position: absolute; display: block; width: 60px; left: 0; font-size: 14px; font-weight: bold; }
.ACCN1:before {content: "戶名";}
.ACCN2:before {content: "銀行名稱";}
.ACCN3:before {content: "銀行代碼";}
.ACCN4:before {content: "銀行帳號";}


/*--------聯絡我們表單 ----------*/
.note { font-size: 13px; text-align: right;display: none;}
.contact_form {margin-bottom: 20px; font-size: 15px; color: #444; }
.contact_form li { display: flex;flex-wrap: wrap;align-items: flex-start;padding-bottom: 10px;border-bottom: 1px solid #EEE;margin-bottom: 10px;}
.contact_form li.last{border: none;text-align: right;margin-top: 30px;padding-left: 0;justify-content: flex-end;align-items: center;color: #666;}
.contact_form li .form__label{width: 110px;padding-right: 10px; vertical-align: top;color: #666;}
.contact_form li .form__insert{width: calc(100% - 110px);display: flex;align-items: center;}
.contact_form li .form__insert img{margin-left: 15px;}
/*--------匯款通知表單----------*/
.formbox_form { margin-top: 30px; margin-bottom: 30px; color: #444; font-size: 15px; line-height: 1.5; }
.formbox_form li { display: flex;flex-wrap: wrap; padding-top: 10px; padding-bottom: 10px;color: #7E593F;}
.formbox_form li.last { margin-top: 30px; }
.formbox_form li .form__label{width: 150px;}
.formbox_form li .form__insert{width: calc(100% - 150px);}

/*--------sms inquiry 表單-------*/
.form_formonly li { display: block; padding-top: 10px; padding-bottom: 10px; padding-left: 160px; border-bottom: 1px solid #C2BCB4; }
.form_formonly li.last { border: none; text-align: right; margin-top: 30px; padding-left: 0; }
.form_formonly li .form__label { display: inline-block; width: 145px; text-align: right; padding-right: 15px; margin-left: -150px; vertical-align: top; }
.form_formonly li .form__insert { display: inline-block; width: 100%; vertical-align: top; }
.form_description { margin: 25px auto; width: 92%; font-size: 14px; color: #777263; letter-spacing: 2px; }

/* checkbox radio  樣式 */
.form label { display: block; position: relative; float: left; width: auto; margin-right: 20px; margin-bottom: 5px; color: #858585; }
.form label .inputbox { width: 16px; height: 16px; position: relative; margin-right: 4px; -webkit-appearance: none; background-repeat: no-repeat; background-color: transparent; top: 3px; outline: none; display: inline-block; border: 0; }
.form label.Bigcheck { float: none; display: block; color: #4c4c4c; font-size: 15px;top: 7px;}
.form label .inputbox.Big { width: 17px; height: 17px;background-size:contain;background-repeat:no-repeat; }
.form label.circle .inputbox { background-image: url(../images/circle.png); }
.form label.circle input:checked { background-image: url(../images/circle_ok.png); }
.form label.check .inputbox { background-image: url(../images/check.png); }
.form label.check input:checked { background-image: url(../images/check_ok.png); }
.form label.Bigcheck .inputbox { background-image: url(../images/big_check.png); }
.form label.Bigcheck input:checked { background-image: url(../images/big_check_ok.png); }
.form select { -webkit-appearance: button; background-color: #EDEDED; background-image: url(../images/select_arrow.png); background-position: right center; background-repeat: no-repeat; vertical-align: middle; border: 1px solid #C2BCB4; color: #666; overflow: hidden; margin-right: 10px; margin-bottom: 5px; padding: 3px 26px 3px 3px; text-overflow: ellipsis; white-space: nowrap; }


/* input 樣式 */
.noborder {border: none; width: 100%; padding: 5px; vertical-align: middle;border: 1px solid #A68C7B;border-radius: 8px;}
.border200 { width: 100%; border: 1px solid #888; padding: 5px;border-radius: 5px;}
.longer { width: 400px; }
.filltext { width: 200px; background: #D2CCB9; vertical-align: middle; display: inline-block; padding: 5px 0; border: none; margin-right: 5px; margin-bottom: 5px; }

/* 驗證碼 */
.captcha { width: 100px; }
.captcha_img { vertical-align: middle; margin-left: 10px; display: inline-block; }
.captcha_img .fa{ vertical-align: super; margin-left: 10px; -webkit-transition: all .4s ease; -moz-transition: all .4s ease; -ms-transition: all .4s ease; -o-transition: all .4s ease; transition: all .4s ease; }
/* 表單按鈕 , 按鈕*/
.rewrite { background: none; padding: 10px 20px; }
.innersend { width: inherit; padding-left: 50px; line-height: 50px; background: none; text-align: left; }
.last .animated-arrow { display: inline-block; padding: 0; margin: 0 0 0 20px; vertical-align: middle; }
.rewrite_simple, .send_simple{width: 220px;border-radius: 50px;font-size: 15px;padding: 15px 30px;position: relative;margin-right: 20px;}

.rewrite_simple { background: #F2B312 url(../images/arrow01.png) 10% center no-repeat;color:#7C5840;text-align: right;}
.send_simple { background: #DD652B url(../images/arrow02.png) 88% center no-repeat;color:#FFF;text-align: left;}

/*------------通用滿版分段抬頭-------------*/
.separate_title { font-size: 18px; color: #7E5B3F; padding: 10px 0 10px 40px; background: #eee url(../images/separateTitle.png) left center no-repeat;font-weight: normal;letter-spacing: 1px;background-color: #FAF7EE;}
.separate_title .note { font-size: 13px; float: none; padding-left: 20px; }

/* 滑動箭頭 按鈕 */
.animated-arrow { background: #ADA17E; color: #fff; display: block; margin-top: 20px; margin-left: auto; height: 50px; line-height: 50px; overflow: hidden; width: 250px; padding-left: 5%; position: relative; }
.animated-arrow.stay_mid { margin-left: auto; margin-right: auto; }
.arrow { position: absolute; top: 50%; left: 75%; -webkit-transform: translate(-50%, -50%);       transform: translate(-50%, -50%); fill: #fff; -webkit-transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1); transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1); }

/* 20210824 updata */
.f_link_box { text-align:center;}
.f_link_box a { font-size:13px; color:#aaa;}
.f_link_box a:after { content:','; display:inline-block; font-size:13px; color:#aaa;}
.f_link_box a:hover { color:#3a8e98;}
.f_link_box a:last-child:after { display:none;}
 

@media screen and (max-width: 1200px) {
.show-list .item {}
.show-list .show_pic {}
.show-list .show_pic img {}
.products-list .pic:before{width: 45px;height: 70px;}

@media screen and (max-width: 980px) {
#header { height: auto; }
#menuTop { position: relative; padding-left: 0; }
.round_link { margin-bottom: 10px; float: none; }
#menuTop ul:before { border-top: 1px solid #391911; max-width: initial; width: 96%; margin-right: 2%; }
#menuTop ul ul:before { display: none; }
#menuTop ul { clear: both; text-align: center; }
#menuTop ul li { /*margin-top: 0;*/}
#menuTop ul li a { padding: 15px 28px; }
#menuTop li ul { margin-top: -5px; }
#menuTop ul li li a { padding: 5px; }
.topTop { padding-top: 10px; width: 96%; margin: auto; }

.main_part { padding: 50px 20px; }
.news_part { padding-left: 20px; padding-right: 20px; }
.title_box { width: 200px; font-size: 22px; display: block; }
.news_part .title_box { margin: auto; }
.products-list .item{width: calc(33.333% - 10px);margin: 20px 5px;}

.other_promotion li { width: 31.3%; padding: 0 10px; margin: 20px 1%; }

.rewrite { padding: 10px; }

.subalbum-menu h2 { float: none; margin-bottom: 15px; }
.product_main { padding: 30px 0.5em 30px 0; width: 64%; }
.sidebarBtn { width: 35%; }


@media screen and (max-width: 768px) {
#menuTop { display: none; }
.pageIndex #header, #header { position: relative; }
#header .logo { margin: auto; text-align: center; float: none; }

#nav-toggle { margin-left: 50px; padding: 20px 0; position: relative; display: block; float: left; width: 35px; margin-top: 10px; z-index: 101; }
#nav-toggle span, #nav-toggle span:before, #nav-toggle span:after { cursor: pointer; border-radius: 1px; height: 1px; width: 35px; background: #222; position: absolute; display: block; content: ''; }
#nav-toggle span:before { top: -10px; }
#nav-toggle span:after { bottom: -10px; }

.search_box.for_mobile { display: block; width: 100%; }

#content_main { margin-top: auto; }
.parallax_box { position: relative; top: 0; }
.other_subalbum li { width:47%;}
.pic-list .item { width: 47%; }

.subalbum-menu { padding: 0; }
.show_content { width: 100%;}
.show-list .item { width: 47%; }
.show-list .show_name {}
.stepImg span { font-size: 14px; }
.shopping-cart { width: 100%; }
.shopping-cart .cart_head { display: none; }
.shopping-cart .cart_content .row { margin: 20px 0; display: block; border-bottom: 2px solid #ddd; margin-left: 90px; display: inline-block; }
.shopping-cart .cell { width: 100%; display: block; text-align: right; font-size: 14px; border-bottom: 1px solid #ccc; }
.shopping-cart .cell.product_name { min-height: 86px; font-size: 16px; text-align: right; padding-left: 5px; }
.shopping-cart .cell.product_name,.shopping-cart .cell.amount,
.shopping-cart.check .cell.product_name,
.shopping-cart.check .cell { width: 100%; }

.small_pic { left: 0; }
.shopping-cart  .cell:last-child { border-bottom: 2px solid #adaaaa; }
.shopping-cart  .cell:before { content: attr(data-label); float: left; font-weight: bold; color: #a09e91; }
.payment { float: none; }
.total_amount { width: auto; margin-right: auto; }
.car_page .information_left { width: 90%; display: block; margin: 50px auto 20px; }
.car_page .list_before.account { width: 100%; }
.car_page .list_before.info {width: 250px; }

.other_promotion li { width: 48%; }

.contact_content { padding: 0; }
.contact_content .information_left { width: 100%; margin-left: 0; }

.blank_letter{font-size: 22px;}
.list_before.info:before { display: none; }
.list_before.info {width: 100%;}
.list_before.account { width: 40%; max-width: 300px; float: left; }
.contact_content .information_right { width:100%; padding:10px; }

.contact_form li .form__label{width: 90px;}
.contact_form li .form__insert{width: calc(100% - 90px);}
.noborder{border-radius: 5px;}

.last .form__label{display: none;}
.last .form__insert{width: 100% !important;}

/* sms inquiry form */
.form_formonly li { padding-left: 115px; font-size: 14px; }
.form_formonly li .form__label { width: 110px; padding-right: 10px; margin-left: -122px; }
.formbox_form li.last ,.form_formonly li.last { text-align: center; }

.mobile_product_name { display: block; margin-bottom:10px;}
.product_pic { padding-top: 20px; }
.product_main { width: 100%; padding:0;}
.sidebarBtn { padding: 1em 10px; width: 100%; margin: 20px auto 0; display: block; }
.product_info li {}
.product_info li span { width: 80px;}
.fixedsticky { top: initial; }
.half_box { padding-right: 5%; }






/* 20210824 updata */
.f_link_box { display:none;}

@media screen and (max-width: 600px) {
#nav-toggle { margin-left: 20px; }
.add_blank { width: 41px; }
.total_view { position: initial; display: block; }

.title_box { font-size: 20px; }
.title_box span { font-size: 15px; }
.news_part { padding-left: 10px; padding-right: 10px; }
.news_list ul li { padding: 10px; }
.news_list ul li span { display: block; padding: 0; }
.main_part { padding: 50px 20px; }
.products-list .item{width: calc(50% - 10px);margin: 10px 5px;}
.products-list .item.first_box{width: 100%;}


.other_subalbum li { display:block; width:96%; margin:10px 2%; }
.show-list .item { display:block; width:96%; margin:10px 2%; }

.pic-list .item { width:45%; margin:10px 2%; }
.other_album_choice li { font-size: 14px; }

.product-layer-two li { margin: 0 5px 0 0; }
.product_pic .bx-wrapper { padding:0; margin:0;}
.product_pic { padding: 0; }
.product_pic #bx-pager { position:static; width:100%; margin:0; padding:0; }
.product_pic #bx-pager a { width: 45px; height: 45px; }
.half_box { width:100%; float: none; padding: 0; margin: auto; }
.half_box li.btn_blankTop { margin-top: 20px; }
.productBtn { width: 47%; margin-right: 2%; }
.sidebarBtn h2 { font-size: 20px; }
.qalist .infomation-right, .qalist .infomation-left { float: none; width: 100%; }


.other_promotion li { width: 92%; margin-right: 4%; margin-left: 4%; }

.contact_content { padding: 30px 0; }
.list_before.info { width: 100%; margin-right: 0; float: none; }
.list_before.account { width: 100%; float: none; margin-bottom: 40px; }
.last .animated-arrow { margin: 0; width: 200px; }

/* contact form */

/* remit form */
.formbox_form li { padding: 0; }
.formbox_form li .form__label { width: 100%; margin-left: 0; }
.formbox_form li .form__insert { padding-left: 13px; }
/* input style */
.border200 , .longer { width: 100%; }
.border200.captcha { width: 100px; }
.border200.fix200 { width: 180px; }
.filltext { width: 150px; padding: 5px 3px; 
}
/* btn */
.rewrite_simple, .send_simple {width: 150px;margin: 10px 5px;font-size: 16px;padding: 10px 20px;}



}
/* 600 */
}
/* 768 */
}
/* 980 */
}
/* 1200 */






/* 大於 768 才有的 動畫效果 */
@media screen and (min-width: 768px) {
.box_link li:hover { opacity: 0.75; }
#to_top:hover i:before { transform: rotate(-50deg); }
#to_top:hover i:after { transform: rotate(50deg); }
.animated-arrow:hover .arrow { -webkit-transform: translate(0, -50%);         transform: translate(0, -50%); }

.captcha_img:hover .fa { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); }
.rewrite_simple:hover, .send_simple:hover { opacity: 0.9; }
.other_album_choice li:hover .fa { margin-left: 15px; margin-right: 5px; -webkit-transition: ease .4s; -moz-transition: ease .4s; -ms-transition: ease .4s; -o-transition: ease .4s; transition: ease .4s; }
}
/* > 768 特效 */


.fadeInUp { -webkit-animation-name: fadeInUp; animation-name: fadeInUp; }
.fadeInDown { -webkit-animation-name: fadeInDown; animation-name: fadeInDown; }
.fadeInLeft { -webkit-animation-name: fadeInLeft; animation-name: fadeInLeft; }
.fadeInRight { -webkit-animation-name: fadeInRight; animation-name: fadeInRight; }
.animated15 { -webkit-animation-duration: 1.5s; animation-duration: 1.5s; -webkit-animation-fill-mode: both; animation-fill-mode: both; }
.delay5 { -webkit-animation-delay: 0.4s; animation-delay: 0.4s; }
@keyframes fadeInUp {
  0% { opacity: 0; -webkit-transform: translateY(10px)scale(1); -ms-transform: translateY(10px)scale(1); transform: translateY(10px)scale(1);
  }

  100% { opacity: 1; -webkit-transform: translateY(0)scale(1); -ms-transform: translateY(0)scale(1); transform: translateY(0)scale(1);
  }
}
@keyframes fadeInDown {
  0% { opacity: 0; -webkit-transform: translateY(-10px)scale(1); -ms-transform: translateY(-10px)scale(1); transform: translateY(-10px)scale(1);
  }

  100% { opacity: 1; -webkit-transform: translateY(0)scale(1); -ms-transform: translateY(0)scale(1); transform: translateY(0)scale(1);
  }
}
@keyframes fadeInRight {
  0% { opacity: 0; -webkit-transform: translateX(10px)scale(1); -ms-transform: translateX(10px)scale(1); transform: translateX(10px)scale(1);
  }

  100% { opacity: 1; -webkit-transform: translateX(0)scale(1); -ms-transform: translateX(0)scale(1); transform: translateX(0)scale(1);
  }
}
@keyframes fadeInLeft {
  0% { opacity: 0; -webkit-transform: translateX(-10px)scale(1); -ms-transform: translateX(-10px)scale(1); transform: translateX(-10px)scale(1);
  }

  100% { opacity: 1; -webkit-transform: translateX(0)scale(1); -ms-transform: translateX(0)scale(1); transform: translateX(0)scale(1);
  }
}
@keyframes zoomIn { from {     opacity: 0.2;     transform: scale3d(.95, .95, .95); }
    30% {     opacity: 0.8;     transform: scale3d(1, 1, 1); }
    70% {     opacity: 1; }
}




/* - right_member_in */
.right_member_in {}
.right_member_in ul {}
.right_member_in li { display:block; font-size:14px; word-break:break-word;}
.right_member_in input { width:34px; height: 16px; margin:5px auto 0; background: url(../images/logout.png) no-repeat center center; display: block;}

/* - member index */
.member_title { margin:0 auto; max-width: 800px; text-align:center; margin-bottom: 40px;}
.member_title h4{font-size: 28px;color: #7E5B3F;letter-spacing: 2px;font-weight: normal;}
.member_title img {}
.member_title p { font-size:20px;color: #545454;margin: 30px auto 5px;padding: 40px 0 0 0;border-top: 3px #ECE1D9 solid;}
.member_title em { font-size:16px;color: #545454;font-style:normal;}

.member_order { max-width:800px; margin:0 auto; display: flex;flex-wrap: wrap;align-items: center;justify-content: center;}
.member_order a {
  width:220px;
  background-color: #7E5C40;
  font-size: 15px;
  color: #FFF;
  letter-spacing: 1px;
  padding: 15px;
  border-radius: 50px;
  margin: 10px 15px;
  text-align: center;
  transition: 0.5s;
}

.member_order a:hover{background-color: #F2B312;}

/* - member login */
.member_title h2 { font-size:25px;color: #58402E;font-weight: normal;}
.member_login,
.member_login_regist { max-width:490px; margin:0 auto 50px; }
.member_login tr td { padding: 10px;color: #7E5B3F;}
.member_login tr td:nth-child(1){width:140px;text-align:right;}
.login_mem_name,
.login_mem_pass{padding: 7px;border:1px #888 solid;color: #7E5B3F;width:100%;border-radius: 5px;}
/*.login_mem_name { background-image:url(../images/mem_icon2.png);}
.login_mem_pass { background-image:url(../images/mem_icon3.png);}*/
.login_mem_submit { background: #7E5C40; color:#fff; width:100%; padding: 15px; text-align:center;border-radius: 50px;}
.login_mem_other_link { margin: 10px auto;text-align: center;}
.login_mem_other_link a { color:#545454; font-size:14px;}

.member_login_regist { background: #FAF7EE; text-align:center; padding: 50px;}
.member_login_regist h2 { font-size: 18px; margin-bottom: 10px; color: #545454;font-weight: normal;}
.member_login_regist p { font-size:16px; margin-bottom: 30px; color: #545454; font-family:Arial, Helvetica, sans-serif;}
.member_login_regist a {width: 220px;border-radius: 50px;background: #7E5C40;display:inline-block;color:#fff;padding: 15px;}

/* - member regist */
.mem_regist_title_s{max-width: 800px;margin: 0 auto;font-size:18px;background: #FAF7EE;color: #7E5C40;text-align:center;margin:20px auto;padding: 15px;}
.mem_regist_title_s_s{max-width: 800px;margin: 0 auto;font-size: 16px;text-align:center;color: #7E5C40;line-height:160%;transition: 0.5s;margin-top: 15px;}



.mem_regist_title_s_s input{
  width: 220px;
  border-radius: 50px;
  color: #FFF;
  background-color: #7E5C40;
  padding: 15px;
  margin-top: 50px;
  transition: 0.5s;
}

.mem_regist_title_s_s input:hover{background-color: #F2B312;}

.member_regist { width:600px; margin: 10px auto;}
.member_regist tr td{padding:5px;color: #7E5B3F;font-size: 15px;}
.member_regist tr td:nth-child(1){width:120px;text-align:right;}
.member_regist tr td:nth-child(2){width:480px;text-align:left;}
.member_regist input{width:100%;border: 1px #888 solid;padding:7px;color: #535353;border-radius: 5px;}
.member_copy_right_box{border: 1px #d8d8d8 solid;height:360px;overflow:scroll;max-width:800px;padding:10px; font-size:12px; color:#666; margin: 10px auto;}

/* - member data search */
.mem_box2 { text-align:center;margin-top: 40px;}
.mem_box2 input.bbtn01,
.mem_box2 input.bbtn02 {
  width:220px;
  background-color: #7E5C40;
  font-size: 15px;
  color: #FFF;
  letter-spacing: 1px;
  padding: 15px;
  border-radius: 50px;
  margin: 10px 15px;
  text-align: center;
  transition: 0.5s;
}

.mem_box2 input:hover{background-color: #F2B312;}


/* - order_history */
.order_history {max-width: 800px;width: 100%;margin: 0 auto;}
.order_history td { background:#fff; padding: 15px 25px; color:#999;}
.order_history tr { background:#963; border-bottom:1px #ccc solid;}
.order_history tr:nth-child(1) td { background:#f0f0f0; color:#7E5C40;}
.order_history tr td:nth-child(3) a { display: block; font-size:12px; color:#fff; background:#c63; padding:3px 5px; width:70px; margin-top:5px;}
.order_history tr td:nth-child(4) a { display: block; font-size:12px; color:#fff; background:#744c35; padding:3px 5px; width:70px; margin-top:5px; text-align: center;}

/* - 20201202 - */
/* - blog - */
.blog_box {display: flex;flex-wrap: wrap;align-items: flex-start;min-height:20vw;}
.blog_le,
.blog_ri {}
.blog_le { width:210px;}
.blog_ri { width:calc(100% - 210px); padding: 0 0 0 4vw; min-height: 75vh; }

h5.blog_le_t {display: flex;flex-wrap: wrap;justify-content: space-between; color: #7E5C40;margin-bottom:7px;text-align: center;letter-spacing: 1px;}
h5.blog_le_t em {font-size:22px;font-style:normal;font-weight: normal;}
h5.blog_le_t span {font-size:24px;font-family: 'Noto Serif TC ExtraBold';}

.blog_le .accordion { list-style-type:none; margin:auto; border-radius: 8px; border:1px #DDD solid; overflow:hidden; }
.accordion li .link { cursor:pointer; display:block; padding: 20px; color: #7E5B3F; font-size: 16px; font-weight:500;letter-spacing: 1px;border-bottom:1px solid #DDD; position:relative;}
.accordion li .link a{color: #7E5C40;}
.blog_le .accordion li:last-child .link{border:none;} 
.blog_le .accordion li.open .link { color:#999; }
.blog_le .accordion li i { position: absolute; top: 16px; right: 20px; font-size: 16px; color: #444; transition: all 0.4s ease; }

.blog_le .accordion li.open i { color:#999;}
.blog_le .accordion li.open i.fa-chevron-down { transform: rotate(180deg);}
.blog_le .accordion li.default .submenu {display: block;}

.blog_le .accordion > li:hover,
.blog_le .accordion > li.on_this_category { background:#666 !important;}
.blog_le .accordion > li:hover .link,
.blog_le .accordion > li.on_this_category .link { color:#fff !important;}
.blog_le .accordion > li:hover .link a,
.blog_le .accordion > li.on_this_category .link a { color: #7E5C40;}
.blog_le .accordion > li:hover .link i,
.blog_le .accordion > li.on_this_category .link i { color:#fff !important;}

.submenu { display: none; background:#efefef; font-size:14px; }
.submenu li { background:none !important; border-bottom:1px solid #ccc;}
.submenu a { display:block; position:relative; color:#666; padding:12px 12px 12px 25px; transition: all 0.5s ease;}
.submenu a:before { content:'\f138'; display:block; position:absolute; top:12px; left:7px; font-size:15px;}
.submenu a:hover { background:#ab9383; color:#FFF;}

h4.blog_category_title{color: #7E5C40;font-size: 24px;padding: 0 0 10px 0;border-bottom:1px #ECE1D9 solid;margin-bottom: 5px;letter-spacing: 1px;font-weight: normal;}
h4.blog_category_title em{font-style:normal;}
h4.blog_category_title em:after{content:'/';display:inline-block;vertical-align:middle;font-size:24px;color:#666;margin:0 10px;}
h4.blog_category_title span{font-size:24px; color:#666;}

.blog_subbox {display: flex;flex-wrap: wrap;}
.blog_subbox * { transition: all 0.6s ease;}

.subbox_item {width: calc(33.333% - 20px);margin: 15px 10px;position:relative;padding: 10px;background-color: #FFF;border: 2px solid #C5B4A5;}
.subbox_item:hover{border: 2px solid #FFF;box-shadow: 2px 2px 10px rgba(123,88,63,0.3);}

.subbox_img{position: relative;overflow: hidden;}
.subbox_img img{max-width:100%;}
.subbox_img:before{content: "";position: absolute;background-color: rgba(255,255,255,0.8);width: 100%;height: 100%;left: 0;top: 0;opacity: 0;transition: 0.5s;}
.subbox_img:after{content: "";position: absolute;background-image: url(https://pic03.eapple.com.tw/beehoneybin/bh_img015.png);background-repeat: no-repeat;background-size: contain;width: 3vw;height: 5vw;left: 50%;bottom: -100px;transform: translate(-50% , 50%);opacity: 0;transition: 1s;}

.subbox_item:hover .subbox_img:before{opacity: 1;}
.subbox_item:hover .subbox_img:after{opacity: 1;bottom: 50%;}

.blog_list_ri {margin-top: 10px;}
.blog_list_ri h5 { font-weight:500; font-size: 17px; color: #7E5C40; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; white-space:normal; overflow:hidden;}
.blog_list_ri em { font-size:14px; color:#999; font-style:normal; display:block; margin:7px 0;}
.blog_list_ri p {margin-top: 10px;font-size:15px; color: #878787;line-height:130%; display:-webkit-box; -webkit-line-clamp: 1;-webkit-box-orient:vertical; white-space:normal; overflow:hidden; word-break:break-all;}

/* hover */
.subbox_item a:hover:before { transform: translate(-50%, -50%) scale(1); transition: all 500ms;}
.subbox_item a:hover:after { opacity: 1; width:100%; transition: all 500ms;}

@media screen and (max-width: 1200px) {
  
  .subbox_item{width: calc(50% - 20px);}
  .subbox_img:after{width: 50px;height: 70px;}

}

@media screen and (max-width: 768px) {
  
  .subbox_item{width: calc(50% - 10px);margin: 7px 5px;}

  .blog_list_ri h5{font-size: 16px;}
  .blog_list_ri p{font-size: 14px;margin-top: 5px;}

}

@media screen and (max-width: 400px) {
  
  .subbox_item{width: 100%;margin: 7px auto;}

}


/* article search */
.blog_search { position:relative; margin-bottom: 25px; }
.blog_search input[type=search] { outline:none; box-sizing:border-box; width:100%; font-size: 14px; color:#777; border:solid 1px #DDD; border-radius:30px; padding:10px 35px 10px 15px;}
.blog_search input[type=submit] { outline:none; position:absolute; right:0;top:0; z-index:999; width:38px; height:38px; background: url(../images/img_search.png) no-repeat center center; border:none;}
.blog_search input::-webkit-search-decoration,
.blog_search input::-webkit-search-cancel-button { display: none; }
.blog_search input:-moz-placeholder,
.blog_search input::-webkit-input-placeholder { color: #999;}
.blog_search input[type=search]:focus { color: #000; }

.blog_back{width: 100%;text-align:center;display: flex;justify-content: space-between;align-items: center;align-content: center;}
.blog_back a{width: calc(33.333% - 10px);font-size:18px; color:#fff; display:inline-block;padding: 10px 15px;}
.blog_back a.article_btn_prev{background:#F2B312;}
.blog_back a.article_btn_back{background:#7E5C40;}
.blog_back a.article_btn_next{background:#F2B312;}

/* search details */
.blog_box_edit {}
.blog_box_edit * { line-height:150%;}
.blog_box_edit img { width:auto !important; height:auto !important; max-width:100%;}
.article_img {}

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

@media screen and (max-width: 768px) {
.mask_order_history { width:100%; padding:20px; overflow:auto;}
.order_history { background:none;}
.order_history tr:nth-child(1) { display:none;}
.order_history tr { background:#fff; /*border: 1px #ccc solid;*/ width:48%; margin:1% 1% 3%; float:left; display:block;}
.order_history tr td { display:block; float:left; width:100%; padding: 5px; border-bottom: 1px #f0f0f0 solid;}
.order_history tr td:nth-child(1) { text-align:center;}
.order_history tr td:nth-child(1) span { display:inline-block; font-weight:1000; color:#fff; background: #429e39; padding:15px; border-radius:100%;}
.order_history tr:nth-child(1) { width:98%;}

.blog_back a{width: calc(33.333% - 8px);font-size: 15px;padding: 5px 10px;margin: 0 4px;}

/* 20201002 */
h5.blog_le_t,
.blog_le .accordion { display:none;}
.blog_le,
.blog_ri { width:100%; padding:10px;}


}
@media screen and (max-width: 640px) {
/* member regist */
.member_regist { width:100%}
.member_regist tr td:nth-child(2) { width:auto;}
}
@media screen and (max-width: 480px) {
.order_history tr { width:98%;}
}
@media screen and (max-width: 400px) {
/* member regist */
.member_regist tr td,
.member_regist tr td:nth-child(1),
.member_regist tr td:nth-child(2) { display:block; float:left; width:100%; text-align:left;}
}





/* 20210722 購物清單成立頁 */
.order_finish_page .main_part { max-width:990px;}
.order_pay { padding:30px;}
.order_pay * { word-break:break-all;}

.order_list_tit { padding:10px 0;}
.order_list_tit b { font-size:25px; color: #58402E;font-weight: normal;letter-spacing: 1px;}
.order_list_tit span { display:inline-block; vertical-align:bottom; font-size:12px; color:#666; padding:3px; border-bottom:1px #ccc solid;display: none;}

.order_list_spec{background: #7E5C40;padding: 10px 10px 15px 10px;}
.order_list_spec p{font-size: 16px;letter-spacing: 1px;color:#fff;text-align:center;}

.order_list_tab { margin-bottom:10px;}
.order_list_tab table { width:100%;}
.order_list_tab tr {}
.order_list_tab td { font-size:15px; color:#666; padding:10px; border-top:5px #fff solid;}
.order_list_tab td:nth-child(1) { background: #F2B312; color:#FFF; width:100px; font-weight:1000;}

.shopper {}
.payer { background: #FAF7EE;}
.order_list_tab.payer td:nth-child(1) { border-right: 3px #ccc solid;}

.order_list_head { text-align:center;}
.order_list_head p { font-size:24px; color: #58402E; text-align:center; display:inline-block; border-bottom:2px #58402E solid; padding:10px; margin:20px;}

.order_list_pro {}
.order_list_pro table { width:100%;}
.order_list_pro tr {}
.order_list_pro td { padding:10px; border-bottom:1px #ddd solid; text-align:center; color:#666; font-size:14px;}
.order_list_pro td:nth-child(1) { width:50px;}
.order_list_pro td:nth-child(2) { text-align:left;}
.order_list_pro td:nth-child(3) { width:150px;}
.order_list_pro td:nth-child(4) { width:50px;}
.order_list_pro td:nth-child(5) { width:150px;}
.order_list_pro td p { display:none;}

.order_list_pro tr:first-child{background: #7E5C40;}
.order_list_pro tr:first-child td{color:#FFF;}

.last_box_money {text-align:right;padding:10px 0;}
.last_box_money p,
.last_box_money em { display:inline-block; font-size:15px; color:#333; font-style:normal;}
.last_box_money em span { font-size:30px; color:#c00; display:inline-block; padding:0 10px;}

@media (max-width: 640px) {
.order_list_pro td { display:none !important;}
.order_list_pro td:nth-child(2) { display:block !important}
.order_list_pro td span { font-size:20px; color:#333; display:block;}
.order_list_pro td p { display:inline-block; font-size:12px; padding: 0 10px 0 0;}
}

@media (max-width: 570px) {
.order_pay { padding: 30px 30px 0 0;}
.order_list_tab td { padding:6px;}
.order_list_tab td:nth-child(1) { width:80px;}
.last_box_money p { font-size:13px;}
}



/* 2021 09 13 相關推薦 */
.prod_related { background:#f3f3f3; padding: 100px 20px;}
.prod_related h6 { max-width:1200px; margin:0 auto 20px; text-align:center;}
.prod_related h6 span {}
.prod_related h6 span:before { content:'相關推薦'; font-size: 32px; color:#7E5C40;font-weight: normal;}

.related_list { list-style:none; display:block; max-width:1200px; margin:auto; text-align:center;}
.related_list li { display:inline-block; vertical-align:top; width:24%; padding:7px;}
.related_list li a {}
.related_list li a img { max-width:100%;}
.related_list li a p {margin-top: 20px;font-size:18px;color: #583F2C;}
.related_img{padding: 8px;background-color: #FFF;border-radius: 10px;}

@media (max-width: 570px) {
.related_list li { width:49%;}
}


/* 2022.4.18 首頁文章管理 */
.module_i_news { padding:50px 20px;}

.module_i_news .title_i_box { margin-bottom:30px; text-align:center; font-family:'Josefin Sans','sans-serif'; }
.module_i_news .title_i_box h6 { font-size:36px; color:#212121;}
.module_i_news .title_i_box h4 { font-size:24px; color:#202020;}

.module_i_news ul { list-style:none; display:block; max-width:1200px; margin:20px auto;}
.module_i_news li { display:inline-block; text-align:left; vertical-align:top; width:49%;}
.module_i_news li a { display:inline-block; position:relative; display:block;}
.module_i_news li a:before { content:'READ MORE'; position: absolute; z-index:19; top:50%; left:50%; width:150px; text-align:center; background:rgba(255,255,255,0.7); font-size:18px; color:#000; padding:10px 5px; transform: translate(-50%, -50%) scale(0,0);}
.module_i_news li a:after { content:''; width:0; position:absolute; left:0; top: 0; bottom: 0; z-index:8; background: rgba(0,0,0,0.8); opacity:0; border:1px #ddd solid; }
.i_blog_le { display:inline-block; vertical-align:top; padding:3px; width:160px; line-height:0;}
.i_blog_le img { max-width:100%;}
.i_blog_ri { display:inline-block; vertical-align:top; padding:5px; width:calc(100% - 165px);}
.i_blog_ri h5 { font-weight:500; font-size:20px; color:#000; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; white-space:normal; overflow:hidden;}
.i_blog_ri em { font-size:14px; color:#999; font-style:normal; display:block; margin:7px 0;}
.i_blog_ri p { font-size:15px; color:#666; line-height:130%; display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; white-space:normal; overflow:hidden; word-break:break-all;}
/* hover */
.module_i_news li a:hover:before { transform: translate(-50%, -50%) scale(1); transition: all 500ms;}
.module_i_news li a:hover:after { opacity: 1; width:100%; transition: all 500ms;}
@media (max-width:768px) {
.module_i_news li { display:block; width:100%;}
}