@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@200..900&display=swap');
/* CSS Document */

*, *:before, *:after { -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; }
body{ font-family:'微軟正黑體'; -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: var(--MainColor); }
.center { max-width:1300px; width:100%; margin:0 auto; }
#content { width:100%;}
#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%; max-width:1300px; margin:auto; padding:0; }
.products_content{ width:100%; max-width:1400px; margin:auto; padding: 0;}
.contact_content { width:100%; max-width:1400px; 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: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 auto 0; font-size:16px; color:#545454; text-align:center;  width: 100%;}
.page li { display:inline-block; margin:5px; }
.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-flex; justify-content: center; align-items: center; align-content: center; min-width:30px; height:30px; text-align:center; line-height:29px; border:1px #ccc solid; border-radius:30px; padding:0 10px; border: 1px solid var(--SubColor); color: var(--SubColor); transition: .3s; font-weight: bold;}
.page strong,
.page a:hover { background:var(--SubColor); color:#fff; border: 1px solid var(--SubColor);}


#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:99;}
.footer .center{border-bottom: 1px solid var(--SubColor)}
.footer_info {display: flex; justify-content: space-between; align-items: flex-start; align-content: flex-start;flex-wrap: wrap; padding: var(--m100) 25px var(--m50);}
.footer_info *{font-family: 'Noto Serif TC';}
/* 20210111 updata */
/**/
.box_link {width: 500px; max-width: 50%; text-align: center;}
.box_link>*{width: 340px; max-width: 100%;}
.ft_iconLinks{display: flex; justify-content: center; flex-wrap: wrap; margin-bottom: 20px;}
.box_link a {display: flex; justify-content: center; align-items: center; align-content: center;}
.box_link a:hover img{filter: brightness(10);}
.ft_iconLinks p{margin: 10px;}
.box_link h3{font-size: 1.5em; margin-top: 20px; margin-bottom: 10px; }

.footer_logo { display:inline-block; vertical-align:top; width:280px; margin-right:20px;}

.footer_info ul {width: 500px; max-width: 50%; display: grid; grid-template-columns: repeat(2, 1fr);}
.footer_info li {}
.footer_info h6{font-size: 20px; text-align: center; margin-bottom: var(--m30);}
.footer_info li p { line-height:175%; letter-spacing:1px; color:#333;}
.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%; display: flex; justify-content: flex-start; align-items: center; align-items: center; flex-direction: column; text-align: center;}
.footer_menu a {display:block; padding:5px 7px; margin: 2px 0; font-size:16px; line-height:100%; color: inherit; color: #fff;}
.footer_menu a:hover { }

.copy { text-align:center; padding:7px 0; font-size:13px; color:#FFFFFF;}
.copy a {color: inherit;}
.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: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%; margin:auto; padding:80px 5%;}
.products-list{width: 1070px; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); grid-gap: var(--m30); max-width: calc(100% - 270px);}
.products-list .title_box { width:100%; }
.products-list .item { width:100%; margin:0;}
.products-list .item a { display:block; margin:0 auto; position:relative; }
.products-list .pic { display:block; position:relative; text-align:center; padding-bottom:100%; height:0; overflow: hidden;}
.products-list .pic img { width:100%; height: 100%; object-fit: cover; position: absolute; left: 0; top: 0;}
.products-list .name { font-size:var(--fz18); color:#444; font-weight: bold; letter-spacing:1px; margin-top:15px; line-height:1.5; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; height:3em; font-family: '微軟正黑體';}
.products-list .price * { display:inline-block; margin:15px 5px; }
.products-list .price b { color:#AF6D5A; font-size:var(--fz16); font-family: '微軟正黑體';}
.products-list .price b s{ color:#AF6D5A; font-size:var(--fz18); font-style: normal;margin: unset;font-family: '微軟正黑體';}
.products-list .more { padding: 10px; background-color: var(--WebColor04); color:#fff; font-size:var(--fz16); font-weight:bold; line-height:2; text-align:center; border-radius: 50px;font-family: '微軟正黑體';letter-spacing: 0.2em;}
.products-list a:hover .more { background:var(--MainColor); color:#fff; }
.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:var(--m30) 0 150px; text-align:center; background:repeat center center #f9f9f9; position: relative; height: 550px; max-height: 55vw; display: flex; align-items: flex-end; align-content: baseline; text-align: center; justify-content: center; color: #FFFFFF;}
.banner::after{content: ''; width: 100%; height: 51px; background: #FFFFFF; position: absolute; left: 0; bottom: -1px; max-height: 5vw;}
.banner h5{border-bottom: 3px dashed #ECE0B1; font-size: var(--f40); line-height: 1.6;}
.banA {background-image:url(../images/smallBanner1.jpg); background-size: auto 100%;}
.banB {background-image:url(../images/smallBanner2.jpg); background-size: auto 100%;}
.banC {background-image:url(../images/smallBanner3.jpg); background-size: auto 100%;}
.banD {background-image:url(../images/smallBanner4.png);}
.banE {background-image:url(../images/smallBanner5.jpg); background-size: auto 100%;}
.banF {background-image:url(../images/smallBanner6.jpg); background-size: auto 100%;}
.banG {background-image:url(../images/smallBanner7.jpg); background-size: auto 100%;}
.banH {background-image:url(../images/smallBanner8.jpg); background-size: auto 100%;}
.banblog{background-image:url(../images/smallBanner9.jpg); background-size: auto 100%;}

@media (max-width:768px) {
#bottom_menu{display: block;}
.banner{padding-bottom: 15vw;}
}

/* products */
.product-layer-two {width: 260px; display: grid; grid-template-columns: 1fr;}
.product-layer-two li { display:block; margin:0; padding:10px 0; position:relative; display: block; width: 100%; margin: 0;}
.product-layer-two li a{color: #666666;}
.product-layer-two>li>a { position:relative; border-bottom:1px dotted var(--MainColor); background:#fff; padding:10px 14px; display:block; font-size:var(--fz18); color:var(--MainColor); padding-left: 45px; font-weight: bold; z-index: 5;font-family: 'Microsoft JhengHei';}
.product-layer-two>li>a::before{content: ''; width: 22px; height: 22px; background: var(--MainColor); border-radius: 22px; background: url(../images/title_arr2.svg) center no-repeat, #EEEEEE; background-size: 10px auto; display: block; position: absolute; left: 10px; transform: translateY(-50%); top: 50%;}
.product-layer-two>li>a:hover::before, 
.product-layer-two li.active>a::before{background: url(../images/btn_arrR.svg) center no-repeat, var(--MainColor); background-size: 10px auto;}
.product-layer-two li.active>a { font-weight:bold; background: #E9F3EE;}
.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; display: none;}
.product-layer-two li ul { position:absolute; z-index:100; top:100%; width:110%; border-radius:3px; margin-left:-5%; margin-top:-3px; position: relative; margin: 0; width: 100%; top: 0; border-radius: 0; z-index: 1;}
.product-layer-two li li { display:none; background:#fff; margin:0; display: block;}
.product-layer-two li li a { background:#fff; border:none; font-size:14px; padding:10px 8px; font-weight: normal; padding-left: 45px;font-family: '微軟正黑體';font-weight: 600;}
.product-layer-two li li a:hover{color: var(--WebColor02);}

/* .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_info_page .product-layer-two{display: none;}
.product-wrapper {width: 100%; margin:0 auto; position:relative; }
.fixedsticky { top:110px; }
.mobile_product_name { display:none; margin-bottom:20px;  width: 100%;}
.product_main { padding:0; display: flex;; width:100%; vertical-align:top; }
.sidebarBtn { padding:0; display:block; width:675px;}
.sidebarBtn h2 { color:#111; font-size:24px; }
.sidebarBtn .price { color:var(--MainColor); font-size:22px; font-weight:bold; padding:10px 0; border-bottom:1px dotted #CCCCCC; letter-spacing:1px; }
.sidebarBtn .sp_price { color:#f81f1f; font-size:22px; font-weight:bold; }
.sidebarBtn .price span { font-size:16px; }
.product_info { margin:20px 0; }
.product_info li { margin:10px 0; }
.product_info li span { display:block; vertical-align:top; font-size:14px; color:var(--MainColor) ; font-weight: bold; line-height: 2; margin-bottom: 5px;}
.product_info li .txt_box { display:block; vertical-align:top; color: #444;}
fieldset.size{border:none; padding:0; margin:0; display: flex; justify-content: flex-start; align-items: center; align-content: center; flex-wrap: wrap; margin: -5px;}
.radio-inline__input { clip:rect(1px, 1px, 1px, 1px); position:absolute !important; }
.radio-inline__label { display:block; padding:5px 8px; margin:5px; border-radius:1px; transition:all .2s; color: #aaaaaa; border:1px solid #aaaaaa; border-radius: 5px; cursor: pointer;}
.radio-inline__input:checked + .radio-inline__label { color:var(--SubColor); border:1px solid var(--SubColor);}
.amountNum { width:100px; height:28px; border:1px solid #ccc; line-height:28px;color:#444; padding: 5px 10px; border-radius: 5px; text-align: center;}
.action-button { width:100%; border-radius:5px; background:var(--MainColor); color:#fff; text-align:center; line-height:50px; max-width: 180px;}

/*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:var(--SubColor); }

.toShare { border-top:1px solid #e6e6e6; font-size:12px; color:#888; margin-top:20px; padding-top:20px; display: flex; justify-content: flex-start; align-items: center; align-content: center; flex-wrap: wrap;}
/* .toShare a { display:inline-block; margin-left:10px; } */
.toShare>*+*{margin-left: 10px;}

.product_pic {position:relative; max-width: 625px; width: 100%;}
.product_pic #bx-pager { display:flex; vertical-align:top; width:100%; padding:0; font-size:12px; color:#391911; position:relative; top:0; left:0;}
.product_pic #bx-pager .block { margin-left:3px; margin-top:10px; margin-bottom:10px; }
.product_pic #bx-pager a {width: calc((100% / 6) - 5px); aspect-ratio: 1/1;}
.product_pic #bx-pager a+a{margin-left: 5px;}
.product_pic #bx-pager a img { width:100%; height: 100%; object-fit: cover; display: block;}
.product_pic .bx-wrapper { display:inline-block; vertical-align:top; width:100%; max-width:500px; margin:0 0 var(--m30); padding: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%; }

ul.prod{width: 100%; margin-top: var(--m50);}
.prod_qa{display: none;}
.prod_data h3{border-bottom: 1px dotted var(--SubColor); margin-bottom: var(--m30);}
.prod_data h3 span{width: 150px; background: var(--SubColor); color: #FFFFFF; height: 45px;}
.prod_data .prod-panel{padding: var(--m30) 0;}
.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 { font-size:16px; color:#fff; background:var(--MainColor); padding:10px 20px; display:block; margin:40px auto; width:180px; text-align:center; }

.stepImg { display:flex; margin:40px auto; max-width:500px; width:100%; justify-content: space-between; align-items: center; align-content: center; flex-wrap: wrap;}
.stepImg span { font-size:15px;text-align:center; color:#bfcbd8; width:70px; }
.stepImg span.active { color:var(--MainColor); font-style:italic; }
/* .stepImg span.one { text-align:left; }
.stepImg span.three { text-align:right; } */
.stepImg img { display:block; margin:auto; max-width:100%;}

.shoppingCart_content{max-width: 1225px;}
.shopping-cart { width:100%; margin:15px auto; padding:0; width:100%; overflow:hidden; font-size:16px; }
.shopping-cart.check { margin: var(--m30) auto; max-width: 1225px;}
.shopping-cart .cart_head .cell{ background:var(--MainColor); color:#fff; }
.shopping-cart .row { position:relative; height:auto; clear:both; display: grid; grid-template-columns: 5fr repeat(4, 1fr); grid-gap: 5px; align-items: center; padding: 10px 0;}
.shopping-cart .cart_head .row{padding: 0;}
.shopping-cart.check .row { margin-top:0; grid-template-columns: 5fr repeat(3, 1fr);}
.shopping-cart .cart_content .row { border-bottom:1px dashed #ccc; }
.shopping-cart .cell { padding:10px; text-align:center; vertical-align:top; font-size:16px; letter-spacing:1px;} 
.shopping-cart .cell.product_name { text-align:left; position:relative; min-height:76px; font-weight:bold; }
.shopping-cart .cell.product_name a{display: grid; grid-template-columns: 100px 1fr; grid-gap: var(--m30); align-items: center;}
.shopping-cart.check .cell { }
.shopping-cart.check .cell.product_name { }
.shopping-cart .cell.product_name span { font-size:15px; font-weight:normal; display:block; color:#444; margin-top:5px; }
.shopping-cart .cell.amount { }
.shopping-cart .cart_head .cell.product_name { min-height:initial; }

.small_pic { width:100%; height:100px; display: block;overflow:hidden; }
.small_pic img { width: 100%; height: 100%; object-fit: cover; display: block;}
.payment { margin:30px; float:left; }
.payment li { margin:15px; }
.total_amount { width:460px; margin-top:30px; margin-left:auto; margin-right:.0px; color:#444; font-size: var(--f17);}
.total_amount:after { content:''; clear:both; display:block; width:100%;}
.total_amount ul { border:1px solid var(--MainColor); position:relative; padding: 30px var(--m30); 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; display: none;}
.total_amount li { padding: 15px; }
.total_amount li.priceTotal{font-weight: bold;}
.total_amount li+li{border-top: 1px dashed #dddddd;}
.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:#F3E7E4; line-height:40px; padding:5px 15px; color: var(--MainColor);}
.pickUpWays{padding: 0 var(--m30);}
.notetext { margin:20px 0 40px; padding:0 20px; color:#444; line-height:30px; }
.order_finish_page .notetext{padding: 0; margin: 0; margin-top: 30px;}
.order_finish_page  .information_left{padding: 0; margin: 0;}


/* workshow */
.lb-data .lb-caption { font-weight:normal; }
.subalbum-menu { margin:30px 0; padding:0 15px; }
.subalbum-menu h2 { font-size:var(--f28); color:var(--MainColor); margin-bottom: var(--m30); padding-left: 30px; background: url(../images/title_arr.svg) left center no-repeat; letter-spacing: .1em;}
.block { display:inline-block; width:6px; height:6px; margin:0 10px; background:#391911; vertical-align:middle; display: none;}


.other_subalbum { display:grid; overflow:hidden; grid-template-columns: repeat(3, 1fr); grid-gap: var(--m30); text-align: center;}
/* .other_subalbum li {background:#fff; } */
.other_subalbum li p{transition: .3s; font-weight: bold; font-size: var(--f18); letter-spacing: .1em; line-height: 1.6; margin-top: 10px;}
.other_subalbum li:hover p{color: var(--MainColor);}
.other_subalbum li a { line-height:2;}
.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;  font-size:var(--f18); letter-spacing: .15em;}
.other_album_choice li a { color:#fff; background:var(--MainColor); border-radius:18px; padding:7px 20px;}
.other_album_choice li a img{transition: .3s;}
.other_album_choice li a:hover img{transform: translateX(5px);}
.other_album_choice li b{margin-right: var(--m30);}
.other_album_choice li .fa { height:14px; overflow:hidden; margin-left:10px; margin-right:10px; vertical-align:top; }


.pic-list{display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: var(--m30);}
/* .pic-list .item { width:31%; display:inline-block; vertical-align:top; padding:0 10px; margin:10px 1%;} */
.pic-list .item{position: relative;}
.pic-list .item a { display:block; margin:0 auto; position: relative;  break-inside: avoid;}
.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:block; width: 100%; height: 100%; object-fit: cover; position: absolute; left: 0; top: 0;}
.pic-list .item h6 { font-size:16px; color:#666; padding:5px; position: absolute; left: 0; bottom: 0; background: rgba(255,255,255,.6); width: 100%; display: none;}

.show-list{display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: var(--m30);}
/* .show-list .item {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; text-align: center; -webkit-box-orient:vertical; overflow:hidden; height:26px; }
.show-list .item:hover .show_name { color: var(--MainColor); }
.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:100%; margin:0 auto; padding:20px 0; }
.edit img { max-width:100%; height:auto !important;}


/* contact */
.contact_content form{display: flex; justify-content: space-between; align-items: flex-start; align-content: flex-start; flex-wrap: wrap;}
.information_left, .information_right { display:inline-block; vertical-align:top; padding:10px; }
.contact_content .information_left { width:345px;}
.contact_content .information_right { width:calc(100% - 365px); max-width: 950px;}

.blank_letter { font-family:'Josefin Sans','sans-serif','微軟正黑體'; padding-top:30px; font-size:26px; color:#101010; background-position:left bottom; background-repeat:no-repeat; }
.blank_letter.f{font-size: var(--f20); font-weight: bold; padding: 10px 10px 10px 60px; color: #333333; background: url(../images/title_arr.svg) left 20px center no-repeat, #F6F6F6; overflow: hidden;}
.order_finish_page .blank_letter{padding: 0; margin: 0;}

.blank_letter.f + .contact_formBox{padding: 20px;}
.daycareGo{margin-top: 30px;}
.daycareLink{margin-top: 20px;}
.daycareLink a{width: 250px; height: 50px; background: var(--MainColor); color: #FFFFFF; text-align: center;}

.list_before { margin-top:30px; margin-bottom:20px; font-size:15px; color:#444; display:block; width:100%; position:relative; }
.order_finish_page .list_before{margin: 0;}
.list_before li { margin:5px 0; position:relative; line-height:1.5; }
.list_before.info li{display: grid; grid-template-columns: 60px 1fr;}
.list_before.info li.mapBox{display: block;}
.list_before.account li{ padding-left:65px;}
.list_before li.btn { padding:0; padding-bottom:30px; }
.list_before li.btn .animated-arrow { margin:30px 0; width:100%; }

.list_before li.TEL:before,
.list_before li.TEL2:before,
.list_before li.PHONE:before,
.list_before li.FAX:before,
.list_before li.TAXID:before,
.list_before li.MAIL:before,
.list_before li.ADD:before,
.list_before li.ADD2:before { display:block; font-weight:bold; letter-spacing: .05em; color: var(--MainColor);}

.list_before li.TEL:before {content:"TEL";}
.list_before li.TEL2:before {content:"TEL";}
.list_before li.PHONE:before {content:"PHONE";}
.list_before li.FAX:before {content:"FAX";}
.list_before li.TAXID:before {content:"TAX";}
.list_before li.MAIL:before {content:"MAIL";}
.list_before li.LINE:before {content:"LINE";}
.list_before li.ADD:before {content:"ADD";}
.list_before li.ADD2: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 { font-size:13px; text-align:left; }
.contact_form { margin:20px 0; font-size:15px; color:#444;  display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 20px;}
.contact_form li { display:grid; grid-template-columns: 1fr; grid-gap: 5px; grid-template-rows: 25px 1fr;}
.contact_form li.last { border:none; text-align:right; margin-top:30px; padding-left:0; grid-column: 1 / span 2; display: flex; justify-content: flex-end; align-items: center; align-content: center; flex-wrap: wrap;}
.contact_form li .form__label {}
.contact_form li .form__insert {width:100%;}
.contact_form li .form__insert input, 
.contact_form li .form__insert textarea{width: 100%;}

.contact_form li.captchaBox input{width: auto;}
.captchaBox .form__insert{display: flex; justify-content: flex-start; align-items: flex-start; align-items: flex-start; flex-wrap: wrap;}

/*--------匯款通知表單----------*/
.remit_content .separate_title{margin-bottom: var(--m50); background: #F3F3F3; text-align: center; justify-content: center;}
.formbox_form { margin-top:10px; margin-bottom:30px; color:#444; font-size:15px; line-height:1.5; }
.formbox_form li{padding: 10px 0; display: grid; grid-template-columns: 120px 1fr; grid-gap: var(--m30); align-items: center;}
/* .formbox_form li { display:block; padding-top:10px; padding-bottom:10px; padding-left:150px; } */
.formbox_form li input, 
.formbox_form li textarea{width: 100%; border-radius: 5px; padding: 7px;}
.formbox_form li.captchaBox input{width: 100px; max-width: 100%;}
.formbox_form li .form__label{text-align: right;}
/* .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; } */

/*2022.6.15*/
.formbox_form li blockquote { display:inline-block; vertical-align:top;}
.formbox_form li blockquote input[type="checkbox"] {}
.formbox_form li blockquote label { float:none; display:inline-block; margin-left:5px;}
/*2022.6.15*/

/*--------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:inline-block; color:inherit; font-size:17px; margin-left:20px; top:5px; font-weight:1000; }
.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-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; }

.ps_20220509 { padding:10px 0;}
.ps_20220509 p { font-size:17px; color:#2B3346; font-weight:500;}
.ps_20220509 p a { font-size:17px; color:#506BB2; text-decoration:underline; display:inline-block; vertical-align:top; margin:0 7px;}

/* input 樣式 */
.noborder { border:none; width:100%; padding:5px 0; vertical-align:middle; }
.bar_inquiry_m, 
.bar_inquiry_b, 
.captcha{border:1px solid #c2bcb4; padding:5px; border-radius: 5px;}
.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; }
.captcha_img { vertical-align:middle; margin-left:10px; height: 30px;}
.captcha_img .fa{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:0 10px; line-height:50px; background:none; text-align:center; }
.last .animated-arrow { 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; }

.shop_btns{width: 380px; max-width: 100%; margin: var(--m30) 0 0 auto; display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: var(--m30);}
.shop_btns input,
.shop_btns button,
.shop_btns a {
  width: 100%;
  padding: 10px var(--m30);
  color: #FFFFFF;
  height: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  align-content: center;
  letter-spacing: .1em;
  font-size: var(--f18);
}

.shop_rewrite {
  background: var(--SubColor);
}

.shop_rewrite::before {
  content: '';
  width: 19px;
  height: 16px;
  display: block;
  background: url(../images/btn_arrL.svg) center left no-repeat;
  transition: .3s;
}

.shop_rewrite:hover::before {
  transform: translateX(-5px);
}

.shop_next {
  background: var(--MainColor);
}

.shop_next::after {
  content: '';
  width: 19px;
  height: 16px;
  background: url(../images/btn_arrR.svg) center right no-repeat;
  display: block;
  transition: .6s;
}

.shop_next:hover::after {
  transform: translateX(5px);
}

/*------------通用滿版分段抬頭-------------*/
.separate_title { font-size:var(--f18); color:var(--MainColor); padding:10px 0 10px 30px; background:#F3F3F3 url(../images/separateTitle.png) left center no-repeat; letter-spacing: .1em;}
.separate_title .note { font-size:13px; float:none; padding-left:20px; }
.shopForm_page .separate_title{margin-bottom: var(--m30);}
.shopping-cart+.separate_title{margin-top: var(--m50);}


/* 滑動箭頭 按鈕 */
.animated-arrow { background:var(--MainColor); 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 {display: none; 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;}

/* remit */
.remit_content{width: 100%; max-width: 800px;}
.remit_form{max-width: 630px; margin: 0 auto;}
/* .remit_form li{display: grid; grid-template-columns: 110px 1fr; grid-gap: var(--m30); padding: 10px 0;}
.remit_form li input{width: 100%;}
.remit_form li .form__label{margin: 0;} */


@media screen and (max-width:1200px) {
.show-list .item {}
.show-list .show_pic {}
.show-list .show_pic img {}
.product-layer-two{width: 200px;}
.products-list{max-width: calc(100% - 220px); grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));}

@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 5%; }
.news_part { padding-left:20px; padding-right:20px; }
.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%; }

.rewrite { padding:10px; }

.subalbum-menu h2 { float:none; margin-bottom:15px; }
.product_main { padding:30px 0.5em 30px 0; width:64%; }
.product_pic { padding-left:100px; }
.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%; }
#to_top{
	bottom: 100px;
}
.footer{
	padding-bottom: 80px;
}
.footer_info{
	justify-content: center;
	flex-wrap: wrap;
}

.box_link, 
.footer_info ul{
	max-width: 100%;
}

.box_link>*{
	width: 100%;
	max-width: 100%;
}

/* .footer_info { padding:0 40px; }
.footer_logo { display:block; margin-bottom:20px;}
.footer_info ul { width:100%;} */

#content_main { margin-top:auto; }
.parallax_box { position:relative; top:0; }
.pic-list, 
.other_subalbum{grid-template-columns: repeat(2, 1fr);}
/* .other_subalbum li { width:47%;} */
/* .pic-list .item { width:47%; } */

.subalbum-menu { padding:0; }
.show_content { width:100%; padding: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; } */

.small_pic { left:0; }
/* .shopping-cart .cell:last-child { border-bottom:2px solid #adaaaa; } */
.shopping-cart .row{grid-template-columns: repeat(3, 1fr);}
.shopping-cart.check .row{grid-template-columns: repeat(3, 1fr); align-items: flex-start;}
.shopping-cart .cell{text-align: left;}
.shopping-cart .cell:before { content:attr(data-label); font-weight:bold; color:var(--MainColor); display: block;}
.shopping-cart.check .cell.product_name::before{display: none;}
.shopping-cart .cell.product_name, 
.shopping-cart .cell.pdDel{grid-column: 1 / span 3;}
.payment { float:none; margin: 0; padding: var(--m30) var(--m30);}
.total_amount { width:auto; margin-right:auto; }
.car_page .information_left { width:90%; display:block; margin:50px auto 20px; display: none;}
.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; padding: 0;}
.blank_letter.f + .contact_formBox{padding: 20px 0;}

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

/* 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:0; width:100%; margin:20px auto 0; display:block; }
.product_info li { padding-left:140px; }
.product_info li span { width:105px; margin-left:-110px; }
.fixedsticky { top:initial; }
.half_box { padding-right:5%; }


.product-layer-two{display: none;}
.products-list{max-width: 100%; grid-gap: 10px;}


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

@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:var(--m50) 10px; }
.footer_info ul {width: 600px; letter-spacing:0.1em; grid-template-columns: 1fr;}
.footer_info ul li { display:flex; width: 100%; padding:10px 0; flex-direction: column; align-items: center; align-content: center;}
.footer_info ul li .footer_menu{flex-direction: row; flex-wrap: wrap; justify-content: center;}
/* .footer_info ul li:nth-child(1) { width:100%;}
.footer_info ul li:nth-child(2) { width:100%;} */
.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 5%; }
.products-list{grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));}
/* .products-list .item { width:49%; } */
.products-list .item.first_box { width:100%; }

.pic-list, 
.other_subalbum{grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));}
/* .other_subalbum li { display:block; width:96%; margin:10px 2%; } */
/* .show-list .item { display:block; width:96%; margin:10px 2%; } */
.other_subalbum li p{margin-top: 0;}

.pic-list .item { width:45%; margin:10px 2%; }
.other_album_choice li { font-size:14px; letter-spacing: .05em;}
.other_album_choice li a img{max-height: 1em;}

.product-layer-two li { margin:0 5px 0 0; }
.product_pic .bx-wrapper { padding:0; margin: 0 0 5px;}
.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; }
.pickUpWays{padding: 0; padding-left: 13px;}

/* contact form */
.contact_form{grid-template-columns: 1fr; grid-gap: 10px;	}
.contact_form li.last{grid-column: unset;}
.contact_form li {}
.contact_form li .form__label {}
/* remit form */
.formbox_form li { padding:5px 0; grid-template-columns: 1fr; grid-gap: 0px;}
.formbox_form li .form__label { width:100%; margin-left:0; text-align: left;}
.formbox_form li .form__insert { padding-left:0px; }
/* 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; }

.shopping-cart .row{grid-template-columns: 1;}
.shopping-cart .row, 
.shopping-cart.check .row{grid-template-columns: 1fr;}
.shopping-cart .cell{display: grid; grid-template-columns: 40px 1fr; grid-gap: var(--m30);}
.shopping-cart .cell.pdDel, 
.shopping-cart .cell.product_name{display: block; grid-column:unset;}
.shopping-cart .cell.pdDel{text-align: center;}
.form label.Bigcheck{margin: 0; top: 0; font-size: var(--f16);}
}
/* 600 */
}
/* 768 */
}
/* 980 */
}
/* 1200 */



@media (max-width:525px) {
	.footer_info ul li .footer_menu{max-width: 300px;}
	.footer_info ul li .footer_menu a{width: 100px; padding: 5px;}
}


/* 大於 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 { position:fixed; top:25%; right:0; width:30px; background:#fff; border:1px #ccc solid; padding:5px; text-align:center; z-index:10000;display: none;}
.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;}
.right_member_in input { width:18px; height:36px; margin:5px auto 0;}

/* - member */
.member{color: #444444;}
.mem_submit{width: 210px; height: 50px; background: var(--MainColor); text-align: center; padding: 10px; border-radius: 50px; display: flex; justify-content: center; align-items: center; align-content: center; letter-spacing: .1em; color: #FFFFFF; font-size: var(--f20);}
.member_form { max-width:650px; margin:10px auto; color: #444444; text-align: left;}
.member_form dl{display: grid; grid-template-columns: 120px 1fr; grid-gap: 20px; align-items: center;}
.member_form dl+dl{margin-top: 10px;}
.member_form dl>* { padding:5px;}
.member_form dt {text-align:right;}
.member_form dd{min-height: 35px;}
.member_form dd input { width:100%; border:1px #aaaaaa solid; padding:10px; color:#444444; border-radius: 5px;}
.member_form dd input::placeholder{color: #aaaaaa;}
.member_form dd input[type=radio]{width: auto;}
.member_form dd input[type=radio]+label{padding: 0 10px;}
.member_form dd input:-webkit-autofill {box-shadow: 0 0 0px 1000px #F8F1F0 inset !important;}
.member_form dd input:-internal-autofill-previewed,
.member_form dd input:-internal-autofill-selected {-webkit-text-fill-color: var(--MainColor) !important; transition: background-color 5000s ease-in-out 0s !important;}

.member_form_s{max-width: 430px;}
.member_form_s dl{display: grid; grid-template-columns: 120px 1fr;}
.member_form_s dl>* { padding:5px;}
.member_form_s dt {text-align:right;}

/* - member index */
.member_title { margin:0 auto; max-width:800px; text-align:center; border-bottom:2px var(--MainColor) solid; padding-bottom: 10px; margin-bottom: 30px; color: var(--MainColor);}
.memIndex_text{max-width:800px; margin: var(--m50) auto; text-align: center; line-height: 1.6;}
.memIndex_text p { font-size:20px; line-height: 2;}
.memIndex_text em { font-size:16px; font-style:normal;}

.member_order { margin:0 auto; padding:30px var(--m30); text-align:center; background: #EEEEEE;}
.member_order ul{max-width: 990px; margin: 0 auto;}
.member_order a { width:210px; height:50px; border-radius:50px; margin:10px; border: 1px solid var(--MainColor); color: var(--MainColor); transition: .3s; font-size: var(--f18); letter-spacing: .1em;}
.member_order a:hover{background: var(--MainColor); color: #FFFFFF;}
/* a.m_order_1 { background-image:url(../images/mem_btn_img1.png); background-color:rgba(255,255,255,0.75); border:1px #ABA07D solid;}
a.m_order_2 { background-image:url(../images/mem_btn_img2.png); background-color:rgba(255,255,255,0.75); border:1px #ABA07D solid;}
a.m_order_3 { background-image:url(../images/mem_btn_img3.png); background-color:rgba(255,255,255,0.75); border:1px #ABA07D solid;}
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_6 { background-image:url(../images/mem_btn_img7.png); background-color:rgba(255,255,255,0.75); border:1px #ABA07D solid;}
a.m_order_1:hover { background-image:url(../images/mem_btn_h_img1.png); background-color:rgba(55,55,55,0.75); }
a.m_order_2:hover { background-image:url(../images/mem_btn_h_img2.png); background-color:rgba(55,55,55,0.75); }
a.m_order_3:hover { background-image:url(../images/mem_btn_h_img3.png); background-color:rgba(55,55,55,0.75); }
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); }
a.m_order_6:hover { background-image:url(../images/mem_btn_h_img7.png); background-color:rgba(55,55,55,0.75); } */

/* - member login */
.member_title h2 { font-size:25px; }
.member_login,
.member_login_regist {margin: var(--m50) auto; }
.login_mem_name,
.login_mem_pass { background:no-repeat center left; padding:7px; padding-left:40px; border:1px #ccc solid; color:#888; width:100%; }
.member_login_regist{max-width: 500px;}
.mem_loginSubmit{margin-top: var(--m50);}
/* .login_mem_name { background-image:url(../images/mem_icon2.png);}
.login_mem_pass { background-image:url(../images/mem_icon3.png);} */
/* .login_mem_submit { background:#7AA354; color:#fff; width:100%; padding:7px; text-align:center;} */
.login_mem_other_link { margin:10px auto; }
.login_mem_other_link a { color: var(--MainColor); font-weight: bold; font-size:14px;}
.member_login_regist { background:#EEEEEE; text-align:center; padding:var(--m50) var(--m30);}
.member_login_regist h2 { font-size:20px; color:var(--MainColor);}
.member_login_regist p { font-size:15px; margin: var(--m30) auto; color:#888; font-family:Arial, Helvetica, sans-serif;}
/* .member_login_regist a { background:#ABA07D; display:inline-block; color:#fff; padding:10px 20px;} */

/* - member regist */
.mem_regist_title_s { max-width:800px; margin:0 auto; font-size:18px; background:#EEEEEE; color: var(--MainColor); text-align:center; margin:20px auto; padding:10px; font-weight: bold;}
.mem_regist_title_s_s { max-width:800px; margin:0 auto; font-size:16px; font-family:Arial, Helvetica, sans-serif; text-align:center; padding:10px; color:#666; font-family:Arial, Helvetica, sans-serif; line-height:185%;}
.member_copy_right_box { border:1px #888888 solid; height:360px; overflow:scroll; max-width:800px; padding:10px; font-size:12px; color:#444444; margin:10px auto;}

/* - member data search */
.mem_box2 { text-align:center; margin: 0 auto; max-width: 475px; margin-top: var(--m50); margin-bottom: var(--m30);}
.mem_box2 .mem_submit{max-width: calc(50% - 10px); margin: 5px;}
/* .mem_box2 input.bbtn01,
.mem_box2 input.bbtn02 { width:160px; margin:20px; text-align:center; padding:15px 20px; color:#fff; background:#ABA07D;}
.mem_box2 input.bbtn01 { background:#ABA07D;}
.mem_box2 input.bbtn02 { background:#7AA354;} */

/* - order_history */
.memOrderHis_page .member_title, 
.mask_order_history{margin-bottom: var(--m50);}
.order_history { margin:0 auto; background:#cccccc; max-width: 800px; width: 100%;}
.order_history tr { background:#963; border-bottom:1px #ccc solid;}
.order_history tr th{ background:#f0f0f0; padding:15px 25px; color: var(--MainColor); font-weight: normal;}
.order_history td { background:#fff; padding:15px 25px; color:#999; letter-spacing: .05em;}
.order_history tr td:nth-child(3) a { display:block; font-size:12px; color:#fff; background:var(--MainColor); padding:3px 10px; width:80px; margin-top:5px; text-align: center; letter-spacing: 0;}

/* - 20201202 - */
/* - blog - */
.blog_box { min-height:20vw; }
/* .blog_le,
.blog_ri {margin-bottom:2vw; padding:7px;} */
.blog_le { width:220px;}
.blog_ri { width:calc(100% - 240px); max-width: 1000px; min-height:75vh; }

h5.blog_le_t { font-size:24px; font-weight:500; color:#666; font-family:serif; letter-spacing:2px; margin-bottom:7px;}
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; border-radius:15px; border:1px #DDDDDD solid; overflow:hidden; }
.accordion li .link { cursor:pointer; display:block; padding:15px 10px; color:#444; font-size:14px; font-weight:700; border-bottom:1px solid #CCC; position:relative;}
.accordion li+li{border-top: 1px solid #DDDDDD;}
.blog_le .accordion li .link:last-child { 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:var(--MainColor) !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:#fff !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:var(--MainColor); font-size:30px; border-bottom:1px var(--MainColor) 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: grid; grid-template-columns: repeat(3, 1fr); grid-gap: var(--m30);}
.blog_subbox * { transition:all 0.6s ease;}

.subbox_item { display:block; position:relative; }
.subbox_item:nth-child(2n) { float:right;}

.subbox_item a { display:block; position:relative; padding: 7px; border: 1px dashed var(--SubColor);}
/* .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; padding:0; width:100%; aspect-ratio: 1/1; line-height:0; position: relative;}
.blog_list_le::before{content: 'MORE'; width: 50px; height: 50px; display: flex; justify-content: center; align-items: center; align-content: center; text-align: center; color: #FFFFFF; background: var(--SubColor); border-radius: 50px; position: absolute; right: 15px; bottom: 15px; font-size: 12px; opacity: 0; transition: .6s;}
.blog_list_le img { max-width:100%; width: 100%; height: 100%; object-fit: cover; display: block;}

.blog_list_ri { display:block; vertical-align:top; width: 100%; margin-top: var(--m30);}
.blog_list_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;}
.blog_list_ri em { font-size:14px; color:#999; font-style:normal; display:block; margin:7px 0;}
.blog_list_ri p { font-size:15px; color:#666; line-height:130%; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; white-space:normal; overflow:hidden; word-break:break-all;}

/* hover */
/* .subbox_item a:hover{background: var(--SubColor02); border-color: var(--SubColor02); border-style: solid;} */
.subbox_item a:hover .blog_list_le::before{opacity: 1;}
/* .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; border-radius:30px; 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%; display: flex; justify-content: space-between; align-items: center; align-items: center; flex-wrap: wrap;}
.blog_back a { font-size:15px; color:#fff; display:block; padding:7px 15px; width:calc((100% / 3) - 3px);}
.blog_back a.article_btn_prev { background:var(--SubColor);}
.blog_back a.article_btn_back { background:var(--MainColor);}
.blog_back a.article_btn_next { background:var(--SubColor);}

/* 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:960px) {
/* 20201202 */
.blog_subbox {grid-template-columns: repeat(2, 1fr);}
.subbox_item { width:100%;}
}
@media screen and (max-width:768px) {

.right_member_in{display: block;}
.mask_order_history { width:100%; padding:var(--m30) 0; overflow:auto;}
.order_history { background:none;}
.order_history tbody{display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 5px;}
.order_history tr:nth-child(1) { display:none;}
.order_history tr { background:#fff; /*border:1px #ccc solid;*/ width:100%; margin:0; display:block;}
.order_history tr td { display:flex; width:100%; padding:5px; border-bottom:1px #f0f0f0 solid; justify-content: space-between; align-items: center; align-content: center; flex-wrap: wrap;}
.order_history tr td:nth-child(1) { text-align:center;}
.order_history tr td:nth-child(1) { display:flex; font-weight:1000; color:#fff; background:var(--MainColor); padding:10px; text-align: center;justify-content: center;}
.order_history tr:nth-child(1) { width:100%;}

/* 訂購記錄查詢-data */
.memOrderHisData_page .order_history tbody{grid-template-columns: 1fr;}
.memOrderHisData_page .order_history tr{}
.memOrderHisData_page .order_history tr td{display: grid; grid-template-columns: 100px 1fr; text-align: left; padding: 10px;}
.memOrderHisData_page .order_history tr td::before{content:attr(data-name); }
.memOrderHisData_page .order_history tr td:nth-child(1){}

.member_order ul{max-width: 460px; justify-content: center;}

/* 20201002 */
h5.blog_le_t,
.blog_le .accordion { display:none;}
.blog_le,
.blog_ri { width:100%; padding:0;}
}
@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) {
.blog_subbox{grid-template-columns: 1fr;}
.order_history tbody{grid-template-columns: 1fr;}
.order_history tr { width:100%; margin: 0;}
.member_form dl{grid-template-columns: 1fr; grid-gap: 0px;}
.member_form_s dl{grid-template-columns: 100px 1fr; grid-gap: 0px;}
.member_form dl+dl{margin-top: 10px;}
.member_form dt{text-align: left;}
.member_form_s dt{text-align: right;}
}
@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;} */
}
@media screen and (max-width:375px) {
.member_form_s dl{grid-template-columns: 1fr; grid-gap: 0px;}
.member_form_s dt{text-align: left;}
}





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

.order_list_tit { padding:10px 0;}
.order_list_tit b { font-size:28px; color:#ea8228;}
.order_list_tit span { display:inline-block; vertical-align:bottom; font-size:12px; color:#666; 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-bottom:var(--m50); margin-top: 5px;}
.order_list_tab table{ width:100%; display: block;}
.order_list_tab tbody { width:100%; display: grid; grid-template-columns: 1fr; grid-gap: 5px;}
.order_list_tab tr {display: grid; grid-template-columns: 150px 1fr; grid-gap: 5px;}
.order_list_tab th, 
.order_list_tab td { font-size:var(--f17); color:#444444; padding:10px; width: none; display: block;}
.order_list_tab th { background:#F3F3F3; font-weight:normal; text-align: left;}

.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:#222; text-align:center; display:inline-block; border-bottom:2px #000 solid; padding:10px; margin:20px;}

.order_list_pro {}
.order_list_pro table { width:100%; display: block;}
.order_list_pro table tbody{display: grid; grid-template-columns: 1fr;}
.order_list_pro tr {border-bottom:1px #ddd solid; display: grid; grid-template-columns: 60px 1fr repeat(3,150px);}
.order_list_pro td, 
.order_list_pro th { padding:10px; text-align:center; color:#666; font-size:var(--f17); display: block;}
.order_list_pro th:nth-child(2), 
.order_list_pro td:nth-child(2) { text-align:left;}
.order_list_pro td p { display:none;}

.order_list_pro tr:first-child { background:var(--MainColor);}
.order_list_pro tr:first-child th { color:#FFFFFF; font-weight:1000;}

.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:var(--MainColor); display:inline-block; padding:0 10px;}


@media (max-width:768px) {
  .order_pay{padding: 0;}
  .order_list_pro tr {display: grid; grid-template-columns: repeat(3,1fr); text-align: left;}
  .order_list_pro tr:first-child{display: none;}
  .order_list_pro tr td:first-child, .order_list_pro tr td:nth-child(2){grid-column: 1 / span 3;}
  .order_list_pro tr td{display: flex; justify-content: flex-start; align-items: center; align-items: center; flex-wrap: wrap; }
  .order_list_pro tr td:first-child{background: var(--MainColor); color: #FFFFFF; text-align: center; justify-content: center;}
  .order_list_pro tr td:nth-child(2){color: var(--MainColor); font-weight: bold; font-size: var(--f20);}
  .order_list_pro tr td::before{display: block; color: var(--SubColor); content: attr(data-name); padding-right: 10px;}
  .order_list_pro tr td:nth-child(2)::before{display: none;}
}
@media (max-width:640px) {
  .order_list_tab tr{grid-template-columns: 90px 1fr;}
/* .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 10px 0 0;}
/* .order_list_tab td { padding:6px;}
.order_list_tab td:nth-child(1) { width:80px;} */
.last_box_money p { font-size:13px;}
}

@media (max-width:425px) {
  .order_list_pro tr{grid-template-columns: 1fr;}
  .order_list_pro tr td:first-child, .order_list_pro tr td:nth-child(2){grid-column:unset;}
}



/* 2021 09 13 相關推薦 */
.prod_related { background:#FAF6EE; padding:var(--m50) var(--m30);}
.prod_related h6 {width: 100%; max-width:1400px; margin:0 auto var(--m50); text-align:center;}
.prod_related h6 span {border-bottom: 2px dashed var(--SubColor); padding-bottom: 5px;}
.prod_related h6 span:before { content:'相關推薦'; font-size:24px; color:var(--TextColor);}

.related_list { list-style:none; width: 100%; max-width:1300px; margin:auto; text-align:center;}
.related_list li {padding: 15px; width: 25%;}
.related_list li a { display:block; height: 100%;}
.related_list li a figure{border: 10px solid #fff; aspect-ratio: 1/1; margin-bottom: 10px;}
.related_list li a img { width:100%; display: block; height: 100%; object-fit: cover;}
.related_list li a p { font-size:var(--f18); color:#333;}

@media (max-width:1200px) {
	.related_list li{padding: 10px;}
}

@media (max-width:768px) {
.related_list li{padding: 5px;}
.related_list li a figure{border-width: 5px;}
}

@media (max-width:570px) {
.related_list{display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); grid-gap: 10px;}
.related_list li {width:100%; padding: 0;}
}

@media (max-width:480px) {
	.related_list{grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));}
}

.info_fix_links {
    width: 70px;
    z-index: 999;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    align-content: center;
    justify-content: flex-start;
    padding-bottom: 20px;
}
.info_fix_links a span::before {
    content: '';
    width: 100%;
    height: 100%;
    background-position: center;
    background-size: auto;
    background-repeat: no-repeat;
    display: block;
}
.info_fix_fb span::before{
    background-image: url(../images/fix_fb.svg);
}
.info_fix_ig span::before{
    background-image: url(../images/fix_ig.svg);
}
.info_fix_line span::before{
    background-image: url(../images/fix_line.svg);
}
.info_fix_phone span::before{
    background-image: url(../images/fix_phone.svg);
}
.info_fix_thread span::before{
    background-image: url(../images/fix_thread.png);
}