@charset "utf-8";
@import "main-customize.css";
body {
    background: #ffffff;
    

    background-position: top center;
    background-repeat: no-repeat;
    background-size: 100% auto;
    margin: 0;
    padding: 90px 0 0 0;
    font-family: 'Oswald', 'Noto Sans TC', Microsoft JhengHei;
    font-weight: 300;
    position: relative;
    font-size: 16px;
}

img { border: 0; vertical-align: middle; }
input { vertical-align: middle; font-family: 'Noto Sans TC', Microsoft JhengHei; font-weight: 300;}
button { font-family: 'Noto Sans TC', Microsoft JhengHei; font-weight: 300;}
input.check-box { width: 20px; height: 20px; vertical-align: middle; display: inline-block; font-weight: 300;}
select { font-family: 'Noto Sans TC', Microsoft JhengHei; font-weight: 300;}
textarea { font-family: 'Noto Sans TC', Microsoft JhengHei;  font-weight: 300;}
hr { margin: 0 0 15px 0; padding: 15px 0 0 0; border: 0; border-bottom: 1px #cacaca solid;}

h1, h2, h3, h4 { margin: 0; padding: 0; font-weight: 300; }

/*  漸變效果 */
a { color: #554c74; transition: all 0.3s ease 0s; text-decoration: none;}
.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden;}
/* Hides from IE-mac \*/
* html .clearfix { height: 1%;}

/* End hide from IE-mac */
/*  padding and border no width  */
* {
    -webkit-box-sizing: border-box;
    /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;
    /* Firefox, other Gecko */
    box-sizing: border-box;
    /* Opera/IE 8+ */
}

.wallpeper { width: 100%; min-height: calc(100% - 155px); overflow: hidden;}
.i-main-box { max-width: 1040px; margin: 0px auto 50px auto; background-color: #ffffff;  position: relative; z-index: 1; border-bottom: 2px #ececec solid;}
.i-more-box { text-align: center; margin-bottom: 30px;}
.i-more-box a { display: inline-block; vertical-align: middle; padding: 6px 12px; text-align: center; letter-spacing: 2px; font-size: 14px; color: #acacac; border: 1px #d1d1d1 solid;}
.i-more-box a:hover { background-color: #f0f0f0;}
.main-box { max-width: 1040px;  margin: 50px auto 50px auto; background-color: #ffffff;  position: relative; z-index: 1; border-bottom: 2px #ececec solid; }
.page-box { position: relative; z-index: 10;  padding-top: 20px;}
.top-bg { position: absolute; top: 0; left: 0; width: 100%; max-height: 100%; max-width: 100%; z-index: 0;  overflow: hidden; display: none;}
.top-bg img { width: 100%; height: auto; }
.left-bg {  position: absolute; top: 0; left: 0; width: auto; height: auto; z-index: 1;}

/*  header */
header { z-index: 11; position: fixed; top: 0; left: 0; width: 100%; background-color: rgba(255, 255, 255, 0.95); transition: all 0.3s ease; border-bottom: 1px #dfdfdf solid; box-shadow: 0 0 30px #eeeeee;}

.top-head { position: relative; height: 90px; transition: all 0.3s ease; }
.top-head:after { content: ''; display: block; position: absolute; bottom: 0; left: 0;  width: 100%; border-bottom: 1px #ffffff solid; opacity: 0.2;}

header .logo { position: absolute; top: 25px; left: 15px; z-index: 50; transition: all 0.3s ease; filter: brightness(0.1); }
header.down .logo {  top: 20px; }
header .logo:hover { filter: brightness(0.6); }
header .logo a { display: block;}
header .logo img { width: 110px; height: auto;} 
header .member-qrcode { display: none;}
header .scan-qrcode { display: none;}
.member-qrcode-box { display: none;}
nav#nav { display: none;}



/* 加價兌 */
.add-box { margin: 10px auto 30px auto; max-width: 440px; display: none;}
.add-box.show { display: block;}
.add-box .pro-name { font-size: 18px; padding-bottom: 5px; margin-bottom: 5px; border-bottom: 1px #d4d4d4 solid;}
.add-box .add-select { display: flex; margin-bottom: 10px; }
.add-box .add-select span { width: 80px; flex: none; line-height: 36px;}
.add-box .add-select select { flex: 1; border: 1px #d4d4d4 solid; font-size: 16px; padding: 4px 10px; max-width: calc(100% - 80px); background-color:  #f8f8f8; ; }

.add-box .add-total-list { padding: 10px 0; background-color: #f1f1f1; padding: 10px;}
.add-box .add-total-list .add-title { padding-bottom: 5px; font-size: 14px; color: #8a8a8a; }
.add-box .add-total-list .list { display: flex; margin-bottom: 5px;}
.add-box .add-total-list .list > div { flex: 1;}
.add-box .add-total-list .list div.unit { width: 30px; text-align: center; flex: none; color: #7c7c7c; font-size: 14px;}
.add-box .add-total-list .list div.del { width: 40px; text-align: right; flex: none;}
.add-box .add-total-list .list div.del button { width: 24px; height: 24px; border-radius: 3px; text-align: center;background-image: url(../image/icon-del-black.svg);  background-position: center; background-repeat: no-repeat; background-size: contain; filter: grayscale(1);}
.add-box .add-total-list .list div.subtoltal { width: 40px; text-align: right; flex: none;}
.add-box .add-total-list .total { display: flex; border-top: 1px #c2c2c2 solid; padding-top: 10px; margin-top: 10px;}
.add-box .add-total-list .total > div { flex: 1; text-align: right;}
.add-box .add-total-list .total div.total-price { width: 60px; flex: none; color: #aa2020;}

.add-box .select-box button { background-color: #333333; font-size: 14px; color: #ffffff; line-height: 36px; padding: 0 0px; width: 90px; text-align: center; flex: none;  border-radius: 0; margin-left: 10px; border-radius: 4px;}
.add-box .select-box button:hover { background-color: #646464;}

/* 加價購 */
.add-mode { background-color: #f3f2f2; padding: 15px; border-radius: 8px; margin: 10px 0; overflow: hidden; }
.add-mode h2.title { font-size: 20px; text-align: center; padding: 6px; background-color: #535353; color: #ffffff; margin: -15px -15px 20px -15px; }
.add-mode .group { padding: 0 0 10px 0; margin-bottom: 10px; border-bottom: 1px #dbdbdb solid; }
.add-mode .group:last-child { border-bottom: 0;}
.add-mode .group h3 { font-size: 18px; color: #7a7a7a; font-weight: 300; margin-bottom: 10px; padding-left: 5px;}
.add-mode .group .list { display: flex;}
.add-mode .group .list .check-item { flex: none; width: 30px;  display: inline-block; display: flex; align-items: center;}
.add-mode .group .list p { flex: 1; margin: 0; font-size: 14px;}
.add-mode .group .list .price { width: 50px; flex: none; padding: 0; text-align: right; font-size: 16px; color: #960000;}

/* 其他選單 */
.other-menu { background-color: #f8f8f8; position: fixed; top: 0px; right: -360px; max-width: 360px; bottom: 0; z-index: 945; transition: all 0.5s ease; padding: 80px 20px 20px 30px;  font-size: 16px; border-left: 1px #c5c5c5 solid; }


.other-menu div.menu-copyright { color: #666666; font-size: 12px; padding: 10px 0 0 0; border-top: 1px #d4d4d4 solid; margin-top: 20px; display: block;}
.other-menu .others a { display: block;  padding: 5px 0; color: #3d3d3d; }
.other-menu .others a:before { content: ''; display: block; margin: 15px auto 0 auto; width: 50px; height: 50px;  background-repeat: no-repeat; background-position: center;  background-size: contain; opacity: 0.3; display: none; }

.other-menu a.m01:before { background-image: url(../image/icon-menu.svg);}
.other-menu a.m02:before { background-image: url(../image/icon-news.svg);}
.other-menu a.m03:before { background-image: url(../image/icon-store.svg);}
.other-menu a.m04:before { background-image: url(../image/icon-media.svg);}
.other-menu a.m05:before { background-image: url(../image/icon-faq.svg);}
.other-menu a.m06:before { background-image: url(../image/icon-about.svg);}
.other-menu a.m07:before { background-image: url(../image/icon-privacy.svg);}
.other-menu a.m08:before { background-image: url(../image/icon-contact.svg);}
.other-menu a:hover { color: #88874e;}
.other-menu a:hover:before { filter: brightness(3);opacity: 1;}
.other-menu.active { right: 0;}
.other-menu .quick-search-box { display: flex; width: 100%; margin: 10px 20px 20px 0;}

.quick-search-box .search-text { flex: 1; border: 0; line-height: 45px; margin: 0 5px 0 0; padding: 0; font-size: 18px; width: calc(100% - 50px);  background-color: transparent; }
.quick-search-box button.search-btn {  flex: none; width: 45px; height: 45px; background-color: transparent; background-position: center; background-repeat: no-repeat; background-size: contain; background-image: url(../image/icon-search.svg);}

.m-menu { height: calc(100% - 120px); overflow-y: auto; margin: 0 -20px -10px -30px; border-top: 1px #b9b9b9 solid; }
.m-menu>div span { display: block; padding: 8px 20px; margin: 0; color: #333333; position: relative; }
.m-menu>a,
.m-menu>div .sub-m-menu > a { display: block; padding: 8px 20px; margin: 0; color: #333333; border-top: 1px #e6e6e6 solid;  }
.m-menu>div,
.m-menu>a { border-bottom: 1px #b9b9b9 solid; border-top: 0; margin: 0;}
.m-menu>div>span { position: relative;}
.m-menu>div>span:after { content: ''; width: 0; height: 0; border-style: solid; border-width: 6px 5px 0 5px; border-color: #818181 transparent transparent transparent; position: absolute; right: 10px; top: 15px; transition: all 0.3s ease;}

.m-menu>div.active>span:after { transform: rotate(180deg);  }
.m-menu>div .sub-m-menu { display: none; background-color: #f1f1f1; box-shadow: 0 0 10px #dbdbdb inset;}

/* coupon */
.coupon-lis { position: relative;}
.coupon-lis ul { list-style: none; padding: 0; margin: 0;}
.coupon-lis ul li { display: flex; height: 106px;  float: left; width: calc(50% - 10px); margin: 0 5px 10px 5px;}
.coupon-lis ul li .coupon-line01 { width: 10px; background-image: url(../image/coupon-line.svg); background-position: top center; background-repeat: repeat-y; background-size: 100% auto; }
.coupon-lis ul li .coupon-line02 { width: 10px;  background-image: url(../image/coupon-line01.svg); background-position: top center; background-repeat: repeat-y; background-size: 100% auto; }
.coupon-lis ul li .code-img { display: flex; flex: 1;
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#b9935d+0,998749+19,f8c786+53,936e40+100 */
    background: #b9935d; /* Old browsers */
    background: -moz-linear-gradient(left,  #b9935d 0%, #998749 19%, #f8c786 53%, #936e40 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left,  #b9935d 0%,#998749 19%,#f8c786 53%,#936e40 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right,  #b9935d 0%,#998749 19%,#f8c786 53%,#936e40 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b9935d', endColorstr='#936e40',GradientType=1 ); /* IE6-9 */
}
.coupon-lis ul li .share { width: 34px; display: flex; align-items: center;  justify-content: center; text-align: center; padding: 5px;}
.coupon-lis ul li .share a { color: #ffffff; text-shadow: -1px -1px 0 #222222;}
.coupon-lis ul li .code-img:before { display: block; content: ''; width: 10px; background-image: url(../image/coupon-line01.svg); background-position: -5px 0; background-repeat: repeat-y; background-size: 100% auto; }
.coupon-lis ul li .code-img:after { display: block; content: '';   width: 10px; background-image: url(../image/coupon-line01.svg); background-position: 5px 0; background-repeat: repeat-y; background-size: 100% auto; }
.coupon-lis ul li .code-img .code { flex: 1; padding: 0px 15px; display: flex; align-items: center;  justify-content: center; height: 100%; }
.coupon-lis ul li .code-img .code span { display: block; padding: 10px; border: 1px #ffffff dashed; text-align: center; height: calc(100% - 20px); color: #ffffff;}
.coupon-lis ul li .code-img .code span img {  width: 100%; height: auto;}
.coupon-lis ul li .info { flex: none; width: 290px; background-color: #727171; display: flex; color: #ffffff;}
.coupon-lis ul li .info:before { display: block; content: ''; width: 10px; background-image: url(../image/coupon-line01.svg); background-position: -5px 0; background-repeat: repeat-y; background-size: 100% auto; }
.coupon-lis ul li .info:after { display: block; content: '';   width: 10px; background-image: url(../image/coupon-line01.svg); background-position: 5px 0; background-repeat: repeat-y; background-size: 100% auto; }
.coupon-lis ul li .info .day-line {width: 120px; flex: none; padding: 0 0 0 5px; display: flex; align-items: center;  justify-content: center; text-align: right; height: 100%;}
.coupon-lis ul li .info .day-line > div { border: 1px #ffffff dashed; padding: 5px; height: calc(100% - 20px); width: 100%; }
.coupon-lis ul li .info .day-line > div p { margin: 0; padding: 10px 0 0 0; font-size: 14px;}
.coupon-lis ul li .info .cash { flex: 1; font-size: 14px; position: relative; text-align: center; line-height: 1em;}
.coupon-lis ul li .info .cash span { font-size: 60px; letter-spacing: -4px; }
.coupon-lis ul li .info .cash > div { position: absolute; bottom: 10px; left: 0; width: 100%;}
.coupon-lis ul li .info .coupon-btn { width: 30px; flex: none;}
.coupon-lis ul li .info .coupon-btn a { display: block; width: 100%; height: 40%; display: flex; align-items: center;  justify-content: center; text-align: center; color: #ffffff; }
.coupon-lis ul li .info .coupon-btn a.ex-change { border-bottom: 1px #ffffff dashed; height: 60%;}
.coupon-lis ul li .info .coupon-btn a.del img { width: 24px; height: auto; filter: brightness(5); }
.coupon-lis ul li .info .coupon-btn a.del:hover { filter: brightness(0.6);}

.coupon-lis ul li.redeemed { filter: grayscale(1); opacity: 0.6;}
.coupon-qrcode { max-width: 320px; width: 100%; height: auto; margin: 0 auto; display: block;}

h3.over20 { padding: 10px 0; font-size: 20px; color: #af2f2f;}
.give-box { max-width: 320px; margin: 0 auto; padding: 20px 0; display: flex; height: calc(100% - 36px); align-items: center;  justify-content: center;}
.give-box input.text-data { border: 0; border-bottom: 1px #d1d1d1 solid;}

/* identity-selection */
.identity-selection { margin-bottom:  30px;}

/* 點數 */
.point-box02 { padding: 0 0 30px 0; }
.point-box02>h3 {  text-align: center;  padding: 0 0 20px 0;  font-weight: 100; }
.point-box02>h3 span { font-size: 36px; color: #b81b1b; }
.point-percent {  max-width: 200px; height: 200px; border-radius: 99em;  background-color: #c4c4c4; margin: 0 auto; text-align: center; overflow: hidden; border: 5px #c7c7c7 solid; }

.point-percent .point-have {
    border-top: 1px #b3b162 solid;
    width: 100%;
    color: #e6d99d;
    line-height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ef6356+0,c10000+100 */
    background: #ef6356;
    /* Old browsers */
    background: -moz-linear-gradient(left, #ef6356 0%, #c10000 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(left, #ef6356 0%, #c10000 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, #ef6356 0%, #c10000 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ef6356', endColorstr='#c10000', GradientType=1);
    /* IE6-9 */

}


.point-percent .point-not-yet {
    width: 100%;
    color: #e9e5d5;
    line-height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#c6b589+0,896a3b+96 */
    background: #c6b589;
    /* Old browsers */
    background: -moz-linear-gradient(left, #c6b589 0%, #896a3b 96%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(left, #c6b589 0%, #896a3b 96%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, #c6b589 0%, #896a3b 96%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#c6b589', endColorstr='#896a3b', GradientType=1);
    /* IE6-9 */

}

/* index-member-area */
.index-member-area { display: flex; padding: 30px 0;}
.index-member-area .item { flex: 1; text-align: center; padding: 10px;}
.index-member-area .item .round { max-width: 180px;  position: relative; margin: 0 auto;}
.index-member-area .item .round:before { display: block; content: ''; width: 100%; height: 0; padding-bottom: 100%; }


.index-member-area .item .round .round-box { color: #ffffff; background-color: #e4e4e4; border-radius: 99em; width: 78%; height: 78%; position: absolute; top: 11%; left: 11%; display: flex; align-items: center; justify-content: center;}
.index-member-area .item .round .round-box .a-part { font-size: 30px; color: #746f5a; }
.index-member-area .item .round .round-box .a-part.unit:after { content: ' K';  }
.index-member-area .item .round .round-box .b-part { font-size: 16px; color: #000; }
.index-member-area .item .round .round-bg { width: 100%; height: 0; padding-bottom: 100%; background-position: center; background-repeat: no-repeat; background-size: contain; position: absolute; top: 0; left: 0; }


@keyframes round01 {
    0% { transform:rotate( 0deg);  }
    100% {  transform:rotate( 359deg); }
}

@keyframes round02 {
    0% { transform:rotate( 0deg); }
    100% {  transform:rotate( -359deg); }
}


.index-member-area .item .round .round-bg.round01 { background-image: url(../image/member-round-01.svg) ;}
.index-member-area .item .round .round-bg.round02 { background-image: url(../image/member-round-02.svg) ;}
.index-member-area .item .round .round-bg.round03 { background-image: url(../image/member-round-03.svg) ; opacity: 0.6; filter: brightness(5);}
.index-member-area .item .round .round-bg.round04 { background-image: url(../image/member-round-04.svg) ; opacity: 0.4; filter: brightness(5);}

.ani-round01 { animation: round01 16s infinite;}
.ani-round02 { animation: round02 linear 12s infinite; }
.ani-round03 { animation: round01 ease 20s infinite; }
.ani-round04 { animation: round02 ease-in-out 12s infinite; }


/* i-recommend */
.i-recommend {  margin: 0 -0.5%;}
.i-recommend .item { width: 32.33%; margin: 0 0.5% 10px 0.5%; float: left; height: 200px; border-radius: 5px; overflow: hidden; }
.i-recommend .item .photo { width: 55%; background-size: cover; background-position: center; float: left; height: 100%; }
.i-recommend .item .photo a { display: block; width: 100%; height: 100%; background-size: cover; background-position: center; color: #333333; }
.i-recommend .item .photo:hover a { opacity: 0.8; }
.i-recommend .item .info { margin-left: 55%; color: #333333; height: 100%; position: relative; padding: 25px 25px 25px 25px; }
.i-recommend .item .info h3 { margin: 0; font-size: 16px; height: 2.4em; overflow: hidden; line-height: 1.2em; margin-bottom: 10px; }
.i-recommend .item .info p { margin: 0; font-size: 14px; line-height: 1.2em; height: 5.6em; overflow: hidden; }
.i-recommend .item .info a.i-recommend-more { background: url(../image/i-recommend-more.jpg); background-size: cover; position: absolute; bottom: 15px; right: 15px; display: block; width: 24px; height: 10px; }

/* 上板ICON */
.quick-menu { position: absolute; width: 900px; top: 23px; left: 0; width: 100%; transition: all 0.3s ease; z-index: 40; text-align: center; padding-right: 0px;}
.quick-menu>div { display: inline-block; transition: all 0.3s ease;}
.quick-menu>div.logo-space { width: 160px; display: none;}
.quick-menu>div>a { display: block; position: relative; white-space: nowrap; padding: 10px 15px 28px 15px; transition: all 0.3s ease; }
.quick-menu>div>a>span { font-size: 16px; display: block; margin-top: 5px; color: #333333; opacity: 1; transition: all 0.3s ease; text-align: center; z-index: 10; }
.quick-menu>div>a:before { background-color: #ffffff; width: 100%; height: 0; content: ''; display: block; position: absolute; bottom: 0px; left: 0; transition: all 0.3s ease; z-index: 1; opacity: 0; z-index: 1;}
.quick-menu>div:hover>a:before { height: 100%; background-color: rgba(243, 242, 242, 0.9); opacity: 1; z-index: -1;}




.quick-menu>div>a i { display: block; position: absolute; top: -5px; right: -20px; width: 20px; height: 20px; line-height: 18px; background-color: #ff1515;
    border-radius: 8px; color: #ffffff; font-size: 12px; text-align: center; font-style: normal;}




/* 次選單 */
.sub-menu { position: absolute; width: 100%; top: 68px; background-color: rgba(243, 242, 242, 0.9); overflow: hidden; height: 0;}
.sub-menu a {  display: inline-block; padding: 10px 20px; color: #1d1d1d; font-size: 14px;}
.sub-menu a:hover { display: inline-block; padding: 10px 20px; color: #d6d592; background-color: #494949;}
.sub01 .sub-menu { left: 0; transition: all 0.3s ease; padding-right: 20px;}
.sub01:hover .sub-menu { height: 41px; transition: all 0.3s ease;}
.sub02 .sub-menu { left: 0; transition: all 0.3s ease; margin-left: -20px;}
.sub02:hover .sub-menu { height: 41px; transition: all 0.3s ease;}




/* 下滑變形 */
header.down { box-shadow: 0 0 5px #b6b6b6;}
header.down .top-head {  height: 80px;}
header.down .quick-menu { top: 15px;}
header.down .quick-menu a:before { margin-bottom: -5px;}
header.down .quick-menu>div>a { padding: 10px 15px 21px 15px;  }
header.down .sub-menu { top: 66px;}
header.down .m-burger { top: 20px;}


/* 手機板選單 */
.m-burger { display: block; position: fixed; right: 30px; top: 30px;  width: 56px; height: 36px; z-index: 995; cursor: pointer; transition: all 0.3s ease; }
.m-burger.down { top: 20px; }
.m-burger:before { content: ''; display: block; height: 1px; background-color: #333333; transition: all 0.3s ease; }
.m-burger:after { content: ''; display: block; height: 1px; background-color: #333333; transition: all 0.3s ease; }
.m-burger span { display: block; width: 100%; height: 1px; background-color: #333333; margin: 13px 0; transition: all 0.3s ease; }
.m-burger.active span { width: 0; margin: 0; background-color: #000000; }
.m-burger.active:before { transform: rotate(45deg); width: 110%; margin-top: 20px; background-color: #000000; transition: all 0.3s ease; }
.m-burger.active:after { transform: rotate(-45deg); width: 110%; margin-top: -2px; background-color: #000000; transition: all 0.3s ease; }

.login-info { font-size: 16px; color: #575757; width: 450px; position: absolute; right: 70px; display: flex; top: 5px; text-align: right; vertical-align: bottom; display: none; }
.login-info a { color: #a53a3a; padding: 0 5px; font-weight: bold; }
.login-info span.name { color: #7a774e; }
.login-info a img { height: 16px; width: auto; padding-right: 5px; }
.login-info .member-info { flex: 1; padding-top: 18px; }
.login-info .member-info:before { content: ' '; width: 16px; height: 16px;  margin: 0px 5px 0px 0; display: inline-block; background-image: url(../image/icon-memb.png); background-position: center; background-size: cover; background-repeat: no-repeat; vertical-align: middle; }
.login-info .bonus-point { width: 180px; flex: initial; font-size: 32px; color: #72151d; }
.login-info .bonus-point:before { content: ' '; width: 16px; height: 16px; margin-right: 5px; display: inline-block; background-image: url(../image/icon-star.png); background-position: center; background-size: cover; background-repeat: no-repeat; }
.login-info .bonus-point:after { content: '/點'; font-size: 16px; color: #242424; font-weight: normal; }
.login-info .save-cups { width: 130px; flex: initial; font-size: 32px; color: #956034; }
.login-info .save-cups:before { content: ' '; width: 16px; height: 16px; margin-right: 5px; display: inline-block; background-image: url(../image/icon-caffee.png); background-position: center; background-size: cover; background-repeat: no-repeat; }
.login-info .save-cups:after { content: '/杯'; font-size: 16px; color: #242424; font-weight: normal; }

ul.top-tool { list-style: none; padding: 5px 0px; margin: 0; position: absolute; right: 0; top: 65px; border: 0px #CCCCCC solid; border-radius: 20px;}
ul.top-tool li { display: inline-block; }
ul.top-tool li a { display: block; color: #333; font-size: 14px; }
ul.top-tool li a:hover { color: #F00; opacity: 0.6; }
ul.top-tool li.cart { position: relative; }

ul.top-tool li.cart span.a-few { position: absolute; top: -5px; right: -10px; display: inline-block; text-align: center; background-color: #a53a3a;  color: #ffffff; font-size: 12px; width: 20px;  line-height: 20px; border-radius: 20px; z-index: 900; }
ul.top-tool li img { height: 24px; width: auto; }
ul.top-tool li .search-input { background: #ececec; border: 0; width: 120px;  margin: 0 3px 0 0; font-size: 16px; padding: 2px 5px 3px 15px; height: 26px; }
ul.top-tool li .search-btn { background: url(../image/icon-05.png) no-repeat; background-size: contain;  padding: 0px 15px; margin: 0; line-height: 24px; font-size: 14px; border: 0; border-radius: 0 2px 2px 0; height: 26px; cursor: pointer; }


/* 列表 */
.condition-list { margin-bottom: 15px; text-align: center; display: flex; }
.condition-list span { flex: 1; padding: 8px 0px; border-right: 1px #dddddd solid; cursor: pointer; font-size: 14px; transition: all 0.3s ease; }
.condition-list span:last-child { border-right: 0; }
.condition-list span:hover,
.condition-list span.active { background-color: #e9e9e9; }


/* 暫存購物車 */
.temp-cart-box { height: 100%;  position: relative;}

.temporary-cart { background-color: #f8f8f8; position: fixed; height: calc(100% - 90px); top: 90px; left: -300px; z-index: 995; padding: 10px 35px 20px 35px;  width: 300px; transition: all 0.5s ease; }

.temporary-cart.active { left: 0; transition: all 0.5s ease; }
.temporary-cart.down {  height: calc(100% - 80px); top: 80px; }
.temp-menu {  padding: 30px 0 10px 0; }
.temp-menu>div { display: block; float: left; width: 50%; color: #919191; font-size: 16px; text-align: center; padding: 6px 0 10px 0; border-bottom: 1px #cfcfcf solid; cursor: pointer;  transition: all 0.3s ease-in; }
.temp-menu>div:hover { color: #ffb428; border-bottom: 5px #ffb428 solid; transition: all 0.3s ease-in; padding-bottom: 6px; }
.temp-menu div.active { color: #333333; border-bottom: 5px #333333 solid; cursor: default; padding-bottom: 6px; }

.temporary-cart .temp-close { background-image: url(../image/close-btn.png); background-position: center; background-repeat: no-repeat; background-size: cover; height: 30px; width: 30px; cursor: pointer; float: right; transition: all 0.5s ease-in; filter: brightness(3); position: absolute; right: -20px; top: 5px; transition: all 0.3s ease; }
.temporary-cart .temp-close:hover { transform: rotate(90deg); filter: brightness(1);}
.temporary-cart .temp-btn {  padding: 10px 0 0 0; }
.temporary-cart .temp-btn .btn-send { display: block; width: 120px; padding: 7px 10px; text-align: center;  background-color: #333333; color: #ffffff; margin: 0 auto; border-radius: 3px; }
.temporary-cart .temp-btn .btn-send-point:hover { background-color: #962525; }
.temporary-cart .temp-btn .btn-send-point { display: block; width: 120px; padding: 7px 10px; text-align: center; background-color: #eb6b6b; color: #ffffff; margin: 0 auto; }
.temporary-cart .temp-btn .btn-send:hover { background-color: #a3967a; }
.temp-cart-info .temporary-cart .temp-close:hover { opacity: 0.6; transition: all 0.3s ease-in; }
.temporary-cart .cart-lis { padding: 10px; border-bottom: 4px #e7e7e7 solid; clear: both; background-color: #ffffff;  margin-bottom: 5px; border-radius: 20px; }
.temporary-cart .cart-lis .photo { max-width: 80px; width: 80%; background-position: center;  background-repeat: no-repeat; background-size: cover;  margin: 0 auto 10px auto; }
.temporary-cart .cart-lis .photo a { display: block; width: 100%; height: 0; padding-bottom: 100%; }
.temporary-cart .cart-lis .temp-cart-info { flex: 1; font-size: 18px; color: #ffffff; }
.temp-cart-info .quantity-num { max-width: 120px; margin: 0 auto; }
.temporary-cart .cart-lis .temp-cart-info .qtyInputBox { padding-top: 5px; }
.temporary-cart .cart-lis .temp-cart-info .qtyInputBox span { width: 24px; height: 24px; }
.temporary-cart .cart-lis .temp-cart-info .qtyInputBox input { height: 24px; }
.temporary-cart .cart-lis .temp-cart-info h3 { text-align: center; font-size: 14px; line-height: 1.2em; padding-bottom: 5px; color: #333333;}
.temporary-cart .cart-lis .temp-cart-info p { font-size: 14px; color: #c2c2c2; margin: 0; }
.temporary-cart .cart-lis .quantity { flex: none; text-align: center; color: #525252e3; font-size: 14px;}
.temporary-cart .cart-lis .btn-del { display: block; margin: 10px auto 5px auto; width: 120px;  height: 24px; cursor: pointer; border-radius: 5px; transition: all 0.3s ease-in; background-image: url(../image/icon-del.svg); background-repeat: no-repeat; background-position: center; background-size: contain;  }
.temporary-cart .cart-lis .btn-del:hover { background-color: #cfcfcf; transition: all 0.3s ease-in; }
.temporary-cart .shop-store { display: none; overflow-y: auto; height: calc(100% - 80px); }
.temporary-cart .shop-store .no-goods { margin: 10px 0; padding: 20px 10px; text-align: center; color: #98cc64; font-size: 16px; }

.language { position: absolute; top: 30px; right: 110px; cursor: pointer; z-index: 50; width: 30px; height: 30px; transition: all 0.3s ease; background-image: url(../image/icon-language.svg); background-position: center; background-repeat: no-repeat; background-size: contain; opacity: 0.6;}
.language:hover {  opacity: 1;}
.language select { background-color: #252525; color: #ffffff; border: 0; font-size: 16px; border-radius: 3px; padding: 3px 5px; }
.language a { display: inline-block; background: #000000;  color: #d6d6d6; margin: 0 0 0 3px; border-radius: 99em; font-size: 14px; text-align: center; width: 30px;  line-height: 30px; }
.language a:hover {  background: #c90000; }

header.down .language { top: 20px; }
.language-box .pop-body { background-color: transparent; width: 90%; border-radius: 8px; padding: 0; border: 0px #b6b6b6 solid; text-align: center;}
.language-box .pop-body a { display: inline-block; padding: 5px 10px; color: #ffffff; margin: 8px; border-radius: 4px; border: 1px #dbdbdb solid;}
.language-box .pop-body a.active { color: #b6b063; border: 1px #b6b063 solid;}
.language-box .pop-body a:hover { color: #faec2c ; border: 1px #faec2c solid;}
.language-title { text-align: center; padding: 20px 0; margin: 20px 10px; font-size: 20px; border-bottom: 1px #747474 solid; color: #ffffff;}
.language-title span { display: block; padding-top: 0px; font-size: 14px;}

.member-menu ul li a br { display: none; }
.mobile-top { height: 0; }
.index-area { position: relative;  z-index: 1;  max-width: 1040px;  margin: 0 auto; }
.index-area-m { display: none; position: relative; z-index: 1; }
.index-area .i-area-cont {  max-width: 100%; margin: 0 auto 50px auto; }
.index-area .mobile { display: none; }
.i-area-cont { position: relative; }

.text-box01 { position: absolute;  width: 100%; height: 100%; top: 0; left: 0; display: flex; justify-content: center; align-items: center; }

.index-area-m .i-area-cont img,
.index-area .i-area-cont img { width: 100%; height: auto; }
.index-area .text-box01 img { width: 80%; max-width: 917px; height: auto; }
.index-area .text-box02 { position: absolute; top: 13.7%; right: 5.7%; width: 32%; }
.index-area .text-box02 img { max-width: 596px; height: auto; }
.index-area.mobile { display: none; }

/*  banner  */
.banner { width: 100%; max-width: 1200px; overflow: hidden; margin: 0 auto; position: relative; }
.banner-box { width: 100%; overflow: hidden; }
.banner-box-m { display: none; }
.subbanner img { width: 100% !important; height: auto; padding-bottom: 20px; }
.subbanner a.mop { display: none; }


/* top-banner */
.top-banner { max-width: 1040px; width: 100%;  margin:0 auto 50px auto; z-index: 10; position: relative; }
.top-banner img { width: 100%; height: auto; }
.top-banner .pc {  display: block; }
.top-banner .mobile { display: none; }


/* member-menu */
.member-menu { position: fixed; z-index: 980; right: -91px;  top: calc(50% - 175px); transition: ease 0.3s all; }
.member-menu:hover { right: 0px; transition: ease 0.3s all; }
.member-menu .open { position: absolute; top: 28px;  left: -60px; border-radius: 0 0 10px 10px; line-height: 24px; cursor: pointer; background-color: #dd1a1a; padding: 8px 20px; color: #ffffff; transform: rotate(90deg); }
.member-menu .open:before { content: 'OPEN'; }
.member-menu ul {  position: relative; padding: 0; margin: 0; list-style: none; border-radius: 10px; overflow: hidden; }
.member-menu ul li { background-color: #2b2b2b; text-shadow: 1px 1px 0 #000000; border-bottom: 1px #000000 solid; border-top: 1px #8f8f8f solid; transition: all 0.3s ease; }
.member-menu ul li.login { border-bottom: 0; padding-bottom: 0; }
.member-menu ul li a {  display: block;  font-size: 16px; color: #ebebeb; min-width: 85px; line-height: 1.2em; text-align: center; padding: 10px; }
.member-menu ul li:hover { border-top: 1px #a3aa7e solid; background-color: #948f6e; border-bottom: 1px #615f55 solid;  text-shadow: 1px 1px 0 #626345;  transition: all 0.3s ease; color: #ffffff; }
.member-menu ul li.active,
.member-menu ul li.active:hover { background-color: #848a32; border-bottom: 1px #5b5e39 solid; text-shadow: 1px 1px 0 #626345; cursor: default; color: #ffffff; transition: all 0.3s ease; }
.member-menu ul li a span { display: block; width: 24px; height: 24px; margin: 0 auto 5px auto; background-position: center;  background-repeat: no-repeat; background-size: cover; }

.member-menu ul li a span.memb-tool01 { background-image: url(../image/member-menu06.png);}
.member-menu ul li a span.memb-tool02 { background-image: url(../image/member-menu01.png);}
.member-menu ul li a span.memb-tool03 { background-image: url(../image/icon-caffee02.png);}
.member-menu ul li a span.memb-tool04 { background-image: url(../image/member-menu03.png);}
.member-menu ul li a span.memb-tool05 { background-image: url(../image/member-menu05.png);}
.member-menu ul li a span.memb-tool06 { background-image: url(../image/member-menu06.png);}
.member-menu ul li a span.memb-tool07 { background-image: url(../image/member-menu07.png);}

/* member-nav */
.member-nav {  max-width: 680px; margin: 0 auto; text-align: center; padding: 0 0 40px 0;  display: flex; }
.member-nav a { flex: 1; padding: 5px 0; color: #555555; text-align: center; font-size: 16px; border-bottom: 1px #b6bb8e solid; border-radius: 5px 5px 0 0; }
.member-nav a:hover { background-color: #9a9e79; color: #ffffff; }
.member-nav a.active { color: #ffffff; background-color: #2b2b2b; border-bottom: 1px #2b2b2b solid; }


/* member   */
/* .member-cont {  max-width: 600px; margin: 0 auto; } */
.member-cont { margin: 0 auto; }
.member-cont .table-title { border-left: 5px #333333 solid; padding: 0px 15px; margin: 0 0 20px 0; color: #000000; font-weight: 100; font-size: 24px; background-position: left top; background-repeat: no-repeat; background-size: auto 70%; }
.member-cont .cont-box { padding: 10px 0; }
.member-form .note { font-size: 16px; color: #F30; padding: 0 0 10px 0; margin-left: 150px; }
.member-form .form-lis { font-size: 16px; line-height: 1.2em; padding: 10px; }
.member-form .form-lis .title { display: block; font-size: 16px; color: #adadad; width: 110px; padding: 10px 0; text-align: right; float: left; }
.client-share { padding-bottom: 20px; max-width: 680px; margin: 0 auto;}
.client-share img { max-width: 100%; height: auto;}
.client-share .qr-code { margin: 20px auto; max-width: 160px; padding: 10px; background-color: #ffffff;}
.member-form .form-lis .qr-code { text-align: center; border-radius: 10px; border: 1px #e4e4e4 solid; padding: 20px 10px;}
.member-form .form-lis .qr-code img {max-width: 150px; height: auto;}
.member-form .form-lis .data { background: #ffffff; border: 1px #d3d3d3 solid; width: calc(100% - 120px); padding: 10px; font-size: 16px; color: #333;  line-height: 1.2em; }

.member-form .form-lis .text-data { background: #ffffff; border-bottom: 1px #d3d3d3 solid;  width: calc(100% - 120px); margin-left: 120px; padding: 10px; font-size: 16px; color: #333; }
.member-form .form-lis .text-data02 {  background: #ffffff; width: calc(100% - 120px); margin-left: 120px;  font-size: 16px; color: #333; }
.member-form .form-lis .birthday { display: flex; }
.member-form .form-lis .birthday input { background: #ffffff;  border: 1px #d3d3d3 solid; padding: 10px; font-size: 16px; color: #333; margin-left: 10px; float: left; width: calc(33.3% - 10px); }
.member-form .form-lis .birthday .year { width: 1..33%; flex: none; margin-left: 0; }
.member-form .form-lis input.data { background: #ffffff; border: 0; border-bottom: 1px #d3d3d3 solid; font-size: 16px; line-height: 1.2em; }
.member-form .form-lis textarea.data { background: #ffffff; border: 1px #d3d3d3 solid; font-size: 16px; }

.save-icon { width: 24px !important; height: auto; }
.member-form .form-lis .referral-code {
    border: 0;
    border-bottom: 1px #d3d3d3 solid;
    color: #850000;
    font-weight: bold;
    /*width: calc(100% - 230px)*/;
}
.form-lis  input.check-box { margin: -5px 5px 0 0;}

/* member-announcement*/
.member-announcement { padding: 10xp 0; }
.member-announcement .ann-list { display: flex; margin-bottom: 10px; }
.member-announcement .ann-list .species { width: 60px; flex: none; margin-right: 10px; }
.member-announcement .ann-list .species span { display: block; width: 60px; height: 60px; line-height: 60px; border-radius: 99em; color: #ffffff; background-color: #47bbff; text-align: center; font-size: 20px; }
.member-announcement .ann-list .species span.type01 { background-color: #9ad18d; }
.member-announcement .ann-list .species span.type02 {  background-color: #ebc660; }
.member-announcement .ann-list .species span.type03 {  background-color: #7cb9e2; }
.member-announcement .ann-list .ann-info {  flex: 1; border-radius: 10px; background-color: #f3f3f3; padding: 8px 15px; font-size: 14px; line-height: 1.6em; color: #4b4b4b; }
.member-announcement .ann-list .ann-info .time { font-size: 16px; color: #47bbff; display: block; margin-bottom: 5px; }
.member-announcement .order-lis .data-info { background: url(../image/cart-bg.jpg); font-size: 16px; text-align: center; color: #C63; padding: 10px; border: 1px #CCCCCC dashed; margin-bottom: 10px; }
.member-announcement .ann-list .ann-info p {  margin-top: 5px; }

.order-finish { margin: 0 auto; }
.order-lis ul { list-style: none; margin: 0 0 10px 0; padding: 0; }
.order-lis ul li { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; background: #FFF; border-bottom: 1px #e7e7e7 solid; font-size: 16px; }

.order-lis ul li>div { -webkit-flex: 1; flex: 1; text-align: center; font-size: 14px; padding: 10px 5px; }
.order-lis ul li>div:first-child { border-left: 0; }
.order-lis ul li.th-lis { text-align: center; background-color: #eeeeee; color: #333333; padding: 0px; font-size: 16px; border: 0; }
.order-lis ul li.th-lis .finish { color: #333333;  font-size: 14px; }
.order-lis ul li .number { text-align: left; }
.order-lis ul li .number a { color: #86883C; }
.order-lis ul li .number a:hover { color: #F00; }
.order-lis ul li .number a img { height: 16px; width: auto; padding-right: 5px; opacity: 0.5; }
.order-lis ul li .finish { color: #CCC; }
.order-lis ul li .unpaid { color: #72151d; }
.order-lis ul li .preparing { color: #693; }
.order-lis ul li .shipped { color: #999; }
.order-lis ul li .shipped a { color: #F93; }

.point-portal { text-align: center; padding: 20px 10 10px 10; color: #72151d; font-size: 24px; border: 5px #000000 solid; border-radius: 5px; }
.point-available { text-align: center; padding: 20px 10; color: #a0a0a0; font-size: 24px; border: 5px #727071 solid; border-radius: 5px; }
.point-explanation { color: #727071; font-size: 18px; line-height: 1.6em; padding: 15px; border-radius: 5px;  margin-bottom: 20px; border: 1px #e6e6e6 solid;  text-align: center; }

.point-box { padding: 10px 0 20px 0; }

.search-bar { padding-bottom: 10px; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-bottom: 10px; border-bottom: 1px #CCCCCC solid; }

.search-bar input.text { padding: 3px 7px; }
.search-bar .kyeword { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; width: 50%; padding-right: 5px; -webkit-flex: none; flex: none; clear: both; }
.search-bar .kyeword input.text { -webkit-flex: 1; flex: 1; }
.search-bar .kyeword input.search-btn { width: 100px;  border: 0;  background: #333; color: #ffffff; font-size: 14px; padding: 3px 7px; cursor: pointer; }
.search-bar .kyeword input.search-btn:hover {  background: #930; }
.search-bar .timearea {  -webkit-flex: 1; flex: 1; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; padding-left: 5px; }
.search-bar .timearea .time-box { -webkit-flex: 1; flex: 1; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; }
.search-bar .timearea .time-box span { display: block; width: 10%; text-align: center; -webkit-flex: none; flex: none; }
.search-bar .timearea .time-box input { font-size: 14px; font-family: Microsoft JhengHei;  display: block; flex: 1; width: 80%; }
.search-bar .timearea input.search-btn { width: 100px;  border: 0; background: #333;  color: #ffffff; font-size: 14px; padding: 3px 7px;  cursor: pointer; flex: none;  display: block; }
.search-bar .timearea input.search-btn:hover { background: #930; }

/*  content  內文  */
.font-title { font-size: 30px; margin: 0 0 10px 0; padding: 0; color: #333333; font-weight: normal; }
.font-title-02 { font-size: 16px; margin: 0 0 10px 0; color: #222222; font-weight: normal; padding-left: 120px; }
.font-content { font-size: 14px; line-height: 1.6em; padding: 20px 0; color: #333333; }
.img-left {  padding-right: 20px; padding-bottom: 10px; }
.img-right { padding-left: 20px; padding-bottom: 10px; }
.sign-box { max-width: 600px; margin: 0 auto; }


/*  about  內文  */
.about-pro { padding: 0 20px;}
.about-pro img { max-height: 150px; height: auto; width: auto; }

.pro-title {  color: #808239; font-size: 16px;  margin: 0; padding: 20px 0 10px 0; }

.bonus-title { background-color: #dd6142; color: #ffffff; font-size: 18px; letter-spacing: 3px; padding: 6px 20px; width: 240px; margin: -20px auto 20px auto; text-align: center; border-radius: 0 0 5px 5px; }

/*  left-menu  */
.left-menu-title { color: #333333; font-size: 20px; padding: 10px; text-align: center; border-bottom: 3px #5f5f5f solid; }
.left-menu { margin: 0 0 0 0; padding: 0 0 15px 0; list-style: none;}
.left-menu li { list-style: none; }
.left-menu li:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }

/* Hides from IE-mac \*/
* html .left-menu li { height: 1%; }
.left-menu>li { transition: all 0.3s ease 0s; margin: 0px 0; border-bottom: 1px #e0e0e0 solid; }
.left-menu>li>a { display: block; padding: 10px 0 10px 0; color: #000000;  margin: 0 0;  font-size: 16px; padding-left: 20px; width: calc(100% - 30px);  float: left; }

.left-menu li a.active { background-repeat: no-repeat; background-position: left; background-size: contain; background-image: url(../image/left-menu-active.svg); }

.left-menu>li>span { display: block; padding: 8px; color: #000000; margin: 0 10%; font-size: 16px; }
.left-menu>li:hover>a { color: #a8a8a8; transition: all 0.3s ease; }
.left-menu>li.active:hover { background: none; color: #000000;}

.left-menu>li.active>span,
.left-menu>li.active:hover>span { background: none; color: #000000; }
.left-menu>li:last-child a { border-bottom: 0; }
.m-left-menu { display: none; }
.left-menu>li>.menu-line { max-width: 100px;  margin: 0px auto; border-bottom: 3px #cccccc solid; }
.left-menu .sub { list-style: none; padding: 0px 0 0px 0; margin-bottom: 5px; }
.left-menu .sub ul { list-style: none; padding: 0px 0 15px 0; border-bottom: 1px #bebebe dotted; }


.left-menu ul.sub ul li a { display: block; padding: 3px 0; color: #797979; font-size: 12px; }
.left-menu ul.sub ul li a:hover { color: #ad3a3a; font-weight: bold; }
.left-menu .left-sub-menu {  display: none; height: auto; margin: 0; padding: 0 0 0 20px; border-top: 1px #e6e6e6 solid }
.left-menu .left-sub-menu>li { padding: 0px 0; margin: 0 0; border-bottom: 1px #f0f0f0 solid; }
.left-menu .left-sub-menu li:last-child { border-bottom: 0px #f0f0f0 solid; }
.left-menu .left-sub-menu>li>a { font-size: 14px; color: #999; display: block; line-height: 36px; padding-left: 10px; }
.left-menu>li>.left-sub-menu>li>a { float: left; width: calc(100% - 30px); }
.left-menu .left-sub-menu>li>a:hover { color: #333333; }
.left-menu .left-sub-menu>li.active a { color: #353535; display: block; padding: 0; }
.left-menu .left-sub-menu>li>a:hover { color: #333333; }
.left-menu li.bonus-shop { background-color: #df2525; }
.left-menu li.bonus-shop>a,
.left-menu li.bonus-shop>a.menu-plus { color: #ffffff !important; }
.left-menu li.bonus-shop>ul { background-color: #ff6767; margin-bottom: 0; }
.left-menu>li.bonus-shop>ul>li>a { color: #ffffff; }
.left-menu>li.bonus-shop>ul>li>a:hover { color: #ffea32; }

a.menu-plus { font-size: 18px !important; display: block !important; color: #333333 !important; padding: 10px 0; text-align: center; width: 30px !important; float: none !important; margin-left: calc(100% - 30px) !important;}

.left-menu>li>a.menu-plus { padding: 9px 0; left: 30px;  border-left: 1px #e6e6e6 solid }
.left-menu .left-sub-menu>li>a.menu-plus { padding: 0; line-height: 36px; }


/* 點數選單 */

.left-menu>.bonus-shop .left-sub-menu { border-top: 1px #ff8888 solid; }
.left-menu>.bonus-shop .left-sub-menu li {  border-bottom: 1px #ff8888 solid; }
.left-menu .bonus-shop .left-sub-menu>li>a {  color: #ffffff; }

.left-menu li.bonus-shop>a,
.left-menu li.bonus-shop>a.menu-plus { border-left: 1px #ff8888 solid; }

.left-menu .bonus-shop .left-sub-menu li a.menu-plus { color: #ffffff !important; border-left: 1px #ff8888 solid;}
.left-menu .bonus-shop .left-sub-menu li a:hover { color: #fffb00; }
.left-menu .bonus-shop .left-sub-menu li:last-child { border-bottom: 0px #f0f0f0 solid; }

/*  page  */
.page-title { background: #0f0f0f; }
.page-title h3 { font-weight: normal; font-size: 18px; color: #ffffff; margin: 0; padding: 25px 40px 25px 50px; display: inline-block;}
.page-title h3 span { display: block; font-size: 14px; color: #f2c7d0; border-top: 1px #f2c7d0 solid; text-align: center; padding: 5px 0 0 0; margin-top: 5px;}

h2.page-title01 { color: #333333; font-size: 36px; margin: 19px auto 30px auto; padding: 0 0 0 10px; text-align: center; position: relative; max-width: 990px; font-weight: 100; min-height: 1em;}
h2.page-title01:before {  content: ''; border-bottom: 1px #dfdfdf solid; position: absolute;  top: 30px; left: 0;  width: calc(50% - 100px);}
h2.page-title01:after { content: ''; border-bottom: 1px #dfdfdf solid; position: absolute; top: 30px; right: 0;  width: calc(50% - 100px);}

h2.page-title02 { color: #a19678; font-size: 36px; margin: 19px auto 30px auto; padding: 0 0 0 10px; text-align: center; position: relative; font-weight: 100; min-height: 1em; font-style: italic; }
h2.page-title02:before {  content: ''; border-bottom: 1px #f3f3f3 solid; position: absolute;  top: 30px; left: 0;  width: calc(50% - 100px);}
h2.page-title02:after { content: ''; border-bottom: 1px #f3f3f3 solid; position: absolute; top: 30px; right: 0;  width: calc(50% - 100px);}

h2.page-title03 { color: #313131; font-size: 36px; margin: 19px auto 30px auto; padding: 0 0 0 10px; text-align: center; position: relative; font-weight: 100; min-height: 1em; }
h2.page-title03:before {  content: ''; border-bottom: 1px #f3f3f3 solid; position: absolute;  top: 30px; left: 0;  width: 100%; z-index: 1;}
h2.page-title03 span { background-color: #ffffff; padding: 0 30px; display: inline-block; z-index: 5; position: relative;}

h2.page-title04 { color: #313131; font-size: 36px; margin: 19px auto 30px auto; padding: 0 0 0 10px; text-align: center; position: relative; font-weight: 100; min-height: 1em; }
h2.page-title04:before {  content: ''; border-bottom: 1px #f3f3f3 solid; position: absolute;  top: 30px; left: 0;  width: 100%; z-index: 1;}
h2.page-title04 span { background-color: #ffffff; padding: 0 15px; display: inline-block; position: relative; z-index: 5;}

.page-box .content-box { min-height: 300px; padding: 0px 20px 30px 20px; position: relative; z-index: 10;}
.page-box .page-cornor { position: relative; z-index: 1;}
.page-box .page-cornor .left { position: absolute; bottom: 0px; left: 0px;}
.page-box .page-cornor .right {  position: absolute; bottom: 0px; right: 0px; }

.sub-title {  background: #ffd3d7; font-size: 18px; font-weight: normal; color: #972c2c; margin: 0; padding: 10px 20px; line-height: 32px; border-radius: 5px 5px 0 0;}

.sub-title img { padding-right: 5px;}

/* faq-item */
.faq-item { margin-bottom: 15px; }
.faq-item .Q-title {  background: #a59187; font-size: 16px; color: #ffffff; padding: 15px 20px; }
.faq-item p { background: #f7f3f1; padding: 15px 20px; font-size: 14px; line-height: 1.6em; margin: 5px 0 0 0; }

/* 首頁模組 */
h3.index-h3 { border-left: 4px #669933 solid; color: #669933; font-size: 16px; font-weight: normal; padding-left: 10px;  line-height: 16px; }

.inde-video iframe { display: block; width: 100%; height: 200px; }
.inde-pro a { display: block; width: 100%; height: 200px; background: center; background-size: cover; }
.inde-pro a:hover { opacity: 0.8; }
.inde-fbfans iframe { display: block; width: 100%; height: 200px; }

.inde-event-box { display: flex; flex-wrap: wrap; }
.inde-event-box a { display: block; height: 200px; -webkit-flex: 1; flex: 1; background: center; background-size: cover; }
.inde-event-box a:hover { opacity: 0.8;}
.inde-event-box:first-child a {  margin-right: 3px;}
.inde-event-box:last-child a { margin-left: 3px;}

/* activity */
.activity ul { list-style: none; margin: 0; padding: 0 0 20px 0; }
.activity ul li { float: left; width: 25%; padding: 5px; }
.activity ul li a { display: block; width: 100%; height: 200px; background: center;  background-size: cover;}
.activity ul li:hover a { opacity: 0.7;}
.activity ul li h3 { line-height: 1.5em; height: 5em; overflow: hidden; font-size: 16px; font-weight: normal; }


/* history */
.history { position: relative; }
.history .time-line { position: absolute; left: 50px;  top: 40px; bottom: 0; width: 2px; background: #CCC; z-index: -1; }
.history h3.his-title { margin: 0 0 20px 0; padding: 0; text-align: center; color: #666; font-size: 30px; font-weight: 500; }
.history .lis { margin-bottom: 10px; }
.history .lis .history-time { font-family: Times; background: #333333; color: #ffffff; font-size: 28px; width: 100px; height: 100px; border-radius: 99em; overflow: hidden; text-align: center; padding-top: 22px;  float: left;}

.history .lis .history-time span { display: block; font-size: 22px;}
.history .lis p {  margin: 50px 0 0 20px; padding: 10px 0 0 0; border-top: 1px dashed #CCC; float: left; width: calc(100% - 120px);}

/* message */
.message-box { padding: 50px 0; }
.message-box .table-box { background: url(../image/cart-bg.jpg); padding: 10px 20px;  max-width: 500px; margin: 0 auto; border: 5px #E2E2E2 solid;}
.message-box .table-box h3 { font-weight: normal; margin: 0 0 10px 0; padding-bottom: 10px;  font-size: 16px; border-bottom: 1px #CCCCCC dotted; }
.message-box .table-box h3 img { height: 18px; opacity: 0.5; padding: 0 5px 2px 0; }
.message-box .table-box .content { font-size: 14px; line-height: 1.6em; min-height: 100px; }
.message-box .table-box .content span { color: #C30; }
.message-box .table-box .forget { padding-top: 10px; font-size: 14px; line-height: 1.6em; min-height: 100px; color: #C30; }

/* cart */
.cart-box { max-width: 680px; margin: 0 auto; }
.cart-menu { margin-bottom: 20px; text-align: center; border-bottom: 1px #d6d6d6 solid; }
.cart-menu a { display: inline-block; padding: 10px 25px; font-size: 16px; border-radius: 5px 5px 0 0; color: #333333; }

.cart-menu a:hover { background-color: #ffdbdb; }
.cart-menu a.active {  cursor: default; background-color: #ececec; }

.cart-lis { margin-bottom: 20px; }
.cart-lis h3.title { font-weight: normal; margin: 0; color: #333333; padding: 10px 10px 10px 10px; font-size: 16px; border-bottom: 1px #d3d3d3 solid; }
.cart-lis h3.title img { height: 24px; width: auto; padding-right: 5px; margin-top: -3px; filter: brightness(2); }
.cart-table { font-size: 16px; }
.cart-table ul {  list-style: none; margin: 0;  padding: 0; }
.cart-table ul li { display: -webkit-box; display: -webkit-flex;  display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; border-bottom: 1px #CCC dotted; padding: 5px 0; }
.cart-table ul li .photo,
    /*.cart-table ul li .name,*/
.cart-table ul li .quantity,
.cart-table ul li .price,
.cart-table ul li .subtotal { flex: 1; display: flex; flex-wrap: wrap; align-items: center; justify-content: center;}

.cart-table ul li .name { flex: 1; display: flex; flex-wrap: wrap; align-items: center;}

.cart-table ul li .del { width: 50px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center;}
.cart-table ul li .del a { background: #F00; color: #fff; display: block; padding: 3px 5px; border-radius: 4px;}
.cart-table ul li .del a:hover { background: #900;}
.cart-table ul li .quantity span,
.cart-table ul li .price span,
.cart-table ul li .subtotal span { display: none;}
.cart-table ul li.th-lis .photo {height: auto;}
.cart-table ul li.th-lis {color: #666666;font-size: 16px;border-bottom: 1px #c2c2c2 solid;}
.cart-table ul li.th-lis>div {padding: 7px 5px;border-left: 1px #ED8B8B dotted;}
.cart-table ul li.th-lis>div:first-child { border-left: 0; }
.cart-table ul li .photo {  height: 150px; text-align: center; padding: 10px;}
.cart-table ul li .photo img { max-width: 100%; max-height: 100%; width: auto; height: auto; }
.cart-table ul li .unit {  display: block; width: 100%; padding: 5px 0 0 0; text-align: center; }
.cart-table ul li .quantity .qtyInputBox { width: 100%; }
.cart-table ul li.portal { border-bottom: 0; background: #FAFAF8; padding: 20px 0; }
.cart-table ul li .space { -webkit-flex: 3; flex: 3; text-align: right; }
.cart-table ul li .total { -webkit-flex: 1; flex: 1; color: #F60; text-align: center; }

.point-now { text-align: center; color: #d18800; font-size: 24px; padding: 20px 0; }
.freight { color: #84823E; }
.point-deduction { color: #F00; padding-left: 20px; }

.cart-table ul li .delivery { -webkit-flex: 1; flex: 1;  text-align: right; }
.delivery-info {  font-size: 16px; color: #333333; line-height: 1.6em; margin-bottom: 5px; }
.delivery-info h3 { margin: 0;  padding: 10px; font-size: 16px; font-weight: normal; color: #333333; }
.delivery-info h3 img { padding-right: 5px; height: 24px; width: auto;  filter: brightness(2); margin-top: -3px; }
.delivery-member {  padding: 15px; background-color: #f5f5f5; border-radius: 8px; }
.delivery-member-info { display: flex; flex-wrap: wrap; padding-top: 5px; margin-bottom: 10px; }

.delivery-member-info span { display: block; padding-right: 5px; width: 85px; -webkit-flex: none; flex: none; font-size: 14px; line-height: 30px; color: #868686; }
.delivery-member-info > div { font-size: 14px;}
.delivery-member-info input { display: inline-block; border: 0; background: #ffffff; color: #333; -webkit-flex: 1; flex: 1; padding: 5px; font-size: 14px;  vertical-align: middle; }
.delivery-member-info input[type="checkbox"] { margin: -3px 10px 0 0; }
.delivery-member-info input.address-detail { margin: 5px 0 0 85px; width: calc(100% - 85px); flex: none; }
.delivery-member-info select { font-size: 14px; display: block; border: 0;  background: #ffffff; border: 0;  color: #333; -webkit-flex: 1; flex: 1;  padding: 5px;}
.delivery-member-info select.zone { width: 100px; flex: none; margin-right: 5px; }
.delivery-member-info textarea { font-size: 16px; display: block; border: 0;  background: #ffffff; border: 0; color: #333; min-height: 8.8em; -webkit-flex: 1;
    flex: 1; padding: 5px; }
.delivery-member-info .data { -webkit-flex: 1; flex: 1; line-height: 30px; color: #1177bb; }
.delivery-member-info input.checkbox { display: inline-block; }

.delivery-member-info .list-note { width: 100%; flex: none; margin: 5px 0; padding-left: 85px; font-size: 14px; color: #3f3f3f; line-height: 1.4em; }

.delivery-info.complate .delivery-member-info { margin: 0; padding: 0; }
.delivery-info.complate .delivery-member-info span,
.delivery-info.complate .delivery-member-info .data { line-height: 24px;}

.delivery-member-info.data-list { margin: 0; }
.delivery-member-info.data-list span { line-height: 24px;}
.delivery-member-info.data-list .data { line-height: 24px;}


.order-step { display: flex; max-width: 600px; margin: 0 auto 20px auto;}
.order-step > div { flex: 2; position: relative; text-align: center;}
.order-step > div span { background-color: #bdbdbd; font-size: 12px; color: #fff; display: inline-block; width: 30px; height: 30px; line-height: 30px; text-align: center; border-radius: 99em; position: relative; z-index: 10; }
.order-step > div:before,
.order-step > div:after { content: ''; background-color: #bdbdbd; height: 2px; width: 50%; position: absolute; top: calc(50% - 1px); z-index: 1; }
.order-step > div:before { left: 0;}
.order-step > div:after { right: 0;}
.order-step > div:first-child:before { display: none;}
.order-step > div:last-child:after { display: none;}

.order-step > div:first-child { text-align: left; flex: 1;}
.order-step > div:first-child:after { width: 100%;}
.order-step > div:last-child { text-align: right; flex: 1;}
.order-step > div:last-child:before { width: 100%;}

.order-step > div.active span { background-color: #303030;}
.order-step > div.active:before,
.order-step > div.active:after { background-color: #303030; }

.delivery-member.address,
.delivery-member.convenience,
.delivery-member.store,
.delivery-member.invoice-carrier,
.delivery-member.invoice-donate,
.delivery-member.invoice-paper  { display: none;}

.payment-lis .delivery-member.options { flex-wrap: wrap; justify-content: left;}
.payment-lis .delivery-member.options .list { width: calc(20% - 8px); flex: none; }

.btn { padding: 10px 0; text-align: center; }
.btn a { background: #333333; font-size: 16px; color: #ffffff; display: inline-block; padding: 5px 15px; border-radius: 3px; }
.btn a:hover { background: #a89450; }

.remittance-info { padding: 10px; margin-top: 20px; background: #FEDEDE; color: #930; border: 1px #F3A5A5 dashed; line-height: 1.6em; }
.status-info {  padding: 10px; margin-top: 10px; color: #b15927; border: 1px #A99C93 dashed; line-height: 1.6em; text-align: center; font-size: 16px; }

/* product */
/* .product-lis { margin: 0 -10px; padding: 0 0px 20px 0px; list-style: none; display: flex; flex-wrap: wrap;} */
/* .product-lis li { background: #ffffff; flex: none; width: calc(25% - 30px); margin: 15px; transition: all 0.3s ease 0s;} */
/* .product-lis li .photo { background-position: center; background-size: cover; background-repeat: no-repeat; transition: all 0.3s ease; border-radius: 8px; overflow: hidden;} */
/* .product-lis li .photo a { display: block; width: 100%; height: 0;  padding-bottom: 100%;} */
/* .product-lis li:hover .photo { filter: brightness(1.2); transition: all 0.3s ease;} */
/* .product-lis li .photo img { max-height: 100%; max-width: 100%; width: auto; height: auto;} */
/* .product-lis li h3 { margin: 10px 0 5px 0; padding: 0;} */
/* .product-lis li h3 a { color: #1a1a1a; font-size: 16px; display: block; height: 2.5em; line-height: 1.2em; margin-bottom: 10px; overflow: hidden; } */
/* .product-lis li h3 a:hover { color: #C60;} */
/* .product-lis li .brief { font-size: 14px; color: #8d8b8b; margin-bottom: 5px; line-height: 1.6em; height: 4.8em; overflow: hidden; display: none; } */
/* .product-lis li .quantity { text-align: center; font-size: 14px; padding-bottom: 10px; color: #666;} */
/* .product-lis li .quantity-num {  margin: 0 0px 10px 0px;} */
/* .product-lis li .price { font-size: 24px; color: #c71945; text-align: right;} */
/* .product-lis li .s-price { font-size: 24px; color: #c71945; text-align: right;} */
/* .product-lis li .s-price span { font-size: 14px; padding-right: 5px; color: #a5a5a5;} */

.product-lis { margin: 0 -10px; padding: 0 0px 20px 0px; list-style: none; display: flex; flex-wrap: wrap;}
.product-lis li { background: #ffffff; flex: none; width: calc(25% - 30px); margin: 15px; position: relative; overflow: hidden; }
.product-lis li .photo { background-position: center; background-size: cover; background-repeat: no-repeat; transition: all 0.3s ease; border-radius: 8px; overflow: hidden; background-color: #f5f4f4;}
.product-lis li .photo a { display: block; width: 100%; height: 0;  padding-bottom: 100%;}
.product-lis li:hover .photo { filter: brightness(1.2); transition: all 0.3s ease;}
.product-lis li .photo img { max-height: 100%; max-width: 100%; width: auto; height: auto;}
.product-lis li h3 { margin: 10px 0 5px 0; padding: 0;}
.product-lis li h3 a { color: #1a1a1a; font-size: 16px; display: block; height: 2.8em; line-height: 1.4em; margin-bottom: 10px; overflow: hidden; }
.product-lis li h3 a:hover { color: #C60;}
.product-lis li .brief { font-size: 12px; color: #8d8b8b; margin-bottom: 5px; line-height: 1.6em; height: 4.8em; overflow: hidden;}
.product-lis li .quantity { text-align: center; font-size: 14px; padding-bottom: 10px; color: #666;}
.product-lis li .quantity-num {  margin: 0 0px 10px 0px;}
.product-lis li .price-box { display: flex; flex-wrap: wrap;}
.product-lis li .price-box .Original { flex: 1; text-decoration: line-through; padding-bottom: 2px; font-size: 12px; text-align: left; color: #838282; display: flex; align-items: flex-end;}
.product-lis li .price-box .final { flex: 1; font-size: 18px; color: #c71945; text-align: right; }
.product-lis li .price-box .final span { font-size: 12px; padding-right: 5px; color: #a5a5a5;}
.product-lis li .price { font-size: 18px; color: #c71945; text-align: right;}
.product-lis li .s-price { font-size: 18px; color: #c71945; text-align: right;}
.product-lis li .s-price span { font-size: 14px; padding-right: 5px; color: #a5a5a5;}

.add-to-order { color: #ffffff; text-align: center;}
.add-to-order a { background: #333333; display: block; font-size: 16px; line-height: 1.6em; color: #ffffff; margin: 0 0px 10px 0px; padding: 7px 5px; width: 100%; border-radius: 4px; }
.add-to-order a:before { content: ''; height: 20px; width: 20px; vertical-align: middle; display: inline-block; background-image: url(../image/icon-cart.svg); background-position: center; background-repeat: no-repeat; background-size: contain; margin-bottom: 5px; }
.add-to-order a:hover { background: #7e7e7e; }
.none-search { padding: 20px; border: 1px #FFCCCC dashed; text-align: center; font-size: 16px; line-height: 1.6em; color: #666; margin-bottom: 20px; }

/* product detaile */
.pro-detail-box { padding-left: 30px; }
.product-cont { position: relative; z-index: 10; padding: 15px 0px 15px 0px;}
.detail-title {  font-size: 20px; font-weight: 300; color: #333333; margin: 0; padding: 0 0 10px 0;  line-height: 1.4em; }
.detail-title:before { content: ''; display: inline-block; width: 30px; height: 30px;  margin-right: 10px; margin-bottom: 5px; vertical-align: middle;
    background-image: url(../image/icon-detail.svg); background-position: center;  background-repeat: no-repeat; background-size: contain;}
.detail-title img { padding-right: 5px; }
.product-box { display: -webkit-box;  display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap;}
.product-info { -webkit-flex: 1; flex: 1; font-size: 14px; line-height: 1.8em; color: #666; position: relative; padding: 0 0 55px 0; height: auto; min-height: 345px;}

.product-info .briefly.vm-info { min-height: 240px; }
.product-photo { -webkit-flex: 1; flex: 1; text-align: center;  padding-right: 10px; position: relative; }
.product-photo img {  max-height: 400px; max-width: 100%; width: auto;  height: auto; }
.product-photo a.where-mechian { position: absolute; bottom: 0;left: 0; height: auto; font-size: 18px; background-color: rgba(0,0,0, 0.8); color: #ffffff; text-align: center; padding: 5px 10px;}
.product-photo a.where-mechian:hover {  background-color: rgba(212, 69, 69, 0.8); }

.product-info .cart { position: absolute; bottom: 0; width: 100%; color: #ffffff; padding: 7px 0;  text-align: center;}
.product-info .cart .btn-boxs { display: flex; }
.product-info .cart .btn-boxs a.btn-cart-l { background: #f1f1f1; display: block; flex: 1; border-radius: 5px; line-height: 35px; color: #333333; font-size: 16px; padding: 0 20px; margin-right: 5px; }
.product-info .cart .btn-boxs a.btn-cart-l:hover {  background: #c5b5ae; color: #ffffff; }
.product-info .cart .btn-boxs a.btn-cart { background: #e9d8d8; display: block; flex: 1; border-radius: 5px; line-height: 35px; color: #333333; font-size: 16px; padding: 0 20px; margin-left: 5px; }
.product-info .cart .btn-boxs a.btn-cart:hover {  background: #c5b5ae; color: #ffffff; }
.product-info .cart .btn-boxs a span.icon { position: relative;  display: inline-block; width: 18px; height: 18px; vertical-align: bottom; margin-right: 5px; margin-bottom: 8px; }
.product-info .cart .btn-boxs a:hover span.icon { filter: brightness(5);}
.product-info .briefly { padding: 10px 10px 10px 0; color: #333333; font-size: 16px; line-height: 1.6em; height: 140px; overflow-y: auto;}
.pro-info-title { padding: 10px; font-size: 16px; text-align: center; color: #333333; margin: 20px 0; font-weight: 300;  background-color: #fafafa;}

/*STYLE 1*/
.product-info .briefly-style::-webkit-scrollbar-track { box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); border-radius: 10px; background-color: #F5F5F5; }
.product-info .briefly-style::-webkit-scrollbar { width: 12px; background-color: #F5F5F5; }
.product-info .briefly-style::-webkit-scrollbar-thumb { border-radius: 10px; box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);  background-color: #aa9d93; }


/* 沒有購物欄位 */
.product-info.none-shopping {  -webkit-flex: 1; flex: 1; padding: 0 0 0px 0; }
.product-info.none-shopping .cart { display: none; }

.spec { padding: 0 0 0px 0; margin-bottom: 10px; text-align: left; }
.spec .pro-color { list-style: none;  margin: 0 0 10px 0; padding: 0 0 10px 0; border-bottom: 1px #dddddd solid; display: none; }
.spec .pro-color li { display: inline-block; width: 20px; height: 20px; border: 3px #f0f0f0 solid; cursor: pointer;  transition: all 0.3s ease 0s; margin-right: 5px; }
.spec .pro-color li:hover,
.spec .pro-color li.active { border: 0; transition: all 0.3s ease 0s; }
.spec .pro-size {  list-style: none; margin: 0 0 10px 0; padding: 0 0 10px 0; border-bottom: 1px #dddddd solid; }
.spec .pro-size li { display: inline-block; width: 40px; padding: 2px 5px;  border: 1px #d6d6d6 solid;  font-size: 16px; line-height: 20px; text-align: center; cursor: pointer; transition: all 0.3s ease 0s; margin-right: 5px; }
.spec .pro-size li:hover,
.spec .pro-size li.active { background: #48c3ce; border: 1px #48c3ce solid; color: #ffffff; transition: all 0.3s ease 0s; }

.spec .pro-size select { font-size: 16px; border: 0; color: #aa9d93; padding: 3px 0; width: 100%; }
.pro-sec { text-align: center; padding-bottom: 8px; }
.pro-sec select {  font-size: 14px; border: 0; border-bottom: 1px #CCCCCC solid; color: #666; padding: 3px 10px; width: 100%; margin: 0 auto;}

.m-table { list-style: none; margin: 0; padding: 10px 0 20px 0; }
.m-table li { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; border-bottom: 1px #CCC dotted; color: #737360; }
.m-table li span { display: block; -webkit-flex: 1; flex: 1;  text-align: center; padding: 5px; line-height: 1.6em; }
.m-table li:first-child { border-top: 3px #CCC solid; }

.product-info .price { width: 100%; font-size: 16px; color: #d18800; padding: 15px 0 10px 0; }
.product-info .price .normal { width: 40%; float: left; text-align: left; color: #999; }
.product-info .price .normal span { padding-top: 23px; display: inline-block; }
.product-info .price .special { width: 60%; float: right; text-align: right; }
.product-info .price .special span { font-size: 48px; padding-left: 5px; display: inline-block; line-height: 48px; }
.product-title { font-size: 24px; margin: 0; padding: 0 0 10px 0; color: #333; font-weight: normal; }

.product-time { font-size: 16px; margin: 0 0 10px 0; color: #a8a69c; font-weight: normal; }
.product-content { font-size: 16px; line-height: 1.6em; padding: 0 0 20px 0; color: #333333; }
.product-content img {  display: block; width: auto; height: auto; max-width: 100%; margin-bottom: 10px; }


/* 購買 + - */
.qtyInputBox { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; flex: 1; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; }
.qtyInputBox input { background: #ffffff; color: #333333; line-height: 34px; border: 0; border-bottom: 1px #dbdbdb solid; border-radius: 0;  padding: 0; flex: 1;  display: block; text-align: center; width: calc(100% - 60px); font-family: BebasNeue; font-size: 20px; }
.qtyInputBox span { display: block; width: 30px; height: 30px; cursor: pointer; flex: initial; cursor: pointer; background-position: center;  background-repeat: no-repeat; background-size: 20px auto; cursor: pointer;  border: 1px #dbdbdb solid; border-radius: 99em; transition: all 0.3s ease; }
.qtyInputBox span.fa-minus {  background-image: url(../image/count-less.svg); }
.qtyInputBox span.fa-plus {  background-image: url(../image/count-add.svg);}
.qtyInputBox span:hover {  background-color: #ffffff; border: 1px #535353 solid;}
.count { display: block; line-height: 30px; padding-right: 5px;}
.count .qtyInputBox { width: 100%;  flex: none;}
.product-lis li .quantity-num .qtyInputBox { display: flex;}

/* 寄杯明細 */
/* pro-detail */
.pro-detail { margin-bottom: 5px; max-width: 440px; margin: 0 auto; }
.pro-detail .photo { margin-bottom: 10px; background-position: center; background-repeat: no-repeat; background-size: cover; border-radius: 12px; border: 3px #ffffff solid; }

.pro-detail .photo:before { content: '';  display: block; width: 100%; height: 0; padding-bottom: 70%; }
.pro-detail .pro-name { font-size: 18px; color: #333333; margin-bottom: 5px;}
.pro-detail .pro-info { font-size: 14px; color: #a5a5a5; margin: 0 0 10px 0; padding: 0; }
.pro-detail .pro-info p { margin: 0; padding: 0; }
.pro-detail .pro-info p span { font-size: 16px; color: #000;  display: block; text-align: center; }
.pro-detail .pro-info p span.set {  display: inline-block; }
.pro-detail .pro-info p span.count { display: inline-block;  font-size: 24px; color: #770000;  padding-left: 5px;}
.pro-detail .quantity { text-align: center; color: #686868; font-size: 18px; }
.pro-detail .quantity span { font-size: 24px; color: #e02828; margin-left: 10px; }
.pro-detail .price { font-size: 18px; color: #686868; padding: 10px 0; text-align: center; }
.pro-detail .price span { font-size: 24px; color: #e02828; margin-left: 10px; }
.pro-detail .form-box { display: flex;}
.pro-detail .form-box span.title { flex: none;  width: 80px; color: #4b4b4b; padding: 5px 5px 0 0; }
.pro-detail .form-box input.text-data { flex: 1; border: 0; border-bottom: 1px #dbdbdb solid; padding: 8px 10px; }

.finish-info { padding: 15px 0; color: #797979;}
.item-list .item .button-btn .icon.cart { margin: -3px 0 0 0;}

/* 寄杯明細 select-box */
.select-box { display: flex; margin-bottom: 10px;}
.select-box span.tab { line-height: 36px; white-space: nowrap; margin-right: 5px; }
.select-box select { flex: 1; margin-right: 10px; font-size: 16px; border: 0; border-bottom: 1px #dbdbdb solid; color: #585858; text-align: center; border-radius: 0; padding: 0 10px 0 0; line-height: 34px; height: 36px; background-color: #f8f8f8; }
.select-box select.select-full { margin-right: 0; }
.select-box select.zone { width: 90px; flex: none;}
.select-box button.btn-select { flex: initial; width: 90px; }
.select-box .select-title { width: 80px;  flex: initial; font-size: 16px; color: #4b4b4b; line-height: 36px; }
.select-box.quantity-num { margin: 15px 0;}

/* 寄杯結帳 */
.exchange-cart { margin-bottom: 20px;}
.exchange-cart .cart-list { display: flex; padding: 20px 0; border-bottom: 1px #dfdfdf solid;}
.exchange-cart .cart-list .photo { width: 160px; flex: none; margin:0 10px 0 0;}
.exchange-cart .cart-list .photo > div { width: 100%; height: 0; padding-bottom: 100%; border-radius: 8px; background-position: center; background-size: cover; background-repeat: no-repeat;}
.exchange-cart .cart-list .photo:before { display: none;}
.exchange-cart .cart-list .info { flex: 1; position: relative; padding-bottom: 45px; font-size: 14px;}
.exchange-cart .cart-list .info .pro-name { margin-bottom: 10px; font-size: 18px;}
.exchange-cart .cart-list .info .spe span { display: inline-block; margin: 0 5px 5px 0; border: 1px #dadada solid; padding: 5px 8px; border-radius: 12px;}
.exchange-cart .cart-list .info .unit-price span { font-size: 16px; color: #8b3c3c;}
.exchange-cart .cart-list .info  .select-box.quantity-num {  position: absolute; left: 0; bottom: 0; width: 100%; margin: 0; }
.exchange-cart .cart-list .info .subpotal span { font-size: 20px; color: #dd0707; padding-left: 10px;}
.exchange-cart .cart-list .info .select-box { margin: 10px 0; max-width: 200px;}
.exchange-cart .cart-list .btn-box { width: 60px; display: flex; align-items: center; margin-left: 20px; padding: 0;}
.exchange-cart .cart-list .btn-box  button.btn-cancel { width: 60px; padding: 5px; text-align: center; display: block;}


.exchange-check-potal { text-align: center; background-color: #f7f7f7; padding: 15px 10px;}
.exchange-check-potal span { font-size: 30px; color: #dd0707;}


/* search-history */
.search-history { padding-bottom: 15px; }

.history-title { position: relative; background: #d7fcff; padding: 8px 15px; border: 3px #bcdbed solid; margin-bottom: 10px; font-style: 16px; color: #2496a0; text-align: center;}
.history-title .icon { width: 40px; height: auto; position: absolute; top: -12px;  left: 50%; margin-left: -20px; }
.search-history ul { list-style: none; margin: 0; padding: 0; }
.search-history ul li { padding: 10px; border-bottom: 1px #f2f2f2 solid; position: relative; }
.search-history ul li:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.search-history ul li .rank { background: #F30; width: 40px; height: 40px; line-height: 40px; text-align: center;  color: #ffffff; font-size: 16px; position: absolute; top: -10px; left: -10px; }
.search-history ul li .photo {  height: 120px; float: left;  width: 50%; border: 1px #E7E7E7 solid; text-align: center; padding: 5px; }
.search-history ul li .photo img { width: auto; height: auto; max-height: 100%; }
.search-history ul li .pro-name { float: left; width: 50%; }
.search-history ul li .pro-name a.name { font-size: 14px; color: #333; display: block; line-height: 1.4em; padding: 0 0 10px 10px;}
.search-history ul li .price { font-family: BebasNeue; color: #f08c98; font-size: 23px; display: block; text-align: right; }



/* index*/
.index-main { max-width: 1200px;  width: 100%; margin: 10px auto; overflow: hidden; }


.rec-pro-lis { list-style: none; margin: 0 -1%;  padding: 0; }
.rec-pro-lis li {  border: 3px #CCC solid; float: left; width: 31.33%; height: 0; padding-bottom: 30%; margin: 0 1%; text-align: center; cursor: pointer; opacity: 0.8; transition: all 0.3s ease 0s; background-position: center; background-size: cover; }
.rec-pro-lis li img {  width: 100%; height: auto; }
.rec-pro-lis li:hover,
.rec-pro-lis li.active { border: 3px #6CC solid;  opacity: 1; transition: all 0.3s ease 0s; }

/* i-video */
.i-video { margin: 0 -0.5% 0px -0.5%; }
.i-video .item { background: #a28f88; width: 32.33%; margin: 0 0.5% 10px 0.5%; float: left; }
.i-video .item .i-video-media { width: 100%; height: 220px; }
.i-video .item h3 { font-size: 16px; text-align: center; padding: 10px 10px;  margin: 0; }
.i-video .item h3 a { color: #faefe9; display: block; height: 1.2em; line-height: 1.2em; overflow: hidden;}
.i-video .item h3 a:hover { color: #ffffff; }


/* i-community */
.i-community {  margin: 0 -0.5% 10px -0.5%; height: 583px; overflow: hidden; }
.i-community .banner-area { width: 32.33%;  margin: 0 0.5% 10px 0.5%; height: 100%; float: left; }
.i-community .banner-area img { width: 100%; height: auto; margin-bottom: 10px; }
.i-community .facebook { background: #f7f6f6;  width: 32.33%; margin: 0 0.5% 10px 0.5%; height: 100%; float: left; }

.i-community .ig { width: 32.33%; margin: 0 0.5% 10px 0.5%; height: 100%; float: left; }

@media screen and (max-width: 1000px) {
    .i-community { height: 542px; }
}

@media screen and (max-width: 800px) {
    .i-community { height: 490px; }
    .i-recommend .item { width: 49%; }
}

/* news */
.news-list { padding: 0px; min-height: 300px; margin: 0 auto; max-width: 990px;}
.news-cont { position: relative; z-index: 10; padding-bottom: 30px;  max-width: 990px;  margin: 0 auto; }
.news-cont .cover { margin-bottom: 20px; width: 100%; height: auto;}
.news-title { font-size: 24px; margin: 0 0 10px 0;  padding: 0; color: #333333; font-weight: normal; text-align: center; }
.news-title span { background: url(../image/news-detail-icon.png); background-size: cover; width: 20px;  height: 20px; float: left; display: block; margin: 5px 5px 0 0; }
.news-time {  font-size: 14px;  margin: 10px 0 15px 0; text-align: center; color: #333333; font-weight: normal; padding: 6px 15px;}
.news-content { font-size: 14px; line-height: 1.6em;  padding: 0 0 20px 0; color: #333333; }
.news-content img { display: block;  width: auto; height: auto; max-width: 100%; margin-bottom: 10px; }


/* 販賣機選單 */
.vm-menu { max-width: 640px; margin: 0 auto 30px auto; border-bottom: 1px #e4e4e4 solid; text-align: center; display: flex; justify-content: center;  }
.vm-menu a { display: block; border-radius: 5px 5px 0 0; width: calc(25% - 4px); flex: none; margin: 0 2px; font-size: 18px; text-align: center; padding: 8px 0; color: #333333; }

.vm-menu a:hover { background-color: #f5d4d4;}
.vm-menu a.active {  background-color: #e4e4e4;}
.vm-menu a span { width: 22px; height: 22px; display: inline-block; margin: 0 10px 3px 0;  background-position: center; background-repeat: no-repeat; background-size: cover;  vertical-align: middle; filter: brightness(0.2); }

.vm-menu a span.ex-icon01 {  background-image: url(../image/icon-shop.svg); }
.vm-menu a span.ex-icon02 { background-image: url(../image/icon-caffee.svg); }
.vm-menu a span.ex-icon03 { background-image: url(../image/icon-lis.svg); }
.vm-menu a span.ex-icon04 { background-image: url(../image/icon-vending-machine.svg); }


/* 販賣機產品 */
.vm-lis { max-width: 980px; margin: 20px -5px; display: flex; flex-wrap: wrap; justify-content: center }
.vm-lis .vm-item { position: relative; width: calc(20% - 10px); margin: 5px; flex: none; background-color: #f4f4f4; border-radius: 10px; padding: 6px 6px 75px 6px; }
.vm-lis .vm-item .info { padding-bottom: 10px; }
.vm-lis .vm-item .info .photo { flex: 1; position: relative; }
.vm-lis .vm-item .info .photo a { display: block; width: 100%; background-position: center; background-repeat: no-repeat; background-size: cover; border-radius: 5px; overflow: hidden; }
.vm-lis .vm-item .info .photo a:before { content: ''; width: 100%; height: 0; padding-bottom: 100%; display: block;}
.vm-lis .vm-item .info .photo a.where-mechian { position: absolute; bottom: 0; right: 0; height: auto; font-size: 16px; background-color: rgba(0,0,0, 0.8); color: #ffffff; text-align: center; padding: 5px;}
.vm-lis .vm-item .info .photo a.where-mechian:before { display: none;}
.vm-lis .vm-item .info .photo a.where-mechian:hover {  background-color: rgba(212, 69, 69, 0.8); }
.vm-lis .vm-item .info .pro-info h3 { font-size: 14px; line-height: 1.2em; margin: 10px 0; color: #3d3d3d; text-align: center; }
.vm-lis .vm-item .info .pro-info p { font-size: 12px; color: #666666; line-height: 1.4em; height: 4.2em; overflow: hidden; margin:0; padding: 0;}
.vm-lis .vm-item .info .pro-info .price { font-size: 20px; color: #be2929; font-weight: 400; text-align: center; position: absolute; bottom: 50px; right: 0; width: 100%;}
.vm-lis .vm-item .info .pro-info .price span { font-size: 14px; font-weight: normal; color: #707070; }
.vm-lis .vm-item .button-btn { display: flex; position: absolute; left: 6px; bottom: 6px; width: calc(100% - 12px);}
.vm-lis .vm-item .button-btn button { flex: 1; background-color: #ffffff; font-size: 14px; color: #868686;}
.vm-lis .vm-item .button-btn button .icon { display: inline-block; width: 18px; height: 18px; vertical-align: bottom; margin-right: 5px;}
.vm-lis .vm-item .button-btn button:hover {  background-color: #cf5151; color: #ffffff;}
.vm-lis .vm-item .button-btn button:hover .icon { filter: brightness(1); }


.vm-lis .vm-item.checkout { max-width: 360px; width: 100%; position: relative; padding: 6px 6px 120px 6px; margin: 0 auto;}
.vm-lis .vm-item .button-btn.checkout { padding-top: 10px; display: block;}
.vm-lis .vm-item .button-btn.checkout button { margin-top: 10px; width: 100%;}
.vm-lis .vm-item .button-btn.checkout select { display: block; text-align: center; padding: 5px 10px; width: 100%; background-color: #ffffff; font-size: 14px; color: #868686; border: 0; border-radius: 5px; text-align: center;}
.vm-lis .vm-item .button-btn.checkout .check-btn { background-color: #acacac; color: #ffffff;}
.vm-lis .vm-item .button-btn.checkout button:last-child { margin-left: 0px;}
.vm-lis .vm-item .button-btn.checkout .insufficient { background-color: #c2c2c2; color: #ffffff; cursor: default;}


/* 結帳總計 */

.total-box  { display: flex;}
.total-box .quantity { font-size: 16px; color: #000; flex: 1; vertical-align: bottom; display: flex; align-items: flex-end; padding-left: 10px; }
.total-box .quantity span { color: #777777; padding-left: 5px;}
.total-box .total { font-size: 24px; flex: 1; text-align: right; }
.total-box .total span { font-size: 18px; color: #777777; padding-left: 5px;}

.vm-lis .vm-item.checkout .total-box { position: absolute; bottom: 95px; left: 6px; width: calc(100% - 12px);}


/* 販賣機分類 */
.vm-catalogry { text-align: center; text-align: center;}
.vm-catalogry button { background-color: #ffffff;border: 1px #e9e9e9 solid; border-radius: 8px; margin: 3px; width: 120px; height: 120px; display: flex; align-items: center; justify-content: center; display: inline-block; box-shadow: 0 0 10px #e4e4e4 inset; }
.vm-catalogry button:hover { background-color: #6d6d52; color: #ffffff; box-shadow: 0 0 10px #616044 inset;}
.vm-catalogry button.active { background-color: #a3aa43;  box-shadow: 0 0 10px #968868 inset; cursor: default; }
.vm-catalogry button span { text-align: center; display: block; color: #818181;}
.vm-catalogry button.active span { color: #ffffff;}
.vm-catalogry button span:before { content: ''; width: 60px; height: 60px; margin: 0 auto 5px auto; display: block; background-position: center; background-repeat: no-repeat; background-size: contain;  transition: all 0.3s ease;}
.vm-catalogry button:hover span { filter: brightness(5);}
.vm-catalogry button:hover span:before, .vm-catalogry button.active span:before  { filter: brightness(5);}
.vm-catalogry button.cafe span:before { background-image: url(../image/icon-cafe-machine.svg);}
.vm-catalogry button.vending span:before { background-image: url(../image/icon-vending-machine.svg);}

/* 販賣機兌換列表 */
.vm-item-list { margin: 5px auto; max-width: 980px; display: flex; justify-content: center; }
.vm-item-list .item { width: calc(20% - 10px); flex: none; position: relative; margin: 5px; padding: 10px 10px 90px 10px; box-shadow: 0 0 5px #e4e4e4 inset; background-color: #ffffff; background-color:#f4f4f4 ; border-radius: 10px; }
.vm-item-list .item .photo { flex: initial; position: relative; overflow: hidden; width:100%;  margin-right: 20px;
    background-position: center; background-repeat: no-repeat; background-size: cover; border-radius: 5px; }
.vm-item-list .item .photo a { content: ''; width: 100%; height: 0; padding-bottom: 100%; display: block;}
.vm-item-list .item .photo a.where-mechian { position: absolute; bottom: 5px; right: 5px; height: auto; font-size: 16px; background-color: rgba(255, 255, 255, 0.9); color: #333333; text-align: center; padding: 5px; border-radius: 5px; width: calc(100% - 10px);}
.vm-item-list .item .photo a.where-mechian:hover {  background-color: rgba(242, 255, 121, 0.9); }
.vm-item-list .item .pro-info {  position: relative; }
.vm-item-list .item .pro-info .pro-name { font-size: 16px; text-align: center; color: #5a5657;}
.vm-item-list .item .pro-info p { font-size: 14px; line-height: 1.4em; min-height: 5.6em; overflow: hidden; color: #a5a5a5; margin: 0; padding: 0; text-align: center; }
.vm-item-list .item .pro-info p span { font-size: 16px; display: block; padding: 5px 0; color: #292929; }
.vm-item-list .item .price { font-size: 14px; color: #686868; position: absolute; bottom: 50px;  left: 0; width: 100%; text-align: center; }
.vm-item-list .item .price span { font-size: 24px; color: #5a5657; }
.vm-item-list .item .button-btn { display: flex; position: absolute; bottom: 10px; left: 10px; width: calc(100% - 20px); }
.vm-item-list .item .button-btn button { width: calc(50% - 4px); margin:0 2px; padding: 8px 2px; }
.vm-item-list .item .button-btn button.exchange { background-color: #ffffff; width: 100%;  color: #333333;border: 1px #dddddd solid; }
.vm-item-list .item .button-btn button.exchange:hover { background-color: #ffc8c8; }
.vm-item-list .item .button-btn button.exchange:hover .icon { filter: brightness(0); }
.vm-item-list .item .button-btn button.give { background-color: #ff4141; width: 100%; color: #ffffff;}
.vm-item-list .item .button-btn button.exchange .icon,
.vm-item-list .item .button-btn button.give .icon { width: 16px; height: 16px; display: inline-block; vertical-align: middle; margin-right: 5px; }
.vm-item-list .item .button-btn button.give .icon  { filter: brightness(5); }
.vm-item-list .item .button-btn button.give:hover { background-color: #7a6732; }
.vm-item-list .item .button-btn button.buy { height: 100%; }
.vm-item-list .item .button-btn button span.cart-icon { background-image: url(../image/addtoorlder-icon.png); background-position: center; background-repeat: no-repeat; background-size: cover; margin: 0 auto 5px auto; display: block; width: 24px; height: 24px; }


/* 販賣機地點 */
.machine-list { padding: 0px; min-height: 300px; }
.machine-list .list-box { max-width: 740px; margin: 0 auto;}
.machine-list .search-condition { padding: 10px 0; font-size: 20px; text-align: center; max-width: 740px; margin: 10px auto; background-color: #f3f3f3; border-radius: 8px;}

.machine-item { margin: 0 0px 20px 0px; padding-bottom: 10px; display: flex; border-bottom: 1px #e0e0e0 solid;}
.machine-item:hover { transition: all 0.3s ease 0s;}
.machine-list.i-machine-lis { margin: 0;}
.machine-list.i-machine-lis .machine-item { width: calc(50% - 10px);  margin: 0 5px; float: left; border-bottom: 0;}

.machine-item .photo { width: 55px; position: relative; border-radius: 8px; overflow: hidden; margin-bottom: 10px; text-align: center;}
.machine-item .photo a { display: block; width: 100%; height: 0; padding-bottom: 100%; background-position: center; background-size: cover;}
.machine-item .photo a.cafe { background-image: url(../image/icon-cafe-machine.svg);}
.machine-item .photo a.vending { background-image: url(../image/icon-vending-machine.svg);}
.machine-item .photo a:hover {  opacity: 0.7; }
.machine-item .info { flex: 1; position: relative; padding-left: 10px; display: flex;}

.machine-item h4 { margin: 0; padding: 0 0 5px 0;}
.machine-item h4 a { color: #000000; font-size: 16px; line-height: 1.4em; display: block;}
.machine-item h4 a:hover { background: #EEE; color: #333333;}
.machine-item .info p { height: auto; margin: 0; padding: 0px 0 0px 30px; text-indent: -30px;  font-size: 16px; line-height: 1.4em; color: #999999; }
.machine-item .info p:before { content: ''; display: inline-block; width: 22px; height: 22px; margin-right: 5px; margin-bottom: 3px;
    background-size: contain; background-repeat: no-repeat; background-position: center ; vertical-align: middle;
}
.machine-item .info p.icon-distance { display: none;}
.machine-item .info p.icon-machine:before { background-image: url(../image/icon-store.svg); filter: brightness(0.5); }
.machine-item .info p.icon-distance:before { background-image: url(../image/icon-store04.svg); filter: brightness(0.5); }

.machine-item .info .left { flex: 1; float: none; margin-bottom: 15px;}
.machine-item .info .right { height: 182px; width: 100%; float: none; background: #f7f3f1; border: 1px #a59187 solid; display: none; }
.machine-item:last-child .info .left { border-bottom: 0px;}
.machine-item .time-location { width: 220px; flex: none; text-align: center; display: flex;}
.machine-item .time-location .status { padding-bottom: 15px; color: #d4d4d4; font-size: 16px;}
.machine-item .time-location .status.online { color: #242424;}
.machine-item .time-location a { display: flex; align-items: center; justify-content: center; flex: 1; padding: 4px 5px; border-radius: 5px; font-size: 14px;  }
.machine-item .time-location a.products { background-color: #ffffff; color: #333333;  margin-right: 2px; border: 1px #d8d8d8 solid;}
.machine-item .time-location a.products:hover { background-color: #ddd3d3;}
.machine-item .time-location a.products:before {
    content: ''; display: inline-block; vertical-align: middle; width: 16px; height: 16px; margin-right: 5px;
    background-position: center; background-repeat: no-repeat; background-size: cover; background-image: url(../image/icon-cart.svg);
    filter: brightness(0);
}
.machine-item .time-location a.googlemap { background-color: #353535; color: #acacac; margin-left: 2px; }
.machine-item .time-location a.googlemap:before {
    content: ''; display: inline-block; vertical-align: middle; width: 16px; height: 16px; margin-right: 5px;
    background-position: center; background-repeat: no-repeat; background-size: cover; background-image: url(../image/icon-location.png);
}

.machine-item .time-location span.in-stock { display: flex; flex: 1; align-items: center; justify-content: center; background-color: #f0f0f0; color: #3d3d3d; padding: 6px 10px; font-size: 16px; border-radius: 5px; border: 1px #dadada solid;}
.machine-item .time-location span.out-stock { display: flex; flex: 1; align-items: center; justify-content: center;  background-color: #888888; color: #ffffff; padding: 6px 10px; font-size: 16px; border-radius: 5px;}


.machine-item .time-location a.googlemap:hover { background-color: #626345;}
.search-machine { display: flex; padding: 5px; border-radius: 4px; background-color: #f5f5f5; margin: 10px auto; max-width: 740px;}
.search-machine select,
.search-machine input { background-color: #ffffff; border: 1px #e0e0e0 solid; border-radius: 4px; padding: 3px 5px; font-size: 16px; text-align: center; color: #646464;}
.search-machine select { width: 120px; margin-right: 5px; }
.search-machine input { flex: 1; margin-right: 5px; }
.search-machine button { background-color: #474747; color: #ffffff; width: 110px; border-radius: 4px; padding: 3px 5px; font-size: 14px; }
.search-machine button:hover { background-color: #857751;}



/* 販賣機介面 */
.machine-box { max-width: 740px; margin: 0 auto; background-color: #ffffff; box-shadow: 0 0 10px #c7c7c7 inset; padding: 20px 20px; border-radius: 15px; overflow: hidden;}
.machine-body { display: flex; padding: 10px 0px; }
.vm-machine-ui { width: 140px; flex: none;}

.mechine-info { position: relative; border-radius: 10px; padding:15px 130px 15px 90px; min-height: 80px; background-color: #afafaf;}
.mechine-info h4 { font-size: 30px; color: #f8f8f8; line-height: 1em; margin-bottom: 5px; }
.mechine-info p { padding: 5px 0 0 0; font-size: 16px; color: #f1f1f1; margin: 0;}
.mechine-info:before { content: ''; width: 80px; margin-right: 5px; height: 80px; display: block; position: absolute; background-image: url(../image/icon-vending-machine.svg);
    background-position: center; background-repeat: no-repeat; background-size: 80% auto; position: absolute; left: 0; top: 8px; filter: brightness(3);}
.mechine-info.cafe:before { background-image: url(../image/icon-cafe-machine.svg);}

.mechine-info a.googlemap { background-color: #3d3d3d; display: block; color: #ffffff; padding: 8px 5px; font-size: 14px; border-radius: 5px; position: absolute;
    right: 7px; top: 10px; line-height: 60px; text-align: center; width: 120px; }
.mechine-info a.googlemap:before {
    content: '';  display: inline-block; vertical-align: middle; width: 18px; height: 18px;
    margin-right: 5px; margin-top: -5px; filter: brightness(1); background-position: center; background-repeat: no-repeat; background-size: cover;
    background-image: url(../image/icon-location.png);
}
.mechine-info a.googlemap:hover { background-color: #ddbb4b;}



/* 販賣機內產品列表 */
.vm-machine-lis { border-top: 5px #dfdfdf solid; padding:25px 15px; flex: 1; background-color: #ffffff; border-radius: 12px; display: flex; flex-wrap: wrap; }
.vm-machine-lis .vm-item { width: 25%; padding: 5px 5px 15px 5px; flex: none; display: flex; flex-wrap: wrap; align-content: space-between;  }
.vm-machine-lis .vm-item .info { padding-bottom:0; width: 100%; flex: none; }
.vm-machine-lis .vm-item .info .photo { border-radius: 8px; overflow: hidden; }
.vm-machine-lis .vm-item .info .photo a { display: block; width: 100%; background-position: center; background-repeat: no-repeat; background-size: cover; overflow: hidden; }
.vm-machine-lis .vm-item .info .photo a:before { content: ''; width: 100%; height: 0; padding-bottom: 100%; display: block;}
.vm-machine-lis .vm-item .info .pro-info { position: relative; }
.vm-machine-lis .vm-item .info .pro-info h3 { font-size: 14px; line-height: 1.2em; margin: 10px 0; color: #333333; text-align: center; }
.vm-machine-lis .vm-item .info .pro-info p { font-size: 12px; color: #afafaf; line-height: 1.4em; max-height: 4.2em; overflow: hidden; margin:0; padding: 0 5px;}
.vm-machine-lis .vm-item .info .pro-info .price { font-size: 20px; font-weight: 400; color: #7cb9e2; text-align: center; width: 100%;}
.vm-machine-lis .vm-item .info .pro-info .price span { font-size: 14px; font-weight: normal; display: block; }
.vm-machine-lis .vm-item .have {  width: 100%; flex: none; text-align: center; padding: 5px; margin-bottom: 5px; color: #757575; font-size: 14px;}
.vm-machine-lis .vm-item .button-btn { display: flex; width: 100%; flex: none; height: 41px; }
.vm-machine-lis .vm-item .button-btn button { flex: 1; font-size: 16px; color: #424242; border-radius: 0; border-radius: 6px; border-top: 1px #ffffff solid; transition: all 0.3s ease;  }

.vm-machine-lis .vm-item .button-btn button .icon { display: inline-block; width: 18px; height: 18px; vertical-align: bottom; margin-right: 5px; transition: all 0.3s ease;}
.vm-machine-lis .vm-item .button-btn button:hover {  color: #ffffff; }
.vm-machine-lis .vm-item .button-btn button:hover .icon {  filter: brightness(5); }
.vm-machine-lis .vm-item .button-btn button.out-stock { color: #e2e2e2; background: #999999; cursor: default;}
.vm-machine-lis .vm-item .button-btn button.out-stock .icon { filter: brightness(10); background-image: url(../image/close-btn.png);}


/* lis-item */
.lis-itim { width: 23%; margin: 0 1% 2% 1%; float: left; }
.lis-itim:hover { transition: all 0.3s ease 0s; }
.lis-itim .photo {  width: 100%; }
.lis-itim .photo a { display: block; width: 100%; height: 0; padding-bottom: 100%; background-position: center; background-size: cover; }
.lis-itim .photo a:hover { opacity: 0.7; }
.lis-itim .time { font-size: 16px; color: #4899a2; padding: 10px 0; text-align: center; border-bottom: 1px #d7d7d7 solid; display: block;}

.lis-itim h4 {  margin: 0; padding: 0; font-weight: 500; }
.lis-itim h4 a { color: #535353; font-size: 16px; padding: 10px 5px;  line-height: 1.4em; display: block; height: 60px; overflow: hidden; }
.lis-itim h4 a:hover { color: #4899a2;}

.lis-itim02 { margin: 0 1% 2% 1%; width: 31.33%; float: left; }
.lis-itim02:hover { transition: all 0.3s ease 0s;}
.lis-itim02 .photo { width: 100%; margin: 0; float: none; padding: 5px; background: #F1F1F1; border-radius: 8px; overflow: hidden; }
.lis-itim02 .photo a { display: block; width: 100%; height: 0; padding-bottom: 60%; background-position: center; background-size: cover;  border-radius: 4px; overflow: hidden;}
.lis-itim02 .photo a:hover { opacity: 0.7; }
.lis-itim02 .info { width: 100%; }
.lis-itim02 .time { font-size: 12px; color: #78685d; padding: 10px 10px; display: block;  text-align: right;}
.lis-itim02 .time a { background: #a59187; color: #ffffff; vertical-align: middle;  margin-left: 10px; line-height: 5px; font-size: 12px; display: inline-block;}
.lis-itim02 .time a img { width: 24px; height: auto; }
.lis-itim02 h4 { color: #0f0f0f; margin: 0; padding: 0; font-weight: 300;}
.lis-itim02 h4 a { color: #0f0f0f; font-size: 16px; padding: 15px 0 5px 0; line-height: 1.4em; height: calc(2.8em + 15px); overflow: hidden; display: block;}
.lis-itim02 h4 a:hover { color: #b83f3f; }
.lis-itim02 .info p { width: 195px; overflow: auto;  margin: 0; padding: 20px 25px; font-size: 14px; line-height: 1.6em; color: #333; display: none; }


@media screen and (max-width: 1080px) {
    .lis-itim { width: 31.3%; margin: 0 1% 2% 1%; float: left;}
    .lis-itim02 .info p { height: 180px; }
}

@media screen and (max-width: 1000px) {
    .lis-itim02 .info p {  height: 160px;}
}

@media screen and (max-width: 900px) {
    .lis-itim02 .info p {  height: 140px;}
}

@media screen and (max-width: 800px) {
    .lis-itim02 .info p { height: 100px;}
}



/* record-list 寄杯紀錄 */
.record-list { max-width: 640px; margin: 0 auto;}
.record-list .record { display: flex; padding: 10px;  margin-bottom: 5px; background-color: #ffffff; border-bottom: 1px #e9e9e9 dotted;}
.record-list .record .photo { flex: initial; position: relative; overflow: hidden; width: 120px; height: 120px;  margin-right: 20px; background-position: center; background-repeat: no-repeat; background-size: cover; border-radius: 5px;  transition: all 0.3s ease; }
.record-list .record .photo.buy { background-image: url(../image/exchange-lis03.svg);}
.record-list .record .photo.exchange { background-image: url(../image/exchange-lis02.svg);}
.record-list .record .photo.win { background-image: url(../image/exchange-lis05.svg);}
.record-list .record .photo.give { background-image: url(../image/exchange-lis01.svg);}
.record-list .record .photo.pick-up { background-image: url(../image/exchange-lis07.svg);}
.record-list .record .photo.be-gifted { background-image: url(../image/exchange-lis04.svg);}
.record-list .record .photo a {  width: 100%; display: block;  height: 0;  padding-bottom: 100%; filter: brightness(0.8); }
.record-list .record .photo:hover {  filter: brightness(1.1); transition: all 0.3s ease;}
.record-list .record .record-info { flex: 1; margin-right: 15px; position: relative; }
.record-list .record .record-info .record-name { font-size: 18px; color: #704545; font-weight: 300; margin-bottom: 0px; font-weight: 500; }
.record-list .record .record-info p {  font-size: 14px; color: #757575; line-height: 1.6em;   margin: 0; padding: 0;}
.record-list .record .record-info p span { font-size: 14px; color: #292929; }
.record-list .record .status { margin-top: 10px; font-size: 14px; border-radius: 4px; overflow: hidden; color: #242424; line-height: 2em;}
.record-list .record .status a { background-color: #c40000; color: #ffffff; padding: 0px 15px; display: inline-block; border-radius: 4px; margin-right: 5px; }
.record-list .record .status a:hover { background-color: #ff9100;}
.record-list .record .status span { color: #b3b3b3;}
.cafe-qr-code { max-width: 360px; margin: 0 auto 30px auto; text-align: center; background-color: #e9e9e9; padding:50px 30px; border-radius: 10px;}
.cafe-qr-code > div { background-color: #ffffff; padding: 15px; border-radius: 5px;}
.cafe-qr-code h3 { padding-bottom: 15px; background-color: #ffffff;}

/* 寄杯選單 */
.exchange-menu { max-width: 640px; margin: 0 auto 30px auto; border-bottom: 1px #e4e4e4 solid; display: flex; }
.exchange-menu a {  display: block; border-radius: 5px 5px 0 0; flex: 1; margin: 0 2px; font-size: 18px; text-align: center; padding: 8px 0; color: #333333; }

.exchange-menu a:hover { background-color: #f5d4d4;}
.exchange-menu a.active {  background-color: #e4e4e4;}
.exchange-menu a span { width: 22px; height: 22px; display: inline-block; margin: 0 10px 3px 0; background-position: center; background-repeat: no-repeat; background-size: cover; vertical-align: middle; filter: brightness(0.2); }
.exchange-menu a span.ex-icon01 {  background-image: url(../image/icon-shop.svg); }
.exchange-menu a span.ex-icon02 { background-image: url(../image/icon-caffee.svg); }
.exchange-menu a span.ex-icon03 { background-image: url(../image/icon-lis.svg); }
.exchange-menu a span.ex-icon04 { background-image: url(../image/icon-vending-machine.svg); }



/* item-list */
.item-list { margin: 5px -5px; max-width: 980px; display: flex; flex-wrap: wrap; justify-content: center; }
.item-list .item { position: relative; flex: none; width: calc(25% - 10px); margin: 5px; padding-bottom: 60px; background-color: #ffffff; border-bottom: 1px #e9e9e9 dotted;}
.item-list .item .photo { flex: initial; position: relative; overflow: hidden; width: 100%; height: 0; padding-bottom: 70%; margin: 0 auto 10px auto; background-position: center; background-repeat: no-repeat; background-size: cover; border-radius: 5px; }
.item-list .item .photo a.where-mechian { position: absolute; bottom: 0;left: 0; width: 100%; font-size: 16px; background-color: rgba(0,0,0, 0.8); color: #ffffff; text-align: center; padding: 5px 10px;}
.item-list .item .photo a.where-mechian:hover {  background-color: rgba(212, 69, 69, 0.8); }
.item-list .item .pro-info {  position: relative; }
.item-list .item .pro-info .pro-name { font-size: 16px; color: #333333; margin-bottom:5px}
.item-list .item .pro-info p { font-size: 14px; color: #a5a5a5; margin: 0; padding: 0; }
.item-list .item .pro-info p span { font-size: 16px; display: block; padding: 0; color: #292929; }
.item-list .item .price { font-size: 14px; color: #686868; width: 100%;}
.item-list .item .price span { font-size: 20px; color: #e01f4f; }
.item-list .item .find-cofe-m a { text-align: center; color: #6bca6b; display: block; }

.item-list .item .button-btn { width: 100%; display: flex; position: absolute; left: 0; bottom: 5px; }
.item-list .item .button-btn button { width: 100%; line-height: 24px; font-size: 14px; }
.item-list .item .button-btn button.buy { border-radius: 99em;}
.item-list .item .button-btn button.exchange { background-color: #ffffff; flex: none; width: calc(50% - 3px); margin-right: 3px; border: 1px #e6e6e6 solid; }
.item-list .item .button-btn button.exchange:hover { background-color: #dbdbdb; }
.item-list .item .button-btn button.give { background-color: #f5f5f5; border: 1px #f5f5f5 solid; flex: none; width: calc(50% - 3px); margin-left: 3px; color: #db8372;}
.item-list .item .button-btn button span.icon.icon.give { margin: -3px 5px 0 0;}
.item-list .item .button-btn button.give:hover { background-color: #ffffff; }
.item-list .item .button-btn button.give:hover .icon.give { background-image: url(../image/icon-gift.svg); filter: brightness(0.8); }
.item-list .item .button-btn button span.icon { display: inline-block; width: 18px; height: 18px; margin: -3px 5px 0 0; vertical-align: middle; }
.item-list .item .button-btn button span.cart-icon { background-image: url(../image/addtoorlder-icon.png); background-position: center; background-repeat: no-repeat; background-size: cover;  margin: 0 auto 5px auto; display: inline-block; width: 24px; height: 24px; }

.item-list.simple .item { padding-bottom: 50px;}
.item-list.simple .item .photo { margin: 0; }
.item-list.simple .item .pro-info { padding: 3px 0px 0px 0; }
.item-list.simple .item .price { width: auto; position: absolute; right: 50px; left: 0; bottom: 5px; text-align: right; }
.item-list.simple .item .button-btn { width: 40px; display: flex; position: absolute; left: auto; right: 0;  bottom: 5px; }
.pro-detail.simple .price span { margin-left: 0;}
.item-list .item .button-btn button:hover { background-color: #dfdfdf;}


/* item-list */
.exchange-item-list { margin: 5px auto; max-width: 680px; }
.exchange-item-list .item { position: relative; display: flex; flex-wrap: wrap; margin: 0 0 10px 0; border-bottom: 2px #f0f0f0 solid; cursor: pointer; background-color:#fafafa;
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#f1f4ed+0,f2f2f2+100 */
    background: #f1f4ed; /* Old browsers */
    background: -moz-linear-gradient(top,  #f1f4ed 0%, #f2f2f2 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  #f1f4ed 0%,#f2f2f2 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  #f1f4ed 0%,#f2f2f2 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f1f4ed', endColorstr='#f2f2f2',GradientType=0 ); /* IE6-9 */
}
.exchange-item-list .item .photo { width: 100px; flex: none; margin-right: 10px; background-position: center; background-repeat: no-repeat; background-size: cover;}
.exchange-item-list .item .pro-info {  position: relative; flex: 1; padding: 10px 0; }
.exchange-item-list .item .pro-info .pro-name { font-size: 16px; color: #333333; font-weight: 500; margin-bottom:5px}
.exchange-item-list .item .pro-info p { font-size: 14px; color: #a5a5a5; margin: 0; padding: 0; }
.exchange-item-list .item .pro-info p span { font-size: 16px; display: block; padding: 5px 0; color: #292929; }
.exchange-item-list .item .pro-info .price { font-size: 14px; color: #686868; width: 100%;}
.exchange-item-list .item .pro-info .price span { font-size: 20px; color: #e01f4f; }
.exchange-item-list .item .find-cofe-m a { text-align: center; color: #6bca6b; display: block; }

.exchange-item-list .item .button-btn { width: 280px; flex: none;  display: flex; padding: 10px;  }
.exchange-item-list .item .button-btn button { margin-left: 3px; width: 100%; line-height:1.4em; font-size: 14px; transition: all 0.3s ease; border: 1px #e6e6e6 solid; background-color: #ffffff; }
.exchange-item-list .item .button-btn button:hover { background-color: #cecece; color: #ffffff; }
.exchange-item-list .item .button-btn button span.icon { display: inline-block; width: 18px; height: 18px; margin: -3px 5px 0 0; vertical-align: middle; }

.exchange-item-list .item .button-btn button.exchange {  margin-left: 0px; }


/* button */
button { padding: 8px 5px; font-size: 14px; color: #3f3f3f; border: 0; border-radius: 4px;  text-align: center; cursor: pointer; background-color: #f3f3f3; transition: all 0.3s ease;}
button:hover { background-color: #cf5151; transition: all 0.3s ease; color: #ffffff; }
button:hover .icon { filter: brightness(5); transition: all 0.3s ease;}


.btn-defult { background: #272727; color: #ffffff; border: 0;}
.btn-defult:hover { background: #858052;}

button.check-out { background-color: #000000;  font-size: 16px; letter-spacing: 2px; border-radius: 3px; padding: 10px 25px;  color: #ffffff; }
button.check-out:hover { background-color: #c5957f; }
button.cancel { background-color: #b3b3b3; min-width: 122px;  font-size: 16px; letter-spacing: 2px; border-radius: 3px; padding: 10px 25px;  color: #ffffff; }
button.cancel:hover { background-color: #505050; }
button.check-out-go-on { background-color: #f33c3c; font-size: 16px; letter-spacing: 2px; border-radius: 3px; padding: 10px 25px; color: #ffffff; }
button.check-out-go-on:hover { background-color: #854527; }

button.btn-cancel { padding: 10px 25px; font-size: 16px; background-color: #a9ac87; color: #ffffff;  }

/* 選項 */
.options { display: flex; flex-wrap: wrap; justify-content: center; margin: 0 -2px 5px -4px;}
.delivery-member.options { margin: 0 0 5px 0; }
.options .list { flex: 1; margin: 4px; border: 1px #979797 solid; color: #7e7e7e; text-align: center; padding: 5px; cursor: pointer; border-radius: 4px; transition: all 0.3s ease;  box-sizing: border-box; box-shadow: 0 0 5px #e7e7e7; background-color: #ffffff; display: flex; align-items: center; justify-content: center; }
.options .list:hover { border: 1px #292929 solid; color: #000; background-color: #fafafa;}
.options .list.active { border: 1px #363636 solid; color: #ffffff; background-color: #383838; cursor: default;}
.options .title { width: 100%; font-size: 18px; color: #333333; margin:0 0 5px 4px;}
.options .list.list-3 { width: calc(33.33% - 8px); }

/* icon */
.icon { display: block; margin: 0 auto 3px auto;  width: 32px; height: 32px; background-position: center; background-repeat: no-repeat; background-size: cover;
    filter: brightness(0.2); }

.icon.exchange { background-image: url(../image/icon-recycle.svg); }
.icon.cart { background-image: url(../image/icon-cart.svg); }
.icon.cart-w { background-image: url(../image/icon-cart-w.svg); }
.icon.give { background-image: url(../image/icon-gift.svg); filter: brightness(1); }
.icon.point { background-image: url(../image/icon-star.svg); }
.icon.search { background-image: url(../image/icon-search.svg); }

/* store */
.store-photo { position: relative;}
.store-list { padding: 0px; min-height: 300px; margin: 0 -1%;}
.store-itim { width: 100%; margin: 0 0 10px 0; padding-bottom: 10px; float: none; display: flex; border-bottom: 1px #CCCCCC dotted;}
.store-itim:hover { transition: all 0.3s ease 0s;}
.store-list.i-store-lis { margin: 0;}
.store-list.i-store-lis .store-itim { width: calc(50% - 10px);  margin: 0 5px; float: left; border-bottom: 0;}

.store-itim .photo { flex: none; width: 210px; position: relative; border-radius: 8px; overflow: hidden;}
.store-itim .photo a { display: block; width: 100%; height: 0; padding-bottom: 75%; background-position: center; background-size: cover;}
.store-itim .photo a:hover {  opacity: 0.7; }
.store-itim .info { margin-bottom: 8px; flex: 1; position: relative;  padding-left: 20px;}
.store-cont { padding-top: 20px;}
.store-cont .cont .items { padding: 5px 0; }
.store-cont .cont .items:before ,
.store-itim .info p:before { content: ''; display: inline-block; width: 22px; height: 22px;
    background-size: contain; background-repeat: no-repeat; background-position: center ; vertical-align: middle; margin-right: 10px;
}
.store-cont .cont .items.icon-store01:before,
.store-itim .info p.icon-store01:before {
    background-image: url(../image/icon-store01.svg);
}
.store-cont .cont .items.icon-store02:before,
.store-itim .info p.icon-store02:before {
    background-image: url(../image/icon-store02.svg);
}
.store-cont .cont .items.icon-store03:before,
.store-itim .info p.icon-store03:before {
    background-image: url(../image/icon-store03.svg);
}
.store-cont .cont .items.icon-store04:before,
.store-itim .info p.icon-store04:before {
    background-image: url(../image/icon-store04.svg);
}
/*20241226 Walter*/
.store-cont .cont .items.icon-store05:before,
.store-itim .info p.icon-store05:before {
    background-image: url(../image/icon-about.svg);
}
/*Company*/
.store-cont .cont .items.icon-store06:before,
.store-itim .info p.icon-store06:before {
    background-image: url(../image/hwc_apartment.svg);
    margin-right: 0px;
}
/*Mail*/
.store-cont .cont .items.icon-store07:before,
.store-itim .info p.icon-store07:before {
    background-image: url(../image/hwc_mail.svg);
    margin-right: 0px;
}
/*Phone*/
.store-cont .cont .items.icon-store08:before,
.store-itim .info p.icon-store08:before {
    background-image: url(../image/hwc_call.svg);
    margin-right: 0px;
}


.store-itim h4 { margin: 0; padding: 0; border-left: 5px #a19975 solid;}
.store-itim h4 a { color: #000000; font-size: 16px; padding: 2px 10px; line-height: 1.4em; display: block;}
.store-itim h4 a:hover { background: #EEE; color: #333333;}
.store-itim .info p { height: auto; overflow: auto; margin: 0; padding: 0px 0 5px 15px;  font-size: 16px; line-height: 1.6em; color: #999999; }
.store-itim .info .left { height: auto; width: 100%; float: none;}
.store-itim .info .right { height: 182px; width: 100%; float: none; background: #f7f3f1; border: 1px #a59187 solid; display: none; }
.store-itim:last-child .info .left { border-bottom: 0px;}
.store-itim .time-location { width: 130px; flex: none; text-align: center;  padding-bottom: 10px;}
.store-itim .time-location .status { padding-bottom: 15px; color: #d4d4d4; font-size: 16px;}
.store-itim .time-location .status.online { color: #242424;}
.store-itim .time-location a.googlemap {  background-color: #353535; display: block; color: #acacac; padding: 8px 5px; font-size: 12px; border-radius: 5px; }
.store-itim .time-location a.googlemap:before { content: ''; display: inline-block; vertical-align: middle;  width: 18px; height: 18px; margin-right: 5px; background-position: center; background-repeat: no-repeat; background-size: cover; background-image: url(../image/icon-location.png);}
.store-itim .time-location a.googlemap:hover { background-color: #626345;}
.store-itim .time-location a.phone { background-color: #a8833e; display: block; color: #fffedc; padding: 8px 5px; margin-bottom: 7px; font-size: 12px; border-radius: 5px;}
.store-itim .time-location a.phone:before { content: ''; display: inline-block; vertical-align: middle; width: 18px;  height: 18px; margin-right: 5px; background-position: center; background-repeat: no-repeat; background-size: cover; background-image: url(../image/icon-phone.png); }
.store-itim .time-location a.phone:hover { background-color: #626345;}
.store-cont .cont { padding: 0 0 20px 0;}
.store-cont .cont h4 { background: #242424; margin: 0 0 20px 0; color: #ffffff;  font-size: 18px; padding: 10px 100px 10px 10px;  line-height: 1.4em; position: relative; }

@keyframes shopmenu {
    0% { background-color: #464134;}
    50% {   background-color: #837752;}
    100% {  background-color: #464134; }
}
.store-cont .cont h4 a.shop-menu { position: absolute; display: block; top: 0; right: 0; bottom: 0; width: 100px; color: #dacf9f; font-size: 14px;
    display: flex; align-items: center; justify-content: center; background-color: #666345; line-height: 1.2em; text-align: center; animation: shopmenu ease infinite 3s;}
.store-cont .cont h4 a.shop-menu:before { display: inline-block; content: ''; width: 20px; height: 20px; margin-right: 5px; background-position: center; background-repeat: no-repeat; background-size: contain; background-image: url(../image/icon-menu.svg); filter: brightness(5); }
.store-cont .cont h4 a.shop-menu:hover { background-color: #669933; color: #ffffff;}
.store-cont .cont p { margin: 0; padding: 20px 10px; font-size: 14px; line-height: 1.6em; color: #333;}
.store-cont .map { height: 300px; border: 7px #ebebeb solid; }


.index-box { max-width: 1040px; margin: 0 auto;}

/*  index-news  */
.i-news { padding: 10px 0 10px 0; display: flex; margin-bottom: 30px;}
.i-news .puch-news { width: 420px; flex: none;}
.i-news .puch-news .photo { background-position: center; background-repeat: no-repeat; background-size: cover; border: 6px #e6e6e6 solid; margin-bottom: 10px; border-radius: 8px; overflow: hidden;}
.i-news .puch-news .photo:before { display: block; content: ''; width: 100%; height: 0; padding-bottom: 56%; }

.i-news .puch-news .time { font-size: 18px; color: #aa9276; padding: 5px 0 0 0; vertical-align: middle; line-height: 26px;}
.i-news .puch-news .time span {  padding: 0 0 0 10px ;color: #bb5454;}
.i-news .puch-news h3 a { font-size: 20px; color: #000000; display: block; margin: 0px 0 0 0;}
.i-news .puch-news p.intro { font-size: 14px; color: #333333; margin: 0; padding: 0; }

.i-news .news-list { -webkit-flex: 1; flex: 1; padding-left: 20px; position: relative;  padding-bottom: 40px;}
.i-news .news-list a.btn-nore { position: absolute; right: 0; bottom: 0; display: block; width: 90px; padding: 6px 0; background-color: #333333; color: #ffffff; font-size: 12px; text-align: center; letter-spacing: 2px;}
.i-news .news-list .item { border-bottom: 1px #caddca dotted; padding: 5px 0;}
.i-news .news-list .item > div {display: flex;}
.i-news .news-list .item > div  .time { color: #a2a369; width: 100px; flex: none; text-align: center;}
.i-news .news-list .item > div  a { flex: 1; color: #333; display: block; font-size: 14px;}
.i-news .news-list .item > div  a:hover { color: #F60;}
.i-news .news-list .item span.tab { padding: 0px 15px ; background-color: #c0ac8f; color: #ffffff; font-size: 14px; margin: 6px 0 3px 0; display: inline-block; border-radius: 20px; width: 100px; text-align: center; line-height: 20px;  }
.i-news .news-more { display: flex; flex-wrap: wrap;  width: 200px; flex: none; text-align: center; align-items: center; justify-content: center;}
.i-news .news-more a { background: #2496a0; color: #ffffff; font-size: 14px; display: inline-block; padding: 10px 50px;}
.i-news .news-more a:hover { background: #900; }

.i-banner-zone { margin-bottom: 30px; border-radius: 4px; overflow: hidden;}
.i-banner-zone a { display: block;}
.i-banner-zone a img { width: 100%; height: auto;}

/* contect*/
.contact-info { background: #f7f3f1; padding: 15px 20px 15px 5px; margin-bottom: 20px; height: 200px;}
.contact-info .left-box { float: left; width: 59%;  height: 100%; padding-left: 30%; }
.contact-info .left-box p { font-size: 14px; line-height: 1.6em; }
.contact-info .right-box { float: right; width: 39%; height: 100%; }
.contact-info-text { text-align: center; padding-bottom: 20px; font-size: 18px; line-height: 1.6em; color: #aa1723; }

.business-banner { width: 100%; height: auto;}

/* form */
.form .note { font-size: 16px; color: #aa9c93; padding: 0 0 0px 120px; }
.form .form-lis { font-size: 16px; line-height: 1.2em; padding: 10px 0; display: flex; flex-wrap: wrap; }
.form .form-lis .title { display: block;  font-size: 16px; color: #868686; line-height: 1.4em;  width: 120px; flex: none; padding: 10px 10px 10px 0; text-align: right; }
.form .form-lis .data { background: #ffffff; border: 1px #d3d3d3 solid; width: calc(100% - 120px); flex: 1; display: block; padding: 10px 0; font-size: 16px; color: #666; }
.form .form-lis input.data { background: #ffffff; border: 0; border-bottom: 1px #d3d3d3 solid; font-size: 16px; }
.form .form-lis textarea.data { background: #ffffff; border: 0; border-bottom: 1px #d3d3d3 solid; font-size: 16px; }
.form .form-lis select.data {  background: #ffffff; border: 0; border-bottom: 1px #d3d3d3 solid; font-size: 16px; }
.form .form-lis .data-no-border {  background: #ffffff; width: calc(100% - 110px); margin-left: 110px; display: block; padding: 13px; font-size: 16px; color: #666; line-height: 1.6em; }
.form .note .btn-reset { padding: 5px 10px; background-color: #f77676; border-radius: 3px; color: #ffffff; }
.form .note .btn-reset:hover { background-color: #b93e3e; }

.form .form-lis.qa-list { display: block; }
.form .form-lis.qa-list .title { width: 100%; text-align: left;}
.form .form-lis.qa-list .data { margin-left: 120px; font-size: 14px; width: calc(100% - 120px); }

.botton-m { text-align: center; font-size: 16px; margin-top: 10px; padding: 10px 0 20px 0;}
.botton-m a { display: inline-block; color: #ffffff; padding: 5px 15px; font-size: 16px; border-radius: 3px;}
.botton-m a.left { background: #666345; margin-right: 5px; }
.botton-m a.left:hover { background: #a2a865;}
.botton-m a.mid { background: #000000; margin-right: 5px;}
.botton-m a.mid:hover { background: #a2a865;}
.botton-m a.right { background: #000000; border-radius: 3px; }
.botton-m a.right:hover { background: #a2a865; }

.botton-m button { display: inline-block; color: #ffffff; padding: 5px 15px; font-size: 16px; border-radius: 3px;}

.botton-m button.right { background: #000000; border-radius: 3px; }
.botton-m button.right:hover { background: #a2a865; }

.point-give { display: flex; line-height: 32px; margin-bottom: 10px;}
.point-give label { width: 120px; flex: none;}
.point-give input { flex: 1; margin-right: 5px; border-radius: 4px; border: 1px #eaeaea solid; text-align: center;}
.point-give button { width: 100px; flex: none; margin: 0; line-height: 32px; padding: 0 5px; }

/* login */
.abgne_tab { background: url(../image/cart-bg.jpg); max-width: 550px; margin: 0px auto; }

ul.tabs {  width: 100%; list-style: none; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; margin: 0; padding: 0; }
ul.tabs li { position: relative; -webkit-flex: 1; flex: 1; text-align: center; font-size: 14px; }
ul.tabs li a { display: block;  background: #e1e1e1;  padding: 10px 5px; color: #545035; text-decoration: none; border: 1px #e1e1e1 solid;  border-bottom: 0; }
ul.tabs li a:hover { background: none; border: 1px #CCCCCC solid; border-bottom: 0; }
ul.tabs li.active a { background: none;  border: 1px #CCCCCC solid; border-bottom: 0; }
ul.tabs li a img { height: 24px; width: auto;  padding-right: 5px;}
div.tab_container {  clear: left; width: 100%; border-top: none; border: 1px #CCCCCC solid; border-top: 0; }
div.tab_container .tab_content { padding: 20px; }
div.tab_container .tab_content h2 { margin: 0 0 20px; font-size: 18px; text-align: center; font-weight: normal; }

.login-bg01 { padding: 20px; }
.login-bg01 h2 { margin: 0 0 20px; font-size: 18px; text-align: center; font-weight: normal; }
.page-box .login-bg { background: url(../image/login-img.png) top left no-repeat #ffffff; }

.login { padding: 0 0 20px 0; max-width: 360px; margin: 0 auto; }
.login .form-lis { font-size: 14px; line-height: 1.2em; padding: 0px 20px 10px 0; }
.login .form-lis .title { display: block; font-size: 16px; color: #333333; width: 70px; padding: 10px 7px; text-align: right;}
.login .form-lis .data { border: 1px #c2c2c2 solid; display: block; padding: 10px 7px; font-size: 16px; color: #333333; }
.login .form-lis input.data { font-size: 14px; width: calc(100% - 80px);  margin-left: 80px;}
.login .form-lis textarea.data { font-size: 14px;}

.login-btns { text-align: center; max-width: 400px; margin: 0 auto;}
.login .btn a { background: #272727; color: #ffffff; border: 0; font-size: 14px;}
.login .btn a:hover { background: #858052;}
.login .btn.login-btn { text-align: center; vertical-align: middle;}

.login .btn a.login { background-color: #1f1f1f; display: block;  text-align: center; line-height: 24px; font-size: 16px; width: 200px; padding: 10px 0; border-radius: 60px; border: 0; }
.login .btn a.login:hover { background-color: #8c8d5f; }

.member-form .btn-fb-login,
.member-form .btn-line-login { width: 100%; height: auto; }

.btn-fb-login { padding: 10px; display: inline-block; vertical-align: middle; margin-bottom: 10px;  background-color: #3b579d; color: #ffffff; font-size: 16px; text-align: center; border-radius: 12px; width: 140px; height: 65px; }
.btn-fb-login:hover { background-color: #47bbff; }
.btn-line-login { padding: 10px; display: inline-block; vertical-align: middle; margin-bottom: 10px; background-color: #00b900; color: #ffffff; font-size: 16px;
    text-align: center; border-radius: 12px; width: 140px;  height: 65px; }
.btn-line-login:hover { background-color: #5fdb40; }

.btn-signup { padding: 8px; display: inline-block; vertical-align: middle; margin-bottom: 10px; border: 1px #dadada solid; color: #272727; font-size: 16px; text-align: center; border-radius: 12px; width: 140px; height: 65px; line-height: 44px; }
.btn-signup:before { content: ''; display: inline-block;  width: 24px; height: 24px; margin: 0 5px 0 0; vertical-align: middle; background-position: center; background-repeat: no-repeat; background-size: contain; filter: brightness(0); }
.btn-signup.sigin:before { background-image: url(../image/icon-memb.svg); }
.btn-signup.password:before { background-image: url(../image/icon-privacy.svg); filter: brightness(0); }
.btn-signup:hover { background-color: #272727; border: 1px #272727 solid; color: #ffffff; }
.btn-signup:hover:before { filter: brightness(3);}

.btn-box { padding: 20px 0; text-align: center; }
.btn-box .btn-unmember { background-color: #525252; font-size: 16px; padding: 10px 25px; color: #ffffff;}
.btn-box .btn-unmember:hover { background-color: #b94848;}
.btn-box .btn-member { background-color: #141414; font-size: 16px;  padding: 10px 25px; color: #ffffff;}
.btn-box .btn-member:hover { background-color: #5f5f5f;}
.btn-box .btn-return { background-color: #315488; font-size: 16px;  padding: 10px 25px; color: #ffffff;}
.btn-box .btn-return:hover { background-color: #007adf;}

.btn-box .btn-login { background-color: #272727; font-size: 16px;  padding: 10px 25px; color: #ffffff;}
.btn-box .btn-login:hover { background-color: #878a02}

/* bookmark */
.bookmark { text-align: center; padding: 15px 0; margin: 15px 0 5px 0; }
.bookmark>span { font-size: 14px; color: #202020; display: inline-block; }
.bookmark a { background: #ffffff; font-size: 16px; display: inline-block; line-height: 33px; border: 0; padding: 0px 10px; color: #272727; margin: 0 5px; border-radius: 2px;
}

.bookmark a:hover { background: #ececec; }
.bookmark select { background: #ffffff; border: 0; border-bottom: 1px #cccccc solid; padding: 5px;  color: #81795A; margin: 0 2px; }
.bookmark .portal-pages { text-align: center; margin-top: 10px; }
.bookmark .portal-pages span { display: inline-block; color: #242424; font-size: 14px; padding-top: 10px; border-top: 1px #a59187 solid; min-width: 150px; }


/* footer */
footer { padding: 30px 10px 30px 10px; position: relative; z-index: 1;}
.foot-box { display: flex;}
.foot-link { padding-bottom: 10px; color: #292929; flex: 1;}
.foot-link a { color: #333333; padding: 10px 10px; font-size: 14px;}
.foot-link a:hover { color: #7f8550;}
.foot-line {  padding-bottom: 10px; border-bottom: 1px #ebebeb solid; margin-bottom: 10px; }
.foot-link a.store-log { background-image: url(../image/logo.svg); background-color: #333333; width: 60px; height: 24px; background-size: auto 50%; border-radius: 4px; background-position: center; background-repeat: no-repeat; display: inline-block; vertical-align: middle; }

/*
.foot-icon { height:18px; width:auto; padding-right:10px;}
*/
.footer-info { color: #333333;  margin: 0 auto; font-size: 14px; flex: 1; text-align: right; padding: 0px 0 0 0; }
.copyright { font-size: 12px;  text-align: right; color: #333333; flex: none; width: 370px; }

/* app */
.app-box { display: flex;}
.app-box  a.app-icon { flex: 1; display: block; margin: 0 5px;}
.app-box  a.app-icon:hover { opacity: 0.6;}

/* foot-icon */
.foot-icon { text-align: left; flex: none; width: 400px;}
.foot-icon a { display: inline-block; width: 24px; background-position: center; background-repeat: no-repeat; background-size: contain; margin: 0 3px; vertical-align: middle; }
.foot-icon a:before { content: ''; display: block; width: 100%; height: 0; padding-bottom: 100%;}
.foot-icon a.cs { width: auto; line-height: 22px; background-color: #313131; border-radius: 5px; font-size: 14px; color: #ffffff; padding: 0 15px; vertical-align: middle; }
.foot-icon br { display: none;}
.foot-icon a.cs:before { display: inline-block; width: 18px; padding-bottom: 24px; background-image: url(../image/icon-phone.png); background-position: center; background-repeat: no-repeat; background-size: contain; margin-right: 5px; vertical-align: middle; }

.foot-icon a.fb { background-image: url(../image/icon-01.svg);}
.foot-icon a.ig { background-image: url(../image/icon-02.svg);}
.foot-icon a.line { background-image: url(../image/icon-06.svg);}
.foot-icon a:hover { opacity: 0.6;}


.foot-icon a.app-icon { width: 77px;}
.foot-icon a.app-icon:before { padding-bottom: 32.71%; }
.foot-icon a.app-icon.andorid { background-image: url(../image/app-android.svg);}
.foot-icon a.app-icon.apple { background-image: url(../image/app-apple.svg);}

/* 框架 */
.col-box { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; margin: 0 -0.5%;
}

.content-box img {  max-width: 100%; width: auto; height: auto;}
.max-w860 { max-width: 860px; margin: 0 auto;}
.max-w640 { max-width: 640px; margin: 0 auto;}
.col-1 { width: 8.33%; margin: 0 0.5%; }
.col-2 { width: 15.66%; margin: 0 0.5%; }
.col-3 { width: 23.99%; margin: 0 0.5%; }
.col-4 { width: 32.32%; margin: 0 0.5%; }
.col-5 { width: 40.65%; margin: 0 0.5%; }
.col-6 { width: 48.98%; margin: 0 0.5%; }
.col-7 { width: 57.31%; margin: 0 0.5%; }
.col-8 { width: 65.64%; margin: 0 0.5%; }
.col-9 { width: 73.97%;  margin: 0 0.5%; }
.col-10 { width: 82.3%; margin: 0 0.5%; }
.col-11 { width: 90.63%; margin: 0 0.5%; }
.col-12 { width: 99%; margin: 0 0.5%;}

img.btn-icon { display: inline-block; width: 16px !important; height: auto; margin-right: 10px; vertical-align: middle; }

/***** 表單預設文字顏色設定 *****/
/* 通用 */
::-webkit-input-placeholder { color: #696969;}
::-moz-placeholder { color: #696969; }

/* firefox 19+ */
:-ms-input-placeholder { color: #696969; }

/* ie */
input:-moz-placeholder { color: #836363; }

/* webkit专用 */
#field2::-webkit-input-placeholder { color: #696969; }
#field3::-webkit-input-placeholder { color: #696969; background: lightgreen; text-transform: uppercase; }
#field4::-webkit-input-placeholder { font-style: italic; text-decoration: overline; letter-spacing: 3px; color: #696969; }

/* mozilla专用 */
#field2::-moz-placeholder { color: #696969; }
#field3::-moz-placeholder {  color: #696969; background: lightgreen; text-transform: uppercase; }
#field4::-moz-placeholder { font-style: italic; text-decoration: overline; letter-spacing: 3px;  color: #696969;}

/* checkout finish */
.checkout-finish-message { font-size: 16px; line-height: 1.6em; }
.checkout-finish-message span.heighit-light01 { color: #8a7c40; }
.checkout-finish-message a { color: #000000; font-weight: bold; padding: 0 5px;}

/* pop */
.pop { position: fixed; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.9); top: 0; right: 0; z-index: 996; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center;  justify-content: center; transition: all 0.5s ease; opacity: 0; visibility: hidden; }
.pop.open {  opacity: 1; visibility: visible; transition: all 0.5s ease; }
.pop-body { background-color: #ffffff; border-radius: 15px; max-width: 640px;  width: 80%;  max-height: 800px; height: 90%;  max-height: 480px; padding: 20px; overflow: hidden; position: relative;}

.pop-cont { overflow-y: auto; height: calc(100% - 10px); max-height: 710px;}
.pop-body h2 { text-align: center;}
.pop-body h3 { color: #727071; text-align: center;}
.pop .btn-close { display: block; width: 40px; height: 40px; background-image: url(../image/btn-close.png); background-size: cover; position: absolute; top: 20px; right: 20px; cursor: pointer; }
.pop .btn-close:hover { opacity: 0.8; }


/*top*/
.top {  position: fixed; right: -70px; bottom: 70px; width: 60px; height: 60px; border-radius: 99em; border: 5px #ffffff solid; box-shadow: 0 0 10px #9e9e9e; background-color: #222222; color: #ffffff; font-size: 14px; text-align: center;  z-index: 850; cursor: pointer; transition: all 0.3s ease; }
.top:hover {  background-color: #b32424; transition: all 0.3s ease; }
.top:before { content: ''; display: block; width: 12px; height: 12px;  margin: 7px auto 2px auto; background-image: url(../image/top-arrow.png); background-repeat: no-repeat; background-position: center; background-size: contain; }
button.copy-btn { background-color: #000000; color: #ffffff; width: 100px; }
.member-form .form-lis button.copy-btn { float: right;}

/* free cafe */
.join-memeber-float { position: fixed; left: 10px; bottom: 20px; z-index: 100; }
.join-memeber-float a { width: 120px; display: block;}
.join-memeber-float a img { max-width: 100%; height: auto;}

/* site-map */
.icon-site-map { width: 30px; height: 30px; position: absolute; right: 160px; top: 30px; background-position: center; background-repeat: no-repeat; background-size: contain; background-image: url(../image/icon-site-map.svg); opacity: 0.6; cursor: pointer; z-index: 50; transition: all 0.3s ease; display: none;}
.icon-site-map:hover { opacity: 1;}
header.down  .icon-site-map { top: 20px;}

.cart-box { position: fixed; right: 165px; top: 30px; cursor: pointer; z-index: 50;   }
.cart-box span:before { content: ''; display: block; width: 30px; height: 30px; background-position: center; background-repeat: no-repeat; background-size: contain; background-image: url(../image/icon-cart.svg);opacity: 0.6; transition: all 0.3s ease;}
.cart-box:hover span:before  { opacity: 1;}
header.down .cart-box { top: 20px;}
.cart-box span { display: block; width: 100%; height: 100%; position: relative;}
.cart-box span i { position: absolute; top: -15px; right: -15px; background-color: #b41b00; width: 20px; height: 20px; line-height: 20px; display: block; border-radius: 99em; color: #ffffff; font-size: 12px; text-align: center; font-style: normal; }


.site-map { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 50; display: none;}
.site-map-box { width: 100%; height: 100%; position: relative; padding-top: 100px; background-color: rgba(0, 0, 0, .3); transition: all 0.3s ease;  }
.site-map-box:before { background-color: rgba(0, 0, 0, 0.7 ); content: ''; display: block; position: absolute; top: 90px; height: calc(100% - 90px); left: 0; width: 100%;  z-index: 1; transition: all 0.3s ease; }

.site-map-box .menu-info { text-align: center; padding-right: 60px; position: relative; z-index: 10; transition: all 0.3s ease; }
.site-map-box .menu-info .list { width: 56px; color: #ffffff; display: inline-block; }
.site-map-box .menu-info .list.logo-space { width: 160px;}
.site-map-box .menu-info .list > div { display: flex; flex-wrap: wrap; font-size: 14px;}
.site-map-box .menu-info .list > div > span { display: block; text-align: center; color: #ffffff; width: 100%; flex: none;}
.site-map-box .menu-info .list > div a { display: block; text-align: center; color: #c7c684; width: 100%; flex: none;}
.site-map-box .menu-info .list > div > span:after,
.site-map-box .menu-info .list > div a:after { content: ''; display: block; margin: 8px auto; width: 10px; border-bottom: 1px #c2c2c2 solid;}
.site-map-box  span.arrow { background-color: #ffffff; width: 1px !important; height: 50px; display: block; margin: 10px auto; position: relative; border-bottom: 0;}
.site-map-box  span.arrow:before { content: '>';transform: rotate(-90deg); display: block; width: 10px; height: 10px; text-align: center; font-size: 22px; color: #ffffff; position: absolute; left: -19px; top: -6; }
.site-map-box  span.arrow:after { display: none !important;}
.site-map-box  .others-menu { position: absolute; right: 25px; top: 100px; font-size: 14px; color: #ffffff; z-index: 50; transition: all 0.3s ease; }
.site-map-box  .language-info { position: absolute; right: 97px; top: 100px; font-size: 14px; color: #ffffff; z-index: 50; transition: all 0.3s ease; }
.site-map-box  .member-bacord,
.site-map-box  .scan-bacord { display: none;}

.site-map.down .site-map-box  .others-menu,
.site-map.down .site-map-box  .language-info { top: 90px;  }
.site-map.down .site-map-box { padding-top: 90px;}
.site-map.down .site-map-box:before { top: 80px; height: calc(100% - 80px); }
.site-map .close-guided-tour { width: 100px; height: 100px; display: flex; align-items: center; justify-content: center; color: #ffffff; border: 1px #ffffff solid; font-size: 16px; position: absolute; top: calc(50% - 50px); left: calc(50% - 50px); z-index: 50; letter-spacing: 5px; border-radius: 99em; transition: all 0.3s ease; cursor: pointer; }
.site-map .close-guided-tour:hover { background-color: rgba(255, 255, 255, 0.2);}



header.down .header-member { top: 20px; }
.header-member { position: absolute; top: 30px; right: 110px; cursor: pointer; z-index: 50; width: 30px; height: 30px; transition: all 0.3s ease; background-image: url(../image/icon-member.svg); background-position: center; background-repeat: no-repeat; background-size: contain; opacity: 0.6;}
.header-member:hover {  opacity: 1;}
.header-member select { background-color: #252525; color: #ffffff; border: 0; font-size: 16px; border-radius: 3px; padding: 3px 5px; }
.header-member a { display: inline-block; background: #000000;  color: #d6d6d6; margin: 0 0 0 3px; border-radius: 99em; font-size: 14px; text-align: center; width: 30px;  line-height: 30px; }
.header-member a:hover {  background: #c90000; }


.overlay { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background-color: rgba(0, 0, 0, 0.3); z-index: 50; opacity: 0; visibility: hidden;}
.overlay.active { opacity: 1; visibility: visible;}



.owl-theme .item {
    /* 	height: 25rem; */
    text-align: center;
}
.owl-theme .item img {
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.carousel-wrapper {
    margin: auto;
    /*      position: relative; */
    /*      text-align: center; */
    /*      font-family: sans-serif; */
}
.owl-carousel .owl-nav {
    overflow: hidden;
    height: 0px;
}
.owl-theme .owl-dots .owl-dot.active span,
.owl-theme .owl-dots .owl-dot:hover span {
    background: #5110e9;
}

.owl-carousel .item {
    text-align: center;
}
.owl-carousel .nav-button {
    cursor: pointer;
    position: absolute;
    top: 40% !important;
}
.owl-carousel .owl-prev.disabled,
.owl-carousel .owl-next.disabled {
    pointer-events: none;
    opacity: 0.25;
}

.owl-carousel .owl-prev {
    left: 0px;
}
.owl-carousel .owl-next {
    right: 0px;
}

.owl-theme .owl-nav [class*=owl-] {
    color: #000000 !important;
    font-size: 39px !important;
    background: #ffffff;
    border-radius: 3px;
    opacity: .5;
}
.owl-carousel .prev-carousel:hover {
    background-position: 0px -53px;
}
.owl-carousel .next-carousel:hover {
    background-position: -24px -53px;
}

.owl-carousel .owl-item img {
    display: block;
    height: 100%;
    width: auto;
    min-width: 100%;
}