.wraprow { position: relative; padding: 5vw 0; }
.wraprow .bg {position: absolute;width: 100%;height: 100%;background: no-repeat 50% / cover;opacity: .3;top: 0;left: 0;z-index: -1;}
.wraprow .titBox {color: var(--info);position: relative;font-family: "Tinos", serif;font-size: 65px;}
.wraprow .titBox:before{content:url(/images/35/dot.png);position: absolute;left: -30px;top: -55px;}
.wraprow .titBox font { font-weight: 500; font-size: 35px; vertical-align: baseline; }
.wraprow .titBox font:last-child { margin-left: 10px; font-weight: 400; font-size: 20px; }
.wraprow .more {position: relative;}
.wraprow .more a {padding: 20px 26px;background: var(--primary);display: inline-flex;text-align: center;gap: 75px;}
.wraprow .more a font {position: relative;font-size: 15px;color: white;z-index: 2;-webkit-transition-duration: .3s;transition-duration: .3s;font-family: "Tinos", serif;letter-spacing: .25px;}
.wraprow .more a span {transform:rotate(-90deg);}
.wraprow .more a span svg{fill:white}

/* aboutBox */
#aboutBox {padding: 285px 16% 205px 8%;display: grid;grid-template-columns: 48% 36%;justify-content: space-between;}
#aboutBox:before{content:url(/images/35/leaf-shadow.png);position: absolute;right: 0;top: -30%;}
#aboutBox .bg {width: 390px;background: url(/images/35/img-about-left.png) no-repeat 50% / cover;display: block;opacity: 1;height: 935px;top: unset;bottom: 0;z-index: -1;}
#aboutBox .plant {position: absolute;right: 0;bottom: -50px;}
#aboutBox .plant:before{content:url(/images/35/potted-plant.png);position: absolute;left: 160px;bottom: 60px;}
#aboutBox .workframe {width: 100%;font-size: 0;}
#aboutBox .h1tit{font-size:24px;line-height: 1.7;font-weight: 400;color: var(--black);word-break: keep-all;margin: 10px 0 50px;}
#aboutBox .titBox font { margin: 0 0 5px; display: block; line-height: 100%; font-size: 35px; color: #fff; }
#aboutBox .info article p {margin-bottom: 20px;line-height: 235%;color: var(--black);font-size: 17px;text-align: justify;}
#aboutBox .info .more {position: absolute;left: -68%;bottom: 85px;}
#aboutBox .img {width: 100%;z-index: 1;order: -1;height: 590px;display: flex;align-items: center;justify-content: center;}
#aboutBox .img:after{content:'';position: absolute;width: 80%;height: 114%;border: 1px solid #bebebe;z-index: 2;opacity: .7;}
#aboutBox .img >div{width: 100%;background: no-repeat 50% / cover;z-index: 1;order: -1;height: 590px;position: relative;}
#aboutBox .img >div:before{content:'';width: 220px;position: absolute;height: 1px;background: #bebebe;right: -165px;top: 55px;}
#aboutBox .img:before{content:url(/images/35/shadow.png);position: absolute;right: -230px;top: -100px;z-index: -1;transform-origin: 25% 15%;  /* 像葉柄固定點：左上偏一點 */animation: oakSway 3.8s ease-in-out infinite;will-change: transform;}
@keyframes oakSway{0%{transform:rotate(-3deg) translateY(0);}25%{transform:rotate(2deg)  translateY(2px);}50%{transform:rotate(-1deg) translateY(0);}75%{transform:rotate(3deg)  translateY(3px);}100%{transform:rotate(-3deg) translateY(0);}}
#aboutBox .fixTxt{position:absolute;font-family: "Tinos", serif;font-size: 700px;bottom: 40px;left: 40%;opacity: .3;color: transparent;background: linear-gradient(
211deg, rgb(0 0 0 / 0%), rgb(75 75 75 / 50%));-webkit-background-clip: text;background-clip: text;pointer-events: none;line-height: 1;z-index: -1;font-weight: 900;}

/* productBox */
#productBox{padding-top:165px}
#productBox .workframe{margin:0;display: grid;grid-template-columns: 86% 1fr;width: min(90%, 1710px);justify-content: space-between;}
#productBox .producttitBox {order:2;display: flex;flex-direction: column;align-items: center;gap: 135px;margin-left: 50px;}
#productBox .producttitBox *{writing-mode: vertical-rl}
#productBox .producttitBox font:first-child{font-family: "Tinos", serif;font-size: 35px;color: var(--secondary);line-height: 1.5;}
#productBox .producttitBox font.sub{font-size:24px;position: relative;}
#productBox .producttitBox font.sub:before{content:url(/images/35/dot.png);position: absolute;left: -4px;top: -75px;}
#productBox ul {margin-left:-115px}
#productBox ul li {position: relative;margin: 0 45px;}
#productBox ul li .img {position: absolute;width: 100%;border: 1px solid #bebebe;transition: transform .3s cubic-bezier(.25,.46,.45,.94),-webkit-transform .3s cubic-bezier(.25,.46,.45,.94);left: -40px;top: 0;aspect-ratio: 79 / 123;}
#productBox ul li .img p{color:#525252;font-size: 15px;letter-spacing: 2px;padding: 25px 40px;}
#productBox ul li a {position: relative;z-index: 2;margin-top: 75px;}
#productBox ul li a:after{content:'';background: linear-gradient(180deg,rgb(0 0 0 / 0%), rgb(0 0 0 / 50%));position: absolute;width: 100%;height: 100%;top: 0;opacity: 0;}
#productBox ul li:hover a:after{opacity:1}
#productBox ul li b{position:absolute;bottom: -20px;width: 100%;display: flex;justify-content: center;align-items: center;font-family: "Tinos", serif;color: white;font-size: 13px;letter-spacing: 1px;gap: 30px;z-index: 2;font-weight: 100;}
#productBox ul li:hover b{bottom:35px}
#productBox ul li b:after, #productBox ul li b:before{content:'';width: 20%;height: 1px;background: white;opacity: .2;}

/* discount_area */
#discount_area{overflow:hidden;padding-bottom: 0;}
#discount_area:before{content:url(/images/35/leaf-shadow2.png);position: absolute;top: -340px;left: 0;z-index: -1;}
#discount_area .bg {width: 47%;left: unset;right: 0;z-index: -1;height: 80%;background-position: top right;background-size: cover;opacity: 1;}
#discount_area .text{width: 70%;margin: 0 auto 5vw;}
#discount_area .twoBox{display:flex;flex-wrap: wrap;justify-content: space-between;width: min(90%, 1240px);margin-left: calc(7% + 11px);}
#discount_area .twoBox .boxx{width:50%;position:relative;}
#discount_area .twoBox .boxx a{position:absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: 3;}
#discount_area .twoBox .boxx .img:after, #service_area .custom_list >div:after{content:'';width: 100%;height: 100%;position: absolute;top: 0;left: 0;background: linear-gradient(110deg, #828282, #111111);opacity: .85;}
#discount_area .twoBox .boxx img{height:240px;width: 100%;object-fit: cover;}
#discount_area .twoBox .boxx .info{position:absolute;bottom: 25px;left: 90px;z-index: 2;}
#discount_area .twoBox .boxx .info p{color:#fff;font-size: 17px;margin-bottom: 10px;}
#discount_area .twoBox .boxx .info .h3{font-family: "Arimo", sans-serif;font-size: 33px;color: #fff;position: relative;}
#discount_area .twoBox .boxx .info .h3 svg{fill:#fff;width: 15px;height: 15px;margin-left: 65px;transition: all linear 0.3s;}
#discount_area .twoBox .boxx:hover .info .h3 svg{margin-left: 75px;}

/* bookBox */
#bookBox { padding: 8vw 0; }
#bookBox .bg { width: calc(100% - 5vw); height: calc(100% - 10vw); box-shadow: 0px 15px 15px rgba(26, 26, 51, .1); left: 5vw; top: 5vw; opacity: 1; }
#bookBox ul { font-size: 0; }
#bookBox ul li { position: relative; overflow: hidden; margin: 30px; width: 450px; display: inline-block; }
#bookBox ul li h3 { position: absolute; padding: 20px; width: calc(65% - 20px); background: #fff; right: 0; bottom: 0; }
#bookBox ul li h3 a { height: 70px; font-weight: 400; font-size: 20px; color: #434343; -webkit-line-clamp: 2; }

/* youtubeBox */
#youtubeBox { position: relative; padding: 3vw 0 6vw; }
#youtubeBox .bg { width: 630px; height: 575px; background: url(/images/35/img-aboutBg.jpg) no-repeat 50% / cover; top: -1vw; left: auto; right: 0; opacity: 1; }
#youtubeBox iframe { margin-top: 40px; width: 960px; height: 576px; }

/* NewsBox */
#NewsBox {padding: 5vw 0 2vw;width: min(100%, 1320px);}
#NewsBox:after{content:'';background: url(/images/35/Bg.jpg);position: absolute;top: 0;right: 0;width: 50%;height: 100%;z-index: -1;}
#NewsBox .newslist {margin: 0 150px 0 230px;}
#NewsBox .listbox{position:relative;border: 0;padding: 5px 0;}
#NewsBox .listbox:after {content:'';width: calc(100% - 2px);height: 5px;display: block;margin: 30px 0;background: linear-gradient(to right, #dadada, #dadada 2px, transparent 2px, transparent 4px);background-repeat: repeat-x;background-size: 4px 1px;background-position: 50% 50%;border-right: 1px solid #dadada;border-left: 1px solid #dadada;}
#NewsBox .info_box{display:flex;padding: 0 30px;flex-wrap: wrap;align-items: center;}
#NewsBox .info_box p{font-family: "Arimo", sans-serif;color:#242424;font-size:16px;width: 120px;margin: 0;font-weight: 500;}
#NewsBox .info_box .h3{height:auto;font-size: 18px;font-weight: 400;width: calc(100% - 120px);}

@media screen and (max-width: 1680px){
	#productBox .workframe { width: 90%; }
	#customBox .btn a { width: 45px; }
	#customBox ul li .info { width: calc(90% - 90px); }
}
@media screen and (max-width: 1440px){
    #aboutBox{padding: 285px 8% 205px;}
    #discount_area .text{width: 80%;}
    #discount_area .bg{width: 40%;}
}
@media screen and (max-width: 1400px){
    #NewsBox{width: min(100%, 1100px);}
    #discount_area .twoBox{margin:0 auto;}
    #aboutBox .plant:before{zoom:80%}
    #NewsBox .newslist{margin: 0 150px 0;}
}
@media screen and (min-width: 1281px){
    #discount_area .bg{background-attachment: fixed;}
	.wraprow .more:hover a font { color: #fff; }
	.wraprow .more:hover a span { right: 30px; }
	.wraprow .more:hover a:after { width: 252px; }
	#productBox .bg {width: 92%;height: 100%;top: 0;left: 0;opacity: 1;z-index: -1;}
	#productBox ul li:hover .img {-webkit-transform: scale(.95);transform: scale(.95);background-image: url(/images/35/potted-plant-bg.png);background-size: cover;}
    #productBox ul li:hover .img p{color:white;}
	#customBox .btn a#prevBtn:hover { left: 10px; }
	#customBox .btn a#nextBtn:hover { right: 10px; }
	#bookBox ul li:hover a.photo { -webkit-transform: translate(0) scale(1.2); transform: translate(0) scale(1.2); }
	#NewsBox ul li:hover { background: url(/images/35/img-newsHBg.jpg); }
}
@media screen and (max-width: 1280px){
    #discount_area .text{width: 90%;}
}
@media screen and (max-width: 1024px){
    #NewsBox .newslist{margin: 0 5%;}
    #discount_area .twoBox{width:100%}
    #aboutBox .fixTxt{bottom: 20%;}
    #aboutBox .info .more{position:relative;left: 0;bottom: 0;margin-top: 50px;}
    #aboutBox .bg, #discount_area .bg{display:none;}
    #aboutBox{grid-template-columns: 1fr;padding: 215px 5% 205px;gap: 80px;}
}
@media screen and (max-width: 980px){
    #discount_area .text{margin-bottom:10vw}
    #discount_area .twoBox .boxx{width:100%}
    .wraprow{padding: 10vw 0;}
    #aboutBox{padding-top: 120px;}
    #productBox .producttitBox{display:flex;flex-direction: column;margin-bottom: 50px;gap: 25px;margin-left: 0;align-content: space-around;width: 50%;}
	#productBox .workframe{display:block;margin: 0 auto;}
    #productBox .producttitBox *{writing-mode: unset;width: 100%;}
    #productBox .producttitBox font.sub{text-align:end;}
    #productBox .producttitBox font.sub:before{left: 53%;top: -25px;}
}
@media screen and (max-width: 640px){
    #NewsBox{padding: 9vw 0 4vw;}
    #discount_area .twoBox .boxx .info .h3{font-size:28px;}
    #discount_area .twoBox .boxx .info{left: 30px;}
    #productBox ul li{margin-right:0}
    #productBox ul{margin: 0 auto;width: 90%;}
    #productBox .producttitBox{width: 90%;}
    #aboutBox .plant{width:80%}
    #aboutBox .plant:before{zoom: 65%;left: unset;right: 20px;}
    #aboutBox .fixTxt{bottom: 30%;}
    #aboutBox .h1tit{font-size: 22px;}
    .wraprow .titBox{font-size:55px;margin-left: 30px;}
    #aboutBox{display: flex;flex-direction: column;padding-bottom: 120px;}
    #aboutBox .img >div{height: 320px;}
	.wraprow .titBox:before { width: 50px; }
	.wraprow .titBox font:last-child { margin-top: -10px; display: block; text-align: right; }
	#aboutBox .info .more { margin: 30px 0 50px auto; }
	#aboutBox .img {height: auto;}
	#aboutBox .img:before{ display: none; }
	#bookBox ul { text-align: center; }
	#bookBox ul li , #bookBox ul li:nth-child(2n) { margin: 15px 0; width: 90%; }
	#NewsBox ul li a { padding: 10px 0; }
	#NewsBox ul li a font.time { padding: 0; width: 100%; display: block; font-size: 12px; color: #aaaab9; }
	#NewsBox ul li a font.txt { width: 100%; display: block; }
	#NewsBox ul li a font.arrow { display: none; }
    #NewsBox .info_box{padding: 0 10px;display: flex;flex-direction: column;align-items: flex-start;}
    #NewsBox .info_box .h3{width:100%}
}