@charset "utf-8";

/* ===================================================================
DETAIL CONTAINER
=================================================================== */

.d-container {
	position: relative;
	display: flex;
	justify-content: center;
	column-gap: calc(30 / 1100 * 100%);
	width: 100%;
	max-width: 1130px;
	margin: 0 auto;
	padding: 0 15px;;
}

.d-s {
	position: relative;
	width: calc(770 / 1100 * 100%);
	max-width: 770px;
}

.d-e {
	position: relative;
	width: calc(300 / 1100 * 100%);
	max-width: 300px;
}

/* ===================================================================
SIDEL CONTAINER
=================================================================== */

.side-container {
	position: sticky;
	top: 90px;
	padding: 0 15px;
	background: rgba(255, 255, 255, 0.82);
	border-radius: 12px;
	box-shadow: rgba(31, 41, 55, 0.12) 0px 3px 5px;
}

.side-menu {
	display: flex;
	align-items: center;
    margin: 0px 0px 8px;
}

.side-menu span.text {
	margin: 0 10px 0 0;
	color: rgb(122, 128, 147);
	font-size: 12px;
}

.side-menu span.border {
	flex: 1;
	height: 1px;
	background: rgb(122, 128, 147);
}

.side-list > ul {
	display: flex;
	justify-content: flex-start;
	flex-direction: column;
	row-gap: 5px;
}

.side-list > ul > li {
	width: 100%;
}

.side-list > ul > li a {
	padding: 10px;
	color: rgb(57, 68, 90);
	font-size: 14px;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.82));
	border-radius: 10px;
	transition: color .2s cubic-bezier(.65, 0, .45, 1),background-color .2s cubic-bezier(.65, 0, .45, 1);
}

.side-list > ul > li a:hover {
    color: rgb(15, 22, 38);
    background: rgba(17, 24, 39, 0.05);
}

.side-list > ul > li a.none {
	pointer-events: none;
}

@media screen and (max-width : 1023px) {

	/* ===================================================================
	DETAIL CONTAINER
	=================================================================== */

	.d-container {
		flex-direction: column;
		column-gap: 0;
		max-width: 530px;
	}

	.d-s,
	.d-e
	{
		width: 100%;
		max-width: 100%
	}

	/* ===================================================================
	SIDEL CONTAINER
	=================================================================== */

	.side-container {
		position: relative;
		top: unset;
		padding: 0 15px;
		background: transparent;
		border-radius: unset;
		box-shadow: unset;
	}

	.side-list > ul > li a:hover {
		color: rgb(15, 22, 38);
		background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.82));
	}

}