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: 190%;text-transform: uppercase;font-size: 26px;color: #252525;font-family: "Noto Serif TC", serif;font-weight: 400;letter-spacing: 1.5px;}
section em{font-family: "Cormorant", serif;font-size: 70px;display: block;line-height: 1.2;font-style: unset;}
section .more {margin-top: 40px;}
section .more a {position: relative;padding: 15px;display: inline-flex;color: #1f1f1f;align-items: center;}
section .more:hover a font{color: #c3a768;}
section .more font {font-weight: 500;text-transform: uppercase;color: #1f1f1f;font-size: 12px;font-family: "Arimo", serif;position: relative;}
section .more font:after{content:'';position: absolute;width: 100%;height: 1px;background: #555;bottom: -10px;left: 0;}
section .more:hover font:after{width:0}
section .more a svg {width: 15px;margin-left: 25px;fill: #c2a563;}

/* newsBox */
#newsBox {padding: 0;width: 1280px;z-index: 110;}
#newsBox .info { padding: 30px 60px; display: flex; align-items: center; gap: 5px 3%; }
#newsBox .info .tit { width: 5em; }
#newsBox .info .tit a { color: #000; }
#newsBox .info .news_list { width: 1%; flex: 1 1 auto; }
#newsBox .info .news_list .slick-list { overflow: visible; }
#newsBox .info .news_list li { position: relative; }
#newsBox .info .news_list .news_txt { position: relative; display: flex; align-items: center; gap: .5em 1em; }
#newsBox .info .news_list .news_txt .time { min-width: 6em; }
#newsBox .info .news_list .news_txt .txt { width: 1%; flex: 1 1 auto; }
#newsBox .info .news_list .news_txt a { position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
#newsBox .info .news_list .noBox { position: absolute; width: 2em; text-align: center; top: 50%; right: -6em; -webkit-transform: translateY(-47%); transform: translateY(-47%); }
#newsBox .info .news_btn { position: relative; width: 9em; display: flex; justify-content: space-between; align-items: center; z-index: 5; }
#newsBox .info .news_btn font { width: 5.5em; display: flex; justify-content: flex-end; }
#newsBox .info .news_btn font span { min-width: 2em; text-align: center; }
#newsBox .info .news_btn font span:nth-child(2) { min-width: 1.5em; }
#newsBox .info .news_btn #prevBtn { -webkit-transform: scaleX(-1); transform: scaleX(-1); }

/* 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;display: grid;justify-content: end;grid-template-columns: 26% 45%;gap: 100px;padding-top: 9vw;}
#aboutBox:before{content:'';position: absolute;width: 100%;height: 1px;background: #e6e7e8;bottom: 160px;}
#aboutBox:after{content:'';display:block;width:100%;height:100%;position:absolute;top:0;left:0;background-image: url(/images/37/index-bg-bling.png);background-repeat:no-repeat;background-position:0 0;animation-name:indexbling;animation-iteration-count:infinite;animation-duration: 5s;opacity:-1;z-index: -1;}
@keyframes indexbling{0%{background-position:-100% -100%;opacity:0.3}50%{opacity:1}100%{background-position: 200% 200%;opacity:0.3}}
#aboutBox .bg {width: 350px;height: 650px;bottom: 0;left: 0;left: auto;opacity: 1;top: unset;z-index: 3;background-size: contain;background-repeat: no-repeat;}
#aboutBox .info{margin-top: 5vw;}
#aboutBox .info .more{position:absolute;bottom: -30px;}
#aboutBox .info .title {text-align: left;margin-bottom: 70px;word-spacing: 100vw;}
#aboutBox .info article p{font-weight: 300;line-height: 2;}
#aboutBox .info .txtBox { position: relative; padding: 7vw 10vw 7vw 5vw; background: url(/userfiles/images/20200525120633201.jpg) no-repeat 50% / cover; }
#aboutBox .info .txtBox:before { position: absolute; width: 100%; height: 100%; background: rgb(68 68 68 / .7); top: 0; left: 0; content: ""; z-index: 1; }
#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 */
#customBox{margin-top:0;position: relative;order: 2;}
#customBox:before{content:url(/images/37/alinn.png);position: absolute;top: 90px;}
#customBox .photo{padding: 0 22%;}
#customBox .photo img{aspect-ratio: 2.3/3;object-fit: cover;border-radius: 200px 200px 0 0;}
#customBox .slick-prev{left: 95px;}
#customBox .slick-prev:before{content:url(/images/37/left-arrow.png)}
#customBox .slick-next{right: 95px;}
#customBox .slick-next:before{content:url(/images/37/right-arrow.png)}

/* processBox */
#processBox{overflow:hidden}
#processBox .videobox{position:absolute;width: 100%;height: 100%;opacity: .6;}
#processBox .videobox:before{content:'';position: absolute;width: 100%;height: 50%;background: linear-gradient(180deg, rgb(247 244 241), rgb(255 255 255 / 0%));top: 0;left: 0;}
#processBox .videobox:after{content:'';position: absolute;width: 100%;height: 50%;background: linear-gradient(0deg, rgb(247 244 241), rgb(255 255 255 / 0%));bottom: 0;left: 0;}
#processBox .content{display:grid;grid-template-columns: 50% 50%;align-items: center;}
#processBox .content .intfoo{display:flex;flex-direction: column;align-items: center;}
#processBox .content .intfoo em{margin-bottom:5vw}
#processBox .content img{aspect-ratio: 4/3;object-fit: cover;}
#processBox .content h3{font-size:20px;font-weight: 400;font-family: "Work Sans", 'Noto Sans TC', serif;}
#processBox .content p{padding: 20px 25%;font-weight: 300;text-align: center;}
#processBox .content .more a{border: 1px solid #c7c7c7;padding: 25px 50px;}
#processBox .content .more font:after{display:none;}
#processBox .slick-dots{bottom: 0;width: auto;display: flex !important;flex-direction: column;align-items: center;left: 3%;justify-content: center;height: 100%;gap: 5px;}
#processBox .slick-dots li{margin: 5px 0;}
#processBox .slick-dots li button{border: 1px solid #d4d4d4;border-radius: 50px;}
#processBox .slick-dots li.slick-active button{border: 1px solid #d4d4d4;}
#processBox .slick-dots li.slick-active button:before{opacity:1;color: #c2a563;}
#processBox .slick-dots li button:before{opacity:1;color: rgb(194 165 99 / 0%);}

/* conBox */
#conBox{background-image: url(/images/37/conBg.jpg);background-repeat: no-repeat;background-position: 50% 50%;background-size: cover;padding: 22vw 0 7vw;}
#conBox h2{text-align:end;color: #fff;width: 57%;margin: 0 auto;}

/* bookBox */
#bookBox .topBox {position: relative;margin: 0 auto 2.5vw;}
#bookBox .topBox{width: 70vw;display: flex;align-items: flex-end;justify-content: space-between;}
#bookBox .topBox .title { position: absolute; }
#bookBox .topBox .more { text-align: right; }
#bookBox .list {width: 71.5vw;margin: 0 auto;}
#bookBox .list ul li{position:relative;margin: 0 15px;}
#bookBox .list ul li .img {overflow: hidden;position: relative;z-index: 1;}
#bookBox .list ul li:hover .img a:after{content:'';position: absolute;width: 100%;height: 100%;background: linear-gradient(180deg,rgb(0 0 0 / 0%), rgb(0 0 0 / 50%));bottom: 0;left: 0;z-index: 1;}
#bookBox .list ul li .img img {position: relative;width: 100%;aspect-ratio: 2/3;object-fit: cover;z-index: 1;}
#bookBox .list ul li .info {position: absolute;z-index: 2;opacity: 0;bottom: -40px;left: 30px;}
#bookBox .list ul li:hover .info{bottom: 30px;opacity:1}
#bookBox .list ul li .info h3 {height: auto;font-weight: 400;font-size: 17px;color: #fff;}
#bookBox .list ul li .info .more { text-align: left; }

@media screen and (max-width:1680px) {
    #customBox .photo{padding:0 10%;}
    #aboutBox .info{margin:0}
    #aboutBox .info .title{margin-bottom: 30px;}
}
@media screen and (max-width:1440px) {
    #aboutBox .bg{height: 520px;}
    #aboutBox{grid-template-columns: 35% 35%;}
    #customBox .slick-prev{left: 15px;}
    #customBox .slick-next{right: 15px;}
}
@media screen and (min-width:1281px) {
    #conBox{background-attachment: fixed;}
}
@media screen and (max-width:1280px) {
    #bookBox .list{width: 85vw;}
    #processBox .content img{aspect-ratio: 3 / 3;}
}
@media screen and (max-width:1024px) {
    #aboutBox .info{width: 80vw;margin: 40px auto 0;}
    #bookBox .list{width: 95vw;}
    #bookBox .topBox{width:90vw}
    #aboutBox .info .more{position:relative;bottom: unset;}
    #aboutBox:before{display:none;}
    #aboutBox{grid-template-columns: 40% 45%;gap: 80px;}
	#aboutBox .bg {display: none;}
	#aboutBox .info .txtBox { padding: 7vw 10vw; background: none; }
	#secabout:before { width: 90vw; }
	#secabout #customBox { width: 70vw; }
	#secabout #youtubeBox .left { position: relative; width: 100%; height: 400px; }
}
@media screen and (max-width:980px) {
    #conBox h2{width: 71%;}
    section{padding:12vw 0}
    #processBox .content img{aspect-ratio: 4 / 3;}
    #processBox .content{grid-template-columns:1fr;gap: 30px;width: 85vw;margin: 0 0 auto auto;}
    #processBox .content .intfoo{order:2;align-items: flex-start;width: 90%;}
    #processBox .content p{padding:0;text-align: left;}
    #aboutBox{display: block;padding-top: 22vw;}
	#secabout:before { width: 0; }
	#secabout #customBox { width: 90vw; }
	#secabout #youtubeBox .left { height: 45vw; }
    #bookBox .topBox{margin-bottom:50px;}
}
@media screen and (max-width:768px) {
}
@media screen and (max-width:640px) {
    #bookBox .topBox{display:flex;justify-content: center;}
    #bookBox .topBox .more{display:none;}
    #conBox h2{width: 85%;font-size: 27px;}
    #conBox{padding: 55% 0 10%;}
    section em{font-size: 55px;}
	#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); }
}