#wrap {z-idex: 5;width: 100vw;}
#productJ_box .platlist li *{transition: all 0.3s ease-in-out;-webkit-transition: all 0.3s ease-in-out;}
/* section */
section{padding:5vw 0 3vw}
section >*{z-index:3}
section .title_box{font-size:45px;text-transform:uppercase;font-weight:600;line-height:120%}
section .h2_title{font-size:26px;color:#2b2a2a;letter-spacing:4px;font-weight:500;position:relative}
section .h2_title:before{content:'';position:absolute;width: 40%;height: 1px;right: 50px;background:var(--secondary)}
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_sub_list */
#product_sub_list >div { margin: auto; width: 100%; }
#product_sub_list li {width: 210px;display: block;}
#product_sub_list li .clip { height: 210px; -webkit-clip-path: url(#clip_sub_product); clip-path: url(#clip_sub_product); }
#product_sub_list li h3 { font-weight: 300; }

/* product_list */
#product_list { width: 600px; }
#product_list li .clip { height: 690px; -webkit-clip-path: url(#clip_product); clip-path: url(#clip_product); }
#product_list li .info_box { width: 367px; height: 228px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 367 228'%3E%3Cpath d='M367.78 126C374 16.84 244.78 11.74 169 1.62c-30.92-4.22-65.18-.49-89.25 18.28-10.07 8.27-21.49 9.51-30.69 14.7-10.8 7-24 26.55-31.88 38.77-20.79 30.78-25.12 73.93 3.58 101.93 42.82 40.82 125.08 59.41 182.75 51.15 18.44-2.61 31-8 48.42-10.85 17.13-1.86 30.89-3.56 48.43-10.85 33.48-12.81 54.43-40.22 67.42-78.75z' fill='%23f4ece5'/%3E%3C/svg%3E") no-repeat center / 100%; bottom: 0; left: 0; }
#product_list li .info_box >div { margin: auto; width: 80%; }
#product_list li .info_box h3 { height: auto; font-size: 20px; }
#product_list li .info_box p { margin-right: 10px; font-weight: 300; }
#product_list li .info_box p:first-letter { margin-right: 2px; font-size: 12px; }


/* about_area */
#about_area{padding: 9vw 0 0;position:relative;z-index:0;}
#about_area .workframe:after{content: "ABOUT WENYA FURNITURE";position:absolute;top:7%;z-index:-1;padding:0 60px;display:block;font-size:110px;letter-spacing:8px;line-height:1;text-align:center;white-space:nowrap;color: #ffffff;opacity:.4;pointer-events:none;-webkit-animation:scroll 100s linear infinite;animation:scroll 100s linear infinite;font-family:"Anybody",'Noto Sans TC','Noto Sans SC',sans-serif}
@keyframes scroll{from{-webkit-transform:translateX(70%);transform:translateX(70%)}
to{-webkit-transform:translateX(-100%);transform:translateX(-100%)}
}#about_area .workframe{width:80%;display:flex;flex-wrap:wrap;align-items:center;margin-left:250px}
#about_area .workframe:before{content:'';position:absolute;width: 67vw;height:109%;background:#fff;top: -71px;right:0;z-index:-5;background: url(/images/44/indexabout_bg.jpg);}
#about_area #about_img{margin:0;width:64%}
#about_area #about_info{margin-left:27px;margin-right:0}
#about_area .title_box{color:var(--secondary);width:100%}
#about_area article{position:relative;margin-top:100px;margin-bottom:50px;line-height:180%;letter-spacing:1px;font-weight:400;overflow: hidden;height: 87px;font-size: 16px;text-align: left;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;}
#about_area  .more_btn{position:absolute;left:-24%}
#about_area .deco01{position:absolute;bottom: 28%;left: 7vw;}
#about_area .deco02{position:absolute;top: 6%;right: 13vw;}
#about_area .deco02 img{animation: float 4s linear infinite;}
@keyframes float{0%{transform:translateY(0)}
50%{transform:translateY(-20px)}
100%{transform:translateY(0)}
}

/* custom_area */
#custom_area{position:relative}
#custom_area:before{content:'';position:absolute;width:97%;height:100%;background:#fff;right:0}
#custom_area .workframe{display:grid;grid-template-columns:1fr 50%;gap:50px;width: 85%;}
#custom_area .item article{margin-top:100px;line-height:210%}
#custom_area ul{display:grid;grid-template-columns:repeat(2,1fr);gap:50px 70px;padding-top:50px}
#custom_area ul li{display:grid;grid-template-columns:15% 1fr;gap:15px 20px}
#custom_area ul li .h3{margin:10px 0 5px;font-size:20px;color:#353835}
#custom_area ul li article{font-weight:300;font-size:13px;color:#646664}
#custom_area ul li .num{position:relative;grid-column:1 / 3;display:flex}
#custom_area ul li .num span:before{content:'';position:absolute;width:79%;height:1px;background:#eee;right:0;top:12px}
#custom_area .deco03{position:absolute;left:0;bottom: -9%;z-index: 987;width: 45vw;}
#custom_area .deco03:before{content:'';position:absolute;height:187px;width:1px;background:#d6d9d5;right:16%;top:-44%}
#custom_area .deco04{position:absolute;left:12%;bottom: -18%;z-index: 989;}

/* news_area */
#news_area{position:relative;padding-top: 100px;padding-bottom: 100px;display: flex;align-items: center;}
#news_area:before{content:'';position:absolute;width: 18vw;height:100%;background-repeat:no-repeat;background-position:50% 50%;background-size:cover;bottom:0;right:0;/* background-image:url(/images/44/img-news01.jpg); */background-color: #e2e2e2;}
#news_area:after{content:'';position:absolute;width:50%;height:200%;top:-200px;left:0;opacity:.2;z-index:0}
#news_area .shadow:after{content:url(/images/44/img-shadow01.png);position:absolute;left:-10%;top:-70%;animation-name:leaf2;animation-direction:alternate;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-duration:2s}
#news_area .bg{position:absolute;right:0;top:0;height:100%;width:30%;background-size:cover;background-position:50% 50%;z-index:2;display: none;}
#news_area .item{position:relative;margin-bottom:100px}
#news_area .item .more_btn{position:absolute;right:0;bottom:10px}
#news_area .list_box{width: 100%;padding-bottom:30px}
#news_area .workframe{position:relative;width: 40vw;margin-left: 10vw;z-index:5}
#news_area .tt_box h2{text-align:left}
#news_area .sub_title{display:flex;flex-direction:row;align-items:center}
#news_area .sub_title:before,#product_area .sub_title:before{box-shadow:20px 0px var(--secondary);background:var(--primary);margin:0 35px 0 0}
#news_area .tt_box{position:relative}
#news_area .tt_box a{position:absolute;right:0;bottom:0}
#news_list li{margin: 5px 0 12px;border-bottom: #e2e2e2 3px double;}
#news_list li .item_row{padding:15px 0px;position:relative}
#news_list li .item_row a{position:absolute;width:100%;height:100%;top:0;left:0;z-index:2}
#news_list .info_box{display:grid;grid-template-columns:100px 1fr 50px;align-items:center;justify-content:space-between;gap:30px}
#news_list .info_box a{background:var(--info);display:inline-block;padding:9px 0;height:auto;font-weight:300}
#news_list li:hover .info_box a{background:#ececed;color:var(--info)}
#news_list .info_box .time{font-size:14px;color:#505050;font-family:"Lato",serif}
#news_list .info_box .h3{font-weight:500;font-size:18px;overflow:hidden;height:auto;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;letter-spacing:1px}
#news_list li:hover .info_box h3{color:var(--primary)}
#news_list .item_row span{position:relative;width:40px;height:1px;background:var(--primary);display:block;right:0;top:0%;z-index:3;-webkit-transition-duration:.2s;transition-duration:.2s}
#news_list .item_row span:before{position:absolute;width:0;height:0;border-style:solid;border-width:0 15px 7px 0;border-color:transparent transparent var(--primary) transparent;right:-1px;bottom:50%;content:""}
#news_list .item_row:hover span{margin-right:10px}
#news_list .info_box article{margin-bottom:.5em;height:3.2em;font-size:.9em;color:var(--g_600);-webkit-line-clamp:2}
@keyframes leaf2{0%{opacity:.25;transform-origin:right top;transform:rotate(-3deg)}
100%{opacity:.35;transform-origin:right top;transform:rotate(3deg)}
}

#productJ_box{width: 45vw;position: absolute;right: 0;}
#productJ_box .platlist li{height:100%;display: flex;flex-direction: column;gap: 10px;margin: 0 6px;}
#productJ_box .platlist li img{width:100%;object-fit: cover;aspect-ratio: 3/5;border-radius: 666px;}
#productJ_box .platlist li:before{content:"";position:absolute;width: 4vw;aspect-ratio: 1/1;border-radius: 6666px;background: rgb(123 122 122 / 57%);left: 3vw;top: 2vw;}
#productJ_box .platlist li.slick-current:before{left: 1vw;top: -1vw;}
#productJ_box .platlist .slick-list{overflow:visible;}
#productJ_box .platlist li{opacity:0;}
#productJ_box .platlist li .clip{padding-bottom: 32px;display: flex;flex-direction: column;align-items: center;}
#productJ_box .platlist li .clip:before{content:"";box-shadow: 0px -7px 8px rgb(0 0 0);width: 60%;height: 1px;bottom: 0;position: absolute;opacity: 0;}
#productJ_box .platlist li.slick-current .clip:before ,#productJ_box .platlist li:hover .clip:before{opacity: 0.4;}
#productJ_box .platlist li.slick-active{opacity:1;}
#productJ_box .platlist li:hover .clip{-moz-transform: translateY(-0.75em);-webkit-transform: translateY(-0.75em);-o-transform: translateY(-0.75em);-ms-transform: translateY(-0.75em);transform: translateY(-0.75em);}
/* photo_area */
#photo_area{position:relative;padding-bottom: 6vw;}
#photo_area .shadow:after{content:url(/images/44/img-shadow02.png);position:absolute;right: -7%;top: -23%;animation-name:leaf1;animation-direction:alternate;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-duration:2s;z-index: 6;opacity:0.7}
#photo_area .workframe{width:100%}
#photo_area ul li ,#photo_area ul li *{transition: all 0.3s ease-in-out;-webkit-transition: all 0.3s ease-in-out;}
#photo_area .item{padding-left: 53.5%;margin-bottom:70px}
#photo_area .item:before{content:'';position:absolute;width:1px;height:190px;background:#d6d9d5;left:46%;top:68%;z-index:9}
#photo_area .item h2:before{display:none}
#photo_area li h3{margin-top:30px;height:30px;font-size:20px;font-weight:400;color:var(--info)}
#photo_area ul li.slick-current{transform: scale(1);}
#photo_area li .img_box{aspect-ratio:4/3}
#photo_area li .img_box ,#photo_area li .img_box img{border-radius:10px;}
#photo_area .more_btn{position: relative;display:flex;justify-content:center;width:100%;bottom:0;margin-top: 50px;}
#photo_area .more_btn a{width:210px}
#photo_area .more_btn a span{top:0px}
@keyframes leaf1{0%{transform-origin:right top;transform:rotate(-3deg)}100%{transform-origin:right top;transform:rotate(3deg)}}


@media screen and (max-width:1780px){
	#custom_area .deco03{left: -1vw;}
	#custom_area .deco04{left:5%}
}
@media screen and (max-width:1470px){
	
	#about_area{padding:11vw 0 5vw}
	#about_area .workframe:before{background-position: 50% 44%;}
	#about_area .workframe{width:90%;margin:0 auto;justify-content:space-evenly}
	#about_area #about_img{width:50%}
	#about_area #about_info{width:40%}
	#about_area .about_sub_1,#about_area .about_sub_2,#about_area .about_sub_3{width:20vw}
	#about_area .deco02{display:none}
	#about_area .more_btn{left:0}
	#custom_area .deco03{left: 0vw;}
	#custom_area .workframe .item{margin-top: 60px;}
	#custom_area ul{padding-top:0px;}
	#product_list{width:500px;margin-left:30px}
	#product_list li .clip{height:590px}
	#about_area .about_sub_2{top:-20vw;right:6vw}
	#productJ_box .platlist li.slick-current:before{left: 3vw;top: 0vw;}
	#productJ_box .platlist li img{aspect-ratio: 3 / 4;}
    #news_area{padding-top: 80px;padding-bottom: 80px;}
}
@media screen and (min-width:1281px){
	#photo_area ul li{position:relative;margin-top: 0;transform: scale(0.9);margin: 0px 20px;}
	#photo_area ul li.slick-current{margin-top:0}
	#photo_area .slick-list{}
}
@media screen and (max-width:1280px){
	#about_area .deco01{display:none}
	#about_area .workframe{display:flex;flex-direction:column;gap:60px}
	#about_area .workframe:before{display:none}
	#about_area .workframe:after{top:0%;color:#d5d5d5}
	#about_area .clip{display:flex;justify-content:center;align-items:center}
	#about_area #about_img,#about_area #about_info{width:100%;margin:0}
	#news_area .shadow:after{display:none}
	#custom_area:before{width:100%}
	#custom_area .workframe{grid-template-columns:1fr}
	#custom_area .deco04{display:none}
	#photo_area .item:before{display:none}
	#photo_area .item{padding-left: 7%;margin-bottom:45px}
	#photo_area ul li{padding:0 20px}
	#photo_area ul li.slick-current{transform:scale(1)}
	#photo_area .more_btn{position:relative;padding-top:75px}
	#custom_area .deco03{display:none;}
	#custom_area .item article{margin-top: 40px;}
	#news_area .workframe{margin-left: 6vw;width: 45vw;}
	#news_area .item{margin-bottom:20px;}
}
@media screen and (max-width:1024px){
	#product_list{margin:auto}
	#news_area li h3{height:30px;-webkit-line-clamp:1}
}
@media screen and (max-width:980px){
	section{padding-top:10vw}
	#product_list{width:500px}
	#product_list li .clip{height:590px}
	#about_area #about_info{margin-bottom:8vw}
	#about_area .about_sub_2{top:auto;bottom:35vw;width:35vw}
	#about_area .about_sub_3{width:29vw;left:10vw}
}
@media screen and (max-width:768px){
	section .title_box{font-size:35px;margin-bottom:20px}
	section .h2_title{font-size:22px}
	section{padding:8vw 0 8vw}
	#about_area .workframe:after{font-size:60px}
	#news_area{display:flex;flex-direction: column;}
	#news_area:before{display:none}
	#news_area .workframe{display:flex;flex-direction:column;margin:0;width:100%}
	#news_area .bg{position:relative;height:630px;width:100%}
	#news_area .item{padding-left:5%}
	#news_area .list_box{width: 90%;padding-bottom:70px;margin: 0 auto;}
	#news_list .item_row span{display:none}
	#news_list .info_box{grid-template-columns:1fr}
	#custom_area ul{grid-template-columns:repeat(1,1fr);padding-top:0}
	#photo_area{padding-bottom:70px}
	#product_sub_list>div{margin:10px auto 50px}
	#product_sub_list li{width:150px}
	#product_sub_list li .clip{height:150px}
	#product_list{width:70vw}
	#product_list li .clip{height:80vw}
	#product_list li .info_box{width:45vw;height:30vw}
	#productJ_box{position: relative;width: min(500px , 85%);}
	
}
@media screen and (max-width:550px){
	#product_sub_list li{margin:10px;width:35vw}
	#product_sub_list li .clip{height:35vw}
	#product_list{width:90vw}
	#product_list li .clip{height:100vw}
	#product_list li .info_box{width:55vw;height:40vw}
	#about_area #about_img{width:80vw}
	#about_area .about_sub_2{bottom:60vw}
	#news_area li .row{margin:auto;width:280px}
	#about_area .workframe{gap: 20px;}
	#about_area article{margin-top: 30px;}
	#photo_area .more_btn{padding-top: 0;margin-top: 40px;}
}
@media screen and (max-width:480px){
	#book_area li.row{margin:auto;width:250px}
}