@charset "utf-8";

/*.pin {
    opacity: 0.5;
    border: 1px solid blue;
}*/

.map-info {
    max-width: 1322px;
}

.main .modal {
    max-width: 360px;
}

.pin {
    width: min(2.72%,36px);
    background-image: url("../img/company/associate/pin-red-2.png");
}

.pin.is-active, .pin:hover {
    background-image: url("../img/company/associate/pin-blue-2.png");
}

#pin1 {
    top: 46.9%;
    left: 70.9%;
}

#pin2 {
    top: 37.4%;
    left: 69.5%;
}

#pin3 {
    top: 40.4%;
    left: 80%;
}

#pin4 {
    top: 40.4%;
    left: 76.9%;
}

#pin5 {
    top: 47.9%;
    left: 76.9%;
}

#pin6 {
    top: 52.4%;
    left: 73.7%;
}

#pin7 {
    top: 52.4%;
    left: 75.9%;
}

#pin8 {
    top: 68.6%;
    left: 33.5%;
}

#pin9 {
    top: 68.4%;
    left: 35.4%;
}

#pin10 {
    top: 68.4%;
    left: 37.1%;
}

#pin11 {
    top: 68.4%;
    left: 39%;
}

#pin12 {
    top: 52.4%;
    left: 35.6%;
}

#pin13 {
    top: 58.8%;
    left: 32%;
}

#pin14 {
    top: 52.4%;
    left: 33%;
}

#pin15 {
    top: 58.6%;
    left: 34.2%;
}

#pin16 {
    top: 49.9%;
    left: 24.9%;
}

#pin17 {
    top: 59.9%;
    left: 25.6%;
}

#pin18 {
    top: 54.4%;
    left: 23%;
}

#pin19 {
    top: 59.7%;
    left: 38.7%;
}

#modal1{
    top: 7%;
    left: 58.6%;
}
#modal2{
    left: 57.25%;
    top: -2%;
}
#modal3{
    left: 67.75%;
    top: -3%;
}
#modal4{
    left: 64.5%;
    top: 0%;
}
#modal5{
    left: 64.5%;
    top: 11%;
}
#modal6{
    left: 61.5%;
    top: 9%;
}
#modal7{
    left: 63.5%;
    top: 2%;
}
#modal8{
    left: 21%;
    top: 29%;
}
#modal9{
    left: 23%;
    top: 24%;
}
#modal10{
    left: 25%;
    top: 21%;
}
#modal11{
    left: 26.75%;
    top: 29%;
}
#modal12{
    left: 23.25%;
    top: 1%;
}
#modal13{
    left: 19.75%;
    top: 16%;
}
#modal14{
    left: 20.75%;
    top: 9%;
}
#modal15{
    left: 21.75%;
    top: 19%;
}
#modal16{
    left: 12.75%;
    top: 5%;
}
#modal17{
    left: 13.25%;
    top: 8%;
}
#modal18{
    left: 10.75%;
    top: 7%;
}
#modal19{
    left: 26.25%;
    top: 16%;
}

.location-detail .box-map{width: 35.42%;}
.location-detail .box-txt{width: 60%;}
.location-detail .box-txt .list-btn li {
    width: 100%;
}
.location-detail .box-txt .list-btn li a {
    margin: 0;
}

@media (max-width: 1000px) {
    #modal1,
    #modal2,
    #modal3,
    #modal4,
    #modal5,
    #modal6,    
    #modal7,
    #modal8,
    #modal9,
    #modal10,
    #modal11,
    #modal12,
    #modal13,
    #modal14,
    #modal15,
    #modal16,
    #modal17,
    #modal18,
    #modal19 {
        top: 0;
        left: auto;
        right: 20%;

    }

    #modal1,
    #modal2,
    #modal3,
    #modal4,
    #modal5,
    #modal6,
    #modal7 {
        left: 30%;
        right: auto;

    }    
}

@media (max-width: 768px) {
    .location-detail .box-map{width: 100%;}
    .location-detail .box-txt{width: 100%; margin-bottom: 2rem}
    .location-detail .box-txt .list-btn li a {
        margin: 0 auto;
    }
    .map-info {
        min-height: 320px !important;
    }

    .main .modal {
        max-width: 250px !important;
        top: 50% !important;
        transform: translateY(-50%);
        -webkit-transform: translateY(-50%);
        left: 0 !important;
        right: 0 !important;
        margin: 0 auto;
    }
}