
:root {
	--bg-white: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEX///+nxBvIAAAACklEQVR4AWNgAAAAAgABc3UBGAAAAABJRU5ErkJggg==);
	--bg-lgrey: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEXs7Oxc9QatAAAACklEQVR4AWNkAAAABAACGr4IAwAAAABJRU5ErkJggg==);
	--bg-grey: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEXd3d3u346CAAAACklEQVR4AWNmAAAACAAEbVhFewAAAABJRU5ErkJggg==);
	--border: 2px solid #555;
	--group-bg: #f4f4f4;
}


.map_wrap * {
	color: #444;
	box-sizing: border-box;
}

.map_wrap {
	margin: 0 auto;
	padding-bottom: 15px;
	max-width: 1037px;
	/*overflow-x: auto;*/
	line-height: 1.2;
}
.map_wrap .mapsec {
	width: 1035px;
	height: 200px;
	padding-left: 0px;
	font-size: 13px;
	position: relative;
}
.map_wrap .mapsec.extra {
	/*height: auto;*/
}
.map_wrap .mapsec ul {
	margin: 0;
}
.map_wrap .mapsec::before,
.map_wrap .mapsec::after {
	content: ' ';
	display: block;
	position: absolute;
	top: 2px;
	left: 12px;
	z-index: 99;
}
.map_wrap .mapsec::after {
	left: 489px;
}
.map_wrap .mapsec.o-2::before { content: '-2' }.map_wrap .mapsec.o-2::after { content: '-1' }
.map_wrap .mapsec.o-1::before { content: '-1' }.map_wrap .mapsec.o-1::after { content:  '0' }
.map_wrap .mapsec.o0::before  { content:  '0' }.map_wrap .mapsec.o0::after  { content:  '1' }
.map_wrap .mapsec.o1::before  { content:  '1' }.map_wrap .mapsec.o1::after  { content:  '2' }
.map_wrap .mapsec.o2::before  { content:  '2' }.map_wrap .mapsec.o2::after  { content:  '3' }
.map_wrap .mapsec.o3::before  { content:  '3' }.map_wrap .mapsec.o3::after  { content:  '4' }
.map_wrap .mapsec.o4::before  { content:  '4' }.map_wrap .mapsec.o4::after  { content:  '5' }
.map_wrap .mapsec.o5::before  { content:  '5' }.map_wrap .mapsec.o5::after  { content:  '6' }
.map_wrap .mapsec.o6::before  { content:  '6' }.map_wrap .mapsec.o6::after  { content:  '7' }
.map_wrap .mapsec.o7::before  { content:  '7' }.map_wrap .mapsec.o7::after  { content:  '8' }
.map_wrap .mapsec.o8::before  { content:  '8' }.map_wrap .mapsec.o8::after  { content:  '9' }


.map_wrap .mapsec .w,
.map_wrap .mapsec .b {
	background: var(--bg-white) repeat center center;
	position: absolute;
	top: 0px;
	left: 0px;
	width: 70px;
	height: 200px;
	/*margin-left: -2px;*/
	border-radius: 7px;
	border: var(--border);
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}
.map_wrap .mapsec .cg  { background: var(--bg-grey) repeat center center; }
.map_wrap .mapsec .clg { background: var(--bg-lgrey) repeat center center; }

.map_wrap .mapsec > div:nth-child( 1) { left:   0px }
.map_wrap .mapsec > div:nth-child( 2) { left:  30px }/*   */
.map_wrap .mapsec > div:nth-child( 3) { left:  68px }
.map_wrap .mapsec > div:nth-child( 4) { left: 106px }/*   */
.map_wrap .mapsec > div:nth-child( 5) { left: 136px }
.map_wrap .mapsec > div:nth-child( 6) { left: 204px }
.map_wrap .mapsec > div:nth-child( 7) { left: 230px }/*   */
.map_wrap .mapsec > div:nth-child( 8) { left: 272px }
.map_wrap .mapsec > div:nth-child( 9) { left: 306px }/*   */
.map_wrap .mapsec > div:nth-child(10) { left: 340px }
.map_wrap .mapsec > div:nth-child(11) { left: 382px }/*   */
.map_wrap .mapsec > div:nth-child(12) { left: 408px }

.map_wrap .mapsec > div:nth-child(13) { left: 476px }
.map_wrap .mapsec > div:nth-child(14) { left: 506px }/*   */
.map_wrap .mapsec > div:nth-child(15) { left: 544px }
.map_wrap .mapsec > div:nth-child(16) { left: 582px }/*   */
.map_wrap .mapsec > div:nth-child(17) { left: 612px }
.map_wrap .mapsec > div:nth-child(18) { left: 680px }
.map_wrap .mapsec > div:nth-child(19) { left: 706px }/*   */
.map_wrap .mapsec > div:nth-child(20) { left: 748px }
.map_wrap .mapsec > div:nth-child(21) { left: 782px }/*   */
.map_wrap .mapsec > div:nth-child(22) { left: 816px }
.map_wrap .mapsec > div:nth-child(23) { left: 858px }/*   */
.map_wrap .mapsec > div:nth-child(24) { left: 884px }

.map_wrap .mapsec .w.o {
	left: 952px;
	padding-top: 0px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	text-align: center;
}
.map_wrap .mapsec .w.o::before,
.map_wrap .mapsec .w.o::after {
	content: 'Octave';
	display: block;
}
.map_wrap .mapsec .w.o::after {
	font-weight: bold
}
.map_wrap .mapsec.o-2 .w.o::after { content: '-5' }
.map_wrap .mapsec.o-1 .w.o::after { content: '-4' }
.map_wrap .mapsec.o0  .w.o::after { content: '-3' }
.map_wrap .mapsec.o1  .w.o::after { content: '-2' }
.map_wrap .mapsec.o2  .w.o::after { content: '-1' }
.map_wrap .mapsec.o3  .w.o::after { content:  '0' }
.map_wrap .mapsec.o4  .w.o::after { content:  '1' }
.map_wrap .mapsec.o5  .w.o::after { content:  '2' }
.map_wrap .mapsec.o6  .w.o::after { content:  '3' }
.map_wrap .mapsec.o7  .w.o::after { content:  '4' }
.map_wrap .mapsec.o8  .w.o::after { content:  '5' }



.map_wrap .mapsec .w {
	padding-top: 99px;
}
.map_wrap .mapsec .w.pt20 {
	padding-top: 119px;
}
.map_wrap .mapsec .w.pb20 {
	padding-bottom: 19px;
}
.map_wrap .mapsec .w.ig.ty,
.map_wrap .mapsec .w.ig.to {
	padding-top: 119px;
}
.map_wrap .mapsec .w.ig.ty::before,
.map_wrap .mapsec .w.ig.to::before {
	content: '';
	position: absolute;
	display: block;
	bottom: 67px;
	left: 13px;
	width: 40px;
	height: 17px;
}
.map_wrap .mapsec .w.igb.ty,
.map_wrap .mapsec .w.igb.to {
	padding-top: 139px;
}
.map_wrap .mapsec .w.igb.ty::before,
.map_wrap .mapsec .w.igb.to::before {
	content: '';
	position: absolute;
	display: block;
	bottom: 47px;
	left: 14px;
	width: 40px;
	height: 17px;
}


.map_wrap .mapsec .b {
	height: 100px;
	z-index: 99;
}
.map_wrap .mapsec .b.pt20 {
	padding-top: 19px;
}
.map_wrap .mapsec .b.pb20 {
	padding-bottom: 19px;
}

.map_wrap .mapsec .w.igb {
	padding-top: 119px;
}
.map_wrap .mapsec .b.igb {
	background: var(--bg-white) no-repeat top center;
	background-size: 70px 75px;
	padding-bottom: 15px;
	border-radius: 7px;
	border: var(--border);
}
.map_wrap .mapsec .b.igb.clg {
	background: var(--bg-lgrey) no-repeat top center;
	background-size: 70px 75px;
	padding-bottom: 15px;
	border-radius: 7px;
	border: var(--border);
}

.map_wrap .mapsec .b.igb.f::after {
	content: '';
	position: absolute;
	background: var(--bg-white);
	/*background: red;*/
	display: block;
	left: 35px;
	bottom: 0;
	width: 5px;
	height: 2px;
}
.map_wrap .mapsec > div:nth-child( 2).igb.f::after { left: 35px }
.map_wrap .mapsec > div:nth-child( 4).igb.f::after { left: 28px }
.map_wrap .mapsec > div:nth-child( 7).igb.f::after { left: 38px }
.map_wrap .mapsec > div:nth-child( 9).igb.f::after { left: 31px }
.map_wrap .mapsec > div:nth-child(11).igb.f::after { left: 24px }
.map_wrap .mapsec > div:nth-child(14).igb.f::after { left: 35px }
.map_wrap .mapsec > div:nth-child(16).igb.f::after { left: 28px }
.map_wrap .mapsec > div:nth-child(19).igb.f::after { left: 38px }
.map_wrap .mapsec > div:nth-child(21).igb.f::after { left: 31px }
.map_wrap .mapsec > div:nth-child(23).igb.f::after { left: 24px }

.map_wrap .mapsec .b.igb.f.clg::after {
	content: '';
	position: absolute;
	background: var(--bg-lgrey);
	background: red;
	display: block;
	left: 35px;
	bottom: 0;
	width: 5px;
	height: 2px;
}

.map_wrap .mapsec .b.igb.ty,
.map_wrap .mapsec .b.igb.to {
	padding-bottom: 36px;
}
.map_wrap .mapsec .b.igb.ty::before,
.map_wrap .mapsec .b.igb.to::before {
	content: '';
	position: absolute;
	display: block;
	bottom: 31px;
	left: 14px;
	width: 40px;
	height: 17px;
}

.map_wrap .mapsec .ty::before {
	background: yellow;
}
.map_wrap .mapsec .to::before {
	background: orange;
}









.map_wrap .mapsec .h > div::before {
	content: '';
	display: block;
	position: absolute;
	top: 1px;
	right: 1px;
	left: 1px;
	bottom: 1px;
	border-radius: 5px;
	border: 3px solid yellow;
	z-index: 555;
}
.map_wrap .mapsec .w.h > div::before {
	top: 99px;
}


.map_wrap .mapsec .ig,
.map_wrap .mapsec .ig {
	padding-bottom: 19px;
}
.map_wrap .mapsec .b.ig.ty,
.map_wrap .mapsec .b.ig.to {
	padding-bottom: 39px;
}
.map_wrap .mapsec .b.ig.ty::before,
.map_wrap .mapsec .b.ig.to::before {
	content: '';
	position: absolute;
	display: block;
	bottom: 34px;
	left: 13px;
	width: 40px;
	height: 17px;
}


/*---------------------------------------------------------    */
.map_wrap .mapsec .gl {
	position: absolute;
	bottom: 5px;
	left: 5px;
	width: 129px;
	height: 24px;
	border-radius: 0;
	background: var(--group-bg);
	border: none;
	z-index: 11;
	font-weight: bold;
	text-align: center;
	padding-top: 4px;
}
.map_wrap .mapsec .gl.s2  { left:  74px }
.map_wrap .mapsec .gl.s3  { left: 141px }
.map_wrap .mapsec .gl.s4  { left: 210px }
.map_wrap .mapsec .gl.s5  { left: 277px }
.map_wrap .mapsec .gl.s6  { left: 345px }
.map_wrap .mapsec .gl.s7  { left: 413px }
.map_wrap .mapsec .gl.s8  { left: 481px }
.map_wrap .mapsec .gl.s9  { left: 549px }
.map_wrap .mapsec .gl.s10 { left: 617px }
.map_wrap .mapsec .gl.s11 { left: 685px }
.map_wrap .mapsec .gl.s12 { left: 753px }

.map_wrap .mapsec .gl.w3 { width: 198px }
.map_wrap .mapsec .gl.w4 { width: 263px }
.map_wrap .mapsec .gl.w5 { width: 335px }
.map_wrap .mapsec .gl.w6 { width: 396px }
.map_wrap .mapsec .gl.w7 { width: 474px }
.map_wrap .mapsec .gl.w8 { width: 534px }

/*---------------------------------------------------------    */
.map_wrap .mapsec .gu {
	position: absolute;
	top: 71px;
	left: 36px;
	width: 136px;
	height: 24px;
	border-radius: 0;
	background: var(--group-bg);
	border: none;
	font-weight: bold;
	text-align: center;
	padding-top: 4px;
	z-index: 111;
}
.map_wrap .mapsec .gu.s2 {  left: 113px; width: 186px }
.map_wrap .mapsec .gu.s3 {  left: 236px }
.map_wrap .mapsec .gu.s4 {  left: 316px }
.map_wrap .mapsec .gu.s5 {  left: 392px; width: 186px }

.map_wrap .mapsec .gu.w3  { width: 264px }
.map_wrap .mapsec .gu.w4  { width: 340px }
.map_wrap .mapsec .gu.w5  { width: 416px }
.map_wrap .mapsec .gu.w6  { width: 543px }
.map_wrap .mapsec .gu.w7  { width: 619px }
.map_wrap .mapsec .gu.w8  { width: 747px }
.map_wrap .mapsec .gu.w9  { width: 823px }
.map_wrap .mapsec .gu.w10 { width: 899px }

.map_wrap .mapsec .gu.s2.w3 { width: 262px }
.map_wrap .mapsec .gu.s2.w4 { width: 339px }
.map_wrap .mapsec .gu.s2.w5 { width: 466px }
.map_wrap .mapsec .gu.s2.w6 { width: 533px }
.map_wrap .mapsec .gu.s2.w7 { width: 670px }
.map_wrap .mapsec .gu.s2.w8 { width: 746px }
.map_wrap .mapsec .gu.s2.w9 { width: 822px }

.map_wrap .mapsec .gu.s3.w3 { width: 210px }
.map_wrap .mapsec .gu.s3.w4 { width: 339px }
.map_wrap .mapsec .gu.s3.w5 { width: 415px }
.map_wrap .mapsec .gu.s3.w6 { width: 543px }
.map_wrap .mapsec .gu.s3.w7 { width: 619px }
.map_wrap .mapsec .gu.s3.w8 { width: 695px }

.map_wrap .mapsec .gu.s4.w3 { width: 262px }
.map_wrap .mapsec .gu.s4.w4 { width: 339px }
.map_wrap .mapsec .gu.s4.w5 { width: 467px }
.map_wrap .mapsec .gu.s4.w6 { width: 543px }
.map_wrap .mapsec .gu.s4.w7 { width: 619px }

.map_wrap .mapsec .gu.s5.w3 { width: 262px }
.map_wrap .mapsec .gu.s5.w4 { width: 391px }
.map_wrap .mapsec .gu.s5.w5 { width: 467px }
.map_wrap .mapsec .gu.s5.w6 { width: 543px }

/*---------------------------------------------------------    */
.map_wrap .mapsec .gb {
	background: transparent;
	position: absolute;
	top: 77px;
	left: 5px;
	width: 92px;
	height: 44px;
	padding-top: 24px;
	padding-right: 28px;
	border-radius: 0;
	border: none;
	font-weight: bold;
	text-align: center;
	z-index: 77;
}
.map_wrap .mapsec .gb::before,
.map_wrap .mapsec .gb::after {
	content: '';
	position: absolute;
	display: block;
	left: 0;
	right: 0;
	top: 0;
	bottom: 25px;
	border-radius: 0;
	background: var(--group-bg);
	border: none;
	z-index: -1;
}
.map_wrap .mapsec .gb.cw::before,
.map_wrap .mapsec .gb.cw::after {
	background: white;
}
.map_wrap .mapsec .gb::after {
	top: 19px;
	bottom: 0;
	right: 31px;
}
.map_wrap .mapsec .gb.s2  { left:  36px; width:  92px }
.map_wrap .mapsec .gb.s3  { left:  74px; width:  98px }
.map_wrap .mapsec .gb.s4  { left: 112px; width:  92px }
.map_wrap .mapsec .gb.s5  { left: 143px; width: 129px }
.map_wrap .mapsec .gb.s6  { left: 210px; width:  88px }

.map_wrap .mapsec .gb.s18 { left: 686px; width:  88px }

.map_wrap .mapsec .gb.w3  { width: 129px; padding-right:  0   }.map_wrap .mapsec .gb.w3::after  { right:  0   }
.map_wrap .mapsec .gb.w4  { width: 167px; padding-right: 36px }.map_wrap .mapsec .gb.w4::after  { right: 37px }
.map_wrap .mapsec .gb.w5  { width: 195px; padding-right:  0   }.map_wrap .mapsec .gb.w5::after  { right:  0   }
.map_wrap .mapsec .gb.w6  { width: 267px; padding-right:  0   }.map_wrap .mapsec .gb.w6::after  { right:  0   }
.map_wrap .mapsec .gb.w7  { width: 295px; padding-right: 28px }.map_wrap .mapsec .gb.w7::after  { right: 28px }
.map_wrap .mapsec .gb.w8  { width: 336px; padding-right:  0   }.map_wrap .mapsec .gb.w8::after  { right:  0   }
.map_wrap .mapsec .gb.w9  { width: 371px; padding-right: 35px }.map_wrap .mapsec .gb.w9::after  { right: 35px }
.map_wrap .mapsec .gb.w10 { width: 405px; padding-right:  0   }.map_wrap .mapsec .gb.w10::after { right:  0   }
.map_wrap .mapsec .gb.w11 { width: 447px; padding-right: 41px }.map_wrap .mapsec .gb.w11::after { right: 41px }
.map_wrap .mapsec .gb.w12 { width: 474px; padding-right:  0   }.map_wrap .mapsec .gb.w12::after { right:  0   }



.map_wrap .mapsec .gb.s3.w3 { width: 212px }


.map_wrap .mapsec .gb.s6.w6  { width: 236px; padding-right: 42px }.map_wrap .mapsec .gb.s6.w6::after  { right: 42px }
.map_wrap .mapsec .gb.s6.w12 { width: 466px; padding-right:  0   }
.map_wrap .mapsec .gb.s18.w5 { width: 195px; padding-right:  0   }
.map_wrap .mapsec .gb.s18.w6 { width: 236px; padding-right: 42px }.map_wrap .mapsec .gb.s18.w6::after  { right: 42px }



/*---------------------------------------------------------    */
.map_wrap .mapsec .n {
	background: var(--bg-white);
	position: absolute;
	top: 50px;
	left: 14px;
	width: 180px;
	height: 100px;
	border-radius: 7px;
	border: var(--border);
	font-weight: normal;
	z-index: 222;
	display: flex;
	flex-direction: column;
	justify-content: center;
	/*align-content: center;*/
}
.map_wrap .mapsec .n .bold { font-weight: bold  }
.map_wrap .mapsec .n.tal   { text-align: left   }
.map_wrap .mapsec .n.tac   { text-align: center }

.map_wrap .mapsec .n .table {
	margin: 0 7px;
	/*border: 1px solid #777;*/
	padding: 2px 9px;
}
.map_wrap .mapsec .n .table:not(.hdr) {
	border: 1px solid #777;
	padding: 4px 9px;
}
.map_wrap .mapsec .n .table > div {
	display: flex;
}
.map_wrap .mapsec .n .table > div > div:first-child {
	width: 125px;
}
.map_wrap .mapsec .n .table > div > div:last-child {
	width: 85px;
}

.map_wrap .mapsec .n.t0  { top:  0px }
.map_wrap .mapsec .n.t30 { top: 30px }
.map_wrap .mapsec .n.t40 { top: 40px }
.map_wrap .mapsec .n.t45 { top: 45px }
.map_wrap .mapsec .n.t50 { top: 50px }
.map_wrap .mapsec .n.t55 { top: 55px }
.map_wrap .mapsec .n.t60 { top: 60px }
.map_wrap .mapsec .n.t80 { top: 80px }

.map_wrap .mapsec .n.h80   { height:  80px }
.map_wrap .mapsec .n.h90   { height:  90px }
.map_wrap .mapsec .n.h100  { height: 100px }
.map_wrap .mapsec .n.h110  { height: 110px }
.map_wrap .mapsec .n.h120  { height: 120px }
.map_wrap .mapsec .n.hauto { height:  auto;
	padding-top: 15px;
}
.map_wrap .mapsec .n.hauto > div {
	padding-bottom: 15px;
}

.map_wrap .mapsec .n.s4     { left: 219px; width: 246px; }
.map_wrap .mapsec .n.s4.w3  { left: 219px; width: 180px; }
.map_wrap .mapsec .n.s8  { left: 489px; width: 180px; }
.map_wrap .mapsec .n.s9  { left: 559px; width: 246px; }
.map_wrap .mapsec .n.s11 { left: 694px; width: 246px; }





