@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&display=swap');


:root{
	/**/
	--font: 'Montserrat', '微軟正黑體', Helvetica Neue, Arial, sans-serif;
	--font-size: 14px;
	--lwg-green: #014e4e;
	--lwg-green-rgb: 1, 78, 78;
	--lwg-green-opacity5: rgba(1,78,78, 0.05);
	--lwg-green-opacity10: rgba(1,78,78, 0.1);
	--lwg-green-opacity20: rgba(1,78,78, 0.2);
	--lwg-green-opacity30: rgba(1,78,78, 0.3);
	--lwg-green2: #157347; /*#399E64*/
	--lwg-green2-rgb: 57,158,100;
	--lwg-green3: #5AB57D;
	--lwg-green3-rgb: 8,116,65;
	--lwg-green4: #64A547;
	--lwg-green5: #95C942;

	--lwg-yellow: #ffdf00;
	--lwg-yellow-rgb: 255,223,0;
	--lwg-yellow-opacity10: rgba(255,223,0,0.1);
	--lwg-yellow-opacity20: rgba(255,223,0,0.2);
	--lwg-yellow2: #D8E11D;
	--lwg-red: #df2326;
	--lwg-red-opacity10: rgba(223,35,38, 0.1);
	--lwg-red-opacity20: rgba(223,35,38, 0.2);
	/*--lwg-green: #03A550;
	--lwg-green-opacity10: rgba(23, 190, 111, 0.1);
	--lwg-green-opacity20: rgba(23, 190, 111, 0.2);
	--lwg-green-opacity30: rgba(23, 190, 111, 0.3);
	--lwg-green2: #00B961;*/
	--lwg-green2-opacity90: rgba(0,185,97, 0.9);
	--lwg-green3: #087441;
	--lwg-green4-opacity-95: rgba(185, 235, 212, 0.95);
	/*--lwg-yellow: #FCEE1F;*/
	--bg1: rgba(3,165,80,0.1);

	--duration: 5s;
	--duration-double: 10s;
}

body{
	margin:0 auto;
	font-family: var(--font);
	font-size: var(--font-size);
	color: rgba(0,0,0,0.8);
	background: var(--white);
}
a{ color: var(--lwg-green); text-decoration: none; }
a:hover{ color: var(--lwg-red); }
img{ aspect-ratio: auto; }

/*--- Common ---*/
.container-v1{ max-width:1440px; }
.container-v2{ max-width:800px; }
.mt-6{ margin-top: 4rem; }
.mt-7{ margin-top: 5rem; }
.mt-8{ margin-top: 6rem; }
.mt-9{ margin-top: 7rem; }
.mt-10{ margin-top: 8rem; }
.w-65{ width: 65%; }
.shadow1{ box-shadow: 0px 5px 0px 0px rgba(0, 0, 0, 0.10); }
.fs-07{ font-size: 0.7rem; }
.fs-085{ font-size: 0.85rem; }
.fs-09{ font-size: 0.9rem; }
.fs-2xl{ font-size: 1.5rem; }
.fs-3xl{ font-size: 1.875rem; }
.fw-600{ font-weight: 600 !important; }
.opacity-75{ opacity: .75; }
.opacity-50{ opacity: .5; }
.opacity-25{ opacity:.25; }
.text-green-lwg{ color: var(--lwg-green); }
.text-green2-lwg{ color: var(--lwg-green2); }
.text-orange{ color:#E18C0E; }
.text-success{ color: var(--lwg-green2) !important; }
#header .text-success{ color: var(--lwg-green) !important; }
.border-green{	border: solid 5px var(--lwg-green-opacity30); }
.border-green.tiktok-embed{	background: var(--lwg-green-opacity30); }
.rounded{ border-radius: 15px !important; }
.rounded-small{ border-radius:5px; }
.rounded-top{
	border-top-left-radius: 15px !important;
	border-top-right-radius: 15px !important;
}
.card .rounded-top{ 
	border-top-left-radius:0.25rem !important; 
	border-top-right-radius: 0.25rem !important; 
}
.w-fit{ width: fit-content; }
.btn-success{ background-color: var(--lwg-green2); border-color: var(--lwg-green2); }
.btn-warning{ background-color: var(--lwg-yellow); border-color: var(--lwg-yellow); }
.btn-danger{ background-color: var(--lwg-red); border-color:var(--lwg-red); }
.accordion-button:not(.collapsed){ color: black; }
.accordion-button::after{
	background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2303A550'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>");
}
.accordion-button:not(.collapsed)::after{ 
	background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000000'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>");
}
.highlight-row .col .card{
	-webkit-transition: background 0.5s; /* For Safari 3.0 to 6.0 */
    transition: background 0.5s; /* For modern browsers */
}
.highlight-row .col:hover .card{
	background-color: var(--lwg-green-opacity20) !important;
}
.page-link{ color: var(--lwg-green); font-weight: 600; }
.page-item.active .page-link{
	background-color: var(--lwg-green);
	border-color: var(--lwg-green);
}
.breadcrumb{ font-weight: 600; }
/*--- Header ---*/
header{ background: var(--lwg-yellow) !important;  }/*lwg-green*/
header>.navbar{	padding: 1.2rem 1rem; }
#header{ 
	position: fixed;
	z-index: 999;
	padding: 0; /*0 0 26px 0*/ 
	width: 100%;
	transition: all .4s ease!important;
}
#header .menu ul .nav-item {
	font-weight: bold;
	margin-left: 18px;
	margin-right: 18px;
}
#header .menu ul .nav-item:first-child { margin-left: 0; }
#header .lang{
	background: transparent;
    border: solid 2px var(--lwg-green);
    font-size: 14px;
    font-weight: 600;
    color: var(--lwg-green);
    text-align: center;
    padding-top: 4px;
    padding-bottom: 4px;
}
body:not(.show-header) .web-header{ top: -178px; }

/*.navbar-dark .navbar-nav .active>.nav-link, .navbar-dark .navbar-nav .nav-link.active, .navbar-dark .navbar-nav .nav-link.show, .navbar-dark .navbar-nav .show>.nav-link{ color: var(--lwg-yellow); }
.navbar-dark .navbar-nav .nav-link{	color: rgba(255,255,255,1); font-weight: 600; }*/
.navbar-light .navbar-nav .nav-link{ color: var(--lwg-green); }
.navbar-light .navbar-nav .nav-item:focus .nav-link, .navbar-light .navbar-nav .nav-item:hover .nav-link, .navbar-light .navbar-nav .nav-link:focus, .navbar-light .navbar-nav .nav-link:hover{ color: var(--lwg-red); }
.navbar-light .navbar-nav .nav-item::after, .navbar-light .navbar-nav .nav-item::after{
	content: ' ';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0%;
    height: 3px;
    background: var(--lwg-red);
    transition: all 0.3s ease-in-out;
}
.navbar-light .navbar-nav .nav-item:focus::after, .navbar-light .navbar-nav .nav-item:hover::after{ width: 100%; }
.navbar-light .navbar-nav .nav-link.active, .navbar-light .navbar-nav .show>.nav-link {    color: var(--lwg-red);}
#logo{ width: 100%; max-width: 355px;}
.menu_mobile{ /*padding: 15px;*/ background: var(--lwg-yellow); }
.menu_mobile .menuleft .iconmenu {
    display: inline-block;
    vertical-align: bottom;
    text-transform: uppercase;
    color: var(--lwg-green);
}
.menu_mobile .menuleft .iconmenu span {
    text-align: left;
    display: block;
    width: 23px;
    height: 0.15rem;
    background: var(--lwg-green);
    margin-bottom: 6px;
    border-radius: 3px;
}
.menu_mobile .menuleft .iconmenu span:nth-child(2){ width: 12px; }
.menu_mobile #logo{ width:65%; }
.box_contentmenu_background {
    background-color: #000000c4;
    z-index: 4;
    top: 0;
    left: 0;
    position: fixed;
    overflow: hidden;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
}

.box_contentmenu_background.active { opacity: 1; visibility: visible; }
.box_contentmenu {
    height: 100%;
    width: 70%;
    top: 0;
    left: -320px;
    max-width: 100%;
    z-index: 5;
    position: fixed;
    opacity: 0;
    visibility: hidden;
    transition: all .3s ease;
    /*background-color: var(--lwg-yellow);*/
    background: rgb(254,239,60);
	background: linear-gradient(180deg, rgba(254,239,60,1) 29%, rgba(219,227,77,1) 50%, rgba(134,198,118,1) 100%);
}
.box_contentmenu.active {
    opacity: 1;
    visibility: visible;
    left: 0;
    transition: all .3s ease;
    z-index: 99999999;
}
.box_contentmenu_caption{ padding: 1rem 1.4rem; color: white; }
.box_contentmenu .nav-link{	color: var(--lwg-green); }
.box_contentmenu .dropdown-menu{ background: rgba(0,0,0,0.1) /*var(--lwg-green4)*/; }
.box_contentmenu.active .dropdown-menu.show{
    position: unset !important;
    inset: unset !important;
    margin: unset !important;
    transform: unset !important;
    border: none;
}
.box_contentmenu .dropdown-menu li .dropdown-item{ padding: 0.5rem 1rem 0.5rem 3rem /*0.75rem 2.5rem*/; white-space: normal; font-size: 14px;}
.navbar-expand-lg .navbar-nav .dropdown-menu {
    position: absolute;
    margin-top: 26px;
    background: rgba(var(--lwg-green2-rgb), 0.95);
    border: none;
    padding: 0;
    font-size: 14px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}
.navbar-expand-lg .navbar-nav .dropdown-menu li{ border-bottom: solid 1px rgba(0,0,0, 0.1); }
.dropdown-item{ padding: 0.75rem 1rem; font-weight: 600; color: white;}
.box_contentmenu .dropdown-item{ color: var(--lwg-green); }
.dropdown-item:focus, .dropdown-item:hover{ background-color: unset; color: var(--lwg-yellow); }
.dropdown-item.active, .dropdown-item:active{ background-color: transparent; color: var(--lwg-yellow); }
.fade.in{ opacity: 1; }

/*--- Top ---*/
#myBtn {
  display: none; /* Hidden by default */
  position: fixed; /* Fixed/sticky position */
  bottom: 20px; /* Place the button at the bottom of the page */
  right: 30px; /* Place the button 30px from the right */
  z-index: 99; /* Make sure it does not overlap */
  border: none; /* Remove borders */
  outline: none; /* Remove outline */
  background-color: rgba(var(--lwg-green-rgb), 0.9); /* Set a background color */
  color: white; /* Text color */
  cursor: pointer; /* Add a mouse pointer on hover */
  padding: 15px; /* Some padding */
  border-radius: 10px; /* Rounded corners */
}

#myBtn:hover {
  background-color: var(--lwg-green); /* Add a dark-grey background on hover */
}

/*--- Button ---*/
.btn{ 
	font-weight: 600; 
	font-size: unset;
}
.btn-light{	color: var(--lwg-green); }
.btn-light-green{ color: var(--lwg-green); background-color: var(--lwg-green-opacity20); }

/*--- Carousel ---*/
.carousel-item{ background: none; }
/*.carousel-control-next, .carousel-control-prev{	width: calc(15% + 2rem); }*/
.carousel-control-prev-icon, .carousel-control-next-icon{
	position: relative;
	width: 32px; height: 32px;
}
.carousel-control-prev-icon::after, .carousel-control-next-icon::after{
	content: ' ';
    position: absolute;
    z-index: -99;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    display: block;
    background: unset;
    padding: 1rem;
    margin-top: -0.5rem;
    margin-left: -0.5rem;
}
.carousel-control-prev-icon {
	background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='%23014e4e' viewBox='0 0 16 16'><path d='M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0m3.5 7.5a.5.5 0 0 1 0 1H5.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L5.707 7.5z'/></svg>");

}
.carousel-control-next-icon {
	background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='%23014e4e' viewBox='0 0 16 16'><path d='M8,0C3.6,0,0,3.6,0,8s3.6,8,8,8s8-3.6,8-8S12.4,0,8,0 M10.3,7.5L8.1,5.4C8,5.2,8,4.8,8.1,4.6s0.5-0.2,0.7,0l3,3c0,0,0,0,0,0 c0.2,0.2,0.2,0.5,0,0.7l-3,3c-0.2,0.2-0.5,0.2-0.7,0s-0.2-0.5,0-0.7l2.1-2.1H4.5C4.2,8.5,4,8.3,4,8c0-0.3,0.2-0.5,0.5-0.5H10.3z'/></svg>");
}
.carousel-indicators [data-bs-target]{
	border-top: unset;
	border-bottom: unset;
	border-radius: 5px;
	height: 10px;
}
.carousel-indicators button:not(.active){
	width: 10px;
	background: #000000;
}

/*--- BG1 ---*/
.bg-lwg-green{ background-color:var(--lwg-green); }
.bg-lwg-green-opacity10{ background-color: var(--lwg-green-opacity10); }
.bg-lwg-red-opacity10{ background-color: var(--lwg-red-opacity10); }
.bg-lwg-yellow-opacity10{ background-color: var(--lwg-yellow-opacity10); }
.bg1_fo{ 
    max-width: 100%;
	background: url('../img/bg-leaves.svg') no-repeat; 
	background-position: center bottom -50px;
	background-size: contain;
}
.bg2{
	background: #e6f6ee url('../img/bg-leaves.webp') center bottom no-repeat;
	background-size: contain;
}
.bg-success{
	background-color: var(--lwg-green);
}
.bg-success-opacity10{
	background-color: var(--lwg-green-opacity10);
}


/*--- Slogan ---*/
.slogan{
	padding: 15px 35px;
	font-size: 1.2rem;
	border-radius: 15px;
	background: var(--lwg-green);
	font-weight: bold;
	box-shadow: 0px 5px 0px 0px rgba(0, 0, 0, 0.10);
}
.slogan-icon{
	position: absolute;
    right: 0;
    bottom: -10PX;
    max-height: 130px;
}

/*--- Medium Banner (x2) ---*/
.medium-banner{
	display: grid;
	grid-template-columns: auto auto;
	column-gap: 3rem;
}

/*--- Brand List ---*/
.brand-list h2{
	color: #9FAFA7;
}

/*--- Title ---*/
h1.title, h2.title{
	font-weight: bold;
	display: flex;
	align-items: center;
	color: var(--lwg-green);
}
h1.title span:not(.d-none), h2.title span:not(.d-none){ position: relative; }
h1.title span:not(.d-none)::before, h2.title span:not(.d-none)::before{
	content: ' ';
	width: 70px;
	height: 6px;
	border-radius:10px;
	opacity: 0.8;
	background: #ADE4CC;
	position: absolute;
	bottom: -15px;
	left: 0;
}
h1.title span:not(.d-none)::after, h2.title span:not(.d-none)::after{
	content: ' ';
	width: 20px;
	height: 6px;
	border-radius:10px;
	opacity: 0.4;
	background: #ADE4CC;
	position: absolute;
	bottom: -15px;
	left: 80px;
}

.date_design{
	position: relative;
	color: #11914E;
	background: #ADE4CC;
	border-radius: 2rem;
}
.date_design::after{
	content: ' ';
	margin-left: 0.25rem;
	background: rgba(173,228,204,0.4);
	border-radius: 2rem;
	position: absolute;
	top: 0;
	width: 35px;
	height: 100%;
	margin-left: 1.5rem;
}

/*'--- Swiffy Slider ---*/
.slider-nav-dark .slider-nav{
	opacity: 0.5 !important;
	-webkit-filter: unset !important;
	filter: unset !important;
}
.slider-nav::before{
	width: 2rem !important;
	height: 2rem !important;
}
.slider-nav::after{
	-webkit-mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 16 16'><path d='M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0m3.5 7.5a.5.5 0 0 1 0 1H5.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L5.707 7.5z'/></svg>") !important;
	mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 16 16'><path d='M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0m3.5 7.5a.5.5 0 0 1 0 1H5.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L5.707 7.5z'/></svg>") !important;
	width: 2rem !important;
	height: 2rem !important;
}
.slider-nav-dark .slider-nav::after{
	background-color:#157347 !important;
}

/*--- Products ---*/
.prod{
	border-radius: 15px;
	margin-bottom: 10px;
	padding: 10px;
	border: solid 2px transparent;
	cursor: pointer;
	font-size: 0.85rem;
}
.prod:hover{
	border: solid 2px #eee;
}
.prod-img{ 
	position: relative; 
	margin-bottom: 10px;
}
.prod-disc{
    position: absolute; z-index: 99;
    background: var(--bs-warning);
    color: var(--bs-dark);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-weight: bold;
    font-size: 0.8rem;
    text-align: center;
    line-height: 40px;
}
.prod-title{
	text-transform: uppercase;
    font-weight: bold;
    height: 42px;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
}
.prod-price{
	color: var(--bs-danger);
	font-weight: bold;
}
.prod-ori-price{
	color: var(--bs-secondary);
	text-decoration: line-through;
	font-weight: bold;
}
.prod-note{
	font-weight: 600;
	font-size: 0.6rem;
	display: flex;
	flex-direction: column;
	align-items: end;
}
.prod-note-location{
	color: var(--lwg-green2-opacity90);
	margin-bottom: 2px;
}
.prod-note-period{
	color: white;
	background-color: var(--lwg-green2-opacity90);
    font-size: 0.6rem;
    font-weight: 600;
}

/*--- Community ---*/
.community{
	/*background: url(../img/bg_stars.svg) top 50px left 30% no-repeat;
    background-size: contain;
    padding-top: 10rem !important;*/
    position: relative;
}
.community::before{
	content: ' ';
	position: absolute;
	width: 100%;
	height: 100%;
	background: url(../img/bg_stars.webp) top center no-repeat;
    background-size: contain;
    top: -60px;
    z-index: -1;
}

/*--- tiktok---*/
.tiktok-embed iframe{
	height: 100%;
}
.tiktok-embed iframe div[data-testid="card-component"]{
	display: none;
}
.embed-block-provider-tiktok {
  padding-bottom: 130% !important;
}

/*--- News ---*/
.news-title{
	/*white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-decoration: underline;*/
}
.news-desc{
	font-weight: 600;
	font-size: 0.85rem;
}

/*--- Footer Ads ---*/
.footer-ads{
	background: var(--lwg-green);
	height: 300px;
}

/*--- Footer ---*/
footer{
	background: var(--lwg-yellow);
}
.footer-subtitle{
	font-size: 18px;
	font-weight: bold;
	color: var(--lwg-green);
}
footer a.py-1.fw-600:hover{
	color: var(--lwg-red);
	text-decoration: underline;
}
.copyright{ 
	background: var(--lwg-green);
	color: white;
	font-weight: 600;
}

/*--- Animation ---*/
.zoom, .zoom-out{
  transition: transform .2s; /* Animation */
}

.zoom:hover {
  transform: scale(1.1); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
}
.zoom-out:hover {
  transform: scale(0.9); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
}

@media (min-width: 1200px) { 
	/*--- Body ---*/
	body.show-header .web-header{ top: 0px; }

	/*--- main ---*/
	main{
		padding-top: 121px;
	}
}

@media screen and (max-width: 576px) {
	body.show-header .web-header{ top:0; }
	body.noscroll{
		height: 100vh;
		overflow-y: hidden;
	}
	main{ padding-top: unset; }
	.carousel-item{
		width: 100vw;
		/*height: 13vh;*/ /*35vh*/
		background-position: center center !important;
		background-size: cover !important;
	}
	/*.carousel-item-img{ display:none !important; }*/
	.carousel-indicators{ display: none; }
	/*#logo{ width: 75%; }*/
	.slogan{ text-align: center; padding: 0.5rem;}
	.slogan img{ height: 16px !important; }
	.footer-logo{ max-width: 200px; }
}