@charset "utf-8";


.circleedge {
	position:absolute;
	display:block;
	inset:100% 0 auto;
	width:100%;
	height:1.5em;
	transform-origin:center;
	overflow:hidden;
}
.circleedge svg {
	position:absolute;
	display:block;
	inset:-1px 0;
	width:100%;
	height:calc(100% + 2px);
	transform-origin:center;
}
.circleedge .black {
	fill:#00000000;
}
@media (min-width: 1000px) or (orientation: landscape) {
	.circleedge {
		position:absolute;
		display:block;
		inset:100% 0 auto;
		height:5vw;
		transform-origin:center;
	}
}

.outframe .slog {
	text-align:center;
	font-size:105%;
	padding-inline:1em;
}
.outframe .slog span {
	display:inline-block;
	line-height:1.2;
}
.outframe .slog b {
	display:inline-block;
	line-height:1.2;
	color:var(--subColor1);
	border-bottom:1px solid var(--subColor1);
	font-weight:normal;
	padding:0 .3em;
	margin:0 .3em;
}
@media (min-width: 640px) or (orientation: landscape) {
	.outframe .slog {
		font-size:130%;
		margin-bottom: 1em;
	}
}


.pagetop .outframe {

}
.pagetop .area1 {
	--posc:100%;
	position:relative;
	background-image:url(/img/pagetop02.jpg);
	background-size:273% auto;
	background-position:10% var(--posc);
	background-color:#e3e3e3;
	aspect-ratio:5/7;
}
.pagetop .area1.seeing {
	--posc:max(calc(var(--visible-pct) / 100 * 20%), 20%);
}
.pagetop .area1 .asplit {
	display:flex;
	justify-content:center;
	#background:linear-gradient(-45deg, #fcfcfc, transparent);
	#background:radial-gradient(circle at 50% 62%, #fcfcfc, transparent);
	flex-wrap:wrap;
	height:100%;
}
.pagetop .area1 .asplit:before {
	content:'';
	position:absolute;
	inset:0;
	z-index:1;
	display:block;
	background:radial-gradient(circle at 50% 52%, #fcfcfc, transparent 33%);
}
.pagetop :where(.area1 .asplit > li) {
	display:block;
	width:100%;
}
.pagetop .ptopcube {
	--size:25vw;
	--half:calc(var(--size) / 2);
	--perc:0;
	height:35%;
}
.pagetop .ptopcube .scene {
	position:absolute;
	perspective:50em;
	width:calc(var(--size) * 2);
	height:calc(var(--size) * 2);
	display: grid;
	place-items:center;
	inset:0;
	margin:18% auto auto auto;
	transition:opacity .3s cubic-bezier(.22,.61,.36,1);
	opacity:0;
}
.pagetop .seeing .ptopcube .scene {
	filter:blur(calc(.3px + 1.7px * (100 - var(--visible-pct)) / 100));
}
.pagetop .ptopcube .cube {
	list-style: none;
	margin: 0;
	padding: 0;
	position: relative;
	width:var(--size);
	height:var(--size);
	--perc:max(calc((100 - var(--visible-pct)) / 100), 0);
	transform-style: preserve-3d;
	transform:
	rotateX(calc(-27deg + 30deg * var(--perc)))
	rotateY(calc(-39deg + 4deg * var(--perc)))
	rotateZ(4deg);
	transition:transform .3s cubic-bezier(.22,.61,.36,1);
}
.pagetop .ptopcube .cube li {
	position:absolute;
	inset:0;
	display: grid;
	place-items: center;
	color: #fff;
	font:600 1em system-ui, -apple-system, "PingFang TC", "Microsoft JhengHei", sans-serif;
	backface-visibility:hidden;
}
.pagetop .ptopcube .cube li img {
	width:70%;
	height:auto;
}
.pagetop .ptopcube .cube li:nth-child(1){
	background:#ebe8e1;
	transform:translateZ(var(--half));
}
.pagetop .ptopcube .cube li:nth-child(2){
	background:#e3dcca;
	transform:rotateY(90deg) translateZ(var(--half));
}
.pagetop .ptopcube .cube li:nth-child(3){
	background:#fdfdfb;
	transform:rotateX(90deg) rotateZ(270deg) translateZ(var(--half));
}
.pagetop .ptopimg {
	position:relative;
	display:flex;
	justify-content:center;
	align-items:end;
	padding:0;
	z-index:2;
	height:25%;
}
#toppic01 {
	display:block;
	display:none;
	width:75%;
}
#toppic01 svg {
	width:50vw;
	max-width:100%;
	margin:auto;
	display:block;
}
#toppic01 :where(.stars, .innribbon) {
	display:none;
}
#toppic01 .rightthing {
	fill:#5f4b8b;
}
#toppic01 .whiteword {
	fill:#000;
}
#toppic02 {
	display:block;
	width:75%;
}
#toppic02 strong {
	white-space:nowrap;
	color:#5f4b8b;
	margin:0 auto;
	display:block;
	width:fit-content;
	font-size:7vw;
	font-weight:400;
	padding-top:.5em;
	#font-family:"", "DFKai-SB", "PingFang TC";
	padding-bottom:.5em;
}
#toppic02 small {
	margin:0 auto;
	font-size:4vw;
	display:block;
	width:fit-content;
	padding-bottom:2em;
}
.pagetop .ptopbutton {
	position:relative;
	z-index:1;
	display:flex;
	gap:.5em;
	flex-flow:column;
	justify-content:start;
	align-items:center;
	height:40%;
}
.pagetop .ptopbutton a {
	display:block;
	width:63vw;
	background-color:#888;
	color:#fff;
	border-radius:1.2em;
	line-height:2em;
	padding:.2em 2em .2em 1.5em;
	text-align:center;
	text-decoration:none;
}
.pagetop .ptopbutton a img {
	display:inline-block;
	height:2em;
	vertical-align:bottom;
	margin-right:.5em;
}
.pagetop .ptopbutton a:nth-child(1) {
	background-color:var(--subColor1);
}
.pagetop .ptopbutton a:nth-child(2) {
	background-color:var(--mainColor);
}
.pagetop .area2 .ctas {
	display:flex;
	#display:none;
	gap:1em;
	font-size:4vw;
	flex-flow:column;
	justify-content: center;
	align-items: center;
	margin-bottom:3rem;
}
.pagetop .area2 .ctas a {
	position:relative;
	display:block;
	border: 1px solid #4D4D4D;
	background: #FFF;
	text-decoration:none;
	color:#000;
	padding:1em;
	aspect-ratio:8/7;
	width:16em;
	text-align:left;
	transition:all 1s ease;
}
.pagetop .area2 .ctas .cta1 {
	transition-delay:.0s;
}
.pagetop .area2 .ctas .cta2 {
	transition-delay:.2s;
}
.pagetop .area2 .ctas .cta3 {
	transition-delay:.4s;
}
.pagetop .area2 .ctas a:not(.seed) {
	opacity:0;
}
.pagetop .area2 .ctas h3 {
	
}
.pagetop .area2 .ctas p {
	font-size:70%;
	width:75%;
	font-weight:300;
}
.pagetop .area2 .ctas a img {
	position:absolute;
	width:45%;
	inset:auto 0 3em auto;
}
.pagetop .area2 .ctas a div {
	position:absolute;
	inset:auto 1em 1em;
	border-radius:1.5em;
	background:#FA0;
	font-size:75%;
	line-height:1;
	padding:1em;
	text-align:center;
	box-shadow:0 .5em .5em #00000033;
	transition:all .2s linear;
}
.pagetop .area2 .ctas a:hover div {
	box-shadow:0 .5em .4em #00000088;
}
.pagetop .area2 .ctas .cta3 div {
	background:#5F4B8B;
	color:#fff;
}
@media (min-width: 640px) or (orientation: landscape) {
	.pagetop .area1.seeing {
		--posc:calc((100 - var(--visible-pct)) / 100 * 50%);
	}
	.pagetop .area1 {
		aspect-ratio:192 / 100;
		background-position:30% calc(50% - var(--posc));
		background-position:25% calc(15% - var(--posc));
		background-size: 155% auto;
	}
	.pagetop .area1 .asplit {
		background:none;
	}
	.pagetop .area1 .asplit > li {
		height:100%;
		width:50%;
	}
	.pagetop .area1 .asplit > .ptopimg {
		padding:0 1em 7vw 1em;
	}
	.pagetop .area1 .asplit:before {
		content:none;
	}
	.pagetop .ptopcube {
		--size:15vw;
	}
	.pagetop .ptopcube .scene {
		margin:auto auto auto calc(0% + var(--half));
	}
	#toppic01 {
		width:66%;
		margin:auto auto auto 0;
	}
	#toppic01 :where(.stars, .innribbon) {
		display:unset;
	}
	#toppic01 .whiteword {
		fill:#fff;
		filter:drop-shadow(0 .2em .2em #00000088);
	}
	#toppic02 {
		width:100%;
		margin-block:auto;
	}
	#toppic02 strong {
		font-size:min(200%, 4vw);
	}
	#toppic02 small {
		font-size:100%;
	}
	.pagetop .ptopimg {
		z-index:0;
	}
	.pagetop .area1 .asplit > .ptopbutton {
		position:absolute;
		flex-flow:row;
		justify-content:center;
		inset:50% 0 auto 50%;
		height:auto;
		white-space:nowrap;
		overflow:hidden;
	}
	.pagetop .ptopbutton a {
		width:fit-content;
		font-size:min(100%, 1.8vw);
	}
	.pagetop .ptopbutton a:hover {
		box-shadow:.2em .2em .2em #00000044;
	}
	.pagetop .area2 .ctas {
		font-size:16px;
		flex-flow:row;
		#margin-bottom:-3em;
	}
}
@media (min-width: 1000px) or (orientation: landscape) {
	.pagetop .area1 {
		aspect-ratio:192 / 86;
		background-position:top center;
		background-size:cover;
	}
	.pagetop .area1 .asplit {
		position:relative;
	}
	.pagetop .ptopcube {
		--size:9vw;
	}
	.pagetop .ptopcube .scene {
		margin:auto auto auto calc(10% + var(--half));
	}
	.pagetop .area1 .asplit > .ptopimg {
		padding:0 0 7vw 0;
	}
	#toppic01 {
		width:55%;
	}
	#toppic02 {
		margin-bottom:50%;
		margin-block:auto;
	}
	#toppic02 strong {
		font-size:min(3.5vw, 300%);
	}
	#toppic02 small {
		font-size:min(2vw, 150%);
	}
}
.pagetop .area2 {
	position:relative;
	#background-color:var(--mainColor);
	margin-top:-2.5em;
	--roundR:160vw;
	--round2:calc(12em + var(--roundR));
	#clip-path:circle(var(--roundR) at 50% var(--roundR));
	z-index:3;
}
.pagetop .area2 .circleedge {
	inset:auto 0 100%;
}
.pagetop .area2 .circleedge svg {
	transform:rotate(180deg);
}
.pagetop .area2 .circleedge .black {
	fill:var(--mainColor);
}
.pagetop .area2 .circleedge .white {
	fill:#faf7f2;
}
.pagetop .area2 .inbk {
	position:absolute;
	inset:0 0 -2px;
	background-color:#faf7f2;
	#clip-path:circle(var(--round2) at 50% var(--round2));
}
.pagetop .area2 .ainer {
	position:relative;
	width:100%;
	max-width:var(--maxW);
	text-align:center;
}
.pagetop .area2 .toppicset {
	display:inline-flex;
	justify-content:start;
	align-items:stretch;
	#flex-wrap:wrap;
	flex-direction:column;
	padding:2em 0 4em;
	font-size:4vw;
}
.pagetop .area2 .toppicset li {
	position:relative;
	display:block;
	width:20em;
	line-height:2;
}
.pagetop .area2 .toppicset li:first-child {
	padding-bottom:2em;
	margin-bottom:2em;
}
:where(.pagetop .area2 .toppicset) li:first-child:before,
:where(.pagetop .area2 .toppicset) li:first-child:after {
	content:'';
	display:block;
	width:calc(50% - 1.5em);
	border:1px solid var(--mainColor);
	transform-origin:right bottom;
	position:absolute;
}
.pagetop .area2 .toppicset li:before {
	border-style:solid solid none none;
	inset:100% 50% -1em calc(1px + 1.5em);
	transform:skewX(45deg);
}
.pagetop .area2 .toppicset li:after {
	border-style:solid none none solid;
	inset:100% calc(1px + 1.5em) -1em 50%;
	transform:skewX(-45deg);
}
.pagetop .area2 .toppicset b {
	display:inline-block;
}
.pagetop .area2 .toppicset p {
	display:inline;
	line-height:2;
	font-weight: 300;
}
.pagetop .area2 .toppicset p span {
	display:inline-block;
	height:2em;
	border:1px solid var(--subColor1);
	color:var(--subColor1);
	line-height:1;
	padding:.5em .7em;
	margin-inline:.7em;
	border-radius:1em;
}
.pagetop .area2 .toppicset :where(.nopic) {
	text-align:center;
	color:#888;
}
.pagetop .area2 .toppicset :where(.nopic.small) {
	font-size:110%;
}
.pagetop .area2 .toppicset :where(.nopic.big) {
	font-size:150%;
	color:var(--subColor1);
	font-weight:700;
}
.pagetop .area2 .toppicset :where(.nopic.eng) {
	font-size:80%;
	font-weight:700;

}
#toppic03 {
	position:relative;
	display:none;
	margin:auto;
}
@media (min-width: 640px) or (orientation: landscape) {
	.pagetop .area2 {
		--roundR:250vw;
		--round2:calc(40em + var(--roundR));
	}
	.pagetop .area2 .toppicset {
		font-size:1.5vw;
		width:35em;
	}
	.pagetop .area2 .toppicset .nopic {
		position:absolute;
	}
	.pagetop .area2 .toppicset li {
		width:auto;
	}
	.pagetop .area2 .toppicset p {
		display:inline-block;
	}
	.pagetop .area2 .toppicset .nopic {
		color:#faf7f2;
	}
	#toppic03 {
		display:block;
		width:66%;
	}
}
@media screen and (min-width:1400px) {
	.pagetop .area2 .toppicset {
		font-size:20px;
	}
}

h2.ribbon {
	#
}
@media (min-width: 640px) or (orientation: landscape) {
	h2.ribbon {
		font-size:170%;
	}
}
.ribbon {
	display:flex;
	justify-content:center;
	align-items:center;
	flex-direction:column;
	height:6em;
	font-weight:700;
}
.ribbon b {
    align-self:center;
	color:var(--mainColor);
	font-size:80%;
	padding:.5em 0;
}
.ribbon ol {
	position:relative;
	display:flex;
	justify-content:center;
	align-items:start;
    align-self:stretch;
    background-size:auto 100%;
	padding-bottom:1em;
	margin-bottom:2em;
}
.ribbon ol:before,
.ribbon ol:after {
	content:'';
	display:block;
	width:calc(30% - 1.5em);
	border:1px solid var(--mainColor);
	transform-origin:right bottom;
	position:absolute;
}
.ribbon ol:before {
	border-style:solid solid none none;
	inset:100% calc(50% - .5px) -1em auto;
	transform:skewX(45deg);
}
.ribbon ol:after {
	border-style:solid none none solid;
	inset:100% auto -1em calc(50% - .5px);
	transform:skewX(-45deg);
}
.ribbon li {
	display:block;
	color:var(--mainColor);
	line-height:1;
	font-size:6vw;
}
@media (min-width: 640px) or (orientation: landscape) {
	.ribbon b {
		font-size:inherit;
	}
	.ribbon ol:before,
	.ribbon ol:after {
		content:none;
	}
	.ribbon ol {
		background-image:url(/img/ribbon.svg);
		padding-top:.8em;
		height:2.8em;
	}
	.ribbon li {
		color:var(--mainFColor);
		letter-spacing:.2em;
		padding-left:.2em;
		font-size:inherit;
	}
}

.pagetop .ourMission {
	position:relative;
	#margin-bottom:-8%;
	--roundR:160vw;
	#clip-path:circle(var(--roundR) at 50% calc(var(--roundR) * -1 + 100%));
	background:#fff;
	z-index:1;
}
.pagetop .ourMission .circleedge .white {
	fill:#fff;

}

.ourMission .circleedge {
	z-index:1;
	display:none;
}
.ourMission .healthTable2 {
	#position:relative;
	display:block;
	padding-block:calc(3em + 15em * .5 * var(--sin));
	font-size:3.5vw;
	--skews:20deg;
	--sin:0.3420;/* sin20 */
	--graddeg:180deg;
	color:#fff;
}
.ourMission .last {
	text-align:center;
	font-weight:300;
	position:relative;
	color:var(--subColor1);
	font-size:130%;
}
.ourMission .last span {
	display:inline-block;
	line-height:1.4;
}
.ourMission .last span:not(:last-child):after {
	content:'，';
}
.ourMission .healthTable2 > li {
	position:relative;
	display:block;
	width:85%;
	#perspective:50em;
}
.ourMission .healthTable2 h3 {
	position:absolute;
	display:flex;
	align-items:center;
	writing-mode:vertical-rl;
	inset:0 0 0 auto;
	width:calc(20% / 2);
	padding-bottom:2em;
}
.ourMission .healthTable2 h3 b {
	position:sticky;
	top:calc(var(--fontsize) * 4);
	bottom:0;
	display:block;
	padding-inline:1em;
	z-index:1;
}
.ourMission .healthTable2 h3:before {
	content:'';
	position:absolute;
	display:block;
	inset:0;
	inset:-1.7vw 0 0;
	transform-origin:calc(-100% * 3.75 / 2 - 10%) 50%;
	transform:skewY(calc(var(--skews) * -1));
}
.ourMission .healthTable2 .ar1 h3:before {
	background-color:#b3b3b3;
}
.ourMission .healthTable2 .ar2 h3:before {
	background:linear-gradient(var(--graddeg),#ea5503,#f5a601);
}
.ourMission .healthTable2 .ar3 h3:before {
	background:linear-gradient(var(--graddeg),#f5a601,#f9be00);
}
.ourMission .healthTable2 .step {
	--actived:0;
	position:relative;
	padding:calc(15em * var(--sin) * .7) 0 calc(15em * var(--sin) * .3);
}
.ourMission .healthTable2 .step.ex {
	position:sticky;
	padding:0;
	bottom:20vh;
	display:none;
}
.ourMission .healthTable2 .step.ww {
	bottom:-4vh;
}
.ourMission .healthTable2 .step.slast {
	padding:0;
}
.ourMission .healthTable2 .step.slast :where(b, i) {
	height:calc(15em * .25 * var(--sin));
}
.ourMission .healthTable2 .step :where(b, i):before {
	transform:translateY(calc((1 - var(--actived)) * -5em));
	#opacity:var(--actived);
	filter:contrast(calc(var(--actived))) brightness(calc(2 - var(--actived)));
	transition:all .7s cubic-bezier(.22,.61,.36,1);
}
.ourMission .healthTable2 .step :where(h4, p) {
	transform:translateY(calc((1 - var(--actived)) * -5em));
	opacity:var(--actived);
	transition:all .3s .7s cubic-bezier(.22,.61,.36,1);
}
.ourMission .healthTable2 .step :where(b, i, a):before {
	content:'';
	display:block;
	position:absolute;
	inset:0;
}
.ourMission .healthTable2 .step.ex :where(b, i, a) {
	overflow:visible;
}
.ourMission .healthTable2 .step.ex :where(b, i, a):before {
	height:20em;
	#border:1px dashed #f00;
}
.ourMission .healthTable2 :where(.s2, .s5) ~ .ex :where(a):before {
	right:-17vw;
	left: 34vw;
}
.ourMission .healthTable2 .step.ww :where(i):before {
	right:-34vw;
}
.ourMission .healthTable2 .step.ex :where(b, i):after {
	content:none;
}
.ourMission .healthTable2 .step.ex :where(b, i, a):before {
	background:#444444;
}
.ourMission .healthTable2 .step.ww :where(b, i):before {
	background:#ffffff;
}
.ourMission .healthTable2 .step.s1 :where(b, i):before {
	background:#b3b3b3;
}
.ourMission .healthTable2 .step.s2 :where(b, i):before {
	background:#808080;
}
.ourMission .healthTable2 .step.s3 :where(b, i):before {
	background:linear-gradient(var(--graddeg),#ea5503,#ef8000);
}
.ourMission .healthTable2 .step.s4 :where(b, i):before {
	background:linear-gradient(var(--graddeg),#ef8000,#f5a601);
}
.ourMission .healthTable2 .step.s5 :where(b, i):before {
	background:linear-gradient(var(--graddeg),#f5a601,#f9be00);
}
.ourMission .healthTable2 :where(.step > *) {
	position:relative;
}
.ourMission .healthTable2 h4 {
	font-size:150%;
	text-shadow:2px 2px 1px #00000099;
	width:calc(10em * .8);
	border-bottom:1px solid #fff;
	#padding-bottom:calc(.5em / 1.5);
	z-index:1;
}
.ourMission .healthTable2 .slast h4 {
	width:auto;
}
.ourMission .healthTable2 h4 .flagg {
	position:relative;
	display:inline-block;
	height:1em;
	width:0;
	vertical-align:bottom;
}
.ourMission .healthTable2 h4 .flagg img {
	display:block;
	position:absolute;
	inset:auto auto 0 0;
	width:2em;
}
.ourMission .healthTable2 p {
	width:calc(15em * .8);
	line-height:1.4;
	min-height:calc(6em * 1.4);
	padding-top:.5em;
	z-index:1;
}
.ourMission .healthTable2 p span {
	#font-size:120%;
}
.ourMission .healthTable2 .slast p {
	width:calc(1.5em * .8);
}
.ourMission .healthTable2 p span {
	display:inline-block;
}
.ourMission .healthTable2 p span:not(:last-child):after {
	content:'、';
}
.ourMission .healthTable2 .step :where(h4, p) {
	margin-inline:auto;
	text-align:center;
}
.ourMission .healthTable2 .step :where(b, i, a) {
	position:absolute;
	display:block;
	inset: 0 auto -1px;
	width:30%;
	transform-origin:center;
	overflow:hidden;
}
.ourMission .healthTable2 .step.slast :where(b, i){
	top:1.5px;
}
.ourMission .healthTable2 .step :where(b, i):after {
	content:'';
	position:absolute;
	inset:0 0 auto;
	height:calc(15em * .25 * var(--sin));
	display:block;
	background:linear-gradient(180deg, #00000088, transparent);
}
.ourMission .healthTable2 .step.s1 :is(b, i):after {
	content:none;
}
.ourMission .healthTable2 .step :where(b) {
	right:50%;
	transform:skewY(calc(var(--skews) * 1));
}
.ourMission .healthTable2 .step :where(b):after {
	transform-origin:right;
	transform:skewY(calc(var(--skews) * .5));
}
.ourMission .healthTable2 .step :where(i, a) {
	left:50%;
	transform:skewY(calc(var(--skews) * -1));
}
.ourMission .healthTable2 .step :where(i, a):after {
	transform-origin:left;
	transform:skewY(calc(var(--skews) * -.5));
}

@media (min-width: 640px) or (orientation: landscape) {
	.ourMission {
		#height:500vh;
		--ptts:0;
		font-size:min(1.4vw, 2.5vh, var(--fontsize));
	}
	.ourMission .ainer {
		position:sticky;
		top:calc(var(--fontsize) * 4);
	}
	.ourMission .healthTable2 {
		display:flex;
		justify-content:center;
		padding-block:0 4em;
		--graddeg:90deg;
		font-size:inherit;
	}
	.ourMission .healthTable2 > li {
		display:flex;
		justify-content:center;
		width:fit-content;
	}
	.ourMission .healthTable2 .ar1 {
		#width:40%;
	}
	.ourMission .healthTable2 .ar2 {
		#width:60%;
	}
	.ourMission .healthTable2 .ar1 .step {
		#width:60%;
	}
	.ourMission .healthTable2 .step {
		position:relative;
		padding:1em;
		height:20em;
		width:13em;
	}
	.ourMission .healthTable2 .step.slast {
		width:0;
		padding:0;
	}
	.ourMission .healthTable2 .step :where(b, i):before {
		transform:translateX(calc((1 - var(--actived)) * -5em));
		transition-delay:calc(.3s * var(--pcdelay));
	}
	.ourMission .healthTable2 .step :where(h4, p) {
		transform:translateX(calc((1 - var(--actived)) * -5em));
		transition-delay:calc(.3s * var(--pcdelay) + .5s);
	}
	.ourMission .healthTable2 h3 {
		position:absolute;
		align-items:center;
		writing-mode:unset;
		inset:auto 0 50% 0;
		width:auto;
		#width:calc(20% / 2);
		transform:translateY(-4em);
		padding-bottom:0;
	}
	.ourMission .healthTable2 h3:before {
		transform-origin:center bottom;
		transform:skewX(calc(var(--skews) * 1));
		inset:0 1px 0 -1px;
	}
	.ourMission .healthTable2 h3 b {
		width:13em;
		text-align:center;
	}
	.ourMission .healthTable2 .ar1 h3 {
		justify-content:end;
	}
	.ourMission .healthTable2 .ar2 h3 {
		justify-content:center;
	}
	.ourMission .healthTable2 .ar3 h3 {
		justify-content:center;
	}
	.ourMission .healthTable2 .step :where(b, i) {
		top:0;
		bottom:0;
		left:0;
		right:0;
		overflow:hidden;
		width:auto;
	}
	.ourMission .healthTable2 .step.slast :where(b, i) {
		width:calc(15em * .25 * var(--sin));
		height:auto;
	}
	.ourMission .healthTable2 h4 {
		position:absolute;
		inset:0;
		height:1em;
		line-height:1;
		margin:auto;
		border:none;
	}
	.ourMission .healthTable2 .slast h4 {
		height:1em;
	}
	.ourMission .healthTable2 p {
		position:absolute;
		inset:50% 0 auto 0;
		padding:4em 1em 1em 0;
		color:#000;
	}
	.ourMission .healthTable2 .slast p {
		width:calc(1.5em * .8);
	}
	.ourMission .healthTable2 p span {
		font-size:90%;
	}
	.ourMission .healthTable2 :where(.step.ex, .step.ww) {
		display:none;
	}
	.ourMission .healthTable2 .step :where(a):before {
		content:none;
	}
	.ourMission .healthTable2 .step :where(b, i):before {
		height:3em;
	}
	.ourMission .healthTable2 .step :where(b):before {
		top:auto;
		bottom:-1px;
	}
	.ourMission .healthTable2 .step :where(i):before {
		top:-1px;
		bottom:auto;
	}
	.ourMission .healthTable2 .step :where(b, i):after {
		inset:0 auto 0 0;
		width:calc(15em * .25 * var(--sin));
		height:auto;
		background:linear-gradient(90deg, #00000088, transparent);
	}
	.ourMission .healthTable2 .s4.step :where(b):after {
		inset:calc(3.5em) auto 0 0;
	}
	.ourMission .healthTable2 :is(.step, .step.slast) b {
		top:calc(25% / 2);
		bottom:calc(50%);
		transform:skewX(calc(var(--skews) * 1));
	}
	.ourMission .healthTable2 .step :where(b):after {
		transform-origin:center bottom;
		transform:skewX(calc(var(--skews) * .5));
	}
	.ourMission .healthTable2 :is(.step, .step.slast) i {
		top:calc(50%);
		bottom:calc(25% / 2);
		transform:skewX(calc(var(--skews) * -1));
	}
	.ourMission .healthTable2 .step :where(i):after {
		transform-origin:center top;
		transform:skewX(calc(var(--skews) * -.5));
	}
	.ourMission .last {
		padding:0 0 2em;
		font-size:180%;
	}
}
@media (min-width: 1000px){
	.pagetop .ourMission .ainer {
		padding-bottom:calc(6em - 5vw);
	}
}
@media (min-width: 1200px){
	.ourMission .healthTable2 {
		font-size:inherit;
	}
	.ourMission .healthTable2 .float {
		#width:calc(100% - var(--maxLR));
	}
}


.pagetop .ourTarget {
	position:relative;
		display:none;
	padding:0 6vw calc(6vw + 2.5em);
}
.ourTarget .ainer {
}
.ourTarget .backpic {
	position:sticky;
	width:100vw;
	top:100vh;
	bottom:calc(100vh + 100vw);
}
.ourTarget .backpic:before {
	content:'';
	position:absolute;
	inset:auto 0 0;
	height:calc(100vh - 4 * var(--fontsize));
	background:url(/img/ourtarget1.jpg);
	background-size:cover;
}
.ourTarget .targetList {
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:center;
	gap:3em;
	padding-block:calc(6vw + 2.5em);
}
.ourTarget .targetList > li {
	position:sticky;
	display:block;
	bottom:2em;
	transform-origin:right bottom;
	z-index:var(--ord);
	transform:translate(calc(var(--ord) * .7em), calc(var(--ord) * -.5em));
}
.ourTarget .targetList .blankSE {
	display:block;
	height:10em;
}
.ourTarget .targetList .lifield {
	position:relative;
	padding:1.6em;
	border-radius:1.6em;
	width:15em;
	background-color:#fff;
	box-shadow:.1em .1em .13em #00000088;
	text-align:center;
	letter-spacing:-.05em;
}
.ourTarget .targetList .lifield:before {
	content:'';
	position:absolute;
	display:block;
	inset:.8em;
	border:1.5px solid var(--thismaincolor);
	border-radius:.8em;
}
.ourTarget .targetList .pic {
	width:4em;
	margin-inline:auto;
	padding-block:1.3em .7em;
}
.ourTarget .targetList h3 {
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:center;
	text-align:center;
	height:5em;
}
.ourTarget .targetList h3 i {
	font-style:normal;
	height:1em;
	width:5em;
	vertical-align:bottom;
	text-align:center;
	color:var(--thismaincolor);
}
.ourTarget .targetList h3 i:before {
	content:'';
	display:block;
	width:100%;
	height:.2em;
	background-color:var(--thismaincolor);
}
.ourTarget .targetList h3 i:empty {
	padding-block:.5em;
}
.ourTarget .targetList p {
	padding-block:2em;
}
@media (min-width: 640px) or (orientation: landscape) {
	.pagetop .ourTarget {
		padding:calc(6vw + 2.5em) 0 6vw;
		overflow:hidden;
	}
	.ourTarget .backpic {
		position:absolute;
		inset:0;
	}
	.ourTarget .ainer {
		font-size:min(100%, 1.8vw, 3.5vh);
	}
	.ourTarget .backpic:before {
		content:'';
		position:absolute;
		inset:0;
	}
	.ourTarget .targetList {
		display:flex;
		flex-direction:row;
		padding-block:0;
	}
	.ourTarget .targetList > li {
		position:relative;
		z-index:auto;
		transform:none;
		bottom:0;
	}
	.ourTarget .targetList > li,
	.ourTarget .targetList .pic img {
		transition:all .3s cubic-bezier(.22,.61,.36,1);
		transform-origin:center center;
	}
	.ourTarget .targetList > li:hover {
		transform:scale(1.1);
	}
	.ourTarget .targetList > li:hover .pic img {
		transform:scale(1.4);
	}
	.ourTarget .targetList .blankSE {
		display:none;
	}
}
@media (min-width: 1000px){
	.pagetop .ourTarget {
		padding-top:calc(6vw + 5vw);
	}
}

.pagetop .howHelp.outer {
	position:relative;
	margin-bottom:0;
	padding:0;
}
.pagetop .howHelp:has(.backs > li:nth-child(1) input[type='radio']:checked),
.howHelp .tabs li:nth-child(1) {
	--backtcolor:#ffaa00;
}
.pagetop .howHelp:has(.backs > li:nth-child(2) input[type='radio']:checked),
.howHelp .tabs li:nth-child(2) {
	--backtcolor:#5f4b8b;
}
.pagetop .howHelp:has(.backs > li:nth-child(3) input[type='radio']:checked),
.howHelp .tabs li:nth-child(3) {
	--backtcolor:#6da1d0;
}
.howHelp .ainer {
	padding:4em 0 0;
}
.howHelp .circleedge {
	margin-top:-1px;
	z-index:2;
}
.howHelp .circleedge .white {
	fill:#faf7f2;
}
.howHelp .slog {
	max-width:18em;
	margin:auto;
	font-size:100%;
}
.howHelp .defs {
	display:none;
}
.howHelp .services .backs > li {
	#position:absolute;
	position:relative;
}
.howHelp .services .dframe {
	position:relative;
}
.howHelp .services .sz {
	width:100%;
	max-width:1920px;
	aspect-ratio:320 / 460;
}
.howHelp .tabs {
	display:flex;
	justify-content:center;
	gap:.1em;
	padding-top:3em;
	padding-inline:.5em;
}
.howHelp .tabs li {
	display:block;
	width:10em;
	height:3em;
	background-color:#fff;
	box-shadow:.2em .2em .4em #00000044;
	overflow:hidden;
}
.howHelp :where(.tabs li:first-child) {
	border-radius:1em 0 0 0;
}
.howHelp :where(.tabs li:last-child) {
	border-radius:0 1em 0 0;
}
.howHelp .tabs li h3 {
	height:0;
	overflow:hidden;
	font-size:90%;
}
.howHelp .tabs label {
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:center;
	padding:.5em;
	height:100%;
	cursor:pointer;
}
.howHelp .tabs li svg {
	max-height:100%;
	display:block;
	margin:auto;
}
.howHelp .services:has(.backs > li:nth-child(1) input:checked) .tabs > li:nth-child(1) :where(label, path, polygon, rect),
.howHelp .services:has(.backs > li:nth-child(2) input:checked) .tabs > li:nth-child(2) :where(label, path, polygon, rect),
.howHelp .services:has(.backs > li:nth-child(3) input:checked) .tabs > li:nth-child(3) :where(label, path, polygon, rect) {
	background-color:var(--backtcolor);
	fill:#fff;
	color:#fff;
}
.howHelp .services .backs {
	position:absolute;
  	inset:0;
	display:flex;
	overflow-x:auto;
	scroll-snap-type: x mandatory; /* 捲動後自動對齊 */
	scroll-behavior: smooth;       /* (選用) 平滑滾動 */
	-webkit-overflow-scrolling: touch;
	--bgc:none;
}
.howHelp .services .backs input {
}
.howHelp .services .backs > li {
	#position:absolute;
	position:relative;
	display:block;
	flex:0 0 100%;
	scroll-snap-align: start;      /* 對齊母容器左緣 */
	scroll-snap-stop: always;      /* (選用) 強制停在面板上 */
	#inset:0;
	width:100%;
	overflow:hidden;
}
.howHelp .services .backs > li > a {
	position:absolute;
	display:block;
	inset:2px;
	z-index:2;
}
.howHelp .services .backs > li:after,
.howHelp .services .backs > li:before {
	position:absolute;
	content:'';
	display:block;
	inset:0;
	margin:auto;
	background-color:var(--bgc);
	background-image:var(--back);
	background-repeat:no-repeat;
	background-size:var(--ssize);
	background-position:var(--sposi);
	#transform:translateY(calc(1vh * 100 / var(--center-pct)));
}
.howHelp .services .backs > li:before {
	content:none;
	background-size:cover;
	filter: blur(15px) brightness(1);
	transform: scale(1.3);
}
.howHelp .services .backs .chara1 {
	position:absolute;
	width:var(--ssize);
	inset:var(--sposi);
	z-index:2;
}
.howHelp .services .backs .chara1 img {
	width:100%;
	display:block;
}
.howHelp .services .backs #sshelp2 .chara2 {
	z-index:2;
	position:absolute;
	inset:0;
	border-radius:8vw;
	transform:skewX(-20deg);
	transform-origin:left;
	inset:35% -30% 0 61%;
	inset:51% -28% 0 58%;
	background-color:#ffffffb3;
	overflow:hidden;
}
.howHelp .services .backs #sshelp2 .chara2 li {
	position:absolute;
	display:block;
	inset:21% 35% -5vw -5vw;
	inset:8% 42% -5vw -5vw;
	background-image: repeating-linear-gradient(
	135deg,
	#ffaa00ff 0px,
	#ffaa00ff 2px,
	#ffaa0000 2px,
	#ffaa0000 6px
	);
	border-radius:4vw;
}
.howHelp .services .backs #sshelp2 .chara3 {
	position:absolute;
	inset:auto -10% 5% auto;
	z-index:2;
	width:100%;
	font-size:4vw;
}
.howHelp .services .backs #sshelp2 .chara3 li {
	position:relative;
	display:block;
	margin-bottom:1.4em;
	width:fit-content;
}
.howHelp .services .backs #sshelp2 .chara3 li:before {
	position:absolute;
	display:block;
	content:'';
	inset:60% -.5em -.3em;
	background-color:#ffaa0066;
	mix-blend-mode:color-burn;
}
.howHelp .services .backs #sshelp2 .chara3 h4 {
	position:relative;
	display:block;
	width:100%;
	color:#ffffff;
	padding:.2em 1em;
	font-size:120%;
	font-weight:700;
}
.howHelp .services .backs #sshelp2 .chara3 li:nth-last-child(1) {
	width:auto;
}
.howHelp .services .backs #sshelp2 .chara3 li:nth-last-child(1):before {
	inset:0;
	background-color:#ffaa00ff;
	transform:skewX(-20deg);
}
.howHelp .services .backs #sshelp2 .logo {
	inset:6vw auto auto 6vw;
	width:30%;
}
.howHelp .services .backs #sshelp2 .words {
	font-size:2.7vw;
	font-size:4.0vw;
	color:inherit;
	inset:18vw auto auto 6vw;
	width:auto;
	padding-right:2em;
	line-height:1.5;
}
.howHelp .services .backs #sshelp2 .words span {
	display:inline-block;
}
.howHelp .services .backs #sshelp1 .chara3 {
	position:absolute;
	inset:calc(28vw + 10%) auto auto 6vw;
	z-index:2;
	color:#fff;
	width:100%;
	font-size:3.5vw;
}
.howHelp .services .backs #sshelp1 .chara3 li {
	position:relative;
	display:block;
	width:fit-content;
}
.howHelp .services .backs #sshelp1 .logo {
	inset:calc(6vw + 10%) auto auto 6vw;
	width:30%;
}
.howHelp .services .backs #sshelp1 .words {
	font-size:4.7vw;
	color:#fff;
	inset:calc(18vw + 10%) auto auto 6vw;
	width:auto;
}
.howHelp .services .backs #sshelp3 .chara1 {
	z-index:2;
	position:absolute;
	inset:0;
	transform:skewX(-10deg);
	transform-origin:bottom left;
	inset:auto 0 8% 10%;
	font-size:4vw;
}

.howHelp .services .backs #sshelp3 .chara1 .front1 {
	position:absolute;
	inset:auto 0 0 0;
	background-color:#6da1d0a6;
	color:#fff;
}
.howHelp .services .backs #sshelp3 .chara1 .front2 {
	position:relative;
	overflow:hidden;
	width:80%;
}
.howHelp .services .backs #sshelp3 .chara1 :where(.front3, .front4) {
	position:absolute;
	inset: -150% 0 -100% auto;
    height: 350%;
	background-color:#6da1d01e;
}
.howHelp .services .backs #sshelp3 .chara1 .front4 {
	width: max(12%, calc(110% - 540px));
}
.howHelp .services .backs #sshelp3 .chara1 .front3 {
	width: max(30%, calc(95% - 540px));
}
.howHelp .services .backs #sshelp3 .chara1 img {
	width:118%;
}
.howHelp .services .backs #sshelp3 .chara1 :where(img, h4) {
	transform:skewX(10deg);
	transform-origin:bottom left;
}
.howHelp .services .backs #sshelp3 .chara1 .front1 h4 {
	padding:.5em 1.5em;
}
.howHelp .services .backs #sshelp3 .chara2 {
	width:90%;
	max-width:1700px;
	overflow:hidden;
    position: absolute;
    z-index: 2;
	inset:47% 5% auto;
    aspect-ratio: 12 / 1;
}
.howHelp .services .backs #sshelp3 .chara2 img {
	display:block;
	margin: -17.5% 0% 0% -29%;
}
.howHelp .services .backs #sshelp3 .words b {
	font-size:130%;
	margin-bottom:.4em;
	display:block;
}
.howHelp .services .backs #sshelp3 .logo {
	inset:calc(6vw + 3%) 0 auto auto;
	width:95%;
	max-width:540px;
}
.howHelp .services .backs #sshelp3 .logo img {
	width:55%;
}
.howHelp .services .backs #sshelp3 .words {
	font-size:3.8vw;
	color:#fff;
	inset:calc(20vw + 3%) 0 auto auto;
	width:95%;
	max-width:540px;
	padding-right:1em;
}
.howHelp .services .backs #sshelp3 .words span {
	display:inline-block;
}
.howHelp .services .backs .logo {
	position:absolute;
	inset:auto 38% 80% auto;
	width:50%;
	z-index:2;
}
.howHelp .services .backs .logo img {
	display:block;
}
.howHelp .services .backs .words {
	position:absolute;
	inset:25% auto auto 10%;
	width:var(--spw);
	z-index:2;
	color:var(--mcolor);
	font-size:4vw;
	#font-weight:300;
	line-height:2;
}
.howHelp .services .waves {
	position:absolute;
	display:block;
	inset:auto -318vw 0 -43vw;
    width:220vw;
    margin:0;
	pointer-events:none;
	z-index:1;
}
.howHelp .services .waves use {
	transition:fill .3s cubic-bezier(.22,.61,.36,1);
}
.howHelp .services .waves use:nth-child(1) {
	fill:var(--mcolor);
}
.howHelp .services .waves use:nth-child(2) {
	fill:#faf7f2;
}
@media (min-width: 640px) or (orientation: landscape) {
	.pagetop .howHelp.outer {
		font-size:min(1.4vw, 2.5vh, var(--fontsize));
	}
	.howHelp .tabs {
		gap:2em;
		padding-inline:0;
	}
	.howHelp .tabs li {
		display:block;
		width:14em;
		height:6em;
		border-radius:1em 1em 0 0;
	}
	.howHelp .tabs li h3 {
		height:auto;
		overflow:visible;
	}
	.howHelp .tabs label {
		padding:1em;
	}
	.howHelp .slog {
		max-width:26em;
	}
	.howHelp .services .sz {
		aspect-ratio:1920 / 850;
		width:auto;
		max-height:calc(100vh - 4 * var(--fontsize));
	}
	.howHelp .services .backs > li:before {
		inset:0;
		margin:auto;
		#background-size:contain;
		background-repeat:no-repeat;
		background-position:center center;
		background-size:var(--psize);
		background-position:var(--pposi);
	}
	.howHelp .services .backs > li:after {
		inset:0;
		margin:auto;
		background-repeat:no-repeat;
		background-size:var(--psize);
		background-position:var(--pposi);
		width:auto;
		height:100%;
		width:100%;
		height:auto;
		aspect-ratio:1920 / 850;
	}
	.howHelp .services .backs .chara1 {
		width:var(--psize);
		inset:var(--pposi);
	}
	.howHelp .services .backs #sshelp2 .chara2 {
		inset:22% -15% 0 28%;
		border-radius:4vw;
	}
	.howHelp .services .backs #sshelp2 .chara2 li {
		inset:30% 80% -5vw -5vw;
	}
	.howHelp .services .backs #sshelp2 .chara3 {
		font-size:min(2vw,100%);
	}
	.howHelp .services .backs #sshelp2 .chara3 li:nth-last-child(1):before {
		inset:0 67% 0 0;
	}
	.howHelp .services .backs #sshelp2 .logo {
		inset:40% auto auto calc(50% - min(1920px, 100%) * 0.03);
		width:min(18%, 350px);
	}
	.howHelp .services .backs #sshelp2 .words {
		font-size:100%;
		color:inherit;
		inset:50% auto auto calc(50% - min(1920px, 100%) * 0.03);
		width:auto;
		padding:1em;
	}
	.howHelp .services .backs #sshelp1 .chara3 {
		font-size:min(2vw,100%);
		inset:62% auto auto calc(50% - min(1920px, 100%) * 0.3);
	}
	.howHelp .services .backs #sshelp1 .logo {
		inset:17% auto auto calc(50% - min(1920px, 100%) * 0.3);
		width:min(11%, 220px);
	}
	.howHelp .services .backs #sshelp1 .words {
		font-size:150%;
		inset:25% auto auto calc(50% - min(1920px, 100%) * 0.3);
		width:auto;
	}
	.howHelp .services .backs #sshelp3 .chara1 {
		inset:30% 0 15% 56%;
		font-size:100%;
	}
	.howHelp .services .backs #sshelp3 .chara2 {
		inset:7% 0 auto;
		width:70%;
		margin-inline:auto;
		max-width:1700px;
	}
	.howHelp .services .backs #sshelp3 .front2 {
		max-width:540px;
	}
	.howHelp .services .backs #sshelp3 .logo {
		inset:30% 50% auto auto;
		width:45%;
	}
	.howHelp .services .backs #sshelp3 .words {
		inset: calc(20vw + 3%) 50% auto auto;
		width: 45%;
		font-size:100%;
	}
	.howHelp .services .backs .words {
		inset:50% auto auto 39%;
		width:auto;
		font-size:min(1.4vw, 20px);
	}
	.howHelp .services .backs .logo {
		position:absolute;
		inset:50% 66% auto auto;
		width:16vw;
		z-index:2;
	}
	.howHelp .services .waves {
		inset:auto 0 0;
	    width:auto;
	    margin:auto;
	}
}
@media (min-width: 1000px){
	.pagetop .howHelp {
		margin-bottom:5vw;
	}
}





.pagetop .allCate {
	position:relative;
	background:var(--buttonLinear);
	color:#ffffff;
	text-decoration:none;
	line-height:1;
	padding:.5em 1em;
	border-radius:2em;
}
@media (min-width: 640px) or (orientation: landscape) {
	.pagetop .allCate {
		transition:all .2s cubic-bezier(.22,.61,.36,1);
	}
	.pagetop .allCate:hover {
		transform:translate(-2px, -2px) scale(1.1);
		box-shadow:2px 2px 2px #00000044;
	}
	.pagetop .allCate:after {
		position:absolute;
		content:'';
		background-image:url(/img/finger.svg);
		aspect-ratio:1;
		inset:2em auto auto 60%;
		opacity:0;
		width:2em;
		transition:all .2s cubic-bezier(.22,.61,.36,1);
	}
	.pagetop .allCate:hover:after {
		top:1em;
		opacity:1;
	}
}



.pagetop .rightPath {
	padding-block:0em 6em;
}

.rightPath .yel {
	color:#ffaa00;
}
.rightPath .bol {
	font-weight:600;
}
.rightPath .big {
	font-size:5vw;
}
.rightPath .imgw {
	font-size:3vw;
	padding:0 1em .5em 2em;
	border-bottom:2px solid #ffaa00;
}
.rightPath .lightpen {
	position:relative;
	width:fit-content;
}
.rightPath .lightpen:after {
	display:block;
	content:'';
	width:100%;
	height:45%;
	position:absolute;
	inset:auto 0 0 0;
	background-color:#ffaa0088;
	mix-blend-mode:color-burn;
}
.rightPath .dch {
	position:relative;
	width:70%;
	max-width:480px;
	margin-inline:auto;
}
.rightPath :where(ul, li) {
	display:block;
}
.rightPath .dflx .right {
	order:2;
}
.rightPath .dflx .left {
	order:1;
	display:flex;
	justify-content:center;
	align-items:center;
	line-height:1.7;
}
.rightPath .right ul {
	position:absolute;
	inset:auto -2em 0 auto;
}
.rightPath .dflx img {
	display:block;
	max-width:100%;
	margin-bottom:1em;
}
@media (min-width: 640px) or (orientation: landscape) {

	.rightPath .dflx {
		font-size:min(100%, 2vw);
	}
	.rightPath .big {
		font-size:150%;
	}
	.rightPath .imgw {
		font-size:90%;
		#padding-inline:4vw 2vw;
	}
	.rightPath .dflx {
		display:flex;
		justify-content: center;
		align-items: center;
		flex-wrap: wrap;
		gap:0;
		max-width:800px;
        width:calc(100% - 10em);
		margin-inline: auto;
		isolation: isolate;
	}
	.rightPath .dch {
		width:calc(50% - 1.5em);
		margin:0;
	}
}



.pagetop .comStories {
	padding-block:1em 3em;
}
.comStories h2 {
	font-size:170%;
	font-weight:700;
	text-align:center;
	color:var(--mainColor);
	padding:0 1.5em 0.3em;
	margin:0 auto 0;
	width:fit-content;
}
.comStories .topl li {
	display:inline-block;
}
.comStories .topb {
	display:block;
	border-radius:2em;
	background:#e5e5e5;
	margin-left:.5em;
	line-height:1;
	padding:.5em;
	min-width:2em;
	text-align:center;
	cursor:pointer;
	text-decoration:none;
	color:#333;
	transition:all .3s cubic-bezier(.22,.61,.36,1);
	width: 30%;
  margin: 0 auto;
}
.comStories .topl li.ltgt {
	display:none;
}
.comStories .topb:hover {
	background:var(--mainColor);
	color:var(--mainFColor);
}
.comStories .scrl {
	width:calc(14em * 2 + 3em);
	width:100%;
	white-space:nowrap;
	overflow:auto;
	padding-inline:.5em;
}
.comStories .hook {
	display:inline-block;
	width:0;
	position:relative;
	#overflow:hidden;
	vertical-align:top;
}
.comStories .scrl input {
	position:absolute;
	opacity:0;
	inset: 0 auto auto .5em;
    width:14em;
	z-index:0;
}
.comStories .postList .topost {
	display:inline-block;
	#font-size:120%;
	margin-inline:.5em;
}
.comStories .topost .img {
	position:absolute;
	inset:0;
}
.comStories .topost .img img {
	position:absolute;
	display:block;
	width:100%;
	height:100%;
	object-fit:cover;
	object-position:center;
}
.comStories .topost .ribbon2 {
	position:relative;
}
.comStories .topost .ribbon2 .rb2 {
	position:absolute;
	inset:0 -1em;
	width:calc(100% + 2em);
}
.comStories .topost .ribbon2 div {
	position:absolute;
	inset:1.5em 0 0;
	color:#efc978;
	display:block;
	width:fit-content;
	margin:0 auto;
}
.comStories .topost .ribbon {
	position:relative;
	color:#000;
	display:flex;
	justify-content:center;
	align-items:center;
	margin-block:-1em .5em;
	height:auto;
}
.comStories .topost .ribbon div {
	position:relative;
	padding:.5em 0 .7em;
	line-height:1;
	color:var(--rbw);
}
.comStories .topost .ribbon .sample {
	display:none;
}
.comStories .topost .ribbon svg {
	position:absolute;
	inset:auto;
	width:auto;
	height:100%;
}
.comStories .topost .ribbon svg use {
	fill:var(--rbc);
	fill-rule:evenodd;
}
.comStories .topost .ribbon svg path:first-child {
	display:none;
}
.comStories .topost :where(blockquote, cite) {
	display:block;
	margin:0;
}
.comStories .topost .words {
	position:absolute;
	display:block;
	padding:0 1.5em 1.5em;
	margin:0;
}
.comStories .solutions .topost .words {
	inset:65% 0 0;
}
.comStories .stories .topost .words {
	inset:78% 0 0;
	background:#00000088;
	background:#ffcb5eb3;
}
/* 精選人氣故事區右箭頭 
 .comStories .stories .topost .words:before {
	content:'>';
	display:block;
	position:absolute;
	inset:auto .5em .5em auto;
	border:2px solid #fff;
	border-radius:2em;
	width:calc(2em + 4px);
	height:calc(2em + 4px);
	padding:.5em;
	line-height:1;
	text-align:center;
	color:#fff;
	font-size:90%;
} */
.comStories .topost cite {
	color:#fff;
	font-style:normal;
	white-space:normal;
}
.comStories .solutions .topost blockquote p {
	position:relative;
	color:#fedcae;
	font-weight:700;
	font-size:120%;
}
.comStories .solutions .topost blockquote cite {
	position:relative;
	font-size:80%;
	color:#ffffff;
}
.comStories .postList {
	padding-bottom:3em;
}
.comStories .stories .topost p {
	padding:1em 0 .3em;
	#border-bottom:1px solid #fff;
	color:#000;
	#font-size:80%;
	font-weight:bold;
	text-align:center;
}
.comStories .stories .topost blockquote cite {
	display:none;
}
.comStories .storytitle {
	position:sticky;
	display:block;
	width:100%;
	top:calc(var(--fontsize) * 4);
	background:#ffffff;
}
.comStories .storytitle > :where(li) {
	display:flex;
	justify-content:space-between;
	align-items:flex-end;
	width:100%;
	margin:auto;
	padding-block:1em;
}
.comStories .storytitle > :where(li:has(div)) {
	padding-bottom:2em;
}
.comStories .storytitle .lineTitle {
	margin:0 auto 0 0;
}
.comStories .storytitle > li > div {
	position:absolute;
	inset:auto 0 0;
	padding:1em;
	text-align:center;
	#display:none;
	pointer-events:none;
}
@media (min-width: 640px) or (orientation: landscape) {
	.comStories .storytitle {
		position:relative;
		top:0;
		margin: -2.2em 0 -1.2em 0;
	}
	.comStories .topl li.ltgt {
		display:inline-block;
		margin-left: 1em;
	}
	.comStories .storytitle > li {
		width:calc(14em * 3 + 5em);
		max-width:80%;
	  padding-block: 1em;
	}
	.comStories .scrl {
		width:calc(14em * 4 + 5em);
		font-size: min(100%, 1.4vw);
		margin-bottom: 1em;
	}
	.comStories .postList .topost {
		font-size:100%;
		font-size:min(100%, 2vw);
	}
	.comStories .storytitle .lineTitle {
		margin-inline:0;
	}
	.comStories .storytitle > li > div {
		#display:block;
	}
}


.pagetop .pResident {
	position:relative;
	font-size:3vw;
	background:#e6e6e6;
	color:var(--mainColor);
}
.pResident .ainer {
	overflow:hidden;
}
.pResident .ainer > div {
	text-align:center;
}
.pResident h2 {
	position:absolute;
	inset:auto 50% 2em 3em;
	font-weight:700;
	text-align:center;
}
.pResident .img {
	position:relative;
	display:inline-block;
}
.pResident .img img {
	position:relative;
	#margin:auto auto auto 40%;
	margin:0;
	height:26em;
}
.pResident .rings {
	position:absolute;
	position:relative;
	display:inline-block;
	#inset:0 55% 0 0;
	z-index:1;
	--turn:calc(-120deg * 5);
	--flip:0deg;
	#perspective:50em;
	margin-inline:3em -2em;
}
.pResident.seeing .rings {
	--turn:0deg;
	pointer-events:none;
}
.pResident .rings h3 {
	position:absolute;
	display:flex;
	justify-content:center;
	align-items:center;
    inset:0 0 auto auto;
	height:26em;
	aspect-ratio:.5;
	#margin:auto;
	text-align:center;
	font-weight:700;
	z-index:2;
	padding-bottom:.5em;
}
.pResident .rings h3 div {
	font-size:80%;
	width:fit-content;
	height:fit-content;
}
.pResident .rings * {
	transition:all 2s cubic-bezier(.22,.61,.36,1);
}
.pResident .cirs {
	position:relative;
	height:26em;
	#border:1px solid #888;
	border-radius:13em;
	#margin-left:auto;
	display:block;
	transform:rotateY(var(--flip));
	#transform-style:preserve-3d;
	aspect-ratio:.5;
}
.pResident .cirs li {
	display:block;
	position:absolute;
	margin:auto;
	width:7em;
	aspect-ratio:1;
	#border:1px solid #ccc;
	inset:0;
	transform-origin:center center;
}
.pResident .c1 {
	position:absolute;
	inset:-10em;
	margin:auto;
	width:calc(100% + 20em);
	aspect-ratio:1;
}
.pResident .c1 b,
.pResident .c1 p:before {
	position:absolute;
	content:'';
	aspect-ratio:1;
	display:block;
	margin:auto;
	transform-origin:center center;
	inset:0;
}
.pResident .c1 p:nth-of-type(1) {
	position:absolute;
	inset:0 0 50% 50%;
	overflow:hidden;
	transform-origin:left bottom;
	transform:rotate(calc(var(--turn) - var(--adeg)));
}
.pResident .c1 p:nth-of-type(1):before {
	display:block;
	border:1em solid var(--mcolor);
	border-radius:50%;
	width:15em;
	inset:auto auto -7.5em -7.5em;
	aspect-ratio:1;
}
.pResident .c1 p:nth-of-type(2) {
	position:absolute;
	inset:25% 50% 50% 0;
	overflow:hidden;
	transform-origin:right bottom;
	transform:rotate(calc(var(--turn) - var(--adeg)));
	z-index:1;
}
.pResident .c1 p:nth-of-type(2):before {
	width:8em;
	background:#e6e6e6;
	inset:auto -4em -4em auto;
	border-radius:4em;
	transform:translate(0, -6.5em);
}
.pResident .c1 b {
	width:7em;
	border:.4em solid var(--mcolor);
	background:#e6e6e6;
	border-radius:3.5em;
	transform:rotate(calc(var(--turn) - var(--adeg))) translate(0, -6.5em);
	z-index:1;
}
.pResident .circ {
	position:absolute;
	inset:0;
	margin:auto;
	width:5.6em;
	aspect-ratio:1;
	border-radius:2.8em;
	transform-origin:center center;
	--thisp:calc(var(--turn) - var(--adeg));
	transform:rotate(var(--thisp)) translate(0, -6.5em);
	z-index:1;
}
.pResident .circ:before {
	content:'';
	inset:0;
	display:block;
	position:absolute;
	background:linear-gradient(135deg, #fff, #d7d6d6);
	aspect-ratio:1;
	border-radius:50%;
	transform:rotate(calc(var(--thisp) * -1));
	box-shadow:1em 1em .5em #00000077;
}
.pResident .circ:after {
	content:'';
	width:calc(100% - .3em);
	display:block;
	position:absolute;
	background-color:#f2f2f2;
	aspect-ratio:1;
	border-radius:50%;
	inset:0;
	margin:auto;
	transform:rotate(calc(var(--thisp) * -1));
}
.pResident .circ p {
	position:absolute;
	inset:0;
	display:flex;
	justify-content:center;
	align-items:center;
	flex-wrap:wrap;
	transform:rotate(calc(var(--thisp) * -1));
	transform-origin:center center;
	z-index:1;
	padding:1em 0;
}
.pResident .circ img {
	position:relative;
	width:80%;
}
.pResident .circleedge.up {
	inset:0 0 auto;
}
.pResident .circleedge.down {
	inset:auto 0 0;
}
.pResident .circleedge.down svg {
	transform:rotate(180deg);
}
.pResident .circleedge .white {
	fill:#fff;
}
@media (min-width: 640px) or (orientation: landscape) {
	.pagetop .pResident {
		font-size:inherit;
		font-size:min(2vw, calc(var(--fontsize) * 1.5));
	}
	.pResident h2 {
		inset:7em 0 auto calc(50% + 16em);
	}
	.pResident .services .backs .words {
		font-size:max(.7vw, 70%);
	}
	.pResident .services .backs .logo {
		position:absolute;
		inset:50% 66% auto auto;
		width:16vw;
		z-index:2;
	}
	.pResident .img img {
		position:relative;
		#margin:auto auto auto 44%;
		height:27em;
	}
	.pResident .rings {
		--flip:0deg;
		#inset:0 50% 0 0;
		font-size:120%;
		margin-inline:1em -4em;
	}
	.pResident .rings h3 {
		aspect-ratio:.7;
		margin-bottom:-20%;
	}
	.pResident .cirs {
		aspect-ratio:.7;
		height:26em;
		margin-bottom:-20%;
	}
}
@media (min-width: 800px){
	.pResident h2 {
		inset:auto 3em 3em calc(50% + 10em);
		inset:auto 1em 3em calc(50% + 15em);
	}
	.comStories .storytitle > li {
		width:calc(14em * 3 + 5em);
		max-width:100%;
		padding-block: 1em;
		display: flex;
    -webkit-box-pack: end;
    justify-content: flex-end;
	}
}
@media (min-width: 1000px){
	.pagetop .pResident {
		margin-bottom:5vw;
	}
	.comStories .storytitle > li {
		width:calc(14em * 3 + 15em);
	}
	.rightPath .right ul {
		position:absolute;
		inset:auto 0 0 auto;
	}
}



/* .pagetop .newsLists {
	padding:6em;
} */
.pagetop .newsLists .ainer {
	position:relative;
	#font-size:3vw;
}
.newsLists h2 {
	font-size:110%;
    text-align: center;
    font-weight: normal;
    color: var(--subColor1);
	padding:2em 1.5em;
	margin:2em auto 0;
	width:fit-content;
}
.newsLists h2 span {
	display:inline-block;
}
.newsLists h2.no1 {
	border-top:1px solid #333;
}
.newsLists .slog.no2 {
	margin:0 auto 2em;
}
.newsLists .slog.no2 span {
	display:block;
	line-height:1.5;
	width:fit-content;
	margin-inline:auto;
}
.newsLists .slog.no2 span.light {
	position:relative;
	margin-top:2em;
}
.newsLists .slog.no2 span.light:before {
	content:'';
	display:block;
	position:absolute;
	inset:auto -.2em -.2em;
	background:#ffaa004c;
	mix-blend-mode:multiply;
	height:.8em;
}
.newsLists .steps {
	position:relative;
	display:flex;
	flex-flow:column;
	align-items:center;
	font-size:min(1em, 4vw);
}
.newsLists .steps li {
	position:relative;
	display:flex;
	border:1px solid #333;
	border-radius:5em;
	width:fit-content;
    max-width: calc(100% - 1em);
	padding:1em;
	background-color:#fff;
}
.newsLists .steps li:not(:last-child) {
	margin-bottom:1.5em;
}
.newsLists .steps li:not(:last-child):after {
	content:'';
	display:block;
	position:absolute;
	inset:calc(100% + 1px) auto auto 50%;
	height:1.5em;
	border-left:1px solid #333;
}
.newsLists .steps .img {
	color:#f5a519;
	padding:.3em 2em;
}
.newsLists .steps .img img {
	display:block;
	width:4em;
	margin:.3em 0;
}
.newsLists .steps .cont {
	padding:1em 0 0;
	width:16em;
}
@media (min-width: 640px) or (orientation: landscape) {
	.pagetop .newsLists .ainer {
		font-size:100%;
		padding-top: 2em;
	}
	.newsLists h2 {
		font-size:150%;
	}
}

.docLists .head .allCate {
	display:block;
	width:fit-content;
	margin-left:auto;
}
.docLists .categs > li:nth-child(1) {
	background-color:#ffcb5e;
}
.docLists .categs > li:nth-child(2) {
	#background-color:#cccccc;
}
.docLists .categs > li:nth-child(2) {
	background-color:#e9e9e9;
}
@media (min-width: 640px) or (orientation: landscape) {
	.docLists .categs {
		border-radius:2em 2em 0 0;
	}
}