@charset "UTF-8";
html {
  font-family: "Noto Sans TC", "Roboto", "微軟正黑體", "Helvetica", "黑體-繁", "Heiti TC", sans-serif;
  color: #000; }

/* colors */
h1 {
  font-size: 2.188rem;
  font-weight: 900; }
  h1 span {
    display: inline-block; }

h2 {
  font-size: 1.625rem;
  font-weight: 400; }

h3 {
  font-size: 1.375rem;
  font-weight: 700;
  color: #db3116; }

p {
  line-height: 1.875rem; }

@media (max-width: 991px) {
  h1 {
    font-size: 1.875rem; } }
@media (max-width: 767px) {
  h1 {
    font-size: 1.625rem; }

  h2 {
    font-size: 1.125rem; } }
.cpT {
  width: 256px; }
  @media (max-width: 991px) {
    .cpT {
      width: 210px; } }
  @media (max-width: 767px) {
    .cpT {
      width: 180px; } }

/* bootstrap alter */
.navbar {
  background: url("../images/nav-bkg.jpg") no-repeat;
  background-size: cover;
  padding: 1.125rem 1.5rem 0.8rem;
  font-size: 1.063rem; }

.navbar-dark .navbar-nav {
  margin: 0rem 1.1rem; }
  .navbar-dark .navbar-nav .nav-link {
    color: white;
    padding-right: 0.875rem;
    padding-left: 0.875rem; }
.navbar-dark .shop {
  position: absolute;
  right: 1.250rem;
  top: 1.65rem;
  display: block;
  color: #ffeb6e;
  text-decoration: none; }
  .navbar-dark .shop img {
    width: 1.875rem;
    margin-left: 3px; }

.card {
  border-radius: 0;
  border: 0;
  margin-bottom: 10px; }
  .card .card-header {
    border-radius: 0;
    color: #fff06f;
    font-size: 1.250rem;
    font-weight: 700;
    background-color: #8a5725; }
  .card .card-body {
    padding: 30px 35px 20px;
    background-color: #fffadd; }
    .card .card-body h4 {
      font-size: 1.250rem;
      font-weight: 700;
      color: #de7d00; }
    .card .card-body h5 {
      font-size: 0.938rem;
      font-weight: 700;
      color: #de7d00; }
    .card .card-body p {
      font-size: 0.875rem;
      text-align: left;
      line-height: 1.250rem;
      margin-top: 5px; }

/* */
#header {
  width: 100%;
  position: relative;
  overflow: hidden;
  margin-top: 4.4rem; }
  #header #headerL {
    position: relative; }
    #header #headerL .header-deco {
      width: 100%;
      position: absolute;
      top: 0; }
    @media (max-width: 991px) {
      #header #headerL {
        width: 130%;
        margin-left: -15%; } }
    @media (max-width: 767px) {
      #header #headerL {
        width: 200%;
        margin-left: -47%; } }

#title {
  z-index: 100;
  margin-top: -3rem;
  padding-top: 6rem;
  text-align: center; }

.btn-shopL {
  color: #fff;
  border-radius: 1.2rem;
  background: url("../images/btn-bkg.jpg");
  padding: 0.375rem 1rem;
  border: 0; 
cursor: pointer;
}
  .btn-shopL img {
    width: 1.813rem;
    margin-left: 3px; }

.price-fix-L {
  font-size: 1.125rem;
  margin-right: 0.750rem; }

.price-sale-L {
  font-size: 1.375rem;
  margin-right: 1.25rem; }
  .price-sale-L strong {
    color: #c60000;
    font-family: "Roboto";
    font-size: 1.750rem; }

.btn-shop {
  margin-top: 5px;
  font-size: 0.813rem;
  color: #fff;
  border-radius: 1.2rem;
  background: #d14000;
  padding: 0.27rem 0.8rem;
  border: 0;
cursor: pointer;
}
  .btn-shop img {
    width: 1rem;
    margin-left: 2px; }

.price-fix {
  font-size: 0.875rem;
  margin-right: 0.650rem; }

.price-sale {
  font-size: 0.875rem;
  font-weight: 700;
  margin-right: 1.25rem; }
  .price-sale strong {
    color: #c60000;
    font-family: "Roboto";
    font-size: 1.125rem; }

#page01-A {
  z-index: -1;
  margin-top: -4rem;
  background: url("../images/p1bkg-confetti.png") left;
  padding-top: 11rem; }
  #page01-A .a-text {
    position: relative;
    background: rgba(246, 255, 226, 0.9); }
  #page01-A img {
    position: absolute;
    left: 0;
    bottom: 0; }
  #page01-A p {
    padding: 2.2rem; }
  @media (max-width: 991px) {
    #page01-A {
      padding-top: 18rem; }
      #page01-A img {
        width: 50%;
        left: 50%;
        transform: translate(-50%, 0); } }
  @media (max-width: 767px) {
    #page01-A {
      padding-top: 13rem; }
      #page01-A p {
        padding: 10px; } }

#page01-B {
  position: relative;
  background: url("../images/p1bkg-sun.jpg") bottom right no-repeat;
  background-size: contain;
  padding: 2rem; }
  #page01-B .leaf img {
    position: absolute;
    right: 0;
    top: 0;
    width: 50%; }
  #page01-B .B-text {
    padding: 4rem 2rem 1rem; }
  @media (max-width: 991px) {
    #page01-B .leaf img {
      width: 65%;
      margin-top: -5%; }
    #page01-B .B-text {
      padding: 6rem 1.2rem 1rem; } }
  @media (max-width: 767px) {
    #page01-B {
      padding: 1.2rem 0; } }

#page01-C {
  position: relative;
  background: url("../images/p1bkg-soil.jpg") no-repeat;
  background-size: cover;
  padding: 60px 0; }
  #page01-C .quote {
    padding-top: 20px;
    color: #fff799;
    width: 60%;
    margin: 0 auto; }
    #page01-C .quote span {
      display: block;
      text-align: right; }

#page02-A {
  position: relative; }
  #page02-A .p2deco {
    position: absolute;
    z-index: -5; }
  #page02-A .deco03 {
    width: 200px;
    bottom: 0%;
    left: 4%; }
  #page02-A .intro {
    padding: 60px 20px 170px 20px; }
  #page02-A .org {
    width: 25%;
    left: 0;
    top: 3rem;
    margin-top: -3rem; }
  #page02-A .melon {
    width: 18%;
    right: 0;
    top: 0;
    margin-top: -6rem;
    text-align: right; }
  @media (min-width: 992px) {
    #page02-A .deco03 {
      left: 6%;
      width: 17%;
      bottom: 15%; }
    #page02-A .intro {
      padding: 60px 20px 60px 50px; } }
  @media (max-width: 767px) {
    #page02-A .org {
      top: 4rem; }
    #page02-A .melon {
      margin-top: -2.5rem; } }

#page02-B .carousel-trial {
  padding: 0 40px 0; }

.owl-theme .owl-nav [class*='owl-']:hover {
  background: rgba(0, 0, 0, 0.7);
  color: #FFF;
  text-decoration: none; }

#page02-C {
  background: url("../images/p2bkg-set.jpg") no-repeat;
  background-size: cover;
  padding: 3.125rem 0; }
  #page02-C .card-body {
    min-height: 270px; }

#page03-A {
  padding-top: 2rem; }
  #page03-A .p3-intro {
    padding: 1rem; }

#page03-B {
  background: url("../images/p3bkg-green.jpg");
  padding: 3.125rem 0;
  margin-top: -1.72rem; }

.p4-p {
  margin: 1.5rem 11.250rem 0; }
  @media (max-width: 767px) {
    .p4-p {
      margin: 1.5rem 1.2rem 0; } }

#page04-A .bagset {
  padding: 0 25px 30px;
  background: url("../images/p4bkg-purple.jpg") no-repeat 0px 115px; }
  #page04-A .bagset .setinfo {
    margin: 1.5rem 3.5rem 0; }
    #page04-A .bagset .setinfo h2 {
      font-size: 1.563rem;
      color: #ffd800;
      font-weight: 700; }
    @media (max-width: 767px) {
      #page04-A .bagset .setinfo {
        margin: 1.5rem 0 0; } }
#page04-A .setItems {
  padding: 115px 0 0 35px; }
#page04-A .setT {
  margin: 0;
  color: #de7d00;
  font-weight: 700;
  line-height: 1.25rem; }
#page04-A .setP {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.5rem; }
@media (max-width: 767px) {
  #page04-A .setItems {
    padding: 35px 20px 0; } }

#page04-B {
  background: url("../images/p4bkg-yellow.jpg");
  padding: 3.125rem 0;
  margin-top: 2rem; }

#page05-A {
  margin-top: 1rem;
  position: relative; }
  #page05-A .setinfo {
    margin: 4rem 0 10rem; }
    #page05-A .setinfo h2 {
      font-size: 1.563rem;
      color: #de4900;
      font-weight: 700; }
    #page05-A .setinfo .p-green {
      line-height: 1.563rem;
      font-weight: 700;
      color: #359601; }
    #page05-A .setinfo .p-s {
      font-size: 0.875rem;
      line-height: 1.250rem; }
    @media (max-width: 767px) {
      #page05-A .setinfo {
        margin: 1.5rem 1.3rem 10rem; } }
  #page05-A span img {
    width: 80%;
    position: absolute;
    right: 0;
    bottom: 0; }

#page05-B {
  background: url("../images/p5bkg-blue.jpg");
  padding: 3.125rem 0; }

#page03-B .card, #page04-B .card, #page05-B .card {
  border-top: 11px solid #6f3e17;
  text-align: center; }
  #page03-B .card .card-body, #page04-B .card .card-body, #page05-B .card .card-body {
    min-height: 160px;
    padding: 25px 18px 20px; }
  #page03-B .card .price-fix, #page03-B .card .pric-sale, #page04-B .card .price-fix, #page04-B .card .pric-sale, #page05-B .card .price-fix, #page05-B .card .pric-sale {
    font-size: 0.875rem; }
  #page03-B .card button, #page04-B .card button, #page05-B .card button {
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translate(-50%, 0); }

footer{
 clear: both;
 width: 100%;
 overflow: hidden;
 background-color: #efefef;
}
footer h5{
	padding-top:10px;
	font-size: 1em;
	font-weight: 400;
	color: #333;
	text-align: center;
	line-height: 2em;
	width: 100%;
}
footer h5 a:link{
	color: #333;
	text-decoration:none;
}
footer h5 a:visited{
	color: #333;
	text-decoration:none;
}
footer h5 a::hover{
	color: #333;
	text-decoration:none;	
}

footer h5 img{
	padding-top:10px;
}