@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css");
* {
	font-family: "Pretendard Variable", 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-face {
	font-family: "NanumSquareNeo-Variable";
	src: url("../font/nanum-square-neo/OTF/NanumSquareNeo-Variable.ttf")
		format("truetype");
	font-weight: 100 900;
	font-style: normal;
}
@font-face {
	font-family: "NanumSquareNeoOTF";
	src: url("../font/nanum-square-neo/OTF/NanumSquareNeoOTF-Lt.otf")
		format("opentype");
	font-weight: 300;
	font-style: normal;
}
@font-face {
	font-family: "NanumSquareNeoOTF";
	src: url("../font/nanum-square-neo/OTF/NanumSquareNeoOTF-Rg.otf")
		format("opentype");
	font-weight: 400;
	font-style: normal;
}
@font-face {
	font-family: "NanumSquareNeoOTF";
	src: url("../font/nanum-square-neo/OTF/NanumSquareNeoOTF-Bd.otf")
		format("opentype");
	font-weight: 700;
	font-style: normal;
}
@font-face {
	font-family: "NanumSquareNeoOTF";
	src: url("../font/nanum-square-neo/OTF/NanumSquareNeoOTF-Eb.otf")
		format("opentype");
	font-weight: 800;
	font-style: normal;
}
@font-face {
	font-family: "NanumSquareNeoOTF";
	src: url("../font/nanum-square-neo/OTF/NanumSquareNeoOTF-Hv.otf")
		format("opentype");
	font-weight: 900;
	font-style: normal;
}
/* 블러 + 좌우로 펼쳐지면서 타이핑때 딜레이줘서 씀.*/
@-webkit-keyframes anim1 {
	0% {
		filter: blur(20px);
		opacity: 0;
		transform: scaleX(0.1);
	}

	100% {
		opacity: 1;
		transform: scaleX(1);
		filter: blur(0px);
	}
}

@keyframes anim1 {
	0% {
		filter: blur(20px);
		opacity: 0;
		transform: scaleX(0.1);
	}

	100% {
		opacity: 1;
		transform: scaleX(1);
		filter: blur(0px);
	}
}

/* 하-상 */
@-webkit-keyframes anim2 {
	0% {
		filter: blur(20px);
		opacity: 0;
		bottom: -100px;
	}

	20% {
		opacity: 0;
	}

	100% {
		filter: blur(0px);
		opacity: 1;
		bottom: 0;
	}
}

@keyframes anim2 {
	0% {
		filter: blur(20px);
		opacity: 0;
		bottom: -100px;
	}

	20% {
		opacity: 0;
	}

	100% {
		filter: blur(0px);
		opacity: 1;
		bottom: 0;
	}
}

/* 좌->우 */
@-webkit-keyframes anim3 {
	0% {
		filter: blur(20px);
		opacity: 0;
		left: -100px;
	}

	20% {
		opacity: 0;
	}

	100% {
		filter: blur(0px);
		opacity: 1;
		left: 0;
	}
}

@keyframes anim3 {
	0% {
		filter: blur(20px);
		opacity: 0;
		left: -100px;
	}

	20% {
		opacity: 0;
	}

	100% {
		filter: blur(0px);
		opacity: 1;
		left: 0;
	}
}

/* 전체 적용 */
body {
	font-family: "NanumSquareNeoOTF", sans-serif;
}

html {
	font-size: 10px;
	color: #111;
}
#header-top {
	background-color: #3246a7;
}
#header-top .toggle-wrap {
	max-width: 1400px;
	width: 100%;
}
#header-top .toggle-wrap .nuri-txt {
	color: #fff;
	font-weight: 300;
	font-size: 1.5rem;
	padding-left: 3rem;
}
#header-top .toggle-wrap .nuri-txt img {
	width: 2.4rem;
}
header.main.main-new {
	background-color: #fff;
	position: relative;
	top: 0px !important;
}
header .right_area {
	display: flex;
	gap: 1rem;
	justify-content: center;
}
header .bg_bo {
	position: relative;
	padding: 0px;
	font-size: 1.5rem;
	font-weight: 400;
	border: 1px solid #3246a7;
	border-radius: 19px;
	line-height: 31px;
	background-color: #fff;
	height: 40px;
	align-self: center;
	color: #3246a7;
	width: 10rem;
	place-content: center;
}
header .bg_bo:hover {
	border-color: #000;
	background-color: #fefefe;
}
header .btn_menu {
	background-color: unset;
}
header .btn i {
	width: 2rem;
	height: 1.6rem;
	background-image: url("../images/common/login_icon.png");
	margin: 0px 0 2px 0px;
	vertical-align: middle;
}
header a.btn.logout {
	display: flex;
	width: 100%;
	justify-content: center;
	font-weight: 600;
	font-size: 1.6rem;
}
header .btn.logout i {
	background: url("../images/new/profile.png") center center no-repeat;
	height: 100%;
	margin-bottom: 3px;
	margin-right: 3px;
	width: 18px;
	height: 19px;
	align-self: center;
}
.logout_time_box {
	display: flex;
	gap: 20px;
	align-items: center;
}
header .logout_time_box .logout_time {
	position: relative;
	display: flex;
	align-items: center;
}
header .logout_time_box .logout_time::before {
	content: "";
	position: absolute;
	top: 0;
	right: -1.2rem;
	width: 1px;
	height: 1.7rem;
	background-color: #999;
}
header .logout_time_box .logout_time p,
header .logout_time_box .logout_time a {
	display: inline-block;
	line-height: 1;
}
header .logout_time_box .logout_time span {
	/* line-height: 1; */ /* vertical-align: middle; */
}
header .logout_time_box .logout_time a {
	border: 1px solid #b70000;
	padding: 2px 5px;
	vertical-align: middle;
	color: #b70000;
	border-radius: 1.3rem;
	margin-left: 1rem;
	font-size: 1.3rem;
}
header .logout_time_box .logout_time i {
	width: 2rem;
	height: 1.6rem; /* margin: 0px 0 2px 0px; */
	background: url("../images/common/icon_set1.png") center center no-repeat;
}

header .btn.btn_menu {
	display: none;
}
header .menu_btn {
	display: none;
}
header .sns-list {
}
header .sns-list li {
	display: inline-block;
	margin-right: 1px;
}
header .sns-list li:last-child {
	margin-right: 0px;
}
header .sns-list .item {
	display: inline-block;
	width: 3.2rem;
	height: 3.2rem;
	background: url("../images/common/icon_ytb.png") #fff center center / 20px
		no-repeat;
	border: 1px solid rgb(110, 110, 110);
	border-radius: 5rem;
}
header .sns-list li:nth-child(2) .item {
	background: url("../images/common/icon_ig.png") #fff center center / 20px
		no-repeat;
}
header .sns-list li:nth-child(3) .item {
	background: url("../images/common/icon_blg.png") #fff center center / 20px
		no-repeat;
}
header .sns-list li:nth-child(4) .item {
	background: url("../images/common/icon_fcb.png") #fff center center / 20px
		no-repeat;
}
header .nav {
	padding-bottom: 0;
	float: none;
	margin-left: 0;
	align-content: center;
	width: 53rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
header .inner {
	height: 8.5rem;
	align-content: center;
}
header .inner .logo {
	float: none;
}
header .clearfix {
	display: flex;
	justify-content: space-between;
}
header .clearfix::after {
	display: none;
}
header .header-right {
	display: flex;
}
header .nav > li {
	padding: 0;
	width: auto;
}
header .nav > li .btn {
	padding-top: 0;
}
header.main .nav > li .btn span {
	color: #111;
	font-size: 2rem;
	font-weight: 600;
}
header.main .logo a {
	background-image: url(../images/new/logo.png);
	min-width: 11rem;
	background-size: contain;
}
header.main.active .logo a {
	background-image: url(../images/new/logo.png);
	min-width: 11rem;
	background-size: contain;
}

.swiper {
	aspect-ratio: 1920/660;
	position: relative;
}

.swiper-slide {
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 3rem;
	font-weight: bold;
	color: white;
	user-select: none;
	width: 100%;
	aspect-ratio: 1920/660;
}

.swiper-slide img {
	width: 100%;
}

.swiper-slide-active {
	z-index: 999;
}

/* 컨트롤 영역 */
.swiper-controls {
	padding: 5px;
	background-color: #4d4d4d;
	position: absolute;

	bottom: 20.1%;
	left: 50%;
	transform: translateX(-50%);
	z-index: 10;

	display: flex;
	align-items: center;
	justify-content: center;

	/* background-color: rgba(0, 0, 0, 0.4); */
	border-radius: 2rem;
	/* padding: 5px1rem; */
}

/* 컨트롤 내부의 버튼/도트 위치 재조정 (static으로) */
.swiper-button-next,
.swiper-button-prev,
.swiper-pagination {
	position: static;
	transform: none;
	margin: 0 0.8rem;
}

/* 좌우 버튼 스타일 */
.swiper-button-next,
.swiper-button-prev {
	width: auto;
	height: auto;
	color: white;
	user-select: none;
}

.swiper-button-next:after,
.swiper-button-prev:after {
	font-size: 1.2rem;
	font-weight: bold;
	display: none;
}

/* 도트 스타일 */
.swiper-pagination {
	width: auto;
	display: flex;
	height: 1rem;
}

.swiper-pagination-bullet {
	width: 1rem;
	height: 1rem;
	background-color: #fff;
	opacity: 0.5;
	transition: 0.2s;
	min-height: 0;
}

.swiper-pagination-bullet-active {
	background-color: white;
	opacity: 1;
	width: 2.5rem;
	border-radius: 2rem;
	height: 1rem;
}

/* 재생/일시정지 토글 버튼 스타일 */
.swiper-autoplay-toggle {
	width: 2.4rem;
	min-width: 2.4rem;
	height: 2.4rem;
	background: none;
	border: none;
	cursor: pointer;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
}

/* 아이콘 모양 (기본: 재생 '▶') */
.swiper-autoplay-toggle::before {
	content: "▶";
	/* 재생 아이콘 */
	font-size: 1.6rem;
	line-height: 1;
}

/* 재생 중일 때 (일시정지 '||' 모양) */
.swiper-autoplay-toggle.playing::before {
	content: "||";
	font-size: 1.3rem;
	font-weight: bold;
	letter-spacing: 1px;
	margin-bottom: 3px;
}
.valuation-wrapper {
	margin-top: -8.1rem;
	width: 100%;
	position: relative;
	z-index: 1000000;
	place-items: center;
}
.valuation-list {
	max-width: 1400px;
	width: 100%;
	display: flex;
	justify-content: space-between;
	gap: 2.8rem;
}
.valuation-item {
	flex: 1;
	display: flex;
	background-color: #fff;
	border-radius: 1rem;
	padding: 3.3rem 4.5rem;
	font-family: "NanumSquareNeo-Variable";
	justify-content: space-between;
	border: 1px solid #ececec;
	box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.04);
}
.item-text {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 10px;
	flex: 1;
}
.item-img {
	width: 12rem;
}
.item-img img {
	width: 100%;
}
.item-text p {
	font-family: "NanumSquareNeoOTF";
	font-weight: 800;
	font-size: 2.2rem;
	/* margin-bottom: 1.2rem; */
	line-height: 2.4rem;
	letter-spacing: -0.02em;
	color: #111111;
}
.item-text span {
	padding-left: 5px;
	font-weight: 400;
	color: #777777;
	line-height: 2rem;
	font-size: 1.5rem;
}
.item-text a {
	display: block;
	width: 8rem;
	height: 3rem;
	background-color: #eee;
	text-align: center;
	align-content: center;
	border-radius: 1.5rem;
	font-weight: 400;
	font-size: 1.5rem;
	color: #111;
}

section.sec-notice {
	/* min-height: 87.5rem;
  height: 87.5rem; */
	background-color: #f8f9fc;
}
section.sec-notice .inner {
	max-width: 1400px;
	margin: 0 auto;
	width: 100%;
	display: flex;
	height: 52.7rem;
}
section.sec-notice .notice {
	background-color: #f8f9fc;
	flex: 1;
	padding-top: 4.5rem;
	height: 100%;
}
.notice-box {
	display: flex; /* 아이템들을 가로로 정렬 */
	justify-content: center; /* 아이템들을 중앙 정렬 */
	gap: 24px; /* 아이템 사이의 간격을 24px로 설정 */
	flex-wrap: wrap; /* 화면이 좁아지면 줄바꿈 */
	padding-right: 4.5rem;
}
section.sec-notice .notice .notice-box .notice-item {
	box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.04);
}

.notice-item {
	/* 크기 및 모양 */
	width: 300px;
	height: 361px;
	background-color: #fff;
	border-radius: 10px;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.07);

	/* 내부 레이아웃 */
	padding: 30px;
	padding-top: 6.4rem;
	padding-right: 1.8rem;
	box-sizing: border-box;
	position: relative; /* + 버튼의 기준점 */
	display: flex;
	flex-direction: column;
}

/* --- 카드 내부 요소 스타일 (이전과 동일) --- */

.date-tag {
	background-color: #2d45c0;
	color: white;
	border-radius: 8px 8px 8px 0;
	padding: 8px 12px;
	width: fit-content;
	text-align: center;
	margin-bottom: 20px;
	position: absolute;
	left: 0;
	top: 0;
}
.date-tag .day {
	font-size: 1.6rem;
	display: block;
	line-height: 2.4rem;
	font-family: "NanumSquareNeoOTF";
	font-weight: 800;
	letter-spacing: -0.03em;
}
.date-tag .date {
	font-size: 1.2rem;
	display: block;
	font-weight: 300;
}

.notice-item h3 {
	font-size: 1.8rem;
	font-weight: 600;
	margin: 0 0 12px 0;
	line-height: 1.4;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
}

.notice-item p {
	font-size: 1.6rem;
	color: #555;
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 6;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
	flex-grow: 1; /* p 태그가 남는 공간을 모두 차지 */
}

.plus-btn {
	position: absolute;
	bottom: 24px;
	right: 24px;
	background-color: #f1f3f5;
	border: none;
	border-radius: 50%;
	width: 32px;
	height: 32px;
	font-size: 1.6rem;
	font-weight: 300;
	color: #888;
	cursor: pointer;
	line-height: 30px;
	text-align: center;
	transition: background-color 0.2s;
}
.plus-btn:hover {
	background-color: #e9ecef;
}
section.sec-notice h1 {
	margin-bottom: 3.1rem;
	font-size: 2.7rem;
	font-family: "NanumSquareNeoOTF";
	font-weight: 700;
	position: relative;
}
section.sec-notice .movement {
	background-color: #fff;
	width: 29%;
	max-width: 41.7rem;
	padding: 4.5rem 4.4rem;
	padding-right: 0.1rem;
	position: relative;
}
section.sec-notice .movement .movement-top,
section.sec-notice .movement .movement-box {
	position: relative;
}
.white-bg {
	position: absolute;
	background: #fff;
	width: 1009%;
	height: 74.8rem;
	left: 0;
	top: -22.1rem;
}
.nav_bg {
	top: 85px;
}
header .nav > li ul {
	top: 54px;
}
.anim.on {
	animation: 0.5s ease 0.5s 1 alternate both running anim1;
}
.notice-item.anim.on {
	animation: 0.5s ease 0.5s 1 alternate both running anim2;
}
.valuation-item.anim.on:nth-child(1) {
	animation-delay: 0.3s;
}
.valuation-item.anim.on:nth-child(2) {
	animation-delay: 0.6s;
}
.valuation-item.anim.on:nth-child(3) {
	animation-delay: 0.9s;
}
.notice-item.anim.on:nth-child(1) {
	animation-delay: 0.3s;
}
.notice-item.anim.on:nth-child(2) {
	animation-delay: 0.6s;
}
.notice-item.anim.on:nth-child(3) {
	animation-delay: 0.9s;
}
.movement.anim.on {
	animation: 0.5s ease 0.5s 1 alternate both running anim3;
	animation-delay: 1.2s;
}
/* header .nav > li ul li a {
  box-sizing: border-box;
  border-bottom: 1px solid transparent;
}
header .nav > li ul li a:hover {
  border-bottom: 1px solid #fff;
} */
/* 푸터 */
/* header .nav > li ul {
  padding-top: 15px;
  height: 159px;
}
.nav_bg{
    height: 159px;
} */
/* --- '동향' 섹션 --- */
.movement {
	width: 100%;
	max-width: 340px; /* 이미지와 유사한 너비 */
	margin: 0 auto;
}

/* 상단 (제목 + 컨트롤) */
.movement-top {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 1rem;
}

.movement-top h1 {
	font-size: 1.6rem; /* 26px */
	font-weight: 600;
	margin: 0;
}

/* 컨트롤 박스 */
.ctr-box {
	display: flex;
	align-items: center;
	width: 113px;
	justify-content: space-between;
}

/* 컨트롤 버튼 (<, ||, >) */
.mv-btn {
	background: none;
	border: none;
	cursor: pointer;
	font-size: 1.1rem; /* 18px */
	color: #555;
	font-weight: bold;
	/* padding: 4px; */
	transition: color 0.2s;
	user-select: none;
}
.mv-btn:hover {
	color: #000;
}
.mv-btn.mv-autoplay {
	font-size: 1.2rem;
	font-weight: bold;
	letter-spacing: 3px;
	margin-bottom: 3px;
}

/* 페이지네이션 (Dots) */
.mv-pagination {
	position: relative;
	display: flex; /* 점들을 가로로 나열 */
	gap: 6px; /* 점 사이 간격 */
	bottom: auto; /* Swiper 기본값 제거 */
	width: auto; /* Swiper 기본값 제거 */
}
/* Swiper가 생성하는 각 '점' 스타일 */
.mv-pagination .swiper-pagination-bullet {
	width: 12px;
	height: 12px;
	background-color: transparent; /* 기본 점 색상 */
	border: 1px solid #ababab; /* 기본 점 색상 */
	opacity: 1;
	margin: 0; /* Swiper 기본값 제거 */
	transition: background-color 0.2s;
}
/* 활성화된 '점' 스타일 */
.mv-pagination .swiper-pagination-bullet-active {
	background-color: #3246a7; /* 이미지의 파란색 점 */
	border-color: #3246a7;
}

/* 하단 (슬라이드 컨테이너) */
.movement-box {
	width: 100%;
	height: 36rem; /* 배너 이미지 비율에 맞게 조절 (예시) */

	/* 이미지처럼 둥근 모서리와 그림자 */
	border-radius: 12px;
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);

	/* Swiper 필수 */
	overflow: hidden;
}

/* 개별 슬라이드 */
.swiper-slide {
	background-color: #fff;
	display: flex;
	justify-content: center;
	align-items: center;
}

/* 슬라이드 플레이스홀더 (실제 이미지로 대체하세요) */
.slide-placeholder {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	color: #888;
}
.slide-placeholder h2 {
	color: #333;
	font-size: 1.2rem;
	margin: 0;
}
#footer {
	background-color: #3b3a40;
	color: #fff;
}
#footer .footer_wrap {
	width: 100%;
	max-width: 1400px;
}
#footer .footer_txt ul li {
	border-left-color: #c1c0c2;
	font-size: 1.6rem;
	font-weight: 400;
}
#footer .footer_txt .ft_ap {
	font-size: 1.5rem;
	color: #a1a1a1;
}
@media (max-width: 1400px) {
	.valuation-wrapper {
		margin-top: 0;
	}
	.valuation-list {
		flex-direction: column;
		gap: 0;
	}
	.valuation-item {
		border-radius: 0;
		border-left: 0;
		border-right: 0;
		box-shadow: none;
	}

	.valuation-item:nth-child(2) {
		border: none;
	}
	section.sec-notice .movement {
		width: 29.7%;
	}
	.white-bg {
		display: none;
	}
}
@media (max-width: 1024px) {
	html {
		font-size: clamp(6.7px, 2vw, 10px);
	}
	header.main .clearfix {
		float: none;
	}
	header.main .btn,
	header.main .right_area.m_off {
		display: none;
	}
	/* //20240529*/
	header .btn.btn_menu {
		display: inline-block;
		width: 5.4rem;
		height: 3.5rem;
		font-size: 0px;
		border: none;
		border-radius: 0px;
		background-size: 2.5rem 2.2rem;
		background-repeat: no-repeat;
		background-position: right center;
		background-image: url("../images/common/btn_menu.png");
		align-self: center;
	}

	.swiper-controls {
		bottom: 10%;
	}
	section.sec-notice {
		flex-direction: column;
		position: relative;
		z-index: 1;
		height: auto;
	}
	#mobileGnb .gnb_content .gnb_list li .btn {
		font-size: 14px;
		font-weight: 700;
	}
	#mobileGnb .gnb_content .gnbTop {
		display: flex;
		justify-content: space-between;
	}
	#mobileGnb .gnb_content .gnbTop .close {
		display: block;
		top: 0;
		position: relative;
	}
	#mobileGnb .gnb_content .gnbTop h2 {
		font-size: 2.2rem;
	}
	#mobileGnb .gnb_content .gnbTop h2 .btn {
		font-size: 14px;
	}
	#mobileGnb .gnb_content .gnbTop h2 .btn i {
		display: none;
	}
	#header-top .toggle-wrap .nuri-txt {
		padding-left: 1.5rem;
	}
	section.sec-notice .inner {
		flex-direction: column;
		height: auto;
	}
	.notice-box {
		padding: 0;
	}
	.notice-item {
		width: 90%;
		height: auto;
		min-height: 241px;
	}
	section.sec-notice .movement {
		width: 100%;
		max-width: none;
		padding: 3rem;
	}
	section.sec-notice .inner {
		gap: 3rem;
	}
	section.sec-notice .notice h1 {
		padding-left: 3rem;
	}
}
