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

/* CSS Document */
body{font-family:'Roboto','Noto Sans TC', sans-serif;font-size:16px;line-height: 1.8;color:#333;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;padding-top: var(--headerH);}
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;	
}

p, figure{margin: 0;}
picture{display: block;width:100%;height:100%;}

/*---------------------- 基礎設定 ----------------------*/
/*反白設定
::selection { background: #666; color: #FFF; }
::-moz-selection { background: #666; color: #FFF; }
*/
.alertLine{border-color: #d40023;}
.red{color: #d40023;}

/* 回頂端 */
#goTop{display:none;cursor:pointer;position:fixed;bottom:0;right:0;width:clamp(3rem,4vw,4rem);height:clamp(3rem,4vw,4rem);background:var(--dark);transition: all .5s;}
#goTop .arrow{position: relative; line-height:clamp(3rem,4vw,4rem);text-align:center;color:white;transition: all .5s;}
#goTop:hover{background:var(--mainColor);color:white;}
#goTop:hover .arrow{animation: goTopArrow 1s ease-in infinite alternate;}
@keyframes goTopArrow {
    0%{top: 0rem;}
    100%{top: -.5rem;}
}


/*RWD編輯器表格(X捲軸)*/
.tableContainer table td{min-width:100px;padding:5px;border:1px solid #ccc;white-space:inherit}
@media screen and (max-width: 768px) {
	.tableContainer{width:100%;overflow-x: scroll;overflow-y:auto;_overflow:auto;margin:0 0 1em}
}
/*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{
    --headerH: clamp(60px,10vw,120px);

    
    --mainColor:#79357e;
    --mainColorD:#36003E;
    --dark:#191919;
    --gray:#999999;
    --grayD:#3a3a3a;
    --lightGray:#DBDBDB;


    --hf--space:0 clamp(1rem,4vw,5rem);
    --container--space: clamp(2rem, 15vw, 15rem);
}


/*全頁佈局*/
.bg-fixed {position: fixed;top: 0;left: 0;width: 100vw;height: 100vh;background: url(../images/all/texture.png) no-repeat center center;background-size: cover;z-index: -5;pointer-events: none; }
.wrapper { padding:2rem 0;}
.blockHeight{padding: clamp(4rem,8vw,8rem) 0;}
.blockHeight--top{padding-top:0;}
.blockHeight--gray{background:var(--lightGray);}
.container{max-width: unset;padding: 0 var(--container--space);}
.container--db{padding: 0 calc(var(--container--space)*2);}
.sr-only{position: absolute;width: 1px;height: 1px;margin: -1px;padding: 0;overflow: hidden;clip: rect(0, 0, 0, 0);border: 0;}


/* 全站卷軸 */
/* 捲軸寬度及高度 */
::-webkit-scrollbar {
    width: .5rem; /*右側捲軸寬度*/
    height: .5rem; /*下方捲軸高度*/
  }
  /* 軌道背景底色 */
  ::-webkit-scrollbar-track {background: var(--lightGray);}
   
  /* 滑桿樣式 */
  ::-webkit-scrollbar-thumb {background:var(--gray); border-radius: .5rem;}
  ::-webkit-scrollbar-thumb:hover {background: var(--gray); opacity: .8; transition: all .5s;}

  /* 捲軸兩側頂端的按鈕 */
  ::-webkit-scrollbar-button {display: none;/* background-color: var(--mainColor); */}
  ::-webkit-scrollbar-button:hover {/* background-color: var(--mainColor); */}


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


/*!header*/
header .container{max-width: 100%;padding:var(--hf--space);}
.header{position: absolute;}
.logo{display: flex;height: clamp(2.5rem,12vw,3.5rem);align-items: center;margin: 0;}
.logo img{height:100%;object-fit:cover;}

.nav-item{padding: clamp(.5rem,1.5vw,1.5rem);position:relative;}
.nav-link{font-size: clamp(1rem,1.2vw,1.125rem);letter-spacing:0.05em;margin-right:-0.05em;font-weight:500;position:relative;color: var(--mainColor);}
.navbar-nav .nav-link.active,.navbar-nav .nav-link.show {color: var(--mainColor);}
.active .nav-link,.nav-item:hover .nav-link{color:var(--mainColor);}
.active .nav-link{font-weight:700;}
.active .nav-link:after,.nav-item:hover .nav-link:after{width:100%;}
.nav-link:focus, .nav-link:hover { color: var(--mainColor);}
.dropdown-toggle::after{content: none;}
.dropdown-toggle .bi{display: none;}

.header .nav-link{color:var(--dark);font-size: clamp(1rem,1vw,1.1rem);font-weight: 400;text-wrap: nowrap;display: flex;gap: .5rem;justify-content: center;}
.header .nav-item:before{content: "";display: block;width:0%;height: 0.25rem;background-color: var(--mainColor);position: absolute;bottom:0;right:50%;transition: all .5s;}
.header .nav-item:after{content: "";display: block;width:0%;height: 0.25rem;background-color: var(--mainColor);position: absolute;bottom:0;left:50%;transition: all .5s;}
.header .nav-item:hover:before, .header .nav-item.active:before, .header .nav-item.active{width: 30%;transition: all .5s;}
.header .nav-item:hover:after, .header .nav-item.active:after, .header .nav-item.active{width: 30%;transition: all .5s;}
.header .active .nav-link{font-weight: 600;color: var(--mainColor);}

.dropdown-toggle::after {display: none;}
.dropdown-menu{pointer-events: none;border-radius: 0;border: 0;display: block;opacity: 0;padding: .5rem 0;box-shadow: 0 0 .5rem rgba(0, 0, 0, 0.3);cursor: pointer;background: rgba(0, 0, 0, 0.75);transition: all .5s;top: 100%;}
.dropdown-item{padding: .5rem 1rem;color: white;}
.dropdown-item:hover, .dropdown-item:active{background-color:#f4f4f3;color:var(--dark);}
.header .nav-item:hover .dropdown-menu{display: block;opacity: 1;transition: all .5s;pointer-events: auto;}
.dropdown-item:focus, .dropdown-item:hover {background: var(--mainColorD);color: white;}


.navbar{backdrop-filter: blur(.25rem);transition: 1s all;background: white;box-shadow: 0 0 .5rem .15rem rgba(0 0 0 /10%);/* height: var(--headerH); */padding: 0;}
.scrolled .navbar{background: rgba(255, 255, 255, 0.3);--headerH: clamp(60px,8vw,80px)}
@keyframes hdMoveIn{0%{transform: translateY(-5rem);opacity: 0;} 100%{transform: translateY(0);opacity: 1;}}
.navbar{animation: hdMoveIn 1s ease-out forwards;}

.--pc{display: block;}
.--mb{display: none;}


/*!-header-手機按鈕*/
.navbar-toggler{border:none;display: flex;flex-direction: column;gap: 0.4rem;object-fit: cover;object-position: center;justify-content: center;padding: clamp(1rem,1.5vw,1.5rem);z-index: 5;}
.navbar-toggler:focus{box-shadow: none;}
.navbar-toggler__line{width: 1.25rem;height: 1px;background: var(--mainColor);display: inline-block;border-radius: 100rem;transition: 0.3s all;}
.navbar-toggler.open .navbar-toggler__line:nth-child(1){transform:translateY(0.5rem) rotate(225deg);}
.navbar-toggler.open .navbar-toggler__line:nth-child(2){transform:translateX(0.5rem);opacity:0;}
.navbar-toggler.open .navbar-toggler__line:nth-child(3){transform:translateY(-0.5rem) rotate(-225deg);}

/* index 標題 */
.ixTitleBox{}
.mainTitle{font-size: clamp(1.5rem,3vw,3rem);font-weight: 800;display: flex;align-items: center;}
.mainTitle:before{content:'';display: block;position: relative;width: clamp(.25rem,.5vw,.5rem);height: clamp(1.5rem,3vw,2.5rem);background: var(--mainLinear45);margin-right: clamp(.5rem,1vw,1rem);}
.pageTitle{font-size: clamp(1.25rem,2vw,2rem);font-weight: 600;color: var(--grayD);}

/* 按鈕 */
.btnWrap{margin: 2rem 0;}
.btnWrap--recaptchat{display: flex;justify-content: space-between;align-items: end;}
.btnWrap--left{margin: 0;margin-left: auto;}
.btnStyle{min-width: 120px;display:flex;align-items:center;justify-content: center;padding: clamp(.25rem,.5vw,.5rem) clamp(.75rem,1vw,1rem);border:1px solid var(--dark);gap: clamp(.5rem,1vw,1rem);position: relative;overflow: hidden;}
.btnStyle .txt, .btnStyle .bi{color:var(--dark)}
.btnStyle:before{content:"";display: block;width: 0%;height: 4rem;position: absolute;left: 0;background: var(--dark);transition: all .5s;}

.btnStyle:hover{gap: clamp(.75rem,1.25vw,1.25rem);}
.btnStyle:hover:before{width: 100%;}
.btnStyle:hover .txt, .btnStyle:hover .bi{color:white;z-index: 1;}

/* 麵包屑 */
.breadCrumb--wrapper{padding: clamp(0rem,1.25vw,1.25rem) 0 clamp(0rem,.75vw,.75rem);font-size: 0.9375rem;position: absolute;left: 0;}
.breadcrumb{color:var(--dark);font-size: clamp(.9rem,1vw,1rem);margin: 0;justify-content: end;}
.breadCrumb__item{position:relative;display: inline-block;opacity: 0.75;}
.breadCrumb__item:last-child{opacity:1;color: var(--mainColor);pointer-events:none;}
.breadCrumb__item + .breadCrumb__item:before{content:'/';margin:0 0.5rem 0 0.375rem;transform:translateY(-1px);display:inline-block;color:#333;}
.breadcrumb-item a{color:var(--dark);font-weight:400;}
.breadcrumb-item:last-child a{color:var(--mainColor);font-weight:400;}

/*banner*/
.banner{}
.singleSlick {
    opacity: 0;
    transition: opacity 0.5s ease;
  }
.pgBanner{height: 360px;position: relative;background-position: right;background-size: cover;}
.pgBanner:before{content:'';display:block;width:100%;height:100%; background:linear-gradient(to right,rgba(0,0,0,1) 20%,rgba(0,0,0,0) 60%),no-repeat;}
.banner.slick-dotted.slick-slider{margin: 0;}
.banner .btnStyle{display: inline-flex;}
.bnPic{position: relative;overflow: hidden;width: 100%;height: 100%;}
.bnPic img{width:100%;height:100%;object-fit:cover;position:relative;transition: all .5s;}
.bnVideo video, .bnVideo iframe{width:100%;height: 100%;object-fit: cover;}

/* 內頁 banner */
.pgBanner .bnInfoBox{align-items: start;justify-content: end;gap: 0;padding:0 var(--container--space);padding-bottom: clamp(2rem,5vw,5rem);}
.pgBanner .bnInfoBox .tit{font-size: clamp(2rem,3vw,3rem);color:white;line-height: 1.2;}
.pgBanner .bnInfoBox .tit__en{font-size:clamp(1rem,1.5vw,1.5rem);letter-spacing: .15rem;text-transform: uppercase;}

/* 首頁 banner */
.banner .banner__box .bnPic:before{content:'';display:flex;width:100%;height:100%;position:absolute;background:rgba(0,0,0,.2);opacity:1;transition:all .5s;z-index:1;}
.banner .banner__box:hover .bnPic:before{opacity:0;}
.banner .banner__box{position:relative;overflow: hidden;height: calc(100vh - 48px);width:30%;}
.banner__box:hover .bnPic img{transform:scale(1.05);}
.banner__box:hover .bnInfoBox{gap: clamp(1.5rem,2.5vw,2.5rem);bottom: clamp(1.75rem, 4.75vw, 4.75rem);}
.banner .slick-arrow:before{font-family:'bootstrap-icons';display: block;font-size: clamp(1rem,2.5vw,2.5rem);position: relative;z-index: 5;}
.banner .slick-prev, .banner .slick-next{width: 3rem;height: 3rem;z-index: 5;color: white;}
.banner .slick-prev:before{content: '\F284';}
.banner .slick-next:before{content: '\F285';}
.banner .slick-prev{left: 3%;}
.banner .slick-next{right: 3%;}

.bnInfoWrap{width:100%;height:100%;position: absolute;bottom: 0;}
.bnInfoBox{width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
  
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
  
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
  
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    gap: clamp(1.5rem,2vw,2rem);position:absolute;bottom: clamp(2rem,5vw,5rem);transition:all .5s;z-index:2;}
.pgBanner .bnInfoBox{align-items: start;gap: 0;padding:0 var(--container--space);}
.bnInfoBox .tit{font-size:clamp(1.5rem,3vw,3rem);color:white;line-height: 1.2;}
.bnInfoBox .tit__en{font-size:clamp(1rem,1.5vw,1.5rem);color:white;letter-spacing: .15rem;text-transform: uppercase;}
.bnLogo{width: clamp(180px,20vw,360px);}
.bnLogo img{width:100%;height:100%;object-fit:cover;}
.bnShop{white-space: nowrap;font-size: clamp(.9rem,1.15vw,1.15rem);line-height: 1;color:white;border:1px solid white;padding:clamp(.25rem,.5vw,.5rem) clamp(.5rem,1vw,1rem);}
.bgBlock{
    width: 100%;
    height: 60%;
    background-color: #36003E; /* 單色背景 */
    -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,1) 0% , rgba(0,0,0,.8) 50%, rgba(0,0,0,0) 100%);
    mask-image: linear-gradient(to top, rgba(0,0,0,1) 0% , rgba(0,0,0,.8) 50%, rgba(0,0,0,0) 100%);
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    position: absolute;
    bottom: 0;
	z-index:2;
    }

.banner .slick-dots{display:flex;flex-direction:column;position:absolute;bottom: 50%;left: clamp(.5rem,1vw,1rem);width: clamp(1rem,2vw,2rem);}
.banner .slick-dots button:before{width: 1.75rem;height: .3rem; content: '';background: #ffffff;box-shadow: 0 0 1rem rgb(0, 0, 0, .75);transition:all .5s;}
.banner .slick-dots .slick-active button:before{background: var(--mainColor)}


/* 內頁 */
/* .pgContent{background: url(../images/all/texture.jpg) fixed;background-size: cover;} */

/* about */
.abLogo{width: clamp(200px,30vw,400px);}
.abLogo img{width:100%;object-fit: cover;}

.groupList{display: flex;flex-direction: column;}
.groupList__item{display: grid;grid-template-columns: 1fr 3fr;gap: clamp(2rem,5vw,5rem);position:relative;}
.groupList__item .txtBox{display: flex;flex-direction: column; gap:clamp(1rem, 1.5vw, 1.5rem);}
.groupList__item .tit{font-size: clamp(1.5rem,2vw,2rem);font-weight: 600;line-height: 1.5;}
.groupList__item .subTit{font-size: clamp(1rem,1.5vw,1.5rem);font-weight: 600;color: var(--mainColor);}
.groupList__item + .groupList__item:before{content:'';display:block;width:100%;height:1px;border-bottom:1px solid var(--gray);position:absolute;clamp(2rem, 5vw, 5rem)CONTAIN-INTRINSIC-BLOCK-SIZE: AUTO 100PX;top: 0;}
.groupList__item{padding: clamp(2rem, 5vw, 5rem) 0;}
.groupList__item:first-child{padding-top:0;}

/* philosophy */
.philoWrap{position: relative;display: flex;gap: clamp(2rem,6vw,6rem);margin:clamp(2rem,4vw,4rem) 0;}
.philoList{--circleW:clamp(1.15rem,1.5vw,1.5rem);--borderW: clamp(.25rem,.35vw,.35rem);--circleR: clamp(.5rem,1vw,1rem);overflow: hidden;}
.philoList__item {height: 60vh;display: flex;align-items: center;}
.philoList__item .txtBox{display: flex;flex-direction: column;gap: clamp(.25rem, .5vw, .5rem);}
.philoList__item .tit{font-size: clamp(1rem,1.5vw,1.5rem);font-weight: 600;color: var(--grayD);}
.philoList__item .txt{padding-left:calc(var(--circleW) + var(--circleR));}
.philoListPic{border-radius: clamp(.25rem,.75vw,.75rem);overflow:hidden;}
.philoListPic img{width:100%;height:100%;object-fit:cover;}

.circle__item{display: inline-block;width:var(--circleW);height:var(--circleW);aspect-ratio:1;border:var(--borderW) solid var(--mainColor);border-radius:99rem;position: relative;margin-right: var(--circleR);top: clamp(.15rem,.25vw,.25rem);}
.circle__item:after{content:'';display:block;width:1px;height: 40vh;border-right:1px solid var(--gray);position:absolute;top: calc(var(--circleW)*2);left: calc((var(--circleW)/2) - var(--borderW));animation: lineIn 3s ease-out forwards;}
@keyframes lineIn{0% {height: 0;} 100% { height: 40vh; /* 根據容器高度填滿 */}}
.philoList__item:last-child .circle__item::after{content:none;}
  
.bg-container {position: sticky;top: 20%;width: 30vw;height: 25vw;aspect-ratio: 1;flex-shrink: 0;}
.bg-layer {position: absolute;inset: 0;background-size: cover;background-position: center;transform: translate(-3rem,3rem) rotate(-15deg) scale(0.8);opacity: 0;animation: cardSlideIn 0.8s ease forwards;border-radius: clamp(.25rem,.75vw,.75rem);z-index: 1;}

/* 進場退場動畫 - 下滑 */
  @keyframes cardSlideInDown {
    0% {transform: translate(-3rem, 0rem) rotate(-15deg) scale(0.8);opacity: 0;}
    100% {transform: translateY(0) rotate(0deg) scale(1);opacity: 1;}
  }
  
  @keyframes cardSlideOutDown {
    0% {transform: translateY(0) rotate(0deg) scale(1);opacity: 1;}
    100% {transform: translate(3rem, 3rem) rotate(15deg) scale(0.8);opacity: 0;}
  }
  
  @keyframes cardSlideInUp {
    0% {transform: translate(3rem, 0rem) rotate(15deg) scale(0.8);opacity: 0;}
    100% {transform: translateY(0) rotate(0deg) scale(1);opacity: 1;}
  }
  
  @keyframes cardSlideOutUp {
    0% {
      transform: translateY(0) rotate(0deg) scale(1);
      opacity: 1;}
    100% {
      transform: translate(3rem, 6rem) rotate(-15deg) scale(0.8);
      opacity: 0;}
  }
  
  .cardSlideInDown {animation: cardSlideInDown 0.8s ease forwards;}
  .cardSlideOutDown {animation: cardSlideOutDown 0.8s ease forwards;}
  .cardSlideInUp {animation: cardSlideInUp 0.8s ease forwards;}
  .cardSlideOutUp {animation: cardSlideOutUp 0.8s ease forwards;}
  
/* core */
.coreWrap{display: grid;grid-template-columns: 1fr 1fr;gap:clamp(1rem,2vw,2rem);align-items: center;}
.corePic img{width:100%;height:100%;object-fit: cover;}

/* contact */
.contactBox{display: grid;grid-template-columns: 1fr 2fr;gap: clamp(1rem,3vw,3rem);overflow: hidden;}
.contactPic img{width:100%;height:100%;object-fit: cover;}

/* footer */
.footer{width: 100%;background:var(--dark);color:white;padding: clamp(.75rem,1vw,1rem);/*position: sticky;bottom: 0;z-index: 1;*/}
.footer .container{display: flex;justify-content: space-between;padding: var(--hf--space);}
.ftInfo{display:flex;gap: clamp(.75rem,1vw,1.25rem);}
.ftInfo__item{display: flex;align-items:center;font-size: clamp(.85rem,1vw,1rem);}
.ftInfo__item + .ftInfo__item::before{content:'';width: 1px;height: 1rem;border-right:1px solid white;margin-right: clamp(.75rem,1.25vw,1.25rem);}
.copyright{font-size: clamp(.85rem, 1vw, .9rem);}
footer a{color: rgba(255,255,255,.75);}
footer a:hover{color:rgba(255,255,255,1); text-decoration:none;}


/* 內頁 - contact 聯絡我們 */
.formGroupWrap{}
.formGroup{display: flex;flex-wrap:wrap;gap: var(--gap);--gap:clamp(1rem,2vw,2rem);}
.formGroup__item{width:100%;}
.formGroup__item--half{width:calc(50% - (var(--gap)/2));}
.formGroup__item--bottom{display: flex;justify-content: space-between;align-items: end;gap:var(--gap);}
.form-control{border-radius: 0;border-color: var(--gray);background: none;}
.form-control:focus{border-color: rgb(0 0 0 / 50%);box-shadow: 0 0 0 .25rem rgb(0 0 0 / 10%);background: none;}
.contact .pgTxtBox{margin-bottom: clamp(2rem,4vw,4rem);}
textarea {resize: none;}



@media screen and (max-width: 991px){
    :root{
        --container--space: clamp(1rem, 6vw, 6rem);
    }
    /*!991 header*/
	.logo{padding: .5rem 0;}
    .navbar-brand{padding:0;z-index: 5;}
    .menuBar{background: rgba(256 256 256 /90%);position: absolute;width: 0;height: 100vh;right: 0;text-align: center;padding: 1rem;transition: 0.5s all;pointer-events: none;top:0;opacity: 0;overflow: hidden;z-index:-1;}
    .navbar-toggler.open + .menuBar{height:100vh;width: 100%;pointer-events:all;opacity:1;box-shadow: 0 0 .5rem .25rem rgb(0,0,0,.15);padding: 1rem 0;z-index: 1;display: flex;flex-direction: column;justify-content: space-between;}
    .navbar-nav{padding-top:3rem;margin-left: 0!important;}

    /*header - 手機選單*/
    .navbar-nav .dropdown-menu{display: block;}
    .dropdown-item {display: flex;flex-direction: column;align-items: start;gap: 1rem;border: 0;padding: .75rem 3rem;background-color: var(--mainColor);}
    .header .nav-link, .header .nav-item,  .header .nav-item.active {margin: 0;width: 100%;}
    .header .nav-link {padding: 1rem 2.5rem;justify-content: space-between;}
    .header .nav-item .dropdown-menu {display:block;width: 100%;opacity: 1;transition: all .5s;pointer-events: auto;box-shadow: none;background-color: #f4f4f3;padding: 0;position: relative;top: 0;}
    .header .nav-item:hover .dropdown-menu{opacity: 1;border-radius: 0;background-color: #c5c5c533;}
    .header .nav-item.active .dropdown-menu{display: block;}
    .header .nav-item:before, .header .nav-item:after{content:none;}
    .nav-item{padding:0;}
    .nav-item .bi {font-size: .65rem;display: block;}
    .nav-link{display:flex;justify-content:space-between;}
    .header .active .nav-link{font-weight: 400;background: var(--mainColor);color: white;}

    .header .container{padding-right: 0;}
	.langBtn.nav-item .nav-link{padding:0;}
    .langBtn.nav-item{background: var(--dark);width: auto;height: clamp(3.5rem,4.5vw,4.5rem);aspect-ratio: 1;display: flex;align-items: center;margin-left:auto;z-index: 5;}
    .langBtn .txt{color:white;width: 100%;height: 100%;text-align: center;}
	.langBtn{ order: 2;}
	.navbar-toggler{order:3;}

    .--pc{display: none;}
    .--mb{display: block;}


    /* philosophy */
	.philoList{display:flex;flex-direction:column;gap: clamp(2rem,4vw,4rem);}
    .philoList__item {display:grid;grid-template-columns:1fr 2fr; height: auto;align-items: start;gap:clamp(1rem,2vw,2rem);}


    /* contact */
    .contactBox{grid-template-columns: 1fr;}
    .contactPic img{display: none;}

    /* footer */
	.footer .container{flex-direction:column;}
	


}

@media screen and (max-width: 768px){

    body{position: relative;top: clamp(2.5rem,12vw,3.5rem);}

    /*banner*/
	.banner .banner__box{display:block;height: 100%;width:100%;}
    .pgBanner{background-position: center;}
    .pgBanner .bnInfoBox{ padding-bottom: clamp(2rem,5vw,5rem);}
    .bnPic{height:auto;}
	.slick-track{display:flex;flex-direction:column;}
	.bgBlock{
        width: 80%;
        height: 100%;
        background-color: #36003E; /* 單色背景 */
        -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,1) 0% , rgba(0,0,0,.8) 50%, rgba(0,0,0,0) 100%);
        mask-image: linear-gradient(to right, rgba(0,0,0,1) 0% , rgba(0,0,0,.8) 50%, rgba(0,0,0,0) 100%);
        left: 0;
        }
    .bnInfoBox{top: 0;bottom: 0;justify-content:center;width: 60%;height: 100%;left: 0;}
    .bnPic{aspect-ratio:2/1;}


    /* banner */
    .pgBanner:before{ background:linear-gradient(to top,rgba(0,0,0,.8) 0%,rgba(0,0,0,0) 50%),no-repeat;}
    .pgBanner .bnInfoBox{top:0;}
    /* .bnPic img{height:400px;} */

    /* about */
	.groupList__item{display: flex;flex-direction: column;align-items:start;}

	/* philosophy */
    .philoList{--circleW:clamp(1.15rem,1.5vw,1.5rem);--borderW: clamp(.25rem,.35vw,.35rem);--circleR: clamp(.5rem,1vw,1rem);overflow: hidden;}
    .philoList__item {height: auto;display: flex;flex-direction: column;}
    .philoList__item .txt{padding: 0;}
    .circle__item:after{content:none;}  
}

@media screen and (max-width:480px) {

    /* 內頁 - contact 聯絡我們 */
    .formGroup__item--half{width:100%;}
    .btnWrap--recaptchat{align-items: center;flex-direction: column;gap: clamp(1rem,1vw,1.5rem);}
    .g-recaptcha {display: flex;justify-content: center;}
}