@charset "utf-8"

@font-face {
    font-family: 'Minguk-Regular';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_twelve@1.1/Minguk-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');

* { 
font-family: Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, 'Helvetica Neue', 'Segoe UI', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif;
}

*{margin:0; padding:0;}
ul,li{list-style:none;}
a{text-decoration:none; color:#000;}
img{border:0;}
.cf:after{
	content:'';
	display:block;
	clear:both;
}

@media screen and (max-width:1000px){
	#wrap header{
		height:250px;
	}

	#wrap header .img_box img{
		display:block;
		width:100%;
		height:auto;
	}
}

@media screen and (max-width:765px){
	
	#wrap header{
		height:220px;
	}
	
	nav{
		width:100%;
		height:80px;
	}
	
	nav h1{
		width:50px;
		height:60px;
	}
	
	.back{
		width:100%;
		height:80px;
	}
	
	nav .menu{
		display:none;
	}
	
	nav #btn_wrap{
		width:30px;
		height:30px;
		position:absolute;
		right:30px;
		top:50%;
		transform:translateY(-50%);
		cursor:pointer;
	}
	
	nav #btn_wrap .bar{
		width:90%;
		height:2px;
		border-radius:50%;
		background-color:#999;
		margin-top:5px;
	}
	
	#wrap header .img_box p{
		font-size:30px;
	}
	
	#wrap section{
		padding:50px 0;
	}
	
	#wrap section .p_type{
		width:90%;
		margin:0 5%;
	}
	
	#wrap section .p_type .title p.top{
		font-size:25px;
	}
	
	#wrap section .p_type .title p.under{
		font-size:17px;
	}
	
	#wrap section .p_type .pp{
	width:70%;
	margin:5% 15%;
	box-sizing:border-box;
	float:left;
}
	
	footer .info{
		padding-bottom:20px;
	}
	
	footer .info .left{
		width:100%;
		float:none;
	}
	
	footer .info .right{
		width:100%;
		float:none;
	}
	
	
	.modal{
		display:block;
		position:fixed;
		top:0;
		left:0;
		width:100%;
		height:100%;
		background-color:rgba(0,0,0,0.5);
		overflow:hidden;
		transition:all 0.5s;
		opacity:0;
		pointer-events:none;
		z-index:98;
	}


	.modal.on{
		opacity:1;
		pointer-events:auto;
	}
	
	.modal .modalbox{
		position:absolute;
		top:0;
		right:-300px;
		background-color:#fff;
		width:300px;
		height:2000px;
		transition:all 0.5s;
	}
	
	.modal .modalbox.on{
		right:0;
	}
	
	.modal .modalbox ul{
		width:100%;
		height:100%;
	}
	
	.modal .modalbox ul li{
		padding-left:20px;
		box-sizing:border-box;
		width:100%;
		height:60px;
		font-size:18px;
		line-height:60px;
		text-align:left;
		border-bottom:1px solid #eee;
	}
	
	.modal .modalbox .closed{
		position:absolute;
		top:20px;
		right:320px;
		width:30px;
		height:30px;
		cursor:pointer;
	}
	
	.modal .modalbox .closed .c1{
		width:100%;
		height:5px;
		background-color:#fff;
		border-radius:5px;
		position:absolute;
		top:50%;
		left:50%;
	}
	
	.modal .modalbox .closed .c1.b1{
		transform:translate(-50%,-50%) rotate(45deg);
	}
	
	.modal .modalbox .closed .c1.b2{
		transform:translate(-50%,-50%) rotate(-45deg);
	}
	
	nav .search{
		display:none;
	}

}