@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','Verdana','Century Gothic',"微軟正黑體","Microsoft JhengHei",Helvetica,Verdana, Arial, sans-serif;
	-webkit-text-size-adjust:none;
}

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

* {
  -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 { 
	-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:active, .container li:focus, .container li:hover{
	-webkit-transform:scale(0.98);
		    transform:scale(0.98);}

/*sidemanu for mobile*/
.sidenav, .icon_sidenav { display: none;}
@media screen and ( max-width: 768px ){
	.icon_sidenav{ 
		display: inherit; 
		position: fixed;
		z-index: 999;
		bottom: 10%;
		right: 0px;
		max-width: 15%;
		padding: 2%;
		background:#d09613;
		color:#ffffff;
		border-radius: 8px 0 0 8px;
		line-height:1.1em;
		font-size:1.2em;
	}
	.icon_sidenav img{
		max-width: 100%;
		padding: 15% 18%;
		border-top-left-radius: 10px;
		border-bottom-left-radius: 10px;
		background:rgba(0, 0, 0, 1);
	}
	.sidenav {
		display: inherit;
		height: 50%;
		width: 0;
		position: fixed;
		z-index: 9999;
		bottom: 0;
		right: 0;
		background-color:rgba(0,0,0,0.9);
		overflow-x: hidden;
		transition: 0.3s;
		padding-top: 60px;
		border-radius: 10px 0 0 0;
	  }
	  .sidenav span {
		padding: 2vw 2vw 2vw 5vw;
		font-size: 1.4rem;
		color: #dcb059;
		font-weight: bold;
	  }
	  .sidenav a {
		padding: 2vw 2vw 2vw 5vw;
		text-decoration: none;
		font-size: 1rem;
		color: #f7f1d4;
		display: block;
		transition: 0.3s;
		margin: 1% 0;
		font-weight: bold;
	  }
	  
	  .sidenav a:hover {
		color: #fffcd4;
	  }
	  
	  .sidenav .closebtn {
		position: absolute;
		top: 0;
		right: 1vw;
		font-size: 36px;
		margin-left: 50px;
	  }
	  
	  @media screen and (max-height: 450px) {
		.sidenav {padding-top: 15px;}
		.sidenav a {font-size: 18px;}
	  }
}


/* 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; position: relative; }
.topbox { position: relative; width: 1200px; margin: auto;}
.title01{ top: 83px; left: 353px; position: absolute; z-index: 5;}
.title02{ top: 378px; left: 385px; position: absolute; z-index: 5;}
.title03{ top: 53px; left: 485px; position: absolute; z-index: 5;}
.huggers01{ top: 64px; left: 38px; position: absolute; z-index: 5;}
.huggers02{ top: 500px; left: 474px; position: absolute; z-index: 5;}
.huggers03{ top: 488px; left: 1134px; position: absolute; z-index: 5;}
.huggers04{ top: 290px; left: 850px; position: absolute; z-index: 5;}
.huggers05{ top: 338px; left: -220px; position: absolute; z-index: 5;}


.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; }
.hide {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:url("../images/bg01.jpg") top center no-repeat; background-color: #6d8da6;}
.bg01-2 { background:url("../images/bg01-2.jpg") top center no-repeat; background-color: #1a999d;}
.bg01-3 { background:url("../images/bg01-3.jpg") top center no-repeat; background-color: #edb671;}
.bg02 { background-image:url("../images/bg02.jpg"),url("../images/bg02.png");
		background-repeat:no-repeat,repeat;
	 	background-position: top center,top center;
		background-color: #f8eddb;
		margin-top:-140px; padding: 200px 0 0;
		}
.bg02-2 { background-image:url("../images/bg02-2.jpg"),url("../images/bg02.png");
		background-repeat:no-repeat,repeat;
	 	background-position: top center,top center;
		background-color: #f8eddb;
		margin-top:-140px; padding: 200px 0 0;
		}
.bg02-3 { background-image:url("../images/bg02-3.jpg"),url("../images/bg02.png");
		background-repeat:no-repeat,repeat;
	 	background-position: top center,top center;
		background-color: #f8eddb;
		margin-top:-180px; padding: 200px 0 0;
		}
.bg03 { background-image:url("../images/bg03.jpg"),url("../images/bg02.png");
		background-repeat:no-repeat,repeat;
	 	background-position: top center,top center;
		background-color: #f8eddb;
		}
@media screen and ( max-width: 768px ){
.bg01 { background:none; background-color: #6d8da6;}	
.bg01-2 { background:none; background-color: #6d8da6;}	
.bg01-3 { background:none; background-color: #6d8da6;}	
.bg02 { background-image:none;
		margin-top:0; padding: 0; background-color: #f8eddb;
		}
.bg02-2 { background-image:none;
		margin-top:-6vw; padding: 0; background-color: #f8eddb;
		}
.bg02-3 { background-image:none;
		margin-top:0; padding: 0; background-color: #6d8da6;
		}
.bg03 { background-image:none;
		}
	
}



/* Public Version 公版顏色設定 */
:root {
	--PV-font: #575757; /* 文字色-灰 */
	--PV-main: #96300f; /* 公版主色-橘紅 */
	--PV-price: #a62d33; /* 價格顏色-紅 */
}

/* 動畫 */
@keyframes shake2 {
	0% { transform: rotate(3deg) translate(0px ,0px);}
	50% {transform: rotate(-3deg) translate(3px ,5px);}
	100% {transform: rotate(3deg) translate(-3px ,-5px);}
}

/* 標題字樣式 */
h2 { padding:0px 0 15px 0; font-weight: bold; font-size: 56px; line-height: 80px; text-align: center;color: #115a63;z-index: 2;  }
h2 p { font-size: 22px; letter-spacing: 5px; color: #412521;line-height: 36px;}
	@media screen and ( max-width: 768px ){
		h2 { padding:2.5% 0 0% 0; font-size: 1.8rem; line-height: 2.5rem;  text-align: center;margin-top: 0; letter-spacing: -0.1rem;}
		h2 p { font-size: 1rem; letter-spacing: 0; line-height: 1.5rem; }
	}




/* 切換頁籤 */
.tab{ width: 1200px;margin: auto; position: absolute;left: 0; right: 0; top: 690px;z-index: 10;}
.tab ul{ display: flex; margin: 10px 20px;}
.tab ul li{margin: 5px;}
	@media screen and ( max-width: 768px ){
		.tab{ width: 100%;margin: auto; top:82vw;}
		.tab ul{ display: flex; margin: 10px 20px;justify-content: center;}
		.tab ul li{margin: 0.7vw;}
		.tab ul li img {width: 31vw;}
	}



/* 書是最好的禮物 */
.for_gift{width: 1200px; margin: 40px auto; background:url("../images/bg01.png") top center no-repeat; position: relative; z-index: 3;}
.for_gift h2{ padding:0; font-size: 56px; line-height: 62px; text-align: left;color: #ffffff; width: 226px;position: absolute;right: 182px; top: 143px;}
.for_gift ul {padding: 280px 65px 20px; display: flex; flex-wrap: wrap;justify-content: space-around;}
.for_gift ul li{ width: 510px; position: relative; margin: 5px;}
.for_gift ul li .font{ position: absolute;}
.for_gift ul li .font h3{ font-weight: bold; font-size: 26px; line-height: 32px; color: #d24033;margin: 0 0 6px;}
.for_gift ul li .font p{font-size: 17px; color: #596161;line-height: 23px; }
	@media screen and ( max-width: 768px ){
		.for_gift{width: 94vw; margin:auto;background: #f8e3c8;border-radius: 10px;}
		.for_gift h2{ padding:7vw 0 3.5vw; font-size: 2.2rem; line-height: 2rem; text-align: center;color: #56a2b7; width: 96vw;position: relative;right: 0; top: -2vw;margin: auto;background:url("../images/h2bg_m.png") top center no-repeat;background-size: 100%;}
		.for_gift ul {padding: 0; margin: 0vw auto 5vw;}
		.for_gift ul li{ width: 96vw; margin:2vw auto; top: 0 !important; left: 0!important;}
		.for_gift ul li img{ width: 96%; display: block; margin: auto;}
		.for_gift ul li .font{ position: absolute;border-radius: 5px;padding: 1.5%;background: #fff0dd;}
		.for_gift ul li .font h3{ font-size:1rem; line-height: 1.2rem; margin: 0 0 1%;;}
		.for_gift ul li .font p{font-size: 0.75rem; color: #596161;line-height: 1rem; }
	}




/* 超值禮物書Gift Set */
.title {}
.title h2{ font-size: 64px; line-height: 80px; text-align: center;color: #d53f33; padding: 0;}
.title h2 big{ color: #1f7782;}
.title p{ font-size: 34px;color: #4e595a;text-align: center;}
	@media screen and ( max-width: 768px ){
		.title {background:url("../images/titlebg_m.jpg") top center no-repeat;background-size: 100%;padding: 15vw 0 0vw;}
		.title h2{ font-size: 2rem; line-height: 2.2rem; }
		.title h2 big{ }
		.title p{ font-size: 1rem;}
	}



/* 4-6 half_4px2 */
.half_4px2 { width: 1200px; margin: auto; min-width:1200px;}
.half_4px2 { margin: 40px auto;  display: flex; padding: 0 28px; }
.half_4px2 img { width: 100%; display: block;}
.half_4px2 .left-half, .half_4px2 .right-half  { width:556px; margin: 0px 8px; background: #ffffff; border-radius:10px; background:url("../images/texture.png") top center repeat;}
.half_4px2 .left-half { background-color:  #1f7782;}
.half_4px2 .right-half { background-color:  #d0382d;}
.half_4px2 .left-half:before ,.half_4px2 .right-half:before{ content:''; display: block;width: 563px; height: 61px; margin: -10px 0 -12px -2px; background:url("../images/left-half.png") top center no-repeat;}
.half_4px2 .right-half h2{ /*background:url("../images/bg04.jpg") top center repeat;*/}
.half_4px2 h2  {font-weight: bold; margin: 10px 6px 6px; color:#ffffff;  text-align: center;font-size: 40px;line-height: 50px;padding: 0;}
.half_4px2 ul { padding: 0 12.6px 16px; overflow: hidden;  border-top:none;display: flex;flex-wrap: wrap;justify-content: space-between;}
.half_4px2 ul li { float: left;width: 254px; padding: 8px 17px; margin: 5px;text-align: left;position: relative;background: #ffffff;border-radius: 10px;}
.half_4px2 ul li a {  }
.half_4px2 ul li img { display: block; width: 220px;height: 270px;object-fit: contain; margin: 0 auto 0 auto;}
.half_4px2 h3 { padding: 2px 12px 2px 6px; font-weight: bold; font-size: 15px;  background:#ea8677; border-top-right-radius: 30px;color: #fff;top: 254px;position: absolute;}
.half_4px2 p { font-weight: bold; font-size: 16px; line-height: 20px; color:var(--PV-font); padding: 10px 4px 0;}
.half_4px2 .sale { display: inline-block; line-height: 43px;  padding: 0px 4px 0; }
.half_4px2 span {font-weight: bold; font-size: 22px; color:var(--PV-main); }
.half_4px2 span small { font-size: 16px;  color:var(--PV-font);}

	@media screen and ( max-width: 768px ){
		.half_4px2 { margin: 0 ; padding: 0; width: 100%; min-width: 100%; display: block; font-size: 0;} 
		.half_4px2 .left-half, .half_4px2 .right-half  { width: 94%; margin: 3%; }
		.half_4px2 .left-half:before ,.half_4px2 .right-half:before{ width: 100%; height: 10vw; margin: auto; background-size: 100%; position: relative; top: -1vw; }		
		.half_4px2 h2  { margin: 0 0 1vw;  font-size: 1.5rem;line-height: 2rem; letter-spacing: 0.2rem; }
		.half_4px2 ul { padding: 0% 2% 3%; overflow: visible; display: flex; flex-wrap: wrap;  }
		.half_4px2 ul li { padding: 2.5vw; width: 43vw; margin:1%; border-color: #828694; }
		.half_4px2 ul li a {  }
		.half_4px2 ul li img { width: 37vw; height: 37vw;  border-radius: 5px;}
		.half_4px2 h3 { padding: 1vw 3vw 1vw 1vw; margin: 0;  font-size: 0.7rem; line-height: 0.9rem;top: 0; left: 0; position: relative;}
		.half_4px2 p { font-size: 0.7rem; line-height: 1.2rem; padding: 0; }
		.half_4px2 .sale { line-height: 1.5rem;  }
		.half_4px2 span { font-size: 1rem; }
		.half_4px2 span small { font-size: 0.6rem;}
	}




/* 3-1 r-rectangle */
.r-rectangle { width: 1130px; margin:40px auto;background:url("../images/texture.png") top center repeat; background-color: #4182a3; border-radius: 10px;padding: 0 0 40px;}
.r-rectangle:before {content:''; display: block;width: 1160px; height: 144px; margin: -20px 0 0px -14px; background:url("../images/snow-cap.png") top center repeat; position: absolute; }
.r-rectangle h2 { padding:28px 0px 15px 300px; font-weight: bold; font-size: 56px; line-height: 80px; text-align: left;color: #f8edda; }
.r-rectangle h2 p { font-size: 34px; letter-spacing: 0px; color: #ffffff;line-height: 36px;display: inline;padding: 0 0 0 16px;}
.r-rectangle ul { padding: 0px 50px 0px; overflow: hidden; display: flex; justify-content: center;}
.r-rectangle ul li { width: 300px; padding: 15px 15px 10px; margin: 15px 20px; background-color: #fff; text-align: center;border-radius:10px; }
.r-rectangle ul li a {  }
.r-rectangle ul li img { display: block; width: 266px;height: 266px;object-fit: contain; margin: 0 auto 0 auto; }
.r-rectangle h3 { padding: 10px 0 0; font-weight: bold; line-height: 32px; font-size: 22px;  color:var(--PV-font); }
.r-rectangle p { font-weight: bold; font-size: 16px; line-height: 20px; color:var(--PV-font); }
.r-rectangle .sale { display: inline-block; line-height: 43px;   }
.r-rectangle span {font-weight: bold; font-size: 22px; color:var(--PV-price); }
.r-rectangle span small { font-size: 16px; color:var(--PV-font);}

	@media screen and ( max-width: 768px ){
		.r-rectangle { height: auto;margin: 1vw auto 5vw auto; overflow: hidden;padding: 0 0 3%; width: 94vw; } 
		.r-rectangle:before {width: 100%; height: 18vw; margin: auto;background:url("../images/snow-cap_m.png") top center no-repeat; background-size: 95%; background-position: 0vw -1vw;}
		.r-rectangle h2 { padding:5vw 0 1vw; font-size: 2rem; line-height: 3.2rem; text-align: center;color: #f8edda; }
		.r-rectangle h2 p { font-size: 1rem; letter-spacing: 0; line-height: 1.5rem; display: block;margin: 2vw 0 0; padding: 0;}
		.r-rectangle ul { padding: 0% 2%; overflow: visible; display: flex; flex-wrap: wrap; }
		.r-rectangle ul li { padding: 2% 5%; width: 98%; margin:1%; background-color: #fff; text-align: center; border-radius: 2vw;}
		.r-rectangle ul li img { display: block; width: 42vw; height: 38vw; margin: 0 auto 0 auto; float: left;}
		.r-rectangle h3 { padding: 6% 2% 2%;font-weight: bold; font-size: 1.2rem; line-height: 1.5rem;  }
		.r-rectangle p { font-weight: bold; font-size: 0.8rem; line-height: 1.2rem;  }
		.r-rectangle .sale {display: inline-block; line-height: 2rem;  }
		.r-rectangle span {font-weight: bold; font-size: 1.2rem; }
		.r-rectangle span small { font-size: 1rem;}
	}


/* 4-7 hightlight_4p */
.hightlight_4p { width: 1130px; margin:40px auto;background:url("../images/texture.png") top center repeat; background-color: #d53f33; border-radius: 10px;padding: 0 0 40px;}
.hightlight_4p:before {content:''; display: block;width: 1160px; height: 144px; margin: -20px 0 0px -14px; background:url("../images/snow-cap.png") top center no-repeat; position: absolute; }
.hightlight_4p h2 { padding:28px 0px 15px 300px; font-weight: bold; font-size: 56px; line-height: 80px; text-align: left;color: #f8edda; }
.hightlight_4p h2 p { font-size: 34px; letter-spacing: 0px; color: #ffffff;line-height: 36px;display: inline;padding: 0 0 0 16px;}
.hightlight_4p ul { padding: 0 2px 5px; overflow: hidden; display: flex; justify-content: center; }
.hightlight_4p ul li { padding: 0px ; margin: 8px;  text-align: center; position: relative;background-color: #fff;}
.hightlight_4p ul li img { display: block; width: 250px;height: 250px;object-fit: contain; margin: 0 auto; padding: 10px;  }
.hightlight_4p h3 { padding: 5px 0 ;  line-height: 32px; font-size: 22px;  color:#ffffff; background: #6ea4a6;font-weight: bold; }
.hightlight_4p p { font-weight: bold; font-size: 16px; line-height: 20px; color:var(--PV-font); margin: 6px 0 0;}
.hightlight_4p .sale { display: inline-block; line-height: 43px;   }
.hightlight_4p span {font-weight: bold; font-size: 22px; color:var(--PV-main); }
.hightlight_4p span small { font-size: 16px;  color:var(--PV-font);}

.hightlight_4p:nth-child(even){ background-color: #7eb6b8;}
.hightlight_4p:nth-child(even) h3{ background: #ea8677;}

	@media screen and ( max-width: 768px ){
		.hightlight_4p { width: 94vw;  padding: 0 0 2vw; margin: 1vw auto 5vw;}
		.hightlight_4p:before {width: 100%; height: 18vw; margin: auto;background:url("../images/snow-cap_m.png") top center no-repeat; background-size: 95%; background-position: 0vw -1vw;}
		
		.hightlight_4p h2 { padding:5vw 0 1vw; font-size: 2rem; line-height: 3.2rem; text-align: center;color: #f8edda; }
		.hightlight_4p h2 p { font-size: 1rem; letter-spacing: 0; line-height: 1.5rem; display: block;margin: 2vw 0 0; padding: 0;}
		.hightlight_4p ul { padding: 1vw; flex-wrap: wrap;  }
		.hightlight_4p ul li { padding: 0px ; margin: 1vw;  width: 44vw; }
		.hightlight_4p ul li a {  }
		.hightlight_4p ul li img { width: 44vw;height: 44vw; margin: 0 auto;  }
		.hightlight_4p h3 { padding:2vw 1vw ;  line-height: 1rem; font-size: 0.8rem; margin: 0 0 1vw;}
		.hightlight_4p p {  font-size: 0.8rem; line-height: 1rem; margin:0;}
		.hightlight_4p .sale {  line-height: 2rem;   }
		.hightlight_4p span { font-size: 1rem;  }
		.hightlight_4p span small { font-size: 0.7rem; }
	}


/* 5-2 hightlight_5p */
.hightlight_5p { width: 1200px; margin: auto; min-width:1200px;}
.hightlight_5p { margin: 40px auto; padding: 0 ; }
.hightlight_5p ul { padding: 0 2px 5px; overflow: hidden; display: flex; justify-content: center; }
.hightlight_5p ul li { width: 220px;padding: 0px ; margin: 8px;  text-align: center; position: relative; background-color: #fff;}
.hightlight_5p ul li img { display: block;width: 220px; height: 220px;object-fit: contain; margin: 0 auto; padding: 10px;  }
.hightlight_5p h3 { padding: 5px 0 ;  line-height: 32px; font-size: 22px;  color:#ffffff; background: #ea8677;font-weight: bold; }
.hightlight_5p p { font-weight: bold; font-size: 16px; line-height: 20px; color:var(--PV-font); margin: 6px 0 0;}
.hightlight_5p .sale { display: inline-block; line-height: 43px;   }
.hightlight_5p span {font-weight: bold; font-size: 22px; color:var(--PV-main); }
.hightlight_5p span small { font-size: 16px; color:var(--PV-font); }

	@media screen and ( max-width: 768px ){
		.hightlight_5p h2 { padding:2.5% 0 0% 0; font-size: 1.8rem; line-height: 2.5rem;  text-align: center;margin-top: 0; letter-spacing: -0.1rem;}
		.hightlight_5p h2 p { font-size: 1rem; letter-spacing: 0; line-height: 1.5rem; }
		.hightlight_5p { width: 100%; min-width:100%; padding: 0; margin: 0;}
		.hightlight_5p ul { padding: 1vw; flex-wrap: wrap;  }
		.hightlight_5p ul li { padding: 0px ; margin: 1vw;}
		.hightlight_5p ul li a {  }
		.hightlight_5p ul li img { width: 45vw;height: 45vw; margin: 0 auto;  }
		.hightlight_5p h3 { padding:1vw ;  line-height: 1.2rem; font-size: 1rem; margin: 2vw 3vw 1vw;border-radius: 15px;}
		.hightlight_5p p {  font-size: 0.8rem; line-height: 1rem; margin:0;}
		.hightlight_5p .sale {  line-height: 2rem;   }
		.hightlight_5p span { font-size: 1rem;  }
		.hightlight_5p span small { font-size: 0.7rem; }
		
		.hightlight_5p ul {}
		.hightlight_5p ul li:first-child{width: 92vw;}
		.hightlight_5p ul li:first-child img{float: left; width: 43vw; height: 43vw; margin: 2vw;}
		.hightlight_5p ul li:first-child h3{display: grid;margin:12vw 3vw 4vw 0;border-radius: 15px;}
		.hightlight_5p ul li:first-child p{display: grid;margin:0vw 3vw 0vw 0vw;}
		.hightlight_5p ul li:first-child span{margin:0vw 3vw 0vw 0vw;}
		.hightlight_5p ul li{width: 45vw;}
		.hightlight_5p ul li img {width: 45vw; height: 45vw;}
	}


/* scenario */
.scenario{}
.scenario ul{ overflow: hidden;}
.scenario ul li{ position: relative; width: 1200px; height: 420px;margin: 20px 0 0; background: none;}
.scenario ul li font { width: 700px; height: 380px; border: solid 8px #d0382d; display: block; padding: 25px 50px; background: #fff9f3;}
.scenario ul li h3 { font-weight: bold; font-size: 36px; line-height: 40px; color:var(--PV-main); }
.scenario ul li font hr { margin: 20px 0;}
.scenario ul li p {font-weight: bold; font-size:18px; line-height: 30px; color:var(--PV-font); padding: 0 240px 0 0; text-align:justify;}
.scenario ul li hr { margin: 10px 0; border-bottom: 1px; }
.scenario ul li img { position: absolute; bottom: 0; right: 0;  width: 750px; height: 350px;object-fit: cover;}

	@media screen and ( max-width: 768px ){
		.scenario{width: 100%; margin:auto;min-width:100%;}
		.scenario ul{ }
		.scenario ul li{  width: 96vw; height: auto;margin: 2vw;}
		.scenario ul li a {  display: flex;flex-wrap: wrap;}
		.scenario ul li font { width: 96vw; height: auto;  padding: 6vw; order: 2;}
		.scenario ul li h3 { font-size: 1.5rem; line-height: 2rem;  }
		.scenario ul li font hr { margin: 6vw 0; display: block;}
		.scenario ul li p { font-size:1rem; line-height: 1.5rem;  padding: 0 ; }
		.scenario ul li hr {margin: 1vw  0; display: none;}
		.scenario ul li img { position: static; bottom: 0; right: 0;  width: 100%; height: auto; order: 1;}
	}
/* photograph */
.photograph{overflow: hidden; padding: 0 41px;margin: 10px 0;}
.photograph a { display: flex; justify-content: space-between;background:url("../images/bg05.jpg") top center repeat;}
.photograph a p {width: 400px;font-weight: bold; font-size:20px; line-height: 40px; color:var(--PV-font); padding: 50px 20px 0;text-align:center;}
.photograph a img { width: 650px; height: 300px;object-fit: cover;}
	@media screen and ( max-width: 768px ){
		.photograph{padding: 0 ;margin: auto;}
		.photograph a { flex-wrap: wrap; background: none;}
		.photograph a p {width: 90vw; font-size:0.8rem; line-height: 1.2rem; color:#fff; padding: 2vw;}
		.photograph a img { width: 90vw; height: 50vw;object-fit: cover;margin: 2vw auto;}
		
		
	}


/* 5-1 topfive */
.topfive { width: 1200px; margin: auto; min-width:1200px;}
.topfive { margin: 40px auto 0; padding: 0; }
.topfive h3 {font-weight: bold; font-size: 40px; line-height: 50px;  text-align: left; letter-spacing: 3px; padding:0; color: #000000;}
.topfive h3 small {font-weight:normal;font-size: 16px;letter-spacing: 2px; position: relative; top: -7px; margin: 10px; color: #000000;}
.topfive ul { padding: 0 2px 5px; overflow: hidden; display: flex; justify-content: center; }
.topfive ul li {  padding: 0px ; margin: 14px 10px;  text-align: center; position: relative; }
.topfive ul li a {  }
.topfive ul li .special { background:#ea8677; position: absolute; width: 50px; height: 50px; color: #fff; top: 8px; left: 8px; border-radius: 50%;line-height: 50px;padding: 0px;}
.topfive ul li img { display: block; width: 220px;height: 220px;object-fit: contain; margin: 0 auto 12px auto;background-color: #fff; border-radius: 50%; }
.topfive p { font-weight: bold; font-size: 16px; line-height: 20px; color:#000000; }
.topfive .sale { display: inline-block; line-height: 43px;   }
.topfive span {font-weight: bold; font-size: 22px; color:var(--PV-main); }
.topfive span small { font-size: 16px; }
.topfive ul li:hover img{ border:5px solid #e9bb56;transition:all 0.3s;}

	@media screen and ( max-width: 768px ){
		.topfive { width: 100%; margin:auto; min-width:100%; padding: 2vw 2vw 5vw; overflow: hidden;}
		.topfive h3 { font-size: 2.5rem; line-height: 2.2rem; letter-spacing: 0; text-align: center; margin: 3vw;}
		.topfive h3 small {font-size: 0.8rem;letter-spacing: 0;  top: -2vw; margin: 0; }
		.topfive ul { padding:0; display: inline;}
		.topfive ul li {  margin: 1vw; float: left;}
		.topfive ul li a {  }
		.topfive ul li .special { width: 12vw; height: 12vw;  top: 2vw; left: 2vw; line-height: 2rem;padding: 1vw; font-size: 1.2rem;}
		.topfive ul li img {  width: 46vw;height: 46vw; margin: 0 auto 1vw auto; padding: 1vw;  }
		.topfive ul li:first-child img { width: 80vw;height: 80vw;  margin: 0 7vw 1vw;}
		.topfive ul li:first-child .special { left: 13vw;}
		.topfive p { font-weight: bold; font-size: 0.8rem; line-height: 1rem;  }
		.topfive .sale {  line-height: 2rem;   }
		.topfive span { font-size: 1.1rem; }
		.topfive span small { font-size: 0.7rem; }
	}





/* 6-5 keyword 關鍵字 */
.keyword { width: 1200px; margin: auto; min-width:1200px;}
.keyword { margin: 40px auto; padding: 0px 50px; overflow: hidden; /*display: none;*/}
.keyword ul {display: flex; flex-wrap: wrap; justify-content: center;  }
.keyword ul li { border-radius:10px; margin:6px; padding: 10px 30px; background-color: #6fa3a6; text-align: center; overflow: hidden; }
.keyword ul li:active, .keyword ul li:hover { background-color: #ea8676;}
.keyword ul li a { color: #fff;font-weight: bold; font-size: 24px; }

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

/* AD */
.AD {width: 1200px; min-width: 1200px;}
.AD { margin: 0 auto 0px auto; padding: 20px 90px 60px 90px; overflow: hidden;/*background:url("../images/bg_01.jpg")*/  }
.AD ul li { float: left; margin: 10px 6px;}
.AD ul li img { width: 494px; }
@media screen and ( max-width: 768px ){	
/* 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%; }
.AD ul li:nth-child(1) img, .AD ul li:nth-child(2) img, .AD ul li:nth-child(3) img, .AD ul li:nth-child(4) img, .AD ul li:nth-child(5) img ,.AD ul li:nth-child(6) img , .AD ul li:nth-child(7) 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;
}