.sec_header
{
	display: flex;
	align-items: stretch;
	gap: 0;
	position: relative;
	/* Current: Let Each Section Decide */
	margin: 0 0 0 20rem;
	z-index: 99;
}

.sech_title
{
	position: relative;
	font-size: 2rem;
	font-weight: bold;
	margin: 0;
	padding: 0.8rem 1rem;
	padding-left: 0;
	color: white;
	z-index: 9;
	white-space: nowrap;
	display: flex;
	align-items: center;
	height: 3rem;
	isolation: isolate
	/* Tutorial: https://developer.mozilla.org/en-US/docs/Web/CSS/isolation */
}

.sech_title::before
{
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: -22rem;
	right: -0.5rem;
	background: #609CD4;
	transform: skew(-20deg);
	/* z-index: Higher than sech_tabs_wrap, lower than sech_title::before (100) */
	z-index: 99;
	isolation: isolate
}

/* Remarks: Mimicking Header's Style */
.sech_tabs
{
	display: flex;
	height: 4.6rem;
	flex: 0 0 auto;
	top: 0;
	transform: skew(-20deg);
	box-sizing: border-box;
	padding-bottom: 0.8rem;
	align-items: center;
	margin-left: 0.5rem;
	display: inline-flex; /* Width adaptive, triggering scrolling */
}

.sech_tabs .nav_btn
{
	flex: 0 0 auto;
	display: flex;
	position: relative;
	box-sizing: border-box;
	justify-content: center;
	align-items: center;
	background-color: #FFF;
	color: #000;
	cursor: pointer;
	font-weight: 600;
	font-size: 1rem;
	transition: background-color 0.1s, color 0.1s;
	padding: 0 1rem;
	white-space: nowrap;
	height: 100%;
	border-bottom: 1px solid #CCC;
}

.sech_tabs .nav_btn:last-child
{
	border-right: 1px solid #CCC;
}


.sech_tabs .nav_btn:hover,
.sech_tabs .nav_btn.active
{
	background-color: #F54;
	color: #FFF;
}

.sech_tabs .nav_btn .nav_btn_text
{
	margin: 1rem;
	transform: skew(17deg);
}

/* Btn Divider */
.sech_tabs .nav_btn:not(:last-child)::after
{
	content: "";
	position: absolute;
	top: 10%;
	right: 0;
	width: 0.1rem;
	height: 80%;
	background-color: #CCC;
	pointer-events: none;
}

/* Outer Wrap */
.sech_tabs_wrap_container {
    position: relative;
    width: 100%;
}

.sech_tabs_wrap {
    overflow-x: auto;
    overflow-y: hidden;
    height: 4.6rem;
    padding-right: 4rem; /* 给右侧遮罩留空间 */
}

.tabs_right_mask {
    position: absolute;
    top: 0;
    right: 0;
    width: 4rem; /* 遮罩宽度 */
    height: 82%;
    pointer-events: none;
    background: linear-gradient(290deg,rgba(0, 0, 0, 1) 2%, rgba(255, 255, 255, 0) 50%);
    z-index: 10;
}

/* Hide Scrollbar */
.sech_tabs_wrap::-webkit-scrollbar
{
    height: 6px;
}

.sech_tabs_wrap::-webkit-scrollbar-thumb
{
    border-radius: 3px;
    background: rgba(0,0,0,.25);
}

.sech_tabs_wrap::-webkit-scrollbar-track
{
    background: transparent;
}

/* Special Cases */
.sech_title
{
	transform: skew(0deg);
}

.sech_title_text
{
	transform: skew(-3deg);
	/* z-index: Higher than sech_title::before (99) */
	z-index: 100;
}

/* Original: 1920px */
@media (max-width: 120em)
{
    .sec_header
	{
        margin-left: 6rem;
    }
}

/* Original: 1280px */
@media (max-width: 80em)
{
    .sec_header
	{
        margin-left: 2rem;
    }
}