h2.boxTitle{font-size:35px;line-height:110%;color:#dcc875;font-weight:500}
h2.boxTitle img{margin-left:20px;display:none}
#content{background-color:#fbfbfb}
#fragranttea #product .productList .product-info{width:calc((100%/5) - 25px);margin-right:2%;margin-bottom:15px;float:none;display:inline-block;position:relative;margin-left:0}
#fragranttea #product .productList .product-info:nth-child(5n){margin-right:0}
#fragranttea #product .productList .product-info .photo{background-repeat:no-repeat;background-position:50% 50%;background-size:cover;border:0}
#fragranttea #product .productList .product-info .photo a{display:block;background-image:url(/images/05/index-product-hover.png);background-repeat:no-repeat;background-position:50% 50%;background-size:25%;background-color:rgba(53,53,53,0.7);opacity:0;transition:all ease-in-out 0.3s}
#fragranttea #product .productList .product-info:hover .photo a{opacity:1}
#fragranttea #product .productList .product-info .product-detail{padding:5px 15px;position:absolute;bottom:0;left:0;width:calc(100% - 30px);text-align:left}
#fragranttea #product .productList .product-info:hover .product-detail{background-color:#e8e8e800}
#fragranttea #product .productList .product-info .product-detail span{display:block;width:50px;height:3px;background:#c5af81}
#fragranttea #product .productList .product-info .product-detail h3{text-align:left}
#fragranttea #product .productList .product-info .product-detail p{text-align:left}
#fragranttea #product .productList .product-info .product-detail p a{color:#191919;font-size:14px}
#fragranttea #product .productList .product-info .product-detail h3 a{color:#1f1e1e;font-size:20px;display:block;font-weight:bold;line-height:20px}
#index-large{background:#152030;position:relative;padding:40px 0;overflow:hidden;z-index:1}
#first-box{background-repeat:no-repeat;position:relative;margin-top:-69px;background-color:#2f4b3ab5}
#first-box section>p{text-align:center}
#first-box .aboutnewspro{margin-top:20px;overflow:hidden}
#first-box .aboutnewspro #about{width:620px;float:left}
#first-box .aboutnewspro #about .aboutus{overflow:hidden;position:relative}
#first-box #about .aboutus .aboutcontrol{width:54%;float:left;overflow:hidden}
#first-box #about .aboutus .aboutimage{width:44%;float:right;height:300px;background-repeat:no-repeat;background-position:50% 50%;background-size:cover}
#first-box #about .aboutus .aboutcontrol .stxt,#first-box #newshot .stxt,#allporduct .stxt,#fragranttea .stxt,#book .stxt{color:#ffffff;font-size:16px;font-weight:normal;letter-spacing:0.2em;margin-top:10px;overflow:hidden}
#first-box #about .aboutus .aboutcontrol .stxt span,#first-box #newshot .stxt span,#allporduct .stxt span,#fragranttea .stxt span,#book .stxt span{display:inline-block;width:100px;height:1px;background:#c0c0c0;margin-top:10px;margin-left:10px}
#first-box #about .aboutus .aboutcontrol article{color:#ffffff;font-size:12px;position:relative;margin-top:25px;line-height:180%;overflow:hidden}
#first-box #about .aboutus .aboutcontrol article h3{height:145px;overflow:hidden;font-weight:normal;margin-bottom:20px;font-size:15px}
#first-box #about .aboutus .aboutcontrol .more{position:absolute;right:5px;bottom:0;line-height:12px}
#first-box #about .aboutus .aboutcontrol .more a,#first-box #newshot .stxt a,#allporduct .stxt a,#fragranttea .stxt a,#book .stxt a{color:#d0b663;font-size:12px;line-height:12px;letter-spacing:0.2em}
#first-box .aboutnewspro #about .adPT{margin-top:10px}
#first-box .aboutnewspro #about .adPT ul{height:414px;position:relative}
#first-box .aboutnewspro #about .adPT li{position:absolute;left:0;top:0;height:200px;width:30%;background-repeat:no-repeat;background-position:50% 50%;background-size:cover}
#first-box .aboutnewspro #about .adPT li a{display:block;width:100%;height:100%}
#first-box .aboutnewspro #about .adPT li:nth-child(2){left:32%;width:22%}
#first-box .aboutnewspro #about .adPT li:nth-child(3){left:0;top:initial;bottom:0;width:54%;height:200px}
#first-box .aboutnewspro #about .adPT li:nth-child(4){right:0;top:0;width:44%;height:100%;left:initial}
#first-box .aboutnewspro #newshot{width:487px;float:right}
#first-box #newshot .stxt a,#allporduct .stxt a,#fragranttea .stxt a,#book .stxt a{float:right}
#first-box #newshot .stxt{margin-bottom:18px}
#first-box #newshot li{overflow:hidden;padding:10px 0;display:flex;align-items:center}
#first-box #newshot li .date{color:#ffe14d;font-size:18px;width:10%}
#first-box #newshot li .date .big{font-size:25px;font-weight:bold}
#first-box #newshot li .intro{width:88%}
#first-box #newshot li .intro h3,#first-box #newshot li .intro article{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
#first-box #newshot li .intro h3 a{color:#ffffff;font-size:18px;font-weight:500}
#first-box #newshot li .intro article{color:#d8d8d8;font-size:12px;margin-top:2px;font-weight:100}
#news{display:flex;flex-direction:row;align-items:center;padding:-1px 0}
#news ul{margin-bottom:0}
#news .btn{display:flex}
#news .btn .fa{color:white;font-size:10px}
#news .btn a{padding:10px 16px;border:white 1px solid;margin:3px;background-color:#f5cf34cf}
#hotproduct{margin-top:18px}
#hotproduct .hotproduct-List{}
#hotproduct .hotproduct-List h3{overflow:hidden;color:#fff;font-weight:normal;font-size:16px}
#hotproduct .hotproduct-List h3 p{background:#c5af81;float:left;width:calc(35% - 30px);padding:5px 15px;text-align:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
#hotproduct .hotproduct-List h3 a{color:#fff;display:block;float:left;background:#575757;width:calc(65% - 30px);padding:5px 15px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
#hotproduct .hotproduct-List .photo{background-repeat:no-repeat;background-position:50% 50%;background-size:cover;display:block}
#allporduct{padding:20px 0 60px;background-repeat:no-repeat;background-position:0% 71%;background-size:auto;visibility:visible;position:relative;overflow:hidden}
#allporduct section{width:100%}
#allporduct .title_flex{display:flex;flex-direction:column;align-items:center;color:#2a443a;padding-top:60px}
#allporduct p.boxsubTitle{font-size:90px;line-height:120%;-webkit-text-stroke:1px rgb(38 61 53 / 43%);-webkit-text-fill-color:transparent}
#allporduct h2.boxTitle{text-align:center;margin-bottom:30px;color:#294339;font-size:24px;position:relative}
#allporduct h2.boxTitle:after{content:"";width:2px;height:40px;display:block;background:rgb(219 181 35);top:105%;left:50%;margin-top:10px;position:absolute}
#allporduct .stxt{margin-bottom:20px}
#fragranttea{padding:50px 0 30px}
#fragranttea .stxt{margin-bottom:20px}
#fragranttea #product{text-align:center}

/*index-youtube*/
#index-youtube #video-container{position:relative;padding-bottom: 46.25%;padding-top:30px;height:0;overflow:hidden;margin: 0px auto;width: 80%;}
#index-youtube #video-container iframe,.video-container object,.video-container embed{position:absolute;top:0;left:0;height: 80%;}


/*index-detection*/
#index-detection{position:relative;margin:60px 0}
#index-detection .matextbox{position:relative;display:flex;max-width:100%;margin:0 auto}
#index-detection .matextbox .leftboox{display:flex;flex-direction:column;width:50%}
#index-detection .matextbox .leftboox img{height:100%;object-fit:cover}
#index-detection .matextbox .rightboox{display:flex;flex-direction:column;width:67%}

/*product*/
#product .productList{overflow:hidden;padding:20px;margin-bottom:0}
.morree{display:flex;flex-direction:column;align-items:center}
.morree a{border:#9a9a9a 1px solid;padding:10px 30px;color:#525252;transition:all 200ms cubic-bezier(0.265,0.850,0.385,0.255)}
.morree a:hover{background:#d9b219}
#product .productList .slick-list .slick-track{padding:60px 0px}
#product .productList .product-info{transition:all linear 0.3s;transform:scale(0.65);padding:0 2px;z-index:6;opacity:0}
#product .productList .product-info.slick-active{opacity:1}
#product .productList .product-info:hover .photo{-webkit-filter:brightness(.9);transition:all linear 0.3s}
#product .productList .product-info.slick-center{z-index:9;transform:scale(1.2);opacity:1}
#product .productList .product-info.slick-center .product-detail{position:relative;bottom:0;top:auto;writing-mode:initial;margin-top:-20px;transition:all linear 0.3s}
#product .productList .product-info .product-detail{position:absolute;top:-3%;margin-bottom:20px;transition-delay:.8s}
#product .productList .product-info.slick-center .product-detail h3{background-color:#2e3a35;border-bottom:#eccc2e 3px solid}
#product .productList .product-info.slick-center .product-detail h3 a{color:#ffffff;padding:10px}
#product .productList .product-info:nth-child(4n){}
#product .productList .product-info .photo{background-repeat:no-repeat;background-position:50% 50%;background-size:cover}
#product .productList .product-info .photo a{display:block;background-image:url(/images/05/index-product-hover.png);background-repeat:no-repeat;background-position:50% 50%;opacity:0;transition:all ease-in-out 0.3s}
#product .productList .product-info:hover .photo a{opacity:1}
#product .productList .product-info .product-detail{padding:5px}
#product .productList .product-info:hover .product-detail{}
#product .productList .product-info .product-detail span{display:block;width:50px;height:3px;background:#c5af81}
#product .productList .product-info .product-detail h3{font-weight:normal;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-align:center;margin-top:10px}
#product .productList .product-info .product-detail p{color:#5a5959;font-size:13px;text-align:center}
#product .productList .product-info .product-detail h3 a{color:#273d35;font-size:20px;display:block;font-weight:500}


#index-large{background:#152030;position:relative;padding:40px 0;overflow:hidden;z-index:1}
#index-large:after{content:'';position:absolute;width:200%;height:50%;left:-170%;background:rgba(255,255,255,0.1);transform:skewX(80deg);z-index:-1;bottom:0;animation-name:indexbg1;animation-iteration-count:infinite;animation-duration:5s;animation-direction:alternate}
#index-large:before{content:'';position:absolute;width:200%;height:100%;right:-190%;background:rgba(255,255,255,0.1);transform:skewX(-60deg);z-index:-1;bottom:0;animation-name:indexbg2;animation-iteration-count:infinite;animation-duration:5s;animation-direction:alternate}

@keyframes indexbg1{0%{transform:skewX(50deg);left:-200%;height:100%;bottom:0}
50%{transform:skewX(80deg);left:-170%;height:50%;bottom:0}
100%{transform:skewX(80deg);left:-170%;height:50%;bottom:-30%}
}@keyframes indexbg2{0%{transform:skewX(0deg);right:-300%}
100%{transform:skewX(-60deg);right:-190%}
}#product .productList .product-info .product-detail .price{height:25px;text-align:center;display:none}
#product .productList .product-info .product-detail .price p{display:inline-block;font-size:16px;color:#dcc874}
#product .productList .product-info .product-detail .price p b{}
#product .productList .product-info .product-detail .price p.old{margin-right:10px;text-decoration:line-through;color:#c4c1c1}

/*freebox*/
#freebox .four h2{margin-bottom:20px;color:#c5af81;font-size:20px;letter-spacing:0.1em;text-align:center}
#freebox .four{width:90%;margin:20px auto}
#freebox .four ul{text-align:center}
#freebox .four li{display:inline-block;width:calc(25% - 4px)}
#freebox .four li .border{border:2px solid #c5af81;background-image:url(/images/05/footer-bg.png);text-align:center;margin:10px 20px;padding:40px 20px 30px}
#freebox .four li .border p{color:#fff;text-align:center;height:46px;overflow:hidden;margin-top:25px;font-size:8pt}
#freebox .four li .border img{display:inline-block}
#freebox article{text-align:center;color:#c5af81;font-size:15px;line-height:180%}
#freebox .four .youtube{position:relative;margin:30px auto;width:55%}

/*aboutFunc*/
#aboutFunc{position:relative;background-repeat:no-repeat;background-position:50% 50%;background-size:cover;overflow:hidden;background-color:#ffffff;color:#181818;padding:110px 0}
#aboutFunc:before{content:'';display:block;position:absolute;left:0;bottom:0;height:50%;width:100%;background-color:rgba(255,255,255,0);z-index:1}
#aboutFunc .abBox{position:relative;z-index:3}
#aboutFunc .abBox #youtube{width:42%;margin-left:157px;background-repeat:no-repeat;background-position:50% 50%;background-size:cover;-webkit-box-shadow:0 11px 47px rgba(78,78,78,0.4);-moz-box-shadow:0 11px 47px rgba(78,78,78,0.4);-ms-box-shadow:0 11px 47px rgba(78,78,78,0.4);box-shadow:0 11px 47px rgba(78,78,78,0.4);-webkit-transition:opacity 0.35s,-webkit-transform 0.35s;transition:opacity 0.35s,transform 0.35s}
#aboutFunc .abBox .aboutart{width:26%;position:absolute;right:15%;top:82px;animation-duration:2s;animation-name:fadeInRight}
.longbar{display:inline-block;width:57px;height:2px;background:#c9c9c9;margin-right:15px}
#aboutFunc .abBox .aboutart h3{font-size:38px;line-height:110%;margin-bottom:30px;font-weight:600;display:flex;align-items:center}
#aboutFunc .abBox .aboutart b{font-weight:500;font-size:25px}
#aboutFunc .abBox .aboutart h2{font-size:27px;line-height:110%}
#aboutFunc .abBox .aboutart .arts{font-size:16px;line-height:160%;color:#131313b3;margin-top:20px;margin-bottom:60px;max-height:200px;overflow:hidden;font-weight:400;letter-spacing:1.5px;font-weight:100;line-height:220%}
#aboutFunc .abBox .aboutart .more a{display:inline-block;background:#fff;color:#4c4c4c;font-size:15px;font-weight:700;line-height:103%;padding:15px 48px;border:1px solid #767a82;border-radius:38px}
#aboutFunc .abBox .aboutart .more{float:right}
#aboutBox #youtube{position:relative;background-repeat:no-repeat;background-position:50% 50%;background-size:cover;margin-top:20px}

/*youtube*/
#youtube .UTwo{position:relative;padding-bottom:56.25%;padding-top:30px;height:0;overflow:hidden}
#youtube .UTwo a{display:block;width:100px;height:100px;text-align:center;line-height:100px;border-radius:50%;background:rgba(0,0,0,0.6);position:absolute;z-index:5;color:#dcdcdc;font-size:30px;left:calc(50% - 50px);top:calc(50% - 50px);transition:all linear .3s}
#youtube .UTwo a:hover{width:110px;height:110px;line-height:110px;left:calc(50% - 55px);top:calc(50% - 55px);font-size:34px}
#youtube .UTwo iframe{position:absolute;top:0;left:0;width:100%;height:100%}
#youtube .UTwo{position:relative;padding-bottom:55.25%;padding-top:108px;padding-left:142px;height:0;overflow:visible}
#youtube .UTwo:before{content:"";position:absolute;width:100%;height:100%;top:-25px;left:-23px;border:#40694947 5px solid;z-index:-1}
#youtube .UTwo a{display:block;width:100px;height:100px;text-align:center;line-height:100px;border-radius:50%;background:rgba(0,0,0,0.6);position:absolute;z-index:5;color:#dcdcdc;font-size:30px;left:calc(50% - 50px);top:calc(50% - 50px);transition:all linear .3s}
#youtube .UTwo a:hover{width:110px;height:110px;line-height:110px;left:calc(50% - 55px);top:calc(50% - 55px);font-size:34px}
#youtube .UTwo iframe{position:absolute;top:0;left:0;width:100%;height:100%}

/* NewsBox */
#NewsBox .webframe{width:1440px;margin:0 auto;text-align:center}
#NewsBox .index-title{position:relative}
#NewsBox .index-title h2,#coopBox .index-title h2,#processBox .index-title h2{text-align:center;color:#384c44;font-weight:400;font-size:20px;line-height:120%;letter-spacing:.35em}
#NewsBox .index-title h3,#coopBox .index-title h3,#processBox .index-title h3{text-align:center;color:#2e3a35;font-size:50px;line-height:100%;font-weight:500;margin-top:5px;font-family:'Frank Ruhl Libre',serif;letter-spacing:1.2px;position:relative}
#NewsBox .index-title h3:after,#coopBox .index-title h3:after,#processBox .index-title h3:after{content:"";width:2px;height:40px;display:block;background:rgb(240 202 56);top:105%;left:50%;margin-top:0;position:absolute;-moz-transform:rotate(1.54159rad);-webkit-transform:rotate(1.54159rad);-o-transform:rotate(1.54159rad);-ms-transform:rotate(1.54159rad);transform:rotate(1.54159rad)}
#NewsBox .more{text-align:center;margin-top:45px}
#NewsBox p a{color:#413f3f;display:inline-block;border:1px solid #e1e1e1;padding:7px 40px;font-family:'Lusitana',serif;position:relative;z-index:2;transition:transform 1s cubic-bezier(0.08,0.65,0.38,1.08)}
#NewsBox p a b{font-weight:400;margin-right:10px}
#NewsBox{position:relative;padding:30px 0 50px}
#NewsBox .workframe{position:relative;margin:0 auto;width:1366px;max-width:100%}
#NewsBox #newsW{padding:70px 0}
#NewsBox .bg{position:absolute;width:100%;height:calc(100% - 300px);top:200px;left:0}
#NewsBox .leftPhoto{position:absolute;width:calc((55% - 50px) / 2);bottom:15%;left:0;z-index:2}
#NewsBox .leftPhoto a{position:relative}
#NewsBox .leftPhoto a.photo img{width:100%}
#NewsBox .leftPhoto a font{position:absolute;padding:15px 20px;width:calc(100% - 40px);background:rgba(0,0,0,0.7);font-size:16px;color:#fff;left:0;bottom:0}
#NewsBox ul li{position:relative;text-align:center;display:flex;align-items:center;justify-content:space-between}
#NewsBox ul li a.photo{display:block;background-size:cover;padding:20px}
#NewsBox ul div{-webkit-transition:unset;transition:unset}
#NewsBox ul li .newImg{box-shadow:0 0 10px rgba(79,69,62,0.65);width:calc(50% - 10px);margin-left:30px;display:flex;flex-direction:column}
#NewsBox ul li .info{width:calc(50% - 50px);display:flex;flex-direction:column}
#NewsBox ul li .info h3{padding:15px 0 20px 0px;height:42px;line-height:160%;color:#363636;-webkit-line-clamp:2;border-top:solid 1px #d3d3d3;text-align:left;overflow:hidden;margin:10px 0 20px;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical}
#NewsBox ul li .info h3 a{font-size:16px;color:#6a6a6a;font-weight:400;letter-spacing:1.2px}
#NewsBox ul li .info p{color:#767676}
#NewsBox ul li .info .rightbox{overflow:hidden;padding-bottom:20px;display:flex;align-items:center}
#NewsBox ul li .info .rightbox .LLOcan{display:flex;flex-direction:column}
#NewsBox ul li .info .rightbox .RROcan{display:flex;flex-direction:column;align-items:flex-start}
#NewsBox ul li .info .rightbox a{}
#NewsBox ul li .info .rightbox .date{font-size:55px;color:#f1d030;font-family:'Playfair Display SC',serif;margin-right:10px}
#NewsBox ul li .info .rightbox .date2{font-family:'Playfair Display SC',serif;font-size:20px}
#NewsBox ul li .info p.describe{height:50px;-webkit-line-clamp:4;display:none}
#NewsBox ul li .info p.more{margin-top:0px;text-align:left}
#NewsBox ul li .info p.more a{color:#868686;transition:all 200ms cubic-bezier(0.265,0.850,0.385,0.255)}
#NewsBox ul li .info p.more a:after,#NewsBox ul li .info p.more a font.dote span{background:#fafafa}
#NewsBox ul li .info p.more a:hover{background-color:#f1d030;color:#5a615d}

/* bookBox */
#bookBox{padding:2vw 14vw 3vw;z-index:2;position:relative}
#bookBox:before{position:absolute;width:100%;height:250px;background:#2e4c3d8c;display:block;top:0;left:0;z-index:2;content:""}
#bookBox:after{position:absolute;width:20%;height:100%;display:block;top:0;right:0;z-index:1;content:""}
#bookBox .bg{position:absolute;width:15vw;height:25vw;background:no-repeat 50% / cover;bottom:4vw;right:0vw;z-index:4}
#bookBox .bookinfo{position:relative;z-index:3}
#bookBox .bookinfo ul{margin-top:5vw}
#bookBox .bookinfo ul li{position:relative;margin:5px}
#bookBox .bookinfo ul,#bookBox .bookinfo div{-webkit-transition:unset;transition:unset}
#bookBox .bookinfo ul li a{position:absolute;width:100%;height:100%;z-index:2}
#bookBox .bookinfo ul li .info{padding:20px 15px 0px}
#bookBox .bookinfo ul li .info:after{content:"";position:absolute;width:100%;height:350px;background:#eee;z-index:-1;left:0px;bottom:0}
#bookBox .bookinfo ul li .img{margin-bottom:20px;background:no-repeat 50% / cover;box-shadow:4px 5px 9px rgb(143 143 143 / 31%)}
#bookBox .bookinfo ul li .price font{display:flex;font-size:15px;padding:0;color:#b1b1b1;position:relative;align-items:center;justify-content:flex-end;width:100%;font-weight:100}
#bookBox .bookinfo ul li .price font:before{content:'';left:10px;top:10px;height:2px;margin-right:30px;border-top:1px solid #c5c5c580;border-bottom:1px solid #c5c5c580;transition:1s ease-out;width:85px;position:absolute}
#bookBox .bookinfo ul li .price font.old{color:#a3a3a3}
#bookBox .bookinfo ul li h3{margin-bottom:20px;height:26px;font-size:17px;padding:0 5px;font-weight:300;color:#252525;overflow:hidden;margin:10px 0;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical}
#bookBox .bookinfo ul li article{-webkit-line-clamp:3;padding:10px 30px;margin-top:64px;margin-bottom:20px;text-transform:uppercase;border:1px solid #6d7872;font-size:12px;letter-spacing:1px;color:#fff;background-color:#8a9b92;position:relative;font-weight:400;text-align:center}
#bookBox .title_flex{display:flex;flex-direction:column;align-items:center;color:#2a443a;padding-top:0}
#bookBox p.boxsubTitle{font-size:90px;line-height:120%;-webkit-text-stroke:1px rgb(251 251 251 / 66%);-webkit-text-fill-color:transparent}
#bookBox h2.boxTitle{text-align:center;margin-bottom:30px;color:#fcfcfc;font-size:24px;position:relative}
#bookBox h2.boxTitle:after{content:"";width:2px;height:40px;display:block;background:rgb(255 218 77);top:105%;left:50%;margin-top:0;position:absolute;-moz-transform:rotate(1.54159rad);-webkit-transform:rotate(1.54159rad);-o-transform:rotate(1.54159rad);-ms-transform:rotate(1.54159rad);transform:rotate(1.54159rad)}

/*coopBox*/
#coopBox{position:relative;background:#f3f3f3;padding:80px 0 50px}
#coopBox .index-title{display:flex;flex-direction:column;align-items:flex-start;padding:0 34px;margin-bottom:20px}
#coopBox .index-title h3{text-transform:uppercase;font-size:70px}
#coopBox .nambox .newtext{display:flex;flex-direction:column}
#coopBox .index-title h3:after{top:-50px;left:130%;height:171px;-moz-transform:rotate(1.57rad);-webkit-transform:rotate(1.57rad);-o-transform:rotate(1.57rad);-ms-transform:rotate(1.57rad);transform:rotate(1.57rad)}
#coopBox .nambox .newtext .nanayn{display:flex;color:#494949;padding:0 20px;justify-content:flex-end;margin:0px 87px 0px 30px}
#coopBox .nambox .newtext .nanayn span{margin-left:10px}
#coopBox .nambox .newtext .teclist{display:flex;color:#494949;padding:20px;justify-content:space-between;border:#d4d4d4 1px solid;margin:15px 87px 5px 30px}
#coopBox .nambox .newtext .teclist h4{font-weight:400;font-size:19px}
#coopBox .nambox div{-webkit-transition:unset;transition:unset}
#coopBox input[type=radio]{width:16px;height:16px;accent-color:#4c9881}


@media screen and (min-width:1024px){
    #process{background-attachment:fixed}
}

@media screen and (max-width:1440px){
    
    #bookBox{padding:2vw 4vw 3vw}
}
@media screen and (max-width:1366px){
    #first-box .aboutnewspro #about,#freebox .four{width:50%}
    #first-box #about .aboutus .aboutcontrol article h3{height:175px}
    #first-box .aboutnewspro #newshot{width:45%;overflow:hidden}
    #news{}
    #hotproduct{width:30%;float:right}
    #hotproduct .hotproduct-List h3 p{width:calc(50% - 30px)}
    #hotproduct .hotproduct-List h3 a{width:calc(50% - 30px)}
    #first-box{}
    #hotproduct .hotproduct-List h3{font-size:14px}
}

@media screen and (max-width:1280px){
    #freebox .four{width:70%}
    #freebox .four li{width:calc(50% - 4px);margin-bottom:20px}
    #freebox .four .youtube{width:100%}
}

@media screen and (max-width:1024px){
    #first-box{margin-top:-50px;background-color:#2f4b3a}
    #fragranttea #product .productList .product-info{width:calc((100%/3) - 25px)}
    #first-box .aboutnewspro #about,#freebox .four{width:100%}
    #first-box .aboutnewspro #newshot{width:100%;margin-top:50px}
    #index-detection .matextbox{display:flex;flex-direction:column;align-items:center}
    #index-detection .matextbox .leftboox{width:100%}
    #index-detection .matextbox .leftboox img{height:332px}
    #index-detection .matextbox .rightboox{width:100%}
    #coopBox .nambox .newtext .teclist{margin:5px 10px}
    #coopBox .nambox .newtext .nanayn{margin:5px 10px}
}

@media screen and (max-width:980px){
    #news{width:56%}
    #hotproduct{width:40%}
    #freebox .four{width:80%}
    #allporduct p.boxsubTitle,#bookBox p.boxsubTitle{font-size:50px}
    #bookBox:before{height:178px;top:-7px}
    #bookBox .bookinfo ul{margin-top:0}
}

@media screen and (max-width:768px){
    #news{width:100%}
    #hotproduct{width:100%}
    #product .productList .product-info .photo a{background-size:30%}
    #freebox .four{width:80%}
    #freebox .four li .border p{height:70px}
    #first-box #newshot .stxt a,#allporduct .stxt a,#fragranttea .stxt a,#book .stxt a{margin-top:5px}
    #freebox .four{width:90%}
    #freebox .four li .border{margin:10px 10px}
    #process section{width:90%}
    .col{width:calc((100%/2) - 30px)}
}

@media screen and (max-width:640px){
    #news .btn a{padding:5px 12px}
    #first-box{margin-top:0}
    #first-box .aboutnewspro #about .adPT ul{height:auto}
    #first-box .aboutnewspro #about .adPT li{position:initial;float:left;height:250px;width:40%}
    #first-box .aboutnewspro #about .adPT li:nth-child(2){width:57%;float:right}
    #first-box .aboutnewspro #about .adPT li:nth-child(3){margin-top:10px;width:60%}
    #first-box .aboutnewspro #about .adPT li:nth-child(4){width:38%;height:200px;float:right;margin-top:10px}
    #first-box #about .aboutus .aboutimage{width:100%;float:right;height:200px}
    #first-box #about .aboutus .aboutcontrol,#freebox .four{width:100%}
    #first-box #about .aboutus .aboutcontrol{margin-bottom:20px}
    .col{width:calc((100%/2) - 20px);margin:10px}
    .front,.back{min-height:130px}
    .front .inner h2,.back .inner h3{font-size:20px}
    #NewsBox ul li,#NewsBox ul li .newImg{display:block;margin:0 auto}
    #NewsBox ul li .info{width:100%;align-items:center;margin-top:50px}
}

@media screen and (max-width:480px){
    #coopBox .nambox .newtext .teclist h4{font-size:16px}
    #coopBox .nambox .newtext .teclist{padding:15px 11px}
    #coopBox  #detection_div{width:140px;font-size:17px;line-height:54px}
    #coopBox .index-title h3:after{height:87px;top:-28px;left:135%}
    #coopBox .index-title{padding:0 15px}
    #allporduct{background-color:white;padding-bottom:58px;background-position:50% 100%;background-size:270%}
    #product .productList .product-info{margin:0 10px}
    #product .productList{padding-bottom:0;margin-bottom:0}
    #NewsBox{padding:60px 0 0}
    #aboutFunc{padding-top:80px}
    #youtube .UTwo:before{left:-10px;top:-18px;border:#40694947 2px solid}
    #product .productList .slick-list .slick-track{padding-bottom:10px}
    #product .productList .product-info.slick-center .product-detail h3 a{font-size:15px;display:flex;justify-content:center}
    #product .productList .product-info:hover .product-detail{left:7%}
    #freebox .four li{width:80%;margin:0 10% 20px}
    #freebox .four li .border p{height:auto}
    #first-box #newshot li .date{width:16%}
    #first-box #newshot li .intro{width:82%}
    #first-box #about .aboutus .aboutcontrol .more{position:initial;text-align:right}
    #fragranttea #product .productList .product-info{width:calc((100%/2) - 15px)}
    #fragranttea section{width:95%}
    #fragranttea{padding:10px 0}
    #allporduct .title_flex{padding-top:20px}
    #allporduct p.boxsubTitle,#bookBox p.boxsubTitle,#NewsBox .index-title h3,#coopBox .index-title h3,#processBox .index-title h3{font-size:33px}
    #SeoStarRating{display:flex;justify-content:center}
    #bookBox{padding:10vw 14vw 6vw}
    #bookBox:before{height:300px}
    #aboutFunc .abBox .aboutart .more{float:unset;display:flex;justify-content:center;margin-top:20px}
    #aboutFunc .abBox .aboutart .more a{border-radius:4px;padding:11px 50px}
    #aboutFunc .abBox .aboutart .more a span{font-weight:600;color:#8a9b92}
    #aboutFunc .abBox .aboutart h3{display:flex;flex-direction:column;align-content:center;margin-bottom:10px}
    #aboutFunc .abBox .aboutart b{font-size:21px}
    .longbar{display:flex;justify-content:center;width:76px;height:1px;margin-left:11px}
    #aboutFunc .abBox .aboutart h2{display:flex;justify-content:center}
    #aboutFunc .abBox #youtube{width:88%;margin-left:0;margin:0 auto}
    #aboutFunc .abBox .aboutart{width:90%;right:0;position:relative;margin:0 auto}
    #bookBox .bookinfo ul li .info{display:flex;flex-direction:column}
    #bookBox .bookinfo ul li .price{display:flex;flex-direction:column}
    #bookBox .bookinfo ul li .price font:before{position:relative;top:0}
    #bookBox .bookinfo ul li .price font{display:flex;width:100%;padding-left:0;flex-direction:column;align-content:center;align-items:center}
    #bookBox .bookinfo ul li h3{width:100%;padding:0;text-align:center}
    #bookBox .bookinfo ul li article{margin-top:20px}
    #fragranttea #product .productList .product-info .product-detail{background-color:rgb(0 0 0 / 50%)}
    #fragranttea #product .productList .product-info .product-detail h3 a,#fragranttea #product .productList .product-info .product-detail p a{color:white}
    #bookBox:after{background:unset}
}

/* 小遊戲 */
table,td{border:1px solid white;color:#fff;background-color:#606060;border-collapse:collapse;text-align:center}
thead,tfoot{background-color:#71B6A1;color:#fff;height:50px}
.nambox div table{width:50%;margin:0 auto;height:300px}
#detection_btn{height:50px;background-color:#5e9484;border-radius:50px;width:150px;font-size:20px}
#detection_btn:hover{background-color:red}
#lineBox{display:none;width:100%;height:100%;background:rgba(0,0,0,0.4);position:fixed;z-index:9999999999999999;top:0;text-align:center}
#lineBox #ask-wrap{margin:0 auto;display:table;position:relative;float:left;top:50%;left:50%;width:auto;text-align:center;transform:translate(-50%,-50%);width:80%;background:rgba(255,255,255,0.95);height:180px;border-radius:20px;color:#000}
#lineBox #ask-wrap a{display:block;font-size:40px}
#lineBox #ask-wrap .text p{font-size:18px;margin:10px 20px;text-align:center;line-height:27px}
#lineBox #ask-wrap .text ul{margin:0;padding:0;text-align:center}
#lineBox #ask-wrap .text ul li{display:inline-block;margin:0 10px}
#lineBox #ask-wrap .text{position:absolute;width:100%;height:calc(100% - 51px);overflow:hidden}
#lineBox #ask-wrap .gogogog{position:absolute;width:100%;height:50px;bottom:0;border-top:1px solid #d7d7d7;text-align:center}
#lineBox #ask-wrap .gogogog a{color:#163e86;display:inline-block;line-height:50px;font-size:20px;font-weight:400;text-decoration:none}

@media screen and (max-width: 1024px) {
    .nambox div table {
        width: 100%;
    }
}

.text{display:flex;justify-content:center;align-items:center}
input[type=radio]{border:0px;width:20%;height:20px}
#jump_div{position:relative;padding-top:95px;padding-bottom:0;background-color:unset;margin-top:0;border-bottom:#dfdfdf 1px solid}
body,html{width:100%;height:100%;display:flex}
#detection_div{position:relative;margin:auto;width:149px;line-height:64px;text-align:center;color:#fff;font-size:20px;border:2px solid #71B6A1;border-radius:10px;background:#71B6A1;transition:all .3s;cursor:pointer}
#detection_div:hover{filter:contrast(1.1)}
#detection_div:active{filter:contrast(0.9)}
#detection_div::before,#detection_div::after{content:"";position:absolute;top:-10px;left:-10px;right:-10px;bottom:-10px;border:1px solid #71B6A1;transition:all .5s;animation:clippath 3s infinite linear;border-radius:10px}
#detection_div::after{animation:clippath 3s infinite -1.5s linear}
@keyframes clippath{0%,100%{clip-path:inset(0 0 98% 0)}
25%{clip-path:inset(0 98% 0 0)}
50%{clip-path:inset(98% 0 0 0)}
75%{clip-path:inset(0 0 0 98%)}
}.bg::before{background:rgba(255,215,0,.5)}
#detection_div{margin-top:40px;position:relative;display:block;display:flex;align-items:center;padding:0 25px;letter-spacing:0.05em}
#detection_div:hover svg{stroke-dasharray:116.18 116.18;-webkit-transform:rotate(-90deg);transform:rotate(-90deg);-webkit-animation:circle 0.3s 1,circle2 0.3s 1;animation:circle 0.3s 1,circle2 0.3s 1}
#detection_div > span svg{position:absolute;top:0;right:10px;bottom:0;width:39px;height:39px;margin:auto;stroke-dasharray:0 116.18}
#detection_div > span{display:flex}
#detection_div:hover svg > circle{stroke-width:2px}
#detection_div > span circle{fill:transparent;stroke:#fff;stroke-width:0;cx:19.5px;cy:19.5px;r:18.5px}
#detection_div > span:after{position:absolute;top:0;right:17.9px;bottom:0;display:block;width:25.15px;height:12.57px;margin:auto;content:"";background:url(/images/05/right-arrowJ.svg) center no-repeat;background-size:100% auto}
@keyframes circle{0%{stroke-dasharray:0 116.18}
99.9%,to{stroke-dasharray:116.18 116.18}
}#jump_text{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
#jump_text{color:#444;letter-spacing:2px}
#jump_text:nth-of-type(1){}
@keyframes neon-shine{0%{opacity:1}
90%{opacity:0}
100%{color:#232323}
}