@import url(variable.less);

// 년도 탭
.history_tab {
	padding-bottom: 2rem;
	background-color: #fff;
	position: sticky;
	z-index: 1;
	transition:
		top 0.4s ease,
		height 0.4s ease,
		transform 0.4s ease;
}

.history_tab.fix {
	top: 8rem;
	padding-top: 2rem;
	@media @tab_l {
		top: 6.2rem;
	}
}

.history_tab.hide,
.history_tab.fix.hide {
	top: 0rem;
}

.history_item {
	position: relative;
	margin-left: 8rem;
	margin-top: 5rem;
	&:not(:last-child) {
		padding-bottom: 12rem;
	}
	.desc {
		display: flex;
		flex-direction: column;
		position: relative;
		gap: 6rem;
		.item {
			position: relative;
			&:before {
				content: "";
				background-color: @color_white;
				width: 3.2rem;
				height: 3.2rem;
				position: absolute;
				top: 0;
				left: -1.6rem;
				border-radius: 50%;
			}
			&:after {
				content: "";
				width: 1.8rem;
				height: 1.8rem;
				position: absolute;
				top: 0.8rem;
				left: -0.8rem;
				border-radius: 50%;
				border: 5px solid @color_main;
				box-sizing: border-box;
			}
			.inner {
				margin-left: 3rem;
				display: flex;
				flex-direction: column;
				gap: 1.6rem;
				overflow: hidden;
				.month {
					display: flex;
					flex-direction: column;
					gap: 1rem;
					ul {
						display: flex;
						align-items: center;
						.hd {
							width: 8rem;
							flex: 0 0 auto;
						}
						.txt {
							flex: 1 1 100%;
							display: flex;
							flex-direction: column;
							gap: 1.6rem;
						}
						@media @mobile_l {
							flex-direction: column;
							align-items: flex-start;
						}
					}
				}
			}
			&:last-child {
				height: 100%;
			}
		}
		&:before {
			position: absolute;
			top: 0;
			left: 0;
			border-left: 1px dashed @color_lightgray;
			content: "";
			height: 100%;
		}
	}
	@media @tab {
		margin-left: 1rem;
		&:not(:last-child) {
			padding-bottom: 10rem;
		}
	}
}