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


* {
  -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;}


/* head and foot */
header{ width:100%; position:relative; z-index:999; background-color:#18300c; display:block; }	
.header_m{ display:none;}
	@media screen and ( max-width: 768px ){
		.eslite_footer{margin-bottom: 50px;}
		header .top{display:none;}
		.header_m{ width:100%; height:auto; position:relative; top:0; display:block; padding:5px 0; background-color:#18300c;}
		.header_m img{ width:120%; height:auto; display:block; }
		#tob{ width:50%; font-size:70%}
	}
footer{ width:100%; position:relative; z-index:990; background-color:#18300c;}



/* 主色系設定 */
:root {
	--font-color: #313131; /* 文字色-灰 */
	--font-colorW: #ffffff; /* 文字色-白 */
	--font-colorB: #5e5c5c; /* 文字色-灰 */
	--font-colorC: #ffe49e; /* 文字色-黃 */
	--font-black: #000000; /* 文字色-黃 */
	--main-colorA: #871301; /* 視覺主色-紅 */
	--main-colorB: #91af26; /* 視覺輔助色-綠 */
	--main-colorC: #a62d33; /* 視覺重點色-紅 */
	
	--font-title: #775344; /* 公版標題色 */
	--main-blue: #045e71; /* 公版重點色_藍 */
	--main-colorD: #dc6038; /* 視覺重點色-橘 */
	--main-colorE: #b7a92c; /* 視覺重點色-綠 */
}

/* 滑鼠動態效果 */
.container li {  float:left;
	-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:translateY(-8px);
		    transform:translateY(-8px);}



/* PC */
.WRAPPER{ max-width:1920px; min-width:1200px; margin:0 auto; overflow:hidden; }
 	@media screen and ( max-width: 768px ){
		.WRAPPER{ max-width:100%; min-width:100%; background:url(../images/mbg_1.png) repeat;}
		
	}
.container { overflow:hidden;  }
.topbox { position:relative; width:1200px; margin:0 auto;}
.kv-tit{ top:169px; left:57px; position:absolute; }
.sp-1125{ top:334px; left:53px; position:absolute; }


.kv_pc { width:100%; height:785px; background:url("../images/kv.jpg") no-repeat top center;}
.kv_pc img { display:block;}
.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%; }
	.for_pc{ display: none; }
	.for_m { display: block; }

}

/* bg */
.bg01, .bg03, .bg05 { background:url("../images/mbg_1.png") top center repeat; }
.bg02, .bg04, .bg06 { background:url("../images/mbg_2.png") top center repeat; }
.bgAD1, .bgAD2 { background:url("../images/mbg_3.png") top center repeat; }
	@media screen and ( max-width: 768px ){

	}



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


/*txt*/
.proname{font-family:'Noto Serif TC','Microsoft JhengHei','Heiti TC'; font-weight:normal;color:#777; font-size:0.75rem; padding:10px 10px 15px 10px;}	
.number{ color:var(--main-colorC); font-size:1.4rem; font-family:'Noto Serif TC',Arial, Helvetica, sans-serif; font-weight:bold;}	
	@media screen and ( max-width: 768px ){
		.proname{font-size:0.6rem;}	
		.number{font-size:1.2rem;}
	}

/* hightlight_4p */
.hightlight_4p { width: 1200px; margin:70px auto 20px auto; min-width:1200px;}

.hightlight_4p h2 { font-weight:bold; font-size:48px; line-height:50px; text-align:left; color:#f0e6ca; padding:40px 155px 40px 165px; background:url("../images/bg_h2-1.png") top center no-repeat; width:860px; margin:0 auto 20px; position:relative;}
.hightlight_4p h2.h2-r { background:url("../images/bg_h2-2.png") top center no-repeat; }
.hightlight_4p h2 a{ color:#f0e6ca;}
.hightlight_4p div img{ display:none;}
.hightlight_4p h2 .deco { box-shadow:5px 5px 0px 0px #f0e6ca; border-radius:50%; font-size:32px; line-height:32px; color:#ffffff;  width:186px; height: 186px; display: block;top: -40px; left:-50px; position: absolute; padding:72px 0 0 85px;}
.hightlight_4p h2 .deco2 { box-shadow:-5px 5px 0px 0px #f0e6ca; border-radius:50%; font-size:32px; line-height:32px; color:#ffffff; width:186px; height: 186px; display: block;top: -40px; right:-50px; position: absolute;padding:72px 0 0 85px;}
.hightlight_4p h2 .iori-1 {background:#fff url("../images/icon-1.png") no-repeat center/100%; }
.hightlight_4p h2 .iori-2 {background:#fff url("../images/icon-2.png") no-repeat center/100%;  }
.hightlight_4p h2 .iori-3 {background:#fff url("../images/icon-3.png") no-repeat center/100%; }
.hightlight_4p h2 .iori-4 {background:#fff url("../images/icon-4.png") no-repeat center/100%; }
.hightlight_4p h2 .iori-5 {background:#fff url("../images/icon-5.png") no-repeat center/100%; }
.hightlight_4p h2 .iori-6 {background:#fff url("../images/icon-6.png") no-repeat center/100%; }
.hightlight_4p h2 p { font-size:20px; letter-spacing:1px; line-height:36px; margin-top:10px; color:#fff; text-align:justify; }

.hightlight_4p ul { padding: 0 2px 5px; overflow: hidden; display:flex; justify-content:center; }
.hightlight_4p ul li { width:250px; padding:0px; margin:8px; text-align:center; background-color: #fff; }
.hightlight_4p ul li img { display:block; width:250px; height:250px; object-fit:contain; margin:0 auto;}
.hightlight_4p h3 { padding:5px 0 ; line-height:32px; font-size:19px; color:#ffffff; background:url(../images/bg_h3.png) no-repeat center/100%, url(../images/bg_h3r.png) repeat; font-weight:bold; }
.hightlight_4p h3 small { font-size:16px; }
.hightlight_4p p { font-weight: bold; font-size: 18px; line-height: 22px; color:var(--PV-font); margin: 6px 0;}
.hightlight_4p .sale { line-height: 43px;}
.hightlight_4p > span { display:none; font-weight: bold; font-size: 22px; color:var(--PV-price); border-top:4px #000 double; border-bottom:4px #000 double; }
.hightlight_4p span small { font-size: 16px; }

	@media screen and ( max-width: 768px ){		
		.hightlight_4p { width: 100%; min-width:100%; padding: 15vw 0 6vw; margin: 0;}

		.hightlight_4p h2 { background:#153605 url("../images/bg_h2-1.png") no-repeat center top/100%; padding:14vw 6vw;  font-size: 2.2rem; line-height: 2.5rem; margin: 0 auto 2vw auto;  width: 92vw;text-align: center; }
		.hightlight_4p h2.h2-r { background:#962020 url("../images/bg_h2-2.png") no-repeat center top/100%; }
		.hightlight_4p h2 .deco, .hightlight_4p h2 .deco2 { box-shadow:none; background-size:25vw; font-size: 3rem; line-height: 23vw; width: 25vw; height: 25vw; top: -12vw;left: -2vw; padding: 0 0 0 11vw ;}
		.hightlight_4p h2 p { font-size: 1rem; letter-spacing: 0; line-height: 1.4rem;text-align: justify; margin: 3vw 0 0;}

		.hightlight_4p ul { padding: 1vw; flex-wrap: wrap;  }
		.hightlight_4p ul li {  width: 45vw;padding: 0px ; margin: 1vw; }
		.hightlight_4p ul li a {  }
		.hightlight_4p ul li img { width: 45vw;height: 45vw; margin: 0 auto;  }
		.hightlight_4p h3 { padding:0 ;  line-height: 1.8rem; font-size:0.81rem; margin: 0 0 1vw;}
		.hightlight_4p h3 small { font-size:0.6em; }
		.hightlight_4p p {  font-size: 0.8rem; line-height: 1rem;}
		.hightlight_4p .sale {  line-height: 2rem;   }
		.hightlight_4p span { font-size:0.8rem;  }
		.hightlight_4p span small { font-size: 0.7rem; }
		
	}





/* AD */
.AD { width: 1200px; min-width: 1200px; margin: 0 auto 0px auto; padding: 20px 90px 20px 90px; overflow: hidden;/*background:url("../images/bg_01.jpg")*/  }
.AD ul li { margin: 10px 6px;}
.AD ul li.ad1000 img { width: 1000px; }
.AD ul li img { width: 494px; }
	@media screen and ( max-width: 768px ){	
		.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.ad1000 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;
}