.wrap { position: relative; background: #fff; z-index: 998; }
.wrap #wrapBox >div { position: relative; }
.wrap #wrapBox .bg { position: absolute; width: 100%; height: 100%; background: no-repeat 50% / cover; top: 0; 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: #426f35;}
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;color: #edf1f3;z-index: 0;}

/* 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(220 232 216 / 56%) 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: 80px;}
#NewsBox .left{float: right;width: 64%;}
#NewsBox .right{width: 52%;margin: 0px 0;position: absolute;top: -20px;}
#NewsBox .left .six-fiexd{background-repeat: no-repeat;background-position: 50% 50%;background-size: cover;}
#NewsBox .speBox {padding: 40px 50px;text-align: right;}
#NewsBox .speBox .index-title{padding: 0px 20px;}
#news{background-color: white;padding: 20px;}
#NewsBox .speBox .titleSet {color: #303030;margin-bottom: 20px;}
#NewsBox .speBox .index-title h2{margin-bottom: 0px;font-size: 44px;color: #426f35;}
#NewsBox .speBox .index-title h2::before {margin-right: -8px;margin-bottom: 0px;width: 1px;height: 40px;content: "";display: block;background: #426f35;transform-origin: center top;writing-mode: tb-rl;}
#NewsBox .speBox .index-title p{color: #000;letter-spacing: 0.8px;}
#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;margin: 0;border-bottom: 1px solid rgba(0, 0, 0, 0.12);}
#news .border a { position: absolute; width: 100%; height: 100%; display: block; left: 0; top: 0; z-index: 3; }
#news .border .news-info {padding: 13px 0px;display: flex;}
#news .border .news-info p {color: #cacaca;float: left;width: 14%;font-size: 17px;}
#news .border .news-info h3 {overflow: hidden;font-weight: 400;color: #000;font-size: 17px;line-height: 160%;width: 70%;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 .bgTxt.stitle {top: -4vw;z-index: 3;left: -180px;display: flex;flex-wrap: wrap;flex-direction: column;justify-content: center;}
#productBox .bgTxt.stitle h2{color: #426f35;font-size: 22px;display: flex;align-items: center;position: relative;margin-bottom: 10px;padding-left: 0px;font-weight: 200;letter-spacing: 4.5px;display: none;}
#productBox .bgTxt.stitle em{font-size: 52px;font-weight: 700;color: #426f35;font-style: initial;line-height: 130%;}
#productBox .bgTxt.stitle h2::before {margin-right: -8px;margin-bottom: 20px;width: 1px;height: 40px;content: "";display: block;background: #426f35;transform-origin: center top;writing-mode: tb-rl;}
#productBox .wall {padding: 7vw 0 0;}
#productBox .wall-column { width: calc(100% / 3); display: inline-block; box-sizing: border-box; }
#productBox .article { position: relative; margin: 15px 10px 40px; background: #fff; }
#productBox .article a {position: absolute;width: 100%;height: 100%;display: block;top: 0;left: 0;z-index: 10;display: none;}
#productBox .article .step{color: #585858;opacity: 0.8;position: absolute;font-weight: bold;left: 10px;top: -30px;line-height: 1em;z-index: 5;transition: all 0.35s ease;background: linear-gradient(45deg, #000000 0%, #000000 99%, #000000 100%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;padding: 0px 9px 0;display: inline-block;font-family: "Judson","Noto Sans TC",serif;font-style: italic;letter-spacing: 0.5px;border-bottom: 1px solid rgb(0 0 0);}
#productBox .article .step p {font-size: 35px;font-weight: 200;}
#productBox .article .imgBox { position: relative; overflow: hidden; }
#productBox .article .imgBox article { position: absolute; padding: 20px 20px 30px; width: calc(100% - 40px); background: #fff; color: #777070; bottom: -99px; z-index: 2; }
#productBox .article .imgBox article p { height: 58px;  -webkit-line-clamp: 2; }
#productBox .article .imgBox:after { position: absolute; width: 60%; height: 20px; background: #fff; display: block; left: 0; bottom: 0; z-index: 1; content: ""; }
#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: 400;font-size: 18px;-webkit-line-clamp: 1;}

/* aboutBox */
#buil01 {overflow: hidden;position: relative;background: #f2f8fa;background-image: url(/images/34/ab-bg.jpg);background-repeat: no-repeat;background-size: cover;top: 0;left: 0;padding: 70px 0;}
#aboutBox {overflow: hidden;position: relative;display: flex;align-items: center;width: 80%;margin: auto;justify-content: flex-start;}
#aboutBox .imgs {z-index: 1;width: 40%;margin-bottom: 0px;}
#aboutBox .imgs .list {height: 35vw;background: no-repeat 50%;background-size: contain;}
#aboutBox .info {position: relative;z-index: 3;padding: 0px 30px;}
#area_box{width: 43%;margin-left: 30px;}
#aboutBox .info .title {font-size: 40px;font: 700 40px/0.9 "Cinzel", "Noto Serif TC", serif;color: #131313;}
#aboutBox .info .stitle {margin-bottom: 10px;padding: 5px 0 15px;background: url(/images/34/img-dot.png) repeat-x 0 bottom;font-size: 20px;color: #3e3e3e;}
#aboutBox .info article {font-size: 16px;line-height: 180%;color: #4e4e4e;font-weight: 700;}
#aboutBox #SeoStarRating { margin: 15px 0 30px; text-align: right; }
#aboutBox p.more { text-align: left; }

#sPictureBox .list { position: relative; }
#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);}
#sPictureBox .list .img:after {border-left: 15px solid transparent;border-right: 15px solid transparent;border-top: 15px solid rgb(255 255 255 / 38%);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 {padding: 15px 5%;margin-right: auto;top: 0;left: 30px;z-index: 2;}
#sPictureBox .list .txt h4 {font-weight: 500;font-size: 18px;color: #426f35;position: relative;text-align: center;margin-bottom: 10px;letter-spacing: 1.5px;}
#sPictureBox .list .txt h2{font-weight: 200;letter-spacing: 0.2px;margin-bottom: 10px;font-size: 14px;text-align: center;}
#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; }

@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) {
	#aboutBox .imgs{width: 50%;}
	#area_box{width: 49%;margin-left: 0px;}
	#aboutBox .info{padding: 0px 0px;}
	#aboutBox{width: 90%;}
	#productBox .bgTxt.stitle{left: -110px;}.bgTxt.title{top: 10px;}
}
@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 .wall-column .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%);}
}
@media screen and (max-width: 1366px) {
	#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 { display: none; }
}
@media screen and (max-width: 1280px) {
	#bookBox .row { width: 100%; }
	#aboutBox .imgs .list {height: 60vw;}
	#aboutBox .info {padding: 35px 10%;width: 70%;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 50px;}
	#NewsBox .speBox .titleSet {width: auto;display: block;}
	#NewsBox .speBox {padding: 20px 0px 0px;}
	#NewsBox section{width: 90%;padding-bottom: 90px;}
	#news { margin: 0; }
	#news .slick-track >div:nth-child(3n-1) .border { margin-top: 0; }
	#aboutBox .imgs{width: 100%;}
}
@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;}
	#aboutBox{display: flex;flex-direction: row;flex-wrap: wrap;}
	#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 {display: none;}
	#sPictureBox .list .txt{
    padding: 15px
 0%;
}
}
@media screen and (max-width: 680px) {
	#productBox .wall { margin: auto; width: 80%; }
	#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;}
	.wrap #wrapBox >div{padding: 30px 0 0px 0;}
	#productBox .article{margin: 15px 10px 20px;}
	#aboutBox .info .title, #productBox .bgTxt.stitle em,#NewsBox .speBox .index-title h2 {font-size: 9vw;}
	#aboutBox .info .stitle, #productBox .bgTxt.stitle h2,#NewsBox .speBox .index-title p {font-size: 5vw;}
}
@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%; }
#sPictureBox .list .txt h2{
    height: 50px;
    margin-bottom: 0px;
}
}
@media screen and (max-width: 480px) {
	#news .border .news-info {padding: 7px 0px;}
	#news .border .news-info h3 {height: 22px;}
	#news .border .news-info p{margin-right: 2px;width: 20%;}
}
@media screen and (max-width: 450px) {
	#productBox .wall { width: 100%; }
	#aboutBox .info {padding: 10vw 5vw 3vw 5vw;margin: 20px 0 0px;}
}