/* === index ==================================== */
.home_greenBox { display: grid; gap: 20px; grid-template-columns: 1fr 150px; }
.home_greenBox .left_box .note_box { display: flex; gap: 10px; align-items: center; justify-content: space-between; }
.home_greenBox .left_box h2, .home_greenBox .left_box h4 { color: #fff; }
.home_greenBox .left_box h2 { margin-bottom: 40px; }
.home_greenBox .left_box h4 { line-height: 1.3em; }
.home_greenBox .left_box h5 { white-space:nowrap; }
.home_greenBox .right_box { text-align: center; }

.Footer_Container ul { margin-bottom: 30px; display: grid; grid-template-columns: 1fr 1fr; align-items: center; }
.Footer_Container li:nth-child(5) { grid-column-start: 1; grid-column-end: 3; grid-row-start: 3; grid-row-end: 4;  }
.Footer_Container li { margin-bottom: 0.5rem; }
.Footer_Container li a, .Footer_Container li span { display: inline-flex; align-items: center; }
.Footer_Container img { width: 25px; margin-right: .5rem; }
.Footer_Container .icon_1 { width: 20px; text-align: center; }
.Footer_Container .icon_2 { width: 17px; text-align: center; }
.Footer_Container .icon_3 { width: 22px; text-align: center; }
.Footer_Container .icon_4 { width: 25px; text-align: center; }
.Footer_Container .icon_5 { width: 22px; text-align: center; }

@media only screen and (max-width: 767px) {
  .Footer_Container ul { grid-template-columns: 1fr; }
  .Footer_Container li:nth-child(5) { grid-column-start: 1; grid-column-end: 2; grid-row-start: 5; grid-row-end: 6; }
}

/* === page ==================================== */
.page_imgBox { height: 400px; max-height: 400px; margin-top: 0px; margin-bottom: 0px; position: relative; overflow: hidden; }
.page_imgBox .text { width: 430px; padding: 1rem; top: 50%; left: 2rem; position: absolute; background-color: rgba(0, 0, 0, 0.7); transform: translateY(-50%);  }
.page_imgBox .text h3 { color: #fff; font-size: 1.875rem; }
.page_imgBox .text p { margin-bottom: 0.5rem; color: #fff; font-size: 1.25rem; line-height: 1.7rem; }
.page_imgBox img { width: 100%; height: 100%; }

@media only screen and (min-width: 768px) and (max-width: 1239px) {
  .page_imgBox { height: 700px; max-height: 700px; }
  .page_imgBox .text { top: 20%; transform: translateY(0%); }
  .page_imgBox img { height: 100% !important; object-fit: cover; }
}
@media only screen and (max-width: 767px) {
  .page_imgBox { height: 590px; max-height: 590px; }
  .page_imgBox .text { width: 80%; top: 20%; transform: translateY(0%); }
  .page_imgBox img { height: 100% !important; object-fit: cover; }
}

.page_Content { }
.imgBottom { height: 140px; margin: 140px auto 40px; overflow: hidden; }
.imgBottom img { width: 100%; }
@media only screen and (max-width: 767px) {
  .imgBottom { height: auto; margin: 40px auto 40px; }
}

.page_Content h2 { margin: 40px 0; color: #0FBE7C; font-size: 2rem; }
.page_Content h3 { margin-bottom: 30px; color: #666; font-size: 1.75rem; }

/* === 廢報紙出售 recycle-paper ==================================== */
.recyclePaper {  }
.recyclePaper .box_1, .recyclePaper .box_2 { position: relative; }
.recyclePaper .box_1 { margin-bottom: 180px; }
.recyclePaper .box_1 .recycleImg { border-top: #0FBE7C 7px solid; border-left: #0FBE7C 7px solid; }
.recyclePaper .box_1 .text { width: 490px; padding: 2rem; bottom: -40px; right: 0; position: absolute; background-color: rgba(255, 255, 255, .8); box-shadow: 0px 4px 4px rgba(0, 0, 0, 25%); }
.recyclePaper .box_1 .text h4 { color: #444; font-size: 1.5rem; }
.recyclePaper .box_1 .text h4 span { font-size: 1rem; }

.recyclePaper .box_2 .recycleImg { float: right; border-bottom: #0FBE7C 7px solid; border-right: #0FBE7C 7px solid; }
.recyclePaper .box_2 .text { width: 490px; padding: 2rem; top: -40px; left: 0; position: absolute; background-color: rgba(255, 255, 255, .8); box-shadow: 0px 4px 4px rgba(0, 0, 0, 25%); }
.recyclePaper .box_2 .text h4 { color: #444; font-size: 1.5rem; }
.recyclePaper .box_2 .text h4 span { font-size: 1rem; }

.recyclePaper .box_1 .ulList { width: 48%; display: inline-block; vertical-align: top; }
.recyclePaper .box_2 .ulList { width: 100%; }
.recyclePaper .ulList ul { padding-left: 25px; }
.recyclePaper .ulList ul li { color: #666; list-style-type: disc; }
.recyclePaper .ulList p { color: #8A6C58; }

.recycleImg { width: 790px; height: 360px; overflow: hidden; }
.recycleImg img { width: 100%; height: 100%; object-fit: cover; }

@media only screen and (min-width: 768px) and (max-width: 1239px) {
  .recyclePaper .box_1 { margin-bottom: 80px; }
  .recyclePaper .box_1, .recyclePaper .box_2 { position: static; }
  .recyclePaper .box_1 .text, .recyclePaper .box_2 .text { width: 100%; position: static; box-sizing: border-box; }
  .recyclePaper .box_1 .recycleImg img, .recyclePaper .box_2 .recycleImg img { font-size: 0; vertical-align: top; }
  .recyclePaper .box_1 .recycleImg, .recyclePaper .box_2 .recycleImg { height: 500px; float: none; border-top: #0FBE7C 7px solid; border-left: none; border-bottom: none; border-right: none; }
  .recycleImg { width: 100%; height: auto; overflow: hidden; }
}

@media only screen and (max-width: 767px) {
  .recyclePaper .box_1 { margin-bottom: 40px; }
  .recyclePaper .box_1 .text h4 span { margin-top: 1rem; display: block; }
  .recyclePaper .box_1 .ulList { width: 100%; margin-bottom: 1rem; display: block; }
  .recyclePaper .box_1, .recyclePaper .box_2 { position: static; }
  .recyclePaper .box_1 .text, .recyclePaper .box_2 .text { width: 100%; position: static; box-sizing: border-box; }
  .recyclePaper .recycleImg { width: 100%; height: auto; }
  .recyclePaper .box_1 .recycleImg img, .recyclePaper .box_2 .recycleImg img { font-size: 0; vertical-align: top; }
  .recyclePaper .box_1 .recycleImg, .recyclePaper .box_2 .recycleImg { float: none; border-top: #0FBE7C 7px solid; border-left: none; border-bottom: none; border-right: none; }
}

/* === 社區型精準行銷 local-marketing ==================================== */
.localMarketing {}

.localMarketing .ImgBox_1 { width: 100%; margin: 40px 0; display: grid; gap: 60px; grid-template-columns: 1fr .6fr; align-items: center; justify-items: center; overflow: hidden; }
.localMarketing .ImgBox_2 { width: 100%; margin: 40px 0; display: grid; gap: 60px; grid-template-columns: .6fr 1fr ; align-items: center; justify-items: center; overflow: hidden; }
.localMarketing img { width: 100%; object-fit: cover; object-position: center; }
.localMarketing .I1, .localMarketing .I4 { border-left: #0FBE7C 7px solid; }
.localMarketing h4 { margin: 80px 0; line-height: 1.5em; color: #666; }
@media only screen and (min-width: 768px) and (max-width: 1239px) {
  .localMarketing .ImgBox_1,  .localMarketing .ImgBox_2 { gap: 40px; grid-template-columns: 1fr 1fr; }
}
@media only screen and (max-width: 767px) {
  .localMarketing .ImgBox_1,  .localMarketing .ImgBox_2 { gap: 40px; grid-template-columns: 1fr; }
  .localMarketing .I2, .localMarketing .I3 { display: none; }
  .localMarketing h4 { margin: 40px 0; }
}

/* === 社區小幫手服務 helper ==================================== */

.helper { position: relative; display: grid; align-items: center; justify-items: center; background-color: #fff; box-sizing: border-box; }
.helper img { width: 100%; border-top: #0FBE7C 7px solid; }
.helper .text { width: 430px; padding: 2rem; bottom: 2rem; right: 2rem; position: absolute; background-color: rgba(255, 255, 255, 0.8); }
.helper .text h4 { line-height: 1.5em; color: #666; }

@media only screen and (min-width: 768px) and (max-width: 1239px) {
  .helper .text { width: 100%; position: static; }
}
@media only screen and (max-width: 767px) {
  .helper .text { width: 100%; position: static; }
}

/* === 好物團購 groupbuy ==================================== */

.groupbuy .ImgBox_1, .groupbuy .ImgBox_2 { display: grid; gap: 40px; grid-template-columns: repeat(3, 1fr); }
.groupbuy img { border-bottom: #0FBE7C 7px solid; }
.groupbuy h4 { margin: 80px 0; line-height: 1.5em; color: #666; }

@media only screen and (min-width: 768px) and (max-width: 1239px) {
  .groupbuy .ImgBox_1, .groupbuy .ImgBox_2 { grid-template-columns: repeat(2, 1fr); }
  .groupbuy .I3, .groupbuy .I6 { display: none; }
}
@media only screen and (max-width: 767px) {
  .groupbuy .ImgBox_1, .groupbuy .ImgBox_2 { grid-template-columns: repeat(1, 1fr); }
  .groupbuy .I2, .groupbuy .I3, .groupbuy .I5, .groupbuy .I6  { display: none; }
  .groupbuy h4 { margin: 40px 0; }
}