.section_area{padding:5vmax 0 5vmax;overflow:hidden;position:relative}
section .area_title{position:relative;letter-spacing:.1em;font-weight:200;line-height:140%;text-transform:uppercase;font-size:3.8em;color:var(--primary)}
section .h2_title{font-size:1.6em;color:var(--primary);letter-spacing:2px}
.section_area .sub_title{font-weight:500;font-size:1.1em;color:var(--primary)}
section .more_btn{padding:.8em 2.2em;border:1px var(--secondary) solid;font-weight:500;color:var(--secondary);font-size:18px;font-weight:400;display:flex;align-items:center;width:200px;gap:20px;justify-content:center}
section .more_btn:hover{background-color:var(--secondary);color:#f7f0e5}
section .more_btn svg{fill:var(--secondary);width:20px;height:20px}
section .more_btn:hover svg{fill:#f7f0e5}
.section_area .list_box{margin-top:1vmax}
.section_area .list_box .item_row{margin:0 5em 0 0}
.section_area .list_box .slick-dots{position:relative;margin:1em 0;bottom:0}
#wrap{overflow:hidden}
#mainArea{position:relative;margin-top: 100px;}
#newstopArea{position:absolute;top:0;left:0;right:0;z-index:10;border-bottom:.5px solid #ffffff40;padding:20px 0}
#newstopArea .newsItem *{color:#fff;font-size:20px;font-weight:200;letter-spacing:1px}
#newstopArea .titboxx *{font-size:23px}
#newstopArea .newsItem{display:grid;grid-template-columns:90px 44%;justify-content:center;justify-items:stretch;align-items:center}
#newstopArea .newsItem .info_box{display:flex;align-items:baseline;gap:20px}
#newstopArea .newsItem .info_box font{width:130px}

/* about_area */
#about_area{background-color:var(--secondary)}
#about_area .more_btn{border:1px rgb(255 255 255 / 40%) solid}
#about_area .more_btn:hover{background-color:#f7f0e5;color:var(--secondary)}
#about_area .more_btn svg{fill:#f7f0e5}
#about_area .more_btn:hover svg{fill:var(--secondary)}
#about_area{width:100%;position:relative;overflow:hidden;padding:12vmax 0 10vmax}
#about_area::before{content:'';position:absolute;top:-7%;left:-100px;width:120%;height:120%;background-image:url(/images/01/img-leaf.webp);background-repeat:no-repeat;background-size:auto;animation:leafWobble 20s ease-in-out infinite alternate;mix-blend-mode:multiply}
@keyframes leafWobble{0%{transform:translate(0,0) rotate(0deg) scale(1);opacity:1}
50%{transform:translate(50px,-80px) rotate(1.5deg) scale(1.02)opacity:0.95}
100%{transform:translate(-80px,50px) rotate(-1deg) scale(0.98);opacity:1}
}#about_area .text-content *{color:#f7f0e5}
#about_area .workframe{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:stretch}
#about_area .brand-page{margin:0 auto;color:#ffffff}
#about_area .section{display:flex}
#about_area .about-us-section{padding-bottom:20vh}
#about_area .content-left,.content-right{flex:1;padding:80px 180px;display:flex;flex-direction:column;justify-content:center}
#about_area .main-image{width:100%;height:100%;object-fit:cover;display:block}
#about_area .about-us-section .content-left{flex:0.9;padding:0}
#about_area .about-us-section .content-right{flex:.6;padding-left:160px}
#about_area .our-story-section .content-left{flex:0.5;padding:80px 150px 80px 210px}
#about_area .our-story-section .content-right{flex:0.7;padding:0}
#about_area .description,#about_area .text-content .pageh1{line-height:2.2;font-size:1.5rem;font-weight:300;margin-bottom:1.5em;margin-top:30px;letter-spacing:1px}
#about_area .text-content .pageh1{margin-bottom:1.5em;margin-top:0}
#about_area .text-content{z-index:10;position:relative}


/* product_area */
#product_area .workframe{width:94vw;margin:0 0 0 auto;display:grid;grid-template-columns:430px  88%;gap:0 90px;align-items:start}
#product_area .TxtBox{display:flex;flex-direction:column;height:100%;justify-content:space-between}
#product_area #product_list .img_box img{aspect-ratio:4 / 2.9}
#product_area #product_list .info_box .h3{font-size:1.4rem;letter-spacing:1px}
#product_area #product_list .item_row{margin:0 1em}
#product_area .btnBox{display:flex;align-items:center;gap:40px}
#product_area .btn{padding:0;display:flex;align-items:center;gap:10px}
#product_area .btn a{width:60px;height:60px;aspect-ratio:1/1;border:1px var(--secondary) solid;align-items:center;justify-content:center}
#product_area .btn a:hover{background:var(--threeary)}
#product_area .btn a svg{fill:var(--secondary);width:20px;height:20px}
#product_area .btn a#product_prev svg{transform:scaleX(-1)}

/* news_list */
#news_area{padding:5vmax 0 20vmax}
#news_area:before{content:'';position:absolute;width:1px;background:var(--secondary);height:100%;right:32%;top:0;opacity:.5}
#news_area:after{content:'';position:absolute;background:url(/images/01/img-n-bg.webp) no-repeat;background-position:bottom;width:100%;height:100%;right:0;bottom:0;opacity:1}
#news_area .workframe{width:86vw;display:flex;flex-direction:row-reverse;justify-content:space-between;z-index:10;position:relative}
#news_area .TxtBox{margin-top:80px}
#news_area .TxtBox .titboxx{display:flex;flex-direction:column;align-items:flex-end;margin-bottom:50px}
#news_area #news_list{width:65%}
#news_area #news_list .item_row .category_btn{background-color:var(--primary);color:var(--yellow);padding:4px 20px;margin-bottom:30px;letter-spacing:1px;font-size:1.2rem;font-weight:300}
#news_list .img_box{aspect-ratio:6/4.5}
#news_list .info_box{margin-top:.5em}
#news_list .info_box .time{font-size:.9em;color:var(--g_500)}
#news_list .info_box .h3{margin:1.2em 0 1.5em;color:var(--secondary);font-size:1.5rem}
#news_list .info_box article{margin-bottom:.5em;height:5.2em;font-size:1.3em;color:var(--g_600);-webkit-line-clamp:3;margin-bottom:30px;letter-spacing:1px;font-weight:300;line-height:180%}
#news_list .info_box .more_btn{border:0px var(--secondary) solid;padding:0;letter-spacing:1px;justify-content:flex-start}


@media screen and (max-width: 1560px){
	section .area_title{font-size:3.1em}
	#product_area .workframe{grid-template-columns:370px 88%;gap:0 40px}
	#about_area .content-left,.content-right{padding:80px 70px}
	#about_area .our-story-section .content-left{padding:80px 110px 80px 90px}
	#about_area .about-us-section .content-right{padding-left:80px}
}
@media screen and (max-width: 1280px){
	section .area_title{font-size:2.8em}
	#newstopArea{padding:10px 0}
	#newstopArea .newsItem *{font-size:16px}
	#newstopArea .newsItem .info_box font{width:100px}
	#newstopArea .newsItem{grid-template-columns:50px 80%}
	section .more_btn{padding:0.5em 1em;font-size:16px;width:170px}
	#product_area .btnBox{gap:20px}
	#product_area .btn a{width:45px;height:45px}
	section .h2_title{font-size:1.4em}
	#about_area .section{display:flex;flex-direction:column}
	#about_area .about-us-section{padding-bottom:0vh}
	#about_area .our-story-section{display:flex;flex-direction:column-reverse}
	#about_area .about-us-section .content-right,#about_area .our-story-section .content-left{padding:80px 110px 80px}
	.section_area .list_box .item_row{margin:0 2em 0 0}
	#news_list .info_box .h3{font-size:1.3rem}
	#news_list .info_box article{font-size:1.1em}
}
@media screen and (max-width: 768px){
    #product_area .workframe{display:flex;flex-direction:column;align-items:center;gap:30px;margin:auto}
	#product_area .TxtBox{gap:50px}
	#product_list{width:100%}
	section .area_title,section .h2_title{text-align:center}
	section .area_title{font-size:2.2em}
	section .h2_title{font-size:1.2em}
	#about_area .text-content *{text-align:justify}
	.section_area{padding:8vmax 0}
	#about_area .about-us-section .content-right,#about_area .our-story-section .content-left{padding:50px 50px}
	#about_area .description,#about_area .text-content .pageh1{font-size:1rem;letter-spacing:.5px;line-height:2}
	#about_area{padding:12vmax 0 0}
	#about_area::before{display:none}
	#news_area #news_list .item_row .category_btn,#news_area:before{display:none}
	#news_area .TxtBox{margin:0}
	#news_area .TxtBox .titboxx{display:flex;align-items:center}
	#news_area .workframe{display:flex;flex-direction:column;align-items:center;gap:30px}
	#news_area #news_list{width:90%}
	.section_area .list_box .item_row{margin:0}

}


@media screen and (max-width: 550px){
    #newstopArea .newsItem *{font-size:14px}
	#newstopArea .newsItem .info_box{gap:10px}
	#newstopArea .newsItem .info_box font{display:none}
	#product_list{margin:2vmax auto 0;width:min(100%,380px)}
	#mainArea { margin-top: 70px; }
	#newstopArea { display: none; }
}