.design-container .face-box,
.design-container .case-box {
	margin-bottom: 1.56vw;
}

.design-container {
	display: flex;
	justify-content: space-between;
	padding-right: 3.12vw;
	color: #231F20;
}

.design-container .right-box {
	width: 57%;
}

.design-container .center {
	width: 12.22vw;
	height: 46.8vw;
	position: relative;
	/* margin-left: 2.6vw; */
}

.design-container .center img {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}

.design-container .center .bg-img {
	background: #fff;
	width: 12.22vw;
	height: 14.95vw;
}

.design-container .center .case-img {
	top: 50%;
	transform: translateY(-50%);
}

.design-container .center .case-img,
.design-container .center .case-img-next {
	width: 12.22vw;
	height: 14.95vw;
	z-index: 13;
}

.design-container .center .case-img {
	z-index: 40;
}

.design-container .center .face-img,
.design-container .center .face-img-next {
	width: 10.912vw;
	height: 13.406vw;
	left: 0.254vw;
	z-index: 12;
}

.design-container .center .face-img {
	z-index: 50;
}

.strap-line,
.strap-line-next {
	width: 7.5vw;
	height: 100%;
	background-repeat: repeat-y;
	background-size: 100% !important;
	margin-left: 1.96vw;
	z-index: 8;
	position: relative;
}

.strap-line-next {
	position: absolute !important;
	top: 0;
	z-index: 1 !important;
}

.design-container .tab-item {
	cursor: pointer;
}

.design-container .left,
.design-container .right {
	flex: 1;
}

.design-container .right {
	padding-top: 9.552vw;
	padding-left: 4.26vw;

}

.design-container .right .title {
	font-size: 1.04vw;
	font-family: AvenirNext-Bold;
}

.design-container .face-box .rows,
.design-container .case-box .rows {
	display: flex;
	position: relative;
}

.design-container .face-box .rows img {
	width: 4.264vw;
	height: 5.2vw;
}

.design-container .face-box .r-col {
	margin-right: 1.872vw;
	text-align: center;
	flex-shrink: 0;
	font-size: 0.728vw;
}

.design-container .face-box:first-child .r-col-tips {
	width: 10.556vw;
	font-size: 0.936vw;
	text-align: left;
	margin-right: 0;
}

.design-container .face-box:first-child .r-col-tips a {
	font-size: 0.624vw;
	color: #00B4A1;
	text-decoration: underline;
}

.design-container .face-box .outer-border,
.design-container .case-box .outer-border {
	width: 4.784vw;
	    height: 5.72vw;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 0.26vw;
}

.design-container .face-box .active-border {
	border: 1px solid #00B4A1;
	width: 4.784vw;
	height: 5.72vw;
	border-radius: 1.352vw;
	position: absolute;
	top: 0;
}

.design-container .case-box .r-col {
	margin-right: 1.872vw;
	text-align: center;
	flex-shrink: 0;
	font-size: 0.728vw;
}

.design-container .case-box .rows img {
	width: 4.264vw;
	height: 5.2vw;
}

.design-container .case-box .active-border {
	border: 1px solid #00B4A1;
	width: 4.784vw;
	height: 5.72vw;
	border-radius: 0.652vw;
	position: absolute;
	top: 0;
}

.design-container .left .title {
	font-size: 3.12vw;
	color: #294798;
	font-family: AvenirNext-Regular;
}

.design-container .left {
	padding-top: 20.8vw;
	text-align: left;
}

.design-container .left .more-btn {
	font-size: 1.248vw;
	color: #fff;
	background: #00B4A1;
	border-radius: 1.3vw;
	display: inline-block;
	height: 2.6vw;
	line-height: 2.6vw;
	min-width: 7.8vw;
	text-align: center;
}

.design-container .strap-box {
	position: relative;
}

.design-container .strap-box .rows {
	display: flex;
}

.design-container .strap-box .rows img {
	width: 1.56vw;
	height: 1.56vw;
}

.design-container .strap-box .r-col {
	/* margin-right: 1.872vw; */
	text-align: center;
	flex-shrink: 0;
	font-size: 0.728vw;
	width: 4.58vw;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.design-container .strap-box .r-col:nth-child(1) {
	/* margin-right: 0.9vw; */
}

.design-container .strap-box .r-col.big-width {
	width: 4.58vw;
	/* margin-right: 0.9vw; */
}

.design-container .strap-box .r-col.small-grap {
	/* margin-right: 0.9vw; */
}

.design-container .strap-box .active-border {
	border: 1px solid #00B4A1;
	width: 2.08vw;
	height: 2.08vw;
	border-radius: 0vw;
	position: absolute;
	left: 1.25vw;
}

.design-container .strap-box .outer-border {
	width: 2.08vw;
	height: 2.08vw;
	display: flex;
	align-items: center;
	justify-content: center;
}


.design-container .mt-box .rows img {
	width: 1.56vw;
	height: 1.56vw;
}

.design-container .mt-box .r-col {
	margin-right: 1.872vw;
	text-align: center;
	flex-shrink: 0;
	font-size: 0.728vw;
	width: 2.08vw;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.design-container .mt-box .r-col.small-grap {
	margin-right: 0.9vw;
}

.design-container .mt-box .r-col.big-width {
	width: 4.58vw;
	margin-right: 0.9vw;
}

.design-container .mt-box .active-border {
	border: 1px solid #00B4A1;
	width: 2.08vw;
	height: 2.08vw;
	border-radius: 0vw;
	position: absolute;
	left: 0;
}

.design-container .mt-box .outer-border {
	width: 2.08vw;
	height: 2.08vw;
	display: flex;
	align-items: center;
	justify-content: center;
}

@media only screen and (max-width:991px) {
	.design-container .left .title {
		font-size: 6.51vw;
		margin-bottom: 6vw;
		padding: 0px 9.3vw;
	}

	.design-container {
		/* padding: 0px 9.3vw; */
		padding: 0px 0vw;
	}

	.design-container .center {
		width: 28.83vw;
		height: 115.2975vw;
	}

	.design-container .center .case-img,
	.design-container .center .case-img-next {
		width: 28.83vw;
		height: 35.15vw;
		top: 43%;
	}

	.strap-line,
	.strap-line-next {
		width: 18.5vw;
		height: 100%;
		background-repeat: repeat-y;
		background-size: 100% !important;
		margin-left: 4.56vw;
		z-index: 8;
		position: relative;
	}

	.design-container .center .face-img,
	.design-container .center .face-img-next {
		width: 25.812vw;
		    height: 31.406vw;
		    left: 0.54vw;
		    top: 43%;
	}

	.design-container .right-box {
		width: 100%;
		padding-left: 9.3vw;
	}

	.design-container .tabs {
		display: flex;
		justify-content: space-between;
		font-size: 3.255vw;
		font-family: AvenirNext-Regular;
		position: relative;
		transition: 1.5s all ease;
		margin: 0px 9.3vw 6.975vw 9.3vw;
	}

	.design-container .tabs .active-border {
		height: 1px;
		background: #00B4A1;
		position: absolute;
		left: 0px;
		width: 23.35vw;
		bottom: 0px;
		display: none;
	}

	.design-container .tabs .tab-item {
		transition: 1.5s all ease
	}

	.design-container .tabs .active {
		font-family: AvenirNext-Bold;
		transition: 1.5s all ease
	}

	.design-container .right {
		padding: 0px;
		/* padding-left: 14.6475vw; */
	}

	.design-container .face-box {
		padding-left: 14.6475vw;
		padding-right: 9.3vw;
	}

	.design-container .face-box .rows,
	.design-container .case-box .rows {
		display: block;
	}



	.design-container .face-box .r-col,
	.design-container .case-box .r-col {
		font-size: 2.79vw;
		margin-right: 0px;
		margin-bottom: 2.23vw;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}

	.design-container .face-box .rows img {
		width: 18.6vw;
		height: 22.5525vw;
	}

	.design-container .face-box .outer-border,
	.design-container .case-box .outer-border {
		margin-bottom: 2.23vw;
		    width: 20.925vw;
		    height: 24.645vw;
	}

	.design-container .face-box:first-child .r-col-tips {
		font-size: 2.0925vw;
		width: 100%;
		text-align: center;
		padding: 0px 2.23vw;
	}

	.design-container .face-box .active-border {
		width: 20.925vw;
		height: 24.645vw;
		left: 50%;
		transform: translateX(-50%);
		border-radius: 6.045vw;
	}

	.design-container .face-box:first-child .r-col-tips a {
		font-size: 2.0925vw;
	}

	.design-container .case-box .rows img {
		width: 18.6vw;
		height: 22.6vw;
	}

	.design-container .case-box .active-border {
		width: 21vw;
		height: 24.645vw;
		left: 50%;
		transform: translateX(-50%);
		border-radius: 4.4175vw;
	}

	.design-container .strap-box {
		margin-left: 5vw;
		margin-right: 2vw;
	}

	.design-container .strap-box .r-col {
		width: auto;
		margin: 0px;
		flex: 0 0 30%;
		font-size: 3.255vw;
		white-space: nowrap;
		margin-bottom: 5.8vw;
	}

	.design-container .strap-box .r-col:nth-child(1) {
		margin: 0px;
	}

	.design-container .strap-box .outer-border {
		width: 8.975vw;
		height: 8.975vw;
	}

	.design-container .strap-box .outer-border img {
		width: 6.975vw;
		height: 6.975vw;
	}

	.design-container .strap-box .active-border {
		width: 8.975vw;
		height: 8.975vw;
		left: 3.8vw;
	}

	.design-container .strap-box .rows {
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.design-container .strap-box .r-col.big-width {
		width: 4.58vw;
		margin-right: 0.9vw;
	}
}