@charset "utf-8";

/* CSS Document */
body{font-family:'微軟正黑體',sans-serif;font-size:16px;line-height:1.5;color:#333;padding-top: 83px;}
.en{font-family:'DM Serif Display',sans-serif;}
a{color:#000;text-decoration:none;-o-transition:all .3s linear;-webkit-transition:all .3s linear;-moz-transition:all .3s linear;transition:all .3s linear}
a:hover{color:#777;}
*{ backface-visibility: hidden;-webkit-backface-visibility: hidden;-moz-backface-visibility: hidden;-ms-backface-visibility: hidden;}
/*---------------------- 基礎設定 ----------------------*/
/*反白設定
::selection { background: #666; color: #FFF; }
::-moz-selection { background: #666; color: #FFF; }
*/
.alertLine{border-color: #d40023;}
.red{color: #d40023;}
.txt--blue{color: var(--blue);}
/* 回頂端 */
#goTop{display:none;cursor:pointer;position:fixed;bottom:1rem;z-index: 3;right:1rem;width:50px;height:50px;line-height:50px;text-align:center;color:#ccc;background:#fff;border:solid 1px #ccc;border-radius:100%;box-shadow:rgba(0,0,0,.5) 0 0 5px}
#goTop:hover{background:#999;color:#FFF}

/*按鈕*/
.btnStyle{color:#fff;background: var(--blue);padding:10px 20px;display: inline-block;transition: all .5s;border: solid 1px var(--blue);}
.btnStyle:hover{color:var(--blue);background: #fff;}
@media screen and (max-width: 640px) {
#goTop{width:100%;left:0;right:0;bottom:0;border-radius:0;border:0;border-top:1px solid #eee}
}

/*RWD編輯器表格(X捲軸)*/
.tableContainer table td{min-width:100px;padding:5px;border:1px solid #ccc;white-space:inherit}
@media screen and (max-width: 768px) {
.tableContainer{width:100%;overflow-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*/
/*---------------------- 頁面開始 ----------------------*/

/*全頁佈局*/
ul,p,h1,h2,h3,h4,h5,figure{margin-bottom:0;}
.wrapper { padding:2rem 0;}
.blockHeight{padding-top: 6rem;position: relative;z-index: 1;}
.blockHeight:last-child{padding-bottom: 6rem;}
:root{
	--blue:#1D2088;
	--lightblue:#004EA2;
}

.mark--bg {position: relative; background: linear-gradient(transparent 60%, rgb(29 32 136 / 15%) 60%);  padding: 0 0.2rem;font-style: italic;font-weight: 600;}

/*麵包屑*/
.breadCrumbs-block{margin-bottom: 12px;}
.breadCrumbs-block .breadCrumbs{list-style:  none;margin:  0;padding:  0;}
.breadCrumbs-block .breadCrumbs .item{display: inline-block;padding: 0 7px 0 0;font-size: 14px;}
.breadCrumbs-block .breadCrumbs .item:after{content: '/';display: inline-block;color:#999}
.breadCrumbs-block .breadCrumbs .item a{display: inline-block;padding: 0 7px 0 0;color:#999;}
.breadCrumbs-block .breadCrumbs .item.active:after{display:none}
.breadCrumbs-block .breadCrumbs .item.active a{padding-right:0;color: #4a4948;}

/*按鈕*/

/*主選單*/
header{background: #fff;box-shadow: 0px 0px 12px rgb(0 0 0 / 15%);}
.navbar-expand-lg .navbar-nav .nav-link{font-size:1.1rem;color:#000; padding: .5rem .75rem;;transition: all .5s;border-radius: 100rem;}
.navbar-expand-lg .navbar-nav .nav-item{margin:0px 10px;}
.nav-item--lang{display: flex;justify-content: center; gap: 0.5rem;}
.navbar-expand-lg .navbar-nav .nav-link--lang{display: flex; justify-content: center; align-items: center; border-radius: 100rem; border: 1px solid var(--blue);padding: 0; width: 2.5rem; aspect-ratio: 1;font-size: 1rem;}


.navContainer{margin-left: auto;padding-left: 0;}
.logo{margin-left: 40px;}
.logo img{width: 350px;}
.navbar-expand-lg .navbar-nav .nav-link:hover,  .navbar-nav .nav-link.active{background:#1D2088;color:#fff;}
/* 標題 */
.mainTitleBig{font-size: 2.3rem;color:var(--blue);font-weight: 700;margin-bottom: 25px;letter-spacing: 2px;   text-align: center;}
.mainTitleSm{font-size: 1.4rem;font-weight:600;letter-spacing:6px;line-height:1.4;text-align: justify;}
/*標題--副標*/
.innerTitle{font-size: 1.5rem;font-weight: bold;letter-spacing: 3px;line-height: 1.4;}
.innerTxt{font-size: 1.25rem;letter-spacing:3px;line-height:1.4;/* margin-bottom: 100px; */text-align: justify;}
.fontWeight{font-weight: 600;}
.innerTxt .infoList{font-size:1rem;}
.innerTxt .infoList li{width:100%}
/*banner*/
.banner.slick-dotted.slick-slider{margin-bottom:0;}
.banner__box{position:relative}
.bannerTitle{margin:0;position:absolute;left:50%;top: 60%;transform: translate(-50%,-50%);color:#fff;width: 100%;text-align: center;}
.bannerBig,.bannerSm{font-size: clamp(2rem,5vw,4rem);}
.bannerBig{transition: all 1s;font-weight:bold;text-shadow:0px 0px 5px #000;letter-spacing: 6px;position: relative;z-index: 1;transform: translateY(-1em);}
.bannerSm{-webkit-text-stroke-width: 1px;-webkit-text-stroke-color: #ffffff;color: rgb(255 255 255 / 50%);transform: translateY(0px);transition: all 1s;}
.banner .slick-dots{bottom:30px;}
.banner__box.slick-active .bannerBig{transform: translateY(0px);}
.banner__box.slick-active .bannerSm{transform: translateY(-1.8em);}
/*首頁*/
.ixBg{background: url(../images/index/dots.png)no-repeat top fixed;position: relative;}
.ixBg:before,.ixBg:after{content:'';position:absolute;left:0;top:0;width:100%;height: 35%;background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); /* FF3.6-15 */background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* Chrome10-25,Safari5.1-6 */background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=0 );}
.ixBg:after{top:inherit;bottom:0;background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.01) 1%, rgba(255,255,255,1) 99%, rgba(255,255,255,1) 100%); /* FF3.6-15 */background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,0.01) 1%,rgba(255,255,255,1) 99%,rgba(255,255,255,1) 100%); /* Chrome10-25,Safari5.1-6 */background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,0.01) 1%,rgba(255,255,255,1) 99%,rgba(255,255,255,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 );}
.aboutLeft{width: 55%;}
.aboutRight{width: 45%;margin-left:50px;text-align: right;}
.sinceTxt{font-size: 8rem;font-weight: 700;color: var(--blue);opacity: .1;line-height: .6;right: 0;position: absolute;top: 30px;}
.sinceTxt--ch{font-size: 5rem;}
.ixAboutZone{display:flex;align-items: center;position: relative;padding: 120px 0 60px 0;/* flex-wrap: wrap; */}
.ixAboutZone--en{align-items: start;}
.ixAboutZone:nth-child(even){flex-direction:row-reverse;}
.ixAboutZone:nth-child(even) .aboutRight{margin-left:0;margin-right:50px;}
.ixAboutZone:nth-child(even) .sinceTxt{left:0;right:inherit;}
.listDate{list-style:none;padding-left:0;}
.dateItem{/* font-size:1.25rem; */font-weight:bold;display: flex;align-items: center;}
.dateItem+.dateItem{margin-top: 10px;}
.dateItem .date{background:var(--blue);display:inline-block;color:#fff;width:120px;text-align: center;padding: 5px;border-radius: 30px;}
.dateItem .content{width:calc(100% - 120px);margin-left: 10px;display: inline-block;font-weight: 600;}

/* 快速區域 */
.ixQuickZone{display:flex;align-items: center;justify-content: center;text-align: center;gap: 7vw;}
.quickLink{margin: 0;position: relative;display: inline-block;}
.quickLink:not(:last-child):before{content:'';position:absolute;right: -3.5vw;top:0;width:1px;height:100%;background: #e6e6e6;}
.quickLink img{width: 125px;opacity:.5;transition: all .5s; max-width: 125px;}
.quickName{font-size: clamp(1rem,5vw,1.5rem);font-weight:bold;}
.arrowStyle{display:inline-block;position: relative;width: 30%;height: 2px;transform: translateX(0);background: var(--blue);transition: all .5s;}
.arrowStyle:before,.arrowStyle:after{content:'';position:absolute;width: 14px;height:2px;background:var(--blue);right: -2px;transition: all .5s;opacity: 0;}
.arrowStyle:before{transform:rotate(45deg);top: -5px;}
.arrowStyle:after{transform:rotate(-45deg);bottom: -5px;}
.quickLink:hover .arrowStyle{transform: translateX(25px);}
.quickLink:hover .arrowStyle:before,.quickLink:hover .arrowStyle:after{opacity:1;}
.quickLink:hover img{opacity:1;}
/*----------內頁管理-----------*/
/*banner*/
.pgBanner{padding:50px 0;background-position: right top;background-size: cover;}
.bannerName{font-weight:bold;color:var(--lightblue);letter-spacing: 3px;font-size: 2.25rem;}
.bannerName--en{letter-spacing: 2px;}
/*關於我們*/
.aboutBox{position:relative;}
.aboutPic{position:absolute;bottom: 0;left: 50px;}
.aboutBox--even .aboutPic{left:inherit;right:50px}
.aboutBg{background: url(../images/about/aboutBg.jpg)no-repeat center/cover;position: relative;overflow: hidden;}
.aboutBg:before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); /* FF3.6-15 */background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* Chrome10-25,Safari5.1-6 */background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=0 );}
.aboutBg:after{content:'';position:absolute;bottom:0;left:0;width:100%;height: 45%;background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 1%, rgba(255,255,255,1) 98%, rgba(255,255,255,1) 100%); /* FF3.6-15 */background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 1%,rgba(255,255,255,1) 98%,rgba(255,255,255,1) 100%); /* Chrome10-25,Safari5.1-6 */background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 1%,rgba(255,255,255,1) 98%,rgba(255,255,255,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 );}
.aboutZone+.aboutZone{margin-top:80px;}
.aboutZone--bg{background: url(../images/about/aboutMid.jpg)no-repeat center/cover fixed;padding: 100px 0;}
.yearHistory{grid-template-columns: repeat(5,1fr);display: grid;margin-top: 80px;align-items: start;position: relative;z-index: 1;}
.historyBox{text-align: center;cursor: pointer;position: relative;z-index: 1;padding-bottom: 250px;}
.historyBox:not(.active) .yearContent{opacity: 0;}
.historyBox .year p{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size: 2rem;font-weight: bold;color: var(--blue);}
.historyBox .circle{width: 150px;height: 150px;font-size: 2rem;font-weight: bold;color: var(--blue);margin: 0 auto;border: 1px solid;border-radius: 100%;line-height: 150px;transition: all .5s;position: relative;background: #fff;display: inline-block;}
.historyBox .circle:before{content:'';position:absolute;left: 5%;top: 5%;border: 1px dashed;height: 90%;width: 90%;border-radius: 100%;-webkit-animation: roate01 15s linear infinite;animation: roate01 15s linear infinite;-moz-animation: roate01 15s linear infinite;-o-animation: roate01 15s linear infinite;transition: all .5s;transform-origin: center;}
.historyBox .year{position:relative;display: inline-block;}
.historyBox:not(:last-child) .year:before{content:'';position:absolute;right: -65%;top: 50%;width: 0;height: 0;border-style: solid;border-width: 8px 0 8px 10px;border-color: transparent transparent transparent #1d2088;transform: translateY(-50%);z-index: 1;}
.historyBox:not(:last-child) .year:after{content:'';position:absolute;right: -50%;top: 50%;transform: translateY(-50%);width:100%;height:1px;border: .5px dashed var(--blue);z-index: -1;opacity: .3;}
.historyBox:hover .circle:before,.historyBox.active .circle:before{width: 130%;height: 130%;left: -15%;top: -15%;}
.historyBox:hover .circle,.historyBox.active .circle{background:var(--blue);}
.historyBox:hover .year p,.historyBox.active .year p{color:#fff;}
.about-sm{max-width: 800px;margin:0 auto;}
@keyframes roate01 {
  from {
    transform:rotate(0deg)
  }
  to {
    transform:rotate(360deg)
  }
}
.yearContent{padding-top:50px;padding-left: 25px;text-align:left;transition: all .5s;opacity: 1;position: absolute;left: 50%;width: 300px;}
.yearTit{font-size:1.25rem;font-weight:bold;position: relative;}
.yearContent:before{content:'';position:absolute;left: -7px;top: 50px;height:15px;width: 15px;background:var(--blue);border-radius: 100%;}
.yearContent:after{content:'';position:absolute;left: 0;top: -65px;width:1px;height: 125px;background:var(--blue)}
.yearContent--left .yearTit{}
.yearContent--left{left: inherit;right: 50%;}
.yearContent--left:before{left:inherit;right:-7px}
.yearContent--left:after{left:inherit;right:0}

/*產品與服務*/
.pdtBg02{    position: absolute;top: 16%;opacity: .5;}
.pdtBg02{display:block;}
.pdtBg02.mb{display:none;}
.productOuter{display:grid;grid-template-columns: repeat(4, 1fr);grid-template-rows: repeat(3, 1fr);grid-column-gap: 1em;grid-row-gap: 1em;margin-bottom: 100px;}
.product{position: relative;background: url(../images/pro/serviceBg.png) no-repeat bottom/cover;}
.product:before{content:'';position:absolute;top:0;left:0;width:100%;height: 52%;background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); /* FF3.6-15 */background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* Chrome10-25,Safari5.1-6 */background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=0 );z-index: -1;}
.serviceLeft .circle{position:relative;}
.arrowZone img{max-width:80px;}
.arrowRT{top: 165px;position: absolute;right: 155px;}
.arrowRB{bottom: 190px;position: absolute;right: 155px;}
.arrowLT{top: 165px;position: absolute;left: 165px;}
.arrowLB{bottom: 190px;position: absolute;left: 165px;}
.serviceList{list-style:none;padding-left:0;position: relative;}
.serviceList__item{position: relative;width: 90%;margin-left: auto;}
.pic{width: 80px;height: 80px;background:var(--blue);line-height: 70px;text-align: center;border-radius: 100%;position: absolute;right: 15px;top: -30%;z-index: 1;border: 3px solid #fff;box-shadow: 0px 10px 10px rgb(0 0 0 / 20%);}
.pic img{max-width: 45px;}
.serviceList__item .content{background: #fff;padding: 20px 30px;border-radius: 30px 0px 30px 0px; /* Old browsers */ /* FF3.6-15 */ /* Chrome10-25,Safari5.1-6 */ /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */background: url(../images/pro/listBg.jpg)no-repeat bottom/cover;box-shadow: 0px 10px 10px rgb(0 0 0 / 20%);overflow: hidden;position: relative;border: 1px solid var(--blue);}
.serviceList__item .content .en{font-size: 11rem;position: absolute;left: -16px;bottom: 0;line-height: 1;font-style: italic;-webkit-text-stroke-width: 1px;-webkit-text-stroke-color: #1d2088;color: transparent;opacity: .5;}
.serviceList__item .content p {font-weight: 600;}
.contentTit{font-size:1.3rem;font-weight:bold;margin-bottom:20px;position: relative;}
.contentTit--en{font-family: 'DM Serif Display', sans-serif;letter-spacing: 2px;}
.contentTit:before{content:'';position:absolute;left:0;bottom: -10px;width: 40px;height:3px;background:var(--blue)}
.serviceList__item+.serviceList__item{margin-top: 4rem;}
/*品質與技術*/
.qualityPage__icon .container {max-width: 800px;}
.qualityPage{position: relative;background: url(../images/quality/qualityBg.jpg) no-repeat bottom/cover;}
.qualityPage::before{content: '';height: 200px;background: -webkit-linear-gradient(90deg, rgba(255, 255, 255,1), rgba(255, 255, 255,0));background: linear-gradient(90deg, rgba(255, 255, 255,1), rgba(255, 255, 255,0));}
.qualityPage__top {margin-bottom: 100px;}
.qualityPage .mainTitle{text-align: center;margin-bottom: 40px;}
.qualityPage .innerTitle{margin-bottom: 30px;font-size: 30px;}
.qualityPage .innerTxt{line-height: 30px;color: var(--lightblue);text-align: center;}
.philosophyList{display: flex;align-items: center;justify-content: center;gap: 2rem;margin: 40px 0;position: relative;}
.philosophyList::after{content: '';width: 100%;height: 1px;display: block;border: 1px dashed #0075c1;position: absolute;top: 50%;left: 50%;z-index: -1;transform: translateX(-50%);}
.philosophyList .philosophyItem{position: relative;right: 0;top: 0;bottom: 0;left: 0;margin: auto 40px;}
.philosophyList .philosophyItem::before{content: '';border: 1px dashed var(--lightblue);width: 50%;display: block;z-index: -1;position: absolute;left: 100%;}
.philosophyList .philosophyItem:last-child::before{display: none;}
.qualityPage__top{text-align: center;}
.sloganBox{/* margin: auto 20px; */position: relative;}
.sloganBox .slogan{font-size: 18px;}
.sloganBox {width: 220px;height: 220px;border-radius: 100%;transition: all .5s;position: relative;display: inline-block;background-color: #fff;box-shadow: 0px 0px 12px rgb(0 0 0 / 15%);}
.sloganBox:before{content:'';position:absolute;left: 5%;top: 5%;border: 1px dashed;height: 90%;width: 90%;border-radius: 100%;-webkit-animation: roate01 15s linear infinite;animation: roate01 15s linear infinite;-moz-animation: roate01 15s linear infinite;-o-animation: roate01 15s linear infinite;transition: all .5s;transform-origin: center;}
.sloganBox .circle{position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 100%;}
.sloganImg{max-width: 75px;margin: auto;}
.slogan{margin-top: 8px;font-weight: 600;}
.sloganBox .innerCircle,.sloganBox.service .innerCircle__left{width: 10px;height: 10px;border-radius: 100%;display: block;position: absolute;top: 50%;right:  5px;transform: translateY(-50%);}
.sloganBox.service .innerCircle__left{left: 5px;}
.sloganBox.quality::before{content: ''; border: 1px dashed #0075c1;color: #0075c1;} 
.sloganBox.quality .innerCircle{background-color: rgba(0,117,193,.6);}
.sloganBox.service::before{content: ''; border: 1px dashed #004ea2;color: #004ea2;}
.sloganBox.service .innerCircle__left{background-color: rgba(0,78,162,.6);}
.sloganBox.service .innerCircle{background-color: rgba(0,78,162,.6);}
.sloganBox.development::before{content: ''; border: 1px dashed #1d2088;color: #1d2088;}
.sloganBox.development .innerCircle{background-color: rgba(29,32,136,.6)}
.sloganBox.quality{border: 1px solid #0075c1;}
.sloganBox.service{border: 1px solid #004ea2;}
.sloganBox.development{border: 1px solid #1d2088;}
.sloganBox.quality .slogan{color: #0075c1;}
.sloganBox.service .slogan{color: #004ea2;}
.sloganBox.development .slogan{color: #1d2088;}
.qualityContent{
	display: flex;
	align-items: center;
	position: relative;
	margin-bottom: 80px;
	/* max-width: 500px; */
	--size:35vw;
	--iconSize:87px;
	--iconTxtBody:108px;
	--columnNum: 10;
	--rowNum: 10;
}

.qualityImg{position: relative;/* box-shadow: 0px 0px 0px 40px rgb(242 246 250); */border-radius: 50%;width: var(--size);height: var(--size);padding: 4vw;display: flex;align-items: center;justify-content: center;}
.qualityImg:before,.qualityImg::after{content: '';position: absolute;top: 50%;}
.qualityImg:before{z-index: -1;left: 50%;width: 90%;height: 90%;background: #f2f6fa;border-radius:100%;transform: translate(-50%,-50%);/* box-shadow: 0 0 0 1em #f2f6fa; */}
.qualityImg::after{right: 0;transform: translateY(-50%);width: 100%;height: 100%;border-radius: 50vw;border: 2px solid #1D2088;clip-path: polygon(50% 0%,100% 0%,100% 100%,50% 100%);}
.qualityImg img{border-radius: 50%;border: 5px solid #0175c1;box-shadow: 0px 0px 12px rgb(0 0 0 / 80%);/* width: 80%; */}
.qualityIcon{display: flex;align-items: center;max-width: 520px;width: 100%;transition: all .5s;}
.qualityIcon:last-child{margin-bottom: 0;}
.iconImg__box{border: 1px solid #1D2088;padding: 15px;border-radius: 50%;margin-right: 50px;position: relative;background-color: #fff;transition: all .5s;box-shadow: 0px 0px 12px rgb(0 0 0 / 15%);}
.iconImg__box::after{content: '';width: 40%;border: 1px dashed #1D2088;position: absolute;top: 50%;right:-40%;transform: translateY(-50%);display: block;}
.iconImg__box img{max-width: 55px; transition: all .5s;}
.qualityIcon__text{padding: .25em 1rem;box-shadow: 0px 0px 5px rgb(0 0 0 / 35%);position: relative;overflow: hidden;background-color: rgb(229 237 246 / 60%);width: 100%;transition: all .5s;}
.qualityIcon__text .title{font-size: 20px;font-weight: 600;color: #1d2088;}
.qualityIcon__text .en{letter-spacing: 2px;}
.qualityIcon__text .sub{position: absolute;color: rgba(0,78,162,.15);font-size: 32px;right: 5px;bottom:-10px;font-style: italic;}
.qualityIcon__txt{font-weight:bold;}
.qualityIcon{position: absolute;}
.qualityIcon__quality {left: calc(var(--size) / var(--columnNum) * 5);top: calc(var(--size) / var(--rowNum) * 0);transform: translateY(-50%);}
.qualityIcon__trust {left: 42%;left: calc(var(--size) / var(--columnNum) * 8);top: calc(var(--size) / var(--rowNum) * 1);}
.qualityIcon__efficiently{left: 47%;top: 28%;left: calc(var(--size) / var(--columnNum) * 9);top: calc(var(--size) / var(--rowNum) * 3);}
.qualityIcon__innovation {left: calc(var(--size) / var(--columnNum) * 9);bottom: calc(var(--size) / var(--rowNum) * 3);}
.qualityIcon__teamworkt {left: calc(var(--size) / var(--columnNum) * 8);bottom: calc(var(--size) / var(--rowNum) * 1);}
.qualityIcon__global {left: calc(var(--size) / var(--columnNum) * 5);bottom: calc(var(--size) / var(--rowNum) * 0);transform: translateY(50%);}
.qualityIcon:hover{/* max-width: 530px; */}
.qualityIcon:hover .iconImg__box{background-color: #e5edf6;}
.qualityIcon:hover .iconImg__box img{-webkit-animation: scale01 .5s linear;animation: scale01 .5s linear ;-moz-animation: scale01 .5s linear;-o-animation: scale01 .5s linear ;transition: all .5s;transform-origin: center;}
.qualityIcon:hover .qualityIcon__text{/* margin-left: 20px; */}
@keyframes scale01 {
	0% {
		transform: scale(1)
	}
	50% {
		transform: scale(0);
	}
	100% {
		transform: scale(1);
	}
}


/*人力*/
/* 人力-快速連結 */
.joinQuick__link{position: sticky;top: 80px;z-index: 2;background-color: #fff;padding: 20px 0;}
.joinQuick__list{display: flex;list-style: none;padding-left: 0;justify-content: space-between;max-width: 430px;margin: 0 auto;background: var(--blue);border-radius: 50px;overflow: hidden;border: 1px solid var(--blue);}
.joinQuick__list li{width:calc(100% / 3);text-align: center;padding: 10px 15px;border-left: 1px solid #fff;}
.joinQuick__list li:first-child{border-left:none;}
.joinQuick__list li.active{background:var(--blue)}
.joinQuick__list li.active a{color:#fff;}
.joinQuick__btn{display:inline-block;color: #fff;}
.joinQuick__btn i{margin-left: 10px;}
.tagBlock {display: block;position: relative;top: -160px;visibility: hidden;}
/* 人力-加入歐利得 */
.joinPage .join{padding-bottom: 0;position: relative;}
.joinBox{position: relative;}
.joinContent{display: flex;margin-bottom: 4rem;align-items: center;flex-wrap: wrap;}
.joinContent__left {width: 50%;position: relative;padding-right: 50px;}
.joinContent__img{width:50%}
.joinList__item {border-radius: 50%;position: absolute;max-width: 180px;max-height: 180px;width: 100%;height: 100%;display: flex;flex-direction: column;justify-content: center;align-items: center;font-size: 18px;color: var(--blue);font-weight: 600;}
.joinList__img::before{content: '';position: absolute;left: 0%;top: 0%;border: 1px dashed;height: 100%;width: 100%;border-radius: 100%;-webkit-animation: roate01 15s linear infinite;animation: roate01 15s linear infinite;-moz-animation: roate01 15s linear infinite;-o-animation: roate01 15s linear infinite;transition: all .5s;transform-origin: center;}
.joinList__item.quality{left: 50%;transform: translateX(-50%);background-color: rgba(0 ,117, 193, 0.1);}
.joinList__item.service{bottom: 0px;right: 19%;background-color: rgba(0 ,78, 162, 0.1);}
.joinList__item.development{bottom: 0px;left: 19%;background-color: rgba(29 ,32, 136, 0.1);}
.joinList__img{margin-bottom: 5px;}
.joinList img{max-width: 65px;}
.process{display: inline-block;width: 100%;}
.processTitle{font-size: 40px;color: var(--blue);font-weight: 600;text-align: center;}
.processImg {max-width: 800px;margin: 10px auto 20px;}
.joinBtn__box{justify-content: center;text-align: center;margin: 60px auto 0px;display: flex;width: 100%;gap: .25rem;}
.joinBtn__box .btnStyle{max-width: 240px;width: 100%;margin: auto 20px;vertical-align: middle;display: flex;align-items: center;text-align: center;justify-content: center;background: var(--lightblue);position: relative;-webkit-animation: scale02 1.5s linear infinite;animation: scale02 1.5s linear infinite;-moz-animation: scale02 1.5s linear infinite;-o-animation: scale02 1.5s linear infinite;transition: all .1s;transform-origin: center;font-size: 18px;}
.joinBtn__box i{margin-right: 10px;font-size: 20px;}
.joinBtn__box .btnStyle:hover{background-color: #fff;  border: 1px dashed;height: 100%;width: 100%;}
@keyframes scale02 {
	0% {
		transform: translateY(0px)
	}
	50% {
		transform: translateY(10px)
	}
	100% {
		transform:  translateY(0px);
	}
}
.contact{background: url(../images/join/contactBg.jpg)no-repeat center;height: 180px;background-size: cover;position: relative;z-index: 3;display: flex;align-items: center;text-align: center;}
.contact::before{content: '';background-color: rgba(255, 255, 255,0.8);width: 100%;height: 100%;position: absolute;top: 0;left: 0;z-index: -3;}
.contact::after{content: '';clip-path: polygon(50% 100%, 0 0, 100% 0);width: 40px;height: 20px;display: block;background-color: rgb(238 241 244);position: absolute;bottom: -19px;left: 50%;transform: translateX(-50%);}
.contactText .title{font-size: 30px;font-weight: 600;color: var(--blue);}
.extension{color: var(--lightblue);margin-left: 5px;letter-spacing: 0;}

.circle--bg{background:#434343;width: 12px;height: 12px;border-radius: 100%;display: inline-block;position: relative;}
/*人力-學習*/
.learn,.happiness{position: relative;padding: 6rem 0;background: #eee;margin-top: 6rem;}
.learnBox{display:flex;align-items: start;flex-wrap: wrap;}
.learnText{position: relative;z-index: 1;padding-right: 80px;width: 60%;text-align: center;}
.learnText .innerTxt{/* text-align:left; */}
.learnPic{position:relative;width: 40%;}
.learnContent{
	--size: 500px;
	--joinIconSize:165px;
	position: relative;
	display: inline-block;
	margin: auto;
	margin-top: 100px;
	}
.joinImg{position: relative;text-align: center;width: var(--size);height: var(--size);margin: 0 auto;display: flex;}
.joinImg img{max-width: 250px;margin: 0 auto;}
.joinImg::before{content: '';display: block;border: 1px dashed #1D2088;position: absolute;border-radius: 50%;width: 100%;height: 100%;animation: roate01 15s linear infinite;-moz-animation: roate01 15s linear infinite;-o-animation: roate01 15s linear infinite;transition: all .15s;transform-origin: center;box-shadow: 0px 0px 10px rgb(0 0 0 / 20%);}
.joinImg::after {content: '';width: 80%;height: 80%;display: block;background-color: rgb(255 255 255);border-radius: 50%;top: 50%;left: 50%;transform: translate(-50%,-50%) scale(.8);position: absolute;z-index: -1;box-shadow: 0px 0px 12px rgb(0 0 0 / 15%);}
.joinIcon{position: absolute;padding: .25rem 2px;background-color: rgb(247 247 247);box-shadow: 0px 0px 10px rgb(0 0 0 / 30%);border-radius: 50%;width: var(--joinIconSize);height: var(--joinIconSize);/* width: 100%; *//* height: auto; */align-items: center;display: flex;justify-content: center;overflow: hidden;text-align: center;border: 1px dashed #004ea2;transform: translateY(0px)}
.joinIcon::after{top: 50%;transform: translateY(-50%);}
.joinIcon img{max-width: 70px;margin-right: 20px;}
.joinIcon__title{color: var(--blue);}
.joinIcon__title .title{font-size: 1.25rem;font-weight: 600;display: flex;flex-direction: column;align-items: center;line-height: 26px;}
.joinIcon__title .title .num{font-style: italic;font-size: 26px;color: #004ea2;font-weight: 400;line-height: 26px;margin-bottom: 5px;}
.joinIcon__quality{top: -10%;left: 10%;}
.joinIcon__trust{top: 32%;left: -15%;}
.joinIcon__innovation{bottom: -5%;left: 10%;}
.joinIcon__efficiently{top: -10%;right: 10%;}
.joinIcon__teamworkt{top: 32%;right: -15%;}
.joinIcon__global{bottom: -5%;right: 10%;}
.joinIcon__text{letter-spacing: 1px;}
.joinIcon:hover{transition: all .5s;	transform:  translateY(-10px);}

.joinText .infoList li{padding:0;}
.learnBig{position:absolute;left: 5px;bottom: -75%;font-size: 6rem;font-weight: 700;color: var(--blue);opacity: .1;line-height: 1;}
/*人力-福利*/
.welfareText{max-width: 750px;margin: auto auto 50px;text-align: center;}
.welfareIntroduce{display: flex;display: grid;grid-template-columns: repeat(2, 1fr);gap: 2rem;margin-bottom: 2rem;}
.welfareSalary{background: url(../images/join/salary.png)no-repeat;}
.welfareFacilities{background: url(../images/join/facility.jpg)no-repeat;}
.welfareIntroduce__box{background-size: cover;min-height: 600px;position: relative;overflow: hidden;}
.welfareItem{background-color: rgba(0,0,0,0.8);padding: 20px;display: flex;flex-direction: column;justify-content: flex-end;transition: .3s cubic-bezier(.24,.74,.58,1);position: absolute;bottom: 0;width: 100%;border-top: 2px dashed #fff;transition: all .5s;}

.titleBox{display: flex;align-items: center;font-size: 24px;color: #fff;font-weight: 600;}
.titleIcon img{max-width: 60px;margin-right: 15px;}
.welfareList{list-style: none;padding-left: 0;display: grid;grid-template-columns: repeat(2, 1fr);grid-column-gap: 20px;grid-row-gap: 20px;margin: 10px 0px;transition: .3s cubic-bezier(.24,.74,.58,1);overflow: visible;}
.welfareList__li{background-color: rgb(229 237 246 / 90%);padding: 10px;font-size: 18px;display: flex;align-items: center;}
.welfareList__li span{-webkit-text-stroke-width: 1px;-webkit-text-stroke-color: var(--lightblue);color: rgb(255 255 255 / 50%);font-size: 30px;margin-right: 10px;font-style: italic;}
.welfareItem__arrow{background-color: #fff;color: var(--blue);max-width: 200px;text-align: center;display: inline-flex;align-items: center;justify-content: center;font-size: 18px;margin-top: 20px;padding: 10px;}

.happiness .title{text-align: center;color: var(--blue);font-size: 40px;font-weight: 600;margin-bottom: 40px;}
.happiness .slick-dotted.slick-slider {margin-bottom: 0px;}
.pdtLis__item {margin: auto 10px;}
.pdtLis .slick-prev,.pdtLis .slick-next,.pdtLis .slick-prev:focus,.pdtLis .slick-next:focus{z-index:10;width: 50px;height: 50px;background: var(--blue);color: #fff;}
.pdtLis .slick-prev{left:-20px;}
.pdtLis .slick-prev:before{content: "\f284";font-family: bootstrap-icons !important;}
.pdtLqualityIcon__textis .slick-prev.slick-disabled:before, .pdtLis .slick-next.slick-disabled:before{opacity: 1;}
.pdtLis .slick-next{right:-20px;}
.pdtLis .slick-next:before{content: "\f285";font-family: bootstrap-icons !important;}
.pdtLis .slick-prev:hover,.pdtLis .slick-next:hover{background:var(--lightblue)}

/* footer */
footer{/* background: #EFEFEF; */color: #434343;padding: 40px 0;text-align:center}
.infoList{margin-top: 30px;padding-left:0;list-style:none;display: flex;gap: 1rem; flex-wrap: wrap;justify-content: center;}
.infoList--en{justify-content: flex-start;}
.infoList--en a{font-weight: 600;}
.infoList li{display:inline-block;padding: 0px 20px;}
.infoList a{color: #434343;letter-spacing: 0;}
.infoList a:hover{color:var(--blue); text-decoration:none;}
.infoList a i{background:var(--lightblue);color:#fff;display: inline-block;width: 40px;height: 40px;line-height: 40px;border-radius: 100%;text-align: center;margin-right: 10px; aspect-ratio: 1;}
.infoList a i span{width:calc(100% - 50px)}
.infoList__link{display: flex;text-align: start; align-items: center;}
.copyright{background:var(--lightblue);color:#fff;text-align: center;padding: 10px 0;font-size: .9rem;}
.copyright a{color:#fff;}



/* 英文版 en */
/*header*/
.navbar-expand-lg .navbar-nav .nav-link--en{font-weight: 600;}
/*index*/
.mainTitleSm--en{font-size: 1.25rem; font-weight: 550; letter-spacing: 0; line-height: 1.8;}
.dateItem { margin-bottom: 1rem;}
/*about*/
.innerTxt--en { font-size: 1.2rem;letter-spacing: 0px; line-height: 1.8rem; font-weight: 600;}
.pic--en{right: 0.75rem;top: -15%;}
/*quality*/
.qualityPage .innerTxt--en {font-size: 1.25rem;letter-spacing: 0px;line-height: 1.8rem;font-weight: 600;}
.qualityIcon__txt--en {font-weight: 600; font-size: .9rem;line-height: 1.25;}
/*human resources*/
.joinQuick__list--en{ max-width: 85%; align-items: center;margin-top: 2rem;    font-weight: 600;}



/* ===  RWD  ===*/
@media screen and (max-width: 1480px) {
.arrowRT{top: 25%;position: absolute;right: 20%;}
.arrowRB{bottom: 25%;position: absolute;right: 20%;}
.arrowLT{top: 25%;position: absolute;left: 20%;}
.arrowLB{bottom: 25%;position: absolute;left: 20%;}

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

	/*關於我們*/
	.aboutBg .container{max-width:inherit;}

	/*品質與技術*/
	.qualityPage__icon{max-width:100%}
	.qualityContent{
		--size: 70vw;
		transform: translateX(-40vw);
	}
	.pdtBg02{top: 26%;}
	.qualityImg{}
	.qualityImg::after{content: '';max-width: 350px;border-radius: 0 450px 450px 0;max-height: 700px;width: 100%;height: 100%;border: 2px solid #1D2088;position: absolute;top: 50%;right: 0;transform: translateY(-50%);border-left: 0px;}
	/*關於我們*/
	.aboutPic{width: 45%;}
	.learnBig{font-size:4rem}
	.learnContent {--size: 400px; --joinIconSize: 140px}

	/* 英文版 en */
	/*header*/
	.navbar-expand-lg .navbar-nav .nav-link--en { font-size: .9rem;text-wrap: nowrap;}
	.navbar-expand-lg .navbar-nav .nav-item--en a{font-weight: 600;}
	.navbar-expand-lg .navbar-nav .nav-item--en {margin: 0rem;}
}

@media screen and (max-width: 991px) {
	body{padding-top: 55px;}

	/*全頁佈局*/
	.blockHeight{padding-top: 2rem;}
	.blockHeight:last-child{padding-bottom: 2rem;}
	
	/*主選單*/
	.navbar{display:flex;/* flex-direction: row; */flex-wrap: nowrap;justify-content: space-between;padding: 0;}
	.logo{margin-left: .5rem;}
	.logo img{max-width: 80%;}
	.navContainer{width: auto;margin-left:auto;margin-right: 0;padding: 0;}
	.navbar-toggler{padding: 1rem;background:#0075c1;color:#fff;border-radius: 0;}
	.navbar-collapse{position:absolute;left:0;right:0;top:100%;padding: 1rem;background: rgb(255 255 255 / 80%);backdrop-filter: blur(1rem);box-shadow: 0 .25rem .5rem rgba(0,0,0,.25);}
	.navbar-expand-lg .navbar-nav .nav-link{padding:.5rem;text-align:center;font-weight: 700;}
	.navbar-expand-lg .navbar-nav .nav-link--lang {margin-top: 1.5rem;}


	/* 	標題 */
	.mainTitleBig{font-size:2rem ; }
	.mainTitleSm{font-size:1.25rem}
	
	/*標題--副標*/
	.innerTitle{font-size: 1.25rem;}
	.innerTxt{font-size: 1rem;}

	/*banner*/
	.bannerName{font-size:1.75rem}
	
	/* 	首頁 */
	.ixAboutZone{padding-top: 9vw;flex-wrap: wrap;flex-direction: column-reverse;}
	.ixAboutZone:nth-child(even){flex-direction:column-reverse;padding-top: 5vw;}
	.aboutRight{margin:0}
	.sinceTxt{line-height:1;font-size: 12vw;/* opacity: .05; */position: relative;top: 0;}
	.aboutLeft{width: 100%;}
	.aboutRight{width: 100%;text-align: center;margin-bottom: 1rem;}
	/*關於我們*/
	.aboutZone{padding-bottom:1rem}
	.aboutZone--bg {padding: 4rem 0;}
	.aboutZone .innerTxt{margin-bottom: 1rem;}
	.yearHistory{grid-template-columns: repeat(1,1fr);margin-top: 2rem; padding: 2rem;}
	.historyBox{display: flex;align-items: flex-start;padding-bottom:2rem;text-align: left;cursor: auto;}
	.historyBox .circle{width:15vw;height:15vw}
	.historyBox .year p{font-size:clamp(1.25rem,5vw,2rem)}
	.historyBox .year:before{content:'';position:absolute;right: -21%;top: 50%;width: 0;height: 0;border-style: solid;border-width: 8px 0 8px 10px;border-color: transparent transparent transparent #1d2088;transform: translateY(-50%);z-index: 1;}
	.historyBox .year:after{content:'';position:absolute;right: -50%;top: 50%;transform: translateY(-50%);width:100%;height:1px;border: .5px dashed var(--blue);z-index: -1;opacity: .3;}
	.yearContent,.yearContent--left{position: relative;left: inherit;right: inherit;width: auto;padding-left: 15vw;padding-top: 1rem;}
	.yearContent:before,.yearContent:after{}
	.yearContent:before,.yearContent--left:before{top: 7.5vw;left: 7.5vw;transform: translateY(-50%);margin-top: 3px;}
	.yearContent:after,.yearContent--left:after{display:none}
	.historyBox:not(.active) .yearContent{opacity: 1;}
	.historyBox:not(:last-child) .year:before{right: -45%;}
	.blockHeight.business{margin-top:0}
	.blockHeight.business .mainTitleBig{width:50%}
	.businessBox{padding: 45vw 0 35vw;margin-top: -8rem;}
	.businessImg{display:inline-block}
	.businessLogo{padding: 5vw;}
	.businessLogo img{width:10vw}
	.philosophyItem{width: 35vw;height: 35vw;}
	.philosophyItem.quality{left: 18vw;right: inherit;bottom: 75%;top: inherit;}
	.philosophyItem.service{top: 75%;bottom: inherit;left: 18vw;}
	.philosophyItem.development{left: inherit;right: 23vw;top: 30%;}
	.philosophyItem img{width:8vw}
	.philosophyItem p{font-size: clamp(1rem,4.25vw,20px);}

	/*產品與服務*/
	.productOuter{grid-template-columns: repeat(2, 1fr);grid-template-rows: inherit;}
	.product__img{grid-row:inherit;padding-top: 50%;}
	.product__img:nth-child(1){grid-column: span 1;grid-row: inherit;}
	.product__img:nth-child(2){grid-column: span 1;grid-row: inherit;}
	.product__img:nth-child(3){grid-column: span 1;grid-row: inherit;}
	.product__img:nth-child(4){grid-column: span 1;grid-row: inherit;}
	.product__img:nth-child(5){grid-column: span 2;grid-row: inherit;}
	.proImg__text{padding: 0 .5rem;letter-spacing: .1em;}
	.product:after{height: 100%;}
	.arrowZone img{/* max-width:60px; */}
	.arrowRT{top: 25%;position: absolute;right: 30%;width: 50px;}
	.arrowRB{bottom: 26%;position: absolute;right: 30%;width: 50px;}
	.arrowLT{top: 26%;position: absolute;left: 20%;width: 50px;}
	.arrowLB{bottom: 26%;position: absolute;left: 20%;width: 50px;}
	.serviceList__item{width:100%}
	.serviceRight{margin-top:50px;}
	
	/*品質與技術*/
	.philosophyList{width:100%;gap: calc(3.3vw - 1rem);justify-content: space-between;}
	.sloganBox {width: 30vw;height: 30vw;max-width: 200px;max-height: 200px;aspect-ratio: 1;}
	.sloganImg{max-width: 50px}
	.sloganBox .slogan{color: #fff!important;border-radius:3em;padding: 2px 4px;font-size: 1rem;margin-top: 0;}
	.sloganBox.service .slogan{background: #004ea2;}
	.sloganBox.quality .slogan {background: #0075c1;}
	.sloganBox.development .slogan {background: #1d2088;}
	.qualityPage__top{margin-bottom:0}
	.qualityPage .innerTxt{margin-bottom: 2rem;color:#000;font-weight:700;font-size: 18px;}
	.qualityPage__icon { max-width: 100%; padding-bottom: 4rem;}
	.qualityPage__icon { padding-bottom: 2rem;}

	/* 人力-加入歐利得 */
	.joinContent__left,.joinContent__img{width:100%;padding: 0;}
	.joinContent__left .innerTxt{margin-bottom:2rem}
	/*人力-學習*/
	.blockHeight.learn{margin-top:1rem;overflow: hidden;}
	.learnText,.learnPic{width:100%;padding:0}
	.learnBig{font-size: 7vw;left: 0;bottom: -17%;}
	.learnContent{--size: 465px;--joinIconSize: 145px;margin-top: 70px;margin-bottom: 70px;}
	.learnBig{position:relative;}
	/* 人力-快速連結 */
	.joinQuick__link{padding:0;top: 54px;}
	.joinQuick__link .container{padding:0}
	.joinQuick__list{border-radius:0}
	.joinQuick__btn i{display:none}
	.joinBtn__box .btnStyle{margin:0;padding: 1rem;}

	/*人力-福利*/
	.welfareIntroduce{grid-template-columns: repeat(1,1fr);}
	.welfareItem{position: static;}
	.welfareItem__arrow{display: none;}

	/* footer */
	.infoList{flex-direction: column;align-items: flex-start; width:60vw; align-items: flex-start; width: 50vw; margin: 30px auto;}

	/* 英文版 en */
	/*quality*/
	.sloganBox .slogan--en {background: #0075c1;width: 80%;margin: auto;border-radius: .75rem;margin-top: 1rem; font-size: .9rem;}

}

@media screen and (max-width:820px) {
	/* 	首頁 */
	.aboutRight{margin-bottom:30px;}
	.ixAboutZone,.ixAboutZone:nth-child(even){flex-wrap:wrap;flex-direction: column-reverse;}
	.aboutLeft,	.aboutRight{width: 100%;margin: 0 auto;}
	.ixAboutZone:nth-child(even) .aboutLeft{margin-left:0;}
	.ixAboutZone:nth-child(even) .aboutRight{margin-right:0;margin-bottom:30px;}
	.sinceTxt--ch{font-size: 4rem;}

	/* footer */
	footer{padding:30px 0}
	.infoList li{display:block;text-align:left;margin-bottom: .5rem;padding: 0;}
	.copyright{ padding: .5rem .5rem 4rem .5rem;}

	/*banner*/
	.pgBanner{padding:1rem 0}

	/*麵包屑*/
	.breadCrumbs-block{margin-bottom:.25rem}
	/*產品與服務*/
	.pdtBg02{top:2%;}
	.pdtBg02{display:none;}
	.pdtBg02.mb{display:block;}
	.serviceList:before{left:40px}
	/*品質與技術*/
	.qualityImg{display:none}
	.qualityContent{margin-bottom: 0;transform: inherit!important;}
	.qualityIcon{position: static;transform: inherit!important;margin-bottom: 1rem;}
	.welfareIntroduce__box{min-height: inherit;}
	/*關於我們*/
	.aboutPic{display:none;}

	/*人力-學習*/
	.learnContent{
	--size: 60vw;
	--joinIconSize: 20vw;
	margin-bottom: 2rem;
	margin-top: 2rem;
	}
	.learnBig{position:relative;}
	.joinImg img{width:20%}
	.joinIcon__title .title{font-size: 1rem;line-height: 1.25;}
	.learnText .innerTxt{margin-bottom:2rem}

	/* 英文版 */
	/*human resources*/
	.joinQuick__list--en{ max-width: 100%;}

}

@media screen and (max-width:640px) {
	.pic{top:-10%}
	.arrowZone img {max-width: 50px;}
	.arrowRT{top: 25%;position: absolute;right: 24%;width: 50px;}
	.arrowRB{bottom: 27%;position: absolute;right: 23%;width: 50px;}
	.arrowLT{top: 26%;position: absolute;left: 20%;width: 50px;}
	.arrowLB{bottom: 27%;position: absolute;left: 20%;width: 50px;}
    .joinIcon__title .title {font-size: .85rem;}
	/* footer */
	.infoList { width: 90%; gap: .5rem;}
}


@media screen and (max-width:480px){
	.philosophyList { gap: 2rem; flex-direction: column;}
	.sloganBox { width: 70vw; height: 70vw;}

	/* quality */
	.sloganBox .innerCircle{width: 10px;height: 10px;border-radius: 100%;display: block;position: absolute;top: 128%;right: 47%;transform: translateY(-50%);}
	.sloganBox.service .innerCircle__left{width: 10px;height: 10px;border-radius: 100%;display: block;position: absolute;top: -38%;right:  47%;transform: translateY(-50%);}
	.sloganBox .innerCircle--right {top: -28%;}
	.sloganBox.service .innerCircle__left {left: 48%;top: -28%;}
	.philosophyList::after {transform: translate(-50%) rotate(90deg);}

	/* human resources */
    .joinIcon__title .title { font-size: .75rem;}

}



@media screen and (min-width: 992px) {
	/*人力-福利*/
	.welfareItem{height: 30%;}
	.welfareIntroduce__box:hover .welfareItem{justify-content: flex-start;height: 100%;}
	.welfareIntroduce__box:hover .welfareList{opacity: 1;transform: scaleY(1);height: auto;margin: 20px 0px;    display: grid;}
	.welfareIntroduce__box:hover .welfareItem__arrow{background-color: var(--blue);color: #fff;margin-top: 0;}
	.welfareIntroduce__box:hover .welfareItem__arrow{display:none;}
	.welfareList{display: none;height:0;opacity: 0;transform: scaleY(0);}
}