@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 Serif TC', 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: #A72126; font-weight: 600;}
.center { max-width: 1200px; width: 100%; margin: 0 auto; }
#content { width: 100%;}
#content_main { width: 100%; overflow: hidden; z-index: 60; position: relative; margin-top: 100vh;}

.show_content { width: 96%; margin: auto; padding: 50px 10px; }
.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; }
.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: 300px; }
.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; vertical-align: top; margin: 2px; color:#000000;border: 1px solid transparent; border-radius: 50%;width:29px; height:29px;line-height: 180%;}
.page li.activeN{background: #A72126; border: 1px solid #A72126; color: #FFFFFF;}
.page li a { display: inline-block;vertical-align: top; width:100%; height:100%;}

.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;}
.page strong,



#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: 0 0; font-size: 14px; background:#f9f9f9; position: relative; z-index:9; }


/* 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 .center{padding: 60px 20px;}

.footer_logo { display:inline-block; vertical-align:middle; width:180px;}
.footer_logo img{max-width: 100%;}
.footer_info{display: flex; justify-content: center; align-items: center; align-content: center; flex-wrap: wrap; flex-direction: column; text-align: center; letter-spacing: .07em;}
.footer_info ul {width: 100%; display: flex; justify-content: center; align-items: center; align-content: center; flex-wrap: wrap; flex-direction: column ;}
.footer_info li {width: 100%; vertical-align:bottom;}
.footer_info li:first-child{margin: 30px auto;}
.footer_info li p { line-height:175%; letter-spacing:1px; color:#333333; font-size: 15px;}
.footer_info li p+p{margin-top: 10px;}
.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:'地址：';}

.footer_menu {width: 100%;}
.footer_menu a {width: 110px;display:inline-block;padding:3px 8px;margin:4px 0;font-size: 15px;line-height: 100%;color: #888;background:transparent;text-align: center; font-weight: 600; letter-spacing: .07em;}
.footer_menu a:hover{background:transparent; color:#fff;}

.copy { text-align: center; padding: 15px 0; font-size:13px; color:#555555; border-top:1px #ddd solid;}
.copy a {color: #555555;}
/* .copy a:hover { color:#c00;} */
.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 { display: block; float: left; width: 33%; border-right: 1px solid #ddd; }
#bottom_menu li:first-child:nth-last-child(2), #bottom_menu li:nth-last-child(2) ~ li{width:50%;}
#bottom_menu li:first-child:nth-last-child(1){width:100%;}
#bottom_menu li:first-child:nth-last-child(3), #bottom_menu li:nth-last-child(3) ~ li{width: 33.333%;}
#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; }

/*  首頁  */
.index_edit{z-index: 50; position: relative;}
.index_blog{background: #FDFAF3; padding: 160px 20px 60px; z-index: 30; position: relative;}
.index_blog .blog_part{justify-content: space-between;}
.blog_part { width: 100%; max-width: 1200px; margin: auto;}
.blog_part dl{font-size: 16px; color: #333333; letter-spacing: .07em; line-height: 1.5; font-weight: 400;}
.blog_part dl dt{margin-bottom: 20px;}
.blog_part dl dd{width: 215px; max-width: 100%; margin-bottom: 50px;}
.index_blog dl a.animated-arrow.stay_mid{display: flex; font-size: 18px; border: 1px solid #CECEBF; border-radius: 5px; width: 250px; height: 55px; padding: 10px; margin: 0;}
.index_blog dl a .arrow{left: 85%;}
.blog_part dl a svg{fill: #333333;}
.blog_list { width: calc(100% - 300px); max-width: 895px;}
/* .blog_list ul{margin: -13px;} */
/* .blog_list ul li{max-width: calc(33.333% - 26px); width: 280px; margin: 13px;} */
/* .blog_list ul li a{ letter-spacing: 1px; padding:10px; background: #FFFFFF; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; width: 100%; max-width: 280px; border-radius: 10px; display: block; transition: .3s;} */
.blog_list ul li a *{max-width: 100%;}
/* .blog_list ul li span { font-size: 15px; color: #a6a6a6; width: 150px; padding-left: 15px; display: inline-block; } */
.blog_list ul li a:hover { box-shadow: 0px 0px 10px rgba(0,0,0,0.3); border:none; }
/* .pageIndex .index_product_content{background: #FFFFFF; max-width: 100%; border-top: 0;}  */
.main_part { width: 100%; max-width: 1200px; margin: auto; padding:100px 20px; min-height:75vh;position: relative;}

.products-list {justify-content: flex-start; margin: -14px;}
.main_part.index_product_content{background: #FFFFFF; max-width: 100%; width: 100%; padding: 50px 20px 150px; z-index: 20; position: relative;}
.index_product_content .products-list {justify-content: center;}
.products-list .title_box { width: 100%; }
.products-list .item {width: calc(25% - 28px); display: inline-block; vertical-align: top; padding: 10px; margin: 20px 14px; text-align: center; background: #FFFFFF; border-radius: 5px;}
.products-list .item:hover{box-shadow: 0px 0px 10px rgba(0,0,0,.15);}
.products-list .products_item a,
.products-list .item a { display: block; margin: 0 auto; position: relative; overflow: hidden;}
.products-list .products_item a:hover .pic, 
.products-list .item a:hover .pic{transform:scale(1.05);}
.products-list .pic { display: block; position: relative; text-align: center; padding-bottom:70%; height:0; overflow: hidden; z-index: 3; transition: .6s;}
.products-list .pic img { max-width: 100%;width: 100%; position: absolute; left: 0; transform: translateY(-50%); top: 50%;}
.pic_hover{opacity: 0; width: 100%; height: 100%; background: rgba(167,33,38,.6); position: absolute; left: 0; top: 0; display: flex; justify-content: center; align-items: center; align-content: center; z-index: 5; transition: .6s; transform: scale(.9);}
.pic_hover img{width: 73px; max-width: 40%;}
.products-list .products_item:hover a .pic_hover, 
.products-list .item:hover a .pic_hover{opacity: 1; transform: scale(1);}
.products-list .name {font-weight: bold; font-size: 20px; color: #111; letter-spacing: 1px; margin-top: 15px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; height: 40px; background-repeat: no-repeat; background-position: left;}
.products-list .price * { display: inline-block; margin: 0px 5px; }
.products-list .price b { color: #B40C10; font-size: 18px;font-weight: bold;}
.products-list .price span{color: #B40C10; font-size: 16px;font-weight: bold;}
.products-list .more { border: 1px solid #A72126; color: #A72126; font-size: 16px; font-weight: 500; line-height: 32px; text-align: center; width: 100%; background: #FFFFFF; border-radius: 5px;}
.products-list .more:hover, .products-list .more:active{background: #A72126; color: #FFFFFF;}
.products-list .more:hover+img, .products-list .more:active+img{filter: brightness(10);}
.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; }
.listAddNum dd{display: flex; justify-content: space-between; max-width: 182px; width: 100%; align-items: center; align-content: center; flex-wrap: nowrap; margin: 10px auto; position: relative;}
.listAddNum dd span{font-size: 14px; letter-spacing: .5em;}
.subBox, dl.subBox, dd.subBox{display: block; max-width: 220px; width: 100%; position: relative;}
.sidebarBtn dl.subBox{max-width: 100%;}
.subBox input{padding: 5px; padding-left: 21px;}
.subBox img{position: absolute; transform: translate(-50%, -50%); left: calc(50% - 50px); top: 50%; width: 20px;}
.sidebarBtn .action-button:hover+img, .sidebarBtn .action-button:active+img{filter: brightness(10);}
.product_info li .txt_box p, 
.listAddNum dd p{display: flex; justify-content: space-between; align-items: center; align-content: center; flex-wrap: wrap; border: 1px solid #DDDDDD; width: 128px;}
.product_info li .txt_box p input[type=button], 
.listAddNum dd p input[type=button]{width: 30px; height: 30px; background: #BDAEA8; border: 1px solid #BDAEA8; color: #FFFFFF; font-weight: bold; display: flex; justify-content: center; align-items: baseline; align-content: center; border-radius: 0;}
.product_info li .txt_box p input[type=number], 
.listAddNum dd p input[type=number]{width: calc(100% - 60px); border-top: 1px solid #000; height: 30px; border: 0; text-align: center; -moz-appearance: textfield; margin: 0; border-radius: 0;}
.product_info li .txt_box p input[type=number]::-webkit-outer-spin-button, 
.product_info li .txt_box p input[type=number]::-webkit-inner-spin-button, 
.listAddNum dd p input[type=number]::-webkit-outer-spin-button,
.listAddNum dd p input[type=number]::-webkit-inner-spin-button {-webkit-appearance: none; margin: 0;}

/* 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; display: flex; justify-content: center; align-items: stretch; align-content: stretch; flex-wrap: wrap;}
.product-layer-two li {margin: 5px 1%; padding: 5px 0;position: relative;}
.product-layer-two li a {width: 100%;display: inline-block;position: relative;background-color: #333333;padding: 8px 15px; color: #FFFFFF;;font-size: 20px;text-align: center;transition: 0.5s;font-weight: 500; border-radius: 5px;}
.product-layer-two li a:hover{background-color: #A72126;}
.product-layer-two li a:before{
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 20px 15px 0 15px;
  border-color: #FFD675 transparent transparent transparent;
  left: 50%;
  margin-left: -15px;
  bottom: -20px;
  opacity: 0;
}

.product-layer-two li.active a{background-color: #A72126;}
/* .product-layer-two li.active a:before{opacity: 1;} */
.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%; border-radius: 3px; margin-left: -5%; margin-top: -3px; }
.product-layer-two li li { display: none; background: #fff; 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; display: flex; justify-content: space-between; align-items: flex-start; align-content: flex-start; flex-wrap: wrap;}
.fixedsticky { top:130px; }
.mobile_product_name { display: none; margin-bottom: 20px; }
.product_main { padding: 0; display: inline-block; width: 67%; vertical-align: top; }
.sidebarBtn { padding: 30px 20px; display: inline-block; width: 30%; vertical-align:top; border:5px #ddd solid;background-color: #FFF;border: 1px solid #DDD; border-radius: 20px; box-shadow: 0px 0px 15px rgba(0,0,0,.1);}
.sidebarBtn h2 { color: #111; font-size: 24px; font-weight: 900;}
.sidebarBtn .price { color: #f8b71f; font-size: 22px; font-weight: bold; padding: 10px 0; border-bottom: 3px solid #F8B71F; letter-spacing: 1px; }
.sidebarBtn .price span { font-size: 16px; }
.product_info { margin: 20px 0; }
.product_info li { padding-left: 100px; margin: 15px 0; }
.product_info li span { display: inline-block; vertical-align: top; width: 95px; margin-left: -100px; font-size: 15px; color: #333;font-weight: 500;vertical-align: middle;}
.product_info li .txt_box { display: inline-block; vertical-align: middle; color: #268cdf; width: 100%;}
fieldset { border: none; padding: 0; margin: 0; }
.radio-inline__input { clip: rect(1px, 1px, 1px, 1px); position: absolute !important; }
.radio-inline__label { display: inline-block; padding: 2px 8px; margin: 2px 5px 2px 0; border-radius: 1px; transition: all .2s; color: #444; border: 1px solid #ccc; min-width: 150px; text-align: center;}
.radio-inline__input:checked + .radio-inline__label { background: #A72126; border: 1px solid #A72126; color: #FFFFFF;}
.amountNum { width: 45px; height: 28px; border: 1px solid #ccc; line-height: 28px; margin-left: 4px; color: #444; text-align: center;}
.action-button { width: 100%; border-radius: 5px; background: #f8b71f; color: #fff; text-align: center; line-height: 35px; }

/*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; }
.action-button:hover { background: #2cc7d7; }

.toShare { border-top: 1px solid #e6e6e6; font-size: 12px; color: #888; margin-top: 20px; padding-top: 20px; }
.toShare a { display: inline-block; vertical-align: middle; margin-left: 10px; }

.product_pic { padding-bottom: 20px; padding-left: 100px; position: relative; }
.product_pic #bx-pager { display: inline-block; vertical-align: top; width: 120px; padding: 0 10px; font-size: 12px; color:#391911; position: absolute; top: 0; left:0; }
.product_pic #bx-pager .block { margin-left: 3px; margin-top: 10px; margin-bottom: 10px; }
.product_pic #bx-pager a { display: block; float: left; width: 70px; height: 70px; margin: 2px; border: 1px solid #e9e9e9; }
.product_pic #bx-pager a img { width: 100%; }
.product_pic .bx-wrapper { display: inline-block; vertical-align: top; width: 100%; max-width: 500px; margin: 0 0 20px; padding: 0; }
.product_pic .bx-wrapper .bx-viewport {left: 0;}

.products-box{max-width: 1200px; margin: 0 auto; margin-top: -2px; padding: 50px 15px 100px 15px;text-align: center;}

.products-first_box{width: 100%; display: block;}
.products-first_box img{
  display: block;
  margin: 0 auto;
  margin-bottom: 60px;
}

.products_item{width: 23%; text-align: center; margin: 10px 0.5%; display: inline-block; vertical-align: top; background: #FFFFFF; padding: 10px; border-radius: 10px;}

.accordion { margin: 1rem 0; padding: 0; list-style: none; border-bottom: 1px solid #999999;}
.accordion-item {}
.accordion-thumb { margin: 0; padding: .8rem 0; cursor: pointer; font-weight: normal; position: relative; font-size: 20px; padding-left: 60px; font-weight: 900; color: #A62026;}
.accordion-thumb>img {position: absolute; left: 0; top: 0;}
.accordion-thumb::after{content: ''; width: calc(100% - 170px); border-bottom: 1px solid #999999; height: 1px; position: absolute; right: 0; top: 27px;}
.accordion-thumb::before {color: #333333; position: absolute; right: 0; content: ''; display: inline-block; height: 7px; width: 7px; margin-right: 1rem; margin-top: 1.5rem; vertical-align: middle; border-right: 2px solid; border-bottom: 2px 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-left: 60px; padding-bottom: 1rem;}
.accordion-item.is-active .accordion-thumb::before { -webkit-transform: rotate(45deg);transform: rotate(45deg); }
.accordion-panel img { max-width: 100%; vertical-align: middle;margin-left: 5px;}

.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: 'Noto Serif TC', serif,'微軟正黑體','Microsoft JhengHei'; 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;}
.prod_mainEdit{margin: 20px auto;}

.half_box { width:50%; float:left; padding-right: 30px; }
.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; border-radius: 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: #FFF; 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 { font-size: 16px; color: #fff; background: #ADA17E; padding: 10px 20px; display: block; margin: 40px auto; width: 130px; 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: #bfcbd8; width: 33.3%; }
.stepImg span.active { color: #f8b71f; font-style: italic; }
.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; font-family: '微軟正黑體', Arial;}
.shopping-cart.check { margin: 10px auto; margin-top: 40px;}
.shopping-cart .cart_head { background: #4d4d4d; 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-top: 1px solid #ccc; border-bottom: 1px solid #ccc; }
.shopping-cart .cell {text-align: center; width: 20%; float: left; vertical-align: top; font-size: 16px; letter-spacing: 1px; padding: 15px 5px; } 
.shopping-cart .cell.product_name { width: 44%; text-align: left; padding-left: 90px; position: relative; min-height: 76px; font-weight: bold; color: #000000; font-size: 18px;}
.shopping-cart.check .cell { width: 25%; }
.shopping-cart .cell[data-label=單價] {color: #C50000; font-weight: 600;}
.shopping-cart.check .cell.product_name { width: 42%; }
.shopping-cart .cell.product_name span { font-size: 14px; font-weight: normal; display: block; color: #6A6A6A; margin-top: 5px; }
.shopping-cart .cell.amount { width: 8%; }
.shopping-cart .cart_head .cell.product_name { min-height: initial; color: #FFFFFF; font-weight: normal;}

.small_pic { position: absolute; width: 75px; height: 75px; top: 0; margin-left:-90px; vertical-align: top; overflow: hidden; background: #FFFFFF;}
.small_pic img { max-width: 100%; display: block;}
.payment { margin: 30px; float: left; }
.payment li { margin: 15px; }
.total_amount { width: 350px; margin-top: 30px; margin-left: auto; margin-right: 5px; color: #444;}
.total_amount ul {background-color: #FFF; border: 1px solid #ddd; 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; }
.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; }
.declaration { background: #FFF; 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; }
.album_fixed_title { font-size: 20px; color: #666; margin-top: -15px; padding-right: 30px; display: inline-block;}
.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%; 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%; 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 #777; 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 h3 {text-decoration: underline; font-weight: bold; }

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


/* contact */

.contact_content .information{
  max-width: 680px; 
  width: 100%;
  display: block;
  margin: 0 auto;
  text-align: center;
}

.information h5{
  display: block;
  font-size: 18px;
  font-weight: 500;
  color: #333333;
  line-height: 120%;
  letter-spacing: .07em;
  margin: 0 auto;
  padding: 80px 0;
  max-width: 480px;
  width: 100%;
}

.blank_letter { font-family: 'Noto Serif TC', serif,'微軟正黑體','Microsoft JhengHei'; padding-top: 30px; padding-left: 60px; background-image: url(../images/icon8.png); font-size: 26px; color: #101010; background-position: left bottom; background-repeat: no-repeat; }

.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; }
.list_before.info li{ padding-left: 32px;}
.list_before.account li{ padding-left: 65px;}
.list_before li.btn { padding: 0; padding-bottom: 30px; }
.list_before li.btn .animated-arrow {max-width: 250px; width: 100%; height: 50px;  margin: 30px 0; width: 100%; background-color: #897D58; color: #FFF;padding: 15px 20px;}

.TEL:before, .ADD:before { position: absolute; display: block; width: 35px; left: 0; font-size: 14px; font-weight: bold; letter-spacing: -1px; }
.TEL:before {content: "TEL";}

.ADD:before {content: "ADD";}
.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 {max-width: 640px;margin: 0 auto;font-size: 16px;text-align: right;color: #FF0000;}
.contact_form {max-width: 640px;margin: 0 auto;color: #444;}
.contact_form li { display: block; padding-top: 10px; padding-bottom: 10px;}
.contact_form li.last {margin-top: 15px;}
.contact_form li .form__label { display: inline-block; width: 120px; text-align: right;padding-right: 25px; vertical-align: top;font-size: 18px;color: #1F1F1F;}
.contact_form li .form__insert { display: inline-block; width: calc(100% - 130px); vertical-align: top; }

/*--------匯款通知表單----------*/
.formbox_form { margin-top: 30px; margin-bottom: 30px; color: #444; font-size: 15px; line-height: 1.5; }
.formbox_form li { display: block; padding-top: 10px; padding-bottom: 10px; padding-left: 150px; }
.formbox_form li.last { margin-top: 30px; }
.formbox_form li .form__label { display: inline-block; width: 125px; text-align: left; margin-left: -130px; vertical-align: top; }
.formbox_form li .form__insert { display: inline-block; width: 100%; vertical-align: top; }

/*--------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: #444444; }
.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: inline-block; color: #4c4c4c; font-size: 15px; margin-left: 20px; top: 0; vertical-align: middle; }
.form label .inputbox.Big { width: 22px; height: 22px; }
.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-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; }

.add01{
    width: 120px;
    display: inline-block;
    -webkit-appearance: button;
    background-color: #FFF !important;
    vertical-align: middle;
    border: 1px solid #C2BCB4;
    color: #666;
    overflow: hidden;
    margin-right: 10px;
    margin-bottom: 0 !important;
    padding: 3px 26px 3px 3px;
    text-overflow: ellipsis;
    white-space: nowrap;
    position: relative;
}

.add02{
    width: calc(100% - 300px);
    display: inline-block;
    border: 1px solid #c2bcb4;
    padding: 5px;
}

.form_receive{
  padding: 20px 0 20px 35px;
}

.form_method{margin: 20px 0;}
.form_method input{
  display: inline-block;
  vertical-align: middle;
}

.form_method h4{
  display: inline-block;
  vertical-align: sub;
  padding-left: 10px;
  font-weight: normal;
}

.form_method h4 b{
  font-size: 15ox;
  color: #000;

  vertical-align: middle;
}

.form_method h4 span{
  display: inline-block;
  vertical-align: middle;
  color: #FF0000;
}

.form_store{margin: 15px 0;}
.form_store h5{
  display: inline-block;
  vertical-align: middle;
  font-size: 16px;
  margin: 5px 0;
  margin-right: 25px;
}

.form_store h5 b{
  display: inline-block;
  vertical-align: middle;
  color: #444;
  font-size: 15px;
  margin-right: 15px;
}

.form_store h5 input{
  display: inline-block;
  vertical-align: middle;
  border: 1px solid #c2bcb4;
  padding: 5px;
  font-size: 15px;
  color: #777;
}




/* input 樣式 */
.noborder { border: none; width: 100%; padding: 5px 0; vertical-align: middle; }
.border200 { width: 200px; border: 1px solid #c2bcb4; padding: 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; margin-right: 5px; }
.captcha_img { vertical-align: middle; margin-left: 10px; display: inline-block; }
.captcha_img .fa{ vertical-align: middle; 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; }
/* 表單按鈕 , 按鈕*/

.last input{
  width: 146px;
  padding: 15px;
  border-radius: 5px;
  color: #FFF;
  font-size: 18px;
  margin: 15px;
}

.rewrite {background: #BDAEA8; transition: all .3s;}
.rewrite:hover, .rewrite:active{background: #92776D;}
.innersend {background-color: #333333; transition: all .3s;}
.innersend:hover, .innersend:active {background-color: #A72126;}
.last .animated-arrow { display: inline-block; padding: 0; margin: 0 0 0 20px; vertical-align: middle; }
.rewrite_simple, .send_simple { width: 170px; height: 40px; line-height: 40px; border-radius: 4px; display: inline-block; margin-right: 10px; color: #fff; font-size: 18px; text-align: center; }
.rewrite_simple { background: #ada17e url(../images/simple_left.png) 10% center no-repeat; }
.send_simple { background: #f8b720 url(../images/simple_right.png) 88% center no-repeat; }
#msg{min-height: 170px;}

/*------------通用滿版分段抬頭-------------*/
.separate_title { font-size: 16px; color: #444; padding: 10px 0 10px 40px; background: #FFF url(../images/separateTitle2.png) left center no-repeat; }
.separate_title .note { font-size: 13px; float: none; padding-left: 20px; }








/* 滑動箭頭 按鈕 */
.animated-arrow {display: block; margin-top: 20px; margin-left: auto;overflow: hidden;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); }
 

@media screen and (max-width: 1200px) {
.show-list .item {}
.show-list .show_pic {}
.show-list .show_pic img {}

.footer{padding: 30px 0;}
.footer_info li p{font-size: 16px;}
.footer_info li:nth-child(1) {width: 100%;margin: 0;}
.footer_info li:nth-child(2) {width: 100%;margin-left: -8px;}
.footer_menu{margin-top: 10px;}
.footer_menu a{width: 80px;padding: 3px 5px;font-size: 16px;}

@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 15px 120px 15px;}
.news_part{}
.title_box{width: 200px;font-size: 22px;display: block;}
.news_part .title_box{margin: auto;}



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

.subalbum-menu h2 { float: none; margin-bottom: 15px; }
.product_main { padding: 30px 0.5em 30px 0; width: 65%; }
.product_pic { padding-left: 100px; }
.sidebarBtn { width: 35%; }
.blog_part dl{width: 100%; text-align: center;}
.index_blog dl a.animated-arrow.stay_mid{margin: 0 auto;}
.blog_list{width: 100%; margin: 0 auto; margin-top: 20px;}
.blog_list .subbox_item{padding: 10px;}
.blog_part dl dd{width: 100%;}


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

.footer_info {padding: 0 15px;text-align: center;}
.footer_logo {display: block; margin: 0 auto;}
.footer_info ul {width:100%;}
.footer_info ul li{padding: 0;}
.footer_menu a{width: auto;}
.footer_info li:nth-child(2){max-width: 400px;margin: 0 auto;}

#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; }
.path{width: 100%;}
.show_content { width: 100%; padding:15px 0; }
.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{width: 100%;margin: auto;padding: 40px 15px;}
.contact_content .information{padding: 40px 20px;border-radius: 20px;}
.contact_form li .form__label{width: 100px;padding-right: 15px;font-size: 16px;}
.contact_form li .form__insert{width: calc(100% - 110px);}

.last input{width: 130px;font-size: 16px;margin: 10px 5px;}
.information h5{font-size: 16px;padding: 20px 0;margin-bottom: 20px;}

.list_before.info:before { display: none; }
.list_before.info { width: 50%; max-width: 300px; margin-right: 10%; float: left; }
.list_before.account { width: 40%; max-width: 300px; float: left; }
.contact_content .information_right { width:100%; padding:10px; }

/* 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; width: 100%; margin: 20px auto 0; display: block; }
.product_info li { padding-left: 95px; }
.product_info li span { width: 90px; margin-left: -95px;transition: 0.5s;}
.radio-inline__label:hover{background-color: #D7D0BF;}
.radio-inline__label.active{background-color: #D7D0BF;}
.fixedsticky { top: initial; }
.half_box { padding-right: 5%; }
.products-list .item { width: 47%; padding: 0;}
.products_item{width: 48%;margin: 10px 0.5%;}


.accordion-panel{padding-left: 0;}
.index_blog{padding: 60px 20px;}

@media screen and (max-width: 600px) {
#nav-toggle { margin-left: 20px; }
.copy { padding-right: 0; padding-top: 18px; line-height: 16px; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; }
.copy a {}
.footer_info { padding: 0; }
.footer_info ul { letter-spacing: 0.1em;}
.footer_info ul li { display:block;}
.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.first_box {width: 100%;}
.product-layer-two li{}
.product-layer-two li a{font-size: 16px;padding: 8px 10px;}

.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 li .form__label {width: 100%;padding-right: 0;text-align: left;margin-bottom: 5px;}
.contact_form li .form__insert {width: 100%;}

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

  .products_item{max-width: 300px; width: 100%;margin: 0 auto;display: block;margin-bottom: 15px;}
  .footer_menu a {width: calc(33.33% - 8px); margin: 5px 0; border-left: 1px solid #CCCCCC;}
  .footer_menu a:nth-child(3n), .footer_menu a:last-child{border-right: 1px solid #CCCCCC;}
}

/* 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; }
.form_receive{padding: 15px;}
.form_method h4 b{width: 120px;font-size: 16px;}
.form_method h4 span{font-size: 15px;}



/* 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: 130px; margin: 10px 5px; font-size: 16px; }

.accordion-thumb::after {width: calc(100% - 155px);}

}/* 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%); }
.products-list a:hover .more { background: #ADA17E; border-color: #ADA17E; color: #fff; }
.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 { position:fixed; top:15vh; right:0; width:30px; background:#fff; border: 1px #ccc solid; border-right: 0; padding:7px; text-align:center; z-index:1000000;}
.right_member_in img { max-width:100%;}
.right_member_in ul { display:block; width:20px; margin:10px auto;}
.right_member_in li { display:block; font-size:14px; word-break:break-word; letter-spacing: 6px; line-height: 1.2;}
.right_member_in input { width:18px; height:36px; margin:5px auto 0;}

/* - member index */
.member_title { margin:0 auto; max-width:700px; text-align:center;}
.member_title img {}
.member_title p { font-size:20px; margin: 30px auto 5px; padding:40px 0 5px 0; border-top: 1px #BBBBBB solid;}
.member_title em { font-size:14px; font-style:normal;}

.member_order {max-width:900px; margin:0 auto; padding:50px 40px; background:rgba(235,226,222,.8); margin-top: 40px;}
.member_order a {width:252px; height:62px; background: no-repeat 0 0; border-radius:5px; margin: 10px;transition: 0.5s; font-size: 18px; position: relative; background: #FFFFFF; transition: all ease-in .3s;}
.member_order a:hover{background: #A72126;}
.member_order a:hover>*{filter: brightness(10); color: #FFFFFF;}
.member_order a:hover::after{color: #FFFFFF;}
.member_order a img+span{margin: 0 20px; width: 110px;}
.member_order a::after{content: '>'; display: block;}
a.m_order_1 {}
a.m_order_2 {}
a.m_order_3 {}
a.m_order_4 { background-image:url(../images/mem_btn_img4.png); background-color: rgba(255,255,255,0.75); border: 1px #ABA07D solid;}
a.m_order_5 { background-image:url(../images/mem_btn_img5.png); background-color: rgba(255,255,255,0.75); border: 1px #ABA07D solid;}

a.m_order_4:hover { background-image:url(../images/mem_btn_h_img4.png); background-color: rgba(55,55,55,0.75); }
a.m_order_5:hover { background-image:url(../images/mem_btn_h_img5.png); background-color: rgba(55,55,55,0.75); }

/* - member login */
.member_title h2 { font-size:25px; }
.member_login,
.member_login_regist { max-width:490px; margin:0 auto 50px; }
.member_login tr td { padding:5px;}
.member_login tr td:nth-child(1) { width:100px; text-align:right;}
.login_mem_name,
.login_mem_pass { background: no-repeat center left; padding: 7px; border:1px #ccc solid; color:#888; width:100%;background-color: #FFF;}
/*.login_mem_name { background-image:url(../images/mem_icon2.png);}
.login_mem_pass { background-image:url(../images/mem_icon3.png);}*/
.login_mem_submit { background: #A72126; color:#fff; width:100%; padding:7px; text-align:center; border-radius: 5px; transition: .3s;}
.login_mem_submit:hover{background: #C30E22;}
.login_mem_other_link { margin: 10px auto;}
.login_mem_other_link a { color:#444; font-size:14px;}

.member_login_regist { background:rgba(235,226,222,.8); text-align:center; padding:30px;}
.member_login_regist h2 { font-size:20px; margin-bottom:7px; color:#444;}
.member_login_regist p { font-size:15px; margin-bottom:7px; color:#888; font-family:Arial, Helvetica, sans-serif;}
.member_login_regist a { background:#588A02; display:inline-block; color:#fff; padding:10px 20px; margin-top: 10px; border-radius: 5px; transition: .3s;}
.member_login_regist a:hover{background: #69A703;}

/* - member regist */
.mem_regist_title_s { max-width:360px; margin: 0 auto; font-size:18px; background:#F8B71F; color:#FFF; text-align:center; margin:20px auto; padding:7px; display: none;}
.mem_regist_title_s_s { font-size:14px; font-family:Arial, Helvetica, sans-serif; text-align:center; padding:10px; color:#666; font-family:Arial, Helvetica, sans-serif; line-height:185%;}
.mem_regist_title_s_s input{width:110px; color:#fff; padding:15px 20px; text-align:center; font-size: 18px; display: inline-flex; justify-content: center; align-items: center; align-content: center; width: 146px; border-radius: 10px; transition: .3s; background: #588A02;}
.mem_regist_title_s_s input:hover{background: #69A703;}
.mem_regist_title_s_s input[type=submit] {background:#333333; }
.mem_regist_title_s_s input[type=submit]:hover{background: #A72126;}

.member_regist { width:600px; margin: 10px auto;}
.member_regist tr td { padding:5px;}
.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 #d8d8d8 solid; padding:7px; color:#aaa;}
.member_copy_right_box {background-color: #FFF; border: 1px #d8d8d8 solid; height:360px; overflow:scroll; max-width:800px; padding:10px; font-size:12px; color:#666; margin: 0 auto; margin-top: 40px;}

/* - member data search */
.mem_box2 { text-align:center;}
.mem_box2 input.bbtn01,
.mem_box2 input.bbtn02 { width:160px; margin:20px 10px; text-align:center; padding: 15px 20px; color:#fff; background:#ABA07D; border-radius: 5px; transition: .3s;}
.mem_box2 input.bbtn01 { background:#588A02;}
.mem_box2 input.bbtn01:hover{background: #69A703;}
.mem_box2 input.bbtn02{background: #333333;}
.mem_box2 input.bbtn02:hover{background: #A72126;}

/* - order_history */
.order_history { margin: 0 auto; background:#cccccc;}
.order_history td { background:#fff; padding: 15px 25px; color:#121212;}
.order_history tr { background:#963; border-bottom:1px #ccc solid;}
.order_history tr:nth-child(1) td { background:#f0f0f0; color:#121212;}
.order_history tr td:nth-child(3) a { display: block; font-size:12px; color:#fff; background:#A72126; padding:3px 5px; width:70px; margin-top:5px;}

/* - 20201202 - */
/* - blog - */
.blog_box { min-height:20vw; display: flex; align-items: flex-start; align-content: flex-start; justify-content: space-between; flex-wrap: wrap;}
.blog_le,
.blog_ri { display:inline-block; vertical-align:top; margin-bottom:2vw; padding:0 7px;}
.blog_le { width:220px;}
.blog_ri { width:calc(100% - 240px); padding: 0; min-height: 75vh;}

h5.blog_le_t { font-size:24px; font-weight:500; color:#666; letter-spacing:2px; margin-bottom:7px; text-align: center;}
h5.blog_le_t em { display:inline-block; font-style:normal; }
h5.blog_le_t span { display:inline-block;}

.blog_le .accordion{list-style-type:none; margin:auto; overflow:hidden; }
.accordion li .link{width: 100% !important; cursor:pointer; display:block; color:#444; font-size:16px; font-weight:700; position:relative;}
.accordion li .link:hover{background-color: #A51F26; border-color: #DDDDDD; color: #FFFFFF;}
.blog_le .accordion li .link:last-child {border:none;}
.blog_le .accordion li .link a{width: 100%;padding: 15px;display: inline-block;font-size: 18px;}
.blog_le .accordion li .link:hover{color:#FFFFFF;} 
.blog_le .accordion li .link.active{color:#333;}
.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{border: 1px solid transparent;}
.blog_le .accordion > li:hover,
.blog_le .accordion > li.on_this_category { background:#A51F26 !important; border: 1px solid #DDDDDD;}
.blog_le .accordion > li:hover .link,
.blog_le .accordion > li.on_this_category .link { color:#FFFFFF !important;}
.blog_le .accordion > li:hover .link a,
.blog_le .accordion > li.on_this_category .link a { color:#FFFFFF !important;}
.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:#333; font-size:30px; border-bottom:1px #333 solid; padding:10px 0; margin-bottom:20px;}
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; justify-content: flex-start; align-items: stretch; align-content: stretch; flex-wrap: wrap;}
.blog_subbox * { transition: all 0.6s ease;}

.subbox_item { display:block; width:33.333%; max-width: 306px; position:relative; padding: 13px;}
/* .subbox_item:nth-child(2n) { float:right;} */

.blog_list li a, .subbox_item a {width: 270px; max-width: 100%; position:relative; display:block; padding: 10px; background: #FFFFFF; border-radius: 14px;}
.subbox_item 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);}
.subbox_item 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; }

.blog_list_le { display:block; vertical-align:top; line-height:0; max-width: 100%;}
.blog_list_le img { max-width:100%;}

.blog_list_ri { display:inline-block; vertical-align:top; padding:3px; width: 100%;}
.blog_list_ri h5 { font-weight:500; font-size:18px; color:#333333; line-height: 1.8; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; white-space:normal; overflow:hidden;}
.blog_list_ri em { font-size:14px; color:#BDADA7; font-style:normal; display:block; margin:7px 0;}
.blog_list_ri p { font-size:14px; color:#333333; line-height:140%; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; white-space:normal; overflow:hidden; word-break:break-all;}

/* hover */
.blog_list li a:hover, .subbox_item a:hover{background: #A72126; box-shadow: 0px 0px 10px rgba(0,0,0,.2); color: #FFFFFF !important;}
.blog_list li a:hover .blog_list_ri h5, 
.blog_list li a:hover .blog_list_ri em, 
.blog_list li a:hover .blog_list_ri p, 
.subbox_item a:hover .blog_list_ri h5, 
.subbox_item a:hover .blog_list_ri em, 
.subbox_item a:hover .blog_list_ri p{color: #FFFFFF;}
/* .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;} */


/* article search */
.blog_search { position:relative; margin-bottom:10px; }
.blog_search input[type=search] { outline:none; box-sizing:border-box; width:100%; font-size: 14px; color:#999; border:solid 1px #ccc; padding:10px 35px 10px 10px;}
.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 { text-align:center; width: 100%;}
.blog_back a { font-size:15px; color:#fff; display:inline-block; padding:7px 15px; width:32%;}
.blog_back a.article_btn_back { background:#A51F26;}
.blog_back a.article_btn_prev, 
.blog_back a.article_btn_next { background:#333;}

/* search details */
.blog_box_edit {}
.blog_box_edit * { line-height:150%;}
.blog_box_edit img { width:auto !important; height:auto !important; max-width:100%;margin: 20px 0;}
.blog_box_edit p span{display: block;}
.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 (max-width:1100px) {
  .subbox_item{padding: 8px;}
}

@media screen and (max-width: 960px) {
/* 20201202 */
.subbox_item{padding: 10px;}
}
@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:#121212; padding:15px;}
.order_history tr:nth-child(1) { width:98%;}
.blog_box{padding: 30px 0px;}

/* 20201002 */
h5.blog_le_t,
.blog_le .accordion { display:none;}
.blog_le,
.blog_ri { width:100%; padding:10px;}
.blog_subbox{margin: -5px;}
.subbox_item {padding: 5px;}
.main_part.index_product_content {padding: 50px 20px 80px;}
}
@media screen and (max-width: 640px) {
/* member regist */
.member_regist { width:100%}
.member_regist tr td:nth-child(2) { width:auto;}
.mem_regist_title_s_s{text-align: justify;}
.mem_regist_title_s_s input{display: block;margin: 0 auto;}
.member_title p{padding: 20px 0 0 0;}
.blog_subbox{justify-content: space-between; margin: 0;}
.subbox_item {width: calc(50% - 10px); margin: 10px 0;}
}
@media screen and (max-width: 480px) {
.order_history tr { width:98%;}
.subbox_item { width:100%; width: 270px; margin: 10px auto;}
.blog_subbox{margin: 0 auto; justify-content: center;}
}
@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;}
.information h5{background-position: top center;padding: 0;margin: 0 auto 15px;}
}
/* 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:28px; color:#A51F26; font-weight: 500;}
.order_list_tit span { display:inline-block; vertical-align:bottom; font-size:12px; color:#A51F26; padding:3px; border-bottom:1px #ccc solid;}

.order_list_spec { background:#333; padding:7px}
.order_list_spec p { font-size:15px; color:#fff; text-align:center;}

.order_list_tab {margin: 10px 0;}
.order_list_tab table { width:100%;}
.order_list_tab tr { margin-top: 3px; display: block; background: #FFFFFF;}
.order_list_tab td { font-size:15px; color:#666; padding:10px; background: #FFFFFF;}
.order_list_tab td:nth-child(1) { background:#e6e6e6; color:#333333; width:100px; font-weight:900; text-align: center;}
.order_list_tab td:last-child{width: calc(100% - 10px);}

.shopper {}
.payer { background:#f6f6f6;}
.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:#A51F26; text-align:center; display:inline-block; border-bottom:2px #6B6B6A solid; padding:10px; margin:20px; font-weight: 500;}

.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:#A72126;}
.order_list_pro tr:first-child td { color:#FFFFFF; font-weight:700;}

.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;}
.blog_list .subbox_item{padding: 10px 0;}

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


/*2022.9.20 新增完成訂單小區塊*/
.okpay_tips{margin: 95px 0 80px; padding:30px; width: 100%;}
.okpay_tips section{width: 890px; max-width: 100%; padding: 50px 20px; margin: 0 auto; background: #FFFFFF;}
.okpay_tips article{width: 760px; max-width: 100%; margin: 0; padding: 0;}
.okpay_tips article h6{font-size: 30px; line-height: 1.6; padding: 10px 0 20px; border-bottom: 1px solid #DDDDDD; text-align: center; color: #333333; font-weight: 500;}
.okpay_tips ul{margin-top: 40px;}
.okpay_tips li{justify-content: space-between; width: 680px; max-width: 100%; padding: 10px 0;}
.okpay_tips li dl{width: calc(100% - 95px); font-weight: normal;}
.okpay_tips li dt{font-size: 18px; color: #A62026; line-height: 1.2; margin-bottom: 10px;}
.okpay_tips li dd{padding-left: 90px; position: relative;}
.okpay_tips li dd b{font-weight: normal; width: 80px; border-right: 1px solid #C2BCB4; position: absolute; left: 0; top: 0;}
.okpay_tips li dd span{width: 100%;}
@media (max-width:570px) {
.okpay_tips{padding: 30px 30px 0 0; margin: 50px 0;}
}

@media (max-width:450px) {
.products-list{text-align: center;}
.products-list .item{width: 100%;}
.listAddNum dd span{letter-spacing: .2em;}
.product-layer-two li{width: calc(50% - 5px);}
.product-layer-two li:last-child{width: calc(100% - 5px);}
.product-layer-two li a{font-size: 15px;}
.okpay_tips section{padding: 40px 20px; margin-right: 30px;}
.okpay_tips article h6{font-size: 8vw;}
.okpay_tips li dl{width: 100%; margin-top: 20px;}
.okpay_tips li dd{padding-left: 0;}
.okpay_tips li dd b{position: relative; display: block; border-right: 0; border-bottom: 1px solid #C2BCB4; padding-bottom: 5px; margin-bottom: 10px;}
}