@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');
@font-face {
	font-family: 'GmarketSansBold';
	src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansBold.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'Donoun-Medium';
	src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2205@1.0/Donoun-Medium.woff2') format('woff2');
	font-weight: normal;
	font-style: normal;
}

/* setting */
body {
	font-family: 'Pretendard';
}
.Donoun-Medium {
	font-family: 'Donoun-Medium';
}
.GmarketSansBold {
	font-family: 'GmarketSansBold', system-ui;
}

.pretendard {
	font-family: Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, 'Helvetica Neue', 'Segoe UI', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif;
}

.contents_wrap {
	margin-top: 110px;

}
.learning_wrap .inner {
	width: 1200px;
	margin: 0 auto;
}

.top_ban_wrap {
	width: 100%;
	background: linear-gradient(to right, #1876AF, #79BCE4);
	color: #fff;
	box-sizing: border-box;
}
.top_ban_wrap > div {
	display: flex;
	justify-content: space-between;
	align-items: center;
	max-width: 1200px;
	margin: 0 auto;

	height: 250px;
}
.top_ban_container {
	width: 1200px;
}
.top_ban_text .txt1 {
	font-size: 22px;
	font-weight: 500;
}

.top_ban_text .txt2 {
	margin-top: 10px;
	font-size: 38px;
	font-weight: 700;
}

.top_ban_text .txt3 {
	margin-top: 36px;
	font-size: 24px;
	font-weight: 500;
	color: #ccc;
}
.top_ban_text .txt3 a {
	color: #ccc;
}
.top_ban_text .txt3 span {
	color: #F0AD4E;
	font-weight: 800;
}

.learning_container {
	width: 100%;
}

.learning_content_wrap {
	border: 1px solid #ccc;
	border-radius: 24px;
	padding: 80px 30px 0;

	margin: 80px 0 100px;
}

.learning_tab {
	display: flex;
	width: 100%;

	margin: 100px 0 0;
	border: 1px solid #ccc;
	border-radius: 10px;
	overflow: hidden;
	font-size: 16px;
	font-weight: 700;
	background-color: #f9f9f9;
}

.learning_tab .tab {
	flex: 1;
	text-align: center;
	padding: 14px 0;
	cursor: pointer;
	transition: background-color 0.3s, color 0.3s;
	color: #333;
	background-color: #fff;
}
.learning_tab .tab.on {
	color: #fff;
	background-color: #027EA7;
}

.learning_tab .tab:hover:not(.on) {
	background-color: #f3f3f3;
}

.learning_tab .tab.active {
	background-color: #1876AF;
	color: #fff;
}

.learning_title {
	text-align: center;

	padding: 0 0 40px;
}

.learning_title .txt1 {
	font-size: 38px;
	font-weight: 700;
	margin-bottom: 8px;
}

.learning_title .txt2 {
	font-size: 16px;
	font-weight: 600;
	color: #A5A5A5;
}

.learning_img {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 20px;
}

.learning_img > div {
	flex: 0 0 calc(33.333% - 13.33px); /* 한 줄에 3개 + gap 고려 */
	text-align: center;
}

.learning_img img {
	width: 100%;
	height: auto;
	image-rendering: auto;
}

.learning_content_wrap .btn {
	text-align: center;
	margin: 40px 0 80px;
}

.learning_content_wrap .btn button {
	padding: 10px 70px;
	font-size: 16px;
	font-weight: 600;
	background-color: #0083AE;
	color: #fff;
	border: none;
	border-radius: 8px;
	cursor: pointer;
	transition: background-color 0.2s;
}

.learning_content_wrap .btn button:hover {
	background-color: #0099cc;
}

.learning_content1 {
	border-bottom: 2.5px dotted #ddd;
}

.learning_content2 {
	///border-bottom: 2.5px dotted #ddd;
}

.learning_content2 .learning_title {
	margin-top: 80px;
}

.learning_content3 .learning_title {
	margin-top: 80px;
}

.list_container {
	display: block;
	width: 100%;
	background-color: #F8F8F8;
}