@charset "utf-8";
/* CSS Document */
/* ---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_1.jpg") top center repeat-y fixed, #000;}
header {background:url("../images/header_bg.jpg") top center no-repeat;}
@media screen and ( max-width: 991px ){
html{background:url("../images/bg_1.jpg") top center repeat-y, #000;}
header {background:none;}	
	}


/* PC */
.WRAPPER{ position:relative; width:100%; min-width:1200px; margin:0 auto; overflow:hidden;}
 	@media screen and ( max-width: 991px ){
		.WRAPPER{ min-width:100%;}
		
	}
.container { overflow: hidden; }
.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; }

/* m */
@media screen and ( max-width: 991px ){
	.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; }
}




/*主視覺動畫*/
.kv_title {
	position: absolute;
	top:50px;
	left:0px;
	pointer-events: none;
	-webkit-filter: brightness(10);
	-webkit-mask-size: 300% 200%;
	-webkit-mask-image: -webkit-linear-gradient( -45deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 60%);
	-webkit-transition: -webkit-mask-position;
	-webkit-animation-timing-function: linear;
	-webkit-transform: translate3d(0, 0, 0);
	-moz-filter: brightness(1.5);
	-moz-mask-size: 300% 200%;
	-moz-mask-image: -webkit-linear-gradient( -45deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 60%);
	-moz-transition: -webkit-mask-position;
	-moz-animation-timing-function: linear;
	-moz-transform: translate3d(0, 0, 0);
	-o-filter: brightness(1.5);
	-o-mask-size: 300% 200%;
	-o-mask-image: -webkit-linear-gradient( -45deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 60%);
	-o-transition: -webkit-mask-position;
	-o-animation-timing-function: linear;
	-o-transform: translate3d(0, 0, 0);
	filter: brightness(10);
	mask-size: 300% 200%;
	mask-image: -webkit-linear-gradient( -45deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 60%);
	transition: -webkit-mask-position;
	animation-timing-function: linear;
	transform: translate3d(0, 0, 0);
	transition-duration: 5s;
	animation: move 2.5s ease-out infinite;
}
.kv_title_bg{	
	position: absolute;
	top:50px;
	left:0px;
}
img.kv_promotion{
	position: absolute;
	top:415px;
	left:0px;
}
img.kv_fire{
	position: absolute;
	top:184px;
	left:899px;
	z-index: 1;
}
	
.MySwipeKV{
  position: absolute;
  top: 60px;
  left: 652px;
}
.swiperKV-container{
  width: 558px;
  height: 558px;
  overflow: hidden;
  border-radius: 558px;	
}


/**
 * ----------------------------------------
 * animation move
 * ----------------------------------------
 */
  @keyframes move {
	from {
	  -webkit-mask-position: 150% 0px;
	  -moz-mask-position: 150% 0px;
	  -o-mask-position: 150% 0px;
	  mask-position: 150% 0px;
	}
	to {
	  -webkit-mask-position: 0% 0px;
	  -moz-mask-position: 0% 0px;
	  -o-mask-position: 0% 0px;
	  mask-position: 0% 0px;
	}
  }


/*區塊調整*/
.blk_spa {margin-bottom: 40px;}
.block_00 {background: url("../images/blk00_bg.png")top center no-repeat; margin: 0 auto 30px; padding-top: 20px;}
.block_2, .block_4, .block_6 {background: url("../images/bg_2.jpg") center no-repeat fixed; padding: 20px 0 60px;}
.block_6 {background: url("../images/bg_2.jpg") center no-repeat fixed; padding: 20px 0 10px;}
.block_1, .block_3, .block_5 {padding: 0 0 10px;}

/*標題*/
.btt {
	background: url("../images/btt_bg.png")bottom center no-repeat;
	width: 100%;
	height: 170px;
	margin: 10px auto;
}
.btt h2 {
	font-family: 'Noto Sans TC', sans-serif;
	font-weight: 500;
	font-size: 1.6rem;
	font-style: italic;
	letter-spacing: 2px;
	color: #fff;
	line-height: 4.6rem;
}
.btt h2 span{
	font-family: 'Noto Sans TC', sans-serif;
	font-weight: 900;
	font-size: 4rem;
	font-style: italic;
	letter-spacing: 4px;
	color: #000;
	text-shadow: 2px 2px #888;
}

/*元件調整*/
.banner {padding: 0;}
.hightlight, .topfive {margin: 20px auto;}
.ranks, .hightlight .font h4 {background: #c1371d;}
.half ul {border-radius: 10px; background: #0000007a;}


/*promotion四塊*/
.block_00 ul {
    width: 1200px;
    margin: 0px auto;
    display: flex;
    justify-content: space-around;
}

/*燈箱*/
.film-genre{margin: 20px auto;}
.film-genre li{border:2px #fff solid; background-color: #fff;}
.film-genre li a{background: #fff;}
.film-genre li .font{display: none;}
.film-genre li:hover .font {
    display: inline;
    background: #00000080;
}
.film-genre img {
    width: 100%;
    object-fit: cover;
    object-position: 0;
}
.film-genre .font {width: 370px;height: 370px;margin: auto 0;padding: 140px 0 0 0;position: absolute;background: rgba(0,0,0,0.5);}
.film-genre .font h4 {text-align: center;margin:0;font-weight: bold;color: #fff;line-height: 40px;font-size: 1.8rem;}

/*五品特殊*/
.special_5p_1 .hightlight_5p {
	width: 1200px;
	margin: 20px auto ;
	background: url(../images/sp5p_bg.png) top center no-repeat;
	padding: 15px 0 20px;
}
.special_5p_1 .title_AA h3 {
	border-left: none;	
	font-family: 'Noto Sans TC', sans-serif;
	font-weight: 900;
	font-size: 3.2rem;
	font-style: italic;
	letter-spacing: 4px;
	color: #000;
	text-shadow: 2px 2px #888;
    padding: 50px 0 100px 520px;
    width: 100%;
    position: absolute;
}
.title_AA .more{
	padding: 66px 42px 10px 10px; 
    right: 0;
}
.title_AA .more a{color:#fff; font-family: 'Noto Sans TC', sans-serif; font-weight: 500; font-style: italic; font-size: 1.5rem;}
.special_5p_1 .hightlight_5p ul li,.special_5p_1 .hightlight_5p ul li:first-child{height: auto;}
.special_5p_1 .hightlight_5p ul li h4 {background: #c1371d;}

/*按鈕*/
.button_go {margin: 40px 0;}
.button_go a{
	text-align: center;
	width: 360px;
	height: 80px;
	display: block;
	background: url("../images/bg_1.jpg")center;
	line-height: 72px;
	margin: 0 auto;
	border-radius: 50px;
	color:#fff;
	box-shadow: 0 6px #000;
	transition: .2s;
	font-size:3rem;
	letter-spacing: 5px;
	font-family: 'Noto Sans TC', sans-serif;
	font-weight: 900;
	font-style: italic;
	text-shadow: 2px 2px #000;
}
.button_go a:hover{ 
	filter:brightness(90%);
	transform: translateY(4px);
	box-shadow: 0 2px #000;
}


/* -------------------------------------m版------------------------------------- */
@media screen and ( max-width: 991px ){
	
/*區塊調整*/
.blk_spa {margin-bottom: 5vw;}	
.block_00 {background: none; margin: 2vw auto; padding-top: 0;}	
.block_2, .block_4, .block_6 {background: url("../images/bg_2.jpg") center repeat-y; padding: 2vw 0 4vw;}
.block_6 {background: url("../images/bg_2.jpg") center repeat-y; padding: 2vw 0 1vw;}
.block_1, .block_3, .block_5 {padding: 0 0 1vw;}	
	
/*標題*/
.btt {
	background-size: contain;
	width: 85%;
	margin: -10vw auto 3vw;
}
.btt h2 {
	font-size: 1.6rem;
	font-style: italic;
	letter-spacing: 2px;
	line-height: 4.5rem;
	padding-top: 9vw;
}
.btt h2 span{
	font-weight: 900;
	font-size: 3.5rem;
	font-style: italic;
	letter-spacing: 2px;
}	
	
/*元件調整*/
.hightlight, .topfive {margin: 2vw auto;}	
	
/*promotion四塊*/
.block_00 {margin-top: 3vw;}	
.block_00 ul { display: none;}
.block_00 .kv_m a {margin: 0 2vw; padding: .8vw 0;}		
	
/*燈箱*/	
.film-genre{margin: 2vw auto ;}	
.film-genre li{border:1px #fff solid; }
.film-genre img {width: 36vw; object-position:100%;}
.film-genre li .font{display: inline;}	
.film-genre .font {width: 31vw;height: 31vw;margin: auto 0;padding: 11vw 0 0 0;position: absolute;background: rgba(0,0,0,0.5);}
.film-genre .font h4 {line-height: 1.3rem;font-size: 1rem; font-weight: 500;}	
	
/*五品特殊*/	
.special_5p_1 {margin: 2vw auto 0;}	
.special_5p_1 .hightlight_5p {
	background:none;
	width: 100%;
	padding-bottom: 0vw;
	margin: 0 auto;
}	
.special_5p_1 .title_AA {margin: 2vw auto 0; height:auto;}	
.special_5p_1 .title_AA h3{ 
	position: relative;
	right:0; 
	padding: 0px; 
	top:0;
	font-size: 2.2rem;
	letter-spacing: 3px;
	color: #fff;
	text-shadow: 2px 2px #000;
	}	
.title_AA .more{
	padding: 3vw; 
    right: 3vw;
}
.title_AA .more a{font-size: 1.2rem;}
	
/*按鈕*/
.button_go {margin: 6vw 0 10vw;}
.button_go a{
	text-align: center;
	width: 60vw;
	height: auto;
	line-height: 13vw;
	font-size: 2rem;
	padding-bottom: 1vw;
}	
	
}








/*--六品不輪播--*/
.bg_1 .swiper{width:100%; padding-top: 0px; }
.bg_1-sw{ display: flex;flex-wrap: wrap;width: 1080px;margin: 0 auto;}
.bg_1-sw .half02 { width: 340px; height:480px; margin: 10px 10px; border-radius: 10px; background: #0000007a;}
.half02 ul{padding:30px 30px 30px 30px;}
.half02 ul li a:hover, .half02 ul li:hover{transform: scale(.9);}
.half02 ul li:nth-child(1) img{width: 320px; height: 320px; object-fit: contain;margin: 40px auto 0;}
.half02 ul li:nth-child(2){background: #c1371d;width: 80px;height: 80px; border-radius: 50%; display: flex;align-items: center;justify-content: center;position: absolute; top: 12px;left:6px;}
.half02 ul li:nth-child(2) p{font-size: 20px;color: #fff;margin-top: 0;}
.half02 ul li:nth-child(2) big{font-size: 48px;color: #fff; font-family: 'Noto Sans TC', sans-serif; }
.half02 ul li:nth-child(3){position: absolute; top: 20px;left: 92px;font-size: 40px; font-family: 'Noto Sans TC', sans-serif;}
.half02 ul li:nth-child(3) span{font-size: 28px;color: #fff; font-family: 'Noto Sans TC', sans-serif;}
.half02 ul li:nth-child(4){position: relative;bottom: 10px;left: 0px;text-align: left;}
.half02 ul li:nth-child(4) span{background: #fff;color: #c1371d;padding: 5px 10px;font-size: 20px;text-align: left; font-family: 'Noto Sans TC', sans-serif;}
.half02 ul li:nth-child(5){position:relative; bottom: -10px;left: 0px;}
.half02 ul li:nth-child(5) span{background: #fff;color: #c1371d;padding: 5px 10px;font-size: 18px;text-align: left; font-family: 'Noto Sans TC', sans-serif;}
.half02 ul li:nth-child(6){background:#c1371d;width: 80px;height: 80px; border-radius: 50%;  top: 380px;right: 10px;display: flex;align-items: center;justify-content: center;position:absolute;}
.half02 ul li:nth-child(6) p{color: #fff;border-radius: 50%; font-size: 26px;margin-top: 0; font-family: 'Noto Sans TC', sans-serif; font-weight: 900;}
.half02 ul li .price p{ font-size: 1.4rem; color: #c1371d; font-weight: bold; line-height: 0.6; padding-bottom: 15px; padding: 5px; font-family: 'Noto Sans TC', sans-serif;}

      .sw .scene {
        text-align: center;
        font-size: 18px;
      /*  background: #fff;*/

        /* Center slide text vertically */
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
      }

      .sw .scene img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

@media screen and ( max-width: 991px ){
	.bg_1 .swiper{ padding-bottom: 0vw;}
	.bg_1-sw{ display: flex;flex-wrap: wrap;width: 96vw;margin: 0 auto;}
    .bg_1-sw .half02{ width:94vw; height:auto; margin: 2vw auto;}
	
	.half02 ul{padding:5vw 2vw 0;}

	.half02 ul li:nth-child(1) img{width:80vw; height: 80vw; object-fit: contain;margin: 2vw auto 0;}
	.half02 ul li:nth-child(2){width: 20vw;height:20vw; border-radius: 50%; display: flex;align-items: center;justify-content: center;position:absolute;top: 2vw; left: 2vw;}
	.half02 ul li:nth-child(2) p{font-size:1.2rem;}
	.half02 ul li:nth-child(2) big{font-size: 3rem;}
	.half02 ul li:nth-child(3){position:relative; top: 0;left:0;font-size:2rem;text-align: center;margin-top: 10px;}
	.half02 ul li:nth-child(3) span{font-size: 2rem;}
	.half02 ul li:nth-child(4){position:relative; bottom:0;left: 0;top: 0; text-align:center;margin: 20px auto;}
	.half02 ul li:nth-child(4) span{padding: 5px 10px;font-size:1.4rem;}
	.half02 ul li:nth-child(5){position:relative; bottom:0;left: 0;text-align:center;margin: 0 auto;}
	.half02 ul li:nth-child(5) span{;padding: 5px 10px;font-size: 1rem;text-align:center}
	.half02 ul li:nth-child(6) p,.half02 ul li:nth-child(6){display: none;}
	
	.half02 .scene { background-position: center; background-size: cover; width:95vw; height: auto;margin-bottom:20px; }
}




/* -- sidemanu for pc -- */
.side-menu2{
	position: fixed;
	width: 130px;
	top:15%;
	right:1%;
	padding:10px;
	border-radius:10px;
	border: 2px solid #fff;
	box-sizing: border-box;
	background:url("../images/bg_2.jpg")center;
	display: flex;
	flex-direction: column;
	transform: translateX(0);
	transition: .3s;
	text-align:center;
	z-index:99;
	font-size:15px;
	overflow:hidden;
	box-shadow: 4px 4px #fff;
}
.side-menu2 label{
	position: fixed;
	width: 130px;
	height: 150px;
	background:#3752a3;
	opacity:0.95; 
	color: #ffffff;
	right: -40px;
	top: 0%;
	line-height: 28px;
	text-align: center;
	font-size: 24px;
	border-radius: 0 10px 10px 0;
	padding:18px 8px 10px 8px;
	font-weight:500;
}
#side-menu-switch2{
	position: absolute;
	opacity: 0;
	z-index: -1;
}
#side-menu-switch2:checked + .side-menu{
	transform: translateX(0);
}
.side-menu2 nav a{
	display: block;
	padding: 10px 4px;
	color: #fff;
	text-decoration: none;
	position: relative;
	font-size:1.2rem;
	line-height: 1.2;
	text-shadow: 1px 1px #000;
	letter-spacing: 3px;
	font-family: 'Noto Sans TC', sans-serif; 
	font-weight: 500;
}
.side-menu2 nav p.name_menu{ padding:10px 0; font-size:1.5em; line-height:1em; border-bottom:3px solid; border-color:#04414b; color:#df6616; font-weight:bold;}
.side-menu2 nav ul.area1{ margin-bottom:150px;}
.side-menu2 nav ul.area1 li{ width:50%; float:left; border-bottom:1px dotted #000;}
.side-menu2 nav ul.area1 li:nth-child(even){ border-right:1px dotted #000;}
.side-menu2 nav ul.area2 li{ border-bottom:1px dotted #000;} /*選項字隔線色*/
.side-menu2 nav ul.area1 li:nth-last-child(1), nav ul.area1 li:nth-last-child(2), nav ul.area2 li:nth-last-child(1){ border-bottom:none;}
	@media screen and ( max-width: 991px ){
		.side-menu2 {display: none;}
	}


/*Plugin*/
.side-menu2 .nav {
	width: 110px;
    margin:0 auto;
    list-style: none;
}
.side-menu2 .nav-pills>li.active>a, .side-menu2 .nav-pills>li.active>a:focus, .side-menu2 .nav-pills>li.active>a:hover, .nav-pills>li>a:hover {
    color:  #ffc600 !important; 
    background: none;
}

.side-menu2 .nav-pills>li>a {
    border-radius: 0px;
}
.side-menu2 .nav>li>a {
    position: relative;
    display: block;
}


/*for mobile*/
menu{display:none;}
	@media screen and ( max-width: 991px ){
		menu{ display:block;}
	}
menu ul{
/*	position:fixed;*/
	top:0;
	left:0;
	margin:0;
	width:100%;
	display:flex;
	flex-wrap:wrap;
	list-style: none;
	background:#000;
	z-index:999;
	padding:2px 0;
	border-top:none;
}
menu ul li{
	border-right:.75px solid  #fff;
	padding:5px 0;
	width:16.65%;
	box-sizing:border-box;
	text-align:center;
	letter-spacing:1px;
}
menu ul li a{
	color: #fff;
	font-size:1rem;
	line-height:1.4rem;
}

menu ul li:nth-child(6) {border-right:none;}
menu ul li a:hover{
	color:  #ffc600;
}







 /*--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: #ccc;}          
 #gotop.show {opacity: 0.4;visibility: visible;}          
 @media screen and ( max-width: 991px ){          
 #gotop {bottom: 70px;right: 0;margin: 2vw;}
 }         
 /* share url */          
 #share{display: inline-block;background-color: #000;opacity:0.4;width: 40px;height: 40px;text-align: center;border-radius: 100%;position: fixed;bottom: 50px;right: 0px;transition: background-color .3s, opacity .5s, visibility .5s;z-index: 1000;margin: 30px;}
 #share::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/share.png) center no-repeat; background-size:20px;background-position:50% 30%;}
 #share:hover{cursor: pointer;background-color: #666;}
 #share:active{background-color: #666;}
 @media screen and ( max-width: 991px ){
 #share{bottom:115px;right: 0;margin: 2vw;}
 }                    
 @media screen and ( max-width: 991px ){          
 html{padding-bottom: 80px;}          
 }