@charset "utf-8";

body { margin: 0; padding: 0; background: #f5f0e8; }

.for_pc {}
.for_phone, .for_m { display: none !important; }
@media screen and (max-width: 767px) {
  .for_pc { display: none !important; }
  .for_phone, .for_m { display: inherit !important; }
}

.WRAPPER {
  position: relative; margin: 0 auto; padding: 0;
  width: 100%; min-width: 1220px; overflow: hidden;
  font-family: "微軟正黑體","Microsoft JhengHei",Helvetica;
}
.WRAPPER img { border: 0; vertical-align: top; }
.WRAPPER a { text-decoration: none; display: inline-block; }
@media screen and (max-width: 767px) {
  .WRAPPER { width: 100%; min-width: 100%; background-repeat: repeat-y; background-size: 100%; }
}
ul { margin: 0; padding: 0; }
li { list-style: none; }
.danji_box ul li .activityText p { color: #272727 !important; }
.clickable-button { transition: transform 0.2s, filter 0.2s; }
.clickable-button.clicked { transform: scale(0.9); filter: brightness(0.7); }

@media screen and (min-width: 767px) {
  .bg_01 {
    z-index: -2; position: absolute; top: 0px; left: 50%; transform: translateX(-50%);
    width: 2000px; height: 12880px; background-repeat: repeat-y;
    background-position: center top; pointer-events: none; background-size: contain;
  }
}

.momologo { position: absolute; top: 15px; left: 20px; z-index: 999; }
.momologo svg { fill: #EA27C2; width: 136px; height: 21px; }
@media screen and (max-width: 767px) {
  .momologo { width: 25%; top: 2.5vw; left: 4vw; }
}

.Area_top { position: relative;height:1080px; }
.Area_top .toppd { width: 100%; display: block; }
.Area_top .toppd img { width: 100%; display: block; }
.Area_top .contral.toplogo {
  position: absolute; top: 40px; left: 50%; transform: translateX(-50%);
  width: 1220px; display: flex; align-items: center; justify-content: center;
  z-index: 99; padding-top: 14px; filter: brightness(.3);
}
.Area_top .contral a { margin: 0 10px; }
.Area_top .contral img { width: 110px; height: auto; }
@media screen and (max-width: 767px) {
  .Area_top { height: 93vw; }
  .Area_top .toppd { position: absolute; top: 0; left: 0; width: 100%; }
  .Area_top .contral.toplogo { width: 100%;        padding-top: 0;        top: 3vw;    } 
  .Area_top .contral a { margin: 1vw; }
  .Area_top .contral img { width: 12.5vw; }
}

.Area_title { position: relative; text-align: center; margin: 40px auto 20px; z-index: 2; }
.Area_title img { display: inline-block; max-width: 100%; }
@media screen and (max-width: 767px) {
  .Area_title { margin: 6vw auto 4vw; }
  .Area_title img { width: 90%; }
}

.Area02 { position: relative; padding: 0 0 40px; }
.Area02 .top_wrap {
display: flex; justify-content: center; gap: 15px; max-width: 960px; margin: 0px auto 0px; padding: 0px 20px;
}
.top_badge{margin-bottom: 10px;}
.Area02 .top_item { flex: 1; text-align: center; }
.Area02 .top_item img.top_badge { width: 120px; display: block; margin: 0 auto 10px; }
.Area02 .top_item .PD_layout ul { border-radius: 10px;     padding: 0px;}
.Area02 .top_item .PD_layout .PD_slide { background: #fff; }

.Area02 .Area_swiper { position: relative; margin:-48px auto 0; max-width: 1020px; }
.Area02 .Area_swiper_box { padding-bottom: 30px; }
.Area02_6col li { background-color: #fff !important;}
@media screen and (max-width: 767px) {
  .Area02 { padding: 0 ; }
  .Area02 .top_item .PD_layout ul { border-radius: 10px;     padding: 0px;}
  .Area02 .top_wrap { gap: 0.5vw; padding: 1vw; margin-bottom: 10vw; }
  .Area02 .top_item img.top_badge { width: 20vw; }
  .Area02 .Area_swiper_box{padding: 0;}
  .Area02 .money{ font-size: 24px;}
}

.Area03 { position: relative; padding: 0 0 40px; }
.Area03 ul{display: flex; justify-content: center; flex-wrap: wrap;}
.Area03 .PD_layout .PD_slide {  overflow: hidden;     width: 560px;    min-width: auto;margin-top:20px;}
.Area03 .PD_layout .PD_img { padding: 0px; }
.Area03 .PD_layout .PD_img img { width: 95%; display: block; margin-left: 1vw;}



@media screen and (max-width: 767px) {
  .Area03 .PD_layout .PD_slide {  overflow: hidden;     width: 50vw;    min-width: auto;margin-top: 3vw;}
  .Area03 { padding: 0 0 6vw; }
  .Area03 .PD_layout .PD_into { padding: 3vw; }
  .Area03 .PD_layout .PD p .Price { font-size: 24px; }
  .Area_swiper_box .PD_layout { margin: 3vw 0; }
}

.Area04 { position: relative; padding: 0 0 40px; }
.Area04 .Area_swiper { max-width: 1020px; margin: 0 auto; }
.Area04 .Area_swiper_box { padding-bottom:0; }
.Area04 .PD_layout .PD_slide { border-radius: 10px; }
.Area04 .PD_into{display: none;}

@media screen and (max-width: 767px) { .Area04 { padding: 0 0 6vw; } }

.Area05 { position: relative; padding: 0 0 40px; }
.Area05 .contral {
  display: flex; justify-content: center; gap: 20px;
  max-width: 960px; margin: 0 auto 30px; padding: 0 20px;
}
.Area05 .contral li img { width: 186px; height: auto; display: block; transition: transform 0.2s; }
.Area05 .contral li:hover img { transform: translateY(-5px); }

@media screen and (max-width: 767px) {
  .Area05 { padding: 0 0 6vw; }
  .Area05 .contral1 { gap: 3vw; flex-wrap: wrap; justify-content: center; margin-bottom: 4vw; display: flex;margin-left: -12vw; }
  .Area05 .contral2 { gap: 3vw; flex-wrap: wrap; justify-content: center; margin-bottom: 4vw; display: flex;margin-left: 14vw; margin-top:-8vw ; }
  .Area05 .contral1 li img ,.Area05 .contral2 li img { width: 25vw; }
}

.Area_hot { position: relative; padding: 63px 0 70px; margin-bottom: 20px; }
.Area_hot .layout_bg { position: absolute; top: 0; left: 50%; transform: translateX(-50%); z-index: -1; pointer-events: none; }
.Area_hot .layout_bg img { display: block; }
.Area_hot .PD_layout .PD_slide { background-color: #fff; border-radius: 0; }
.Area_hot .PD_layout[data-pd-h3="5"] .PD h3 span { color: #3d6b35; background-color: #d8eac8; }
.Area_hot .PD_layout .PD_into { padding: 1rem; }
.Area_hot .PD_layout .PD p { color: #3d6b35; }
.Area_hot .PD_layout .PD p .Price { font-size: 22px; }
.Area_hot .Area_swiper_box .PD_layout li{width:375px }
.Area_hot .Area_swiper_box .PD_layout{margin-top: 36px;}
.Area_hot .swiper-pagination { position: relative; margin-top: 20px; }
@media screen and (min-width: 768px) { .Area_hot .PD_layout ul { gap: 10px; } }
@media screen and (max-width: 767px) {
  .Area_hot { padding: 5vw 0 0; margin-bottom: 0; }
  .Area_hot .layout_bg { top: 0; left: 50%; transform: translateX(-50%); width: 100%; }
  .Area_hot .Area_swiper { width: 100%; }
  .Area_hot .PD_wrapper { width: 100%; }
  .Area_hot .Area_swiper_box .PD_layout{        margin: 6vw 2vw 6vw}
  .Area_hot .PD_slide { flex-grow: 1; }
  .Area_hot .PD_layout ul { gap: 5px; }
  .Area_hot .swiper-pagination { margin: -6vw 0 5vw; }
}

.swiper-pagination-bullet { margin: 0 3px; background: #3d6b35; opacity: 0.4; }
.swiper-pagination-bullet-active { opacity: 1; background: #3d6b35; }
.swiper-button-next, .swiper-button-prev { color: #3d6b35; }

.Area_danji_wrap { position: relative; margin: 0 auto 60px; max-width: 960px; }
.Area_danji_wrap .warningTxt { text-align: center; padding: 10px 0 0; }
.Area_danji_wrap .warningTxt h3 { color: #999; font-size: 12px; font-weight: 400; }
.Area_danji .danji_box ul li .activityImg img { object-fit: contain; }
.Area_danji .danji_box ul li .activityText .gifts span { font-weight: bold; color: #3d6b35; }
@media screen and (max-width: 767px) { .Area_danji_wrap { margin-bottom: 5vw; } }

.Area_logo { margin: 0 auto 80px; padding: 0 20px; }
.Area_logo .logo_wrap { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: 1220px; margin: 0 auto; }
.Area_logo .logo_item img { width: 100%; height: auto; display: block; transition: transform 0.3s; }
.Area_logo .logo_item:hover img { transform: translateY(-6px); }
@media screen and (max-width: 767px) {
  .Area_logo { margin: 5vw auto 15vw; padding: 0; }
  .Area_logo .logo_wrap { gap: 3vw; }
}