@charset "utf-8";
:root{
    --mainColor:#0A5596;
    --subColor:#00A0E6;
    --gray:#DCDCDC;

}
.main--about2024 .container{max-width: 1680px;width: 90%;padding: 0;}
.main--about2024{
	--spacing-all: clamp(6rem,8vw,8rem);
	font-size: 20px;
	line-height: 1.5;
	font-weight: 400;
	letter-spacing:0;
	background: radial-gradient(100% 58.8% at 0% 100%, #0A5596 0%, rgba(0, 0, 0, 0) 100%), radial-gradient(100% 46.38% at 100% 41.74%, #0A5596 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(145deg, #0A5596 0%, #0A5596 15%, #000000 55%, #000000 100%);
	color: var(--gray);
	background-attachment: fixed;
}
.main--about2024 *,.main--about2024 *::before,.main--about2024 *::after{-webkit-transition:all 1s cubic-bezier(0.165,0.84,0.44,1);-moz-transition:all 1s cubic-bezier(0.165,0.84,0.44,1);-o-transition:all .3s cubic-bezier(0.165,0.84,0.44,1);-ms-transition:all 1s cubic-bezier(0.165,0.84,0.44,1);transition:all 1s cubic-bezier(0.165,0.84,0.44,1)}
.main--about2024 a{-webkit-transition:all .3s cubic-bezier(0.165,0.84,0.44,1);-moz-transition:all .3s cubic-bezier(0.165,0.84,0.44,1);-o-transition:all .3s cubic-bezier(0.165,0.84,0.44,1);-ms-transition:all .3s cubic-bezier(0.165,0.84,0.44,1);transition:all .3s cubic-bezier(0.165,0.84,0.44,1)}
hr{background: var(--gray);}

/* KV區 */
.aboutKV{--chip-height:100vh;--chip-width:100vw;position:relative;width:100%;height:275vh;min-height:2000px}
.aboutKV__container{position:sticky;top:0;width:100%;height:100vh}
.aboutKVArticle{position:absolute;z-index:2;left:0;bottom:0;width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:8rem 0;text-align:center}
.aboutKVArticle .focus{font-weight:700}
.aboutMaskContainer{position:relative;width:100%;height:100%;overflow:hidden}
.aboutKVBg{width:100%;height:100%;background:url(kv_bgec2e.png?20240807)no-repeat center/cover}
.maskText{position:absolute;z-index:3;top:50%;left:50%;overflow:initial;width:var(--chip-width);transform:translate(-50%,-50%);opacity:0}

/* 共用 */
.aboutBlock{position: relative;z-index: 5;padding-top: var(--spacing-all);padding-bottom: var(--spacing-all);}
.aboutBlock__flexGap{display: flex;flex-direction: column;gap: var(--spacing-all);margin: auto;}
.aboutTitle{margin-bottom: 2rem;font-size: 2.25rem;font-weight: 600;line-height: 1.2;}
.aboutTitle--big{font-size:3rem}
.aboutSubTitle{font-size: 1.4rem;line-height:1.2;margin-bottom:1rem}
.summary{max-width: 1200px;margin: 0  auto;}
.btnStyle{position:relative;z-index: 1;display:inline-block;min-width: 150px;padding: 1rem;background: var(--mainColor);color:#fff;font-size: 1rem;font-weight: 300;box-shadow: 0 0 3rem rgb(0 22 41);}
.btnStyle::before,.btnStyle::after{}
/* .btnStyle::before{z-index:-2} */
.btnStyle::after{content:'';position:absolute;z-index: -1;top:0;right: 0;width: 0;height:100%;background: var(--subColor);}
.btnStyle:hover{color:#fff;box-shadow: 0 0 3rem rgb(105 185 255);}
.btnStyle:hover::after{left: 0;width:100%}

/* whatExcellence */
.aboutBlock--what{text-align: center;}
.aboutWhat{list-style-type: none;margin: 0 0 0;padding: 0;display: grid;grid-template-columns: repeat(3,1fr);gap:2rem;counter-reset: num;}
.aboutWhat__box{
    --bgColor:#fff;
    --txtColor:var(--mainColor);
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 2fr 3fr;
    min-height: 22vw;
    overflow: hidden;
}
.aboutWhat__box:nth-child(even){--bgColor:var(--mainColor);--txtColor:var(--gray);}
.aboutWhat__box__img{position: absolute;z-index: -1;left: 0;top: 0;width:100%;height:100%;}
.aboutWhat__box__img img{width: 100%;height: 100%;object-fit: cover;}
.aboutWhat__box__txt{padding: 2rem 1rem 2rem;background: var(--bgColor);color:var(--txtColor);text-align: left;line-height: 1.4;font-weight: 500;font-size: 1.15rem;display: flex;flex-direction: column;justify-content: flex-start;}
.aboutWhat__box__txt::before{counter-increment: num;content: counter(num);font-size: clamp(2rem,5vw,5rem);font-weight: 700;}
.aboutWhat__box__txt p{margin:0}

/* 據點map */
.aboutBlock--map{text-align: center;}
.aboutMap{position: relative;padding: 0 1rem;}
.aboutMap img{max-width: 100%;}
.aboutMap__blue,.aboutMap__green{position: absolute;left: 0;top: 0;width: 100%;height: 100%;}
.aboutMap__blue{/* z-index:1; */filter: drop-shadow(0 0 .25rem #78d6ff) drop-shadow(0 0 1px #78d6ff) drop-shadow(0 0 1px #78d6ff);}
.aboutMap__green{z-index: 1;filter: drop-shadow(0 0 .25rem #87ffe5) drop-shadow(0 0 1px #87ffe5) drop-shadow(0 0 1px #87ffe5);}
.aboutMap__twDot{z-index: 3;position: absolute;left: 39%;top: 50%;transform: translate(-50%,-50%);width: 0;height: 0;background: var(--subColor);box-shadow: 0 0 .5rem #000000, 0 0 .75rem #7fd4ff;border-radius: 100%;border: solid 2px #b9e8ff;opacity:0;transition-delay: 1000ms;}
.aboutMap__twDot::before,.aboutMap__twDot::after{content: '';position: absolute;left: 50%;bottom: 100%;margin-bottom: -2rem;}
.aboutMap__twDot::before{transform: translate(-50%,-1rem) rotate(45deg);width: 4rem;height: 4rem;background: var(--subColor);border-radius: 4rem 4rem 0 4rem;box-shadow: 0 0 1.5rem #2398ff, 0 0 0.75rem #7fd4ff;border: solid 2px #b9e8ff;}
.aboutMap__twDot::after{transform: translate(-50%,-2rem);width: 3.25rem;height: 3.25rem;background: url('small-logo.png')no-repeat center/contain;}

.animated .aboutMap__twDot{opacity:1;width: 1rem;height: 1rem;transition-delay:1000ms;}
.animated .aboutMap__twDot::before{margin-bottom:0;transition-delay:1250ms;animation: jumpDot 5s linear 2s infinite alternate;animation-delay:0s}
.animated .aboutMap__twDot::after{margin-bottom:0;transition-delay:1250ms;animation: jumpDotLogo 5s linear 2s infinite alternate;animation-delay:0s}
/* @keyframes mapDot {
  0%   {box-shadow: 0 0 1rem #00c4ff, 0 0 2rem #dcf3ff;}
  100% {box-shadow: 0 0 .5rem #000000, 0 0 .75rem #7fd4ff;}
} */
@keyframes jumpDot {
  0%   {transform:translate(-50%,-2rem) rotate(45deg) scale(1.15)}
  100% {transform:translate(-50%,-1rem) rotate(45deg) scale(1)}
}
@keyframes jumpDotLogo {
  0%   {transform:translate(-50%,-2rem) scale(1.15)}
  100% {transform:translate(-50%,-1.5rem) scale(1)}
}
/* 共用--頁籤 */
.tabContent{display: none;}

/* 解決方案 */
.aboutBlock--solution{text-align: center;padding-bottom: 0;}
.solutionTab{}
.solutionTab__sort{display: grid;grid-template-columns: repeat(4, 1fr);gap: 2rem;list-style-type: none;margin-bottom: 4rem;padding: 0;}
.solutionSortLink{position: relative;display: flex;justify-content: center;align-items: flex-end;aspect-ratio: 1;padding: 1rem;/*background: var(--mainColor);*/-webkit-transition: all .3s cubic-bezier(0.165,0.84,0.44,1);-moz-transition:all .3s cubic-bezier(0.165,0.84,0.44,1);-o-transition:all .3s cubic-bezier(0.165,0.84,0.44,1);-ms-transition:all .3s cubic-bezier(0.165,0.84,0.44,1);transition:all .3s cubic-bezier(0.165,0.84,0.44,1);}
.solutionSortLink .sortIcon{position: absolute;left: 1rem;top: 1rem;width: clamp(2rem,5vw,4.5rem);}
.solutionSortLink .circle{width: 80%;aspect-ratio: 1;display: flex;align-items: center;justify-content: center;font-size: 1.5rem;font-weight: 700;line-height: 1.2;border-radius: 100%;background-size: 100%;background-position: center;text-shadow: 0 0 .5rem rgba(0,0,0,.5);color: #fff;}
/*.active .solutionSortLink{background: var(--subColor);transform: translateY(-26px);}*/
.active .solutionSortLink::after{content: '';position: absolute;top:100%;left:0;width: 100%;height: 26px;background: var(--gray);clip-path: polygon(0% 0%, 100% 0%, 100% 28%,54% 28%,50% 100%, 46% 28%,0% 28%);-webkit-transition: all .3s cubic-bezier(0.165,0.84,0.44,1);-moz-transition:all .3s cubic-bezier(0.165,0.84,0.44,1);-o-transition:all .3s cubic-bezier(0.165,0.84,0.44,1);-ms-transition:all .3s cubic-bezier(0.165,0.84,0.44,1);transition:all .3s cubic-bezier(0.165,0.84,0.44,1);}
.active .solutionSortLink .circle{width:100%;}

.solutionTab__body{}
.solutionTab__body .bottomLine::before{content:'';width: 0;height: 1px;/* flex: 1; */background:var(--gray)}
.solutionTab__body .bottomLine{position:relative;display: flex;align-items: center;justify-content: space-between;gap: 2rem;margin-top:var(--spacing-all)}
.solutionTab__body .bottomLine img{max-width:100%;margin-left:auto;opacity: 0;transition-delay: 500ms;}
.solutionTab__body .active .bottomLine::before{/* flex:1; */width: 100%;}
.solutionTab__body .active .bottomLine img{opacity: 1;}
.pdSortLis{display:flex;flex-wrap:wrap;align-items: flex-start;gap: 2rem;margin: auto;}
.pdSortLis img{max-width:100%;width:auto!important;margin:auto;/* opacity: .6; */}
.pdSortLis__item{position: relative;width: 190px;padding: 0;display: block;-webkit-transition:all 0s;-moz-transition:all 0s;-o-transition:all 0s;-ms-transition:all 0s;transition:all 0s;}
.pdSortLis__item__infoBox{padding-top: 1rem;margin-bottom:0;color:#fff;font-size:1rem;font-weight: 100;word-break: break-word;}
.pdSortLis__item__infoBox .more{right:0;bottom:0;text-transform:uppercase;font-style:italic;letter-spacing:.1rem;color: #fff;-ms-transform:translate(-15px,0);-webkit-transform:translate(-15px,0);transform:translate(-15px,0);}
.pdSortLis__item__picBox .picBox{background: #00a0e6;}

/* Our R&D */
.aboutBlock--RanD{}
.RanDArticle{display: flex;flex-wrap: wrap;}
.RanDArticle__left{width: 50%;padding-right: 2rem;}
.RanDArticle__right{width: 50%;}
.RanDArticle__right .slogan{margin-bottom: 2rem;padding-left: 2rem;font-size: 1.5rem;font-weight: 500;border-left:solid .5rem var(--gray);}
.RanDArticle__right--end{margin-left: auto;/* border-bottom:solid 1px var(--gray); *//* padding-bottom: var(--spacing-all); */}

.aboutRanD{display: grid;grid-template-columns: repeat(4,1fr);list-style-type: none;margin: 0;padding: 0;}
.aboutRanD__head{/* aspect-ratio: 1; */position: relative;z-index:1;background:var(--mainColor);display:flex;align-items: flex-end;padding: 2rem;}
.aboutRanD__head .icon{position:absolute;left: 2rem;top: 2rem;}
.aboutRanD__head .aboutRanDImg{position:absolute;left:0;top:0;width: 90%;height:100%;z-index:-1;border-radius: 0 100vw 100vw 0;overflow: hidden;}
.aboutRanD__head .aboutRanDImg img{width:100%;height:100%;object-fit:cover;}
.aboutRanD__head .aboutRanDTxt{font-size:.9rem}
.aboutRanD__head .aboutRanDTxt .title{font-size:2rem;font-weight:700}

.aboutRanD__box{
	--bgColor:var(--mainColor);
	--txtColor:var(--gray);
	position: relative;
	display: flex;
	padding-left: 1rem;
	background:var(--bgColor);
	color:var(--txtColor);
	align-items: flex-end;
}
.aboutRanD__box .aboutRanDImg{overflow:hidden;width: 90px;border-radius: 3em 3em 0 0;}
.aboutRanD__box .aboutRanDTxt{margin-bottom: auto;padding: 2rem 1rem 1rem;flex: 1;font-size: 1.1125rem;}
.aboutRanD__box .aboutRanDTxt .bi-quote{width: 3rem;height: 3rem;margin-bottom: 1rem;}

.aboutRanD__box:nth-child(even){
	--bgColor:var(--gray);
	--txtColor:#575757;
	align-items:flex-start;	
}
.aboutRanD__box:nth-child(even) .aboutRanDImg{border-radius:0 0 3em 3em;}
.aboutRanD__box:nth-child(even) .aboutRanDTxt{margin-top:auto;margin-bottom: 0;}
.aboutRanD__box:nth-child(even) .aboutRanDTxt .bi-quote{color:#000}

/* behind */
.aboutBlock--behind{padding-top:0;padding-bottom: 0;}

/* behindFeatures */
.aboutBlock--behindFeatures{padding-bottom: 0;overflow: hidden;}
.aboutBlock--behindFeatures .RanDArticle{align-items:center}
.behindFeatures{display:flex;justify-content:space-between;list-style-type:none;flex-wrap: wrap;gap: 2rem;margin: 4rem 0 0;padding:0}
.behindFeatures li{width:440px}
.behindFeatures .tt{font-size: 1.75rem;font-weight: 600;margin-bottom:1rem;}
.behindFeatures p{padding-left:2rem}
.AtoB{--boxH: 30vw;/* transform: skewX(-10deg); */min-height: var(--boxH);0margin: -5%;display: flex;flex-wrap: wrap;}
.AtoB__head{flex: 1;background: var(--mainColor);color:var(--gray);display: flex;align-items: center;justify-content: center;padding: 2rem 0;font-size: clamp(1.5rem,2vw,2rem);font-weight: 700;line-height: 1.2;transform: skewX(-10deg);}
.AtoB__head--left{padding-left: 5vw;margin-left: -5vw;}
.AtoB__head--right{padding-right: 5vw;margin-right: -5vw;}
.AtoB__head .box{transform: skewX(10deg)}
.AtoB__slider{width: 60%;transform: skewX(-10deg);}
.AtoB__slider__pic{overflow:hidden;display: flex!important;justify-content: center;/* transform: skewX(-10deg); */}
.AtoB__slider__pic img{transform: skewX(10deg) scale(1.25);width: 130%;height: var(--boxH);object-fit:cover;}

/* joinUs */
.aboutBlock--joinUs{padding-bottom: 10rem;text-align:center}
.joinLinkGroup{width: 100%;max-width: 1120px;display: grid;grid-template-columns: repeat(3,1fr);gap:2rem;margin:auto;}
.joinLink{position:relative;aspect-ratio: 1;display: flex;align-items: center;justify-content: center;}
.joinLink::before{content:'';position:absolute;z-index:-1;left:0;top:0;width:100%;height:100%;background:var(--subColor);opacity:0}
.joinLink .tt{margin-bottom:0;font-size: 1.3rem;font-weight: 700;line-height: 1.2; top: 100px; text-shadow: black 0.1em 0.1em 0.2em; position: relative;}
.joinLink:hover{color:var(--gray);transform:scale(.95);box-shadow:0 0 2rem rgba(0,0,0,0.3)}
.joinLink:hover::before{opacity:.5}


@media (max-width: 1600px) { 
    /* behindFeatures */
    .AtoB{grid-template-columns: 1fr 2fr 1fr;}
	.AtoB__head{font-size: 2.25rem;}
}

@media (max-width: 1280px) { 
	/* whatExcellence */
	.aboutWhat{gap:1rem;}
	
	/* 解決方案 */
	.solutionSortLink{padding:.5rem}
	.solutionSortLink .sortIcon{left:.5rem;top:.5rem}
	.solutionSortLink .circle{width: 100%;}

	/* Our R&D */
	.aboutRanD{grid-template-columns: repeat(2,1fr);}
	.aboutRanD__box{}
	.aboutRanD__box:last-child .aboutRanDImg{border-radius:3em;margin:2rem 0 1rem}
		
}

@media (max-width: 991px) { 
	.main--about2024{font-weight:300;font-size: 18px;}
	
	/* 共用 */
	.aboutTitle{font-size: 2rem;}
	.aboutSubTitle{font-size:1.25rem}
	
	/* KV區 */
    .aboutKVBg{background: url('kv_bg-mbec2e.png?20240807')no-repeat center/cover;}
	.aboutKVArticle{font-size:1rem;padding: 0 1rem;}
	
	/* whatExcellence */
	.aboutWhat{grid-template-columns: repeat(2,1fr);gap:2rem;}
	.aboutWhat__box__txt{font-weight: 400;font-size: 1rem;}

	/* Our R&D */
	.RanDArticle__left{width: 100%;padding-right: 0;}
	.RanDArticle__right{width: 100%;}

	/* 解決方案 */
	.solutionTab{display: grid;grid-template-columns: 100px 1fr;}
	.solutionTab__sort{grid-template-columns: repeat(1, 1fr);gap: 1rem;align-content: start;border-right: solid 1px #fff;}
	.solutionTab__body .bottomLine{display:none}
	.solutionSortLink{aspect-ratio:inherit;/* padding-top: 3rem; */flex-direction: column;align-items: flex-start;gap: 1rem;padding: 0 0 .5rem 0;}
	.solutionSortLink .sortIcon{position:static;}
	.solutionSortLink .circle{aspect-ratio:inherit;border-radius: 0;padding: 0;background: inherit!important;justify-content: flex-start;word-break: break-word;text-align:left;font-size: clamp(.85rem,3vw,1rem);}
	.active .solutionSortLink::after{
		right: -3px;
		left: inherit;
		height: 100%;
		width: 4px;
		top: 0;
		clip-path: inherit;
	}
	.pdSortLis{gap:1rem}
	.pdSortLis img{display:none}
	.pdSortLis__item{width: 100%;}
	.pdSortLis__item__infoBox{padding: 0;text-align:left;padding-left: 1rem;}
	
	
	/* behindFeatures */
	.AtoB{display: block;transform: inherit;}
	.AtoB__head{font-size: 1.75rem;text-align:center;transform: inherit;}
	.AtoB__head .box{transform: inherit}
    .AtoB__head--left{padding-left: 0;margin-left: 0;}
    .AtoB__head--right{padding-right:0;margin-right: 0;}
	.AtoB__slider{width: 100%;transform: inherit;}	
	.AtoB__slider__pic img{transform: inherit;}
}

@media (max-width: 768px) { 
	
	
	/* whatExcellence */
	.aboutWhat{grid-template-columns: repeat(1,1fr);}
	
	/* Our R&D */
	.aboutRanD__head{/* padding:4rem 2rem; */aspect-ratio: 1;}
	.aboutRanD{grid-template-columns: repeat(1,1fr);}
	.aboutRanD__box .aboutRanDImg{margin-top:1rem;height: 90%;}
	.aboutRanD__box .aboutRanDImg img{width: 100%;height: 100%;object-fit:cover}
	.aboutRanD__box:nth-child(even) .aboutRanDImg{margin-top:0;margin-bottom:1rem}
	.aboutRanD__box:last-child .aboutRanDImg{border-radius:0 0 3em 3em;margin-top:0}

}

@media (max-width: 640px) { 
	/* joinUs */
	.joinLinkGroup{grid-template-columns: repeat(2,1fr);}
	.joinLink .tt{ font-size: 1.15rem; position: relative; top: 0; bottom: 0;}
}

@media (max-width: 480px) { 

}

@media (max-width: 413px) { 

}
@media (min-width: 992px) { 
	/* 	解決方案 */
	/*.solutionSortLink:hover{background:var(--subColor);color:var(--gray);padding-bottom:2rem;}*/
	.solutionSortLink:hover .circle{/* width: 90%; */background-size:110%;}
	.active .solutionSortLink:hover{padding-bottom:1rem}
	
	.pdSortLis__item__picBox,.pdSortLis__item__picBox .picBox{position: relative;margin: 0;}
	.pdSortLis__item__picBox::before,.pdSortLis__item__picBox::after,.pdSortLis__item__picBox .picBox::before,.pdSortLis__item__picBox .picBox::after{content:'';position:absolute;z-index:1;background:#ffffff;-webkit-transition: all 1s ease-out;-moz-transition: all 1s ease-out;-o-transition: all 1s ease-out;-ms-transition: all 1s ease-out;transition: all 1s ease-out;box-shadow: 0 0 13px #ffc525;}
	.pdSortLis__item__picBox::before,
	.pdSortLis__item__picBox::after{top: 0;left: 0;}
	.pdSortLis__item__picBox .picBox::before,
	.pdSortLis__item__picBox .picBox::after{right: 0;bottom:0;}
	.pdSortLis__item__picBox::before,
	.pdSortLis__item__picBox .picBox::before{height:1px}
	.pdSortLis__item__picBox::after,
	.pdSortLis__item__picBox .picBox::after{width:1px}
	.pdSortLis__item__picBox::before{right:100%}
	.pdSortLis__item__picBox::after{bottom:100%}
	.pdSortLis__item__picBox .picBox::before{left:100%}
	.pdSortLis__item__picBox .picBox::after{top:100%}

	.pdSortLis__item:hover .pdSortLis__item__picBox::before{right: 0;}
	.pdSortLis__item:hover .pdSortLis__item__picBox::after{bottom: 0;}
	.pdSortLis__item:hover .pdSortLis__item__picBox .picBox::before{left:0}
	.pdSortLis__item:hover .pdSortLis__item__picBox .picBox::after{top:0}	
	
	

	
}