@charset "utf-8";
@import url('fonts.css');
/* CSS Document */
body{font-family:'Rufina','Noto Serif TC',sans-serif;font-size:16px;line-height:1.7;color:var(--txtColor);-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;padding-top: var(--headerH);letter-spacing: 0.7px;overflow-x: clip;background: #F6FAFF;}
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:var(--mainColor);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:var(--mainColor-700);}
*{ 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;
width: 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:1rem;right:clamp(1rem,2vw,2.5rem);width: clamp(3rem,5vw,3.75rem);aspect-ratio: 1/1;text-align:center;color:#ccc;background:#fff;border:solid 1px var(--mainColor-300);font-size: clamp(0.875rem,1.3vw,1rem);color:var(--mainColor);transition: var(--transition);z-index: 20;}
#goTop::before{content:"";display: block;margin:0 auto;width:0.75rem;aspect-ratio: 1/1;;background: var(--mainColor); /* 要呈現的顏色 */-webkit-mask: url(../images/all/arrow.png) no-repeat center;-webkit-mask-size: contain; mask: url(../images/all/arrow.png) no-repeat center; mask-size: contain;vertical-align: -0.5px;transition: var(--transition);transform: rotate(-90deg); margin-top: 0.8rem;}
#goTop:hover{ background: var(--mainColor);color:#fff;border:none}
#goTop:hover::before{background: #fff;}
/* 側邊浮動社群 */
.floatBtn{position: fixed;right:clamp(1rem,2vw,2.5rem);/*top:clamp(6rem,20vw,24rem)*/;bottom:5.3rem;z-index: 10;}
.floatBtn__item{position: relative;display: block;width: clamp(3rem,5vw,3.75rem);aspect-ratio: 1/1;background: #fff;border:1px solid var(--mainColor-300)}
.floatBtn__item+.floatBtn__item{margin-top: clamp(0.4rem,1.2vw,0.875rem);}
.floatBtn__item::before{content:"";position: absolute;left: 50%;top:50%;transform: translate(-50%,-50%);width: clamp(1.375rem,2vw,1.875rem);aspect-ratio: 1/1;}
.--float-fb::before{background: url(../images/all/icon-fb.png)no-repeat center center / contain}
.--float-ig::before{background: url(../images/all/icon-ig.png)no-repeat center center / contain}
.--float-line::before{background: url(../images/all/icon-line.png)no-repeat center center / contain}
.floatBtn__item:hover{background:var(--mainColor);border:none}
.floatBtn__item:hover::before{filter: brightness(0) invert(1);}
/*按鈕*/
.btnWrap { margin:2em 0; text-align:center; }
/*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*/
/* 滾軸樣式 */
::-webkit-scrollbar {
width: .25rem; /*右側捲軸寬度*/
height: .25rem; /*下方捲軸高度*/
}
/* 軌道背景底色 */
::-webkit-scrollbar-track {background: rgba(0 0 0 / 10%);}
/* 滑桿樣式 */
::-webkit-scrollbar-thumb {background:var(--txtColor-light); border-radius: .5rem;}
::-webkit-scrollbar-thumb:hover {background: var(--txtColor-light); opacity: .8; -webkit-transition: all .5s; transition: all .5s;}
/* 捲軸兩側頂端的按鈕 */
::-webkit-scrollbar-button {display: none;/* background-color: var(--mainColor); */}
::-webkit-scrollbar-button:hover {/* background-color: var(--mainColor); */}
:root{
--mainColor-dark:#394150;
--mainColor:#29467B;
--mainColor-700:#41629F;
--mainColor-400:#C6D2E6;
--mainColor-300:#DFE7F6;
--mainColor-100:#F4F8FC;
--txtColor:#444;
--txtColor-light:#666;
--bgColor:#F6FAFF;
--container: 100%;
--transition:all .3s ease-in-out;
}
/*---------------------- 頁面開始 ----------------------*/
/*全頁佈局*/
.wrapper { padding:2rem 0;}
.blockHeight{padding:clamp(4rem,8.5vw,8.75rem) 0;}
.blockHeight--white{background-color: #fff;}
.sr-only{ position: absolute;width: 1px;height: 1px;margin: -1px;padding: 0;overflow: hidden;clip: rect(0, 0, 0, 0);border: 0;}
.container{padding:0 1rem}
.container--large{max-width: min(100%, 100rem);padding: 0 clamp(1rem, 4.5vw, 4rem);}
.container--small{max-width: min(100%,67.25rem);padding: 0 clamp(1rem, 4.5vw, 4rem);}
/*提醒:編輯器插入的圖需做以下設定，圖才不會變形*/
.tx01 img{max-width: 100%;height: auto!important;}
/* 標題 */
.mainTilte__mj{position: relative;padding-left:clamp( 0.5rem,2vw,1.5rem);color: var(--mainColor-dark);font-size: clamp(1.25rem,3.2vw,2.5rem);}
.mainTilte__mj::before{content:"";display:block;position: absolute;left: 0;top:50%;transform: translateY(-50%);width: 2px;height: 60%;background: var(--mainColor-dark);}
.mainTilte__sub{position: relative;display: block;font-size: clamp(2rem,10vw,7rem);color:var(--mainColor);color:var(--mainColor-300)}
.mainTilte__sub:before{ content: attr(data-title);color: var(--mainColor);width: 100%; height: 100%;
display: block; position: absolute; top: 0; left: 0;clip-path: circle(0% at 0% 50%);}
.mainTilte__sub.animated::before{ transition: clip-path 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955) ; animation-name:titEffect;animation-duration:2s; animation-fill-mode: forwards;}
.short.animated::before,.mainTitle--inbn .mainTilte__sub.animated::before{animation-duration:4s; }
.mainTitle--white .mainTilte__mj,.mainTitle--white .mainTilte__sub{color:#fff}
.mainTitle--white .mainTilte__mj::before{background-color: #fff;}
.mainTitle--white .mainTilte__sub{color:rgba(255,255,255,0.1)}
.mainTitle--white .mainTilte__sub:before{color:rgba(255,255,255,0.35)}
.mainTilte--columns{text-align: center;}
.mainTilte--columns .mainTilte__mj{padding-left: 0;}
.mainTilte--columns .mainTilte__mj::before{position: relative;left: auto;top:0%;transform: translateY(0%);height: clamp(1.25rem,2.5vw,2rem); margin: 0 auto;margin-bottom: clamp(0.5rem, 1.5vw, 1rem);}
.mainTitle--inbn{margin-bottom: 0;}
.mainTitle--inbn .mainTilte__mj::before{width:clamp(1.25rem,2.5vw,2rem);height: 2px;opacity: .3;}
.mainTitle--inbn .mainTilte__mj{padding-left:clamp( 2rem,4vw,3rem)}
.mainTitle--inbn .mainTilte__sub:before{color:rgba(255,255,255,0.2)}
.txtAni{position: relative;}
.txtAni::before{content: attr(data-title);display: block;position: absolute;left: 0;top:0;width: 100%;height: 100%;clip-path: circle(0% at 0% 50%);}
.txtAni.animated::before{transition: clip-path 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955); animation-name: titEffect; animation-duration: 2s;animation-fill-mode: forwards;}
/* 麵包屑 */
.bnTitle__list{display: flex;flex-wrap: wrap;align-items: center;color:#fff;list-style: none;padding-left: 0;margin: clamp(2.5rem,4vw,3.75rem) 0 0 0;justify-content: flex-end;}
.bnTitle__list a{color:#fff;opacity: 0.4;font-size: clamp(0.875rem,1.2vw,1rem);}
.bnTitle__list a:hover{opacity: 1;}
.bnTitle__list li + li::before{content:"/";margin:0 0.5rem;font-weight: 100;font-size: 0.8em;}
.bnTitle__list li:last-of-type a{opacity: 0.8;}
/* 按鈕 */
.btnSy{display: inline-block;width:clamp( 8rem,15vw,12.5rem);padding: clamp(0.25rem,1.2vw,0.7rem);background: var(--mainColor);color: #fff;text-align: center;position: relative;overflow: hidden;}
.btnSy::before{content:"";width: 100%;height: 100%;position: absolute;left: 0;top:0;transform: translateX(-100%);background: var(--mainColor-700);transition: var(--transition);}
.btnSy span{position: relative;z-index: 2;color:inherit;font-size: clamp(0.875rem,1.5vw,1.25rem);vertical-align: middle;}
.btnSy span::after{content:""; display: inline-block;width: 0rem;height: 1rem; margin-left: 0.5rem;background: #fff; /* 要呈現的顏色 */-webkit-mask: url(../images/all/arrow.png) no-repeat center;-webkit-mask-size: contain; mask: url(../images/all/arrow.png) no-repeat center; mask-size: contain;vertical-align: -0.5px;transition: var(--transition);}
.btnSy:hover::before{transform: translateX(0);}
.btnSy:hover span::after{width: 1rem;height: 1rem;}
.btnSy:hover span{color: #fff;}
.btnSy--outLineWhite{background: transparent;--color:#fff;border: 1px solid var(--color);color: var(--mainColor);}
.btnSy--outLineWhite span{color:var(--color)}
.btnSy--outLineWhite span::after{background: var(--color);}
.btnSy--outLineWhite::before{background: var(--color);}
.btnSy--outLineWhite:hover span{color: var(--mainColor);}
.btnSy--outLineWhite:hover span::after{background: var(--mainColor);}
.btnSy--outLineWBlue{background: transparent;border: 1px solid var(--mainColor);}
.btnSy--outLineWBlue span{color:var(--mainColor)}
.btnSy--outLineWBlue span::after{background:#fff;}
/* header */
header{background: #fff;}
.navbar__logo{margin:0 0;}
.navbar{padding:0;}
.navbar__logo{width:clamp(13rem,24vw,18.75rem);padding: clamp(0.875rem,1.6vw,1rem) clamp(1rem,2.4vw,2.5rem);box-sizing: content-box;}
.nav-item{padding:0;transition: var(--transition);}
.nav-item:hover{background: var(--mainColor-100);}
.nav-item:hover .nav-link{color:var(--mainColor)}
.nav-item.active{background: var(--mainColor-100);border-bottom: 2px solid var(--mainColor);}
.nav-item.active .nav-link {color:var(--mainColor)}
.nav-item.nav-contact:hover{background: var(--mainColor-700);}
.navbar-expand-lg .navbar-nav .nav-link{padding:clamp(1.25rem,2vw,1.5rem)clamp(1.25rem,2vw,1.5rem);font-size:clamp(1.125rem,1.25vw,1.25rem);transition: var(--transition);}
.nav-linkSub{display: block;margin-top: -0.25rem;;text-align: center;color: var(--mainColor);font-size: clamp(0.875rem,1.6vw,1rem);}
.nav-tel{display: flex;flex-direction: column;justify-content: center;position: relative;padding:0 1.25rem 0 5rem ;background-color: var(--mainColor-100);}
.navTelTit{margin-bottom: -0.5rem;}
.navTelCon{margin-bottom: 0;font-size: clamp(1.125rem,1.8vw,1.5rem);color:var(--mainColor);font-family: 'Noto Serif TC';}
.navTelIcon{display: inline-block;position: absolute;width: 3rem;aspect-ratio: 1/1;left:1.25rem;top:50%;transform: translateY(-50%);background-color: var(--mainColor-300);}
.navTelIcon::before{content:"";position: absolute;top:50%;left: 50%;transform: translate(-50%,-50%);width: 1.25rem;height: 1.25rem;background: url('data:image/svg+xml,')}
.nav-contact{background: var(--mainColor);}
.navbar-expand-lg .navbar-nav .nav-contact .nav-link{position: relative;display: flex;flex-direction: column;justify-content: center;height: 100%;color:#fff;text-align: center;font-size: 1rem;}
.nav-contact .nav-link::before{content:"";display: block;width: 1.25rem;aspect-ratio: 1/1;margin:0 auto;margin-bottom: 0.5rem;background: url('data:image/svg+xml,');}
.navbar--fixed {border-bottom: 1px solid var(--mainColor-300);}
/*banner*/
.banner{position: relative;}
.banner__box{position:relative;width: 100%;aspect-ratio: 5/2;background: var(--mainColor-400);}
.banner__box::before{ content:""; position:absolute; width:100%; height:100%; background:var(--mainColor-300); left:0; top:0; opacity: 1;clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);}
.bannerImg{position: absolute;left: 0;top:0;width:100%;height:100%;object-fit: cover; opacity:0; clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%); z-index: 4;}
.bannerTxt{position: absolute;left: 50%;top:50%;transform: translate(-50%,-50%);width:min(100%,100rem);padding:0 clamp(1rem,2.4vw,2.5rem);opacity: 0; top:60%; z-index: 6;}
.bnSubtit{display: flex;align-items: center;gap:1rem;color:var(--mainColor);opacity: 0.16;}
.bnSubtit span{font-size: clamp(1.25rem,4vw,3.75rem);}
.bnSubtit::after{content: "";width:11vw;height: 1px;background:var(--mainColor);}
.bnTit{font-size: clamp(1.5rem,4.5vw,4.25rem);color: var(--mainColor);font-weight: bold;margin-bottom: clamp(0.5rem,2.4vw,2rem);text-shadow: 0 0 10px white, 0 0 20px white, 0 0 30px white,0 0 40px white,0 0 40px white,0 0 40px white;}
.bnSlogan{font-size: clamp(1.25rem,2.4vw,2.25rem);font-weight: 600;margin-bottom: clamp(1rem,2.8vw,2.4rem);text-shadow: 0 0 10px white, 0 0 20px white, 0 0 30px white,0 0 40px white,0 0 40px white;}
.banner .slick-dots{bottom:clamp(0.5rem,2vw,2rem)}
.pgBanner{padding:clamp(2rem,4vw,3.75rem) 0;position: relative;}
.pgBanner .container{padding:0 clamp(5.5rem, 4.5vw, 4rem) 0 clamp(1rem, 4.5vw, 4rem)}
.pgBanner__img{position: absolute;left: 0;top:0;width: 100%;height: 100%;object-fit: cover;}
.slick-active .bannerTxt{animation-name:bnTxt; animation-delay:0.8s; animation-duration:0.8s; animation-fill-mode: forwards;}
.slick-active::before{ animation-name:imgbgCover; animation-duration:0.4s; animation-delay:0.4s; animation-timing-function:cubic-bezier(0.455, 0.03, 0.515, 0.955);animation-fill-mode: both;}
.slick-active img{ animation-name:imgAni; animation-delay:0.6s;animation-duration:0.8s; animation-fill-mode: forwards;}
.scrollBx{position: absolute;bottom:clamp(0.5rem,2vw,2rem);right:clamp(1rem,4vw,3.5rem);}
.scrollBx::after{content:"";display: inline-block;width: 1rem ;height:3.5rem;margin-top: clamp(0.25rem,1.2vw,0.875rem);background: url(../images/banner/SCROLL.png)no-repeat center center / contain;}
.scrollBx__line{width: 1px;height: clamp(3rem,6vw,5rem);background: rgba(255,255,255,0.6);display: block;margin:0 auto;position: relative;}
.scrollBx__line::before{content:"";width: 3px;height:0.75rem;display: block;background-color: #fff;position: absolute;left: 50%;transform: translateX(-50%);animation: fallDown 2s linear infinite;}
/*輪播樣式*/
body .slick-dots li button:before{content:"";position: relative;display: block;width:clamp(1rem,2.8vw,2.5rem);height:0.25rem;background: #fff;opacity: 0.6;}
body .slick-dots li.slick-active button:before{content:"";width:clamp(1.5rem,4vw,3.75rem);opacity: 1;background: var(--mainColor);}
body .slick-dots li,.slick-dots li button{width: auto !important;height: auto !important;padding: 0 !important;}
body .slick-dotted.slick-slider{margin-bottom: 0;}
/* 首頁 - 關於我們 */
.ixAbout{position: relative;}
.ixAbout::before{content:"";display: block;position: absolute;left: 0;bottom:0;width: 100vw;aspect-ratio: 4/1;background: url(../images//index/decoTxt.png)no-repeat center center/contain;}
.ixAbout .container{display: flex;align-items: center;gap:clamp(0.25rem,8vw,7.5rem);}
.ixAboutTit__p{margin-top: clamp(0.5rem,1.8vw,1.25rem);margin-bottom: clamp(1.25rem,4.5vw,3.75rem);overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical;-webkit-line-clamp: 3;box-sizing:border-box;font-size: clamp(1rem,1.3vw,1.125rem);}
.ixAboutImg{width: clamp(30rem,40vw,34.375rem);}
.ImgStyle{position: relative;background: var(--mainColor-400);}
.ImgStyle::before{content:"";display: block;background: var(--mainColor);width: 100%;height: 100%;position: absolute;left:clamp(0.5rem,2vw,1rem);top:clamp(0.5rem,2vw,1rem)}
.ixAboutTit,.ixAboutImg{width: 50%;}
.ImgStyle__img{position:relative;background:var(--mainColor-700);margin-bottom: 0;}
.ImgStyle__img::before{ content:"";position:absolute; width:100%;height:100%; background:var(--mainColor); opacity: 1;left:0;top:0; clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);}
.ImgStyle__img img{ width:100%;height:100%; object-fit: cover; opacity:0; clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);}
.ImgStyle__img.animated::before{animation-name:imgbgCover;animation-duration:0.5s; animation-delay:0.5s; animation-timing-function:cubic-bezier(0.455, 0.03, 0.515, 0.955)}
.ImgStyle__img.animated img{animation-name:imgAni;animation-delay:1s; animation-duration:1s; animation-fill-mode: forwards;}
/* 首頁 - 服務項目 */
.ixService{position: relative;}
.ixService::before{content:"";display: block;width: 100%;height:clamp(16rem,48vw,40rem);background: url(../images/index/serviceBg.jpg)no-repeat center center / cover;position: absolute;left: 0;top:0;}
.ixService .container{position: relative;}
.ixServiceTit{padding:clamp(2rem,5.2vw,4.5rem)0;border-top: 1px solid rgba(255,255,255,0.3);display: flex;justify-content: space-between;align-items: flex-end;}
.ixServiceTit .btnSy{margin-bottom: clamp(0.25rem,2vw,1.5rem);}
.ixServiceCont{display: grid;grid-template-columns: repeat(3, 1fr);padding-left: 0;background: #fff;border-top: 1px solid var(--mainColor-300);border-left: 1px solid var(--mainColor-300);counter-reset:num;}
.ixServiceCont__item{list-style: none;padding:clamp(1.5rem,6vw,5rem)clamp(1rem,4vw,3.75rem);border-right: 1px solid var(--mainColor-300);border-bottom: 1px solid var(--mainColor-300);transition: var(--transition);}
.ixServiceCont__item:hover{background: var(--mainColor-100);}
.ixServiceCont__item:last-of-type {grid-column: span 2;}
.ixSeItemTit{position: relative;display: flex;align-items: center;margin-bottom: clamp(1rem,2.2vw,1.25rem);padding:clamp(0.5rem,1.5vw,1.25rem)0;color:var(--mainColor);font-size: clamp(1.125rem,2.1vw,1.75rem);border-bottom: 1px solid var(--mainColor);}
.ixSeItemTit::before{content:"";display: inline-block;width: clamp(1.875rem,3vw,2.5rem);aspect-ratio: 1/1;margin-right:0.5rem;vertical-align: -0.6vw;}
.ixSeItemTit::after{ counter-increment:num; content:'0'counter(num);position: absolute;right:0;top:40%;transform: translateY(-50%);font-size: clamp(2rem,5vw,4.375rem); color: var(--mainColor);opacity: .1;}
.--ixSeIcon01::before{background: url(../images/services/serviceIcon01.png)no-repeat center center / contain;}
.--ixSeIcon02::before{background: url(../images/services/serviceIcon02.png)no-repeat center center / contain;}
.--ixSeIcon03::before{background: url(../images/services/serviceIcon03.png)no-repeat center center / contain;}
.--ixSeIcon04::before{background: url(../images/services/serviceIcon04.png)no-repeat center center / contain;}
.--ixSeIcon05::before{background: url(../images/services/serviceIcon05.png)no-repeat center center / contain;}
.ixSeItemCon{font-size: clamp(1rem,1.5vw,1.125rem);}
/* 首頁 - 相關連結 */
.ixLink{padding: 0;}
.ixLinkBox{display: flex;background:#E8EEFA;margin-top: clamp(2rem,5.2vw,4.5rem);}
.ixLinkBox__item {width:100%;position: relative;;padding:clamp(1.5rem,2.5vw,3rem) 0.5rem;text-align: center;font-size: clamp(1rem,1.8vw,1.25rem);border-right: 1px solid var(--mainColor-400);border-bottom: 1px solid var(--mainColor-400);}
.ixLinkBox__item span{font-size: inherit;color:inherit;position: relative;z-index: 1;}
.ixLinkBox__item::before{content:"";display: block;position: relative;z-index: 1;width:clamp(2rem,4vw,3.5rem) ;aspect-ratio: 1/1;margin:0 auto;margin-bottom: clamp(0.25rem,1.8vw,1rem);}
.ixLinkBox__item::after{content:"";display: block;position: absolute;width: 100%;height: 100%;;background: transparent;left: 50%;bottom:0%;transform: translate(-50%,0%);transition: var(--transition);}
.ixLinkBox__item:hover::after{width: calc(100% + 1rem);height: calc(100% + 1rem);background: var(--mainColor);}
.ixLinkBox__item:hover::before{filter: brightness(0) invert(1);}
.ixLinkBox__item:hover span{color:#fff;}
.--ixLink01::before{background: url(../images/index/otherIcon01.png)no-repeat center center /contain;}
.--ixLink02::before{background: url(../images/index/otherIcon02.png)no-repeat center center /contain;}
.--ixLink03::before{background: url(../images/index/otherIcon03.png)no-repeat center center /contain;}
.--ixLink04::before{background: url(../images/index/otherIcon04.png)no-repeat center center /contain;}
.--ixLink05::before{background: url(../images/index/otherIcon04.png)no-repeat center center /contain;}
.--ixLink06::before{background: url(../images/index/otherIcon05.png)no-repeat center center /contain;}
/* footer */
footer{background:var(--mainColor-dark);color:#fff;}
.ftTop{display: flex;justify-content: space-between;align-items: center;padding:clamp(3rem,6vw,5rem) 0 clamp(1.5rem,3vw,2.5rem)}
.ftIntoLogo{width: clamp(14rem,20vw,18.75rem);margin-bottom: clamp(1.25rem,2.5vw,1.75rem);}
.ftIntoLogo img{width: 100%;}
.ftIntoTxt__item{font-family: 'Noto Serif TC';margin-bottom: 0.5rem;font-size: clamp(0.875rem,1.5vw,1rem);}
.--inline.ftIntoTxt__item{display: inline-block;}
.--inline.ftIntoTxt__item.fax{opacity: .75;}
.--inline.ftIntoTxt__item +.--inline.ftIntoTxt__item{margin-left: clamp(0.875rem,1.5vw,1.25rem);}
footer ul{margin-bottom:10px;padding-left:0;list-style:none}
.qrcodeImg{width: 8.75rem}
.qrcodeTxt{width: 100%; margin-bottom: 0;margin-top: 0.75rem;padding: 0.25rem 0;border:1px solid rgba(255,255,255,0.3);text-align: center;font-size: clamp(0.875rem,1.3vw,1rem);}
.copyright{padding:clamp(1.5rem,3vw,2.5rem) 0;text-align: center;border-top: 1px solid rgba(255,255,255,0.3);font-size: 0.875rem; opacity: .8;}
footer a{color: rgba(255,255,255,.75);}
footer a:hover{color:rgba(255,255,255,1); text-decoration:none;}
/* 關於我們 */
.aboutSA{display: flex;align-items: center;gap:clamp(1rem,7.5vw,7.5rem)}
.aboutSA__Txt,.aboutSA__Img{width: 100%;}
.abLogo{width:clamp(10rem,17.5vw,15rem);margin-bottom: 0;}
.abSlogan{--spaceH:clamp(1.125rem,1.8vw,1.375rem);position: relative;;font-size: clamp(1.875rem,4.2vw,3rem);padding:var(--spaceH) 0;border-bottom: 1px solid var(--mainColor-300);margin-bottom: var(--spaceH); font-weight: 600;color:#b6b6b6}
.abSlogan::before{content: attr(data-title);color: var(--txtColor);width: 100%; height: 100%;
display: block; position: absolute; top: 0; left: 0;clip-path: circle(0% at 0% 50%);padding: var(--spaceH) 0;}
.abSlogan.animated::before{transition: clip-path 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955) ; animation-name:titEffect;animation-duration:2.5s; animation-fill-mode: forwards;}
.abCon{font-size: clamp(1rem,1.5vw,1.125rem);font-weight: 300;}
.abCon span{display: block;margin-top: clamp(0.5rem,1.2vw,1rem);}
.aboutMd{display: flex;align-items: flex-start;gap:clamp(1rem,7.5vw,7.5rem)}
.aboutMd__img{position: sticky;top:var(--headerH);left: 0;width: clamp(20rem,32vw,26.25rem);aspect-ratio: 8/11;background: var(--mainColor-100);}
.aboutMd__img::before{background: var(--mainColor-300);}
.mdHead{position: absolute;width: 100%;bottom:0;margin-bottom: 0;}
.mdName{position: absolute;left: 0;bottom:clamp(1.25rem,2.3vw,1.875rem);padding:clamp(0.5rem,1.25vw,1rem) clamp(1rem,2vw,1.5rem) clamp(0.5rem,1.25vw,1rem) 0;background: #fff;font-size:clamp(1.5rem,2.8vw,2.5rem);color:var(--mainColor); display: flex;align-items: center;}
.mdName__tit{background: var(--mainColor);padding:0.25rem 0.5rem; color:#fff;font-size: clamp(1rem,2.3vw,1.25rem);margin-right: clamp(0.5rem,1.3vw,1rem);padding: clamp(0.4rem, 1.2vw, 0.75rem);}
.mdList{display: flex;gap: clamp(3rem, 12vw, 8rem);}
.mdList__list{list-style: none;padding-left: 0;margin-bottom: 0;}
.mdList__tit,.mdList__list li{font-size: clamp(1rem,1.5vw,1.125rem);line-height: 1.5;margin-bottom: 0;}
.mdList__list li + li{margin-top: 0.5rem;}
.mdList__tit{flex:0 0 auto;color:var(--mainColor)}
.mdList{padding:clamp(0.875rem,3vw,1.5rem)0;border-bottom: 1px solid var(--mainColor-300);}
.abContact{padding:clamp(1.5rem,6.5vw,5rem) clamp(1.5rem,8vw,7.5rem);display: flex;justify-content: space-between;align-items: center;background: url(../images/about/contactUs_bg.jpg)no-repeat center center / cover;}
.abContactCon{color:#fff;}
.abContactCon__tit{font-size: clamp(1.125rem,1.5vw,1.375rem);}
.abContactCon__p{color: #8eacc5;margin-bottom: 0;font-size: clamp(0.875rem,1.2vw,1rem);}
.abContactCon__p a{color:inherit;text-decoration:underline;padding:0 0.5rem}
.abContactCon__p a:hover{color:#fff;}
.abContactTit{font-size: clamp(4rem, 9.5vw, 8rem); /* white-space: nowrap; */ color:rgba(255,255,255,0.1);margin-right: clamp(2rem, 7.5vw, 6rem);}
.abContactTit::before{color:rgba(255,255,255,0.35)}
.abContactCon{max-width:28rem ;}
/* 服務項目 */
.serviceTab{display: flex;counter-reset:num;margin-top: clamp(4rem,8.5vw,8.75rem);gap:1rem}
.serviceTab__item{width: 100%;text-align: center;font-size: clamp(1rem,2vw,1.25rem);color:var(--txtColor-light);padding: 1rem;border: 1px solid var(--mainColor-400);}
.servIcon{position: relative;;width:clamp(2.5rem,4vw,3.75rem);aspect-ratio: 1/1;display: flex;flex-direction: column;justify-content: flex-end;overflow: hidden;margin:0 auto;transition: 0.3s all ease-in-out;}
.servIcon::before{counter-increment:num; content:'0'counter(num) ;display: block;font-size: clamp(2rem,3vw,3rem);color:var(--mainColor-300);margin-bottom: 0;line-height: 1;color:var(--txtColor-light);opacity: 0.3;}
.servIcon__icon,.servIcon::before{width:100%;aspect-ratio: 1/1;margin-bottom: 0;transition: var(--transition);}
.servIcon__icon{display: flex;align-items: center;;height: 0;transition: 0.3s all ease-in-out;opacity: 0;position: relative;top:2rem}
.servIcon__icon img{max-width: 2.5rem;margin: 0 auto;}
.serviceTab__item:hover .servIcon__icon{height: auto;opacity: 1;top:0;}
.serviceTab__item:hover{border-color: var(--mainColor);}
.pgContent{counter-reset:num1;}
.serviceItem{position: relative;display: flex;padding-top: clamp(5rem,10vw,8rem);}
.serviceItem::before{content:"SERVICES";writing-mode: vertical-lr;position: absolute;top:0;left: 0;color:var(--txtColor-light)}
.serviceItem__txt{width:60%;position: relative;}
.serviceItem__img{position: absolute;right:0;top:-2px;height: 100%;width:60%}
.serviceItem__img img{width: 100%;height: 100%;object-fit: cover;}
.serviceItem__txt{z-index: 3;background-color: #F6FAFF;padding:clamp(1.5rem,4vw,4rem) clamp(1.5rem,4vw,4rem) 0 0}
.servTit{position: relative;display: flex;align-items: center;gap:clamp(1rem,2vw,1.5rem);color:var(--mainColor);font-size: clamp(1.25rem,2.5vw,2rem);}
.servTit::before{ counter-increment:num1; content:'0'counter(num1);position: relative;top:-6px;;font-size:clamp(3rem,12vw,6.5rem);color: var(--mainColor);opacity: 0.1;}
.servUintList{list-style: none;padding-left: 0;margin-bottom: 0;}
.servUintList__item{position: relative;padding:clamp(0.5rem,1.5vw,0.8rem) 0 clamp(0.5rem,1.5vw,0.8rem) 1.25rem;font-size: clamp(1rem,1.5vw,1.125rem);border-bottom: 1px solid var(--mainColor-400);}
.servUintList__item::before{content:"";display: inline-block;width: 0.4rem;aspect-ratio: 1/1;background: var(--mainColor-700);border-radius: 50%;margin-right: 1rem;position: absolute; left: 0;top: 1.2rem;}
.blockHeight--service:nth-child(odd){background: #fff;}
.blockHeight--service:nth-child(odd) .serviceItem__txt{ padding:clamp(1.5rem,4vw,4rem) 0 0 clamp(1.5rem,4vw,4rem);background: #fff; }
.blockHeight--service:nth-child(odd) .serviceItem{justify-content: flex-end;}
.blockHeight--service:nth-child(odd) .serviceItem::before{right:0;left: auto;}
.blockHeight--service:nth-child(odd) .serviceItem__img{left: 0;right:0;}
/* 聯絡我們 */
.topContact{display: flex;margin:0 auto;align-items: self-end;}
.blockHeight--contact{position: relative;}
.topContact__info{width: 100%;}
.topContact__img{position: relative; z-index: 2;width: clamp(10rem, 40vw, 36rem);margin-bottom: 0;}
body .botContact{position: relative;z-index: 2;;background: #fff;padding:clamp(1.5rem,4.5vw,4rem)}
.botContact__p{margin-top: 1rem;margin-bottom: clamp(1.5rem,4.5vw,4rem);text-align: center;font-size: clamp(0.875rem,1.5vw,1.125rem);}
.infoList{position: relative;z-index: 2;padding:clamp(2rem,3.2vw,2.5rem) 8rem clamp(2rem,3.2vw,2.5rem) 0 }
.infoList::before{content:"";display: block;left: 0;top:0;width: 100vw;height: 40rem;background: var(--mainColor-300);position: absolute;top:0;left: 50%;transform: translateX(-50%);z-index: -1;opacity: .4;}
.infoList a{color:var(--txtColor);word-break: break-all;}
.infoList a:hover{color: var(--mainColor);}
.infoList__item{display: flex;align-items: inherit;gap:clamp(0.875rem,1.2vw,1rem);padding:0.5rem 0;font-size: clamp(1rem,1.5vw,1.25rem);font-family: 'Noto Serif TC';color:var(--mainColor-dark)}
.infoListTit{flex:0 0 auto;display: flex;align-items: center;justify-content: center;width:7rem;position: relative;padding:0.2rem 0.75rem;background: var(--mainColor-300);color:var(--mainColor);text-align: center;}
.formGroupWrap{width: min(100%,63rem);margin-top: clamp(1.5rem,2.5vw,2rem);margin-left: auto;margin-right: auto;}
.formGroup{--num: 2;--gap:1.5rem;display:flex;gap: var(--gap) ;flex-wrap: wrap;}
.formGroup__item{width: 100%;font-size: clamp(1rem,1.5vw,1.125rem);color:var(--mainColor)}
.formGroup__item--half{width:calc((100% - var(--gap) * (var(--num) - 1)) / var(--num) );}
input,textarea,.form-control{border-radius: 0;border-color: transparent;background: var(--mainColor-100);padding: 0.5rem 0.75rem;}
.contactMap{width: 100%;aspect-ratio: 3/1;margin-bottom:clamp(1.5rem,4.5vw,4rem) ;}
.qrcodeImgList{position: absolute;right:0;bottom:clamp(2rem,3.2vw,2.5rem);width:clamp(7.25rem,9.5vw,8rem);margin-bottom: 0;}
.aleart_line{border: 1px solid #d40023; background: #fff8f9;}
label:has(+ .aleart_line){color:#d40023}
/* animation */
@keyframes fallDown{0%{top:0;opacity:0;}
25%{top:0;opacity:1;}
50%{top:50%;opacity:1;}
75%{top:95%;opacity:1;}
100%{top:95%;opacity:0;}
}
@keyframes titEffect{from{clip-path:circle(0% at 0% 50%);}
to{clip-path:circle(150% at 0% 50%);}
}
@keyframes imgbgCover{0%{clip-path:polygon(0 0,0 0,0 100%,0% 100%);}
50%{clip-path:polygon(0 0,100% 0,100% 100%,0 100%);}
100%{clip-path:polygon(100% 0,100% 0,100% 100%,100% 100%);}
}
@keyframes imgAni{from{opacity:0;clip-path:polygon(0 0,0 0,0 100%,0% 100%);}
to{opacity:1;clip-path:polygon(0 0,100% 0,100% 100%,0 100%);}
}
@keyframes bnTxt{from{opacity:0;top:60%}
to{opacity:1;top:50%}
}
/*======= RWD =======*/
@media screen and (min-width:576px){
:root{--container:540px;}
}
@media screen and (min-width:768px){
:root{--container:720px;}
}
@media screen and (min-width:992px){
:root{--container:960px;}
}
@media screen and (min-width:1200px){
:root{--container:1140px;}
}
@media screen and (min-width:1400px){
:root{--container:1320px;}
}
@media screen and (min-width:1680px) {
.container{/* max-width: var(--contianer); */padding: 0 1.5rem;}
}
/*======= max-width =======*/
@media screen and (max-width: 1200px) {
/* !1200==首頁 - 相關連結 */
.ixLinkBox{flex-wrap: wrap;}
.ixLinkBox__item{width: 33.3%;}
}
@media screen and (max-width: 1024px) {
/* !1024==按鈕 */
.btnSy span::after{vertical-align: -2.5px;}
/* !1024==首頁 - 服務項目 */
.ixServiceCont{ grid-template-columns: repeat(2, 1fr)}
}
@media screen and (max-width: 992px) {
/* !992==側邊浮動社群 */
/* !992==全頁佈局*/
.container{ max-width: 100%;
padding: 0 clamp(1rem, 4.5vw, 4rem);}
/* !992==header */
header.open::before{content:"";width: 100%;height: 100vh;background-color:var(--mainColor-100);position: absolute;left: 0;top:var(--headerH);}
.navbar-collapse {position: absolute;top:var(--headerH);left: 0;width: 100%;padding: 0 1rem;background-color: var(--mainColor-100);}
.nav-linkSub{text-align: left;}
.navbar-expand-lg .navbar-nav .nav-link{padding: 1rem 0;border-bottom: 1px solid var(--mainColor-300);}
.nav-contact{margin-top: 1rem;}
.nav-tel{background-color: var(--mainColor-300); padding: 0.5rem 0;text-align: center;margin-top: -1px;}
.nav-tel:hover{background-color: var(--mainColor-300);}
.navTelIcon{position: relative;top: auto;left: auto; transform: translateY(0px); margin: 0 auto; }
.navTelTit{margin-bottom: -0.5rem;}
.navbar-toggler{position: absolute;top:50%;right:1rem;transform: translateY(-50%);}
.navbar-toggler:focus{-webkit-box-shadow: none;box-shadow: none;}
.navbar-toggler{display: flex;flex-direction: column;gap:0.5rem;padding:0.75rem 0.5rem;border-color: var(--mainColor-300);background: var(--mainColor-300);border-radius: 0;}
.navbar-toggler .line{width: 1.8rem;height: 2px;background: var(--mainColor-700);display: inline-block;border-radius: 100rem;transition: 0.3s all;}
.navbar-toggler.open .line:nth-child(1){transform:translateY(0.75rem) rotate(45deg);}
.navbar-toggler.open .line:nth-child(2){transform:translateX(0.75rem);opacity:0;}
.navbar-toggler.open .line:nth-child(3){transform:translateY(-0.5rem) rotate(-45deg);}
/* !992==banner */
.scrollBx{display: none;}
/* !992==服務項目 */
.serviceItem{flex-direction: column-reverse;align-items: flex-end;padding-top: 0rem;}
.serviceItem__txt{width: 100%;padding-right: 0;}
.serviceItem__img{position: relative;right: auto;height: auto;aspect-ratio: 3/2;width: 80%;}
.blockHeight--service:nth-child(odd) .serviceItem__txt{padding-left: 0;}
.blockHeight--service:nth-child(odd) .serviceItem::before{left: 0;right: auto;}
/* !992==聯絡我們 */
.infoList__item{}
.qrcodeImgList{position: relative;bottom:0;margin-top: 1rem;}
.topContact__img{position: absolute;right:1rem;}
body .botContact{max-width: calc(100% - 3rem);}
.infoList{padding-right: 0;padding-bottom: 5rem;}
}
@media screen and (max-width: 768px) {
/*!768==RWD編輯器表格(X捲軸)*/
.tableContainer{width:100%;overflow-x: scroll;overflow-y:auto;_overflow:auto;margin:0 0 1em}
/* !768==banner */
.banner__box{aspect-ratio:5/3.5;}
/* .banner__box::after{width:80%;z-index: 4;} */
.bnTitle__list{justify-content:flex-start}
/* !768==首頁 - 關於我們 */
.ixAboutTit, .ixAboutImg{width: 100%;}
/* !1768==首頁 - 相關連結 */
.ixLinkBox__item{width: 50%;}
/* !1768==footer */
.qrcodeImg{width:7.25rem}
/* !1768==關於我們 */
.aboutMd{flex-direction: column;}
.aboutMd__img{margin:0 auto;position: relative;top:0}
.abContact{flex-direction: column;gap: 1rem;}
.abContactTit{margin-right: 0;}
.abContactCon{text-align: center;}
/* !1768==服務項目 */
.serviceTab{flex-direction: column;border-bottom: none;}
.serviceTab__item{border: 1px solid var(--mainColor-400);padding:1rem 2rem;display: flex;align-items: center;gap: 1.5rem;color:var(--mainColor)}
.servIcon{margin-left: 0;margin-right: 0;}
.servIcon::before{color:var(--mainColor-700)}
}
@media screen and (max-width: 576px) {
/* !576==banner */
.ixAbout .container{flex-direction: column;}
/* !576==首頁 - 服務項目 */
.ixServiceCont{ grid-template-columns: 1fr;}
.ixServiceCont__item:last-of-type{grid-column:span 1}
/* !1576==footer */
.ftTop{flex-direction: column;gap:2rem}
.ftTop__into{width:100%}
/* !1576==關於我們 */
.aboutSA{flex-direction: column-reverse;}
/* !576==聯絡我們 */
.formGroup{--num:1}
}