

.line{
	display:flex;
	gap:40px;
	margin: 40px 0;
	flex-wrap:wrap;
	justify-content:center;
}
#company2{
	display:none;
}
#map > svg{
    background-image:url('/company/animation/map/modal/images/left.png');
    background-size: contain;
    background-position-x: 70%;
    background-repeat: no-repeat;
    position:relative;
    background-position-y: -5px;
    z-index:-1;
}
.ico{
	width:calc((100% - 80px) / 3); 
	background-size:contain;
	background-repeat: no-repeat;;
	padding:40px;
	background-color:#9b1c23;
	border-radius:10px;
	display:flex;
	flex-direction:column;
	gap:20px;
	align-items:center;
	min-width:275px;
	max-height:333px;
	position:relative;
	clip-path: polygon(0 0, 75% 0, 100% 25%, 100% 100%, 0 100%);
	filter:url(#round);
}
.ico::after{
	position:absolute;
	width:calc(100% - 6px);
	height:calc(100% - 6px);
	content:'';
	background-color:#fff;
	top:3px;
	left:3px;
	z-index:-1;
	clip-path: polygon(0 0, 75% 0, 100% 25%, 100% 100%, 0 100%);
	border-radius:7px;
	
}
.ico span{
	font-size:20px;
	line-height:25px;
	font-weight:500;
	text-align:center;
	display:block;
	margin:auto;
	color:#55575B;
}

.ico > div:has(svg){
	width:50%
}
h2{
	font-size:52px;
	line-height:62px;
	font-weight:600;
	color:#9b1c23
}
.border{
	border:solid 3px #9A1B22;
	padding: 20px;
	border-radius:10px;
	min-height:240px;
	
}
#mission{
	font-size:42px;
	line-height:48px;
	font-weight:400;
	color:#54565A;
	display:flex;
	align-items:center;
	gap:30px;
	padding:20px 20px;
	background-color:#ffffff;
	transition:0.3s ease-out;
}
#mission:hover{
	background-color:#9b1c23;
	color:white;
}
.border p span{
	transition:0.3s easu-out;
}
.border:hover p span{
	color:#9b1c23;
}
p#mission > span{
	font-weight:400;
	
}
#mission > img{
	padding:10px;
	transition:0.3s ease-out;
}
#mission:hover > img{
	filter: grayscale(1)  brightness(10)
}

#mission.border{
	border:solid 3px #9b1c23;
}
p{
	font-size:24px;
	font-weight:400;
}
p:last-child{
	margin-bottom:0!important;
}
p >span{
	font-weight:600;
	transition:0.3s easy;
}
.glass{
	height:calc(100% + 80px);
	transform:translateY(-80px);
	left: calc(50% + 3px);
	z-index:100;
	right:0;
	width:65%;
	position:absolute;
	background-color:#ffffff75
}
.vert{
	border-left:solid 3px #9b1c23;
	position:absolute;
	width:0;
	height:100%;
	left:50%;
	z-index:101;
	transform: translateY(-10px);
	
}
.rus{
    height: 92%;
    width: 50%;
    position: absolute;
    transform: translate(0%, 1.5%);
    top: 0;
    left: 50%;
    filter: blur(5px);
}
.map-container{
	position:relative;
	min-height: 850px;
	margin-top:85px;
}
.map-mover{
	width: 50%;
	position:absolute;
}
#sale{
    top: 62%;
    left: 19%;
}
#region{
    top: 25%;
    left:25%;
}
#map{
	opacity:0;
	transition: opacity 1.2s ease-out
}
#region,#sale{
	font-size:16px;
	line-height:60px;
	font-weight:600;
	position:absolute;
	z-index:102;
	background-color:#9b1c23c9;
	color:white;
	border-radius:10px;
	padding:10px 20px;
	border:solid 3px #9b1c23;
}
.grid2{
    position: absolute;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px 0;
    right: 0;
    top: 50%;
    transform: translate(0%, -50%);
    z-index: 105;
    width: 50%;
    justify-content: space-between;
    justify-items: end;
}
.grid2 h4{
	font-size:54px;
	font-weight:600;
	color:#9b1c23;
	background-color:#ffffffc9;
	border-radius:10px;
	margin:0;
	width: 285px;
	display:flex;
	flex-direction:column;
	text-align:center;
	border-radius:10px;
	border:solid 3px #9b1c23;
	padding:20px;
	min-height:185px;
	transition:0.3s ease-out;
}
.grid2 h4:hover{
	background-color:#9b1c23c9;
	color:white;
}
.grid2 h4>span{
	font-size:20px;
	color:#54565A;
	font-weight:500;
	line-height:25px;
	margin:auto;
	transition:0.3s ease-out;

}
.grid2 h4:hover>span{
	color:white;
}

@media(max-width:1700px){
	.ico{
		background-image:none;
		border:solid 3px #9b1c23;
	}
}
@media(max-width:1560px){
	h2{
		text-align:center;
	}
	#mission.border{
		border:none;
	}
	#mission{
		font-size:24px;
		line-height:normal;
		text-align:center;		
	}
	p#mission > span {
		font-weight:500;
	}
	#company{
		margin-bottom:0;
	} 
	#mission img{
		display:none;
	}
	#sale, #region{
		display:none;
	}
	.grid2{
		left:0;
		justify-items: start;
	}
	.glass{
		display:none;
	}
	.map-container > img{
		display:none;
	}
	.map-mover{
		width:100%;
	}
	.vert{
		display:none;	
	}
	.border{
		min-height:0
	}
	#map > svg{
		transform:translateX(53%)!important;
		background-position-x: 12px;
	}
}
@media(max-width:1390px){
	.grid2 h4{
		font-size:36px;
		min-height:100px;
		width:230px;
	}
	.grid2 h4>span {
		font-size:18px;
	}
}
@media(max-width:1250px){
	.grid2{
		grid-template-columns:1fr;
		justify-items:center;
	}
}
@media(max-width:1140px){
	#company{
		display:none;
	}
	.grid2{
		display:none;
	}
	#map > svg{
		transform:translateY(25%)!important;
		background-image:url('/company/animation/map/modal/images/3.png');
		background-position-x: 10px;
	}
	
}
@media(max-width:960px){
	#company2{
		display:block;
	}

	#sale::after {
		display:none;
	}
	#sale,#region{
		display:none;
	}
	h2{
		font-size:28px
	}
}
@media(max-width:920px){
	#map > svg{
		width:200%!important;
		background-position-x: 58%;;
		transform:translateY(-5%)!important;
	}
}
@media(max-width:750px){
	.map-container{
		min-height:750px
	}
	#mission{
		font-size:20px;
		line-height:normal;
		text-align:center;		
	}
	p{
		font-size:20px;
	}

}
@media(max-width:560px){
	.map-container{
		min-height:600px
	}
}
@media(max-width:480px){
	.map-container{
		min-height:500px
	}
}
@media(max-width:400px){
	.map-container{
		min-height:400px
	}
}
@media(max-width:315px){
	.map-container{
		min-height:300px
	}
}
