@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.jpg") top center repeat;
}
 	@media screen and ( max-width: 640px ){
		html{
			background-size: 30%;
		}
		
	}


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


/* 導覽頁籤 */
.sidenav { position: fixed; left: 0; top: 80px; z-index: 99; width: 90px; border-radius:50px 50px 10px 10px; overflow: hidden; background:#4ab0cd; margin: 10px;   }
.sidenav ul { overflow: hidden;  padding: 20px 0; }
.sidenav ul li {font-weight: 500; font-size: 18px; line-height: 22px; text-align: center; color:#ebf910; }
.sidenav ul li a { display: block; color: #fff; font-size: 15px; line-height: 40px;}
.sidenav hr { margin: 12px; padding: 0; }

.sidenav li { 
	-webkit-transition-duration:.3s;
	        transition-duration:.3s;
	-webkit-transition-property:transform;
	        transition-property:transform;
	-webkit-transition-timing-function:ease-out;
	        transition-timing-function:ease-out}
.sidenav li:hover a {  background-color:#000; }
.sidenav li:hover a { color:#f9ef4d ; }
 	@media screen and ( max-width: 640px ){
		.sidenav { display: none; }
		
	}


/* title */
.title01{ top: 46px; left: 227px; position: absolute;}
.title02{ top: 337px; left: 269px; position: absolute;}
.title03{ top: 448px; left: 247px; position: absolute;}
.title04{ top: 64px; left: 117px; position: absolute;}
.title05{ top: 150px; left: 396px; position: absolute;}
.title06{ top: 254px; left: 67px; position: absolute;}
.title07{ top: 294px; left: 65px; position: absolute;}
.title08{ top: 391px; left: 137px; position: absolute;animation: move1 6s 0s infinite;}
.phone{ top: -630px;left: 760px;position: relative;width: 1200px;margin: auto;}

.swiper-container { position: absolute;}
.phone-outer{ z-index: 2;position: absolute;}
.phone-inner { width: 245px; height: 466px; position: absolute; top: 17px; left: 93px;background: #fff;z-index: 1;}
@media screen and ( max-width: 640px ){	
	.phone{top: 0; left: 0; width: 100%;}
	.phone img {width: 100%;}		
	
	.phone-outer{ width: 53vw;left: 52vw;top: 8vw;}
	.phone-inner{ width: 28vw;left: 62vw;top: 10vw;height: 50vw; }
	.swiper-slide { width: 28vw !important; }
	
	
}







h2{ font-family: 'Noto Serif TC'; font-weight: bold;}

.titleB h2 {width: 1160px; letter-spacing: 2px; color: #48261b;background:url("../images/h2bg2.png") center center no-repeat;background-size: 100%;}
.titleB h2 span {color: #cf6360; font-size: 90%;}
.titleB h2:before, .titleB h2:after{ display: none;}
@media screen and ( max-width: 640px ){
	h2{font-size: 2rem;}
	.titleB h2 span{ display: block; margin: 1vw;}
}




/* bg */
.bg01 { background:url("../images/bg01.jpg") top center no-repeat; }
.bg02 { background:url("../images/bg02.jpg") top center repeat; }
.bg03 { background:url("../images/bg03.jpg") top center repeat;}

.bg03 .rectangle{ background: #fff;border: double 20px #e9dfac;}
	@media screen and ( max-width: 640px ){
		.bg01 {}
		.bg02 {}
		.bg03 .rectangle{ background: #fff;border: double 4vw #e9dfac;}
		.bg03 .rectangle li{  width: 43vw;}

	}





/* inner-title */
.inner-title{ width: 1160px; margin: auto; display: flex;}
.inner-title h2 {width: 130px;padding: 40px 50px; background:url("../images/h2bg.png") top center no-repeat;line-height: 3.2rem;color: #fff;}
.inner-title h2 span { color: #e8deab;}
.inner-title:nth-child(even) h2 { order: 2;}
@media screen and ( max-width: 640px ){
	.inner-title{ width: 100%; margin:4vw auto 0; display:block;}
	.inner-title h2 {width: 100%; padding: 2vw; background:none;background:url("../images/h2bg_m.png") top center no-repeat;background-size: 94%;}
	.inner-title h2 span { color: #e8deab;}
	.inner-title:nth-child(even) h2 { order: 1;}
	
}

/* nomoreboxes */
.nomoreboxes{width: 1160px; margin:20px auto 40px;  display: flex; flex-wrap: wrap;justify-content: center;}
.nomoreboxes .nomore { width: 1000px; display: flex; flex-wrap: wrap; justify-content: center;}
.nomoreboxes ul {width: 500px; display: flex; justify-content: center;flex-wrap: wrap;}
.nomoreboxes .row { width: 1000px;flex-wrap: nowrap;}
.nomoreboxes ul li {width: 500px; background: #fff; margin: 4px; padding: 10px; position: relative;}
.nomoreboxes li a { display: flex; }
.nomoreboxes .font {  margin: auto 10px;  padding: 10px;}
.nomoreboxes .font h4 {  text-align: left;margin: 5px 0;color: #cf6360;}
.nomoreboxes .font p { font-size: 1rem; }
.nomoreboxes .font .price { margin: 10px 0;text-align: left; }
.nomoreboxes .font .price big {    }
.nomoreboxes img { width: 240px; height: 240px; object-fit: contain; }

.nomoreboxes .scene  {padding: 20px;}
.nomoreboxes .scene a {flex-wrap: wrap;}
.nomoreboxes .scene img {width: 400px; height: 340px;object-fit: cover;margin: 0 0 0 50px;}
.nomoreboxes .scene .font{ margin: 0 0 0 50px;padding: 0;}
.nomoreboxes .scene .font h4 {writing-mode: vertical-lr;position: absolute; top: 13px; left: 15px; margin: 0;  background: none;font-family: 'Noto Serif TC'; font-weight: bold;font-size: 1.6rem;line-height: 2rem;}
	@media screen and ( max-width: 640px ){
		.nomoreboxes{width: 100%; margin: 2vw auto;}
		.nomoreboxes .nomore { width: 100%; display: flex; flex-wrap: wrap; justify-content: center;}
		.nomoreboxes ul {width: 100%; display: flex; justify-content: center;flex-wrap: wrap;}
		.nomoreboxes .row { width: 100%;flex-wrap: nowrap;}
		.nomoreboxes ul li {width: 46vw;  margin: 1vw; padding: 1vw; }
		.nomoreboxes li a {  flex-wrap: wrap;}
		.nomoreboxes .font {  margin: auto 1vw;  padding: 2vw;}
		.nomoreboxes .font h4 {  text-align: left;margin: 5px 0;font-size: 1.1rem;}
		.nomoreboxes .font p { font-size: 1rem; }
		.nomoreboxes .font .price { margin: 10px 0; }
		.nomoreboxes .font .price big {    }
		.nomoreboxes img { width: 43vw; height: 43vw; margin: auto; object-fit: contain; }

		.nomoreboxes .scene  {width: 94vw; padding: 4vw;}
		.nomoreboxes .scene a {flex-wrap: wrap;}
		.nomoreboxes .scene img {width: 80vw; height: 80vw;margin: auto;}
		.nomoreboxes .scene .font{ margin: auto 1vw;padding: 0;}
		.nomoreboxes .scene .font h4 {writing-mode: horizontal-tb;position: relative; top: 0; left: 0; margin: 0; } 
	}



.circle li{width: 245px;}
.circle img{width: 245px; height: 245px;border-radius: 50px;}
@media screen and ( max-width: 640px ){
	.circle li{width: 46vw;}
	.circle img{width: 43vw; height: 43vw;border-radius: 50px;}
	.circle .font h4 {font-size: 1.1rem;}
	

}

.rectangle .font h4{color: #cf6360;}



.alternate ul:nth-child(odd) li:first-child{border-radius: 0; background: #fff;}
.alternate ul:nth-child(odd) li:first-child img{border-radius: 0;object-fit: cover;}
.alternate ul:nth-child(odd) li:first-child .font h4{ color: var(--PV-eslite);}
.alternate ul:nth-child(odd) li:first-child .font{ color:var(--PV-font);}
.alternate ul:nth-child(odd) li:first-child .font .price big{color: var(--PV-eslite); }
.alternate ul:nth-child(odd) li:first-child .font .price{ color:var(--PV-font);}

.alternate ul:nth-child(even) li:last-child {border-radius: 0 ;background: #fff;}
.alternate ul:nth-child(even) li:last-child .font h4{ color: var(--PV-eslite);}
.alternate ul:nth-child(even) li:last-child .font{ color:var(--PV-font);}
.alternate ul:nth-child(even) li:last-child .font .price big{color: var(--PV-eslite); }
.alternate ul:nth-child(even) li:last-child .font .price{ color:var(--PV-font);}


.banner{ padding: 0;}
.banner img {width: 545px;}
	@media screen and ( max-width: 640px ){
		.banner img { width: 100%;}
	}




/* ribbonB */
.ribbonB {display: inline-block; position: absolute; top: -6px; left: 16px; margin: 0; padding: 10px 5px ; z-index: 2; width: 30px; color: white; font-size: 1rem; line-height: 1.2rem; background: linear-gradient(#f5544a 0%, #ff81a8 100%);border-radius: 2px 0 0 0;text-align: center;}
.ribbonB:after {content: '';position: absolute;left: 0;top: 100%;height: 0;width: 0;border-left: 15px solid #ff81a8;border-right: 15px solid #ff81a8;border-bottom: 10px solid transparent;}
	@media screen and ( max-width: 640px ){
		.ribbonB { left: 1vw;width: 6vw;}
		.ribbonB:after {border-left: 3vw solid #ff81a8; border-right: 3vw solid #ff81a8;border-bottom: 10px solid transparent;}
	}










/*--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: 2vw;right: 0;margin: 2vw;	}
	}