#MappingContent{ background: #fff; padding: 100px; position: relative; }
#MappingContent.pt0{ padding-top: 0; }
#MappingContent .inside-mapping{ width: 100%; position: relative; height: auto; max-width: 1152px; margin: 0 auto; }
#MappingContent .inside-mapping img{ 
	display: block; width: 100%; height: auto; position: relative; top: 0; left: 0; z-index: 0;
}
#MappingContent .inside-mapping svg#InsideMapping{
	width: 100%; display: block; height: 100%;
	position: absolute; top: 0; left: 0; z-index: 1; 
}
#MappingContent .inside-mapping svg#InsideMapping path{ 
	fill: #ac7976;cursor: pointer;
	-webkit-transition: fill, fill-opacity 200ms ease-in-out;
	-moz-transition: fill, fill-opacity 200ms ease-in-out;
	-ms-transition: fill, fill-opacity 200ms ease-in-out;
	-o-transition: fill, fill-opacity 200ms ease-in-out;
	transition: fill, fill-opacity 200ms ease-in-out; 
}
#MappingContent .inside-mapping svg#InsideMapping path.enabled:hover{ fill: #2a9841; fill-opacity: .5; }
#MappingContent .inside-mapping svg#InsideMapping path.enabled-inactive:hover{ fill: #D10D1C; fill-opacity: .5; }

.compass-icon:before{ 
	content:''; display: block; width: 100px; height: 100px; overflow: hidden;
	position: absolute; bottom: 30px; left: 30px; z-index: 1;
	background-repeat: no-repeat; background-size: 100% 100%;
}
.compass-icon-12:before{ background-image: url(../images/compass12.png); }
.compass-icon-34:before{ background-image: url(../images/compass34.png); }

/*#MappingContent .inside-mapping{ border: 1px solid red; }*/
.direction-item{ display: block; position: absolute; padding: 7px 7px 7px 27px; color: #88909d; text-transform: uppercase; font-weight: 300; }
.direction-west{ 
	top: 50%; left: 20px; border-top: 1px solid #88909d; left: calc((100% - 1565px) / 2); 
	-moz-transform: rotate(90deg);
	-webkit-transform: rotate(90deg);
	-o-transform: rotate(90deg);
	-ms-transform: rotate(90deg);
	transform: rotate(90deg);
}

.direction-item:before{
	content: ''; display: block; width: 0; height: 0;
	position: absolute; top: 11px; left: 0;
	border-style: solid;
	border-width: 20px 10px 0 10px;
	border-color: #88909d transparent transparent transparent;
}
.direction-north:before{	
	border-width: 0 10px 20px 10px; 
	border-color: transparent transparent #88909d transparent;
}

.direction-east{ 
	top: 50%; right: 20px; border-top: 1px solid #88909d; right: calc((100% - 1520px) / 2); 	
	-moz-transform: rotate(-90deg);
	-webkit-transform: rotate(-90deg);
	-o-transform: rotate(-90deg);
	-ms-transform: rotate(-90deg);
	transform: rotate(-90deg);
}
.direction-north{ top: 20px; left: 50%; border-bottom: 1px solid #88909d; }
.direction-south{ bottom: 20px; left:  50%; border-top: 1px solid #88909d; }
.direction-north, .direction-south{	
	transform: translate(-50%,0);
	-webkit-transform:translate(-50%,0);
	-moz-transform:translate(-50%,0);		
}

#main-popup{
	display: block; width: 150px; height: 218px; padding: 30px 20px 0 20px; opacity: 0;
	position: fixed; top: 0; left: 0; z-index: 10;
	color: #fff; text-align: center; overflow: hidden; font-size: 15px; 
	background: url(../images/ballon.svg) 0 0 no-repeat; background-size: 100% auto;
}
#main-popup > *{ color: #fff; position: relative; z-index: 1; margin: 0; }
#main-popup span, #main-popup span em{ display: block; }
#main-popup span.ap-price{ 
	font-family: 'Kurale', serif; font-weight: 600; font-size: 1.1em; 
	border: 1px solid rgba(255,255,255,.5);
	border-bottom: 1px solid rgba(255,255,255,.5);
	border-radius: 5px;
}
#main-popup span.ap-priceask{ 
	font-family: 'Kurale', serif; font-weight: 400; font-size: 1em; 
	border: 1px solid rgba(255,255,255,.5);
	border-bottom: 1px solid rgba(255,255,255,.5);
	border-radius: 5px;
}
#main-popup > h3{ font-size: 1.5em; margin: 0; margin-bottom: 7px; }
#main-popup span.ap-area{ margin-top: 7px; }
#main-popup span.p{ line-height: normal; padding-top: 7px; }
#main-popup > h3.cname{ margin-top: 7px; }

#main-popup.popup-inactive{ background-image: url(../images/ballon-red.svg); }
#main-popup.popup-inactive span.ap-status{ margin-top: 25px; }

.detail-content #main-popup{ padding: 50px 20px 0 20px; }
.detail-content #main-popup{ background-image: url(../images/ballon-r.svg); }
.detail-content #main-popup > h3{ font-size: 1.4em; }

.mapping-wrapper{ 
	float: left; width: 75%; max-width: 1040px; height: auto; position: relative;  z-index: 0; 
}
.mapping-wrapper:after{
	content: ''; display: block; width: 1px; height: 100%;
	position: absolute; top: 0; right: -50px; background: #555c66;
}
.mapping-wrapper img{ display: block; width: 100%; height: auto; position: relative; top: 0; left: 0; z-index: 0; }
.mapping-wrapper svg{ width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 1; }
.mapping-wrapper svg path{
	fill: #ac7976; fill-opacity: 0;	
	-webkit-transition: fill-opacity 200ms ease-in-out;
	-moz-transition: fill-opacity 200ms ease-in-out;
	-ms-transition: fill-opacity 200ms ease-in-out;
	-o-transition: fill-opacity 200ms ease-in-out;
	transition: fill-opacity 200ms ease-in-out; 
}
.mapping-wrapper svg path:hover{ fill-opacity: 0.2; }


.detail-content{ background: #fff; position: relative; padding: 50px calc((100% - 1430px) / 2); }
.detail-content .info{ float: right; width: calc(100% - 1040px); min-width: 25%; padding: 30px 0 30px 100px; position: relative; }
.detail-content .info:after{
	content: ''; display: block; width: 1px; height: 100%;
	position: absolute; top: 0; left: 49px; background: #555c66;
}
.detail-content .info .btn-view-more{ float: left; background: #2a9841; margin-top: 30px; }


.buildings-mapping{ display: block; width: 100%; position: relative; }
.buildings-mapping img{ display: block; width: 100%; height: auto; }
.buildings-mapping svg{ 
	display: block; width: 100%; height: 100%;
	position: absolute; top: 0; left: 0;
}

.buildings-mapping path{ 
	pointer-events: all; cursor: pointer;
	opacity: 0; fill: url(#HoverImage);
	-webkit-transition: opacity 200ms ease-in-out;
	-moz-transition: opacity 200ms ease-in-out;
	-ms-transition: opacity 200ms ease-in-out;
	-o-transition: opacity 200ms ease-in-out;
	transition: opacity 200ms ease-in-out;
	
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: alpha(opacity=0);
	-moz-opacity: 0;
	-khtml-opacity: 0;
	opacity: 0;
}
.buildings-mapping path:hover{ 
	opacity: 1;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	filter: alpha(opacity=100);
	-moz-opacity: 1;
	-khtml-opacity: 1;
	opacity: 1;
}



@media screen and (max-width:1700px){
	.detail-content{ padding-left: 130px; }
}
@media screen and (max-width:1530px){
	.detail-content{ padding-left: 120px; padding-right: 50px; }
	.compass-icon:before{ width: 90px; height: 90px; left: 20px; bottom: 20px; }
	.detail-content .info{ width: 400px; }
	.mapping-wrapper{ width: calc(100% - 400px); }
}
@media screen and (max-width:1490px){
	.direction-west{ left: 0; margin-left: -45px; }
	.direction-east{ right: 0;  margin-right: -23px; }
}

@media screen and (max-width:1280px){ 	
	.detail-content .info{ width: 320px; }
	.mapping-wrapper{ width: calc(100% - 320px); }
	.detail-content{ padding-top: 30px; padding-left: 20px; padding-right: 20px; padding-bottom: 120px; }
	.detail-content .info{ padding-top: 0; padding-bottom: 0; padding-left: 50px; }
	.detail-content .info:after{ left: 24px; }
	.mapping-wrapper:after{ right: -25px; }
	
	.detail-content #main-popup{ width: 150px; height: 217px; padding-top: 50px; }
	.detail-content #main-popup > h3{ font-size: 1.1em; }
}
@media screen and (max-width:1024px){ 	
	#MappingContent{ padding-left: 50px; padding-right: 50px; padding-top: 50px; }
	.direction-west{ left: 0; margin-left: -92px; }
	.direction-east{ right: 0;  margin-right: -66px; }
	.direction-north{ top: 0; }
	.direction-south{ bottom: 40px; }
}
@media screen and (max-width:840px){ 
	#main-popup, .detail-content #main-popup{ width: 100px!important; height: 145px!important; padding: 33px 0 0 0!important; }
	#main-popup #pDesc{ display: none; }
}

@media screen and (max-width:768px){ 
	.direction-item{ font-size: 15px; padding: 3px 3px 3px 27px; line-height: 26px; }
	.direction-item:before{ top: 4px; }
	.compass-icon:before{ width: 75px; height: 75px; bottom: 10px; left: 10px; }
	
	.mapping-wrapper{ width: 100%; }
	.detail-content .info{ clear: both; width: 100%; float: none; max-width: 350px; margin: 20px auto; border-left: 0px solid; padding-left: 0; }
	.detail-content .info:after, .mapping-wrapper:after{ display: none; }
	.detail-content{ padding-bottom: 0; }
	.detail-content .compass-icon:before{ }
	.detail-content .info .table-params{ max-width: none; }
	.detail-content .ap-status{ text-align: center; }
}
@media screen and (max-width:550px){ 
	.direction-west, .direction-east{ top: 0; margin-top: 100px; }
	.direction-item{ font-size: 12px; }
	.direction-west{ left: 0; margin-left: -70px; }
	.direction-east{ right: 0;  margin-right: -50px; }
	.detail-content.compass-icon:before{ display: none; }
}