#wrap { z-index: 5; }

/* section */
section {padding: 5vw 0;overflow: hidden;position: relative;}
section >* { z-index: 3; }
section .title_box {padding-bottom: .5vw;font-size: 55px;line-height: 1.5;font-weight: 500;letter-spacing: 2px;}
section .entitle {font-family: "Noto Serif TC", serif;font-style: unset;font-size: 23px;font-weight: 600;margin-bottom: 2vw;display: block;}
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%); }

/* service_area */
#service_area{padding:0;position: relative;display: flex;align-items: center;overflow: hidden;}
#service_area:after{content:'';position: absolute;bottom: 0;left: calc(-20% + 5px);width: 59%;height: 100%;background: #fff;z-index: 1;transform: skewX(15deg);}
#service_area .Img{position:absolute;width: 75vw;right: 0;z-index: 1;}
#service_area .Img img{aspect-ratio: 6/3;object-fit: cover;}
#service_area .Img b{position:absolute;bottom: -200px;right: 90px;z-index: 5;color: #fff;display: flex;align-items: center;justify-content: center;}
#service_area .Img b font{display: block;color: #000;position: relative;z-index: 2;font-weight: 500;}
#service_area .Img b:after{content:'';background: var(--white);width: 150%;height: 120%;transform: skewX(-25deg);position: absolute;opacity: .5;}
#service_area .box{width: 23%;padding: 4vw 0 4vw 8%;}
#service_area .box p{margin-bottom:50px;font-size: 18px;letter-spacing: .5px;text-align: justify;line-height: 1.6;}
#service_area iframe{position: absolute; width: 100%; height: 600px; top: -300px; right: -170px;}

/* Iron_area */
#Iron_area{padding:0;position: relative;display: flex;align-items: center;overflow: hidden;}
#Iron_area:after{content:'';position: absolute;bottom: 0;left: calc(-18% + 2px);width: 71%;height: 100%;background: #fff;z-index: 1;transform: skewX(15deg);}
#Iron_area .Img{position:absolute;width: 60vw;right: 0;z-index: 1;}
#Iron_area .Img img{aspect-ratio: 6/3;object-fit: cover;}
#Iron_area .box{width: 23%;padding: 4vw 0 4vw 8%;}
#Iron_area .box p{margin-bottom:50px;font-size: 18px;letter-spacing: .5px;text-align: justify;line-height: 1.6;}

/* scrap_area */
#scrap_area{padding:0;position: relative;display: flex;align-items: center;overflow: hidden;}
#scrap_area:after{content:'';position: absolute;bottom: 0;left: calc(-20% + 5px);width: 59%;height: 100%;background: #fff;z-index: 1;transform: skewX(15deg);}
#scrap_area .Img{position:absolute;width: 65vw;right: 0;z-index: 1;}
#scrap_area .Img img{aspect-ratio: 5/3;object-fit: cover;}
#scrap_area .box{width: 23%;padding: 4vw 0 4vw 8%;}
#scrap_area .box p{margin-bottom:50px;font-size: 18px;letter-spacing: .5px;text-align: justify;line-height: 1.6;}

/* about_area */
#about_area {background: #f1f1f1;z-index: 5;}
#about_area *{box-sizing: border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;}
#about_area em{width: 60%;margin: 0;line-height: 1.7;}
#about_area .title_box { padding-bottom: 0; }
#about_area .box:not(:last-child){display:grid;grid-template-columns: 35.5% 65%;align-items: end;margin-bottom: 70px;justify-content: start;justify-items: start;}
#about_area #runBox{padding:0;}
#about_area #runBox, #about_area #runBox * {transition:unset;-webkit-transition:unset;}
#about_area #runBox img{margin:0 15px;aspect-ratio: 4/3;object-fit: cover;}
#about_area article { margin-bottom: 30px; line-height: 210%; letter-spacing: 2px; font-weight: 400; }
#about_area .box .contentbuilder {display:grid;grid-template-columns: 35% 65%;align-items: center;}
#about_area .box .contentbuilder *{width:auto;max-width: unset;}
#about_area .box .contentbuilder p{margin:20px 0;width: 85%;line-height: 1.6;}
#about_area .btn{position:absolute;right: 100px;bottom: 90px;display: flex;flex-direction: column;align-items: center;padding: 0;}
#about_area .btn a{width: 75px;display: inline-flex !important;!i;!;align-items: center;justify-content: center;aspect-ratio: 1/1;background: var(--primary);margin: 5px 0;}

/* custom_area */
#custom_area .bg {position: absolute;bottom: 0;left: calc(-23% + 6px);width: 69%;height: 100%;background: var(--primary);z-index: 0;transform: skewX(15deg);}
#custom_area .title_box{color:#fff;padding-bottom: 2vw;}
#custom_area .workframe{display:grid;grid-template-columns: 300px 1fr;width: 100vw;padding-left: 8vw;box-sizing: border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;align-items: center;}
#custom_area .slick-list{overflow:visible}
#custom_area ul{display:grid;grid-template-columns: repeat(4, 1fr);}
#custom_area ul li >div {padding: 50px 50px;display: flex;align-items: center;justify-content: center;margin: 0 20px;}
#custom_area ul li >div a{z-index:10}
#custom_area ul li .info{z-index: 5;position:relative;}
#custom_area ul li:hover .info *{color:#fff;-webkit-filter: contrast(0) brightness(150%);filter: contrast(0) brightness(200%); }
#custom_area ul li >div:after{content:'';position: absolute;background: #f2f2f2;width: 100%;height: 100%;transform: skewX(-25deg);z-index: -1;}
#custom_area ul li .clip {opacity: 0;transform: skewX(-25deg);overflow: hidden;height: 100%;display: flex;align-items: center;justify-content: center;}
#custom_area ul li .clip:before{content:'';position: absolute;width: 100%;height: 100%;background: #000;z-index: 2;opacity: .4;}
#custom_area ul li .clip img{transform: skewX(25deg);min-width: 140%;height: auto;object-fit: cover;position: absolute;}
#custom_area ul li:hover .clip{opacity:1}
#custom_area ul li h3 {margin: 10px 0 5px;font-size: 25px;font-family: "Noto Serif TC", serif;font-weight: bold;display: flex;align-items: center;padding-left: 20px;}
#custom_area ul li h3:before{content:url(/images/44/icon-case1.png);display: inline-block;margin-right: 10px;margin-bottom: -6px;}
#custom_area ul li:nth-child(2) h3:before{content:url(/images/44/icon-case2.png);}
#custom_area ul li:nth-child(3) h3:before{content:url(/images/44/icon-case3.png);}
#custom_area ul li:nth-child(4) h3:before{content:url(/images/44/icon-case4.png);}
#custom_area ul li article {font-weight: 500;font-size: 16px;overflow: hidden;margin: 10px 0 0;height: 55px;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-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 {background-image: url(/images/40/photoBg.jpg);background-repeat: no-repeat;background-position: 50% 50%;background-size: cover;}
#photo_area .title_box {text-align:center;font-size: 45px;color: var(--white);padding-bottom: 3vw;}
#photo_area .workframe{width:90%;}
#photo_area .item {padding: 0 !important;!i;!;!ㄩㄛ;!ㄛ;!;margin: 15px;}
#photo_area .item img {object-fit: cover;aspect-ratio: 4 / 3;}
#photo_area .item h3{font-size:20px;margin: 10px 0;font-weight: 500;letter-spacing: 2px;}
#photo_area .item *{text-align:center;color:#fff;font-weight: 300;}

@media screen and (min-width: 1025px) {
	#photo_area{background-attachment: fixed;}
}
@media screen and (max-width: 1680px) {
	#custom_area ul li >div{margin: 0 15px;padding: 50px 30px;}
	#about_area .btn{right: 63px;}
	#Iron_area .Img img{aspect-ratio: 5/3;}
	#service_area:after{left: calc(-23% + 17px);}
	#custom_area .bg{left: calc(-25% + 12px);}
	#Iron_area:after{left: calc(-19% + 7px);}
}
@media screen and (max-width: 1460px) {
	#about_area .btn{right: 30px;}
	#Iron_area .Img img{aspect-ratio: 4.5/3;}
	#custom_area .workframe{grid-template-columns: 30% 1fr;}
	#custom_area ul{grid-template-columns: repeat(2, 1fr);gap: 30px;}
	#custom_area ul li >div{margin:0;}
	#service_area .Img img{aspect-ratio: 5 / 3;}
	#service_area:after{left: calc(-21% + 28px);}
	#custom_area .bg{left: calc(-18% + 2px);}
	#Iron_area:after{left: calc(-10% + 10px);}
	#Iron_area .box{width: 34%;}
	#service_area .box{width: 25%;}
	#about_area .about_sub_1 , #about_area .about_sub_2 , #about_area .about_sub_3 { width: 20vw; }
	#scrap_area .box{width:30%}
	#scrap_area:after{left: calc(-15% + 5px);}
	#product_list { width: 500px; margin-left: 30px; }
	#product_list li .clip { height: 590px; }
	#about_area .about_sub_2 { top: -20vw; right: 6vw; }
}
@media screen and (max-width: 1280px) {
	#Iron_area:after{left: calc(-8% + 10px);}
	#custom_area .bg{left: calc(-17% + 6px);}
	section .title_box{font-size: 45px;}
	#scrap_area .box{width: 40%;}
	#scrap_area:after{left: calc(-5% + 5px);}
}
@media screen and (max-width: 1024px) {
	#custom_area .slick-prev{background:var(--info);z-index: 5;width: 45px;height: 45px;}
	#custom_area .slick-prev:before{content:url(/images/44/arrow-left.png);zoom: 80%;}
	#custom_area .slick-next{background:var(--info);z-index: 5;width: 45px;height: 45px;}
	#custom_area .slick-next:before{content:url(/images/44/arrow-right.png);zoom: 80%;}
	#custom_area ul{display:block;}
	#custom_area li{margin:0 5px;}
	#about_area em{width:100%;}
	#about_area .box:not(:last-child){grid-template-columns:1fr;gap: 30px;}
	#custom_area .workframe{grid-template-columns: 1fr;gap: 30px;width: 85%;margin: 0 auto;padding: 0;display: block;}
	#custom_area .bg{transform:unset;width: 100%;left: 0;}
	#service_area:after, #Iron_area:after, #scrap_area:after{display:none;}
	#service_area .box, #Iron_area .box, #scrap_area .box{width: 80%;padding: 6vw 0;margin: 0 auto 0;}
	#service_area .Img, #Iron_area .Img, #scrap_area .Img{width:100vw;position:relative;}
	#service_area .Img b{bottom: 60px;right: 110px;}
	#service_area, #Iron_area, #scrap_area{display:block;}
	#product_list { margin: auto; }
	#news_area li h3 { height: 30px; -webkit-line-clamp: 1; }
}
@media screen and (max-width: 980px) {
	#about_area .btn{display:none;}
	#about_area .box .contentbuilder{display: block;}
	#product_list { width: 500px; }
	#product_list li .clip { height: 590px; }
	#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; }
	#service_area iframe{position: static; width: 100%; height: 550px;}
}
@media screen and (max-width: 760px) {
	section {padding: 10vw 0;}
	#product_sub_list>div { margin: 10px auto 50px; }
	#product_sub_list li { width: 150px; }
	#product_sub_list li .clip { height: 150px; }
	#product_list { width: 70vw; }
	#product_list li .clip { height: 80vw; }
	#product_list li .info_box { width: 45vw; height: 30vw; }
	#service_area iframe{height: 430px;}
}
@media screen and (max-width: 550px) {
	#about_area .box .contentbuilder p{width:100%;}
	#custom_area ul{grid-template-columns: repeat(1, 1fr);gap: 30px;}
	#service_area .Img b{bottom: 30px;right: 70px;}
	#service_area .Img img{aspect-ratio: 4 / 3;}
	section .title_box{font-size: 40px;}
	#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; }
	#service_area iframe{height: 225px;}
}
@media screen and (max-width: 480px) {
	#book_area li.row { margin: auto; width: 250px; }
}