@charset "UTF-8";
/* CSS Document */
*{margin: 0; padding:0; -webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;transition: 0.3s;} 
button{background-color:transparent;outline:none;border:none;cursor:pointer;margin:0;padding:0;display:block;}
a:focus, button:focus{outline:0;border:none;}
a:hover{color: #fff;}
a{display:block;}
img { border-style: none;vertical-align: middle; }
button:focus ,button{ outline: none;border: none;border: 0; }
body{font-family: 'Roboto','Noto Sans TC',' 微軟正黑體', 'Microsoft JhengHei','文泉驛正黑',' WenQuanYi Zen Hei',' 儷黑 Pro, LiHei Pro';font-weight:500; }
.wrap{background:#ff4855 url(../img/work/bg-pattern.png);overflow-x: hidden;width:100%;}
.container-fluid{padding: 0;}
.container{padding: 0 0.5em 0;}
h6 img{max-width:600px;margin: auto;display: block;width: 85%;}

.bg-repeat{ position: relative;z-index: 0;width: 100%;}
.head-box{position: relative;background:url(../img/work/bg-head.png) top center repeat-x;background-size: contain;padding-top: 50p;}
.head-box .dv-bg{background:url(../img/work/head-bg-mb.png) top center no-repeat;padding-top: 47px;background-size: cover;}
.head-dv{ position:relative;max-width:950px;margin: auto; }
.head-dv img{position: absolute;top: 0;}
.head-dv h1{position:relative;max-width:650px;height: 385px;margin: auto;width: 90%;}
.head-dv h1 #mainSlider img{position: absolute;top: 0;animation: crest12Move1 6s linear infinite both;}

.head-dv img{width:100%;}
#tt_01 li:first-child img{margin-top:32px;margin-bottom: 32px;}
#tt_02 li:first-child img{margin-bottom: 32px;margin-top: 64px;}

.kv-h1-dv-pc{display: none;}
.kv-h1-dv-mb{display: block;}
.deco1{display: none;}
.deco2{display: none;transform: rotateY(180deg);}
.deco3{display: none;}
.deco4{display: none;}
.deco5{display: none;}



/* 99攻略 */
.calendar-box{transform: translate(0px, -86px);}
.calendar-box .dv-bg{position: relative; margin: auto;position: relative;}
.calendar-box .dv-bg .deco1{position: absolute; top:180px;left:-105px;}
.calendar-box .dv-bg .deco2{position: absolute;bottom: 200px;right:-105px;}
.calendar-box .dv-bg .deco3{position: absolute;bottom: 68px;left: 55px;}
.calendar-dv{background:url('../img/work/body-calendarbg.png') top center no-repeat;margin: auto;background-size: cover;position: relative;max-width: 1100px;}
#calendar li{display: flex;width: 94%;margin: auto;padding-top: 3em;}
#calendar img{width: 100%;margin: auto;}
.calendar-dv.bt{background-position: bottom center;height:3em;margin-bottom: -32px;}

@media (min-width: 767px){
  .head-dv{}
  .head-box .dv-bg{background:url(../img/work/head-bg-deco01.png) top center no-repeat,url(../img/work/head-bg-box.png) top center no-repeat,url(../img/work/head-bg-line.png) top center no-repeat,url(../img/work/head-bg-foot.svg) top center no-repeat;height: 650px;padding-top: 45px;}
  .calendar-box{transform: translate(0px, -95px);}
  #calendar li{display: flex;width: 90%;margin: auto;padding-top: 6em;}
  #sale_01 li,#sale_02 li,#sale_03 li{padding: 8px 6px;max-width: 540px;width: 50%;}
  #recome_pd_01 li a .icon{position: absolute;right:20px;top:5px;transition: 3px; display: none!important;}
}
@media (min-width: 1100px){
}


/* 超狂折價券 */
.coupon-dv{max-width: 1000px;margin: auto;}
#coupon{display: flex;flex-direction: column;}
#coupon li{margin: auto;width: 100%;/* margin-bottom:32px; */}
#coupon li:first-child{margin-bottom: 1em;}
#coupon li img{display: block;max-width: 1000px;margin: auto;width: 100%;}
#coupon li:first-child img{max-width: 600px;/* padding: 32px 0 16px; */width: 85%;margin-bottom: 0;}

/* 超殺爆品 */
.sale-dv{max-width: 1100px;margin: auto;}
#sale_01 ,#sale_02 ,#sale_03 {display: flex;flex-direction: row;flex-wrap: wrap;justify-content: center;}
#sale_01 li,#sale_02 li,#sale_03 li{padding: 8px 6px;max-width: 540px;/* width: 50%; */}
#sale_01 li img,#sale_02 li img,#sale_03 li img{width: 100%;}

/* 熱銷推薦 */
.recome-dv{max-width: 1100px;margin: auto;}
#recome_pd_01{display: flex;flex-wrap: wrap;justify-content: center;} 
#recome_pd_01 li:hover{
  -webkit-filter: drop-shadow(0px 8px 0px rgba(210, 43, 42, 0.7));
  filter: drop-shadow(0px 8px 0px rgba(210, 43, 42, 0.7));
  transform: translate(0px, -8px);
}
#recome_pd_01 li a{background: url('../img/work/body-recomdbg.svg') top center no-repeat;background-size: 100%;position: relative;padding: 12px;display: flex;flex-direction: column;justify-content: flex-start;align-items: stretch;text-align: center;}
#recome_pd_01 li a .icon{position: absolute;right:20px;top:5px;display: none!important;}
#recome_pd_01 li a:hover .icon img{width: 75%;margin: auto;}
#recome_pd_01 li a:hover .icon{background: #222;width: 48px;display: block!important;padding: 9px 2px;height:58px;border-radius: 0 0 60px 60px;}
#recome_pd_01 .pic img{width: 100%;}
#recome_pd_01 .hotline{background-color: #31e3ff;/* padding: 2px 4px; */font-weight: 600;font-size: 1em;overflow: hidden;color: #222;white-space: nowrap;}
#recome_pd_01 .pd_title{color: #222;height: 38px;/* padding: 4px; */overflow: hidden;display: flex;overflow: hidden;line-height: 19px;flex-direction: column;flex-wrap: nowrap;align-items: center;/* margin-top: 4px; */font-size: 0.9em;justify-content: center;}
#recome_pd_01 .price{color: #ff4855;font-size: 1.3em;display: flex;margin: auto;align-items: baseline;margin-bottom: 1em;font-weight: 600;}
#recome_pd_01 .price i{text-decoration:line-through;color: #222222;font-size:16px;font-style: normal;padding-right: 5px;}
#recome_pd_01 .price small {color: #ff4855;font-size:16px;font-style: normal;}


/* 行銷活動 */
.event-box,.brand-box,.produce-box,.bank-box{text-align: center;width: 100%;border-radius:20px;}
.event-box{margin-bottom:1.5em}
.event-dv{max-width: 1000px;margin: auto;position: relative;}
.event-dv{display: flex;flex-direction: column;justify-content: center;align-items: flex-end;flex-wrap: nowrap;margin: 2em auto;}
.event-dv ul{width: 100%;position: relative;margin: auto;display: flex;flex-direction: column;flex-wrap: wrap;align-content: center;align-items: flex-start;}
.event-dv img{width: 100%;}
.event-dv ul li:first-child{margin-bottom: 0.8em;}
.event-dv ul li:nth-child(2){width:48%;text-align: right;}
.event-dv ul li:nth-child(2) a{/* width:48%; */text-align: right;}
.event-dv ul li:nth-child(2) img{width: 80%;display: inline-block!important;}
.btn-box{display:inline-block;width:48%;position: absolute;bottom:0px;text-align: left;}
.btn-box .btn-more{width: 80%;background: transparent;}
#dv01,#dv02,#dv03{width: 100%;position: relative;margin: auto;}

/* 銀行 */
.bank-dv{max-width: 1100px;margin: auto;}
#bank_01,#bank_02,#bank_03{display: flex;flex-direction: row;flex-wrap: wrap;justify-content: center;}
#bank_01 li,#bank_02 li,#bank_03 li{padding: 8px 6px;width: 50%;}
#bank_01 li img,#bank_02 li img,#bank_03 li img{width:100%;max-width:360px}
.bank-box h6{ position: relative; display: flex;  justify-content: center; }
.bank-box h6>ul{display: flex;align-items: center;flex-direction: column;}
.bank-box h6 .bank-more{background-color: #222;padding:4px 8px;padding: 8px 16px;font-size: 1em;border-radius: 100px;margin: 8px 32px;color:#fff;font-weight:500;}
.bank-box h6 .bank-more:hover{background-color: #fff448;color:#222}

/* RWD */
@media (max-width:320px) {
  .col-6 { flex: 0 0 auto; width: 100%; }  }
@media (min-width:440px) {  }
@media (min-width:600px) {  }
@media (min-width: 768px) {
  h6 img{max-width:600px;margin: auto;display: block;width: 100%;/* margin: 64px auto 32px; */}
  .col-6 {flex: 0 0 auto;width: 25%;}
  .event-dv ul li:nth-child(2) img{max-width:210px;}
  .btn-box .btn-more{max-width:210px;}
  #bn_01>li, #bn_02>li{width: 25%;}
  #bn_03>li{width:50%;} 
  .bank-box h6>ul{display: flex;align-items: flex-end;flex-direction: row;margin-bottom: 32px;}
  .bank-box h6 .bank-more{background-color: #222;padding:4px 8px;/* width: 100px; */background-color: #222;padding: 8px 16px;font-size: 1.5em;border-radius: 100px;margin: 8px;}
  #bank_01 li,#bank_02 li,#bank_03 li{padding: 8px 6px;width: 33%;}
  .kv-h1-dv-pc{display: block;}
  .kv-h1-dv-mb{display: none;}
 
} 
@media (min-width: 769px) and (max-width: 991.98px) {
  .col-6 { flex: 0 0 auto; width: 25%; }
}
@media (min-width: 1100px){
.limited-coupon-box .dv-bg{background: url(../img/work/coupon-bg.png) top center no-repeat;}


.deco1{display: block;}
.deco2{display: block;}
.deco3{display: block;}
.deco4{display: block;position: absolute;bottom: -12px;left: -12px;z-index: 88;}
.deco5{display: block;position: absolute;top: 210px;right: -10px;z-index: 88;}

#coupon li:first-child { margin-bottom: 2em; }
.col-6 { flex: 0 0 auto; width: 25%; }
.head-dv{ margin-top:0px;}
#calendar img { width: 80%; margin: auto; }
.event-box.box01::after{content: "";background: url('../img/work/deco04.svg') top center no-repeat; display: block;width: 1154px; height:465px;margin: auto;margin-top: -470px;}
.event-box.box02::after{content: "";background: url('../img/work/deco05.png') top center no-repeat; display: block;width: 1154px; height:465px;margin: auto;margin-top: -470px;}

#recome_pd_01 li a{background: url('../img/work/body-recomdbg.svg') top center no-repeat;background-size: 97%;position: relative;padding: 22px;display: flex;flex-direction: column;justify-content: flex-start;align-items: stretch;text-align: center;}
#recome_pd_01 .hotline{background-color: #31e3ff;padding: 2px 4px;font-weight: 600;font-size: 1.2em;overflow: hidden;color: #222;white-space: nowrap;}
#recome_pd_01 .pd_title{color: #222;height: 56px;padding: 4px;overflow: hidden;display: flex;overflow: hidden;line-height: 24px;flex-direction: column;flex-wrap: nowrap;align-items: center;/* margin-top: 4px; */font-size: 1.2em;justify-content: center;}
#recome_pd_01 .price{color: #ff4855;font-size: 1.5em;display: flex;margin: auto;align-items: baseline;margin-bottom: 1em;font-weight: 600;}
}


/* foot */
footer{color: #fff;background:#ff4855 url(../img/work/bg-pattern.png);}
.footer-box{flex-direction: column; align-items: center;font-weight: 600;flex-direction: column; align-items: center;font-weight: 600;padding:0;}
.footer-box h5 span{color: #eee;font-size: 1.5em; font-weight: 600; padding: 0 0.5em 0.2em 0; display: inline-block;}
.footer-box img{width: 80%;}
.fllow-box{justify-content: center; align-items: center;  }
.fllow-box ul{align-items: center;flex-direction: row}  
.fllow-box ul li:first-child{font-weight: 600;}
.fllow-box p{ text-align: left; padding: 1em;}
.footer-box h5+p{align-items: left;font-size: 1em; padding: 0 0 1em 1em; text-align: left;align-items: center;}
/* foot RWD */
@media (max-width: 600px) { 
    .fllow-box{flex-direction: column;padding: 0 0 50px 0;}
    .fllow-box .icon-flow{display:none!important;}
    .footer-box h5 span{ font-size: 1.2em; }
    .footer-box{font-size:.8em;}
    .fllow-box p{ text-align: center; padding:1em 0;}
    .fllow-box p{text-align: center;}
}


/*** 活動詳細說明  ***/
.MODAL_XBOX{display: none;width: 100%;height: 100%;position: fixed;left: 0;top: 0;overflow-y: auto;overflow-x: hidden; background-color: rgba(0, 0, 0, .7);font-family: 'Century Gothic' , 'Noto Sans TC', 'Microsoft JhengHei';z-index: 99999;transition: 0;}
.modal-box{width: 95%;max-width: 950px;margin: 0 auto;padding: 0 .5em 0 1em;height: 95vh;}
.modal-box h4{text-align: center;font-size: 32px;color: #000;font-weight: bold;white-space: nowrap;position: relative;padding: 2% 0;line-height: 2em;}
.modal-box h4 .CLOSE{color: #333;position: absolute;top: -1%;right: 0%;font-size: 48px;cursor: pointer;background: no-repeat;border: 0;}
.modal-box .modal-body{width: 96%;margin: 0 auto 0 auto;color: #333;overflow-y: scroll;}
.modal-box .modal-body h5{line-height: 2em;font-size: 1.5em;font-weight: bold;white-space: nowrap;}
.modal-box .modal-body h3{font-size: 2em;color: #333;font-weight: bold;margin-bottom: 10px;}
.modal-box .modal-body p{font-size: 1em;}
.modal-box .modal-body li b,.modal-box .modal-body p b{font-weight: 600;color: #ff4855;    vertical-align: baseline;}
.modal-box .modal-body ol{padding-left: 25PX;}
.modal-box .modal-body li{line-height: 1.6;font-size: 18px;letter-spacing: 1px;margin-bottom: 1.2%;list-style: decimal;}
.modal-box .modal-body li img{width: 100%;height: auto;margin-left: -2%}
.modal-box .modal-body a{display: initial;text-decoration: underline;}
.modal-box button.CLOSE{width: 20%;background-color:#ff4855;margin: 0 auto;text-align: center;font-weight: 400;color: #fff;border-radius: 5px;}


.modal-dialog { max-width:90%!important; margin: 1.75rem auto; }  
.modal { overflow-x: inherit; overflow-y: inherit; outline: 0; }
.modal-title {font-size: 32px;color: #000;}

 /* AOS手機版不動 */
 @media (max-width: 768px){ [data-aos=fade-up],[data-aos=fade-down], [data-aos=fade-left] ,[data-aos=fade-right] { transform:none; } }


/* loading */
.loading_mask{
  background:#ff4855; display: flex; flex-direction: column; animation: 1.2s slideIn ease-in-out forwards 1s; }
.loading_mask p svg{width: 150px;height: 104px; }  

/* BUG */
.my-class{ right:15px; }


/*animation */
/* @keyframes slideIn {
  0% { opacity: 1; } 
  30% { opacity: 1; } 
  100% { transform: translateY(-2000px); }  
} */
@keyframes crest12Move1 {
  0% { transform: scale(1) } 
  7% { transform: scale(1.2)} 
  15% { transform: scale(1) } 
  22% { transform: scale(1.2) } 
  30% { transform: scale(1) } 
  50% { transform: scale(1) }
  100% { transform: scale(1) }
}