#wrap { z-index: 5; }

/* section */
section {padding: 5vw 0;}
section >* { z-index: 3; }
section .title_box {font-size: 50px;font-family: "Marcellus", serif;text-transform: uppercase;color: #464a4a;}
section .h2title_box {font-size: 22px;color: #464a4a;font-weight: 500;letter-spacing: 30px;margin-bottom: 20px;margin-top: 10px;position: relative;}
section .h2title_box:after{content:'';position: absolute;width: 1px;height: 17px;background: #b2b2b2;left: 37px;top: 12px;box-shadow: 50px 0 #b2b2b2, 103px 0 #b2b2b2;}
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_area */
#product_area{padding-top:3vw}
#product_area:before{content:url(/images/44/img-p-right.png);position: absolute;right: -8%;top: -23%;}
#product_area .bg_box {background-repeat: no-repeat;}
#product_area .bg_box:before {display:none;}
#product_area .h2title_box:after{left: calc(50% - 68px);}
#product_area .workframe{width:min(90%, 1500px);}
#product_list{margin-top:4vw}
#product_list li{margin: 0 30px;}
#product_list li img{aspect-ratio: 3 / 3;border-radius: 50%;height: auto;box-shadow: 8px 8px #c3ae93;}
#product_list li:hover img{box-shadow: 0 0 #c3ae93;}
#product_list li .info_box{margin-top:40px;display: flex;flex-direction: column;align-items: center;}
#product_list li .info_box h3{letter-spacing: 4px;font-size: 22px;height: auto;}
#product_list li:hover .info_box h3{letter-spacing: 0;}
#product_list li .info_box p{height:auto;-webkit-line-clamp: 3;text-align: center;font-size: 15px;margin-top: 20px;padding: 0 10%;}

/* about_area */
#about_area {padding-top: 8vw;position: relative;padding-bottom: 0;}
#about_area:after{content:url(/images/44/img-a-left.png);position: absolute;left: -15%;top: 25%;}
#about_area .slogan{letter-spacing: 10px;font-size: 27px;padding: 50px 80px;background: var(--secondary);display: inline-block;position: absolute;top: 0;color: var(--white);width: 33%;text-align: end;}
#about_area .workframe{margin: 0 0 0 auto;width: 90%;display: grid;justify-content: space-between;grid-template-columns: 64% 35%;}
#about_area #about_info{margin: 40px 0;}
#about_area .more_btn{position:absolute;right: -80px;bottom: 55%;z-index: 2;}
#about_area .title_box {word-spacing: 100vw;line-height: 1.3;margin-left: 90px;}
#about_area .h2title_box{margin-left:120px;}
#about_area article {margin-bottom: 50px;line-height: 210%;font-weight: 400;margin-left: 90px;width: 65%;}
#about_area .process {display:grid;grid-template-columns: repeat(4, 1fr);}
#about_area .process .item{margin: 5px;position: relative;}
#about_area .process .item img{aspect-ratio: 2.5 / 3;object-fit: cover;filter: saturate(70%);}
#about_area .process .item .info{bottom:0;width: 100%;height: 100%;background: linear-gradient(180deg, rgb(0 0 0 / 10%), rgb(0 0 0 / 60%));display: flex;align-items: flex-end;justify-content: flex-end;}
#about_area .process .item:hover .info{background:none;}
#about_area .process .item .info p{writing-mode: vertical-lr;font-size: 18px;color: var(--white);position: absolute;top: 20px;left: 20px;font-weight: 300;}
#about_area .process .item .info h3{color:#fff;font-size: 22px;font-weight: 400;margin: 40px 20px;word-spacing: 100vw;text-align: end;}
#about_area .process .item .info h3:after{content:'';display: block;background: var(--white);width: 50px;height: 1px;margin: 10px 0 0 auto;}
#about_area .process .item:hover .info h3:after{width:80px;}
#about_img img{animation: moveObject 25s linear infinite;height:100%;object-fit:cover}
@keyframes moveObject{0%{object-position:0% 50%}50%{object-position:100% 50%}100%{object-position:0% 50%}}

/* custom_area */
#custom_area{padding:0;display: grid;grid-template-columns: 30% 70%;align-items: stretch;}
#custom_area .tittle{background-image:url(/images/44/topBg.jpg);background-repeat:no-repeat;background-position:50% 50%;background-size:cover;display: flex;flex-direction: column;justify-content: center;align-items: flex-start;padding-left: 185px;}
#custom_area .tittle *{color:#fff;}
#custom_area .title_box{word-spacing: 100vw;width: 65%;line-height: 1.3;}
#custom_area .h2title_box{margin-left: 40px;margin-bottom: 60px;}
#custom_area .tittle .more_btn{background:#c5c5c0;color: #323230;}
#custom_area .tittle .more_btn:hover{background:var(--primary)}
#custom_area .tittle .more_btn span, #custom_area .tittle .more_btn span:before {background:#323230}
#custom_area ul{display:grid;grid-template-columns:1fr 1fr 1fr;transition: all 400ms;}
#custom_area ul li{transition: all 400ms;}
#custom_area ul:has(li:nth-child(1):hover){grid-template-columns:3fr 1fr 1fr}
#custom_area ul:has(li:nth-child(2):hover){grid-template-columns:1fr 3fr 1fr}
#custom_area ul:has(li:nth-child(3):hover){grid-template-columns:1fr 1fr 3fr}
#custom_area li img{width:100%;aspect-ratio: 1.8 / 3;}
#custom_area li .mofd{position:relative;}
#custom_area li .mofd .photo{background-size: cover;background-position: 50% 50%;filter: saturate(70%);height: 745px;}
#custom_area li .info{position:absolute;bottom: 0;background: rgb(50 50 47 / 30%);width: calc(100% - 110px);padding: 70px 55px;height: calc(100% - 140px);display: flex;flex-direction: column;justify-content: flex-end;align-items: flex-start;}
#custom_area li .info *{color:#fff;}
#custom_area li .info span{width:1px;height: 100px;background: var(--white);margin-bottom: 30px;}
#custom_area li .info .num{font-size:17px;}
#custom_area li .info h3{font-size:22px;font-weight: 400;margin: 30px 0 20px;}
#custom_area li .info p{font-family: "Marcellus", serif;font-size: 40px;line-height: 1.3;}

/* 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 li h3 { margin-top: 10px; height: 30px; font-size: 18px; }

/* photo_area */
#photo_area .item {width: 260px;height: 200px;}
#photo_area .item img {height: 100%;object-fit: cover;}

@media screen and (max-width: 1680px) {
	#custom_area .tittle{padding-left:5vw}
}
@media screen and (max-width: 1460px) {
	#custom_area li .info p{font-size:35px;}
	#about_area:after{left:-20%;}
	#about_area .more_btn{position:relative;right: unset;bottom: unset;margin-left: 90px;}
	#about_area .process{margin-top:30px;}
	#about_area{padding-top:10vw}
	#product_area:before{top: -28%;}
}
@media screen and (max-width: 1400px) {
	#about_area .slogan{width: 45%;}
	#custom_area{display:block;}
	#custom_area .tittle{padding-top:4vw}
	#custom_area .tittle .more_btn{position:absolute;right: 70px;}
}
@media screen and (max-width: 1280px) {
	#product_area:before{zoom: 80%;}
	#about_area .process{grid-template-columns: repeat(2, 1fr);}
}
@media screen and (max-width: 1024px) {
	#custom_area li .mofd .photo{height:500px;}
	#about_area:after, #about_img{display:none;}
	#about_area article{width: calc(100% - 150px);}
	#about_area .slogan{width: 75%;padding: 35px 80px;}
	#about_area .workframe{display:block;margin: 0 auto;width: 100%;}
	#news_area li h3 { height: 30px; -webkit-line-clamp: 1; }
}
@media screen and (max-width: 980px) {
	#custom_area ul, #custom_area ul:has(li:nth-child(1):hover), #custom_area ul:has(li:nth-child(2):hover), #custom_area ul:has(li:nth-child(3):hover){grid-template-columns: repeat(1, 1fr);}
	#product_area:before{display:none;}
	#about_area .title_box, #about_area article, #about_area .more_btn{margin-left:50px;}
	#about_area .h2title_box{margin-left:90px;}
	#about_area{padding-top: 15vw;}
	section {padding: 10vw 0;}
	#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 { padding: 8vw 0 2vw; }
}
@media screen and (max-width: 550px) {
	#custom_area li .info{padding: 25px 35px;width: calc(100% - 70px);height: calc(100% - 50px);}
	#custom_area li .mofd .photo{height: 350px;}
	#custom_area li .info span, #custom_area li .info .num{display:none;}
	#custom_area .tittle{padding: 40px 0 0 40px;}
	#custom_area .tittle .more_btn{display:none;}
	#product_area{padding: 7vw 0 12vw;}
	#about_area #about_info { margin-bottom: 0; }
	#about_area .process .item .info p{font-size:14px;}
	#about_area .process .item .info h3{font-size:17px;margin-bottom: 30px;}
	#about_area .process .item{margin:2px;}
	#about_area article{width: calc(100% - 70px);}
	#about_area .title_box, #about_area article, #about_area .more_btn{margin-left: 35px;}
	#about_area .h2title_box{margin-left: 70px;}
	#about_area{padding-top: 19vw;}
	#about_area .slogan{font-size:18px;padding: 25px 25px;width: 80%;letter-spacing: 4px;}
	#product_list {margin-top: 9vw;}
	#about_area #about_img { width: 80vw; }
	#about_area .about_sub_2 { bottom: 60vw; }
	#news_area li .row { margin: auto; width: 280px; }
	#product_list li .info_box p{padding:0;}
}
@media screen and (max-width: 480px) {
	#book_area li.row { margin: auto; width: 250px; }
}