#wrap { z-index: 5; }

/* section */
section {padding: 7vw 0;}
section >* { z-index: 3; }
section .emtitle_box {font-style: unset;font-size: 55px;display: inline-block;font-family: "EB Garamond", 'Noto Sans TC',serif;text-transform: uppercase;line-height: 1;margin-bottom: 25px;}
section .title_box {padding-bottom: 3vw;font-size: 22px;color: #444143;letter-spacing: 1px;}
section:not(#product_area, #article_area) .title_box:after{content:'';display: block;width: 30px;height: 1px;background: var(--primary);margin-top: 50px;}
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_list */
#product_area .workframe{width: min(90%, 1340px);}
#product_area .titBox , #product_area .titBox * { text-align:center;}
#product_list li {margin:0 40px;}
#product_list li .clip img{aspect-ratio:1/1;border-radius: 35px;}
#product_list li .h3tit {height: auto;font-size: 18px;text-align: center;color: var(--info);margin-top: 30px;}
#product_list .btn{display:flex;cursor: unset;align-items: center;justify-content: space-between;position: absolute;z-index: -1;padding: 0;width: 110%;left: -5%;bottom: 45%;}
#product_list .btn a{cursor: pointer;display: flex !important;align-items: center;}
#product_list .btn a span{width:45px;display: block;aspect-ratio: 1/1;border: 1px solid #b4b4b4;border-radius: 50px;}
#product_list .btn a img{margin-left: -30px;margin-right: 20px;}
#product_list .btn a#product_prev:hover img{margin-left: -20px;}
#product_list .btn a#product_next img{transform:scaleX(-1);margin: 0 -30px 0 20px;}
#product_list .btn a#product_next:hover img{margin-right: -20px;}

/* about_area */
#about_area{padding: 6vw 0 0;position:relative;z-index:0;background-image: url(/images/44/aboutBg.jpg);background-repeat: no-repeat;background-position: 50% 50%;background-size: cover;}
#about_area .workframe:after{content:'';width: 50%;height: 20%;position: absolute;bottom: 0;left: 0;background: #f8f1e6;z-index: -1;}
@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;justify-content: space-between;}
#about_area .workframe:before{content:'';position:absolute;width:66%;height:109%;background:#fff;top:-14%;right:0;z-index:-5}
#about_area #about_img{margin:0;width:64%}
#about_area #about_info{margin-left:27px;margin-right:0;width: 31%;}
#about_area .title_box{color: #444143;font-size: 22px;padding-bottom: 40px;}
#about_area article p{position:relative;margin-top: 10px;margin-bottom:50px;line-height: 2.3;letter-spacing:1px;font-weight: 300;text-align: justify;width: 97%;}
#about_area .deco01{position:absolute;bottom:20%;left:4%}
#about_area .deco02{position:absolute;top: 5%;right:15%;animation: aboutImgAnimation 7s 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);}}
#about_area .track{width: 66%;overflow:hidden;white-space:nowrap;position: absolute;right: 0;}
#about_area .track p{font-size: 110px;margin:0;text-transform:uppercase;letter-spacing: 5px;line-height:1;will-change:transform;animation: marquee 35s linear infinite;color: #eeeef1;font-family: "EB Garamond", serif;opacity: .4;}
#about_area .track p svg{vertical-align: baseline;}
#about_area:after{content:'';background-image:url(/images/44/img-shadow01.png);position:absolute;left: 0;bottom: -245px;animation-duration: 5s;z-index: 4;width: 570px;height: 400px;background-position: right bottom;}

@keyframes marquee{from{transform:translateX(0);}to{transform:translateX(-50%);}}


/* custom_area */
#custom_area .parallax_svg.top { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 64' preserveAspectRatio='none'%3E%3Cpath d='M1440 64V16.67c-90 24.285-138.35 6.45-203.49-2.259-59.67-7.998-119.29 10.198-179.14 5.869-78.82-5.09-135.28-41.99-217.6-1.58C797.82 34.596 776 42.875 718.33 38.326c-164.07-15.317-329.57 33.862-490.92 5.169C150.6 31.857 79.33-8.834 0 16.62V64h1440z' fill='%23E2CEBC'/%3E%3C/svg%3E"); }
#custom_area .parallax_svg.bottom { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 64' preserveAspectRatio='none'%3E%3Cpath d='M0 0v47.33c90-24.285 138.35-6.45 203.49 2.259 59.67 7.998 119.29-10.198 179.14-5.869 78.82 5.09 135.28 41.99 217.6 1.58C642.18 29.403 664 21.125 721.67 25.674c164.07 15.317 329.57-33.862 490.92-5.169C1289.4 32.143 1360.67 72.834 1440 47.38V0H0z' fill='%23E2CEBC'/%3E%3C/svg%3E"); }
#custom_area ul li >div { margin: auto; width: 70% }
#custom_area ul li .clip { width: 250px; height: 250px; -webkit-clip-path: url(#clip_custom); clip-path: url(#clip_custom); }
#custom_area ul li h3 { margin: 10px 0 5px; font-size: 20px; }
#custom_area ul li article { font-weight: 300; font-size: 14px; overflow: hidden; margin: 10px 0 60px; height: 66px; text-align: center; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }

/* news_area */
#news_area{position:relative;padding-bottom:0}
#news_area .paroller{width: 44vw;height: 110%;right: 0;bottom: 0;}
#news_area .shadow{width:500px;height:450px;}
#news_area .bg{position:absolute;right:0;top:0;height:100%;width:30%;background-size:cover;background-position:50% 50%;z-index:2}
#news_area .item{position:relative;margin-bottom:100px}
#news_area .item .more_btn{position:absolute;right:0;bottom:10px}
#news_area .list_box{width: 60%;padding-bottom:30px}
#news_area .workframe{position:relative;width:min(90%,1010px);margin-left:13%;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}
#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 img{transform:scaleX(-1);}
#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: 15px;color:#505050;font-family:"Lato",serif;display: flex;align-items: center;}
#news_list .info_box .h3tit{font-weight: 400;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 .info_box .time b{font-weight: 600;font-size: 15px;color: #505050;font-family: "Lato", serif;margin-right: 3px;}
#news_list li:hover .info_box .h3tit{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}

/* book_area */
#book_area .titBox{margin:0 20px;}
#book_area .workframe{display:grid;width: min(90%, 1300px);grid-template-columns: 55% 43%;justify-content: space-between;align-items: end;}
#book_area:before{content: url(/images/44/shadow.png);position: absolute;top: -30px;right: 0;z-index: 0;animation-name: shadow;animation-direction: alternate;animation-iteration-count: infinite;animation-timing-function: ease-in-out;animation-duration: 5s;}
@keyframes shadow{0%{transform-origin:right bottom;transform:rotate(-3deg);}100%{transform-origin:right bottom;transform:rotate(3deg);}}
#book_area .bg_box{z-index:-1}
#book_area .more_btn {position:absolute;bottom: 3vw;right: 20px;}
#book_area li{position:relative;}
#book_area li .h3tit {font-size: 20px;height: auto;font-weight: 500;}
#book_area li:hover .h3tit{color: var(--primary);}
#book_area li img{aspect-ratio:4/3}
#book_area li .info{background:white;padding: 30px 35px;display: grid;grid-template-columns: 1fr 85px;gap: 15px;align-items: end;}
#book_area li .info p{order:2;grid-column: 1 / 3;color: #636363;font-size: 15px;height: 77px;-webkit-line-clamp: 3;text-align: justify;font-weight: 300;}
#book_area .bookRList li .info p{-webkit-line-clamp: 2;height: 52px;}
#book_area .bookRList li img{aspect-ratio: 4.8/3;}
#book_area li .info a{order:1;color: #867058;font-size: 13px;border-left: 1px solid #867058;border-right: 1px solid #867058;line-height: 1;display: inline-block;text-align: center;letter-spacing: .5px;height: auto;margin-bottom: 9px;position: relative;z-index: 5;}
#book_area .bookList li{margin:0 20px;}
#book_area .btn{display:flex;cursor: unset;align-items: center;justify-content: space-between;margin-top: 30px;z-index: 5;position: relative;}
#book_area .btn a{cursor: pointer;display: flex !important;align-items: center;}
#book_area .btn a span{width:45px;display: block;aspect-ratio: 1/1;border: 1px solid #b4b4b4;border-radius: 50px;}
#book_area .btn a img{margin-left: -30px;margin-right: 20px;}
#book_area .btn a#book_prev:hover img, #book_area .btn a#b_prev:hover img{margin-left: -20px;}
#book_area .btn a font{font-size:14px;font-family: "Arimo", sans-serif;line-height: 1;margin-top: 5px;}
#book_area .btn a#book_next img, #book_area .btn a#b_next img{transform:scaleX(-1);margin: 0 -30px 0 20px;}
#book_area .btn a#book_next:hover img, #book_area .btn a#b_next:hover img{margin-right: -20px;}
#book_area .slick-dots{bottom: -70px;}
#book_area .slick-dots li{margin:0}
#book_area .bookList .slick-track , #book_area .bookRList .slick-track{transition:unset;-webkit-transition:unset;}

/* article_area */
#article_area{overflow:hidden;background-image: url(/images/44/featuredBg.png);background-repeat: no-repeat;background-position: right top;background-size: cover;padding: 5vw 0;}
#article_area .title_box{display:flex;justify-content:center;align-items:center;gap:20px;padding:0}
#article_area .title_box .decoBottom{margin-left:0}
#article_area .title_box .page_title{font-size: 3.4rem;letter-spacing: 1px;}
#article_area .workframe{width: min(90%, 1400px);display: grid;align-items: center;gap: 40px;grid-template-columns: 80% 300px;}
#article_area .titBox{order:2;display: flex;flex-direction: column;align-items: center;gap: 30px;}
#article_area .titBox em{writing-mode: vertical-lr;margin: 0;font-size: 50px;}
#article_area .titBox em:after{content:url(/images/44/star.png);margin-top: 20px;}
#article_area .tit *{text-align:center;}
#article_area .tit,#article_area .title_box .page_title{}
#article_area #article_box{display: grid;grid-template-columns: 33% 60%;width: 100%;align-items: center;justify-content: space-between;}
#article_area #article_box #article_list  li >div .img a{bottom: 15px;right: 15px;background: var(--secondary);color: var(--light);padding: 15px 30px;border-radius: 50px;font-size: 15px;letter-spacing: 1px;}
#article_area #article_box .top_tit { text-transform: uppercase; white-space: nowrap; -webkit-text-stroke: 1px #dbdbdb; text-stroke: 1px #6b6b6b; line-height: 1; letter-spacing: 3rem; font-size: 10vmax; color: transparent; opacity: .5; -webkit-transform: translate(-7vw, -1vmax); transform: translate(-7vw, -1vmax); -webkit-animation: book_element 2.5s linear infinite; animation: book_element 2.5s linear infinite; }
#article_area #article_box #article_list li >div {padding: 30px 25px;border: 5px solid rgb(89 89 89 / 15%);}
#article_area #article_box #article_list li:hover .tt p, #article_area #article_box #article_list li:hover *{}
#article_area #article_box #article_list li .tt{display: flex;align-items: center;justify-content: space-between;margin-bottom: 20px;}
#article_area #article_box #article_list li .tt p{margin:0;font-size: 14px;text-transform: uppercase;font-weight: 500;color: #676767;font-family: "Lato", sans-serif;}
#article_area #article_box #article_list li .tt font a{color: #3c3c3c;font-size: 12px;border: 1px solid #9e9e9e;padding: 3px 15px;background: #ffffff00;}
#article_area #article_box #article_list li >div img {width: 100%;aspect-ratio: 3.5 / 3;object-fit: cover;}
#article_area #article_box #article_list li >div .h3tit {height: 60px;font-weight: 400;font-size: 18px;-webkit-line-clamp: 2;margin: 15px 0 0;}
#article_area #article_box #article_list li >div p {height: auto;font-weight: 300;font-size: 14px;-webkit-line-clamp: 2;margin: 15px 0 0;}
#article_right{padding: 1.5vw 0;}
#article_right .tit .title_box {font-size:24px;font-weight: 500;}
#article_right ul{border-top: 1px solid #d0d0d0;}
#article_right ul li{border-bottom: 1px solid #d0d0d0;margin-bottom: 10px;padding: 30px 0;}
#article_right .info_box{display:grid;grid-template-columns: 106px 1fr;align-items: center;justify-content: space-between;gap: 25px;}
#article_right .info_box >p{display:flex;flex-direction: column;align-items: center;color: #434343;font-size: 16px;border-right: 1px solid #d0d0d0;font-weight: 400;font-family: "Lato", sans-serif;}
#article_right .info_box p b{font-weight: 400;font-size: 50px;line-height: 1;font-family: "Lato", sans-serif;}
#article_right .infoo .h3tit{font-size: 18px;height: auto;font-weight: 500;margin-bottom: 6px;}
#article_right .infoo p{height:auto;color: #757575;font-size: 15px;}

@media screen and (max-width: 1680px) {
    #news_area .paroller{width: 40vw;}
    #about_area:after{bottom: -257px;}
}
@media screen and (max-width: 1460px) {
    #about_area article p{width:100%;line-height: 2;letter-spacing: 0;}
    #about_area .workframe:before{height: 114%;}
    #news_area .paroller{width: 32vw;height: 100%;}
    #about_area:after{bottom: -278px;}
    #about_area .deco02{top: -7%;}
    #book_area:before{zoom: 60%;}
    #about_area .workframe{margin-left: 9%;}
}
@media screen and (max-width: 1280px) {
    #news_area .paroller{width: 27vw;}
    #about_area .deco02{display:none;}
    #article_area #article_box .leftbox{display:none;}
    #article_area #article_box{display:block;}
    #article_area .workframe{grid-template-columns: 70% 300px;}
}
@media screen and (max-width: 1024px) {
    #about_area .workframe, #news_area .workframe{margin:0 auto;width: 90%;}
    #book_area .workframe{grid-template-columns: 48% 48%;}
    #book_area .more_btn{display:none;}
	#product_list { margin: auto; }
	#news_area li h3 { height: 30px; -webkit-line-clamp: 1; }
    section .title_box, #about_area .title_box{font-size:20px;}
}
@media screen and (min-width: 981px) {
    #article_area #article_box >a{display:none;}
}
@media screen and (max-width: 980px) {
    #article_area #article_box{text-align:center;}
    #article_area #article_box .rightbox {margin-bottom:40px;}
    #article_area .titBox em:after{margin: 0;zoom: 80%;}
    #article_area .titBox em{writing-mode:unset;font-size: 40px;display: flex;align-items: center;gap: 10px;}
    #article_area .titBox{order:0}
    #article_area .workframe{grid-template-columns: 1fr;}
    section .title_box{padding-bottom:40px;}
    #article_area .titBox .more_btn, #product_list .btn{display:none;}
    #news_area .bg{width: 100%;right: 0;aspect-ratio: 6/3;height: auto;top: -95%;}
    #news_area .list_box{width:100%}
    #news_area .paroller{width:100%;height: 350px;bottom: unset;top: 0;}
    #news_area{padding-top: 500px;}
    #about_area{background: #f8f1e6;}
    #about_area:after, #about_area .workframe:before, #book_area .btn a font{display:none;}
    #about_area .workframe{display:flex;flex-direction: column;gap: 40px;align-items: flex-start;width: 85%;}
    #about_area #about_img{width:100%;}
    section .clip img{height:auto;}
	section , #article_area { padding: 10vw 0; }
	#about_area #about_info {margin-bottom: 8vw;width: 100%;margin: 0;}
	#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: 760px) {
    section .title_box{padding-bottom:20px;}
    section:not(#product_area, #article_area) .title_box:after{margin-top:20px}
    #article_right .info_box{grid-template-columns: 75px 1fr;gap: 15px;}
    #article_right .info_box p b{font-size: 30px;}
    #article_right .info_box >p, #article_right .infoo p{font-size: 14px;}
    #news_list .info_box{grid-template-columns: 1fr 50px;gap: 5px;}
    #news_list .info_box .time{grid-column: 1 / 3;}
    #news_area{padding-top: 350px;}
    #news_area .paroller{height: 220px;}
    #news_area .bg{aspect-ratio:4/3;width: 90%;right: 5%;top: -60%;}
    #about_area .track{display:none;}
    #book_area .bookList li{margin:0}
    #book_area .box:last-child{margin-top:40px;}
    section .emtitle_box{font-size: 45px;margin-bottom: 15px;}
    #book_area .workframe{display: block;}
	section, #article_area, #about_area {padding: 15vw 0;}
}
@media screen and (max-width: 550px) {
	#about_area .about_sub_2 { bottom: 60vw; }
	#news_area li .row { margin: auto; width: 280px; }
}
@media screen and (max-width: 480px) {
	#book_area li.row { margin: auto; width: 250px; }
}