/* 
	banner_4 css root
	
	--banner4_CONTAINER_MAX_WIDTH: unset;
	--banner4_CONTAINER_MARGIN: 0 1.5rem;
	--banner4_CONTAINER_PADDING: 0;

	--banner4_ITEM_RADIUS: 1vw;
	--banner4_ITEM_1_BORDER_COLOR: #36a5d9;
	--banner4_ITEM_1_FILTER: drop-shadow(0px 0px 1rem #36a5d991);
	--banner4_ITEM_1_LIGHT: brightness(0) saturate(100%) invert(47%) sepia(100%) saturate(300%) hue-rotate(155deg) brightness(99%) contrast(102%);
	--banner4_ITEM_2_BORDER_COLOR: #f3ea12;
	--banner4_ITEM_2_FILTER: drop-shadow(0px 0px 1rem #f3ea1291);
	--banner4_ITEM_2_LIGHT: brightness(0) saturate(100%) invert(94%) sepia(88%) saturate(5779%) hue-rotate(350deg) brightness(100%) contrast(91%);
	
	--banner4_ITEM_CONTENT_TXT_COLOR: var(--color2);
	--banner4_ITEM_CONTENT_SPEC_STYLE_BG: linear-gradient(#ffc700 25%, #ff8a00);
	--banner4_ITEM_CONTENT_SPEC_STYLE_FONT_FAMILY: fantasy;
	--banner4_ITEM_CONTENT_BTN_BG: #36a5d9;
	--banner4_ITEM_CONTENT_BTN_TXT_COLOR: var(--color2);
 */

.banner-4- .banner-container {
	max-width: var(--banner4_CONTAINER_MAX_WIDTH);
	margin: var(--banner4_CONTAINER_MARGIN);
	padding: var(--banner4_CONTAINER_PADDING)
}

.banner-4- .banner-area- {
	display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 2vw
}

.banner-4- .banner-item- {
	position: relative
}

.banner-4- .banner-item- .item-bg- {
	position: relative;
	border-radius: var(--banner4_ITEM_RADIUS);
	border: 1px solid;
	border-color: transparent
}

.banner-4- .banner-item- .item-bg- img {
	width: 100%;
	height: 100%;
	border-radius: var(--banner4_ITEM_RADIUS)
}

.banner-4- .banner-item- .item-bg- .item-light- {
	display: none;
	position: absolute;
	border-radius: 0;
	width: 120px;
	height: 120px;
	z-index: -2;
	opacity: 0
}

.banner-4- .banner-item-:hover .item-bg- .item-light- {
	display: block;
	z-index: 1;
	opacity: 1
}

.banner-4- .banner-item- .item-bg- .light-1- {
	top: -3.8rem;
    left: 10%;
    transform: translateX(-10%)
}

.banner-4- .banner-item- .item-bg- .light-2- {
	bottom: -3.8rem;
    left: 40%;
    transform: translateX(-40%)
}

.banner-4- .banner-item- .item-content- {
	position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: grid;
    grid-template-columns: 55% 45%;
    padding: 1.5vw 2vw;
    font-size: 2vw;
    font-weight: 400;
    line-height: 2vw;
    color: var(--banner4_ITEM_CONTENT_TXT_COLOR)
}

.banner-4- .banner-item- .item-content- .space- {
	margin: 1vw 0 0
}

.banner-4- .banner-item- .item-content- h3 {
	margin: 0;
    font-size: 2rem;
    font-weight: 700;
    font-style: italic;
    text-transform: uppercase;
    letter-spacing: 1px
}

.banner-4- .banner-item- .item-content- .special-style- {
	line-height: normal;
    font-size: 3vw;
    background: var(--banner4_ITEM_CONTENT_SPEC_STYLE_BG);
    -webkit-text-fill-color: transparent;
    background-clip: text;
    -webkit-background-clip: text;
    font-family: var(--banner4_ITEM_CONTENT_SPEC_STYLE_FONT_FAMILY)
}

.banner-4- .banner-item- .item-content- button {
	border: none;
    padding: .2vw 1.5vw;
    border-radius: .3vw;
    font-size: var(--BUTTON_MED_FONT_SIZE);
    font-weight: var(--MED_FONT_WEIGHT);
    color: var(--banner4_ITEM_CONTENT_BTN_TXT_COLOR);
    background: var(--banner4_ITEM_CONTENT_BTN_BG)
}

.banner-4- .banner-item- .item-content- button:hover {
	filter: brightness(.6)
}

.banner-4- .banner-item- .item-content- .content-img- {
	position: absolute;
    width: 40%;
    bottom: 1px;
    right: 5%;
    transform: translateX(-5%)
}

.banner-4- .banner-item-1:hover .item-bg- {
	border-color: var(--banner4_ITEM_1_BORDER_COLOR);
	filter: var(--banner4_ITEM_1_FILTER)
}

.banner-4- .banner-item-1 .item-bg- .item-light- {
	filter: var(--banner4_ITEM_1_LIGHT)
}

.banner-4- .banner-item-2:hover .item-bg- {
	border-color: var(--banner4_ITEM_2_BORDER_COLOR);
	filter: var(--banner4_ITEM_2_FILTER)
}

.banner-4- .banner-item-2 .item-bg- .item-light- {
	filter: var(--banner4_ITEM_2_LIGHT)
}