.cozy_wrap {
	position: relative;
	width: 100%;
	max-width: 1040px;
	margin: 30px auto;
	padding: 0 0 40px 40px;
	background: url(../images/bg.png) no-repeat 50% 100%;
	background-size: contain;
	-moz-user-select: none;
	-webkit-user-select: none;
}

.cozy_wrap .title {
	position: relative;
	width: 328px;
	height: 90px;
}

.cozy_wrap .title>div {
	line-height: 100%;
}

.cozy_wrap .title .h1 {
	font-family: Arial;
	font-size: 86px;
	color: #f5f5f5;
}

.cozy_wrap .title .h3 {
	position: absolute;
	right: 0;
	bottom: 0;
	font-size: 35px;
	color: #000;
}

.controlNav {
	float: left;
	position: relative;
	margin-top: 5px;
	width: 356px;
	height: 287px;
	background: url(../images/control.png) no-repeat 50% 50%;
}

.controlNav .gender {
	position: relative;
	width: 128px;
	height: 128px;
	z-index: 2;
}

.controlNav .gender .mode {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100px;
	height: 116px;
	margin-top: -58px;
	margin-left: -50px;
	background: url(../images/girl_head.png) no-repeat 50% 50%;
	background-size: cover;
}

.controlNav.boy .gender .mode {
	background: url(../images/boy_head.png) no-repeat 50% 50%;
	background-size: cover;
}

.controlNav .gender .btn_wrap {
	position: absolute;
	left: 50%;
	bottom: 0;
	width: 120px;
	height: 34px;
	margin-left: -60px;
	border-radius: 13px;
	background: linear-gradient(to bottom, #ebe9e9 41%, #f2f0f0 98%, #f2f0f0 100%);
	box-shadow: 0px -1px 0px 0px rgb(219, 217, 217);
}

.gender .btn_wrap .btn {
	width: 114px;
	height: 26px;
	margin-top: 3px;
	margin-left: 3px;
	border-radius: 10px;
	background: linear-gradient(to bottom, #d2d2d2 41%, #a2a2a2 98%, #a2a2a2 100%);
	cursor: pointer;
}

.btn_wrap .btn>div {
	position: relative;
	float: left;
	width: 50%;
	height: 100%;
	text-align: center;
	line-height: 26px;
	text-shadow: 0px 1px 0px rgba(232, 232, 232, 0.73);
}

.btn_wrap .btn>.girl {
	border-radius: 10px 0 0 10px;
	background: linear-gradient(to bottom, #fe819e 41%, #c3667b 98%, #c3667b 100%);
	color: #753a3d;
	text-indent: 20px;
}

.btn_wrap .btn>.boy {
	border-radius: 0 10px 10px 0;
	background: none;
	color: #753a3d;
	text-indent: -20px;
}

.controlNav.boy .btn_wrap .btn>.girl {
	background: none;
}

.controlNav.boy .btn_wrap .btn>.boy {
	background: linear-gradient(to bottom, #4be3fe 41%, #3dafc3 98%, #3dafc3 100%);
}

.btn>div>.ringLight {
	position: absolute;
	top: -1px;
	width: 25px;
	height: 25px;
	border-radius: 50%;
	background: linear-gradient(120deg, #dcdcdc 0%, #fefefe 48%, #dcdcdc 100%);
	box-shadow: -3px 3px 4px -1px rgba(121, 121, 121, 0.65);
}

.btn>.girl>.ringLight {
	left: -2px;
}

.btn>.boy>.ringLight {
	right: -2px;
}

.girl>.ringLight>div,
.boy>.ringLight>div {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 15px;
	height: 15px;
	margin-top: -7.5px;
	margin-left: -7.5px;
	border-radius: 50%;
}

.girl>.ringLight>div {
	background: url(../images/ringLight_g_g.png) no-repeat 50% 50%;
	background-size: cover;
	box-shadow: 3px 4px 10px 0px rgba(250, 66, 115, .5);
}

.boy>.ringLight>div {
	background: url(../images/ringLight_b_g.png) no-repeat 50% 50%;
	background-size: cover;
}

.controlNav.boy .girl>.ringLight>div {
	background: url(../images/ringLight_g_b.png) no-repeat 50% 50%;
	background-size: cover;
	box-shadow: none;
}

.controlNav.boy .boy>.ringLight>div {
	background: url(../images/ringLight_b_b.png) no-repeat 50% 50%;
	background-size: cover;
	box-shadow: 3px 4px 10px 0px rgba(66, 166, 250, .5);
}

.controlNav .carAngle_wrap {
	position: absolute;
	right: 19px;
	bottom: 19px;
	width: 220px;
	height: 220px;
	border-radius: 50%;
	background-color: #dfdfdf;
}

.carAngle_wrap .carAngle {
	position: relative;
	width: 200px;
	height: 200px;
	margin-top: 10px;
	margin-left: 10px;
	border-radius: 50%;
	background-color: #fff;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
	cursor: pointer;
	overflow: hidden;
}

.carAngle_wrap .carAngle>div {
	position: relative;
	float: left;
	width: 50%;
	height: 50%;
	box-sizing: border-box;
}

.carAngle_wrap .carAngle>div.on {
	background-color: #fbf180;
	box-shadow: inset -2px -2px 10px 0px rgba(0, 0, 0, 0.14);
}

.carAngle_wrap .carAngle>div.on:nth-child(2) {
	box-shadow: inset 2px -2px 5px 0px rgba(0, 0, 0, 0.14);
}

.carAngle_wrap .carAngle>div.on:nth-child(3) {
	box-shadow: inset -2px 2px 5px 0px rgba(0, 0, 0, 0.14);
}

.carAngle_wrap .carAngle>div.on:last-child {
	box-shadow: inset 2px 2px 5px 0px rgba(0, 0, 0, 0.14);
}

.carAngle_wrap .carAngle>div::before {
	content: '';
	display: block;
	position: absolute;
	width: 1px;
	height: 38px;
	background-color: #dfdfdf;
}

.carAngle_wrap .carAngle>div:first-child::before {
	top: 5px;
	right: 0;
}

.carAngle_wrap .carAngle>div:last-child::before {
	left: 0;
	bottom: 5px;
}

.carAngle_wrap .carAngle>div:nth-child(2)::before,
.carAngle_wrap .carAngle>div:nth-child(3)::before {
	width: 38px;
	height: 1px;
}

.carAngle_wrap .carAngle>div:nth-child(2)::before {
	right: 5px;
	bottom: 0;
}

.carAngle_wrap .carAngle>div:nth-child(3)::before {
	left: 5px;
}

.carAngle>div>div {
	text-align: center;
	line-height: 100px;
	-webkit-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	transform: rotate(-45deg);
}

.carAngle_wrap .angleTip {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100px;
	height: 100px;
	margin-top: -50px;
	margin-left: -50px;
	border-radius: 50%;
	background: url(../images/angleTip_g.png) no-repeat 50% 50%;
	background-size: cover;
	box-shadow: 2px 2px 10px 0px rgba(0, 0, 0, .43);
	color: #fff;
}

.controlNav.boy .carAngle_wrap .angleTip {
	background: url(../images/angleTip_b.png) no-repeat 50% 50%;
	background-size: cover;
}

.carAngle_wrap .angleTip div {
	height: 100%;
	text-align: center;
	line-height: 100px;
}

.scaleBox {
	float: right;
	position: relative;
	width: 515px;
	height: 394px;
	margin: -20px 45px 0 0;
	border-left: 1px solid #dedede;
	border-bottom: 1px solid #dedede;
	/*touch-action: none;*/
}

.scaleBox::before,
.scaleBox::after {
	content: '';
	display: block;
	position: absolute;
	width: 6px;
	height: 6px;
	margin-top: -3px;
	margin-left: -3px;
	border-radius: 50%;
	background-color: #dedede;
}

.scaleBox::after {
	bottom: -3px;
}

.scaleBox span::after {
	content: 'cm';
}

.scaleBox .maxCm,
.scaleBox .minCm {
	position: absolute;
	left: -23px;
	width: 46px;
	height: 16px;
	font-family: Arial;
	font-size: 14px;
	text-align: center;
	color: #555;
}

.scaleBox .maxCm {
	top: -35px;
}

.scaleBox .minCm {
	bottom: -35px;
}

.scaleBox .model {
	position: absolute;
	left: 50px;
	bottom: -4px;
	width: 127px;
	height: 358px;
	background: url(../images/model_girl.png) no-repeat 50% 50%;
	background-size: contain;
}

.scaleBox.boy .model {
	background: url(../images/model_boy.png) no-repeat 50% 50%;
	background-size: contain;
}

.scaleBox .car {
	position: absolute;
	left: 63%;
	bottom: -18px;
	width: 338px;
	height: 276px;
	margin-left: -169px;
	background: url('../showcase/360_170901/9.png') no-repeat 50% 50%;
	background-size: contain;
}

.scaleBox .sc_wrapper {
	position: absolute;
	left: 0;
	padding: 10px;
	margin-top: -21px;
	margin-left: -21px;
	cursor: pointer;
	z-index: 2;
}

.scaleBox .scaleControl {
	width: 10px;
	height: 10px;
	border: 6px solid #f9788d;
	border-radius: 50%;
	background-color: #fff;
}

.scaleBox.boy .scaleControl {
	border: 6px solid #5bd0e5;
}

.scaleBox .scaleControl .arrowTop,
.scaleBox .scaleControl .arrowBottom {
	width: 13px;
	height: 10px;
	margin-top: -20px;
	margin-left: -2px;
	background: url(../images/arrow_t.png) no-repeat 50% 50%;
	background-size: cover;
	opacity: 1;
}

.scaleBox .scaleControl .off.arrowTop,
.scaleBox .scaleControl .off.arrowBottom {
	opacity: 0;
}

.scaleBox .scaleControl .arrowBottom {
	margin-top: 30px;
	background: url(../images/arrow_b.png) no-repeat 50% 50%;
	background-size: cover;
}

.scaleBox .scaleControl span {
	display: block;
	position: absolute;
	top: 50%;
	right: 45px;
	width: 50px;
	height: 20px;
	margin-top: -10px;
	font-family: Arial;
	font-size: 18px;
	text-align: center;
	color: #eb8a9a;
}

.scaleBox.boy .scaleControl span {
	color: #8ac5eb;
}

.cozy_wrap::after {
	content: '';
	display: block;
	clear: both;
}

.overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 3;
}

.overlay.is-hidden {
	display: none;
}

.overlay__img {
	background-image: url('/storage/app/media/Motors/Cozy/images/overlay_desktop.jpg?v=1902271826');
	width: 100%;
	height: 100%;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: 50% 100%;
}

.overlay__close-link {
	display: block;
	position: absolute;
	bottom: 4%;
	left: 37%;
	width: 22%;
	height: 50px;
}

@media screen and (max-width: 990px) {
	.cozy_wrap {
		width: 554px;
		padding: 0 12% 5.8vw;
		background: url(../images/bg_m.png) no-repeat 50% 100%;
		background-size: contain;
	}
	.controlNav,
	.scaleBox {
		float: none;
	}
	.overlay__img {
		background-image: url('/storage/app/media/Motors/Cozy/images/overlay_mobile.jpg?v=1902271826');
	}
	.overlay__img {
		background-position: 0% 50%;
	}
	.overlay__close-link {
		bottom: 3%;
		left: 50%;
		transform: translateX(-50%);
		width: 50%;
	}
}

@media screen and (max-width: 767px) {
	.cozy_wrap {
		width: 76%;
	}
	.cozy_wrap .title {
		width: 42.71vw;
		height: 11.72vw;
	}
	.cozy_wrap .title .h1 {
		font-size: 11.2vw;
	}
	.cozy_wrap .title .h3 {
		font-size: 4.56vw;
	}
	.controlNav {
		width: 76.56vw;
		height: 61.59vw;
		background-size: contain;
	}
	.controlNav .gender {
		width: 27.4vw;
		height: 27.4vw;
	}
	.controlNav .gender .mode {
		width: 21.48vw;
		height: 24.87vw;
		margin-top: -12.435vw;
		margin-left: -10vw;
	}
	.controlNav .gender .btn_wrap {
		width: 25.78vw;
		height: 6.5vw;
		margin-left: -12.89vw;
		border-radius: 2vw;
	}
	.gender .btn_wrap .btn {
		width: 23.83vw;
		height: 5vw;
		margin-top: 0.5vw;
		margin-left: 1.04vw;
		border-radius: 1.3vw;
	}
	.btn_wrap .btn>div {
		font-size: 3.26vw;
		line-height: 4.8vw;
	}
	.btn_wrap .btn>.girl {
		border-radius: 1.3vw 0 0 1.3vw;
		text-indent: 2.6vw;
	}
	.btn_wrap .btn>.boy {
		border-radius: 0 1.3vw 1.3vw 0;
		text-indent: -2.6vw;
	}
	.btn>div>.ringLight {
		width: 4.8vw;
		height: 4.8vw;
		box-shadow: -0.39vw 0.39vw 0.52vw -1px rgba(121, 121, 121, 0.65);
	}
	.btn>.girl>.ringLight {
		left: -0.5vw;
	}
	.btn>.boy>.ringLight {
		right: -0.5vw;
	}
	.girl>.ringLight>div,
	.boy>.ringLight>div {
		width: 2.76vw;
		height: 2.76vw;
		margin-top: -1.38vw;
		margin-left: -1.38vw;
	}
	.girl>.ringLight>div {
		box-shadow: 0.39vw 0.52vw 1.3vw 0px rgba(250, 66, 115, .5);
	}
	.controlNav.boy .boy>.ringLight>div {
		box-shadow: 0.39vw 0.52vw 1.3vw 0px rgba(66, 166, 250, .5);
	}
	.controlNav .carAngle_wrap {
		right: 4.1vw;
		bottom: 4.1vw;
		width: 47.27vw;
		height: 47.27vw;
	}
	.carAngle_wrap .carAngle {
		width: 42.97vw;
		height: 42.97vw;
		margin-top: 2.08vw;
		margin-left: 2.08vw;
	}
	.carAngle>div>div {
		font-size: 4vw;
		line-height: 22vw;
	}
	.carAngle_wrap .carAngle>div::before {
		height: 9.37vw;
	}
	.carAngle_wrap .carAngle>div:first-child::before {
		top: 1vw;
	}
	.carAngle_wrap .carAngle>div:last-child::before {
		bottom: 1vw;
	}
	.carAngle_wrap .carAngle>div:nth-child(2)::before,
	.carAngle_wrap .carAngle>div:nth-child(3)::before {
		width: 9.37vw;
	}
	.carAngle_wrap .carAngle>div:nth-child(2)::before {
		right: 1vw;
	}
	.carAngle_wrap .carAngle>div:nth-child(3)::before {
		left: 1vw;
	}
	.carAngle_wrap .angleTip {
		width: 19.21vw;
		height: 19.21vw;
		margin-top: -9.605vw;
		margin-left: -9.605vw;
		box-shadow: 0.26vw 0.26vw 1.3vw 0px rgba(0, 0, 0, .43);
	}
	.carAngle_wrap .angleTip div {
		font-size: 3.65vw;
		line-height: 19.21vw;
	}
	.scaleBox {
		width: 80.21vw;
		height: 68.10vw;
		margin: -2.6vw 0 0 0;
	}
	.scaleBox .maxCm,
	.scaleBox .minCm {
		left: -2.99vw;
		width: 5.99vw;
		height: 2.08vw;
		font-size: 12px;
	}
	.scaleBox .model {
		left: 6.51vw;
		bottom: -0.52vw;
		width: 22.01vw;
		height: 61.85vw;
	}
	.scaleBox .car {
		bottom: -3vw;
		width: 58vw;
		height: 47vw;
		margin-left: -29vw;
	}
	.scaleBox .scaleControl span {
		right: 6.5vw;
		width: 6.51vw;
		height: 2.6vw;
		margin-top: -1.3vw;
		font-size: 2.34vw;
	}
	.overlay__close-link {
		bottom: 0.5%;
		left: 51%;
		transform: translateX(-50%);
		width: 54%;
		height: 10vw;
	}
}

@media screen and (max-width: 610px) {
	.scaleBox .scaleControl span {
		right: 7.5vw;
	}
}

@media screen and (max-width: 500px) {
	.scaleBox .scaleControl span {
		right: 8.5vw;
	}
}

@media screen and (max-width: 400px) {
	.scaleBox .scaleControl span {
		right: 11vw;
	}
}