.wrap { position: relative; background-image: url(/images/46/img_bg.jpg); 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: flex-start; justify-content: center; gap: 10rem; 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 { font-size: 26px; color: #bdad84; font-weight: 400; letter-spacing: 2px; padding: 0 0 20px; margin: 0; font-family: 'Noto Serif TC', serif; }
.about-block .slogan-02 { color: #bdad84; font-size: 20px; font-weight: 500; letter-spacing: 5px; padding: 0; margin: 0; font-family: 'Noto Serif TC', serif; }
.about-block .description { color: #8a877f; font-size: 17px; font-weight: 300; letter-spacing: 4px; line-height: 2; }
.about-block .description p { font-family: 'Noto Serif TC', serif; }
.about-block .description span { font-size: 30px; letter-spacing: 15px; font-weight: 400; color: #bdad84; }
.about-block .vertical-line { content: ''; height: 150px; width: 1px; background: #dcdcdc; }

#aboutBox { overflow: hidden; padding-top: 3vh; }
#aboutBox p.more { text-align: left; margin-left: 30px; }
#aboutBox .deck01 { top: -10px; left: 60%; transform: translateX(-50%); position: absolute; width: 1250px; }
#aboutBox .deck01 .serviceTitle, #bookBox .deck01 .bookTitle { font-size: 240px; line-height: 90%; font-family: 'Cormorant', serif; color: #f7f7f7; letter-spacing: 60.5px; text-align: center; text-transform: uppercase; }
#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 .abtop_title h4 { flex-shrink: 0; font-size: 20px; color: #8a877f; font-family: 'Noto Serif TC', serif; letter-spacing: 5.5px; line-height: 150%; }
#aboutBox .abtop_title h4.img_text02 { 
display: flex; font-weight: 500; letter-spacing: 0.05em; color: #bdad84; border-bottom: 1px solid #bdad84; font-size: 26px; line-height: 130%; display: inline-block; font-family: 'Noto Serif TC', serif; letter-spacing: 2.5px; ; }
#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: flex; align-items: center; justify-content: space-between; }
#aboutBox .rightbox { display: flex; flex-direction: column; width: 52%; }
#aboutBox .leftbox { display: flex; flex-direction: column; width: 46%; }
#aboutBox .leftbox article { padding: 10px 30px; }
.flyitem img { position: absolute; top: -226px; right: 9%; width: 28%; 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 .workframe { position: relative; width: 100%; }
#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; }
#productBox .proList li.slick-slide { -moz-transform: scale(0.8); -webkit-transform: scale(0.8); -o-transform: scale(0.8); -ms-transform: scale(0.8); transform: scale(0.8); z-index: -1; margin: 0 -30px; opacity: 0.4; }
#productBox .proList li.slick-center { z-index: 1; -webkit-transform: scaleY(0.9); -ms-transform: scaleY(0.9); transform: scaleY(0.9); opacity: 1; }
#productBox .proList .item { margin: 30px auto; position: relative; width: 100%; max-width: 1180px; -webkit-box-shadow: 0px 5px 30px -5px rgba(0, 0, 0, 0.3); box-shadow: 0px 5px 30px -5px rgba(0, 0, 0, 0.3); }
#productBox .proList .item .Img { position: relative; }
#productBox .proList .item .Img a.photo:after { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgb(0 0 0 / 0.2); content: ""; }
#productBox .proList .item .info { position: absolute; left: 50%; bottom: 35px; -webkit-transform: translate(-50%, 0); -ms-transform: translate(-50%, 0); transform: translate(-50%, 0); text-align: center; }
#productBox .proList .item .info h3 { text-align: center; color: #fff; font-size: 2.4rem; font-weight: bold; text-shadow: 0px 0px 10px rgb(0 0 0 / 0.5); -webkit-line-clamp: 1; }
#productBox .proList .item .info article p { text-align: center; color: #ffffff; font-weight: 500; text-shadow: 0 0 10px rgb(0 0 0 / 0.3); -webkit-line-clamp: 2; }

/* NewsBox */
#NewsBox { padding: 90px 0px 30px 0px; }
#NewsBox .workframe { display: flex; margin-bottom: 50px; }
#NewsBox .workframe .row { width: calc(100% - 100px); margin-left: 90px; margin-top: 90px; }
#NewsBox:before { content: ''; position: absolute; height: 302px; width: 161px; bottom: -72px; left: -1px; background-image: url(/images/46/img_n_bg02.png); background-repeat: no-repeat; z-index: 0; transform-origin: top left; transition: all 1.1s ease-in-out; -webkit-transition: all 1.1s ease-in-out; }
#NewsBox:after { content: ''; position: absolute; height: 466px; width: 360px; top: -328px; right: -66px; background-image: url(/images/46/img_n_bg01.png); z-index: -2; background-size: cover; transform-origin: top left; transition: all 1.1s ease-in-out; -webkit-transition: all 1.1s ease-in-out; }
#NewsBox .NewsTxt { display: inline-block; text-transform: uppercase; font-size: 45px; letter-spacing: 3px; color: #505050; font-weight: 500; max-height: 260px; -webkit-writing-mode: vertical-lr; -ms-writing-mode: tb-lr; writing-mode: vertical-lr; }
#NewsBox .bgTxt.title { display: flex; background: url(/images/46/img_n_t_bg.png) repeat top/contain; align-items: flex-start; padding: 50px 20px 40px 30px; justify-content: center; width: auto; }
#NewsBox .bgTxt.title::before { content: ""; position: absolute; left: calc(50% - 6.5px); top: -40px; width: 1px; height: 70px; background-color: #9c9276; }
#NewsBox .bgTxt.title .titleEn { border-bottom: 0px solid #bdad84; }
#NewsBox .bgTxt.title h3, #NewsBox .titleEn { color: #fff; }
#NewsBox .bgTxt.title h3 { font-size: 28px; }
#NewsBox ul.newsList li { position: relative; font-size: 0; margin: 0px 0 10px; border-bottom: 1px solid rgb(47 47 47 / 20%); }
#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 { padding: 12px 8px; display: flex; flex-wrap: wrap; position: relative; }
#NewsBox ul.newsList li .info_box .Nmore { position: absolute; right: 20px; top: 22%; -webkit-transition: 0.5s; transition: 0.5s; }
#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: #bdad84; font-weight: 300; letter-spacing: 1.5px; font-size: 13px; display: flex; justify-content: center; align-items: center; }
#NewsBox ul.newsList li p.txt { width: calc(100% - 155px); display: -webkit-inline-box; overflow: hidden; font-weight: 400; line-height: 160%; max-height: initial; text-overflow: ellipsis; -webkit-line-clamp: 1; -webkit-box-orient: vertical; font-size: 15px; letter-spacing: 1px; color: #807c71; }
#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-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: 36px; letter-spacing: 9.5px; font-family: 'Noto Serif TC', serif; color: #bdad84; text-align: center; }
.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: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; width: -webkit-calc(100% + 138px); width: -moz-calc(100% + 138px); width: calc(100% + 138px); position: relative; left: -68px; }
#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; }
.serviceList .serviceItem { width: 25%; 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 .item { display: flex; -webkit-box-align: center; align-items: center; flex-wrap: wrap; padding: 0 48px; }
.serviceList .Img { width: 100px; }
.serviceList .Img img { display: block; width: 100%; }
.serviceList .title { color: #bdad84; font-size: 13px; font-weight: 500; letter-spacing: 3.5px; line-height: 2.25; width: calc(100% - 120px); padding-left: 20px; display: flex; align-items: baseline; }
.serviceList .title span { font-family: 'Cormorant', serif; }
.serviceList .exp { color: #8a877f; font-weight: 400; padding-top: 10px; width: 100%; }

@media (max-width: 1460px) {
	.serviceList { width: 100%; left: 0; margin: 25px auto 0; }
	.serviceList .item { padding: 0 20px; }
	.serviceList .title { font-size: 30px; }
	#NewsBox:after { width: 250px; height: 300px; top: -132px; }
}
@media screen and (max-width: 1280px) {
	#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: -75px; }
}
@media (min-width: 1181px) {
	.serviceList .serviceItem:nth-child(4n+1):before { opacity: 0; }
}
@media screen and (max-width: 1180px) {
	.serviceArea .titleBox .exp { padding-top: 12px; }
	.serviceList .serviceItem { width: 50%; margin: 20px 0; }
	.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 (max-width: 1180px) and (min-width:769px) {
	.serviceList .serviceItem:nth-child(odd):before { opacity: 0; }
}
@media screen and (max-width: 980px) {
	#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; }
	#NewsBox { padding: 20px 0px 10px 0px; }
	#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 .slogan-01, .about-block .description span { font-size: 24px; }
	.about-block .slogan-02 { font-size: 18px; }
	.about-block .description span { letter-spacing: 8px; }
	.about-block .description p { font-size: 14px; }
	.about-block .description { font-size: 16px; }
	.about-block .vertical-line { height: 40px; }
	.about-block .editor .part-01, .about-block .editor .part-02 { width: auto; }
	#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; }
	#aboutBox .rightbox { width: 500px; max-width: 100%; }
	#aboutBox .leftbox { width: 100%; }
}
@media (max-width: 768px) {
	.serviceArea .titleBox { padding-bottom: 0; }
	.serviceList .serviceItem { width: 100%; margin: 0; padding: 0 0; }
	.serviceList .serviceItem:before { width: 100%; height: 1px; }
	.serviceList .serviceItem:first-child:before { opacity: 0; }
	.serviceList .item { padding: 13px 0; }
}
@media screen and (max-width: 680px) {
	#productBox .proList { padding: 5vh 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; margin-bottom: 30px; flex-direction: column; align-items: center; }
	#NewsBox .workframe .row { width: calc(100% - 0px); margin-left: 0; margin-top: 30px; }
	#NewsBox .NewsTxt { writing-mode: inherit; }
	#NewsBox .bgTxt.title { padding: 20px 40px; }
	#aboutBox { padding-top: 0vh; }
	.wrap { padding-top: 1vh; }
	.serviceArea { padding: 40px 0 60px; }
	.serviceList .title { font-size: 20px; font-weight: 400; letter-spacing: 1px; }
	#aboutBox .leftbox article { padding: 18px 20px; }
}
@media screen and (max-width: 400px) {
	.serviceList .title { padding-left: 10px; }
}