@charset "utf-8";
/* CSS Document */

body{ font-family: 'Roboto', sans-serif, 'Noto Sans TC', sans-serif; background: #28292d;}

ul, ol, li{ margin: 0; padding: 0;}
.abs{ position: absolute; left: 50%;}

.m-sns, .m-menu-movie, .m-sliders{ display: none;}

/* header start */
header{ position: fixed; display: -webkit-box; width: 100%; height: 120px; background: #191B21; border-bottom: 1px solid #CB964C; z-index: 900;}
	
	header .logo{ position: absolute; top: 2px; left: 50%; margin-left: -219px; width: 438px; height: 230px; background: url("../images/logo.png"); z-index: 999;}
	.shiner { 
		position: absolute;
		top: 0;
		padding: 0 0 0 1px;
		width: 0;
		animation: shiny 2s infinite;
		overflow: hidden;
		transform: skewX(20deg);
	}
	.base { width: 438px; filter: invert(100%); -webkit-filter: invert(100%); transform: skewX(-20deg);}

	@keyframes shiny {
		0% {
			width: 0;
			left: 0px;
			opacity: 1;
			filter: blur(0px);
		}
		100% {
		  width: 438px;
		  opacity: 0;
		  filter: blur(10px);
		}
	}
	
	.nav-btn{ width: 1120px; height: 26px; margin: 48px auto 0;}
		.nav-btn li{ float: left; width: 149px; height: 26px; padding-left: 26px; box-sizing: border-box; list-style-type: none; background: url("../images/nav-btn-point.png") no-repeat 0 0;}
		.nav-btn02, .nav-btn04{ margin-left: 22px;}
		.nav-btn03{ margin-left: 480px;}
		.nav-btn li a{ width: 116px; height: 26px;}
		.nav-btn li a{ position: relative;}
		.nav-btn li a img { position:absolute; top: 0; left: 0;
		/* CSS3淡出淡入效果,1秒 */
		-webkit-transition: opacity 0.5s ease-in-out;
		-moz-transition: opacity 0.5s ease-in-out;
		-o-transition: opacity 0.5s ease-in-out;
		transition: opacity 0.5s ease-in-out;
		}
		.nav-btn li a img:nth-of-type(2):hover{ opacity: 0; /*滑鼠滑入時，透明度變0*/}
/* header end */

/* sns start */
.sns{ position: fixed; top: 180px; right: 20px; z-index: 999;}
.sns img{ width: 40px;}
.sns div{ padding: 5px;}
/* sns end */

/* content start */
.content{ width: 100%; height: 960px; background: url("../images/bg-content.jpg") top center no-repeat; border-bottom: 1px solid #CB964C;}
	.slogan{ /*transform: translate(-50%, 180%);*/ transform: translate(-50%, 200%); width: 722px; height: 232px; background: url("../images/slogan.png") top center no-repeat; background-size: 100% auto; z-index: 800;}
	.menu{ transform: translate(-50%, 400%); width: 870px; height: 180px; z-index: 800;}
		.menu-icon, .menu-qr, .menu-btn, .menu-movie{ float: left;}
		
		.menu .discount{ transform: translate(-425%, 80%); width: 134px; height: 114px; background: url("../images/discount.gif"); }		

		.menu-icon{ width: 180px; height: 180px; background: url("../images/menu-icon.png"); margin-right: 9px;}
		.menu-qr{ width: 180px; height: 180px; background: url("../images/menu-qr.jpg"); margin-right: 9px;}
		.menu-btn{ width: 180px; height: 180px; margin-right: 10px;}
			.menu-btn li, .menu-btn li a{ display: block; width: 180px; height: 55px;}
			.btn-event{ transform: translate(-272%, -370%); width: 191px; height: 162px; background: url("../images/btn-event.png"); background-size: 100% auto;}
				.btn-event, .btn-event a{ width: 191px !important; height: 162px !important;}
			.btn01{ background: url("../images/menu-btn01.png"); margin-bottom: 7px;}
			.btn02{ background: url("../images/menu-btn02.png"); margin-bottom: 8px;}
			.btn03{ background: url("../images/menu-btn03.png");}
		
		.menu-movie{ width: 302px; height: 180px; background: url("../images/menu-movie.png");}
			.menu-movie-icon{ margin: 60px auto 0; width: 50px; height: 59px; background: url("../images/menu-movie-icon.png"); -webkit-animation-name: scaleDraw; /*關鍵幀名稱*/ -webkit-animation-timing-function: ease-in-out; /*動畫的速度曲線*/ -webkit-animation-iteration-count: infinite;  /*動畫播放的次數*/ -webkit-animation-duration: 2s; /*動畫所花費的時間*/}
			@keyframes scaleDraw {  /*定義關鍵幀、scaleDrew是需要繫結到選擇器的關鍵幀名稱*/
				0%{
					transform: scale(1);  /*開始為原始大小*/
				}
				25%{
					transform: scale(1.1); /*放大1.1倍*/
				}
				50%{
					transform: scale(1);
				}
				75%{
					transform: scale(1.1);
				}
			}
/* content end */

/* intro start */
.intro{ width: 100%; height: 1160px; background: url("../images/bg-intro.jpg") top center no-repeat; border-bottom: 1px solid #CB964C;}
	.intro-title{ transform: translate(-50%, 225%); width: 500px; height: 88px; background: url("../images/intro-title.png") top center no-repeat; background-size: 100% auto;}
		
		.pic-swiper-cont{ display: block; width: 590px; height: 800px; transform: translate(-110%, 38%);}
		.pic-swiper{ height: 776px;}
		
		.pic-swiper .swiper-slide { height: 92% !important;}
		.pic-swiper .swiper-slide img{ width: 412px; height: 716px; margin-left: -100px;}
		.pic-swiper .swiper-pagination-bullet{ width: 38px !important; height: 38px !important; background:url(../images/dot.png) !important; opacity: 1 !important; border-radius: 0 !important;}
		.pic-swiper .swiper-pagination-bullet-active{ background:url(../images/doth.png) !important;}
/* intro end */

/* footer start */
#footer{ width:100%; height:150px; background: #1f2124;}
	#footer .footer-wrapper{ width:1280px; height:150px; padding:42px 0px 0px 0px; margin:0px auto; font-family:arial,helvetica,sans-serif,Microsoft JhengHei; box-sizing: border-box;}
		#footer .footer-wrapper .logo{ float:left; width:193px; margin:0px 0px 0px 120px;}
		#footer .footer-wrapper .logo img{ width:193px;}
		#footer .footer-wrapper .copyright{ float:left; margin:16px 0px 0px 40px; text-align:center; font-size:14px; color:#929292;}
			#footer .footer-wrapper .copyright a, #footer .footer-wrapper .copyright p{ color:#929292;}
			#footer .footer-wrapper .copyright p{ margin:3px 0px 0px 0px;}
		#footer .footer-wrapper .kind{ float:left; width:47px; margin:9px 0px 0px 40px;}
		#footer .footer-wrapper p.note{ float:left; color:#929292; font-size:13px; line-height:17px; margin:0px 0px 0px 8px;}
/* footer end */

@media (max-width:960px) {
	header, .sns, .slogan, .discount, .menu-icon, .menu-movie, .menu-qr, .pic-swiper-cont{ display: none;}
	
	.content{ background: url("../images/m-bg-content.jpg") top center no-repeat; background-size: 100% auto; width: 100%; height: 0; padding-bottom: 205%; border-bottom: none;}
		.menu{ transform: translate(-50%, 300%); width: 90%; height: 0; padding-bottom: 50%;}
		.menu-btn{ width: 100%; height: 0; padding-bottom: 55%;}
		.menu-btn li, .menu-btn li a { width: 100%; height: 0; padding-bottom: 17.6%; }
		.btn-event{ transform: translate(-50%, -297%) !important; width: 35% !important; height: 0 !important; padding-bottom: 29% !important; background: url("../images/btn-event.png"); background-size: 100% auto;}
		.btn01, .btn02, .btn03{ margin-bottom: 5px; background: url("../images/m-menu.gif") center top no-repeat; background-size: 100% auto;}
		.btn01{ background-position: -0% 0%;}
		.btn02{ background-position: -0% 50%;}
		.btn03{ background-position: -0% 100%;}
		
		.m-menu-movie{ display: block; transform: translate(-50%, -600%); width: 14%; height: 0; padding-bottom: 17%; background: url("../images/m-menu-movie-icon.png") top center no-repeat; background-size: 100% auto; animation: opacity0-1 2s ease 2s infinite alternate;}
		@keyframes opacity0-1{
			0% {opacity: 1;}
			50% {opacity: 0.8;}
			100% {opacity: 1; }
	  	}
	/* content end */
	
	.intro{ width: 100%; height: 0; padding-bottom: 210%; background: none;}
		.intro-title{ transform: translate(-50%, 15%); width: 98%; height: 0; padding-bottom: 18%;}
		
		
		.m-sliders{ display: block; transform: translate(-45%, 17%); width: 90%; height: 0; padding-bottom: 156%; overflow: hidden;}
		.m-sliders .swiper-slide img{ width: 90%; margin: 0 auto;}
		.m-sliders .swiper-pagination-bullet{ width: 38px !important; height: 38px !important; background:url(../images/dot.png) !important; opacity: 1 !important; border-radius: 0 !important;}
		.m-sliders .swiper-pagination-bullet-active{ background:url(../images/doth.png) !important;}
		.m-sliders .swiper-pagination{ transform: translate(-5%, 0%);}
	/* intro end */
	
	.m-sns{ display: block; transform: translate(-50%, 910%); width: 50%; height: 0; padding-bottom: 20%;}
		.m-sns div{ float: left; display: block; width: 50%; padding: 2%; box-sizing: border-box;}
		.m-sns div a img{ width: 100%;}
	/* sns end */
	
	#footer{ height: 100%; background: #1f2124;}
	#footer .footer-wrapper{ width: 100%; height: auto; overflow: hidden; box-sizing: border-box; padding: 2% 0 2% 0;}
	#footer .footer-wrapper .logo{ clear: left; width: 100%; margin: 0; text-align: center;}
	#footer .footer-wrapper .copyright{ clear: left; width: 100%; margin: 1% 0 1%;}
	#footer .footer-wrapper .flogo img{ width: 40%; margin: 0 auto;}
	#footer .footer-wrapper{ font-size: 0.8em;}
	#footer .footer-wrapper .kind{ clear: left; width: 12%; margin: 1% 42.5%;}
	#footer .footer-wrapper p.note { clear: left; box-sizing: border-box; padding: 0 3%; text-align: center; margin: 1%;}
	/* footer end */
}