@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/fixedbg.jpg") bottom center no-repeat fixed, url("../images/bg.jpg") top center repeat; z-index: 99
}
@font-face{
	font-family: SweiHalfMoonCJKtc-Black;
	src: url("../font/SweiHalfMoonCJKtc-Black.ttf")
}

	@media screen and ( max-width: 991px ){
	html{
	background:url("../images/bg-g.jpg") top center repeat;
}	
		}

/* PC */
.WRAPPER{ position:relative; width:100%; min-width:1200px; margin:0 auto; overflow:hidden;}
 	@media screen and ( max-width: 991px ){
		.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; }

/* m */
@media screen and ( max-width: 991px ){
	.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; }
}

.titleC h2, .subtitle h3{ font-family: SweiHalfMoonCJKtc-Black; color: #ffface;}
.titleC h2 span{ color: #ff7e00;}
@media screen and ( max-width: 991px ){
 .titleC h2{font-size: 2.8rem;}
}

/*swiper 輪播*/
.swiper-container {position: absolute; top:22px; left: 50px; z-index: 99; width:515px; padding: 0 0px; height:515px; overflow: hidden; display: flex; flex-wrap: wrap;}
.swiper-wrapper{z-index: 99;}
.swiper-slide img{object-fit:cover;}
.swiper-slide {
  /* Center slide text vertically */
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center; margin-right: 0px;
}

	@media screen and ( max-width: 991px ){
	.swiper-container {
  width: 92%; z-index: 99;padding: 0 0vw; background:url(../images/m/layout-m_09.jpg) top center no-repeat; background-size:100%;
  height:90vw;top:68vw; left:4vw;
}	
.swiper-wrapper{width:100%;}
.swiper-slide{width:100%; text-align:center;}
.swiper-slide img{ width:100%; max-height: 100%; margin:0 auto;}
		}

/*精明消費減少浪費*/
.bg_0{background:url(../images/bg-0.png) bottom center no-repeat;padding: 10px 0 50px; }
.bg_0 ul{
	width: 1200px;
	margin: 30px auto 0px;
	display: flex;
	justify-content: space-around;
	flex-wrap: wrap;
}
.bg_0 .titleC {
    display: flex;
    justify-content: center;
    margin: 0px auto 0px;
}

@media screen and ( max-width: 991px ){
	.bg_0{background:url(../images/bg-0.png) bottom center repeat; padding: 0vw; }
	.bg_0 ul{ /*width: 100%; margin: 0vw auto; */display: none;}
	.bg_0 ul li{/* margin-bottom: 3vw;*/display: none;}
	.bg_0 ul li img{ /*width: 90%; margin-left: 4vw;*/ display: none;}
}

/*--美味蔬食選我就對--*/
.bg_1 .half ul, .bg_1 .hightlight li{width:380px;}
.bg_1 .hightlight3 .scene-nobox .sliderbg{width: 380px; height: 500px; background:url(../images/bg-g2.jpg) top center repeat;}
.bg_1 .hightlight3 .one-time ul.ot li:nth-child(1) img{width: 380px; height:295px; }
.bg_1 .hightlight3 .one-time ul.ot li:nth-child(2){width: 90px; height: 90px; top: 10px; background: #cb1a59;}
.bg_1 .hightlight3 .one-time ul.ot li:nth-child(3) span{font-size: 36px; color: #fff55c;}
.bg_1 .hightlight3 .one-time ul.ot li:nth-child(3) {top: 38px; left: 130px;}
.bg_1 .hightlight3 .one-time ul.ot li:nth-child(6){top: 380px; width: 90px; height: 90px;}
.bg_1 .hightlight3 .one-time ul.ot li:nth-child(4) span{background: #01463d;}
.bg_1 .hightlight3 .one-time ul.ot li:nth-child(5) span{background: #01463d; color: #fff55c;}
.bg_1 .hightlight3 .one-time ul.ot li:nth-child(6) p{color: #fff55c;}

.bg_1 .hightlight3 .slick-dots{display: none;}
.bg_1 .scene-nobox ul img{padding: 0px 60px 0px 0px;}
.bg_1 .hightlight{margin: 0px auto;}
.bg_1 .slick-dotted.slick-slider{    margin-bottom: 0px; padding-bottom: 0px;}
@media screen and ( max-width: 991px ){
.bg_1 .half ul, .bg_1 .hightlight li{width: 100%;}
.bg_1 .hightlight3 .scene-nobox .sliderbg{width: 94vw; height: auto;}
.bg_1 .hightlight3 .one-time ul.ot li:nth-child(1) img{width: 80vw; height: 80vw; }
.bg_1 .scene-nobox ul img{padding: 0vw;}
.bg_1 .hightlight3 .one-time ul.ot li:nth-child(3) span{font-size: 2rem;}
.bg_1 .hightlight3 .one-time ul.ot li:nth-child(3) { top:0px; left:0px;}
.bg_1 .hightlight3 .one-time ul.ot li:nth-child(2) p{font-size: 1.5rem;}
.bg_1 .hightlight3 .one-time ul.ot li:nth-child(2) big{font-size: 3rem;}
	
	
}

/*--友善品牌感謝有您--*/
.bg_2 .triple{background:#fff55c; padding: 50px; border-radius: 30px;}
.triple .font h4{background:#cb1a59;}
big{color:#cb1a59;}

/*--在地食材優鮮送達--*/
.bg_3 .hightlight{background:#fff55c; padding: 50px 50px 10px; border-radius: 30px;}
.hightlight .font h4{background:#cb1a59;}

/*--素食分類精選好食--*/
.bg_4 .half ul{background:#fff55c; padding: 50px 0px 10px; border-radius: 30px;}

/*--跟著網民一起GO購夠--*/
.bg_5 .hightlight_5p{background:#fff55c; padding: 50px 0px 10px; border-radius: 30px;}
.hightlight_5p .font h4{background:#cb1a59;}
@media screen and ( max-width: 991px ){
/*--友善品牌感謝有您--*/
.bg_2 .triple{padding:10vw 0 5vw; margin: 0 auto 5vw;}

/*--在地食材優鮮送達--*/
.bg_3 .hightlight{ padding:10vw 0vw 1vw; margin: 0 auto 5vw;}

/*--素食分類精選好食--*/
.bg_4 .half ul{ padding:10vw 0vw 6vw; margin: 0 auto 5vw;}

/*--跟著網民一起GO購夠--*/
.bg_5 .hightlight_5p{padding:10vw 0vw 6vw; margin: 0 auto 5vw;}
	
}	
/*--調整架構title--*/
.bg_2 .titleC h2, .bg_3 .titleC h2, .bg_4 .titleC h2{background:#ffface; padding: 20px; border-radius: 50px; color: #01453d; margin: 0px auto -60px; border:4px solid #fff55c; }
.bg_2 .titleC h2:before, .bg_3 .titleC h2:before, .bg_4 .titleC h2:before, .bg_5 .titleC h2:before{
    background-image: url(../images/left.png);
    background-size: 100%;
    display: inline-block;
    width: 100px;
    height: 30px;
    margin-left: 10px;
    content: "";
}
.bg_2 .titleC h2:after, .bg_3 .titleC h2:after, .bg_4 .titleC h2:after, .bg_5 .titleC h2:after{
    background-image: url(../images/right.png);
    background-size: 100%;
    display: inline-block;
    width: 100px;
    height: 30px;
    margin-right: 10px;
    content: "";
}

.bg_0 .titleC h2,.bg_1 .titleC h2,.bg_5 .titleC h2{padding: 20px; border-radius: 50px; color: #ffface;}
.bg_0 .titleC h2:before, .bg_1 .titleC h2:before, .bg_5 .titleC h2:before{
    background-image: url(../images/left-2.png);
    background-size: 100%;
    display: inline-block;
    width: 100px;
    height: 30px;
    margin-left: 10px;
    content: "";
}
.bg_0 .titleC h2:after, .bg_1 .titleC h2:after, .bg_5 .titleC h2:after{
    background-image: url(../images/right-2.png);
    background-size: 100%;
    display: inline-block;
    width: 100px;
    height: 30px;
    margin-right: 10px;
    content: "";
}

@media screen and ( max-width: 991px ){
	.bg_0 .titleC h2,.bg_1 .titleC h2,.bg_5 .titleC h2{padding:5vw 0 0;}
	.bg_2 .titleC h2, .bg_3 .titleC h2, .bg_4 .titleC h2{padding:4vw;margin: 0px auto -12vw; }
	.bg_2 .titleC h2:before, .bg_3 .titleC h2:before, .bg_4 .titleC h2:before, .bg_5 .titleC h2:before{display: none;}
	.bg_2 .titleC h2:after, .bg_3 .titleC h2:after, .bg_4 .titleC h2:after, .bg_5 .titleC h2:after{display: none;}
	.bg_0 .titleC h2:before, .bg_1 .titleC h2:before, .bg_5 .titleC h2:before{display: none;}
	.bg_0 .titleC h2:after, .bg_1 .titleC h2:after, .bg_5 .titleC h2:after{display: none;}
	
}



.subtitle{background:#ffface; padding: 20px; border-radius: 50px; color: #01453d; margin: 0px auto -40px; border:4px solid #fff55c; }
.subtitle h3{border-left: solid 16px #01463d; color:#01463d; }
.subtitle .more a{color: #cb1a59; font-weight: 600;}

.slick-slide img.for_pc{ display: block;  }
.slick-slide img.for_m { display: none;  }
@media screen and ( max-width: 991px ){
.slick-slide img.for_pc{ display: none;  }
.slick-slide img.for_m { display: block;  }
}

/*for mobile*/
menu{display:none;}
@media screen and ( max-width: 991px ){
		menu{ display:block;}
	}
menu ul{position:fixed;bottom:0;left:0;margin:0;width:100%;display:flex; flex-wrap: wrap; list-style: none;background:#e2d23e;z-index:1000;border-top:none; font-weight: 600;}
menu ul li{border-right:1px solid #006356;border-bottom:1px solid #006356;padding:3vw 2vw; width:20%;box-sizing:border-box;text-align:center;}
menu ul li:nth-last-child(1){border-right:none;}
menu a{ color: #006356 !important;text-decoration:none; font-size: 1.2rem; font-family:GenWanMin-SB}





/*--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: 991px ){
	#gotop {bottom: 26vw;right: 0;margin: 2vw;	}
	}



/* share url */
#share{display: inline-block;background-color: #000;opacity:0.4;width: 40px;height: 40px;text-align: center;border-radius: 100%;position: fixed;bottom: 50px;right: 0px;transition: background-color .3s, opacity .5s, visibility .5s;z-index: 1000;margin: 30px;}#share::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/share.png) center no-repeat; background-size:20px;background-position:50% 30%;}#share:hover{cursor: pointer;background-color: #666;}#share:active{background-color: #666;}@media screen and ( max-width: 991px ){#share{bottom: calc(2vw + 50px);right: 0;margin: 2vw;}}