@charset "UTF-8";
:root{
  --basics-font: "Noto Sans TC", "Microsoft JhengHei", Arial, Helvetica, sans-serif;
  --big-size: 2rem;
  --first-size: 1.75rem;
  --second-size: 1.5rem;
  --third-size: 1.25rem;
  --fourth-size: 1.125rem;
  --basics-size: 1rem;
  --smallest-size: 0.88rem;
  --color-w: #ffffff;
  --color-bk: #222;
  --color-grey: #555555;
  --color-line: #c5c5c5;
  --color-b: #2876de;
  --color-y: #fafa61;
	--color-r: #f94953;
  --color-br: #654c3c;
  --color-pr: #8e79eb;
}

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

.kv-wrap{width: 100%; background: #67d4f9 url(../img/kv-bg1.png) center top repeat-y; background-size: 2560px; display: inline-block; overflow: hidden;}
.kv-td{width: 1000px; height: 550px; position: relative; left: 50%; margin-left: -500px; background: url(../img/kv-bg2.png) center top no-repeat; background-size: 1000px;}
.kv-td ul{width: 100%; height: 100%;}
.kv-td ul li{position: absolute;}
.kv-td ul li img{width: 100%;}
.kv-alt{width: 1900px; left: 50%; top: 0; margin-left: -950px;}
.kv-pic{width: 800px; left: 50%; top: 0; margin-left: -400px;}
.m-kv{display: none;}

.nav-wrap{width: 100%; background: var(--color-pr);  overflow: hidden; z-index: 9999; position: sticky; top: 0;}
.menu{text-align: center; display: flex; justify-content: center; align-items: center;}
.menu li{font-size: var(--third-size); font-weight: 700; color: var(--color-line);}
.menu li a{width: 100%; height: 100%; color: var(--color-w); transition: 0.5s; padding: 28px 40px;}
.menu li a:hover{color: var(--color-pr); transition: 0.5s; cursor: pointer; background: var(--color-w); color: var(--color-pr);}
.menu li.noopen{padding: 6px 40px 8px; line-height: 1.5;}
.menu li.noopen span{font-size: 12px; border: 1px solid var(--color-line); border-radius: 30px; padding: 2px 10px; margin-bottom: 3px;}
.mobile{display: none;}
.m-tit{display: none;}
.post{padding: 22px 0 23px;}
#stickyHeader.fixed{position: fixed; top: 0; left: 0; width: 100%;}

section{width: 100%; overflow: hidden; padding-top: 40px;}
#targetSection{padding-bottom: 30px;}
#product3{padding-top: 40px;}
#product4{padding: 40px 0 60px;}
.product-td{width: 1200px; position: relative; left: 50%; margin-left: -600px; text-align: center; margin-bottom: 60px;}

.dec{position: absolute;}
.decor1{width: 89px; right: 50px; top: 70px;}
.decor2{width: 100px; right: 30px; top: 390px; z-index: 9;}
.decor3{width: 141px; right: -150px; top: 0;}
.decor4{width: 117px; left: -250px; top: 600px;}

.tit-wrap{display: inline-block; margin: 0 auto; text-align: center;}
.tit-wrap p, .tit-wrap p span, .gift-w ul li p{text-align: center; font-size: var(--second-size); font-weight: 700;}
.tit-wrap h2{max-width: 1000px; margin: 40px auto;}
.tit-wrap h2 img{width: 100%;}
.tit-wrap-pc{display: block;}
.tit-wrap-m{display: none;}
.tit-wrap h3{font-size: var(--second-size); color: var(--color-bk); background: var(--color-y); border-radius: 30px; display: inline-block; padding: 3px 20px; border: 2px solid var(--color-bk); margin: 0 0 10px;}
.tit-wrap p span{color: var(--color-b); margin: 0 3px;}
.tit-wrap p.spp{color: var(--color-bk); font-weight: 500;}
.tit-wrap p.spp span{background: url(../img/tit-line.png) repeat-x left bottom; background-size: 20px; display: inline; color: var(--color-bk);}

.tabs{font-size: 0; list-style: none; padding-left: 0; display: block; overflow: hidden;}
.tabs li{display: inline-block; width: 25%; text-align: center; border-radius: 15px 15px 0 0; border: 2px solid var(--color-bk); border-top: 3px solid var(--color-bk); border-bottom: none; background: var(--color-w);}
.tabs li:nth-child(1){border-right: 2px solid var(--color-bk); border-left: 3px solid var(--color-bk);}
.tabs li:nth-child(4){border-right: 3px solid var(--color-bk); border-left: 2px solid var(--color-bk);}
.tabs li a{text-decoration: none; display: block; padding: 6px 25px; position: relative; color: var(--color-w);}
.tabs li.active, .tabs li:hover{background: var(--color-pr); border-radius: 15px 15px 0 0;}
.tabs li a h2, .tabs li a p{color: var(--color-bk); display: inline; font-weight: 700;}
.tabs li.active a h2, .tabs li a:hover h2{color: var(--color-w);}
.tabs li h2{font-size: var(--second-size);}
.tabs li span{font-size: var(--basics-size); padding-left: 3px;}

.product-content{width: 100%; border: 3px solid var(--color-bk); margin-bottom: 10px;}
.product-list{width: 100%; padding: 20px 5px 25px; 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.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){border-right: none;}

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

.card{padding: 0 15px; flex-grow: 1; display: flex; flex-direction: column;}
.card-td img{width: 100%; margin-bottom: 10px; transition: .5s;}
.card-td h2{font-size: var(--second-size); color: var(--color-b); font-weight: 700; transition: .5s; margin-bottom: 10px;}
.card-td p{font-size: var(--basics-size); line-height: 1.5; color: var(--color-bk); margin-bottom: 10px;}
ul.sp{margin-bottom: 10px;}
ul.sp li p{margin-bottom: 0;}
ul.sp li{margin-bottom: 5px; width: 100%; border: none; padding: 0 10px 0 0;}
ul.sp li::before{content: '•';}

.card-price{font-size: var(--smallest-size); color: var(--color-grey); font-weight: normal; text-align: right; margin-top: auto;}
.big{color: var(--color-r); font-size: var(--second-size); text-decoration: none; font-weight: 700; padding: 0 3px; line-height: 1.5;}
.addup{border: 1px solid var(--color-bk); border-radius: 15px; padding: 2px 10px 2px 11px; font-size: var(--smallest-size); margin-right: 6px;}

.card-btn{font-size: var(--basics-size); color: var(--color-w); background: var(--color-b); 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: 290px; height: 99px; background: url(../img/cta.png); background-size: 100%; margin: 40px auto 0; transition: .5s; cursor: pointer;}
.cta:hover{background: url(../img/cta-hover.png); background-size: 100%; transition: .5s;}

/* table */
.instructions{width: 90%; margin: 10px auto 30px; overflow: hidden;}
.instructions li.entry-content{width: 100%; border: 3px solid var(--color-bk); list-style-type: none; margin: 0; padding: 0; border-radius: 20px;}
.container{font-size: var(--basics-size); color: var(--color-bk); line-height: 2; width: 100%;}
.container a{color: var(--color-pr);}
.container a:hover{text-decoration: underline;}
table{width: 100%; border-collapse: collapse; border-spacing: 0; background: var(--color-w); border-radius: 20px;}
table.rg-table tr{text-align: center; color: var(--color-bk); border-top: 2px solid var(--color-bk);}
table.rg-table tr:first-child{border-top: none;}
table.rg-table th{font-weight: 700; padding: 5px 5px 8px; text-align: center; background: var(--color-grey); color: var(--color-w); font-size: var(--fourth-size); border-right: 1px solid var(--color-w);}
table.rg-table th:first-child{border-top-left-radius: 17px;}
table.rg-table th:last-child{border-right: none; border-top-right-radius: 17px;}
table.rg-table td{padding: 1em 2em; border-right: 2px solid var(--color-grey);}
table.rg-table td:last-child, .table.rg-table th:last-child{border-right: none;}
.prize{color: var(--color-bk); font-size: var(--third-size); line-height: 1.5; font-weight: 700;}
.prize span{font-size: var(--third-size);}
.name{width: 25%;}

.rg-table-mobile{display: none; width: 100%; border-collapse: collapse; border-radius: 15px; overflow: hidden;}
.rg-table-mobile th{background: var(--color-grey); color: var(--color-w); padding: 10px; width: 100px; border-bottom: 1px solid var(--color-w); line-height: 1.5;}
.rg-table-mobile td{padding: 10px; border-bottom: 2px solid var(--color-grey);}
.rg-table-mobile th.noo-line, .rg-table-mobile td.noo-line{border-bottom: none;}

.list{font-size: var(--basics-size); color: var(--color-br); line-height: 1.875; display: inline-block; width: 95%; text-align: left; margin: 0 auto; font-weight: 500;}
.list li{list-style-type: decimal; margin-left: 20px; margin-bottom: 5px;}
.list li ul li{list-style-type: disc; margin-top: 5px; margin-bottom: 0;}
.list2{text-align: center; margin: 5px 0 50px; width: 100%;}
.list2 li{list-style-type: none; margin-left: 0;}
.list3 li{list-style-type: disc; font-weight: 700;}

/* gift */
.gift-wrap{max-width: 1100px; display: flex; justify-content: space-between; flex-wrap: wrap; margin: 0 auto 40px;}
.gift-td{border: 3px solid var(--color-bk); position: relative; z-index: 1;}
.gift-pic{flex: 2; margin-right: -1px; z-index: 2; border-radius: 30px 20px 20px 30px; overflow: hidden;}
.gift-pic img{width: 100%;}
.gift-w{flex: 1; display: flex; align-items: center; margin-left: -1px; justify-content: center; border-radius: 20px 30px 30px 20px; background: #fff;}
.gift-w ul{display: flex; justify-content: center; flex-wrap: wrap; padding: 20px;}
.gift-w ul li{width: 100%;}
.gift-w ul li h2{margin-bottom: 20px; line-height: 1.5; font-size: var(--first-size);}
.blue{color: var(--color-b);}
.gift-w ul li.Quota{background: red; color: var(--color-w); font-weight: 700; padding: 3px 15px 4px; border-radius: 20px; width: auto; display: inline;}
h4{color: var(--color-b); font-size: var(--second-size); margin: 5px 0;}
.rule{font-size: var(--third-size); color: var(--color-br);}
.rule a:link{text-decoration: underline; font-weight: 700; color: var(--color-br);}
.rule a:visited{color: var(--color-br);}
.rule a:hover{color: var(--color-pr);}
.tit-wrap p span.Remark{font-size: var(--basics-size); color: var(--color-br); font-weight: 500;}
.m-none{display: block;}

@media screen and (max-width: 1500px){
section{width: 100%; left: 0; margin-left: 0;}
.decor3{width: 80px; right: 0; top: 300px;}
.decor4{width: 60px; left: 10px; top: 0;}
}

@media screen and (max-width: 1300px){
.product-td{width: 90%; left: 0; margin-left: 5%;}
.gift-wrap{width: 100%;}
.decor2{right: 0;}
}

@media screen and (max-width: 1200px){
.decor2{right: -3%;}
}

@media screen and (max-width: 1024px){
.decor1{width: 60px; top: 100px;}
.decor2{top: 360px;}
}

@media screen and (max-width: 1023px){
.post{padding: 0;}
.kv-wrap{display: none;}
.m-kv{display: block; width: 100%;}
.m-kv img{width: 100%;}
.gift-pic{flex: 1; padding: 5px;}
.gift-w{flex: 1;}
.decor2{top: 280px;}
.menu li a{padding: 28px;}
}

@media screen and (max-width: 900px){
.list{width: 100%;}
.instructions li.entry-content{overflow: hidden;}
.rg-table{display: none;}
.rg-table-mobile{display: table;}
.decor1{top: 50px;}
.decor2{width: 80px; top: 250px;}
.gift-w ul li h2{font-size: var(--second-size);}
.menu li a{padding: 28px 20px;}
}

@media screen and (max-width: 820px){
section{padding-top: 60px;}
.product-list{padding: 0 20px;}
.product-list li{border-right: none; width: 50%; padding: 30px 0;}
.product-list li:last-child{border-bottom: none;}
.big{font-size: var(--third-size); line-height: 1;}
.tit-wrap p, .tit-wrap p span, h4{font-size: var(--third-size);}
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; display: inline-block;}
table.oneline td:last-child{padding-left: 10px;}
table.oneline tr{padding: 1em 0;}
table.rg-table tr:nth-child(3), table.rg-table tr:nth-child(5){border-top: none; padding-top: 0;}
table.rg-table tr:nth-child(2), table.rg-table tr:nth-child(4){padding-bottom: 0;}
table.oneline tr:last-child{padding-bottom: 1em;}
table.oneline.zebra tr:nth-child(odd){background-color: transparent;}
.tit-wrap h2{width: 90%; margin: 40px 5% 20px;}
.tit-wrap-pc{display: none;}
.tit-wrap-m{display: block;}
.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{font-size: var(--fourth-size); margin: 0; border-bottom: 1px dotted var(--color-pr); width: 100%;}
.menu li a{display: block; width: 100%; padding: 15px 10px; color: var(--color-pr);}
.menu li:after{content: none;}
.menu li.noopen{padding: 10px 10px 8px;}
.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;}
.tabs li{border: 3px solid var(--color-bk); border-radius: 50px;}
.tabs{margin-bottom: 10px;}
.tabs li{width: 24%; margin: 2% 0.5%;}
.tabs li a{padding: 10px 5px;}
.tabs li.active, .tabs li:hover{border-radius: 50px; background: var(--color-pr);}
.tabs li h2, .tabs li span{font-size: var(--third-size);}
.rule{font-size: var(--fourth-size);}
.m-none{display: none;}
.decor1{right: 0; top: 20%;}
.decor2{top: 58%;}
.decor3{top: 180px;}
#product3, #product4{padding-top: 0;}
.gift-wrap{flex-direction: column;}
.gift-pic{margin-right: 0; z-index: 2; border-radius: 30px 30px 20px 20px;}
.gift-w{margin-left: 0; margin-top: -3px; border-radius: 20px 20px 30px 30px;}
.gift-w ul{padding: 20px 20px 30px;}
.card-td h2{margin-bottom: 20px; font-size: var(--third-size);}
}

@media screen and (max-width: 600px){
.product-content{border-radius: 5px;}
.tabs li{width: 48%; margin: 2% 1%;}
.tit-wrap h2{width: 100%; margin: 40px 0;}
.product-list li{width: 100%; border-bottom: 3px var(--color-line) dotted;}
.product-list{padding: 30px 20px 0; flex-direction: column;}
.product-list li:first-child{padding-top: 0;}
.decor1{width: 40px; top: 23%;}
.decor2{top: 50%;}
.decor3{width: 50px; right: 3%; top: 36%;}
.decor4{width: 40px; left: 0; top: 0;}
}

@media screen and (max-width: 500px){
.list2{margin-bottom: 20px;}
.card{padding: 0;}
.decor1{top: 100%;}
.decor2{top: 47%;}
.decor3{top: 32%;}
.decor4{left: 10%;}
#product4{padding: 0;}
section{padding-top: 30px;}
.cta{margin: 20px auto 40px;}
#targetSection{padding-bottom: 0;}
}

@media screen and (max-width: 400px){
.tabs li h2, .tabs li span{font-size: var(--fourth-size);}
.cta{width: 200px; height: 68px;}
.decor1{top: 105%;}
.decor4{left: 5%;}
}

@media screen and (max-width: 350px){
.decor2{top: 42%;}
.decor3{top: 25%;}
}

/* animation */
.slideLeft{animation: slideLeft 1s ease-in-out;
visibility: visible !important;}
@keyframes slideLeft{
0%{transform: translateX(0%);}
40%{transform: translateX(10%);}
50%{transform: translateX(0%);}
60%{transform: translateX(-20%);}
70%{transform: translateX(10%);}
80%{transform: translateX(-4%);}
95%{transform: translateX(2%);}			
100%{transform: translateX(0%);}
}

.slideLeft2{animation: slideLeft2 1.4s;
visibility: visible !important;}
@keyframes slideLeft2{
0%{transform: translateX(50%); opacity: 0;}
40%{transform: translateX(0%); opacity: 0;}
50%{transform: translateX(-30%); opacity: 1;}
80%{transform: translateX(2%);}			
100%{transform: translateX(0%);}
}

.bigEntrance{animation: bigEntrance 1.3s; visibility: visible !important;}
@keyframes bigEntrance {
0%{transform: scale(0.5); opacity: 0;}
60%{transform: scale(0.5);	opacity: 0;}
80%{transform: scale(1.1); opacity: 1;}	
90%{transform: scale(0.9); opacity: 1;}	
100%{transform: scale(1); opacity: 1;}		
}

.pulse{animation: pulse 5s infinite;}
@keyframes pulse {
0%{transform: scale(1);}
50%{transform: scale(1);}
65%{transform: scale(1);}
68%{transform: scale(0.9);}
71%{transform: scale(1);}
74%{transform: scale(0.9);}
77%{transform: scale(1);}
}