@charset "utf-8";
/* CSS Document */

* {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

/* Google Icon Fonts */
@font-face {
   font-family: 'Material Icons';
   font-style: normal;
   font-weight: 400;
   src: url(https://fonts.gstatic.com/s/materialicons/v125/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format('woff2');
   font-display: fallback !important;
}

.material-icons {
   font-family: 'Material Icons';
   font-weight: normal;
   font-style: normal;
   font-size: 24px;
   line-height: 1;
   letter-spacing: normal;
   text-transform: none;
   display: inline-block;
   white-space: nowrap;
   word-wrap: normal;
   direction: ltr;
   -webkit-font-feature-settings: 'liga';
   -webkit-font-smoothing: antialiased;
   vertical-align: text-bottom;
}

/*整體設定*/

body {
   margin: 0;
   padding: 0;
   font-size: 17px;
   background: #acc1a7 url("https://www.walei.tw/page/card_page/images/2023/bg.png");
   font-family: Helvetica, Arial, sans-serif;
   line-height: 1.8;
   letter-spacing: 0.5px;
}

.bg {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: rgba(255, 255, 255, 0.8);
   z-index: 0;
}

.container {
   position: relative;
   width: 96%;
   max-width: 1140px;
   margin: 0 auto;
   z-index: 1;
}

.container:after {
   content: "";
   display: block;
   clear: both;
}

.main {
   background: #ffffff;
   text-align: justify;
   margin-top: 30px;
   box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
   border-radius: 20px;
   overflow: hidden;
}

.header {
   width: 100%;
   height: 0;
   padding-bottom: 30%;
   background: #e6edd4 url(https://www.walei.tw/page/card_page/images/2023/header.png) center center no-repeat;
   background-size: auto 100%;
}

.gap {
   background: #e5edd5;
   height: 50px;
}

.note_header {
   width: 100%;
   height: 0;
   padding-bottom: 30%;
   background: #ffe192 url(https://www.walei.tw/page/card_page/images/2023/header-note.png) center center no-repeat;
   background-size: auto 100%;
}

.gap2 {
   background: #ffe192;
   height: 50px;
}

.cont {
   padding: 20px 8%;
}

.text {
   margin: 20px 0 0 0;
   font-size: 17px;
}

.text p {
   margin: 0 0 20px 0;
}

.cont .img_group {
   margin: 0 auto 30px auto;
   width: 100%;
   text-align: center;
}

.cont .img_group a {
   width: 30%;
   margin: 1%;
   display: inline-block;
   color: #333333;
   text-decoration: none;
}

.cont .img_group img {
   width: 100%;
   display: inline-block;
   -webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
   box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
}

.title {
   padding-bottom: 10px;
   font-size: 21px;
   font-weight: bold;
   color: #8a4700;
   text-align: center;
}

.title span {
   font-size: 13px;
   font-weight: initial;
   color: #333333;
}

.botton {
   display: block;
   margin: 5px auto;
   width: 320px;
   max-width: 100%;
   height: 60px;
   line-height: 56px;
   text-align: center;
   text-decoration: none;
   background: #7c9230;
   color: #fdfcf5;
   font-size: 21px;
   font-weight: bold;
   text-shadow: 1px 1px 3px #43580c;
   border-radius: 30px;
   box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.1), inset 0 -3px 0 rgba(0, 0, 0, 0.5);
}

.botton:hover {
   background: #b1be5b;
   box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.1), inset 0 -2px 0 rgba(0, 0, 0, 0.5);
}

.botton2 {
   display: block;
   margin: 5px auto;
   width: 320px;
   max-width: 100%;
   height: 60px;
   line-height: 56px;
   text-align: center;
   text-decoration: none;
   background: #efa500;
   color: #fdfcf5;
   font-size: 21px;
   font-weight: bold;
   text-shadow: 1px 1px 3px #9d6d00;
   border-radius: 30px;
   box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.1), inset 0 -3px 0 rgba(0, 0, 0, 0.5);
}

.botton2:hover {
   background: #f1b42b;
   box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.1), inset 0 -2px 0 rgba(0, 0, 0, 0.5);
}

h3 {
   color: #7a923a;
}

.footer {
   position: relative;
   width: 100%;
   text-align: center;
   background: #333333;
   color: #fdfcf5;
   padding: 10px 0;
   line-height: 25px;
   font-size: 13px;
   margin-top: 50px;
   z-index: 1;
}

.footer a {
   color: #cccccc;
   text-decoration: none;
}

.footer a:hover {
   color: #fdfcf5;
   text-decoration: underline;
}

@media screen and (max-width: 768px) {

   .header,
   .note_header {
      padding-bottom: 40%;
   }

   .cont {
      padding: 20px 6%;
   }

   .cont .img_group a {
      width: 46%;
   }

}

@media screen and (max-width: 640px) {

   .header,
   .note_header {
      padding-bottom: 60%;
   }

   .cont {
      padding: 20px 5%;
   }

   .cont .img_group a {
      width: 98%;
   }
}