@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Abril+Fatface&display=swap');
body {height:100%;font-family: Microsoft JhengHei;
	-webkit-font-smoothing: antialiased;
	font-smoothing: antialiased;
}

/* btn */
.btn2 {font-size:30px;background: #000;border: none;color:#fff;font-weight:800;padding: 15px 30px;border-radius: 50px;min-width: 160px;
	cursor: pointer;
	-webkit-box-shadow: 0px 20px 50px 0px rgba(55, 56, 56, 0.2);
	box-shadow: 0px 20px 50px 0px rgba(55, 56, 56, 0.2);
	-webkit-transition: all 0.3s;
	-o-transition: all 0.3s;
	transition: all 0.3s;
}
.btn2:hover {color: #fff;background: #333;}

.mb-40{margin-bottom:-40px;}
.mb20{margin-bottom:20px;}
.mb40{margin-bottom:40px;}
.mr20{margin-right:20px;}
.ml30{margin-left:30px;}
.pt120{padding-top:120px}
.pb50{padding-bottom:50px}
.mtb30{margin:30px auto}
.mtb60{margin:60px auto}
.radius20{border-radius:20px;}
.radius10{border-radius:10px;}
.hover{}
.hover a:hover{color:#ea6000}
.tffffff{color: #fff!important;}
.bg13b165{background:#13b165}
.t-center{text-align:center}
.ml100{margin-left:100px}
.mt80{margin-top:80px}
.mt40{margin-top:40px}
.t-Noto{font-family: 'Noto Serif TC', serif;font-size:15px;}
.imgHover{}
.imgHover:hover{opacity: 0.5; filter: alpha(opacity=50);	-webkit-transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
	-o-transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
	transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;}	
img {max-width: 100%;}
h1,h2{font-family: 'Noto Serif TC', serif;font-size:55px;font-weight: 800;}
h3,h4,h5,h6 {padding: 0;margin: 0;font-weight: 600;color: #222;}
p {font-size:16px;margin-bottom: 10px;line-height: 24px;color: #666;letter-spacing:1px;font-weight: 600;}
button:focus,input:focus,textarea:focus,select:focus {outline: none;}
a:hover,a:focus {text-decoration: none;outline: none;}
ul,ol {padding: 0;margin: 0;}
.section-title {text-align: center;margin-bottom: 40px;}
.section-title p {letter-spacing: 3px;margin-bottom:0px;padding-bottom:0px;line-height:16px;}
.section-title h2 {margin-top:10px;}
.section-title h1 {margin-top:10px;}
.set-bg {background-repeat: no-repeat;background-size: cover;height:100%;height:100vh;}
.show991{display:none}
.clear{clear:both}

/* nav */
.header-section {position: absolute;top: 0;left: 0;width: 100%;-webkit-transition: all 0.3s ease-in-out;transition: all 0.3s ease-in-out;z-index:999;border-bottom: 1px solid rgba(255, 255,255, 0.3);}
.nav-shrink {-webkit-transition: all 0.3s ease-in-out;transition: all 0.3s ease-in-out;position: fixed;background: #ea6000;border-bottom-width: 0px!important;}
.nav-shrink .nav-link { color:#000; }
.nav-shrink .site-menu a:hover{ color:#fff; }
.header-warp {width:100%;height:100px;padding:0px;}
.header-section .site-logo{float:left;height:100%;padding:10px 0px;}
.header-section .site-logo img {height:80px;max-height:100%;}
.nav-shrink .light {display:none}
.header-section .dark{display:none}
.nav-shrink .dark{display:block}
.responsive-switch,.sm-close {display:none;}
.sm-close{color: #999;}
.site-menu ul {font-family: 'Noto Serif TC', serif;float:right;list-style: none;padding-top:35px;margin-left:0px}
.site-menu li {display: inline-block;}
.site-menu li .act{color:#F60!important;}
.nav-shrink li .act{color:#fff!important;}
.site-menu li.current a:after {-webkit-transform: scale(1);-ms-transform: scale(1);transform: scale(1);}
.site-menu a:hover {color: #d3d3d3;}
.site-menu a {color: #fff;padding: 5px 10px;font-size:19px;position: relative;margin-left: 5px;font-weight: 600;}

/* sliders */
.sliders-section2 {min-height:300px;height:300px;background-position: center center;position: relative;}
.sliders-section {height:100vh;background-position: center center;position: relative;min-height:800px!important;}
.sliders-section .sliders-content {width:100%;margin:10px auto;position: absolute;top:20%;z-index: 5;}
.sliders-content.sticky {position: absolute;}
.sliders-content h1 {color: #fff;}
.sliders-content .move img{width:500px;}
.sliders-content .move {
	-webkit-animation: finger 1.5s infinite;
	animation: finger 1.5s infinite;
}
@-webkit-keyframes finger {
	0% {
		opacity: 1;
		-webkit-transform: translateY(0px);
		transform: translateY(0px);
	}
	50% {
		opacity: .2;
		-webkit-transform: translateY(15px);
		transform: translateY(15px);
	}
	100% {
		opacity: 1;
		-webkit-transform: translateY(0);
		transform: translateY(0);
	}
}

@keyframes finger {
	0% {
		opacity: 1;
		-webkit-transform: translateY(0px);
		transform: translateY(0px);
	}
	50% {
		opacity: .2;
		-webkit-transform: translateY(15px);
		transform: translateY(15px);
	}
	100% {
		opacity: 1;
		-webkit-transform: translateY(0);
		transform: translateY(0);
	}
}


/* franchise */
.franchise-section {margin:80px auto }
.franchise-section h3{
	margin-top:20px;
	line-height: 40px;
}
.telCall{ display:block;margin-top:30px;}
.telCall a{color:#000;font-size:50px;font-family: "impact", "Arial Black", sans-serif;letter-spacing: 2px;}
.telCall .area{font-size:12px;font-weight: 800;}	
.telCall .ring {animation: ring 1.5s ease-in-out infinite alternate;color:#000}
@keyframes ring {
  0%,100% {text-shadow: 0 0 20px #fffca1, 0 0 100px #fff, 0 0 20px #fff;}
  50% {text-shadow: 0 0 50px #fffca1, 0 0 150px #fff, 0 0 50px #fff; color: #fffca1;}
}

/* menu */
.menu-section{margin:80px auto}
.gallery p{margin:10px 0px 50px 0px;font-size: 11px;line-height: 12px;}
.gallery .popular{
	width:60px;left:12%;top:7%;
	height:60px;
	position:absolute;
	z-index:10;
	color: #000;
	font-size:60px;
	font-weight: 600;
	text-align:center;
	font-family: "DM Serif Text", serif!important;
}
.gallery .meals-item {display: block;margin-bottom: 10px;position: relative;}
.gallery .meals-item img {min-width: 100%;}
.gallery .meals-item:hover:after {opacity: .5;height: 100%;-webkit-transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;-o-transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;}
.gallery .meals-item:hover i {opacity: 1;-webkit-transition: all 0.3s ease .2s;-o-transition: all 0.3s ease .2s;transition: all 0.3s ease .2s;}
.gallery .meals-item:after {
	position: absolute;
	content: "";
	width: 100%;
	height: 50%;
	left: 0;
	bottom: 0;
	background: #000;
	opacity: 0;
	z-index: 1;
	-webkit-transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.2s;
	-o-transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.2s;
	transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.2s;
}
.gallery .meals-item i {position: absolute;right: 20px;top: 20px;font-size: 30px;color: #fff;z-index: 4;opacity: 0;
	-webkit-transition: all 0.3s ease 0s;
	-o-transition: all 0.3s ease 0s;
	transition: all 0.3s ease 0s;
}

/* recommend */
.recommend-section{display:block;margin: 0 auto;background-color: #000;background-image: url(../img/join-bg.webp);background-repeat: no-repeat;background-size: cover;}
.recommend-section .recommend-warp {display:block;margin: 80px auto;}
.recommend-section h3{font-size: 18px;font-weight: 400;line-height: 28px;}

/* daorugei*/
.daorugei-section {margin:80px auto }

/* contact */
.contact-section{
	background-color: #eee;
	background-image: url(../img/bg.webp);
	background-repeat: no-repeat;
	background-position: center top;
}
.contact-section .cont-info {margin: 50px auto 70px auto;text-align:center}
.contact-section i{margin-right:10px;font-size:30px;}
.contact-section .cont-info a, .contact-section .cont-info span {margin-right:30px;color: #333;font-size: 18px;font-weight: normal;font-family: Verdana, Geneva, sans-serif;}
.contact-section .cont-info span:last-child {margin-right:0px;}
.contact-section .cont-info span:first-child {margin-left:28px;}
.contact-section .cont-info a {text-decoration: underline #333 dotted 1px;}
.contact-section .addline {text-align:center;position:relative;}
.contact-section .addline .scanning {left: 50%;width:250px;transform: translate(-50%, -0px);visibility: hidden;text-align: center;position: absolute;z-index: 1;bottom:20px;}
.contact-section .addline:hover .scanning {visibility: visible;}

/* store */
.store-section {margin:80px auto }
.store-section .panel .panel-heading h4{font-size:23px;}	
.store-section .panel .panel-body p{font-size:18px;padding-top:10px;line-height: 25px;}
/* Footer */
.footer-section{margin-top:-5px;background-color:#333;text-align:center;height:75px;}
.copyright {font-size: 11px;color: #fff;padding-top: 25px;letter-spacing: 2px;}

/* hotKey */
.hotKey{display:block;width:100%;Z-index:999;background-color: #fff;position: fixed;height: 75px;bottom: 0px;display: block;box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;}
.hotKey ul , li{margin:0px 0px;padding:0px;display: block;}
.hotKey li{float:left;margin:10px 0px;width:20%;list-style-type: none;}
.hotKey li img{width:auto;max-width:60px;margin-bottom:3px;}
.hotKey li p{
	margin-top:5px;
	font-size:12px!important;
	font-weight: 800;
	line-height: 10px;
	letter-spacing: 0px;color: #333;
}

/*--------------------
	Responsive
----------------------*/
@media only screen and (max-width: 768px) {
.daorugei-section, .store-section, .franchise-section, .menu-section{margin:50px auto }


.store-section .panel .panel-body span{display:block}
.contact-section.cont-info a,
.contact-section .cont-info span {margin-right:0px;display:block;line-height: 50px;}
.contact-section .cont-info span:first-child {margin-left:0px;}	
.franchise-section h3{font-size:20px;}	
.gallery .popular{
	left:14%;
	width:40px;
	height:40px;
	font-size:40px;}
.sliders-section .sliders-content {top:10%;}
p {font-size:16px;line-height: 24px;}

.sliders-content .move img{width:280px;margin-top:50px;}
.contact-section .addline:hover .scanning {display:none}
h1, h2{font-size:40px;}
.t-center768{text-align:center}	
.gallery h3{font-size:20px;}
.sliders-content {position: absolute;}
h3{font-size:18px;line-height: 28px;}
}

@media only screen and (max-width: 991px) {
.telCall a{font-size:35px}
.hidden991{display:none}
.show991{display:block}
.t-center991{text-align:center}	
}

@media only screen and (max-width: 1024px) {
.nav-shrink .site-menu a:hover{ color:#ea6000; }
.site-menu li .act{color:#F60!important;}
.site-menu a:hover {color: #ea6000;}
.nav-shrink .responsive-switch {color: #fff;}
.site-menu a {color: #000;}
.ml100{display:none}
.responsive-switch {color: #fff;display: block;float: right;font-size: 40px;padding-top: 10px;padding-right: 12px;cursor: pointer;}
.sm-close {font-size: 40px;
		display: block;
		position: absolute;
		top: 30px;
		right: 20px;
		width: 60px;
		height: 60px;
		border: 1px solid #ddd;
		border-radius: 50%;
		text-align: center;
		padding-top:0px;
		cursor: pointer;
		z-index: 9;
		opacity: 0;
		transform: rotate(90deg);
		transition: all 0.3s ease 0s;
	}
	.site-menu {
		position: fixed;
		width: 100%;
		height: 100%;
		left: 0;
		top:0px;
		display: table;
		background: #fff;
		z-index: 999;
		opacity: 0;
		transform: translateX(-100%);
		transition: all 0.4s ease 0.3s;
	}
.site-menu.active {opacity: 1;transform: translateX(0);transition: all 0.4s ease 0s;}
.site-menu.active ul {top: 0;opacity: 1;transition: all 0.3s ease 0.4s;}
.site-menu.active .sm-close {opacity: 1;transform: rotate(0);transition: all 0.3s ease 0.4s;}
.site-menu ul {vertical-align: middle;float: none;text-align: center;position: relative;margin-top: 10%;opacity: 0;transition: all 0.3s ease 0s;}
.site-menu li {display: block;margin:15px;}
.site-menu a {font-size: 25px;padding: 0px 4px;margin-left: 0;margin-bottom: 5px;display: inline-block;}
.site-menu a:after {background: #d3d3d3;height: 5px;width: 100%;left: 2px;bottom: 6px;margin-left: -3px;z-index: -1;}	
}

@media only screen and (max-width: 1280px) {
.sliders-content .move img{width:350px;}
.header-section .site-logo{padding:8px 0px;}
.header-section .site-logo img {height:64px;}
.ml100{margin-left:50px}
.site-menu{background-color: rgba(255,255,255,1);}
.header-warp {height:80px;}
.pt120{padding-top:90px}
.site-menu ul {padding-top:25px;}
}	



