@charset "UTF-8";
*{margin: 0; padding: 0; box-sizing: border-box;}
ul, li{margin: 0; padding: 0; list-style: none;}
img, div, iframe{border: 0; vertical-align: bottom;}
body, html{width: 100%; height: 100%;}
h1{display: none;}
li li, li p, li span, li p span, p span{font-size: 1em;}
a:link, a:visited ,a:hover ,a:active{text-decoration: none;}
@import url(https://fonts.googleapis.com/earlyaccess/notosanstc.css);
body, html{
-webkit-text-size-adjust: 100%;
text-rendering: optimizeLegibility !important;
-webkit-font-smoothing: antialiased !important;
font-family: 'Noto Sans TC', Arial, Helvetica, sans-serif;}
body{overflow-x: hidden; background: #fff;}

p, .instructions li, ul.sp li{font-size: 1rem; color: #333; line-height: 2;}
p span, .list li span, .big{color: #F64D7D; font-weight: 700;}
li.star p{ color: #00a7aa;}
ul.sp li.star::before{content: '';}

.kv_wrap{width: 100%; display: inline-block; background: url(../img/kv-bg.jpg) center top no-repeat; background-size: 2560px;}
.kv_td{width: 100%; height: 550px; float: left;}
.kv_td ul{width: 1160px; height: 100%; position: relative; left: 50%; margin-left: -580px;}
.kv_td ul li{position: absolute;}
.kv_td ul li img{width: 100%;}
.kv-tit{width: 664px; left: 230px; top: 0;}
.kv-bird{width: 262px; left: 230px; top: 69px;}
.kv-discount{width: 500px; left: 0; top: 190px;}
.kv-plate{width: 370px; right: 0; top: 190px;}
.m_kv, .mid_kv{display: none;}

.nav_wrap{width: 100%; background: #00B671; float: left;}
.menu{text-align: center; display: flex; justify-content: center; align-items: center;}
.menu li{font-size: 1.25rem; font-weight: 700; display: inline; cursor: pointer; border-right: 1px solid #eee;}
.menu li:last-child{border-right: none;}
.menu li a{display: inline-block; color: #EBF5DA; padding: 20px 60px; transition: 0.5s;}
.menu li a:hover{color: #131313; background: #fff; transition: 0.5s;}
.mobile{display: none;}
.m_tit{display: none;}

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

section{width: 100%; float: left; overflow: hidden; padding-top: 80px;}
.product_td{ width: 1000px; position: relative; left: 50%; margin-left: -500px; text-align: center;}
.tit_wrap{display: inline-block; margin-bottom: 30px;}
.tit_wrap h2{color: #131313; font-weight: 900; font-size: 3rem; line-height: 1.375; letter-spacing: 3px; margin-bottom: 20px; position: relative; display: inline-block;}
.tit_wrap h2 span, .product_td-sp h2 span{color: #00B671;}
.tit_wrap p{font-size: 1.125rem; line-height: 1.75; margin-bottom: 5px;}
.decorate{position: absolute; z-index: 9; right: -40px; top: -5px; width: 38px;}
.plate-wrap{width: 100%; display: inline-flex; justify-content: space-around;}
.plate-wrap li{width: 32%; text-align: center; padding: 10px 10px 20px; background: rgb(234, 247, 233); border-radius: 10px;}
.plate-wrap h3{font-size: 1.5rem; letter-spacing: 2px; display: block; color: #131313;}
.plate-wrap h3 span{color: #00B671;}
.plate-wrap li img{width: 80%; margin-bottom: 10px;}

.list-wrap{width: 60%; display: inline-block; margin: 0 20%;}
.list{font-size: 1.125rem; color: #333; line-height: 1.875; display: inline-block; width: 100%; margin: 0 auto 10px; text-align: left;}
.list li{list-style-type: decimal; margin-left: 20px; margin-bottom: 5px;}
.list li span{font-size: 1rem;}
.att{color: #00a7aa; font-size: 0.938rem; display: block; margin-bottom: 5px; text-align: left; font-weight: 500;}

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

.tabs{font-size: 0; list-style: none; padding-left: 0; display: block; margin-bottom: -1px;}
.tabs li{display: inline-block; width: 20%; text-align: center;}
.tabs li a{text-decoration: none; display: block; padding: 6px 20px; position: relative; color: #fff;}
.tabs li a h2, .tabs li a p{position: relative; z-index: 1; color: #131313;}
.tabs li a::before,.tabs li a::after{
content: ''; position: absolute; backface-visibility: hidden; z-index: 0; bottom: 0; width: 50%; height: 100%; transition: .5s;}
.tabs li a::before{left: 0; border-radius: 10px 0 0 0; transform-origin: left bottom; transform: skewX(-5deg); border: 3px solid #202020; border-bottom: none;}
.tabs li a::after{border-radius: 0px 10px 0 0; transform: skewX(5deg); right: 0; transform-origin: right bottom; border: 3px solid #202020; border-left: none; border-bottom: none;}
.tabs li a::before, .tabs li a::after{background: #fff;}
.tabs li.active a h2, .tabs li.active a p, .tabs li a:hover h2, .tabs li a:hover p{ color: #fff;}
.tabs li.active a::before, .tabs li.active a::after,
.tabs li a:hover::before, .tabs li a:hover::after{background: #00B671; transition: .5s;}
.tabs li h2{font-size: 1.5rem; display: inline; font-weight: 500;}
.tabs li p{font-size: 1rem; display: inline; padding-left: 3px;}
#Penghu,#Kinmen,#Matsu,#Taiwan{display: block; border: 3px solid #202020;}

.entry-content2{width: 100%; border: 3px solid #202020; float: left; margin-bottom: 10px; border-radius: 0 0 5px 5px;}
.product_list{width: 100%; padding: 40px 10px 0; background: #fff; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; display: flex; text-align: left; flex-wrap: wrap;}
.product_list li{border-right: 3px #bcbdbd 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: #3fd88a; transition: .5s;}
a.menulink:hover img{opacity: 80%; transition: .5s;}

.m_pd{margin-bottom: 30px;}
.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: 1.25rem; color: #F64D7D; font-weight: 500; transition: .5s; margin-bottom: 5px;}
.card_td p{font-size: 1rem; line-height: 1.5; color: #333; 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;}
/* ul.sp li::before{ content: '•';} */

.card_price{font-size: 0.813rem; color: #555; font-weight: normal; text-align: right; margin-top: auto;}
.big{font-size: 1.375rem; text-decoration: none; padding: 0 3px; line-height: 1.5;}
.addup{border: 1px solid #333; border-radius: 15px; padding: 2px 8px 2px 11px; font-size: 0.813rem; margin-right: 6px; letter-spacing: 2px; color: #555; font-weight: 500;}
.del{text-decoration: line-through; color: #999; font-weight: normal;}

.cta{width: 30%; height: 60px; background: #F64D7D; color: #fff; font-weight: 700; font-size: 1.5rem; 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: #fff; transition: .5s;}
.cta a:hover{text-decoration: none; background: #00B671; transition: .5s;}

/* table */
.instructions li.entry-content{width: 100%; border: 3px solid #202020; float: left; list-style-type: none; margin: 0; padding: 0; border-radius: 5px;}
.rg-container{font-size: 1rem; color: #333; line-height: 2; width: 100%; background: #fff;}
.rg-container a{color: #F64D7D;}
.rg-container a:hover{text-decoration: underline;}
table{ width: 100%; border-collapse: collapse; border-spacing: 0;}
table.rg-table tr{text-align: left; color: #333; border-top: 2px solid #202020;}
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: #333; font-size: 1rem; border-right: 2px solid #202020;}
table.rg-table th:last-child{border-right: none;}
table.rg-table td{padding: 10px; border-right: 2px solid #202020;}
table.rg-table td:last-child, .table.rg-table th:last-child{ border-right: none;}

.cen{text-align: center;}
.area{width: 80px; text-align: center;}
.store{color: #F64D7D; line-height: 1.5; font-size: 1.25rem;}
.product_td-sp{width: 920px; display: flex; margin: 0 auto 30px; justify-content: center;}
.product_td-sp h2{color: #131313; font-weight: 900; font-size: 2.5rem; line-height: 1.25; letter-spacing: 1px; margin-bottom: 20px;}
.product_td-sp p{font-size: 1.375rem; line-height: 1.75; margin-bottom: 5px;}
.product_td-sp p a{color: #0066cc; transition: .5s;}
.product_td-sp p a:hover{text-decoration: underline; color: #00B671; transition: .5s;}
.Green{width: 50%; padding: 10px;}
.Green img{width: 100%; border-radius: 10px;}

/* back to top */
#back-top{position: fixed; bottom: 50px; right: 0; z-index: 999;
text-align: center; width: 50px; height: 50px; display: block; border-radius: 3px; background: rgba(85,85,85,0.5); line-height: 50px; font-size: 24px; color: #fff; font-weight: normal; transition: 1s;}
#back-top a{display: block; width: 100%; height: 100%; transition: 1s; color: #fff;}
#back-top:hover{background-color: rgba(85,85,85,0.3);}

@media screen and (max-width: 1300px){
.kv_wrap{display: none;}
.mid_kv{display: block; width: 100%; float: left;}
.mid_kv img{width: 100%;}
}

@media screen and (max-width: 1100px){
.product_td{width: 90%; left: 0; margin-left: 5%;}
.product_td-sp{width: 90%;}
}

@media screen and (max-width: 1023px){
.mid_kv{display: none;}
.m_kv{display: block; width: 100%; float: left;}
.m_kv img{width: 100%;}
.menu li a{padding: 20px 40px;}
.btn_wrap{padding-bottom: 60px;}
.rg-container{width: 100%;}
.cta{width: 40%;}
.instructions, .list{width: 100%;}
.list-wrap{width: 80%; margin: 0 10%;}
.tabs li h2{font-size: 1rem;}
}

@media screen and (max-width: 800px){
section{padding-top: 60px;}
.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 #bdbdbd dotted; width: 100%; padding-bottom: 30px;}
.big{font-size: 1.25rem;}
.menu li{font-size: 1.125rem;}
.menu li a{padding: 20px 25px;}
.cen{text-align: left;}
.cta{width: 50%;}
.tit_wrap h2{font-size: 2.5rem;}
.plate-wrap{justify-content: space-between;}
.plate-wrap li img{width: 100%;}
.plate-wrap h3{font-size: 1.25rem;}
.tabs li h2{line-height: 1;}
.tabs li p{display: block;}
.tabs li a{padding: 10px 20px 3px;}
}

@media screen and (max-width: 600px){
.entry-content2{border-radius: 5px;}
.nav_wrap{position: relative; z-index: 999;}
.mobile{display: block;}
.nav_wrap ul{padding: 0; opacity: 0;}
.menu{margin-top: 60px; width: 100%; height: 0; padding: 0; pointer-events: none; line-height: 40px; flex-wrap: wrap;}
.menu.open{height: auto; background: #65C993; opacity: 1; pointer-events: auto;}
.menu li{display: block; font-size: 1rem; font-weight: normal; width: 100%; margin: 0; border-bottom: 1px dotted #00B671;}
.menu li:last-child{border-bottom: none;}
.menu li a{color: #fff; display: block; width: 100%; padding: 5px;}
.menu li:after{content: none;}
.menu li.menuLink a{display: block; padding: 0; height: auto;}
.nav{width: 65px; height: 0; color: #fff;}
.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::-moz-focus-inner{padding:0;border:0 none;}
/*** Focus fix for Chrome*/
.hamburger:focus{outline: 0;}
/*** Styling the icon*/
.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: #fff;}
/*** Styles for the active `.hamburger` icon*/
.hamburger.active:before, .hamburger.active .icon, .hamburger.active:after{background: #fff;}
/*** VERTICAL HAMBURGER*/
.hamburger.hamburger-vertical.active{transform: rotate(270deg);}
/*** CLOSE/CANCEL/CROSS*/
.hamburger.hamburger-cancel.active .icon{transform: scale(0);}
.hamburger.hamburger-cancel.active:before{transform: translateY(7px) rotate(135deg);}
.hamburger.hamburger-cancel.active:after{transform: translateY(-9px) rotate(-135deg);}
.m_tit{display: block; position: absolute; line-height: 62px; left: 70px;}
.m_tit h2{color: #fff; font-size: 1.25rem; font-weight: 700;}
.tabs{margin-bottom: 10px; text-align: left;}
.tabs li{width: 31%; margin: 2% 1%;}
.tabs li:last-child{float: left; margin-bottom: 4%;}
.tabs li a{padding: 6px 0; border: 3px solid #202020; border-radius: 30px;}
.tabs li.active a, .tabs li a:hover{border-radius: 30px; background: #00B671;}
.tabs li a::before, .tabs li a::after{display: none;}
.tabs li h2{font-size: 1.25rem;}
.tabs li p{display: inline;}
.cta{width: 70%;}
.store, .card_td h2{font-size: 1.125rem; margin-bottom: 10px;}
.list-wrap{width: 95%; margin: 0 2.5%;}
.tit_wrap h2, .product_td-sp h2{font-size: 2rem;}
.product_td-sp p{font-size: 1.25rem;}
.plate-wrap{flex-wrap: wrap; justify-content: center;}
.plate-wrap li{width: 60%; margin-bottom: 20px;}
.plate-wrap li:last-child{margin-bottom: 0;}
.plate-wrap li img{width: 60%;}
}

@media screen and (max-width: 500px){
.cta{width: 90%;}
.big{font-size: 1.125rem; line-height: 1;}
.m-noo{display: none;}
.tit_wrap h2, .product_td-sp h2{font-size: 1.875rem;}
.product_td-sp{flex-wrap: wrap;}
.Green{width: 100%; text-align: center;}
.tabs li{width: 48%;}
.tabs li h2{font-size: 1rem;}
.plate-wrap li, .plate-wrap li img{width: 80%;}
}

/* animation */
.floating{
	animation: floating 2s infinite;
}

@keyframes floating {
	0%{transform: translateY(0%);}
	50%{transform: translateY(8%);}	
	100%{transform: translateY(0%);}			
}

.bigEntrance{
	animation: bigEntrance 2s ease-out;
	visibility: visible !important;			
}

@keyframes bigEntrance {
	0%{transform: scale(0.3) rotate(6deg) translateX(-30%) translateY(30%); opacity: 0.2;}
	30%{transform: scale(1.03) rotate(-2deg) translateX(2%) translateY(-2%); opacity: 1;}
	45%{transform: scale(0.98) rotate(1deg) translateX(0%) translateY(0%); opacity: 1;}
	60%{transform: scale(1.01) rotate(-1deg) translateX(0%) translateY(0%); opacity: 1;}	
	75%{transform: scale(0.99) rotate(1deg) translateX(0%) translateY(0%);opacity: 1;}
	90%{transform: scale(1.01) rotate(0deg) translateX(0%) translateY(0%);opacity: 1;}	
	100%{transform: scale(1) rotate(0deg) translateX(0%) translateY(0%);opacity: 1;}		
}

.slideRight{
	animation: slideRight 1.5s ease-in-out;
	visibility: visible !important;	
}

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

.fadeIn{
	animation: fadeIn 1.5s ease-in-out;
	visibility: visible !important;	
}

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