section#productBox {padding: 3vw 0 0;}
section {position: relative;}
section#clearfix{padding: 2vw 0;}
section >.bg {position: absolute;width: 100%;height: 100%;top: 0;left: 0;z-index: 1;opacity: .3;}
section >.info {position: relative;font-size: 0;z-index: 2;}
section .title {line-height: 120%;text-align: center;font-family: 'Cormorant Upright', serif;text-transform: uppercase;font-size: 45px;color: #505050;letter-spacing: 1.5px;}
section .more {margin-top: 40px;text-align: end;top: -100px;left: 90px;}
section .more a {position: relative;padding: 15px 100px;border: 1px #d7c7b3 solid;background-color: #d7c7b3;display: inline-block;color: #ffffff;}
section .more font {text-align: center;font-family: 'Montserrat', 'Noto Sans TC', sans-serif;font-weight: 500;text-transform: uppercase;letter-spacing: 3px;color: #806f5a;}
section .more a svg.arrow {position: absolute;width: 20px;right: 7px;top: calc((100% - 11.41px) / 2);}
section .more.white a , section .more.white font {padding: 20px 20px;letter-spacing: 1px;font-size: 12px;}
section .more.white{position: relative;width: 100%;top: 66px;left: 40px;margin-top: 0px;text-align: right;}
section .more.white span {right: 30px;position: absolute;width: 80px;height: 1px;background: #806f5a;display: block;right: 0;top: calc((100% - 1px) / 2);z-index: 3;-webkit-transition-duration: .2s;transition-duration: .2s;}
section .more.white:after { width: 252px; }
section .more.white span {position: absolute;width: 80px;height: 1px;background: #806f5a;display: block;right: -50px;top: calc((100% - 1px) / 2);z-index: 3;-webkit-transition-duration: .2s;transition-duration: .2s;}
section .more.white span:before {position: absolute;width: 0;height: 0;border-style: solid;border-width: 0 16px 7px 0;border-color: transparent transparent #806f5a transparent;right: -1px;bottom: 50%;content: "";}
section .more.white a:after {position: absolute;width: 0;height: 100%;background: #806f5a;display: block;top: 0;left: 0;content: "";z-index: 1;-webkit-transition-duration: .2s;transition-duration: .2s;}
#wrap {position: relative;overflow: hidden;}
#wrap .wrapBg { position: absolute; z-index: 1; }
#wrap .wrapBg.diamond {width: 320px;height: 2210px;-webkit-transform: rotate(95deg);-moz-transform: rotate(95deg);transform: rotate(95deg);top: -1180px;right: 40%;}
#wrap .wrapBg.diamond.bottombox { width: 1467px; height: 1467px; bottom: -430px; top: auto; }
/* bgTxt */
.bgTxt {position: absolute;z-index: 1;}
#aboutBox .bgTxt.stitle {top: 19vw;left: 10%;-webkit-writing-mode: initial;writing-mode: initial;font-size: 320px;z-index: 0;}
.bgTxt.stitle {-webkit-writing-mode: vertical-lr;writing-mode: vertical-lr;font-size: 120px;font-family: 'Cormorant Upright', serif;color: rgb(234 213 186 / 27%);line-height: 50%;text-transform: uppercase;font-weight: 100;}
.bgTxt.title { width: 100%; text-align: right; font-size: 140px; color: #edf1f3; }


/* clearfix */

#clearfix .numTitle.ani{text-align: center;margin-bottom: 55px;}
#clearfix .numTitle.ani h2{display: inline-block;position: relative;padding: 0 10px;font-weight: 600;font-family: 'Cormorant Upright', serif;font-size: 36px;color: #4a4a4a;text-transform: uppercase;letter-spacing: .15em;font-style: italic;}
#clearfix .numTitle.ani h2 b{font-family: "微軟正黑體", 'Chivo', Arial, 'Noto Sans TC', Heiti TC, "メイリオ", sans-serif;font-size: 40px;color: #131414;}
#clearfix .numTitle.ani h2::before,
#clearfix .numTitle.ani h2::after{content: '';width: 0;height: 1px;background: #aaa;position: absolute;top: 50%;}
#clearfix .numTitle.ani h2::before{right: 120%;}
#clearfix .numTitle.ani h2::after{left: 120%;}
#clearfix .numTitle.ani h2::before,
#clearfix .numTitle.ani h2::after{width: 1920px;background: #ebebeb;-webkit-transition: all 2s ease;-moz-transition: all 2s ease;-o-transition: all 2s ease;transition: all 2s ease;}
#clearfix .numTitle.ani .photo {overflow: hidden;background: no-repeat 50%;display: block;position: relative;margin: 10px;z-index: 2;text-align: center;}
#clearfix .bList {overflow: hidden;position: initial;max-width: 1040px;margin: 0 auto;}
#clearfix .bList ul li {float: left;width: 33%;}

/* newsBox */
#newsBox {margin: 0px auto 0;padding: 0;position: relative;z-index: 2;padding-top: 120px;max-width: 1400px;margin-left: auto;padding-left: 100px;}
#newsBox .more.white{position: absolute;right: 0px;top: 210px;z-index: 1;left: -50px;}
#newsBox .titleBox{position: absolute;right: 370px;top: 200px;z-index: 1;}
#newsBox .titleBox:before {content: '';position: absolute;top: 0px;left: -80px;display: block;width: 80px;height: 80px;background-repeat: no-repeat;background-position: center;background-image: url(/images/37/icon01.png);}
#newsBox .titleBox p{font-size: 16px;letter-spacing: 4px;}
#newsBox .titleBox h2{font-size: 36px;color: #4a4a4a;font-family: 'Cormorant Upright', serif;text-align: center;position: relative;font-weight: 600;letter-spacing: .12em;}
.right .bg::before {content: '';position: absolute;top: 0;right: 0;z-index: 1;width: 100%;max-width: 1700px;height: 100%;background: url(/images/37/bg_tile.jpg) repeat top left;}
#NewsBox{padding-bottom:80px}
#news li{overflow: hidden;display: inline-block;vertical-align: bottom;}
#news li:nth-child(1){margin:0 20px;width: 45%;}
#news li:nth-child(2),#news li:nth-child(3){margin: 0 10px;width: 23%;}
#news li .border{margin-bottom:50px}
#news li .news-info{margin: 20px 0;}
#news li .news-info .news-bottom{margin-top: 0px;}
#news li .news-info .news-bottom .date{font-size: 12px;color: #b58d5c;display: flex;align-items: center;padding-bottom: 20px;}
#news li .news-info:hover .news-bottom .date{color: #b58d5c;}
#news li .news-info .news-bottom .date strong{line-height: 40px;padding-right: 10px;font-size: 40px;font-family: 'Cormorant Upright', serif;font-weight: bold;}
#news li .news-info .news-bottom .date b{line-height: 18px;font-weight: bold;transform: translateY(7px);font-family: 'Cormorant Upright', serif;}
#news li .news-info .news-bottom h4{color: #353535;font-size:10pt;}
#news li .news-info h3{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;margin-bottom:20px}
#news li .news-info h3 a{color:#2b2b2b;font-size:14pt;font-weight: 400;}
#news li .news-info p{font-size:11pt;line-height:150%;color: #3e3e3e;height:34pt;overflow:hidden;margin-bottom:20px;}
#news li .readmore{text-align:right;position:relative}
#news li .readmore a{display:block;font-size:10pt;font-family:'Viga',sans-serif;padding-right:30px;color: #000;}
#news li .readmore a b{display:block;color: #947a59;-webkit-text-fill-color: #947a59;position:absolute;right: 5px;top:calc(50% - 10px);width:20px;height:20px;line-height:20px;border-radius:50%;text-align:center;font-size:8pt;}
#news li .photo a{display:block;background-repeat:no-repeat;background-position:50% 50%;background-size:cover;position:relative}
#news li .readmore a{padding: 0 10px 0 15px;color: #947a59;position: relative;z-index: 0;width: 100px;height: 45px;line-height: 45px;border: 1px solid #947a59;font-size: 12px;letter-spacing: .025em;text-transform: uppercase;overflow: hidden;}
#news li .readmore a span {position: relative;z-index: 5;color: #ffffff;}
#news li .readmore a::before {content: "";display: block;position: absolute;top: 0;left: 0;-webkit-transform: translate(0%, 100%);-ms-transform: translate(0%, 100%);transform: translate(0%, 100%);z-index: 1;width: 0;height: 0;border-style: solid;border-width: 50px 0 0 210px;border-color: transparent transparent transparent rgb(198 184 167 / 45%);-webkit-transition: 0.3s;-o-transition: 0.3s;transition: 0.3s;}
#news li .readmore a::after {content: "";display: block;position: absolute;top: 0;left: 0;-webkit-transform: translate(0%, -100%);-ms-transform: translate(0%, -100%);transform: translate(0%, -100%);z-index: 1;width: 0;height: 0;border-style: solid;border-width: 0 210px 50px 0;border-color: transparent rgb(198 184 167 / 45%) transparent transparent;-webkit-transition: 0.3s;-o-transition: 0.3s;transition: 0.3s;}
#news li .readmore a:hover::before,#news li .readmore a:hover::after {-webkit-transform: translate(0%, 0%);-ms-transform: translate(0%, 0%);transform: translate(0%, 0%);-webkit-transition: 0.3s;-o-transition: 0.3s;transition: 0.3s;}


/* productBox */
#productBox ul li { position: relative; }
#productBox ul li .img {width: 100%;background: no-repeat 50% 45% / cover;} 
#productBox ul li .img img{ max-width:inherit; }
#productBox ul li .txt_box {position: absolute;padding: 120px 40px 40px;width: 440px;height: calc(100% - 160px);background: #d7c7b3;top: 0;right: -150px;z-index: 10;opacity: 0;}
#productBox ul li.slick-active .txt_box {right: -70px;opacity: 1;transition-delay: 1s;}
#productBox ul li .txt_box:before { position: absolute; width: calc(100% - 22px); height: calc(100% - 22px); border: 1px #c5b49f solid; top: 10px; left: 10px; content: ""; }
#productBox ul li .txt_box span{margin-top: 10px;font-family: 'Cormorant Upright', serif;font-weight: 500;line-height: 25px;letter-spacing: .12em;font-size: 19px;color: #ab9376;}
#productBox ul li .txt_box h3 { margin-top: 9px; height: 33px; font-weight: 500; line-height: 30px; letter-spacing: .13em; font-family: 'Cormorant Upright', serif; font-size: 36px; color: #6a5943; -webkit-line-clamp: 1; }
#productBox ul li .txt_box h4 { padding: 5px 0 20px 0; letter-spacing: .18em; font-weight: 300; font-size: 24px; color: #6a5943; opacity: .8; }
#productBox ul li article{ height: 210px; font-weight: 300; letter-spacing: .04em; line-height: 190%; color: #493e30; }
#productBox ul li .txt_box .button { padding-top: 40px; }
#productBox ul li .txt_box .button a { overflow: hidden; position: relative; padding: 10px; min-width: 180px; background: rgb(73 62 48 / 66%); border: none; text-align: center; font-size: 14px; color: #fff; }
#productBox ul li .txt_box .button a span { position: relative; color: #fff; z-index: 5; }
#productBox ul li .txt_box .button a::before , #productBox ul li .txt_box .button a::after { position: absolute; width: 0; height: 0; border-style: solid; border-width: 50px 0 0 210px; border-color: transparent transparent transparent #b1a08b; display: block; top: 0; left: 0; -webkit-transform: translate(0%, 100%); -ms-transform: translate(0%, 100%); transform: translate(0%, 100%); -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; z-index: 1; content: ""; }
#productBox ul li .txt_box .button a::after { -webkit-transform: translate(0%, -100%); -ms-transform: translate(0%, -100%); transform: translate(0%, -100%); border-width: 0 210px 50px 0; border-color: transparent #b1a08b transparent transparent; }
#productBox ul li .txt_box .button a:hover::before , #productBox ul li .txt_box .button a:hover::after { -webkit-transform: translate(0%, 0%); -ms-transform: translate(0%, 0%); transform: translate(0%, 0%); }
#productBox .more {margin-top: 10px;}
#productBox .more a {position: relative;padding: 0px 60px;border: 1px rgb(255 255 255 / 0%) solid;background-color: rgb(255 255 255 / 0%);display: inline-block;color: #464646;}
#productBox .more font {text-align: center;color: #3e3e3e;}
#productBox .more a svg.arrow {position: absolute;width: 20px;right: 7px;top: calc((100% - 11.41px) / 2);}
#productBox .btns {position: absolute;right: 14.4%;bottom: 2%;z-index: 20;display: -webkit-box;display: -ms-flexbox;display: flex;}
#productBox .btns a.facarrow {display: inline-block;width: 50px;height: 45px;background: #796c5c;}
#productBox .btns a.facarrow i{padding: 14px 20px;color: #fff;}
#productBox .btns a.facarrow:hover {background: #aba094;}

/* aboutBox */
#aboutBox {background: none;z-index: 5;padding: 5vw 0 60px;padding: 60px 0 30px;background: url(/images/37/aboutBg.jpg) no-repeat center center;background-size: 100% auto;}
#aboutBox:before {position: absolute;width: 38.7%;height: 60%;background: rgb(245 245 245 / 70%);display: block;top: 0;right: 30.6%;z-index: 0;content: "";}
#aboutBox .bg {opacity: 1;z-index: 6;display: block;background-repeat: no-repeat;background-position: 50% 40%;background-size: cover;position: initial;max-width: 1320px;margin: 0 auto;}
#aboutBox .info {width: 100%;}
#aboutBox .bg:after {content: '';display: block;position: relative;width: 100%;height: 66px;background-image: url(/images/37/img-ab-line.png);background-repeat: no-repeat;background-position: 0% 100%;margin: 0px 0 15px;top: -20px;left: -70px;z-index: -1;}
.info .title {text-align: center;font-size: 16px;letter-spacing: 4px;}
#aboutBox .info .txtBox {position: relative;padding: 0vw 0vw 3.2vw 0vw;}
#aboutBox .info .txtBox:before {position: absolute;width: 100%;height: 100%;top: 0;left: 0;content: "";z-index: 1;}
#aboutBox .info .txtBox >div { position: relative; z-index: 2; }
.info .txtBox h3 {margin-bottom: 50px;font-size: 36px;color: #4a4a4a;font-family: 'Cormorant Upright', serif;text-align: center;position: relative;font-weight: 600;letter-spacing: .12em;}
.info .txtBox h3:after {content: '';position: absolute;left: 0;bottom: -22px;width: 100%;height: 16px;background: url(/images/37/icon_title.png) no-repeat center center;}
#aboutBox .info .txtBox article {line-height: 200%;font-size: 15.8px;font-weight: 300;color: #1d1d1d;margin-bottom: 30px;letter-spacing: 1.1px;text-align: center;}
#aboutBox .info .txtBox p{font-size: 17.8px;font-weight: 300;color: #c1a481;letter-spacing: 6.1px;text-align: center;}
#aboutBox .info .txtBox #SeoStarRating{text-align: center;}
#aboutBox .info .txtBox .more {margin: 40px 20px 30px;text-align: right;position: relative;max-width: 1380px;margin: 0 auto;}
#aboutBox #SeoStarRating font { vertical-align: middle; }
#aboutBox #SeoStarRating font:last-child {color: #525252;}
#aboutBox #SeoStarRating .fa { vertical-align: initial; }

/* secabout */
#secabout >div {position: relative;}
#secabout #customBox ul li article { margin: 3vw 0 5vw; text-align: center; line-height: 190%; color: #1f1f1f; }
#secabout #subBox .left {transform: translateX(-560px);width: calc(100% - 180px);height: 100%;top: 0;left: 0;z-index: 3;}
#secabout #subBox .right{position: relative;padding-bottom: 140px;padding-top: 40px;}
#secabout #subBox .right .bgTxt {position: absolute;z-index: 1;}
#secabout #subBox .right .bgTxt.stitle {-webkit-writing-mode: vertical-lr;writing-mode: tb-rl;font-size: 120px;font-family: 'Cormorant Upright', serif;color: rgb(234 213 186 / 72%);line-height: 50%;text-transform: uppercase;font-weight: 100;top: -23vw;z-index: 1;right: 380px;}
#secabout #subBox .right .bgTxt.title { width: 100%; text-align: left; font-size: 140px; color: #edf1f3; }
#secabout #subBox .bList .mofd{position: relative;margin: 10px;}
#secabout #subBox .bList .photo{background-size: cover;background-repeat: no-repeat;background-position: center;}
#secabout #subBox .bList .photo img{height: 600px;}
#secabout #subBox .bList .mofd h3{transition: ease .3s;position: absolute;bottom: 0px;left: 0px;width: 100%;height: 60px;text-align: center;line-height: 60px;box-sizing: border-box;border-right: 1px solid #888;}
#secabout #subBox .bList .mofd h3 a{color: #fff;display: block;width: 100%;}
#secabout #subBox .bList .mofd:hover h3{}

@media screen and (max-width:1680px) {
#productBox .btns {right: 6.5%;}
}
@media screen and (max-width:1440px) {
	#productBox >.info {margin: 0;}
	#productBox ul li .info { padding: 25px 15px 40px; width: calc(85% - 30px); }
	#productBox ul li.slick-active .txt_box{ right: 80px;}
	#productBox .btns{ right: 50px;}
	#aboutBox .bg {width: 82%;right: 4%;}
	#aboutBox:before{right: 350px;width: 740px;}
	#aboutBox .bgTxt.stitle{font-size: 230px;top: 27vw;}
	#aboutBox .info .title1, #aboutBox .info .title{margin: 20px 5vw 0vw;}
	#aboutBox .info .txtBox {padding: 0vw 0vw 4vw;}
	#secabout #subBox .left {transform: translateX(-400px);width: calc(100% - 40px);height: 100%;top: 0;left: 0;z-index: 3;}
	#newsBox {padding-left: 0px;padding-top: 90px;}
	#newsBox .titleBox{right: 360px;top: 120px;}
	#newsBox .more.white{top: 210px;left: -120px;}
	#newsBox .more.white a{padding: 12px 6px;}
	#newsBox .info .tit.row{padding: 20px 0px 20px;}
	#newsBox .info .row {width: calc(100% - 30px);}
	#secabout #subBox .bList .photo img{    height: 550px;}
	.bgTxt.stitle{font-size: 70px;}
	#secabout #subBox .right .bgTxt.stitle{top: -25vw;z-index: 3;right: -100px;}
}
@media screen and (min-width:1281px) {
	section .more a:hover { background: #1f1f1f; }
	section .more a:hover font { color: #fff; }
	section .more a:hover svg { fill: #fff; }
	section .more.white a:hover { background: #fff; }
	section .more.white a:hover font { color: #1f1f1f; }
	section .more.white a:hover svg { fill: #1f1f1f; }
	#productBox ul li:hover .img:before { opacity: 1; }
}
@media screen and (max-width:1280px) {
	#productBox ul li .txt_box {padding: 60px 40px 100px;}
	section .more.white span{width: 60px;}
	#secabout #subBox .left {transform: translateX(-330px);width: calc(100% - 0px);}
	#secabout #subBox .right{padding-bottom: 20px;padding-top: 0px;}
	#secabout #subBox .bList .photo img{height: 470px;}
#newsBox .titleBox {right: 300px;top: 100px;}
}
@media screen and (max-width:1140px) {
#newsBox .titleBox {right: 220px;top: 100px;}
	#newsBox .more.white {top: 188px;left: -80px;}
}
@media screen and (max-width:1024px) {
	section .more a { padding: 10px 80px 10px 20px; }
	#secabout #subBox .right {width: 100%;right: 0px;top: 0;position: initial;}
	#aboutBox .bg {width: 78%;height: calc(100% - (12vw + 54px));top: calc(7vw + 54px);z-index: 1;position: initial;display: block;}
	#aboutBox .info .txtBox {padding: 0vw 10vw 7vw 10vw;background: none;}
	#aboutBox .info:after,#aboutBox:before{display: none;}
	#secabout:before { width: 90vw; }
	#secabout #customBox { width: 70vw; }
	#secabout #subBox .left {transform: translateX(0px);width: calc(100% - 0px);}
	#secabout #subBox .bList .photo img{height: 360px;}
	#aboutBox .bgTxt.stitle {font-size: 170px;top: 40vw;}
#clearfix .bList ul li {float:none ;width: 100%;}
#clearfix .bList ul li .photo{ text-align: center;}
#newsBox .titleBox {right: 170px;top: 80px;}
	#newsBox .more.white {top: 170px;left: -80px;}
}
@media screen and (max-width:980px) {
	#secabout:before { width: 0; }
	#secabout #customBox { width: 90vw; }
	#newsBox .titleBox {right: -90px;top: -90px;position: relative;}
	#newsBox .titleBox h2{text-align: inherit;}
	#newsBox .more.white {top: 50px;left: -80px;position: relative;text-align: right;}
	#news li:nth-child(1){margin:0 20px;width: 95%;}
	#news li:nth-child(2),#news li:nth-child(3){margin: 0 10px;width: 47%;}
}
@media screen and (max-width:768px) {
	#productBox ul li .img img {height: 85vw;}
	#productBox ul li .txt_box , #productBox ul li.slick-active .txt_box { position: relative; 
    margin-top: -190px; width: calc(90% - 80px); height: auto; right: 0; }
	#secabout #subBox .bList .photo img{height: 240px;}
	#aboutBox .bgTxt.stitle{font-size: 130px;top: 50vw;}
	#aboutBox .bg{width: 100%;}
	#aboutBox .bg:after{display: none;}
	section .more.white {top: 46px;left: 0px;text-align: center;}
	#clearfix .numTitle.ani {margin-bottom: 5px;margin-top: 30px;}
	#news li:nth-child(1){margin:0 20px;width: 90%;}
	#news li:nth-child(2),#news li:nth-child(3){margin: 0 20px;width: 90%;}
}
@media screen and (max-width:640px) {
	#secabout #subBox .bList .photo img{height: 380px;}
	.bgTxt.stitle{display: none;}
	header #cis{width: 150px;padding: 6px 0;}
	#aboutBox .info .txtBox h3{font-size: 28px;letter-spacing: .02em;}
	#clearfix .numTitle.ani h2,.info .txtBox h3{font-size: 28px;}
	#news li{width:calc(50% - 10px);margin:0 5px}
	#productBox ul li .info { margin: -55px auto 0; padding: 25px 30px 40px; width: calc(85% - 60px); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); background: rgb(255 255 255 / .4); }
	#productBox .btns {top: auto;bottom: 34px;right: 37px;}
}
@media screen and (max-width:480px) {
	.bgTxt.stitle{display: none;}
	#news li .news-info{margin:0}
	#news li .news-info h3 a{font-size:13pt}
	#news li .news-info h3,#news li .news-info p{margin-bottom:10px}
	#productBox ul li .txt_box, #productBox ul li.slick-active .txt_box{margin-top: -40px;width: calc(90% - 42px);padding: 30px 40px 34px;}
	#productBox ul li .txt_box {opacity: 1;}
	#productBox ul li .txt_box span{margin-top: 0px;font-size: 14px;}
	#productBox ul li .txt_box h3 {margin-top: 0px;height: 30px;font-size: 26px;}
	#productBox ul li .txt_box h4 {padding: 2px 0 10px 0;font-size: 20px;}
	#productBox ul li article{height: 220px;letter-spacing: .04em;line-height: 160%;font-size: 15px;}
	#productBox ul li .txt_box .button{padding-top: 20px;}
}