section {position: relative;padding: 5vw 0;}
section >.bg { position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 1; opacity: .3; }
section >.info { position: relative; font-size: 0; z-index: 2; }
section .entit {line-height: 120%;text-transform: uppercase;letter-spacing: 1px;font-size: 50px;font-family: "Cormorant Garamond", serif;color: var(--triadic1);}
section .tit {line-height: 120%;text-transform: uppercase;letter-spacing: 5px;font-size: 32px;font-family: "Noto Serif TC", serif;color: var(--info);}
section .more {margin-top: 40px;}
section .more a {position: relative;display: inline-flex;gap: 20px;align-items: center;}
section .more font, section .more span {text-align: center;font-weight: 500;text-transform: uppercase;letter-spacing: .5px;color: #a98451;font-family: "Cormorant Garamond", serif;font-size: 13px;}
section .more b{width:45px;background: #86673c;aspect-ratio: 1/1;display: flex;border-radius: 50px;align-items: center;justify-content: center;}
section .more a:hover b{background:var(--secondary)}
section .more a svg.arrow { position: absolute; width: 20px; right: 20px; top: calc((100% - 11.41px) / 2); }
section .more.white a , section .more.white font { border-color: #fff; color: #fff; }

/* newsBox */
#newsBox {padding-top: 0;}
#newsBox:before{content:url(/images/37/img-nleaf.png);position: absolute;top: -180px;left: -30px;transform-origin: 0% 0%;          /* 左上角當旋轉中心 */animation: newsLeafFloat 9.5s ease-in-out infinite;will-change: transform;}
@keyframes newsLeafFloat{0%{transform:rotate(-2deg) translate(0,0);}25%{transform:rotate(2.5deg) translate(6px,4px);}50%{transform:rotate(-1.5deg) translate(3px,8px);}75%{transform:rotate(2deg) translate(7px,3px);}100%{transform:rotate(-2deg) translate(0,0);}}
#newsBox .bg{opacity:1;top: 55%;z-index: -1;background-position: top;background-size: cover;background-repeat: no-repeat;height: 120vh;}
#newsBox .info {width: 87%;display: grid;margin: 0 auto;grid-template-columns: 30% 65%;justify-content: space-between;}
#newsBox .info .photo {margin-top: 140px;position: relative;}
#newsBox .info .photo span{position:absolute;z-index: -1;animation: aboutImgAnimation 6s ease-in-out infinite;}
#newsBox .info .photo .ngradient1{left: -85px;bottom: -50px;animation: aboutImgAnimation 10s ease-in-out infinite;}
#newsBox .info .photo .ngradient2{bottom:-125px;left: 60px;animation: aboutImgAnimation 6s ease-in-out infinite;}
#newsBox .info .photo .ngradient3{top:-120px;right: 170px;}
@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);}}
#newsBox .info .entit {display:flex;align-items: baseline;justify-content: space-between;width: 88%;margin-bottom: 50px;}
#newsBox .info .entit span{font-size:18px;color: var(--triadic1);font-family: "Noto Serif TC", serif;font-weight: 400;letter-spacing: 1.5px;}
#newsList{display:grid;gap: 30px;}
#newsList li{position:relative;border-bottom: 1px solid rgb(119 89 56 / 35%);padding: 0 11% 35px 0;}
#newsList li:before{content:'';position: absolute;width: 0;height: 1px;bottom: -1px;left: 0;background: var(--triadic1);}
#newsList li:hover:before{width:100%}
#newsList li >a{position:absolute;width: 100%;height: 100%;top: 0;left: 0;z-index: 2;}
#newsList li .news_txt{display:grid;align-items: center;justify-content: space-between;grid-template-columns: 85px 125px 1fr 30px;gap: 15px;}
#newsList li:hover .news_txt svg{transform: translateX(15px);}
#newsList li .news_txt a{font-size:17px;color: #99723f;border-right: 1px solid #99723f;font-weight: 500;}
#newsList li .time{font-size: 17px;color: #99723f;font-family: "Cormorant Garamond", serif;text-transform: uppercase;font-weight: 600;}
#newsBox .nrbox {position:absolute;right: 80px;z-index: 10;display: flex;align-items: center;justify-content: center;bottom: -135px;}
#newsBox .nrbox:before{content:url(/images/37/img-nleaf2.png);position: absolute;right: -72px;right]: ;right]: 0;bottom: 88%;z-index: -1;transform-origin: 50% 80%;animation: nrLeafFloat 7s ease-in-out infinite;will-change: transform;}
@keyframes nrLeafFloat{0%{transform:rotate(0deg) translate(0,0);}25%{transform:rotate(2deg) translate(6px,4px);}50%{transform:rotate(-1.5deg) translate(3px,10px);}75%{transform:rotate(2.2deg) translate(7px,4px);}100%{transform:rotate(0deg) translate(0,0);}}
#newsBox .nrbox:after{content:'';width: calc(100% + 20px);height: calc(100% + 20px);border: 2px solid var(--secondary);position: absolute;}

/* productBox */
#productBox{padding-bottom:0}
#productBox .entit, #productBox .tit{text-align:center;}
#productBox .slick-list{overflow:unset}
#productBox .info{margin-top:100px;}
#productBox ul{width: 78%;margin: 0 auto;}
#productBox li { position: relative; display: grid; margin: 0 95px; justify-content: space-between; grid-template-columns: 1fr; align-items: center; }
#productBox li .img { width: 100%; position: relative; }
#productBox li.slick-current .img:before { content: url(/images/37/img-product.png); position: absolute; z-index: -1; top: -85px; left: -60px; transform-origin: 100% 100%; animation: productFloat 6.5s ease-in-out infinite; will-change: transform; }
@keyframes productFloat{0%{transform:rotate(0deg) translate(0,0);}25%{transform:rotate(1.5deg) translate(-3px,-4px);}50%{transform:rotate(-1.2deg) translate(2px,2px);}75%{transform:rotate(1deg) translate(-2px,3px);}100%{transform:rotate(0deg) translate(0,0);}}
#productBox li img{width:100%;aspect-ratio: 83 / 73;object-fit: cover;height: 475px;}
#productBox li >a{position:absolute;width: 100%;height: 100%;top: 0;z-index: 2;}
#productBox li .p_info{display:none;}
#productBox li .p_info .h3{color: var(--triadic1);font-size: 27px;height: auto;font-family: "Noto Serif TC", serif;font-weight: 500;border-bottom: 1px solid #775938;padding-bottom: 20px;margin-bottom: 30px;position: relative;}
#productBox li .p_info article{color: var(--info);height: auto;font-size: 15px;-webkit-line-clamp: 2;margin-bottom: 20px;}
#productBox li .p_info .Spe *{color:#7e7060;font-size: 15px;margin: 20px 0;}
#productBox li .p_info .Spe:before{content:'';width: 6px;aspect-ratio:1/1;display: block;background: #7e7060;border-radius: 50px;margin-bottom: 20px;box-shadow: 13px 0 #7e7060;}
#productBox li.slick-current{grid-template-columns: 64% 30%;}
#productBox li.slick-current .p_info{display:block;}

/* aboutBox */
#aboutBox {z-index: 1;display: flex;justify-content: center;}
#aboutBox:before {position: absolute;width: 61%;height: 93%;background: var(--triadic2);display: block;top: 300px;left: 0;z-index: -1;content: "";}
#aboutBox .leftpicture {position:absolute;left: 0;}
#aboutBox .rightpicture  {position:absolute;right: 0;bottom: -200px;z-index: -2;opacity: .7;}
#aboutBox .enfixTxt{position:absolute;font-family: "Cormorant Garamond", serif;font-size: 66px;text-transform: uppercase;color: var(--triadic2);letter-spacing: 9px;}
#aboutBox .fixTxt{font-size: 38px;position:absolute;font-family: "Noto Serif TC", serif;color: var(--triadic1);font-weight: 500;letter-spacing: 7px;margin-top: 40px;}
#aboutBox .fixTxtsmall{position:absolute;bottom: 120px;font-family: "Cormorant Garamond", serif;color: #ba925a;font-size: 18px;left: 120px;}
#aboutBox .bg { width: 61%; height: 70%; background-attachment: fixed; top: 10%; right: 0; left: auto; opacity: 1; z-index: 3; }
#aboutBox .info {width: min(90%, 1330px);margin-top: 180px;}
#aboutBox .info .txtBox { position: relative; padding: 7vw 10vw 7vw 5vw; background: url(/userfiles/images/20200525120633201.jpg) no-repeat 50% / cover; }
#aboutBox .info .txtBox:before { position: absolute; width: 100%; height: 100%; background: rgb(68 68 68 / .7); top: 0; left: 0; content: ""; z-index: 1; }
#aboutBox .info .txtBox >div { position: relative; z-index: 2; }
#aboutBox .info .txtBox h3 { margin-bottom: 20px; font-size: 36px; color: #fff; }
#aboutBox .info .txtBox article { line-height: 230%; font-size: 17px; color: #fff; }
#aboutBox .info .txtBox .more { margin-top: 80px; text-align: left; }
#aboutBox #SeoStarRating font { vertical-align: middle; }
#aboutBox #SeoStarRating font:last-child { color: #fff; }
#aboutBox #SeoStarRating .fa { vertical-align: initial; }

/* sPictureBox */
#sPictureBox {padding-top: 0;z-index: 2;display: grid;grid-template-columns: 74% 22%;align-items: center;justify-content: space-between;}
#sPictureBox .tt{order:2;width: 80%;}
#sPictureBox .tt h1{font-family: "Noto Serif TC", serif;font-size: 17px;font-weight: 100;letter-spacing: 1px;margin-bottom: 20px;color: var(--info);}
#sPictureBox .tt p{color:#86673c;font-family: "Noto Serif TC", serif;font-size: 18px;letter-spacing: 1px;font-weight: 500;}
#sPictureBox .box{margin-left:-30px}
#sPictureBox .list { position: relative; }
#sPictureBox .list a { position: absolute; width: calc(100% - 60px); height: 100%; display: block; top: 0; left: 30px; z-index: 3; }
#sPictureBox .list .img {position: relative;margin: 0 20px;z-index: 1;}
#sPictureBox .list .img img {width: 100%;height: 310px;object-fit: cover;}
#sPictureBox .list .txt { position: absolute; padding: 65px 5%; width: calc(90% - 60px); background: -moz-linear-gradient(left,  rgba(240,244,247,1) 25%, rgba(240,244,247,0) 100%); background: -webkit-linear-gradient(left,  rgba(240,244,247,1) 25%,rgba(240,244,247,0) 100%); background: linear-gradient(to right,  rgba(240,244,247,1) 25%,rgba(240,244,247,0) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f0f4f7', endColorstr='#00f0f4f7',GradientType=1 ); top: 0; left: 30px; z-index: 2; }
#sPictureBox .list .txt h4 { width: 55%; height: 40px; font-weight: 400; font-size: 24px; color: #1f1f1f; }
#sPictureBox .list .txt .more { margin-top: 5px; text-align: left; }
#sPictureBox .list .txt .more font { margin-right: 10px; text-align: center; font-family: 'Montserrat', 'Noto Sans TC', sans-serif; font-weight: 500; text-transform: uppercase; letter-spacing: .7px; font-size: 13px; color: #1f1f1f; }

/* secabout */
#secabout { margin-top: -5vw; padding: 20vw 0 10vw; background: url(/images/37/img-secaboutBg.jpg) no-repeat 50% / cover; z-index: 1; }
#secabout:before { position: absolute; width: 87vw; height: calc(100% - 20vw); background: #fff; display: block; top: 15vw; left: 0; content: ""; z-index: 1; }
#secabout >div { position: relative; margin: 0 auto 50px; width: 50vw; z-index: 2; }
#secabout #customBox ul li article { margin: 3vw 0 5vw; text-align: center; line-height: 190%; color: #1f1f1f; }
#secabout #youtubeBox { width: 85vw; background: rgba(31, 31, 31, .9); }
#secabout #youtubeBox a { position: absolute; width: 100%; height: 100%; display: block; z-index: 2; }
#secabout #youtubeBox .left { position: absolute; width: calc(100% - 400px); height: 100%; top: 0; left: 0; z-index: 3; }
#secabout #youtubeBox .left iframe { width: 100%; height: 100%; }
#secabout #youtubeBox .right { position: relative; margin: 0 0 0 auto; padding: 150px 50px; width: 300px; text-align: center; z-index: 1; }
#secabout #youtubeBox .right .tit { font-size: 24px; color: #fff; }
#secabout #youtubeBox .right .more { padding: 0 3px 5px; border-bottom: 1px #fff solid; display: inline-block; color: #fff; }
#secabout #youtubeBox .right .more font { margin-right: 20px; font-family: 'Montserrat', 'Noto Sans TC', sans-serif; text-transform: uppercase; letter-spacing: 3px; font-size: 13px; }

/* bookBox */
#bookBox .topBox { position: relative; margin: 0 auto 5vw; width: 80vw; }
#bookBox .topBox .title { position: absolute; }
#bookBox .topBox .more { text-align: right; }
#bookBox .list ul li .img { overflow: hidden; position: relative; margin: 0 40px 0 60px; z-index: 1; }
#bookBox .list ul li .img:before { position: absolute; width: 100%; height: 100%; background: rgb(240 244 247 / .6); display: block; top: 0; left: 0; opacity: 0; z-index: 2; content: ""; }
#bookBox .list ul li .img img { position: relative; width: 100%; height: 30vw; object-fit: cover; z-index: 1; }
#bookBox .list ul li .info { position: relative; margin-top: -14%; padding: 7% 5%; width: 350px; background: rgba(0,0,0,.7); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); z-index: 2; }
#bookBox .list ul li .info h3 { height: 40px; font-weight: 400; font-size: 24px; color: #fff; }
#bookBox .list ul li .info .more { text-align: left; }
#bookBox .list ul li:nth-child(2n) .img { margin: 0 0 0 100px; }
#bookBox .list ul li:nth-child(2n) .info { margin-left: 40px; }

@media screen and (max-width:1680px) {
    #aboutBox .leftpicture{left: -5%;}
}
@media screen and (max-width:1440px) {
    #newsBox .info .photo .ngradient3{right: 90px;}
    #aboutBox .leftpicture{left: -13%;}
    #newsBox .nrbox{display:none;}
}
@media screen and (max-width:1280px) {
    #productBox li{margin: 0 55px;}
    #newsList li .news_txt{grid-template-columns: 85px 85px 1fr 30px;}
}
@media screen and (max-width:1024px) {
    #productBox ul{width:100%;}
    #newsBox{padding-top: 15vw;}
    #newsBox .info .photo{display:none;}
    #newsBox .info{grid-template-columns:1fr}
    #sPictureBox .box{margin:0}
    #sPictureBox .tt{margin: 40px auto;}
    #sPictureBox{display:block;}
    #aboutBox{padding-top:6vw}
    #aboutBox .enfixTxt{letter-spacing: 1.5px;}
    #aboutBox .leftpicture, #aboutBox .fixTxtsmall{display:none}
	#aboutBox .bg { width: 100%; height: calc(100% - (12vw + 54px)); top: calc(7vw + 54px); z-index: 1; }
	#aboutBox .info .txtBox { padding: 7vw 10vw; background: none; }
	#secabout:before { width: 90vw; }
	#secabout #customBox { width: 70vw; }
	#secabout #youtubeBox .left { position: relative; width: 100%; height: 400px; }
}
@media screen and (max-width: 980px) {
    #productBox li.slick-current .img:before{zoom:80%}
    #productBox li .p_info{display:block;width: 100%;}
    #productBox li img{height:auto;aspect-ratio: 5/3;}
    #productBox li{display: flex;flex-direction: column;gap: 30px;align-items: flex-start;}
    #sPictureBox .list .img img{height:250px;}
    #aboutBox .enfixTxt, #aboutBox:before{display:none;}
    #aboutBox{padding-top: 15vw;}
	#secabout:before { width: 0; }
	#secabout #customBox { width: 90vw; }
	#secabout #youtubeBox .left { height: 45vw; }
	#bookBox { padding-bottom: 5vw; }
	#bookBox .info { padding-bottom: 90px; }
	#bookBox .topBox , #bookBox .topBox .title { position: initial; }
	#bookBox .topBox .more { position: absolute; width: 100%; text-align: center; bottom: 0; left: 0; }
}
@media screen and (max-width:640px) {
    #productBox li.slick-current .img:before{zoom: 45%;top: -125px;}
    #productBox li{margin:0 15px;}
    #newsBox .bg{top: 70%;}
    #productBox{padding-top: 20vw;}
    #newsList li{padding-right:0}
    #newsList li .news_txt{grid-template-columns: 85px 85px;display: grid;justify-content: start;}
    #newsList li .news_txt .txt{grid-column: 1 / 4;}
    #newsList li .news_txt svg, #newsBox .more{display:none;}
    section .tit{font-size: 26px;margin-bottom: 5px;}
    section .entit{font-size: 43px;}
    #newsBox{padding-top: 8vw;}
    #newsBox:before, #newsBox .info .entit span{display:none;}
    #indexAbout .photo{width: 75%;}
    #aboutBox .fixTxt{font-size: 26px;}
}