@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 {
	
}
.learning_wrap .inner {
	width: 100%;
	margin: 0 auto;
}

.top_ban_wrap {
	width: 100%;
	background: linear-gradient(to right, #1876AF, #79BCE4);
	color: #fff;
	box-sizing: border-box;
}

.top_ban_container {
	display: flex;
	flex-direction: column; /* 위-아래로 배치 */
	//gap: 16px;               /* 텍스트와 이미지 간격 */
}
.top_ban_text {
	text-align: left;
	padding: 40px 0 0 30px;
	line-height: 1.25;
}

.top_ban_text .txt1 {
	font-size: 13px;
	font-weight: 500;
	letter-spacing: .015px;
}

.top_ban_text .txt2 {
	margin-top: 10px;
	font-size: 24px;
	font-weight: 700;
	letter-spacing: .015px;
}

.top_ban_text .txt3 {
	margin-top: 20px;
	font-size: 18px;
	font-weight: 500;
	letter-spacing: .015px;
	color: #ccc;
}
.top_ban_text .txt3 a {
	color: #ccc;
}
.top_ban_text .txt3 span {
	color: #F0AD4E;
	font-weight: 800;
}

.top_ban_img {
	display: flex;
	justify-content: flex-end;
	padding: 78px 30px 40px 0;
}

.top_ban_img img {
	display: flex;
	justify-content: flex-end;
	width: 127px;
}

.learning_container {
	width: 100%;
}

.learning_content_wrap {
	border: 1px solid #ccc;
	border-radius: 20px;
	padding: 40px 20px 0;

	margin: 40px 20px 60px;
}

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

	margin: 30px 0 0;
	border-bottom: 1px solid #ddd;

	overflow: hidden;
	font-size: 14px;
	font-weight: 700;
}

.learning_tab .tab {
	flex: 0.33;
	text-align: center;
	padding: 14px 0;
	cursor: pointer;
	transition: background-color 0.3s, color 0.3s;
	color: #A5A5A5;
}
.learning_tab .tab.on {
	color: #333;
	border-bottom: 2px solid #007298;
}

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

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

.learning_content1 .learning_title {
	text-align: center;

	padding: 0 0 16px;
}

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

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

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

.learning_img > div {
	flex-direction: column;
	gap: 20px;
}

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

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

.learning_content_wrap .btn button {
	width: 100%;
	padding: 15.5px;
	font-size: 16px;
	font-weight: 600;
	background-color: #0083AE;
	color: #fff;
	border: none;
	border-radius: 10px;
	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 {
	text-align: center;
	margin-top: 40px;
	padding: 0 0 30px;
}

.learning_content3 .learning_title {
	text-align: center;
	margin-top: 40px;
	padding: 0 0 24px;
}

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

	/* 가로 스크롤 허용 */
	overflow-x: auto;
	/* 세로는 숨기지 않고 자동 */
	overflow-y: visible;

	/* 모바일에서 손가락 스크롤 자연스럽게 */
	-webkit-overflow-scrolling: touch;
}

#Learning_Lists {
	min-width: 1000px;
}

.learning_content3 .learning_img {
	gap: 24px;
}