section {position: relative;padding: 5vw 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 , #secabout #youtubeBox .right .tit {line-height: 120%;text-transform: uppercase;font-size: 70px;color: #d3cdc8;font-family: "Cormorant Garamond", serif;font-weight: 300;}
section .title b{display:block;font-size: 20px;letter-spacing: 5px;color: #222;padding-left: 40px;}
section .more {margin-top: 40px;}
section .more a {position: relative;padding: 20px 130px 20px 30px;display: inline-flex;background: #d3cdc8;align-items: center;}
section .more a span{position:absolute;width: 30px;height: 1px;background: #fff;right: 0;}
section .more a:hover span{width:45px;}
section .more font {font-weight: 400;text-transform: uppercase;color: #fff;font-size: 15px;}
section .more a svg.arrow { position: absolute; width: 20px; right: 20px; top: calc((100% - 11.41px) / 2); }
section .more.white a , section .more.white font { border-color: #fff; color: #fff; }

/* wrap */
#wrap{background-image: url(/images/37/img-bg.jpg);background-repeat: no-repeat;background-position: 50% 50%;background-size: cover;}

/* newsBox */
#newsBox { margin: -85px auto 0; padding: 0; width: 1280px; z-index: 110; }
#newsBox .info { padding: 30px 60px; }
#newsBox .info .row { width: calc(100% - 150px); display: inline-block; vertical-align: text-bottom; }
#newsBox .info .tit.row { margin-right: 50px; width: 100px; }
#newsBox .info .tit a { display: inline-block; font-family: 'Montserrat', 'Noto Sans TC', sans-serif; text-transform: uppercase; font-size: 16px; letter-spacing: 3px; color: #1f1f1f; }
#newsBox .info .btn { position: absolute; width: 120px; text-align: center; top: calc((100% - 24px) / 2); right: 60px; }
#newsBox .info .btn a { line-height: 23px; }
#newsBox .info .btn a:first-child { -webkit-transform: scaleX(-1); transform: scaleX(-1); }
#newsBox .info .btn font { margin: 0 15px; font-size: 0; display: inline-block; }
#newsBox .info .btn font span { margin-left: 10px; display: inline-block; font-weight: 400; font-family: 'Montserrat', 'Noto Sans TC', sans-serif; font-size: 13px; }
#newsBox .info .btn font span:first-child { padding-left: 18.03px; }
#newsBox .info ul li { position: relative; padding: 0 120px 0 0; font-size: 0; }
#newsBox .info ul li a { position: absolute; width: calc(100% - 120px); height: 100%; top: 0; left: 0; }
#newsBox .info ul li p.time { margin-right: 20px; width: 85px; display: inline-block; line-height: 27px; font-weight: 300; font-family: 'Montserrat', sans-serif; }
#newsBox .info ul li p.txt { width: calc(100% - 155px); display: -webkit-inline-box; }
#newsBox .info ul li .noBox { position: absolute; font-weight: 400; font-family: 'Montserrat', 'Noto Sans TC', sans-serif; font-size: 13px; top: calc(100% - 22px); right: 67px; }

/* productBox */
#productBox .bg { opacity: .2; }
#productBox >.info { margin: 0 100px; }
#productBox ul { margin-top: 5vw; }
#productBox ul li { position: relative; }
#productBox ul li a { position: absolute; width: 100%; height: 100%; display: block; top: 0; left: 0; z-index: 3; }
#productBox ul li >div { overflow: hidden; position: relative; margin: 0 20px; }
#productBox ul li .img:before { position: absolute; width: 100%; height: 100%; background: rgba(31, 31, 31, .6); display: block; top: 0; left: 0; opacity: 0; z-index: 2; content: ""; }
#productBox ul li .img img { position: relative; width: 100%; height: 360px; object-fit: cover; z-index: 1; }
#productBox ul li .info { overflow: visible; position: relative; margin-top: -55px; padding: 45px 40px 60px; width: calc(85% - 120px); background: #fff; z-index: 2; }
#productBox ul li .info .price { position: absolute; padding: 5px 15px; background: rgb(0 0 0 / .6); top: -39px; left: 0; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
#productBox ul li .info .price font { margin: 0 10px; display: inline-block; font-weight: 300; color: #fff; }
#productBox ul li .info .price font.old { color: rgb(255 255 255 / .4); }
#productBox ul li .info h3 { margin-bottom: 10px; height: 37px; font-weight: 400; font-size: 22px; color: #1f1f1f; }
#productBox ul li .info article { height: 43px; font-weight: 400; font-size: 14px; color: #2c2c2c; -webkit-line-clamp: 2; }

/* aboutBox */
#aboutBox {background: none;z-index: 5;padding-top: 0;position: relative;}
#aboutBox .bg { width: 61%; height: 70%; background-attachment: fixed; top: 10%; right: 0; left: auto; opacity: 1; z-index: 3; }
#aboutBox .info {width: 1225px;margin: 0 0 0 auto;background: #fff;padding: 110px 360px 110px 80px;display: flex;flex-wrap: wrap;justify-content: space-between;align-items: center;}
#aboutBox .info:before{content:'';position: absolute;bottom: 80px;left: 0;width: 220px;height: 1px;background: #ececec;}
#aboutBox .info .title {text-align: left;}
#aboutBox .info .txtBox {position: relative;}
#aboutBox .info .txtBox h4{font-size:18px;margin-bottom: 40px;letter-spacing: 1px;font-weight: 500;}
#aboutBox .info .txtBox p{font-size:15px;line-height: 200%;}
#aboutBox .info .txtBox >div { position: relative; z-index: 2; }
#aboutBox .info .txtBox h3 { margin-bottom: 20px; font-size: 36px; color: #fff; }
#aboutBox .info .txtBox article { line-height: 230%; font-size: 17px; color: #fff; }
#aboutBox .info .txtBox .more { margin-top: 80px; text-align: left; }
#aboutBox #SeoStarRating font { vertical-align: middle; }
#aboutBox #SeoStarRating font:last-child { color: #fff; }
#aboutBox #SeoStarRating .fa { vertical-align: initial; }

/* secabout */
#secabout {padding: 0 0 5vw;z-index: 1;}
#secabout:before{content:'';position: absolute;top: 49%;left: 0;width: 63%;height: 1px;background: #b9b9b9;opacity: .3;}
#secabout:after{content:'';position: absolute;top: 49%;right: 0;width: 29%;height: 1px;background: #b9b9b9;opacity: .3;}
#secabout >div {position: relative;width: 1200px;z-index: 2;display: flex;flex-wrap: wrap;justify-content: space-between;align-items: center;}
#secabout .tittle{width: 30%;order: 1;margin-top: -10px;}
#secabout .tittle h2{color: #daa520;text-align: left;}
#secabout .tittle p{margin-top:20px;margin-left: 25px;font-size: 15px;}
#secabout #customBox {width: 65%;}
#secabout #customBox ul li {margin: 0 20px;}
#secabout #customBox ul li img{-webkit-filter:grayscale(1);}
#secabout #customBox ul li:hover img{-webkit-filter:grayscale(0);}
#secabout .slick-prev{width:50px;height: 50px;left: -110px;top: calc(50% + 45px);}
#secabout .slick-prev:before{content:url(/images/37/arrow-left.png);opacity: 1;width: 50px;height: 50px;display: block;}
#secabout .slick-next{width:50px;height: 50px;right: -70%;top: calc(50% + 45px);}
#secabout .slick-next:before{content:url(/images/37/arrow-right.png);opacity: 1;width: 50px;height: 50px;display: block}

/* bookBox */
#bookBox{background:#fff;padding: 0;}
#bookBox .list .slick-list li{display:flex;flex-wrap: wrap;justify-content: space-between;align-items: flex-end;}
#bookBox .topBox {position: absolute;width: 50%;left: 300px;top: 110px;}
#bookBox .topBox .title { position: absolute; }
#bookBox .topBox .more { text-align: right; }
#bookBox .list ul li .img {width: 50%;overflow: hidden;position: relative;z-index: 1;order: 2;}
#bookBox .list ul li .img img {position: relative;width: 100%;height: 35vw;object-fit: cover;z-index: 1;}
#bookBox .list ul li .info {position: relative;width: calc(45% - 300px);z-index: 2;padding-bottom: 85px;padding-left: 300px;}
#bookBox .list ul li .info h3 a{height: auto;font-weight: 500;font-size: 22px;color: #2d2c2c;margin-bottom: 15px;}
#bookBox .list ul li .info p{color:#605f5f;height: auto;letter-spacing: 2px;}
#bookBox .list ul li .info .more { text-align: left; }
#bookBox .slick-dots{bottom:0;width: 150px;height: 100%;border-right: 1px solid #d8d8d8;background: #fff;display: flex !important;align-items: center;justify-content: center;flex-direction: column;}
#bookBox .slick-dots li{width:15px;height: 2px;margin: 10px 0;}
#bookBox .slick-dots li button{width:15px;height: 2px;padding: 0;background: #666;}
#bookBox .slick-dots li button:before{display:none;}
#bookBox .slick-dots li.slick-active button{width:30px;}

/* aboutArea */  
#aboutArea{position:relative;padding-top: 30px;width:100%;max-width: 1720px;margin:0 auto 0 0;display:flex;padding-bottom: 0;justify-content: space-between;flex-wrap: wrap;}
#aboutArea:before{position:absolute;width:90%;height:70%;background:#f5f5f5;display:block;bottom:-40px;left:190px;z-index:-1;content:""}
#aboutArea .deck01{top: 10px;left: 80%;transform: translateX(-20%);position:absolute;width: 100%;}
#aboutArea .deck01 .serviceTitle{font-size: 230px;line-height:90%;color: #b9b9b9;letter-spacing: 20.5px;text-align:center;text-transform:uppercase;opacity: .1;font-family: "Cormorant Garamond", serif;}
#aboutArea .wrap{display:flex}
#aboutArea .leftBox{width: 730px;padding-left:0px;}
#aboutArea .rightBox{position:relative;width: calc(95% - 700px);margin-top:60px;}
#aboutArea .rightBox *{height:100%;}
#aboutArea .leftBox .textBox{position:relative;padding-right: 0;}
.leftBox .textBox .subtitle{color:#bdad84;position:absolute;left:360px;top:8px;font-family:'Cormorant',serif;font-weight:500;line-height:140%;letter-spacing:0.5px;text-transform:uppercase;display:inline-block}
.leftBox .textBox .title{margin-bottom:40px;text-align: left;font-family: 'Noto Sans TC', 'Noto Sans SC', sans-serif;font-size: 0;margin-top: 80px;}
.leftBox .textBox .title font{font-weight:500;color: #131313;border-bottom: 1px solid #131313;font-size: 24px;line-height:130%;display:inline-block;letter-spacing:2.5px;padding-bottom: 5px;}
.leftBox .textBox .text{font-size:16px;letter-spacing:0.05em;line-height:180%;font-weight:400;color:#97948d;margin-bottom:10px}
.leftBox .textBox .text b{padding-bottom:40px;display:inline-block;font-size:18px;line-height:180%;font-weight:400;color:#8a877f;font-family:'Noto Serif TC',serif}
.leftBox .textBox .text .compareArea{display:flex}
.leftBox .textBox .text .compareArea .row{width:calc((100% / 2) - 20px);margin:0 10px}
.leftBox .textBox .text .compareArea .titleBox{position:relative;padding-bottom:30px;padding-top:14px;display:flex;align-items:flex-start;justify-content: space-around;}
.leftBox .textBox .text .compareArea .titleBox h2{font-size: 22px;color: #b4ada8;margin:0;letter-spacing:1px;position:absolute;left:0;top:10px;line-height:160%;font-family: "Cormorant Garamond", serif;}
.leftBox .textBox .text .compareArea .titleBox h2::after{content:"";position:absolute;width:1px;height:100%;background: #b4ada8;left:13px;top:37px;opacity: .7;}
.leftBox .textBox .text .compareArea h5{padding-left: 40px;width: 120px;}
.leftBox .textBox .text .compareArea h5 span{font-size: 18px;color: #2f2f2d;letter-spacing:1px;font-weight: 500;}
.leftBox .textBox .text .compareArea p.item_p{margin-left: 10px;color: #605e5e;font-size:15px;width: calc(100% - 180px);}
.leftBox .textBox .text .compareArea p.item_p span{color: #605e5e;text-align: left;letter-spacing: 1px;line-height: 140%;font-size: 15px;}

@media screen and (max-width:1680px) {
	#aboutArea .leftBox{padding-bottom: 65px;}
	#aboutArea{width: 95%;max-width: 100%;}
	#aboutBox .info{width: 1129px;padding: 110px 200px 110px 80px;}
	#bookBox .topBox{left:250px;}
	#bookBox .list ul li .info{padding-left:250px;}
}
@media screen and (max-width:1440px) {
	#bookBox .slick-dots{width: 80px;padding-right: 20px;}
	#newsBox { width: calc(100% - 160px); }
	#productBox >.info { margin: 0 5%; }
	#productBox ul li >div { margin: 0 10px; }
	#productBox ul li .info { padding: 25px 15px 40px; width: calc(85% - 30px); }
	#aboutBox .bg { width: 50%; }
	#aboutBox .info { width: 55%; }
	#secabout:before{top: 52%;width: 68%;}
	#secabout:after{top: 52%;width: 22%;}
	#bookBox .topBox{left:150px;}
	#bookBox .list ul li .info{padding-left:150px;width: calc(45% - 200px);}
	#aboutBox .info {width: calc(85% - 147px);padding: 110px 130px 110px 80px;}
	#secabout .slick-prev{left: -80px;top: calc(50% + 42px);}
	#secabout .slick-next{right: -63%;top: calc(50% + 42px);}
	#bookBox .list ul li .img img{height:40vw}
}
@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 , #bookBox .list ul li:hover .img:before { opacity: 1; }
}
@media screen and (max-width:1366px) {
	#secabout:before{width: 56%;}
	#secabout .slick-next{right: -115%;top: calc(50% + 42px);}
	#secabout #customBox{width:50%;}
	#secabout .tittle{width:40%;}
	#secabout >div{width: 75%;}
	#aboutBox .info {width: calc(85% - 158px);}
	#aboutBox .info .txtBox{width: calc(100% - 350px);}
}
@media screen and (max-width:1280px) {
	#bookBox .list ul li .img img{height: 50vw;}
	#bookBox .topBox{top: 40px;width: 30%;}
	#aboutBox .info {width: calc(85% - 171px);}
	#secabout #youtubeBox { width: 90vw; }
}
@media screen and (max-width:1024px) {
	#bookBox .list ul li .img img{height: 60vw;}
	#bookBox .topBox{left: 5%;}
	#bookBox .list ul li .info{padding-left:5%;width: 45%;}
	#bookBox .slick-dots{display: none !important;}
	#secabout >div{width: 90%;}
	#newsBox { margin-top: -86px; }
	#newsBox .info { padding: 15px 30px; }
	#newsBox .info .row { width: 100%; display: block; }
	#newsBox .info ul li { padding: 0; }
	#aboutBox .info {width: 90%;padding: 60px 5%;}
	#aboutBox .info:before{bottom: 45px;width: 190px;}
	#newsBox .info ul li .noBox , #newsBox .info .btn , #secabout #youtubeBox .right { display: none; }
	#aboutBox .bg { width: 100%; height: calc(100% - (12vw + 54px)); top: calc(7vw + 54px); z-index: 1; }
	#secabout:before {width: 70px; #secabout:before { width: 90vw; };#secabout:before { width: 90vw; };top: 175px;}
	#secabout:after{top:175px;width: 78%;}
	#secabout #customBox {width: 100%;}
	#secabout .tittle{order:0;margin-bottom: 30px;}
	#secabout #youtubeBox .left { position: relative; width: 100%; height: 400px; }
	#aboutArea{flex-wrap: wrap;}
	#aboutArea .rightBox{width:100%;}
	#aboutArea .leftBox{width: 95%;margin: 0 0 0 auto;}
}
@media screen and (max-width:980px) {
	section{padding: 70px 0;}
	#secabout .tittle{width:100%;}
	#secabout #customBox { width: 90vw; }
	#secabout #youtubeBox .left { height: 45vw; }
	#bookBox{padding: 60px 0;}
	#bookBox .list{width: 90%;margin: 30px auto 0;}
	#bookBox .list ul li .img{order:0;width: 100%;}
	#bookBox .list ul li .info{width: 100%;padding: 0;margin-top: 30px;}
	#bookBox .list ul li .img img { height: 55vw; }
	#bookBox .topBox, #bookBox .topBox .title {position: relative;width: 90%;top: 0;}
	#bookBox .topBox .more { position: absolute; width: 100%; text-align: center; bottom: 0; left: 0; }
}
@media screen and (max-width:768px) {
	#secabout{padding-bottom: 60px;}
}
@media screen and (max-width:640px) {
	#aboutArea .rightBox *{height:auto;}
	#bookBox .topBox .title b{position:absolute;bottom: 20px;right: 20px;}
	#secabout #customBox ul li{margin: 0 7px;}
	#secabout:before{width: 40px;}
	#secabout:after{width: 53%;}
	#aboutBox .info:before{top: 280px;bottom: unset;}
	#aboutBox .info .title, #aboutBox .info .txtBox{width:100%;opacity: 1;}
	#aboutBox .info .txtBox{margin-top:50px;}
	#aboutBox .info{display:block;}
	#newsBox { margin-top: 0; width: 100%; }
	#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); }
	#bookBox .list ul li .info{margin-top:15px;}
	#bookBox .list ul li .info p{-webkit-line-clamp: 2;}
	#aboutArea .deck01 .serviceTitle{font-size: 100px;letter-spacing: 0.5px;}
	.leftBox .textBox .title{margin-top: 25px;}
	.leftBox .textBox .text .compareArea{display:block;}
	.leftBox .textBox .text .compareArea .row{width:100%;margin: 0;}
}