#wrap { z-index: 5; }

/* section */
section {padding: 5vw 0;}
section >* { z-index: 3; }
section .h2title_box {font-size: 15px;}
section .title_box {padding-bottom: 3vw;font-size: 40px;font-size: max(2.8 * (1vw + 1vh) / 2, 28px);}
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 .title_box {width: 85%;margin: 0 auto;}

/* product_list */
#product_list li{background:#fff;margin: 0 5px;}
#product_list li .clip img {aspect-ratio:4/3}
#product_list li .info_box {padding: 30px;}
#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 {height: auto;font-weight: 300;font-size: 14px;color: #9b9b9b;-webkit-line-clamp: 4;}
#product_list li .info_box article{font-size: 14px;margin-top: 20px;font-weight: 600;}
#product_list li:hover .info_box h3, #product_list li:hover .info_box article{color:var(--primary)}
#product_list li .info_box article svg{fill:var(--primary);width: 14px;height: 14px;margin-left: 10px;}
#product_list .slick-prev{background:var(--primary);left: -100px;border-radius: 50px;width: 50px;height: 50px;}
#product_list .slick-prev:before{content:url(/images/44/arrow2.png);}
#product_list .slick-next{background:var(--primary);right: -100px;border-radius: 50px;width: 50px;height: 50px;}
#product_list .slick-next:before{content:url(/images/44/arrow.png);}

/* about_area */
#about_area .title_box, #about_area .h2title_box {width: 75%;margin: 0 auto;}
#about_area .title_box{padding-right: 10%;box-sizing: border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;}
#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_info *{box-sizing: border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;}
#about_info .contentbuilder {justify-content: space-between;}
#about_info .text{max-width: 350px;}
#about_info .three{max-width: 350px;}
#about_info .img img{box-shadow: -30px 30px var(--primary);}

/* custom_area */
#custom_area {padding: 0;}
#custom_area ul{display:grid;box-shadow: 0px 5px 83px 0px rgba(40, 40, 40, 0.12);grid-template-columns: repeat(4, 1fr);}
#custom_area li:not(:last-child){border-right: 2px solid #f3f3f3;}
#custom_area ul li >div {padding: 30px;}
#custom_area ul li svg {width: 16px;height: 16px;fill: var(--primary);}
#custom_area ul li:hover svg{margin-left:10px;}
#custom_area ul li h3 {margin: 0 0 10px;font-size: 18px;}
#custom_area ul li h3:first-letter{color:var(--primary);}
#custom_area ul li article {font-weight: 400;font-size: 14px;overflow: hidden;margin: 10px 0 30px;color: #9b9b9b;}

/* news_area */
#news_area li{margin:0 10px;}
#news_area li .img_box , #book_area li .img_box {background-color: #f9f9f9;}
#news_area li .info_box {margin: 20px 25px;}
#news_area li .time {width: 75px;font-weight: 400;font-size: 13px;color: #9b9b9b;}
#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; }
#news_area li p.tt {margin-top: 10px;height: auto;line-height: 150%;font-size: 15px;-webkit-line-clamp: 2;color: #9b9b9b;}
#news_area li .info_box article{font-size: 14px;margin-top: 20px;font-weight: 600;}
#news_area li .info_box article svg{fill:var(--primary);width: 14px;height: 14px;margin-left: 10px;}
#news_area li:hover .info_box article svg{margin-left:20px;}
#news_area li:hover .info_box article{color:var(--primary)}

/* book_area */
#book_area li{margin: 0 20px 20px;box-shadow: 0 5px 10px rgb(0 0 0 / 10%);position: relative;}
#book_area li .img_box img{aspect-ratio:4/3}
#book_area li h3 {margin: 20px 30px;height: 60px;font-size: 18px;-webkit-line-clamp: 2;}
#book_area li:hover h3{color:var(--primary)}
#book_area .slick-prev{background:var(--primary);left: -100px;border-radius: 50px;width: 50px;height: 50px;}
#book_area .slick-prev:before{content:url(/images/44/arrow2.png);}
#book_area .slick-next{background:var(--primary);right: -100px;border-radius: 50px;width: 50px;height: 50px;}
#book_area .slick-next:before{content:url(/images/44/arrow.png);}

/* photo_area */
#photo_area{border-top: 1px solid #ddd;border-bottom: 1px solid #ddd;padding: 3vw 0;}
#photo_area .title_box{padding-bottom: 1vw;}
#photo_area li{margin: 20px 15px;box-shadow: 0 0 15px rgb(0 0 0 / 15%);padding: 20px 0;}

/* esg_area */
#esg_area .workframe{display:grid;grid-template-columns: 45% 50%;justify-content: space-between;align-items: center;}
#esg_area h3{padding-bottom: 0;}
#esg_area p{font-size:20px;font-weight: 500;margin-bottom: 30px;}
#esg_area a{background:var(--primary);display: inline-block;margin-top: 30px;color: white;padding: 15px 30px;}

@media screen and (max-width: 1460px) {
	#about_area .about_sub_1 , #about_area .about_sub_2 , #about_area .about_sub_3 { width: 20vw; }
	#about_area .about_sub_2 { top: -20vw; right: 6vw; }
	#book_area .slick-prev{left: -50px;}
	#book_area .slick-next{right: -50px;}
}
@media screen and (max-width: 1280px) {
	#product_area .title_box{width:95%;}
	#product_list .slick-next, #product_list .slick-prev, #book_area .slick-next, #book_area .slick-prev{display: none !important;!i;!;}
}
@media screen and (max-width: 1024px) {
	#custom_area ul{grid-template-columns: repeat(2, 1fr);}
	#custom_area li:nth-child(2), #custom_area li:nth-child(1){border-bottom: 2px solid #f3f3f3;}
	#product_list { margin: auto; }
	#news_area li h3 { height: 30px; -webkit-line-clamp: 1; }
}
@media screen and (max-width: 980px) {
    #esg_area .workframe{display:flex;flex-direction: column;gap: 50px;}
	section .title_box{padding-bottom: 5vw;}
	#about_info .contentbuilder{display:grid;grid-template-columns: 1fr;gap: 50px;}
	#about_info .contentbuilder >div{max-width:100%;text-align: center;}
	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: 12vw 0;}
}
@media screen and (max-width: 550px) {
	#product_list li .clip img{height:auto;}
	#about_area .title_box{width:auto;padding: 0;}
	#custom_area ul{grid-template-columns: 1fr;}
	#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; }
}