#wrap { z-index: 5; }

/* section */
section {padding: 5vw 0;}
section >* { z-index: 3; }
section .title_box {padding-bottom: 2vw;font-size: 45px;font-family: "Poppins", serif;text-transform: uppercase;font-weight: 700;line-height: 1.3;color: var(--primary);}
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%); }
section .titleBox p{color: #292424;font-size: 21px;margin-bottom: 20px;font-weight: 500;letter-spacing: 2px;}

/* product_area */
#product_area{padding-top:0;background-image: url(/images/44/productBg.jpg);background-size: cover;background-position: bottom;}
#product_area .workframe{border-top:1px solid #ddd;padding-top: 5vw;}
#product_area .titleBox{display:grid;grid-template-columns: 50% 44%;justify-content: space-between;align-items: center;margin-bottom: 60px;}
#product_area .titleBox .title_box {padding: 0;color: #333;}
#product_area .titleBox p{letter-spacing:0;margin: 0;}

/* product_list */
#product_list{display:grid;grid-template-columns: 30% 68%;justify-content: space-between;}
#product_list .bg_box{background-size:cover;height: 100%;border-radius: 30px;display: flex;align-items: center;justify-content: center;overflow: hidden;background-position: 50% 100%;}
#product_list #fakeNumber{position:absolute;width: 100%;height: 100%;background: rgb(0 0 0 / 55%);}
#product_list #fakeNumber *{color:white}
#product_list #fakeNumber .eva{padding:50px}
#product_list #fakeNumber .eva b{font-size: 60px;font-family: "Poppins", sans-serif;font-weight: 600;line-height: 1;}
#product_list #fakeNumber .eva >div{display:flex;align-items: baseline;gap: 10px;}
#product_list #fakeNumber .eva span{font-size: 46px;color: var(--secondary);font-family: "Poppins", sans-serif;font-weight: 600;line-height: 1;}
#product_list #fakeNumber .eva p{color: #dbdbdb;margin-top: 5px;opacity: .85;letter-spacing: .5px;}
#product_list ul{border-radius: 30px;overflow: hidden;}
#product_list li a{position:absolute;z-index: 5;}
#product_list li .clip:before{content:'';position: absolute;width: 100%;height: 100%;top: 0;background: linear-gradient(180deg,rgb(0 0 0 / 0%), rgb(0 0 0 / 75%));z-index: 2;}
#product_list li img{aspect-ratio: 3/1.5;}
#product_list li .info_box{width: 100%;height: 100%;display: flex;justify-content: center;align-items: flex-end;bottom: 0;z-index: 3;}
#product_list li .info_box .h3{margin-bottom: 30px;color: var(--white);font-size: 26px;height: auto;font-weight: 400;font-family: "Poppins", sans-serif;}
#product_list li .info_box .project-zoom {position: absolute;left: 50%;top: 50%;width: 9em;aspect-ratio: 1/1;margin: -4.5em;border-radius: 50%;border: 1px solid rgb(181 181 181 / 52%);overflow: hidden;opacity: 0;-webkit-transform: scale(.5);-ms-transform: scale(.5);-o-transform: scale(.5);transform: scale(.5);-webkit-transition: all .7s;-o-transition: all .7s;transition: all .7s;}
#product_list li .info_box .project-zoom:after {content: '';position: absolute;left: 50%;top: 50%;width: 1.625em;height: 1.625em;background: url(/images/44/right-arrow.svg) 0 0 no-repeat;background-size: cover;-ms-transform: translate(-50%,-50%);-o-transform: translate(-50%,-50%);transform: translate(-50%,-50%);}
#product_list li:hover .project-zoom {opacity: 1;-webkit-transform: scale(1);-ms-transform: scale(1);-o-transform: scale(1);transform: scale(1)}

/* about_area */
#about_info *{box-sizing: border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;}
#about_area {padding: 4vw 0 5vw;background-repeat: no-repeat;background-position: 50% 50%;background-size: cover;position: relative;}
#about_area .workframe {display: grid;grid-template-columns: 55% 36%;justify-content: space-between;align-items: end;margin-top: 1vw;}
#about_area .box{margin-bottom:50px;}
#about_img{display:grid;grid-template-columns: 46% 46%;justify-content: space-between;}
#about_img .clip:last-child{margin-top: 67%;}
#about_img .clip{box-shadow: 20px 20px 30px 0 rgb(0 0 0 / 15%);}
#about_img img{aspect-ratio: 2.6/4;}
#about_area .pageh1{font-family: "Poppins", sans-serif;font-weight: 600;line-height: 1.6;font-size: 18px;margin-bottom: 20px;text-transform: uppercase;color: var(--triadic1);}
#about_info .contentbuilder {align-items: flex-end;margin-bottom: 70px;}
#about_area p {font-size: 16px;font-weight: 500;line-height: 2;color: #292424;margin-bottom: 50px;}
#about_area article {line-height: 270%;font-weight: 400;}
#about_area .more_btn{margin-right: calc(35% + 10px);}
#about_area .track{width:100vw;max-width:100%;overflow:hidden;white-space:nowrap;margin-top: 40px;position: absolute;z-index: -1;}
#about_area .track p{font-weight: 800;font-size: 165px;margin:0;text-transform:uppercase;letter-spacing:2px;line-height:1;will-change:transform;animation: marquee 35s linear infinite;color: rgb(84 102 89 / 7%);font-family: "Poppins", sans-serif;}
#particle-canvas{width:100%;height: 100%;position: absolute !important;top: 0;left: 0;z-index: -3;opacity: .25;}
#particle-canvas canvas{width:100%;height:100%;}

@keyframes marquee{from{transform:translateX(0);}to{transform:translateX(-50%);}}

/* contact_area */
#contact_area{background-image: url(/images/44/contactBg.jpg);background-repeat: no-repeat;background-position: 50% 50%;background-size: cover;padding: 9vw 0;}
#contact_area .workframe{text-align:center;}
#contact_area .h3{color:white}
#contact_area p{font-size: 21px;font-weight: 500;line-height: 2;letter-spacing: .5px;margin-bottom: 30px;}
#contact_area .btn{display: inline-flex;align-items: center;justify-content: center;gap: 20px;color: white;font-family: "Poppins", sans-serif;border: 1px solid white;padding: 20px 50px;border-radius: 50px;}
#contact_area .btn:hover{background:var(--secondary);border-color:var(--secondary)}

/* 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{padding: 3vw 0;}
#news_area .fixTxt{position:absolute;top: 0;width: 400px;}
#news_area .workframe{width:min(90%, 1280px);display: grid;grid-template-columns: 40% 60%;align-items: center;}
#news_area .title_box{padding-bottom: 4vw;}
#news_area .titleBox p{margin-bottom: 80px;}
#news_area li{margin:15px 0;}
#news_area li >div{display:grid;grid-template-columns: 220px 1fr;gap: 50px;}
#news_area li .img_box , #book_area li .img_box {background-color: #f9f9f9;}
#news_area li .info_box { margin: 10px 15px 0; }
#news_area li .time {font-weight: 400;font-size: 14px;font-family: "Poppins", serif;margin: 0;}
#news_area li .more_btn {margin-right: 10px;padding: 0;height: auto;font-weight: 300;font-size: 14px;z-index: 6;}
#news_area li .h3 {margin-top: 10px;height: 60px;line-height: 150%;font-size: 20px;-webkit-line-clamp: 2;font-family: "Poppins", sans-serif;font-weight: 500;}
#news_area li p {margin-top: 10px;height: auto;line-height: 150%;font-size: 15px;-webkit-line-clamp: 2;color: #737475;font-weight: 300;}

/* 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: 1000px) {
	#contact_area{background-attachment: fixed;}
}
@media screen and (max-width: 1460px) {
	#about_area .more_btn{margin-right: calc(33% + 10px);}
	#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; }
}
@media screen and (max-width: 1300px) {
	#about_area .more_btn{margin-right: calc(31% + 10px);}
}
@media screen and (max-width: 1024px) {
    #product_list{grid-template-columns: 35% 63%;}
    #about_area .workframe{grid-template-columns:1fr}
    #product_area .titleBox{grid-template-columns:1fr;gap: 20px;}
	#news_area .workframe{grid-template-columns: 40% 60%;}
	#news_area li >div{gap:25px;}
	#news_area .fixTxt{width: 340px;left: -10%;}
	#product_list ul .titleBox{grid-column-start:unset;grid-column-end: unset;grid-row-start: unset;grid-row-end: unset;}
	#product_list ul{grid-template-columns: repeat(3, 1fr);}
	#about_area .more_btn{margin-right: calc(26% + 10px);}
	#news_area li h3 { height: 30px; -webkit-line-clamp: 1; }
}
@media screen and (max-width: 980px) {
    #product_list .bg_box{aspect-ratio: 8/3;margin-bottom: 20px;}
    #product_list{display:block;}
    #product_area .workframe{padding-top:8vw}
	#news_area .titleBox{margin-bottom: 40px;}
	#news_area .titleBox a{display:none;}
	#news_area .workframe{display:block;}
	#product_list ul{grid-template-columns: repeat(2, 1fr);}
	section, #about_area, #news_area {padding: 10vw 0;}
}
@media screen and (max-width: 760px) {
	#news_area li .info_box{margin:0}
	#news_area li >div{grid-template-columns:1fr}
	#news_area .fixTxt{width: 80%;}
	#contact_area{padding:20vw 0;}
	section .clip img{height:auto;}
}
@media screen and (max-width: 550px) {
    #product_list li .info_box .project-zoom{width: 6em;margin: -4em -3em;}
    #product_list li .info_box .h3{font-size: 18px;padding: 0 30px;text-align: center;}
    #product_list .bg_box, #product_list li img{aspect-ratio: 5/3;}
    section .title_box{font-size:40px;}
    #about_area .box{margin-top: 13vw;}
	#news_area .titleBox p{margin-bottom:40px;}
	#product_list ul{grid-template-columns:1fr}
	#about_area .workframe{text-align:left;}
	#about_area p{font-size:18px;letter-spacing: 0;margin-bottom: 20px;}
	#about_area{padding-top: 5vw;}
	#news_area li .row { margin: auto; width: 280px; }
}
@media screen and (max-width: 480px) {
	#book_area li.row { margin: auto; width: 250px; }
}