@charset "UTF-8";
@media screen and (min-width:768px) and ( max-width:1200px){



body{
    background-color: #fff;
}


.main{
    position: relative;
    height: 121.667vw;
}
.main_title{
    width: 70.833vw;
    display: block;
    margin: 15vw auto 3.75vw;
}
.main_con{
   position: relative;
    left: 50%;
    transform: translateX(-50%);
    width: 79.167vw;
    height: 74.583vw;
}
.main_map{
    position: absolute;
    display: block;
    top: 0px;
    left: 14.583vw;
    width: 58vw;
    height: 68.5vw;
    margin: 0 auto;
}
.map_list{
    width: 21.667vw;
}
.map_list01{
    position: absolute;
    top: 8.333vw;
    left: 22.083vw;
}
.map_list02{
    position: absolute;
    top: 23.583vw;
    left: 57.5vw;
}
.map_list03{
    position: absolute;
    top: 41.667vw;
    left: 55vw;
}
.map_list04{
    position: absolute;
    top: 24.167vw;
    left: 3.333vw;
}
.map_list05{
    position: absolute;
    top: 58.75vw;
    left: 10vw;
}


.map_pin{
    width: 2.917vw;
    position: absolute;
}
.map_pin01{
    top: 22.5vw;
    left: 49.583vw;
}
.map_pin02{
    top: 29vw;
    left: 45.583vw;
}
.map_pin03{
    top: 36.167vw;
    left: 50.417vw;
}
.map_pin04{
    top: 38.5vw;
    left: 26.25vw;
}
.map_pin05{
    top: 46.083vw;
    left: 21.5vw;
}
/* .back_img {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 0;
    width: 106.667vw;
    z-index: -1;
} */
.back_img {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);

    width: 100vw;
    height: 150vw;

    background-image: url("../images/spot/list/back_img.jpg");
    background-position: center top;
    background-size: 170vw auto;
    background-color: #F9F4E6;
    z-index: -1;
}

.back_img img{
    width: 270.833vw;
    max-width: 270.833vw;
    left: 50%;
    transform: translateX(-50%);
    position: absolute;
    top: 112.5vw;
    background-color: #F9F4E6;
}
@media screen and (min-width: 3251px){
    .back_img img{
       width: 100vw;
    }
}


.con{
    display: flex;
    flex-wrap: wrap;
    width: 88.333vw;
    margin: 0 auto 100px;
    gap: 4.5vw;
}
.con_height{
    height: 8.333vw;
}
.con li{
    width: 26.25vw;
    margin-bottom: 4.167vw;
}
.con li img{
    margin-bottom: 2.083vw;
}
.con li h2{
    font-size: 1.667vw;
    font-weight: 600;
    color: #2E5785;
    margin-bottom: 0.833vw;

    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}
.con li p{
    font-size: 1.333vw;
    font-weight: 400;
    margin-bottom: 3.333vw;

    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}
.con li h3{
    display: block;
    font-size: 1.333vw;
    text-align: right;
    color: #2E5785;
  align-items: center;
}

.con li h3 .arrow{
  display: inline-block;
  margin-left: 0.333vw;
  transition: transform .3s ease;
}

.con li:hover h3 .arrow{
  transform: translateX(6px);
}


.other_link{
    width: 90.833vw;
    margin: 0 auto 80px;
}
.other_link img{
    margin-bottom: 3.333vw;
}

}