main.subPage.bodyWrap.map { overflow: hidden;
}
p.address {
font-size: .9rem;
} h2.commune-title {
position: absolute;
bottom: 30px;
color: rgb(255 255 255 / 59%);
z-index: 9;
font-size: 4rem;
font-family: 'Poor Story', "CJ OnlyOne"; }
ul.bingo-list {
display: flex;
flex-wrap: wrap;
}
.gm-style .gm-style-iw-c {
top:8px !important;
overflow:inherit !important;
}
.gm-style-moc {
background-color: rgb(46 204 113 / 40%) !important;
display:none !important;	
}
.gm-style-mot {
color: #fff !important;
font-family: 'Poor Story' !important; 
}
.gm-style .gm-style-iw-tc {
display:none !important;
}
.gm-style-iw.gm-style-iw-c {
padding: 0 !important;
}
.gm-style-iw-d {
overflow: initial !important;
}
.scrollFix h3 {
color:#fff;
font-weight:400; 
font-size:1.05rem;min-width:200px;
}
.scrollFix h3:after {
background:#fff !important;
}
button.gm-ui-hover-effect.green,
.item.green.active,
.scrollFix.green {
background:#1aa153 !important;
}
button.gm-ui-hover-effect.blue,
.item.blue.active,
.scrollFix.blue {
background:#3597d3 !important;
}
button.gm-ui-hover-effect.yellow,
.item.yellow.active,
.scrollFix.yellow {
background:#fec300 !important;
color: #333 !important;
}
.gm-style-iw-tc.green:after,
.map-outline .owl-dots {
display: none !important;
}
div#map_canvas > div {
background-color: #f2f2f2 !important;
}
[data-theme="dark"] div#map_canvas > div {
background-color: #1e1f21 !important;
}
.map-content {
max-width: 700px;
}
p.maeul-bold {
font-weight: 100;
font-size: 28px;
margin: 30px 0 0 0;
}
div.maeul-info, p.maeul-info {
margin: 0 30px 10px ;
padding: 0;
font-size: 17px;
font-weight: 300;
text-align: left;
}
div#map_canvas div {
outline: none !important;
border: none !important;
-webkit-backface-visibility: hidden !important;
}
div#bin_net .owl-nav div {
margin-top: -50px !important;    top: 50%;
}
div#sidenav {
right: 10px;
top: 30px;
}
body.single-unit header.event-header.hmap h1 {
position: absolute;
font-size: 2.5rem;
top: 5px;    line-height: 1.2;
font-weight: 300;
}
.title-before {color:#fff !important}
.map-outline .owl-prev:before, .map-outline .owl-next:before {
background: #111 !important; }
div#map.kakaomap >div >div > div > img { 
filter: grayscale(.9);
}
div#map.kakaomap >div >div > div > div >img {border-radius: 50%;
border: 7px solid rgb(248 168 173 / 58%) !important;
height: 60px !important;
width: 60px !important;
margin-left: -4px; }
.customoverlay {position:relative;bottom:85px;border-radius:6px;border: 1px solid #ccc;border-bottom:2px solid #ddd;float:left;}
.customoverlay:nth-of-type(n) {border:0; box-shadow:0px 1px 2px #888;}
.customoverlay a {display:block;text-decoration:none;color:#000;text-align:center;border-radius:6px;font-size:14px;font-weight:bold;overflow:hidden;background: #d95050;background: rgb(250 147 155 / 78%)  url(https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/arrow_white.png) no-repeat right 14px center;}
.customoverlay .title {display:block;text-align:justify;background:#fff;margin-right:35px;padding:10px 15px;font-size:14px;font-weight:bold;}
.customoverlay:after {content:'';position:absolute;margin-left:-12px;left:50%;bottom:-12px;width:22px;height:12px;background:url(https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/vertex_white.png)}
.customoverlay:hover a {
background: #fa939b url(https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/arrow_white.png) no-repeat right 14px center;
}
.kakaomap { height: 500px;}
.map-outer {
position: relative;
}		
.map-outline {position:relative;}
#map_canvas {width:100%; height:540px;-webkit-backface-visibility: hidden;margin-top: 2rem; }
#commune_net {
position:absolute;
top:30px;
right:30px;
z-index:9998;
-webkit-transform:translateZ(0);  -webkit-backface-visibility: hidden;
}
#commune_net li{ opacity:.9;
transition:all .3s;
}
#commune_net li:hover {
opacity:1;z-index: 9;
transform: scale(1.1);
}
#commune_net li.active {
opacity:1;z-index: 9;	
transform: scale(1.1);
}
li#menu-item-5991,
li#menu-item-199 a:before,
li#menu-item-199 a:after {display:none;}
#open-commune-map #commune_net {
display:none;
}
#open-commune-map.open #commune_net {
display:flex;
}
.open-map-nav {
display: none;
z-index: 999;
position: absolute;
top: 10px;
right: 10px;
height: 43px;
width: 43px;
border-radius: 50%;
background: #017ee5;
text-indent: -8000px;
}
span.jumin-info {margin-top:5px;}
.open-map-nav span {
position: absolute;
height: 4px;
width: 4px;
background-color: #fff;
border-radius: 50%;
left: 50%;
top: 50%;
bottom: auto;
right: auto;
-webkit-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
-o-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
.open-map-nav span::before, .open-map-nav span::after {
content: '';
height: 100%;
width: 100%;
position: absolute;
left: 0;
background-color: inherit;
border-radius: inherit;
}
.open-map-nav span::after {
bottom: -9px;
}
.open-map-nav span::before {
top: -9px;
}
a.open-map-nav.open span {
background-color: rgba(62, 57, 71, 0);
position: absolute;
height: 4px;
width: 4px;
background-color: #fff;
border-radius: 50%;
left: 50%;
top: 50%;
bottom: auto;
right: auto;
-webkit-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
-o-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
a.open-map-nav.open span::before {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
top: 1px;
}
a.open-map-nav.open span::after {
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-ms-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
bottom: 0;
}
a.open-map-nav.open span::before, a.open-map-nav.open span::after {
background-color: #fff;
height: 3px;
width: 20px;
border-radius: 0;
left: -8px;
}
li.bingo.list.hidden,
.item.fast {
display: none;
}
body.post-type-archive-commune .owl-dots {
display: none !important;
}
.cluster > div > span {
color: #fff;
}
body.post-type-archive-commune li.bingo {
position: relative;
margin: 2% .5%;
transition: all .4s;
display: flex;
flex-direction: column;
flex: 1 1 19%;
}
body.post-type-archive-commune .owl-carousel .owl-stage-outer {
height: 270px;
background: #111;
padding: 10px 0;
}
body.post-type-archive-commune li.bingo h4 {
height: 64px;
}
.squares-in,
.bingo-secion {
width: 100%;
display: block;
background-size: cover !important;
background-position: center !important;
height: 150px;
padding: 5%;
background-repeat:no-repeat !important;
}
.post-type-archive-commune li.bingo.list {
box-shadow: 0 0 1px #017ee5;
}
[data-theme="dark"] .post-type-archive-commune li.bingo.list {
box-shadow: 0 0 1px #000;
}
.squares-in {border:none;}
.squares {
padding: 10px;
font-size: .9rem;
position: relative;	
}
.squares span {
font-size: .8rem;
padding: 4px 6px;
background: #efefef;
border-radius: 2px;
color:#222 !important;
}
[data-theme="dark"] .squares span {
background: rgb(18 18 18 / 16%);
color: #ddd !important;	
}
.squares:before {
content: "";
width: 50px;
height: 3px;
display: block;
background: #222;
position: absolute;
top: -3px;
}
.map-outline .item {
background: #fff;
cursor: crosshair;
}
[data-theme="dark"] .map-outline .item { background: #333; }
.map-outline .item:after {
content: "";
width: 1px;
height: 100%;
position: absolute;
background: #111;
z-index: 9;
top: 0;
right: 0;    max-height: 405px;
}
.map-outline .item h4 {
padding: 0 10px;
font-size: .9rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.dark-mode .scrollFix,
.dark-mode .item h4 {
color: #222;
}
.dark-mode .item.active h4 {
color:#fff;
}
.bingo-cat,
body.post-type-archive-commune li.bingo h4 {
background: #017ee5;
margin: 0;
padding: 10px;
color: #fff;
border: 1px solid #017ee5;
font-size: .9rem;
font-weight: 300;
}
[data-theme="dark"] .bingo-cat,
[data-theme="dark"] .post-type-archive-commune li.bingo h4 { 
background: #111;
border: 1px solid #111;	
}
.bingo-cat {
font-size: .9rem;    white-space: nowrap;
position:relative;	
}
.bingo-cat:before {
content: "";
width: 50px;
height: 3px;
display: block;
background: #fff;
position: absolute;
top: -3px;
}
body.post-type-archive-commune li.bingo a {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
text-indent: -8000px;
}
ul.cat.left.bingo {
margin: 2rem 0;
}
ul.cat.left.bingo li {
margin: 0 5px;
}
ul.cat.left.bingo span {
width: 25px;
height: 25px;
line-height: 25px;
top: 8px;
}
div#bin_net {
width: 100%;
position: relative;
overflow: hidden;
}
ul.catlist {
position: absolute;
z-index: 99;
top: 5px;
left: 5px;
}
ul.catlist li {
background: #017ee5;
display: inline-block;
color: #fff;
cursor: pointer;
font-size: 1rem;
width: 60px;
text-align: center;
height: 60px;
line-height: 60px;
border-radius: 50%;
margin-right: 5px;
font-family: 'Poor Story', "CJ OnlyOne";
position: relative;	
}
ul.catlist li i {
font-style: normal;
position: absolute;
left: 0;
width: 100%;
}
ul.cat.left li {
font-family: "CJ OnlyOne";	
}
ul.catlist li.current {background: #222;}
.scrollFix a.home {
background: rgb(255 255 255 / 14%);
color: #fff;
padding: 0px 5px;
line-height: 30px;
border-radius: 2px;
font-size: .95rem;
display: block;
text-align: center;
margin: 3px 0;
min-width:150px;
}
.item.active {
background: #9a358b;
color:#fff;
}
.item.active .squares:before {
background:#fff;
}
div.gm-style > div > div >div > div > div > img{
-webkit-transition: all .3s ease; -webkit-backface-visibility: hidden; font-family:'Noto Sans', 'Noto Sans KR',  NanumBarunGothic,sans-serif !important;
-webkit-backface-visibility: hidden !important;
-webkit-transform:translateZ(0); } div.gm-style:hover > div > div >div > div > div > img{ }
div.gm-style > div > div > div > div > div > div,
.gm-style .gm-style-iw { opacity:1 !important;
}
.gmnoprint > div > div {
background: none !important;
}
.gmnoprint > div > button {
background: #fff !important;
box-shadow: none !important;
border-radius: 50%;
}
.gmnoprint > div {
background: none !important;
box-shadow: none !important;
}
div.gm-style > div > a > div > img {
}
div.gm-style > div > div >div > div + div > div >img {
opacity:0 !important; }
div.gm-style > div > div >div > div + div > div.cluster > img {opacity:1 !important;}
div.gm-style > div > div >div > div > img,
div.gm-style > div > div > div + div > div + div > div { filter: grayscale(0) !important; opacity: 1 !important; 
}
div.gm-style > div > div >div > div > img,
div.gm-style > div > div > div + div > div + div > img { border-radius: 50% !important;
border: 6px solid rgb(53 151 211 / 80%) !important;
}
div.gm-style > div > div >div > div > img[src*="red"],
div.gm-style > div > div > div + div > div + div > img[src*="red"],
div.gm-style > div > div > div + div > div + div > img.red {
border: 6px solid rgb(229 6 21 / 68%) !important;
}
div.gm-style > div > div >div > div > img[src*="중랑"],
div.gm-style > div > div > div + div > div + div > img[src*="중랑"],
div.gm-style > div > div > div + div > div + div > img.yellow {
border: 6px solid rgb(254 195 0 / 80%) !important;
}
div.gm-style > div > div > div + div > div + div > img.purple {
border: 6px solid rgb(154 53 139 / 69%) !important;
}
div.gm-style > div > div > div + div > div + div::before { }
div.gm-style > div > div >div > div > img[src*="서초"],
div.gm-style > div > div > div + div > div + div > img[src*="서초"]{
border: 6px solid rgb(26 161 83 / 80%) !important
}
.gm-style h3 {margin-bottom:5px; }
.gm-style h3:after {
content: "";
width: 50px;
height: 3px;
display: block;
background: #974f9e;
margin: 3px 0 5px;	
}
.gm-style-iw.gm-style-iw-c button {
top: 5px !important;
right: 5px !important;
opacity: 1 !important;
border-radius: 50% !important;
box-shadow: 0 2px 4px 1px rgb(0 0 0 / 20%) !important;	
}
.scrollFix {  
background-color: #E73A65;	
border-radius: 5px;
color: #efefef;padding: 10px;
font-size: 1rem;	
line-height: 1.35;
overflow: hidden; font-family:'Poor Story', 'Noto Sans', 'Noto Sans KR',NanumBarunGothic,KoPubDotumPM, NanumGothic, 'Malgun Gothic', sans-serif;	
}
.scrollFix img {border-radius: 3px;width:auto; height:100px; margin:0 auto;}
.scrollFix p {text-align: justify;padding: 0 !important;line-height: 1.6rem;}
.scrollFix a.facebook {
background: #3a589b;
padding: 4px 6px;
color: #fff;
border-radius: 2px;
}
a.home.blank {
}
.scrollFix.yellow a.home,
.scrollFix.yellow h3 {
color: #333 !important;	
}
#commune_net {
display: flex;
flex-wrap: wrap;
width: 90%;
margin: 0 auto;
font-family: "Apple SD Gothic Neo", 'Spoqa Han Sans', 'Noto Sans', 'Noto Sans KR',   KoPubDotumPM,  NanumGothic, dotum, gulim, verdana, palatino, georgia, arial, sans-serif;
font-size: 15px;
list-style-type: none;
}
.hex {
cursor:pointer;
position: relative;
visibility:hidden;
outline:1px solid transparent; }
.hex::after{
content:'';
display:block;
padding-bottom: 86.602%; }
.hexIn{
position: absolute;
width:96%;
padding-bottom: 110.851%; margin:0 2%;
overflow: hidden;
visibility: hidden;
outline:1px solid transparent; -webkit-transform: rotate(-60deg) skewY(30deg);
-ms-transform: rotate3d(0,0,1,-60deg) skewY(30deg);
transform: rotate(-60deg) skewY(30deg);
}
.hexIn * {
position: absolute;
visibility: visible;
outline:1px solid transparent; }
.hexLink {
display:block;
width: 100%;
height: 100%;
text-align: center;
color: #fff;
overflow: hidden;
-webkit-transform: skewY(-30deg) rotate(60deg);
-ms-transform: skewY(-30deg) rotate3d(0,0,1,60deg);
transform: skewY(-30deg) rotate(60deg);
} .hex img {
left: -100%;
right: -100%;
width: auto;
height: 100%;
margin: 0 auto;
-webkit-transform: rotate(0deg);
-ms-transform: rotate3d(0,0,0,0deg);
transform: rotate(0deg);
}
.hex p {
width: 100%;
padding: 5% !important;
box-sizing:border-box;
background-color: #903f98;
font-size: 13px;
top: 50%;font-weight:400;
padding-bottom:50% !important; 
line-height:inherit !important;
margin: 0 !important;
}
.hex h3 {
width: 100%;
padding: 5%;
box-sizing:border-box;
background-color: #3597d3;	
bottom: 45%;
padding-top:50%;
font-size: 13px;
z-index: 1;
font-weight:400;
}
.hex h3.all,
.hex p.all {
bottom: 0;
padding-top: 100% !important;
top: -45%;
}
.hex p.yellow, 
.hex h3.yellow, 
.hex p.all.yellow, 
.hex h3.all.yellow {
background-color: #fec300;color: #222;
}
.hex p.red, 
.hex h3.red,
.hex p.all.red, 
.hex h3.all.red {
background-color: #D95C5C;
}
.hex p.green, 
.hex h3.green,
.hex p.all.green, 
.hex h3.all.green {
background-color: #1aa153;
}
.hex p.blue, 
.hex h3.blue,
.hex p.all.blue, 
.hex h3.all.blue {
background-color: #3597d3;
}
#commune_net li.active.hex p,
#commune_net li.active.hex h3,
#commune_net li.active.hex h3.all,
#commune_net li.active.hex p.all,
#commune_net li.active.hex p.yellow, 
#commune_net li.active.hex h3.yellow, 
#commune_net li.active.hex p.all.yellow, 
#commune_net li.active.hex h3.all.yellow,
#commune_net li.active.hex p.red, 
#commune_net li.active.hex h3.red,
#commune_net li.active.hex p.all.red, 
#commune_net li.active.hex h3.all.red {
background:#E73A65 !important;
color :#fff !important;
}
.hex h3::after {
content: '';
position: absolute;
bottom: 0;
left: 45%;
width: 10%;
text-align: center;
border-bottom: 1px solid #fff;
} .hexLink:hover h3, .hexLink:focus h3,
.hexLink:hover p, .hexLink:focus p{ }  @media (min-width:1201px) { #commune_net{
padding-bottom: 4.4%;
}
.hex {
width: 33.3333%;
}
.hex:nth-child(12n+7) {
margin-left: 7.143%;
}
#commune_net {
max-width:310px;
} 
}
@media (max-width: 1200px) and (min-width:701px) { #commune_net{
padding-bottom: 6.4%
}
.hex {
width: 33.3333%; 
}
.hex:nth-child(10n+6){
margin-left:8.3%;  
}
#commune_net {
max-width:310px;
}
} @media (max-width: 700px) {  #commune_net{
padding-bottom: 7.4%;
max-width:50px;    top: 10px;
right: 10px;
}
.hex {
width:100%; }
.hex:nth-child(7n+5){ margin-left:12.5%; }
}
@media (max-width: 639px) { 
#commune_net li {
margin-bottom: 10px;
}
.gm-style-cc,
a[aria-label="Google 지도에서 이 지역 열기(새 창으로 열림)"] {
display: none !important;
}
.main-bottom.main-inner.unit {
padding:0;
}
.main-bottom.main-inner.unit .owl-nav .owl-prev {
left: -30px; 
}
.main-bottom.main-inner.unit .owl-nav .owl-next {
right: -30px;
}
#map_canvas {
height: 385px;
}
.kakaomap { height: 350px;}
header.event-header {
min-height: 100px !important;
}
body.single-unit header.event-header.hmap h1 {
font-size: 1.5rem;
top: inherit;
margin-top: 10px;
}
.mobile.left {
width: 60px;
height: 100%;
position: absolute;
top: 0;
z-index: 9;
}
.mobile.right {
width: 60px;
height: 100%;
position: absolute;
top: 0;
z-index: 9;right:0;
}
h2.widget-map .title-before {
top: -47px !important;
font-size: 1.6em !important;;
}
body.post-type-archive-commune .owl-carousel .owl-stage-outer {
height: 220px;
border-bottom: 1px solid;
padding:0;}
ul.catlist li {
float: inherit !important;
display: block !important;
margin-bottom: 5px;
width: 45px !important;
height: 45px !important;
font-size: .8rem !important;
line-height: 45px !important;
}
body.post-type-archive-commune li.bingo {
margin: 2% 1%;
flex: 1 1 48%;	
}	
body.post-type-archive-commune li.bingo h4 {
min-height: 70px;
}
ul.cat.left.bingo li {
margin: 1%;
}
ul.cat.left.bingo {
padding: 0;
}
.hex h3 {
bottom: 25%;
padding-top: 55%;
font-size: 12px;
opacity: .99;
top: -15px;
}
.hex p {
font-size: 11px;
top: 15px;
padding-bottom: 55% !important;}
.hex h3.all, .hex p.all {
top: -60%;
}  
.open-map-nav, 
ul.catlist.open,
ul.catlist {
display: none;
} }
@media (max-width: 400px) {  .hex h3.all, .hex p.all {
top: -60%;
} 
body.post-type-archive-commune li.bingo h4 {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden !important; }
.squares-in, .bingo-secion {height:120px !important;}	
}