section{position:relative;padding:5vw 0;background:#fff}
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-align:center;font-family:'Montserrat','Noto Sans TC',sans-serif;text-transform:uppercase;font-size:65px;color:#f5f5f5}
section .more{margin-top:40px;text-align:center}
section .more a{position:relative;padding:15px 100px;border:2px #1f1f1f solid;display:inline-block;color:#1f1f1f;border-radius:25px;overflow:hidden}
section .more a:after{content:'';position:absolute;top:0;left:0;width:0;height:100%;background:rgb(238 238 238 / 50%)}
section .more:hover a:after{width:100%}
section .more font{text-align:center;font-family:'Montserrat','Noto Sans TC',sans-serif;font-weight:500;text-transform:uppercase;letter-spacing:3px;color:#1f1f1f;position:relative;z-index:2}
section .more a svg.arrow{position:absolute;width:20px;right:20px;top:calc((100% - 11.41px) / 2);z-index:2}
#newsBox{padding:90px 0 0;width:100%;z-index:110;background:#fffbdf}
#newsBox .info{width:1070px;margin:0 auto;background:#fff;border-radius:20px 20px 0 0;padding:90px;display:flex;justify-content:space-between}
#newsBox .info .row{width:calc(100% - 150px);display:inline-block;vertical-align:text-bottom}
#newsBox .info .tit.row{margin-right:50px;width:50px;font-size:30px;letter-spacing:5px;line-height:120%;position:relative}
#newsBox .info .tit.row:after{content:'';background:#ffe109;width:15px;height:50px;position:absolute;left:0;border-radius:5px;top:0;z-index:-1}
#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:20px 0;font-size:0;background:url(/images/37/border_dotted.png) bottom left repeat-x;background-size:8px 3px}
#newsBox .info ul li:first-child{padding-top:0}
#newsBox .info ul li a{position:absolute;width:100%;height:100%;top:0;left:0}
#newsBox .info ul li p.time{margin-right:20px;width:55px;display:inline-block;font-family:'Montserrat',sans-serif;color:#282828;line-height:100%;font-weight:500}
#newsBox .info ul li p.time b{display:block}
#newsBox .info ul li p.txt{width:calc(100% - 80px);display:-webkit-inline-box;font-weight:500}
#newsBox .info ul li:hover p.txt{color:#7c7c7c}
#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 .info h3.h3title{position:relative;margin-bottom:20px;font-size:30px;letter-spacing:5px;text-align:center}
#productBox .info h3.h3title:after{content:'';background:#ffe109;width:50px;height:15px;position:absolute;left:47%;border-radius:5px;bottom:9px;z-index:-1}
#productBox .bg{opacity:.2}
#productBox .info{margin:0 150px}
#productBox ul{margin-top:5vw}
#productBox ul li{position:relative;margin:0 20px}
#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;border-radius:25px}
#productBox ul li .img:before{position:absolute;width:100%;height:100%;background:rgb(31 31 31 / 15%);display:block;top:0;left:0;opacity:0;z-index:2;content:""}
#productBox ul li .img img{position:relative;width:100%;height:350px;object-fit:cover;z-index:1}
#productBox ul li .info{overflow:visible;position:relative;padding:25px;width:calc(100% - 50px);z-index:2;margin:0}
#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{height:52px;font-weight:500;font-size:18px;color:#1f1f1f;line-height:150%;text-align:justify;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;}
#productBox ul li .info article{height:43px;font-weight:400;font-size:14px;color:#2c2c2c;-webkit-line-clamp:2}
#aboutBox{background:none;z-index:5;padding-top:10vw}
#aboutBox:before{position:absolute;width:65%;height:90%;background:#f3f3f3;display:block;top:-35%;right:0;z-index:1;content:"";border-radius:25px 0 25px 25px}
#aboutBox .bg{width:60%;height:75%;background-attachment:fixed;top:10%;right:0;left:auto;opacity:1;z-index:3;border-radius:25px 0 0 25px}
#aboutBox .info{width:45%}
#aboutBox .info .title{margin:0 5vw 0;text-align:left;color:#f5f5f5}
#aboutBox .info .txtBox{position:relative;padding:0 13vw 0 5vw}
#aboutBox .info .txtBox >div{position:relative;z-index:2}
#aboutBox .info .txtBox h3{margin-bottom:20px;font-size:30px;letter-spacing:5px;position:relative}
#aboutBox .info .txtBox h3:after{content:'';background:#ffe109;width:50px;height:15px;position:absolute;left:0;border-radius:5px;bottom:9px;z-index:-1}
#aboutBox .info .txtBox article{line-height:220%;font-size:16px;text-align:justify}
#aboutBox .info .txtBox .more{margin-top:40px;text-align:left}
#aboutBox #SeoStarRating font{vertical-align:middle}
#aboutBox #SeoStarRating font:last-child{color:#fff}
#aboutBox #SeoStarRating .fa{vertical-align:initial}
#secabout{margin-top:-5vw;padding:20vw 0 10vw;background:url(/images/37/img-secaboutBg.jpg) no-repeat 50% / cover;z-index:1}
#secabout:before{position:absolute;width:87vw;height:calc(100% - 20vw);background:#fff;display:block;top:15vw;left:0;content:"";z-index:1}
#secabout >div{position:relative;margin:0 auto 50px;width:50vw;z-index:2}
#secabout #customBox ul li article{margin:3vw 0 5vw;text-align:center;line-height:190%;color:#1f1f1f}
#secabout #youtubeBox{width:85vw;background:rgba(31,31,31,.9)}
#secabout #youtubeBox a{position:absolute;width:100%;height:100%;display:block;z-index:2}
#secabout #youtubeBox .left{position:absolute;width:calc(100% - 400px);height:100%;top:0;left:0;z-index:3}
#secabout #youtubeBox .left iframe{width:100%;height:100%}
#secabout #youtubeBox .right{position:relative;margin:0 0 0 auto;padding:150px 50px;width:300px;text-align:center;z-index:1}
#secabout #youtubeBox .right .tit{font-size:24px;color:#fff}
#secabout #youtubeBox .right .more{padding:0 3px 5px;border-bottom:1px #fff solid;display:inline-block;color:#fff}
#secabout #youtubeBox .right .more font{margin-right:20px;font-family:'Montserrat','Noto Sans TC',sans-serif;text-transform:uppercase;letter-spacing:3px;font-size:13px}
#bookBox{background:#fffbdf;padding:5vw 0 9.5vw 0}
#bookBox:before{content:"";display:block;width:calc(100% - 8.56vw);height:28.5vw;min-height:400px;background:#fff;border-radius:20px;z-index:1;position:absolute;top:140px;left:0;right:0;margin:auto;z-index:1}
#bookBox .info{position:relative;overflow:hidden;box-sizing:border-box;-js-display:flex;display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-justify-content:space-between;justify-content:space-between;flex-direction:row-reverse;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap}
#bookBox .info:after{content:url(/images/37/book-img.png);position:absolute;zoom:70%;right:15%;bottom:0;opacity:.25;animation-name:fish;animation-direction:alternate;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-duration:2s;z-index:-1}
@keyframes fish{0%{transform-origin:right bottom;transform:rotate(-3deg)}
100%{transform-origin:right bottom;transform:rotate(3deg)}
}#bookBox .topBox{position:relative;margin:0 auto 5vw;float:right;position:relative;width:220px;-js-display:flex;display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-justify-content:space-between;justify-content:space-between;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;z-index:10;flex-direction:row}
#bookBox .topBox .title{width:50px;font-size:30px;letter-spacing:5px;line-height:120%;position:relative;color:#000}
#bookBox .topBox .title:after{content:'';background:#ffe109;width:15px;height:50px;position:absolute;left:0;border-radius:5px;top:0;z-index:-1}
#bookBox .topBox .text{width:120px;-webkit-writing-mode:vertical-rl;-ms-writing-mode:tb-rl;height:450px;order:-1;margin-right:20px}
#bookBox .topBox .more{text-align:right}
#bookBox .list{width:calc(100% - 166px - 6.14vw);max-width:1200px;margin-left:-50px}
#bookBox .list ul >div{padding-left:40%;padding-bottom:10px}
#bookBox .list ul li .img{overflow:hidden;position:relative;margin:0 15px;z-index:1;height:500px;border-radius:25px}
#bookBox .list ul li .img a{display:block}
#bookBox .list ul li .img img{position:relative;width:100%;height:100%;object-fit:cover;z-index:1}
#bookBox .list ul li .info{position:relative;margin-top:-14%;padding:7% 5%;width:350px;background:rgba(0,0,0,.7);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:2}
#bookBox .list ul li .info h3{height:40px;font-weight:400;font-size:24px;color:#fff}
#bookBox .list ul li .info .more{text-align:left}
@media screen and (max-width:1680px){#bookBox .info:after{right:5%}
}@media screen and (max-width: 1440px){#productBox ul li .img img{height:250px}
#bookBox{padding:5vw 0}
#bookBox .list{max-width:70%}
#productBox >.info{margin:0 5%}
#productBox ul li >div{}
#productBox ul li .info{padding:25px 15px 40px;width: calc(100% - 30px);}
#aboutBox .bg{width:50%}
#aboutBox .info{width:55%}
#bookBox .info:after{display:none}
}@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:1280px){#secabout #youtubeBox{width:90vw}
#bookBox .list ul li .img{}
}@media screen and (max-width:1024px){section .more a{padding:10px 80px 10px 20px}
#newsBox{margin-top:-35px}
#newsBox .info{width:calc(85% - 180px)}
#newsBox .info .row{width:100%;display:block}
#newsBox .info ul li{}
#newsBox .info ul li a,#aboutBox .info{width:100%}
#newsBox .info ul li .noBox,#newsBox .info .btn,#secabout #youtubeBox .right{display:none}
#aboutBox .bg{width:100%;height:100%;top:0;z-index:1;display:none}
#aboutBox .info .txtBox{padding:3vw 5vw 10vw 5vw;background:none}
#secabout:before{width:90vw}
#secabout #customBox{width:70vw}
#secabout #youtubeBox .left{position:relative;width:100%;height:400px}
#aboutBox .info .title,section .title{color:#424242}
}@media screen and (max-width:980px){#secabout:before{width:0}
#productBox ul li .img img{height:200px}
#bookBox .list ul >div{padding:0}
#bookBox .list{max-width:100%;width:90%;margin:0 auto}
#bookBox:before{background:none}
#newsBox .info .tit.row{width:100%;margin:0 0 20px}
#newsBox .info .tit.row:after{height:15px;width:50px;top:unset;bottom:0}
#newsBox .info{flex-wrap:wrap;padding:60px;width:calc(85% - 120px)}
#secabout #customBox{width:90vw}
#secabout #youtubeBox .left{height:45vw}
#bookBox{padding:50px 0}
#bookBox .info{padding-bottom:0;display:block}
#bookBox .topBox,#bookBox .topBox .title{width:100%;position:relative;display:block;float:none}
#bookBox .topBox .title:after{height:15px;width:50px;left:50%;top:unset;bottom:0}
#bookBox .topBox .text{-webkit-writing-mode:unset;width:90%;margin:30px auto 0;text-align:center;order:0;height:auto}
#bookBox .topBox .more{position:absolute;width:100%;text-align:center;bottom:0;left:0}
}@media screen and (max-width:768px){#bookBox .list ul li .img{height:400px}
}@media screen and (max-width:640px){#newsBox{margin-top:0;padding:50px 0}
#productBox ul li .info{padding: 25px 0 40px;width: 100%;}
#aboutBox .info .title,section .title{font-size:40px}
#newsBox .info{padding:0;width:85%;background:none}
#bookBox .list ul li .img{height:250px}
}