.wrap {position: relative;background: #fff;z-index: 998;}
.wrap #wrapBox >div {position: relative;padding: 40px 0 0;}
.wrap #wrapBox .bg { position: absolute; width: 100%; height: 100%; background: no-repeat 50% / cover; top: 0; left: 0; opacity: .4; }

/* aboutBox */
#aboutBox{padding: 65px 0;background-position: 100% 0%;background-repeat: no-repeat;}
#aboutBox:before {display: block;content: url(/images/42/index-about-left.png);position: absolute;left: -100px;bottom: -140px;z-index: 9;animation-name: aboutlogo;animation-timing-function: linear;animation-iteration-count: infinite;animation-duration: 3s;-moz-animation-name: aboutlogo;-ms-animation-name: aboutlogo;-o-animation-name: aboutlogo;-webkit-animation-name: aboutlogo;-moz-animation-timing-function: linear;-ms-animation-timing-function: linear;-o-animation-timing-function: linear;-webkit-animation-timing-function: linear;-moz-animation-iteration-count: infinite;-ms-animation-iteration-count: infinite;-o-animation-iteration-count: infinite;-webkit-animation-iteration-count: infinite;-moz-animation-duration: 3s;-ms-animation-duration: 3s;-o-animation-duration: 3s;-webkit-animation-duration: 3s;opacity: 0;}

@keyframes aboutlogo{
	0%{
		transform:skewX(-10deg) skewY(5deg);
		-moz-transform:skewX(-10deg) skewY(5deg);
		-ms-transform:skewX(-10deg) skewY(5deg);
		-o-transform:skewX(-10deg) skewY(5deg);
		-webkit-transform:skewX(-10deg) skewY(5deg);
	}
	50%{
		transform:skewX(0deg) skewY(0deg);
		-moz-transform:skewX(0deg) skewY(0deg);
		-ms-transform:skewX(0deg) skewY(0deg);
		-o-transform:skewX(0deg) skewY(0deg);
		-webkit-transform:skewX(0deg) skewY(0deg);
	}
	100%{
		transform:skewX(-10deg) skewY(5deg);
		-moz-transform:skewX(-10deg) skewY(5deg);
		-ms-transform:skewX(-10deg) skewY(5deg);
		-o-transform:skewX(-10deg) skewY(5deg);
		-webkit-transform:skewX(-10deg) skewY(5deg);
	}
}
@-moz-keyframes aboutlogo{
	0%{
		transform:skewX(-10deg) skewY(5deg);
		-moz-transform:skewX(-10deg) skewY(5deg);
		-ms-transform:skewX(-10deg) skewY(5deg);
		-o-transform:skewX(-10deg) skewY(5deg);
		-webkit-transform:skewX(-10deg) skewY(5deg);
	}
	50%{
		transform:skewX(0deg) skewY(0deg);
		-moz-transform:skewX(0deg) skewY(0deg);
		-ms-transform:skewX(0deg) skewY(0deg);
		-o-transform:skewX(0deg) skewY(0deg);
		-webkit-transform:skewX(0deg) skewY(0deg);
	}
	100%{
		transform:skewX(-10deg) skewY(5deg);
		-moz-transform:skewX(-10deg) skewY(5deg);
		-ms-transform:skewX(-10deg) skewY(5deg);
		-o-transform:skewX(-10deg) skewY(5deg);
		-webkit-transform:skewX(-10deg) skewY(5deg);
	}
}
@-ms-keyframes aboutlogo{
	0%{
		transform:skewX(-10deg) skewY(5deg);
		-moz-transform:skewX(-10deg) skewY(5deg);
		-ms-transform:skewX(-10deg) skewY(5deg);
		-o-transform:skewX(-10deg) skewY(5deg);
		-webkit-transform:skewX(-10deg) skewY(5deg);
	}
	50%{
		transform:skewX(0deg) skewY(0deg);
		-moz-transform:skewX(0deg) skewY(0deg);
		-ms-transform:skewX(0deg) skewY(0deg);
		-o-transform:skewX(0deg) skewY(0deg);
		-webkit-transform:skewX(0deg) skewY(0deg);
	}
	100%{
		transform:skewX(-10deg) skewY(5deg);
		-moz-transform:skewX(-10deg) skewY(5deg);
		-ms-transform:skewX(-10deg) skewY(5deg);
		-o-transform:skewX(-10deg) skewY(5deg);
		-webkit-transform:skewX(-10deg) skewY(5deg);
	}
}
@-o-keyframes aboutlogo{
	0%{
		transform:skewX(-10deg) skewY(5deg);
		-moz-transform:skewX(-10deg) skewY(5deg);
		-ms-transform:skewX(-10deg) skewY(5deg);
		-o-transform:skewX(-10deg) skewY(5deg);
		-webkit-transform:skewX(-10deg) skewY(5deg);
	}
	50%{
		transform:skewX(0deg) skewY(0deg);
		-moz-transform:skewX(0deg) skewY(0deg);
		-ms-transform:skewX(0deg) skewY(0deg);
		-o-transform:skewX(0deg) skewY(0deg);
		-webkit-transform:skewX(0deg) skewY(0deg);
	}
	100%{
		transform:skewX(-10deg) skewY(5deg);
		-moz-transform:skewX(-10deg) skewY(5deg);
		-ms-transform:skewX(-10deg) skewY(5deg);
		-o-transform:skewX(-10deg) skewY(5deg);
		-webkit-transform:skewX(-10deg) skewY(5deg);
	}
}
@-webkit-keyframes aboutlogo{
	0%{
		transform:skewX(-10deg) skewY(5deg);
		-moz-transform:skewX(-10deg) skewY(5deg);
		-ms-transform:skewX(-10deg) skewY(5deg);
		-o-transform:skewX(-10deg) skewY(5deg);
		-webkit-transform:skewX(-10deg) skewY(5deg);
	}
	50%{
		transform:skewX(0deg) skewY(0deg);
		-moz-transform:skewX(0deg) skewY(0deg);
		-ms-transform:skewX(0deg) skewY(0deg);
		-o-transform:skewX(0deg) skewY(0deg);
		-webkit-transform:skewX(0deg) skewY(0deg);
	}
	100%{
		transform:skewX(-10deg) skewY(5deg);
		-moz-transform:skewX(-10deg) skewY(5deg);
		-ms-transform:skewX(-10deg) skewY(5deg);
		-o-transform:skewX(-10deg) skewY(5deg);
		-webkit-transform:skewX(-10deg) skewY(5deg);
	}
}
#youtubeJbox{display: flex;width: 100%;margin: 50px auto 0;}



#youtubeJbox:before {
  content: "";
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 100px;
  background: white;
  bottom: -100px;
  z-index: 9;
  border-radius: 0px 0 30px 30px;
}
#youtubeJbox:after{
	content:"";
	background: url(/images/42/logo-icon.png);
	background-color: white;
	background-size: cover;
	border-radius: 50%;
	position: absolute;
	width: 100px;
	height: 100px;
	bottom: -140px;
	left: calc(50% - 50px);
	z-index: 9;
}


#youtubeJbox .videommbox{
    width: 100%;
    display: flex;
    justify-content: center;
}
#youtubeJbox .videommbox .videoJ{display: flex;flex-direction: column;align-items: center;margin: 7px 7px;width: 50%;}
#youtubeJbox .videommbox .videoJ iframe{
    width: 100%;
    height: 540px;
}

#googlemapJ{
    position: relative;
}
#googlemapJ iframe{
    width: 100%;
    height: 450px;
}
#aboutBox .imgs {position: absolute;width: 50vw;height: 100%;top: 0;left: 0;z-index: 1;}
#aboutBox .imgs .list {height: 40vw;background: no-repeat 50% / cover;}
#aboutBox .info {position: relative;z-index: 3;float: left;width: 40%;}
#aboutBox .right{
float: right;
width: 50%;
}
#aboutBox .right ul{
text-align: end;
margin: 5px 0;
}
#aboutBox .right ul li{
display: inline-block;
width: calc((100%/3) - 20px);
border: 2px solid #b7b7b7;
margin-left: 15px;
position: relative;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#aboutBox .right ul li:hover{
border: 2px solid rgb(183 183 183 / 0%);
background-color: #fff;
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
}
#aboutBox .right ul li:after {content: "";display: block;position: absolute;width: calc(100% - 20px);height: calc(100% - 20px);left: 50%;top: 50%;-webkit-transform: translate(-50%, -50%);-ms-transform: translate(-50%, -50%);transform: translate(-50%, -50%);border: 1px solid #dcdcdc;pointer-events: none;}
#aboutBox .right ul li .item{
position: relative;
overflow: hidden;
padding: 62px 30px;
text-align: center;
}
#aboutBox .right ul li .item a{
position: absolute;
display: block;
width: 100%;
height: 100%;
left: 0;
top: 0;
z-index: 5;
}
#aboutBox .right ul li .circle{
text-align: center;
margin-bottom: 20px;
}
#aboutBox .right ul li .item p{text-align: center;font-size: 22px;font-family: 'Noto Serif TC', serif;border-bottom: 3px solid #e3e0e0;padding-bottom: 10px;display: inline-block;}
#aboutBox .right ul li:hover .item p{color: #a58844;border-bottom: 1px solid #bd9d53;}
#aboutBox .right ul li .circle img{-webkit-filter: grayscale(1);opacity: .8;width: 87px;}
#aboutBox .right ul li:first-child{
margin-left: 0;
}
#aboutBox .right ul li:hover .circle img{
-webkit-filter: grayscale(0);
opacity: 1;
}
#aboutBox .info .bgTxt {text-align: left; }
#aboutBox .info .stitle {position: relative;margin-bottom: 5px;padding: 0px 0 15px;font-size: 18px;color: #6D6D6D;}
#aboutBox .info .stitle h2{
    font-size: 30px;
    font-weight: 800;
    color: #1c1c1c;
}
#aboutBox .info article {line-height: 200%;color: #222222;font-family: 'Noto Serif TC', serif;}
#aboutBox #SeoStarRating { margin: 15px 0 30px; text-align: right; }
#aboutBox p.more { text-align: left; }

/* productBox */
#productBox{
    padding: 40px 0 60px;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: cover;
    background: url(/userfiles/images/20240112104309521.jpg);
}

#productBox .stitle {position: relative;margin-bottom: 5px;padding: 0px 0 15px;font-size: 18px;color: #6D6D6D;display: flex;flex-direction: column;align-items: center;}
#productBox  .stitle h2{
    font-size: 30px;
    font-weight: 800;
    color: #1c1c1c;
}

#productBox .workframe{position: relative;width: 1470px;}
#productBox .proList{padding: 0 0 1vw;overflow: hidden;}
#productBox .proList li{position: relative;padding: 0;-webkit-transition: all .5s ease;-o-transition: all .5s ease;transition: all .5s ease;float: left;width: calc((100%/3) - 20px);margin: 0 10px;}
#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: 5px auto 0;position: relative;width: 100%;}
#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: "";opacity: 0;}
#productBox .proList .item:hover .Img a.photo:after{opacity:1;}
#productBox .proList .item .info {position: absolute;bottom: 15px;text-align: center;width: 90%;left: 5%;}
#productBox .proList .item .info h3 {text-align: center;background-color: #bd9d53;padding: 5px 20px;overflow: hidden;margin: 10px 0;height: 34px;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;color: white;}
#productBox .proList .item .info h3 a{
    color: #fff;
    font-size: 20px;
    letter-spacing: 5px;
    text-align: center;
}
#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;}

/* bookBox bookList*/
#bookBox {font-size: 0;}
#bookBox .row { position: relative; width: 100%; }
#bookBox #BookList {padding-bottom: 7vh;}
#bookBox #BookList ul li { 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);   }
#bookBox #BookList ul li.slick-slide {position: relative;-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 -70px;filter: blur(3px);}
#bookBox #BookList ul li.slick-slide:after {position: absolute;width: 100%;height: 100%;top: 0;left: 0;background: rgb(215 162 151 / 78%);content: "";}
#bookBox #BookList ul li.slick-center{ z-index: 1; -webkit-transform: scaleY(0.9); -ms-transform: scaleY(0.9); transform: scaleY(0.9); 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: bold;text-shadow: 0 0 10px rgb(0 0 0 / 50%);text-align: center;-webkit-line-clamp: 1;}

/* 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 }

/* NewsBox */
#NewsBox{padding:100px 0;background-repeat:no-repeat;background-position: 50% 100%;background-size:cover;}
#NewsBox .speBox{display:inline-block;width:611px;vertical-align:top}
#NewsBox .speBox .titleSet{margin:0 100px}
#NewsBox .speBox .titleSet .speBoxTitle{font-size:50px;line-height:120%;font-weight:400;font-family:'Merriweather',serif}
#NewsBox .speBox .titleSet .subBoxTitle{color:#9a9a9a;font-size:15px;font-weight:400;margin:30px 0 50px;line-height:160%}
#NewsBox .speBox .titleSet .submore a,#product .subBoxTitle a{display:inline-block;border:1px solid #d0d0d0;font-size:13px;padding:12px 55px;color:#545454;position:relative;transition:all linear .2s}
#NewsBox .speBox .titleSet .submore a:before,#product .subBoxTitle a:before{content:'+';position:absolute;left:12px;top:10px;color:#d0d0d0;font-size:24px}
#news{
    float: left;
    width: 570px;
}
#news .titleSet{overflow: hidden;margin-bottom: 30px;padding: 5px 0 5px 10px;}
#news .titleSet h2{display: inline-block;}
#news .titleSet p{display: inline-block;}
#news .titleSet p a{color: #111111;border: 1px solid #111111;padding: 5px 20px;margin-left: 10px;font-size: 14px;letter-spacing: 4px;}
#news .titleSet p a:hover{
    background-color: #111111;
    color: #fff;
}
#news .newsList >div{
    background-color: #fff;
    box-shadow: 0px 0px 10px rgb(0 0 0 / 0.1);
    margin: 0 10px;
}
#news .newsList >div:last-child, #news2 .newsList >div:last-child{
    margin-bottom: 10px;
}
#news .newsList .border{position:relative;overflow:hidden;padding: 20px;}
#news .newsList .border a,#product #prolay .p-box a{position:absolute;display:block;width:100%;height:100%;left:0;top:0;z-index:5}
#news .newsList .photo{background-repeat:no-repeat;background-position:50% 50%;background-size:cover;float:left}
#news .newsList .photo img,#product #prolay .photo img{width:100%}
#news .newsList .news-info, #news2 .newsList .news-info{
    overflow: hidden;
}
#news .newsList .news-info p, #news2 .newsList .news-info p{font-size: 13px;color: #111111;display: inline-block;margin-right: 20px;width: 80px;}
#news .newsList .news-info h3, #news2 .newsList .news-info h3{font-size: 16px;line-height:110%;font-weight:400;color: #111111;font-family:'Noto Serif TC',serif;transition:all linear .2s;display: inline-block;width: calc(100% - 160px);overflow: hidden;height: 18px;}
#news .newsList .news-info .describe{color:#888;font-weight:400;font-size:16px;position:relative}
#news .newsList .news-info .describe h4{font-weight:400;width:calc(100% - 80px)}
#news .newsList .news-info p.more, #news2 .newsList .news-info p.more{position:absolute;right:0;top:0;padding-bottom:15px;font-size:13px;width: 30px;}
#news .newsList .more b{font-weight:400;color:#5f5f5f}
#news .newsList .more:after, #news2 .newsList .more:after{content:'';display:block;position:absolute;left: 15px;bottom:0;width: 12px;height:1px;background: #111111;transform:rotate(35deg);transform-origin:center right;transition:all linear .2s;}
#news .newsList .more:before, #news2 .newsList .more:before{content:'';display:block;position:absolute;left:6px;bottom:0;width: 20px;height:1px;background: #111111;transition:all linear .2s;transition-delay:.2s;}
#news2{
    float: right;
    width: 570px;
}
#news2 .titleSet{overflow: hidden;margin-bottom: 30px;padding: 5px 0 5px 10px;}
#news2 .titleSet h2{display: inline-block;}
#news2 .titleSet p{display: inline-block;}
#news2 .titleSet p a{color: #111111;border: 1px solid #111111;padding: 5px 20px;margin-left: 10px;font-size: 14px;letter-spacing: 4px;}
#news2 .newsList >div{background-color: #fff;box-shadow: 0px 0px 10px rgb(0 0 0 / 0.1);margin: 0 10px;}
#news2 .newsList .border{position:relative;overflow:hidden;padding: 20px;}
#news2 .newsList .border a,#product #prolay .p-box a{position:absolute;display:block;width:100%;height:100%;left:0;top:0;z-index:5}
#news2 .newsList .photo{background-repeat:no-repeat;background-position:50% 50%;background-size:cover;float:left}
#news2 .newsList .photo img,#product #prolay .photo img{width:100%}
#news2 .newsList .news2-info{float:left;margin-left:30px;width:calc(100% - 340px)}
#news2 .newsList .news2-info p{font-size:14px;color:#000}
#news2 .newsList .news2-info h3{font-size:24px;line-height:110%;font-weight:400;margin:7px 0 20px;color:#3c3838;font-family:'Noto Serif TC',serif;transition:all linear .2s}
#news2 .newsList .news2-info .describe{color:#888;font-weight:400;font-size:16px;position:relative}
#news2 .newsList .news2-info .describe h4{font-weight:400;width:calc(100% - 80px)}
#news2 .newsList .more{position:absolute;right:0;top:0;font-family:'Merriweather',serif;padding-bottom:15px;font-size:13px}
#news2 .newsList .more b{font-weight:400;color:#5f5f5f}
@media screen and (min-width: 1024px) {
#NewsBox{
}
#news .newsList .border:hover .more:after{transform:rotate(0deg);opacity:0}
#news .newsList .border:hover .more:before{width:0;left:30px}
#news2 .newsList .border:hover .more:after{transform:rotate(0deg);opacity:0}
#news2 .newsList .border:hover .more:before{width:0;left:30px}
}
@media screen and (max-width: 1680px) {
#aboutBox:before{
    zoom: 80%;
}
}
@media screen and (max-width: 1460px) {

#aboutBox:before{left: -200px;}
#productBox .workframe{
    width: 95%;
}
	#youtubeJbox .videommbox .videoJ iframe{
    height: 462px;
}
}
@media screen and (max-width: 1280px) {
	#aboutBox .imgs , #bookBox .row {position: relative;width: 100%;display: inline-block;}
	#aboutBox .info, #aboutBox .right {width: 70%;margin: 0 auto;float: none;}
	#aboutBox .info article{margin-bottom: 30px;}
    #aboutBox:before{bottom: 250px;}
    section{width: 98%;}
	#aboutBox p.more{ text-align: center;}
	#aboutBox .info .stitle{text-align: center;}
}
@media screen and (max-width: 1024px) {
    #news, #news2{float: none;width: 100%;}
    #news2{margin-top: 40px;}
    #NewsBox{
    padding: 40px 0;
}
}
@media screen and (max-width: 980px) {
	#aboutBox .info .title { font-size: 8vw; }
	#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);}
	#aboutBox:before{display: none;}
	#aboutBox .info, #aboutBox .right{width: 97%;}
	#productBox .proList li{
    width: calc((100%/2) - 20px);
}
#productBox .proList{
    margin-top: 30px;
}
#productBox .proList .item{
    margin: 10px auto;
}
#aboutBox .right ul li{
    margin-left: 10px;
}
}
@media screen and (max-width: 680px) {
	#aboutBox .imgs .list {height: 60vw;}
	#productBox .proList {
	    display: flex;
	    flex-direction: column;
	    align-items: center;
	}
	#productBox .proList li{
	    width: calc((100%/1) - 20px);
	}
	#productBox .proList .item .info h3{
    height: 28px;
}
	#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;}
}
@media screen and (max-width: 480px) {
	#aboutBox{}
	#youtubeJbox{
    margin: 0;
}
    #aboutBox .right ul li .circle img{
    width: 40px;
}	
    #aboutBox .right ul li .item p{
    font-size: 15px;
}
    #aboutBox .right ul li .item{
    padding: 50px 20px;
}
#aboutBox .right ul{
    text-align: center;
}
#aboutBox .right ul li:after{
    width: calc(100% - 15px);
    height: calc(100% - 15px);
}
#productBox .proList .item .info h3 a{
    font-size: 16px;
}
	#youtubeJbox .videommbox{
	    display: flex;
	    flex-direction: column;
	    align-items: center;
	}
	#youtubeJbox .videommbox .videoJ{
    width: 100%;
}
	#youtubeJbox .videommbox .videoJ iframe{
	    height: 302px;
	}
	#aboutBox .right ul li{
    width: calc((100%/1) - 20px);
    margin-bottom: 20px;
    margin-left: 0;
}
}
@media screen and (max-width: 450px) {	
	#aboutBox .info {padding: 0 5vw;width: 90vw;}
}