.mypage-container {
	.sec-width {
		width: 1440px; 
	}
	.mypage-contents {
		display: flex;
	}
	.myhcont-wrap {
		width: calc(100% - 240px); padding: 50px 0 50px 50px;
		.foot-btn {
			margin-top: 30px; padding-top: 15px; border-top: 1px dashed #999;
			&.bd-none {
				margin-top: 0; padding-top: 0; border-top: none;
			}
		}
		&.user-wrap {
			.form-group {
				width: 500px; max-width: 100%; margin: 0 auto;
			}
		}
	}
	
	.myhcont-header {
		.tit {
			font-size: 2.8rem; font-weight: 800; padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid #b1b1b1;
		}
	}

	.breadcrumb {
		.tit {
			font-size: 1.4rem; padding-bottom: 50px;
			span {
				display: inline-block; position: relative; color: #777;
				&:not(:last-child) {
					padding-right: 15px; 
					&:after {
						content: '/'; position: absolute; top: 0; right: 5px;
					}
				}
				&:last-child {
					font-weight: 700; color: #000;
				}
			}
		}
	}

	.form-group {
		.form-wrap {
			max-width: 100%; padding: 0;
		}
	}

	.aside-wrap {
		min-height: 800px; width: 240px; padding: 30px 15px; border-right: 1px solid var(--line); border-left: 1px solid var(--line);
		.nav-title {
			padding: 20px 0 10px;
			.tit {
				font-size: 2.5rem; font-weight: 800; 
			}
		}
		.nav-group {
			padding: 20px 0; 
			&:not(:last-child) {
				border-bottom: 1px dashed #a6b3c1;
			}
			.group-tit {
				font-size: 1.2rem; font-weight: 800; color: #a6b3c1; padding-bottom: 7px;
			}
			.nav {
				li {    
					&:hover {
						a {
							background: #eee;
						}
					}
					&.on {
						a {
							background: #002445; color: #fff;
						}
					}
					a {
						position: relative; padding: 8px 13px; display: block; font-size: 1.5rem; font-weight: 500; border-radius: 5px;
					}
				}
			}
		}
	}
	
	.detail-info-wrap {
		.cont-title {
			position: relative; border-bottom: 1px solid var(--line); margin-bottom: 20px; border-color: #aaa; padding-bottom: 10px;
			.tit {
				font-size: 2.5rem; padding-bottom: 0;
			}
			.more {
				position: absolute; bottom: 15px; right: 0; font-size: 1.4rem; color: #777; text-decoration: underline;
			}
		}
		.group {
			&:not(:first-child) {
				padding-top: 50px;
			}
			.row {
				display: flex; flex-wrap: wrap; gap: 30px;
				.detail-group {
					flex: 1; padding: 0 0 25px; margin-bottom: 25px; border-bottom: 1px solid var(--line); word-break: break-all;
					.tit {
						font-size: 1.4rem; padding-bottom: 5px; color: #777; font-weight: 600;
					}
					.txt {
						font-size: 2rem; font-weight: 500; line-height: 1.4;
						p {
							font-size: 2rem; font-weight: 700; line-height: 1.4;
						}
					}
					.img-area {
						.img {
							width: 100%; height: 45px; 
							> img {
								max-width: 100%; max-height: 100%; object-fit: contain; 
							}
						}
						.file-txt {
							font-size: 1.4rem; color: #555; padding-left: 10px; border-left: 3px solid #d3d3d3; margin-top: 10px;
						}
						&.profile {
							.img {
								width: 150px; height: 170px;
								> img {
									object-fit: cover; width: 100%; height: 100%;
								}
							}
						}
					}
					.a-link {
						color: var(--theme);
					}
					.textarea {
						font-weight: 500;
					}
				}
			}
		}
	}

	.empty {
		text-align: center; color: #777; padding: 30px 0;
		.tit {
			font-size: 2rem; padding-bottom: 10px;
		}
	}
	
	.user-info {
		border: 1px solid var(--line);
		&:not(:last-child) {
			margin-bottom: 10px;
		}
		.name {
			padding: 10px 20px; background: #eee; font-size: 1.8rem; font-weight: 800;
		}
		.info-list {
			display: flex; flex-wrap: wrap; font-size: 1.4rem; padding: 15px 20px; border-top: 1px solid var(--line); gap: 6px 0;
			dl {
				display: flex; width: 50%;
			}
			dt {
				width: 80px; font-weight: 700;
			}
			dd {
				width: calc(100% - 80px); font-weight: 500;
			}
		}
	}
}


@media (max-width: 1200px) {
	.mypage-container {
		.myhcont-wrap {
			padding-left: 30px; width: calc(100% - 200px); 
		}
		.aside-wrap {
			width: 200px;
		}

		.detail-info-wrap {
			.cont-title {
				margin-bottom: 15px;
				.tit {
					font-size: 2rem;
				}
				.more {
					font-size: 1.3rem; bottom: 10px;
				}
			}
			.group {
				.row {
					.detail-group {
						.tit {
							font-size: 1.2rem; padding-bottom: 5px;
						}
						.txt {
							font-size: 1.7rem;
							p {
								font-size: 1.7rem;
							}
						}
					}
				}
			}
		}
		.breadcrumb {
			.tit {
				font-size: 1.3rem; padding-bottom: 30px;
			}
		}
		.user-info {
			.name {
				padding: 10px 15px; font-size: 1.7rem;
			}
			.info-list {
				font-size: 1.3rem; gap: 7px 0; padding: 15px;
				dl {
					width: 100%;
				}
				dt {
					width: 70px;
				}
				dd {
					width: calc(100% - 70px);
				}
			}
		}
	}
}


@media (max-width: 768px) {
	.mypage-container {
		.myhcont-wrap {
			padding: 80px 0 40px; width: 100%;
		}
		.aside-wrap {
			min-height: auto; position: absolute; top: 0; left: 0; z-index: 2; width: 100%; background: #fff; border:0; border-bottom: 1px solid var(--line); padding: 0; 
			.nav-title {
				padding: 10px 25px; position: relative; background: #f4f4f4;
				&:after {
					content: ''; display: block; width: 7px; height: 7px; border: 1px solid #000; border-top: 0; border-left: 0; transform: rotate(45deg); position: absolute; top: 18px; right: 25px;
				}
				.tit {
					font-size: 1.5rem; font-weight: 500;
				}
			}
			.nav-group {
				padding: 15px 0;
				.group-tit {
					padding-bottom: 5px;
				}
				.nav {
					li {
						a {
							font-size: 1.4rem; padding: 7px 10px;
						}
					}
				}
			}
			.nav-area {
				display: none; border-top: 1px solid var(--line); padding: 0 20px; box-shadow: 0 3px 4px rgba(0, 0, 0, .08);
				&.active {
					display: block;
				}
			}
		}
		.myhcont-header {
			display: none;
		}
		
		.detail-info-wrap {
			.cont-title {
				.tit {
					font-size: 1.8rem;
				}
			}
			.group {
				.row {
					flex-direction: column; gap: 0;
					.detail-group {
						padding-bottom: 15px; margin-bottom: 15px;
						.txt {
							font-size: 1.6rem;
							p {
								font-size: 1.6rem;
							}
						}
					}
				}
			}
		}
		.user-info {
			.info-list {
				gap: 5px 0;
			}
			.name {
				font-size: 1.6rem;
			}
		}
	}
}