.themeExtra{
	--color1:#F48E51;
	--color1_2:#e57a3a;
	--color1_3:rgba(244, 142, 81, 0.35);
	
	--color2:#9BBB59;
	--color2_2:#87a941;
	--color2_3:rgba(155, 187, 89, 0.35);
	
	--color3:#F0D375;
	--color3_2:#dcbd57;
	--color3_3:rgba(240, 211, 117, 0.35);
}

.groupWrapper{
	margin:0 auto;
	max-width: 1200px;
}

/********************************* groupNav start ******************************************/
.groupNav{
	margin-top:5%;
	display:flex;
	justify-content:space-between;
}
.groupNav li{
	width:32.83%;
}
.groupNav li a{
	display:block;
	font-size: 0;
	aspect-ratio:3.28;
	background-size:cover;
	background-position:center;
	background-repeat:no-repeat;
	transition: background-color 0.2s;
}
.groupNav li:nth-child(1) a{ background-image:url(../images/groupNavP1.png); background-color: var(--color1);}
.groupNav li:nth-child(2) a{ background-image:url(../images/groupNavP2.png); background-color: var(--color2);}
.groupNav li:nth-child(3) a{ background-image:url(../images/groupNavP3.png); background-color: var(--color3);}
.groupNav li:nth-child(1) a:hover{ background-color: var(--color1_2);}
.groupNav li:nth-child(2) a:hover{ background-color: var(--color2_2);}
.groupNav li:nth-child(3) a:hover{ background-color: var(--color3_2);}
/********************************* groupNav end ******************************************/

/********************************* groupCT start ******************************************/
.groupCT{
	margin-top:5%;
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
}
.groupCT > *{
	margin-top:1%;
}

/*************** 項目 start *********************/
.groupCT a,
.groupCT a:hover{
	color:#333;
}
.groupCT a{
	width:24.16%;
	display:flex;
	flex-direction:column;
}
.groupCT a .img{
	border:1px solid #AAA;
	border-bottom:none;
	overflow:hidden;
}
.groupCT a .img img{
	display:block;
	width:100%;
	border:none;
	transform:scale(0.9);
	transition:transform 0.5s;
}
.groupCT a:hover .img img{
	transform:none;
}
.groupCT a .txt{
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:center;
	text-align:center;
	font-size:1.07em;
	padding:1.5em 1em;
	flex-grow:1;
}
#g1 a .txt{ background:var(--color1_3);}
#g2 a .txt{ background:var(--color2_3);}
#g3 a .txt{ background:var(--color3_3);}
.groupCT a .txt em{
	font-style:normal;
}
.groupCT a .txt i{
	font-style:normal;
	margin-top:0.5em;
}
.groupCT a .txt i u{
	color:#600;
	text-decoration:none;
}
.groupCT a .txt i del{
	color:#999;
	font-size:0.8em;
	margin-left:0.9em;
}

/****** 顏色色塊 start *******/
.color{
	margin-top:1em;
	display: none;
}
.color ul li{
	border-color:transparent;
}
.color ul li:hover,
.color ul li.now{
	background: #FFF;
}
/****** 顏色色塊 end *******/
/*************** 項目 end *********************/
/********************************* groupCT end ******************************************/

/********************************* nokeOnly start ******************************************/
.nokeOnly{
	--highlight-color:#fd8a49;
	position: relative;
	max-width: 1920px;
	margin:5% auto 0;
	padding:8.42% 24.73% 6.31%;
	background: #f4edda url(../images/nokeOnly_bg.gif) no-repeat center bottom/contain;
	font-size:clamp(1em, 1.1vw, 1.5em);
}

.nokeOnly .ctWrapper{
	position: relative;
	background: #f8f4e9;
	border-radius:2em;
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
	padding:14.5% 12.5%;
	color:#666;
	font-weight: bold;
	display: flex;
	flex-direction: column;
}

.nokeOnly h3{
	position: absolute;
	left:50%;
	top:0;
	transform: translate(-50%, -50%);
	line-height: 1em;
	font-size: 2.2em;
	white-space: nowrap;
}
.nokeOnly h3 span{
	display: block;
	color:#FFF;
	background: #9da250;
	padding:0.35em 1em;
	border-radius:0.9em;
}

.nokeOnly h4{
	align-self:center;
	color:var(--highlight-color);
	line-height: 1em;
	font-size: 1.7em;
	white-space: nowrap;
	border-bottom: 0.1em solid;
	padding-bottom: 0.3em;
}

.nokeOnly time{
	font-size: 1.25em;
	font-weight: bold;
	line-height: 1em;
	margin:2.8em 0 0 -0.2em;
}

.nokeOnly ul,
.nokeOnly ul li+li{
	margin-top:2em;
}
.nokeOnly ul{
	padding-left: 1.2em;
	list-style: disc;
}
.nokeOnly ul li h5{
	font-size: 1.3em;
	color:#000;
}
.nokeOnly ul strong{
	color:var(--highlight-color);
}

.nokeOnly p{
	line-height: 1.6em;
	margin:0.25em 0 0;
}

.nokeOnly h6{
	display: inline-block;
	font-size: 1em;
	color:#FFF;
	background: #776255;
	line-height: 1em;
	margin-top:0.5em;
	border-radius:0.5em;
	padding:0.3em 0.55em;
}

.nokeOnly .cta{
	font-size: 0.95em;
	margin:3.5em 0 0 0.5em;
	line-height: 1.8em;
}
.nokeOnly .cta a{
	color:#000;
	display:inline-flex;
	align-items: center;
	margin-left: 0.2em;
	transition: color 0.2s;
	transform: translateY(0.2em);
}
.nokeOnly .cta a:hover{
	color:var(--highlight-color);
}
.nokeOnly .cta a:before{
	content:"";
	display: block;
	width:1.35em;
	aspect-ratio:1;
	background: url(../images/phone.svg) no-repeat center/contain;
}
.nokeOnly .cta a span{
	display: inline-block;
	margin-left:0.4em;
	font-size: 0.95em;
}
.nokeOnly .cta ol{
	list-style: decimal;
	padding-left:1.2em;
}

/************* planeObj start ****************/
.planeObj{
	position: absolute;
	left:0;
	top:0;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}
.planeObj.o1{
	width:22.08%;
	aspect-ratio:1.92;
	margin:2.91% 0 0 -26.04%;
	background-image: url(../images/nokeOnly_plane1.png);
	animation:plane1 2s ease-in-out infinite alternate;
}
.planeObj.o2,
.planeObj.o3{
	aspect-ratio:1.88;
	background-image: url(../images/nokeOnly_plane2.png);
}
.planeObj.o2{
	width:13.85%;
	margin:10.1% 0 0 -7.18%;
	animation:plane1 1.5s ease-in-out infinite alternate;
}
.planeObj.o3{
	width:17.29%;
	margin:-3.33% 0 0 114.79%;
	animation:plane2 2.5s ease-in-out infinite alternate;
}
@keyframes plane1{
	to{
		transform: translateY(-40%);
	}
}
@keyframes plane2{
	to{
		transform: translateY(25%);
	}
}
/************* planeObj end ****************/

/************* btmObj start ****************/
.nokeOnly .btmObj{
	position: absolute;
	left:0;
	bottom:0;
	width:100%;
	aspect-ratio:12.66;
	background: url(../images/nokeOnly_btm.png) no-repeat center bottom/contain;
}
.nokeOnly .btmObj:before,
.nokeOnly .btmObj:after{
	position: absolute;
	content:"";
	display: block;
	left:0;
	bottom:0;
	width:100%;
	aspect-ratio:12.66;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}
.nokeOnly .btmObj:before{
	width:5.89%;
	aspect-ratio:1;
	margin:0 0 5.68% 13.78%;
	background-image: url(../images/nokeOnly_bird.png);
}
.nokeOnly .btmObj:after{
	width:20.1%;
	aspect-ratio:0.78;
	margin:0 0 5.36% 71.52%;
	background-image: url(../images/nokeOnly_post.png);
}
/************* btmObj end ****************/
/********************************* nokeOnly end ******************************************/


@media screen and (max-width:1023px){
	
	/********************************* nokeOnly start ******************************************/
	.nokeOnly{
		margin-top:10%;
		padding:20% 5%;
		overflow: hidden;
	}

	.nokeOnly .ctWrapper{
		padding:20% 5%;
	}
	.nokeOnly .ctWrapper ul br{
		display: none;
	}

	.nokeOnly h3{
		font-size: 2em;
	}

	.nokeOnly h4{
		font-size: 1.5em;
	}

	/************* planeObj start ****************/
	.planeObj.o1{
		margin:-11.2% 0 0 -10.04%;
	}
	.planeObj.o2{
		display: none;
	}
	.planeObj.o3{
		margin:18.67% 0 0 86.79%;
	}
	/************* planeObj end ****************/

	/************* btmObj start ****************/
	.nokeOnly .btmObj{
		aspect-ratio:8;
		background-size: cover;
	}
	.nokeOnly .btmObj:before{
		width:12%;
		margin:0 0 9.68% 5.78%;
	}
	.nokeOnly .btmObj:after{
		width:30%;
		margin:0 0 0.36% 81.52%;
	}
	/************* btmObj end ****************/
	/********************************* nokeOnly end ******************************************/
	
}


@media screen and (max-width:767px){
	
	/********************************* groupCT start ******************************************/
	.groupCT{
		margin-top:10%;
	}
	.groupCT > *{
		margin-top:2.5%;
	}
	
	/*************** 項目 start *********************/
	.groupCT a{
		width:48.5%;
	}
	.groupCT a .txt{
		font-size:1em;
	}
	/*************** 項目 end *********************/
	/********************************* groupCT end ******************************************/
	
}