@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_1920x1080.jpg") top center repeat-y fixed;}

h2{font-family: 'Yusei Magic', "微軟正黑體",'Microsoft JhengHei', Helvetica,Verdana, Arial, sans-serif;
letter-spacing: 5px;
font-size: 3.5rem;
color: #26466d;

}


/* 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; }
}


/*主視覺動畫*/
.pic1{ position: absolute;
	top:60px;left:20px;
	animation: pulse;
    animation-delay: 1s;
    animation-iteration-count: infinite;
    animation-fill-mode: backwards;}

.pic2{ position: absolute;
	top:270px;left:960px;
	animation: pulse;
    animation-delay: 1.5s;
    animation-iteration-count: infinite;
    animation-fill-mode: backwards;}

.bounce-in-bck {
    position: absolute;
	top:80px;left:275px;
	-webkit-animation: bounce-in-bck 1.1s both;
	        animation: bounce-in-bck 1.1s both;
}
/* ----------------------------------------------
 * Generated by Animista on 2022-6-21 10:45:12
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation bounce-in-bck
 * ----------------------------------------
 */
@-webkit-keyframes bounce-in-bck {
  0% {
    -webkit-transform: scale(7);
            transform: scale(7);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
    opacity: 0;
  }
  38% {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    opacity: 1;
  }
  55% {
    -webkit-transform: scale(1.5);
            transform: scale(1.5);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  72% {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  81% {
    -webkit-transform: scale(1.24);
            transform: scale(1.24);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  89% {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  95% {
    -webkit-transform: scale(1.04);
            transform: scale(1.04);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
}
@keyframes bounce-in-bck {
  0% {
    -webkit-transform: scale(7);
            transform: scale(7);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
    opacity: 0;
  }
  38% {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    opacity: 1;
  }
  55% {
    -webkit-transform: scale(1.5);
            transform: scale(1.5);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  72% {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  81% {
    -webkit-transform: scale(1.24);
            transform: scale(1.24);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  89% {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  95% {
    -webkit-transform: scale(1.04);
            transform: scale(1.04);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
}



/*全版面背景裝飾*/
.all_bg {background: url("../images/bg_deco.png") top center repeat-y;}

/*區塊調整*/
.block_00{margin-top: -65px;}
.block_1 {max-width: 1200px; background: rgb(254,193,174,.6); margin: 200px auto; border-radius: 15px; padding-bottom: 5px;}
.block_2 {max-width: 1200px; background: rgb(166,193,226,.6); margin: 200px auto; border-radius: 15px; padding-bottom: 5px;}
.block_4 {max-width: 1200px; background: rgb(253,230,124,.6); margin: 200px auto; border-radius: 15px; padding-bottom: 5px;}
.block_5 {max-width: 1200px; background: rgb(166,193,226,.6); margin: 200px auto; border-radius: 15px; padding-bottom: 5px;}
.block_6 {max-width: 1200px; background: rgb(254,193,174,.6); margin: 200px auto; border-radius: 15px; padding-bottom: 5px;}
.block_7 {max-width: 1200px; background: rgb(253,230,124,.6); margin: 200px auto; border-radius: 15px; padding-bottom: 5px;}
.block_8 {max-width: 1200px; background: rgb(166,193,226,.6); margin: 200px auto; border-radius: 15px; padding-bottom: 5px;}
.block_9 {max-width: 1200px; background: rgb(254,193,174,.6); margin: 200px auto; border-radius: 15px; padding-bottom: 5px;}
.block_11 {max-width: 1200px; background: rgb(253,230,124,.6); margin: 200px auto; border-radius: 15px; padding-bottom: 5px;}
.block_12 {max-width: 1200px; background: rgb(166,193,226,.6); margin: 200px auto; border-radius: 15px; padding-bottom: 5px;}
.block_13 {max-width: 1200px; background: rgb(254,193,174,.6); margin: 200px auto; border-radius: 15px; padding-bottom: 5px;}

/*標題背景調整*/
.block_2 .stt h3 {text-align: justify; margin-bottom: 20px; color: #7B4D09;}
.btt h2 {padding-top:30px; }
.block_1 .btt h2{background: url("../images/title_bg_01.png")center no-repeat; width: 100%;  height: 150px; margin-top: -150px; margin-bottom: 10px;}
.block_2 .btt h2{background: url("../images/title_bg_02.png")center no-repeat; width: 100%;  height: 150px; margin-top: -150px; margin-bottom: 10px;}
.block_3 .btt h2{background: url("../images/title_bg_05.png")center no-repeat; width: 100%;  height: 150px; margin-top: -130px; margin-bottom: -40px;}
.block_4 .btt h2{background: url("../images/title_bg_03.png")center no-repeat; width: 100%;  height: 150px; margin-top: -150px; margin-bottom: 10px;}
.block_5 .btt h2{background: url("../images/title_bg_01.png")center no-repeat; width: 100%;  height: 150px; margin-top: -150px; margin-bottom: 10px;}
.block_6 .btt h2{background: url("../images/title_bg_03.png")center no-repeat; width: 100%;  height: 150px; margin-top: -150px; margin-bottom: 10px;}
.block_7 .btt h2{background: url("../images/title_bg_05.png")center no-repeat; width: 100%;  height: 150px; margin-top: -150px; margin-bottom: 10px;}
.block_8 .btt h2{background: url("../images/title_bg_04.png")center no-repeat; width: 100%;  height: 150px; margin-top: -150px; margin-bottom: 10px;}
.block_9 .btt h2{background: url("../images/title_bg_02.png")center no-repeat; width: 100%;  height: 150px; margin-top: -150px; margin-bottom: 10px;}
.block_10 .btt h2{background: url("../images/title_bg_01.png")center no-repeat; width: 100%;  height: 150px; margin-top: -130px; margin-bottom: -40px;}
.block_11 .btt h2{background: url("../images/title_bg_05.png")center no-repeat; width: 100%;  height: 150px; margin-top: -150px; margin-bottom: 10px;}
.block_12 .btt h2{background: url("../images/title_bg_06.png")center no-repeat; width: 100%;  height: 150px; margin-top: -150px; margin-bottom: 10px;}
.block_13 .btt h2{background: url("../images/title_bg_02.png")center no-repeat; width: 100%;  height: 150px; margin-top: -150px; margin-bottom: 10px;}
.block_14 .btt h2{background: url("../images/title_bg_05.png")center no-repeat; width: 100%;  height: 150px; margin-top: -130px; margin-bottom: -40px;}


/*元件調整*/
.round_5p { margin: 20px auto 20px;}
.round_5p img{border-radius: 20px; border: 1px solid #ffffff;}
.round_5p.sp li{width: 260px; margin: 6px;}
.round_5p.sp img{width: 240px; height: 240px; object-fit: contain;}
.block_2 .half ul {background: #fde67c;}
.block_3 .alternate ul:nth-child(odd) li:first-child {background: #fec1ae;}
.block_3 .alternate ul:nth-child(even) li:last-child {background: #a6c1e2;}
.block_3 .alternate ul:nth-child(odd) li:first-child .font .price big {color: #a7212f;}
.block_3 .alternate ul:nth-child(even) li:last-child .font .price big {color: #a7212f;}
.block_3 .alternate ul:nth-child(odd) li:first-child .font {color: #323232;}
.block_3 .alternate ul:nth-child(odd) li:first-child .font .price {color: #323232;}
.block_3 .alternate ul:nth-child(even) li:last-child .font {color: #323232;}
.block_3 .alternate ul:nth-child(even) li:last-child .font .price {color: #323232;}
.block_10 .round_3p {margin: 20px auto 20px;}
.block_10 .round_3p img {border: 4px solid #a6c1e2;}

/*film-genre*/
.film-genre{ margin: 0px auto 10px auto; width: 1200px;}
.film-genre li { width: 230px; height: 230px; margin: 6px; border-radius:50%; background: #fff;}
.film-genre img{ width: 105%; height:auto; object-position:-10px 0px; }
.film-genre .font { width: 230px; height: 230px; display: flex; justify-content: center; align-items: center; left: 0; right: 0;}
.film-genre .font h4 { line-height:initial; font-weight: normal; padding:10px; letter-spacing: 4px;  }

/*promotion三塊*/
.top{width: 1200px;margin: 0 auto;}
.promotion { display: flex;}
.promotion:hover{transform: none;}
.promotion a:hover{
    transform: scale(0.95);
    transition: 0.5s;
}



/*m版*/
@media screen and ( max-width: 991px ){
	
/*區塊調整	*/
.block_00 {margin-top: -80px;}	
.block_1, .block_2, .block_3, .block_4, .block_5, .block_6, .block_7, .block_8, .block_9, .block_10, .block_11, .block_12, .block_13, .block_14 { margin-top: 110px; margin-bottom: 60px;}	
	
/*標題調整	*/
.btt h2 {padding-top: 80px;}
.block_1 .btt h2{background: none;}
.block_2 .btt h2{background: none;}
.block_3 .btt h2{background: none;}
.block_4 .btt h2{background: none;}
.block_5 .btt h2{background: none;}
.block_6 .btt h2{background: none;}
.block_7 .btt h2{background: none;}
.block_8 .btt h2{background: none;}
.block_9 .btt h2{background: none;}
.block_10 .btt h2{background: none;}
.block_11 .btt h2{background: none;}
.block_12 .btt h2{background: none;}
.block_13 .btt h2{background: none;}
.block_14 .btt h2{background: none;}
	
.round_5p{margin: 0vw auto;}
	.round_5p li:first-child{width:100%;}
	.round_5p li:first-child img{width: 92vw; height:92vw;}
	.round_5p li{width: 48%; overflow: hidden; margin: 1vw; padding: 0;}
	.round_5p img{width: 42vw; height: 42vw;}
	.round_5p .font{text-align:center; padding: 2vw 0;}
	.round_5p a{flex-wrap: wrap; }
	.round_5p li:nth-child(even) img{order: 0;}
	.round_5p li:nth-child(even) .font{text-align: center; }
	.round_5p.sp li:first-child{width: 48%; overflow: hidden; margin: 1vw; padding: 0;}
	.round_5p.sp :first-child img{width: 42vw; height: 42vw;}
	.round_5p.sp li{width: 48%; overflow: hidden; margin: 1vw; padding: 0;}
	.round_5p.sp img{width: 42vw; height: 42vw;}

/*film-genre*/
	.film-genre {width: 100%;}
    .film-genre li { width: 45vw; height: 45vw; margin: 1vw; }
	.film-genre .font { width: 45vw; height: 45vw;}
	.film-genre .font h4 { line-height:initial;}
	.film-genre img { width: 45vw; height: 45vw; /*object-position: 100% 100%;*/ }
	.film-genre li:hover .font { display: flex;  }
	
/*promotion三塊*/
    .top{width: 100%;}
	.top img{ width: 100% !important;}
    .promotion {display: flex;flex-direction: column;}
	li.promotion {width: 300px; margin: 0 auto;}
	.a1, .a2,.a3 {margin: 0px 0px;}	
		
}	




/*banner輪播*/
.block_10_2{background:rgb(166,193,226,.6); max-width: 1200px; margin: 0 auto; border-radius: 15px; }
.block_10_2 .banner{padding: 30px 0; background-image: url("../images/deco_pic.png");}
#g > div:nth-child(3) { padding-top: 65px;}

.b1 img, .b2 img, .b3 img{width: 250px;}

.bbg1, .bbg2, .bli {
    position: relative;width: 540px;
}

.b1, .b2, .b3{ 
    width: 300px;
    position: absolute;
    top:0;
    left: 285px;
    animation-name:anime; 
    animation-duration: 12s;
    animation-iteration-count:infinite;
    animation-timing-function:ease-in-out;
        object-fit: contain;
}

.b2{animation-delay: -4s;}
.b3{animation-delay: -8s;} 

@keyframes anime{
0%{ opacity: 0;left: 270px;} 
5%{  opacity: 1;left: 285px;}
28%{  opacity: 1;left: 285px;} 
33%{  opacity: 0;} 
66%{  opacity: 0;}  
100%{  opacity: 0;} 
}

.bbg2 .b1, .bbg2 .b2, .bbg2 .b3{
    width: 300px;
    position: absolute;
    top:0;
    left: 0;
    animation-name:anime2; 
    animation-duration: 9s;
    animation-iteration-count:infinite;
    animation-timing-function:ease-in-out;
}

.bbg2 .b2{animation-delay: -3s;}
.bbg2 .b3{animation-delay: -6s;}    
    
@keyframes anime2{
0%{ opacity: 0;left: -15px;} 
5%{  opacity: 1;left: 0}
28%{  opacity: 1;left: 0;} 
33%{  opacity: 0;} 
66%{  opacity: 0;}  
100%{  opacity: 0;} 
}

@media screen and ( max-width: 991px ){
li.bli {
    width: 250px;
    height: 260px;
}
}





/*rightmenu*/

.rightmenu{
    position: fixed;
    width: 150px;
    height: auto;
    background: rgb(68,68,68,.9);
    z-index: 11;
    color: #c4a65a;
    top: 15%;
    right: 0;
    line-height: 28px;
    text-align: center;
    border-radius: 10px 0 0 10px;
    padding: 10px 10px 10px 15px;
    font-weight: 500;
}

.rightmenu li {border-bottom: 1px #fde67c; border-style: dashed;}

.rightmenu p{
	padding: 10px 0;
    font-size: 26px;
    letter-spacing: 2px;
    color: #fde67c;
    font-family:'Noto Sans TC', "微軟正黑體","Microsoft JhengHei",Helvetica,Verdana, Arial, sans-serif;
}

.rightmenu a:hover {
	border-radius: 50px;
    color: #444444;
    font-family:'Noto Sans TC', "微軟正黑體","Microsoft JhengHei",Helvetica,Verdana, Arial, sans-serif;
}

.rightmenu a{
    font-size: 20px;
    line-height: 40px;
    letter-spacing: 1px;
    color: #fff;
    font-family:'Noto Sans TC', "微軟正黑體","Microsoft JhengHei",Helvetica,Verdana, Arial, sans-serif;
}


 nav > ul.area li a:hover{background:#fec1ae;}
 nav > ul.area li a{padding: 0 !important;}


body > nav.rightmenu > ul > li:nth-child(11){border:none;}
body > nav.rightmenu > ul > li:nth-child(16){border:none;}



@media screen and ( max-width: 991px ){

    /*rightmenu*/
    .rightmenu p{display: none;}

    .rightmenu {
        position: fixed;
        bottom: 0;
        top: auto;
        width: 100% ;
        padding: 5px ;
        border-radius: 0 ;
    }

    .rightmenu a{line-height: 20px; font-size: 1.1rem;}
    ul.area li{
        border-right: 1px dashed #fde67c;
		border-bottom: none;
		padding: 5px;
		margin: 5px 0;
    }
    ul.area {
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-evenly;
    }
body > nav.rightmenu > ul > li:nth-child(11){border-right: 1px dashed #fde67c;}
    
}





/*--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: 991px ){
	#gotop {bottom: 30vw;right: 0;margin: 2vw;	}
	}