@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@500;700;900&display=swap');

html{
	overflow-x:hidden;
}

body, h1, h2, h3, h4, h5, h6, ol, ul, li, dl, dt, dd{
	margin:0;
	padding:0;
}

body{
	--header-height:60px;
	--theme-bg-color1:#7accfe;
	--theme-bg-color2:#bad961;
	--theme-color1:#0061bf;
	--theme-color2:#1f721b;
	--theme-color3:#ff9600;
	--border-radius:1em;
	font-family: 'Noto Sans TC', sans-serif;
	font-size: clamp(16px, 1.47vw, 28px);
	color:#333;
	padding-top:var(--header-height);
}

*,
*:before,
*:after{
	box-sizing:border-box;
}
ul, ol{
	list-style:none;
}
a{
	text-decoration:none;
}

h2{
	font-size: 1.78em;
	font-weight: 900;
	text-align: center;
}
p{
	margin:0;
	line-height: 1.5em;
	text-align: center;
}
*+p{
	margin-top:0.5em;
}

.CT{
	width:90%;
	max-width:900px;
	margin:0 auto;
}
.shadow{
	box-shadow:0 0.6em 0.6em 0.3em rgba(0, 0, 0, 0.2);
}

.cloud{
	position: absolute;
	left:0;
	top:0;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	opacity: 0.5;
	pointer-events: none;
}
.cloud.c1,
.cloud.c2{
	width:15%;
	aspect-ratio:2.5;
	background-image: url(../images/cloud1.png);
}
.cloud.c1{
	margin:-8% 0 0 55%;
}
.cloud.c2{
	margin:15% 0 0 -18%;
}
.cloud.c3{
	width:12%;
	aspect-ratio:2.93;
	margin:17% 0 0 102%;
	background-image: url(../images/cloud2.png);
}

.btnStyle{
	border:none;
	border-radius:2em;
	box-shadow: 0.1em 0.15em 0.2em 0.05em rgba(0, 0, 0, 0.2);
	color:#FFF;
	text-align: center;
	text-shadow: 0.075em 0.075em 0 rgba(0, 0, 0, 0.4);
	font-family:inherit;
	font-weight: 900;
	line-height: 1em;
	white-space: nowrap;
	padding:0.6em 0.5em 0.7em;
	--grdnt1:linear-gradient(to right, #ee7a2d, #fbb013);
	--grdnt2:linear-gradient(to right, #0543ae, #068eec);
	--grdnt3:linear-gradient(to left, #0543ae, #068eec);
}

/************************************** header start ***************************************************/
header{
	position:fixed;
	left:0;
	top:0;
	width:100%;
	height:var(--header-height);
	background:#FFF;
	z-index:2;
	padding:10px 30px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	box-shadow: 0 0.3em 0.3em 0.15em rgba(0, 0, 0, 0.1);
}

header h1{
	font-size: 1em;
	display: flex;
	align-items: center;
}
header h1 a{
	text-indent: -9999px;
	overflow:hidden;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}
header h1 a.ch{
	width:3.35em;
	aspect-ratio:1.76;
	background-image: url(../images/ch_logo.png);
}
header h1 a.tena{
	width:3.78em;
	aspect-ratio:1.9;
	background-image: url(../images/tena_logo.png);
}
header h1 span{
	position: relative;
	width:1.4em;
	aspect-ratio:1;
	margin:0 0.3em;
	text-indent: -9999px;
	overflow:hidden;
}
header h1 span:before,
header h1 span:after{
	position: absolute;
	left:50%;
	top:50%;
	width:100%;
	height:1px;
	content: "";
	display: block;
	background: #999;
}
header h1 span:before{
	transform: translate(-50%, -50%) rotate(-45deg);
}
header h1 span:after{
	transform: translate(-50%, -50%) rotate(45deg);
}

header nav{
	color:#000;
	font-size: 1.1em;
}
header nav ul{
	display: flex;
	align-items: center;
	align-items: center;
	font-size: 0.71em;
}
header nav li+li{
	margin-left:2.5em;
}
header nav li:hover,
header nav li.active{
	color:#00baf2;
}
header nav a{
	display: flex;
	align-items: center;
	transition: color 0.2s;
	color:currentColor;
}
header nav a:before{
	content:"";
	display: block;
	width:1.3em;
	aspect-ratio:1;
	background-repeat: no-repeat;
	background-position-y: center;
	background-size: cover;
	background-image: url(../images/navIcon.svg);
	margin-right: 0.25em;
}
header nav li:nth-child(1) a:before{ background-position-x: 0%;}
header nav li:nth-child(2) a:before{ background-position-x: 33.33%;}
header nav li:nth-child(3) a:before{ background-position-x: 66.66%;}
header nav li:nth-child(4) a:before{ background-position-x: 100%;}

header .burgerBtn{
	display: none;
}
/************************************** header end ***************************************************/

.wrapper{
	position:relative;
	z-index:0;
	max-width:1920px;
	margin:0 auto;
	overflow: hidden;
}

/************************************** 右下 cta start ***************************************************/
.ctaBtn{
	position: fixed;
	z-index: 1;
	right:1em;
	bottom:1em;
	width:5em;
	aspect-ratio:1;
	border-radius:50%;
	overflow:hidden;
	background: url(../images/ctaBtn.png) no-repeat center/contain;
	text-indent: -9999px;
	animation:floatCTA 1s ease-in-out infinite alternate;
	transition: transform 0.2s;
	box-shadow:0 0.2em 0.2em 0.1em rgba(0, 0, 0, 0.1);
}
@keyframes floatCTA{
	to{
		transform: translateY(-0.5em);
	}
}
.ctaBtn:hover{
	animation:none;
	transform: scale(1.1);
}
/************************************** 右下 cta end ***************************************************/

/************************************** home start ***************************************************/
.home{
	background:var(--theme-bg-color1) url(../images/bg1.gif) no-repeat center bottom / contain;
	padding-bottom: 12.63%;
}
.kv{
	height: calc(100vh - 60px - 1.5em);
	max-height:33em;
	margin:0 auto;
	background:url(../images/kv.gif) no-repeat center bottom/contain;
}
.home .CT{
	position: relative;
	padding:2em 2.5em;
	border-radius: var(--border-radius);
	background: var(--theme-color1);
	color:#FFF;
}
.home .CT:before,
.home .CT:after{
	position: absolute;
	content:"";
	display: block;
	width:26%;
	bottom:100%;
	margin-bottom: -5.46%;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}
.home .CT:before{
	left:0;
	margin-left: 10%;
	aspect-ratio:0.79;
	background-image: url(../images/kvP1.png);
}
.home .CT:after{
	right:0;
	margin-right: 5%;
	aspect-ratio:0.71;
	background-image: url(../images/kvP2.png);
}
/************************************** home end ***************************************************/

/************************************** quiz start ***************************************************/
.quiz{
	--offset-y:-6.85em;
}

.quiz .group1{
	padding-bottom:calc(24.42% + var(--offset-y));
	background:var(--theme-bg-color2) url(../images/bg2.gif) no-repeat center bottom / contain;
}
.quiz .group1 .CT{
	transform: translateY(var(--offset-y));
}

/******************** 測驗 start *******************/
.gameWrapper{
	position: relative;
	background: #FFF;
	border-radius: var(--border-radius);
	padding:2.5em 3em;
}
.gameWrapper:before,
.gameWrapper:after{
	position: absolute;
	content:"";
	display: block;
	bottom:0;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	z-index: 1;
}
.gameWrapper:before{
	left:0;
	width:22.77%;
	aspect-ratio:0.89;
	background-image: url(../images/gameDecoP1.png);
	margin:0 0 -10% -8%;
}
.gameWrapper:after{
	right:0;
	width:20.37%;
	aspect-ratio:0.64;
	background-image: url(../images/gameDecoP2.png);
	margin:0 -6% -17% 0;
}

.gameWrapper h2{
	color:var(--theme-color1);
}

.game{
	position: relative;
}

.game button{
	cursor: pointer;
	font-size: 0.8em;
	width:13em;
	background:var(--grdnt1);
}
.game button:hover,
.game button.active{
	background:var(--grdnt2);
}

/*********** Q start ************/
.Q{
	margin-top:1em;
	overflow: hidden;
}

.Q .q{
	width:300%;
	display: flex;
	transition: transform 0.5s ease-out;
}
.Q.Q1 .q{ transform: translateX(0%);}
.Q.Q2 .q{ transform: translateX(-33.33%);}
.Q.Q3 .q{ transform: translateX(-66.66%);}
.Q .q span{
	display: block;
	width:33.33%;
	text-align: center;
}

/**** img start ****/
.Q .img span{
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	aspect-ratio:3;
}
.Q .img span:nth-child(1){ background-image: url(../images/QP1.gif);}
.Q .img span:nth-child(2){ background-image: url(../images/QP2.gif);}
.Q .img span:nth-child(3){ background-image: url(../images/QP3.gif);}
/**** img end ****/

/**** bar start ****/
.Q .bar{
	border-radius:1em;
	overflow: hidden;
	background: #DDD;
	width:90%;
	height:0.8em;
	margin:1em auto 0;
}
.Q .bar:before{
	content:"";
	display: block;
	width:0;
	height:100%;
	background: var(--theme-color1);
	border-radius:inherit;
	transition: width 0.5s ease-out;
}
.Q.Q1 .bar:before{ width:33.33%;}
.Q.Q2 .bar:before{ width:66.66%;}
.Q.Q3 .bar:before{ width:100%;}
/**** bar end ****/

/**** txt start ****/
.Q .txt{
	margin-top:0.5em;
}
.Q .txt span{
	flex-grow:1;
	font-weight: 900;
	font-size: 1.78em;
	color:var(--theme-color3);
}
/**** txt end ****/

/**** btn start ****/
.Q .btn{
	margin-top:1em;
	padding-bottom: 0.5em;
}
.Q .btn span{
	flex-grow:1;
}
.Q .btn button+button{
	margin-left:0.25em;
}
/**** btn end ****/
/*********** Q end ************/

.result,
.end{
	position: absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
}

.result{
	opacity: 0;
	background: rgba(255, 255, 255, 0.85) no-repeat 58%/25%;
	transition: all 0.2s ease-out;
	visibility: hidden;
	cursor: pointer;
}
.result.show{
	opacity: 1;
	background-size:55%;
	visibility: visible;
}
.result.O{ background-image: url(../images/gameO.png);}
.result.X{ background-image: url(../images/gameX.png);}

.end{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background:#FFF;
	visibility: hidden;
}
.end.show{
	visibility: visible;
}
.end img{
	display:block;
	width:90%;
	margin-top:1em;
	opacity: 0;
	transform:scale(0.5);
	transition: all 0.5s ease-out;
}
.end.show img{
	opacity: 1;
	transform:none;
}
.end button{
	margin-top:1em;
}
/******************** 測驗 end *******************/

.quiz .group1 .CT > h2{
	color:var(--theme-color2);
	margin-top:2.5em;
}

.quiz .group2{
	--offset-y2:-12em;
	background:var(--theme-bg-color1) url(../images/bg1.gif) no-repeat center bottom / contain;
}
.quiz .group2 .CT{
	transform: translateY(var(--offset-y2));
}

/***************** 台灣失智人口有多少 start ********************/
.rateWrapper{
	background: #FFF;
	border-radius: var(--border-radius);
	padding:3.5em 4em;
}
.rateWrapper h2{
	color:var(--theme-color1);
}
.rateWrapper img{
	display: block;
	width:100%;
	margin-top:2em;
}
/***************** 台灣失智人口有多少 end ********************/

/***************** 3大失禁主因 start ********************/
.quiz .group2 .CT > h2{
	position: relative;
	color:var(--theme-color1);
	margin-top:2.5em;
}
.reason{
	margin-top:3em;
	padding-bottom:2em;
}
.reason li+li{
	margin-top:1.5em;
}
.reason h3{
	font-size: 1.2em;
	font-weight: 700;
	line-height: 1em;
	color:#FFF;
	border-radius: var(--border-radius);
	background: var(--theme-color1);
	cursor:pointer;
	padding:0.3em 0.3em 0.3em 1.5em;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.reason h3 span{
	position: relative;
	width:1.4em;
	aspect-ratio:1;
	border-radius:50%;
	background: currentColor;
}
.reason h3 span:before,
.reason h3 span:after{
	position: absolute;
	content:"";
	display: block;
	width:60%;
	aspect-ratio:3.8;
	background: var(--theme-color1);
	left:50%;
	top:50%;
}
.reason h3 span:before{
	transform: translate(-50%, -50%);
}
.reason h3 span:after{
	transform: translate(-50%, -50%) rotate(-90deg);
}
.reason li.active h3 span:after{
	display: none;
}

.reason .info{
	border-radius: var(--border-radius);
	background: #FFF;
	padding:1em 1em 1em 1.8em;
	display: none;
}
/***************** 3大失禁主因 end ********************/
/************************************** quiz end ***************************************************/

/************************************** level start ***************************************************/
.level{
	--offset-y:-10.78em;
	background:var(--theme-bg-color2) url(../images/bg2.gif) no-repeat center bottom / contain;
}

.level .CT{
	transform: translateY(var(--offset-y));
	padding-top:3em;
}

.level .intro{
	position: relative;
	border-radius:var(--border-radius);
	background: var(--theme-color1);
	padding:2em 45% 2em 3em;
	color:#FFF;
}
.level .intro p{
	margin:0;
	text-align: left;
}
.level .intro:after{
	position: absolute;
	right:0;
	bottom:0;
	margin:0 3% -12% 0;
	content:"";
	display: block;
	width:38%;
	aspect-ratio:0.73;
	background: url(../images/levelIntroP.png) no-repeat center/contain;
	pointer-events: none;
}

.level h2{
	color:var(--theme-color2);
	margin-top:3em;
}
.level .CT > p{
	margin:1em auto 0;
	width:80%;
}

/**************** 階段 start ******************/
.scenario{
	margin-top:3em;
}

/***** 頁籤 start *****/
.scenario > ul{
	display: flex;
}
.scenario > ul li{
	flex-grow:1;
	cursor: pointer;
	border-radius:var(--border-radius);
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
	text-align: center;
	line-height: 1em;
	padding:0.5em;
	background: #efefef;
	transition: background 0.2s;
}
.scenario > ul li+li{
	margin-left:1px;
}
.scenario > ul li:hover,
.scenario > ul li.active{
	background: #d9e7ff;
}
/***** 頁籤 end *****/

/***** 內容 start *****/
.tabCTWrapper{
	padding:2em 3em;
	background: #FFF;
	border-radius:var(--border-radius);
	border-top-left-radius: 0;
	border-top-right-radius: 0;
}

.scene{
	display: none;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-start;
}
.scene.active{
	display: flex;
}
.scene h3{
	width:100%;
	color:var(--theme-color3);
	font-weight:900;
	font-size: 1.78em;
	text-align: center;
	margin-bottom:0.5em;
}
.scene img{
	width:50%;
	display: block;
}
.scene .txt{
	width:45%;
}
.scene .txt h4{
	font-weight:900;
	font-size: 1.78em;
	color:var(--theme-color1);
}
.scene .txt ul{
	list-style: disc;
	margin-top:0.5em;
	padding-left: 1.5em;
}

.scenario .expert{
	margin-top:2em;
	position: relative;
	border-radius:var(--border-radius);
	background: var(--theme-color1);
	color:#FFF;
	font-size: 0.7em;
	padding:1.5em 25% 1.5em 1.5em;
}
.scenario .expert ol{
	list-style: decimal;
	padding-left:2em;
}
.scenario .expert:after{
	position: absolute;
	right:0;
	bottom:0;
	content: "";
	display: block;
	aspect-ratio:1.03;
	width:20%;
	margin:0 3% -2px 0;
	background: url(../images/levelExpert.png) no-repeat center/contain;
}
/***** 內容 end *****/
/**************** 階段 end ******************/
/************************************** level end ***************************************************/

/************************************** care start ***************************************************/
.care{
	padding:2% 0 28.73%;
	background:var(--theme-bg-color1) url(../images/bg3.gif) no-repeat center bottom / contain;
}

.care h2{
	position: relative;
	color:var(--theme-color1);
}

.method{
	position: relative;
	margin-top:27%;
	display:flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-start;
	align-content: flex-start;
}
.method > a{
	position: absolute;
	display: block;
	font-size: 0;
	left:0;
	top:0;
	margin-top:-25.64%;
	width:100%;
	aspect-ratio:2.81;
	background: url(../images/careExpert.gif) no-repeat center/contain;
	z-index: 1;
}
.method h3{
	font-size: 1.2em;
	font-weight: 700;
	line-height: 1em;
	color:#FFF;
	border-radius: var(--border-radius);
	background: var(--theme-color1);
	padding:0.3em 0.3em 0.3em 1.5em;
	width:100%;
}
.method *+h3{
	margin-top:1.5em;
}
.method .imgWrapper{
	width:48%;
	margin-top:0.8em;
	perspective: 2000px;
}
.method .img{
	position: relative;
	aspect-ratio:1;
	transform-style: preserve-3d;
	transition: transform 0.5s;
	border-radius:var(--border-radius);
}
.method .imgWrapper.flip .img{
	transform:rotateY(180deg);
}

.method img{
	position: absolute;
	display: block;
	left:0;
	top:0;
	width:100%;
	height:100%;
	backface-visibility: hidden;
	border-radius:var(--border-radius);
}
.method img:nth-child(2){
	transform: rotateY(180deg);
}
/************************************** care end ***************************************************/

/************************************** product start ***************************************************/
.product{
	--offset-y:-2.71em;
	padding-bottom:calc(10.84% + var(--offset-y));
	background:var(--theme-bg-color2) url(../images/bg4.gif) no-repeat center bottom / contain;
}
.product .CT{
	transform: translateY(var(--offset-y));
}

.product h2{
	color:var(--theme-color2);
}
.product *+h2{
	margin-top:2.5em;
}

/***************** 商品 start *********************/
.ctaBlockWrapper{
	margin-top:3em;
}

.ctaBlockWrapper .ctaBlock:nth-child(2){
	display:none;
}

.ctaBlockWrapper a{
	display: flex;
	flex-direction: column;
	align-items: center;
	border-radius:var(--border-radius);
	overflow: hidden;
	background: #FFF;
	padding-bottom: 1.5em;
}

.ctaBlockWrapper hgroup{
	display: flex;
	background: var(--theme-color1);
	color:#FFF;
	width:100%;
}
.ctaBlockWrapper h3{
	font-size: 1.78em;
	font-weight: 900;
	text-align: center;
	line-height: 1em;
	padding:0.4em;
	flex-grow:1;
}
.ctaBlockWrapper .ctaBlock:nth-child(1) h3{
	width:50%;
}

.ctaBlockWrapper img{
	display: block;
	margin-top:1.5em;
	width:90%;
}

.ctaBlockWrapper .btnStyle{
	margin-top:0.5em;
	font-size: 1.78em;
	background: var(--grdnt3);
	width:100%;
	max-width: 10em;
	animation: btnScaleAnim 0.5s ease-in infinite alternate;
}
.ctaBlockWrapper a:hover .btnStyle{
	background: var(--grdnt2);
	transform: scale(1.1);
}

@keyframes btnScaleAnim{
	to{
		transform: scale(1.1);
	}
}
/***************** 商品 end *********************/

/***************** 文章 start *********************/
.slick{
	margin:2em auto 0;
	position:relative;
	left:50%;
	transform: translateX(-50%);
	--gap:1em;
	width:calc(100% + var(--gap));
}

.slick-track{
	padding-bottom: 1em;
}

.slickPN {
	position: absolute;
	top: 50%;
	width: 2.5em;
	aspect-ratio:1;
	background: #FFF;
	border-radius: 50%;
	cursor: pointer;
	white-space: nowrap;
	text-indent: 200%;
	overflow: hidden;
	transition: background 0.2s;
	z-index: 1;
	--arrow-width:1.3em;
}
.slickPN.prev {
	left: 0;
	transform: translate(-140%, -50%) scaleX(-1);
}
.slickPN.next {
	right: 0;
	transform: translate(140%, -50%);
}
.slickPN:before{
	position: absolute;
	content: "";
	display: block;
	left: 55%;
	top:50%;
	color:var(--theme-color1);
	transform: translate(-50%, -50%);
	width:var(--arrow-width);
	border: 0.7em solid transparent;
	border-right:none;
	border-left:var(--arrow-width) solid currentColor;
	transition: color 0.2s;
}
.slickPN:hover{
	background:var(--theme-color1);
}
.slickPN:hover:before{
	color:#FFF;
}

.article{
	padding:0 calc(var(--gap) / 2);
}
.article a{
	display: flex;
	flex-direction: column;
	align-items: center;
	background: #FFF;
	padding-bottom: 0.8em;
	border-radius: var(--border-radius);
	overflow: hidden;
	color:#666;
	font-weight: normal;
	box-shadow: 0 0.2em 0.2em 0.1em rgba(0, 0, 0, 0.1);
}
.article a img{
	display: block;
	width:100%;
}
.article a h3{
	font-size: 0.7em;
	text-align: center;
	margin:0.8em 0.5em 0;
	height:4.5em;
	overflow: hidden;
	display:-webkit-box;
	-webkit-box-orient:vertical;
	-webkit-line-clamp:3;
}
.article a .btnStyle{
	font-size: 0.8em;
	font-weight:700;
	margin-top:0.75em;
	width:7.5em;
	background: var(--grdnt2);
}
.article a:hover .btnStyle{
	background: var(--grdnt3);
}
/***************** 文章 end *********************/
/************************************** product end ***************************************************/

/************************************** footer end ***************************************************/
footer{
	position: relative;
	z-index: 0;
}

#commonhealth_footer {
  text-align: center;
  background: #0067b2;
  padding: 25px 0;
}
.commonhealth_footer-channel {
  width: 100%;
  font-size: 0.9375rem;
  font-size: 15px;
  line-height: 1;
  text-align: center;
  margin-bottom: 5px;
}
.commonhealth_footer-channel ul {
  margin: 0;
  padding: 0;
}
.commonhealth_footer-channel li {
  display: inline-block;
  border-right: 1px solid #fff;
  padding-right: 12px;
  margin-right: 10px;
  margin-bottom: 10px;
}
.commonhealth_footer-channel li a {
  color: #b3cbe0;
  text-decoration: none;
  position: relative;
}
.commonhealth_footer-channel li a:after {
  content: "";
  background-color: #B3CBE0;
  width: 0;
  height: 1px;
  position: absolute;
  left: 50%;
  bottom: -3px;
  display: inline-block;
  transition: .3s;
}
.commonhealth_footer-channel li a:hover:after {
  width: 100%;
  left: 0;
}
.commonhealth_footer-channel li:last-child {
  border: none;
  margin-right: 0;
  padding-right: 0;
}
.commonhealth_footer-channel a:hover {
  color: #fff;
}
.commonhealth_footer-copyright {
  color: #b3cbe0;
  font-size: 14px;
  text-align: center;
  font-weight: 300;
}
.commonhealth_footer-copyright a {
  color: #fff;
  text-decoration: none;
  transition: .3s;
  display:inline-block;
  border-bottom:1px dotted #fff;
  padding-bottom:1px;
}
.commonhealth_footer-copyright a:hover {
  color: #fff;
}
.commonhealth_footer-copyright p {
  margin: 5px 0 0;
}
.commonhealth_footer-channel br, .commonhealth_footer-copyright br {
  display: none;
}

@media (max-width: 768px) {
  .commonhealth_footer-channel {
    font-size: 0.875rem;
    font-size: 14px;
  }
  .commonhealth_footer-channel li {
    padding-right: 5px;
    margin-right: 3px;
  }
  .commonhealth_footer-channel li:nth-child(5) {
    border-right: 0;
    padding-right: 0;
    margin-right: 0;
  }
  .commonhealth_footer-copyright {
    font-size: 0.8125rem;
    font-size: 13px;
    line-height: 1.75;
  }
  .commonhealth_footer-channel br, .commonhealth_footer-copyright br {
    display: inline-block;
  }
}

@media (max-width: 320px) {
  .commonhealth_footer-channel, .commonhealth_footer-copyright {
    font-size: 0.75rem;
    font-size: 12px;
  }
}
/************************************** footer end ***************************************************/


@media screen and (max-width:1023px){
	
	body{
		--header-height:50px;
	}
	
	h2{
		font-size: 1.25em;
	}
	
	p br{
		display: none;
	}
	
	/************************************** header start ***************************************************/
	header{
		padding:10px;
	}
	
	header nav{
		position: absolute;
		left:0;
		top:100%;
		right:0;
		width:100%;
		background:rgba(255, 255, 255, 0.95);
		display:none;
	}
	header nav ul{
		display: block;
		padding:2em;
		font-size: 1.2em;
	}
	header nav a{
		padding:0.5em 0;
	}
	header nav ul li+li{
		margin-left:0;
	}
	
	header .burgerBtn{
		position: relative;
		width:30px;
		height:36px;
		cursor:pointer;
		display: block;
	}
	header .burgerBtn span,
	header .burgerBtn span:before,
	header .burgerBtn span:after{
		position:absolute;
		left:0;
		display:block;
		width:100%;
		height:2px;
		background:#CCC;
		transition:all 0.2s;
	}
	header .burgerBtn span:before,
	header .burgerBtn span:after{
		content:"";
	}
	header .burgerBtn span{
		top:50%;
		transform:translateY(-50%);
	}
	header .burgerBtn span:before{
		top:-6px;
	}
	header .burgerBtn span:after{
		top:6px;
	}
	header.open .burgerBtn span{
		background:transparent;
	}
	header.open .burgerBtn span:before,
	header.open .burgerBtn span:after{
		top:0;
	}
	header.open .burgerBtn span:before{
		transform:rotate(-45deg);
	}
	header.open .burgerBtn span:after{
		transform:rotate(45deg);
	}
	/************************************** header end ***************************************************/
	
	/************************************** home start ***************************************************/
	.kv{
		aspect-ratio:1.35;
		background-size:135%;
		height: auto;
	}
	.home .CT{
		padding:1.5em;
	}
	/************************************** home end ***************************************************/
	
	/************************************** quiz start ***************************************************/
	.quiz{
		--offset-y:-2em;
	}

	/******************** 測驗 start *******************/
	.gameWrapper{
		padding:1.5em;
	}

	.game button{
		display: block;
		font-size: 1em;
		width:80%;
		margin:0 auto;
	}
	
	/*********** Q start ************/
	/**** img start ****/
	.Q .img span{
		aspect-ratio:2;
	}
	/**** img end ****/

	/**** txt start ****/
	.Q .txt span{
		font-size: 1.25em;
	}
	/**** txt end ****/

	/**** btn start ****/
	.Q .btn button+button{
		margin:0.6em auto 0;
	}
	/**** btn end ****/
	/*********** Q end ************/
	
	.result.show{
		background-size:90%;
	}
	
	.end img{
		width:100%;
	}
	.end button{
		margin-top:1em;
	}
	/******************** 測驗 end *******************/

	.quiz .group2{
		--offset-y2:-4em;
	}

	/***************** 台灣失智人口有多少 start ********************/
	.rateWrapper{
		padding:1.5em;
	}
	/***************** 台灣失智人口有多少 end ********************/
	/************************************** quiz end ***************************************************/
	
	/************************************** level start ***************************************************/
	.level{
		--offset-y:3em;
	}
	
	.level .CT{
		padding-top:0;
	}
	
	.level .intro{
		padding:1.5em;
	}
	.level .intro:after{
		right:50%;
		bottom: 100%;
		transform: translateX(50%);
		margin:0 0 -5% 0;
		width:35%;
		max-width: 130px;
		height:auto;
	}
	
	.level h2{
		margin-top:10%;
	}
	.level .CT > p{
		width:auto;
	}
	
	/**************** 階段 start ******************/
	/***** 內容 start *****/
	.tabCTWrapper{
		padding:1.5em;
	}

	.scene{
		justify-content: center;
		align-items: center;
	}
	.scene h3{
		font-size: 1.25em;
	}
	.scene img{
		width:80%;
		margin-top:1em;
	}
	.scene .txt{
		margin-top:1em;
		width:100%;
	}
	.scene .txt h4{
		font-size: 1.25em;
		text-align: center;
	}

	.scenario .expert{
		padding:1.5em 35% 1.5em 1.5em;
	}
	.scenario .expert:after{
		width:30%;
		margin-bottom: 0;
	}
	/***** 內容 end *****/
	/**************** 階段 end ******************/
	/************************************** level end ***************************************************/
	
	/************************************** care start ***************************************************/
	.care{
		padding:25% 0 35%;
	}

	.method{
		margin-top:30%;
	}
	.method .imgWrapper{
		width:100%;
		margin-top:1.2em;
	}
	/************************************** care end ***************************************************/
	
	/************************************** product start ***************************************************/
	.product{
		--offset-y:0em;
	}

	/***************** 商品 start *********************/
	.ctaBlockWrapper .ctaBlock:nth-child(1){
		display:none;
	}
	.ctaBlockWrapper .ctaBlock:nth-child(2){
		display:block;
	}
	
	.ctaBlockWrapper .ctaBlock a+a{
		margin-top:1.2em;
	}

	.ctaBlockWrapper h3{
		font-size: 1.25em;
	}

	.ctaBlockWrapper .btnStyle{
		font-size: 1.25em;
	}
	/***************** 商品 end *********************/

	/***************** 文章 start *********************/
	.slick{
		left: auto;
		transform: none;
		width:calc(90% + var(--gap));
	}

	.slickPN {
		width: 2em;
		--arrow-width:1em;
	}
	.slickPN.prev {
		transform: translate(-80%, -50%) scaleX(-1);
	}
	.slickPN.next {
		transform: translate(80%, -50%);
	}
	/***************** 文章 end *********************/
	/************************************** product end ***************************************************/
	
}