#wrap { z-index: 5; }

/* section */
section {padding: 5vw 0;}
section >* { z-index: 3; }
section .title_box {padding-bottom: 2vw;font-size: 35px;color: var(--secondary);font-weight: 500;letter-spacing: 1px;}
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_list */
#product_list li {margin: 25px;}
#product_list li .clip{box-shadow: 0 0 20px rgb(0 0 0 / 5%);padding: 20px;background: white;box-sizing: border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;}
#product_list li .clip img {aspect-ratio:1/1;}
#product_list li .h3 {height: auto;font-size: 14px;font-family: "Outfit", sans-serif;text-align: center;margin-top: 25px;font-weight: 700;}

/* about_area */
#about_info *{box-sizing: border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;}
#about_area {padding: 2vw 0 5vw;position: relative;}
#about_area:after{content:'';background: #0e1630;width: 100%;height: 100%;position: absolute;top: 0;left: 0;z-index: -4;}
#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_area .box .h1tit{color:white;font-size: 22px;font-weight: 500;letter-spacing: 2px;word-break: keep-all;line-height: 1.5;margin-bottom: 2vw;}
#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;line-height: 2;color: white;margin-bottom: 50px;text-align: justify;letter-spacing: .08em;}
#about_area article {line-height: 270%;font-weight: 400;}
#about_area .more_btn{margin-right: calc(35% + 10px);color: white;}
#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: 600;font-size: 165px;margin:0;text-transform:uppercase;letter-spacing:2px;line-height:1;will-change:transform;animation: marquee 35s linear infinite;color: rgb(190 203 193 / 5%);font-family: "Outfit", 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%);}}

/* custom_area */
#custom_area{background-image: url(/images/44/productBg.jpg);background-size: cover;background-position: bottom;}
#custom_area .titleBox{display:grid;grid-template-columns: 50% 44%;justify-content: space-between;align-items: center;margin-bottom: 60px;}
#custom_area .titleBox .title_box {padding: 0;color: #333;word-spacing: 100vw;line-height: 1.4;}
#custom_area .titleBox p{letter-spacing: 0.03em;margin: 0;font-size: 18px;text-align: justify;}

/* news_area */
#custom_list{display:grid;grid-template-columns: 30% 68%;justify-content: space-between;}
#custom_list .bg_box{background-size: 200%;height: 100%;border-radius: 30px;display: flex;align-items: center;justify-content: center;overflow: hidden;background-position: 100% 50%;}
#custom_list #fakeNumber{position:absolute;width: 100%;height: 100%;background: rgb(0 0 0 / 55%);}
#custom_list #fakeNumber *{color:white}
#custom_list #fakeNumber .eva{padding:50px}
#custom_list #fakeNumber .eva b{font-size: 60px;font-weight: 800;line-height: 1;font-family: "Arimo", sans-serif;}
#custom_list #fakeNumber .eva >div{display:flex;align-items: baseline;gap: 10px;}
#custom_list #fakeNumber .eva span{font-size: 46px;color: var(--secondary);font-weight: 600;line-height: 1;font-family: "Arimo", sans-serif;}
#custom_list #fakeNumber .eva p{color: #dedede;margin-top: 5px;opacity: .85;letter-spacing: .5px;}
#custom_list ul{border-radius: 30px;overflow: hidden;display: grid;grid-template-columns: repeat(3, 1fr);gap: 2px;}
#custom_list li a{position:absolute;z-index: 5;}
#custom_list li b{position:absolute;width: 50px;aspect-ratio:1/1;display:inline-flex;align-items:center;justify-content:center;border-radius:70px;background:linear-gradient(  135deg,#ff7a2f 0%,#ff4a1f 28%,#e71916 55%,#c90012 78%,#9f0011 100% );bottom: 30px;left: 40px;z-index: 2;}
#custom_list li:hover b{left:calc(100% - 80px);opacity:0}
#custom_list li b svg {fill: white;}
#custom_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 / 5%));z-index: 2;}
#custom_list li img{aspect-ratio: 1/1.2;}
#custom_list li .info_box{display: flex;justify-content: flex-start;align-items: flex-start;z-index: 3;flex-direction: column;top: 0;padding: 25px 40px;}
#custom_list li .info_box .h3{font-size: 20px;height: auto;font-weight: 500;font-family: "Arimo",var(--font-family), sans-serif;}
#custom_list li .info_box p{height:auto;font-size: 15px;letter-spacing: .5px;}
#custom_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;}
#custom_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%);}
#custom_list li:hover .project-zoom {opacity: 1;-webkit-transform: scale(1);-ms-transform: scale(1);-o-transform: scale(1);transform: scale(1)}

/* contact_area */
#contact_area{background-image: url(/images/44/contactBg.jpg);background-repeat: no-repeat;background-position: 50% 50%;background-size: cover;padding: 8vw 0;}
#contact_area .workframe{text-align:center;}
#contact_area .h3{color:white;font-size: 40px;padding-bottom: 1vw;}
#contact_area p{font-size: 21px;font-weight: 500;line-height: 2;letter-spacing: .5px;margin-bottom: 3vw;}
#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)}

/* 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;padding: 0 !important;}
#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;margin: 0;font-family: "Outfit", sans-serif;}
#news_area li .more_btn {margin-right: 10px;padding: 0;height: auto;font-weight: 300;font-size: 14px;z-index: 6;max-width: unset;}
#news_area li .h3 {margin-top: 10px;height: 60px;line-height: 150%;font-size: 20px;-webkit-line-clamp: 2;font-weight: 500;}
#news_area li:hover .h3{color:var(--primary)}
#news_area li p {margin-top: 10px;height: auto;line-height: 150%;font-size: 15px;-webkit-line-clamp: 2;color: #737475;font-weight: 300;}

@media screen and (min-width: 1000px) {
	#contact_area{background-attachment: fixed;}
}
@media screen and (max-width: 1460px) {
}
@media screen and (max-width: 1024px) {
    #about_area .workframe{grid-template-columns:1fr}
    #custom_list {display: block;}
    #custom_list .bg_box{aspect-ratio: 8/3;margin-bottom: 20px;}
}
@media screen and (max-width: 980px) {
	#news_area .titleBox a{display:none;}
	#news_area .workframe{display:block;}
    #about_area .track p{font-size: 120px;}
    #custom_area .titleBox{grid-template-columns:1fr;gap: 20px;}
	section, #news_area { padding: 10vw 0; }
}
@media screen and (max-width: 550px) {
	#news_area li .info_box{margin:0}
	#news_area li >div{grid-template-columns:1fr;gap: 20px;}
	#news_area .fixTxt{width: 80%;}
    #contact_area p{font-size:18px;margin-bottom: 35px;}
    #contact_area .h3{font-size: 28px;padding-bottom: 20px;}
	#contact_area{padding:20vw 0;}
    #product_list li{margin:10px;}
    #product_list ul{margin-top:20px;}
    #about_area .box{margin-top: 25px;}
	#about_area .workframe{margin: 0 auto;display: block;}
	#about_area{padding-top: 5vw;}
    #custom_list ul{display:flex;flex-direction: column;}
    #custom_list li img{aspect-ratio: 3.5/3;}
    #custom_list .bg_box{aspect-ratio: 5/3;}
    #custom_area .titleBox p{font-size:16px;}
    #about_area .track p{font-size: 90px;}
}