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 .titbox .title{font-style:unset;font-family: "Cormorant Garamond", serif;font-size: 60px;text-transform: uppercase;display: block;line-height: 1.7;color: #343332;}
section .more { margin-top: 40px; text-align: center; }
section .more a {border-radius: 50px;position: relative;padding: 15px 40px;background: var(--secondary);display: inline-flex;color: #1f1f1f;align-items: center;justify-content: center;gap: 10px;}
section .more a svg{width: 19px;height: 19px;fill: white;}
section .more font {text-align: center;font-weight: 100;text-transform: uppercase;color: white;font-size: 15px;letter-spacing: 1px;}
section .more a svg.arrow { position: absolute; width: 20px; right: 20px; top: calc((100% - 11.41px) / 2); }

/* newsBox */
#newsBox { margin: -85px auto 0; padding: 0; width: 1280px; z-index: 110; }
#newsBox .info { padding: 30px 60px; display: flex; align-items: center; gap: 5px 3%; }
#newsBox .info .tit { width: 5em; }
#newsBox .info .tit a { color: #000; }
#newsBox .info .news_list { width: 1%; flex: 1 1 auto; }
#newsBox .info .news_list .slick-list { overflow: visible; }
#newsBox .info .news_list li { position: relative; }
#newsBox .info .news_list .news_txt { position: relative; display: flex; align-items: center; gap: .5em 1em; }
#newsBox .info .news_list .news_txt .time { min-width: 6em; }
#newsBox .info .news_list .news_txt .txt { width: 1%; flex: 1 1 auto; }
#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_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); }

/* product_area */
#product_area{padding-top: 2vw;}
#product_area .workframe{width: 1200px;}
#product_area .bg {opacity: 1;width: 75%;}

/* product_list */
#product_list .slick-list{overflow:unset}
#product_list ul, #product_list ul * {transition:unset;-webkit-transition:unset;}
#product_list li{display:flex;flex-wrap: wrap;justify-content: space-between;align-items: center;margin: 0 35px;position: relative;}
#product_list li a{position:absolute;width: 100%;height: 100%;top: 0;left: 0;z-index: 2;}
#product_list li:not(.slick-current) img{filter: saturate(30%);}
#product_list li .clip {width: 100%;height: 370px;margin: 0;overflow: hidden;}
#product_list li .clip img{width:100%;object-fit: cover;}
#product_list li .info_box {width: 40%;opacity: 0;position: absolute;right: 0;}
#product_list li.slick-current{margin-top:-50px}
#product_list li.slick-current .clip{width:50%;overflow: unset;position: relative;}
#product_list li.slick-current .clip:after{content:url(/images/37/img-p-brown.jpg);position: absolute;bottom: -55px;right: -50px;z-index: -1;}
#product_list li.slick-current .info_box {display: block;opacity: 1;}
#product_list li .info_box .linne {display: flex;align-items: center;gap: 25px;font-family: "Cormorant Garamond", serif;color: #aaa9a9;font-size: 14px;margin-left: -55%;}
#product_list li .info_box .linne span{width: min(65%, 500px);background: #adadad;opacity: .3;height: 1px;}
#product_list li .info_box h3 {height: auto;font-size: 28px;color: var(--info);margin-bottom: 35px;font-weight: 500;}
#product_list li .info_box p.txt_num {font-weight: 500;color: #2a2929;font-size: 21px;display: block;letter-spacing: 5px;margin-bottom: 30px;}
#product_list li .info_box .h3tit {font-size: 22px;color: #232323;font-weight: 500;letter-spacing: 4px;margin-top: 50px;}
#product_list li .info_box article{font-size: 15px;color: #515151;margin: 30px 0 0;width: 75%;text-align: justify;overflow: hidden;height: auto;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;font-weight: 300;font-family: "Noto Sans", sans-serif;}
#product_list li .info_box p.btn{background:var(--primary);color:var(--white);font-size:16px;padding:10px 15px 10px 30px;border-radius:50px;margin-right:20px;display:inline-flex;align-items:center}
#product_list li .info_box p.btn b{width: 35px;height: 35px;background: var(--white);border-radius: 50px;display: inline-flex;align-items: center;justify-content: center;margin-left: 20px;}
#product_list li .info_box p.btn b svg{width: 18px;height: 18px;fill: var(--primary);}

/* aboutBox */
#aboutBox {z-index: 5;background-image: url(/images/37/aboutBg.jpg);background-repeat: no-repeat;background-position: 50% 50%;background-size: cover;position: relative;display: grid;grid-template-columns: 46% 39%;justify-content: end;align-items: end;padding-bottom: 0;}
#aboutBox:after{content:'';width: 210px;aspect-ratio: 1/2;position: absolute;top: 0;right: 0;background: var(--primary);}
#aboutBox:before {position: absolute;display: block;top: 0;left: calc(10% + 10px);z-index: 1;content: "";width: 1px;height: calc(100% + 80px);background: #cdcdcd;opacity: .3;}
#aboutBox .bg {width: 100%;aspect-ratio: 1/1;top: 50px;right: 0;left: auto;opacity: 1;z-index: 3;background-repeat: no-repeat;background-position: 50% 50%;background-size: cover;height: auto;position: relative;order: 2;}
#aboutBox .ablock {position:absolute;bottom: -80px;}
#aboutBox #pictureBox{position:absolute;left: 0;bottom: -30%;z-index: 2;}
#aboutBox #pictureBox img{width:252px;aspect-ratio: 2.5 / 3.6;object-fit: cover;}
#aboutBox .titbox  {margin-left: 75px;margin-bottom: 55px;}
#aboutBox .infoo {display:flex;flex-direction: column;align-items: center;margin-bottom: 50px;}
#aboutBox .info .txtBox {position: relative;padding: 75px 95px;background: white;}
#aboutBox .info .txtBox >div {position: relative;z-index: 2;width: 80%;margin: 0 auto;}
#aboutBox .info .txtBox .Boxtwo {z-index:5}
#aboutBox .info .Boxtwo .photo {margin: 0 15px;}
#aboutBox .info .Boxtwo .photo img{aspect-ratio:1 / 1;object-fit: cover;border-radius: 50%;}
#aboutBox .info .Boxtwo .photo:not(.slick-current) img{-webkit-filter:grayscale(1);}
#aboutBox .info .txtBox .btn{padding:0;position: absolute;width: 80%;left: 10%;display: flex;align-items: center;justify-content: space-between;bottom: 18%;}
#aboutBox .info .txtBox .btn svg{width: 13px;height: 13px;}
#aboutBox .info .txtBox .btn #process_prev svg{transform:scaleX(-1);}
#aboutBox .infoo .h3tit {margin-bottom: 20px;font-size: 22px;font-weight: 200;letter-spacing: 7px;color: #353835;}
#aboutBox .infoo p {margin-bottom: 20px;font-family: "Cormorant Garamond", serif;text-transform: uppercase;color: var(--primary);border-bottom: 1px solid #e6e5e2;width: 75%;text-align: center;position: relative;display: flex;justify-content: center;padding-bottom: 20px;}
#aboutBox .infoo p:after{content:'';width: 20px;height: 1px;background: var(--primary);position: absolute;bottom: -1px;}
#aboutBox .infoo em {line-height: 230%;font-size: 15px;color: #353835;font-family: "Quattrocento", serif;font-style: unset;}
#aboutBox .infoo article {line-height: 1.7;color: #6d6d6d;width: min(90%, 280px);margin: 0 auto;text-align: center;}
#aboutBox .infoo .more {margin-top: 30px;text-align: left;}

/* vipoobox */
#vipoobox{background: url(/images/37/Bg.jpg) no-repeat 50% / cover;position: relative;}
#vipoobox .bg{position:absolute;bottom: 0;left: 0;}

/* secabout */
#secabout {padding: 10vw 0 0;z-index: 1;}
#secabout:before, #productBox:before {position: absolute;display: block;top: 0;left: calc(10% + 10px);z-index: 1;content: "";width: 1px;height: 100%;background: #cdcdcd;opacity: .3;}
#secabout:after, #productBox:after {position: absolute;display: block;top: 0;right: 11vw;z-index: 1;content: "";width: 1px;height: 100%;background: #cdcdcd;opacity: .3;}
#secabout .shadow{position:absolute;top: 0;left: 0;box-shadow: none !important;}
#secabout #customBox ul li article { margin: 3vw 0 5vw; text-align: center; line-height: 190%; color: #1f1f1f; }
#secabout #youtubeBox {width: 74vw;margin: 0 11vw 0 auto;display: grid;justify-content: space-between;align-items: center;grid-template-columns: 50% 44%;}
#secabout .fixTxt{position:absolute;right: 11vw;bottom: 28%;pointer-events: none;z-index: 3;}
#secabout #youtubeBox a#playYoutu {position: absolute;display: flex;z-index: 2;bottom: 0;left: 0;margin: 35px auto 0;width: 73px;height: 73px;border-radius: 50%;background-color: rgba(255, 255, 255, 0.1);align-items: center;justify-content: center;display: none;}
#secabout .bttn{display:flex;flex-direction: row;align-items: center;position: absolute;bottom: 40px;left: 40px;gap: 15px;}
#secabout .bttn p{font-family: "Cormorant Garamond", serif;color: white;font-size: 15px;letter-spacing: .5px;font-weight: 200;}
#secabout #youtubeBox a.playBtn{width:100%;height:100%;position:absolute;top:0;left:0;z-index: 20;}
#secabout #youtubeBox a.playBtn .trangle{display:block;width:0;height:0;border-style:solid;border-width:8.5px 0 8.5px 13px;border-color:transparent transparent transparent #fff;position:absolute;top:28px;left:30px}
#secabout #youtubeBox a i{color:white}
#secabout #youtubeBox .left  .videoPlayBox{width:75px;height:75px;border-radius:50%;border:1px solid rgba(255,255,255,0.2);background-color:rgba(255,255,255,0.1);position:relative;box-sizing:content-box;bottom:0}
#secabout #youtubeBox .left .circleBox{width:50%;height:100%;box-sizing:content-box;position:absolute;top:0;overflow:hidden}
#secabout #youtubeBox .left .circleBox.left{left:0}
#secabout #youtubeBox .left .circleBox:before{content:'';width:73px;height:73px;border-top:1px solid #fff;border-left:1px solid #fff;border-bottom:1px solid transparent;border-right:1px solid transparent;border-radius:50%}
#secabout #youtubeBox .left .circleBox.left:before{position:absolute;transform:rotate(-225deg);animation:leftCricle 5s forwards infinite linear}
#secabout #youtubeBox .left .circleBox.right{right:0}
#secabout #youtubeBox .left .circleBox.right:before{position:absolute;transform:rotate(-45deg);animation:rightCricle 5s forwards infinite linear;left:calc(95% - 73px)}
@keyframes leftCricle{0%{transform:rotate(-225deg);}50%{transform:rotate(-225deg);}100%{transform:rotate(-45deg);}}
@keyframes rightCricle{0%{transform:rotate(-45deg)}50%{transform:rotate(135deg)}100%{transform:rotate(135deg)}}
#secabout #youtubeBox .left {position: relative;z-index: 2;}
#secabout #youtubeBox .left iframe { width: 100%; height: 100%; }
#secabout #youtubeBox .right {position: relative;z-index: 1;}
#secabout #youtubeBox .right .tit, #secabout #youtubeBox .right .tit b {font-size: 94px;font-family: "Cormorant Garamond", serif;display: block;text-transform: uppercase;color: rgb(148 120 90 / 30%);font-weight: 200;line-height: 1.2;}
#secabout #youtubeBox .right .tit b{margin-left:150px}
#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; }
#secabout .slogn {width: 75%;background-image: url(/images/37/bobgg.jpg);box-sizing: border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;padding: 125px 270px 100px;margin-top: -60px;position: relative;z-index: -1;}
#secabout .slogn p{font-family: 'ChenYuluoyan-Thin', serif;font-size: 30px;letter-spacing: 13px;}
#secabout .slogn article{text-transform:uppercase;font-size: 14px;font-family: "Cormorant Garamond", serif;padding-right: 50px;word-break: keep-all;width: min(100%, 340px);}

/* bookBox */
#bookBox{padding: 7vw 0;}
#bookBox .bg{opacity:1;z-index: -1;}
#bookBox .immg{position:absolute;left: -12%;bottom: 7%;}
#bookBox >.info{width: 84%;margin: 0 0 0 auto;display: grid;grid-template-columns: 5% 85%;justify-content: space-between;}
#bookBox .topBox {position: relative;display: flex;flex-direction: row-reverse;margin-top: 50px;}
#bookBox .topBox * {writing-mode: vertical-lr }
#bookBox .topBox .title {color: #21201f;font-size: 20px;letter-spacing: 10px;border-left: 1px solid rgb(115 99 87 / 20%);padding-left: 10px;margin-left: 10px;position: relative;}
#bookBox .topBox .title:before{content:'';width: 1px;height: 25px;position: absolute;top: 0;left: -1px;background: var(--primary);}
#bookBox .topBox article{font-family: "Cormorant Garamond", serif;font-size: 14px;text-transform: uppercase;letter-spacing: 6px;text-align: end;}
#bookBox .topBox .more { text-align: right; }
#bookBox .list ul li{position:relative;display: flex;}
#bookBox .list ul li:nth-child(2n){justify-content: flex-end;}
#bookBox .list ul li a{position:absolute;width: 100%;height: 100%;top: 0;left: 0;z-index: 3;}
#bookBox .list ul li .img {overflow: hidden;position: relative;z-index: 1;width: 100%;}
#bookBox .list ul li .img img {position: relative;width: 100%;height: 370px;object-fit: cover;z-index: 1;}
#bookBox .list ul li .info {position: absolute;padding: 50px 75px;width: 35%;height: 100%;z-index: 2;box-sizing: border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;bottom: 0;display: flex;flex-direction: column;justify-content: flex-end;}
#bookBox .list ul li:hover .info{padding-left:100px}
#bookBox .list ul li .info *{color:white;font-family: "Cormorant Garamond", serif;font-size: 14px;text-transform: uppercase;letter-spacing: 1px;}
#bookBox .list ul li .info .h3tit  {height: auto;font-weight: 400;font-size: 21px;color: #fff;letter-spacing: 8px;font-family: var(--font-family);}
#bookBox .list ul li .info .more { text-align: left; }
#bookBox .list ul li .img:after {content:'';background: linear-gradient(275deg, rgb(0 0 0 / 0%), rgb(0 0 0 / 50%));position: absolute;width: 100%;height: 100%;top: 0;left: 0;z-index: 2;}
#bookBox .list ul li:nth-child(2n) .img:after {content:'';background: linear-gradient(90deg, rgb(0 0 0 / 0%), rgb(0 0 0 / 50%));}

@media screen and (max-width:1440px) {
    #bookBox .immg{left: -17%;}
    #secabout #youtubeBox{width: 85vw;margin: 0 auto;}
    #aboutBox .info .Boxtwo .photo{margin: 0 10px;}
	#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 (max-width:1400px) {
    #secabout #youtubeBox .right .tit, #secabout #youtubeBox .right .tit b{font-size: 74px;}
}
@media screen and (max-width:1280px) {
    #bookBox .immg{left: -21%;}
	#secabout #youtubeBox { width: 90vw; }
}
@media screen and (max-width:1024px) {
    #bookBox .list ul li .info{width: 50%;}
    #bookBox .list{width:100%}
    #bookBox .topBox .title{padding:0;border: 0;margin: 0;}
    #bookBox .topBox .title:before{display:none;}
    #bookBox .topBox *{writing-mode:unset;text-align: center;}
    #bookBox .topBox{margin:0;display: flex;flex-direction: column;gap: 10px;}
    #bookBox >.info{width:90%;margin: 0 auto;display: flex;flex-direction: column;align-items: center;gap: 50px;}
    #bookBox .immg{display:none;}
    #product_list li.slick-current, #product_list li{margin:0}
    #product_list .slick-list{overflow:hidden;padding: 0 !important;}
    #product_area .workframe{width: 90%;}
    #secabout .slogn{padding: 125px 170px 100px;}
    #secabout #youtubeBox .right .tit b{margin-left: 80px;}
    #aboutBox .info .txtBox{width: 50%;margin: 0 0 0 auto;}
    #aboutBox{display:block}
	#aboutBox .bg {width: 100%;height: calc(100% - (12vw + 54px));top: calc(7vw + 54px);z-index: 1;display: none;}
}
@media screen and (max-width:980px) {
    #product_list li .info_box .linne{margin:0}
    #product_list li.slick-current, #product_list li{display:flex;flex-direction: column;align-items: flex-start;gap: 40px;}
    #product_list li.slick-current .clip, #product_list li .clip{width: 90%;height: auto;aspect-ratio: 4/3;}
    #product_list li.slick-current .clip img, #product_list li .clip img{aspect-ratio:4/3;object-fit: cover;}
    #product_list li .info_box, #product_list li.slick-current .info_box{display:block;opacity: 1;position: relative;width: 100%;}
    #secabout .slogn{padding: 125px 70px 100px;}
    #aboutBox .ablock{bottom: -40px;}
    #secabout #youtubeBox{display:flex;flex-direction: column;gap: 30px;}
    #aboutBox:after, #aboutBox:before{display:none;}
	#secabout:before { width: 0; }
	#secabout #customBox { width: 90vw; }
	#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:640px) {
    #bookBox .info{padding:0}
    #bookBox{padding-bottom:0}
    #bookBox .list ul li .info{width: 70%;padding: 50px 45px;}
    #bookBox >.info{width:100%;}
    #product_list li .info_box article{margin: 20px 0 0;width: 80%;}
    #product_list li .info_box .h3tit{margin-top: 30px;}
    #product_list li .info_box{margin-top:20px;}
    #product_area .bg{width:100%}
    #product_list li.slick-current .clip:after{zoom:60%;}
    #secabout .slogn{width:100%;padding: 125px 40px 60px;}
    #secabout{padding-top: 20vw;}
    #secabout #youtubeBox .right .tit, #secabout #youtubeBox .right .tit b{font-size: 45px;}
    #aboutBox .ablock{width: 75%;}
    #aboutBox .info .txtBox .btn{bottom: 15%;}
    #aboutBox .info .txtBox{margin:0;width: 100%;box-sizing: border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;padding: 45px 45px;}
    section{padding:12vw 0}
    #aboutBox .titbox{margin: 0 5% 50px;}
    section .titbox .title{font-size: 45px;}
	#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); }
}