#wrap { z-index: 5; }

/* section */
section {padding: 5vw 0;}
section >* { z-index: 3; }
section .tit p{font-size:20px;letter-spacing: 1px;position: relative;}
section .title_box {font-size: 45px;font-family: "Noto Serif Display", serif;}
section .clip { margin: auto; width: 100%; }
section .clip img { height: 100%; }
section .clip iframe { width: 100%; height: 100%; top: 0; left: 0; }
section .clip video { width: auto; height: 100%; top: 50%; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); }

/* product_sub_list */
#product_sub_list >div { margin: auto; width: 100%; }
#product_sub_list li {width: 210px;display: block;}
#product_sub_list li .clip { height: 210px; -webkit-clip-path: url(#clip_sub_product); clip-path: url(#clip_sub_product); }
#product_sub_list li h3 { font-weight: 300; }

/* product_list */
#product_list { width: 600px; }
#product_list li .clip { height: 690px; -webkit-clip-path: url(#clip_product); clip-path: url(#clip_product); }
#product_list li .info_box { width: 367px; height: 228px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 367 228'%3E%3Cpath d='M367.78 126C374 16.84 244.78 11.74 169 1.62c-30.92-4.22-65.18-.49-89.25 18.28-10.07 8.27-21.49 9.51-30.69 14.7-10.8 7-24 26.55-31.88 38.77-20.79 30.78-25.12 73.93 3.58 101.93 42.82 40.82 125.08 59.41 182.75 51.15 18.44-2.61 31-8 48.42-10.85 17.13-1.86 30.89-3.56 48.43-10.85 33.48-12.81 54.43-40.22 67.42-78.75z' fill='%23f4ece5'/%3E%3C/svg%3E") no-repeat center / 100%; bottom: 0; left: 0; }
#product_list li .info_box >div { margin: auto; width: 80%; }
#product_list li .info_box h3 { height: auto; font-size: 20px; }
#product_list li .info_box p { margin-right: 10px; font-weight: 300; }
#product_list li .info_box p:first-letter { margin-right: 2px; font-size: 12px; }

/* about_area */
#about_area {padding-bottom: 9vw;}
#about_area:after {content:'';position: absolute;width: 8%;height: 100%;top: 0;right: 0;background-image: url(/images/44/img-background.jpg);background-repeat:no-repeat;background-position: top right;background-size:cover;}
#about_area .tit{margin-bottom: 40px;position: relative;}
#about_area .tit:after{content:'';position: absolute;right: 50%;width: 16px;aspect-ratio: 1/1;background: var(--complement);top: 0;}
#about_area .pageh1{font-size:22px;word-break: keep-all;line-height: 1.8;font-weight: 500;letter-spacing: 1px;}
#about_area:before{content:'';width: 1px;height: 283px;position: absolute;left: calc(13% - 15px);background: #ddd;top: -9%;z-index: -7;}
#about_area .workframe{display:grid;grid-template-columns: 60% 33%;justify-content: space-between;}
#about_area .fixTxt{font-family: "Noto Serif Display", serif;font-size: 65px;color: #e1e1e1;z-index: 2;text-transform: uppercase;left: 25%;}
#about_area .title_box { padding-bottom: 0; }
#about_area h2 { font-size: 45px; font-style: italic; }
#about_area article p {margin-bottom: 50px;line-height: 210%;letter-spacing: 1px;font-weight: 400;color: #646464;text-align: justify;}
#about_area .clip {width: 78%;margin: 0;}
#about_area .about_sub_1 { width: 350px; top: -10vw; left: -3vw; }
#about_area .about_sub_1 .clip { -webkit-clip-path: url(#clip_about_sub_1); clip-path: url(#clip_about_sub_1); }
#about_area .about_sub_2 {width: 470px;top: -26vw;right: 14vw;}
#about_area .about_sub_2 .clip { -webkit-clip-path: url(#clip_about_sub_2); clip-path: url(#clip_about_sub_2); }
#about_area .about_sub_3 { width: 300px; bottom: -11vw; left: 35vw; }
#about_area .about_sub_3 .clip { -webkit-clip-path: url(#clip_about_sub_3); clip-path: url(#clip_about_sub_3); }
#about_area #about_img{display:flex;justify-content: flex-end;}
#about_area #about_img p{position:absolute;bottom: -60px;right: 0;font-size: 18px;letter-spacing: 2px;width: 60%;}
#about_area .slogn{bottom: -90px;left: -10px;background: var(--primary);color: white;font-family: "Lato", sans-serif;padding: 250px 105px 30px 45px;font-size: 18px;z-index: -1;}

/* custom_area */
#custom_area{border-bottom:1px solid #ddd;padding: 4vw 0;}
#custom_area:before{content:url(/images/44/img-custom.jpg);position: absolute;bottom: -7px;left: 0;zoom: 93.5%;}
#custom_area:after{content:'';position: absolute;width: 50%;height: 359px;top: 0;right: 0;background: var(--primary);z-index: -1;}
#custom_area .workframe{width: min(90%, 1570px);margin: 0 60px 0 auto;}
#custom_area .tit{margin-bottom: 4vw;position: relative;}
#custom_area .tit p:after{content:'';position: absolute;left: -20px;width: 16px;aspect-ratio: 1/1;background: var(--complement);bottom: -20px;}
#custom_area #imglist *{transition:unset;-webkit-transition:unset;}
#custom_area #imglist{overflow: hidden;display: flex;align-items: flex-start;justify-content: space-between;margin-top: -9.5vw;}
#custom_area #imglist .img_box{width:30%;margin-top: 13%;}

#custom_area #imglist .img_nav{width: 62%;}
#custom_area ul li{display:flex;align-items: center;}
#custom_area ul li .box {width: 30%;}
#custom_area ul li .clip {position: absolute;width: 63%;right: 0;}
#custom_area ul li .clip{display:none;}
#custom_area ul li.slick-current .clip{display:block;}
#custom_area #imglist .h3 {margin: 0 0 15px;font-size: 18px;display: flex;align-items: center;border-bottom: 1px solid #d1d1d1;padding-bottom: 15px;font-weight: 500;letter-spacing: 1px;}
#custom_area #imglist .h3 b{font-family: "Lato", sans-serif;color: #5e5e5e;font-size: 18px;width: 35px;border-right: 1px solid #c9c9c9;line-height: 1;margin-right: 15px;}
#custom_area #imglist .box.slick-current article {}
#custom_area #imglist img{aspect-ratio:4/3;height: 575px;width: 985px;}
#custom_area .btn{padding:0;position: absolute;left: 11%;bottom: 5%;display: flex;flex-direction: column;align-items: center;gap: 15px;}
#custom_area .btn a{width: 45px;background: var(--triadic1);aspect-ratio: 1/1;display: flex !important;align-items: center;justify-content: center;border-radius: 50px;}
#custom_area .btn a svg{transform: rotate(90deg);fill: white;width: 15px;height: 15px;}
#custom_area .btn a#product_prev svg{transform: rotate(-90deg);}

#custom_area #imglist .img_box.slick-vertical .slick-list{height:320px !important;overflow:hidden}
#custom_area #imglist .img_box .slick-slide article{opacity:0;overflow:hidden;transition:max-height .25s ease,opacity .25s ease;font-weight:400;font-size:15px;margin:10px 0 10px 50px;-webkit-line-clamp:3;color:#3a3a3a;line-height:2.2;/* display: none; */}
#custom_area #imglist .img_box .slick-current article{opacity:1;height: 60px;}

/* 基本：先把所有 article 收合 */
#imglist .img_box .slick-slide article {
  height: 0;                 /* 固定收合 */
  overflow: hidden;          /* 防止內容外溢 */
  padding-top: 0;            /* 收合時不要有內距 */
  padding-bottom: 0;
  opacity: 0;                /* 收合時透明 */
  transition:
    height .25s ease,
    opacity .2s ease,
    padding .2s ease;        /* 展開/收合更順 */
  will-change: height, opacity;
}

/* 當前第一個（你的程式會加上 .is-tall）→ 固定展開 120px */
#imglist .img_box .slick-slide.is-tall article {
  height: 120px;             /* 固定高度 120 */
  opacity: 1;
  padding-top: 8px;          /* 需要的話加一點內距 */
  padding-bottom: 8px;
}


/* news_area */
#news_area li .img_box , #book_area li .img_box { border-radius: 15px; background-color: #f9f9f9; }
#news_area li .info_box { margin: 10px 15px 0; }
#news_area li .time { width: 65px; font-weight: 400; font-size: 13px; }
#news_area li .more_btn { margin-left: 10px; padding: 2px 15px; max-width: calc(100% - 105px); height: 22px; font-weight: 100; font-size: 13px; z-index: 6; }
#news_area li h3 { margin-top: 10px; height: 60px; line-height: 150%; font-size: 20px; -webkit-line-clamp: 2; }

/* book_area */
#book_area .workframe{width: min(90%, 1340px);}
#book_area .bg_box{height: 75%;}
#book_area .tit{margin-bottom: 40px;display: flex;flex-direction: column;align-items: center;}
#book_area .tit span{width: 15px;display: block;aspect-ratio: 1/1;background: #404040;transform: rotate(45deg);margin-bottom: 5px;}
#book_area li {margin:0 30px;border-bottom: 1px solid #dbdbdb;padding-bottom: 30px;}
#book_area li img{aspect-ratio:3/4;object-fit: cover;}
#book_area li .imgbox b{position:absolute;font-family: "Lato", sans-serif;font-size: 14px;text-transform: uppercase;color: white;font-weight: 700;background: var(--primary);bottom: -55px;left: -20px;padding: 170px 110px 15px 20px;z-index: -1;}
#book_area li:hover .imgbox b{background:var(--secondary)}
#book_area li .h3 {height: 68px;font-size: 20px;-webkit-line-clamp: 2;color: #686868;margin: 15px 0 auto auto;width: 55%;}
#book_area .catalogList{width:100%;}
#book_area .controlBox{display:flex;gap: 20px;align-items: center;justify-content: center;margin-bottom: 50px;}
#book_area .controlBox .arrow {font-size: 15px;font-weight: 500;cursor: pointer;font-family: "Syne", sans-serif;}
#book_area .controlBox span{width:80px;height: 1px;background: #c3c3c3;}

/* photo_area */
#photo_area{background-image: url(/images/44/otherBg.jpg);background-repeat:no-repeat;background-position:50% 50%;background-size:cover;padding: 0;}
#photo_area:after{content:'';position: absolute;width: 100%;height: 100%;background: #000;top: 0;opacity: .5;}
#photo_area *{color:white}
#photo_area .workframe{width: min(90%, 1600px);display: grid;grid-template-columns: repeat(3, 1fr);position: relative;}
#photo_area .item {position: relative;padding: 10vw 50px;border-left: 1px solid rgb(255 255 255 / 20%);display: flex;flex-direction: column;justify-content: center;}
#photo_area .item:after{content:"";position: absolute;left: 0;top: 0;width: 0;height: 100%;background: #000;opacity: .5;z-index: -1;}
#photo_area .item:hover:after{width:100%}
#photo_area .item:last-child{border-right: 1px solid rgb(255 255 255 / 20%);}
#photo_area .item .en{font-family: "Noto Serif Display", serif;font-size: 45px;}
#photo_area .item p{font-size:22px;letter-spacing: 2px;}
#photo_area .item a{position:absolute;width: 100%;height: 100%;top: 0;left: 0;z-index: 2;}
#photo_area .item span {right: 50px;width: 50px;aspect-ratio: 1/1;background: white;border-radius: 50px;display: flex;align-items: center;justify-content: center;bottom: 10vw;}

@media screen and (max-width: 1680px) {
    #about_area:before{left: calc(13% - 10px);}
    #custom_area .workframe{width:80%}
    #about_area:after{width: 3%;}
}
@media screen and (max-width: 1440px) {
    #custom_area:before{zoom: 90%;}
}
@media screen and (max-width: 1400px) {
    #custom_area .workframe{width: 90%;margin: 0 auto;}
    #custom_area:before{display: none;}
}
@media screen and (max-width: 1280px) {
    #about_area #about_img p{width: 50%;}
}
@media screen and (max-width: 1024px) {
    #custom_area .workframe{margin:0 auto;}
    #photo_area .item .en{font-size: 35px;}
    #photo_area .workframe{width:100%}
    #about_area{padding-bottom: 15vw;}
    #about_area #about_img p{width: 40%;}
	#product_list { margin: auto; }
	#news_area li h3 { height: 30px; -webkit-line-clamp: 1; }
}
@media screen and (max-width: 980px) {
    #custom_area .tit{margin: 0 auto 40px;width: 90%;}
    #photo_area .item{border-bottom: 1px solid rgb(255 255 255 / 20%);border-right: 0;}
    #photo_area .workframe{grid-template-columns:1fr}
    #about_area:after{width:100%;z-index: -1;}
    #about_area #about_img{order:2}
    #about_area .workframe{grid-template-columns:1fr;gap: 80px;}
    #about_area:before, #about_area .fixTxt, #book_area .bg_box{display:none;}
    #custom_area{border:0}
    #custom_area .btn{bottom: auto;top: 3%;left: auto;right: 15%;}
    #custom_area #imglist img{width:100%;height: auto;}
    #custom_area #imglist{display:block;}
    #custom_area #imglist .img_box{width: 100%;margin-bottom: 40px;}
    #custom_area #imglist .img_nav{width: 100%;}
    #custom_area:after{display:none;}
	#product_list { width: 500px; }
	#product_list li .clip { height: 590px; }
	#about_area #about_info { margin-bottom: 8vw; }
	#about_area .about_sub_2 { top: auto; bottom: 35vw; width: 35vw; }
	#about_area .about_sub_3 { width: 29vw; left: 10vw; }
}
@media screen and (max-width: 760px) {
	section .clip img{height: auto;}
    #about_area .workframe{display:flex;flex-direction: column;}
    #book_area li .h3{font-size:18px;height: 61px;}
    #book_area li .imgbox b{padding: 150px 70px 15px 20px;}
    #about_area #about_img p{font-size: 16px;}
    #about_area{padding-bottom: 140px;}
    #about_area .slogn{font-size: 14px;padding: 190px 75px 30px 25px;margin-left: -15px;}
    #about_area .clip{width:100%}
    #custom_area{padding-bottom:14vw}
    #custom_area #imglist .img_box{width: 85%;margin: 50px auto 40px;}
	section { padding:12vw 0 ; }
	#product_sub_list>div { margin: 10px auto 50px; }
	#product_sub_list li { width: 150px; }
	#product_sub_list li .clip { height: 150px; }
	#product_list { width: 70vw; }
	#product_list li .clip { height: 80vw; }
	#product_list li .info_box { width: 45vw; height: 30vw; }
}
@media screen and (max-width: 550px) {
	#product_sub_list li { margin: 10px; width: 35vw; }
	#product_sub_list li .clip { height: 35vw; }
	#product_list { width: 90vw; }
	#product_list li .clip { height: 100vw; }
	#product_list li .info_box { width: 55vw; height: 40vw; }
	#about_area .about_sub_2 { bottom: 60vw; }
	#news_area li .row { margin: auto; width: 280px; }
}
@media screen and (max-width: 480px) {
	#book_area li.row { margin: auto; width: 250px; }
}