#wrap { z-index: 5; }

/* section */
section {padding: 5vw 0;}
section >* { z-index: 3; }
section .title_box {padding-bottom: 3vw;font-size: 60px;font-family: "Nunito Sans", sans-serif;position: relative;font-weight: 800;letter-spacing: 1px;color: var(--secondary);}
section .title_box:first-letter{color:var(--primary)}
section .title_box:before {content:url(/images/44/t-icon.png);position: absolute;top: -37px;left: -30px;}
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 .fixTxt{position:absolute;font-size: 160px;color: #f1f1ef;text-transform: uppercase;font-family: "Nunito Sans", sans-serif;left: 35vw;top: 0;font-weight: 200;white-space: nowrap;}
#product_area .workframe{margin: auto -10% auto auto;width: 100%;}
#product_area .title_box{margin-left: 120px;padding-bottom: 7vw;}
#product_area .btn{position:absolute;right: 25vw;top: 130px;display: inline-grid;grid-template-columns: repeat(2, 1fr);gap: 15px;}
#product_area:before{content:'';transform: skewX(40deg);position: absolute;height: 290px;background: #f1f1ef;width: 60vw;left: -17vw;top: 7.5vw;}

/* product_list */
#product_list{display:grid;grid-template-columns: 54% 40%;}
#product_list:before{content:'';position: absolute;width: 30vw;height: 50%;background: var(--primary);left: 6.5vw;top: -95px;}
#product_list >div,#product_list >div*{transition:unset;-webkit-transition:unset;}
#product_list li {margin: 20px 30px;padding: 20px;box-shadow: 0 0 20px rgb(0 0 0 / 15%);background: var(--white);}
#product_list #twoBox li{display:flex;flex-direction: column;align-items: center;padding: 45px 30px;}
#product_list #twoBox li:after{content:'';position: absolute;background: var(--primary);width: 88px;bottom: 0;height: 3px;}
#product_list #oneBox li{display: grid;align-items: center;grid-template-columns: 55% 40%;justify-content: space-between;}
#product_list #oneBox li .info_box *{text-align:left;}
#product_list #oneBox li .info_box .cate{font-size: 17px;height: auto;}
#product_list #oneBox li h3{margin-bottom:20px}
#product_list #oneBox li span{position:absolute;right: 0;bottom: 25px;}
#product_list #oneBox li p{color: #575656;font-size: 15px;margin: 0;}
#product_list #oneBox li .info_box{width: 85%;}
#product_list li .info_box{margin: 30px 0;position: relative;}
#product_list li .info_box >div { margin: auto; width: 80%; }
#product_list li .info_box h3 {height: auto;font-size: 20px;font-family: "Nunito Sans", sans-serif;text-align: center;}
#product_list li .info_box .cate{color:#7a8388;font-size: 14px;text-align: center;display: block;position: relative;z-index: 5;}
#product_list li .info_box p { margin-right: 10px; font-weight: 300; }

/* about_area */
#about_area {padding: 7vw 0;position: relative;background-repeat: no-repeat;background-position: 50% 50%;background-size: cover;}
#about_area:after{content:'';position: absolute;width: 100%;height: 100%;top: 0;left: 0;background: linear-gradient(-90deg, rgb(0 0 0 / 20%), rgb(0 0 0 / 90%));}
#about_area .title_box {padding-bottom: 0;color: var(--white);width: 40%;line-height: 1.4;}
#about_area h2 { font-size: 45px; font-style: italic; }
#about_area article {line-height: 210%;font-weight: 400;color: var(--white);margin: 20px 0 45px;width: 40%;font-size: 17px;}
#about_area .clip {-webkit-clip-path: url(#clip_about);clip-path: url(#clip_about);}
#about_area .moreBtn {border-color: rgb(255 255 255 / 20%);}
#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"); }
#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; 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; }

/* 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 (min-width: 1281px) {
	#about_area{background-attachment: fixed;}
}
@media screen and (max-width: 1700px) {
	#product_list #twoBox li{45px:;padding: 37px 30px;}
}
@media screen and (max-width: 1400px) {
	#product_list li{margin:20px}
	#about_area .title_box, #about_area article{width:50%}
}
@media screen and (max-width: 1280px) {
	#product_area .btn{top:100px}
	#product_area .fixTxt{font-size: 120px;}
	#product_area .workframe{margin-right: -15%;width: 110%;}
}
@media screen and (max-width: 1024px) {
	#about_area .title_box, #about_area article{width: 65%;}
	#product_area .btn{right:0}
	#product_list:before{top: -55px;height: 40%;}
	#product_area .workframe{width:90%;margin: 0 auto;}
	#product_list {display: block;}
	#product_list #twoBox{display:none;}
	#news_area li h3 { height: 30px; -webkit-line-clamp: 1; }
}
@media screen and (max-width: 980px) {
	#about_area .title_box, #about_area article{width: 95%;}
	#product_area .title_box{margin-left: 50px;padding-bottom: 10vw;}
}
@media screen and (max-width: 760px) {
	section .clip img{height:auto;}
	#about_area{padding: 15vw 0;}
	#about_area .workframe{width:80%}
	#product_area .btn{top: 62px;}
	section .title_box{font-size: 38px;}
	#product_area .title_box{padding-bottom: 19vw;}
	section { padding: 13vw 0 ; }
	#product_list #oneBox, #product_list:before, #product_area .fixTxt{display:none}
	#product_list #twoBox{display:block;}
}
@media screen and (max-width: 550px) {
	#product_area:before{height:200px;width: 80vw;left: -30vw;top: 20vw;}
	#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; }
}