section {position: relative;padding: 5vw 0;}
section >.bg {position: absolute;width: 100%;height: 100%;top: 0;left: 0;z-index: 0;}
section >.info { position: relative; font-size: 0; z-index: 2; }
section .h2title, #aboutBox h1{font-size: 22px;font-weight: 500;line-height: 2;}
section em{font-size: 95px;font-style: unset;font-family: "DM Serif Display", serif;font-weight: 400;font-style: italic;}
section em span{font-size:40px;font-family: var(--font-family), sans-serif;font-weight: 500;transform: translateY(-10px);font-style: normal;}
section em b{transform: translateY(-10px);font-size: 95px;font-weight: 300;margin: 0 10px;display: inline-block;font-family: "DM Serif Display", serif;font-style: italic;}
section .more {margin-top: 40px;}
section .more a {position: relative;padding: 15px;border-bottom: 1px #e1e1e1 solid;display: block;color: #1f1f1f;font-size: 15px;font-family: "DM Serif Display", serif;font-weight: 400;font-style: italic;}
section .more a:before{content:'';position: absolute;width: 10px;height: 1px;background: #444;left: 0;bottom: -1px;}
section .more a:hover:before{width:100%}

/* sidemenuBox */
.sidemenuBox{position:fixed;left:60px;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);z-index: 4;}
.sidemenuBox.active{opacity:1;pointer-events:all}
.sidemenuBox li{position:relative;padding:7.5px 0 7.5px 15px}
.sidemenuBox li a{font-size:17px;font-weight:400;color: #9a9a9a;}
.sidemenuBox li.active a{color: #363636;}
.sidemenuBox li.active::before{color: #363636;}
.sidemenuBox li.active::after{height: 20px;}
.sidemenuBox li.active:last-child::after{top:initial;bottom:90%}
.sidemenuBox li.white a{color:#ffffff}
.sidemenuBox li.white::after,.sidemenuBox li.white::before{color: #ffffff;}
.sidemenuBox li::before{content:"(1)";position:absolute;display:block;left: -4px;top:50%;-webkit-transform:translateY(-50%);transform: translateY(-85%);border-radius:50%;color: #9a9a9a;font-size: 13px;font-family: "EB Garamond", serif;}
.sidemenuBox li#product::before{content: "(2)";}
.sidemenuBox li#news::before{content: "(3)";}
.sidemenuBox li#customize::before{content: "(4)";}
.sidemenuBox li::after{content:"";position:absolute;top: 58%;left:3px;display:block;width:1px;height:0;background: #373839;}
.sidemenuBox li:last-child::after{top:0;}

/* newsBox */
#newsBox {padding-top:0;padding-bottom: 4vw;}
#newsBox .workframe{width: min(90%, 1605px);margin: auto 0 auto auto;display: grid;grid-template-columns: 32% 61%;justify-content: space-between;}
#newsBox .info{margin-top: 90px;}
#newsBox .info em{font-size:55px;}
#newsBox .imgBox{order:2;display: flex;gap: 40px;justify-content: space-between;position: relative;}
#newsBox .imgBox .two{transform: translateY(300px);}
#newsBox .imgBox .three{transform: translateY(160px);}
#newsBox .info .tit { width: 5em; }
#newsBox .info .tit a { color: #000; }
#newsBox .info .news_list {margin-top: 40px;}
#newsBox .info .news_list li {position: relative;border-bottom: 1px solid #e1e1e1;padding: 25px 0;}
#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;font-size: 14px;}
#newsBox .info .news_list .news_txt .txt {width: 1%;flex: 1 1 auto;height: auto;font-size: 17px;font-weight: 500;}
#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-image: url(/images/37/aboutBg.jpg);background-repeat:no-repeat;background-position: top;background-size:cover;padding: 6vw 0;}
#aboutBox:before{content:url(/images/37/img-about-blank.png);position: absolute;right: 0;top: 0;}
#aboutBox .workframe{width:min(90%, 1400px);margin: auto 8% auto auto;display: grid;grid-template-columns: 35% 55%;justify-content: space-between;align-items: end;}
#aboutBox .box{order:2;position: relative;}
#aboutBox .box .img{margin-left: 30%;transform: translateY(-35px);}
#aboutBox .titBox{margin-bottom:30px;}
#aboutBox .more{margin-top: 90px;transform: translateX(80px);}
#aboutBox article p{font-size:17px;font-family: "Noto Sans TC", sans-serif;text-align: justify;line-height: 2.3;letter-spacing: 1px;}
#aboutBox .about_sub {bottom: 60%;left: 5%;display: flex;align-items: center;justify-content: center;position: absolute;}
#aboutBox .about_sub img{height:47px;}
#aboutBox .about_sub:after{content:url(/images/37/circle.png);position: absolute;-webkit-animation-name: circle;-webkit-animation-iteration-count: infinite;-webkit-animation-timing-function: linear;-webkit-animation-duration: 15s;}
@keyframes circle{0%{transform:rotate(0);-moz-transform:rotate(0);-ms-transform:rotate(0);-o-transform:rotate(0);-webkit-transform:rotate(0);}100%{transform:rotate(360deg);-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);-o-transform:rotate(360deg);-webkit-transform:rotate(360deg);}}
#aboutBox em {display:flex;align-items: baseline;transform: translateY(45px);justify-content: space-between;}
#aboutBox em .black{height: 75px;transform: translateY(16px);}

/* solgnBox */
#solgnBox{display:flex;align-items: center;overflow: hidden;}
#solgnBox .video-bg{position:absolute;width: 100%;bottom: -35%;}
#solgnBox .video-bg:before{content:'';position: absolute;width: 100%;height: 100%;background: #080808;opacity: .6;}
#solgnBox .video-bg video{width:100%}
#solgnBox .tt{position:relative;z-index: 5;color: #dedede;font-size: 26px;margin-left: 13%;margin-top: 315px;line-height: 2.2;letter-spacing: 2px;}

/* bookBox */
#bookBox em{position:absolute;bottom: 60px;left: 45%;display: flex;align-items: center;gap: 22px;}
#bookBox em b{transform: translateY(6px);}
#bookBox em span{transform: translateY(8px);}
#bookBox .bg{background-position:bottom;z-index: -1;}
#bookBox .workframe{width:min(90%, 1540px);margin: auto 6% auto auto;display: grid;grid-template-columns: 35% 63%;justify-content: space-between;}
#bookBox .topBox { position: relative; margin: 0 auto 5vw; width: 80vw; }
#bookBox .topBox .title { position: absolute; }
#bookBox .topBox .more { text-align: right; }
#bookBox .list ul li{margin: 0 35px;position: relative;}
#bookBox .list ul li >a{position:absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: 4;}
#bookBox .list ul li .img {overflow: hidden;position: relative;z-index: 1;}
#bookBox .list.right ul li .img:before{content:'';position: absolute;width: 100%;height: 100%;background: linear-gradient(180deg, rgb(0 0 0 / 0%), rgb(0 0 0 / 65%));bottom: 0;left: 0;z-index: 6;}
#bookBox .list.left ul li .img:before{display:none;}
#bookBox .list ul li .img img {position: relative;width: 100%;object-fit: cover;z-index: 1;aspect-ratio: 53/38;}
#bookBox .list.right{margin-top: 110px;}
#bookBox .list.right ul li .img img{    aspect-ratio: 94 / 53;}
#bookBox .list ul li .info {position: relative;padding: 30px 50px 0 90px;z-index: 2;}
#bookBox .list.right ul li .info{position: absolute;bottom: 0;padding: 30px 60px;}
#bookBox .list:not(.right) ul li .info:before{content:'';width: 1px;position: absolute;height: 140%;background: #e1e1e1;bottom: 0;left: 50px;z-index: 5;}
#bookBox .list ul li .info .h3 {height: auto;font-weight: 400;font-size: 22px;margin-bottom: 10px;}
#bookBox .list ul li:hover .info .h3{color: var(--secondary);}
#bookBox .list.right ul li .info .h3{color:white}
#bookBox .list ul li .info p {height: auto;font-weight: 300;font-size: 15px;margin-bottom: 10px;-webkit-line-clamp: 2;font-family: "Noto Sans TC", sans-serif;line-height: 2;}
#bookBox .list ul li .info a {font-size: 15px;margin-top: 20px;font-family: "DM Serif Display", serif;font-weight: 400;font-style: italic;}
#bookBox .arrowBox {display:flex;width: min(90%, 1540px);margin: 80px 6% auto auto;align-items: center;gap: 100px;}
#bookBox .arrowBox .btn{display:flex;align-items: center;padding: 0;gap: 10px;}
#bookBox .arrowBox .btn svg{width: 85px;height: 85px;}
#bookBox .arrowBox .btn #case_prev svg{transform:scaleX(-1);}
#bookBox #counter {display:flex;align-items: center;gap: 15px;}
#bookBox #counter span{font-family: "EB Garamond", serif;font-size: 22px;}

@media (max-width:1680px){
    #aboutBox .workframe{width: min(90%, 1300px);}
    #bookBox .workframe{width: min(90%, 1350px);}
}
@media screen and (max-width:1440px) {
    #bookBox .arrowBox{width: min(85%, 1540px);}
    #aboutBox em .black{height: 65px;}
    section em span{font-size: 35px;transform: translateY(-5px);}
    section em{font-size: 70px;}
    #aboutBox .workframe{width: min(80%, 1300px);}
    #bookBox .workframe{width: min(85%, 1350px);}
    .sidemenuBox{left:20px}
    .sidemenuBox li a{font-size:14px}
	#productBox >.info { margin: 0 5%; }
	#productBox ul li >div { margin: 0 10px; }
	#productBox ul li .info { padding: 25px 15px 40px; width: calc(85% - 30px); }
}
@media screen and (max-width:1400px) {
    #aboutBox:before{zoom:80%}
}
@media screen and (max-width:1280px) {
    #aboutBox .more{transform: translateX(0);}
    #aboutBox .about_sub{bottom: 190%;}
    #aboutBox em{transform: translateY(0);}
    #aboutBox .box .img{display:none;}
    #aboutBox .box{order:-1;margin-top: 150px;margin-bottom: 50px;}
    #aboutBox .workframe, #bookBox .workframe{width:90%;margin:0 auto;}
    #aboutBox .workframe{grid-template-columns: 1fr;}
    .sidemenuBox{display:none}
	#secabout #youtubeBox { width: 90vw; }
}
@media screen and (max-width:1024px) {
    #newsBox .imgBox .three{transform: translateY(390px);}
    #newsBox .workframe{grid-template-columns: 45% 50%;}
    #newsBox .imgBox .two{display:none;}
    #solgnBox .video-bg{bottom: -25%;}
    #bookBox .list ul li .info{padding-left: 50px;}
    #bookBox .list:not(.right) ul li .info:before{left:20px;}
    #bookBox .list ul li{margin: 0;}
    #bookBox em{position:relative;left: 0;justify-content: center;bottom: 0;margin-bottom: 50px;gap: 10px;}
	#aboutBox .more a {display: inline-block;}
	#aboutBox .bg { width: 100%; height: calc(100% - (12vw + 54px)); top: calc(7vw + 54px); z-index: 1; }
	#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) {
    #bookBox .list.right{display:none;}
    #bookBox .workframe{display:block;}
    #aboutBox .box{margin-top: 220px;}
	#secabout:before { width: 0; }
	#secabout #customBox { width: 90vw; }
	#secabout #youtubeBox .left { height: 45vw; }
}
@media screen and (max-width:768px) {
    section{padding:10vw 0}
    #newsBox{padding:0}
    #newsBox .info{width:90%;margin: 70px auto 0;}
    #newsBox .workframe{width:100%;display: flex;flex-direction: column;gap: 50px;}
    #newsBox .imgBox .three{display:none;}
    #newsBox .imgBox{display:block;}
    #newsBox .imgBox img{aspect-ratio:4/3;object-fit: cover;width: 100%;}
    #solgnBox .tt{font-size:22px;}
    #solgnBox .video-bg video{height:100%;width: auto;}
    #solgnBox .video-bg{bottom: -3%;}
}
@media screen and (max-width:640px) {
    #solgnBox{display:block;}
    #newsBox .bg{background-size:cover;background-position: 20% 50%;}
    #newsBox .info .news_list .news_txt{display: flex;flex-direction: column;align-items: flex-start;}
    #newsBox .info .news_list .news_txt .time, #newsBox .info .news_list .news_txt .txt{width:100%}
    #solgnBox .tt{word-break: keep-all;font-size: 22px;}
    #bookBox #counter{transform: translateY(-5px);}
    #bookBox .arrowBox{gap: 30px;margin: 50px auto 0;}
    section em b{font-size:40px;}
    #aboutBox .more{margin-top:40px;}
    section em span{font-size: 18px;transform: translateY(-5px);}
    section em img{height: 30px;}
    #aboutBox em .black{height: 37px;transform: translateY(8px);}
    section em{font-size: 45px;}
    #aboutBox .about_sub img{height: 40px;}
    #aboutBox .about_sub{left: 12%;bottom: auto;top: -300%;}
    #aboutBox .about_sub:after{zoom:80%}
    #aboutBox:before{zoom: 40%;}
	#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); }
}