@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: #101028;
	animation:light2 10s linear infinite;
	
}

  @keyframes light2 {
	0% {filter: brightness(100%);}
	5% {filter: brightness(100%);}
	6% {filter: brightness(105%);}
	7% {filter: brightness(100%);}
	8% {filter: brightness(105%);}
	8.5% {filter: brightness(100%);}
	15% {filter: brightness(100%);}
	16% {filter: brightness(105%);}
	17% {filter: brightness(100%);}
	18% {filter: brightness(105%);}
	18.5% {filter: brightness(100%);}
	25% {filter: brightness(100%);}
	30% {filter: brightness(105%);}
	35% {filter: brightness(100%);}
	45% {filter: brightness(100%);}
	46% {filter: brightness(105%);}
	47% {filter: brightness(100%);}
	48% {filter: brightness(105%);}
	48.5% {filter: brightness(100%);}
	49.5% {filter: brightness(110%);}
	50% {filter: brightness(100%);}
	70% {filter: brightness(100%);}
	75% {filter: brightness(105%);}
	80% {filter: brightness(100%);}
	100% {filter: brightness(100%);}
  }



* {
  -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; 	}
.topbox { position: relative; width: 1200px; margin: auto;}
.title01{ top: 468px; left: 270px; position: absolute;}
.title02{ top: 418px; left: 353px; position: absolute;}
.title03{ top: 615px; left: 273px; position: absolute;}
.title04{ top: 721px; left: 331px; 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; }

}



/* bg */
.bg01 { background:#111128 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;}


/* 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: 500;}/* 區塊大標 */
h3{font-size: 2.2rem; text-align: center;font-weight: 500;}/* 區塊小標 */
h4{font-size: 1.2rem; text-align: center;font-weight: 500;}/* 特色標 */
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-eslite);display: block;}/* 價格 */
.font{color:var(--PV-font);}/* 文字顏色 */
.sm-pic{display: none;}
	@media screen and ( max-width: 640px ){
		html,body{font-size: 12px;}
	}


/* 2-6 various */
.various{ width: 1160px; margin:15px auto 0;  }
.various ul { display: flex; justify-content: center;flex-wrap: wrap;background: linear-gradient(180deg, #f6798e, #a587e3);  padding: 10px 0 20px;margin: 4px 12px;/*border-radius: 6px;border-radius: 600% 600% 10% 10% /200% 200% 10% 10%;*/}
.various h3{ width: 1160px;margin: 4px 8px;background: url(../images/h3bg.png) top center no-repeat;color: #fff;}
.various li { width: 260px; background: #fff; margin: 4px 8px; border-radius: 10px; padding: 10px 20px; position: relative;}
.various li a { display: flex;flex-wrap: wrap;}
.various .font {   }
.various .font h4 {  margin: 5px 0; position: absolute;padding: 2px 12px 2px 6px;background: var(--PV-eslite); border-top-right-radius: 30px; font-size: 0.9rem; top:245px;color: #fff;height: 25px;overflow: hidden;}
.various .font p {  }
.various .font .price { margin: 10px 0;color: #000;}
.various .font .price big {    }
.various img { width: 220px; height: 270px; object-fit: contain; }
	@media screen and ( max-width: 640px ){
		.various{width: 100%; margin: 2vw auto;}
		.various ul {flex-wrap: wrap; margin: 2vw; padding: 2vw 0;}
		.various h3{ width: 96vw;margin: 1vw 0;background-size: 160%;}
		.various li {width: 45vw; padding: 3vw; margin: 1vw; }
		.various a {  }
		.various .font {  margin: 1vw 0;}
		.various .font h4 {top:43vw; border-top-right-radius: 18px;padding: 0.5vw 1.5vw 0.5vw 0.8vw;height: 1.7rem;overflow: hidden;}
		.various .font p { margin: 3vw 0 0;}
		.various .font .price { margin: 1vw 0;}
		.various img { width: 39vw; height: 44vw;}

	}

/* 2-6 various */
.half{ display: flex; flex-wrap: wrap;justify-content: center;}
.half ul{width: 560px;flex-wrap: wrap; margin: 4px 8px;background: linear-gradient(180deg, #65b3dc, #ffa979); /* border-radius: 900% 900% 10% 10% /200% 200% 10% 10%;*/}
.half ul h3{ width: 560px;background: url(../images/h3bg2.png) top center no-repeat; }
.half ul li{  margin: 4px; }
	@media screen and ( max-width: 640px ){
		.half{ }
		.half ul{width: 100%; margin: 2vw; padding: 2vw 0;}
		.half ul h3{ width: 100%; background-size: 110%;}
		.half ul li{  margin: 1vw; width: 45vw; }
		.half img{ width: 39vw; }
	}


.branch{ width: 1160px; margin: 0 auto; margin: 40px auto ;}
.branch h3{ background: url(../images/h3bg.png) top center no-repeat; color: #fff; }
.branch ul{display: flex; flex-wrap: wrap;justify-content: center; margin: 40px auto;}
.branch li{ width:120px; height: 120px; margin: 2px;display: flex;background: #d3127d; border-radius: 200% 120%/150%;border: 6px double #ff0087;}
.branch li:nth-child(2n){ margin: -20px 6px; }
.branch li:nth-child(3n+1){ background: #1eafc9; border: 6px double #00ffff;}
.branch li:hover{ background: linear-gradient(180deg, #4501f1, #12e8cd); }
.branch li a{ color: #fff; text-align: center; font-size: 1.5rem; line-height: 1.8rem; margin: auto;}

	@media screen and ( max-width: 768px ){
		.branch{width: 96vw; margin: 2vw;}
		.branch ul { margin: auto; }
		.branch h3{background-size: 160%;}
		.branch li{ width: 20vw; height: 20vw; margin: 2vw;}
		.branch li a{ }
	}



/* 6-5 keyword 關鍵字 */
.keyword { width: 1200px; margin: auto; min-width:1200px;}
.keyword { margin: 60px auto; padding: 0px 50px; overflow: hidden; /*display: none;*/}
.keyword h3{ background: url(../images/h3bg.png) top center no-repeat; color: #fff; }
.keyword ul {display: flex; flex-wrap: wrap; justify-content: center;  }
.keyword ul li {  margin:30px 12px 5px; padding: 8px 20px; background-color: #d3127d; text-align: center; overflow: hidden; border: 2px solid #fff;box-shadow: 4px 3px #00ffff;}
.keyword ul li:active, .keyword ul li:hover { background-color: #ea8676;}
.keyword ul li a { color: #fff;font-weight: bold; font-size: 18px; }
.keyword ul li a span { color: #f3f68c;}

	@media screen and ( max-width: 768px ){
		.keyword { margin:auto; padding: 0;width: 100%;min-width: 100%; }
		.keyword h3 { background-size: 160%; }
		.keyword ul { overflow: hidden; margin: 3vw; }
		.keyword ul li { margin: 1vw; padding: 1vw 3vw;line-height: 1.2rem; box-shadow: 2px 2px #00ffff;border: 1px solid #fff;}
		.keyword ul li a { font-size: 0.95rem; line-height: 1rem}
	}

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