@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") repeat;*/
	scroll-behavior: smooth;
}
body{ position: relative;}
	@media screen and ( max-width: 640px ){
		body{ padding-bottom:13vw; background: #c9bcdc;}
	}

/* Public Version 公版顏色設定 */
:root {
	--PV-eslite: #faff67; /* 誠品線上標準色 */
	--PV-font: #fff;
}

/* 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 !important; margin:0 auto; }
.topbox { position: relative; width: 1200px; margin:0 auto;}
.kv_pc { height:645px; background:url("../images/kv.png") no-repeat center top; 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-sp{ position:absolute; top: 544px; left: 250px;}
.kv-title{ position:absolute; top: 99px; left: 153px;}

.card-container {
  -webkit-perspective: 700;
  -moz-perspective: 700;
  perspective: 700;
  width: 154px;
  height: 218px;
  transition: all 0.6s ease;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  position: relative;
}
.front , .back {
  position: absolute;
  top:0; left:0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.back {
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  transform: rotateY(180deg);
}

.card1 { position:absolute; top:72px; left:621px; animation:flipCard 3s ease-in-out 0s infinite alternate-reverse; }
.card2 { position:absolute; top:72px; left:787px; animation:flipCard 3s ease-in-out 1s infinite alternate; }
.card3 { position:absolute; top:72px; left:954px; animation:flipCard 3s ease-in-out 0s infinite alternate-reverse; }
.card4 { position:absolute; top:320px; left:621px; animation:flipCard 3s ease-in-out 1.5s infinite alternate; }
.card5 { position:absolute; top:320px; left:787px; animation:flipCard 3s ease-in-out 0s infinite alternate-reverse; }
.card6 { position:absolute; top:320px; left:954px; animation:flipCard 3s ease-in-out 1s infinite alternate; }
	@keyframes flipCard {
		0% { transform: rotateY(0deg);}
		33% { transform: rotateY(0deg);}
		66% { transform: rotateY(180deg);}
		100% { transform: rotateY(180deg);}
	}


/* 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:#2317c1; margin:0 auto; font-weight:bold; background:url("../images/bg_theme.png") no-repeat center center; }
h2 p{ color:#66675d; padding:2px 0;}
h2 big { color:#fc7fad;}

/* alternate */
.alternate .font h4{ display: none;}
.alternate ul:nth-child(odd) li:first-child .font h4, .alternate ul:nth-child(even) li:last-child .font h4{ display: block;}
.alternate { margin: 20px auto 10px auto;}
.alternate .font { margin: 15px auto; }
.alternate ul:nth-child(even) { margin: -82px auto 10px auto;}
.alternate li { height: 370px; background:#2E2E2F url("../images/bg_li.png") repeat; border-radius:15px; }
/* first-child */
.alternate ul:nth-child(odd) li:first-child { background:#2E2E2F url("../images/bg_li.png") repeat;height: 280px; border-radius:15px;}
.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); }
.alternate ul:nth-child(odd) li:first-child img { border-radius: 0px 0 0; }
/* last-child */
.alternate ul:nth-child(even) li:last-child { background:#2E2E2F url("../images/bg_li.png") repeat; border-radius:15px;  }
.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{ margin: 0px auto 40px auto;}
.circle li { background:#2E2E2F; border-radius: 15px; position:relative; }
.circle img{ border-radius:20px 20px 0 0; border:solid 10px #2E2E2F; background:#2E2E2F;}
.circle .font .price{ color:var(--PV-font); }
.circle .font .price:after { color: #000;}


	@media screen and (max-width: 640px){
		h2 { font-size:2rem; padding:2vw 0; position:initial; margin:0 auto; background:url("../images/bg_themeS.png") no-repeat center center/100%;}
		h2 p{ font-size:1rem; line-height:1.2rem; }
		h3 { font-size:1.714285rem; background-size:165%; }
		h3 p { font-size: 1.42857rem;}
		.half h2 { margin:2vw;}
		.hightlight_3p .font h4{ color:#0072b9; background:none;}
		.titleB h2 { width:100%; background:url("../images/m/mbg_theme.png") no-repeat center center/98%; letter-spacing:1px; padding:0 0 3vw 0; margin:6vw 0 0 0;}
		.titleC h2{ background: none; margin: 0 auto;}
		.bg1 .titleB h2 { width:100%; background:url("../images/m/mbg_theme.png") no-repeat center center/80%; margin:6vw 0 0 0; padding: 0 0 3vw 0;}
		
		/* alternate */
		.alternate { margin:0px auto;}
		.alternate .font { margin:auto; }
		.alternate li { height: auto;}
		/* first-child */
		.alternate ul:nth-child(odd) li:first-child { width: 94vw; height: auto; }
		.alternate ul:nth-child(odd) li:first-child a { }
		.alternate ul:nth-child(odd) li:first-child .font { margin: auto 0 auto 4vw;padding: 0;}
		.alternate ul:nth-child(odd) li:first-child .font h4 {  font-size: 1.2rem;line-height: 1.4rem; padding: 0;}
		.alternate ul:nth-child(odd) li:first-child .font .price { margin: 2vw auto;  }
		.alternate ul:nth-child(odd) li:first-child .font .price big {  }
		.alternate ul:nth-child(odd) li:first-child img { width: 46vw; height: 46vw; }
		/* last-child */
		.alternate ul:nth-child(even) {margin: auto ; align-items: flex-end;}
		.alternate ul:nth-child(even) li:last-child { width: 94vw; height: auto;  }
		.alternate ul:nth-child(even) li:last-child a {  }
		.alternate ul:nth-child(even) li:last-child .font {  margin: auto 0 auto 4vw;padding: 0; }
		.alternate ul:nth-child(even) li:last-child .font h4 {   font-size: 1.2rem;line-height: 1.4rem; padding: 0;}
		.alternate ul:nth-child(even) li:last-child .font .price {  margin: 2vw auto;   }
		.alternate ul:nth-child(even) li:last-child .font .price big {  }
		.alternate ul:nth-child(even) li:last-child img { width: 46vw; height: 46vw; }

		/* circle */
		.circle img{ border-radius:10px 10px 0 0; border:solid 4px #2E2E2F;}
	}




 /* ----------------------BACKGROUND---------------------- */
 .container1200 { max-width:1160px; margin:10px auto; padding:10px 0; position:relative; }
 .container1920 { max-width:1920px; margin:10px auto; padding:5px 0; position:relative; }
	  @media screen and ( max-width: 640px ){
		 .container1200, .container1920{ max-width:100vw; min-width:320px; padding:2vw 0; text-align:center; }
	 }

.content{ padding:0;}
.bg_img{ width:1920px; height:7900px; max-width:100%; position:absolute; background:url("../images/bg_deco.png") repeat-y center top; background-size:1920px;}
.bg_deco{ text-align:center; padding:0; background:#e3f8fc; }

.bg_area1{ padding-bottom:20px; background:url("../images/bg_curveG.png") no-repeat center bottom; }
.bg_area2{ padding-bottom:20px; background:#e2ffd8 url("../images/bg_curveY.png") no-repeat center bottom; }
.bg_area3{ padding-bottom:20px; background:#fffecb url("../images/bg_curveB.png") no-repeat center bottom; }
.bg_area4{ padding-bottom:20px; background:url("../images/bg_curveG.png") no-repeat center bottom; }
.bg_area5{ padding-bottom:20px; background:#e2ffd8 url("../images/bg_curveY.png") no-repeat center bottom; }
.bg_area6{ padding-bottom:20px; background:#fffecb url("../images/bg_curveP.png") no-repeat center bottom; }

.bg_bnr{ margin:0 auto; background:#bfc7dc; }
	.banner { padding: 0px; position: relative;}
	.banner li { margin:8px; }
	.bg_bnr .banner { margin: 20px auto; padding:0 20px; }
	@media screen and (max-width: 640px){
		header div{ margin:2.5vw 10px 0px 0px !important;}

		.content{ border-radius:0px; padding:0; margin:0 auto; }
		.bg_img{ display: none;}

		.bg_area1{ padding-bottom:0.5vw; background:url("../images/bg_curveG.png") no-repeat center bottom/100%; }
		.bg_area2{ padding-bottom:1vw; background:#e2ffd8 url("../images/bg_curveY.png") no-repeat center bottom/100%; }
		.bg_area3{ padding-bottom:1vw; background:#fffecb url("../images/bg_curveB.png") no-repeat center bottom/100%; }
		.bg_area4{ padding-bottom:1vw; background:url("../images/bg_curveG.png") no-repeat center bottom/100%; }
		.bg_area5{ padding-bottom:10vw; background:#e2ffd8 url("../images/bg_curveY.png") no-repeat center bottom/100%; }
		.bg_area6{ padding-bottom:10vw; background:#fffecb url("../images/bg_curveP.png") no-repeat center bottom/100%; }

		.bg_bnr{ margin:0 auto;  }
		.banner li { margin:1.5vw 2vw }
			.bg_bnr .banner { margin: 0 auto; padding: 1vw; }
			.banner img { width:96%; margin: 0 auto;}
	}
	@media screen and (max-width: 320px){
		header img{ width:62%;}
	}




 /* ---------------------- OTHERS ---------------------- */


/* hover effect */
li:hover { transform: scale(1);}
.container li, .more {
	-webkit-transition-duration:.3s;
	        transition-duration:.3s;
	-webkit-transition-property:transform;
	        transition-property:transform;}
.container li:active, .container li:focus, .container li:hover,
.more:active, .more:focus, .more:hover{
	-webkit-transition-timing-function:ease-out;
			transition-timing-function:ease-out;
	-webkit-transform:translateY(-6px);
			transform:translateY(-6px);}
.nav li:active, .nav li:focus, .nav li:hover, 
menu li:active, menu li:focus, menu li:hover{
		    transform:none !important;}
	@media screen and ( max-width: 640px ){
		.container li:active, .container li:focus, .container li:hover,
		.more:active, .more:focus, .more: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: 30px;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 /*2vw*/;right: 0;margin: 2vw;	}
	}


/* -- sidemanu for pc -- */
.side-menu{
	position: fixed;
	width: 45px;
	top:10%;
	left:1%;
	padding:10px;
	border-radius:20px;
	box-sizing: border-box;
	background:#fff;
	opacity:0.95; 
	display: flex;
	flex-direction: column;
	transform: translateX(0);
	transition: .3s;
	text-align:center;
	z-index:99;
	font-size:15px;
	overflow:hidden;
}
.side-menu label{
	position: fixed;
	width: 40px;
	height: 150px;
	background:#3752a3;
	opacity:0.95; 
	color: #f6f5e5;
	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-switch{
	position: absolute;
	opacity: 0;
	z-index: -1;
}
#side-menu-switch:checked + .side-menu{
	transform: translateX(0);
}
nav a{
	display: block;
	padding: 10px 6px;
	color: #000000;
	text-decoration: none;
	position: relative;
	font-size:14px;	
	font-weight: 600;
	writing-mode: vertical-lr;
	letter-spacing: 1px;
}
nav p.name_menu{ padding:10px 0; font-size:1.5em; line-height:1em; border-bottom:3px solid; border-color:#000; color:#3752a3; font-weight:bold;}
nav ul.area1{ margin-bottom:150px;}
nav ul.area1 li{ width:50%; float:left; border-bottom:1px dotted #2a438d;}
nav ul.area1 li:nth-child(even){ border-right:1px dotted #2a438d;}
nav ul.area2 li{ border-bottom:1px dotted #2a438d;}
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: 640px ){
		.side-menu {display: none;}
	}



/*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: linear-gradient(145deg, #b0b6f8 0%, #84c4e8 50%, #f28fda 100%);
	z-index:1000;
	padding:2px 0;
	border-top:none;
}
menu ul li{
	border-right:1px solid #fff;
	border-bottom:1px solid #fff;
	padding:5px 0;
	width:33.33%;
	box-sizing:border-box;
	text-align:center;
	letter-spacing:2px;
	color:#fff;
	font-weight: 600;
}
menu ul li a{
	font-size:14px;
	line-height:12px;
}
menu ul li:nth-last-child(4), menu ul li:nth-last-child(1){
	border-right:none;
}
menu ul li:nth-last-child(3), menu ul li:nth-last-child(2), menu ul li:nth-last-child(1){
	border-bottom:none;
}

menu a{
	color:#fff !important;
	text-decoration:none;

}


/*Plugin*/
.nav {
    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 {
    color: #fff;
    background-color: #337ab7;
}

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