@import url("//fonts.googleapis.com/earlyaccess/notosanstc.css");
html{font-family:'Noto Sans TC', 'Microsoft JhengHei', sans-serif}html *{-webkit-box-sizing:border-box;box-sizing:border-box;letter-spacing:0.1em}a{color:#222;text-decoration:none}#preload{visibility:hidden}header{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;position:relative;padding:15px 30px;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;position:fixed;z-index:9;background-color:#fff;top:0px;left:0px;width:100%;-webkit-box-shadow:0px 2px 5px rgba(129,129,129,0.3);box-shadow:0px 2px 5px rgba(129,129,129,0.3)}@media screen and (max-width:1279px){header{display:block;padding:15px 30px 10px 30px;height:auto}}@media screen and (max-width:1023px){header.active .facade{visibility:visible;opacity:1}header.active .links{-webkit-transform:translateX(0px);-ms-transform:translateX(0px);transform:translateX(0px)}header.active .icon-links{-webkit-transform:translateX(0px);-ms-transform:translateX(0px);transform:translateX(0px)}}@media screen and (max-width:1444px){header .logo{width:calc(100% - 950px);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center}}@media screen and (max-width:1279px){header .logo{width:auto;display:block}}@media screen and (max-width:1444px){header .logo img{width:100%;height:auto}}@media screen and (max-width:1279px){header .logo img{width:auto;height:40px}}header .sandwich{width:60px;height:60px;background-image:url("../img/sandwich.svg");position:absolute;right:5px;top:5px;background-size:cover;visibility:hidden;cursor:pointer;-webkit-transition:all 100ms cubic-bezier(0.68, 0, 0.265, 1);-o-transition:all 100ms cubic-bezier(0.68, 0, 0.265, 1);transition:all 100ms cubic-bezier(0.68, 0, 0.265, 1)}header .sandwich.active,header .sandwich:hover{background-image:url("../img/sandwich-active.svg")}@media screen and (max-width:1023px){header .sandwich{visibility:visible}}@media screen and (max-width:500px){header .sandwich{right:7px}}header .facade{background-color:rgba(0,0,0,0.5);position:fixed;left:0px;top:65px;height:calc(100% - 65px);width:100%;visibility:hidden;opacity:0;-webkit-transition:all 200ms cubic-bezier(0.68, 0, 0.265, 1);-o-transition:all 200ms cubic-bezier(0.68, 0, 0.265, 1);transition:all 200ms cubic-bezier(0.68, 0, 0.265, 1)}header .links{-webkit-align-self:flex-end;-ms-flex-item-align:end;align-self:flex-end;margin-right:-20px;text-align:right}@media screen and (max-width:1279px){header .links{margin-top:15px}}@media screen and (max-width:1023px){header .links{position:fixed;right:0px;top:66px;width:280px;z-index:10;background-color:#fff;margin-top:0px;-webkit-box-shadow:0px 2px 5px rgba(129,129,129,0.3);box-shadow:0px 2px 5px rgba(129,129,129,0.3);padding:15px 30px 15px 30px;-webkit-transition:all 200ms cubic-bezier(0.68, 0, 0.265, 1);-o-transition:all 200ms cubic-bezier(0.68, 0, 0.265, 1);transition:all 200ms cubic-bezier(0.68, 0, 0.265, 1);-webkit-transform:translateX(280px);-ms-transform:translateX(280px);transform:translateX(280px);text-align:left}}header .links a{padding:0px 19px 0px 20px;background-repeat:no-repeat;background-position-y:4px;background-size:18px 18px;-webkit-transition:all 100ms cubic-bezier(0.68, 0, 0.265, 1);-o-transition:all 100ms cubic-bezier(0.68, 0, 0.265, 1);transition:all 100ms cubic-bezier(0.68, 0, 0.265, 1)}@media screen and (max-width:1023px){header .links a{display:block;height:55px;line-height:55px;background-position-y:11px;padding:0px 19px 0px 25px;margin-left:15px;font-size:20px;background-size:24px;background-position-y:16px;padding-left:30px}}header .links a.active,header .links a:hover{color:#f39800}header .links a:first-of-type{background-image:url("../img/link1.svg")}header .links a:first-of-type.active,header .links a:first-of-type:hover{background-image:url("../img/link1-active.svg")}
            header .links a:nth-of-type(2){background-image:url("../img/link5.svg")} /*20200609調整標題前方圖片*/
            header .links a:nth-of-type(2).active,header .links a:nth-of-type(2):hover{background-image:url("../img/link5-active.svg")}
            header .links a:nth-of-type(3){background-image:url("../img/link3.svg")}
            header .links a:nth-of-type(3).active,header .links a:nth-of-type(3):hover{background-image:url("../img/link3-active.svg")}
            header .links a:nth-of-type(4){background-image:url("../img/link4.svg")}
            header .links a:nth-of-type(4).active,header .links a:nth-of-type(4):hover{background-image:url("../img/link4-active.svg")}
            header .links a:nth-of-type(5){background-image:url("../img/link5.svg")}
            header .links a:nth-of-type(5).active,header .links a:nth-of-type(5):hover{background-image:url("../img/link5-active.svg")}
            header .links a:nth-of-type(6){background-image:url("../img/link6.svg")}
            header .links a:nth-of-type(6).active,header .links a:nth-of-type(6):hover{background-image:url("../img/link6-active.svg")}
            header .links a:nth-of-type(7){background-image:url("../img/link7.svg")}
            header .links a:nth-of-type(7).active,header .links a:nth-of-type(7):hover{background-image:url("../img/link7-active.svg")}
header .links a:nth-of-type(8) {
    background-image: url("../img/link2.svg")
}

header .links a:nth-of-type(8).active, header .links a:nth-of-type(8):hover {
    background-image: url("../img/link2-active.svg")
}
header .links a.icon{padding:0px;margin-right:5px;margin-top:-15px}@media screen and (max-width:1023px){header .links a.icon{padding:0px;display:inline-block;margin-top:10px}}header .links a.icon.shop img{margin-right:15px}header .links a.icon img{width:40px;height:40px;margin-left:10px;margin-top:10px}footer{background-color:#009fa8;padding:60px 30px;font-weight:100;font-size:14px}footer *{color:#fff}@media screen and (max-width:500px){footer{padding:30px 15px}}footer .center-wrap{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center}@media screen and (max-width:1023px){footer .center-wrap{-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap}}footer .center-wrap .left-wrap{border-right:1px dotted #fff;padding-right:10px}@media screen and (max-width:1023px){footer .center-wrap .left-wrap{border:none;padding:0px;padding-bottom:15px;border-bottom:1px dotted #fff}}footer .center-wrap .left-wrap .top-wrap{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}@media screen and (max-width:767px){footer .center-wrap .left-wrap .top-wrap{-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center}}footer .center-wrap .left-wrap .top-wrap .logo-wrap{margin-right:15px}@media screen and (max-width:767px){footer .center-wrap .left-wrap .top-wrap .logo-wrap{margin-bottom:20px}}footer .center-wrap .left-wrap .top-wrap .icon-links{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}footer .center-wrap .left-wrap .top-wrap .icon-links a{border:1px solid #fff;border-radius:5px;text-align:center;margin:0px 5px;-webkit-transition:all 100ms cubic-bezier(0.68, 0, 0.265, 1);-o-transition:all 100ms cubic-bezier(0.68, 0, 0.265, 1);transition:all 100ms cubic-bezier(0.68, 0, 0.265, 1);width:80px;height:56px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center}footer .center-wrap .left-wrap .top-wrap .icon-links a:hover{border-color:#f39800;background-color:#f39800}footer .center-wrap .left-wrap .top-wrap .icon-links a .icon{width:50px;height:20px;-webkit-transition:all 100ms cubic-bezier(0.68, 0, 0.265, 1);-o-transition:all 100ms cubic-bezier(0.68, 0, 0.265, 1);transition:all 100ms cubic-bezier(0.68, 0, 0.265, 1);display:inline-block;margin:0px;padding:0px;background-size:20px 20px;background-repeat:no-repeat}footer .center-wrap .left-wrap .top-wrap .icon-links a .text{-webkit-transition:all 100ms cubic-bezier(0.68, 0, 0.265, 1);-o-transition:all 100ms cubic-bezier(0.68, 0, 0.265, 1);transition:all 100ms cubic-bezier(0.68, 0, 0.265, 1)}footer .center-wrap .left-wrap .top-wrap .icon-links a:first-of-type .icon{background-image:url("../img/map.svg")}footer .center-wrap .left-wrap .top-wrap .icon-links a:nth-of-type(2) .icon{background-image:url("../img/contact.svg")}footer .center-wrap .left-wrap .top-wrap .icon-links a:nth-of-type(3) .icon{background-image:url("../img/bank.svg")}footer .center-wrap .left-wrap .bottom-wrap{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin-top:15px;-webkit-box-pack:end;-webkit-justify-content:flex-end;-ms-flex-pack:end;justify-content:flex-end}@media screen and (max-width:1023px){footer .center-wrap .left-wrap .bottom-wrap{-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center}}@media screen and (max-width:767px){footer .center-wrap .left-wrap .bottom-wrap{display:block;margin-top:0px}}@media screen and (max-width:596px){footer .center-wrap .left-wrap .bottom-wrap{margin-top:15px}}footer .center-wrap .left-wrap .bottom-wrap .item{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin:0px 10px}@media screen and (max-width:767px){footer .center-wrap .left-wrap .bottom-wrap .item{-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;line-height:25px}}footer .center-wrap .left-wrap .bottom-wrap .item img{margin-right:5px}footer .center-wrap .right-wrap{padding-left:15px;line-height:20px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;font-size:12px}@media screen and (max-width:1023px){footer .center-wrap .right-wrap{text-align:center;margin-top:15px;padding-left:0px}}.page{max-width:1600px;margin:0px auto;padding:141px 30px 30px 30px}@media screen and (max-width:1444px){.page{padding:132px 30px 30px 30px}}@media screen and (max-width:1023px){.page{padding:95px 15px 30px 15px}}@media screen and (max-width:767px){#index .rslides{margin:-30px 0px 0px -15px;width:calc(100% + 30px)}}#index .rslides img{width:100%;border-radius:10px}@media screen and (max-width:767px){#index .rslides img{border-radius:0px}}#index .products{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin:0px -30px 15px -30px}@media screen and (max-width:1279px){#index .products{-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap}}@media screen and (max-width:767px){#index .products{margin:0px -15px 15px -15px}}#index .products a{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;padding:15px;-webkit-transition:all 100ms cubic-bezier(0.68, 0, 0.265, 1);-o-transition:all 100ms cubic-bezier(0.68, 0, 0.265, 1);transition:all 100ms cubic-bezier(0.68, 0, 0.265, 1)}#index .products a:hover{color:#f39800}#index .products a:hover img{-webkit-transform:scale(1.02);-ms-transform:scale(1.02);transform:scale(1.02)}@media screen and (max-width:1279px){#index .products a{width:25%;max-width:25%}}@media screen and (max-width:1023px){#index .products a{width:33.33%;max-width:33.33%}}@media screen and (max-width:640px){#index .products a{width:50%;max-width:50%;padding:0px 15px}}#index .products a img{width:100%;-webkit-transition:all 100ms cubic-bezier(0.68, 0, 0.265, 1);-o-transition:all 100ms cubic-bezier(0.68, 0, 0.265, 1);transition:all 100ms cubic-bezier(0.68, 0, 0.265, 1)}#index .products a .product-name{font-size:18px;text-align:center}@media screen and (max-width:339px){#index .products a .product-name{font-size:16px}}#popup{position:fixed;top:0px;left:0px;width:100%;height:100%;background-color:rgba(0,0,0,0.5);z-index:12;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;visibility:hidden;opacity:0;-webkit-transition:all 300ms cubic-bezier(0.68, 0, 0.265, 1);-o-transition:all 300ms cubic-bezier(0.68, 0, 0.265, 1);transition:all 300ms cubic-bezier(0.68, 0, 0.265, 1);overflow:auto;padding:50px}@media screen and (max-width:1023px){#popup{-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start}}@media screen and (max-width:599px){#popup{padding:30px 15px}}@media screen and (max-width:375px){#popup{padding:15px}}#popup.active{visibility:visible;opacity:1}#popup .center{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center}@media screen and (max-width:1023px){#popup .center{display:block;width:480px;margin:0px auto}}@media screen and (max-width:599px){#popup .center{width:320px}}@media screen and (max-width:349px){#popup .center{width:290px}}#popup .center .left{width:420px;background-image:url("../img/ph.jpg");background-size:cover;background-position:center;background-repeat:no-repeat}@media screen and (max-width:1023px){#popup .center .left{height:300px;width:100%}}@media screen and (max-width:599px){#popup .center .left{height:200px}}@media screen and (max-width:414px){#popup .center .left{height:140px}}@media screen and (max-width:374px){#popup .center .left{height:120px}}#popup .center .right{width:480px;padding:50px;background-color:#fdf5ea;position:relative}@media screen and (max-width:599px){#popup .center .right{width:100%;padding:30px;padding-bottom:70px}}@media screen and (max-width:599px){#popup .center .right{padding:15px;padding-bottom:70px}}@media screen and (max-width:374px){#popup .center .right{padding-bottom:50px;font-size:14px;line-height:20px}}#popup .center .right *{color:#5d3a00}#popup .center .right .flex{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}#popup .center .right .flex .text{font-weight:500;margin-right:10px}#popup .center .right .flex .line-wrap{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1}#popup .center .right .flex .line-wrap .line{border-top:1px solid #5d3a00;margin-top:12px}#popup .center .right .end{margin-bottom:30px;line-height:24px;margin-top:5px}@media screen and (max-width:599px){#popup .center .right .end{margin-bottom:15px}}@media screen and (max-width:374px){#popup .center .right .end{line-height:20px}}#popup .center .right .image-flex{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between}#popup .center .right .image-flex .left-image{max-width:50%}#popup .center .right .image-flex .right-image{margin-top:50px;max-width:50%}@media screen and (max-width:599px){#popup .center .right .image-flex .right-image{margin-top:0px}}#popup .center .right .image-flex img{max-width:100%}@media screen and (max-width:414px){#popup .center .right .image-flex img{height:100px}}#popup .center .right .close{position:absolute;width:100%;height:60px;line-height:60px;background-color:#009fa8;bottom:0px;left:0px;font-size:24px;font-weight:300;text-align:center;cursor:pointer;-webkit-transition:all 100ms cubic-bezier(0.68, 0, 0.265, 1);-o-transition:all 100ms cubic-bezier(0.68, 0, 0.265, 1);transition:all 100ms cubic-bezier(0.68, 0, 0.265, 1)}@media screen and (max-width:374px){#popup .center .right .close{height:50px;line-height:50px}}#popup .center .right .close:hover span{color:#f39800;background-image:url("../img/close-active.svg")}#popup .center .right .close span{color:#fff;-webkit-transition:all 100ms cubic-bezier(0.68, 0, 0.265, 1);-o-transition:all 100ms cubic-bezier(0.68, 0, 0.265, 1);transition:all 100ms cubic-bezier(0.68, 0, 0.265, 1);background-image:url("../img/close.svg");background-repeat:no-repeat;padding-left:30px;background-position:0px 8px}#product .page{max-width:1400px}#product section{max-width:100%;overflow-x:hidden}#product section .title{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;margin:30px -30px 50px 0px}@media screen and (max-width:499px){#product section .title{margin:5px -30px 25px 0px}}#product section .title .wrap{font-size:36px;letter-spacing:0.8em;position:relative;color:#009fa8}@media screen and (max-width:499px){#product section .title .wrap{font-size:28px}}#product section .title .wrap .line{width:50px;border-top:2px solid #009fa8;position:absolute;top:25px}@media screen and (max-width:499px){#product section .title .wrap .line{width:30px}}#product section .title .wrap .left{left:-80px}@media screen and (max-width:499px){#product section .title .wrap .left{left:-60px}}#product section .title .wrap .right{right:-50px}@media screen and (max-width:499px){#product section .title .wrap .right{right:-30px}}#product section.product .flex-wrap{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin:0px -50px}@media screen and (max-width:1365px){#product section.product .flex-wrap{margin:0px -15px}}@media screen and (max-width:1023px){#product section.product .flex-wrap{display:block}}#product section.product .flex-wrap .left{margin:0px 50px;min-width:550px}@media screen and (max-width:1365px){#product section.product .flex-wrap .left{margin:0px 15px}}@media screen and (max-width:1023px){#product section.product .flex-wrap .left{text-align:center;min-width:0px}}#product section.product .flex-wrap .left img{border-radius:10px;width:100%;max-width:550px}#product section.product .flex-wrap .right{margin:0px 50px;-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1}@media screen and (max-width:1365px){#product section.product .flex-wrap .right{margin:0px 15px}}@media screen and (max-width:1023px){#product section.product .flex-wrap .right{margin-top:30px}}#product section.product .flex-wrap .right .product-name{font-size:28px;line-height:60px;font-weight:500}#product section.product .flex-wrap .right .row{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;padding:15px 0px;border-top:1px solid #bdbdbd}#product section.product .flex-wrap .right .row:last-of-type{border-bottom:1px solid #bdbdbd}#product section.product .flex-wrap .right .row .heading{min-width:120px}@media screen and (max-width:499px){#product section.product .flex-wrap .right .row .heading{min-width:90px}}#product section.product .flex-wrap .right .row .content{color:#4f4f4f}#product section.trace .heading{font-size:28px;font-weight:500;letter-spacing:0.4em;border-bottom:3px solid #222;line-height:50px;margin-top:50px;margin-bottom:30px}@media screen and (max-width:344px){#product section.trace .heading{font-size:24px}}#product section.trace .text{line-height:30px}#product section.trace img{border-radius:10px;margin-top:30px;width:100%}#product section.other-products{background-color:#f2f2f2;margin-top:50px;padding:30px 0px 60px 0px}@media screen and (max-width:499px){#product section.other-products{margin-top:30px}}#product section.other-products .center-wrap{margin:0px auto;max-width:1400px;padding:0px 30px}@media screen and (max-width:767px){#product section.other-products .center-wrap{padding:0px 15px}}#product section.other-products .flex-wrap{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin:0px -30px}@media screen and (max-width:1279px){#product section.other-products .flex-wrap{margin:0px -15px}}@media screen and (max-width:1023px){#product section.other-products .flex-wrap{-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap}}#product section.other-products .flex-wrap a{padding:0px 30px;width:25%;-webkit-transition:all;-o-transition:all;transition:all;-webkit-transition:all 100ms cubic-bezier(0.68, 0, 0.265, 1);-o-transition:all 100ms cubic-bezier(0.68, 0, 0.265, 1);transition:all 100ms cubic-bezier(0.68, 0, 0.265, 1)}#product section.other-products .flex-wrap a:hover{color:#f39800}#product section.other-products .flex-wrap a:hover img{-webkit-transform:scale(1.02);-ms-transform:scale(1.02);transform:scale(1.02)}@media screen and (max-width:1279px){#product section.other-products .flex-wrap a{padding:0px 15px}}@media screen and (max-width:1023px){#product section.other-products .flex-wrap a{width:33.33%;padding:15px}}@media screen and (max-width:599px){#product section.other-products .flex-wrap a{width:50%}}#product section.other-products .flex-wrap a img{width:100%;border-radius:10px;-webkit-transition:all 100ms cubic-bezier(0.68, 0, 0.265, 1);-o-transition:all 100ms cubic-bezier(0.68, 0, 0.265, 1);transition:all 100ms cubic-bezier(0.68, 0, 0.265, 1);max-width:100%}#product section.other-products .flex-wrap a .name{font-size:18px;text-align:center;margin-top:15px}@media screen and (max-width:339px){#product section.other-products .flex-wrap a .name{font-size:16px}}#village .flex{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin:0px -15px}@media screen and (max-width:1023px){#village .flex{-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center}}#village .flex .video{position:relative;cursor:pointer;margin:15px}@media screen and (max-width:767px){#village .flex .video{margin-top:0px}}@media screen and (max-width:1023px){#village .flex .video video{width:100%}}#village .flex .video .play{position:absolute;top:0px;left:0px;width:100%;height:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;background-color:rbga(#000, 50%);visibility:hidden;opacity:0;-webkit-transition:all 100ms cubic-bezier(0.68, 0, 0.265, 1);-o-transition:all 100ms cubic-bezier(0.68, 0, 0.265, 1);transition:all 100ms cubic-bezier(0.68, 0, 0.265, 1)}#village .flex .video .play.active{visibility:visible;opacity:1}#village .flex .video .play:hover .image{background-image:url("../img/play-active.svg")}#village .flex .video .play .image{width:100%;height:100px;background-image:url("../img/play.svg");background-size:100px;background-position:center;background-repeat:no-repeat;-webkit-transition:all 100ms cubic-bezier(0.68, 0, 0.265, 1);-o-transition:all 100ms cubic-bezier(0.68, 0, 0.265, 1);transition:all 100ms cubic-bezier(0.68, 0, 0.265, 1)}@media screen and (max-width:599px){#village .flex .video .play .image{background-size:80px}}@media screen and (max-width:474px){#village .flex .video .play .image{background-size:60px}}#village .flex .video .play .i-wrap{position:absolute;top:80px;left:30px;width:200px}@media screen and (max-width:599px){#village .flex .video .play .i-wrap{width:150px;top:40px}}@media screen and (max-width:474px){#village .flex .video .play .i-wrap{width:100px;top:30px}}@media screen and (max-width:349px){#village .flex .video .play .i-wrap{left:15px;top:15px}}#village .flex .video .play .i-wrap img{width:100%}#village .flex .image-wrap{height:360px;margin:15px;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;background-image:url("../img/v1.jpg");background-size:cover;background-position:center}@media screen and (max-width:1023px){#village .flex .image-wrap{display:none}}#village .image-with-overlay{margin:15px 0px;height:560px;background-image:url("../img/v2.jpg");background-size:cover;background-position:center;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:end;-webkit-justify-content:flex-end;-ms-flex-pack:end;justify-content:flex-end}@media screen and (max-width:1023px){#village .image-with-overlay{height:400px}}@media screen and (max-width:767px){#village .image-with-overlay{margin-top:0px;height:345px}}@media screen and (max-width:499px){#village .image-with-overlay{height:260px}}#village .image-with-overlay .overlay{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;padding:50px;background-color:rgba(255,255,255,0.5);font-size:20px}@media screen and (max-width:767px){#village .image-with-overlay .overlay{padding:30px}}@media screen and (max-width:499px){#village .image-with-overlay .overlay{font-size:16px}}#village .image-with-overlay2{margin:30px 0px;position:relative;height:560px;background-image:url("../img/v3.jpg");background-size:cover;background-position:center;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:end;-webkit-justify-content:flex-end;-ms-flex-pack:end;justify-content:flex-end}@media screen and (max-width:1023px){#village .image-with-overlay2{height:400px}}@media screen and (max-width:767px){#village .image-with-overlay2{margin:0px;height:345px}}@media screen and (max-width:499px){#village .image-with-overlay2{height:260px}}#village .image-with-overlay2 img{width:100%}#village .image-with-overlay2 .overlay{position:absolute;left:0px;top:0px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;width:100%;height:100%;text-align:center;background-image:url("../img/v4.png");background-size:500px 200px;background-repeat:no-repeat;background-position:center;-webkit-transition:all 100ms cubic-bezier(0.68, 0, 0.265, 1);-o-transition:all 100ms cubic-bezier(0.68, 0, 0.265, 1);transition:all 100ms cubic-bezier(0.68, 0, 0.265, 1)}#village .image-with-overlay2 .overlay:hover{background-image:url("../img/v4-active.png")}@media screen and (max-width:767px){#village .image-with-overlay2 .overlay{background-size:300px 120px}}@media screen and (max-width:499px){#village .image-with-overlay2 .overlay{background-size:250px 100px}}#wetland .page{max-width:1280px}#wetland .video{position:relative;cursor:pointer;margin:15px 0px}@media screen and (max-width:767px){#wetland .video{margin-top:0px}}#wetland .video video{width:100%}#wetland .video .play{position:absolute;top:0px;left:0px;width:100%;height:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;background-color:rbga(#000, 50%);visibility:hidden;opacity:0;-webkit-transition:all 100ms cubic-bezier(0.68, 0, 0.265, 1);-o-transition:all 100ms cubic-bezier(0.68, 0, 0.265, 1);transition:all 100ms cubic-bezier(0.68, 0, 0.265, 1)}#wetland .video .play.active{visibility:visible;opacity:1}#wetland .video .play:hover .image{background-image:url("../img/play-active.svg")}#wetland .video .play .image{width:100%;height:100px;background-image:url("../img/play.svg");background-size:100px;background-position:center;background-repeat:no-repeat;-webkit-transition:all 100ms cubic-bezier(0.68, 0, 0.265, 1);-o-transition:all 100ms cubic-bezier(0.68, 0, 0.265, 1);transition:all 100ms cubic-bezier(0.68, 0, 0.265, 1)}@media screen and (max-width:599px){#wetland .video .play .image{background-size:80px}}@media screen and (max-width:474px){#wetland .video .play .image{background-size:60px}}#wetland .video .play .i-wrap{position:absolute;top:150px;left:50px;width:300px}@media screen and (max-width:1023px){#wetland .video .play .i-wrap{top:100px}}@media screen and (max-width:767px){#wetland .video .play .i-wrap{top:50px;width:200px}}@media screen and (max-width:599px){#wetland .video .play .i-wrap{top:25px;left:25px}}@media screen and (max-width:374px){#wetland .video .play .i-wrap{top:25px;left:25px;width:150px}}#wetland .video .play .i-wrap img{width:100%}#wetland .flex-box{margin:30px 0px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}@media screen and (max-width:899px){#wetland .flex-box{display:block}}@media screen and (max-width:767px){#wetland .flex-box{margin:0px;margin-bottom:15px}}#wetland .flex-box .image-box{min-width:50%}@media screen and (max-width:899px){#wetland .flex-box .image-box{min-width:100%;width:100%}}#wetland .flex-box .image-box img{width:100%}#wetland .flex-box .overlay{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;padding:50px;font-size:24px;line-height:40px;background-image:url("../img/w3.jpg");-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;width:50%;min-width:50%}
    @media screen and (max-width:899px){#wetland .flex-box .overlay {
        font-size: 16px; /*20200519修正縮小時字形也跟著縮小*/
        height: 350px;
        width: 100%;
        min-width: 100%
    }}@media screen and (max-width:767px){#wetland .flex-box .overlay{padding:30px}}@media screen and (max-width:499px){
    #wetland .flex-box .overlay {
        font-size: 16px;
        height: 300px
    }}@media screen and (max-width:413px){#wetland .flex-box .overlay{font-size:16px;line-height:24px;height:250px}}#wetland img.image{width:100%;margin-bottom:15px}@media screen and (max-width:767px){#wetland img.image{margin-bottom:0px}}#wetland .flex-box2{margin:30px 0px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}@media screen and (max-width:899px){#wetland .flex-box2{display:block}}@media screen and (max-width:767px){#wetland .flex-box2{margin:15px 0px}}#wetland .flex-box2:hover .overlay{background-image:url("../img/w6-active.png")}#wetland .flex-box2 .image-box{width:50%}@media screen and (max-width:899px){#wetland .flex-box2 .image-box{width:100%}}#wetland .flex-box2 .image-box img{width:100%}#wetland .flex-box2 .overlay{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;width:50%;background-image:url("../img/w6.png");background-size:cover;-webkit-transition:all 100ms cubic-bezier(0.68, 0, 0.265, 1);-o-transition:all 100ms cubic-bezier(0.68, 0, 0.265, 1);transition:all 100ms cubic-bezier(0.68, 0, 0.265, 1);background-position:center}@media screen and (max-width:899px){#wetland .flex-box2 .overlay{width:100%;height:500px}}@media screen and (max-width:767px){#wetland .flex-box2 .overlay{height:400px}}@media screen and (max-width:414px){#wetland .flex-box2 .overlay{height:300px}}@media screen and (max-width:375px){#wetland .flex-box2 .overlay{height:250px}}@media screen and (max-width:374px){#wetland .flex-box2 .overlay{height:220px}}