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

* {margin:0px; padding:0px;}

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

/* font-family: 'Noto Sans TC', sans-serif; */

@font-face {
    font-family: 'SweiMarkerSansCJKtc-Bold';
    src: url(https://cdn.jsdelivr.net/gh/max32002/swei-marker-sans@2.0/WebFont/CJK%20TC/SweiMarkerSansCJKtc-Bold.woff2) format("woff2")
    , url(https://cdn.jsdelivr.net/gh/max32002/swei-marker-sans@2.0/WebFont/CJK%20TC/SweiMarkerSansCJKtc-Bold.woff) format("woff");
}

body, html {position:relative; width:100%; font-size:16px; font-family:'Noto Sans TC','微軟正黑體','Microsoft Jhenghei',sans-serif; font-weight:400; color:black; overflow-x:clip; background:white; background-size:cover; scroll-behavior:smooth;}
a, input, button {text-decoration:none; outline:none !important;}
a:hover, a:focus, a:active, a:visited {text-decoration:none; cursor:pointer !important; outline:none !important;}
ul, li {list-style:none;}

/* ---------- loading ---------- */
#loading {position: fixed; background: #e1e4db; top: 0; left: 0; right: 0; bottom: 0;z-index: 1000;}
#loading .centerbox {position: absolute; top: 50%; left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 90%; max-width: 400px;
}
#loading .loader {display: block; width: 48px; height: 48px;
  border: 5px solid #3c7e30;
  border-bottom-color: transparent;
  border-radius: 50%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-animation: rotation 1.5s linear infinite;
          animation: rotation 1.5s linear infinite;
  margin: 0 auto 15px;
}
#loading .loading_text {font-family: 'Almarai', sans-serif; font-size: 18px; color: #3c7e30; text-align: center; margin-bottom: 15px;}
#loading .loading_text::after {content: "...";
  -webkit-animation: load_dot 1s alternate linear infinite;
          animation: load_dot 1s alternate linear infinite;
}
#loading .loading_bar {height: 5px; background: #e1e4db; border-radius: 10px; overflow: hidden;}
#loading .loading_bar .progress {background: #3c7e30; width: 1%; height: 5px; -webkit-transition: all 1s; transition: all 1s;}
  
@-webkit-keyframes rotation {
  0% {
    -webkit-transform: rotate(0deg); transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg); transform: rotate(360deg);
  }
}
@keyframes rotation {
  0% {
    -webkit-transform: rotate(0deg); transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg); transform: rotate(360deg);
  }
}
@-webkit-keyframes load_dot {
  0% {content: ".";}
  50% {content: "..";}
  100% {content: "...";}
}
@keyframes load_dot {
  0% {content: ".";}
  50% {content: "..";}
  100% {content: "...";}
}

#kv {display:block; width:100vw; position:relative;}
#kv img {display:block; width:100%; height:auto;}
#kv img.wave {position:relative; margin-top:-12vw; z-index:1;}
#kv img.setting {position:relative; z-index:1; display:block; margin:-6vw auto -100px auto; width:40%; max-width:450px; height:auto;}

section {position:relative; display:block; width:90%; max-width:1200px; margin:120px auto;}

.sec_title {display:flex; justify-content:center; align-items:flex-end;}
.sec_title img {margin:0px 3px;}
.sec_title p {font-size:40px; color:#3c7e30; font-family:'SweiMarkerSansCJKtc-Bold';}

.sec_text {display:block; width:80%; max-width:800px; margin:40px auto; position:relative;}
.sec_text p {font-size:18px; line-height:30px; margin:10px 0px; color:#474747;}
.sec_text p.ind_for {text-indent:-5em; margin-left:5em;}
.sec_text p.ind_tre {text-indent:-4em; margin-left:4em;}

.concept .sec_text p {text-align:center;}
.info .sec_text {display:flex; justify-content:center;}

.card_con {margin:100px auto 40px auto; position:relative; display:flex; flex-wrap:nowrap; justify-content:center; align-items:stretch;}

.card {width:24%; margin:0px 0.5%; background:#f1f1f1; border-radius:15px; position:relative; box-sizing:border-box; padding:20px 20px 30px 20px;}
.card .spec {display:block; width:80%; max-width:135px; height:auto; position:relative; margin:-35% auto auto auto;}
.card .spec img {width:100%; height:auto;}
.card .spec p {font-family:'SweiMarkerSansCJKtc-Bold'; font-size:30px; color:white; z-index:1; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);}

.card .card_title {font-size:22px; line-height:28px; color:#3c7e30; font-weight:600; text-align:center;}
.card .card_title.t2 {line-height:56px;}

.card .gr_line {display:block; width:100%; height:2px; background:#3c7e30; margin:15px auto;}

.card .card_info {font-size:17px; line-height:24px; color:#474747; text-align:justify;}

.gift {display:flex; flex-wrap:nowrap; justify-content:center; align-items:center; position:relative; z-index:2;}

.gift .left {position:relative; width:50%; flex:1; margin-right:30px;}

.gift .gift_slide {width:100%;}
.gift .gift_slide img {width:100%; height:auto;}
.gift .gift_slide .slick-dots {bottom:-35px;}
.gift .gift_slide .slick-dots li button:before {font-size:12px;}

.gift .right {flex:1;}
.gift .right .sec_title {justify-content:flex-start;}
.gift .right .sec_text {width:100%; margin:40px 0px;}

.down {margin-top:-150px; position:relative; z-index:1; background:#a3c59e; background-image:url(../images/dn_logo.png), url(../images/dn_bg.jpg); background-size:20%, contain; background-position:right bottom, top; background-repeat:no-repeat, no-repeat;}
.down .fake {display:block; width:100%; height:auto;}

.down section {display:flex; flex-wrap:nowrap; justify-content:center; align-items:center; position:relative; margin:0px auto;}

.down section .left {position:relative; width:50%; flex:1; margin-right:30px;}
.down section .left img {width:100%; height:auto;}

.down section .right {flex:1;}
.down section .right .sec_title p {color:#215719;}
.down section .right .sub {font-size:34px; font-family:'SweiMarkerSansCJKtc-Bold'; color:white; text-align:center; margin-top:20px;}
.down section .right .sec_text {width:100%; margin:40px auto;}
.down section .right .sec_text p {color:white;}
.down section .right .sec_text a {color:#3c7e30;}
.down section .right .sec_text p.copy {font-size:14px; line-height:20px;}

img.home_a {position:absolute; top:-5vw; left:-10vw; width:20vw; max-width:320px;}
img.home_b {position:absolute; top:-10vw; right:-10vw; width:18vw; max-width:300px;}
img.home_c {position:absolute; top:5vw; left:5vw; width:10vw; max-width:160px;}
img.home_d {position:absolute; top:-2vw; right:-4vw; width:20vw; max-width:340px;}
img.leaf_a {position:absolute; top:-5vw; right:-8vw; width:7vw; max-width:110px;}
img.leaf_b {position:absolute; top:5vw; left:-12vw; width:8vw; max-width:130px;}
img.leaf_c {position:absolute; top:0vw; right:6vw; width:6vw; max-width:110px; z-index:1;}
img.leaf_d {position:absolute; top:6vw; right:15vw; width:8vw; max-width:130px; z-index:1;}


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

    #kv img.setting {width:45%; margin:-6vw auto auto auto;}

    section {margin:50px auto;}

    .sec_title img {width:30px;}
    .sec_title p {font-size:30px;}
    .sec_text {width:90%; margin:20px auto;}
    .sec_text p {font-size:16px; line-height:24px; text-align:justify;}

    .card_con {flex-wrap:wrap; margin:60px auto 40px auto;}
    .card {width:90%; margin:20px auto 40px auto;}
    .card .spec {max-width:100px; margin:-70px auto auto auto;}
    .card .spec p {font-size:24px;}
    .card .card_title {font-size:20px;}
    .card .card_title.t2 {line-height:28px;}
    .card .card_info {font-size:15px;}

    .gift {display:block;}
    .gift .left {width:90%; margin:0px auto 30px auto;}
    .gift .right {width:90%; margin:60px auto;}
    .gift .right .sec_title {justify-content:center;}
    .gift .right .sec_text {margin:20px auto;}
    .gift .gift_slide img {display:block;}

    .sec_text p.ind_for,.sec_text p.ind_tre {text-indent:0em; margin-left:0em;}

    .down {margin-top:-50px;}
    .down section {display:block; padding-bottom:50px;}
    .down section .left {width:90%; margin-left:auto; margin-right:auto;}
    .down section .right {width:90%; margin:30px auto 0px auto;}
    .down section .right .sub {font-size:26px;}
    .down section .right .sec_text {margin:20px auto 0px auto;}
    .down section .right .sec_text p.copy {font-size:12px; line-height:18px;}

    img.home_b {top:-15vw; right:-1vw;}
    img.home_c {top:5vw; left:-4vw;}
    img.home_d {top:-6vw; right:-8vw;}
    img.leaf_a {top:10vw; right:0px; width:10vw;}
    img.leaf_b {top:-12vw; left:-4vw; width:12vw;}
    

}