@charset "utf-8";

@media screen and (min-width:375px) and (max-width:1080px){
	
	@font-face{font-family:"Gabriola"; src:url(../font/Gabriola.ttf);}

	@font-face{font-family:"Arita-dotum"; src:url(../font/아리따-돋움(TTF)-Light.ttf);}

	.skw-pages{display:none;}
	.skw-page{display:none;}

	iframe{
			 width:100vw;
			 height:100vh;
			}

	.box{
		width: 94%;
		height: 500px;
	}

	.model{
		height:250px;
	}

	.details p{
		font-size: 12px;
		width: 282px;
		font-family:"Arita dotum-Light";
		font-weight: bold;
		color:#000;
		text-align: center;
		margin-top: 20px;
		}
	
	body{
		margin:0px;
		padding:0px;
	}

	ul{
		list-style:none;
	}
	a{
		text-decoration:none;
		color:#003162;
		margin-bottom:5px;
		font-family:"Gabriola";
		font-size:17px;
	}
	.container{
		width:100%;
		height: 100vh;
		background-color:#000;
		display:flex;
		justify-content: center;
		align-items: center;
		
	}
	.box{
		background-color:#fff;
		border-radius: 10px;
		box-shadow: 2px 10px 12px rgba(0,0,0,0.5);
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
		box-sizing: border-box;
		margin: 20px 15%;
		float:left;
	}
	.model{
		max-height: 100%;
		max-width: 100%;
	}
	.details{
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 300px;
		bottom:27px;
		position:relative;
	}

	.marvel{
		color:#32323e;
		font-weight: bold;
		letter-spacing: 2px;
		font-family: "Gabriola";
		font-size: 20px;
	}
	.logo{
		height: 60px;
	}
	.box:hover{
		background-color: #fff;
		transform-style: preserve-3d;
		transform: scale(1.02);
		transition: all ease 0.3s;
	}
	.box:hover .marvel{
		color:#118ed9;
		transition: all ease 0.5s;
	}
		}