@charset "utf-8";

@import "//cdn.jsdelivr.net/npm/font-kopub@1.0/kopubdotum.min.css"; /* font weight 300 400 700*/


body{
	background-color: #fff;
	padding: 0;
	margin: 0;
}
#wrapper{
	margin: 0 auto;
}
.nav-box{
	color : #ffffff;
	height: 50px;
	margin-top: 35px;
	margin-left: 35px;
	margin-right: 35px;
}
.logo{
	float: left;
	height: 30px;
	z-index: 20;
}
.sitelogo{
	height: 100%;
	z-index: 20;
}

.navbutton{
	float: right;
	position: relative;
	z-index: 50;
}
/* 네비버튼시작 */
input[id="menuicon"]{
	display: none;
}

input[id="menuicon"] + label{
	display: block;
	width: 50px;
	height: 25px;
	position: relative;
	cursor: pointer;
}
input[id="menuicon"] +label span {
	display: block;
	position: absolute;
	width: 100%;
	height: 4px;
	border-radius: 0px;
	background: #000;
	transition: all .35s;
}
input[id="menuicon"] + label span:nth-child(1){
	top:0;
}
input[id="menuicon"] + label span:nth-child(2){
	top:50%;
	transform: translateY(-50%);
}
input[id="menuicon"] + label span:nth-child(3){
	bottom: 0;
	width: 40%;
	right: 0;
}
input[id="menuicon"]:checked + label{
	display: block;
	top: 40px;
	width: 50px;
	right: 35px;
	height: 25px;
	position: fixed;
	cursor: pointer;
	z-index: 20;

}
input[id="menuicon"]:checked +label span {
	display: block;
	position: absolute;
	width: 100%;
	height: 4px;
	border-radius: 0px;
	background: #fff;
	transition: all .35s;
	z-index: 50;
}
input[id="menuicon"]:checked + label span:nth-child(1){
	top: 50%;
	transform: translateY(-50%) rotate(45deg);
}
input[id="menuicon"]:checked + label span:nth-child(2){
	bottom: 50%;
	transform: translateY(-50%) rotate(-45deg);
}
input[id="menuicon"]:checked + label span:nth-child(3){
	opacity: 0;
}
/* 네비버튼종료 */
div[class="sidebar"]{
	width: 20%;
	height:100%;
	background-color: rgba(0,0,0,0.40);
	position: fixed;
	top: 0;
	right: -20%;
	z-index: 5;
	transition: all .35s;
}
input[id=menuicon]:checked + label + div{
	right: 0px;
}
.sidebutton{

}
.sidebutton ul{
	right: 35px;
	top: 135px;
	position: absolute;
	list-style:none;
}
.sidebutton ul li{
	text-align: right;
}
.sidebutton .menulink{
	text-decoration: none;
	color: #fff;
	font-family: 'KoPub Dotum', sans-serif;
	line-height: 1.5em;
	font-size: 2em;
	transition: all .35s;
}
.sidebutton .menulink:hover{
	text-decoration: none;
	color: #ccc;
	font-family: 'KoPub Dotum', sans-serif;
	line-height: 1.5em;
	font-size: 2em;
	transition: all .35s;
}
.sidebar-footer-right{
	float: right;
	text-align: right;
	color: #fff;
	position: absolute;
	right: 35px;
	bottom: 40px;
	font-family: 'KoPub Dotum', sans-serif;
	font-weight: 100;
	font-size: 12px;

}


@media screen and (min-width:320px) and (max-width: 1400px) {

		.nav-box{
			color : #fff;
			height: 80px; 
			margin-top: 35px;
			margin-left: 35px;
			margin-right: 35px;
		}
		.logo{
			position: absolute;
			float: left;
			height: 45px;
		}
		.navbutton{
		float: right;
		position: relative;
		z-index: 100;
		top: -10px;
		}
	
		input[id="menuicon"] + label{
			display: block;
			top: 10px;
			width: 88px;
			height: 44px;
			position: relative;
			cursor: pointer;

		}
			input[id="menuicon"]:checked + label{
			display: block;
			top: 40px;
			width: 88px;
			right: 35px;
			height: 44px;
			position: fixed;
			cursor: pointer;
			z-index: 20;

		}
		input[id="menuicon"] +label span {
			display: block;
			position: absolute;
			width: 100%;
			height: 5px;
			border-radius: 0px;
			background: #000;
			transition: all .35s;
			z-index: 150;
		}
 
		div[class="sidebar"]{
			width: 60%; /*원본에서 수정*/
			height:100%;
			background: rgba(0,0,0,0.40);
			position: fixed;
			top: 0;
			right: -60%;
			z-index: 5;
			transition: all .35s;
		}
		input[id="menuicon"]:checked + label span:nth-child(1){
			top: 50%;
			height: 5px;
			transform: translateY(-50%) rotate(45deg);
		}
		input[id="menuicon"]:checked + label span:nth-child(2){
			bottom: 50%;
			height: 5px;
			transform: translateY(-50%) rotate(-45deg);
		}
		input[id="menuicon"]:checked + label span:nth-child(3){
			height: 5px;
			opacity: 0;
		}

		.sidebutton .menulink{
			text-decoration: none;
			color: #fff;
			font-family: 'KoPub Dotum', sans-serif;
			line-height: 1.5em;
			font-size: 3em;
			transition: all .35s;
		}
		.sidebutton .menulink:hover{
			text-decoration: none;
			color: #999;
			font-family: 'KoPub Dotum', sans-serif;
			line-height: 1.5em;
			font-size: 3em;
			transition: all .35s;
		}
			.sidebar-footer-right{
			float: right;
			text-align: right;
			color: #fff;
			position: absolute;
			right: 35px;
			bottom: 35px;
			font-family: 'KoPub Dotum', sans-serif;
			font-size: 18px;
		}
	
}