@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+TC:wght@100;300;400;500;600;&family=Barlow:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('bootstrap-icons.css');

/* 頁面淡入 */
@keyframes fadeOut {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

body.index { animation-duration: 3s; animation-name: fadeOut;  position: relative; }
body { background-color: #f0999a; padding-top: 78px; animation-duration: 2s; animation-name: fadeOut; color: #666;  margin: 0; font-family: 'Barlow', 'Noto Sans TC', bootstrap-icons, Microsoft JhengHei; font-weight: 400; position: relative; font-size: 14px; }
.index-body { max-width: 1400px; margin: 20px auto; }
.max-640px { max-width: 640px !important; margin: 0 auto; }

.w-full { width: 100%; flex: none !important;}
.w-200px { width: 200px; flex: none !important;}
.w-180px { width: 180px; flex: none !important;}
.w-160px { width: 160px; flex: none !important;}
.w-120px { width: 120px; flex: none !important;}
.w-100px { width: 100px; flex: none !important;}
.w-80px { width: 80px; flex: none !important;}
.w-60px { width: 60px; flex: none !important;}

a {  text-decoration: none; color: #333333;  transition: all 0.3s ease; }

header {  background: #ffffff; padding: 0 10px;  }
.logo a { width: 160px; display: block; }
img { max-width: 100%; width: auto;}
.text-right{ text-align: right; }
.font-red { color: #C60; }

.main-box { padding: 2em 10px; max-width: 1200px;  }
.my-qr-code { max-width: 180px; display: inline-block; margin: 20px 0; }

.page-title01 { text-align: center; color: #f0999a;  border-bottom: 1px #f0999a solid; margin:0 0 15px 0; padding: 0 0 10px 0; }

/* header */
header { background-color: #f0999a; position: fixed; top: 0; left: 0; right: 0; z-index: 900; height: 78px; transition: all 0.3s ease; }
header.down { height: 67px; }
header.down .logo a { width: 120px; }

header .navbar-collapse .navbar-nav { flex-direction:row; }
header .nav-item .dropdown-menu { border-radius: 0; background: #ffffff; }
header .nav-item .dropdown-menu li a {  color: #333333; padding: 8px 12px;  text-align: center;}
header .nav-item .dropdown-menu li a span { font-size: 0.6em; margin-left: 0.5em; }
header .nav-item .dropdown-menu li a:hover {  background-color: #002e5e; color: #ffffff;}
header .navbar-nav { margin-right: 70px; }

.wallpeper {min-height: 350px; border-radius: 12px; background-color: #ffffff;}


/*index*/
.index-sub-title { text-align: center; font-size: 36px; color: #867e50; font-weight: 400; font-style: italic; position: relative; vertical-align: bottom; padding-bottom: 50px; text-shadow: 0 0 5px rgba(255, 255, 255, 0.8); z-index: 10; }
.index-sub-title:before { content: ''; display: block; width: 80px; height: 5px; border-radius: 10px; background-color: #c4b85d; position: absolute; bottom: 30px; left: calc(50% - 40px); box-shadow: 0 0 10px rgba(255, 255, 255, 0.3);  z-index: 1; }
.index-sub-title span { font-size: 0.6em; margin-top: -7px; display: inline-block; vertical-align: middle; margin-right: 0.5em; color: #ea3939; font-weight: 300;}
.index-sub-title span:after { content: '/'; font-size: 1.4em; margin-left: 0.5em; display: inline-block; font-weight: 100;}

.i-major-team { padding: 100px 20px; position: relative; z-index: 10; }
.i-major-team:before { content: ''; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
}
.i-major-list { max-width: 1600px; margin: 0 auto; padding-bottom: 50px !important; z-index: 10; position: relative; }
.i-major-list ul { display: flex; flex-wrap: wrap; justify-content: center; padding-left: 0; }
.major-item { width: 100%; max-width: 300px; flex: none; margin:0 5px 30px 5px; padding-bottom: 30px; overflow: hidden; background-color: #333333;}
.major-item .photo { width: 100%; flex: none; background-position: center;  background-size: 100% auto; background-repeat: no-repeat; transition: all 0.6s ease;  overflow: hidden;}
.major-item:hover .photo { background-size: 105% auto; }
.major-item .photo a { display: block; width: 100%; height: 0; padding-bottom: 42%; }
.major-item h4 { font-size: 24px; padding: 15px 10px; font-weight: 400; color: #e7ec89; text-align: center; }
.major-item h4:after { content: '分析師'; margin-left: 5px; font-size: 12px; background: #91945e; color: #ffffff; padding: 3px 10px; margin-left: 10px; border-radius: 2px; font-weight: 400; vertical-align: middle;  }
.major-item .info span { display: block; text-align: left; padding-left: 20px; font-size: 16px; color: #e2deae; font-weight: 300;  }
.major-item .info span:before { content: '\F133'; margin-right: 10px; margin-bottom: 0; display: inline-block; vertical-align: middle; }

.major-item  .social-link { text-align: center; padding-top: 20px; }
.major-item  .social-link a { display: inline-block; font-size: 26px; line-height: 26px; width: 42px; height: 42px; padding: 10px 0; color: #ffffff; margin: 5px; border-radius: 4px; background: #d4cd92de; text-shadow: 0 0 10px rgba(80, 80, 38, 0.3);  }
.major-item  .social-link a:hover {  background-color: #af0320; box-shadow: 0 5px 15px rgba(0, 0, 0, .3);  }
.major-item  .social-link a:before { vertical-align: middle; } 


.i-btn-more { padding: 20px 0; position: relative; font-weight: 300; }
.i-btn-more a { display: block; width: 80px; margin: 0 auto; padding: 2px 5px; text-align: center; background-color: #fff; color: #b8b8b8; font-size: 16px; border: 1px #b8b8b8 solid; border-radius: 99em; }
.i-btn-more a:hover { background-color: #b8b8b8; color: #ffffff; }


/*
.major-item  .social-link a.line { background-color: #21a300; }
.major-item  .social-link a.youtube { background-color: #d31616; }
.major-item  .social-link a.facebook { background-color: #2c5ce0; }
.major-item  .social-link a.podcast { background-color: #b217d9; }
.major-item  .social-link a.phone { background-color: #ffae00; }
*/



.i-major-team .swiper-button-prev,
.i-major-team .swiper-button-next { text-shadow: 0 0 10px rgba(0, 0, 0, .8); padding: 10px; }

.i-pro-list { padding: 40px 0px; position: relative; display: flex; flex-wrap: wrap; list-style: none; margin: 0 -5px; }
.i-pro-list .video-item { background-color: #ffffff; }
.i-pro-list .video-item .photo { width: 100%; flex: none; background-position: center;  background-size: 100% auto; background-repeat: no-repeat; transition: all 0.6s ease;  overflow: hidden; border-radius: 8px; }
.i-pro-list .video-item .photo a { display: block; width: 100%; height: 0; padding-bottom: 100%; }
.i-pro-list .video-item h4 { font-size: 14px; font-weight: 500; text-align: left; margin: 0; padding: 10px 0px; line-height: 1.6em; }

.i-pro-list .list-item { width: calc(25% - 10px); flex: none; margin: 5px;}
.i-pro-list .list-item .photo { width: 100%; flex: none; background-position: center;  background-size: 100% auto; background-repeat: no-repeat; transition: all 0.6s ease;  overflow: hidden; border-radius: 8px; }
.i-pro-list .list-item .photo a { display: block; width: 100%; height: 0; padding-bottom: 100%; }
.i-pro-list .list-item h4 { font-size: 14px; font-weight: 500; text-align: left; margin: 0; padding: 10px 0px; line-height: 1.6em; height: 4em; overflow: hidden; }


.i-pro-list .Straight-item { width: 25%; flex: none;}
.i-pro-list .Straight-item .photo { width: 100%; flex: none; background-position: center;  background-size: auto 100%; background-repeat: no-repeat; transition: all 0.6s ease;  overflow: hidden; border-radius: 8px; }
.i-pro-list .Straight-item .photo a { display: block; width: 100%; height: 0; padding-bottom: 177%; }
.i-pro-list .Straight-item h4 { font-size: 14px; font-weight: 500; text-align: left; margin: 0; padding: 10px 0px; line-height: 1.6em; height: 4em; overflow: hidden; }


.i-pro-list-info { display: flex; font-size: 14px; }
.i-pro-list-info > div { width: auto; flex: none;  margin-left: 10px; text-align: right;}
.i-pro-list-info > div::before { content: '/'; margin-right: 5px; }
.i-pro-list-info div.price { font-size: 16px; flex: 1;  margin: 0; text-align: left; color: #1177bb; }
.i-pro-list-info div.price:before { content: ''; }

.i-pro-list .price-box { display: flex; flex-wrap: wrap; margin: 10px 0; font-size: 18px;  }
.i-pro-list .price-box .Original { flex: 1; padding-bottom: 2px; font-size: 16px; text-align: right; color: #838282; }
.i-pro-list .price-box .final { flex: 1; font-size: 20px; color: #1177bb; text-align: left; line-height: 24px; padding: 2px 0px; font-weight: 500; white-space:nowrap;}
.i-pro-list .price-box .final span { font-size: 14px; padding-right: 5px; color: #a5a5a5;  margin-left: 5px;text-decoration: line-through; float: right;}
.i-pro-list .price-box .stock { width: 100%; flex: none; color: #666; font-size: 14px; line-height: 24px; padding: 2px 10px; white-space:nowrap; text-align: center;}
.i-pro-list .price-box .g-coin { width: 100%; flex: none; background-color: #c1272d;  border-radius: 99em; color: #fff; padding: 2px 15px; font-size: 14px; line-height: 24px; text-align: center; white-space:nowrap; }
.i-pro-list .price-box .g-coin .bi-gold-coin { width: 24px; height: 24px; margin: -5px 5px 0 5px;  }

.pro-tab { padding: 5px 0; text-align: left; }
.pro-tab .badge { font-weight: 400; }

.i-live-broadcast { padding: 0; position: relative; }
.i-live-video { max-width: 1600px; margin: 0 auto; padding-bottom: 50px !important; z-index: 10; position: relative; }
.i-live-broadcast .video-item { background-color: #ffffff; }
.i-live-broadcast .video-item .photo { width: 100%; flex: none; background-position: center;  background-size: cover; background-repeat: no-repeat; transition: all 0.6s ease;  overflow: hidden; border-radius: 8px; }
.i-live-broadcast .video-item .photo a { display: block; width: 100%; height: 0; padding-bottom: 100%; }
.i-live-broadcast .video-item h4 { font-size: 14px; font-weight: 500; text-align: left; margin: 0; padding: 10px 0px; line-height: 1.6em; min-height: 4.5em; }

.i-live-broadcast .swiper { max-width: 1040px; margin: 0 auto; padding-bottom: 50px; }
.i-live-broadcast .swiper-wrapper .swiper-pagination-bullet { bottom: -10px !important; }

.i-daily-picks { padding: 100px 20px; position: relative;}
.i-daily-picks:before { content: ''; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
    z-index: 1; }
.i-daily-list { max-width: 1600px; margin: 0 auto; padding-bottom: 50px !important; z-index: 10; position: relative; }
.i-daily-picks .daily-item { background-color: #ffffff;  }
.i-daily-picks .daily-item .photo { width: 100%; flex: none; background-position: center;  background-size: 100% auto; background-repeat: no-repeat; transition: all 0.6s ease;  overflow: hidden; border-radius: 8px;}
.i-daily-picks .daily-item .photo a { display: block; width: 100%; height: 0; padding-bottom: 100%; }
.i-daily-picks .daily-item .photo:hover { filter: brightness(1.6); }
.i-daily-picks .daily-item h4 { font-size: 14px; font-weight: 500; text-align: left; margin: 0; padding: 10px 0px; line-height: 1.6em; min-height: 5em; }

.i-daily-picks .swiper { max-width: 1040px; margin: 0 auto;  padding-bottom: 50px;}
.i-daily-picks .swiper-wrapper .swiper-pagination-bullet { bottom: -10px !important; }



.bd-placeholder-img { text-anchor: middle; }

.sub-title { color: #7c7848; margin-bottom: 0.8em; padding-bottom: 0.5em; position: relative; }
.sub-title:after { content: ''; display: block; position: absolute; bottom: 0; left: 0; width: 100%; height: 4px; 
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#d3d38d+0,bcbcb8+100 */
    background: linear-gradient(to right,  #d3d38d 0%,#bcbcb8 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    }
.sub-title span { font-size: 0.6em; font-weight: 300; margin-left: 1em; color: #888888; }

/* index-line-chart */
.index-line-chart { max-width: 1600px; margin: 20px auto;}


/* breadcrumb */
.breadcrumb { max-width: 1300px; margin: -25px auto; background-color: #ffffff; border-radius: 0.5em; padding: 0.8em 1em;  box-shadow: 0 0 10px rgba(0, 0, 0, .1); position: relative; z-index: 10; }

/* page-main */
.page-main { background-image: url(../images/page-main.jpg); background-color: #f4f4f4; background-position: top center; background-repeat: no-repeat; background-size: 100% auto ; min-height: 300px; padding: 50px 10px; position: relative; z-index: 1; }
.page-box { box-shadow: 0 0 10px rgba(0, 0, 0, .3); }

/* form-signin */
.member-title { font-size: 36px; font-weight: 400; padding: 30px 10px 20px 10px; }
.member-title span { font-size: 0.5em; margin-left: 1em; color: #c0c0c0; }
.form-signin { max-width: 330px; width: 100%; margin: auto; padding: 30px 10px 50px 10px; }
.form-signin input[type="email"] { margin-bottom: -1px; border-bottom-right-radius: 0; border-bottom-left-radius: 0; }
.form-signin input[type="password"] { margin-bottom: 10px; border-top-left-radius: 0; border-top-right-radius: 0; }
.form-signin .form-floating label span { font-size: 0.8em; margin-left: 5px; color: #666666; }
.form-check { display: inline-block; padding: 0.375rem 0.75rem 0.375rem  2rem;}

/*header nav*/
header .menu-icon.navbar-toggler { border: 0; background-image: url(../images/menu.svg); background-repeat: no-repeat; background-position: center; }
header .nav-item { display: flex; flex-wrap: nowrap; align-items: center; font-family: Montserrat, 'Noto Sans TC'; position: relative;}
header .nav-item:before { content: ''; display: block; position: absolute; bottom: -16px; left: 0; height: 2px; width: 0; transition: all 0.3s ease; background-color: #a65858; }
header.down .nav-item:before { bottom: -5px; }
header .nav-item:hover:before, 
header .nav-item.active:before{ width: 80%; left: 10%; }
header .nav-item > a { padding: 5px 25px;  text-align: center;  text-decoration: none;  display: block; color: #fff; font-size: 14px; font-weight: 500; text-align: center; }
header .nav-item > a img { height: 24px; width: auto; display: inline-block; width: 0 auto 5px auto; }
header .nav-item > a:hover,
header .nav-item > a:focus {  color: #ffe6e6; }
header .nav-item > a span { display: block;  font-size: 15px; }
header .navbar-toggler-icon { color: #fff;}
header .navbar-toggler-icon:before { display: inline-block; content: '\F479'; }

header .nav-item li a.btm-cart { position: relative; }
header .nav-item li a.btm-cart span.tab-note { position: absolute; top: 10px; right: 0px; width: 18px; line-height: 18px; text-align: center; background-color: #ba0000; color: #ffffff; font-size: 13px; border-radius: 99em; padding:0 2px; }

header .top-search-box { display: flex; }
header .top-search-box .input-group { max-width: 240px; height: 30px; border-radius: 99em; overflow: hidden; } 
header .top-search-box .input-group input.form-control,
header .top-search-box .input-group button { line-height: 30px; height: 30px; border: 0; padding: 5px; }
header .top-search-box .input-group input.form-control { padding: 5px 15px; }
header .top-search-box .input-group button { background-color: transparent;  padding: 5px 15px; color: #fff; padding: 0 5px; font-size: 20px;}
header .top-search-box .input-group button:hover { color: #760000; box-shadow: none;  }

.banner-box.mb {   display: none; }

header .nav-item .dropdown-toggle::after { font-size: 20px; position: absolute; bottom: 0; left: calc(50% - 10px); }
header .nav-item .dropdown-menu { width: 180px; top: 60px !important; left: calc(50% - 90px) !important; inset: auto; }
header .navbar-toggler { padding: 0 5px; }


  /* .swiper 套件調整 */
.swiper { width: 100%; }
.swiper-wrapper { height: auto !important; margin: 0; padding: 0; }  
.swiper-slide {  text-align: center;  font-size: 18px;  }
.swiper-slide img {  display: block;  width: 100%; height: auto;  object-fit: cover;}
.swiper-button-prev.swiper-button-disabled, 
.swiper-button-next.swiper-button-disabled {  pointer-events: all !important; }
.swiper-pagination-bullet {
    width: 20px !important;
    height: 5px !important;
    border-radius: 99em !important;
    background-color: #272727 !important;
    box-shadow: 0 0 5px rgba(0, 0, 0, .3);
    transition: all 0.3s ease;
}
.swiper-button-prev, 
.swiper-button-next { width: 40px !important; height: 40px !important; background-size: cover; color: #ffffff !important; text-shadow: 0 0 10px rgba(0, 0, 0, .1); font-family: bootstrap-icons; top: 42% !important; }
.swiper-button-next:after {content: '' !important;  }
.swiper-button-prev:after {content: '' !important;  }
.swiper-button-next { background-image: url(../images/swipeNextArrow.png); right: 0px !important; }
.swiper-button-prev {  background-image: url(../images/swipePrevArrow.png);  left: 0px !important; }

.index-maim-pro { margin-bottom: 20px; }
.index-maim-pro .i-pro-list .list-item { width: calc(25% - 10px); }

/* icon-groups */
.icon-groups {  margin-bottom: 25px; text-align: center; }
.icon-groups.top-menu { overflow-x: auto; white-space:nowrap; text-align: center;} 
.icon-groups a.icon-item { display: inline-block; margin: 5px 10px; text-align: center; }
.icon-groups a.icon-item img { width: 55px; height: auto; margin-bottom: 5px; }
.icon-groups a.icon-item span { font-size: 16px; display: block; }

.icon-groups .category-title { background-color: #f0999a; color: #ffffff; font-size: 16px; padding: 10px; margin: 10px 0; border-radius: 99em; }
.icon-groups .group-time-limit { text-align: center; font-size: 22px; color: #782121; }

.icon-groups.ddpay { text-align: center;  border-bottom: 1px #F0999A solid; margin: 0 0 20px 0; padding-bottom: 10px; }
.modal-header .icon-groups { width: calc(100% + 30px); flex: none; margin-bottom: 30px; border-bottom: 1px #F0999A solid; margin: 0 -15px 10px -15px; text-align: center; }



/* about-info */
.about-info { display: flex; padding: 50px; background-color: #5a5a53; background-position: center; background-repeat: no-repeat; background-size: cover; color: #ffffff; margin-bottom: 30px; min-height: 250px; align-items: center;position: relative; }
.about-info:before { content: ''; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 1;
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+52,000000+100&1+0,1+52,0+100 */
    background: linear-gradient(to right,  rgba(0,0,0,1) 0%,rgba(0,0,0,1) 40%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    } 
.about-info > div { position: relative; z-index: 20; }    
.about-info.d-left { justify-content: left; }
.about-info.d-right {justify-content: right; }
.about-info.d-right:before { content: ''; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 1;
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+52&0+0,1+52,1+100 */
    background: linear-gradient(to right,  rgba(0,0,0,0) 0%,rgba(0,0,0,1) 60%,rgba(0,0,0,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    } 

.about-info h3 { font-weight: 300; position: relative; color: #00c0de; padding: 0 0 30px 0; margin: 0 0 30px 0; }
.about-info h3:before {  content: ''; display: block; width: 100px; height: 2px; background-color: #00c0de; position: absolute; bottom: 0; left: calc(50% - 50px);  }

.about-logo { padding: 30px; }
.about-logo img { max-width: 360px; width: 100%; }
.m-w320 { max-width: 320px; }

.content-ol { margin: 30px 0; }
.content-box { padding: 3em; }

/* company-info  */
.company-info { padding: 2em 1.5em; border: 1px #bebebe solid; line-height: 2em; font-weight: 300; background-position: center; background-repeat: no-repeat; background-size: cover; background-image: url(../images/contactimg.jpg); color: #ffffff; border-radius: 4px; box-shadow: 0 0 10px rgba(0, 0, 0, .1); }
.company-info .company-title { text-align: center; color: #a2c7cc; padding-bottom: 40px; position: relative; }
.company-info .company-title:before { content: ''; width: 100px; height: 5px; border-radius: 4px; background-color: #59939c; position: absolute; bottom: 15px; left: calc(50% - 50px); } 
.company-info i { margin-right: 10px; }
.payment-title { margin: 0.5em 0 1em 0; color: #919051; }
.payment-title i { margin-right: 0.5em; }
.payment-title .note { font-size: 0.8em; color: #d50000; }

/* stock-list */
.stock-list .photo { width: 100%; background-position: center; background-repeat: no-repeat; background-size: cover;  }
.stock-list .photo a { display: block; width: 100%; height: 0; padding-bottom: 56.6%; }
.stock-list .card { overflow: hidden; }

/* page-banner  */
.page-banner { padding: 100px 0; background-color: #121f47; background-position: center; background-repeat: no-repeat; background-size: cover;}
.page-banner-title { margin: 0 auto; max-width: 1300px; color: #ffffff; }
.page-banner-title h1 { font-size: 36px; margin: 0; padding: 0; text-align: center; font-weight: 300;  }
.page-banner-title h1 span { font-size: 0.6em; color: #cdc176; font-weight: 200;  }

/* search-bar */
.search-bar { display: flex; align-items: center; justify-content: center; padding: 0; margin: 0; }
.search-bar .form-control { border: 0;}
.search-bar button.btn { background-color: transparent; border: 0; color: #ffffff; font-size: 24px;  }
.search-bar button.btn:hover {  color: #00c0de; }

.product-search-box { display: flex; align-items: center; justify-content: center; padding: 10px 15px; margin: 10px 0; background-color: #f0999a; border-radius: 8px; }
.product-search-box input.search-text { border-radius: 4px 0 0 4px;  border: 0; padding: 5px 10px; flex: 1; margin-right: 5px;  }
.product-search-box button.search-btn { width: 80px; flex: none; border-radius: 0 4px 4px 0; padding: 5px 5px; background-color: #cb7677; color: #fff; }
.product-search-box button.search-btn:hover { background-color: #a44c4c; } 

.note-item { border: 1px #f2e9e9 solid; padding: 10px; text-align: center; font-size: 18px; margin-bottom: 10px; border-radius: 4px; }

/* product */
.product-lis { margin: 0 -15px; padding: 0 0px 20px 0px; list-style: none; display: flex; flex-wrap: wrap;}
.product-lis.max-3row li { width: calc(33.3% - 30px); }
.product-lis li.max-3row .dd-eat-pro-lsit-info .praise { font-size: 13px; }
.product-lis li { flex: none; width: calc(25% - 30px); margin: 15px; position: relative; overflow: hidden; padding-bottom: 10px; }

.product-lis.video-pro-list { margin: 0; }
.product-lis.video-pro-list li { flex: none; width: calc(25% - 10px); margin: 15px 5px; 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; position: relative; z-index: 5;}
.product-lis li .photo a { display: block; width: 100%; height: 0;  padding-bottom: 100%;}
.product-lis li .photo .time-reciprocal { position: absolute; top: 50%; left: 0; width: 100%; color: #ffffff; text-shadow: 0 0 5px rgba(0, 0, 0, .8); text-align: center; font-size: 36px; }
.product-lis li .photo .time-reciprocal span { display: block; width: auto; padding: 5px 10px; background-color: #f9fd00; color: #000; font-size: 14px; font-weight: bold; margin: 0px auto 0 auto; text-shadow: none;}
.product-lis li .photo.video a { display: block; width: 100%; height: 0;  padding-bottom: 177.8%;}
.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: 18px; 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 .store-tab { font-size: 18px; padding: 5px 0; color: #333; }
.product-lis li .pro-tool { display: flex; justify-content: space-between; margin: -27px auto 0 auto; position: relative; z-index: 10; max-width: 270px; }

.pro-tool button {  background-color: #fff; color: #888;  border-radius: 99em; border: 1px #f0999a solid; padding: 3px 10px; margin: 0 3px; font-size: 12px; box-shadow: 0 0 5px rgba(0, 0, 0, .1); transition: all 0.3s ease;}
.pro-tool button:before { content: ''; width: 22px; height: 22px; display: block;  background-position: center; background-repeat: no-repeat; background-size: cover; transition: all 0.3s ease;}
.pro-tool button:hover { background-color: #f0999a; }
.pro-tool button:hover::before  { filter: brightness(10); }
    .pro-tool button.favo:before { background-image: url(../images/icon-favorite.svg); }
    .pro-tool button.favo:after { content: '蒐藏'; }
    .pro-tool button.great-group:before { background-image: url(../images/icon-creat-group.svg); }
    .pro-tool button.great-group:after { content: '開團'; }
    .pro-tool button.fallow:before { background-image: url(../images/icon-fallow.svg); }
    .pro-tool button.fallow:after { content: '跟團'; }
    .pro-tool button.buy:before { background-image: url(../images/icon-just-buy.svg); }
    .pro-tool button.buy:after { content: '直購'; }
    .pro-tool button.booking:before { background-image: url(../images/icon-order.svg); }
    .pro-tool button.booking:after { content: '預約'; }
    .pro-tool button.consult:before { background-image: url(../images/icon-consult.svg); }
    .pro-tool button.consult:after { content: '諮詢'; }
    .pro-tool button.share:before { background-image: url(../images/icon-share.svg); }
    .pro-tool button.share:after { content: '分享'; }


.pro-detail-tool { padding: 10px; margin-bottom: 15px; border-bottom: 1px #f0999a solid; text-align: center; width: 100%; }
.pro-detail-tool button {  background-color: #fff; color: #888;  padding: 3px 10px; margin: 0 3px; font-size: 14px; transition: all 0.3s ease;}
.pro-detail-tool button:before { content: ''; width: 32px; height: 32px; display: block;  background-position: center; background-repeat: no-repeat; background-size: cover; transition: all 0.3s ease;}
.pro-detail-tool button:hover { background-color: #f0999a; }
    .pro-detail-tool button:hover::before  { filter: brightness(10); }
    .pro-detail-tool button.favo:before { background-image: url(../images/icon-favorite.svg); }
    .pro-detail-tool button.favo:after { content: '蒐藏'; }
    .pro-detail-tool button.great-group:before { background-image: url(../images/icon-praise.svg); }
    .pro-detail-tool button.great-group:after { content: '推薦'; }
    .pro-detail-tool button.fallow:before { background-image: url(../images/icon-fallow.svg); }
    .pro-detail-tool button.fallow:after { content: '跟團'; }
    .pro-detail-tool button.buy:before { background-image: url(../images/icon-just-buy.svg); }
    .pro-detail-tool button.buy:after { content: '直購'; }
    .pro-detail-tool button.booking:before { background-image: url(../images/icon-order.svg); }
    .pro-detail-tool button.booking:after { content: '預約'; }
    .pro-detail-tool button.consult:before { background-image: url(../images/icon-consult.svg); }
    .pro-detail-tool button.consult:after { content: '諮詢'; }
    .pro-detail-tool button.share:before { background-image: url(../images/icon-share.svg); }
    .pro-detail-tool button.share:after { content: '分享'; }

    
.product-lis li .brief { font-size: 14px; 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; margin: 10px 0; font-size: 18px;  }
.product-lis li .price-box .Original { flex: 1; padding-bottom: 2px; font-size: 16px; text-align: right; color: #838282; }
.product-lis li .price-box .final { flex: 1; font-size: 20px; color: #1177bb; text-align: left; line-height: 24px; padding: 2px 0px; font-weight: 500; white-space:nowrap;}
.product-lis li .price-box .final span { font-size: 12px; padding-left: 5px; color: #a5a5a5;}
.product-lis li .price-box .stock { color: #666; font-size: 14px; line-height: 24px; padding: 2px 10px; white-space:nowrap;}
.product-lis li .price-box .g-coin { background-color: #c1272d;  border-radius: 99em; color: #fff; padding: 2px 15px; font-size: 14px; line-height: 24px; width: 100%; flex: none; text-align: center; white-space:nowrap; }
.product-lis li .price-box .g-coin .bi-gold-coin { width: 24px; height: 24px; margin: -5px 5px 0 5px;  }

.product-lis li .price { font-size: 18px; color: #1177bb; text-align: right;}
.product-lis li .s-price { font-size: 18px; color: #1177bb; text-align: right;}
.product-lis li .s-price span { font-size: 14px; padding-right: 5px; color: #a5a5a5;}

.group-data button.btn-leader { width: 100%; font-size: 16px; border-radius: 99em; padding: 3px 10px; }
.group-data button.btn-leader:before { content: '\F8F6'; vertical-align: middle; margin-right: 5px; }
.group-data button.btn-leader.nobody { background-color: #878787; pointer-events: none; }
.leader-list { position: absolute; right: 0; bottom: -10px; width: 100%; max-width: 320px; padding: 0 10px 10px 10px; max-height: 320px; height: 100%; background-color: #f1f0ea; box-shadow: 0 0 10px rgba(0, 0, 0, .1); opacity: 0; pointer-events: none; transition: all 0.3s ease; z-index: 500;  }
.leader-list.active { bottom: 0; opacity: 1; pointer-events: visible; } 
.leader-list button.btn-close { width: 24px; height: 24px; float: right; margin:0 -5px 0px 0; }
.leader-list button.btn-close:hover { background-color: transparent; opacity: 1; }
.leader-list .leader-body { width: 100%;  overflow-y: auto; max-height: calc(100% - 30px); }

.lead-item { display: flex; flex-wrap: wrap; width: 100%; margin-top: 10px; }
.lead-item .leader { width: auto; flex: none; display: flex; align-items: center; margin-right: 5px; }
.lead-item .leader:before { content: ''; width: 18px; height: 18px; flex: none; display: inline-block; background-image: url(../images/icon-creat-group.svg); background-repeat: no-repeat; background-size: cover; margin-right: 5px; }
.lead-item .leader .cover { width: 50px; height: 50px; display: inline-block; background-image: url(../images/icon-shot-mag.svg); background-color: #fff; background-repeat: no-repeat; background-size: cover; border-radius: 99em; box-shadow: 0 0 10px rgba(0, 0, 0, .1); }
.lead-item .group-cont { flex: 1; }
.lead-item .group-cont .leader-name { padding: 0px 10px; border: 1px #e3595d solid; border-radius: 99em; background-color: #fff; box-shadow: 0 0 5px rgba(0, 0, 0, .2) inset;}
.lead-item .group-cont .group-info { padding: 5px 0 0 0; font-size: 13px; margin-top: 0 !important; }
.lead-item .group-cont span { float: right; color: #fd5b5b; }

/* product 條列 */
.product-lis.list-format { display: block; margin: 10px 0; }
.product-lis.list-format li { width: 100%; margin: 0 0 10px 0; min-height: 130px; position: relative; padding: 0 0 40px 130px; border-bottom: 1px #e4e4e4 dotted;}
.product-lis.list-format li:after { content: "."; display: block; height: 0; clear: both; visibility: hidden;}
/* Hides from IE-mac \*/
* html .product-lis.list-format li { height: 1%;}
.product-lis.list-format li .pro-tool {  margin: 5px 0 10px 0; justify-content: right; width: 100%; max-width: 100%; }
.product-lis.list-format li .photo { width: 120px; position: absolute; left: 0; top: 0;}
.product-lis.list-format li h3 a { height: auto; overflow: visible;}
.product-lis.list-format li .brief { display: block; height: auto; overflow: visible;}
.product-lis.list-format li .price-box .g-coin { width: auto; flex: none; }

/*
.product-lis.list-format li .price-box { position: absolute; left: 135px; bottom: 10px; width: calc(100% - 320px);}
.product-lis.list-format li .add-to-order { width: 160px; position: absolute; right: 0; bottom: 10px;}
*/

.lsit-style-change { padding: 0; margin-left: 20px; text-align: right; }
.lsit-style-change label { width: 120px; text-align: center; font-size: 14px; line-height: 30px; color: #333333; display: inline-block; vertical-align: middle;  margin-right: 3px; border-right: 1px #eaeaea solid;}
.lsit-style-change > div { width: 36px; height: 36px; display: inline-block; vertical-align: middle; margin-right: 8px; background-position: center; background-repeat: no-repeat; background-size: cover; cursor: pointer; filter: grayscale(1); transition: all 0.3s ease;}
.lsit-style-change > div:last-child { margin-right: 0; }
.lsit-style-change > div:hover, .lsit-style-change > div.active { filter: grayscale(0);}
.lsit-style-change > div.list { background-image: url(../images/icon-list-style-list.svg);}
.lsit-style-change > div.lumpy { background-image: url(../images/icon-list-style-lumpy.svg);}


.product-lis li .dd-eat-pro-lsit-info,
.dd-eat-pro-lsit-info { padding: 0;}
.product-lis li .dd-eat-pro-lsit-info .price,
.product-info .dd-eat-pro-lsit-info .price { color: #666666; font-size: 18px; text-align: left; margin-bottom: 5px; padding: 0; min-height: auto; }
.product-lis li .dd-eat-pro-lsit-info .price:before,
.product-info .dd-eat-pro-lsit-info .price:before { content: ''; display: inline-block; width: 30px; height: 30px; margin-right: 10px; background-image: url(../images/icon-coin-gold.svg); background-position: center; background-repeat: no-repeat; background-size: cover; vertical-align: middle; margin-top: -5px; } 
.product-lis li .dd-eat-pro-lsit-info .praise,
.product-info .dd-eat-pro-lsit-info .praise { color: #C1272D; font-size: 16px; margin-bottom: 5px;}
.product-lis li .dd-eat-pro-lsit-info .praise:before,
.product-info .dd-eat-pro-lsit-info .praise:before  { content: ''; display: inline-block; width: 24px; height: 24px; margin: 0 10px 0 5px; background-image: url(../images/icon-praise-red.svg); background-position: center; background-repeat: no-repeat; background-size: cover; vertical-align: middle; margin-top: -5px; } 

.add-to-order { color: #ffffff; text-align: center; display: flex; margin-top: 10px; padding-bottom: 3px;}
.add-to-order a {  display: block; font-size: 14px; color: #000000; border-radius: 99em; line-height: 1.6em; padding: 4px; flex: 1; } 
.add-to-order a.add-favourite { margin-right: 3px; background-color: transparent; background-image: url(../images/icon-favourite.svg); background-position: center; background-repeat: no-repeat; background-size: cover; width: 30px; flex: none; opacity: 0.8; }
.add-to-order a.add-favourite.have { background-image: url(../images/icon-favourite-red.svg);}
.add-to-order a.add-order { margin-left: 5px; background-color: #ffffff; background-image: url(../images/icon-cart.svg); background-position: 10px center; background-repeat: no-repeat; background-size: auto 70%; opacity: 0.8; padding-left: 20px; box-shadow: 0 2px 0 #e9e9e9;}
.add-to-order a.add-order:hover { background-color: #f1f1f1;}
.add-to-order a.add-go-now { margin-left: 5px; background-color: #C1272D; color: #fff; }
.add-to-order a.add-go-now:hover { background-color: #db282e;}

.add-to-order a.remove-favourite { margin-left: 3px; background-color: transparent; background-image: url(../images/icon-del.svg); background-position: center; background-repeat: no-repeat; background-size: 90% auto; width: 30px; flex: none; opacity: 1; transition: all 0.3s ease; }
.add-to-order a.remove-favourite:hover { opacity: 0.6; }


/* dd-plus-tool */
.dd-plus-tool {text-align: center; padding: 10px; border-top: 1px #F0999A solid; }
.dd-plus-tool a { display: inline-block; width: 36px; height: 36px; line-height: 36px; margin: 0 5px; vertical-align: middle; }
.dd-plus-tool a img { width: 100%; height: auto; }
.dd-plus-tool a i { font-size: 36px; vertical-align: middle; color: #F0999A; }
.dd-plus-tool a.go-now { background-color: #F0999A; width: 120px; color: #ffffff; border-radius: 99em; padding: 5px 12px; margin-left: 5px; line-height: 26px; font-size: 16px; }
.dd-plus-tool a.go-now:hover { background-color: #c14c4e; }

/*  social-link */
.social-link { padding: 15px 0; text-align: center; border-top: 1px #F0999A solid; }
.social-link a { display: inline-block; width: 48px; height: 48px; line-height: 48px; font-size: 28px; padding: 10px; background-color: #000; color: #ffffff; margin: 0 5px; border-radius: 6px; vertical-align: middle; } 
.social-link a img.titok { width: 28px; height: auto; }

/* 點數 */
.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 */

}

.not-qualified { font-size: 18px; color: #ffffff; text-align: center; padding: 15px; background-color: #e6a7a7; border-radius: 8px; margin: 15px 0; }

.point-give { display: flex; flex-wrap: wrap; line-height: 32px; margin-bottom: 10px;}
.point-give .point-g { padding: 0 10px; }
.point-give .note { width: 100%; flex: none; padding: 0; color: #dd6e6e; text-align: center; }

/* 列表呈現 */
.condition-list { text-align: center; display: flex; flex: 1; background-color: #f0999a; border-radius: 99em; overflow: hidden; }
.condition-list span { flex: 1; padding: 8px 0px;  cursor: pointer; font-size: 16px; transition: all 0.3s ease; color: #fff; border-radius: 99em; font-weight: 500; }
.condition-list span:hover,
.condition-list span.active { background-color: rgb(195, 126, 126); }


/* product 條列 */
.product-lis.list-format { display: block; margin: 10px 0; }
.product-lis.list-format li { width: 100%; margin: 0 0 10px 0; min-height: 180px; position: relative; padding: 0 0 15px 180px; border-bottom: 1px #e4e4e4 dotted; display: flex; flex-wrap: wrap;}
.product-lis.list-format li:after { content: "."; display: block; height: 0; clear: both; visibility: hidden;}
/* Hides from IE-mac \*/
* html .product-lis.list-format li { height: 1%;}

.product-lis.list-format li .photo { width: 170px; position: absolute; left: 0; top: 0;}
.product-lis.list-format li h3 a { height: auto; overflow: visible;}
.product-lis.list-format li .brief { display: block; height: auto; overflow: visible;}

.product-lis.list-format li .pro-tool { position: absolute; right: 0; top: 0; }
.product-lis.list-format li .format-md { flex: 1; margin: 0 10px; } 
.product-lis.list-format li .format-right { width: auto; flex: none;  padding-top: 60px; } 
/*
.product-lis.list-format li .price-box { position: absolute; left: 135px; bottom: 10px; width: calc(100% - 320px);}
.product-lis.list-format li .add-to-order { width: 160px; position: absolute; right: 0; bottom: 10px;}
*/


/* Comment 評論 */
.comment-list { margin-bottom: 30px; }
.comment-box { border: 1px #F0999A solid; padding: 16px; border-radius: 12px; box-shadow: 0 0 12px rgba(0, 0, 0, .1); margin-bottom: 10px; }
.comment-box .profile { display: flex; flex-wrap: wrap; margin-bottom: 12px; }
.comment-box .profile .mug-shot { width: 60px; height: 60px; flex: none; border-radius: 99em; background-position: center; background-repeat: no-repeat; background-size: cover; background-color: #f0999a; }
.comment-box .profile .info { flex: 1; margin-left: 10px; }
.comment-box .profile .info .name { font-size: 16px; color: #333333; }
.comment-box .profile .info .star span { width: 26px; height: 26px; display: inline-block; vertical-align: middle; margin-right: 6px; background-image: url(../images/icon-praise-red.svg); background-position: center; background-size: cover; }
.comment-box .comment-cont { font-size: 16px; line-height: 1.6em; }
.comment-box .time { text-align: right; font-size: 16px; margin-top: 5px; color: #F0999A; }


/* 產品列表購物車小視窗 */
.add-to-cart-box { background-color: rgba(238, 238, 238, 0.95); padding: 10px; position: absolute; bottom: -20px; right: 0; width: 100%; box-shadow: 0 2px 0 #e9e9e9; width: 100%; opacity: 0; visibility: hidden; transition: all 0.3s ease; display: flex; flex-wrap: wrap;}
.add-to-cart-box.show { opacity: 1; visibility: visible; bottom: 0;}
.product-lis.list-format .add-to-cart-box { max-width: 414px; }
.add-to-cart-box .pro-spe { width: 100%; flex: none;}
.add-to-cart-box .pro-spe label {font-size: 12px; padding-top: 0;}
.add-to-cart-box .pro-spe span { background-color: #ffffff; display: inline-block; font-size: 12px; padding: 4px 6px;}
.add-to-cart-box .pro-spe span:hover, .add-to-cart-box .pro-spe span.active { background-color: #534035 ; border: 1px #534035 solid; }
.add-to-cart-box .pro-spe span.sold-out, .add-to-cart-box .pro-spe span.sold-out:hover { cursor: default; color: #dddddd; background-color: transparent; border:1px #dddddd solid;}
.add-to-cart-box .pro-spe select { border-radius: 4px; background-color: #ffffff; border: 1px #c7c7c7 solid; max-width: 100%; width: 100%; margin-bottom: 5px;  }
.add-to-cart-box .quantity-num {width: 100%; flex: none; }
.add-to-cart-box .quantity-num .select-title { font-size: 12px; padding-bottom: 5px;}
.add-to-cart-box .quantity-num .qtyInputBox span { width: 24px; height: 24px;}
.add-to-cart-box .qtyInputBox input { line-height: 24px; font-size: 16px; background-color: transparent;  }
.add-to-cart-btn-box { display: flex; width: 100%; flex: none;}
.add-to-cart-btn-box button { display: block; font-size: 12px; color: #000000; border-radius: 99em; line-height: 1.6em; padding: 4px; }
.add-to-cart-btn-box button.add-order { flex: 1; margin-right: 5px; background-color: #ffffff; opacity: 0.8; box-shadow: 0 2px 0 #e9e9e9; width: 100%;}
.add-to-cart-btn-box button.add-order:hover { background-color: #333333; color: #ffffff;}
.add-to-cart-btn-box .btn-close { display: block; width: 24px; height: 24px; flex: none; background-image: url(../images/btn-close.svg); background-position: center; background-repeat: no-repeat; background-size: cover; opacity: 0.6; transition: all 0.3s ease;}
.add-to-cart-btn-box .btn-close:hover { background-color: transparent; opacity: 1; transform: rotate(90deg);}

/* game-list */
.game-list .game-item { border: 2px #f0999a solid; border-radius: 12px; padding: 10px; margin: 10px 0; display: flex; flex-wrap: wrap; }
.game-list .game-item .mission-level { width: 62px; flex: none; margin-right: 10px; }
.game-list .game-item .mission-level img { width: 100%; height: auto; }
.game-list .game-item .game-info { flex: 1; color: #666; }
.game-list .game-item .game-info p { font-size: 16px;}
.game-list .game-item .game-info .coin { font-size: 14px; line-height: 24px; margin-bottom: 10px;  }
.game-list .game-item .game-info .coin img {  width: 24px; height: auto; margin-right: 5px; margin-top: -3px; }
.game-list .game-item .game-info .mission-box { flex: none; width: 100%; display: flex; }
.game-list .game-item .progress { flex: 1; height: 2.2em; font-size: 20px; background-color: #ffffff; border-radius: 99em; border: 2px #f0999a solid;}
.game-list .game-item .progress .progress-bar {  font-size: 18px; padding: 8px 5px;  }
.game-list .game-item .progress .progress-bar { background-color: #f0999a; }
.game-list .game-item button.goal { width: 100px; flex: none; display: flex; justify-content: center; align-items: center; margin-left: 8px; font-size: 18px; color: #ffffff; background-color: #f0999a;  border-radius: 99em;}
.game-list .game-item button.goal:hover { background-color: #9c3333;  }
.game-list .game-item button.goal span { display: block; font-size: 0.8em;}
.game-list .game-item button.goal.done {   cursor: default; background-color: #926a6b; color: #eaeaea; }
.game-list .game-item button.goal.not-yet {  cursor: default;  background-color: #d0d0d0; }


hr.red-line { border-top: 1px #f0999a solid; }

/* ai-video-card */
.ai-video-card { max-width: 320px; margin: 0 auto 20px auto;}
.ai-video-card:before { content: ''; display: block; width: 100%; height: 0; padding-bottom: 177.8%; background-position: center; background-repeat: no-repeat; background-size: cover; background-image: url(../images/img-shorts.svg); }

.my-ai-time { font-size: 18px; text-align: center; }
.my-ai-time:before { content: ''; display: inline-block; width: 24px; height: 24px; background-image: url(../images/icon-events.svg); background-position: center; background-repeat: no-repeat; background-size: cover; vertical-align: middle; margin-top: -5px; }
.my-ai-time a { display: inline-block; color: #c60000; margin: 0 0 0 5px; } 
.ai-time-data { border: 2px #f0999a solid; border-radius: 12px; padding: 12px; display: flex; margin: 15px auto;  max-width: 420px; box-shadow: 0 0 10px rgba(0, 0, 0, .2) inset; }
.ai-time-data .data-item { flex: 1; text-align: center; font-size: 36px; }
.ai-time-data .data-item span { font-size: 14px; display: block; }

button.video-ratio { font-size: 20px; padding: 5px 30px; }
button.video-ratio:before { content: '16:9';  }
button.video-ratio.ratio9-16:before { content: '9:16';  }


.my-work-title { background-color: #c1272d; color: #fff; font-size: 18px; border-radius: 99em; text-align: center; font-weight: 400; padding: 8px 5px; }
.my-work { display: flex; flex-wrap: wrap; }
.my-work .work-item { width: calc(33.3% - 20px); margin: 10px; }
.my-work .work-item .photo { width: 100%; background-position: center; background-repeat: no-repeat; background-size: cover; background-image: url(../images/img-shorts.svg); margin-bottom: 10px; border-radius: 4px; transition: all 0.3s ease; }
.my-work .work-item .photo:hover { filter: brightness(1.5); box-shadow: 0 0 10px rgba(0, 0, 0, .8); }
.my-work .work-item .photo a { display: block; width: 100%; height: 0; padding-bottom: 177.8%;}
.my-work .work-item .voice { width: 100%; background-position: center; background-repeat: no-repeat; background-size: cover; background-image: url(../images/img-voice.svg); margin-bottom: 10px; border-radius: 4px; transition: all 0.3s ease; }
.my-work .work-item .voice a { display: block; width: 100%; height: 0; padding-bottom: 100%;}
.my-work .work-item label { font-size: 18px; color: #333; display: block; margin-bottom: 10px; }
.my-work .work-item button.btn { width: 100%; padding: 5px 15px; }

.my-time .time-item { padding: 10px; margin: 10px 0; border-bottom: 1px #f0999a solid; }
.my-time .time-item label { font-size: 20px; color: #333; display: block; }


/* hunter-title */
h2.ct-hunter-title { font-size: 24px; text-align: center; color: #c1272d; }
h2.ct-hunter-title img { width: 42px; height: auto; margin-right: 5px; margin-top: -10px; }
.ct-hunter-cover { max-width: 420px; width: 100%; margin: 10px auto 20px auto; display: block; border-radius: 8px; }

.hunter-rule { font-size: 18px; }
.hunter-rule h3.rule-title { margin: 10px 0 20px 0; background-color: #c1272d; color: #fff; border-radius: 99em; text-align: center; padding: 8px; font-size: 18px; }

.award-img { max-width: 240px; width: 100%; height: auto; margin: 15px auto; display: block; padding: 10px 0; } 

button.challange { font-size: 20px; padding: 8px 20px;} 
button.challange .bi-gold-coin { width: 28px; height: 29px; margin:-5px 0px 0 5px; }

.mission-state { display: flex; }
.mission-state .title { font-size: 22px; flex: 1; }
.mission-state .title img { width: 28px; height: auto; display: inline-block; margin-right: 5px; margin-top: -5px; }
.mission-state .hp { font-size: 20px;  color: #f0999a;}
.mission-state .hp i { margin: 0 2px;}
.mission-state .hp i.done { color: #808080; }

/* mission-list */
.mission-list { margin: 10px 0 30px 0; }
.mission-list .mission-item { display: flex; background-color: #999; border-radius: 99em; padding: 10px; margin-bottom: 15px; cursor: pointer; }
.mission-list .mission-item .mission-sort { flex: 1; padding-left: 30px; color: #fff; display: flex; flex-wrap: wrap; } 
.mission-list .mission-item .mission-sort .order { font-size: 56px; line-height: 45px; margin-bottom: 5px; width: auto; flex: none; line-height: 65px;}
.mission-list .mission-item .mission-sort .time { font-size: 18px; line-height: 1em; flex: none; width: 100%; }
.mission-list .mission-item .mission-sort .info { font-size: 18px; line-height: 1em; flex: 1; display: flex; align-items: center; justify-content: left; margin-left: 10px;}
.mission-list .mission-item .question-state { width: 70px; flex: none; margin-left: 10px;  }
.mission-list .mission-item .question-state::before { content: 'GO'; color: #999; text-align: center; display: inline-block; vertical-align: middle; font-size: 44px;  width: 100%; height: 0; padding-bottom: 100%; border-radius: 99em; background-position: center; background-repeat: no-repeat; background-size: contain; background-color: #fff; }

.mission-list .mission-item.can-play { background-color: #c1272d; }

.mission-list .mission-item.complate { background-color: #f0999a; cursor: default; }
.mission-list .mission-item.complate .mission-sort .order { line-height: 40px;}
.mission-list .mission-item.complate .question-state::before { content: ''; background-image: url(../images/icon-complate.svg); background-color: transparent; }
.mission-list .mission-item.fail { background-color: #000; }
.mission-list .mission-item.fail .question-state::before { content: ''; background-image: url(../images/icon-fail.svg); background-color: transparent; }

.question-item { border-radius: 20px; border: 2px #f0999a solid; margin-bottom: 15px; padding: 12px; }
.question-item .mission-sort { font-size: 52px; line-height: 45px; font-weight: 500; padding: 0 25px; }
.question-item .mission-sort span { font-size: 20px; color: #f0999a; }
.question-item .question-cont { font-size: 20px;  padding: 10px 25px;}
.question-item input.form-text { width: calc(100% - 20px); display: block; margin: 5px 10px; padding: 10px 10px; border-radius: 99em; border: 2px #f0999a solid; font-size: 18px; text-align: center; box-shadow: 0 0 5px rgba(0, 0, 0, .1) inset; }

.question-item .question-select { padding: 10px 0; }
.question-item .question-select-check .option,
.question-item .question-select .option { border-radius: 99em; background-color: #f0999a; border: 2px #f0999a solid; font-size: 20px; text-align: center; color: #fff; padding: 10px 15px; margin-bottom: 8px; cursor: pointer; transition: all 0.3s ease; position: relative; }
.question-item .question-select-check .option.active,
.question-item .question-select-check .option:hover,
.question-item .question-select .option.active,
.question-item .question-select .option:hover { background-color: #fff1f1; color: #9a3e40;}
.question-item .question-select-check .option:after,
.question-item .question-select .option:after { content: ''; display: block; width: 24px; height: 24px; position: absolute; top: 12px; right: 15px; background-image: url(../images/icon-check-white.svg); background-position: center; background-repeat: no-repeat; background-size: cover; }
.question-item .question-select-check .option.active:after,
.question-item .question-select .option.active:after {  background-image: url(../images/icon-check-red.svg); }



.question-item .scan-qrcode { display: flex; justify-content: center; width: 100%; height: 120px; position: relative; background-position: center; background-repeat: no-repeat; background-size: cover; background-image: url(../images/tikct-bg.svg); padding: 2px; } 
.question-item .scan-qrcode .qr-code-box { height: 100%; width: auto; background-color: #fff; padding: 5px; }
.question-item .scan-qrcode .qr-code-box img { height: 100%; width: auto; }
.question-item .scan-qrcode p { display: flex; align-items: center; padding: 10px; margin: 0; color: #fff; font-size: 20px; }

.question-item .question-info { display: flex; justify-content: space-between; }
.question-item .question-info button,
.question-item .question-info span { background-color: transparent; color: #666666;  font-size: 18px; padding: 10px 15px; }
.question-item .question-info button:hover { background-color: transparent; color: #f0999a; }
.question-item .mission-award { padding: 10px 0;}

.mission-award { display: flex; flex-wrap: wrap; }
.mission-award label { font-size: 18px; font-weight: 500; margin-right: 10px; color: #000; display: flex; align-items: center;  } 
.mission-award .award-info { flex: 1; font-size: 18px; color: #000; display: flex; align-items: center; }
.mission-award .award-info .bi-gold-coin,
.mission-award .award-info .bi-gold-silver { width: 32px; height: 32px; }
.mission-award button { width: auto; flex: none; }

.mission-item .mission-award { flex: 1; margin: 0 10px;}
.mission-item .mission-award label,
.mission-item .mission-award .award-info { color: #fff; }
.mission-item .mission-award button.btn-pink {  background-color: #dc5454; color: #fff; padding: 5px 25px; }
.mission-item .mission-award button.btn-pink:hover { background-color: #f3c706; color: #a83524; }

.mission-item .mission-award button.btn-pink.received,
.mission-item .mission-award button.btn-pink.received:hover { cursor: default; background-color: transparent; border: 1px #e8fcff solid; color: #fff; }
.mission-item .mission-award button.btn-pink.received:before { content: '已'; }


.live-streaming  { padding: 20px 0; display: flex; flex-wrap: wrap; }
.live-streaming .title { font-size: 22px; width: 100%; flex: none; }
.live-streaming .title img { width: 28px; height: auto; display: inline-block; margin-right: 5px; margin-top: -5px; }
.live-streaming .list-item { width: calc(33.3% - 10px); flex: none; margin: 5px 5px 15px 5px; }
.live-streaming .list-item .photo { width: 100%; margin-bottom: 10px; border-radius: 8px; overflow: hidden; background-position: center; background-repeat: no-repeat; background-size: cover; transition: all 0.3s ease; }
.live-streaming .list-item .photo:hover { filter: brightness(1.2); } 
.live-streaming .list-item .photo a { display: block; width: 100%; height: 0; padding-bottom: 100%; }
.live-streaming .list-item .info { font-size: 14px; color: #666666; }
.live-streaming .list-item .info .state { text-align: center; color: #fff; border-radius: 99em; margin-top: 5px; padding: 5px; }
.live-streaming .list-item .info .state.online { background-color: #a83524 ; }
.live-streaming .list-item .info .state.over { background-color: #a9a9a9 ; }

.past-info { background-color: #ffe3e3; margin: 10px 0; padding: 5px 10px; border-radius: 99em; border: 1px #d1d1d1 solid; text-align: center; font-size: 18px; color: #333; font-weight: 700; }


.mission-contestants { padding: 15px 0; display: flex; flex-wrap: wrap; }
.mission-contestants .list-item { width: calc(25% - 6px); flex: none; margin: 3px; display: flex; }
.mission-contestants .list-item .shot-mug { width: 50px; flex: none; height: 50px; background-color: #fff; border-radius: 99em; background-position: center; background-repeat: no-repeat; background-size: cover; background-image: url(../images/icon-shot-mag.svg); }
.mission-contestants .list-item .info {  flex: 1; text-align: center;  }
.mission-contestants .list-item .info .player { color: #333; padding-bottom: 2px; }
.mission-contestants .list-item .info .mission-number { background-color: #a83524 ; color: #ffffff; border-radius: 99em; padding: 0px 5px;  }


/* ranking-list */
.ranking-list { margin: 10px 0 30px 0; }
.ranking-list .ranking-item { display: flex; background-color: f0999a; border-radius: 99em; padding: 10px; margin-bottom: 15px; cursor: pointer; }
.ranking-list .ranking-item.first { background-color: #fbb03b; }
.ranking-list .ranking-item.first-home { background-color: #c1272d; }
.ranking-list .ranking-item .shot-mug { width: 50px; flex: none; height: 50px; background-color: #fff; border-radius: 99em; background-position: center; background-repeat: no-repeat; background-size: cover; background-image: url(../images/icon-shot-mag.svg); }
.ranking-list .ranking-item .member-name { flex: 1; font-size: 26px;  color: #fff;  display: flex; align-items: center; margin-left: 10px;}
.ranking-list .ranking-item .past-number { width: 56px; flex: none; font-size: 16px;  color: #fff;  display: flex; align-items: center; margin-left: 10px;}
.ranking-list .ranking-item .ranking-sort { width: 75px; flex: none; font-size: 34px;  color: #fff; display: flex; align-items: center;  margin-left: 10px; } 

/* order-lis */
.order-finish { max-width: 600px; 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; border-bottom: 3px #d2d2d2 solid; }
.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 span.g-point { color: #ffffff; width: 20px; height: 20px; line-height: 20px; text-align: center; background-color: #002e5e; display: inline-block; border-radius: 99em; margin-left: 5px; }
.order-lis ul li span.g-point:before {  content: 'G'; }
.order-lis ul li span.d-point { content: 'D'; color: #ffffff; width: 20px; height: 20px; line-height: 20px; text-align: center; background-color: #d53737; display: inline-block; border-radius: 99em; margin-left: 5px; }
.order-lis ul li span.d-point:before {  content: 'D'; }
.order-lis ul li .preparing { color: #693; }
.order-lis ul li .shipped { color: #999; }
.order-lis ul li .shipped a { color: #F93; }

.point-g { text-align: center; padding: 0px 10px 10px 10px; color: #666666; font-size: 24px; }
.point-g img { width: 42px; height: auto; margin-right: 5px; display: inline-block; margin-top: -5px; }
/*
.point-g:before { content: 'G'; text-align: center; background-color: #002e5e; font-size: 20px; color: #ffffff; display: inline-block; width: 30px; height: 30px; line-height: 30px; border-radius: 99em; margin-right: 5px;  }
.point-d { text-align: center; padding: 20px 10; color: #d53737; font-size: 20px;  }
.point-d:before { content: 'D'; text-align: center; background-color: #d53737; font-size: 20px; color: #ffffff; display: inline-block; width: 30px; height: 30px; line-height: 30px; border-radius: 99em; margin-right: 5px;  }
*/
.point-explanation { color: #4f2f2f; font-size: 18px; line-height: 1.6em; padding: 15px; border-radius: 12px;  margin-bottom: 20px; border: 2px #f0999a solid; }

.select-button { text-align: center; margin: 5px 0 15px 0; }
.select-button button { font-size: 18px; padding: 5px 15px; margin: 0 3px; }
.select-button button img { width: 28px; height: auto; margin-top: -5px; margin-right: 5px; }



/* wallet-lis */
.wallet-list ul { list-style: none; margin: 0; padding: 0; }
.wallet-list ul li { transition: all 0.3s ease; padding: 12px 12px 12px 8px; border-radius: 8px; border: 1px #a3a3a3 solid; margin-bottom: 10px; font-size: 14px; }
.wallet-list ul li:hover { box-shadow: 0 5px 10px rgba(0, 0, 0, .3); border: 1px #f0999a solid; }
.wallet-list ul li a { display: flex; flex-wrap: wrap; width: 100%; color: #666666; }
.wallet-list ul li div.level-img { width: 40px; flex: none; display: flex; align-items: center; margin-right: 5px; }
.wallet-list ul li a > div { flex: 1; }
.wallet-list ul li span { display: block; }
.wallet-list ul li .option { display: block; font-size: 18px; line-height: 33px; }
.wallet-list ul li .price { display: block; font-size: 22px; text-align: right; }
.wallet-list ul li .balance { display: block;  text-align: right; }

/* product detaile */
.pro-detail-box { padding-left: 30px; }
.pro-detail-box .pro-tab { padding: 0;}
.pro-detail-box .pro-tab span { display: inline-block; padding: 5px 10px; margin: 0 5px 5px 0; border-radius: 2px; font-size: 12px; background-color: #D3C1AF; color: #ffffff;}
.product-cont {  padding: 5px 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: '\F7D2'; font-size: 24px; display: inline-block;  margin-right: 10px; margin-bottom: -5px; vertical-align: middle;}
.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 { width: 50%; flex: none; text-align: center; margin-right: 30px; position: relative; }
.product-photo .swiper-button-prev, 
.product-photo .swiper-button-next { top: 50% !important; }
.product-photo img {   width: 100%; height: auto; border-radius: 12px; }
.product-photo .product-video { width: 100%; height: 0; padding-bottom: 177.8%; position: relative; background-color: #eaeaea; }
.product-photo .product-video video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.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-photo section.shop-photos { width: 100%;}
.product-photo .pro-photos-show :root {--swiper-theme-color:#ffffff !important;}
.product-photo .pro-photos-show .swiper-button-next:after, 
.product-photo .pro-photos-show .swiper-button-prev:after { text-shadow: 0 0 5px #000000;}


.pro-detail-box .price-box { display: flex; flex-wrap: wrap; margin: 10px 0; font-size: 18px;  }
.pro-detail-box .price-box .Original { flex: 1; padding-bottom: 2px; font-size: 16px; text-align: right; color: #838282; }
.pro-detail-box .price-box .final { flex: 1; font-size: 20px; color: #1177bb; text-align: left; line-height: 24px; padding: 2px 0px; font-weight: 500; white-space:nowrap;}
.pro-detail-box .price-box .final span { font-size: 14px; padding-right: 5px; color: #a5a5a5;  margin-left: 5px;text-decoration: line-through;}
.pro-detail-box .price-box .stock { color: #666; font-size: 14px; line-height: 24px; padding: 2px 10px; white-space:nowrap;}
.pro-detail-box .price-box .g-coin { background-color: #c1272d;  border-radius: 99em; color: #fff; padding: 2px 15px; font-size: 14px; line-height: 24px; width: auto; flex: none; text-align: center; white-space:nowrap; }
.pro-detail-box .price-box .g-coin .bi-gold-coin { width: 24px; height: 24px; margin: -5px 5px 0 5px;  }

.product-interested .interested .swiper-slide .photo { border-radius: 4px; overflow: hidden;}
.product-interested .interested .swiper-slide h3 { font-size: 12px; margin: 10px 0; overflow: hidden; line-height: 1.4em; height: 2.8em; text-align: left; }
.product-interested .interested .swiper-pagination-bullet { background-color: #333333;}
.product-interested .interested .swiper-button-next,
.product-interested .interested .swiper-button-prev { top: calc(50% - 35px); text-shadow: 0 0 5px #333333;}


.product-video .pro-video .swiper-slide h3 { font-size: 12px; margin: 10px 0; overflow: hidden; line-height: 1.4em; height: 2.8em; text-align: left; }
.product-video .pro-video .swiper-pagination-bullet { background-color: #333333;}
.product-video .pro-video .swiper-slide .video-box { width: 100%; height: 0; padding-bottom: 177.8%; position: relative; background-color: #eaeaea; border-radius: 4px; overflow: hidden; } 
.product-video .pro-video .swiper-slide .video-box video { width: 100%; height: 100%; position: absolute; top: 0; left: 0; }
.product-video .pro-video .swiper-button-next,
.product-video .pro-video .swiper-button-prev { top: 50% !important; text-shadow: 0 0 5px #333333;}


.social-tool {margin: 10px 0; }
.social-tool .social-tag { margin-bottom: 10px; text-align: left;}
.social-tool .social-tag span { padding: 3px 10px; display: inline-block; border-radius: 99em; background-color: #e6cbcb; color: #ffffff; font-size: 12px; margin: 0 5px 5px 0; }

.social-tool .social-share { margin-bottom: 10px; text-align: left;}
.social-tool .social-share > div { display: inline-block; padding: 3px 10px; margin-bottom: 5px; border-radius: 99em; border: 1px #c4a6a6 solid; font-size: 12px; color: #be8484; cursor: pointer; transition: all 0.3s ease;}
.social-tool .social-share > div:hover { background-color: #f1dede;}
.social-tool .social-share > div: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; margin-top: -3px;}
.social-tool .social-share > div.share-fb:before { background-image: url(../images/icon-brown-fb.svg);}
.social-tool .social-share > div.share-ig:before { background-image: url(../images/icon-brown-ig.svg);}
.social-tool .social-share > div.share-line:before { background-image: url(../images/icon-brown-line.svg);}
.social-tool .social-share > div.share-wechat:before { background-image: url(../images/icon-brown-wechat.svg);}

.available-offers { border: 1px #D3C1AF solid; background-color: #ffffff; margin: 10px 0; text-align: left; padding-bottom: 4px; border-radius: 4px; overflow: hidden;}
.available-offers h4 { background-color: #D3C1AF; padding: 8px 10px; font-size: 14px; color: #ffffff; margin-bottom: 10px; }
.available-offers .list { font-size: 12px; color: #696969; padding: 0 10px; margin-bottom: 6px; line-height: 1.2em; padding-bottom: 6px; border-bottom: 1px #e0e0e0 dotted; }
.available-offers .list span { display: inline-block; font-size: 12px; background-color: #b9c077; color: #ffffff; border-radius: 4px; margin-right: 3px; padding: 3px 8px; }
.available-offers .list:last-child { border-bottom: 0; padding-bottom: 0;}

.product-info .cart { color: #ffffff; padding: 7px 0;  text-align: center;}
.product-info .cart .btn-boxs { display: flex; flex-wrap: wrap; }
.product-info .cart .btn-boxs a.btn-cart-l { background: #6a6a6a; display: block; flex: 1; border-radius: 5px; line-height: 35px; color: #ffffff; font-size: 16px; padding: 0 20px; margin-right: 5px; box-shadow: 0 3px 0 #454545; }
.product-info .cart .btn-boxs a.btn-cart-l:hover {  background: #c5b5ae; color: #ffffff; }
.product-info .cart .btn-boxs a.btn-cart { background: #ff5d0c; display: block; flex: 1; border-radius: 5px; line-height: 35px; color: #ffffff; font-size: 16px; padding: 0 20px; margin-left: 5px; box-shadow: 0 3px 0 #8a6e1b; }
.product-info .cart .btn-boxs a.btn-cart:hover {  background: #ffbfa3; 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 .cart .btn-boxs div.add-favourite { width: 100%; flex: none; margin-top: 8px; color: #333333; font-size: 16px; text-align: center; background-color: #ffffff; border: 1px #d4d4d4 solid; padding: 5px 15px;  border-radius: 5px; transition: all 0.3s ease; cursor: pointer;  box-shadow: 0 3px 0 #c4c4c4;}
.product-info .cart .btn-boxs div.add-favourite:hover { background-color: #e9a0a0; border: 1px #e9a0a0 solid; color: #ffffff;}
.product-info .cart .btn-boxs div.add-favourite.active { background-color: #e9a0a0; border: 1px #e9a0a0 solid; color: #ffffff; }
.product-info .cart .btn-boxs div.add-favourite.active:before { content: '已';}

.product-info .briefly { padding:0; margin-bottom: 20px; color: #333333; font-size: 14px; line-height: 1.6em; /*height: 140px; overflow-y: auto;*/}
.pro-info-title { padding: 10px; font-size: 16px; text-align: center; color: #fff; margin: 20px 0; font-weight: 300;  background-color: #f0999a; border-radius: 99em;}

.product-info .payment-tool { padding: 20px  0 ; text-align: left;}
.product-info label { font-size: 14px; color: #141414; margin-right: 5px;}
.product-info span.pay-icon { display: inline-block; width: 20px; height: 20px; margin-right: 5px; background-position: center; background-repeat: no-repeat; background-size: cover; margin-top: -3px; vertical-align: middle;}
.product-info span.pay-icon.seven-eleven-mart { background-image: url(../images/icon-7-eleven.svg); } 
.product-info span.pay-icon.family-mart { background-image: url(../images/icon-family-mart.svg); } 
.product-info span.pay-icon.hi-life-mart { background-image: url(../images/icon-hi-Life.svg); } 
.product-info span.pay-icon.ok-mart { background-image: url(../images/icon-ok-mart.svg); } 
.product-info span.pay-icon.truck { background-image: url(../images/icon-truck.svg); } 



/* 沒有購物欄位 */
.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; display: none; }
.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;}
.pro-spe label { display: block; font-size: 16px; color: #1a1a1a; padding: 10px 0 5px;}
.pro-spe span { display: inline-block; padding: 8px 15px; border-radius: 99em; background-color: #ffffff; border:1px #cacaca solid; color: #333333; line-height: 1em; cursor: pointer; transition: all 0.3s ease; margin: 0 5px 5px 0;}
.pro-spe span:hover { background-color: #D3C1AF; border:1px #D3C1AF solid; color: #ffffff;}
.pro-spe span.active { background-color: #534035; border:1px #534035 solid; color: #D3C1AF;  }
.pro-spe span.sold-out, .pro-spe span.sold-out:hover { cursor: default; color: #e2e2e2; background-color: #ffffff; border:1px #ececec solid;}


/* group-shop 團購 */
.pro-detail-box.group-shop { max-width: 560px;  padding: 12px; margin: 0 auto; border-radius: 8px; box-shadow: 0 0 10px rgba(0, 0, 0, .1); }
.pro-detail-box.group-shop .product-photo { width: 100%; margin-right: 0; margin-bottom: 15px;}
.pro-detail-box.group-shop .product-info { width: 100%; flex: none; min-height: auto; padding: 0;}
.pro-detail-box.group-shop .product-photo .time-reciprocal { position: absolute; bottom: 10px; right: 10px;  color: #ffffff; padding: 5px 20px; text-shadow: 0 0 5px rgba(0, 0, 0, .8); text-align: center; font-size: 14px; z-index: 50; background-color: #dc0000; border-radius: 99em; box-shadow: 0 0 10px rgba(0, 0, 0, .3); }
.pro-detail-box.group-shop .product-photo .time-reciprocal span { padding-right: 5px; }

.group-detail-title {  font-size: 20px; font-weight: 500; color: #333333; margin: 0; padding: 0 0 10px 0;  line-height: 1.4em; }


.pro-detail-box.group-shop .pro-tool { text-align: center; width: 100%; margin-bottom: 10px; }
.pro-detail-box.group-shop  .product-info { padding: 15px 0; }
/*
.pro-detail-box.group-shop .group-info { margin-top: 15px; padding: 10px 16px; font-size: 16px; width: 100%; flex: none; background-color: #ffffff;  border-radius: 8px;}
.pro-detail-box.group-shop .group-info span { margin-left: 10px; float: right; color: #fd5b5b; }
.pro-detail-box.group-shop .group-info span:before { display: inline-block; content: '\F89D'; margin-right: 5px; }
.pro-detail-box.group-shop .group-info:before { display: inline-block; content: '\F4CF'; margin-right: 5px; }
*/

/* video-shop 影片購物 */
.pro-detail-box.video-shop { max-width: 680px;  padding: 0; margin: 0 auto; border-radius: 8px; }
.pro-detail-box.video-shop .product-photo { width: 100%; margin-right: 0; margin-bottom: 15px;}
.pro-detail-box.video-shop .product-info { width: 100%; flex: none; min-height: auto; padding: 0;}
.pro-detail-box.video-shop .product-photo .time-reciprocal { position: absolute; bottom: 0; left: 0; width: 100%; color: #ffffff; text-shadow: 0 0 5px rgba(0, 0, 0, .8); text-align: center; font-size: 36px; z-index: 50; }
.pro-detail-box.video-shop .product-photo .time-reciprocal span { display: block; width: auto; padding: 5px 10px; background-color: #f9fd00; color: #000; font-size: 14px; font-weight: bold; margin: 0px auto 0 auto; text-shadow: none;}


/* video-cont */
.video-cont { padding-bottom: 30px;  padding-top: 30px; }
.video-cont .video-box .video-title { font-size: 20px; font-weight: 400; color: #333333; padding: 15px 0;  }
.video-cont .video-box .video-iframe { position: relative; width: 100%; height: 0; padding-bottom: 56%; }
.video-cont .video-box .video-iframe iframe { width: 100%; height: 100%; position: absolute; top: 0; left: 0; }
.video-cont .video-box .video-info { border-radius: 8px; padding: 15px; background-color: #f1f1f1; color: #000; font-size: 13px; line-height: 1.6em; font-weight: 300; }
.video-cont .video-product { margin-top: 30px; border: 1px #eaeaea solid; padding: 12px; border-radius: 8px; box-shadow: 0 0 10px rgba(0, 0, 0, .1); }
.video-pro-title { font-size: 20px; font-weight: 400; padding: 10px; text-align: center; }
.group-detail-title:before { font-size: 14px; padding: 3px 10px 3px 20px; }


.group-pro-info .group-number { display: flex; flex-wrap: wrap; }
.group-pro-info .group-number .group-leader { width: 80px; flex: none; margin-right: 10px; position: relative;}
.group-pro-info .group-number .group-leader:before { content: '團主'; display: inline-block; font-size: 12px; line-height: 1em; position: absolute; top: 78px; left: calc(50% - 26px); padding: 2px 8px; width: 56px; text-align: center; background-color: #d55757; color: #ffffff; } 
.group-pro-info .group-number .group-leader .member-photo-item { width: 100%; }
.group-pro-info .group-number .group-leader .member-photo-item h4 { margin-top: 12px; }
.group-pro-info .group-number .group-tool { flex: 1; }
.group-pro-info .group-number .group-tool .tool-btn { margin-bottom: 15px; display: flex; }
.group-pro-info .group-number .group-tool .tool-btn button { flex: 1; margin: 2px; font-size: 14px; padding: 8px 4px;}
.group-pro-info .group-number .group-tool .tool-btn button i { margin-right: 5px; }

.group-pro-info .group-number .group-tool .group-count { display: flex; flex-wrap: wrap; }
.group-pro-info .group-number .group-tool .group-count .pepole-number { flex: 1; }
.group-pro-info .group-number .group-tool .group-count .pepole-number i { font-size: 24px; font-style: normal; margin: 0 -5px; }
.group-pro-info .group-number .group-tool .group-count .pepole-number i:before { content: '\F8F9'; color: #eaeaea; display: inline-block; } 
.group-pro-info .group-number .group-tool .group-count .pepole-number i.join:before { content: '\F8F7'; color: #333333; }
.group-pro-info .group-number .group-tool .group-count .join-count { width: 80px; flex: none; color: #6d6d6d; font-size: 14px; display: flex; justify-content: center; align-items: last baseline; }
.group-pro-info .group-number .group-tool .group-count .join-count span { font-size: 2em; color: #d55b5b; }

.group-member { border-top: 1px #dcdcdc solid; margin-top: 25px; padding-top: 25px; position: relative; }
.group-member h3.group-member-title { padding: 8px 12px; margin: 0; position: absolute; top: -15px; left: calc(50% - 80px); width: 160px; text-align: center; background-color: #f0999a; color: #ffffff; font-size: 13px; border-radius: 99em; }

.pepole-number { flex: 1; }
.pepole-number i { font-size: 24px; font-style: normal; margin: 0 -5px; }
.pepole-number i:before { content: '\F8F9'; color: #eaeaea; display: inline-block; } 
.pepole-number i.join:before { content: '\F8F7'; color: #333333; }

.member-photo-item { display: inline-block; width: 60px; margin: 5px 2px; }
.member-photo-item .photo-mug {  width: 100%; padding-bottom: calc(100% - 8px); height: 0; background-image: url(../images/member-mug-default.svg); background-position: center; background-repeat: no-repeat; background-size: cover;  border-radius: 99em; border: 4px #ffffff solid; box-shadow: 0 0 10px rgba(0, 0, 0, .1);  }
.member-photo-item h4 { font-size: 12px; text-align: center; margin-top: 4px; }

.group-info-detail { display: flex; flex-wrap: wrap; margin: 5px 0 15px 0; padding-bottom: 10px; border-bottom: 1px #f0999a solid; }
.group-info-detail .g-coin { flex: 1; background-color: #c1272d;  border-radius: 99em; color: #fff; padding: 2px 15px; font-size: 14px; line-height: 24px; width: auto; flex: none; text-align: center; white-space:nowrap; }
.group-info-detail .g-coin .bi-gold-coin { width: 24px; height: 24px; margin: -5px 5px 0 5px;  }
.group-info-detail  .float-fallow { padding: 2px 12px; font-size: 14px; color: #C1272D;  }
.group-info-detail  .float-fallow:before { content: ''; display: inline-block; vertical-align: middle; width: 28px; height: 28px; margin-right: 10px; background-image: url(../images/icon-creat-group-02.png); background-position: center; background-repeat: no-repeat; background-size: contain; } 


.group-member02 { display: flex; flex-wrap: wrap; }
.member-photo-item { display: inline-block; width: 60px; margin: 5px 2px; }
.member-photo-item .photo-mug {  width: 100%; padding-bottom: calc(100% - 8px); height: 0; background-image: url(../images/member-mug-default.svg); background-position: center; background-repeat: no-repeat; background-size: cover;  border-radius: 99em; border: 4px #ffffff solid; box-shadow: 0 0 10px rgba(0, 0, 0, .1);  }
.member-photo-item h4 { font-size: 12px; text-align: center; margin-top: 4px; }

.member-photo-item02 { display: flex; width: calc(33.3% - 8px); flex: none; margin: 5px 4px; }
.member-photo-item02 .photo-mug {  width: 60px; height: 60px; flex: none; margin-right: 5px; background-image: url(../images/member-mug-default.svg); background-position: center; background-repeat: no-repeat; background-size: cover;  border-radius: 99em; border: 4px #ffffff solid; box-shadow: 0 0 10px rgba(0, 0, 0, .1);  }
.member-photo-item02 .group-data { flex: 1; }
.member-photo-item02 .group-data h4 { font-size: 12px; text-align: center; margin-top: 4px; }
.member-photo-item02 .group-data .s-point { border-radius: 99em; background-color: #C1272D; color: #ffffff; text-align: center; padding: 5px;  }
.member-photo-item02 .group-data .s-point:before { content: ''; display: inline-block; vertical-align: middle; margin-right: 5px; margin-top: -3px; width: 20px; height: 20px; background-image: url(../images/icon-coin-gold.svg); background-position: center; background-repeat: no-repeat; background-size: contain; }


/* news-list */
.news-list { list-style: none; margin: 0; padding: 20px 0; }
.news-list li { display: flex; flex-wrap: wrap; border-bottom: 1px #e0e0e0 solid; font-size: 16px;}
.news-list li span { width: 100px; flex: none; border-right: 1px #e3e4e4 solid; margin: 10px 10px 10px 0; color: #929292; }
.news-list li a { display: block; flex: 1; margin: 10px 0; color: #000;  }
.news-list li a:hover { color: #9a9a4e; } 

.news-date { font-size: 18px; text-align: center; padding: 20px 0; }
.news-cont { font-size: 15px; line-height: 1.8em; }
.news-cont img { width: 100%; display: block; margin: 10px 0; }

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

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


.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: #d19354; padding: 15px 0 10px 0; display: flex; }
.product-info .price .normal { font-size: 14px; width: 40%; flex: none; text-align: left; color: #999; text-decoration: line-through; }
.product-info .price .normal span { padding-top: 26px; display: inline-block; }
.product-info .price .special { width: 60%; flex: none; 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; }

.product-lis.list-format .add-to-cart-box { align-items: flex-end;}
.product-lis.list-format .add-to-cart-box .quantity-num {width: calc(40% - 10px); margin-left: 10px; flex: none; }
.product-lis.list-format .add-to-cart-box .pro-spe {width: 60%; flex: none; }
.product-lis.list-format .add-to-cart-box { height: 100%;}
.product-lis.list-format .add-to-cart-btn-box { height: 32px;}

.group-list-edit { display: flex; flex-wrap: wrap; margin: 0 -2px; }
.group-list-edit button.btn { flex: 1; margin: 0 2px; }
.group-list-edit button.btn.btn-time-limit { background-color: #a19f76; color: #fff; }
.group-list-edit button.btn.btn-time-limit:hover { background-color: #aea62d; }
.group-list-edit button.btn.btn-group-cancel { background-color: #894b4b; color: #fff; }
.group-list-edit button.btn.btn-group-cancel:hover { background-color: #d20303; }

h3.page-title { font-size: 24px; color: #a25f60; padding-bottom: 10px; text-align: center; position: relative;}
h3.page-title img { width: 42px; height: 42px; margin-right: 5px; margin-top: -5px; }
h3.page-title .btn-back { position: absolute; right: 10px; top: -3px; padding: 5px 15px; }

.web-path { position: relative; }
.web-path .btn-back { position: absolute; right: 5px; top: -3px; padding: 2px 15px; }

.back-page { margin-top: 30px; }
.mr-5 { margin-right: 5px; }

/* video-title */
.stock-list .card-body { padding: 15px 10px 15px 35px; position: relative; border-top: 5px #c07608 solid; }
.stock-list .card-body:before { content: '\F4F3'; display: block; position: absolute; top: 15px; left: 15px; }
.video-title { font-size: 16px; margin-bottom: 0; font-weight: 500; }
.page-content { background-color: #ffffff; border-radius: 4px; padding: 20px; }
.video-out-box { max-width: 980px; margin: 0 auto; }
.video-play-box { width: 100%; height: 0; padding-bottom: 56%; position: relative; margin: 0 auto 30px auto; }
.video-play-box iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }


/* page-link */
.page-link  { color: #333333; }
.page-link a { color: #333333; }

/* list-info */
.bi-gold-coin { background-image: url(../images/icon-coin-gold.svg); background-position: center; background-size: cover; background-repeat: no-repeat; font-size: 12px; display: inline-block; width: 48px; height: 48px; margin-right: 5px; vertical-align: middle; margin-top: -0.5em; }
.bi-silver-coin { background-image: url(../images/icon-coin-silver.svg); background-position: center; background-size: cover; background-repeat: no-repeat; font-size: 12px; display: inline-block; width: 48px; height: 48px; margin-right: 5px; vertical-align: middle; margin-top: -0.5em; }
.pay-mode { text-align: center; padding: 10px 0; font-size: 20px; }
.use-price { text-align: center; padding: 10px 0; font-size: 48px; line-height: 1em; }
.list-info { max-width: 360px; margin: 20px auto; }
.list-info .list-item { display: flex; flex-wrap: wrap; font-size: 18px; padding: 5px 10px; }
.list-info .list-item label { width: 90px; flex: none; margin-right: 5px; }
.list-info .list-item .info-cont { flex: 1; }

/* 下滑變形 */
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: 16px;  width: 40px; height: 40px; z-index: 995; cursor: pointer; transition: all 0.3s ease; display: none; }
.m-burger.down { top: 11px; }
.m-burger:before { content: ''; display: block; height: 1px; background-color: #fff; transition: all 0.3s ease; }
.m-burger:after { content: ''; display: block; height: 1px; background-color: #fff; transition: all 0.3s ease; }
.m-burger span { display: block; width: 100%; height: 1px; background-color: #fff; margin: 13px 0; transition: all 0.3s ease; }
.m-burger.active span { width: 0; margin: 0; background-color: #f0999a; }
.m-burger.active:before { transform: rotate(45deg); width: 110%; margin-top: 20px; background-color: #f0999a; transition: all 0.3s ease; }
.m-burger.active:after { transform: rotate(-45deg); width: 110%; margin-top: -2px; background-color: #f0999a; transition: all 0.3s ease; }


/* 其他選單 */
.other-menu { background-color: #fff; position: fixed; top: 0px; right: -360px; height: 100%; max-width: 360px; bottom: 0; z-index: 955; transition: all 0.5s ease; padding: 60px 20px 20px 20px;  font-size: 13px; box-shadow: 0 0 20px rgba(0, 0, 0, .1); }
.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: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: 20px; margin: 0 5px 0 0; padding: 0; width: calc(100% - 50px);  background-color: #ffffff; padding: 5px 10px; }
.quick-search-box button.search-btn {  flex: none; width: 30px; height: 30px; background-color: transparent; background-position: center; background-repeat: no-repeat; background-size: contain; background-image: url(../images/icon-search.svg);}


.m-menu { height: calc(100% - 120px); overflow-y: auto; margin: 0 -10px -10px -10px; display: flex; flex-wrap: wrap; justify-content: flex-start; align-content: flex-start ; } 
.m-menu > a { width: 80px; height: 80px; margin: 10px;  color: #333; border-radius: 4px; text-align: center; padding: 10px 5px; display: flex; flex-wrap: wrap; justify-content: center; align-content: center; transition: all 0.3s ease; border: 1px #ddd solid;}
.m-menu > a i { display: block; font-size: 26px; font-weight: 300; margin-bottom: 5px; width: 100%; flex: none; color: #525252; }
.m-menu > a:hover { background-color: #eaeaea; }

/* 舊選單
.m-menu { height: calc(100% - 120px); overflow-y: auto; margin: 0 -20px -10px -30px; } 
.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;  }
.m-menu>div,
.m-menu>a {  border-top: 0; margin: 0; transition: all 0.3s ease;}
.m-menu>div:hover, .m-menu>a:hover { background-color: #ffffff;}
.m-menu>div>span { position: relative;}
.m-menu>div>span:after { content: '\F282'; position: absolute; right: 10px; top: 8px; transition: all 0.3s ease;}

.m-menu>div.active>span:after { content: '\F286';  }
.m-menu>div .sub-m-menu { display: none; background-color: #f1f1f1; box-shadow: 0 0 10px #dbdbdb inset;}
*/


/* 暫存購物車 */
.temp-cart-box { height: 100%;  position: relative;}
.temporary-cart { background-color: #f8f8f8; position: fixed; height: calc(100% - 78px); top: 78px; 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% - 67px); top: 67px; }
.temporary-cart .temp-title { font-size: 16px; text-align: center; padding: 40px 0 10px 0; }
.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(../images/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; display: flex; flex-wrap: wrap; background-color: #ffffff;  margin-bottom: 15px; border-radius: 8px; }
.temporary-cart .cart-lis .photo { max-width: 80px; width: 80%; flex: none; border-radius: 8px; overflow: hidden; background-position: center;  background-repeat: no-repeat; background-size: cover;  }
.temporary-cart .cart-lis .photo a { display: block; width: 100%; height: 0; padding-bottom: 140%; }
.temporary-cart .cart-lis .temp-cart-info { flex: 1; font-size: 18px; margin-left: 5px; color: #ffffff; display: flex; flex-wrap: wrap; align-content: space-between; }
.temp-cart-info .quantity-num { max-width: 120px; margin: 0 auto; }
.temporary-cart .cart-lis .temp-cart-info .qtyInputBox { padding-top: 5px; width: 100%; flex: none; }
.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; width: 100%; flex: none;}
.temporary-cart .cart-lis .temp-cart-info p { font-size: 14px; color: #c2c2c2; margin: 0; }
.temporary-cart .cart-lis .quantity { width: 30px; flex: none; display: flex; align-items: center; justify-content: center;}
.temporary-cart .cart-lis .temp-cart-info .price { width: 100%; flex: none; color: #bd2727; text-align: center; padding-top: 10px; font-size: 14px;}
.temporary-cart .cart-lis .btn-del { display: block; width: 24px;  height: 24px; cursor: pointer; border-radius: 5px; transition: all 0.3s ease-in; background-image: url(../images/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; }

/* 購買 + - */
.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; border: 0; border-bottom: 1px #dbdbdb solid; border-radius: 0; margin: 0 5px;  padding: 0; flex: 1;  display: block; text-align: center; width: calc(100% - 60px); font-family: 'Barlow'; font-size: 20px; border-radius: 4px;}
.qtyInputBox span { display: block; width: 30px; height: 30px; cursor: pointer; flex: initial; cursor: pointer; background-position: center;  background-repeat: no-repeat; background-size: contain; cursor: pointer; transition: all 0.3s ease; opacity: 1; }
.qtyInputBox span.fa-minus {  background-image: url(../images/count-less.svg); }
.qtyInputBox span.fa-plus {  background-image: url(../images/count-add.svg);}
.qtyInputBox span:hover {  opacity: 0.8;}
.count { display: block; line-height: 30px; padding-right: 5px;}
.count .qtyInputBox { width: 100%;  flex: none;}

/* 搜尋視窗 */
.search-box { background-color: #f5f5f5; position: fixed; top: -100px; left: 0; width: 100%; padding: 10px 20px; height: 90px;z-index: 999; transition: all 0.3s ease;}
.search-box.active { top: 0; } 
.search-box > div { position: relative; padding-top: 20px;}
.search-box .btn-close { width: 24px; height: 24px; cursor: pointer; background-image: url(../images/close-btn.png); background-size: cover; position: absolute; right: 0px; top: 25px; transition: all 0.3s ease;}
.search-box .btn-close:hover { transform: rotate(90deg);}
.search-box .quick-search-box { width: calc(100% - 25px);}

.quick-search-box { display: flex; }
.quick-search-box .search-text { flex: 1; border: 0; line-height: 20px; margin: 0 5px 0 0; padding: 0; background-color: #ffffff; padding: 5px 10px; border-bottom: 1px #eaeaea solid; }
.quick-search-box button.search-btn { padding: 8px 5px; border: 0; flex: none; width: 30px; height: 30px; background-color: transparent; background-position: center; background-repeat: no-repeat; background-size: contain; background-image: url(../images/icon-search.svg);}



/* ddpay */
.ddpay-title {  border-bottom: 1px #f0999a solid; } 
.ddpay-input { padding: 10px 15px; border-radius: 99em; width: 180px; border: 1px #f0999a solid; margin: 10px auto; display: block; text-align: center; font-size: 16px; box-shadow: 0 0 5px rgba(0, 0, 0, .1) inset; }
.pay-target { font-size: 18px; padding: 10px 0 20px 0; }
.pay-target span { font-size: 1.2em; color: #781414; }
.ddpayment-amount { font-size: 26px; color: #000; padding: 10px 0; }

.ddplus-location { width: 40px; flex: none; margin-left: 10px; }
.ddplus-location img { width: 40px; height: auto; display: block; }
.dd-google-map {  width: 100%; height: 350px; border-radius: 8px; box-shadow: 0 0 5px rgba(0, 0, 0, .1); overflow: hidden; }
.dd-google-map iframe { width: 100%; height: 100%; }

.lorrery-poor { font-size: 42px; text-align: center; }
.lorrery-poor img { width: 52px; height: auto; display: inline-block; vertical-align: middle; margin-right: 5px; margin-top: -5px;}
.lottery-number { text-align: center; border-top:  1px #f0999a solid; padding: 10px 0; margin-top: 10px; font-family: 'Barlow';}
.lottery-number span { border:  1px #f0999a solid; border-radius: 8px; padding: 5px 10px; display: inline-block; margin: 10px 2px; vertical-align: middle; font-size: 36px; color: #f0999a; box-shadow: 0 0 5px rgba(0, 0, 0, .2); }


/* login sign-in-box */
.sign-in-box { max-width: 480px; margin: 0 auto;  }
.signin-title {  text-align: center; color: #a25f60; }
.sign-in-box .row > div { margin-bottom: 5px;  }

.login-link { padding: 20px 0; margin: 0; font-size: 14px; font-weight: 500; text-align: center; }
.login-link a { display: inline-block; margin: 0 20px; }
.login-link a img { width: 45px; height:  auto; display: inline-block; }
.login-link a span { display: block; margin-top: 5px; }

.sign-in-box .form-label { color: #aaa; font-size: 1.2em; margin-bottom: 0; }
.form-note { padding: 5px 0; font-size: 14px; color: #e05f5f; }

.login-select { display: flex; flex-wrap: wrap; margin: 10px 0 10px -4px; padding: 10px 0; }
.login-select button { flex: 1; margin:0 4px; padding: 10px; }
.login-select button i { margin-right: 5px; }
.login-select button.linked { background-color: #f7f7f7; border: 1px #959595 solid; color: #333; }
.login-select button.linked:after { content: '(已連結)'; }

.login-select .login-google { background-color: #b81735; }
.login-select .login-facebook { background-color: #2e6fd0; }
.login-select .login-line { background-color: #19c34e; }

/* form style */
.form-label { color: #000000; font-size: 1.2em; margin-bottom: 0; }
.form-control { font-size: 15px; }
.form-check { text-align: left; padding-left: 1.5em; }
.input-group-text { padding: 0.75em; background-color: transparent; border: 0; }
.form-list-title {  width: 6em; justify-content: right; }
.form-select { border: 0;  padding: 0.5em 0.75em; border: 2px #f0999a solid; border-radius: 99em;}
.form-control { border: 0; padding: 0.5em 0.75em; border: 2px #f0999a solid; border-radius: 99em; border-top-left-radius: 99em !important;  border-bottom-left-radius: 99em !important; border-top-right-radius: 99em !important;  border-bottom-right-radius: 99em !important;}
textarea.form-control { border-radius: 20px !important; }
.form-check-box { border: 0; }
.form-floating > label { color: #aaa; font-size: 1.2em; padding: 1.5em 0.5em 0 0.5em; }
.form-floating > .form-control {  background-color: #f0999a; border-radius: 99em; }
.birthday-label { line-height: 40px; margin-left: 5px; }
.form-check-input { width: 24px; height: 24px; margin-right: 10px; }
.form-check-label { line-height: 32px; }
.input-group > :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) { border-top-left-radius: 99em; border-bottom-left-radius: 99em; margin-left: 5px; }

.take-gold .btn { min-width: 80px; }

.remember-ps-box { padding-left: 8em; font-size: 16px; }
.Verification-img { width: 80px; margin-left: 5px !important;  display: flex; align-items: center; }

.btn-black { background-color: #000; padding: 15px 20px; color: #ffffff; }
.btn-black:hover { background-color: #002e5e; color: #ffffff; }

.btn-pink { background-color: #f0999a; padding: 15px 20px; color: #fff; border-radius: 99em;}
.btn-pink:hover { background-color: #aa6061; color: #ffffff; }
.form-check-input:checked { background-color: #f0999a; border-color: #f0999a;  }

.btn-goldgreen { background-color: #8cc63f; padding: 15px 20px; color: #fff; border-radius: 99em;}
.btn-goldgreen:hover { background-color: #71a42d; color: #ffffff; }

.btn-gray { background-color: #666666; padding: 15px 20px; color: #fff; border-radius: 99em;}
.btn-gray:hover { background-color: #444444; color: #ffffff; }

.btn-reset { background-color: transparent;  padding: 0; margin: 0;}
.btn-reset img { width: 32px; height: auto; }
.btn-reset:hover { background-color: transparent;  }

.btn-img { border: 0; padding: 0; margin: 5px;background-color: transparent; }
.btn-img img { width: 32px; height: auto; }
.btn-img:hover { background-color: transparent; filter: brightness(0.5); }

.id-card-phot { background-color: #eaeaea; border-radius: 8px; background-image: url(../images/id-card.svg); background-position: center; background-repeat: no-repeat; background-size: 90% auto; max-width: 200px; margin: 10px auto; }
.id-card-phot:before { content: ''; display: block; width: 100%; height: 0; padding-bottom: 65%; }

.id-mug-shot { background-color: #fff; border-radius: 8px; background-image: url(../images/icon-shot-mag.svg); background-position: center; background-repeat: no-repeat; background-size: cover; max-width: 160px; margin: 10px auto 30px auto; border-radius: 99em; box-shadow: 0 0 10px rgba(0, 0, 0, .1); }
.id-mug-shot:before { content: ''; display: block; width: 100%; height: 0; padding-bottom: 100%; }

.bank-info .form-label { padding: 5px 0; display: block; }

.btn-language { color: #fff; font-size: 24px; padding: 0 !important; background-color: transparent; margin-left: 5px; line-height: 1.3em; }
.btn-language:hover { color: #a93a3a; background-color: transparent;}
.btn-language::before { content: '\F3EE'; display: inline-block; }


/* member */
.member-level { display: flex; flex-wrap: wrap; margin-bottom: 20px; border-radius: 4px; border: 1px #aeac69 solid; overflow: hidden; }
.member-level .member-level-box { flex: 1; display: flex; justify-content: center; align-items: center; font-size: 16px; line-height: 24px; color: #aeac69; padding: 12px 0;
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#f9fcf7+0,f5f9f0+100;L+Green+3D */
background: linear-gradient(to bottom,  rgba(249,252,247,1) 0%,rgba(245,249,240,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
 }
 .member-level .member-level-box i { font-size: 24px; margin-right: 10px; }
.member-level button.member-level-up { border: 0; border-radius: 0; text-align: center; width: 120px; flex: none; background-color: #aeac69; color: #ffffff; padding: 12px; }
.member-level button.member-level-up:hover {  background-color: #878655; } 


.member-info {display: flex; flex-wrap: wrap; }
.member-info .member-deta { flex: 1; }
.member-info .member-deta .list { display: flex; font-size: 15px; padding: 5px 0; border-bottom: 1px #b7b7b7 dotted; }
.member-info .member-deta .list label { width: 70px; flex: none; color: #838383;  }
.member-info .member-deta .list span,
.member-info .member-deta .list button { flex: 1; word-break: break-all; }
.member-info .qrcode-box { flex: none; width: 160px; margin-left: 20px; border-radius: 4px; border: 1px #e5e5e5 solid; display: flex; align-items: center; justify-items: center; padding: 20px; }

.member-tool { display: flex; flex-wrap: wrap; margin: 20px -5px; } 
.member-tool h3 { margin: 0 5px 5px 5px; width: 100%; flex: none; font-size: 18px; }
.member-tool button { margin: 0 5px; flex: 1; background-color: #f0999a; color: #fff; border: 0; border-radius: 99em; }
.member-tool button i { margin-right: 5px; }
.member-tool button:hover { margin: 0 5px; flex: 1; background-color: #b56b6c; color: #ffffff; }

.level-up { max-width: 320px; margin: 0 auto; border-radius: 8px; display: flex; flex-wrap: wrap; text-align: center; justify-content: center; align-items: center; padding: 20px; box-shadow: 0 0 10px rgba(0, 0, 0, .3) inset; color: #ffffff; text-shadow: 0 1px 3px rgba(0, 0, 0, .3) ;
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#e2b98a+0,ffe3d3+50,ffa3a3+50,ff8989+100 */
    background: linear-gradient(to bottom,  #e2b98a 0%,#ffe3d3 50%,#ffa3a3 50%,#ff8989 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    }
    .level-up img { border-radius: 3px 3px 0 0; }
    .level-up h4 { font-size: 16px; border-radius:0 0 3px 3px ; margin-bottom: 10px; background-color: rgba(142, 40, 40, .5); color: #ffffff; padding: 12px 15px; width: 180px; }    
    .level-up span { font-size: 18px; }


.member-level-plan { max-width: 330px; margin: 0 auto; display: flex; flex-wrap: wrap; padding: 10px 0; }    
.member-level-plan .plan-item { flex: 1; margin: 5px; border-radius: 8px; border: 1px #dfdfdf solid; box-shadow: 0 0 10px rgba(0, 0, 0, .1) inset; padding: 20px; text-align: center; cursor: pointer; font-size: 20px; transition: all 0.3s ease; }
.member-level-plan .plan-item span { display: block; margin-top: 5px; font-size: 20px; color: #b63a3a; font-weight: 500; }
.member-level-plan .plan-item:hover,
.member-level-plan .plan-item.active { border: 1px #e47575 solid; background-color: #fffee4; }

/* button */
.btn-box { padding: 20px 0px; }
.btn-box button { min-width: 160px; margin: 5px; }

button { padding: 8px 5px; font-size: 14px; color: #fff; border: 0; border-radius: 4px;  text-align: center; cursor: pointer; background-color: #f0999a; 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;}

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

.btn-close:hover { color: #fff; }

button.btn-take-money { padding: 5px 15px; background-color: #8c8d44; color: #ffffff; margin: 0 5px; }
button.btn-take-money:hover { background-color: #6b6c32; }
button.btn-take-money.untake { background-color: #b4b4b4; cursor: default; }

button.accordion-button:hover { background-color: #f0999a; color: #ffffff; }
button.accordion-button:hover::after { color: #fff; filter: brightness(20); }
.accordion-button:not(.collapsed) { background-color: #f0999a; color: #fff;  }
.accordion-button:focus { border-color: #f0999a; box-shadow: 0 0 0 0.25rem rgba(209, 209, 209, 0.25); }
.accordion-button:not(.collapsed)::after { filter: brightness(20); }



/* deta-list */
.deta-list { padding: 10px 0; }
.deta-list .deta-list-item { display: flex;flex-wrap: wrap; border-bottom: 1px #eaeaea solid; margin-bottom: 5px; padding-bottom: 5px; font-size: 16px; }  
.deta-list .deta-list-item label { width: 100px; margin-right: 10px; flex: none; text-align: right; color: #000;}
.deta-list .deta-list-item .info { flex: 1; color: #333; }

/* link-icon */
.link-icon button { width: 48px; height: 48px; font-size: 32px; line-height: 48px; text-align: center; margin: 5px; background-color: #000000; }
.link-icon button:hover { background-color: #8a6e1b; }

/* event-list */
.event-list .event-photo a { display: block; width: 100%; height: 0; padding-bottom: 75%; background-position: center; background-repeat: no-repeat; background-size: cover; transition: all 0.3s ease;}
.event-list .event-photo:hover a { filter: brightness(1.2); }
.event-list .card { overflow: hidden; height: 100%; }
.event-list .card .card-body { position: relative; }
.event-list .card .card-body .time { position: absolute; top: -12px; left: 20px; width: calc(100% - 40px); border-radius: 20px; background-color: #787878; color: #ffffff; text-align: center; line-height: 24px; } 
.event-list .card .card-body h4 { font-weight: 400; font-size: 17px; margin: 12px 0; }


/* left-menu */
.member-left-menu {  margin-bottom: 30px; }
.member-left-menu .nav-item { font-size: 14px; margin-bottom: 5px; }
.member-left-menu .nav-item .nav-link { color: #f0999a; background-color: #e0e0e0; }
.member-left-menu .nav-item .nav-link.active { color: #ffffff; background-color: #f0999a; }

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

/* 產品左選單 */
* html .left-menu li { height: 1%; }
.left-menu-title { color: #f0999a; font-size: 20px; padding: 10px; text-align: center; border-bottom: 3px #f0999a 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; }
.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(../images/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: #D3C1AF; }
.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; }


/* cart */
.cart-outer { 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 .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 .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; margin: 0 -4px; justify-content: left;}
.payment-lis .delivery-member.options .list { width: calc(20% - 8px); flex: none; }

.btn { padding: 10px 20px; text-align: center; border-radius: 99em; }
.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; }

/* order-list */
.order-list { padding: 0 0 15px 0; }
.order-list .order-item.order-head { border-top: 0; display: flex; flex-wrap: wrap; padding: 10px 0 5px 0; background-color: #fff; }
.order-list .order-item { border-top: 1px #f0999a solid; font-size: 16px; background-color: #f2f2f2; display: flex; flex-wrap: wrap; margin-bottom: 5px; }
.order-list .order-item a { display: flex; flex-wrap: wrap; flex: 1;  }
.order-list .order-item div { flex: 1; padding: 5px 5px 3px 5px; white-space:nowrap; }  
.order-list .order-item .sn-number { width: 40px; flex: none; text-align: center; }
.order-list .order-item .time { width: 100%; flex: none;  padding: 3px 5px 5px 45px; background-color: #ffffff; }
.order-list .order-item .ddpay-time { width: 100%; flex: none;  padding: 5px 5px 7px 20px;  }
.order-list .order-item .ddpay-list { width: 100%; flex: none;  padding: 5px 5px 5px 45px; background-color: #ffffff; }
.order-list .order-item .state { float: right; padding: 0 5px 0 0; }
.order-list .order-item .bi-gold-coin { width: 20px; height: 20px; display: inline-block; margin-right: 0; }

/* notify-list */
.notify-list .notify-info { border-radius: 12px; padding: 10px 15px; margin-bottom: 10px; position: relative; background-color: #f2f2f2; font-size: 16px; min-height: 150px; }
.notify-list .notify-info.unread { box-shadow: 0 0 10px rgba(225, 190, 0, 0.8) inset; background-color: #fff6cf; }
.notify-list .notify-info button { background-color: transparent; width: 32px; height: 32px; position: absolute; transition: all 0.3s ease; background-position: center; background-repeat: no-repeat; background-size: cover;}
.notify-list .notify-info button:hover { background-color: transparent; filter: brightness(1.2); }
.notify-list .notify-info button.del { right: 10px; bottom: 10px; background-image: url(../images/icon-delet.svg); }
.notify-list .notify-info button.zoom { right: 10px; top: 10px;  background-image: url(../images/icon-zoom.svg);}

.notify-list .notify-info .info { font-size: 20px; padding: 10px 0; }
.notify-list .notify-info .price { font-size: 42px; line-height: 1em; }
.notify-list .notify-info .price img {  display: inline-block; vertical-align: middle; width: 32px; height: auto;  margin-right: 5px; margin-top: 5px; }


/* group-buy-list */
.group-buy-list { margin-bottom: 30px; }
.group-buy-list .group-buy-item { border-top: 1px #f0999a solid; display: flex; flex-wrap: wrap; margin-bottom: 10px; }
.group-buy-list .group-buy-item .photo { width: 130px; flex: none; padding: 5px;  }
.group-buy-list .group-buy-item .photo .cover { background-position: center; background-repeat: no-repeat; background-size: cover; border-radius: 4px; width: 100%; height: 0; padding-bottom: 100%;  position: relative;}
.group-buy-list .group-buy-item .photo .cover a { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.group-buy-list .group-buy-item .info { flex: 1;position: relative; }
.group-buy-list .group-buy-item .info h3.name { font-size: 16px; margin: 0 0 5px 0; padding: 8px; background-color: #f2f2f2; }
.group-buy-list .group-buy-item .info .cont { font-size: 16px; padding-left: 10px; margin-bottom: 5px; }
.group-buy-list .group-buy-item .info .cont .price { display: block; font-weight: 500; font-size: 18px; }
.group-buy-list .group-buy-item .info .cont span { color: #c1272d; font-size: 14px; margin-right: 8px; }
.group-buy-list .group-buy-item .info .cont span.reserved-time { color: #c1272d; font-size: 14px; margin-right: 8px; margin-top: 35px; display: block; }
.group-buy-list .group-buy-item .info .state { background-color: #b3b3b3; padding: 3px 10px; border-radius: 99em; color: #ffffff; font-size: 14px; }
.group-buy-list .group-buy-item .info .state .bi-gold-coin { width: 24px; height: 24px; }
.group-buy-list .group-buy-item .info .state.complate { background-color: #c1272d; } 
.group-buy-list .group-buy-item .info .btn-cancel { position: absolute; right: 0; bottom: 55px; border-radius: 99em; background-color: #000; color: #fff; font-size: 16px; padding: 3px 20px; }
.group-buy-list .group-buy-item .info .btn-cancel:hover { background-color: #c1272d; } 

.group-buy-list .group-buy-item .info .btn-cancel.active { background-color: red; }


/* consult */
.consult-list { padding:  10px 0; }
.consult-list .consult-item { border: 2px #F0999A solid; border-radius: 99em; padding: 5px; display: flex; cursor: pointer; transition: all 0.3s ease; margin-bottom: 12px; }
.consult-list .consult-item:hover { box-shadow: 0 5px 10px rgba(0, 0, 0, .1); } 
.consult-list .consult-item .trader-photo { border-radius: 99em; width: 60px; height: 60px; flex: none; background-image: url(../images/member-mug-default.svg); background-position: center; background-repeat: no-repeat; background-size: cover; background-color: #F0999A; }
.consult-list .consult-item .consult-info  { flex: 1; margin: 0 10px; color: #666666;}
.consult-list .consult-item .consult-info h4 { font-size: 20px; margin: 0 0 15px 0; padding: 0; }
.consult-list .consult-item .consult-info .last-time { font-size: 12px;  }
.consult-list .consult-item .message-volume { border-radius: 99em; width: 60px; height: 60px; flex: none; display: flex; align-items: center; justify-content: center; }
.consult-list .consult-item .message-volume span { border-radius: 99em; width: 40px; flex: none; height: 40px; line-height: 40px; text-align: center; display: block; background-color: #F0999A; color: #ffffff; font-size: 20px;  font-family: 'Barlow';}



.consult-detail .trader-info { display: flex; border-bottom: 1px #F0999A solid; margin-bottom: 20px; padding-bottom: 10px; border-radius: 99em; padding: 5px; box-shadow: 0 5px 10px rgba(0, 0, 0, .1); }
.consult-detail .trader-info .trader-photo { border-radius: 99em; width: 60px; height: 60px; flex: none; background-image: url(../images/member-mug-default.svg); background-position: center; background-repeat: no-repeat; background-size: cover; background-color: #F0999A; }
.consult-detail .trader-info .trader-mane { flex: 1; margin-left: 15px; display: flex; justify-content: left; align-items: center; font-size: 16px; }

.consult-detail .thread-box { position: relative; min-height: 240px; max-height: 360px; overflow-y: auto; padding: 10px; }

.consult-detail .thread-box .answer-box { padding: 10px; border-radius: 12px; box-shadow: 0 5px 10px rgba(0, 0, 0, .1); margin-bottom: 15px;  position: relative;}
.consult-detail .thread-box .answer-box:before { content: ''; display: block; width: 8px; height: 8px; border-radius: 99em; background-color:#F0999A ; position: absolute; left: -4px; top: 18px; } 
.consult-detail .thread-box .answer-box span { font-size: 16px; color: #333333; display: block; }
.consult-detail .thread-box .answer-box span.time { text-align: right; font-size: 12px; color: #999; }

.consult-detail .thread-box .question-box { padding: 10px; border-radius: 12px; box-shadow: 0 5px 10px rgba(0, 0, 0, .1); margin-bottom: 15px; border: 1px #F0999A solid; position: relative; }
.consult-detail .thread-box .question-box:before { content: ''; display: block; width: 8px; height: 8px; border-radius: 99em; background-color:#F0999A ; position: absolute; right: -4px; top: 18px; } 
.consult-detail .thread-box .question-box span { font-size: 16px; color: #333333; display: block; text-align: right; }
.consult-detail .thread-box .question-box span.time { font-size: 12px; color: #999; text-align: left; }

.consult-detail .key-in-box { display: flex; padding: 10px 0; }
.consult-detail .key-in-box input { flex: 1; border-radius: 99em 0 0 99em; border: 1px #F0999A solid; font-size: 14px; padding: 5px 10px; box-shadow: 0 0 5px rgba(0, 0, 0, .1) inset; }
.consult-detail .key-in-box button.btn { border-radius: 0 99em 99em 0; padding: 5px 10px; text-align: center; width: 60px; flex: none;  }


.appointment-order-info { padding: 20px 0; border-bottom: 1px #F0999A solid; border-top: 1px #F0999A solid; margin-bottom: 30px; }
.appointment-order-info .cover-photo { max-width: 240px; margin: 0 auto 20px auto; border-radius: 12px; background-position: center; background-repeat: no-repeat; background-size: cover; background-image: url(../images/member-mug-default.svg); box-shadow: 0 0 10px rgba(0, 0, 0, .1); }
.appointment-order-info .cover-photo:before { content: ''; display: block; width: 100%; height: 0; padding-bottom: 100%; }
.appointment-order-info .store-tab { font-size: 16px; padding-bottom: 5px; color: #666; }
.appointment-order-info .store-name { font-size: 18px; color: #333; padding-bottom: 10px; }
.appointment-order-info .store-info { font-size: 14px; line-height: 1.6em; color: #777;  }
/* 選項 */
.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 #f0999a solid; color: #fff; 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: #f0999a; display: flex; align-items: center; justify-content: center; }
.options .list:hover {  background-color: #ad5358;}
.options .list.active { border: 1px #ad5358 solid; color: #ffffff; background-color: #ad5358; 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); }

/* table */
table.table { font-size: 14px; }
table.table th { white-space:nowrap; background-color: #eee;}
table.table th, table.table td { padding: 8px 4px; } 
a.order-link { color: #0059de; } 

button.btn-table-cancel { background-color: #962525; color: #fff; padding: 0 10px; width: 6em; }
button.btn-table-cancel:hover { background-color: #900; color: #ffffff; }
button.btn-table-cancel.btn-unlock { background-color: #59939c; }
button.btn-table-cancel.btn-unlock:before { content: '解除'; }

/* pagination */
.pagination { justify-content: center; }
.page-item.active .page-link { background-color: #333333; border-color: #333333; }

/* breadcrumb  */
.breadcrumb { margin: 0 auto 20px auto; box-shadow: none; padding: 0 70px 0 0; font-size: 16px; }
.breadcrumb-item.active { color: #f0999a; }

/* bottom-menu */
nav.bottom-menu { position: fixed; left: 0; bottom: 0; width: 100%; z-index: 996; background-color: #f0999a; display: none; }
nav.bottom-menu ul { list-style: none; max-width: 640px; width: 100%; display: flex; background-color: #f0999a; padding: 0; margin: 0 auto;  overflow-x: auto; }
nav.bottom-menu li { width: 60px; flex: none; text-align: center; font-size: 14px; position: relative; margin: 0 5px; font-weight: 500; }
nav.bottom-menu li a { display: block; padding: 12px 5px; width: 100%; height: 100%; color: #ffffff; }
nav.bottom-menu li a img { width: 40px; height: auto; display: block; margin: 0 auto; }
nav.bottom-menu li a span { display: block; }
nav.bottom-menu li a.btm-cart { position: relative; }
nav.bottom-menu li a.btm-cart span.tab-note { position: absolute; top: 10px; right: 0px; width: 18px; line-height: 18px; text-align: center; background-color: #ba0000; color: #ffffff; font-size: 13px; border-radius: 99em; padding:0 2px; }

.navbar-expand-lg .navbar-nav .nav-link span.tab-note { position: absolute; top: 5px; right: 5px; width: 6px; height: 6px; background-color: #ba0000;  border-radius: 99em; }



/* tab-menu */
.tab-menu { margin-bottom: 15px; border: 0; }
.nav-tabs.tab-menu .nav-item { flex: 1; margin-right: 5px; }
.nav-tabs.tab-menu .nav-item:last-child { margin-right: 0; }
.nav-tabs.tab-menu button.nav-link { background-color: #f0999a; color: #fff; width: 100%; border-radius: 99em; border: 0; }
.nav-tabs.tab-menu button.nav-link.active { background-color: #bc5055; color: #ffffff; border: 0; }



/* 手機板 分類 大選單 */
.catalogry-box-menu { position: fixed; top: 60px; left: 0; border-radius: 0 50em 50em 0; background-color: #000; color: #ffffff; font-size: 26px; padding: 8px 10px; z-index: 995; cursor: pointer; display: none; }
.catalogry-box { position: fixed; width: 100%; max-width: 480px; height: 100%; top: 0; left: -100%; background-color: #ffffff; z-index: 996; opacity: 1; padding: 10px; display: flex; flex-wrap: wrap; align-content: flex-start; transition: all 0.5s ease; }
.catalogry-box.open { left: 0; } 
.catalogry-box .quick-search-box { flex: none; width: 100%; height: 40px; }
.catalogry-box .quick-search-box button.btn-back { width: 40px; background-color: #fff; padding: 0; font-size: 40px; color: #f0999a; }
.catalogry-box .quick-search-box button.btn-back:hover { color: #888888; } 
.catalogry-box .cata-main-title { text-align: center; font-size: 20px; width: 100%; flex: none; margin: 0; padding: 8px; border-bottom: 1px #eaeaea solid; color: #f0999a;}
.catalogry-box ul.main-catalogry { width: 100px; flex: none; height: calc(100% - 80px); padding-top: 10px; overflow-y: auto; align-content: flex-start; border-bottom: 0; }
.catalogry-box ul li { width: 100%; margin: 0; padding: 0; height: auto; }
.catalogry-box .main-catalogry button { padding: 8px 10px; font-size: 14px; margin: 2px 0; display: block; text-align: center; color: #f0999a; width: 100%; border: 0; border-radius: 2px 0 0 2px; }
.catalogry-box .main-catalogry button.active { background-color: #f0999a; color: #ffffff; }
.catalogry-box .catalogry-sub { flex: 1; border-left: 1px #eaeaea solid; height: calc(100% - 80px); padding: 10px 0 0 10px; overflow-y: auto; display: flex; flex-wrap: wrap; align-content: flex-start; }
.catalogry-box .tab-content.catalogry-sub > .active { display: flex; flex-wrap: wrap; }
.catalogry-box .catalogry-sub a { font-size: 14px; display: flex; align-items: center; justify-content: center; text-align: center; background-color: #f0999a; color: #ffffff;  border-radius: 4px; margin: 3px 3px; width: 78px; height: 78px; padding: 5px; }
.catalogry-box .catalogry-sub a:hover { background-color: #000000; }

/* footer */
footer { background-color: #f0999a; color: #fff; font-weight: 400; font-size: 13px; }
.footerText { padding: 20px 0;  border-bottom: 1px #e1e1e1 solid; color: #fff; }

footer nav.footer-link { margin-bottom: 30px; flex-wrap: wrap; }
footer nav.footer-link a { flex: 1; display: inline-block; color: #fff; padding: 15px 20px; position: relative; }
footer nav.footer-link a:after { content: ''; display: block; position: absolute; bottom: 0; left: 0; width: 0; border-bottom: 4px transparent solid; transition: all 0.3s ease; } 



.footer-info { display: flex; flex-wrap: wrap; padding: 30px 0;  }
.footer-info .footer-logo-box { width: 120px; flex: none; margin-right: 30px; }
.footer-info .footer-logo {  width: 100%; flex: none; }
.footer-info .info-list { flex: 1; vertical-align: middle; line-height: 1.6em; }
.footer-info .info-list i.bi { font-size: 20px; margin-right: 5px; vertical-align: middle; }
.info-list .footer-title {  padding-bottom: 5px; font-size: 1.4em;  }
.footer-info .info-list a {  display: inline-block; margin:  0 5px 10px 0; padding: 5px 10px; color: #fff; }

footer nav.footer-link a:hover { color: #fff;  }
footer nav.footer-link a:hover span { color: #f7ff02; }
footer nav.footer-link a:hover:after { border-bottom: 4px #dedc72 solid; width: 100%; } 
.foot-info { padding: 20px 0; display: flex; }

.footer-link-info { width: auto; flex: none; text-align: right; }
.footer-link-info a { color: #fff; margin:5px; font-size: 32px; }
.footer-link-info a:hover { color: #b1b1b1; }
.copyright {  margin-top: 30px; padding: 20px; border-top: 1px #e1e1e1  solid; }

.breadcrumb-item + .breadcrumb-item::before { font-size: 0.6em; margin-top: 0.6em; }

.modal-header { color: #f0999a; flex-wrap: wrap; }



/* scrollbar */
::-webkit-scrollbar-track
{   border-radius: 10px; background-color: transparent; margin:0 5px; background-color: rgba(255 255 255 / 30%); }
::-webkit-scrollbar
{ background-color: transparent; height: 6px; width: 6px; margin: 5px; }
::-webkit-scrollbar-thumb
{ border-radius: 10px; -webkit-shadow: inset 0 0 6px rgba(0,0,0,.3); background-color: #acadae; }