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 {line-height: 140%;text-transform: uppercase;font-size: 35px;color: #1f1f1f;letter-spacing: 4px;font-weight: 500;position: relative;}
section .title:before{content:'';width: 15px;height: 15px;background: #509930;border-radius: 50px;position: absolute;left: -30px;top: -10px;}
section .entitle{font-weight: 400;font-size: 170px;margin: 0;text-transform: uppercase;letter-spacing: 2px;will-change: transform;font-family: "Cormorant", serif;color: transparent;-webkit-text-stroke: 1px rgb(208 208 208 / 50%);-webkit-text-fill-color: transparent;opacity: .7;line-height: 1;}
section .more { margin-top: 40px; text-align: center; }
section .more a { position: relative; padding: 15px 100px; border: 1px #1f1f1f solid; display: inline-block; color: #1f1f1f; }
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; }
section .more a svg.arrow { position: absolute; width: 20px; right: 20px; top: calc((100% - 11.41px) / 2); }
section .more.white a , section .more.white font { border-color: #fff; color: #fff; }

/* newsBox */
#newsBox {padding: 0 0 3vw;margin-top: -7vw;display: grid;grid-template-columns: 52% 50%;justify-content: space-between;}
#newsBox .bg{position:relative;order: 2;opacity: 1;background-size: cover;border-radius: 0 0 0 250px;background-position: 50%;}
#newsBox .info {padding: 10vw 7vw 5vw;}
#newsBox .info .tit { width: 5em; }
#newsBox .info .tit a { color: #000; }
#newsBox .info .news_list {border-top: 1px solid #ddd;}
#newsBox .info .news_list li {position: relative;display: grid;grid-template-columns: 160px 1fr;padding: 40px 0;border-top: 1px solid #ddd;}
#newsBox .info .news_list li a{position:absolute;width: 100%;height: 100%;left: 0;z-index: 2;top: 0;}
#newsBox .news_list li .date{border-right:1px solid #ddd;margin-right: 30px;display: flex;align-items: center;justify-content: center;}
#newsBox .news_list li .time{color:#505050;display: flex;flex-direction: column;align-items: center;font-family: "Nunito Sans", sans-serif;font-size: 15px;}
#newsBox .news_list li .time b{color:#505050;font-size: 54px;font-family: "Nunito Sans", sans-serif;line-height: 1;}
#newsBox .info .news_list .news_txt {position: relative;}
#newsBox .info .news_list .news_txt span{display:inline-block;background: #f2f2f2;font-size: 15px;padding: 3px 20px;}
#newsBox .info .news_list .news_txt h3{height:auto;font-size: 20px;font-weight: 400;margin: 10px 0;}
#newsBox .info .news_list .news_txt p{-webkit-line-clamp:2;height: 50px;font-size: 15px;color: #343333;}
#newsBox .info .news_list .noBox { position: absolute; width: 2em; text-align: center; top: 50%; right: -6em; -webkit-transform: translateY(-47%); transform: translateY(-47%); }
#newsBox .bttn{display:flex;flex-wrap: wrap;justify-content: space-between;align-items: center;margin-top: 30px;}
#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); }
#newsBox .arrow_btns_box a{width: 45px;height: 45px;background: #509930;border-radius: 50px;display: inline-flex !important;align-items: center;justify-content: center;margin: 0 5px;}
#newsBox .arrow_btns_box a svg{width: 17px;height: 17px;fill: #fff;}
#newsBox .arrow_btns_box a.prev svg{transform:scaleX(-1);}

/* productBox */
#productBox{padding-top:0;padding-bottom: 2vw;}
#productBox .bg { opacity: .2; }
#productBox .info {margin: 0 20vw;}
#productBox .info h2{word-spacing: 100vw;margin-bottom: 20px;}
#productBox .info p{width: 65%;color: #504f4f;font-size: 17px;}
#productBox .info a{position:absolute;right:0;bottom:0}

/* custom_area */
#custom_area{padding-top:0;position: relative;background-image: url(/images/37/processBg.jpg);background-repeat: no-repeat;background-position: 50% 0;background-size: 100%;padding-bottom: 10vw;}
#custom_area .entitle{text-align:center;font-weight: 400;font-size: 210px;margin: 0;text-transform: uppercase;letter-spacing: 2px;will-change: transform;font-family: "Cormorant", serif;color: transparent;-webkit-text-stroke: 1px rgb(208 208 208 / 50%);-webkit-text-fill-color: transparent;opacity: .7;line-height: 1;}
#custom_area .title_box{text-align:center;line-height: 140%;text-transform: uppercase;font-size: 35px;color: #1f1f1f;letter-spacing: 4px;font-weight: 500;margin-top: -110px;margin-bottom: 3vw;}
#custom_area .slick-list{overflow:unset;}
#custom_area li{margin: 30px;}
#custom_area li.slick-current{margin: 0 30px;}
#custom_area li >div{position:relative;}
#custom_area li .clip{display:flex;flex-direction: column;align-items: center;}
#custom_area li.slick-current .clip:after{content:url(/images/37/circle.png);position:absolute;z-index:-1;top: -95px;animation: circle 10s linear infinite;}
@keyframes circle{0%, 100%{transform:rotate(0);}50%{transform:rotate(20deg);}}#custom_area li .clip img.img_cover{aspect-ratio: 2.3 / 3;object-fit: cover;border-radius: 250px;width: 320px;}
#custom_area li.slick-current .clip img.img_cover{aspect-ratio: 3 / 3;width:450px}
#custom_area li .clip img.icon{background:#fff;padding: 20px;position: absolute;bottom: -30px;border-radius: 50px;box-shadow: 0 0 15px rgb(0 0 0 / 10%);}
#custom_area li.slick-current .clip img.icon{display:none;}
#custom_area li .infoo{position:absolute;width: auto;background: #fff;display: none;justify-content: center;align-items: center;aspect-ratio: 3 / 3;bottom: 0;right: 0;flex-direction: column;border-radius: 500px;box-shadow: 0 0 20px rgb(0 0 0 / 20%);}
#custom_area li.slick-current .infoo{position:absolute;width: 260px;background: #fff;display: flex;justify-content: center;align-items: center;aspect-ratio: 3 / 3;bottom: -30px;right: -30px;}
#custom_area li .infoo h3{display:none;font-size: 26px;font-weight: 400;color: #504f4f;}
#custom_area li .infoo article{display:none;color: #504f4f;padding: 0 40px;text-align: center;}
#custom_area li .itemm{display:flex;justify-content: center;align-items: center;width: 80px;height: 80px;border-radius: 100px;box-shadow: 0 0 15px rgb(0 0 0 / 10%);position: absolute;top: 0;left: 0;}
#custom_area li.slick-current .infoo h3, #custom_area li.slick-current .infoo article{display: flex;flex-direction: column;align-items: center;justify-content: center;}
#custom_area li.slick-current .itemm{width:90px;height:90px;background: #509930;}
#custom_area li.slick-current .itemm img{-webkit-filter: contrast(0) brightness(150%);filter: contrast(0) brightness(200%);}
#custom_area .arrow_btns_box {position: absolute;bottom: 45%;width: 100%;display: flex;align-items: center;justify-content: space-evenly;}
#custom_area .arrow_btns_box a{width: 45px;height: 45px;background: #4f9930;border: 1px solid #4f9930;border-radius: 50px;display: inline-flex !important;align-items: center;justify-content: center;margin: 0 5px;}
#custom_area .arrow_btns_box a svg{width: 17px;height: 17px;fill: #fff;}
#custom_area .arrow_btns_box a.prev svg{transform:scaleX(-1);}

/* fakeNumber */
#fakeNumber{margin-top: -15vw;padding: 0;position: relative;z-index: 6;}
#fakeNumber ul{margin: 0 auto;padding: 70px 20px;background: #509930;width: min(90%, 1050px);grid-template-columns: repeat(4, 1fr);display: grid;}
#fakeNumber li{padding: 0 30px;}
#fakeNumber li:not(:last-child){border-right: 1px solid rgb(255 255 255 / 30%);}
#fakeNumber li .eva{display:flex;flex-direction: column;align-items: center;}
#fakeNumber li h2{display: flex;font-family: "Lato", sans-serif;font-size: 50px;color: #fff;align-items: center;}
#fakeNumber li h2 b{font-family: 'Lato', sans-serif;color: #fff;font-size: max(4 * (1vw + 1vh) / 2, 30px);font-weight: 400;}
#fakeNumber li p{color: #fff;font-size: 17px;}

/* aboutBox */
#aboutBox {display: grid;z-index: 5;grid-template-columns: 54% 46%;padding-top: 5vw;justify-content: space-between;padding-bottom: 8vw;}
#aboutBox .photo {border-radius: 0 250px 0 0;overflow: hidden;height: 100%;}
#aboutBox .photo img{height:100%;object-fit:cover;}
#aboutBox .info .entitle {margin-left: -10%;margin-top: 70px;}
#aboutBox .info .title { margin: 0 5vw 2vw; text-align: left; }
#aboutBox .info .txtBox {position: relative;padding: 0vw 10vw 12vw 5vw;}
#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 {line-height: 230%;font-size: 17px;color: #383636;margin-bottom: 70px;text-align: justify;}
#aboutBox .info .txtBox .more { margin-top: 80px; 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 .track{position:absolute;width:100vw;max-width:100%;overflow:hidden;z-index: -1;top: 15px;white-space:nowrap}
#bookBox .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: transparent;-webkit-text-stroke: 1px rgb(208 208 208 / 50%);-webkit-text-fill-color: transparent;}
@keyframes marquee{from{transform:translateX(0);}to{transform:translateX(-50%);}}
#bookBox .topBox {position: relative;margin: 50px auto 3vw;width: 65vw;display: flex;flex-wrap: wrap;justify-content: space-between;align-items: flex-end;}
#bookBox .topBox .arrow_btns_box { text-align: right; }
#bookBox .topBox .arrow_btns_box a{width: 45px;height: 45px;background: #fff;border: 1px solid #ddd;border-radius: 50px;display: inline-flex !important;align-items: center;justify-content: center;margin: 0 5px;}
#bookBox .topBox .arrow_btns_box a svg{width: 17px;height: 17px;}
#bookBox .topBox .arrow_btns_box a.prev svg{transform:scaleX(-1);}
#bookBox .topBox .arrow_btns_box a.next{background: #4f9930;border-color: #4f9930;}
#bookBox .topBox .arrow_btns_box a.next svg{fill:#fff;}
#bookBox .list .slick-list{overflow:unset}
#bookBox .list ul li{position:relative;margin: 10px 20px;}
#bookBox .list ul li .img {overflow: hidden;position: relative;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%;object-fit: cover;z-index: 1;aspect-ratio: 2 / 3;}
#bookBox .list ul li .info {position: absolute;padding: 4% 8%;background: #fff;bottom: 30px;right: -70px;opacity: 0;z-index: 2;}
#bookBox .list ul li:hover .info, #bookBox .list ul li.slick-current .info{opacity:1;right: 30px;}
#bookBox .list ul li .info h3 {font-weight: 400;font-size: 20px;color: #222121;height: auto;letter-spacing: 2px;}
#bookBox .list ul li .info .more { text-align: left; }
#bookBox .list ul li:after{content:'';position: absolute;bottom: 0;left: 0;width: 100%;height: 100%;background: #509930;}
#bookBox .list ul li:hover:after, #bookBox .list ul li.slick-current:after{bottom:20px;left:-20px}

@media screen and (max-width:1440px) {
	#aboutBox .info .entitle{font-size: 140px;margin-left: -20%;}
	#custom_area li.slick-current .clip img.img_cover{width: 500px;}
	#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 (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) {
}
@media screen and (max-width: 1024px) {
	#aboutBox .photo{border-radius:0}
	#newsBox .bg{width:100%;height: 50vh;border-radius: 0;}
	#newsBox{display: flex;margin-top: -3vw;flex-wrap: wrap;padding: 0;}
	#aboutBox{display:block;}
	#custom_area .title_box{margin-bottom: 7vw;}
	#custom_area li.slick-current .infoo{right:20%;}
	#custom_area .arrow_btns_box{justify-content: space-between;width: 90%;left: 5%;}
	#aboutBox .info .entitle{font-size: 90px;margin-left: 50px;}
	#custom_area li .clip img.img_cover{width: 200px;}
	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: 0 8vw 13vw 5vw;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) {
	#fakeNumber li{margin:10px 0;}
	#fakeNumber li:not(:last-child){border:0;}
	#fakeNumber ul{grid-template-columns: repeat(2, 1fr);padding: 20px;}
	#aboutBox .info .txtBox{padding: 0 5vw 13vw 5vw;}
	#custom_area li .clip img.img_cover{aspect-ratio:3 / 3;width:500px;margin: 0;}
	#custom_area .entitle{font-size: 150px;}
	#custom_area .title_box{margin-top: 0;margin-bottom: 12vw;}
	#productBox .info a{position:relative;margin-top: 30px;}
	#productBox .info p{width:100%;line-height: 2;}
	#productBox >.info{margin:0 10%;}
	#bookBox .topBox .arrow_btns_box{display:none;}
	#bookBox .topBox{margin-bottom:8vw}
	#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) {
}
@media screen and (max-width:640px) {
	#aboutBox .photo img{height:auto;}
	#fakeNumber li h2{font-size: 30px;}
	#fakeNumber ul{width:100%;padding: 20px 0;}
	#aboutBox .info{padding:0 5%}
	#aboutBox .info .entitle{font-size: 60px;margin-left: 10px;margin-bottom: 20px;}
	#custom_area{padding-bottom:0;}
	#custom_area li .itemm, #custom_area li.slick-current .itemm{left: 33%;top: -50px;}
	#custom_area li.slick-current .clip:after{zoom: 60%;}
	#custom_area li.slick-current .clip img.img_cover, #custom_area li .clip img.img_cover{width:100%;}
	#custom_area li .clip img.icon{display:none;}
	#custom_area li .infoo, #custom_area li.slick-current .infoo{display: flex;position: relative;bottom: unset;right: unset;margin: -80px auto 0;width: 80%;align-items: center;justify-content: center;}
	#custom_area .entitle{font-size:80px;}
	#bookBox .info{padding-bottom:40px;}
	section .title{font-size:30px;letter-spacing: 0;}
	#bookBox .list ul li:hover:after, #bookBox .list ul li.slick-current:after{left:-10px;bottom:10px;}
	#bookBox .list ul li .info h3{font-size:18px;}
	#bookBox .list ul li{margin:10px;}
	#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); }
	#newsBox .news_list li .time{display:flex;flex-direction: row;align-items: center;}
	#newsBox .info .news_list li{display:block;}
	#newsBox .news_list li .date{display:block;margin: 0;border: 0;}
	#newsBox .news_list li .date b{font-size:18px;margin-right: 10px;}
	#newsBox .info .news_list .news_txt span{position:absolute;top: -44px;right: 0;}
}