.section_area {padding: 5vw 0;}
.section_area .enarea_title {position: relative;letter-spacing: .1em;color: var(--secondary);font-family: "Sedan SC", serif;font-style: italic;font-size: 30px;}
.section_area .area_title {position: relative;padding-bottom: .3em;letter-spacing: .2em;font-family: "Noto Serif TC", serif;font-style: italic;font-size: 35px;font-weight: 500;color: #5f694f;}
.section_area .sub_title { font-weight: 500; font-size: 1.1em; color: var(--primary); }
.section_area .more_btn {padding: 15px 65px;border: 1px #3f3f3f solid;font-weight: 500;font-family: "Noto Serif TC", serif;display: inline-flex;align-items: center;gap: 30px;border-radius: 30px 10px;background: #fffefd;}
.section_area .list_box {margin-top: 4vmax;}
.section_area .list_box .item_row { margin: 0 1em; }
.section_area .list_box .slick-dots { position: relative; margin: 1em 0; bottom: 0; }

/* wrap */
#wrap{margin-top:2vw}

/* cate_area */
#cate_list{display:grid;grid-template-columns: repeat(6, 1fr);gap: 40px;}
#cate_list .item_row{display:flex;flex-direction: column;align-items: center;position: relative;}
#cate_list .item_row:first-child:before{content:'';position: absolute;left: -30px;width: 1px;height: 80%;background: var(--primary);}
#cate_list .item_row:after{content:'';position: absolute;right: -45px;width: 1px;height: 80%;background: var(--primary);}
#cate_list .img_box{position: relative;transition: transform .4s cubic-bezier(.4,0,.2,1);}
#cate_list .img_box:after { content: ""; background: url(/images/01/img-tiles.png) no-repeat center/contain; position: absolute; width: 120px; height: 120px; z-index: -1; top: -30px; right: -30px; transition: transform .5s ease,opacity .4s ease; }
#cate_list .item_row:hover .img_box { transform: translateY(-6px); }
#cate_list .item_row:hover .img_box:after { transform: rotate(8deg) scale(1.08); opacity: .9; }
#cate_list .img_box img{height:100px;object-fit: contain;}
#cate_list .info_box *{color:#606060;text-align: center;}
#cate_list .info_box p{font-family: "Sedan SC", serif;font-size: 20px;margin-top: 15px;line-height: 1;}
#cate_list .info_box .h3{font-family: "Noto Serif TC", serif;font-weight: 400;height: auto;letter-spacing: 2px;}
#cate_list .item_row:hover .info_box .h3{color:var(--fourty);transform: translateY(-23px);}
#cate_list .item_row:hover .info_box p{transform: translateY(30px);font-size: 15px;}

/* product_area */
#product_area{padding-top: 2vw;position: relative;}
#product_area .enarea_title, #special_area .titbox .enarea_title {text-align:center;font-size: 60px;color: var(--g_charcoal);line-height: 1;position: relative;}
#product_area .enarea_title:before{content:url(/images/01/img-light.png);position: absolute;z-index: -1;top: -40px;left: 28vw;animation: lightRotate 20s linear infinite;}
@keyframes lightRotate {from { transform: rotate(0deg); } to   { transform: rotate(360deg); }}
#product_area .enarea_title.entwo:before{content:url(/images/01/img-textline.png);bottom: -5px;left: 30vw;animation: none;top: unset;opacity: .8;}
#product_area .area_title {text-align:center;font-style: unset;color: var(--secondary);}
#product_area .workframe{width:min(90%, 1600px)}
#product_area .list_box{margin-top: 4vmax;position: relative;}
#product_area .list_box .item_row{margin: 50px 2em 0;}
#product_area .btn{position:absolute;padding: 0;display: flex;width: calc(100% + 30px);justify-content: space-between;left: -15px;bottom: 0;z-index: 2;}
#product_area .btn a{position:absolute;bottom: 15vw;}
#product_area .btn a:last-child{right:0}
#product_area .btn a:first-child:hover img{filter: drop-shadow(9px 0 0 #b2b2b2);}
#product_area .btn a:last-child:hover img{filter: drop-shadow(-9px 0 0 #b2b2b2);}
#product_area .more, #special_area .more {margin-top: 70px;text-align: center;}
#product_area .fixTxt{position:absolute;left: 15%;bottom: 13%;}
#product_area .circlelight{position:absolute;left:-10%;bottom:-10%;opacity:.6;animation:circleRotate 25s linear infinite;transform-origin:center;}
@keyframes circleRotate{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}
#product_area .fixTxt2{position:absolute;right: 15%;top: 13%;}
#product_area .circlelight2{position:absolute;right: -3%;top: 15%;opacity:.6;animation:circleRotate 25s linear infinite;transform-origin:center;pointer-events: none;}
#product_area .sellwell:after{content:url(/images/01/img-light2.png);position:absolute;left:25%;bottom:-35%;animation: lightBreath 2.5s ease-in-out infinite;transform-origin:center;}
@keyframes lightBreath{0%{transform:scale(1);}50%{transform:scale(1.2);}100%{transform:scale(1);}}

/* special_area */
#special_area{padding-top:8vw;position: relative;}
#special_area:after{content:url(/images/01/special-bottom.png);position: absolute;left: 9vw;bottom: 8%;}
#special_area .one{position:absolute;left: 15vw;top: 50px;}
#special_area .two {position:absolute;left: 11vw;top: 18%;animation: aboutImgAnimation 5s ease-in-out infinite;}
@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);}}
#special_area .three {position:absolute;left: 23vw;top: 21%;animation: aboutImgAnimation 10s ease-in-out infinite;}
#special_area .four {position:absolute;right: 60px;top: 0;opacity: .35;animation: lightBreath2 6.5s ease-in-out infinite;}
@keyframes lightBreath2{0%{transform:scale(1);}50%{transform:scale(.85);}100%{transform:scale(1);}}
#special_area .titbox{display:flex;flex-direction: column;align-items: center;position: relative;justify-content: center;}
#special_area .titbox .titdec {position:absolute;z-index: -1;width: 450px;margin-top: -40px;}
#special_area .titbox .area_title {color: var(--secondary);font-style: unset;font-size: 23px;letter-spacing: 1px;}
#special_area .list_box {margin: 7vw auto 0;width: 70%;}
#special_area .list_box .slick-list{overflow:visible;}
#special_area .item_row {margin: 0 4.5em;}
#special_area .item_row .img_box{border-radius:50px 0;overflow: hidden;outline: 1px solid rgb(255 255 255 / 55%);outline-offset: -20px;position: relative;}
#special_area .item_row:not(.slick-current) .img_box:before{content:'';position:absolute;width: 100%;height: 100%;top: 0;background: linear-gradient(90deg, rgb(254 254 254), rgb(153 153 153 / 62%), rgb(241 241 243));}
#special_area .item_row:not(.slick-current) .info_box{display:none;}
#special_area .item_row .info_box{margin-top: 20px;}
#special_area .item_row .info_box .h3{height:auto;color: #515050;font-size: 23px;font-family: 'Noto Serif TC';font-weight: 500;letter-spacing: 2.5px;}
#special_area .item_row .info_box p{height:auto;color: #515050;letter-spacing: 2px;margin-top: 10px;}
#special_area .btn{position:absolute;padding: 0;display: flex;width: 56%;justify-content: space-between;bottom: 0;z-index: 2;left: 22%;}
#special_area .btn a{position:absolute;bottom: 29vw;}
#special_area .btn a#special_next{transform:scaleX(-1);}
#special_area .btn a:last-child{right:0}
#special_area .btn a:first-child:hover img, #special_area .btn a:last-child:hover img{filter: drop-shadow(-9px 0 0 #b2b2b2);}

/* slogn_area */
#slogn_area { display: grid; grid-template-columns: 30% 35%; justify-content: space-between; align-items: end; padding-top: 3vw; }
#slogn_area .imgg { margin-bottom: 80px; }
.star-line { position: relative; width: 100%; height: 80px; display: flex; align-items: center; }
.star-line::before { content: ""; position: absolute; width: 100%; height: 1px; background: #999; left: 0; top: 50%; transform: translateY(-50%); }
.star { position: absolute; width: 28px; height: 28px; background: url(/images/01/star2.png) no-repeat center/contain; top: 50%; transform: translateY(-50%); animation: starMove 4s ease-in-out infinite alternate; }
@keyframes starMove {  from { left: 0%; }  to { left: 100%; transform: translate(-100%,-50%); }}
.star-line::after { content: ""; position: absolute; width: 8px; height: 8px; background: #444; border-radius: 50%; left: 50%; top: 50%; transform: translate(-50%,-50%); }

/* about_area */
#about_area {position:relative;padding-bottom: 9vw;}
#about_area:before{content:url(/images/01/img-leaf.png);position:absolute;right:-10%;top:-8%;z-index:-1;opacity:.7;transform-origin:right bottom;animation:leafSwing 6s ease-in-out infinite;}
@keyframes leafSwing{0%{transform:rotate(0deg);}50%{transform:rotate(6deg);}100%{transform:rotate(0deg);}}
#about_area .textslogn {position: absolute;bottom: 0;font-family: 'Sedan SC';left: 9%;font-size: 22px;letter-spacing: 3px;color: #605d5a;}
#about_area .workframe {display: grid;justify-content: space-between;width: min(80%, 1280px);grid-template-columns: 50% 45%;position: relative;background-image: url(/images/01/img-a-bg.png);background-repeat: no-repeat;background-size: contain;background-position: 50% 50%;align-items: end;}
#about_area .workframe:after{position: absolute;content:url(/images/01/star6.png);right: -60px;bottom: -10%;}
#about_area .tit{position:absolute;width: max-content;top: 80px;right: -15%;}
#about_area .circle {display:flex;align-items: center;justify-content: center;position: absolute;right: 24%;top: 65%;}
#about_area .circle .icon{animation: circleRotate 25s linear infinite;position: absolute;}
#about_area .photo {position:relative}
#about_area .photo:before{content:url(/images/01/flower.png);position: absolute;bottom: -40px;left: -25%;animation: leafSwing 6s ease-in-out infinite;}
#about_area .photo:after { content: url(/images/01/star3.png); position: absolute; top: 24%; left: -23%; }
#about_area .info p { font-family: 'Sedan SC'; font-size: 20px; letter-spacing: 3px; }
#about_area .info article,#about_area .info h1 { font-family: 'Noto Serif TC'; font-size: 20px; font-weight: 400; letter-spacing: 1px; }
#about_area .info_box { margin-top: 40px; }
#about_area .info li { display: flex; align-items: center; font-family: 'Noto Serif TC'; font-size: 18px; gap: 10px; line-height: 1; margin: 10px 0; }
#about_area .info li:before { content: url(/images/01/star5.png); zoom: 30%; margin-top: 5px; }

/* link_area */
#link_area .infobox {display: grid;width: min(90%,1000px);margin: 0 auto;grid-template-columns: repeat(3,1fr);gap: 160px;}
#link_area .box {position: relative;display: flex;flex-direction: column;align-items: center;gap: 10px;padding: 40px 0;}
#link_area .box a { position: absolute; width: 100%; height: 100%; z-index: 2; top: 0; }
#link_area .box svg { width: 90px; height: 90px; fill: var(--secondary); }
#link_area .box:hover svg{transform:translateY(-6px) scale(1.08);fill:var(--fourty)}
#link_area .box p { font-family: 'Noto Serif TC'; font-size: 22px; letter-spacing: 2px; color: var(--secondary); font-weight: 500; }
#link_area .box:hover p{color:var(--fourty)}
#link_area .box:not(:last-child)::after { content: ""; position: absolute; right: -80px; top: 50%; transform: translateY(-50%); width: 1px; height: 100%; background: rgba(0,0,0,.25); }
#link_area .box:not(:last-child)::before { content: ""; position: absolute; right: -94px; top: 50%; width: 30px; aspect-ratio: 1/1; background: url(/images/01/star5.png) no-repeat center/contain; transform: translateY(-50%); animation: starFloat 5s ease-in-out infinite; z-index: 1; }
#link_area .box:first-child::before { animation: starFloat2 5s ease-in-out infinite; }

@keyframes starFloat{0%,100%{transform:translateY(-50%) translateY(-80%);}50%{transform:translateY(-50%) translateY(80%);}}
@keyframes starFloat2{0%,100%{transform:translateY(-50%) translateY(80%);}50%{transform:translateY(-50%) translateY(-80%);}}

@media screen and (max-width: 1680px){
    #product_area .circlelight{width: 300px;}
}
@media screen and (max-width: 1440px){
    #special_area .btn{left: 18%;width: 64%;}
    #special_area .btn a{bottom: 33vw;}
    #product_area .btn a{bottom: 20vw;}
    #about_area:before{zoom:80%;top: -14%;}
    #slogn_area{width:90%}
    #product_area .circlelight2{width: 220px;}
}
@media screen and (max-width: 1400px){
    #about_area .tit{width: 65%;top: 30px;right: -5%;}
}
@media screen and (min-width: 1161px){
	#photo_area .item_row:hover { border-color: var(--primary); }
}
@media screen and (max-width: 1280px){
    #cate_list{grid-template-columns: repeat(3, 1fr);margin-top: 70px;}
    #cate_area .workframe{width: min(90%, 800px);}
    #cate_list .item_row:nth-child(4):before{content:'';position: absolute;left: -30px;width: 1px;height: 80%;background: var(--primary);}
}
@media screen and (max-width: 1024px){
    #about_area .circle{width: 140px;}
    #about_area .circle .icon{width:50px;}
    #about_area .tit{width: 65%;top: -50px;}
    #about_area .photo:before{zoom: 65%;}
    #about_area:before{zoom: 65%;top: -24%;}
    #special_area .four{right: -110px;top: -110px;}
    #product_area .sellwell:after{bottom: -26%;left: 11%;}
    #product_area .enarea_title:before{left: 18vw;}
    #product_area .enarea_title.entwo:before{left: 23vw;}
    #product_area .circlelight, #product_area .fixTxt, #product_area .circlelight2, #special_area .one, #special_area .two, #special_area:after, #about_area .workframe:after{display:none;}
}
@media screen and (max-width: 768px){
    #link_area .box svg{width: 60px;height: 60px;}
    #about_area .tit{position:relative;top: -120px;width: 100%;left: -40px;}
    #about_area .workframe{display:flex;flex-direction: column;}
    #special_area .btn a{bottom: 48vw;}
    #special_area .btn{left: 5%;width: 90%;}
    #special_area .list_box{width:100%;margin-top: 14vw;}
    #special_area .four{width: 210px;}
    #product_area .sellwell:after{bottom: -26%;left: 3%;zoom:50%}
    #special_area .titbox .titdec{width: 340px;}
    #product_area{padding-top:5vw}
    #product_area .fixTxt2, #special_area .three, #about_area .photo:before, #about_area .textslogn{display:none;}
    #product_area .btn a img{width: 60px;}
	#about_area .img_box { width: 100%; max-width: inherit; }
	#about_area .info_box { order: 1; }
    #product_area .btn a{bottom: 32vw;}
}
@media screen and (max-width: 640px){
    #special_area .item_row .info_box .h3{font-size:20px;-webkit-line-clamp: 2;}
    #link_area .box:not(:last-child)::after{right: -10px;}
    #link_area .box:not(:last-child)::before{right: -20px;width: 20px;}
    #link_area .box svg{width: 40px;height: 40px;}
    #link_area .box p{font-size: 16px;}
    #link_area .infobox{gap: 20px;}
    #about_area .tit{left: -20px;}
    #about_area:before{zoom: 45%;}
    #slogn_area .imgg{width:90%;}
    #slogn_area{display:flex;flex-wrap: wrap;gap: 40px;justify-content: flex-end;}
    #special_area .item_row{margin:0}
    #special_area .four{display:none;}
    #special_area{padding-top: 25vw;}
    #special_area .titbox .area_title{font-size: 17px;}
    #product_area .btn, #special_area .btn{position:relative;left: auto;width: 90%;display: flex;justify-content: center;margin: 50px auto 0;gap: 40px;}
    #special_area .btn{justify-content: space-evenly;}
    #product_area .btn a, #special_area .btn a{position:relative;bottom: 0;}
    #product_area .list_box{margin-top:0}
    #product_area .enarea_title:before{zoom:80%}
    #product_area{padding-top: 14vw;}
    #product_area .enarea_title, #special_area .titbox .enarea_title{font-size:50px;}
    #cate_list .info_box .h3{font-size: 16px;}
    #cate_list .info_box p{font-size: 14px;}
    #cate_list .item_row:hover .info_box p{transform: translateY(22px);}
    #cate_list .img_box:after{zoom:80%}
    #cate_list .item_row:after, #cate_list .item_row:before{display:none;}
    #cate_list{grid-template-columns: repeat(2, 1fr);width: 90%;gap: 35px 15px;}
    .section_area .area_title{font-size: 26px;letter-spacing: 2px;}
    .section_area .enarea_title{font-size: 20px;}
	#photo_area .item_row .img_box { width: 100%; }
	#photo_area .item_row .img_box img { width: 100%; aspect-ratio: 1/1; }
	#photo_area .item_row .info_box { margin: .5em 0 0; width: 100%; }
	#product_list { margin: 2vmax auto 0; width: min(100%, 350px); }
}