@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@700&display=swap');
/* ---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_04.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_04.jpg') repeat-y center top/100%, 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-sub1{ position:absolute; top: 60px; left: 384px;}
.kv-sub2{ position:absolute; top: 291px; left: 384px;}

.kv-tit1{ position:absolute; top: 77px; left: 511px;}
.kv-tit2{ position:absolute; top: 264px; left: 501px;}
.kv-tit3{ position:absolute; top: 471px; left: 511px;}

.sp1{ position: absolute; top: 557px; right: 77px;}


/* 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:#343434; font-family: Verdana,'Noto Serif TC','Microsoft JhengHei',sans-serif;  }
h2 a { color:#333; }
.titleB { margin:20px auto 5px auto; width:1160px; background:url("../images/bg_theme.png") no-repeat center center; }
.titleB h2{ padding:0; letter-spacing: 5px; display:flex; align-items:center;}
.titleB h2:before, .titleB h2:after{ background-color:unset;}
.titleB big{ font-size:3.5rem; }

	
.alternate { margin: 20px auto; }
.alternate .font h4 { text-overflow: ellipsis;}

/* first-child */
.alternate ul:nth-child(odd) li:first-child { background:#fff;}
.alternate ul:nth-child(odd) li:first-child .font { color: var(--PV-font);}
.alternate ul:nth-child(odd) li:first-child .font h4 {  color:var(--PV-eslite);}
.alternate ul:nth-child(odd) li:first-child .font .price {  color: var(--PV-font); }
.alternate ul:nth-child(odd) li:first-child .font .price big {  color:var(--PV-eslite);}
/* last-child */
.alternate ul:nth-child(even) li:last-child { background:#fff;}
.alternate ul:nth-child(even) li:last-child .font { color: var(--PV-font);}
.alternate ul:nth-child(even) li:last-child .font h4 {  color:var(--PV-eslite);}
.alternate ul:nth-child(even) li:last-child .font .price {  color: var(--PV-font); }
.alternate ul:nth-child(even) li:last-child .font .price big {  color:var(--PV-eslite);}


/*circle*/
.circle{ position:relative;}
.circle li { border-radius: 0 0 30px 30px;}
.circle img{ border-radius: 30px;}
.circle .font .price{ color:var(--PV-font); margin: 15px 15px 25px; }

.items5 ul{ margin: 140px auto 40px;}
.items5 li { margin: 4px; width:220px; }
.items5 img{ width: 220px; height: 220px;}

/*hightlight*/
.hightlight { margin:0 auto 10px auto; position:relative;}
.hightlight img { object-fit: contain;}
.hightlight .font h4 { background:var(--PV-eslite); }

.half ul{ background:none; padding:0; width:570px;}
.half ul li { margin: 10px; border-radius:0; overflow:hidden;}
.half ul.scene { background:#fff;/*url("../images/bg_scene.png") no-repeat center top/cover;*/ }
	.scene_order { order:2;}
.scene{ margin:10px 0 10px 10px; overflow:hidden;}
.scene .font { background: none;}
.scene .font p{ text-align:justify; letter-spacing:-0.5px;}
.scene .font .price{ text-align:left;}


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

	@media screen and (max-width: 640px){
		h2 { font-size:2rem; padding:2vw 0; margin:2vw 0;}
		.titleB { margin: 0 auto; width:100%; background:url("../images/bg_theme.png") no-repeat center center/95%;}
		.titleB h2 { letter-spacing:1px; padding:0 3vw; display:block; }
		.titleB big{ font-size:2.285711rem;}
		h4{ font-size:1rem; padding:0.5vw; }
			

		.alternate { margin:0 auto 2vw;}
		.alternate ul:nth-child(odd) li:first-child, .alternate ul:nth-child(even) li:last-child{ border-radius:0;}
		.alternate ul:nth-child(odd){ align-items: stretch;}
		.alternate ul:nth-child(even){ align-items: stretch;}

		/*circle*/
		.circle{ margin:0 auto 2vw auto;}
		.circle li { border-radius: 30px;}
		.circle .font .price{ color:var(--PV-font); margin:0 0.5vw 2vw 0.5vw; margin: 0 2vw 2vw; padding: 2.5vw 6vw 2.5vw 1vw;}
		.circle .font p:first-of-type{ margin:auto;}

		.items5 ul{  margin: 0 auto;}
		.items5 li { padding: 2vw; margin: 1vw; width:46vw; }
		.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; text-align: center;}
		.items5 li:first-of-type .font .price{ padding: 2.5vw 2vw; text-align:center; }

		/*hightlight*/
		.hightlight{ padding:0; margin:0px auto; }
		.hightlight li{ margin:1vw; }

		.half ul{ width:100%; margin:0 auto; }
		.half ul.scene { padding:4vw 0; margin:2vw 3vw;}
			.scene_order { order:unset;}
		.half ul li { margin:1vw;}
		.scene .font h4{ margin: 2vw 0;}

		/*film-genre*/
		.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:initial; }
	}




 /* ----------------------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:8000px; max-width:100%; position:absolute; background:url("../images/bg_deco.png") repeat-y center top; background-size:1920px;}

.container1200{  }
.bg1{ padding:0; }
.bg2, .bg8{ padding:10px 0 1px 0; background: url('../images/mbg_01.jpg') repeat;}
.bg5, .bg9{ padding:10px 0 1px 0; background: url('../images/mbg_02.jpg') repeat;}
.bg8, .bg9{ margin-bottom:40px;}

.bg_brand{ background: url('../images/mbg_01.jpg') repeat; padding: 20px 0 1px 0;}

.bg_bnr{ margin:0 auto; padding:1px 0; background: url('../images/mbg_01.jpg') repeat;}
.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, .bg3, .bg4, .bg6, .bg7, .bg10{ padding:2vw 0 4vw 0;}
		.bg8, .bg9{ margin-bottom:0vw;}

		.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 ---------------------- */




/* hover effect */
.container li, .film-genre li img{
	-webkit-transition:transform .3s;
	        transition:transform .3s;
}
.container li:hover{
	-webkit-transform:translateY(-6px);
			transform:translateY(-6px);
}
.film-genre li:hover{
	-webkit-transform:translateY(0px);
			transform:translateY(0px);
}
.film-genre li:hover img{ 
	-webkit-transform: scale(1.1);
	transform: scale(1.1);
}
	@media screen and ( max-width: 640px ){
		.container li:active, .container li:focus, .container li:hover{
			-webkit-transform:translateY(0px);
					transform:translateY(0px);
		}
	}
	
	


/*--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:20%;
			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(5n+1){
			border-right:none;
		}
		menu ul li:nth-last-child(n+6){
			border-top:none;
		}
		menu a{
			color:#f9f0ee !important;
			text-decoration:none;
		
		}

	}




/* -- navigation for pc -- */
.side-menu-scrollspy{
	position: fixed;
	width: auto;
	top:10%;
	right:1%;
	padding:20px 8px;
	border-radius:40px;
	background:rgba(47, 43, 41,0.8);
	opacity:0.95; 
	display: flex;
	flex-direction: column;
	transform: translateX(0);
	transition: .3s;
	text-align:center;
	z-index:99;
	font-size:15px;
	overflow:hidden;
	/*border:1.5px solid #ffce31;*/
}
#scrollspy a{
	display: block;
	padding: 10px 6px;
	color: #fff;
	text-decoration: none;
	font-size:18px;	
	/*writing-mode: vertical-lr;*/
	letter-spacing: 1px;
}
#scrollspy a:hover {
    background: #326598;
	border-radius:10px;
}
#scrollspy p.menu-theme{ display:none; padding:10px 0; font-size:1.5em; line-height:1em; border-bottom:3px solid; border-color:#000; color:#264d95; }
#scrollspy ul li{ border-bottom:1px dotted #000; padding:4px 0;
	display: flex; justify-content: center;}
#scrollspy ul li:nth-last-child(1){ border-bottom:none;}
	@media screen and ( max-width: 640px ){
		.side-menu-scrollspy {display: none;}
	}
/*Plugin*/
.nav-pills {
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
}
.nav-pills>li.active>a, .nav-pills>li.active>a:focus, .nav-pills>li.active>a:hover {
    background-color: #326598;
	border-radius:10px;
}
.nav-pills>li>a {
    border-radius:1px;
}
.nav-pills>li>a {
    position: relative;
    display: block;
}