@charset "utf-8";
.bentogird-home {
	
}
.container {
	max-width: 1200px;
	width: 100%;
	margin: 0 auto;
	/* padding: 0 30px;
	padding: 0 var(--container-padding) */
}

.text-heading {
	font-size: 1.875rem;
	font-size: var(--text-heading-size);
	line-height: .98em;
	line-height: var(--text-heading-leading);
	letter-spacing: -.005em;
	letter-spacing: var(--text-heading-tracking);
	font-weight: 600;
	font-weight: var(--text-heading-weight);
	/* color: var(--theme-heading-color); */
}

.text-subheading {
	font-size: .812rem;
	font-size: var(--text-subheading-size);
	line-height: .98em;
	line-height: var(--text-subheading-leading);
	letter-spacing: .05em;
	letter-spacing: var(--text-subheading-tracking);
	font-weight: 600;
	font-weight: var(--text-subheading-weight);
	color: var(--theme-subheading-color);
	text-transform: uppercase;
}

.text-body {
	font-size: 1rem;
	font-size: var(--text-body-size);
	line-height: 1.5;
	line-height: var(--text-body-leading);
	letter-spacing: -.0248em;
	letter-spacing: var(--text-body-tracking);
	font-weight: 400;
	font-weight: var(--text-body-weight);
	color: var(--theme-body-color);
}

.tile-grid {
	display: grid;
	grid-gap: 24px;
	grid-template-columns: repeat(12, 1fr);
	padding: 30px;
}

@media(min-width: 600px) {
	.tile-grid {
		grid-gap: 2vw;
	}
}

@media(min-width: 823px) {
	/* .tile-grid {
		grid-gap: 2vw;
	} */
}

.tile-grid-section {
	grid-column-start: span 12;
	height: 60vw;
}

/* @media(min-width: 420px) {
	.tile-grid-section {
		height: 395px;
	}
}

@media(min-width: 823px) {
	.tile-grid-section {
		height: 356px;
	}
}

@media(min-width: 1080px) {
	.tile-grid-section {
		height: 460px;
	}
} */
/* @media(min-width: 420px) {
	.tile-grid-section {
		height: 395px;
	}
} */

@media(min-width: 823px) {
	.tile-grid-section {
		height: 356px;
	}
}

@media(min-width: 1080px) {
	.tile-grid-section {
		height: 355px;
	}
}
.tile-grid-section--sub-grid {
	display: grid;
	grid-gap: 24px;
	height: calc(120vw + 24px);
}

/* @media(min-width: 420px) {
	.tile-grid-section--sub-grid {
		height: calc(790px + 2.5vw)
	}
} */

@media(min-width: 600px) {
	.tile-grid-section--sub-grid {
		height: calc(650px + 2.5vw);
		grid-gap: 2.5vw;
		grid-column-start: span 12;
	}
}

@media(min-width: 823px) {
	.tile-grid-section--sub-grid {
		grid-gap: 32px;
		display: flex;
		flex-flow: column;
		grid-template-columns: 1fr 1fr;
		height: inherit;
	}
}

@media(min-width: 823px) {
	.tile-grid-section--sub-grid .masonry-tile {
		flex-grow: 1
	}
}

@media(min-width: 823px) {
	.tile-grid-section--sub-grid .masonry-tile__content {
		padding: 24px;
	}
}

@media(min-width: 823px) {
	.tile-grid-section--sub-grid .masonry-tile__content .text-heading {
		font-size: 1.5rem;
	}
}

@media(min-width: 600px) {
	.tile-grid-section--full {
		grid-column-start: span 12;
	}
}

@media(min-width: 823px) {
	.tile-grid-section--full {
		height: 365px;
	}
}

@media(min-width: 1080px) {
	.tile-grid-section--full {
		height: 365px;
	}
}

@media(min-width: 823px) {
	.tile-grid-section--third {
		grid-column-start: span 5; !important
	}
}

@media(min-width: 823px) {
	.tile-grid-section--two-third {
		grid-column-start: span 7 ;!important
	}
	.tile-grid-section--two-third {
		grid-column-start: span 7 ;!important
	}
}

.masonry-tile {
	background: #121212;
	border-radius: 16px;
	position: relative;
	overflow: hidden;
	transition: transform .2s ease, box-shadow .2s;
	width: 100%;
	display: block;
	box-shadow: none;
	transform: scale(1.000001);
	height: 100%;
}

@media(any-hover) {
	.masonry-tile.pro-link: hover {
		box-shadow: none;
		transition: transform .15s ease-out;
		transform: scale(1.01)
	}

	.masonry-tile.pro-link:hover .masonry-tile__container {
		transform: scale(.99);
		transition: transform .15s ease-out;
	}
}

.masonry-tile__container {
	transition: transform .2s ease;
	position: relative;
	height: 100%;
	width: 100%;
	z-index: 3;
}

.masonry-tile__bg {
	position: absolute;
	top: -.5%;
	left: -.5%;
	width: 101%;
	height: 101%;
	background-position: bottom;
	background-size: 100% auto;
	background-repeat: no-repeat;
	z-index: 1;
	filter: blur(0);
}

@media(min-width: 823px) {
	.masonry-tile__bg {
		background-position: 50%;
		background-size: cover;
	}
}

.masonry-tile__bg img,
.masonry-tile__bg video {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	aspect-ratio: inherit;
	-o-object-fit: cover;
	object-fit: cover;
	min-width: 101%;
	min-height: 101%;
}

@media(min-width: 600px) {
	.masonry-tile__bg.mobile {
		display: none;
	}
}

.masonry-tile__bg.tablet {
	display: none;
}

@media(min-width: 600px) {
	.masonry-tile__bg.tablet {
		display: block;
	}
}

@media(min-width: 823px) {
	.masonry-tile__bg.tablet {
		display: none;
	}
}

.masonry-tile__bg.desktop {
	display: none;
}

@media(min-width: 823px) {
	.masonry-tile__bg.desktop {
		display: block;
	}
}

.masonry-tile__content {
	padding: 24px;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	flex-flow: column;
	z-index: 2;
}

.masonry-tile__container .masonry-tile-icon-dianji {
	padding: 24px;
	position: absolute;
	bottom: 0;
	right: 0;
	z-index: 2;
}

@media(min-width: 823px) {
	.masonry-tile__content {
		padding: 32px;
	}
}

.masonry-tile__content>* {
	margin-top: 10px;
}

.masonry-tile__content>:first-child {
	margin-top: 0;
}

@media(min-width: 823px) {
	.masonry-tile__content>* {
		max-width: 370px;
	}
}

.masonry-tile__content .text-subheading {
	color: #024280;
	/* opacity: .8; */
	font-size: 1.875rem;
	font-weight: 500;
}

.masonry-tile__content .text-heading {
	font-size: 1.5rem;
}

/* @media(min-width: 420px) {
	.masonry-tile__content .text-heading {
		font-size: 1.875rem;
	}
} */

@media(min-width: 823px) {
	.masonry-tile__content .text-heading {
		font-size: 1.5rem;
	}
}

@media(min-width: 1080px) {
	.masonry-tile__content .text-heading {
		font-size: 1.5rem;
		font-weight: 500;
	}
}

.masonry-tile__content .text-body {
	font-size: .875rem;
	color: var(--theme-heading-color);
	opacity: .8;
}

.masonry-tile__content .pro-btn {
	font-size: .6875rem;
}

.masonry-tile--gradient-short .masonry-tile__container:after {
	height: 40%
}

@media(min-width: 823px) {
	.masonry-tile--text-center .masonry-tile__content {
		text-align: center;
	}
}

.home-container {
	max-width: 100%;
	margin: 0 auto;
	position: relative;
	z-index: 4;
}

.home-container--top {
	margin-top: max(40vh, 300px)
}

.home-container--top .text-subheading {
	color: #fff;
	opacity: .6;
}

@media(min-width: 420px) {
	/* .home-container {
		max-width: 420px;
	} */
	tile-grid-section {
		grid-column-start: span 12;
		height: 60vw;
	}
}

@media(min-width: 600px) {
	/* .home-container {
		max-width: 620px;
	} */
}

@media(min-width: 823px) {
	/* .home-container {
		max-width: 820px;
	} */
	/* .home-container {
		height: 600px;
	} */
	
}

@media(min-width: 1080px) {
	.home-container {
		max-width: 1200px;
	}
}