*{
	font-family: "Pretendard", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
	font-size:18px;
	margin:0;
	padding:0;
}
*:focus {
	outline: 0!important;
}
html, body{
	overflow:hidden
}
html{overflow-y: scroll;}
ul, ol{list-style:none;list-style-position: inside;margin:0;padding:0;}
.list-maker{
	overflow:hidden;
	display:flex;
	justify-content: center;
	align-items:center;
	flex-wrap: wrap;
}
.list-maker > li{
	width:50px;
	height:50px;
	display:flex;
	justify-content: center;
	align-items: center;
	margin:4px;
	border-radius: 10px;
	background-color:#fff;
	border:1px solid #e1e1e1;
}
.list-maker > li img{
	width:70%;
	height:auto;
	cursor:pointer;
}
li.item-maker.item-sel{
	border:1px solid #000;
}

span.item-card{display:block;}
span.item-card > span{
	float:right;
}
span.item-card > span span.unit{
	margin-left:0.2rem;
}


#logo-top{
	display:inline-block;
	width:400px;
	text-align:center;
	color:#333;
	/* text-shadow: -1px 0 #333, 0 1px #333, 1px 0 #333, 0 -1px #333; */
}
#container-list-model h2{margin-bottom:3rem;}
#container-list-model h2 > span{display:block;}
#container-list-model h2 > span:first-child{
	padding:1rem;
}
#container-list-model h2 > span:first-child > img{display:block;height:100px;width:auto;margin:0 auto;}
#container-list-model h2 > span:nth-child(2n){ font-size:2rem;text-align: center; }

.item-contents > img{
	width:100%;
}


.card-image{
	width:100%;height:350px;
	overflow:hidden;display:flex;justify-content:center; align-items: center;
}

.item-model{
	margin-bottom:2rem;
	padding:1rem;
	transform : scale(0.92);
}
.item-model .card{
	border:0;
	cursor:pointer;
}
.item-model.active.card{
	border:1px solid #000;
}

.item-model .modelName{
	display:block;
	font-weight:900;
	border-bottom:1px dashed #ccc;
	text-align: center;
	padding-bottom:.5rem;
	margin-bottom:.5rem;
	font-size:1.2rem;
}


.carousel-item{height:10rem}
.carousel-item >  img{
	position:absolute;
	width:auto;
	height:10rem;
	left:50%;
	transform: translate(-50%, 0);
}


/* Fix */
.modal-open{
	overflow: auto;
	padding-right:0 !important;
}
.modal.fade,
.modal.show{
	overflow: auto;
	padding-right:0 !important;
}
.modal-dialog{
	max-width: 90%!important;
	width:90%;
	margin:auto;
}

.nav-link{
	color:#333;
}
.nav-pills .nav-link.active, .nav-pills .show>.nav-link{
	background-color:#fae100;
	color:#333;
	font-weight:900;
}

.modal-title > i::before{
	margin-right:0.5rem;
}


footer .container{
	display : flex;
	flex-direction : column;
}
footer .container dt{
	text-align: center;
}
footer .container dd{
	margin-top:1rem;
}
footer .container p{
	width:100%;
	text-align: center;
	margin-bottom:.3rem;
}

#close-form{}

/* form modal */
.modal-header{
	border-bottom:0;
	padding-top:.5rem;
}
.modal-body dl dt,
.modal-body dl dd{
	text-align: center;
}
.modal-footer{
	display:flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
}
.input-group-text{
	border-radius: 0;
}

#form-model{margin-bottom:.2rem;}
#form-model-exp{margin-bottom:.2rem;font-size:12px!important;}
#form-model-opt,
#form-model-opt span{font-size:12px!important;}
#form-model-opt{margin-top:1rem;margin-bottom:.2rem;}
#form-model-opt span{display:block;color:#000;font-weight:bold;margin:0 auto;text-align: center;}


/* @Media */
@media (min-width: 576px) {
	*{
		font-size:14px;
	}
	#logo-top{
		text-align:left;
	}
	.card-image{
		height:150px;
	}

	.modal-dialog{
		width:480px;
		font-size:16px;
	}


	.modal-header i{
		font-size:16px;
	}

	footer .container dl{
		display:table;
	}

	footer .container dt,
	footer .container dd{
		display:table-cell;
		text-align: left;
		vertical-align: middle;

	}
	footer .container dt{
		width:30%;
	}
	footer .container dd{
		margin-top:0;
	}
	footer .container dd p{
		text-align: left;
	}

	.carousel-item{
		height:32rem;
	}
	.carousel-item >  img{
		width:auto;
		height:32rem;
	}
}

@media (min-width: 1200px) {
	.container, .container-lg, .container-md,
	.container-sm, .container-xl,
	.container-xxl {
    /* max-width: 1320px; */
		max-width: 960px;
	}

	.modal-dialog{
	}

}

@media (min-width: 1400px) {
	.container, .container-lg, .container-md,
	.container-sm, .container-xl,
	.container-xxl {
    /* max-width: 1320px; */
		max-width: 960px;
	}

	.modal-dialog{
	}

}