/***********************************
 * MapSVG
 **********************************/
/* general */
.vii-mapsvg {border:2px solid #CFCFCF; border-radius:16px;}
.mapsvg-header {display:none !important;}

/* path area */
.vii-mapsvg .mapsvg path.mapsvg-region:not(.has-marker) {transition:0.3s ease; fill:rgba(0,0,0,0) !important; cursor:pointer}
.vii-mapsvg .mapsvg path.mapsvg-region.mapsvg-region-hover,
.vii-mapsvg .mapsvg path.mapsvg-region-active.mapsvg-region {fill:rgba(237,125,47,.5) !important;}
.vii-mapsvg .mapsvg path.mapsvg-region.has-marker {pointer-events:none; transition:unset; fill:rgba(0,0,0,0)}
.vii-mapsvg .mapsvg path.mapsvg-region.has-marker.active {animation:region-animation 1.2s ease-in-out infinite}

/* marker */
.vii-mapsvg .mapsvg-marker {width:56px; height:56px; transition:all 0.45s ease}
.vii-mapsvg .mapsvg-marker img {
    transform:scale(1);
    display:block; width:100%; height:100%; object-fit:contain;
}
.vii-mapsvg .mapsvg-marker.active img {animation:marker-animation 0.9s linear infinite}
.vii-mapsvg.map-hover .mapsvg-marker {opacity:0.3;}
.vii-mapsvg.map-hover .mapsvg-marker.active {opacity:1}

/* marker content */
.vii-mapsvg .mapsvg-marker[data-position]:before {
    content:attr(data-title); border-radius:50px;
    width:max-content; max-width:180px; min-height:15px; padding:10px 15px;
    font-family:var(--vii-font-primary); font-weight:700; font-size:14px;
    background:var(--vii-color-primary); color:var(--vii-color-on-primary);
    position:absolute; text-align:center; line-height:1.1; z-index:2;
    display:flex; align-items:center; justify-content:center;
    opacity:0; transition:opacity 0.45s ease;
}
.vii-mapsvg .mapsvg-marker[data-position="top"]:before {bottom:calc(100% + 14px); left:50%; transform:translateX(-50%);}
.vii-mapsvg .mapsvg-marker[data-position="left"]:before {right:calc(100% + 14px); top:50%; transform:translateY(-50%);}
.vii-mapsvg .mapsvg-marker[data-position="bottom"]:before {top:calc(100% + 14px); left:50%; transform:translateX(-50%);}
.vii-mapsvg .mapsvg-marker[data-position="right"]:before {left:calc(100% + 14px); top:50%; transform:translateY(-50%);}
.vii-mapsvg .mapsvg-marker[data-category="Expressway"]:before {max-width:220px;}
.vii-mapsvg .mapsvg-marker[data-position]:after {
    content:'';
    width:0; height:0;
    border-left: 14px solid transparent;
    border-right: 14px solid transparent;
    border-bottom: 14px solid var(--vii-color-primary);
    position:absolute; opacity:0; transition:opacity 0.45s ease; z-index:1;
}
.vii-mapsvg .mapsvg-marker[data-position="top"]:after {bottom:calc(100% + 7px); left:50%; transform:translateX(-50%) rotate(180deg);}
.vii-mapsvg .mapsvg-marker[data-position="left"]:after {right:calc(100% + 2px); top:50%; transform:translateY(-50%) rotate(-90deg);}
.vii-mapsvg .mapsvg-marker[data-position="bottom"]:after {top:calc(100% + 7px); left:50%; transform:translateX(-50%);}
.vii-mapsvg .mapsvg-marker[data-position="right"]:after {left:calc(100% + 2px); top:50%; transform:translateY(-50%) rotate(-90deg);}

.vii-mapsvg .mapsvg-marker[data-position].active:before,
.vii-mapsvg .mapsvg-marker[data-position].active:after {opacity:1}

/* region */
.vii-mapsvg__content-region {
    position:absolute; inset:0; pointer-events:none; z-index:100;
    display:flex; align-items:center; justify-content:center;
}
.vii-mapsvg__content-region-inner {
    width:10px; height:10px; position:relative;
}
.vii-mapsvg__content-region-item {
    position:absolute; left:100%; top:100%;

    display: inline-flex; align-items: center; justify-content: center;
    padding: 5px 20px; min-height: 46px; min-width: 210px; max-width:300px;
    border-radius: 16px; opacity:0;
    text-decoration: none; text-transform: uppercase; text-align:center;
    line-height: 1.1; letter-spacing: 0.04em; color: #fff;
    font-family: var(--vii-font-primary), sans-serif; font-weight: 500; font-size: var(--vii-size-14);
    background: linear-gradient(to right, var(--vii-color-blue) 0%, var(--vii-color-light-blue-2) 50%, var(--vii-color-light-blue-2) 50%, var(--vii-color-blue) 100%);
    background-size: 200% 100%;
    background-position-x: 0;
    transition: all .3s ease;
}
.vii-mapsvg__content-region-item.active {opacity:1}

/* bottom content */
.vii-mapsvg__bottom {
    min-height:84px; padding:14px 12px; border-top:2px solid #cfcfcf;
    gap:20px var(--vii-gap-container);
}
.vii-mapsvg__marker-item {
    --size-image:54px;
    display:flex; align-items:center; cursor:pointer;
}
.vii-mapsvg__marker-image {width:var(--size-image);}
.vii-mapsvg__marker-item-title {
    width:calc(100% - var(--size-image)); padding-left:8px;
    transition:var(--vii-transition);
}
.vii-mapsvg__marker-item:hover .vii-mapsvg__marker-item-title {color:var(--vii-color-orange);}

.vii-mapsvg__marker-item.region {--size-image:110px;}
.vii-mapsvg__marker-item.region .vii-mapsvg__marker-item-title {padding-left:16px;}
@media only screen and (min-width:1025px) {
    .vii-mapsvg__marker-item-title i, .vii-mapsvg__marker-item.area {display:none;}
    .vii-mapsvg .mapsvg-marker[data-position]:hover:before,
    .vii-mapsvg .mapsvg-marker[data-position]:hover:after {opacity:1}
}

/* marker item area */
.vii-mapsvg__marker-item.area {
    position:relative; padding-left:calc(var(--size-image) + 8px);
}
.vii-mapsvg__marker-item.area:before {
    content:'';
    width:var(--size-image); aspect-ratio:1; background:var(--vii-color-primary);
    position:absolute; top:50%; left:0; transform:translateY(-50%);
    border-radius:50%; transition:all 0.3s ease;
}
.vii-mapsvg__marker-item.area .vii-mapsvg__marker-item-title {
    min-height:var(--size-image); width:100%; padding-left:0;
    display:flex; align-items:center; font-weight:500;
}
.vii-mapsvg__marker-item.area:hover:before {background:var(--vii-color-orange);}

@keyframes marker-animation {
    0%, 100% {transform:scale(1)}
    33.33% {transform:scale(1.1)}
    66.67% {transform:scale(0.9)}
}
@keyframes region-animation {
    0% {fill:rgba(0,0,0,0)}
    50% {fill:var(--vii-color-orange)}
    100% {fill:rgba(0,0,0,0)}
}


/***********************************
 * MapSVG - Responsive
 **********************************/
@media only screen and (max-width:1360px) {
    /* bottom section */
    .vii-mapsvg__marker-item {--size-image:48px;}
    .vii-mapsvg__marker-item.region {--size-image:72px;}

    /* marker */
    .vii-mapsvg .mapsvg-marker {width:48px; height:48px;}
}
@media only screen and (max-width:1280px) {
    .vii-mapsvg__bottom {gap:20px 0;}
    .vii-mapsvg__marker-item {width:33.33%;}
}
@media only screen and (max-width:1024px) {
    .vii-mapsvg__bottom {padding:20px; justify-content:flex-start;}
    .vii-mapsvg__marker-item, .vii-mapsvg__marker-item.region {--size-image:40px;}
    .vii-mapsvg__marker-item.region .vii-mapsvg__marker-item-title {padding-left:8px;}
    .vii-mapsvg__marker-item-title {line-height:1.1;}
    .vii-mapsvg__marker-item-title span {display:block; font-weight:500; margin-bottom:4px;}
    .vii-mapsvg__marker-item-title i {
        font-size:12px; opacity:0.5; position:relative; font-style:normal;
        transition: opacity 0.3s ease;
    }
    .vii-mapsvg__marker-item-title i:not(:last-child):after {content:', '; display:inline;}
    .vii-mapsvg__marker-item:hover .vii-mapsvg__marker-item-title i {opacity:1;}
}
@media only screen and (max-width:1024px) and (min-width:769px) {
    .vii-mapsvg__marker-item:not(:nth-child(3n + 1)) {padding-right:20px;}
}
@media only screen and (max-width:812px) {
    .mapsvg-top-container {display:none !important;}
}
@media only screen and (max-width:768px) {
    .vii-mapsvg {border-radius:8px;}

    /* marker */
    .vii-mapsvg .mapsvg-marker {width:36px; height:36px; top: 12px; left: 12px;}

    /* marker > popup */
    .vii-mapsvg .mapsvg-marker[data-position]:before,
    .vii-mapsvg .mapsvg-marker[data-position]:after {display:none;}

    /* section bottom */
    .vii-mapsvg__marker-item {width:50%;}
}
@media only screen and (max-width:768px) and (min-width:541px) {
    .vii-mapsvg__marker-item:nth-child(even) {padding-right:20px;}
}
@media only screen and (max-width:540px) {
    /* marker */
    .vii-mapsvg .mapsvg-marker {width:24px; height:24px;}
    .vii-mapsvg .mapsvg-marker[data-category="Ready-built workshop/warehouse"] {top:27px;}

    /* section bottom */
    .vii-mapsvg__bottom {padding:16px 12px; max-height:475px}
    .vii-mapsvg__marker-item, .vii-mapsvg__marker-item.region {--size-image:32px;}
    .vii-mapsvg__marker-item {width:100%;}
}