@charset "UTF-8";

.background-main {
	background-color: #000000;
	background-image: url("../images/background-main-280w.jpg");
	background-position: center center;
	background-repeat: no-repeat;
	display: block;
	width: 100vw;
	height: 100vh;
	overflow: hidden;
}
.div-popup {
	height: 165px;
	position:relative;
	width: 220px;
  }
  .img-popup {
	height: 165px;
	width: 220px;
  }
  .fancybox-wrap{
	height: 165px !important;
	width: 220px !important;
}
.fancybox-skin{
	position: relative;
	background: transparent;
}
.fancybox-close {
    position: absolute;
    top: -18px;
    right: -18px;
    width: 36px;
    height: 36px;
    cursor: pointer;
	z-index: 8040;
	background-image: url('../images/fancybox_sprite.png');
    background-size: 44px 152px;
}
body{
	overflow: hidden;
}
.d-flex{
	display: flex;
}

@media (min-width: 321px) {
	.background-main {
		background-image: url("../images/background-main-320w.jpg");
	}
}
@media (min-width: 360px) {
	.div-popup {
		height: 240px;
		position:relative;
		width: 320px;
	  }
	  .img-popup {
		height: 240px;
		width: 320px;
	  }
	  .fancybox-wrap{
		height: 240px !important;
		width: 320px !important;
	}
}
@media (min-width: 576px) {
	.background-main {
		background-image: url("../images/background-main-576w.jpg");
	}
	.div-popup {
		height: 300px;
		position:relative;
		width: 400px;
	  }
	  .img-popup {
		height: 300px;
		width: 400px;
	  }
	  .fancybox-wrap{
		height: 300px !important;
		width: 400px !important;
	}
}
@media (min-width: 768px) {
	.background-main {
		background-image: url("../images/background-main-1024.jpg");
	}
	.div-popup {
		height: 450px;
		position:relative;
		width: 600px;
	  }
	  .img-popup {
		height: 450px;
		width: 600px;
	  }
	  .fancybox-wrap{
		height: 450px !important;
		width: 600px !important;
	}
}
@media (min-width: 1680px) {
	.background-main {
		background-image: url("../images/background-main-1680w.jpg");
	}
}
@media screen and (min-width:320px) and (max-width:667px) and (orientation:landscape) {
	.background-main {
		background-image: url("../images/background-main-530w-land.jpg");
	}
}
@media screen and (min-width:668px) and (max-width:854px) and (orientation:landscape) {
	.background-main {
		background-image: url("../images/background-main-600w-land.jpg");
	}
}
@media screen and (min-width:855px) and (max-width:1024px) and (orientation:landscape) {
	.background-main {
		background-image: url("../images/background-main-1024.jpg");
	}
}