@charset "utf-8";
/* @import url('fonts.css'); */

/* CSS Document */
body{font-family: 'Raleway',sans-serif;font-size:16px;line-height:1.5;color:#333;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;/* padding-top: var(--headerH); */font-weight: 550;}
body::before{content:'';position:fixed;width:100%;height:100%;background:rgba(0,0,0,0.5);left:0;top:0;transition:0.3s all;opacity:0;-webkit-backdrop-filter:blur(1rem);backdrop-filter:blur(1rem);z-index:10;pointer-events: none;}
body:has(.isOpen)::before{opacity:1;pointer-events: all;}
body::after {content: '';position: fixed;top: 0;left: 0;width: 100%;height: 100%;background:#fff;z-index: 9999;pointer-events: none;opacity: 0;-webkit-transition: 1s cubic-bezier(0.42, 0, 0.58, 1);transition: 1s cubic-bezier(0.42, 0, 0.58, 1);}
body.page-fade::after {opacity: 1;}
a{color:#000;text-decoration:none;-o-transition:all .3s linear;-webkit-transition:all .3s linear;-moz-transition:all .3s linear;transition:all .3s linear}
a:hover{color:#777;}
*{ backface-visibility: hidden;-webkit-backface-visibility: hidden;-moz-backface-visibility: hidden;-ms-backface-visibility: hidden;}
img{
    image-rendering: -webkit-optimize-contrast; /* 针对WebKit引擎 */
    image-rendering: crisp-edges;	
}
/*---------------------- 基礎設定 ----------------------*/
/*反白設定
::selection { background: #666; color: #FFF; }
::-moz-selection { background: #666; color: #FFF; }
*/
.alertLine{border-color: #d40023;}
.red{color: #d40023;}

/* 回頂端 */
#goTop{--size:3rem;display:none;cursor:pointer;position:fixed;bottom:1rem;right:1rem;width:var(--size);aspect-ratio:1;line-height:var(--size);text-align: center;background: var(--mjColor);color: #fff;border-radius: 100rem;transition:0.3s all;}
#goTop:hover{background:#999;color:#FFF}

/*按鈕*/
.btnWrap {margin:2em 0;/* text-align:center; */}
.btnStyle{--cl:var(--mjColor);--hcl:var(--mjColorD);position: relative;font-weight: 500;line-height: 1.2;padding: 0.75rem 1rem;border-radius: 100rem;display: inline-block;background: var(--cl);color: #fff;min-width: 10rem;text-align: center;}
.btnStyle.--mt{margin-top:3rem}
.btnStyle.--border{background:transparent;border:1px solid var(--cl);color:var(--cl);}
.btnStyle:hover{box-shadow:var(--sdW,12.5rem) 0 0 var(--hcl) inset;color:#fff;}
.btnStyle .txt{}

/*RWD編輯器表格(X捲軸)*/
.tableContainer table td{min-width:100px;padding:5px;border:1px solid #ccc;white-space:inherit}

/*IE瀏覽器*/
.warning{width:100%;color:#fff;text-align: center;max-width: 1500px;padding: 60px 50px 50px;position:fixed;left:50%;transform: translate(-50%, -50%);top: 50%;background-color: #283d86;box-shadow:0 0 15px rgba(51,51,51,.5);border-radius:3px;z-index:9999999999;-o-transition:all .3s linear;-webkit-transition:all .3s linear;-moz-transition:all .3s linear;transition:all .3s linear;}
.off{cursor: pointer;position:absolute;right: 10px;top: 10px;border: 1px solid #eee;padding: 3px 5px 3px 10px;}
.off:hover{background-color:#fff;color:#333;}

.useTool p{font-size: 25px;font-weight: 600;margin-bottom: 30px;}
.useTool ul{padding-left:0;list-style:none}
.useTool li{display:inline-block;margin: 0 5px;}
.useTool a{display:block;background: #fff;padding: 7px 10px;border-radius: 60px;}
.useTool b{margin-bottom: 10px;display: block;text-align: center;}
.useTool figure{width: 30px;float:left;margin-right: 5px;margin-bottom: 0;}
.useTool span{float:right;margin-top: 2px;font-weight: 600;}
/* submit-loading */
.load-wrapp{position:fixed;width:100%;height:100%;background: rgb(0 0 0 / 65%);top: 0;left: 0;z-index: 99999;}
.loading{position:absolute;top:50%;left: 50%;transform: translate(-50%,-50%);}
.loading span{color:#fff;font-size: 25px;margin-top: 40px;display: table;}
.spinner {position: relative;width: 60px;height: 60px;margin: 0 auto;}
.bubble-1,.bubble-2 {position: absolute;top: 0;width: 30px;height: 30px;border-radius: 100%;background-color: #fff;}
.bubble-2 {top: auto;bottom: 0;}
.loading .spinner {animation: loadingI 2s linear infinite;}
.loading .bubble-1,.loading .bubble-2 {-webkit-animation: bubble 2s ease-in-out infinite;animation: bubble 2s ease-in-out infinite;-moz-animation:bubble 2s ease-in-out infinite;-o-animation:bubble 2s ease-in-out infinite;}
.loading .bubble-2 { animation-delay: -1s;}
/* animation:loadingI */
@-o-keyframes loadingI{100%{transform:rotate(360deg)}}
@-moz-keyframes loadingI{100%{transform:rotate(360deg)}}
@-webkit-keyframes loadingI{100%{transform:rotate(360deg)}}
@keyframes loadingI{100%{transform:rotate(360deg)}}
/* bubble */
@-o-keyframes bubble{0%,100%{transform:scale(0)}50%{transform:scale(1)}}
@-moz-keyframes bubble{0%,100%{transform:scale(0)}50%{transform:scale(1)}}
@-webkit-keyframes bubble{0%,100%{transform:scale(0)}50%{transform:scale(1)}}
@keyframes bubble{0%,100%{transform:scale(0)}50%{transform:scale(1)}}
/* submit-loading END*/
/*---------------------- 頁面開始 ----------------------*/
:root{
    --mjColor:#E97200;
    --mjColorD:#B85A00;
    --mjColorL:#FFF5EB;
    --dark:#3D4542;
    --dark-t25:rgb(61, 69, 66, 25%);
    --dark-t50:rgb(61, 69, 66, 50%);
    --ctOffset: clamp(2rem,3.5vw,4rem);

    --spaceS:clamp(3rem,4vw,5rem);
    --font:'Lato',sans-serif;
}

/*全頁佈局*/
.wow {opacity: 0;visibility: hidden;}
body.animate-ready .wow{opacity: 1;visibility:visible;transition: opacity 0.6s ease;}
.wrapper { padding:2rem 0;}
.blockHeight{padding: clamp(1rem,2vw,3rem) 0 clamp(3rem,6vw,6.25rem);}
.sr-only{  position: absolute;width: 1px;height: 1px;margin: -1px;padding: 0;overflow: hidden;clip: rect(0, 0, 0, 0);border: 0;}
.cover{margin:0;}

/*提醒:編輯器插入的圖需做以下設定，圖才不會變形*/
.tx01 img{max-width: 100%;height: auto!important;}
.tx01 p:last-child,.tx01 ul:last-child{margin-bottom:0}

/* 標題 */
.titleBox{}
.titleBox + .btnStyle{margin-top:2.5rem;}
.titleBox--w{color: #fff;}
.titleBox.--center{text-align:center;}
.titleBox__mj{font-size: clamp(2rem,3.25vw,3.5rem);font-weight: 600;margin-bottom: 2rem;}
.markTxt{color: var(--mjColor);}
.briefTxt{opacity: 0.85;font-size: clamp(1.125rem,1.2vw,1.25rem);letter-spacing: 0.05em;font-weight: 500;}
.txt:last-child{margin:0;}

/*!輪播-slickStyle*/
.slickStyle{--hoverBg:var(--mjColorD);--arrowCl:var(--mjColor);--dotCl:var(--mjColor);}
.slickStyle.slick-dotted.slick-slider{margin-bottom: 0;}
.slickStyle .slick-list{padding-bottom: 2.5rem;}
.slickStyle .slick-dots{display: flex;align-items: center;justify-content: center;bottom: 0;}
.slickStyle .slick-dots li,.slickStyle .slick-dots li button,.slickStyle .slick-dots li button:before{width: 0.75rem;height: 0.75rem;}
.slickStyle .slick-dots li{margin:0 0.375rem;}
.slickStyle .slick-dots li button:before{font-family: none;background: var(--dotCl);font-size: 0;border-radius: 100rem;display: flex;transition: 0.3s all;}
.slickStyle .slick-prev,.slickStyle .slick-next{width:2rem;height:2rem;top: calc(50% - 2.5rem);}
.slickStyle .slick-prev{left:-2.5rem;}
.slickStyle .slick-next{right:-2.5rem;}
.slickStyle .slick-prev:before,.slickStyle .slick-next:before{color: var(--arrowCl);display: inline-block;font-family: bootstrap-icons !important;font-style: normal;font-weight: normal !important;font-variant: normal;text-transform: none;line-height: 1;vertical-align: -.125em;font-size: 2rem;}
.slickStyle .slick-prev:before{content:'\F284';}
.slickStyle .slick-next:before{content:'\F285';}
.slickStyle .slick-arrow{transition:0.3s all;z-index: 1;}
.slickStyle .slick-arrow:after{content:'';position:absolute;background: var(--hoverBg);border-radius:2rem;width: calc(100% + 0.5rem);aspect-ratio: 1;left: 50%;top: 50%;transform: translate(-50%,-50%);z-index: -1;opacity: 0;transition: 0.3s all;}
.slickStyle .slick-arrow:hover:after{opacity:1;width: calc(100% + 1rem)}
.slickStyle .slick-arrow:hover:before{color:#fff;}

/*banner*/
.banner{--dotCl:#fff}
.banner .slick-dots li.slick-active,.banner .slick-dots li.slick-active button:before{width: 3rem;opacity: 1;}
.banner .slick-list{padding-bottom:0;}
.banner .slick-dots{bottom: clamp(1rem,2.5vw,3rem);padding: 0 var(--ctOffset);justify-content: end;}
.banner__box{position:relative}
.bannerTitle{margin:0;position:absolute;left:50%;bottom:50px;transform:translateX(-50%);color:#fff}
.pgBanner{width:100%;aspect-ratio:1920/440;position:relative;padding: 2rem 0;margin-top: var(--headerH);display: flex;align-items: flex-end;z-index: 0;min-height: 12.5rem;}
.pgBanner:after{content:'';position:absolute;width:100%;height:100%;background: linear-gradient(to bottom,#1A1A1A 0%,transparent);left: 0;top: 0;pointer-events: none;z-index: -1;}
.pgTitle{font-size: clamp(3rem,6vw,6.25rem);font-weight: 300;color:#fff;line-height: 1;}
.breadCrumbWrap{padding: 1rem 0;margin-top: var(--headerH);}
.pgBanner + .breadCrumbWrap{margin-top:0}
.breadCrumb{display:flex;justify-content: flex-start;flex-wrap: wrap;font-weight: 550;text-transform: uppercase;font-size: clamp(0.875rem,1vw,1rem);}
.breadCrumb__item + .breadCrumb__item{position:relative;}
.breadCrumb__item + .breadCrumb__item:before{content:'>';margin:0 0.625rem;color:var(--dark);transform: translateY(-0.125rem);display: inline-block;}
.breadCrumb__item:last-child{color:var(--mjColor);}

/*!header*/
.navbar{transition:0.3s all;}
.navbar--fixed,.navbar--pg{background: #1A1A1A;}
.navWrap{display: flex;gap: clamp(0.875rem,1.2vw,1.5rem);flex-direction: row-reverse;align-items: center;}
.logo{margin: 0;}
.navbar-brand{margin:0;padding: 0;position: relative;display: flex;align-items: center;transform: translateY(0.125rem);}
.navbar-brand .logo{--asp:200/48;position:relative;display: inline-flex;align-items: center;gap: clamp(0.125rem,0.5vw,0.5rem);}
.logo__pic {width: clamp(6.25rem,12vw,12.5rem);}
.logo__txt{font-size: clamp(0.5rem,0.8vw,1rem);font-weight: 700;color: #fff;}
.funcBtn{display: flex;gap:1rem;align-items: center;gap: clamp(0.75rem,1vw,1rem);}
.funcBtn__item{--btnP: clamp(0.375rem,0.7vw,0.75rem);--cl:#fff;display:inline-block;padding: var(--btnP) calc(var(--btnP) * 1.6);border-radius:100rem;border: 1px solid var(--cl);line-height: 1;font-size: clamp(0.875rem,0.875vw,1rem);}
.funcBtn a{color: #fff;}
.searchBox__toggle{font-size: 1.125rem;}
.searchBox{position:relative;}
.searchBox__form__box{padding: 0.25rem;padding-left:1rem;border:1px solid #fff;border-radius:100rem;display: flex;}
.searchBox__form__box input{background:transparent;border:none;min-width: 20rem;color: #fff;font-family: var(--font);}
.searchBox__form__box input:focus{outline:none;}
.searchBox__form__box input::placeholder{color:rgba(255,255,255,0.7);font-size:0.8375rem;font-family:'Raleway',sans-serif;}
.searchEnter{padding:0.25rem 0.5rem;border-radius: 100rem;position: relative;}
.searchEnter:after{content:'';position:absolute;width: 100%;aspect-ratio:1;background:var(--mjColor);left: 50%;top:50%;transform: translate(-50%,-50%);border-radius:inherit;z-index:-1;transition: 0.3s all;opacity: 0;}
.searchEnter:hover:after{opacity:1;width:calc(100% + 0.5rem);}

/* .searchBox__form{position: fixed;left: 0;top: 0;width: 100%;height: 100%;background: rgba(0,0,0,.75);align-items: center;padding: var(--ctOffset);display: flex;justify-content: center;-webkit-backdrop-filter: blur(0.125rem);backdrop-filter: blur(0.125rem);pointer-events: none;transition: 0.3s all;opacity: 0;}
.searchBox__form__close{--sp:clamp(1rem,2vw,2rem);color:#fff;position:absolute;right: var(--sp);top: var(--sp);font-size: var(--sp);cursor: pointer;}
.searchBox__form__box{width: 100%;max-width: 1000px;margin:auto;display: grid;grid-template-columns: 1fr clamp(2.5rem,3vw,3rem);font-size: clamp(1.125rem,1.4vw,1.5rem);gap: 0.5rem;}
.searchBox__form__box input{background:transparent;border:none;border-bottom:1px solid #fff;border-radius:0;color: #fff;padding: 0.5rem 0;}
.searchBox__form__box input:focus{outline:none;}
.searchEnter{display:inline-flex;align-items: center;justify-content: center;border-radius:100rem}
.searchEnter:hover{background:var(--mjColor);} */

.--isOpen .searchBox__form{opacity:1;pointer-events:all}

/*-header-手機按鈕*/
.navbar-toggler{--cl:#fff;border:none;display: grid;flex-direction: column;gap: 0.375rem;object-fit: cover;object-position: center;justify-content: center;padding: 0.5rem 0;}
.navbar--bg .navbar-toggler,.navbar--pg .navbar-toggler, .navbar--fixed .navbar-toggler{--cl:var(--mjColor)}
.navbar-toggler:focus{box-shadow: none;}
.navbar-toggler__line{width: 1.625rem;height: 2px;background: var(--cl);display: inline-block;border-radius: 100rem;transition: 0.3s all;}
.navbar-toggler.isOpen{--cl:var(--mjColor);clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);}
.navbar-toggler.isOpen .navbar-toggler__line:nth-child(1){transform:translateY(0.5rem) rotate(225deg);}
.navbar-toggler.isOpen .navbar-toggler__line:nth-child(2){transform:translateX(0.5rem);opacity:0;}
.navbar-toggler.isOpen .navbar-toggler__line:nth-child(3){transform:translateY(-0.5rem) rotate(-225deg);}

.navbar-toggler.isOpen + .menuBar{opacity:1;pointer-events:all;transform: translateY(0);}
.serachHZone__box{position: fixed;opacity: 0;}
.navbar-nav{gap: 0 1rem;}
.nav-link{padding: 1.5rem 0;}

.nav-item{position:relative;}
.navDrop{position:absolute;background:var(--dark);display:flex;flex-direction:column;left: 50%;top: 80%;transform: translateX(-50%);width: auto;pointer-events: none;opacity: 0;transition: 0.3s all;}
.navDrop__item{color:#fff;padding: 0.5rem 1rem;text-wrap-mode: nowrap;letter-spacing: 0.02em;}

/*!footer*/
footer{background: #1A1A1A;color:#fff;padding: var(--spaceS) 0 2.5rem;}
footer a{color:#fff}
.fTop{display:flex;justify-content: space-between;margin-bottom: clamp(2rem,3vw,4rem);gap: 3rem 1rem;flex-wrap: wrap;}
.fInfor__tt{font-size:1.125rem;font-weight:800;letter-spacing:0.05em;margin-bottom: clamp(1.5rem,2vw,2.5rem);}
.fInfor__list{margin-bottom: clamp(2rem,3vw,3.5rem);display: flex;flex-direction: column;gap: 0.5rem;}
.fInfor__list__item{display:inline-flex;gap:0.625rem;}
.fInfor__social{display:flex;gap: 1rem;}
.fInfor__social__item{display: inline-flex;width:2.25rem;aspect-ratio:1;background:#fff;border-radius:100rem;align-items: center;justify-content: center;color: #000;}
.fSite{display:flex;gap: 1rem clamp(2rem,3vw,5rem);flex-wrap: wrap;}

/*!首頁-pdt*/
.blockHeight--ixPdt{background: #1A1A1A;padding-top: clamp(4rem,7vw,7.5rem);padding-bottom: 0;border-bottom: 2.5rem solid var(--mjColor);overflow: hidden;}
.briefTxtWrap{display: flex;gap: 1rem 3rem;align-items: flex-end;justify-content: space-between;}
.blockHeight--ixPdt .briefTxt{color: #fff;max-width: 62.5rem;line-height: 1.5;}
.pdtBox{--num:4;display: grid;gap: 1rem;grid-template-columns: repeat(var(--num),1fr);}
.pdtBox--search{--num:5}
.pdtBox__item{border-radius:1rem;overflow:hidden;display: inline-block;margin: 0 var(--offset,0px);border: 1px solid var(--bs-border-color);}
.cover.--pdt{overflow:hidden;}
.cover.--pdt .cover__pic{transition:0.3s all;aspect-ratio: 1;object-fit: contain;background: #fff;width: 100%;}
.pdtSort{margin-bottom: 0.5rem;}
.pdtBox__item__ct{background:#D1D0CD;padding: 1.25rem 1rem;text-align: center;display: flex;flex-direction: column;gap: 0.25rem;font-size: 0.875rem;transition: 0.3s all;}
.pdtName{letter-spacing: 0.05em;font-weight: 500;/* min-height: clamp(2.25rem,3vw,3rem); */display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis;min-height: 2lh;}
.pdtPrc{}
.ixPdtWrap{margin-top: 4rem;background: #F7F6F2;padding: clamp(2rem,3.5vw,3.75rem) clamp(1.5rem,3vw,3rem);padding-bottom: 5rem;border-radius: 2rem 2rem 0 0;}
.pdtBox--slick{--offset: clamp(0.25rem,0.7vw,0.75rem);overflow: hidden;}
.pdtBox--slick .slick-list{margin: 0 calc(var(--offset) * -1);}
.pdtAxis{--arrowW:3rem;--arrowGap:0.75rem;display: flex;gap:3rem;justify-content: space-between;align-items: center;}
.pdtAxis__dot{width:calc(100% - var(--arrowW) * 2 - var(--arrowGap));}
.pdtAxis__dot__item{list-style:none;display: flex;margin: 0;padding: 0;}
.pdtAxis__dot__item li{flex:1;}
.pdtAxis__dot__item button{width:100%;border: none;display: block;color: transparent;height: 0.125rem;background: #333;opacity: 0.25;transition:0.3s all;}
.pdtAxis__dot__item button:focus{outline:none;}
/* .pdtAxis__dot__item li.slick-active{max-width:6.25rem;} */
.pdtAxis__dot__item li.slick-active button{opacity:1;}
.pdtAxis__arrow{display:inline-flex;gap:var(--arrowGap);}
.arrowStyle{display: inline-flex;width:3rem;aspect-ratio: 1;border: 1px solid var(--dark-t25);align-items: center;justify-content: center;border-radius: 100rem;}

/*!首頁-sourcing*/
.blockHeight--ixSourcing{padding: clamp(4rem,6vw,6.25rem) 0 0;}
.scBox{display:flex;gap: var(--spaceS);}
.scBox__item{display:flex;flex-direction:column;gap: clamp(1rem,1.5vw,1.875rem);align-items: center;text-align: center;}
.scBox__item img{max-width:5rem}
.scBox__item__ct{display:flex;flex-direction:column;gap:1rem;}
.scBox__item__ct .itemTxt{width:90%;margin:auto;}
.scBox__item .bi{font-size: 2.25rem;line-height: 1;}
.itemTt{font-size: 1.25rem;letter-spacing: 0.05em;font-weight: 700;}
.itemTxt{font-size: 0.875rem;letter-spacing: 0.05em;font-weight: 500;line-height: 1.5;}
.scGallery{display:flex;margin-top: 5rem;}
.cover.--sc{flex:1;}

.blockHeight--ixGit{padding: 3rem 0;}
.gitBoxWrap{--imgW: clamp(15rem,50vw,50rem);--gap: clamp(3rem,12vw,10rem);display:flex;gap: 2rem var(--gap);/* margin-left: calc(var(--ctOffset) * -1); */align-items: center;}
.cover.--git{transform: translateY(-5rem);width:var(--imgW);}
.cover.--git .cover__pic{width: 100%;}
.gitBox{width:calc(100% - var(--imgW) - var(--gap));max-width: var(--imgW);}

/*!pg-contact*/
.blockHeight--contact{}
.contactWrap{--dataW: clamp(20rem,30vw,32rem);--gap: 3rem;display:flex;gap: 2rem var(--gap);/* max-width: 1200px; */margin: auto;}
.ctBrief{width:var(--dataW);}
.ctForm{width:calc(100% - var(--dataW) - var(--gap));}
.ctBrief__tt{color:var(--mjColor);font-weight:600;margin-bottom:1rem;font-size: 1.25rem;}
/* .ctBrief__txt{margin-bottom:2rem;}
.ctBrief__box{display:flex;flex-direction:column;gap:1rem}
.ctBrief__box__item{} */
.ctBrief__txt{font-size: clamp(1rem,1vw,1.125rem);margin-bottom: 1rem;}
.ctBrief__box{display:flex;gap:1rem;flex-direction: column;}
.ctBrief__box__item{flex:1;padding: clamp(1rem,1.2vw,1.5rem);box-shadow: 2px 2px 5px rgba(0, 0, 0, .1),-5px -5px 5px #F8FAFA;border-radius:0.375rem;}
.ctBTt{--sp:0.75rem;font-weight:700;font-size:1.25rem;letter-spacing:0.01em;padding-bottom:var(--sp);margin-bottom: calc(var(--sp) * 1.25);border-bottom: 1px solid var(--dark-t25);display: flex;gap: 1rem;justify-content: space-between;}
.ctBTt:after{font-family:'bootstrap-icons';color:var(--mjColor);}
.ctBTt.--mail:after{content:'\F32F';}
.ctBTt.--geo:after{content:'\F3E8';}

.formGroup{display:flex;flex-direction:column;gap:1rem;}

.closeIcon{display:none;}
.sidebar-btn{display: inline-block;font-weight: 700;margin-bottom: 1rem;font-size: 1.125rem;}
.sideNav{display:flex;flex-direction:column;gap: 2rem;}
.sideNav__box__tt{--offset:0.5rem;font-size: 1.125rem;font-weight: 600;margin-bottom: var(--offset);padding-bottom: var(--offset);border-bottom: 1px solid #ddd;}
.sideLItem__link{display: flex;justify-content: space-between;gap: 1rem;padding: 0.5rem;font-weight: 490;}
.sideLItem__sort__ct{padding:0.375rem 0;position: relative;display: flex;justify-content: space-between;padding-left: 1rem;}
.sideLItem__sort__ct:before{content:'-';position:absolute;left:0;top:50%;transform:translateY(-50%);}
.active.sideLItem__sort__ct{color:var(--mjColor);}
.sideName{display:flex;gap: 0.5rem;align-items: center;}
.sideImg{width: 1.25rem;border-radius:100rem;}
.sideNum{display:inline-block;padding:0.125rem 1rem;line-height:1;border:1px solid #ddd;border-radius:100rem;}
.sideNav__box__list{max-height: calc(100dvh - var(--headerH) - 6.25rem);overflow-y:auto;}

.sideLItem .sideLItem__sort{display:none;margin-left: 0.5rem;}
.sideLItem.active .sideLItem__sort, .sideLItem.active .sideLItem__sort{display:block;}
.sideLItem.active .sideLItem__link,.sideLItem:has(.active) .sideLItem__link{background: var(--mjColorL);}

.pdtDBox{margin-bottom:1rem}
.pdtDTop{--imgW: clamp(12rem,25vw,34rem);--gap:2rem;display: flex;gap: var(--gap);}
.pdtDTop__media{width: var(--imgW);}
.pdtDTop .cover{border:1px solid #ddd;display: block;border-radius: clamp(0.5rem,1vw,1rem);overflow: hidden;cursor: zoom-in;}
.cover.--pdtD .cover__pic{aspect-ratio:1;object-fit: contain;}
.backLink{position: relative;color: var(--mjColor);font-weight: 600;display: flex;justify-content: center;margin-top: 2rem;}
.backLink:hover{--cl:Var(--mjColor);}
.backLink .txt{position:relative;padding: 0.875rem 1.5rem;background: var(--cl,#000);color:#fff;border-radius: 100rem;font-size: 0.875rem;transition: 0.3s all;}
.backLink .txt:before{content:'<';margin-right: 0.625rem;transform: translateY(-0.125rem);display: inline-block;}
.pdtDTop__ct{width: calc(100% - var(--imgW) - var(--gap));padding: 0.5rem 0;}
.pdtDTt{font-size: clamp(1.5rem,2vw,2rem);margin-bottom:1rem;font-weight: 700;}
.pdtDBrief {font-size:1.125rem;margin-bottom: 2rem;}
.pdtThumb{width:100%;display: flex;gap: 1rem;}
.pdtThumb img{max-width: clamp(5rem,8vw,8rem);width: 100%;}
.pdtDBtm{margin-top:2rem;}
.tbWrap{position:relative;}
.tbWrap__inner{overflow-x:auto;position: relative;}
.scrollNote{/* padding:0.5rem 0; */position:relative;display: none;gap:0.5rem;justify-content: center;animation: gapChange 1.5s infinite;background: #888;color: #fff;}
.scrollNote:before{content:'⭠'}
.scrollNote:after{content:'⭢'}
@keyframes gapChange{
    0%,90%,100%{gap:0.5rem}
    50%{gap:1rem}
}

.tbStyle{min-width:1000px;}
.thead{display:flex;background: #000;color: #fff;font-weight: 800;}
.tbody{font-family: var(--font);font-weight:700}
.tbItem{padding: 0.5rem 1rem;flex: 1;display: inline-flex;align-items: center;}
.tbody__item{display:flex;}
.tbody__item:nth-child(odd){background:#f1f1f1;}
.tb-desc{width: 15rem;flex: auto;}

/*!page_number*/
.pageNumber{display:flex;padding: 1rem 0;gap: 2rem;flex-wrap: wrap;justify-content: center;align-items: center;margin-top: 2rem;}
.pageNumber a{display: block;aspect-ratio:1;height: 2rem;text-align: center;padding: 0.25rem;border-radius:1.5rem;transition:0.3s all;display: flex;align-items: center;justify-content: center;border-radius: 0;}
.pageNumber a:hover,.pageNumber a.on{background: var(--mjColor);color: #fff;border-radius: 1rem;}
.pageNumberInner{display:flex;flex-wrap:wrap;}
.pageNumber__total{display:flex;gap: 0.5rem;align-items: center;background: var(--dark-t25);padding: 0.25rem 1rem;border-radius: 100rem;}
.pageEnter{display:flex;gap:0.25rem;align-items: center;position:relative}
.pageEnter:before{content:'/';opacity:0.5;}
.pageEnter input{padding:0.125rem 0.25rem;max-width:2.5rem;text-align:center;}

.searchTt{display:flex;gap:0.25rem;margin-bottom:1rem;flex-wrap: wrap;font-size: clamp(1.75rem, 2.2vw, 2.25rem);font-weight: 600;}
.searchTt__kw{font-family:var(--font);}

/*=====RWD=====*/
@media screen and (min-width: 1480px) {
    .container{max-width: 100%;padding: 0 var(--ctOffset);}
    .container.--small{max-width: 1320px;padding: 0 1rem;}

    .menuBar{position:absolute;left:50%;top: 50%;transform:translate(-50%,-50%);}
}
@media screen and (min-width:992px){
    .arrowStyle:hover{background: var(--dark);color: #fff;}
    /*!992 header*/
    .navbar{padding: 1rem 0;border-bottom: 1px solid var(--dark-t50);}
    .navbar:hover,.navbar--pg{background: #1A1A1A;}
    .nav-link{color:#fff;font-weight: 600;}
    .nav-link:hover{color:var(--mjColor);}
    .funcBtn__item:hover{--cl:var(--mjColor);background:var(--cl);}
    .navbar-nav{gap:1rem;}
    .navWrap{gap: 3rem;flex-direction: row;}
    .nav-link:focus, .nav-link:hover{color:rgba(255,255,255,0.8)}

    .nav-item:hover .navDrop{opacity:1;pointer-events:all;top:100%;}
    .nav-item:hover .nav-link{color:var(--mjColor);}
    
    .pdtBox__item:hover{color:#333;}
    /* .pdtBox__item:hover .pdtName{color:var(--mjColorD);} */
    .pdtBox__item:hover .pdtBox__item__ct{background: #f0b57b;background: #f4d9bc;}
    .pdtBox__item:hover img{transform: scale(1.08);} 
    
    .cover.--sc{transform-origin: left center;transform: rotateY(45deg);filter: opacity(0);}
    .animated.cover.--sc{transform:rotateY(0);transition: 1s all;transition-delay: calc(0.125s + var(--dataNum) * 0.125s);filter: opacity(1);}

    .cover.--git{transform: translateX(-25%) translateY(-5rem);filter: opacity(0);}
    .animated.cover.--git{filter:opacity(1);transform: translateY(0);transition: 1s all;transition-delay: 0.75s;}

    /*!992 內頁-側選單*/
    .sidebar-btn{display: none;}
    .sideWrap{--barW: clamp(15rem,20vw,22rem);--gap: clamp(2rem,3vw,4rem);display: flex;gap: var(--gap);align-items: flex-start;}
    .sidebar{width:var(--barW);position: sticky;top: calc(var(--headerH) + 1rem);left: 0;}
    .active.sideLItem {padding-bottom:1rem;}
    .sideContent{width:calc(100% - var(--barW) - var(--gap));}
}

/*=====MAX=====*/
@media screen and (max-width: 1401px) {
    .pdtBox{--num:3}

    .scrollNote{display:flex;margin-top: 0.25rem;}
}

@media screen and (max-width: 991px) {
   .container, header .container{max-width: 100%;padding: 0 clamp(1rem,2vw,2rem);gap: 1rem;}
    .menuBar{position: absolute;width: 100%;left: 0;top: 100%;background: #fff;opacity: 0;pointer-events: none;transition: 0.3s all;transform: translateY(1rem);max-height: calc(100lvh - var(--headerH));overflow-y: auto;}
    .nav-link{padding:1rem;}
    .nav-link:has(+ .navDrop){padding-right:2.5rem}
    .nav-link:has(+ .navDrop):after{content:'\F282';font-family:'Bootstrap-icons';position:absolute;right:1rem;}

    .navDrop{position:static;opacity: 1;pointer-events: all;transform: none;display: none;}
    .nav-item.isDrop .navDrop{display:flex;}
    .nav-item.isDrop .nav-link:has(+ .navDrop):after{transform:scale(-1)}
    .navDrop__item{/* color:var(--dark); */padding: 0.625rem 1rem;}

    /*!991 首頁-sourcing*/
    .scBox{flex-direction: column;}

    .briefTxtWrap{flex-direction:column;}
    /*!991 首頁-getintouch*/
    .gitBox {width:100%;max-width: max-content;}
    .gitBoxWrap{flex-direction: column-reverse;}
    .cover.--git{transform:none;width:100%;}

    .blockHeight--ixSourcing{overflow: hidden;}
    .scGallery{width: clamp(75rem,120vw,125rem);animation: scroll 30s linear infinite;}
    .scGallery:hover{animation-play-state: paused;}
    @keyframes scroll{
        0%{transform: translateX(0);}
        100%{transform: translateX(-1000px);}
    }

    /*!內頁-side*/
    .closeIcon{display:flex;justify-content: flex-end;margin-bottom: 0.5rem;}
    .sideNavWrap{position:fixed;top:var(--headerH);left:0;background:#fff;padding:1rem;min-width: 17.5rem;bottom:0;transform: translateX(-100%);z-index:10;transition: 0.3s all;}
    .isOpen + .sideNavWrap{transform:translateX(0);}

    /*!內頁-contact*/
    .contactWrap{flex-direction: column;}
    .ctBrief{width:100%;}
    .ctForm{width:100%}
}
@media screen and (max-width: 768px) {
    /*!768==RWD編輯器表格(X捲軸)*/
	.tableContainer{width:100%;overflow-x: scroll;overflow-y:auto;_overflow:auto;margin:0 0 1em}

    .navbar-brand{transform:translateY(0.375rem)}

    .pdtBox{--num:2}
    .navWrap{width:100%;}
    .funcBtn{display:flex;width: 100%;justify-content: center;}
    .navbar-toggler{position:absolute;right:1rem;top:0.5rem;}
    .funcBtn__item{position:absolute;right: 4rem;top: 0.625rem;}
    .searchBox__form__box input{width: calc(100vw - 5.5rem);min-width: auto;}

    .searchBox__form__box{padding: 0.125rem 0.375rem;padding-left:1rem;}
}
@media screen and (max-width: 640px) {
    .pdtDTop{flex-direction: column;gap: 1rem;}
    .pdtDTop__media{width:100%;}
    .pdtDTop__ct{width:100%}
    .backLink{text-align:right;}
    .sidebar-btn{display:block;border: 1px solid #858585;padding:0.25rem;text-align:center;}
    .pdtThumb{--num:5;--gap:clamp(0.5rem,1vw,1rem);/* display:grid; *//* grid-template-columns:repeat(5,1fr); */gap: var(--gap);display: flex;}
    .pdtDTop__media__pic{flex:1;min-width:calc((100% - var(--gap,0px) * (var(--num) - 1)) / var(--num) );}
    .pdtThumb img{max-width:100%}

}
@media screen and (max-width: 480px) {
    .ixPdtWrap{margin: 0 -1.5rem;margin-top: 3rem;}
    .pdtBox{--num:1}

    .pdtName{min-height:auto;}
}