.wrap {position: relative;padding-top: 5vh;z-index: 998;}
.wrap #wrapBox>div { position: relative; }
.wrap #wrapBox .bg { position: relative; width: 100%; height: 100%; top: 0; left: 0; opacity: 1; }

/* about */
.about-block { background-repeat: no-repeat; background-size: contain; background-attachment: fixed; background-position-y: bottom; }
.about-block .editor {display: flex;flex-direction: row;align-items: center;justify-content: center;gap: 7rem;padding: 4rem 0;}
.about-block .editor::before, .about-block .editor::after { display: none; }
.about-block .editor .part-01, .about-block .editor .part-02 { width: 600px; }
.about-block .slogan-01 {color: var(--primary);padding: 0 0 20px;margin: 0;line-height: 1.3;font-size: 20px;font-weight: 500;letter-spacing: 3px;}
.about-block .slogan-02 {color: var(--primary);font-size: 20px;font-weight: 500;letter-spacing: 3px;padding: 0;margin: 0;}
.about-block .description { color: #8a877f; font-size: 17px; font-weight: 300; letter-spacing: 4px; line-height: 2; }
.about-block .description p {line-height: 2;text-align: justify;}
.about-block .description span {font-size: 25px;letter-spacing: 8px;font-weight: 400;color: var(--primary);vertical-align: baseline;}
.about-block .vertical-line {content: '';height: 150px;width: 1px;background: #ddd;}

#aboutBox {padding-top: 8vh;}
#aboutBox p.more { text-align: left; margin-left: 30px; }
#aboutBox .deck01 {top: -40px;left: 50%;transform: translateX(-50%);position: absolute;width: 1250px;}
#aboutBox .deck01 .serviceTitle, #bookBox .deck01 .bookTitle {line-height: 90%;color: #f7f7f7;letter-spacing: 10.5px;text-align: center;text-transform: uppercase;font-family: "PT Sans Caption", sans-serif;font-size: max(13 * (1vw + 1vh) / 2, 45px);}
#aboutBox .describe_about { position: relative; display: flex; flex-direction: column; }
#aboutBox .abtop_title { display: flex; flex-direction: row; align-items: flex-start; justify-content: center; gap: 22rem; padding: 3rem 0 1rem; }
#aboutBox .leftbox .img_text02 {font-weight: 500;color: var(--primary);border-bottom: 1px solid var(--primary);font-size: 26px;line-height: 130%;display: inline-block;letter-spacing: 2.5px;margin-bottom: 30px;}
#aboutBox .abtop_title span { color: #bdad84; font-family: 'Cormorant', serif; font-weight: 500; line-height: 140%; letter-spacing: 0.5px; text-transform: uppercase; display: inline-block; margin-left: 20px; }
#aboutBox .flex_box {display: grid;align-items: center;justify-content: space-between;grid-template-columns: 50% 1fr;gap: 110px;}
#aboutBox .rightbox img {aspect-ratio: 5/3;object-fit: cover;border-radius: 0 50px 50px 0;}
#aboutBox .leftbox {display: flex;flex-direction: column;align-items: flex-start;}
#aboutBox .leftbox article {width: 80%;margin-bottom: 50px;}
#aboutBox .leftbox article p{line-height: 2.5;text-align: justify;}
.flyitem img {position: absolute;top: -76px;right: 7%;width: 16%;z-index: 4;-webkit-animation: tada2 11s linear infinite alternate forwards;animation: tada2 11s linear infinite alternate forwards;}

@-webkit-keyframes tada2 { from { -webkit-transform: scale3d(1, 1, 1); } 10% , 20% { -webkit-transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, -3deg); } 30% , 50% , 70% , 90% { -webkit-transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, 3deg); } 40% , 60% , 80% { -webkit-transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, -3deg); } to { -webkit-transform: scale3d(1, 1, 1); } }
@keyframes tada2 { from { transform: scale3d(1, 1, 1); } 10% , 20% { transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, -3deg); } 30% , 50% , 70% , 90% { transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, 3deg); } 40% , 60% , 80% { transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, -3deg); } to { transform: scale3d(1, 1, 1); } }

/* productBox */
#productBox{padding-bottom:4vw}
#productBox .workframe {position: relative;width: min(90%, 1580px);}
#productBox .bgTxt.title .h3{border-bottom: 1px solid var(--primary);margin-top: -20px;}
#productBox .proList { padding: 0 0 1vw; }
#productBox .proList li {position: relative;padding: 0;-webkit-transition: all .5s ease;-o-transition: all .5s ease;transition: all .5s ease;margin: 30px 20px;border-radius: 35px;overflow: hidden;box-shadow: 0 0 20px #FFF1F4;}
#productBox .proList .item {position: relative;width: 100%;}
#productBox .proList .item .Img { position: relative; }
#productBox .proList .item .info {padding: 25px 35px;}
#productBox .proList .item .info .h3 {text-align: center;font-size: 20px;font-weight: 500;-webkit-line-clamp: 1;letter-spacing: 0;height: auto;margin-bottom: 10px;}
#productBox .proList .item .info p {text-align: center;color: #717171;font-weight: 400;-webkit-line-clamp: 2;height: auto;font-size: 15px;}

/* NewsBox */
#NewsBox {border-top: 1px solid #ddd;border-bottom: 1px solid #ddd;}
#NewsBox .workframe {display: grid;grid-template-columns: 30% 64%;width: 90%;margin-right: 0;align-items: center;justify-content: space-between;}
#NewsBox .workframe .row {width: 100%;display: block;margin: 0;}
#NewsBox .NewsTxt {display: inline-block;text-transform: uppercase;font-size: 45px;letter-spacing: 3px;color: #505050;font-weight: 500;}
#NewsBox .NewsTxt .bgTxt.title .h3{text-align:left;letter-spacing: 3.5px;}
#NewsBox .NewsTxt p.more{margin-top: 100px;text-align:left;}
#NewsBox .bgTxt.title {display: flex;align-items: flex-start;justify-content: flex-start;width: auto;padding: 0;flex-direction: column;}
#NewsBox .bgTxt.title .titleEn {font-family: "PT Sans Caption", sans-serif;}
#NewsBox .bgTxt.title h3 { font-size: 28px; }
#NewsBox ul.newsList li {position: relative;font-size: 0;padding: 40px 130px 40px 50px;border-bottom: 1px solid #ddd;border-left: 1px solid #ddd;}
#NewsBox ul.newsList li:hover .info_box .Nmore { right: 15px; -webkit-animation: ani-arrow-x 1.2s infinite; animation: ani-arrow-x 1.2s infinite; }
#NewsBox ul.newsList li .info_box {display: flex;flex-wrap: wrap;position: relative;align-items: center;}
#NewsBox ul.newsList li .info_box .Nmore { position: absolute; right: 20px; top: 22%; -webkit-transition: 0.5s; transition: 0.5s; }
#NewsBox ul.newsList li .info_box .Nmore svg{width: 12px;height: 12px;fill: #888;}
#NewsBox ul.newsList li a { position: absolute; width: calc(100% - 0px); height: 100%; top: 0; left: 0; }
#NewsBox ul.newsList li p.time {margin-right: 10px;width: 90px;display: inline-block;line-height: 27px;color: var(--primary);font-weight: 300;letter-spacing: 0;font-size: 14px;font-family: "PT Sans Caption", sans-serif;text-align: left;}
#NewsBox ul.newsList li p.txt {width: calc(100% - 155px);display: -webkit-inline-box;overflow: hidden;font-weight: 500;line-height: 160%;max-height: initial;text-overflow: ellipsis;-webkit-line-clamp: 1;-webkit-box-orient: vertical;font-size: 17px;letter-spacing: 1px;color: #807c71;height: auto;}
#NewsBox ul.newsList li .noBox { position: absolute; font-weight: 400; font-size: 13px; top: calc(100% - 22px); right: 67px; }

@-webkit-keyframes ani-arrow-x { 0%, 100% { -webkit-transform: translateX(0); } 50% { -webkit-transform: translateX(5px); } }
@keyframes ani-arrow-x { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(5px); } }

/* bookBox bookList*/
#bookBox { font-size: 0; padding-top: 60px; }
#bookBox .deck01 { top: 30px; left: 50%; transform: translateX(-50%); position: absolute; }
#bookBox .row { position: relative; margin-left: 0; margin-right: 0; width: 100%; display: block; }
#bookBox #BookList { padding-bottom: 2vh; }
#bookBox #BookList ul { padding-bottom: 6vh; }
#bookBox #BookList ul li { position: relative; width: 100%; max-width: 1180px; margin: 20px; }
#bookBox #BookList ul li.slick-slide { position: relative; -moz-transform: scale(0.9); -webkit-transform: scale(0.9); -o-transform: scale(0.8); -ms-transform: scale(0.9); transform: scale(0.9); z-index: -1; margin: 0 0px; filter: blur(3px); }
#bookBox #BookList ul li.slick-slide:after { position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: rgb(255 255 255 / 78%); content: ""; }
#bookBox #BookList ul li.slick-slide img { width: 100%; aspect-ratio: 1257/757; object-fit: cover; }
#bookBox #BookList ul li.slick-center { z-index: 1; -webkit-transform: scaleY(1); -ms-transform: scaleY(1); transform: scaleY(1); filter: none; }
#bookBox #BookList ul li.slick-center:after { display: none; }
#bookBox #BookList ul li h3 { position: absolute; width: 100%; left: 0; bottom: 35px; }
#bookBox #BookList ul li h3 a { height: 70px; color: #fff; font-size: 3rem; font-weight: 400; font-family: 'Noto Serif TC', serif; text-align: center; -webkit-line-clamp: 1; opacity: 0; }

/* bookBox */
#bookBox .nowrap_box.arrow_box { width: 110%; display: flex; flex-direction: row; justify-content: space-around; position: absolute; z-index: 20; left: 50%; top: 40%; transform: translate(-50%, -70%); }
#bookBox .arrow_box a { position: relative; background-color: #ffffff; -webkit-box-shadow: 0 8px 30px rgb(0 0 0 / 16%); box-shadow: 0 8px 30px rgb(0 0 0 / 16%); box-sizing: border-box; width: 90px; height: 60px; display: flex; }
#bookBox .arrow_box a.next { -webkit-transform: scaleX(-1); transform: scaleX(-1); margin-left: 20px; }
#bookBox .arrow_box a:before, #bookBox .arrow_box a:after { position: absolute; width: 15px; height: 1px; background: #808080; display: block; top: 50%; left: calc((100% - 13px) / 2); -webkit-transform: rotate(45deg); transform: rotate(45deg); -webkit-transform-origin: left; transform-origin: left; content: ""; }
#bookBox .arrow_box a:after { content: "" -webkit-transform: rotate(-45deg); transform: rotate(-45deg); }

/* serviceArea*/
.serviceArea { padding: 40px 0 110px; }
.serviceArea .titleBox { display: flex; flex-direction: column; align-items: center; padding: 2vw 0 5vw; }
.serviceArea .titleBox .titleTw {font-size: 30px;letter-spacing: 5.5px;color: var(--primary);text-align: center;border-bottom: 1px solid var(--primary);}
.serviceArea .titleBox .exp { padding-top: 20px; padding-bottom: 40px; display: inline-block; font-size: 17px; line-height: 180%; font-weight: 400; color: #474747; font-family: 'Noto Serif TC', serif; text-align: center; width: 100%; }
.serviceList {display: grid;position: relative;grid-template-columns: repeat(5, 1fr);}
#pagination { display: flex; align-items: center; justify-content: center; margin: 20px 0 15px; }
#pagination li { font-size: 23px; border: #bdad8487 1px solid; width: 20px; height: 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; margin: 10px 2px; color: #bdad84; border-radius: 25px; padding: 4px 3px 4px 5px; cursor: pointer; }
#pagination li.active { background: #bdad84; color: white; }
.serviceArea .workframe{width: min(85%, 1400px);}
.serviceList .serviceItem {position: relative;}
.serviceList .serviceItem:before { content: ""; display: block; width: 1px; height: 100%; background-color: rgb(0 0 0 / 7%); position: absolute; top: 0; left: 0; bottom: auto; right: auto; }
.serviceList .serviceItem:first-child:before {display: none;}
.serviceList .item { display: flex; -webkit-box-align: center; align-items: center; flex-wrap: wrap; padding: 0 48px; }
.serviceList .Img {width: 60px;}
.serviceList .Img img {display: block;width: 100%;aspect-ratio: 1/1;object-fit: contain;}
.serviceList .title {color: #bdad84;font-size: 13px;font-weight: 500;letter-spacing: 3.5px;line-height: 2.25;width: calc(100% - 80px);padding-left: 20px;display: flex;align-items: baseline;gap: 8px;}
.serviceList .title em{color:var(--primary);font-family: "PT Sans Caption", sans-serif;font-size: 24px;font-weight: 800;}
.serviceList .title span { font-family: 'Cormorant', serif; }
.serviceList .exp {color: #8a877f;font-weight: 400;padding-top: 12px;width: 100%;font-size: 15px;text-align: justify;}

@media (max-width: 1460px) {
    .serviceList .Img{width: 45px;}
    .serviceList .title{width: calc(100% - 55px);letter-spacing: 1.5px;padding-left: 10px;}
    #aboutBox .rightbox img{aspect-ratio:4/3}
}
@media (max-width: 1400px) {
    .serviceList .title{width: calc(100% - 75px);letter-spacing: 1.5px;padding-left: 20px;}
}
@media screen and (max-width: 1280px) {
    .serviceList .serviceItem:nth-child(4):before{display:none;}
    .serviceList{grid-template-columns: repeat(3, 1fr);gap: 50px 0;}
	#aboutBox .deck01, #bookBox .deck01 { display: none; }
	.about-block .editor .part-01, .about-block .editor .part-02 { width: 390px; }
	.about-block .editor { gap: 3rem; }
	.flyitem img {top: -5px;right: 5%;}
}
@media (min-width: 1181px) {
	#productBox .proList li:hover{margin-top:15px;}	
}
@media screen and (max-width: 1180px) {
    #aboutBox .leftbox article{width:100%}
    #NewsBox ul.newsList li{padding: 40px 50px;}
    #NewsBox .workframe{width: 95%;grid-template-columns: 35% 60%;}
    #aboutBox{padding:0}
    #aboutBox .leftbox{margin-left:5%}
    #aboutBox .rightbox img{aspect-ratio: 6/3;}
    #aboutBox .flex_box{gap:60px;width: 95%;grid-template-columns: 1fr;}
	.serviceArea .titleBox .exp { padding-top: 12px; }
	.serviceList .title { font-size: 26px; font-weight: 500; letter-spacing: 2px; }
	#bookBox .arrow_box a { width: 80px; height: 45px; }
	.serviceArea .titleBox { display: flex; flex-direction: column; align-items: center; }
	.serviceArea .titleBox .titleTw { margin-top: 0px; font-size: 27px; letter-spacing: 5.5px; }
}
@media screen and (max-width: 980px) {
    .serviceList{grid-template-columns: repeat(2, 1fr);gap: 25px 0;margin-top: 50px;}
    #NewsBox .workframe{width: 100%;display: block;}
    #NewsBox{border-top: 0;}
    #NewsBox .NewsTxt{display:block;padding: 30px 60px;}
    #NewsBox .NewsTxt p.more{display: none;}
	#aboutBox .info .title { margin-bottom: 32px; }
	#bookBox #BookList ul li.slick-slide { margin: 0; }
	#bookBox .nowrap_box.arrow_box { transform: translate(-50%, -120%); width: 160%; }
	#bookBox .arrow_box a { width: 45px; }
	#bookBox #BookList ul { padding-bottom: 0vh; }
	#bookBox { padding-top: 20px; }
	.about-block .editor { gap: 1rem; display: flex; flex-direction: column; align-items: flex-start; padding: 3rem 0; width: 90%; }
	.about-block .slogan-01 { padding: 0 0 8px; }
	.about-block .description span { font-size: 24px; }
	.about-block .description span { letter-spacing: 8px; }
	.about-block .description p {font-size: 15px;}
	.about-block .description { font-size: 16px; }
	.about-block .vertical-line { height: 40px; }
	.about-block .editor .part-01, .about-block .editor .part-02 { width: auto; }
    .wrap{padding-top:0}
	#NewsBox:after { opacity: 0.4; }
	#aboutBox .abtop_title { display: flex; flex-direction: column; gap: 1rem; padding: 2rem 1rem 4rem; order: 2; }
	#aboutBox .flex_box { display: flex; flex-direction: column; justify-content: unset; order: 1; }
}
@media (max-width: 768px) {
    .serviceArea{padding-bottom: 50px;}
	.serviceArea .titleBox { padding-bottom: 0; }
	.serviceList .serviceItem { width: 100%; margin: 0; padding: 0 0; }
	.serviceList .serviceItem:before {width: 100%;height: 1px;display: none;}
	.serviceList .serviceItem:first-child:before { opacity: 0; }
	.serviceList .item { padding: 13px 0; }
}
@media screen and (max-width: 680px) {
    .serviceList .Img{width: 35px;}
    .serviceList .exp{padding-top: 5px;}
    .serviceList{gap: 10px 20px;margin-top: 30px;}
    .serviceArea .titleBox .titleTw{font-size: 24px;letter-spacing: 2px;}
    #NewsBox ul.newsList li{padding: 40px 25px;}
    .flyitem img{width: 25%;top: -15px;right: 3%;}
    #aboutBox .leftbox article p{letter-spacing:0}
    #aboutBox .leftbox .img_text02{letter-spacing:0;font-size: 22px;}
	#productBox .proList {padding: 0 0 1vh;}
	#productBox .proList li.slick-center { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); }
	#NewsBox:before, #NewsBox:after, #NewsBox .bgTxt.title::before { display: none; }
	#NewsBox .workframe {display: flex;flex-direction: column;align-items: center;}
	#NewsBox .workframe .row { width: calc(100% - 0px); margin-left: 0; margin-top: 30px; }
	#NewsBox .NewsTxt {width: 80%;writing-mode: inherit;padding: 40px 0 0;}
	#aboutBox { padding-top: 0vh; }
	.wrap { padding-top: 1vh; }
	.serviceArea { padding: 40px 0 60px; }
	.serviceList .title {letter-spacing: 1px;width: calc(100% - 45px);padding-left: 10px;}
}
@media screen and (max-width: 400px) {
	.serviceList .title { padding-left: 10px; }
}