.wrap {position: relative;background-image: url(/images/42/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-image:url(archive/image/customization/about-bg.jpg);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 .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}

/* 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:286px;width:137px;bottom:0;left:-3px;background-image:url(/images/42/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:502px;width:422px;top:-300px;right:-50px;background-image:url(/images/42/img_n_bg01.png);z-index:-2;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/42/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% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  50% {
    -webkit-transform: translateX(5px);
            transform: translateX(5px);
  }
  100% {
    -webkit-transform: translateX(0px);
            transform: translateX(0px);
  }
}

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

/* bookBox bookList*/
#bookBox {font-size: 0;padding-top: 60px;}
#bookBox .deck01{top:30px;left:50%;transform:translateX(-50%);position:absolute}
#bookBox .row { position: relative; width: 100%; }
#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 customBox*/
#bookBox #customBox { background: url(/images/42/flower-bg.jpg) no-repeat 50% / cover; }
#bookBox #customBox ul { margin-bottom: 0;}
#bookBox #customBox .custom{position: relative;height: 80vh;font-size: 0;}
#bookBox #customBox .imgs {position: absolute;top: 0;right: 0;display: inline-block;width: 48vw;z-index: 1;}
#bookBox #customBox .imgs .list {height: 100vh;background: no-repeat 50% / cover;}
#bookBox #customBox .info {display: inline-block;width: 25vw;vertical-align: top;padding: 5vw 13vw 0;float: left;z-index: 3;}
#bookBox #customBox .info h3 { position: relative; font-size: 40px; color: #D7A297; text-align: center;}
#bookBox #customBox .info h3:after { position: absolute; bottom: -11px; left: calc((100% - 80px) / 2); width: 80px; height: 1px; background:#D7A297; content: ""; }
#bookBox #customBox .info article {color: #6D6D6D;margin: 55px 0;}
#bookBox #customBox .slick-dots { position: absolute; bottom: 4vh; left: -25%; }
#bookBox #customBox .slick-dots li button:before{ color: #d49e93; font-size: 10px; opacity: .25 }
#bookBox #customBox .slick-dots li.slick-active button:before{ color: #d7a297; opacity: .75 }
#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); }

#advertiseBox .workframe{padding:60px 0;width:85%}
#advertiseBox .wall li{position:relative;margin:10px}
#advertiseBox .wall li a{position:absolute;z-index:30}
#advertiseBox .wall li .img_cover{height:270px;width:100%;object-fit:cover;object-position:50% 100%}
#advertiseBox .wall li .info{position:absolute;bottom:40%;left:70px}
#advertiseBox .wall li:nth-child(2n) .info{right:70px;left:auto}
#advertiseBox .wall li .info h3{color:#4a4a4a;text-transform:uppercase;font-weight:400;font-size:23px;line-height:150%;letter-spacing:3.5px;font-family:'Noto Serif TC',serif;border-bottom:1px solid}
#advertiseBox .wall li .info p{color:#fff;font-size:18px;letter-spacing:1.5px;font-weight:600}

/* 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}
.serviceList .serviceItem{width: 20%;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:50px}
.serviceList .Img img{display:block;width:100%}
.serviceList .title{color: #bdad84;font-size: 27px;font-weight:500;letter-spacing:3.5px;line-height: 2.25;width: calc(100% - 90px);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:1440px){
	.serviceList{width:100%;left:0}
	.serviceList .item{padding:0 20px}
	.serviceList .title{font-size:30px}
}
@media screen and (min-width: 1281px){
	#advertiseBox .wall li .ImgBorder{position:absolute;top:0;left:0;width:calc(100% - 20px);height:calc(100% - 20px);padding:10px;z-index:10}
	#advertiseBox .wall li .ImgBorder .dashed{position:relative;width:100%;height:100%}
	#advertiseBox .wall li .ImgBorder .dashed::before,#advertiseBox .wall li .ImgBorder .dashed::after{content:"";position:absolute;height:100%;width:100%;-webkit-transform-origin:center;transform-origin:center;opacity:1;-webkit-transition:all 0.7s ease-in-out;transition:all 0.7s ease-in-out}
	#advertiseBox .wall li .ImgBorder .dashed::before{border-top:1px solid #ffffff4d;border-bottom:1px solid #ffffff4d;-webkit-transform:scale3d(1,0,1);transform:scale3d(1,0,1)}
	#advertiseBox .wall li .ImgBorder .dashed::after{border-left:1px solid #ffffff4d;border-right:1px solid #ffffff4d;-webkit-transform:scale3d(0,1,1);transform:scale3d(0,1,1)}
	#advertiseBox .wall li:hover .ImgBorder .dashed::before,#advertiseBox .wall li:hover .ImgBorder .dashed::after{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1);opacity:0.7}
	#advertiseBox .wall li:hover .img_cover{opacity:0.5}
	#advertiseBox .wall li{background-color:#b7ab8e}
}
@media screen and (max-width: 1280px) {
	#aboutBox .deck01,#bookBox .deck01{display:none}
	#advertiseBox .workframe{padding:40px 0}
	.about-block .editor .part-01,.about-block .editor .part-02{width:390px}
	.about-block .editor{gap:3rem}
}
@media (min-width:1181px){
	.serviceList .serviceItem:nth-child(5n+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}
	#advertiseBox .wall li .img_cover{height:190px}
	#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 #customBox .custom{height:auto}
	#bookBox #customBox .info{width:100%;height:48vh;display:block;float:none;padding:10vh 0}
	#bookBox #customBox .info article{width:60%;margin:0 auto;padding:5vh 0}
	#bookBox #customBox .imgs{position:relative;width:100%}
	#bookBox #customBox .imgs .list{height:35vh}
	#bookBox #customBox .slick-dots{bottom:40vh;left:calc(0% / 2)}
	#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}
	.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:10px}
	.about-block .description{font-size:16px}
	.about-block .vertical-line{height:40px}
	.about-block .editor .part-01,.about-block .editor .part-02{width:auto}
}
@media (max-width:768px){
	.serviceArea .titleBox{padding-bottom:0}
	.serviceList .serviceItem{width:100%;margin:0;padding:25px 0}
	.serviceList .serviceItem:before{width:100%;height:1px}
	.serviceList .serviceItem:first-child:before{opacity:0}
	.serviceList .item{padding: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)}
	#bookBox #customBox .info article{width:90%;padding:8vw 0 0}
	#advertiseBox .wall li .info{right:auto;left:30px}
	#advertiseBox .wall li:nth-child(2) .info{left:30px;right:auto}
	#advertiseBox .wall li .info h3{font-size:20px}
	#advertiseBox .wall li .info p{font-size:17px}
	#advertiseBox .workframe{padding:30px 0}
	#advertiseBox .wall li .img_cover{height:160px}
	#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}

}
@media screen and (max-width: 400px) {	
	.serviceList .title{padding-left:10px}

}