@charset "UTF-8";

body{
    background-color: #fff;
}


.main{
    position: relative;
    height: 1460px;
}
.main_title{
    width: 850px;
    display: block;
    margin: 180px auto 45px;
}
.main_con{
   position: relative;
    left: 50%;
    transform: translateX(-50%);
    width: 950px;
    height: 895px;
}
.main_map{
    position: absolute;
    display: block;
    top: 0px;
    left: 175px;
    width: 696px;
    height: 822px;
    margin: 0 auto;
}
.map_list{
    width: 260px;
}
.map_list01{
    position: absolute;
    top: 100px;
    left: 265px;
}
.map_list02{
    position: absolute;
    top: 283px;
    left: 690px;
}
.map_list03{
    position: absolute;
    top: 500px;
    left: 650px;
}
.map_list04{
    position: absolute;
    top: 290px;
    left: 40px;
}
.map_list05{
    position: absolute;
    top: 705px;
    left: 120px;
}

.map_pin{
    width: 35px;
    position: absolute;
}
.map_pin01{
    top: 270px;
    left: 595px;
}
.map_pin02{
    top: 348px;
    left: 547px;
}
.map_pin03{
    top: 434px;
    left: 605px;
}
.map_pin04{
    top: 462px;
    left: 315px;
}
.map_pin05{
    top: 553px;
    left: 258px;
}


/* .back_img {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 0;
    width: 1280px;
    z-index: -1;
} */
.back_img {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);

    width: 100vw;
    height: 1800px;

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

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


.con{
    display: flex;
    flex-wrap: wrap;
    width: 1060px;
    margin: 0 auto 100px;
    gap: 57.5px;
}
.con_height{
    height: 100px;
}
.con li{
    width: 315px;
    margin-bottom: 50px;
}
.con li img{
    margin-bottom: 25px;
}
.con li h2{
    font-size: 20px;
    font-weight: 600;
    color: #2E5785;
    margin-bottom: 10px;

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

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

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

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


.other_link{
    width: 1090px;
    margin: 0 auto 80px;
}
.other_link img{
    margin-bottom: 40px;
}