@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") top center repeat;
}



/* 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; }
.topbox { position: relative; width: 1200px; margin: auto;}
.kv_pc {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; }


.block{ margin: 0 auto; max-width: 1920px;}
big{ font-size: 120%;}

.alternate li{ height: 350px;}
.alternate ul:nth-child(even){padding-top: 40px; margin-bottom: 4px;}
.alternate .font{ margin-top: 8px;}
.alternate{ margin:20px auto 0px;}
.hightlight{margin-bottom: 0px;padding-bottom: 10px;}
.bg_6 .hightlight ul li{ margin: 8px;}
/* m */
@media screen and ( max-width: 640px ){
	html{padding-bottom: 60px;}
	.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_6 .hightlight ul li{ margin: 1vw;}
	.alternate li{ height:auto;}
	.alternate ul:nth-child(even){padding-top: 0; margin-bottom: 1vw;}
}
.hightlight{padding-bottom: 0; margin-top:0;}





/*品牌推薦*/
.box02{ width:100%;height:500px;display:block;line-height:0; position:relative; background:url(../images/bg.jpg) top center repeat; /*background-color:var(--B1color-L);*/}
.box02_content{ width:1200px; height:470px; margin:0 auto; position:relative;}
.B1_intro{ width:1180px; height:350px;text-align:center;display:block; margin:0px auto 0px auto; background-size:100%;overflow:hidden; position:absolute; top:30px;}
.B1_intro li:nth-child(1){ width:448px; height:1px; font-size:2rem; line-height:3.4rem; color:black; text-align:center; font-weight:500; background-color: #fff; z-index:1; position: relative; top:325px; left:63px;}

.B1_intro li:nth-child(2){ width:470px; height:290px; background-color: #fff;z-index:3; position:absolute; left:62px; top:30px; box-shadow:0 4px 8px 0 rgba(0, 0, 0, 0.1), 1px 2px 4px rgba(0, 0, 0, 0.1);}

.B1_intro li:nth-child(3){ width:330px; height:50px; font-size:1.6rem; line-height:2rem; color:black; text-align:center; font-weight:600; border-bottom:#572e16 solid 1px; position:relative; z-index:10;font-family:'Helvetica','Century Gothic', 'Noto Sans TC', 'sans-serif'; letter-spacing:2px; left:130px; top:70px; overflow: hidden;}

.B1_intro li:nth-child(4){ width:335px; height:140px; font-size:1rem; line-height:1.7rem; color:#523a1b; text-align:left; font-weight:400;position:absolute; z-index:10;left:135px; top:140px; overflow:hidden;}

.B1_intro li:nth-child(5){ width:370px; height:350px;font-weight:300; position: relative; right:-388px; bottom:50px;;z-index:2;}

.B1_intro li:nth-child(5) img{width:750px; height:350px;}

@media screen and ( max-width: 640px ){

.box02{ width:100%;height:auto;display:block;line-height:0; position:relative; background:url(../images/bg_01.jpg) top center repeat; overflow:hidden;}
.box02_content{ width:100%; height:auto; margin:0 auto; position:relative; min-width:320px; margin-top:0;}
.B1_intro{ width:100%; height:550px;text-align:center;margin:0px auto;overflow:hidden; position: relative; display:block; background:url(../images/bg_01.jpg) top center repeat; padding:1% 0 0% 0 ;}
.B1_intro li:nth-child(1){ display:none;}
.B1_intro li:nth-child(2){display:none;}
.B1_intro li:nth-child(3){width:100%; height:auto; font-size:1.8rem; line-height:2rem; color:#ffffff; text-align:center; font-weight:500; border-bottom:#3a3a3a solid 0px; position:relative; z-index:10;font-family:'Helvetica','Century Gothic', 'Noto Sans TC', 'sans-serif'; letter-spacing:2px; overflow: hidden; display:block; margin:0 auto;top:0; left:0; padding:3% 20% 0 20%;}
.B1_intro li:nth-child(4){ width:100%; height:auto; font-size:1rem; line-height:1.7rem; color:#ffffff; text-align:center; font-weight:300; z-index:10;position: relativel;overflow:hidden;font-family:'Helvetica','Century Gothic', 'Noto Sans TC', 'sans-serif';  display:block; top:0; left:0; padding:15% 10% 3% 10%;}
.B1_intro li:nth-child(5){ width:100%; height:auto;font-weight:300;position: relative;z-index:2; margin:0 auto; top:28%; left:0;}
	.B1_intro li:nth-child(5) img{width:100%; height:auto}}

/*品牌推薦(box3)*/
.box03{ width:100%;height:500px;display:block;line-height:0; position:relative; background:url(../images/bg.jpg) top center repeat; /*background-color:var(--B1color-L);*/}
.box03_content{ width:1200px; height:470px;top:60px; margin:0 auto; position:relative;}
.B1_intro{ width:1180px; height:350px;text-align:center;display:block; margin:0px auto 0px auto; background-size:100%;overflow:hidden; position:absolute; top:30px;}
.B1_intro li:nth-child(1){ width:448px; height:1px; font-size:2rem; line-height:3.4rem; color:black; text-align:center; font-weight:500; background-color: #fff; z-index:1; position: relative; top:325px; left:63px;}

.B1_intro li:nth-child(2){ width:470px; height:290px; background-color: #fff;z-index:3; position:absolute; left:62px; top:30px; box-shadow:0 4px 8px 0 rgba(0, 0, 0, 0.1), 1px 2px 4px rgba(0, 0, 0, 0.1);}

.B1_intro li:nth-child(3){ width:330px; height:50px; font-size:1.6rem; line-height:2rem; color:black; text-align:center; font-weight:600; border-bottom:#572e16 solid 1px; position:relative; z-index:10;font-family:'Helvetica','Century Gothic', 'Noto Sans TC', 'sans-serif'; letter-spacing:2px; left:130px; top:70px; overflow: hidden;}

.B1_intro li:nth-child(4){ width:335px; height:140px; font-size:1rem; line-height:1.7rem; color:#523a1b; text-align:left; font-weight:400;position:absolute; z-index:10;left:135px; top:140px; overflow:hidden;}

.B1_intro li:nth-child(5){ width:370px; height:350px;font-weight:300; position: relative; right:-388px; bottom:50px;;z-index:2;}

.B1_intro li:nth-child(5) img{width:750px; height:350px;}

@media screen and ( max-width: 640px ){

.box03{ width:100%;height:auto;display:block;line-height:0; position:relative; background:url(../images/bg_01.jpg) top center repeat; overflow:hidden;}
.box03_content{ width:100%; height:auto; margin:0 auto; position:relative; min-width:320px; margin-top:0;}
.B1_intro{ width:100%; height:550px;text-align:center;margin:0px auto;overflow:hidden; position: relative; display:block; background:url(../images/bg_01.jpg) top center repeat; padding:1% 0 0% 0 ;}
.B1_intro li:nth-child(1){ display:none;}
.B1_intro li:nth-child(2){display:none;}
.B1_intro li:nth-child(3){width:100%; height:auto; font-size:1.8rem; line-height:2rem; color:#ffffff; text-align:center; font-weight:500; border-bottom:#3a3a3a solid 0px; position:relative; z-index:10;font-family:'Helvetica','Century Gothic', 'Noto Sans TC', 'sans-serif'; letter-spacing:2px; overflow: hidden; display:block; margin:0 auto;top:0; left:0; padding:3% 20% 0 20%;}
.B1_intro li:nth-child(4){ width:100%; height:auto; font-size:1rem; line-height:1.7rem; color:#ffffff; text-align:center; font-weight:300; z-index:10;position: relativel;overflow:hidden;font-family:'Helvetica','Century Gothic', 'Noto Sans TC', 'sans-serif';  display:block; top:0; left:0; padding:15% 10% 3% 10%;}
.B1_intro li:nth-child(5){ width:100%; height:auto;font-weight:300;position: relative;z-index:2; margin:0 auto; top:28%; left:0;}
	.B1_intro li:nth-child(5) img{width:100%; height:auto}}


















/*--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;}
#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: 60px;right: 0;margin: 2vw;}
	}
/*for mobile*/
menu{display:none;}
	@media screen and ( max-width: 768px ){
		menu{ display:block;}
	}
menu ul{
	position:fixed;
	bottom:0;
	left:0;
	margin:0;
	width:100%;
	display:flex;
	list-style: none;
	background-color: #483831;
	z-index:1000;
	padding:2px 0;
	border-top:none;
	flex-wrap: wrap;
	}
menu ul li{border-right:1px dashed #ffffff;padding:5px;width:33.3%;box-sizing:border-box;text-align:center;font-size:13px;line-height:24px;}
menu ul li a{font-size:13px;letter-spacing:1px;}
menu ul li:nth-child(3n){border-right:none;}
menu ul li:nth-child(1),menu ul li:nth-child(2),menu ul li:nth-child(3){border-bottom:1px dashed #ffffff;}
menu a{color:#ffffff !important;text-decoration:none;}

/*navigation bar for pc*/
/* Style the navbar */
#navbar {
	/*overflow: hidden;*/
	background:#483831;
	max-width:100%;
	height:60px;
	z-index:990; min-width:1200px;margin:0 auto;
  }
  	@media screen and ( max-width: 768px ) {
		#navbar{ display:none;} 
		.sticky + .content { padding-top:0px !important;}
	}

  .nav_content{width:1200px;margin:0 auto;}
  
  
.row_01 span,.row_02 span,.row_03 span,.row_04 span,.row_05 span{ letter-spacing:-5px;}
  
  /* Navbar links */
  #navbar a {
	float: left;
	display: block;
	text-align: center;
	text-decoration: none;
	width:200px;
	font-size:24px;
	font-weight: 500;
	  
	/* txt */
	color:#fff;
	border-right:1px solid #fff;
	height:60px;
	line-height:60px;
  }
  #navbar .row_06 a {
	border-right:none;
  }
  
  /* Page content */
  .content {
	padding: 0px;
  }
  
  /* The sticky class is added to the navbar with JS when it reaches its scroll position */
  .sticky {
	position: fixed;
	top: 0;
	width: 100%;
  }
  
  /* Add some top padding to the page content to prevent sudden quick movement (as the navigation bar gets a new position at the top of the page (position:fixed and top:0) */
  .sticky + .content {
	
  }
  .nav_content img{ transition:all 0.3s;}
  .nav_content img:hover{ transform:translateY(-5px);}





  /* Ida 20210414 */

 header {
    width: 100%;
    height: 1000px;
    background: url(../images/head_bg.jpg) center top;
}
.head_img {
    margin: auto;
    width: 1200px;
    height:1055px;
}
.head_title {
    width:370px;
    padding-top: 250px;
    float: left;
}
.head_title img {
	width:90%;
	margin-left:-80px;
}
.sale {
    width:320px;
    padding-top: 380px;
    float:left;
}
.sale img {
	width:90%;
	margin-left:-80px;
}
#navbar {
	background:#483831;
	margin:0 auto 30px auto;
}
#navbar a {
	width: auto;
	font-size: 20px;
	font-weight: 300;
	border-right:1px dashed #fff;
	padding: 0 20px;
	letter-spacing:1px;
}
#navbar a:hover {
	background-color:#937156;
	margin-bottom:20px;
}
.circle .font h4 { color:#000;}
.hightlight .font h4 {background: #4f382c;}
.alternate ul:nth-child(odd) li:first-child {background: #72B5A8;}
.alternate ul:nth-child(even) li:last-child {background: #E0AB96;}
.alternate ul:nth-child(odd) li:first-child .font h4 {color: #000;}
.alternate ul:nth-child(even) li:last-child .font h4 {color: #000;}
.alternate ul:nth-child(odd) li:first-child .font .price big {color: var(--PV-eslite);}
.alternate ul:nth-child(even) li:last-child .font .price big {color: var(--PV-eslite);}
.content_title{
    width: 1160px;
    margin: 30px auto 0 auto;
    padding: 25px 45px 55px 45px;
}
.content_title2{
	width: 1160px;
	margin: 30px auto 0 auto;
	padding: 60px 45px 55px 45px;
}
.wrap{
  background-image:url("../images/bg.jpg"top center repeat);
  background-size: 100%;
  margin-top: -60px;
  background-position:bottom;
}
.wrap2{
  background-image:url("../images/wrap_bg2.jpg");
  background-size: 100%;
  margin-top: -30px;
  /* background-position:bottom; */
}
.wrap3{
  background-image:url("../images/wrap_bg.jpg");
  background-size: 100%;
  margin-top: -68px;
  background-position:top;
}
.half ul{
background: linear-gradient(269deg, rgba(213, 180, 155, 0.5)17%, rgba(255, 255, 255, 0.6)78%);
background: -moz-linear-gradient(269deg, rgba(213, 180, 155, 0.5)17%, rgba(255, 255, 255, 0.6)78%);
background: -webkit-linear-gradient(269deg, rgba(213, 180, 155, 0.5)17%, rgba(255, 255, 255, 0.6)78%);
background: -o-linear-gradient(269deg, rgba(213, 180, 155, 0.5)17%, rgba(255, 255, 255, 0.6)78%);
margin-bottom: 25px;
}
.bg_6{margin-bottom: 60px;}
.bg_9{
	background:url("../images/bg_banner.jpg") top center repeat;
	margin-top:-30px;
}
.bg_block{padding-bottom:30px;}
.banner {padding: 40px 20px;}
.bg_3 .content_title{padding-top: 50px;padding-bottom:50px;}
.bg_7 .content_title{padding-top: 50px;padding-bottom:50px;}

@media screen and ( max-width: 641px ){
header { display: none; width: 100%; }
.content_title img,.content_title2 img{
    width:85%;
    margin-left:-12.3%;
}
.content_title{
    padding: 15px 45px 30px 45px;
}
	
menu ul{
	background:#CE7868;}
menu ul li{border-right:1px dashed #ffffff;}
menu ul li:nth-child(1),menu ul li:nth-child(2),menu ul li:nth-child(3){border-bottom:1px dashed #ffffff;}	
.banner {padding:20px;}
}
@media screen and ( max-width: 1199px ){
.wrap{
  background-image:url("../images/wrap_bg.jpg");
  background-position:bottom;
}
.wrap2{
  background-position:top;
}
.bg_6{margin-bottom: 0;}
.bg_7 .content_title{padding-top: 40px;padding-bottom:50px;}
.bg_7 .content_title{padding-top: 40px;padding-bottom:50px;}
.bg_block{padding-bottom:0;}
}