#wrap {z-index: 5;}

/* section */
section { padding: 5vw 0 2vw; }
section >* { z-index: 3; }
section .title_box {padding-bottom: 3vw;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%); }

/* indexbox */
.indexbox { position: relative; }
.indexbox h3.boxtit {font-size: 32px;color: var(--primary);word-spacing: 100vw;max-width: 100%;font-weight: 500;}
.indexbox .more { margin-top: 40px; }
.indexbox .more a:before {position: absolute;width: 30px;height: 1px;background: #fff;display: block;right: 0;content: "";}


/* customBox */
#customBox{padding: 2vw 0 2vw;position: relative;}
#customBox h3.boxtit{text-align:center;}
#customBox #pictureBox{position:absolute;right: 7%;top: -250px;z-index: 9;}
#customBox .fixTxt{text-align:center;font-weight: 100;color: #f2f5f7;white-space: nowrap;font-size: max(10 * (1vw + 1vh) / 2, 60px);font-family: "Marcellus", serif;-webkit-text-stroke: .5px #e0e0e0;-webkit-text-fill-color: transparent;line-height: 1;}
#customBox ul {padding: 30px 0 50px;z-index: 2;display: grid;grid-template-columns: repeat(3, 1fr);width: min(90%, 1600px);}
#customBox ul li {position: relative;border: 1px solid #ddd;margin: 25px;padding: 55px 0;}
#customBox ul li:last-child:before{display:none;}
#customBox ul li span{background:#fff;width: 40px;height: 40px;position: absolute;right: -1px;top: -1px;display: flex;align-items: center;justify-content: center;font-family: "Lato", sans-serif;color: #dcc76a;font-size: 20px;font-weight: 600;}
#customBox ul li .photo {text-align: center;}
#customBox ul li .photo img{
    width: 90px;
    aspect-ratio: 1/1;
    object-fit: contain;
}
#customBox ul li .bg iframe { width: 100%; height: 100%; }
#customBox ul li .info {position: relative;z-index: 2;}
#customBox ul li .info h3 {text-align: left;font-size: 22px;max-width: 100%;}
#customBox ul li .info article {margin: 10px auto 0;line-height: 200%;font-weight: 400;color: #aaa;}

/* product_area */
#product_area {padding: 5vw 0;z-index: 2;position: relative;overflow: hidden;}
#product_area:before{content:'';background: #f8f9fb;width: 30%;height: 50%;position: absolute;z-index: -1;top: 0px;}
#product_area:after{content:'';background: #f8f9fb;width: 70%;height: 70%;position: absolute;z-index: -1;bottom: 0;right: 0;background-image: url(/images/44/img-p-bg.png);background-size: contain;background-repeat: no-repeat;background-position: 50% 100%;}
#product_area .fixTxt{position:absolute;font-weight: 700;color: #f2f5f7;white-space: nowrap;right: 14vw;top: 0;z-index: 3;font-size: max(8 * (1vw + 1vh) / 2, 40px);}
#product_area .videobox{position:absolute;top: 0;left: 0;overflow: hidden;z-index: -1;}
#product_area .videobox:after{content:'';background: linear-gradient(180deg, #f5f5f5, rgb(0 0 0 / 0%));width: 100%;height: 100%;position: absolute;top: 0;left: 0;}
#product_area .videobox img{width:100%;}
#product_area .videobox video{height:100%;opacity: .4;}
#product_area .bg { position: absolute; width: 30vw; height: 17vw; background: no-repeat 50% / cover; box-shadow: 0 0 40px 0 rgba(0, 0, 0, .3); top: -7vw; right: 10vw; z-index: 4; }
#product_area .productinfo {position: relative;z-index: 3;width: min(90%, 1600px);margin: 0 auto;}
#product_area .productinfo .boxtit{margin: 0 40px;font-size: 18px;width: 55%;text-align: justify;}
#product_area .productinfo ul { margin-top: 3vw; }
#product_area .productinfo ul li { position: relative; }
#product_area .productinfo ul li a { position: absolute; width: 100%; height: 100%; z-index: 2; }
#product_area .productinfo ul li .info {padding: 50px;}
#product_area .productinfo ul li .img {margin-bottom: 30px;background: no-repeat 50% / cover;position: relative;border-radius: 25px;}
#product_area .productinfo ul li .img img{aspect-ratio: 3 / 4;}
#product_area .productinfo ul li .price font { margin-right: 10px; display: inline-block; font-size: 15px; }
#product_area .productinfo ul li .price font.old { color: #a3a3a3; }
#product_area .productinfo ul li h3 {margin-bottom: 20px;height: auto;font-size: 20px;-webkit-line-clamp: 1;font-weight: 500;}
#product_area .productinfo ul li .img article {height: 70px;font-weight: 400;color: #fff;-webkit-line-clamp: 3;position: absolute;bottom: 0;font-size: 13px;width: 50%;right: 0;background: var(--complement);padding: 15px 20px 0;border-radius: 20px 0 0 0;}
#product_area .productinfo .btn{display:flex;flex-wrap: wrap;align-items: center;margin: 30px 0 0;}
#product_area .productinfo .btn .more{margin-top:0;margin-left: 74%;}
#product_prev{margin-right:10px;}


/* 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: 5vw; z-index: 5; }
#about_area .title_box { padding-bottom: 0; }
#about_area h2 { font-size: 45px; font-style: italic; }
#about_area article { margin-bottom: 30px; line-height: 210%; letter-spacing: 2px; font-weight: 400; }
#about_area .clip {-webkit-clip-path: url(#clip_about);clip-path: url(#clip_about);}
#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{ right: -110px; }

/* custom_area */
#custom_area .parallax_svg.top { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 64' preserveAspectRatio='none'%3E%3Cpath d='M1440 64V16.67c-90 24.285-138.35 6.45-203.49-2.259-59.67-7.998-119.29 10.198-179.14 5.869-78.82-5.09-135.28-41.99-217.6-1.58C797.82 34.596 776 42.875 718.33 38.326c-164.07-15.317-329.57 33.862-490.92 5.169C150.6 31.857 79.33-8.834 0 16.62V64h1440z' fill='%23E2CEBC'/%3E%3C/svg%3E"); }
#custom_area .parallax_svg.bottom { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 64' preserveAspectRatio='none'%3E%3Cpath d='M0 0v47.33c90-24.285 138.35-6.45 203.49 2.259 59.67 7.998 119.29-10.198 179.14-5.869 78.82 5.09 135.28 41.99 217.6 1.58C642.18 29.403 664 21.125 721.67 25.674c164.07 15.317 329.57-33.862 490.92-5.169C1289.4 32.143 1360.67 72.834 1440 47.38V0H0z' fill='%23E2CEBC'/%3E%3C/svg%3E"); }
#customBox ul li{display: grid;grid-template-columns: 35% 1fr;padding: 35px 20px;margin: 25px 30px;align-items: center;gap: 15px;}
#customBox ul li:hover{
    transform: translate(0%, -5%);
}
#custom_area ul li >div { margin: auto; width: 70% }
#custom_area ul li .clip { width: 250px; height: 250px; -webkit-clip-path: url(#clip_custom); clip-path: url(#clip_custom); }
#custom_area ul li h3 { margin: 10px 0 5px; font-size: 20px; }
#customBox ul li:hover h3{
    color: var(--primary);
}
#custom_area ul li article { font-weight: 300; font-size: 14px; overflow: hidden; margin: 10px 0 60px; height: 66px; text-align: center; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }

#book_area{background:#fff;padding:0}
#book_area .list .slick-list li{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;background-image: url(/images/44/img-book-bg.jpg);}
#book_area .topBox{position:absolute;width:50%;left: 150px;top:110px;display:flex;z-index:9}
#book_area .topBox h2{line-height:120%;text-transform:uppercase;font-size:4.5em;color:#edebeb;font-weight:500;display:flex;flex-direction:column}
#book_area .topBox .title{position:absolute}
#book_area .topBox .title b{font-size:0.5em;font-weight:500;letter-spacing:0.25em;}
#book_area .topBox .more{text-align:right}
#book_area .list ul li .img{width:50%;overflow:hidden;position:relative;z-index:1;order:2}
#book_area .list ul li .img img{position:relative;width:100%;height:35vw;object-fit:cover;z-index:1}
#book_area .list ul li .info{position:relative;width:calc(45% - 300px);z-index:2;padding-bottom:85px;padding-left: 150px;}
#book_area .list ul li .info h3 a{height:auto;font-weight:500;font-size: 20px;color:#2d2c2c;margin-bottom:15px}
#book_area .list ul li .info p{color:#605f5f;height:auto;letter-spacing:2px;font-size: 1em;font-weight: 400;}
#book_area .abcallJtop{position:relative;display:flex;left:0;bottom:0;margin-top:60px}
#book_area .list ul li .info .more{text-align:left}
#book_area .slick-dots{bottom:0;width:150px;height:100%;border-right:1px solid #d8d8d8;display:flex !important;align-items:center;justify-content:center;flex-direction:column}
#book_area .slick-dots li{width:15px;height:2px;margin:10px 0}
#book_area .slick-dots li button{width:15px;height:2px;padding:0;background:#666}
#book_area .slick-dots li button:before{display:none}
#book_area .slick-dots li.slick-active button{width:30px}

#Unit_area{position:relative;padding: 5vw 0 5vw;}
#Unit_area .workframe{display:flex;flex-wrap: wrap;justify-content: space-between;width: min(90%, 1600px);}
#Unit_area .areaTxt{width:230px}
#Unit_area .title_box .page_title{font-size: 32px;color: var(--primary);line-height: 100%;word-spacing: 100vw;max-width: 100%;font-weight: 600;margin-top: 10px;}
#Unit_area .UnitList{width:calc(100% - 330px)}
#Unit_area .UnitList .UnitItem{display:flex;flex-direction:row;flex-wrap:wrap}
#Unit_area .UnitList .UnitItem .item{width:calc((100% / 3) - 20px);margin: 10px;}
#Unit_area .UnitList .UnitItem .item .topBox{padding: 0 0 20px;border-bottom:1px solid #e6e6e6;position:relative}
#Unit_area .UnitList .UnitItem .item .topBox .title{display:flex;align-items:center;letter-spacing:1.5px;position:relative;font-weight:600;color:var(--primary);font-size:25px;line-height: 100%;}
#Unit_area .UnitList .UnitItem .item .topBox:after{content:'';position:absolute;left:0;bottom:-2px;width:30px;height:2px;background-image:linear-gradient(120deg,var(--secondary),var(--complement))}
#Unit_area .UnitList .UnitItem .item .topBox .title span::after{position:absolute;content:"";width:1px;height:14px;background-color:#afafaf;top:8px;right:0}
#Unit_area .UnitList .UnitItem .item .topBox .title span{font-family:'Poppins',sans-serif;color:var(--secondary);font-weight:500;padding-right:20px;margin-right:10px;position:relative}
#Unit_area .UnitList .UnitItem .item .topBox .text{font-family:'Poppins',sans-serif;color:var(--primary);font-size:15px}
#Unit_area .UnitList .UnitItem .item .Txt{padding:20px 0px 0px}
#Unit_area .UnitList .UnitItem .item .Txt h4{font-weight:500;color:#000}
#Unit_area .UnitList .UnitItem .item .Txt ul{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-top:10px;flex-direction:column}
#Unit_area .UnitList .UnitItem .item .Txt li{display:flex;align-items:flex-start;justify-content:flex-start;flex-direction:column;margin-bottom:10px}
#Unit_area .UnitList .UnitItem .item .Txt li b{font-size:16px;margin-right:10px;margin-bottom:5px}
#Unit_area .UnitList .UnitItem .item .Txt li font{display:flex;align-items:center;justify-content:space-around}
#Unit_area .UnitList .UnitItem .item .Txt a{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-size: 16px;font-weight:400;letter-spacing:0.02em;color:#1a1a1a;margin-right:10px}
#Unit_area .UnitList .UnitItem .item .Txt a:before{content:'';display:inline-block;margin-right:10px;width:0;height:0;border-style:solid;border-width:3px 0 3px 7px;border-color:transparent transparent transparent #72d36e}

@media screen and (max-width:1680px) {
	#customBox{background:#fff;z-index: 3;}
	#book_area .topBox{left:250px}
	#book_area .list ul li .info{padding-left:250px}
}
@media screen and (max-width: 1470px) {
	#about_area .about_sub_1 , #about_area .about_sub_2 , #about_area .about_sub_3 { width: 20vw; }
	#product_list { width: 500px; margin-left: 30px; }
	#product_list li .clip { height: 590px; }
	#about_area .about_sub_2 { top: -20vw; right: 6vw; }
	#book_area .slick-dots{width:80px;padding-right:20px}
	#book_area .topBox{left:150px}
	#book_area .list ul li .info{padding-left:150px;width:calc(45% - 200px)}
	#book_area .list ul li .img img{height:40vw}
	#book_area .deck01 .bookTitle{font-size:8em}
	#book_area .slick-dots{width:80px;padding-right:20px}
	#book_area .topBox{left:150px;top: 30px;}
	#book_area .list ul li .info{padding-left:150px;width:calc(45% - 200px)}
	#book_area .list ul li .img img{height:40vw}
}
@media screen and (max-width:1280px) {
	#customBox ul{grid-template-columns: repeat(2, 1fr);}
	#customBox{
    padding-top: 5vw;
}
	#book_area .list ul li .img img{height:50vw}
	#book_area .topBox{top:40px;width:30%}
	#book_area{font-size:0;padding-top:0;position:relative}
	#book_area .deck01{top:30px;left:50%;transform:translateX(-50%);position:absolute}
	#book_area .row{position:relative;width:100%}
	#book_area #BookList{padding-bottom:2vh}
	#book_area #BookList ul{padding-bottom:6vh}
	#book_area #BookList ul li{position:relative;width:100%;max-width:1180px;margin:20px}
	#book_area #BookList ul li.slick-slide{position:relative;-moz-transform:scale(0.9);-webkit-transform:scale(0.9);-o-transform:scale(0.8);-ms-transform:scale(0.9);transform:scale(0.9);z-index:-1;margin:0 0px;filter:blur(3px)}
	#book_area #BookList ul li.slick-slide:after{position:absolute;width:100%;height:100%;top:0;left:0;background:rgb(255 255 255 / 78%);content:""}
	#book_area #BookList ul li.slick-center{z-index:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);filter:none}
	#book_area #BookList ul li.slick-center:after{display:none}
	#book_area #BookList ul li h3{position:absolute;width:100%;left:0;bottom:35px}
	#book_area #BookList ul li h3 a{height:70px;color:#fff;font-size:3rem;font-weight:400;font-family:'Noto Serif TC',serif;text-align:center;-webkit-line-clamp:1;opacity:0}
	#book_area .nowrap_box.arrow_box{width:110%;display:flex;flex-direction:row;justify-content:space-around;position:absolute;z-index:20;left:50%;top:40%;transform:translate(-50%,-70%)}
	#book_area .arrow_box a{position:relative;background-color:#ffffff;-webkit-box-shadow:0 8px 30px rgb(0 0 0 / 16%);box-shadow:0 8px 30px rgb(0 0 0 / 16%);box-sizing:border-box;width:90px;height:60px;display:flex}
	#book_area .arrow_box a.next{-webkit-transform:scaleX(-1);transform:scaleX(-1);margin-left:20px}
	#book_area .arrow_box a:before,#book_area .arrow_box a:after{position:absolute;width:15px;height:1px;background:#808080;display:block;top:50%;left:calc((100% - 13px) / 2);-webkit-transform:rotate(45deg);transform:rotate(45deg);-webkit-transform-origin:left;transform-origin:left;content:""}
	#book_area .arrow_box a:after{content:"" -webkit-transform:rotate(-45deg);transform:rotate(-45deg)}
	#product_area .productinfo .btn .more{
    margin-left: 60%;
}
}
@media screen and (max-width: 1180px){
	#book_area .arrow_box a{width:80px;height:45px}
	}
@media screen and (max-width: 1024px) {
	#product_list { margin: auto; }
	#news_area li h3 { height: 30px; -webkit-line-clamp: 1; }
	#book_area .list ul li .img img{height:60vw}
	#book_area .topBox{left:5%}
	#book_area .list ul li .info{padding-left:5%;width:45%}
	#book_area .slick-dots{display:none !important}
	#Unit_area .workframe{display:flex;flex-direction:column}
	#Unit_area .areaTxt{width:auto;margin:0;}
	#Unit_area .UnitList{width:calc(100% - 0px)}
	#Unit_area{padding: 8vw 0 5vw 0;}
	#product_area:before{
    display: none;
}
	#product_area .fixTxt{position:relative;right: 0;}
	#product_area .productinfo .boxtit{
    width: 90%;
    font-size: 16px;
    margin: 0 auto;
}
}
@media screen and (max-width: 980px) {
	section { padding-top: 10vw; }
	#product_list { width: 500px; }
	#product_list li .clip { height: 590px; }
	#product_area:after{
    display: none;
}
	#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; }
	#customBox ul li .info article {}
	#book_area #BookList ul li.slick-slide{margin:0}
	#book_area .nowrap_box.arrow_box{transform:translate(-50%,-120%);width:160%}
	#book_area .arrow_box a{width:45px}
	#book_area #BookList ul{padding-bottom:0vh}
	#book_area{padding-top:20px}
	#book_area{padding:60px 0}
	#book_area .list{width:100%;margin:30px auto 0}
	#book_area .list .slick-list li{padding:10px 30px;}
	#book_area .list ul li .img{order:0;width:100%}
	#book_area .list ul li .info{width:100%;padding:0;margin-top:30px}
	#book_area .list ul li .img img{height:55vw}
	#book_area .topBox,#book_area .topBox .title{position:relative;width:90%;top:0;display:flex;flex-direction:column;align-items:center}
	#book_area .topBox .more{position:absolute;width:100%;text-align:center;bottom:0;left:0}
	#book_area .topBox:before{content:"";position:absolute;width:50px;height:3px;background: var(--primary);bottom:-10px}
	#Unit_area .UnitList .UnitItem .item{width:calc((100% / 2) - 20px)}
}
@media screen and (max-width: 760px) {
	section { padding: 8vw 0 2vw; }
	#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: 680px){
	#customBox{padding:8vw 0}
	#customBox #pictureBox img{width: 70px;}
	#customBox ul li:before{box-shadow: 0 15px #494949, 0 30px #494949, 0 45px #494949;right: calc(50% - 3px);top: unset;bottom: 0;}
	#customBox ul li .photo{}
	#customBox ul li .info{padding: 0;}
	#customBox ul li .info h3{text-align:left;}
	#customBox ul{grid-template-columns: repeat(1, 1fr);padding-bottom: 0px;}
	#customBox h3.boxtit{}
	#book_area .topBox .title b{font-size:20px;margin-top: -25px;}
	#book_area .list ul li .info{margin-top:15px}
	#book_area .list ul li .info p{-webkit-line-clamp:2;font-weight: 500;font-size: 15px;}
	#Unit_area .UnitList .UnitItem .item{width:calc((100% / 1) - 20px)}
	#product_next, #product_prev{display: none !important;}
	#product_area .productinfo .btn{
    margin-top: 0;
    justify-content: center;
}
	#product_area .productinfo .btn .more{
    margin-left: 0;
}
	#product_area .productinfo ul li .info{
    padding: 20px;
}
}
@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_img { width: 80vw; }
	#about_area .about_sub_2 { bottom: 60vw; }
	#news_area li .row { margin: auto; width: 280px; }
	#customBox h3.boxtit{
    font-size: 20px;
}
	#customBox ul li{
    margin: 15px 20px;
}
	#Unit_area .areaTxt{
    margin-bottom: 20px;
}
}
@media screen and (max-width: 480px) {
	#book_area li.row { margin: auto; width: 250px; }
}