#wrap { z-index: 5; }

/* section */
section {padding: 5vw 0;}
section >* { z-index: 3; }
section .title_box {padding-bottom: 3vw;font-size: 60px;font-weight: 500;letter-spacing: 4px;background: linear-gradient(to right, #003300 50%, var(--primary) 50%, #ffba48 95%); /* 深綠 → 綠 → 黃橘 */-webkit-background-clip: text;-webkit-text-fill-color: transparent;background-clip: text; /* Firefox */color: transparent;display: inline-block;}
section .emtitle_box{color:#398050;font-size: 19px;font-family: "Poppins", sans-serif;font-style: unset;font-weight: 500;letter-spacing: 1.5px;display: block;}
section .clip { margin: auto; width: 100%; }
section .clip img { height: 100%; }
section .clip iframe { width: 100%; height: 100%; top: 0; left: 0; }
section .clip video { width: auto; height: 100%; top: 50%; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); }

/* product_area */
#product_area {padding:0;display: grid;grid-template-columns: 75% 25%;align-items: stretch;}
#product_sub_list{padding: 80px 15%;background-image: url(/images/44/img-productBg.jpg);background-repeat:no-repeat;background-position:50% 50%;background-size:cover;}
#product_sub_list .title_box{padding-bottom: 10px;margin: 0 20px;}
#product_sub_list ul{margin-top: 90px;}
#product_sub_list li{display: grid;grid-template-columns: 50% 43%;justify-content: space-between;align-items: center;}
#product_sub_list li img, #product_list li .clip img{aspect-ratio:16 / 14;object-fit: contain;}
#product_sub_list li .h3{color:#114323;font-size: 22px;height: auto;letter-spacing: 1px;font-weight: 500;}
#product_sub_list li .info >a{color:#6e8376;margin: 10px 0 15px;display: block;}
#product_sub_list li .info >a:after{content:'';display: block;width: 30px;height: 1px;background: #bcbcbc;margin-bottom: 20px;margin-top: 40px;}
#product_sub_list li p{-webkit-line-clamp: 3;height: auto;color: #212221;text-align: justify;line-height: 2.2;margin-bottom: 50px;}
#product_list ul{display:flex;flex-direction: column;}
#product_list li{padding: 50px 15%;background-image: url(/images/44/img-texture.png);background-repeat:no-repeat;background-position:50% 50%;background-size:cover;background-color: #fcfcfc;display: flex;flex-direction: column;align-items: center;}
#product_list li:last-child{background-color:#f4f4f4}
#product_list li .clip{width:250px;margin-bottom: 60px;}
#product_list li .h3{font-size:17px;margin-bottom: 10px;letter-spacing: 1px;}
#product_list li .cate{color:#6e8376}
#product_area .btn {bottom: 43%;display: flex;align-items: center;justify-content: space-between;padding: 0;width: 84%;left: 8%;}
#product_area .btn a{width:50px;aspect-ratio: 1/1;background: white;border-radius: 50px;align-items: center;justify-content: center;box-shadow: 0 0 10px rgb(0 0 0 / 10%);}
#product_area .btn a svg{width:16px;height: 16px;}
#product_area .btn a#product_prev svg{transform:scaleX(-1);}

/* about_area */
#about_area {padding: 10vw 0;display: flex;align-items: center;justify-content: center;background-repeat: no-repeat;background-position: 50% 50%;background-size: cover;}
#about_area .bgg{position:absolute;width: 100%;height: 60%;top: 0;background: linear-gradient(0deg, rgb(255 255 255 / 0%), rgb(255 255 255 / 90%));z-index: 3;}
#about_area:after{content:url(/images/44/about-circle.png);position: absolute;animation: spin-reverse 100s linear infinite;z-index: 1;}
#about_area:before{content:url(/images/44/about-line.png);position: absolute;animation: spin 30s linear infinite;z-index: 1;}
@keyframes spin{0%{transform:rotate(0deg);}100%{transform:rotate(360deg);}}
@keyframes spin-reverse{0%{transform:rotate(0deg)}100%{transform:rotate(-360deg)}}
#about_area .workframe {display:grid;grid-template-columns: 20% 47%;justify-content: space-between;align-items: end;z-index: 5;}
#about_info{order:2}
#about_area .title_box { padding-bottom: 0; }
#about_area article p {line-height: 2.5;font-weight: 400;margin: 30px 0 70px;width: 90%;text-align: justify;}
#about_area .clip {-webkit-clip-path: url(#clip_about);clip-path: url(#clip_about);}
#about_area .about_sub_1 {top: 10%;right: 34%;animation: aboutImgAnimation 5s ease-in-out infinite;}
#about_area .about_sub_2 {top: 29%;left: 36%;animation: aboutImgUpAnimation 5s ease-in-out infinite;}
#about_area .about_sub_3 {top: 24%;left: 18%;animation: aboutImgLRAnimation 12s ease-in-out infinite;}
#about_area .about_sub_4 {bottom: 19%;left: 30%;}
#about_area .about_sub_5 {bottom: 28%;right: 3%;animation: aboutImgUpAnimation 5s ease-in-out infinite;}
#about_area .about_sub_6 {bottom: 12%;right: 24%;}
@keyframes aboutImgAnimation{0%{-webkit-transform:translateY(0);transform:translateY(0);}50%{-webkit-transform:translateY(10px);transform:translateY(10px);}100%{-webkit-transform:translateY(0);transform:translateY(0);}}
@keyframes aboutImgUpAnimation{0%{transform:translateY(0);}50%{transform:translateY(-10px);}100%{transform:translateY(0);}}
@keyframes aboutImgLRAnimation{0%{transform:translateX(0);}25%{transform:translateX(-10px);}50%{transform:translateX(0);}75%{transform:translateX(10px);}100%{transform:translateX(0);}}
#about_img{display:flex;flex-direction: column;}
#about_img a{font-size:17px;border-bottom: 1px solid rgb(12 12 12 / 10%);padding: 20px 0;display: flex;align-items: center;position: relative;justify-content: space-between;}
#about_img a:after{content:'';position: absolute;bottom: -1px;left: 0;width: 28px;height: 2px;background: var(--primary);}
#about_img a:hover:after{width:100%;}
#about_img a span{display:flex;position: relative;align-items: center;justify-content: center;margin-right: 10px;}
#about_img a:hover span{transform: rotate(180deg);}
#about_img a span:after{content:'';display: block;width: 1px;height: 10px;background: var(--black);position: absolute;}
#about_img a span:before{content:'';display: block;width: 10px;height: 1px;background: var(--black);}

/* advantages_area */
#advantages_area{background-image: url(/images/44/img-AdvantagesBg.png);background-repeat:no-repeat;background-position:50% 50%;background-size:cover;padding: 8vw 0;}
#advantages_area:before{content:'';position: absolute;width: 100%;height: 50%;bottom: 0;background: linear-gradient(1deg, rgb(255 255 255) 30%, rgb(255 255 255 / 0%));z-index: -1;}
#advantages_area .Bgg{position:absolute;width: 100%;height: 100%;top: 0;z-index: -1;}
#advantages_area .Bgg:before{content:'';position: absolute;width: 50%;height: 100%;top: 0;background: linear-gradient(90deg, rgb(255 255 255) 30%, rgb(255 255 255 / 0%));}
#advantages_area .Bgg:after{content:'';position: absolute;width: 50%;height: 100%;top: 0;background: linear-gradient(90deg, rgb(255 255 255 / 0%), rgb(255 255 255) 40%);right: 0;}
#advantages_area .video-bg {z-index: -7;width: 100%;height: 100%;top: 0;left: 15%;overflow: hidden;opacity: .75;}
#advantages_area .video-bg video{width: 60%;top: -10%;position: absolute;filter: hue-rotate(-70deg);}
#advantages_area .gene {top: -7%;animation: aboutImgUpAnimation 5s ease-in-out infinite;}
#advantages_area .fixTxt{right: 34%;top: -7%;}
#advantages_area .workframe{position:relative;width: min(90%, 1360px);}
#advantages_area .box{display:grid;grid-template-columns: 59% 31%;align-items: center;justify-content: space-between;}
#advantages_area .box .info p{text-align:justify;margin-bottom: 50px;line-height: 2;}
#advantages_area .box ul{display:grid;grid-template-columns: repeat(4, 1fr);gap: 15px;}
#advantages_area .box li{border:1px solid #fff;background: rgb(255 255 255 / 20%);}
#advantages_area .box li p{font-size:18px}
#advantages_area .box li b{font-size:58px;font-family: "Poppins", sans-serif;color: var(--primary);line-height: 1;}
#advantages_area .box .eva{display:flex;flex-direction: column;align-items: center;padding: 70px 0;}
#advantages_area .box .eva >div{display:flex;align-items: flex-start;gap: 5px;margin-top: 10px;}
#advantages_area .box .eva span{font-size:20px;}

/* custom_area */
#custom_area .parallax_svg.top { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 64' preserveAspectRatio='none'%3E%3Cpath d='M1440 64V16.67c-90 24.285-138.35 6.45-203.49-2.259-59.67-7.998-119.29 10.198-179.14 5.869-78.82-5.09-135.28-41.99-217.6-1.58C797.82 34.596 776 42.875 718.33 38.326c-164.07-15.317-329.57 33.862-490.92 5.169C150.6 31.857 79.33-8.834 0 16.62V64h1440z' fill='%23E2CEBC'/%3E%3C/svg%3E"); }
#custom_area .parallax_svg.bottom { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 64' preserveAspectRatio='none'%3E%3Cpath d='M0 0v47.33c90-24.285 138.35-6.45 203.49 2.259 59.67 7.998 119.29-10.198 179.14-5.869 78.82 5.09 135.28 41.99 217.6 1.58C642.18 29.403 664 21.125 721.67 25.674c164.07 15.317 329.57-33.862 490.92-5.169C1289.4 32.143 1360.67 72.834 1440 47.38V0H0z' fill='%23E2CEBC'/%3E%3C/svg%3E"); }
#custom_area ul li >div { margin: auto; width: 70% }
#custom_area ul li .clip { width: 250px; height: 250px; -webkit-clip-path: url(#clip_custom); clip-path: url(#clip_custom); }
#custom_area ul li h3 { margin: 10px 0 5px; font-size: 20px; }
#custom_area ul li article { font-weight: 300; font-size: 14px; overflow: hidden; margin: 10px 0 60px; height: 66px; text-align: center; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }

/* news_area */
#news_area{padding-bottom:3vw;}
#news_area .video-bg{z-index: -3;top: 0;width: 100%;height: 100%;overflow: hidden;}
#news_area .video-bg video{filter: hue-rotate(-70deg);}
#news_area:before{content:'';width: 100%;height: 100%;position: absolute;top: 0;left: 0;z-index: -1;background-image: url(/images/44/img-texture.png);background-repeat:no-repeat;background-position:50% 50%;background-size:cover;}
#news_area:after{content:'';width: 100%;height: 100%;position: absolute;top: 0;left: 0;z-index: -2;background: linear-gradient(135deg, rgb(255 255 255 / 0%) 0%, rgb(255 255 255) 40%);}
#news_area .workframe{width: min(90%, 1380px);display: grid;grid-template-columns: 60% 27%;justify-content: space-between;align-items: center;}
#news_area .bg_box{width: 38%;bottom: 0;right: 0;height: 300px;}
#news_area .bg_box img{width:100%;height: 100%;object-fit: cover;}
#news_area .titbox{order:1}
#news_area .morre{margin-top: 160px;}
#news_area .about_sub_1 {top: -10%;right: 22%;animation: aboutImgAnimation 5s ease-in-out infinite;}
#news_area .about_sub_2 {top: 12%;right: 14%;animation: aboutImgUpAnimation 5s ease-in-out infinite;}
#news_area span:before, #news_area span:after{background:var(--black)}
#news_area .title_box{padding-bottom:1vw}
#news_area li .img_box { border-radius: 15px; background-color: #f9f9f9; }
#news_area li .info_box { margin: 10px 15px 0; }
#news_area li .more_btn { margin-left: 10px; padding: 2px 15px; max-width: calc(100% - 105px); height: 22px; font-weight: 100; font-size: 13px; z-index: 6; }
#news_area li h3 {height: auto;line-height: 150%;font-size: 18px;-webkit-line-clamp: 1;color: #363434;font-weight: 500;}
#news_area li:hover h3{color:var(--secondary)}
#news_area .tabs_btn ul{display:flex;margin-bottom: 10px;border-bottom: 1px solid #b8b8b8;padding-bottom: 20px;gap: 30px;flex-wrap: wrap;}
#news_area .tabs_btn li{margin:2.5px 0;}
#news_area .tabs_btn li a{font-size: 17px;font-weight: 500;}
#news_area .tabs_btn li:hover a,#news_area .tabs_btn li.active a{color: var(--primary);display: inline-block;}
#news_area .controlBox{display:flex;gap: 20px;align-items: center;}
#news_area .controlBox .arrow {font-size: 15px;font-weight: 500;cursor: pointer;font-family: "Arimo", sans-serif;}
#news_area .controlBox span{width:80px;height: 1px;background: #dedede;}
#news_area .tabs_body .tab_info{width:100%;top:0;left:0;opacity:0;pointer-events:none}
#news_area .tabs_body .tab_info.showBox{opacity:1;pointer-events:auto;}
#news_area .tabs_body .tab_info .items .Img{padding-bottom:20px;display:none;width:100%}
#news_area .tabs_body .tab_info .items .Img img{height:310px;width:100%;object-fit:cover}
#news_area .tabs_body .tab_info .items .topbox{display:grid;grid-template-columns: 120px 1fr 120px;align-items: center;}
#news_area .tabs_body .tab_info li:first-child .items .Img{display:inline-block}
#news_area .tabs_body .tab_info li:first-child article,#news_area .tabs_body .tab_info  li:first-child .items .Txt .more{display:none}
#news_area .tabs_body .tab_info .items .h3{font-size: 19px;height: auto;margin-top: 10px;width: calc(100% - 220px);font-weight: 500;}
#news_area .tabs_body .tab_info .items .Txt .more{width:auto;border:0px solid var(--info);padding:0;position: absolute;right: 0;display: flex;align-items: center;gap: 20px;color: #b1b1b1;font-family: "Arimo", sans-serif;font-size: 14px;bottom: 0;}
#news_area .tabs_body .tab_info .items .Txt .more b{width: 50px;aspect-ratio: 1/1;display: flex;align-items: center;justify-content: center;background: #c0c0c0;border-radius: 50px;}
#news_area .tabs_body .tab_info .items .Txt .more b svg{width: 15px;height: 15px;fill: white;}
#news_area .tabs_body .tab_info .items .Txt .more b.arrow{background-color:#ababab;height:1px;width:calc(100% - 60px)}
#news_area .tabs_body .tab_info .category{line-height:1;font-weight: 300;position: relative;z-index: 5;background: linear-gradient(90deg, var(--primary), #ffba48);color: var(--white);padding: 8px 15px;display: inline-block;font-size: 15px;}
#news_area .news_list li{padding: 45px 0;position: relative;}
#news_area .news_list li:after{content:'';position: absolute;bottom: 2px;width: 100%;height: 1px;background: #b8b8b8;left: 0;}
#news_area .news_list li:first-child{border-top: 1px solid #ddd;}
#news_area .f_aitems_end{display: flex;flex-wrap: wrap;align-items: center;margin-bottom: 10px;}
#news_area .f_aitems_end p{font-family: "Poppins", serif;color: #666666;font-size: 15px;font-weight: 400;display: inline-flex;align-items: center;line-height: 1;}
#news_area .f_aitems_right{position:relative;display: flex;flex-wrap: wrap;justify-content: space-between;align-items: center;}
#news_area .f_aitems_right b{background: linear-gradient(140deg, var(--secondary), var(--primary));width: 45px;height: 45px;display: inline-flex;justify-content: center;align-items: center;border-radius: 50px;position: absolute;right: 0;}
#news_area li:hover .f_aitems_right b{right:20px;}
#news_area .f_aitems_right svg{width: 15px;height: 15px;fill: #fff;}
#news_area .news_list li:hover svg{transform: rotate(0);}
#news_area .tabs_body .tab_info .time{font-weight: 500;font-size: 16px;display:flex;flex-direction:row;align-items:center;position:relative;color: #272727;font-family: "Arimo", sans-serif;}
#news_area .tabs_body .tab_info .time font.y_txt{font-size:50px;font-weight:700;line-height:100%;background:linear-gradient(to right,var(--primary),var(--secondary));background-clip:text;-webkit-background-clip:text;color:transparent}
#news_area .tabs_body .tab_info .time font.m_txt{font-weight: 400;font-size:15px;font-family: 'Poppins', serif;color: #666666;line-height: 1;}
#news_area .tabs_body .tab_info .time font.d_txt{width:20px;grid-area:time_d;color:var(--dark)}
#news_area .tabs_body .tab_info article{height:50px;font-weight:500;font-size:15px;color:#1e1e1e;-webkit-line-clamp:2;margin:30px 0}

/* book_area */
#book_area li h3 { margin-top: 10px; height: 30px; font-size: 18px; }

/* photo_area */
#photo_area{background-image:url(/images/44/img-photoBg.jpg);background-repeat:no-repeat;background-position:50% 50%;background-size:cover;}
#photo_area .titbox{display:flex;flex-direction: column;align-items: center;}
#photo_area .boxx{display:grid;gap: 20px;grid-auto-rows: 280px;grid-template-columns: repeat(4, 1fr);}
#photo_area .item{display:flex;border-radius: 35px;overflow: hidden;}
#photo_area .item a{z-index:2;width: 100%;height: 100%;top: 0;}
#photo_area .item:after{content:'';position: absolute;width: 100%;height: 100%;bottom: 0;background: linear-gradient(180deg,rgb(0 0 0 / 0%), rgb(0 0 0 / 50%));z-index: 0;}
#photo_area .item .info{padding: 30px;width: 100%;height: 100%;box-sizing: border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;z-index: 1;}
#photo_area .item .info *{color:var(--info);text-shadow:-1px -1px 0 white,1px -1px 0 white,-1px  1px 0 white,1px  1px 0 white}
#photo_area .item .info .h3{font-size:26px;font-weight: 400;}
#photo_area .item .info p{font-size: 20px;font-family: "Poppins", sans-serif;}
#photo_area .item img {height: 100%;object-fit: cover;filter: saturate(80%);width: 100%;}
#photo_area .item .more{position:absolute;right: 30px;bottom: 30px;}
#photo_area .item .more span{position:relative;display:flex;align-items: center;justify-content: center;background: white;width: 50px;aspect-ratio: 1/1;border-radius: 50px;box-shadow: 0 0 0 10px rgb(255 255 255 / 15%);}
#photo_area .item:hover .more span{background:var(--secondary);transform: rotate(180deg);}
#photo_area .item:hover .more span:after, #photo_area .item:hover .more span:before{background:white}
#photo_area .item .more span:after{content:'';width: 11px;height: 1px;position: absolute;background: var(--info);}
#photo_area .item .more span:before{content:'';height: 11px;width: 1px;position: absolute;background: var(--info);}
#photo_area .item:hover img{transform: scale(1.1);}
#photo_area .item:first-child{grid-column-start:1;grid-column-end: 3;grid-row-start:1;grid-row-end: 2;}
#photo_area .item:nth-child(4){grid-column-start: 2;grid-column-end: 4;grid-row-start: 2;grid-row-end: 3;}
#photo_area .item:last-child{grid-column-start: 4;grid-column-end: 5;grid-row-start:1;grid-row-end: 3;}

@media screen and (max-width: 1460px) {
    #about_area .about_sub_6{right: 16%;}
    #product_list li .clip{width: 180px;}
    #about_area .about_sub_5{right: -4%;}
}
@media screen and (min-width: 1025px) {
    #photo_area{background-attachment: fixed;}
}
@media screen and (max-width: 1024px) {
    #product_area .btn{    left: 5%;    width: 90%;}
    #advantages_area .box{grid-template-columns: 1fr;gap: 30px;}
    #about_area .workframe{grid-template-columns: 30% 47%;}
    #about_area .about_sub_5{right: -9%;}
    #about_area .about_sub_, #advantages_area .gene, #product_list{display:none;}
    section .title_box{font-size: 45px;}
    #about_area .about_sub_1{top: 3%;}
    #about_area .about_sub_2{left: 30%;}
    #about_area .about_sub_3{left: 3%;top: 12%;}
    #photo_area .boxx{grid-template-columns: repeat(3, 1fr);}
    #photo_area .item:last-child{grid-column-start: 1;grid-column-end: 4;grid-row-start: 3;grid-row-end: 4;}
    #product_area{display: block;}
}
@media screen and (max-width: 980px) {
    #news_area .tabs_btn ul{gap: 5px 15px;}
    #news_area .morre{position:absolute;bottom: -24%;z-index: 10;left: 30%;}
    #news_area{display:flex;flex-direction: column;padding-bottom: 0;}
    #news_area .bg_box{position:relative;width: 100%;order: 1;}
    #news_area .workframe{display:block;z-index: 10;}
    section, #advantages_area{padding:8vw 0}
    #advantages_area .fixTxt{right: 14%;}
    #about_area .about_sub_6, #about_area .about_sub_5{display:none;}
    #about_img{margin-top:40px;width:80%}
    #about_area .about_sub_4{left: unset;right: 10%;width: 120px;bottom: 31%;}
    #about_area .about_sub_3{left: 35%;top: 3%;}
    #about_area .about_sub_2{top: 8%;left: unset;right: 5%;width: 140px;}
    #about_area{padding-top: 30vw;background-position: 100% 60%;}
    #about_info{order:-1}
    #about_area .workframe{grid-template-columns:1fr}
    #news_area .controlBox{display:none;}
    #news_area .tabs_box{margin-top:30px;margin-bottom: 70px;}
}
@media screen and (max-width: 760px) {
    #photo_area .boxx{grid-template-columns:1fr;margin-top: 30px;}
    #photo_area .item:first-child, #photo_area .item:nth-child(4), #photo_area .item:last-child{grid-column-start: unset;grid-column-end: unset;grid-row-start: unset;grid-row-end: unset;}
    #news_area .morre{left: 27%;}
    #news_area .about_sub_2{top: 3%;right: 10%;}
    #advantages_area .box{margin-top:40px;}
    #advantages_area .workframe{text-align:center;}
    #advantages_area .video-bg video{width:auto;height: 70%;left: -90%;}
    section, #advantages_area{padding:12vw 0}
    #about_area .about_sub_4{right: 4%;bottom: 27%;width: 100px;}
    #about_area article p{width:100%}
    section .emtitle_box{font-size: 16px;}
    section .title_box{font-size: 35px;}
    #about_area:before, #about_area:after{zoom: 60%;}
    #about_area{padding-top: 45vw;}
    #about_area .about_sub_3{left: 10%;width: 140px;}
    #advantages_area .fixTxt{width: 110px;right: 5%;}
    #advantages_area .box ul{grid-template-columns: repeat(2, 1fr);}
    #news_area .tabs_body .tab_info .items .Txt .more{display:none;}
    #news_area .tabs_body .tab_info .items .h3{width:100%}
    #product_sub_list{padding: 80px 10%;}
    #product_sub_list .title_box, .webBox .pageh1{margin: 0;}
    #product_area .btn{position:relative;width: auto;gap: 40px;justify-content: center;margin-top: 50px;}
}
@media screen and (max-width: 550px) {
	#product_sub_list li {grid-template-columns: 1fr;gap: 30px;}
	#about_area #about_img { width: 80vw; }
	#about_area .about_sub_2 {width: 120px;}
	#news_area li .row { margin: auto; width: 280px; }
}