#wrap { z-index: 5; }

/* section */
section {padding: 3vw 0;}
section >* { z-index: 3; }
section .title_box {padding-bottom: 3vw;font-size: 32px;font-family: 'Noto Serif TC', serif;color: #262726;letter-spacing: 1px;}
section .title_box b{display:block;text-align: center;font-family: 'Noto Serif TC', serif;font-size: 18px;}
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%; }

/* product_sub_list */
#product_sub_list >div { margin: auto; width: 100%; }
#product_sub_list li { width: 210px; }
#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_area */
#product_area >p {text-align: center;color: #666666;font-size: 20px;margin-bottom: 50px;}
#product_area >p.mo {display: none;}
#product_area .title_box{padding-bottom: 10px;}
#product_area .title_box:before{content:url(/images/44/img-p-leaf.png);position: absolute;left: 34%;bottom: -50px;animation-name: leaf;animation-direction: alternate;animation-iteration-count: infinite;animation-timing-function: ease-in-out;animation-duration: 2s;}
#product_area .title_box:after{content:url(/images/44/img-p-leaf-r.png);position: absolute;right: 30%;top: 45px;animation-name: leaf;animation-direction: alternate;animation-iteration-count: infinite;animation-timing-function: ease-in-out;animation-duration: 3s;}
@keyframes leaf{0%{bottom: -50px;transform-origin:right bottom;transform:rotate(-3deg)}100%{bottom: -30px;transform-origin:right bottom;transform:rotate(5deg)}}
#product_area .workframe{width: 95%;}
#product_list li {margin:0 20px;}
#product_list li h3{writing-mode: vertical-lr;height: auto;position: absolute;right: 0;font-size: 20px;color: #2e2e2d;font-weight: 400;letter-spacing: 2px;display: flex;flex-direction: row;align-items: center;}
#product_list li h3:before{content:'';width: 1px;height: 30px;background: #dddddd;display: block;margin-bottom: 10px;}
#product_list li.slick-current h3:before{background: var(--secondary);}
#product_list li .clip img{width: 90%;height: 470px;object-fit: cover;}
#product_list li .info_box{width: 70%;background: var(--white);margin-top: -30px;position: relative;padding: 20px;}
#product_list li .info_box p{color:#666666;overflow: hidden;height: auto;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;}

/* about_area */
#about_area, #photo_area {background-image: url(/images/44/bg.jpg);background-position: 50% 50%;background-repeat: no-repeat;background-size: cover;}
#about_area .title_box { padding-bottom: 0; }
#about_area .clip img {width: auto;margin: 0 auto;height: auto;}
#about_area .infoo{width: 960px;margin: 135px auto 0;}
#about_area .infoo h3{font-size: 70px;font-family: 'Noto Serif TC', serif;color: #383838;}
#about_area .infoo b{vertical-align: baseline;margin-left: 6px;font-size: 25px;color: #383838;}
#about_area .infoo p{color: #666666;font-size: 18px;letter-spacing: 3px;}

/* fakeNumber */
#fakeNumber ul{display:flex;flex-wrap: wrap;justify-content: center;margin: 70px 0;}
#fakeNumber li{padding: 0 80px;}
#fakeNumber li:nth-child(2){border-left: 1px solid #c6c6c6;border-right: 1px solid #c6c6c6;}
#fakeNumber ul .eva{display:flex;flex-direction: column;align-items: center;}
#fakeNumber ul .eva p{font-size: 20px;color: #666666;}
#fakeNumber ul .eva p b{color: #666666;font-size: 40px;font-family: 'Noto Serif TC', serif;font-weight: bold;vertical-align: baseline;margin-right: 5px;}
#fakeNumber ul .eva h2{font-weight: 400;color: #666666;letter-spacing: 3px;}

/* custom_area */
#custom_area #imglist{position:relative;}
#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; }
#custom_area ul li article { font-weight: 300; font-size: 14px; }
#custom_area .img_box {position:absolute;bottom: 180px;width: 70%;left: 15%;}
#custom_area .img_box:after{content:'';height: 2px;width: 100%;position: absolute;left: 0;bottom: 7px;background: #d2d2d1;z-index: -1;}
#custom_area .img_box h3{text-align: center;color: #5e5b5b;font-size: 12px;font-family: 'Open Sans', sans-serif;}
#custom_area .img_box h3 span{width: 12px;height: 12px;display: block;border: 2px solid #d2d2d1;border-radius: 50px;margin: 5px auto 0;background: whitesmoke;}
#custom_area .img_box h3.slick-current span{background: var(--secondary);border-color: var(--secondary);}
#custom_area .slick-prev{width:35px;height: 35px;top: 30px;left: -55px;}
#custom_area .slick-prev:before{content:'';width: 35px;height: 35px;display: block;border: 2px solid #d2d2d1;border-radius: 50px;}
#custom_area .slick-next{width:35px;height: 35px;top: 30px;right: -50px;}
#custom_area .slick-next:before{content:'';width: 35px;height: 35px;display: block;border: 2px solid #d2d2d1;border-radius: 50px;}

/* news_area */
#news_area{padding: 5vw 0;}
#news_area .bg_box {background-repeat: no-repeat;background-position: 50% 50%;background-size: cover;}
#news_area .title_box{color:#fff;text-align: left;padding-left: 40px;position: relative;}
#news_area .title_box:before{content:url(/images/44/img-n-leaf.png);position: absolute;left: -40px;top: 50px;animation-name: fish;animation-direction: alternate;animation-iteration-count: infinite;animation-timing-function: ease-in-out;animation-duration: 2s;}
#news_area .title_box *{color:#fff;text-align: left;}
#news_area .workframe{width: var(--width-xl);}
#news_area ul{width: 55%;}
#news_area li:after {content:'';width: 100%;height: 5px;display: block;margin: 30px 0;background: linear-gradient(to right, #b4b4b4, #b4b4b4 2px, transparent 2px, transparent 4px);background-repeat: repeat-x;background-size: 4px 1px;background-position: 50% 50%;border-right: 1px solid #b4b4b4;border-left: 1px solid #b4b4b4;opacity: .5;}
#news_area li:last-child:after{display:none;}
#news_area li .info_box {display: flex;flex-wrap: wrap;align-items: center;}
#news_area li .time {width: 65px;font-weight: 400;font-size: 14px;font-family: 'Open Sans', sans-serif;color: var(--white);border-right: 1px solid #737976;margin-right: 35px;}
#news_area li h3 {height: auto;line-height: 150%;font-size: 18px;-webkit-line-clamp: 1;color: var(--white);font-weight: 400;width: calc(100% - 150px);}
#news_area li:hover h3{width:calc(100% - 160px)}
#news_area li .info_box b{width: 45px;height: 45px;display: flex;align-items: center;justify-content: center;background: var(--primary);border-radius: 50px;}
#news_area li .info_box b svg{width:12px;height: 12px;}

/* book_area */
#book_area{padding: 20px 0;}
#book_area ul{display:flex;flex-wrap: wrap;justify-content: space-between;width: 90%;margin: 0 auto;}
#book_area li {width: calc((100%/3) - 40px);margin: 20px;}
#book_area li .row{margin:0;}
#book_area li .img_box:after{content:'';position: absolute;width: 100%;height: 100%;background: linear-gradient(90deg,rgb(0 0 0 / 0%), rgb(0 0 0 / 70%));top: 0;left: 0;}
#book_area li h3 {writing-mode: vertical-lr;height: auto;position: absolute;right: 40px;top: 0;font-size: 25px;color: #fff;font-weight: 700;display: flex;flex-direction: row;align-items: center;font-family: 'Noto Serif TC', serif;letter-spacing: 10px;}
#book_area li h3:before{content:'';width: 1px;height: 15px;background: #dddddd;display: block;margin-bottom: 10px;}
#book_area li p {writing-mode: vertical-lr;height: auto;position: absolute;right: 80px;top: 50px;font-size: 19px;color: #fff;font-weight: 300;display: flex;flex-direction: row;align-items: center;}

/* photo_area */
#photo_area .title_box:before{content:url(/images/44/img-c-leaf.png);position: absolute;left: 38%;bottom: 60px;animation-name: leaf2;animation-direction: alternate;animation-iteration-count: infinite;animation-timing-function: ease-in-out;animation-duration: 2s;}
#photo_area .title_box:after{content:url(/images/44/img-c-leaf-r.png);position: absolute;right: 38%;bottom: 60px;animation-name: leaf2;animation-direction: alternate;animation-iteration-count: infinite;animation-timing-function: ease-in-out;animation-duration: 2s;}
@keyframes leaf2{0%{bottom: 60px;}100%{bottom: 40px;}}
#photo_area .fivebox{display:flex;flex-wrap: wrap;justify-content: center;width: 80%;margin: 0 auto;}
#photo_area .item{width: calc((100%/5) - 40px);position: relative;padding-bottom: 20px;}
#photo_area .item:hover:before{content:url(/images/44/img-br-leaf.png);position: absolute;bottom: -50px;right: -30px;z-index: -2;animation-name: leaf;animation-direction: alternate;animation-iteration-count: infinite;animation-timing-function: ease-in-out;animation-duration: 2s;}
#photo_area .item:hover:after{content:'';width: 100%;height: 70%;position: absolute;bottom: 0;left: 0;background: var(--white);z-index: -1;border-radius: 0 0 75px 0;}
#photo_area .item .photo{width:265px;height: 265px;background: var(--white);border-radius: 50%;display: flex;align-items: center;justify-content: center;position: relative;margin-bottom: 30px;}
#photo_area .item:hover .photo{background: var(--primary);}
#photo_area .item:hover .photo img{-webkit-filter: contrast(0) brightness(150%);filter: contrast(0) brightness(200%);}
#photo_area .item .photo:before{content:'';width: 1px;height: 40px;background: #d0d0d0;position: absolute;top: -20px;}
#photo_area .item .photo:after{content:'';width: 1px;height: 40px;background: #d0d0d0;position: absolute;bottom: -20px;}
#photo_area .item h3{font-size: 20px;letter-spacing: 2px;text-align: center;color: #2e2e2d;margin-bottom: 10px;}
#photo_area .item:hover h3{color: var(--primary);}
#photo_area .item p{color: #666666;font-size: 15px;text-align: center;word-break: keep-all;padding: 0 10px;line-height: 200%;}

@media screen and (min-width: 1025px){
	#news_area .bg_box{background-attachment: fixed;}
}
@media screen and (max-width: 1680px){
	#product_area .title_box:before{left: 32%;}
	#photo_area .item .photo{width: 225px;height: 225px;}
}
@media screen and (max-width: 1440px){
	#book_area ul{width: 98%;}
	#photo_area .title_box:before{left:35%;}
	#photo_area .title_box:after{right:35%;}
	#product_area .title_box:before{left: 29%;}
	#product_area .title_box:after{right: 25%;}
	#photo_area .fivebox{width:90%;}
	#photo_area .item .photo{width: 215px;height: 215px;}
}
@media screen and (max-width: 1366px){
	#photo_area .item .photo{width: 200px;height: 200px;}
	#news_area .workframe{width:90%;}
}
@media screen and (max-width: 1280px){
	#custom_area .img_box{width: 90%;left: 5%;}
	#product_area .title_box:before{left: 26%;}
	#product_area .title_box:after{right: 21%;}
	#photo_area .item .photo{width: 180px;height: 180px;}
	#photo_area .item .photo img{width: 70px;}
	#book_area li{margin:10px;width: calc((100%/3) - 20px);}
	#book_area li p{font-size: 16px;}
}
@media screen and (max-width: 1024px){
	#photo_area .item .photo img{width: 100px;}
	#photo_area .item .photo{width: 265px;height: 265px;}
	section, #news_area{padding:50px 0;}
	#photo_area .title_box:before{left: 29%;}
	#photo_area .title_box:after{right: 29%;}
	#product_area .title_box:before{left: 21%;}
	#product_area .title_box:after{right: 14%;}
	#product_list { margin: auto; }
	#photo_area .item{width: calc((100%/3) - 40px);margin: 20px;}
}
@media screen and (max-width: 980px){
	#product_list li .clip img{height: 390px;}
	#book_area li{width: calc((100%/1) - 20px);}
	#news_area ul{width:75%;}
	#photo_area .item .photo img{width: 70px;}
	#photo_area .item .photo{width: 188px;height: 188px;}
	#photo_area .title_box:before{left: 23%;}
	#photo_area .title_box:after{right: 23%;}
	#product_area .title_box:before{left: 11%;}
	#product_area .title_box:after{right: 4%;}
	#fakeNumber li{padding: 0 50px;}
	#about_area #about_info {margin: 0;}
	#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){
	#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; }
}
@media screen and (max-width: 550px){
	#product_list li .clip img{height: 340px;}
	#news_area li .info_box b{position:absolute;right: 0;}
	#news_area li h3 {width: 90%;margin-top: 10px;}
	#news_area ul{width: 100%;}
	#photo_area .item:hover:after{width: 85%;height: 100%;left: unset;right: 0;border-radius: 0 35px 0 0;bottom: 10px;}
	#photo_area .item .photo{width: 120px;height: 120px;position: absolute;margin: 0;}
	#photo_area .item h3, #photo_area .item p{text-align:left;padding-left: 140px;}
	#photo_area .item{width: 100%;margin: 20px 0;display: flex;flex-direction: column;justify-content: center;}
	#photo_area .item .photo:before, #photo_area .item .photo:after{display:none;}
	@keyframes leaf2{0%{bottom: 10px;}100%{bottom: 40px;}}
	#photo_area .title_box:before{left: 3%;}
	#photo_area .title_box:after{right: 3%;}
	#product_area .title_box:before{left: 1%;}
	#product_area .title_box:after{right: 0;top: -70px;}
	@keyframes leaf{0%{bottom: -100px;transform-origin:right bottom;transform:rotate(-3deg)}100%{bottom: -80px;transform-origin:right bottom;transform:rotate(5deg)}}
	#product_area >p.pc{display:none}
	#product_area >p.mo{display:block;font-size: 18px;}
	#about_area .infoo h3{font-size: 50px;}
	#custom_area .img_box{width: 80%;left: 10%;bottom: 230px;}
	#fakeNumber li{padding: 25px 2.5%;width: 95%;}
	#fakeNumber li:nth-child(2){border-left: 0;border-right: 0;border-top: 1px solid #c6c6c6;border-bottom: 1px solid #c6c6c6;}
	#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; }
	#fakeNumber ul .eva{display:flex;align-items: flex-start;justify-content: center;}
	#fakeNumber ul .eva img{position:absolute;}
	#fakeNumber ul .eva p, #fakeNumber ul .eva h2{padding-left: 100px;}
	#fakeNumber ul{width: 80%;margin: 20px auto;}
	#custom_area #imglist .img_nav img{display:none;}
	#about_area .infoo{width: 80%;margin-top: 100px;}
	#about_area .infoo p{letter-spacing:0;}
	#photo_area .item:hover:before{zoom: 70%;transform: rotate(250deg);animation-name: none;bottom: unset;top: -100px;right: -50px;}
	#book_area li h3{right:20px;}
	#book_area li p{right: 60px;}
}