@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
/*-----初始化-----*/
html, body { overflow-x:hidden; -webkit-overflow-scrolling: touch; overflow-scrolling: touch;}
body{ margin:0; padding:0; color:#111; font:normal 16px/140% 'Roboto', "Noto Sans TC", sans-serif,  Helvetica; background-color: #f5f5f5;}
div, p, span, a, ul, ol, li, h1, h2, h3, h4, h5, h6, input, button, table, td, th, img, header, footer, main, section, aside, article, nav { margin:0; padding:0; border:none; box-sizing: border-box;word-wrap: break-word;word-break: break-all;}
ul, ol{ list-style: none;}
a{ display:block; text-decoration:none;}
img { display:block; border: none;}
button{cursor: pointer;}

a:hover{ transition-duration: 0.3s;}

input,select{ font-size: 16px; width: 100%;min-width: 0; height: 42px; line-height: 40px;border: 0; padding: 0 10px;background-color: transparent;}
textarea {font-size: 16px; width: 100%;min-width: 0;line-height:24px;border: 0; padding: 10px;background-color: transparent;}
input:disabled {background-color: #d4d4d4;}

select { padding-right: 35px; appearance:none; -moz-appearance:none;-webkit-appearance:none; background-image: url(/images/gift/input-select.svg);background-size: 30px auto;background-repeat: no-repeat;background-position: right 5px center; color: #666; }

.inputBox{background-color: #fff; border: 1px solid rgba(214, 214, 214, 1); border-radius: 4px;}

/* checkbox */
.label-check { display: inline-block; margin-bottom: 0; cursor: pointer; }
.label-check span { vertical-align: middle; }
.label-check input[type="checkbox"] { display: none; }
.label-check input[type="checkbox"] + .icon {  flex: 0 0 auto;  position: relative;  display: inline-block;  width: 20px;  height: 20px;  margin-right: 4px;  background: #fff;  background-size: 100%;  border: solid 2px #d6d6d6; border-radius: 4px; transition: 0.1s;}
.label-check input[type="checkbox"]:checked + .icon { background: #fff url(/images/gift/check-tick.svg) center no-repeat; background-size: auto 20px;  border: none; }
.label-check input[type="checkbox"]:disabled +.icon { border-color: #d6d6d6; }
.label-check input[type="checkbox"]:checked:disabled + .icon { background: #ccc url(/images/gift/check-tick.svg) center no-repeat; background-size: auto 20px; border-color: #d6d6d6; }

/* radio */
.label-radio { display: flex; flex-wrap: wrap; align-items: center; margin-bottom: 0; }
.label-radio input[type="radio"] { display: none; }
.label-radio span { line-height: 24px; }
.label-radio input[type="radio"] + .icon {
  flex: 0 0 auto;
  position: relative;
  display: inline-block;
  width: 21px;
  height: 21px;
  margin: 0px 10px 0 0;
  vertical-align: middle;
  background: #fff;
  background-size: 100%;
  border: solid 2px #d6d6d6;
  border-radius: 10px;
}
.label-radio input[type="radio"]:checked + .icon::before {
  content: "";
  display: block;
  position: absolute;
  top: 3px;
  left: 3px;
  width: 11px;
  height: 11px;
  border-radius: 6px;
  background: #209cff;
}
.label-radio input[type="radio"]:disabled + .icon {
  background-color: #ccc;
}
.label-radio input[type="radio"]:checked:disabled + .icon::before {
  background: #666;
}



/*-----base-----*/
.wrapper{ position:relative; min-height:100vh; padding-top: 94px;}

.d-flex{ display:flex !important;justify-content: space-between; }
.d-flex.d-center{justify-content: center; align-items: center;}
.d-flex.a-center{ align-items: center;}
.d-flex.s-around{justify-content: space-around;align-items: center}
.d-flex.j-end{justify-content: end;}
.d-flex.j-left{ justify-content: left;}

.d-inlineB{display: inline-block !important;}
.d-block{ display: block !important;}

/*對齊*/
.tR{text-align: right !important;}
.tL{text-align: left !important;}
.tC{text-align: center !important;}

/*間距*/
.mt-1{margin-top: 10px;}
.mt-7{margin-top: 70px;}
.mb-0{ margin-bottom:0px !important;}
.mb-05{ margin-bottom:5px;}
.mb-1{ margin-bottom: 10px !important;}
.mb-2{ margin-bottom: 20px !important;}
.mb-3{ margin-bottom: 30px !important;}
.mb-4{ margin-bottom: 40px;}
.m-auto{ margin-right:auto; margin-left: auto;}
.m-05{margin:0 5px;}


/*內距*/
.padd-0{padding: 0 !important;}
.padd-1{padding: 10px !important;}
.paddB-0{padding-bottom: 0 !important;}
.paddB-80{padding-bottom: 80px !important;}
.paddL-2{padding-left: 20px;}
.paddLR-1{padding: 0 10px;}
.paddR-1{padding-right: 10px;}
.paddR-2{padding-right: 20px;}
.paddTB-2{padding: 20px 0;}
.paddT-1{padding-top:10px; }
/*文字大小*/
.f-tiny{font-size: 14px; line-height: 20px;}
.f-small{font-size: 15px;}
.f-normal{font-size: 16px;}
.f-mid{font-size: 18px;}
.f-big{font-size: 20px;}
.f-huge{font-size: 24px;}
.f-large{font-size: 28px; line-height: 30px;}

/*文字行高*/
.lh-140{line-height: 140%;}
.lh-180{ line-height: 180%;}

/*文字顏色*/
.c-key{color: #25A535 !important;}
.c-spec{color: #73bc60; !important;}
.c-pink{color: rgba(229, 114, 114, 1);}
.c-red{ color: #c43826 !important;}
.c-white{ color: #fff;}
.c-gray{color: #8a919c;}
.c-dark{color: #333;}
.c-sub{color: #8a919c;}
.c-lightG{color: #cacaca;}


/*文字粗細*/
.fw-normal{ font-weight:normal;}
.fw-500{ font-weight: 500;}
.fw-bold{ font-weight: bold;}
.td-none{ text-decoration: none !important;}

/*背景*/
.bg-dark{ background-color: #f12b95 !important; padding: 20px !important;}
.bg-red{background-color: #c43826;}

/*分隔*/
.br{clear: both;}
.hr{ background-color:#ebeff7; height: 1px; margin-bottom: 20px;}

/*tag*/
.tag{border-radius: 4px; background-color: #daa360; color: #fff; font-size: 14px; padding: 2px 4px; margin-left: 6px; vertical-align: bottom;}

/*自設寬度*/
.w-m{max-width: 640px; margin: 0 auto;}

.pagesize{ padding: 0 10px; max-width: 920px; margin: 0 auto;}

/*-----header-----*/
header{ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); color: #212529;background-color: #fff;-webkit-text-size-adjust: 100%;letter-spacing: 0;width: 100%;position: fixed;top: 0;z-index: 1011;}
header:before{content: ''; height: 4px;background: linear-gradient(89.96deg, #209cff 18.76%, #47d382 51.88%, #ff874d 85.51%);transition: all 0.2s ease-in-out;display: block;}
header .pagesize{ display: flex; justify-content: space-between; align-items: center;padding: 18px 0; height: 90px;}
header .logo{ width: 158px; height: 32px; background: url(/images/gift/logo.svg) center no-repeat; background-size: contain; font-size: 0; margin-right: 10px; color: transparent; position: relative;}
header .logo a{ position: absolute;top: 0; right: 0; left: 0; bottom: 0;font-size: 0; color: transparent; }
.h-search{ background-color:rgba(250, 250, 250, 1); height: 44px; border-radius: 2px; padding: 10px 10px 10px 0; flex: 1 1 auto; display: flex; justify-content: space-between; align-items: center;}
.h-search input{color: #999; font-size: 16px; height: 44px; line-height: 44px;}
.h-search input[placeholder]{color:#000;}
.h-search .btn-close, .h-search .btn-search { width: 30px; height: 30px; display: block; margin-left: 10px;}
.h-search .btn-close{ background: url(/images/gift/btn-close.svg) center no-repeat; background-size: contain;}
.h-search .btn-search{ background: url(/images/gift/btn-search.svg) center no-repeat; background-size: contain;}
.h-point{ font-size: 14px; padding: 0 10px; color: rgba(32, 156, 255, 1); line-height: 24px; height: 20px; white-space:nowrap;}
.h-member{display: flex; align-items: center;}/*會員*/
.h-member-img {position: relative; width: 42px; height: 42px; border-radius: 100%;  background-size: cover; background-position: center; overflow: hidden; }
.h-member-img img{width: 100%; height:auto;}
.h-member-img a{position: absolute;top: 0; right: 0; left: 0; bottom: 0;font-size: 0; color: transparent; }

/* footer */
footer .container{margin: 0 auto;}
.footer-innerlink li + li{ padding-left: 10px;}
.footer-innerlink li + li::before {content: '|'; position: absolute; left: -10px; top: 0}
.footer-innerlink li { margin-bottom: 10px;display: inline-block; position: relative;  line-height: 24px; padding-right: 10px; }

/*-----kvArea-----*/
.KvArea { position: relative;}
.KvArea img { display: block;width: 100%;}
.KvArea .kvBox { display: block;}
.KvArea .swiper { overflow: visible;}
.KvArea .swiper-pagination {height: 14px;  line-height: 14px;  left: 50%;  transform: translateX(-50%);}

.KvArea .swiper-horizontal>.swiper-pagination-bullets,.KvArea  .swiper-pagination-bullets.swiper-pagination-horizontal, .KvArea .swiper-pagination-custom,
.KvArea .swiper-pagination-fraction{ bottom: 15px;left: 50%;}
.KvArea .swiper-pagination-bullet {width: 12px; height: 12px;  margin: 0 0 0 14px;  opacity: 1;  border-radius:100%;  background-color: rgba(204, 204, 204, 1);  transition: 0.2s;}
.KvArea .swiper-pagination-bullet-active {background-color: rgba(32, 156, 255, 1);}

/*-----main-----*/
main{max-width: 920px; margin: 0 auto;}
.content{background-color: #fff; padding: 22px 32px;box-shadow: 0px 2px 4px 0px rgba(223, 223, 223, 1);}
.content + .content{margin-top: 20px;}
.content.content-card{ padding: 20px; margin-top: 70px; margin-bottom: 40px;}
/*標題樣式*/
.title{color: #000; font-size: 24px; text-align: left; margin-bottom: 40px;}
.sub-title{color: #000; font-size: 20px;text-align: left; margin-bottom:20px;}

.title-bar{background: linear-gradient(90deg, #FF8B8B 0%, #CC4B4B 100%); padding: 10px; text-align: center; position: relative;}/*漸層*/
.title-bar .tt{font-size: 24px; line-height: 30px; font-weight: bold; color: #fff; text-shadow:0px 4px 0px rgba(0, 0, 0, 0.25); display: inline-block;}
.title-bar a.more{ color: #fff; font-size: 14px; line-height: 54px; height: 50px; position: absolute; right: 10px; top:0; padding-right: 24px;}
.title-bar a.more::after{ content: ''; width: 20px; height: 20px; background: url(/images/gift/arrow-right-w.svg) center no-repeat; background-size: 20px; position: absolute; right: 0; top: 50%; transform: translateY(-50%);}
/*主題*/
.popular { margin-top: 40px;}
.popular-list{ display: flex; justify-content: space-around; align-items:flex-start; flex-wrap: wrap;}
.popular-list li{width: 100px; text-align: center; margin: 0 50px 40px; position: relative;}
.popular-list li a{position: absolute; top: 0; right: 0;bottom: 0; left: 0; display: block;}
.popular-list .popular-img{ width: 100px; height: 100px; margin-bottom:10px; background: rgba(217, 217, 217, 1); border-radius: 100%; overflow: hidden;}
.popular-list .popular-img img{width: 100%; height: auto;}
.popular-list .popular-title{ font-size: 21px; line-height: 30px;}

/*近期送禮名單*/
.recent-gift{background-color: #fff; padding: 10px; }
.swiper-gift-list .swiper-slide{ text-align: center; font-size: 18px;  margin: 10px; }

.recent-ic{width: 24px; height: 24px; display: inline-block; vertical-align: bottom;}
.recent-ic img{width: 100%; height: auto;}

.recent-btn{ border-radius: 4px; border: 1px solid rgba(229, 114, 114, 1); color:  rgba(229, 114, 114, 1); font-size: 14px; line-height: 42px; height: 40px; text-align: center;}


/*輪播廣告*/
.medBn{margin-bottom: 40px; position: relative; padding: 0 50px;}
.medBn .swiper-slide {display: flex; justify-content: center; align-items: center;}
.medBn .swiper-slide { width: 352px; height: 150px; background: rgba(217, 217, 217, 1); display: block;}
.medBn .swiper-slide img{width: 100%; height: auto;}
.medBn .medBn-swiper-button-prev,
.medBn .medBn-swiper-button-next {position: absolute; top: calc(50% - 15px); width: 30px;  height: 30px;transition: opacity 0.2s; cursor: pointer;}
.medBn .medBn-swiper-button-prev.swiper-button-disabled,
.medBn .medBn-swiper-button-next.swiper-button-disabled { opacity: 0.4;}
.medBn .medBn-swiper-button-prev {left: 0; background: url(/images/gift/arrow-right-g.svg) center center no-repeat; background-size: 20px; transform: rotate(180deg);}
.medBn .medBn-swiper-button-next { right: 0;  background: url(/images/gift/arrow-right-g.svg) center center no-repeat; background-size:20px;}

/*分類頁籤*/
.tab-scroll{ overflow-x: auto;}
.tab-scroll .tab {display: flex; }
.tab-scroll .tab a{white-space:nowrap; min-width: initial;}
.tab a{ border-radius: 4px; border: 1px solid #25A535; font-size: 16px; line-height: 20px; color: #25A535; text-align: center; padding: 4px 10px; display: inline-block; margin: 0 10px 10px 0; min-width: 100px;}
.tab a.on, .tab a:hover, .tab a:focus{ border: 1px solid rgba(37, 165, 53, 1);  color: rgba(37, 165, 53, 1);}

/*禮物內容*/
.tkt-pdBox{  box-shadow: 0px 2px 4px 0px rgba(223, 223, 223, 1); padding: 10px; position: relative;}
.tkt-pdBox .tkt-image{  margin: 0 auto 10px;}
.tkt-pdBox .tkt-image img{ width: auto; height: 100px; margin: 0 auto;}
.tkt-pdBox .tkt-txt{font-size: 14px; line-height: 20px; color: #222; text-align: left; margin-bottom: 20px;}
.tkt-btnset{width: 220px;}
.tkt-btnset > div{ width: 100%; margin: 5px 0;}
.tkt-flex{display: flex; justify-content: space-between; align-items: end; min-height: 50px;}

.tkt-point{ font-size: 14px; color: #73bc60;font-weight: 500; padding-left: 24px; position: relative;line-height: 24px;}
.tkt-point::before{content: ''; background: url(/images/gift/tkt-popup-p.png) 0 0 no-repeat; background-size: 24px; width: 24px; height: 24px; position: absolute; left: 0; top: 0;}
.tkt-price{text-align: right;}
.tkt-price-rrp{ font-size: 14px; color: #9b9b9b; text-decoration:line-through;}
.tkt-price-sp{font-size: 22px; color: #f98116; font-weight: 500;}
.tkt-price-sp span{font-size: 16px;}
.tag-sell{ position: absolute; top: 0; right: 10px; background: url(/images/gift/bg-sell-tag.svg) 0 0 no-repeat; background-size: contain; width: 30px; height: 40px; padding: 5px 0 0; text-align: center; color: #fff; font-size: 12px;}
.tkt-pdBox a.more-info{ position: absolute; top: 0; right: 0; bottom: 0; left: 0;}

/*禮物靈感*/
.gift-refer{position: relative;}
.gift-refer .swiper { padding:10px 10px 20px; }
.gift-refer .refer-swiper-button-prev,
.gift-refer .refer-swiper-button-next {position: absolute; top: calc(50% - 15px); width: 30px;  height: 30px;transition: opacity 0.2s; cursor: pointer;}
.gift-refer .refer-swiper-button-prev.swiper-button-disabled,
.gift-refer .refer-swiper-button-next.swiper-button-disabled { opacity: 0.4;}
.gift-refer .refer-swiper-button-prev {left: -20px; background: url(/images/gift/arrow-right-g.svg) center center no-repeat; background-size: 20px; transform: rotate(180deg);}
.gift-refer .refer-swiper-button-next { right: -20px;  background: url(/images/gift/arrow-right-g.svg) center center no-repeat; background-size:20px; }

.gift-refer .swiper-horizontal>.swiper-pagination-bullets,.gift-refer .swiper-pagination-bullets.swiper-pagination-horizontal, .gift-refer .swiper-pagination-custom,
.gift-refer .swiper-pagination-fraction{ bottom: -14px;}
.gift-refer .swiper-pagination-bullet {width: 10px; height: 10px;  margin: 0 0 0 10px;  opacity: 1;  border-radius:100%;  background-color: rgba(204, 204, 204, 1);  transition: 0.2s;}
.gift-refer .swiper-pagination-bullet-active {background-color: rgba(32, 156, 255, 1);}

/*禮物滑動頁籤*/
.swiper-gift-budget .swiper-slide, .swiper-gift-item .swiper-slide{width: auto;}
.swiper-gift-center .swiper-slide{width: auto; }
.swiper-gift-center .swiper-wrapper{justify-content: center; }
.tab.swiper-gift-center a{border: 1px solid #25A535; color: #25A535; margin-bottom: 0;}
.tab.swiper-gift-center a.on, .tab.swiper-gift-center a:hover, .tab.swiper-gift-center a:focus{border: 1px solid rgba(0, 0, 0, 0.2); background-color: #25A535; color: #fff;}

.tab.swiper a{margin-right: 0;}

.gift-budget{position: relative;}
.gift-budget .swiper { padding:10px 10px 20px; }
.gift-budget .budget-swiper-button-prev,
.gift-budget .budget-swiper-button-next {position: absolute; top: calc(50% - 15px); width: 30px;  height: 30px;transition: opacity 0.2s; cursor: pointer;}
.gift-budget .budget-swiper-button-prev.swiper-button-disabled,
.gift-budget .budget-swiper-button-next.swiper-button-disabled { opacity: 0.4;}
.gift-budget .budget-swiper-button-prev {left: -20px; background: url(/images/gift/arrow-right-g.svg) center center no-repeat; background-size: 20px; transform: rotate(180deg);}
.gift-budget .budget-swiper-button-next { right: -20px;  background: url(/images/gift/arrow-right-g.svg) center center no-repeat; background-size:20px; }

.gift-budget .swiper-horizontal>.swiper-pagination-bullets,.gift-budget .swiper-pagination-bullets.swiper-pagination-horizontal, .gift-budget .swiper-pagination-custom,
.gift-budget .swiper-pagination-fraction{ bottom: -14px;}
.gift-budget .swiper-pagination-bullet {width: 10px; height: 10px;  margin: 0 0 0 10px;  opacity: 1;  border-radius:100%;  background-color: rgba(204, 204, 204, 1);  transition: 0.2s;}
.gift-budget .swiper-pagination-bullet-active {background-color: rgba(32, 156, 255, 1);}

/*禮物類型 - 卡片*/
.gift-item{ display: flex;  align-items: flex-start; flex-wrap:wrap; margin-left: -10px; padding:10px 0 0; margin-bottom: 20px;}
.gift-item > div{ width: 206px; min-height: 240px; margin: 0 0 10px 10px; position: relative;}

.view-more{ text-align: right; margin-bottom: 10px;}
.view-more a{color:rgba(32, 156, 255, 1); font-size: 14px; padding-right: 24px;line-height: 26px; height: 24px; position: relative;}
.view-more a::after{ content: ''; width: 24px; height: 24px; background: url(/images/gift/arrow-right-b.svg) center no-repeat; background-size: contain; position: absolute; right: 0; top: 50%; transform: translateY(-50%);}

.load-more{ min-height: 80px;  display: flex; justify-content: center; align-items: center; font-size: 20px; color:rgba(153, 153, 153, 1);}

/*禮物類型 - 清單*/
.gift-item.gift-item-list{ display: block; margin-left: 0; padding:10px 0 0; margin-bottom: 20px;}
.gift-item-list > div{ width: 100%; min-height: 160px; margin: 0 0 10px 0; position: relative; padding: 10px 30px 50px 160px; }

/*禮物內容 .gift-item-list*/
.gift-item-list .tkt-pdBox .tkt-image{ margin: 0; display: flex; justify-content: center; align-items: center; width: 140px; height: 140px;position: absolute; top: 10px; left: 10px;}
.gift-item-list .tkt-pdBox .tkt-image img{ width: auto; height: 120px; margin: 0 auto;}
.gift-item-list .tkt-pdBox .tkt-txt{font-size: 16px;  margin-bottom: 0; }
.gift-item-list .tkt-flex{display: flex; justify-content: space-between; align-items: end; position: absolute; bottom: 10px; right: 30px; left:170px;}
.gift-item-list .tag-sell{ right: initial; left: 10px;}
.gift-item-list .tkt-pdBox a.more-info{ position: absolute; top: 0; right: 0; bottom: 0; left: 0;}



/*頁面頁籤*/
.tab-page{ display: flex; justify-content: center; padding: 24px 0 0;}
.tab-page a{flex: 1 1 33%; text-align: center; font-size: 20px;padding: 12px; color: #25A535;border-top-left-radius:12px; border-top-right-radius: 12px; }
.tab-page a.on, .tab-page a:hover{  background-color:  #25A535; color: #fff;}

/*篩選*/
.filter-bar{padding: 0 0 10px; border-bottom: 2px solid rgba(234, 234, 234, 1); display: flex; justify-content: space-between; margin: 0 0 20px; color: rgba(112, 112, 112, 1);}
.filter-bar a{display: inline-block; width: 24px; height: 24px; vertical-align: middle;}
.filter-btn{display: flex;}
.filter-btn a{margin-left: 10px;}
a.filter-disabled{  background: url(/images/gift/ic-filter-none.svg) center no-repeat; background-size: 20px;}
a.filter-up{  background: url(/images/gift/ic-filter-price.svg) center no-repeat; background-size: 20px;}
a.filter-down{  background: url(/images/gift/ic-filter-price.svg) center no-repeat; background-size: 20px; transform: rotate(180deg);}
a.filter-list{background: url(/images/gift/ic-filter-list.svg) center no-repeat; background-size:  20px; opacity: .6;}
a.filter-card{background: url(/images/gift/ic-filter-card.svg) center no-repeat; background-size: 20px;opacity: .6;}
a.filter-list.on, a.filter-card.on, a.filter-list:focus, a.filter-card:focus { opacity: 1;}

.bottom-text{ padding: 40px 0; text-align: center; color: rgba(112, 112, 112, 1); font-size: 20px;}

/*禮物名單*/
.pageTitle{ background-color: #ecf6ff; border-bottom: 2px solid rgba(32, 156, 255, 1); padding: 20px 32px; display: flex; justify-content: space-between; align-items: center;}
.pageTitle .inputBox{ width: 180px;}
.pageTitle .inputBox a{width: 100%; height: 36px; line-height: 36px; background-color: #25A535; border: 1px solid rgba(0, 0, 0, 0.2); color: #fff; text-align:center; border-radius: 2px;}

/*送禮名單*/
.gift-title {font-size: 24px; font-weight: bold; padding:20px 20px 20px 5px;}
.gift-list > li{display: flex; align-items: center;  padding: 20px; line-height: 24px;font-size: 18px; }
.gift-list > li > div{margin-left: 20px;}
.gift-list .gift-day{font-size: 22px; width: 170px;}
.gift-list .gift-sort{width: 150px;}
.gift-list .gift-ic{width: 24px; height:24px; display: inline-block; vertical-align: middle; text-align: center;}
.gift-list .gift-ic img{width: 20px; height:20px; display: block;}
.gift-list .gift-member{ font-size: 18px; flex: 1 1 auto; /*padding-right: 30px;*/ position: relative; width: 140px;}
.gift-list .gift-member .phone{font-size: 16px; color:rgba(153, 153, 153, 1); display: block; }
.gift-list .alarm{width: 30px; height: 30px; background:url(/images/gift/ic-alarm.svg) center no-repeat; background-size: contain; right: 0; top: 50%; /*position: absolute; margin-top: -15px;*/}
.gift-list .edit-bar{ display: flex; align-items: center; justify-content: right; }
.gift-list .edit-bar > a{ color: #999; margin-left: 20px; padding-left: 30px; position: relative;}
.gift-list .edit-bar > a:first-child{margin-left: 0;}
.gift-list .edit-bar > a::before{ content: ''; width: 24px; height: 24px; position: absolute; left: 0; top: 0;}
.gift-list .edit-bar > a.a-edit::before{ background: url(/images/gift/ic-edit.svg) 0 center no-repeat; background-size: contain;}
.gift-list .edit-bar > a.a-del::before{ background: url(/images/gift/ic-del.svg) 0 center no-repeat; background-size:contain;}
.gift-list .edit-bar > a.a-close{  display: none;}

.gift-list > li.gift-select{ border-radius: 8px; border: 1px solid #25A535; background-color: #fcfef9;}
.gift-list .go-pick{ flex: 1 1 auto; width: 100px;}
.gift-list .go-pick a{width: 100%; height: 48px; line-height: 48px; background-color: #25A535; border: 1px solid rgba(0, 0, 0, 0.2); color: #fff; text-align:center; border-radius: 4px;}


/*熱門禮物*/
.pageBn{padding: 20px 0;}
.pageBn img{width: 100%; height: auto;}

/*popup*/
.page_cover{position: fixed; top: 0; right: 0; bottom: 0; left: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.3);z-index: -2;}

.openPopup .popup {display: block;position: fixed; top: 0;bottom: 0; left: 0; right: 0; overflow-y: auto;  width: 100%; height: 100%; padding: 140px 20px 40px;  background: rgba(0, 0, 0, 0.6);  z-index: 2000;}
.popup-area {  position: relative;  z-index: 2001;  width: 100%;  max-width: 720px; margin: 0 auto;background: #fff; border-radius: 16px; padding: 40px 46px 20px;}
.popup-close {  position: absolute;  top:16px;  right: 16px;  width: 32px;  height: 32px;  background: url(/images/gift/popup-close.svg) center center no-repeat;  background-size: contain;  z-index: 10;}
.popup-area .popup-title{font-size: 24px; margin-bottom: 20px; line-height: 30px; }
.popup-area .popup-title .side-btn{ border: 1px solid rgba(32, 156, 255, 1); color: rgba(32, 156, 255, 1); padding: 10px; font-size: 18px;}

.formBox{margin-bottom: 30px;}
.formBox > li{display: flex; align-items: center; margin-bottom: 10px;}
.formBox > li .formBox-title{font-size: 18px; min-width: 75px;}
.formBox > li .inputBox{flex: 1 1 auto; margin-left: 10px;}
.formBox.flex-2{display: flex; flex-wrap: wrap;}
.formBox.flex-2 > li{ flex: 1 1 auto; min-width: 50%;}


/*按鈕*/
.btn-set{display: flex; justify-content: center; align-items: center; flex-wrap: wrap;}
.btn-set a{color: #fff;background-color: rgba(32, 156, 255, 1); font-size: 20px;height: 50px; border-radius: 50px; text-align: center; display: flex; justify-content: center; align-items: center; margin: 0 0 10px 20px; flex: 1 1 auto;}
.btn-set > a:first-child{ margin-left: 0;}
.btn-set a.bg-grey{ background-color: rgba(234, 234, 234, 1); color: rgba(112, 112, 112, 1);}
.btn-set.no-flex {display: block;}
.btn-set.no-flex > a{ width: 100%; margin-left: 0; margin-top: 10px;}

/*表格*/
table.td-style thead th{ border: none;border-top: 1px solid #d6d6d6; border-bottom:1px solid #d6d6d6; font-size: 18px; color:rgba(112, 112, 112, 1);padding: 10px; }
.td-style th, .td-style td{font-weight: normal; text-align: center;}
.td-style td{color: rgba(153, 153, 153, 1);padding:8px 10px; }
.td-style a.del{ color: rgba(229, 114, 114, 1); font-size: 18px;}

.td-style tbody > tr{position: relative;border: 1px solid #fff; }
.td-style tbody > tr:hover{ background-color:rgba(230, 243, 253, 1); border-radius: 4px; box-shadow:inset 0 0 0 1px rgba(32, 156, 255, 1); }


/*卷軸-凍結表格*/
.scrollBox{max-height: 200px; overflow-y: auto;border-bottom:1px solid #d6d6d6;}
.scrollBox .td-style{ table-layout: fixed;}
.scrollBox .td-style thead th{  position:sticky;word-break: keep-all;top:0; background-color: #fff;z-index:3;}

/*祝福卡片*/
.check-card{ width: 600px;  background-size: cover; background-repeat: no-repeat; margin: 0 auto;}
.card-layout{display: flex; flex-wrap: wrap; flex-direction: column; align-items:stretch; padding: 40px;height: 330px; }
.card-layout > div{flex: 1 1 auto; font-size: 20px;}
.card-recipient{ text-align: left;}
.card-con{text-align: center; display: flex; justify-content: center; align-items: center;}
.card-sender{text-align: right; display: flex; justify-content: flex-end; align-items: flex-end;}

.gift-get{display: flex; justify-content: space-around; align-items: center; padding-bottom: 40px;}
.gift-get > div{flex: 1 1 50%;}

.gift-get .tkt-frame{ width: 150px; height: 150px; background:url(/images/gift/tkt-frame-bg.png) 0 0 no-repeat; background-size: cover; padding-top: 45px; text-align: center; position: relative; }
.gift-get .tkt-frame::after{content: ''; width: 150px; height: 150px; background: url(/images/gift/tkt-frame-gift.png) 0 0 no-repeat; background-size: contain; position: absolute; bottom: -6px; left: 0;}
.gift-get .tkt-frame img{width: 100px; height: 100px; margin: 0 auto;}

/*loading spinner*/
.gift-overlay {position: fixed; top: 0; right: 0; z-index: 100; width: 100%; height:100%; display: none; background: rgba(0,0,0,0.6);}
.gift-cv-spinner { height: 100%; display: flex; justify-content: center; align-items: center;}
.gift-spinner { width: 40px; height: 40px; border: 4px #ddd solid; border-top: 4px #6CCF53 solid; border-radius: 50%; animation: sp-anime 0.8s infinite linear;}
@keyframes sp-anime {
  100% {
    transform: rotate(360deg);
  }
}

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

  /*禮物類型 - 卡片*/
  .gift-item > div{ width: calc(33.2% - 10px); margin: 0 0 10px 10px;}

  /*禮物類型 - 清單*/
  .gift-item-list > div{ width: 100%; min-height: 160px; margin: 0 0 10px 0; position: relative;  }




  /*禮物滑動頁籤*/
  .swiper-gift-center .swiper-wrapper{justify-content:flex-start; }

}


@media screen and (max-width:767px) {
  .m-break{display: block;}
  /*-----main-----*/
  .content{ padding:20px 10px 10px;}
  .content.content-card{ padding: 10px; margin: 20px 0; }
  /*內距*/
  .m-paddT-0{padding-top: 0 !important;}
  .m-paddRL-2{padding-left: 20px; padding-right: 20px;}

  /*-----base-----*/
  .wrapper{ padding-top: 50px;}
  .pagesize{ padding: 0 10px;}

  /*-----header-----*/
  header .pagesize{ padding:10px; height:50px;}
  header .logo{ width: 100px; height: 20px;min-width: 80px; }
  .h-search{background-color: transparent; flex: 1 1 auto; justify-content: right; padding: 0 8px 0 0;}
  .h-search input{display: none;}
  .h-search .btn-close{display: none; margin-left: 8px;}
  .h-search .btn-search{background-size: 24px; margin-left: 8px;}
  .h-member-img {width: 32px; height: 32px;}

  .h-search.m-show .btn-close, .h-search.m-show > input{ display: block;}
  .h-search.m-show{ background-color: rgba(250, 250, 250, 1);}


  /*輪播廣告*/
  .medBn{padding: 0 30px;}
  .medBn .medBn-swiper-button-prev,
  .medBn .medBn-swiper-button-next {background-size: 30px;}

  /*主題*/
  .popular .title{ padding: 0 20px; font-size: 20px;}
  .popular-list li{width: calc(25% - 10px); margin: 0 5px 20px; text-align: center;}
  .popular-list .popular-img{ width: 60px; height: 60px;margin: 0 auto 10px; }
  .popular-list .popular-title{ font-size: 16px; line-height: 20px;}

  /*禮物類型 - 卡片*/
  .gift-item > div{ width: calc(50% - 10px); margin: 0 0 10px 10px;}
  .load-more{  min-height: 50px; margin-bottom: 10px;}

  /*禮物類型 - 清單*/
  .gift-item-list > div{ width: 100%; min-height: 160px; margin: 0 0 10px 0; position: relative; padding: 10px 10px 50px 130px; }

  /*禮物內容 .gift-item-list*/
  .gift-item-list .tkt-pdBox .tkt-image{ width: 120px; height: 120px;position: absolute; top: 10px; left: 10px;}
  .gift-item-list .tkt-pdBox .tkt-image img{ width: auto; height: 100px; margin: 0 auto;}
  .gift-item-list .tkt-flex{right: 10px; left: 140px;}

  /*送禮名單*/
  .gift-title{font-size: 18px;  padding:10px;}
  .gift-list > li{padding:20px 10px; line-height: 20px;font-size: 16px; position: relative; }
  .gift-list > li > div{margin-left: 10px;}
  .gift-list .gift-day{font-size: 18px; width: initial; min-width: 60px;}
  /*.gift-list .gift-sort{display: none;}*/
  /*.gift-list .gift-member{display: none;}*/
  /*.gift-list .gift-ic{display: none;}*/

  .gift-list .edit-bar{ width: 30px; height: 30px;  }
  .gift-list .edit-bar::before{content: ''; width: 30px; height: 30px; background: url(/images/gift/ic-list-more.svg) center no-repeat; background-size: contain; cursor: pointer;}
  .gift-list .edit-bar > a{ margin-left:0; padding-left: 0;}
  .gift-list .edit-bar > a.a-edit, .gift-list .edit-bar > a.a-del, .gift-list .edit-bar > a.a-close{display: none;}

  .edit-bar.m-open{ position: absolute; top: 0; right: 0; bottom: 0; height: 80px;  background-color: #fbfbfb;}
  .edit-bar.m-open::before{display: none;}
  .gift-list .edit-bar.m-open > a.a-edit,
  .gift-list .edit-bar.m-open > a.a-del,
  .gift-list .edit-bar.m-open > a.a-close{height: 80px; min-width: 80px; display: block; padding: 48px 20px 10px; text-align: center; color: #fff; background-position: center top 10px;}

  .gift-list .edit-bar > a::before{ width: 30px; height:30px;left: 50%; top: 10px; margin-left: -15px;}
  .gift-list .edit-bar.m-open > a.a-close::before{background: url(/images/gift/btn-close.svg) center no-repeat; background-size: contain;}
  .gift-list .edit-bar.m-open > a.a-edit::before, .gift-list .edit-bar.m-open > a.a-del::before{  filter: grayscale(100%) brightness(1000%);}


  .gift-list .edit-bar.m-open > a.a-edit{ background-color: #73bd5e; color: #fff;}
  .gift-list .edit-bar.m-open > a.a-del{ background-color: #e57172; color: #fff;}
  .gift-list .edit-bar.m-open > a.a-close{ background-color: #f8f9fa; color:#333;}

  /*.gift-list > li.gift-select .gift-sort{ display: block; width: 70px;}*/

  /*popup*/
  .openPopup .popup{padding-top: 40px;}
  .popup-area{padding: 40px 20px 20px;}
  .popup-close{top: 10px; right: 10px;}
  .formBox.flex-2 > li{ min-width: initial; margin-right: 20px;}

  /*按鈕*/
  .btn-set a{ font-size: 18px; margin: 0 0 10px 10px;}

  /*祝福卡片*/
  .check-card{width: 355px;}
  .card-layout{padding: 20px;height: 195px; }
  .card-layout > div{font-size: 16px;}

  .gift-get{display: block; padding-bottom:0;}
  .gift-get > div{width: 100%; text-align: center; margin-bottom: 40px;}

  .gift-list > li.gift-select .gift-member {display:block; padding-right: 0; font-size: 16px;}
  .gift-list .gift-member .phone {font-size: 12px;}

  .gift-refer .swiper-horizontal>.swiper-pagination-bullets,.gift-refer .swiper-pagination-bullets.swiper-pagination-horizontal, .gift-refer .swiper-pagination-custom,
  .gift-refer .swiper-pagination-fraction{ bottom: -7px;}
}