@charset "utf-8";
@font-face {
	src: url("../CSS/font/VITRO\ CORE\ OTF.OTF");
	font-family: "vitro1";
}

@font-face {
	src: url("../CSS/font/VITRO\ INSPIRE\ OTF.OTF");
	font-family: "vitro2";
}

@font-face {
	src: url("../CSS/font/VITRO\ PRIDE\ OTF.OTF");
	font-family: "vitro3";
}

@font-face {
	src: url("../CSS/font/KOHIBaeumOTF.otf");
	font-family: "KOH1";
}

@font-face {
	src: url("../CSS/font/KOHIBaeum.ttf");
	font-family: "KOH2";
}

@font-face {
	src: url("../CSS/font/PretendardVariable.ttf");
	font-family: "Pre";
}
.side-nav {
	width: 25vw;
	height: 100vh;
	background-color: rgba(0, 0, 0, 0.85);
	position: fixed;
	top: 0%;
	right: 0%;
	z-index: 9999;
}
.logo-btn {
	font-size: 30px;
	position: absolute;
	right: 1.5%;
	top: 4%;
	z-index: 9998;
}
.logo-btn a.mo {
	display: none;
}
.logo-btn img {
	width: 57%;
}
.menu-btn {
	font-size: 30px;
	position: absolute;
	right: 5%;
	top: 8%;
	z-index: 9998;
}
.side-nav h2,
p {
	color: #fff;
}

.side-nav h2 {
	font-size: 35px;
	margin-bottom: 25px;
	font-family: "vitro1";
}

.side-nav p {
	font-size: 18px;
	margin-bottom: 18px;
	font-family: "vitro3";
}

.side-nav p:hover {
	color: #b7a876;
	
}

.nav-wrap {
	padding: 20% 0 0 12%;
}

.side-nav>img {
	position: absolute;
	right: 17%;
	top: 5%;
}

.side-nav img:hover {
	text-decoration: none;
	cursor: pointer;
}
@media(max-width: 1500px){
    .side-nav{
		width: 30vw;
	}
}

@media(max-width: 1200px){
    .side-nav{
		width: 40vw;
		height: 100%;
		position:fixed;
	}
}
@media(max-width: 768px){
    .side-nav{
        width: 100%;
        z-index: 9999;
    }
	.logo-btn {
		position: absolute;
		right: 65px;
		top: 3%;
		z-index: 9998;
	}
	.logo-btn a.pc {
		display: none;
	}
	.logo-btn a.mo {
		display: block;
	}
	.logo-btn img {
		width: 114px;
	}
}