@charset "UTF-8";

#slider {
	max-width: var(--max-width);
	height: 460px !important;
	margin: auto;
}
/*
article {
	border-left: none;
}
*/
section {
	margin-top: 15px;
}

#article1 {
	padding: 0px;
	margin-bottom: 20px;
}
/*
#main {
	display:flex;
	margin-bottom:5px;
}
*/
/* 바로가기 */
#shortcut {
	max-width: var(--max-width);
	display: flex;
	justify-content: center;
}

#shortcut1, #shortcut2, #shortcut3 {
	font-size: 1.4rem;
	font-weight: bold;
	text-align: center;
	display: flex;
}

#shortcut1 > div, #shortcut2 > div, #shortcut3 > div {
	width: 200px;
	align-items: center;
}

#shortcut1 img, #shortcut2 img, #shortcut3 img {
	width: 140px;
	align-items: center;
}

#info {
	width: 100%;
	display: flex;
}

#info1 {
	width: 33%;
	background-color: var(--bg-color-middle);
	color: var(--font-color-high);
	display: flex;
	flex-direction: column;
	padding: 10px;
}

#info2 {
	width: 34%;
	background-color: var(--color-gray-middle);
	color: var(--font-color-high);
	display: flex;
	flex-direction: column;
	padding: 10px;
}

#info3 {
	width: 33%;
	background-color: var(--color-gray-high);
	color: var(--font-color-high);
	display: flex;
	flex-direction: column;
	padding: 10px;
}

.info_level_1 {
	color: var(--color-white);
	font-size: 2rem;
	padding-left: 20px;
	padding-bottom: 20px;
	margin-bottom: 0px;
}

.info_level_2 {
	font-size: 1.6rem;
	padding-left: 20px;
	margin-top: 10px;
	margin-bottom: 10px;
	display: flex;
	align-items: center;
}

.info_level_2 > p {
	margin-bottom: 0px;
}

.info_level_3 {
	font-size: 1.2rem;
	padding-left: 20px;
	margin-bottom: 0px;
	display: flex;
}

.info_level_3 > p {
	margin-bottom: 0px;
}

.info_level_4 {
	min-width: 70px;
	margin-bottom: 0px;
}

.info_level_5 {
	margin-bottom: 0px;
}

#info3 .info_level_3 {
	margin-bottom: 15px;
}

/* Small Devices, Tablets : ~ 768px */
@media only screen and (max-width : 767px) {

	#shortcut {
		display: flex;
		justify-content: center;
		flex-direction: column;
	}

	#shortcut1, #shortcut2, #shortcut3 {
		display: flex;
		justify-content: space-evenly;
	}

	#shortcut1 div, #shortcut2 div, #shortcut3 div {
		width: 140px;
	}

	#info {
		display: flex;
		flex-direction: column;
	}

	#info1, #info2, #info3 {
		width: 100%;
	}

}

/* Extra Small Devices, Phones : ~ 480px */
@media only screen and (max-width : 480px) {

	#shortcut1 img, #shortcut2 img, #shortcut3 img {
		width: 100px;
	}

}

/* Custom, iPhone Retina : ~ 320px */
@media only screen and (max-width : 320px) {

}