/* 
	thematicsSection_1 css root
	
	--thematics1_TITLE_BG: radial-gradient(50% 50% at 50% 50%, #ffffff1a, #0000);
	--thematics1_TITLE_BG_BEFORE: radial-gradient(50% 50% at 50% 50%, #ffffff1a, #ffffff1a 15.45%, #0000);
	--thematics1_TITLE_BG_AFTER: radial-gradient(50% 50% at 50% 50%, #0d1016, #0000);
	--thematics1_TITLE_CONTENT_BEFORE: linear-gradient(to left, transparent, #36a5d9, transparent);
	--thematics1_TITLE_CONTENT_AFTER: #36a5d9;
	--thematics1_TITLE_H3_TXT_COLOR: var(--color2);
	--thematics1_TITLE_SUB_TXT_COLOR: var(--color2);
	
	--thematics1_ITEM_BG: #13171f;
	--thematics1_ITEM_BORDER_COLOR: var(--color2);
	--thematics1_ITEM_FILTER: drop-shadow(0 0 .3rem #ffffff91);
	--thematics1_ITEM_LIGHT: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7469%) hue-rotate(161deg) brightness(108%) contrast(100%);
	--thematics1_ITEM_CONTENT_TXT_COLOR: var(--color2);
 */

.thematics-1- .section-wrap- {
	margin-top: 3rem;
	margin-bottom: 2rem
}

.thematics-1- .title-area- {
	position: relative;
	display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 0 0 2rem
}

.thematics-1- .title-area- .title-background- {
	position: absolute;
    width: 100%;
    height: calc(100% + 2rem);
    top: -2rem;
    left: 0;
    background: var(--thematics1_TITLE_BG)
}

.thematics-1- .title-area- .title-background-:before {
	content: "";
    position: absolute;
    width: 90%;
    height: 10px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: var(--thematics1_TITLE_BG_BEFORE)
}

.thematics-1- .title-area- .title-background-:after {
	content: "";
	position: absolute;
	left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 50%;
    height: 50%;
    background: var(--thematics1_TITLE_BG_AFTER)
}

.thematics-1- .title-area- .title-content- {
	position: relative;
	width: fit-content;
    text-align: center;
    padding: 0 0 .5rem
}

.thematics-1- .title-area- .title-content-:before {
	content: "";
    position: absolute;
    width: calc(100% + 4rem);
    height: 1px;
    left: -2rem;
    bottom: 0;
    background: var(--thematics1_TITLE_CONTENT_BEFORE)
}

.thematics-1- .title-area- .title-content-:after {
	content: "";
    position: absolute;
    width: 15%;
    height: 3px;
    left: 50%;
    bottom: -1px;
    transform: translateX(-50%);
    border-radius: 1rem;
    background: var(--thematics1_TITLE_CONTENT_AFTER)
}

.thematics-1- .title-area- .title-content- h3 {
	margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--thematics1_TITLE_H3_TXT_COLOR)
}

.thematics-1- .title-area- .title-content- .sub- {
	color: var(--thematics1_TITLE_SUB_TXT_COLOR)
}

.thematics-1- .thematics-items-area- {
	display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 10px
}

.thematics-1- .thematics-items-area- .thematics-item- {
	position: relative;
	width: 100%;
    cursor: pointer
}

.thematics-1- .thematics-items-area- .thematics-item- .item-bg- {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
    height: 100%;
    z-index: -1;
	border: 1px solid;
    border-radius: 5px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-color: var(--thematics1_ITEM_BG);
    border-color: var(--thematics1_ITEM_BORDER_COLOR);
    filter: var(--thematics1_ITEM_FILTER)
}

.thematics-1- .thematics-items-area- .thematics-item- .item-bg- .item-light- {
	position: absolute;
    border-radius: 0;
    width: 60px;
    height: 60px;
    filter: var(--thematics1_ITEM_LIGHT)
}

.thematics-1- .thematics-items-area- .thematics-item-:nth-child(odd) .item-bg- .light-1- {
	top: -1.9rem;
    right: 1rem
}

.thematics-1- .thematics-items-area- .thematics-item-:nth-child(odd) .item-bg- .light-2- {
	bottom: -1.9rem;
    left: 1.5rem
}

.thematics-1- .thematics-items-area- .thematics-item-:nth-child(even) .item-bg- .light-1- {
	top: -1.9rem;
    left: 1rem
}

.thematics-1- .thematics-items-area- .thematics-item-:nth-child(even) .item-bg- .light-2- {
	bottom: -1.9rem;
    right: 1.5rem
}

.thematics-1- .thematics-items-area- .thematics-item- .item-content- {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	gap: 2vw;
	padding: 2vw;
	color: var(--thematics1_ITEM_CONTENT_TXT_COLOR)
}

.thematics-1- .thematics-items-area- .thematics-item- .item-content- img {
    width: 100%
}

.thematics-1- .thematics-items-area- .thematics-item- .item-content- span {
    font-size: 5vw;
    font-weight: bold;
    text-transform: uppercase
}