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 .emtitle {line-height: 120%;text-align: center;font-size: 22px;color: var(--info);font-family: "EB Garamond", serif;font-style: unset;}
section .title {line-height: 1.7;text-transform: uppercase;font-size: 40px;color: var(--info);margin-top: 30px;font-weight: 400;word-spacing: 100vw;}
section .more { margin-top: 40px; text-align: center; }
section .more a {position: relative;display: inline-block;color: #1f1f1f;}
section .more a:hover{padding-left:15px;}
section .more font {color: #636160;font-family: "EB Garamond", serif;font-weight: 100;margin-left: 30px;}
section .more a svg.arrow { position: absolute; width: 20px; right: 20px; top: calc((100% - 11.41px) / 2); }

/* news_area */
#news_area{padding-top:8vw}
#news_area:before{content:url(/images/37/img-n.png);position: absolute;right: 22vw;top: 4vw;}
#news_area .bg_box {position:absolute;width: 100%;height: 100%;top: 0;left: 0;z-index: -1;background-repeat: no-repeat;background-position: left top;background-size: cover;}
#news_area .more {position:absolute;margin: 0;right: 8.5vw;top: 2vw;}
#news_area .workframe{width: min(90%, 1280px);}
#news_area .tit{position:relative;padding-left: 7vw;}
#news_area .tit:before{content:url(/images/37/dott.png);position: absolute;left: 4.5vw;top: -16px;z-index: -1;}
#news_area .title {margin:0}
#news_area ul{margin-top: -50px;}
#news_area li:not(.slick-current){margin-top: 110px;}
#news_area li{margin:0 25px;position: relative;}
#news_area li a{position:absolute;}
#news_area li .img_box{border: 1px solid #636160;padding: 10px;}
#news_area li .img_box img{aspect-ratio: 1/1;object-fit: cover;}
#news_area li .info_box{padding:0 15px;}
#news_area li .info_box h3{font-size:20px;overflow: hidden;height: auto;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;text-align: center;margin: 25px 0 10px;font-weight: 500;}
#news_area li .info_box p{font-size:15px;overflow: hidden;height: auto;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;text-align: center;color: #818180;}

/* aboutBox */
#aboutBox {z-index: 5;}
#aboutBox:after{content:url(/images/37/img-a.png);position: absolute;right: 90px;bottom: 15%;z-index: -6;}
#aboutBox .about_sub_2 {top: 5vw;right: 7.5vw;position: absolute;z-index: -1;animation: aboutImgAnimation 5s ease-in-out infinite;}
#aboutBox #about_img{position: absolute;left: 8.5vw;bottom: -1vw;animation: aboutImgAnimation 10s ease-in-out infinite;}
@keyframes aboutImgAnimation{0%{-webkit-transform:translateY(0);transform:translateY(0);}50%{-webkit-transform:translateY(10px);transform:translateY(10px);}100%{-webkit-transform:translateY(0);transform:translateY(0);}}
#aboutBox .bg { width: 61%; height: 70%; background-attachment: fixed; top: 10%; right: 0; left: auto; opacity: 1; z-index: 3; }
#aboutBox .info {width: 560px;margin-left: 23%;position: relative;}
#aboutBox .info:after{content:url(/images/37/img-sunn.png);position: absolute;top: 12vw;left: -20vw;}
#aboutBox .info:before{content:url(/images/37/img-bird.png);position: absolute;right: -70px;top: 30px;animation-name: fish;animation-direction: alternate;animation-iteration-count: infinite;animation-timing-function: ease-in-out;animation-duration: 2s;}
@keyframes fish{0%{transform-origin:right bottom;transform:rotate(-3deg);}100%{transform-origin:right bottom;transform:rotate(3deg);}}
#aboutBox .info .txtBox {position: relative;padding: 7vw 0 0 11vw;}
#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 p {line-height: 230%;font-size: 16px;color: #484745;}
#aboutBox .info .txtBox .more { margin-top: 80px; text-align: left; }

/* runnBox */
#runnBox{background:#f9f8f6;padding: 11vw 0;display: flex;align-items: center;justify-content: center;}
#runnBox .img{text-align:center;position: relative;z-index: 2;}
#runnBox .track{position:absolute;width:100vw;max-width:100%;overflow:hidden;z-index: 0;white-space:nowrap}
#runnBox .track p{font-weight: 400;font-size: 170px;margin:0;text-transform:uppercase;letter-spacing:2px;line-height:1;will-change:transform;animation: marquee 35s linear infinite;font-family: "Cormorant", serif;color: var(--primary);}
@keyframes marquee{from{transform:translateX(0);}to{transform:translateX(-50%);}}

/* productBox */
#productBox{position:relative;padding: 6vw 0 0;}
#productBox .Txttrack{background-color:#f8f2e6;z-index: 1;}
#productBox.tooolong .workframe:before{width:170%;}
#productBox .workframe{position:relative;border-left: 1px solid #e0e0e0;width: 1560px;margin: 0 0 0 auto;display: flex;flex-direction: row-reverse;justify-content: flex-end;align-items: center;}
#productBox.tooolong:before{height: 70%;}
#productBox .leftBox{position:absolute;left: -40px;bottom: 150px;z-index: 10;animation: aboutImgAnimation 10s ease-in-out infinite;}
#productBox .rightBox{width: calc(100% - 200px);}
#productBox:after{content:'';position:absolute;width: 354px;height: 406px;bottom: 420px;left: -70px;background-image: url(/images/37/img-p-01.png);background-size: contain;background-repeat: no-repeat;z-index: 1;}
#productBox .decoText2{writing-mode: rl;top: -20px;left: 0px;height: auto;font-family: 'Cardo', serif;position: absolute;right: 100px;font-style: oblique;font-size: 10px;}
#productBox .decoText2 p{background-color: #fff;padding: 0px 40px;opacity: 1;font-family: "EB Garamond", serif;font-size: 14px;display: inline-block;width: 260px;}
#productBox .decoText2:after{content:'';position:absolute;width: 400%;height: 1px;top: 20px;left: -900px;z-index: -1;background-color: #e0e0e0;transition: all 1.1s ease-in-out;-webkit-transition: all 1.1s ease-in-out;}
#productBox .left_box{padding: 100px 0px 80px 0px;}
#productBox .left_box .info_item{position:absolute;left:0;top: -10%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}
#productBox .track{top: -330px;right: -330px;left: auto;}
#productBox .left_box .page_title:before{bottom:-80px}
#productBox .left_box .title_box font:last-child{margin-left:0}
#productBox .right_box{position:relative;z-index:6;}
#productBox .right_box .product_nav li{margin-bottom:20px}
#productBox .right_box .product_nav li img{height: 670px;object-fit:cover;border-radius:13em 0 0 0;display:block;width: 1010px;object-fit: cover;-webkit-backface-visibility:hidden;backface-visibility:hidden;}
#productBox .right_box .slick-list{overflow:visible}
#productBox .right_boxli .img{margin-right:10px;display:block}
#productBox .right_boxli .imgimg{width:100%;height:655px;object-position:50% 0}
#productBox .right_box .btns{position:absolute;display:flex;right:-4%;bottom:0px;z-index:20}
#productBox .btnsa.facarrow{width:50px;height:45px;background:rgb(51 51 51);display:inline-block}
#productBox .btnsa.facarrowi{padding:14px 20px;color:#fff}
#productBox .product_forh3{margin-top:9px;height:33px;font-weight:400;line-height:30px;letter-spacing:0.13em;font-size:16px;-webkit-line-clamp:1}
#productBox .product_forh4{letter-spacing:0.5px;font-weight:400;font-size:19px;opacity:0.8;padding:5px 0px 20px}
#productBox .product_forarticle{font-size:15px;font-weight:300;letter-spacing:0.04em;line-height:190%;color:rgb(73,62,48);padding:10px 0px 0px}
#productBox .title_box{margin-bottom:0px}
#productBox .decoText p{color:#86795e;position:relative;font-size: 15px;letter-spacing: 2px;line-height: 1.5;font-family: 'Gallery';font-weight: 600;}
#productBox .decoText{position:absolute;text-decoration:underline;top: -120px;left: 690px;width:460px;border-bottom:1px solid #d4cab5;border-top:1px solid #d4cab5;padding:25px 25px}
.carouselFunctionBox {width: 150px;padding-left: 20px;}
.guideList {-webkit-box-flex: 1;-ms-flex-positive: 1;flex-grow: 1;padding-top: 60px;padding-bottom: 60px;}
.guideList li {position: relative;padding-top: 8px;padding-bottom: 8px;cursor: pointer;letter-spacing: 1px;color: #c1c1c1;}
.guideList li::before {content: "";position: absolute;top: 50%;z-index: 1;width: 8px;height: 8px;margin-top: -4px;border-radius: 50%;background-color: #dfe5ea;left: -24px;}
.guideList li:hover {color: var(--primary);}
.guideList li:hover::before {background-color: var(--primary);}
.guideList li a{position: absolute;width: 100%;height: 100%;top: 0;left: 0;z-index: 10;}
.titleBox {margin-bottom: 20px;}
.titleBox .titleMain {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;margin-bottom: 15px;font-weight: 400;font-size: 16px;color: #636160;letter-spacing: 1px;border-bottom: 1px solid rgba(34, 34, 34, 0.2);padding-bottom: 20px;margin-top: 10px;}
.titleBox .titleEn,.titleBox .titleEmbellish {display: block;line-height: 1;font-size: 50px;line-height: 140%;position: relative;font-family: "EB Garamond", serif;}
.titleBox .titleEn {letter-spacing: 0.4px;font-size: 22px;color: var(--info);padding-bottom: 20px;font-style: oblique;font-style: unset;}
.titleBox .titleEn:before{content: '';top: -48px;left: -44px;position: absolute;background-color: #fff;background-size: contain;width: 60px;height: 60px;border-radius: 50%;z-index: -1;}
.titleBox .titleEmbellish {color: #304564;word-spacing: 100vw;}
#productBox ul li {display:grid;grid-template-columns: 65% 30%;justify-content: space-between;}
#productBox ul li >a{position:absolute;width: 100%;height: 100%;top: 0;left: 0;z-index: 2;}
#productBox ul li .img_show{position: relative;}
#productBox ul li .img_show:before{content:"";width: 100%;aspect-ratio: 4.3/2.7;background-color: #dee4ea;display:block;position:absolute;left: 0;transform: translate(-5%, 7%);z-index: 0;padding-top: 0;z-index: -1;}
#productBox .product_for .txt_box h3{color: var(--primary);font-size: 24px;font-weight:400;height: auto;}
#productBox .product_for .txt_box h4{margin-top: 20px;margin-bottom: 10px;color: #636160;font-size: 16px;font-weight:400;height: auto;-webkit-line-clamp: 3;}
#productBox .product_for .txt_box .more_btn{display: inline-flex;align-items: center;border: 1px solid #333;padding: 13px 30px 13px 50px;margin-left: 15px;}
#productBox .product_for .txt_box .more_btn img{margin-left: -70px;}
#productBox .product_for .txt_box .more_btn b{font-family: "EB Garamond", serif;color: #636160;font-weight: 100;margin-left: 20px;}
#productBox .product_for li:hover .txt_box .more_btn b{margin-left: 30px;}
#productBox .product_for .Spec .info{display:grid;grid-template-columns: repeat(3, 1fr);margin: 30px 0;}
#productBox .product_for .Spec .info .box{display:flex;flex-direction: column;align-items: center;gap: 15px;position: relative;}
#productBox .product_for .Spec .info .box:not(:last-child):after{content:'';position: absolute;width: 1px;height: 16px;background: #e0e0e0;right: 0;bottom: 4px;}
#productBox .nowrap_box.arrow_box {width: auto;right: 80px;display: flex;justify-content: flex-end;bottom: -300px;display: none;}
#productBox .product_for .txt_box >p{margin-bottom: 10px;}
#productBox .arrow_box a {position: relative;border-radius: 50%;border: 1px solid rgb(101 92 76 / 69%);box-sizing: border-box;width: 60px;height: 60px;display: flex;}
#productBox .arrow_box a.next {-webkit-transform: scaleX(-1);transform: scaleX(-1);margin-left: 20px;}
#productBox .arrow_box a:before , #productBox .arrow_box a:after {position: absolute;width: 10px;height: 1px;background: #655c4c;display: block;top: 50%;left: calc((100% - 10px) / 2);-webkit-transform: rotate(45deg);transform: rotate(45deg);-webkit-transform-origin: left;transform-origin: left;content: "";}
#productBox .arrow_box a:after { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); }
#service_area .processList .focus .Txt, #service_area .processList .listItem:nth-child(1) .Txt{width: 90%;}
#productBox .product_for .slick-slide .img_show .img{object-fit:cover;aspect-ratio: 4.3/2.7;}
#productBox .product_for .slick-slide .img_show{padding: 0 0px  30px 30px;}
#productBox .product_for .slick-slide >.info{width: 310px;margin-right: 50px;}
#productBox .titleBox .titleEn:before{display: none;}

/* 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 (min-width:1025px) {
    #news_area .bg_box{background-attachment: fixed;}
}
@media screen and (max-width:1680px) {
    #aboutBox .about_sub_2{right: -0.5vw;}
    #aboutBox:after{right: -70px;}
    #productBox .leftBox{display:none;}
}
@media screen and (max-width:1560px){
	#productBox .right_box .product_nav li img{height:630px;width:760px}
	#productBox .leftBox{left:-130px;width:380px}
	#productBox .left_box{padding: 150px 0px 50px 0px;}
	#productBox{padding: 10vw 0 0;}
	#productBox .workframe{width: 95%;}
    #productBox:after{bottom: 640px;left: -130px;}
}
@media screen and (max-width:1440px) {
    #aboutBox #about_img{left: -2.5vw;}
    #aboutBox .info{margin-left: 13%;}
	#productBox >.info { margin: 0 5%; }
	#productBox ul li >div { margin: 0 10px; }
    #productBox .product_for .Spec .info{padding:0;width: 100%;}
	#productBox ul li .info { padding: 25px 15px 40px; width: calc(85% - 30px); }
	#aboutBox .bg { width: 50%; }
}
@media screen and (max-width:1400px) {
    #aboutBox .info:before{right: 10px;}
}
@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; }
	#productBox ul li:hover .img img , #bookBox .list ul li:hover .img img { -webkit-filter: blur(4px); filter: blur(4px); }
}
@media screen and (max-width:1280px) {
    #aboutBox .info:after{top: 19vw;}
    #aboutBox .info{margin-left: 5%;}
    #aboutBox #about_img{display:none;}
	#secabout #youtubeBox { width: 90vw; }
	#bookBox .list ul li .img { margin: 0 20px 0 60px; }
}
@media screen and (max-width:1024px) {
    #news_area .tit:before{left: 2.5vw;}
    #news_area .more{right: -2.5vw;}
    #productBox .workframe{border:0}
    #productBox .product_for .slick-slide >.info{width:auto;}
    #productBox ul li{grid-template-columns:1fr;gap: 30px;}
    #productBox .rightBox{width:90%;}
    .carouselFunctionBox, #productBox:after{display:none;}
    #aboutBox .about_sub_2{right: -22.5vw;}
	section .more a { padding: 10px 80px 10px 20px; }
	#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) {
    #news_area .bg_box{background-position: 50% 50%;}
    #news_area{padding-bottom: 20vw;}
    #news_area ul{margin-top: 40px;}
    #news_area li, #news_area li:not(.slick-current){margin:0 10px}
    #runnBox .img{width:85%;}
    #aboutBox:after{bottom: 45%;right: 90px;}
    #aboutBox .info .txtBox{padding: 7vw 0;}
	#aboutBox .info:after{display: none;}
    #aboutBox .info{width: 85%;margin: 0 auto;}
    #aboutBox{display:flex;flex-direction: column-reverse;}
    #aboutBox .about_sub_2{position:relative;right: unset;}
    #aboutBox .about_sub_2 .clip{text-align:center;}
	#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) {
    section{padding:8vw 0}
	#bookBox .list ul li .img { margin: 0 0 0 100px; }
	#bookBox .list ul li .img img { height: 55vw; }
}
@media screen and (max-width:640px) {
    #news_area:before{zoom:80%;right: -90px;}
    #news_area{padding: 20vw 0 40vw;}
    #news_area .more{display:none;}
    #productBox .product_for .slick-slide >.info{padding:0;margin: 10px 0 0;}
    #productBox .product_for .slick-slide .img_show{padding: 0 0px 5px 5px;}
    #productBox .workframe{width:90%;margin: 0 auto;display: block;}
    #productBox .rightBox{width:100%;}
	#productBox .left_box{padding: 80px 0px 50px 0px;}
    #runnBox .track p{font-size: 80px;}
    #runnBox{padding: 23vw 0;}
    #aboutBox .about_sub_2{width: 110%;}
    #aboutBox:after{bottom: 34%;right: -60px;}
    section .title{font-size: 22px;}
	#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%; }

}