#wrap { z-index: 5; }

/* section */
section {padding: 5vw 0;}
section >* { z-index: 3; }
section .title_box {padding-bottom: 3vw;}
section .title_box .entit{font-size: 16px;text-transform: uppercase;letter-spacing: 1px;font-family: "Arimo", sans-serif;font-weight: 600;}
section .title_box .entit:first-letter{color:var(--primary)}
section .title_box .page_title{font-size: 34px;letter-spacing: 3px;color: var(--primary);font-weight: 600;}
section .title_box .page_title:after { content: ""; display: block; width: 30px; height: 1px; background-color: var(--primary); margin: 24px auto 0 0 }
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_sub_list */
#product_area * { margin: 0; box-sizing: border-box; transition: unset; -webkit-transition: unset; }
#product_area .applicationItem::before {content: "";display: block;width: calc(100% - 20px);height: 1px;background-color: #d3d3d3;position: absolute;bottom: -10px;left: 10px}
#product_area .applicationItem::after {content: "";display: block;width: 1px;height: calc(100% - 10px);background-color: #d3d3d3;position: absolute;right: -10px;top: 0;}
#product_area .applicationItem:nth-child(4)::after,#product_area .applicationItem:nth-child(8)::after,#product_area .applicationItem:nth-child(12)::after { width: 0px }
#product_area .applicationItem:nth-child(9)::before,#product_area .applicationItem:nth-child(10)::before,#product_area .applicationItem:nth-child(11)::before,#product_area .applicationItem:nth-child(12)::before { height: 0px }
#product_area .applicationItem.title .item {display: -ms-flexbox;display: flex;-ms-flex-direction: column;flex-direction: column;-ms-flex-pack: center;justify-content: center;padding: 50px 25px;}
#product_area .applicationItem.title .item .more_btn {position: relative;margin: 5px;}
#product_area .more_btn.white a::after {   }
#product_area .more_btn.white a:hover font { color: #ffffff; }
#product_area .section-header { text-align: center; padding-bottom: 30px; }
#product_area .section-title { font-size: 2.6rem; line-height: 1.2em; font-weight: 600; }
#product_area .applicationList { display: grid; grid-template-columns: repeat(4,1fr); grid-auto-rows: minmax(200px,auto); gap: 20px; width: min(90%,1400px); margin: 0 auto; }
#product_area .service-item {background: #f4f7f9;display: flex;flex-direction: column;position: relative;transition: unset; /* No transition until hovered */}
#product_area .item-media {flex: 1;aspect-ratio: 3/4;background: white;position: relative;overflow: hidden;}
#product_area .svg-clip-handler {width: 100%;height: 100%;display: block;position: relative;opacity: .35;}
#product_area li:hover .item-media:before{content:'';position: absolute;width: 100%;height: 100%;top: 0;background: #081343;left: 0;z-index: 0;}
#product_area .service-item:hover circle { transform: scale(2); transition: transform 0.6s ease-in-out; /* Apply transition only on hover */ }
#product_area .item-content {width: 100%;height: 100%;padding: 50px 40px;}
#product_area li:hover .item-content *{color:white}
#product_area .item-content .Img{width:50px;aspect-ratio: 1/1;position: absolute;right: 30px;}
#product_area .item-content .Img img{position:relative;z-index: 2;}
#product_area li:hover .item-content .Img img{-webkit-filter: contrast(0) brightness(150%);filter: contrast(0) brightness(200%);}
#product_area li:hover .item-content .Img:after{background:white}
#product_area .item-content .Img:after{content:'';position: absolute;left: -10px;width: 100%;aspect-ratio: 1/1;border-radius: 50px;background: var(--primary);z-index: 0;opacity: .15;top: -5px;animation: breatheEffect 5s infinite ease-in-out;}
@keyframes breatheEffect{0%{opacity:0.15;transform:scale(1);}50%{opacity:0.05;transform:scale(1.05);}100%{opacity:0.15;transform:scale(1);}}
#product_area .item-content .num{font-size: 35px;font-family: 'Arimo';font-weight: 600;color: #bfbebe;}
#product_area .item-subtitle {font-size: 22px;color: var(--primary);margin-bottom: 25px;letter-spacing: 2px;font-weight: 500;/* display: inline-block; *//* border-bottom: 2px solid #bfbebe; *//* padding-bottom: 5px; */}
#product_area .item-desc {color: #666;line-height: 2;-webkit-line-clamp: 4;height: auto;text-align: justify;}
#product_area .item-details { margin-top: 15px; border-top: 1px solid #eee; padding-top: 15px; }
#product_area .item-details p { font-size: 0.85rem; color: #444; margin-bottom: 8px; border-left: 3px solid #c9a227; padding-left: 10px; }
#product_area .svg-text { fill: rgba(255,255,255,0.3); font-size: 1.5rem; font-weight: 700; text-anchor: middle; pointer-events: none; }
#product_area .svg-masked-text {fill: #fff;font-size: 1.5rem;font-weight: 700;text-anchor: middle;pointer-events: none;text-shadow: 0 0 10px rgba(0,0,0,0.5);display: none;}

/* about_area */
#about_area {padding-bottom: 10vw;z-index: 5;background-image: url(/images/44/shadow-justice-scales-balance.jpg);position: relative;background-size: cover;background-position: 50% 50%;background-repeat: no-repeat;}
#about_area *{color:white}
#about_area .title_box .entit:first-letter{color:white}
#about_area .title_box .page_title:after{background:white}
#about_area h1{line-height: 2;font-size: 19px;margin: 50px 0 5px;letter-spacing: .8px;}
#about_area:before{content:'';position: absolute;width: 100%;height: 100%;top: 0;background: #252525;opacity: .65;}
#about_area:after{content:'';background: white;width: 45%;height: 90px;position: absolute;bottom: 0;left: 0;transform-origin: bottom;transform: skewX(40deg);}
#about_area .workframe{display:grid;grid-template-columns: 35% 50%;justify-content: space-between;align-items: center;width: min(85%, 1550px);margin-right: 0;}
#about_area .title_box { padding-bottom: 0; }
#about_area h2 { font-size: 45px; font-style: italic; }
#about_area article p {margin-bottom: 50px;line-height: 2.2;text-align: justify;letter-spacing: .5px;font-weight: 300;}
#about_area .about_sub_1 {width: 300px;top: -5vw;left: -6vw;animation: aboutImgAnimation 10s ease-in-out infinite;}
#about_area .about_sub_1 img{aspect-ratio:3/4}
#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: 410px;aspect-ratio: 1/1;bottom: 80px;right: 27vw;border-radius: 50%;overflow: hidden;box-shadow: 30px 20px rgb(3 31 148 / 80%);}
#about_area .about_sub_2 img{aspect-ratio:1/1;filter: saturate(70%);}
#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{order: 2;border-radius: 220px 0 0 0;overflow: hidden;}
#about_area #about_img img{aspect-ratio: 4/3;}
@keyframes aboutImgAnimation{0%{-webkit-transform:translateY(0);transform:translateY(0);}50%{-webkit-transform:translateY(10px);transform:translateY(10px);}100%{-webkit-transform:translateY(0);transform:translateY(0);}}

/* custom_area */
#custom_area .parallax_svg { --parallax_wave: color-mix(in srgb, var(--secondary) 80%, white); }
#custom_area .parallax_svg.top { -webkit-mask-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='black'/%3E%3C/svg%3E"); mask-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='black'/%3E%3C/svg%3E"); }
#custom_area .parallax_svg.bottom { -webkit-mask-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='black'/%3E%3C/svg%3E"); mask-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='black'/%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; }

/* newsBox */
#newsBox {padding-top: 3vw;}
#newsBox .bg_box {z-index:-1;background-size: cover;background-position: right;background-repeat: no-repeat;}
#newsBox .bg{opacity:1;top: 70%;z-index: -1;background-position: top;background-size: cover;background-repeat: no-repeat;height: 120vh;width: 100%;opacity: .25;}
#newsBox .info {width: min(90%, 1400px);display: grid;margin: 0 auto;grid-template-columns: 35% 55%;justify-content: space-between;align-items: end;}
#newsBox .info .photo {margin-top: 140px;position: relative;}
#newsBox .info .photo span{position:absolute;z-index: -1;animation: aboutImgAnimation 6s ease-in-out infinite;}
#newsBox .info .photo .ngradient1{left: -85px;bottom: -50px;animation: aboutImgAnimation 10s ease-in-out infinite;}
#newsBox .info .photo .ngradient2{bottom:-125px;left: 60px;animation: aboutImgAnimation 6s ease-in-out infinite;}
#newsBox .info .photo .ngradient3{top:-120px;right: 170px;}
@keyframes aboutImgAnimation{0%{-webkit-transform:translateY(0);transform:translateY(0);}50%{-webkit-transform:translateY(10px);transform:translateY(10px);}100%{-webkit-transform:translateY(0);transform:translateY(0);}}
#newsBox .info .entit {display:flex;align-items: baseline;justify-content: space-between;width: 88%;}
#newsBox .info .entit span{font-size:18px;color: var(--triadic1);font-family: "Noto Serif TC", serif;font-weight: 400;letter-spacing: 1.5px;}
#newsList{display:grid;gap: 30px;margin-bottom: 50px;}
#newsList li{position:relative;border-bottom: 1px solid rgb(161 161 161 / 35%);padding: 0 5% 35px 0;}
#newsList li:before{content:'';position: absolute;width: 0;height: 1px;bottom: -1px;left: 0;background: var(--primary);}
#newsList li:hover:before{width:100%}
#newsList li >a{position:absolute;width: 100%;height: 100%;top: 0;left: 0;z-index: 2;}
#newsList li .news_txt{display:grid;align-items: center;justify-content: space-between;grid-template-columns: 85px 125px 1fr;gap: 15px;}
#newsList li:hover .news_txt svg{transform: translateX(15px);}
#newsList li .news_txt a{font-size: 15px;color: var(--black);border-right: 1px solid var(--black);font-weight: 500;width: auto;}
#newsList li .news_txt .txt {font-size: 17px;color: var(--black);font-weight: 500;}
#newsList li .time{font-size: 14px;color: var(--black);font-family: 'Arimo';text-transform: uppercase;font-weight: 600;}
#newsBox .nrbox {position:absolute;right: 80px;z-index: 10;display: flex;align-items: center;justify-content: center;bottom: -135px;}
#newsBox .nrbox:before{content:url(/images/44/img-nleaf2.png);position: absolute;right: -72px;right: 0;bottom: 88%;z-index: -1;transform-origin: 50% 80%;animation: nrLeafFloat 7s ease-in-out infinite;will-change: transform;}
@keyframes nrLeafFloat{0%{transform:rotate(0deg) translate(0,0);}25%{transform:rotate(2deg) translate(6px,4px);}50%{transform:rotate(-1.5deg) translate(3px,10px);}75%{transform:rotate(2.2deg) translate(7px,4px);}100%{transform:rotate(0deg) translate(0,0);}}
#newsBox .nrbox:after{content:'';width: calc(100% + 20px);height: calc(100% + 20px);border: 2px solid var(--secondary);position: absolute;}


/* book_area */
#book_area .title_box{position:relative;margin: 0 35px;}
#book_area .more_btn{right:0;bottom: 3vw;}
#book_area li{margin:0 25px}
#book_area li .infoo{margin: 25px 30px 0;display: flex;flex-direction: column;align-items: stretch;gap: 10px;}
#book_area li .h3 {height: auto;font-size: 20px;-webkit-line-clamp: 2;font-weight: 500;letter-spacing: .5px;}
#book_area li p {height: auto;-webkit-line-clamp: 2;font-weight: 300;letter-spacing: .5px;font-size: 15px;color: #414141;margin-bottom: 30px;}
#book_area .slide-content-cta{position:relative;display:inline-block;vertical-align:middle;text-decoration:none;cursor:pointer;border:0;background:transparent;padding:0;outline:none;width:12rem;height:3rem}
#book_area .slide-content-cta .circle{transition:all 0.45s cubic-bezier(0.65,0,0.076,1);position:relative;display:block;margin:0;width:3rem;height:3rem;background: var(--secondary);border-radius:1.625rem}
#book_area .slide-content-cta .circle .icon{transition:all 0.45s cubic-bezier(0.65,0,0.076,1);position:absolute;top:0;bottom:0;margin:auto}
#book_area .slide-content-cta .circle .icon.arrow{left:0.625rem;width:1.125rem;height:0.125rem;background:none}
#book_area .slide-content-cta .circle .icon.arrow::before{position:absolute;content:"";top: -0.275rem;right:0.0625rem;width:0.625rem;height:0.625rem;border-top:0.125rem solid #fff;border-right:0.125rem solid #fff;transform:rotate(45deg)}
#book_area .slide-content-cta .button-text{transition:all 0.45s cubic-bezier(0.65,0,0.076,1);position:absolute;inset:0;padding:0.75rem 0;margin: 0 0 0 1.05rem;color: var(--black);font-weight:700;line-height:1.6;text-align:center;text-transform:uppercase;letter-spacing:0.12rem;font-size: 14px;}
#book_area li:hover .slide-content-cta .circle{width:100%}
#book_area li:hover .slide-content-cta .circle .icon.arrow{background:#fff;transform: translate(1rem,0);}
#book_area li:hover .slide-content-cta .button-text{color:#fff}

/* photo_area */
#photo_area .item {width: 260px;height: 200px;}
#photo_area .item img {height: 100%;object-fit: cover;}

@media screen and (min-width: 1025px) {
    #about_area{background-attachment: fixed;}
}
@media screen and (max-width: 1460px) {
	#about_area .about_sub_1 , #about_area .about_sub_2 , #about_area .about_sub_3 {width: 15vw;}
	#product_list { width: 500px; margin-left: 30px; }
	#product_list li .clip { height: 590px; }
	#about_area .about_sub_2 {right: 27vw;width: 22vw;}
    #about_area{padding-bottom: 14vw;}
}
@media screen and (max-width: 1280px) {
    #about_area .about_sub_1{display:none;}
    #about_area .workframe{width: 90%;}
}
@media screen and (max-width: 1024px) {
    section .title_box {padding-bottom: 6vw;}
    #about_area{padding-bottom: 20vw;}
    #about_area .about_sub_2{display:none;}
    #product_area .applicationList{grid-template-columns: repeat(3, 1fr);}
    #about_area #about_img{margin-bottom: 35px;}
	section { padding: 12vw 0 ; }
    #about_area .workframe{display: block;width: 95%;}
    #about_area .about_sub_1{display:block;left: unset;right: 0;width: 26vw;top: -20%;}
    #about_info{width:95%}
    #book_area .more_btn{bottom: 6vw;}
    #newsBox {padding-top: 8vw;}
}
@media screen and (max-width: 980px) {
    #newsBox .info .photo .ngradient1{left:50%}
    #newsBox .info .photo .ngradient2{left: 72%;}
    #newsBox .info .photo{margin:0}
    #newsBox .news_list{margin-top:40px;}
    #newsBox .info .photo >img{aspect-ratio: 5/3;width: 100%;object-fit: cover;}
    #newsBox .info{display:flex;flex-direction: column;align-items: stretch;}
    #about_area .about_sub_1, #about_area:after, #product_area .applicationItem:nth-child(2n)::after{display:none;}
    #product_area .applicationList{grid-template-columns: repeat(2, 1fr);}
	#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) {
    #product_area .applicationList{grid-template-columns: 1fr;}
    #product_area .applicationItem::after{display:none;}
}
@media screen and (max-width: 550px) {
	section .clip img { height: auto; }
    #newsList li .news_txt a{border:0}
    #newsList li{padding-right:0}
    #newsList li .news_txt{grid-template-columns: 85px 1fr;display: grid;justify-content: start;}
    #newsList li .news_txt .txt{grid-column: 1 / 3;}
    #newsList li .news_txt svg, #newsBox .more{display:none;}
    #newsBox .info .photo{display:none;}
    #book_area .title_box{margin: 0 15px;}
    #book_area .more_btn{bottom: 0;position: relative;margin-top: 40px;}
    #about_area{padding-bottom: 12vw;}
    #about_area .more_btn{position:relative;}
    section .title_box .page_title{font-size:30px;}
    #product_area .item-media{aspect-ratio: 3/3;}
	#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 {border-radius: 150px 0 0 0;}
	#about_area .about_sub_2 { bottom: 60vw; }
	#news_area li .row { margin: auto; width: 280px; }
    #book_area li{margin: 0 10px;}
}
@media screen and (max-width: 480px) {
	#book_area li.row { margin: auto; width: 250px; }
}