#wrap { z-index: 5; }

/* section */
section {padding: 5vw 0;}
section >* { z-index: 3; }
section .titleBox {padding-bottom: 3vw;}
section .emtit{font-family: "Poppins", serif;font-style: unset;font-size: max(3.5 * (1vw + 1vh) / 2, 40px);font-weight: 700;display: block;line-height: 1;}
section .titleBox p {text-align: end;font-size: 18px;line-height: 2;}
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%); }


/* customer_area */
#customer_area{overflow:hidden;padding-top: 9vw;}
#customer_area .titleBox{display: grid;justify-content: space-between;align-items: end;grid-template-columns: 50% 50%;}
#customer_area .customer_list{overflow:hidden;position:relative;}
#customer_area .customer_list:before,#customer_area .customer_list:after{position:absolute;width:15%;height:100%;background:-webkit-linear-gradient(left,rgba(245,245,245,1) 0%,rgba(255,255,255,0) 100%);background: linear-gradient(to right, rgb(255 255 255) 0%, rgba(255, 255, 255, 0) 100%);top:0;left:0;z-index:5;content:""}
#customer_area .customer_list:after{-webkit-transform:scale(-1);transform:scale(-1);right:0;left:auto}
#customer_area .customer_list .logo_wall{display:flex}
#customer_area .customer_list .logo_wall .logo_wrapper{display:flex;-webkit-animation:scroll 80s linear infinite;animation: scroll 150s linear infinite;}
#customer_area .customer_list .logo_wall .logo_wrapper:nth-child(2){-webkit-animation-name:scroll2;animation-name:scroll2;-webkit-animation-delay:-40s;animation-delay:-40s}
#customer_area .customer_list .logo_wall .logo_wrapper>div{margin:1.5em 1em;padding:1em;min-width:190px;height:100px;background:#fff;border-radius:9em;box-shadow:0 0 0.5em rgb(0 0 0 / 20%);display:inline-flex;justify-content:center;align-items:center}
#customer_area .customer_list .logo_wall .logo_wrapper>div img{aspect-ratio: 7/3;object-fit: contain;}
#customer_area .customer_list .logo_wall:nth-child(2),#customer_area .customer_list .logo_wall:nth-child(2) .logo_wrapper>div img{-webkit-transform:scaleX(-1);transform:scaleX(-1)}
@keyframes scroll{from{transform:translateX(0%)}to{transform: translateX(-90%);}}

/* 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 {z-index: 5;padding: 2vw 0;}
#about_area .workframe{width: min(90%, 1200px);display: grid;grid-template-columns: 50% 50%;align-items: center;justify-content: space-between;}
#about_area h2 { font-size: 45px; font-style: italic; }
#about_area article {margin-top: 55px;line-height: 220%;letter-spacing: 2px;font-weight: 400;font-size: 18px;}
#about_area .fixTxt{position:absolute;right: -20%;bottom: -40%;z-index: -10;}

/* custom_area */
#custom_area .emtit {margin: 0 6% 5vw;}
#custom_area #faq_list{display: flex;justify-content: center;}
#faq_list,#faq_list *{transition:unset;-webkit-transition:unset;color:#fff}
#faq_list li{display:grid;aspect-ratio:1/1;transition:transform 500ms ease-in-out,width 500ms ease-in-out,height 500ms ease-in-out,opacity 500ms ease-in-out;position:relative;grid-template-columns:1fr;margin:0 20px;width:calc((100% / 3) - 40px);height:auto;transition:unset;-webkit-transition:unset}
#faq_list li .title{order:2;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 10px}
#faq_list li .title span{position:absolute;background-image:url(/images/44/Hexagonal1.png);background-repeat:no-repeat;background-position:50% 50%;background-size:contain;width:100%;height:100%;z-index:-1}
#faq_list li:nth-child(2) .title span{background-image:url(/images/44/Hexagonal2.png)}
#faq_list li:nth-child(3) .title span{background-image:url(/images/44/Hexagonal3.png)}
#faq_list li .title .img{width:65px;aspect-ratio:1/1;-webkit-filter:contrast(0) brightness(150%);filter:contrast(0) brightness(200%);margin-bottom:20px}
#faq_list li .title h3{font-size:28px;font-weight:300;letter-spacing:2px}
#faq_list li .title h3:after{content:'';display:block;width:60px;height:2px;background:#fff;margin:20px auto 35px}
#faq_list li .title p{text-align:center;font-size:16px;text-transform:uppercase;font-family:"Kanit",serif;padding:0 100px}
#faq_list li.hoverbox .title p{padding:0 50px}
#faq_list li.hoverbox .info{display:flex;align-items:center;padding-left:70px;background-image:url(/images/44/Hexagonal1-1.png);background-repeat:no-repeat;background-position:left 50%;background-size:cover;margin-right:-168px;z-index:-1;font-size:18px;line-height:2;opacity:1;transform:scale(1) translateX(0);transition:all 500ms ease-in-out;margin:5px -170px 5px 0px}
#faq_list li:nth-child(2):hover .info{background-image:url(/images/44/Hexagonal2-1.png)}
#faq_list li:nth-child(3):hover .info{background-image:url(/images/44/Hexagonal3-1.png)}

/* 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: 1460px) {
	#about_area .fixTxt{width: 30%;bottom: -20%;}
	#faq_list li .title p{padding:0 50px}
	#faq_list li.hoverbox .title p{padding:0 20px}
	#faq_list li.hoverbox .info{font-size:15px;padding-left: 40px;height: 343px;margin: 29px -150px 29px 0px;}
}
@media screen and (min-width: 1161px) {
	#customer_area .customer_list:hover .logo_wrapper {-webkit-animation-play-state: paused;animation-play-state: paused}
	#customer_area .customer_list .logo_wall .logo_wrapper>div:hover img {-webkit-filter: grayscale(0);filter: grayscale(50%);opacity: 1}
}
@media screen and (max-width: 1280px) {
	#faq_list li .title h3{font-size: 22px;}
	#faq_list li .title p{font-size:14px}
	#faq_list li.hoverbox .info{height: 305px;margin: 48px -135px 48px 0px;}
}
@media screen and (max-width: 1024px) {
	#faq_list li.hoverbox .info{background-position: 50% 50%;width:70%;margin-right:0;padding-right:130px}
	#faq_list li .title h3{font-size: 20px;}
	#faq_list li p{display:none;}
	#customer_area .titleBox{grid-template-columns:1fr;gap: 30px;}
	#customer_area .titleBox p{text-align:left;}
	#about_area .workframe{grid-template-columns:50% 45%}
}
@media screen and (max-width: 980px) {
	section { padding: 8vw 0 ; }
	#custom_area .emtit{margin: 0 0 5vw;}
	#about_area .workframe{grid-template-columns:1fr;gap: 40px;}
}
@media screen and (max-width: 768px) {
	#faq_list li .title p{display:block;}
	#custom_area #faq_list{display:flex;flex-direction: column;align-items: center;}
	#custom_area #faq_list li{margin: 10px 0;width: 100%;grid-template-columns: 50% 50%;height: 406px;}
	#faq_list li .info{display: flex;align-items: center;padding-left: 70px;background-image: url(/images/44/Hexagonal1-1.png);background-repeat: no-repeat;background-position: left 50%;background-size: cover;z-index: -1;font-size: 15px;line-height: 2;margin: 5px -170px 5px 0px;}
	#faq_list li:nth-child(2) .info{background-image:url(/images/44/Hexagonal2-1.png)}
	#faq_list li:nth-child(3) .info{background-image:url(/images/44/Hexagonal3-1.png)}
}
@media screen and (max-width: 550px) {
    #faq_list li .title h3{font-size: 16px;}
	#faq_list li .title .img{width:45px}
	#custom_area #faq_list li{height: 187px;grid-template-columns: 60% 40%;}
	#faq_list li .info{padding-left: 35px;width: 80%;margin: 5px 0;padding-right: 88px;background-position: right 50%;font-size: 12px;position: relative;z-index: -11;}
	#faq_list li .title{padding:0}
	#faq_list li .title p, #faq_list li .title h3:after{display: none;}
	#about_area .fixTxt{display:none;}
	#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; }
}
@media screen and (max-width: 480px) {
	#book_area li.row { margin: auto; width: 250px; }
}