#wrap { z-index: 5; }

/* section */
section {padding: 5vw 0;}
section >* { z-index: 3; }
section .title_box { padding-bottom: 3vw; font-style: italic; font-size: 38px; }
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%); }
section .title {font-size:28px;font-family: "Noto Serif TC", serif;font-weight: 500;letter-spacing: 1px;color: #444;margin-bottom: 5px;}
section .sub_title  {font-family: "Poppins", serif;font-size: 18px;color: #464747;}
section .sub_title:before{content:'';width: 12px;aspect-ratio: 1 / 1;background: var(--complement);border-radius: 50px;box-shadow: 22px 0 var(--primary);margin-right: 35px;display: inline-block;}

/* product_area */
#product_area{padding-bottom: 7vw;}
#product_area .bg_box {background-size:cover}
#product_area .workframe{width: min(90%, 1250px);}
#product_area .boxx{display:grid;grid-template-columns: 25% 75%;align-items: center;margin-top: -160px;position: relative;}
#product_area .tt_box .title {font-family: "Cormorant Garamond", serif;font-size: 75px;color: #fff;word-spacing: 100vw;line-height: 1.1;font-weight: 300;letter-spacing: 3px;}
#product_area .tt_box .sub_title  {font-size: 28px;font-family: "Noto Serif TC", serif;letter-spacing: 2px;color: #fff;}
#product_area .tt_box .sub_title:before, #custom_area .tt_box .sub_title:before{display:none;}
#product_area .btn{display: flex;align-items: center;padding: 0;position: absolute;z-index: 5;left: 30%;bottom: 23%;}
#product_area .btn a{margin-right:15px;border: 1px solid #dbc9bd;width: 50px;aspect-ratio: 1/1;text-align: center;line-height: 47px;border-radius: 50px;}
#product_area .btn a#product_prev svg{transform:scaleX(-1);}
#product_area .btn a svg{fill:#dbc9bd}

/* product_sub_list */
#product_sub_list ul{margin-left: -40px;border-left: 1px solid rgb(255 255 255 / 40%);padding: 10px 0;margin-top: 100px;}
#product_sub_list >div { margin: auto; width: 100%; }
#product_sub_list li {display: block;margin: 30px 0;}
#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;font-family: "Noto Serif TC", serif;font-size: 18px;color: #fff;padding-left: 60px;height: auto;border-left: 1px solid rgb(255 255 255 / 0%);line-height: 1;}
#product_sub_list li:hover h3{font-size:22px;border-color: #fff;}

/* product_list */
#product_list li{display: flex;justify-content: flex-end;align-items: flex-end;padding: 20px;}
#product_list li .clip {width: 65%;margin: 0 0 35px;overflow: unset;}
#product_list li .clip img{aspect-ratio: 2.6/3;object-fit: cover;}
#product_list li .clip:after{content:'';position: absolute;width: 100%;height: 100%;border: 1px solid #ebe7df;left: 18px;top: 18px;z-index: -1;}
#product_list li .info_box {position: absolute;left: 0;bottom: 0px;background: var(--white);padding: 60px 65px;}
#product_list li .info_box a{position:relative;z-index:10}
#product_list li .info_box >div { margin: auto; width: 80%; }
#product_list li .info_box h3 {font-weight: 500;font-size: 30px;font-family: "Noto Serif TC", serif;height: auto;letter-spacing: 2px;}
#product_list li .info_box p {font-size: 18px;font-weight: 500;font-family: "Cormorant Garamond", serif;color: #444444;}
#product_list li .info_box article{margin-bottom: 195px;margin-top: 45px;color: #444444;}


/* about_area */
#about_area {position: relative;background: var(--white);}
#about_area .fixTxt2{position:absolute;color: #31302f;left: 5%;bottom: 22%;text-transform: uppercase;z-index: 1;}
#about_area .sub_title{display:flex;flex-direction: row;align-items: center;}
#about_area .workframe {display: grid;align-items: center;grid-template-columns: 200px 1fr 38%;gap: 90px;position: relative;z-index: 3;}
#about_area .tt_box {writing-mode: vertical-rl;display: flex;flex-direction: column;align-items: flex-start;justify-content: flex-end;}
#about_area .runnn ul{display:grid;grid-template-columns: repeat(3, 1fr);margin-bottom: 40px;}
#about_area .runnn li{border-left:1px solid #ddd;padding-left: 20px;padding-top: 20px;}
#about_area .runnn h2{display:flex;align-items: flex-start;font-weight: 400;font-size: 15px;}
#about_area .runnn h2 b{font-family: "Lato", serif;font-size: 40px;line-height: 1.1;margin-right: 7px;}
#about_area .runnn p{font-size:18px}
#about_area .tt_box h2{word-spacing: 100vw;height: 400px;font-size: 28px;writing-mode: vertical-lr;letter-spacing: 3px;font-weight: 500;margin-right: 10px;font-family: "Noto Serif TC", serif;}
#about_area article p{text-align: justify;line-height: 2;font-weight: 300;}
#about_area .info_box{margin: 40px 0 140px 40px;}
#about_area .img_box{position:relative;display: flex;align-items: center;justify-content: center;height: 100%;border-radius: 500px;overflow: hidden;}
#about_area iframe { position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 5; }
#about_area .img_box .img_cover {border-radius: 50%;aspect-ratio: 1/1;}
#about_area .img_box .fixTxt{position:absolute;bottom: 0;left: -15%;z-index: 2;}
#about_area .img_box img { width: 100%; height: 100%; }
#about_area .track{position:absolute;width:100vw;max-width:100%;overflow:hidden;z-index: 0;bottom: 6rem;white-space:nowrap}
#about_area .track p{font-weight: 400;font-size: max(3.5 * (1vw + 1vh) / 2, 45px);margin:0;text-transform:uppercase;letter-spacing: 9px;line-height:1;will-change:transform;animation: marquee 35s linear infinite;color: var(--complement);font-family: "Cormorant Garamond", serif;}
#about_area .track p img{vertical-align: top;margin: 0 10px;}
@keyframes marquee{from{transform:translateX(0);}to{transform:translateX(-50%);}}

/* custom_area */
#custom_area ul{width: 90%;}
#custom_area .workframe{display: flex;flex-direction: column;align-items: center;position: relative;}
#custom_area .workframe:after{content:url(/images/44/linne.png);position: absolute;top: 65px;z-index: -1;}
#custom_area .title {text-align: center;font-family: "Cormorant Garamond", serif;font-size: max(5.5 * (1vw + 1vh) / 2, 35px);text-transform: uppercase;font-weight: 400;letter-spacing: 5px;}
#custom_area .sub_title {margin-bottom: 65px;text-align: center;font-size: 28px;font-family: "Noto Serif TC", serif;letter-spacing: 2px;}
#custom_area .btn{display: flex;align-items: center;padding: 0;position: absolute;z-index: 5;left: -5%;bottom: 35%;width: 110%;justify-content: space-between;}
#custom_area .btn a{margin-right:15px;width: 75px;aspect-ratio: 1/1;text-align: center;line-height: 73px;border-radius: 50px;background: var(--primary);}
#custom_area .btn a#custom_prev svg{transform:scaleX(-1);}
#custom_area .btn a svg{fill:#dbc9bd}
#custom_area .more_btn{margin-top: 65px;width: min(60%, 430px);border-radius: 50px;}
#custom_area li.slick-current{margin-top:0}
#custom_area li{margin: 80px 20px 0;}
#custom_area li img{aspect-ratio:1/1;object-fit: cover;}

/* news_area */
#news_area .bg_box {width: 40%;background-size: cover;}
#news_area:before{content:'';background-image: url(/images/44/newsBg.jpg);background-repeat: no-repeat;background-position: 50% 50%;background-size: cover;position: absolute;right: 0;width: 60%;height: 100%;top: 0;}
#news_area .workframe{display:grid;grid-template-columns: 85% 15%;width: min(90%, 1050px);margin-left: 30%;}
#news_area .tt_box{order:2;writing-mode: vertical-lr;display: flex;flex-direction: column;justify-content: flex-end;}
#news_area .info_box{display:flex;flex-direction: row-reverse;}
#news_area .info_box >p{writing-mode: vertical-rl;word-spacing: 100vw;color: #444;font-weight: 300;height: 450px;}
#news_area .infobox{width: 90%;margin-right: 50px;}

/* book_area */
#book_area {padding-top:0}
#book_area li{background:#fff;margin: 0 15px;padding: 30px 20px;border-radius: 15px;}
#book_area li .img_box{display:grid;grid-template-columns: 40px 1fr;gap: 20px;align-items: center;}
#book_area li .img_box img{aspect-ratio:1/1;object-fit: cover;border-radius: 50px;}
#book_area li h3 {height: 30px;font-size: 18px;font-weight: 400;}
#book_area li p{color:#f6bb06;margin: 5px 0 15px;}
#book_area li article{-webkit-line-clamp:4;height: 108px;font-weight: 300;color: #444;font-size: 15px;}

/* photo_area */
#photo_area {position:relative;}
#photo_area .workframe{width: min(90%, 1230px);}
#photo_area .paroller{position:absolute;width: 110px;height: 850px;top: 0;background: linear-gradient(180deg, var(--primary), var(--complement));}
#photo_area .tt_box{position:absolute;left: calc(40% + 11px);z-index: 2;width: 41%;}
#photo_area .tt_box .more_btn{position:absolute;right: 20px;top: 20px;}
#photo_area .tt_box article{margin-top:15px;font-size: 17px;color: #464747;letter-spacing: 0.8px;}
#photo_area .listbox .item{margin: 25px 20px 0;animation: moveJJUpDown 2s infinite alternate;}
#photo_area .listbox .item:nth-child(2){margin-top:190px;animation-delay: 0.3s;}
#photo_area .listbox .item:nth-child(3){margin-top:150px;animation-delay: 0.7s;}
#photo_area .listbox img{width: 100%;object-fit: cover;}
#photo_area .listbox h3{color:#444;margin-top: 20px;font-family: "Noto Serif TC", serif;font-size: 24px;font-weight: 500;}
#photo_area .listbox h3 b{font-family: "Cormorant Garamond", serif;font-size: 24px;margin-left: 9px;font-weight: 400;color: #444;}
#photo_area .allwrap{position:absolute;right:0;bottom: 40%;letter-spacing:12px;width:100%;z-index: -1;}
#photo_area .allwrap #canvas-container{position:absolute;bottom: 450px;}

@keyframes moveJJUpDown {
            0% {
                transform: translateY(0);
            }
            100% {
                transform: translateY(-20px);
            }
        }
@media screen and (max-width: 1440px) {
    #custom_area .workframe:after{zoom: 87%;top: 150px;}
    #news_area .workframe{margin-left: 20%;}
}
@media screen and (max-width: 1400px) {
    #photo_area .paroller{display:none;}
}
@media screen and (min-width: 1281px) {
    #about_area .sub_title:before{box-shadow: 0 22px var(--primary);margin-bottom: 35px;margin-right: 0;}
}
@media screen and (max-width: 1280px) {
    #news_area .workframe{margin: 0 auto;}
    #about_area{padding-top: 10vw;}
	#about_area .workframe{grid-template-columns: 1fr 45%;}
    #about_area .tt_box, #about_area .tt_box h2{grid-column: 1 / 3;writing-mode: unset;}
    #about_area .tt_box h2{height:auto;}
    #photo_area .tt_box{left: calc(36% + 14px);width: 57%;}
    #news_area .bg_box{width: 25%;}
    #news_area:before{width: 75%;}
    #about_area .info_box{margin-left:0}
}
@media screen and (max-width: 1024px) {
    #custom_area .workframe:after{display:none;}
    #product_area .boxx{margin-top: 0;}
    #photo_area .listbox .item{margin: 0 10px;}
    #about_area, section{padding: 7vw 0;}
    #product_area .btn{bottom: 30%;left: 33%;}
}
@media screen and (max-width: 980px) {
    #news_area .info_box{display: block;}
    #news_area .info_box >p{height:auto;writing-mode: unset;}
    #news_area .infobox{width:100%;margin: 30px 0 0;}
    #news_area .bg_box{width: 100%;height: 30%;top: unset;bottom: 0;}
    #news_area:before{width: 100%;height: 70%;}
    #news_area .tt_box{order:-1;writing-mode: unset;}
    #news_area .workframe{grid-template-columns:1fr;gap: 40px;}
    #product_list li .info_box{padding: 40px 35px;}
    #product_list li .info_box article{margin-bottom: 140px;}
    #product_area .btn{bottom: 25%;left: 9%;}
    #product_sub_list{display:none;}
    #product_area .boxx{display: block;}
    #photo_area .tt_box .more_btn{right: 0px;}
    #photo_area .listbox .item, #photo_area .listbox .item:nth-child(2), #photo_area .listbox .item:nth-child(3){margin: 0 10px;}
    #photo_area .tt_box{position:relative;left: 0;width: 100%;margin-bottom: 35px;}
    #about_area .fixTxt2{display:none;}
    #about_area .info_box{margin-top:0}
    #about_area .img_box{aspect-ratio: 3/4;}
    #about_area .workframe{gap: 50px;grid-template-columns: 1fr;}
    #about_area .tt_box{grid-column:unset;}
	#about_area #about_info { margin-bottom: 8vw; }
	#custom_area .btn{left: 5%;bottom: unset;top: 90px;width: 90%;}
    #custom_area .btn a{width:55px;line-height: 53px;}
}
@media screen and (min-width: 769px) {
    #news_area .sub_title:before{box-shadow: 0 22px var(--primary);margin-bottom: 35px;margin-right: 0;background: #444444;}
}
@media screen and (max-width: 760px) {
}
@media screen and (max-width: 550px) {
    section .clip img{height:auto;}
    #custom_area .btn{top: 60px;}
    #custom_area ul{width:100%;}
    #custom_area li{margin: 0 ;}
    #about_area, section{padding: 10vw 0;}
    #news_area .bg_box{height: 50%;top: unset;bottom: 0;}
    #news_area:before{height: 50%;}
    #product_list li .info_box article{margin-bottom: 140px;margin-top: 15px;}
    #product_area .btn{bottom: 17%;}
    #product_list li .info_box{position:relative;}
    #product_area .boxx{margin-top:25px;}
    #product_list li{padding:0;display: flex;flex-direction: column;align-items: center;}
    #product_list li .clip:after{display:none;}
    #product_list li .clip{width:100%;margin: 0;}
    #photo_area .tt_box .more_btn{position:relative;margin-bottom: 30px;}
    #about_area .runnn h2 b{font-size:35px;}
    #about_area .runnn ul{gap:20px;}
    #about_area .runnn li{border-left:0;padding-left: 0;}
	#product_sub_list li { margin: 10px; width: 35vw; }
	#product_sub_list li .clip { height: 35vw; }
	#product_list { width: 90vw; }
	#about_area #about_img { width: 80vw; }
	#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; }
}