@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/earlyaccess/cwtexyen.css');
/* ---reset.css--- */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}

html{
	background:url('../images/bg_03.jpg') repeat-y center top, url("../images/bg.jpg") repeat;
	scroll-behavior: smooth;
}
	@media screen and ( max-width: 640px) {
		html{ padding-bottom:13vw; background:url('../images/bg_03.jpg') repeat-y center top/260.5%, url("../images/bg.jpg") repeat;}
	}

/* Public Version 公版顏色設定 */
:root {
	--PV-eslite: #d93332; /* 誠品線上標準色 */
}

/* PC */
.WRAPPER{ position:relative; width:100%; min-width:1200px; margin:0 auto; overflow:hidden;}
 	@media screen and ( max-width: 640px ){
		.WRAPPER{ min-width:100%;}
	}
.container { overflow: hidden; max-width:1920px; margin:0 auto;}
.topbox { position: relative; width: 1200px; margin: auto;}
.kv_pc {width: 100%;  position: relative; text-align:center; display: flex;justify-content: center;max-width: 1920px; margin: auto;flex-wrap: wrap-reverse;}
.kv_pc img { display: block; text-align: center; }
.kv_m { display: none; }
.kv_m img { display: block; }
.kv_m a {font-size: 0; display: block; }
.for_pc{ display: block; }
.for_m { display: none; }

.kv-tit1{ position:absolute; top: 134px; left: 224px;}
.kv-tit2{ position:absolute; top: 157px; left: 335px;}
.kv-tit3{ position:absolute; top: 134px; left: 434px;}
.kv-tit4{ position:absolute; top: 190px; left: 564px;}

.sp1{ position: absolute; top: 387px; left: 247px;}
.sp2{ position: absolute; top: 591px; left: 349px;}

.deco-left{ position: absolute; top:162px; left:-47px; animation:rotate 1.5s linear infinite; }
.deco-right{ position: absolute; top:330px; right:128px; animation:rotate 1.5s linear infinite; }
	@keyframes rotate {
		0% { transform: rotate(0); }
		25% { transform: rotate(90deg); }
		50% { transform: rotate(180deg); }
		75% { transform: rotate(270deg); }
		100% { transform: rotate(360deg); }
	}
/* m */
@media screen and ( max-width: 640px ){
	.kv_m { display: block; width: 100%; }
	.kv_m img {  width: 100%; }
	.kv_pc { display: none; }
	.container {width: 100%; min-width: auto; }
	.for_pc{ display: none; }
	.for_m { display: block; }
}


 /* ----------------------CUSTOMERIZATION---------------------- */
h2 { color:#333; font-family:'cwTeXYen', sans-serif; font-weight:bold;   }
h2 a { color:#333; }
.titleB { margin:20px auto 5px auto; width:1160px; height:145px; background:url("../images/bg_theme.png") no-repeat center center; }
.titleB h2{ letter-spacing:5px; padding: 0; letter-spacing: 5px; display:flex; align-items:center; top:35px;}
.titleB h2:before, .titleB h2:after{ background-color:unset;}
.titleB big{ font-size: 3.5rem; color:#f6168a;}
	.container1200 .titleB { height:unset; background:none; padding:0px; margin:0 auto; display:inherit; }
	.titleB h2.h2-food, .titleB h2.h2-coupon{ text-align:left;  display:flex; align-items:center; top:unset; padding: 25px 0 25px 20px; }
	.titleB h2.h2-food{ background:url('../images/bg_theme-1.png') no-repeat center center; }
	.titleB h2.h2-coupon{ background:url('../images/bg_theme-2.png') no-repeat center center; }
	.more{ 
		position: absolute; right: 0; 
		font-size: 22px; letter-spacing: 1px; padding-right: 20px;
	}
	.more a{  color:#ffeae2; }
	.more span{ border-radius: 30px; padding:15px 15px; margin-right:5px; background:#287b35; border:2px solid #333; }
	.more span:hover{ background:#f43030; }

.baseline { margin:0px auto; }
.baseline li{ border:2px solid #333;}
.baseline .font { padding-top:10px;}
.baseline .font h4{ color:var(--PV-eslite);}
	
.hightlight{ margin: 0px auto; padding:0; position:relative; }
.hightlight li{ border:2px solid #333; overflow: hidden;}
.hightlight .font h4 {background:var(--PV-eslite); }
	.style-202106-01 li{ width: 265.5px; }
	.style-202106-01 img{ width: 265.5px; }


.items5 img{ width: 210px; height: 210px;}


/* 人氣美食*/
.bg4 .items5 li{ width: 205px; overflow: visible; border:none;}
.bg4 .items5 img{ width: 205px;}

.bg4 .ad-370{ background: none; flex: 1; display: flex; justify-content: center; align-items: center; }
.bg4 .ad-370 img{ width: 280px; height: 280px; margin:0 auto; }
.bg4 span.more-go{ 
	background:var(--PV-eslite); 
	color:khaki; 
	text-align: center; 
	margin: 10px auto 0 auto;
    display: block;
    padding: 10px;
    font-size: 24px;
    border-radius: 30px;
}


/* coupon*/
.bg6 .hightlight li{ background: #fff; padding:25px 0 50px 0; background:url('../images/bg_coupon.png') no-repeat center top/100%; overflow: visible; border:none;}
.bg6 .hightlight .font .price{ font-size: 32px; margin:10px 0 0 0;}
.bg6 .hightlight .font p{ margin:0 0 15px 0; font-size:14px;}
.bg6 .hightlight .font h4{ font-size: 24px; background:var(--PV-eslite); color:#fff; padding:5px 15px; display: initial; border-radius: 30px;}
/*1x5*/
.bg6 .items5 li{ padding: 15px 0 30px 0;}
.bg6 .items5 .font p{ margin:0 0 6px 0;}
.bg6 .items5 img{ border:1px solid #f0f0f0; border-radius: 50%; width: 190px; height: 190px; margin:0 auto;}
/*1x4*/
.bg6 .style-202106-01 img{ border:1px solid #f0f0f0; border-radius: 50%; margin:0 auto; width: 240px; height: 240px;}


	@media screen and (max-width: 640px){
		h2 { font-size:2rem; padding:2vw 0; margin:5vw 0 1vw 0;}
		.titleB { padding-top:0; }
		.titleB { width:100%; height:21vw; background:url("../images/mbg_theme.png") no-repeat center center/95%; margin: 0 auto;}
		.titleB h2 { letter-spacing:1px; padding:0 3vw; display: block; top:5vw;}
		.titleB big{ font-size:2.285711rem;}
			.titleB h2.h2-food, .titleB h2.h2-coupon{ text-align:center;  display:block; padding:2vw 0; background: none; }
			.more a{ font-size: 1.14286rem; }
			.more{ position: initial; font-size:1rem; display: flex; justify-content: center; padding-right:0px; }
			.more span{ padding:2.6vw; margin:1vw; }
		h4{ font-size:1rem; padding:0.5vw; }
			

		.baseline { margin:2vw auto 0 auto; }
		.baseline li { padding:2vw; }
		.baseline img { width: 42vw; height: 42vw; }
		.baseline .font { padding-top:1vw;}

		.hightlight{ padding: 0;  }
			.style-202106-01 li{ width: 46vw; }
			.style-202106-01 img{ width: 46vw; }

		.items5 li { padding: 2vw; margin: 1vw;}
		.items5 img{ width: 40.8vw; height: 40.8vw; }
		.items5 li:first-child{ padding: 2vw;}
		.items5 li:first-child .font{ display: flex; flex-direction: column; justify-content: left; width: 100%; margin:auto 0 auto 3vw; overflow:hidden;}
		.items5 li:first-child h4{ padding-left:2vw; white-space: nowrap; text-overflow: ellipsis;}
		

		/* 人氣美食*/
		.bg4 .items5 li{ width: 46vw;}
		.bg4 .items5 img{ width: 42vw; height: 42vw;}

		.bg4 .items5 li.ad-370 { width: 46vw; flex: unset; order:5; }
		.bg4 .items5 li.ad-370 a { flex-direction: column;}
		.bg4 .ad-370 img{ width: 46vw; height: 46vw; }
		.bg4 span.more-go{ 
			padding: 2vw; margin:unset; margin-top:2vw;
			font-size: 5vw;
		}
		

		/* coupon*/
		.bg6 .hightlight li { padding:3.5vw 3.5vw 3.6vw 3.5vw; }
		.bg6 .hightlight .font .price{ margin:1vw 0 0 0; text-align: center; position: relative; left: -2%; font-size: 2rem; }
		.bg6 .hightlight .font p{ margin:0 0 2vw 0;}
		.bg6 .hightlight .font h4{ text-align: center; padding:1vw 2vw; font-size:1.42857rem;}
		/*1x5*/
		.bg6 .items5 li:first-child { padding:4vw 5vw; background: url('../images/bg_coupon-yoko.png') no-repeat center center/100%; }
		.bg6 .items5 li:first-child .font h4 { padding:2vw 3.5vw; }
		.bg6 .items5 img{ width: 40vw; height: 40vw; margin:0 auto;}
		/*1x4*/
		.bg6 .style-202106-01 li img{ width: 40vw; height: 40vw; margin:0 auto;}
		
	}




 /* ----------------------BACKGROUND---------------------- */
 .container1200 { max-width:1200px; margin:0px auto; padding:0; position:relative; }
 .container1920 { max-width:1920px; margin:0px auto; padding:0; position:relative; }
	  @media screen and ( max-width: 640px ){
		 .container1200, .container1920{ max-width:100vw; min-width:320px; padding:0; text-align:center; }
	 }

.content{ padding:0; margin:0 auto;}
.bg_img{ width:1920px; height:7400px; max-width:100%; position:absolute; background:url("../images/bg_deco.png") repeat-y center top; background-size:1920px;}

.container1200{ border-radius: 30px; border:3px solid #333; }
.bg1, .bg5{ padding:0 0 30px 0; }
.bg2{ background:url('../images/mbg_01.png') repeat; padding:0 0 30px 0; border-top:3px solid #333; border-bottom:3px solid #333; }
.bg3{ padding:0 0 0px 0; }
.bg4, .bg6{ background:url('../images/mbg_01.png') repeat; padding:0 0 30px 0; }

.bg_bnr{ margin:0 auto; padding:1px 0;}
.bg_bnr/*:last-of-type*/{ }
	.banner { padding:0px 0; position:relative; }
	.banner li { margin:6px 8px; }
	.banner img{ width:562px; }

	@media screen and (max-width: 640px){
		header div{ margin:2.5vw 10px 0px 0px !important;}

		.bg_img{ display: none;}

		.bg1, .bg2, .bg3, .bg4, .bg5, .bg6{ padding:2vw 0 4vw 0; background-size: 25%; }
		.bg6{ padding:0 0 4vw 0; }
		
		.bg_bnr{ padding:0 0 1vw 0;}
		.banner li { margin:1vw 2vw }
			.bg_bnr .banner { margin: 0 auto; padding:2vw 1vw; text-align: center; }
			.banner img { width:100%; margin:0 auto;}
	}
	@media screen and (max-width: 320px){
		header img{ width:62%;}
	}




 /* ---------------------- OTHERS ---------------------- */

/* ribbon */
.ribbon { color: white; background: linear-gradient(#ed384a 0%, #a7212e 100%); left:10px; top:-8px; padding: 6px 5px; }
.ribbon:before { border-bottom: solid 6px #a7212e;}
.ribbon:after { border-left: 25px solid #a7212e; border-right: 25px solid #a7212e;}
	@media screen and ( max-width: 640px ){
		.ribbon { left:0.8vw; top: -2.2vw; width: 10vw; padding:6px 2px; font-size: 0.92857rem; line-height: 1rem;}
		.ribbon:before { left: 10vw;}
		.ribbon:after { border-left: 5vw solid #a7212e; border-right: 5vw solid #a7212e; border-bottom:8px solid transparent;}
	}



/* hover effect */
li:hover { transform: scale(1);}
.container li, #navbar div div{
	-webkit-transition-duration:.3s;
	        transition-duration:.3s;
	-webkit-transition-property:transform;
	        transition-property:transform;}
.container li:active, .container li:focus, .container li:hover{
	-webkit-transition-timing-function:ease-out;
			transition-timing-function:ease-out;
	-webkit-transform:translateY(-6px) !important;
			transform:translateY(-6px) !important;}
.bg6 li:active, .bg6 li:focus, .bg6 li:hover{
	-webkit-transform:translateY(0px);
			transform:translateY(0px) !important;}
	@media screen and ( max-width: 640px ){
		li:hover { transform: scale(1);}
		.container li, #navbar div div,
		.container li:active, .container li:focus, .container li:hover,
		menu li:active, menu li:focus, menu li:hover{
			-webkit-transform:translateY(0px);
					transform:translateY(0px) !important;}
	}
	
	


/*--goto top--*/
#gotop {display: inline-block;background-color: #000;opacity:0.3;width: 40px;height: 40px;text-align: center;border-radius: 100%;position: fixed;bottom: 0px;right: 0px;transition: background-color .3s, opacity .5s, visibility .5s;opacity: 0;visibility: hidden;z-index: 1000;margin: 30px;}
#gotop::after {font-family: FontAwesome;content:'　';font-weight: normal;font-style: normal;font-size: 2em;line-height: 50px;color: #fff;  opacity:0.5;background: url(../images/top.png) center no-repeat; background-size:50%;background-position:50% 20%;}
#gotop:hover {cursor: pointer;background-color: #666;}
#gotop:active {background-color: #666;}
#gotop.show {opacity: 0.4;visibility: visible;}
	@media screen and ( max-width: 640px ){
	#gotop {bottom:18vw;right: 0;margin: 2vw;	}
	}






/* navigation bar for mobile */
menu{display:none;}
	@media screen and ( max-width: 640px ){
		menu{ display:block;}

		menu ul{
			position:fixed;
			bottom:0;
			left:0;
			margin:0;
			width:100%;
			display:flex;
			flex-wrap:wrap;
			list-style: none;
			background:rgba(51, 51, 51,0.98);
			z-index:990;
			padding:4px 0;
			border-top:none;
		}
		menu ul li{
			border-right:1px dotted #f9f0ee;
			border-top:1px dotted #f9f0ee;
			padding:4px;
			width:33.33%;
			box-sizing:border-box;
			text-align:center;
			font-size:13px;
			letter-spacing:1px;
		}
		menu ul li a{
				font-size:12px;
		}
		menu ul li:nth-last-child(3n+1){
			border-right:none;
		}
		menu ul li:nth-last-child(n+4){
			border-top:none;
		}
		menu a{
			color:#f9f0ee !important;
			text-decoration:none;
		
		}

	}


/* navigation bar for pc */
/* Style the navbar */
#navbar {
	max-width:1920px;
	height:78px;
	z-index:990;
	margin:0 auto;
}
  	@media screen and ( max-width: 640px ) {
		#navbar{ display:none;} 
		.sticky + .content { padding-top:0px !important;}
	}

.nav_content{ 
	width:1100px; margin:0 auto; display:flex; justify-content:center; align-items:center;
	overflow: hidden;
	padding:4px 10px;
	border-radius: 40px;
	background: #000;
}
.nav_content div{ width:16%; padding:0 10px; border-right: 1px dotted #ffeae2; }
.nav_content div:last-child{ border-right:none;}

/* Navbar links */
#navbar a {
	display:block;
	text-align: center;
	text-decoration: none;
	font-size:22px;
	line-height:25px;
	color:#ffeae2;
	padding:10px 0;
}
#navbar .row_01 a{ line-height: 54px;}
#navbar a:hover{ background: #f43030; color:#ffeae2; border-radius:2px; transition:all 0.2s;}
#navbar a big{ color:#f9ff2b;}

/* Page content */
.content {
	padding: 0px;
}

/* The sticky class is added to the navbar with JS when it reaches its scroll position */
.sticky {
	position: fixed;
	top: 5px;
	right: 0;
	left: 0;
	width: 100%;
}

/* Add some top padding to the page content to prevent sudden quick movement (as the navigation bar gets a new position at the top of the page (position:fixed and top:0) */
.sticky + .content {
	padding-top: 78px;
}