@import url('fonts.css'); /*! CSS Document */ body{font-family:'Ubuntu','Noto Sans TC','微軟正黑體',sans-serif;font-size: 16px;line-height:1.5;color:#333;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;padding-top: var(--headerH);background: var(--lightColor);} body::before{content:'';position:fixed;width:100%;height:100%;background: rgba(0,0,0,0.5);z-index: 99;-webkit-backdrop-filter: blur(0.5rem);backdrop-filter: blur(0.5rem);opacity: 0;pointer-events: none;transition: 0.3s 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;} body:has(.isOpen){overflow:hidden;} a{color: #333;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;} :focus-visible{outline: none;} /*! 回頂端 */ #goTop{--cl:var(--mainColor);display:none;cursor:pointer;position:fixed;bottom: 1rem;right: 0.75rem;width: 3rem;aspect-ratio: 1;line-height: 3rem;text-align:center;color: #fff;background: var(--cl);border-radius:100%;transition: 0.3s all;z-index: 10;} #goTop:before{content:'GoTop';position:absolute;font-size: 0.875rem;font-weight: 500;color:var(--cl);left:50%;top: -0.25rem;transform: translate(-50%,0%);line-height: 1;transition: 0.3s all;opacity: 0;pointer-events: none;} #goTop:hover{--cl:var(--subColor);} #goTop:hover:before{transform:translate(-50%,-100%);opacity:1;} #goTop .bi:before{background: url("data:image/svg+xml,%3Csvg width='45' height='44' viewBox='0 0 45 44' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M22.14 8L44 29.14l-6.44 7.15-14.71-13.58-14.7 13.58L1 29.85 22.14 8z' fill='%23fff'/%3E%3C/svg%3E") center/cover no-repeat;color: transparent;} .fixGoTop{position:relative;} .fixGoTop #goTop{--bR:1.5rem;position:absolute;top:0;bottom:unset;border-radius:0 0 var(--bR) var(--bR);line-height: 2.5rem;} /*!按鈕*/ .btnWrap { margin:2em 0; text-align:center; } .btnWrap.--group{display:flex;gap:1rem;justify-content: center;margin: 0;} .btnWrap--mt{margin:0;margin-top:2em;} .btnWrap--0{margin:0;} .btnWrap--left{text-align:left;} .btnStyle{display: inline-block;padding: 0.75rem 1.25rem;border-radius: 100rem;border: 1px solid var(--cl,var(--mainColor));color: var(--cl,var(--mainColor));min-width: 10rem;text-align: center;/* background: #fff; */} .btnStyle.--small{padding:0.5rem 1rem;min-width:auto;} .btnStyle--full{background: var(--cl,var(--mainColor));color: #fff;} .btnStyle--big{--sdW: 18.5rem;width: var(--sdW);} .btnStyle--ani{position:relative;z-index: 0;} .btnStyle--ani:after{content:'';position:absolute;width:100%;height:100%;background:var(--cl);left:50%;top:50%;transform:translate(-50%,-50%);z-index: -1;border-radius: 100rem;opacity: 0.25;animation: btnAni 2s infinite forwards ease-in;} @keyframes btnAni{ 0%,98%{width:100%;height:100%;} 50%{width:calc(100% + 1.375rem);height:calc(100% + 1.125rem);opacity:0.5} } .btnStyle--dark{--cl:#333} .btnStyle .txt{display: block;padding-right:2rem;position:relative;transition: 0.3s all;} .btnStyle .txt:after{content:'\F138';font-family:bootstrap-icons !important;position:absolute;right:0;top: 50%;transform: translateY(-58%);} .btnStyle.--copy .txt:after{content:'\F759';} .btnStyle.--repeat .txt:after{content:'\F116';} .btnStyle.--link .txt:after{content:'\F1C5';} .btnStyle:hover{box-shadow: var(--sdW,12.5rem) 0 0 var(--bg,var(--mainColorD)) inset;color:#fff;border-color: var(--bg,var(--mainColorD));} .btnStyle:hover .txt{padding: 0 1rem;} .btnStyle:hover .txt:after{width:0;opacity:0} .btnG{display: flex;gap: 1rem;} .btnG.--mb{margin-bottom:1rem} .copyBlock{position:relative;} #copyMsg{position:absolute;left:50%;transform:translate(-50%,25%);top:100%;width: 100%;} .btnStyle[disabled]{--cl:#aaa!important;pointer-events:none;filter: grayscale(1);} /*!RWD編輯器表格(X捲軸)*/ .tableContainer table th,.tableContainer table td{min-width:100px;padding: 0.5rem 1rem;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*/ /*!---------------------- 頁面開始 ----------------------*/ /*!===== html 個數斷點root備註 =====*/ /* --num-pcL 1920 */ /* --num-pcS 1400*/ /* --num-mbL 991*/ /* --num-mbS 480*/ /*!===== html 個數斷點root備註 END=====*/ :root{ --mainColor:#3C76CE; --mainColorD:#0b3a7f; --mainColorL:#9CD0FF; --subColor:#FF7246; --ofclRed:#E60012; --gradient-1:linear-gradient(120deg,var(--mainColor),var(--subColor)); --green:#68BA00; --lightColor:#F5FAFF; --oval:url("data:image/svg+xml,%3Csvg width='401' height='285' viewBox='0 0 401 285' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M400.479 142.481c0 75.339-89.576 136.363-199.951 136.363C90.152 278.844.478 217.82.478 142.481.479 67.141 90.055 6.117 200.43 6.117c110.376 0 199.951 61.025 199.951 136.364h.099z' fill='url(%23paint0_linear_2399_855)'/%3E%3Cdefs%3E%3ClinearGradient id='paint0_linear_2399_855' x1='.479' y1='19.229' x2='389.41' y2='315.241' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%233C76CE'/%3E%3Cstop offset='1' stop-color='%23FF7246'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E")center/contain no-repeat; --arc:url("data:image/svg+xml,%3Csvg width='230' height='460' viewBox='0 0 230 460' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M230 230V0H0c127.025 0 230 102.975 230 230zM230 230v230H0c127.025 0 230-102.975 230-230z' fill='%23fff'/%3E%3C/svg%3E"); --arc2:url("data:image/svg+xml,%3Csvg width='230' height='460' viewBox='0 0 230 460' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M230 230V0H0c127.025 0 230 102.975 230 230zM230 230v230H0c127.025 0 230-102.975 230-230z' fill='%23F5FAFF'/%3E%3C/svg%3E"); --donut1:url("data:image/svg+xml,%3Csvg width='715' height='715' viewBox='0 0 715 715' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='357.93' cy='357.932' r='317' stroke='url(%23paint0_linear_2449_891)' stroke-width='80'/%3E%3Cdefs%3E%3ClinearGradient id='paint0_linear_2449_891' x1='357.93' y1='.932' x2='357.93' y2='714.932' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%233C76CE'/%3E%3Cstop offset='1' stop-color='%23FF7246'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E"); --donut2:url("data:image/svg+xml,%3Csvg width='421' height='421' viewBox='0 0 421 421' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='210.863' cy='210.865' r='166' stroke='url(%23paint0_linear_2444_889)' stroke-width='88'/%3E%3Cdefs%3E%3ClinearGradient id='paint0_linear_2444_889' x1='210.863' y1='.865' x2='210.863' y2='420.865' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%233C76CE'/%3E%3Cstop offset='1' stop-color='%23FF7246'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E"); --donut3:url("data:image/svg+xml,%3Csvg width='641' height='641' viewBox='0 0 641 641' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='320.128' cy='320.128' r='315' stroke='%23fff' stroke-width='10'/%3E%3C/svg%3E"); --container:100%; --ctOffset: calc((100vw - var(--container)) / 2); --shD:0 0.25rem 1rem rgba(0,0,0,0.15); } @keyframes spinAni{ 0%{transform:translate(-50%,-50%) rotate(0deg)} 100%{transform:translate(-50%,-50%) rotate(360deg)} } /*!全頁佈局*/ .wrapper { padding:2rem 0;} .blockHeight{padding: clamp(3rem,7vw,7.5rem) 0;} .pgContent .blockHeight{padding-top: 0;} .sr-only{ position: absolute;width: 1px;height: 1px;margin: -1px;padding: 0;overflow: hidden;clip: rect(0, 0, 0, 0);border: 0;} .container{max-width: var(--container);} .cover{margin:0} .cover--center{text-align: center;} .cover__pic{object-fit:cover;} /*!提醒:編輯器插入的圖需做以下設定，圖才不會變形*/ .tx01 img{max-width: 100%;height: auto!important;} /*!輪播-slickStyle*/ .slickStyle{position:relative;} .slickStyle .slick-list{padding-bottom: 2rem;} .slickStyle .slick-dots{display: flex;align-items: center;justify-content: center;bottom: 0;left: 0;} .slickStyle .slick-dots li,.slickStyle .slick-dots li button,.slickStyle .slick-dots li button:before{width: 1rem;height: 1rem;} .slickStyle .slick-dots li button{border:1px solid transparent;border-radius:100rem;} .slickStyle .slick-dots li.slick-active button{border-color: var(--cl,var(--mainColor))} .slickStyle .slick-dots li button:before{transform:scale(0.5);} .slickStyle .slick-dots li{margin: 0 0.25rem;} .slickStyle .slick-dots li button:before{font-family: none;background: var(--cl,var(--mainColor));font-size: 0;border-radius: 100rem;display: flex;transition: 0.3s all;} .slickStyle .slick-prev,.slickStyle .slick-next{width:2rem;height:2rem;top: var(--pos,50%);} .slickStyle .slick-prev{left:-2.5rem;transform: translate(-50%, -50%);left: 0;} .slickStyle .slick-next{right:-2.5rem;transform: translate(50%, -50%);right: 0;} .slickStyle .slick-prev:before,.slickStyle .slick-next:before{color: var(--mainColor);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,[dir='rtl'].slickStyle .slick-next:before{content:'\F284';} .slickStyle .slick-next:before,[dir='rtl'].slickStyle .slick-prev:before{content:'\F285';} .slickStyle .slick-arrow{transition:0.3s all;z-index: 1;} .slickStyle .slick-arrow:after{content:'';position:absolute;background: var(--mainColor);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[aria-disabled="true"]{pointer-events:none;opacity: 0;} .slickStyle .slick-arrow:hover:before{color:#fff;} @media screen and (max-width:480px){ .slickStyle .slick-next{right:0.5rem;} .slickStyle .slick-prev{left:0.5rem;} } /*!標題 */ .titleBox{font-weight: 500;display: flex;flex-direction: column;margin-bottom: 1.5rem;gap: 0.5rem;} .titleBox--center{align-items: center;text-align: center;} .titleBox__mj{--lt:0.15em;font-size: clamp(1.5rem,2.4vw,2.5rem);letter-spacing: var(--lt);line-height: 1.25;display: flex;flex-direction: column;margin-right: calc(var(--lt) * -1);} .titleBox__sub{--deco:0.625rem;--cl:var(--mainColor);letter-spacing: 0.1em;padding-left: calc(var(--deco) + 0.5rem);color: var(--cl);position: relative;} .titleBox__sub:before{content:'';position: absolute;width:var(--deco);aspect-ratio: 10/8;background: var(--cl);mask: var(--oval);left: 0;top: 52%;transform: translateY(-49%);} .briefTxt{font-size: 1.125rem;font-weight: 450;line-height: 1.75;opacity: 0.85;} .briefTxt--center{text-align:center;} .briefTxt.--deco{--deco:0.75rem;position:relative;padding-top:calc(var(--deco) * 2);} .briefTxt.--deco:before{content:'';position:absolute;width: var(--deco);aspect-ratio: 10 / 8;background: var(--mainColorD);mask: var(--oval);left: 50%;top: 0;transform: translateX(-50%);} .contentTxt{font-size:1.125rem;} /*!header*/ header{--logoW: clamp(10rem,12vw,11.25rem);transition:0.3s all;} header.navbar--fixed, .navbar--pg,header:hover{background:#fff;} header .container{--gapX: clamp(1.5rem,3vw,4rem);display:flex;gap:var(--gapX);} .navbar-brand{margin:0;padding: 0;} .logo{margin:0;display: flex;} .logo__pic{width:var(--logoW);aspect-ratio: 300/66;object-fit: cover;} .navbar-nav{gap: 1rem;} .nav-link{font-size: clamp(1rem,1.1vw,1.0625rem);font-weight: 500;} /*!header-手機按鈕*/ .navbar-toggler{border:none;display: grid;flex-direction: column;gap: 0.375rem;object-fit: cover;object-position: center;justify-content: center;padding: 0.5rem;} .navbar-toggler:focus{box-shadow: none;} .navbar-toggler__line{width: 1.5rem;height: 2px;background: var(--mainColor);display: inline-block;border-radius: 100rem;transition: 0.3s all;} .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);} .dropdown-item.--exLink{padding-right: 1.5rem;} .dropdown-item.--exLink:after{content:'\F1C5';font-family:bootstrap-icons !important;right: 0;position: absolute;font-size: 0.9em;display: inline-block;transform: translateY(2px);} /*!banner*/ .banner.slick-dotted.slick-slider{margin:0;} .banner{--cl:#fff;} .banner .slick-list{padding:0;} .banner .slick-dots{bottom:2rem;} .banner__box,.banner__box.slick-slide{position:relative;overflow: hidden;aspect-ratio: 1920/890;height: auto;} .banner__box:after{content:'';position:absolute;width:100%;height:100%;background: var(--mainColor);left:0;top:0;opacity: 0.15;pointer-events:none;} .bnImg__pic{width:100%;aspect-ratio:1920/890;object-fit:cover;animation: scaleImg 5s forwards infinite;} @keyframes scaleImg{ 0%,100%{transform: scale(1.02);} 48%,52%{transform:scale(1)} } .bnImg{margin:0;position: relative;} .banner video{display: block;position: absolute;top: 50%;left: 50%;min-width: 100%;min-height: 100%;height: auto;transform: translate(-50%, -50%);overflow: hidden;} .bnSource{aspect-ratio:1920/890;width: 100%;object-fit: cover;} .bnTxt{position:absolute;left: calc(var(--ctOffset) - var(--pdX,0px));top:50%;transform:translateY(-50%);width:var(--container);text-align:center;z-index: 1;text-shadow: 0 0.25rem 1rem rgba(0,0,0,0.5);display: flex;flex-direction: column;gap: 1.5rem;color: #fff;align-items: center;transition: 1s all;padding: 0 1rem;} .bnTxt__mj{font-size: clamp(2.5rem,3vw,4rem);letter-spacing: 0.05em;font-weight: 700;margin: 0;transition: 1s all;transition-delay: 0.5s;transform: translateY(-1rem);opacity: 0;} .bnTxt__sub{font-size: clamp(1.025rem,1.2vw,1.25rem);letter-spacing: 0.1em;font-weight: 500;position: relative;display: inline-flex;align-items: center;gap: 1.5rem;transition: 1s all;transition-delay: 0.75s;clip-path: polygon(50% 0%, 50% 0%, 50% 100%, 50% 100%);} .slick-current .bnTxt__mj{opacity:1;transform:translateY(0);} .slick-current .bnTxt__sub{clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);} .slick-firstItem .bnTxt{opacity:0;transform:translateY(-1rem);} .pgBanner{position:relative;/* min-height: 22.5rem; */mask: url("data:image/svg+xml,%3Csvg width='1920' height='900' viewBox='0 0 1920 900' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M1920 0H0v822.4c206.31 41.06 475.44 66.15 770.51 66.15 565.37 0 1037.83-91.56 1149.49-213.57V0z' fill='%23000'/%3E%3C/svg%3E") center bottom /cover no-repeat;} .pgBanner:after{content:'';position:absolute;width:100%;height:100%;background: linear-gradient(120deg, rgb(60 118 206 / 25%), rgba(0, 0, 0, 0.15));left: 0;top: 0;z-index: -1;} .breadCrumbWrap{padding: 2rem 0;} .breadCrumb{--gap: 1.5rem;display:flex;justify-content: flex-end;gap: 0.375rem var(--gap);flex-wrap: wrap;} .breadCrumb__item[href*="javascript:;"]{cursor:default;} .breadCrumb__item{color: rgba(0,0,0,0.85);/* color: #fff; */position:relative;} .breadCrumb__item:last-child{color: var(--mainColor);cursor:default} .breadCrumb__item + .breadCrumb__item:before{content:'';position:absolute;width: 0.375rem;aspect-ratio:1;background: var(--cl,var(--mainColorL));opacity:0.5;border-radius:100rem;left: calc(var(--gap) * -0.5);top: 48%;transform: translate(-50%,-50%);} .pgBanner__box{display:flex;flex-direction:column;} .pgTitle{min-height: clamp(12rem,24vw,22.5rem);display: flex;flex-direction: column;justify-content: center;margin: 0;padding-bottom: 4%;color: #fff;text-shadow: 0 0.25rem 0.5rem rgba(0,0,0,0.25);gap: 0.25rem;} .pgTitle__mj{font-size: clamp(2rem,4vw,3.75rem);letter-spacing: clamp(0.15em,0.5vw,0.25em);font-weight: 700;margin: 0;} .pgTitle__sub{font-size:1.25rem;letter-spacing:0.15em;font-weight:600;padding-left: 0.5rem;position: relative;} .pgTitle__sub:after{content:'';position:absolute;width: 1.5rem;aspect-ratio: 401/285;background: var(--subColor);mask: var(--oval);left: 0;top: 25%;transform: translateY(-50%);z-index: -1;} /*!footer */ footer{background:var(--lightColor);position: relative;} footer:after{content:'';position:absolute;width:0;height:1px;background:var(--mainColor);left:0;top:0;transition:1s all;transition-delay:0.5s;} footer:has(.fTopWrap.animated):after{/* width:100%; */} footer a{color:#333;} .fTopWrap{padding: 4rem 0 5rem;} .fTop{display:flex;justify-content: space-between;gap: 2rem;} .fSitemapWrap{--gapX:clamp(3rem,6vw,6.25rem);display:flex;gap: 2rem var(--gapX);flex-wrap: wrap;} .fSitemap{display:flex;flex-direction:column;gap: 1.5rem;} .fSitemap__tt{color:var(--mainColor);font-weight:500;} .fSitemap__ct{display:flex;flex-direction:column;align-items: flex-start;gap: 0.25rem;} .fSitemap__ct__link{font-size:0.875rem;padding: 0.25rem 0;} .fSiteBtn__btn{padding: 0.75rem 1rem;min-width: 12.5rem;} .fBtmWrap{padding: 1.5rem 0;border-top: 1px solid rgba(17,17,17,0.25);} .fBtm{display:flex;font-size:0.875rem;gap: 1rem;justify-content: space-between;flex-wrap: wrap;} .copyright{display:inline-flex;gap: 0.25rem 0.5rem;flex-wrap: wrap;} .copyright a{color: rgba(17,17,17,0.375);} .fTerm__item{letter-spacing:0.05em;} /*!==========首頁*/ @keyframes dotFloat{ 0%,100%{transform: scale(1) translateY(0);} 50%,52%{transform: scale(1.08) translateY(-1rem);} } .blockHeight--ixGradient{position:relative;padding-bottom: calc(100vw / 1920 * 315 + 3rem);overflow-x: clip;} .blockHeight--ixGradient:before{content:'';position:absolute;width:100%;height:calc(100% + 20vh);left:0;bottom:0;background:linear-gradient(to bottom,var(--lightColor) 35%,var(--mainColorL) 100%);z-index: -1;pointer-events: none;} .blockHeight--ixGradient:after{content:'';position:absolute;width:100%;aspect-ratio: 1920/315;background:#fff;left: 0;bottom: 0;mask: url("data:image/svg+xml,%3Csvg width='1920' height='315' viewBox='0 0 1920 315' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_2440_886)'%3E%3Cpath d='M0 315h1920V28.3C1770.47 9.7 1616.65 0 1459.65 0 920.5 0 418.77 114.33 0 310.76V315z' fill='%23fff'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_2440_886'%3E%3Cpath fill='%23fff' d='M0 0h1920v315H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E") no-repeat;mask-size: cover;} #parabolaDeco{position:absolute;right:0;bottom:-2rem;z-index:1;} /*!首頁-服務*/ body:has(.blockZone--ixSolution){/* overflow-x: hidden; */} .blockZone--ixSolution{position:relative;} .blockZone--ixSolution:before{content:'';position:absolute;width: clamp(12rem,45vw,45rem);aspect-ratio:1;background: var(--donut1)center/cover;opacity: 0.1;right: 0;top: 0;transform: translate(25%,-75%);animation: floatUpDown1 6s ease-in-out infinite;z-index: -1;pointer-events: none;} @keyframes floatUpDown1 { 0%,100% { transform: translate(25%,-75%) rotate(0deg); } 55% { transform: translate(23%,-73%) rotate(150deg) scale(1.02); } } .blockZone--ixSolution .titleBox__mj{letter-spacing:0.05em;} .soluWrap{--imgW:50%;--gap:4rem;display: flex;gap:var(--gap);justify-content: space-between;align-items: flex-start;} .soluWrap__mj__ct{display:flex;flex-direction:column;gap:2rem;} .soluBox{display: flex;gap: 1.25rem;flex-wrap: wrap;} .soluBox__item{width: clamp(8rem,50vw,11.25rem);aspect-ratio: 1;background: #fff;border-radius: 100rem;display: flex;flex-direction: column;justify-content: center;align-items: center;box-shadow: 0.25rem 0.25rem 1rem rgba(0,0,0,0.15);max-width: 11.25rem;gap: 0.25rem;transform: translateY(1rem);opacity: 0;} .soluBox__item:not(:hover){transition: 1s transform,1s opacity;transition-delay: calc(0.125s + 0.25s * var(--SN));} .animated .soluBox__item{transform:translateY(0);opacity: 1;} .soluBox__item__tt{position:relative;display: flex;flex-direction: column;align-items: center;font-weight: 450;font-size: 1.25rem;letter-spacing: 0.1em;} .soluWrap__mj{width:calc(100% - var(--gap) - var(--imgW));} .soluWrap__media{position:relative;width: var(--imgW);transform: translateX(20%);opacity: 0;transition: 1s all ease-out;transition-delay: 1s;} .animated.soluWrap__media{transform:translateX(0);opacity:1;} .soluWrap__media:after{content:'';position:absolute;width:1.375rem;aspect-ratio:1;background:var(--subColor);border-radius:100rem;left: 0;bottom: 12%;animation: dotFloat 4s infinite ease-out;animation-delay: 0.5s;} .cover.--solu{width: 35%;margin: 0;position: relative;} .cover.--solu:after{content: '';width: 100%;aspect-ratio: 1;transition: 0.3s all;position: absolute;left: 0;top: 0;opacity: 0;pointer-events: none;transition: 0.3s all;} .--car .cover.--solu:after{background:url(../images/index/solu-1h.png)center/cover;} .--bell .cover.--solu:after{background:url(../images/index/solu-2h.png)center/cover;} .--charge .cover.--solu:after{background:url(../images/index/solu-3h.png)center/cover;} .soluWrap__media__pic.--mj{mask: var(--oval);width: 100%;} .cover:has(.soluWrap__media__pic.--mj){position:relative;z-index: 0;} .cover:has(.soluWrap__media__pic.--mj):after{content:'';position: absolute;width:100%;height:100%;background:var(--mainColorL);mask: var(--oval);left: -0.75rem;top: -0.75rem;transform: rotate(0deg) scale(0.85);z-index: -1;transition: 1s all;transition-delay: 1.25s;} .animated .cover:has(.soluWrap__media__pic.--mj):after{transform:rotate(-15deg) scale(1);} .cover:has(.soluWrap__media__pic.--sub){position:absolute;right: 0;bottom: 0;transform: translate(20%,-30%);} .soluWrap__media__pic.--sub{width: clamp(5rem,10vw,10.5rem);aspect-ratio:1;border-radius:100rem;border: clamp(0.25rem,1vw,0.375rem) solid #EAF5FF;} .soluBox__item:hover{--cl:var(--mainColor);background:var(--cl);color:#fff;box-shadow: 0.125rem 0.125rem 0.125rem rgba(0,0,0,0.25);} .soluBox__item:hover .soluBox__item__tt:before{height:2rem;} .soluBox__item:hover .cover__pic{opacity:0;} .soluBox__item:hover .cover.--solu:after{opacity:1;animation: kata-two 1.5s infinite;} .soluBox__item.--bell:hover .cover.--solu:after{animation: kata-shake 1.5s infinite;} @keyframes kata-two { 0%, 11%, 10%, 21%, 30%, 41%, to { transform: translate(0,1px);} 11%, 20%, 31%, 40% { transform: translate(0,-1px);} } @keyframes kata-shake { 0%, 11%, 10%, 21%, 30%, 41%, to { transform: rotate(2deg);} 11%, 20%, 31%, 40% { transform: rotate(-2deg);} } /*!首頁-news*/ .blockZone--ixNews{padding-top: 5rem;overflow: hidden;} .blockZone--ixNews:before, .blockZone--esgNews:before{content:'';position:absolute;width: clamp(2rem,5vw,3rem);aspect-ratio:1;background:var(--subColor);border-radius: 100rem;bottom: clamp(2rem,15vw,17rem);right: max(var(--ctOffset),1rem);z-index: 10;animation: dotFloat 3s infinite ease-in;} .blockZone--ixNews:after,.blockZone--esgNews:after{content:'';position:absolute;width: 26.25rem;aspect-ratio:1;background: var(--donut2)center/cover;opacity: 0.1;left: 5%;bottom: -4%;animation: floatUpDown2 5s ease-in-out infinite;z-index: -1;pointer-events: none;} @keyframes floatUpDown2 { 0%,100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-1.25rem) rotate(150deg) scale(1.05); } } .newsBox--slick{padding: 2rem 0 1rem;transition: 1s all ease-out;transform:translateX(-10%);opacity:0;transition-delay: 0.5s;} .animated.newsBox--slick{transform:translateX(0);opacity:1} .newsBox--slick .newsBox__item{opacity:0;pointer-events: none;} .newsBox--slick .newsBox__item.slick-active{opacity:1;pointer-events: all;} .newsBox__item{--bR:1rem;position: relative;width: calc((100% - var(--gap) * (var(--cssNum) - 1)) / var(--cssNum));} .newsBox--slick .newsBox__item{margin: 0 var(--mb);width:100%;} .newsBox__item:after{content:'';position: absolute;width: 100%;aspect-ratio: 360/246;background: var(--oval);transform: translate(-50%,-50%) rotate(-15deg);left: 50%;top: 50%;filter: blur(3.75rem);z-index: -1;transition: 0.3s all;} .newsBox--slick .newsBox__item:after{opacity:0} .slick-active.newsBox__item:after{opacity:1;} .cover.--news{overflow: hidden;border-radius: var(--bR) var(--bR) 0 0;background: var(--mainColorD);} .--news .cover__pic{width:100%;aspect-ratio: 600/400;transition: 0.3s all;} .newsBox__item__text{padding: 1rem;padding-bottom: 1.5rem;background: #fff;border-radius: 0 0 var(--bR) var(--bR);overflow: hidden;display: flex;flex-direction: column;gap: 0.5rem;} .dateSort{display:flex;gap: 0 0.75rem;align-items: center;flex-wrap: wrap;} .dateSort__date{opacity:0.5;color:#111;font-size:1.125rem;} .dateSort__sort{color: var(--mainColor);letter-spacing: 0.05em;padding: 0.25rem 0;} .newsBox__item__text .itemTt{display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis;min-height: 48px;} .itemTt{font-size: clamp(1.125rem,1.4vw,1.25rem);line-height:1.25;letter-spacing:0.05em;transition: 0.3s all;} .newsBox .slick-list{--mb: clamp(0.625rem,1vw,1rem);overflow:unset;margin: 0 calc(var(--mb) * -1);} /*!首頁-人才招募*/ .blockHeight--ixRecruitment{position: relative;background: #fff;overflow-x: clip;} .blockHeight--ixRecruitment .container{margin-top: calc(100vw / 1920 * 315 * -0.875);} .recruBox{--pos:41%;--cssNum: var(--num-pcL,1);--gap:1rem;display:flex;justify-content: space-between;padding: 3rem 0 1.5rem;gap:var(--gap)} .recruBox__item{max-width:27.5rem;width: calc((100% - var(--gap) * (var(--cssNum) - 1) ) / var(--cssNum));transform: rotateY(30deg);transition: 1s all;transition-delay: calc(0.5s + 0.125s * var(--SN));opacity: 0;} .animated .recruBox__item{opacity:1;transform: rotateY(0deg);} .cover.--recru{position:relative;margin:0;border-radius: 1rem;z-index: 0;margin: 2.5rem 0;} .cover.--recru:after{content:'';position:absolute;width:100%;height:100%;background:var(--oval);left: 50%;top: 50%;transform: translate(-50%,-50%) scale(0.92) rotate(-15deg);filter: blur(4rem);z-index: -1;} .--recru .cover__pic{width:100%;aspect-ratio:440/300;border-radius: 1rem;} .recruBox__item__ct{text-align:center;} .recruTt{font-size: clamp(1.5rem,1.5vw,1.5rem);font-weight:500;letter-spacing:0.15em;display: flex;gap: 0.5rem;align-items: center;justify-content: center;line-height: 1;margin-bottom: 1rem;flex-wrap: wrap;} .recruNum{color:var(--ofclRed);font-size: 1.25em;/* margin-left: 0.25rem; */transform: translateY(-2px);letter-spacing: 0;font-weight: 550;/* transform: translateY(-2px) skewX(-2deg); */} .recruList{list-style:none;padding:0;margin:0;display: inline-flex;flex-direction: column;} .recruList__item{display:inline-block;font-size: clamp(1.025rem,1.1vw,1.125rem);position: relative;} .recruList__item:before{content:'\F633';font-family: bootstrap-icons !important;margin-right: 0.25rem;color: var(--green);font-size: 1.5rem;line-height: 0.85;transform: translateY(5px);display: inline-block;} /*!首頁-slogan*/ .blockHeight--ixSlogan{position: relative;background: url(../images/all/sloganBg.png) center bottom/cover;/* background-position-y: 50%; *//* background-size: 120%; */padding: 0;z-index: 0;/* animation: bgAni 1s cubic-bezier(0.48, 0, 1, 0.8); *//* animation-timeline: scroll(); */transition: 1s all ease-out;transition-delay: 0.25s;/* clip-path: polygon(0 0, 100% 0, 100% 0%, 0 0%); */opacity: 0;} .animated.blockHeight--ixSlogan{/* clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); */opacity: 1;} @keyframes bgAni { to {background-position-x: 100%;background-size:100%;} } .blockHeight--ixSlogan:after{content:'';position:absolute;width:100%;height:100%;background:linear-gradient(to bottom,transparent,rgb(60 118 206 / 50%));opacity: 0.15;left:0;bottom:0;z-index: -2;pointer-events: none;} .sloganBtmWrap{--pdB:3.75rem;padding-bottom:var(--pdB);overflow: hidden;position: relative;} .sloganBtm{position:relative;padding: clamp(3rem,3.5vw,4rem) 0;display: flex;justify-content: space-between;align-items: center;gap: 1rem;} .sloganBtm__ct{display:flex;gap: 1rem 2.5rem;align-items: center;} .sloganTopWrap{height:clamp(15rem,28vw,28.75rem);position:relative;} .sloganTopWrap .container{height:100%;position: relative;} .sloganTopWrap:after{content:'';position:absolute;width: calc((100% - var(--container)) / 2 + 0.75rem);height:100%;right: 0;top: 0;background: #fff;z-index: -1;} .sloganTopWrap .container:after{content:'';position:absolute;height:100%;background: var(--arc)center/cover;aspect-ratio: 230/460;right: 0.75rem;top: 0;} .sloganBtmWrap:after{content:'';position:absolute;height: calc(100% - var(--pdB));width: calc(100% - var(--ctOffset) * 0.5);background: #fff;border-radius: 10rem 0 0 10rem;right:0;top:0;z-index: -1;} .fLogo{margin:0;} .fLogo__pic{width:clamp(20rem,24vw,23.75rem);aspect-ratio: 760/117;} .markTxt{color:var(--mainColor);font-weight: 450;} .markTxt.--udLine{text-decoration:underline;text-underline-offset:4px;} .sloganTxt{font-size: clamp(1.25rem,1.8vw,1.875rem);font-weight:700;letter-spacing:0.05em;opacity:0.85;} .sloganTxt .markTxt{font-weight:700;} .bDBtns{display:inline-flex;gap: 1rem;flex-wrap: wrap;justify-content: center;} .bDBtns__item{--cl:var(--mainColor);padding: 0.75rem 1.25rem;border:1px solid var(--cl,var(--mainColor));border-radius:100rem;max-height: 3rem;color: var(--cl);} .slocialBtn{font-size:1.5rem;display:inline-flex;padding: initial;width: 3rem;aspect-ratio: 1;align-items: center;justify-content: center;position: relative;} .slocialBtn:after{content:'';position:absolute;width: 0;aspect-ratio:1;background: var(--mainColorD);border-radius: 100rem;transition: 0.3s all;} .slocialBtn .bi{position:relative;z-index:1;transition:0.3s all;} .slocialBtn:hover:after{width:100%;} .sloganBtm__btn__item:hover{background:var(--cl);color:#fff;} .bi-104{width: 1.75rem;aspect-ratio: 2/1;line-height: 1;} .bi-104:before{content:'';width:100%;aspect-ratio: 1;background:url(../images/recruit/104.png)center/cover;} .brandLogo{display:flex;gap: 0.5rem 1.5rem;} .brandLogo__item{display:flex;} .brandLogo__item__pic{width: 6.25rem;} .brandLogo__item:nth-child(1) img{aspect-ratio: 1000/217;object-fit: contain;width: 14rem;} .bDBtns__item:hover{--cl:var(--mainColorD);} .bi-facebook::before{mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50' width='50' height='50'%3E%3Cpath d='M32 11h5a1 1 0 0 0 1-1V3.263a.997.997 0 0 0-.925-.997C35.484 2.153 32.376 2 30.141 2 24 2 20 5.68 20 12.368V19h-7a1 1 0 0 0-1 1v7a1 1 0 0 0 1 1h7v19a1 1 0 0 0 1 1h7a1 1 0 0 0 1-1V28h7.222a1 1 0 0 0 .994-.89l.778-7A1 1 0 0 0 37 19h-8v-5a3 3 0 0 1 3-3z' fill='currentColor'/%3E%3C/svg%3E")center/cover;transition:0.3s all;background: currentColor;} .slocialBtn:hover .bi::before{color:#fff;} /*!==========內頁*/ .pgContent{background:linear-gradient(to bottom,transparent,var(--mainColorL));overflow-x: clip;} .sidebarToggle{display: none;} .sidebarWrap:has(.sidebar){--barW: clamp(13rem,16vw,17.5rem);--barGap: clamp(2rem,3.25vw,4rem);display: flex;gap:var(--barGap);align-items: flex-start;flex-direction: row-reverse;} .sidebarWrap{width:100%;display:block;} .sidebar{width: var(--barW);position: sticky;left: 0;top: calc(var(--headerH) + 2rem);} .sidebarContent{width: calc(100% - var(--barW) - var(--barGap));} .sidebarContent:only-child{width:100%;} .sideNavList{display:flex;flex-direction:column;gap: 0.5rem;background: #fff;padding: 1rem 1.5rem;border-radius: 1rem;box-shadow: var(--shD);} .sideNavList__item{padding: 0.625rem 0;font-size: 1.125rem;letter-spacing: 0.05em;font-weight: 450;} .sideNavList__item.active{color:var(--subColor);} .sideNavList__item .txt{--decoW:0px;transition:0.3s all;position:relative;display: inline-block;padding-left: calc(var(--decoW) + var(--sp,0px));} .sideNavList__item .txt:before{content:'';position:absolute;width: var(--decoW);height: 70%;background:var(--subColor);left: 0;top: 50%;transform: translateY(-50%);transition: 0.3s all;opacity: 0;} .articleWrap{background: #fff;border-radius: 0 0 1rem 1rem;box-shadow: var(--shD);overflow: hidden;} .articleWrap__inner{padding: clamp(2rem,3vw,3rem) clamp(1.25rem,3vw,3rem);display: flex;flex-direction: column;gap: 2rem;} .articleWrap + .btnWrap{margin-top:2rem;} .sideNavList__item:hover .txt,.sideNavList__item.active .txt{--decoW: 0.375rem;--sp: 0.5rem;} .sideNavList__item:hover .txt:before,.sideNavList__item.active .txt:before{opacity: 1;} .filterBox{display:flex;margin: 1rem 0;justify-content: flex-end;} .filterBox__item{--bR:var(--bs-border-radius);max-width: 8.5rem;border-radius:0;} .filterBox__item:first-child{border-radius:var(--bR) 0 0 var(--bR);} .filterBox__item:last-child{border-radius:0 var(--bR) var(--bR) 0;} .filterBox__item + .filterBox__item{margin-left:-1px;} /*!page_number*/ .pageNumber{display:flex;justify-content: center;padding: 1rem 0;gap: 1rem;margin-top: 2rem;} .pageNumber a{display: block;aspect-ratio:1;height: 2rem;text-align: center;padding: 0.25rem;border-radius: 0;transition: 0.3s all;display: flex;align-items: center;justify-content: center;color: var(--mainColorD);} .pageNumber a:hover,.pageNumber a.on{background: var(--mainColorD);color: #fff;border-radius: 1rem;} .pageNumber a.prev:not(:hover),.pageNumber a.next:not(:hover){/* color:var(--subColor); */} /*編輯器*/ .article--wrapper{display:flex;flex-direction:column;gap:2rem;} .tx01{margin-bottom:1rem;} .text{/* padding:1rem 0; */} .text + figure{margin-top:1rem;} .tx01:last-child{margin-bottom:0;padding-bottom:0;} .pageContent table { max-width:100%;width: 100%;} .img-left,.img-right{display: flex;align-items: center;gap: 2rem;} .img-left figure,.img-right figure{width: calc(50% - .5rem);} .img-right{flex-direction: row-reverse} .img-left.tx01 figure + .text,.img-right.tx01 figure + .text{width: calc(50% - .5rem);} .img_center{width: 33.3%; } .img-left img, .img-right img { max-width:100%; } .img_center img { float: left; padding: 1em; width: 100%; text-align: center;} .img-left figure:only-child,.img-right figure:only-child{float:none;padding: 0;margin: auto;max-width: inherit;text-align: center;width: auto;} .tx01 a{color: var(--color-1,#A7B2E6);text-decoration: underline;} .tx01 a:hover{opacity:.8} .tx01 figure{text-align:center;display: flex;flex-direction: column;align-items: center;gap: 0.25rem;} .tx01 figcaption{position:relative;padding: 0;text-align: center;opacity: 0.8;letter-spacing: 0.08em;font-size: 0.9375rem;padding: 0.25rem;} .tx01 figcaption:before,.tx01 figcaption:after{content:'▪';color:var(--mainColor)} .tx01 img{max-width:100%;max-height:100%;height:auto!important;} .tx01 iframe{overflow:hidden;width: 100%; height:auto;;aspect-ratio: 16/9;} .tx01--video{margin:0;display: flex;} .tx01 ul{/* padding-left:1.375rem; */} .tx01 li:not(:last-child){margin-bottom:0.25rem;} .tx01 table{width:100%;} .tx01 thead th{background:var(--mainColorD);} .tx01 th{text-align:center;background:var(--mainColor);color:#fff;} .lrBox{display: flex;gap: 1rem;align-items: center;} .lrBox .text,.lrBox figure{width:calc(50% - 1rem);margin: 0;} .linkZone{display:flex;gap:0.25rem 1rem;} .linkZone__item{--cl:var(--color-1);display:inline-block;padding: 0.375rem 1rem 0.25rem;border: 1px solid var(--cl);position: relative;} .linkZone__item:after{content:'\F1C5';font-family:bootstrap-icons !important;font-size: 1rem;margin-left: 0.5rem;vertical-align: -1px;transform: scale(0.85);display: inline-block;} .linkZone__item:hover{background:var(--cl);color:var(--mainColorD);} .articleTop{display:flex;gap: 1rem;position: relative;flex-direction: column;} .articleTop__tt{font-weight: 700;font-size: clamp(1.75rem,2.5vw,2.5rem);margin: 0;color: var(--mainColorD);} .articleTop__sub{--shareW: 9rem;--gap: 1.5rem;display:flex;justify-content: space-between;position: relative;min-height: 3.125rem;align-items: flex-end;} .articleTop__sub:after{content:'';position:absolute;width:100%;height:0.125rem;background:var(--gradient-1);left:0;bottom: 0;} .articleTop__sub .dateSort{width:calc(100% - var(--gap) - var(--shareW));padding: 0.5rem;} /*分享*/ .shareZone{--bR: 45%;display:flex;justify-content: center;gap: 0.625rem;padding: 1rem 0.25rem;padding-bottom: 0.625rem;align-items: center;background: var(--gradient-1);width: var(--shareW);border-radius: var(--bR) var(--bR) 0 0;z-index: 1;} .shareZone__tt{font-size: 0.875rem;color: #fff;} .shareZone__item{font-size: 1.5rem;color: #fff;line-height: 1;} .shareZone__item:hover{color:#fff;transform:scale(1.25);} /*!內頁-最新消息*/ .newsBox{--cssNum: var(--num-pcL,1);--gap: clamp(1.35rem,2vw,2rem);display:flex;gap: var(--gap);flex-wrap:wrap;} /*!內頁-投資人專區*/ .listBox{--bR:1rem;/* box-shadow:var(--shD); */border-radius:1rem;} .listBox__head{display: flex;background: var(--mainColor);color: #fff;border-radius: var(--bR) var(--bR) 0 0;font-weight: 500;letter-spacing: 0.15em;margin-bottom: 1rem;border-radius: 0.5rem;box-shadow: var(--shD);padding: 0.125rem 0;position: sticky;left: 0;top: calc(var(--headerH) + 1rem);z-index: 1;} .listBox__body{background: rgba(255,255,255,0.5);border-radius:0 0 var(--bR) var(--bR);overflow: hidden;border-radius: 0.5rem;box-shadow: var(--shD);} .listBox__body__item{display: flex;padding: 0.25rem 0;position: relative;z-index: 0;} .listBox__body__item:not(:last-child){border-bottom:1px solid #ddd;} .listItem{flex:1;padding: 0.75rem 1rem;} .listItem.--num{max-width:5rem;text-align:center;} .listItem.--date{max-width:14rem;} .listItem.--func{max-width:5rem;text-align: center;} .locTt,.locTxt{flex:2;/* padding: 0.75rem 1rem; */} .locTt{font-weight:500;letter-spacing:0.15em;} .locTt.--tel,.locTxt.--tel{flex:1;min-width: 12.5rem;} .locTxt{display:flex;align-items: baseline;/* flex-direction: column; */justify-content: flex-start;gap: 0.5rem;} .locTxt.--name{font-weight: 700;color:var(--mainColorD);margin-bottom: 0.5rem;font-size: 1.125rem;letter-spacing: 0.05em;} .locTxt:has(.bi){flex-direction:row;align-items: center;gap: 0.5rem;justify-content: flex-start;} .locTxt .bi{color:var(--mainColorL);transform:scale(0.85);} .locTxt__group{/* display:flex; *//* flex-direction:column; */} .locTxt__link{/* text-decoration:underline; */text-underline-offset:3px;color: #1f2f46;} .locTxt__link[href="javascript:;"]{cursor:default;color: #333;} /*!內頁-關於(服務據點)*/ .locBoxWrap{display:flex;flex-direction:column;gap:3rem;} .locBox{--bR:1rem;--ttW: 17.5rem;--gapX:clamp(2rem,3.25vw,4rem);display: flex;gap:var(--gapX);align-items: flex-start;} .locBox__tt{width:var(--ttW);font-size: 2.5rem;font-weight: 600;letter-spacing: 0.15em;position: sticky;left: 0;top: calc(var(--headerH) + 1rem);padding: 1rem 0;margin-bottom: 2rem;} .locBox__tt:after{content:'';position:absolute;width: 3rem;height: 0.375rem;background: var(--mainColor);/* background: var(--gradient-1); */left: 0;bottom: 0;} .locBox__ct{width:calc(100% - var(--gapX) - var(--ttW));/* box-shadow: var(--shD); */border-radius: var(--bR);} .locBox__ct__head{display: flex;background: var(--mainColor);color: #fff;border-radius: var(--bR) var(--bR) 0 0;position: sticky;left: 0;top: var(--headerH);z-index: 1;} .locBox__ct__body{--num: 2;--gap:1rem;gap: var(--gap);display: flex;flex-wrap: wrap;} .locTxtWrap{padding:0.25rem 0;background: rgba(255, 255, 255, 0.5);border-radius: var(--bR);box-shadow: var(--shD);padding: 1rem 1.25rem;transition: 0.3s all;width: calc((100% - var(--gap) * (var(--num) - 1)) / var(--num) );} .locTxtWrap:not(:last-child){/* border-bottom:1px solid #ddd; */} .locTxtWrap:hover{background:#fff;box-shadow:0 0 0.125rem rgba(0,0,0,0.15);} /*!內頁-關於(重要事蹟)*/ .sortBar{display:flex;gap:1rem;flex-wrap: wrap;margin-bottom: 1rem;justify-content: center;} .sortBar__item{--cl: var(--mainColor);display:inline-block;padding:0.625rem 1rem;border: 1px solid var(--cl);color: var(--cl);border-radius: 100rem;min-width: 10rem;text-align: center;} .active.sortBar__item{background:var(--cl);color:#fff;} .sortContent{position:relative;} .mileSWrap{position:absolute;overflow:hidden;width: 100%;opacity: 0;transform: translateY(1rem);height: 0;} .active.mileSWrap{position:relative;opacity:1;transform:translateY(0);transition: 1s all;height: auto;} .mileSNavWrap{position:relative;margin-top: 2rem;} .mileSNav{--offset:1rem;--dotSize:1.5rem;} .mileSNav:after{content:'';position:absolute;width:100%;height:1px;background:#ddd;top: calc(var(--dotSize) * 0.5);z-index: -1;} .mileSNav .slick-list{margin: 0 calc(var(--offset) * -1);padding: 0;} .mileSNav__item{--bg:var(--mainColor);margin: 0 var(--offset);cursor:pointer;text-align: center;padding-top: 3rem;padding: clamp(2rem,3vw,3rem) 0;position: relative;} .mileSNav__item:before{content:'';position: absolute;width: 0;aspect-ratio: 1;border: 1px solid var(--bg);border-radius: 100rem;left: 50%;top: calc(var(--dotSize) * 0.5);transform: translate(-50%,-50%);transition: 0.3s all;transform-origin: center;background: #fff;} .mileSNav__item:after{content:'';position: absolute;width: 0.5rem;aspect-ratio: 1;background: var(--bg);border-radius: 100rem;left: 50%;top: calc(var(--dotSize) * 0.5);transform: translate(-50%,-50%);} .mileSNav__item .txt:has(.txt__sub){display:flex;flex-direction: row-reverse;justify-content: center;} .mileSNav__item .txt__sub + .txt__sub:after{content:'~';} .mileSNav__item .txt{display: inline-flex;font-size: clamp(1.75rem,2.5vw,2.5rem);font-weight: 450;flex-direction: column;line-height: 1.25;position: relative;transition: 0.3s all;} .mileSNav__item:not(.slick-current) .txt{transform: scale(0.5);opacity: 0.5;} .slick-current.mileSNav__item .txt{transform:translateY(2rem);color: var(--mainColor);} .slick-current.mileSNav__item:before{width:var(--dotSize);} .mileSNavBtn{position:absolute;display:flex;left: 0;top: -0.25rem;justify-content: space-between;width: 100%;margin: auto;} .mileSNavBtn__arrow{position:relative;color: #fff;cursor: pointer;transition: 0.3s all;width: 3rem;aspect-ratio: 401/285;background: var(--mainColor);mask: var(--oval);display: inline-flex;align-items: center;justify-content: center;} /* .mileSNavBtn__arrow:after{content:'';background:var(--mainColor);position: absolute;width: 3rem;mask: var(--oval);aspect-ratio: 401/285;left: 50%;top: 50%;transform: translate(-50%,-50%);z-index: -1;} */ .mileSNavBtn__arrow.slick-disabled{opacity:0;} .mileSBox{--linePos:clamp(0.125rem,0.1vw,1rem);--padding-this: 2rem;--pY:1.5rem;--pX: clamp(1rem,3.5vw,4rem);margin-top:2rem;overflow-y: auto;height: clamp(20rem,80vh,50rem);padding: var(--padding-this);background: rgba(255,255,255,0.5);border-radius: 1rem;position: relative;} /* .mileSBox:after{content:'';position: absolute;width: 0.25rem;height: calc(100% - var(--padding-this) * 2);background: linear-gradient(to bottom,var(--mainColor) var(--offset),#ddd var(--offset));left: calc((var(--padding-this) + var(--pX)) / 2);top: 50%;z-index: -1;transform: translateY(-50%);} */ .mileSBox__item{padding: var(--pY) 0;padding-left: 2rem;position: relative;} /* .mileSBox__item:before{--cl: var(--green);content:'';position:absolute;width:0.25rem;height:100%;left:0;top:0;background: linear-gradient(to bottom,var(--cl) 33%,#ddd 66%);transform: translateX(-50%);transition: 0.3s all;background-size: 100% 300%;background-position-y: 249%;} .mileSBox__item.--current:before{background-position-y: 205%;} .mileSBox__item.--before:before{background-position-y: 0%;} .mileSBox__item.--last:before{background-size: 100% 350%;background-position-y: 150%;} */ .mileSBox__item:before{content:'';position:absolute;width:0.25rem;height:100%;left: var(--linePos);top:0;background: #ddd;transform: translateX(-50%);} .mileLine{--cl:var(--gradient-1);position: sticky;left: var(--linePos);top: 0;width: 0.25rem;height: calc(20vh + var(--offset,0px));max-height: 100%;background: var(--cl);transform: translateX(-50%);z-index: 1;display: block;margin-bottom: -20vh;} .mileSBox__item:after{content:'';position:absolute;width: 1.25rem;aspect-ratio:1;border:0.375rem solid var(--mainColor);background: #fff;border-radius:100rem;left: var(--linePos);top: calc(var(--pY) + 0.75rem);transform: translateX(-50%);z-index: 2;} .mileSBox__item:not(:last-child){padding-bottom: 4rem;} .mileSBox__item + .mileSBox__item{/* border-top: 1px dashed rgba(0,0,0,0.15); */} .mileYd{--cl:var(--mainColor);font-size: clamp(2rem,3vw,3rem);line-height: 0.8;color: var(--cl);} .mileSBox__item__ct{display:flex;gap:2rem;align-items: flex-start;flex-direction: column;} .mileYd:has(.txt__sub){display:flex;/* flex-direction:column; */} .mileYd .txt__sub + .txt__sub{/* display:inline-flex; *//* flex-direction: column; *//* align-items: center; */} .mileYd .txt__sub + .txt__sub:before{content: '~';/* font-size: 0.85em; *//* line-height: 1.5; *//* font-weight: 100; */margin: 0 0.25rem;} .mileCt{} .ulStyle{list-style:none;padding: 0;margin: 0;display: flex;flex-direction: column;gap: 0.25rem;} .ulStyle li{--w: 1.5rem;padding-left:var(--w);position:relative;} .ulStyle li:before{content:'';position:absolute;width: calc(var(--w) * 0.625);height: 0.125rem;background: var(--mainColor);left: 0;top: 0.625rem;} .mileCt__item .txt{display:block;} .mileCt__item__lb{display:inline-block;overflow:hidden;margin: 0.5rem 0;} .mileCt__item__lb img{width:10rem;aspect-ratio:4/3;object-fit:cover;transition:0.3s all;} .mileCt__item__lb:hover img{transform:scale(1.08);opacity:0.5;} .cover.--mileG{display:flex;margin-top: 1rem;} .cover.--mileG a{overflow: hidden;} .cover.--mileG .cover__pic{height:100%;transition: 0.3s all;object-fit: contain;max-height: 22rem;} .ulStyle li:has(.tagYear):before{content:none;} .ulStyle li:has(.tagYear){padding:0;/* transform: translateX(calc(var(--pX) * -1 - 0.625rem)); */margin-top: 1rem;/* margin-bottom: -1.625rem; */z-index: 1;} .ulStyle li:first-child:has(.tagYear){margin-top:0} .tagYear{background:var(--mainColor);color:#fff;display:inline-block;padding:0 0.5rem;border-radius: 0.5rem;} .radioG.--grid{--cssNum:var(--num-pcL);display: grid;grid-template-columns: repeat(var(--cssNum),1fr);gap: 0.5rem;padding: 0.5rem;border-radius: 0.375rem;} .radioG__item{/* padding:0.25rem 0; */} /*!表單*/ .formGroupWrap{} .formGroupWrap--box{--gapY:1rem;display: flex;gap: 1.5rem var(--gapY);flex-wrap: wrap;justify-content: center;/* background: rgba(255,255,255,0.85); */padding: 2rem 1.5rem;border-radius: 0.5rem;/* border: 1px solid #f1f1f1; */flex-direction: column;box-shadow: var(--shD);background: #fff;} .noteBoard{text-align:center;font-size: 0.935rem;color: #0b2142;/* border-top: 1px solid #ddd; */width: 100%;/* padding-top: 1.5rem; */} .formGroup + .formGroup{margin-top:2rem;} .form-control{/* border:none; */} .form-control::placeholder{color:#b5b5b5} .aleart_line{background:rgb(212 0 35 / 15%)} .aleart_line.form-control::placeholder{color:transparent;} .formGroup{--gapY:1rem;display: flex;gap: 1.5rem var(--gapY);flex-wrap: wrap;justify-content: center;counter-reset: step;} .formGroup__item{width: 100%;} .form-check-input{border-color: #888;} .formGroup__item.--tt{margin-bottom: calc(var(--gapY) * -0.75);color: var(--mainColorD);font-weight: 500;font-size: 1.125rem;} .formGroup__item--half{width: calc((100% - 1rem) / 2);} .formGroup__item--title{font-weight: 550;color: var(--color-3);position: relative;} .formGroup__item--title:before{content: 'STEP 'counter(step);counter-increment: step;margin-right: 0.75rem;font-size: 1.25rem;color: var(--mainColor);font-weight: 700;} .formGroup__item--txt{margin-bottom: 1rem;} .formGroup__item--wrapper{display:flex;gap:1rem;padding:1rem;border:1px solid #ddd;flex-wrap: wrap;} .formGroup__item--recaptcha{display:flex;justify-content: center;gap: 0.25rem 1rem;flex-wrap: wrap;flex-direction: column;align-items: center;} .fakeDot{position:relative;} .fakeDot input{color: transparent!important;opacity: 0;} .fakeDot input:focus{color:#333!important;opacity:1;} .fakeDot__txt{position:absolute;left:0;top:50%;transform:translateY(-50%);padding: .375rem .75rem;letter-spacing: 0.2em;background: #fff;width: 100%;pointer-events: none;border: var(--bs-border-width) solid var(--bs-border-color);border-radius: 0.375rem;height: 100%;overflow: hidden;} .fakeDot input:focus + .fakeDot__txt{border-color: #86b7fe;outline: 0;box-shadow: 0 0 0 .25rem rgba(13, 110, 253, .25);opacity:0} .fakeDot input:focus + .fakeDot__txt::after {content: '';display: inline-block;width: 1px;height: 1em;background: black;animation: blink 1s step-start infinite;position: relative;top: 0.1em;margin-left: 1px;opacity: 0;} /* 閃爍動畫 */ @keyframes blink { 50% { opacity: 1; } } /*!關於和運-關係企業*/ .relatedBox{padding: 2rem;border-radius: 1rem;background: rgba(255,255,255,0.5);box-shadow: var(--shD);} .relatedBox__logo img{width: clamp(18rem,32vw,30rem);} .relatedBox__tt{font-size: 2.5rem;font-weight: 600;letter-spacing: 0.15em;padding: 1rem 0;margin-bottom: 2rem;position: relative;} .relatedBox__tt:after{content:'';position:absolute;width: 3rem;height: 0.375rem;background: var(--mainColor);/* background: var(--gradient-1); */left: 0;bottom: 0;} .relatedBox__ct__link{text-align: right;} .relatedBox__ct__text{font-size:1.025rem;} .relatedBox__ct__img .cover__pic{aspect-ratio:16/9;object-fit:cover;} /*!人才招募*/ .blockHeight--recruit{--bnSp:5rem;padding: 0;} .blockHeight--recruitEnd{padding-bottom:3rem;} .recruitBnWrap{--h:90dvh;height: 180dvh;background: var(--lightColor);background: linear-gradient(180deg, var(--lightColor) 50%, #d5e7fa);position: relative;z-index: 0;/* clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--bnSp)), 0 calc(100% - var(--bnSp))); */} .recruitBnWrap + .blockHeight{margin-top:calc(-5rem - 1px);} .recruitBn{--ttW: 40%;--gap: 3rem;display: flex;padding-left: var(--ctOffset);overflow: hidden;align-items: flex-start;position: sticky;top: var(--headerH);height: 101dvh;} .recruitBn__txt{width: calc(var(--ttW) + 5%);height: var(--h);display: flex;flex-direction: column;justify-content: center;color: #052048;gap: 1rem;padding-top: 4rem;transition: 0.3s all ease-out;max-height: 100dvh;} .recruitBn__txt:after{content:'';position: absolute;width: clamp(15rem,30vw,28rem);aspect-ratio: 1;left: -10%;bottom: 1rem;z-index: -1;opacity: 0.12;filter: blur(0.5rem);border: 7rem solid var(--mainColor);border-radius: 100rem;animation: floatUpDown2 5s ease-in-out infinite;} .recruitBn__media{position:sticky;right:0;top: var(--headerH);width: calc(100% - var(--ttW));transform: translate(20%,-30%);display: flex;aspect-ratio: 1;align-items: center;justify-content: center;} .recruitBn__media:before{content:'';position: absolute;width: clamp(0.75rem,1.25vw,1.375rem);aspect-ratio: 1;background: var(--subColor);border-radius: 100rem;left: -0.5%;top: 42%;animation: dotFloat 4s infinite ease-out;animation-delay: 0.5s;z-index: 1;} .recruitBn__media:after{content:'';position:absolute;width:100%;aspect-ratio:1;background:url(../images/recruit/car-circle.png)center/cover;left: 50%;top: 50%;transform: translate(-50%,-50%);animation: spinAni 25s linear infinite;pointer-events: none;} .cover.--recruitCv{padding: 1rem;transform: scale(0.85);} .cover.--recruitCv .cover__pic{width:100%;aspect-ratio: 1;border-radius: 100rem;border: clamp(0.75rem,1vw,1rem) solid #fff;} .h2Wrap{position:relative;margin: 0;} .h2Wrap__tt{display:flex;flex-direction:column;font-size: clamp(2rem,3.5vw,4rem);font-weight:700;letter-spacing: clamp(0.125em,0.25vw,0.25em);line-height:1.5;transition: 1s all;filter: blur(0);} .h2Wrap__tt.--en{letter-spacing: 0.01em;line-height: 1.2;} .h2Wrap__tt.--en .txt:first-letter{font-size:1.25em;} .subWrap{position:relative;} .subWrap__tt{font-size: 1.25rem;font-weight: 700;letter-spacing:0.5em;transition: 1s all;filter: blur(0);} .recruitBn__txt .isHide{position:absolute;top:0;left:0;opacity:0;pointer-events: none;filter: blur(0.625rem);} .--gradC{background: linear-gradient(120deg,var(--mainColor),var(--mainColorD));-webkit-background-clip: text;-webkit-text-fill-color: transparent;background-clip: text;} .recruitBn__txt__link{--sdW: clamp(20rem,45vw,46.25rem);display:flex;gap: 0.5rem 1rem;margin-top: 10rem;padding: 1rem 2rem;font-size: 1.025rem;justify-content: space-between;width: 105%;background: rgba(255,255,255,0.85);border-radius: 100rem;letter-spacing: 0.05em;align-items: center;position: relative;text-wrap-mode: nowrap;} .recruitBn__txt__link:after{--pos: 0.5rem;content:'';position:absolute;width:100%;height:100%;border: 1px solid var(--mainColorL);border-radius:100rem;top: var(--pos);left: var(--pos);z-index: -1;transition: 0.3s all;pointer-events: none;} .recruitBn__txt__link .line{content:'';width: clamp(10rem,18vw,18.5rem);height:1px;background: #333;display: block;opacity: 0.5;transition: 0.3s all;} .recruitBn__txt__link .txt.--dot{--dotW: 0.75rem;position:relative;padding-left: calc(var(--dotW) + 0.5rem);} .recruitBn__txt__link .txt.--dot:before{content:'';position:absolute;width:var(--dotW);aspect-ratio: 10/8;background:var(--mainColor);border-radius:100rem;left:0;top:50%;transform:translateY(-50%);mask: var(--oval);} .recruitBn__txt__link .txt.--en{display:inline-block;padding: 0.375rem 1rem;background: #f1f1f1;border-radius:100rem;letter-spacing: 0;box-shadow: 0.25rem 0.25rem 0.25rem rgba(0,0,0,0.15);transition: 0.3s all;/* margin: auto; *//* margin-right: 0; */} .recruitBnWrap + .blockRecruit{background: linear-gradient(180deg,var(--lightColor) 25%,var(--mainColorL));background: linear-gradient(180deg, #d5e7fa , #fff);} .recruitBnWrap + .blockRecruit .container{/* margin-top: calc(var(--bnSp) * -1 - 1px); */} .blockRecruit{padding:clamp(3rem,7vw,7.5rem) 0;} .blockRecruit.--bnf{--pos: 5rem;/* clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--pos)), 50% 100%, 0 calc(100% - var(--pos))); *//* padding-bottom: calc(clamp(3rem,7vw,7.5rem) + var(--pos)); */position: relative;} .blockRecruit.--bnf:before{content:'';position: absolute;width: 55%;aspect-ratio: 1;background: #fff;border-radius: 100rem;left: 50%;top: 1.5rem;animation-delay: 0.5s;opacity: 0.5;transform: translateX(-50%);filter: blur(2.5rem);mask: var(--donut2)center/cover;} .recruBnfWrap{padding-top:2rem;} .recruBnfBox{--cssNum:var(--num-pcL,1);--gap: 2rem;display:flex;gap:var(--gap);flex-wrap: wrap;} .recruBnfBox__item{width:calc((100% - var(--gap) * (var(--cssNum) - 1)) /var(--cssNum));position: relative;display: flex;flex-direction: column;align-items: center;} .recruBnfBox__item__tt{--cl:var(--mainColor);font-size:1.5rem;font-weight:500;letter-spacing:0.15em;padding: 0.625rem 1rem 0.5rem;background: var(--cl);color: #fff;position: relative;border-radius: 100rem;display: inline-flex;width: calc(100% - 4rem);min-width: 12.5rem;justify-content: center;margin-bottom: -1.75rem;z-index: 2;} .recruBnfBox__item__tt:after{content:'';position:absolute;width:1rem;aspect-ratio:1;background:var(--cl);left: 50%;top: 100%;transform: translate(-50%,-50%) rotateY(35deg) rotate(45deg);border-radius: 0.125rem;} .recruBnfBox__item__ct{padding: 4rem 2rem 2rem;display: flex;flex-direction: column;gap: 2rem;background: #fff;border-radius: 3rem;height: 100%;justify-content: center;border: 1px solid var(--mainColorL);position: relative;z-index: 1;width: 100%;} .recruBnfBox__item:after{content:'';position: absolute;width: 100%;height: 100%;background: var(--oval);left: 50%;top: 50%;transform: translate(-50%, -50%) scale(0.92) rotate(-15deg);filter: blur(4rem);/* z-index: -1; */} .recruBnfList{display:flex;flex-direction:column;gap: 2rem;height: 100%;justify-content: space-evenly;} .recruBnfList__item{display:grid;grid-template-columns: 4rem 1fr;gap:1rem;display: flex;flex-direction: column;align-items: center;text-align: center;} .cover.--bnfIcon{max-width:5rem;opacity: 0.8;} .recruBnfList__item__tt{--lt:0.15em;} .recruBnfList__item__tt dt{font-size: 1.5rem;letter-spacing:var(--lt);margin-right:calc(var(--lt) * -1);margin-bottom: 0.5rem;font-weight: 500;} .recruBnfList__item__tt dd{} .blockRecruit.--learn{background: linear-gradient(180deg,#f4f4f4,#fff 50%);background: #fff;position: relative;z-index: 0;padding: 0;} .recruitLnTopInner{display:flex;justify-content: space-between;} .recruLearn{padding-top: 4rem;display: flex;flex-direction: column;/* gap: clamp(3rem,7vw,7.5rem); */} .titleSub{margin-bottom: 2rem;display: flex;justify-content: center;align-items: center;gap: 0.625rem;flex-wrap: wrap;text-align: center;} .titleSub__dot{width: 1.5rem;aspect-ratio:1;background: var(--mainColorD);mask: var(--gradient-1)center/cover;border-radius: 100rem;position: relative;} .titleSub__dot:after{content:'';position:absolute;width: 0.375rem;aspect-ratio:1;background:#fff;left: 50%;top: 50%;transform: translate(-50%,-50%);border-radius: 100rem;} .titleSub .txt{--lt:0.15em;display:inline-block;font-size: clamp(1.25rem,1.7vw,1.75rem);font-weight:500;border-radius: 100rem;letter-spacing: var(--lt);position: relative;} .recruLnItem{--cssNum:var(--num-pcL,1);--gap: 1.5rem;display: flex;flex-wrap: wrap;gap:var(--gap)} .recruLnItem__item{width:calc((100% - var(--gap) * (var(--cssNum) - 1)) / var(--cssNum));padding: 2rem;background: #f4f4f4;border-radius: 1rem;position: relative;} .recruLnItem__item:after{--pos: 0.375rem;content:'';position:absolute;width:100%;height:100%;border-radius: 1rem;border: 1px solid #fff;left: var(--pos);top: var(--pos);pointer-events: none;} .recruLnItem__item__icon{--iconW:4rem;display: block;text-align: right;margin-bottom: 1rem;} .recruLnItem__item__icon img{max-width: var(--iconW);} .recruLnItem__item__tt{font-size: clamp(1.25rem,1.5vw,1.5rem);font-weight:500;letter-spacing: 0.25em;margin-bottom: 0.5rem;} .recruLearn__item{padding: clamp(3rem,7vw,7.5rem) 0;} /*人才招募-學習與成長(1)*/ .recruLearn__item.--1{position: relative;z-index: 0;padding: 4rem 2rem;overflow: hidden;} .recruLearn__item.--1 .briefTxt{margin-top:2rem;color:#fff;} .recruLearn__item.--1:before{content:'';position:absolute;width:100%;height: 30%;bottom:0;left:0;background:#dff0ff;z-index: -2;} .recruLearn__item.--1:after{content:'';position:absolute;width: calc(100vw - var(--ctOffset));height:100%;background:var(--mainColor);border-radius: 2rem;left: 50%;transform: translateX(-50%);top: 0;z-index: -2;} .recruLearn__item.--1 .container:before{content:'';position:absolute;width: 40%;aspect-ratio:1;border: 1.5rem solid #fff;right: 0;bottom: 0;transform: translate(30%,60%);border-radius: 100rem;z-index: -1;opacity: 0.15;} .recruLearn__item.--1 .titleBox{color:#fff;} .titleBox .titleSub{margin:0;} .recruLearn__item.--2{background:#dff0ff;position: relative;} .recruLearn__item.--3{background:#dff0ff;position: relative;padding-top: 0;padding-bottom: calc(100vw / 1920 * 315 + 5rem);} .recruLearn__item.--3:after{content:'';position: absolute;width: 100%;aspect-ratio: 1920 / 315;background: #fff;left: 0;bottom: 0;mask: url("data:image/svg+xml,%3Csvg width='1920' height='315' viewBox='0 0 1920 315' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_2440_886)'%3E%3Cpath d='M0 315h1920V28.3C1770.47 9.7 1616.65 0 1459.65 0 920.5 0 418.77 114.33 0 310.76V315z' fill='%23fff'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_2440_886'%3E%3Cpath fill='%23fff' d='M0 0h1920v315H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E") center/cover no-repeat;} .recruLearn__item.--3 .container:before{content:'';position:absolute;width:3rem;aspect-ratio:1;background: var(--mainColor);border-radius: 100rem;bottom: clamp(2rem,15vw,17rem);right: var(--ctOffset);z-index: 10;animation: dotFloat 3s infinite ease-in;} .recruLearn__item.--3 .container:after{content:'';position:absolute;width: 26.25rem;aspect-ratio:1;background: var(--donut2)center/cover;opacity: 0.1;left: 5%;bottom: -4%;animation: floatUpDown2 5s ease-in-out infinite;pointer-events: none;} .recurDiagram{margin:0;display: flex;justify-content: center;overflow: hidden;max-width: 62.5rem;margin: auto;} .recurDiagram__pic{aspect-ratio: 1024/580;background: rgba(255,255,255,0.5);padding: 2rem;transition: 0.3s all;} .recurDiagram:hover .recurDiagram__pic{transform:scale(1.05);} .recruClassWrap{--cssNum:var(--num-pcL,1);--gap: 0px;--ani: 10rem;display: flex;gap: calc(var(--gap) + var(--ani,0px));padding: 3rem 0;justify-content: center;transition: 0.5s all;transition-delay: 0.125s;opacity: 0;} .animated.recruClassWrap{opacity: 1;--ani:0px;} .recruClassI__tt{font-size:1.25rem;font-weight:500;text-align:center;letter-spacing:0.15em;} .recruClass__item:nth-child(1){--cl:#64BEE9;} .recruClass__item:nth-child(2){--cl:#0083CA;} .recruClass__item:nth-child(3){--cl:#122F57;} .recruClass__item:nth-child(4){--cl:#144B8A;} .recruClass:nth-child(even) .recruClass__item:nth-child(1){--cl:#57C4D4;} .recruClass:nth-child(even) .recruClass__item:nth-child(2){--cl:#008CAB;} .recruClass:nth-child(even) .recruClass__item:nth-child(3){--cl:#08334F;} .recruClass:nth-child(even) .recruClass__item:nth-child(4){--cl:#03517B;} .recruClass__item:nth-child(1) .recruClass__item__tt{border-top-left-radius:var(--bR);} .recruClass__item:nth-child(1) .recruClass__item__tt:after{right: 0;top: 50%;transform: translate(50%,-50%);} .recruClass__item:nth-child(2) .recruClass__item__tt{border-top-right-radius:var(--bR);} .recruClass__item:nth-child(2) .recruClass__item__tt:after{left: 50%;bottom: 0;transform: translate(-50%,50%) rotate(90deg);} .recruClass__item:nth-child(3) .recruClass__item__tt{border-bottom-left-radius:var(--bR);} .recruClass__item:nth-child(3) .recruClass__item__tt:after{left: 50%;top: 0;transform: translate(-50%,-50%) rotate(-90deg);} .recruClass__item:nth-child(4) .recruClass__item__tt{border-bottom-right-radius:var(--bR);} .recruClass__item:nth-child(4) .recruClass__item__tt:after{left: 0;top: 50%;transform: translate(-50%,-50%) rotate(-180deg);} .recruClass__item:hover .recruClass__item__ct{opacity:1;pointer-events:all;top:60%;} .blockRecruit.--peo{background:linear-gradient(180deg,#fff,transparent);padding-bottom: 3rem;z-index: 1;position: relative;} .blockRecruit.--peo .container{--offset:5rem;transform: translateY(calc(var(--offset) * -1));margin-bottom: calc(var(--offset) * -1);} .recruPeo{margin-top: 4rem;display: flex;flex-direction: column;gap: 4rem;} .recruPeo__item{} .recruPeo__item__tt{width:var(--ttW);display: flex;flex-direction: column;align-items: flex-start;gap: 0.5rem;} .recruPeo__item__tt .enTxt{font-size: 2.5rem;font-weight: 500;line-height: 1.25;position: relative;display: inline-block;} .recruPeo__item__tt .enTxt:after{content:'';position:absolute;width:100%;height:0.25rem;background: #333;left: 0;bottom: 10px;} .recruPeo__item__tt .txt{} .recruPeo__item__ct{} .recruSBox{border-radius:1rem;overflow:hidden;margin: 0 1rem;position: relative;} .recruSBox .textBox{padding: 0.5rem 1.5rem;position: absolute;left: 50%;bottom: 1rem;transform: translateX(-50%);border-radius: 1rem;width: calc(100% - 1rem);text-align: center;transition: 0.3s all;} .recruSBox .textBox:after{content:'';/* transform: perspective(1.5rem) rotateX(1.1deg) translateZ(-1px); */width: 100%;height: 100%;position: absolute;background: rgba(255,255,255,0.98);left: 0;bottom: 0;border-radius: 0.625rem;z-index: -1;backdrop-filter: blur(0.5rem);} .textBox__tt{font-size:1.125rem;font-weight:500;letter-spacing:0.05em;color: var(--mainColorD);} .cover.--recruS .cover__pic{width:100%;aspect-ratio: 14/9;transition: 0.3s all;} .recruitEndWrap{display: flex;gap: 1rem 3rem;justify-content: center;padding: 1.25rem;background: #fff;border-radius: 100rem;align-items: center;flex-direction: row-reverse;flex-wrap: wrap;} .recruPeoData{--cssNum:var(--num-pcL,1);--gap: clamp(1rem,2vw,2rem);display:flex;gap:var(--gap);justify-content: center;} .recruPeoData__item{width: calc((100% - var(--gap) * (var(--cssNum) - 1)) / var(--cssNum));background:#fff;max-width: 22.5rem;padding: 2rem clamp(1rem,2vw,2rem);display: flex;flex-direction: column;align-items: center;border-radius: 1rem;} .recruPeoData__item__num{font-weight:500;font-size: 1.5rem;color: var(--mainColor);} .recruPeoData__item__num .numData{font-size: clamp(2rem,3vw,3rem);color: var(--mainColorD);} .recruPeoData__item__tt{font-size: 1.125rem;letter-spacing:0.15em;font-weight: 500;} .recruFixed{--bR: 0.75rem;position:fixed;right: 0;bottom: 0;display: flex;background: var(--gradient-1);background: linear-gradient(120deg, #0066ff, #ff3c00);z-index: 9;width: 100%;transform: translateY(100%);transition: 1s all;padding-right: 4.5rem;} .recruFixed.--show{transform: translateY(0);} .recruFixed__item{padding: 0.875rem 0.5rem;letter-spacing: 0.05em;font-weight: 500;font-size: clamp(0.875rem,1vw,1.125rem);flex: 1;text-align: center;color: #fff;border-right: 1px solid rgba(255,255,255,0.5);display: flex;align-content: center;justify-content: center;gap: 0.375rem;align-items: center;} .recruFixed__item .bi{font-size: 0.9375em;} .recruFixed__item.--all{/* flex: 1.25; */} .recruFixed__item:hover{background:rgba(255,255,255,0.85);color:var(--mainColor);} /*利害人關係*/ .stakeHBox{background: rgba(255,255,255,0.5);height: 0;/* transition: 0.3s all; */opacity: 0;pointer-events: none;overflow: hidden;padding: 0 2rem;border-radius: 1rem;} .stakeHContent{padding-top:2rem;} .active.stakeHBox{height:auto;opacity:1;pointer-events:all;padding: clamp(1rem,2vw,2rem);} .stakeHBox:has(.stakeHBox__item){--gap:1rem;display: flex;flex-wrap: wrap;gap: var(--gap);} .stakeHBox__item{padding: 1rem 1.5rem;background: #fff;border: 1px solid #f1f1f1;font-size: 1.025rem;border-radius: 0.5rem;width: 100%;} .stakeHTt{font-weight:600;font-size:1.375rem;padding-bottom:0.25rem;border-bottom:1px solid #ddd;margin-bottom:1rem;width: 100%;} .stakeHList{margin:0;padding:0;list-style:none;word-break: break-all;} .stakeHList li{--dotW: 0.375rem;position:relative;padding-left:calc(var(--dotW) + 1rem);} .stakeHList li:not(:last-child){margin-bottom:0.25rem;} .stakeHList li:before{content:'';position:absolute;width:var(--dotW);aspect-ratio:1;background: var(--mainColor);left:0.25rem;top:50%;transform:translateY(-50%);} .olOffset{padding-left:1.25rem;} .stakeHBox__item__data{display:flex;flex-direction: column;justify-content: space-around;align-items: center;position: relative;z-index: 1;gap: 2rem;} .stakeHBox__item__envolope:has(.--envolope):after{content:'';position:absolute;width: 100%;aspect-ratio: 660/219;background: url("../images/stakeholder/envolope-back.png")center top/cover;background-size: 100% 100%;left: 50%;transform: translate(-50%,0%);bottom: 0;z-index: -1;} .stakeHBox__item.--ctForm{display:grid;gap: 2rem;grid-template-columns: clamp(18rem,25vw,30rem) auto;padding: 2rem 1rem 0;overflow: hidden;} .stakeHBox__item__envolope{--pdX:2rem;padding: 0 var(--pdX);position:relative;z-index: 0;} .formGroup.--envolope{padding-bottom: 3.5rem;margin: 0;z-index: 1;} .stakeHBox__item__envolope:before{content:'';position:absolute;background: url(../images/stakeholder/deco-leave.png)center/cover;aspect-ratio: 640/872;height: 37%;left: 0;bottom: 0;z-index: -1;transform: translateX(-50%);} .formGroup.--envolope:after{content:'';position:absolute;width: 100%;/* height: 15rem; */aspect-ratio: 1000/326;background: url("../images/stakeholder/envolope.png")center top/cover;left: 0;bottom: 0;/* transform: translateX(-50%); */z-index: -1;} /*公司簡介*/ .artBlock{padding: 2rem clamp(1.25rem,2vw,2rem);border-radius: 1rem;background: rgba(255,255,255,0.5);box-shadow: var(--shD);display: flex;flex-direction: column;gap: clamp(2rem,4vw,4rem);} .--abCore .cover__pic{max-width: 65rem;width: 100%;} .abCoreBox{--cssNum:var(--num-pcL,1);--gap: 1.5rem;display: flex;flex-wrap: wrap;gap:var(--gap);margin: clamp(2rem,3vw,4rem) 0;} .abCoreBox__item{width:calc((100% - var(--gap) * (var(--cssNum) - 1)) / var(--cssNum));padding: 2rem;background: #fff;border-radius: 1rem;position: relative;} .abCoreBox__item:after{--pos: 0.375rem;content:'';position:absolute;width:100%;height:100%;border-radius: 1rem;border: 1px solid var(--mainColorL);left: var(--pos);top: var(--pos);pointer-events: none;} .abCoreBox__item__icon{display: block;text-align: right;margin-bottom: 1rem;} .abCoreBox__item__icon img{max-width: clamp(2.5rem,5vw,4rem);} .abCoreBox__item__tt{font-size: 1.5rem;font-weight: 700;letter-spacing: 0.25em;margin-bottom: 0.5rem;} .ab8Facet__img{margin: 2rem 0;text-align: center;position: relative;grid-area: img;display: flex;flex-direction: column;justify-content: center;} .ab8Facet__img__pic{width: 75rem;margin: auto;} /*隱私權政策*/ /* .pgContent .blockHeight--privacy{padding-top:clamp(3rem,7vw,7.5rem) } */ .privacyBox{/* font-size: clamp(1rem,1vw,1.125rem); */padding: 2rem;-webkit-backdrop-filter: blur(1rem);backdrop-filter: blur(1rem);border-radius: 1rem;background: linear-gradient(180deg, rgba(255, 255, 255, 0.5), #fff 55%);box-shadow: var(--shD);} .privacyBox__brief{margin-bottom: 2rem;} .privacyBox__main{--gapY: 2rem;counter-reset: num;display: flex;flex-direction: column;gap: var(--gapY);} .privacyList__tit{position: relative;font-weight: 550;font-size: 1.125rem;margin-bottom: 0.5rem;color: var(--mainColorD);} .privacyList__content p:last-child{margin:0} .privacyList{position:relative;} .privacyList + .privacyList:before{content:'';position:absolute;width:100%;height:1px;background:#ddd;left:0;top: calc(var(--gapY) * 0.5 * -1);} .privacyList ul{list-style:none;margin:0;} .privacyList li{margin-bottom:0.5rem;} .privacyList li ul{margin:0.5rem 0} .privacyList li li{margin-bottom:0.125rem;} .privacyList li li:last-child{margin-bottom:1rem} .privacyMark{font-size:0.875em;} /*====== 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;} /*!992 header*/ body:has(.nav-item.dropNav:hover):before{opacity:1;pointer-events:all;} /* body:has(.nav-item.dropNav:hover){overflow:hidden;padding-right: var(--hoverSet);} */ .navbar {padding: 0 clamp(0px,1vw,2rem);} .menuBar{display: flex;width: calc(100% - var(--gapX) - var(--logoW));justify-content: space-between;align-items: center;} .nav-item{/* position:relative; */} .nav-link{height:var(--headerH);height: 4.375rem;display: flex;align-items: center;position: relative;} .nav-link:after{--cl:var(--mainColor);content:'';position:absolute;width: 0.5rem;aspect-ratio: 8/6;background:var(--cl);border-radius: 100rem;left: 50%;bottom: 0.5rem;transform: translate(-50%,100%);opacity: 0;pointer-events: none;transition:0.3s all;mask: var(--oval);} .active .nav-link{color:var(--mainColor);} .active .nav-link:after,.nav-item:hover .nav-link:after{transform:translate(-50%,0);opacity:1;} .nav-item:hover .nav-link:after{--cl:var(--subColor);} .nav-item .dropdown-menu{--spTop: 1rem;position:absolute;display: grid;grid-template-columns: 67% 1fr;border: none;left: 50%;transform: translateX(-50%);text-align: center;width: calc(100vw - 4rem);background: var(--lightColor);justify-content: space-between;transition: 0.3s all;pointer-events: none;opacity: 0;min-height: 16rem;padding: 2rem;border-radius: 1rem;gap: 2rem;top: 100%;box-shadow: var(--shD);} .nav-item .dropdown-menu:before{content:'';position:absolute;width:100%;height: calc(100% + var(--spTop));left:0;bottom:0;z-index: -1;} .nav-item .dropdown-menu:after{content:'';width: 100%;object-fit:cover;background: var(--arc2) center right/contain no-repeat,var(--img)center/cover;background: var(--img)center/cover;background-position: center right -0.5px,center;display: block;border-radius: 1rem;border-radius: 70% 30%;} .dropdownWrap{--ttW:20rem;--gap: 1rem;display: flex;text-align: left;gap: var(--gap);} .dropdownWrap:before{content:attr(data-tt);font-size: 2rem;letter-spacing: 0.08em;width: var(--ttW);color: var(--mainColor);font-weight: 450;} .dropdownWrap__mj{--cssNum: var(--num-pcL);--gapIn: 1.5rem;display:flex;flex-wrap:wrap;width: calc(100% - var(--gap) - var(--ttW));gap: var(--gapIn);align-items: flex-start;align-content: flex-start;max-height: 12.5rem;overflow-y: auto;padding-right: 1rem;} .dropdown-item{width: calc((100% - var(--gapIn) * (var(--cssNum) - 1)) / var(--cssNum) );font-size:1.125rem;padding: 0.625rem 0.25rem;border-bottom: 1px solid #ddd;position: relative;} .dropdown-item:before{content:'';position:absolute;width:0%;height: 1px;background:var(--mainColor);right:0;bottom:-1px;transition:0.3s all;} .dropdown-item:hover{color:var(--mainColorD);} .dropdown-item:hover:before{width:100%;left:0;} .nav-item:hover .dropdown-menu{opacity:1;pointer-events:all;top: calc(100% + var(--spTop));} /*992 多語系按鈕*/ .langBtn{display: flex;gap: 0.5rem;} .langBtn__item{width: 3rem;aspect-ratio: 48/36;background: var(--mainColor);mask: var(--oval);display: inline-flex;color: #fff;align-items: center;justify-content: center;opacity: 0.5;font-size: 0.9375rem;} .langBtn__item.active,.langBtn__item:hover{opacity: 1;color: #fff;} .langBtn__item:hover{background: var(--subColor);} /*!992 banner*/ .banner{--pdX:2rem;padding:0 var(--pdX);} .banner .slick-list{border-radius:1rem;} .bnTxt__sub:before,.bnTxt__sub:after{content:'';display:block;width:5rem;height: 0.125rem;background:#fff;} /*!992 首頁下方*/ /*!992 首頁-最新消息*/ .newsBox__item:hover .--news .cover__pic{transform:scale(1.125);opacity:0.5;} .newsBox__item:hover .itemTt{color:var(--mainColorD);} /*!992 內頁-投資人*/ .listBox__body__item:after{content:'';position:absolute;width: 0;height:100%;right: 0;top: 0;background: var(--lightColor);background: #fff;z-index: -1;transition: 0.3s all;} .listBox__body__item:hover{color:var(--mainColor);} .listBox__body__item:hover:after{width:100%;left:0;} /*!992 內頁-人才招募*/ .recruClass{transform:rotate(-3deg) scale(0.9);} .recruClass:nth-child(even){transform:rotate(3deg) scale(0.9);} .recruClass:hover{transform:none;} .recruitBn__txt__link:hover{box-shadow:var(--sdW,12.5rem) 0 0 var(--bg,var(--mainColorD)) inset;color:#fff;;} .recruitBn__txt__link:hover:after{--pos:0px;border-color:var(--mainColorD);} .recruitBn__txt__link:hover .txt.--en{background:#fff;color:var(--mainColor)} .recruitBn__txt__link:hover .line{background:#fff;} .recruFixed__item.--all:hover{background-size:200%} .recruFixed__item.--all:hover:after{background:#6c75ac;} /*!992 內頁-利害人關係*/ .stakeG__item:hover{--cl:var(--mainColorD)} .stakeG__item:hover .txt{background:var(--mainColor);color:#fff;} } @media screen and (min-width:1200px){ :root{--container:1140px;} header .container{max-width: 100%;padding: 0 1rem;} } @media screen and (min-width:1400px){ :root{--container:1320px;} } @media screen and (min-width:1680px){ :root{--container:1540px;} } /*======== max ========*/ @media screen and (max-width:1399px) { /*!1399(1400斷點) 數量*/ /* .newsBox{--cssNum:var(--num-pcS,var(--num-pcL));} */ /* .radioG.--grid{--cssNum:var(--num-pcS,var(--num-pcL));} */ } @media screen and (max-width:1199px) { /*!1199 header*/ .navbar-expand-lg .navbar-nav .nav-link{padding: 0;} /*!1199 首頁*/ .soluWrap{flex-direction:column;} .soluWrap__mj{width:100%;} .soluWrap__media{width: 85%;margin: auto;} .soluWrap__media{} .soluBox{justify-content:center;} .cover:has(.soluWrap__media__pic.--mj){width:100vw;left:50%;transform:translateX(-50%);} .soluWrap__media__pic.--mj{/* mask:none; */height: 15.5rem;aspect-ratio: 700/500;object-fit: cover;} .cover:has(.soluWrap__media__pic.--mj):after{content:none;} .cover:has(.soluWrap__media__pic.--sub){transform: translate(50%,50%);} .soluWrap__media:after{bottom: 92%;} .soluWrap__mj__ct .briefTxt br{display:none;} /*!1199 內頁-最新消息*/ } @media screen and (max-width:991px) { /*!991(991斷點) 數量*/ /* .newsBox{--cssNum:var(--num-mbL,var(--num-pcS));} */ /*!991 header*/ header.navbar{padding:0.75rem 0;background: #fff;box-shadow: var(--shD);} header.navbar:has(.navbar-toggler.isOpen){background:#fff} header .container{max-width:100%;} .navbar-brand{padding-left:0.5rem;} .menuBar{position: absolute;width: 100%;right: 0;top: 100%;background: #f4f4f4;pointer-events: none;transform: translateX(100%);transition: 0.3s all;opacity: 0;height: calc(100dvh - var(--headerH));display: flex;flex-direction: column;justify-content: space-between;} .isOpen + .menuBar{opacity:1;transform: translateX(0);pointer-events: all;} .navbar-expand-lg .navbar-nav .nav-link{padding: 0.75rem clamp(1.25rem,1.2vw,1.5rem);border-bottom:1px solid #ddd;} .navbar-nav{gap:0;max-height: calc(100dvh - var(--headerH));overflow-y: auto;padding-bottom: 1rem;} .dropNav{position:relative;} .dropNav .nav-link{display:flex;justify-content: space-between;} .dropNav .nav-link:after{content:'\F282';font-family:'bootstrap-icons';} .dropdown-menu{border:none;border-radius:0;} .dropdown-item{padding:0.5rem 1rem;padding-left: 1.75rem;} .isDrop .dropdown-menu{display:block;border-bottom: 1px solid #ddd;padding: 0;} .dropdown-item.--exLink:after{right:1.25rem;} /*!991 側選單*/ .sidebarToggle{--cl:Var(--mainColor);display: inline-flex;padding: 0.5rem 1rem;background: var(--cl);border: 1px solid var(--cl);color: #fff;border-radius: 0.5rem;transition: 0.3s all;width: 100%;justify-content: space-between;gap: 1rem;} .sidebarToggle:after{content:'\F282';font-family:'Bootstrap-icons';} .isDrop .sidebarToggle{border-radius:0.5rem 0.5rem 0 0;} .isDrop .sideNavList{display:flex;padding: 0.5rem 1rem;} .sidebarWrap:has(.sidebar){--barGap: 1.53rem;flex-direction: column;} .sidebar,.sidebarContent{width:100%} .sidebar{position:static;} .sideNav__item{/* overflow-x:auto; */} .sideNavList{border-radius: 0 0 0.5rem 0.5rem;box-shadow:none;display:none;} .listBox__head{display:none;} .listBox__body{box-shadow:none;background:transparent;border-radius:0;display: flex;flex-direction: column;gap: 1rem;} .listBox__body__item{background: rgba(255,255,255,0.85);border-radius: 0.5rem;overflow: hidden;} .listItem.--num{display:none;} .listItem.--func{/* max-width:100%; */text-align:right;aspect-ratio: 1;padding: 0;width: 2rem;display: inline-flex;align-items: center;justify-content: center;margin: auto;margin-right: 0;background: var(--mainColor);color: #fff;border-radius: 0.5rem 0 0 0;} .listBox__body__item{flex-direction: column;padding: 0.75rem 0 0;} .listItem{padding: 0 1rem;width: 100%;} /*!991 內頁-最新消息*/ .newsBox{--num:2} /*!991 footer*/ .fTop{flex-direction:column;} .fSitemapWrap{--num:3;} .fSitemap{width:calc((100% - var(--gapX) * (var(--num) - 1)) / var(--num) );} .fSiteBtn__btn{--sdW:90vw;width:100%;} /*!991首頁*/ .soluBox--slick{width: 100%;} .soluBox--slick .slick-list{overflow:visible;} .soluBox__item {margin:auto;text-align:center;width: auto;margin: 0 5px;} .soluBox__item__tt{font-size:0.75rem} .recruBox__item{max-width:100%;margin: 0 0.5rem;} .sloganTopWrap{height:6.25rem;} .sloganBtm__ct{flex-direction:column;} .sloganBtm{flex-direction:column;gap: 1rem;text-align: center;padding: clamp(3rem,3.5vw,4rem) 1rem;} .sloganBtmWrap .container{max-width:calc(100% - 2rem);} .recruBox .slick-list{overflow:visible;} /*!991 利害人關係*/ .stakeHBox__item.--ctForm{flex-direction: column;display: flex;} .cover.--ctDataImg{text-align:center;} .cover.--ctDataImg .cover__pic{max-width: min(20rem,100%);} .recruitBn{flex-direction: column-reverse;padding: 0 2rem;height: 80dvh;} .recruitBn__txt{width: 80%;/* padding: 0; */position: relative;z-index: 99;height: 80%;} .recruitBn__media{position: absolute!important;} .recruitBn__txt__link .line{display:none;} .recruitBn__txt__link{margin-top: clamp(5rem,10vw,10rem);flex-wrap: wrap;width: fit-content;justify-content: center;} .recruBnfBox__item__tt{width:auto;} .recruBnfList{flex-direction:row;gap: 1.5rem;} .recruBnfList__item{flex:1} .recruPeoData__item{max-width: none;} .blockRecruit.--peo{padding-top:4rem;} .blockHeight--recruitEnd{padding:0;} .blockHeight--recruitEnd .container{padding:0;margin:0;max-width:100%;} .recruitEndWrap{border-radius:0;padding: 3rem 2rem;} } @media screen and (max-width:768px) { .container{--bs-gutter-x:2rem;} .navbar-brand{padding:0;} .navbar-toggler{transform:translateX(0.5rem);/* padding: 0 0.25rem; */} /*!768 banner*/ .banner__box, .banner__box.slick-slide,.bnSource,.bnImg__pic{aspect-ratio:8/9;} /*!767 footer*/ .fTop{gap:1.5rem} .fSitemapWrap{flex-direction: column;gap: 0;} .fSitemap{width:100%;gap: 0;position: relative;} .fSitemap__tt{padding: 0.75rem 0.5rem;position:relative;display: flex;justify-content: space-between;border-bottom: 1px solid rgba(0,0,0,0.15);align-items: center;color: #333;font-weight: 400;} .fSitemap__tt:after{content:'\F282';font-family:'bootstrap-icons';font-size: 0.9375rem;line-height: 1;color: transparent;transition: 0.3s all;display: inline-block;background: url("data:image/svg+xml,%3Csvg width='43' height='42' viewBox='0 0 43 42' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M42.5 28.945L21.148 8.297.5 29.639l4.04 3.638 16.608-17.166 17.59 17.01 3.762-4.176z' fill='%233C76CE'/%3E%3C/svg%3E")center/cover;transform: rotate(180deg);} .fSitemap__ct{gap:0;position:absolute;width:100%;pointer-events: none;overflow: hidden;opacity: 0;transition: 0.3s all;left: 0;top: 100%;transform: translateY(-1rem);height: 0;} .fSitemap__ct__link{width:100%;padding: 0.75rem 0;border-bottom: 1px solid rgba(0,0,0,0.15);} .isDrop .fSitemap__ct{opacity:1;height:auto;position: relative;transform: translateY(0);pointer-events: all;/* margin-bottom: 1rem; */overflow: unset;} .isDrop .fSitemap__ct:after{content:'';position:absolute;width:calc(100% + 2rem);height:100%;background:#fff;left: -1rem;top:0;z-index:-1;} .isDrop .fSitemap__tt:after{transform:rotate(0deg);} .fixGoTop #goTop{position: fixed;bottom: 0;top: unset;right: 0;border-radius: 100% 100% 0 0;} .fTopWrap{padding: 1rem 0 2rem;} .fBtmWrap{padding:1rem;padding-bottom:2rem} .briefTxt br{display: none;} /*!768首頁*/ .soluBox--slick{width: calc(100% - 6rem);margin: auto;} /* 圖文&編輯器 */ .img-left,.img-right{flex-direction: column;gap: 0;} .img-left figure,.img-right figure{width:100%} .img-left.tx01 figure + .text,.img-right.tx01 figure + .text{width:100%;padding:1rem 0 0 0} } @media screen and (max-width:640px){ /*!640 首頁slogan*/ .sloganBtmWrap:after{border-radius: 4rem 0 0 2rem;width: calc(100% - 1rem);} .formGroup__item--half{width:100%;} .btnStyle--big{width:10rem;} .stakeHBox__item__envolope{--pdX:0} .formGroup__item--recaptcha{/* align-items: flex-start; */} .g-recaptcha{overflow-x: auto;width: clamp(12.5rem,60vw,20rem);overflow-y: hidden;} } @media screen and (max-width:480px){ .soluBox--slick{width: 100%;} .fBtm{text-align:center;justify-content: center;flex-direction: column-reverse;} .copyright{justify-content: center;} .cover.--recruitCv{padding:0.5rem} .cover.--recruitCv .cover__pic{border-width:0.5rem;} .recruitBn__txt{width:100%;height: 80vh;} main:has(.recruFixed.--show) + footer #goTop{bottom: 4rem;} .recruFixed.--show{padding:0;margin-right: -1px;} .recruFixed__item .bi{display:none;} .recruLnItem__item__tt{width:calc(100% - var(--iconW) - 1rem)} .recruLnItem__item__icon{margin-bottom: calc(var(--iconW) * -0.375);} .recruBnfList{flex-direction:column;} .recruClassWrap{gap:3rem;} .cover.--mileG{flex-direction:column;} .cover.--mileG a{max-height:unset;aspect-ratio: unset;} .cover.--mileG .cover__pic{width:100%;} } @media screen and (min-width:1000px){ .recruitBnWrap{height:180dvh} .recruitBn{height:auto;} .recruitBn__txt:has(.h2Wrap__tt.isHide:not(.--en)){max-height: 65dvh;} }