body {
	margin: 0;
	padding: 0; }

	.v3d-wrap {
		.sr-only {
			overflow: hidden;
			position: absolute;
			width: 1px;
			height: 1px;
			font-size: 12px;
			clip: rect(1px, 1px, 1px, 1px); }
	}
	.is-bg-load-complete.v3d-wrap:before {
		content: ' ';
		display: block;
		position: absolute;
		top: 142px;
		right: 120px;
		width: 49px;
		height: 26px;
		background: url(../images/ico-loading.svg) no-repeat;
		background-size: 100% auto;
		z-index: 90;
	}

  @use "sass:math";
  .viewer-gesture {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.85);
	z-index: 200; }
	.viewer-gesture__content {
	  position: absolute;
	  left: 50%;
	  top: 50%;
	  max-width: 80%;
	  width: 572px;
	  height: 138px;
	  background: url(../images/gesture-pc.png) no-repeat;
	  background-size: 100% auto;
	  transform: translate(-50%, -50%); }
	.viewer-gesture__close-btn {
	  position: absolute;
	  left: 0;
	  right: 0;
	  margin: 0 auto;
	  bottom: 44px;
	  border-radius: 20px;
	  width: 40px;
	  height: 40px;
	  border: 1px solid #818181;
	  background-color: #000; }
	.viewer-gesture .ico-x {
	  display: block;
	  margin: auto;
	  width: 16px;
	  height: 16px; }
	  .viewer-gesture .ico-x:before, .viewer-gesture .ico-x:after {
		content: '';
		display: block;
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		top: 0;
		margin: auto;
		border-radius: 1px;
		width: 20px;
		height: 2px;
		background-color: #fff;
		overflow: hidden; }
	  .viewer-gesture .ico-x:before {
		transform: rotate(45deg); }
	  .viewer-gesture .ico-x:after {
		transform: rotate(-45deg); }

  html.touch .viewer-gesture__content {
	width: 68.88889vw;
	height: 78.61111vw;
	max-width: 320px;
	max-height: 400px;
	background-image: url(../images/gesture-mo.png); }

  .v3d-loader {
	position: absolute;
	width: 100%;
	height: 100%;
	pointer-events: none; }
	.v3d-loader__background {
	  display: block;
	  -webkit-backdrop-filter: blur(15px);
			  backdrop-filter: blur(15px);
	  background-color: rgba(255, 255, 255, 0.5);
	  position: absolute;
	  top: 0;
	  left: 0;
	  width: 100%;
	  height: 100%;
	  opacity: 1;
	  transition: opacity .3s ease-in-out;
	  z-index: 80; }
	  .v3d-loader__background.sr-only + .v3d-loader__background-image {
		opacity: 0;
	  }
	  .v3d-loader__background-image img {
		display: none !important;
	  }
	  .v3d-loader__background-image {
		display: block;
		position: relative;
		padding: 0;
		margin: 0;
		width: 100%;
		height: 100%;
		opacity: 1;
		transition: opacity .3s ease-in-out; }
		.v3d-loader__background-image img {
		  max-width: 100%;
		  height: auto; }
	.v3d-loader-icon {
	  position: absolute;
	  top: 50%;
	  left: 50%;
	  width: 0;
	  height: 0;
	  z-index: 90;
	  animation: fadeInOut 1.7s infinite; }
	  .is-bg-load-complete.v3d-loader-icon:after {
		content: "";
		position: absolute;
		top: 50%;
		left: 50%;
		width: 49px;
		height: 26px;
		background-image: url(../images/ico-loading-white.svg);
		background-size: 100% auto;
		background-repeat: no-repeat;
		background-position: 50% 50%;
		transform: translate(-50%, -50%);
		z-index: 200;
		animation: fadeInOut 1.7s infinite; }
		.v3d-loader-text {
			position: absolute;
			left: 50%;
			transform: translateX(-50%);
			margin-top: 20px;
			color: #fff;
		}

  @keyframes fadeInOut {
	0% {
	  opacity: 0; }
	50% {
	  opacity: 1; }
	100% {
	  opacity: 0; } }

  html {
	width: 100%;
	height: 100%; }

  html.rtl {
	direction: rtl; }

  body:fullscreen,
  body.is-fullscreen {
	background: #f7f7f7 !important; }

  .v3d {
	width: 100%;
	height: 100%; }

  canvas {
	outline: none; }

  .v3d-wrap {
	position: absolute;
	width: 100%;
	height: 100%; }

  .v3d-viewer {
	width: 100%;
	height: 100%; }
	.v3d-viewer--control .v3d-msg-smaple {
	  padding-bottom: 40px !important; }
	.v3d-viewer--compare .v3d-msg-smaple {
	  padding-top: 40px !important; }

  .v3d-dev-text {
	position: fixed;
	bottom: 0;
	left: 0;
	z-index: 99999;
	background: #000;
	color: #fff;
	font-size: 12px;
	opacity: 0.5;
	word-break: break-all;
	transition: all 0.3s ease;
	transform: translateY(100%); }
	.v3d-dev-text.is-active {
	  transform: translateY(0); }

  @keyframes blink {
	0% {
	  opacity: 1; }
	100% {
	  opacity: 0.5; } }

  canvas {
	outline: none; }

  .v3d-wrap {
	position: absolute;
	width: 100%;
	height: 100%; }

  .v3d-modelviewer {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	transition: opacity 0.3s; }
	.v3d-modelviewer--active {
	  opacity: 1; }

  .v3d-viewer--desolve {
	opacity: 1;
	transition: opacity .3s ease-in-out; }

	@media screen and (max-width: 767px) {
		.is-bg-load-complete.v3d-wrap:before {
			top: 16px;
			right: 24px;
			width: 30px;
			height: 16px;
		}
		.v3d-loader__background {
			-webkit-backdrop-filter: blur(3px);
					backdrop-filter: blur(3px);
			background-color: rgba(255, 255, 255, 0.8);
		}
	}