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-align: center; font-family: 'Montserrat', 'Noto Sans TC', sans-serif; text-transform: uppercase; letter-spacing: 10px; font-size: 45px; color: #1f1f1f; }
section .more {margin-top: 40px;}
section .more a {position: relative;padding: 20px 30px;display: inline-flex;color: #1f1f1f;justify-content: space-between;align-items: center;background: var(--primary);}
section .more a svg{width: 16px;}
section .more font {font-size: 16px;text-align: center;font-weight: 700;color: #1f1f1f;font-family: "Heebo", sans-serif;margin-right: 70px;}
section .more a svg.arrow { position: absolute; width: 20px; right: 20px; top: calc((100% - 11.41px) / 2); }
#wrap .wrapper_lines {width: 100vw;height: 100vh;top: 0;left: 0;z-index: -1;position: fixed;}
#wrap .wrapper_lines .center_box {height: 100vh;border: rgb(222 222 222 / 30%) solid;border-width: 0 1px;width: 1230px;z-index: -1;text-align: center;}
#wrap .wrapper_lines .center_box >div{display:inline-block;width: 33%;}


.boomJJ { position: relative; z-index: 78;}
.boomJJ .workframe{display: flex;flex-direction: column;align-items: center;}
/* newsBox */
#newsBox {padding: 0vw 0 5vw;background: #ffffff;z-index: 6;}
#newsBox:before{content:"";position: absolute;width: 8.8vw;height: 145%;bottom: 0;background: #f1f1f1;}
#newsBox:after{content:"";position: absolute;width: 91vw;height: 52%;background: #f1f1f1;bottom: 0;z-index: 0;}

#newsBox .bg{position: absolute;background-size: cover;background-position: 50% 50%;background-repeat: no-repeat;padding: 230px 0 70px 310px;width: 18vw;font-weight: 500;top: -95px;height: auto;left: 0;}
#newsBox .info {display: grid;grid-template-columns: 100%;width: min(90%, 1719px);margin: 0 0 0 auto;align-items: end;justify-content: space-between;}
#newsBox .info .tit a { color: #000; }
#newsBox .info .titleBox {margin-left: 40px;}
#newsBox .news_list{margin:50px 17px 5px;z-index:3;position:relative}
#newsBox .news_list li{position:relative;background:var(--white);margin:0 17px;border:#c3c3c3 1px solid}
#newsBox .news_list .news_txt{padding:30px 30px 60px}
#newsBox .news_list .news_txt:before{content:"";position:absolute;width:40px;aspect-ratio:1/1;background:url(/images/37/arrow-right.png);background-size:10px;background-position:50%;background-repeat:no-repeat;bottom:0;right:0;background-color:#000000;padding:1px;opacity:0}
#newsBox .news_list li:hover .news_txt:before{opacity:1}
#newsBox .news_list .nwnwimg img{aspect-ratio:8/5;object-fit:cover}
#newsBox .news_list .news_txt .top{position: relative;display: flex;align-items: center;justify-content: space-between;}
#newsBox .news_list .news_txt .top a{background:var(--primary);font-size: 14px;text-align: center;padding: 5px 20px;}
#newsBox .news_list .news_txt .time {display:flex;align-items: center;font-size: 20px;line-height: 1;font-weight: 600;gap: 4px;}
#newsBox .news_list .news_txt .time span{font-weight: 800;}
#newsBox .news_list .news_txt .top:after{content:"";width: 70%;height: 2px;background: #939393;}
#newsBox .news_list .news_txt .time b{text-transform: uppercase;font-weight: 600;font-size: 20px;}
#newsBox .news_list .news_txt .txt {height:auto;font-size: 20px;margin: 10px 0;font-weight: 700;}
#newsBox .news_list .news_txt p {height: 51px;font-size: 15px;color: #535353;-webkit-line-clamp: 2;}
#newsBox .news_list .news_txt >a { position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
#newsBox .news_list .noBox { position: absolute; width: 2em; text-align: center; top: 50%; right: -6em; -webkit-transform: translateY(-47%); transform: translateY(-47%); }
#newsBox .news_btn { position: relative; width: 9em; display: flex; justify-content: space-between; align-items: center; z-index: 5; }
#newsBox .news_btn font { width: 5.5em; display: flex; justify-content: flex-end; }
#newsBox .news_btn font span { min-width: 2em; text-align: center; }
#newsBox .news_btn font span:nth-child(2) { min-width: 1.5em; }
#newsBox .news_btn #prevBtn { -webkit-transform: scaleX(-1); transform: scaleX(-1); }



/* custom_area */
#custom_area .cn{font-family: 'Noto Sans TC', 'Noto Sans SC', sans-serif;font-size: 30px;font-weight: 500;}
#custom_area .titleBox p{color:#595757;font-size: 18px;width: 75%;margin: 20px 0 45px;}
#custom_box ul{display:grid;grid-template-columns: repeat(4, 1fr);}
#custom_box li{margin: 2.5px;position: relative;transition: all linear 0.3s;}
#custom_box li:after{background: linear-gradient(180deg,rgb(0 0 0 / 0%), rgb(0 0 0 / 50%));content:'';width: 100%;height: 100%;position: absolute;bottom: 0;}
#custom_box li .photo{}
#custom_box li .photo img{aspect-ratio: 2.3 / 3;object-fit: cover;width: 100%;}
#custom_box li .row{display:flex;position: absolute;margin: 0;bottom: 30px;z-index: 2;justify-content: center;width: 100%;transition: all linear 0.3s;}
#custom_box li .row h3{background:var(--primary);font-size: 20px;padding: 5px 30px;}
#custom_box li .row article{margin-top: 20px;display: none;transition: all linear 0.3s;color: var(--white);font-size: 15px;-webkit-line-clamp: 3;padding: 0 10%;height: auto;}
#custom_box li:hover .row article{display: -webkit-box;opacity: 1;}

.flyJJimg{position: absolute;margin-top: -120px;z-index: 555;width: 35vw;}

/* productBox */
#productBox{padding-top:0;display: flex;background-color: #f1f1f1;z-index: 5;}
#productBox .bg:before{content:url(/images/37/img-product.png);position: absolute;bottom: -100px;left: -30px;bottom: -20px;animation-name: fish;animation-direction: alternate;animation-iteration-count: infinite;animation-timing-function: ease-in-out;animation-duration: 5s;}
#productBox .bg {opacity: 1;top: -30%;z-index: -1;overflow: hidden;}
#productBox .btn{display:flex;flex-wrap: wrap;align-items: center;padding: 0;flex-direction: column;gap: 20px;position: absolute;z-index: 9;left: -26px;}
#productBox .btn a{width: 66px;height: 66px;border: 1px solid #696969;text-align: center;line-height: 66px;background: #5a5a5a;border-radius: 5555px;display: flex!important;flex-direction: column;align-items: center;justify-content: center;}
#productBox .btn a:hover{background: var(--primary);}
#productBox .btn .more{margin-top:0;margin-left: 20%;}
#productBox .prolist{display:grid;grid-template-columns: 29% 70%;width: 82%;margin: 76px 0 0 auto;align-items: end;}
#productBox .prolist .titleBox{display:flex;align-items:flex-start;justify-content:space-between;flex-direction:column}
#productBox .prolist .lefttpobox{position:relative;display:flex;margin-bottom:20px;align-items:flex-end;justify-content:space-between}
#productBox .prolist .rightpobox{position:relative;display:flex;align-items:center}
#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.imgbox{width: 100%;}
#productBox ul.imgbox li{margin: 0 10px;}
#productBox ul.imgbox li .info {display:none;}
#productBox ul.imgbox li .img img {position: relative;width: 100%;object-fit: cover;z-index: 1;aspect-ratio: 357/291;box-shadow: 0 0 20px rgb(49 40 40 / 10%);}
#productBox ul.ttbox{margin-top:50px;position: relative;z-index: 2;}
#productBox ul.ttbox li .info h3 {margin-bottom: 10px;height: auto;font-weight: 500;font-size: 18px;color: #1f1f1f;}
#productBox ul.ttbox li .info article {height: 115px;font-weight: 400;font-size: 14px;color: #686565;-webkit-line-clamp: 4;line-height: 2;}
#productBox .more{text-align: end;position: relative;margin-top: 95px;}
#productBox a.fmlink , .fmlinkdiv{position: absolute;bottom: -148px;}
/* aboutBox */
#aboutBox {z-index: 4;padding-top: 0;background: #ffffff;padding-bottom: 0;}
#aboutBox .workframe{display: grid;grid-template-columns: 52% 40%;width: 82%;margin: 0px 0 0 auto;align-items: center;gap: 8%;overflow: visible;max-width: 100vw;}
#aboutBox .photo {position:relative;}
#aboutBox .photo img{width: 100%;object-fit: cover;}
#aboutBox .info .title {margin: 0 5vw 2vw;text-align: left;}
#aboutBox .info{margin-top: 60px;z-index: 6;padding-top: 60px;height: 100%;display: flex;flex-direction: column;justify-content: center;}
#aboutBox .info .txtBox >div {position: relative;z-index: 2;display: flex;flex-direction: column;}
#aboutBox .dwdwtext{background-repeat:repeat-x;background-image:url(/images/37/artmruning.png);animation:bgroop 100s linear infinite;position:absolute;height:10.125rem;width:130vw;top:170px;z-index:5;left:-26vw;background-size:cover}
#aboutBox .info .txtBox .artmbox{line-height:230%;font-size:16px;margin-top:30px;text-align:justify;width: min(585px,100%);margin-left: 2px;}
#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}
#aboutBox .linkJboutom{display:flex;gap:20px;margin-top:20px}
#aboutBox .littletext{position:absolute;display:flex;flex-direction:column;justify-content:flex-end;bottom:0;left:44%;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box}
#aboutBox .littletext .lcctitle{font-size:max(1.6 * (1vw + 1vh) / 2,22px);font-weight:700}
#aboutBox .littletext h1{font-size:max(1.15 * (1vw + 1vh) / 2,14px);font-weight:500}

@keyframes txt_slide {from {transform: translateX(0);}to {transform: translateX(-100%);}}.txt_slide_deco {width: 100%;height: 6.5rem;overflow: hidden;display: flex;pointer-events: none;position: absolute;z-index: 6;top: 130px;}
.txt_slide_deco--line {display: flex;word-break: keep-all;white-space: pre;animation: txt_slide 100s infinite linear 0.5s both;}
.txt_slide_deco--line span{font-size: 6.5rem;line-height: 1.19;font-weight: 800;text-transform: uppercase;color: var(--primary);}
/*fakeNumber*/
.gridline{width: min(950px , 100%);display:grid;grid-template-columns: repeat(3,1fr);position: relative;padding: 10px 0;gap: 20px;margin: 60px 0 10px;justify-items: center;position: absolute;top: 126px;height: 130px;}
.gridline .gdspace{border-left: #a8a8a8 1px solid;width: 100%;}
.gridline .gdspace:last-child{ border-right: #a8a8a8 1px solid;}
#fakeNumber{width: min(950px , 100%);display:grid;grid-template-columns: repeat(3,1fr);position: relative;padding: 10px 0;gap: 20px;margin: 60px 0 10px;justify-items: center;}
#fakeNumber .statisticsItem{height: 121px;overflow:hidden;padding: 3px 0px;display: flex;flex-direction: column;justify-content: flex-end;}
#fakeNumber .statisticsItem .numberBox{font-size:0;font-weight:700;font-family:"Roboto","Noto Sans TC",sans-serif;letter-spacing:0;margin-bottom: 7px;display: flex;align-items: flex-end;}
#fakeNumber .statisticsItem:last-child{}
#fakeNumber .statisticsItem .numberBox .number{font-size: max(4.8 * (1vw + 1vh) / 2, 32px);line-height:0.8;background: #404040;background-clip:text;-webkit-background-clip:text;color:transparent;font-weight: 700;line-height: 100%;}
#fakeNumber .statisticsItem .numberBox .unit{display:inline-block;font-size: max(1* (1vw + 1vh) / 2, 18px);line-height:1;margin-left:5px;background: #151515;background-clip:text;-webkit-background-clip:text;color:transparent}
#fakeNumber .statisticsItem .numberBox .tt{font-size: max(2* (1vw + 1vh) / 2, 24px);vertical-align: bottom;margin-left: 7px;font-weight: 500;line-height: 100%;}
#fakeNumber .statisticsItem .title{letter-spacing:0.5px;font-size: max(1.2 * (1vw + 1vh) / 2, 16px);font-weight: 400;color: #151515;margin: 0;text-align: left;}

/* 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 .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; }

@media screen and (max-width:1680px) {
	#newsBox .bg{padding-left:180px}
	#productBox .more{margin-top: 55px;}
	.txt_slide_deco{top: 91px;}
	#productBox a.fmlink{bottom: -126px;}
	#aboutBox .dwdwtext{height: 8.125rem;top: 122px;}
	#aboutBox .info{margin-top: 169px;padding-bottom: 147px;}
	#aboutBox .photo{height: 100%;}
	#aboutBox .photo img{height: 100%;}
}
@media screen and (max-width:1470px) {
	#aboutBox .workframe{width: 90%;}
	#newsBox:before{width: 4.8vw;}
	.flyJJimg{width: 33vw;left: -9vw;}
	#productBox ul.imgbox{padding-right:0;}
	#productBox .prolist{width: 90%;grid-template-columns: 30% 70%;}
	#newsBox .bg{padding-left: 90px;width: 25vw;padding-top: 180px;}
	#productBox >.info { margin: 0 5%; }
	#productBox ul li .info { padding: 25px 15px 40px; width: calc(85% - 30px); }
	#aboutBox .bg { width: 50%; }
	#productBox .btn a{width: 60px;height: 60px;}
	#productBox .btn{left: -32px;}
	#productBox{padding: 20px 0 120px;}
}
@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; }
}
@media screen and (max-width:1280px) {
	#productBox .prolist{grid-template-columns: 40% 60%;align-items: center;}
	#secabout #youtubeBox { width: 90vw; }
	#bookBox .list ul li .img { margin: 0 20px 0 60px; }
	.flyJJimg{display: none;}
}
@media screen and (max-width:1024px) {
	#wrap .wrapper_lines .center_box{width: 90%;}
	#productBox .more{margin-top: 25px;}
	#productBox ul.imgbox li{margin:20px 10px;}
	#custom_box li .photo img{aspect-ratio: 4.3 / 3;}
	#custom_box ul{grid-template-columns: repeat(2, 1fr);}
	#newsBox .bg{padding-left: 90px;width: 30vw;padding-top: 210px;font-size: 0;}
	#newsBox .info{width:95%;grid-template-columns: 100%;}
	#aboutBox .bg { width: 100%; height: calc(100% - (12vw + 54px)); top: calc(7vw + 54px); z-index: 1; }
	#secabout:before { width: 90vw; }
	#secabout #customBox { width: 70vw; }
	#secabout #youtubeBox .left { position: relative; width: 100%; height: 400px; }
	#aboutBox .dwdwtext{height: 4.125rem;top: -11px;z-index: -1;}
	.txt_slide_deco{height: 3.5rem;top: -28px;}
	.txt_slide_deco--line span{font-size: 3.5rem;}
	#aboutBox .littletext{position: relative;left: auto;width: 100%;background: #f4f4f4;padding: 90px 5%;display: flex;flex-direction: column;align-items: center;}
	#aboutBox .workframe{display: flex;flex-direction: column;width: 100%;}
	#aboutBox .info{width: 90%;margin: 72px auto 0;padding-bottom: 110px;}
	#aboutBox .linkJboutom{display: flex;justify-content: center;}
	#aboutBox .photo , #newsBox:before{display:none;}
	#newsBox{padding: 50px 0;}
	#newsBox .news_list .news_txt .top:after{width: 45%;}
}
@media screen and (max-width:980px) {
	#aboutBox .workframe{display:block;}
	#productBox .prolist{grid-template-columns: 50% 50%;}
	section{padding:10vw 0;}
	#newsBox .bg{width: 40vw;padding-top: 90px;}
	#newsBox .info{display:block;width: 90%;margin: 50px auto 0;}
	#newsBox .info .titleBox{margin: 0 0 30px;}
	#secabout:before { width: 0; }
	#secabout #customBox { width: 90vw; }
	#secabout #youtubeBox .left { height: 45vw; }
	#bookBox { padding-bottom: 5vw; }
	#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; }
	#fakeNumber{margin: 40px 0 10px;}
    #fakeNumber .statisticsItem{border:0;height: 100px;}
}
@media screen and (max-width:640px) {
	#custom_box li .photo img{aspect-ratio: 4 / 3;height: 260px;object-fit: cover;}
	#aboutBox .photo img{height:auto;}
	#aboutBox .photo:after{top:-20px;right: -20px;}
	#aboutBox{}
	#productBox .bg{height:130%;}
	#productBox .more{position: absolute;top: -70px;right: -60px;z-index: 2;}
	#productBox ul.imgbox li .info{position: relative;padding-bottom: 0;}
	#productBox ul.imgbox li .info h3 {margin-bottom: 10px;height: auto;font-weight: 500;font-size: 18px;color: #1f1f1f;}
	#productBox ul.imgbox li .info article {height: 115px;font-weight: 400;font-size: 14px;color: #686565;-webkit-line-clamp: 4;line-height: 2;}
	#productBox ul.imgbox li .img img{box-shadow:none;height: 380px;}
	#productBox ul li >div { margin: 0 ; }
	#productBox .prolist{width: 85%;margin: 0 auto;display: block;position: relative;}
	#productBox ul.imgbox{margin:0;}
	#productBox ul.ttbox{display: none;}
	#productBox .titleBox .btn{display:none;}
	#productBox a.fmlink{bottom: -500px;margin: 0 auto;}
	#productBox .btn{left:auto;width: 110%;display:flex;flex-direction:row;justify-content:space-between}
	#aboutBox .littletext{padding:52px 0}
	.gridline{gap:0;height:100px;top:154px;margin:40px 0 10px}
	#aboutBox .info{margin:67px auto 0;padding-bottom:70px;width:85%}
	#productBox .btn a#product_prev{order:-1}
	#productBox{padding:70px 0 150px}
	#productBox .prolist .rightpobox{display:flex;flex-direction:column;align-items:center;justify-content:center}
	#custom_box li .row h3{font-size:18px;}
	#custom_box li:hover .row article{display:none;}
	#custom_box ul{grid-template-columns: repeat(1, 1fr);}
	#custom_area .titleBox p{width:100%;font-size: 16px;text-align: justify;line-height: 2;}
	#custom_area .cn{font-size:26px;}
	#newsBox .info .news_list .news_txt{padding:30px;}
	#newsBox{padding-bottom: 13vw;}
	#newsBox .info{margin-top: 20px;}
	#newsBox .bg{width: 40vw;padding-top: 60px;top: -65px;}
	#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%; }
	#productBox .prolist .lefttpobox{display: flex;flex-direction: column;align-items: center;}
	#productBox .prolist .titleBox{width: 100%;}

}
@media screen and (max-width:480px){
	#productBox ul.imgbox li .img img{height: 300px;}
	#productBox a.fmlink{bottom: -450px;}
	.gridline{height: 70px;}
	#aboutBox .littletext .lcctitle{font-size: 24px;}
	#aboutBox .littletext h1{font-size: 20px;}
	#newsBox .news_list .news_txt .top:after{width: 65%;}
	#newsBox:after{display: none;}
}