@charset "UTF-8";
:root{
  --basics-font: "Noto Sans TC", "Microsoft JhengHei", Arial, Helvetica, sans-serif;
  --big-size: 3rem;
  --first-size: 1.75rem;
  --second-size: 1.5rem;
  --third-size: 1.375rem;
  --fourth-size: 1.25rem;
  --basics-size: 1.125rem;
  --smallest-size: 1rem;
  --color-w: #ffffff;
  --color-bk: #222;
  --color-grey: #555555;
  --color-link: #00a4fb;
  --color-line: #b0b7bb;
	--color-r: #ff4a8a;
	--color-g: #1d9e45;
}

body, html{
-webkit-text-size-adjust: 100%;
text-rendering: optimizeLegibility !important;
-webkit-font-smoothing: antialiased !important;
font-family: var(--basics-font);}
body{overflow-x: hidden;}
p, .instructions li{font-size: var(--basics-size); color: var(--color-bk); line-height: 2;}
p, span{font-weight: 500;}
p span{font-weight: 700; color: var(--color-r);}

.kv-wrap{width: 100%; display: inline-block;
background: var(--color-link) url(../img/kv-bg1.jpg) center top no-repeat; background-size: 2560px;}
.kv-td{width: 100%; height: 550px; background: url(../img/kv-bg2.png) center top no-repeat; background-size: 1800px;}
.kv-td ul{width: 900px; height: 100%; position: relative; left: 50%; margin-left: -450px;}
.kv-td ul li{position: absolute;}
.kv-td ul li img{width: 100%;}
.kv-man{width: 398px; left: -295px; bottom: 0;}
.kv-point{width: 352px; right: -176px; top: 0;}
.kv-tit{width: 900px; left: 0; top: 0;}
.kv-discount{width: 900px; left: 0; bottom: 0;}
.kv-money{width: 352px; right: -176px; top: 0;}
.kv-shine{width: 251px; right: 291px; top: 0;}
.m-kv, .mid-kv{display: none;}

.nav-wrap{width: 100%; background: var(--color-r); overflow: hidden; z-index: 9999; position: sticky; top: 0;}
.menu{text-align: center; display: flex; justify-content: center; align-items: center;}
.menu li a{width: 100%; height: 100%; display: block; padding: 15px 0;}
.menu li p{font-size: var(--fourth-size); font-weight: 700; border-right: 1px solid var(--color-w); color: var(--color-w); padding: 5px 50px; line-height: 1; transition: 0.5s;}
.menu li p.final{border-right: none;}
.menu li:hover p{color: #C31C55; transition: 0.5s; cursor: pointer;}
.mobile{display: none;}
.m_tit{display: none;}
#stickyHeader.fixed{position: fixed; top: 0; left: 0; width: 100%;}

section{width: 100%; overflow: hidden; padding: 80px 0;}
.bg-color{background: #fff6da;}
.stit{color: var(--color-bk); font-weight: 700;}

.product-td{width: 1200px; position: relative; left: 50%; margin-left: -600px; text-align: center; text-align: center;}
.product-td img{width: 90%;}
.product-td h2{color: var(--color-bk); font-size: var(--big-size); font-weight: 900; display: inline-block; letter-spacing: 1px; background: url(../img/tit-l.png) left center no-repeat,url(../img/tit-r.png) right center no-repeat; background-size: 39px; padding: 0 50px; margin-bottom: 20px;}
.product-td h2 span{color: var(--color-r); font-weight: 900;}
.product-td p{text-align: center; font-size: var(--third-size); line-height: 2;}

.illustrate{width: 80%; text-align: left; margin: 0 10%;}
.list{font-size: var(--smallest-size); color: var(--color-grey); line-height: 1.875; display: inline-block; width: 100%; text-align: left; margin: 0 auto;}
.list li{list-style-type: decimal; margin-left: 18px; margin-bottom: 5px; font-weight: 500;}
.list2 li{list-style-type: disc; padding: 0; line-height: 1.75;}

ul.sp li p{margin-bottom: 0; font-size: var(--fourth-size); text-align: left;}
ul.sp li{width: 100%; border: none; padding: 0 10px 0 0; list-style-type: none; display: flex;}
ul.sp li::before{content: '▸'; margin-right: 6px; margin-top: -2px; color: var(--color-g);}

.tabs{font-size: 0; list-style: none; padding-left: 0; display: block; margin-bottom: -1px; margin-top: 20px;}
.tabs li{display: inline-block; width: 25%; text-align: center;}
.tabs li a{text-decoration: none; display: block; padding: 10px 20px; position: relative;}
.tabs li a h2, .tabs li a p{position: relative; z-index: 1; color: var(--color-w); background: none; padding: 0; line-height: 1;}
.tabs li a::before,.tabs li a::after{content: ''; position: absolute; backface-visibility: hidden; z-index: 0; bottom: 0; width: 50%; height: 100%;}
.tabs li a::before{left: 0; border-radius: 10px 0 0 0; transform-origin: left bottom; transform: skewX(-10deg); border: 3px solid var(--color-bk); border-bottom: none;}
.tabs li a::after{border-radius: 0px 10px 0 0; transform: skewX(10deg); right: 0; transform-origin: right bottom; border: 3px solid var(--color-bk); border-left: none; border-bottom: none;}
.tabs li a::before, .tabs li a::after{background: var(--color-g);}
.tabs li.active a h2, .tabs li.active a p, .tabs li a:hover h2, .tabs li a:hover p{color: var(--color-bk);}
.tabs li.active a::before, .tabs li.active a::after,
.tabs li a:hover::before, .tabs li a:hover::after{background: var(--color-w);}
.tabs li h2{font-size: var(--first-size); margin: 5px 0; font-weight: 700;}
.tabs li p{font-size: var(--fourth-size); display: inline; margin-left: 3px; font-weight: 700;}

.entry-content2{width: 100%; border: 3px solid var(--color-bk); border-top: none; margin-bottom: 10px; border-radius: 0 0 5px 5px;}
.product-list{width: 100%; padding: 30px 10px 0; background: var(--color-w); border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; display: flex; text-align: left; flex-wrap: wrap;}
.product-list li{border-right: 3px var(--color-line) dotted; width: 33%; display: inline-flex; align-items: stretch;}
.product-list li:nth-child(3), .product-list li:nth-child(6), .product-list li:nth-child(9), .product-list li.border-noo, .product-list li.border-att{border-right: none;}
.product-list li.border-att{width: 60%; margin: 0 auto; align-items: anchor-center;}
.att{color: var(--color-w); font-size: var(--smallest-size); font-weight: 500; padding: 15px 20px 20px; line-height: 1.75; background: var(--color-g); height: fit-content; border-radius: 10px;}

a.menulink{transition: .5s; flex-grow: 1; display: flex; flex-direction: column;}
a.menulink:hover h2{color: var(--color-g); transition: .5s;}
a.menulink:hover img{opacity: 80%; transition: .5s;}
a.menulink:hover .card-btn{background: var(--color-g); transition: .5s;}

.m-pd{margin-bottom: 30px;}
.card{padding: 0 15px; flex-grow: 1; display: flex; flex-direction: column;}
.card-td{margin-bottom: 10px;}
.card-td img{width: 100%; margin-bottom: 10px; transition: .5s;}
.card-td h2{font-size: var(--second-size); color: var(--color-bk); font-weight: 500; transition: .5s; margin-bottom: 5px; background: none; padding: 0;}
.card-td p, .card-td ul.sp li p{font-size: var(--smallest-size); line-height: 1.5; color: var(--color-g); margin-bottom: 5px;}

.card-price{font-size: var(--smallest-size); color: var(--color-grey); font-weight: normal; text-align: right; margin-top: auto; font-weight: 500;}
.big{color: var(--color-r); font-size: var(--second-size); text-decoration: none; font-weight: 700; padding: 0 5px; line-height: 1;}
.addup{border: 1px solid var(--color-bk); border-radius: 15px; padding: 1px 8px 2px 11px; font-size: 0.88rem; margin-right: 6px; letter-spacing: 1px;}
.del{font-size: var(--smallest-size); text-decoration: line-through; color: var(--color-grey);}

.card-btn{font-size: var(--basics-size); color: var(--color-w); background: var(--color-r); border-radius: 20px; text-align: center; width: 100px; padding: 3px 10px 5px; margin-top: 8px; display: block; float: right; transition: .5s; font-weight: 700;}
.cta{width: 30%; height: 70px; background: var(--color-r); color: var(--color-w); font-weight: 700; font-size: var(--second-size); line-height: 70px; display: inline-block; border-radius: 40px; margin: 30px 0 0;}
.cta a{display: block; width: 100%; height: 100%; text-decoration: none; cursor: pointer; border-radius: 40px; color: var(--color-w); transition: .5s;}
.cta a:hover{text-decoration: none; background: #C31C55; transition: .5s;}

/* table */
.instructions{width: 80%; margin: 20px 10%;}
.instructions li{list-style-type: decimal; padding-left: 5px;}
.instructions li.entry-content{width: 100%; border: 3px solid var(--color-bk); list-style-type: none; margin: 0; padding: 0; border-radius: 5px;}
.container{font-size: var(--basics-size); color: var(--color-bk); line-height: 2; width: 100%; background: var(--color-w);}
.container a{color: var(--color-link);}
.container a:hover{text-decoration: underline;}
table{width: 100%; border-collapse: collapse; border-spacing: 0; background: var(--color-w);}
table.rg-table tr{color: var(--color-bk); border-top: 2px solid var(--color-bk);}
table.rg-table tr:first-child{border-top: none;}
table.rg-table.zebra tr:nth-child(even){background: #f8f7ee;}
table.rg-table th{font-weight: 700; padding: 5px; text-align: center; background: #f5e376; color: var(--color-bk); font-size: var(--basics-size); border-right: 2px solid var(--color-bk);}
table.rg-table th:last-child{border-right: none;}
table.rg-table td{padding: 20px; border-right: 2px solid var(--color-bk);}
table.rg-table td p, table.rg-table td span{text-align: left; font-size: var(--basics-size); font-weight: 500;}
table.rg-table td:last-child, .table.rg-table th:last-child{border-right: none;}

.cen{text-align: center;}
.area{width: 100px; text-align: center;}
.area span, .store span{background: var(--color-g); color: var(--color-w); border-radius: 50px; display: inline-block; padding: 5px 15px;}
.store{width: 25%; text-align: center; font-size: var(--fourth-size); color: var(--color-link); font-weight: 700;}
.store span{font-size: var(--basics-size); margin: 5px 0;}
.rule{width: 45%;}
.rule ul.list{width: 100%;}
.rule ul.list li{font-weight: 500; line-height: 1.75; font-size: var(--smallest-size); color: var(--color-grey);}
.second{font-size: var(--fourth-size); color: var(--color-bk); line-height: 1.75; font-weight: 500;}
.second span{color: var(--color-r); font-size: var(--fourth-size); font-weight: 700;}
.m-block{display: none;}

.pass-wrap{display: flex; justify-content: center; align-items: stretch;}
.pass{margin: 0 2.5%; flex: 1; display: flex; flex-direction: column;}
.pass h2{background: none; padding: 0;}
.pass img{width: 100%; margin: 10px 0;}
.pass-wrap p{text-align: left; font-size: var(--basics-size); margin-bottom: 20px; line-height: 1.875;}
.pass-wrap .cta{width: 80%; max-width: 360px; margin: auto auto 0;}
.spp{color: var(--color-grey); font-weight: 500;}
.m-noo{display: none;}
table.rg-table td span.spp, .spp{font-size: var(--smallest-size); line-height: 1.5;}

/* gift */
.gift-wrap{width: 100%; max-width: 1100px; display: flex; justify-content: space-between; flex-wrap: wrap; margin: 20px auto 40px;}
.gift-td{border: 3px solid var(--color-bk); position: relative; z-index: 1;}
.gift-w{flex: 1; display: flex; align-items: center; margin-left: -2px; justify-content: center; border-radius: 20px; background: #fff;}
.gift-w ul{display: flex; justify-content: center; flex-wrap: wrap; padding: 20px 0 30px;}
.gift-w ul li{width: 100%;}
.gift-w ul li h2{margin-bottom: 20px; line-height: 1.5; font-size: var(--first-size); font-weight: 700; background: none; padding: 0;}
.gift-w ul li h2 span{background: url(../img/tit-line.png) left 26px repeat-x; background-size: 20px; font-size: var(--first-size); color: var(--color-bk);}
.gift-w ul li.Quota{background: var(--color-link); color: var(--color-w); font-weight: 700; padding: 5px 20px 6px; border-radius: 20px; width: auto; display: inline; font-size: var(--fourth-size);}
.product-td h2.m-appear{display: none;}
.product-td h2.m-noo2{display: inline-block;}

@media screen and (max-width: 1350px){
.product-td{width: 90%; left: 0; margin-left: 5%; margin-right: 5%;}
.kv-wrap{display: none;}
.mid-kv{display: inline-block; width: 100%;}
.mid-kv img{width: 100%;}
}

@media screen and (max-width: 1150px){
.tabs li h2{font-size: var(--third-size);}
.tabs li p{font-size: var(--basics-size);}
.product-list li.border-att{align-items: baseline;}
}

@media screen and (max-width: 1100px){
.menu li p{padding: 5px 40px;}
}

@media screen and (max-width: 1023px){
.mid-kv{display: none;}
.m-kv{display: inline-block; width: 100%;}
.m-kv img{width: 100%;}
.container{width: 100%;}
.cta{width: 40%;}
.product-list{justify-content: flex-start;}
.product-list li{width: 50%;}
.product-list li:nth-child(2), .product-list li:nth-child(4), .product-list li:nth-child(8){border-right: none;}
.product-list li:nth-child(3), .product-list li:nth-child(9){border-right: 3px var(--color-line) dotted;}
.tabs li a h2, .tabs li a p{line-height: 1.25;}
.tabs li a{padding: 5px 20px;}
.m-noo{display: block;}
.product-list li.border-att{width: 100%;}
.att{margin-bottom: 20px;}
}

@media screen and (max-width: 900px){
.nav-wrap{position: relative; z-index: 999;}
.mobile{display: block;}
.nav-wrap ul{padding: 0; opacity: 0;}
.nav{width: 60px; height: 0; color: var(--color-w);}
.menu{margin-top: 60px; width: 100%; padding: 0; pointer-events: none; flex-wrap: wrap; justify-content: left; max-height: 0; opacity: 0; overflow: hidden; transition: max-height 0.5s ease-out, opacity 0.2s ease-out;}
.menu.open{background: var(--color-w); pointer-events: auto; max-height: 100vh; opacity: 1; transition: max-height 1.5s ease-out, opacity 1s ease-out;}
.menu li{margin: 0; border-bottom: 1px dotted var(--color-line); width: 100%;}
.menu li p{border-right: none; color: var(--color-r); padding: 5px; font-size: var(--basics-size);}
.menu li a{display: block; width: 100%; font-weight: 700; padding: 15px 20px;}
.menu li:after{content: none;}
.hamburger{font-size: 50px; display: inline-block; width: 38px; height: 38px; margin: 0 auto; padding: 0; cursor: pointer; transition: transform .2s ease-in-out; margin: 15px 12px 0 12px; vertical-align: middle; border: 0 none; background: transparent;}
.hamburger:focus{outline: 0;}
.hamburger:before, .hamburger:after{content: ""; box-sizing: border-box;}
.hamburger:before, .hamburger .icon, .hamburger:after{display: block; width: 40px; height: 2px; margin: 0 0 6px; transition: transform .5s ease-in-out; background: var(--color-w);}
.hamburger.active .icon{transform: scale(0);}
.hamburger.active:before{transform: translateY(7px) rotate(135deg);}
.hamburger.active:after{transform: translateY(-9px) rotate(-135deg);}
.m_tit{display: block; position: absolute; line-height: 62px; left: 70px;}
.m_tit h2{color: var(--color-w); font-size: var(--fourth-size); font-weight: 700;}
.product-td h2{font-size: 2.5rem;}
.card-td h2{font-size: var(--second-size);}
.instructions{width: 100%; margin: 20px 0;}
.illustrate{width: 100%; margin: 0;}
}

@media screen and (max-width: 800px){
section{padding: 60px 0;}
.bg-color{padding: 60px 0;}
.tabs li h2,.tabs li p{font-size: var(--fourth-size); padding-right: 0; padding-left: 0;}
.tabs li p, .product-list li ul li{font-size: var(--fourth-size);}
.big{font-size: var(--third-size);}
.cen{text-align: left;}
.cta{width: 50%;}
.m-block{display: block;}
.area span, .store span{margin: 10px 0; padding: 3px 15px;}
.container-whole{padding: 0;}
table.oneline thead{display: none;}
table.oneline tbody{width: 100%;}
table.oneline th, table.oneline td{border: none;}
table.oneline tr, table.oneline th, table.oneline td{display: block; padding: 0;}
table.oneline td{border-bottom: none; border-top: none;}
table.oneline tr{padding: 10px 20px 15px;}
table.oneline tr:last-child{margin: 0; border-bottom: none;}
table.oneline.zebra tr:nth-child(odd){background-color: transparent;}
table.oneline .area, table.oneline .store{width: auto; text-align: left;}
.store, .rule{width: 100%;}
.rule ul.list{margin: 10px 0;}
}

@media screen and (max-width: 750px){
.gift-wrap{max-width: 500px; margin: 20px auto;}
.gift-wrap, .gift-w ul{flex-direction: column;}
.gift-w{margin-left: 0; margin-top: -3px;}
.product-td h2{font-size: 2rem;}
.product-td p{font-size: var(--fourth-size); line-height: 1.875;}
.card-td h2, .cta{font-size: var(--third-size);}
.cta{height: 60px; line-height: 60px;}
.pass-wrap p{font-size: var(--basics-size);}
.entry-content2{border-radius: 5px; border-top: 3px solid var(--color-bk);}
.tabs{margin-bottom: 10px; margin-top: 0;}
.tabs li{width: 48%; margin: 1%; border-radius: 100%;}
.tabs li:last-child{float: left; margin-bottom: 4%;}
.tabs li a{padding: 5px 5px 7px; border: 3px solid var(--color-bk); border-radius: 30px;}
.tabs li a h2, .tabs li a p{color: var(--color-bk);}
.tabs li h2{margin: 0;}
.tabs li.active a, .tabs li a:hover{border-radius: 30px; background: var(--color-g);}
.tabs li.active a h2, .tabs li.active a p, .tabs li a:hover h2, .tabs li a:hover p{color: var(--color-w);}
.tabs li a::before, .tabs li a::after{display: none;}
.tabs li p{display: inline;}
}

@media screen and (max-width: 640px){
.cta{width: 70%;}
.product-td{width: 85%; margin-left: 7.5%; margin-right: 7.5%;}
.product-td p{text-align: left;}
.product-list{padding: 30px 20px 0; flex-direction: column;}
.product-list li:last-child{border-bottom: none; margin-bottom: 0;}
.product-list li{border-right: none; border-bottom: 3px var(--color-line) dotted; width: 100%; padding-bottom: 30px;}
.product-list li:nth-child(3), .product-list li:nth-child(9){border-right: none;}
table.rg-table td span.spp, .spp{display: inline-block; text-align: left;}
.pass-wrap{flex-direction: column;}
.pass:first-child{margin-bottom: 60px;}
.product-td h2{font-size: 2.25rem;}
.card-td h2{font-size: var(--third-size);}
.att{margin-bottom: 0;}
}

@media screen and (max-width: 500px){
.product-list{padding: 30px 10px 0;}
.product-td h2.m-appear{display: block;}
.product-td h2.m-noo2{display: none;}
.cta{width: 90%;}
.big{font-size: var(--fourth-size); line-height: 1;}
}

@media screen and (max-width: 400px){
.product-td h2{font-size: 2rem;}
.card-td h2{font-size: var(--third-size);}
.product-td p, .tabs li h2, .tabs li p{font-size: var(--basics-size);}
.m_tit h2{font-size: var(--basics-size);}
.cta{font-size: var(--fourth-size); height: 55px; line-height: 55px;}
}

@media screen and (max-width: 370px){
.product-td h2{font-size: var(--second-size);}
.card-td h2{font-size: var(--third-size);}
.m_tit h2{font-size: var(--smallest-size);}
}

/* animation */
.explode{animation: explode .8s; visibility: visible !important;}
@keyframes explode{
	0%{transform: scale(0.9); opacity: 0;}
	80%{transform: scale(0.9); opacity: 0;}
	100%{transform: scale(1); opacity: 1;}	
}

.explode2{animation: explode2 1s; visibility: visible !important;}
@keyframes explode2{
	0%{transform: scale(0.9); opacity: 0;}
	80%{transform: scale(0.9); opacity: 0;}
	100%{transform: scale(1); opacity: 1;}	
}

.slideDown{animation: slideDown 1s; visibility: visible !important;}
@keyframes slideDown{
	0%{transform: translateY(-100%); opacity: 0;}
	60%{transform: translateY(-100%); opacity: 0;}
	85%{transform: translateY(8%); opacity: 1;}
	95%{transform: translateY(-5%);}	
	100%{transform: translateY(0%);}		
}

.slideUp{animation: slideUp .8s; visibility: visible !important;}
@keyframes slideUp{
	0%{transform: translateY(30%); opacity: 0;}
	40%{transform: translateY(30%); opacity: 0;}
	60%{transform: translateY(0%); opacity: 1;}
	70%{transform: translateY(10%);}
	80%{transform: translateY(0%);}
	90%{transform: translateY(5%);}
	100%{transform: translateY(0%);}
}

.pulse{animation: pulse 3s infinite;}
@keyframes pulse{
	0%{opacity: 1;}
	20%{opacity: 1;}
	25%{opacity: 0;}
	30%{opacity: 1;}
	35%{opacity: 0;}
	40%{opacity: 1;}
}

.pulse2{animation: pulse 4s infinite;}
@keyframes pulse2{
	0%{opacity: 1;}
	70%{opacity: 1;}
	75%{opacity: 0;}
	80%{opacity: 1;}
	85%{opacity: 0;}
	90%{opacity: 1;}
}

.bigEntrance{animation: bigEntrance 1s ease-out; visibility: visible !important;}
@keyframes bigEntrance{
	0%{transform: scale(0.3) rotate(6deg) translateX(-30%) translateY(30%); opacity: 0;}
	80%{transform: scale(0.3) rotate(6deg) translateX(-30%) translateY(30%); opacity: 0;}
	100%{transform: scale(1) rotate(0deg) translateX(0%) translateY(0%); opacity: 1;}
}