@charset "UTF-8";

@charset "UTF-8";

@media screen and (max-width: 1240px) {
	.login-mypage {
		flex-direction: column;
		align-items: anchor-center;
	}
	.log-out {
		display: flex;
		flex-direction: column;
		align-items: center;
	}
}

@media screen and (max-width: 1200px) {
	.content .main-banner .banner-inner {
		padding: 50px 0;
	}
	section {
		padding: 0 50px;
	}
	.content .utilization {
		
	}
	section.favorite-services {
		padding-right: 0;
	}
	section.main-banner {
		padding: 0;
	}
	.content .utilization {
		padding: 30px 50px;
	}
	.top-mega-menu .menu li {
		width: 80px;
	}
	.top-mega-menu .menu-wrapper .menu {
		gap: 20px;
	}
	.mega-menu-column-item {
		width: 80px;
	}
	.mega-menu-column-list {
		gap: 20px;
	}
	.log-out, .login-mypage {
		display: flex;
		flex-direction: column;
		width: max-content;
		align-items: center;
		font-size: 12px;
	}
	.login-mypage .login-name:after {
		margin-left: 0px;
	}
	.top-mega-menu .member li.mypage {
		gap: 0;
	}
	.content .main-banner .banner-inner .banner-text-group {
		padding: 0 30px;
		flex: 0.8;
		gap: 15px;
	}
	.content .main-banner .banner-inner .banner-img {
		padding-right: 30px;
		padding-left: 0;
	}
	.content .main-banner .banner-inner .banner-text h2 {
		font-size: 2rem;
	}
	.banner-text {
		width: 50%;
		flex: 1;
	}
	.banner-img {
		width: 50%;
	}
	.banner-text, .banner-img {
		padding: 0;
	}
	.slider-group {
		height: 100%;
		width: 100%;
		max-width: 100%;
	}
	.banner-text-group {
		padding: 20px 0;
		gap: 30px;
	}
	.banner-title {
		font-size: 45px;
	}
	.banner-text {
		font-size: 24px;
		justify-content: center;
	}
	.banner-img img {
		width: 100%;
		height: 100%;
		object-fit: contain;
	}
	.information-id-group {
		width: 100%;
		gap: 10px;
	}
	.mega-menu .mega-menu-column {
		width: 100%;
		padding: 10px 0 10px 0;
	}
	.mobile-sub {
		display: none !important;
	}
}

/* 태블릿용 */
@media screen and (max-width: 1024px) {
	body {
		width: 100%;
		min-width: 100%;
		overflow: auto;
	}
	nav {
		justify-content: space-between;
	}
	.mobile-sub {
		display: block !important;
	}
	.header-wrap.admin .close-btn {
		border-bottom: 1px solid #132058;
	}
	.close-btn {
		display: flex;
		font-size: 23px;
		cursor: pointer;
		align-self: flex-end;
		padding: 0px;
		border-bottom: 1px solid #2d50ff;
		width: 100%;
		text-align: end;
		font-weight: 600;
		color: #000;
		height: 58px;
		min-height: 58px;
		justify-content: flex-end;
		align-items: center;
		padding-right: 10px;
		z-index: 2;
	}
	.overlay.active {
		display: block;
	}
	.top-mega-menu {
		display: flex; /* 애니메이션 위해 none 제거 */
		flex-direction: column;
		position: fixed;
		top: 0;
		right: 0;
		width: 50%;
		height: 100dvh;
		background: #fff;
		padding: 0;
		box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
		z-index: 1000;
		/* 애니메이션 초기 상태 */
		opacity: 0;
		transform: translateX(100%);
		transition: all 0.35s ease;
		pointer-events: none; /* 닫힌 상태 클릭 막기 */
		height: calc(var(- -vh, 1vh)* 100);
	}
	.top-mega-menu.active {
		opacity: 1; /* 페이드 인 */
		transform: translateX(0); /* 슬라이드 인 */
		pointer-events: auto; /* 활성화 */
	}
	.top-mega-menu.active .menu {
		flex-direction: column;
		flex-grow: 1;
		overflow-y: auto;
		width: 100%;
		gap: 0px;
		background-color: #edf2ff;
		line-height: 2;
	}
	.top-mega-menu.active .menu li {
		width: 100%;
		height: auto;
		align-items: baseline;
		justify-content: flex-start;
	}
	.top-mega-menu.active .menu li.open>.mega-menu-column-item.mobile-sub a
		{
		background-color: #fff;
		font-weight: 400;
		font-size: 15px;
	}
	.top-mega-menu.active .menu li a {
		width: 100%;
		padding: 10px 20px;
		text-align: left;
	}
	.top-mega-menu.active .menu li.open>a {
		background-color: #fbfcff;
		width: 50%;
		border-bottom: 1px solid #b0bdff;
		box-sizing: border-box;
	}
	.mega-menu-column-item {
		position: absolute;
		top: 0;
		right: 0;
		width: 50%;
		background-color: #fff;
		height: 100%;
	}
	.top-mega-menu.active .menu-wrapper {
		width: 100%;
		position: relative;
		flex: 1;
	}
	.hamburger {
		display: flex; /* 햄버거 버튼 보이기 */
		justify-content: center;
	}
	.top-mega-menu.active {
		display: flex; /* 햄버거 클릭 시 나타남 */
	}
	.overlay.active {
		display: block;
	}
	.content .favorite-services {
		padding: 0;
		gap: 20px;
	}
	.content .favorite-services .section-inner .item {
		border-bottom: 1px solid #949494;
	}
	.content .favorite-services .section-inner .item.first, .content .favorite-services .section-inner .item .go
		{
		display: none;
	}
	.content .main-banner .banner-inner .banner-text-group {
		padding-right: 0;
	}
	.content .main-banner .banner-inner .banner-img .banner-images {
		max-width: 100%;
	}
	.content .main-banner .banner-inner {
		padding: 30px 0;
	}
	.favorite-services .section-inner.white {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		width: 100%;
	}
	.content .favorite-services .section-inner .item .item-group {
		padding: 20px;
		align-items: center;
	}
	.item p {
		text-align: center;
	}
	.content .process-guide .section-inner {
		align-items: center;
		padding: 0;
	}
	.content .process-guide .section-inner .process-steps {
		display: flex;
		flex-wrap: wrap;
		width: 100%;
		justify-content: center;
	}
	.content .process-guide .section-inner .process-steps .item {
		width: 30%;
	}
	.operation-status .section-inner {
		flex-direction: column;
	}
	section.process-guide {
		padding: 30px 50px;
	}
	.content .utilization {
		padding: 20px;
	}
	.item-group5 {
		grid-template-columns: 50% 48%;
	}
	.content .release-notes .section-inner .item:first-child {
		grid-row: 1/span 4;
		justify-content: space-between;
	}
	.content .release-notes .section-inner .item:first-child p {
		font-size: 18px;
		text-align: left;
	}
	.content .release-notes .section-inner .item:not(:first-child) p {
		display: none;
	}
	.content .release-notes .section-inner .item:not(:first-child) .release-data
		{
		border: none;
		padding: 0;
	}
	.content .release-notes .section-inner .item:not(:first-child) .release-data span.tx
		{
		display: none;
	}
	.content .release-notes .section-inner .item:not(:first-child) .release-data span.icon
		{
		top: 0;
	}
	.content .release-notes .section-inner .item:not(:first-child) {
		padding: 15px 10px;
		gap: 0;
	}
	.content .utilization .utilization-title {
		font-size: 18px;
	}
	.release-notes .item-group5.gap15 {
		gap: 5px;
		font-size: 14px;
	}
	.content .operation-status .section-inner .column .status-board .item-box
		{
		padding: 15px;
		max-height: 350px;
		font-size: 14px;
		justify-content: center;
	}
	.operation-status p {
		font-size: 20px;
	}
	.banner-text {
		font-size: 20px;
	}

	/*로그인*/
	.user-info-sub {
		width: 100%;
		margin: 0 auto;
	}
	.login-group {
		width: 100%;
		margin: 0 auto;
	}
	.user_contents {
		width: 100%;
	}
	.field-checkbox {
		align-items: center;
		font-size: 16px;
		width: 100%;
		gap: 5px;
	}
	.ff_wrap-group {
		width: 100%;
	}
	.result-box {
		margin-bottom: 20px;
	}
	.user-info-content {
		padding: 0;
		width: 100%;
	}
	.user-info-wrapper {
		gap: 30px;
	}
	.content .release-notes .section-inner .item .release-data {
		font-size: 17px;
	}
	.top-mega-menu .member {
		width: 100%;
		z-index: 999;
		border-top: 1px solid #ddd;
	}
	.top-mega-menu .member .login, .top-mega-menu .member .logjoin {
		width: 100%;
		height: 100%;
	}
	.top-mega-menu .member .login a {
		border-right: 1px solid #ddd;
	}
	.top-mega-menu .member .login a, .top-mega-menu .member .logjoin a {
		width: 100%;
		justify-content: center;
		gap: 10px;
		height: 100%;
	}
	.top-mega-menu .member .log-before {
		width: 100%;
	}
	.top-mega-menu .member .log-after {
		width: 100%;
	}
	.top-mega-menu .member .log-after li {
		width: 100%;
		justify-content: center;
	}
	.top-mega-menu .member .log-after li a {
		padding: 10px;
		width: 100%;
		border-right: 1px solid #ddd;
	}
	.top-mega-menu .member li.mypage::after, .top-mega-menu .member li.login::after
		{
		content: none;
	}
	.menu-wrapper:hover .mega-menu {
		display: none !important;
		pointer-events: none;
	}
}

/* 모바일용 */
@media screen and (max-width: 768px) {
	.mob-none {
		display: none !important;
	}
	.content .operation-status .section-inner .column .status-board {
		flex-direction: column;
		height: 100%;
	}
	.updated-data-text {
		gap: 10px;
	}
	.content .operation-status .section-inner .column .status-board .updated-data-text
		{
		flex-direction: row;
	}
	.section-bc {
		background-color: #fff;
	}
	.section-first {
		max-width: 100%;
		justify-content: flex-start;
		height: 100%;
		gap: 10px;
	}
	.mid-section {
		flex-direction: column;
		height: 100%;
		gap: 10px;
	}
	.user-input {
		padding: 0;
		flex-direction: column;
	}
	.userlogin_id, .userlogin_pw {
		padding: 15px 0;
	}
	.btn-wrap .btn {
		padding: 15px;
	}
	.login-log {
		width: 150px;
	}
	.logintext-group {
		flex: 0.4;
	}
	.user-wrap {
		justify-content: start;
		padding: 0;
		gap: 10px;
	}
	.login-group {
		height: fit-content;
		justify-content: flex-start;
	}
	.login-title {
		height: 100%;
		border-radius: 0;
	}
	.user-info {
		font-size: 12px;
		padding: 30px 0;
	}
	.process-guide .item img {
		max-width: 50%;
	}
	.process-guide .item p {
		font-size: 15px;
	}
	.content .process-guide .section-inner .process-steps .item {
		/* flex: 1 0 30%; 
			margin: 0 auto
		*/
		padding: 10px;
		gap: 5px;
	}
	section.process-guide {
		padding: 0;
	}
	.content .process-guide .section-inner .process-steps {
		gap: 15px;
	}
	section {
		padding: 0 20px;
	}
	.content .process-guide .section-inner {
		padding: 20px;
	}
	.content .operation-status .section-inner {
		padding: 20px 0;
	}
	.content .operation-status .section-inner {
		gap: 20px
	}
	.utilization .section-inner.gap15 {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		width: 100%;
	}
	.content .utilization .utilization-title {
		justify-content: center;
	}
	.content .notice-board .section-inner .notice-list li a span.new-icon {
		display: none;
	}
	.content .notice-board .section-inner .notice-list, .content .notice-board .section-inner .notice-list li
		{
		padding: 10px;
	}
	.content .notice-board .section-inner .notice-list li a div {
		max-width: 70%;
		height: 20px;
	}
	.content .img-board .application_button {
		padding: 10px 0;
	}
	.banner-text {
		font-size: 15px;
		gap: 10px;
	}
	.banner-title {
		font-size: 30px;
	}
	.banner-text-group {
		gap: 10px;
	}
	.operation-status p {
		line-height: 1.5;
	}
	.font_30 {
		font-size: 20px;
	}
	.content .operation-status .section-inner .column .status-board .item-box
		{
		font-size: 13px;
	}
	.content .operation-status .section-inner .column .status-board .item-box
		{
		flex: 0 0 calc(( 100% - 2 * 8px)/2);
	}
	.subtext {
		font-size: 15px;
		text-align: center;
	}
	.cl-subtext {
		width: 100%;
	}
	.auth-before {
		gap: 20px;
	}
	.auth-before-group {
		gap: 10px;
	}
	.result-box {
		width: 100%;
	}
	.method {
		padding: 30px;
		width: 80%;
	}
	.process-steps .item a.item-group {
		padding: 0;
	}
}

/* 아주 작은 화면 (예: 480px 이하) */
@media screen and (max-width: 480px) {

	.content .main-banner .banner-inner .banner-text h2 {
		font-size: 1.5rem;
	}
	.banner-inner {
		padding: 15px;
	}
	.content .main-banner .banner-inner .banner-text-group {
		padding: 0 15px;
	}
	.content .main-banner .banner-inner .banner-img {
		padding: 0;
		padding-right: 15px;
	}
	.content .favorite-services .section-inner .item .item-group {
		padding: 15px;
	}
	.item p {
		font-size: 15px;
	}
	.process-guide .section-inner h2 {
		font-size: 20px;
	}
	.content .process-guide .section-inner {
		gap: 20px;
	}
	.process-guide .item p {
		font-size: 14px;
	}
	.content .operation-status .section-inner .column .status-board .updated-data-text .updated-item-group
		{
		font-size: 13px;
	}
	.status-board.item-row.column .item-box .font_bold.font_18 {
		font-size: 14px;
	}
	.status-board.item-row.column .item-box .font_bold.font_30 {
		font-size: 20px;
	}
	.content .utilization .utilization-title {
		font-size: 14px;
		height: 20px;
		text-align: center;
	}
	.content .release-notes .section-inner {
		padding-top: 20px;
		padding-bottom: 0;
	}
	section {
		padding: 10px;
	}
	footer {
		gap: 10px;
	}
	footer .select-wrap {
		display: none;
	}
	.content .img-board .application_button {
		padding: 0;
	}
	.release-notes .item-group5 h2 {
		font-size: 18px;
	}
	.content .utilization .utilization-item {
		padding: 5px;
	}
	.content .notice-board .section-inner .notice-list li a div p {
		font-size: 15px;
	}
	.banner-img {
		max-height: 160px;
		width: 50%;
	}
	.banner-text {
		gap: 10px;
		width: 45%;
		font-size: 13px;
		height: 100%;
	}
	.banner-title {
		font-size: 20px;
	}
	.icon-group {
		padding-top: 10px;
	}
	.stoppage {
		width: 17px;
		padding: 3px;
	}
	.img-num {
		font-size: 13px;
		padding: 0px 5px;
	}
	.indicator {
		display: none;
	}
	.content .operation-status .section-inner .column .status-board .item-box
		{
		flex: 0 0 100%;
	}
	.operation-status p {
		font-size: 15px;
	}
	.userlogin-title {
		min-width: 70px;
	}
	.method {
		width: 100%;
		padding: 20px;
	}
	.result-box {
		margin-bottom: 0px;
		flex-direction: column;
	}
	.content .release-notes .section-inner .item:not(:first-child) {
		padding: 10px;
	}
	.content .release-notes .section-inner .item:first-child {
		padding: 10px;
	}
	.content .release-notes .section-inner .item:first-child p {
		font-size: 15px;
		height: 59px;
	}
	.information-id-group {
		gap: 50px;
	}
}
}