.themeExtra{
	--highlight-color:#7c6453;
	--theme-color1:#838474;
	--theme-color2:#DDDDD3;
	--theme-color3:#F7F7F7;
	font-family: Arial;
	color:var(--theme-color1);
}

.cs::-webkit-scrollbar{
	width:10px;
}
.cs::-webkit-scrollbar-thumb{
	border:2px solid transparent;
	border-radius:10px;
	background-color: var(--theme-color2);
	background-clip: content-box;
}
.cs::-webkit-scrollbar-thumb:hover{
	background-color: var(--highlight-color);
}

.cta{
	color:#FFF;
	background: var(--highlight-color);
	line-height: 1em;
	padding:0.8em 2.5em;
	display: flex;
	justify-content: center;
	align-items: center;
	transition: background 0.2s;
}
.cta:after{
	content:"";
	display: block;
	width:0.7em;
	height:0.7em;
	border:1px solid;
	border-top:none;
	border-left:none;
	transform: rotate(-45deg);
	margin-left:0.5em;
	transition: transform 0.2s;
}
a.cta:hover{
	color:#FFF;
	background: var(--theme-color1);
}
a.cta:hover:after{
	transform: translateX(50%) rotate(-45deg);
}

/************************************** result start ***************************************/
.result{
	background: var(--theme-color3);
	display: flex;
}

/******* tabBlock start *********/
.result .tabBlock{
	width:17.5%;
	background: currentColor;
}

.result .tabWrapper{
	position: relative;
	margin-top:23%;
	--item-size:4.8em;
	--item-gap:1.5em;
	--corner-size:1em;
}

.result .tab{
	position: absolute;
	right:0;
	top:0;
	width:69.04%;
	height:var(--item-size);
	background: var(--theme-color3);
	border-radius:calc(var(--item-size) / 2);
	border-top-right-radius:0;
	border-bottom-right-radius:0;
	pointer-events: none;
	transition: margin-top 0.2s ease-out;
}
.result.r1 .tab{ margin-top:0;}
.result.r2 .tab{ margin-top:calc((var(--item-size) + var(--item-gap)) * 1);}
.result.r3 .tab{ margin-top:calc((var(--item-size) + var(--item-gap)) * 2);}
.result.r4 .tab{ margin-top:calc((var(--item-size) + var(--item-gap)) * 3);}
.result.r5 .tab{ margin-top:calc((var(--item-size) + var(--item-gap)) * 4);}
.result.r6 .tab{ margin-top:calc((var(--item-size) + var(--item-gap)) * 5);}
.result .tab:before,
.result .tab:after{
	position: absolute;
	content: "";
	display: block;
	right:0;
	width:var(--corner-size);
	height:var(--corner-size);
	background: url(../images/tabCorner.svg) no-repeat center/contain;
}
.result .tab:before{
	bottom:100%;
}
.result .tab:after{
	top:100%;
	transform: scaleY(-1);
}

.result .tabWrapper ul{
	position: relative;
}
.result .tabWrapper li{
	display: flex;
	justify-content: center;
	cursor: pointer;
}
.result .tabWrapper li+li{
	margin-top:var(--item-gap);
}
.result .tabWrapper li:before{
	content:"";
	display: block;
	width:var(--item-size);
	height:var(--item-size);
	background-image: url(../images/resultTab.svg);
	background-repeat: no-repeat;
	background-position-y: top;
	background-size: 600%;
	transition: transform 0.2s;
}
.result .tabWrapper li:nth-child(1):before{ background-position-x: 0%;}
.result .tabWrapper li:nth-child(2):before{ background-position-x: 20%;}
.result .tabWrapper li:nth-child(3):before{ background-position-x: 40%;}
.result .tabWrapper li:nth-child(4):before{ background-position-x: 60%;}
.result .tabWrapper li:nth-child(5):before{ background-position-x: 80%;}
.result .tabWrapper li:nth-child(6):before{ background-position-x: 100%;}

.result .tabWrapper li:hover:before,
.result.r1 .tabWrapper li:nth-child(1):before,
.result.r2 .tabWrapper li:nth-child(2):before,
.result.r3 .tabWrapper li:nth-child(3):before,
.result.r4 .tabWrapper li:nth-child(4):before,
.result.r5 .tabWrapper li:nth-child(5):before,
.result.r6 .tabWrapper li:nth-child(6):before{
	transform: scale(1.1);
}
.result.r1 .tabWrapper li:nth-child(1):before,
.result.r2 .tabWrapper li:nth-child(2):before,
.result.r3 .tabWrapper li:nth-child(3):before,
.result.r4 .tabWrapper li:nth-child(4):before,
.result.r5 .tabWrapper li:nth-child(5):before,
.result.r6 .tabWrapper li:nth-child(6):before{
	background-position-y: bottom;
}
/******* tabBlock end *********/

/******* ctBlock start *********/
.result .ctBlock{
	width:82.5%;
	padding:3% 8.33%;
	overflow:auto;
}

.result h4{
	font-size: 2.28em;
	line-height: 1em;
	padding-bottom:0.8em;
	border-bottom:1px solid;
}

.result .tabCTWrapper{
	margin-top:4%;
	overflow: hidden;
}

.result .tabCT{
	justify-content: space-between;
	align-items: flex-start;
	display:none;
}
.result.r1 .tabCT:nth-child(1),
.result.r2 .tabCT:nth-child(2),
.result.r3 .tabCT:nth-child(3),
.result.r4 .tabCT:nth-child(4),
.result.r5 .tabCT:nth-child(5),
.result.r6 .tabCT:nth-child(6){
	display:flex;
}

/**** 左 start ****/
.result .main{
	width:37.97%;
}
.result .main img{
	display: block;
	width:100%;
	cursor: pointer;
}
.result .main h5{
	text-align: center;
	font-size: 1.85em;
	line-height: 1em;
	color:var(--highlight-color);
	margin-top:1em;
	cursor: pointer;
}
.result .main h5 > *{
	display: block;
}
.result .main h5 span{
	font-size: 0.95em;
	font-weight: normal;
	letter-spacing: 0.05em;
}
.result .main h5 span sup{
	line-height: 0;
}
.result .main h5 em{
	font-style: normal;
	letter-spacing: 0.1em;
	margin-top:0.5em;
}
.result .btnBlock{
	margin-top:3.5em;
	display: flex;
	justify-content: space-between;
}
.result .cta{
	font-size: 1.28em;
	padding-top:1em;
	flex-grow:1;
}
/**** 左 end ****/

/**** 右 start ****/
.result .tabCT > ul{
	width:48.1%;
	display:flex;
	flex-wrap:wrap;
	justify-content: space-between;
	align-items: flex-start;
}
.result .tabCT > ul > li{
	width:42.1%;
}
.result .tabCT > ul > li:nth-child(n+3){
	margin-top:5%;
}
.result .tabCT > ul > li img{
	display: block;
	width:100%;
	border-radius:1.57em;
}
.result .tabCT li ul{
	font-size: 1.05em;
	color:var(--theme-color4);
	margin:1em 0 0 0.5em;
	min-height:4em;
}
.result .tabCT li ul li{
	line-height: 1em;
	display: flex;
	align-items: center;
}
.result .tabCT li ul li:before{
	content: "";
	display: block;
	width:5px;
	height:5px;
	flex-shrink: 0;
	background: var(--highlight-color);
	border-radius:50%;
	margin-right:0.5em;
}
.result .tabCT li ul li+li{
	margin-top:0.5em;
}
/**** 右 end ****/
/******* ctBlock end *********/
/************************************** result end ***************************************/


@media screen and (min-width:1024px) and (max-width:1220px){
	
	/************************************** test start ***************************************/
	.result{
		font-size: 1.14vw;
	}
	/************************************** test end ***************************************/

}


@media screen and (max-width:1023px){
	
	/************************************** result start ***************************************/
	.result{
		font-size: 2.2vw;
		flex-direction: column;
	}

	/******* tabBlock start *********/
	.result .tabBlock{
		width:auto;
		height:11em;
		display: flex;
		justify-content: center;
	}

	.result .tabWrapper{
		margin-top:0;
		--item-size:5.5em;
		--item-gap:1em;
		--corner-size:0.5em;
	}

	.result .tab{
		right:auto;
		top:auto;
		left:0;
		bottom:0;
		width:var(--item-size);
		height:85%;
		border-radius:calc(var(--item-size) / 2);
		border-bottom-left-radius:0;
		border-bottom-right-radius:0;
		transition: margin-left 0.2s ease-out;
	}
	.result.r1 .tab,
	.result.r2 .tab,
	.result.r3 .tab,
	.result.r4 .tab,
	.result.r5 .tab,
	.result.r6 .tab{ margin-top:0;}
	.result.r1 .tab{ margin-left:0;}
	.result.r2 .tab{ margin-left:calc((var(--item-size) + var(--item-gap)) * 1);}
	.result.r3 .tab{ margin-left:calc((var(--item-size) + var(--item-gap)) * 2);}
	.result.r4 .tab{ margin-left:calc((var(--item-size) + var(--item-gap)) * 3);}
	.result.r5 .tab{ margin-left:calc((var(--item-size) + var(--item-gap)) * 4);}
	.result.r6 .tab{ margin-left:calc((var(--item-size) + var(--item-gap)) * 5);}
	.result .tab:before,
	.result .tab:after{
		right:auto;
		top:auto;
		bottom:0;
	}
	.result .tab:before{
		right:100%;
	}
	.result .tab:after{
		left:100%;
		transform: scaleX(-1);
	}

	.result .tabWrapper ul{
		display: flex;
		height:100%;
	}
	
	.result .tabWrapper li{
		align-items: center;
	}
	.result .tabWrapper li+li{
		margin-top:0;
		margin-left:var(--item-gap);
	}
	/******* tabBlock end *********/

	/******* ctBlock start *********/
	.result .ctBlock{
		width:auto;
		height:85%;
		padding:10% 5%;
	}

	.result h4{
		text-align: center;
	}

	.result.r1 .tabCT:nth-child(1),
	.result.r2 .tabCT:nth-child(2),
	.result.r3 .tabCT:nth-child(3),
	.result.r4 .tabCT:nth-child(4),
	.result.r5 .tabCT:nth-child(5),
	.result.r6 .tabCT:nth-child(6){
		display:block;
	}

	/**** 左 start ****/
	.result .main{
		width:70%;
		margin:0 auto;
	}
	.result .cta{
		font-size: 1.8em;
		padding-left:1em;
		padding-right:1em;
	}
	/**** 左 end ****/

	/**** 右 start ****/
	.result .tabCT > ul{
		margin-top:15%;
		width:auto;
	}
	.result .tabCT > ul > li{
		width:45%;
	}
	.result .tabCT li ul{
		font-size: 1.6em;
	}
	/**** 右 end ****/
	/******* ctBlock end *********/
	/************************************** result end ***************************************/
	
}