section {position: relative;padding: 6vw 0;z-index: 2;}
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 .more_btn {padding: 10px 55px 10px 10px;border-radius: 40px;color: var(--secondary);border: 1px solid var(--secondary);font-family: "Noto Sans TC", sans-serif;}
section .more_btn b{background: var(--secondary);width: 45px;height: 45px;display: inline-flex;justify-content: center;align-items: center;border-radius: 50px;margin-right: 35px;}
section .more_btn b svg{width: 15px;height: 15px;fill: #c0c8d0;}
section .more_btn:hover{background: var(--secondary);color: var(--white);}
section .more_btn:hover b{margin-right: 20px;margin-left: 15px;background: var(--secondary);}
section .more_btn:hover b svg{fill: var(--white);}
section .titleBox {position:relative;display: flex;align-items: flex-start;}
section .titleBox:before {content:'';width: 15px;display: block;aspect-ratio: 1 / 1;border: 1px solid #323232;border-radius: 50%;position: absolute;top: -10px;}
section .titleBox font{font-family: "Barlow", sans-serif;font-size: max(5.5 * (1vw + 1vh) / 2, 55px);font-weight: 800;line-height: 1.4;}
section .titleBox .title{font-family: "Noto Serif TC", serif;font-weight: 400;margin-left: 20px;margin-top: 20px;}

/* wrap */
#wrap{position:relative;}
#wrap:after{content:'';position: absolute;width: 100%;height: 100%;background-image: url(/images/37/Bg.jpg);background-repeat: no-repeat;background-position: 50% 50%;background-size: cover;top: 0;z-index: 0;}
#wrap .video-bg{position:fixed;width: 100%;height: 100%;top: 0;z-index: 1;-webkit-filter: grayscale(1);opacity: .25;}

/* newsBox */
#newsBox{padding:0;display: grid;grid-template-columns: 42% 51%;justify-content: space-between;align-items: center;}
#newsBox .bg{position:relative;opacity: 1;background-repeat: no-repeat;background-position: 50% 50%;background-size: cover;}
#newsBox .info {margin: 5vw 0;width: 85%;}
#newsBox .info .tit { width: 5em; }
#newsBox .info .tit a { color: #000; }
#newsBox .info .news_list {border-top:1px solid #323232;margin-top: 30px;padding-top: 50px;}
#newsBox .info .news_list li { position: relative; }
#newsBox .info .news_list .news_txt {position: relative;}
#newsBox .info .news_list .news_txt .time {display: flex;flex-direction: row;align-items: center;color: #666666;font-size: 14px;font-family: "Barlow", sans-serif;text-transform: uppercase;font-weight: 500;}
#newsBox .info .news_list .news_txt .time b{font-size: 14px;font-family: "Barlow", sans-serif;text-transform: uppercase;font-weight: 500;border-left: 1px solid #b7b7b7;line-height: 1;padding-left: 20px;margin-left: 20px;display: inline-flex;align-items: center;}
#newsBox .info .news_list .news_txt .time b:after{content:'';display: block;width: 50px;height: 1px;background: #bfbfbf;margin: 0 20px;}
#newsBox .info .news_list .news_txt .time a{font-family: "Noto Sans TC", sans-serif;font-weight: 400;font-size: 14px;}
#newsBox .info .news_list .news_txt .txt {height: 68px;-webkit-line-clamp: 2;font-size: 20px;font-family: "Noto Sans TC", sans-serif;font-weight: 400;}
#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_list .news_txt .infoo{display: grid;justify-content: space-between;align-items: center;grid-template-columns: 1fr 150px;gap: 0 150px;margin-top: 10px;}
#newsBox .info .news_list .news_txt .infoo font{font-family: "Noto Sans TC", sans-serif;border-left: 1px solid #b3b3b3;padding-left: 30px;font-size: 14px;position: relative;}
#newsBox .info .news_list .news_txt .infoo font:before{content:'';width: 55px;position: absolute;height: 1px;background: #b3b3b3;bottom: 9px;}
#newsBox .info .news_list .news_txt:hover .infoo font:before{width:0}
#newsBox .info .news_list .news_txt .infoo b{background: var(--secondary);width: 45px;height: 45px;display: inline-flex;justify-content: center;align-items: center;border-radius: 50px;margin-left: 15px;}
#newsBox .info .news_list .news_txt:hover .infoo b{background:var(--primary)}
#newsBox .info .news_list .news_txt .infoo b svg{width: 15px;height: 15px;fill: #c0c8d0;}

/* productBox */
#productBox {padding: 0;}
#productBox .info {position: relative;}
#productBox .info .ptit{position:absolute;top: 100px;left: 8vw;z-index: 2;width: 330px;}
#productBox .info .ptit span{display: inline-flex;font-size: 15px;border: 1px solid var(--secondary);padding: 10px;line-height: 1.2;width: 33px;aspect-ratio: 1 / 1;align-items: center;justify-content: center;}
#productBox .info .ptit .title{word-spacing: 100vw;font-size: 31px;color: #555555;margin: 30px 0 0;letter-spacing: 5px;font-weight: 600;line-height: 1.4;}
#productBox ul li {position: relative;display: grid;grid-template-columns: 25% 71%;justify-content: space-between;align-items: end;}
#productBox ul li .img{order:2}
#productBox ul li .img a{display:block;}
#productBox ul li a.more {display: inline-block;background: #36312a;padding: 15px 80px;color: #fff;font-size: 15px;}
#productBox ul li a.more:hover{background:var(--primary)}
#productBox ul li .img img {position: relative;width: 100%;object-fit: cover;z-index: 1;aspect-ratio: 6 / 3;}
#productBox ul li .info {overflow: visible;position: relative;margin-left: 8vw;z-index: 2;margin-bottom: 100px;}
#productBox ul li .info h3 a{margin-bottom: 10px;font-weight: 500;font-size: 21px;color: #555555;margin-left: 30px;}
#productBox ul li .info h3:hover a{color:var(--primary)}
#productBox ul li .info article {height: auto;font-weight: 400;font-size: 15px;color: #707070;-webkit-line-clamp: 1;margin-left: 30px;margin-bottom: 75px;}
#productBox ul li .info span{display:inline-block;width: 15px;height: 1px;background: #323232;margin-left: 30px;}

/* aboutBox */
#aboutBox {z-index: 5;display: grid;grid-template-columns: 50% 43%;justify-content: space-between;padding-top: 7vw;padding-bottom: 0;}
#aboutBox:before{content:url(/images/37/leaf.png);position: absolute;right: 0;top: 0;animation-name: leaf;animation-direction: alternate;animation-iteration-count: infinite;animation-timing-function: ease-in-out;animation-duration: 3s;opacity: .6;}
@keyframes leaf{0%{transform-origin:right top;transform:rotate(-3deg);}100%{transform-origin:right top;transform:rotate(3deg);}}
#aboutBox:after{content:url(/images/37/buliding.png);position: absolute;right: 50px;bottom: -10px;}
#aboutBox .info{margin-bottom: 180px;margin-top: 20px;}
#aboutBox .bg {width: 100%;z-index: 3;position: relative;background-repeat: no-repeat;background-position: 50% 50%;background-size: cover;}
#aboutBox .info .txtBox h3 {font-size: 22px;margin: 20px 0 40px;}
#aboutBox .info .txtBox p {line-height: 200%;font-size: 19px;font-weight: 500;letter-spacing: 1px;margin-bottom: 110px;}
#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 { 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 */
#bookBox .bg{opacity:1;width: 92%;}
#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 .img { overflow: hidden; position: relative; margin: 0 40px 0 60px; z-index: 1; }
#bookBox .list ul li .img:before { position: absolute; width: 100%; height: 100%; background: rgb(240 244 247 / .6); display: block; top: 0; left: 0; opacity: 0; z-index: 2; content: ""; }
#bookBox .list ul li .img img { position: relative; width: 100%; height: 30vw; 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; }
#bookBox .list ul li:nth-child(2n) .img { margin: 0 0 0 100px; }
#bookBox .list ul li:nth-child(2n) .info { margin-left: 40px; }

/* custom_area */
#custom_area{position:relative;}
#custom_area:before{content:'';background-image: url(/images/37/linne.png);background-repeat: no-repeat;background-position: 50% 50%;background-size: cover;width: 100%;height: 12px;position: absolute;top: 50px;z-index: 2;}
#bookBox .fixTxt{position:absolute;z-index: 2;left: 7vw;bottom: 4vw;}
#custom_area .workframe{width:min(90%, 1280px)}
#custom_area ul li >div { margin: auto; width: 70% }
#custom_area ul li .clip { width: 250px; height: 250px; -webkit-clip-path: url(#clip_custom); clip-path: url(#clip_custom); }
#custom_area ul li h3 { margin: 10px 0 5px; font-size: 20px; }
#custom_area ul li article { font-weight: 300; font-size: 14px; }
#custom_area .img_box {padding: 0 110px;width: 90%;}
#custom_area .img_box h3{text-align: center;color: #36312a;font-size: 12px;margin: 0 30px;}
#custom_area .img_box h3.slick-current{font-size: 15px;}
#custom_area .img_box h3 span{width: 0;height: 1px;display: block;margin: 5px auto 0;background: #36312a;}
#custom_area .img_box h3.slick-current span{width: 35px;}
#custom_area .img_nav {margin-top: 6vw;}
#custom_area .caselist {display:grid;grid-template-columns: 54% 38%;justify-content: space-between;align-items: center;}
#custom_area .caselist img{aspect-ratio:4 / 3;object-fit: cover;}
#custom_area .caselist .titleBox {margin-bottom: 1vw;}
#custom_area .caselist h3 a{font-size: 22px;}
#custom_area .caselist p{margin-top:20px;height: 81px;-webkit-line-clamp: 3;width: 80%;margin-bottom: 50px;}
#custom_area .infoo {position:relative;}
#custom_area .infoo:before{content:url(/images/37/img-bird.png);position: absolute;right: 0;animation-name: bird;animation-direction: alternate;animation-iteration-count: infinite;animation-timing-function: ease-in-out;animation-duration: 1.5s;}
@keyframes bird{0%{right:0;top:0;}100%{right:10px;top:10px;;}}
#custom_area .slick-prev{width: 45px;height: 45px;top: 15px;left: 15px;}
#custom_area .slick-prev:before{content:url(/images/37/arrow-left.png);width: 45px;height: 45px;display: block;opacity: 1;}
#custom_area .slick-next{width: 45px;height: 45px;top: 15px;right: 15px;}
#custom_area .slick-next:before{content:url(/images/37/arrow-right.png);width: 45px;height: 45px;display: block;opacity: 1;}

@media screen and (max-width:1440px) {
	#aboutBox:after{zoom:80%;}
	#productBox ul li{grid-template-columns: 30% 65%;}
	#productBox ul li .img img{aspect-ratio: 4 / 3;}
}
@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; }
}
@media screen and (max-width:1280px) {
	#productBox .info .ptit{top: 50px;left: 5vw;}
	#productBox ul li .info{margin-left:5vw}
	#secabout #youtubeBox { width: 90vw; }
	#bookBox .list ul li .img { margin: 0 20px 0 60px; }
}
@media screen and (max-width: 1024px) {
	#custom_area .img_box{width:100%;}
	#custom_area .img_nav {margin-top: 10vw;}
	#bookBox .bg{width:100%;}
	#newsBox .bg{height: 70vh;}
	#newsBox{grid-template-columns: repeat(1, 1fr);}
	#productBox ul li .img img{aspect-ratio: 3 / 3;}
	#aboutBox:after{zoom: 45%;right: 30px;bottom: -20px;}
	#newsBox .info{margin: 7vw auto;}
	section .more a { padding: 10px 80px 10px 20px; }
	#secabout:before { width: 90vw; }
	#secabout #customBox { width: 70vw; }
	#secabout #youtubeBox .left { position: relative; width: 100%; height: 400px; }
}
@media screen and (max-width:980px) {
	#custom_area .infoo{margin-top: 45px;}
	#custom_area .img_nav {margin-top: 14vw;}
	#custom_area .caselist{display:block;}
	#newsBox .bg{height: 50vh;order: 2;}
	#productBox ul li .info{margin: 5vw 0;display: flex;flex-direction: column;align-items: center;}
	#productBox ul li .info h3 a, #productBox ul li .info span, #productBox ul li .info article{margin-left:0}
	#productBox ul li .info article{margin-bottom: 40px;}
	#productBox ul li .info span{margin-top:25px;margin-bottom: 20px;}
	#productBox ul li .img img{aspect-ratio: 5.5 / 3;}
	#productBox ul{width:90%;margin:0 auto;}
	#productBox ul li .img{order:-1}
	#productBox ul li{grid-template-columns: repeat(1, 1fr);}
	#productBox{padding:7vw 0;}
	#productBox .info .ptit{position:relative;width: 90%;margin: 0 auto 40px;left: 0;top: 0;display: grid;grid-template-columns: 80px 1fr;}
	#aboutBox .info .txtBox p{margin-bottom:80px;}
	#aboutBox .info{width:80%;margin: 50px auto 70px;}
	#aboutBox{padding-top:0;grid-template-columns: repeat(1, 1fr);}
	#aboutBox .bg{height: 55vh;}
	#secabout:before { width: 0; }
	#secabout #customBox { width: 90vw; }
	#secabout #youtubeBox .left { height: 45vw; }
	#bookBox {padding: 11vw 0;}
	#bookBox .info { padding-bottom: 90px; }
	#bookBox .topBox , #bookBox .topBox .title { position: initial; }
	#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 { margin: 0 0 0 100px; }
	#bookBox .list ul li .img img { height: 55vw; }
}
@media screen and (max-width:640px) {
	#custom_area .caselist p{width:100%;}
	#custom_area .img_box h3{font-size: 15px;}
	#custom_area .img_box h3 span{width: 35px;}
	#custom_area .img_nav {margin-top: 21vw;}
	#newsBox .info .news_list .news_txt .infoo{gap: 0 20px;grid-template-columns: 1fr 50px;}
	#newsBox .info .news_list .news_txt .infoo font{border:0;padding: 0;font-size: 0;}
	#newsBox .info .news_list .news_txt .infoo font b{margin:0;}
	#newsBox .info .news_list .news_txt .infoo font:before{display:none;}
	#newsBox .info{margin: 10vw auto;}
	#productBox .info .ptit .title{font-size: 25px;}
	#aboutBox .info .more_btn{display:none;}
	#aboutBox:before{zoom: 40%;top: 35%;}
	#aboutBox .bg{height: 40vh;}
	#bookBox .list ul li .img , #bookBox .list ul li:nth-child(2n) .img { margin: 0 5vw; }
	#bookBox .list ul li .info , #bookBox .list ul li:nth-child(2n) .info { margin: -10% auto 0; width: 70%; }

}