.wow{animation-duration:.7s;animation-name:fadeInUp}
.wrap { position: relative; background: #fff; z-index: 998; }
.wrap #wrapBox >div { position: relative; }
.wrap #wrapBox .bg {position: absolute;width: 70%;height: 60%;background: linear-gradient(to right, #fff, #bbbbbb);top: 160px;left: 0;opacity: .4;}

/* more */
p.more { padding: 20px 0; text-align: center; }
p.more a {position: relative;overflow: hidden;padding: 0 30px;display: inline-block;align-items: center;border-width: 0 0 1px 1px;letter-spacing: .06em;line-height: 30px;transition: 1.2s ease 1.8s;transform: translateX(0%);border-radius: 50px;background-color: #b19d60;}
p.more a:before { position: absolute; width: 100%; height: 100%; background: #000; top: 0; left: 0; transform: translateX(-140%) skewX(63deg); transition: .4s cubic-bezier(.23,1,.32,1); content: "" }
p.more a:after {position: absolute;width: 85%;height: 1px;display: block;top: 0;left: 0;content: "";display: none;}
p.more a font {position: relative;padding: 7px 0;display: inline-block;color: #fff;z-index: 2;}
p.more a span {position: relative;margin-left: 30px;width: 20px;height: 1px;background: #fff;display: inline-block;transition: transform .4s cubic-bezier(.23,1,.32,1),background .4s ease;transform-origin: center left;}
p.more a span:after {position: absolute;width: 0;height: 0;border-style: solid;border-width: 3px 0 3px 6px;border-color: transparent transparent transparent #fff;display: block;right: 0;top: -3px;content: "";}

/* bgTxt */
.bgTxt { position: absolute; z-index: 1; }
.bgTxt.stitle { -webkit-writing-mode: vertical-lr; writing-mode: vertical-lr; font-size: 70px; }
.bgTxt.title {width: 100%;text-align: right;font-size: 140px;font-weight: 200;line-height: 120%;color: #e7e7e7;z-index: 0;top: 35px;}

/* NewsBox */
#NewsBox{overflow: hidden;position: relative;padding: 90px 0 0px;background: no-repeat -10% 30% / auto;background-image: url(/images/17/index-news-bg.png);}
#NewsBox::before {content: '';position: absolute;display: block;background: linear-gradient(to bottom,rgb(198 181 140 / 15%) 90%, #ffffff 100%);height: 1%;left: 780px;top: 0px;transform: matrix(1, 0, 203.58, 185, 0, 0);z-index: 5;-ms-flex-negative: 0;flex-shrink: 0;width: 22vw;z-index: 0;}
#NewsBox section{overflow: hidden;position: relative;width: 1366px;margin: 0 auto;padding-bottom: 110px;}
#NewsBox .left{float: right;width: 64%;}
#NewsBox .right{width: 52%;margin: 0px 0;position: absolute;top: -30px;}
#NewsBox .left .six-fiexd{background-repeat: no-repeat;background-position: 50% 50%;background-size: cover;}
#NewsBox .speBox {padding: 40px 20px;text-align: right;}
#NewsBox .speBox .index-title{padding: 0px 20px;}
#news{background-color: white;padding: 20px 20px;}
#NewsBox .speBox .titleSet {color: #303030;margin-bottom: 20px;}
#NewsBox .speBox .index-title h2{margin-bottom: -10px;font-size: 44px;color: #c6b58c;text-transform: uppercase;font-weight: 300;}
#NewsBox .speBox .index-title h2::before {margin-right: -8px;margin-bottom: 0px;width: 1px;height: 40px;content: "";display: block;background: #c6b58c;transform-origin: center top;writing-mode: tb-rl;}
#NewsBox .speBox .index-title p{color: #000;letter-spacing: 8px;font-size: 26px;font-weight: 700;}
#NewsBox .speBox .titleSet .speBoxTitle:first-letter {margin-right: 2px;color: #43a3ef;}
#NewsBox .speBox .titleSet h3 {text-align: left;position: absolute;bottom: -10px;right: -30px;background-color: #000000;padding: 20px 30px;}
#NewsBox .speBox .titleSet h3 a , #bookBox .speBox p a {display: block;font-weight: 400;color: #ffffff;font-size: 15px;line-height: 120%;letter-spacing: 1.2px;transition: all linear .2s;font-family: 'Roboto', sans-serif;}
#news .border {position: relative;padding: 14px 0;border-bottom: 1px solid rgba(0, 0, 0, 0.12);}
#news .border .time{
    color: #b19d60;
}
#news .border a { position: absolute; width: 100%; height: 100%; display: block; left: 0; top: 0; z-index: 3; }
#news .border .news-info {padding: 0;display: flex;flex-direction: column;}
#news .border .news-info p {color: #6c6c6c;float: left;font-size: 17px;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;margin: 5px 0 10px;height: auto;-webkit-line-clamp: 2;}
#news .border .news-info h3 {overflow: hidden;font-weight: 500;color: #000;font-size: 22px;line-height: 160%;width: 100%;max-height: initial;text-overflow: ellipsis;-webkit-line-clamp: 1;display: -webkit-box;-webkit-box-orient: vertical;}


#news .border .news-info span {position: relative;margin: 12px auto;width: 40px;height: 1px;background: #635840;display: block;transition: all linear .2s;display: none;}
#news .border .news-info span:before { position: absolute; width: 10px; height: 1px; background: #635840; display: block; right: 0; transform: rotate(35deg); transform-origin: right; content: ""; }
#news .more{position: absolute;top: 110px;right: 140px;}

/* productBox */
#productBox{
    background: #f2f8fa;
    background-image: url(/images/34/img-s-bg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 0% 50%;
}
#productBox .bgTxt.stitle {top: 16vw;z-index: 3;left: -110px;display: flex;flex-wrap: wrap;flex-direction: column;justify-content: center;}
#productBox .bgTxt.stitle h2{color: #c6b58c;font-size: 22px;display: flex;align-items: center;position: relative;margin-bottom: 10px;padding-left: 0px;font-weight: 200;letter-spacing: 4.5px;}
#productBox .bgTxt.stitle em{font-size: 34px;font-weight: 700;color: #c6b58c;font-style: initial;line-height: 140%;letter-spacing: 8px;}
#productBox .bgTxt.stitle h2::before {margin-right: -8px;margin-bottom: 20px;width: 1px;height: 40px;content: "";display: block;background: #c6b58c;transform-origin: center top;writing-mode: tb-rl;}
#productBox .wall {padding: 7vw 0 0;}
#productBox .wall-column {width: calc(100% / 4);display: inline-block;box-sizing: border-box;}
#productBox .article {margin: 25px 20px 40px;background: #fff;position: relative;border: 1px solid #e1e1e1;transition: 0.9s;padding: 18px;height: 420px;}
#productBox .article a {position: absolute;width: 100%;height: 100%;display: block;top: 0;left: 0;z-index: 10;display: none;}
#productBox .article .step{display: inline-block;font-style: italic;border-bottom: 1px solid rgb(0 0 0);border: 1px solid #e1e1e1;padding: 15px;position: absolute;top: 0;left: 0;background-color: #b19d60;font-size: 14px;text-align: center;line-height: 40px;text-transform: uppercase;letter-spacing: 1px;transform: translate(-20px, -1px);transition: 0.6s;z-index: 20;width: 40px;height: 40px;}
#productBox .article .step p {font-size: 35px;line-height: 130%;font-weight: 200;z-index: 10;color: #fff;}
#productBox .article .imgBox {position: relative;overflow: hidden;width: 100px;margin: 0 auto;border-radius: 50%;display: flex;justify-content: center;align-items: center;height: 100px;padding: 40px;}
#productBox .article .info article {padding: 20px 0px 10px;font-size: 12px;width: calc(100% - 0px);background: #fff;color: #777070;z-index: 2;}
#productBox .article .info article p{
    font-size: 15px;
}
#productBox .article .imgBox article p { height: 58px;  -webkit-line-clamp: 2; }
#productBox .article .imgBox:after {position: absolute;width: 60%;height: 40px;background: #fff;display: block;left: 0;bottom: 0;z-index: 1;content: "";display: none;}
#productBox .article .info {position: relative;margin-top: -15px;padding: 0 10px 5px;z-index: 9;}
#productBox .article .info p span { display: inline-block; color: #d80707; }
#productBox .article .info p span.old { margin-right: 10px; color: #8f8f8f; }
#productBox .article .info h3 {margin: 12px 0 0;height: 30px;font-weight: 500;font-size: 21px;-webkit-line-clamp: 1;letter-spacing: 1px;border-top: 3px solid #b19d60;border-bottom: 1px solid #cbcbcb;padding: 10px 0px 10px 0px;color: #b19d60;font-family: 'Noto Serif TC';}

/* aboutBox */
#buil01 {overflow: hidden;position: relative;background: #ffffff;background-image: url(/images/34/ab-bg.jpg);background-repeat: no-repeat;background-position: 70% 50%;background-size: cover;top: 0;left: 0;/* padding: 110px 0; */}
#aboutBox {overflow: hidden;position: relative;display: flex;align-items: center;width: 80%;margin: auto;justify-content: flex-start;padding: 110px 0;}
#aboutBox .imgs {z-index: 1;width: 40%;margin-bottom: 0px;display: none;}
#aboutBox .imgs .list {height: 35vw;background: no-repeat 50%;background-size: contain;}
#aboutBox .info {position: relative;z-index: 3;padding: 0px 0px 0px 80px;}
#area_box{width: 45%;}


.titleBox{
	position:
	absolute;
	top:0;
	bottom: 0;
	left: -40px;
	-webkit-writing-mode: vertical-rl;
	writing-mode: tb-rl;
}

.titleBox h2{
	font-weight: normal;
	font-size: 22px;
	color: #b19d60;
	position:
	absolute;
	top: 110px;
	left: 30px;
	letter-spacing: 7px;
}

.titleBox h2 strong{
	letter-spacing: 0;
	display: block;
	position:
	absolute;
	top:50%;
	right: -22px;
	transform:
	translateY(-50%);
	font-weight:
	normal;
	color: #979797;
	font-size: 16px;
	white-space:
	nowrap;
	}
.titleBox h2:before{
	content: "";
	display: block;
	width: 0px;
	height: 1000px;
	background: #cab68d;
	left: 50%;
	bottom: calc(100% + 20px);
	position:
	absolute;
}
.titleBox h2:after{
	content: "";
	display: block;
	width: 2px;
	height: 4000px;
	background: #cab68d;
	left: 50%;
	top: 129px;
	position:
	absolute;
}


#aboutBox .info .title {font: 400 90px/0.9 "Unna", "Noto Serif TC", serif;color: #caaf71;}
#aboutBox .info .stitle {text-align: center;color: #FFFFFF;background: #caaf71;padding: 16px 40px;display: inline-flex;line-height: 100%;position: relative;margin-bottom: 10px;letter-spacing: 2.5px;font-size: 22px;font-weight: 700;}
#aboutBox .info .stitle:after {
    content: '';
    width: 43px;
    height: 5px;
    background: #FFFFFF;
    transform: translateY(-50%);
    left: -15px;
    top: 50%;
    position: absolute;
}
#aboutBox .info article {font-size: 16px;line-height: 200%;color: #585858;}
#aboutBox .info article p{
    line-height: 190%;
    font-weight: 400;
    font-size: 17px;
    font-family: 'Noto Sans TC';
    letter-spacing: 0.5px;
}
#aboutBox .info article h2{
    font-size: 23px;
    color: #000;
    font-weight: 600;
    margin-bottom: 20px;
    background: url(/images/34/img-dot.png) repeat-x 0 bottom;
    padding: 5px 0 15px;
}
#aboutBox #SeoStarRating { margin: 15px 0 30px; text-align: right; }
#aboutBox p.more { text-align: left; }
#sPictureBox{
    z-index: 1;
    width: 70%;
    margin: auto;
}
#sPictureBox .list {position: relative;background: rgb(231 231 231);border-radius: 30px;padding: 40px;margin: 0px 30px 30px;position: relative;transition: all 0.5s ease-in-out;opacity: 1;transform: scaleX(1);height: 260px;}
#sPictureBox .list a {position: absolute;width: calc(100% - 0px);height: 100%;display: block;top: 0;z-index: 3;display: none;}
#sPictureBox .list .img { position: relative; margin: 0 30px; z-index: 1; }
#sPictureBox .list .img img { width: 100%; height: 200px; object-fit: cover; }
#sPictureBox .list .img {height: 70px;width: 70px;border-top-right-radius: 350px;background: rgb(255 255 255 / 72%);border-radius: 100%;padding: 40px;margin: 0 auto 20px;position: relative;transition: all 0.5s ease-in-out;opacity: 1;transform: scaleX(-1);display: none;}
#sPictureBox .list:after {border-left: 15px solid transparent;border-right: 15px solid transparent;border-top: 15px solid rgb(231 231 231);height: 0;left: 50%;margin-left: -15px;position: absolute;width: 0;bottom: -13px;content: "";}
#sPictureBox .list .img img{height: 100%;width: 100%;object-fit: contain;}
#sPictureBox .list .txt {margin-right: auto;top: 0;left: 30px;z-index: 2;text-align: center;}
#sPictureBox .list .txt h4 {font-weight: 500;font-size: 22px;color: #b19d60;position: relative;text-align: center;margin-bottom: 10px;letter-spacing: 1.5px;font-family: 'Unna', serif, 'Noto Serif TC', serif,'Noto Sans TC', 'Noto Sans SC', serif;padding-bottom: 20px;line-height: 140%;}
#sPictureBox .list .txt  b{
    color: #c6b58c;
    text-align: center;
    font-size: 14px;
}
#sPictureBox .list .txt h4:after {
    content: "";
    position: absolute;
    width: 40px;
    height: 2px;
    background-color: #bba87a;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}
#sPictureBox .list .txt h2{font-weight: 200;letter-spacing: 0.2px;margin-bottom: 10px;font-size: 16px;text-align: center;color: #4a4a4a;font-family: 'Noto Sans TC';}
#sPictureBox .list .txt .more {margin-top: 5px;text-align: center;padding: 20px 0 0px 0;}
#sPictureBox .list .txt .more font {margin-right: 10px;font-weight: 500;text-transform: uppercase;letter-spacing: .7px;font-size: 13px;position: relative;display: block;width: 150px;padding: 17px 20px 17px 10px;color: #fff;background-color: #efacab;text-align: center;display: inline-block;}

/* bookBox */
#bookBox { padding: 50px 0 50px calc((100% - 1100px) / 2); font-size: 0; }
#bookBox .row { position: relative; width: 50%; display: inline-block; z-index: 2; }
#bookBox #customBox .bgTxt.stitle { z-index: 2; }
#bookBox #customBox ul { position: relative; padding: 0 10% 0 20%; z-index: 3; }
#bookBox #customBox ul li h3 { font-size: 40px; }
#bookBox #customBox p.more a { border-color: #000; }
#bookBox #customBox p.more a:after { background: #000; }
#bookBox #BookList ul { overflow: hidden; }
#bookBox #BookList ul li { position: relative; margin-bottom: 1px; float: left; width: 25%; }
#bookBox #BookList ul li:nth-child(6n) { width: 50%; }
#bookBox #BookList ul li a.photo { margin-right: 1px; }
#bookBox #BookList ul li h3 { position: absolute; padding: 5px 20px; width: calc(100% - 41px); background: rgba(0, 0, 0, .7); left: 0; bottom: 0; }
#bookBox #BookList ul li h3 a { height: 30px; color: #fff; text-align: center; -webkit-line-clamp: 1; }

/* slognBox */
#slognBox{background-image: url(/images/34/index-slogn-bg.jpg);background-repeat: no-repeat;background-position: 50% 50%;background-size: cover;padding: 30px 0;position: relative;background-color: #b19d60;z-index: 10;}
#slognBox .workframe {position: relative;margin: 0 auto;width: 80%;font-size: 0;z-index: 1;padding: 40px 0;}
#slognBox:after{content:'';position:absolute;background: #1c1d1f;opacity: 1;width: 84%;height: 100%;top: 0;z-index: -1;}
#slognBox h3{text-align: center;color: #fff;font-size: 34px;font-weight: 500;letter-spacing: 5px;line-height: 140%;}
#slognBox p{text-align: center;color: #fff;font-size: 18px;margin-top: 10px;letter-spacing: 1px;text-transform: capitalize;}


@keyframes newimg { 0% { background-position: 0; } to { background-position: -7px; } }
@-webkit-keyframes newimg { 0% { background-position: 0; } to { background-position: -7px; } }
@media screen and (min-width: 1025px) {
	#aboutFunc .index-title h3 a:hover,#NewsBox .speBox .index-title h3 a:hover{background-color: #1d639e;}
	#news .slick-track >div:nth-child(3n-1) .border {}
	#news .border:hover .news-info span { width: 50px; }
}

@media screen and (max-width: 1440px) {
	#sPictureBox{width: 85%;}
	#sPictureBox .list .txt h4{
    font-size: 19px;
}
	#aboutBox .imgs{width: 50%;}
	#area_box{width: 49%;margin-left: 80px;}
	#aboutBox .info{padding: 0px 0px;}
	#aboutBox{width: 90%;}
	#productBox .bgTxt.stitle{left: -110px;}.bgTxt.title{top: 40px;font-size: 110px;}
}
@media screen and (min-width: 1281px) {
	p.more a:hover { border-color: #000; }
	p.more a:hover:before { transform: translateX(0) skewX(0); }
	p.more a:hover:after {background: #000;}
	p.more a:hover font { color: #fff; }
	p.more a:hover span { background: #fff; transform: scale(1.1); }
	p.more a:hover span:after { border-color: transparent transparent transparent #fff; }
	#productBox .article .info .article:hover .imgBox article { bottom: 0; }
	#buil01 {background-attachment: fixed;}
	#sPictureBox .list:hover .img{-webkit-transform: translateY(10%);transform: translateY(10%);animation-name: elementor-animation-buzz-out;animation-duration: .75s;animation-timing-function: linear;animation-iteration-count: 1;background: rgb(66 111 53);}
	#sPictureBox .list:hover .img:after{border-top: 15px solid rgb(66 111 53);}
	#sPictureBox .list:hover .img img{-webkit-filter: contrast(0) brightness(150%);filter: contrast(0) brightness(200%);}
	#slognBox{background-attachment: fixed;}
}
@media screen and (max-width: 1366px) {
	#sPictureBox .list{
    height: 300px;
}
	#productBox .bgTxt.stitle{top: -4vw;z-index: 3;left: 0px;}
	#productBox .bgTxt.stitle h2{display: flex;flex-direction: row;flex-wrap: wrap;margin-bottom: 0px;}
	#productBox .bgTxt.stitle h2::before{display: none;}
	#productBox .bgTxt.stitle {padding: 0vw 0 0;top: 0;left: 0px;margin: 0px 10px 0px;}
	.bgTxt.stitle { position: relative; font-size: 10vw; -webkit-writing-mode: inherit; writing-mode: inherit; }
	.bgTxt.title,.titleBox  { display: none; }
}
@media screen and (max-width: 1280px) {
	#bookBox .row { width: 100%; }
	#aboutBox .imgs .list {height: 60vw;}
	#area_box{
    margin-left: 10px;
}
	#aboutBox .info {padding: 35px 0%;margin: 20px auto;background: rgb(255 255 255 / 60%);}
	#aboutBox:before { opacity: 0; }
	#aboutBox p.more a:after { background: #000; }
	#aboutBox p.more a { border-color: #000; }
	#bookBox { padding: 50px 5%; font-size: 0; }
	#bookBox #customBox ul { padding: 0 0 0 130px; }
	#bookBox #BookList { padding: 50px 0 20px; }
	#NewsBox .speBox {padding: 20px 50px 80px 30px;}
	#NewsBox .speBox .titleSet h3{bottom: -20px;right: -30px;}
	#NewsBox section{width: 90%;padding-bottom: 140px;}
	#NewsBox .right{margin: 50px 0;}
	#news .more{bottom: -10px;}

}
@media screen and (max-width: 1180px) {
	#NewsBox {float: none;width: 100%;padding: 60px 0px 10px;}
	#NewsBox .speBox .titleSet {width: auto;display: block;}
	#NewsBox .speBox {padding: 20px 0px 0px;}
	#NewsBox section{width: 90%;padding-bottom: 0px;}
	#news { margin: 0; }
	#news .slick-track >div:nth-child(3n-1) .border { margin-top: 0; }
	#aboutBox .imgs{width: 100%;}
#productBox .wall-column {width: calc(100% / 2);display: inline-block;box-sizing: border-box;}
}
@media screen and (max-width: 1024px) {
	#NewsBox .left{float: none;width: 100%;}
	#NewsBox .right{width: 100%;margin: 0;position: inherit;top: -30px;}
	#NewsBox .speBox .titleSet h3{bottom: -30px;right: 0%;}
	#NewsBox .speBox .more {position: relative;top: 0;right: 0;margin-top: 20px;display: inline-block;}
	#news {text-align: center;padding: 20px 20px 0;}
	#aboutBox{display: flex;flex-direction: row;flex-wrap: wrap;padding: 0px 0;}
	#area_box{width: 100%;margin-left: 0px;}
	#aboutBox .info{width: auto;}
}
@media screen and (max-width: 980px) {
	#productBox .wall-column { width: 50%; }

	#aboutBox .info .title {font-size: 5vw;}
	#aboutBox .info .stitle {font-size: 3vw;}
	#bookBox #customBox ul { padding: 0; }
	#bookBox #BookList ul li , #bookBox #BookList ul li:nth-child(6n) { width: calc(100% / 3); }
	#NewsBox section{width: 90%;padding-bottom: inherit;margin: 10px auto 0;}
	#productBox .article .step {width: 30px;height: 30px;padding: 10px;}
#productBox .article .step p{
    font-size: 26px;
    line-height: 120%;
}
	#productBox .article .imgBox{
    width: 70px;
    height: 70px;
    padding: 30px;
}
	.wrap #wrapBox .bg{
    width: 100%;
    height: 100%;
    top: 120px;
}
	#slognBox .workframe{
    padding: 20px 0 40px 0;
}
	#slognBox h3{
    font-size: 26px;
    letter-spacing: 2px;
}
	#sPictureBox{
    width: 90%;
}
	#sPictureBox .list{
    height: 260px;
    padding: 20px;
}
	#slognBox:after{
    width: 95%;
}
	#sPictureBox .list .txt h4{
    font-size: 20px;
    margin-bottom: 10px;
}
	#sPictureBox .list .txt h2{
    font-size: 15px;
    margin-bottom: 0;
    letter-spacing: 0;
}
}
@media screen and (max-width: 680px) {
	#productBox .wall {margin: auto;width: 90%;}
	#productBox .wall-column { width: 100%; }
	#aboutBox .imgs .list {}
	#NewsBox{padding: 50px 0 0px;background: no-repeat -10% 30% / auto;}
	#NewsBox .speBox .titleSet h2, #bookBox .speBox h2{font-size: 30px;}
	#sPictureBox .nowrap_box {/* margin-top: 40px; */padding-bottom: 0px;/* margin-bottom: 60px; */}
	#sPictureBox .nowrap_box .slick-dots{bottom: -34px;}
	#sPictureBox .slick-dots li button:before{
    color: #b1b1b1;
}
	.wrap #wrapBox >div{padding: 30px 0 10px 0;background-position: 53% 0%;}
	#productBox .article{margin: 15px 10px 20px;}
	#aboutBox .info .title, #productBox .bgTxt.stitle em,#NewsBox .speBox .index-title h2 {font-size: 7vw;letter-spacing: 2px;}
	#aboutBox .info .stitle, #productBox .bgTxt.stitle h2,#NewsBox .speBox .index-title p {font-size: 5vw;letter-spacing: 3px;}
	#productBox .article{
    height: auto;
}
}
@media screen and (max-width: 500px) {
	#bookBox #BookList ul li , #bookBox #BookList ul li:nth-child(6n) { width: 50%; }
	#bookBox #BookList ul li:nth-child(3n) { width: 100%; }
}
@media screen and (max-width: 480px) {
	#news .border .news-info {padding: 7px 0px;}
	#news .border .news-info h3 {height: auto;font-size: 19px;}
	#news .border .news-info p{margin-right: 2px;font-size: 15px;}
	#sPictureBox .list{
    height: 280px;
}
}
@media screen and (max-width: 450px) {
	#productBox .wall { width: 100%; }
	#aboutBox .info {padding: 4vw 5vw 3vw 5vw;margin: 0px 0 0px;}
}