@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;
	font-size: 100%;
	font: inherit;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}

/* ---reset.css--- */
html, body{	
	font-family:'Noto Serif TC', "微軟正黑體","Microsoft JhengHei",Helvetica,Verdana, Arial, sans-serif;
	-webkit-text-size-adjust:none;
}

html{
	
}
body{ 
	background:url("../images/bg.jpg") top center repeat;
/*	background: #e9bf64;*/
	
}

* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
	      line-height:1;
}

:focus { outline: 0; }

li{ list-style:none;} 
a { text-decoration:none;}






/* 滑鼠動態效果 */
.container li , .fukuda a {  
	-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}
.container li:hover,.fukuda a:hover{
	-webkit-transform: scale(0.98);;
		    transform: scale(0.98);}



/* PC */
.WRAPPER{ position:relative; width:100%; min-width:1200px; margin:0 auto; overflow:hidden;}
 	@media screen and ( max-width: 768px ){
		.WRAPPER{ min-width:100%;}
		
	}
.container { overflow: hidden; width: 1200px; margin: auto; }
.topbox { position: relative; width: 1200px; margin: auto;}
.title01{ top: 486px; left: 208px; position: absolute;}
.title02{ top: 692px; left: 437px; position: absolute;}
.title03{ top: 571px; left: 727px; position: absolute;}
.title04{ top: 715px; left: 189px; position: absolute;}
.title05{ top: 587px; left: 446px; position: absolute;}
.title06{ top: 680px; left: 330px; position: absolute;}
.title07{ top: 660px; left: 290px; position: absolute;}


.kv_pc {width: 100%;  position: relative; text-align:center; background:url("../images/kv.jpg") top center no-repeat;}
.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: 768px ){
	.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; }

}





/* Public Version 公版顏色設定 */
:root {
	--PV-font: #323232; /* 文字色-灰 */
	--PV-main: #96300f; /* 公版主色-橘紅 */
	--PV-price: #a62d33; /* 價格顏色-紅 */
	--PV-eslite: #a7212f; /* 誠品線上標準色 */
}

/* 文字樣式設定 */
html,body{font-family: Verdana,'Noto Sans TC','Microsoft JhengHei',sans-serif; font-size: 16px;}
h2{font-size: 3rem; text-align: center;font-weight: bold; color: #fff;width: 620px;margin: 80px 0 -70px; transform-origin: left;transform: skewY(-7deg);}/* 區塊大標 */
.even {transform: skewY(6deg);margin: 0px 570px 20px;}/* 區塊大標 */
h3{font-size: 2.2rem; text-align: center;font-weight: 500;}/* 區塊小標 */
h4{font-size: 1.2rem; text-align: center;font-weight: 500;line-height: 1.4rem;}/* 特色標 */
p{font-size: 1rem; font-weight: 300;}/* 內文 */
small{font-size: 60%;}
big{font-size: 140%;color:var(--PV-eslite);font-weight: bold;}
.price{font-size: 0.9rem;font-weight: 500;color:var(--PV-font);display: block;}/* 價格 */
.font{color:var(--PV-font);}/* 文字顏色 */
.sm-pic{display: none;}

h2{position: relative;}
h2 big{color: #ffebc3;}
h2:before, h2:after {  content: '';
  position: absolute;
  top: 50%;
  display: inline-block;
  width: 44px;
  height: 2px;
  background-color: white;
  -webkit-transform: rotate(-60deg);
  transform: rotate(-60deg);}
h2:before {left:60px;}
h2:after {right: 60px;}		



	@media screen and ( max-width: 640px ){
		html,body{font-size: 14px;}
		h2{font-size: 2.2rem;width: 100%;margin: 10vw 0 -10vw;}
		.even{ width: 100%;margin: 4vw 0;}
		h2:before {left:6vw;}
		h2:after {right: 6vw;}		

	}

/* 2-6 various half */
.half{ display: flex; flex-wrap: wrap;justify-content: center;}
.half ul{width: 560px;flex-wrap: wrap; margin: 4px 8px;padding: 10px;}
.half ul h3{ width: 560px; }
.half ul li{  margin: 4px; }
	@media screen and ( max-width: 640px ){
		.half{ }
		.half ul{width: 100%; margin: 2vw; padding: 0;}
		.half ul h3{ width: 100%; }
		.half ul li{  margin: 1vw; width: 45vw; }
		.half img{ width: 39vw; }
	}

/* 2-7 rectangle */
.rectangle{ width: 1160px; margin:0px auto 0px; }
.rectangle ul { display: flex; justify-content: center;flex-wrap: wrap;border-radius: 10px;padding: 20px 0;}
.rectangle h3{ width: 1160px;margin: 4px 8px;}
.rectangle li { width: 260px; background: #fff; margin: 4px 8px;  padding: 10px; text-align: center; }
.rectangle li a { display: flex;flex-wrap: wrap; justify-content: center;}
.rectangle .font {  margin: auto; }
.rectangle .font h4 {  margin: 5px 0;}
.rectangle .font p {  }
.rectangle .font .price { margin: 10px 0; }
.rectangle .font .price big {    }
.rectangle img { width: 240px; height: 240px; object-fit: contain; }


.rectangle .grid01 ,.rectangle .grid03  { padding: 85px 0 60px 20px ; transform-origin:left;transform:skewY(-7deg);}
.rectangle .grid01 li ,.rectangle .grid03 li { background:none; width: 230px; margin: 0px -30px; height: 165px; }
.rectangle .grid01 li p, .rectangle .grid03 li p { line-height: 165px;font-size: 1.8rem; font-weight: bold; color: #033986;white-space: nowrap;}


.rectangle .grid02 ,.rectangle .grid04   { padding: 0px 20px 60px 0px ; transform-origin:left;transform:skewY(7deg);}
.rectangle .grid02 li ,.rectangle .grid04 li { background:none; width: 230px; margin: 0px -30px; height: 165px;}
.rectangle .grid02 li p ,.rectangle .grid04 li p { line-height: 155px;font-size: 1.8rem; font-weight: bold; color: #033986;white-space: nowrap;}

.bg01 {  background: url(../images/grid01.png) 32px 20px no-repeat;}
.bg02 {  background: url(../images/grid02.png) 609px 2px no-repeat;}
.bg03 {  background: url(../images/grid03.png) 32px 20px no-repeat;}
.bg04 {  background: url(../images/grid04.png) 609px 2px no-repeat;}
.rectangle .grid02 li{ filter: hue-rotate( 146deg );}
.rectangle .grid03 li{ filter: hue-rotate( 87deg );}
.rectangle .grid04 li{ filter: hue-rotate( 325deg );}
.rectangle .grid01 li:nth-child(2n) p{ background: url(../images/memo.png) center no-repeat; color: #fff;filter: hue-rotate(300deg);}
.rectangle .grid02 li:nth-child(5n-2) p{ background: url(../images/memo2.png) center no-repeat; color: #fff;}
.rectangle .grid03 li:nth-child(5n+1) p{ background: url(../images/memo.png) center no-repeat; color: #fff;}
.rectangle .grid04 li:nth-child(4n-4) p{ background: url(../images/memo2.png) center no-repeat; color: #fff;}
	@media screen and ( max-width: 640px ){
		.rectangle{width: 100%; margin: 2vw auto;}
		.rectangle ul {flex-wrap: wrap;}
		.rectangle h3{ width: 96vw;margin: 1vw;}
		.rectangle li {width: 46vw; padding: 3vw; margin: 1vw; }
		.rectangle a {  }
		.rectangle .font {padding: 1vw; }
		.rectangle .font h4 { }
		.rectangle .font p { }
		.rectangle .font .price { margin: 1vw;}
		.rectangle img { width: 40vw; height: 40vw;}
		
		.grid01, .grid02, .grid03, .grid04 {width: 90vw !important; }
		.rectangle .grid01 ,.rectangle .grid03  { padding: 0 ;transform:skewY(-7deg); margin: 30px 3px 15vw;}
		.rectangle .grid01 li ,.rectangle .grid03 li { background:none; width: 30vw; margin: 0; height: 30vw; }
		.rectangle .grid01 li p, .rectangle .grid03 li p { line-height: 30vw;font-size: 1.8rem; font-weight: bold; color: #033986;}

		.rectangle .grid02 ,.rectangle .grid04   { padding: 0 ;transform:skewY(7deg); margin: -20px -8px 28vw; }
		.rectangle .grid02 li ,.rectangle .grid04 li { background:none; width: 30vw; margin: 0; height: 30vw;}
		.rectangle .grid02 li p ,.rectangle .grid04 li p { line-height: 30vw;font-size: 1.8rem; font-weight: bold; color: #033986;}

		.bg01 {  background: url(../images/grid01.png) top center no-repeat;  background-size: 90%;}
		.bg02 {  background: url(../images/grid02.png) top center no-repeat; background-size: 90%;}
		.bg03 {  background: url(../images/grid03.png) top center no-repeat; background-size: 90%;}
		.bg04 {  background: url(../images/grid04.png) top center no-repeat; background-size: 90%;}
		.bg02 ul:first-child ,.bg04 ul:first-child {  order: 2; }
		.bg02 .keyword ,.bg04 .keyword {  order: 3; }
		.rectangle .grid01 li:nth-child(2n) p{ background-size: 170%;}
		.rectangle .grid02 li:nth-child(5n-2) p{ background-size: 170%;}
		.rectangle .grid03 li:nth-child(5n+1) p{ background-size: 170%;}
		.rectangle .grid04 li:nth-child(4n-4) p{ background-size: 170%;}


	}







/* 6-5 keyword 關鍵字 */
.keyword { width: 1200px; margin: auto; min-width:1200px;}
.keyword { margin: 20px auto; padding: 0px 24px; overflow: hidden; /*display: none;*/}
.keyword ul {width: auto; display: flex; flex-wrap: wrap; justify-content: flex-end;  }
.keyword ul li { width: auto; background: none; margin:6px; padding: 10px 60px;  text-align: center; overflow: hidden; border: solid 2px #fff;}
.keyword ul li:active, .keyword ul li:hover { background-color: #67b6a1;}
.keyword ul li a { color: #fff;font-weight: bold; font-size: 1.4rem; }
.keyword ul li a span { color: #f3f68c;}

	@media screen and ( max-width: 768px ){
		.keyword { margin:auto; padding: 0;width: 100%;min-width: 100%; }
		.keyword ul { overflow: hidden; margin: 0 3vw 5vw; padding: 0; }
		.keyword ul li { margin: 1vw; padding: 1vw 3vw;line-height: 1.2rem; }
		.keyword ul li a { font-size: 1.2rem; line-height: 1.6rem}
	}

/* AD */
.banner { width: 1200px; margin:auto  ; padding: 0;   }
.banner ul { display: flex; flex-wrap: wrap; justify-content: center;}
.banner ul li {  margin: 4px 8px;}
.banner ul li img {width: 560px; }
@media screen and ( max-width: 640px ){	
/* AD */
.banner { margin: 0; padding: 2%; overflow: hidden;background:none; padding-bottom:0px; width: 100%; min-width: 100%;}
.banner ul li {overflow: hidden; float: none; }
.banner ul li {width: 96%; margin: 2%; }
.banner ul li img {width: 100%; }	
}

/*--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;
}
@media screen and ( max-width: 768px ){
#gotop {
  bottom: 2vw;
  right: 0;
  margin: 2vw;	
	}
  	
}

#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;
}