@charset "UTF-8";
:root{
  --basics-font: "Noto Sans TC", "Microsoft JhengHei", Arial, Helvetica, sans-serif;
  --big-size: 3rem;
  --first-size: 1.5rem;
  --second-size: 1.375rem;
  --third-size: 1.25rem;
  --fourth-size: 1.125rem;
  --basics-size: 1rem;
  --smallest-size: 0.88rem;
  --color-w: #ffffff;
  --color-bk: #000000;
  --color-k: #333333;
  --color-grey: #555555;
  --color-light-gray: #777777;
  --color-link: #4f7bf5;
  --color-line: #b0b7bb;
	--color-r: #ff4038;
	--color-g: #00a17f;
}

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{font-size: var(--basics-size); color: var(--color-k); line-height: 2;}
p, span{font-weight: 500;}
p span{font-weight: 700; color: var(--color-r);}

.kv-wrap{width: 100%; background: #02EDF0 url(../img/kv-bg.jpg) center top no-repeat; background-size: 2560px;}
.kv-td{width: 900px; height: 550px; margin: 0 auto;}
.kv-td ul{width: 100%; height: 100%; position: relative;}
.kv-td ul li{position: absolute;}
.kv-td ul li img, .kv-td img{width: 100%;}
.kv-tit{width: 900px; left: 0; top: 0;}
.kv-tit2{width: 900px; left: 50%; bottom: 0; margin-left: -450px;}
.kv-tit3{width: 186px; left: -164px; top: 206px;}

.m-kv, .mid-kv{display: none;}

.nav-wrap{width: 100%; background: var(--color-g); overflow: hidden;}
.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(--third-size); font-weight: 700; border-right: 1px solid var(--color-w); color: var(--color-w); padding: 5px 60px; line-height: 1; transition: 0.5s;}
.menu li p.final{border-right: none;}
.menu li:hover p{color: var(--color-line); transition: 0.5s; cursor: pointer;}
.mobile{display: none;}
.m_tit{display: none;}

.cd-auto-hide-header{transform: translateZ(0); will-change: transform; transition: transform .5s;}
.cd-secondary-nav{position: relative; z-index: 9; transform: translateZ(0); will-change: transform; transition: transform .5s;}
.cd-secondary-nav.fixed{position: fixed; top: 0;}
.cd-secondary-nav.slide-up{transform: translateY(-85px);}

section{width: 100%; overflow: hidden; padding-top: 80px;}
.bg-color{background: #ffe4d2; padding: 80px 0;}
#product3{margin-bottom: 80px;}

.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-r); 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 p, .product-td p span{text-align: center; font-size: var(--third-size); line-height: 2;}

.instructions{width: 90%; margin: 20px 5% 100px;}
.instructions li{list-style-type: decimal; padding-left: 5px;}

.date-wrap{display: flex; justify-content: space-evenly; width: 70%; margin: 40px auto;}
.date-td{flex: 1; text-align: center; margin: 0 20px; padding: 20px; border-radius: 40px; border-left: 10px solid var(--color-g); border-right: 10px solid var(--color-g);}
.date-td p{font-weight: 700; color: var(--color-k); font-size: var(--second-size);}
.date-td p span{display: block;}
.ps{display: table; font-size: var(--basics-size); color: var(--color-grey); line-height: 2; font-weight: 500; margin: 20px auto; text-align: left;}
.ps li{list-style-type: disc; line-height: 1.75;}

.list{font-size: var(--basics-size); color: var(--color-grey); line-height: 1.875; display: inline-block; width: 90%; text-align: left; margin: 0 auto; width: 100%;}
.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{margin-bottom: 0; font-size: var(--fourth-size); text-align: left; width: 100%; border: none; padding: 4px 10px; list-style-type: none; font-weight: 500; line-height: 1.75;}
ul.sp li::before{content: '▸'; margin-right: 6px; color: var(--color-k);}
.card-td ul.sp li.hotel, ul.sp li.hotel::before{color: var(--color-r);}

.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: 6px 20px; position: relative;}
.tabs li a h2, .tabs li a p{position: relative; z-index: 1; color: var(--color-w); background: none; padding: 0;}
.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); display: inline; font-weight: 700;}
.tabs li p{font-size: var(--third-size); display: inline; font-weight: 700; padding-left: 3px;}

.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: 40px 10px 0; background: var(--color-w); border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; display: flex; text-align: left; flex-wrap: wrap; justify-content: center;}
.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){border-right: none;}

a.menulink{transition: .5s; flex-grow: 1; display: flex; flex-direction: column;}
a.menulink:hover h2{color: var(--color-link); 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-link); font-weight: 700; transition: .5s; margin-bottom: 5px; background: none; padding: 0;}
.card-td p, .card-td ul.sp li{font-size: var(--basics-size); line-height: 1.5; color: var(--color-grey); margin-bottom: 5px; padding: 0;}
.card-td ul.sp li::before{margin-top: 0;}

.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-k); border-radius: 15px; padding: 1px 8px 2px 11px; font-size: var(--smallest-size); margin-right: 6px; letter-spacing: 1px;}
.att{color: var(--color-grey); font-size: var(--basics-size); display: block; font-weight: 500; margin-top: 10px;}
.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: 60px; background: #ff2530; color: var(--color-w); font-weight: 700; font-size: var(--first-size); line-height: 60px; 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: var(--color-g); transition: .5s;}

/* table */
.instructions li.entry-content{border: 3px solid var(--color-bk); list-style-type: none; margin: 0; padding: 0; border-radius: 5px;}
.container{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{text-align: left; color: var(--color-k); 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(--fourth-size); border-right: 2px solid var(--color-bk);}
table.rg-table th:last-child{border-right: none;}
table.rg-table td{padding: 1em; border-right: 2px solid var(--color-bk);}
table.rg-table td p{text-align: left; font-size: var(--fourth-size);}
table.rg-table td p span, ul.sp li span{font-size: var(--fourth-size); color: var(--color-r); font-weight: 700;}
table.rg-table td:last-child, .table.rg-table th:last-child{border-right: none;}
.store{width: 30%; text-align: center; font-size: var(--second-size); line-height: 1.75; color: var(--color-link); font-weight: 700;}

.cen{text-align: center;}
.area{width: 100px; text-align: center;}
.area span{background: var(--color-g); color: var(--color-w); border-radius: 50px; display: inline-block; padding: 5px 15px;}
.m-noo{display: none;}

@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%;}
	.kv-td{width: 100%;}
}

@media screen and (max-width: 1100px) {
  .date-wrap{width: 90%;}
}

@media screen and (max-width: 1023px){
	.date-wrap{width: 100%;}
	.mid-kv{display: none;}
	.m-kv{display: inline-block; width: 100%;}
	.m-kv img{width: 100%;}
	.menu li p{padding: 5px 40px;}
	.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;}
}

@media screen and (max-width: 950px) {
	.m-noo{display: block;}
}

@media screen and (max-width: 800px) {
	section{padding-top: 60px;}
	.bg-color{padding: 60px 0;}
	#product3{margin-bottom: 60px;}
	.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);}
	.menu li p{padding: 5px 25px; font-size: var(--fourth-size); border-right: none;}
	.cen{text-align: left;}
	.cta{width: 50%;}
	.area span, .store span{margin: 10px 0; padding: 3px 15px;}

	.instructions{width: 100%; margin: 20px 0 60px;}

	.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; padding: 0 1em;}
	table.oneline td:first-child{padding-top: 0.5em;}
	table.oneline td:last-child{padding-bottom: 1em;}
	table.oneline tr:last-child{margin: 0; padding: 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{width: 100%;}

	.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: #219a76; pointer-events: auto; max-height: 100vh; opacity: 1; transition: max-height 1.5s ease-out, opacity 1s ease-out;}
	.menu li{font-size: var(--basics-size); font-weight: normal;  margin: 0; border-bottom: 1px dotted #006d49; width: 100%;}
	.menu li a{display: block; width: 100%; font-weight: 700; padding: 15px 20px;}
	.menu li:last-child{border-bottom: none;}
	.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;}
	.m-noo{display: none;}
	.m-noo2{display: none;}
}

@media screen and (max-width: 640px) {
	.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: 50%;}
	.tabs li:last-child{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.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;}
	.cta{width: 70%;}
	.product-td{width: 85%; margin-left: 7.5%; margin-right: 7.5%;}
	.product-td h2{font-size: 2rem;}
	.product-td p, .product-td p span{font-size: var(--fourth-size); line-height: 1.875; 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;}
	.list{width: 100%;}
	.card-td h2{font-size: var(--second-size);}
	.date-wrap{flex-direction: column; margin: 0 auto;}
	.date-td{flex: none; margin: 20px auto; width: 400px;}
	.product-td div.date-td p, .product-td div.date-td p span{font-size: var(--second-size); text-align: center;}
	.card-td ul.sp li::before{margin-top: 3px;}
}

@media screen and (max-width: 500px) {
	.product-list{padding: 20px 5px 0;}
	.product-td h2{font-size: 2rem;}
	.card-td h2{font-size: var(--second-size);}
	.cta{width: 100%; font-size: var(--third-size);}
	.big{font-size: var(--fourth-size); line-height: 1;}
	.date-td{width: 90%; margin: 20px auto;}
	.ps{padding-left: 20px;}
}

@media screen and (max-width: 376px) {
	.big, table.rg-table td p, table.rg-table td p span, ul.sp li, ul.sp li span, .tabs li h2, .tabs li p{font-size: var(--basics-size);}
	.card-td p, .card-td ul.sp li{font-size: var(--smallest-size);}
	.product-td h2{font-size: 1.875rem;}
	.card-td h2, .store{font-size: var(--third-size);}
}

/* animation */
.slideExpandUp{
	animation: slideExpandUp 1.2s ease-out;
	visibility: visible !important;	
}

@keyframes slideExpandUp {
	0%{transform: translateY(100%) scaleX(0.5); opacity: 0;}
	30%{transform: translateY(-8%) scaleX(0.5);}	
	40%{transform: translateY(2%) scaleX(0.5);}
	50%{transform: translateY(0%) scaleX(1.1); opacity: 1;}
	60%{transform: translateY(0%) scaleX(0.9);}
	70%{transform: translateY(0%) scaleX(1.05);}	
	80%{transform: translateY(0%) scaleX(0.95);}
	90%{transform: translateY(0%) scaleX(1.02);}	
	100%{transform: translateY(0%) scaleX(1);}
}

.slideDown{animation: slideDown .5s ease forwards; opacity: 0;}

@keyframes slideDown {
	0%{transform: translateY(-50%); opacity: 0;}
	100%{transform: translateY(0%); opacity: 1;}		
}

.slideDown2{animation: slideDown2 .5s ease;}

@keyframes slideDown2 {
	0%{transform: translateY(50%); opacity: 0;}
	100%{transform: translateY(0%); opacity: 1;}		
}

.fadeIn{animation: fadeIn 1s ease-in-out;}

@keyframes fadeIn {
	0%{opacity: 0;}
	100%{opacity: 1;}		
}

.pulse{animation: pulse .8s infinite;}

@keyframes pulse {
	0%{transform: scale(0.9);}
	50%{transform: scale(1);}
	100%{transform: scale(0.9);}	
}

.pulse2{animation: pulse2 3s infinite;}

@keyframes pulse2 {
	0%{transform: scale(1);}
	50%{transform: scale(1);}
	55%{transform: scale(1.05);}
	60%{transform: scale(1);}
	65%{transform: scale(1.05);}
	70%{transform: scale(1);}
}

.slideRight{animation: slideRight .5s;}

@keyframes slideRight {
	0%{transform: translateX(-80%); opacity: 0;}
	100%{transform: translateX(0%); opacity: 1;}	
}